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

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

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

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

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

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 )

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

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

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

Gambar 5.2. Halaman Frontpage ( Web-Joomla )

Klik ikon static content manager.

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

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

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.

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

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

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.

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

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

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 Joomlamenyediakan 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

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

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

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.

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

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

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.

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

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

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.

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

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

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 .

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

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

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.

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

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

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 )

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

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

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 publishingagar 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.

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

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

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.

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

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

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.

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

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

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 )