1. 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 :

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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:xampphtdocs. 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

8. 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

9. 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)

10. 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:

11. 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:xampphtdocs
dan beri nama sesuai dengan keinginan kita. Di sini penulis
menggunakan nama file miftah sehingga alamat folder yang kita
ekstrak tadi menjadi C:xampphtdocsmiftah.

12. 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.

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

14. 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.

15. 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

16. 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)

17. 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.

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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”

24. 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.

25. 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”

26. 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.

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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!

33. 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

34. 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

35. 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.

36. 57
Gambar 3.40 Tampilan Awal FileZilla
3) Kemudian kita pilih folder yang ingin kita upload ke Hostinger. Yaitu di
folder C:XampphtdocsMiftah. Kemudian blok semua folder dan file
terus klik kanan lalu pilih Upload. Tunggu sampai selesai.
Gambar 3.41 Proses Upload File ke Hosting

37. 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.

38. 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:localhostxampphtdocsMiftah dengan Adobe Dreamweaver CS 6.

39. 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:xampphtdocsMiftah/logs'; diganti dengan
$log_path = '/home/u717756020/public_html/logs';
f. $tmp_path = 'C:xampphtdocsMiftah/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.

40. 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.

41. 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