Pada tutorial kali ini kita akan membangun website dengan menggunakan CMS Joomla.

Joomla! adalah salah satu content management systems (CMS) paling populer, gratis, dan bersumber terbuka (open-source). Joomla! 4 adalah versi terkini yang dirilis pada Agustus 2021.

Pada tutorial sebelumnya kita telah melakukan Instalasi Server dan Instalasi Joomla! 4. Kali ini kita akan melanjutkan untuk membangun website menggunakan joomla!.

1. Mengganti Logo
2. Membuat Menu
3. Membuat Content (Artikel/Kategori)
4. Membuat Halaman Blog
5. Membuat Halaman Kontak
6. Membuat Galeri Photo
7. Membuat Halaman Home (Search Bar, slideshow, icon, Newsflash)
8. Membuat Halaman Footer

Mengganti Logo Cassiopeia

Logo defautl joomla! 4 sebelum diganti

Log in ke halaman Administrator Joomla, masuk sebagai Super User

Klik System – Site Template styles

Klik template Cassiopeia-Default

Klik Advanced

Pilih Select

Pilih Upload

Cari file logo yang ada di komputer kita kemudian klik tombol Open

Setelah terupload kemudian klik atau pilih file-nya kemudian klik tombol Select

Selanjutnya klik tombol Save & Close

Buka halaman Front-end joomla lalu tekan tombol F5 keyboard atau refresh, maka logo jooomla 4 telah berubah.

Membuat Menu

Membuat menu dan sub-menu

1. Klik Menus
2. Klik Main Menu
3. Klik New

Menu Tentang Kami

1. Title * : isi dengan Tentang Kami
2. Klik tombol Select

1. Klik System Links
2. Klik URL

1. Pada kolom Link * isi dengan tanda #
2. Pada kolom Menu * pilih Main Menu

Menu Layanan

1. Pada kolom Title * isi dengan Layanan
2. Pada kolom Menu Item Type * pilih Select – System links – URL kemudian pada kolom Link * isi dengan tanda #
3. Pada kolom Menu * pilih Main Menu
4. Klik tombol Save & Close untuk menyimpan perubahan

Sub-menu Layanan 1

1. Pada kolom Title * isi dengan Layanan 1
2. Pada kolom Menu Item Type * pilih Select – System links – URL kemudian pada kolom Link * isi dengan tanda #
3. Pada kolom Menu * pilih Main Menu
4. Pada kolom Parent Item pilih -Layanan
5. Klik tombol Save & Close untuk menyimpan perubahan

Sub-menu Layanan 2

1. Pada kolom Title * isi dengan Layanan 2
2. Pada kolom Menu Item Type * pilih Select – System links – URL kemudian pada kolom Link * isi dengan tanda #
3. Pada kolom Menu * pilih Main Menu
4. Pada kolom Parent Item pilih -Layanan
5. Klik tombol Save & Close untuk menyimpan perubahan

Sub-menu Layanan 3

1. Pada kolom Title * isi dengan Layanan 3
2. Pada kolom Menu Item Type * pilih Select – System links – URL kemudian pada kolom Link * isi dengan tanda #
3. Pada kolom Menu * pilih Main Menu
4. Pada kolom Parent Item pilih -Layanan
5. Klik tombol Save & Close untuk menyimpan perubahan

Menu Blog

1. Pada kolom Title * isi dengan Blog
2. Pada kolom Menu Item Type * pilih Select – System links – URL kemudian pada kolom Link * isi dengan tanda #
3. Pada kolom Menu * pilih Main Menu
4. Pada kolom Parent Item pilih -no parent
5. Klik tombol Save & Close untuk menyimpan perubahan

Menu Gallery

1. Pada kolom Title * isi dengan Gallery
2. Pada kolom Menu Item Type * pilih Select – System links – URL kemudian pada kolom Link * isi dengan tanda #
3. Pada kolom Menu * pilih Main Menu
4. Pada kolom Parent Item pilih -no parent
5. Klik tombol Save & Close untuk menyimpan perubahan

Menu Kontak

1. Pada kolom Title * isi dengan Kontak
2. Pada kolom Menu Item Type * pilih Select – System links – URL kemudian pada kolom Link * isi dengan tanda #
3. Pada kolom Menu * pilih Main Menu
4. Pada kolom Parent Item pilih -no parent
5. Klik tombol Save & Close untuk menyimpan perubahan

Hasilnya seperti terlihat pada gambar berikut ini

Kemudian kita lihat dihalaman depan atau Frontpage Joomla, hasilnya seperti terlihat pada gambar berikut ini

Dari hasil tampilan diatas, Menu dan Sub-menu berada di posisi sebelah kanan Sidebar right dan terlihat kurang menarik. Untuk itu mari kita ubah agar Main Menu berada di bagian atas Top pada halaman website kita.

Klik menu Content kemudian klik Site Modules

Klik pada Main Menu

1. Pada kolom Position klik sidebar-right
2. Scroll kebawah kemudian pilih Menu [menu]
3. Klik tombol Save untuk menyimpan perubahan

Masih di Modul Menu, Klik Advanced

1. Pada kolom Layout klik Default lalu
2. Scroll kebawah kemudian pilih Collapsible Dropdown
3. Klik tombol Save & Close untuk menyimpan perubahan

Hasilnya bisa dilihat di halaman depan website, Main Menu sudah berada di posisi Atas

Membuat Content (Artikel/Kategori)

Joomla memudahkan penggunanya untuk mengatur setiap konten yang ada di dalam website. Didalam konten ada artikel dan kategori.

Di Joomla, sebuah Artikel adalah beberapa informasi tertulis yang ingin kita tampilkan di situs. Biasanya, ia mengandung teks dan dapat juga berisikan gambar-gambar maupun jenis-jenis konten lainnya. Umumnya di situs Joomla, artikel-artikel itulah yang membentuk informasi terbesar yang tampil di situs web.

Sedangkan kategori adalah suatu tempat atau metode yang bersifat opsional yang berguna untuk menyusun atau mengelompokan artikel. Satu Kategori mengandung banyak artikel dan Kategori-Kategori lainnya. Satu Artikel bisa saja hanya berada di dalam satu Kategori. Jika suatu kategori berada di bawah kategori yang lainnya, maka ia disebut Subkategori.

Kategori sangat membantu dalam pengelolaan artikel, Contohnya, kita dapat menyaring artikel-artikel berdasarkan Kategori. Jadi, apabila kita memiliki lebih dari 200 artikel di situs, maka kita dapat dengan mudah menemukan sebuah Artikel karena kita tahu Kategorinya.

Ok, sekarang kita akan membuat 2 kategori yang akan kita gunakan untuk mengelompokan artekel-artikel. Kategori yang pertama kita namakan Joomla site yaitu kategori yang nantinya berisi artikel-artikel yang sifatnya umum dan kategori yang kedua kita namakan Blog yang berisi artikel-artikel untuk posting blog.

Klik Categories – New

Pada kolom Titel* ketikkan Joomla Site kemudian klik tombol Save & Close

Pada kolom Titel* ketikkan Blog kemudian klik tombol Save & Close

Kategori Joomla Site dan Blog berhasil dibuat

Selanjutnya kita buat artikel-artikel yang nantinya akan kita tampilkan di halaman website. Kita buat terlebih dahulu artikel pada kategori Joomla site yaitu untuk menu Home, Tentang kami dan Layanan.

Artikel untuk menu Home
Klik Articles lalu klik tombol New

1. Title * : isi dengan Home
2. Klik tombol ‘…’ untuk expand menu text editor
3. Category * : Pilih Joomla Site
4. Article Text : isi artikel home
5. Klik tombol Save & Close untuk menyimpan perubahan

Menghubungkan artikel home ke menu Home

1. Klik Menus
2. Klik Main Menu
3. Klik Home

Klik tombol Select

Klik Articles lalu pilih Single Article

Pilih Select

Pilih Home

Klik tombol Save & Close

Hasilnya bisa kita lihat di halaman depan (Front page) Joomla, namun agar terlihat lebih menarik kita akan menghilangkan beberapa bagaian yang terlihat kurang menarik yaitu pada bagian Details Home, Login Form dan pada bagian Navigasi

Masih di menu edit Home klik pada bagian Options

Lakukan seting atau perubahan seperti berikut ini :

1. Title : Hide
2. Category : Hide
3. Author : Hide
4. Publish Date : Hide
5. Navigation : Hide
6. Hits : Hide

Lakukan juga pada bagian Page Display

1. Klik pada Page Display
2. Show Page Heading : Hide
3. Klik tombol Save & Close untuk menyimpan perubahan

Selanjutnya kita sembunyikan modul Login Form

1. Klik menu Content
2. Klik menu Site Modules

Lakukan Uncheck pada :

1. Breadcrumbs
2. Login Form

Dan hasilnya tampak seperti berikut ini :

Artikel untuk menu Tentang Kami

1. Title * : isi dengan Tentang Kami
2. Category * : Pilih Joomla Site
3. Article Text : isi artikel tentang kami
4. Klik tombol Save & Close

Menghubungkan artikel Tentang Kami ke menu Tentang Kami

1. Klik Menus
2. Klik Main Menu
3. Klik Tentang Kami

Klik tombol Select

Klik Articles lalu pilih Single Article

Pilih Select

Pilih Tentang Kami

Klik tombol Save & Close

Masih di menu edit Tentang Kami klik Options

Lakukan seting atau perubahan seperti berikut ini :

1. Title : Hide
2. Category : Hide
3. Author : Hide
4. Publish Date : Hide
5. Navigation : Hide
6. Hits : Hide

Lakukan juga pada bagian Page Display

1. Klik pada Page Display
2. Show Page Heading : Hide
3. Klik tombol Save & Close untuk menyimpan perubahan

Dan hasilnya tampak seperti berikut ini :

Artikel untuk Sub-menu Layanan 1

1. Title * : isi dengan Layanan 1
2. Category * : Pilih Joomla Site
3. Article Text : isi artikel Layanan 1
4. Klik tombol Save & Close

Menghubungkan artikel Layanan 1 ke Sub-menu Layanan 1

1. Klik Menus
2. Klik Main Menu
3. Klik Layanan 1
4. Klik Select
5. Klik Articles
6. Klik Single Article
7. Klik tombol Select pada Select an Article
8. Pilih Layanan 1
9. Klik pada bagaian Options Lakukan seting atau perubahan seperti berikut ini :
• Title : Hide
• Category : Hide
• Author : Hide
• Publish Date : Hide
• Navigation : Hide
• Hits : Hide
10. Klik pada bagaian Page Display, ubah pada :
• Show Page Heading : Hide
11. Klik tombol Save & Close untuk menyimpan perubahan

Artikel untuk Sub-menu Layanan 2

1. Title * : isi dengan Layanan 2
2. Category * : Pilih Joomla Site
3. Article Text : isi artikel Layanan 2
4. Klik tombol Save & Close

Menghubungkan artikel Layanan 2 ke Sub-menu Layanan 2

1. Klik Menus
2. Klik Main Menu
3. Klik Layanan 2
4. Klik Select
5. Klik Articles
6. Klik Single Article
7. Klik tombol Select pada Select an Article
8. Pilih Layanan 2
9. Klik pada bagaian Options Lakukan seting atau perubahan seperti berikut ini :
• Title : Hide
• Category : Hide
• Author : Hide
• Publish Date : Hide
• Navigation : Hide
• Hits : Hide
10. Klik pada bagaian Page Display, ubah pada :
• Show Page Heading : Hide
11. Klik tombol Save & Close untuk menyimpan perubahan

Artikel untuk Sub-menu Layanan 3

1. Title * : isi dengan Layanan 3
2. Category * : Pilih Joomla Site
3. Article Text : isi artikel Layanan 3
4. Klik tombol Save & Close

Menghubungkan artikel Layanan 3 ke Sub-menu Layanan 3

1. Klik Menus
2. Klik Main Menu
3. Klik Layanan 3
4. Klik Select
5. Klik Articles
6. Klik Single Article
7. Klik tombol Select pada Select an Article
8. Pilih Layanan 3
9. Klik pada bagaian Options Lakukan seting atau perubahan seperti berikut ini :
• Title : Hide
• Category : Hide
• Author : Hide
• Publish Date : Hide
• Navigation : Hide
• Hits : Hide
10. Klik pada bagaian Page Display, ubah pada :
• Show Page Heading : Hide
11. Klik tombol Save & Close untuk menyimpan perubahan

Membuat Halaman Blog

Membuat Halaman Kontak

Membuat Galeri Photo

Membuat Halaman Home (Search Bar, slideshow, icon, Newsflash)

Membuat Halaman Footer