1. Theme it in Whole or in Part

With Drupal, you can either set a single unified look for the entire site with a single template, e.g. by default, you have Garland theme for both front end and back end admin

or you can control the look and feel of the individual parts of the site with multiple templates, e.g. you can build one page template for your homepage , another for your interior pages.

2. Build with Blocks
   

   Drupal placeholder – Block where content is displayed in a webpage.
   The administrator can assign a variety of output to the regions through Block manager.
   Modules are one of the most common source of output in Drupal. Module is standalone bits of code – that extend the fuctionality of site.

3. Intercept and Override
   

   The best practice approach to customizing themes involves intercepting and overriding files and styles at the highest level of Drupal’s process – not altering the Drupal core files

Theme Engine

Drupal is distributed with PHPTemplate engine

Reignons & Blocks

Regions must be coded into your theme iles and are, therefore, primarily the province of the theme developer.
Blocks, on the other hand, can be created and manipulated by the site administrator from within the admin interface (without having to modify the code).

Default Garland theme – showing hard-coded “regions”

under the regions, there are the blocks

How Drupal displays a webpage

1 Files of a PHPTemplate Theme(*.tpl.php)

page.tpl.php does the heavy lifting in all PHPTemplate themes.

block.tpl.php, comment.tpl.php, node.tpl.php.etc. override the default theme (not required)

2 Files of a Pure PHP Theme(not employ PHPTemplate Engine)

In Chmeleon theme, the key files are chameleon.theme, common.css, style.css and chameleon.info

Drupal is a CMS, CMS is suitable for website :
have multiple contributors;
require a consistent look and feel;
have advanced functions,without lots of custom programming

Concept: node, content type ,core,module,theme,template

Drupal site examples:

www.theonion.com 
www.spreadfirefox.com
www.research.yahoo.com
www.popsci.com

Lullabot is training company supporting Drupal

Drupal Install and Config on Windows:

1. copy Drupal folder to localhost, add “/sites/default/settings.php”;
2. setup Mysql connection,setup Administrator account for Drupal
3. running cron for updating drupal from reports/status report
4. enable/disable Clean URLs to show without/with ?q= in the URL(by default is enable – need httpd.conf mod_rewrite support on server)
5. config site information at /admin : 
   Site configuration: default front page,Name, email, slogan, mission,footer
   site building/blocks – setup layout of the pages
   site building/themes – theme of drupal and show/hide info.
   Reports/ status report and log entries(monitor website errors and usability,did users get the web page they want,what kind of errors they encountered, and their search word)

Managing User

Groups User at Drupal at Permission section

1. One Super User (ID=1)
2. Two groups build in – 1 Authenticated 2 Anonymous
3. Add groups you need (User management/roles e.g. Contributing User )

Drupal Security

backup Drupal files and MySql database regularly

enable php filter module; disable php evaluator checkbox, put php code as input format, can not execute php code from user input

Create content on Drupal

Nodes type: page(static page like contact) ; story(can add comment); blog

Other nodes types(enable from Module and also set permission for target users to visit) : forum, polls

title ; body(html) ; menu link ; Input format(Full HTML); Revision(create new revision, log message: create page); Comment setting(disabled) ;Publishing option(Published, Promoted on front page-always show on front page)

enable Module : blog and path(allow user to rename URL to repalce “node/3” with “about us”)

taxonomy : to require user specific category of the article

Layout of Drupal (by default –3 col Garland theme)

check www.themegarden.org  for more themes

themes might have: liquid layout , color flexible

Block of Drupal

1 add block by enable new module

2 add block by manually add block

Theme of Drupal config

put new download themes(unzipped) which is not come with drupal installation to site/default/theme (NOTE: themes working version should syn with current version of Drupal on host)

style.css is the one we should look into, style-rtl.css is for the language that read from right to left.

use Web developer css/edit css on Firefox to test and edit style.css, make sure you backup the original style.css before you edit it .

Module of Drupal

Php snippets for Themes customize 

Read the to be used module’s documentation on drupal.org through before use it.

How to setup a new module ?

• set read/write rights default folder,unpack downloaded Module to sites/default/modules
• enable the module in admin/site building/ module ,find it at the end of the page.
• config the module, the module sometimes doesn’t work because there are some required conditions like “enable necessary modules” ,set up google analytics account

Useful Module

• CCK
• Captcha
• FCKeditor
• google analytic
• content display/ calendar
• pathauto 1.1(depend on token module )
• Poormanscron (replace the cron application on server if the server does not support cron)

• using PS and Icon workshop to create 16px*16px with 256 color *.ico file
• <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

HTML Title format

website name(company name) – current webpage title/slogan
$data['html_title']=‘Band Equity Group – Band To Fan Marketing’;

read these links on CSS GRid Framework first before start

which css framework should I use

YUI Grids VS Blueprint
YUI Grids vs Blueprint 2

YUI
YUI’s advantage is “em” based layout
YUI has a YUI Grid Builder
YUI lacks a Typography CSS that provide an easy way to achieve consistent vertical spacing without resorting to pixed-sized font
Blueprint
Blueprint has a Bluepring Grid Css Generator which makes easier for people to setting up a flexible grid system that fits current custom project
Blueprint uses pixels to set sizes for layout.
This makes elasticity not happening.

Easy Solution:

using YUI for most part and employ Blueprint’s forms.css and typography.css

Why Grid Design?

“Virtually any website you design should be based on a grid. Grids lend a sense of structure to your site and improved usability for your visitors. And designing to a grid can simplify your design process and make you a more efficient designer.”

solution: change file name FirePHP.php to firephp.php

• gradual background form design
• fancy form design

Form design using fieldset-legend-label structure with ordered list

"The beauty of using an ordered list is that it adds an extra level of semantics to the structure of the form, and also makes the form display quite well in the absence of styles.The OL provides additional information for some screen readers that announce the number of list-items when they first encounter the list."

each <input> has a class="text" type="text" attribute – this is a handy way to accessing styling a form element,because IE6 does not support CSS attribute selectors

Naming Form elements

If we put Form elements’ name <input name=’firstname’> as the same as the matching field in the database table , this will saves us a lot of time and energy when coding and testing.

Resources

• styled Checkbox displayin different browser 

  

• USA state dropdown list

• CSS Message box (error, success, info..etc.)
   
  http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx

Resources

General all kinds of web patterns

http://www.welie.com/patterns/

Button & Toolbar Icon
1 Knobs toolbar icon
 
http://itweek.deviantart.com/art/Knob-Buttons-Toolbar-icons-73463960

Dashboard

http://dashboardspy.com/

repopulating form on failed validation

CI form enhancement MY_form_helper.php adding to helper,it can help with setting already input values when coming back to form after processing an error input submit

MY_form_helper

CI’s form validation

add valid_url check to form_validation in CI

$rules['username'] = "required|min_length[5]|max_length[12]";
$rules['password'] = "required|matches[passconf]";
$rules['passconf'] = "required";
$rules['email'] = "required|valid_email";

how to use CI’s session flashdata

CI’s flashdata in session library –CodeIgniter supports "flashdata", or session data that will only be available for the next server request, and are then automatically cleared. These can be very useful, and are typically used for informational or status messages

$this->session->set_flashdata('status', 'adding band info successfully.');//set flashdata in controller
redirect('gelist/result','refresh');

//in view files show flashdata('status')
echo $this->session->flashdata('status');

read this article for more details

Adding the following code to enhance the user experience of the from when inputting some wrong data, the input field background will be highlighted.

adding following code to helper/MY_form_helper.php

   1: if(! function_exists('form_error_exist'))

   2: {

   3:     function form_error_exist($field)

   4:     {

   5:         if (FALSE === ($OBJ =& _get_validation_object()))

   6:         {

   7:                 return '';

   8:         }

   9:        return $OBJ->error_field_exist($field);

  10:     }

  11: }

adding following code to libraries/MY_Form_validation.php

   1: function error_field_exist($field){

   2:             if(isset($this->_field_data[$field]['error']) && $this->_field_data[$field]['error'] != '')

   3:             {

   4:                 return true;

   5:             }

   6:             else

   7:             {return false;}

   8: }

redirect web page (after successful process of saving)

0 theory how to redirect web page(no meta,no js)

1 adding following code to helper/MY_url_helper.php

   1: if (!function_exists('redirect')) {

   2:   function redirect($uri = '', $method = 'location', $http_response_code = 302, $time=0) {

   3:     switch ($method) {

   4:       case 'refresh' : header("Refresh:$time;url=" . site_url($uri));

   5:         break;

   6:       default : header("Location: " . site_url($uri), TRUE, $http_response_code);

   7:         break;

   8:     }

   9:     exit;

  10:   }

  11: }

SQL basics

use Navicat for Mysql can make datatable management a lot easier

example of a person contact table in Navicat

common table fields

• id -(int,auto increment,length-11,not null,primary key )
• name -(varchar, length-75,not null,)
• website url – (varchar,length-150)
• date -(date,not null)

• Mod rewrite How to remove index.php from Codeigniter URL
  @.htaccess change ‘RewriteBase /beg/’ to ‘RewriteBase /’ when updated to host
  after days of searching,this is the one that I found truly works

  adding an extra line to .htaccess, so following files are not going to use CI’s route structure and can be visited from your view files directly
  

     1: RewriteCond $1 !^(index\.php|images|img|temp|download|css|js|captcha|CVS|robots\.txt|favicon\.ico)

• base_url() $config['base_url'] = "http://localhost/beg/"

  index_page() $config['index_page'] = "index.php";

  @application/config/config.php

• default controller $route['default_controller'] = "main"; @application/config/routes.php
• autoload libraries,helper and plugin

  $autoload['libraries'] = array(‘database’,'email’,'form_validation’,'session’);//’unit_test’

  $autoload['helper'] = array(‘url’,'form’,'text’,'date’,'security’);

  @application/config/autoload.php

• database connection

  $db['default']['hostname'] = "localhost";

  $db['default']['username'] = "root";

  $db['default']['password'] = ""; $db['default']['database'] = "lifebegin";

  @application/config/database.php

• firephp debugging enabled/disabled $config['fireignition_enabled'] = TRUE;

  @application/config/fireignition.php

a must read before hands-on coding

CI codeing best practice

turns off PHP "notice Undefined index"

this error is caused because using $_POST['midname'] which might not be filled by user.

solution: 1 isset($_POST['midname']){}; 2 turn off error_reporting =E_ALL & ~E_NOTICE or adding this line to your php page

<?php error_reporting (E_ALL ^ E_NOTICE); ?>

use absolute url as href attrbute inside the view pages

<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css">

redirect 3s delay function/custom (MY_url_helper.php)

   1: <?php   redirect('', 'refresh', '', '3');//3s delay?>

Upload your CI website to hosting server (Godaddy)

• setup MySqlDatabase on your hosting account
• after uploading your CI website ,you need to wait at least 1 hour for Godaddy to refresh your site’s .htaccess file
  
  does godaddy ecnomic hosting support mod_rewrite , CI and WordPress?

  get CI to work with godaddy

  
  
  the following one really works for my Project on godday 100% sure

  CI on Godaddy excluding index.php?

• disable firephp debugging option in config/fireignition
  
  $config['fireignition_enabled'] = false;
• change your local mysql connection to remote server Mysql in config/database.php
• change your base_url in config/config.php
  
  $config['base_url']    = http://example.com/;

  $config['uri_protocol']    = "QUERY_STRING";//default AUTO

• delete php.in file on the server root or change the content to php5.ini
• after all these setting ,you just need patience and wait for 1hour for the godaddy to refresh all the settings on your web pages