Installing Drupal Using the UTO Webhosting Service

Drupal Installation on UTO Webhosting Service

1. Log in to DirectAdmin
2. Click on Installatron (circled in red, below)

   

3. On the Installatron page, select Drupal from the right menu

   

4. Click on "New Install"

   

5. Set up the URL settings and path to match your website. Remember to select "null" instead of the default "www".

   

6. Select "Create a new DB" and Installatron will automatically create the proper MySQL database for you.

   

7. Review your site settings, and if everything is correct (see below), click on the Install button

   

8. Drupal is now being installed. Click on Configure on the next screen to configure the Drupal instance.

   

   This brings up a new browser window containing the Drupal initial configuration page..

9. Create the first account for Drupal by following the link on the Drupal configuration screen. The first account created on any Drupal instance is the admin account for that instance.
10. After Drupal is installed, return to the DirectAdmin window and click on the Finalize botton. This completes the Drupal installation.

Upgrading to Drupal v5

When upgrading the Web Community site from v4.7 to v5, these are the steps I took. These are notes I made from Lullabot's video Upgrading from Drupal 4.7.x to Drupal 5.x.

1. Login to Drupal as User ID #1 (the first user).
2. Place site into offline mode.
3. Disable custom and contributed modules.
4. Switch to a core theme (Blue Marine).
5. Upload Drupal v5.
• First, upload new Drupal files at root as yoursite.
• Rename old yoursite.com as yoursite-old.
• Rename new yoursite as yoursite.com.
6. Move over the old 'sites/settings.php' file and 'files' folder (and other files that might have edited). Chmod 'files' to 777.
7. Go to http://yoursite.com/update.php and run update script.
8. Install and enable upgraded versions of all contributed modules.
9. Upload and enable customized theme folders (not phptemplate/engine).
10. Go to http://yousite.com/update.php and re-run update script.
11. Transfer and test edits/hacks to modules and themes.
12. Test common tasks.
13. Create content.
14. Upload files.
15. Check for broken links.
16. If all looks good, move site to online mode.

How to Add a New Module in Drupal

ASU Modules

This section of the handbook documents ASU-developed and maintained modules.

Nice_menus: Create js-style flyout menus with Drupal

TinyMCE/IMCE: For uploading images to your site

Have you ever been editing a page in Drupal using the TinyMCE editor and wanted to put a picture in your page? Well, by default, Drupal only allows you to input a url of an image hosted somewhere (your site or another site). There is a module called IMCE which allows you to browse for an image on your computer to upload to the site, all within the TinyMCE interface!

How to install:

1. Go to http://drupal.org/project/imce and download the latest stable version (current as of writing this document is 5.x-1.0).
2. In DirectAdmin, log into your account and click on the File Manager.
3. Browse to your public_html and then into your modules directory. You can then upload the file which should look something like this: imce-5.x-1.0.tar.gz
4. Then, back in the modules directory, find the file, then click the extract link on that line. This will extract the module into your Drupal site's module directory.
5. Now, log into your Drupal site's admin section. In User Management -> Access Control, make sure that everybody can access (but not administer!) IMCE.
6. Next, enable the module in Site Building -> Modules.

Now when you create a new page, story, etc, you can input an image. Simply click on the TinyMCE icon that looks like a tree, then you'll notice a small icon to the right of the "Image URL" input field. Clicking this will bring you to a sort of file manager window which will allow you to upload images for use in your page!

TinyMCE: Install & Configure

TinyMCE is a WYSIWYG editor for Drupal 5. It gives you the ability to use a GUI to change all sorts of text formatting in a standard drupal text input box. To install it on your site, there is a two step process you must follow. First, you must download and install the module for drupal, which allows TinyMCE to be used on your site. Second, you must download the actual editor itself, and install it into your site.

Installation of the Drupal module:

1. Download the latest official release of the drupal module, tinymce.tar.gz (click here for the download page). It will be a file that looks similar to this: tinymce-5.x-1.9.tar.gz
2. Upload the file to the "modules" directory in your instance of Drupal.
3. Extract the file using the DirectAdmin File Manager.

Installation of TinyMCE editor:

1. Download the tinymce editor (click here for the download page). It will be a file that looks similar to this: tinymce_2_1_1_1.zip.
2. Upload the file into the modules/tinymce directory in your instance of Drupal.
3. Extract the file using the DirectAdmin File Manager.

Just to clarify, you'll have a folder in modules (modules/tinymce) which contains the drupal module. Inside that, you'll have a folder (modules/tinymce/tinymce) which contains the actual editor software.

Configuration:

1. Click on Administer -> Modules -> and scroll down to TinyMCE and enable it.
2. Click Administer-> Site Configuration -> TinyMCE.
3. Click permissions.
4. Make sure all users you want to have access have been checked under the TinyMCE module, then click save permissions.

Create a profile for TinyMCE

1. Now we have to create a profile for TinyMCE. Click Administer -> Site Config -> TinyMCE. Then click "create a new profile."
2. Put in "tiny" for the profile name, and set the default state to true.
3. Click the buttons link and choose whichever buttons you'd like to show up in the wysiwyg editor window (bold, italic, etc).
4. Click create profile.

Setup the tags so that tinymce works:

1. Click Administer -> Site Configuration -> Input Formats. Now, find the "filtered html" line and click the corresponding configure link. Up at the top of the screen, next to View, click Configure.
2. Scroll down to "Allowed HTML tags," and at the end of the list, enter two more tags, <u> & <p>.
3. Click save configuration.

You're ready to create a new story, page, etc with your new editor!

If you get stuck, there is a really great video online that will help walk you through this. You can see it here.

Views: Create Page View of Nodes by Term ID

If you want to display a list of nodes (or content) by term id (or category) and you want to call specific lists on specific pages, there are two ways to accomplish this. The easiest is to create a view and directly call the views on the page. For example, say we want a list of the most recents news items of the catgeory "Dept. A" to appear only on Dept. A's pages, those categorized as "Dept. B" to appear only on Dept. B's pages, etc. Here's a way to accomplish this using the Content Construction Kit (CCK), Views, and Insert Views modules.

1. In CCK, create a new content type called "news."
2. In Categories, create a new vocabulary called "News." Add terms, one for each department.
3. In Views, create a view called "dept_news."
1. In the Page section:
• Check "Provide Page"
• Create a URL alias, such as "views_dept_news"
• Set "View Type" to "List View"
• Title can be left blank or filled in.
• Nodes per Page: set to number of articles you want displayed



2. In the Fields section:
• Add field "Node: Title"
• Add field "Node: Body" and select "Teaser"



3. In the Arguments section:
• Add the argument: "Taxonomy: Term Name" and set Title to "$arg News"



4. In the Filters section:
• Add "Node: Type" is one of "News"
• Add "Node: Published" equals "Yes"



5. In the Sort Criteria section:
• Add "Node: Created Time" Descending and Normal



4. Go to the node (content or page) you want the views to appear on and add the view. The values you can set are:
   

   [view:name of view] is replaced by the content listing, and
   [view:name of view=x] limits the listing to a particular x number of entries.
   [view:name of view=x=arg1] limits the listing to x entries and passes arg1

   Example:
   [view:dept_news=3=Dept. A]
   Three nodes of the content type "dept_news" that also are tagged (or categorized) with the term "Dept. A" will be printed.

5. You can insert as many different views on the same page as you wish.
   Example:
   [view:dept_news=3=Dept. A]
   [view:dept_news=3=Dept. B]
   [view:dept_news=3=Dept. C]

Views: Place Drupal views precisely on your page

This article talks about displaying views you've created in Drupal anywhere you'd like on your site. Typically, when you create a Drupal view, you'll provide a page or block view so that the view can be accessed. However, sometimes you don't want to have a page with a table of data-you'd rather have something more styled or content embedded in a precise location of your snazzy front page. Don't worry, there are some back-end view functions to accomplish just that.

Say, for example, you have a glorious front page for your drupal site that you've created. You've managed to come up with a page-front.tpl.php and styled it to your liking. Now, when you add views to that page, they may show up anywhere. You can avoid that by placing them where you want them to be. This positioning can also be accomplished with css, but I found this block of code to be a simpler alternative.

One benefit to this method is that you don't need to edit the view's block (if you provide block view) to only display the block on the front page. You can just input the following code directly into your page-front.tpl.php.

<?php

$view = views_get_view('your_view_name_here');

$view->page_type = 'list';

echo views_build_view('embed', $view);

?>

Looks simple, eh? We're first calling the views_get_view function to retrive your view's contents into an array called $view. Then, we specify that the page_type (table, list, teaser) should be list. We did this to make the site as accessible as possible, as it will use ul's and li's. Then, we simply 'build' the view that you created in the first section ($view) and echo it all in one statement. Viola! You've now got a snippet of code that will allow you to display a Drupal view anywhere on any page! There is a lot more that can be done with the views arguments-here is a good place to start learning about the more advanced features.

Installing a Theme Using DirectAdmin

These instructions are for Drupal 4.7 and 5.1 using DirectAdmin, the administration panel of the ASU Webhosting Service.

1. Download the theme(s) above onto your desktop
2. Log in to DirectAdmin, and go to the file manager.
3. Navigate to the folder containing the Drupal instance.

   

4. Upload the theme into your drupal themes folder

   

5. Expand the uploaded file (this will create a subfolder containing the theme files)

   

6. Bring up a new browse window. Log into Drupal as the admin account and enable the theme.

   

ASU Drupal Theme

ASU Web developers are encouraged to use the new, official University template for all Web sites that do not require more specific branding, such as those that fall under a set of College-related guidelines (e.g., CLAS). The official ASU Drupal theme—ASUZen v. 5.x-2.0—was released on December 12, 2007. (A static HTML version of the official ASU theme is also available.)

The ASU Zen theme is based off of the Zen theme by Lullabot's Jeff Robbins. The ASU-specific modifications were made by Jeff Beeman and Kathy Marks using the standardized ASU look and feel provided on template.asu.edu and in the ASU themes directory.

The ASU Zen theme was designed to be as generic as possible in order to provide optimal flexibility for site maintainers, while also pulling from a core set of template files. The theme uses core template files provided in the ASU themes directory for the ASU header, footer and various related images and CSS. This means easier site maintenance for site administrators, as changes to the core header and footer files immediately propogate out to any sites using the theme. Pretty slick, huh?

The ASU Zen theme is a fluid-width, two- or three-column layout and is optimized for 1024px resolution. The theme is XHTML 1.0 Transitional / CSS 2 compliant and cross-browser compatible with Firefox 2.0 (Mac and Win), IE 6, IE 7, Opera 9 and Safari 3.

Download

You can download the latest release version of the ASU Drupal theme, as well as other ASU templates, at http://template.asu.edu. You can also check out the release version in the Subversion Code Repository or, if you're feeling adventurous, you can checkout the development version and follow along with our changes.

2.0 Release Subversion URL:

https://svn.asu.edu/svn/drupal/themes/asuzen/tags/5.x-2.0

Development Subversion URL:

https://svn.asu.edu/svn/drupal/themes/asuzen/branches/5.x-dev

Installation

Please see the included README.txt file for full notes and brief installation instructions.

If your site is hosted on the ASU Webhosting service, you can refer to the Handbook pages on Installing a Theme Using DirectAdmin. ASU Web Hosting customers also can contact ASU Web Consulting for assistance in deploying the University template using the virtual include system.

Rhino ASU Theme

The Rhino-created theme has been replaced by ASUZen 5.x-2.0.

NOTE: The ASU Web Community site is currently NOT using the University template. We are in the process of converting it, so stay tuned.

Customizing the ASU Theme

All ASU core pages are required to use the standard ASU header and footer. However, the content area can be customized to suit individual needs.

Create a Unique Template (page.tpl.php) for Your Front Page

1. In Content Types, create a new content-type called "frontpage."
2. Rename page.tpl.php as "page-default.tpl.php".
3. Create a new page.tpl.php and put this code in it:
   
   <?php

if ($node->type == 'frontpage') {
include 'page-frontpage.tpl.php';
return; }

include 'page-default.tpl.php';
return;

?>
4. Create a new template file for your front page called "page-frontpage.tpl.php." The easiest way is to copy the page-default.tpl.php, then edit it to make your changes.
5. Upload all three files to your asuzen theme.
6. In Create Content, create a new frontpage page.

That should do it!

Creating the <li> class=first and class=last on custom menus

When creating a menu, sometimes you want to have a class designation in the elements. A common use of this is to be able to create visual dividers between menu items, while making sure that the last item doesn't have a divider. As of Drupal 5, the engine will auto-generate some first and last class designations in your li items:

<li class="first">

<li>

<li>

<li class="last">

However, this only works for primary and secondary menu items. If you create a custom menu and you want this to happen, you'll need to put some code into your template.php file to get Drupal to create these class names. Just put this at the end of your theme's template.php file, and make sure to rename the function to the name of your theme (i.e. function themeName_menu_links):

//below code creates the ability to have last/first
//class designations on menu items, overriding the default.
/**
* Override theme_menu_links()
* - Add "first" and "last" class to first and last menu items
*/
function themeName_menu_links($links) {
if (!count($links)) {
return '';
}
$level_tmp = explode('-', key($links));
$level = $level_tmp[0];
$output = "<ul class=\"links-$level\">\n";

$num_links = count($links);
$i = 1;

foreach ($links as $index => $link) {
$classes = '';
if (stristr($index, 'active')) {
$classes .= "active ";
}
if ($i == 1) {
$classes .= "first ";
}
if ($i == $num_links) {
$classes .= "last ";
}
$output .= '<li class="' . $classes . '"';
$output .= ">". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
$i++;
}
$output .= '</ul>';

return $output;
}

Theme list items (li) by giving them a specific ID

In Drupal 5, right now the default themes do not come with the ability to add ID's to <li> elements. What's really cool about this tutorial is that the code actually grabs the menu "title" and applies that to the <li> element. For example, you may have a drupal menu you've setup on the left sidebar that shows the following html:

<ul class="menu">

<li>FAQ's</li>

<li>Resources</li>

</ul>

But you really want....

<ul class="menu">

<li ID="FAQs">FAQ's</li>

<li ID="Resources">Resources</li>

</ul>

You'll notice that there is no id for any of these <li> elements by default. This is usually fine, but it is nice to be able to individually target each <li> element. You may want to style them with different colors, or perhaps put icons next to each of the elements. This can be accomplished by these steps:

Firstly, in template.php, add this code at the bottom:

//below code creates id's for each li so you can apply icons to them...

function yourThemeName_menu_item($mid, $children = '', $leaf = TRUE) {

return _phptemplate_callback('menu_item', array(
'leaf' => $leaf,
'mid' => $mid,
'children' => $children)
);

}

Secondly, create a menu_item.tpl.php file with the following contents:

<?php

$link = menu_item_link($mid);

// replace spaces with "_", and strip HTML

$css_id = str_replace(' ', '_', strip_tags($link));

// render the menu link with unique CSS id.

$output = '<li id="'.$css_id.'" class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";

print $output;

?>

Once you've done these two things, you can go ahead and style the links however you choose!

#sidebar-left li#FAQs {
background: url(/themes/yourThemeName/images/icon_faqs.jpg) no-repeat top left;
}

#sidebar-left li#Resources {
background: url(/themes/yourThemeName/images/icon_resources.jpg) no-repeat top left;
}

Drupal Workshop #1

Topics

• Basic Drupal Installation using the UTO Directadmin web management interface.
• Initial configuration of Drupal
• Site administration basics
• Content Types/Content Creation
• Basic themeing and themes installation
• Core Modules

Drupal Workshop #2

Topics Covered

• Drupal Site Administration (core)
• Basic Site Configuration
• Users, Roles and Permissions
• Downloading, Installing and Configuring Modules
• Introduction to Content Types
• Administering Menus and Blocks
• Modules You Can't Live Without

Logging In

Before you can add or edit content, you need to log in. Log in by clicking on the "Sign On" link in the upper right of the page.

Sign on link

This will take you to the ASU WebAuth Single Sign-On login panel. Type in your ASUrite ID and password. You'll be taken back to the site.

ASU login

On most sites you will need permission to create content. Contact the site administrator to grant you access if they haven't already done so.

When the new page loads it will include a new "user menu" with your user name at the top and links such as "Create content" and "My account."

User menu

Content: Adding and Editing

All content on a Drupal website is stored and treated as "nodes." A node is any posting, such as a page, poll, story, forum text, or blog entry. Comments are not stored as nodes but are always tied to one.

You may see many types of content listed on your site. We'll cover creating a page, but most content types will be created in a similar fashion.

Menus: Changing Your Site Navigation

If you have permission to modify the menu on your site, you will see an "Administer" link in the user block under your name.

Menus appear in blocks on your site and help visitors and users find their way around. To administer (change) the menu, go to Administer > Site building > Menus.

To create a new menu, choose the "add menu" tab or link and submit a title for a new custom menu. Once submitted, the new menu will appear in a list toward the top of the administer menu page.

To create new links in a menu, choose the "add menu item" tab or link. Select the parent item to place the new link within an existing menu structure. For top-level menu items, choose the name of the menu in which the link is to be added.

Menu admin page

You can also edit or delete a menu item. To change the title, description, parent or weight of a menu item, click "edit" next to the menu item in the Operations column. To disable a menu item, click on "enable/disable" in the Operations column. Disabled menu items are not deleted but merely made no longer visible on your site.

Add Users and Grant Access

If you have permission, you can add users and grant them access.

On some sites, users will automatically be added to the user list when they login with the ASU WebAuth login. If this is the case, go to Administer > User management > Users. Find the user and click on the "edit" link under "Operations." Scroll down to "Roles" and change the user's permission/access level by checking the appropriate box. Click "Submit."

User list

If users are not automatically added to the user list on your site, you can add users manually. Go to Administer > User management > Users. Click on the "Add user" tab or link. If your site uses WebAuth (which is likely), you must input the user's ASUrite username and password and their ASU email address. Leave the status as "active." Grant the user the permission/access level you wish them to have by checking one of the listed roles. Click "create new account."

To delete a user, go to Administer > User management > Users. Find the user and click on the "edit" link under "Operations." Click "Delete" at the bottom of the form.