Blog Design Solutions (2006)
.pdf
B L O G D E S I G N S O L U T I O N S
archives. Set up your options as indicated in Figure 6-37 and press the Build Tag button. The label field will contain the word Recently; you can delete this, or you can leave it in place, it’s up to you. Copy this tag to your clipboard and after returning to your myarchive page template, paste it between the template_head and template_foot tags and press Save.
Figure 6-37. Creating a list of recently published articles with the TxP tag building interface
Here you have told TxP to output a list of the last 50 articles published on the site—and that’s it. This is a very simple archive and although I was tempted to go into huge detail about a variety of ways this can be achieved, archiving is an area under rapid development in TxP and anything I write will likely be out of date by the time you are reading this. If you want more complex archiving, a search on any of the sites I list at the end of this chapter will likely turn up some interesting results.
Speaking of search, it is always a nice feature, and if a returning visitor remembers the heading or a keyword from a past article, there’s a good chance it will show up.
266
To create a search, we return to the site navigation of our list on the left and choose Search input form, which generates yet another pop-up window with options. On this occasion, the default options set by TxP are fine for our purposes, so press Build Tag and copy and paste it to the myarchive template, sandwiching it between the template_head tag and the tag you just added for recent articles.
To review, the code in the myarchive page template should now look as follows:
<txp:output_form form="template_head" />
<txp:search_input label="Search" button="Search" size="15" /> <txp:recent_articles limit="50" break="li" wraptag="ul" sortby="Posted" sortdir="desc" />
<txp:output_form form="template_foot" />
If that’s how it looks, press ever-necessary Save at the bottom to update the template. To make this template work with our archive, we now need to choose Presentation Sections and associate our archive section with the myarchive template. Once again, find the archive section, look for Use page drop-down options, select myarchive from the list, and press Save. If all has gone well, a refreshed visit to your archive section should now produce a search box and a list containing the first post. If you want to see it in action, go ahead and publish another post and see whether it shows up in the list.
Now that we have two working templates for our site, I just want to return to the forms we have created for them to share. They are pretty simple, but they do illustrate the power of TxP forms nicely. Let’s say, for example, we created 20 different templates for 20 different sections of a big site and then we remember we forgot to add the links to allow browsers to auto-discover RSS feeds automatically. With our templates all sharing a common form, it is just a case of editing the shared form—in this case, template_head—by inserting the following code and pressing Save; all the templates are now bang up to date.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<link rel="alternate" type="application/rss+xml" title="My great blog" href="http://mydomain.com/rss/" />
I’m not sure about other TxP users, but I often find myself with <txp:output_form /> tags nested inside other forms. It all gets quite complicated, but a little planning and a little practice and forms will soon become some of your most useful allies.
T E X T PAT T E R N
6
267
B L O G D E S I G N S O L U T I O N S
A quick look at the default form
If you are feeling good about forms, have a look at the default form. It is the form that is presented to you when you click on the forms tab first of all. It is also the form that presents the articles in your blog—the form that the <txp:article /> tag draws from to present your posts. So let’s just take a moment to walk through the tags. Before we do that, though, pop along to the content area and just make a note of the write tab’s text areas. Figure 6-38 gives you a visual reference of how the default form and the write tab relate to each other.
Figure 6-38. TxP tags inside the write tab, illustrating how the tags work
This first line of the default form, <h3><txp:permlink><txp:title /></txp:permlink> · <txp:posted /> by <txp:author /></h3>, is a mix of straight XHTML and TxP tags. The <h3> tag is, as you would expect, a level 3 heading, and anything we put in the first single-line text area in the write tab ends up formatted according to this first line of the form. We can see that the logically named <txp:title /> tag is wrapped in a <txp:permlink> tag. The easiest way to explain this is to pop along to your site and click the title of the First Post. The address in the browser changes to something along the lines of /path to your server/article/first-post. This is the article’s permanent link, or permalink as it is often called. Basically, this is the link where the article can be found when it’s a bit older and is no longer present on the front page of the site. The <txp:permlink> tag takes care of all of this automatically. The · is simply an HTML character entity reference that produces the dot between the heading and the author’s name, which is taken care of by the
<txp:author /> tag.
268
T E X T PAT T E R N
<txp:body /> represents the second multiline text area of the write tab. Anything you write in this second text area is presented on the site using <txp:body />, a tiny tag that represents the bulk of your blog posts.
<txp:if_comments><p><txp:comments_invite /></p></txp:if_comments> takes care of the comments if you have them switched on. At the bottom of the articles on the front page you will see a link titled Comment [1]. Follow it and you can leave your own comment. There is more to discover about comments and TxP, but again this is an area under heavy development. What you have here does the job very well, but as you get more comfortable you might want to look around the various TxP sites I list at the end of the chapter for more information on controlling comments.
Finally we have the following:
<div align="center">
<img src="<txp:site_url />images/1.gif" style="height:1px;width:400px" class="divider" alt="" />
</div>
6
This is simply some HTML that adds the horizontal line you can see below the Comment[1] link and the <txp:site_url /> is a clever TxP tag that uses whatever your site URL is, for example, http://foobar.com, and produces an absolute path to the image.
The final job
Finally we have a blog, well almost. All throughout there has been a black border around your cartoon man; this was there for development purposes only, so it’s time to remove it. Find the #container within the CSS and delete the border:1px solid black. And, of course, don’t forget, hit Save when you’re done.
Resources
There are many brilliant resources out there for TxP, but these are the sites I find myself at most often:
Textpattern forums
Have no doubt; this is where all the hard-core Textophiles hang out, but no need to be shy—they are a seriously great bunch of people. There is a massive archive of information here and I have had good experiences, from an almost live debug session with the man himself, Dean Allen, straight through to seeing a feature request I made turn into a step- by-step how-to guide within two hours. The original and still the best TxP resource.
http://forum.textpattern.com
269
B L O G D E S I G N S O L U T I O N S
Textpattern resources
As this site’s title suggests, there is a wealth of TxP resources to find: tutorials, plug-ins, templates, tips, tricks, and—for the more advanced—a selection of mods. Not only that, but the site in itself is a showcase for just how powerful TxP is when it comes to managing many content contributors over many sections and categories.
http://textpattern.org
TextBook
The TextBook project is a superb and fast-growing wiki that goes into a lot of detail about the finer points of TxP. TextBook gets special thanks from me because I found it invaluable during the writing of this chapter. If you are interested in extending your TxP knowledge beyond blogging, this is the site to start at.
http://textpattern.net
Textgarden
There is a growing number of superb templates at the Textgarden. If the stretchy man in this chapter doesn’t float your boat, worry not; you can grab another template here for free.
http://textgarden.org
TxP magazine
Last but by now means least: TxP magazine. Not so much a resource in the sense of the others—a growing library of TxP articles, tips, and tricks; some really good looking designs to be seen here too.
http://txpmagazine.kbbu.de/
Plug-ins
There are hundreds of plug-ins for TxP, and some are good, some not so good. You will find many listed at texpattern.org and until an official TxP plug-in repository becomes available this is the best place to start. Following is a list of links to my favorite TxP developer’s websites whose plug-ins I have used often:
www.wilshireone.com
http://johan.galaxen.net
http://thresholdstate.com
http://compooter.org
270
T E X T PAT T E R N
http://allinthehead.com
http://greenrift.textdrive.com
http://manfre.net
Summary
In writing this chapter I have really only skimmed over the top of the capabilities of TxP. It was more difficult deciding what not to tell you as opposed to what to cover. In writing this chapter, if I have achieved nothing more than giving you a little confidence to go off and explore the possibilities yourself, then I achieved my goals. Happy blogging!
6
271
7 W R I T E Y O U R O W N B L O G E N G I N E
|
List of |
|
blog posts |
Add blog post |
Edit blog post |
by Richard Rutter
B L O G D E S I G N S O L U T I O N S
What this chapter covers:
Creating a content management system using PHP and MySQL
Building an administration site to add and edit posts on your blog
Building your own blog
Making your blog searchable
Automatically updating an RSS feed for your blog
Migrating your blog from a development environment to a live server
The previous chapters have demonstrated the extensive capabilities of four off-the-shelf blog engines, so why on Earth would you want to write your own? Well perhaps you’re a control freak looking for the ultimate in customizability. Or (more likely) you’re looking to learn a new trick and have some fun along the way. This chapter will explain how a blog engine works and guide you through the steps of building your own. You will learn how to set up a database in MySQL and how to query that database using PHP. By the end of the chapter, you will have your own blog engine running on PHP and MySQL in a development environment and on a live server for all the world to visit.
A content management system
A blog engine is a specific form of content management system (CMS). A CMS (see Figure 7-1) takes in content (your blog post), stores it, and spits it out into templates for the end users (your readers).
Administration site |
Database |
Weblog |
Figure 7-1. Site map of blog engine CMS and blog
A CMS moves away from static pages and into the realm of dynamic content.
The technology
Like the other blog engines in this book, your CMS will be built using free open-source software. Like TextPattern and Expression Engine, your CMS will be built using MySQL and PHP. MySQL is the database server used to store your blog posts, and PHP is the server-side scripting language used to put content into the database and pull it back out into your templates. I chose MySQL and PHP because they are free, fast, reliable, and easy to learn with vast amounts of documentation and help online.
274
W R I T E Y O U R O W N B L O G E N G I N E
Development environment
All this talk of databases and servers means you are now officially a developer, and every good developer needs a development environment. You could do all your work on a live web server, but life becomes much easier when you can try things out on your own machine, even without an Internet connection.
Before you go any further, you need to follow the instructions in Chapter 2 that explain how to set up a development environment. In particular, you will be using Apache, PHP, MySQL, and PHPMyAdmin.
Preparing the database
You now have all the tools in place to build your blog engine, so it’s time to get down to some serious thinking. First, you need to plan how to store your blog in the database.
Related data in a database is grouped together in tables. Each table consists of rows and columns, similar to a spreadsheet. You can store all your blog posts in a single table; each post will take up a row with its various elements arranged in columns, for example, a Title column, a Summary column, and so on.
A database can contain any number of tables. So in addition to your table of posts, you |
7 |
||
could also have a table of categories. Although each table remains independent of the |
|
||
others, it is possible to extract information from many tables simultaneously by cross- |
|
||
referencing, or joining, tables. You will learn about joining tables later. For the time being, |
|
||
you need to work out how each blog post is structured, from a content point of view, to |
|
||
define the database table for your posts. Let us assume that each blog post comprises a |
|
||
title, a date, a summary, and the post itself. On this basis, the database table containing |
|
||
your blog posts will be structured as follows: |
|
||
|
|
|
|
Field |
Type of Information |
|
|
|
|
|
|
title |
Single line of text |
|
|
date |
Date and time post was created |
|
|
summary |
Short piece of text |
|
|
post |
Potentially long piece of text |
|
|
|
|
|
|
To make life easier further down the line you will need to add two more fields to your table: an id field to provide a unique reference for each post and a timestamp so you can tell when any post was created or modified (this is in addition to the post date).
275