Joomla!-开源天空

现在我们已经基本完成了后台管理页面，现在进行前台列表页面的开发，通常一个前台列表页面涉及到三个文件，一个是model目录下的数据层文件，一个是view.html.php视图文件，另一个则是 tmpl/default.php模板文件。

我们来创建一个新的视图 latest，首先在 views 目录下建立一个 lastest目录以及lastest/tmpl目录。

我们先来完成model下的数据层文件 showcase.php

<?php
/**
 * Hello Model for Hello World Component
 *
 * @package    Joomla.Tutorials
 * @subpackage Components
 * @link http://dev.joomla.org/component/option,com_jd-wiki/Itemid,31/id,tutorials:components/
 * @license  GNU/GPL
 */

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die();

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

class ShowcaseModelLastest extends JModel
{

 var $_data;

 function _buildQuery()
 {
  $query = ' SELECT * ' . ' FROM #__showcase order by id desc';
  return $query;
 }

 function getData()
 {
  if (empty( $this->_data ))
  {
      $limit  = JRequest::getVar('limit', 0, '', 'int');
      $limitstart = JRequest::getVar('limitstart', 0, '', 'int');
      $query = $this->_buildQuery();
   
   $this->_data = $this->_getList( $query,$limitstart, $limit );
  }

  return $this->_data;
 }
 
  function getTotal($state = 1)
  {
   // Lets load the content if it doesn't already exist
   if (empty($this->_total))
   {
    $query = $this->_buildQuery($state);
    $this->_total[$state] = $this->_getListCount($query);
   }
   return $this->_total[$state];
  } 
 
}

我们可以参考后台管理界面的models的文件，这个有两个重要的函数，一个是返回当前页面的涉及到的记录，另一个是返回所有数据记录的总数。

第二是创建一个view.html.php文件。

 <?php
/**
 * Hello World default controller
 *
 * @package    Joomla.Tutorials
 * @subpackage Components
 * @link http://dev.joomla.org/component/option,com_jd-wiki/Itemid,31/id,tutorials:components/
 * @license  GNU/GPL
 */

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

class ShowcaseViewLastest extends JView
{
 function display($tpl = null)
 {
  $lang = & JFactory :: getLanguage();
    $lang->load('com_showcase');  
  $document =& JFactory::getDocument();
  $document->setDescription(JTEXT::_('SHOWDES')); 
  $document->addStyleSheet('/components/com_showcase/css/showcase.css'); 
  
  $limit  = 5;
  $limitstart = JRequest::getVar('limitstart', 0, '', 'int');
  JRequest::setVar('limit', (int) $limit);
  $total  = & $this->get( 'Total');

    jimport('joomla.html.pagination');
    $pagination = new JPagination($total, $limitstart, $limit);
    $this->assignRef('pagination', $pagination);

  
  $items = & $this->get( 'Data');
  $this->assignRef('items',$items);
  parent::display($tpl);
 }

 function &getItem($index = 0)
 {
  $item =& $this->items[$index];
  $item->readmore_link = JRoute::_('index.php?option=com_showcase&view=detail&pid='.$item->id);
  return $item;
 }

}
?>
这个视图文件，对页面进行了分页，我们看到每5条记录为一页，随后我们会将写在程序的数值5，改为参数设置。

第三步，让我们修改一个模板文件

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');

$k = 0;
for ($i=0, $n=count( $this->items ); $i < $n; $i++)
{
 $this->item = & $this->getItem($i);
?>

<table cellpadding="0" cellspacing="0" width="100%" border="0" class="lb">
 
 <tr class="ln">
  <td width="100%"><a href="/<?php echo $this->item->readmore_link;?>" align="right" class="listingName" target="_blank"><?php echo $this->item->title;?></a>
   <?php if($this->item->hits>20) {?>
   <img src="/components/com_showcase/images/hot.png" mce_src="/components/com_showcase/images/hot.png" width="27" height="11" alt="Hot" />
   <?php }?>
  </td>
  <td align="left"><!--<div class="summDownload"><a href="/<?php echo $this->item->urldownload;?>" target="_blank"><img src="/components/com_showcase/images/b_download2.png" mce_src="/components/com_showcase/images/b_download2.png" width="79" height="20" alt="Download" /></a></div>--></td>
 </tr>
 
 <tr><td colspan="2" class="ltd">
 <div style="float:left">
 <?php for($k=0;$k<=$this->item->rank-1;$k++) {?>
 <img src="/components/com_showcase/images/star_10.png" mce_src="/components/com_showcase/images/star_10.png" width="14" height="14" hspace="1" />
 <?php }?>
 <?php for($k=0;$k<=5-$this->item->rank-1;$k++) {?>
 <img src="/components/com_showcase/images/star_00.png" mce_src="/components/com_showcase/images/star_00.png" width="14" height="14" hspace="1" />
 <?php }?>
 </div><div class="rcount">
 <?php echo $this->item->hits;?> views</div></td></tr>

 <tr>
  <td class="listingSummary" colspan="2">
  <img border="0" src="/<?php echo $this->item->imgfilename;?>" width="140" height="95" class="listingPhoto" />
  <?php echo strip_tags($this->item->description);?>
  </td>
 </tr>

 <tr>
  <td class="website" colspan="2">
  <?php echo $this->item->license;?> &nbsp;|&nbsp;
  <a href="/<?php echo $this->item->urldemo;?>" target="_blank">Demo</a> &nbsp;|&nbsp;
  Hits:<?php echo $this->item->hits; ?> &nbsp;|&nbsp;
  Downloads:<?php echo $this->item->downloads; ?> &nbsp;|&nbsp;
  </td>
 </tr>

</table>

<?php
} 
?>

<?php echo $this->pagination->getPagesLinks(); ?>

其实现在我们已经可以访问列表文件了

http://www.maycode.com/index.php?option=com_showcase&view=lastest

别忘了，还需要有css文件和images文件，我们在前台的components/com_showcase目录下创建了这两个目录。因为有历史的原因，所以不太符合规范，按照Joomla! 1.5规范，应该将先创建asset目录，然后将这两个目录放在asset目录下。

附件中是涉及的三个文件，以及相关的图片和css文件，图片和css文件大部分直接取自Joomla!的extension部分。看起来还不错，效果如图：

访问一下本站的模板下载吧：http://www.maycode.com/index.php/joomla-template.html

在随后的文章中，我们会修改这个页面如何设置pathway ，如何设置组件参数。

---

收藏此文章：