1 Introduction to Drupal Web Development
Transcript of 1 Introduction to Drupal Web Development
![Page 1: 1 Introduction to Drupal Web Development](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/1.jpg)
Drupal Webdesign made easyWilson Wingston [email protected]
![Page 2: 1 Introduction to Drupal Web Development](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/2.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/3.jpg)
welcomeIntroduction to www architecture.Technology stack.HTML/CSSPHP/MySQL
Drupal fundamentalsOpen source technology
![Page 4: 1 Introduction to Drupal Web Development](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/4.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/5.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/6.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/7.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/8.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/9.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/10.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/11.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/12.jpg)
![Page 13: 1 Introduction to Drupal Web Development](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/13.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/14.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/15.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/16.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/17.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/18.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/19.jpg)
Choosing the Right Tools
Understanding your needs.
Understanding the capabilities and limitations of various technologies.
Implementation. []
![Page 20: 1 Introduction to Drupal Web Development](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/20.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/21.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/22.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/23.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/24.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/25.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/26.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/27.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/28.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/29.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/30.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/31.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/32.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/33.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/34.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/35.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/36.jpg)
<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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/37.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/38.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/39.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/40.jpg)
Understanding Drupal
5) Template
4) User Permissions
3) Blocks and Menu’s
2) Modules
1) Nodes
![Page 41: 1 Introduction to Drupal Web Development](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/41.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/42.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/43.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/44.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/45.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/46.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/47.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/48.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/49.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/50.jpg)
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](https://reader038.fdocuments.us/reader038/viewer/2022110119/555a041fd8b42ad00a8b513e/html5/thumbnails/51.jpg)
Who’s using drupal?