98 285 1 PB

Vol.15 No.2.
Agustus 2013 Jurnal Momentum ISSN : 1693-752X
REKAYASA WEB UNTUK PEMESANAN HANDPHONE

BERBASIS JQUERY PADA PERMATA CELL
Indra Warman, M.Kom, Atma Zahni 

Dosen Jurusan Teknik Informatika, Fakultas Teknologi Industri
Mahasiswa Teknik Informatika, Fakultas Teknologi Industri
Institut Teknologi Padang
Jl. Gajah Mada, Kandis Nanggalo, Padang
Abstract
Information technology is now increasingly prevalent in many areas and can not be avoided. The use of
technology has become the main requirement to support the quality of the field and become the most
important capital in a company ahead of the competition. One form of this competition is to improve
customer service. Problems encountered in serving consumers to order. To improve and facilitate the
service to consumers would require a web information system. Overcoming it is then designed a web-
based order system. The purpose of this study is to design a web. This web makes it easy for the customer
in terms of, the cost and time as well as helped the store to serve the consumer ordering. Based on the
study, expected to improve the effectiveness, efficiency of the stores in serving consumers.
Keywords: online ordering, consument, Web
PENDAHULUAN
Sekarang ini website standar dianggap kurang commerces dengan menggunakan PHP dan
lagi menarik perhatian pengguna website, MySQL untuk keperluan penjualan dan
karena sekarang orang-orang lebih menyukai pembelian Handphone dapat mempermudah
sesuatu yang menarik atau tidak monoton dan proses transaksi penjualan pembelian
juga ringan. Maka oleh sebab itu dirancanglah handphone bagi suatu perusahaan dan
sebuah website yang interaktif, menarik dan efisiensi waktu dan kemudahan pelayanan
juga membuat para pengunjung lebih terkesan pada transaksi jual beli.
yaitu dengan menggunakan JQuery.
Selain itu perancangan website yang
Berdasarkan latar belakang yang telah dilakukan oleh Abdul Latif pada tahun
dipaparkan, Maka penulis akan mencoba 2008,yang membangun Website E-commerces
membuat web untuk pemesanan handphone berbasis PHP dan MySQL yang digunakan
berbasis JQuery pada dalam hal ini penulis untuk membuat orang mudah untuk
akan membahas tentang cara membangun berbelanja cukup di depan jaringan komputer
website menggunakan PHP dan database dan internet, orangpun bisa berbelanja dengan
MySQL serta metode Ajax dan Jquery. mudah, proses ini pun cukup mudah untuk
pembayaran barang yang dibeli pembelian
Sehubungan dengan masalah tersebut maka dapat membayar dengan mentransfer di bank
tujuan dari penelitian ini adalah untuk yang telah ditentukan.
membangun Aplikasi website dengan
menggunakan PHP dan MySQL. Teknologi Aplikasi Web
PENDEKATAN MASALAH Aplikasi Web adalah sebuah aplikasi

Studi Literatur yang menggunakan kemampuan webserver
Membangun sebuah website pada untuk memproses data dan mengirimkannya
akhir-akhir ini sudah banyak dilakukan, ke user melalui network/internet.
diantaranya adalah Katrin Yelina pada tahun
2007, merancang aplikasi Website E-
30
Vol.15 No.2. Agustus 2013 Jurnal Momentum ISSN : 1693-752X
Pengenalan PHP $b=5;

if($a>$b)
PHP adalah singkatan dari PHP {echo(“a lebih besar dari pada b”);}
Hypertext Preprocessor yang digunakan elseif {echo(“a lebih kecil dari pada b”);}
else {echo(“a sama dengan b”);}
sebagai bahasa script server-side dalam
?>
pengembangan web yang disisipkan pada
dokumen HTML.
Hasilnya adalah:
Gambar 1
PHP adalah bahasa scripting yang While

menyatu dengan HTML dan dijalankan pada
serverside. Artinya semua sintaks yang kita arti dari statement while adalah
berikan akan sepenuhnya dijalankan pada memberikan perintah untuk menjalankan
server sedangkan yang dikirimkan ke browser statement dibawahnya secara berulang-ulang
hanya hasilnya saja. syaratnya terpenuhi.
<HTML> <?
<Head> $a=1;
<Title> while($a<10)
</Title> {echo($a);
</Head> $a++;}
<Body> ?>
<?
echo “ hallo ,saya php “; Hasilnya sebagai berikut:
?>
</Body>
</HTML>
For
Gambar 2 Cara penulisan statement for adalah

sebagi berikut;
for (ekspresi1;ekspresi2;ekspresi3)
Struktur Kontrol <?
for($a=0;$a<10;Sa++)
IF {echo(“nilai A=”);
echo(“$a”);
Konstruksi IF digunakan untuk
echo(“<br>”);}?>
melakukan eksekusi suatu statement secara
bersyarat.
Hasilnya adalah sebagai berikut:
<?
$a=4;
31
<?
for($b=1;$b<5;$b++)
{include("11.php");}
?>
Switch
Statement switch digunakan untuk

beberapa nilai serta menjalankan statement
tertentu jika nilai variabel sama dengan nilai
yang dibandingkan.
<?
$a=2;
switch($a) Basis data (database)
{case 1: Basis data (database) adalah
echo(“Nilai variabel a adalah satu”); kumpulan dari berbagai data yang saling
break;
berhubungan satu dengan yang lainnya. Basis
case 2:
echo(“Nilai variabel a adalah dua”);
data tersimpan di perangkat keras, serta
break; dimanipulasi dengan menggunakan perangkat
case 3: lunak. Pendefinisian basis data meliputi
echo (“nilai variabel a adalah tiga”); spesifikasi dari tipe data, struktur dan batasan
break;} dari data atau informasi yang akan disimpan.
?>
Hasilnya adalah: Fungsi String
Fungsi string digunakan

memanipulasi string untuk berbagai macam
kebutuhan.
Jenjang Database
Terdiri dari database, file, record,
field dan karakter. Untuk lebih jelasnya dapat
dilihat dibawah ini :
Require
Statement Require digunakan untuk

membaca nilai variabel dan fungsi-fungsi dari
sebuah file lain.
Include
Statement Include akan menyertakan

isi suatu file tertentu. Include dapat diletakkan
didalam suatu looping misalkan dalam
statement for while.
<?
Normalisasi
echo(“-----------------------------------<br>”);
echo(“PHP adalah bahasa scripting<br>”);
echo(“----------------------------------<br>”); Normalisasi adalah suatu proses untuk
echo(“<br>”); mengubah suatu tabel yang memiliki masalah
?> tertentu ke dalam dua buah tabel atau lebih,
32
yang tidak lagi memiliki masalah tersebut Kelebihan dari Jquery yakni Write
(Abdul Kadir, 2002: 52). less, do more yaitu menyederhanakan
penggunaan javascript yang ada, karena kita
SQL dan MySQL cukup menggunakan fungsi library javascript
yang ada, juga mempercepat coding javascript
A. SQL (Structure Query Language) dalam sebuah website, dibandingkan kita
harus memulai sebuah script javascript satu
SQL (Structured Query Language) persatu.
adalah sebuah bahasa yang dipergunakan
untuk mengakses data dalam basis data JQuery Selector
relasional. Bahasa ini secara de facto
merupakan bahasa standar yang digunakan Selector adalah fungsi utama pada
dalam manajemen basis data relasional. jQuery. Semua fungsi di jQuery dapat diakses
melalui selector. Penggunaan paling dasarnya
B. MySQL adalah mempassingkan sebuah ekspressi
yang kemudian selanjutnya jQuery akan
mencari elemen yang cocok. Pada intinya ini
MySQL adalah sebuah sistem
manajemen database. Database adalah adalah fungsi untuk memilih elemen-elemen
sekumpulan data yang terstruktur. pada halaman web.
Kelebihan-kelebihan MySQL JQuery Manipulation

Jquery Manipulation digunakan untuk
Selain karena Open Source program, MySQL memanipulasi struktur dokumen. Ada
juga memiliki kelebihan kelebihan yang tak beberapa kategori manipulasi yang disupport
kalah bagusnya dengan Database Server oleh jquery yaitu Perubahan Content, kita
lainnya, seperti SQL server, Sybase bahkan dapat merubah kontent dari sebuah object
Oracle. dengan dua fungsi yaitu html dan text,
bedanya jika menggunakan text maka semua
Jquery tag-tag html akan dituliskan sebagai mana
mestinya.
JQuery adalah sebuah framework Contoh
berbasiskan Javascript. JQuery sama
denganJavascript Library yaitu kumpulan $("p").click(function () {
kode atau fungsi Javascript siap pakai, var htmlStr = $(this).html();
sehingga mempermudah dan mempercepat $(this).text(htmlStr);
kita dalam membuat kode Javascript. });
Hal yang menarik dari JQuery adalah
penekanan interaksi antara javascript dan Insert kedalam object. Setelah kita memilih
HTML. sebuah object, kita dapat memasukkan tab
html atau object kedalamnya. ada dua jenis
Beberapa kemampuan yang dimiliki insert yaitu append dan prepend. append
oleh JQuery sebagai berikut: menambahkan objek baru setelah value dari
object tersebut, sedangkan prepend
1. Memanipulasi elemen HTML didepannya.
2. Memanipulasi CSS Contoh
3. Penanganan event HTML
4. Efek-efek javascript dan animasi $("p").append("<strong>Hello</strong>");
5. Modifikasi HTML DOM $("span").appendTo("#conto"); // Objek dengan ID
6. AJAX conto akan dimasukkan kedalam span
$("p").prepend("<b>Hello </b>");
$("span").prependTo("#conto");
Kelebihan dan Kekurangan
33
Insert dikeluar object. Object yang akan ada Waktu penelitian dilaksanakan sekitar awal
tambahkan akan ada diluar masing-masing tag bulan Juni sampai September 2012.
yang dipilih.
Data didapat dengan cara wawancara yang
Contoh
dilakukan dengan karyawan toko handphone
$("p").before("<strong>Hello</strong>"); atau gerai selular, mengamati proses
$("p").after("<strong>Hello</strong>"); penjualan dan pembelian di toko tersebut dan
$("span").insertAfter("#conto"); mempelajari tentang penggunaan metode
$("span").beforeAfter("#conto"); AjaX.
Dalam mengumpulkan data penulis

Insert kesekitar object. menggunakan beberapa metode diantaranya:
Mereplace object. Kita dapat mengganti isi
dari object dengan syntax ini. 1. Penelitian Lapangan
Contoh Penelitian yang dilakukan dengan
$("button").click(function () { cara riset kelapangan untuk memperoleh
$(this).replaceWith("<div>" + $(this).text() + perbandingan praktek dan teori sehubungan
"</div>"); dengan sistem penjualan handphone dengan
}); dengan menggunakan bahasa pemrograman
PHPdan MySQL sebagai database, didukung
</div> dengan metode ajaX dan sedikit sentuhan
Menghapus object. kita dapat menhapus object
Jquery, serta penggunaan XAMPP sebagai
tertentu.
webserver
Contoh
$("button").click(function () { 2. Penelitian Kepustakaan
$("p").empty();
}); Penelitian kepustaan dilakukan
dengan cara membaca buku-buku atau
$("button").click(function () { literatur yang berhubungan dengan
$("p").remove(); pembahasan masalah.
});
</div>
3. Penelitian Laboratorium
Mengopi object. Mengopi object ke tempat
lain . Penelitian yang dilakukan secara
laboratorium dalam perancangan website
Contoh menggunakan metoda AjaX, bahasa PHP dan
MySQL serta XAMPP sebagai webserver.
$("b").clone().prependTo("p");
</div>
Untuk penjualan dan pembelian handphone
Metodologi Penelitian dipakai jenis komputer sebagai berkut: Laptop
coreTM i5-450 Prosesor 2.40GHz, memory
Pada perancangan website ini 2048MB, Mainboard Intel 2.4GHz, Harddisk
mencoba untuk melakukan eksperimen dalam 640 GB. Sedangkan Software yang digunakan
pembuatan Website dinamis yang mana adalah Sistem Operasi Windows 7 Ultimate,
nantinya akan digunakan untuk Microsoft Frontpage 2003, XAMPP, dan
mempermudah konsumen dalam dalam proses Browser Google Chrome.
pemesanan barang secara online. Penelitian
atau eksperimen untuk perancangan website Desain Perancangan Website
ini di lakukan pada toko selular di Sarolangun
tepatnya pada permata cell, khususnya pada Setelah dilakukan analisis kebutuhan
sistem penjualan dan pembelian handphone. terhadap sistempenjualan dan pembelian
handphone maka nantinya akan dirancang
34
suatu website untuk penjualan dan pembelian

handphone menggunakan bahasa
memrograman PHP, MySQL serta didukung
dengan metode AjaX dan Webserver XAMPP
untuk membantu dan mempermudah proses
penjualan dan pembelian handphone secara
cepat, tepat dan relevan. Untuk
menggambarkan alur kerja sistem secara
menyeluruh dapat diimplementasikan melalui
contex Diagram dan Data flow Diagram.
Context Diagram
Contex Diagram merupakan alat

bantu perancangan sistem secara global yang Membangun Database
memperlihatkan sistem secara umum dan
bagian-bagian dari subsistem yang terlibat Database akan dibangun
didalam sistem secara keseluruhan, menggunakan teknik normalisasi yang
keterkaitan dan interaksi antar subsistem. bertujuan untuk mengubah sebuah tabel yang
besar dan komplek menjadi beberapa buah
tabel-tabel yang lebih kecil. Database
digunakan sebagai penampung data-data yang
diinputkan untuk mendapatkan informasi yang
akan ditampilkan. Sebagai web yang interaktif
website yang dirancang ini dapat menampung
data costumer dan pemesanan barang.
Database yang digunakan dalam penelitian ini
adalah menggunakan database MySQL.
a. Database
Desain Penelitian Nama database adalah “dbtoko”.
Perintah membangun database :”Create
Design penelitian ini dimaksudkan database dbtoko;”
untuk memberikan gambaran bagaimana
bentuk dan model dari rancangan website b. Tabel
yang akan dibuat. Struktur menu website Penelitian ini menggunakan 11 tabel yaitu
penjualan dan pembelian handphone melalui tabel admins, banner, hubungi, kategori, kota,
menu utama memiliki sub-sub menu yang modul, orders, orders_detail, orders_temp,
berbeda atau tidak sama tergantung dari hak produk dan statistik.
akses mereka terhadap tabel-tabel dalam
database. HASIL DAN PEMBAHASAN
Membangun web Server
Desain interface
Aplikasi web berjalan pada protokol
Halaman utama/halaman index HTTP dan semua protokol yang ada
melibatkan server dan client. Membangun
Halaman ini merupakan halaman aplikasi web dibutuhkan sebuah server web,
utama atau awal ketika mengakses website ketika seseorang mengetik alamat di web
penjualan dan pembelian handphone. Pada browser maka browser akan mengirim
halaman ini terdapat menu-menu dan sub-sub perintah tersebut ke webserver. Webserver
menu untuk menuju halaman lain guna berguna sebagai tempat aplikasi web dan
melakukan transaksi atau keperluan lainnya. sebagai penerima request dari client.
Desain Halaman Web

35
Website Desain
Halaman web ini dibangun dengan

menggunakan Ms Frontpage 2003,
menggunakan script HTML dan PHP dengan
database MySQL. Berikut akan dijelaskan
pembuatan Web ini:
1. Design Editor
Manajemen Modul
Modul ini berfungsi untuk menambah
Untuk membangun halaman-halaman
dan menghapus modul bilamana modul
web, digunakan desain editor Ms Frontpage
tersebut dibutuhkan.
yang didalamnya disisipkan script PHP.
Dimana web ini dari beberapa halaman
diantaranya:
a. Halaman depan
Halaman depan ini merupakan
tampilan awal dari website yang terdiri dari
menu-menu dan sedikit animasi sebagai daya
tarik home page . Pada halaman depan ini
terdiri dari beberapa menu diantaranya, Modul produk digunakan oleh
Home, Profile, Semua Produk, Keranjang administrator dari pemilik toko untuk
belanja dan hubungi kami. menginputkan produk yang akan dijual.
Berikut adalah halaman input produk:
b. Halaman login
Halaman login ini berfungsi untuk
masuknya Administrator menambah barang
yang akan dijual.
Berikut ini adalah gambar dari halaman login.
Modul laporan berfungsi untuk

menampilkan order detil. Pada laporan
penjualan ini akan menampilkan pesanan dan
Ganti password yaitu modul yang barang-barang yang terjual terhadap
akan difungsikan untuk pergantian password. pelanggan yang sudah melakukan
Pada menu ini akan menangani administrator pembayaran.
yang ingin mengganti password yang sudah
tidak terasa aman bisa diganti menggunakan
modul ini.
36
Halaman ini akan menampilkan hasil

penjualan selama beberapa bulan ataupun
tahun terakhir seperti pada gambar dibawah
ini:
2. Programming
Halaman daftar produk berfungsi
untuk menampilkan produk yang sudah Untuk melakukan koneksi kedatabase
dan membangun form input dan laporan
diinputkan kedalam database. menggunakan scriptbahasa pemograman PHP
Berikut adalah tampilan dari daftar halaman yang akan diselipkan diantara HTML dari
design website yang sudah dibangun.
produk sesuai dari isi database.
a. Script untuk koneksi ke web server
$ con=mysql_connect(“localhost”,”root”,””)or
die(“koneksi gagal”);
dengan menggunakan perintah

“mysql_connect” maka web server akan
terhubung dan yang mengakses webserver
yaitu web lokal.
b. Script PHP untuk koneksi kedatabase

mysql_select_db(“dbtoko”,$con);
perintah dengan menggunakan
“mysql_select_db” akan menghubungkan
kedatabase, dan yang dipakai yaitu nama
database “dbtoko”.
Halaman ini berfungsi bagi konsumen Kesimpulan

yang akan melakukan transaksi pembelian
sebagai registrasi pertama. Berikut adalah Sistem penjualan handphone berbasis
gambar dari form registrasi pelanggan : Website merupakan salah satu sarana
pendukung yang tepat karena sistem ini
dirancang sebagai alat bantu yang tidak hanya
mampu menyediakan informasi produk,
namun juga untuk mengolah informasinya.
Aplikasi website untuk keperluan penjualan
handphone pada permata cellhone ini dapat
memberikan kemudahan dalam proses
transaksi, keakuratan informasi produk, dan
efisiensi waktuyang sangat menguntungkan
dalam proses transaksi.
37
Lukmanul Hakim, (2011), Trik dahsyat

DAFTAR PUSTAKA menguasai AJAX dengan Jquery, Yogyakarta:
Lokomedia.
Abdul Kadir, (2008), Dasar Pemrograman
Web dinamis menggunakan PHP, Riyanto, (2011), Membuat sendiri Sistem
Yogyakarta: Andi Offset. Informasi Penjualan Berbasis Web dengan
PHP dan PostgreSQL, Yogyakarta: Gava
Abdul Kadir, (2008), Tuntunan Praktis Media.
belajar Database menggunakan MySQL,
Yogyakarta: Andi Offset Wahana Komputer, (2009), Pengembangan
Aplikasi database, Semarang: Andi Offset.
Abdul Kadir, (2009), Mastering Ajax dan
PHP, Yogyakarta: Andi Offset. Yelina Katrin, (2007), Aplikasi website E-
commerces menggunakan PHP dan MySQL
Abdul latif (2008), Membangun Website E- untuk keperluan penjualan dan pembelian
commerces Berbasis PHP dan handphone: Padang.
MySQL:Semarang.
W3Schools.com
38

98 285 1 PB

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

98 285 1 PB

Uploaded by

Copyright:

Available Formats

Vol.15 No.2.

Agustus 2013 Jurnal Momentum ISSN : 1693-752X

REKAYASA WEB UNTUK PEMESANAN HANDPHONE

Indra Warman, M.Kom, Atma Zahni 

Keywords: online ordering, consument, Web

PENDEKATAN MASALAH Aplikasi Web adalah sebuah aplikasi

Pengenalan PHP $b=5;

PHP adalah bahasa scripting yang While

Gambar 2 Cara penulisan statement for adalah

Statement switch digunakan untuk

Fungsi string digunakan

Statement Require digunakan untuk

Statement Include akan menyertakan

Kelebihan-kelebihan MySQL JQuery Manipulation

Dalam mengumpulkan data penulis

suatu website untuk penjualan dan pembelian

Contex Diagram merupakan alat

Desain Halaman Web

Halaman web ini dibangun dengan

Modul laporan berfungsi untuk

Halaman ini akan menampilkan hasil

dengan menggunakan perintah

b. Script PHP untuk koneksi kedatabase

Halaman ini berfungsi bagi konsumen Kesimpulan

Lukmanul Hakim, (2011), Trik dahsyat

You might also like