desain sistem mobile web store menggunakan codeigniter, mysql, dan jquery mobile

7/23/2019 Desain Sistem Mobile Web Store Menggunakan Codeigniter, Mysql, Dan Jquery Mobile

1/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817

DINAMIKAJurnal Ilmiah Teknik Mesin

43

DESAIN SISTEM MOBILE WEB STORE MENGGUNAKAN CODEIGNITER,

MYSQL, DAN JQUERY MOBILE

Suhartono

Staf Pengajar Jurusan Teknik Elektro Fakultas Teknik Uiversitas Negeri Makassar

E-mail: [email protected]

Abstrak

Tujuan penelitian ini adalah untuk membangun sistem mobile web storemenggunakan code-igniter, mysql dan jquerymobile, untuk membantu dalam mendesain sistem penjualan yang berbasis web mobile dan client-server mobile.Pembuatan sistem terdiri dari client dan server dimana dengan sistem ini dapat memonitoring keadaan penjualan.

Metode yang digunakan adalah System Development Life CycleSDLC. Tahapan dalam membangun sistem meliputimengidentifikasi kebutuhan, membangun prototipe, megevaluasi prototipe, mengkodekan sistem, menguji sistem,mengevaluasi sistem, dan menggunakan sistem. Hasil dari penelitian ini adalah sebuah sistem mobile web storeyangmenggunakan bahasa pemrograman web PHP serta framework CodeIgniter, MySQL, dan jQuery Mobileyang dapat

mempermudah promosi barang dan pengaturan barang lebih baik dan efesien.

Kata Kunci: sistem mobile, penjualan, PHP, framework, promosi

Abstract

The design of the mobile web strore system using Codedeigniter, mysql and journey mobile. Thepurpose of thisresearch is to build a mobile web store system using code-Igniter, mysql and jquery mobile, to assist in designing a

mobile web-based sales system and client-server mobile. The process of making the system consists of client and serverwhere the system is able to monitor the state of the sales. It employs the System Development Life CycleSDLC. Thestages in the building system includes identifying needs, building prototypes, evaluating a prototype, coding systems,

testing systems, evaluating the system, and using the system. The result of this study is a mobile system that uses a webstore web programming language and framework CodeIgniter PHP, MySQL, and jQuery Mobile that can facilitate thepromotion and make better goods setting efficiently.

Keywords:mobile system, sales, PHP, framework, promotion

1. Pendahuluan

Perkembangan teknologi informasi yang semakinhari semakin pesat mendorong manusia untukberinovasi menciptakan sesuatu yang baru, untuk

mempermudah pekerjaan dan memenuhikebutuhan hidupnya. Hal tersebut berdampakpada gaya hidup dan perilaku kebanyakan orang,

yang menginginkan kebutuhan informasi yanglebih cepat. Untuk mendapatkan informasi secara

mudah dan cepat, banyak orang menggunakankoneksi internet sebagai salah satu solusinya.

Koneksi internet tersebut memungkinkan banyak

website dijelajahi oleh pengguna sebagai sumber

informasi (Wardani, 2012).

Seiring dengan pesatnya perkembangan teknologiinformasi, pesat pula populasi konsumennya,terutama teknologi web dan mobile. Atas nama

pasar, tidak jarang para produsen teknologimemadukan kedua teknologi tersebut (Riyanto,2013). Teknologi website sebagai sebuah mediayang menyediakan banyak informasi, membuatpenggunannya semakin ingin menjelajahberbagai situs dengan lebih praktis dan efisien.Salah satu cara yang dilakukan yaitu menjelajah


2/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817


44

situs melalui telepon genggam. Sesuai denganperkembanganya, website sekarang ini tidakhanya bisa diakses melalui personal computer

(PC) saja, tetapi juga dapat diakses melaluitelepon genggam, yang biasa disebut mobile web.Dengan sistem ini dapat memungkinkanpengguna mengakses informasi tanpa batasan

waktu dan tempat. Banyaknya penggunaperangkat mobile saat ini, membuat mobile websemakin banyak digunakan dan dikembangkanlagi (Wardani, 2012).

Menurut Riyanto (2013) beberapa tahun yanglalu, pembuatan situs web lebih difokuskan

kepada penggunaan PC atau laptop daripadapengguna perangkat mobile. Saat ini, hampirsemua situs web populer, tidak terkecuali situspenjualan online, menyediakan situs web versi

mobile. Setidaknya ada empat alasan

dibutuhkannya situs webversi mobile. Penggunaperangkat mobile yang sangat besar dan

murahnya biaya akses data, secara tidak langsungmeningkatkan pula pengunjung situs webmelaluiperangkat mobile. Selain itu, situs web versimobile memiliki daya tarik tersendiri bagipengunjung karena lebih cepat aksesnya.

Mengingat perangkat mobile mempunyai

keterbatasan sumber daya, terutama di bagianpemroses dan memori, situs webyang ringan dancepat aksesnya tentu lebih disukai. Selain itu,menggunakan situs web versi mobile lebih

nyaman. Desain sederhana membuatnya mudahdioperasikan dan lebih hemat biaya aksesdatanya. Dengan desain sederhana tentunyaukuran file-file penyusunnya relatif kecil karena

tidak memerlukan desain berlebih yang biasanyamelibatkan file gambar atau animasi. Sistem webversi mobile juga jauh lebih murah untuk

dikembangkan dan bisa berjalan dimana saja

(lintas platform). Selain itu, karena mobilitasyang tinggi dan waktu yang tidak memungkinkanuntuk selalu menggunakan PC, kebutuhan untuk

selalu menggunakan web setiap saat, kapanpun,dimanapun, dan setiap saat dapat diakses.

Ada beberapa manfaat dalam mengembangkansitus web versi mobile diantaranya adalah

CodeIgniterdanjQuery Mobile. CodeIgniteratauCI adalah sebuah framework yang digunakan

untuk membuat situs web yang disusun daribahasa pemrogamman PHP. Di dalam CI

terdapat beberapa macam kelas dalam bentukpustaka dan helper, yang dapat digunakansebagai tool untuk mengembangkan situs web.

SedangkanjQuery mobileadalah web frameworkyang dioptimasi untuk mendesain aplikasi yangakan dijalankan pada perangkat bergerak (mobile

device), seperti smartphonedan tablet (Nugroho,2008).

Kelebihan mobile internet yang memperbolehkan

pengguna melakukan ketika mereka sedangmelakukan kegiatan lain, seperti berbelanja ataudalam perjalanan, akan menambah jumlahpengguna mobile internet sampai empat kalilipat dari pengguna internet dari personalcomputer. Hal ini menunjukkan bahwa era iniadalah waktu yang tepat dalam mengembangkan

strategi mobile internet, dan mengembangkanwebsiteyang berorientasi pada mobile. (Jogianto,2005)

Tujuan studi ini adalah membangun sistemmobile web store menggunakan code-igniter,mysql dan jquery mobile, untukmembantu dalam mendesain sistem penjualanyang berbasis web mobile dan client-server

mobile. Pembuatan sistem terdiri dari client danserver dimana dengan memanfaatkan sistem inidapat memonitoring keadaan penjualan. Metode

yang digunakan dalam penelitian ini adalahSystem Development Life CycleSDLC.

2 Landasan Teori

Aplikasi

Aplikasi adalah satu unit perangkat lunak yangdibuat untuk melayani kebutuhan akan beberapaaktivitas. Misalnya termasuk perangkat lunak

perusahaan, software akuntansi, perkantoran,grafis perangkat lunak dan pemutar media. Dapat

disimpulkan bahwa aplikasi merupakan softwareyang berfungsi untuk melakukan berbagai bentukpekerjaan atau tugas-tugas tertentu seperti

penerapan, penggunaan dan penambahan data(Jogianto, 2005).

Program aplikasi merupakan program siap pakai.

Program yang direka untuk melaksanakan suatufungsi bagi pengguna atau aplikasi yang lain.Contoh-contoh aplikasi ialah program pemroseskata dan Web Browser. Aplikasi akanmenggunakan sistem operasi (OS) komputer dan

aplikasi yang lainnya yang mendukung (Winarto,2014).

Klasifikasi aplikasi dapat dibagi menjadi 2 (dua)yaitu: aplikasi software spesialis, program

dengan dokumentasi tergabung yang dirancang


3/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817


45

untuk menjalankan tugas tertentu dan aplikasipaket, dengan dokumentasi tergabung yangdiranncang untuk jenis masalah tertentu.

(Paranginan, 2006)

Mobile

Perangkat mobile memiliki banyak jenis dalam

hal ukuran, desain dan layout, tetapi merekamemiliki kesamaan karakteristik yang sangatberbeda dari sistem dekstop, yaitu antara lainukuran yang kecil, memori yang terbatas, dayaproses yang terbatas, mengkomsumsi daya yang

rendah, kuat dan dapat diandalkan dankonektivitas yang terbatas (Riyanto, 2013.

Teori Mobile Web Application

Mobile web application adalah aplikasi mobile

yang tidak perlu di-install atau di-compile padadevice. Mobile web application menggunakan

XHTML, CSS, dan JavaScript, Mobile WebApplication dapat memberikan pengalamanseperti memakai aplikasi pada pengguna ketikamenjalankanya di Mobile Web Browser.WebApplication memungkinkan pengguna untukberinteraksi dengan konten dalam kondisi real-time, dimana klik atau touchmelakukan aksi di

dalam tampilann saat ini (Riyanto, 2013.

KelebihanMobile Web Application mudah dibuatdengann HTML dasar, CSS dan JavaScript,mudah untuk disesuakan dengan beberapa

telepon selular dan menawarkan pengalamanyang lebih baik dan desain yang lebih kaya pada

pengguna dan konten dapat diakses oleh semuaMobile Web Browser (Paraningan, 2006).

Kekurangan Mobile Web Application adalahpengalaman yang optimal mungkin tersedia di

beberapa telepon selular, banyak rintangan untuk

mendukung beberpa telepon selular dan tidaksemuaMobile Web Applicationmendukung fiturmode offline, location lookup, filesystem accesdan kamera (Riyanto, 2013).

Konsep Dasar Analisis Sistem

Analisis sistem dapat didefenisikan sebagaipenguraian dari suatu sistem informasi yang utuhke dalam bagian-bagian komponennya denganmaksud untuk mengidentifikasi danmengevaluasi permasalahan-permasalahan,

kesempatan-kesempatan, hambatan-hambatanyanng terjadi dan kebutuhan yang diharapkan

sehingga dapat diusulkann perbaikann-perbaikannya. Tujuan utamanya adalah untukmemahami sistem dan masalah yang ada, untuk

menguraikan kebutuhan informasi dan untukmenetapkan prioritas pekerjaan sistemselanjutnya (Jogiyanto, 2005).

Perancangan Sistem

Hal yang paling dominan ketika perancangansuatu aplikasi dilakukan adalah memodelkankebutuhan pemakai. Ada banyak cara untukmemodelkan aplikasi sebagaimana banyak cara

yang digunakan oleh seorang arsitek untukmembangun sebuah rumah. Pada dasarnya

pemodelan tersebut merupakan kombinasi antara

perangkat lunak dan perangkat keras yangdigunakan (Raharjo, 2012).

Sistem DatabaseMySQL

Menurut Firmansyah Database Mysqlmerupakan sekelumpulan item-item yang salingterekait satu denga yang lainya yangdiorganisasikan berdasarkan skema atau strukturtertentu,tersimpan dalam sebuah storage dandegan bantuan software dapat dilakukanmanipulasi sesuai dega kebutuhan (Nugroho,

2008).

Teori Alat Penelitian

Pada pembangunan Mobile Web Sotre denganCodeIgniter,MySQL dan jQuery Mobile ini

digunakan bahasa pemrogamman Php danMySQL, juga menggunakan CodeIgniter atau CI

yang berfungsi sebagai framework untukmengembangkan situs web versi mobile. SelainCodeIgniter, jQuery Mobile juga digunakan

untuk membangun webmobile ini (Nugroho,

2013).

Codelgniter

Codelgniter adalah aplikasi open source yangberupa framework dengan model MVC (Model,View, Controller) untuk membangun websitedinamis dengan menggunakan PHP. Codelgnitermemudahkan developeruntuk membuat aplikasi

web dengan cepat dan mudah dibandingkandengan membuatnya dari awal. Codelgniterdirilis pertama kali pada 28 Februari 2006. Versi

stabil terakhir adalah versi 2.1.3 (Basuki, 2014)..


4/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817


46

Framework

Framework secara sederhana dapat diartikankumpulan dari fungsi-fungsi atau prosedur-

prosedur dan class-class untuk tujuann tertentuyang sudah siap digunakan sehingga bisa lebihmempermudah dan mempercepat pekerjaan

seorang programmer, tanpa harus membuatfungsi atau class dari awal (Basuki, 2014).

Design Patern:MVC (Model, Vi ew, Controll er)

Model View Controllermerupakan suatu konsep

yang cukup populer dalam pembangunan aplikasiweb, berawal pada bahasa pemrograman SmallTalk, MVC memisahkan pengembangan aplikasi

berdasarkan komponen utama yang membangunsebuah aplikasi seperti manipulasi data,

userinterface, dan bagian yang menjadi kontrolaplikasi (Nugroho, 2013).

Codeligniter atau CI adalah suatu framework

yang digunakan untuk membuat situs web yangdisusun dari bahasa pemrogammann PHP. Didalam CI terdapat beberapa macam kelas dalam

benntuk pustaka dan helper, yang dapatdigunakan sebagai tool untuk mengembangkan

situs web(Riyanto, 2013).

Gambar 1 Struktur Flow CodeIgniter (Riyanto, 2013)

jQuery Mobil e

jQuery Mobile adalah web framework yang

dioptimasi untuk mendesain aplikasi yang akandijalankan pada perangkat bergerak (mobile

device), sepertismarthphonedan tablet (Riyanto,2013).

Dreamweaver

Dreamweaver adalah software aplikasi yangdigunakan sebagai HTML editor professional

untuk mendisain web secara virtual (WahanKomputer. 2013).

3 Metodologi Penelitian

Dalam penelitian ini penulis menggunakan model

prosedural karena dianggap cocok dengan tujuanyang ingin dicapai yaitu menghasilkan produk

dan menguji kelayakan produk yang dihasilkandimana untuk mencapai tujuan tersebut harusmelalui langkah-langkah tertentu yang harus

diikuti untuk menghasilkan produk tertentu. pada

penelitian ini akan menghasilkan suatu produksistemMobile Web Store.

Metode Pengembangan Sistem

Adapun metode pengembangan dalammembangun sistem ini yaitu menggunakanmetode pengembangan SDLC. Metode siklushidup pengembangan sistem atau system

development life cycle mempunyai beberapatahapan sesuai dengan namanya, SDLC dimulaidari suatu tahapan sampai tahapan terakhir dan

kembali lagi ketahapan awal membentuk suatusiklus atau daur hidup.

Diagram Konteks

Diagram konteks merupakan aliran yangmemodelkan hubungan antara sistem denganentitas. Selain itu diagram konteks merupakan

diagram yang paling awal yang terdiri dari sutauproses data dan menggambarkan ruang lingkupsuatu sistem secara garis besarnya. Aliran dalamdiagram konteks memodelkan masukan ke sistem

dan keluaran dari sistem.

Admin/Pemilik

Pelanggan

1PendataanMaster

2Pendataan

Pelanggan

3

Transaksi

4

Laporanmobile

webstore

Data produk&

kategori

Data User/

Pelanggan

Data Transaksi

PenjualandanPembelian

6

InformasiProduk

InformasiProduk

Data Produk

LaporanData Pelanggan;

Laporanriwayat Belanja;LaporanData Produk;

LaporanTransaksi;

Laporanbarang supplier;

Data Pelanggan

Data Transaksi

Data Produk

Transaksi

7

RiwayatBelanja

Data

riwayat

belanja

DataBarang Supplier

5Pendataan

Supplier

Data produksupplier

Gambar 4 Data flow diagram Level 1


5/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817


47

SISTEM MOBILE

WEB STOREADMIN/PEMILIK PELANGGAN

Data Barang ;

Data Pelanggan ;

Data pemilik ;

Data Penjualan dan Pembelian;

Data Supplier

Laporan Data Barang;

Laporan Data pelanggan;

Laporan penjualan dan

pembelian barang;

Info login dan registrasi ;;

Informasi Produk ;

Informasi harga;

Informasi riwayat belanja;.

Data login dan registrasi user ;

Transaksi pembelian barang;

Gambar 3 Diagram Konteks (DFD Context)

DIAGRAM USE CASE PELANGGAN

LOGIN USER

Registrasi user

HOME

Riwayat Belanja

Produk

Pelanggan

LOGIN USER

Registrasi Data

BERANDA

Record

Edit

Pelanggan

Gambar 4 Diagram UML Use Case/UML Use CaseDiagram

Gambar 6 Diagram Use Case Pelanggan

Pengujian Sistem

Pengujian sistem dimaksud adalahproses menilaiapakah yang dirancang telah sesuai dengan yang

diharapkan dan dilakukan dengan tujuanmengevaluasi keunggulan dan kelemahanterhadap sesuatu yang diuji (kualitas produk).Proses pengujian ini dilakukan secara berkala

dengan mengevaluasi input dan otput yangdihasilkan oleh sistem.

Start

Login ?

Input username

& password

admin

Cari username &

password admin

Ditemukan ?

YA

Tampilkan pesan

username dan

password salah

TIDAK

Operasi login

admin ?

ya

Masih inginmengoperasikan

database ?

ya

Stop

Tidak

Tidak

Ya

Tidak

Mengoperasikan

database

logut

Gambar 7Flowchart LoginAdmin

Rencana Pengujian

Untuk menguji program aplikasi yang dirancang,

penulis menggunakan metode Black Box.Pengujian black-box berfokus pada persyaratanfungsional perangkat lunak. Pengujian ini

memungkinkan analis sistem memperolehkumpulan kondisi input yg akan mengerjakanseluruh keperluan fungsional program.Sistem

yang dibuat harus bebas dari kesalahan yangmungkin dapat terjadi


6/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817


48

Tujuan metode ini mencari kesalahan pada fungsiyang salah atau hilang, kesalahan pada interface,kesalahan pada struktur data atau akses database,

kesalahan performansi dan kesalahan inisialisasidan tujuan akhir

Start

Login ?

Input username

& password

Cari username &

password

Ditemukan ?

Tampilkan pesan

username dan

password salah

tidak

tidak

Order ?

ya

ya

End

Halaman

Publik

Registrasi ?

Verifikasi oleh

adminn

Input data

profil user

Pilih barang &

Add to chart

Riwayat

Belanja

ya

Lanjutkan ?

Tidak

Ya

Data lengkap ?

Halaman

checkout

Input data profilTidak

Ya

Log out

Ya

Tidak

Tidak

Gambar 8Flowchart Login User

4 Hasil

Sistem mobile web store ini merupakan sistemyang dibangung dengan menggunkan framework

CodeIgniter dan jQuery mobile serta MySQLsebagai databasenya. Framework CodeIgniterberfungsi untuk mengatur proses berjalannyasistem yaitu bagaimana saat user mengaksessistem yang dioperasikan menggunakan MVC(Model, View, Controller). Model padacodeigniter menangani langsung database dari

sistem, untuk Viewpada codeigniteradalah untukmenampilkan informasi yang ditampilkan kepadauser melalui browser, dan Controller pada

codeignitermerupakan business logic bertugassebagai jembatan antara Model dan View.Sedangkan untuk framework jQuery Mobileadalah framework yang menangani desain

tampilan yang akan ditampilkan ke user.

(a) (b)

Gambar 9 (a) Tampilan Menu LoginUser (versi

mobile) (b). Tampilan Menu LoginUser

berhasil(versi mobile)

Sistem ini memiliki 2 level user, yaitu levelAdmin dan level Pelanggan. Level Admindigunakan untuk melakukan manipulasi data(insert,update,dan delete) seluruh data yangada.seperti data katagori, data produk dan data

user. Admin juga bertugas untuk menanganipemesanan barang dari user, dan pembuatanlaporan riwayat belanja masing-masing userpelanggan. Halaman ini hanya dapat diakses oleh

login user sebagai Admin, user yang loginsebagai pelanggan tidak mempunyai hak akses


7/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817


49

seperti login userAdmin. Sedangkan untuk levelpelanggan merupakan level user yang digunakanoleh user pelanggan yang memiliki hak ases

untuk melakukan pemesanan produk, mengeditidentitas user, dan melihat daftar riwayatbelanjanya. User yang tidak memiliki akun padasistem ini atau belum melakukan registrasi pada

sistem mobile web store ini tidak dapatmelakukan pemesanan barang. User yang tidakmelakukan login, hanya dapat melihat-ligat daftarproduk yang ada pada halaman utama. Berikutgambar hasil-hasil desain antara lain adalah :

(a) (b)

Gambar 10 (a) Tampilan Menu Daftar (versi mobile)(b) Tampilan login useruntuk pelanggan (versi

mobile)

5 Kesimpulan dan Saran

Berdasarkan hasil perancangan dan pengujian

dengan menggunakan metode blackbox, makadiperoleh sistem mobile web store denganmenggunakan Codeigniter, MysQl, dan jquery

mobile. Sistem dapat dijalankan pada perangkatmobile yang memiliki aplikasi browser didalamnya dan dengan sistem ini dapatmemonitoring jumlah penjualan. Sistem dapat inidapat diintegrasikan dengan sistem lain dengan

membangun sistem clien server.

Berdasarkan hasil desain sistem mobile web storedengan menggunakan Codeigniter, MySQL dan

jquery mobile dalam penelitian ini, disarankankepadaaspek keamanan sistem ini dapat

dikembangkan dengan menerapkan keamananyaitu cloud security dan untuk database dengancloud datatases. Selain itu, penggunaan

codeigniterdanjquery mobiledapat ditingkatkandengan menggunakanframework tersebut denganversi terbaru.

Daftar Pustaka

Basuki, Pribadi. 2014. Proyek MembangunWebsite Berbasis PHP denganCodeigniter. Yogyakarta : BadanPenerbit CV. Lokomedia

Raharjo B, Heryanto I, Enjang RK. 2012. Modul

Pemrogamman Web HTML, PHP &MySQLEdisi Revisi. Bandung: Modula

Winarno E, Zaki A, Smit, Dev Community.2014.3 in 1 : Javascript, jQuery danjQuery Mobile. Jakarta: Penerbit PT ElexMedia Komputindo.

Jogiyanto HM. 2005. Analisis dan DesainSistem Informasi, Yogyakarta: AndiOffset

Wardani MK, Putra FN, Jodie R. AplikasiBeeLife Berbasis Mobile Web. Jakarta:Universitas Bina Nusantara, 2012

Nugroho, Bunafit. 2008.Aplikasi Pemrogamman

Web DInamis dengan PHP dan MySQL.

Yogyakarta: Badan Penerbit Gava Media.

Nugroho, Bunafit. 2013. Dasar PemrogammanWeb PHP-MySQL dengan Dreamweaver.

Yogyakarta: Badan Penerbit Gava Media.

Paranginan, Kasiman. 2006. Aplikasi Webdengan PHP dan MySQL. Yogyakarta:

Andi

Riyanto. 2013. Membangun Mobile Web Storedengan CodeIgniter, MySQL & jQueryMobile. Yogyakarta: Badan Penerbit Andi.

Wahan Komputer. 2013. Membuat Sendiri WebMobile Menggunakan Jquery Mobile.

Yogyakarta: Diterbitkan atas kerjasamaPenerbit ANDI Yogyakarta dengan

Wahana Komputer Semarang


8/8

Vol. 6, No. 2, Mei 2015 ISSN: 2085-8817


50

desain sistem mobile web store menggunakan codeigniter, mysql, dan jquery mobile

Documents