< 返回 8.4 完成编辑页面 - E计划

上一节,我们已经完成了视图的显示,并且知道了视图的最终渲染代码是在default.php中。在本节,就编码完成编辑页面

1,本节目标


编码完成编辑页面

2,编辑页面


当我们知道编辑页面的代码是写在default.php这个文件中之后,接下来的工作就基本和joomla框架无关了,只需要正常的使用HTML输出表单即可。简单的实例代码如下:

<form name="adminForm" class="form-horizontal" action="index.php" method="post" enctype="multipart/form-data">
	<!-- 编辑表单 -->
	<div class="control-group">
		<div class="control-label"><label >标题</label></div>
		<div class="controls"><input name="title" type="text" /></div>
	</div>
	<div class="control-group">
		<div class="control-label"><label >作者</label></div>
		<div class="controls"><input name="author" type="text" /></div>
	</div>
	<div class="control-group">
		<div class="control-label"><label >价格</label></div>
		<div class="controls"><input name="price" type="text" /></div>
	</div>
	<div class="control-group">
		<div class="control-label"><label >ID</label></div>
		<div class="controls"><input name="id" type="text" /></div>
	</div>
	
	<input type="hidden" name="option" value="com_zmaxbook" />
	<input type="hidden" name="id" value="" />
	<input type="hidden" name="task" value="" />
	
	<button type="submit"  class="btn btn-primary">保存</button>
</form>

 刷新后,页面效果如下:

joomla编辑表单.png

上面的代码为简单的HTML基础,如果感觉阅读有困难,建议自行查找相关资料。另外,可以看到图中的第一个红框栏目有点错位,这是因为我们没有在视图中设置页面的标题,导致出现空格。解决的方法就是在视图中试设置页面的标题

编辑view.html.php文件,实现display方法,增加视图的标题设置,代码如下:

class zmaxbookViewItem extends JViewLegacy
{
	public function display($tpl = null)
	{
		JToolbarHelper::title('书本管理 - 编辑书本', 'edit');
		parent::display($tpl);
	}
}

效果如下:

joomla编辑页面设置标题.png

此时就好看多了。在视图渲染的时候默认会执行视图的display方法,这个方法在JViewLegacy父类中实现,主要负责将视图和布局进行关联并且输出。因为我们需要增加标题设置,所以只需要简单的重写父类的display方法,增加输出标题的相关代码另外,也可以继续改进保存按钮,使用工具栏方法,将按钮添加到工具栏上,以便页面更加的美观。代码如下:

class zmaxbookViewItem extends JViewLegacy
{
	public function display($tpl = null)
	{
		JToolbarHelper::title('书本管理 - 编辑书本', 'edit');
		JToolBarHelper::save('item.save');//保存按钮
		parent::display($tpl);
	}
}

效果如下:

joomla编辑页面保存按钮.png

3,为页面提供初始数据


因为是编辑具体的一条记录,提供一个空的表单显然是不行的,下一步就是获得表单的数据。在编辑的时候,我们已经传递了需要编辑记录的ID,因此,可以通过ID,找到需要的数据,再把数据注入到表单。实现代码如下:

<?php
/**
 *	description:ZMAXBOOK组件 Items视图 布局文件
 *  author:min.zhang
 *	Url:http://www.zmax99.com
 *  copyright:南宁市程序人软件科技有限责任公司保留所有权利
 *  date:2021-05-24
 *  version:v2.0.0
 *  @license GNU General Public License version 3, or later
 */

defined('_JEXEC') or die;
//STEP 1:获得需要编辑记录的ID
$app = JFactory::getApplication();
$id = $app->input->get("id",'0','INT');

//STEP 2:查询数据库,得到编辑记录的详情
$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query->select("*")->from("#__zmaxbook_item")->where("id=".$db->quote($id));
$db->setQuery($query);
$item = $db->loadObject();
?>
<form name="adminForm" class="form-horizontal" action="index.php" method="post" enctype="multipart/form-data">
	<!-- 编辑表单 -->
	<div class="control-group">
		<div class="control-label"><label >标题</label></div>
		<div class="controls"><input name="title" type="text" value="<?php echo $item->title;?>" /></div>
	</div>
	<div class="control-group">
		<div class="control-label"><label >作者</label></div>
		<div class="controls"><input name="author" type="text" value="<?php echo $item->author;?>"/></div>
	</div>
	<div class="control-group">
		<div class="control-label"><label >价格</label></div>
		<div class="controls"><input name="price" type="text"  value="<?php echo $item->price;?>"/></div>
	</div>
	<div class="control-group">
		<div class="control-label"><label >ID</label></div>
		<div class="controls"><input name="id" type="text" value="<?php echo $item->id;?>" /></div>
	</div>
	
	<input type="hidden" name="option" value="com_zmaxbook" />
	<input type="hidden" name="task" value="" />
</form>

上面解决问题的逻辑非常的清晰,看一下注释即可理解。现在页面的效果如下:

joomla编辑页面注入数据效果.png

这样,编辑页面基本就有点雏形了。按照设想,用户在编辑页面填入相应的信息,然后点击保存按钮并关闭按钮,将新的数据存储到数据库即可完成。

说明一下,JToolbarHelper类关于保存按钮的方法一共有4个,分别是:

JToolBarHelper::apply('item.apply');//保存
JToolBarHelper::save('item.save');//保存并关闭
JToolBarHelper::save2new('item.save2new');//保存并新建
JToolBarHelper::save2copy('item.save2copy');//保存为副本

这4个按钮没有本质的区别,仅仅只是CSS样式和按钮文本有所不同而已,最终执行何种动作,还是由控制器的逻辑来决定(也就是传递的第一个参数:item.apply) .这些按钮的本质就是生成一段HTML代码。详细说明请查看使用工具栏

4,实现保存功能


如果点击“保存并关闭”按钮,此时是没有响应的。打开浏览器的控制台,发现存在一个JS错误。

joomla编辑保存按钮无效.png发现这是core.js代码报错,点击详情看到错误代码如下:

joomla_JS依赖.png

提示告诉我们core.js代码需要表单的id为adminForm。因此,需要修改html代码,为form表单增加id属性

<form name="adminForm"  id="adminForm" class="form-horizontal" action="index.php" method="post" enctype="multipart/form-data">

 修改完成后,再次点击保存按钮,发现此时可以提交。但页面出现了找不到视图的错误。这个错误并不是本节的重点,重点是点击保存按钮,表单可以提交了。

表单提交到了什么地方?

在form中,设置了action=“index.php”.说明这个表单将会提交到index.php这个文件。另外,除了表单的内容字段外,我们还另增加了两个隐藏的input.

	<input type="hidden" name="option" value="com_zmaxbook" />
	<input type="hidden" name="task" value="" />
  • 一个的名称是option,值为com_zmaxbook.
  • 一个的名称是task,值为空。这个task的实际上是在点击按钮时通过JS代码动态设置进去的,当点击保存并关闭时,设置的值为item.save

 也就是,在提交表单内容到index.php的时候,还附带了option=com_zmaxbook,task=item.save这个两个参数。

 此时,可以按照组件执行的路由理论来重新的走一次这个地址:index.php

  • STEP 1:因为在后台,所有会执行administrator/index.php文件
  • STEP 2:在index.php中,系统会检查option参数,发现option参数=com_zmaxbook。
  • STEP 3:当检测到option参数为com_zmaxbook后,系统将控制权转交给com_zmaxbook组件
  • STEP 4:执行com_zmaxbook下面的入口点文件,也就是zmaxbook.php文件
  • STEP 5:在入口点文件中,系统会检查是否存在task变量。如果存在,则进入相应的控制器,执行相应的方法。在本案例中,task=item.save.因此会执行item控制器。也就是item.php文件【技术细节:当发现task变量存在值,系统会判断控制的格式是否为点分的方式,如果是以点分隔(item.save),那么系统会重新设置task的值为点分割的第二部分save,新的task=save 】
  • STEP 6:在item控制器中,发现task=save,因此,系统默认执行task指定的方法,也就是save方法

如何获得提交表单的数据?

按照之前的理论,现在系统会执行item控制的save方法,因此,需要在save方法中来处理表单的保存。

修改item.php文件,和实现edit方法一样,在里面增加save方法,代码如下:

class zmaxbookControllerItem extends JControllerLegacy
{
	public function save()
	{
		//STEP 1:获得表单的数据
		$app = JFactory::getApplication();
		$title = $app->input->get("title","",'STRING');
		$author = $app->input->get("author","",'STRING');
		$price = $app->input->get("price","",'FLOAT');
		$id = $app->input->get("id",'','INT');
		
		//STEP 2:更新数据库
		$db = JFactory::getDBO();
		$query = $db->getQuery(true);
		$query->update("#__zmaxbook_item")->set("title=".$db->quote($title));
		$query->set("author=".$db->quote($author));
		$query->set("price=".$db->quote($price));
		$query->where("id=".$db->quote($id));
		$db->setQuery($query);
		$db->execute();
		
		//STEP 3:重定向
		$this->setRedirect("index.php?option=com_zmaxbook&view=items","保存成功");
		return true;
	}

 至此就实现了编辑功能。

4,v2.0.3版本


 实现编辑后的完整版本代码下载:附件:com_zmaxbookv2.0.3_2021-05-24_for_j3x.zip

E计划

第11章:支持多语言
第12章:前台展示组件
第13章:组件开发FAQ
第14章:高级功能
第15章:使用分类
第16章:让组件支持插件
  • 内容提要
  • 留言讨论 (0)
  • 视频教程
上一节,我们已经完成了视图的显示,并且知道了视图的最终渲染代码是在default.php中。在本节,就编码完成编辑页面

评论 (0)

  • 最新在前
  • 最佳在前

内容待完善

该课程提供视频版,可以观看完整的视频教程