1

PERANCANGAN WEBSITE UNTUK E-COMMERCE

MENGGUNAKAN CMS JOOMLA!

CMS Joomla! (Joomla!) merupakan sebuah Content Management System yang FREE
dibawah lisensi GNU/GPL.

Pada kesempatan kali ini akan penulis gambarkan cara-cara melakukan perancangan
website untuk e-commerce penjualan komputer.

A. Tahap Persiapan.

Adapun beberapa perlengkapan yang perlu dipersiapkan sebelum melakukan

perancangan website menggunakan Joomla adalah:

1. Satu unit komputer/laptop.

2. Aplikasi Joomla! Beserta modul atau component tambahan lainnya.
3. Emulator web server Apache + MySQL Database (XAMPP, PHPTriad atau AppServ), pada
kasus ini penulis menggunakan XAMPP.

B. Tahap Pengerjaan.

Disini penulis tidak akan menjabarkan bagaimana cara melakukan instalasi aplikasi
Emulator web server maupun Joomla. Namun pada tulisan ini penulis asumsikan bahwa
aplikasi-aplikasi tersebut telah terinstal pada komputer, sehingga yang perlu dilakukan
hanyalah melakukan perancangan website.

Langkah-langkah perancangan website untuk e-commerce penjualan komputer

adalah sebagai berikut:

1. Lakukan desain dan konsep tentang website yang akan kita bangun.
Pada kasus ini, sebuah website akan terdapat beberapa menu diantaranya: Menu
bukutamu, statistik pengunjung, komentar artikel, galeri, form pemesanan, konfirmasi,
transaksi, iklan, jam (analog/digital), kalender, chatting, dll.

2. Membuat Section baru

Karena pada saat Joomla terinstal pada komputer, maka secara otomatis semua konten
baik itu section, kategori, artikel dan sebagainya yang sudah terinstal dan ini tidak kita
butuhkan atau tidak sesuai dengan yang kita inginkan, maka hal yang harus kita lakukan
adalah menghapus semua konten tersebut dan menggantinya dengan yang baru yang
sesuai dengan kebutuhan kita.

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 2

Pada kasus ini semua file disimpan di C:\xampp\htdocs\penjualankomputer, sehingga

buka web browser lalu ketikkan: http://localhost/penjualankomputer/administrator
untuk melakukan manipulasi dan perancangan website. Masukkan username dan
password anda ketika melakukan instalasi Joomla.

Gambar 1. Menambahkan section baru

a. Pilih menu Content>Section manager

b. Tambahkan section baru dengan cara klik New pada menu section manager
c. Tambahkan section baru untuk: Informasi, Layanan dan Produk

Gambar 2. Daftar section yang sudah dibuat

3. Membuat Kategori Baru

a. Pilih menu Content>Category Manager
b. Tambahkan kategori-kategori berikut:
a. Section Produk, kategori-kategorinya: Notebook, Netbook, Komputer PC
b. Section Layanan, kategorinya: Pemesanan, Komplain
c. Section Informasi, kategorinya: Perusahaan, Relasi, Berita

Gambar 3. Menambahkan kategori baru

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 3

Gambar 4. Daftar kategori yang sudah dibuat

4. Instal Komponen
Komponen adalah sebuah tool tambahan yang digunakan untuk mendukung Joomla
dalam memenuhi perancangan website. Beberapa komponen yang diperlukan dalam
perancangan website ini antara lain: Bukutamu (Phocaguestbook), Form Pemesanan
(JForms), Galeri (Handy Photo Album) dan banyak lagi lainnya.
1. Instal Handy Photo Album (hpalbum)
a) Klik menu Extensions
b) Klik Install/Uninstall

Gambar 5. Menginstal komponen baru

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 4

c) Cari dimana komponen hpalbum disimpan

Gambar 6. Mencari komponen hpalbum untuk menu galeri

d) Setelah komponen hpalbum terinstal, maka kita dapat melakukan konfigurasi

dengan cara:
a) Klik Component>Handy Photo Album
b) Klik Upload Images untuk melakukan upload image/photo yang akan
dijadikan konten pada galeri

Gambar 7. Upload Image/photo

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 5

2. Instal Phocaguestbook
Lakukan hal yang hampir sama dengan cara diatas. Setelah komponen
phocaguestbook terinstal, maka lakukan hal seperti ini:
a) Buat sebuah bukutamu baru dari menu Component>Phocaguestbook
b) Klik menu Guestbook
c) Pilih New, lalu Isikan Title dan Alias masing-masing Bukutamu dan bukutamu
kemudian klik Save

Gambar 8. Menambahkan Bukutamu

3. Instal JForm
JForm adalah komponen yang memungkinkan user untuk membuat sebuah form.
Dalam kasus ini akan dibuat sebuah form pemesanan. Masih hampir sama dengan
cara yang diatas, setelah JForms terinstal maka lakukan hal seperti berikut:
a) Buat sebuah rancangan form dengan tampilan sebagai berikut
b) Buat sebuah artikel baru, simpan dengan nama Thank You sebagai redirecting
ketika tombol Submit disimpan
c) Simpan form rancangan ini dengan nama Formulir Pemesanan

Gambar 9. Mendesain formulir pemesanan

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 6

Gambar 10. Mendesain formulir konfirmasi

4. Membuat Menu Polls

Dalam menu ini disediakan beberapa jawaban dari pertanyaan yang telah disediakan.
Berguna sebagai masukan bagi admin atau pengurus website untuk dapat
meningkatkan pelayanannya maupun tampilan dan konten dari website yang
disajikan.
Untuk membuat menu polls ini, langkah-langkahnya adalah sebagai berikut:
a) Klik menu Component
b) Klik Polls
c) Klik New, lalu isikan Title dan Alias masing-masing: Bagaimana dengan layanan
yang kami berikan? Dan bagaimalayanan
d) Kemudian untuk jawaban tiap-tiap option: Sangat baik, baik, cukup baik, dan
kurang baik.

Gambar 11. Menambahkan menu polls

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 7

e) Atur menu polls dengan konfigurasi sebagai berikut

Gambar 12. Mengatur menu polls

Gambar 13. Mengatur parameter menu polls

5. Instal Vinaora Counter Visitor

Dengan menambahkan komponen ini pada sebuah website, diharapkan admin
ataupun pengunjung situs dapat melihat seberapa banyak situs ini telah dikunjungi,
yang berarti bila semakin banyak hasilnya maka semakin tinggi pula kebutuhan
pengunjung tentang layanan yang ditawarkan.
Untuk memasang komponen ini, lakukan cara-cara sebagai berikut:
a) Klik Extensions
b) Install/Uninstall
c) Cari dimana letak komponen ini disimpan dalam hard disk
d) Setelah terinstal, maka pastikan komponen ini telah di-enable-kan pada plugins
(Extensions>Plugin Manager)
e) Kemudian dari menu Component, atur agar memiliki konfigurasi sebagai berikut:

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 8

Gambar 14. Tampilan konfigurasi Vinaora Counter Visitor

6. Menambahkan Jam dengan komponen Online Indicator

Untuk menambahkan jam kedalam website, salah satu caranya adalah dengan
memanfaatkan komponen Online Indicator. Adapun langkah-langkah
penginstalannya sama dengan menginstal komponen yang lain, hanya saja pada saat
konfigurasinya saja yang sedikit berbeda.
Untuk konfigurasinya dapat digunakan cara sebagai berikut:
a) Klik Extensions
b) Klik Module Manager
c) Pilih mod_online_indicator, lalu atur seperti pada gambar:

Gambar 15. Konfigurasi Online Indicator

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 9

7. Menginstal JComments
JComments adalah sebuah komponen yang digunakan untuk menambahkan
komentar pada setiap artikel. Adapun tahap instalasinya adalah sbb:

Gambar 16. Instalasi JComments

Setelah proses instalasi selesai, maka dapat kita atur melalui menu
Component>JComments>Manage Comments

Gambar 17. Halaman setting JComments

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 10

8. Menambah Artikel
Artikel adalah konten yang dapat dilihat oleh pengunjung website, baik itu berupa
tulisan, gambar maupun perpaduan diantara keduanya. Dalam kasus ini yang
digolongkan kedalam artikel meliputi: Produk yang ditampilkan pada halaman utama
(Main Menu) maupun yang ditampilkan pada halaman berita.

Untuk menambahkan artikel baru, ikuti langkah-langkah berikut:

a) Klik Menu Content
b) Article Manager
c) Pilih New kemudian isikan Title, Alias, dan tentukan Section juga Category.
Jangan lupa untuk memilik Published (Yes) atau Front page (Yes) apabila artikel
ingin ditampilkan pada halaman utama website.

Gambar 18. Membuat artikel baru

d) Jangan lupa untuk menambahkan JComment dalam mode On, juga Readmore
dibagian path.
e) Akhiri dengan menekan tombol Save.

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 11

5. Memanipulasi Menu
Atur agar menu yang tersisa ada tiga buah menu, yaitu: Main Menu, User Menu dan Top
Menu. Untuk melihatnya, klik Menus>Menu Manager.

Gambar 19. Tampilan daftar menu dalam Menu Manager

a. Main Menu
Main menu adalah menu utama yang mencakup hampir semua halaman diberikan
link dalam menu ini. Dalam perancangannya nanti, dalam Main Menu terdiri dari:
Beranda, Bukutamu, Galeri Produk, Pemesanan dan Tentang Kami.
Untuk menambahkan menu pada Main Menu:
a) Klik Menus>Main Menu
b) Pilih New, lalu isikan Title dan Alias
c) Untuk menu yang menuju Link pada sebuah komponen, maka pilih komponen
yang dimaksud pada Menu Item. Atau jika yang dituju adalah sebuah artikel,
maka pilih Articles>Front Page Blog Layout

Gambar 20. Membuat menu yang menuju link komponen

b. Top Menu
Adalah menu yang berada dibagian atas atau tepatnya dibawah header dari halaman
website. Menu ini terdiri dari: Beranda, Berita, Pengguna dan Tentang Kami. Untuk
menambahkan menu pada Top Menu hampir sama dengan cara untuk
menambahkan menu pada Main Menu.
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 12

Khusus untuk menu Beranda pada Top Menu adalah nama alias, dimana menu ini
juga ada pada Main Menu sehingga biarpun letaknya berbeda (pada Main Menu dan
Top Menu) tetapi tetap menuju pada link yang sama.

c. User Menu
Yaitu menu-menu yang hanya dapat diakses oleh user yang sudah melakukan login.
Apabila user belum melakukan login, maka menu ini tidak akan ditampilkan, dan
begitu pula sebaliknya apabila user telah login maka menu ini akan langsung
ditampilkan.

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
 13

Biografi Penulis

Lahir dari keluarga kalangan sederhana, pada tanggal 8 Mei 1989 dan
diberi nama Riyanto. Anak kedua dari tiga bersaudara ini menamatkan
pendidikan Sekolah Dasar di SDN 040 Lubuk Dalam (Kab. Siak) selama 6
tahun kemudian melanjutkan ke SMPN 2 Siak (Kab. Siak) selama 3 tahun
lalu SMKN 1 Pangkalan Kerinci (Kab. Pelalawan) selama 3 tahun dengan
bidang studi yang diambil adalah Teknik Informatika program studi
Teknik Komputer dan Jaringan.

Saat ini penulis sedang “berguru” pada sebuah Sekolah Tinggi di

Pekanbaru, STMIK-AMIK Riau dengan bidang studi yang sama, Teknik Informatika dan saat ini
sedang pada akhir semester V. Cita-cita mulia saat di STMIK-AMIK Riau, segera wisuda dan
mendapatkan gelar Mahasiswa Terbaik. Amien… ^^

Perancangan Website E-Commerce menggunakan CMS Joomla 2.5

Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau