在前面的文章中，我们“准备了场地”并开始构建组件的结构。在本教程中，我们将关注一些细节，例如编写构成此扩展核心的函数和文件。我们将从这里开始使其“运转”。我们还将尝试将整个组件统一起来，带着实现最终目标的希望。

第0步：为自己准备一杯浓缩咖啡

今天，你真的需要一杯浓咖啡。在本教程中，我们将详细介绍组件Lendr所需的模型和视图，这些元素我们在之前的教程中已经开始构建。如果您刚刚加入我们，在阅读本教程之前，我建议您先阅读本系列的第1篇文章，然后阅读关于初始配置的文章。
好了，完成了？准备好继续了吗？
首先，请确保您的系统配置正确，并打开您的代码编辑器。当然，别忘了您的浓缩咖啡！

第1步：模型文件中的函数和细节

现在我们已经创建了基本文件并开始编写模型代码，我们需要进入正题。首先要做的事情是列出我们将编写的模型以及需要添加到其中的函数。以下是对这些模型和函数的简要概述

基本文件和所需函数

NDT：括号内的翻译仅供参考。在本文中定义的术语应尽可能保留，有时这是必需的。

一旦我们大致确定了所需的模型和功能，我们就可以开始编写模型。
在整个过程中，牢记以下原则非常重要：我们的列表是灵活且动态的。在需要的情况下，我们可以返回列表，添加或删除功能。不要害怕在进展过程中和评估事物时定期返回此列表。我们完全可能通过向特定模型添加功能进行简化，或者可能需要将添加到默认模型中的功能以更简洁的方式重写。
有一点是肯定的，我们不想反复重写相同的代码，当我们意识到我们正在走这条路时，我们必须考虑如何将此代码总结为一个公共模型。
开始编写我们的模型。

第二步：编写模型

我们的Lendr组件由许多模型组成，但我们没有时间在这里全部编写。
我们将专注于几个关键模型，以便您熟悉组件的大部分功能，并将一些次要模型留在我们的GitHub存储库中，以便您可以查看。

让我们从编写“book”（书籍）模型开始。经过思考，我决定从最具体的文件开始编码，然后是“library”（图书馆）模型，最后是“profile”（个人资料）模型。原因非常简单。书籍是构成单位的最小单位，图书馆由多本书组成，而个人资料包含一个图书馆。我相信这将帮助您理解为什么我们的工作将从“book”（书籍）模型开始。

首先，我们将首先检查“default”（默认）模型。我们使用“default”（默认）模型来存储一些基本函数，我们希望在所有模型中可用，而且由于我们编写的是面向对象的代码，我们不希望在各个模型中重写相同的函数。

模型文件

default.php

book.php

library.php

profile.php

第三步：集成额外功能

在实现此组件的过程中，我觉得能够集成第三方扩展而不是“重新发明轮子”很有趣。

我们可以通过使用Joomla! 3中存在的Bootstrap类来简化我们的样式和显示类型。
其他扩展也可以使用，如Gravatar和Open Library。如果您不熟悉这些工具，可以在它们各自的网站上找到文档。以下是我们如何在Lendr中使用它们的简要说明。

Gravatar

Gravatar提供了一种简单的方法来获取与电子邮件地址关联的图像或头像。Lendr用它以极其简单的方式显示个人资料照片。您将在下一步编写视图显示代码时看到所需的代码。

Open Library

Open Library 允许通过ISBN号检索书籍封面图像。这使得我们可以轻松地为每本书添加封面，无需担心存储空间、添加图像等问题。Open Library 提供了不同的字段，可用于查找书籍封面并添加图像。Lendr 使用您在下面看到的添加书籍表单中内置的ISBN代码。
您可以在下面的视图展示中找到该代码。

第4步：开始格式化视图和样式

首先需要返回到组件的入口点。这个起点是默认控制器，我们在根文件 lendr.php 中引用它。编写完我们的模型后，很明显我们需要返回并更新用户的起点。因此，我们在默认控制器 default.php 中修改以下代码

joomla_root/components/com_lendr/controllers/default.php

$layoutName   = $app->input->getWord('layout', 'list');

用户将被引导到视图列表。这是我们首先要研究的视图。在我们的 views (视图) 文件夹中，有一个 profile 文件夹，组织结构如下

文件夹组织

profile
  tmpl
    _entry.php
    index.html
    list.php
    profile.php
  html.php
  index.html
  phtml.php

编写文件

我们首先检查 html.php 文件。根据Joomla!的要求，此文件是“默认”文件，遵循当前的命名约定。我们在上一篇文章中发现了这些文件的基结构。

单独文件

html.php

注意：因为我们调用了视图的 helper 文件，所以现在复习它是很有用的。

view.php

现在回到视图的原始 html 文件，我们可以看到为加载视图 helper 函数设置的参数。首先，我们向 helper 指定我们想要使用的视图文件夹，然后是布局，最后是关联的页面格式。
由于各种原因，我们创建了一个新文件，命名为 phtml.php，其中包含 html.php 的一部分。我们使用此文件而不是标准的html视图文件，因为调用了不同的附加功能。由于在大多数情况下我们只想使用适用于模板一部分的基本渲染函数，因此我们不需要标准的html文件的全部内容。尽管有其他处理此类问题的方法，但为视图提供不同的文件将提供更好的组织，并在需要时便于定位与模板一部分相关的附加功能。

phtml.php

_entry.php

list.php

profile.php

其他布局

我们已经审查了所有用于个人资料选项卡的布局，但在整个过程中，我们还发现了用于显示个人资料的额外视图。为了避免这篇文章太长，我们在此不列出每个视图及其相关代码，但您可以直接在我们的GitHub存储库中查看每个视图的相关代码。

第5步：JavaScript和CSS

在本文档中，我们将研究Lendr相关的JavaScript和CSS，这是我们在教程中要研究的最后元素。
Lendr 使用Bootstrap和jQuery，因此前面步骤中提到的用于添加新书的模态窗口自动包含在内，我们因此不需要编写特定的JavaScript函数来使其工作。
系统中的只有几个部分需要编写特定的JavaScript代码，有时还需要特定的CSS样式。我们将添加以下帮助文件来指定样式和JavaScript的位置。

joomla_root/components/com_lendr/helpers/style.php

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class LendrHelpersStyle
{
  function load()
  {
    $document = JFactory::getDocument();
 
    //stylesheets
    $document->addStylesheet(JURI::base().'components/com_lendr/assets/css/style.css');
 
    //javascripts
    $document->addScript(JURI::base().'components/com_lendr/assets/js/lendr.js');
  }
}

在这里，我们将所有与我们的组件相关的CSS和JavaScript文件关联起来。这个名为helper的文件位于helper文件夹中，并遵循组件的标准命名约定。这个类由根文件lendr.php中定义的namespace（加载器）功能自动集成。我们通过以下代码行调用这个根文件：

joomla_root/components/com_lendr/lendr.php

//Load styles and javascripts
LendrHelpersStyle::load();

现在我们已经包含了JavaScript和CSS文件，我们可以开始添加所需的函数。我们将添加的第一个函数与刚刚创建的用于添加书籍的模态窗口相关。

一旦添加书籍的表单填写完成，用户通过点击“添加”按钮提交表单。当点击此按钮时，执行javascript中的addBook()命令。

joomla_root/components/com_lendr/assets/js/lendr.js

//add a book
function addBook()
{
  var bookInfo = {};
  jQuery("#bookForm :input").each(function(idx,ele){
    bookInfo[jQuery(ele).attr('name')] = jQuery(ele).val();
  });
 
  jQuery.ajax({
    url:'index.php?option=com_lendr&controller=add&format=raw&tmpl=component',
    type:'POST',
    data:bookInfo,
    dataType:'JSON',
    success:function(data)
    {
      if ( data.success ){
        jQuery("#book-list").append(data.html);
        jQuery("#newBookModal").modal('hide');
      }else{
 
      }
    }
  });
}

在这个函数中，我们首先使用jQuery创建一个名为"bookInfo"的对象，包含表单中的所有变量。
一旦我们有了这些变量在单个表单中，我们开始创建一个Ajax提交，仍然使用jQuery。请注意，我们指定了详细的URL以包括控制器、格式和tmpl（或模板类型）。

在此阶段，有一些小贴士。Lendr是为Joomla! 3.x开发的扩展，我们的控制器是单一功能的控制器，这意味着它们只执行一个任务。这种格式允许只返回此控制器的数据，而tmpl指示Joomla!模板使用哪个文件（component.php或index.php）。
然后我们描述提交类型，在我们的例子中，是POST。对于数据，我们分配之前创建的bookInfo对象，并且对于类型我们指定JSON。

控制器（在我们的例子中是add.php）将处理提交的表单，发布到正确的模型中存储数据，并返回结果。结果将是一个编码为JSON的array （数组）并定义了一个“成功”变量。
以下是此控制器：

joomla_root/components/com_lendr/controllers/add.php

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); 
 
class LendrControllersAdd extends JControllerBase
{
  public function execute()
  {
 
    $return = array("success"=>false);
 
    $model = new LendrModelsBook();
    if ( $row = $model->store() )
    {
      $return['success'] = true;
      $return['msg'] = JText::_('COM_LENDR_BOOK_SAVE_SUCCESS');
 
      $bookView = LendrHelpersView::load('Book','_entry','phtml');
      $bookView->book = $row;
 
      ob_start();
      echo $bookView->render();
      $html = ob_get_contents();
      ob_clean();
 
      $return['html'] = $html;
    }else{
      $return['msg'] = JText::_('COM_LENDR_BOOK_SAVE_FAILURE');
    }
    echo json_encode($return);
  }
}

回到上面的javascript函数，现在我们来查看AJAX提交的结果和返回的响应。

if ( data.success )
  {
    jQuery("#book-list").append(data.html);
    jQuery("#newBookModal").modal('hide');
  }else{
    ...
  }

在这里，我们获取由控制器生成的HTML（分配给变量html）并将其添加到书籍列表的表格主体中。如果成功，我们还将隐藏窗口。
目前，我们的“else”状态是空的，我们将在以后的“完成”文章中完成适当的消息。这将是我们即将发布的文章的一部分。

结论

你做到了吗？本文比之前的文章更详细，但应该为你提供了开发Joomla! 3.x商业扩展的相当完整的指南，包括使用标准编码规范以及实现新的MVC功能和Joomla! 3.x的其他功能。在下一系列的下一个教程中，我们将继续完成模型和控制器、视图和javascript的开发，这些都是扩展开发所需的部分。

我希望这些元素对您创建自己的Joomla!组件有所帮助，如果您在这一步骤中有任何问题或评论，请随时联系我们。我多次重写文章的部分内容，试图找到尽可能好和清晰的方法和格式，无论是代码还是排版。我意识到这篇文章中的一些元素没有按步骤详细说明（例如带有按钮的book_entry的格式），但我愿意提供关于您认为需要详细说明的元素的补充小教程，并请在评论中提出。

在下一篇文章中，我们将继续添加组件功能，并添加更多令人兴奋的功能！

访问完整的教程网站：http://lendr.sparkbuilt.com/