Published:
11 February 2010

Step 4. Create an Individual Entry View

Alright, so we've spiced up our layout a bit and created a dynamic navigation menu. Here, we'll use URL parameters to add the ability to view greeting entries individually, as one might view a blog post or an article.

4.1. Create a Greeting Entry Page

The first thing we'll need is a page that will handle the view. Go to Blueprints > Pages and click the green Create New button. Give your new page the Title Greeting Entry, and the URL Handle greetings. Now, in the URL Parameters field, enter title. In the Data Sources multiselect, select the "Navigation" data source we created earlier. Click Create Page.

What you've done here is create a page that will respond to the URL http://your-site.com/greetings, and will populate a parameter called $title with input provided as a segment in its URL. So, for example, if you were to load http://your-site.com/greetings/hello-world, the page would create a parameter called $title and set its value to hello-world.

You can test this by going to http://your-site.com/greetings/hello-world?debug=params. Near the bottom of the page's parameters list you should see $title is set to hello-world (Figure 6). In your browser's URL bar, change hello-world to something else, and hit enter. You'll see the value of the $title parameter change.

4.2. Create a Greeting Entry Data Source

Now that our page is set up to dynamically set parameters using URL input, let's create the data source that will fetch our greetings.

Go to Blueprints > Data Sources and click the green Create New button in the top right. For Name, enter Greeting Entry. For Source, select "Greetings."

Next, we add a filter so that the data source will only return the entry whose Greeting Title matches whatever $title is passed in the URL Parameter. In the Filter Results section, select the "Greeting Title" text input field and click Add Item. A filter value input will be dynamically added to the form. Enter {$title}.

What that does is tells the data source: "I want you to return entries where the content of the Greeting Title field matches the value of the parameter $title." The parameter is enclosed in curly-braces so that the system knows it needs to evaluate what's inside.

Under Sorting and Limiting, we don't need to specify any sorting options because we'll only be returning one entry at a time. Enter 1 in the "Paginate results, limiting to..." field.

In the Required URL Parameter field, enter $title (note that we don't use the curly braces here because this doesn't need to be evaluated, the system needs the actual parameter name). Tick the "Redirect to 404 page..." checkbox. What we've done here is let the data source know that we don't want any results if no $title has been set in the URL, and then whenever there are no results, we want to redirect to a 404 rather than displaying an empty page.

Under XML Output, select the following elements to include:

  • greeting-title
  • greeting-content: formatted
  • date
  • language

Your data source editor should look like Figure 7. Click Create Data Source.

Don't forget to attach the data source to your new page. Go to Blueprints > Pages and click to edit the "Greeting Entry" page. Under Data Sources, add the new "Greeting Entry" datasource to your selection (don't deselect "Navigation"). Save your changes.

4.3. Build Your Greeting Entry Template

In the front end, go back to http://your-site.com/greetings/hello-world?debug

Now you should see your greeting entry in the source XML. Replace hello-world in your browser's URL bar with hallo-welt, and hit enter. You should now see the German greeting in your source XML.

What's happening here is that Symphony is using dynamic input in the URL to populate a parameter set by our page, and then using that parameter in turn to filter the data being returned.

We see that the data's there, so all that's left to do is template the page. Back in the admin interface, go to Blueprints > Pages and in the Template column click "greetings.xsl".

As before, let's first delete the <xsl:output> element. In its place, include our master stylesheet:

    <xsl:include href="../utilities/master.xsl"/>

As we did in Step 2, change <xsl:template match="/"> to <xsl:template match="data">, so that our template rules will cascade properly from the general master stylesheet to our page-specific stylesheet.

Now let's work on grabbing the data we want. Take a look at the front-end debug screen again. You'll see that the path to our entry is /data/greeting-entry/entry. You can test this by entering it into the XPath tester at the top of the screen (replace the //*). Hit enter and the entry element should be highlighted. That's what we want.

Switch back to your template editor. The template we're starting with is matching the data element, so that's our context. From there, the entry is at: greeting-entry/entry. So inside the template add the following:

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

Now, left as-is, XSLT will simply spit out whatever it finds in the greeting entry, because we haven't written a template for it yet. You can test if you like, by visiting http://your-site.com/greetings/hello-world. You should see a bunch of unformatted text.

Return to your template editor, and let's add a simple template for entries:

<xsl:template match="greeting-entry/entry">
    <div id="greeting-entry" class="content">
        <h2><xsl:value-of select="greeting-title"/></h2>
        <ul class="meta">

            <li class="date">
                <xsl:call-template name="format-date">
                    <xsl:with-param name="date" select="date"/>
                    <xsl:with-param name="format" select="'x M Y'"/>
                </xsl:call-template>
            </li>

            <li class="language"><xsl:value-of select="language"/></li>

        </ul>
        <xsl:copy-of select="greeting-content/node()"/>
    </div>
</xsl:template>

Save your changes and go back to http://your-site.com/greetings/hello-world. You should see a nicely formatted entry.

Let's link the entries on the View Greetings page to their individual views. If you look at the URL above, it uses a sanitized version of the entry's title. Luckily, Symphony provides these for all text fields; they're called handles. If you go to http://your-site.com/?debug you'll see that each greeting entry's greeting-title element has a handle attribute. We'll use these handles to link each entry listed on the home page.

Go to Blueprints > Pages and, in the Templates column, click "home.xsl". In our greetings/entry template (<xsl:template match="greetings/entry"/>), we'll add an anchor to our existing <h3> element:

<h3><a href="{$root}/greetings/{greeting-title/@handle}"><xsl:value-of select="greeting-title"/></a></h3>

The anchor's href attribute is part static and part dynamic. The dynamic part is wrapped in curly braces. This is called an "attribute value template" and XPath will evaluate the expression. So for each entry, we'll end up with href="/greetings/whatever-the-handle-is". Save the changes and reload your home page. Now each entry's title should be linked, and clicking it should take you to its individual view.

But you've probably noticed one pesky thing while you're admiring your handywork on the front end. Our "Greeting Entry" page has been added to the navigation, and that doesn't make much sense. Let's address that now.

Step 5. Optimize Page Handling →

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details