Modul Pengembangan Website Sekolah berbasis ... - Pandu32.com

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

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

1

Modul Pelatihan Pengembangan Website Sekolah berbasis Joomla 2011

Klik Next.

Klik Next.


2


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


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


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

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


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


7


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


8


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


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


10


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


11


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


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


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


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


1. Menu

Sebagaimana dijelaskan pada awal bagian ini, menu yang dimaksud disini merupakan menumenu 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 Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id

16

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

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


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


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


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


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 templatetemplate 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. Universitas Negeri Semarang :: http://unnes.ac.id |Teknologi Pendidikan :: http://teknodik.unnes.ac.id

22


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


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

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