在前面的文章中，我们介绍了准备工作以及组件结构的开始。在本教程中，我们将关注细节，编写那些对这个扩展至关重要的函数和文件，并使扩展开始工作，希望开始统一整个组件并实现总体目标。

步骤 0：修复浓缩咖啡

今天你需要一杯浓咖啡。在本教程中，我们将介绍 Lendr 组件系列所需的模型和视图的细节，我们已在之前的教程中开始介绍。如果你是刚开始这个系列，我建议阅读第一篇文章，然后阅读初始设置文章，再继续本教程。完成了那些文章？准备好了吗？确保你已经准备好开始，拥有你的系统设置和代码编辑器已经打开，准备好编写代码。别忘了你的浓缩咖啡。

步骤 1：模型文件细节和函数

现在我们已经创建了基本文件并开始编写模型，我们需要进入正题。首先要做的事情是整理我们将编写的模型和需要添加的函数。以下是那些模型和函数的简要概述

所需的基本文件和函数

一旦我们定义了所需模型和功能的简要概述，我们就可以开始编写模型了。在这个过程中牢记以下原则非常重要。我们的列表是灵活和动态的。我们可以根据需要回到列表中添加或删除功能。在进展和评估事物的过程中，不要害怕反复回顾这个列表。有可能通过向特定模型添加一个功能来简化，或者可能需要重写一个更抽象的功能，然后将其添加到默认模型中。有一点是肯定的，我们不希望一遍又一遍地重写相同的代码。当我们发现我们开始走上这条路时，就是考虑如何将代码抽象到公共模型的时候了。让我们开始编写我们的模型。

第二步：编写模型

组成这个Lendr组件的模型并不多，但我们没有时间在这里全部写出来。我们将重点关注几个关键模型，以帮助演示组件的大部分功能，并将一些次要模型留到相关的GitHub仓库供您自行查看。我们将首先编写书籍模型。当我开始思考从哪里开始编码时，我决定从最具体的地方开始，逐步扩展到图书馆模型和用户资料模型。原因是简单的。书籍是最小的单元，图书馆由书籍组成，而用户资料则包含图书馆。我相信这有助于您理解为什么我们首先从书籍模型开始，然后逐步扩展。我们将首先查看的模型将是默认模型。我们使用默认模型来存储我们希望在所有模型中都可以使用的基本功能，并且由于我们编写面向对象的代码，我们不希望在每个模型中重复编写相同的函数。

模型文件

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使用这些字段，该字段位于下面的添加书籍表单中。您将在下面的布局中找到代码。

第四步：开始编写视图布局和样式

我们首先要做的事情将是回到组件的入口点。这是我们通过根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

旁白：由于我们已经调用了视图助手，现在查看该文件是值得的。

view.php

现在回到原始的HTML视图文件，我们可以看到我们传递给视图助手加载函数的参数。首先，我们告诉助手我们希望使用哪个视图文件夹，接下来是使用的布局，最后在这些情况下，我们返回页面格式类型。由于各种原因，我们创建了一个新文件，并将其命名为phtml.php来表示部分html.php。我们之所以使用这个文件而不是标准的HTML视图，是因为当前在html.php文件中正在调用各种附加功能。因为大多数情况下我们只想为部分模板提供一个基本的渲染函数，我们不想使用标准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关联起来。这个辅助文件位于辅助文件夹中，并且再次遵循组件的标准类命名约定。根据根lendr.php文件中定义的命名空间（加载器），这个类将自动包含。我们从相同的根文件调用这个类，使用以下代码行

joomla_root/components/com_lendr/lendr.php

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

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

在填写完添加书籍表单后，用户通过“添加”按钮提交表单。当点击此按钮时，将触发javascript action 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 编码数组。以下是这个控制器：

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 变量的 HTML）追加到图书列表表体中。我们还将成功时隐藏模态框。目前我们有一个空的“else”语句，稍后将用适当的消息填充。这将是即将到来的系列文章中将要完成的细节。

结论

你是否已经完成？本文比之前的文章更详细、更深入，但应该提供了一个相当全面的在 Joomla! 3 中使用既定编码标准和实现 MVC 功能以及其他 Joomla! 3.x 独特功能的开发商业级别扩展的方法。本系列的下一篇文章将继续填充模型和控制器、视图和 JavaScript，以继续开发扩展。

我希望上述内容对您创建自己的 Joomla! 组件有所帮助，如果您对上述内容有任何问题或评论，请与我们联系。上述文章的部分内容被多次重写，因为我寻求最佳方法和最清晰的格式来编写代码和布局。我当然愿意提供关于这些项目的更小的分解教程，如果它们对您感兴趣并且收到相关的评论请求。我期待着本系列的下一篇文章，我们将继续添加组件的功能并添加更多令人兴奋的功能！

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

在下一篇文章中，我们将编写更多模型和控制器功能。