rancang bangun aplikasi toko onlinte untuk …

59
RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK PEMBELIAN DAN PEMESANAN BERBASIS WEB TUGAS AKHIR DENIS OKTAVIAN 162406032 PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA MEDAN 2019 Universitas Sumatera Utara

Upload: others

Post on 02-Oct-2021

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK

PEMBELIAN DAN PEMESANAN BERBASIS WEB

TUGAS AKHIR

DENIS OKTAVIAN

162406032

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2019

Universitas Sumatera Utara

Page 2: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK

PEMBELIAN DAN PEMESANAN BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli

Madya

DENIS OKTAVIAN

162406032

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2019

Universitas Sumatera Utara

Page 3: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

Universitas Sumatera Utara

Page 4: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

i

Universitas Sumatera Utara

Page 5: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

ii

Universitas Sumatera Utara

Page 6: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

iii

Universitas Sumatera Utara

Page 7: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

iv

ABSTRAKSI

Dalam perkembangan era globalisasi khusunya perkembangan revolusi

industri 4.0 berkembangnya kemajuan teknlogi yang sangat khususnya Toko

Online yang semakin banyak berkembang.

Dan Tugas Akhir kali ini merancang suatu aplikasi Toko online untuk

pemesanan dan penjualan berbasis web yang pastinya bermanfaat bagi

masyarakat dan pengunjung ,karena toko online ini memudahkan mereka dalam

memilih produk yang mereka inginkan dan tahu bentuk model informasi produk

yang tertera.Rancangan sistem toko online yang saya bangun dikembangkan

dengan menggunakan perangkat lunak Sublime text ,php dan mysql.Dalam Toko

Online ini fitur yang dimiliki adalah registrasi member bagi pengunjung

pertama,menambahkan daftar keranjang,daftar keinginan produk yang

dibeli,mengedit data-data diri,pembelian dan pemesanan jauh lebih

mudah.Semua hal yang tercakup itu agar para pengujung dapat diberikan data

data akurat dan memperlancar transaksi

Universitas Sumatera Utara

Page 8: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

v

DAFTAR ISI

Halaman

PERSETUJUAN

i PERNYATAAN

ii PENGHARGAAN

iii ABSTRAK

iv

ABSTRACT v

DAFTAR ISI vi

DAFTAR GAMBAR viii

DAFTAR TABEL ix

BAB 1. PENDAHULUAN

1.1 Latar Belakang 1

1.2 Rumusan Masalah 2

1.3 Batasan Masalah 3

1.4 Tujuan Penelitian 3

1.5 Manfaat Penelitian 4

1.6 Metode Penelitian 5

1.7 Sistematika Penulisan Tugas Akhir 6

BAB 2. LANDASAN TEORI

2.1 Toko Online 6

2.2 Database 13

2.3 Pengertian Internet 16

2.4 Web 17

2.4.1 Sejarah Web 17

2.4.2 Aplikasi Web 18

2.4.3 Web Server 19

2.5 Sejarah PHP 19

2.7.1 Kelebihan PHP 21

2.7.2 Kelemahan PHP 21

2.7.3 Penggabungan Script PHP dan HTML 22

2.6 Sejarah MySQL 24

2.7 Pengertian Sublime Text

BAB 3. PERANCANGAN SISTEM

3.1 Perancangan Sistem 26

3.2 Diagram Konteks 26

3.3 Data Flow Diagram (DFD) 27

3.4 Entity Relationship Diagram (ERD) 29

3.5 Perancangan Database 30

3.6 Flowchart 36

Universitas Sumatera Utara

Page 9: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

vi

BAB 4. PEMBAHASAN

4.1 Perancangan Sistem

4.1.1 Diagram Context 37

4.1.2 DFD

4.2 Perancangan Website 35

4.3.1 Halaman Panel Admin

4.3.2 Halaman Manajemen Produk

4.3.2.1 Halaman Produk

4.3.2.2 Halaman Data Kategori

4.3 Tampilan Website

4.3.1 Tampilan Awal Website

4.3.2 Tampilan Kategori Produk

4.3.3 Tampilan Pemesanan Barang 40

4.4 Pemeliharaan Sistem 36

4.5 Perancangan Sistem 40

4.5.1 Instalasi XAMPP 41

BAB 5. KESIMPULAN DAN SARAN

5.1 Kesimpulan 45

5.2 Saran 46

DAFTAR PUSTAKA 47

LAMPIRAN

Lampiran A : Kartu Bimbingan Tugas Akhir

Lampiran B : Surat Keterangan Uji Program

Lampiran C : Surat Keterangan Dosen Pembimbing Tugas Akhir

Lampiran D : Listing Program

Universitas Sumatera Utara

Page 10: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

vii

DAFTAR GAMBAR

Nomor Judul Halaman

Gambar

2.1 Kerangka Penilitian 15

3.1 Diagram Konteks 31

3.2 DFD Level 0 33

3.3 DFD Level 1 Proses 1.0 34

3.4 DFD Level 1 Proses 2.0 34

3.5 DFD Level 1 Proses 3.0 35

3.6 DFD Level 1 Proses 4.0 35

3.7 DFD Level 2 Proses 1.0 35

3.8 Entity Relationship Diagram 37

3.9 Flowchart Menu Utama 46

3.10 Flowchart Login Admin 47

3.11 Flowchart Login User 48

4.1 Instalasi XAMPP 3.2.1(1) 53

4.2 Instalasi XAMPP 3.2.1(2) 53

4.3 Instalasi XAMPP 3.2.1(3) 54

4.4 Instalasi XAMPP 3.2.1(4) 54

4.5 Control Panel XAMPP 55

4.6 Halaman Utama(Home) 56

4.7 Halaman Panel Admin 56

4.8 Halaman Produk 57

4.9 Halaman Data Kategori 57

4.10 Halaman Jasa Pengiriman 58

4.11 Halaman Ongkos Kirim 58

4.12 Halaman Cara Pembelian 59

4.13 Halaman Menu Transaksi 59

4.14 Tampilan Awal Website 59

4.15 Tampilan Kategori Produk 59

4.16 Tampilan Cara Pembelian 59

4.17 Tampilan Pemesanan Barang 59

4.18 Tampilan Invoice 59

Universitas Sumatera Utara

Page 11: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

viii

DAFTAR TABEL

Nomor Judul Halaman

Tabel

3.3 Simbol-Simbol Data Flow Diagram 29

3.5 Data Login Admin 32

3.6 Simbol Flowchart 35

Universitas Sumatera Utara

Page 12: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

1

BAB 1

PENDAHULUAN

Latar Belakang

Toko online berasal dari dua suku kata, Toko dan Online. Menurut Kamus

Besar Bahasa Indonesia, toko berarti sebuah tempat atau bangunan permanen

untuk menjual barang-barang (makanan, minuman, dan sebagainya). Sedangkan

online yang terjemahan bahasa indonesianya adalah dalam jaringan menurut

Wikipedia adalah keadaan di saat seseorang terhubung ke dalam suatu jaringan

ataupun sistem yang lebih besar. Jadi berangkat dari dua pengertian secara bahasa

tersebut kita dapat mengartikan toko online sebagai tempat terjadinya aktifitas

perdagangan atau jual beli barang yang terhubung ke dalam suatu jaringan dalam

hal ini jaringan internet.

Menurut Arwiedya (2011), menjamurnya Online Shop membuka peluang

usaha dalam bidang produk fashion di internet yang banyak membidik remaja

sebagai konsumennya. Keunggulan bisnis Online Shop selain mudah dalam

melakukan promosi, juga sangat efisien karena hanya membutuhkan biaya

berlangganan internet untuk dapat menjalankan bisnisnya.

Konsep online shopping atau Toko online menyediakan banyak

kemudahan dan kelebihan jika dibandingkan dengan konsep belanja yang

tradisional. Selain proses transaksi bisa menjadi lebih cepat, di internet telah

disediakan hampir semua barang yang biasanya dijual secara lengkap

Oleh karena itulah penulis dalam penyusunan tugas akhir ini dengan judul

“ RANCANG BANGUN APLIKASI TOKO ONLINE PADA TOKO X

Universitas Sumatera Utara

Page 13: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

2

BERBASIS WEB ” Maka dari itu, toko online sangat berguna bagi orang yang

suka berbelanja namun tidak mempunyai waktu yang banyak untuk berbelanja

secara langsung dengan mengunjungi toko sebenarnya.

Rumusan Masalah

Berdasarkan latar belakang masalah yang sudah dijelaskan diatas, maka dapat

diidentifikasikan permasalahan yang ada, diantaranya:

1. Apakah kualitas layanan yang diberikan dapat berpengaruh terhadap

kepuasaan Toko Online.

2. Target dari Toko Online ini adalah masyarakat yang aktif menggunakan

internet.

Batasan Masalah

Dalam membuat aplikasi ini ada beberapa batasan masalah yang ditemukan,

diantaranya:

1. Aplikasi ini dibuat dengan menggunakan bahasa Pemrogramman HTML

2. Menggunakan Sublime Text 3,Xampp dan Mysql sebagai tahap

pengembangannya.

Tujuan Penelitian

Adapun Tujuan dari penulisan ini adalah sebagai berikut :

1. Bagaimana merancang pembuatan Aplikasi Toko Online berbasis web ini

semenarik mungkin.

2. Mempermudah orang atau masyarakat yang suka berbelanja namun tidak

mempunyai waktu yang banyak untuk berbelanja secara langsung dengan

mengunjungi toko sebenarnya.

Universitas Sumatera Utara

Page 14: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

3

Manfaat Penelitian

Adapun manfaat penelitian ialah:

1. Mendapatkan feedback dari pengguna mengenai kualitas

layanan,kepercayaan,konsumen dan kualitas konsumen.

2. Meminimalisir waktu yang terpakai untuk mencari informasi barang yang

ingin di beli.

3. Sebagai media untuk mencari informasi barang yang tersedia pada toko

secara online berbasis web.

Metode Penelitian

Dalam menyusun tugas akhir ini, penulis melakukan penerapan metode penelitian

dalam memperoleh data-data yang dibutuhkan sehingga penyusunan tugas akhir

ini dapat diselesaikan dengan baik. Adapun metode penelitian yang penulis

lakukan adalah sebagai berikut:

1. Penelitian Menggunakan Media Internet

Penelitian yang dilakukan penulis dengan searching menggunakan internet

browser sebagai tempat mencari referensi bahan untuk penelitian tugas

akhir ini agar mendapatkan bahan aplikasi yang efektif dan efisien.

2. Wawancara

Wawancara dilakukan dengan pemilik dari pembuatan website itu sendiri. Hal

ini dilakukan bertujuan untuk memperoleh informasi tentang metode yang

dilakukan dalam membangun website toko online menggunakan bahasa

pemrograman HTML.

3. Pengamatan (Observasi)

Cara ini digunakan bahwa penelitian yang dilakukan secara langsung ke

Universitas Sumatera Utara

Page 15: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

4

lapangan dengan masalah yang terjadi.

4. Studi Pustaka

Merupakan teknik yang diambil penulis melalui buku-buku yang berhubungan

dengan permasalahan apa saja yang akan dibahas dalam penelitian ini.

Pengumpulan berbagai macam data dengan cara mengumpulkan sumber-

sumber yang tertulis, dengan cara membaca, mempelajari termasuk juga

mencatat hal-hal penting apa saja yang berkaitan dengan masalah yang

sedang dibahas dalam penelitian ini, guna memperoleh gambaran secara

teoritis yang berguna untuk dapat menunjang pada penyusunan penelitian

ataupun skripsi. Dalam proses pembuatan halaman website itu sendiri

perencanaannya melalui beberapa tahapan yang harus dilalui yaitu, antara

lain : mempelajari dan juga mengumpulkan data-data apa saja yang akan

ditampilkan pada website yang akan dibangun, merancang desain website,

merancang struktur link dokumen, menyusun naskah dokumen website dan

tahapan yang terakhir membuat dokumen website.

Sistematika Penulisan Tugas Akhir

BAB I : PENDAHULUAN

Berisikan latar belakang, identifikasi masalah, tujuan, manfaat,

pembatasan masalah, metode penelitian, tinjauan pustaka,

sistematika penulisan tugas akhir.

BAB II : LANDASAN TEORI

Berisikan tentang penjelasan singkat mengenai toko online,

pengertian toko online, pengertian MySQL,pengertian Html

pengertian Xampp, pengertian Database, dan pengertian

Universitas Sumatera Utara

Page 16: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

5

Sublime Text3.

BAB III : PERANCANGAN SISTEM

Berisikan perancangan database, tabel – tabel, algoritma dan

rancangan input program yang akan dibuat.

BAB IV : RANCANGAN SISTEM

Berisikan defenisi dan tujuan rancangan sistem, outpun program

serta komponen – komponen kebutuhan sistem.

BAB V : KESIMPULAN DAN SARAN

Berisikan kesimpulan dan saran dari tugas akhir ini serta saran

untuk Universitas Sumatera Utara khususnya jurusan D3 Teknik

Informatika

Universitas Sumatera Utara

Page 17: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

6

BAB 2

LANDASAN TEORI

2.1 Toko Online

Toko online adalah sebuah wadah atau tempat untuk melakukan transaksi

jual beli secara online. Saat ini sedang marak-maraknya di ero globalisasi baik itu

usaha kecil yang dilakukan oleh perorangan atau besar yang dilakukan oleh suatu

institusi untu membuat toko online.

Terciptanya toko online memberikan kemudahan bila ada calon pembeli yang

ingin mengetahui spesifikasi atau informasi mengenai produk yang dia ingin beli

dan tentunya dari penjualan yang kita tawarkan.Calon pembeli akan lebih mudah

dan lebih leluasa memilih dan mencari produk yang mereka inginkan,mereka

tidak perlu berebutan dengan pembeli yang lain Karena toko online dapat diakses

bersama

2.2 Database

Database adalah suatu kumpulan data atau informasi yang disimpan dalam

suatu sistem komputer yang di input secara sistematik untuk menghasilkan

informasi dari data yang telah disimpan untuk memenuhi berbagai kebutuhan

2.4 Pengertian Komputer

Komputer diartikan sebagai mesin penghitung elektronik namun computer

berbeda kalkulator.

Komputer memiliki kemampuan untuk menyimpan data dalam memory

atau storage unitnya dan dapat melakukan proses secara kontiniu dan otomatis

tanpa banyak campur tangan manusia.

Namun walaupun demikian harus disadari bahwa meskipun komputer dapat

Universitas Sumatera Utara

Page 18: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

7

melakukan pengolahan data, tetaplah benda mati yang bekerja atas dasar perintah

atau instruksi yang diberikan oleh manusia melalui bahasa pemrograman atau

codingan.

Dalam pengolahan data tersebut harus menggunakan alat – alat untuk

mempercepat jalannya proses pengolahan data yang tentunya memerlukan suatu

prosedur pengolahan beserta orang – orang yang mampu melaksanakan

pengolahan data, mulai dari perekaman data, pengumpulan data, pemasukan data,

perhitungan – perhitungan sampai kepada pembuatan laporan atau informasi yang

diinginkan.

Sistem komputerisasi adalah suatu sistem yang berdiri atas komputer

danseluruh komponen-komponen yang menunjang terlaksananya proses

pengolahan data dan menjadikan komputer sebagai alat yang berguna. Sistem

komputer memiliki beberapa komponen yaitu:

a. Perangkat Keras (hardware), Dalam dunia IT Perangkat keras merupakan

hal yang sering kita dengar karena perangkat keras sering digunakan dan

familiar dalam kehidupan programmer,perangkat keras atau komponen

komputer yang secara fisik dapat dilihat dan diraba, dengan kata lain

memiliki wujd fisik yang membentuk suatu kesatuan dapat difungsikan.

Berdasarkan kegunaannya, perangkat keras komputer digolongkan ke dalam

tiga bagian utama, yaitu:

1. alat input, merupakan alat untuk memasukkan program maupun data yang

akan diprosesn oleh komputer, seperti keyboard, mouse, scanner.

2. Alat Proses, merupakan alat atau unit terpenting didalam sistem komputer.

Tugas utamanya adalah mengontrol keseluruhan sistem komputer selama

Universitas Sumatera Utara

Page 19: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

8

pengelolahan data berlangsung, seperti motherboard dan processor.

3. Alat Output, adalah alat untuk menampilkan hasil pengelolahan data yang

dilakukan oleh CPU, misalnya monitor dan printer.

b. Perangkat Lunak (software) merupakan komponen komputer yang sering kita

gunakan dan merupakan kumpulan program dan prosedur yang

memungkinkan perangkat komputer komputer dapat menjalankan fungsinya

sebagai alat pengolahan data, komponen ini tidak nyata secara fisik.

Perangkat lunak memiliki fungsi sebagai alat pengolahan data, komponen ini

tidak nyata secara fisik. Perangkat lunak berfungsi sebagai perantara bagi

komputer dan pengguna komputer dan pengguna komputer (user), sehingga

komputer dapat digunakan.

c. Pengguna Komputer adalah manusia yang menangani suatu sistem komputer

atau orang yang mampu mengoperasikan komputer. Brainware dapat

dikelompokkan dalam beberapa bagian, yaitu contohnya:

1. Programmer, Orang yang kerjanyan ngoding dan dapat menterjemahkan

spesifikasi yang telah dirancang oleh sistem analisis ke dalam suatu bahasa

pemrograman tertentu.

2. Operator computer , Orang yang bertugas menangani pengelolahan data

secara langsung.

2.5 Pengertian Internet

Internet atau interconnection-networking adalah gabungan rangkaian yang

terdiri dari seluruh jaringan komputer yang saling terhubung dengan

menggunakan standar sistem global Transmission Control Protocol/Internet

Protocol Suite (TCP/IP) sebagai protokol pertukaran paket (packet switching

Universitas Sumatera Utara

Page 20: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

9

communication protocol) untuk melayani miliaran pengguna di seluruh dunia.

Internet dapat bekerja apabila computer berhubungan dengan sebuah alat fungsi

sebagai koneksi antar computer dengan system jaringan online sehinngga saling

berhubungan.

2.6 Web

Mungkin tidak asing kita dengar World Wide Web atau WWW atau juga

dikenal dengan WEB adalah halaman ataupun layan salah satu yang

menghungkan pengguna web dan bersi kumpulan informasi. Web ini

menyediakan informasi bagi pemakai computer yang terhubung ke internet dari

sekedar informasi yang tidak berguna sama sekali sampai informasi yang sangat

penting; dari informasi yang gratisan sampai informasi yang komersial. Dapat kita

petik bahwa website itu dapat diartikan sebagai kumpulan halaman-halaman yang

digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi,

suara, dan atau gabungan dari semuanya itu baik yang bersifat statis maupun

dinamis yang membentuk suatu rangkaian bangunan yang saling terkait dimana

masing-masing dihubungkan dengan jaringan-jaringan halaman

(hyperlink).walaupun dapat diakses secara bebas,pada kenyataannya tidak semua

situs dapat diakses secara bebas.

2.6 Sejarah Web

Sejarah web muncul pada tahun 1991 ,Penemu situs web adalah Sir

Timothy John "Tim" Berners-Lee, Pada tanggal 30 April 1993, CERN (Consei

European pour la Recherce Nuclaire) (tempat dimana Tim bekerja)

Universitas Sumatera Utara

Page 21: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

10

mengumumkan bahwa World Wide Web dapat digunakan secara gratis oleh

publik.Dan berkat kejadian itu pengertian website sudah memasuki kawasan

public karena dapat digunakan oleh masyarakat luas dimanpun dan kapanpun

2.6.1 Aplikasi Web

Aplikasi web adalah suatu software aplikasi yang digunakan dalam media

browser dan pada awalnya terbentuknya hanya menggunakan bahasa

HTML(Hypertex Markup Language). Pada perkembangan berikut, sejumlah

skrip dan objek dikembangkan untuk memperluas kemampuan HTML, antara

lain yaitu PHP. Aplikasi Web sendiri dapat dibagi menjadi dua bagian, yaitu:

a. Web Statis

Web statis dibentuk dengan menggunakan HTML saja. Kekurangan

aplikasi seperti ini terletak pada keharusan untuk memelihara program secara

terus-menerus untuk mengikuti setiap perubahan yang terjadi. Kelemahan ini

diatasi dengan model aplikasi Web dinamis. Dengan memperluas kemampuan

HTML, yakni dengan menggunakan perangkat lunak tambahan, perubahan

inforamasi dan halaman-halaman Web dapat ditangani melalui perubahan data,

bukan melalui perubahan program. Sebagai implementasinya, aplikasi Web

dikoneksikan ke basis data. Dengan demikian perubahan informasi dapat

dilakukan oleh operator atau yang bertanggung jawab terhadap kemuktakhiran

data, dan tidak menjadi

tanggung jawab pemrograman atau webmaster

b. Web dinamis

Web dinamis adalah suatu web yang konten atau isinya dapat berubah-

ubah setiap saat. Sebab dalam teknologi pembuatan web dinamis sudah dirancang

semudah mungkin bagi pemakai atau user yang menggunakan web tersebut.

Universitas Sumatera Utara

Page 22: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

19

2.6.2 Web Server

Web Server adalah software atau perangkat lunak dalam bentuk server

yang melayani permintaan client terhadap halaman web. Middleware adalah

perangakat lunak yang bekerja sama dengan web server dan berfungsi

menterjemahkan kode-kode tertentu, menjalankan kode-kode tersebut dan

memungkinkan berinteraksi dengan basis data. Web browser adalah perangkat

lunak di sisi client yang digunakan untuk mengakses informasi web. Contoh

Mozila,Google chrome,internt Explorer.

2.7 Sejarah PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page

(Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995.

Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa

sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan

menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber

terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah

diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-

modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.

Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang

interpret PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada

Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan

meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah

Universitas Sumatera Utara

Page 23: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

20

menjadi akronim berulang PHP: Hypertext Preprocessing.

Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut

dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai

pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya

untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan

dan stabilitas yang tinggi.

Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter

PHP mengalami perubahan besar. Versi ini juga memasukkan model

pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan

bahasa pemrograman ke arah paradigma berorientasi objek.

2.7.1 Kelebihan PHP

Diantara maraknya pemrograman server web saat ini adalah ASP yang

berkembang menjadi ASP.NET, JSP, CFML, dan PHP. Jika dibandingkan

diantara 3 terbesar pemrograman web server diatas, terdapat kelebihan dari PHP

yaitu:

1. PHP dapat berjalan pada web server yang dirilis oleh Microsft, seperti IIS atau

PWS juga pada Apache, Lighttpd, hingga Xitami dengan konfigurasi yang relatif

mudah.

2. PHP merupakan sebuah bahasa script yang tidak melakukan sebuah kompilasi

dalam penggunaannya.

3. Jika dilihat dari segi pemahaman, PHP memiliki referensi yang sangat mudah

dipahami.

4. Karena sifatnya yang open source, maka perubahan dan perkembangan

interpreter pada PHP lebih cepat dan mudah, karena banyak milis-milis dan

Universitas Sumatera Utara

Page 24: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

21

developer yang siap membantu pengembangannya.

5. PHP dapat berjalan pada 3 operating sistem, yaitu: Linux, Unix, dan Windows

serta dapat juga dijalankan secara runtime pada suatu console.

2.7.2 Kelemahan PHP

Seperti pemrograman aplikasi atau web lainnya, PHP pun memiliki

beberapa kelemahan, diantaranya:

1. PHP Tidak mengenal Package.

2. Jika tidak di encoding, maka kode PHP dabat dibaca semua orang & untuk

meng encodingnya dibutuhkan tool dari Zend yang mahal sekali biayanya.

3. PHP memiliki kelemahan keamanan. Jadi Programmer harus jeli & berhati-

hati dalam melakukan pemrograman & Konfigurasi PHP.

2.7.3 Penggabungan Script PHP dan HTML

Relasinnya Bahasa pemrograman PHP dapat digabungkan dengan HTML

dengan terlebih dahulu memberikan tanda tag buka dilanjutkan tanda tanya (<?)

kemudian ditutup dengan tanda tanya dilanjutkan tanda tag tutup (?>). Ada dua

tipe penggabungan antara PHP dan HTML, yaitu:

a) Embedde Script

Adalah bentuk penulisan tag PHP di sela-sela tag HTML. Dengan cara

ini, penulisan tag PHP digunakan untuk membentuk bagian-bagian tertentu dalam

dokumen yang memerlukan suatu script PHP untuk proses di dalam server.

Embedded Script menempatkan PHP sebagai bagian dari script HTML. Contoh

penulisan Embedded Script dapat dilihat berikut ini:

<html>

<head>

Universitas Sumatera Utara

Page 25: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

22

<title>Devian</title>

<head>

<body>

<? echo "Hallo TA"?>

</body>

</html>

b) Non Embedded Script

Adalah bentuk cara penulisan tag PHP yang dibangun dibagian paling

awal dan paling akhir dokumen. Dengan cara ini, penulisan tag PHP

mengakhiri keseluruhan bagian dalam sebuah dokumen. Non Embedde

menempatkan script HTML sebagai bagian dari script PHP. Contoh bentuk

Penulisan Non Embedded Script dapat dilihat di bawah ini:

<?

echo' <html>'; echo'<head>'; echo'<title>devian</title>'; echo</head><body>';

echo'Hallo Ta';

echo'</body>';

echo'</html>';

?>

2.8 Sejarah MySQL

Sejarah MySQL tercipta pada tahun 1979, itu terjadi saat seorang

programmer yang bernama Michael "Monty" Widenius meneliti dan berhasil

mengembangkan sebuah sistem database sederhana yang dinamakan UNIREG .

Pada saat penelelitian itu dilakukan Monty adalah seorang pekerja di perusahaan

yang bernama TcX di Swedia.TcX setelah dilakukan penelitian yang cukup

Universitas Sumatera Utara

Page 26: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

23

panjang,pada tahun 1994 mulai mengembangkan aplikasi berbasis web yang

menggunakan UNIREG sebagai databasenya. Namun kenyataannya, UNIREG

dianggap tidak cocok untuk database yang dinamis seperti web. TcX kemudian

mencoba mencari alternatif sistem database lainnya, dan salah satunya adalah

mSQL atau miniSQL. Namun mSQL tidak mendukung indexing, sehingga

performanya mSQL tidak terlalu bagus. Dengan tujuan memperbaiki performa

mSQL versi 1,Dengan adanya kedua gagalan itu maka Monty mencoba

menghubungi David Hughes seorang (programmer yang mengembangkan mSQL)

untuk menanyakan apakah ada rencana untuk mengembangkan sebuah konektor

di mSQL yang dapat dihubungkan dengan UNIREG ISAM sehingga mendukung

indexing. Namun saat itu Hughes menolak, dengan alasan sedang

mengembangkan teknologi indexing yang independen untuk mSQL versi 2.

Universitas Sumatera Utara

Page 27: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

24

Dari penolakan yang diterimanya, David Hughes, TcX akhirnya memutuskan

untuk merancang dan mengembangkan sendiri konsep sistem database baru.

Sistem ini merupakan gabungan dari UNIREG dan mSQL. Sehingga pada tahun

1995, nama TcX sudah tidak ada lagi dan digantikan sebuah RDBMS baru, yang

dinamakan MySQL dirilis. David Axmark dari Detron HB, rekanan TcX

mengusulkan agar MySQL di jual dengan model bisnis baru. Ia mengusulkan

agar MySQL dikembangkan dan dirilis dengan gratis ke public. Untuk

menunjuang pendapatan perusahaan selanjutnya diperoleh dengan menjual jasa

“support” untuk perusahaan yang ingin mengimplementasikan MySQL

2.8 Pengertian Sublime Text

Sublime Text adalah salah satu aplikasi perangkat lunak editor yang sering

digunakan oleh programmer untuk melakukan coding . Sublime text ini cocok

utnuk di pake di OS X,Windows versi low atau up dan linux.Sublime Text

mendukung berbagai bahasa pemrograman dan mampu menyajikan fitur

syntax highlight di semua bahasa pemrogramman yang didukung ataupun

dikembangkan oleh komunitas seperti; C, C++, C#, CSS, D, Dylan, Erlang,

HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown,

MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML.

Universitas Sumatera Utara

Page 28: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

25

BAB 3

PERANCANGAN SISTEM

3.1 Perancangan Sistem

Perancangan sistem adalah bentuk atau tahap lain analasis yang berguna untuk

mengeidentifikasi suatu masalah peluang dan tujuan dan mengatur arus data serta

data informasi sehingga menciptakan bentuk melalui pendekatan yang sistematis

3.2 Diagram Konteks

Diagram konteks adalah suatu bentuk model atau diagram yang menggambarkan

suatu bentuk sistem dalam ruang lingkupnya,dan diagram konteks merupakan alat

bantu untuk data flow diagram (DFD) yang membentuk bagian bagian tertentu

dalam suatu system

3.3 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan model dari sistem untuk

menggambarkan pembagian sistem ke modul yang lebih keci dan menggunakan

notasi-notasi dan menggambarkan bentuk suatu sistem. Salah satu keuntungan

menggunakan diagram alir data adalah memudahkan pemakai yang kurang

menguasai bidang komputer untuk mengerti sistem yang akan dikerjakan. Pada

tahap analisa, penanganan notasi simbol lingkaran dan anak panah

menggambarkan arus data dalam perancangan sistem sangat membantu dalam

komunikasi dengan pemakaian sistem menggunakan notasi–notasi untuk

menggambarkan arus dari data sistem.

Didalam DFD (Data Flow Diagram) mempnunyai bentuk level,yang

Universitas Sumatera Utara

Page 29: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

26

mencakup :

1) DFD level 0

Data Flow Diagram (DFD) level 0 atau yang disebut juga diagram

konteks yang menggambarkan bentuk lingkaran yang dapat mewakili bentuk

proses yang terdapat dalam suatu system.Alasan diagram konteks sering disebut

dengan penomoran level 0 karena merupakan tingkatan tertinggi dan level 0 ini

cenderung hanya menggambarkan desain system secara umum

2) DFD level 1

Data flow diagram (DFD) level 1 merukan suatu bentuk level yang

mewakili aliran system secara sebagian ataupun secara mendetail yang

menggambarkan aliran data secara kompleks

Tabel 3.1 Simbol-Simbol Data Flow Diagram

NO Simbol Fungsi

1

Eksternal Entity merupakan kesatuan di

luar lingkaran system yang dapat berupa

seseorang, organisasi yang dapat

mengirimkan data atau menerima data

dari sistem.

2

Arus data merupakan tempat

mengalirnya informasi menunjukkan

arus data berupa sistem.

Universitas Sumatera Utara

Page 30: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

27

3

Proses merupakan pengolahan data atau

aliran data masuk menjadi data aliran

keluar.

4

Penyimpanan data merupakan tempat

penyimpanan data yang ada di dalam

sistem.

3.4 Entity Relationship Diagram (ERD)

Menurut salah satu para ahli, Brady dan Loonam (2010), Entity Relationship

Diagram (ERD) merupakan teknik yang digunakan untuk memodelkan

kebutuhan data dari suatu organisasi, biasanya oleh System Analys dalam tahap

analisis persyaratan proyek pengembangan system. Sementara seolah-olah

teknik diagram atau alat peraga memberikan dasar untuk desain database

relasional yang mendasari sistem informasi yang dikembangkan.

Universitas Sumatera Utara

Page 31: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

28

ERD bersama-sama dengan detail pendukung merupakan model data yang

pada gilirannya digunakan sebagai spesifikasi untuk database. Atau pengertian

sempitnya adalah sebuah konsep yang mendeskripsikan hubungan antara

penyimpanan (database) dan didasarkan pada persepsi dari sebuah dunia nyata

yang terdiri dari sekumpulan objek yaitu disebut sebagai entity dan hubungan

atau relasi antar objek- objek tersebut.

3.5 Perancangan Database

Perancangan struktur database adalah untuk menentukan file database file

database yang digunakan seperti field, tipe data dan ukuran data. Dalam

merancang suatu sistem yang baik dibutuhkan beberapa file yang bertujuan untuk

memudahkan pengambilan informasi pengolahan data. File-file tersebut akan

berhubungan satu sama yang lainnya dan dapat digunakan sesuai dengan

kebutuhan pemakai atau user. Database tersimpan disimpanan luar komputer dan

digunakan perangkat lunak tertentu untuk memanupulasinya. Database merupakan

salah satu komponen yang penting dalam sistem informasi, karena berfungsi

sebagai basis penyedia informasi bagi para pemakainya. Perangkat lunak yang

digunakan untuk mengelola dan memanggil kueri (query) basis data disebut

sistem manajemen basis data (database management system, DBMS). Sistem

basis data dipelajari dalam ilmu informasi. Berikut rancangan tabel yang

digunakan dalam membangun aplikasi web ini :

1. Tabel Login Admin

Tabel Login Admin digunakan untuk menampung data-data yang berhubungan

dengan data login. Berikut ini adalah field-field yang dibuat dalam tabel login:

Universitas Sumatera Utara

Page 32: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

29

Tabel 3.5 Data Login Admin

Field Name Type Field Size Keterangan

Id_admin* Integer

11 Primary Key

Name Varchar 255 Name

User Varchar 255 User

Email

Password

Level

Varchar

Varchar

Tinyint

255

32

4

Email

Password

Level

2. Tabel Costumer

Tabel Pengajuan digunakan untuk menampung data-data yang berhubungan

dengan data Costumer Berikut field-field yang dibuat dalam tabel costumer:

Tabel 3.6 Tabel Costumer

Field Name Type Field Size Keterangan

Id Integer 11 Id

Nama Varchar 255 Nama

Alamat Text Alamat

Kota Varchar 30 Kota

Negara

Kode Pos

Handphone

Email

Password

Varchar

Varchar

Varchar

Varchar

Varchar

30

30

30

255

32

Negara

Kode Pos

HandPhone

Email

Password

Universitas Sumatera Utara

Page 33: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

30

3.6 Flowchart

Flowchart adalah sekumpulan simbol-simbol yang menunjukkan atau

menggambarkan rangkaian-rangkaian kegiatan-kegiatan program dari awal hingga

akhir, jadi flowchart juga digunakan untuk menggambarkan urutan langkah-

langkah pekerjaan disuatu algoritma.

Suatu program yang baik adalah program yang bebas dari kesalahn dan

menyusun sistematis agar prosesnya terlaksana secara efisien. Untuk itu sebelum

menyusun program harus dipikirkan terlebih dahulu langkah masalah yang ada

secara logis, sistematis dan menggunakan urutan-urutan proses digunakan data

flow diagram yang disebut flowchart.Flowchart adalah bagan-bagan yang

mempunyai arus yang menggambarkan langkah-langkah penyelesaian suatu

masalah. Flowchart merupakan cara penyajian dari suatu algoritma. . Penjelasan

arti dari lambang-lambang flowchart dapat didefinisikan seperti tabel dibawah ini

Tabel 3.6 Simbol Flowchart

NO SIMBOL KETERANGAN

1

Terminal untuk memulai atau

mengakhiri suatu program.

2

Proses, simbol ini menunjukkan

setiap pengolahan yang dilakukan

oleh komputer.

3

Input-Output, untuk memasukkan

data atau menunjukkann hasil

keluaran dari suatu proses.

Universitas Sumatera Utara

Page 34: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

31

4

Decision, suatu kondisi yang

menghasilkan beberapa

kemungkinan jawaban atau pilihan

5

Untuk menyatakan sekumpulkan

langkah proses yang ditulis sebagai

procedur

6

Connector, suatu prosedur akan

masuk atau keluar melalui simbol ini

dalam lembaran yang sama

7

Off-Line Connector, simbol masuk

atau keluarnya suatu prosedur pada

lembaran kertas lainnya.

8

Arus/Flow dari prosedur yang dapat

silakukan dariatas ke bawah,kiri ke

kanan atau sebaliknya.

9

Document, merupakan simbol

daridata yang berbentuk kertas

maupun informasi.

10

Database, menyediakan tempat

pengolahan data serta penyimpanan

dalam storage

11

Simbol untuk output, yang

ditunjukkan ke suatu device, seperti

primer, plotters, dll.

3.7 Perancangan Database

da

Universitas Sumatera Utara

Page 35: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

32

3.8 Flowchart

Start

Membentuk

bagan atau

sketsa informasi

Melakukan tes analisi bentuk dfd pada

sistem

Merancang database dan melakukan uji table sehinggar tericpa dataase

Menggambarkan bentuk desain

web dan merancang bentuk

Belanja lagi? Tidak

Selesai

Gambar 3.8 Flowchart

Checkout

Pilih Produk

Universitas Sumatera Utara

Page 36: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

33

BAB 4

PEMBAHASAN

4.1 Perancangan Sistem

4.1.1 Diagram Context

Gambar 4.1.1 Diagram Konteks

Toko Online

Pengunjung Member

Admin

Data Kontak Kami

Sign In

Data Produk

Data Kontak Kami

Sign In

Data Produk

Data Produk

Data Kategori

Hak Akses

Data Informasi

Data Pemesanan Barang dan Pembaaran

Data Username

Data Diri

Universitas Sumatera Utara

Page 37: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

34

4.1.2 DFD

Gambar 4.1.2 DFD LEVEL 0

Admin Data Entri

Data User

Data Product

Data Pengirim

Data Pembayaran

Costumer Registrasi

Login

User/Operator Pembelian

Logout

E-mail Pembayaran

Pengiriman Pengirim

Data Costumer

Daftar Belanja/Shopping Cart

Rekening

-Nama

-Kota

-Kode POS

-E-mail

-Alamat

-Negara

-Handphone

-Password

Barang

0

Sistem Penjualan

Toko Online

Universitas Sumatera Utara

Page 38: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

35

Gambar 4.1.2 DFD LEVEL 1

4.2 Perancangan Website

4.2.1 Halaman Panel Admi

Halaman panel admin ini berisi tentang isi dari website toko online. Mulai dari

manajemen produk, laporan order masuk oleh member, serta informasi berita-berita

tambahan yang terdapat pada footer tampilan awal website.

1.0

Entry

Data

2.0

Registrasi

3.0

Login

5.0

Logout

4.0

Pembelian

6.0

Pembayar

an

7.0

Proses

Order Transaksi Transaksi

Costumer/Pembeli

Order Daftar Belanjar/Cart

Transaksi

Universitas Sumatera Utara

Page 39: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

36

Gambar 4.2.1 Halaman Panel Admin

4.2.2 Halaman Manajemen Product

Pada halaman manajemen produk terdapat beberapa sub menu yang

berguna untuk mengubah dan menghapus informasi produk yaitu data produk,

sub produk dan kategori.

Gambar 4.2.2 Halaman Manajemen Produk

Universitas Sumatera Utara

Page 40: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

37

Gambar 4.2.2 Halaman Kategori Produk

4.3 Tampilan Website

4.3.1 Tampilan Awal Website

Gambar 4.2.2 Halaman Tampilan Awal Website

Universitas Sumatera Utara

Page 41: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

38

4.3.2 Tampilan Kategori Produk

-

Gambar 4.2.2 Halaman Tampilan Kategori Produk

Universitas Sumatera Utara

Page 42: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

39

4.3.3 Tampilan Pemesanan Barang

Gambar 4.2.2 Halaman Tampilan Pemesanan Barang

4.4 Pemeliharaan Sistem

Berdasarkan penjelasan dari halaman sebelumnya, diperlukan pemeliharaan

sistem agar sistem tersebut dapat berjalan sebagaimana mestinya. Adapun tujuan

dari pemeliharaan sistem ini adalah sebagai berikut:

1. Mencegah modifikasi sistem yang akan menyebabkan masalah lain.

2. Membuat modifikasi sistem yang sesuai dengan kebutuhan organisasi.

3. Menyempurnakan proses penyusunan sistem dan proses pemeliharaan

sistem dengan menganalisa informasi tentang modifikasi sistem.

4. Mengganti pemeliharaan sistem dengan survey sistem jika memodifikasi

yang diminati relatif besar.

Universitas Sumatera Utara

Page 43: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

40

4.5 Perancangan Sistem

4.5.1 Instalasi XAMPP

XAMPP 3.2.1 berfungsi sebagai web server yang menyediakan layanan untuk

memenuhi permintaan user yang akan mengakses e-application. Berikut adalah

tahapan misalnya:

1. non-aktikan anti-virus karena dapat menyebabkan beberapa komponen

XAMPP tidak bisa diinstall dengan lancar.

2. Setelah itu akan muncul tampilan sebagai berikut.

Gambar 4.5.1 Instalasi XAMPP 3.2.1

Kotak dialog ini berfungsi untuk menentukan lokasi penyimpanan XAMPP. Jika

sudah memilih folder, tekan next untuk melanjutkan atau back jika ingin kembali

ke langkah sebelumnya, atau cancel untuk membatalkan instalasi.

1. Pilih menu yang akan diinstal lalu tekan next, atau back untuk kembali ke

langkah sebelumnya, atau cancel untuk membatalkan instalasi.

Universitas Sumatera Utara

Page 44: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

41

Gambar 4.5.1 Instalasi XAMPP 3.2.1

2. Proses instalasi sedang berjalan. Proses ini membutuhkan waktu beberapa

menit.

Gambar 4.5.1 Instalasi XAMPP 3.2.1

Universitas Sumatera Utara

Page 45: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

42

3. XAMPP sudah terinstal dan siap digunakan sebagai web server. Untuk

menggunakan XAMPP, cukup jalankan XAMPP control panel.

Gambar 4.5.1 Instalasi XAMPP 3.2.1

4. XAMPP sudah berjalan dan siap untuk menjalankan web server.

Gambar 4.5.1 Control Panel XAMPP

Universitas Sumatera Utara

Page 46: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

43

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya maka pada bab ini penulis

dapat mengambil kesimpulan sebagai berikut :

1. Website ini dapat membantu Devian Shop untuk mempromosikan produk,

sehingga masyarakat luas mendapatkan informasi mengenai produk

Gaming,Brand Terbaru yang dijual.Sistem informasi Berbasis Web ini

penulis buat dengan bahasa pemrograman PHP dan menggunakan

MYSQL sebagai databasenya dan memanfaatkan jaringan internet untuk

publikasinya sehingga dapat dikonsumsi oleh publik.

2. Pemesanan produk IT dapat dilakukan secara online, sehingga pembeli

tidak harus datang ke toko SCS Devian Shop.

5.2 Saran

Berdasarkan kesimpulan di atas maka dapat diberikan saran – saran yang penulis

usulkan yang berguna nantinya dan yang menjadi bahan pertimbangan bagi

Masyarakat luas dalam menggunakan Toko Online Berbasis Web ini antara lain :

1. Dengan adanya sistem Toko Online yang telah dirancang maka Masyarakat

diharapkan dapat menggunakan atau memanfaatkan komputer dan fasilitas

internet dalam hal membeli produk-produk secara online sehingga dapat

meningkatkan pelayanan dan efektifitas kerja yang lebih baik bagi Devian

Shop

2. Kiranya Toko Online berbasis web ini dapat digunakan secara optimal agar

Universitas Sumatera Utara

Page 47: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

44

dapat memudahkan para penggunanya terutama dikalangan masyarakat yang

sangat sibuk sehingga tidak bias dating ke tokonya langsung.

Universitas Sumatera Utara

Page 48: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

45

DAFTAR PUSTAKA

Kadir,Abdul .2002. Penuntun Praktis Belajar SQL,Yogyakarta

Sutarman, 2003. Membangun Aplikasi Web dengan PHP dan MySQL,Yogyakrta

:Graha ilmu

Syafii, M.2005, Panduan Membuat Aplikasi Database dengan PHP,Yogyakarta

:Andi Offset

Kennet E.Kendal,Jullie E . Kendal.2003. Analisis dan Perancangan Sistem Jilid

1,Jakarta

Utomo, Eko Priyo. 2005. Berbisnis di Era Internet dengan E-Commerce,

Bandung.Penerbit : Rama Widya

Universitas Sumatera Utara

Page 49: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

Universitas Sumatera Utara

Page 50: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

Index.Php <?php include 'inc/header.php';?>

<?php include 'inc/slider.php';?>

<div class="main">

<div class="content">

<div class="content_top">

<div class="heading">

<h3>Superior Products</h3>

</div>

<div class="clear"></div>

</div>

<div class="section group">

<?php

$getFpd = $pd->getFeaturedProduct();

if ($getFpd) {

while ($result = $getFpd->fetch_assoc()) {

?>

<div class="grid_1_of_4 images_1_of_4">

<a href="details.php?proid=<?php echo

$result['productId']; ?>"><img src="admin/<?php echo $result['image']; ?>" alt="" /></a>

<h2><?php echo $result['productName']; ?></h2>

<p><?php echo $fm-

>textShorten($result['body'],60); ?></p>

<p><span class="price">$<?php echo

$result['price']; ?></span></p>

<div class="button"><span><a

href="details.php?proid=<?php echo $result['productId']; ?>"

class="details">Details</a></span></div>

</div>

<?php } } ?>

</div>

<div class="content_bottom">

<div class="heading">

<h3>New Products</h3>

</div>

<div class="clear"></div>

</div>

<div class="section group">

<?php

$getNpd = $pd->getNewProduct();

if ($getNpd) {

while ($result = $getNpd->fetch_assoc()) {

Universitas Sumatera Utara

Page 51: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

?>

<div class="grid_1_of_4 images_1_of_4">

<a href="details.php?proid=<?php echo

$result['productId']; ?>"><img class="img1" src="admin/<?php echo $result['image']; ?>"

/></a>

<h2><?php echo $result['productName']; ?></h2>

<p><span class="price">$<?php echo

$result['price']; ?></span></p>

<div class="button"><span><a

href="details.php?proid=<?php echo $result['productId']; ?>"

class="details">Details</a></span></div>

</div>

<?php } } ?>

</div>

</div>

</div>

<?php include 'inc/footer.php';?>

Login.Php <?php include 'inc/header.php';?>

<?php

$login = Session::get("cuslogin");

if ($login == true) {

header("Location:order.php");

}

?>

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['login'])) {

$custLogin = $cmr->customerLogin($_POST);

}

?>

<div class="main">

<div class="content">

<div class="login_panel">

<?php

if (isset($custLogin)) {

echo $custLogin;

}

?>

<h3>Existing Customers</h3>

<p>Sign in with the form </p>

<form action="" method="post">

<input name="email" placeholder="Email" type="text"/>

<input name="pass" placeholder="Password" type="password"/>

Universitas Sumatera Utara

Page 52: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

<div class="buttons"><div><button class="grey" name="login">Sign

In</button></div></div>

</div>

</form>

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['register'])) {

$customerReg = $cmr->customerRegistration($_POST);

}

?>

<div class="register_account">

<?php

if (isset($customerReg)) {

echo $customerReg;

}

?>

<h3>Register New Account</h3>

<form action="" method="post">

<table>

<tbody>

<tr>

<td>

<div>

<input type="text" name="name"

placeholder="Name"/>

</div>

<div>

<input type="text" name="city"

placeholder="City"/>

</div>

<div>

<input type="text"

name="zip" placeholder="Zip-Code"/>

</div>

<div>

<input type="text"

name="email" placeholder="Email"/>

</div>

</td>

<td>

<div>

<input type="text" name="address"

placeholder="Address"/>

</div>

Universitas Sumatera Utara

Page 53: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

<div>

<input type="text" name="country"

placeholder="Country"/>

</div>

<div>

<input type="text" name="phone" placeholder="Phone"/>

</div>

<div>

<input type="text" name="pass"

placeholder="Password"/>

</div>

</td>

</tr>

</tbody></table>

<div class="search"><div><button class="grey" name="register">Create

Account</button></div></div>

<div class="clear"></div>

</form>

</div>

<div class="clear"></div>

</div>

</div>

<?php include 'inc/footer.php';?>

Profile.Php <?php include 'inc/header.php';?>

<?php

$login = Session::get("cuslogin");

if ($login == false) {

header("Location:login.php");

}

?>

<style>

.tblone{width: 550px;margin: 0 auto;border: 2px solid #ddd;margin-bottom: 10px;}

.tblone tr td{text-align: justify;}

</style>

<div class="main">

<div class="content">

<div class="section group">

<?php

$id = Session::get("cmrId");

$getdata = $cmr->getCustomerData($id);

if ($getdata) {

while ($result = $getdata->fetch_assoc()) {

Universitas Sumatera Utara

Page 54: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

?>

<table class="tblone">

<tr>

<td colspan="3"><h2>Your Profile

Details</h2></td>

</tr>

<tr>

<td width="20%">Name</td>

<td width="5%">:</td>

<td><?php echo $result['name'];?></td>

</tr>

<tr>

<td>Phone</td>

<td>:</td>

<td><?php echo $result['phone'];?></td>

</tr>

<tr>

<td>Email</td>

<td>:</td>

<td><?php echo $result['email'];?></td>

</tr>

<tr>

<td>Address</td>

<td>:</td>

<td><?php echo

$result['address'];?></td>

</tr>

<tr>

<td>City</td>

<td>:</td>

<td><?php echo $result['city'];?></td>

</tr>

<tr>

<td>Zipcode</td>

<td>:</td>

<td><?php echo $result['zip'];?></td>

</tr>

<tr>

<td>Country</td>

<td>:</td>

<td><?php echo

$result['country'];?></td>

</tr>

<tr>

<td></td>

<td></td>

Universitas Sumatera Utara

Page 55: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

<td><a href="editprofile.php">Update

Details</a></td>

</tr>

</table>

<?php }} ?>

</div>

</div>

</div>

<?php include 'inc/footer.php';?>

AdminLogin.Php

<?php

$filepath = realpath(dirname(__FILE__));

include_once ($filepath.'/../lib/Session.php');

Session::checkLogin();

include_once ($filepath.'/../lib/Database.php');

include_once ($filepath.'/../helpers/Formate.php');

?>

<?php

class Adminlogin

{

private $db;

private $fm;

public function __construct()

{

$this->db = new Database();

$this->fm = new Format();

}

public function adminlogin($adminUser,$adminPassword){

$adminUser = $this->fm->validation($adminUser);

$adminPassword = $this->fm->validation($adminPassword);

$adminUser = mysqli_real_escape_string($this->db->link, $adminUser);

$adminPassword = mysqli_real_escape_string($this->db->link, $adminPassword);

Universitas Sumatera Utara

Page 56: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

if (empty($adminUser) ||empty($adminPassword) ) {

$loginmsg = "Username or Password must not be empty !";

return $loginmsg;

} else{

$query = "SELECT * FROM tbl_admin WHERE adminUser =

'$adminUser'

AND adminPassword = '$adminPassword'";

$result = $this->db->select($query);

if ($result != false) {

$value = $result->fetch_assoc();

Session::set("adminlogin",true);

Session::set("adminId",$value['adminId']);

Session::set("adminUser",$value['adminUser']);

Session::set("adminName",$value['adminName']);

header("Location:dashboard.php");

} else{

$loginmsg = "Username or Password not match !";

return $loginmsg;

}

}

}

}

?>

Config.Php

<?php

define("DB_HOST", "localhost");

define("DB_USER", "root");

define("DB_PASS", "");

define("DB_NAME", "db_shop");

?>

Not Found.Php

Universitas Sumatera Utara

Page 57: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

<?php include 'inc/header.php';?>

<style>

.notfound{}

.notfound h2{font-size: 100px;line-height: 130px;text-align: center;}

.notfound h2 span{display: block;color: red;font-size: 170px;}

</style>

<div class="main">

<div class="content">

<div class="section group">

<div class="notfound">

<h2><span>404</span> Not Found</h2>

</div>

</div>

<div class="clear"></div>

</div>

</div>

<?php include 'inc/footer.php';?>

Order Details.Php

<?php include 'inc/header.php';?>

<?php

$login = Session::get("cuslogin");

if ($login == false) {

header("Location:login.php");

}

?>

<?php

if (isset($_GET['customerId'])) {

$id = $_GET['customerId'];

$confirm = $ct->productShiftConfirm($id);

}

?>

<style>

.tblone tr td{text-align: justify;}

</style>

<div class="main">

<div class="content">

<div class="section group">

<div class="order">

Universitas Sumatera Utara

Page 58: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

<h2>Your Ordered Details</h2>

<table class="tblone">

<tr>

<th>No</th>

<th>Product Name</th>

<th>Image</th>

<th>Quantity</th>

<th>Price</th>

<th>Date</th>

<th>Status</th>

<th>Action</th>

</tr>

<tr>

<?php

$cmrId = Session::get("cmrId");

$getOrder = $ct->getOrderedProduct($cmrId);

if ($getOrder) {

$i = 0;

while ($result = $getOrder->fetch_assoc()) {

$i++;

?>

<td><?php echo $i;?></td>

<td><?php echo $result['productName']; ?></td>

<td><img src="admin/<?php echo $result['image']; ?>"

alt=""/></td>

<td><?php echo $result['quantity']; ?></td>

<td>Tk. <?php echo $result['price'];?></td>

<td><?php echo $fm->formatDate($result['date']); ?></td>

<td><?php

if ($result['status'] == '0') {

echo "Pending";

}elseif($result['status'] == '1'){

echo "Shifted";

} else{

echo "Ok";

}

?></td>

</td>

Universitas Sumatera Utara

Page 59: RANCANG BANGUN APLIKASI TOKO ONLINTE UNTUK …

<?php

if ($result['status'] == '1') { ?>

<td> <a href="?customerId=<?php echo $result['id'];

?>">Confirm</a><td>

<?php } elseif($result['status'] == '2'){?>

<td>Ok</td>

<?php }elseif ($result['status'] == '0') {?>

<td>N/A</td>

<?php } ?>

</tr>

<?php } } ?>

</table>

</div>

</div>

<div class="clear"></div>

</div>

</div>

<?php include 'inc/footer.php';?>

Universitas Sumatera Utara