"One" inbox
Analysis
Controller: EmailController.class.php
Method: Recbox (full name receive box Inbox)
Template file: recbox.html
Steps:
First Step : Create method Recbox to read the data presentation template file
From the first analysis, the sender from_id should be displayed for the Inbox. The Sp_user user table needs to be associated, so the next table query
Main Table: Sp_email mail table (alias T1); From table: Sp_user user table (alias T2);
Association condition: t1.from_id = t2.id;
Native SQL statement: In fact, compared with the Outbox, the last condition is different. Outbox is from_id, Inbox is to_id
as as Join as T2 on t1.to_id=t2.id where t1.to_id= current user ID;
Next go to Navicate after the successful run, make sure the SQL statement is correct. Then go to the thinkphp and perform a coherent operation.
// recbox Inbox Get Data presentation template Public function Recbox () { //
where t1.to_id= the current user ID; Get Data $data = M (' Email ')->field (' T1.*,t2.truename as Truename ')->alias (' T1 ') Join(' left join Sp_user as T2 on T1.to_id=t2.id ')->where (' T1.to_id= '. session (' ID ')) Select (); Dump ($data); die ; }
Note: Considerations for session-related testing
(1) On the user's computer, the same browser cannot log on to different users. Because the session is overwritten, this results in a situation where multiple Windows cannot be logged in to multiple users
(2) Workaround:
① can only open another browser to log on to other users, so it is also on the same computer to log on multiple users;
② Open a new window, turn on the browser stealth mode, so that the session will not be recorded, it will not produce the session of the overlay
The second step: pass the data to the template, the variable assignment, the presentation template. Final complete code
//recbox Inbox Get Data presentation template Public functionRecbox () {//Get Data $data= M (' Email ')->field (' T1.*,t2.truename as Truename ')->alias (' T1 ')Join(' left join Sp_user as T2 on T1.to_id=t2.id ')->where (' T1.to_id= '. session (' ID '))Select (); //passing data to a template $this->assign (' Data ',$data); //Presentation Templates $this-display (); }
Step three: Copy the template file recbox.html to the specified file and replace the static resource path
Fourth step: Modify the template recbox.html, show the data
Similar to Outbox, note: There is a read state, read and unread. Need to make a distinction and operation here
Fifth step: View the contents of the message
Modify the template, use layer to view the message content,
<! DOCTYPE html>Inbox<table border= "1" cellspacing= "0" cellpadding= "ten" > <thead> <tr><td> serial number </td><td& gt; Sender </td><td> title </td><td> accessories </td><td> content </td><td> Send time </td ><td> status </td><td> operations </td></tr> </thead> <volist name= "Data" Id= "Vol" > <tr> <td>{$vol.id}</td> <td>{$vol.truename}</td> <td>{$vol. title|msubstr=###,0,10}</td><td>{$vol. filename|msubstr=###,0,16}<notempty name= "vol.filename" ><a href= "__controller__/download/id/{$vol. ID}" >
"Download" </a></notempty>
</td><td>{$vol. content|msubstr=###,0,10}</td><td>{$vol. addtime|Date= ' y-m-d h:i:s ',###}</td><td><ifCondition= "$vol. Isread = = 0 "><span style=" color:red "> Unread </span><Else/><span style= "Color:green" > Read </span></if></td> <td> <a href= "javascript:;"class= "Showbtn" Data= "{$vol. ID} "" data-title= "{$vol. Title} "> View </a> | <a href="__controller__/edit/id/{$vol. ID} "class=" Editbtn "> Delete </a> </td> </tr> </volist></table><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js "></script><script type= "Text/javascript" src= "__public__/admin/plugin/layer/layer.js" ></script><script type= "Text/javascript" > </script><script type= "Text/javascript" >$ (document). Ready (function(){ $('. Showbtn '). On (' click ',function(){ //var title = $ (This). Parents (' tr '). Children ("TD"). Get (1). InnerHTML; Console.log (title)//Get ID varID = $ (this). attr (' Data '); vartitle = $ (This). attr (' Data-title '); //iframe LayerLayer.open ({type: 2,title: Title,Shadeclose:true,Shade: 0.3,//ShadowsArea: [' 600px ', ' 50% '],content: ' __controller__/showcontent/id/' +id//URL of the iframe }); }) })</script></body>Sixth step: Add Query GetContent method presentation content
At the time of query, in order to avoid the user to obtain the method of the request content, and then arbitrarily change the ID in the back to get someone else's message, you can add a conditional limit when querying. Restrict the query to only your own messages
//View Public functionshowcontent () {//Receive ID $id= I (' get.id '); //Querying Data $data= M (' Email ')->where ("id =$idand to_id = ". session (' ID ')"), Find ($id);//here plus limit, can only see their own mail//output content, and restore the transferred characters//echo $data [' content ']; EchoHtmlspecialchars_decode ($data[' Content ']); }
"Two" message read status changes
Perfect: Set the message read status, perform the Click to view operation to change the read state
Combine the above code to change the message status when viewing the content of the message. So you can add a way to change the message state to the Showcontent method.
First step: Modify the GetContent method to modify the message read state when reading the content
After analyzing the method of getting the content of the message, we can know that the query data operation $data If it is true, then it is possible to modify the file status. So add the update database operation inside
if ($data[' isread '] = = 0) {// Update Database M (' Email ')->save (array(' id ' = =$id, ' isread ' = + 1)); }
At this point, when you click View, although the read state of the database becomes 1, the page needs to be refreshed before it is updated, and the page cannot be updated automatically. Next, modify the template to let the page refresh automatically
Step Two: Refresh when you close the bullet box
When you query the layer manual, you will find an end method that fires when you close the frame
So next add the End method: Refresh the page when it is closed
Step three: Although it is now possible to refresh the file status after viewing it, the current state will refresh regardless of status. So it needs to be modified to be set to refresh only if the status is unread
Modify a template to add a custom property, pass parameters
class data-status= "{$vol. Isread}" data= "{$vol. ID}" "data-title=" {$vol. Title} "> View </a >
jquery Judgment:
var isread = $ (this). attr (' data-status '); End:function() { // close operation, refresh current page //window.location.href = Location.href; or window.location.reload (); if (isread = = 0) { window.location.href = location. href; } }
New message prompt in "three" station (real-time alert function of mail)
Because it is the real-time function (interval update data), so here using the Ajax method, the partial refresh page
The so-called real-time, not necessarily accurate to the second, because this will increase server consumption. Generally can be mastered in 5 minutes, so that will not affect the user experience
Analysis: Ajax, Timers (settimeout delay one timer, setinterval recurrence timer)
Principle: After the page is loaded, the AJAX request is constantly sent via the timer to get the number of messages, and then the template is displayed
The following steps are introduced
First step: Writing page index/index.html loading events
<script type= "Text/javascript" > $ (function() { // repeatability Timer, 5 Seconds to send setinterval (' Getmsgcount () ', (); }) // Ajax Request Method function Getmsgcount () {// send Ajax request function(data) { /// corresponding processing code }); } </script>
The second step: Write the GetCount method in the email controller, output the number of unread messages (the current user's unread mail)
//gets the number of unread messages for the current user Public functionGetCount () {if(is_ajax) {//instantiating a model $model= M (' Email '); //Query Current User--number of unread messages $count=$model->where ("Isread = = 0 and to_id =". session (' ID '))Count(); //Output Number Echo $count; } }
Next Test
Send a request every 5 seconds, here to see the number of outputs
The third step: in the meter board file to modify the subsequent operations, the number of unread messages will be obtained on the page display
class= "Emailcount" >0</a> // Here The default is 0//ajax request method function Getmsgcount () { // send Ajax request function(data) { console.log (' 2 ') $ ('. Emailcount '). HTML (data);} ); }
Fourth Step: Click the message button to jump to the inbox. Add a link to a message
class= "Emailcount" >0</a>
Note: Because the OA system requires that a new page be opened in an IFRAME, the target property must be the target's name value
So continue to change the code above to
<a href= "{: U (' Email/recbox ')}" target= "iframe Name value class=" Emailcount ">0</a>
.
Video Learning Transcript---thinkphp---thinkphp perfect station inner letter function