LearnJoomla!Fast!Forversion2.5.

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