Drupal Training

SkillsLab – 302Labs

Sep, 12 ~ 20, 2014

Main Nodes

• Welcome and Introduction• What is Drupal ?• What is Drupal Egypt?• Drupal Ingredients• Drupal Terminology• Drupal Basic Layouts• How Drupal dealing with User Requests • Thinking Like Drupal• Drupal Development environment setup• Drupal installation and Discovery• Configuration Before Code

This is Me ..

Ahmad Mohamad Zain

TeQniaty CTO/Founder

Egypt Com. Manager

You can fiend me at

Twitter: @iahmadzain

Skype : iahmadzain

You ?

What is Drupal Egypt

The Drupal community in Egypt

Why Drupal ?

Why Drupal ?

• Drupal is open.

• Drupal is Web Development. (event-driven ..)

• Drupal is Social. (User System and Roles)

• Drupal is Content. (SEO and etc..)

• Drupal is Scalable. (10m pages & 20K r/s)

• Drupal is Design. (base themes and Omega)

• Drupal is Everywhere. (big, med, small, tiny)

• Drupal is Secure.(OWASP)

Why Drupal

Drupal VS WP VS Joomla

What is Drupal

What is Drupal

Drupal is a free, open-source web development platform for online content and user communities. Drupal powers some of the busiest sites on the web, and can be adapted to virtually any visual design. Drupal runs over a million sites, including WhiteHouse.gov, World Economic Forum, Stanford University, and Examiner.com.Drupal is a unique combination between CMS and Framework there power and the simplicity.

Acquia CEO.

What is Drupal

• Drupal Pros:Can do almost anything. Seriously. Drupal was designed to get new features using tons of little modules. Many of these modules are maintained by professional developers for large clients, but you still get them for free. (Feature Rich,Advanced Admin, Design Customization, Content Types and WYSIWYG, Scalable, User Collaboration)

• Drupal Cons:If you're not a developer, Drupal has a reputation for being difficult. However, the recent release of Drupal 7 brings huge improvements that make it much easier for normal users. Still, it's not quite as easy as WordPress.

What is Drupal

• Structure– Nodes & Content types (Drupal Secret Points)Each item of content in your site is a node. A node has several default fields. A node can be one of a number of content types.– Navigation menusSEO and Path – Blocks– Taxonomies (Categories we can say ..)– Views (The magic of playing with database via GUI)– Panels (Play with your layout)

Think Like Drupal

Think Like Drupal

• How Drupal Works :

Source: drupal.org

Think Like Drupal

• General Concepts:– Node (Content)

– Entity types• An entity type is a useful abstraction to group together fields. Entity types are used to store and display data,

which can be nodes (content), comments, taxonomy terms, user profiles, or something custom developed.

– Comment

– Taxonomy• Drupal has a system for classifying content known as taxonomy. This is provided by the core Taxonomy module.

You can define your own vocabularies, or groups, of taxonomy terms, and add terms to each vocabulary. Each vocabulary can then be attached to one or more content types, and in this way, nodes on your site can be grouped into categories, tagged, or classified in any way you choose.

– User

– Module• A module is software (code) that extends Drupal functionality. Modules fall into one of three categories:

• Core modules are those included with the main download of Drupal. These can be turned on or off without downloading additional components. Examples include Blog, Book, Poll, or Taxonomy.

• Contributed modules are downloaded from the Modules download section of drupal.org, and installed within your Drupal installation. Examples include Panels, Views or Metatag.

Think Like Drupal

– Regions & Blocks– Menus

• There are four standard menus in Drupal 7:• The Main menu is built by site administrators and displayed automatically in the page header of many themes (and if not,

you can enable their blocks to display them).• Management is the administration menu, and is presented in the Admin toolbar.• Navigation is a catch-all menu that usually contains links supplied by modules on your site.• User menu contains links to the User account and the logout link.

– Theme– Views

• Although not all sites have Views, most sites include the Views module because of the excellent tools it provides. Views allows people to choose a list of nodes or other entities and present them as pages, blocks, RSS feeds, or other formats. The main use case for views is to create dynamically updating lists to content (for example, a listing of latest news), basedon properties of that content (in the case of the news listing, that the content type is “News” and sorted by publication date).

– Database• Drupal stores information in a database. Within this database, each type of information has its own database table. For

example, the basic information about the nodes of your site are stored in the Node table, and each field stores its data in a separate table (which Drupal creates automatically). Comments and Users also have their own database tables, as do roles, permissions, and other settings.

• The most common database for Drupal is MySQL. However, you can also run Drupal on other database systems, such as PostgreSQL, as well.

– Path– Bootstrap

Drupal Dev. Environment

Drupal Dev. Environment

• Drupal Is flexible but well tested on ..

– Apache

– MySQL, PGSQL, SQLite, MariaDB

– Linux

• System Requirement

– MySQL 5.0.15 (PDO),SQLite 3.3.7

– PHP 5.4 https://www.drupal.org/requirements/php

Drupal Development environment setup

Drupal Development environment setup

• Cloud Like : Drupalgardens(http://www.drupalgardens.com)

• DDS, VPS, PERSONAL (MAC Server, Linux, Windows)

• New … Windows Azure

Break Q & A

Drupal Installation And Discovery

Drupal Installation And Discovery

• Drupal fresh download (current version 7.28)

• Tools

– XAMPP or WAMPP or MAMPP

(XAMPP is the Hero)

• https://www.apachefriends.org/index.html

– IDEs (PHPStorm, KOMODO, SUBLIM, APTANA)

• Any PHP or Text Editor will be helpful the top recommended PHPSTORM

Drupal Installation And Discovery

• Files and Folders Structure

Drupal Installation And Discovery

• Admin area (http://test.local/admin)

• Site Configuration

• Users and Roles

• Modules

• Content Types

• Blocks

• Views

• Appearance

Drupal Configurations

Drupal Configurations

$databases = array ('default' => array (

'default' => array (

'database' => ’MyDataBase','username' => ’DBUserName,'password' => ’DBPassword','host' => 'localhost','port' => '','driver' => 'mysql','prefix' => '',

),),

);

Sites/default/settings.php

Drupal Configurations

http://YOUR-DRUPAL-TEST-SITE/admin/config

Q & A

Drupal Cases

Drupal Cases

The-Economisthttp://www.economist.com

Views & BlocksMigrateComments

Drupal Cases

Alshari3 News

LocalizationViews & BlocksMega MenusTwitter Module

Drupal Cases

For More Cases Visit this link

http://www.drupalshowcase.com/site-industries/Education

Extending the Drupal Core

Extending the Drupal Core

• Drupal Distros. (Distributions)Distributions provide site features and functions for a specific type of site as a single download containing Drupal core, contributed modules, themes, and pre-defined configuration. They make it possible to quickly set up a complex, use-specific site in fewer steps than if installing and configuring elements individually.

• OpenPublic• OpenPublish• Joulio• Erpal• Common• Open Atrium ……

Extending the Drupal Core

• Drupal Themes. (https://www.drupal.org/project/project_theme)

Themes allow you to change the look and feel of your Drupal site. You can use themes contributed by others or create your own to share with the community. Contributed themes are not part of any official release and may not have optimized code/functionality for your purposes. You can also create a sub-theme of an existing theme. A sub-theme inherits a parent theme's resources.

• Partick• Omega & Omega Sub-Theme• Seven For Admin• Adabtive Theme

Extending the Drupal Core

• Drupal Modules. (https://www.drupal.org/project/project_module )

Extend and customize Drupal functionality with contributed modules. • Views• Chaos Tool Suite (Ctools)• Display Suite• Backup and Migrate• FB Connect (Facebook integration also OpenGraph) • Libraries API• Date• WebForm• Entity API• IMCE• WySwiyg & CKEditor• LDAP • CAPATCHA

Drupal Views Part I

Drupal Views Part I

• Understanding Views vs. custom code.

– Custom code advantages

• Complete Control

• Huge SQL

• Complete Knowledge

• Simplicity

• Revision control systems like Git, TFS, CVS, SVN.

Drupal Views Part I

• Understanding Views vs. custom code.– Views advantages.

• Change behavior without changing code.• Many options for presentation.• No PHP Code Knowledge needed (Like BB).• Data is Safe.• Open architecture.• Community benefit.• Reuse views.• Other Modules integrations.• Panels integration. • Programmatic handling of views.• Documentation.• Page, menu and block integration. • Exposed filters a powerful tool.

Drupal Views Part I

• Installing Views and dependences.

Drupal Views Part I

• Enabling Views.

• Exploring and creating new View.

Hands-On Drupal

Hands-On Drupal

• Create a DrupalGarden Account

(http://drupalgardens.com)

• Start Thinking with your project

• Draw your Proto Type

• Apply to your site on cloud.

• Export to your local Drupal project

Drupal IngredientsOR

Main Components

Drupal Ingredients and Main Components

DrupalNodes & Content

Types

Navigation menus

Blocks Taxonomies

Views

Panels

Drupal Terminology

Drupal Terminology

Drupal Core {Core APIs, Core modules, Core Themes}From the base installation package … not a distribution or installation profile

Contirb. ModulesDropal.org or drupalmodules.com

Custom ModulesYour custom modules

Themes Contirb. Themes (and/or) Purchased Themes (and/or) Your Custom Theme

Theme is a group of templates In Joomla Template means Theme

Contents (HTML,TEXT,Cashed Data, Variables etc…)

Attached Files, Images, Media … etc

Settings

Content Types

Nodes Views User Roles URL Aliases

Cats Blocks Menus ACL

DB

Code

Drupal Basic Template Structure

Drupal Basic Template Structure

node.tpl.php

menu.tpl.php or block.tpl.php

block.tpl.php

block.tpl.php

block.tpl.php

html.tpl.php

page.tpl.php

Drupal Basic Template Structure

html.tpl.php

page.tpl.php

Regions{Blocks}

Drupal Basic Template Structure

Drupal Best Practices

Drupal Best Practices

• Register to http://drupal.org

• Join some groups @ http://groups.drupal.org

• File Structure

– Do not code in the core (never ever) !!

– Create a separated folders in /sites/all/modules

• contirb (for the modules came from drupal.org)

• features (exports via Features module)

• custom (that you coded it)

Drupal Module Development

Drupal Module Development

hook clean hook

Module

Drupal Module Structure

Drupal Module Structure

Module contains

Files define the module to Drupal

Sites/all/modules/[contirb],[custom],[futures] Module

Required

Module.info Module.module

Optional

.install, READEME.txt,

.inc

Drupal useful tools

Drupal useful tools

• IDE

– PHPStorm : http://jetbrains.com/

– KOMODO : http://komodoide.com/

– Sublime Text : http://www.sublimetext.com/

• Devel Module

– http://drupal.org/project/devel

Drupal & User Request

Browser

Server

.htaccess Site.com

Bootstrap.inc

Menues.inc

DB

hook_menu()

Check for all URLS

Modules

User Access

Theme System

If not 404

Server

Check For shared resources like

COOKIES

Any like Apache according to the

configurations

Request

Response

Drupal Event Driven Hook System

Drupal Event Driven Hook System

Drupal Events

User Register

Node Display

Content Searched

Form is Processed

Saving a Comment

Menus has been built

Drupal Event Driven Hook SystemHook Naming style …

mymodule_name

mymodule_[permission]

Drupal Hook Name

[hook]_permission

my_hook()

My new function

Drupal Event Driven Hook System

• function mymodule_myfunction(){ module_invoke_all(‘myhook’,$vars); }

• function mymodule_myhook(){}

• function yourmodule_myhook(){}

Any Module can Define a hook.

Drupal Menu System

Drupal Menu System

• hook_menu().– function mymodule_menu () {}

• To know if any hook needs any parameters to be passed to the hook function you can know that from … http://api.drupal.org

function mymodule_menu() {$items['abc/def'] = array(

'page callback' => 'mymodule_abc_view',);return $items;

}

function mymodule_abc_view($ghi = 0, $jkl = '') {// ...

}

Drupal Menu System

http:// [site.com] /

{node}

{user}

…

/ [arg-1] / [arg-2]

Passing URL arguments to hook_function

Drupal Menu System

Passing URL arguments to hook_function

function mymodule_menu() {$items['abc/def'] = array('page callback' => 'mymodule_abc_view','page arguments' => array(1, 'foo'),

);return $items;

}

Drupal Menu System

Passing URL arguments using wildcards

function mymodule_menu() {$items['abc/%/def'] = array('page callback' => 'mymodule_abc_view','page arguments' => array(1, 2),

);return $items;

}

Drupal Menu System

Passing URL arguments using auto-loaders

function mymodule_menu() {$items['abc/%node/def'] = array('page callback' => 'mymodule_abc_view','page arguments' => array(1, 2),

);return $items;

}

Drupal Menu System

• What is Contextual links and Menu Tab :

Drupal Database Layer

Drupal Database Layer

• PDO (PHP Data Opjects)

• Any DB that PHP supports (MySQL, SQLite ..)

• Master and Slave Replications

• more.....

Drupal SQL Queries

Drupal SQL Queries

• Static (the normal SELECT methods)

– SELECT x,y,z FROM table WHERE v = b

• Dynamic (Alterable, Strong, Heavy)

– db_select()

Drupal DB Table Creation and altering

Drupal DB Table Creation and altering

• Mymodule.install – The file

• hook_schema();

• hook_update_N();

• Schema Module

Drupal DB Querying

Drupal DB Querying

• SELECT QUERY

• INSERT QUERY

• UPDATE QUERY

• MERGE QUERY

• DELETE QUERY

Drupal Theming

Drupal Theming

• CSS creation to control the Layout

• Appearance Design

• Changing The Output (HTML output)

Drupal Theming

Theme contains

Files define the New Theme to Drupal

Sites/all/themes/mytheme Theme

Required

theme.info .tpl.php

Optional

Template.tpl.php(if we will pass

args to our theme)

Drupal Theming

node.tpl.php

node.tpl.php

node.tpl.php

Block.tpl.php

Block.tpl.php

Page.tpl.php

Regon.tpl.phpRegon.tpl.php

Drupal Theming

• Dynamic Templates

– node.tpl.php

– node—{nodetype}.tpl.php

• node—article.tpl.php

– “-” separator & “—” specify the targeted override

Drupal Theming

• User Module .tpl files

– /modules/user/….tpl.php

Drupal Theming

• Mytheme.info (Let Drupal know your theme)

• Page.tpl.php (Control the layout)

• Template.php (Vars and override theme functions)

Drupal Theming

• Most Popular Theme Vars. :

Drupal Entities Module

http://www.youtube.com/watch?v=cu4h-xhwb2k

Drupal Panels Modulehttp://goo.gl/mHKcKz

Drupal Best Practices

• Be a friend for Drupal APIs @ https://api.drupal.org/api/drupal

• Use Coding Standards @ https://drupal.org/node/318

• 01114943403 Ahmad Zain

Q & A

Thank You !

@iahmdzain

01114943403