本节主要完成的任务就是在前台新建一个显示留言的菜单，并且点击后能够显示所有留言。逻辑很简单，在数据库查询得到数据，然后显示出来。利用MVC，就是C发出查询的命令，M去查询获取数据，V显示查询的数据。

 基本上算是复习前面所学了：

1，增加一个菜单选项。

     为了增加一个菜单选项，我们需要在组件的视图文件夹下views下新建一个新的视图文件夹showmessagelist。一个视图需要两部分，视图类 (view.html.php)，视图布局（tmpl）.在views下面新建文件夹tmpl ，新建文件view.html.php文件，然后在tmpl下新建default.php文件，default.xml文件。

default.xml文件就是告诉joomla这个视图可以作为菜单类型。

default.xml文件内容如下：

<?xml version="1.0" encoding ="utf-8"?>
<metadata>
    <layout title="显示留言页面">
        <message>
            该页面显示留言信息
        </message>
    </layout>
</metadata>

2，实现输出页面，也就是视图类将要用到的模版。

default.php文件内容如下：

<?php
//留言板提交留言界面
defined('_JEXEC') or die('你不能直接访问这个文件！');

//加载css文件
$document = &JFactory::getDocument();
$document ->addStyleSheet("components/com_guestbook/css/guestbook.css");
?>
<div class="gb_head">
    <span> 留言板组件v1.0  zmax99.com</span>
</div>
<div class="gb_page">
    <div class ="type postmessage">
        <span>显示留言</span>
    </div>
    <div class="gb_body">
        <div class="message_count" >
         你好，你一共有<?php echo count($this->messages);?>条留言。
        </div>
        
        <?php
            $count = 0;
            foreach ($this->messages as $message):
            $count++;
        ?>
         <div class="num">第<?php echo $count;?>条留言，内容如下：</div>
         <div class="message">
                <div class="title subject">主题：</div>
                <div class="input"><input type="text" value="<?php echo  $message->message_subject;?>" name="subject" size="40"/></div>
                
                <div class="line_nav"></div>
                
                <div class="title text">正文：</div>
                <div class="input"><textarea cols="70" rows="5" name="content" ><?php echo $message->message_content;?></textarea></div>
                
                <div class="line_nav"></div>
                
                <div class="title">作者：</div>
                <div class="input"><input type="text" name="author" size="40" value="<?php echo $message->message_author;?>" /></div>
                
                <div class="line_nav"></div>
                
                <div class="title">Email: </div>
                <div class="input"><input type="text" name="email" size="40" value="<?php echo $message->message_author_email;?>" /></div>
                
                <div class="line_nav"></div>
                
          </div>
          <div class="message_line_nav"></div>
        <?php endforeach;?>
    </div>
</div>

解释一下上面的代码：

1，$document->addStyleSheet（）；加载页面需要用到的css文件。在前面的章节中已经讲过。

2，最难理解的是$this->messages.首先this值的是视图类，其次，messages是我们从视图类注入到模版的数据。如果对这个地方有疑问，请注意视图类的代码。

3，视图类的实现

  view.html.php文件的内容如下：

// 禁止直接访问这个文件
defined('_JEXEC') or die ('you can not access this file!');

jimport('joomla.application.component.view');

/**
 * Guestbook组件的 显示所有留言页面
 */
class GuestBookViewShowMessageList extends JView
{
	
	function __construct()
	{
		parent::__construct();
	}
	
	//$tpl决定显示的是哪一个模版
	function display($tpl = null)
	{
	    //得到 messages
		$messages = & $this->get("Messages");
		
		// 注入数据到视图模版
		$this->assignRef('messages',$messages);
		
		parent::display($tpl);
	}
}

上面的代码比较简洁，它主要完成两件事，从模型层获取数据，将获取的数据注入到模版中。$this->get("Messages").这个函数会指定和视图类同名的模型类中的getMessages方法。利用get方法从模型类获取数据。$this->assignRef('messages',$messages)将数据注入到模版，在模版中我们可以直接用$this->messages来代替$messages。

4，模型类的实现

 因为要添加模型，在models目录下增加一个文件showmessagelist.php

showmessagelist.php文件内容如下：

 
defined('_JEXEC') or die ('Restricted Access');

//导入JModel类的实现文件
jimport('joomla.application.component.model');

class GuestbookModelShowMessageList extends JModel
{
	/**
	 * 从数据库中读取数据
	 *
	 * @access  publice
	 * @return messages 
	 */
	 function getMessages()
	 {
	    $db = & JFactory::getDBO();
		
		$query = $db->getQuery(true);
		
		$query->select("*")->from( $db->nameQuote('#__guestbook') );
		$db->setQuery( (string)$query );
		
		$messages = $db->loadObjectList();
		
		
		 return $messages;
	 }
}

在这里我们看到了getMessages方法的实现。其原理非常简单，查询数据然后返回结果。

控制器就无需改变了。

5，修改css文件：

.gb_head {
    color: #DCDC84;
    font-family: 宋体;
    font-size: 20px;
    font-weight: bolder;
    margin: 14px 0;
}

.type {
    color: #4D4D88;
    font-size: 17px;
    font-weight: bolder;
}

.gb_page {
    padding-left: 15px;
}

.gb_body  input:focus{
    border: solid 1px #888ddd;
}

.title {
    color: #626262;
    float:left;
}


.line_nav {
    margin: 10px 0;
}

.message_count {
    border: 1px solid #DEDEDE;
    color: #AD9217;
    font-size: 17px;
    padding: 10px;
}

.num {
    color: #2E8B57;
    padding: 15px 0;
}

.message {
    border: 1px outset #DEDEDE;
    padding: 20px;
}

.message_line_nav {
    background: none repeat scroll 0 0 #DEDEDE;
    height: 10px;
    width: 100%;
}

到此，我们就完成了显示所有留言的功能。

下面是一个截图;

本节到此结束。

如果对执行流程有疑惑，请阅读上一节。