LAPORAN KERJA PRAKTEK PEMBUATAN TOKO ONLINE WEBTOKOONLINE.COM DENGAN OPENCART PT OTAK KANAN -INDONESIA Periode : 4 Juli s.d. 4 Agustus 2011
Oleh:
Halimatus Sa’dyah Nurissaidah Ulinnuha
5108100135 5108100143
JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNOLOGI INFORMASI INSTITUT TEKNOLOGI SEPULUH NOPEMBER SURABAYA
2011 (halaman ini sengaja dikosongkan)
LEMBAR PENGESAHAN LAPORAN KERJA PRAKTIK PT. OTAK KANAN Surabaya
JUDUL
:
PEMBUATAN TOKO ONLINE WEBTOKOONLINE.COM DENGAN OPENCART LOKASI
:
PT. OTAK KANAN Surabaya
Mengetahui, Pembimbing Kerja Praktik,
Santoso Putra
(halaman ini sengaja dikosongkan)
LEMBAR PERSETUJUAN LAPORAN KERJA PRAKTIK Judul: Pembuatan Toko Online Webtokoonline.com Dengan Opencart Lokasi: PT. OTAK KANAN Surabaya Periode: 4 Juli s/d 4 Agustus 2011
Surabaya, 13 Januari 2012 Dosen Pembimbing & Penguji
Diana Purwitasari, S.Kom, M.Sc NIP. 197804102003122001
(halaman ini sengaja dikosongkan)
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa, karena hanya dengan rahmat, bimbingan serta anugerah-Nya,
penulis
dapat
melaksanakan
dan
menyelesaikan Kerja Praktik di PT. OTAK KANAN, Surabaya, Jawa Timur. Buku ini kami susun sebagai laporan hasil Kerja Praktik kami yang dilaksanakan selama kurang lebih satu bulan. Kerja Praktik merupakan salah satu persyaratan kelulusan kurikulum di Jurusan Teknik Informatika Fakultas Teknologi Informasi Institut Teknologi Sepuluh Nopember Surabaya dengan tujuan agar mahasiswa memperoleh berbagai informasi dan pengalaman di dunia kerja yang sebelumnya tidak didapatkan di bangku kuliah. Kami menyadari bahwa laporan ini masih jauh dari sempurna. Oleh karena itu kritik dan saran yang membangun akan sangat kami harapkan demi perbaikan karya-karya selanjutnya. Dan semoga nantinya laporan ini dapat memberikan manfaat bagi kita semua. Melalui laporan ini kami ingin menyampaikan rasa terima kasih kepada semua pihak yang telah membantu kami dalam terselenggaranya kegiatan Kerja Praktik di PT. OTAK KANAN Surabaya dan penyelesaian buku ini. Ucapan terima kasih kami sampaikan kepada pihak-pihak sebagai berikut. 1. Allah SWT atas rahmat dan anugerah-Nya sehingga kami bisa memiliki kemampuan untuk menyelesaikan Kerja Praktik ini dengan baik.
2.
3.
4.
5.
6.
7.
8.
PT. OTAK KANAN Surabaya atas segala kesempatan, pengalaman kerja dan akomodasi yang telah diberikan kepada kami selama melaksanakan Kerja Praktik.\ Ibu Diana Purwitasari, S.Kom, M.Sc., sebagai dosen pembimbing dan penguji kami. Terima kasih atas semua bimbingan dan masukan yang telah diberikan kepada kami selama Kerja Praktik dan pembuatan Buku Laporan Kerja Praktik ini. Bpk. Santoso Putra, selaku pembimbing kami. Terima kasih atas bimbingan dan masukan yang telah diberikan kepada kami selama melaksanakan Kerja Praktik di PT. OTAK KANAN Surabaya. Ibu Dr. Nanik Suciati, S.Kom, M.Kom, sebagai Ketua Jurusan Teknik Informatika ITS Surabaya yang telah memberikan izin untuk melaksanakan Kerja Praktik di PT. OTAK KANAN Surabaya. Ibu Bilqis Amaliah, S.Kom, M.Kom, sebagai Koordinator Kegiatan Kerja Praktik di jurusan Teknik Informatika ITS. Pegawai Departemen Programming atas semua bantuan, bimbingan dan masukan yang diberikan selama Kerja Praktik. Dan pihak-pihak lain yang telah membantu terselesaikannya Kerja Praktik ini yang tidak sempat disebutkan namanya. Surabaya, Desember 2011
Penulis
DAFTAR ISI
KATA PENGANTAR……………………………………….. i LEMBAR PENGESAHAN...................................................iii DAFTAR ISI.........................................................................iv DAFTAR GAMBAR.............................................................vi BAB 1. PENDAHULUAN..................................................1 1.1
Latar Belakang........................................................1
1.2
Permasalahan..........................................................1
1.3
Batasan Masalah.....................................................2
1.4
Tujuan Kerja Praktek..............................................3
1.5
Sistematika Penulisan.............................................4
BAB 2. PROFIL PERUSAHAAN.......................................5 2.1
Umum.....................................................................5
2.2
Portofolio Perusahaan.............................................7
2.3
Struktur Organisasi OTAK KANAN....................10
BAB 3. DASAR TEORI....................................................11 3.1
Pemrograman Web...............................................11
3.2
Opencart................................................................12
3.3
PHP.......................................................................13
3.3.1
Konsep Kerja PHP........................................14
3.3.2 3.4
XAMPP................................................................17
3.4.1 3.5
Sintaks Dasar PHP........................................15 Instalasi XAMPP..........................................19
MySQL.................................................................22
3.5.1
Sistem Management Basis Data Relasional. .23
3.5.2
Keistimewaan MySQL..................................25
BAB 4. IMPLEMENTASI.................................................28 4.1
Tools.....................................................................28
4.2
Implementasi.........................................................28
4.2.1
Instalasi Opencart..........................................28
4.2.2
Menambahkan Produk dan Detailnya...........36
4.2.3
Penambahan Fitur Mata Uang Rupiah..........41
4.2.4 Penambahan Fitur Bahasa Indonesia untuk Front-end46 4.2.5
Menambahkan modul JNE............................51
4.2.6
Diagram Alir Pembeli (User)........................53
4.2.7
Panduan User................................................55
4.2.8
Admin Mengecek Pesanan............................61
4.2.9
Uji Coba........................................................63
BAB 5. PENUTUP............................................................66 5.1
Kesimpulan...........................................................66
5.2
Saran.....................................................................66
Saran
0
DAFTAR GAMBAR Gambar 1. Struktur Organisasi OKG..................................2-18 Gambar 2. Logo CMS Opencart............................................20 Gambar 3 Tampilan awal installer XAMPP..........................28 Gambar 4 Memilih lokasi folder untuk XAMPP...................28 Gambar 5 Pengaturan kustomisasi instalasi XAMPP............29 Gambar 6 Proses awal instalasi XAMPP...............................29 Gambar 7 Proses instalasi XAMPP telah sukses....................30 Gambar 8 Dialog konfirmasi untuk membuka XAMPP Control Panel......................................................................................30 Gambar 9. Proses upload dengan FileZilla............................37 Gambar 10. Akses File Manager Web Directory...................39 Gambar 11. Struktur Folder pada Web Root..........................39 Gambar 12. Membuat Database 1..........................................40 Gambar 13. Membuat Database 2..........................................41 Gambar 14. Membuat User untuk DB...................................41 Gambar 15. Instalasi opencart 1.............................................42 Gambar 16. Instalasi opencart 2.............................................42 Gambar 17. Instalasi opencart 3.............................................43 Gambar 18 Instalasi Opencart 4.............................................43 Gambar 19 front- end default................................................44 Gambar 20 Back-end.............................................................44
Gambar 21 Tambah Kategori................................................45 Gambar 22. Isi Field Kategori...............................................45 Gambar 23. Tambah Produk..................................................46 Gambar 24. Tambah Produk Deskripsi Umum......................46 Gambar 25. Tambah Kategori Produk...................................47 Gambar 26. Tambah Option Produk......................................48 Gambar 27. Tampilan Produk di back-end............................48 Gambar 28. Tampilan Produk di front-end............................49 Gambar 29. Penambahan Fitur Mata Uang Rupiah 1.............50 Gambar 30. Penambahan Fitur Mata Uang Rupiah 2.............50 Gambar 31. Penambahan Fitur Mata Uang Rupiah 3.............51 Gambar 32. Penambahan Fitur Mata Uang Rupiah 4.............52 Gambar 33. Penambahan Fitur Mata Uang Rupiah 5.............53 Gambar 34. Tampilan front-end setelah Penambahan Mata Uang Rupiah..........................................................................53 Gambar 35. Penambahan Fitur Bahasa Indonesia 1...............55 Gambar 36. Penambahan Fitur Bahasa Indonesia 2...............55 Gambar 37. Penambahan Fitur Bahasa Indonesia 3...............56 Gambar 38. Penambahan Fitur Bahasa Indonesia 4...............56 Gambar 39. Penambahan Fitur Bahasa Indonesia 5...............57 Gambar 40. Penambahan Fitur Bahasa Indonesia 6...............57 Gambar 41. Penambahan Fitur Bahasa Indonesia 7...............58 Gambar 42. Tampilan Toko online Berbahasa Indonesia......59
Gambar 43. Instalasi JNE......................................................60 Gambar 44. Edit Konfigurasi Modul.....................................60 Gambar 45. Form Konfigurasi...............................................61 Gambar 46. Diagram Alir Pembeli........................................62 Gambar 47. Beranda Situs.....................................................63 Gambar 48. Lihat Produk Berdasarkan Kategori...................64 Gambar 49. Lihat Produk dengan Sitemap............................64 Gambar 50. Detail Produk.....................................................65 Gambar 51. Detail Produk.....................................................65 Gambar 52. Proses Checkout 1..............................................66 Gambar 53. Proses Checkout 2..............................................66 Gambar 54. Proses Checkout 3..............................................67 Gambar 55. Proses Checkout 4..............................................67 Gambar 56. Proses Confirm Order........................................68 Gambar 57. Notifikasi Pesanan Sudah diproses.....................68 Gambar 58. Dashboard, Menu Sales>Order..........................69 Gambar 59. Dashboard, Menu Sales>Order..........................69 Gambar 60. Diagram Alir Admin Mengecek Pesanan...........70 Gambar 61. Halaman Keterangan Pesanan............................71 Gambar 63. Daftar Belanja Kosong.......................................72 Gambar 63. Daftar Belanja Barang Habis..............................73
Gambar 63. Daftar Belanja Barang Habis
(halaman ini sengaja dikosongkan)
BAB 1.PENDAHULUAN 1.1
Latar Belakang Perkembangan teknologi internet saat ini mengalami
peningkatan yang cukup pesat. Saat ini orang sekarang telah memanfaatkan internet untuk membantu kebutuhan/keperluan informasi dalam kehidupan sehari-hari termasuk dalam hal berbelanja. Tidak hanya generasi muda yang mengakses internet, namun juga generasi- generasi di atasnya. Seiring dengan meningkatnya pengguna internet yang berarti semakin meluasnya pangsa pasar marketing, membuat internet marketing mulai dilirik dan berkembang. Di tengah persaingan usaha yang cukup ketat, banyak orang terutama penjual produk dan jasa kini lebih senang membuat apa yang sering disebut toko online. Tidak sedikit juga karyawan yang mencoba peruntungan mencari penghasilan tambahan dengan membuat toko online. Toko
online
merupakan
salah
satu
sarana
untuk
mempromosikan barang dagangan seseorang dengan banyak keuntungan. Memang pada periode 10 sampai dengan 5 tahun lalu, mungkin toko online dinilai kurang mempunyai prospek karena masih rendahnya tingkat kepercayaan seseorang terhadap bisnis dan transaksi di dunia maya. Namun sekarang toko online sudah jamak dijadikan media promosi selain personal blog.
Namun, orang pada umumnya tidak terlalu menguasai pemrograman web ketika dihadapkan pilihan untuk membuka toko online. PT OTAK KANAN sebagai salah satu perusahaan yang bergerak di bidang industri kreatif, khususnya di bidang IT, melihat peluang tersebut dengan membuat toko online yang menjual hosting dan pemesanan toko online bagi pelanggan yang masih awam dengan teknologi. Selain itu, web ini juga dilengkapi dengan penjualan CD tutorial penggunaan software. Pembuatan web toko online akan dibahas dalam bab-bab buku ini. 1.2
Ruang Lingkup Masalah Masalah yang menjadi fokus utama pada Kerja Praktik ini
adalah bagaimana mengaplikasikan web toko online dengan menerapkan modul khusus pembuatan toko online yang sudah tersedia di internet yakni OpenCart. Selain itu, untuk menarik pelanggan, web ini juga disertakan add-ons seperti penggunaan dua bahasa. Penambahan modul JNE TIKI juga dilakukan sebagai fitur pengiriman barang yang dijual di web toko online. Web ini juga dilengkapi dengan tutorial cara penggunaan toko online sehingga pelanggan dapat mengetahui lebih mudah tentang modul yang disediakan. Pelanggan juga dapat melakukan demo toko online langsung sebagai admin pada opsi yang telah disediakan.
1.3
Batasan Masalah
Batasan masalah dalam kerja praktek ini adalah web webtokoonline.com yang dikembangkan dengan CMS opencart dengan database MySQL. Front-end aplikasi bisa diakses melalui www.webtokoonline.com. Sedangkan back- end aplikasi bisa diakses melalui www.webtokoonline.com/admin. Tutorial web toko online bisa diakses di www.guide.webtokoonline.com
1.4
Tujuan Kerja Praktek Kerja praktek ini dilaksanakan untuk memenuhi mata kuliah
Kerja Praktek di Jurusan Teknik Informatika, Institut Teknologi Sepuluh Nopember Surabaya. Dengan selesainya kerja praktek ini diharapkan dapat memberikan nilai tambah pada perusahaan tempat kerja praktek berlangsung serta untuk penulis yang melakukan kerja praktek. Tujuan umum pelaksanaan Kerja Praktik ini adalah sebagai berikut : • Membandingkan informasi yang telah didapat dengan pengetahuan yang diperoleh dari perkuliahan. • Mengamati, menganalisa, dan mengambil kesimpulan dari segala kegiatan yang dilakukan. • Mendapatkan pengalaman kerja di lapangan.
• Mengembangkan pengetahuan, sikap, keterampilan, dan kemampuan profesi melalui penerapan ilmu, latihan kerja dan pengamatan teknik yang diterapkan di PT. OTAK KANAN, Surabaya. Tujuan khusus pelaksanaan Kerja Praktik ini adalah mempelajari pembuatan web dalam hal ini web dengan kategori toko online menggunakan CMS Opencart sebagai modul toko online, CMS WordPress sebagai modul tutorialnya, beserta database MySQL. 1.1
Sistematika Penulisan Penulisan laporan kerja praktek ini dibagi menjadi enam bab
sesuai dengan aturan yang ada pada Tata Cara Penulisan Laporan Kerja Praktek Jurusan Teknik Informatika ITS : BAB I:
PENDAHULUAN
Dalam bab ini diuraikan latar belakang masalah, permasalahan, batasan masalah dan tujuan dari kerja praktek. BAB II: PROFIL PERUSAHAAN Membahas Struktur Organisasi dan kelembagaan serta portofolio PT. OTAK KANAN. BAB III : DASAR TEORI Dalam bab ini diuraikan tentang teori yang digunakan untuk menyelesaikan aplikasi webtokoonline.com BAB IV: IMPLEMENTASI
Didalamnya diuraikan tentang aplikasi yang dibuat serta penjelasan modul- modul aplikasi tersebut. BAB V: PENUTUP Bab ini berisi kesimpulan dan saran dari hasil implementasi kerja praktek di PT. OTAK KANAN.
(halaman ini sengaja dikosongkan)
BAB 2.PROFIL PERUSAHAAN 2.1
Umum PT. OTAK KANAN adalah sebuah web idea company
yang bergerak di bidang industri kreatif, terutama di bidang IT dan pendidikan khususnya web design and development, IT training, internet marketing, publishing, dan multimedia. Saat ini OTAK KANAN GROUP (OK Group) memiliki unit bisnis di bidang web design dan kursus / training computer dan IT. Ke depan OK Group akan mengembangkan usaha di bidang lain lain seperti bisnis online, internet marketing, multimedia, publishing, advertising, dan business service. MasterNusa (www.masternusa.com) adalah unit bisnis di bawah PT. OTAK KANAN yang khusus bergerak di bidang kursus computer, kursus IT, les privat mata pelajaran untuk siswa
dan
juga
kursus
mengaji.
DesainWeb
(www.desainweb.com) adalah unit bisnis di bawah PT. OTAK KANAN yang bergerak di bidang web design dan web development. DesainWeb merupakan one stop solution web development mulai dari domain, hosting, desain, maintenance, hingga promosi website dan sampai saat ini sudah memiliki lebih dari 150 klien. Telkom
Beberapa klien DesainWeb antara lain PT .
Indonesia , UKM
JATIM, Hendra
Utomo,
dll.
MasterNusa dan DesainWeb, untuk selanjutnya disebut OK Group.
iGPSolution merupakan unit usaha PT OTAK KANAN
yang
mengembangkan
beberapa
produk
diantaranya Sales Force Automation, Sun Digi mTrak275, dan Lunar GPS Tracking yang merupakan product GPS Tracking dengan fitur standar. Untuk memperkuat bisnis, OK Group membentuk komunitas
TimKreatif.community
(TKC)
sebagai
wadah
inkubasi bisnis industri kreatif yang diutamakan dalam implementasinya adalah berorientasi profit centre. Setiap aktivitasnya selalu menginisiasi insan kreatif baru yang memberikan keuntungan dan manfaat bagi kemajuan bersama, baik sebagai desainer, programmer, trainer, marketer, dll. Yang tidak kalah penting dalam pelaksanaannnya juga beorientasi pada spiritual, etika universal, budaya, kemandirian dan kepedulian. Diharapkan dari komunitas ini dapat terjalin kerjasama lebih real, baik dalam bentuk model pekerjaan maupun bantuan pendanaannya (dari OK Group, investor, atau hibah dari pihak lain). Anggota dari TimKreatif ini terdiri dari orang- orang dengan bermacam- macam professi dan latar belakang, antara lain mahasiswa dari berbagai jurusan, praktisi IT, pegawai di kantor lain, peminat bisnis online, dan sebagainya.
Saat ini cukup banyak komunitas yang bersifat terbuka. TimKreatif.com merupakan komunitas terbuka untuk umum namun bersifat terbatas (kerjasama dengan OK Group), anggota diharapkan bisa berkontribusi sebagai tenaga SDM maupun bekerjasama berupa kemitraan (partnership) dengan konsep bagi hasil. 2.2
Portofolio Perusahaan MasterNusa yang sekarang merupakan salah satu unit
bisnis di bawah PT. OTAK KANAN merupakan cikal bakal dari PT. Otak Kanan. Pusdiklat MasterNusa didirikan pada 3 Mei 2004 oleh Santoso Putra dan rekan- rekannya. Sekarang Santoso Putra merupakan direktur PT. OTAK KANAN. Sejak tahun 2005 merk Pusdiklat MasterNusa sudah terdaftar secara resmi pada Dinas Pendidikan. Tahun 2006 merupakan tahun pemantapan bisnis internal dan pengembangan unit bisnis. Setelah penguatan internal pada tahun 2006, tahun 2007 MasterNusa mulai go public, salah satunya ditandai dengan bergabungnya MasterNusa menjadi anggota Himpunan Penyelenggara Kursus Indonesia (HIPKI). Prinsip selalu ingin maju dan berkembang para pendiri MasterNusa
memotivasi
mereka
untuk
mengembangkan
bisnisnya sehingga lahirlah CV. Santoso Putra pada tanggal 26
Desember 2007. CV. Santoso Putra bergerak di bidang marketing. Jasa pembuatan web pun dimulai. Pengalaman demi pengalaman, klien demi klien pun ditangani CV. Santoso Putra. Tahun 2008 merupakan tahun meluasnya CV. Santoso Putra. Bertemu dengan PT. Telkom dan dipercaya untuk membangun web sekaligus menangani proyek Broadband Learning Center (BLC) selama 1 tahun di 8 kota di Jawa Timur menjadi tanda meluasnya CV. Santoso Putra. BLC di Surabaya, Sidoarjo, Tuban, Mojokerto, Jombang, Bojonegoro, Sumenep, dan Pamekasan sukses ditangani selama satu tahun. Saat itu pula CV. Santoso Putra mulai menjadi agency Speedy di Telkom Tuban dan Bojonegoro. Tahun
berikutnya,
CV.
Santoso
Putra
semakin
mengembangkan bisnisnya dan juga membuka diri dalam rangka penguatan brand. Menjadi sebuah perusahaan yang masih balita tidak menjadikan CV. Santoso Putra tidak visioner. Salah satunya dengan cara menjadi anggota komunitas Tangan Di Atas (TDA) tempat para pengusaha dan pebisnis sharing tentang bisnis namun juga tidak melupakan sisi sosial sesuai dengan nama komunitasnya. Selain itu CV. Santoso Putra juga menjadi anggota komunitas Usaha Kecil dan Menengah Jawa Timur (UKM Jatim). Aset perusahaan pun bertambah, selain kantor di Ruko Wisma Mukti juga kantor di Pasar Wisata Bandara Juanda.
Finalis
Wirausaha
Muda
Mandiri
wilayah
VIII,
pengharagaan yang diterima oleh Santoso Putra berkat keuletan, ketekunan, kemampuan membawa bisnisnya bertahan dan semangat untuk terus maju. Menyadari potensi berkembangnya internet dan promosi online dan agar lebih fokus pada bisnis web development, maka didirikanlah PT. OTAK KANAN pada 21 Desember 2009. Berdirinya PT. OTAK KANAN tak membuat keaktifan perusahaan di komunitas- komunitas eksternal berkurang. Bahkan Santoso Putra termasuk pelopor pendiri Asosiasi Industri Web Indonesia (AIWI) pada akhir 2009. Saat ini pun PT. OTAK KANAN tidak berhenti berinovasi. Pada 2010 ini mulai dirintis pengembangan business opportunity / franchise. Hal ini tak lepas dari salah satu prinsip yang yang memotivasi seluruh tim PT. OTAK KANAN adalah ”The best way to predict the future is to create it” (Peter F. Ducker)
2.3
Struktur Organisasi OTAK KANAN
Gambar 1. Struktur Organisasi OKG
BAB 3.DASAR TEORI Bab ini menjelaskan tentang dasar teori singkat tools yang digunakan dalam pengerjaan aplikasi ini. Aplikasi yang dikembangkan oleh penulis dibuat dengan CMS Opencart versi 1.4.7. Berikut akan dibahas secara singkat tentang toko online, pemrograman web, PHP, MySQL, XAMPP dan opencart itu sendiri. 3.1
Toko Online Dari segi bahasa, toko online berasal dari dua suku kata,
Toko dan Online. Menurut Kamus Besar Bahasa Indonesia, toko berarti sebuah tempat atau bangunan permanen untuk menjual barang-barang
(makanan,
minuman,
dan
sebagainya).
Sedangkan online yang terjemahan bahasa indonesianya adalah dalam jaringan atau disingkat daring menurut Wikipedia adalah keadaan di saat seseorang terhubung ke dalam suatu jaringan ataupun sistem yang lebih besar. Jadi berangkat dari dua pengertian secara bahasa tersebut kita dapat mengartikan toko online sebagai tempat terjadinya aktifitas perdagangan atau jual beli barang yang terhubung ke dalam suatu jaringan dalam hal ini jaringan internet. Ketika kita melakukan transaksi di sebuah toko, kita bebas memilih barang yang akan kita beli. Terkadang kita perlu
memasukkan barang yang kita beli ke dalam keranjang belanja lalu kita menyerahkan keranjang belanja tersebut kepada kasir untuk dihitung total belanja kita. Sama seperti transaksi di toko biasa, di toko online proses transaksi yang kita lakukan tidak jauh berbeda. Bila di toko biasa kita dilayani oleh manusia, di toko online kita dilayani oleh mesin. 3.2
Pemrograman Web Di era teknologi informasi seperti saat ini, banyak
tektnologi berbasis web yang mulai dikembangkan untuk mempermudah urusan manusia. Teknologi berbasis web merupakan teknologi yang digunakan untuk berkomunikasi dengan database, file atau dengan komputer lain dalam suatu jaringan internet. Informasi-informasi dari jarak jauh dapat diakses dengan cepat dan mudah dengan menggunakan teknologi ini. Faktor yang menetukan kinerja aplikasi berbasis web adalah kecepatan akses jaringan atau internet dan kecepatan akses database. Untuk menjalankan aplikasi berbasis web dibutuhkan dua bagian yaitu server dan browser sebagai clientnya. Server atau web server yang bisa dipakai antara lain Apache, IIS. Dalam aplikasi yang penulis kembangkan ini menggunakan Apache sebagai web server dan client browser yang tersedia saat
ini, contohnya adalah Internet Explorer, Mozilla Firefox, Google Chrome dan lain-lain. 3.3
Opencart Opencart adalah sebuah Sistem manajemen konten (SMK
atau CMS) yang bebas dan terbuka (free opensource) untuk membuat toko online. Opencart dibangun dengan menggunakan bahasa pemrograman PHP 5 dan MySQL sebagai DBMS untuk keperluan di internet maupun intranet. Opencart dapat diinstal langsung di domain yang dimiliki atau bisa juga diinstal pada komputer lokal menggunakan web server seperti XAMPP lalu di-upload ke hosting dan dikonfigurasi secara online. Package dan
dokumentasi
tentang
opencart
bisa
diunduh
di
www.opencart.com. Berikut ini logo dari opencart.
Gambar 2. Logo CMS Opencart
Secara garis besar, opencart terdiri dari 3 elemen dasar, yaitu server web, skrip PHP dan basis data MySQL. Server web diasumsikan terhubung dengan Internet/Intranet yang berfungsi sebagai penyedia layanan situs. Skrip PHP terdiri dari kode program dalam bahasa PHP dan basis data merupakan tempat
penyimpanan konten. Opencart menggunakan Apache atau IIS Windows sebagai server web dan MySQL untuk basis datanya. Aplikasi toko online yang dikembangkan terbagi menjadi dua bagian utama, yaitu front-end dan back-end. Front-end toko online dapat diakses langsung dari URL situs, misalnya www.namadomain.com, sedangkan back-end untuk pengaturan toko online dapat diakses melalui www.namadomain.com/admin .
Agar cocok digunakan untuk toko online di Indonesia, ada
beberapa modul opencart yang harus disesuaikan, seperti penambahan mata uang Rupiah untuk transaksi, penjelasan cara pengiriman dengan kurir Indonesia, dan penambahan modul Bahasa Indonesia untuk front end jika dibutuhkan. Untuk upload atau download data dari dan ke komputer lokal ke hosting digunakan FTP software, dalam pengerjaain aplikasi ini penulis menggunakan FileZilla. 3.4
PHP PHP (PHP: Hypertext Preprocessor) adalah bahasa
pemrograman script yang ditanamkan atau disisipkan pada dokumen HTML (HTML embedded). Bahasa PHP merupakan sebuah bahasa pemrograman yang bersifat server-side yang berarti akan dieksekusi di dalam web server ketika script-nya dipanggil. Konsep server-sidescripting ini tentunya dari segi keamanan jauh lebih baik daripada client-side scripting karena
klien tidak akan dapat melihat script atau source code asli yang ada di server, sebab yang ditampilkan di browser adalah hasil eksekusi script tersebut. Bahasa PHP dikenal karena kemudahan dalam scripting, stabilitas, dan banyaknya library yang mendukung pembuatan aplikasi web yang kompleks dan dinamis. Kemampuankemampuan yang terdapat pada PHP antara lain: perhitungan matematis, informasi jaringan, mail, regular expression, serta menyediakan interface dengan beberapa server database yang populer
di
pasaran,
seperti
MySQL,
Oracle,
Sybase,
PostgreSQL, mSQL, dan lainnya. 3.4.1
Konsep Kerja PHP Pertama client web browser menjalankan file PHP pada
web browser. Kemudian file PHP tersebut akan dikirim ke web server. Web server mengirimkannya lagi ke engine PHP untuk diproses sehingga berbentuk akhir file HTML. File HTML inilah yang akan di kirimkan ke web server dan web server akan mengembalikannya ke client.
3.4.2
Sintaks Dasar PHP Beberapa aturan dasar penulisan sintaks dalam bahasa
PHP antara lain : 1. Skrip php dipisahkan dari skrip html dengan dua buah tag pembuka dan penutup Tag pembuka
:
Tag penutup
: ?>
2. Pemisah antar instruksi adalah titik koma (;) 3. Komentar Komentar adalah bagian dalam skrip pemrograman yang tidak dieksekusi. Dalam php dapat digunakan tiga jenis komentar : •
C style
: komentar diapit oleh tanda “/*” dan
“*/”
•
C++ style
: komentar dimulai dengan tanda “//”
•
Unix shell
: komentar diawali dengan tanda “#”
1. Variabel Variabel digunakan untuk menyimpan data sementara dan nilainya bisa berubah dalam eksekusi. Penulisan nama variabel dalam PHP diawali dengan tanda dollar ($) diikuti nama variabel. Nama variabel dapat berupa kombinasi antara huruf alfabet dan angka dengan panjang maksimal 32 karakter.
2. Tipe data Beberapa tipe data yang dikenali dalam php adalah: • •
Integer
•
Double
•
Boolean
•
String
•
Object
•
Array
•
1. Konstanta Konstanta adalah variabel yang nilainya tidak dapat berubah-ubah lagi. Dalam php, konstanta didefinisikan dengan perintah define. 2. Ekspresi Ekspresi
dapat
diartikan
sebagai
“sesuatu
yang
mempunyai nilai”. Ekspresi adalah bagian yang sangat penting dalam php. Setiap baris yang ditulis dalam php merupakan ekspresi. Contoh paling sederhana dari ekspresi ini adalah variabel dan konstanta. 3. Fungsi
Fungsi adalah konstruksi pemrograman untuk melakukan sebuah proses tertentu. Fungsi dapat dipanggil dari library php maupun didefinisikan sendiri. 1.1
XAMPP XAMPP adalah perangkat lunak bebas, yang mendukung
banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Program ini tersedia dalam GNU General Public License dan dapat diakses secara bebas. XAMPP mudah digunakan dan dapat melayani tampilan halaman web yang dinamis. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Penjelasan lebih lanjut mengenai setiap komponen dalam XAMPP adalah sebagai berikut : a. APACHE Apache merupakan sebuah aplikasi web server. Fungsi dari apache adalah menampilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan
kode PHP yang dituliskan,maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan.
0
b. MySQL MySQL,
merupakan
Perkembangannya
aplikasi
disebut
SQL
database yang
server.
merupakan
kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. MySQL
dapat
dimafaatkn
untuk
menambahkan,
mengubah, dan menghapus data yang berada dalam database. c. phpMyAdmin Salah satunya perangkat lunak yang dapat digunakan untuk mengolah database MySQL adalah phpMyAdmin. Dengan phpMyAdmin pengembang dapat membuat tabel, mengisi data dan lain-lain dengan mudah tanpa harus
hafal
phpMyAdmin
perintahnya.
Untuk
langkah-langkahnya
mengaktifkan
adalah
:
yang
pertama setelah XAMPP terinstall, web server Apache dan MySQL harus diaktifkan dari control panel XAMPP. Yang kedua, jalankan browser lalu ketikkan alamat web berikut : http://localhost/phpmyadmin/ pada address bar lalu tekan Enter. Langkah ketiga apabila telah nampak interface
(tampilan
antar
muka)
phpMyAdmin, 1
pengembangdapat memilih atau menambah database baru. 1.1.1
Instalasi XAMPP Langkah-langkah instalasi XAMPP untuk sistem
operasi Windows selengkapnya adalah sebagai berikut: 1. Setelah installer dijalankan, akan muncul tampilan seperti gambar 3. Untuk melanjutkan proses instalasi klik tombol Next. 2. Berikutnya muncul tampilan seperti gambar 4. Di sini user dapat menekan tombol Browse untuk memilih lokasi folder yang akan digunakan untuk menginstal XAMPP.
Kemudian
tekan
tombol
Next
untuk
melanjutkan proses instalasi. 3. Selanjutnya, seperti yang dapat dilihat pada gambar 5, user dapat memilih opsi-opsi penginstalan yang tersedia. Setelah selesai memilih opsi yang diinginkan, proses instalasi dapat segera dimulai dengan menekan tombol Install. 4. Saat proses instalasi sedang berjalan, akan muncul tampilan seperti gambar 6. Setelah proses instalasi selesai, muncul tampilan seperti gambar 7. Setelah menekan tombol Finish akan muncul tampilan seperti gambar 8. Selanjutnya, pilih yes.
2
Gambar 3 Tampilan awal installer XAMPP
Gambar 4 Memilih lokasi folder untuk XAMPP
3
Gambar 5 Pengaturan kustomisasi instalasi XAMPP
Gambar 6 Proses awal instalasi XAMPP
4
Gambar 7 Proses instalasi XAMPP telah sukses
Gambar 8 Dialog konfirmasi untuk membuka XAMPP ControlPanel
1.1
MySQL MySQL
manajemen
adalah
basis
data
sebuah SQL
perangkat (bahasa
lunak
Inggris:
system database
management system) atau DBMS yang multithread, multi-user, 5
dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasuskasus dimana penggunaannya tidak cocok dengan penggunaan GPL. Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael "Monty" Widenius. 1.1.1
Sistem Management Basis Data Relasional MySQL adalah sebuah implementasi dari sistem
manajemen basisdata relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). Setiap pengguna dapat secara bebas menggunakan MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan salah satu konsep utama dalam basisdata yang telah ada sebelumnya; SQL (Structured Query
6
Language). SQL adalah sebuah konsep pengoperasian basisdata, terutama untuk pemilihan atau seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. Kehandalan suatu sistem basisdata (DBMS) dapat diketahui dari cara kerja pengoptimasi-nya dalam melakukan proses perintah-perintah SQL yang dibuat oleh pengguna maupun program-program aplikasi yang memanfaatkannya. Sebagai peladen basis data, MySQL mendukung operasi basisdata
transaksional
maupun
operasi
basisdata
non-
transaksional. Pada modus operasi non-transaksional, MySQL dapat dikatakan unggul dalam hal unjuk kerja dibandingkan perangkat lunak peladen basisdata kompetitor lainnya. Namun demikian pada modus non-transaksional tidak ada jaminan atas reliabilitas terhadap data yang tersimpan, karenanya modus nontransaksional hanya cocok untuk jenis aplikasi yang tidak membutuhkan reliabilitas data seperti aplikasi blogging berbasis web (wordpress), CMS, dan sejenisnya. Untuk kebutuhan sistem yang
ditujukan
untuk
bisnis
sangat
disarankan
untuk
menggunakan modus basisdata transaksional, hanya saja sebagai konsekuensinya unjuk kerja MySQL pada modus transaksional tidak secepat unjuk kerja pada modus non-transaksional.
7
1.1.2
Keistimewaan MySQL MySQL memiliki beberapa keistimewaan, antara lain : 1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan masih banyak lagi. 2. Perangkat
lunak
sumber
terbuka.
MySQL
didistribusikan sebagai perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga dapat digunakan secara gratis. 3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu yang bersamaan tanpa mengalami masalah atau konflik. 4. 'Performance tuning', MySQL memiliki kecepatan yang
menakjubkan
dalam
menangani
query
sederhana, dengan kata lain dapat memproses lebih banyak SQL per satuan waktu. 5. Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya, seperti signed / unsigned integer, float, double, char, text, date, timestamp, dan lainlain.
8
6. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah Select dan Where dalam perintah (query). 7. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level subnetmask, nama host, dan izin akses user dengan sistem perizinan yang mendetail serta sandi terenkripsi. 8. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat ditampung mencapai 32 indeks pada tiap tabelnya. 9. Konektivitas. MySQL dapat melakukan koneksi dengan klien menggunakan protokol TCP/IP, Unix soket (UNIX), atau Named Pipes (NT). 10.Lokalisasi.
MySQL
dapat
mendeteksi
pesan
kesalahan pada klien dengan menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa Indonesia belum termasuk di dalamnya. 11.Antar
Muka.
MySQL
memiliki
antar
muka
(interface) terhadap berbagai aplikasi dan bahasa pemrograman dengan menggunakan fungsi API (Application Programming Interface). 9
12.Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan (tool) yang dapat digunakan untuk administrasi basis data, dan pada setiap peralatan yang ada disertakan petunjuk online. 13.Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE, dibandingkan
basis
data
PostgreSQL ataupun Oracle.
0
lainnya
semacam
(halaman ini sengaja dikosongkan)
1
BAB 1.PERANCANGAN DAN IMPLEMENTASI SISTEM Pada bab ini akan dijelaskan mengenai perancangan Web Toko Online di PT. OTAK KANAN Surabaya dalam proses Kerja Praktik. 1.1
Fitur dan Layanan Sistem
Tujuan utama dari aplikasi ini adalah untuk memberikan wadah bagi pelanggan untuk berjualan melalui toko online dengan menyediakan paket hosting. Beberapa fitur utama yang disediakan adalah: 1. 1.1 Perancangan Fitur Perancangan fitur sistem digunakan untuk mengetahui jalannya proses bisnis pada suatu aplikasi sehingga dengan melihat perancangan sistem maka pengembang aplikasi dapat dengan mudah melakukan perubahan. Perancangan sistem yang digunakan adalah diagram aktifitas dan diagram sekuensial.
2
1.1.1
Perancangan Fitur Sistem Pemesanan Barang
3
Gambar 8 Dialog konfirmasi untuk membuka XAMPP ControlPanel
1.2
Tools Untuk membuat aplikasi ini, penulis menggunakan
beberapa tools sebagai berikut. 1.
Apache, web server untuk men-deploy web.
2. Notepad++, editor code. 3. FileZilla, FTP software untuk upload dan download data. 4. Ms Paint, dokumentasi. 4
5. MySQL untuk menyimpan data 1.1
Implementasi
1.1.1
Instalasi Opencart Package
opencart
bisa
diunduh
di
www.opencart.com/download. Versi yang digunakan untuk membangun aplikasi ini adalah opencart versi terbaru, yaitu opencart versi 1.4.7. Untuk bisa menginstal package opencart, web hosting yang digunakan harus mempunyai spesifikasi minimal sebagai berikut. 1.
Apache atau Windows IIS
2.
PHP 5
3.
MySQL
Instalasi opencart bisa dilakukan pada komputer lokal atau pada web hosting langsung. Berikut langkah – langkah upload dan instalasi opencart pada web hosting. 1. Unduh file opencart dari www.opencart.com/download kemudian extract file tersebut. 2. Ulpoad semua file yang ada dalam folder upload ke web hosting dengan FTP software ke direktoti public_html. Penulis menggunakan FileZilla sebagai FTP software.
5
Gambar 9. Proses upload dengan FileZilla
Masukkan nama host, username, password, serta port yang digunakan. Standard port yang digunakan untuk FTP adalah 21. Lalu tekan tombol Quickconnect. Bagian kiri FileZilla menunjukkan
struktur
folder
pada
komputer
yang
digunakan, sedangkan bagian kanan menujukkan struktur folder pada web hosting. Proses upload dengan koneksi internet cukup stabil memakan waktu yang cukup lama, yaitu sekitar 2(dua) jam. Dengan koneksi internet yang kurang bagus, memungkinkan proses upload membutuhkan waktu yang lebih lama. Jika semua file sudah ter-upload dan tanda proses upload pada bagian bawah sudah kosong, dan tidak ada file yang gagal diupload, maka semua file telah 6
sukses di-upload. Namun, jika ada angka pada tab Failed transfer (lihat Gambar 9 bagian bawah) itu artinya ada file yang belum ter-upload. Klik tab failed transfer lalu upload ulang file tersebut. Lakukan sampai semua file tidak ada angka lagi pada tab failed transfer yang artinya seluruh file telah ter-upload di web hosting. 3.
Setelah proses upload selesai, buka browser (penulis menggunakan browser Google Chrome) lalu akses cPanel situs, dalam hal ini www.webtokoonline.com/cpanel . Lalu, masukkan username dan password cPanel yang didapatkan setelah order hosting dan domain. Klik File Manager > pilih Web Root (public_html/www) seperti ditunjukkan pada gambar 10.
Gambar 10. Akses File Manager Web Directory
7
Setelah itu, akan tampil struktur folder file yang tadi diupload seperti ditunjukkan pada gambar 11.
Gambar 11. Struktur Folder pada Web Root
4. Cek permission masing-masing folder dengan meng-klik kanan masing-masing folder tersebut. Pastikan bahwa filefile dan folder-folder tersebut writable. Atau bisa juga dilihat langsung pada kolom permission pada bagian paling kanan seperti ditunjukkan gambar 11. Pada OS Unix 0755 atau 0777 artinya file atau folder tersebut writable. Bila belum sesuai, maka harus diubah agar writable. 5. Kembalilah ke home cPanel atau buka home cPanel pada tab lain pada browser yang sama, lalu pada bagian Databases pilih MySQL Databases.
8
Gambar 12. Membuat Database 1
Buat database untuk menyipan data- data toko online. Lalu buat user lalu tambahkan user tersebut ke dalam database yang sudah dibuat sebelumnya.
Gambar 13. Membuat Database 2
9
Gambar 14. Membuat User untuk DB
6. Buka path installer opencart yang sudah diulpoad ke web hosting. Lalu ikuti langkah instalasi sesuai dengan yang tampil di layar. Secara garis besarnya ada 4 langkah instalasi. Isi field yang ada sesuai dengan petunjuk dan lakukan penyesuaian jika ada peringatan. Folder instalasi harus dihapus atau diubah namanya setelah proses instalasi selesai.
0
Gambar 15. Instalasi opencart 1
Gambar 16. Instalasi opencart 2
1
Gambar 17. Instalasi opencart 3
Isi field database name dengan nama database yang telah dibuat pada MySQL sebelumnya.
Gambar 18 Instalasi Opencart 4
2
7. Berikut tampilan front-end default dari toko online yang telah diinstal dan back-end halaman login adminnya
Gambar 19 front- end default
Gambar 20 Back-end
1.1.1
Menambahkan Produk dan Detailnya Default produk yang digunakan pada opencart adalah
adalah contoh produk package opencart. Webtokoonline adalah 3
toko online yang menjual Software, CD Tutorial Software, dan pernak-perniknya. Agar bisa ditampilkan pada web, foto masingmasing produk yang telah dikategorikan di-upload ke web hosting gengan FTP software, lalu dimasukkan melalui backend atau halaman admin. Berikut langkah- langkah lengkapnya. 1. Ulpoad data foto produk dengan FTP software. 2. Masuk ke halaman admin, lalu pilih catalog > categories.
Gambar 21 Tambah Kategori
3. Klik tombol insert lalu isi field sesuai dengan yang dibutuhkan lalu tekan tombol save.
Gambar 22. Isi Field Kategori
4
4. Setelah selesai memasukkan semua kategori, sekarang saatnya memasukkan produk. Pilih catalog > products.
Gambar 23. Tambah Produk
5. Isi field yang ada sesuai dengan kebutuhan. Pada tab Data merupakan deskripsi umum masing- masing produk. Pada bagian kategori, centang salah satu kategori produk sesuai yang diinputkan sebelumnya .
5
Gambar 24. Tambah Produk Deskripsi Umum
Gambar 25. Tambah Kategori Produk
6
6. Jika produk memiliki spesifikasi khusus yang berbeda- beda misalnya ukuran pakaian, besarnya memori internal atau eksternal bawaan untuk kamera digital, dan sebagainya, bisa digunakan informasi tambahan pada tab option. Klik tombol add option > add option value. Klik tombol Save setelah selesai.
Gambar 26. Tambah Option Produk
7. Ulangi langkah di atas sampai semua produk di-upload. 8. Produk yang telah di-upload bisa dilihat di front-end dan back-end.
Gambar 27. Tampilan Produk di back-end
7
Gambar 28. Tampilan Produk di front-end
1.1.1
Penambahan Fitur Mata Uang Rupiah Default mata uang standar yang digunakan pada opencart
adalah Pounsterling (£). Target pasar utama Webtokoonline adalah orang Indonesia, jadi mata uang yang digunakan yaitu Rupiah (Rp) atau IDR (Indonesia Rupiah). Berikut langkah- langkah pengesetan mata uang agar menjadi Rupiah (IDR). 1. Masuk ke halaman admin, lalu pilih System > Localisation > Currencies.
8
Gambar 29. Penambahan Fitur Mata Uang Rupiah 1
2. Selanjutnya akan tampil mata uang- mata uang yang sudah ada. Klik tombol Insert.
Gambar 30. Penambahan Fitur Mata Uang Rupiah 2
3. Isi field yang tersedia dengan nilai seperti pada gambar berikut lalu tekan tombol Save. Value harus diisi dengan 1, hal ini karena kita akan menjadikan rupiah sebagai mata uang utama. Nilai tukar mata uang lain harus disesuaikan terhadap nilai baru ini.
9
Gambar 31. Penambahan Fitur Mata Uang Rupiah 3
4. Klik tombol Save. Layar akan kembali menampilkan daftar semua mata uang yang ada dalam OpenCart. 5. Ubah value semua mata uang lain agar menyesuaikan dengan nilai 1 yang dimasukkan dalam rupiah. Sebagai contoh, mata uang US dollar, value-nya diubah ke 0,0001 dengan asumsi bahwa nilai tukar yang berlaku 1 US dollar = Rp 10.000. Gambar berikut ini menunjukkan update terhadap semua mata uang lain dalam OpenCart.
0
Gambar 32. Penambahan Fitur Mata Uang Rupiah 4
6. Jika tidak diperlukan, mata uang lain bisa juga dihapus saja. 7. Klik menu System – Settings, kemudian klik tab Local. Ubah Country ke Indonesia, Region / State ke Jawa Timur (tempat fisik toko client). Ubah Currency agar menggunakan Rupiah dan Language Indonesian (akan dibahas pada bagian berikutnya). Gambar berikut ini menunjukkan form untuk mengubah setting tersebut.
1
Gambar 33. Penambahan Fitur Mata Uang Rupiah 5
8. Setelah selesai, maka harga produkakan berubah menjadi Rupiah. Penambahan Fitur Mata Uang Rupiah ini juga bisa dilakukan sebelum menambahkan produk dan detailnya. Berikut tampilan produk dengan mata uang Rupiah pada front-end.
2
Gambar 34. Tampilan front-end setelah Penambahan Mata Uang Rupiah
1.1.1
Penambahan Fitur Bahasa Indonesia untuk Frontend Default bahasa yang digunakan pada opencart adalah
Bahasa Inggris (England). Seperti sudah disebutkan sebelumnya, bahwa target pasar utama Webtokoonline adalah orang Indonesia, jadi sebaiknya digunakan Bahasa Indonesia. Ada 2 bagian pokok pada Opencart, bagian admin tidak diterjemahkan ke
Bahasa
Indonesia,
sedangkan
bagian
penting
user
diterjemahkan ke dalam Bahasa Indonesia. Berikut langkah-langkah pengesetan bahasa agar pada bagian user menggunakan Bahasa Indonesia. 1. Buka browser lalu masuk ke alamat hosting atau cpanel web, misalnya
www.webtokoonline.com/cpanel.
Masukkan
3
username dan password cpanel web, maka akan mucul halaman home cpanel.
Gambar 35. Penambahan Fitur Bahasa Indonesia 1
2. Buka File Manager, dan ketika muncul tab baru pilih Web Root(public_html/www) lalu tekan tombol Go.
Gambar 36. Penambahan Fitur Bahasa Indonesia 2
4
Gambar 37. Penambahan Fitur Bahasa Indonesia 3
3. Buka /public_html/catalog/language. Jika belum diinstal bahasa yang lain, di situ akan terdapat satu folder yang bernama english, salin folder tersebut dan namai salinannya dengan indonesian, sebagaimana terlihat dalam gambar di bawah ini.
Gambar 38. Penambahan Fitur Bahasa Indonesia 4
4. Buka folder indonesian lau edit berkas indonesian.php, lalu kalimat-kalimat bahasa Inggris dalam berkas tersebut diganti dengan terjemahan Bahasa Indonesia-nya. Gambar berikut
5
ini
menunjukkan
contoh
terjemahan
dalam
berkas indonesian.php.
Gambar 39. Penambahan Fitur Bahasa Indonesia 5
5. Setelah itu login ke halaman admin OpenCart, lalu buka Setting > Localisation > Language > klik tombol Insert. Dalam form yang dimunculkan, isi informasi mengenai Bahasa Indonesia, seperti terlihat dalam gambar berikut.
6
Gambar 40. Penambahan Fitur Bahasa Indonesia 6
6. Untuk menjadikan Bahasa Indonesia sebagai bahasa utama toko online, buka Setting > Localisation > Language. Dalam form yang dimunculkan, isi Language dengan Indonesian, seperti terlihat dalam gambar berikut.
Gambar 41. Penambahan Fitur Bahasa Indonesia 7
7
7. Buka tab baru pada browser, lalu perhatikan bahwa toko online sekarang harusnya sudah berbahasa Indonesia. Selain dengan cara yang telah disebutkan sebelumnya, Bahasa Inggris bisa juga dipilih dengan cara meng-klik icon bendera Inggris yang terdapat dalam kotak pencarian. Untuk mengembalikannya ke Bahasa Indonesia, cukup klik bendera Indonesia.
Gambar 42. Tampilan Toko online Berbahasa Indonesia
1.1.1 Menambahkan modul JNE JNE adalah modul yang digunakan untuk menangani fitur pengiriman barang. Adapun cara menambahkan modul ini adalah sebagai berikut : 1. Download modul JNE di www.opencart.com 2. Ekstrak file zip ke instalasi OpenCart (di cpanel)
8
3. Pergi ke halaman admin OpenCart untuk mengaktifkan & mengkonfigurasi modul pengiriman. Pilih ke Extension > Shipping, setelah Anda berada di halaman Shipping, pilih Tiki JNE dan klik install:
Gambar 43. Instalasi JNE
3. Setelah diinstal, masih pada halaman yang sama, klik edit untuk mengaktifkan dan mengkonfigurasi modul:
9
Gambar 44. Edit Konfigurasi Modul
4. Setelah edit di-klik, akan muncul form isian seperti di bawah ini. Form ini berguna untuk mengatur nama kota dan biaya pengiriman. Untuk melakukan hal tersebut anda cukup mengisi nama kota di field Origin City, dan harga di field Handling Fee.
Gambar 45. Form Konfigurasi
Setelah form diisi, klik tombol save pada bagian kanan atas. Dan proses konfigurasi bisa dilanjutkan. 0
1.1.1
Diagram Alir Pembeli (User) Berikut diagram alir pembeli produk di webtokoonline:
1
MULAI
Lihat Produk
TertarikUntuk Membeli
DataProduk
tidak
FINISH
ya
LihatDetail
DaftarAkun
AddtoCart
PilihMetode Pembayarandan Shipping
Pilihlagi
KonfirmasiChetckou
Ya
Tidak
Checkout
SELESAI
Gambar 46. Diagram Alir Pembeli
2
1.1.2
Panduan User Berikut panduan user (dalam hal ini) calon pembeli
untuk menggunakan situs www.webtokoonline.com yang dibuat berdasarkan diagram alir pada sub bab sebelumnya. 1. Buka website www.webtokoonline.com
Gambar 47. Beranda Situs
2. Lihat produk yang ditampilkan di bagian home situs, atau pilih berdasarkan kategori pada bagian Kategori
3
Gambar 48. Lihat Produk Berdasarkan Kategori
3. Selain kategori, produk juga bisa dilihat melalui Site Map
Gambar 49. Lihat Produk dengan Sitemap
4
2. Lihat detail produk yang disukai dengan cara mengklik gambar atau ID Produk tersebut
Gambar 50.
Detail Produk
3. Untuk memilih produk tersebut, klik tombol add to cart.
5
Gambar 51.
Detail Produk
4. Jika belanja sudah selesai, klik checkout
Gambar 52.
Proses Checkout 1
5. Checkout akan me-redirect ke tab log in. Di bagian itu ada dua pilihan yaitu Register Account atau Guest Account. Register Account memugkinkan anda untuk dikenali jika berbelanja lagi di kemudian hari di situs 6
ini, sehingga anda cukup memasukkan email dan password. Setelah memilih salah satu klik tombol continue (dalam bahasa inggris) atau lanjutkan (dalam bahasa indonesia)
Gambar 53.
Proses Checkout 2
6. Isi field yang muncul dengan data diri yang sebenarnya.
7
Gambar 54.
Proses Checkout 3
7. Pilih metode pengiriman dan pembayaran, setelah memilih tekan tombol lanjutkan
Gambar 55.
Proses Checkout 4
8. Setelah itu akan muncul halaman seperti nota yang menyebutkan keterangan pemesanan anda. Jika dirasa ada yang kurang sesuai, klik tautan Change, jika sudah pilih Confirm Order atau Konfirmasi Pesanan.
8
Gambar 56. Proses Confirm Order
9. Setelah tombol Confirm Order di-klik, maka akan muncul halaman notifikasi yang menandakan bahwa pesanan anda sedang diproses
Gambar 57. Notifikasi Pesanan Sudah diproses
9
1.1.1 Admin Mengecek Pesanan Bila ada pesanan baru admin toko bisa mengecek di bagian admin, diagram alirnya bisa dilihat pada gambar 60. Adapun langkah-langkah untuk mengkonfirmasi pemesanan adalah sebagai berikut: 1. Masuk halaman admin, pilih Sales > Order
Gambar 58. Dashboard, Menu Sales>Order
2. Pada halaman selanjutnya akan ditampilkan pesanan yang masuk. Untuk memproses, klik edit
Gambar 59. Dashboard, Menu Sales>Order
0
MULAI
LOGIN
Tidak
Ada Pesanan?
Ya
Usernamedan Password benar
Pilih Pesanan
Tidak
LOGOUT
Ya
SELESAI
Ya
Masuk Dashboard Admin
Konformasi Pesanan
Msuk Sales >Order
Cetak Tagihan
SELESAI
Gambar 60. Diagram Alir Admin Mengecek Pesanan
1
3. Setelah tombol edit di-klik akan muncul tab baru yang berisi keterangan pesanan, halaman pada tab ini bisa dicetak sebagai bukti administrasi dengan meng-klik tombol print invoice.
Gambar 61. Halaman Keterangan Pesanan
1.1.1
Uji Coba Berikut skenario ujicoba sistem yang dibuat: 1. Pembelanjaan normal Yang
dimaksud
pembelanjaan
normal
adalah
pembelanjaan yang barangnya tersedia. Pembelian dapat dilakukan seperti pada subbab 4.2.7 jika ingin menampilkan barang yang dipilih, klik tab basket Jika keranjang belanja masih kosong, ketika tab Basket di klik maka akan muncul pemberitahuan bahwa keranjang belanja masih kosong dan tersedia 2
tombol lanjutkan yang jika di-klik akan me-redirect beranda
Gambar 63. Daftar Belanja Kosong
2. Pembelanjaan barang habis Yang dimaksud pembelanjaan barang habis di sini adalah
pembelanjaan
yang
barangnya
habis.
Pembelian dapat dilakukan seperti pada subbab 4.2.7. Namun ketka user menekan tab checkout maka akan muncul peringatan bahwa stok telah habis. Solusinya adalah dengan menghapus item tersebut dari daftar belanja, untuk selanjutnya kembali ke home dan mencari produk yang lain.
3
Gambar 63. Daftar Belanja Barang Habis
4
BAB 1.PENUTUP 1.1
Kesimpulan Dengan selesainya Kerja Praktek ini, maka penulis
mendapatkan kesimpulan sebagai berikut. • Toko online merupakan sarana yang tepat di tengah berkembang pesatnya internet untuk menawarkan barang dan jasa sehingga berpotensi untuk dijual kepada para pelanggan yang masih awam dengan teknologi • Perlunya dokumentasi untuk tutorial yang mudah dipahami bagi pengguna toko online yang masih awam dengan penggunaan OpenCart sehingga toko online dapat digunakan oleh semua orang 1.1
Saran Dengan selesainya Kerja Praktek ini, maka kami dapat
memberikan saran sebagai berikut. •
Versi Opencart yang diimplementasikan di toko online Webtokoonline ini merupakan versi Opencart terbaru, jadi
memungkinkan
untuk
dieksplorasi
dan
dikembangkan lebih lanjut, sehingga lebih banyak modul yang bisa dipakai oleh pengguna. 5
•
Pihak kampus bisa mengadakan kerja sama lebih lanjut dengan perusahaan- perusahaan yang bergerak di bidang yang sesuai dengan disiplin ilmu kampus tersebut untuk meningkatkan kemampuan mahasiswa.
6
BAB 1.DAFTAR PUSTAKA
Kadir, Abdul. 2006. Menguasai Pemrograman Web dengan PHP 5. Penerbit Andi dan Wahana Komputer. Jakarta http://opencart.com , tanggal akses mulai 12 Mei 2010
7