Perancangan Website - Riyanto

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.


2/13

2


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


3/13

3


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


4/13

4


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


5/13

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


6/13

6


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/13

7


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:


8/13

8


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


9/13

9


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


10/13

10


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.


11/13

11


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.


12/13

12


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.


13/13

13


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 ^

Perancangan Website - Riyanto

Documents

Transcript of Perancangan Website - Riyanto