Drupal-Logo

Course: SI634 & SI635:

These courses are about configuring and customizing Content Management Platforms. We focused on Drupal 6 but also covered other platforms such as Wordpress, Joomla, phpBB, etc.

What is Drupal?:

"Drupal is a free and open source content management system (CMS) written in PHP and distributed under the GNU General Public License. It is used as a back-end system for over 1% of all websites worldwide ranging from personal blogs to corporate, political, and government sites." - Wikipedia

Result:

By using the skills I learned in these courses, I rebuilt my personal website (yuliang.net) in Drupal.

CONFIGURATION:

Modules (List of main modules I used in additional to Drupal core modules): 
Content type & Taxonomy:

I created a new content type called "Project" and a new Taxonomy called "Technology". Under "Project" I created fields like "Time frame", "Brief description", "Full description" and file field "Pics" for displaying images. Under "Technology" I created terms like "iPhone programming", "AJAX", "Java", etc. By associating "Technology" with "Project" I can then select what type of technology I used for a particular project. 

Views:

Views are powerful for extrating information from different content types and put them in a single page. I used views for the following pages:

  • http://yuliang.net/projects: The output of this view is a table. It feeds the table with fields "Attached images", "Title", "Time frame", "Technology terms" and "Brief description" from all published "Project" pages.
     
  • http://yuliang.net/project-list: The output of this view is an unformatted list. It feeds the list with page content from all "Project" pages. In technical words, it shows a list of teaser view from all published node with type “Project”.
     
  • http://yuliang.net/project-slideshow: This view creates the slideshow window at the bottom part of my first page: yuliang.net/home. The output of this view is a jCarousel window. It feeds the window with images of type “Pic” associated with published “Project” pages and title of the corresponding page. The title links to the project page and the image is lightbox style.
     

CUSTOMIZATION:

I wrote a module to add twitter & facebook like buttons on top of a blog post and a "Return to top" link at the bottom of a blog post (see an example).

 

This is the code for that:

<?php
function yuliang_nodeapi(&$node, $op, $a3 = NULL, $a4 = NULL) {
    if ($op == 'view') {       
           
        if ($node->type == 'blog' && $node->status ==1) {
            $node->content[body]['#value'] = yuliang_add_facebook($someURL).$node->content[body]['#value'];
            $node->content[body]['#value'] = yuliang_add_twitter().$node->content[body]['#value'];
            $node->content[body]['#value'] .= yuliang_add_returntotop();
        }
    }
}


function yuliang_add_facebook($someURL) {
    $out = '<iframe src="http://www.facebook.com/plugins/like.php?href='.yuliang_return_url().'&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>';   
    return $out;
}

function yuliang_add_twitter() {
    $out = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>';
    return $out;
}

function yuliang_return_url(){
    $path = isset($_GET['q']) ? $_GET['q'] : '<front>';
    $myURL = url($path, array('absolute' => TRUE));
    return $myURL;
}

function yuliang_add_returntotop(){
    $out = '<div style="float: right;"><h4><a href="#top">Return to top &uarr;</a></h4></div>';
    return $out;
}
?>


  Technology used: