22

BAB III

PERANCANGAN DAN PEMBUATAN SISTEM

Pada bab ini akan dibahas mengenai perancangan dan pembuatan perangkat

keras (hardware) dan perangkat lunak (software) dari sistem yang akan dibuat.

Dimana konsep dasar dari perencanaan tugas akhir ini adalah memberi informasi

produk dan dapat memperluas pemasaran dan pengembangan usaha toko

“PTMW” Group kepada masyarakat tidak hanya di dalam kota tapi bisa

menjangkau sampai ke luar kota.

A. Hardware dan Software

1. Perangkat Keras (Hardware)

Peralatan yang digunakan dalam pembuatan sistem penjualan

berbasis web ini berupa perangkat keras (hardware) yang mempunyai

spesifikasi sebagai berikut :

a. Laptop Dell Inspiron 5420

b. Operating System Windows 7 Ultimate 64-bit

c. Processor Intel(R) Core(TM) i3-2370M CPU @ 2.40GHz

d. Memory RAM (4 GB)

e. Harddisk (500 GB)

2. Perangkat Lunak (Software)

Peralatan yang digunakan pada pembuatan sistem penjualan

berbasis web ini berupa perangkat lunak (Software) yang terdiri dari :

23

a. XAMPP for Windows

b. Joomla! versi 2.5.7

c. Virtuemart

d. FileZilla

e. Adobe Dreamweaver CS 6

f. Adobe Photoshop CS 4

g. Corel Draw X5

h. Hostinger (IdHostinger)

B. Perancangan Sistem

Agar dapat memudahkan dalam perancangan sistem informasi

penjualan berbasis web ini, maka terlebih dahulu menggunakan server lokal

(localhost) sebelum di upload ke web hosting atau migrasi website ke

hosting. Sehingga mempermudah pembuatan sistem informasi penjualan

berbasis web ini, karena dapat dilakukan di manapun dan kapanpun tanpa

harus terhubung oleh jaringan internet. Dalam perancangan sistem penjualan

berbasis web ini melalui server lokal (localhost) yang melalui beberapa tahap

sebagai berikut:

1. Instalasi XAMPP for Windows

Persiapan yang pertama dilakukan adalah instalasi web server.

Web server dapat merujuk baik pada perangkat keras (hardware) maupun

perangkat lunak (software) yang menyediakan layanan akses pada

pengguna melalui protokol komunikasi HTTP/HTTPS atas berkas-berkas

24

yang terdapat pada suatu website. Aplikasi sebagai penyedia layanan web

server dalam pembuatan sistem penjualan berbasis web ini adalah

XAMPP. Dengan menginstal XAMPP kita lebih mudah membuat web

server sendiri, karena di dalamnya sudah dapat menghandle semua fungsi

dan komponen yang dibutuhkan untuk menjalankan website secar offline.

Untuk mendapatkan paket Instalasi XAMPP, kita dapat mendownloadnya

di alamat www.apachefriends.org

Berikut ini adalah cara menginstall XAMPP :

a. Jalankan File xampp-win32-1.8.1-VC9-installer (atau versi lainnya)

b. Proses instalasi akan dimulai. Klik Next untuk melanjutkan instalasi

Gambar 3.1 Tampilan Awal Instalasi XAMPP

c. Akan muncul pemilihan komponen yang akan diinstall. Di sini kita

disuruh memilih komponen apa saja yang ingin kita install. Penulis

25

memilih semua komponen untuk di install. Setelah memilih langsung

klik Next saja.

Gambar 3.2 Tampilan Memilih Komponen

d. Selanjutnya silakan Anda pilih lokasi install untuk XAMPP. Kemudian

klik Install

Gambar 3.3 Tampilan Lokasi Instalasi XAMPP

26

e. Tunggu beberapa saat sampai proses instalasi selesai

Gambar 3.4 Tampilan Proses Instalasi

f. Instalasi selesai. Kemudian klik Finish

Gambar 3.5 Tampilan Instalasi Sudah Selesai

27

g. Selanjutnya muncul kotak dialog xampp control panel untuk

menjalankan servisnya. Kemudian klik Yes

Gambar 3.6 Tampilan Start XAMPP Control Panel

h. Selanjutnya beri tanda centang pada Apache, MySQL, FileZilla.

Kemudian aftifkan Apache, MySQL, dan FileZilla dengan mengklik

tombol Start pada Apache, MySQL, FileZilla sampai status menjadi

Running.

Gambar 3.7 Tampilan XAMPP Control Panel

28

i. Buka web browser Anda, lalu ketikkan http://localhost/. Jika

tampilannya seperti di bawah ini maka Apache, MySQL, dan FileZilla

sudah terinstall dengan baik dan benar

Gambar 3.8 Tampilan Localhost

j. Sekedar informasi saja, document root milik XAMPP terletak pada

folder C:\xampp\htdocs. Hal ini disebabkan karena saya menginstall

XAMPP pada folder C:\xampp.

2. Instalasi Database (Basis Data)

Di sini penulis akan mengunakan management system database

MySQL untuk membuat sistem penjualan berbasis web pada toko

PTMW” Group.

Langkah-langkah untuk membuat database MySQL :

a. Ketik ke browser http://localhost/phpmyadmin kita akan dibawa

sebuah halaman management system database berupa phpMyAdmin

yang mengelola database MySQL

29

Gambar 3.9 Tampilan Awal phpMyAdmin

b. Kemudian klik “Basis data” lalu untuk membuat database kita

ketikkan pada “Buat basis data” misal kita mengetikkan (db_miftah)

Gambar 3.10 Tampilan Basis Data

c. Kemudian klik “Home” lalu klik “db_miftah” lalu pilih menu “Hak

Akses” kemudian klik “Tambahkan Pengguna” untuk mengelola

penggunaan database yang dapat dilakukan oleh user. User

management (pengelolaan pengguna) ini sangat penting karena akan

30

digunakan ketika menginstall CMS bernama Joomla! yang akan

dibahas pada pembahasan Instalasi Joomla!

Gambar 3.11.1 Tampilan Hak Akses

Gambar 3.11.2 Tampilan Tambahkan Pengguna

Penjelasan data field “Informasi Masuk” sebagai berikut :

1) Nama pengguna : miftah (sesuai yang di inginkan)

2) Inang : pilih “Lokal” maka langsung terisi “localhost”

3) Kata sandi : ***** (bisa dikosongkan atau abaikan)

31

4) Ketik ulang : ***** (bisa dikosongkan atau abaikan

Gambar 3.11.3 Tampilan Tambahkan Pengguna

Penjelasan data field “Basis data utuk pengguna dan Hak akses

global” sebagai berikut :

1) Dalam field “Basis data untuk pengguna” kita pilih bawah sendiri

atau “Berikan semua hak untuk basis data ‘db_miftah‟.

2) Dalam field “Hak akses global” kita klik “Pilih Semua” kemudian kita

klik “Tambahkan pengguna”

3) Proses instalasi database MySQL berhasil/selesai.

3. Instalasi dan Pengaturan Joomla! 2.5.7

Joomla! adalah salah satu CMS (Content Management System)

yang ada pada saat ini. Masih banyak lagi CMS lain yang dapat digunakan

seperti Drupal, Wordpress, Mamboo, dan lain sebagainya. Namun dari

sekian banyak CMS penulis merekomendasikan Joomla! karena memiliki

beberapa keunggulan dibanding dengan CMS lainnya. Keunggulan joomla

adalah:

32

Joomla! bersifat free license atau open source sehingga Anda dapat

langsung mendownloadnya di website resmi Joomla! pada alamat

www.joomla.org.

Karena kemudahan yang ditawarkan Joomla! dalam mengelola

website maupun mengganti tampilan dari website.

Adanya dukungan dari pihak ketiga. Maksud dari pihak ketiga di

sini adalah adanya pihak lain yang menyediakan komponen-

komponen Joomla! baik seperti modul, plugin maupun komponen

lain yang dapat didownload di www.extensions.joomla.org

sehingga saat memudahkan kita dalam mengelola website.

Berikut ini adalah Instalasi dan pengaturan pada Joomla! 2.5.7 :

a. Instalasi Joomla! 2.5.7

Berikut ini adalah cara menginstall Joomla! 2.5.7 :

1) Ekstrak file Joomla! 2.5.7 ke dalam alamat folder C:\xampp\htdocs

dan beri nama sesuai dengan keinginan kita. Di sini penulis

menggunakan nama file miftah sehingga alamat folder yang kita

ekstrak tadi menjadi C:\xampp\htdocs\miftah.

33

Gambar 3.12 Tampilan Ekstrak File Joomla!

2) Langkah selanjutnya anda aktifkan program localhost, kemudian

buka browser dan ketik http://localhost/miftah (penulis membuat

folder dengan nama miftah). Pada browser akan muncul halaman

“Step 1 – Choose Language” dan pada halaman ini Anda bisa

memilih bahasa untuk proses instalasi. Di sini penulis

menggunakan bahasa English (United States) sebagai bahasa

Default, kemudian klik Next untuk melanjutkan.

34

Gambar 3.13 Step 1 – Choose Language

3) Pada halaman selanjutnya, anda akan masuk ke halaman “Step 2 –

Pre-Installation Check” dan pada halaman ini, Anda harus

memastikan kalau fungsi sistemnya benar atau “Yes”, sedangkan

untuk “Recomended Setting” juga harus “Yes” tetapi kalau ada

salah satu yang “No” Anda bisa abaikan. Untuk melanjutkan klik

button Next

Gambar 3.14 Step 2 – Pre-Installation Check

35

4) Pada halaman selanjutnya adalah halaman “Step 3 – License”,

yaitu persetujuan untuk lisensi Joomla dalam penggunaan CMS

Joomla! 2.5 sebagai aplikasi atau web platform yang anda gunakan

untuk website yang anda buat. Selanjutnya klik Next untuk

melanjutkan.

Gambar 3.15 Step 3 – License

5) Setelah klik “Next” pada halaman sebelumnya, selanjutnya Anda

masuk ke halaman “Step 4 – Database Configuration” dan pada

halaman ini terdapat beberapa field yang harus diisi. Pada halaman

ini berisi field data yang harus Anda isi yang berfungsi untuk

menghubungkan website dengan database, field yang perlu Anda

isi. Keunikan dari Joomla 2.5 adalah pada pembuatan database,

anda tidak perlu membuat database pada My Php Admin seperti

pada Joomla 3.0, tetapi anda bisa membuat database secara

langsung atau otomatis melalui halaman ini.

36

Gambar 3.16 Step 4 – Database Configuration

Penjelasan data field yang diisi adalah sebagai berikut :

a) Database Type : Mysql atau Mysqli (pilihan database yang

digunakan)

b) Host Name : localhost (host database)

c) User Name : miftah (user untuk database)

d) Password : kosongkan atau abaikan (password database)

e) Database Name : db_miftah (nama database) sesuai yang

dibuat pada pembahasan instalasi database

f) Table Prefix : abaikan (previx database)

g) Old Database Process : Backup atau Remove (pilihan remove

untuk menghapus database instalasi)

h) Klik “Next” untuk melanjutkan proses instalasi

6) Pada halaman selanjutnya adalah “Step 5 – FTP Configuration”,

pada halaman ini digunakan untuk penggunaan sistem FTP untuk

37

pengaturan folder, anda bisa mengabaikan halaman ini dan klik

“Next” untuk melanjutkan.

Gambar 3.17 Step 5 – FTP Configuration

7) Langkah selanjutnya anda akan masuk ke halaman “Step 6 – Main

Configuration”,

Gambar 3.18 Step 6 – Main Configuration

Pada halaman ini berisi beberapa field yang digunakan

untuk mengisi data profile utama website anda, seperti :

a) Site Name : “PTMW” Group (Judul atau Title Web)

38

b) Meta Description : Toko Online Pertanian (Deskripsi website)

c) Meta Keywords : Pertanian (Kata kunci website)

d) Site Offline : No/Yes (Pilihan No untuk tampilan website

offline setelah proses instalasi)

e) Your Email : miftah13ptmw@yahoo.com (Email pemilik

website)

f) Admin Username : miftah (Username login pemilik website)

g) Admin Password : ***** (Password login pemilik website)

h) Confirm Admin Password : ***** (Konfirmasi password

pemilik website)

i) Sample Data Set : Default English (GB) Sample Data (Pilihan

Blog, Brochure atau Default)

j) Klik “Instal Sample Data” (untuk mengisi website dengan

konten “default)

k) Klik “Next” untuk melanjutkan

8) Setelah klik “Next” aplikasi web Joomla! langsung menginstal

secara otomatis, kemudian anda akan masuk ke halaman “Finish”

yang terdapat tulisan “Congratulations! Joomla! is now

installed.” artinya web CMS Joomla 2.5 berhasil diinstal. Untuk

langkah selanjutnya anda harus menghapus folder “Installation”,

cukup klik button link “Remove installation folder” secara

otomatis folder installation beserta isinya yang berada pada folder

“miftah” akan terhapus.

39

Gambar 3.19 Step 7 – Finish

Setelah anda menghapus folder “installation”, selanjutnya

anda bisa melihat website Joomla versi 2.5.7 yang dengan tampilan

Default pada browser dengan alamat URL http://localhost/miftah

atau anda bisa klik button link “Site”, sedangkan untuk masuk ke

halaman administrator anda bisa masuk melalui browser dengan

alamat URL http://localhost/miftah/administrator atau anda bisa

klik button link “Administrator”. Proses instalasi sudah selesai.

b. Pengaturan Joomla! Pada Halaman Administrator

Setelah Localhost dibuat dan aplikasi Joomla di instal, tahap

selanjutnya adalah setting website joomla untuk web

configurationnya. Untuk mengelola website untuk setting joomla,

anda harus masuk ke halaman administrator dan ada beberapa hal

yang harus ketahui, seperti bagian mana saja yang harus di setting dan

apa saja fungsinya. Settingan ini sangat penting sekali, karena titik

40

awal dari pengelolaan website joomla berada pada settingan

configuration ini.

Gambar 3.20 Halaman Login Administrator Joomla!

1) Control Panel Joomla! 2.5.7 Untuk Administrator

Untuk masuk ke control panel Joomla! 2.5.7, anda harus

terlebih dahulu login pada halaman login administrator Joomla!.

Pada control panel di halaman administrator ini berisi “top menu”

yang berada di kiri atas, “user menu” yang berada di kanan atas,

header dengan logo Joomla!, “quick links” yang berada pada sisi

kiri, “main panel administrator” yang berada pada sisi kanan, dan

“footer menu” yang berada pada bagian bawah

41

Gambar 3.21 Halaman Control Panel Joomla

Top Menu pada halaman administrator berada dibagian kiri

atas dan penjelasannya sebagai berikut :

a) Site : berfungsi untuk pengaturan website

b) Users : berfungsi untuk pengaturan user atau member

c) Menus : berfungsi untuk pengaturan menu

d) Content : berfungsi untuk pengaturan konten, artikel,

kategori

e) Components: berfungsi untuk pengaturan joomla components

f) Extensions : berfungsi untuk pengaturan joomla extensions

g) Help : berfungsi untuk bantuan bagi administrator

User Menu pada halaman administrator berada dibagian

kanan atas dan penjelasannya sebagai berikut :

a) Visitors : pengunjung yang login

b) Admin : admin yang login

c) Message : Private Messages Manager

42

d) View Site : link untuk membuka halaman depan website

e) Log out : link untuk keluar dari halaman administrator

Quick Link atau Link Menu pada halaman administrator

berada dibagian sisi kiri dan penjelasannya sebagai berikut :

a) Add New Article : berfungsi untuk membuat artikel

b) Article Manager : berfungsi untuk pengaturan artikel

c) Category Manager : berfungsi untuk pengaturan kategori artikel

d) Menu Manager : berfungsi untuk pengaturan menu

e) Media Manager : berfungsi untuk pengaturan media pada

website

f) User Manager : berfungsi untuk pengaturan user/member

web

g) Module Manager : berfungsi untuk pengaturan module

website

h) Extension Manager : berfungsi untuk pengaturan joomla

extension

i) Language Manager : berfungsi untuk pengaturan bahasa

j) Global Configuration : berfungsi untuk pengaturan website

secara global

k) Template Manager : berfungsi untuk pengaturan template web

back-end dan front-end

l) Edit Profile : berfungsi untuk pengaturan profile user/member

43

Main Panel Administrator pada halaman administrator

berada dibagian sisi kanan yang berisi update artikel yang sudah

dipublikasikan dan jumlah visitor yang login ke member area

2) Pengaturan Konfigurasi Global Joomla! 2.5.7

Konfigurasi Global berfungsi sebagai pengaturan website

untuk situs, sistem, server, Permissions, dan lain-lain. Untuk masuk

ke halaman konfigurasi global, anda harus terlebih dahulu login

pada halaman administrator Joomla!. Kemudian klik “Site” lalu

klik “Global Configuration”

Gambar 3.22 Halaman Konfigurasi Global

Setelah Anda masuk ke halaman Global Configuration

terdapat beberapa pengaturan yang diatur dalam beberapa tabs,

yaitu Site, System, Server, Permissions dan Text Filter. Setelah

menyelesaikan pengaturan atau setting, Anda tinggal klik button

Save untuk menyimpan, kemudian Cancel untuk kembali ke

halaman sebelumnya atau Anda juga bisa klik button Save & Close

44

untuk menyimpan dan langsung otomatis kembali ke halaman

control panel.

c. Instalasi Template Joomla!

Selanjutnya kita akan melakukan instalasi template Joomla!.

Template Joomla! bisa didapatkan dengan mudah di internet dengan

berbagai versi Joomla!, variasi, dll baik dari yang free (gratis) sampai

yang membayar. Di sini penulis menggunakan template Joomla! yang

free yang di dapatkan dari alamat URL

http://www.tmdhosting.com/templates/free-joomla-templates.html

yaitu “Tmd_them_01”. Langkah-langkah instalasi template Joomla!

sebagai berikut:

1) Untuk melakukan instalasi template Joomla! pertama buka web

browser lalu ketik http://localhost/miftah/administrator untuk login

ke Halaman Administrator Joomla! kemudian isikan data User

Name dan Password (sesuai yang diisikan pada tahap Instalasi

Joomla!) lalu klik Log in

2) Selanjutnya kita masuk ke halaman Control Panel Joomla!

kemudian klik “Extensions” lalu klik “Extention Manager”

3) Lalu pada field “Upload Package File” kita klik browse kemudian

pilih template Joomla! yang didownload tadi, lalu klik “Upload &

Install”

45

Gambar 3.23 Halaman Extension Manager

4) Kemudian klik “Extensions” lalu klik “Template Manager” kita

akan dibawa ke halaman “Template Mangaer”. Langkah

selanjutnya kita pilih template Joomla! yang kita install tadi lalu

klik “Make Default”

Gambar 3.24 Halaman Template Manager

5) Proses instalasi template Joomla! berhasil dilaksanakan. Untuk

mengeceknya ketik alamat URL http://localhost/miftah pada

browser.

46

Gambar3.25.1 Halaman Default Template Joomla!

Gambar 3.25.2 Halaman Template Yang Sudah Di Install

C. Pembuatan Sistem

Setelah dilakukan perancangan sistem informasi penjualan berbasis

web melalui server lokal (localhost). Maka dalam pembuatan sistem

informasi penjualan berbasis web ini adalah melakukan migrasi website ke

hosting atau upload file dari server lokal (localhost) ke web hosting sehingga

terbentuk suatu sistem informasi penjualan berbasis web pada toko “PTMW”

47

Group pada jaringan internet. Dalam pembuatan sistem informasi penjualan

berbasis web ini melalui beberapa tahap sebagai berikut :

1. Pendaftaran Web Hosting

Web Hosting yang dipakai oleh penulis adalah Hostinger

(IdHostinger). Dan memilih Hosting yang gratis. Karena mempunyai

beberapa kelebihan, yaitu: Space 2 GB, Bandwith 100 GB PHP dan

MySQL, Site Builder Tanpa iklan atau banner. Berikut cara

pendaftarannya:

a. Buka browser lalu ketik alamat URL: http://www.idhostinger.com/ lalu

klik Buat Akun

b. Setelah itu isi Form Pendaftaran lalu klik Buat Akun

Gambar 3.26 Form Pendaftaran Hostinger

c. Kemudian Login dengan mengisikan Email dan Password sesuai yag

diisi di form pendaftaran tadi.

48

d. Kemudian kita akan dibawa ke halaman Control Panel Hostinger.

Untuk membuat web hosting baru, maka kita klik menu Hosting lalu

klik Tombol “Create New Account”

Gambar 3.27 Tampilan Menu Hosting

e. Selanjutnya kita dibawa ke halaman pilihan order dari Hostinger untuk

website kita nanti, yaitu ada pilihan Gratis, Premium, Bisnis. Jika kita

ingin memilih yang Gratis, maka Klik Order! Di Kolom Gratis

Gambar 3.28 Halaman Order! Hostinger

49

f. Maka kita akan dibawa ke halaman pendaftaran website baru, lalu kita

isi form pendaftaran tersebut lalu klik Buat

Gambar 3.29 Halaman pendaftaran Akun

g. Akun Berhasil Dibuat.

Gambar 3.30 Akun berhasil dibuat

50

2. Instalasi Joomla! pada Hostinger

a. Sebelum melakukan penginstalan maka kita terlebih dahulu login, lalu

klik menu Hosting, kemudian klik Kelola.

b. Selanjutnya kita dibawa ke halaman Control Panel Hostinger.

Kemudian kita pilih kelompok Website kemudian pilih Penginstal

Otomatis.

Gambar 3.31 Halaman Control Panel Hostinger

c. Kemudian kita akan masuk ke halaman Auto Installer. Karena kita akan

menginstall Joomla! maka kita memilih kelompok Portal/CMS lalu

klik Joomla

51

Gambar 3.32 Halaman Auto Installer Hostinger

d. Lalu kita isikan form penginstalan Joomla!, Kita masukkan Username

Administrator dan Password Administrator. Yang nanti akan digunakan

untuk masuk ke halaman Administrator Joomla lalu klik Install

Joomla 1.7.3

Gambar 3.33 Halaman Instalasi Joomla

e. Tunggu Proses Instalasi sampai selesai. Dan Instalasi Joomla! berhasil

dilakukan

52

3. Upgrade Joomla! Versi 1.7.3 ke Joomla! Versi 2.5.7

Karena, yang disediakan oleh Hostinger (IdHostinger) adalah Joomla!

versi 1.7.3 jadi perlu melakukan upgrade Joomla! agar Joomla! menjadi

versi 2.5.7. Berikut langkah termudah untuk melakukan upgrade Joomla!

versi 1.7.3 ke versi 2.7.5 pada layanan IdHostinger:

a. Login ke Admin Area Joomla!

Silahkan login terlebih dahulu ke halaman administrator

Joomla! dan Anda akan melihat versi Joomla Anda saat ini, yaitu

Joomla! versi 1.7.3

b. Pilih menu Extensions lalu klik Extensions Manager

c. Pilih Install From URL

Pada dasarnya Joomla! memberikan 3 pilihan penginstallan. Tentu opsi

1 (Upload Package File) dan 2 (Install from Directory) maka akan

membutuhkan waktu yang lama dan menyita waktu Anda karena

melakukan penginstallan secara manual. Maka kita pilih opsi yang ke 3

(Install from URL)

Gambar 3.34 Halaman Extension Manager

53

URL file Update Package Joomla! versi 2.5.7 dapat Anda temukan

di website resmi Joomla. Berikut link halaman beserta screenshotnya:

http://www.joomla.org/announcements/release-news/5463-joomla-

2-5-7-released.html

Gambar 3.35 Halaman joomla.org

Lalu pilih yang Update Package

http://joomlacode.org/gf/project/joomla/frs/?action=FrsReleaseBro

wse&frs_package_id=6490

Gambar 3.36 Halaman Download Joomla!

54

Disana Anda akan menemukan 2 file update yaitu Joomla_2.5.7-Stable-

Update_Package.zip dan Joomla_2.5.x_to_2.5.7-Stable-Patch_Package.zip.

Perlu diingat untuk memilih file dengan kode nama "Update" jika ingin

mengupgrade dari versi 1.5.x atau versi 1.7.x ke versi 2.5x. Sedangkan file

dengan kode nama "Patch" dipilih jika anda ingin mengupgrade yang masih

satu versi 2.5.7

Kesalahan yang terjadi umumnya adalah pada saat pengguna memasukkan

URL instalasi. Berdasarkan link download yang diberikan oleh website

joomla tersebut umumnya pengguna akan memasukkan

http://joomlacode.org/gf/download/frsrelease/17409/76019/Joomla_2.5.7-

Stable-Update_Package.zip. Tetapi anda hanya akan mendapatkan error:

Gambar 3.37 Tampilan Install Eror

Namun, jika Anda pengguna aplikasi seperti IDM (Internet

Download Manager), Anda akan menemukan link download yang sedikit

55

berbeda yaitu:

http://downloads.joomlacode.org/frsrelease/7/6/0/76019/Joomla_2.5.7-

Stable-Update_Package.zip

Gambar 3.38 Tampilan Link di IDM

Silahkan masukkan link tersebut lalu Install.

d. Upgrade Joomla! dari versi 1.7.3 ke versi 2.5.7 pun berhasil dilakukan

4. Instalasi FileZilla

FileZilla digunakan untuk melakukan migrasi web lokal (localhost)

ke domain/hosting. FileZilla dapat didownload di: http://filezilla-

project.org/download.php Berikut cara penginstalan FileZilla:

a. Jalankan FileZIlla Setup file

b. Klik I Agree pada License Agreement

c. Pilih opsi instalasi, lalu tekan Next

d. Pilih komponen yang ingin diinstal dan klik Next

e. Pilih lokasi instalasi FileZilla dan klik Next

f. Pilih direktori start menu untuk FileZilla dan klik Install

g. Tunggu Instalasi FileZilla

h. Tekan Finish dan Instalasi berhasil dilakukan

56

5. Migrasi Website Ke Hosting

Setelah melakukan Instalasi FileZilla maka tahap selanjutnya

adalah migrasi website dari localhost ke hosting. Hosting yang dipakai

penulis di sini adalah Hostinger(IdHostinger). Berikut tahap-tahap

melakukan migrasi website ke hosting:

a. Upload File Dari Localhost Ke Hosting

1) Login terlbeih dahulu di Hostinger, yaitu buka browser ketikkan alamat

http://www.idhostinger.com/ kemudian isikan Email dan Password (sesuai

pada waktu pendaftaran di hostinger. Maka kita akan dibawa ke halaman

control panel Hostinger untuk melihat nama Host, Username, Password

dari akun Hosinger kita.

Gambar 3.39 Halaman Control Panel Hostinger

2) Buka software FileZilla yang telah diinstall tadi. Kemudian masukkan

nama Host(Mesin), Username dan Password lalu klik Quickconnect.

Tunggu sampai sukses koneksi dengan akun hostinger kita.

57

Gambar 3.40 Tampilan Awal FileZilla

3) Kemudian kita pilih folder yang ingin kita upload ke Hostinger. Yaitu di

folder C:\\Xampp\htdocs\Miftah. Kemudian blok semua folder dan file

terus klik kanan lalu pilih Upload. Tunggu sampai selesai.

Gambar 3.41 Proses Upload File ke Hosting

58

4) Setelah itu kita cek dengan mengetikkan alamat http://ptmwgroup.url.ph/

pada browser.

Gambar 3.42 Halaman Error

Biasanya akan didapati sebuah halaman yang bertuliskan “Database

connection eror (2): Could not connect to MySQL”. Itu berarti Web

tidak dapat terhubung dengan database. Maka tahap selanjutnya adalah

Impor database kita dari localhost ke hosting.

b. Impor Database Localhost ke Hostinger

Hal yang dilakukan setelah mengupload file dari localhost ke hosting

adalah mengimpor database hosting dari database localhost. Berikut tahap-

tahapnya:

1) Buka browser lalu ketikkan http://localhost/phpmyadmin/ lalu kita pilih

database yang akan diimpor (db_miftah) lalu klik menu ekspor dan

kirim.

59

2) Buka halaman control panel hostinger dengan melakukan login terlebih

dahulu. Kemudian pilih kelompok Tool Penting lalu klik Database

MySQL

3) Kemudian kita membuat database baru dengan memasukkan Nama

database MySQL, Username MySQL, dan Password lalu klik

Create.

Gambar 3.43 Halaman Database MySQL Hostinger

4) Kemudian masuk ke phpMyAdmin untuk melakukan impor database.

Pilih menu impor dan pilih file database yang sudah kita ekspor tadi

lalu klik kirim. Dan Impor database dari localhost ke hosting selesai

c. Edit Configuration.php

Setelah melakukan impor database dari localhost ke hosting. Maka kita

melakukan edit configuration.php untuk mengatur konfigurasi joomla yang

berada di hosting. Berikut tahap-tahapnya:

1) Buka/Edit file yang bernama “Configuration.php” yang berada di

C:\\localhost\xampp\htdocs\Miftah dengan Adobe Dreamweaver CS 6.

60

Tetapi alangkah baiknya di backup terlebih dahulu sebelum melakukan

pengeditan

Gambar 3.44 Tampilan Editing Configuration.php

2) Kemudian kita edit sedikit untuk menghubungkan CMS dengan

database. Yang perlu diedit adalah sebagai berikut:

a. $host = „localhost‟; $host = „mysql.idhostinger.com‟

b. $user = „miftah‟ $user = „u717756020_1msa3‟

c. $password = „*****‟ sesuai password database yang dibuat

d. $db = „db_miftah‟ $db = „u717756020_1msa3‟

e. $log_path = 'C:\\xampp\\htdocs\\Miftah/logs'; diganti dengan

$log_path = '/home/u717756020/public_html/logs';

f. $tmp_path = 'C:\\xampp\\htdocs\\Miftah/tmp'; diganti dengan

$tmp_path = '/home/u717756020/public_html/tmp';

3) Kemudian kita upload ke hosting menggunakan FileZilla seperti biasa.

Tetapi sebelum mengupload lebih baik hapus dahulu file

“configuration.php” yang berada di hosting agar tidak terjadi kesalahan.

61

4) Proses migrasi dari localhost ke hosting selesai.

6. Instalasi Virtuemart

Virtuemart adalah salah satu komponen terbaik yang dimiliki oleh

Joomla! untuk membuat toko online dan bersifat open source. Anda dapat

mendownload paket instalasi Virtuemart di website resmi Virtuemart di

alamat URL http://www.virtuemart.net/. Berikut ini adalah cara

menginstal komponen Virtuemart pada Joomla!:

a. Terlebih dahulu ekstrak Virtuemart yang didownload tadi, sehingga

muncul komponen yang akan diinstall

com_virtuemart.2.0.24_extract_first.targz.zip

Gambar 3.45 File Komponen Virtuemart

b. Kemudian buka browser dan login ke Halaman Administrator Joomla!

kemudian isikan data User Name dan Password (sesuai yang diisikan

pada tahap Instalasi Joomla!) lalu klik Log in/Enter

c. Selanjutnya di halaman control panel, lalu kita pilih tab Extensions

lalu klik Extension Manager. Lalu kita masukkan paket instalasi

Virtuemart lalu klik Upload & Install.

62

Gambar 3.46 Instalasi Virtuemart Berhasil

d. Instalasi berhasil dilakukan. Untuk masuk ke halaman Virtuemart pilih

tab Components lalu klik Virtuemart.

Gambar 3.47 Halaman Control Panel Virtuemart