E-book Membuat Web Sekolah dengan CMS Joomla 1.

0 1 dari 16

BAB 5

BAGAIMANA MEMBUAT SITUS?

Bab ini :

 Mempelajari dan membuat daftar menu

 Bagaimana membuat menu sebuah web
 Melakukan dan membuat Menu statis
 Mempelajari cara membuat halaman profil sekolah
 Bagaimana cara membuat hyperlink ke Link to menu
 Bagaimana cara membuat menu dinamis
 Mempelajari bagaiaman caranya membuat section dan content News

A. Daftar Menu
Seperti dipaparkan di bab IV tentang contoh kasus pembuatan web sekolah SMU
Larangan Indah 27, ada informasi yang bisa langsung dikelompokkan untuk
diintegrasikan/disisipkan ke dalam sistem program aplikasi Joomla. Untuk
lebih jelasnya penulis akan membuatkan susunan menu dan kategori isi berdasarkan
informasi yang sudah ada.

Menu utama yaitu terdiri dari :

 Depan

Berisi informasi sekolah, berita seputar pendidikan, dokumen terkini dan terbaru yang
dipajang di depan

 Berita berupa isi informasi berita

 Galeri Photo (add-on)
 Informasi photo kegiatan sekolah
 Dokumen (add-on)
 Dokumen yang akan disebarkan kepada sekolah
 Profil
 SDM
 Kesiswaan (OSIS)
 Program Strategis
 Prestasi
 Fasilitas
 Program Unggulan

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 2 dari 16

 Kurikulum

Menu Atas yaitu terdiri dari :

 Forum Diskusi (add-on)

 Buku tamu (add-on)
 Peta situs (add-on)
 Pencarian (Search)
 Weblink
 Contact

Menu fly-page yaitu terdiri dari :

 Polling
 Status Online
 User Login

B. Membuat Menu
Ada dua jenis menu yang terdapat dalam Joomla, yaitu menu statis dan menu
dinamis. Menu statis adalah menu yang berisikan tentang informasi yang updated
informasinya sangat lama dan baku. Untuk contoh di sini adalah profil sekolah, SDM,
Kesiswaan (OSIS), Program Strategis, Prestasi, Fasilitas, Program Unggulan,
Kurikulum. Menu dinamis adalah menu yang updated informasinya setiap waktu. Jadi
rentang waktu perubahannya sangat cepat. Untuk kategori ini adalah berita.

1. Menu Statis

Pertama, pembaca membuat menu profil dulu. Masuklah ke halaman administrasi dulu.
Ketik http://localhost/sekolah/administrator bila muncul halaman log-in, ketik nama
username dan password.

Gambar 5.1. Halaman login administrator ( Web-Joomla )

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 3 dari 16

Bila log-in berhasil, maka akan muncul halaman depan administrasi (frontpage).

Gambar 5.2. Halaman Frontpage ( Web-Joomla )

Klik ikon static content manager.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 4 dari 16

Gambar 5.3. Ikon Static Manager ( Web-Joomla )

Atau klik menu di menu bar pilih Content klik Static Content Manager.

Gambar 5.4. Menu Static Content Manager ( Web-Joomla )

Akan muncul halaman Static Content Manager yang menampilkan daftar item yang
sudah ada seperti contoh Joomla! License Guidelines.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 5 dari 16

Gambar 5.5. Halaman Static Content Manager ( Web-Joomla )

Gambar 5.6. Menghapus item “Joomla License Guidelines " ( Web-Joomla )

Item ini tidak diperlukan untuk itu harus dihapus.

Klik tombol checklist, kemudian akan muncul tampilan tanda. Lalu klik ikon tombol
Trash.

Gambar 5.7. Pemberitahuan proses Trash berhasil ( Web-Joomla )

2. Profil Sekolah

Sekarang pembaca bisa membuat item baru yaitu Profil Sekolah. Klik ikon New,
kemudian akan muncul halaman Static Content Item.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 6 dari 16

Gambar 5.8. Halaman Static Content Item ( Web-Joomla )

Perhatikan, ada beberapa kelompok kolom yang muncul. Mari fokuskan pada tab
(kolom) item details.

Gambar 5.9. Halaman pengisian data profil ( Web-Joomla )

Di baris Title ketik judul Profil Sekolah di kotak isianya. Kemudian isi teks di
kolom Text (required). Untuk isi dari Profil Sekolah pembaca bisa mengambil bahan
yang telah disediakan. Buka file profil_sekolah.doc di CD yang disertakan. Salin dan
tempatkan (copy&paste) isi Profil ke halaman text.

Selanjutnya pembaca bisa mengedit dan mengatur ulang text. Dalam hal ini Joomla
menyediakan tools editor WYSIWYG untuk mengelola dan mengatur
dokumen html. Penggunaanya sama seperti menggunakan Ms Word. Secara default
editor yang aktif adalah TinyMCE WYSIWYG editor. Bila pembaca menyalin teks dari Ms

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 7 dari 16

Word atau pengolah html, biasanya tampilannya sudah cukup bagus. Jadi tidak terlalu
rumit untuk diolah.

Gambar 5.10. Ikon editor WYISWYG ( Web-Joomla )

3. Link To Menu

Berikutnya yaitu membuatkan menu langsung (link to menu). Silakan klik menu di
sebelah kanan.

Gambar 5.11. Tab Link to Menu ( Web-Joomla )

Cari tab link to menu dan klik. Perhatikan teks Select a Menu, pilih dan klik main
menu.

Gambar 5.12. Detail tab Link To Menu ( Web-Joomla )

Sekarang berpindah ke Menu Item Name ketik teks Profil Sekolah. Langkah
berikutnya mengklik tombol Link to Menu. Tunggu beberapa menit untuk melakukan
proses penyimpanan.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 8 dari 16

Setelah selesai, klik ikon save sehingga hasil pekerjaan pembaca bisa tersimpan di
database.

Gambar 5.13. Halaman item profil yang sudah jadi ( Web-Joomla )

Ulangi kembali langkah ini untuk membuat menu dan isi situs dari SDM, Kesiswaan
(OSIS), Program Strategis, Prestasi, Fasilitas, Program Unggulan, Kurikulum.

Gambar 5.14. Profil Sekolah yang sudah jadi ( Web-Joomla )

Coba cek hasilnya http://localhost/sekolah. Hasilnya akan terlihat seperti gambar di

bawah ini.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 9 dari 16

Gambar 5.15. Halaman menu utama Situs sekolah ( Web-Joomla )

4. Menu Dinamis

Pengertian menu dinamis adalah menu yang berisikan tentang informasi, berita atau data
yang selalu berubah-ubah. Dalam hal ini, menunya tetap tidak mengalami perubahan
tetapi isi halamannya berubah-ubah. Untuk kasus situs ini yaitu berita (News), berita
sekilas (Newsflashes) dan sebagainya. Saat menginstall Joomla bersama contoh isi situs,
Joomla membuatkan dua section bernama News dan Newsflashes. Silakan masuk ke
halaman depan (frontpage) pilih ikon Section Manager .

Gambar 5.16. Ikon Section Manager di halaman forntpage ( Web-Joomla )

Atau klik di menu, lalu pilih Section Manager.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 10 dari 16

Gambar 5.17. Menu Section Manager ( Web-Joomla )

Akan muncul halaman section manager yang berisi dua section yaitu news dan
newsflashes.

Gambar 5.18. Halaman section News dan Newsflashes ( Web-Joomla )

Kedua section ini bisa dimanfaatkan sebagai menu dinamis.

5. News

Setiap satu section memiliki satu category. Untuk section News kategorinya adalah
Latest News. Kategori Latest News sudah ada secara default. Jadi tinggal digunakan
saja. Untuk melihat kategori, klik menu pilih category manager .

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 11 dari 16

Gambar 5.19. Akses men Category Manager ( Web-Joomla )

Akan muncul halaman Category Manager

Gambar 5. 20. Halaman Category Manager ( Web-Joomla )

Sekarang klik Menu Content >> Content by Section >> News >> News Item.

Gambar 5.21. Menu news item ( Web-Joomla )

Terlihat halaman Content Item Manager (section news).

Gambar 5.22. Halaman Content Item Manager ( Web-Joomla )

Klik ikon New di kanan atas, untuk membuat berita baru. Sekarang terlihat halaman
Conten Item:New.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 12 dari 16

Gambar 5.23. Halaman New Content Item ( Web-Joomla )

Di halaman ini bisa langsung diisi dengan berita yang diinginkan.

Sebagai contoh penulis akan mengisinya dengan berita tentang “KBK tidak jadi
diberlakukan”. Silakan buka file contoh “KBK tidak jadi.doc” di CD. Di kotak isian
Title ketik “KBK tidak jadi “ di kotak pilihan category pastikan pilihannya adalah
“Latest News”.

Gambar 5.24. Pengisian Detail title news ( Web-Joomla )

Gambar 5.25. Pengisian pemilihan category section News ( Web-Joomla )

Berikutnya adalah mengisi ringkasan berita (intro text). Ketik atau copy dari file “KBK
tidak jadi.doc” pada bagian ringkasan berita (intro text).

Gambar 5.26. Detail halaman intro text ( Web-Joomla )

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 13 dari 16

Selanjutnya mengisi bagian isi berita (Main Text).

Gambar 5.27. Detail Main text ( Web-Joomla )

Sekarang memastikan apakah berita ini akan menjadi halaman depan atau tidak. Penulis
menjadikan berita ini sebagai berita depan (frontpage). Untuk itu klik tab publishing
agar aktif, di kotak centang klik pilihan Show On Frontpage.

Gambar 5.28. Tab Show on Frontpage ( Web-Joomla )

Berikutnya klik ikon save yang ada di pojok kanan atas.

Sekarang perhatikan item “KBK tidak jadi” sudah muncul.

Gambar 5.29. Item news KBK sudah jadi ( Web-Joomla )

Lakukan hal yang sama untuk berita yang lain.

6. Bikin Menu Berita

Berikutnya adalah mengaktifkan menu untuk berhubungan dengan berita yang

dimuat. Klik di menu atas pilih Menu klik Othermenu.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 14 dari 16

Gambar 5.30. Akses Othermenu dari menu bar ( Web-Joomla )

Muncul halaman Menu Manager [ othermenu ].

Gambar 5.31. Halaman Menu Manager Othermenu ( Web-Joomla )

Perhatikan ada beberapa item bawaan dari Joomla yang masih aktif yaitu Joomla! Home,
Joomla! Forums, dan OSM Home namun tidak dibutuhkan. Item ini harus dihapus Yang
tersisa hanya item administrator.

Gambar 5.32. Menghapus menu ( Web-Joomla )

Klik di kotak centang (checklist) lalu klik ikon Trash dipojok kanan atas. Otomatis
semua item terhapus.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 15 dari 16

Gambar 5.33. Informasi penghapusan berhasil ( Web-Joomla )

Sekarang membuatkan menu untuk Halaman Berita. Klik ikon New di pojok kanan
atas. Muncul halaman New Menu Item.

Gambar 5.34. Halaman pembuatan menu baru ( Web-Joomla )

Perhatikan banyak sekali kotak pilihan. Pilihan menu berita ada di kotak Content di
item Table - Content Category klik di tombol radionya.

Gambar 5.35. Pilihan menu Table – Content Category ( Web-Joomla )

Gambar 5.36. Tombol radio yang harus dipilih ( Web-Joomla )

Berikutnya klik tombol Next di pojok kanan atas. Muncul halaman Add Menu Item ::
Table - Content Category , perhatikan baik-baik halaman ini.

Gambar 5.37. Halaman Add Menu Item ( Web-Joomla )

Ada item kotak kategori yang harus diisi. Sekarang perhatikan di kotak Details, di sana
ada banyak kotak isian yang harus diisi. Pertama yaitu kotak isian Name. Ketik “Berita”
di kotak ini sebagai nama dari menu Berita. Berikutnya di kotak pilihan Category. Pilih
Newsflash News / Latest.

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id

E-book Membuat Web Sekolah dengan CMS Joomla 1.0 16 dari 16

Gambar 5.38. Detail menu ( Web-Joomla )

Di pilihan kotak URL, pilih top.

Gambar 5.39. Kotak isian detail URL ( Web-Joomla )

Klik ikon Save di pojok kanan atas untuk mengakhiri pembuatan menu ini. Perhatikan
menu baru sudah dibuat dan aktif. Untuk melihat hasilnya silakan ketik
http://localhost/sekolah di sana terlihat menu baru berita seperti gambar di berikut ini.

Gambar 5.40. Menu berita yang baru ( Web-Joomla )

Buku ini gratis. Bagian dari Gerakan Sedekah Ilmu. http://www.syarifudin.web.id