Toast for Sale!
To demonstrate the power of ExpressionEngine, we are going to use a fictitious business as an example throughout this article. Our website is in the business of selling toast (heated bread with melted butter) online.
With this example, we will be able to explore many of the nuances of building a complete website with ExpressionEngine. Though unlikely that we would really want to sell toast over the internet, the concepts of our example should be transferable to any website.
In this article, we want to introduce the world to our business, so we are going to create a 'News from the President' webpage. This will allow the President of our company to communicate to customers and investors the latest goings-on in his business.
Inside the Control Panel
When you first log into the control panel, there are lots of options. Let us take a quick tour of the control panel.
First, we will need to log into ExpressionEngine. If you are using XAMPP to follow along with this article, go to http://localhost/admin.php or http://localhost/system/index.php to log in.
It is assumed that you are using XAMPP with http://localhost/ addresses. If you are following along on an actual website, substitute http://localhost/ for your website domain (for example, http://www.example.com/).
It is required to move the login page to the root of our website to mask the location of our system directory
- The first page we see is the CP Home. We can return to this page anytime by selecting CP Home from the menu at the top-right of the screen, above the main menu. In the left column, we have EllisLab News Feed. Below, we have Most Recent Weblog Entries as well as any Recent Comments or trackbacks visitors may have left. In our case, our site is brand new, so there will be no recent comments or trackbacks, and only 1 recent weblog entry (Getting Started with ExpressionEngine). Clicking on the link will take you directly to that entry.
- On the right, there is a Bulletin Board (a way for you to pass messages to other members of your control panel), the Site Statistics and a Notepad (we can write anything here, and it will be available every time we log-in).
- Across the top is the main menu bar, and at the top-right are links to your website (My Site), this page (CP Home), the ExpressionEngine user-guide (User Guide), and to log-out (Log-out). The Publish and Edit links in the main menu bar are where you can create new entries and edit existing entries. The Templates link is where we can create new templates and edit existing templates. We will spend most of our time in these sections.
- The Communicate tab is where we can manage bulk-emails to our website members. At this time we do not have any members to email (other than ourselves), but as our site grows larger, this feature can be a useful communication/marketing tool.
Be careful to avoid sending unsolicited bulk emails (or spam) using this feature. In many countries, there are laws governing what can or cannot be done. In the United States, commercial emails must meet very specific guidelines set by the Federal Trade Commission (http://www.ftc.gov/spam/).
- The Modules tab is where we can manage all the modules that come with ExpressionEngine, as well as optional third-party modules that we may wish to install. We can download additional modules from http://expressionengine.com/downloads/addons/category/modules/.
- The My Account tab is where we can edit our login preferences, including our username and password. We can also edit the look and feel of the control panel home page from this screen, as well as send private messages to other members. Much of this page is irrelevant when we are the only member of the site (as we are right now).
- The Admin tab is where most of the configuration of ExpressionEngine takes place, and we will spend a lot of time here. By default, most of the ExpressionEngine settings are already properly set, but feel free to browse and explore all the options that are available. Full documentation on each of the options is available at http://expressionengine.com/docs/cp/admin/index.html.
This concludes our brief tour of ExpressionEngine. Now we are going to delve into one of the most important parts of the control panel—templates.
Templates and URLs
The basic concept in ExpressionEngine is that of a template. Go to any ExpressionEngine-powered website and you will undoubtedly be looking at a template. Templates are what the outside world sees.
However, we can take templates a lot further than that. By using ExpressionEngine tags inside our templates, we can take advantage of all the features of ExpressionEngine and combine it with all the flexibility that HTML and CSS offers in terms of layout and design. We are not limited to pre-defined 'cookie-cutter' templates that have been carefully adapted to work with ExpressionEngine. This is why ExpressionEngine is very popular with website designers.
On the flip side, this is also why there is such a learning curve with ExpressionEngine. There is no point-and-click interface to change the look and feel of your website; you have to have some experience with HTML to get the most out of it.
Let us take a closer look at templates and how they relate to URLs:
- If you are not already logged in, log into ExpressionEngine at either http://localhost/admin.php or http://www.example.com/admin.php.
- Click on the Templates button on the top of the screen.
- Templates are stored in groups. There is no 'right' way to group templates—some sites have all their templates in a single group and other sites have lots of template groups. We are going to create a new template group for each section of our website.
- In the next screen we can give our template group a name; let us use toast. There is an option to Duplicate an Existing Template Group which copies all the templates from one template group into our new template group. This can be useful if we are creating one template group that will work very similarly to the one that we already created, but as this is our first template group, we are going to start from scratch. Checking the box Make the index template in this group your site's home page? means that visitors will see the toast website in place of the ExpressionEngine example site. If you are using the XAMPP test server, go ahead and check this box.
- Hit Submit to create the template group. We will be returned to the Template Management screen. A message will appear saying Template Group Created, and the new template will appear in the box of groups on the left-hand side.
- Left-click on the New Template group in the Choose Group box on the left-hand side. Each template group comes with an initial template, called index. Remembering that a template is like an HTML file, a template group is like a directory on our server. The index template is the equivalent of the index.html file—when a visitor visits our template group, the index template is displayed first. For that reason, the index template cannot be renamed or deleted. Let us edit the index template to see what it does. Click on the word index.
- A template is essentially just text (although it usually contains HTML, CSS, or ExpressionEngine code). When we first create a template, there is no text, and therefore all we see is an empty white box. Let us write something in the box to demonstrate how templates are seen by visitors. Type in a sentence and click Update and Finished.
- Just like HTML files and directories, templates and template groups relate directly to the URL that visitors see. In the URL http://www.example.com/index.php/toast/index, the index.php is what distinguishes this as an ExpressionEngine page. Then comes the template group name, in our case called toast. Finally, we have the template name, in this case index.
- Go to the previous URL (with or without the index.php as appropriate, for example, http://www.example.com/toast/index or http://localhost/toast/index) and the template we just edited should appear.
- Now try typing the template group without specifying which template to load. The index template is always returned.
- What happens if we do not specify the template group, and just go to our base domain (http://localhost/ or http://www.example.com/)? In this case, the toast template of the default template group is returned. The default template group is indicated on the templates screen with an * before the template group name and underneath the list of template groups.
ExpressionEngine does come pre-installed with two template groups: the site template group and the search template group. As a new user, it is best not to delete these template groups in case you want to refer to them later.
Working with Multiple Templates
Now that we have created one template, let us create a second template in the toast template group so that we can really play around with these URLs.
- Back on the templates screen in the control panel, select the toast template group on the left-hand side, and then select New Template.
- Let us call the new template test. Leave the Template Type as Web Page. The Default Template Data allows us to choose between starting with a blank template, duplicating an existing template, or using a template from our library. ExpressionEngine does not come with a pre-defined library of templates that we can pick from. This is because templates are the equivalent of HTML files, and the HTML for one website will be very different to the HTML for another website. However, as we build our site, we may find ourselves reusing the same templates repeatedly, so we can build our own template library based on those templates. Right now, we are going to create an empty template. Click Submit.
- Now we need to edit the template so that it is not completely blank. From the Templates screen, click on the New Template to edit it. Then type in some text (or HTML code), making sure it is different from the previous template we created. Then click Update and Finished.
- Now we can go to http://localhost/toast/test (or http://www.example.com/toast/test) and see the new template. At http://localhost/toast, we can still see the index template.
- We will not be using the test template any further, so we can go ahead and delete it. To do this, return to the Templates screen, select the toast template group, and then select the Delete option next to the test template. We will see a warning telling us THIS ACTION CANNOT BE UNDONE. Hit Delete to delete the template.
Creating Our First Entry
At this stage, we know that templates are a fundamental concept in ExpressionEngine. Everything the visitor sees on our ExpressionEngine website is going to be in a template. We could, at this stage, use templates to create an entire website. However, the beauty of ExpressionEngine is that we do not have to.
One of the most important concepts after a template is that of a weblog. Many people new to ExpressionEngine confuse the term weblog with that of a blog. Not surprising, because the association is intentional. At its most basic, an ExpressionEngine weblog can be used to set up a blog with dated entries in descending chronological order. However, there are so many other uses for a weblog that it is more appropriate to think of it as a dynamic data container. Anything that changes regularly (that is, the text of our website) should be a weblog, and anything that stays the same (that is, the HTML formatting of our website) should be a template.
In this section, we are going to create a basic weblog to demonstrate the concept.
Although we use the term weblog in this article, many people prefer to use a more generic term, such as section. It is entirely possible to change weblog to section throughout ExpressionEngine. To do this, go to Admin | System Preferences | General Configuration | Section Designation Word.
- In the menu bar at the top of any control panel screen, select Admin.
- On the left-hand side, select Weblog Administration.
- Now, select Weblog Management in the center of the screen.
- On the next screen, we have a list of all our weblogs. ExpressionEngine comes with one weblog out of the box, called Default Site Weblog, but we will create our own from scratch. At the top-right, select Create a New Weblog.
- On the next screen, we have some more options. Many of these options are designed to save time when creating multiple weblogs.
- The Full Weblog Name should describe the dynamic data that we will be storing in this weblog. For this tutorial, we will use Toast News.
- The Short Name is the name that we will use in our templates to use the weblog data. We usually want to aim for a nice balance between easy-to-type and easy-to-remember. A good rule is to use the same name for both the short and the full names. For this example, we will use toastnews.
- We do not want to Duplicate existing weblog's preferences.
- Select Edit Group Preferences, and select a Category Group of Default Category Group, a Status Group of Default Status Group, and a Field Group of toastwebsite.
- We also do not want to Create New Templates For This Weblog.
- Click Submit, and we will see our new weblog in the list of existing weblogs.
- Now that we have a weblog (or dynamic data container), we need to create some dynamic data. Select Publish on the left of the top menu bar (first red circle in the next screenshot). If a drop-down appears with Toast News when you hover over the Publish button (second red circle in the next screenshot), you can click to directly publish to that weblog. Otherwise, you will be brought to a screen where you can select the weblog (third red circle below). Select Toast News.
- This screen has a lot of options, and can be a little overwhelming.
- First, our new entry needs a Title. This title will appear on our website (unless you choose not to display it), so we want to give it a name that both describes the entry and grabs our readers' attention. As this is our first entry, we are going to give it the title of Exciting First Entry.
- The URL Title is a little more involved. Every entry we post is given its own page, and this is the URL to get to that page. We therefore want to keep the title short but still understandable. It cannot contain spaces (though underscores or dashes are acceptable). A suggestion for the URL title is entered for us when we type in the title field. We are not required to keep this suggestion, but for our purposes we will. Therefore, our URL Title is exciting_first_entry.
- Further down, there are three collapsible sections called Summary, Body and Extended text. Only the Body section is expanded by default. Go ahead and expand the Summary section, then write some text in both the Summary and the Body fields.
- Ignore the plethora of other options and click Submit on the right hand side. We can see a message saying that the entry has been submitted.
In this part, we created a simple ExpressionEngine template that we can publish to the world. We also created a simple ExpressionEngine weblog that we can use to keep our website content fresh. In the next part, we will View the ExpressionEngine weblog and Integrate some basic CSS into our ExpressionEngine templates.