The Coding Pad

Programming blog, discussions, tutorials, resources





Category

Building a Website with Drupal for Newbies - Building Your Site

Posted in April 22nd, 2008
Published in CMS, Drupal

This is the fourth in a series of posts on how to build a Drupal website from scratch. My apologies for the delay in getting this installment out, a lot has been happening on the home and work front that sort of slowed me down, but here we are.

In the first segment we introduced Drupal, and went over what we would need to work with Drupal. In the second part, we went over how to install Drupal, and finally, in the third section we set up the Drupal site, changed configurations, and did some other cool stuff. If you have followed the tutorials this far, you should have your website all set up, with your desired settings and names, headers, logos, etc in place. As you know, I am creating a website in tandem with this tutorial, and everything that I do on that site I will describe here in this series and also in future Drupal related posts. The website is http://drupalpad.maryspad.com, and you can check it out to see how far things have progressed and compare it to your site.

Now that you have your site configured, and all the basics in place, the next step is to start building your site. At this stage, our site is still very basic looking, with the Drupal front page introducing the site. For now, let’s leave that as it is. Soon I will show you how to put something else there when we delve into content creation and content management. For now, let’s add some important components.

In the admin screen, click “Site Building“. Here you will see four sections: Blocks, Menus, Modules, and Themes.

Blocks allow you to configure your layout, and set different things in different regions of your site. For example, you may want a list of rss feeds from a different website to appear on the left side, and an ad block to appear on the right side. All these can be set using blocks. The available regions available to you will depend largely on the theme you use for your website. Some themes are built with more regions than others. In the Blocks page, as I mentioned, you will see what regions are available to you highlighted or surrounded by a dashed border on the page. You will then be able to scroll through the enabled features on your site and assign blocks to regions. We will explore how to do this in this tutorial.

It’s important that you decide how you want your website laid out before you select a theme, because then you can select a theme that makes all the blocks and regions you want available.

Menus helps you to create and control the different menus through which users will navigate your site. The Drupal default install comes with the Navigation menu all set up on the left side. You can change or disable this as you please, and can even change what items appear in the Navigation menu. You can also create your own custom menus and place them in different regions as you please, and add items to them.

Modules add functionality to your website. There are many modules, some which come pre-installed, and many many more that you can download and add, to enhance and really make your website powerful. Some modules that come preinstalled are Forums, Aggregators, etc. We will be exploring and enabling some modules shortly. Installing new modules is usually pretty straightforward, and modules will come with instructions.

Themes are what determine the overall appearance of your site and distinguish it from another website. The default drupal 5.7 install comes with the Garland theme, which is the same theme that the Drupal website currently uses. You can change the theme by selecting and enabling a new theme, and making it the default. We will do this later as we continue creating our website. The Drupal install comes with a few themes, but you can explore and find many other themes at the Drupal website, and on other websites. A simple search in Google will yield many different sources of themes. You can also configure the Garland theme and have different colors.

Remember that changing your theme needs to be done when you’ve decided how you want your website laid out so that you can select a theme that enables the regions you need to place blocks on. For the meantime, we will keep the Garland theme on our site and change it a bit later.

There are some changes we can make immediately though without necessarily changing the theme, and these include changing the site logo and the favicon shortcut icon (referred to in Drupal as the Shortcut icon). We do this by doing a global theme configuration, which basically means that these changes will be applied regardless of the theme we’re using.

NB: I have seen some themes that override global theme settings, so when you enable a new theme, make sure to go through and make sure everything is as you want it.

OK, enough theory. Let’s make some changes to our website.

Making Global Theme Changes
While in the Site Building page, click Themes. You will see a list of available themes. Go into the default theme, in this case Garland, and click “Configure”. Only themes that have been enabled (square box ticked) are configurable. You will see the different configuration options available for your theme and you can explore them further. For now we want to change global settings that will apply to all themes, with the caveat mentioned above. So at the top, under Themes, you will see “Global Settings”. Click on that.

Here you will see the global settings, such as whether you want to the logo, site name, slogan, etc to appear. Make your selections. On the right, you’ll see the option to allow content to show “submitted by Username on date” information. For now, if you’re a Drupal newbie, leave this as it is, and we will revisit it when we start working on content.

Further down the page are settings that you will want to change to further give your site it’s own identity. The Logo image setting allows you to change the default Drupal Logo on the top left side of every page to your own logo, if you choose to have a logo. Uncheck the “Use the default logo” box. If you have an image on your computer that you want to use as a logo, you can upload it here, or else link to it if it’s on another location on your webserver using the path to custom logo.

PS: You may find that you’ll need to resize your image to fit the space designated by the theme. What I usually do is right click on the image on the logo image and select properties, which allows me to see what size the default image is and then resize my own image appropriately before uploading.

The next step is to change the shortcut icon (or favicon) if you want to use one. This the is the icon that will appear next to your url name in the browser bar and next to your website name in the browser tabs. Again, you need to have created a favicon already, and have it somewhere. Uncheck the “Use the default shortcut icon” box and upload or link to your own favicon.

Then click “Save Configuration” to save your changes, and then navigate to your website url to see the changes. You may need to refresh the page or empty your cache to see the changes.

Hint: At this point, if you’re tired of the blue garland look, you can make one more change to make your website not look so default. The Garland theme allows you to make some color changes, so that while you’re still working with the same theme, it does look a little different. Go back into themes, and configure Garland. You will see an option to change theme color. Some themes come with this functionality that allows you to change theme color. Select the colors of your choice, either by using the drop-down box to select a predefined color set, or by selecting Custom and changing colors for the different parts of the theme, the base color, the header, etc. Experiment to see what you like and voila! Your site looks even more unique!!

For my sample site, I have removed the logo and the favicon, and changed the theme color to blue. Perhaps later I will find a nice graphic to add as a logo that matches whatever theme I finally settle on, but for the moment I am content with having no logo or favicon until I have fleshed the site out some more.

Working With Modules
We have now built our site to the point where we have the website name, logo, and favicon all set up. Our website is starting to look distinct and more unique. We are now going to work with modules. Modules allow you to expand the functionality of your website. They are powerful and can make your website do a lot of wonderful things. Being a relative Drupal newbie myself, I am still exploring all the modules on the Drupal website and seeing how I can use them in different ways on my websites. As I mentioned, the default Drupal install comes with some modules preinstalled. Some of these are enabled and some we will enable on an as-needed basis. At the end of this tutorial, I will talk briefly about how to add new modules and enable them.

For now, let’s look at what modules are available and see what we can use for our new website. In the admin mode, select “Site Building” and click on “Modules”.

You can see the long list of modules available. It would be redundant and a waste of time for me to list them and their descriptions here. Take a quick look at them. You will see some of the modules depend on other modules and require them to be enabled, while other modules are required by other modules. or example, the Forum module requires that the Taxonomy and Comments modules be enabled, which they are by default.

Depending on what you want your website and website users to do, you can enable or disable these modules to create the functionality you want. For our sample website, we would like to be able to have feeds from other websites, such as the latest news headlines, appear on the front page. For this to work, we need the Aggregator module to be enabled. You could also use this module to show feeds from your blog, etc. We also want to be able to have user polls, where we will create questions and have users vote on them. We want visitors to be able to search our website for the information that we need, and we want a contact form so visitors can send us a message without knowing our email address. Contact information on a website is important because it allows your visitors to give you useful and sometimes uplifting feedback, to share their thoughts, ask questions, and even let you know when something is broken. It’s better not to have an email address on your website, because then spambots can pick it up and you end up with a lot of junk in your email. So a contact form is useful for this purpose. OK, so let us check the boxes for the modules we’ve decided we want: Aggregator, Contact, Search, and Polls. One more module that I want you to select is Path. The Path module allows us to use Url aliases. Remember in the earlier tutorial I mentioned that beyond creating clean urls that didn’t have the ?q characters in them, you could also make the urls search engine and user friendly by making them match the page content? This is what the Path module does. So select that one too.

Once they’re selected, scroll down the page and click “Save Configuration.”

Hint: If you’re in an adventorous mood, go ahead and select other modules that you want to play with. I just chose some basic ones to work with for the tutorial, but don’t let my wimpiness deter you. For example, you may be ready to jump right in and add a blog! Well, good for you, go for it!!

Hint2: There is another module, related to the Path module, known as the Pathauto module. The Pathauto module extends the path module by automatically creating the url alias based on your content title. You have to download this module from the Drupal website and install it manually as it’s not part of the default install, and in addition you need the Token module for this to work.

We will play with these modules as we continue setting up our site and creating content.

Extra: Adding New Modules to Your Drupal website
Adding new modules that are not part of the Drupal install (such as Pathauto and Token mentioned above) is a relatively straightforward process.
1. Download the module you want to use from the Drupal website onto your computer.
2. Unzip the archive into a folder, and see if there is a readme or install text file that describes how to install the module. If there is, follow the instructions to get the new module working on your website. If there are no instructions, the following shoud work.
3. Using your favorite FTP program, go into your website folder, navigate to sites, and then to all. You should upload all modules and themes into this folder. This comes in handy if you ever use Drupal’s multisite feature, (which is too advanced for me to cover in this series of tutorials). It’s also the recommended practice. In the Sites/All folder, create two folders (if they don’t already exist). Call one Themes, and the other Modules.
4. Upload the folder with your module into the Sites/All/Modules folder.
5. To make sure the module is successfully uploaded, go into the admin page, Site Building, Modules, and scroll down to see if the module you just uploaded is available. If you see it then the upload process was successful and you can now go ahead and enable your module.

In the next tutorial, we will look at content types and content management, and start adding some content to flesh out our site. We will also work with our menus and the modules we enabled to make our site more functional and usable.

Bonus: Change the front page content

Because we’ve come this far and the site is looking good, why don’t we go ahead and change the content on the first page so we get rid of that default Drupal stuff? Click on Create Content in your left side navigation menu. I will talk more about the different content types in the next installment, and go into more detail on content creation and management. For now, just click on Story, and then type in whatever you want. You could do an introduction to your website, such as I did at the Drupal Pad, or something else, whatever tickles your fancy.

If you scroll down the page, you’ll see right below the content editor several lines of text, these are collapsible regions with options that you need to look. Again, we will go into all these in more detail later. For now, click on Input Format. You only need to change this if you added any HTML formatting to your text, such as I did in adding links, in which case you should select Full HTML formatting. Don’t worry about the URL path settings for now or any of the others except for Publishing Options. Click on that and make sure the options “Published” and “Promoted to front page” are selected. Then click “Submit”.

If all goes well, you should see what you just typed with the text ” Your Story has been created.” at the top. If you now click on your website name in the header you should see your website as someone would see it if they typed your url into the browser.

Congratulations, your new website is taking shape! In the next tutorial we will look at content types, content creation, and content management and add some more content to our site, as well as using some of the modules we enabled earlier, plus some other cool stuff.

As always, I welcome any questions and feedbacks you have.

Kings among Content Management Systems

Posted in March 1st, 2008
Published in CMS, Drupal, Websites, Wordpress

In the world of Content Management Systems (CMSs), there is an array of options and choices so dizzying as to be completely overwhelming for the newbie, and sometimes even for the seasoned programmer or webmaster. These CMSs are capable of so much and they all have different things to offer. One major advantage of using a CMS is the ease with which you can set up and deploy a website! Using a CMS can save you a lot of building time and allow you to concentrate on creating content and marketing your website.

I have tried and played with many free content management systems to see what their different merits are, and have settled on two favorites on the basis of my needs - blogging and building content websites (for which I use either CMSs or hand coding).

For blogging, I definitely consider Wordpress to be the master! With a strong community committed to creating themes and plugins, you can do almost anything with Wordpress. It’s easy to set up and configure, and to add functionality to. With a little PHP knowledge, you can configure the files and play with them with ease.

For building larger content based websites, I declare that Drupal is King! I haven’t been playing with Drupal for too long, but I’ve been able to build some interesting websites, and have only glimpsed the possibilities. While many argue that Joomla is easier to use and has many more themes available, I am still enamored by Drupal. I will happily sacrifice the beautiful Joomla themes for the functional for the amazing functionality of Drupal. Granted, it’s not the easiest CMS to set up, but once you’ve mastered the basics, you’ll find that the possibilities will whet your appetite for more and more, and there’s an excellent and very helpful community of Drupal users at Drupal.org and all over the web.

In the next few days I will be creating a tutorial to walk you through creating a Drupal website, and will show you the different things you can do. This will definitely be a newbie tutorial of sorts, but will evolve with time as I learn the ropes of more advanced topics. So stay tuned and be sure to subscribe to the blog so that you don’t miss any of the tutorials.

In the meantime, here is a list of impressive websites built with Drupal to get you thinking, and to whet your appetite. While a lot of these websites have been heavily modified and themed, they show you what Drupal is capable of:

Drupal (of course)
BlogHer
Team Sugar
The New York Observer
Tipic
Pando
Best Credit Shop
AdoptionBaby

…and the list continues. If you have or know of any remarkable sites built on Drupal, feel free to share them here. And stay tuned for the tutorials.

Flat File Blogging with FlatPress

Posted in February 25th, 2008
Published in CMS, Free

If you’re into blogging and host your own blog, you are aware of the need for MySQL databases when you install most blogging platforms, and this is because most blogging programs, and indeed most content management systems store their data in a database. This is generally not a problem because most web hosts offer MySQL databases. But there are situations where you may not have or want to use a database.

Flatpress is a standard-compliant multi-lingual extensible blogging engine which does not require a database to work. Better yet, it’s open source. FlatPress stores all of its content on text files and therefore you don’t need a MySQL database. Installing it is a breeze, and you can get several themes to work with. Theming is done with Smarty and PHP, and the Wiki on the official Flatpress site has some useful information on this and other topics. There are a good number of plugins available, including Akismet, Categories, Calender, etc. Flatpress also has the ability to use widgets using the blockparser plugin.

All in all, FlatPress looks like it’s worth exploring, and is something I will be looking at and playing with more.

Have you used or do you use FlatPress? Please share your thoughts and experiences with us.

Venturing into flat-file Content Management Systems

Posted in December 1st, 2007
Published in CMS, PHP

Life has been busy with school and all taking up an inordinate amount of my time. However, I have also been playing around with some small coding projects. I have some big ideas but they’re going to need a lot of time to build. I realized that to get these projects off the ground I’ll need to really buckle down and work on my PHP coding skills, so these projects will have to wait till next year.

Apart from that, I’ve been working on some small website projects using PHP, and one thing I’ve been playing with is the concept of flat-file content management systems. These are content management systems that don’t use a database to store information, but instead, the information is stored in text files. If you have worked with any of the database-based content management systems before, such as Joomla, Mambo, or MODX, you know that they are pretty heavy duty, and sometimes resource hungry because of all the utility and functionality that the try to provide.
Flat file CMS’s are ideal for smaller websites that don’t require loads of information to be pulled from many different places at the same time. Since I am just starting to explore these kinds of systems, all I want to do in this post is introduce the concept to you and explain why I think it’s such an attractive option. Here are advantages, I am finding, of using a flat-file CMS:

  1. I don’t need a database - This is useful because one of the hosting accounts I use offers only a limited number of mySQL databases, but unlimited add-on domains. So I can reserve the mySQL databases for my bigger websites and use flat-file CMSs for my smaller websites. With today’s ever-expanding hosting solutions, this might not be an issue for most people, but it’s definitely an advantage to keep in mind.
  2. Installation is easy - Flat-file CMSs are a breeze to install and setup, since all the configuration information is in easily accessible files.
  3. Updates are easy -Unlike most major CMSs where updates involve going back and figuring out what to do with all your plugins, and what files had you edited where, updating flat-file CMSs is a breeze since changes are usually to specific files and are easy to implement. And because you’re not working with databases, updates are an easy DIY task.
  4. Editing and tweaking is easy - Most of the flat-file CMSs that I have had a chance to glance at are written in PHP, so they are easy to figure out and tweak. As I mentioned in a previous post, playing with CMSs is a great way to master PHP.

There are a number of flat-file CMSs out there and I will be talking about them in future posts. The one that I am currently dabbling with is NanoCMS, a nice little flat-file CMS that is proving to be quite useful and easy to play with, so you may want to check it out if you need to whip up a quick website without much ado.

CMS’s - Another reason to master PHP

Posted in July 19th, 2007
Published in CMS, PHP

If you are interested in web development, then you’ve probably at some point discovered, dealt with, or cursed at a Content Management System (CMS). This is actually one of the main avenues through which I discovered, and decided to learn PHP. Installing a CMS and modding it to get it to look like you want, let alone work like you want it to, can be painful. It can also be fun… it’s all a matter of perspective. Using a CMS can save you a lot of time and effort in putting a website up. Depending on the application that you choose, using a CMS can also add a lot of functionality to your website with minimal coding effort and time on your part.

Many CMS frameworks are built on PHP, and having PHP skills goes a long way in helping you install, secure, and modify files so that you get the look, feel, and functionality that you are seeking.

There are many PHP-based Content Management Systems out there, and picking out one that works is often a matter of trial and error. I don’t want to dwell on the different CMSs in this post since they are too many to count, but a good place to look at and compare them is http://www.opensourcecms.com. You can test-drive a lot of them there, look at the admin panel, and determine if the CMS is what you’re looking for.

My recommendation is that you get yourself a free, or relatively cheap hosting account that offers PHP and mySQL. A good feature to have would be the ability to create subdomains. You can then use this account to test and play with CMS applications to your heart’s content, without any risk to your primary website. This is the approach that I use when testing and picking content management systems.

Hosting

For cheap hosting, I recommend Hasty Host because they have a great capacity plan that will allow you lots of space and bandwidth to set up different systems and test them out. If you want to use a free account, then I would recommend going with Byet Host. They offer you cpanel hosting, with 3 MySQL databases, and 5 additional subdomains.

Bear in mind that you’re going to need a MySQL database for each system you install, so the more the better. I prefer to shell out the $2.95 a month for Hasty Host because I get an unlimited number of MySQL databases, and unlimited subdomains. With the free hosting plans you will have to contend with ads on your page. However, with a plan like the one I have at Hasty Host, you are in full control, and if one of your CMS experiments takes off and you like what you’ve created, you don’t have to worry about stripping everything down, and starting again on an ad-free hosting account. You’ll already have you site set up and ready to go!

Domain Names

The other thing you may or may not need is a domain name. If you go with a free hosting plan, you won’t need a domain name unless you decide to use one, and you free hosting account allows you to. In most cases your account is a subdomain of their account, for example: myexperiments.myfreehost.com, or myfreehost.com/myexperiments. If you do go with a cheap hosting account such as Hasty Host, then you will need to purchase a domain name. I recommend always buying your domain names from established registrars, such as GoDaddy (www.GoDaddy.com).
Once you have your hosting account set up, you can start playing with the different content management systems to see what they have to offer.

Some Tips

  • If you want to test the applications side by side, create subdomains for each, so that you can compare features and functionality without the hassle of installing and uninstalling.
  • Name each subdomain with a meaningful name in case your experiment takes off and you decide to keep the website.
  • See if your hosting offers a script installer such as Fantastico, since this makes installing different CMSs easier.
  • You can use your account to test blogs, bulletin board scripts, and other scripts too!
  • Most CMS apps have user forums, which are always a good place to go for tips and help when you get stuck.

Have fun! And happy coding.


www.godaddy.com

 

 Subscribe in a reader

About The Site

It is what it is, my coding pad, a programming blog, yet another place for my restless mind.