BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

24
36 BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem Informasi Baru Penataan suatu sistem dalam informasi adalah peningkatan informasi yang baru dari informasi yang sebelumnya. Kesulitan-kesulitan yang sering muncul pada informasi terdahulu semoga dapat terselesaikan dengan menggunakan informasi yang baru. Pada informasi yang baru, pemesanan dan penjualan pada R2 Distro menggunakan rancangan informasi berdasarkan situs yang dirancang menggunakan bahasa pemrograman Hypertext Preprocessor serta basis data My Structured Query Language (MySql) sehingga dapat membantu mempermudah proses penjualannya. 5.2. Desain Sistem Informasi Baru Desain sistem adalah satu unsur atau tahapan dari keseluruhan pembangunan sistem komputerisasi. Penerapan perancangan sistem untuk pembangunan sistem informasi memerlukan jangka waktu yang lama dari pemecahan masalah pada sistem lama. Salah satu unsur pokok yang harus dipertimbangkan dalam pembangunan sistem komputerisasi yaitu masalah perangkat lunak yang dipakai harus sesuai dengan masalah yang akan diselesaikan. Desain sistem baru adalah rancangan suatu sistem yang baru untuk menggantikan rancangan sistem yang lama. Desain sistem informasi baru ini dibuat menggunakan pemrograman PHP dan MySQL untuk pengolahan data penjualan. Desain sistem informasi baru terdiri dari: 1. Desain Sistem Secara Global a) Analisa Sistem Informasi Baru (ASI) b) Context Diagram (CD) c) Data Flow Diagram (DFD) d) Entity Relationship Diagram (ERD) e) Struktur Program. 2. Desain Sistem Secara Terinci a) Desain Input b) Desain Output

Transcript of BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

Page 1: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

36

BAB 5

PERANCANGAN SISTEM INFORMASI BARU

5.1. Usulan Sistem Informasi Baru

Penataan suatu sistem dalam informasi adalah peningkatan informasi yang baru dari

informasi yang sebelumnya. Kesulitan-kesulitan yang sering muncul pada informasi

terdahulu semoga dapat terselesaikan dengan menggunakan informasi yang baru. Pada

informasi yang baru, pemesanan dan penjualan pada R2 Distro menggunakan rancangan

informasi berdasarkan situs yang dirancang menggunakan bahasa pemrograman Hypertext

Preprocessor serta basis data My Structured Query Language (MySql) sehingga dapat

membantu mempermudah proses penjualannya.

5.2. Desain Sistem Informasi Baru

Desain sistem adalah satu unsur atau tahapan dari keseluruhan pembangunan sistem

komputerisasi. Penerapan perancangan sistem untuk pembangunan sistem informasi

memerlukan jangka waktu yang lama dari pemecahan masalah pada sistem lama. Salah satu

unsur pokok yang harus dipertimbangkan dalam pembangunan sistem komputerisasi yaitu

masalah perangkat lunak yang dipakai harus sesuai dengan masalah yang akan diselesaikan.

Desain sistem baru adalah rancangan suatu sistem yang baru untuk menggantikan

rancangan sistem yang lama. Desain sistem informasi baru ini dibuat menggunakan

pemrograman PHP dan MySQL untuk pengolahan data penjualan. Desain sistem informasi

baru terdiri dari:

1. Desain Sistem Secara Global

a) Analisa Sistem Informasi Baru (ASI)

b) Context Diagram (CD)

c) Data Flow Diagram (DFD)

d) Entity Relationship Diagram (ERD)

e) Struktur Program.

2. Desain Sistem Secara Terinci

a) Desain Input

b) Desain Output

Page 2: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

37

c) Desain File Database

d) Desain Logika Program (Flowchart)

Desain Sistem Secara Global

Desain sistem secara global dapat didefinisikan sebagai suatu gambaran,

perencanaan dan pembuatan sketsa pengaturan dari beberapa elemen yang terpisah dalam

satu kesatuan yang masih utuh dan berfungsi untuk membuat sistem penjualan pada R2

Distro.

5.2.2. Perancangan Sistem Informasi (Sistem Baru)

Adapun tujuan dari perancangan sistem ini adalah untuk mempermudah proses

penginputan dan pengolahan data penjualan pada R2 Distro, perincian-perincian yang

mudah dipahami sehingga tidak terjadi kesalahan. Dari sistem yang dilakukan dan melihat

adanya permasalahan dari sistem yang diterapkan, sebaiknya menerapkan atau memakai

sistem komputerisasi yang optimal pada proses penginputan data penjualan pada R2 Distro.

Aliran sistem baru tidak jauh berbeda dari aliran sistem yang sedang berjalan, hanya

saja menggunakan sistem komputerisasi lebih optimal dalam melakukan pencatatan

penjualan, sehingga nantinya segala kendala yang dihadapi selama ini dapat ditutupi oleh

sistem yang baru.

Adapun Aliran Sistem Informasi (ASI) yang baru pada R2 Distro dapat dijabarkan

sebagai berikut:

1. Pelanggan melakukan pemesanan produk dan mengisi data Pelanggan

2. Admin menerima data pemesanan produk dari Pelanggan

3. Admin mengirim konfirmasi pemesanan produk Pelanggan

4. Pelanggan menerima konfirmasi Pemesanan

5. Pelanggan melakukan transaksi pembayaran ke bank yang dituju

6. Pelanggan melakukan konfirmasi pembayaran

7. Bank mengkonfirmasi pembayaran uang dari pelanggan ke rekening bank R2 Distro.

8. Admin menerima konfirmasi pembayaran dari pelanggan dan mengirimkan produk dan

kwitansi kepada Pelanggan.

9. Admin membuat dan menyerahkan laporan penjualan kepada pemilik R2 Distro.

Page 3: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

38

Aliran Sistem Informasi (ASI) Baru Data Penjualan pada R2 Distro

Gambar 5.1. Aliran Sistem Informasi Baru Data Penjualan

Pelanggan Admin Pemilik

Laporan

penjualan

Melakukan

Pemesanan barang

Konfirmasi

pemesanan

Data pesanan

Konfirmasi

Pembayaran

Cetak laporan

penjualan

A

A

Pelanggan melakukan

transaksi pembayaran

Produk & Kwitansi

Pembayaran

DB

Menerima

Konfirmasi

Pembayaran

Produk & Kwitansi

Pembayaran

Faktur

penjualan Laporan

penjualan

Page 4: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

39

Diagram Konteks (Context Diagram)

Diagram konteks merupakan langkah awal yang dilakukan sebelum membuat data

flow diagram. Suatu konteks hanya mengandung satu proses saja. Dimana proses ini

mewakili seluruh proses sistem yang menggambarkan hubungan input/output antara sistem

dengan kesatuan. Berikut ini adalah konteks diagram.

Gambar 5.2 Context Diagram

Input Data

Produk

Data Pemesan

Produk

Input Data

Pelanggan

Lap. data Pelanggan

Lap. Data Pembelian

Pelanggan Admin

Pemilik

0 Perancangan Sistem E-

Commerce R2 Distro

Melakukan

Pemesanan Produk

Faktur Pembelian

Daftar Produk

Page 5: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

40

Data Flow Diagram (DFD)

DFD (Data Flow Diagram) merupakan suatu gambaran yang memakai catatan-

catatan untuk menjelaskan arah dari fakta informasi, yang dalam pemakaiannya benar-

benar mendukung untuk mengerti informasi secara tepat, tersususn serta pasti. Data Flow

Diagram ialah sebuah media yang membantu dalam melukiskan dan mendeskripsikan

informasi yang tengah berjalan rasional.

Gambar 5.3 Data Flow Diagram

5.2.5. Entity Relationship Diagram (ERD)

Entity Relationship diagram (ERD) merupakan suatu model untuk menjelaskan

hubungan antara data dalam basis data berdasarkan objek-objek dasar data yang

mempunyai hubungan antara relasi. Entity Relationship diagram dapat membantu kita

dalam mempelajari hubungan antara file yang kita rancang, dalam hal ini sebagai

penghubung antara file-file kita set sebagai kunci (key) yang sifatnya unik (tidak boleh

sama dengan yang lain). Adapun Entity Relationship diagram (ERD) dari sistem e-

commerce pemesan produk dapat dilihat pada gambar berikut ini:

Pelanggan

Admin

Database

1.0

Input biodata

pemesanan

produk

2.0

Konfirmasi

pembayaran

3.0

Cek

Pemesanan

produk

4.0

Cetak

kwitansi

5.0

Pengiriman

produk

6.0

Cetak

laporan

7.0

Menyerahkan

laporan

Pemilik

Page 6: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

41

Gambar 5.4 Entity Relationship Diagram (ERD)

5.3. Struktur Program

Struktur program merupakan representasi dari suatu hubungan standar program yang

saling berhubungan antara satu dengan yang lainnya dan tampak pada pengerjaan data.

Pembentukan sistem pada program tersebut diupayakan dengan harapan dapat membantu

menyederhanakan untuk mencerna hubungan standar-standar pengerjaan fakta yang

didesain seperti pada gambar di bawah ini.

Produk Input Admin

User Nama

Password

Konsumen

Alamat

nama

Email

Beli

Kategori_produk

Nama

Deskripsi

Harga Stok kode

gambar

satuan

No.Handphone

Kode Pos

Page 7: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

42

1. Struktur Program

Gambar 5.5 Struktur Program

5.4. Desain Terinci

Desain terinci merupakan bentuk rancangan dari pada rincian kebutuhan dari desain

sistem yang terdiri dari desain input, desain output, dan desain file.

5.4.1. Desain Masukan (Input Design)

Merupakan awal dimulainya proses informasi. Bahan mentah dari informasi

adalah data yang terjadi dari transaksi-transaksi. Oleh karena itu, desain input harus benar-

benar menerima input. Desain input dimulai dari desain dokumen dasar sebagai penangkap

input yang pertama kali. Data yang sudah dicatat didokumen dasar kemudian dimasukkan

sebagai input ke sistem informasi untuk diolah.

PERANCANGAN SISTEM E-COMMERCE PADA R2 Distro

Profil Komentar Produk Login Jasa Pengiriman Cara

Pembelian

Sejarah

Visi dan

Misi

Admin

Master Data

Cara Beli

Buku Tamu

Profil

Keluar

Semua Produk

Baju Kaos

Jeans

Baju Kemeja

Sepatu

Topi

Page 8: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

43

1. Input Form Data Pembeli

Gambar 5.6 Desain Input Form Data Pembeli

2. Input Komentar

Gambar 5.7 Desain Input Komentar

Form Data Pembeli

Nama Lengkap : Alamat Lengkap :

Kota Tujuan : Telp./Hp :

Data Pembelian Produk Kode Barang Nama Barang Harga Jumlah Jumlah Harga Satuan

Konfirmasi Belanjaan

Nama Lengkap :

Email : Pesan :

Komentar

Simpan

Batal

Page 9: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

44

3. Input Daftar Poduk

Gambar 5.8 Desain Input Produk

4. Input Tambah Kategori

Gambar 5.9 Desain Input Tambah Kategori

5. Input Jasa Pengiriman

Gambar 5.10 Desain Input Jasa Pengiriman

Simpan

Kode : Nama : Stok :

Harga : Kategori : Diskripsi : Gambar :

Tambah Daftar Produk

Cancel Simpan

Kategori :

Keterangan :

Tambah Kategori

Simpan

Kota Tujuan : Biaya Pengiriman : Jasa Pengiriman :

Tambah Jasa Pengiriman

Simpan

Page 10: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

45

Desain Proses (Process)

Desain proses dalam perancangan e-commerce yang diusulkan berupa data

pelanggan untuk mempermudah dalam laporan pemesanan produk.

5.4.3. Desain Luaran (Output)

Maksud kesimpulan akhir dari sebuah informasi yaitu dapat memberikan informasi

keluaran (output) yang bersifat cepat serta akurat. Karena itu pada sebuah rancangan

keluaran (output) harus kita pelajari keluaran apa saja yang akan ditampilkan serta apa saja

yang akan menjadi kandungan atas keluaran tersebut. Berikut ini merupakan desain output.

1. Desain Output Order Penjualan

Tabel 5.1 Desain Output Order Penjualan

No_order No_Faktur Tanggal Qty Harga Subtotal

5.5 Desain File (Database)

Dalam merancang suatu sistem yang baik dibutuhkan beberapa file yang bertujuan

untuk mempermudah pengambilan data yang dibutuhkan. Adapun file-file yang digunakan

dalam merancang sistem yang baru adalah sebagai berikut:

1. Tabel Admin

Database name : distro.sql

Tabel name : Admin

Primary Key : user

Tabel 5.2 Desain File Admin

Field Type Size Description

User Varchar 50 Username

Password Varchar 30 Password

Nama_lengkap Varchar 30 Nama Lengkap

X(50) X(8) X(11)

X(50) X(8

) X(11)

X(20

)

X(20

)

X(20)

X(20)

X(30)

X(30)

Page 11: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

46

2. Tabel Kategori

Database name : distro.sql

Tabel name : kategori

Primary Key : id_kategori

Tabel 5.3 Desain File Kategori

Field Type Size Description

Id_kategori Int 20 Id_kategori

Nama_kategori Varchar 30 Nama_kategori

Keterangan Varchar 50 Keterangan

3. Tabel Produk

Database name : distro.sql

Tabel name : produk

Primary Key : id_produk

Tabel 5.4 Desain File Produk

Field Type Size Description

Kode Int 5 Kode Produk

Id_kategori Int 5 Id_kategori

Nama Varchar 100 Nama

Deskripsi Text 100 Deskripsi

Harga Int 20 Harga

Stok Int 30 stok

Diskon Date 10 Tgl_masuk

Gambar Varchar 100 Gambar

4. Tabel pelanggan

Database name : distro.sql

Tabel name : pelanggan

Primary Key : id_kostumer

Tabel 5.5 Desain File Pelanggan

Field Type Size Description

Page 12: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

47

Id_Kustomer Int 5 Id_Kustomer

Nama_kostumer Varchar 100 Nama_kostumer

Alamat Text alamat

Telpon Varchar 20 Telpon

Email Varchar 50 Email

Tgl_order date Tgl_order

id_kota int 3 id_kota

Kodepos Varchar 20 Kode Pos

Provinsi Varchar 100 Provinsi

5. Table Penjualan

Database name : distro.sql

Tabel name : penjualan

Primary Key : id_ penjualan

Tabel 5.6 Desain File Pemesanan

Field Type Size Description

Id_penjualan int 5 Id_penjualan

kd_transaksi int 5 kd_transaksi

Produk_id Varchar 100 Id_produk

Pembeli_id int 11 Id_pembeli

Tgl_beli date Tgl_beli

Harga int 11 Jam_order

Jlh int 11 Jumlah

Jlh_harga int 11 Jumlah_Harga

Total_harga int 11 Total_Harga

Tgl_konfirmasi date Tgl_Konfirmasi

Status Varchar 20 Status

6. Table Buku Tamu

Database name : distro.sql

Tabel name : buku_tamu

Page 13: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

48

Primay Key : id_hubungi

Tabel 5.7 Desain File Hubungi Kami

Field Type Size Description

Id_bukutamu Int 11 Id_bukutamu

Nama Varchar 50 Nama

Email Varchar 100 Subjek

Pesan Longtext pesan

Tanggal Date Tanggal

5.6 Desain Logika Program (Flowchart)

Tahap desain logika program adalah tahap dari pemrograman. Urutan-urutan

langkah program secara logika dari suatu komputer telah dirancang sebelumnya akan

tampak dengan jelas dalam rancangan ini. Dalam rancangan program ini menggunakan alat

bantu program.

Page 14: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

49

1. Flowchart Menu Utama

Pilih = “1”Y

T

Input

Pilihan

Pilih = “2”

Pilih = “3”

Profil

YProduk

YKomentar

T

Menu

Utama

Set Variabel

Awal

Pilih = “4”Y

Cara Pembelian

T

Pilih = “5”Y

Jasa Pengiriman

T

Pilih = “6”Y

T

Login

Gambar 5.11 Flowchart Menu Utama

Page 15: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

50

2. Flowchart Profil

Pilih = “1”Y

T

Pilih = “2”Y

T

Profil

Set Variabel Awal

Input Pilihan

Sejarah

Visi dan Misi

Menu Utama

Gambar 5.12 Flowchart Profil

Page 16: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

51

3. Flowchart Produk

Pilih = “1”Y

T

Pilih = “2”

Pilih = “3”

Y

Y

T

Produk

Set Variabel Awal

Input Pilihan

Baju Kaos

Jeans

Baju Kemeja

T

Pilih = “4”

Pilih = “5”

Y

Y

T

Sepatu

Topi

T

Menu Utama

Gambar 5.13 Flowchart Produk

Page 17: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

52

4. Flowchart Menu Admin

Pilih = “1”Y

T

Pilih = “2”

Pilih = “3”

Y

Y

T

Menu Admin

Set Variabel Awal

Input Pilihan

Profil

Master Data

Cara Beli

T

Pilih = “4”Y

T

Buku Tamu

Pilih = “5” Log OutY

Gambar 5.15 Flowchart Menu Admin

Page 18: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

53

1. Flowchart Login

Input username,

password

Pass = “True”

Y

T

Menu Admin

Set Variabel Awal

Password Salah

Login

Gambar 5.14 Flowchart Login

Page 19: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

54

5. Flowchart Profil

Pilih = “1”Y

T

Pilih = “2”

Pilih = “3”

Y

Y

T

Profil

Set Variabel Awal

Input Pilihan

Sejarah

Visi dan Misi

Hubungi Kami

T

Menu Utama

Gambar 5.16 Flowchart Profil

Page 20: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

55

6. Flowchart Master Data

Pilih = “1”Y

T

Input

Pilihan

Pilih = “2”

Pilih = “3”

Data Produk

YProduk Terjual

Y Data

Penjualan

T

Mster Data

Set Variabel

Awal

Pilih = “4”Y

Data Konsumen

T

Pilih = “5”Y

Data Kategori

T

Pilih = “6”Y

Data User

T

Pilih = “7”Y

T

Jasa

Pengiriman

Menu Utama

T

Gambar 5.17 Flowchart Master Data

Page 21: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

56

1. Flowchart Produk

Pilih = “1”Y

T

Pilih = “2”

Pilih = “3”

Pilih = “4”

Y

Y

Y

T

T

Produk

Set Variabel Awal

Input Pilihan

Tambah

Print

Edit

Hapus

Input Pilihan

Gambar 5.18 Flowchart Produk

Page 22: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

57

1. Flowchart Data Penjualan

Pilih = “1”Y

T

Pilih = “2”

Pilih = “3”

Pilih = “4”

Y

Y

Y

T

T

Data Penjualan

Set Variabel Awal

Input Pilihan

Belum

Konfirmasi

Sudah

Konfirmasi

Sudah Dikirim

Print

Input Pilihan

Gambar 5.19 Flowchart Data Penjualan

Page 23: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

58

7. Flowchart Kategori

Pilih = “1”Y

T

Pilih = “2”

Pilih = “3”

Y

Y

T

Kategori

Set Variabel Awal

Input Pilihan

Tambah

Edit

Hapus

Input Pilihan

Gambar 5.20 Flowchart Kategori

Page 24: BAB 5 PERANCANGAN SISTEM INFORMASI BARU 5.1. Usulan Sistem …

59

1. Flowchart Jasa Pengiriman

Pilih = “1”Y

T

Pilih = “2”

Pilih = “3”

Y

Y

T

Jasa

Pengiriman

Set Variabel Awal

Input Pilihan

Tambah

Edit

Hapus

Input Pilihan

Gambar 5.21 Flowchart Jasa Pengiriman