They Call Me Marty!
Design goodness and other ramblings.

Posted on August 22nd, 2009 0 Comments

Sorting by URL Segment in ExpressionEngine

One of the cool things about Expression Engine its url structure. EE has completely done away with ugly query strings that looked like this:

http://www.example.com/index.php?id=2&page=1 


and replaced them with friendlier urls that look like this:

http://www.example.com/index.php/template_group/template/ 


As you can see in the example above, the url reflects EE’s way of organizing templates and template groups. By taking advantage of these <a href="http://expressionengine.com/docs/templates/globals/url_segments.html" title="segments">segments</a> in the url and combining them with EE’s conditional <a href="http://expressionengine.com/docs/templates/globals/conditionals.html" title="if">if</a> statement. We can use the url structure to access, sort, hide or do a number of other things to the information contained in weblogs (sections). Sure, this can be done with php and other languages, but EE makes it incredibly easier to do.

Segments are the part of the URL that appear after index.php and in EE you can use up to 9 segments. For example, a client of mine needs to display a listing of Television Stations broadcasting their TV show, but the listing needs the ability to be sorted by station name, city or state.

<img src="http://theycallmemarty.com/images/blog/ts.png" alt="" width="500" height="258"/>

<h2>How it works</h2>

<img src="http://theycallmemarty.com/images/blog/query1.png" alt="" width="387" height="65"/>

This part tells EE to query the {“schedule_content} weblog and output the {“title”} and the text in a field called {“schedule_body.}

<img src="http://theycallmemarty.com/images/blog/pathheadlinks.png" alt="" width="500" height="126"/>

This code outputs the header cells for each column of our table. As you can see, each one of the headers is going to be a link. We are going to sort the information based on the url segment that we specify later.

<img src="http://theycallmemarty.com/images/blog/theadLinks.png" alt="" width="492" height="144"/>

This code will create the loop that will output the rest of our table and populate it with the content. Notice that I added a tag to order the information based on it’s title and sort it in an ascending manner “orderby=title” sort=”asc”. This displays the information in our table alphabetically based on the title of the entry.

I used EE {path} tag in the anchor. All this does is add the site’s base url which in this case is travelscope.net. Because EE doesn’t actually have physical pages on the site, the URL we use will determine what we see. So these links Don’t actually take us anywhere because we haven’t created a relationship between them and our weblog, so let’s do that.

<img src="http://theycallmemarty.com/images/blog/pathheadlinks.png" alt="" width="500" height="126"/>

I am now going to add some conditional statements to change the way this information is presented, but first I need to create the links that will make this happen.

<img src="http://theycallmemarty.com/images/blog/conditionals.png" alt="" width="500" height="285"/>

Using EE’s <em>if</em> statement, I have asked EE to check the second url segment before displaying the information. If the url segment matches the condition then EE will execute the code.

So, the second <em>if</em> statement says, “if the second segment is ‘byTitle’ then output:

{exp:weblog:entries weblog="schedule" limit="19" orderby="title" sort="asc"


Notice here that this is the same query as before. I am still sorting the information alphabetically, but this time I am ordering based NOT on the title, but on the <em>City</em> name.

This allows us to re-order the way our information is displayed using only the url.

0 Comments



What do you think?

Are you human?

Enter the image you see above