SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
BAB 7
                                           JOOMLA
7.1 Introduction to Joomla!
       “Joomla! is one of the most powerful Open Source Content Management Systems on the
planet. It is used all over the world for everything from simple web sites to complex corporate
applications. Joomla! is easy to install, simple to manage, and reliable.” – www.joomla.org.

     1.1 Content Management System
          Sebagai langkah awal ada baiknya Anda mengerti dahulu apa itu CMS atau
     Content Management System.          Apakah     sama    dengan     software    HTML       editor
     lainnya    seperti    Microsoft   FrontPage, Dreamweaver, atau bahkan sebuah Notepad?.
     Seperti yang kita ketahui, content merupakan salah satu urat nadi dari kehidupan sebuah
     website. Tanpa content dapat dipastikan tidak ada website. Sebuah website yang dikelola
     dengan baik pasti akan selalu berusaha menampilkan content terbaru bagi para
     pengunjungnya. Lalu apa yang dimaksud dengan content sebenarnya? Pada dasarnya
     content adalah sebuah unit informasi yang digunakan untuk membentuk sebuah halaman di
     website. Dapat terdiri dari apa saja; teks, gambar, video, suara, dan lain sebagainya.
          Dari content yang sudah ada tadi, kemudian diatur sedemikian rupa sehingga
     membentuk sebuah website. Framework atau sistem, tempat di mana content itu
     diletakkan menfasilitasi ‘perkakas-perkakas’ yang dibutuhkan untuk menjaga konsistensi
     proses pembuatan halaman-halaman di website secara efisien dan efektif.
          Bila semua informasi diatas kita gabung menjadi satu, dapatlah disimpulkan, CMS
     adalah sebuah sistem yang memudahkan proses penciptaan sebuah website dinamis
     yang kaya akan content, dengan memberikan kemudahan kepada penulis/editor untuk
     menambah, memperbaharui dan menghapus content yang ada tanpa campur tangan
     langsung    dari     webmaster.   Sebuah   CMS     akan membedakan content dari desain,
     memelihara konsistensi tampilan dan memudahkan pemanfaatan content untuk berbagai
     keperluan. Dengan menyimpan data di satu tempat, mengontrol hak akses dan alur kerja
     memperbesar kesempatan pemakai berpartisipasi dalam pengembangan website anda.
     - www.kyantonius.com
1.2 CMS Joomla [www.joomla.org]
       Joomla adalah salah satu dari ratusan free CMS yang tersedia di Internet yang
memiliki      jumlah pengguna yang besar. Kemudahan pengaturan content, dukungan di
Internet yang banyak, plugin yang melimpah; merupakan keunggulan CMS Joomla yang
membuat Joomla banyak diminati orang. Pada Joomla, setiap halaman dari web
memuat bermacam-macam block dari content, block ini disebut juga position. Anda
mengatur layout untuk halaman dengan sebuah template, termasuk penempatan
banyak block pada halaman web, font, warna, dan background. Lalu Anda
menempatkan bermacam-macam module dalam sebuah block. Dan terakhir Anda
menambahkan content dan menampilkan pada halaman utama web Anda.


7.2 Struktur File dan Direktori Joomla
       Pada bagian ini kita belajar tentang struktur file dan direktori yang digunakan
oleh    Joomla.      Seperti    kita   ketahur    Joomla   adalah    sebuah   website   content
management yang powerfull, maka sudah pasti mempunyai banyak file dan direktori.

       1.3.1 Struktur File
              File yang kita bahas adalah file-file penting yang terletak di root
       direktori server Joomla, yaitu :
       1. Index.php, merupakan file utama untuk menampilkan halaman web Joomla.
            Beberapa pengaturan joomla terdapat pada file ini. Jika kita mengakses file
            ini,   berarti   kita   membuka      halaman   depan    website   Joomla.   Misalnya
            www.lintau.com/index.php.
       2. Configuration.php, merupakan file yang terbentuk saat kita melakukan
            proses instalasi Joomla. Pada file ini terdapat pengaturan untuk koneksi ke
            database, dan pengaturan penting lainnya. Jika file ini rusak, website Joomla tidak
            akan berfungsi.
       3. Copyright.php, file ini berisi tentang hak cipta website CMs Joomla,
            walaupun sebenarnya lebih tepat disebut copyleft.
       4. License.php, file ini berisi informasi tentang lisensi website CMS Joomla
       5. Mainbody.php, ini merupakan file pendukung yang sangat penting dalam
            mengatur tampilan berita di website.Joomla.
       6.   Pathway.php, sebuah file yang berfungsi untuk menggmbarkan urutan proses
            aplikasi yang ada di Joomla.
7.2.1 Struktur Direktori
         Joomla mempunyai beberapa direktori yang mempunyai fungsi tersendiri.
Setiap    direktori      mempunyai        subdirektori    dan     file-file   pendukung    sesuai
fungsinya. Berikut ini adalah struktur direktori Joomla.

1.   Administrator, ini merupakan direktori khusus administrator untuk keperluan
     pengelolaan website Joomla. Mulai dari proses installasi modul, komponen.
     Mambot,       bahasa      sampai       dengan       proses    maintenance     web         secara
     keseluruhan.
2. Cache, sebuah direktori khusus yang berfungsi untuk menyimpan data
     sementara di computer pengguna, tujuannya adalah mempercepat proses
     loading web         jika dibuka pada waktu lain fungsinya sama dengan memori
     computer.
3. Components, merupakan direktori tempat menyimpan seluruh komponen yang
     terinstall di website Joomla.
4. Editor, sebuah direktori yang berfungsi untuk menyimpan berbagai editor
     yang diinstall pada website Joomla.
5. Help,        sebuah    direktori   khusus     untuk     menampilkan        bantuan   jika     kita
     menemukan Kendala dalam menggunakan Joomla.
6. Images,        adalah direktori tempat menampung file-file gambar guna keperluan
     website Joomla.
7. Includes, ini merupakan direktori pendukung bagi aplikasi joomla yang
     lainnya.
8. Installation, direktori yang digunakan dalam proses installasi website Joomla. Jika
     proses      installasi    selesai,     direktori     ini     sebaiknya     dihapus,       untuk
     mempertimbangkan keamanan web dimasa dating.
9. Language, sebuah direktori khusus untuk menampung jenis-jenis bahasa yang
     dapat digunakan di website yang multi bahasa.
10. Mambots, sebuah direktori untuk menampung tool tambahan dari Joomla,
     Misalnya, mos images, mos pagebreak,dll.
11. Media, sebuah direktori yang diperuntukkan untuk menyimpan dan meng-
     upload file-file ke dalam website Joomla, baik file gambar maupun teks.
12. Modules, tempat menyimpan modul-modul yang terinstal di website Joomla.
13. Templates, tempat menyimpan semua template yang terinstal di website
    Joomla.
7.3 Istilah-Istilah Penting Pada Joomla
          Banyak istilah-istilah yang kedengaran baru, jika kita betul-betul pemula dengan
   Joomla. Agar pemahaman kita terhadap Joomla lebih mudah, berikut ini diberikan
   penjelasan terhadap beberapa istilah yang akan sering digunakan nantinya.

          1. Module, adalah bagian unit fungsi dari Joomla yang berguna untuk
               menampilkan fitur-fitur utam Joomla serta menampilkan beberapa komponen
               terkait. Secara default, Joomla telah menyediakan be berapa modul, seperti
               modul banner,menu, login, newsfeed, statistic, arsip,sindikasi, polling dan lain
               sebagainya serta modul yang disediakan oleh pihak ketiga.
          2. Component, adalah sebuah aplikasi yang menambah nilai guna Joomla.
               Sebuah     component        mempunyai      konfigurasi      di     bagian       jendela
               administratornya. Misalnya komponen weblink, content form, polling dan lain
               sebagainya.
          3. Mambots, sebuah unit fungsi Joomla yang disisipkan unutk memanipulasi
               ataupun menterjemahkan konten yang diproses sebelum ditampilkan. Seperti,
               Mambots editor, Mos image, dsb…
          4. Template, sebuah aplikasi yang berfungsi untuk mengatur tampilan website
               Joomla secara keseluruhan. Template ini mirip dengan istilah Theme di
               Windows atau skin di Winamp. Pada template ini diatur sedemikian rupa
               sehingga website dapat tampil sesuai keinginan kita.
          5.    Content, semua berita/artikel/module/komponen yang terdapat dalam website
               secara keseluruhan


     Semua aplikasi pendukung Joomla terus dikembangkan oleh developer dan pihak
ketiga, sehingga saat ini tersedia sampai dengan ratusan ribu module,component,
mambots        dan   templates,     add   on   yang    dapat   didownload       secara     gratis   di
internet,walaupun ada beberapa yang bersifat komersial.
7.4 Pra Instalasi CMS Joomla
    2.1 Aplikasi yang Anda butuhkan
       1. Paket AMP (Apache, MySQL, dan PHP) : salah satunya adalah XAMPP yang
       sudah terintegrasi AMP didalamnya dan menghemat resource komputer dibandingkan
       menginstall AMP satu-persatu.
       2. CMS Joomla 1.0.10, atau juga Joomla versi terbaru
       3. Notepad++, freeware untuk mengedit bahasa pemrograman. Alternatif : Wordpad,
       Editplus, Macromedia Dreamweaver, atau PHP editor lainnya.
       4. 7zip, freeware program kompresi yang powerful. Alternatif : WinZip atau WinRar
       5. Internet browser, contoh: Internet Explorer atau Opera atau Firefox.
       2.2 Instalasi paket AMP (XAMPP)
      Instalasi paket AMP pada komputer Anda (sebelum Anda menguploadnya ke Internet)
diperlukan untuk menjalankan CMS Joomla. Ikuti langkah-langkah berikut :
Bila firewall anda aktif, pastikan
                      untuk memberikan akses pada
                      Apache dan MySql agar dapat aktif




FTP Server tidak dibutuhkan, jadi tidak perlu di’instal
Pastikan Apache dan MySQL sudah aktif (Running), kemudian buka browser anda ( internet
explorer ataupun mozila dan ketikan alamat : http://localhost/xampp/splash.php
7.5 Instalasi CMS Joomla

     1. Ekstrak paket Joomla        [Joomla_1.0.10.zip] atau versi terbaru   ke folder ( C:Program
     Filesxampphtdocs )
     2. Rename folder hasil ekstrasi dengan nama yang Anda inginkan, misalkan :workshop
     3.Jalankan internet browser Anda, akses : localhost/workshop. Sehingga proses instalasi
     CMS Joomla dilakukan via internet browser.
     4. Pre-installation check : pastikan setiap item ditandai warna hijau. Lalu klik Next.
     5. license : Klik Next.

                                        6. step 1 :
                                          Host Name : localhost
                                          MySQL User Name : root
                                          MySQL Password : root
                                           MySQL Database Name : workshop (terserah Anda)
                                        Klik Next. Klik OK.

                                        7. step 2 :
                                        Isi nama web Anda pada field Site name. Misalkan Mega
                                        Workshop IE Community. Klik Next


                                        8. step 3 :
                                        Isi field Your E-mail dengan e-mail Anda dan field
                                        Admin password dengan password yang Anda inginkan.
                                        Klik Next.

                          9. step 4 :
                            Hilangkan folder [installation] pada folder web Anda
                          [C:Program Filesxampphtdocs workshop]


          10. Klik Administration untuk melihat halaman admin web. Atau dengan
          mengakses
              localhost/workshop/administrator.


11. Klik View Site untuk melihat halaman depan web baru Anda. Atau dengan mengakses
         localhost/workshop.
Keterangan :
  Pada CMS Joomla halaman web terbagi dua bagian yaitu halaman Backend dan Frontend.
   Halaman Backend adalah halaman admin yang digunakan untuk melakukan segala
konfigurasi web Anda. Akses : localhost/workshop/administrator
  Halaman Frontend adalah halaman yang akan tampil dan dapat dilihat oleh semua pengunjung
web Anda. Akses : localhost/workshop
7.6 Manajemen Content Joomla
       Setelah menginstall CMS Joomla, kita dapat memulai untuk bekerja dengan
content. Versi Joomla saat ini mempunyai hirarki content yang statis : Anda harus membagi
content ke dalam tiga hirarki, tidak lebih, tidak kurang. Tiga hirarki itu adalah : Sections,
Categories, dan Content.
      Sections seperti kontainer yang besar yang berisi semua categories. Categories
adalah kontainer yang lebih kecil dan berisi content. Segala teks dan gambar yang tampil pada
halaman web adalah content. Anda tak dapat membuat content tanpa memiliki sections dan
categories.
Sebagai contoh, kita akan membuat sebuah web laboratorium. Hirarkinya sebagai berikut :


Section : Profil                                 Section : Extra
        Category :                                       Category :
                   Laboratorium                                    Pengumuman
                   Asisten                                         IT Room
               Study Group                                         Taushiyah
Section : Kegiatan
        Category :
                   Praktikum
                   Riset
                                                       Contoh hirarki content
                   Study Group

1. Untuk mengatur segala konfigurasi web, termasuk pengubahan hirarki content, masuk
ke halaman administrator Joomla (localhost/workshop/administrator).
2. Masukkan username dan password.
                                                          Klik pada menu atau
Membuat Section                                           icon untuk menambah
                                                          atau mengedit section

                                                            Ini akan membawa Anda menuju
                                                            layer Section Manager.
Klik disini untuk                        Klik icon new untuk
                               mengedit section yang                     membuat section yang
                                        ada                                       baru

 Secara default, Joomla sudah menginstall beberapa section (begitu juga category dan content).
 1. Klik salah satu link untuk mengedit link yang ada. Misalkan link The News (News).




2. Masukkan pada field Title dan Section Name : Profil.

3. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Section Manager.

     NB : Icon Apply untuk menyimpan perubahan dan kembali ke halaman Section Editor.
         Icon Close untuk membatalkan perubahan.
        Untuk kembali ke halaman administrator awal, klik menu Home.

Hasil akhir
A. Membuat Category




                                                          Klik pada menu atau
                                                         icon untuk menambah
                                                         atau mengedit category


                                                    Ini akan membawa Anda menuju layar
                                                    Category Manager.




                             Klik link untuk mengedit
                                category yang ada
                                                                      Klik icon New untuk
                                                                     membuat category baru



1. Klik icon New untuk membuat category baru.
2. Masukkan pada field Title dan Category Name : Laboratorium.
3. Pilih Section : Profil.
4. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Category Manager.

Hasil Akhir :




Fungsi Tombol Pada Halaman Section dan Category Manager




        1. Untuk dapat menggunakan tombol-tombol di atas, terlebih dahulu memilih
            Section atau Category Name, dengan cara memberi centang pada
            (kotak check box di samping Section Name atau Category Name).
        2. Berikut ini fungsi dari tombol di atas :
Digunakan untuk membuat Section atau Category Name menjadi bisa di
 akses pada tampilan web.

 Digunakan untuk membuat Section atau Category Name menjadi tidak
 bisa di akses pada tampilan web.

 Berfungsi untuk meng-copy Section beserta Category-nya pada
 Section yang baru(Fungsi pada Section Manager). Berfungsi untuk meng-
 copy Category beserta Content Item-nya pada Category yang baru(Fungsi
 pada Section Manager).


 Digunakan untuk menghapus Section atau Category.



 Untuk mengedit Section atau Category yang sudah ada.



 Untuk membuat Section atau Category baru.


Menampilkan jendela http://help.joomla.org, sebagai jendela yang memuat
segala sesuatu yang ada pada Joomla untuk membantu kita sebagai
pengguna Joomla
B. Membuat Content Item

Ada beberapa cara untuk membuat content :




                                                   12

            43                                 Anda dapat menggunakan salah satu opsi-opsi
                                                              ini untuk mengakses content
                                                              items.




Pada bagian ini kita akan menggunakan metode 1. Yang akan membawa kita ke layar Content Items
Manager.




    Klik pada       Klik icon Published     Kolom Reorder             Tombol-tombol
  content title      agar content dapat     dan Order untuk          untuk mengedit,
 untuk mengedit         terlihat oleh           mengatur             memindahkan,
  content yang        pengunjung web         urutan-urutan           menghilangkan,
      ada.          dan icon FrontPage          content.             dll. content.
                    untuk menampilkan
                     di halaman depan
                            web.

  Klik icon New untuk membuat content baru.
Icon Preview
                   untuk melihat
                 artikel yang Anda
                        buat.
                                                         6
        1                    3
                                                             4

                                                                     5



 2   Intro Text : .




         Main Text : .                    1. Isi field Title.
                                          2. Copy contoh artikel ke Intro Text
                                          dan Main Text.
                                          3. Pilih section dan category yang
                                          diinginkan.
8                     7                   4. Bila content ingin ditampilkan
                                          di halaman       depan       web
                                          aktifkan   checkbox   Show     on
                                          Frontpage.
                                          5. Isi field lainnya pada Publishing
                                          Info.
                                          6. Klik pada tab Images.

                          7. Klik icon Upload untuk memasukkan file gambar
                          dari harddisk user ke folder web. Setelah diupload,
                          refresh halaman web untuk memasukkan daftarnya di
                          Gallery Images.
                          8. Untuk memasukkan gambar ke content, pilih
                          gambar pada Gallery Images. Lalu klik tanda
                          untuk memasukkan daftarnya ke Content Images.
                                    9. Lalu klik icon insert image. Gambar
                                    akan terletak pada tulisan {mosimage}.
                          10. Urutan gambar mengikuti urutan pada daftar Content
                          Images.
C. Mengubah tampilan content pada frontpage.
                                                    1. Akses Menu mainmenu
                                                    2. Pada Menu Item, klik Home.

                    1                2


                          3. Ubah nilai pada field # Leading, # Intro, Columns, #Links.

                          4. Klik icon Save
           3
Hasil akhir:
5. Pengelolaan Menu pada Joomla
       Menu merupakan sekelompok item yang merujuk kepada sebuah static content
,section, dan atau category dan lain sebagainya. Sehingga dengan menu kita dapat membuat jalan
pintas terhadap sebuah content.

 Dalam Joomla, menu dihubungkan dengan lima kelompok, yaitu:
        1. Content, dalam kelompok ini terdapat 9 jenis item lagi, yaitu:
                a. Blog Content Category, adalah sebuah menu yang menampilkan sebuah
                    content berdasarkan category-nya dalam bentuk blog.
                b. Blog      Content   Category     Archive,   adalah       sebuah   menu     yang
                    menampilkan sebuah content berdasarkan category archive-nya dalam
                    bentuk blog.
                c. Blog Content Section, adalah sebuah menu yang menampilkan sebuah
                    content berdasarkan section-nya dalam bentuk blog.
               d. Blog Content Section Archive, adalah sebuah menu yang menampilkan
                    sebuah content berdasarkan pada section archive-nya dalam bentuk blog.

               Blog adalah suatu cara menampilkan suatu content secara berurutan beserta
               paragraph pertamanya




               e. Link-Content Item, menu yang langsung dihubungkan dengan sebuah
                    content item.
               f.   Link-Static Content, menu yang dihubungkan dengan static content.
               g. List-Content Section, yang dihubungkan dengan content section.
               h. Submit-Content,      menu     yang    bisa   langsung      masuk    ke     proses
pengiriman artikel. Menu ini biasanya diset level = registered, karena
            user dengan status register yang boleh mengirimkan content.
       i.   Table-Content Category, adalah menu yang menampilkan content berdasarkan
            kategorinya dalam bentuk table.


2. Component, dalam kelompok ini terdapat tujuh jenis item, yaitu :
       a. Component, menu yang langsung me-link ke Component .
       b. Link-Component       Item,     menu yang langsung me-link ke
            Component Item.
       c. Link-Contact Item, menu yang langsung me-link ke Contact Item.
       d. Link-News Feed, menu yang langsung me-link ke Component
            News Feed.
       e.   Table-Contact Category, menu yang menampilkan daftar kontak ebsite
            pada component contact berdasarkan kategorinya dalam bentuk table.
       f.    Table-Newsfeed     Category,     sebuah    menu    yang   menampilkan dalam
            bentuk table sebuah component Newsfeed berdasarkan kategorinya.
       g. Table-Weblink Category, sebuah menu yang menampilkan weblink
            berdasarkan kategori tertentu dalam bentuk table.


3. Links, berisi lima jenis item menu, yaitu :
       a. Link-Component Item, sebuah menu yang langsung me-link ke component
            item.
       b. Link-Contact Item, sebuah menu yang langsung me-link ke contact item.
       c. Link-Newsfeeed,      sebuah   menu     yang    langsung   me-link   ke
            component newsfeed.
       d. Link-Static Content, sebuah menu yang langsung me-link ke static content.
       e. Link-URL, sebuah menu yang langsung me-link ke sebuah URL
            yang ditentukan.

4. Submit Content, untuk kelompok ini hanya ada satu jenis menu, yaitu
   Submit Content. Lihat pembahasan tentang submit content di atas.
5. Miscellanous, berisi jenis-jenis menu berikut :
       a. Separator/Placeholder, menu yang berfungsi untuk membuat garis pembatas
            antara menu yang satu dengan menu yang lainnya. Contoh :
Contoh Separator/Placeholder




b. Wrapper, menu yang berfungsi menampilkan sebuah website tertentu
   pada halaman web. Contoh tampilan menu wrapper :
5.2      Pengenalan Tab Menu
      1. Buka Control Panel Joomla yang telah kita install
      2. Setelah jendela Control Panel terbuka, pilih tab Menu




            a.   Menu manager : Menu ini berguna untuk membuat sebuah kelompok menu
                 baru (selain kelompok menu default Mambo/Joomla) atau memodifikasi
                 dan menghapusnya. Jadi jumlah submenu yang terdapat pada tab Menu dapat
                 diedit di Menu Manager.

            b.   Mainmenu : Adalah kelompok menu primer yang diperlukan untuk stkitar
                 pengoperasian     Mambo/Joomla      sehingga    untuk   alasan   apapun kelompok
                 mainmenu ini tidak diperbolehkan untuk dihapus.

            c. Othermenu : Adalah kelompok menu yang terdiri dari kumpulan link menu
                 yang berkaitan dengan joomla(seperti link menuju ke forum joomla),           serta
                 menu      administrator   yang   digunakan   untuk   login administrator.

            d. Topmenu : Kumpulan menu pokok yang berguna untuk pengeditan dasar
                 Joomla

            e.   Usermenu : Kelompok menu yang berisi segala sesuatu tentang user yang
                 sedang aktif. Menu ini baru bisa ditampilkan bila kita login sebagai user terlebih
                 dahulu.
Setelah membuat content yang terstruktur, maka dibutuhkan sebuah link agar end user
dapat mengakses informasi yang diinginkan. Untuk mengakses content, user membutuhkan sebuah
menu yang berisi link-link untuk dapat mengakses content yang diinginkan.
CMS Joomla yang telah terinstall, secara default telah terinstall beberapa menu, yaitu Main Menu,
Other Menu, Top Menu, dan User Menu. Kita dapat membuat menu sendiri atau mengedit
yang sudah ada.


                                  Top Menu



                                                                 1

                       Main Menu

                                                                 2



                                          Untuk menambah atau mengurangi menu : Menu
                                          Menu Manager.
                       User Menu          Untuk menambah atau mengurangi link pada menu :
                                          Menu nama_menu

                       Other Menu



   Untuk menambah atau mengurangi menu : Menu        Menu Manager.




                                     Untuk menghilangkan
                                    menu, pilih menu lalu klik
                                           icon Delete




                                                                     Untuk menambah menu,
                                                                            klik icon New


                                           1. Isi field Menu Name dan Module Title.
                                           2. Klik icon Save.
Hasil akhir :




   Untuk menambah atau mengurangi link pada menu : Menu           nama_menu (misal : mainmenu)




                                      Untuk menghilangkan
                                     link, pilih link lalu klik
                                     icon Trash                            Untuk menambahkan
                                                                            link, klik icon New




      Delete Menu Item no. 2, 4, 5, 6, 7, 8, 9, dan 10.




Blog – Content Section atau Table – Content Section : membuat link ke Section.
Blog – Content Category atau Table – Content Category : membuat link ke Category
Submit - Content : membuat link agar end user dapat mengirim content pada section tertentu
[ .: Latihan :. ]

1. Pada menu usermenu, tambahkan link Kirim Artikel dengan opsi Submit - Content untuk section
Ekstra dan delete link Submit News dan Submit Weblinks..
2. Pada menu kegiatan, tambahkan link dengan opsi Blog – Content Category untuk setiap category
pada section Kegiatan (Praktikum, Riset, Proyek, dan Study Group).
3. Pada menu ekstra, tambahkan link dengan opsi Blog – Content Category untuk setiap category
pada section Ekstra (IT Room, Pengumuman, dan Taushiyah).

Hasil akhir :




Agar menu dapat tampil di halaman frontend web :
1. Akses menu Modules     Site Modules.
3. Atur     urutan    menu
                                                           sehingga tampak      seperti
                                                           gambar di samping




Hasil akhir :




7.7     Designing the Look of Your Joomla! – Template
      Template dapat dianalogikan seperti “themes” pada OS Microsoft Windows, jadi yang
bertanggung jawab pada tampilan web Anda. Pada template biasanya terdapat sebuah file
index.php yang mendefinisikan tampilan secara umum semua halaman web dan file css
(cascading style sheet) yang mendefinisikan format dari halaman web.
1. Akses ke halaman Template Manager : Site       Template
                              Manager Site Templates.
                              2. Untuk mempreview template yang akan digunakan, arahkan
                              mouse ke atas link template.
                               3. Untuk menggunakan template yang Anda inginkan, pilih
                         1   templatenya lalu klik icon Default.



                                               3




    3            2




Instalasi Template
                                          1. Akses menu Installers Template – Site.
                                          2. Klik browse dan pilih template yang
                                          diinginkan untuk diinstall.
                                          3. Klik Upload File & Install
                     1                    NB : File template harus sudah dalam file
                                          terkompresi (.zip atau .tar.gz)




                                      2            3
header




Mengganti image pada template
      Image-image    yang    ada   pada   template,    seperti   header,   biasanya   terdapat   pada
foldertemplatesnama_templateimages dan image ini dengan bebasnya dapat kita rubah. Hal-hal
yang perlu diperhatikan, apabila Anda belum menguasai bahasa pemrograman web, adalah image-
image yang akan mengganti image yang ada, sebaiknya mempunyai nama dan ukuran pixel
yang sama dengan image yang akan diganti.

Sebagai contoh kita akan mengganti header dari template yang digunakan (JavaBean).
1. Masuk ke folder C:Program FilesxampphtdocsworkshoptemplatesJavaBeanimages
2. Temukan image yang sama dengan header (image_01.jpg).
3. Ganti dengan contoh header yang telah disediakan.
7.8 Expand Your Joomla! – Module, Component, & Mambot
         Module, Component, atau Mambot adalah plug-in bagi web Joomla Anda sehingga dapat
menambah feature-feature bagi web Joomla Anda. Menu-menu yang pernah Anda buat,
sebenarnya adalah plug-in Joomla, yaitu Module. Fasilitas Login Form, Search, Polls; adalah
plug-in Joomla, yaitu Module. Jadi Module adalah plug-in yang tampak di front-end web.
         Sedangkan Component adalah plug-in yang berada di back-end web. Salah satu
fungsinya, yaitu mengatur konfigurasi dari module. Misalnya membuat list pertanyaan pada module
Polls.
         Sedangkan Mambot adalah plug-in yang terintegrasi dengan content, sehingga menambah
feature dari content itu. Contoh yang paling jelas adalah editor untuk membuat suatu content,
sehingga content dapat dibuat layaknya editor Microsoft Word dengan tampilan WYSIWYG. Nama
Mambot itu adalah MCE Editor.
         Jadi suatu plug-in bisa saja terdiri ketiga plug-in, yaitu Component, Module, dan
Mambot. Atau hanya salah satu dari ketiganya saja. Informasi plugin Joomla: extensions.joomla.org

Instalasi Plug-in   Component
                                                    1. Akses menu Installers Components.
                                                    2. Pada Upload Package File, klik Browse…
                                                    3. Pilih paket component-nya dan klik Open.
                                                    4. Klik Upload File & Install.
                                     1




                                             2         4




                                                            Plug-in yang telah terinstall




Cobalah Install component di bawah ini.
          com_smo_ajax_shoutbox.zip                             docmanV13_RC_2.zip
          com_akobookplus2.0.3.zip                              com_joomlaxplorer_1.4.0.tar.gz
          com_joomlaboard-1-1-2.zip                             com_uddeim05b.zip
          com_rsgallery2_1.11.6- alpha.zip                      com_jce104.zip
Instalasi Plug-in      Module
                                                     1. Akses menu Installers Modules.
                                                     2. Pada Upload Package File, klik
                                                     Brows…
                                                     3. Pilih paket module-nya dan klik
                                                     Open.
                                     1               4. Klik Upload File & Install.




                                         2       4




                                                           Plug-in yang telah terinstall




[ .: Latihan :. ]
Install module di bawah ini.
         mod_smo_ajax_shoutbox.zip                        mod_latestdownV10_RC_2.zip
         cblogin.zip                                      mod_whosonline_udde.zip
         mod_jblatest.zip


Instalasi Plug-in      Mambot
                                                 1. Akses menu Installers Mambots.
                                                 2. Pada Upload Package File, klik
                                                     Browse…
                                                 3. Pilih paket module-nya dan klik Open.
                                                 4. Klik Upload File & Install.


                                             1
2       4




                                                               Plug-in yang telah terinstall




[ .: Latihan :. ]
Install mambot di bawah ini.
         bot_jce104.zip                                    cb_akocommentbot.zip


Konfigurasi Plug-in       Component


                                      Segala konfigurasi component terdapat pada menu
                                      Components Nama_Component.
                                      Untuk menghubungkan component dengan front-end user,
                                      dibutuhkan sebuah link untuk menghubungkannya.
                                                          1. Masuk ke salah satu menu,
                                                          misalkan mainmenu.
                                                          2. Klik icon New.

                                                      1   3. Klik pada tipe menu : Component.
                                                          4. Pilih component dan beri nama
                                                          linknya di field Name.
                                                          5. Klik icon Save.

                                                  3


                                                                               4
[ .: Latihan :. ]
5. Buat link di menu mainmenu untuk component :

         AkoBook
         DOCMan
         Joomlaboard Forum
         RSGallery
Konfigurasi Plug-in    Module
                                Segala konfigurasi module terdapat pada menu Modules       Site
                                Modules.




    Klik salah satu nama Module, untuk mengeditnya.




Keterangan :
         Title : Judul module untuk halaman front-           Module Order : Urutan
        end.                                              module terhadap module lain.
        Show Title : Menampilkan atau tidak judul              Pages / Items : Halaman mana saja
        module.                                               yang menampilkan module.
         Position : Posisi module pada halaman
        front-end.


[ .: Latihan :. ]
Buat tampilan menu halaman web seperti gambar di bawah ini.
Konfigurasi Plug-in   Mambot
                               Segala konfigurasi mambot terdapat pada menu Mambots
                               Site Mambots.



[ .: Latihan :. ]
                                            Publish Mambot AkoComment Bot.
7.9 Backup and Restore Database
Backup database
1. Akses : localhost/phpmyadmin
2. Pilih Database yang telah Anda buat
                                         1




                  2




3. Maka akan muncul tampilan seperti di bawah. Dan untuk membackupnya (Eksport) klik pada tab
Eksport.

                                                  3
4. Klik pada link Select All.
5. Beri tanda cek pada opsi Save as file.
6. Beri nama file databasenya pada field File name template.
7. Klik Go untuk menyimpan file database pada harddisk.




                                 4




                                5

                                              6

                           7


Maka akan muncul kotak dialog seperti berikut lalu klik Save dan simpan di lokasi yang diinginkan.




Database memuat semua informasi tentang web seperti content, nama template dan plugin
(component, module, dan mambot) yang terinstall, user teregistrasi, dan lainnya. Tetapi tidak
menyimpan file-file web seperti file plugin (component, module, dan mambot), image, atau
file lainnya.
Restore database
1. Akses : localhost/phpmyadmin
2. Pilih Database yang diinginkan.
Sebelum merestore (import) database yang kita inginkan, database yang lama harus
dihilangkan terlebih dahulu.
3. Untuk menghilangkan database lama, klik Check All
4. Pilih opsi Drop.




                              3                            4




5. Klik Yes.




       5                                               6
6. Klik pada tab Import.
7. Pilih database yang dinginkan
(klik      Choose).     Pastikan
ekstensinya .sql.
8. Dan klik Go.




                                       8

Contenu connexe

Tendances

Cara menginstall cms dengan aplikasi xampp
Cara menginstall cms dengan aplikasi xamppCara menginstall cms dengan aplikasi xampp
Cara menginstall cms dengan aplikasi xamppcyberbebek
 
2014-43. Pemrograman Web
2014-43. Pemrograman Web2014-43. Pemrograman Web
2014-43. Pemrograman WebSyiroy Uddin
 
training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"Dewi Rahmawati
 
2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan Wordpress2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan WordpressSyiroy Uddin
 
makalah cara mengoptimalisasi browser
makalah cara mengoptimalisasi browsermakalah cara mengoptimalisasi browser
makalah cara mengoptimalisasi browseranasta007
 

Tendances (13)

Cara menginstall cms dengan aplikasi xampp
Cara menginstall cms dengan aplikasi xamppCara menginstall cms dengan aplikasi xampp
Cara menginstall cms dengan aplikasi xampp
 
2014-43. Pemrograman Web
2014-43. Pemrograman Web2014-43. Pemrograman Web
2014-43. Pemrograman Web
 
Tugas 4 (20140210005)
Tugas 4 (20140210005)Tugas 4 (20140210005)
Tugas 4 (20140210005)
 
PI bab 1-- 4 -- penutup fixed
PI bab 1-- 4 -- penutup fixedPI bab 1-- 4 -- penutup fixed
PI bab 1-- 4 -- penutup fixed
 
Tugasindividu6
Tugasindividu6Tugasindividu6
Tugasindividu6
 
Tug as
Tug asTug as
Tug as
 
Tugas 4
Tugas 4Tugas 4
Tugas 4
 
training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"training module "web application development with cms and bootstrap"
training module "web application development with cms and bootstrap"
 
Tug as ii
Tug as iiTug as ii
Tug as ii
 
2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan Wordpress2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan Wordpress
 
Tugas 2
Tugas 2Tugas 2
Tugas 2
 
makalah cara mengoptimalisasi browser
makalah cara mengoptimalisasi browsermakalah cara mengoptimalisasi browser
makalah cara mengoptimalisasi browser
 
Tugas 4 tik
Tugas 4 tikTugas 4 tik
Tugas 4 tik
 

Similaire à 7. pembuatan website dengan joomla

Similaire à 7. pembuatan website dengan joomla (20)

CMS
CMSCMS
CMS
 
Laporan pembuatan desain web joomla
Laporan pembuatan desain web joomlaLaporan pembuatan desain web joomla
Laporan pembuatan desain web joomla
 
Tugas afi
Tugas afiTugas afi
Tugas afi
 
Bab1 mengenal joomla
Bab1 mengenal joomlaBab1 mengenal joomla
Bab1 mengenal joomla
 
Tugas 6 matkul rekayasa web 0317
Tugas 6 matkul rekayasa web 0317Tugas 6 matkul rekayasa web 0317
Tugas 6 matkul rekayasa web 0317
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Tugas web
Tugas webTugas web
Tugas web
 
Tugas web
Tugas webTugas web
Tugas web
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
BukuJoomla
BukuJoomlaBukuJoomla
BukuJoomla
 
Tugas ii . suhena
Tugas ii . suhenaTugas ii . suhena
Tugas ii . suhena
 
Tugas II . Suhena
Tugas II . SuhenaTugas II . Suhena
Tugas II . Suhena
 
Jomlaa
JomlaaJomlaa
Jomlaa
 
Rekayasa web part 6 khaerul anwar-1511510388
Rekayasa web part 6 khaerul anwar-1511510388Rekayasa web part 6 khaerul anwar-1511510388
Rekayasa web part 6 khaerul anwar-1511510388
 
Ukk 2016 - pemrograman web menggunakan wordpress - ilham fiqih
Ukk 2016 - pemrograman web menggunakan wordpress - ilham fiqihUkk 2016 - pemrograman web menggunakan wordpress - ilham fiqih
Ukk 2016 - pemrograman web menggunakan wordpress - ilham fiqih
 
Tugas6 0317-fani heryati-1411511262
Tugas6 0317-fani heryati-1411511262Tugas6 0317-fani heryati-1411511262
Tugas6 0317-fani heryati-1411511262
 
Cms
CmsCms
Cms
 
8 BAB II Landasan Teori
8 BAB II Landasan Teori8 BAB II Landasan Teori
8 BAB II Landasan Teori
 
Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)
 
Contoh laporan job sheet magang smk
Contoh laporan job sheet magang smkContoh laporan job sheet magang smk
Contoh laporan job sheet magang smk
 

Plus de Faiz Fanani

15_526_topic01.ppt
15_526_topic01.ppt15_526_topic01.ppt
15_526_topic01.pptFaiz Fanani
 
Dmjb tugas02-5211100043
Dmjb tugas02-5211100043Dmjb tugas02-5211100043
Dmjb tugas02-5211100043Faiz Fanani
 
Dmje tugas01-5211100043
Dmje tugas01-5211100043Dmje tugas01-5211100043
Dmje tugas01-5211100043Faiz Fanani
 
Pembelajaran mbd smester iii si_its
Pembelajaran mbd smester iii si_itsPembelajaran mbd smester iii si_its
Pembelajaran mbd smester iii si_itsFaiz Fanani
 
Final project pengantar sistem informasi
Final project pengantar sistem informasiFinal project pengantar sistem informasi
Final project pengantar sistem informasiFaiz Fanani
 
Modul 01 sisop_2012
Modul 01 sisop_2012Modul 01 sisop_2012
Modul 01 sisop_2012Faiz Fanani
 
59567935 remastering-ubuntu-dengan-uck
59567935 remastering-ubuntu-dengan-uck59567935 remastering-ubuntu-dengan-uck
59567935 remastering-ubuntu-dengan-uckFaiz Fanani
 
Mengukur kepuasan pelanggan
Mengukur kepuasan pelangganMengukur kepuasan pelanggan
Mengukur kepuasan pelangganFaiz Fanani
 
Proses pengembangan perangkat lunak
Proses pengembangan perangkat lunakProses pengembangan perangkat lunak
Proses pengembangan perangkat lunakFaiz Fanani
 

Plus de Faiz Fanani (11)

15_526_topic01.ppt
15_526_topic01.ppt15_526_topic01.ppt
15_526_topic01.ppt
 
Dmjb tugas02-5211100043
Dmjb tugas02-5211100043Dmjb tugas02-5211100043
Dmjb tugas02-5211100043
 
Dmje tugas01-5211100043
Dmje tugas01-5211100043Dmje tugas01-5211100043
Dmje tugas01-5211100043
 
Pembelajaran mbd smester iii si_its
Pembelajaran mbd smester iii si_itsPembelajaran mbd smester iii si_its
Pembelajaran mbd smester iii si_its
 
Final project pengantar sistem informasi
Final project pengantar sistem informasiFinal project pengantar sistem informasi
Final project pengantar sistem informasi
 
Modul 01 sisop_2012
Modul 01 sisop_2012Modul 01 sisop_2012
Modul 01 sisop_2012
 
59567935 remastering-ubuntu-dengan-uck
59567935 remastering-ubuntu-dengan-uck59567935 remastering-ubuntu-dengan-uck
59567935 remastering-ubuntu-dengan-uck
 
Mengukur kepuasan pelanggan
Mengukur kepuasan pelangganMengukur kepuasan pelanggan
Mengukur kepuasan pelanggan
 
Cobit pertamina
Cobit pertaminaCobit pertamina
Cobit pertamina
 
Proses pengembangan perangkat lunak
Proses pengembangan perangkat lunakProses pengembangan perangkat lunak
Proses pengembangan perangkat lunak
 
Kebahagiaan
KebahagiaanKebahagiaan
Kebahagiaan
 

7. pembuatan website dengan joomla

  • 1. BAB 7 JOOMLA 7.1 Introduction to Joomla! “Joomla! is one of the most powerful Open Source Content Management Systems on the planet. It is used all over the world for everything from simple web sites to complex corporate applications. Joomla! is easy to install, simple to manage, and reliable.” – www.joomla.org. 1.1 Content Management System Sebagai langkah awal ada baiknya Anda mengerti dahulu apa itu CMS atau Content Management System. Apakah sama dengan software HTML editor lainnya seperti Microsoft FrontPage, Dreamweaver, atau bahkan sebuah Notepad?. Seperti yang kita ketahui, content merupakan salah satu urat nadi dari kehidupan sebuah website. Tanpa content dapat dipastikan tidak ada website. Sebuah website yang dikelola dengan baik pasti akan selalu berusaha menampilkan content terbaru bagi para pengunjungnya. Lalu apa yang dimaksud dengan content sebenarnya? Pada dasarnya content adalah sebuah unit informasi yang digunakan untuk membentuk sebuah halaman di website. Dapat terdiri dari apa saja; teks, gambar, video, suara, dan lain sebagainya. Dari content yang sudah ada tadi, kemudian diatur sedemikian rupa sehingga membentuk sebuah website. Framework atau sistem, tempat di mana content itu diletakkan menfasilitasi ‘perkakas-perkakas’ yang dibutuhkan untuk menjaga konsistensi proses pembuatan halaman-halaman di website secara efisien dan efektif. Bila semua informasi diatas kita gabung menjadi satu, dapatlah disimpulkan, CMS adalah sebuah sistem yang memudahkan proses penciptaan sebuah website dinamis yang kaya akan content, dengan memberikan kemudahan kepada penulis/editor untuk menambah, memperbaharui dan menghapus content yang ada tanpa campur tangan langsung dari webmaster. Sebuah CMS akan membedakan content dari desain, memelihara konsistensi tampilan dan memudahkan pemanfaatan content untuk berbagai keperluan. Dengan menyimpan data di satu tempat, mengontrol hak akses dan alur kerja memperbesar kesempatan pemakai berpartisipasi dalam pengembangan website anda. - www.kyantonius.com
  • 2. 1.2 CMS Joomla [www.joomla.org] Joomla adalah salah satu dari ratusan free CMS yang tersedia di Internet yang memiliki jumlah pengguna yang besar. Kemudahan pengaturan content, dukungan di Internet yang banyak, plugin yang melimpah; merupakan keunggulan CMS Joomla yang membuat Joomla banyak diminati orang. Pada Joomla, setiap halaman dari web memuat bermacam-macam block dari content, block ini disebut juga position. Anda mengatur layout untuk halaman dengan sebuah template, termasuk penempatan banyak block pada halaman web, font, warna, dan background. Lalu Anda menempatkan bermacam-macam module dalam sebuah block. Dan terakhir Anda menambahkan content dan menampilkan pada halaman utama web Anda. 7.2 Struktur File dan Direktori Joomla Pada bagian ini kita belajar tentang struktur file dan direktori yang digunakan oleh Joomla. Seperti kita ketahur Joomla adalah sebuah website content management yang powerfull, maka sudah pasti mempunyai banyak file dan direktori. 1.3.1 Struktur File File yang kita bahas adalah file-file penting yang terletak di root direktori server Joomla, yaitu : 1. Index.php, merupakan file utama untuk menampilkan halaman web Joomla. Beberapa pengaturan joomla terdapat pada file ini. Jika kita mengakses file ini, berarti kita membuka halaman depan website Joomla. Misalnya www.lintau.com/index.php. 2. Configuration.php, merupakan file yang terbentuk saat kita melakukan proses instalasi Joomla. Pada file ini terdapat pengaturan untuk koneksi ke database, dan pengaturan penting lainnya. Jika file ini rusak, website Joomla tidak akan berfungsi. 3. Copyright.php, file ini berisi tentang hak cipta website CMs Joomla, walaupun sebenarnya lebih tepat disebut copyleft. 4. License.php, file ini berisi informasi tentang lisensi website CMS Joomla 5. Mainbody.php, ini merupakan file pendukung yang sangat penting dalam mengatur tampilan berita di website.Joomla. 6. Pathway.php, sebuah file yang berfungsi untuk menggmbarkan urutan proses aplikasi yang ada di Joomla.
  • 3. 7.2.1 Struktur Direktori Joomla mempunyai beberapa direktori yang mempunyai fungsi tersendiri. Setiap direktori mempunyai subdirektori dan file-file pendukung sesuai fungsinya. Berikut ini adalah struktur direktori Joomla. 1. Administrator, ini merupakan direktori khusus administrator untuk keperluan pengelolaan website Joomla. Mulai dari proses installasi modul, komponen. Mambot, bahasa sampai dengan proses maintenance web secara keseluruhan. 2. Cache, sebuah direktori khusus yang berfungsi untuk menyimpan data sementara di computer pengguna, tujuannya adalah mempercepat proses loading web jika dibuka pada waktu lain fungsinya sama dengan memori computer. 3. Components, merupakan direktori tempat menyimpan seluruh komponen yang terinstall di website Joomla. 4. Editor, sebuah direktori yang berfungsi untuk menyimpan berbagai editor yang diinstall pada website Joomla. 5. Help, sebuah direktori khusus untuk menampilkan bantuan jika kita menemukan Kendala dalam menggunakan Joomla. 6. Images, adalah direktori tempat menampung file-file gambar guna keperluan website Joomla. 7. Includes, ini merupakan direktori pendukung bagi aplikasi joomla yang lainnya. 8. Installation, direktori yang digunakan dalam proses installasi website Joomla. Jika proses installasi selesai, direktori ini sebaiknya dihapus, untuk mempertimbangkan keamanan web dimasa dating. 9. Language, sebuah direktori khusus untuk menampung jenis-jenis bahasa yang dapat digunakan di website yang multi bahasa. 10. Mambots, sebuah direktori untuk menampung tool tambahan dari Joomla, Misalnya, mos images, mos pagebreak,dll. 11. Media, sebuah direktori yang diperuntukkan untuk menyimpan dan meng- upload file-file ke dalam website Joomla, baik file gambar maupun teks. 12. Modules, tempat menyimpan modul-modul yang terinstal di website Joomla. 13. Templates, tempat menyimpan semua template yang terinstal di website Joomla.
  • 4. 7.3 Istilah-Istilah Penting Pada Joomla Banyak istilah-istilah yang kedengaran baru, jika kita betul-betul pemula dengan Joomla. Agar pemahaman kita terhadap Joomla lebih mudah, berikut ini diberikan penjelasan terhadap beberapa istilah yang akan sering digunakan nantinya. 1. Module, adalah bagian unit fungsi dari Joomla yang berguna untuk menampilkan fitur-fitur utam Joomla serta menampilkan beberapa komponen terkait. Secara default, Joomla telah menyediakan be berapa modul, seperti modul banner,menu, login, newsfeed, statistic, arsip,sindikasi, polling dan lain sebagainya serta modul yang disediakan oleh pihak ketiga. 2. Component, adalah sebuah aplikasi yang menambah nilai guna Joomla. Sebuah component mempunyai konfigurasi di bagian jendela administratornya. Misalnya komponen weblink, content form, polling dan lain sebagainya. 3. Mambots, sebuah unit fungsi Joomla yang disisipkan unutk memanipulasi ataupun menterjemahkan konten yang diproses sebelum ditampilkan. Seperti, Mambots editor, Mos image, dsb… 4. Template, sebuah aplikasi yang berfungsi untuk mengatur tampilan website Joomla secara keseluruhan. Template ini mirip dengan istilah Theme di Windows atau skin di Winamp. Pada template ini diatur sedemikian rupa sehingga website dapat tampil sesuai keinginan kita. 5. Content, semua berita/artikel/module/komponen yang terdapat dalam website secara keseluruhan Semua aplikasi pendukung Joomla terus dikembangkan oleh developer dan pihak ketiga, sehingga saat ini tersedia sampai dengan ratusan ribu module,component, mambots dan templates, add on yang dapat didownload secara gratis di internet,walaupun ada beberapa yang bersifat komersial.
  • 5. 7.4 Pra Instalasi CMS Joomla 2.1 Aplikasi yang Anda butuhkan 1. Paket AMP (Apache, MySQL, dan PHP) : salah satunya adalah XAMPP yang sudah terintegrasi AMP didalamnya dan menghemat resource komputer dibandingkan menginstall AMP satu-persatu. 2. CMS Joomla 1.0.10, atau juga Joomla versi terbaru 3. Notepad++, freeware untuk mengedit bahasa pemrograman. Alternatif : Wordpad, Editplus, Macromedia Dreamweaver, atau PHP editor lainnya. 4. 7zip, freeware program kompresi yang powerful. Alternatif : WinZip atau WinRar 5. Internet browser, contoh: Internet Explorer atau Opera atau Firefox. 2.2 Instalasi paket AMP (XAMPP) Instalasi paket AMP pada komputer Anda (sebelum Anda menguploadnya ke Internet) diperlukan untuk menjalankan CMS Joomla. Ikuti langkah-langkah berikut :
  • 6.
  • 7. Bila firewall anda aktif, pastikan untuk memberikan akses pada Apache dan MySql agar dapat aktif FTP Server tidak dibutuhkan, jadi tidak perlu di’instal
  • 8. Pastikan Apache dan MySQL sudah aktif (Running), kemudian buka browser anda ( internet explorer ataupun mozila dan ketikan alamat : http://localhost/xampp/splash.php
  • 9. 7.5 Instalasi CMS Joomla 1. Ekstrak paket Joomla [Joomla_1.0.10.zip] atau versi terbaru ke folder ( C:Program Filesxampphtdocs ) 2. Rename folder hasil ekstrasi dengan nama yang Anda inginkan, misalkan :workshop 3.Jalankan internet browser Anda, akses : localhost/workshop. Sehingga proses instalasi CMS Joomla dilakukan via internet browser. 4. Pre-installation check : pastikan setiap item ditandai warna hijau. Lalu klik Next. 5. license : Klik Next. 6. step 1 : Host Name : localhost MySQL User Name : root MySQL Password : root MySQL Database Name : workshop (terserah Anda) Klik Next. Klik OK. 7. step 2 : Isi nama web Anda pada field Site name. Misalkan Mega Workshop IE Community. Klik Next 8. step 3 : Isi field Your E-mail dengan e-mail Anda dan field Admin password dengan password yang Anda inginkan. Klik Next. 9. step 4 : Hilangkan folder [installation] pada folder web Anda [C:Program Filesxampphtdocs workshop] 10. Klik Administration untuk melihat halaman admin web. Atau dengan mengakses localhost/workshop/administrator. 11. Klik View Site untuk melihat halaman depan web baru Anda. Atau dengan mengakses localhost/workshop.
  • 10. Keterangan : Pada CMS Joomla halaman web terbagi dua bagian yaitu halaman Backend dan Frontend. Halaman Backend adalah halaman admin yang digunakan untuk melakukan segala konfigurasi web Anda. Akses : localhost/workshop/administrator Halaman Frontend adalah halaman yang akan tampil dan dapat dilihat oleh semua pengunjung web Anda. Akses : localhost/workshop
  • 11. 7.6 Manajemen Content Joomla Setelah menginstall CMS Joomla, kita dapat memulai untuk bekerja dengan content. Versi Joomla saat ini mempunyai hirarki content yang statis : Anda harus membagi content ke dalam tiga hirarki, tidak lebih, tidak kurang. Tiga hirarki itu adalah : Sections, Categories, dan Content. Sections seperti kontainer yang besar yang berisi semua categories. Categories adalah kontainer yang lebih kecil dan berisi content. Segala teks dan gambar yang tampil pada halaman web adalah content. Anda tak dapat membuat content tanpa memiliki sections dan categories. Sebagai contoh, kita akan membuat sebuah web laboratorium. Hirarkinya sebagai berikut : Section : Profil Section : Extra Category : Category : Laboratorium Pengumuman Asisten IT Room Study Group Taushiyah Section : Kegiatan Category : Praktikum Riset Contoh hirarki content Study Group 1. Untuk mengatur segala konfigurasi web, termasuk pengubahan hirarki content, masuk ke halaman administrator Joomla (localhost/workshop/administrator). 2. Masukkan username dan password. Klik pada menu atau Membuat Section icon untuk menambah atau mengedit section Ini akan membawa Anda menuju layer Section Manager.
  • 12. Klik disini untuk Klik icon new untuk mengedit section yang membuat section yang ada baru Secara default, Joomla sudah menginstall beberapa section (begitu juga category dan content). 1. Klik salah satu link untuk mengedit link yang ada. Misalkan link The News (News). 2. Masukkan pada field Title dan Section Name : Profil. 3. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Section Manager. NB : Icon Apply untuk menyimpan perubahan dan kembali ke halaman Section Editor. Icon Close untuk membatalkan perubahan. Untuk kembali ke halaman administrator awal, klik menu Home. Hasil akhir
  • 13. A. Membuat Category Klik pada menu atau icon untuk menambah atau mengedit category Ini akan membawa Anda menuju layar Category Manager. Klik link untuk mengedit category yang ada Klik icon New untuk membuat category baru 1. Klik icon New untuk membuat category baru.
  • 14. 2. Masukkan pada field Title dan Category Name : Laboratorium. 3. Pilih Section : Profil. 4. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Category Manager. Hasil Akhir : Fungsi Tombol Pada Halaman Section dan Category Manager 1. Untuk dapat menggunakan tombol-tombol di atas, terlebih dahulu memilih Section atau Category Name, dengan cara memberi centang pada (kotak check box di samping Section Name atau Category Name). 2. Berikut ini fungsi dari tombol di atas :
  • 15. Digunakan untuk membuat Section atau Category Name menjadi bisa di akses pada tampilan web. Digunakan untuk membuat Section atau Category Name menjadi tidak bisa di akses pada tampilan web. Berfungsi untuk meng-copy Section beserta Category-nya pada Section yang baru(Fungsi pada Section Manager). Berfungsi untuk meng- copy Category beserta Content Item-nya pada Category yang baru(Fungsi pada Section Manager). Digunakan untuk menghapus Section atau Category. Untuk mengedit Section atau Category yang sudah ada. Untuk membuat Section atau Category baru. Menampilkan jendela http://help.joomla.org, sebagai jendela yang memuat segala sesuatu yang ada pada Joomla untuk membantu kita sebagai pengguna Joomla
  • 16. B. Membuat Content Item Ada beberapa cara untuk membuat content : 12 43 Anda dapat menggunakan salah satu opsi-opsi ini untuk mengakses content items. Pada bagian ini kita akan menggunakan metode 1. Yang akan membawa kita ke layar Content Items Manager. Klik pada Klik icon Published Kolom Reorder Tombol-tombol content title agar content dapat dan Order untuk untuk mengedit, untuk mengedit terlihat oleh mengatur memindahkan, content yang pengunjung web urutan-urutan menghilangkan, ada. dan icon FrontPage content. dll. content. untuk menampilkan di halaman depan web. Klik icon New untuk membuat content baru.
  • 17. Icon Preview untuk melihat artikel yang Anda buat. 6 1 3 4 5 2 Intro Text : . Main Text : . 1. Isi field Title. 2. Copy contoh artikel ke Intro Text dan Main Text. 3. Pilih section dan category yang diinginkan. 8 7 4. Bila content ingin ditampilkan di halaman depan web aktifkan checkbox Show on Frontpage. 5. Isi field lainnya pada Publishing Info. 6. Klik pada tab Images. 7. Klik icon Upload untuk memasukkan file gambar dari harddisk user ke folder web. Setelah diupload, refresh halaman web untuk memasukkan daftarnya di Gallery Images. 8. Untuk memasukkan gambar ke content, pilih gambar pada Gallery Images. Lalu klik tanda untuk memasukkan daftarnya ke Content Images. 9. Lalu klik icon insert image. Gambar akan terletak pada tulisan {mosimage}. 10. Urutan gambar mengikuti urutan pada daftar Content Images.
  • 18. C. Mengubah tampilan content pada frontpage. 1. Akses Menu mainmenu 2. Pada Menu Item, klik Home. 1 2 3. Ubah nilai pada field # Leading, # Intro, Columns, #Links. 4. Klik icon Save 3
  • 20. 5. Pengelolaan Menu pada Joomla Menu merupakan sekelompok item yang merujuk kepada sebuah static content ,section, dan atau category dan lain sebagainya. Sehingga dengan menu kita dapat membuat jalan pintas terhadap sebuah content. Dalam Joomla, menu dihubungkan dengan lima kelompok, yaitu: 1. Content, dalam kelompok ini terdapat 9 jenis item lagi, yaitu: a. Blog Content Category, adalah sebuah menu yang menampilkan sebuah content berdasarkan category-nya dalam bentuk blog. b. Blog Content Category Archive, adalah sebuah menu yang menampilkan sebuah content berdasarkan category archive-nya dalam bentuk blog. c. Blog Content Section, adalah sebuah menu yang menampilkan sebuah content berdasarkan section-nya dalam bentuk blog. d. Blog Content Section Archive, adalah sebuah menu yang menampilkan sebuah content berdasarkan pada section archive-nya dalam bentuk blog. Blog adalah suatu cara menampilkan suatu content secara berurutan beserta paragraph pertamanya e. Link-Content Item, menu yang langsung dihubungkan dengan sebuah content item. f. Link-Static Content, menu yang dihubungkan dengan static content. g. List-Content Section, yang dihubungkan dengan content section. h. Submit-Content, menu yang bisa langsung masuk ke proses
  • 21. pengiriman artikel. Menu ini biasanya diset level = registered, karena user dengan status register yang boleh mengirimkan content. i. Table-Content Category, adalah menu yang menampilkan content berdasarkan kategorinya dalam bentuk table. 2. Component, dalam kelompok ini terdapat tujuh jenis item, yaitu : a. Component, menu yang langsung me-link ke Component . b. Link-Component Item, menu yang langsung me-link ke Component Item. c. Link-Contact Item, menu yang langsung me-link ke Contact Item. d. Link-News Feed, menu yang langsung me-link ke Component News Feed. e. Table-Contact Category, menu yang menampilkan daftar kontak ebsite pada component contact berdasarkan kategorinya dalam bentuk table. f. Table-Newsfeed Category, sebuah menu yang menampilkan dalam bentuk table sebuah component Newsfeed berdasarkan kategorinya. g. Table-Weblink Category, sebuah menu yang menampilkan weblink berdasarkan kategori tertentu dalam bentuk table. 3. Links, berisi lima jenis item menu, yaitu : a. Link-Component Item, sebuah menu yang langsung me-link ke component item. b. Link-Contact Item, sebuah menu yang langsung me-link ke contact item. c. Link-Newsfeeed, sebuah menu yang langsung me-link ke component newsfeed. d. Link-Static Content, sebuah menu yang langsung me-link ke static content. e. Link-URL, sebuah menu yang langsung me-link ke sebuah URL yang ditentukan. 4. Submit Content, untuk kelompok ini hanya ada satu jenis menu, yaitu Submit Content. Lihat pembahasan tentang submit content di atas. 5. Miscellanous, berisi jenis-jenis menu berikut : a. Separator/Placeholder, menu yang berfungsi untuk membuat garis pembatas antara menu yang satu dengan menu yang lainnya. Contoh :
  • 22. Contoh Separator/Placeholder b. Wrapper, menu yang berfungsi menampilkan sebuah website tertentu pada halaman web. Contoh tampilan menu wrapper :
  • 23. 5.2 Pengenalan Tab Menu 1. Buka Control Panel Joomla yang telah kita install 2. Setelah jendela Control Panel terbuka, pilih tab Menu a. Menu manager : Menu ini berguna untuk membuat sebuah kelompok menu baru (selain kelompok menu default Mambo/Joomla) atau memodifikasi dan menghapusnya. Jadi jumlah submenu yang terdapat pada tab Menu dapat diedit di Menu Manager. b. Mainmenu : Adalah kelompok menu primer yang diperlukan untuk stkitar pengoperasian Mambo/Joomla sehingga untuk alasan apapun kelompok mainmenu ini tidak diperbolehkan untuk dihapus. c. Othermenu : Adalah kelompok menu yang terdiri dari kumpulan link menu yang berkaitan dengan joomla(seperti link menuju ke forum joomla), serta menu administrator yang digunakan untuk login administrator. d. Topmenu : Kumpulan menu pokok yang berguna untuk pengeditan dasar Joomla e. Usermenu : Kelompok menu yang berisi segala sesuatu tentang user yang sedang aktif. Menu ini baru bisa ditampilkan bila kita login sebagai user terlebih dahulu.
  • 24. Setelah membuat content yang terstruktur, maka dibutuhkan sebuah link agar end user dapat mengakses informasi yang diinginkan. Untuk mengakses content, user membutuhkan sebuah menu yang berisi link-link untuk dapat mengakses content yang diinginkan. CMS Joomla yang telah terinstall, secara default telah terinstall beberapa menu, yaitu Main Menu, Other Menu, Top Menu, dan User Menu. Kita dapat membuat menu sendiri atau mengedit yang sudah ada. Top Menu 1 Main Menu 2 Untuk menambah atau mengurangi menu : Menu Menu Manager. User Menu Untuk menambah atau mengurangi link pada menu : Menu nama_menu Other Menu Untuk menambah atau mengurangi menu : Menu Menu Manager. Untuk menghilangkan menu, pilih menu lalu klik icon Delete Untuk menambah menu, klik icon New 1. Isi field Menu Name dan Module Title. 2. Klik icon Save.
  • 25. Hasil akhir : Untuk menambah atau mengurangi link pada menu : Menu nama_menu (misal : mainmenu) Untuk menghilangkan link, pilih link lalu klik icon Trash Untuk menambahkan link, klik icon New Delete Menu Item no. 2, 4, 5, 6, 7, 8, 9, dan 10. Blog – Content Section atau Table – Content Section : membuat link ke Section. Blog – Content Category atau Table – Content Category : membuat link ke Category Submit - Content : membuat link agar end user dapat mengirim content pada section tertentu
  • 26. [ .: Latihan :. ] 1. Pada menu usermenu, tambahkan link Kirim Artikel dengan opsi Submit - Content untuk section Ekstra dan delete link Submit News dan Submit Weblinks.. 2. Pada menu kegiatan, tambahkan link dengan opsi Blog – Content Category untuk setiap category pada section Kegiatan (Praktikum, Riset, Proyek, dan Study Group). 3. Pada menu ekstra, tambahkan link dengan opsi Blog – Content Category untuk setiap category pada section Ekstra (IT Room, Pengumuman, dan Taushiyah). Hasil akhir : Agar menu dapat tampil di halaman frontend web : 1. Akses menu Modules Site Modules.
  • 27. 3. Atur urutan menu sehingga tampak seperti gambar di samping Hasil akhir : 7.7 Designing the Look of Your Joomla! – Template Template dapat dianalogikan seperti “themes” pada OS Microsoft Windows, jadi yang bertanggung jawab pada tampilan web Anda. Pada template biasanya terdapat sebuah file index.php yang mendefinisikan tampilan secara umum semua halaman web dan file css (cascading style sheet) yang mendefinisikan format dari halaman web.
  • 28. 1. Akses ke halaman Template Manager : Site Template Manager Site Templates. 2. Untuk mempreview template yang akan digunakan, arahkan mouse ke atas link template. 3. Untuk menggunakan template yang Anda inginkan, pilih 1 templatenya lalu klik icon Default. 3 3 2 Instalasi Template 1. Akses menu Installers Template – Site. 2. Klik browse dan pilih template yang diinginkan untuk diinstall. 3. Klik Upload File & Install 1 NB : File template harus sudah dalam file terkompresi (.zip atau .tar.gz) 2 3
  • 29. header Mengganti image pada template Image-image yang ada pada template, seperti header, biasanya terdapat pada foldertemplatesnama_templateimages dan image ini dengan bebasnya dapat kita rubah. Hal-hal yang perlu diperhatikan, apabila Anda belum menguasai bahasa pemrograman web, adalah image- image yang akan mengganti image yang ada, sebaiknya mempunyai nama dan ukuran pixel yang sama dengan image yang akan diganti. Sebagai contoh kita akan mengganti header dari template yang digunakan (JavaBean). 1. Masuk ke folder C:Program FilesxampphtdocsworkshoptemplatesJavaBeanimages 2. Temukan image yang sama dengan header (image_01.jpg). 3. Ganti dengan contoh header yang telah disediakan.
  • 30. 7.8 Expand Your Joomla! – Module, Component, & Mambot Module, Component, atau Mambot adalah plug-in bagi web Joomla Anda sehingga dapat menambah feature-feature bagi web Joomla Anda. Menu-menu yang pernah Anda buat, sebenarnya adalah plug-in Joomla, yaitu Module. Fasilitas Login Form, Search, Polls; adalah plug-in Joomla, yaitu Module. Jadi Module adalah plug-in yang tampak di front-end web. Sedangkan Component adalah plug-in yang berada di back-end web. Salah satu fungsinya, yaitu mengatur konfigurasi dari module. Misalnya membuat list pertanyaan pada module Polls. Sedangkan Mambot adalah plug-in yang terintegrasi dengan content, sehingga menambah feature dari content itu. Contoh yang paling jelas adalah editor untuk membuat suatu content, sehingga content dapat dibuat layaknya editor Microsoft Word dengan tampilan WYSIWYG. Nama Mambot itu adalah MCE Editor. Jadi suatu plug-in bisa saja terdiri ketiga plug-in, yaitu Component, Module, dan Mambot. Atau hanya salah satu dari ketiganya saja. Informasi plugin Joomla: extensions.joomla.org Instalasi Plug-in Component 1. Akses menu Installers Components. 2. Pada Upload Package File, klik Browse… 3. Pilih paket component-nya dan klik Open. 4. Klik Upload File & Install. 1 2 4 Plug-in yang telah terinstall Cobalah Install component di bawah ini. com_smo_ajax_shoutbox.zip docmanV13_RC_2.zip com_akobookplus2.0.3.zip com_joomlaxplorer_1.4.0.tar.gz com_joomlaboard-1-1-2.zip com_uddeim05b.zip com_rsgallery2_1.11.6- alpha.zip com_jce104.zip
  • 31. Instalasi Plug-in Module 1. Akses menu Installers Modules. 2. Pada Upload Package File, klik Brows… 3. Pilih paket module-nya dan klik Open. 1 4. Klik Upload File & Install. 2 4 Plug-in yang telah terinstall [ .: Latihan :. ] Install module di bawah ini. mod_smo_ajax_shoutbox.zip mod_latestdownV10_RC_2.zip cblogin.zip mod_whosonline_udde.zip mod_jblatest.zip Instalasi Plug-in Mambot 1. Akses menu Installers Mambots. 2. Pada Upload Package File, klik Browse… 3. Pilih paket module-nya dan klik Open. 4. Klik Upload File & Install. 1
  • 32. 2 4 Plug-in yang telah terinstall [ .: Latihan :. ] Install mambot di bawah ini. bot_jce104.zip cb_akocommentbot.zip Konfigurasi Plug-in Component Segala konfigurasi component terdapat pada menu Components Nama_Component. Untuk menghubungkan component dengan front-end user, dibutuhkan sebuah link untuk menghubungkannya. 1. Masuk ke salah satu menu, misalkan mainmenu. 2. Klik icon New. 1 3. Klik pada tipe menu : Component. 4. Pilih component dan beri nama linknya di field Name. 5. Klik icon Save. 3 4 [ .: Latihan :. ] 5. Buat link di menu mainmenu untuk component : AkoBook DOCMan Joomlaboard Forum RSGallery
  • 33. Konfigurasi Plug-in Module Segala konfigurasi module terdapat pada menu Modules Site Modules. Klik salah satu nama Module, untuk mengeditnya. Keterangan : Title : Judul module untuk halaman front- Module Order : Urutan end. module terhadap module lain. Show Title : Menampilkan atau tidak judul Pages / Items : Halaman mana saja module. yang menampilkan module. Position : Posisi module pada halaman front-end. [ .: Latihan :. ] Buat tampilan menu halaman web seperti gambar di bawah ini.
  • 34. Konfigurasi Plug-in Mambot Segala konfigurasi mambot terdapat pada menu Mambots Site Mambots. [ .: Latihan :. ] Publish Mambot AkoComment Bot.
  • 35. 7.9 Backup and Restore Database Backup database 1. Akses : localhost/phpmyadmin 2. Pilih Database yang telah Anda buat 1 2 3. Maka akan muncul tampilan seperti di bawah. Dan untuk membackupnya (Eksport) klik pada tab Eksport. 3
  • 36. 4. Klik pada link Select All. 5. Beri tanda cek pada opsi Save as file. 6. Beri nama file databasenya pada field File name template. 7. Klik Go untuk menyimpan file database pada harddisk. 4 5 6 7 Maka akan muncul kotak dialog seperti berikut lalu klik Save dan simpan di lokasi yang diinginkan. Database memuat semua informasi tentang web seperti content, nama template dan plugin (component, module, dan mambot) yang terinstall, user teregistrasi, dan lainnya. Tetapi tidak menyimpan file-file web seperti file plugin (component, module, dan mambot), image, atau file lainnya.
  • 37. Restore database 1. Akses : localhost/phpmyadmin 2. Pilih Database yang diinginkan. Sebelum merestore (import) database yang kita inginkan, database yang lama harus dihilangkan terlebih dahulu. 3. Untuk menghilangkan database lama, klik Check All 4. Pilih opsi Drop. 3 4 5. Klik Yes. 5 6 6. Klik pada tab Import. 7. Pilih database yang dinginkan (klik Choose). Pastikan ekstensinya .sql. 8. Dan klik Go. 8