PERANCANGAN APLIKASI PENJUALAN ELEKTRONIK ONLINE 24JAM.COM BERBASIS WEB LAPORAN TUGAS AKHIR PUTRI HANDAYANI

(1)

LAPORAN TUGAS AKHIR

PUTRI HANDAYANI 152406066

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2018

(2)

LAPORAN TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh gelar Ahli Madya

PUTRI HANDAYANI 152406066

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2018

(3)

PERNYATAAN ORISINALITAS

PERANCANGAN APLIKASI PENJUALAN ELEKTRONIK ONLINE

“24JAM.COM” BERBASIS WEB

LAPORAN TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juli 2018

PUTRI HANDAYANI 152406066

(4)

(5)

PERANCANGAN APLIKASI PENJUALAN ELEKTRONIK ONLINE

“24JAM.COM” BERBASIS WEB

ABSTRAK

Perancangan aplikasi internet e-commerce pada penjualan elektronik online

“24JAM.COM” bertujuan untuk mempermudah masyarakat dengan sistem informasi terkomputerisasi yang berbasis web yang meliputi catalog produk, transaksi penjualan dan profil perusahaan yang diharapkan dapat meningkatkan pemasukkan penjualan. Dan juga meningkatkan 24JAM.COM dalam memperoleh informasi pemesanan (online) yang sebelumnya diketahui dari brosur-brosur, sehingga menghemat waktu, aplikasi ini mempermudah masyarakat dalam melakukan pemesanan secara (online), sehingga dapat mengefisiensi dan efektif. Sistem perancangan dalam pembuatan aplikasi penjualan elektronik online “24JAM.COM”

berbasis web ini dikembangkan dengan menggunakan beberapa software yakni HTML, Javascript, CSS ,PHP dan MySQL. Dengan menggunakan Javascript dan CSS maka pengerjaan website akan lebih cepat dan mudah.

Kata Kunci: Aplikasi, internet, e-commerce, online

(6)

DEVELOPING ONLINE MARKETPLACE WEB-BASED APPLICATIONS

"24JAM.COM"

ABSTRACT

The design of internet e-commerce application on online electronic sales

"24JAM.COM" aims to simplify the community with a computerized information system based on the web that includes product catalogs, sales transactions and company profiles which expected to increase sales revenue and increase 24JAM.COM in obtaining information orders(online) which previously known from the brochures, so it may save time, this application simplify the community in ordering online, so it can be efficient and effective. Build an online ordering and information system. Design system in developing online marketplace web-based application "24JAM.COM" is using some software such as HTML, Javascript, CSS, PHP and MySQL. By using Javascript and CSS, the website may run faster and easier.

Keywords: Apps, internet, e-commerce, online

(7)

PENGHARGAAN

Puji syukur panjatkan kehadirat Tuhan Yang Maha Esa yang telah melimpahkan rahmat dan hidayah-Nya penulis menyelesaikan penyusunan tugas akhir ini dengan judul Perancangan Aplikasi Penjualan Elektronik Online

“24JAM.COM” Berbasis Web.

Pada kesempatan ini penulis mengucapkan banyak terima kasih kepada pihak yang telah banyak membimbing, mengarahkan, membantu, dan memberikan dukungan semangat dan kasih sayang dalam menyelesaikan tugas akhir ini. Penulis mengucapkan terima kasih kepada :

1. Ibu Marischa Elveny, S.TI, M.Kom. selaku dosen pembimbing yang telah bersedia memberi bimbingan dan petunjuk serta nasehat kepada penulis dalam menyelesaikan tugas akhir ini.

2. Bapak Prof. Dr. Kerista Sebayang, M.S. selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

3. Ibu Dra. Normalina Napitupulu, M.Sc. selaku Ketua Program Studi D3 Teknik Informatika FMIPA USU dan seluruh dosen-dosen yang telah membimbing pemulis selama menjalani pendidikan di program studi D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

4. Terkhusus penulis ucapkan terima kasih kepada Ayahanda tercinta Ir. H.

Hardiono dan Ibunda tersayang Hj. Ainul Mardyah, Abang, kakak serta sahabat baik yang telah memberikan doa, dukungan materil, motivasi, semangat dan kasih sayang yang tiada henti kepada penulis sehingga penulis dapat menyelesaikan tugas akhir ini.

Medan, Juli 2018

Putri Handayani

(8)

DAFTAR ISI

Halaman

PERNYATAAN ORISINALITAS i

PERSETUJUAN LAPORAN TUGAS AKHIR ii

ABSTRAK iii

ABSTRACT iv

PENGHARGAAN v

DAFTAR ISI vi

DAFTAR TABEL viii

DAFTAR GAMBAR ix

DAFTAR LAMPIRAN x

BAB 1 PENDAHULUAN

1.1 Latar Belakang 1

1.2 Rumusan Masalah 2

1.3 Batasan Masalah 2

1.4 Tujuan 3

1.5 Manfaat 3

1.6 Metodologi Penelitian 3

1.7 Sistematika Penulisan 5

BAB 2 TINJAUAN PUSTAKA

2.1 Pengertian E-Commerce 6

2.2 Pengenalan Internet 7

2.2.1 Network 7

2.2.2 Web Server 7

2.2.3 World Wide Web (WWW) 8

2.3 Pengenalan HTML 9

2.3.1 Sejarah Asal Mula HTML 9

2.3.2 Struktur Dasar HTML 10

2.3.3 Sintaks Dasar HTML 11

2.4 Pengenalan Personal Home Page (PHP) 12

2.4.1 Sejarah Asal Mula PHP 13

2.4.2 Variabel pada PHP 14

2.5 Sublime Text 15

2.6 Cascading Style Sheet (CSS) 15

2.6.1 Struktur CSS 16

2.6.2 Penulisan CSS 16

2.7 JavaScript 17

2.7.1 Penulisan Javascript 18

2.7.2 Variabel 19

2.8 Algoritma 19

2.8.1 Sejarah Algoritma 20

2.8.2 Jenis-jenis Algoritma 20

(9)

2.9 Flowchart 21 BAB 3 ANALISIS DAN PERANCANGAN SISTEM

3.1 Perancangan Sistem 23

3.2 Data Flow Diagram (DFD) Perancangan Aplikasi 23 3.2.1 Diagram Konteks Aplikasi Toko Online 24JAM.COM 24 3.2.2 Data Flow Diagram (DFD) Level 0 25

3.3 Perancangan Database Aplikasi 25

3.3.1 ERD ( Entity Relationship Diagram ) 26 3.3.2 Relationship (Relasi Antar Tabel) 27

3.3.3 Struktur Tabel 27

3.4 Flowchart 24JAM.COM 31

3.4.1 Flowchart Menu Utama 31

3.4.2 Flowchart Login Admin 32

3.4.3 Flowchart Menu Admin 33

3.5 Langkah-Langkah Toko online 24JAM.COM 34 BAB 4 IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem 35

4.2 Tujuan Implementasi Sistem 35

4.3 Komponen Utama Dalam Implementasi Sistem 36 4.3.1 Kebutuhan Perangkat Keras (Hardware) 36 4.3.2 Kebutuhan Perangkat Lunak (Software) 36

4.3.3 Kebutuhan Brainware 37

4.4 Instalasi XAMPP 37

4.5 Tampilan Halaman Website 40

BAB 5 KESIMPULAN DAN SARAN

5.1 Kesimpulan 44

5.2 Saran 44

DAFTAR PUSTAKA 45

LAMPIRAN 46

(10)

DAFTAR TABEL

Nomor Judul Halaman Tabel

2.1 Arti Lambang Lambang Flowchart 21

3.1 Tabel Admin 27

3.2 Tabel Hubungi 28

3.3 Tabel Kategori 28

3.4 Tabel Kota 28

3.5 Tabel Kustomer 28

3.6 Tabel Modul 29

3.7 Tabel Orders 29

3.8 Tabel Order Detail 29

3.9 Tabel Order Temp 30

3.10 Tabel Produk 30

(11)

DAFTAR GAMBAR

Nomor Judul Halaman Gambar

1.1 Flowchart 24JAM.COM 21

3.1 Diagram Konteks 24

3.2 Dfd Level 0 25

3.3 ERD 26

3.4 Relationship 27

3.5 Flowchart Menu Utama 31

3.6 Alur Flowchart Login Admin 32

3.7 Alur Flowchart Menu Admin 33

4.1 Instalasi XAMPP 3.2.2 (1) 37

4.6 Contol Panel XAMPP 40

4.7 Halaman Home Web 40

4.8 Halaman Tentang Profile Web 41

4.9 Halaman Produk-Produk 41

4.10 Halaman Cara Pemesanan 42

4.11 Halaman Claim Barang Rusak 42

4.12 Halaman Keranjang Belanja 43

4.13 Halaman Transaksi Selesai 43

(12)

DAFTAR LAMPIRAN

Lampiran A Listing Program

Lampiran B Surat Keterangan Dosen Pembimbing Tugas Akhir Lampiran C Surat Keterangan Hasil Uji Program Tugas Akhir Lampiran D Kartu Bimbingan Tugas Akhir Mahasiswa

(13)

1.1 Latar Belakang Masalah

Perkembangan teknologi informasi pada saat ini khususnya teknologi internet, tidak menutup kemungkinan banyak potensi dan sumber daya yang bisa dimanfaatkan. Banyaknya pembisnis yang merambah dunia global mulai dari kelas bawah sampai kelas atas menambah ketatnya persaingan penggunaan website e- commerce.

Teknologi informasi saat ini sudah menjadi bagian utama dalam kegiatan bisnis dunia. Dengan berbasis teknologi informasi nilai bisnis diyakini akan semakin meningkat, oleh karena itu mutlak diperlukan pengembangan bisnis yang berbasis teknologi informasi. Bisnis secara atau berbasis teknologi informasi dapat melengkapi atau bahkan dapat menggantikan metode bisnis secara manual atau offline. Dengan berbasis teknologi informasi informasi kendala – kendala tersebut dapat diatasi. Secara khusus yaitu dengan perdagangan berbasis teknologi informasi / online atau yang lebih populer disebut e-commerce

Melalui website e-commerce penjual dapat menampilkan produk – produk terbarunya, menampilkan informasi menarik berupa promo, diskon atau info dari produsen produk. Dengan ini customer dapat menghemat waktunya untuk mengetahui apa saja hal terbaru yang ingin diketahui, cukup dengan mengunjungi website yang dapat dilakukan dimana saja customer dapat mengetahui hal yang diinginkannya, tidak harus mendatangi toko penjual.

Melalui fitur – fitur yang ada pada website e-commerce interaksi hubungan antara penjual dan customer dapat terus terjaga dan terjalin secara continue. Dengan memperhatikan fitur website, tampilan website yang menarik dan interaktif dengan customer serta terjaminnya keamanan dan kemudahan dalam pembayaran secara online dan proses ketepatan pengiriman barang yang dapat menjadi masalah dalam hal e-commerce, tujuan perusahaan melalui e-commerce akan tercapai dengan baik.

(14)

Hal itu dapat meningkatkan mutu layanan untuk customer yang secara tidak langsung juga merupakan upaya dalam meningkatkan mutu nilai dari bisnis.

Ada beberapa penelitian yang telah dibuat sebelumnya yang menjadi referensi untuk memperbanyak bahan kajian pada penelitian penulis, salah satunya yaitu dengan judul Implementasi E-Commerce Sebagai Media Penjualan Online (Studi Kasus Pada Toko Pastbrik Kota Malang). Jenis penelitian yang dilakukan adalah kualitatif. Penelitian ini mengambil studi kasus pada toko Pastbrik Kota Malang. Sumber data yang diperoleh yaitu melalui sumber data primer dan sumber data sekunder. Teknik Pengumpulan data yang dilakukan peneliti menggunakan observasi, wawancara dan dokumentasi. (Shabur Miftah Maulana, Heru Susilo &

Riyadi, 2015).

Penelitian lainnya yaitu dengan judul APLIKASI PENJUALAN PAKAIAN SECARA ONLINE (Studi Kasus: Tauko Medan). Sistem ini hanya dipusatkan untuk jual beli barang dagangan toko tauko Medan tidak dengan barang dagangan yang lain. (Didik Aryato, Feriani A. Tarigan, 2015).

Oleh karena itu, diperlukan sistem yang terkomputerisasi dan didesain secara khusus untuk mempermudah dan memperlancar proses jual beli. Dengan pentingnya sistem informasi dalam suatu jual beli, maka penulis mencoba membuat suatu sistem dengan judul “PERANCANGAN APLIKASI PENJUALAN ELEKTRONIK ONLINE “24JAM.COM” BERBASIS WEB” dengan tujuan untuk mepermudah dalam proses jual beli, cepat, dan efisien.

1.2 Rumusan Masalah

Berdasarkan latar belakang yang telah diuraikan, maka rumusan masalah dalam penelitian ini yaitu :

Masih banyak konsumen yang masih manual dalam berbelanja

(15)

1.3 Batasan Masalah

Batasan masalah dilakukan agar penulis dapat memberikan pemahaman yang terarah dan sesuai dengan yang diharapkan. Agar pembahasan tidak menyimpang dari pokok perumusan masalah yang ada, maka permasalahan yang akan dibahas pada aplikasi ini antara lain :

1. Sistem ini dirancang dengan menggunakan PHP dan server database yang digunakan adalah MySQL.

2. Tidak adanya sistem refund pada aplikasi online tersebut.

3. Web ini hanya menjual alat-alat elektronik rumah tangga.

1.4 Tujuan Penelitian

Berdasarkan latar belakang dan rumusan masalah yang telah diuraikan, maka tujuan dari penelitian ini adalah :

1. Bertujan agar mempermudah dalam hal penjualan dan pembelian barang, sehingga jika seseorang ingin membeli sesuatu tidak perlu datang jauh jauh ketoko untuk membeli barang yang diperlukan.

2. Memenuhi sebagian syarat mengikuti Ujian Tugas Akhir Program Diploma III (DIII) Program Studi Teknik Informatika di Universitas Sumatera Utara.

1.5 Manfaat Penelitian

Berdasarkan tujuan yang telah diuraikan, maka adapun manfaat dari penelitian ini adalah :

1. Mempermudah konsumen dalam urusan berbelanja.

2. Perusahaan atau pemilik usaha tidak perlu mengeluarkan biaya yang lebih dalam menyediakan toko atau gedung serta pegawainya.

(16)

1.6 Metodologi Penelitian

Metode adalah suatu cara atau teknik yang sistematik untuk mengerjakan atau menyelesaikan sesuatu. Berikut ini metodologi penelitian yang digunakan dalam membangun aplikasi ini, yaitu :

1. Penelitian Pustaka

Penelitian yang dilakukan penulis di perpustakaan dan internet untuk mendapatkan bahan teoritis untuk membangun sistem informasi yang efektif dan efisien.

2. Perancangan (Desain)

Setelah terkumpul data, penulis akan mendesain sistem sesuai dengan data – data yang telah diperoleh.

3. Penulisan Program (Coding)

Membuat program didalam aplikasi agar dapat berjalan sesuai dengan yang difungsikan.

4. Uji Program

Pengujian akan dilaksanakan jika program telah selesai dikerjakan. Bila saat pengujian terdapat kesalahan maka perlu adanya perbaikan terhadap program agar menghasilkan hasil yang maksimal.

(17)

start Registrasi User registasi

Login

Belanja? Log out

Pilih item ke cart

Ubah item?

Pilih item lainnya

checkout

Y

T

Y

T

Gambar 1.1 Flowchart Aplikasi Toko Online “24JAM.COM” Berbasis Web

1.7 Sistematika Penulisan

Sistematika penulisan laporan Tugas Akhir ini adalah sebagai berikut:

BAB 1 : PENDAHULUAN

Penulis menguraikan Latar Belakang, Rumusan Masalah, Batasan Masalah, Maksud Dan Tujuan Penelitian, Manfaat Penelitian, Metode Penelitian dan Sistematika Penulisan.

(18)

BAB 2 : TINJAUAN PUSTAKA

Dalam bab ini penulis menguraikan beberapa hal yang berhubungan dengan aplikasi web statis yang ingin dibangun penulis yaitu sejarah singkat internet, E-Commerce, World Wide Web, HTML (HyperText Markup Language), pengenalan PHP dan MySQL, teori flowchart dan algoritma.

BAB 3 : PERANCANGAN SISTEM

Dalam bab ini penulis menguraikan tentang perancangan sistem yang dirancang yang meliputi perancangan layout, gambaran aplikasi web yang akan dibuat serta bagaimana algoritma aplikasi tersebut saat dijalankan.

BAB 4 : IMPLEMENTASI SISTEM

Dalam bab ini penulis menyajikan tentang pengertian implementasi sistem, tujuan implementasi sistem serta spesifikasi aplikasi.

BAB 5 : KESIMPULAN DAN SARAN

Dalam bab ini penulis menguraikan tentang kesimpulan dan saran.

(19)

2.1. Pengertian E-Commerce

Internet memberikan kesempatan untuk menciptakan pasar, dan melayani pelanggan dengan cara yang tak terbayangkan sampai sekarang. Beberapa tahun yang lalu banyak melihat perdagangan elektronik hanya sebagai perdagangan menggunakan jaringan online dan EDI (Electronic Data Interchange). Pengarahan ini menetapkan lingkup perdagangan Internet, menunjukkan peluang dan tantangan, dan memberikan wawasan ke dalam strategi pengusaha yang berhasil.

E-Commerce adalah penggunaan Internet untuk semua fase menciptakan dan menyelesaikan transaksi bisnis. Dalam arti luas kita melihat Perdagangan Internet sebagai juga termasuk:

1. Penjualan penuh dan pemasaran siklus - misalnya, dengan menganalisis umpan balik secara online untuk memastikan kebutuhan pelanggan.

2. Mengidentifikasi pasar baru - melalui paparan khalayak global melalui World Wide Web.

3. Mengembangkan hubungan pelanggan yang sedang berlangsung - mencapai loyalitas melalui interaksi yang berkelanjutan email.

4. Membantu pelanggan potensial dengan keputusan pembelian mereka - misalnya dengan membimbing mereka melalui pilihan produk dengan cara yang cerdas.

5. Menyediakan poin round-the-clock dijual - sehingga mudah bagi pembeli untuk memesan secara online, terlepas dari lokasi.

6. Manajemen Supply Chain - mendukung mereka dalam rantai pasokan, seperti dealer dan distributor, melalui interaksi online.

7. Berkelanjutan Dukungan Pelanggan - memberikan dukungan yang luas purna jual kepada pelanggan dengan metode online; sehingga meningkatkan kepuasan, memperdalam hubungan pelanggan dan menutup loop jual melalui ulangi dan pembelian onging.

(20)

Perspektif yang lebih luas dari E-Commerce sebagai hubungan berulang berkelanjutan yang menggunakan email, daftar diskusi, dan fasilitas internet lainnya serta World Wide Web adalah strategi yang paling sukses entrepreneurs. Seperti dalam pemasaran lainnya, kategori utama E-Commerce adalah bisnis-ke-bisnis dan business-to-consumer.

2.2. Pengenalan Internet

Internet (Interconnected Network) merupakan jaringan komputer yang terdiri dari jaringan independen yang dihubungkan satu dengan yang lainnya. Secara etimologis, internet berasal dari bahasa Inggris yakni Inter berarti antar dan Net yang berarti jaringan sehingga dapat diartikan hubungan antar jaringan.

Sampai saat ini internet sudah menghubungkan lebih dari 1 juta jaringan komputer dengan pemakai lebih dari 100 juta orang. Internet adalah jaringan luas di komputer yang lazim disebut dengan World Wide Web, yang secara ringkas internet adalah sumber informasi dan alat komunikasi serta hiburan.

2.2.1. Network

Network adalah jaringan sistem komunikasi data yang melibatkan sebuah atau lebih sistem komputer yang dihubungkan dengan jalur transmisi alat komunikasi membentuk satu sistem. Dengan network, komputer yang satu dapat menggunakan data di komputer lain, dapat mencetak laporan di printer komputer lain, dapat memberi berita ke komputer lain walaupun berlainan area. Network merupakan cara yang sangat berguna untuk mengintegrasikan sistem informasi dan menyalurkan arus informasi dari satu area ke area lainnya.

2.2.2. Web Server

Web server adalah internet server yang mampu untuk melayani koneksi perpindahan data dalam protokol http web server dari internet server di samping e- mail. Dikarenakan web server dirancang untuk menampilkan data, dimulai dari teks,

(21)

hypertext, gambar, yang merupakan keunggulan dari web sehingga web tidak hanya dapat diterima di universitas tetapi di seluruh perusahaan komersial yang dapat menampilkan datanya dalam internet. Macam – macam web server antara lain Apache (Open Source), Xitami, IIS, PWS.

Website (situs web) merupakan alamat (URL) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan berdasarkan topik tertentu. URL adalah suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu web server. Situs atau web dapat dikategorikan menjadi 2 yaitu :

1. Web Static, yaitu web yang berisi atau menampilkan infomasi – informasi yang sifatnya statis (tetap).

2. Web Dinamic, yaitu web yang menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya dinamis.

2.2.3. World Wide Web (WWW)

World Wide Web (WWW) adalah jaringan tak terbatas komputer yang dikategorikan menjadi dua, yaitu Client dan Server dengan menggunakan software khusus membentuk sebuah jaringan yang disebut jaringan client – server. Pada prinsipnya World Wide Web bekerja dengan cara menampilkan file – file HTML yang berasal dari server web pada program client khusus, yaitu browser web. Program browser web pada client mengirimkan permintaan kepada server web, yang kemudian akan dikirimkan oleh server dalam bentuk HTML. File HTML berisi instruksi yang diperlukan untuk membentuk tampilan. Perintah – perintah HTML ini kemudian diterjemahkan oleh browser web sehingga isi informasinya dapat ditampilkan secara visual kepada pengguna.

2.2.4. Hyper Text Transfer Protocol (HTTP)

Hyper Text Transfer Protocol (HTTP) adalah suatu protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam menyediakan dokumen yang diminta web browser. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML. Apabila kita menjelajah web

(22)

dan pada address tertulis seperti http://www.google.com ini merupakan salah satu penggunan protokol HTTP dalam web.

2.3. Pengenalan HTML

Hypertext Markup Language (HTML) adalah script di mana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri adalah suatu dokumen teks biasa yang mudah dimengerti dibanding bahasa pemrograman lainnya, dan karena bentuknya itu maka HTML dapat dibaca oleh berbagai platform seperti Windows, Linux, dan Macintosh. Kata “Markup Language“ pada HTML menunjukkan fasilitas yang berupa tanda tertentu dalam skrip HTML dimana kita bisa mengatur judul, garis, tabel, gambar, dan lain – lain dengan perintah yang telah ditentukan pada elemen HTML.

Penamaan dokumen HTML dapat dilakukan dengan memilih suatu nama, sembarang nama, kemudian menambahkan sebuah ekstensi “.htm” atau

“.html” (tanda kutip tidak perlu dituliskan karena digunakan sebagai penjelas saja).

2.3.1. Sejarah Asal Mula HTML

Sejarah html berawal pada tahun 1980 ketika IBM berniat untuk membuatkan suatu bahasa kode untuk menggabungkan teks dengan pemformatan agar mengenali elemen dokumen. Bahasa yang menggunakan tanda-tanda ini dinamakan Markup Language.

Pada tahun 1986, ISO mengeluarkan standarisasi bahasa markup berdasarkan GML dengan nama Standard Generalized Markup Language (SGML). Pada tahun 1989, Caillau Tim bekerja sama dengan Banners Lee Robert, ketika bekerja di CERN. Mencoba untuk mengembangkan SGML. Dari tangan merekalah lahir HTML (Hyper Text Markup Language) yang kini digunakan untuk membuat halaman website. HTML ini pertama kali dipopulerkan oleh Browser Mosaic.

Sejak tahun 1990, bahasa ini mengalami perkembangan yang cukup pesat.

Apalagi sejak tahun 1996, World Wide Web Consortium (W3C) turut mengembangkan html dan mengeluarkan versi 3.2.

(23)

2.3.2. Struktur Dasar HTML

HTML terdiri dari beberapa bagian yang fungsinya sebagai penanda suatu kelompok perintah tertentu, misalnya kelompok perintah form yang ditandai dengan kode <form>, judul dengan <title> dan sebagainya. Untuk mengetahui lebih lanjut mengenai bagian – bagian HTML perhatikan skema di bawah ini :

<html>

<head>

<title> </title>

</head>

<body>

isi dari halaman web

</body>

</html>

Keterangan:

1. Dokumen HTML selalu diawali dengan tanda tag pembuka <html> dan diakhiri dengan tanda tag penutup </html>

2. Pada elemen head <head> </head>, dapat kita sisipkan kode – kode untuk menuliskan keterangan tentang dokumen HTML. Atau dapat juga kita sisipkan kode – kode pemrograman web seperti JavaScript, VBScripts, atau CSS untuk menambah daya tarik pada situs yang kita buat agar lebih menarik dan dinamis.

3. Elemen body <body> </body> berisi tag – tag untuk isi atau layout tampilan situs kita, seperti <font></font>, <table></table>,

<form></form>.

Jadi jelas bahwa elemen adalah suatu bagian yang besar yang terdiri dari kode tag tersebut. Sedangkan tag hanyalah merupakan bagian dari elemen. Tag adalah kode – kode yang digunakan untuk men-setting dokumen HTML. Secara garis besar bentuk umum tag adalah sebagai berikut: <tag-awal>TEKS</tag-akhir>.

(24)

2.3.3. Sintaks Dasar HTML

Sintaks dasar meliputi bagian-bagian perintah dasar yang dimiliki oleh html, diantaranya sebagai berikut :

1. P (Paragraph), berfungsi untuk mengganti paragraph yang diikuti dengan baris kosong di awal dan di akhir paragraph. Cara penggunaannya dapat dilakukan dengan perintah tag <p> dan diakhiri dengan tag </p>. Jika tidak diberi tanda penutupnya, maka seluruh file yang berada di bawahnya akan diikuti dengan baris kosong di akhir paragraph.

2. BR (Line Break), berfungsi mengganti baris.

Sintaksnya : <br>

3. H1, H2, H3, H4, H5, H6 (Header), berfungsi untuk membuat header dengan urutan enam jenis berbeda dengan tercetak tebal.

Sintaksnya :

4. B (Bold), berfungsi untuk membuat tampilan teks tercetak tebal.

Sintaksnya : <b>……</b>

5. i (italic), berfungsi untuk memebuat tampilan teks tercetak miring.

Sintaksnya : <i>……</i>

6. U (underline), berfungsi untuk membuat tampilan teks tercetak garis bawah.

Sintaksnya : <u>……</u>

7. PRE (Preformated Text), berfungsi untuk menampilkan teks apa adanya.

Sintaksnya :

<PRE>

……

</PRE>

8. Center, berfungsi untuk menampilkan teks dengan posisi horizontal tengah.

Sintaksnya :

……

</ center >

9. BaseFont, berfungsi untuk mengubah dasar ukuran huruf dari web browser.

(25)

Sintaksnya :

10. Font, berfungsi untuk mengubah jenis, ukuran, warna, dan tampilan huruf.

Sintaksnya :

……

</ font >

11. HR (Horizontal Rule), berfungsi untuk membuat garis bawah.

Sintaksnya : <hr>

12. OL (Ordered List), berfungsi untuk membuat nomor daftar urut.

Sintkasnya :

……

</ol>

13. UL (Unordered List), berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet).

Sintaksnya :

……

</ul>

14. LI (List Item), merupakan isi pada daftar.

Sintaksnya :

……

</li>

2.4. Pengenalan Personal Home Page (PHP)

PHP adalah singkatan dari Personal Home Page yang merupakan bahasa standar yang digunakan dalam dunia website. PHP adalah bahasa pemrograman yang berbentuk script yang diletakkan didalam server web. Kelebihan PHP dari bahasa pemrograman lain

(26)

1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya.

2. Web Server yang mendukung PHP dapat ditemukan di mana – mana dari mulai IIS sampai dengan apache, dengan konfigurasi yang relatif mudah.

3. Dalam sisi pengembangan lebih muda h, karena banyaknya milis – milis dan developer yang siap membantu dalam pengembangan.

4. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena referensi yang banyak.

PHP adalah bahasa open source yang dapat digunakan diberbagai mesin (Linux, Unix, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah – perintah sistem. Sistem database yang didukung oleh PHP adalah Oracle, Sybase dan MySQL.

2.4.1. Sejarah Asal Mula PHP

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah sekumpulan script yang digunakan untuk mengolah data form dari web.

Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber tersebut dan menamakannya PHP/FI, pada saat tersebut kepanjangan dari PHP/FI adalah Personal Home Page/Form Interpreter. Dengan pelepasan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter sudah diimplementasikan dalam C. Dalam rilis ini disertakan juga modul – modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Sebuah perusahaan bernama Zend, menulis ulang interpreter PHP menjadi lebih bersih, lebih baik dan lebih cepat

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. Versi ini banyak dipakai sebab versi ini mampu dipakai untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan proses dan

(27)

stabilitas yang tinggi.

Pada Juni 2004, Zend merilis PHP 5.0. Versi ini adalah versi mutakhir dari PHP. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar.

Dalam versi ini juga dikenalkan model pemrograman berorientasi objek baru untuk menjawab perkembangan bahas pemrograman ke arah pemrograman berorientasi objek.

2.4.2. Variabel pada PHP

Variabel dapat disebut sebagai sebuah tempat penyimpanan data bagi nilai numeris maupun non numeris, agar dapat digunakan pada bagian lain dari script program PHP. PHP mendukung berbagai jenis variabel yaitu : Integer (bilangan bulat), bilangan floating point (presisi tunggal, ganda), boolean, null (untuk variabel yang belum diset), string dan array, object dan resource.

Jika menggunakan bahasa pemrograman C atau Pascal, maka kita harus mendefinisikan variabel tiap elemen, namun pada PHP kita tidak perlu mendefinisikan terlebih dahulu jenis variabel sebelum menggunakannya. PHP memiliki kepandaian untuk membedakan jenis variabel secara otomatis berdasarkan konteks yang sedang berlaku bagi variabel tersebut.

Setiap variabel dalam PHP selalu dimulai dengan tanda dolar ("$") dan harus dimulai dengan huruf dan dapat diikuti oleh huruf dan angka. Dengan demikian, $warpspeed, $impuls_speed, $LCAR dan $Dilithium1 adalah contoh penamaan variabel PHP yang valid.

Setiap variabel dalam PHP peka terhadap perbedaan huruf kapital dan non kapital, sehingga $subspace, $SubSpace, dan $SUBSPACE adalah tiga buah variabel yang berbeda.

(28)

2.5. Sublime Text

Sublime text merupakan teks editor multiplatform dan powerfull, karena dengan ukuran yang kecil, Sublime Text memiliki fitur yang luar biasa dan kinerja yang sangat sederhana. Fiturnya sangat lengkap (bisa digunakan untuk berbagai bahasa pemrograman) dan juga kita dapat menambah extension untuk memudahkan dalam coding. Ada beberapa fitur yang membuat menarik dalam pemakaiannya, yaitu :

1. Go Anything adalah fitur yang bisa membuka file dengan tombol Ctrl + P pada keyboard guna membuka file dengan jumlah banyak.

2. Multiple Selections adalah fitur yang bisa mengubah banyak baris, mengubah variable dengan menekan Ctrl + Shift + L dan Ctrl + Shift + D.

2.6. Cascading Style Sheet (CSS)

CSS merupakan kependekan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut standar HTML (Hyper Text Markup Language). CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan dapat digunakan untuk mengontrol tampilan banyak dokumen secara bersama. Keuntungan menggunakn CSS yaitu jika kita ingin mengubah format dokumen, maka tidak perlu mengedit satu persatu.

Penggunaan CSS ada dua cara yaitu dengan menyisipkan kode CSS langsung dalam kode HTML atau simpan file tersendiri berekstensi “ .css”. dengan menyimpan sebagai file tersendiri akan lebih memudahkan untuk mengontrol tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh pada browser versi 4 (empat) dan pada versi sebelumnya. Perlu diketahui bahwa tampilan CSS dapat berbeda bila ditampilkan pada menu browser yang berbeda pula.

(29)

2.6.1. Struktur CSS

Perintah css terdiri atas 2 komponen, yakni Selector dan Declaration:

1. Selector berfungsi untuk memberi tahu web browser bahwa pada elemen mana aturan css akan diterapkan. Selector dapat berupa nama tag, selector class atau selector id

2. Declaration merupakan aturan css yang diterapkan yang mana terdiri atas property dan value

2.6.2. Penulisan CSS

CSS juga memiliki aturan-aturan penulisan yaitu : 1. Internal Style

Internal style dengan menggunakan tag style dan diletakkan diantara tag head.

<html>

<head>

<style>

h1 { color : blue; }

</style>

</head>

</html>

Internal style tidak harus selalu diletakkan diantara tag head. Kita selalu bisa meletakkan diantara tag lain yang ada didalam tag body.

(30)

Namun untuk menciptakan kode yang lebih bersih dan terstruktur dengan baik, css biasa diletakkan diantara tag head.

2. Inline Style

Inline style dengan menambahkan langsung kode css kedalam tag html sebagai attribut. <h1 style=”color:blue;”>Judul Satu</h1>

3. External Style

External style dengan menggunakan tag link yang diletakkan diantara tag head dan merujuk keberkas css.

<html>

<head>

</head>

<body>

2.7. JavaScript

JavaScript mulanya bernama LiveScript, dikembangkan pertama kali pada tahun 1995 di Netscape Communication. Pada akhir tahun 1995 Netscape Communication dan Sun Microsystem berkolaborasi dan mengganti nama LiveScript menjadi JavaScript.

JavaScript adalah bahasa script yang ditempatkan pada kode HTML dan diproses pada sisi client. Dengan adanya bahasa ini maka kemampuan dokumen HTML menjadi lebih luas. Sebagai contoh, digunakan untuk validasi masukan formulir sebelum diproses ke tahap selanjutnya. Bisa untuk membuat permainan interaktif dan juga bisa untuk menambah design web.

Javascript merupakan bahasa scripting yang didisain untuk membuat halaman web menjadi lebih interaktif. Javascript bekerja secara client-side (disisi client). Sehingga javascript bergantung pada browser yang digunakan untuk menampilkan halaman web yang mengandung javascript.

Perlu diperhatikan bahwa Javascript berbeda dengan Java. Keduanya sangat berbeda baik itu dari sisi bahasa maupun dari konsep dan disainnya.

(31)

<html>

<head>

<title>Belajar JavaScript</title>

document.write("<h1>Belajar JavaScript</h1>");

</script>

</head>

<body>

……

</body>

</html>

2.7.1. Penulisan Javascript

Internal script dengan menggunakan tag script dan diletakkan diantara tag head.

<html>

<head>

<title>JavaScript</title>

Pemrograman Web – Wirasto S. Karim 28 document.write("<h1>Belajar JavaScript</h1>");

</script>

</head>

</html>

External script tetap dengan menggunakan tag script namun merujuk keberkas javascript.

<html>

<head><title>JavaScript</title>

</head>

</html>

(32)

2.7.2. Variabel

Dalam javascript, variabel dideklarasikan dengan statement var dan diakhiri dengan tanda ; (titik koma). Variabel juga bersifat case-sensitive yang artinya membedakan huruf kecil dan huruf besar. Sehingga variabel nama berbeda dengan variabel NAMA.

<html>

<head>

<title>Belajar JavaScript</title>

var a = 4;

var b = 10;

var c = a + b;

var d = "<br>Bo gambangi da'a ei";

document.write(c);

document.write(d);

</script>

</head>

<body>

……

</body>

</html>

2.8. Algoritma

Algoritma merupakan suatu cara menganalisa (menjelaskan) urutan dan hubungan kegiatan – kegiatan yang dilakukan untuk memecahkan suatu permasalahan sehingga tercapai tujuan yang diinginkan. Algoritma adalah urutan langkah-langkah logis pada penyelesaian masalah yang disusun secara sistematis.

Masalah dapat berupa apa saja, dengan catatan untuk setiap masalah ada syarat kondisi awal yang harus dipenuhi sebelum menjalankan algoritma. Konsep algoritma sering kali disetarakan dengan sebuah resep. Sebuah resep biasanya memiliki daftar bahan atau bumbu yang akan digunakan, urutan pengerjaan, dan bagaimana hasil

(33)

dari urutan pengerjaan tersebut. Apabila bahan yang digunakan tidak tertera (tidak tersedia), maka resep tersebut tidak akan dapat dikerjakan. Demikian juga jika urutan pengerjaannya tidak beraturan, maka hasil yang diharapkan tidak akan dapat diperoleh. Algoritma yang berbeda, dapat diterapkan pada suatu masalah dengan syarat yang sama. Tingkat kerumitan dari suatu algoritma merupakan ukuran seberapa banyak komputasi yang dibutuhkan algoritma tersebut untuk menyelesaikan masalah. Umumnya, algoritma yang dapat menyelesaikan suatu permasalahan dalam waktu yang singkat memiliki tingkat kerumitan yang rendah.

2.8.1. Sejarah Istilah Algoritma

Kata algoritma berasal dari latinisasi nama seorang ahli matematika dari Uzbekistan Al Khawārizmi (hidup sekitar abad ke-9), sebagaimana tercantum pada terjemahan karyanya dalam bahasa latin dari abad ke-12 "Algorithmi de numero Indorum". Pada awalnya kata algorisma adalah istilah yang merujuk kepada aturan- aturan aritmetis untuk menyelesaikan persoalan dengan menggunakan bilangan numerik arab (sebenarnya dari India, seperti tertulis pada judul di atas).

Pada abad ke-18, istilah ini berkembang menjadi algoritma, yang mencakup semua prosedur atau urutan langkah yang jelas dan diperlukan untuk menyelesaikan suatu permasalahan. Masalah timbul pada saat akan menuangkan bagaimana proses yang harus dilalui dalam suatu/sebuah sistem (program) bagi komputer sehingga pada saat eksekusinya, komputer dapat bekerja seperti yang diharapkan. Programer komputer akan lebih nyaman menuangkan prosedur komputasinya atau urutan langkah proses dengan terlebih dahulu membuat gambaran (diagram alur) diatas kertas.

2.8.2. Jenis-jenis Algoritma

Terdapat beragam klasifikasi algoritma dan setiap klasifikasi mempunyai alasan tersendiri. Salah satu cara untuk melakukan klasifikasi jenis-jenis algoritma adalah dengan memperhatikan paradigma dan metode yang digunakan untuk mendesain algoritma tersebut. Beberapa paradigma yang digunakan dalam menyusun

(34)

suatu algoritma akan dipaparkan dibagian ini. Masing-masing paradigma dapat digunakan dalam banyak algoritma yang berbeda.

1. Divide and Conquer, paradigma untuk membagi suatu permasalahan besar menjadi permasalahan-permasalahan yang lebih kecil. Pembagian masalah ini dilakukan terus menerus sampai ditemukan bagian masalah kecil yang mudah untuk dipecahkan. Singkatnya menyelesaikan keseluruhan masalah dengan membagi masalah besar dan kemudian memecahkan permasalahan-permasalahan kecil yang terbentuk.

2. Dynamic programming, paradigma pemrograman dinamik akan sesuai jika digunakan pada suatu masalah yang mengandung sub-struktur yang optimal (, dan mengandung beberapa bagian permasalahan yang tumpang tindih . Paradigma ini sekilas terlihat mirip dengan paradigma Divide and Conquer, sama-sama mencoba untuk membagi permasalahan menjadi sub permasalahan yang lebih kecil, tapi secara intrinsik ada perbedaan dari karakter permasalahan yang dihadapi.

2.9. Flowchart

Flowchart adalah sekumpulan simbol – simbol yang menunjukan atau menggambarkan rangkaian kegiatan – kegitan program dari awal hingga akhir. Jadi flowchart juga dapat digunakan untuk menggambarkan urutan langkah – langkah pekerjaan dalam suatu algoritma. Penjelasan arti dari lambang – lambang flowchart dapat didefinisikan seperti tabel dibawah ini :

Tabel 2.1. Arti lambang – lambang Flowchart

No SIMBOL KETERANGAN

1

Terminal, untuk memulai atau mengakhiri suatu program

2

Proses, simbol ini menunjukkan setiap pengolahan yang dilakukan oleh komputer.

(35)

3

Input-Output, untuk memasukkan data atau menunjukkan hasil keluaran dari suatu proses

4

Decision, suatu kondisi yang menghasilkan beberapa kemungkinan jawaban atau pilihan.

5

Untuk menyatakan sekumpulan 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 dilakukan dari atas kebawah, kiri kekanan atau sebaliknya.

9

Document, merupakan simbol dari data yang berbentuk kertas maupun informasi

10

Database, menyediakan tempat pengolahan data serta penyimpanan dalam storage.

11

Simbol untuk output, yang ditujukan kesuatu device ,seperti primer,plotters,dll

(36)

3.1 Perancangan Sistem

Seiring dengan perkembangan teknologi informasi saat ini, serta untuk meningkatkan efesiensi kerja dan waktu, maka masih banyak sistem yang ada saat ini yang masih manual dan harus diganti dengan sistem yang lebih baik lagi.

Hal ini dilakukan dengan cara membangun sistem yang terkomputerisasi atau online. Untuk memulai membangun suatu program mengenai perancangan system informasi akademik, maka penulis terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan dari user yang akan menggunakan aplikasi basis data ini.

Perancangan merupakan proses yang dilakukan oleh perancang sistem untuk mengerjakan spesifikasi sistem, membuat keputusan tentang bagaimana komponen system diaktualisasikan. Proses ini menyangkut tujuan sistem tersebut, audience, objek dan informasi domain. Perancangan yang baik harus mengetahui bagaimana mendapatkan efek yang dibutuhkan oleh spesifikasi tersebut dengan cara paling fleksibel, efesien dan elegan.

3.2 Data Flow Diagram (DFD) Perancangan Aplikasi

Data Flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan pembagian sistem ke modul yang lebih kecil. 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.

(37)

Disamping itu DFD adalah salah satu alat pembuatan model yang sering digunakan, khususnya bila fungsi – fungsi sistem merupakan bagian yang lebih penting dan kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem.

DFD juga merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun rancangan sistem yang mudah dikomunikasikan oleh profesional sistem kepada pemakai maupun pembuat program.

3.2.1 Diagram Konteks Aplikasi Toko Online 24JAM.COM

Diagram Konteks adalah sebuah diagram sederhana yang menggambarkan hubungan antara entity luar, masukan dan keluaran dari sistem. Diagram konteks direpresentasikan dengan lingkaran tunggal yang mewakili keseluruhan sistem.

Berikut ini adalah diagram konteks dari Toko online 24JAM.COM:

Gambar 3.1 Diagram Konteks 24JAM.COM

(38)

3.2.2 Data Flow Diagram (DFD) Level 0

1.1 PENGATURAN

ADMIN

2.1 PEMESANAN 3.1

PENGATURAN PRODUK

ADMIN

PENGUNJUNG

Username & pass

Admin

Login sukses

Login sukses & produk

Memesan barang Informasi pemesanan

Informasi pemesanan

Informasi produk

Produk

Kategori

Data produk

Data Kategori

Data produk & kategori

Gambar 3.2 Data Flow Diagram (DFD) Level 0

3.3 Perancangan Database Aplikasi

Database adalah kumpulan dari data yang berhubungan antara yang satu dengan yang lainnya, tersimpan diperangkat keras komputer dan menggunakan perangkat lunak untuk memanipulasinya. Database merupakan salah satu komponen yang penting dalam sistem komputerisasi, karena database merupakan kumpulan dari beberapa file, dalam hal ini file – file tersebut dikelompokan secara terstruktur dalam beberapa tabel sesuai dengan informasi yang terkandung di dalamnya.

(39)

3.3.1 ERD ( Entity Relationship Diagram )

Proses perancangan database menggunakan ERD ( Entity Relationship Diagram) ditunjukan pada Gambar 3.3.1

Admin username

id password

Produk

pemesanan

kategori id kategori gambar

ukuran deskripsi

harga id nama

jumlah status

Tanggal

Nama harga

Bukti pembayaran nama gambar

id

pembeli

email alamat

Nama_pembeli

No_hp

memiliki atur

cek

upload untuk

melakukan

Gambar 3.3 ERD ( Entity Relationship Diagram)

(40)

3.3.2 Relationship (Relasi Antar Tabel)

Tabel saling berelasi dalam aplikasi E-Commerce ini. Relasi antar tabel ditunjukan pada Gambar 3.4

Gambar 3.4 Relationship (Relasi Antar Tabel)

3.3.3 Struktur Tabel

Berikut ini rancangan tabel yang penulis gunakan dalam membangun aplikasi ini :

1. Tabel Admins terdiri dari : Tabel 3.1. Tabel Admins

Field Name Data Type Size Description

Username Varchar 50 Username

Password Varchar 50

Password

Nama_lengkap Varchar 100 Nama lengkap

Email Varchar 100 Email

No_telp Varchar 20 No telp

Level Varchar 20 Level

(41)

2. Tabel hubungi terdiri dari : Tabel 3.2. Tabel hubungi

Id_hubungi Int 5 Id hubungi

Id_kustomer Int 5 Id kustomer

Subjek Varchar 100 subjek

Pesan Text - Pesan

Tanggal Date - Tanggal

3. Tabel kategori terdiri dari : Tabel 3.3 Tabel Kategori

Id_kategori Int 5 Id

Nama_kategori Varchar 100 Nama kategori

4. Tabel kota terdiri dari : Tabel 3.4 Tabel kota

Id_kota Int 3 Id kota

Nama_kota Varchar 100 Nama kota

Ongkos_kirim Int 10 Ongkos kirim

5. Tabel Kustomer terdiri dari:

Tabel 3.5 Tabel kustomer

Field name Data type Size Description

Password Varchar 50 Password

Nama_lengkap Varchar 100 Nama lengkap

Alamat Text - Alamat

(42)

Email Varchar 100 Email

Telpon Varchar 20 Telpon

Id_kota Int 5 Id kota

6. Tabel modul terdiri dari Tabel 3.6 Tabel modul

Id_modul Int 5 Id modul

Static_content Text - Static content

Gambar Varchar 100 gambar

7. Tabel Orders terdiri dari:

Tabel 3.7 Tabel Orders

Field Name Data type Size Description

Id_orders Int 5 Id orders

Status_orders Varchar 50 Status_order

Tgl_order Date - Tgl order

Jam_order Time - Jam order

8. Tabel order_detail terdiri dari:

Tabel 3.8 Tabel order_detail

Id_orders Int 5 Id orders

Id_produk Int 5 Id produk

Jumlah Int 5 Jumlah

9. Tabel order_temp terdiri dari:

Tabel 3.9 Tabel order_temp

Id_orders_temp Int 5 Id orders temp

(43)

Id_session Varchar 100 Id session

Jumlah Int 5 Jumlah

Tgl_orders_temp Date - Tgl orders temp

Jam_order_temp Time - Jam order temp

Stok_temp Int 5 Stok temp

10. Tabel produk terdiri dari:

Tabel 3.10 Tabel produk

Id_kategori Int 5 Id kategori

Nama_produk Varchar 100 Nama produk

Deskripsi Text - Deskripsi

Harga Int 20 Harga

Stok Int 5 Stok

Berat Decimal 5,2 Berat

Tgl_masuk Date - Tgl masuk

Gambar Varchar 100 Gambar

Dibeli Int 5 dibeli

Diskon Int 5 diskon

3.4 Flowchart Perancangan Aplikasi Online Penjualan Elektronik Online

“24JAM.COM” Berbasis Web

Flowchart menggambarkan aliran pada sistem aplikasi penjualan yang bertema anime. Secara umum, user masuk ke aplikasi melihat info produk lalu melakukan pemesanan. Selanjutnya admin kita akan memeriksa pesanan dan mengkonfirmasi pemesanan.

(44)

3.4.1 Flowchart Menu Utama

Flowchart menu utama dapat dilihat pada gambar dibawah ini :

Y

T

3.5 Gambar Flowchart Menu Utama

START

PILIH KATEGORI

PILIH PRODUK

MENYERAHKAN PRODUK

PEMBAYARA

BELANJA LAGI ?

TUTUP APLIKASI

(45)

3.4.2 Flowchart Login Admin

Flowchart login admin dapat dilihat pada gambar dibawah ini :

L_adm

Masukkan Username &

password

Login Reset

Validasi Username

& Password

Valid

Hapus username &

Password

X Y

Y

T

M_adm

Gambar 3.6 Alur Flowchart Login Admin

(46)

3.4.3 Flowchart Menu Admin

Flowchart menu admin dapat dilihat pada gambar dibawah ini :

M_Admin

Tampilan Menu Admin

Pilih

Produk Tambah Produk

Ubah Produk

Hapus Produk

Tambah Produk

Masukan

Data Simpan Data Batal

Disimpan

Simpan Data

Data Produk

Data Disimpan

Ubah Produk Pilih

Data Ubah Data Batal

Diubah

Ubah Data

Data Produk

Data Diubah

Hapus Produk

Pilih

Data Hapus Data Batal

Dihapus

Hapus Data

Data Produk

Data Dihapus

Kategori Tambah

Kategori

Ubah Kategori

Hapus Kategori

Tambah Kategori

Masukan

Data Simpan Data Batal

Disimpan

Simpan Data

Data Kategori

Data Disimpan

Ubah Produk Pilih

Data Ubah Data Batal

Diubah

Ubah Data

Data Kategori

Data Diubah

Hapus Kategori

Pilih

Data Hapus Data Batal

Dihapus

Hapus Data

Data Kategori

Data Dihapus

keluar

X

Y Y Y

Y

Y Y

Y

T

T T

T T T

T T T T

T T

Y

Gambar 3.7 Alur Flowchart Menu Admin

(47)

3.5 Langkah-Langkah Perancangan Aplikasi Toko online 24JAM.COM

1. Kategori Beranda

Langkah I : Pilih menu Beranda.

Langkah II : Menampilkan halaman utama website.

2. Kategori Profil

Langkah I : Pilih menu Profil

Langkah II : Menampilkan halaman profil seputar 24JAM.COM.

3. Kategori Produk

Langkah I : Pilih menu Kategori Produk.

Langkah II : Menampilkan halaman Kategori Produk.

Langkah II : Pilih produk 4. Keranjang Belanja

Langkah I : Pilih menu Kategori Keranjang Belanja

Langkah II : Menampilkan Barang yang telah kita pilih untuk di beli 5. Hubungi kami

Langkah I : Pilih menu Claim Barang Rusak.

Langkah II : Menampilkan halaman Testimoni pelanggan melalui pesan.

(48)

4.1. Pengertian Implementasi Sistem

Setelah dianalisis dan dirancang secara rinci dan teknologi telah diseleksi dan dipilih. Tiba saatnya, sistem untuk di implementasikan. Implementasi sistem adalah langkah–langkah atau prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk menguji, meng-install, dan memulai sistem baru atau sistem yang diperbaiki untuk menggantikan sistem yang lama, sedangkan tahap implementasi sistem merupakan tahap meletakkan sistem agar sistem dapat siap untuk dioperasikan. Tahap implementasi sistem terdiri dari langkah–langkah sebagai berikut ini, yaitu menerapkan rencana implementasi, melakukan kegiatan implementasi, dan tindak lanjut implementasi.

4.2. Tujuan Implementasi

Tujuan–tujuan dari implementasi sistem, yaitu :

1. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana pengolah data dan penyaji informasi.

2. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telah disetujui.

3. Memastikan bahwa pemakai dapat mengoperasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas.

4. Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu dengan menguji sistem secara menyeluruh.

5. Memastikan bahwa sistem telah berjalan lancar dengann mengontrol dan melalukan instalasi secara benar.

(49)

4.3. Komponen Utama Dalam Implementasi Sistem

Agar perancangan sistem yang telah kita kerjakan dapat berjalan baik atau tidak, maka perlu dilakukan pengujian terhadap sistem yang telah dikerjakan. Untuk itu dibutuhkan beberapa komponen utama yang mencakup perangkat keras (hardware), perangkat lunak (software) dan perangkat operator (brainware).

4.3.1. Kebutuhan Perangkat Keras (Hardware)

Perangkat keras (hardware) merupakan komponen – komponen peralatan yang membentuk suatu sistem komputer dan peralatan – peralatan tambahan lainnya yang mungkin komputer menjalankan tugasnya sesuai dengan yang diberikan. Komponen ini bersifat nyata secara fisik, artinya dapat dilihat dan dipergunakan, misalnya monitor, CPU (Central Processing Unit), printer, keyboard, dan mouse. Spesifikasi perangkat keras komputer yang digunakan dalam pembuatan website ini adalah :

a. Monitor b. Harddisk

c. Memory minimal 1GB d. Keybord dan mouse

4.3.2. Kebutuhan Perangkat Lunak (Software)

Hardware tidak dapat menyelesaikan masalah tanpa adanya software.

Software merupakan komponen di dalam sistem data berupa program atau instruksi untuk mengontrol suatu sistem. Perangkat lunak yang diperlukan untuk menjalankan perangkat kerasnya adalah :

Ada beberapa software yang perlu di install dalam membuat website, antara lain : a. Sistem Operasi windows7

b. MYSQL sebagai pengelola data.

c. PHP sebagai bahasa pemrograman serverside

d. XAMPP sebagai Modul Untuk menghidupkan fungsi MySql, dan Apache.

(50)

e. Mozilla Firefox atau Google Chrome sebagai media untuk menampilkan program yang telah selesai.

4.3.3. Kebutuhan Brainware

Perangkat Operator (Brainware) yang dapat menjalankan website ini terbagi menjadi 2 yaitu administrator dan public.

4.4 Instalasi XAMPP

XAMPP 3.2.2 berfungsi sebagai web server yang menyediakan layanan untuk memenuhi permintaan user yang akan mengakses e-application. Berikut adalah tahapan misalnya:

1. 1 non-aktikan anti-virus karena dapat menyebabkan beberapa komponen XAMPP tidak bisa diinstall dengan lancar.

2. Dikarenakan penulis menggunakan Windows 7, akan melihat jendela pop up, peringatan tentang UserAccount Control (UAC) yang aktif pada sistem. Klik

“OK” untuk melanjutkan intalasi:

Gambar 4.1 Instalasi XAMPP 3.2.2 (1)

Tekan button next untuk melanjutkan instalasi atau button cancel untuk membatalkan instalasi.

(51)

1. Setelah itu akan muncul tampilan sebagai berikut :

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.

2. Pilih menu yang akan diinstal lalu tekan next, atau back untuk kembali ke langkah sebelumnya, atau cancel untuk membatalkan instalasi.

(52)

3. Proses instalasi sedang berjalan. Proses ini membutuhkan waktu beberapa menit.

4. XAMPP sudah terinstal dan siap digunakan sebagai web server. Untuk menggunakan XAMPP, cukup jalankan XAMPP control panel.

(53)

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

Gambar 4.6 Contol Panel XAMPP

4.5. Tampilan Halaman Website

Untuk menjalankan system guna web browser pada pengujian ini penulis menggunakan web browser Mozilla Firefox dan Google Chrome setelah web browser jalan, ketikkan pada addres bar http://localhost/24JAM.COM untuk pengetesan halaman utama. Halaman utama sistem tersebut seperti pada gambar berikut :

Gambar 4.7. Halaman Home Web

(54)

2. Berikut adalah tampilan untuk halaman tentang profile web :

Gambar 4.8. Halaman Tentang Profile Web

3. Berikut adalah halaman produk-produk dari online shop 24JAM.COM :

Gambar 4.9. Halaman Produk-Produk

(55)

4. Berikut adalah tampilan dari halaman cara pemesanan :

Gambar 4.10. Halaman Cara Pemesanan

5. Jika terdapat barang rusak user dapat mengclaimnya. Berikut adalah tampilan halaman claim barang rusak :

Gambar 4.11. Halaman Claim Barang Rusak

(56)

6. Jika user sudah memesan, barang yang sudah user pesan akan masuk ke keranjang belanja. Berikut adalah tampilan halaman keranjang belanja :

Gambar 4.12. Halaman Keranjang Belanja

7. Apabila user sudah selesai dalam berbelanja selanjutnya user akan masuk ke halaman transaksi akhir. Berikut adalah tampilannya :

Gambar 4.13. Halaman Transaksi Selesai

(57)

5.1. Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya maka pada bab ini penulis dapat mengambil kesimpulan sebagai berikut :

1. System ini berisi aplikasi online yang memudahkan admin dalam menginfokan dan memasarkan produk kami kepada konsumen.

2. Aplikasi berbasis web e-commerce ini akan memberikan kemudahan – kemudahan, baik bagi pihak extern (masyarakat luas) karena sistem ini nantinya siap akses selama 24 jam.

3. Aplikasi berbasis web e-commerce ini penulis buat dengan bahasa pemrograman PHP dan HTML dan memanfaatkan jaringan internet untuk publikasinya sehingga dapat dikonsumsi oleh publik.

5.2. Saran

Berdasarkan kesimpulan di atas maka dapat diberikan saran – saran yang penulis usulkan yang berguna nantinya dan yang menjadi bahan pertimbangan bagi dalam menggunakan system ini antara lain :

1. Dengan adanya sistem yang telah dirancang maka toko online penjualan yang bertema kan penjualan elektronik ini diharapkan dapat menggunakan atau memanfaatkan komputer dan fasilitas internet dalam hal penginformasian data dan pengolahan data sehingga dapat meningkatkan pelayanan dan efektifitas kerja yang lebih baik.

2. Kiranya aplikasi berbasis web ini dapat digunakan secara optimal agar hasil yang diharapkan dapat terwujud.

(58)

Adi Nugroho. 2011. “Perancangan dan Implementasi Sistem Basis Data”. Andi:

Yogyakarta

Abdul, K. 2008. “Tuntunan Praktis Belajar Database Menggunakan MySQL”.

Andi : Yogyakarta

Kadir, Abdul. 2005. “Dasar Pemrograman Web Dinamis Menggunakan

“PHP. Yogyakarta : Informatika Bandung

Mulyana. Y.B. 2004. “Trik Membangun Situs Menggunakan PHP dan MySQL”.

Jakarta: Elex Media Komputindo

Sutarman, 2003. “Membangun Aplikasi Web dengan PHP dan MySQL”, Yogyakarta : Graha Ilmu.

Utdirartatmo, Firrar. 2006. “Segudang Trik Pengembangan Situs WEB”.

Yogyakarta : Penerbit Andi

M. Arsyad Sanusi, “Teknologi Informasi Dan Hukum E-commerce”, Jakarta:

Cetakan II, PT. Dian Ariesta, 2004

Nugroho, Adi. 2006. “E-commerce”. Informatika Bandung. Bandung.

Aryato, Didik, dan Feriani A. Tarigan. 2015. “Aplikasi Penjualan Pakaian Secara Online (Studi Kasus: Tauko Medan), Vol. IV No 1 : 6-12, 2337 – 3601”.

Maulana, dkk. 2015. “Implementasi E-Commerce Sebagai Media Penjualan Online (Studi Kasus Pada Toko Pastbrik Kota Malang), Vol. 29 No. 1 Desember 2015”.