Umi Eka Noviyanti 1461700197
Umi Eka Noviyanti 1461700197
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
Oleh:
U I RJ
PROGRAM SARJANA
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS 17 AGUSTUS 1945 SURABAYA
2021
LEMBAR PENGESAHAN
YA KA
RA M TEK
Oleh :
I
Umi Eka Noviyanti
BA T
1461700197
A
SU OR K
G NF RA
Mengetahui,
Ka, Program Studi Teknik Informatika
ii
KATA PENGANTAR
Puji syukur penulis sampaikan kepada Tuhan Yang Maha Esa atas
selesainya laporan kerja praktek dengan judul “PERANCANGAN SISTEM
INFORMASI PENJUALAN BERBASIS WEB CV. SIMARFIAN JAYA
ABADI”
Atas dukungan moral dan materil yang diberikan dalam penyusunan
makalah ini penulis mengucapkan terima kasih kepada :
YA KA
1. Bapak Geri Kusnanto, S.Kom., MM. Selaku Kepala Program Studi
RA M TEK
Teknik Informatika Universitas 17 Agustus 1945 Surabaya.
I
2. Ibu Nuril Esti Khomariah, S.ST., M.T. Selaku Pembimbing Kerja
BA T
Praktek yang telah memberi motivasi, petunjuk, dan arahan selama
A
SU OR K
proses pelaksanaan kerja praktek.
G NF RA
5. Rekan satu tim dalam pelaksanaan Kerja Praktek CV. Simarfian Jaya
U I RJ
Abadi
KN E
kesuksesan kepada seluruh keluarga besar CV. Simarfian Jaya Abadi terutama
pada bagian Departemen IT dalam melaksanakan serta menjalankan setiap tugas,
kewajiban, dan pekerjaan agar memperoleh hasil yang maksimal. Dan semoga
Allah SWT memberikan ridho-Nya kepada penulis pribadi agar dapat melakukan
kegiatan yang akan penulis laksanakan tersebut guna memenuhi tugas mata kuliah
Kerja Praktek (KP).
Surabaya, 15 Januari 2021
Penulis
iii
DAFTAR ISI
YA KA
DAFTAR LAMPIRAN ....................................................................................... ix
RA M TEK
BAB 1 PENDAHULUAN ................................................................................... 1
I
BA T
1.1 Latar Belakang....................................................................................... 1
A
SU OR K
1.2 Tujuan ................................................................................................... 3
G NF RA
iv
3.2.2 User Requirements ....................................................................... 25
3.2.3 System Requirements ................................................................... 26
3.3 Tahapan Perancangan dan Hasil ........................................................... 26
3.3.1 Flowchart ..................................................................................... 29
3.3.2 Use Case Diagram ........................................................................ 33
3.3.3 Activity Diagram .......................................................................... 35
3.3.4 Sequence Diagram ........................................................................ 37
3.3.5 Desain MockUp ............................................................................ 40
3.3.6 Desain Database ........................................................................... 44
YA KA
3.3.7 Database ....................................................................................... 45
RA M TEK
3.3.8 User Interface ............................................................................... 49
I
BAB 4 KESIMPULAN_DAN_SARAN ............................................................ 54
BA T
A
SU OR K
4.1 Kesimpulan.......................................................................................... 54
G NF RA
4.2 Saran ................................................................................................... 54
DAFTAR PUSTAKA ........................................................................................ 55
TA I P
N K A
U I RJ
KN E
TE K
v
DAFTAR TABEL
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
vi
DAFTAR GAMBAR
YA KA
Gambar 2.8 UML‟s Diagrams ..........................................................................14
RA M TEK
Gambar 3.1 Diagram Tahapan Perancangan .....................................................27
I
BA T
Gambar 3.2 analisi sistem informasi penjualan ...................................................28
A
SU OR K
Gambar 3.3 Diagram Flowchart Administrasi ..................................................30
G NF RA
Gambar 3.4 Diagram Flowchart Customer .......................................................31
Gambar 3.5 Diagram Flowchart Sistem Login ..................................................32
TA I P
vii
Gambar 3.23 Database tabel detail_pesanan .....................................................45
Gambar 3.24 Database tabel distriks ................................................................46
Gambar 3.25 Database tabel kategori ...............................................................46
Gambar 3.26 Database tabel Pelanggan ............................................................47
Gambar 3.27 Database tabel Pesanan ...............................................................47
Gambar 3.28 Database tabel Produk ..................................................................47
Gambar 3.29 Database tabel Propinsi ...............................................................48
Gambar 3.30 Database tabel users(admin) ........................................................48
Gambar 3.31 Database tabel Kota ....................................................................49
YA KA
RA M TEK
Gambar 3.32 Tampilan Halaman Awal(Customer/Pelanggan) ..........................50
Gambar 3.33 Tampilan Halaman Login Customer..............................................50
I
BA T
Gambar 3.34 Tampilan List Pesanan ..................................................................51
A
SU OR K
Gambar 3.35 Email pemesanan ..........................................................................51
G NF RA
Gambar 3.36 Tampilan Dashboard Admin .........................................................52
Gambar 3.37 Tampilan Proses Pesanan ..............................................................52
TA I P
viii
DAFTAR LAMPIRAN
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
ix
BAB 1
PENDAHULUAN
YA KA
baru bagi pebisnis dalam memperdagangkan dagangannya yang bisa dibilang
RA M TEK
sistem informasi penjualan (e-commerce).
Definisi sistem informasi menurut Kadir (2003). “sistem informasi adalah
I
BA T
kerangka kerja yang mengkoordinasikan sumber daya (manusia, komputer) untuk
A
SU OR K
mengubah masukan (input) menjadi keluaran (informasi), guna mencapai sasaran-
G NF RA
operasi dan manajemen. Dalam arti yang sangat luas, istilah sistem informasi
N K A
yang sering digunakan merujuk kepada interaksi antara orang, proses algoritmik,
U I RJ
1
2
dan aplikasi serta untuk memenuhi persyaratan wajib perkulihan maka penulis
bermaksud agar dapat melaksanakan kerja praktek.
Dalam era globalisasi dunia dan perdagangan yang bebas diperlukan adanya
industry yang maju dengan tenaga kerja yang professional di bidangnya masing-
masing. Untuk itu selain mendapatkan berbagai teori di bangku Pendidikan
formal,maka diperlukan adanya pengalaman kerja di lapangan.
Salah satu cara untuk menambah pengalaman kerja tersebut adalah dengan
mengadakan kerja praktek di industri-industri yang berkaitan dengan bidang studi
yang dipelajari di bangku kuliah. Kerja praktek merupakan salah satu mata kuliah
YA KA
RA M TEK
di Jurusan Teknik Informatika UNIVERSITAS 17 AGUSTUS 1945
SURABAYA (UNTAG SURABAYA), sebagai sarana untuk latihan
I
BA T
mengembangkan dan menerapkan ilmu pengetahuan yang diperoleh di bangku
A
SU OR K
kuliah. Selain itu dengan kerja praktek akan diperoleh gambaran yang jelas
G NF RA
tentang berbagai hal yang berkaitan dengan berbagai masalah, khususnya masalah
pengaturan sistem di tempat kerja praktek. Dalam mencapai usaha di atas,
TA I P
tentunya tidak lepas dari peran serta berbagai pihak, baik dari kalangan kampus
dan dunia usaha serta semua instansi terkait.
N K A
Kerja Praktek merupakan salah satu mata kuliah yang wajib ditempuh bagi
U I RJ
pendidikan di Universitas bagi mahasiswa dan merupakan salah satu syarat yang
TE K
YA KA
RA M TEK
perlu dibuat Sistem Informasi Penjualan yang berfungsi sebagai sarana penjualan,
pembelian, serta pemasaran barang dan jasa.
I
BA T
1.2 Tujuan
A
SU OR K
G NF RA
1.2.1 Tujuan Umum
Memenuhi salah satu syarat kelulusan Dalam melaksanakan Kerja
Praktek terdapat beberapa tujuan umum dari terlaksananya Kerja Praktek adalah
TA I P
sebagai berikut:
N K A
lapangan secara langsung dan nyata, dan juga lebih mengenal keadaan
dilapangan yang sesungguhnya.
KN E
TE K
YA KA
RA M TEK
1.3 Manfaat
I
1.3.1 Manfaat Untuk Mahasiswa
BA T
A
SU OR K
Manfaat bagi mahasiswa setelah mengikuti proses kegiatan kerja praktek
G NF RA
adalah sebagai berikut:
sehingga dapat membangun sikap kerja yang baik dan penuh dengan
rasa tanggung jawab serta disiplin dalam melaksanakan kerja praktek.
5. Mahasiswa dapat mempelajari dan mengenal tentang permasalahan
didunia pekerjaan dan menyelesaikan masalah tersebut berdasarkan
pengalaman yang didapat saat waktu dibangku perkuliahan.
6. Mahasiswa dapat memperoleh pengalaman dalam dunia kerja.
YA KA
RA M TEK
5. Kerja Praktek yang ada dalam suatu perusahaan yang terkaitdapat
terbantu oleh mahasiswa yang melaksanakan kegiatan Kerja Praktek
I
BA T
diperusahaan tersebut.
A
SU OR K
6. Dengan adanya Kerja Praktek perusahaan dapat menambah tenaga
G NF RA
kerja manusia dan mengurangi jumlah tingkat pengangguran.
7. Kegiatan Kerja Praktek dapat meningkatkan suatu produktifitas bagi
TA I P
setiap perusahaan.
N K A
1.4 Luaran
Luaran dari kerja praktek ini adalah laporan akhir serta dokumentasi dan
Produk Program (alat/perkakas, desain, piranti lunak, model, dan lainnya).
6
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
BAB 2
GAMBARAN_UMUM
YA KA
meningkatkan pelayanan dan SDM karyawannya.Untuk menunjang suatu
RA M TEK
perkembangan teknologi pada CV. Simarfian Jaya Abadi, maka perlu dibuat
I
BA T
Sistem Informasi Penjualan yang berfungsi sebagai sarana penjualan, pembelian,
A
SU OR K
serta pemasaran barang dan jasa.
G NF RA
TA I P
N K A
U I RJ
Berawal dari sebuah impian besar pendiri dan pengalaman kerja yang cukup
banyak di bidang IT dan system Komunikasi, yang telah teruji selama bertahun-
tahun sebelumnya di berbagai perusahaan baik local maupun internasional, maka
pada tanggal 17 Desember 2015 di dirikan CV. Simarfian Jaya Abadi (CV.SJA)
sebagai perusahaan yang bergerak dalam semua layanan solusi IT dan
tekomunikasi. (Perdagangan, Jasa, Konsultan, Internet Content/Provider, Instalasi,
Implementasi, Maintenace, dan Training). Dengan bekal pengalaman yang lebih,
terlatih, teruji, profesional dan kreativitas tinggi, serta senantiasa melakukan
inovasi-inovasi baru, juga telah memegang beberapa sertifikasi teknis tingkat
Internasional, serta didukung oleh tim manajemen yang telah berpengalaman
sebelumnya dibidangnya masing-masing maka CV. SJA terus melaju bersama
7
8
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
YA KA
RA M TEK
Balsamiq mockup adalah program aplikasi yang digunakan dalam pembuatan
tampilan user interface sebuah aplikasi. Software ini sudah menyediakan tools
I
BA T
yang dapat memudahkan dalam membuat desain prototyping aplikasi yang akan
A
SU OR K
kita buat. Software ini berfokus pada konten yang ingin digambar dan
G NF RA
(pelanggan). Dengan alat pembuat mockup maka seorang web desainer dapat
menganalisa tata letak, desain dan fungsi.
KN E
adalah aplikasi ini berbasis cloud, disertai aplikasi desktop yang memungkinkan
kita dengan cepat dan mudah membuat rancangan website. Dengan konten yang
terbuat seperti dari gambaran tangan, akan membuat kita fokus pada pemecahan
masalah user interface yang lebih besar, daripada pada perincian website.
Balsamiq memiliki 6 toolbar yang berbeda, yaitu:
1. Menavigasi antara mockup, asset dan simbol.
2. Menyembunyikan / memperlihatkan panel disebelah kiri(Navigator Panel).
3. Memperlihatkan grid pada mockup yang kalian buat.
4. Membuat Mockup baru.
5. Mockup action (Rename,dll) dan ini bisa digunakan setelah kita hidden
mockup (toolbar ke 2).
6. Melihat mockup kita secara berurutan (Ketika mode hidden).
10
Toolbar berikutnya adalah yang berada di tengah toolbar. Toolbar ini dipakai
dalam mengedit sesuatu di canvas, seperti undo, redo, copy, paste, duplicate,
group , ungroup, zoom in, zoom out, show markup.
YA KA
RA M TEK
Gambar 2.5 Tampilan Toolbar2
I
BA T
Toolbar berikut adalah yang berada di pojok kanan, yaitu quick add tool,
A
SU OR K
memunculkan/menyembunyikan UI library, Properti panel, Project info panel dan
G NF RA
mode fullscreen.
TA I P
Balsamiq datang di plugin, aplikasi web dan bentuk desktop. Salah satu tujuan
alat wireframing ini adalah untuk menjaga standar internasional mock-up,
KN E
TE K
mendorong sebanyak mungkin berbagi umpan balik. Dan sekarang tersedia tiga
versi yang berbeda, termasuk Desktop, Google Drive dan Cloud.
Balsamiq memungkinkan untuk membuat klik-melalui prototipe untuk dua
kegunaan dan pengujian demo. Namun, hanya ada 75 komponen UI dan sekitar
187 ikon, yang lebih sedikit dari mockup wireframing lainnya, tetapi ini mudah
untuk belajar dan dilengkapi dengan face-to-face yang user-friendly dan fokus
pada fungsi desain yang cepat dan fun.
Beberapa fitur dan interaksi yang diperlukan oleh desainer berpengalaman
untuk melaksanakan dan mengelola proyek-proyek yang saat ini dikerjakan secara
efisien dan cepat, tetapi tidak adanya kemampuan untuk Pan dan Zoom akan jelas
memperlambat.
11
2.5 XAMPP
YA KA
XAMPP adalah sebuah paket perangkat lunak (software) komputer yang
RA M TEK
sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) /
I
MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat
BA T
pada awal kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi
A
SU OR K
ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS
G NF RA
XAMPP adalah suatu bundel web server yang populer digunakan untuk di
Windows karena kemudahan instalasinya. Bundel program open source tersebut
berisi antara lain server web Apache, interpreter PHP, dan basis data MySQL(
Bunafit Nugroho, 2008).
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem
operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai
server yang berdiri sendiri (localhost), yang terdiri atas program Apache
HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan
bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X
12
(empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini
tersedia dalam General Public License dan bebas, merupakan web server yang
mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.
XAMPP dikembangkan dari sebuah tim proyek bernama Apache Friends, yang
terdiri dari Tim Inti (Cor Team), Tim Pengembang (Development Team) & Tim
Dukungan (Support Team).
Jika dijabarkan secara gamblang, masing-masing huruf yang ada di dalam
nama XAMPP menurut para ahli memiliki arti sebagai berikut ini:
1. X = Cross Platform
YA KA
RA M TEK
Merupakan kode penanda untuk software cross platform atau yang bisa
berjalan di banyak sistem operasi. Jadi, ada XAMPP untuk Windows, xampp for
I
BA T
mac, dan untuk Linux. Semua itu bersifat free download xampp.
A
SU OR K
2. A = Apache
G NF RA
Apache adalah aplikasi web server yang bersifat gratis dan bisa dikembangkan
oleh banyak orang (open source).
TA I P
3. M = MySQL / MariaDB
MySQL atau MariaDB merupakan aplikasi database server yang
N K A
4. P = PHP
TE K
Huruf “P” yang pertama dari akronim kata XAMPP adalah inisial untuk
menunjukkan eksistensi bahasa pemrograman PHP. Bahasa pemrograman ini
biasanya digunakan untuk membuat website dinamis, contohnya dalam website
berbasis CMS WordPress.
5. P = Perl
Sementara itu, untuk huruf P selanjutnya merupakan singkatan dari bahasa
pemrograman Perl yang kerap digunakan untuk memenuhi berbagai macam
kebutuhan. Perl ini bisa berjalan di dalam banyak sistem operasi sehingga sangat
fleksibel dan banyak digunakan.
YA KA
RA M TEK
Program aplikasi XAMPP berfungsi sebagai server lokal untuk mengampu
berbagai jenis data website yang sedang dalam proses pengembangan. Dalam
I
BA T
prakteknya, XAMPP bisa digunakan untuk menguji kinerja fitur ataupun
A
SU OR K
menampilkan konten yang ada didalam website kepada orang lain tanpa harus
G NF RA
terkoneksi dengan internet, cukup akses melalui Xampp control panel, atau
istilahnya website offline.
TA I P
XAMPP bekerja secara offline layaknya web hosting biasa namun tidak
bisa diakses oleh banyak orang. Maka dari itu, XAMPP biasanya banyak
N K A
digunakan oleh para mahasiswa maupun pelajar untuk melihat hasil desain
U I RJ
website sebelum akhirnya dibuat online menggunakan web hosting yang biasa
KN E
dijual dipasaran.
TE K
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
Gambar 2.8 UML‟s Diagrams
TA I P
Definisi UML adalah sebagai suatu bahasa yang sudah menjadi standar pada
visualisasi, perancangan, dan juga pendokumentasian sistem aplikasi. Saat ini
N K A
UML menjadi bahasa standar dalam penulisan blue print software (arsitektur).
U I RJ
UML merupakan salah satu standar bahasa yang banyak digunakan di dunia
TE K
YA KA
RA M TEK
mudah dan memperluas program.
4. Dapat berguna sebagai blue print, karena lengkap dan detail dalam
I
BA T
perancangan. Yang nantinya akan diketahui informasi yang detail
A
SU OR K
mengenai koding suatu program.
G NF RA
5. Dapat memodelkan sistem yang berkonsep berorientasi objek, jadi
tidak hanya berguna untuk memodelkan perangkat lunak (software)
TA I P
saja.
6. Dapat membuat suatu bahasa pemodelan yang nantinya dapat
N K A
Use Case diagram adalah suatu urutan interaksi yang saling berkaitan antara
TE K
sistem dan aktor. Use case dijalankan melalui cara menggambarkan tipe interaksi
antara user suatu program (sistem) dengan sistemnya sendiri. Use case melalui
sebuah cerita yang mana sebuah sistem itu dipakai. Use case juga dipakai untuk
membentuk perilaku (behaviour) sistem yang akan dibuat. Sebuah use case
menggambarkan sebuah interakasi antara pengguna (aktor) dengan sistem yang
sudah ada.
Use Case Diagram ini memaparkan proses kegiatan dan proses bisnis yang
dilakukan oleh pengguna (aktor). Pada diagram Use Case ini, setiap proses
digambarkan kedalam sebuah Use Case berbentuk oval dengan relasi yang ada
didalamnya.
Tujuan Use Case:
1. Memetakkan kebutuhan sistem.
16
YA KA
RA M TEK
1. Untuk memudahkan hubungan dengan menggunakan domain expert
dan juga end user.
I
BA T
2. Adanya Interface yang harus dimiliki oleh sebuah sistem.
A
SU OR K
3. Memberikan kepastian pemahaman yang pas, tentang requirement atau
G NF RA
juga kebutuhan sebuah sistem.
4. Dapat digunakan untuk mengidentifikasi, siapa yang sedang
TA I P
berinteraksi dengan sistem, dan juga apa yang harus dilakukan untuk
sistem tersebut.
N K A
U I RJ
program yang sedang dirancang, bagaimana proses alir berawal, keputusan yang
TE K
YA KA
objek tersebut.
RA M TEK
Sequence diagram digunakan untuk menjelaskan perilaku pada sebuah
I
skenario dan menggambarkan bagaimana entitas dan sistem berinteraksi,
BA T
termasuk pesan yang dipakai saat interaksi. Semua pesan digambbarkan dalam
A
SU OR K
urutan pada eksekusi.
G NF RA
Sequence diagram berkaitan erat dengan Use Case Diagram, yang mana 1 Use
Case akan menjadi 1 Sequence Diagram.
TA I P
YA KA
4. Dengan Class Diagram dapat dibuat bagan secara terperinci dan jelas,
RA M TEK
dengan cara memperhatikan kode spesifik apa saja yang dibutuhkan oleh
I
program. Hal ini mampu mengimplementasikan ke struktur yang
BA T
A
SU OR K
dijelaskan.
G NF RA
5. Class Diagram mampu memberikan penjelasan implementasi-independen
dari suatu jenis program yang digunakan, kemudian dilewatkan diantara
TA I P
berbagai komponennya.
N K A
YA KA
RA M TEK
2. Mekanisme model dalam desain arsitektur system.
3. Tangkap interaksi yang mengarahkan pesan yang dilewati antar peran
I
BA T
dan objek dalam skenario kolaborasi.
A
SU OR K
4. Model skenario alternatif dalam kasus pemakaian atau operasi yang
G NF RA
melibatkan kolaborasi dari berbagai interaksi dan objek.
5. Dukung pengidentifikasian objek (sebab kelas), atributnya (parameter
TA I P
pesan), dan operasi (pesan) yang ikut serta dalam use case.
N K A
Pengertian komponen dalam UML merupakan hal-hal fisik dari program yang
akan digambarkan (modelkan) dan ada ketika sistem dijalankan.
Fungsi Component Diagram:
1. Sebagai source code perangkat lunak (software).
2. Komponen executable yang dilepas dan dipakai oleh pengguna.
3. Bagian dari basis data secara fisik.
4. Sistem yang harus bekerja sama dengan sistem yang lain.
5. Sebagai framework sistem, dimana dalam hal ini memiliki fungsi
untuk mempermudah pengelolaan dan perawatan dari sistem
YA KA
RA M TEK
2.5.9 Object Diagram
I
Object Diagram adalah diagram menghasilkan gambaran struktur model
BA T
sebuah sistem, dalam kurun waktu tertentu. Diagram objek yang berasal dari class
A
SU OR K
diagram, sehingga object diagram tergantung pada class diagram.
G NF RA
Diagram. Perbedaannya adalah bahwa Class Diagram adalah model abstrak yang
N K A
Tapi sebuah Object Diagram merupakan contoh pada saat tertentu yang
konkret di alam. Ini berarti Object Diagram lebih dekat dengan perilaku sistem
KN E
yang sebenarnya. Tujuannya ialah untuk menangkap gambaran statis dari sistem
TE K
2.7 Flowchart
YA KA
Flowchart adalah adalah suatu bagan dengan simbol-simbol tertentu yang
RA M TEK
menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses
I
BA T
(instruksi) dengan proses lainnya dalam suatu program.
A
SU OR K
Dalam perancangan flowchart sebenarnya tidak ada rumus atau patokan yang
G NF RA
bersifat mutlak (pasti). Hal ini didasari oleh flowchart (bagan alir) adalah sebuah
gambaran dari hasil pemikiran dalam menganalisa suatu permasalahan dalam
TA I P
komputer. Karena setiap analisa akan menghasilkan hasil yang bervariasi antara
satu dan lainnya. Kendati begitu secara garis besar setiap perancangan flowchart
N K A
selalu terdiri dari tiga bagian, yaitu input, proses dan output.
U I RJ
KN E
YA KA
simbol yang digunakan untuk memilih proses
RA M TEK
atau keputusan berdasarkan kondisi yang ada.
I
Simbol ini biasanya ditemui pada flowchart
BA T
program.
A
SU OR K
G NF RA
peralatannya.
U I RJ
KN E
YA KA
RA M TEK
Manual Input Symbol adalah simbol
I
digunakan untuk menunjukkan input data secara
BA T
A
SU OR K
manual menggunakan online keyboard.
G NF RA
YA KA
Sublime Text adalah aplikasi editor untuk kode dan teks yang dapat
RA M TEK
berjalan diberbagai platform operating system dengan menggunakan
I
BA T
teknologi Phyton API. Terciptanya aplikasi ini terinspirasi dari aplikasi
A
SU OR K
Vim, Aplikasi ini sangatlah fleksibel dan powerfull. Fungsionalitas dari
G NF RA
aplikasi ini dapat dikembangkan dengan menggunakan sublime-
packages(SublimeText ).
TA I P
Ruby, SQL, TCL, Textile and XML. Biasanya bagi bahasa pemrograman
yang didukung ataupun belum terdukung secara default dapat lebih
dimaksimalkan atau didukung dengan menggunakan add-ons yang bisa
didownload sesuai kebutuhan user.
2. Xampp
24
25
MockUp adalah sebuah media visual atau preview dari sebuah konsep
desain “datar” yang diberikan efek visual sehingga hasilnya sangat tampak
atau menyerupai wujud nyata(Medium).
YA KA
MockUp dalam pelaksanaan kerja praktek ini digunakan untuk membuat
RA M TEK
desain kasar dari website yang akan pengguna aplikasikan. Sehingga dapat
I
digambarkan desain yang sudah dirancang.
BA T
4. Draw.io
A
SU OR K
G NF RA
Draw.io adalah sebuah website yang didesain khusus untuk
menggambarkan diagram secara online. Semua fitur yang ada pada situs ini
TA I P
PC(Drawio).
KN E
TE K
YA KA
RA M TEK
c. Customer dapat mengakses baik memilih maupun melihat
detail produk
I
BA T
d. Customer dapat memesan produk
A
SU OR K
e. Customer dapat mengonfirmasi pembayaran
G NF RA
requirements yaitu :
N K A
yaitu :
KN E
RAM : 8 GB
Hard Disk : 750 GB
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
YA KA
Ganbar 3.2 analisi sistem informasi penjualan
RA M TEK
I
BA T
2. Tahap Perancangan Database dan Sistem
A
SU OR K
Pada tahap ini, melakukan perancangan database dengan
G NF RA
berpedoman pada database yang sudah ada dan mengambil beberapa
sumber tabel yang dibutuhkan
TA I P
perancangan
KN E
Pada tahap ini sistem akan diuji oleh user, apakah sudah sesuai
dengan requirement yang diharapkan, kemudian apakah sistem
berhasil.
a. Pengujian apabila gagal
YA KA
3.3.1 Flowchart
RA M TEK
Flowchart atau Diagram alir, bagan alir, atau bagan arus adalah sebuah jenis
I
BA T
diagram yang mewakili algoritme, alir kerja atau proses, yang menampilkan
A
SU OR K
langkah-langkah dalam bentuk simbol-simbol grafis, dan urutannya dihubungkan
G NF RA
dengan panah.
a. Administrasi
TA I P
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
b. Customer
Flowchart ini menggambarkan kegiatan yang dilakukan Customer atau
Pelanggan dari sistem yang dibuat.
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
YA KA
halaman transaksi apakah sudah lunas atau belum.
RA M TEK
Apabila pembayaran sudah dilunaskan maka sistem akan menampilkan
tampilan pembayaran yang lunas tersebut ke layar.
I
BA T
A
SU OR K
c. Sistem login
G NF RA
Pada Proses ini apabila data customer seperti email dan password tidak
terdaftar dalam sistem:
Sistem akan mengarahkan customer ke email yang diinputkan
Sistem akan mengirimkan pesan notifikasi konfirmasi ke customer
Customer yang mengkonfirmasi pesan tersebut akan mendapatkan
balasan dari sistem berupa password untuk masuk ke website
Customer pun akan diarahkan masuk ke halaman utama/awal dari
website
YA KA
3.3.2 Use Case Diagram
RA M TEK
Use case diagram merupakan diagram yang menggambarkan hubungan antara
I
aktor dengan sistem. Use case diagram bisa mendeskripsikan sebuah interaksi
BA T
A
SU OR K
antara satu atau lebih aktor dengan sistem yang akan dibuat.
G NF RA
a. Use case akses layanan
Menggambarkan proses layanan yang dapat diakses oleh user
TA I P
N K A
U I RJ
KN E
TE K
Pada use case ini admin(administrasi) dan customer dapat mengakses layanan
login dan logout pada aplikasi
b. Use case Penjualan
Menggambarkan proses penjualan produk yang dilakukan oleh admin
34
YA KA
RA M TEK
Gambar 3.7 Diagram use case penjualan
I
BA T
A
SU OR K
G NF RA
Admin dapat melakukan input produk, kategori, dan harga serta laporan
pembayaran
TA I P
Proses Pembelian ini Customer dapat memilih barang yang diperlukan atau
dibutuhkan/diinginkan lalu melakukan pembayaran yang tersedian di halaman
transaksi/keranjang, dan mengisi formulir data diri untuk pengiriman barang.
YA KA
lalu sistem akan menampilkan form login/registrasi. Pemakai(User baik
RA M TEK
admin ataupun costumer) memasukkan email yang sudah terdaftar dan
I
password dan sistem akan memverifikasi email dan password tersebut dan
BA T
apabila terdaftar maka sistem akan langsung mengarahkan pengguna ke
A
SU OR K
halaman awal.
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
b. Mendaftarkan Akun
Mendaftar akun jika merupakan user pertama dan tidak
mempunyai akun yang terdaftar pada sistem(database). Dimulai dengan
form login/registrasi.
36
YA KA
RA M TEK
I
BA T
A
SU OR K
Gambar 3.10 Activity Diagram register/daftar akun
G NF RA
c. Penjualan
TA I P
d. Pembelian
Proses pembelian dimulai saat login customer, pada halaman awal
terdapat beberapa pilihan produk. Pengguna pun dapat mencari produk
yang mereka inginkan serta jumlah yang dibutuhkan. Lalu
memasukkannya ke dalam keranjang yang secara otomatis akan mentotal
semua pembelian yang sudah dilakukan
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
a. Login
Diagram sequence login menggambarkan bagaimana actor/ user
melakukan proses login
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
Pada diagram ini user memasukkan email beserta password untuk masuk ke
U I RJ
dalam sistem, sistem akan memvalidasi atau mengecek data yang dimasukkan
oleh user.
KN E
Apabila data tersebut sama dengan data yang disimpan di database maka
TE K
b. Penjualan
Diagram sequence Penjualan menggambarkan bagaimana actor/ Admin
melakukan proses Penjualan
39
YA KA
RA M TEK
I
BA T
A
SU OR K
Gambar 3.14 Sequence diagram Penjualan
G NF RA
kebagian produk untuk memasukkan detail barang beserta barang yang diinputkan
U I RJ
tersebut. Setelah itu sistem akan menyimpan data dan menampilkan data yang
KN E
telah diperbarui.
TE K
40
c. Pendaftaran
Diagram sequence Pendaftaran menggambarkan bagaimana actor/ User
melakukan proses Pendaftaran atau registrasi akun mereka
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
User akan mendaftar pada form login, maka sistem akan mengarahkan pada
form pendaftaran yang mengharuskan user mengisi email mereka, seteah itu
sistem akan mengirimkan email balasan kepada user. Email itu merupakan
pemberitahuan untuk mengkonfirmasi email untuk mendapatkan password akun.
Apabila sudah mengkonfirmasi akun, sistem akan mengirim kembali email
yang berisikan kode password pengguna.
Mockup yang mempunyai tampilan menarik dan terkesan modern ini, tentu
saja cocok digunakan saat presentasi atau dimasukkan ke dalam Graphic Standard
Manual (buku GSM)(Seputar Mockup).
Mockup mempunyai beberapa fungsi sebagai berikut:
YA KA
RA M TEK
1. Melihat preview desain sebelum dicetak atau diproduksi.
I
BA T
2. Biaya yang dikeluarkan hemat karena tidak perlu mencetak desain yang
A
SU OR K
belum fix.
G NF RA
3. Sebagai kontrol untuk menjaga display desain agar tidak melenceng dari
konsep awal.
TA I P
diproduksi.
U I RJ
1. Halaman Awal(Customer/Pelanggan)
Halaman awal pelanggan berfungsi untuk menampilkan status pesanan
mulai dengan pesanan belum di bayar, pesanan di kirim,dan pesanan sudah
berhasil dibayar dan dikirim
42
YA KA
RA M TEK
Gambar 3.16 Desain Halaman Awal Customer
I
BA T
A
SU OR K
2. Halaman Login Customer
G NF RA
Tampilan login yang berfungsi untuk memasukan email dan password
pelanggan yang sudah didapat melalui email.
TA I P
N K A
U I RJ
KN E
TE K
3. List Pesanan
Halaman list pesanan berfungsi untuk menampilkan daftar pesanan
pelanggan. List daftar pesanan berisi data invoice, penerima, no telephone,
total, dan tanggal. Serta button detail untuk berpindah ke halaman detail
pesanan.
43
YA KA
RA M TEK
Gambar 3.18 Desain List Pesanan
I
BA T
4. Dashboard Admin
A
SU OR K
Halaman Dashboard berisi tampilan halaman awal pada bagian admin
G NF RA
setelah login.
TA I P
N K A
U I RJ
KN E
TE K
5. Proses Pesanan
Halaman proses pesanan yang berfungsi untuk mengisi data diri pelanggan
serta terdapat button proses pesanan yang digunakan untuk mensubmit
data.
44
YA KA
RA M TEK
I
Gambar 3.20 Desain Proses Pesanan
BA T
A
SU OR K
G NF RA
6. Halaman Keranjang
Halaman keranjang belanja yang berfungsi untuk menampung list pesanan
TA I P
YA KA
RA M TEK
Gambar 3.22 Desain Database
I
BA T
A
SU OR K
3.3.7 Database
G NF RA
Database diperlukan untuk menyimpan data-data penting seperti data user,
pesanan, dan data tentang detail produk.
TA I P
a. Tabel detail_pesanan
Table detail_pesanan ini di gunakan dalam meyimpan data pesanan. Dari table
N K A
ini, produk yang di pesan oleh pelanggan akan di simpan di table ini (sebagai
U I RJ
b. Tabel distriks
Table distrik ini di gunakan dalam meyimpan data distrik/kabupaten. Table
distrik berfungsi sebagai alur dalam menampilkan data distrik/kabupaten masing –
masing kota sesuai dengan apa yang telah di input oleh pelanggan.
46
YA KA
RA M TEK
Gambar 3.24 Database tabel distriks
I
BA T
A
SU OR K
c. Tabel kategori
Table kategori ini di gunakan dalam meyimpan data kategori. Dari table ini
G NF RA
d. Tabel pelanggan
Table pelanggan ini di gunakan dalam meyimpan data diri pelanggan. Dari
table ini pelanggan dapat mengakses data diri masing – masing serta pelanggan
juga dapat belanja tanpa harus mengisi ulang data diri.
YA KA
Gambar 3.26 Database tabel Pelanggan
RA M TEK
I
BA T
e. Tabel Pesanan
A
SU OR K
Table pesanan ini di gunakan dalam meyimpan data pesanan. Dari table ini,
G NF RA
pelanggan yang sudah melakukan pemesanan produk maka data diri serta produk
yang di pesan akan di simpan di table ini.
TA I P
N K A
U I RJ
KN E
f. Tabel produk
Table produk ini di gunakan dalam meyimpan data produk. Dari table ini
pelanggan dapat melihat data produk yang sebelumnya sudah di input terlebih
dahulu oleh admin.
g. Tabel propinsi
Tabel propinsi ini di gunakan dalam meyimpan data propinsi. Table
propinsi memiliki fungsi sebagai alur dalam pengisian alamat pada pelanggan.
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
h. Tabel users
TE K
Tabel user ini merupakan rancangan untuk menampung data admin. Serta
sebagai akses masuk admin ke dalam sistem.
i. Tabel Kota
Tabel kota ini di gunakan dalam meyimpan data kota. Table kota berfungsi
sebagai alur dalam menampilkan data kota sesuai dengan propinsi yang telah di
input oleh pelanggan.
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
sistem dengan pengguna (user). Tampilan UI dapat berupa bentuk, warna, dan
TE K
YA KA
RA M TEK
I
BA T
Gambar 3.32 Tampilan Halaman Awal(Customer/Pelanggan)
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
YA KA
RA M TEK
I
BA T
A
Gambar 3.34 Tampilan List Pesanan
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
YA KA
RA M TEK
Gambar 3.36 Tampilan Dashboard Admin
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
YA KA
RA M TEK
I
BA T
Gambar 3.38 Tampilan Halaman Pengaturan
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
4.1 Kesimpulan
Sistem Informasi sangat diperlukan bagi customer maupun admin karena
fungsi dari sistem informasi itu sendiri yaitu Meningkatkan aksesiblitas data
secara efektif dan efisien kepada pengguna, tanpa dengan perantara sistem
informasi. Menjamin ketersediaan kualitas dan keterampilan dalam memanfaatkan
YA KA
sistem informasi secara kritis. Memperbaiki produktivitas aplikasi pengembangan
RA M TEK
dan pemeliharaan sistem. Sistem Informasi ini sudah diintegrasikan dengan email
I
pengguna dan password yang digunakan pun merupakan password langsung
BA T
diperoleh oleh sistem
A
SU OR K
G NF RA
4.2 Saran
Berdasarkan pengalaman penulis saat melaksanakan kerja praktek serta
TA I P
dalam penulisan kerja praktek, penulis memiliki beberapa saran sebagai berikut :
Diharapkan aplikasi yang dibuat dapat memenuhi kebutuhan pengguna
N K A
yang bersangkutan
U I RJ
KN E
TE K
54
55
DAFTAR PUSTAKA
Apa Itu Draw.io ? Ini Penjelasan Lengkapnya (no date). Available at:
https://surgatekno.com/tech-news/apa-itu-draw-io/ (Accessed: 18 January
2021).
Apa Itu Javascript [ Pengertian, Sejarah, Kelebihan, dan ++ ] - bilabil (no date).
Available at: https://bilabil.com/apa-itu-javascript/ (Accessed: 18 January
2021).
Balsamiq Mockup – Belajar Tiada Henti (no date). Available at:
YA KA
https://enggar.net/2016/01/balsamiq-mockup/ (Accessed: 21 January 2021).
RA M TEK
jQuery - Wikipedia bahasa Indonesia, ensiklopedia bebas (no date). Available at:
https://id.wikipedia.org/wiki/JQuery (Accessed: 16 January 2021).
I
BA T
Microsoft SQL Server - Wikipedia bahasa Indonesia, ensiklopedia bebas (no
A
SU OR K
date). Available at: https://id.wikipedia.org/wiki/Microsoft_SQL_Server
G NF RA
https://hasantarmizi.blogspot.com/2017/04/pengertian-sublime-text.html
N K A
YA KA
RA M TEK
I
BA T
A
SU OR K
G NF RA
TA I P
N K A
U I RJ
KN E
TE K
TE K
KN E
U I RJ
N K A
Lampiran 1. Surat balasan
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
57
TE K
KN E
U I RJ
N K A
Lampiran 2. Aktivitas harian
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
58
TE K
KN E
U I RJ
N K A
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
59
TE K
KN E
Lampiran 3. Kuisioner
U I RJ
N K A
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
60
TE K
KN E
U I RJ
N K A
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
61
TE K
KN E
U I RJ
N K A
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
62
TE K
KN E
U I RJ
N K A
Lampiran 4. Form penilaian
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
63
TE K
KN E
U I RJ
N K A
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA
TE K
KN E
U I RJ
N K A
TA I P
G NF RA
SU OR K
RA M TEK
A
BA T
I
YA KA