modul-pelatihan-web-joomla

Document Sample
modul-pelatihan-web-joomla Powered By Docstoc
					         Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011


    I.   Instalasi XAMPP di Windows


      Sebuah PC atau Laptop dapat kita jadikan sebagai web server. Disini akan dibahas installasi
web server dengan fasilitas Apache 2, PHP 5, dan MySQL 5 dengan menggunapak paket software
XAMPP. Paket XAMPP ini merupakan satu paket installasi yang nantinya

akan menginstall Server Apache, PHP, dan MySQL.

       Paket ini dapat di download di http://www.apachefriends.org/en/xampp-windows.html
dengan mengikuti petunjuk yang ada pada situs tersebut. Setelah mendapatkan software XAMPP
tersebut langsung saja Double klik atau jalankan klik kanan lalu klik Run.




Double klik




                                                                                                         1
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




Klik Next.




Klik Next.




                                                                                                         2
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




Pilih Install Apache as service dan Install MySQL as service, jika Filezilla ftp server ingin diinstall juga
sebagai service pilih juga. Lalu klik Install.




Setelah instalasi selesai, muncul message berikut :




                                                                                                               3
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




Klik Finish, dan kemudian muncul message box berikut :




Klik Ok.




Klik Yes, jika ingin segera menjalankan XAMPP Control Panel.
Instalasi XAMPP 1.6.6 selesai dilakukan.


Tampilan XAMPP Control Panel.




                                                                                                         4
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




Setingan pada kontrol panelnya cukup sederhana. Pada bagian Svc ada bagian yang tanpa centang,
itu tandanya service dari Aplikasi belum terinstal pada windows. Agar Service terinstall pada
Windows Services, klik pada bagian Svc.
Untuk start/stop service tinggal klik pada tombol Start/Stop.


Untuk mengetes apakah server yang kita buat berjalan dengan baik, silahkan Akses server dengan
mengetikkan http://localhost/

Berikut tampilan web administrasi pada XAMPP.




                                                                                                         5
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
          Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011


    II.   Installasi Joomla 1.5.xx


          Joomla 1.5 adalah salah satu proyek open source di bidang web developer.

Turunan dari CMS Mambo ini telah menjadi sangat populer dan telah mendapatkan

beberapa penghargaan prestisius. Dalam artikel ini kita aakn membahas bagaimana

menginstalasi CMS Joomla ini. Namun sebelumnya, pada komputer anda harus terinstall

sebuah web server virtual, yang disini kita menggunakan XAMPP.



Proses Instalasi CMS Joomla 1.5

Jika anda belum mempunyai package Joomla 1.5 maka anda dapat mendownloadnya

terlebih dahulu di website resmi joomla www.joomla.org



1. Download Joomla_1.5.10-Stable-Full_Package.zip

2. Buat folder di dalam folder www pada direktori XAMPP Server dengan nama

folder menyesuaikan nama proyek. Sebagai contoh websekolah

3. Ekstaksi file yang ada di dalam Joomla_1.5.10-Stable-Full_Package.zip ke

dalam direktori yang telah dibuat tersebut.

4. Setelah proses ekstrak selesai langsung akses http://localhost/websekolah

5. Kemudian akan muncul halaman pertama instalasi Joomla

6. Pilih bahasa yang akan anda gunakan dalam pengembangan halaman web sekolah




                                                                                                         6
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




7. Selanjutnya adalah proses checking system & hardware support untuk instalasi Joomla.




                                                                                                         7
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




8. Setelah Pre-Installation Check selesai dilakukan, maka proses instalasi akan dilanjutkan ke License
Agreement




                                                                                                         8
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




9. Setelah license agreement disetujui, proses intalasi dilanjutkan ke konfigurasi Database




10. Setelah proses pengkonfigurasian database selesai, maka instalasi akan dilanjutkan ke proses
konfigurasi File Transfer Protocol (FTP). Proses ini dapat langsung kita lewati jika kita tidak
mengetahui konfigurasi FTP-nya




                                                                                                         9
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




11. Setelah proses konfigurasi FTP selesai, kita lanjutkan ke proses konfigurasi halaman web yang
akan kita buat.




                                                                                                         10
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




12. Setelah proses konfigurasi halaman selesai, kita lanjutkan ke proses selanjutnya. Maka akan
muncul halaman seperti ini.




                                                                                                         11
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




13. Sebelum kita mem-preview halaman web kita atau masuk ke site administrator, ada peringatan
untuk menghapus folder instalasi pada package joomla yang telah diekstrak tadi.




                                                                                                         12
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




14. Setelah kita hapus folder instalasi pada folder proyek kita maka ketika kita mem-preview
halaman yang telah kita buat hasilnya adalah sebagai berikut.




                                                                                                         13
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




15. Jika kita masuk ke site administrator, maka kita akan dihadapkan pada halaman login (verifikasi
user). Masukkan username dan password. Halaman Administrator dapat diakses di
http://localhost/websekolah/administrator/




16. Setelah berhasil login, maka akan dihadapkan ke Joomla Control Panel seperti berikut.




                                                                                                         14
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




17. Pada tahap ini Anda telah berhasil melakukan installasi joomla. Dan Anda bisa bebas berkreasi.

        III. Konfigurasi Control Panel Joomla
        Setelah melewati halaman login, anda akan dibawa ke sebuah sistem control panel. Dari sini
kita bisa mengatur keseluruhan isi dari Joomla yang kita buat. Ada berbagai menu yang bisa kita
gunakan disini diantaranya site, menus, content, components, extensions, tools, dan help.

    a. Menu site digunakan untuk mengakses konfigurasi situs secara umum.

    b. Menus digunakan untuk mengatur menu-menu yang ada pada situs.

    c. Content digunakan untuk mengatur isi dari situs, baik itu section, category, maupun artikel-
        artikel di dalamnya.

    d. Menu components digunakan untuk mengatur komponen-komponen yang ada pada Joomla.
        Komponen ini bisa berupa komponen bawaan maupun hasil installasi kita.

    e. Menu extension berisi konfigurasi modul, template, plugin, serta bahasa. Modul-modul ini
        bisa ditambahkan atau dihapus melalui menu ini juga.




                                                                                                         15
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




    1. Menu

      Sebagaimana dijelaskan pada awal bagian ini, menu yang dimaksud disini merupakan menu-
menu yang nantinya akan muncul pada halaman website. Menu ini bisa diatur melalui menu
manager dengan tamplan sebagai berikut.




         Disini kita bisa menambahkan menu, menghapus menu, serta mengatur item-item yang
dimuat dari masing-masing menu. Item ini nantinya akan di list pada tampilan menu di website.
Item ini dapat berupa link ke salah satu isi dari situs seperti artikel, berita, pencarian, pengguna, dan
lain-lain. Juga dapat berupa link ke situs-situs di luar website kita.

        Pemilihan tipe menu item yang akan kita buat merupakan langkah pertama yang dilakukan

                                                                                                         16
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
        Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011


untuk menambahkan menu item sebelum mengatur isi dari itemnya. Tampilannya dapat dilihat
seperti gambar berikut.




       Setelah tipe menu item dipilih, kita akan dibawa ke halaman menu editor dimana kita
diminta mengisikan detail dari item suatu menu.

    -   judul dari menu ini,

    -   alias yang akan dimunculkan pada menu,

    -   link tujuan dimana halaman akan berpindah bila menu ini di akses, serta lokasi item menu
        ini. Lokasi ini meliputi nama menu tempat item ini diletakkan,

                                                                                                         17
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
        Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011


    -   level menu ini, apakah menu utama atau sub menu darimenu lain yang sudah ada juga
        urutan item ini dari item-item yang lain pada satu menu.

    -   Selain itu kita juga perlu mengatur apakah menu ini dipublikasikan atau tidak,

    -   juga akses level yang menunjukkan user level apakah yang bisa mengakses menu ini. Apakah
        publik bisa mengaksesnya, atau harus register dan login terlebih dahulu.

    -   Pengaturan terakhir adalah bagaimana bila menu ini diakses, apakah dibuka pada halaman
        yang sama ataukah akan membuka halaman baru. Tampilan pengaturan detail menu
        itemnya adalah seperti gambar berikut.




                                                                                                         18
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




    2. Content

Dalam Joomla dikenal istilah section, category, dan article. Keseluruhan konten pada joomla
dikelompokkan dalam section-section. Pada setiap section ini dibagi lagi menjadi beberapa kategori
yang mengelompokkan artikel-artikel pada joomla. Artikel inilah nantinya yang akan menjadi konten
atau isi dari situs yang kita buat.




Halaman depan section manager dan category manager dapat dilihat seperti pada gambar berikut.




                                                                                                         19
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




        Melalui kedua halaman manajemen ini kita bisa menambahkan maupun menghapus section
dan category dari artikel isi dari situs kita. Sedangkan artikel itu sendiri merupakan suatu isi dari
situs. Dapat berupa gambar, tulisan, dan lain-lain sesuai dengan yang kita kehendaki.

      Pengaturan artikel dapat melalui article manager maupun pada halaman control panel
dengan menekan tombol add new article.

      Perintah penambahan artikel baru akan membawa kita ke halaman editor artikel seperti
tampak pada gambar berikut.




                                                                                                         20
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




    3. Templates, Languages, Plugins

      Template merupakan tampilan dari suatu situs. Disini diatur posisi tiap-tiap menu serta
berbagai bentuk yang ada pada tampilan suatu situs. Bisa dibilang template merupakan komposisi
pengaturan susunan suatu situs.

       Template pada Joomla dapat dikonfigurasi melalui template manager. Disini kita bisa
mengatur template-template yang tersedia pada joomla. Kita bisa memilih template mana yang
akan digunakan sebagai default, kita bisa juga mengubah isi dari template-template yang ada

sesuai dengan fitur yang disediakan template tersebut. Tampilan template manager dapat dilihat
pada gambar berikut.




                                                                                                         21
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




        Template hanya bisa ditambahkan maupun dihapus melalui menu install/uninstall.
Install/Uninstall dapat diakses dari menu ekstension. Untuk menginstall cukup kita masukkan file
hasil installasi kita pada halaman module manager bagian install. Sedangkan untuk menghapus
template, pada extension manager ada menu template. Disana nantinya kita bisa melihat template-
template yang ada dan dapat kita hapus. Perlu diketahui, template yang bisa dihapus hanya
template yang tidak sedang digunakan sebagai default. Tampilan extension managernya adalah
sebagai berikut.




       Selain template, kita juga bisa menambahkan komponen, bahasa, dan lain-lain melalui
extension manager dengan cara yang sama. Komponen-komponen ini bisa kita download dari
internet di berbagai situs yang ada.

                                                                                                         22
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




    4. Module

   Modul merupakan bagian dari Joomla yang dapat ditambahkan pada situs yang kita buat. Kita
dapat mengatur modul-modul yang ada pada situs kita melalui modul manager. Tampilan modul
manager dapat kita lihat pada gambar berikut.




        Pada Modul Manager semua modul yang ada pada situs kita akan tampak sebagai list. Disini
kita bisa mengatur posisi modul-modul tersebut, mengaktifkan dan menon-aktifkan serta
menghapus dan menambah modul baru. Setiap kali menambah modul baru, kita diminta memilih
tipe modul tersebut. Tipe-tipe modul yang ada dapat dilihat pada gambar berikut




                                                                                                         23
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011




Tipe-tipe itu antara lain adalah:

➢Archived Content : Daftar Konten yang tersimpan pada situs

➢Banner : Banner atau iklan.

➢Breadcrumbs : Lokasi pengunjung saat ini pada situs.

➢Custom HTML : Modul dengan script yang bisa kita isi sendiri.

➢Feed Display : Feeder untuk menampilkan membaca isi situs melalui situs lain maupun feed
reader lain.

➢Footer : Bagian bawah situs, biasa berisi copyright dan identitas pemilik serta pengembang situs.

➢ImageSlideShow : Penampil gambar secara acak yang bergantian berupa slide dari satu gambar
ke gambar lain.

➢Latest News : Berita terbaru pada situs.

➢Login : Form login, lengkap dengan menu registrasi.


                                                                                                         24
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id
       Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011


➢Menu : Menu baru.

➢Most Read Content : Daftar konten atau isi situs yang paling sering dibaca.

➢Newsflash : Tampilan satu kategori tertentu yang dijadikan sekilas info atau news flash pada
situs.

➢Poll : Pemilihan polling, serta menu untuk melihat hasilnya.

➢Random Image : Penampilan gambar secara acak dari suatu folder yang ada pada situs. Berubah
bila kita berpindah halaman.

➢Related Articles : Artikel-artikel yang berhubungan.

➢Search : Modul pencarian dari artikel yang ada pada situs.

➢Sections : Menu section yang ada pada situs untuk melihat artikel apa saja yang ditulis pada
section tersebut.

➢Statistics : Statistik pengunjung situs.

➢Syndicate : Konetifitas situs dengan situs-situs lain yang saling berhubungan.

➢Who's Online : Daftar pengunjung yang sedang mengunjungi situs.

➢Wrapper : Frame dari web atau situs lain yang hendak ditampilkan pada situs kita.




                                                                                                         25
Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:31
posted:10/28/2012
language:Indonesian
pages:25