1 Introduction to Drupal Web Development

Drupal Webdesignmade easyWilson Wingston Sharonwingston.sharon@gmail.com

To retrieve files, connect to “Workshop India” Adhocwifi network.Look for AdrazeThe reqiured file will be in the public folder.Copy to desktop.Adraze/users/public/drupal workshop

welcomeIntroduction to www architecture.Technology stack.HTML/CSSPHP/MySQLDrupal fundamentalsOpen source technology

The World Wide WebMarch 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.URLHTTPHTML1993 – Mosaic browser Evolved from the need to provide a uniform method of content transfer and cataloguing over the internet.

The Address of a webpageHost name. can be anything. Even NULL. Usually represents sub domain of main site.http://www.my-website.com?q=login#middlePortion of site to show firstNot sent to server. Handled by browserCommunication protocol usedftp:// - filesSmtp:// - mailWeb site name. DNS lookup will give IP addressQuery passed to web server for side server procsessing

Technology StackServer - 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.

Client Server Model – HTTP modelServer1. Browser sends request for particular HTTP fileClient2. HTML file on disk sent to browser directly

Client Server Model – CGI modelServer2. Server finds and calls required CGI application.Client1. Browser sends request for particular HTTP file4. Server sends formatted HTML back to browserCGI application3.After execution CGI app sends result to server.

Client Server Model – Side server scripting Server2. Server reads scripts embedded & executes them.Client1. Browser sends request for particular HTTP file with scripts embedded in it.4. Server sends formatted HTML back to browserDatabase3. Database for storage & retrieval of data as defined in script.

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 ovenWeb 2.0The term "Web 2.0" was coined in 1999. Darcy DiNucci in her article "Fragmented Future,"

1 Introduction to Drupal Web Development

Web Technologies – client side

Web Technologies – Server side

Choosing the Right ToolsUnderstanding your needs.Understanding the capabilities and limitations of various technologies.Implementation. []

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.

About Drupal.More CMF than CMSBalance 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.

Drupal – languages usedHTML – basics of any web framework.PHP – the code base of drupalSQL – database management routinesCSS – theming the looks

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.

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” standardsThe full DTD can be found at the URL http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.

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>

Overall structure<script>... client-side scripts go here ...</script></head><body>... body of document goes here, paragraphs modified byblock elements, characters, words and sentences modified byin line elements ...</body></html>

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>

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; }

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

Things to rememberUse <!doctype>Nest element tags properly.<p>The last word is <b>bold</b></p>Tags are case sensitiveAll elements must be terminatedThis 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> </table> </table>

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.

Web Server Processing of PHP The Web server starts scanning the file inHTML mode. It assumes the statements areHTML and sends them to the browser withoutany processing.The Web server continues in HTML modeuntil it encounters a PHP opening tag(<?php).When it encounters a PHP opening tag, theWeb server switches to PHP mode. This issometimes called escaping from HTML.

The Web server then assumes that all statementsare PHP statements and executesthe PHP statements. If there is output, theoutput is sent by the server to the browser.The Web server continues in PHP modeuntil it encounters a PHP closing tag (?>).When the Web server encounters a PHPclosing tag, it returns to HTML mode. Itresumes scanning, and the cycle continuesfrom Step 1.

How PHP works.<?php echo “<p>Hello World”; ?>PHP code in original HTML document<p>Hello WorldWhat 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

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

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>”;

MySQLSELECT (lastName,firstName FROM MemberWHERE lastName LIKE “B%”AND city = “Chennai”AND (phone LIKE “%8%” OR fax LIKE “%8%”)

NodesNodes are the data pool. Everything is a node in drupal.Nodes are just pieces of content – page, story, image, text, poll, comment, etc etcMost basic “token” of drupal.

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

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.

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.

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 spotsOverridable theme functions to give complete control for how modules generate markup [HTML].

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.

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.

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.

GPLIncidentally, 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 softwareThe 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.

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/

1 Introduction to Drupal Web Development

More Related Content

What's hot (20)

Similar to 1 Introduction to Drupal Web Development (20)

More from Wingston (20)

1 Introduction to Drupal Web Development