Local Dev Environments for Newbies Part 3: Installing Drupal and WordPress

Once you have built a local development environment using an AMP stack, the next logical question is, “now what?”  And the answer is, truly, whatever you want.  As an example, in this blog post we will walk through installing Drupal and WordPress on your local machine so that you can develop and test in a low-risk environment.  However, you can substitute other content management systems or development platforms and the goal is the same: we want to mimic our web server environment on our local machine.

The only prerequisite for these recipes is a working AMP stack (see our tutorials for Mac and Windows), and administrative rights to your computer.  The two sets of steps are very similar.  We need to download and unpack the files to our web root, create a database and point to it from a configuration file, and run an install script from the browser.

There are tutorials around the web on how to do both things, but I think there’s two likely gotchas for newbies:

  • There’s no “installer” that installs the platform to your system.  You unzip and copy the files to the correct place.  The “install” script is really a “setup” script, and is run after you can access the site through a browser.
  • Setting up and linking the database must be done correctly, or the site won’t work.

So, we’ll step through each process with some extra explanation.

Drupal

Drupal is an open source content management platform.  Many libraries use it for their website because it is free and it allows for granular user permissions.  So as the site administrator, I can provide access for staff to edit certain pages (ie, reference desk schedule) but not others (say, colleague’s user profiles).  In our digital library, my curatorial users can edit content, authorized student users can see content just for our students, and anonymous users can see public collections.  The platform has its downsides, but there is a large and active user community.  A problem’s solution is usually only a Google search (or a few) away.

The Drupal installation guide is a little more technical, so feel free to head there if you’re comfortable on the command line.

First, download the Drupal files from the Drupal core page.  The top set of downloads (green background) are stable versions of the platform.  The lower set are versions still in development.  For our purposes we want the green download, and because I am on my Mac, I will download the tar.gz file for the most recent version (at the time of this writing, 7.23).  If you are on a Windows machine, and have 7zip installed, you can also use the .tar.gz file.  If you do not have 7zip installed, use the .zip file.

dcore

Now, we need to create the database we’re going to use for Drupal.  In building the AMP stack, we also installed phpMyAdmin, and we’ll use it now.  Open a browser and navigate to the phpMyAdmin installation (if you followed the earlier tutorials, this will be http://localhost/~yourusername/phpmyadmin on Mac and http://localhost/phpmyadmin on Windows).  Log in with the root user you created when you installed MySQL.

The Drupal installation instructions suggest creating a user first, and through that process, creating the database we will use.  So, start by clicking on Users.

dusers

Look for the Add user button.

dadduser

Next, we want to create a username – which will serve as the user login as well as the name of the database.  Create a password and select “Local” from the Host dropdown.  This will only allow traffic from the local machine.  Under the “Database for user”, we want to select “Create database with same name and grant all privileges.”

ddb

Next, let’s copy the Drupal files and configure the settings.  Locate the file you downloaded in the first step above and move it to your web root folder.  This is the folder you previously used to test Apache and install phpMyAdmin so you could access files through your browser.  For example, on my Mac this is in mfrazer/sites.

dstructure

You may want to change the folder name from drupal-7.23 to something a little more user friendly, e.g. drupal without the version number.  Generally, it’s bad practice to have periods in file or folder names.  However, for the purposes of this tutorial, I’m going to leave the example unchanged.

Now, we want to create our settings file.  Inside your Drupal folder, look for the sites folder. We want to navigate to sites/default and create a copy of the file called default.settings.php.  Rename the copy to settings.php and open in your code editor.

dsettings

Each section of this file contains extensive directions on how to set the settings.  At the end of the Database Settings section, (line 213 as of this writing), we want to replace this

$databases = array();

with this

$databases['default']['default'] = array(
 'driver' => 'mysql',
 'database' => 'sampledrupal',
 'username' => 'sampledrupal',
 'password' => 'samplepassword',
 'host' => 'localhost',
 'prefix' => '',
 );

Remember, if you followed the steps above, ‘database’ and ‘username’ should have the same value.  Save the file.

Go back to your unpacked folder and create a directory called “files” in the same directory as our settings.php file.

dfiles

 

Now we can navigate to the setup script in our browser.  The URL is comprised of the web root, the name of the folder you extracted the drupal files into and then install.php.  So, in my case this is:

localhost/~mfrazer/drupal-7.23/install.php

If I was on a Windows machine, and had changed the name of the folder to be mydrupal, then the path would be

localhost\mydrupal\install.php

Either way, you should get something that looks like this:

dinstall

For your first installation, I would choose Standard, so you can see what the Standard install looks like.  I use Minimal for many of my sites, but if it’s your first pass into Drupal it is good to see what’s there.

Next, pick a language and click Save and Continue.  Now, the script is going to attempt to verify your requirements.  You may run into an error that looks like this:

derror

We need to make our files directory writable by our web server users.  We can do this a bunch of different ways.  It’s important to think about what you’re doing, because it involves file permissions, especially if you are allowing users in from outside your system.

On my Mac, I choose to make _www (which is the hidden web server user) the owner of the folder.  To do this, I open Terminal and type in

cd ~/sites/drupal-7.23/sites/default
sudo chown _www files

Remember, sudo will elevate us to administrator.  Type in your password when prompted. The next command is chown, followed by the new owner the folder in question.  So this command will change the owner to _www for the folder “files”.

In Windows, I did not see this error.  However, if needed, I would handle the permissions through the user interface, by navigating to the files folder, right-clicking and selecting Properties.  Click on the Security tab, then click on Edit.  In this case, we are just going to grant permissions to the users of this machine, which will include the web server user.

dwperma

Click on Users, then scroll down to click the check box under “Allow” and next to “Write.”  Click on Apply and then Ok.  Click OK again to close the Properties window.

dwperm

On my Windows machine, I got a PHP error instead of the file permissions error.

phperror

This is an easy fix, we just need to enable the gd2 and mbstring extensions in our php.ini file and restart Apache to pick up the changes.

To do this, open your php.ini file (if you followed our tutorials, this will be in your c:\opt\local directory).  Beginning on Line 868, in the Windows Extensions section, uncomment (remove the semi-colon) from the following lines (they are not right next to each other, they’re in a longer list, but we want these three uncommented):

extension=php_gd2.dll
extension=php_mbstring.dll

Save php.ini file.  Restart Apache by going to Services, click on Apache 2.4 and click Restart.

Once you think you’ve fixed the issues, go back to your browser and click on Refresh.  The Verify Requirements should pass and you should see a progress bar as Drupal installs.

Next you are taken to the Configure Site page, where you fill in the site name, your email address and create the first user.  This is important, as there are a couple of functions restricted only to this user, so remember the user name and password that you choose.  I usually leave the Server Settings alone and uncheck the Notification options.

dconfigsite

Click Save and Continue.  You should be congratulated and provided a link to your new site.

dfinal

WordPress

WordPress is a very common blogging platform; we use it at ACRL TechConnect.  It can also be modified to be used as a content management platform or an image gallery.

Full disclosure: Until writing this post, I have never done a local install of WordPress.  Fortunately, I can report that it’s very straightforward.  So, let’s get started.

The MAMP instructions for WordPress advise creating the database first, and using the root credentials.  I am not wild about this solution, because I prefer to have separate users for my databases and I do not want my root credentials sitting in a file somewhere.  So we will set up the database the same way we did above:  create a user and a database at the same time.

Open a browser and navigate to the phpMyAdmin installation (if you followed the earlier tutorials, this will be http://localhost/~yourusername/phpmyadmin on Mac and http://localhost/phpmyadmin on Windows).  Log in with the root user you created when you installed MySQL and click on Users.

dusers

Look for the Add user button.

dadduser

Next, we want to create a username – which will serve as the user login as well as the name of the database.  Create a password and select “Local” from the Host dropdown.  This will only allow traffic from the local machine.  Under the “Database for user”, we want to select “Create database with same name and grant all privileges.”

wpdb

Now, let’s download our files.  Go to http://wordpress.org/download and click 0n Download WordPress.  Move the .zip file to your web root folder and unzip it.  This is the folder you previously used to test Apache and install phpMyAdmin so you could access files through your browser.  For example, on my Mac this is in mfrazer/sites.  If you followed our tutorial for Windows, it would be c:\sites

wpunpack

Next, we need create a config file.  WordPress comes with a wp-config-sample.php file.  Make a copy of it and rename it to wp-config.php and open it with your code editor.

wpconfig

Enter in the database name, user name and password we just created.  Remember, if you followed the steps above, the database name and user name should be the same.  Verify that the host is set to local and save the file.

Navigate in your browser to the WordPress folder.  The URL is comprised of the web root and the name of the folder where you extracted the WordPress files.  So, in my case this is:

localhost/~mfrazer/wordpress

If I was on a Windows machine, and had changed the name of the folder to be wordpress-dev, then the path would be

localhost\wordpress-dev

Either way, you should get something that looks like this:

wpform

Fill in the form and click on Install WordPress.  It might take a few minutes, but you should get a success message and a Log In button.  Log in to your site using the credentials you just created in the form.

You’re ready to start coding and testing.  The next step is to think about what you want to do.  You might take a look at the theming resources provided by both WordPress and Drupal.  You might want to go all out and write a module.  No matter what, though, you now have an environment that will help you abide by the cardinal rule of development: Thou shalt not mess around in production.

Let us know how it’s going in the comments!