Municipal Website with Drupal
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,047
On Slideshare
2,047
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. BUILDING A SIMPLE DRUPAL WEBSITE Total Pages: 10Revision 1: <date>Revision 2: 16 May 2012
  • 2. 1. Why did we use drupal?To answer this let me first start by saying that you shouldn’t use Drupal if you aren’t willing to put in sometime to learn it. Once you know how it works, you’ll understand why I regard Drupal as the better CMS forcreating websites.All CMS systems, like Wordpress or Joomla, have their pros and cons, but here is why I decided to use Drupaland regard it the better CMS:Over the past year and a half, I have implemented 4 different systems, namely Wordpress, Joomla, Sharepointand finally Drupal. 1. The first 3 systems were very easy to configure and use, while the Drupal took quite some time to get around and figure out. However, once I figured it out there was no way that I was going back to the first 3 systems. 2. Drupal was the only system that allowed me the features I wanted for our municipality and I will discuss this in the next section. 3. I found Drupal to be the more robust, yet flexible. 4. Being a novice Php/MySql programmer, I found a Drupal had a very clean core code. 5. Great site building tools. 6. Advanced Administration. 7. You can organize content easily and sensibly. It uses visible blocks. 8. There are some very good developers in the community forums and in general. 9. Fewer clowns (you can either code Drupal or you can’t, it’s harder to fake it), so if you find a feature or module for Drupal, chance are it is working without issues. 10. Can be made very server efficient in the right hands (scalability). 11. Drupal can be set up to be almost “ANYTHING”-in-one. You can have a helpdesk, document management system, blog, forum, etc. all in one system, yet operated separately.Everything with Drupal is not all ‘sunshine and roses’. Some of the things I found that I regard as adisadvantage: 1. You’re going to have put in a lot of time to learn the system. No coding necessary, but a lot of reading websites, blogs, forums, etc. 2. The interface if more commanding if you are a first time user or web designer. 3. Fewer developers and if you want to outsource, developers are more expensive, but on the flipside, we are using open-source for the reason to not outsource ☺ 4. Compared to a CMS like Wordpress, Drupal is slower, but as in point 10 above, I was able to address that with some tweaks.This is just my rendition of why Drupal is better for building municipal website, however you need to do yourhomework and put in the time. A lot of questions must be asked.
  • 3. 2. What were the main features I required for our website? 1. Our website is kept up to date by various “Editors”. So we have one person responsible for updating tenders, another for vacancies, and another for news, etc. I had to find a way for these Editors to update the website pages, but before it went public, we had to moderate it. Now with most of the other CMS systems, moderation was limited to posting comments, like in a blogging fashion. I needed an Editor to change an entire page on our website and his/her changes are then mailed to a Webmaster for moderation by the click of a button. 2. In terms of the aforementioned, an Editor only needs access to the specific page/s and be completely blocked for editing any other pages. This was obviously the most important requirement and the only CMS I found to give me the feature EXACTLY how I wanted it, was Drupal. The other CMS systems had similar features, but not exactly as per my requirement.3. Let’s dig in and try it. The first mistake I made was to not keep track of what I did, so I will try my best to retrace my steps. ** I also assume that you are an IT professional and know certain things basic things ** We are going to do a test website, so don’t install this to a server. It’s light enough to use on a normal PC or laptop, or even a virtual pc. 1. Download and setup the latest XAMPP server from http://www.apachefriends.org/en/xampp.html I use the Windows version. Please use there instructions to configure the webserver/apache and the MySQL. If you do this correct, you should be able to type http://localhost in your browser and get the XAMPP configuration page. On the left of the page click Security and set your usernames and passwords. The XAMMP page looks like this:
  • 4. 2. Login to MySQL via the XAMPP Control Panel. This is normally sitting in your system tray. If you did the setup correct, you can also log in via http://localhost/phpmyadmin. You can also log in to MySQL by clicking the ADMIN button!3. Create a database. It is advisable to pick a sensible name, especially if you are going to transfer the site to a live environment like a domain later on. Any database name should work, like COMPANY_DRUPAL, were ‘company’ is the name of your municipality. You don’t have to add the _DRUPAL.4. Download the latest RECOMMENDED version of Drupal from http://drupal.org/project/drupal. I suggest and base this document on Drupal 7, as the latest version 8 has not fully been adapted in terms of modules. So you might require modules, but they have not been developed or adapted to work with version 8 yet.
  • 5. 5. Locate your XAMPP installation. I normally install XAMPP directly on the root drive, example C:XAMPP. In this folder, find the HTDOCS folder and inside create a folder called backup. Copy the rest/loose files in HTDOCS to the backup folder you created. So you should be left with only the BACKUP folder in your HTDOCS folder. 6. Extract the Drupal zip file and copy all the files to the HTDOCS folder. Don’t create a folder. Put the DRUPAL files directly in HTDOCS It should look similar to 7. Once this is done, open your favourite web-browser (I prefer FireFox). Now if you did everything right with the XAMPP setup/configure, you can browse to http://localhost and the DRUPAL setup will begin. Go through the steps, and remember the database you created as well as username and password.If you run into issues at this stage it will 90% of the time be related to your webserverinstallation/configuration and not the Drupal setup Why? ‘Cause you haven’t setup Drupal yet ☺.XAMPP WEBSERVER HELP: http://www.apachefriends.org/f/viewforum.php?f=34 8. If the setup of Drupal is complete you will get a message to go to your frontpage/website, as well as you Administration page. Go have a look around to get acquainted with the system.In my following post, we will look at the various Drupal functions from an administration perspective!
  • 6. 4. LET’S LOOK BRIEFLY AT DRUPALThis is where you are going to have to put in some time. For starters, there is no way that I am going to repeatdocuments that have already been written. So before you even start playing around with Drupal, begin byreading the following:Understanding Drupal: Learn about Drupal concepts, technology stack, terminology, and resources.http://drupal.org/documentation/understandInstallation Guide: The initial install was previously covered, but here is more detail, especially if you ran intotrouble and also here is more info about modules and themes.http://drupal.org/documentation/installAdministration Guide: Manage users and content, perform backups and upgrades, secure your site, tweakperformance, etc. Audience: System and site administratorshttp://drupal.org/documentation/administerStructure Guide: Work with content types, blocks, menus, views, panels, taxonomy, user profiles, andnavigation. Audience: information architectshttp://drupal.org/documentation/structureSite Building Guide: Add functionality and features such as e-commerce, forums, media, search, geographicdata, dates, workflow, messaging, forms, social networking, etc. Audience: site builders, developers andbusiness architectshttp://drupal.org/documentation/buildPlease note throughout this entire process I configure Drupal in the same way I have set it up in ourenvironment and giving the requirements of our municipality. This might be different for your municipality.After you have read and studied the documents… Wait, let me repeat…After you have read and studied thedocuments and links I previously mentioned, continue to the next chapter.One last thing…. Read and study the documents and links!
  • 7. So, you have read and studied the documents and links and Drupal have been successfully installed, preferablyon your test system/local machine. Let look at the Drupal Administration side, because this is whereeverything will be happening.If all is installed correctly, you should be able to login to the admin side via http://localhost/?q=userTwo things to note: 1. As you can see I use Mozilla FireFox, just because I regard it as a better web browser if compared to Internet Explorer. 2. You’ll see the address shows “MyBB”. This only means I installed DRUPAL in a folder in the HTDOCS directory of my XAMPP installation, ex. C:XAMPPHTDOCSMYBB.If you have the correct Admin address, a page similar to the following should appear:Login with the username and password you specified when you did the Drupal setup. Later we will show youhow to add CAPTCHA security to the login page to avoid spammers.
  • 8. Once logged in, the following ADMINISTRATION PAGE should be displayed…The menu at the TOP will be the main focus for the Administrator and will be hidden from the users. In ourenvironment, we have created a group, called EDITORS, because the IT division is not responsible for updatingthe website. As an example, we have a user in the finance department who is responsible for updating tendersand have given the user EDITING permission to ONLY that section. We’ll cover this later on.So, you have read and studied the documents and links, REMEMBER!, so I am not going to go through eachmenu. I will demonstrate the usage of the menus through implementation of various things. This will give youan idea of how things work in DRUPAL.Let’s start with the FUN stuff!!If you are like me, your heart will be aching by now to load your website interface – the look and feel of yoursite. This is also referred to as the website ‘theme’. For me to go into the CUSTOM design of a website theme,will entail writing a book and publishing it. Drupal is built on PHP/MySQL and to design customized websitethemes, you need knowledge of PHP programming. For the purpose of having fun, play around with THEMETEMPLATES that is freely downloadable. When using templates, you can normally change most of thetemplate to suit your liking, things like colours, pictures, fonts, where things are located on the site, etc...
  • 9. Visit http://drupal.org/project/themes and download a few themes that you like or think you can alter to workas your website. Let me give an example:I’m using the Marinelli theme to build a website for our municipality, but have slightly changed a few things.Visit our test site at http://41.78.7.26 to see some of the changes I made and compare it to the screenshotbelow:Some changes you’ll notice: • The Drupal logo was changed to our marketing logo – the bird • The banner pictures were changed and the picture information removed, thus only the pictures display • The search button was moved towards the right-hand side • The menu below the picture/banner was removed • The login section was removed, because we only allow certain people to log in and edit the site • Then a change that might not be so noticeable is the “body section” was changed to a three column layout.All of the above changes were made without any need for programming. It is all done via theADMINISTRATION PAGE of Drupal.If I wanted to change things like the colour from blue to green, this can be easily done by editing a CSS file inthe theme, while some themes allow editing of the colour from the Administration Page. Some themes evenallow the viewers of the website to choose the own colours.
  • 10. So the main thing when deciding on a theme is to keep an open mind and focus on the structure or layout thatyou like. Most other things can be changed very easily.So you have downloaded the theme that tickles your fancy. Now what?First unzip the file. This will normally create a folder and within that folder will be another folder, which is thetheme. This depends on how you unzip/extract the files. It might look something like:C:DownloadsthemeXYZ-7.x-2.5themeXYZIn this example the last folder “themeXYZ” is what you need to copy. There are two places to copy yourthemes to. The first place is in the root of your drupal installation, there is a folder called THEMES. You cancopy your new themes folder here, BUT if you upgrade in the future, you might lose your theme. I still regardthis as the best place to copy your theme, seeming that you will always make a backup before you upgrade ☺The second place is normally located at C:my_drivexampphtdocsdrupalsitesallthemes.On a default/new Drupal installation, the aforementioned folder will only contain a README.TXT file. You cancopy your new theme folder to this location.Once you have copied the theme folder, log back into your administration page and click on the APPEARANCElink at the top. On the page you will see a screenshot of your theme, normally to the bottom under theDISABLED THEMES section. Now click on the ENABLE AND SET DEFAULT link below your theme.That’s it… your theme is loaded! Test it by logging out of the Administration Page.Now log back in to Administration and click the APPEARANCE link again….Your theme should now be at the top and there should be a “SETTINGS” link next to the screenshot. Click thesettings link. Now this section will change from theme to theme, but it will contain all the settings you canchange for your theme.Play around a little and don’t worry you can’t break it. If something goes wrong, just delete the theme folderand reload it. Voila!!