Documente Academic
Documente Profesional
Documente Cultură
RIAZAHMED
TheWebBookBuildStatic&DynamicWebsites
Copyright2013RiazAhmed
Allrightsreserved.
ISBN13:9781483929279
ISBN10:1483929272
Nopartofthispublicationmaybereproduced,storedinaretrievalsystemortransmitted
inanyformorbyanymeans,electronic,mechanical,photocopying,recording,scanningor
otherwise, except as permitted under Sections 107 or 108 of the 1976 United States
CopyrightAct,withoutthepriorwrittenpermissionoftheAuthor.
Trademarks:Alltrademarksarethepropertyoftheirrespectiveowners.Theauthorisnot
associatedwithanyproductorvendormentionedinthisbook.
Dedication
I dedicate this book to the two greatest personalities in my life - my parents - who taught me
two brilliant arts: reading and writing.
CONTENTS
Preface...............................................................................................................i
Chapter1TheWorldWideWebAnIntroduction...........................................1
1.1TheInternetandtheWorldWideWeb............................................................................2
1.1.1IsWebandInternetthesame?............................................................................................2
1.1.2WhatisInternetBackbone?.................................................................................................2
1.1.3WhoisInternetServiceProvider?........................................................................................2
1.1.4TypesofInternetConnections.............................................................................................3
1.1.5SecurityConsideration..........................................................................................................3
1.1.6TheWorldWideWeb...........................................................................................................3
1.1.7WhataWebpageis?.............................................................................................................4
1.1.8WhatisaWebsite?...............................................................................................................4
1.1.9WhatisaWebServer?.........................................................................................................4
1.1.10WhatisaWebBrowser?....................................................................................................5
1.1.11WhatareHyperlinks?.........................................................................................................5
1.1.12WhatisaWebAddressorURL?.........................................................................................6
1.1.13WhatisaSearchEngine?....................................................................................................6
1.1.14HowdoSearchEngineswork?...........................................................................................7
1.1.15WhatareWeblogsorBlogs?..............................................................................................8
1.1.16WhatisaWebPortal?........................................................................................................8
1.1.17WhatisWebSyndication?..................................................................................................8
1.1.18WhatisEcommerce?.........................................................................................................9
1.2LaunchaWebsite...........................................................................................................10
1.3ChoosingtherightHostingCompany..............................................................................10
1.3.1StorageSpace.....................................................................................................................11
1.3.2Bandwidth...........................................................................................................................11
1.3.3DomainName.....................................................................................................................11
1.4WhatEmailisandhowitworks?..................................................................................12
CONTENT
1.5ScriptingLanguages........................................................................................................13
1.5.1Clientsidescripting............................................................................................................13
1.5.2Serversidescripting...........................................................................................................14
1.5.3Clientvs.Serversidescripting............................................................................................15
Chapter2HypertextMarkupLanguage(HTML)............................................17
2.1AboutMarkupLanguages................................................................................................18
2.2YourFirstHTMLWebPage.............................................................................................20
2.3ElementsinHTML...........................................................................................................21
2.4AttributesinHTML.........................................................................................................23
2.5HeadingsinHTML...........................................................................................................24
2.6ParagraphsinHTML........................................................................................................26
2.7LinesandLineBreaksinHTML.......................................................................................27
2.8CommentsinHTML........................................................................................................28
2.9FormattingTextinHTML................................................................................................29
2.10WhiteSpaceinHTML....................................................................................................30
2.11Abbreviation&Acronyms............................................................................................32
2.12LongandShortQuotationsinHTML............................................................................33
2.13WebLinksinHTML.......................................................................................................34
2.14EmailLinksinHTML.....................................................................................................35
2.15BookmarkinginHTML..................................................................................................36
2.16ImagesinHTML............................................................................................................38
2.17ListsinHTML.................................................................................................................40
2.18TablesinHTML.............................................................................................................42
2.19Divisions/SectionsinHTML..........................................................................................44
2.20FormsinHTML..............................................................................................................46
2.21TextandPasswordElements........................................................................................48
2.22TextAreaElement........................................................................................................49
2.23RadioButton.................................................................................................................50
2.24CheckBox......................................................................................................................51
2.25DropdownListBox.........................................................................................................52
2.26SubmitButton...............................................................................................................54
vi
CONTENT
2.27ButtonElement............................................................................................................56
2.28FileInputElement........................................................................................................56
2.29GroupingFormElements.............................................................................................57
2.30iFramesinHTML..........................................................................................................58
2.31WhatsnewinHTML5..................................................................................................59
2.31.1Calendar........................................................................................................................60
2.31.2FormValidation.............................................................................................................61
2.31.3AddSearchBoxtoaWebpage.....................................................................................62
2.31.4PlayVideosonaWebpage...........................................................................................63
2.31.5NewHTML5Layout.......................................................................................................64
Chapter3CascadingStyleSheets(CSS).........................................................65
3.1AboutCSS.......................................................................................................................66
3.2CSSBenefits....................................................................................................................67
3.3WhatisCSS3?.................................................................................................................67
3.4CSSRulesandSyntax......................................................................................................68
3.5CreatingStyleSheets(External/Internal).......................................................................69
3.6UnderstandtheCascade................................................................................................70
3.7CSSIDandClass...............................................................................................................72
3.8CommentsinCSS............................................................................................................74
3.9CSSColorProperty..........................................................................................................74
3.10CSSFont........................................................................................................................76
3.11CSSText........................................................................................................................77
3.12StyleLinksandPseudoClasses....................................................................................78
3.13StylingLists...................................................................................................................80
3.14StylingTables................................................................................................................84
3.15UnderstandingtheBoxModel.....................................................................................86
3.16ControlElementPositioning.........................................................................................88
3.17FloatingElements.........................................................................................................94
3.18Navigation.....................................................................................................................98
3.19OpacityandTransparency............................................................................................99
vii
CONTENT
3.20CSS3Borders...............................................................................................................100
3.21CSS3Fonts...................................................................................................................101
3.22CSS3Animation...........................................................................................................102
Chapter4JavaScript....................................................................................105
4.1AboutJavaScript...........................................................................................................106
4.2CommentsinJavaScript................................................................................................108
4.3Fewpointstoremember..............................................................................................109
4.4UsingHTMLelementsinJavaScript..............................................................................110
4.5VariablesinJavaScript..................................................................................................111
4.6TypesofVariables.........................................................................................................111
4.7AssignmentandArithmeticOperatorsinJavaScript....................................................113
4.8ComparisonOperatorsinJavaScript............................................................................114
4.9LogicalOperatorsinJavaScript.....................................................................................115
4.10ConditionalOperatorsinJavaScript...........................................................................116
4.11TheIFConditionalStatement.....................................................................................116
4.12TheSWITCHStatement..............................................................................................118
4.13AlertBox.....................................................................................................................120
4.14ConfirmBox.................................................................................................................121
4.15PromptBox.................................................................................................................122
4.16UsingFunctionsinJavaScript.....................................................................................123
4.17IterativeStatements...................................................................................................126
4.17.1FORLoop.....................................................................................................................126
4.17.2WHILELoop.................................................................................................................127
4.17.3DOWHILELoop.........................................................................................................128
4.18BreakandContinueStatements.................................................................................129
4.19ObjectsinJavaScript...................................................................................................130
4.19.1DeclaringanObject.....................................................................................................130
4.19.2AddPropertiestoObject.............................................................................................131
4.19.3WhyUseObjects.........................................................................................................131
4.19.4CreatingObjects&DefiningProperties......................................................................132
viii
CONTENT
4.19.5CreatingMethods........................................................................................................132
4.19.6CreatinganObjectsInstance......................................................................................133
4.19.7TestingObjects............................................................................................................134
4.20JavaScriptEvents........................................................................................................136
4.20.1CommonEvents..........................................................................................................137
4.21UsingJavaScriptswithHTMLForms...........................................................................138
4.21.1FormAttributes............................................................................................................138
4.21.2FormMethods.............................................................................................................138
4.21.3FormEvents.................................................................................................................138
4.21.4ReferringFormElements............................................................................................138
4.21.5ValidatingFormData...................................................................................................140
Chapter5PHPandMySQL...........................................................................143
5.1IntroductiontoPHP&MySQL......................................................................................144
5.2SetupEnvironmentforServerSideScripting.............................................................146
5.2.1InstallInternetInformationServices(IIS).........................................................................146
5.2.2AddDefaultDocumentstoIIS..........................................................................................147
5.2.3DownloadandConfigurePHP..........................................................................................148
5.2.4AddPHPDirectorytothePATHonWindows...................................................................150
5.2.5ConfigureIIStoprocessPHPrequest................................................................................151
5.2.6TestPHP............................................................................................................................152
5.2.7DownloadandInstallMySQLDatabase............................................................................152
5.2.8TestMySQL.......................................................................................................................153
5.3StructuredQueryLanguage(SQL)................................................................................154
5.4HandlingDatabase.......................................................................................................155
5.5MySQLDataTypes........................................................................................................156
5.6CreatingTables.............................................................................................................158
5.6.1AddingData......................................................................................................................159
5.6.2QueryingData...................................................................................................................160
5.6.3UpdatingData...................................................................................................................162
5.6.4RemovingData.................................................................................................................163
5.7PHP:HypertextPreprocessor.......................................................................................164
ix
CONTENT
5.8VariablesinPHP.............................................................................................................164
5.9ArraysinPHP................................................................................................................166
5.10PHPSessions................................................................................................................167
5.11CreatingaPHPFunction.............................................................................................168
5.12DealingwithForms.....................................................................................................170
5.12.1ConnecttoMySQLDatabaseandFetchRecords........................................................170
5.12.2InsertFormsDatainMySQLDatabase.......................................................................172
5.12.3UpdateFormsDatainMySQLDatabase....................................................................176
5.12.4DeleteFormsDatafromMySQLDatabase................................................................178
5.13PHPDataObjects(PDO).............................................................................................179
5.13.1ConnecttoMySQLDatabasethroughPDO.................................................................180
5.13.2ExecuteaSELECTStatement.......................................................................................181
5.13.3ExecuteanINSERTStatement.....................................................................................182
5.13.4ExecuteanUPDATEStatement...................................................................................183
5.13.5ExecuteaDELETEStatement......................................................................................183
5.14UsingFOREACHLoop..................................................................................................184
5.15INCLUDEandREQUIREStatements............................................................................186
5.16SendMailfromPHP....................................................................................................188
Step1:Download&SetupPEARCorePackage.....................................................................189
Step2:SetINCLUDEpathforPEAR........................................................................................189
Step3:UpdatePEARInstallation...........................................................................................190
Step4:ThePEARMailPackage..............................................................................................191
Step5:CreatePHPScripttoSendMail..................................................................................192
Chapter6WebsiteProject..........................................................................195
6.1ProjectIntroduction.....................................................................................................196
6.2WebsiteSecurity...........................................................................................................197
6.2.1Useasecureconnection..................................................................................................197
6.2.2WhatisSSLCertification...................................................................................................198
6.2.3UseAuthentication...........................................................................................................198
6.2.4EncryptingPassword........................................................................................................198
6.3BuildWebsitesStaticPages.........................................................................................199
x
CONTENT
6.4TheHomePage.............................................................................................................200
Step1:CreateablankHTMLpage............................................................................................208
Step2:Createmainwrapperandheaderelements.................................................................210
Step3:CreatemainNavigationbarandaddSearchBox..........................................................212
Step4:Createcontentsection..................................................................................................215
Step5:Createasidearea..........................................................................................................218
Step6:Createpagefooter........................................................................................................221
6.5TheCompanyPage.......................................................................................................222
Step1:Createheader,navigation,andfooter..........................................................................224
Step2:Createandstylemaincontent.....................................................................................226
Step3:Createlistofservices....................................................................................................228
Step4:CreateeventslistusingMarquee.................................................................................231
Step5:Createlatestnewssection............................................................................................232
6.6TheServicesPage.........................................................................................................234
6.7MaketheWebsiteDynamic.........................................................................................238
6.7.1TaskList............................................................................................................................239
6.7.2DirectoryStructure...........................................................................................................240
6.7.3AnatomyofControllerfile................................................................................................242
6.7.4DatabaseStructure...........................................................................................................244
6.8Task1ContactForm...................................................................................................245
Step1:Createdatabasetable...................................................................................................246
Step2:Createheader,navigation,contactform,andfooter...................................................246
Step3:Createasidesections....................................................................................................252
6.9Task2NewsletterSubscription..................................................................................255
Step1:CreatetableinMySQLdatabase...................................................................................255
Step2:CopyPHPfiles...............................................................................................................256
6.10ManageWebsiteDynamicallyAdminModules.......................................................261
6.11Task3AdminLoginModule.....................................................................................261
6.12Task4ManageCategories.......................................................................................276
6.13Task5ManageProducts..........................................................................................288
6.13.1Listingproductsonawebpagefromthedatabase....................................................289
6.13.2Viewproductdetails...................................................................................................296
6.13.3Deleteproduct............................................................................................................308
xi
CONTENT
6.13.4Updateproduct...........................................................................................................311
6.13.5ImageManager...........................................................................................................320
6.13.6AddProduct.................................................................................................................330
6.14Task6ManageOrders..............................................................................................332
6.14.1OrdersList...................................................................................................................334
6.14.2Orderinformation,confirmation,anddeletion..........................................................340
6.15Task7ManageAdminAccounts..............................................................................346
6.16PurchaseProductsOvertheInternetMemberModules.........................................356
6.17Task8MemberLoginModule..................................................................................357
6.18Task9MemberRegistrationModule.......................................................................362
6.19Task10PasswordResetModule..............................................................................372
6.20Task11MyAccountModule...................................................................................378
6.21Task12DisplayProductsCatalog.............................................................................382
6.22Task13ProductDetails...........................................................................................390
6.23Task14AddOnlineShoppingCart...........................................................................391
6.23.1Addproductstoshoppingcart....................................................................................394
6.23.2Updateproductintheshoppingcart..........................................................................401
6.24Task15CheckoutModule.......................................................................................402
6.24.1Orderconfirmation.....................................................................................................403
6.24.2PaymentInformation..................................................................................................408
6.25Task16WebsiteDeployment...................................................................................418
Step1:Hostingthewebsite...................................................................................................418
Step2:InstallFileZillaanduploadfiles..................................................................................420
Step3:Accesswebhostingcontrolpanel.............................................................................422
Step4:Createdatabaseandusers........................................................................................425
Setp5:Createdatabasetable................................................................................................428
Step6:InstallPEARpackage..................................................................................................428
Conclusion....................................................................................................429
AbouttheAuthor..........................................................................................430
Index............................................................................................................431
xii
Preface
During my programming career, I developed many desktop applications all with the help of a single tool.
With the advent of World Wide Web, I also dared to get my feet wet. But, to develop my first web
application I had to put on many hats like HTML, CSS, Client and Server-side scripting languages and
databases; scattered under individual titles. Just like my previous books, this one too shares my experience
with the world and teaches the above mentioned technologies under one umbrella. This book is neither a
comprehensive guide nor it can be treated as a manual on any of these comprehensive topics, but, it surely
lays a solid foundation that helps building both static and dynamic websites.
With uncountable sites and freely available material, I wrote this book due to the following reasons:
Assemble all scattered pieces in one place. This volume contains HTML/5, CSS/3, JavaScript, PHP and
MySQL. Sequential instructions are provided to download and install all the required software and
components to setup a complete development environment on your own pc.
Focus on inspiring practical aspect of these web technologies.
Last, but the most significant one - take the audience gradually right from creating an HTML file with
a text editor, through learning HTML, CSS, JavaScript, PHP and MySQL all the way to creating a
professional website.
It covers:
Definitions and exercises of various HTML/5, CSS/3, JavaScript, PHP & MySQL components.
The last part is the essence of this book where you will create a website for ABC Global Consulting a fictitious company. In this part, you will apply almost all the techniques you went through in the
book. The website project is divided into two parts: static and dynamic. In the static part, youll
create web pages that remain unchanged and deliver static content whenever they are accessed. In
contrast, the dynamic part will teach you how to create pages that access fresh content from a
database. This part comprises an E-Commerce module that allows visitors to purchase products
online, a Newsletter subscription module to subscribe to companys newsletters, and Contact Form
module which will be provided to interact with site visitors. The E-commerce application
development is divided into two major parts: Admin and Member interfaces. In the Admin part you
will undergo five tasks: Admin Login module, Manage Categories, Manage Products, Manager
Orders, and Manage Admin Accounts. The Member part comprises eight tasks: Member Login
module, Register New Member, Reset Password, My Account, Featured Products Catalog, Individual
Product Details, Shopping Cart, and Checkout (confirm order). After accomplishing all the above
tasks, youll be guided on how to deploy the project on a host server.
From web introduction to hands-on examples and from website designing to its deployment, this book
surely is a complete resource for those who know little or nothing about professional web development.
DownloadBookCodehttp://www.maqcon.com/test/download/TheWebBookCode.rar
Bloghttp://thewebbook.blogspot.com/2013/03/thewebbookbuildstaticdynamic.html
CHAPTER 1
THE WORLD WIDE WEB
AN INTRODUCTION
Chapter1TheWorldWideWebAnIntroduction
1.1
TheInternetisplayingavitalroleinourlivesandhasbecomeamainstayinpersonal,workand
educationfields.Itcanbedefinedasaglobalsystemofinterconnectedcomputernetworksthatserve
billionsofusersworldwide.Itconsistsofmillionsofpublic,private,business,academic,andgovernment
networksthatarelinkedbyawiderangeofelectronic,wireless,andopticalnetworktechnologies.It
providesahugeinformationresourcesuchastheinterlinkedhypertextdocumentsoftheWorldWide
Web(WWW)andrendersinfrastructuresupportserviceforelectronicmails(Emails).Itenablesyouto
readthelatestnews,todoresearch,toshop,tocommunicate,tolistentomusic,toplaygames,andto
accessawidevarietyofinformation.Ithasprovidednewmeansofhumaninteractionsthrough
messaging,forums,andsocialnetworkingandhasboomedbusinessesthroughonlineshopping.
1.1.1IsWeb&Internetthesame?
No.Thetwoarenotsynonymous.TheInternet
connectsmillionsofcomputerstogetherglobally
toformamassivenetworkinwhichthese
computerscancommunicatewitheachother.
TheWorldWideWeb,ontheotherhand,isa
systemofinterlinkedhypertextdocuments
accessedviatheInternet.Itisaninformation
sharingmodelthatisbuiltontopoftheInternet.
1.1.2WhatisInternetBackbone?
Acollectionoffiberopticcablesand
telephonelinesspreadallovertheworldform
theInternet'sbackbone.Datatravelsatthe
speedoflightalongthisbackboneenabling
youtoaccessdatawithinsecondsfromany
partoftheworld.
1.1.3WhoisInternetServiceProvider?
TheInternetcannotbeaccesseddirectly.
Instead,youhavetorentaconnectionfroman
InternetServiceProvider(ISP).AnISPisa
companythathasdirectaccesstotheInternet
backbone.You'reprovidedwithamodemor
wirelessrouterthatyouusetoconnecttoyour
ISP,whichthenconnectsyoutotheInternet.
TheWebBookBuildStatic&DynamicWebsites
1.1.4TypesofInternetConnections
DialupConnection:Inthepast,themostwidelyusedconnectiontoaccesstheInternetwasthrough
dialupmodems.Theseconnectionsprovideaspeedof28.8kilobitspersecondanddonotexceeda
speedof56kbit/sdownstream(towardstheenduser)and34or48kbit/supstream(towardthe
globalInternet).Althoughinexpensive,itistheslowestconnectionandpeopleare,therefore,
switchingovertootheravailableoptions.
BroadbandConnection:Thistechnologyuseswiresorfiberopticcables.Slightlymoreexpensivethan
dialup,broadbandconnectionsareextremelyfast.Theyprovideconnectionspeedof1toseveral
megabitspersecond.ISPsprovideahighspeedmodemtotheirsubscriberstoconnecttothe
Internet.Itcommonlyusesdigitalsubscriberline(DSL)telephoneservicefortheconnectionwhich
usesexisting2wirecoppertelephonelineconnectedtothepremisesoserviceisdelivered
simultaneouslywithwiredtelephoneservice(itdoesnttieupyourphonelineasananalogdialup
connectiondoes).ThetwomaincategoriesofDSLarecalledADSLandSDSL.Thedatathroughputof
consumerDSLservicestypicallyrangesfrom256kbit/sto20Mbit/sinthedirectiontothecustomer
(downstream),dependingonDSLtechnology,lineconditions,andservicelevelimplementation.VDSL
orVHDSL(veryhighbitratedigitalsubscriberline)isaDSLstandardthatprovidesdataratesupto52
Mbit/sdownstreamand16Mbit/supstreamovercopperwiresandupto85Mbit/sdownand
upstreamoncoaxialcable.VDSL2isanenhancedsecondgenerationversionofVDSL.Itisableto
providedataratesexceeding100Mbit/ssimultaneouslyinboththeupstreamanddownstream
directions.CablebroadbandinternetisanotherconnectionthatisdesignedtooperateovercableTV
lines.BecausethecoaxialcableusedbycableTVprovidesmuchgreaterbandwidththantelephone
lines,acableconnectioncanbeusedtoachieveextremelyfastaccess.
Wirelessbroadband:WirelessInternetorwirelessbroadbandisoneofthenewestInternet
connectiontypesthatprovidehighspeedwirelessInternetaccessorcomputernetworkingaccess.
InsteadofusingtelephoneorcablenetworksforInternetconnection,itusesradiofrequencybands.
WirelessInternetcanbeaccessedfromanywhereaslongasyourewithinageographically
networkcoveragearea.ItincludesWiFi,WiMAX,Satellitebroadband,andMobilebroadband.
1.1.5SecurityConsideration
AfterconnectingtotheInternet,itisvery
muchpossiblethatyourcomputergets
infectedthroughvirusesorothermalicious
attacks.Youmustdrawyourfirstlineof
defensebeforeconnectingtotheInternetby
settingWindowsFirewall.Turnthisoptionon
topreventintrudersfromaccessingyour
computerovertheInternet.
1.1.6TheWorldWideWeb
TheWorldWideWeb,orsimplytheWeb,isa
massivestorehouseofinformationthatresideson
computers,calledWebservers,locatedalloverthe
world.
Chapter1TheWorldWideWebAnIntroduction
1.1.7WhataWebPageis?
Thewebprovidesinformationonalmosteveryimaginabletopicthroughbillionsofwebpages.A
webpageisadocument,typicallywritteninplaintextwithformattinginstructionsofHypertext
MarkupLanguage(HTML,XHTML).WebpagesareaccessedandtransportedwiththeHypertext
TransferProtocol(HTTP),whichmayoptionallyemployencryption(HTTPSHTTPSecure)toprovide
securityandprivacyfortheuserofthewebpagecontent.Thepagesofawebsitecanusuallybe
accessedfromasimpleUniformResourceLocator(URL)calledthewebaddress.Whenyouseek
someinformation,itisreturnedbyawebserverthatholdsthatinformationtoyourcomputer
usingawebbrowser,suchasFirefoxorInternetExplorer.Awebpagecancarrytext,images,
sounds,andvideosonanysubject.
1.1.8WhatisaWebsite?
Awebsiteisasetofrelatedwebpages
associatedwithaparticularperson,business,
government,school,ororganizationcontaining
contentsuchastext,images,video,audio,etc.A
websiteishostedonatleastonewebserver,
accessibleviaanetworksuchastheInternetor
aprivatelocalareanetworkthroughanInternet
addressknownasaUniformResourceLocator
(URL).
1.1.9WhatisaWebServer?
Webservercaneitherbethehardware(the
powerfulcomputercapableofhandling
thousandsofsitevisitorsatatime)orthe
software(thecomputerapplication)thatdelivers
WebcontentthroughtheInternet.Itisthe
primaryfunctionofwebserverstodeliverHTML
documentsandothercontentsuchasimages,
stylesheetsandscriptsinshapeofwebpagesto
therequestingclients.Besidesentertainingclient
requests,webserversalsoreceivecontentfrom
themthroughwebformsanduploadedfiles.A
largewebsiteisoftenrunbyhundredsofservers
whichisreferredtoasserverfarmsinweb
terminology.
TheWebBookBuildStatic&DynamicWebsites
1.1.10WhatisaWebBrowser?
Awebbrowsercanbedefinedasanapplicationsoftware
designedtoenableuserstoaccess,retrieveandviewdocuments
andotherresourcesontheInternetoraprogramdesignedto
downloadanddisplaywebpages.Theprimarypurposeofaweb
browseristobringinformationresourcestotheusers,allow
themtoviewtheinformation,andthenaccessotherinformation
throughnavigationallinks.
AlthoughbrowsersareprimarilyintendedtousetheWorldWide
Web,theycanalsobeusedtoaccessinformationprovidedby
webserversinprivatenetworksorfilesinfilesystems.ThemajorwebbrowsersareChrome,Firefox,
InternetExplorer,Opera,andSafari.
Allmajorwebbrowsersallowtheusertoopenmultipleinformationresourcesatthesametime,
eitherindifferentbrowserwindowsorindifferenttabsofthesamewindow.Majorbrowsersalso
includepopupblockerstopreventunwantedwindowsfrom"poppingup"withouttheuser's
consent.Mostwebbrowserscandisplayalistofwebpagesthattheuserhasbookmarked(called
"Favorites"inInternetExplorer)sothattheusercanquicklyreturntothem.
1.1.11WhatareHyperlinks?
Incomputing,ahyperlink(orlink)isacrossreferencetodatathatthereadercandirectlyfollow,or
thatisfollowedautomatically.Ittakesvisitorstoanotherpageonthesamesiteortoapageon
anotherWebsite.Ahyperlinkpointstoawholedocumentortoaspecificelementwithina
document.Awebbrowserusuallydisplaysahyperlinkinsomedistinguishingway,e.g.inadifferent
color,fontorstyle.ThebehaviorandstyleoflinkscanbespecifiedusingtheCascadingStyleSheets
(CSS)language.Alinkcanalsoappearasanimage.Whenyouclickalinkthepageloadsinanew
browserwindoworinanewtabintheexistingwindow.
Chapter1TheWorldWideWebAnIntroduction
1.1.12WhatisaWebAddressorURL?
EverysiteandpageonthewebisidentifiedbyitsownuniqueaddresswhichisalsocalledUniform
ResourceLocator(URL).Visitorsusuallyaccessawebsitebyclickingalinkfoundonanothersite.
TheycanalsoaccessasiteorapagewithinasitebytypingitsURLintheaddressbaroftheirweb
browsers.TheURLofawebsitecarriesfourpiecesofinformation:1thetransferprotocol(httpor
https),2thedomainname,3directoryand4filename:
Eachdomainnameendswithasuffixthatdefinesthetypeoforganization.Forexample,any
commercialenterpriseorcorporationthathasaWebsitewillhaveadomainsuffixof.com,which
meansitisacommercialentity.Thedomainsuffixprovidesyouwithaclueaboutthepurposeor
audienceofawebsite.Thedomainsuffixmightalsogiveyouaclueaboutthegeographicoriginofa
website.ManysitesfromtheUnitedKingdomwillhaveadomainsuffixof.uk.Herefollowsalistof
themostcommondomainsuffixesandthetypesoforganizationsthatwouldusethem.
Domainsuffixes
Countrydomainsuffixes
.comCommercialsite
.au Australia
.eduEducationalinstitution
.ca Canada
.govGovernment
.fr France
.orgNonprofitorganization
.it Italy
.milMilitary
.mxMexico
.netNetwork
.uk UnitedKingdom
1.1.13WhatisaSearchEngine?
Youcanusefreesearchenginesonthewebtofindinformationonaspecificsubject.Asearchengine
isawebbasedtoolthathelpsyoulocateinformationontheWorldWide
Web.Google,bing,andYahoo!Searcharethetoprankingsearchengines.
Searchenginesutilizeautomatedsoftwareapplications(referredtoas
robots,bots,orspiders)thattravelalongtheWeb,followinglinksfrom
pagetopage,sitetosite.Theinformationgatheredbythespidersisused
tocreateasearchableindexoftheWeb.Youcaneithergotothesesearch
enginesitestofindtherequiredinformationoryoucanusesearchfeature
providedwithyourbrowser.
TheWebBookBuildStatic&DynamicWebsites
1.1.14HowdoSearchEngineswork?
Everysearchengineusesdifferentcomplexmathematicalformulastogeneratesearchresults.The
resultsforaspecificqueryarethendisplayedonthesearchengineresultspage(SERP).Search
enginealgorithmstakethekeyelementsofawebpage,includingthepagetitle,contentand
keyworddensity,andcomeupwitharankingforwheretoplacetheresultsonthepages.Each
searchenginesalgorithmisunique,soatoprankingonYahoo!doesnotguaranteeaprominent
rankingonGoogle,andviceversa.Tomakethingsmore
complicated,thealgorithmsusedbysearchenginesare
notonlycloselyguardedsecrets,theyarealsoconstantly
undergoingmodificationandrevision.Thismeansthatthe
criteriatobestoptimizeasitewithmustbesurmised
throughobservation,aswellastrialanderrorandnot
justonce,butcontinuously.
Searchenginesonlyseethetextonwebpages,andusetheunderlyingHTMLstructureto
determinerelevance.Largephotos,ordynamicFlashanimationmeannothingtosearchengines,but
theactualtextonyourpagesdoes.ItisdifficulttobuildaFlashsitethatisasfriendlytosearch
engines;asaresult,FlashsiteswilltendnottorankashighassitesdevelopedwithwellcodedHTML
andCSS(CascadingStyleSheetsacomplexmechanismforaddingstylestowebsitepagesabove
andbeyondregularHTML).Itwillbeverydifficultforyourwebsitetoyieldhighplacementinthe
SERPsifthetermsyouwanttobefoundbutdonotappearinthetextofyourwebsite.
Chapter1TheWorldWideWebAnIntroduction
1.1.15WhatareWebLogsorBlogs?
AWeblog,orblog,isadiscussionorinformationalsitepublishedontheWorldWideWebconsisting
offrequentlyupdated,reversechronologicalentries(themostrecentpostappearsfirst)ona
particulartopic.Manyblogsprovidecommentaryonaparticularsubject;somefunctionasmore
personalonlinediaries;othersfunctionmoreasonlinebrandadvertisingofaparticularindividualor
company.Atypicalblogcombinestext,images,andlinkstootherblogs,Webpages,andother
mediarelatedtoitstopic.Theabilityofreaderstoleavecommentsinaninteractiveformatisan
importantcontributiontothepopularityofmanyblogs.Mostblogsareprimarilytextual,although
somefocusonart(artblogs),photographs(photoblogs),videos(videoblogsor"vlogs"),music(MP3
blogs),andaudio(podcasts).Microblogging(suchastwitter)isanothertypeofblogging,featuring
veryshortposts.Ineducation,blogscanbeusedasinstructionalresources.Theseblogsarereferred
toasedublogs.
1.1.16WhatisaWebPortal?
Awebportalisawebsitethatgathers
informationfromhundredsoreventhousandsof
onlinesourcesinauniformway.Usually,each
informationsourcegetsitsdedicatedareaon
thepagefordisplayinginformation(aportlet);
often,theusercanconfigurewhichonesto
display.Apartfromthestandardsearchengines
feature,webportalsofferotherservicessuchas
email,news,stockprices,information,
databasesandentertainment.Examplesof
publicwebportalsareAOL,Excite,iGoogle,
MSN,Naver,India.comandYahoo!
1.1.17WhatisWebSyndication?
Ratherthansurfingthewebfromonesiteto
anothertogetthedesiredinformation,youcan
havetheinformationsettoyou.Websyndication
isaformofsyndicationinwhichwebsitematerial
ismadeavailabletomultipleothersites.Most
commonly,websyndicationreferstomaking
webfeedsavailablefromasiteinorderto
provideotherpeoplewithasummaryorupdate
ofthewebsite'srecentlyaddedcontent(for
example,thelatestnewsorforumposts).Today,
manysitesusesyndicationbyenablingan
aggregator(RealSimpleSyndicationRSS)to
showthesyndicatedcontent.Latestversionsof
Firefox,IE,andSafarihavebuiltinaggregators.
TheWebBookBuildStatic&DynamicWebsites
1.1.18WhatisECommerce?
ElectronicCommerce,oftenreferredtoas
simplyecommerce(orecommerce),isa
phraseusedtodescribebusinessthatis
conductedovertheInternetusinganyofthe
applicationsthatrelyontheInternet,such
asemail,instantmessaging,shoppingcarts,
Webservices,UDDI,FTP,andEDI,among
others.Electroniccommercecanbebetweentwobusinessestransmitting
funds,goods,servicesand/ordataorbetweenabusinessandacustomer.It
isthebuyingandsellingofproductorserviceoverelectronicsystemssuch
astheInternetandothercomputernetworksanddrawsonsuch
technologiesasmobilecommerce,electronicfundstransfer,supplychain
management,Internetmarketing,onlinetransactionprocessing,electronic
datainterchange(EDI),inventorymanagementsystems,andautomated
datacollectionsystems.YoucanuseWebbasedstorestopurchasebooks,
theatertickets,andevencars.Youcanalsocreateyourownvirtualstoreat
http://smallbusiness.yahoo.com.Therearealsomanysitesthatenableyou
tosellorauctionyourproductsorhouseholditems.SiteslikeeBay
(www.ebay.com)allowyoutoputyourproductsonlineforauction.
ThousandsofWebsitesaredevotedtoonlineshopping.Somefocusonone
productorservice,whileothers,suchasAmazon.comofferawiderangeof
goods.Whenyoushopatanecommercesite,youusuallyaddtheitems
thatyouwanttopurchasetoavirtualshoppingcartalsocalleda
shoppingbasketthatkeepstrackoftheseitemsandthequantity.Most
siteshaveaViewCartlinkthatenablesyoutoviewthecontentsofyour
shoppingcart.ThecartusuallyhasaProceedtoCheckoutlinkthatleads
youtoapagewhereyouprovideyouraddressandpaymentinformation.
Paymentsonthewebareusuallymadebycreditcards.Youarerequiredto
providethecreditcardnumber,cvvnumberandexpirydate.Toensurethe
securityofthissensitivedata,youmustprovidethisinformationonlyon
securedsiteswhichareprefixedwithhttpsratherthanhttp.
Chapter1TheWorldWideWebAnIntroduction
1.2
Launching a Website
Theinitialstepinthisprocessistocreatewebpagesthatconstituteawebsite.Todoso,youneeda
simpletexteditorsuchasNotepadorsomespecialwebpagedesigningsoftwaresuchasMicrosoft
ExpressionWeborAdobeDreamweaver.Aftercreatingyoursite,thenextstepistoacquireadomain
name(www.abcglobal.com)andsetupanaccountwithawebhostingcompany.Webhostingproviders
offerdifferentpackages(includingfreedomainregistration)tostoreyourwebpagesontheirservers
fromwheretheworldcanaccessyourwebsite.Forfurtherinstructions,seesection6.25Website
Deployment.
1.3
TherearethousandsofWebHostingCompaniesoutthereandcounting.Howdoyouchoosetheideal
planforyourWebSite?ThekeyhereistounderstandwhatyourWebSiteneedsare.Onceyouknow
whatisrequired,youcaneliminatemanyoptions.Thesearethemostimportantpointsthatyouneedto
focuson:
HowmuchstoragespacedoesyourWebSiterequire?
HowmuchMonthlyTransfer(Bandwidth)doyouneed?
Howmanyemailaccountsdoyouneed?
Whattypeofdatabaseisrequiredforyoursite?
WhatScriptingLanguagesdoesyourwebsiteuse?
DoesyoursiteneedServersidescriptinglanguage?
Ifso,WhatServletTechnologydoesyourwebsiteuse?
WhatOperatingSystemshouldyougofor?
ShouldyouuseSHAREDhostingorDEDICATEDhosting?
10
TheWebBookBuildStatic&DynamicWebsites
1.3.1StorageSpace
1.3.2Bandwidth
Storagespacerefersto
theamountofdiskspace
allottedonthehosting
Webservertostoreyour
websitefiles.Ifyouhave
a100MBlimit,thenyou
cannotstoremorethan100MBworthoffileson
theserver.HTMLfilesarenotbig,butifyour
websiteholdsfilessuchasimages,videos,audio
etc.,youneedtowatchyourlimit.
Bandwidthisameasureof
howmuchofyourdatathe
serversendsout.For
example,ifyouhavea
pagethatis10KB,
includingimages,and10
peopleaccessthepage(eitheratthesametime
oroveraperiodoftime),thetotalbandwidthis
100KB.Mosthostsgiveyouabandwidthlimit(or
cap),whichisusuallyaspecifiednumberof
megabytesorgigabytespermonth.
1.3.3DomainName
AdomainnameisageneralInternetaddress,such
asmicrosoft.comorcyber.net.Domainnamesare
formedbytherulesandproceduresoftheDomain
NameSystem(DNS).DNSisthemostrecognized
systemforassigningaddressestoInternetweb
servers.Somewhatlikeinternationalphone
numbers,thedomainnamesystemhelpstogiveeveryInternetserveramemorableandeasytospell
address.Simultaneously,thedomainnameskeepthereallytechnicalIPaddressinvisiblefromend
users.Theregistrationofdomainnamesisusuallyadministeredbydomainnameregistrarswhosell
theirservicestothepublic.Adomainnameregistrarisanorganizationorcommercialentitythat
managesthereservationofInternetdomainnames.Somehostingproviderssupplyfreedomain
nameregistrationservicewiththeirpackages.
11
Chapter1TheWorldWideWebAnIntroduction
1.4
Electronicmail,commonlyreferredtoasemailoremail,isamethodofexchangingdigitalmessages
fromanauthortooneormorerecipientsanywhereintheworld.Modernemailoperatesacrossthe
Internetorothercomputernetworks.Today'semailsystemsarebasedonastoreandforwardmodel.
Emailserversaccept,forward,deliverandstoremessages.Whenyousendanemailmessage,ittravels
alongyourInternetconnectionandthenthroughyourISPsoutgoingmailserver.Thisserverroutesthe
messagestotherecipientsincomingmailserver,whichthenstoresthemessageinhisorhermailbox.
Thenexttimetherecipientcheckformessages,yourmessageismovedfromtherecipientsserverto
therecipientscomputer.
Touseemail,youhavetohaveanemailaccount.Therearethreewaystogetanemailaccount:
throughISP,throughyourhostingplan,andthroughfreeservicessuchasHotmailandYahoo.Anemail
addressisasetofcharactersthatuniquelyidentifiesthelocationofyourInternetmailbox.Amessage
senttoyouraddressisdeliveredtoyouandnooneelse.
Example:admin@abcglobal.com
Eachemailaddress,asshownabove,carriesthreepiecesof
information:
Username:Theusernameisthenameofthepersonsaccountwith
theISPorwithinanorganization.Thisisoftenthepersonsfirst
name,lastname,oracombinationofthetwo,butitcouldalsobeanicknameorsomeothertext.No
twopeopleusingthesameISPorwithinthesameorganization,canhavethesameusername.
@Symbol:The@signseparatestheusernamefromthedomainnameinanemailaddress.
DomainName:ThedomainnameistheInternetnameofthecompanythatprovidesthepersonse
mailaccount.ThisisusuallythedomainnameoftheISP,anorganization,oraWebemailservice.
EmailClientSoftware
Anemailclientisacomputerprogramusedtoaccessandmanageemails.Therearetwobasic
categoriesofemailclient:
LocalClients:TheseemailclientsareinstalledlocallyonaPCandincludeMicrosoftOutlook,Mozilla's
Thunderbird,IBMLotusNotes,PegasusMail,andAppleInc.'sMail.
WebBasedClients:Awebapplicationthatprovidesmessagemanagement,composition,and
receptionfunctionsiscommonlyreferredtoaswebmail.ExamplesofwebbasedclientsareGmail,
Yahoo!Mail,andHotmail.
12
TheWebBookBuildStatic&DynamicWebsites
1.5
Scripting Languages
Ascriptinglanguageorscriptlanguageisaprogramminglanguagethatsupportsthewritingof
scripts,programswrittenforasoftwareenvironmentthatautomatetheexecutionoftasks
whichcouldalternativelybeexecutedonebyonebyahumanoperator.
Scriptsareinvisibletothevisitor'seyebuttheiravailabilitywithinthecodeofawebsite
defineshowthewebsitebehavesinresponsetocertainclickrequestssentbytheuser.Apart
fromtheWorldWideWeb,scriptsarealsousedfortheautomationofprocessesonalocal
computer.Allinall,scriptshavecontributedalottomakingthewebsuchausableand
flexibilitydrivenenvironmentasweareusedtoseeingittoday.
Eachscriptrepresentsatextdocumentcontainingalistofinstructionsthatneedtobe
executedbyacertainprogramorscriptingmanagersothatthedesiredautomatedaction
couldbeachieved.Thiswillpreventusersfromhavingtogothroughmanycomplicatedsteps
inordertoreachcertainresultswhilebrowsingawebsiteorworkingontheirpersonal
computers.Thetextnatureofthescriptsallowsthemtobeopenedandeditedwiththehelp
ofabasictexteditor.
1.5.1ClientSideScripting
Clientsidescriptinggenerallyreferstotheclassofcomputerprogramsonthewebthatareexecuted
clientside,bytheuser'swebbrowser,insteadofserverside(onthewebserver).Thistypeof
computerprogrammingisanimportantpartoftheDynamicHTML(DHTML)concept,enablingweb
pagestobescripted.
ClientsidescriptsareoftenembeddedwithinanHTMLorXHTMLdocument(henceknownasan
"embeddedorinternalscript"),buttheymayalsobecontainedinaseparatefile,whichisreferenced
bythedocument(ordocuments)thatuseit(henceknownasan"externalscript").Uponrequest,the
necessaryfilesaresenttotheuser'scomputerbythewebserver(orservers)wheretheyreside.The
user'swebbrowserexecutesthescript,andthendisplaysthedocument,includinganyvisibleoutput
fromthescript.Clientsidescriptsmayalsocontaininstructionsforthebrowsertofollowinresponse
tocertainuseractions,(e.g.,clickingabutton).
13
Chapter1TheWorldWideWebAnIntroduction
1.5.2ServerSideScripting
ServersideScripting
Languages
Serversidescriptingisusuallyusedtoprovideaninterfaceandto
limitclientaccesstoproprietarydatabasesorotherdatasources.
Thesescriptsmayassembleclientcharacteristicsforusein
customizingtheresponsebasedonthosecharacteristics,theuser's
requirements,accessrights,etc.Serversidescriptingalsoenables
thewebsiteownertoreduceuseraccesstothesourcecodeof
serversidescriptswhichmaybeproprietaryandvaluableinitself.
PHP (*.php)
Python via Django (*.py)
Ruby (*.rb, *.rbw)
SMX (*.smx)
Lasso (*.lasso)
WebDNA (*.dna,*.tpl)
C via CGI (*.c, *.csp)
ColdFusion (*.cfm)
JavaServer Pages (*.jsp)
Lua (*.lp *.op)
Perl CGI (*.cgi, *.ipl, *.pl)
SomeInterestingFacts
The world # 1 video site
Figure11Serversidescripting(PHPandMySQL)
YouTube is written in Python.
Amazon.com & Slashdot run
on Perl.
Theserversidescriptsareinterpretedbythewebserver.Most
NBC broadcast center runs
serversidescriptinglanguagesusuallyembedtheirscripting
24x7 on TCL.
componentswithinaHTMLfile.So,whenthewebserverreads
Flight simulator systems used
themfromthefilesystemtoservearequestfromabrowser,it
to train commercial and
interpretsthescriptandgeneratestheappropriateHTMLtobe
military pilots are written in
Perl.
returnedtothebrowser.Thiscontrastswithordinarywebpages
wheretheserverfetchesanHTMLonlystaticpagedirectlyfrom
thefilesystemandpassesitontothebrowserwithoutany
interpretation.Thescriptinterpretationmightnotactuallybedone
bythewebserverbutbyaspecialsoftwarecalledCGIinterpreterin
thecaseofCGIscripts.Forexample,ifthescriptlanguageusedis
PHP,thenitisPHPinterpreter.
14
TheWebBookBuildStatic&DynamicWebsites
1.5.3ClientSidevs.ServersideScripting
Serversidescripting,(ex.ASP.Net,ASP,
JSP,PHP,Ruby,orothers),isexecuted
VBscript),thatisexecutedbythebrowser
bytheserver(WebServer),andthe
(i.e.Firefox,InternetExplorer,Safari,Opera,
pagethatissenttothebrowseris
etc.)thatresidesattheusercomputer.
producedbytheservesidescripting.
user'scomputernotwebserverone,while
executesserversidescripts,butdoes
serversidescriptingconsumescyclesform
notexecuteclientsidescripts.Oncethe
webserverone.
theclientsidescripts.
Clientsidescriptingconsumescyclesfrom
Sowhenaserversendsoutapage,it
browserreceivesthepage,itexecutes
Clientsidescriptingisascript,(ex.JavaScript,
Clientsidescriptingcanaccessfilesand
settingsthatarelocalattheusercomputer.
Serversidescriptingcanconnectto
Clientsidescriptshavegreateraccesstothe
databasesthatresideontheweb
informationandfunctionsavailableonthe
serveroranotherserverreachable
user'sbrowser,whereasserversidescripts
fromwebserver.Clientsidescripting
havegreateraccesstotheinformationand
cannotdothat.
functionsavailableontheserver.
Serversidescriptingcanaccessthefile
ClientsidescriptsuchasJavaScriptruns
systemthatresideatthewebserver,
primarilyinthebrowser,whichserverside
clientsidecannot.
languageslikePHP,JSP,RubyonRailsetc.
Serversidescriptingcanaccesssettings
cannotdo.
belongingtoWebserverwhileclient
sidecannot.
Theservermaydothingslikedatabase
lookup,reading/writingfilesanduser
authenticationthatwouldbeeither
impossibleorveryinsecuretodoina
browser.
15
Chapter1TheWorldWideWebAnIntroduction
ClientSidevs.ServersideScripting(Continued)
Serversidescriptsrequirethattheir
Therearealsoacoupleoftasksthatare
language'sinterpreterbeinstalledon
commonlydonebothplaces,likeform
theserver,andproducethesame
validationontheclienttogivequick
outputregardlessoftheclient's
feedback.Thisvalidationcanalsobedone
browser,operatingsystem,orother
ontheservertoensurethatwhatis
systemdetails.Clientsidescriptsdo
submittedisactuallysafeandvalid.Note
notrequireadditionalsoftwareonthe
thatanattackercouldeasilyskipany
server(makingthempopularwith
browservalidationandsubmitillegal
authorswholackadministrativeaccess
values.
totheirservers);however,theydo
requirethattheuser'swebbrowser
understandsthescriptinglanguagein
whichtheyarewritten.Itistherefore
impracticalforanauthortowrite
scriptsinalanguagethatisnot
supportedbypopularwebbrowsers.
16
CHAPTER 2
17
Chapter2HypertextMarkupLanguage<HTML>
2.1
HTMLstandsforHyperTextMarkupLanguage.It
isamarkuplanguageforstructuringand
presentingcontentinawebbrowserforthe
WorldWideWeb,andisacoretechnologyof
theInternet.HTMLiswrittenintheformof
HTMLelementsconsistingoftagsenclosedin
anglebrackets(like<html>),withintheweb
pagecontent.HTMLtagsmostcommonlycome
inpairslike<h1>and</h1>,althoughsometags,
knownasemptyelements,areunpaired,for
example<img>.Thefirsttaginapairisthestart
tag,thesecondtagistheendtag(theyarealso
calledopeningtagsandclosingtags).Inbetween
thesetagswebdesignerscanaddtext,tags,
commentsandothertypesoftextbased
content.
HTMLdocumentsarereadinawebbrowser
(Chrome,InternetExplorer,Firefoxetc.)whichis
responsibletoorganizethesedocumentsinto
visibleoraudiblewebpages.Thebrowseruses
theHTMLtagstointerpretthecontentofthe
page.WebbrowserscanalsorefertoCascading
StyleSheets(CSS)todefinetheappearanceand
layoutoftextandothermaterial.
HTMLelementsformthebuildingblocksofall
websites.HTMLallowsimagesandobjectstobe
embeddedandcanbeusedtocreateinteractive
forms.Itprovidesaresourcetocreate
structureddocumentsbydenotingstructural
semanticsfortextsuchasheadings,paragraphs,
lists,links,quotesandotheritems.Itcanembed
scriptsinlanguagessuchasJavaScriptwhich
affectthebehaviorofHTMLwebpages.
XHTMLisaseparatelanguagethatbeganasa
reformulationofHTML4.01usingXML1.0.XML
(eXtensibleMarkupLanguage)waspublishedin
1998.HTML4wasreformulatedtofollowthe
rulesofXMLandhencethetermXHTML
(eXtensibleHypertextMarkupLanguage)
evolved.TheemergenceofXHTMLsetsome
newandstricterrulesfordeveloperstowrite
markup.Forexample,amandatoryclosingtag
(exceptemptyelementssuchas<img>),useof
lowercaseforattributenames,mandatory
attributevalueindoublequotesetc.Thethree
versionsofXHTMLareStrictXHTML1.0,
TransitionalXHTML1.0,andXHTML1.0
Frameset.
HTML5isthefifthrevisionoftheHTML
standardandisfocusedinthisbook.Itscore
aimshavebeentoimprovethelanguagewith
supportforthelatestmultimediawhilekeeping
iteasilyreadablebyhumansandconsistently
understoodbycomputersanddevices.HTML5
isintendedtosubsumenotonlyHTML4,but
XHTML1andDOMLevel2HTMLaswell.
HTML5isanattempttodefineasinglemarkup
languagethatcanbewrittenineitherHTMLor
XHTMLsyntax.Itincludesdetailedprocessing
modelstoencouragemoreinteroperable
implementationsandintroducesmarkupand
applicationprogramminginterfaces(APIs)for
complexwebapplications.Forthesame
reasons,HTML5isalsoapotentialcandidatefor
crossplatformmobileapplications.
18
TheWebBookBuildStatic&DynamicWebsites
ManyfeaturesofHTML5havebeenbuiltwith
theconsiderationofbeingabletorunonlow
powereddevicessuchassmartphonesand
tablets.Inparticular,HTML5addsmanynew
syntacticalfeatures.Theseincludethenew
<video>,<audio>and<canvas>elements,as
wellastheintegrationofscalablevector
graphics(SVG)contentthatreplacestheusesof
generic<object>tagsandMathMLfor
mathematicalformulas.Thesefeaturesare
designedtomakeiteasytoincludeandhandle
multimediaandgraphicalcontentontheweb
withouthavingtoresorttoproprietaryplugins
andAPIs.Othernewelements,suchas
<section>,<article>,<header>,<footer>and
<nav>,aredesignedtoenrichthesemantic
contentofdocuments.
Newattributeshavebeenintroducedforthe
samepurpose,whilesomeelementsand
attributeshavebeenremoved.Someelements,
suchas<a>,<cite>and<menu>havebeen
changed,redefinedorstandardized.TheAPIs
anddocumentobjectmodel(DOM)areno
longerafterthoughts,butarefundamental
partsoftheHTML5specification.HTML5also
definesinsomedetailtherequiredprocessing
forinvaliddocumentssothatsyntaxerrorswill
betreateduniformlybyallconforming
browsersandotheruseragents.
DOCTYPEDECLARATION
EachwebpagebeginswithaDOCTYPE
declarationwhichinformsthebrowseraboutthe
HTMLversionthepageisusing.Althoughthis
declarationisnotmandatory,ithelpsbrowsersto
correctlyrenderapage.Duetovariousflavorsof
HTML,thisdeclarationalsovariesasshowninthe
followingtable.
HTMLVersion
HTML4
XML
StrictXHTML1.0
Transitional
XHTML1.0
HTML5
DOCTYPEDeclaration
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<?xmlversion="1.0"?>
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPEhtml>
19
Chapter2HypertextMarkupLanguage<HTML>
2.2
OpenNotepadoranytexteditorandtypethefollowingcode:
MyWebPage.html
CODINGBYHAND
<!DOCTYPEhtml>
<html>
<head>
<title>MyFirstHTMLPage</title>
<metaname="description"content="HowtocreateanHTMLpage"/>
<metaname="keywords"content="HTML,CSS,JavaScript"/>
<metaname="robots"content="nofollow"/>
<metaname="author"content="RiazAhmed"/>
</head>
<body>
<h1>Thisistheheadingofmywebpage</h1>
<p>Thisisaparagraph.</p>
</body>
</html>
SavethefileasMyWebPage.htmlonyourdesktoporanyother
locationyouprefer.Theiconofthesavedfilewouldchangetothe
iconofyourdefaultbrowser.Doubleclickthefiletoseeyourfirstweb
pageinthebrowserasshowninthefollowingfigure.
Throughoutthisbook,you'll
bewritingoutdocuments
(html,css,php,etc.)byhand
usingatexteditor,suchas
Notepad.Inthefuture,you
maychooseawebauthoring
toolsuchasDreamweaveror
MicrosoftExpressionWeb,
butthereisnobetterwayto
understandhowthingsworks
thentypingthemout.This
approachwillmakeyou
understandthecodeandwill
allowyoutouseyourtool
moreefficientlyandmuch
moreeasily.
Figure21
Letsseewhattheabovecodedidforus.
20
TheWebBookBuildStatic&DynamicWebsites
2.4
Attributes in HTML
HTMLelementscanhaveattributes.WebpagecustomizationbeginswithHTMLattributes.Attributes
areresponsibleforcustomizingHTMLelementsandprovideadditionalinformationaboutthecontents
ofanelement.WhileprocessinganHTMLtag,thewebbrowserlookstotheseattributesasguidesfor
theconstructionofwebelements.Withoutanyattributevaluesspecified,thebrowserwillrenderthe
elementusingthedefaultsettings.
AttributesarealwaysspecifiedinthestarttagoftheelementandaremadeupoftwopartsNameand
Valueseparatedbyanequalssignasshowninthefollowingexampleforthe<a>element.
AttributeExample
NAME
Figure22
UsageRecommendations
Attributevaluesshouldalwaysbeenclosedinquotes.Doublestylequotesarethemost
common,butsinglestylequotesarealsoallowed.
Attributenamesandattributevaluesarecaseinsensitive.However,recommendedwayisto
uselowercase.
23
Chapter2HypertextMarkupLanguage<HTML>
2.5
Headings in HTML
Headingsandsubheadingsinadocumentareusedtopresentinformationinahierarchicalformat.For
instance,adocumentusuallystartswithabigheadingbeforethemainintroductionofatopic,followed
byrelevantsubheadings.
Figure23
Youcanuse<h1>to<h6>tagstodefineheadingsinyourwebsitewhere<h1>definesthemost
importantheadingwhile<h6>definestheleastimportantone.Headingsaredisplayedindifferentsizes
bythebrowser.Thecontentenclosedin<h1>isthelargest,andthatin<h6>isthesmallest.Youwill
learnhowtosetthesizeofcontent,itscolor,andfontinthesecondpartofthisbookwhereyou'llbe
taughtaboutCascadingStyleSheets(CSS).
24
Chapter2HypertextMarkupLanguage<HTML>
2.15
Bookmarking In HTML
Inyourwebsite,youhavealongpagewithseveralsections.Tomakethispageuserfriendly,youusethe
bookmarkfeatureinHTMLbycreatingalistatthetopofthepageandlinkittocorrespondingsections.
Likewise,tosaveusersfromhavingtoscrollbacktothetop,youalsoaddalinkatthebottomoratthe
endofeachsectionwhichinstantlytakestheusertothetop.
YoucanachievethistaskbyusingtheidattributewhichcanbeusedwitheveryHTMLelement.Firstyou
needtoidentifythepointsinthepagethelinkwillgotoandmarkthemwiththeidattribute.Next,you
linktothesepointsusingthe#symbolfollowedbythevalueoftheidattributeinthehrefattributeof
thecreatedlist.Totestthefollowingexample,makeyourbrowserswindowsmallersothatyoucould
seethejumpingeffect.
BookmarkingExample
<!DOCTYPEhtml>
<html>
<body>
<!Thetoplinkatthebottomwillbringyouhere>
<h1id="top">BooksReview</h1>
<!Listofbooksthatpointstocorrespondingsection>
<ahref="#obiee">ImplementOracleBusinessIntelligence</a><br>
<ahref="#apex">CreateRapidWebApplicationsUsingOracleAPEX</a><br>
<ahref="#web">TheWebBook</a><br><br>
<!Thefirstmarkedpointwiththeidobiee>
<h2id="obiee">ImplementOracleBusinessIntelligence</h2>
<p>Thisbookisaimedatgivingyouinsightsintorunningyourorganizationinamoreintelligent
fashion.ItnotonlypresentstheBIconcepts,butalsoguidesyoutoimplementOracleBusiness
Intelligenceusingrealworldscenarios.</p>
<!Thesecondmarkedpointwiththeidapex>
<h2id="apex">CreateRapidWebApplicationsUsingOracleAPEX</h2>
<p>Thisbookwillwalkyouthroughtocreateaprofessionallookingwebbaseddatabase
application.</p>
<!Thethirdmarkedpointbookwiththeidweb>
<h2id="web">TheWebBook</h2>
<p>ThisbookteacheshowtocreateprofessionallookingwebsitesusingHTML,CSS,and
JavaScript.</p>
<!Thetoplinkwhichtakesyoutothemainheading>
<p><ahref="#top">Top</a></p>
</body>
</html>
36
TheWebBookBuildStatic&DynamicWebsites
Output
Books Review
Implement Oracle Business Intelligence
Create Rapid Web Applications Using Oracle Application Express
The Web Book
37
Chapter2HypertextMarkupLanguage<HTML>
2.16
Images In HTML
Theadage"Apictureisworthathousandwords"referstothenotionthatacomplexideacanbe
conveyedwithjustasinglestillimage.Thisfitsmoreintheworldofwebthananyotherplace.Aweb
sitehavinggreatimagesismoreengagingthanadulltextbasedone.
Youaddimagestoyourwebpagetodisplay:
Companylogo
Photographs
Diagram,chartorillustration
Imagesaredefinedusingthe<img>taginHTMLwhichisanemptytagsinceitdoesn'thavean
associatedendtag.Somecommonattributesof<img>tagaresrc,alt,width,andheight.Thesrc
attribute,whichstandsforsource,isusedtodisplayimagesonawebpage.Itsvalueholdsthelocation
oftheimage.Thealtattributecontainsanalternatetextthatisdisplayediftheimagecannotbe
displayed.Theheightandwidthattributesspecifytheimagesize(bydefaultinpixels).
ImageExample
<!DOCTYPEhtml>
<html>
<body>
<h1>TourdeFrance</h1>
<p>RaceleaderAlbertoContador(Astana)hadguestsonthepodium:<br>
CameronDiazandTomCruise,intownfortheBordeauxpremiereoftheirlatestfilm,Knight
andDay.
</p>
<imgborder="0"src="tomcruise.jpg"alt="TomCurise"width="500"height="250"/>
</body>
</html>
38
TheWebBookBuildStatic&DynamicWebsites
Output
39
TheWebBookBuildStatic&DynamicWebsites
Play
Pause
Seeking
Volume
Fullscreentoggle
Captions/Subtitles(whenavailable)
Track(whenavailable)
InternetExplorer8andearlierversionsdonotsupportthe<video>tag.Inorderforusersviewingyour
videothrougholderorlatestbrowsersyouneedtouploadthevideoinatleasttwodifferentformats
asdidintheexamplebelow.The<source>elementinsidethe<video>elementisusedtorunthis
videoonallsupportedbrowsers.Youspecifyalternativevideo/audiofileswhichthebrowsermay
choosefrom,basedonitsmediatypeorcodecsupport.Usethe<audio>tagtoplayaudiofilesin
HTML5.
VideoExample
Output
<!DOCTYPEhtml>
<html>
<body>
<videowidth="320"height="240"
controls="controls">
<sourcesrc="tennis.mp4"type="video/mp4"/>
<sourcesrc="tennis.webm"type="video/webm"/>
Yourbrowserdoesnotsupportthevideotag.
</video>
</body>
</html>
63
Chapter2HypertextMarkupLanguage<HTML>
Figure24
64
Chapter3CascadingStyleSheets{CSS}
3.22
CSS3 Animation
AnimationisanothergreatfeatureincludedinCSS3;itisaneffectthatletsanelementgraduallychange
fromonestyletoanother.YoucanuseCSS3animationsinplaceofanimatedimages,Flashanimations,
andJavaScript.Therule@keyframesisaddedtothestylesheettoachievethisobjective.
HTMLCode
<!DOCTYPEhtml>
<html>
<head>
<styletype="text/css">
/*Point#1*/
@mozkeyframesmyAnimation{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
/*Point#2*/
#f1img{position:absolute;}
/*Point#3*/
#f1img{
mozanimationname:myAnimation;
mozanimationtimingfunction:easeinout;
mozanimationiterationcount:infinite;
mozanimationduration:10s;
}
/*Point#4*/
#f1img:nthoftype(1){mozanimationdelay:5s;}
#f1img:nthoftype(2){mozanimationdelay:0s;}
</style>
</head>
<body>
/*Point#5*/
<divid="f1">
<imgsrc="Frame1.png"width="300"height="200"/>
<imgsrc="Frame2.png"width="300"height="200"/>
</div>
</body>
</html>
102
BROWSERPREFIX
Youhavetosetappropriateprefix
accordingtoyourbrowser.This
exampleisprefixedwithmozand
willrunonFirefox,forChromeand
Safarisetprefixtowebkit,andfor
Operasetittoo.
TheWebBookBuildStatic&DynamicWebsites
Inthisexample,we'reusingtwoimagesthatwillcrossfadeinfinitelyoneaftertheother.
Point#1:
CreatedakeyframeruleforFirefoxandnameditmyAnimation.Specifiedwhenthechangewillhappen
inpercent,whichrangesfrom0%to100%.Initially,wewilldisplayactualpicturebysettingtheopacity
to1.Whentheanimationisat50%,itwillbecometransparent(opacity:0),andagaintoactualwhen
theanimationis100%complete.ThisrulewillbeappliedtoallimagesdefinedinPoint5.
Point#2:
Inthisruleweprovidedabsolutepositiontoimages.Ifyouomitthisrule,bothpictureswillappear
relatively(sidebyside).
Point#3:
Theanimationnamepropertyspecifiesthenameofthekeyframeyouwanttobindtotheselector.
Here,youhaveprovidedthenamemyAnimationtothekeyframeandbounditto#f1selectorthathas
<img>elements.
Theanimationtimingfunctionpropertydescribeshowtheanimationwillprogressoverone
cycleofitsduration.Wesetittoeaseinoutwhichmeansthattheanimationhasbothaslow
startandaslowend.
Theanimationiterationcountpropertyspecifiesthenumberoftimesananimationisplayed.
Theinfinitevalueissettoplaytheanimationforever.
Theanimationdurationpropertyspecifieshowmanysecondsormillisecondsananimation
takestocompleteonecycle.Wesetthevaluetotenseconds(5secondsforeachpicture).
Point#4:
The:nthoftypepseudoclassmatcheselementsbasedontheirpositionwithintheparentelement's
listofchildelementsofthesametype.Thispseudoclassacceptsanargument(N)whichcanbea
number,keyword,orexpression.Inourexamplewe'rereferencingthetwoimagesdefinedinPoint#5.
Theanimationdelaypropertydefineswhentheanimationwillstart.
Thetotaldurationofthisanimationis10s(Point#3).Theanimationwillstartwiththesecondimage
(Frame2.png)andwilllastfor5seconds.Thenthefirstimage(Frame1.png)willappearandittoowill
lastfor5seconds.
Point#5:
Wedefinedtwoimagesina<div>element.Theseimageswillactasasourcefortheanimationandwill
appearandfadeinacycle.
103
Chapter4JavaScript
4.1
About JavaScript
HTMLisasimpletextmarkuplanguage,itcan't
respondtotheuser,makedecisions,or
automaterepetitivetasks.Interactivetaskssuch
astheserequireamoresophisticatedlanguage:
aprogramminglanguage,orascripting
language.
Althoughmanyprogramminglanguagesare
complex,scriptinglanguagesaregenerally
simple.Theyhaveasimplesyntax,canperform
taskswithaminimumofcommands,andare
easytolearn.Webscriptinglanguagesenable
youtocombinescriptingwithHTMLtocreate
interactivewebpages.
JavaScriptisoneofthemostpopularandwidely
usedscriptinglanguageofthewebandisusedin
billionsofWebpagestoaddfunctionality,
validateforms,communicatewiththeserver,
andmuchmore.Itisprimarilyaclientside
scriptinglanguageforuseinWebbrowsers.Its
mainfocusistohelpdevelopersinteractwith
WebpagesandtheWebbrowserwindowitself.
Becauseitisembeddedinallmodernbrowsers,
ithasanextraordinarywidedistribution.
Oneofthemostpowerfulfeaturesofthe
languageisitsflexibility.AsaJavaScript
programmer,youcanmakeyourprogramsas
simpleorascomplexasyouwishthemtobe.
Thelanguagealsoallowsseveraldifferent
programmingstyles.Youcanwriteyourcodein
thefunctionalstyleorintheslightlymore
complexobjectorientedstyle.Italsoletsyou
writerelativelycomplexprogramswithout
knowinganythingatallaboutfunctionalor
objectorientedprogramming;youcanbe
productiveinthislanguagejustbywritingsimple
functions.Itallowsprogrammerstoaccomplish
usefultaskswithaverysmall,easytolearn
subsetofthelanguage.
JavaScriptisalmostaseasytolearnasHTML,
anditcanbeincludeddirectlyinHTML
documents.Herearethefewthingsyoucan
dowithJavaScript:
Displaymessagestotheuseraspartofa
webpage,inthebrowser'sstatusline,or
inalertboxes.
Validatethecontentsofaformandmake
calculations(forexample,anorderform
canautomaticallydisplayarunningtotal
asyouenteritemquantities).
Animateimagesorcreateimagesthat
changewhenyoumovethemouseover
them.
Createadbannersthatinteractwiththe
user,ratherthansimplydisplayinga
graphic
Detectthebrowserinuseoritsfeatures
andperformadvancedfunctionsonlyon
browsersthatsupportthem.
Detectinstalledpluginsandnotifythe
userifapluginisrequired.
Modifyallorpartofawebpagewithout
requiringtheusertoreloadit.
Displayorinteractwithdataretrieved
fromaremoteserver.
106
TheWebBookBuildStatic&DynamicWebsites
YoucandoallthisandmorewithJavaScript,includingcreatingentireapplications.AJavaScript
isaddedtoanHTMLdocumentusingthe<script>tagwithtype=text/javascript.Itistypically
usedtomanipulateexistingHTMLelementsusingtheidattributeofthoseelements.Toaccess
theseelementsJavaScriptprovidesamethodcalleddocument.getElementById().Withinthe
parenthesisofthismethodyouspecifytheidoftheelementyou'retryingtoaccess.
Let'sgothroughasimpleexampletoembedJavaScriptinanHTMLdocument.Inthisexample
aJavaScriptisusedtomanipulatetextofaparagraphusingtheparagraphsidp1.The
innerHTMLpropertyreturnstheinnerHTMLofanelement.
EmbedJavaScriptinHTML
<!DOCTYPEhtml>
<html>
<body>
<h2>JavaScriptExample</h2>
<pid="p1">ThistextwillbereplacedwiththetextinthefollowingJavaScript.</p>
<scripttype="text/javascript">
document.getElementById("p1").innerHTML="WelcometotheexcitingworldofJavaScript!";
</script>
</body>
</html>
Output
JavaScript Example
Welcome to the exciting world of JavaScript!
107
Chapter4JavaScript
4.21
WewentthroughHTMLformsinsection2.20earlierinthisbookandexercisedvariousaspectofitusing
differentformcontrols.Inthissection,youwilllearnhowtomakeaforminteractivewithJavaScript.In
JavaScript,eachformisrepresentedasanobjectwiththesamenameastheNAMEattributementioned
inthe<form>tag.
4.21.1
Form Attributes
name:Usingthisattribute,youprovideanametoyourforminthe<form>tag.Youassignanametoa
formtorecognizeitinJavaScript.
method:Ithastwovalues,GETandPOST.Yousenddatatotheserverusingthesemethods.Forfurther
detailsonthesetwomethod,seeChapter2section2.20.
action:Usingthisattributeyousendform'sdataeitherthroughaCGIscriptorthroughemailtothe
desireddestination.
4.21.2
Form Methods
Theformobjecthastwomethods,submit()andreset().Theformeroneletsyousubmittheform'sdata
whereasthelateroneclearstheform.
4.21.3
Form Events
YoucanusetwoeventhandlersforaformobjectinJavaScript,onSubmitandonReset.TheonSubmit
eventiscalledbeforethedataissubmittedtotheCGIscript.Ifthestatementorfunctionreturnstrue,
thedataissubmitted.Thissubmissioncanbepreventedbyreturningavalueoffalsefortheevent
handler.Similarly,thefunctionalityofaResetbuttoncanbepreventedwiththeonReseteventhandler.
4.21.4
Youcanrefertoaformelementeitherbyitsnameorbyitsindex.Forexample,thetwoexpressions
belowcorrespondtothefirstelementinthecontactform,thefnametextfield.
document.contactform.elements[0]
document.contactform.fname
Tofindaformobjectyouusethedocument.getElementById()method.Thefollowingstatementfindsa
textfieldcalledfnameandstoresitinthesFnamevariable:
sFname=document.getElementById("fname");
138
TheWebBookBuildStatic&DynamicWebsites
DisplayFormData
<!DOCTYPEhtml>
<html>
<head>
<title>UsingJavaScriptwithHTMLForm</title>
<scriptlanguage="JavaScript"type="text/javascript">
functionshowData(){
oPopWin=window.open('','Window1','toolbar=no,status=no,width=300,height=100')
message="<ul><li><b>Name:</b>"+document.contactform.name.value;
message+="<li><b>Email:</b>"+document.contactform.email.value;
message+="<li><b>Mobile:</b>"+document.contactform.mobile.value+"</ul>";
oPopWin.document.write(message);
}
</script>
This exampleisanextensiontothe
</head>
onewewentthroughinsection2.29.
WeaddedJavaScripttoitwhich
<body>
displaysdatafromtheformina
<formname="contactform">
popupwindowthroughafunction
<fieldset>
namedshowData.
<legend>ContactInformation</legend>
<label>Name:<br>
<inputtype="text"name="name"/></label><br>
<label>Email:<br>
<inputtype="text"name="email"/></label><br>
<label>Mobile:<br>
<inputtype="text"name="mobile"/></label>
</fieldset>
<p><inputtype="BUTTON"value="ShowData"onClick="showData();"></p>
</form>
</body>
</html>
Output
139
Chapter4JavaScript
4.21.5
YousawhowJavaScriptisusedinHTMLforms,butitsmostsignificantuseistovalidatedataenteredin
theseforms.Forexample,youcancheckthattheform'smandatoryfieldsarenotleftblankor,if
entered,theyareinthecorrectformat.Datainthepreviousformcouldbevalidatedasshowninthe
followingexample.ThecheckData()JavaScriptfunctionisusedtocheckdatainthenamefieldthrough
thefield'slength.Ifyouleavethefieldblankandhitthesubmitbutton,thesubmissionisstoppedand
analertmessagecomesupwithrelevantinformation.
Weuseddocument.contactform.name.focus()statementtoplacethecursoronthefieldwheretheerror
occurred.ThefunctioncheckData()iscalledusingtheonSubmiteventhandlerinthe<form>tag.The
valuereturnedbythecheckData()functionisdeterminedbythereturnkeywordtoassesswhetherto
submittheform.YoucanusetheonChangeeventhandlerineachformfieldtovalidatedataindividually
priortosubmission.
140
Chapter5PHP&MySQL
5.1
Inthispart,youwillbeintroducedtoPHP,MySQL,andtheinteractionofthetwo.
PHP
MySQL
PHPstandsforPHP:HypertextPreprocessor.Itis MySQL(pronouncedMyEssQEl)isanopen
source,SQLRelationalDatabaseManagement
aserversidescriptinglanguage,whichcanbe
System(RDBMS)thatisfreeformanyuses.Itis
embeddedinHTMLorusedasastandalone
usedtostoredata.DatainMySQLisstoredin
binary(althoughtheformeruseismuchmore
objectscalledtables.Forexample,adatabaseof
common).PHPisapowerfultoolformaking
acompanycanhavethefollowingtables:
dynamicandinteractiveWebpagesandisthe
widelyused,free,andefficientalternativeto
competitorssuchasMicrosoft'sASP.
Customers
Vendors
BelowaresomebasicgeneralfactsaboutPHP:
Products
Orders
PHPisaserversidescriptinglanguage
Contact
anditsscriptsareexecutedonthe
server.
PHPisanopensourcesoftwareandis
freetodownloadanduse.
PHPfileshaveextensions".php",
".php3",or".phtml".Thesefilescanhold
text,HTMLtagsandscripts.
PHPfilesarereturnedtothebrowseras
plainHTML.
PHPsupportsmanydatabases(MySQL,
Oracle,PostgreSQL,Sybase,Informix,
Solid,GenericODBC,etc.)
PHPiseasytolearn,comparedtothe
otherwaystoachievesimilar
functionality.UnlikeJavaServerPagesor
CbasedCGI,PHPdoesntrequireyouto
gainadeepunderstandingofamajor
programminglanguagebeforeyoucan
makeatrivialdatabaseorremoteserver
call.UnlikePerl,whichhasbeencalleda
writeonlylanguage,PHPhasasyntax
thatisquiteeasytoparseandhuman
friendly.AndunlikeASP.NET,PHPis
stableandreadytosolveyourproblems
today.
144
TheWebBookBuildStatic&DynamicWebsites
Atableconsistsofrowsandcolumnsandholdsrelatedrecords.Forinstance,theContacttableholds
feedbackdatafromcustomersasshownbelow:
ID
1
2
3
4
Name
RiazAhmed
DanielClarke
MichaelPeter
MichaelJackson
Email
realtech@cyber.net.pk
daniel@gmail.com
mpeter@yahoo.com
mjackson@hotmail.com
Age
30
25
40
55
Message
Thisisfeedbackmessage#1
Thisisfeedbackmessage#2
Thisisfeedbackmessage#3
Thisisfeedbackmessage#4
Thistable(Contact)consistsoffivecolumns(ID,Name,Email,Age,andMessage)andcontainsfour
records(rows1through4).EachrowholdssametypeofrecordwithuniqueIDsanddifferentvalues.
HerearesomebasicfactsaboutMySQL:
MySQLisfreeformostusesandrelativelyinexpensiveforotheruses.
MySQLisoneofthefastestrelationaldatabases.
MySQLiseasytoinstallanduse.
MySQLrunsonWindows,Unix,Solaris,andOS/2operatingsystems.
MySQLsupportsSQL,whichisthestandardlanguageforworkingwithdatastoredin
relationaldatabases.
MySQLprovidesaccesstodataviaintranetandtheInternet.
MySQLsupportsaccessfrommultipleclientsfromavarietyofinterfacesand
programminglanguagesincludingJava,C,Perl,Python,andofcoursePHP.
MySQLallowsyoutoimplementhighsecuritytoprotectyourdatafromunauthorized
access.
MySQLsupportsreferentialintegrityandtransactionprocessingofferedbysomebig
namessuchasOracleDatabaseandMicrosoftSQLServer.
Lookingattheaboveadvantages,wewillbeusingPHPandMySQLtoprovideserversidescripting
functionalitytoourfinalprojectwebsiteforABCGlobalConsulting.Inthenextsectionsyouwillbe
guidedtosetupPHPandMySQLonyourcomputer.
145
Chapter5PHP&MySQL
5.2
Tomakethingssimple,thisinstallationassumesthatyouhaveWindowsXPSP3(32bit)orhigher
operatingsystemandareintendingtouseIIS5.1orhigherasyourwebserver.Inthissection,youwill
performthefollowingtasks:
InstallInternetInformationServices(IIS5.1)onWindowsXPSP3
DownloadandconfigurePHP
SetEnvironmentVariableforPHP
ConfigureIIStoprocessPHPrequests
TestPHPinstallation
DownloadandinstallMySQLprerequisites
DownloadandsetupMySQLdatabase
TestMySQLinstallation
5.2.1
Tomakeyourwebsitevisibletotheworld,you'llhavetostoreitonawebserver.YourownPCcanact
asawebserverifyouinstallInternetInformationServices(IIS).IISiseasytoinstallandidealfor
developingandtestingwebapplications.
IISisawebserverapplicationandsetoffeatureextensionmodulescreatedbyMicrosoftforusewith
MicrosoftWindows.IIS7.5,thelatestversion,supportsHTTP,HTTPS,FTP,FTPS,SMTPandNNTP.Itisan
integralpartoftheWindowsServerfamilyofproducts,aswellascertaineditionsofWindowsXP,
WindowsVista,Windows7andWindows8.IISisMicrosoft'sentrytocompeteintheInternetserver
marketthatisalsoaddressedbyApache,SunMicrosystems,O'Reilly,andothers.
Inthissection,youwillinstallIISonyourcomputertolocallyrunyourwebsite.Whenyoucreatealocal
IISWebSite,thepagesandfoldersforyoursitearestoredinafolderunderthedefaultIISfolder
(Inetpub\wwwroot).
IISisnotturnedonbydefaultwhenWindowsisinstalled;followtostepsmentionedbelowtoturniton.
1. ClickStart|ControlPanel
2. DoubleclickAddRemoveProgramsandclickAdd/RemoveWindowsComponents
3.
4.
5.
6.
UnderComponents,selectInternetInformationServices
ClickNext.YoumightbeaskedtoprovideWindowsXPCD.
Oncetheinstallationcompletes,clickStart|Run|typeinetmgrandclickOK.
IntheInternetInformationServicesconsole,expandallnodestoyourlefttillyouseethenode
DefaultWebSite.
7. RightclickthisnodeandselectBrowsefromthecontextmenu.ThisshouldopenaWindowsXP
webpagesayingyourwebserviceisnowrunning.
146
Chapter5PHP&MySQL
Step # 5
5.1. CreateaPHPscript(InameditPearMail.php)usingthecodebelowandsaveitin:
C:\Inetpub\wwwrootfolder.
PHPCode(PearMail.php)
<?php
require_once"Mail.php";
$from="RiazAhmed<realech@cyber.net.pk>";
$to="RiazAhmed<oratech69@gmail.com>";
$subject="TestmessagefromRTAccount";
$body="HiRiaz,\n\nHowareyou?";
$host="YourSMTPServeraddress";
//$username="";
//$password="";
$headers=array('From'=>$from,'To'=>$to,'Subject'=>$subject);
$smtp=Mail::factory('smtp',array('host'=>$host,'port'=>25));
//'auth'=>true,
//'username'=>$username,
//'password'=>$password));
$mail=$smtp>send($to,$headers,$body);
if(PEAR::isError($mail))
{
echo("<p>".$mail>getMessage()."</p>");
}
else
{
echo("<p>Messagesuccessfullysent!</p>");
}
?>
ExampleExplained:
Intheexampleabove,youincludedthePEARMailpackage(Mail.php),soyourscriptcanuseit.Ithasto
bedoneonlyonce,thereforeyouusedrequire_once(require_onceissameasrequire,buttheformer
onemakessurethatthefileisincludedonlyonce).Thenyouassigneddata(from,to,subject,body,and
host)toappropriatevariables.YouarerequiredtoassignyourSMTPservertothe$hostvariable.Thisis
thesamevalueyouusuallyspecifyinyourOutlookclientOutgoingmail(SMTP)settingontheServers
tabduringaccountcreation.Icommentedoutthevariables($usernameand$password)becausemy
SMTPserverdoesntneedthisinformation.Youmustprovidethesevaluesifyourserverneedthem.
Mail::factory()createsanewinstanceofaspecificMailBackendwiththefactory()method.Itssyntaxis:
factory(string$backend,array$params=array())
Thestring$backendparametercanhavemail,smtp,orsendmailasthenameofthebackendwhilethe
array$paramsholdsanarrayofbackendspecificparameters.Sinceweused'smtp'asamailbackend
typetosendamaildirectlyconnectingtoansmtpserver,thespecificparameterswouldbe:
192
TheWebBookBuildStatic&DynamicWebsites
$params["host"]Theservertoconnect.Defaultislocalhost.
$params["port"]Theporttoconnect.Defaultis25.
$params["auth"]WhetherornottouseSMTPauthentication.DefaultisFALSE.
$params["username"]TheusernametouseforSMTPauthentication.
$params["password"]ThepasswordtouseforSMTPauthentication.
Again,Iignoredauth,username,andpasswordparametersastheywerenotrequiredbymyserver.Ifyour
severneedauthenticationthenyoushouldwritethecodeasmentionedbelow.Donotforgettoassign
usernameandpasswordtothevariablesunder$hostaboveinthecode.
$smtp=Mail::factory('smtp',array('host'=>$host,'port'=>25,'auth'=>true,'username'=>$username,
'password'=>$password));
ThevaluereturnedbythecodeabovewouldbeaspecificMailinstanceonsuccessoraPEAR_Errorobject
onfailure.
Themailissentusingthesend()method.Thesend()methodisprovidedbytheobject($smtp)returned
fromfactory().Itssyntaxis:
send(mixed$recipients,array$headers,string$body)
Wheremixed$recipientsisanarrayorastringwithcommaseparatedrecipients.Associativearrayof
headersarecontainedinarray$headerswhilestring$bodyholdsthebodyoftheemail.Thismethod
returnsaBooleanvalue(trueorfalse)thatwestoredinthevariable$mailandcheckedinthefinalIF
statement.isError()examineswhetheravariableisaPEAR_Errorobjectandcontainsaspecificerror
messageorcode.getMessage()returnstheerrormessagecomingwiththeerrorobject.Forexample,ifyou
setthevalueof$hosttolocalhost2,youwillgetanerror:Failedtoconnecttolocalhost2:25[SMTP:Failed
toconnectsocket:php_network_getaddresses:getaddrinfofailed:Nosuchhostisknown.(code:1,
response:)].
5.2. Openabrowsersessionandtypehttp://localhost/pearmail.php.Iffollowedallthestepsinorder,
youllseeMessagesuccessfullysent!Youcancheckthetoemailaccountwhichshouldreceivea
messageasshowninthefollowingillustration.
Figure514
193
CHAPTER 6
WEBSITE PROJECT
E-Commerce Module
comprising various Admin
& Member modules
Manage dynamic content
through the Admin
modules
Place Online Orders
through the Member
modules
Website Deployment on
hosting server
195
Chapter6WebsiteProject
6.1
Projects Introduction
Youvelandedtothemostinterestingpartofthisbook.Here,youllcreateaprofessionalwebsitefor
ABCGlobalConsultingandwillapplythetechniquesyouvelearnedsofar.Theprojectisdividedinto
twocategories:
Dynamic
STATICVSDYNAMIC
Dynamicwebpagesaregeneratedatthetimeofaccessbyauserorchange
asaresultofinteractionwiththeuser.Thesepagescangivethewebsite
ownertheabilitytosimplyupdateandaddnewcontenttothesite.For
example,newsandeventscouldbepostedtothesitethroughasimple
browserinterface.Dynamicfeaturesofasiteareonlylimitedbyimagination.
Someexamplesofdynamicwebsitefeaturescouldbe:contentmanagement
system,ecommercesystem,bulletin/discussionboards,intranetor
extranetfacilities,abilityforclientsoruserstouploaddocuments,abilityfor
administratorsoruserstocreatecontentoraddinformationtoasite.Inthis
partofthebook,youllcreateanecommercesystemandcoupleofmore
interfaceswiththehelpofPHPandMySQLdatabase:
ContactFormThishtmlpageismeanttointeractwiththesite
visitors.Aformwillbeprovidedtothevisitorsofthewebsitetoadd
theircommentsandfeedback.ThisformwillusePHPandMySQLto
storethecommentsinadatabasetable.Besides,itwillreceive
contactdetailssuchasemailaddressandotherrelevant
information.
NewsletterSubscriptionUsingaformsitevisitorswouldenter
theiremailaddresstosubscribetocompanysnewsletters.This
formwillbeaddedtothehomepage(index.html).Aprocesswillbe
createdwiththehelpofPHPandMySQLtointeractwithsite
visitors.
AdminInterfaceInthedynamicpart,youllcreateanecommerce
prototypeapplicationthatwillcompriseadminandmembers
sections.Theadminsectionwillbeaccessibleonlytothesite
administratorswhowillusethisinterfacetomanagetaskssuchas
productsandordersmanagement.Seesection6.7Makethe
WebsiteDynamiclaterinthispartforcompletedetails.
MembersInterfaceThiswillallowenduserstobecomesite
membersandwillallowthemtoviewandpurchaseproductsfrom
thewebsite.Forfurtherdetails,seesection6.7MaketheWebsite
Dynamic.
196
Whenyoucreateanormalweb
pagewithHTMLandCSS,allthe
contentisfixedbythe
webmaster.Everyonewhovisits
thepageseesthesame
contentit'sstatic.
Bycontrast,thecontentofa
dynamicwebpagefrequently
changes.Forexample,the
Productspageinourproject
woulddisplaysthreemost
recentproducts(markedas
featuredproducts)fromthe
database.Whenanewitemis
addedtothedatabase,thePHP
codeinthepageautomatically
displaysit.Wheneverthispage
iscalled,thecontentchangesto
displayalistofnewlyadded
featuredproducts.Thecodein
thepagecontrolsthecontent
dependingontherequestit
receivesfromthebrowser.
TheWebBookBuildStatic&DynamicWebsites
Static
Astaticwebpageisapagethatisdeliveredtotheuserexactlyasstored.Anobviousexampleofastaticpageis
anoldstyleHTMLdocumentwhichcanonlybechangedbyuploadinganeworupdatedversion.Everytimea
staticfileisdownloaded,thefilecontentsthataresenttothebrowserarethesameforeveryonewhoaccess
thatfile.Inthisprojectyoullbetaughttocreatethefollowingstaticpages:
Index.htmlThisistheHomepageofourwebsite.Everyonewhovisitsthewebsitewillbegreetedby
thispage.
Company.htmlThispagewillcontaininformationaboutthecompanyi.e.ABCGlobalConsulting.
Services.htmlServicesprovidedbythecompanywillbedisplayedthroughthispage.
Success.htmlThispageisrelatedtocontactform(dynamiccategory)andinformsusersofsuccessful
submissionoftheircomments.
6.2
Website Security
AWebsitedesigned,built,anddeployedwithsecurityasaprimefeatureismorerobustthanone
deployedwithsecurityfeaturesaddedasanafterthought.However,asWebsitesbecomemore
complex,italsobecomesmoredifficulttomakethemsecure.Securitycannotbeachievedbysettinga
fewparticularproperties,orusingaspecifictool;insteadyoumusttakeaholisticapproachand
addresssecurityinallstagesofsiteplanning,development,anddeployment.Peoplejustconsiderthe
jobisdoneoncethewebsiteisup.Itdefinitelyisnot.Therearenopointandclicksoftwareavailableto
secureawebsite.Protectingawebsiteorwebserverispossibleonlybycontinuedefforts.Unlikea
poorlyprotecteddesktopinyourplaceofbusiness,ahackedwebsitewillreflectpoorlyonyou,your
businessorbrand.Theremaynotbefititandforgetsolutionsforprotectingawebsiteinaworld
wherethreatsemitconstantly.Buttherearealwayssometimetestedfundamentalgroundworkthat
shouldbedonetogetthefirstlineofdefenseupwhilefiguringoutadetailedsecurityplan.This
sectionisaimedatdetailingsomebasicproactivesecurityconsiderationsthatcanhelpyoulaythe
foundationforyoursitesecurity.
6.2.1
Ifyouwebapplicationreceivessensitivedatasuchascreditcard
numberorpasswordsfromvisitors,youmustuseasecureconnection
totransmitdata.Failingtodosomayallowhackersorothermalicious
mindstointerceptandviewthisdata.RegularHTTPconnectionssend
datainplaintextandarenotsuitableforsiteslikeonlinestoresore
commercewebsites.Forsuchsites,youshouldconsiderHTTPS
(HyperTextTransferProtocolwithSecureSocketsLayer).HTTPSisa
protocoltotransferencrypteddataovertheWeb.Althoughhackers
canstillinterceptthisdata,theycannotreaditunlesstheybreakthe
encryptioncode.MostWebcustomersknowthattheyshouldlookfor
thehttpsintheURLandthelockiconintheirbrowserwhentheyare
makingatransaction.SoifyourstorefrontisnotusingHTTPS,youwill
losecustomers.
197
NOTE
Itispossibletorunyour
entireWebsiteonhttps,
butitslowsdownthe
connection.Youshouldonly
securethosepagesthat
requestandcollectdata.
TheWebBookBuildStatic&DynamicWebsites
6.3
Takingthesimpleroutefirst,youllbuildthestaticpagesofyourprojectinthissection.Whilecreating
thesewebpages,youllapplytheskillslearnedinearlierpartsofthisbookwiththeadditionofsome
moreusefulstuff.
GeneralSteps:
1. Ifnotyetdone,downloadthebookscodefrom:
http://www.maqcon.com/test/download/TheWebBookCode.rar
2. Extractthisfileinafolder(Iextracteditinc:\bookcodeandwillrefertothisfolderassource
insubsequentsections).
3. CreateafoldernamedABCGLOBALunderc:\Inetpub\wwwroot.Thisfolderwillbereferredto
assitefolder.
4. CopyImagesfolderfromc:\bookcode\projecttoc:\Inetpub\wwwroot\abcglobal
199
Chapter6WebsiteProject
6.4
UsuallyasiteisvisitedbytypingitsURLwithoutspecifyingafilenamelike:www.abcglobal.com.Every
webserverneedsafileinordertoserveawebsite.Thisfileiscalledthedefaultfilethatyousetin
chapter5section5.2.2.OnmostWebservers,thisdefaultfileisnamed"index.html".Whatthismeans
isthatwhenyougotoaURLwithoutafilenamedattheend,theserverlooksforadefaultfileand
displaysthatautomatically.JustasifyouhadtypedinthatfilenameintheURL:
http://www.abcglobal.com/index.html.
Whenyoustartbuildingyourwebsite,youshouldcreateyourmainpageandnameitindex.html.That
way,whenpeoplecometoyourwebsite,theyautomaticallygetyourmainpage.Allotherpageswill
havenameslike"company.html"or"contact.html",butyourhomepagefileshouldbenamed
"index.html".
Inthisprojectourhomepage(showninthefigurebelow)isnamedindex.html.Thiswillbetheinitial
pagethatwillcomeupafterauserenterswebsitesurl(www.abcglobal.com)inabrowser.Letsbegin
theprojectbycreatingthehomepageofthewebsite.
Figure61TheHomePage
200
Chapter6WebsiteProject
Step-2
Addthefollowingcode(markedinbold)tobothhtmlandcssfiles.Thehtmlcodeshouldgoinsidethe
<body>tag.YoucancopythecsscodefromAll_Rules.csstotheendofstyle.cssfile.
Line#HTMLCode
1
<body>
2
<divclass="wrapper">
3
<header>
4
<h1>ABCGlobalConsulting</h1>
5
<divid="headlinks">
6
<p><ahref="member/index.php">Login/Register</a>|<ahref="">Sitemap</a></p>
7
</div>
8
</header>
9
</div><!.wrapper>
10
</body>
CSSCode
Rule2
A
B
C
D
E
Rule4
A
B
C
D
Rule23
.wrapper{
width:950px;
margin:20pxauto20pxauto;
backgroundcolor:#ffffff;
mozboxshadow:0010px#111111;
position:relative;}
#headlinks{
float:right;
position:absolute;
top:30px;
right:30px;}
a{
color:#666666;
textdecoration:none;}
Rule3
A
B
C
D
Rule5
A
B
C
D
Rule24
210
header{
height:100px;
backgroundimage:url(images/logo.png);
backgroundrepeat:norepeat;
backgroundposition:leftcenter;}
h1{
textindent:9999px;
width:950px;
height:100px;
margin:0px;}
a:hover{
color:#FF9900;}
TheWebBookBuildStatic&DynamicWebsites
Output&Explanation
Rule2
A
B
C
D
E
Rule3
A
B
C
D
Rule4
A
B
Rule5
A
B
C
Rule23&24
Specifieshowthe<div>elementhavingtheclasswrappershouldappearontheweb
page.
Thewidthpropertyofthiselementissetto950px.
Topandbottommarginsaresetto20px.Rightandleftmarginsaresettoautotocenter
the<div>element.
Backgroundcolorissettowhite.
Theboxshadowpropertyallowsyoutoaddadropshadowaroundthe<div>element.
Weprovided0forhorizontalandverticalshadowvaluesandsetblurto10pixelsalong
withagrayishcolor.Firefoxrequirestheprefixmoz,IEusesms,whileChromeand
Safarirequirestheprefixwebkit.Youmustaddrulewiththementionedprefixifyou
areusingthesebrowsers.
Tokeeptheelementrelativetoitsnormalposition.
Setspropertiesforthe<header>element.
Theheightofthe<header>elementissetto100px.
Backgroundimageissettologo.pngthatexistsinimagesfolder.
Thenorepeatvaluepreventsthepngfromreplicatingitself.
Alignsthelogocentrallytotheleft.
Appliestoheadlinks<div>elementtoshowLogin/RegisterandSitemaplinksinthe
headersection.
Floatsthetwolinksfromtherightside.
Setstheselinkswithabsolutepositionbysettingtopandrightproperties.
Appliestothesole<h1>element(nameofthecompany).
Sincewe'reusingabackgroundimage(logo.png)torepresenttheheading,wemoved
the<h1>element9999pixelstothelefttopushthetextoffthebrowserwindow.We
stillwanttheheadingtexttobeonthepage(forsearchenginesandthosewhocannot
seetheimage),butwecannothaveitdisplayedontopofthelogooritwillbe
unreadable.Ifyouignorethisruletheheadingtextwillappearasshownintheabove
figure.
Thewidthofthiselementissetequivalenttothewidthofthemainwrapper.
Theheightissetequaltotheheightofthe<header>element.
Rule23and24aresetfor<a>elements(Login/RegisterandSitemaplinks)enclosedin
#headlinks<div>element.Thelinks'normalcolor(grey)ischangedtoorangewhenthe
mouseishoveredoverthem.Notethatthethreefooterlinksarealsostyledwiththese
tworules.
211
Chapter6WebsiteProject
Step-3
Addthefollowinghtmlcodeafter12c(Table61).Youcanalsoreferindex.htmlinthesourcefolderfor
properpositioningofthiscode.Thecodecreatesmainnavigationbartolinktootherpagesofthe
websiteandaddsasearchbox.
LineHTMLCode
1 <nav>
2 <ul>
3 <li><ahref=""class="current">Home</a></li>
4 <li><ahref="company.html">Company</a></li>
5 <li><ahref="services.html">Services</a></li>
6 <li><ahref="products.php">Products</a></li>
7 <li><ahref="contact.html">Contact</a></li>
8 </ul>
9 <scripttype="text/javascript">
10 //Enterdomainofsitetosearch
11 vardomainroot="www.maqcon.com"
12 functionGsitesearch(curobj){
13 curobj.q.value="site:"+domainroot+""+curobj.qfront.value
14 }
15 </script>
16 <formid="search"action="http://www.google.com/search"method="get"onSubmit="Gsitesearch(this)">
17 <inputname="q"type="hidden"/>
18 <inputname="qfront"type="search"value="search..."/><inputtype="submit"value="Go!"/>
19 </form>
20 </nav>
Output
212
TheWebBookBuildStatic&DynamicWebsites
CSSCode&Explanation
Rule6 nav{
A
clear:both;
B
backgroundimage:url(images/menubg.gif);
C
backgroundrepeat:repeatx;
D
backgroundcolor:orange;
E
height:30px;}
A
B
C
D
Rule7
A
B
Rule8
A
B
C
D
E
F
B
C
D
E
F
Rule6isdefinedforthe<nav>elementthatholdsthemainnavigationalbar.The<nav>
elementcontainsanunorderedlist<ul>thatcarriesfivelistitemseachpointingtoawebpage.
Nofloatingelementsareallowedonbothsides.Fordetailsseesection3.17FloatingElements.
Backgroundimageissettomenubg.giflocatedintheimagesfolder.
Menubg.gifisaslimimagethatisrepeatedhorizontallytoformabackgroundbar.
Addedthisruletoshowthenavigationalbarinorangecolorifmenubg.giffailstoload.
Commentoutthisruleandrefreshyourbrowsertoseetheeffect.
Setstheheightofthenavigationalbar.
navul{
margin:0px;
padding:5px0px5px30px;}
Rule7definespropertiesforthe<nav><ul>element.
Themarginissetto0pxtokeepthebarclosetothecompanylogo.Ifyousetsomemargin,for
example10px,thenavigationbarwoulddropdowntocreatesomespacefromthelogo.
Paddingisaddedtoeach<ul>elementbysettingvalues5,0,5,and30pixels(top,right,
bottom,andleftrespectively).Changingtheleftpaddingvaluefrom30to0pxwoulddragthe
menubartotheleftedge.Asinglevalue(asdonewithmargin),wouldapplytoallfoursides.
navli{
float:left;
width:80px;
height:20px;
display:inline;
marginright:20px;
background:url(images/menudivider.gif)righttopnorepeat;}
Rule8setspropertiesforeach<li>elementinthe<nav>element.
Floatseach<li>elementfromtheleftside.ThefirstelementHomeisfloatedfirst.Thenthe
Companyisseatedinlinenexttoitandsoon.
Eachelementwillhaveawidthof80pixels.
Heightofeachelementis20pixels.
Displaysall<li>elementsinline.
Setsrightmarginto20pixelsforeachelement.
Setsadividerbetweentwo<li>elementsusingmenudivider.gif.Thisisashorthandproperty.
CSSshorthandstylepropertiesallowyoutowritesomeCSSpropertiesinamorecompactform,
savingspace,downloadtime,anddevelopmenttime.Theshorthandpropertyforbackgroundis
simply"background".Thepositionoftheimageisspecifiedbythebackgroundposition
propertyi.e.righttop.Norepeatpreventsthegiffromreplication.
213
Chapter6WebsiteProject
Thisconcludesthepartofstaticwebpagecreation.Theseexercisesweredestinedtoconsolidatethe
crumbsyouwentthroughinHTMLandCSSpartsearlierinthisbook.Thefoundationhasbeenlaid.If
youfirmlygraspthesetechniques,youllbeabletodesignalmostanywebsite.Thingsarenotfinished
yet,letsmoveontobuffupourskillsevenmoreandlearnhowtoputlifeintoawebsite.
6.7
Inprevioussectionsyoucompletedthestaticpartsofthewebsite.Nowitstimetocreatethedynamic
segmentsusingPHPandMySQL.Inthispartyouwillenableyourwebsitetointeractwithitsvisitorsby
addingthefollowingmodules.
ContactForm
Allmodernwebsitesprovidesomemeansofcommunicationwiththeirvisitors;acontactformisone
ofthem.Youllbeguidedtoaddacontactformtothewebsitesothatvisitorscouldinputtheir
comments.ThisdatawillthenbestoredinatablenamedContactintheMySQLdatabase.Theform
willbecreatedinsection6.8Task1.
NewsletterSubscription
Emailnewslettersareaverypopularwaytoopenachannelofcommunicationwithyoursitevisitors.
Newslettersprovidegreatbenefitofkeepingasite'suserbaseuptodateonthelatestnewsand
offeringsfromanorganization.Moreover,theyhavethepotentialforturningsitevisitorsinto
customers.Fornewsletterstobesuccessful,theyhavetobeeasytosubscribetoandjustas
importantlyunsubscribefrom.RecallthatwhilecreatingtheHomepageweaddedtheinterfaceof
thismodule.Thatwillbeputtoworkinsection6.9Task2.
ECommerceModule
Besidesconsultingservices,ABCGlobalConsultingalsodealsinITrelatedproductsandintendstosell
themthroughtheirwebsite.Toachievethistaskyouhavetoaddinteractivefunctionalitiestothe
website.Youhavetobuildaproductspagethatwillshowrelevantinformation(image,description,
priceetc.)fromadatabaseandwillallowuserstobuythoseproducts.Butbeforethat,youhaveto
createfewmodulesthatwillmanageadministrativetaskssuchasuploadingcategoriesandproducts
information.Thesemoduleswillbeaccessibleonlytothesiteadministrators.
238
TheWebBookBuildStatic&DynamicWebsites
6.7.1
Tasks List
Thefollowingtableliststhetasksyouwillbeperforminginthischapter:
Task
Module
GeneralTasks
Task1
ContactForm
Task2
NewsletterSubscription
AdminInterfaceTasks
Task3
AdminLoginModule
Task4
ManageCategories
Task5
ManageProducts
Task6
ManageOrders
Task7
ManageAccounts
MemberInterfaceTasks
Task8
MemberLoginModule
Task9
RegisterNewMember
Task10
ResetPassword
Task11
MyAccount
Task12
FeaturedProducts
Catalog
Task13
ProductDetails
Task14
ShoppingCart
Task15
Checkout(Confirm
Order)
Task16
WebsiteDeployment
Description
Addcontactformtoreceivevisitorscommentsandstore
theminthedatabase.
Allowvisitorstosubscribetocompanysnewsletter.
Createlogininterfaceforsiteadministrators
View,add,updateanddeleteproductcategories
View,add,updateanddeleteindividualproducts
View,ship,anddeleteordersplacedbycustomers
Add,update,anddeleteadminusers
Interfaceforsitemembers
Allownewuserstobecomemembers
Providesnewpasswordstositemembers.
Thispageletsusersedittheirinformationandreview
theirorders.
Thispagewillbeaddedtothewebsiteandwillbe
accessibletoallthroughtheProductsmainnavigation
link.Thispagewillshowfeaturedproductsalongwith
images,shortdescription,andprices.
Thispagewillprovidecompletedetailsaboutaparticular
productandwillhaveanAddtoCartbutton.
OncethememberclickstheAddtoCartbutton,hewill
bebroughttothispagetocheckhiscart.
Thecartpagewillcontainacheckoutlink.Themodule
willaskthemembertologinbeforeplacinganorder.
Onceloggedinsuccessfully,heorshewillproceedtothe
paymentpagewhichwillacceptcreditcardinformation
fromthemember.
Aftercompletion,thewebsitewillbedeployedonahost
serversothattheworldcouldaccessit.
239
Chapter6WebsiteProject
6.7.2
Directory Structure
Thetableonthenextpagepresentsthedirectorystructureforthetasksmentionedabove.Eachmodule
isstoredinaseparatedirectory.Forexample,Checkoutmodulefilesarestoredinthecheckout
directory.Member,Catalog,Cart,andCheckoutdirectoriesholdfilesfortheendusersofthewebsite.
Incontrast,administrativemodulesarestoredundertheAdmindirectory.Thisdirectoryhasfoursub
directories(Users,Category,Product,andOrders)tomanageadminusers,categories,products,and
ordersplacedbycustomersrespectively.
Eachdirectorycontainsacontrollerfile(index.php)whichisthedefaultfilethatrunsforeachdirectory.
Thisfileinturncallsrelevantfunctionsandviewfilesstoredinrespectivedirectories.Thewebsite'sroot
directoryhasaproduct.phpfilethatisexecutedwhentheuserclickstheProductslinkonthemain
navigationbar.Thisfilecallsshow_product.phpfiletodisplayfeaturedproductsfromthedatabase.
TheerrorsdirectorycontainsPHPscriptsfordisplayingapplicationerrors,theimagesdirectoryholdsall
theimagefilesusedinthewebsite.Filesinthemodeldirectoryprovidedatabasefunctionswhereasthe
utilitydirectorycarriesfilesthatprovideparsing,globalandsessionfunctions.Theviewdirectory
containsfiles(header,footer,sidebaretc.)thatareusedbyallmodulestoprovideaconsistentlook.
Thisdirectorystructureisidealtomaintainandenhanceawebsite.Forinstance,ifyoudecidetouse
twodifferentheaders,onefortheenduserandonefortheadministrators,youjustaddanewheader
filetotheviewdirectoryandmodifythefilesthatuseit.Youwillcreateseparateheadersforadminand
enduserstodisplayseparatenavigationbar.Similarly,ifyouwishtochangesomethinginthecart
module,youcangotothecartdirectorythatcontainsallrelevantfilestothismodule.Thefollowing
illustrationpresentsageneralPHPprocesspatterncalledMVC(Model,View,andController).
Figure64
Inthisexample,theprocessinitiateswhenanadministratorclickstheProductslinkonthemain
navigationbar.Theflowisreceivedbythecontroller:index.phpfile(Point1).Then,thecontrollergets
appropriatedatafromthemodel(Point2).Themodelconnectstothedatabaseandfetchesdata
throughvariousfunctions.Forinstance,heretheadministratorrequestedforproductsdata.So,afile
product_lib.phpiscalledtofetchtheinformation.Afterreceivingtheinformation,thecontrollercallsa
file(product_list.php)fromtheviewlayer(Point3).ThisfileconsistsofHTMLandPHPcodetorender
thelistofproducts(Point4).Theproductslististhenpresentedtotheadministratorthroughthe
controller(Point5).
240
TheWebBookBuildStatic&DynamicWebsites
6.8
Youdidsomeworkinthecontactpage(section5.12DealingwithForms)whereyoutookusers
commentsandstoredthemintheMySQLdatabasethroughaPHPscript.Letstakeastepforwardand
enhancethatformbyaddingsomemoreinputelements(radio,checkboxetc.)andincorporate
websitethemetogiveitaconsistentlookasshownbelow.
Figure67
245
Chapter6WebsiteProject
Do It Yourself
Performthefollowingstepstocreatethispage.
Step-1
Sincewereaddingnewinputelementstogetmoreinformationfromthevisitor,weneedtodropand
recreatetheContacttableintheTESTDBdatabase.Notethatwecreatedthistableearlierinsection5.6
forinitialtesting.
1. ClickStart|AllPrograms|MySQL|MySQLServer5.5andselectMySQL5.5CommandLine
Client.
2. Entergeminiinthepassword.Enteryourownpasswordifyousetadifferentone.
3. Onmysqlprompt,typeusetestdbandhitEnter.
4. Typesourcec:\bookcode\project\contact.sqlandhitEnter.Thescript,contact.sql,removes
andrecreatestheContacttable.(ForTask3youlltypesourcec:\bookcode\project\db.txtto
createalltables).
5. TypedesccontactandhitEntertoseestructureofthenewtable.Youcanseethatthefirst
column,ID,issetastheprimarykeyandgiventheattributeofautoincrement.Withthis
attributeset,youdonotneedtoprovideavalueforthiscolumnwhilesavingarecord,asyou
didintheformexampleearlier.Wealsoaddedsomemorecolumns(title,enterprise,ac,it,and
hr)tostoreadditionalinformation.(ForTask3typeshowtablestoseeallthetablescreated
throughdb.txtfile).
Step-2
1. OpenNotepadandenterthehtmlcodementionedintable9.9below.Youcanpastethiscode
fromcontact.htmllocatedinthesourcefolder.
2. Savethisnewfileascontact.htmlinthesitefolder.
3. Openstyle.cssfileandcopyrulesfromAll_styles.cssmentionedintheCSSCodesectionbelow.
4. Openyourbrowserandtypehttp://localhost/abcglobal/contact.htmlintheaddressbarand
hitEnter.Youllseethecompletewebpageillustratedintheabovefigurewithouttheaside
sectionthatyoullcreatenext.
5. Fromthesourcefoldercopyandpastecontact.phpandsuccess.htmlfilesinthesitefolder.
Followingisthecodefromthetwofilesalongwithexplanation.
LineHTMLCodeContactForm
1
<!DOCTYPEhtml>
2
<html>
3
4
<nav>
5
<ul>
6
...
7
<li><ahref=""class="current">Contact</a></li>
8
</ul>
9
...
246
TheWebBookBuildStatic&DynamicWebsites
6.10
Inthispart,youllcreatedifferentmodulestohelpadministratorsmanagethesite.Startingwiththe
loginmodule,youwillcreatepagesthatwillallowsiteadminstomanagecategories,products,orders,
andtheirownaccounts.Nowthatyouvebecomefamiliarwiththepagecreationprocedure;from
hereonward,Imgoingtoexplaincodefromrelevantfileswiththeprocessflowofindividualmodule.
6.11
1. Copyallfilesandfoldersfromthesourceprojectdirectorytothesitefolder(abcglobal)
overwritingallexistingfilesandfoldersinthesitedirectory.
2. UsingthestepsdefinedinTask1(Step1CreateDatabaseTable),rundb.txtscript.
3. Typehttp://localhost/abcglobal/admin.Theadminloginpage,asshowninFigure610,should
comeup.
4. Enteradmin@abc.comintheEmailAddressboxandgeminiforthePasswordandclicktheLogin
button.Thisaccountwascreatedthroughdb.txtscript.However,iftherearenoaccountsinthe
Adminstable,theapplicationwillpresentaformtocreatetheinitialadminaccount.Thenextpage
willshowAdminmenuwithfourlinks.Eachlinkisaseparatetaskthatyoullevaluateinthispartof
thebook.AlsonotethatthemainnavigationbarisreplacedbytheseadmintasklinksandtheLogin
linkischangedtoLogoutwithawelcometextdisplayingthenameoftheloggedinadminuser.
5. ClicktheLogoutlink.Thisisthewholeprocessthatwillbeexplainedinthenextfewpage.Letsfirst
takealookathowtheadminloginprocessflows.
Figure610
261
Chapter6WebsiteProject
Diagram1AdminLoginProcess
262
TheWebBookBuildStatic&DynamicWebsites
DiagramExplained
S.Theprocessstartswhenyouenterhttp://localhost/abcglobal/admininthebrowser.Thisurl
callsindex.phpfileundertheAdmindirectory.EveryfolderinthisPHPprojecthasitsown
defaultindex.phpfilethatcontrolssubsequentrelatedprocesses.
1. Thefirstlineofindex.phpfile(ListInextpage)callsMain.php(ListII)intheUtilityfolder.This
filesetssomeglobalvariables,globalfunctions,andcallsthestart_sessionfunctiontostarta
session.Itisincludedatthestartofallindex.phpfiles.
2. AnotherfileDB.php(ListIII)iscalledfromMain.phptoinitiatedatabaseconnection.Ifthe
databaseisdownorisinaccessibleduetoanyreason,thefileDB_Connect_Error.php(point17
ListIV)iscalledwhichislocatedintheErrorsfoldertohandlethesituation.
3. Iftherearenodatabaseerrorsandtheconnectionisestablishedsuccessfully,processflow
returnstoMain.phpthecallingscript.
4. Main.phpreturnstheflowbacktoindex.php(admindirectory).
5. Index.phpcallsSecure.php(ListV)thatmakesasecureconnection(https)andreturnsto
Index.php.
6. Check_Admin.php(ListVI)iscalledtoverifywhethertheadministratorisloggedin.
7. Sincetheadministratorisnotloggedin,theflowtransferstotheUsersdirectoryachild
directoryunderAdmin.ThedefaultIndex.phpfile(ListVII)inthisdirectoryisexecuted.
8. Admin_Login.phpfile(ListVIII)isinvokedfromtheaboveIndex.phpfile.Thisisthefilethat
actuallyholdstheloginformforadministrators.
9. Header_Admin.phpfileiscalledtodisplaypageheaders.
10. Loginformisdisplayed.
11. PagefooterisdisplayedthroughFooter.phpfile.
12. FlowreturnstoIndex.phpfiletocontinuetheprocess.
13. Userentersadmincredentialsintheloginformandpressestheloginbutton.Thefile
Admin_Lib.php(ListX)iscalledwhichcontainsvariousfunctions.Here,itiscalledtoverifythe
providedcredentialsthroughafunctioncalledis_valid_admin_login.Ifeithertheemail
addressorthepasswordisincorrect,amessageisdisplayedtotheuserthroughError.phpfile
(ListXI).
14. ControlisreturnedtoIndex.phpfile.
15. Attheendoftheevaluatedcasestatement(caseloginListIX)inIndex.phpfile,afunction
namedredirect()inMain.phpfileiscalledpassingaparameter(..).
16. TheredirectfunctionmovestheflowbacktotherootIndex.phpfilewhichinturndisplaysthe
Adminmenu.
F.Theprocessfinisheshere.
Thisisthesimplestexplanationoftheadminloginprocess.However,thereissomeiterationthattakes
placeduringtheexecution.Wheneverthecontrollerfile(Index.php)iscalleditexecutesfromthestart
andcallstherequiredfilesagain.Forexample,secure.phpisdisplayedonlyonceintheabovediagram,
however,itiscalledmorethanoncetocheckthesecuredconnection.Onceasecuredconnectionis
established,thecodewithinthefileisbypassed.Allthefilesmentionedintheaboveprocessarelisted
andexplainedaheadtomakethingsmoreclear.
263
Chapter6WebsiteProject
6.16
Thispartenablessitevisitorstobecomeamemberandpurchaseproductsonline.Existingandnew
membercan:
Logintothewebsitetoplaceorders
Putdesiredproductsintotheircarts
Placeordersbyprovidingpaymentinformation
Thefollowingfigureillustratesageneralprocessflowforthestepsmentionedabove.
Figure620
1.
2.
3.
4.
5.
6.
Theprocessbeginswhenavisitorentersthewebsitebyenteringthespecifiedurl.
ClicksProductlinkonthemainnavigationbar.
Selectsaproductfromthelistoffeaturedproducts.
Entersthedesiredquantityandplacestheproductinhis/hercart.
ClickstheCheckoutlinktoconfirmorder.
Atthisstage,thevisitorisaskedtologin.Ifthevisitordoesnthaveanaccount,he/shecan
registerusingalinkprovidedontheloginform.
7. Aftersuccessfullogin/registration,thevisitorbecomesamemberandispresentedwithaform
toenterpaymentinformation.
8. Onthepaymentform,thememberclicksthePlaceOrderbuttontocompletetheprocess.
9. Thefinalstepofthisprocessdisplaysdetailsoftheplacedordertothemember.
Letscontinuetheprojectandseeindetailhowtheabovementionedstepswork.Realizingthatyou
shouldnowbecomfortablewithPHPcode,wellbediscussingonlytheuniquecodeinthemodulefiles
providedforthissection.
356
TheWebBookBuildStatic&DynamicWebsites
6.17
Consideringthefunctionality,thismoduleissimilartotheAdminLoginModulethatwediscussedin
detailinTask1.However,therearesomeadditionallinksprovidedonthememberloginpage
presentedinthefollowingfigure.Forexample,theRegisterlinkallowsnewvisitorstobecomesite
membersandanexistingmembercanusetheForgotpasswordlinktoreceiveanewpasswordin
his/heremail.Similarlythesidebarsection,generatedthroughsidebar_member.phpfileintheView
directory,presentssomenavigationlinksrelevanttositemembersandvisitors.Alsonotethemain
navigationbarwhichisdifferentfromtheAdminmodule.Thispageappearseitherwhentheuser
clickstheCheckoutlinktoconfirmorderandisnotloggedin,or,whenhe/sheclickstheLogin/Register
linkprovidedontopofallstaticpages.Aftersuccessfulloginattempt,theformercasetakesusersto
thepaymentinformationpagewhileinthelaterscenariothemembersarelandedontheMyAccount
pagewheretheycanviewandchangetheirpersonalinformationsuchasemail,passwordsand
addresses.
Figure621
357
Chapter6WebsiteProject
Diagram12MemberLoginProcess
358
TheWebBookBuildStatic&DynamicWebsites
DiagramExplained
PointSTheprocessinitiateswhenthesitevisitorclickstheLogin/Registerlinkprovidedonallstatic
(.html)pagesasshowninthefollowingcode.
ListT81[Index.htmlTheHomePage]
1 <body>
2 <divclass="wrapper">
3 <header>
4
<h1>ABCGlobalConsulting</h1>
5
<divid="headlinks">
6 <p><ahref="member/index.php">Login/Register</a>|<ahref="">Sitemap</a></p>
7 </div>
Point1Afterclickingthelink,theprocesspassescontroltothecontrollerIndex.phpfileunderthe
Memberdirectory.
Point2Index.phpexecutestheinitialcodeunderthedefaultview_logincaseandcalls
Member_Login.phpfilefromthesamedirectory.
ListT82[Index.phpMember]
1 else{
2 $action='view_login';
3 }
4 switch($action){
5 case'view_login':
6 include'member_login.php';
7 break;
359
Chapter6WebsiteProject
6.21
TheProductsoptiononthemainnavigationbarcallsadynamicpage.Incontrasttootherneighboring
staticpages,thispagegrabsproductsfromthedatabasemarkedasfeaturedproductsthroughan
administrativetaskperformedearlier.Thevisitorcanalwaysseeallproducts,offeredbythecompany,
usingthesidebarlinksundertheCategoriessection.Moreover,visitorscanclickproductstitletosee
furtherdetailsofthatparticularproduct.
Figure625
382
Chapter6WebsiteProject
6.25
Aftercompletingthewebsiteandgivingitathoroughtestrun,yourereadytodeployitonahosting
serverfromwheretheworldcouldaccessit.Thefollowingstepsneedtobecompletedinorderto
accomplishthistask.
1. Hostthewebsite
2. InstallFileZillaFTPClientanduploadfiles
3. Accesscontrolpanel
4. Createablankdatabaseandadatabaseuser.Grantdatabaseaccessprivilegestothenewuser.
5. CallphpMyAdmintooltocreatedatabasetablesusingtheImportoption.
6. InstallPEARcoreandPEARMailpackages
Step-1
TomakeyourWebsitevisibletotheworld,ithastobehostedonaWebserver.Everywebsiteonthe
Internetneedstobestoredsomewhere,andthatswhatreferredtoaswebhosting.Awebsitehostis
justacomputerthatisonallthetimeandconnectedtotheInternet.Whenyouvisitawebsite,you
downloadsomefilesfromthemachinethatstoresthatparticularwebsite.Anycomputercanbeusedto
hostawebsite,eventheoneyouareusingnowbutthecomputersusedbyprofessionalhosting
companiesareincrediblypowerfulwithlotsofharddisksandmemory,highlyoptimizedtodeliverthe
websitefilestothousandsofreaderssimultaneously.
Thetwobasicwaysofhostingawebsiteare:selfandcommercial.
Self Hosting
IfyouwanttogotheDIYfreeroute,thenitisinfactentirelypossibletohostyourownwebsiteathome,
onyourownInternetconnection.WithadvancesthatallowedInternetaccesstomoveawayfromdial
upservicesandintoarealmoffasterandmorerobustuseofInternetresources,thepossibilityofself
hostingbecamemoreviable.Asistruewithmanyformsofelectronicequipment,thehardware
necessarytocreateandmanageahostingnetworkbecamemoreaffordable.Atthesametime,software
packagesthatcouldhelpconfigureandoperatethenetworksalsobecamemorecosteffective.Coupled
withthefactthatmorepeoplebegantomakeuseoftheInternetforbothpersonalandcommercial
purposes,andalsobecamemorefamiliarwithhowtodesignsitesandunderstandbandwidth,theidea
ofselfhostingisnowwellworthconsideration.
Whileselfhostingiscertainlymoreviablethaninyearspast,theprocessstillrequiressecuringtheright
equipment,usingsoftwaretomanagetheresources,andprotectthehostfromallthethreatsthatcould
filterintothehostingprocessviatheInternetconnection.Thismeansthatuserswhoarenot
comfortablewiththesetypesofmanagementprocessesarelikelytofindthatworkingwithahosting
companyratherthantryingtohandletheprocessesalonemaystillbethebestbet.Forotherswhofeel
competenttoengageinselfhosting,thestrategycanmeangreatereaseinmanagingresourcesand
evenallowingtheentireprojecttobemuchmorecosteffective.
Therearealotofsecurityissuesthatcancomeupwhenselfhosting.Configurationissuescantakeabitof
doingtogettherightsoftwareinstalled,andsetuptobehavecorrectly.Also,acommercialhostwillusually
418
Chapter6WebsiteProject
Step-2
Afterpurchasingahostingplan,thenextstepistouploadyourwebsitefilestothehostingserverusing
someFTPclientsoftware.
FileZillaclientisacrossplatformgraphicalFTP,FTPSandSFTPsoftwarewithlotoffeatures,supporting
Windows,Linux,MacOSXandmore.Itisusedtotransferfilesbetweencomputers.Itisopensource
softwaredistributedfreeofchargeunderthetermsoftheGNUGeneralPublicLicenseandcanbe
downloadedfromhttp://filezillaproject.org/.InordertouseFileZillaclientonyourclientPC,youmust
disableFTPAccessFilterifyourebehindafirewallsuchasMicrosoftISAServer.
Figure630
420
TheWebBookBuildStatic&DynamicWebsites
Figure636
Conclusion
Afterfittinginalltheblocksattheirproperlocations,youshouldrunthisprojectonyourhosting
servertoseehowitworksontheweb.Refertoallthestuffprovidedinthisbookasyoureviewthis
websiteprojectandexplorenewwaystoimproveit.
Youhavebeenintroducedtothehugewebsitedevelopmenttopicandtakentoapositionfromwhere
youcanlearnmoreaboutitonyourown.Thisbookservedasacrucialstartingpoint.Theconcepts
coveredhereinprovidedinvaluableinformationforyourfutureprojects.Specificallyyoulearnedabout
thevariouscomponentsthatmakeupwhatweknowasatieredarchitecturemodelinthatyouhavea
client,theWebserver,andadatastore.Youlearnedabouttheroleclientsidetechnologiessuchas
HTML,CSS,andJavaScriptplayinthearchitecturemodel.Youalsosawhowserversidetechnologies
suchasPHPandMySQLdatabasefitintothemodel.
Asidefromthetheoreticalmaterialprovidedinthisbook,youalsolearnedhowtoinstallandconfigure
alltherequiredsoftwaresuchasMicrosoftsWebserverIIS,PHPwithitspackagesandMySQL
database.
Youalsowentthroughhowtobuildstaticanddynamicwebpages.Createdaprototypeonyour
developmentmachineandwereguidedonhowtodeployawebsiteonahostingserverwithall
necessarybaseinformation.
Whilethisbookintroducedwhatseemslikeatonofconcepts,terminology,andsoon,itsmerelya
steppingstonetomoveyouforwardtoexploretheenormousworldofwebdevelopment.
429
ABOUTTHEAUTHOR
Riaz Ahmed is an IT professional with over twenty years of hardearned experience. He started his
careerasaprogrammerinearly90'sandiscurrentlyworkingastheheadofITwithareputedgroupof
companies.Hisareasofinterestarewebbaseddevelopmenttechnologies.Priortothisbook,hewrote
Create Rapid Web Applications Using Oracle Application Express (which is listed on Oracle
Corporationswebsite)andImplementOracleBusinessIntelligence.Youcanreachhimat:
Email:realtech@cyber.net.pk
BlogTheWebBook:http://thewebbook.blogspot.com/
BlogOracleAPEXandBI:http://OracleTutorialBooks.blogspot.com
Implement Oracle
Business Intelligence
http://www.amazon.com/ImplementOracleBusiness
IntelligenceVolume/dp/1475122012
http://www.amazon.com/CreateApplicationsOracle
ApplicationExpress/dp/1466350652
DownloadBookCodehttp://www.maqcon.com/test/download/TheWebBookCode.rar
Bloghttp://thewebbook.blogspot.com/2013/03/thewebbookbuildstaticdynamic.html
430