Learning Drupal from scratch

Drupal sites screenshots

Drupal is a CMS, that is, a Content Management System. When newly installed it provides already lots of useful functionality, enough for you to have a nice blog. Within a little time you will be able to build very complex sites with Drupal quite quickly. You will be able, for instance, to control the products or documents of your business.

This tutorial expects you to be using Linux and to be familiar with the command line. Don't be afraid if you don't meet these requirements, though, it's easy to start and you may find lot's of tutorials in the Internet. You may also always ask a question bellow.

To use Drupal you will need to have a hosting provider and a domain. After that you will install Drupal in your server.

Domain
It is the address of your page. My domain is ndvo.geekgalaxy.com. You need to buy a domain and usually the hosting provider will also handle the domain. This will cost you something around $15 a year.
Hosting
To buy a domain you will need to provide an address of a server where your site will be hosted. I recommend you to look for a hosting provider that explicitly supports Drupal. A simple web search will do the job (search for "Drupal hosting", for instance) and will cost you, for simple websites, some $10/month.

That is all you need to build your website. You may learn to use Drupal without a hosting provider:

Installing Drupal

Let's learn to install Drupal

Configuring the server

If you have hired a hosting provider and is already working with it, you may skip this part. If you want first to try to learn to build your website in your own machine (running Linux) and doesn't know where to start, I hope I'll be able to help you.

Web development notions

A web page is basically a text file, written in such a way that your browser can understand. When you access a web page you are actually downloading a file written in HTML (which is a markup code, or simply: text with marks). This file is then rendered by the browser so that you can read or enjoy it.

You can view the code behind this very own site. Just right click anywhere on this page and select "view source".

Building a website means writing text files coded with a given pattern: HTML.

HTML stands for Hypertext Markup Language and it is a simple file with some marks in it that looks like this: <b></b>

That's right: websites are just plain simple text files!

Although each webpage is a simple text file, the contents of a full website may be complex or very large. Managing such content and presenting it to the user are not simple tasks.

The HTML content must change according to many things, for example: according to the user. When you access your email you will see only your messages, but when I access my email I'll see only mine. HTML text needs to be different in each case. When the administrator of a website access it he must see different options than the regular user.

As you can see, in many cases the HTML must be written for each user each time he access the site. We call this "dynamic website".

That is why most of the websites are not simple HTML code, but actually scripts written in a programming language. These scripts write the HTML code during runtime, I mean, when a user asks for the page.

Most sites are actually computer programs that write HTML code.

Website content is usually very big and rich. Let's take a blog for example. You may want to see a text written months or years ago. All this content is usually stored in a database. The program must access this database to retrieve the content in order to build the HTML.

The website content is usually stored in a database.

Let's review this. When you access a site, a program in the webserver will access a database in order to retrieve information and then will use this information to build a HTML file that will be delivered to your browser.

The picture
	shows a scratch of a webpage over some HTML code. The HTML code is over
	a table and some PHP code.
A webpage is the result of the HTML code. The HTML code is usually built by a software using a database to organize content.

There is yet a step to be explained. How will the server know what program to run in order to write the HTML and, afterwards, what to do with the resulting HTML file? For this task we use another program, known as "Web Server". This software "listens", that is, waits for someone to ask for a page. When someone asks something it runs the necessary programs, get the result and returns it to the client.

We have three programs in action: the internet server, the database server and the HTML writer. In real world we call this HTML writer "application" and it do way more than simply writing HTML.

Installing the servers: Apache and PostgreSQL

Installing the internet server

The most famous and used internet server is called Apache.

In order to install Apache in your machine you can simply use the following command (in Debian Linux, as root):

# apt-get install apache2

or

sudo apt-get install apache2

Sudo is a program that allows you to do something as root user or super user (su = super user).

Apache is a software different from those you are probably familiar with. You will not open an Apache window and click in anything. Neither will it be invoked from command line. It is a daemon also known as service.

Daemon is a software that runs in the background, permanently. It starts during initialization and keep running until the server is turned off. There are several of such softwares running in your equipment right now: they are waiting for a flash drive to be plugged or searching for wifi networks.

After installing Apache it will be started and will be already running. Congratulations: you now have an Internet Server.

Let's try it. Open a browser and in the address bar type your own machine address, so that you can see the page hosted in it. The "your own computer" address is localhost or 127.0.0.1. These are the computer equivalent to "me" (or "home")

When accessing localhost you will see a page saying "It works!". It works indeed. This page is a HTML file, saved in a place Apache knows with the name Apache expects. When asked to provide an Internet Page, Apache returns this file. The best part is: you can edit it.

This file is named index.html and you will find it in the folder /var/www/. This is the folder Apache expects websites to be.

Access this folder and edit it. You can do so using the command line like this:


cd /var/www/
gedit index.html

After making some changes to the file, reload the page and you will see your changes.

Installing the database server

A database sever is a software used to store and retrieve information. It is very useful when you have lots of pages (or pieces of pages).

You will probably not be surprised to find out that the database server is also a daemon. It waits for a query in order to return the information asked.

The database server we will use is called PostgreSQL. It is a robust and free database server that will most probably meet all your needs up until your company is worthy millions.

We can install it on Debian using the command:

sudo apt-get install postgres

Postgre, and to some extent also Apache, will demand a special configuration. Let's deal with it now.

Configuring servers

Configuring Apache Web Server

Wen we installed Apache it came with quite a reasonable configuration and, therefore, we didn't even realize we had to do something about it.

Apache, with its standard configurations, thinks more or less along these lines:

  • My root folder is /var/www/.
  • I work only in my root folder and its subfolders.
  • If anyone asks me anything, I'll answer delivering my root folder.
  • If I have to deliver a folder (including my root folder), I'll deliver the index.html file found in such folder.
  • If there is no such folder, than I'll build a HTML file containing a list of files in this folder and deliver it.

All these configurations may be changed if needed.

Let's consider it for a moment:

Static vs Dynamic pages

We have learned that there is an application that creates the HTML when it is called, and that this application will access a database and return the results. This means that we must tell Apache to call such application instead of simply returning the index.html file found in the folder.

The index.html file is a HTML file written by someone (or by a script). It is a static file because it does not change. We need Apache to call a program instead. Such program may be a script written in any programming language (PHP, Python, Ruby, Shell Script). Apache will than call the program, the program will run and return something to Apache, Apache will then deliver this to the client.

From files and folders to parameters and arguments

When we access a website we are asking Apache (or some other Web Server) to give us a file. The address http://ndvo.geekgalaxy.com/drupal is asking for the drupal file inside the /var/www/ folder in the ndvo.geekgalaxy.com machine. Let's try it: place a file inside your /var/www/ folder (let's say picture.png) and then try to access it on the browser (http://localhost/picture.png).

We'll need to change this behaviour. In a dynamic site, when the user tries to access http://localhost/picture/nice.jpg, for instance, we want Apache to call the exact same program that it would if we had tried to access http://localhost. The rest of the address (picture/nice.jpg) should be passed to the program to evaluate. Let's say our site is a virtual store. When the user access the address http://localhost/shoes/black/38, we want him to see a list of the black shoes available in the size 38. If the user changes 38 for 28, we want him to see the same list, but with the 28 sized shoes instead.

We need Apache to stop taking into account the rest of the address and leave this job to the application instead. In the application we'll treat them as parameters instead of folders and files.

It is necessary to install the "rewrite" Apache module and than to restart the Apache. Here is how it is done.


sudo a2enmod rewrite
sudo service apache2 restart

The a2enmod command enables a given Apache module, in this case the "rewrite".
The service command allows you to restart easily the Apache service.

One server, lots of sites

Configuring web servers is not really a daily job. It would be much better to configure the server once and run several sites on it. This means that Apache will need to treat differently the requests according to the domain name used to call the site.

Let's suppose that you have bought the domain myname.dom and also bought mystore.dom. You want to run your personal blog on the first and your e-commerce on the second. Both domains lead to the same server and Apache will need to recognize each domain and use a different root folder for each. When someone tries to access your blog Apache will use as root folder /var/www/blog and when someone tries to access your store it will use the folder /var/www/store.

Configuring multiple sites in Apache

We know Apache has no graphical interface and also that it is not called from the command line. How can we configure it then? The answer is: by editing a configuration file.

When Apache starts it reads certain files and follow their instructions. These are the configuration files.

There are a few configuration files that you may need (or want) to configure. If your using Debian or a Debian based distro and installed Apache using the repository version, than your configuration files will be the same as mine. If not, you will have to look in your Apache folders for the files that contain the configuration. It is probably easy, just follow your distro's conventions.

Configuration files in Debian will be found in the /etc folder. There you will roughly find a folder for each installed program. Let's access the folder /etc/apache2. There you will find a folder called sites-available. Within this folder you will find a configuration file called 'default'. This file holds the default configuration options for each site hosted in this Apache installation. If we want to have different sites in a single Apache installation, we need to create a file modeled after this for each site.

We can simply duplicate that file to use the copy as a model to create our own configuration file:


cd /etc/apache2/sites-available
sudo cp default blog
sudo cp default store

We now have three configuration files absolutely equal to each other. That's useless. Let's change the parameter of them.

After opening the file you will see lots of configurations. Do not panic. We'll deal only with a few and doing so is simpler than you think.

On the second line is written "ServerAdmin" followed by an email. That is the webmaster email, I mean, your email. Just make it so.

On the fourth line you will find "DocumentRoot", followed by /var/www. This folder is the website root folder. We want this folder to be /var/www/blog (or /var/www/store) depending on which file you are editing Change the file accordingly.

Now let's take a look on the first line. It creates a VirtualHost. That means we will have a host that will be handled by Apache differently. That line says "<VirtualHost *:80>". That asterisk means "any". This means that whatever the domain used to access this Apache installation, Apache will answer using these configurations. Let's set different domains in order to have a behaviour for blog and another behaviour for the store.

The domains we want to use are myname.dom and mystore.dom. We don't have these domains, though, so we will need to use a little trick. There is a file in our /etc folder that holds a list of custom domains and their IP address. If you place a domain name there, your computer will use the respective IP address, without asking your DNS provider.

We'll simply write in the beginning of the file the following:

After that we can access our own machine (127.0.0.1) using the domain names myname.dom and mystore.dom.

Now we will change VirtualHost line to <VirtualHost myname.dom:80> in one case and <VirtualHost mystore.dom:80> in the other.

Security and Precaution

In order to avoid errors Apache allows us to edit the files in sites-available folder and run a command afterwards to use these configurations. This means that our configuration is not yet valid, it is only available. In order to enable it we will run the command a2ensite (Apache 2 enable site).

 sudo a2ensite blog sudo a2ensite loja 

After running these commands we have our configuration in place. There is one further step, though. You may remember that Apache will only read these configuration files when it starts. We need to ask Apache to reload or restart so that it will read our configurations.


sudo /etc/init.d/apache2 restart

The above command basically executes the file apache2 that is saved in /etc/init.d/ and use "restart" as a parameter to it.

Configuring PostgreSQL

Postgres user

PostgreSQL is a robust database system. It ships with some very restrictive settings regarding security. On installation Postgre creates a new user in your system, called postgres. This may sound a bit weird but when we say Postgre creates a new user in your machine, that is really what we mean.

Besides you there are others users working in your system. They are usually used by daemons (softwares that keep running in the background). Apache does this too (the name of Apache user is www-data). It is actually a very handy thing for daemons to do to create their own users. Thanks to this you can use the regular permissions rules of your system to allow or disallow theses softwares to access content or run other programs.

When someone access your website, for instance, he is accessing something in your machine. Actually, Apache is accessing the document saved in your machine and handing it to the client. We can restrict Apache access (it is restricted by default) so that other people won't access everything we have, but only those things we allow. We will come back to this issue eventually, for now let's go back to Postgre.

Postgre creates a user called postgres and this is the only user that is allowed to access the database system. This means that you (your user) cannot use the database system by default. It means security, for sure, but we need to create a database to use in our website.

We need to assume the role of postgres and create a new user for us in the database.

The command su is usually used to take the role of super uuser (called "root"), but it can be used to take the role of any system user. If I run the command


su smith

Then I will take the role of smith in the system. O comando

su
normalmente é usado para assumir o papel de super usuário (o usuário "root"), mas pode efetivamente ser usado para assumir o papel de qualquer usuário no sistema. Se eu der o comando su joao eu vou tentar assumir o papel de joao no sistema. Note que não é qualquer usuário que pode ficar assumindo o papel dos outros, só o root pode fazer isso, de modo que teremos de rodar o comando para nos convertermos em postgres usando o sudo.


sudo su postgres

You may have noticed that the terminal is now showing postgres in the prompt instead of your name. This way you will not get confused about what user is acting.

psql

A database is a set of tables. Each table will record several things. Each column will represent an attribute and each line an item.

In order to deal with the database you will need a system capable of:

psql is this the software we will use for these tasks. It is a command line software. It works receiving commands in SQL and executing them on the database.

What the hell is SQL? Well it stands for Structured Query Language. It is a language used to give commands to a database.

SQL
Structured Query Language. We don't really need to learn a lot of SQL now because Drupal will handle most of our database needs.
Command line
Sooner or later you will host your site in a remote server. It is easier to work remotelly (and even locally) with the command line. It is quite simple to automate repetitive tasks in the command line. Moreover, the command line tools are usually very powerfull especially when combined. It is worthy to learn it.

Let's move on. We've seen that we can act as postgres and now we want to create a user for ourselves in the database. Here are the needed steps:

  1. become postgres
  2. create a user in the database
  3. create a database with the same name of the user and give the user permissions in such database

Becoming postgres:

sudo su postgres

Now, as postgres, let's call the program called "psql":

psql

Now we are no longer working on the linux terminal prompt, we're working within the psql program. You can see the psql prompt is now changed. While we're in psql we can issue commands to the database using SQL language.

Let's use SQL to create our user and then a database for our user:


CREATE USER myuser WITH PASSWORD 'mypassword';
CREATE DATABASE myuser WITH OWNER myuser;

You can see that the commands are quite intuitive. There are some catches though. That semicolon, for example, is not optional. Every sentence must end with a semicolon.

To close the

psql
simply press CTRL+d (press "d" while holding CTRL), or you can type "\d" (without the double quotes). Actually, CTRL+d is the shortcut key to close most command line programs. Now that you left psql you need to go back to your user, that means, stop acting as postgres. Simply type "exit" or press CTRL+d again.

Now we have both the Internet server and the database server installed. It is important that you remember the user and password of the database because you will need it to inform Drupal, as we will see next.

Installing PHP

PHP is a programming language. Drupal is written with this language. Programming languages are softwares too and therefore they need to be installed and configured to be used.

A programming language is basically a language, that is, a way of writing things. Once you install PHP your computer will be able to read and understand (interpret and execute) the text (the code) written in PHP. PHP is installed on the server, the computer that hosts the website. On this tutorial we are using our own computer as a server, but the computer that access the site (the client computer) does not need to have PHP installed (nor Apache and Postgre, of course).

Besides the programing language we will need to install also some "libraries". A "library" is basically a ready made code. A code that someone has already written to extend the programming language. Libraries help us avoid rewriting code. There are many tasks that are very common and it would be a waste to write new code each time we need.

We have to install two of these libraries besides those that come with PHP: one to deal with images (resizing, cutting and so on) and another to integrate PHP with a Postgre Database. Drupal needs these libraries and if they are not installed it cannot run. The command bellow will install all this:

sudo apt-get install php5 php5-cli php5-gd

For now we don't need to anything else regarding PHP. Everything must be working already. Afterwards we will need to configure the language so that it accepts (or stop accepting) large uploads or use more memory.

Installing and configuring Drupal

Drupal is written in PHP. Installing Drupal is very simple. It consists basically in downloading a file and unzipping it in the appropriate folder.

Access the page Drupal.org. You can download the most recent version of Drupal there. Click in "Get Started with Drupal" and get follow the instructions you will find there.

drupal site screenshot
Numbering pattern

Drupal numbering pattern is worthy understanding. It always has a digit followed by a dot and than another number. The number before the dot is the number of the main release. Let's take 7.28 version, for instance. The 7 is the most important part because all Drupal modules and themes that are compatible with Drupal 7 will be compatible with all Drupal 7.XX.

Drupal 7.28 is the 28th update of Drupal 7. While looking for modules to install, you can check the compatibility by simply paying attention to the first number. Remember to always prefer the "recommended" version when downloading new modules. That is the version suggested by its authors.

You may download Drupal as you please, but I'll explain how to do it from the command line. Click with the right button on the link and choose "copy link". Now, on the command line, we will use the command wget followed by the content we have just copied. Note that in the terminal Ctrl+V is not the shortcut to paste. You should use SHIFT+Insert instead.

Remember that we have configured Apache to have as root the directory /var/www/sites/blog and the folder /var/www/sites/store, according to the domain? Let's create this folder structure than so that everything works. Afterwards we will download the file in our home folder and than move it to the appropriate folders.


wget http://ftp.drupal.org/files/projects/drupal-7.23.tar.gz;
tar -xzvf drupal-7.23.tar.gz;
rm drupal-7.23.tar.gz;
sudo cp drupal-7.23 /var/www/store;
sudo cp drupal-7.23 /var/www/blog;

Our next step is to configure Drupal to access the database. This is done creating a configuration file

Configuring Drupal

In the Drupal folder you will find a file called sites/default/default.settings.php. This file contains the configurations for your Drupal site. We need to configure it so that Drupal can access and use the database we created.

There are two ways of doing this. You can edit the file directly or you can let Drupal do it for you. Let's describe this second option.

If you give Drupal permission to edit this file, you will be able to make this configuration in the Drupal web interface. You need to give permission for anyone to write in the sites/default folder, so that Drupal can modify the necessary file.

The following command will do it for our Drupal instalations:


sudo chmod 777 /var/www/store/sites/default
sudo chmod 777 /var/www/blog/sites/default

After giving the permissions you may simply access the site using the browser and follow the instructions. http://localhost/blog.

This step is quite straightforward. Fill the forms with your database name and user, inform your language, your time, your site name, your email, the name of the admin user and a password.

Administer a Drupal website

Finally, we're working on the Drupal interface. Until now we were installing and configuring software needed for Drupal to work. Now we are actually building our own site.

Drupal is a content management system. It is out of the box a blog, but with some customization it can be used to create any website you could possibly imagine. Once you learn the basics you be able to create some rather complex websites within days. We will start creating a Blog because it is very easy to do so with Drupal.

Appearance

I am inclined to think that it is better if we leave the appearance to a later stage in the site development. The truth, however, is that appearance is the first thing we think about and for many people it is the single most important aspect of a website. In this first approach to this issue we will learn only this: Drupal can have any looks you want, there are many ready made themes for you to choose and you can install lots of them and change between them at will without affecting the contents of your site.

You have probably noticed a menu bar on the top of your website. That is Drupal administration toolbar. It presents Drupal's main administrative tasks categories, that is:

These names are self explanatory to a certain extent. We will approach each of these categories as we build our site.

Creating some content

For us to choose a nice theme it would be better if we had some blog posts to begin with. Let's create two or three posts. This time we will do it manually so that we can learn a little about how content is created inside Drupal.

Go to "content" > "create content" and click on "Article". You will receive a form asking for a Title, some tags and a text. The article text is divided in two sections, the teaser and the content. By default the teaser is the first few lines of the content. The teaser is shown on pages that present lists of contents, while the full text is presented on the article's page.

Applying a theme

Drupal comes out of the box with a small set of simple themes. We're using the default theme and you can see how it looks like. Check out the front page and the blog posts pages for you to have a nice idea of how this theme looks.

Now lets change it. Go to "Appearance". At the bottom of the page you will see a list of screenshots of other themes with a brief description. These are inactive themes. You can activate all of them. An activated theme will not display on the website yet. Only the default theme will. You can have more than one active theme because it is possible for you to have different themes for different users. This feature may be very useful on some situations.

Please, take a little time to apply and test some of these themes. You'll notice that some of them allow for customization of the colors, and all of them allow you to customize the logo and some features.

Choosing a theme

Drupal is a modular CMS. This means that much of the work we do with is consists in putting ready made pieces together. In practice we spend quite some time searching and studying modules and themes developed by other people, so we can choose those most appropriate to use in our website. Let's do this to choose a theme for our Blog.

Visit the Drupal website, click "Download and extend" and then click on "themes". You'll see a large list of themes. Search for some keyword such as "colorful" or "serious" in order to find a theme that may suit your needs. Don't hesitate testing lot's of themes. This is how we learn.

Drupal downloads are organized in two main categories: "recommended" and "development". We'll choose recommended, of course, unless we have a good reason not to. Also, we have to download the right version. All modules and themes follow a convention on the number of the release. The first number indicates the Drupal version it is compatible with. An x means "any". Thus 6.x means "compatible with Drupal 6.anything" and 7.32 means "compatible with Drupal 7.32". The number after the hyphen is the number of the module.

To install a theme we need to download the file and save it in the appropriate folder. The conventional folder is the /sites/all/themes/, that is starting from Drupal root. In our case /var/www/blog/sites/all/themes.

It is important to notice that the website is often installed on another computer. Remember that the files must be installed on the server and not on the computer you are using as a client.

You can download the tar.gz version or the .zip version. It makes no difference. You can also download and extract the file using any tools you like. If you download it by clicking on it, you will save the file on your client computer and will need to upload it to the server.

My preferred method is to use curl or wget to download the files right on the server. Curl is my favorite method because we can download and extract in a single operation. The example bellow will install the Zen theme in our blog.


cd /var/www/blog/sites/all; mkdir themes;
curl http://ftp.drupal.org/files/projects/zen-7.x-5.5.tar.gz|tar -xzv

curl downloads the contents and pass it to the tar command, that extracts it. We can do the same thing with wget, doing one step at a time:


cd /var/www/blog/sites/all; mkdir themes;
wget http://ftp.drupal.org/files/projects/zen-7.x-5.5.tar.gz
tar -xzvf zen-7.x-5.5.tar.gz
rm  zen-7.x-5.5.tar.gz

Now that the file is in place, if we reload the appearance administrative page in Drupal, we will see our new theme available for activating.

There is a website called Drupal Garden where you can check several Drupal themes. The website allows you to apply the themes to the website itself, so that you can have a nice idea of how each theme will look like once it is installed on your site. Try some themes out and choose one. You will certainly learn a lot while doing it for some time.

You will certainly not find the theme of your dreams. There are lot's of websites that sell quite good Drupal themes, but if you plan to create websites professionally you will certainly need to learn how to create your own theme and how to customize other themes. We will deal with this in another section, but it is important to keep in mind that any feature of a theme may be changed afterwards. Choose the theme that better suits your needs and then twist it to fit your needs perfectly.

comments powered by Disqus

Public Domain

All content is published under the Public Domain.

You may use it as you please for any purpose regardless of permissions or references.