Transcript
7/23/2019 Perancangan Website - Riyanto
1/13
1
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
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 dilakukanhanyalah 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 baruKarena pada saat Joomla terinstal pada komputer, maka secara otomatis semua kontenbaik 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.
7/23/2019 Perancangan Website - Riyanto
2/13
2
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
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 managerb. Tambahkan section baru dengan cara klik New pada menu section managerc. Tambahkan section baru untuk: Informasi, Layanan dan Produk
Gambar 2. Daftar section yang sudah dibuat
3. Membuat Kategori Barua. Pilih menu Content>Category Managerb. Tambahkan kategori-kategori berikut:
a. Section Produk, kategori-kategorinya: Notebook, Netbook, Komputer PCb. Section Layanan, kategorinya: Pemesanan, Komplainc. Section Informasi, kategorinya: Perusahaan, Relasi, Berita
Gambar 3. Menambahkan kategori baru
7/23/2019 Perancangan Website - Riyanto
3/13
3
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
Gambar 4. Daftar kategori yang sudah dibuat
4. Instal KomponenKomponen 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 Extensionsb) Klik Install/Uninstall
Gambar 5. Menginstal komponen baru
7/23/2019 Perancangan Website - Riyanto
4/13
4
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
c) Cari dimana komponen hpalbum disimpan
Gambar 6. Mencari komponen hpalbum untuk menu galeri
d) Setelah komponen hpalbum terinstal, maka kita dapat melakukan konfigurasidengan cara:
a) Klik Component>Handy Photo Albumb) Klik Upload Images untuk melakukan upload image/photo yang akan
dijadikan konten pada galeri
Gambar 7. Upload Image/photo
7/23/2019 Perancangan Website - Riyanto
5/13
5
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
2. Instal PhocaguestbookLakukan hal yang hampir sama dengan cara diatas. Setelah komponen
phocaguestbook terinstal, maka lakukan hal seperti ini:
a) Buat sebuah bukutamu baru dari menu Component>Phocaguestbookb)
Klik menu Guestbook
c) Pilih New, lalu Isikan Title dan Alias masing-masing Bukutamu dan bukutamukemudian klik Save
Gambar 8. Menambahkan Bukutamu
3. Instal JFormJForm 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 berikutb) 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
7/23/2019 Perancangan Website - Riyanto
6/13
6
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
Gambar 10. Mendesain formulir konfirmasi
4. Membuat Menu PollsDalam 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 Componentb) Klik Pollsc) 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, dankurang baik.
Gambar 11. Menambahkan menu polls
7/23/2019 Perancangan Website - Riyanto
7/13
7
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
e) Atur menu polls dengan konfigurasi sebagai berikut
Gambar 12. Mengatur menu polls
Gambar 13. Mengatur parameter menu polls
5. Instal Vinaora Counter VisitorDengan 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 Extensionsb) Install/Uninstallc) Cari dimana letak komponen ini disimpan dalam hard diskd) 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:
7/23/2019 Perancangan Website - Riyanto
8/13
8
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
Gambar 14. Tampilan konfigurasi Vinaora Counter Visitor
6. Menambahkan Jam dengan komponen Online IndicatorUntuk 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 Extensionsb) Klik Module Managerc) Pilih mod_online_indicator, lalu atur seperti pada gambar:
Gambar 15. Konfigurasi Online Indicator
7/23/2019 Perancangan Website - Riyanto
9/13
9
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
7. Menginstal JCommentsJComments 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
7/23/2019 Perancangan Website - Riyanto
10/13
10
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
8. Menambah ArtikelArtikel 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 Contentb) Article Managerc) 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 Readmoredibagian path.
e) Akhiri dengan menekan tombol Save.
7/23/2019 Perancangan Website - Riyanto
11/13
11
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
5. Memanipulasi MenuAtur 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 MenuMain 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 Menub) Pilih New, lalu isikan Title dan Aliasc) 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 MenuAdalah 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.
7/23/2019 Perancangan Website - Riyanto
12/13
12
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
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 MenuYaitu 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.
7/23/2019 Perancangan Website - Riyanto
13/13
13
Perancangan Website E-Commerce menggunakan CMS Joomla 2.5
Oleh : Riyanto | 0810031802221
STMIK-AMIK Riau
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 ^
top related