0
Drupal Webdesignmade easy<br />Wilson Wingston Sharon<br />wingston.sharon@gmail.com<br />
To retrieve files, connect to “Workshop India” Adhocwifi network.<br />Look for <br />Adraze<br />The reqiured file will b...
welcome<br />Introduction to www architecture.<br />Technology stack.<br />HTML/CSS<br />PHP/MySQL<br />Drupal fundamental...
The World Wide Web<br />March 1989 – Tim Berners-Lee proposed www as a web of “Hypertext Documents” to be viewed by browse...
The Address of a webpage<br />Host name. can be anything. Even NULL. Usually represents sub domain of main site.<br />http...
Technology Stack<br />Server - A server is a computer which provides information or services to other computers on a netwo...
Client Server Model – HTTP model<br />Server<br />1. Browser sends request for particular HTTP file<br />Client<br />2. HT...
Client Server Model – CGI model<br />Server<br />2. Server finds and calls required CGI application.<br />Client<br />1. B...
Client Server Model – Side server scripting <br />Server<br />2. Server reads scripts embedded & executes them.<br />Clien...
Developing for the web<br />
The Web we know now, which loads into a browser window in essentially static screenfulls, is only an embryo of the Web to ...
Web 2.0 Fundae<br />
Web Technologies – client side<br />
Web Technologies – client side<br />
Web Technologies – Server side<br />
Web Technologies - Databases<br />
Web application frameworks<br />
Choosing the Right Tools<br />Understanding your needs.<br />Understanding the capabilities and limitations of various tec...
My Favorites<br />Django - high-level Python Web framework that encourages rapid development and clean, pragmatic design. ...
About Drupal.<br />More CMF than CMS<br />Balance between “specific tasks” and “ manageable abstraction”<br />Generalized ...
Drupal – languages used<br />HTML – basics of any web framework.<br />PHP – the code base of drupal<br />SQL – database ma...
HTML<br />born from desire to separate structure from presentation. [SGML]<br /><tag open> </tag close> ; anything in thes...
Document type definition<br /><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><b...
Overall structure<br /><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”<br />“http://www.w3.org/TR/html4/strict.dtd”><br ...
Overall structure<br /><script><br />... client-side scripts go here ...<br /></script><br /></head><br /><body><br />... ...
Basic elements<br />
Styles<br /><html><br /><head><br /><style><br />.redline { color:red; text-decoration:line-through; }<br /></style><br />...
In main HTML page<br /><html><br /><head><br /><LINK rel=“stylesheet” href=“site-styles.css” type=“text/css”><br /></head>...
Linking<br /><a href=“http://www.linkhere.com”> click here</a><br />Links to external site<br /><a href=“#jmp2”> jump here...
Things to remember<br />Use <!doctype><br />Nest element tags properly.<br /><p>The last word is <b>bold</b></p><br />Tags...
<p>This is one paragraph</p><p>This is another paragraph</p></li></ul>Any empty tag must have a closing tag or the opening...
PHP<br />Hypertext preprocessor<br />Awesome language with its fundamentals in C<br />Most common language for web  applic...
Web Server Processing of PHP<br /> The Web server starts scanning the file in<br />HTML mode. It assumes the statements ar...
The Web server then assumes that all statements<br />are PHP statements and executes<br />the PHP statements. If there is ...
How PHP works.<br /><?php echo “<p>Hello World”; ?><br />PHP code in original HTML document<br /><p>Hello World<br />What ...
<html><br /><head><title>Hello World Program</title></head><br /><body><br /><?php<br />echo “<p>Hello World!”<br />?><br ...
PHP code for table from 2D array<br />echo “<table border=1>”;<br />foreach( $productPrices as $category )<br />{<br />for...
Integration of RDMBS<br />
MySQL<br />SELECT (lastName,firstName FROM Member<br />WHERE lastName LIKE “B%”<br />AND city = “Chennai”<br />AND (phone ...
Understanding Drupal<br />
Nodes<br />Nodes are the data pool. Everything is a node in drupal.<br />Nodes are just pieces of content – page, story, i...
Modules<br />Modules are functional plug-ins that are either part of the Drupal core (ship with Drupal) or they are contri...
Blocks and Menus<br />Blocks often provide the output from a module or can be created to display whatever you want, and th...
User Permissions<br />This is where settings are configured to determine which things different user types have access to....
Site Template<br />This is made up predominately of XHTML and CSS, with some PHP tokens sprinkled throughout to insert con...
When NOT to use Drupal<br />Only a blog? Use wordpress. Need a blog with extra features like ecommerce, galleries, user in...
When u NEED Drupal<br />Flexibility  - easily add cool extendable features.<br />Interaction with other sites.<br />Comple...
Security issues. <br />Security always depends on good maintenance.<br />Constantly update all modules and Drupal core to...
GPL<br />Incidentally, the GPL is not tied specifically to Drupal; rather Drupal makes use of the GPL, which is a kind of ...
Who’s using drupal?<br />http://appel.nasa.gov/	<br />http://www.whitehouse.gov/<br />http://www.economist.com/<br />http:...
Upcoming SlideShare
Loading in...5
×

1 Introduction to Drupal Web Development

5,453

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,453
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "1 Introduction to Drupal Web Development"

  1. 1. Drupal Webdesignmade easy<br />Wilson Wingston Sharon<br />wingston.sharon@gmail.com<br />
  2. 2. To retrieve files, connect to “Workshop India” Adhocwifi network.<br />Look for <br />Adraze<br />The reqiured file will be in the public folder.<br />Copy to desktop.<br />Adraze/users/public/drupal workshop<br />
  3. 3. welcome<br />Introduction to www architecture.<br />Technology stack.<br />HTML/CSS<br />PHP/MySQL<br />Drupal fundamentals<br />Open source technology<br />
  4. 4. The World Wide Web<br />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.<br />URL<br />HTTP<br />HTML<br />1993 – Mosaic browser <br />Evolved from the need to provide a uniform method of content transfer and cataloguing over the internet.<br />
  5. 5. The Address of a webpage<br />Host name. can be anything. Even NULL. Usually represents sub domain of main site.<br />http://www.my-website.com?q=login#middle<br />Portion of site to show first<br />Not sent to server. Handled by browser<br />Communication protocol used<br />ftp:// - files<br />Smtp:// - mail<br />Web site name. DNS lookup will give IP address<br />Query passed to web server for side server procsessing<br />
  6. 6. Technology Stack<br />Server - A server is a computer which provides information or services to other computers on a network. <br />Operating system- The software that runs the server. Unix, Linux, BSD, OS X and Windows are some examples. <br />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. <br />Web server- The software component responsible for serving web pages. Examples are Apache and Microsoft IIS. <br />PHP - PHP is a programming language that allows web developers to create dynamic content that interacts with databases. <br />Drupal - A framework for building dynamic web sites offering a broad range of features and services.<br />
  7. 7. Client Server Model – HTTP model<br />Server<br />1. Browser sends request for particular HTTP file<br />Client<br />2. HTML file on disk sent to browser directly<br />
  8. 8. Client Server Model – CGI model<br />Server<br />2. Server finds and calls required CGI application.<br />Client<br />1. Browser sends request for particular HTTP file<br />4. Server sends formatted HTML back to browser<br />CGI application<br />3.After execution CGI app sends result to server. <br />
  9. 9. Client Server Model – Side server scripting <br />Server<br />2. Server reads scripts embedded & executes them.<br />Client<br />1. Browser sends request for particular HTTP file with scripts embedded in it.<br />4. Server sends formatted HTML back to browser<br />Database<br />3. Database for storage & retrieval of data as defined in script.<br />
  10. 10. Developing for the web<br />
  11. 11. 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<br />Web 2.0<br />The term "Web 2.0" was coined in 1999. Darcy DiNucci in her article "Fragmented Future,"<br />
  12. 12.
  13. 13. Web 2.0 Fundae<br />
  14. 14. Web Technologies – client side<br />
  15. 15. Web Technologies – client side<br />
  16. 16. Web Technologies – Server side<br />
  17. 17. Web Technologies - Databases<br />
  18. 18. Web application frameworks<br />
  19. 19. Choosing the Right Tools<br />Understanding your needs.<br />Understanding the capabilities and limitations of various technologies.<br />Implementation. []<br />
  20. 20. My Favorites<br />Django - high-level Python Web framework that encourages rapid development and clean, pragmatic design. Mostly for “high powered” applications.<br />Drupal - free and open source Content Management System (CMS) written in PHP<br /> C# .net – too cool IDE and MSDN help references. Best for C users who don’t want to bother with PHP or python.<br />
  21. 21. About Drupal.<br />More CMF than CMS<br />Balance between “specific tasks” and “ manageable abstraction”<br />Generalized approach to core systems that allow you to tweak as much as possible for clever customized site functions.<br />Programming on a need-to-do basis only.<br />Time investment needed.<br />
  22. 22. Drupal – languages used<br />HTML – basics of any web framework.<br />PHP – the code base of drupal<br />SQL – database management routines<br />CSS – theming the looks<br />
  23. 23. HTML<br />born from desire to separate structure from presentation. [SGML]<br /><tag open> </tag close> ; anything in these tags are commands to browser.<br />At its core, HTML is just text linking to other text.<br />
  24. 24. Document type definition<br /><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><br />The document’s top tag level is HTML.<br />The document adheres to the formal public identifier (FPI) “W3C HTML 4.01 Strict English” standards<br />The full DTD can be found at the URL http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.<br />
  25. 25. Overall structure<br /><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”<br />“http://www.w3.org/TR/html4/strict.dtd”><br /><html><br /><head><br /><meta ... meta tags go here ... ><br /><title>title of the page/document goes here</title><br /><LINK rel=“stylesheet” href=“external style sheet name”<br />type=“text/css”><br /><style><br />... any document specific styles go here ...<br /></style><br />
  26. 26. Overall structure<br /><script><br />... client-side scripts go here ...<br /></script><br /></head><br /><body><br />... body of document goes here, paragraphs modified by<br />block elements, characters, words and sentences modified by<br />in line elements ...<br /></body><br /></html><br />
  27. 27. Basic elements<br />
  28. 28. Styles<br /><html><br /><head><br /><style><br />.redline { color:red; text-decoration:line-through; }<br /></style><br /></head><br /><body><br /><h1>An Example of style usage</h1><br /><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><br /></p><br /></body><br /></html><br />
  29. 29. In main HTML page<br /><html><br /><head><br /><LINK rel=“stylesheet” href=“site-styles.css” type=“text/css”><br /></head><br /><body> ...<br />In site-styles.css<br />.redline <br />{ color:red; <br /> text-decoration:line-through; <br />}<br />
  30. 30. Linking<br /><a href=“http://www.linkhere.com”> click here</a><br />Links to external site<br /><a href=“#jmp2”> jump here</a><br /><a name = “jmp2”> jump space 2</a><br />Links to Internal Bookmark<br />
  31. 31. Things to remember<br />Use <!doctype><br />Nest element tags properly.<br /><p>The last word is <b>bold</b></p><br />Tags are case sensitive<br />All elements must be terminated<br /><ul><li>This is one paragraph<p>This is another paragraph<p>
  32. 32. <p>This is one paragraph</p><p>This is another paragraph</p></li></ul>Any empty tag must have a closing tag or the opening tag must end with a slash (/). <br /><br /><br />Comment code<br /></table> <!-- /Top heading --><br /></table> <!-- /Main body --><br /></table> <!-- /Floating page --><br />
  33. 33. PHP<br />Hypertext preprocessor<br />Awesome language with its fundamentals in C<br />Most common language for web applications. [facebook, amazon, youtube.]<br />PHP Code is embedded within HTML code by <?php> </php><br />Secure, customizable, operating sys independent.<br />
  34. 34. Web Server Processing of PHP<br /> The Web server starts scanning the file in<br />HTML mode. It assumes the statements are<br />HTML and sends them to the browser without<br />any processing.<br />The Web server continues in HTML mode<br />until it encounters a PHP opening tag<br />(<?php).<br />When it encounters a PHP opening tag, the<br />Web server switches to PHP mode. This is<br />sometimes called escaping from HTML.<br />
  35. 35. The Web server then assumes that all statements<br />are PHP statements and executes<br />the PHP statements. If there is output, the<br />output is sent by the server to the browser.<br />The Web server continues in PHP mode<br />until it encounters a PHP closing tag (?>).<br />When the Web server encounters a PHP<br />closing tag, it returns to HTML mode. It<br />resumes scanning, and the cycle continues<br />from Step 1.<br />
  36. 36. How PHP works.<br /><?php echo “<p>Hello World”; ?><br />PHP code in original HTML document<br /><p>Hello World<br />What is sent to browser<br />$number = 2;<br />$number = 2+1;<br />$number = (2 - 1) * (4 * 5) -17;<br />$number2 = $number + 3;<br />$string = “Hello World”;<br />$string2 = $string.” again!”;<br />Sample PHP<br />
  37. 37. <html><br /><head><title>Hello World Program</title></head><br /><body><br /><?php<br />echo “<p>Hello World!”<br />?><br /></body><br /></html><br /><html><br /><head><title>Hello World Program</title></head><br /><body><br /><p>Hello World!<br /></body><br /></html><br />
  38. 38. PHP code for table from 2D array<br />echo “<table border=1>”;<br />foreach( $productPrices as $category )<br />{<br />foreach( $category as $product => $price )<br /> {<br /> $f_price = sprintf(“%01.2f”, $price);<br /> echo “<tr><td>$product:</td><br /> <td>$$f_price</td></tr>”;<br /> }<br />}<br />echo “</table>”;<br />
  39. 39. Integration of RDMBS<br />
  40. 40. MySQL<br />SELECT (lastName,firstName FROM Member<br />WHERE lastName LIKE “B%”<br />AND city = “Chennai”<br />AND (phone LIKE “%8%” OR fax LIKE “%8%”)<br />
  41. 41. Understanding Drupal<br />
  42. 42. Nodes<br />Nodes are the data pool. Everything is a node in drupal.<br />Nodes are just pieces of content – page, story, image, text, poll, comment, etc etc<br />Most basic “token” of drupal.<br />
  43. 43. Modules<br />Modules 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.<br />Easily create your own modules for small tasks.<br />Drupalmodules.org<br />
  44. 44. Blocks and Menus<br />Blocks 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.<br />Highly configurable output control.<br />
  45. 45. User Permissions<br />This is where settings are configured to determine which things different user types have access to. <br />Permissions are assigned to various roles, and in turn, users are associated with those various roles in order to grant them the associated permissions.<br />
  46. 46. Site Template<br />This is made up predominately of XHTML and CSS, with some PHP tokens sprinkled throughout to insert content from the system into the correct spots<br />Overridable theme functions to give complete control for how modules generate markup [HTML].<br />
  47. 47. When NOT to use Drupal<br />Only a blog? Use wordpress. Need a blog with extra features like ecommerce, galleries, user interaction – go Drupal.<br />Only a wiki? Use mediawiki.<br />Only a Forum? Use phpBB.<br />
  48. 48. When u NEED Drupal<br />Flexibility - easily add cool extendable features.<br />Interaction with other sites.<br />Complex forms or workflows.<br />Organize and display lists of information on a per-user basis.<br />Custom functionality.<br />
  49. 49. Security issues. <br />Security always depends on good maintenance.<br />Constantly update all modules and Drupal core to highest release version.<br />Subscribe to Drupal Security mailing list. It actually helps.<br />
  50. 50. GPL<br />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<br />The way things work is that the software is copyrighted, and then licensed, for everyone to use freely.<br />anyone who makes use of this software cannot create proprietary software from it.<br />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.<br />
  51. 51. Who’s using drupal?<br />http://appel.nasa.gov/ <br />http://www.whitehouse.gov/<br />http://www.economist.com/<br />http://www.grammy.com/<br />http://harvardscience.harvard.edu/<br />http://ubuntu.com/<br />http://spreadfirefox.com/<br />http://liptongreenmint.ro/<br />http://nikemedia.com/<br />
  52. 52. Who’s using drupal?<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×