The Web Book

The Web Book
Build Static & Dynamic Websites

An ultimate resource to build static & dynamic websites
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.
Limit of Liability/Disclaimer of Warranty: The author make no representations or

warrantieswithrespecttotheaccuracyorcompletenessofthecontentsofthisworkand
specificallydisclaimallwarranties,includingwithoutlimitationwarrantiesoffitnessfora
particular purpose. No warranty may be created or extended by sales or promotional
materials. The advice and strategies contained herein may not be suitable for every
situation. This work is sold with the understanding that the author is not engaged in
rendering legal, accounting, or other professional services. If professional assistance is
required, the services of a competent professional person should be sought. The author
shallnotbeliablefordamagesarisingherefrom.ThefactthatanorganizationorWebsite
is referred to in this work as a citation and/or a potential source of further information
doesnotmeanthattheauthorendorsestheinformationtheorganizationorWebsitemay
provideorrecommendationsitmaymake.Further,readersshouldbeawarethatInternet
Websiteslistedinthisworkmayhavechangedordisappearedbetweenwhenthiswork
waswrittenandwhenitisread.
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
- Riaz Ahmed, Author

realtech@cyber.net.pk
YOU WILL LEARN
Internet and World Wide Web

Introduction to websites, web
pages, E-commerce, E-mail,
and many other areas related
to the world of web.
CHAPTER 1
THE WORLD WIDE WEB
AN INTRODUCTION
How to select a hosting

provider?
Server and client side scripting.
I am a great believer in luck, and I find that the harder I

work, the more I have of it.
Chapter1TheWorldWideWebAnIntroduction
1.1
The Internet and the World Wide Web
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.
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.
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.
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.
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.
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.
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.
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.
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
Choosing the right Hosting Company
TherearethousandsofWebHostingCompaniesoutthereandcounting.Howdoyouchoosetheideal
planforyourWebSite?ThekeyhereistounderstandwhatyourWebSiteneedsare.Onceyouknow
whatisrequired,youcaneliminatemanyoptions.Thesearethemostimportantpointsthatyouneedto
focuson:
HowmuchstoragespacedoesyourWebSiterequire?
HowmuchMonthlyTransfer(Bandwidth)doyouneed?
Howmanyemailaccountsdoyouneed?
Whattypeofdatabaseisrequiredforyoursite?
WhatScriptingLanguagesdoesyourwebsiteuse?
DoesyoursiteneedServersidescriptinglanguage?
Ifso,WhatServletTechnologydoesyourwebsiteuse?
WhatOperatingSystemshouldyougofor?
ShouldyouuseSHAREDhostingorDEDICATEDhosting?
10
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
1.4
What E-mail is and how it works?
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
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
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
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
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
YOU WILL LEARN
CHAPTER 2
About Markup Languages

All basic elements &
attributes in HTML
required to build a website
such as divisions, headings,
paragraphs, text
formatting, and more.
How to add web, email
links, and bookmarks to a
web page?
Incorporate images, lists,
and tables
HYPERTEXT MARKUP LANGUAGE

<HTML>
Your aspirations are your possibilities.
Forms and related controls

such as Radio buttons,
Checkbox, Dropdown list,
File input and Submit
buttons
Play videos on a web page
and
Whats new in HTML5?
17
Chapter2HypertextMarkupLanguage<HTML>
2.1
About Markup Languages
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
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
2.2
Your First HTML Web Page
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
2.4
Attributes in HTML
HTMLelementscanhaveattributes.WebpagecustomizationbeginswithHTMLattributes.Attributes
areresponsibleforcustomizingHTMLelementsandprovideadditionalinformationaboutthecontents
ofanelement.WhileprocessinganHTMLtag,thewebbrowserlookstotheseattributesasguidesfor
theconstructionofwebelements.Withoutanyattributevaluesspecified,thebrowserwillrenderthe
elementusingthedefaultsettings.
AttributesarealwaysspecifiedinthestarttagoftheelementandaremadeupoftwopartsNameand
Valueseparatedbyanequalssignasshowninthefollowingexampleforthe<a>element.
AttributeExample
NAME
<ahref=http://www.cnn.com.This is a link for CNN website</a>

VALUE
Figure22
UsageRecommendations
Attributevaluesshouldalwaysbeenclosedinquotes.Doublestylequotesarethemost
common,butsinglestylequotesarealsoallowed.
Attributenamesandattributevaluesarecaseinsensitive.However,recommendedwayisto
uselowercase.
23
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
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
Output
Books Review
Implement Oracle Business Intelligence
Create Rapid Web Applications Using Oracle Application Express
The Web Book
Implement Oracle Business Intelligence

This book is aimed at giving you insights into running your organization in a more intelligent fashion. It
not only presents the BI concepts, but also guides you to implement Oracle Business Intelligence using
real world scenarios.
Create Rapid Web Applications Using Oracle APEX

This book will walk you through to create a professional looking web-based database application.
The Web Book

This book teaches how to create professional looking websites using HTML, CSS, and JavaScript.
Top
37
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
Output
39
31.4 Play Videos on a Web Page

InHTML5youcanplaymovieclipandothervideostreamsusingthenew<video>tag.Thesrcattribute
specifiestheURLofthevideofile.Thecontrolsattributedisplaysvideocontrolswhichinclude:
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
31.5 New HTML5 Layout

HTML5introducesanewsetofelements(depictedintheillustrationbelow)thathelpwebpageauthors
describethestructureofthepage.Thenamesoftheseelementsindicatethekindofcontenttheycarry.
Forexample,theheadersitsinsideanew<header>element,thenavigationina<nav>element,andthe
articlesareinindividual<article>elements.Withthisstructure,screenreadersoftwaremightallow
userstoignoreheadersandfootersandgetstraighttothecontent.Similarly,searchenginesmight
placemoreweightonthecontentinan<article>elementthanthatinthe<header>or<footer>
elements.YoullseethislayoutthroughoutthefinalprojectinChapter6.
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.
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
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
Using JavaScript with HTML Forms
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
Referring Form Elements
Youcanrefertoaformelementeitherbyitsnameorbyitsindex.Forexample,thetwoexpressions
belowcorrespondtothefirstelementinthecontactform,thefnametextfield.
document.contactform.elements[0]
document.contactform.fname
Tofindaformobjectyouusethedocument.getElementById()method.Thefollowingstatementfindsa
textfieldcalledfnameandstoresitinthesFnamevariable:
sFname=document.getElementById("fname");
138
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
Validating Forms Data
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
Introduction to PHP and MySQL Database
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
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
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
Setup Environment for Server-Side Scripting
Tomakethingssimple,thisinstallationassumesthatyouhaveWindowsXPSP3(32bit)orhigher
operatingsystemandareintendingtouseIIS5.1orhigherasyourwebserver.Inthissection,youwill
performthefollowingtasks:
InstallInternetInformationServices(IIS5.1)onWindowsXPSP3
DownloadandconfigurePHP
SetEnvironmentVariableforPHP
ConfigureIIStoprocessPHPrequests
TestPHPinstallation
DownloadandinstallMySQLprerequisites
DownloadandsetupMySQLdatabase
TestMySQLinstallation
5.2.1
Install Internet Information Services (IIS)
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
Create PHP Script to Send Mail
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
$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
YOU WILL LEARN
CHAPTER 6
Build a website comprising

static & dynamic pages
WEBSITE PROJECT
Difference between static &

dynamic web pages
How to create web
Contact Form
Newsletter Subscription
Module
YOU must be the CHANGE that you wish to see in the

world.
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.
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
Use a Secure Connection
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.
6.3
Build Websites Static Pages
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
6.4
The Home Page
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
Step-2
Create Main Wrapper and <header> Elements
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;}
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
Step-3
Create Main Navigation Bar
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
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
Thisconcludesthepartofstaticwebpagecreation.Theseexercisesweredestinedtoconsolidatethe
crumbsyouwentthroughinHTMLandCSSpartsearlierinthisbook.Thefoundationhasbeenlaid.If
youfirmlygraspthesetechniques,youllbeabletodesignalmostanywebsite.Thingsarenotfinished
yet,letsmoveontobuffupourskillsevenmoreandlearnhowtoputlifeintoawebsite.
6.7
Make the Website Dynamic
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
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
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
6.8
Task 1 - Contact Form
Youdidsomeworkinthecontactpage(section5.12DealingwithForms)whereyoutookusers
commentsandstoredthemintheMySQLdatabasethroughaPHPscript.Letstakeastepforwardand
enhancethatformbyaddingsomemoreinputelements(radio,checkboxetc.)andincorporate
websitethemetogiveitaconsistentlookasshownbelow.
Figure67
245
Do It Yourself
Performthefollowingstepstocreatethispage.
Step-1
Create Database Table
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
Create Header, Navigation, Contact Form & Footer
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
6.10
Manage Website Dynamically - Admin Modules
Inthispart,youllcreatedifferentmodulestohelpadministratorsmanagethesite.Startingwiththe
loginmodule,youwillcreatepagesthatwillallowsiteadminstomanagecategories,products,orders,
andtheirownaccounts.Nowthatyouvebecomefamiliarwiththepagecreationprocedure;from
hereonward,Imgoingtoexplaincodefromrelevantfileswiththeprocessflowofindividualmodule.
6.11
Task 3 - Admin Login Module
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
Diagram1AdminLoginProcess
262
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
6.16
Purchase Products Over the Internet - Members Module
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
6.17
Task 8 - Member Login Module
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
Diagram12MemberLoginProcess
358
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
6.21
Task 12 - Display Products Catalog
TheProductsoptiononthemainnavigationbarcallsadynamicpage.Incontrasttootherneighboring
staticpages,thispagegrabsproductsfromthedatabasemarkedasfeaturedproductsthroughan
administrativetaskperformedearlier.Thevisitorcanalwaysseeallproducts,offeredbythecompany,
usingthesidebarlinksundertheCategoriessection.Moreover,visitorscanclickproductstitletosee
furtherdetailsofthatparticularproduct.
Figure625
382
6.25
Task 16 - Website Deployment
Aftercompletingthewebsiteandgivingitathoroughtestrun,yourereadytodeployitonahosting
serverfromwheretheworldcouldaccessit.Thefollowingstepsneedtobecompletedinorderto
accomplishthistask.
1. Hostthewebsite
2. InstallFileZillaFTPClientanduploadfiles
3. Accesscontrolpanel
4. Createablankdatabaseandadatabaseuser.Grantdatabaseaccessprivilegestothenewuser.
5. CallphpMyAdmintooltocreatedatabasetablesusingtheImportoption.
6. InstallPEARcoreandPEARMailpackages
Step-1
Hosting the Website
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
Step-2
Install FileZilla FTP Client and Upload Files
Afterpurchasingahostingplan,thenextstepistouploadyourwebsitefilestothehostingserverusing
someFTPclientsoftware.
FileZillaclientisacrossplatformgraphicalFTP,FTPSandSFTPsoftwarewithlotoffeatures,supporting
Windows,Linux,MacOSXandmore.Itisusedtotransferfilesbetweencomputers.Itisopensource
softwaredistributedfreeofchargeunderthetermsoftheGNUGeneralPublicLicenseandcanbe
downloadedfromhttp://filezillaproject.org/.InordertouseFileZillaclientonyourclientPC,youmust
disableFTPAccessFilterifyourebehindafirewallsuchasMicrosoftISAServer.
Figure630
420
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
Create Rapid Web Applications Using

Oracle Application Express
Implement Oracle
Business Intelligence
A practical guide to rapidly develop

professional web applications
Analyze the Past

Streamline the Present
Control the Future
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

The Web Book - Build Static and Dynamic Websites

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Web Book - Build Static and Dynamic Websites

Uploaded by

Copyright:

Available Formats

Build Static & Dynamic Websites

Limit of Liability/Disclaimer of Warranty: The author make no representations or

- Riaz Ahmed, Author

YOU WILL LEARN

Internet and World Wide Web

How to select a hosting

I am a great believer in luck, and I find that the harder I

The Internet and the World Wide Web

Choosing the right Hosting Company

What E-mail is and how it works?

YOU WILL LEARN

About Markup Languages

HYPERTEXT MARKUP LANGUAGE

Your aspirations are your possibilities.

Forms and related controls

About Markup Languages

Your First HTML Web Page

<ahref=http://www.cnn.com.This is a link for CNN website</a>

Implement Oracle Business Intelligence

Create Rapid Web Applications Using Oracle APEX

The Web Book

31.4 Play Videos on a Web Page

31.5 New HTML5 Layout

Using JavaScript with HTML Forms

Referring Form Elements

Validating Forms Data

Introduction to PHP and MySQL Database

Setup Environment for Server-Side Scripting

Install Internet Information Services (IIS)

Create PHP Script to Send Mail

YOU WILL LEARN

Build a website comprising

Difference between static &

YOU must be the CHANGE that you wish to see in the

Use a Secure Connection

Build Websites Static Pages

The Home Page

Create Main Wrapper and <header> Elements

Create Main Navigation Bar

Make the Website Dynamic

Task 1 - Contact Form

Create Database Table

Create Header, Navigation, Contact Form & Footer

Manage Website Dynamically - Admin Modules

Task 3 - Admin Login Module

Purchase Products Over the Internet - Members Module

Task 8 - Member Login Module

Task 12 - Display Products Catalog

Task 16 - Website Deployment

Hosting the Website

Install FileZilla FTP Client and Upload Files

Create Rapid Web Applications Using

A practical guide to rapidly develop

Analyze the Past

You might also like