Sistem Informasi Penjualan Pakaian Berbasis Web Chapter III V
BAB 3
PERANCANGAN SISTEM
3.1 Pengertian Perancangan Sistem
Perancangan sistem adalah merancang atau mendesain suatu sistem yang baik,
yang isinya adalah langkah-langkah operasi dalam proses pengolahan data dan
prosedur untuk mendukung operasi sistem. Perancangan sistem dapat diartikan
sebagai berikut :
1. Tahap setelah analisis dari siklus pengembangan sistem.
2. Pendefinisian dari kebutuhan-kebutuhan fungsional.
3. Persipan untuk rancang bangun implementasi.
4. Menggambarkan bagaimana suatu sistem dibentuk.
5. Yang dapat berupa penggambaran perencanaan dan pembuatan sketsa atau
pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan
yang utuh dan berfungsi.
6. Termasuk menyangkut mengkonfigurasi dari komponen perangkat keras
dari suatu sistem.
3.1 Data Flow Diagram
DFD (Data Flow Diagram) adalah diagram yang digunakan untuk
memodelkan sistem secara logika. DFD sering digunakan untuk
menggambarkan suatu sistem
Universitas Sumatera Utara
16
yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa
mempertimbangkan lingkungan fisik dimana data tersebut mengalir.
Keuntungan menggunakan DFD adalah memudahkan pemakai yang
kurang menguasai bidang komputer untuk mengerti sistem yang sedang
dikerjakan atau dikembangkan. DFD dari Sistem Informasi Penjualan Pakaian
Berbasi Web dapat dilihat pada gambar 3.1.1.
PRODUK
DATA
SISTEM
INFORMASI
PENJUALAN
PAKAIAN
Gambar 3.1. DFD (Data Flow Diagram)
3.2 Perancangan Database
Database adalah susunan record data operasional lengkap dari suatu organisasi
atau perusahaan, yang diorganisir dan disimpan secara terintegrasi dengan
menggunakan metode tertentu sehingga mampu memenuhi informasi yang
optimal yang dibutuhkan olehpara pengguna.
Dalam perancangan sistem informasi penjualan pakaian ini, penulis
membuat 3 tabel dalam database. Tabel-tabel tersebut adalah tabel admin, tabel
produk, tabel image. Pembuatan database dan tabel-tabel menggunakan fasilitas
Universitas Sumatera Utara
17
MySQL atau phpmyadmin yang terdapat pada software XAMPP. Dibawah ini
adalah gambaran isi dari masing-masing tabel.
3.2.1 Tabel Admin
Tabel 3.1. berisi tentang data pengguna toko (Admin). Berikut ini adaah field-field
yang dibuat dalam tabel admin:
Tabel 3.1. Tabel Admin
Nama Field
Tipe Data
Keterangan
Id
Int (2)
Nomor Identitas Admin
Username
Varchar (30)
Username Admin
Password
Varchar (30)
Password Admin
3.2.2 Tabel Produk
Tabel 3.2. berisi tentang semua hal yang behubungan dengan produk. Berikut
adalah field-field yang dibuat dalam tabel produk:
Tabel 3.2. Tabel Produk
Nama Field
Tipe Data
Keterangan
id_barang
Int (9)
Nomor Produk Barang
nama_barang
Varchar (50)
Nama Barang
harga_barang
Int (9)
Harga Barang
kategori_barang Varchar(50)
Kategori Produk Barang
stock_barang
Int (4)
Stok Barang
status_barang
Varchar (20)
Status Barang
gambar_barang
Varchar (150)
Gambar Barang
Universitas Sumatera Utara
18
ket_barang
Varchar (300)
Keterangan Barang
3.2.2 Tabel Image
Tabel 3.3. berisi tentang gambar logo dan slideshow. Berikut adalah field-field
yang dibuat dalam tabel image:
Tabel 3.3. Tabel Image
Nama Field
Tipe Data
Keterangan
Id
Int (2)
Nomor Gambar
Bagain
Varchar (25)
Bagian Gambar
Gambar
Varchar (50)
Nama File Gambar
3.3 Perancagan FlowChart
Flowchart atau digram alir adalah sekumpulan simbol-simbol atau skema yang
menunjukkan atau menggambarkan rangkaian kegiatan-kegiatan mulai dari awal
(start) hingga akhir (stop). Pembuatan dari flowchart atau diagram alir ini adalah
penggambaran dari urutan langkah-langkah pengerjaan dari suatu algoritma.
Universitas Sumatera Utara
19
3.3.1 Flowchart Admin
Flowchart admin dari Sistem Informasi Penjualan Pakaian Berbasis Web dapat
dilihat pada gambar 3.2.
Start
Index
Halaman
Admin
Login
Home
Produk
Data
Edit
Delete
Update
Database
Admin
Data
Edit
Delete
Update
Database
Logout
Gambar 3.2. Flowchart Admin
Universitas Sumatera Utara
20
3.3.2 Flowchart User
Flowchat User atau pengguna dari Sistem Informasi Penjualan Pakaian Berbasis
Web dapat dilihat pada gambar 3.3.
Start
Halaman utama
Home
About Us
Sejarah dibuatnya
Contact
Contact Us
Produk
Kategori
Tampilkan Kategori
Lihat Detail
Gambar 3.3. Flowchart User
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang
dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk
menginstal, menguji dan memulai sistem baru atau sistem yang diperbaiki.
Pada implementasi ini terlebih dahulu dilakukan pengujian sistem. Setelah
terlihat kesalahan dan permasalahan yang ditemukan di dalam pengujian, sistem
tersebut diperbaiki. Pengujian sistem dilanjutkan ke tahap operasi yang nyata.
4.2 Tujuan Implementasi Sistem
Adapun tujuan-tujuan Implementasi Sistem, yaitu:
1. Pada implementasi ini terlebih dahulu dilakukan pengujian sistem. Setelah
terlihat kesalahan dan permasalahan yang ditemukan di dalam pengujian,
sistem tersebut diperbaiki. Pengujian sistem dilanjutkan ke tahap operasi yang
nyata.
2. Memastikan bahwa pemakai atau user dapat mengoperasikan sistem baru, yaitu
dengan mempersiapkan manual pemakaian dan melatih sistem.
3. Memastikan bahwa konversi ke sistem baru berjalan secara benar, yaitu dengan
membuat rencana, mengontrol dan melakukan instalasi baru secara benar.
Universitas Sumatera Utara
22
4.3 Demonstrasi Website Penjualan Pakaian
Berikut adalah tampilan website sistem informasi penjualan pakaian berbasis
website yang terbagi menjadi dua halaman yaitu Homepage dan Administrator
Page.
4.3.1 Tampilan Homepage
Berikut adalah beberapa tampilan homepage:
Homepage adalah halaman utama, halaman pertama, halaman pembuka dari suatu
website/ situs web. Hompage merupakan halaman yang paling penting pada suatu
website karena merupakan halaman utama dan halaman yang di index terlebih
dahulu oleh search engine sebelum halaman-halaman yang lain pada suatu
website.Dari gambar di bawah ada beberapa menu yaitu menu navbar yang
didalam nya terdapat about, contact us, how to buy, logo second clothing
menggunakan Jumbotron dan terdapat navbar yang di dalam nya terdapat
beranda, pria, wanita, dan cart. Tampilan dari header dapat dilihat pada gambar
4.1.
Gambar 4.1. Tampilan Header
Universitas Sumatera Utara
23
Gambar 4.2. adalah background
yang menggunakan Carrousel yang akan
menjadikan gambar menjadi slide.
Gambar 4.2. Tampilan Slider
Gambar 4.3. adalah badan dan bawahan dari homepage.
Gambar 4.3. Tampilan Badan
Universitas Sumatera Utara
24
Gambar 4.4. adalah tampilan dari halaman about yang di dalamnya terdapat
tentang website tersebut.
Gambar 4.4. Tampilan About
Gambar 4.5. adalah tampilan dari halaman contact yang didalam nya terdapat
contact person dari wesbsite tersebut.
Gambar 4.5. Tampilan Contact
Gambar 4.6. adalah tampilan dari halaman how to buy yang di dalamnya terdapat
cara pembelian di website tersebut.
Gambar 4.6. Tampilan How To Buy
Universitas Sumatera Utara
25
Gambar 4.7. adalah tampilan dari halaman pria yang di dalamnya terdapat
gambar-gambar pakaian yang dijual.
Gambar 4.7. Tampilan Halaman Pria
Universitas Sumatera Utara
26
Gambar 4.8. adalah tampilan dari halaman wanita yang di dalamnya terdapat
gambar-gambar pakaian yang dijual.
Gambar 4.8. Tampilan Halaman Wanita
Universitas Sumatera Utara
27
Gambar 4.9. adalah tampilan dari halaman detail_barang yang di dalamnya
terdapat detail dari suatu barang yang dipilih.
Gambar 4.9. Tampilan Detail Barang
Gambar 4.10. adalah tampilan dari halaman detail/cart yang di dalamnya terdapat
barang yang dibelanjakan.
Gambar 4.10. Tampilan Detail / Cart
Universitas Sumatera Utara
28
Gambar 4.11. adalah tampilan dari halaman checkout yang di dalamnya terdapat
form data pembeli.
Gambar 4.11. Tampilan Halaman CheckOut
Gambar 4.12. adalah tampilan dari halaman selesai yang di dalamnya terdapat
jumlah uang yang harus dibayar pembeli dan data yang membeli.
Gambar 4.12. Tampilan Halaman Selesai
Universitas Sumatera Utara
29
4.3.2 Tampilan Administrator
Tampilan administrator adalah tampilan yang berfungsi untuk mengubah isi
konten website. Pada gambar 4.13. adalah halaman untuk login.
Gambar 4.13. Tampilan Login
Gambar 4.14. adalah tampilan dari halaman pakaian admin yang di dalamnya
terdapat data pakaian yang ada di website.
Gambar 4.14. Tampilan data pakaian admin
Universitas Sumatera Utara
30
Gambar 4.15. adalah tampilan dari halaman menambah pakaian di dalam
administrator.
Gambar 4.15. Tampilan penambahan pakaian
Gambar 4.16. adalah tampilan dari halaman mengedit pakaian di dalam
administrator.
Gambar 4.16. Tampilan Pengeditan Pakaian
Universitas Sumatera Utara
31
Gambar 4.17. adalah tampilan dari halaman tentang yang di dalamnya dapat
mengganti logo dari website.
Gambar 4.17. Tampilan Halaman Tentang
Gambar 4.18. adalah tampilan dari halaman administrator yang di dalamnya
tempat penambahan akun admin.
Gambar 4.18. Tampilan Akun Administrator
Universitas Sumatera Utara
BAB 5
PENUTUP
5.1 Kesimpulan
Berdasarkan proses perencanaan hingga implementasi sistem, maka sebagai
penutup laporan penulis mengambil beberapa kesimpulan:
1. Perancangan dapat dilakukan setelah melakukan studi kelayakan, analisis
sistem, kemudian melakukan implementasi sistem yang dibuat.
2. Pengolahan data dengan bantuan komputer dapat meringankan pekerjaan,
serta dapat mempersingkat waktu kerja dan mendapatkan hasil yang akurat.
3. Penggunaan perangkat komputer yang baik dapat menghasilkan hasil yang
lebih maksimal dan mempersingkat waktu dalam pengoperasian program.
5.2 Saran
Adapun beberapa saran yang dapat disampaikan, yaitu:
1. Perlu diperluas lagi sistem yang dibuat sehingga ruang lingkupnya besar
dan akan menjadi sistem informasi yang banyak digunakan dipenjualan
pakaian.
2. Sistem yang dibuat diharapkan mampu memberikan kemudahan kepada
pengguna untuk berbelanja pakaian secara online.
3. Penulis menyarankan dibuatnya pembayaran secara online agar para
pembeli
tidak
harus
datang
ke
tempat
penjual.
Universitas Sumatera Utara
PERANCANGAN SISTEM
3.1 Pengertian Perancangan Sistem
Perancangan sistem adalah merancang atau mendesain suatu sistem yang baik,
yang isinya adalah langkah-langkah operasi dalam proses pengolahan data dan
prosedur untuk mendukung operasi sistem. Perancangan sistem dapat diartikan
sebagai berikut :
1. Tahap setelah analisis dari siklus pengembangan sistem.
2. Pendefinisian dari kebutuhan-kebutuhan fungsional.
3. Persipan untuk rancang bangun implementasi.
4. Menggambarkan bagaimana suatu sistem dibentuk.
5. Yang dapat berupa penggambaran perencanaan dan pembuatan sketsa atau
pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan
yang utuh dan berfungsi.
6. Termasuk menyangkut mengkonfigurasi dari komponen perangkat keras
dari suatu sistem.
3.1 Data Flow Diagram
DFD (Data Flow Diagram) adalah diagram yang digunakan untuk
memodelkan sistem secara logika. DFD sering digunakan untuk
menggambarkan suatu sistem
Universitas Sumatera Utara
16
yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa
mempertimbangkan lingkungan fisik dimana data tersebut mengalir.
Keuntungan menggunakan DFD adalah memudahkan pemakai yang
kurang menguasai bidang komputer untuk mengerti sistem yang sedang
dikerjakan atau dikembangkan. DFD dari Sistem Informasi Penjualan Pakaian
Berbasi Web dapat dilihat pada gambar 3.1.1.
PRODUK
DATA
SISTEM
INFORMASI
PENJUALAN
PAKAIAN
Gambar 3.1. DFD (Data Flow Diagram)
3.2 Perancangan Database
Database adalah susunan record data operasional lengkap dari suatu organisasi
atau perusahaan, yang diorganisir dan disimpan secara terintegrasi dengan
menggunakan metode tertentu sehingga mampu memenuhi informasi yang
optimal yang dibutuhkan olehpara pengguna.
Dalam perancangan sistem informasi penjualan pakaian ini, penulis
membuat 3 tabel dalam database. Tabel-tabel tersebut adalah tabel admin, tabel
produk, tabel image. Pembuatan database dan tabel-tabel menggunakan fasilitas
Universitas Sumatera Utara
17
MySQL atau phpmyadmin yang terdapat pada software XAMPP. Dibawah ini
adalah gambaran isi dari masing-masing tabel.
3.2.1 Tabel Admin
Tabel 3.1. berisi tentang data pengguna toko (Admin). Berikut ini adaah field-field
yang dibuat dalam tabel admin:
Tabel 3.1. Tabel Admin
Nama Field
Tipe Data
Keterangan
Id
Int (2)
Nomor Identitas Admin
Username
Varchar (30)
Username Admin
Password
Varchar (30)
Password Admin
3.2.2 Tabel Produk
Tabel 3.2. berisi tentang semua hal yang behubungan dengan produk. Berikut
adalah field-field yang dibuat dalam tabel produk:
Tabel 3.2. Tabel Produk
Nama Field
Tipe Data
Keterangan
id_barang
Int (9)
Nomor Produk Barang
nama_barang
Varchar (50)
Nama Barang
harga_barang
Int (9)
Harga Barang
kategori_barang Varchar(50)
Kategori Produk Barang
stock_barang
Int (4)
Stok Barang
status_barang
Varchar (20)
Status Barang
gambar_barang
Varchar (150)
Gambar Barang
Universitas Sumatera Utara
18
ket_barang
Varchar (300)
Keterangan Barang
3.2.2 Tabel Image
Tabel 3.3. berisi tentang gambar logo dan slideshow. Berikut adalah field-field
yang dibuat dalam tabel image:
Tabel 3.3. Tabel Image
Nama Field
Tipe Data
Keterangan
Id
Int (2)
Nomor Gambar
Bagain
Varchar (25)
Bagian Gambar
Gambar
Varchar (50)
Nama File Gambar
3.3 Perancagan FlowChart
Flowchart atau digram alir adalah sekumpulan simbol-simbol atau skema yang
menunjukkan atau menggambarkan rangkaian kegiatan-kegiatan mulai dari awal
(start) hingga akhir (stop). Pembuatan dari flowchart atau diagram alir ini adalah
penggambaran dari urutan langkah-langkah pengerjaan dari suatu algoritma.
Universitas Sumatera Utara
19
3.3.1 Flowchart Admin
Flowchart admin dari Sistem Informasi Penjualan Pakaian Berbasis Web dapat
dilihat pada gambar 3.2.
Start
Index
Halaman
Admin
Login
Home
Produk
Data
Edit
Delete
Update
Database
Admin
Data
Edit
Delete
Update
Database
Logout
Gambar 3.2. Flowchart Admin
Universitas Sumatera Utara
20
3.3.2 Flowchart User
Flowchat User atau pengguna dari Sistem Informasi Penjualan Pakaian Berbasis
Web dapat dilihat pada gambar 3.3.
Start
Halaman utama
Home
About Us
Sejarah dibuatnya
Contact
Contact Us
Produk
Kategori
Tampilkan Kategori
Lihat Detail
Gambar 3.3. Flowchart User
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang
dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk
menginstal, menguji dan memulai sistem baru atau sistem yang diperbaiki.
Pada implementasi ini terlebih dahulu dilakukan pengujian sistem. Setelah
terlihat kesalahan dan permasalahan yang ditemukan di dalam pengujian, sistem
tersebut diperbaiki. Pengujian sistem dilanjutkan ke tahap operasi yang nyata.
4.2 Tujuan Implementasi Sistem
Adapun tujuan-tujuan Implementasi Sistem, yaitu:
1. Pada implementasi ini terlebih dahulu dilakukan pengujian sistem. Setelah
terlihat kesalahan dan permasalahan yang ditemukan di dalam pengujian,
sistem tersebut diperbaiki. Pengujian sistem dilanjutkan ke tahap operasi yang
nyata.
2. Memastikan bahwa pemakai atau user dapat mengoperasikan sistem baru, yaitu
dengan mempersiapkan manual pemakaian dan melatih sistem.
3. Memastikan bahwa konversi ke sistem baru berjalan secara benar, yaitu dengan
membuat rencana, mengontrol dan melakukan instalasi baru secara benar.
Universitas Sumatera Utara
22
4.3 Demonstrasi Website Penjualan Pakaian
Berikut adalah tampilan website sistem informasi penjualan pakaian berbasis
website yang terbagi menjadi dua halaman yaitu Homepage dan Administrator
Page.
4.3.1 Tampilan Homepage
Berikut adalah beberapa tampilan homepage:
Homepage adalah halaman utama, halaman pertama, halaman pembuka dari suatu
website/ situs web. Hompage merupakan halaman yang paling penting pada suatu
website karena merupakan halaman utama dan halaman yang di index terlebih
dahulu oleh search engine sebelum halaman-halaman yang lain pada suatu
website.Dari gambar di bawah ada beberapa menu yaitu menu navbar yang
didalam nya terdapat about, contact us, how to buy, logo second clothing
menggunakan Jumbotron dan terdapat navbar yang di dalam nya terdapat
beranda, pria, wanita, dan cart. Tampilan dari header dapat dilihat pada gambar
4.1.
Gambar 4.1. Tampilan Header
Universitas Sumatera Utara
23
Gambar 4.2. adalah background
yang menggunakan Carrousel yang akan
menjadikan gambar menjadi slide.
Gambar 4.2. Tampilan Slider
Gambar 4.3. adalah badan dan bawahan dari homepage.
Gambar 4.3. Tampilan Badan
Universitas Sumatera Utara
24
Gambar 4.4. adalah tampilan dari halaman about yang di dalamnya terdapat
tentang website tersebut.
Gambar 4.4. Tampilan About
Gambar 4.5. adalah tampilan dari halaman contact yang didalam nya terdapat
contact person dari wesbsite tersebut.
Gambar 4.5. Tampilan Contact
Gambar 4.6. adalah tampilan dari halaman how to buy yang di dalamnya terdapat
cara pembelian di website tersebut.
Gambar 4.6. Tampilan How To Buy
Universitas Sumatera Utara
25
Gambar 4.7. adalah tampilan dari halaman pria yang di dalamnya terdapat
gambar-gambar pakaian yang dijual.
Gambar 4.7. Tampilan Halaman Pria
Universitas Sumatera Utara
26
Gambar 4.8. adalah tampilan dari halaman wanita yang di dalamnya terdapat
gambar-gambar pakaian yang dijual.
Gambar 4.8. Tampilan Halaman Wanita
Universitas Sumatera Utara
27
Gambar 4.9. adalah tampilan dari halaman detail_barang yang di dalamnya
terdapat detail dari suatu barang yang dipilih.
Gambar 4.9. Tampilan Detail Barang
Gambar 4.10. adalah tampilan dari halaman detail/cart yang di dalamnya terdapat
barang yang dibelanjakan.
Gambar 4.10. Tampilan Detail / Cart
Universitas Sumatera Utara
28
Gambar 4.11. adalah tampilan dari halaman checkout yang di dalamnya terdapat
form data pembeli.
Gambar 4.11. Tampilan Halaman CheckOut
Gambar 4.12. adalah tampilan dari halaman selesai yang di dalamnya terdapat
jumlah uang yang harus dibayar pembeli dan data yang membeli.
Gambar 4.12. Tampilan Halaman Selesai
Universitas Sumatera Utara
29
4.3.2 Tampilan Administrator
Tampilan administrator adalah tampilan yang berfungsi untuk mengubah isi
konten website. Pada gambar 4.13. adalah halaman untuk login.
Gambar 4.13. Tampilan Login
Gambar 4.14. adalah tampilan dari halaman pakaian admin yang di dalamnya
terdapat data pakaian yang ada di website.
Gambar 4.14. Tampilan data pakaian admin
Universitas Sumatera Utara
30
Gambar 4.15. adalah tampilan dari halaman menambah pakaian di dalam
administrator.
Gambar 4.15. Tampilan penambahan pakaian
Gambar 4.16. adalah tampilan dari halaman mengedit pakaian di dalam
administrator.
Gambar 4.16. Tampilan Pengeditan Pakaian
Universitas Sumatera Utara
31
Gambar 4.17. adalah tampilan dari halaman tentang yang di dalamnya dapat
mengganti logo dari website.
Gambar 4.17. Tampilan Halaman Tentang
Gambar 4.18. adalah tampilan dari halaman administrator yang di dalamnya
tempat penambahan akun admin.
Gambar 4.18. Tampilan Akun Administrator
Universitas Sumatera Utara
BAB 5
PENUTUP
5.1 Kesimpulan
Berdasarkan proses perencanaan hingga implementasi sistem, maka sebagai
penutup laporan penulis mengambil beberapa kesimpulan:
1. Perancangan dapat dilakukan setelah melakukan studi kelayakan, analisis
sistem, kemudian melakukan implementasi sistem yang dibuat.
2. Pengolahan data dengan bantuan komputer dapat meringankan pekerjaan,
serta dapat mempersingkat waktu kerja dan mendapatkan hasil yang akurat.
3. Penggunaan perangkat komputer yang baik dapat menghasilkan hasil yang
lebih maksimal dan mempersingkat waktu dalam pengoperasian program.
5.2 Saran
Adapun beberapa saran yang dapat disampaikan, yaitu:
1. Perlu diperluas lagi sistem yang dibuat sehingga ruang lingkupnya besar
dan akan menjadi sistem informasi yang banyak digunakan dipenjualan
pakaian.
2. Sistem yang dibuat diharapkan mampu memberikan kemudahan kepada
pengguna untuk berbelanja pakaian secara online.
3. Penulis menyarankan dibuatnya pembayaran secara online agar para
pembeli
tidak
harus
datang
ke
tempat
penjual.
Universitas Sumatera Utara