“Say Hello to the World” – Tutorials – Learn

Say Hello to the World

The “Hello World” tutorial introduces you to the most basic Symphony workflow: creating content and displaying it on the front end.

Published:: 22 November 2009

Step 4. 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).

Author's Note: From Symphony 2.4, xsl editing in the admin has been removed. You can edit templates in your favourite code editor, or there are a couple of unofficial extensions available.

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: