Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise, we're going to focus on doing an XSL transformation on the server side rather than the client side as we done previously. Now to explore that concept, we are going to focus on a very real world example, styling a remote RSS feed. Now before we can do our server-side transform, we need to create an XSL file to transform an Art News blog that we want to display on our site. So I have got the news.php file opened and if you are following along with the exercise files, you want to open it up. Really all we're looking at right now is structure. The way I want the post to appear on the page then we will have the news headline followed by the date and then the text. At the end of the text will have a link to the full story, if somebody wants to read it? We want this information to repeat as it's coming in from the RSS feed. To understand the RSS feed a little better, let's go ahead and take a look at the raw RSS feed. This is the RSS feed for the arts journal and this just happens to be their visual feed and you can see in the address bar, it says artsjournal.com/artsjournal1/visual.xml.
Listed below the subscription information is the blog in its raw format and actually this isn't in its raw format, in its raw format, this would just show up as XML. But they're actually doing some server transformations to make this a little bit more human readable. Well, I am going to go ahead and select my address and copy this. So go ahead and highlight your Address Bar and copy this. In a moment, we'll be creating an XSL page to consume this feed. So having that path is going to be very handy. If you haven't got a copy, just go ahead, pause the video and write the path down. So let's go back in the Dreamweaver. We don't actually create the XSL file here inside our news.php. We're going to create another XSL document and this time, instead of creating an entire XSL page, we're going to create a fragment. So let's go to File, choose New and I want to choose XSLT Fragment from the list that comes up and make sure you are choosing to do a blank page and not anything from a template. So XSLT Fragment, go ahead and click Create.
Again, immediately Dreamweaver is going to prompt us for an XML source. Now instead of the way we did last time where we attached a local file, we are going to choose to attach a remote file and I am going to paste in the path of the XML feed that we were looking at earlier, again if you have wrote it down, go ahead and pause here and type this in and we will just go ahead and click OK. Now it's going to parse that information and depending on the speed of your internet connection, it may take a little while or it may show right up like mine did, but what we're seeing is we're seeing a listing of all the XML data in the external XML file. Now, I mentioned before that we are working on a fragment. So I am going to switch over to Code view, so that you can actually see this.
As I scroll up and down the code, there is no head tag, there is no body tag it's just an XML document that contains the XSL fragment information. So now we need to go ahead and create our placeholder elements on the page. So at the very top of the page, I am going to type in Article Headline and I am going to hit Enter and go in the next line and type in Posting Date. Now, I will hit Enter to go on the next line and now I will type in Description and right after Description on the same line, I am going to type in the link. We could go ahead and do a little bit of formatting here. So I will click inside the Article Headline, I am going to format that as a Heading 1 and I need to go ahead and give this a class after we have edited. So what I can do is go down to my Tag Selector and I can either right-click or Ctrl+Click that if you are on a Mac and you want to choose Quick Tag Editor and I am going to go ahead and assign a class value of Headline to that.
So H1 class = Headline. So that's obviously something that's going to respond the styles in our XHTML document. So Posting Date and we are going to format that as a Heading 2, and our Description on our link, we are going to leave inside of a paragraph but there is something very important. As we did last time, we'll be actually taking the information from the Bindings panel and binding it to these elements on the page. Our link information has Href attribute and if we bounded the Href attribute to the test right in it just as a link, then again the only thing it would display is the actual path of the Href attribute. So we need to go ahead, highlight the text link and I am just going to go down to the Link dialog box in my Properties inspector and I will type in a # symbol and what that will do for me is it will go ahead and give me a dummy link and I can replace the current Href attribute with the binding in a moment.
Well, we need to go ahead and save this. So I am going to go to File and I am going to choose Save. So we're going to save this in the XML document and we're going to save it as artnews.xsl. So save it in the XML folder and save it as artnews.xsl. I am going to go ahead and click Save and there is our XSL file. Nothing really new here from what we did earlier. I am going to highlight the Article Headline, I will come over to my schema and I want to browse down through that to actually find the element that I need. I am looking under the repeating element of item and that's where we're going to find all of our news items. So I am going to double-click on Title and it should replace my last headline with rss/channel/item/title.
Now, because we're using an RSS feed, the x-path actually knows to go to RSS and then channel and it's a very standard way of doing things within RSS feeds. As I mentioned earlier in the chapter, some of the XML formats have been standardized and RSS Real Simple Syndication is one of those. I will highlight the Posting Date and I will find the publication date in my XML schema, double-click that. I will highlight Description and I will double-click Description. Now, I am going to switch to Code view to take care of my link and so I am going to switch over to Code view and I am going to highlight the pound symbol and the Href attribute and then I will go up to my XML schema and I will double-click link and I can see what's happening inside that now. I have those curly braces and it should say rss/ channel/item/link. Now if I didn't see those curly braces, I'd want to apply this.
So I am going to go back in the Design view and I will choose Save. After saving it, let's go ahead and preview that in the browser. I will go ahead and preview that in my browser and as you can see we're getting the first item from RSS feed. There is the title, Wrapping One's Head Around Philip Johnson's Glass House. Your title is going to be different than mine more than likely because this is a live RSS feed and these articles are going to continue to change. So there is my Posting Date and then I get a Description and a link underneath it. I can go ahead and check the link just to make sure the link is going to work and indeed, it takes me right to that article on the Arts Journal website.
Perfect. So now let's quit Firefox and go back into Dreamweaver. So we're back in Dreamweaver and we're almost finished. We just have to do one more thing. If you notice, we only saw the first article show up. So we want more than just the first article. We want all of those articles to list. So we are going to encase this in a repeating region, same way that we did in our client side XSL sheet. So I'll highlight all the content on the page, we'll go to Insert > XSLT objects > Repeat Region.
We scroll down to find the repeating area of content, which would be item, select item and click OK. Save this one more time and let's just try to test this one more time to make sure we're getting all of our content. So we'll preview that in our browser and indeed we are getting article after article, fantastic. So we've styled our RSS feed. What we'll need to do now is perform a server-side transformation and that will be the focus of our next exercise.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.