Учебник Symphony CMS: «Привет, мир»

Содержание

Учебник «Привет, мир» познакомит вас с основами разработки сайтов в Symphony CMS: созданием контента и отображением его на сайте.

Введение

В учебнике «Привет, мир» вы познакомитесь с самыми основами разработки сайтов для Symphony CMS: создание модели данных и вывод их на сайте. В четырех простых шагах учебника будут даны только самые основы, без всяких продвинутых техник, сугубо для того, чтобы разогреть ваш аппетит.

Для учебника предполагается, что вы уже установили Symphony CMS и она работает. Если нет, то установите (только не устанавливайте контент, идущий с системой по умолчанию).

Давайте зайдем в панель администратора и приступим.

Модель данных

В Symphony вы определяете и создаете разделы с моделями данных, которые в дальнейшем собираетесь размещать на сайте. При первом входе в систему вы увидите пустой список разделов, потому что никакие типы контента еще не определены.

Пустой список разделов
Пустой список разделов

Давайте исправим это. Нажмите на зеленую кнопку «Create New» (Создать) в правом верхнем углу страницы. Откроется редактор раздела (Section Editor):

Редактор раздела
Редактор раздела

Начнем с первого подраздела, который называется «Essentials». Поскольку мы собираемся говорить «Привет», давайте назовем наш раздел Greetings, для этого введите Greetings в поле Name. Для навигационной группы оставим название по умолчанию, Content.

Переместимся ниже, в подраздел «Fields». Если кликнуть по выпадающему списку, то вы увидите все типы полей, которые можно добавить к разделу. Поскольку нам сейчас нужно просто приветствие, то давайте выберем в списке поле Text Input и нажмем кнопку «Add Item».

Поле Text Input будем динамически добавлено в раздел и теперь мы можем настроить параметры этого поля:

  • Label — название поля, отображается в панели администрирования. Введем Greeting Text.
  • Handle — название поля, под которым оно выводится в XML. Введем greeting-text.
  • Make this a required field — сделать обязательным для ввода. Поставим галочку.

Остальные параметры оставим такими, как они заданы по умолчанию и нажмем кнопку Create Section (создать раздел).

Созданный раздел
Созданный раздел

Обратите внимание, что в навигационном меню у вас появился пункт «Content», название которого взято из настроек навигации нашего, только что созданного, раздела. Это меню содержит выпадающие пункты, с названиями разделов. С их помощью мы и будем управлять нашим контентом. Давайте перейдем в пукт меню «Greetings».

Давайте содадим несколько тестовых записей. Для этого нажмем на зеленую кнопку «Create New» (Создать). Вы увидите простую форму с одним полем Приветствие, которое мы создали ранее в редакторе раздела. Введем в поле Hello World и нажмем кнопку «Create Entry» (создать запись).

Форма создания новой записи
Форма создания новой записи

Нажмите ссылку «Create Another» (Создать еще). Как дань уважения к австралийским корням Symphony CMS, введите в поле Приветствие текст G'day World! и нажмите кнопку «Create Entry» (Создать запись).

Вернемся обратно к списку записей через меню Content > Greetings. Вы увидите список из наших двух записей.

Список записей раздела
Список записей раздела

А теперь давайте выведем наш контент из системы на сайт.

Настройка фронтенда («лица») сайта

Your Symphony project hasn't got a front end yet. If you try to point your browser to the location where you've installed it, you'll see a generic "Page Not Found" error. Let's fix that.

In the main menu, go to Blueprints > Pages. You'll see an empty page index.

Пустой список страниц
Пустой список страниц

Click the green Create New button in the top right corner of the screen. You'll be taken to the page editor.

We'll set up a simple home page. Enter Home in the Title field and home as the URL Handle. Leave URL Parameters blank, and skip the Parent Page field too. Under Page Type, click "index". This will populate the field automatically for us. Giving our page the index field type means it will be served as our site's home or index page. Here's what our page setup looks like:

Редактор страницы
Редактор страницы

Got it? Ok, click "Create Page." Now, if you try to visit your front end, you'll see that the "Page Not Found" error is gone, but there's an XSLT Processing Error in its place. Don't worry, it just means that Symphony is trying to serve your Home page, but it's got no data and no template to work with.

Let's go create a data source to deliver some content to our page.

Grab the Data

Data sources fetch and organize content from the system and deliver to pages. We'll need to create one in order to display your greetings on the Home page. Navigate to Blueprints > Data Sources and click the green Create New button.

This is the data source editor. In the Essentials section, let's give our data source an obvious Name: Greetings. Under Source, the Greetings section will be pre-selected, since it's the only one we've created. Let's leave the Filter Results and Sorting and Limiting sections alone for now. The default values will do just fine. You'll learn a bit more about these options in the follow-up to this tutorial. Here, the only other thing we need to do is tell our data source what we need it to output. Under XML Output, in the Included Elements select box, click greeting-text. That's the only field we added to or section, so it's the only one we need to return. Leave the rest of the values in this section at their default. Your form should look like Figure 1:

Редактор источника данных
Редактор источника данных

Click "Create Data Source".

Now we need to attach our data source to the Home page. Navigate to Blueprints > Pages and click "Home". In the Page Resources section of your home page's configuration, you'll now see your new data source listed in the Data Sources field (Figure 2).

Подключение источника данных в редакторе страниц
Подключение источника данных в редакторе страниц

Click to select it, and then click the Save Changes button.

We're going to use Symphony's awesome debug devkit to make sure our data's made it through to the front end. It comes packaged with Symphony by default, so all you've got to do is enable it. Navigate to System > Extensions, click the "Debug Devkit" row to select it, choose "Install/Enable" from the With Selected menu at the bottom right of the table, and hit "Apply". Now open a new browser tab and point it to your front end, but add ?debug to the end of the URL. You should see something like Figure 3:

XML-данные
XML-данные

Build the Template

Page templates are XSLT stylesheets that are applied to a page's XML to transform it, usually into XHTML. Each page is coupled with a template that is autogenerated when the page itself is created. Let's edit our Home page's template.

Navigate to Blueprints > Pages and click the link in the Template column (home.xsl). You'll see the page template editor (Figure 1).

Редактор шаблонов
Редактор шаблонов

Right now, we've got an empty XSL template matching our root element:

<xsl:template match="/">

</xsl:template>

Let's just add some basic HTML to it:

<xsl:template match="/">
    <html>
        <head>
            <title>Hello World!</title>
        </head>
        <body>
            <h1>Symphony Greets the World</h1>
        </body>
    </html>
 </xsl:template>

Save your changes, and go check the front end. You'll see the "Symphony Greets the World" heading. Not bad. But what we really want is to grab those entries from the Greetings section. In order to use them in our template, we'll need to figure out the correct XPath to select them. Use the debug interface to check out the XML again (http://your-site.com/?debug). The path to our entries looks something like this: /data/greetings/entry. Type that into the bar at the top of the debug interface (replacing //*) and hit enter. Your entry elements should be highlighted (Figure 2).

If they are, we've got the right XPath.

Back in your page template editor, add the following line inside the <body> just beneath the <h1>:

<xsl:apply-templates select="/data/greetings/entry" />

Save, and check your Home page again. We've managed to spit out the content of our greetings (Figure 3).

Now let's clean it up a bit. Right now, there is no matching template that XSLT can use to transform your /data/greetings/entry elements, so its default behavior is to just spit out the text. Let's render a simple list instead.

First, add a subheading for your Greetings entries, and wrap your <xsl:apply-templates> element in a <ul>, like this:

<h2>Greetings</h2>
<ul>
    <xsl:apply-templates select="/data/greetings/entry"/>
</ul>

Now, let's add another matching template just before the </xsl:stylesheet> to transform our entries into more meaningful markup:

<xsl:template match="greetings/entry">
    <li><xsl:value-of select="greeting-text"/></li>
</xsl:template>

Your final template should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">
    <html>
        <head>
            <title>Hello World!</title>
        </head>
        <body>
            <h1>Symphony Greets the World</h1>
            <h2>Greetings</h2>
            <ul>
                <xsl:apply-templates select="/data/greetings/entry"/>
            </ul>
        </body>
    </html>
</xsl:template>

<xsl:template match="greetings/entry">
    <li><xsl:value-of select="greeting-text"/></li>
</xsl:template>

</xsl:stylesheet>

Save your changes and go back to the front end. You should now see your entries listed like this:

Pretty cool, huh?

Let's test this out a bit more. In your admin interface, go to Content > Greetings and create a new entry. Let's enter Hallo Welt! in honor of Symphony's very active German community. Save the entry and head back to the front end. There it is:

Conclusion

Congratulations! In just a few short minutes you’ve managed to model a content type, whip up some sample entries, create a front-end page, deliver your entries to the front end, and write a template to turn your data into XHTML. Hopefully in the process you also got a sense of how powerful and flexible the system can be once you’ve truly mastered all of the basics.

In the next tutorial, “Say Hello to Symphony”, you’ll begin to unlock some of that potential with data source filters, parameters, events, utilities, and much more.



18 сентября 2012 г.
Бондаренко Юрий