SlideShare a Scribd company logo
1 of 51
Drupal Webdesignmade easy Wilson Wingston Sharon wingston.sharon@gmail.com
To retrieve files, connect to “Workshop India” Adhocwifi network. Look for  Adraze The reqiured file will be in the public folder. Copy to desktop. Adraze/users/public/drupal workshop
welcome Introduction to www architecture. Technology stack. HTML/CSS PHP/MySQL Drupal fundamentals Open source technology
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.
The Address of a webpage Host name. can be anything. Even NULL. Usually represents sub domain of main site. http://www.my-website.com?q=login#middle Portion of site to show first Not sent to server. Handled by browser Communication protocol used ftp:// - files Smtp:// - mail Web site name. DNS lookup will give IP address Query passed to web server for side server procsessing
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.
Client Server Model – HTTP model Server 1. Browser sends request for particular HTTP file Client 2. HTML file on disk sent to browser  directly
Client Server Model – CGI model Server 2. Server finds and calls required CGI application. Client 1. Browser sends request for particular HTTP file 4. Server sends formatted HTML back to browser CGI application 3.After execution CGI app sends result to server.
Client Server Model – Side server scripting  Server 2. Server reads scripts embedded & executes them. Client 1. Browser sends request for particular HTTP file with scripts embedded in it. 4. Server sends formatted HTML back to browser Database 3. Database for storage & retrieval of data as defined in script.
Developing for the web
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.0 The term "Web 2.0" was coined in 1999. Darcy DiNucci in her article "Fragmented Future,"
Web 2.0 Fundae
Web Technologies – client side
Web Technologies – client side
Web Technologies – Server side
Web Technologies - Databases
Web application frameworks
Choosing the Right Tools Understanding your needs. Understanding the capabilities and limitations of various technologies. Implementation. []
My Favorites Django - 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 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.
Drupal – languages used HTML – basics of any web framework. PHP – the code base of drupal SQL – database management routines CSS – theming the looks
HTML born 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” standards The 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 by block elements, characters, words and sentences modified by in line elements ... </body> </html>
Basic elements
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 remember Use <!doctype> Nest element tags properly. <p>The last word is <b>bold</b></p> Tags are case sensitive All elements must be terminated ,[object Object]
<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 -->
PHP Hypertext preprocessor Awesome language with its fundamentals in C Most 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 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.
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.
How PHP works. <?php echo “<p>Hello World”; ?> PHP code in original HTML document <p>Hello World 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
<html> <head><title>Hello World Program</title></head> <body> <?php echo “<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 array echo “<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>”;
Integration of RDMBS
MySQL SELECT (lastName,firstName FROM Member WHERE lastName LIKE “B%” AND city = “Chennai” AND (phone LIKE “%8%” OR fax LIKE “%8%”)
Understanding Drupal
Nodes Nodes 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.
Modules 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. Easily create your own modules for small tasks. Drupalmodules.org
Blocks and Menus 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. Highly configurable output control.
User Permissions This 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 Template 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 Overridable theme functions to give complete control for how modules generate markup [HTML].
When NOT to use Drupal Only 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 Drupal Flexibility  - 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.
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.
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/

More Related Content

What's hot

Web Development From the Ground Up, a Series for Novice ...
Web Development From the Ground Up, a Series for Novice ...Web Development From the Ground Up, a Series for Novice ...
Web Development From the Ground Up, a Series for Novice ...webhostingguy
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULEmar jun
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5Derek Bender
 
Industrial training report
Industrial training report Industrial training report
Industrial training report Akash Kr Sinha
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohanballychohanuk
 
Hyper text markup Language
Hyper text markup LanguageHyper text markup Language
Hyper text markup LanguageNaveeth Babu
 
internet programming and java notes 5th sem mca
internet programming and java notes 5th sem mcainternet programming and java notes 5th sem mca
internet programming and java notes 5th sem mcaRenu Thakur
 
Demystifying SEO & Modern KPI Reporting
Demystifying SEO & Modern KPI ReportingDemystifying SEO & Modern KPI Reporting
Demystifying SEO & Modern KPI ReportingRob Bertholf
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1Mohammed Hussein
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSTimo Herttua
 
The Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for BeginnersThe Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for BeginnersRasin Bekkevold
 
Web 2.0 Lessonplan Day1
Web 2.0 Lessonplan Day1Web 2.0 Lessonplan Day1
Web 2.0 Lessonplan Day1Jesse Thomas
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsNikita Garg
 

What's hot (20)

Web Development From the Ground Up, a Series for Novice ...
Web Development From the Ground Up, a Series for Novice ...Web Development From the Ground Up, a Series for Novice ...
Web Development From the Ground Up, a Series for Novice ...
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULE
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
 
Industrial training report
Industrial training report Industrial training report
Industrial training report
 
Fccwc326
Fccwc326Fccwc326
Fccwc326
 
HTML practical file
HTML practical fileHTML practical file
HTML practical file
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Hyper text markup Language
Hyper text markup LanguageHyper text markup Language
Hyper text markup Language
 
internet programming and java notes 5th sem mca
internet programming and java notes 5th sem mcainternet programming and java notes 5th sem mca
internet programming and java notes 5th sem mca
 
Demystifying SEO & Modern KPI Reporting
Demystifying SEO & Modern KPI ReportingDemystifying SEO & Modern KPI Reporting
Demystifying SEO & Modern KPI Reporting
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
The Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for BeginnersThe Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for Beginners
 
lect9
lect9lect9
lect9
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
Web page concept final ppt
Web page concept  final pptWeb page concept  final ppt
Web page concept final ppt
 
Session4
Session4Session4
Session4
 
Web 2.0 Lessonplan Day1
Web 2.0 Lessonplan Day1Web 2.0 Lessonplan Day1
Web 2.0 Lessonplan Day1
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 

Similar to 1 Introduction to Drupal Web Development

Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2hussain534
 
Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Tirthesh Ganatra
 
Web Development in Perl
Web Development in PerlWeb Development in Perl
Web Development in PerlNaveen Gupta
 
Web engineering 2(lect 2)
Web engineering 2(lect 2)Web engineering 2(lect 2)
Web engineering 2(lect 2)Roohul Amin
 
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1Gene Babon
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websiteswebsiteunlimited
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentRandy Connolly
 

Similar to 1 Introduction to Drupal Web Development (20)

HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
 
Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2
 
Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)
 
Web Development in Perl
Web Development in PerlWeb Development in Perl
Web Development in Perl
 
Web engineering 2(lect 2)
Web engineering 2(lect 2)Web engineering 2(lect 2)
Web engineering 2(lect 2)
 
Php intro
Php introPhp intro
Php intro
 
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
 
Web Programming introduction
Web Programming introductionWeb Programming introduction
Web Programming introduction
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websites
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 

More from Wingston

OpenCV @ Droidcon 2012
OpenCV @ Droidcon 2012OpenCV @ Droidcon 2012
OpenCV @ Droidcon 2012Wingston
 
05 content providers - Android
05   content providers - Android05   content providers - Android
05 content providers - AndroidWingston
 
04 activities - Android
04   activities - Android04   activities - Android
04 activities - AndroidWingston
 
03 layouts & ui design - Android
03   layouts & ui design - Android03   layouts & ui design - Android
03 layouts & ui design - AndroidWingston
 
02 hello world - Android
02   hello world - Android02   hello world - Android
02 hello world - AndroidWingston
 
01 introduction & setup - Android
01   introduction & setup - Android01   introduction & setup - Android
01 introduction & setup - AndroidWingston
 
OpenCV with android
OpenCV with androidOpenCV with android
OpenCV with androidWingston
 
C game programming - SDL
C game programming - SDLC game programming - SDL
C game programming - SDLWingston
 
C programming - Pointers
C programming - PointersC programming - Pointers
C programming - PointersWingston
 
Introduction to Basic C programming 02
Introduction to Basic C programming 02Introduction to Basic C programming 02
Introduction to Basic C programming 02Wingston
 
Introduction to Basic C programming 01
Introduction to Basic C programming 01Introduction to Basic C programming 01
Introduction to Basic C programming 01Wingston
 
Linux – an introduction
Linux – an introductionLinux – an introduction
Linux – an introductionWingston
 
Embedded linux
Embedded linuxEmbedded linux
Embedded linuxWingston
 
04 Arduino Peripheral Interfacing
04   Arduino Peripheral Interfacing04   Arduino Peripheral Interfacing
04 Arduino Peripheral InterfacingWingston
 
03 analogue anrduino fundamentals
03   analogue anrduino fundamentals03   analogue anrduino fundamentals
03 analogue anrduino fundamentalsWingston
 
02 General Purpose Input - Output on the Arduino
02   General Purpose Input -  Output on the Arduino02   General Purpose Input -  Output on the Arduino
02 General Purpose Input - Output on the ArduinoWingston
 
Introduction to the Arduino
Introduction to the ArduinoIntroduction to the Arduino
Introduction to the ArduinoWingston
 
4.content mgmt
4.content mgmt4.content mgmt
4.content mgmtWingston
 
8 Web Practices for Drupal
8  Web Practices for Drupal8  Web Practices for Drupal
8 Web Practices for DrupalWingston
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in DrupalWingston
 

More from Wingston (20)

OpenCV @ Droidcon 2012
OpenCV @ Droidcon 2012OpenCV @ Droidcon 2012
OpenCV @ Droidcon 2012
 
05 content providers - Android
05   content providers - Android05   content providers - Android
05 content providers - Android
 
04 activities - Android
04   activities - Android04   activities - Android
04 activities - Android
 
03 layouts & ui design - Android
03   layouts & ui design - Android03   layouts & ui design - Android
03 layouts & ui design - Android
 
02 hello world - Android
02   hello world - Android02   hello world - Android
02 hello world - Android
 
01 introduction & setup - Android
01   introduction & setup - Android01   introduction & setup - Android
01 introduction & setup - Android
 
OpenCV with android
OpenCV with androidOpenCV with android
OpenCV with android
 
C game programming - SDL
C game programming - SDLC game programming - SDL
C game programming - SDL
 
C programming - Pointers
C programming - PointersC programming - Pointers
C programming - Pointers
 
Introduction to Basic C programming 02
Introduction to Basic C programming 02Introduction to Basic C programming 02
Introduction to Basic C programming 02
 
Introduction to Basic C programming 01
Introduction to Basic C programming 01Introduction to Basic C programming 01
Introduction to Basic C programming 01
 
Linux – an introduction
Linux – an introductionLinux – an introduction
Linux – an introduction
 
Embedded linux
Embedded linuxEmbedded linux
Embedded linux
 
04 Arduino Peripheral Interfacing
04   Arduino Peripheral Interfacing04   Arduino Peripheral Interfacing
04 Arduino Peripheral Interfacing
 
03 analogue anrduino fundamentals
03   analogue anrduino fundamentals03   analogue anrduino fundamentals
03 analogue anrduino fundamentals
 
02 General Purpose Input - Output on the Arduino
02   General Purpose Input -  Output on the Arduino02   General Purpose Input -  Output on the Arduino
02 General Purpose Input - Output on the Arduino
 
Introduction to the Arduino
Introduction to the ArduinoIntroduction to the Arduino
Introduction to the Arduino
 
4.content mgmt
4.content mgmt4.content mgmt
4.content mgmt
 
8 Web Practices for Drupal
8  Web Practices for Drupal8  Web Practices for Drupal
8 Web Practices for Drupal
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
 

1 Introduction to Drupal Web Development

  • 1. Drupal Webdesignmade easy Wilson Wingston Sharon wingston.sharon@gmail.com
  • 2. To retrieve files, connect to “Workshop India” Adhocwifi network. Look for Adraze The reqiured file will be in the public folder. Copy to desktop. Adraze/users/public/drupal workshop
  • 3. welcome Introduction to www architecture. Technology stack. HTML/CSS PHP/MySQL Drupal fundamentals Open source technology
  • 4. 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.
  • 5. The Address of a webpage Host name. can be anything. Even NULL. Usually represents sub domain of main site. http://www.my-website.com?q=login#middle Portion of site to show first Not sent to server. Handled by browser Communication protocol used ftp:// - files Smtp:// - mail Web site name. DNS lookup will give IP address Query passed to web server for side server procsessing
  • 6. 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.
  • 7. Client Server Model – HTTP model Server 1. Browser sends request for particular HTTP file Client 2. HTML file on disk sent to browser directly
  • 8. Client Server Model – CGI model Server 2. Server finds and calls required CGI application. Client 1. Browser sends request for particular HTTP file 4. Server sends formatted HTML back to browser CGI application 3.After execution CGI app sends result to server.
  • 9. Client Server Model – Side server scripting Server 2. Server reads scripts embedded & executes them. Client 1. Browser sends request for particular HTTP file with scripts embedded in it. 4. Server sends formatted HTML back to browser Database 3. Database for storage & retrieval of data as defined in script.
  • 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 Web 2.0 The term "Web 2.0" was coined in 1999. Darcy DiNucci in her article "Fragmented Future,"
  • 12.
  • 14. Web Technologies – client side
  • 15. Web Technologies – client side
  • 16. Web Technologies – Server side
  • 17. Web Technologies - Databases
  • 19. Choosing the Right Tools Understanding your needs. Understanding the capabilities and limitations of various technologies. Implementation. []
  • 20. My Favorites Django - 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.
  • 21. 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.
  • 22. Drupal – languages used HTML – basics of any web framework. PHP – the code base of drupal SQL – database management routines CSS – theming the looks
  • 23. HTML born 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.
  • 24. 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.
  • 25. 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>
  • 26. 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>
  • 28. 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>
  • 29. 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; }
  • 30. 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
  • 31.
  • 32. <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 -->
  • 33. PHP Hypertext preprocessor Awesome language with its fundamentals in C Most common language for web applications. [facebook, amazon, youtube.] PHP Code is embedded within HTML code by <?php> </php> Secure, customizable, operating sys independent.
  • 34. 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.
  • 35. 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.
  • 36. How PHP works. <?php echo “<p>Hello World”; ?> PHP code in original HTML document <p>Hello World 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
  • 37. <html> <head><title>Hello World Program</title></head> <body> <?php echo “<p>Hello World!” ?> </body> </html> <html> <head><title>Hello World Program</title></head> <body> <p>Hello World! </body> </html>
  • 38. PHP code for table from 2D array echo “<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>”;
  • 40. MySQL SELECT (lastName,firstName FROM Member WHERE lastName LIKE “B%” AND city = “Chennai” AND (phone LIKE “%8%” OR fax LIKE “%8%”)
  • 42. Nodes Nodes 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.
  • 43. Modules 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. Easily create your own modules for small tasks. Drupalmodules.org
  • 44. Blocks and Menus 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. Highly configurable output control.
  • 45. User Permissions This 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.
  • 46. Site Template 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 Overridable theme functions to give complete control for how modules generate markup [HTML].
  • 47. When NOT to use Drupal Only 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.
  • 48. When u NEED Drupal Flexibility - 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.
  • 49. 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.
  • 50. 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.
  • 51. 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/