Membangun website dengan CMS joomla di cPanel

Hits: 306

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