Drupal

From Hackerspace Brussels
Jump to: navigation, search

Contents

[edit] Intro

This is a demo course to learn Drupal.

[edit] What are we building?

We want to build a catalog website for movies.
This is a good basic exercise where we will touch most Drupal concepts and we can slowly increase the difficulty level.

[edit] Website requirements

[edit] Basic skills

  • Moderators can add movies
  • A movie has basic information, a description, genres, screenshots, poster image, trailer, actors, directors, etc
  • Visitors can browse movies by genre, actor, director, release year, etc
  • The frontpage shows latest added movies

[edit] Advanced skills

  • Members can add their own movie review, with a star rating
  • The whole website will be responsive, AKA mobile friendly.
  • Have all configuration in code, so the website becomes a reinstall-able product, instead of a website.

[edit] L33T skills

  • Moderators can upload a trailer, which gets converted in the backend to different formats.
  • Play the movie with the HTML5 <video> tag, and a flash fallback for the poor souls on older browsers.

[edit] What do we need?

Nothing in fact, except for courage and some time. A working pc can also help. :)

Let's go!

[edit] Prepare your computer

[edit] Install a local webserver

[edit] Linux

Install the complete LAMP stack with tasksel. Tasksel will install everything you need to get started.

Install tasksel first.

$ sudo apt-get install tasksel

Install a webserver with tasksel. First open the tasksel interface.

$ sudo apt-get install lamp-server^ phpmyadmin

Once opened, you see a list of 'packages' tasksel can install for you. Enable LAMP server with spacebar and go on. You will get prompted to choose a mysql root password and repeat it. Remember what password you choose... :)

[edit] Mac OSX

We will use XAMPP for our webserver. It is easy to install and maintain.
Watch out, don't install Drupal with the XAMPP Bitnami drupal addon. We will install drupal by using Drush later on.

First, download the XAMPP installer from http://www.apachefriends.org/en/xampp-macosx.html
Install it by opening the installer and follow the instructions.

[edit] Windows

First of all, if you are running windows, I strongly advice to install Linux in a virtual machine and run it this way.
That said, if you like suffering and pain, I still will try to help you as much as I can, despite of me not using windows for many years and become a complete noob in these matters. :)


[edit] Create a new database

Go to localhost/phpmyadmin and log in with the credentials you provided during your install.

You will now create your mysql user for the site along with a database. To do that, go to "Users" (horizontal bar near the top of the page) > Add user (below of the table of the existing users).

  • Fill the username and password fields.
  • In "database for user", check "Create database with same name and grant all privileges"
  • in "global privileges", click "check all"
  • Confirm ("Go" button at the bottom of the page). You're done!

[edit] Install Drush

[edit] Linux

$ sudo apt-get install drush

[edit] Install Drupal

We install drupal through drush.

[edit] Linux

Go to your server's directory. We assume it to be "/var/www"

$ cd /var/www

Download Drupal

$ drush dl drupal

You should now have a "drupal-X.Y" directory in "/var/www".

[edit] Drupal Configuration

Go to http://localhost/drupal-X.Y and follows the steps presented there.

Steps:

  • standard install
  • language: if there is choice, pick your preferred, otherwise use the default (english)
  • requirements: solve items one by one. Check the "configuration troubleshooting" section for (some) help.
  • set up database: db name & user name are the same because we created them so (see the database creation section). Enter the corresponding password.
  • configure site: the name you enter there will be the actual name of your site

Security advice: disable write permissions of the server on drupal-X.Y/sites/default/ and drupal-X.Y/sites/default/settings.php now the installation is done.

Linux (& probably mac):
$ chmod g-w drupal-X.Y/sites/default/ drupal-X.Y/sites/default/settings.php


[edit] Configuration troubleshooting

[edit] PHP extensions

  • missing gd extension => install it.
Linux (debian-based):
$ sudo aptitude install php5-gd

[edit] File system

  • The directory sites/default/files does not exist => create it in "/var/www"
Linux (& probably mac):
$ mkdir -p /var/www/sites/default/files

If this does not suffice, you must tune the permissions

  • permission tuning (assuming your server is in the www-data group):
Linux (& probably mac):
# take ownership of the directory so you can perform edits + keep it in the www-data group
$ sudo chown -R YOUR_USER_NAME:www-data .
# locate all directories and set permissions so you & the server can browse directories & add files in them
$ sudo find /var/www -type d -exec chmod 'u=rwx,g=rwx,o=' '{}' \;
# locate all files and set permissions so you & the server can edit files
$ sudo find /var/www -type f -exec chmod 'u=rw,g=rw,o=' '{}' \;

More info on permissions here and here (linux/mac). Here for windows.

[edit] Settings file

  • The settings file does not exist. => Copy the drupal-X.Y/sites/default/default.settings.php file to drupal-X.Y/sites/default/settings.php
Linux (& probably mac):
( cd drupal-7.23/sites/default/ && cp --preserve default.settings.php settings.php )

[edit] Install drupal modules

Before we dive in, let's install some contrib modules we will use.
We will install following modules:

[edit] Download modules

We could download the latest version of all modules manually, extract the file, and put it in the right folder, but offcoarse this is way too much work.
Let's use drush for this. With one drush command, we can download all those modules at once, this is how:

$ drush dl admin_menu bean ctools date devel ds elements entity entityreference field_group google_analytics libraries logintoboggan menu_token rules token transliteration video_embed_field views views_slideshow wysiwyg

Drush will see for each module what is the latest version, download it, extract it, and put it in the right location, which is:

sites/all/modules

[edit] Install modules

Please note that we only downloaded the modules, and they are not installed or enabled yet.
We will install some with drush, and install some manually, so you can see both processes.
Also, we won't enable them all at once, but just the ones we need for now, and enable more later on...

[edit] With drush

$ drush en admin_menu ctools devel elements entity entityreference field_group libraries logintoboggan menu_token rules token transliteration video_embed_field wysiwyg 

Drush will ask you confirmation, type y and enter.

[edit] With the modules page

In your browser, go to http://yoursite/admin/modules

DISABLE following modules:

  • Color
  • Dashboard
  • Overlay
  • RDF
  • Shortcut
  • Toolbar

And ENABLE following modules:

  • Date
  • Date API
  • Date Popup
  • Display Suite
  • Display Suite Extras
  • Display Suite Forms
  • Display Suite Search
  • Display Suite UI
  • Rules UI
  • Google Analytics
  • Views
  • Views Slideshow
  • Views Slideshow: Cycle
  • Views UI

[edit] Create a 'Movie' content type

First of all, what is a content type?
See https://drupal.org/documentation/modules/field-ui for more information.

We create a 'Movie' content type, which we will populate with fields later on.

Go to
admin/structure/types
and click on
Add content type
.

Give the new content type the name 'Movie'. Have a look at all options you can set, but for now, we can leave them on their default values.
Press 'Save and add fields'. This will save the content type and redirect you to the field user interface.

By default, the new content type will have 2 fields, 'title' and 'body'.
Title is a required field by Drupal, the body field can be removed if you don't need it.

[edit] Add content type fields

To be useful, We need to add some extra fields to the movie content type.
What would be needed?

  • Movie description (text area field)
  • Movie poster (Image field)
  • Release year (List - text)

[edit] Add relations

Then we will add some relation fields, that are linking taxonomies to our content type.

  • Actors
  • Genres
  • Directors

For this, we first need to create the taxonomies.

Go to
admin/structure/taxonomy
and click on
Add vocabulary

Give out first taxonomy the name 'Actors', description you can leave empty for now. Click save.
Now that we have created our taxonomy, let's add the relation from our 'movie' content type.
Open the field user interface of our movie content type again.

[edit] External links