P. 1
Perancangan Website - Riyanto

Perancangan Website - Riyanto

|Views: 419|Likes:
Published by Mas Ry

More info:

Published by: Mas Ry on Apr 07, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

04/09/2013

pdf

text

original

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 Component>JComments>Manage Comments dapat kita atur melalui menu

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->