implement a simple inbox with notifications in yii - yii

Question

I want to implement a simple inbox in yii. it reads messages from a database table and show it.
but i don't know how i should show read and unread messages in different styles and how i can implement a notification for new messages.
i searched a lot but only found some extensions and i don't want to use them.
it is so important to find how i can show unread messages in a different way
any initial idea would help me
a part of mailbox extension code :
public function actionInbox($ajax=null)
{
$this->module->registerConfig($this->getAction()->getId());
$cs =& $this->module->getClientScript();
$cs->registerScriptFile($this->module->getAssetsUrl().'/js/mailbox.js',CClientScript::POS_END);
//$js = '$("#mailbox-list").yiiMailboxList('.$this->module->getOptions().');console.log(1)';
//$cs->registerScript('mailbox-js',$js,CClientScript::POS_READY);
if(isset($_POST['convs']))
{
$this->buttonAction('inbox');
}
$dataProvider = new CActiveDataProvider( Mailbox::model()->inbox($this->module->getUserId()) );
if(isset($ajax))
$this->renderPartial('_mailbox',array('dataProvider'=>$dataProvider));
else{
if(!isset($_GET['Mailbox_sort']))
$_GET['Mailbox_sort'] = 'modified.desc';
$this->render('mailbox',array('dataProvider'=>$dataProvider));
}
}

Answer 1

First of all the scripts things should be in the view. For you problem I would do something like
In the controller
$mailbox = Mailbox::model()->inbox($this->module->getUserId()); //I assume this returns the mailbox from that user?
$this->renderPartial('_mailbox',compact('mailbox ')); //compact is the same as array('mailbox'=>$mailbox) so use whatever you prefer.
In the view I would simply do something like this
<?php foreach($mailbox->messages as $message):
$class = ''; //order unread if you want to give both a different class name
if($message->read): //if this is true
$class = 'read';
endif; ?>
<div id='<?= $message->id ?>'class='message $class'> <!-- insert whatever info from the message --></div>
<?php endforeach; ?>
So now it will add the class read to every message that has been read. Then in CSS you can simply change it style. I hope this is enough information? I use foreach(): endforeach; and if(): endif; in the view files, but you could use foreach() {}, but I prefer foreach, as it looks better combined with HTML.
EDIT about you second question, how do they become read. This you could do with JQUERY. example.
$(".message").on("click", function() {
var id = $(this).attr('id');
$.ajax {
type:"POST",
url: "controller/action/"+id; //the controller action that fetches the message, the Id is the action variable (ex: public function actionGetMessage($id) {})
completed: function(data) {
//data = the message information, you might do type: 'JSON' instead. Use it however you want it.
if(!$(this).hasClass("read"))
$(this).addClass("read"); //give it the class read if it does not have it already
}
}
});
This simply gives the div the class read and it should look like the other items with the class read.