Website Redesign Project Revised Site Development Manual

Revised: May 3, 2015

CS4624 Multimedia/Hypertext/Information Access

Professor E.A. Fox

Virginia Tech, Blacksburg 2015

Group Members: Junko Yoshida

Supratim Baruah

Scott Hoang

This document is a continuation of previous capstone projects for use by Giles Animal Rescue.

Table of ContentsThe titles with *New are the new contents added in 2015.

Site Development

Install Drupal

Determine Version of Drupal Running

Maintenance Mode

Update Drupal

Modules

Install

Enable

Configure

Views

Content Types

Manage Fields

Manage Display

Blocks

Menus

How to Duplicate the Website *New

Change the Order of Menu Links *New

Change the Order of Fields in Animals *New

Usage of Advanced Modules *New

Grid View *New

How to Update Drupal Module *New

Updating Drupal Core *New

Site Development

The site uses the Drupal framework to manage all the content. This section includes instructions for basic Drupal management including installing Drupal, determining the version of Drupal, maintenance mode, updating Drupal, modules, views, content types, blocks, and menus.

Install Drupal

Log into the Bluehost cPanel under “Hosting” then scroll down to the section “Mojo Marketplace.” To install Drupal, click on “One-Click Installs,” as shown in Figure 1. This will take you to the Mojo Marketplace, a product that makes creating online presence easier.

Figure 1 - Click on One-Click Installs

Scroll down and click on Drupal 7, as shown in Figure 2.

Figure 2 - Click on Drupal 7

Finally, click on “Install,” as shown in Figure 3.

Figure 3 - Click on Install

Determine Version of Drupal Running

To determine which version of Drupal the site is using, click on “Reports,” then click on “Status report,” as shown in Figure 4. The Drupal version is shown in the first row.

Figure 4 - Click on Reports

Maintenance Mode

Whenever updating or modifying content of a website, it is always good practice to put the site into maintenance mode. This restricts non-admin users to not being able to access the site while the site is in the process of being updated. To put the website in maintenance mode, go to the configuration menu by clicking on “Configuration,” as shown in Figure 5.

Figure 5 - Click on Configuration

Under Development, click on “Maintenance mode,” as shown in Figure 6.

Figure 6 - Click on Maintenance Mode

Click the checkbox “Put the site in maintenance mode,” edit the display message, then click “Safe configuration,” as shown in Figure 7.

Figure 7 - Click on Save configuration

Once the updates or changes are complete, take the site off maintenance mode by repeating the process of turning on maintenance mode but turn it off instead.

Update Drupal

* Before updating, back up the site, as described in the Site Operations Manual.

BlueHost provides an upgrade script that can be located on the Drupal install itself. However, Bluehost does not immediately get the most recent version of Drupal.

There is a manual way of installing the most recent version of Drupal to the site.

1. Download the new installation of Drupal from https://drupal.org/download. 2. Unzip the file on your local machine.3. Delete the sites folder out of this unzipped Drupal core update files. Otherwise, the

standard sites folder will overwrite the sites folder that contains all your information. 4. Recompress the folder5. Upload the file to public_html directory on BlueHosts file manager. 6. Extract the files (which replaces all the current ones).

7. Check to see if the report status on the Drupal site reflects the new version as described in Determine Version of Drupal Running. If not, run the update.php script by navigating to http://www.gilesanimalrescue.org/update.php and following the steps.

Modules

Drupal modules extend the functionality of the Drupal core, such as formatting images, newsletters, text formatting, etc. To install, enable, configure, and use modules, first click on Modules, as shown in Figure 8.

Figure 8 - Click on modules

Install

To install a module, obtain the link to the zip or tar file from the web, or download the zip or tar file to your machine. Then, click on “Install new module.” Copy in the URL or upload the file from your computer then press “Install.” To return to the Modules page, click on “Enable newly added modules.”

Enable

To use a module, it must be enabled. In the modules listing, find the module that you just installed. Check the check box then scroll to the bottom and click “Save configuration.“

Configure

Some modules allow setting to be configured to tailor their functionality. To configure a module, find the module in the Modules list. Then click on “Configure,” as shown in Figure 9. The configure options will vary by module.

Figure 9 - Configure modules

Views

Views are one of Drupal’s powerful frameworks that allow users to group content by filtering rules. To create a new view, first go click on “Views” in the shortcuts menu shown in Figure 10.

Figure 10 - Click Views on short-cut menu

Next, click on “Add New View,” shown in Figure 11.

Figure 11 - Add new view

Once in the new view page, the user can specify the name of the view and then choose how to display the content, as shown in Figure 12.

Figure 12 - Initial set up

Once the initial set up has been completed, the following screen, shown in Figure 13, allows for full customization of the page. Information that was previously entered on the last screen can also be modified on this screen. In the screen, there are a few main areas that allow for the overall customization of the flow and content of the page. “Filter Criteria” allows the filtering of content being displayed on the view. As shown in Figure 13, this page is being setup to display a grid of adoptable animals where the content type must be “Animal” and status is “adoptable”.

Another main section, page setup, allows the creation of menu tabs, paths, and access permissions to the page. The last most important section is the formatting section. In this section, Drupal allows for five specific styles in listing information. The most common used throughout the site is a grid, which allows for a nice ordering of information with a grid displayed around each piece of information.

Figure 13 - Final Set Up

Once setting up all the information for a specific page, Drupal provides a preview of the view at the bottom of the page, as shown in Figure 14. Once the view is completed, click Save, otherwise all the hard work will be lost.

Figure 14 – Preview view

Content Types

Different pages of content can require different structures, for example, having pictures, dropdowns, etc. To create content types, log in and click on Structure, as shown in Figure 15.

Figure 15 - Click on Structure

Next, click on Content types. From here, you can create new content types, edit fields, and manage displays.

Manage Fields

Fields are a part of content types that allow pages to be tailored to their purpose. For example, different content types will have pictures or multiple blocks to add content. To demonstrate, look at “Animal” content type. Click on “manage fields,” as shown in Figure 16.

Figure 16 - Manage fields of content type

All the animal stories in the Animals tab use the content type Animals. Each animal story has all of the fields when the story is created. Note: Not all fields need to be displayed when the story is published. See Manage Display. To add new fields, enter the name of the field under “Add new field,” as shown in Figure 17.

Figure 17 - Add new field

Select the field type, for example, a text box, dropdown select, image, etc. Once you select field type and widget, click Save. This will take to you a new menu to set properties of the field type and widget, depending on what it is. The configuration of the field can always be edited by clicking “edit” for the field. The order of the fields, which can be changed by drag and drop, is the order of the fields when creating content.

Manage Display

Manage display determines what is shown when a story is published. In Structure > Content Types, click on “manage display” in Animal, as shown in Figure 18.

Figure 18 - Click on manage display

Here, all the fields that appeared in the manage fields tab are listed. First, select the layout for the content type (functionality provided by the views module) below the fields. Animals is a two column stacked. The fields are arranged in the two-column format and fields can be dragged and dropped to each section. They order on this page determines the order displayed when published. The label can be displayed inline or above, or hidden as well.

Blocks

The blocks that come with the theme configure the layout of the site. Different themes will have different block configuration. To view the blocks functionality, click on Structure then Blocks, as shown in Figure 19.

Figure 19 - Click on Blocks

View the block layout by clicking “Demonstrate block regions (CorporateClean)” (CorporateClean is the theme). Blocks can be added and configured so they only display on certain pages.

Menus

Menus are configured in Structures and appear on the site using Block configuration. To view menus, click on Structure then Menus, as shown in Figure 20.

Figure 20 - Click on Menus

This site uses the Main Menu that goes along the top of the screen beneath the logo. To view all the links, click on “list links” as shown in Figure 21.

Figure 21 - Click on list links

The order the links appear and whether they are nested can be changed by drag and drop. Be sure to click “Save Configuration” at the bottom to save your changes!

To add a link, click on “Add link”, either from the menu page or directly in the list links page. Fill in all the fields and click “Save.”

To make a tab and appear only for certain users, change the settings in the corresponding view.

There are three more menus – Administration, Animal Links, and Site Links – that appear at the bottom of the screen. The blocks functionality configures where those menus are on the screen.

How to Duplicate the Website *New

Our client owns two domains. The main domain is gilesanimalrescue.org, which is set as the primary and

has all the resources. The another domain is gilescountyanimalrescue.org, which is set as the secondary

and set to redirect to the primary domain. This section explains how to copy all the resources from the

primary to secondary, and configure the secondary domain to operate on it’s own. After this process, all

the changes made to the secondary domain will not affect the primary domain.

Step 1. Install Drupal into the Secondary Domain

How to install Drupal on Bluehost is already explained in the report from last year (Page 4). However,

choose the secondary domain gilescountyanimalrescue.org as the destination of the Drupal installation.

Figure 22: How to choose a destination domain to install Drupal

2. Create Database

The new database needs to be created in order for the secondary domain to have its own resources. The

primary domain uses two database named “gilesani_dru1” and “gilesani_dru2”, and both need to be

duplicated for the secondary domain. Developers can use any names. However, “gilesani_dru1dup” and

“gilesani_dru2dup” are highly recommended, because we left sql files in the temporary folder in

Bluehost (Explained in Step 3), which can be used to import data from the primary domain. If other

database names are used, developers need to modify the configuration files to match with their

database names. A database user also needs to be assigned to each new database. The below table 1

shows the recommended database name and username for secondary domain.

Database Name (Primary Domain) Database Name (Secondary Domain) Username

gilesani_dru1 gilesani_dru1dup gilesani_dup1

gilesani_dru2 gilesani_dru2dup gilesani_dup2

Table 1: Recommended database name and username

To create new database, click on the “MySQL Database” on cPanel as shown in Figure23.

Figure 23: Location of MySQL Database on cPanel

On MySQL Database page, enter a name of new Database. The location is shown in figure 24.

Figure 24: Location to enter a new database name

Click “Create Database” to create a new database. After creating two new databases, add a user to each

database. Two users are already created for the secondary domain, “gilesani_dup1” and

“gilesani_dup2”. Choose a username and database name, and press “Add”, as shown in figure 25.

Figure 25: Choose user and database to add a user

Step 3. Import Database

This step is to import database from the primary domain to the new database just created.

From the cPanel, click “phpMyAdmin”. The location is shown in Figure 26.

Figure 26: Location of phpMyAdmin

On the phpMyAdmin screen, click on the new database located on the left pane, and press Import. The

location is shown in figure 27. Work on one database at a time.

Figure 27: Location of the new database and Import button

On the Import tab, select a .sql file, shown in figure 28. Two.sql files are already configured and located

under /home/gilesani/tmp/. gilesani_dru1dup.sql file is to import gilesani_dru1 database to

gilesani_dru1rup database. gilesani_dru2dup.sql file is to import gilesani_dru2 database to

gilesani_dru2rup database. How to access the files and edit them are explained in Appendix 2.

Figure 28: How to select a .sql file and import database

After selecting the proper .sql file, click Go button on the bottom of the page.

Step 4. Copy all Drupal Files

Navigate to the File Manager on Bluehost. The includes, misc, modules, profiles, scripts, sites, themes

directories under /public_html need to be copied to /public_html/gilescountyanimalrescue/ directory.

Figure 29 shows directories that need to be copied from.

Figure 29: Directories that need to be copied to /public_home/gilescountyanimalrescue directory

To copy directories, click a directory you want to copy from on the left pane, and click Copy button. The Figure 30 shows choosing include directory and clicking the Copy button.

Figure 30: Choose include directory and click Copy button

After choosing a directory to copy from, enter the destination directory as shown in Figure 31.

Figure 31: Enter the destination to copy directories to

Repeat the same process to other directories, such as misc, modules, profiles, and etc.

Step 5 Update the settings.php file

Navigate to the path to the public_html/gilescountyanimalrescue/sites/default/setting.php using the File Manager on Bluehost. Select the setting.php file and click code editor, as shown in figure 32.

Figure 32: Select setting.php file and click Code Editor

Update the database name, username and the password * to match with the new database. Those fields have different entries for the primary domain. Change them as shown in figure 33.

Figure 33: Location to change the database name, username, and password

Save the file. Now the gilescountyanimalrescue.org domain is running.

Change the Order of Menu Links *New“Menu Links” is the terminology in Drupal that represents the site navigation bar under the site title. The area marked in red in Figure 34 is the Menu Links.

Figure 34 – The area marked in red is “Menu Links”

This section explains how to change the order of the Main Links. First, go to “Structure” page on the administration bar. Figure 35 below shows where the “Structure” link is located.

Figure 35 – The area marked in read is “Menu Links”

On the Structure page, choose “Menus”. Figure 36 shows where “Menu” is located.

Figure 36 – Click on “Menu” from options

On Menu page, click on “list links”. Figure 37 shows where “List Links” is located.

Figure 37 – Click on “Link Links” from options

The “List Links” page shows the structure of Main Links. The order of Main Links can be modified by dragging the cross arrows located at the left side of each Menu Link, shown in Figure 38. By moving arrows to the right, Menu Links will be sub-menu.

Figure 38 – Cross arrows to change the order of Menu Links

After changing the order, click Save button located on the bottom of the page.

Change the Order of Fields in Animals *New“Fields in Animals” means the list of Name, Status, Age, Sex, Breed shown in each animal, as shown in Figure 39.

Figure 39 – Content Types is located on the top corner

The way to change the order of fields in Animals is similar to that of Menu Links. The fields in Animals means Name, Status, Age, Sex, Breeds, etc, that are shown on each animal. First, click on “Content Types” link. The figure 40 shows where the link is located.

Figure 40 – Content Types is located on the top corner

On Content Types page, choose “Manage Display” of Animal. Figure 41 shows where the link is located.

Figure 41 – Manage Display link is located on the Animal row

The order of Fields in Animals can be changed by drag/drop the cross arrows shown in Figure 42.

Figure 42 – The order of Fields in Animals can be changed by drag/drop on the cross arrows marked in red

After changed, click “Save” located on the bottom of the page.

Usage of Advanced Modules *New

Task Name Module Name

Result

Divide lost and found animals

QuickTab

Add button to “Adopt!” to only adoptable animals.Display available date, neutered, and good with kids to only adoptable animals

Field Conditional Module

Remove lost animals

Rules Lost animals are removed from Lost page automatically after expiration date is passed. Refer to figure 43 for how the logic works.

automatically when expiration date is passed.

Paypal Donation Form

Webform As soon as a donor press the “Go to Paypal” button, the site is redirected to Paypal donation page, and also the form result is sent to the site operator.Refer to figure 44.

Figure 43: Logic of publish/archive lost animals

Figure 44: Flow of the Paypal Donation Form

Grid View *New

Figure 45. Expandable views across relevant pages.

Content display type on the Views module has been changed to Teaser. The Views display setting has

been changed to a grid, with 3 columns. Field Multiple Limit Module was installed to only display one

image in the teaser view, and Image Effect Kit module was installed to scale and format the image for

the grid view.

Figure 46. Css code added for the grid of 3 and 4 columns.

Also Css is added to the style.css file in ‘public_html/sites/all/themes/corporateclean/style.css’ on the

bluehost server to format the grid to correct size and display the node correctly.

How to Update Drupal Module *New

Modules can be updated with one click by going to the module option at the top and then clicking on

update as shown in the figure 47.

Figure 47. Modules Update Page.

Updating Drupal Core *New

Log in to Bluehost then go to the Cpanel and get into the file systems. as shown in the figure 20

Figure 48. Files Manager in Cpanel.

Remove all the files under public_html folder leaving only the sites folder. And unzip the latest core

drupal files inside the public_html. Then run the gilesanimalrescue.com/update.php to update to the

latest version of Drupal.