1 introduction to drupal web development

51
Drupal Webdesign made easy Wilson Wingston Sharon [email protected]

Upload: wingston

Post on 18-May-2015

5.405 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1 Introduction to Drupal Web Development

Drupal Webdesign made easyWilson Wingston [email protected]

Page 2: 1 Introduction to Drupal Web Development

To retrieve files, connect to “Workshop India” Adhoc wifi network.

Look for ◦Adraze

The reqiured file will be in the public folder.

Copy to desktop.Adraze/users/public/drupal workshop

Page 3: 1 Introduction to Drupal Web Development

welcomeIntroduction to www architecture.Technology stack.HTML/CSSPHP/MySQL

Drupal fundamentalsOpen source technology

Page 4: 1 Introduction to Drupal Web Development

The World Wide Web March 1989 – Tim Berners-Lee

proposed www as a web of “Hypertext Documents” to be viewed by browsers and set up within a client server architecture. URL HTTP HTML

1993 – Mosaic browser

Evolved from the need to provide a uniform method of content transfer and cataloguing over the internet.

Page 5: 1 Introduction to Drupal Web Development

The Address of a webpage

http://www.my-website.com?q=login#middle

Communication protocol usedftp:// - filesSmtp:// - mail

Host name. can be anything. Even NULL. Usually represents sub domain of main site.

Web site name. DNS lookup will give IP address

Query passed to web server for side server procsessing

Portion of site to show firstNot sent to server. Handled by browser

Page 6: 1 Introduction to Drupal Web Development

Technology Stack Server - A server is a computer which provides

information or services to other computers on a network. Operating system - The software that runs the server.

Unix, Linux, BSD, OS X and Windows are some examples. Database - A structured collection of records. Drupal

uses a database to store most content and configuration settings for your site, some content such as media files are generally stored in the server's file system.

Web server - The software component responsible for serving web pages. Examples are Apache and Microsoft IIS.

PHP - PHP is a programming language that allows web developers to create dynamic content that interacts with databases.

Drupal - A framework for building dynamic web sites offering a broad range of features and services.

Page 7: 1 Introduction to Drupal Web Development

Client Server Model – HTTP model

Client Server

1. Browser sends request for particular HTTP file

2. HTML file on disk sent to browser directly

Page 8: 1 Introduction to Drupal Web Development

Client Server Model – CGI model

ClientServer

1. Browser sends request for particular HTTP file

CGI applicati

on

2. Server finds and calls required CGI application.

3.After execution CGI app sends result to server.

4. Server sends formatted HTML back to browser

Page 9: 1 Introduction to Drupal Web Development

Client Server Model – Side server scripting

ClientServer

1. Browser sends request for particular HTTP file with scripts embedded in it.

Database

2. Server reads scripts embedded & executes them.4. Server sends formatted

HTML back to browser

3. Database for storage & retrieval of data as defined in script.

Page 10: 1 Introduction to Drupal Web Development

Developing for the webWeb developers will need have interdisciplinary skills / roles

Information architecture 

web usability, accessibility and search engine optimization

Project management, QA and other aspects common to IT development in general

Page 11: 1 Introduction to Drupal Web Development

The Web we know now, which loads into a browser window in essentially static screenfulls, is only an embryo of the Web to come. [...]The Web will be

understood not as screenfulls of text and graphics but as a transport mechanism, the ether through which interactivity happens. It will [...] appear on your

computer screen, [...] on your TV set [...] your car dashboard [...] your cell phone [...] hand-held game

machines [...] maybe even your microwave oven

Web 2.0The term "Web 2.0" was coined in 1999.

Darcy DiNucci in her article "Fragmented Future,"

Page 12: 1 Introduction to Drupal Web Development
Page 13: 1 Introduction to Drupal Web Development

Web 2.0 Fundae•Finding information through keyword search.

Search

•Connects various bits of information together into a meaningful information ecosystem using the model of the Web,

Links

•The ability to create and update content leads to the collaborative work of many rather than just a few web authors.

Authoring

•Categorization of content by users adding one-word descriptions to facilitate searching, without dependence on pre-made categories.

Tags

•Software that makes the Web an application platform as well as a document server.

Extensions

•The use of syndication technology such as RSS to notify users of content changes.

Signals

Page 14: 1 Introduction to Drupal Web Development

Web Technologies – client side

•Hyper Text Transfer Protocol•Maintained by W3C [world wide web consortium]HTML•Dynamic HTML to create interactive elements like menu and rollover buttons.DHTML•Describes the presentation schematics of content in a markup language. CSS

•eXtensible Markup language.•Representation of arbitrary data structures XML•Extends and improves upon HTML with XMLXHTML

Page 15: 1 Introduction to Drupal Web Development

Web Technologies – client side

•adds animation and interactivity to web pages. Flash•Client side scripting language for enhanced user interface and dynamic web pages.Javascript•Platform for creating rich applications running on a variety of devices.JavaFX•Integrates multimedia, graphics, animation and interactivity into a single package.Silverlight•Asynchronous JAVA and XMLAJAX•Automation tool allowing web pages to run applications on client side windows computers.Vbscript

Page 16: 1 Introduction to Drupal Web Development

Web Technologies – Server side

•Active Server Pages on .net infrastructure.ASP.net•Commercial database control scripting language.Coldfusion•Powerful database and scripting language for UNIXCGI/Perl•Cross platform application developmentJava•Hypertext PreprocessorPHP•Open source scripting languagePython

Page 17: 1 Introduction to Drupal Web Development

Web Technologies - Databases

•Java Relational database management system embeddable into java applicationsApache Derby

•IBM RDBMS – accessed by SQLDB2•Embedded database processing solutionsOracle•Open source Objetct-RDMBSPosegreSQL

•RDBMS most popularly used in web application in conjuction with PHP.MySQL

Page 18: 1 Introduction to Drupal Web Development

Web application frameworks

•Open source toolkit to allow development of high end javascript apps in Java.

Google web toolkit

•AJAX application development in python. Port of GWT.

Pyjamas/web2py

•Eases creation of complex database driven websites.Django

•CMS written in PHP that allows website development for non-programmers.Drupal•Another CMS like drupal.Joomla

Page 19: 1 Introduction to Drupal Web Development

Choosing the Right Tools

Understanding your needs.

Understanding the capabilities and limitations of various technologies.

Implementation. []

Page 20: 1 Introduction to Drupal Web Development

My FavoritesDjango - high-level Python Web framework

that encourages rapid development and clean, pragmatic design. Mostly for “high powered” applications.

Drupal - free and open source Content Management System (CMS) written in PHP

C# .net – too cool IDE and MSDN help references. Best for C users who don’t want to bother with PHP or python.

Page 21: 1 Introduction to Drupal Web Development

About Drupal.More CMF than CMS

Balance between “specific tasks” and “ manageable abstraction”

Generalized approach to core systems that allow you to tweak as much as possible for clever customized site functions.

Programming on a need-to-do basis only.

Time investment needed.

Page 22: 1 Introduction to Drupal Web Development

Drupal – languages usedHTML – basics of any web

framework.

PHP – the code base of drupal

SQL – database management routines

CSS – theming the looks

Page 23: 1 Introduction to Drupal Web Development

HTMLborn from desire to separate

structure from presentation. [SGML]

<tag open> </tag close> ; anything in these tags are commands to browser.

At its core, HTML is just text linking to other text.

Page 24: 1 Introduction to Drupal Web Development

Document type definition <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

The document’s top tag level is HTML.

The document adheres to the formal public identifier (FPI) “W3C HTML 4.01 Strict English” standards

The full DTD can be found at the URL http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.

Page 25: 1 Introduction to Drupal Web Development

Overall structure<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta ... meta tags go here ... >

<title>title of the page/document goes here</title>

<LINK rel=“stylesheet” href=“external style sheet name”

type=“text/css”>

<style>

... any document specific styles go here ...

</style>

Page 26: 1 Introduction to Drupal Web Development

Overall structure<script>

... client-side scripts go here ...

</script>

</head>

<body>

... body of document goes here, paragraphs modified by

block elements, characters, words and sentences modified by

in line elements ...

</body>

</html>

Page 27: 1 Introduction to Drupal Web Development

Basic elements•Formatted paragraphs<p>•Headings<h1> through <h6>

•Quoted text<blockquote>

•Preformatted text<pre>•Unnumbered, ordered, and definition lists<ul>,<ol>, <dl>

•Centered text<center>•A division of the document<div>

Page 28: 1 Introduction to Drupal Web Development

Styles<html><head><style>

.redline { color:red; text-decoration:line-through; }

</style></head><body><h1>An Example of style usage</h1><p> If its required to say, change a part of text, red and with a a

strike through, you might be tempted to use <font> tags and a <del> tag.. This is not appreciated in the new HTML 4 standard. Instead, we create a style and then apply the style as <span class=“redline”>to this portion of the text, now this part between the span tags has the style applied</span>

</p></body></html>

Page 29: 1 Introduction to Drupal Web Development

In main HTML page<html>

<head>

<LINK rel=“stylesheet” href=“site-styles.css” type=“text/css”>

</head>

<body> ...

In site-styles.css.redline

{ color:red;

text-decoration:line-through;

}

Page 30: 1 Introduction to Drupal Web Development

Linking<a href=“http://www.linkhere.com”> click

here</a>

◦Links to external site

<a href=“#jmp2”> jump here</a><a name = “jmp2”> jump space 2</a>

◦Links to Internal Bookmark

Page 31: 1 Introduction to Drupal Web Development

Things to rememberUse <!doctype>Nest element tags properly.

◦ <p>The last word is <b>bold</b></p>Tags are case sensitiveAll elements must be terminated

This is one paragraph<p>This is another paragraph<p> <p>This is one paragraph</p><p>This is another

paragraph</p>

Any empty tag must have a closing tag or the opening tag must end with a slash (/). ◦ <br />

Comment code </table> <!-- /Top heading --> </table> <!-- /Main body --> </table> <!-- /Floating page -->

Page 32: 1 Introduction to Drupal Web Development

PHPHypertext preprocessorAwesome language with its

fundamentals in CMost common language for web

applications. [facebook, amazon, youtube.]

PHP Code is embedded within HTML code by <?php> </php>

Secure, customizable, operating sys independent.

Page 33: 1 Introduction to Drupal Web Development

Web Server Processing of PHP The Web server starts scanning the file in

HTML mode. It assumes the statements are

HTML and sends them to the browser without

any processing.

The Web server continues in HTML mode

until it encounters a PHP opening tag

(<?php).

When it encounters a PHP opening tag, the

Web server switches to PHP mode. This is

sometimes called escaping from HTML.

Page 34: 1 Introduction to Drupal Web Development

The Web server then assumes that all statements

are PHP statements and executes

the PHP statements. If there is output, the

output is sent by the server to the browser.

The Web server continues in PHP mode

until it encounters a PHP closing tag (?>).

When the Web server encounters a PHP

closing tag, it returns to HTML mode. It

resumes scanning, and the cycle continues

from Step 1.

Page 35: 1 Introduction to Drupal Web Development

How PHP works.

<?php echo “<p>Hello World”; ?>

<p>Hello World

PHP code in original HTML document

What is sent to browser

$number = 2;$number = 2+1;$number = (2 - 1) * (4 * 5) -17;$number2 = $number + 3;$string = “Hello World”;$string2 = $string.” again!”;

Sample PHP

Page 36: 1 Introduction to Drupal Web Development

<html><head><title>Hello World Program</title></head><body><p>Hello World!</body></html>

<html><head><title>Hello World Program</title></head><body><?phpecho “<p>Hello World!”?></body></html>

Page 37: 1 Introduction to Drupal Web Development

PHP code for table from 2D arrayecho “<table border=1>”;foreach( $productPrices as $category ){

foreach( $category as $product => $price ){

$f_price = sprintf(“%01.2f”, $price);echo “<tr><td>$product:</td><td>\$$f_price</td></tr>”;

}}echo “</table>”;

Page 38: 1 Introduction to Drupal Web Development

Integration of RDMBS

PHP – Application code base.

MySQL – Data storage mechanism

Data storage solutions must always be mindful of the security issue.

MySQL can store complicated information reliably and securely.

PHP can do elegant manipulation of data.

Together, they prove an invaluable tool for open source developers to develop sophisticated web applications.

Both PHP and MySQL are under constant development and appraisal.

Page 39: 1 Introduction to Drupal Web Development

MySQLSELECT (lastName,firstName FROM

MemberWHERE lastName LIKE “B%”AND city = “Chennai”AND (phone LIKE “%8%” OR fax LIKE

“%8%”)

Page 40: 1 Introduction to Drupal Web Development

Understanding Drupal

5) Template

4) User Permissions

3) Blocks and Menu’s

2) Modules

1) Nodes

Page 41: 1 Introduction to Drupal Web Development

NodesNodes are the data pool.

Everything is a node in drupal.

Nodes are just pieces of content – page, story, image, text, poll, comment, etc etc

Most basic “token” of drupal.

Page 42: 1 Introduction to Drupal Web Development

ModulesModules are functional plug-ins that are

either part of the Drupal core (ship with Drupal) or they are contributed items that have been created by members of the Drupal community for various tasks.

Easily create your own modules for small tasks.

Drupalmodules.org

Page 43: 1 Introduction to Drupal Web Development

Blocks and MenusBlocks often provide the output

from a module or can be created to display whatever you want, and then can be placed in various spots in your template (theme) layout.

Highly configurable output control.

Page 44: 1 Introduction to Drupal Web Development

User PermissionsThis is where settings are

configured to determine which things different user types have access to.

Permissions are assigned to various roles, and in turn, users are associated with those various roles in order to grant them the associated permissions.

Page 45: 1 Introduction to Drupal Web Development

Site TemplateThis is made up predominately of

XHTML and CSS, with some PHP tokens sprinkled throughout to insert content from the system into the correct spots

Overridable theme functions to give complete control for how modules generate markup [HTML].

Page 46: 1 Introduction to Drupal Web Development

When NOT to use DrupalOnly a blog? Use wordpress.

Need a blog with extra features like ecommerce, galleries, user interaction – go Drupal.

Only a wiki? Use mediawiki.

Only a Forum? Use phpBB.

Page 47: 1 Introduction to Drupal Web Development

When u NEED DrupalFlexibility - easily add cool extendable

features.

Interaction with other sites.

Complex forms or workflows.

Organize and display lists of information on a per-user basis.

Custom functionality.

Page 48: 1 Introduction to Drupal Web Development

Security issues. Security always depends on good

maintenance.

Constantly update all modules and Drupal core to highest release version.

Subscribe to Drupal Security mailing list. It actually helps.

Page 49: 1 Introduction to Drupal Web Development

GPL Incidentally, the GPL is not tied specifically to Drupal;

rather Drupal makes use of the GPL, which is a kind of generic license for distributing open-source software

The way things work is that the software is copyrighted, and then licensed, for everyone to use freely.

anyone who makes use of this software cannot create proprietary software from it.

the only time you do need to worry about the niceties of the GPL is when you decide to set up a business installing, configuring, and customizing Drupal websites for money, or modifying, and redistributing the original source code.

Page 50: 1 Introduction to Drupal Web Development

Who’s using drupal?http://appel.nasa.gov/http://www.whitehouse.gov/http://www.economist.com/http://www.grammy.com/http://harvardscience.harvard.edu/http://ubuntu.com/http://spreadfirefox.com/http://liptongreenmint.ro/http://nikemedia.com/

Page 51: 1 Introduction to Drupal Web Development

Who’s using drupal?