教程栏目

joomla中文网出品的官方教程

在本节中,将会完成留言板的界面。

 这一节的内容比教少,简单的html代码和css样式控制。

在上一节中我们讲到了MVC中的C (控制器和)V(视图)之间的关系。并且也清楚了joomla中输出的页面其实也就是V(视图)文件输出的页面。并且视图文件可以调用视图的模版进行显示。我们的guestbook的提交留言界面就是在视图的模板文件中做的。

修改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">
        <form action="<?php echo JRoute::_('index.php?option=com_guestbook&task=postmessage');?>" method="post">
         <fieldset>
                <div class="title subject">主题:</div>
                <div class="input"><input type="text" 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" ></textarea></div>
                
                <div class="line_nav"></div>
                
                <div class="title">作者:</div>
                <div class="input"><input type="text" name="author" size="40" /></div>
                
                <div class="line_nav"></div>
                
                <div class="title">Email: </div>
                <div class="input"><input type="text" name="email" size="40" /></div>
                
                <div class="line_nav"></div>
                
          </fieldset>
          <div><button type="submit" class="button">确认提交</button></div>
        </form>
    </div>
</div>

 

view.html.php文件保持不变即可:

 

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

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

/**
 * Guestbook组件的HTML视图类
 */
class GuestBookViewGuestBook extends JView
{
	public $msg0  = "welcome to zmax99.com!";
	
	function __construct()
	{
		parent::__construct();
	}
	
	function display($tpl = null)
	{
		$msg1 = "Hello World";
		$this->assignRef( 'msg1', $msg1 );
		parent::display($tpl);
	}
}

在根目录下增加一个文件夹CSS。并在其中加一个文件guestbook.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;
}

下面输出结果截图:

 

一个留言板的提交留言页面就完成了。

在上述代码中唯一需要解释的地方那个就是:

$document = &JFactory::getDocument();
$document ->addStyleSheet("components/com_guestbook/css/guestbook.css");

这代码的主要作用就是在页面引人一个CSS文件。首先调用Joomla的工程类 JFactory得到一个文档对象 然后调用文档对象的addStyleSheet方法引人css.


在下一张 我们将会探讨如何如何接受前台页面提交的数据。敬请期待!

于2014-02-23 更正:

以上的代码虽然没有问题,能够正常执行,但是这样写的代码的可读性不高,我们可以采取分段的思路来书写代码,使用loadTemplate方法来调用,一段典型的代码如下:

<thead><?php echo $this->loadTemplate('head');?></thead>
<tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
<tbody><?php echo $this->loadTemplate('body');?></tbody>

 另外joomla提供了一些自动产生html标签的方法,我们也应该采用,一边书写更加规范的代码!

评论 (0)

  • 最新在前
  • 最佳在前

第1章 Joomla入门教程

第3章 C计划

第5章 E计划

第6章 H计划

第7章 G计划

第9章 运行环境

第11章 主从与集群

第12章 模块开发

第13章 插件开发

第14章 j2.x组件开发教程

第15章 页面定制教程

第16章 页面构造器