Membang e gunWe ebsiteMengg gunakan CMS SJooml la!

Oleh:MusaAmin http://musaamin.web.id

ApaituJoomla!?
Joomla!merupakansalahsatuCMS(ContentManagementSystem)yangpopulerdidunia. Hampirsemuajeniswebsitebisadibuatmulaidariwebsitepersonal,profilperusahaan, pemerintahan,komunitas,ecommercedanmultimedia.Halinidimungkinkankarena banyaknyaextensionyangbisadidownloaddengangratis.

DimanamendapatkanCMSJoomla!?
Joomla!bisadidownloaddihttp://www.joomla.org/download.Joomla!versiFullPackageuntuk instalasisedangkanversiPacthPackageuntukupdateJoomla!.

Softwareapasajayangdibutuhkan?
1. WebserverXAMPP:softwareyangharusdiinstallterlebihdahulusebelummembangun websiteJoomla!yaituwebserver.WebserveryangakandipakaidisiniadalahXAMPP yangbisadidownloadgratisdihttp://www.apachefriends.org. 2. WebBrowser:tentusajaprograminidibutuhkan,namanyasajawebsitejadiharus menggunakanbrowserwebuntukmengkasesnya.DisarankanmenggunakanMozilla Firefox. 3. FTPCient:jikawebsiteJoomla!telahselesaidanmaudiuploadkeserveryang sebenarnyadigunakanprogramFTPClientuntukmentransferfileJoomla!kewebserver (upload).

InstalasiXAMPP
JalankanfileinstalasiXAMPP,kemudianpilihdrive/harddiskyangakanmenjadilokasiweb servermisalnyaC:\atauD:\setelahituklikExtract.

GambarMemilihLokasiEkstrakFile

 GambarProsesEktrakFile Setelahprosesekstrakselesai,makawebserversiapuntukdijalankan.Masukkelokasifolder XAMPPkemudianjalankanfilexamppcontrol.exe.ServeryangharusdijalankanyaituApache danMySQL.

GambarXAMPPControl UntukmengetesapakahserverApachesudahberjalandenganbaikakseshttp://localhost menggunakanwebbrowser.JikamunculhalamanXAMPPmakaapachesudahaktif.

 GambarTampilanAwalXAMPPsetelahInstalasi SedangkanuntukmengetesserverMySQLakseshttp://localhost/phpmyadmin,jika tampilannyasepertigambardibawahinimakaserverMySQLsudahjalan.

GambarphpMyAdmin Catatan: SetiapinginmengkasesCMSJoomla!,serverApachedanMySQLharusdalamkeadaan running.

InstalasiCMSJoomla!
Buatfolderbarudixampp/htdocsdanberinamajoomla,kemudianekstrakfileCMSJoomla!di folderyangbarudibuattadi. Catatan: Folderhtdocsadalahlokasifolderweb.Setiapprojectwebyangdibuatdisimpandihtdocs.

GambarLokasiFolderJoomla

Langkahselanjutnyaakseshttp://localhost/joomla. 1. Padastep13instalasiklikNext. 2. Step4,Hostnamediisilocalhost,Usernamediisiroot,Passworddikosongkan,dan Databasenamediisijoomladb.Lalukliknext.

3. Step5,klikNext 4. Step6,SiteNamediisinamawebsitemisalnyaWebsiteJoomlaku!.YourEmailyaitu untukemailsuperadministrator.AdminpasswordyaitupasswordSuperAdministrator. 5. Sampledata.KliktombolInstallSampleDatajikainginmenginstallCMSJoomla!beserta contohdatanya.JikabarupertamakalimenggunakanJoomla!sebaiknyacontohdata diinstalluntukmemudahkanmempelajarinya.Jikasampledatatelahterinstalltombol tadiakanberubahmenjaditulisanSampledatainstalledsuccessfully.Setelahsemua selesaikliknext.

 GambarStep6InstallJoomla! 6. Jikainstalasisuksesakantampilhalamansepertigambardibawahini.Setelahproses instalasisukseshapusfolderinstallationpadafolderjoomla.

GambarPesanInstallJoomla!Sukses

Untukmelihathasilinstalasiakseshttp://localhost/joomla

GambarHomeWebsiteJoomla!

UntukloginkehalamanadministratorJoomla!akseshttp://localhost/joomla/administrator.Isi UsernamedenganadmindanPasswordyangdimasukkansewaktuprosesinstalasi.

GambarLoginAdministrator

GambarHomeAdministrator

FrontpageJoomla!
Frontpageyaituhalamanwebsiteyangakandilihatolehparapengunjung.

GambarFrontpageJoomla!

MengenalElemenFrontpageJoomla!
ModuleNewsflash Modulyangmenampilkanartikelpendeksecararandom/acak.

ModuleLatestNewsdanPopular ModulLatestNewsuntukmenampilkanartikelyangterbaru.ModulPopularuntuk menampilkanartikelyangpalingseringdibaca.

ModuleMenu Modulyangmenampilkanmenu.ContohmodulmenuuntukMainMenudanTopMenu.

GambarModulMainMenudanTopMenu

ItemMenu Itemitemmenu/linkyangterdapatpadaMenu.

GambarItemMenupadaMenuHome ModuleSearch Moduluntukmelakukanpencarianisiwebsite

GambarModuleSearch ModulePolls Moduluntukpoling

GambarModulePoll

ModuleLogin Moduluntukloginpengguna

GambarFormLogin ModuleWhosOnline Moduluntukmelihatberapaorangyangonline/yangsedangmengakseswebsite.

GambarModuleWhosOnline ModuleBanner Moduluntukmenampilkanbanner/iklanberupagambaratautulisan.

GambarModuleBannerTextdanBannerImage

Content Contentyaitutulisan/artikelyangmerupakansalahsatubagianutamadariJoomla!.

GambarContent/Articles

Administrator/BackendJoomla!
HalamanbagiAdministratoruntukmelakukanperubahandatawebsite.

GambarAdministratorJoomla!

GlobalConfiguration
Site GlobalConfiguration GlobalConfigurationadalahkonfigurasiCMSJoomla!secaraumumdankonfigurasiiniakan disimpanpadafileconfiguration.php.UntukmasukkeGlobalConfiguration,menuSite Global Configuration.

GambarFormGlobalConfiguration Site SiteOffline:untukmenonaktifkanwebsite. OfflineMessage:pesanyangakanditampilkanketikawebsitedalamkeadaanoffline

 GambarWebsitesedangOffline SiteName:judul/namawebsite GlobalSiteMetaDescription:deskripsiwebsite.Deskripsiiniyangakan dimunculkan/dicariolehsearchengine. GlobalSiteMetaKeywords:katakunciwebsiteyangdigunakanuntukmelakukan pencariandisearchengine.

System AllowUserRegistration:ijinkanuntukmelakukanpendaftaranmember/user.Jikaya makapadaformloginakanmuncullinkregistrasi.

GambarFormLogin

NewUserRegistrationType:tipeuserpadasaatmelakukanpendaftaran,apakahakan tersetsebagaiterdaftar,penulis,editorataupublisher. NewUserAccountActivation:jikaYamakauserakandikirimilinkkeemailnyauntuk aktifasipendaftaran.

UserManager
FormUser Name:namalengkap Username:useryangakandigunakanuntuklogin Email:alamatemailuser NewPassword:passworduntukuser VerifyPassword:ulangimemasukkanpassword Group:tipe/kelompokuser

GambarFormUser GroupUser FrontEnd Registered:userterdaftaryangdapatlogindanmengaksesbagianbagianyangtidak bisadilihatolehpengunjungbiasa/guest. Author:bisamenulis/merubahartikelnyasendiri Editor:bisamenulis/merubahartikel Publisher:mempublikasiartikel

BackEnd Manager:hanyadapatmembuatartikel,itemmenu,danmengakseskomponen. Administrator:tidakbisamemodifikasisuperadministrator,tidakbisamerubahglobal configuration,tidakbisamenginstalltemplate/bahasa/plugin. SuperAdministrator:userpalingtinggihakaksesnya,bisamengaksessemuabagiandari Joomla!.

TemplateManager
Templateadalahdesaintampilanwebsite.Untukmenggantitemplatefrontpage/site: 1. Extensions TemplateManager. 2. SetelahmasukdihalamanTemplateManagerakantampil3templatestandar.Template yangsedangaktifyaituyangkolomDefaultnyaterdapatikonbintang.Untuk mengaktifkantemplatelain,pilihoptionnamatemplatenyalalukliktombolDefault. 3. Jikasudahtergantilihathasilperubahannyadifrontpage

GambarTemplateManager

 GambarFrontpageDenganMemakaiTemplateJAPurity

LanguageManager
LanguageManageradalahhalamanuntukmenggantibahasa. 1. KlikmenuExtensions LanguageManager 2. Untukmenggantibahasa,pilihoptionnamabahasalaluklikDefault

GambarLanguageManager

ArticleManager
ArticleManageruntukmengaturartikel.UntukmasukkeArticleManagerklikmenu Content ArticleManager.

GambarArticleManager TabelDataArtikel Title:judulartikel Published:statusartikelapakahsedangterpublikasi,pending,expired,tidak terpublikasi,atauarsip. Frontpage:statusartikelapakahditampilkandifrontpage(menuHome)atautidak. Order:urutanartikel

AccessLevel:siapasajayangbisamengkasesartikel Section:namaSectionartikel,jikaUncategorizedmakakolominiakankosong Category:namaCategoryartikel,jikaUncategorizedmakakolominiakankosong Author:Namapenulisartikel Date:Tanggalpenulisanartikel Hits:Artikelnyasudahdibacaberapakali

TombolArticleManager Catatan: Sebelummengkliktomboldiatas(kecualiParameters/Edit)terlebihdahulumemilih artikeldengancaramengklikcekboxjudulartikel Untukmengeditartikellangsungsajamengklikjudulartikel Archive/Unarchive:Artikeldiarsipkan/tidakdiarsipkan Publish/Unpublish:Artikeldipublikasi/tidakdipublikasi Move:PindahkanatikelkeCategoryyanglain Copy:DuplikasiartikelkeCategoryyanglain Trash:hapusartikel(masukkanketempatsampah) Edit:ubahartikel New:tulisartikelbaru Parameters:aturan/settinganartikel

Membuat/MerubahArtikel(FormArticle)

1. 2. 3. 4. 5. 6. Title:Masukkanjudulartikel Section:PilihSectionartikel Category:PilihCategoryartikel Published:PilihYes Frontpage:JikainginmemunculkanartikeldifrontpagepilihYes Tulisisiartikel

7. Jikainginmemasukkangambarkliktombol yangberadadibagianbawah artikeleditor.Pilihgambaryangingindimasukkan,klikInsert.

 GambarPemilihanGambarUntukArtikel 8. Untukmembuatartikelyangmemilikiintro(untukmembacaartikelsecaralengkap harusmengklikReadMore)gunakantombol .Posisikankursordimana batasanintrodanlanjutanartikel,lalukliktombolReadMore.Setelahmengkliktombol ReadMoreakanmunculgarishorizontalpanjangwarnamerahsebagaipemabatas antaraintrodanlanjutanartikel.

 GambarArtikelyangmemakaiReadMore 9. JikasemuanyasudahselesaikliktombolSave.Kemudianlihathasilnyadifrontpage

GambarArtikelyangsudahditulisyangberadadifrontpage

 GambarArtikelsecaralengkapsetelahmengkliktombolReadMore PengelompokanArtikel UntukmelakukanpengelompkanartikelmakaharustersediaterlelihdahulusebuahSection dandalamSectionadasebuahCategory.Contoh:sayainginmembuatberitayangmempunyai kategoriekonomidanteknologimakastrukturnyasebagaiberikut: Berita[SectionBerita] o Politik[CategoryPolitikpadaSectionBerita] BeritaPolitikPertama[Article] BeritaPolitikKedua[Article] BeritaPolitikKetiga[Article] o Ekonomi[CategoryEkonomipadaSectionBerita] BeritaEkonomiPertama[Article] BeritaEkonomiKedua[Article] BeritaEkonomiKetiga[Article] SectionLainnya[Section] o CategoryLainnya[Category] ArticleLainnya[Article]

SectionManager
Content SectionManager

GambarSectionManager FormSection Title:judulSection Published:Yes

GambarFormSection

CategoryManager

GambarCategoryManager FormCategory Title:judulCategory Published:Yes

GambarFormCategory

FrontpageManager
FrontpageManager:untukmengaturartikelyangberadapadafrontpage(menuHome).

GambarFrontPageManager Menghapusartikeldarifrontpage: 1. Pilihartikelyangmaudihapus,bisalebihdarisatuartikel 2. KlikRemove

MenuManager
Menus MenuManager

Title:judulmenu Type:tipemenu MenuItems:klikuntukmengaturitemmenu Published:jumlahitemmenuyangterpublikasi

Sebelummembuatitemmenu,harusdibuatdulumenunya.DanketikamembuatMenu makaakandibuatjugaModuleMenunya. UniqueName:namamoduleyangunik/tidakbolehsama Title:judulmenu

Description:keteranganmenu(tidakharusdiisi) ModuleTitle:judulmodule

GambarFormMenu Setelahmenyimpanmenu,makamodulemenunyaharusdiaktifkandiModuleManager.Cari namamoduleyangbarudibuatlaluaktifkandenganmengklikEnabled. MenuItemManager Menus NamaMenu

GambarMenuItemManagepadaMainMenu MenuItem:judulmenu Default:menuyangakanmenjadimenuHome/halamanyangpertamakalimuncul ketikahalamandepandiakses Published:aktifkan/nonaktifkanmenu AccessLevel:hakaksesmenu Type:tipemenu

MembuatItemMenu TipeArticleLayout:menuitemyangketikadikliklangsungmasukkeArticle,contoh:menu itemJoomla!OverviewpadamenuHome. 1. 2. 3. 4. New Articles ArticleLayout Title:judullink,padabagianParameterBasicklikSelectkemudianpilihArticlesyang akanditampilkan 5. Save

GambarFormMenuItemtipeArticleLayout

GambarArticleJoomla!Overview/ItemMenuJoomlaOverview! TipeSectionBlog:menuyangakanmenampilkanisidariSectiondenganlayoutblog.Contoh itemmenuSectionBlogpadaMenuExamplePages. 1. 2. 3. 4. 5. New Articles SectionBlogLayout IsiTitle,danpadaParameterBasicpilihSectionyangakanditamppilkan Save

 GambarFormItemMenutipeSectionBlogLayout

GambarSectionBlog TipeSectionCategory:menuyangakanmenampilkanisidariCategorydenganlayoutblog. ContohitemmenuCategoryBlogpadaMenuExamplePages. 1. 2. 3. 4. 5. New Articles CategoryBlogLayout IsiTitle,danpadaParameterBasicpilihCategoryyangakanditamppilkan Save

GambarFormItemMenutipeCategoryBlogLayout

 GambarCategoryBlogLayout TipeExternalLink:itemmenuyangdimasukkansecaramanualatauterlinkkewebsitelain. ContohitemmenuyangterdapatpadamenuResources. 1. 2. 3. 4. New ExternalLink IsiTitle,padaLinkmasukkanurlnya. Save

TipeComponent:itemmenuyangdibuatuntukmenampilkanhalamankomponenyangsudah ditambahkan/diinstal. 1. 2. 3. 4. New Pilihnamacomponent IsiTitle Save

ModuleManager
Extensions ModuleManager

ModuleName:namamodule Enabled:modulesedangdalamkeadaanaktif Order:urutanmodule AccessLevel:tingkataksesmodule Position:posisimodule Type:tipemodule

Tiaptemplatememilikiposisiyangberbedabeda.Untukmengetahuiposisimoduldari templateakseshttp://localhost/joomla/index.php?tp=1makaakantampilnamaposisimodule.

GambarPosisiModuleindex.php?tp=1

FormModule Title:judulmodul ShowTitle:tampilkanjudul Enabled:aktifkanmodul Position:posisimodul Order:urutanmodul AccessLevel:hakaksesmodul MenuAssignment:modulakandimunculkandimenumanasaja,apakahsemuamenu atauhanyasebagian.

GambarFormModuleCustomHTML Tiaptipemoduleformmodulenyaberbedanamunhanyadibagianparameternyasaja.Secara umumformnyasamasepertigambardiatas.

BannerManager
Components Banner

GambarBannerManager UntukmembuatbannerterlebihdahuluharusmembuatBannerClientdanBannerCategory. BannerClient

GambarFormBannerClient 1. ClientName:namaklien 2. ContactName:namakontakklien 3. ContactEmail:emailklien

BannerCategory

GambarFormBannerCategory Title:judulkategori Published:pilihYesuntukmenampilkankategori

Banner

GambarFormBanner Name:namabanner ShowBanner:Yes Category:kategoribanner ClientName:klienbanner ClickURL:alamatwebsitetujuanketikabannersudahdiklik BannerImageSelector:gambarbanner

Setelahmembuatbanner,ModuleBannerharusdisetterlebihdahulu. ModuleBanner Extensions ModuleManager Banners

GambarFormModuleBanner ModuleParameters: BannerClient:pilihklienbanner Category:kategoribanner

GambarModuleBannerdiFrontpage

ContactsManager
Components Contacts

GambarContactsManager SebelummembuatContactterlebihdahuluharusmembuatCategory. ContactCategory

GambarFormContactCategory Title:judulkategori Published:Yes

Contact

GambarFormContact

Name:namakontak Published:Yes Category:kategorikontak ContactsPosition:posisikontak Email:email StreetAddress:alamat Town:kota State:provinsi PostalCode:kodepos Country:Negara Telephone:no.telepon MobilePhoneNumber:no.hp Fax:no.fax WebURL:alamatwebsite

MiscellaneousInformation:informasitambahan

GambarHalamanContact

WebLinksManager
Components WebLinks WebLinkCategory

FormLinkCategory Link Title:judulkategori Published:Yes

GambarFormWebLink

Name:namawebsite Published:Yes Category:kategorilink URL:alamatwebsite,harusmemakaihttp://

GambarWebLinksdiFrontpage

Polls
Components Polls Menambah/MengeditPoling 1. 2. 3. 4. Title:pertanyaanpoling Published:Yes,tampilkanpoling Options:pilihanjawabanpoling Save

GambarFormComponentPoll Extensions ModuleManager Polls 1. PadaModuleParameters,pilihjudulpolingyangakanditampilkan 2. Save

 GambarFormModulePolls

GambarModulePolingdiFrontpage

Install/UninstallExtensions
Extensions Install/Uninstall Untukmenambah/menghapusExtension(Module,Component,Template,Plugin,dan Language). MenginstallExtension

GambarExtensionManager[InstallExtension] 1. BrowsefileExtensiondalamformat.zip 2. KlikUploadFile&Install MenguninstallExtension

GambarExtensionManager[Templates] 1. PilihExtensionmanayangakandiuninstall 2. Pilihnamaextensionnya 3. KlikUninstall Catatan: Extensionbisadidownloaddihttp://extensions.joomla.orgdanuntuktemplatecaridigoogle dengankatakuncifreetemplatejoomla.

BackupWebsiteJoomla!
BackupFileJoomla! CaramembackupfileJoomla!cukupdenganmengcopyfolderJoomla!yangberadadalam htdocs. BackupDatabaseJoomla! Untukmelakukanbackup/restoredatabasedigunakandatabasemanageryaituphpMyadmin. Akseshttp://localhost/phpmyadmin.

GambarphpMyAdmin KliknamadatabaseJoomla!(namadatabasepadasaatprosesintalasiyaitujoomladb)yang akandibackup.

GambarphpMyAdminDatabasejoomladb

KlikmenuExportuntukmembackupdatabase.

GambarExportDatabase BeritandacekpadaSaveasFilelaluklikGodandownloadfileSQLbackupnya.

GambarDownloadFileBackupDatabasejoomladb

MemindahkanWebsiteJoomla!keKomputerLain
1. YangpastiharusadadikomputertersebutadalahwebserverXAMPP 2. CopyfolderwebsiteJoomla!kehtdocs 3. RestoredatabasejoomladbmenggunakanphpMyAdmin http://localhost/phpmyadmin Createnewdatabase:masukkannamadatabasejoomladb,namadatabasenya sesuaikandengannamadatabasepadasaatdibackup.

GambarCreateDatabasediphpMyadmin Setelahdatabasejadi,klikmenuImportlalubrowsefilebackupdatabasenya. TerakhirklikGo.JikasuksesakanmunculpesanImporthasbeensuccessfully finished.

GambarImportDatabase 4. Editfileconfiguration.phpyangberadadalamfolderwebsiteJoomla!.Carivar$log_path danvar$tmp_pathsesuaikandenganalamatfoldernya. 5. Silakandites MenguploadWebsiteJoomla! YangharusdisiapkansebelummelakukanprosesuploadyaituAndaharusmemesannama domainwebsitedanhostingwebsite.Namadomainininantinyayangakandiaksesuntuk masukkewebsitecontohnyanamasaya.com.Hostingwebsiteyaituspaceharddiskyang dipakaiuntukmenyimpanfilejoomlabesertadatabase.Hostingyangdipesanharuslebihbesar

darifileyangakandiuploaddanperkirakanjugaberapapenambahandata.Domaindanhosting bisadipesandipenyediawebhostingdandomain. SetelahdomaindanhostingsudahsiapmakafileJoomla!besertadatabasesudahsiap diupload. 1. UploadfileJoomla!keservermenggunakanFTPClientcontohFileZilla.Masukkanhost server,usernamedanpassworduntukloginkeserverhosting.LaluuploadfileJoomla! yangbiasanyalokasifoldernyadipublic_htmlatauwww. 2. LoginkeControlPanelhosting. 3. BuatdatabaseMySQL,setusernamedanpasswordnya. 4. LoginkephpMyadminyangadadiserver,lalupilihnamadatabaseyangbarudibuat kemudianimportfilebackupsqlnya. 5. Untukmengetahuialamatfolder(path)Joomla!,buatfilecekfolder.phpisinya <?echogetcwd();?> Laluakseshttp://namadomainmu.com/cekfolder.php.Tulisanyangtampinantiakan ditambahkandifileconfiguration.phppadacodevar$log_pathdanvar$tmp_path. 6. Editfileconfiguration.php var$db=namadatabase; var$user=usernamedatabase; var$password=passworddatabase; var$live_site=http://namadomain.com; var$log_path=path/folder/joomla/log; var$tmp_path=path/folder/joomla/tmp;

SelamatberJoomla!