HTML, PHP, and Content Posting in Drupal 6

Exclusive offer: get 50% off this eBook here
Building Powerful and Robust Websites with Drupal 6

Building Powerful and Robust Websites with Drupal 6 — Save 50%

Build your own professional blog, forum, portal or community website with Drupal 6

£16.99    £8.50
by David Mercer | February 2009 | Content Management Drupal Open Source

In the event that you can't find a suitable module to do a task for you, or simply want to create something yourself quickly, it's important to look at how to harness the power of HTML and PHP to get the job done.

If it's layout you are talking about, then HTML is the order of the day. Alternatively, if you want to create some dynamic content that can change depending on the state of your site, or respond to user interaction, then PHP is the way forward. More than likely, you will end up using a combination of both.

Unfortunately, we can't possibly hope to give you a comprehensive introduction into either technology in the space we have here (although we will look over HTML quickly in a moment). However, there are many online resources available to learn about HTML and PHP for free, and we will list a bunch of them throughout this article.

In this article by David Mercer, we will look at how to achieve some fairly useful tasks by way of demonstrating how to create an About us page that will contain links to other useful sites, pictures of the imaginary site team, as well as some dynamic content.

Input Formats and Filters

It is necessary to stipulate the type of content we will be posting, in any given post. This is done through the use of the Input format setting that is displayed when posting content to the site—assuming the user in question has sufficient permissions to post different types of content.

In order to control what is and is not allowed, head on over to the Input formats link under Site configuration. This will bring up a list of the currently defined input formats, like this:

At the moment, you might be wondering why we need to go to all this trouble to decide whether people can add certain HTML tags to their content. The answer to this is that because both HTML and PHP are so powerful, it is not hard to subvert even fairly simple abilities for malicious purposes.

For example, you might decide to allow users the ability to link to their homepages from their blogs. Using the ability to add a hyperlink to their postings, a malicious user could create a Trojan, virus or some other harmful content, and link to it from an innocuous and friendly looking piece of HTML like this:

<p>Hi Friends! My <a href="link_to_trojan.exe">homepage</a> is a great place to meet and 
learn about my interests and hobbies. </p>

This snippet writes out a short paragraph with a link, supposedly to the author's homepage. In reality, the hyperlink reference attribute points to a trojan, link_to_trojan.exe. That's just HTML! PHP can do a lot more damage—to the extent that if you don't have proper security or disaster-recovery policies in place, then it is possible that your site can be rendered useless or destroyed entirely.

Security is the main reason why, as you may have noticed from the previous screenshot, anything other than Filtered HTML is unavailable for use by anyone except the administrator. By default, PHP is not even present, let alone disabled.

When thinking about what permissions to allow, it is important to re-iterate the tenet:

Never allow users more permissions than they require to complete their intended tasks!

As they stand, you might not find the input formats to your liking, and so Drupal provides some functionality to modify them. Click on the configure link adjacent to the Filtered HTML option, and this will bring up the following page:

The Edit tab provides the option to alter the Name property of the input format; the Roles section in this case cannot be changed, but as you will see when we come around to creating our own input format, roles can be assigned however you wish to allow certain users to make use of an input format, or not.

The final section provides a checklist of the types of Filters to apply when using this input format. In this previous screenshot, all have been selected, and this causes the input format to apply the:

  • HTML corrector – corrects any broken HTML within postings to prevent undesirable results in the rest of your page.
  • HTML filter – determines whether or not to strip or remove unwanted HTML.
  • Line break converter – Turns standard typed line breaks (i.e. whenever a poster clicks Enter) into standard HTML.
  • URL filter – allows recognized links and email addresses to be clickable without having to write the HTML tags, manually.

The line break converter is particularly useful for users because it means that they do not have to explicitly enter <br> or <p> HTML tags in order to display new lines or paragraph breaks—this can get tedious by the time you are writing your 400th blog entry. If this is disabled, unless the user has the ability to add the relevant HTML tags, the content may end up looking like this:

Click on the Configure tab, at the top of the page, in order to begin working with the HTML filter. You should be presented with something like this:

The URL filter option is really there to help protect the formatting and layout of your site. It is possible to have quite long URLs these days, and because URLs do not contain spaces, there is nowhere to naturally split them up. As a result, a browser might do some strange things to cater for the long string and whatever it is; this will make your site look odd.

Decide how many characters the longest string should be and enter that number in the space provided. Remember that some content may appear in the sidebars, so you can't let it get too long if they is supposed to be a fixed width.

The HTML filter section lets you specify whether to Strip disallowed tags, or escape them (Escape all tags causes any tags that are present in the post to be displayed as written). Remember that if all the tags are stripped from the content, you should enable the Line break converter so that users can at least paragraph their content properly. Which tags are to be stripped is decided in the Allowed HTML tags section, where a list of all the tags that are to be allowed can be entered—anything else gets handled appropriately.

Selecting Display HTML help forces Drupal to provide HTML help for users posting content—try enabling and disabling this option and browsing to this relative URL in each case to see the difference: filter/tips. There is quite a bit of helpful information on HTML in the long filter tips; so take a moment to read over those.

The filter tips can be reached whenever a user expands the Input format section of the content post and clicks on More information about formatting options at the bottom of that section.

Finally, the Spam link deterrent is a useful tool if the site is being used to bombard members with links to unsanctioned (and often unsavory) products. Spammers will use anonymous accounts to post junk (assuming anonymous users are allowed to post content) and enabling this for anonymous posts is an effective way of breaking them.

This is not the end of the story, because we also need to be able to create input formats in the event we require something that the default options can't cater for. For our example, there are several ways in which this can be done, but there are three main criteria that need to be satisfied before we can consider creating the page. We need to be able to:

  1. Upload image files and attach them to the post.
  2. Insert and display the image files within the body of the post.
  3. Use PHP in order to dynamically generate some of the content (this option is really only necessary to demonstrate how to embed PHP in a posting for future reference).

There are several methods for displaying image files within posts. The one we will discuss here, does not require us to download and install any contribution modules, such as Img_assist. Instead, we will use HTML directly to achieve this, specifically, we use the <img> tag.

Take a look at the previous screenshot that shows the configure page of the Filtered HTML input format. Notice that the <img> tag is not available for use. Let's create our own input format to cater for this, instead of modifying this default format.

Before we do, first enable the PHP Filter module under Modules in Site building so that it can easily be used when the time comes. With that change saved, you will find that there is now an extra option to the Filters section of each input format configuration page:

It's not a good idea to enable the PHP evaluator for either of the default options, but adding it to one of our own input formats will be ok to play with. Head on back to the main input formats page under Site configuration (notice that there is an additional input format available, called PHP code) and click on Add input format. This will bring up the same configuration type page we looked at earlier. It is easy to implement whatever new settings you want, based on how the input format is to be used.

For our example, we need the ability to post images and make use of PHP scripts, so make the new input format as follows:

As we will need to make use of some PHP code a bit later on, we have enabled the PHP evaluator option, as well as prevented the use of this format for anyone but ourselves—normally, you would create a format for a group of users who require the modified posting abilities, but in this case, we are simply demonstrating how to create a new input format; so this is fine for now.

PHP should not be enabled for anyone other than yourself, or a highly trusted administrator who needs it to complete his or her work.

Click Save configuration to add this new format to the list, and then click on the Configure tab to work on the HTML filter. The only change required between this input format and the default Filtered HTML, in terms of HTML, is the addition of the <img> and <div> tags, separated by a space in the Allowed HTML tags list, as follows:

As things stand at the moment, you may run into problems with adding PHP code to any content postings. This is because some filters affect the function of others, and to be on the safe side, click on the Rearrange tab and set the PHP evaluator to execute first:

Since the PHP evaluator's weight is the lowest, it is treated first, with all the others following suit. It's a safe bet that if you are getting unexpected results when using a certain type of filter, you need to come to this page and change the settings. We'll see a bit more about this, in a moment.

Now, the PHP evaluator gets dibs on the content and can properly process any PHP. For the purposes of adding images and PHP to posts (as the primary user), this is all that is needed for now. Once satisfied with the settings save the changes.

Before building the new page, it is probably most useful to have a short discourse on HTML, because it is a requirement if you are to attempt more complex postings.

 

Building Powerful and Robust Websites with Drupal 6 Build your own professional blog, forum, portal or community website with Drupal 6
Published: April 2008
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

HTML

For a browser to render the neatly laid out and colorful pages it needs instructions on what goes where and what color to give everything. This is the domain of HyperText Markup Language (HTML), and Drupal is no exception in its use of HTML here.

Let's have a quick crash course on the various aspects of HTML before we go any further:

  • Simplicity: From tables and frames to lists and images, as well as specifying fonts and styles, HTML is a convenient and readily understandable convention for web-page creation and layout.
  • Platform independence: HTML is platform independent (although not all browsers are exactly the same), which makes sense if you think about it; the last thing you would want, as the builder of a website, is to have to cater for every different type of machine that could make use of HTML.
  • Tags: HTML comes in the form of opening and closing tags that tell your browser how to display the information enclosed within them. For example, the title of a page would be enclosed within the title tags like this: <title>My Title Page</title>. Notice that a forward slash is used to distinguish a closing tag from an opening tag.
  • Attributes: Tags can have attributes that modify, identify or define certain aspects of a tag's behavior. For example, the style attribute in the following HTML snippet defines the color of the paragraph, <p style="color: blue;">I have a blue font</p>, when it is rendered in a browser.

  • Sections: An HTML page is enclosed within <html></html> tags and is divided into head/head and <body></body> sections. The body tags enclose the bulk of the page and contain the information seen on the actual web page. In our case, we need not worry about this because all content is automatically posted between the <body> tags.

This gives us a fair overview of what HTML is and does, but for practical purposes, it is important to see what can be achieved right here and now, using the HTML that is available to us. Actually, all HTML tags are available for you as the administrator to use, but recall that you should only use this account during development; once the site has gone live, you should post content using an input format that is designed for the task.

The following table discusses each of the default allowed tags, along with the <img> and <div> tags that have just been added. Bear in mind that it is not really practical to show each and every attribute for each tag here, so if you would like to learn more about each tag individually, then please take a look at http://www.htmlhelp.com, which is an excellent resource for all things HTML and more.

Tag

Description

Important Attributes

<img>

The <img> tag, unlike other tags, does not require a closing </img> tag. It is used to display images within HTML pages, and through the use of optional attributes can accurately control the appearance and layout of images.

src: gives the path to the image file.

alt: holds a description of the image.

<div>

The <div> tag is the basic building block of a page's layout. It is used to define divisions or section within a page and can be controlled through the use of attributes.

style: used to specify a number of stylistic issues such as background. Remember to make use of CSS and class and id attributes for anything but simple or once off style issues.

<a>

The anchor element facilitates the creation of hyperlinks or bookmarks, which can be navigated by users.

href: specifies the destination URL of the link.

name: allows bookmarks to be created within web pages.

target: defines where to open the link-most often this is a new page, _blank, or the same page, _self.

<em>

The emphasis tag converts

standard text to italics.

 

 

<strong>

The strong tag renders text in bold.

 

<cite>

The citation tag allows text to be referenced as coming from another source or author. It is often rendered in italics.

title: can be used to specify the source or author of the citation in question.

<code>

The code tag changes the

style of the enclosed text to

mimic computer code's style.

 

 

 

<ul>

The unordered list creates a list of bullet points-it requires the use of the <li> tag to stipulate items in the list.

type: defines the type of bullet point to be used: disc, square, or circle.

Tag

Description

Important Attributes

<ol>

The order list creates a numbered list of bullets-it requires the use of the <li> tag to stipulate items in the list.

 

 

 

<li>

The list item tag creates a new item within either an ordered or unordered list; because of this it is contained within <ul></ul> or <ol></ol> tags.

 

 

 

 

<dl>

The definition list tag creates a structured list of items that are defined by the <dt> and <dd> tags.

 

 

 

<dt>

The definition term tag creates a term within a definition list. It is contained within <dl></dl> tags.

 

 

 

<dd>

The definition description tag creates a description of its parent term-it is contained within <dl></dl> tags.

 

 

This table really only lists a fraction of all the tags that are available to you to use. Most tags also have a wide variety of required or optional attributes that you can play around with in order to achieve the desired effect.

With that out of the way, we are ready to begin creating a slightly more advanced posting than all the previous ones.

Creating a Feature-Rich Page

One of the cool things about creating a new page like this is that once it is done, it can be reused pretty much anywhere else, substituting in only those values or content that need to change. Obviously, you want the site to look fairly uniform, and this supports the principle of code reuse—at least in terms of HTML.

It is quite likely that at some stage, you will want to create more than just one standalone page. If this is the case, simply cut and paste whatever page is created here and make whatever modification you need, before posting. Doing things in this way will lend all your pages a similar look-and-feel above and beyond the attributes already given to them by the current theme. The About us page is going to have the following features:

  • Well-structured content
  • List of objectives
  • Inline pictures of the team
  • Information about the project
  • List of important links
  • Some dynamic, PHP-based content
  • Advertising

In order to meet the requirements stated, we are going to need to make use of the following tags:

  • <div>
  • <ol>
  • <ul>
  • <img>
  • <a>

...along with a few others that we will use to demonstrate the various types of available font styles. In order to create a slightly more complex page like this, consider working with a proper code/HTML editor (a search on Google will turn up many results) that can indent code automatically as well as color-code the various tags and content, to make life easier.

Before we begin let's look at the resulting page to get a good idea of what we are working towards. The following screenshot shows the bulk of the page:

I hope you'll agree that this page is fairly pleasing to the eye—no comments on the photo please! For very little work, it is quite easy to achieve a look and layout such as this. What isn't apparent from this page, is that the list of names given here, along with their email links, was provided by a short PHP script that was embedded into the HTML page.

Let's get on with the code—to start with, we have the following:

<div style="text-align: center;"> 
<strong>The MF4Good</strong>
</div>
<div>
The <em>Market Force 4 Good</em> was started by a group of individuals in
<cite title="South Africa">Cape Town</cite>. Through hard work, dedication and plenty
of play time, they have built a truly international community that strives to effect change
with regards to all things related to our biosphere.
</div>
<div>
<p>
We have the following goals:
</p>
</div>

This first section is used to declare div regions that are ultimately responsible for laying out all the content. Notice that I have used the text-align attribute to make the heading move to the center of the page.

If you look past this snippet of code in the previous listing, you will notice the use of the <cite> tag, with a title attribute defined. This is here to show you a novel use for providing references. If a user hovers their cursor over the text contained within the <cite> tag (in this instance, Cape Town), the text defined in the title attribute (in this case, South Africa) will be displayed on screen. In this way, you can clarify or explain important terms without cluttering up your pages.

Continuing along, we get the following ordered list of goals:

<ol>
<li>To provide an online meeting place for like-minded people</li>
<li>To discuss and monitor global conservation and wildlife activities</li>
<li>To influence policy and effect change in hard-hit areas</li>
<li>To support front-line activists like SeaShepherd</li>
<li>To raise funds for animal relief efforts and care</li>
</ol>

As you can see, each list item contains exactly one line of content (or one goal, in this case), and all are contained within the <ol> and </ol> tags. The next section is where we meet some PHP code, as well as insert our image of the team:

<div style="text-align: center;">
<strong>Meet the Team</strong>
</div>
<div>
In no specific order, the following people constitute the bulk of the full-time staff
here at MF4Good (You can email them by clicking on the names shown below):
</div>
<div style="float: right;">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://localhost/mf4good/sites/default/files/team.jpg" alt="The Team" width="250" />
</div>
<div>
<ul>
<?php
$team = array('Tolis Welch', 'David Mercer', 'Bronagh Casey','Nic Malan',
'Brian Reid', 'Rochelle Reid');
foreach($team as $item){
$name = explode(" ", $item);
echo '<li><a href="mailto:' . $name[0] . '@mf4good.org">'
. $item . '</a></li>';
}
?>
</ul>
</div>

To summarize, in this section we:

  1. Added an inline image with <img> and aligned it to the right of the page.
  2. Created an unordered list with the <ul> tag.
  3. Opened up a PHP script by using the <?php tag.
  4. Created an array of team member names.
  5. Used a PHP foreach loop, to iterate through each name in the array.
  6. Obtained the first name of each member by using the built-in PHP explode function.
  7. Echoed the results, replete with HTML tags to the screen.

The actual email links were created using the <a> tag and the special mailto option within the href attribute.

If you have the URL filter enabled, then Drupal would automatically make any email addresses clickable without the need for the <a> tag.

As you can see, there are three attributes used here to get the image properly displayed. The first, src, gives the path to the image file to be displayed; the second gives a description of the photo so that if, for some reason, the picture is not displayed, then the text The Team will be shown instead. Finally, we picked a size for the width of the photo in order to fit it to the page properly. Take note:

Keep image files small! You can reduce their quality and size using image editing software—large images slow down your site.

The email addresses were built from the first name of the team member so the first two addresses are Tolis@mf4good.org and David@mf4good.org. This is slightly contrived as you might not have such an ordered system to your email addresses, but it serves to demonstrate how PHP can be embedded into pages quite easily.

The following section of HTML prints out a list of links to a few other organizations that may be of interest to users:

<div>
<p>At MF4Good we strive to do the <em>right thing</em>! Please take the time to look over
the site and register in order to start interacting with the community - our natural world needs
all the help it can get.</p>
<p>If you are interested in getting involved in any one of the number of critically important
organizations around the world, then please feel free to browse any of the links given below.</p>
</div>
<div align="center">
<strong>Our Friends</strong>
</div>
<div>
<ul>
<li>
<a href="http://www.seashepherd.org">Sea Shepherd</a>
</li>
<li>
<a href="http://www.worldwildlife.org">World Wildlife Fund</a>
</li>
<li>
<a href="http://www.rspca.org.uk">The Royal SPCA</a>
</li>
</ul>
</div>

This part is fairly straightforward, so we move onto the last item on the page—the advertisement:

<div style="text-align: center;"> 
<strong>Our Sponsors!</strong>
</div>
<div style="text-align: center;">
<a href="http://www.packtpub.com">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://localhost/mf4good/sites/default/files/
PacktLogoSmall.png" alt="Packt Publishers" />
</a>
</div>
</table>

This makes use of both a hyperlink and an image file. In effect, we have turned the image, the Packt logo, into a hyperlink by enclosing it within <a> and </a> tags. This means that people can not only view the sponsor's logo, but if they wish, they can also visit the sponsor's site directly by clicking on the image.

With that done, you not only have a nice, shiny new About us page, but also a rough template from which to make other pages with a similar look and feel. There is a lot more that goes into giving pages their look and feel, but this involves the use of themes, which we have not yet discussed.

It is generally a bad idea to include absolute file paths in content because if you move your site to another host, or deploy it after development, these links can break. Consider using the Inline module or something similar to prevent this.

With the page completed, we are not quite finished yet, because it still needs to be added to the site. In order to do this, we need to look at how to actually work with the content we are adding.

Posting a Feature-Rich Page

This brief section will outline the process for getting pages up and on the site. The following list shows the steps required:

  1. Create a new post, or edit one that is to be modified. In our case, we have an About us page already, so as the administrator, we can simply click on the edit tab when viewing the About us page.
  2. Enter or modify the title of the page accordingly.
  3. Select the correct input format. In this case, we have a specially created a format called Special pages.
  4. Copy and paste the HTML into the Body text area.
  5. Ensure the Authoring information and Publishing options are all correct.
  6. For something like the About us page, it is probably best to disable comments, as you really want this to be a standalone page and not subject to any debate from the rest of the community.
  7. Next, ensure that the Menu settings are appropriate for the page being added. In this case, we have the following settings in place:

That's it! Once you are ready to view the page, click on Preview, and if everything looks in order, submit it. Remember that it can easily be edited again if anything is wrong.

Obviously, if you are not familiar with either HTML or PHP, you will need to practice a bit with these, but the following links should provide a start:

Hopefully, you now feel quite confident about incorporating more complex pages into your site.

Summary

With this article, you should have a good understanding of the tasks that lie ahead in creating a fully functional, content-focused website. If you are not already familiar with HTML and PHP, then I recommend you spend some time learning a bit about HTML. That said, you have seen how to create input formats to allow different types of HTML or PHP content into posts, as well as looking at how to create a fairly nice HTML-based dynamic web page.

Building Powerful and Robust Websites with Drupal 6 Build your own professional blog, forum, portal or community website with Drupal 6
Published: April 2008
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

About the Author :


David Mercer

David Mercer was born in August 1976 in Harare, Zimbabwe. Having always had a strong interest in science, David came into regular contact with computers at university where he graduated "cum laude" with majors in applied math and math.

His technical books are now sold worldwide and have been translated into French, German, Polish, Greek, Spanish and many more. His book on Drupal 6 was reviewed on Slashdot and went on to become a best seller. Mercer's books are recommended reading at higher learning institutes like MIT, and he has a write-up on Wikipedia.

David divides his time between consulting for companies and organizations in a wide variety of industries, helping them to develop and implement cutting edge systems. He also contributes to interesting web-based projects like design-a-webpage (http://www.design-a-webpage.com) that allows people to create beautiful, effective landing pages in minutes - absolutely no code or Web experience required.

He also maintains a blog, training and support site for his readers at http://www:siteprebuilder.com. Site prebuilder provides quizzes and exercises that accompany his books, and serves as his primary online presence and contact point.

When he isn't working (which isn't that often) he enjoys playing guitar (generally on stage and unrehearsed) and getting involved in outdoor activities ranging from touch rugby and golf to water skiing and snowboarding.

Books From Packt

Drupal 6 Social Networking
Drupal 6 Social Networking

Drupal 6 Themes
Drupal 6 Themes

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Joomla! Web Security
Joomla! Web Security

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

MODx Web Development
MODx Web Development

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software