Professional Documents
Culture Documents
Preface
Theoriginal'LearnJoomla!1.5Fast!'wasagreatintroductiontoJoomla!1.5bySaurabhR.Bhide.
Thisisarewriteforversion2.5.4withcorrections,updatesandadditionsbyTinusvandeWouw.
Thankyoufordecidingtoreadthisbook.WehavewrittenthisbookforyoutolearnJoomla2.5asfastas
possible.
Thisbookismeanttobereadcovertocover,andallyouhavetodoisreadapage,dowhatitsays,andgo
ahead.Aftercompletingallthetasksinthebook,youwillbeafluentJoomlauser,readytomaketypical
contentwebsites.
WhenIfirstcameacrossJoomla,Ifounditeasytoinstall,butabitdifficulttolearntheadministration.Even
moredifficulttolearnwashowtocustomizethesiteaspermyrequirements.Thereweremanytutorialsout
therethatexplaineddifferenttasks,butnotasingleonethatexplainedhowtoinstall,modifyandadministera
Joomlawebsiteaspermyneeds.Hence,IlearnedJoomlatheharderwaybytryingoutdifferenttutorials,
experimentingdifferentbuttonsintheadministration,andseeingwhathappens.Igraduallybecamefluentin
makingandadministratingJoomlawebsites.However,thebadpartisthiswholeprocesstook6months!
Now,wehavewrittenthisbookinsuchawaythatyouwilllearnallthatwithinasingleweekend,or2days.If
youhavestartedreadingthisbookthismorning,youwillbeabletomakeanytypeofJoomlawebsitesby
tomorrowevening.
So,telleveryoneyou'rebusy,ordersomepizzaanddrinks,andlearnJoomla!
Note:Toimprovereadabilityweremovedthe'!'fromJoomla!
Contents
InstallingJoomla.............................................................................................................................................................................6
InstallaLocalWebServerusingXAMPPorWAMP...............................................................................................................................7
InstallingJoomla2.5onyourPC............................................................................................................................................................8
ExploringtheFrontend........................................................................................................................................................................10
BasicsofJoomla....................................................................................................................................................................................11
YourFirstJoomlasite:Cattle.........................................................................................................................................................12
Step#1:SettheSiteName...................................................................................................................................................................13
Step#2:CreatePages...........................................................................................................................................................................14
Step#3:MakeMenuLinks....................................................................................................................................................................16
Step#4Removeallunwantedstuff.....................................................................................................................................................19
Tip:ChangingtheLogoandSlogan......................................................................................................................................................20
HowContentisStored..................................................................................................................................................................22
MakingyoursecondJoomlaWebsite............................................................................................................................................23
Step#1:Makeadrawingofthestructureofthesite..........................................................................................................................24
Step#2:Setthesitename....................................................................................................................................................................25
Step#3:MakeUncategorisedPages....................................................................................................................................................26
Step#4:CreateallCategories..............................................................................................................................................................28
Step#5:Addarticlesinthecategories.................................................................................................................................................30
Step#6:AddLinksintheMenu............................................................................................................................................................32
1:AddLinkstotheUncategorisedContent.....................................................................................................................................32
2:AddLinkstotheDepartmentpages............................................................................................................................................33
Step#7:Cleanup&FineTuning............................................................................................................................................................34
Makeaspecial'ContactUs'page.....................................................................................................................................................35
Extensions....................................................................................................................................................................................37
UseExtensionsfromInternet................................................................................................................................................................37
Placeamoduleinsideanarticle............................................................................................................................................................38
UsingaTemplate..........................................................................................................................................................................39
Someothertopics.........................................................................................................................................................................41
Security..................................................................................................................................................................................................41
SearchEngineOptimization(SEO).........................................................................................................................................................41
Uploadingthesiteonawebserver...............................................................................................................................................42
7stepprocedure...................................................................................................................................................................................44
Toconclude..................................................................................................................................................................................51
Appendiceswithhintsandtips.....................................................................................................................................................52
Appendix1Displayerrors(especiallyforv1.7)..................................................................................................................................52
Appendix2InstallanotherlanguageforControlPanel/Site/Content.................................................................................................52
Appendix3RemovetheFontSizebox.................................................................................................................................................53
Appendix4UsingtheTrash.................................................................................................................................................................53
Index............................................................................................................................................................................................54
License
Theoriginalbookaboutversion1.5islicensedundertheCreativeCommonsAttribution2.5IndiaLicense.For
moredetails,gotohttp://creativecommons.org/licenses/by/2.5/in/
InstallingJoomla
Joomlaisawebapplicatio
onwrittenusingPH
HP,andhenceitneeedsa'webserver'torun.
WorldWideWeb,yyouneedtohostitonawebhost.
TomakeaJoomlaWebsiteeavailableontheW
Howeveer,tolearnJoomla,,youcan(temporaarily)convertyouro
owncomputerinto
oawebserver,and
dInstall
Joomlaonit.Itisalsogreaattodoexperimentsbeforeimplementingonyoursiteo
onceitispublished
donareal
server.
Hence,installingJoomlao
onyourcomputerrequiresyoutodoinstallalocalserverfirst.
IfyoualreadyhaveawebserverwithPHPan
ndMySQLinstalled
donyourcomputer,youmaysimplysskipthefirst
step.
InstallaLocalWebServerusingXAMPPorWAMP
Installingawebserverusedtobedifficult,especiallybecauseyouhadtomanuallyconfigureittorunPHP.
Butnotanymore,thanksto'XAMPP'!ThisfreesoftwareinstallsanApacheWebServer,PHPandMySQLor
yourcomputerandconfiguresthesethreetoworktogether.Allyouhavetodoisdownloaditandinstall!
Fromwww.apachefriends.org/en/xampp.html(changethe
'en'to'fr'fortheFrenchversion)youmaydownloadXAMPP.
Differentversionsareavailablefordifferentoperating
systemssuchasWindowsXP,Vista,Linux,Mac,Solarisetc.
Selectthecorrectversionforyourcomputerandinstallitas
youwouldinstallanyprogram.
TostartXAMPP'sApacheserverandMySQL,run"xampp
control.exeintheXAMPPfolder,orgotoStart>AllPrograms
>ApacheFriends>XAMPPControlPanel.
Thenclickonthe'Start'buttonsforApacheandMySQL.
Ifonday2yourwebsitedoesnotwork,youprobablyforgotto
restartXAMPP!
Forautomaticstartduringyourlearningperiod,youmayclick
the'Svc'buttonsforApacheandMySQL.
Asalternative,(especiallyifXAMPPrunsveryslowashappensonsomecomputers)youmay
installWAMPfromhttp://www.wampserver.com.en/.Duringinstall,acceptalldefaults.
IfWAMPisnolongerneededyoushoulduninstalltheprogramtominimizememoryusage
andstartuptime.
InstallingJoomla2.5onyourPC
NowthatyouhaveawebserverreadywithPHPandMySQL,let'sinstalltheJoomlaCMS.
First,inExplorermanoeuvreto'C:\xampp\htdocs\'andmakeafolder'joomla25'(Note:IfyouuseWAMPyou
shoulduse'C:\wamp\www\andmakethefolderthere)'
DownloadthelatestversionofJoomlafromjoomla.orgusingthe'download'linkonthehomepagealso
downloadanupdateifpresent.Thenunpackthezipfile(s)totheJoomla25directorythatyoujustmade.
Now,youcanaccessthisfolderfromyourwebbrowserusingthepath'localhost/joomla25'.Soopenyour
browserandtypetheaddress'localhost/joomla25'init.YouwillbeshowntheinstallationscreenofJoomla.
Note.Thisdocumentassumesthatyouusefolder'joomla25'foryourJoomlainstallation.Ifyouinstall
Joomlainanotherfolder,usethatfoldernameinsteadofJoomal25!
Screen1'ChooseLanguage'letsyouselectthelanguagefortheinstallation(notforJoomla
itself!).Chooseyourlanguageandclick'Next'toseethenextscreen.
Screen2'PreinstallationCheck'showsallthesettingsofyourwebserverandwhethertheyareOKforJoomla.
Ifyouseearedonfordisplayerrorsseeappendix1.Click'Next'toproceed.
Screen3'License'isalicenseagreementthatyouhavetoagreeto.Click'Next'.
Screen4'DatabaseConfiguration'isspecifyingthedatabasesettings,includingthe
database,username,andpassword.Usethefollowingsettings:
DatabaseType:MySql(notMySqli!)
HostName:localhost
UserName:root
Password:leavethisfieldempty,otherwiseyouwillgetanerrormessage!
Databasename:joomla25
Tableprefix:accepttheproposedprefix(isdifferentforeachinstallation)
Click'Next'.
8
Screen5'FTPConfiguration'isforspecifyingFTPsettingtoJoomla.ButsinceweareinstallingJoomlaon
alocalcomputer,say'no'to'EnableFTPlayer'andclick'next'.
Screen6'Mainconfiguration'istospecifytheSitenameand
apasswordfortheadministrator.
Sofilltheformwithanappropriatenameforthesite,your
emailaddress,anadminname('admin'isOKfornow)and
anadministratorpassword.
Whileinthisstep,youshouldclickonthe'InstallSample
Data'buttonsothatyourwebsitewillinitiallyhavesome
sampledata(orcontent)thatyoucaneditordelete.
Afterclickingonthatbutton,thebuttontextwillchangeto
'Sampledatainstalledsuccessfully'.
Nowclickon'Next'.
Screen7'Finish'.Hereyoumustclick'RemoveInstallationFolder'tominimize
thechanceofbeinghacked.Dothisfirst.
IfyouwishtouseJoomlainanotherlanguagethanEnglish,click'Joomlainyourownlanguage?'toinstall
supportforyourlanguage.Thiswillguideyoutothelanguagepacksthatyoumayinstall(alsoseeappendix2).
Clickon'Site'toviewthesampledataor'Administrator'togototheloginpageoftheControlPanel.
Congratulations!YousuccessfullyinstalledJoomla2.5onyourcomputer!
ExploringtheFrontend
Nowthatyouhavesuccessfully
installedJoomla,youcanalways
accessthewebsitebytypingthe
address'localhost/joomla25'in
yourwebbrowser.
Thefiguretotherightshowsthe
defaultJoomlasitewiththesample
content.
Wewillshowyouhowtomodify
thissiteaccordingtoyourneedsin
thefollowingchapters.
Rightnow,justbrowsethesite,
clickingondifferentbuttonsand
tryingthemout.
Itisalsoveryinstructivetoreadthe
'GettingStarted'and'Using
Joomla!'pages.
10
BasicsofJoomla
Joomlaisa'ContentManagementSystem'(CMS),whichmeansthatitisasystemfor
managingdifferenttypesofcontent.
Allcontentisstoredinthedatabase
Wheneveravisitorvisitsthewebsite,thefrontendshowshimspecificcontent
fromthedatabase.
TheadministrativebackendofJoomlaallowsyoutoeditthecontentoradd
newcontent.Throughoutthisdocumentwewillcallthisthe'ControlPanel'.
Hence,managingaJoomlasiteismainlyaboutloggingintotheControlPanelandaddingoreditingcontentin
thedatabase.
So,whenyouseeaJoomlapoweredwebsite,itsfrontendshowsyousomecontentfromthedatabase.
Thedatabasecontainsalldata,fromthelinksinthemenutotheinformationaboutusers.
TheControlPanel(administrativeinterface)letsyoueditthisdatabase,givingyoutotalcontroloverthesite.
11
YourFirstJoomlasite:Cattle
NowthatyouhaveinstalledJoomlaonyourcomputer,let'screateyourfirstJoomlawebsite.
IfyouhaveinstalledJoomlaexactlythewayshownabove,yourwebsiteshouldbeaccessiblebypointingthe
browserto'localhost/joomla25'.YoushouldalsobeabletoaccesstheControlPanelofthewebsiteby
pointingyourbrowserto'localhost/joomla25/administrator'.
Youmayselectanytopicformakingyourfirstwebsite,butwe'vechoosingthetopic'Cattle'orCows.Wikipedia
hasaspecialpageaboutcattle:seehttp://en.wikipedia.org/wiki/cattle.WewillusetheinformationintheWiki
pagestopracticehowtomakeyourfirstwebsite.
Thiswebsitewillbeverysimple,andjustconsistof4pages.
Wewillmakethewebsitein4easysteps:
12
Step#1:SettheSiteName
Thisisreallyeasy.GototheControlPanelby
pointingyourbrowserto
http://localhost/joomla25/administrator/.
Loginwithusername'admin'andtheadministrator
passwordthatyouhadsetwhileinstallingthis
Joomla.YouwillbeshownthecoolControlPanelof
yourJoomlasite.Thelayoutdependsonthe
availablescreenresolution.
Clickonthe'GlobalConfiguration'
button.
Youwillseeaformwithdifferentfields.
Now,findthefield'SiteName'andspecifythenameoryoursite,
whichis'Cattle'inourcase.
Next,clickonthe'Save&Close'button(thetoprighthandsideofthe
screen).Youwillseeamessage'Configurationwassuccessfullysaved'.
Click'ViewSite'atthetopright.Dependingonyourbrowsersettings,youmayor
maynotseethetext'Cattle'inyourbrowser.
Note:Ifyouseemanylineswitherrormessagesratherthanadecentscreen,pleaseseeAppendix1.
Congratulationsondoingthefirstmodificationtoyoursite!
13
Step#2:CreatePages
ForourCattlewebsitewillmakefourpagesaboutCattle.Theseare:
1
Home
2
WordOrigin
3
Economy
4
Health
Itisveryeasytocreatesuchpages.JustgototheControlPanel(joomla25/administrator)if
youarenottherealready,andclickonthe'AddNewArticle'Button.
Youcanalsodothisbygoingto'Content'>'ArticleManager'inthemenuandclickingon
'AddNewArticle'.
Fillinthetitleforthepage("Home"),
leaveAliasempty(itwillbefilledinforyou)andselect
the'category'as'Uncategorised'.
ThenaddsometextintheArticleTextboxstartingwith
thetext"HomePage".Select(highlight)'HomePage'and
choose'Heading1'asstyle.
Clickonthe'Save&Close'buttonatthetopright.
Youwillbenowtakento'ArticleManager'fromwhere
youcaneditanyarticle,deleteanyarticleormakenew
articles.Here,clickonthe'new'buttononthetopright
tocreateanewarticle.
14
Forthe2ndpage'WordOrigin',again,fillinthemenunameandchoose'uncategorized'.Then,simplycopythe
relevantpartformWikiandpasteitinthetextbox.
NotethatJoomlaletsyouwritethearticles/pagesusingarichtexteditor,asshownintheabovepicture.This
meansthatyoucanmakethetextappearthewayyouwantit.Usethisrichtexteditorjustasifyouwoulduse
anywordprocessingsoftware.
Asforthefirstarticle,select(highlight)thetitle"WordOrigin"andchoosethestyle'Heading1'.
Toinsertimages,youshouldusethe'Image'buttonatthebottomleftoftherichtextbox.Ifasuitableimageis
notyetinyourdatabase(seethelist)thenyoushouldfirstuploadit.
Whenyouarereadyclick'Save&New'todirectlycreateanewarticle.Inthesameway,makethetwoother
pages'Economy'and'Health'.
Notethatthefourpagesthatcreatedarenotyetvisibleonthewebsite!Theywillbecomevisibleonlyafter
wecreateamenulinkforthem.
Nowthatwehaveallthefourpagesready,let'smoveontothenextstepandcreatemenulinksforthose
pages.
15
Step#3:MakeMenuLinks
TherearedifferentmenusinaJoomlawebsite,andyoucanaddlinkstothenewlycreatedpagesinanyof
thesemenus.Onthesamplesitehomepagewecanseethreedifferentmenusthesearedefinedintheused
Beez2'template'.
16
Now,chooseMenus>MainMenu,andthenclickon'AddNewMenuItem'tocreateanewmenulinkforone
ofourpages.
Inthenewscreenyoushouldtakethefollowingfourstepsforeachmenuitem.
1.Choosewhatkindofitemyouwanttoaddtothemenu.
Clickon'Select'nexttotheMenuItemTypebox.
Nowanewboxappearswhereyoushouldchoose
thetypeofmenuitem.Undertheheading'Articles'
clickon'SingleArticle'.
2.Choosethespecificitemyouwanttoadd
Ontherighthandsideunder'RequiredSettings'clickonthe
box'Select/Change'.Nowyouwillseealistofarticleson
multiplepages.Find'Home'(withtoday'sdate!)andclickit.
3.Enterthemenutitleasitappearsonthescreen.
Enter"Home"intheMenuTitlebox.
4.Specifythemenulocationi.e.whereinthemenustructurethisitemshouldappear.
Under'MenuLocation'makesurethat'MainMenu'isselected
andin'ParentItem'choose'MenuItemRoot'.
Now,inthetoprighthandcornerclick'SaveandClose'and...
youwillseeanerrormessage!Anothermenuitemwiththesamealiasexists!Continuefromstep2abovebut
instep3alsoenter"homecattle"inthe'alias'boxandclick'SaveandClose'.
YounowreturntothemenumanagerwhereyoucanseethecurrentstructureoftheMainMenu.
17
IfyouvisityourJoomlawebsitenowbypointingyourbrowserto'localhost/joomla25',there
willbetwo'home'linksinthemainmenu.Thesecondoneistheonethatyoujustcreated.
Clickonit,andyouwillbeshownthehomepagethatyouhadmadepreviously.
Well,notquite!ThereisextrainformationabouttheCategory('uncategorised'),publishdate,
writerofthearticleandthenumberofhits.Alsothetitleisshown,wherewealsoinserteda
menutitleinthearticle.Beforewewillmaketheothermenuitems,wewillchangethis.
FromtheControlPanelclickon'ArticleManager'andinthetoprighthandcorner,choose'Options'.Herewe
cansetthedefaultvaluesforarticles.Wemayoverridethesedefaultvaluesforeachseparatearticlewhenwe
createoreditanarticle.
Changethefollowingitemsto'Hide':'ShowTitle','ShowCategory','Show
Parent','ShowAuthor','ShowPublishDate','ShowIcons','ShowPrintIcon',
'Showemailicon'and'ShowHits'.Whenyourmousehoversabouttheoption
text,anexplanationisshown.Thenclick'Save'.
Whenyoulookatthepageagain(pressF5toupdatethepage),youwillsee
thattheextrainfoisgone.
Now,repeatthestepsabovetocreatemenulinksfortheotherthreepages.Youmayuseany
nameforthelinks,butrealizethattheremaybeanitemwiththesamealias...
Themainmenuwillnowlooklikethefigureontheright.
Nowwehavethefourpagesreadywithsomecontentinthemandmenulinkspointingat
them.However,westillneedtocleanthepage:
1 AllitemsthatarenotrelatedtoourCattleinformationshouldbecleanedup.
2 Whenthesiteisvisitedthrough'localhost/joomla25',the'home'pagethatyou
createdshouldbeshown.
3 Allotherlinksfromthemenushouldberemoved.
18
Step#4Removeallunwantedstuff
Thefigureshowsthepageasitisrightnow,too
manythingsareonthepage.
These'things'arecalled'modules'andareshown
inthepicture.Theonlyrequiredmoduleis'Main
Menu'(howeverwithlessmenuitems),theothers
arenotrequiredbyourCattlewebsite.Solet'shide
them.
Tohideunnecessarymodulesshowingonthe
page,gotothecontrolpanelvia
'localhost/joomla25/administrator'andlogin.
Now,click'ModuleManager'orusethemenu:go
to'Extensions'>'ModuleManager'.The'Module
Manager'letsyoumanageallthemodules.
Thereyouwillseethefirstpagewith20ofthe
currentlyinstalledmodulesonthesite.Thethree
pages(selectableatthebottom)containabout50itemsintotal.Youmayselectapageatthebottominthe
pageselectbar:
Nowusethetickboxatthetoptoselectallmodulesonthepage,butmakesureyou
uncheck'MainMenu'and'ThisSite'andthenclickonthe'Unpublish'buttonatthe
topright.Doingthiswillhideallmodulesexceptbothmenumodules.Whenyou're
doneclick'viewsite'toseetheresult!
Nowlet'scleanupthemainmenuandhideallthelinksotherthantheonespointingtoour4pages,andalso
makethe'home'pagethatyoucreatedasthedefaulthomepagetobeshownwhenyouseethewebsite.
19
GototheControlPanel,andopenthemenumanagerfor'mainmenu'bygoingto
'Menus'>'MainMenu'inthemenu.
Anewscreenappearsthatshowsalistofallthelinks
currentlyavailableinthemainmenu(seeright).
Youalsoseethetreestructurewiththesubmenus.
Tomakethenew'Home'pagedefault,firstfindthe
'home'linkthatyoucreatedbeforeitshouldnearthebottomof
thelist.Thenselectitbyusingthetickboxandthenclickon
(theHomebutton,topright).
PleasenoticethesmallstarintheHomecolumnanddoublecheck.
Tocleanupthemenuandremoveallthelinksotherthanrequired,justdolikeyoudidforthemodules,select
allthemenulinkswhicharenotrequired,and'unpublish'them,i.e.selectallthelinksexcepttheonespointing
tothe4pagesthatyoucreatedandthenclickonthe'unpublish'button.Doublecheckinthe'Status'column.
Tip:ChangingtheLogoandSlogan
TheJoomlalogothatyouseeonthetopleftofeverypageonthewebsiteisapartofa'template'wewillgo
intothisindetaillater.IfyouhaveacoollogofortheCattlewebsite,first,reduceitssizesothatitsheightis30
50pixels.AGIFfilewithtransparentbackgroundispreferred.
Choose'Extensions'>'TemplateManager',whichwillshowvarious
templates.Click'Beez2default',thetemplatewenowuseis,andyou
mayeditvarioussettings.Intherighthandcolumn,near'Logo',click
'Select'.Belowtheimagesclick'Browse'tochooseyourlogo,then'Start
Upload',soitappearsintheimages.Clickitandthenclick'Insert'.
Lastly,change'SiteDescription'(aniceplaceforaslogan)to"HeartforCattle"andclick'Save&Close'.
Click'ViewSite'toseethenewlogoandslogan.
20
Hereweare,withourcustomCattlewebsitewith4pagesthatyoucaneditanytimebyloggingintothe
ControlPanelandgoingto'articlemanager'.
TofinishthingsoffyoumaydeletetheFontSizeboxatthetop.Itisnotsomethingthatcanbedoneeasilyvia
theControlPanelandtheprocedurecanbefoundinAppendix3.
WehopeyouenjoyedmakingtheCattlewebsite!
21
HowContentisStored
ThecontentinJoomlaisthepagesofinformationtobeshownonthewebsite.Thereare2typesofcontent:
categorizedanduncategorized.
1. UncategorisedContent
Thisreferstoplainpagesthatareshownonthewebsite.YoucanedittheseusingtheControlPaneland
addasmanyofthemasyouwant.Thesepagesdonotbelongtoanycategoryhencetheyaretermedas
'uncategorised'.
2. CategorisedContent
Categorisedcontentalsoreferstopages,but
thesepagesbelongtoastructure,whichis
madeupofcategoriesandarticles.
A'category'maycontainsother'categories'
and'articles',whichcontainpagesofcontent
sotheyarealsocalled'contentitems'.
Therearenolimitationsthenumberoflevels
andyoumayusecategoriesandarticleson
thesame"level".
Thefigureshowsanexampleofasitehaving
informationaboutdifferentcars.'Cars'isacategory,havingtwoothercategories'Hatchbacks'and
'Sedans'
Thesecategorieshaveapageforeachcarinthatcategory.
22
MakingyoursecondJoomlaWebsite
Wewillnormallycreateawebsitein7steps:
Step#1: Makeadrawingofthestructureofthesite
Step#2: Setthesitename
Step#3: Createtheuncategorisedpages(Home,AboutUs,etc...)
Step#4: Createallcategories
Step#5: Addpages/contentitemsinthesecategories
Step#6: Addlinksforallthisstuffinthemenu
Step#7: Cleanup&FineTuning
Wewillfollowthese7stepstomakeawebsiteofacollege....
Forthisexercise,youshouldreinstallJoomla.
First,gotoC:\XAMPP\htdocs\joomla25anderaseallfilesandfoldersinthisfolder.IfyouuseWAMP,eraseall
contentinC:\WAMP\www\joomla25.
Thenusetheinstallationinstructionsasdescribedonpages8/9,howeverthistimewithoutthesampledata!
Ifyouwish,youmayalsoinstallJoomlainanotherdirectorye.g."college".So,firstmakeanewdirectorycalled
C:\XAMPP\htdocs\collegeandinstallJoomlathere.Justrememberthatinthiscaseyoushoulduse
"localhost/college"toviewthesiteand"localhost/college/administrator"tostarttheControlPanel.
Inthisfashionyoumayactuallyworkonmultiplewebsitesinparallel!Eachrequiresitsownfolderand
installationprocedure.
23
Step#1:Makeadrawingofthestructureofthesite
Let'smakeacoolcollegewebsiteusingtheJoomlainstancethatyoujustinstalled.Thinkofanimaginary
college.We'llnamethisimaginarycollege'BhideCollegeofEngineering'.
BeforemakinganyJoomlawebsite,youneedtodecideuponthestructureofthewebsite.Westrongly
recommendthatyoudrawthisstructureonpaperbyhand,anditwillbemucheasiertomakethesite.
So,here'sthestructure:
24
Step#2:Setthesitename
Thisiseasy.GototheControlPanelofthesitebypointingyourbrowserto
http://localhost/joomla25/administrator(orwhereeveryouinstalledJoomlaforthisexercise!).
LoginwithyourusernameandthepasswordthatyouhadsetwhileinstallingthisJoomla.
YouwillbeshownthecoolControlPanelofyourJoomlasite.
Clickonthe'GlobalConfiguration'button.Youwillseeaformwithdifferentfields.
Now,usethe'SiteName'Fieldtospecifythenameoryoursite,whichinourcaseis'Bhide
CollegeofEngineering'.
Notethatonthispageyoumayalsoplaceyoursiteonline/offlineandchangetheofflinemessage.
Next,clickonthe'Save&Close'buttonatthetopright.Youwillseeamessage'Configurationsuccessfully
saved'.Youmayalsoseethatthetitleofbrowsernowcontainsyoursitename.Congratulationsondoingthe
firstmodificationtoyoursite!
25
Step#3:MakeUncategorisedPages
Aslaidoutinthesitestructure,ourwebsitewillhave3pagesthatdonotbelongtoanycategory,andare
simpleplainpagesthatyoumayneedtoeditsometimes.Theseare:
Home
AboutUs
ThePrincipal
Itisveryeasytocreatesuchuncategorisedcontent.JustgototheControlPanel
(joomla25/administrator)ifyouaren'ttherealready,andclickonthe'AddNewArticle'
Button.Youcanalsodothisbygoingto'Content'>'ArticleManager'inthemenuand
clickingonthe'AddNew
Article'button.
Fillinthetitleforthepage,specify'category'as
'Uncategorised',addsomearticletext,givethe
text'AboutUs'thestyle'Heading1'clickonthe
'Save&Close'buttonatthetopright.
Congratulations!Youjustcreatedyourfirst
page!
Rightnowthispageisnotvisibleonthewebsite
frontend,becausethereisnolinkinthemenu
thatpointstothispage.
Wewilladdlinksinthemenulater(Step#6).
26
Afteryouclickedthe'Save&Close'button,youaretakentothe'ArticleManager',whereyoucanmanageall
thearticles/pages/content.Youwillnowseethepagethatyoujustcreatedistheonlyarticle.Later,other
articlesyoucreatewillbeaddedhere.
Ifyouwanttoeditanypage,justclickonitsnameorselectitusingthetickboxandclickthe'edit'button.Use
the'New'buttontocreatetheother2pages,i.e.the'Home'and'ThePrincipal'pages.Ensureyouaddatitleto
thearticletextandchoose'Heading1'asstyle.
Alsomakethe'ContactUs'pagewhereyoushouldaddsomenamesandtelephonenumbers.Whenyouaddan
emailID,itwillautomaticallyturnintoanemaillink.TomakeamorespecialContactUspage,seelaterunder
step#7.
IfyouwishyoumaynowjumptoStep#6andaddmenulinkstothesepagessoyoucancheckthemoutand
returnherelater,oryoumaynowcontinuetothenextstepandmaketherestofthecontentfirst.
27
Step#4:CreateallCategories
Creatingacategoryisveryeasy.Youneedtogoto'CategoryManager',whichyoucandoby
clickingonthe'CategoryManager'buttononthemainpageofControlPanel,orbyusing
themenuthrough'Content'>'CategoryManager'.
Note:YoucanreturntothemainpageortheControlPanelbyclicking'Administration'in
thetop.Youmayalsousethemenuthrough'Site'>'ControlPanel'.
Onceyouareinthe'CategoryManager',youwillseealistofalltheexistingcategories.Justclickonthe'New'
buttontocreateanewcategory.
Categoriesshouldbemade"topdown",sostartwiththecategorythatishighestinthestructure.So,westart
with'Departments'.
Writethenameforthecategoryas'Departments'andgodownandwriteadescriptionforthiscategoryinthe
'Description'richtextfield.First,writeaheading"DepartmentalDetails"(Style:Heading1).Thenentera
descriptione.g.'Thissectioncontainsalltheinformationaboutthedifferentdepartmentsinourcollege'.We
justdothesameaswhatwedidbefore,whenweaddedanarticle.
Writeanydescription,andclickon'Save&Close'button.Youwillseethatthecategoryisaddedinthelist.You
caneditthedescriptionorchangethenameofthecategorywheneveryouwantbycomingbacktothe
'Categorymanager'.
Wesuggestyouhavealookatthesite
structurethatwehavedesigned,and
tickitoffallitemsthatarefinishedwith
acheckmark.
Now,let'smaketheothercategories!
28
Youcancreatecategoriesbygoingto'CategoryManager'.StartfromtheControlPanelor
usethemenuthrough'Content'>'CategoryManager',thenclick'New'.
Now,wejusthavetocreateacategoryforeachdepartmentofourcollege.Todothis,click
onthe'New'button
Writethenameofthecategory(i.e.thename
ofthedepartment)astitle.
Now,intheParentbox,select'Departments'
asthiscategoryisadepartment.
Refertothechartifyouaregettingconfused.
Writeasmalldescriptionofthedepartmentin
the'Description'box.
Thenclickonthe'Save&Close'button.You
willbetakenbacktothecategorymanager.
Repeattheprocessforallthedepartments
Tip:Youmayalsouse'Save&New'tosavethe
categoryandstarttomakeanewcategory
immediately,ratherthangoingviathe
CategoryManager.
Now,alsomakethecategories'ElectricalEngineering'and'CivilEngineering',bothwith'Departments'as
parent.AlsocheckhowtheCategoryManagerpageshowsthetreestructureofthecategories.
29
Step#5:Addarticlesinthecategories
Nowthatwehavemadeacategoryforeachdepartment,eachdepartmentneeds2or3pagesfordisplaying
informationaboutthedepartment.Forexample,themechanicalengineeringdepartmentneeds3pages
1
Faculty:Apageaboutalltheteachersinthedepartment
2
Facilities:Apagetoshowoffallthelabsandmachinery
3
Projects:Apagetoshowoffallthecoolprojectsdonebystudentsinthisdept.
Youcancreatethecategorisedpagesthesamewayyoucreatedtheuncategorisedpages.Theonlydifference
isthatyounowhavetospecifythecategory.Refertostep#3ifyouforgothowtoaddapage/article.
Belowishowwecreatedthe'Faculty'pageoftheMechanicalEngineeringdepartment.
30
Inthesamefashionmaketheremainingfourarticles:'Facilities','Projects'forMechanicalEngineeringand
'Faculty'and'Projects'forElectricalEngineering.
Makesurethatyouselectthepropercategoryforeachpage.
31
Step#6:AddLinksintheMenu
Onceyoucreatedallthedifferentpagesforeachdepartment,it'stimetoaddlinkstoallthecontentinthe
menu.
1:AddLinkstotheUncategorisedContent
LoginintotheControlPanel.
Goto'Menus'>'MainMenu'inthemenu,
thenclickon'AddNewMenuItem'.
Foreachmenulinkwewilltakethefollowing
foursteps(alsoseepage17):
1. Specifythemenutype:Clickon'Select'in
'MenuItemType'.Aboxappears.Inthe
box,under'Articles'select'SingleArticle'.
Theboxwillclose.
2. Specifythemenuitem:Ontherighthandsideclick'Select/Change'.Choose'Home'inthearticleslist
3. EntertheMenuTitle:Enter"Home"inthe'MenuTitle'field.
4. Specifythemenulocation:Inthiscasethereisnoparentinthemenustructure,sounder'ParentItem'
select'MenuItemRoot'.
Nowclick'Save&Close'tosavethemenulink.Click'ViewSite'toseetheresultofaddingyourfirstmenuitem!
Whenaddingmenuitemsitisagoodideatotickoffthemenulinksinourdiagram...
Weworkourwaydowninthemenulayers,sowedefinethefiverootmenuitemsfirst,followingthefirst3
stepsabove.
Whenaddingthecategory'Departments'instep1,intheboxselect'ListallCategories'(under'Articles'),then
instep2,obviously,pickthecategory'Departments'fromthecategorylistanduse'Departments'instep3.
32
2:AddLinkstotheDepartmentpages
Theselinksaremadewiththesame4stepsasthefirstmenuitemabove.Wehave8menuitemswithaspecific
parent:3categoriesand5articles.
Wewillfirstcreatealinkinthemenufor
eachcategory.Click'New'andstartwith
'MechanicalEngineering'.
1. Intheboxselectunder'Articles'select
'ListallCategories'
2. Pickthecategory'Mechanical
Engineering'fromthecategorylist
3. Fillin"MechanicalEngineering".
4. Select'Departments'sothatthemenu
item'MechanicalEngineering'isa
submenuunder'Departments'.
Maketheothertwocategoriesinthesameway.
Also,addtheremaining5articlesinthesamefashion.Instep1choose'SingleArticle',instep2picktheright
articlealsoseethecolumncategory.Instep4pickthemenuwherethearticlebelongsto,e.g.forarticle
'Faculty'select'MechanicalEngineering'.
Nowclick'ViewSite'andyouwillseethemainmenuaswecreatedit.However,wewishtohavethemenu
item'ContactUs'toappearafter'Departments'.Tomoveamenuitemdoasfollows.
Withthesmallbluearrowsinthecolumn'Ordering',youmaymovemenuitemsinthemenutree.Clickonthe
blue'MoveDown'arrownextto'ContactUs'andheypresto,itmovesdownindeed!
Inthesamewayyoumaychangetheorderofthedepartmentsandthearticleseasily.
Whenyouarehappywiththemenustructure,let'scleanuptheinformationwedontneed!
33
Step#7:Cleanup&FineTuning
First,doublecheckifthe'Home'linkofthissiteasthe'default'link.Goto'Menus'>'mainmenu'inthetop
menuofadminpanel.Ifalliswell,thereshouldbea symbolinthe'Home'column.Ifnot,clickthecheckmark
beforehomeandthenthe symbolinthetoprighthandofthepage.
Now,weshoulddisablesomearticleoptionstopreventunnecessaryinformation.Goto'ArticleManager',click
theOptionsbuttonandhide'ShowTitle','ShowCategory','ShowParent','ShowAuthor','ShowPublishDate'
and'ShowHits'andclick'Save'.
Bytheway,ifyouwishtohideorshowthetitleisamatterofpersonalpreference.
Weprefertohavethetitlewithinthearticle/categorytext,butothersprefer
tohavenotitletextinthearticleitselfandtoshowtheArticleorCategory
Title.Itis,however,stronglyadvisedtobeconsistentwithinyourwebdesign
toavoidconfusion!
Thereisaloginboxonthepage.Thisisamodulethatwemaydisable.Goto
theModuleManagerandcheckthetickboxbefore'LoginForm',thenclick
'Unpublish'.Notetheredsymbolinthe'Status'column.
Whileweareatitthereisalsoamodulecalled'Breadcrumbs'thisshows
thetext'Youarehere:'andthemenupathwithinthesite.Youmaywant
tounpublishthistoo.
OntheHomepageyouwillstillseeboththeMenutitleaswellasthe
headingfromthearticletext.Choose'Menus'>'MainMenu'.Click
'Home',thenontherighthandside,click'PageDisplayOptions'and
choose'no'for'ShowPageHeading'.Thenasusual'Save&Close'.
34
Ifonthewebsiteyouclick'Departments'inthemainmenu,youwillseethatthereisadescriptionofthe
subcategoriesandanarticlecount.Inadditionyouwillsee
thedescriptionof2linkstothedepartments,ratherthan3!
First,tomaketheextrainfodisappear,gototheCategory
Manager,thereclick'Options'andundertab'Categories'hide
'SubcategoriesDescriptions'and'#ArticlesinCategory'.
Toshowall3categories,click'Show'forEmptyCategories.
Therearenoarticlesaddedfor'ElectricalEngineering'(hence
itisconsideredempty),butwedohaveinformationinthe
Categorypage!
Makeaspecial'ContactUs'page
IntheControlPanelclick'Components'>'Contacts'>'Contacts'(totheright),thenclick'New'.Nowadda
contact:firstenteraName.Ontherighthandsideclick'ContactDetails'andfillinname,email,streetname
andnumberandcity.Youmayalsofindaphotoofthecontactandinsertit.Click'Save&New'andaddanother
contactinthesameway.
Nowaddthistothemainmenu:'Menus'>'MainMenu'>'AddMenuItem'.Asusual,first,chooseamenu
itemtypenowfromtheselectionscreenchoose'ListContactinaCategory'.Specifythetitle("ContactUs"),
then'Save&Close'.Youwillgetanerrormessage:specifyanaliasandclick'Save&Close'again.
NowchooseViewSitetochecktheresultonthesecondContactUsmenuitem.Youwillseethetwopersons
youenteredclickononeofthenametoseethecontactform!
35
ToEditAnyPage...
Thebeautyofcontentmanagementsystemsisthatcontentoncewrittencanbechangedanytimebythe
webmasterusingtheControlPanel.
Butfirst,let'senablemoreoptionsintheWYSIWYGtexteditorthatyouused!Thiseditorisa'plugin'small
programsthatmakelifeeasierforus.Choose'Extensions'>'PluginManager'andanewpageopens.Click
'EditorTinyMCE'andthen,ontherighthandside,for'Functionality'choose'Extended'.'Save&Close'.Now
youhavemanymoreoptionstomanipulatetheArticleandCategorytext!
Nowthatwehaveawebsiteforourengineeringcollege,youcanchangethecontentsofanypageeasily.Goto
thearticlemanager(bynowyouknowhowtodothat!)andclickthepageyouwanttoeditfromthelist.And
thereyougo,youareshownallthesettingsandcontentofthatpagethatyoucaneditandsave.
Youmayexperimentwiththevarious'Options'settingsintheArticleManagerandtheCategoryManager.You
see,therearemanyoptionsanditmaybeoverwhelmingatfirst.Justexperimentwiththemtoseetheeffect
andafterawhileyouwillfeelcomfortabletofindwhatyouneed.
Wheneditinganarticle,youmayalsosetoptionsonlyforthatpage.Hereyoucandecidetooverruletheglobal
settingsassetontheArticlesMenupage.Similarly,wheneditingaCategory,youmayalsooverruletheglobal
settingsassetontheCategoriesMenupage.
36
Extensions
ExtensionsliterallyextendthefunctionalityofJoomlaforthevisitorofyourwebsite,orfor
yourselfaswebdesigner.ExtensionsareComponents,Modules,PluginsandTemplates.
ComponentsprovidenewfunctionalitytoJoomlasuchasBanners,Contacts,RSSfeeds,Web
links.Oncemade,youmayaddcomponentstopages,categoriesormenusinyourwebsite.
Openthemenuitem'Components'foralist(seetherighthandfigure)
Modulesgiveviewersofawebsiteusefulinformationorinteractivefunctions.
Examplesare'Articlesmostread','login','mainmenu',pollsalsoseepage19.
Fromthecontrolpanel,clickon'ModuleManager'toedit,publishorunpublishvariousmodules.
Pluginsmakelifeeasierforyouaswebdesignertheyaddnofunctionalityfortheviewer
ofyourwebsite.AgoodexampleistheWYSIWYGeditorTinyMCE.
Inthemenu,click'Extensions'>'PluginManager'toseealistofplugins.
Templatesdefinewhatyourwebsitewilllooklike.Seethenextsectionforamoreextensivedescription.
UseExtensionsfromInternet
OnInternet,manyextensionsareavailable.Asanexerciselet'sinstall'RapidContact',whichisan
alternativeforthebuiltincontactform'ContactUs'.First,downloaditfromthefollowinglink:
http://extensions.joomla.org/extensions/contactsandfeedback/contactforms/8219.
Thenstart'ExtensionManager'.Choose"Upload
PackageFile"andbrowsetothelocationofthe
downloadedfile,thenclick'Upload&Install'.
Youwillseeamessage"InstallingModulewasSuccessful".
37
Note:Notallextensionsaresafe!Pleasecheckhttp://docs.joomla.org/Vulnerable_Extensions_Listforsecurity
informationofmanyextensions.
SeeAppendix2foranotherexamplehowyoucanusetheextensionmanagertoinstallalanguagepack.
Placeamoduleinsideanarticle
Nowofcourseyouwishtousethismoduleinanarticle!Let'sinsert"RapidContact"inanarticle.
Firstgoto'Extensions'>'PluginManager'andmakesurethat'ContentLoadModules'isenabled!
Start'Extensions'>'ModuleManager'andedit'Rapid
Contact'.FillinaTitleandauniquenamefor'Position'e.g.
"rapidcontact"(oneword,noquotes).
AlsocheckitsStatusissetto'Published'.
Under'MenuAssignment'choose'Onallpages'andonthe
righthandsidespecifytheemailrecipient.'Save&Close'.
Now,opentheArticleorCategorywhereyouwanttoinsertthemoduleand
typethetext{loadpositionrapidcontact}(includingthebrackets).'Save&Close'.
ThiswillfindtheRapidContactmoduleandplaceitwhereyouenteredthetext!
Note1:Ifyoucut&pastethetext{loadpositionrapidcontact}ratherthantype
thetext,unwantedHTMLmaybeincludedcausingitnottowork.
Note2:Sendinganemailfromthismodulewon'tworkfromwithinXAMPPor
WAMPbecausethereisnoemailmoduleinstalled...
Thenextsection'UsingaTemplate'givesyouanexamplehowyoucaninstallandactivateatemplate.
38
UsingaTemplate
AJoomlatemplateprovidesadesignforJoomlathatisusedtodisplaythecontentlayout,fonts,colours,
locationoflogo,menusetc.Usinganothertemplatedoesn'tchangeitscontents,itchangesthewayitlooks.
Note:itmayhappenthatsomemodulesaresimplynotvisibleduetodifferentormissinglocationdefinitions.
Asanexperiment,fromtheControlPanelclick'TemplateManager'(orfromthemenuchoose'Extensions'>
'TemplateManager').YouwillseethetemplatesthatareintheinstallationpackageofJoomla:3templatesfor
thewebsiteand2templatesfortheControlPanel.
Thetemplate'Beez2'isthetemplatecurrentlyinuse(seethe inthe'Default'column).Tickthecheckboxin
frontof'Beez5',thenclick'MakeDefault'.Notethatthe symbolnowmovesto'Beez5'.Next,seewhatthe
websitenowlookslike.
Oftenyoumaychangeafewcharacteristicsofthetemplate.Inthe'TemplateManager',clickon'Beez5'.Onthe
righthandsideunder'AdvancedOptions'youmayforinstancechangethelogo(300x35pixels),thesitetitle
andthedescription.Manytemplatesonlyhaveafewitemsthatyoucanchange.
Special:TochangethebanneryoushouldnavigatetoC:\xampp\htdocs\joomla25\templates\beez5\images\.
Open'fruits.jpg'inyourfavouriteimageeditor,andmakewhateverchangesyouwant.Saveitbackwiththe
samenameandextension,format1050x180pixels.
Unfortunatelythelocationandnameofthebannerfilediffersforeachtemplate.Itmaybefoundin'index.php'
inthetemplatedirectory,inthiscaseC:\xampp\htdocs\joomla25\templates\beez5\index.php.
TherearemanywebsitesthatgiveyoufreeandpaidJoomlatemplateswhichyoucanuseonyoursite.For
instance,checkoutjoomla24.comthathasover3000freetemplates.
Onewordofwarning:ifyouuseatemplatedesignedforapreviousversionofJoomla(1.0,1.5,1.6or1.7),it
mayoritmaynotworkwithinJoomla2.5!Justtry...Youmayalwaysgobacktothetemplatethatworked!
39
Let'stryoutafreetemplatefromcompanyPixelpointCreative.Thenameofthetemplateis'Gratis'anditis
availableathttp://www.pixelpointcreative.com/downloads/finish/53gratis/116gratistemplate.html
Toinstallthetemplate,loginintotheControlPanelandgoto'Extensions'>'ExtensionManager'.
YoumaydownloadthetemplatetoyourPCandinstallitfromthereasshownintheprevioussection,butwe
mayalsousetheURLabove:inthe'InstallfromURL'box,copytheaboveURL.
Click'Install'.Joomlawillautomaticallydownloadandinstallthetemplate.Youwillgetasuccessmessageanda
screenshotofthetemplate.
Now,let'ssetthistemplateasthedefaulttemplate.Asbefore,goto'Extensions'>'TemplateManager'inthe
topmenu.SelecttheGratistemplateusingthetickboxattheleftofitsnameand
thenclickonthe 'MakeDefault'buttonatthetopright.
Nowviewyourwebsite.Itwillnowlooklikethescreenshotthatyouhadjustseen.
YoucanusethissamemethodtoinstallanyJoomla2.5template.Tocustomizeit,justgotothefolderwhereit
isinstalled,andmakechangestoimages,CSSfiles,etc.Ifyouarenotcomfortablewiththoseterms,wewould
advisenottocustomizetemplates.
Let'sfaceit:thereisalwayssomethingnotquiterightwiththetemplateyouuse!Ifyouwantyourownunique
template,thereisnice(butnotfree)programthatyoumayusetodesignyourowntemplate.Itiscalled
'Artisteer'useGoogleittofindit.
40
Someothertopics
Security
Joomlaisverysecure,however,hackersarealwaystargetingwebsites,soyoushouldtakesomemeasures.
First,donotuse'admin'asusernameandusealong,difficulttoguesspassword,preferablewithsomenon
standardcharacters.
Also,onlyuseextensionsthataresafe!Checkouthttp://docs.joomla.org/Vulnerable_Extensions_Listbefore
youinstallanyextension.
Thereisalotmoretosayaboutsecuritye.g.seehttp://docs.joomla.org/Category:Security_Checklist.
SearchEngineOptimization(SEO)
YouwantyoursitetobefoundbyGoogleandothersearchengines.Searchenginescontinuouslyscanwebsites
using'robots'andcheckoutaspecialfieldonthewebsite,called'Metadata'.Youmayaddkeywordsinthese
Metadatatoprovidetosearchengines.
FromtheControlPanelclick'GlobalConfiguration'.
Under'MetadataSettings'enteragooddescriptionforthe
siteandkeywordsyouwanttobefoundon.
The'Robots'settingsdetermineiftheyshouldstoptheir
searchatthehomepage(don'tfollowlinksonthepage)and
ifthehomepageshouldorshouldnotbeindexedinthe
searchenginesresult.
SEOisacomplexsubjectandevenbooksarewrittenonSEO!
41
Uploadingthesiteonawebserver
Tomakeyourwebsiteavailableontheinternet,youneedtouploaditonawebhost'sserver.Touploadand
setupyourJoomlawebsiteonawebhost'sserver,thewebhostmustofferthese3services:
1. PHP
2. MySQL
3. FTP
JoomlarequiresPHPandMySQL,andtheFTPfeatureletsyouuploadfilestotheirserverusingtheFTP
software.
Youcansearchthewebforwebhoststhatprovidethesefeatures.Manywebhoststodayalreadyprovidepre
installationofJoomla,whichmakesthingsmucheasierforyou!
Eachwebhostisdifferent.Belowwe'llshowthestepsusingafreewebhostthatprovidescpanel/vistapanel
thisisamanagementconsoleforadministratingwebhostingaccounts.Youcanuseanywebhostthatoffers
similarservices.
Foryourwebsiteadministration,ifyouhavetheoption,doNOTspecify'admin'asloginname,butyourown
nameoraliasandusealong,difficulttoguesspasswordtomakeitmoredifficultforbadguystohackyoursite.
Itisagoodideatocheckhttp://docs.joomla.org/Category:Security_Checklisttomaximizethesecurityofyour
site.
Onceyouregister,activateyouraccountandlogin,youwillbesuppliedwiththefollowingdetails.Thenext
pageshowsthedetailsI(Saurabh)wassuppliedwith.
42
43
7stepprocedure
Printoutthedetailsofyouraccountifyoucan,becauseyouwillneedtorefertothemseveraltimes.
Now,wehavetocopyourlocalJoomlaWebsitetotheserver.Thiswillbedonein7steps.Eachstepis
essential.Let'slistoutthestepsfirstandthenI'llshoweachstepindetail.
1
LoginintotheCpaneloftheserver
2
Createadatabaseontheserver
3
Exportthedatabasefromyourcomputer
4
Importthedatabaseintheserver
5
Changetheconfigurationfileofthelocalwebsiteasperyouraccount'sdetails
6
LoginintotheserverusinganFTPprogram
7
UploadtheJoomlawebsiteontheserverusingFTP
Now,let'sseehowtoperformeachstep,andyourwebsitewillbeonlineinafewminutes!
Step1:LoginintotheCpaneloftheserver
Refertotheaccountsettingsprovidedtoyoubytheserver,andyouwill
findalinktoyourCpanel.Inmycase,thelinkiscpanel.example.com.
LoginwiththeCpanelusernameandpasswordgivenintheaccount
details.
44
Step2:Createadatabaseontheserver
OnceyouareloggedintotheCpanel,clickonthe'MySQLdatabases'linkinthedatabaseslist.Youcanenter
anynameforthenewdatabase.
Asnameforthenewdatabase"database_for_joomla"wasentered.
Youcanenteranyname.Yournamewillbemodifiedbythesystem
withsomecomputergeneratedprefix.
Therealnameisshown
whenyouclickthe'create
database'button.Rememberorwritedownthisname.Asyoucan
seeinthepicture,Igotaname
'zoka_1988637_database_for_joomla'
Step3:ExporttheJoomladatabasefromyourcomputer.
OpenyourlocalPHPmyAdminbygoingto
localhost/phpmyadmin(orwhereveryourlocal
phpmyadminis).
Inthedatabaseslist,selectthedatabaseinwhichyou
haveinstalledJoomla.Inmycase,itis
'database_for_joomla'.
Onceyouselectthedatabase,youwillbetakentothe
controlscreenofthatdatabase.
45
Nowyouwillseeabuttonnamed'Export'inthetop
tabs.Clickit.
Youwillbepresentedwithallthesettingstoexportthedatabase.Forgetabouttherestofthesettings.Justtick
onthe'saveasfile'boxandclickon'Go'.
YourbrowserwillgiveyouanSQLfile
whichyouhavetostoreonyourcomputer.
Rememberwhereyoustoreit,becauseyou
havetogiveittotheserver's
PHPmyAdmin.
Ok,youaredonewiththethirdstep.'
46
Step4:Importthedatabaseintheserver
Gotothecpanelofthewebhostandclickon'phpMyAdmin'intheDatabases'
list.Then,clickonthelinkforconnectingtothisdatabase.
Youwillbetakentothewebhost'sphpMyAdmin.
Clickonthe'Import'buttononthetoptab.
Clickonthe'Choose'buttonandselectthe
filethatyouhadsavedinstep#3.
Clickon'Go',andyouwillbepresentedwith
asuccessmessage.
47
Step5:ChangethelocalJoomlaWebsiteconfigurationasperthewebhostingaccountanddatabasedetails
GotoC:\xampp\htdocs\joomla25\.First,makeabackupcopyof'configuration.php'andtheneditit,for
instancewithWordPad.Thisfilehasalistofvariablenamesandvalues,forexample:var$editor='tinymce';
Youwillneedtochangethefollowinglinesofthisfile:
var
var
var
var
var
var
$log_path = 'C:\\xampp\\htdocs\\joomla25\\logs';
$tmp_path = 'C:\\xampp\\htdocs\\joomla25\\tmp';
$host = 'localhost';
$user = 'joomla_user';
$db = 'database_for_joomla';
$password = 'password';
asperthedetailsofyourwebhostingaccount.
The$log_pathwillnowbethe'documentroot'pathasgivenbythewebhostappendedwith/logsin
caseofUnixbasedwebhosts,and\logsincaseofwindowsbasedwebhosts.Thevaluefor$hostwill
bethe'MySQLHostname'asgivenbythewebhost
Thevaluefor$userwillbethe'MySQLUsername'asgivenbythewebhost
Thevaluefor$dbwillbethenameofthedatabaseyoucreatedinstep4above
Thevaluefor$passwordwillbethe'MySQLPassword'asgivenbythewebhost
Hence,ournewconfigurationfilewilllooklikethis:
var
var
var
var
var
var
$log_path = '/home/vol4/freezoka.com/zoka_1988637/htdocs/logs';
$tmp_path = '/home/vol4/freezoka.com/zoka_1988637/htdocs/tmp';
$host = 'sql107.example.com';
$user = 'zoka_1988637';
$db = 'zoka_1988637_database_for_joomla';
$password = 'the mysql password';
That'sit,we'redonewiththefifthstep.
48
Step6:LoginintotheserverusinganFTPprogram
YouneedFTPsoftwaretouploadthesite.Werecommend'FileZilla',freeFTPclientsoftware.Itisavailablefor
windows,MacandLinux.
Youcandownloaditfromhttp://filezillaproject.org/download.php?type=client
Afterdownloadingandinstallingthesoftware,openitandentertheFTPdetailsgiventoyoubythewebhostin
thetopbarandsayQuickconnect.
Step7:UploadtheJoomlaWebsiteontheserverusingFTP
Nowthatyouhaveloggedintotheserver,youwillbeshownthedirectorystructureontheserverintheright
column,andyourlocalcomputer'sfolderstructureintheleftcolumn.
49
First,gotothefolderinwhichJoomlaisstoredon
yourcomputerintheleftcolumn,andthen
doubleclickonthehtdocsfolderontheright
columntoenterinthehtdocsfolder.Younow
havetotransferallthefilesofJoomlainthis
htdocsfolder.
Doingthisisverysimple.JustselectalltheJoomla
filesintheleftcolumn,rightclickontheselection,
andclickon'upload'.
Thetransferwilltakelotsoftime,sincethereare
thousandsoffilesthatneedtobetransferred.
Viewingandeditingyourwebsite
Finally,yourwebsiteisuploadedandreadytouse
ontheinternet.Allyouhavetodonowisgoto
theURLofyourwebsite,andyouwillseeitin
action!
ToopentheJoomlaControlPanelofyourwebsite,
justadd/administratortothewebsite'sURL.From
hereyoumayedityoursiteasusual.
50
Toconclude
Goingahead..
NowthatyouknowhowtobuildabasicwebsiteusingJoomla,youcanexplorethelimitlesspossibilitiesJoomla
hastooffer.
Subscribetothehttp://joomla.org/blog,readmoreadvanceddocumentationonthewebsite,andbuild
complexwebsites!
Printingthisdocument
Savepaper!Ifyoureallywishtoprintthisdocument,print2pagesononeside(caneasilybedonewith
AcrobatReader)andprintdoublesided.
Commentsandsuggestions
Ifyouhavecommentsorsuggestionsforthisbook,pleasefeelfreetowritetojoomla@vdwouw.net.
FinalWords
Thankyouforreadingthisbook.Wehopeyouhaveasmuchfunreadingitaswehadmakingit!
Andaboveall:HAVEFUN!
51
Appendiceswithhintsandtips
Appendix1Displayerrors(especiallyforv1.7)
Tocorrectdisplayerrorslike'StrictStandards:NonstaticmethodJLoader...',editc:\xampp\php\php.iniand
changedisplay_errors = Ontodisplay_errors = Off
StopandthenrestartApacheviathexamppcontrolpanelforthenewsettingstotakeeffect.
Appendix2InstallanotherlanguageforControlPanel/Site/Content
Downloadalanguagepackfromhttp://community.joomla.org/translations/joomla16translations.html.
Forthisexercise,wewillassumethe'French_frFR_1.7.3_lang_pack'othersgointhesamefashion.
FromtheControlPanelclick'Extension
Manager','Browse'tothedownloadlocation
andthenclick'Upload&Install'.
Next,fromthetopmenuchoose'Extensions'>'LanguageManager'.Underthetab'InstalledSite'youmay
setthelanguageyoupreferwiththe symbol.Youmaydothesamefor'InstalledAdministrator'.
Undertab'Content'youshouldclick'New'and
enterthefollowing:'Title':"French(fr)",'Title
Native':"Franais",'URLLanguageCode':"fr",
'Imageprefix':"fr",'LanguageTag':"frFR".
Then'Save&Close'.
Makingmultilanguagewebsiteisnoteasyand
beyondthescopeofthisintroduction.Please
checkthevarioustutorialsonInternet!
52
Appendix3RemovetheFontSizebox
Ifyouusethebeez5template,gotoC:\xampp\htdocs\joomla25\templates\beez5\andinfileindex.phpdelete
line32:
$doc>addScript($this>baseurl.'/templates/beez5/javascript/md_stylechanger.js','text/javascript',true);
Also,furtherdown,findthetext"<divid="fontsize"></div>"anddeleteit.
Ifyouusethebeez2template,thendothesameinfolderC:\xampp\htdocs\joomla25\templates\beez20\
Appendix4UsingtheTrash
SomeerrorsresultfromthefactthatafilewiththesamealiasisstillintheTrash.Buttodelete(orrestore)files
fromthetrashisnotintuitive!
Goto'ArticleManager',thenfindthefilterbox'SelectStatus'andinthedropdown
box,choose'Trashed'.Nowyouwillseealltrashedarticlesandfromhereyoumay
restorethearticle(clicktickbox,thenchoosethegreen'Publish'button)ordeleteit
forever(selectandclick'EmptyTrash').
Whenyouseenomorearticles,changethefilter'Trashed'backto'SelectStatus'and
youwillseeallyourarticlesagain.
Inthesamefashionyoumayprocesstrashedcategories(dothesameontheCategoryManager)andmenu
items(fromtheMenuManager).
53
Index
AddNewArticle
Apache
ArticleManager
ArticleManagerOptions
Banner
Beez2Beez5Template
Breadcrumbs
category
Category
CategoryManager
CategoryManagerOptions
Components
ContactForm
ContactUsPage
ControlPanel
Cpanel
Createwebsite
Displayerrors
EditorTinyMCE
Extensions
ExtensionManager
FontSizebox
Frontend
FTP
Home
Languagepack
Loadposition
Loginbox
Logo
MenuAddMenuItem
Menumovemenuitem
Menupathwithinthesite
Metadata
Module
ModuleInsideanarticle
ModuleManager
Modules
MySQL
Options
Overrideglobaloptions
PHP
Plugin
SearchEngineOptimization(SEO)
Security
Slogan
Structureofthesite
Template
TemplateManager
TexteditorTinyMCE
Trash
UncategorisedPages
Uploadtoserver
WAMP
Websiteonline/offline
WorkonMultipleWebsites
WYSIWYG
XAMPP
Youarehere('breadcrumbs')
14
7,52
14,27
18,34
39
16,20,39,53
34
22
14
28,29
35,36
37
35
35
9,11,13,28
42
23
8,52
36
37
37,40,52
21,53
11
42
34
9,52
38
34
20,39
54
16,17,32
33
34
41
19
38
19,34
37
6,8,42
18,34,35,36
36
6,42
36,37,38
41
38,41,42
20
24
16,20,37,39
20,39
36
53
26
42
7,8,23
25
23
36
7
34