Sistem Informasi E-Commerce Pada Rumah Makan “Siang Hari” Chapter III V
BAB 3
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
Rumah makan Siang Hari adalah usaha yang bergerak dibidang penjualan makanan
masakan rumah. Sistem informasi pada rumah makan ini masih menggunakan cara
manual dan dalam penjualannya perlu dilakukan peningkatan. Berdasarkan dari
wawancara yang dilakukan, para costumer ingin membeli dengan cara mudah tanpa
harus keluar ruangan yang rata-rata para karyawan kanor. Maka dari itu rumah makan
Siang Hari memerlukan sistem yang mendukung kebutuhan para costumer.
3.2 Perancangan Sistem
Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan user (pemakai)
mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta
diimplementasikan. Perancangan sistem adalah suatu upaya untuk membuat suatu
sistem yang baru atau memperbaiki sistem yang lama secara keseluruhan atau
memperbaiki sistem yang telah ada. Desain sistem secara umum mengidentifikasikan
komponen-komponen sistem informasi yang akan didesain secara terinci. Desain
terinci dimaksudkan untuk pemrogram komputer dan ahli teknik lainnya yang akan
mengimplementasikan sistem.
3.3 Diagram Konteks
Universitas Sumatera Utara
Merupakan tingkatan tertinggi dalam diagram aliran data dan hanya memuat satu
proses, menunjukkan sistem secara keseluruhan. Proses tersebut diberi nomer nol.
Semua entitas eksternal yang ditunjukkan pada diagram konteks berikut aliran dataaliran data utama menuju dan dari sistem. Diagram tersebut tidak memuat
penyimpanan data dan tampak sederhana untuk diciptakan begitu entitas-entitas
eksternal serta aliran data-aliran data menuju dan dari sistem diketahahui menganalisis
dari wawancara dengan user dan sebagai hasil analisis dokumen. Konteks diagram
dimulai dengan penggambaran terminator, aliran data, aliran kontrol penyimpanan, dan
proses tunggal yang menunjukkan keseluruhan sistem.
Diagram konteks berisi gambaran umum sistem yang akan dibuat. Secara umum, dapat
dikatakan bahwa diagram konteks berisi “siapa saja yang memberi data (dan data apa
saja) ke sistem, serta kepada siapa saja informasi (dan informasi apa saja) yang harus
dihasilkan sistem”.
Jadi, yang dibutuhkan adalah, siapa saja pihak yang akan memberikan data
kesistem, data apa saja yang diberikannya ke sistem, kepada siapa sistem harus
memberikan informasi atau laporan, dan apa saja isi/ jenis laporan yang harus
dihasilkan oleh sistem. Kata “ siapa ” diatas dilambangkan dengan kota persegi
(terminator) , kata “ apa “ diatas dilambangkan dengan aliran data (data flow ) dan
kata “sistem” dilambangkan dengan lingkarang ( process ).
Universitas Sumatera Utara
Tabel 3.1 Lambang yang digunakan di Diagram Konteks
Simbol
Nama Simbol
Terminator
Keterangan
Pihak-pihak
sistem,
yang
tetapi
berada
secara
diluar
langsung
berhubungan dengan sistem dalam
hal memberi data atau menerima
informasi.
Process
Didalam diagram konteks, berisi
mengenai sistem yang akan dibuat.
Data Flow
Berisi data atau informasi yang
mengalir dari satu pihak ke sistem
dan sebaliknya.
Sebagai contoh sederhana, sistem yang dibahas adalah sistem inventori barang disuatu
usaha. Dimana unit usahanya adalah “Toko Bok Utama” yang akan dibuat sistem
penjualannya. Adapun diagram konteks dari sistem inventori barang ini adalah sebagai
berikut :
Data pesanan
Konsumen
Faktur penjualan
Aplikasi
Rumah
Makan Siang
Hari
Laporan penjualan
Penjual
Gambar 3.1 Diagram Konteks Aplikasi E-Commerce Rumah Makan Siang Hari
3.4 Perancangan Sistem pada Database
Universitas Sumatera Utara
Database atau basis data adalah kumpulan data yang disimpan secara sistematis
didalam komputer dan dapat dimanipulasi menggunakan perangkat lunak untuk
menghasilkan informasi. Pendefenisian database meliputi spesifikasi berupa tipe data,
struktur dan juga batasan-batasan data yang akan disimpan. Database merupakan aspek
yang sangat penting dalam sistem informasi dimana database merupakan gudang
penyimpanan data yang akan diolah lebih lanjut. Berikut merupakan tabel yang
digunakan oleh penulis dalam membangun aplikasi :
Tabel 3.2 Tabel Admin
Nama
Tipe Data
Id
Username
Username
Varchar(30)
Password
Varchar(30)
Keterangan
Primary key Auto Increment
Tabel 3.3 Tabel Alamat
Nama
Tipe Data
kd_alamat
char(3)
nm_alamat
varchar(100)
biaya_kirim
int(2)
Keterangan
Primary Key
Universitas Sumatera Utara
Tabel 3.4 Tabel Kategori
Nama
Tipe Data
kd_kategori
Char(4)
nm_kategori
Varchar(100)
Keterangan
Primary Key
Tabel 3.5 Tabel Menu
Nama
Tipe Data
kd_menu
Char(5)
nm_menu
Varchar(100)
harga_modal
Int(12)
harga_jual
Int(12)
Keterangan
Text
file_gambar
Varchar(100)
kd_kategori
Char(4)
Keterangan
Primary Key
Index
Tabel 3.6 Tabel pemesanan_item
Nama
Tipe Data
id
Int(4)
no_pemesanan
Char(8)
kd_masakan
Char(5)
harga
Char(12)
jumlah
Int(4)
Keterangan
Primary Key Auto_Increment
Universitas Sumatera Utara
Tabel 3.7 Tabel Pelanggan
Nama
Tipe Data
kd_pelanggan
Char(6)
nm_pelanggan
Varchar(100)
Kelamin
Varchar(20)
email
Varchar(100)
no_telepon
Varchar(20)
Username
Varchar(20)
Password
Varchar(100)
tgl_daftar
Date
Keterangan
Primary Key
Tabel 3.8 Tabel tmp_keranjang
Nama
Tipe Data
Keterangan
id
Int(4)
Primary Key Auto_Increment
kd_menu
Char(5)
Index
harga
Int(12)
jumlah
Varchar(100)
tanggal
Date
kd_pelanggan
Char(6)
Index
Universitas Sumatera Utara
Tabel 3.9 Tabel Pemesanan
Nama
Tipe Data
Keterangan
no_pemesanan
Char(8)
Primary Key
kd_pelanggan
Char(6)
Index
tgl_pemesanan
Date
nm_penerima
Varchar(100)
alamat_lengkap
Varchar(100)
kd_alamat
Char(3)
Kota
Varchar(100)
kode_pos
Char(5)
no_telepon
Varchar(20)
status_bayar
Enum(‘Pesan’,’Lunas’,’Batal’)
Tabel 3.10 Tabel Konfirmasi
Nama
Tipe Data
Keterangan
Id
Int(4)
Primary Key Auto_Increment
no_pemesanan
Char(8)
Index
nm_pelanggan
Varchar(100)
jlh_transfer
Int(12)
Universitas Sumatera Utara
Keterangan
Varchar(100)
Tanggal
Date
Index
3.5 Flowchart
Flowchart merupakan bagan atau gambar yang memperlihatkan hubungan antar-proses
beserta instruksinya. Gambaran ini dinyatakan dengan simbol yang mana dari tiap-tiap
simbol mewakili proses tertentu. Sedangkan hubungan antar-proses tadi digambarkan
dengan garis-garis.
Flowchart merupakan langkah awal pembuatan program. Setelah flowchart
selesai disusun, selanjutnya pemrogram menerjemahkannya ke dalam bentuk program
menggunakan bahasa pemrograman. Berikut ini adalah simbol-simbol standar pada
sebuah flowchart beserta fungsinya.
Tabel 3.11 Tabel Simbol pada Flowchart
Simbol
Keterangan
Awal dan akhir suatu program
Inisialisasi variable ( persiapan awal )
Input dan output ( masukan dan keluaran ) program
Proses program
Percabangan / perulangan
Connector (tanda sambung untuk halaman sama )
Universitas Sumatera Utara
Connector ( tanda sambung untuk halaman berbeda )
Arah proses
Sub program / Procedure ( blok program )
Dalam pembuatan aplikasi sistem inventori ini juga diperlukan flowchart yang berguna
untuk analisis perancangan sistem aplikasi dan gambaran umum bagaimana aplikasi
sistem inventori ini berjalan dan melakukan input data, proses data, dan output.
Flowchart yang dibutuhkan adalah sebagai berikut :
3.5.1 Flowchart Daftar
START
INPUT DATA
TERSIMPAN
DI DATABASE
MASUK KE HALAMAN
HOME
FINISH
Gambar 3.2 Flowchart Halaman Daftar
Universitas Sumatera Utara
3.5.2 Flowchart Belanja
START
DAFTAR
false
MASUK KE HALAMAN
HOME
IF SELESAI
PILIH BARANG
true
TAMPIL KERANJANG
BELANJA
MELAKUKAN
PEMBAYARAN
FINISH
Gambar 3.3 Flowchart Halaman Home
Universitas Sumatera Utara
3.5.3 Flowchart Login Admin
START
LOGIN
false
CEK LOGIN
LOGIN GAGAL
true
LOGIN
BERRHASIL
TAMPIL HALAMAN
ADMIN
FINISH
Gambar 3.5 Flowchart Halaman Login Admin
Universitas Sumatera Utara
3.5.4 Flowchart Input Menu
START
INPUT PRODUK
YANG DIJUAL
false
true
IF KONDISI
PROSES GAGAL
PROSES
BERRHASIL
PRODUK
MASUK KE
DATABASE
FINISH
Gambar 3.6 Flowchart Halaman Input Menu
Universitas Sumatera Utara
3.6 Membangun Halaman Situs
Adapun halaman-halaman yang dibangun oleh penulis adalah:
1. Halaman index.php, merupakan halaman utama yang akan diakses pertama kali
situs dibuka. Haaman ini berisikan informasi singkat mengenai fashion dan linklink menuju halaman berikutnya. Halaman index yang penulis bangun dibagi
menjadi 2 bagian, yaitu:
a) Halaman index untuk admin
Merupakan halaman yang dikhususkan untuk administrator yang mana
untuk masuk ke halaman ini harus melakukan login terlebih dahulu.
b) Halaman index untuk user
Merupakan halaman untuk user, dimana user dapat mengakses halaman
web tersebut. Pada halaman ini user tidak dapat merubah isi dari situs.
2. Halaman account.php, merupakan halaman yang digunakan oleh user untuk
mendaftar identitas diri agar dapat mengakses soal-soal yang terdapat di dalam
situs tpa online.
3. Halaman login.php, merupakan halaman untuk user login dan masuk ke situs
belanja online.
4. Halaman cart.php, merupakan halaman yang berisikan keranjang belanja user.
5. Halaman confirm.php, merupakan halaman untuk user yang telah melakukan
pembayaran dan dikonfirmasi dengan mengisi data pembayaran dan
mengunduh foto bukti transfer.
Universitas Sumatera Utara
6. Halaman about.php, merupakan halaman mengenai situs dan informasi toko
yang berisikan alamat, nomor kontak dan media social.
3.7 Algoritma
Tahap-tahap yang dilakukan penulis dalam membangun halaman situs adalah sebagai
berikut:
1) Membuka software Macromedia Dreamweaver CS5 sebagai editor dalam
membangun halaman.
2) Mengatur letak layout dengan memanfaatkan tools dan perintah yang terdapat
pada Dreamweaver yaitu dengan meletakkan link-link, grafik, animasi, isi
halaman situs yang telah dirancang.
3) Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada
tempat yang sesuai dikerjakan di jendela code pada Dreamweaver.
4) Menulis skrip CSS untuk memperindah tampilan situs.
5) Mengerjakan halaman pembangun situs.
5.1)
Algoritma Halaman Register
Langkah 1 : input data kedalam form yang tersedia.
Langkah 2 : Jika data sudah terisi, maka proses registrasi berhasil dan
record tersimpan ke database.
5.2)
Algoritma Halaman Pembelian Produk
Langkah 1 : user yang ingin membeli produk diharuskan memasukkan
produk yang diinginkan ke dalam keranjang belanja.
Langkah 2 : Jika user telah memilih barang, selanjutnya tekan tombol
“checkout” untuk ke tahap selanjtnya.
Universitas Sumatera Utara
Langkah 3 : Jika berhasil, user harus mengisi form informasi
pengiriman.
Langkah 4 : Setelah itu tekan tombol “Checkout” dan selesai.
5.3)
Algoritma Halaman Konfirmasi
Langkah 1 : Jika user sudah membayar produk, tekan menu “confirm
payment” untuk mengisi form konfirmasi pembayaran.
Langkah 2 : Jika data sudah terisi, tekan tombol “confirm” dan proses
konfirmasi selesai.
5.4)
Algoritma Halaman Testimoni
Langkah 1 : Isi semua record yang tersedia termasuk komentar
Langkah 2 : Jika proses berhasil, maka komentar anda telah terkirim
dan akan tampil di daftar komentar
Langkah 3 : Jika proses gagal, maka ulangi langkah 1
5.5)
Algoritma Halaman Login Administrator
Langkah 1 : Masukkan data administrator yang ada
Langkah 2 : Setelah itu tekan tombol untuk submit record
Langkah 3 :
Jika proses berhasil, maka berada di level admin dan
berhak memperbaharui isi halaman situs
Langkah 4 : Jika proses gagal, maka ulangi langkah 1
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan desain
yang ada dalam dokumen sistem yang disetujui untuk menguji, menginstal, 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 untuk dioperasikan. Penggunaan suatu komputer untuk
memecahkan masalah membutuhkan suatu sistem yang baik, sehingga memungkinkan
berhasilnya komputer dalam melaksanakan tugasnya, yaitu mengolah data menjadi
informasi. Tahap implementasi sistem terdiri dari langkah-langkah sebagai berikut :
1. Menerapkan rencana implementasi.
2. Melakukan kegiatan implementasi.
3. Tindak lanjut implementasi.
4.2 Tujuan Implementasi Sistem
Dalam implementasi sistem tentu ada tujuan-tujuan tertentu yang harus dicapai.
Adapun tujuan-tujuan tersebut adalah:
1. Menyelesaikan desain sistem yang ada dalam dokumen desain sistem yang
disetujui.
2. Menulis, menguji, serta mendokumentasikan program dan prosedur yang
diperlukan oleh dokumen desain sistem yang disetujui.
Universitas Sumatera Utara
3. Memastikan bahwa user dapat mengoperasikan sistem baru dan melatih
pengguna.
4. Memperhitungkan bahwa sistem memenuhi permintaan user yaitu dengan
menguji sistem secara menyeluruh.
5. Memastikan bahwa konversi ke sistem baru berjalan secara benar dengan
membuat rencana, mengontrol dan melakukan instalasi baru secara benar.
4.3 Penerapan Implementasi Sistem
Untuk menjalankan sistem, perlu diperhatikan kebutuhan apa saja yang akan
mendukung dalam proses program dan data. Perangkat komputer yang dibutuhkan
yaitu :
1. Kebutuhan Perangkat Keras (Hardware)
Hardware merupakan komponen fisik dalam rangkaian komputer, sedangkan
spesifikasi hardware yang dibutuhkan adalah sebagai berikut :
a. Personal Computer (PC).
b. Keyboard.
c. Printer, untuk mencetak hasil.
2. Kebutuhan Perangkat Lunak (Software)
Software merupakan instruksi program yang dapat digunakan dalam komputer.
Software yang diperlukan untuk menjalankan aplikasi ini adalah sebagai berikut:
1. Apache sebagai web server.
2. PHP sebagai web programming.
3. MySQL sebagai database server.
4. Adobe Photoshop CS 5 sebagai designer.
Universitas Sumatera Utara
5. Macromedia Dreamweaver CS 5 sebagai web editor.
3. Brainware
Merupakan faktor manusia yang menangani fasilitas komputer, yang dibutuhkan
adalah :
a. Sistem analisa, orang yang membangun fasilitas rancangan sistem.
b. Programmer, orang yang mengerti bahasa pemrograman dalam membuat dan
membangun program.
c. Operator, orang yang menangani langsung dalam pengolahan data mulai dari
mempersiapkan data sampai dengan pengertian data ke dalam komputer.
4.4 Pemeliharaan Sistem
Pemeliharaan sistem adalah suatu kombinasi dari berbagai tindakan yang dilakukan
untuk menjaga suatu sistem, atau memperbaikinya sampai suatu kondisi yang lebih
baik dan bisa diterima. Adanya tujuan dari pemeliharaan sistem tersebut yaitu:
1. Mencegah modifikasi sistem yang akan menyebabkan masalah lain datang.
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 modifikasi yang
diminta relative besar.
5. Memindahkan gangguan control operasi yang disebabkan oleh pemerintahan
sistem.
4.5 Tampilan Website
Setelah menginstalasi Xampp, maka aplikasi web telah dapat di ujikan di komputer
lokal. Adapun caranya adalah sebagai berikut:
Universitas Sumatera Utara
1. Letakkan file yang membangun web tadi ke dalam suatu folder kemudian
diletakkan di dalam folder htdocs, terlihat seperti gambar berikut:
Gambar 4.1 Folder Berisi File-File di Dalam Folder htdocs
2. Buka web browser Google Chrome
3. Pada kotak URL ketikkan http://localhost/[namafolder]. Karena penulis
meletakkan file-file web di folder tpa maka alamatnya sebagai berikut:
Gambar 4.2 Penulisan Alamat di URL
4. Setelah dilakukan Enter pada keyboard maka akan terlihat tampilan sebagai
berikut:
Universitas Sumatera Utara
Gambar 4.3 Hasil pengujian Aplikasi Web di Browser
Demonstrasi Program
A. Halamanan Utama (index.php)
Gambar 4.4 Halaman Utama
Universitas Sumatera Utara
B. Halaman Daftar (pelanggan_baru.php)
Gambar 4.5 Halaman Daftar Member
D. Halaman Kontak (info_profil.php)
Gambar 4.6 Halaman Kontak
E. Halaman Keranjang Belanja (keranjang_belanja.php)
Universitas Sumatera Utara
Gambar 4.7 Halaman Keranjang Belanja
F. Halaman Pembelian (transaksi_proses.php)
Gambar 4.8 Halaman Pembelian
G. Halaman Konfirmasi Pembayaran (konfirmasi.php)
Universitas Sumatera Utara
Gambar 4.9 Halaman Konfirmasi Pembayaran
H. Halaman Admin (login.php)
Gambar 4.10 Halaman Login Admin
I. Halaman Admin (index.php)
Universitas Sumatera Utara
Gambar 4.11 Halaman Utama Admin
J. Halaman Admin (kategori_add.php)
Gambar 4.12 Halaman Input Kategori
Universitas Sumatera Utara
K. Halaman Admin (menu_data.php)
Gambar 4.13 Halaman Daftar Menu
L. Halaman Admin (pemesanan_menu.php)
Gambar 4.14 Halaman Order
Universitas Sumatera Utara
M. Halaman Admin (laporan_kategori.php)
Gambar 4.15 Halaman Laporan Kategori
Universitas Sumatera Utara
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Dari hasil pembahasan tentang perancangan aplikasi e-commerce Rumah Makan Siang
Hari berbasis web ini, maka penulis dapat mengambil kesimpulan diantaranya adalah
sebagai berikut:
1. Pembuatan suatu aplikasi web dapat dilakukan di komputer lokal tanpa
terkoneksi ke internet. Koneksi internet diperlukan ketika proses upload file
dan pengaksesan situs atau dikenal dengan nama hosting.
2. Aplikasi ini menyajikan informasi terkait dengan Rumah Makan Siang Hari
yang ditujukan pada pembeli.
3. Merancang website sistem informasi e-commerce pada rumah makan “Siang
Hari” menggunakan bahasa pemrograman PHP dan MySQL yang dapat
menampilkan detail menu seperti harga dan jenis masakan. Serta dapat
menampilkan report atau laporan penjualan untuk penjual.
4. Dengan adanya aplikasi ini, informasi tentang menu terbaru di Rumah Makan
Siang Hari dapat terpublikasi dengan baik.
5. Selain sebagai sarana penyampaian informasi, aplikasi ini juga dikembangkan
sebagai sarana pengolahan data secara online.
Universitas Sumatera Utara
5.2 Saran
Agar website ini berkembang dengan baik maka, penulis memberikan saran sebagai
berikut:
1. Diharapkan adanya pengembangan lebih lanjut, sehingga menjadi sebuah
media yang sangat membantu seseorang yang ingin mengukur kemampuannya
dibidang e-commerce.
2. Selalu mengupdate dan memelihara website.
Universitas Sumatera Utara
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
Rumah makan Siang Hari adalah usaha yang bergerak dibidang penjualan makanan
masakan rumah. Sistem informasi pada rumah makan ini masih menggunakan cara
manual dan dalam penjualannya perlu dilakukan peningkatan. Berdasarkan dari
wawancara yang dilakukan, para costumer ingin membeli dengan cara mudah tanpa
harus keluar ruangan yang rata-rata para karyawan kanor. Maka dari itu rumah makan
Siang Hari memerlukan sistem yang mendukung kebutuhan para costumer.
3.2 Perancangan Sistem
Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan user (pemakai)
mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta
diimplementasikan. Perancangan sistem adalah suatu upaya untuk membuat suatu
sistem yang baru atau memperbaiki sistem yang lama secara keseluruhan atau
memperbaiki sistem yang telah ada. Desain sistem secara umum mengidentifikasikan
komponen-komponen sistem informasi yang akan didesain secara terinci. Desain
terinci dimaksudkan untuk pemrogram komputer dan ahli teknik lainnya yang akan
mengimplementasikan sistem.
3.3 Diagram Konteks
Universitas Sumatera Utara
Merupakan tingkatan tertinggi dalam diagram aliran data dan hanya memuat satu
proses, menunjukkan sistem secara keseluruhan. Proses tersebut diberi nomer nol.
Semua entitas eksternal yang ditunjukkan pada diagram konteks berikut aliran dataaliran data utama menuju dan dari sistem. Diagram tersebut tidak memuat
penyimpanan data dan tampak sederhana untuk diciptakan begitu entitas-entitas
eksternal serta aliran data-aliran data menuju dan dari sistem diketahahui menganalisis
dari wawancara dengan user dan sebagai hasil analisis dokumen. Konteks diagram
dimulai dengan penggambaran terminator, aliran data, aliran kontrol penyimpanan, dan
proses tunggal yang menunjukkan keseluruhan sistem.
Diagram konteks berisi gambaran umum sistem yang akan dibuat. Secara umum, dapat
dikatakan bahwa diagram konteks berisi “siapa saja yang memberi data (dan data apa
saja) ke sistem, serta kepada siapa saja informasi (dan informasi apa saja) yang harus
dihasilkan sistem”.
Jadi, yang dibutuhkan adalah, siapa saja pihak yang akan memberikan data
kesistem, data apa saja yang diberikannya ke sistem, kepada siapa sistem harus
memberikan informasi atau laporan, dan apa saja isi/ jenis laporan yang harus
dihasilkan oleh sistem. Kata “ siapa ” diatas dilambangkan dengan kota persegi
(terminator) , kata “ apa “ diatas dilambangkan dengan aliran data (data flow ) dan
kata “sistem” dilambangkan dengan lingkarang ( process ).
Universitas Sumatera Utara
Tabel 3.1 Lambang yang digunakan di Diagram Konteks
Simbol
Nama Simbol
Terminator
Keterangan
Pihak-pihak
sistem,
yang
tetapi
berada
secara
diluar
langsung
berhubungan dengan sistem dalam
hal memberi data atau menerima
informasi.
Process
Didalam diagram konteks, berisi
mengenai sistem yang akan dibuat.
Data Flow
Berisi data atau informasi yang
mengalir dari satu pihak ke sistem
dan sebaliknya.
Sebagai contoh sederhana, sistem yang dibahas adalah sistem inventori barang disuatu
usaha. Dimana unit usahanya adalah “Toko Bok Utama” yang akan dibuat sistem
penjualannya. Adapun diagram konteks dari sistem inventori barang ini adalah sebagai
berikut :
Data pesanan
Konsumen
Faktur penjualan
Aplikasi
Rumah
Makan Siang
Hari
Laporan penjualan
Penjual
Gambar 3.1 Diagram Konteks Aplikasi E-Commerce Rumah Makan Siang Hari
3.4 Perancangan Sistem pada Database
Universitas Sumatera Utara
Database atau basis data adalah kumpulan data yang disimpan secara sistematis
didalam komputer dan dapat dimanipulasi menggunakan perangkat lunak untuk
menghasilkan informasi. Pendefenisian database meliputi spesifikasi berupa tipe data,
struktur dan juga batasan-batasan data yang akan disimpan. Database merupakan aspek
yang sangat penting dalam sistem informasi dimana database merupakan gudang
penyimpanan data yang akan diolah lebih lanjut. Berikut merupakan tabel yang
digunakan oleh penulis dalam membangun aplikasi :
Tabel 3.2 Tabel Admin
Nama
Tipe Data
Id
Username
Username
Varchar(30)
Password
Varchar(30)
Keterangan
Primary key Auto Increment
Tabel 3.3 Tabel Alamat
Nama
Tipe Data
kd_alamat
char(3)
nm_alamat
varchar(100)
biaya_kirim
int(2)
Keterangan
Primary Key
Universitas Sumatera Utara
Tabel 3.4 Tabel Kategori
Nama
Tipe Data
kd_kategori
Char(4)
nm_kategori
Varchar(100)
Keterangan
Primary Key
Tabel 3.5 Tabel Menu
Nama
Tipe Data
kd_menu
Char(5)
nm_menu
Varchar(100)
harga_modal
Int(12)
harga_jual
Int(12)
Keterangan
Text
file_gambar
Varchar(100)
kd_kategori
Char(4)
Keterangan
Primary Key
Index
Tabel 3.6 Tabel pemesanan_item
Nama
Tipe Data
id
Int(4)
no_pemesanan
Char(8)
kd_masakan
Char(5)
harga
Char(12)
jumlah
Int(4)
Keterangan
Primary Key Auto_Increment
Universitas Sumatera Utara
Tabel 3.7 Tabel Pelanggan
Nama
Tipe Data
kd_pelanggan
Char(6)
nm_pelanggan
Varchar(100)
Kelamin
Varchar(20)
Varchar(100)
no_telepon
Varchar(20)
Username
Varchar(20)
Password
Varchar(100)
tgl_daftar
Date
Keterangan
Primary Key
Tabel 3.8 Tabel tmp_keranjang
Nama
Tipe Data
Keterangan
id
Int(4)
Primary Key Auto_Increment
kd_menu
Char(5)
Index
harga
Int(12)
jumlah
Varchar(100)
tanggal
Date
kd_pelanggan
Char(6)
Index
Universitas Sumatera Utara
Tabel 3.9 Tabel Pemesanan
Nama
Tipe Data
Keterangan
no_pemesanan
Char(8)
Primary Key
kd_pelanggan
Char(6)
Index
tgl_pemesanan
Date
nm_penerima
Varchar(100)
alamat_lengkap
Varchar(100)
kd_alamat
Char(3)
Kota
Varchar(100)
kode_pos
Char(5)
no_telepon
Varchar(20)
status_bayar
Enum(‘Pesan’,’Lunas’,’Batal’)
Tabel 3.10 Tabel Konfirmasi
Nama
Tipe Data
Keterangan
Id
Int(4)
Primary Key Auto_Increment
no_pemesanan
Char(8)
Index
nm_pelanggan
Varchar(100)
jlh_transfer
Int(12)
Universitas Sumatera Utara
Keterangan
Varchar(100)
Tanggal
Date
Index
3.5 Flowchart
Flowchart merupakan bagan atau gambar yang memperlihatkan hubungan antar-proses
beserta instruksinya. Gambaran ini dinyatakan dengan simbol yang mana dari tiap-tiap
simbol mewakili proses tertentu. Sedangkan hubungan antar-proses tadi digambarkan
dengan garis-garis.
Flowchart merupakan langkah awal pembuatan program. Setelah flowchart
selesai disusun, selanjutnya pemrogram menerjemahkannya ke dalam bentuk program
menggunakan bahasa pemrograman. Berikut ini adalah simbol-simbol standar pada
sebuah flowchart beserta fungsinya.
Tabel 3.11 Tabel Simbol pada Flowchart
Simbol
Keterangan
Awal dan akhir suatu program
Inisialisasi variable ( persiapan awal )
Input dan output ( masukan dan keluaran ) program
Proses program
Percabangan / perulangan
Connector (tanda sambung untuk halaman sama )
Universitas Sumatera Utara
Connector ( tanda sambung untuk halaman berbeda )
Arah proses
Sub program / Procedure ( blok program )
Dalam pembuatan aplikasi sistem inventori ini juga diperlukan flowchart yang berguna
untuk analisis perancangan sistem aplikasi dan gambaran umum bagaimana aplikasi
sistem inventori ini berjalan dan melakukan input data, proses data, dan output.
Flowchart yang dibutuhkan adalah sebagai berikut :
3.5.1 Flowchart Daftar
START
INPUT DATA
TERSIMPAN
DI DATABASE
MASUK KE HALAMAN
HOME
FINISH
Gambar 3.2 Flowchart Halaman Daftar
Universitas Sumatera Utara
3.5.2 Flowchart Belanja
START
DAFTAR
false
MASUK KE HALAMAN
HOME
IF SELESAI
PILIH BARANG
true
TAMPIL KERANJANG
BELANJA
MELAKUKAN
PEMBAYARAN
FINISH
Gambar 3.3 Flowchart Halaman Home
Universitas Sumatera Utara
3.5.3 Flowchart Login Admin
START
LOGIN
false
CEK LOGIN
LOGIN GAGAL
true
LOGIN
BERRHASIL
TAMPIL HALAMAN
ADMIN
FINISH
Gambar 3.5 Flowchart Halaman Login Admin
Universitas Sumatera Utara
3.5.4 Flowchart Input Menu
START
INPUT PRODUK
YANG DIJUAL
false
true
IF KONDISI
PROSES GAGAL
PROSES
BERRHASIL
PRODUK
MASUK KE
DATABASE
FINISH
Gambar 3.6 Flowchart Halaman Input Menu
Universitas Sumatera Utara
3.6 Membangun Halaman Situs
Adapun halaman-halaman yang dibangun oleh penulis adalah:
1. Halaman index.php, merupakan halaman utama yang akan diakses pertama kali
situs dibuka. Haaman ini berisikan informasi singkat mengenai fashion dan linklink menuju halaman berikutnya. Halaman index yang penulis bangun dibagi
menjadi 2 bagian, yaitu:
a) Halaman index untuk admin
Merupakan halaman yang dikhususkan untuk administrator yang mana
untuk masuk ke halaman ini harus melakukan login terlebih dahulu.
b) Halaman index untuk user
Merupakan halaman untuk user, dimana user dapat mengakses halaman
web tersebut. Pada halaman ini user tidak dapat merubah isi dari situs.
2. Halaman account.php, merupakan halaman yang digunakan oleh user untuk
mendaftar identitas diri agar dapat mengakses soal-soal yang terdapat di dalam
situs tpa online.
3. Halaman login.php, merupakan halaman untuk user login dan masuk ke situs
belanja online.
4. Halaman cart.php, merupakan halaman yang berisikan keranjang belanja user.
5. Halaman confirm.php, merupakan halaman untuk user yang telah melakukan
pembayaran dan dikonfirmasi dengan mengisi data pembayaran dan
mengunduh foto bukti transfer.
Universitas Sumatera Utara
6. Halaman about.php, merupakan halaman mengenai situs dan informasi toko
yang berisikan alamat, nomor kontak dan media social.
3.7 Algoritma
Tahap-tahap yang dilakukan penulis dalam membangun halaman situs adalah sebagai
berikut:
1) Membuka software Macromedia Dreamweaver CS5 sebagai editor dalam
membangun halaman.
2) Mengatur letak layout dengan memanfaatkan tools dan perintah yang terdapat
pada Dreamweaver yaitu dengan meletakkan link-link, grafik, animasi, isi
halaman situs yang telah dirancang.
3) Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada
tempat yang sesuai dikerjakan di jendela code pada Dreamweaver.
4) Menulis skrip CSS untuk memperindah tampilan situs.
5) Mengerjakan halaman pembangun situs.
5.1)
Algoritma Halaman Register
Langkah 1 : input data kedalam form yang tersedia.
Langkah 2 : Jika data sudah terisi, maka proses registrasi berhasil dan
record tersimpan ke database.
5.2)
Algoritma Halaman Pembelian Produk
Langkah 1 : user yang ingin membeli produk diharuskan memasukkan
produk yang diinginkan ke dalam keranjang belanja.
Langkah 2 : Jika user telah memilih barang, selanjutnya tekan tombol
“checkout” untuk ke tahap selanjtnya.
Universitas Sumatera Utara
Langkah 3 : Jika berhasil, user harus mengisi form informasi
pengiriman.
Langkah 4 : Setelah itu tekan tombol “Checkout” dan selesai.
5.3)
Algoritma Halaman Konfirmasi
Langkah 1 : Jika user sudah membayar produk, tekan menu “confirm
payment” untuk mengisi form konfirmasi pembayaran.
Langkah 2 : Jika data sudah terisi, tekan tombol “confirm” dan proses
konfirmasi selesai.
5.4)
Algoritma Halaman Testimoni
Langkah 1 : Isi semua record yang tersedia termasuk komentar
Langkah 2 : Jika proses berhasil, maka komentar anda telah terkirim
dan akan tampil di daftar komentar
Langkah 3 : Jika proses gagal, maka ulangi langkah 1
5.5)
Algoritma Halaman Login Administrator
Langkah 1 : Masukkan data administrator yang ada
Langkah 2 : Setelah itu tekan tombol untuk submit record
Langkah 3 :
Jika proses berhasil, maka berada di level admin dan
berhak memperbaharui isi halaman situs
Langkah 4 : Jika proses gagal, maka ulangi langkah 1
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan desain
yang ada dalam dokumen sistem yang disetujui untuk menguji, menginstal, 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 untuk dioperasikan. Penggunaan suatu komputer untuk
memecahkan masalah membutuhkan suatu sistem yang baik, sehingga memungkinkan
berhasilnya komputer dalam melaksanakan tugasnya, yaitu mengolah data menjadi
informasi. Tahap implementasi sistem terdiri dari langkah-langkah sebagai berikut :
1. Menerapkan rencana implementasi.
2. Melakukan kegiatan implementasi.
3. Tindak lanjut implementasi.
4.2 Tujuan Implementasi Sistem
Dalam implementasi sistem tentu ada tujuan-tujuan tertentu yang harus dicapai.
Adapun tujuan-tujuan tersebut adalah:
1. Menyelesaikan desain sistem yang ada dalam dokumen desain sistem yang
disetujui.
2. Menulis, menguji, serta mendokumentasikan program dan prosedur yang
diperlukan oleh dokumen desain sistem yang disetujui.
Universitas Sumatera Utara
3. Memastikan bahwa user dapat mengoperasikan sistem baru dan melatih
pengguna.
4. Memperhitungkan bahwa sistem memenuhi permintaan user yaitu dengan
menguji sistem secara menyeluruh.
5. Memastikan bahwa konversi ke sistem baru berjalan secara benar dengan
membuat rencana, mengontrol dan melakukan instalasi baru secara benar.
4.3 Penerapan Implementasi Sistem
Untuk menjalankan sistem, perlu diperhatikan kebutuhan apa saja yang akan
mendukung dalam proses program dan data. Perangkat komputer yang dibutuhkan
yaitu :
1. Kebutuhan Perangkat Keras (Hardware)
Hardware merupakan komponen fisik dalam rangkaian komputer, sedangkan
spesifikasi hardware yang dibutuhkan adalah sebagai berikut :
a. Personal Computer (PC).
b. Keyboard.
c. Printer, untuk mencetak hasil.
2. Kebutuhan Perangkat Lunak (Software)
Software merupakan instruksi program yang dapat digunakan dalam komputer.
Software yang diperlukan untuk menjalankan aplikasi ini adalah sebagai berikut:
1. Apache sebagai web server.
2. PHP sebagai web programming.
3. MySQL sebagai database server.
4. Adobe Photoshop CS 5 sebagai designer.
Universitas Sumatera Utara
5. Macromedia Dreamweaver CS 5 sebagai web editor.
3. Brainware
Merupakan faktor manusia yang menangani fasilitas komputer, yang dibutuhkan
adalah :
a. Sistem analisa, orang yang membangun fasilitas rancangan sistem.
b. Programmer, orang yang mengerti bahasa pemrograman dalam membuat dan
membangun program.
c. Operator, orang yang menangani langsung dalam pengolahan data mulai dari
mempersiapkan data sampai dengan pengertian data ke dalam komputer.
4.4 Pemeliharaan Sistem
Pemeliharaan sistem adalah suatu kombinasi dari berbagai tindakan yang dilakukan
untuk menjaga suatu sistem, atau memperbaikinya sampai suatu kondisi yang lebih
baik dan bisa diterima. Adanya tujuan dari pemeliharaan sistem tersebut yaitu:
1. Mencegah modifikasi sistem yang akan menyebabkan masalah lain datang.
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 modifikasi yang
diminta relative besar.
5. Memindahkan gangguan control operasi yang disebabkan oleh pemerintahan
sistem.
4.5 Tampilan Website
Setelah menginstalasi Xampp, maka aplikasi web telah dapat di ujikan di komputer
lokal. Adapun caranya adalah sebagai berikut:
Universitas Sumatera Utara
1. Letakkan file yang membangun web tadi ke dalam suatu folder kemudian
diletakkan di dalam folder htdocs, terlihat seperti gambar berikut:
Gambar 4.1 Folder Berisi File-File di Dalam Folder htdocs
2. Buka web browser Google Chrome
3. Pada kotak URL ketikkan http://localhost/[namafolder]. Karena penulis
meletakkan file-file web di folder tpa maka alamatnya sebagai berikut:
Gambar 4.2 Penulisan Alamat di URL
4. Setelah dilakukan Enter pada keyboard maka akan terlihat tampilan sebagai
berikut:
Universitas Sumatera Utara
Gambar 4.3 Hasil pengujian Aplikasi Web di Browser
Demonstrasi Program
A. Halamanan Utama (index.php)
Gambar 4.4 Halaman Utama
Universitas Sumatera Utara
B. Halaman Daftar (pelanggan_baru.php)
Gambar 4.5 Halaman Daftar Member
D. Halaman Kontak (info_profil.php)
Gambar 4.6 Halaman Kontak
E. Halaman Keranjang Belanja (keranjang_belanja.php)
Universitas Sumatera Utara
Gambar 4.7 Halaman Keranjang Belanja
F. Halaman Pembelian (transaksi_proses.php)
Gambar 4.8 Halaman Pembelian
G. Halaman Konfirmasi Pembayaran (konfirmasi.php)
Universitas Sumatera Utara
Gambar 4.9 Halaman Konfirmasi Pembayaran
H. Halaman Admin (login.php)
Gambar 4.10 Halaman Login Admin
I. Halaman Admin (index.php)
Universitas Sumatera Utara
Gambar 4.11 Halaman Utama Admin
J. Halaman Admin (kategori_add.php)
Gambar 4.12 Halaman Input Kategori
Universitas Sumatera Utara
K. Halaman Admin (menu_data.php)
Gambar 4.13 Halaman Daftar Menu
L. Halaman Admin (pemesanan_menu.php)
Gambar 4.14 Halaman Order
Universitas Sumatera Utara
M. Halaman Admin (laporan_kategori.php)
Gambar 4.15 Halaman Laporan Kategori
Universitas Sumatera Utara
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Dari hasil pembahasan tentang perancangan aplikasi e-commerce Rumah Makan Siang
Hari berbasis web ini, maka penulis dapat mengambil kesimpulan diantaranya adalah
sebagai berikut:
1. Pembuatan suatu aplikasi web dapat dilakukan di komputer lokal tanpa
terkoneksi ke internet. Koneksi internet diperlukan ketika proses upload file
dan pengaksesan situs atau dikenal dengan nama hosting.
2. Aplikasi ini menyajikan informasi terkait dengan Rumah Makan Siang Hari
yang ditujukan pada pembeli.
3. Merancang website sistem informasi e-commerce pada rumah makan “Siang
Hari” menggunakan bahasa pemrograman PHP dan MySQL yang dapat
menampilkan detail menu seperti harga dan jenis masakan. Serta dapat
menampilkan report atau laporan penjualan untuk penjual.
4. Dengan adanya aplikasi ini, informasi tentang menu terbaru di Rumah Makan
Siang Hari dapat terpublikasi dengan baik.
5. Selain sebagai sarana penyampaian informasi, aplikasi ini juga dikembangkan
sebagai sarana pengolahan data secara online.
Universitas Sumatera Utara
5.2 Saran
Agar website ini berkembang dengan baik maka, penulis memberikan saran sebagai
berikut:
1. Diharapkan adanya pengembangan lebih lanjut, sehingga menjadi sebuah
media yang sangat membantu seseorang yang ingin mengukur kemampuannya
dibidang e-commerce.
2. Selalu mengupdate dan memelihara website.
Universitas Sumatera Utara