RizkyListyoWibowo Ecommerce

MAKALAH
“PEMBUATAN TOKO BUKU BERBASIS E-COMMERCE”
Diajukan Sebagai Bahan Pertimbangan dalam Pengambilan Judul

Skripsi yang Akan Disusun Pada Tahap Selanjutnya
Diajukan Oleh :
Nama : Rizky Listyo Wibowo
NPM : 2017804239
Jurusan : Sistem Informasi
JURUSAN SISTEM INFORMASI

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN
KOMPUTER
INSAN PEMBANGUNAN TANGERANG
TAHUN 2020
KATA PENGANTAR
Puji dan Syukur penulis panjatkan kepada Allah SWT, karena atas berkat
rahmat dan karunia-Nya, serta doa restu dan dorongan dari berbagai pihak,
sehingga penulis dapat menyelesaikan Penulisan Makalah ini dengan judul
“PEMBUATAN WEBSITE ECOMMERCE GIIESZ STORE
MENGGUNAKAN PHP DAN MYSQL”. Adapun Penulisan makalah ini
disusun guna melengkapi sebagian syarat untuk mencapai gelar Sarjana Komputer
pada Sekolah Tinggi Manajemen Informatika dan Komputer.
Penulis mengucapkan terima kasih dan penghargaan setinggi – tingginya
atas segala dukungan, bimbingan, pengarahan, dan bantuan kepada penulis,
sehingga penulisan ini dapat diselesaikan. Ucapan terima kasih penulis sampaikan
kepada berbagai pihak, terutama kepada :
1. H. Soebari Hadi Prayitno selaku Ketua Yayasan Pendidikan Insan
Pembangunan.
2. Prof. Dr. Rer. Nat. Achmad Benny Mutiara, SSi., SKom, selaku Ketua
Sekolah Tinggi Manajemen Informatika dan Komputer.
3. Nurasiah, S.Kom, MMSI, selaku Ketua Jurusan Sistem Informasi, Sekolah
Tinggi Manajemen Informatika dan Komputer.
4. Bapak Sulisno dan Ibu Rosiana selaku kedua orang tua penulis dan
Faiztian Latiffatul Rohman, Febyna Azizatul Latifa selaku adik penulis,
yang telah memberikan dukungan semangat, bantuan moral dan materi,
serta doa sehingga penulis dapat menyelesaikan Penulisan Ilmiah ini.
5. Aida Fitri Yanah selaku teman penulis yang telah memberikan semangat
dan motivasi kepada penulis, serta membantu dalam mengarahkan
penulisan yang baik dan benar.
6. Teman – teman dari kelas SI 7D angkatan 2017 yang telah memberikan
bantuan dan berjuang bersama dalam proses pembuatan Penulisan Ilmiah
ini.
7. Semua Pihak yang tidak dapat penulis sebutkan, atas bantuan, kritik, saran,
arahan, dan bimbingannya yang telah diberikan kepada penulis.
Semoga Allah SWT melimpahkan berkah dan rahmat-Nya kepada

Semua pihak tersebut atas segala bantuan dan bimbingannya yang telah
diberikan kepada penulis. Sebagai manusia biasa yang tak luput dari
kesalahan, maka penulis meminta maaf atas segala kekurangan dan
keterbatasan dalam penyusunan Penulisan Ilmiah ini.
Penulis menyadari bahwa penulisan ini masih kurang dan jauh dari
kata sempurna, oleh karena itu penulis sangat mengharapkan kritik dan
saran yang bersifat membangun baik untuk penulisan ini maupun untuk
penulis sendiri. Semoga apa yang ada pada Penulisan Ilmiah ini dapat
bermanfaat bagi kita semua, Aamiin.
Tangerang, 5 Desember 2020
Penulis
DAFTAR ISI
Hal
Halaman Judul i
Kata Pengantar ii
Daftar Isi viii
Daftar Tabel xi
Daftar Gambar xiii
1 PENDAHULUAN
1.1 Latar Belakang
1.2 Ruang Lingkup
1.3 Tujuan Penulisan
1.4 Metode Penulisan
1.5 Sistematika Penulisan
2 LANDASAN TEORI
2.1 Web
2.2 HTML (Hypertext Markup Language)
2.2.1 Tag – Tag HTML
2.2.2 Struktur Dokumen HTML
2.3 PHP (Personal Home Page)
2.3.1 Cara Kerja PHP
2.3.2 Variable dalam PHP
2.3.3 Operator pada PHP
2.4 DBMS (Database Management System)
2.5 MySQL
2.5.1 Elemen SQL
2.6 Notasi Unified Modelling Language (UML)
2.6.1 Diagram UML
2.7 Struktur Navigasi
2.8 Pengenalan Adobe Dreamweaver
2.8.1 Komponen Ruang Kerja
2.8.1.1 Menu Utama / Baris Menu
2.8.1.2 Baris Toolbar Dokumen / Document Toolbar
2.8.1.3 Property Inspector / Set Properties
2.9 Ecommerce
2.9.1 Jenis – Jenis Ecommerce
3 PEMBAHASAN
3.2 Perancangan Halaman
3.3 Pembuatan Halaman Web
3.4 Perancangan Database
3.4.1 Diagram Class
3.4.2 Struktur Tabel
3.4.2.3 Tabel Registrasi
3.4.2.4 Tabel Pemesanan
3.4.2.5 Tabel Produk Pembayaran
3.4.2.6 Tabel Order
3.5 Pembuatan Database Dalam MySQL
3.6 Uji Coba Black Box
3.7 Proses Upload
4 PENUTUP
4.1 Kesimpulan
4.2 Saran
DAFTAR PUSTAKA
LAMPIRAN LISTING PROGRAM
LAMPIRAN OUTPUT PROGRAM
DAFTAR GAMBAR
Hal
Gambar 2.1 Macam – macam Simbol Class Diagram dan Fungsinya
Gambar 2.2 Icon – Icon pada Toolbar Dokumen
Gambar 3.1 Tabel Registrasi
Gambar 3.2 Tabel Pemesanan
Gambar 3.3 Tabel Pembayaran
Gambar 3.4 Tabel Order
Gambar 3.5 Tabel Produk Khanza
Gambar 3.6 Tabel Produk Sakina
Gambar 3.7 Tabel Produk Segiempat
Gambar 3.8 Tabel Produk Zizi
Gambar 3.9 Tabel Produk Salma
Gambar 3.10 Tabel Uji Coba Blackbox
1. PENDAHULUAN
1.1 Latar Belakang
Electronic Commerce (E-Commerce) merupakan salah satu contoh produk

dari kemajuan teknologi informasi. Transaksi bisnis pada e-commerce tidak
lagi dilakukan secara konvensional yang mengharuskan pembeli berinteraksi
langsung dengan penjual (secara fisik). Atau adanya keharusan menggunakan
uang tunai (Cash). Dengan e-commerce telah banyak mengubah dalam proses
jual beli. Jika dalam suatu jual beli penjual dan pembeli bertemu, namun jika
dengan e-commerce mereka tidak perlu bertemu. Mereka berinteraksi dengan
melalui internet maupun dengan komunikasi melalui telepon atau chatting.
Dalam proses ini kepercayaanlah yang menjadi modal utama.
Melihat pangsa pasar, peluang serta kemudahan yang dihadirkan oleh sistem
penjualan online, penulis berencana membuat sistem dan menjajaki pasar
online yang sekarang makin digemari oleh masyarakat terutama kalangan
menengah keatas khususnya untuk wanita muslimah yang menggunakan
hijab. Beberapa perusahaan saat ini banyak yang memanfaatkan internet
untuk mempromosikan produk dan pemrosesan transaksi melalui media
internet. Hal ini dilakukan untuk memaksimalkan penjualan produk,
teknologi ini dikenal dengan nama e-commerce. Dalam hal ini dikarenakan
bahwa informasi yang dihadirkan melalui teknologi komputer e-commerce
lebih diminati oleh masyarakat daripada informasi yang disampaikan melalui
media lainnya, karena selain dapat memberikan informasi yang cepat dan
akurat, dan informasi yang dihadirkan melalui komputer tampilannya lebih
menarik, interaktif, dan lebih menghibur.
Salah satu bidang yang banyak mengusut penjualan hijab ini berdiri sejak
tahun 2016, Gieszz Store sendiri awalnya hanyalah online shop yang hanya
mengandalkan media social yaitu instagram. Seiring berjalannya waktu
Gieszz Store terus berkembang dan memproduksi barang dan menyetok
barang yang disimpan dalam sebuah rumah. Gieszz Store itu menjual
berbagai hijab-hijab wanita. Untuk meningkatkan suatu pendapatan yang
lebih dari sebelumnya dan membuat para pembeli setia Gieszz Store
merasakan kemudahan berbelanja di Gieszz Store maka dibuat website. Dari
perusahaan tersebut maka akan dikembangkan sebuah website toko online
dan penulis berusaha mengimplementasikan sistem tersebut kedalam bentuk
skripsi dengan judul “Pembuatan Website E-Commerce diGieszz Store
menggunakan PHP dan MySQL”. Dalam penulisan ilmiah ini untuk
membuat suatu database pada website ini menggunakan MySQL, dan bahasa
pemrograman PHP.
1.2 Ruang Lingkup

Dalam penulisan ilmiah ini, akan membuat website yang didalamnya
berisikan suatu informasi produk – produk yang akan dijual meliputi hijab –
hijab wanita, dan melakukan transaksi pemesanan produk tersebut. Pada
website ini terdapat halaman user dan halaman admin. Pada halaman website
user terdapat sebuah halaman daftar, halaman login, halaman lihat katalog,
halaman proses transaksi, dan halaman selesai pemesanan. Pada halaman
website admin terdapat halaman untuk update stock barang, halaman untuk
melihat riwayat pembayaran, dan halaman untuk melihat data transaksi
pembelian.
1.3 Tujuan Penulisan

Tujuan dari penulisan ini adalah membangun suatu website untuk Gieszz
Store yang memudahkan para customer melakukan pembelian secara online
berbasis website.
1.4 Metode Penulisan

Dalam penulisan ilmiah ini, penulis menggunakan metode penulisan yaitu :
1. Metode pertama yang digunakan penulis yaitu perencanaan.
Penulis merencanakan pembuatan website e-commerce pada Gieszz
Store, bertujuan agar para customer dan pelanggan Gieszz Store mudah
dalam melakukan pembelian secara online.
2. Dalam metode analisa ini, penulis mengumpulkan informasi dan
menganalisa dengan cara mempelajari buku – buku serta literature –
literature yang berhubungan dengan pembahasan dalam penulisan ini.
3. Dalam perancangan website ini terdapat suatu struktur navigasi,
rancangan tampilan website, diagram class dan struktur tabel
4. Pengimplementasian pada website ini menggunakan suatu editor yaitu
Adobe Dreamweaver CS5 dalam pembuatan design website, pembuatan
database menggunakan MySQL serta menggunakan bahasa
pemrograman PHP
5. Uji coba website yang telah dibuat agar dapat ditampilkan melalui
browser dengan menggunakan server Apache yang terdapat pada Xampp
1.5 Sistematika Penulisan

Guna memberikan gambaran singkat dan memudahkan pembahasan dalam
memahami isi dari penulisan ilmiah ini, penulis membuat sistematika
penulisan tersusun :
BAB 1 PENDAHULUAN
Dalam bab ini berisi latar belakang masalah, batasan masalah, tujuan
penulisan, metode penelitian dan sistematika penulisan.
BAB II LANDASAN TEORI

Dalam bab ini berisikan tentang teori – teori dasar yang mendukung atau
berhubungan dengan penulisan antara lain ruang lingkup tentang internet,
mengenal Adobe Dreamweaver CS5 dan MySQL yang membahas ruang
kerja beserta fungsi – fungsinya.
BAB III PERANCANGAN APLIKASI

Dalam bab ini menggambarakan tentang cara atau tahapan – tahapan
membuat suatu website e-commerce pada Gieszz Store secara runcu
dengan menggunakan fasilitas yang telah disediakan oleh Adobe
Dreamweaver CS5 dan MySQL.
BAB IV PENUTUP
Dalam bab ini berisi kesimpulan yang diperoleh dari penulisan skripsi ini
dan saran – saran untuk mengembangkan program ini lebih lanjut.
2. LANDASAN TEORI
Sistem Informasi adalah kombinasi dari teknologi informasi dan aktivitas
orang yang menggunakan teknologi itu untuk mendukung operai dan
manajemen. Dalam arti yang sangat luas, istilah sistem informasi yang
sering digunakan merujuk kepada interaksi antara orang., proses
algoritmik, data, dan teknologi. Dalam pengertian ini, istilah ini
digunakan untuk merujuk tidak hanya pada penggunaan organisasi
teknologi informasi dan komunikasi ( TIK ), tetapi juga untuk cara
dimana orang berinteraksi dengan teknologi ini dalam mendukung proses
bisnis
Internet atau interconnection-networking adalah seluruh jaringan

komputer yang saling terhubung menggunakan standar
sistemglobaltransmission control protocol/internet protocol suite
(TCP/IP) sebagai protocol pertukaran paket switching communication
protocol untuk melayani miliaran pengguna diseluruh dunia. Rangkaian
dengan kaidah ini dinamakan internetworking atau antar jaringan.
World Wide Web (WWW) memudahkan pemakaian internet, sebuah

jaringan komputer yang dibuat akhir tahun 1960, pada mulanya, internet
mengharuskan kita mempelajari banyak perintah yang sukar, tidak hanya
untuk memakainya tapi juga untuk mendapatkan data dari komputer –
komputer yang terhubung ke internet.
Namun demikian, pada tahun 1992, Tim Bernes-Lee dan peneliti hanya
memperkenalkan Web, yang memungkinkan pemakai “menjelajahi”
internet tanpa perlu mengetahui perintah – perintah yang rumit. Tahun –
tahun berikutnya, Web Browser seperti Microsoft Internet Explorer,
Mozila firefox dan lain- lain menjadikan Web lebih mudah dan lebih
berdayaguna.
2.1 WEB
Situs web (bahasa inggris : website) adalah suatu halaman web yang saling
berhbungan yang umumnya berada pada peladen yang sama berisikan
kumpulan informasi yang disediakan secara perorangan, kelompok, atau
organisasi. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah
server web yang dapat diakses melalui jaringan seerti internet, ataupun
jaringan wilayah local (LAN) melalui alamat internet yang dikenali sebagai
URL. Gabungan atas semua situs yang dapat diakse public diinternet disebut
pula sebagai World Wide Web (WWW). Meskipun setidaknya halaman
beranda situs internet umumnya dapat diakses public secara bebas, pada
praktiknya tidak semua situ memberikan kebebasan bagi public untuk
mengaksesnya, beberapa situs web mewajibkan pengunjung untuk
melakukan pendaftaran sebagai anggota atau bahkan meminta pembayaran
untuk dapat menjadi anggota untuk dapat mengakses isi yang terdapat dalam
situs web tersebut. Misalnya situs – situs yang menampilka pornografi, situs
– situs berita, layanan surel (email) , dan lain –lain. Pembatasan –
pembatasan ini umumnya dilakukan karena alsan keamanan, menghormat
privasi atau karena tujuan komersial tertentu.
Halaman – halaman web tersebut diakses oleh pungguna melalui protokol

komunikasi jaringan yang disebut HTTP, sebagai tambahan untuk
meningkatkan aspek keamanan dan aspek privasi yang lebih baik, situs web
dapat pula mengimplementasikan mekanisme pengaksesan melalui protocol
HTTPS.
2.2 HTML ( Hypertext Markup Language )

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai
informasi didalam sebuah penjelajah web internet dan pemformatan
hypertext sederhana yang ditulis dalam berkas format ASCII agar dapat
menghasilkan tampilan wujud yang terintegrasi. Dengan kata lain, berkas
yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format
ASCII normal sehingga menjadi halaman web dengan perintah – perintah
HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan
didunia peerbitan dan percetakan yang disebut dengan SGML (Standard
Generalized Markup Laguage) , HTML adalah sebuah standar yang
digunakan secara luas untuk menampilkan halaman web. HTML saat ini
merupakan standar internet yang didefinisikan dan dikendalikan
penggunaanya oleh World Wide Web Consortium (W3C). HTML dibuat oleh
kolaborasi Cailau TIM dengan Berners-lee Robert ketika mereka bekerja di
CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energy
tinggi di Jenewa).
2.2.1 Tag – Tag HTML

Tag – tag yang terdapat dalam HTML, diantaranya :
<HTML>...</HTML> Menandai akhir dan awal dokumen
HTML
<HEAD>..</HEAD> Berisi berbagai informasi dokumen
HTML
<TITLE>..</TITLE> Membuat judul, dienpatkan pada
bagian HEAD
<BODY>..</BODY> Berisi semua format yang akan
ditampilkan pada browser
<H1>..</H1> Membuat heading dengan level 1
<H6>..</H6> Membuat heading dari evel 1
sampai 6
<LINK>..</LINK> Dipergunakan untuk
menghubungkan halaman dengan
objek lain
<FRAME>..</FRAME> Membuat frame / bingkai
<TR>..</TR> Membuat baris suatu tabel
2.2.2 Struktur Dokumen HTML
Secara sederhana HTML, terdiri dari dua bagian yaitu header dan
body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir
</HTML>. Standar penulisannya adalah :
<HTML>
<HEAD>
Deskripsi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
2.3 PHP (Personal Home Page)

Kelahiran PHP bermula saat Rasmus Lerdorf membuat sejumlah skrip perl
yang dapat mengamati siapa saja yang melihat – lihat daftar riwayat
hidupnya, yakni pada tahun 1994. Skrip – skrip ini selanjutnya dikemas
menjadi tool yang disebut “Personal Home Page”, paket inilah yang menjadi
cikal bakal PHP pada tahun 1995, Rasmus menciptkan PHP/F1 Versi2 , PHP
dapat berkomunikasi dengan database dan melakukan perhitungan –
perhitungan yang kompleks. Jadi, PHP adalah bahasa server-sidde scripting
yang menyatu dengan bahasa pemrograman HTML. Maksud dari server-side
scripting adalah sintaks dari perintah – perintah yang diberikan akan
sepenuhnya dijalankan deserver tetapi disertakan pada dokumen HTML.
Selain itu, PHP merupakan software yang mampu lintas yaitu dapat
digunakan dengan sistem operasi dan web server apapun, PHP dapat
dikoneksikan dengan beberapa basis data, antara lain Oracle, Sybase, mSQL,
MySQL dan lain – lain. PHP mengenal beberapa tipe data, antara lain
integer, floating dan string. Adalah bahasa pemrograman script server side
yang didesain untuk pengembangan web. Dimana PHP ini merupakan
singkatan dari Hypertext Processor yang digunakan sebagai script untuk
memeprindah tampilan website. Selain itu PHP juga digunakan bersamaan
dengan bahasa pemrograman lainnya seperti bahasa pemrograman HTML,
dan JavaScript.
2.3.1 Cara Kerja PHP

Seperti dijelaskan diatas, PHP singkatan dari Personal Home Page,
yang merupakan bahasa berbentuk skrip yang ditempatkan didalam
server, ketika berkas PHP yang diminta didapatkan oleh web server,
isinya segera dikirimkan ke mesin PHP dan mesin inilah yang
memproses dan memberikan hasilnya (berupa kode HTML) ke web
server. Selanjutnya, web server menyampaikan ke klien.
2.3.2 Variable dalam PHP

Variable adalah sebuah tempat di memori untuk menyimpan data
yang nilainya dapat berubah – ubah. Variable dalam PHP tidak harus
dideklarasikan sebelum variable tersebut digunakan. Variable
diwakili oleh kata tertentu dengan aturan penulisan sebagai berikut :
# Variable dimulai dengan tanda dollar ($)
# Harus dimulai dengan huruf atau underscore (_)
# Tidak boleh menggunakan tanda baca
# Case sensitive atau huruf besar dan huruf kecil dibedakan
2.3.3 Operator pada PHP

Operator adalah symbol yang digunakan untuk memanipulasi data,
seperti penambahan dan pengurangan. Ada operator yang
menggunakan satu operand dan dua operand. Sedangkan yang
dimaksud dengan operand adalah data yang dioperasikan atau
dimanipulasi. Operand dapat digantikan dengan variable. Operator
dikelompokkan ke dalam 4 kategori, yaitu :
 Operator aritmatika adalah operator yang berhubungan
dengan fungsi matematika
 Operator logika adalah operator yang membandingkan
TRUE dan FALSE
 Operator bitwise adalah operator yang membandingkan
binary
 Operator lain yang sering digunakan tetapi tidak termasuk
dalam kelompok diatas.
2.4 DBMS (Database Management System)

DBMS merupakan perantara bagi pemakai dengan basis data. Untuk
berinteraksi dengan DBMS (basis data) menggunakan bahasa basis data yang
telah ditentukan oleh perusahaan DBMS. Bahasa basis data biasanya terdiri
atas perintah – perintah yang diformulasikan sehingga perintah tersebut akan
diproses oleh DBMS. Perintah – perintah biasanya ditentukan oleh user. Ada
2 bahasa basis data.
1. Data Definition Language (DDL)

DDL digunakan untuk menggambarkan desain basis data secara
keseluruhan. DDL digunakan untuk membuat tabel baru, memuat indeks,
ataupun mengubah tabel. Hasil kompilasi DDL disimpan di kaus data.
2. Data Manipulation Language (DML)

DML digunakan untuk melakukan manipulasi dan pengambilan data
apada suatu basis data seperti penambahan data baru ke dalam basis,
menghapus data dari suatu basis data dan pengubahan data di suatu basis
data.
Dalam pembuatan DBMS diperlukan bebarapa komponen fungsional
penyusunnya sebagai berikut :
1. DML Precompiler
Mengkonversi pernyataan – prnyataan DML yang dimasukkan di
dalam program aplikasi ke dalam pemanggilan prosedur normal di
dalam bahasa induknya. Precompiler harus berinteraksi dengan query
processor untuk membuat kode – kode yang diperlukan.
2. Query Processor
Menterjemahkan pernyataan – pernyataan bahasa query ke dalam
instruksi – instruksi low level yang dimengerti oleh database
manager.
3. DDL Compiler
Mengkonversi pernyataan DDL ke dalam sekumpulan table yang
mengandung metadata atau data mengenai data
4. Database Manager
Menyediakan interface antara data low level yang disimpan didalam
basis data dengan program – program aplikasi dan queries yang
dikirimkan ke system
Salah satu tujuan dari DBMS adalah memberikan tampilan kepada

pengguna dalam hal menyampaikan data. Untuk itu dalam DBMS
terdapat Level Abstraksi Data. Level ini berguna untuk menyembunyikan
detail atau kompleksitasnya basis data seperti bagaimana data disimpan
dan diolah. Sehingga pengguna hanya melihat tampilan yang dibutuhkan
oleh pengguna.
1. Level Fisik
Level fisik merupakan level yang paling bawah. Pada level ini
memperlihatkan bagaimana sesungguhnya data disimpan.
2. Level Konseptual
Level ini menggambarkan bagaimana sebenarnya basis data
disimpan dan berhubungan dengan data lainnya.
3. Level View
Level abstraksi ini menunjukkan sebagian dari basis data. Pada umumnya
pengguna tidak melibatkan secara langsung sehingga pengguna hanya
melihat data sesuai dengan yang dibutuhkan
2.5 MySQL
MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL
(DBMS) yang multithread, dan multiuser. MySQL adalah implementasi dari
system manajemen basis data relasional (RDBMS). MySQL dibuat oleh TeX
dan telah dipercaya mengelola sistem dengan 40 buah database berisi 10.000
tabel dan 500 di antaranya memiliki 7 juta baris.
MySQL AB emerupakan perusahaan komersial Swedia yang mensponsori
dan yang memiliki MySQL. Pendiri MySQL AB adalah dua orang Swedia
yang bernama David Axmark, Allah Larson dan satu orang Finlandia
bernama Michael “Monty”. Setiap pengguna MySQL dapat menggunakannya
secara bebas yang didistribusikan gratis dibawah lisensi GPL (General Public
License) namun tidak boleh menjadikan produk turunan yang bersifat
komersial.
Pada saat ini MySQL merupakan database server yang sangat terkenal di
dunia, semua itu tak lain karena bahasa dasar yang digunakan untuk
mengakses database yaitu SQL. SQL (Structured Query Language) pertama
kali diterapkan pada sebuah proyek riset pada laboratorium riset San Jose.
IBM yang bernama system R. Kemudian SQL juga dikembangkan oleh
Oracle, Informix dan Sybase. Dengan menggunakan SQL, proses
pengaksesan database lebih user friendly dbandingkan dengan yang lain,
misalnya dBase atau Clipper karena mereka masih menggunakan perintah –
perintah pemrograman murni.
SQL dapat digunakan secara berdiri sendiri maupun di lekatkan pada bahasa
pemrograman seperti C dan Delphi.
2.5.1 Elemen SQL
Elemen dari SQL yang paling dasar antara lain pernyataan, nama,
tipe data, ekspresi, konstanta dan fungsi bawaan.
 Pernyataan
Perintah dari SQL yang digunakan untuk meminta sebuah
tindakan kepada DBMS.
Pernyataan dasar SQL antara lain :

- ALTER : merubah struktur tabel
- COMMIT : mengakhiri eksekusi transaksi
- CREATE : membuat tabel indeks
- DELETE : menghapus baris pada sebuah tabel
- DROP : menghapus tabel, indeks
- GRANT : menugaskan hak terhadap basis data kepada user
- INSERT : menambah baris pada tabel
- REVOKE : membatalkan hak kepada basis data
- ROLLBACK : mengembalikan pada keadaan semula apabila
transaksi gagal dilaksanakan
- SELECT : memilih baris dan kolom pada sebuah tabel
- UPDATE : mengubah value pada baris sebuah tabel
 Nama
Nama digunakan sebagai identitas, yaitu identitas bagi objek
pada DBMS.
Misal : tabel , kolom dan pengguna
 Tipe Data
Tipe data yang ada dalam MySQL :
1. Tipe data numeric antara lain :

- TINYINT : Nilai integer yang snagat kecil
- SMALLINT : Nilai integer yang kecil
- MEDIUMINT : Nilai integer yang sedang
- INT : Nilai integer dengan nilai standar
- BEGINT : Nilai integer dengan nilai besar
- FLOAT : Bilangan decimal dengan single-
precission
- DOUBLE : Bilangan decimal dengan double -
precission
- DECIMAL (M,D) : Bilangan float yang dinyatakan sebagai
string, M : jumlah digit yang

disimpan, D : jumlah angka
dibelakang koma
2. Tipe data string antara lain :
- CHAR : Karakter yang memiliki panjang tetap
yaitu sebanyak n
- VARCHAR : Karakter yang memiliki panjang tidak
tetap yaitu maksimum n
- TINYBLOB : BLOB dengan ukuran sangat kecil
- BLOB : BLOB yang memiliki ukuran kecil
- MEDIUM BLOB : BLOB yang memiliki ukuran sedang
- LONG BLOB : BLOB yang memiliki ukuran besar
- TINY TEXT : Teks dengan ukuran sangat kecil
- TEXT : Teks yang memiliki ukuran kecil
- MEDIUM TEXT : Teks yang memiliki ukuran sedang
- LONG TEXT : Teks yang memiliki ukuran besar
- ENUM : Kolom diisi dengan satu member
enumerasi
- SET : Kolom dapat diisi dengan beberapa
nilai anggota himpunan
3. Tipe data tunggal dan jam :

- DATE : Date memiliki format tahun – bulan -
tanggal
- TIME : Time memiliki format jam – menit -
detik
- DATE TIME : Gabungan dari format date dan time
 Ekspresi
Ekspresi digunakan untuk menghasilkan / mengitung nilai
Misalnya : jumlah = harga – diskon
Ekspresi aritmatika antara lain :

1. + : tambah
2. - : kurang
3. / : bagi
4. * : kali
 Konstanta
Nilai yang tetap
 Fungsi bawaan
Fungsi adalah subprogram yang dapat menghasilkan suatu nilai
apabila fungsi tersebut dipanggil. Fungsi agregat adalah fungsi
yang digunakan untuk melakukan summary, statistic yang
dilakukan pada suatu tabel / query.
1. AVG(ekspresi) : digunakan untuk mencari rata – rata

dalam kolom dari tabel
2. COUNT(x) : digunakan untuk menghitung jumlah
baris dari sebuah kolom dari tabel
3. MAX(ekspresi) : digunakan untuk mencari nilai yang
paling besar dari suatu kolom dari tabel
4. MIN(ekspresi) : digunakan untuk mencari nilai yang
paling kecil dari suatu kolom dari tabel
5. SUM(ekspresi) : digunakan untuk menghitung jumlah
keseluruhan dari suatu kolom dari tabel
2.6 Notasi Unified Modelling Language (UML)

Unified Modelling Language (UML) adalah notasi yang lengkap untuk
membuat visualisasi model suatu sistem. Sistem berisi informasi dan fungsi,
tetapi secara normal digunakan untuk memodelkan sistem komputer. Di
dalam pemodelan obyek guna menyajikan sistem yang berorientasi pada
objek pada orang lain. Akan sulit dilakukan jika pemodelan tersebut
dilakukan dalam bentuk kode bahasa pemrograman. Kesulitan yang muncul
adalah timbulnya ketidakjelasan dan salah interpretasi di dalam pembacaan
kode pemrograman untuk pemodelan objek tersebut.
2.6.1 Diagram UML
UML merupakan sintaks untuk membuat model logika dari suatu
sistem dan digunakan untuk menggambarkan sistem agar dapat
dipahami selama fase analisis dan desain. UML biasanya disajikan
dalam bentuk diagram / gambar yang meliputi class beserta atribut
dan operasinya, serta hubungan antar class yang meliputi inheritance,
association dan komposisi. Dibawah ini pengertian diagram UML
yang digunakan.
 Class Diagram
Class diagram memperlihatkan hubungan antar class dan
penjelasan detail tiap – tiap kelas didalam model desain dari
suatu sistem. Class menggambarkan keadaan (attribute/property)
suatu sistem, sekaligus menawarkan layanan untuk memanipulasi
keadaan tersebut (metode/fungsi). Symbol Class Diagram dan
Fungsinya dapat dilihat pada table 2.1
Simbol Nama Fungsi
Simbol
Class Blok – blok
pembangun
pada program
berorientasi
obyek. Sebuah
class
digambarkan
sebagai sebuah
kotak yang
terbagi atas 3
bagian. Bagian
atas adalah
bagian nama
dari class.
Bagian tengah
mendefinisikan
property/atribut
class. Bagian
akhir
mendefinisikan
method –
method dari
sebuah class.
Association Sebuah asosiasi
merupakan
sebuah
relationship
paling umum
antara 2 class
dan
dilambangkan
oleh sebuah
garis yang
menghubungka
n antara 2 class.
Garis ini bisa
melambangkan
tipe – tipe
relationship dan
juga dapat
menampilkan
hokum – hokum
multiplisitas
pada sebuah
relationship.
(Contoh : One-
to-one, one-to-
many, many-to-
many).
Compositio Jika sebuah
n class tidak bisa
berdiri sendiri
dan harus
merupakan
bagian dari
class yang lain,
maka class
tersebut
memiliki relasi
Composition
terhadap class
tempat dia
bergantung
tersebut. Sebuah
relationship
composition
digambarkan
sebagai garis
dengan ujung
berbentuk
jajaran genjang
berisi / solid
Depedency Kadangkala
sebuah class
menggunakan
class yang lain.
Hal ini disebut
dependency.
Umumnya
penggunaan
dependency
digunakan
untuk
menunjukkan
operasi pada
suatu class yang
mengunakan
class yang lain.
Sebuah
dependency
dilambangkan
sebagai sebuah
panah bertitik –
titik.
Aggregation Relasi antar
kelas dengan
makna semua
bagian (whole-
part)

Struktur navigasi adalah struktur atau alur dari suatu program. Menentukan
struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat
suatu aplikasi. Ada 4 (empat) macam bentuk dari struktur navigasi yang biasa
digunakan dalam proses pembuatan aplikasi, yaitu :
1.) Linier : pemakai menelusuri program secara berurutan. Struktur navigasi
linier dapat dilihat pada gambar 2.1
Gambar 2.1 Struktur Navigasi Linier

2.) Hirarki : pemakai menelusuri program melalui titik – titik percabangan
dari suatu struktur pohon. Struktur navigasi hirarki dapat dilihat pada
gambar 2.2
Gambar 2.2 Struktur Navigasi Hirarki

3.) Non Linier : pemakai bebas menelusuri program tanpa dibatasi oleh
suatu rute. Struktur navigasi non linier dapat dilihat pada gambar 2.3
Gambar 2.3 Struktur Navigasi Non Linier

4.) Campuran : pemakai dapat dengan bebas menelusuri program, tetapi
pada bagian tertentu gerakan dibatasi secara hirarki ataupun linier.
Struktur navigasi linier campuran dapat dilihat pada gambar 2.4
Gambar 2.4 Struktur Navigasi Campuran (Composite)
2.8 Pengenalan Adobe Dreamweaver

Adobe Dreamweaver merupakan program penyunting halaman web keluaran
Adobe System yang dulu dikenal sebagai Macromedia Dreamweaver
keluaran Macromedia. Program ini banyak digunakan oleh pengembang web
karena fitur – fiturnya yang menarik dan kemudahan penggunaannya. Versi
terakhir Macromedia Freamweaver sebelum Macromedia dibeli oleh Adobe
Systems yaitu versi 8. Vaersi terakhir Dreamweaver keluaran Adobe System
adalah versi 12 yang ada dalam Adobe Creative Cloud (sering disingkat
Adobe Cc).
2.8.1 Komponen Ruang Kerja

Supaya dapat terbiasa dan mengerti ruang kerja Adobe Dreamweaver
CS6, dapat diperhatikan gambar diatas dimana pada gambar tersebut
terdapat komponen – komponen yang membentuk ruang kerja.
2.8.1.1 Menu Utama / Baris Menu

Sistem menu yang terdapat pada Adobe Dreamweaver CS6
sangat sederhana dan mudah untuk dipahami karena perintah
yang terdapat pada hamper sebagian besar fungsi menu terdapat
juga dalam panel. Menu – menu yang terdapat di dalam Adobe
Dreamweaver CS6, yaitu :
1.) Menu File dan Menu Edit

Menu utama ini berisi item menu standar untuk menu
File,Edit dan lain – lain. Conothnya seperti new, open,
source, cut, paste, undo, redo dan lain – lain. Selain itu,
dalam menu file terdiri dari beberapa macam perintah untuk
menampilkan atau memperlakukan dokumen baru.
2.) Menu View

Berisi perintah untuk menampilkan beberapa macam
tampilan dari dokumen (seperti tampilan Design View dan
tampilan Code) dan untuk menampilkan dan
menyembunyikan beberapa elemen halaman dan tombol –
tombol dreamweaver dan toolbar.
3.) Menu Insert

Berisikan alternative baris insert untuk menyisipkan obyek di
dalam dokumen.
4.) Menu Modify

Berfungsi untuk melakukan perubahan property pada item
atau halaman terpilih. Dengan menggunakan menu ini,
pengguna dapat megedit atribut tag, mengganti tabel dan
elemen tabel, serta bermacam – macam bentuk aksi untuk ite
library dan template.
5.) Menu Format

Berfungsi untuk mempermudah dalam melakuka format teks.
6.) Menu Commands

Berisi akses ke beberapa perintah, format kode yang sesuai
dengan format pilihan yang diinginkan, membuat foto
album, dan melakukan pengeditan gambar.
7.) Menu Site

Berisi item menu untuk mengelola situs dan melakukan
upload dan download file
8.) Menu Window

Menyediakan akses ke seluruh panel, inspector dan jendela
di dalam Dreaweaver.
9.) Menu Help

Menyediakan akses ke dokumen Dreamweaver, membuka
lembar kerja. Help untuk membantu dalam menggunakan
Dreamweaver dan menyediakan bahan referensi untuk
beberapa bahasa.
2.8.1.2 Baris Toolbar Dokumen / Document Toolbar

Document toolbar berisi tombol – tombol dan menu pop up yang
menyediakan tampilan berbeda dari document window dalam
bentuk Design View atau Code View atau kedua – duanya. Icon
– icon pada toolbar dokumen dapat dilihat pada tabel 2.2
Tabel 2.2 Icon – icon pada Toolbar Dokumen

Ikon Nama Keterangan
Show Code View Untuk menampilkan
mode pengetikan
kode HTML, dalam
jendela code view
Show Code and Untuk menampilkan
Design Views jendela code view
dan jendela design
view
Show Design View Untuk menampilkan
jendela Design View.
Pada tampilan ini apa
yang pengguna lihat
akan sama seperti
pada jendela browser
No Browser Check Untuk melakukan
Errors pengecekan
kesalahan pada
dokumen Web
Document Title Untuk memberikan
judul pada dokumen
Web
Preview Debug in Untuk melihat hasil
Browser dalam browser,
mencari kesalhan
script dalam
dokumen dan
memasukkan browser
dalam browser yang
dikenali dengan
Dreamweaver MX
2004
Refresh Site List Untuk melakukan
pembaharuan
terhadap daftar isi
situs pengguna
2.8.1.3 Property Inspector / Set Properties

Property Inspector digunakan untuk melihat dan mengubah
berbagai property objek dan teks yang terpilih. Setiap objek
maupun teks mempunyai property yang berbeda – beda.
Misalnya, untuk teks yang terpilih maka property inspector akan
menampilkan property teks, sedangkan untuk image property
inspector akan menampilkan property image. Property inspector .
Set properties dapat dilihat pada gambar 2.6
Gambar 2.6 Property Inspector / Set Properties

2.9 Ecommerce
Ecommerce adalah suatu proses penjualan dan pembelian produk maupun
jasa yang dilakukan secara elektronik yaitu melalui jaringan komputer atau
internet. Arti lain dari e-commerce yaitu penggunaan tenologi informasi dan
komunikasi pengolahan digital dalam melakukan transaksi bisnis untuk
menciptakan, mengubah dan mendefinisikan kembali hubungan yang baru
antara penjual dan pembeli.
2.9.1 Jenis – Jenis Ecommerce

 Business To Business (B2B)
Meliputi semua transaksi barang atau jasa yang dilakukan antar
perusahaan atau antar rekan bisnis. Jenis bisnis ini sebenaranya
adalah toko online yang memiliki website sendiri. Transaksinya
sendiri dilakukan dengan menggunakan email dan EDI
(Electronic Data Interchange), sebuah metode pertukaran
dokumen bisnis antar aplikasi komputer dan antar perusahaan)
untuk pengiriman dan permintaan proposal bisnis.
 Business To Consumer (B2C)
Yaitu pelayanan secara langsung kepada konsumen, melalui
barang atau jasa. Dengan penjualan langsung di internet atau
secara online. Konsumen dapat mempelajarai produk yang akan
dibeli dengan melalui informasi yang tercantum didalamnya.
Jenis ini lebih mudah dan dinamis serta berkembang dengan
sangat cepat karena adanya dukungan website serta adanya toko
atau mall online.
3. PEMBAHASAN MASALAH
Pada bab ini akan dibahas bagaimana cara merancang dan membangun suatu
Web Ecommerce. Dalam pembuatan website ini penulis lebih banyak
menggunakan aplikasi Adobe Dreamweaver CS6 dan pemrograman PHP serta
database dalam website ini menggunakan MySQL.
Penulis juga akan menjelaskan langkah – langkah pembuatan website ini.

Langkah – langkah yang dibahas diantaranya : Struktur Navigasi, Perancangan
Tampilan Web, Perancangan Database, dan Penjelasan tentang beberapa
Program.

Dalam pembuatan website ini, penulis menggunakan struktur navigasi untuk
menjelaskan urutn website tersebut. Peta navigasi mempunyai beberap ciri
khas yang dapat digolongkan menurut kebutuhan akan objej, kemudian
pemakaian, keinterktifannya dan kemudahanya membuatnya yang
berpengaruh terhadap pembuatan suatu website. Pada aplikasi ini, pemulis
menggunakan struktur navigasi campuran (composite), karena memberikan
keinteraksian yang sesuai dengan penulis.
3.2 Perancangan Halaman

Rancangan pada website ini menggunakan berkas HTML untuk membuat
tampilan grafis dan tata letak komponen bagian – bagiannya. Kemudian pada
tahap selanjutnya mengetik kode PHP sebagian inti aplikasi situs ini.
Pembuatan websute ini memiliki beberapa halaman, untuk dapat mengakses

ke halaman- halam tersebut pengguna dapat mengakses langsung menu-menu
website, diantaranya adalah Registrasi, katalog, cara order, login.
1. Halaman Home
Halaman home merupakan pembuka atau halaman muka dari website ini.
Didalamnya berisi ucapan selamat dating, foto sebagian sample yang
kami jual, dan link – link untuk menuju kehalaman selanjutnya. Untuk
halaman home itu sendiri ada tiga macam yaitu; Home awal, home user
setelah login, dan home admin. halaman home admin dapat dilihat pada
gambar 3.4.
Untuk halaman user setelah login itu sendiri berbeda dengan halama
awal. Karena pada halaman ini, user bisa melihat lebih detail isi dari
katalog dan dapat melakukan pemesanan sampai selesai halaman home
user setelah login dapat dilihat pada gambar 3.5.
Keterangan gambar 3,3:

 Header berisi tentang logo giiesz store.
 Dibawah header terdapat link yaitu:
1.) Link REGISTRASI. Berisi tentang sebuah halaman
pendaftaran dan sesudah daftr langsung menuju halaman
login
2.) Link KATALOG. Berisi tentang informasi yag
mengharuskan user untuk ke halaman “LOGIN” untuk
mengetahui lebih detail dari isi halaman katalog.
3.) Link CARA ORDER. Berisi tentang informasi mengenai
langkah untuk customer dapat melakukan pemesanan melalui
website ini.
4.) Link LOGIN. Berisi tentang form untuk para user dan admin
yang sudah terdaftar.
 Di bagian tengah halaman tengah terdapat tulisan “ SELAMAT
DATANG DI WEBSITE GIIESZ STORE “, terdapat juga
“KETERANGAN HALAMAN” yang berfungsi untuk
memberitahukan halaman tersebut, dan terdapat berbagai macam
katalog gambar yang kami jual.
 Footer berisi tentang tulisan :
Copyright @Tangerang, Banten – Indonesia
Dikembangkan oleh “Rizky Listyo Wibowo”.
Keterangan gambar 3.4.

 Dibawah header terdapat beberapa link yaitu;
1.) Link CEK STOK. Berisi tentang sebuah halaman yang
berfungsi untuk mengecek sisa suatu barang.
2.) Link CEK PEMBELIAN. Berisi tentang berbagai data diri
dari para costumer yang telah memesan barang.
3.) Link CEK PEMBAYARAN. Berisi tentang berbagai laporan
customer yang telah melakukan pembayaran.
4.) Link LOGOUT. Berfungsi untuk para user dan admin yng
sudah terdaftar untuk keluar dari halaman yang sudah
dilogin.


1.) Link BERANDA USER. Sebuah halaman utama ketika user
telah login yang berisi tentang katalog gambar yang dijual.
2.) Link DETAIL KATALOG. Berisi tentang berbagai macam
gambar model dari produk yang kami jual.
3.) Link TENTANG KAMI. Berisi tentang profil dari Giiesz
Store.
4.) Link LOGOUT. Berisi tentang form untuk para user dan
admin yang sudah terdaftar untuk keluar dari halaman yang
sudah di login.
2. Halaman Registrasi
Halaman registrasi berisi tentang form untuk para user mengisikan data
diri pada kolom yang tersedia dan untuk para user supaya bisa
melanjutkan ke halaman katalog. Halaman registrasi dapat dilihat pada
gambar 3.6.

pendaftaran dan sesudah daftr langsung menuju halaman
login
website ini.

 Selain itu dibagian tengah halaman terdapat sebuah form yang
berfungsi bagi para user baru untuk mendaftarkan diri dengan
mengisikan pada kolom yang tersedia supaya bisa melanjutkan
kehalaman katalog.
3. Halaman Katalog Sebelum Login

Pada halaman ini berisi informasi untuk user diharapkan untuk login
terebih dahulu, dikarenakan kalau tidak login, user tidak bisa melihat isi
katalog yang tersedia. Halaman katalog sebelum login dapat dilihat pada
gambar 3.7.
Keterangan gambar 3.7:

1.) Link REGISTRASI. Berisi tentang sebuah halaman dan
sesudah daftr langsung menuju halaman login
website ini.

 Selain itu dibagian tengah halaman terdapat tulisan “ MAAF
ANDA HARUS LOGIN TERLEBIH DAHULU!!!” yang berarti
untuk user diwajibkan untuk login terlebih dahulu untuk dapat
melihat isi katalog yang tersdengan cara klik pada link tulisan
“LOGIN”.
4. Halaman Login
Pada halaman login berisi tentang username dan password untuk user dan
admin yang telah terdaftar. Untuk para user dan admin yang telah
terdaftar diwajibkan untuk login terlebih dahulu dapat menuju hlamn yng
selanjutnya. Halaman login dapat dilihat pada gambar 3.8.

1.) Link REGISTRASI. Berisi tentang sebuah halaman dan
sesudah daftr langsung menuju halaman login
website ini.

 Dibagian tengah halaman tengah terdapat sebuah form yang
berfungsi bagi para user yang telah terdaftar mengisi username
dan password untuk dapat login,dikarenakan supaya bisa
melanjutkan kehalaman katalog untuk memesan suatu barang.
5. Halaman Katalog Setelah Login

Pada halaman katalog setelah login user dapat melihat lebih rinci lagi
tentang katalog gambar yang dijual diwebsite ini dan dapat melanjutkan
pemesanan sampai selesai, halaman katalog setelah login dapat dilihat
pada gambar 3.9.

1.) Link BERANDA USER. Sebuah halaman utama ketika user
telah login yang berisi tentang katalog gambar yang dijual.
Store.
sudah di login.
 Selain itu dibagian tengah hlaman tengah terdapat berbagai
macam katalog yang sesuai dengan kategori yang user pilih.
6. Halaman Katalog Sesuai Kategori

Pada halaman katalog sesuai kategori user dapat melihat lebih rinci lagi
tentang katalog gambar yang dijual diwebsite ini dengan jenis atau
kategori yang sesuai user pilih dan dapat melanjutkan pemesanan sampai
selesai. Halaman katalog sesuai kategori dapat dilihat pada gambar 3.10.
Keteranga gambar 3.10.:

1.) Link BERANDA USER. Sebuah halaman utama ketika
user telah login yang berisi tentang katalog gambar yang
dijual.
Store.
sudah di login.
 Selain itu dibgian tengah halaman terdapat berbagai macam
katalog yang sesuai dengan kategori yang user pilih. Selain itu,
dibawah gambar katalog terdapat link bertuliskan “ IHAT
RINCIAN KATALOG” berfungsi untuk menuju halaman rincian
katalog supaya user dapat mengetahui rincian dari produk
terserbut.
7. Halaman Rincian Katalog Produk

Pada halaman info produk user dapat melihat suatu informasi untuk
barang yang telah dipilih, informasi dapat berupa. ID produk, Nama
Produk, Harga, sisa Stok, Beli. Halaman Rincian Katalog dapat dilihat
pada gambar 3.11.

dijual.
Store.
sudah di login.
memberitahukan halaman tersebut.
 Selain itu dibgian tengah halaman terdapat tulisan “ SILAHKAN
PILIH ITEM PRODUK”. Dan dibawahnya terdapat sebuah
rincian dari sebuah produk yang bertujuan untuk user
mengetahui rincian dari pruduk tersebt. Didalam tabel rincian
katalog terdapat link tulisan “PESAN” yang akan menuju
kehalaman keranjang belanja. Dibawah dari rincian suatu
produk terdapat link tulisan “KEMBALI KE KATALOG”, untuk
link “Kembali KE KATALOG” berfungsi untuk kembali
kehalaman katalog sesuai kategori yang sebelumnya dipilih.
8. Halaman Keranjang Belanja.

Pada halaman ini berisi tentang nama-nama barang yang telah user pilih
pada halaman rincian katalog sebelumnya. Dihalaman ini juga terdapat
informasi mengenai jumlah dari pesanan barang yang telah user pilih.
Halaman keranjang belanja dapat dilihat pada gambar 3.12.

dijual.
Store.
sudah di login.
 Selain itu dibagian tengah halaman terdapat tulisan “ITEM
DALAM KERANJANG”. Dan dibawahnya terdapat informs
rincian dari sebuat pemesanan produk yang telah dilakukan oleh
user pada halaman rincian katalo. Dan dibawahnya pun terdapat
link tulisan “LANJU BELANJA’ yang berfungsi untuk kembali
ke halaman rincian katalog, sedangkan terdapat link tulisan
“SELESAI” yang akan menuju kehalaman konfirmasi keranjang
belanja. Dan dibagian paling bawah terdapat sebuah catatan
informasi untuk dipahami oleh user.
9. Halaman Konfirmasi Keranjang Belanja

Pada halaman ini berisi tentang form pengisian data diri untuk
pengiriman barng. User diwajibkan mengisikan data diri pada form yang
telah disediakan untuk bia melanjutkan ke halaman pembayaran.
Halaman konfirmasi keranjang belanja 3.13.
Keterangan gambar 3.13

dijual.
Store.
sudah di login.
 Selain itu dibagian tengah halaman terdapat tulisan sebuah
informasi yang diberikan kepada user. Dan terdapat link tulisan
“DISINI” untuk melanjutkan kehalaman data pemesanan.
10. Halaman Data Pemesanan

Pada halaman ini berisi form pengisian data diri untuk pengiriman
barang. User diwajibkn mengisikan data diri pada form yang telah
disediakan untuk bisa melanjutkan kehalaman pembayaran. Halaman
data pemesanan dapat dilihat pada gambar 3.14.

dijual.
Store.
sudah di login.
 Dibagian tengah halaman terdapat tulisan “PEMESANAN” dan
terdapat form isinya yaitu Nomor Order, Tanggal Pemesanan,
Nama Pemenerima, Nomor Handphone, Alamat Lengkap,
Desripsi Pemesanan. User diwajibkan untuk mengisi form yang
telah disediakan. Dibawahnya terdapat link tulisan “KEMBALI”
berfungsi untuk melanjutkan kehalaman pebayaran dan untuk use
mengkonfirmasi pembayaran yang telah dilakukan.
11. Halaman Pembayaran

Pada halaman pembayaran ini berfungsi untuk user melakukan
pembayaran dengan metode pembayaran yang telah tertera dan
melakukan konfirmasi pembayaran. Halaman pembayaran dapat dilihat
pada gambar 3.15.

dijual.
Store.
sudah di login.
 Selain itu dibagian tengah halaman tengah terdapat tulisan
“PEMBAYARAN” dan form yang berisi ; Transfer kerekening,
Rekening pengirim, Nama rekening pengirim, Jumlah yang
ditransfer. Form tersebut yang nanti akan diisi oleh user sebagai
konfirmasi pembayaran. Dibawah form terdapat “CATATAN”
yang berisi informasi untuk user melakukan konfirmasi
pembayaran. Setelah itu ada link “KONFIRMASI
PEMBAYARAN” yang berfungsi untuk melanjutkan kehalaman
lihat bukti pemesanan yang berarti user telah berhasil melakukan
konfirmasi pembayaran.
12. Halaman Konfirmasi Sekesai Pemesanan
Pada halaman ini berfungsi untuk user diberikan informasi berupa

konfirmasi telah melakukan diwebsite ini. Dan informasi yang terdapat
membantu user dalam emberikan kejelasan dalam pemesanan barang
yang telah dilakukan. Halaman konfirmasi seesai pemesanan dapat
dilihat pada gambar 3.16.

dijual.
Store.
sudah di login.
 Selain itu dibagian tengah halaman tengah terdapat sebuah
kalimat berupa informasi dari admin untuk user yang telah
menyelesaikan pembelian diwebsite ini.
13. Halaman Tentang Kami

Pada halaman ini berisi tentang informasi sebuah sejarah singkat
didirikanya online shop ini dan tentang nomor kontak yang dapat user
hubungi. Halaman tentang kami dapat dilihat pada gambar 3.17.

dijual.
Store.
sudah di login.
 Selain itu dibagian tengah halaman tengahterdapat tulisan
“TENTANG KAMI” dan dibawahnya terdapat sebuah tulisan
berupa informasi mengenai sejarah singkat didirikanya online
shop ini. Dan untuk dipojok kiri bawah terdapat sebuah
“HUBUNGI KAMI” yang isinya nomor kontak yang dapat user
hubugi jika membutuhkanya.
14. Halaman Cara Order

Pada halaman ini berisikan informasi tentang bagaimana cara melakukan
pemesanan di website ini. Dengan halaman ini memudahkan bagi user
baru yang masih belum mengetahui cara melakukan pemesanan
diwebsite ini. Halaman cara order dapat dilihat pada gambar 3.18.

pendaftaran dan sesudah daftar langsung menuju halaman
login.
2.) Link KATALOG. Berisi tentang informasi yang
mengharuskan user untuk kehalaman “LOGIN” untuk
mengetahui lebuh detail dari isi halaman katalog..
langah untuk customer ddapat melakukan pemesanan melalui
website ini..
 Selain itu dibagian tengah halaman tengah terdapat tulisan
“TATA CARA PEMESANAN” dan dibawahnya terdapat tulisan
berupa informasi bagaimana untuk memesan suatu barang
diwebsite ini dan diperuntukan bagi user baru yang belum
terdaftar.
15. Halaman Cek Stok Admin

Pada halaman ini berfungsi untuk admin dapat melakukan cek stok pada
suatu barang.mengubah info pada suatu barang. admin memiliki hak
akses pada halaman ini dikarenakan ia yang dapat mengubah info pada
suatu barang. Pada halaman awal cek stok ini admin dapat memilih esuai
kategori yang ingin diubah atoknya. Halaman cek stok admin dapat
dilihat pada gambar 3.19.
1.) Link CEK STOK. Berisi tentang sebuah halamanyang
berfungsi untuk mengecek sisa suatu barang..
2.) Link DATA PEMBELIAN. Berisi tentang berbagai data diri
dari para customer yang telah memesan barang.
3.) Link CEK PEMBAYARAN. Berisi tentang berbagai laporan
dari customer yang telah melakukan pembayaran.
sudah di login.
 Selain itu dibagian tengah halaman tengah terdapat sebuah link
menu sesuai dengan kategori. Link menu tersebut dapat admin
pilih salah satu jika hendak mengubah stok dan akan melanjutkan
kehalaman cek stok sesuai kategori.
3.3 Perancangan Database

Setelah perancangan halaman maka tahap selanjutnya adalah diagram class
database, pembuatan atau perancangan database program. Dari database yang
dibuat inilah nantinya berbagai informasi mengenai data-data yang
diperlukan untuk program website ecommerce Giiesz Store disimpan.
3.4.1 Diagram Class

Diagram class ini bertujuan untuk mempermudah dalam
perancangan database yang digunakan dan untuk
memperlihatkan keterhubungan antar table. Diagram
class database website dapat dilihat pada gambar 3.20.
3.4.2 Struktur Tabel

Didalam website ini mempunyai sebuah database yaitu
database website_fadel untuk menyimpan data – data
mengenai produk – produk yang dijual dan data diri user
dan admin. Dibawah ini, beberapa contoh struktur table
yang dipergunakan dalam data base ini:
3.4.2.1 Tabel Registrasi
3.4.2.2 Tabel Pemesanan
3.4.2.3 Tabel Pembayaran
3.4.2.4 Tabel Order
3.4.2.5 Tabel produk Khanza
3.4.2.6 Tabel Produk Sakina
3.4.2.7 Tabel Produk Segiempat
3.4.2.8 Tabel produk Zizi
3.4.2.9 Tabel produk Salma
3.5 PembuatanDatabase dalam MySQL

Dalam peulisan ini pembuatan database Giiesz Store dan
forum table – table sampai dengan pemasukan data –
datanya penulis menggunakan MySQL pembuatan database
ini menggunakan perintah – perinta SQL dan berjalan pada
program MySQL. Untuk mempermudah pembuatan
database dapat menggunakan program PHP MyAdmin.
Database ini berguna untuk menampung data yang terdapat
dalam table – table yang digunakan pada website ini. Selain
menggunakan perintah MySQL melalui command line
MySQL dapat juga melalui PHP MyAdmin.
Pada dasarnya tiap – tiap file PHP untuk dapat

berhubungan dengan database dibutuhkan 3 hal berikut :
1. Koneksi Database
Koneksi yang dimaksudkan adalah untuk membuka
hubungan file PHP dengan database yang telah dibuat,
di definisikan sebagai berikut :
$host = “localhost”;
$user = “root”;
$pass = “”;
$db = “website_fadel”;
Untuk isi dari host merupakan host MySQL, defaultnya
adalah localhost. User adalah nama user account di
MySQL, pass adalah password dari user account
tersebut dan db adalah nama database yang digunakan.
2. Koneksi Server
Koneksi ini ditujukan untuk membuka hubungan
dengan server yang dibutuhkan yaitu $host, $user,
$pass, $db dan mysql_eror, Mysql_eror adalah pesan
eror yang tampil bila terjadi kesalahan.
3. Open Database
Koneksi ini digunakan untuk membuka database.
Sedangkan yang dibutuhkan adalah $db dan
mysql_eror yang akan ditampilkan bila terjadi
kesalahan.
3.6 Uji Coba Black Box

Metode uji coba black box memfokuskan pada
keperluan fungsional dari software. Oleh karena itu,
blackbox memungkinkan pengemban software untuk
membuat himpunan kondisi input yang akan melatih
seluruh syarat – syarat fungsional suatu program.
Berikut dibawah adalah table uji coba blckbox:
3.7 Proses Upload

Setelah semua halaman website sudah siap, selanjutnya
yang harus dilakukan agar website ini dapat diakses
user adalah melakukan proses upload. Upload
merupakan suatu proses memasukan website ini
kedalam jaringan internet dengan menggunakan sirus –
situs yang menyediakan fasilitas web hosting. Untuk
upload website Giiesz store ini akan dilakukan pada
www.00webhost

RizkyListyoWibowo Ecommerce

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

RizkyListyoWibowo Ecommerce

Diunggah oleh

Hak Cipta:

Format Tersedia

MAKALAH

“PEMBUATAN TOKO BUKU BERBASIS E-COMMERCE”

Diajukan Sebagai Bahan Pertimbangan dalam Pengambilan Judul

Nama : Rizky Listyo Wibowo

Jurusan : Sistem Informasi

JURUSAN SISTEM INFORMASI

Semoga Allah SWT melimpahkan berkah dan rahmat-Nya kepada

Tangerang, 5 Desember 2020

Daftar Isi viii

Daftar Gambar xiii

LAMPIRAN LISTING PROGRAM

LAMPIRAN OUTPUT PROGRAM

Gambar 2.1 Macam – macam Simbol Class Diagram dan Fungsinya

Gambar 2.2 Icon – Icon pada Toolbar Dokumen

Gambar 3.1 Tabel Registrasi

Gambar 3.2 Tabel Pemesanan

Gambar 3.3 Tabel Pembayaran

Gambar 3.4 Tabel Order

Gambar 3.5 Tabel Produk Khanza

Gambar 3.6 Tabel Produk Sakina

Gambar 3.7 Tabel Produk Segiempat

Gambar 3.8 Tabel Produk Zizi

Gambar 3.9 Tabel Produk Salma

Gambar 3.10 Tabel Uji Coba Blackbox

Electronic Commerce (E-Commerce) merupakan salah satu contoh produk

1.2 Ruang Lingkup

1.3 Tujuan Penulisan

1.4 Metode Penulisan

1.5 Sistematika Penulisan

BAB II LANDASAN TEORI

BAB III PERANCANGAN APLIKASI

Internet atau interconnection-networking adalah seluruh jaringan

World Wide Web (WWW) memudahkan pemakaian internet, sebuah

Halaman – halaman web tersebut diakses oleh pungguna melalui protokol

2.2 HTML ( Hypertext Markup Language )

2.2.1 Tag – Tag HTML

2.3 PHP (Personal Home Page)

2.3.1 Cara Kerja PHP

2.3.2 Variable dalam PHP

2.3.3 Operator pada PHP

2.4 DBMS (Database Management System)

1. Data Definition Language (DDL)

2. Data Manipulation Language (DML)

Salah satu tujuan dari DBMS adalah memberikan tampilan kepada

2.5.1 Elemen SQL

Pernyataan dasar SQL antara lain :

1. Tipe data numeric antara lain :

string, M : jumlah digit yang

3. Tipe data tunggal dan jam :

Ekspresi aritmatika antara lain :

1. AVG(ekspresi) : digunakan untuk mencari rata – rata

2.6 Notasi Unified Modelling Language (UML)

2.7 Struktur Navigasi

Gambar 2.1 Struktur Navigasi Linier

Gambar 2.2 Struktur Navigasi Hirarki

Gambar 2.3 Struktur Navigasi Non Linier

Gambar 2.4 Struktur Navigasi Campuran (Composite)

2.8 Pengenalan Adobe Dreamweaver

2.8.1 Komponen Ruang Kerja

2.8.1.1 Menu Utama / Baris Menu

1.) Menu File dan Menu Edit

2.) Menu View

3.) Menu Insert