PERANCANGAN SISTEM INFORMASI PENJUALAN BUKU

ONLINE BERBASIS MOBILE PADA TOKO BUKU BISNIS

LAPORAN PRAKTIK KERJA LAPANGAN (PKL)

Sebagai salah satu syarat terpenuhinya mata kuliah praktik kerja lapangan

program studi Teknologi Komputer

Oleh :

NIM : 102200027

Nama : Ahmad Abul Musyarrof

PROGRAM STUDI TEKNOLOGI KOMPUTER

FAKULTAS SAINS DAN TEKNOLOGI

INSTITUT TEKNOLOGI DAN SAINS NAHDLATUL ULAMA

PEKALONGAN

2023
 LEMBAR PERSETUJUAN
PRAKTIK KERJA LAPANGAN
Perancangan Sistem Informasi Penjualan Buku Online

Berbasis Mobile Pada Toko Buku Bisnis

Diajukan Sebagai Salah Satu Syarat Untuk Mengikuti Ujian

Praktik Kerja Lapangan Program Studi Teknologi Komputer

Oleh:

NIM : 102200027

Nama : Ahmad Abul Musyarrof

Sebagai Salah Satu Syarat Untuk Menyelesaikan Mata Kuliah

Praktik Kerja Lapangan (PKL)

Pekalongan, 25 Mei 2023 :

Pembimbing Obyek PKL Mahasiswa

Abdul Razak Naufal AHMAD ABUL MUSYARROF

NIDN. 0608068404 NIM.102200027

Mengetahui,
Dosen Pembimbing Ketua Program Studi

Fajar Mahardika M.Kom Akrim Teguh Suseno, S.Kom., M.T.I.

NIDN. 0628089501 NIDN. 0609039102

i
 LEMBAR PENGESAHAN
PRAKTIK KERJA LAPANGAN (PKL)

Judul : Perancangan Sistem Informasi Penjualan Buku Online Berbasis

Mobile Pada Toko Buku Bisnis
Nama : Ahmad Abul Musyarrof
NIM : 102200027
Program Studi : Teknologi Komputer
Jenjang : Strata Satu (S1)

Dinyatakan LULUS Setelah Dipertahankan Di Depan Tim Penguji Praktik Kerja Lapangan
Program Studi Teknologi Komputer.

Pekalongan, 15 Juni 2023 :

Tim Penguji:

Penguji I, Penguji II,

. Fajar Mahardika, M. Kom.

NIDN. NIDN. 0628089501

Mengetahui,

Ketua Program Studi Teknologi Komputer

Fakultas Sains dan Teknologi

NIDN.

ii
 KATA PENGANTAR
Puji Syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa, yang telah
melimpahkan rahmat dan hidayah-Nya, sehingga penulis dapat menyelesaikan Laporan
Praktik Kerja Lapangan (PKL) yang berjudul “Perancangan Sistem Infromasi
Penjualan Buku Online Berbasis Mobile Pada Toko Buku Bisnis”.
Penyusunan laporan ini dapat terselesaikan berkat dukungan dan kerjasama yang
baik dari berbagai pihak. Oleh karena itu perkenankan penulis menyampaikan ucapan
terima kasih kepada:
1. Dr. Haryadi, M. Sc., M.Si, selaku Rektor ITS NU Pekalongan,
2. M. Rudi Fanani, M.Kom, selaku Dekan Fakultas Sains dan Teknologi ITS NU
Pekalongan,
3. Akrim Teguh Suseno, S.Kom., M.T.I. , selaku Kaprodi Teknologi Komputer,
4. Fajar Mahardika, M. Kom., selaku Dosen Pembimbing PKL,
5. Abdul Razak Naufal Selaku Dosen Pembimbing di CV. Mega Teknologi,
6. Semua Bapak dan Ibu Dosen Program Studi Komputer yang telah banyak
memberikan ilmu dan membimbing penulis,
7. Kedua Orang Tua atas dukungan dan doa yang tidak pernah berhenti tercurah
kepada penulis ,
8. Rekan-rekan yang telah membantu dan memotivasi penulis selama PKL di
CV.Mega Teknologi,
9. Seluruh pihak yang telah meluangkan waktu dan memberi bantuan kepada penulis
dalam Laporan Praktek Kerja Lapangan yang tidak dapat disebutkan satu-persatu.

Semoga bantuan yang telah Bapak, Ibu, dan Saudara berikan mendapat balasan dari
Allah SWT dan dapat mengembangkan serta memajukan dunia pendidikan.

Penulis menyadari bahwa dalam penyusunan laporan banyak kekurangan karena

keterbatasan pengetahuan dan kemampuan dari penulis, maka dari itu penulis meminta
maaf apabila ada kesalahan dan kekurangan. Penulis berharap penyusunan laporan ini
dapat memberikan manfaat bagi semua pihak.

Pekalongan, 25 Mei 2023

iii
 Ahmad Abul Musyarrof

DAFTAR ISI

LEMBAR PERSETUJUAN...................................................................................................i
LEMBAR PENGESAHAN...................................................................................................ii
KATA PENGANTAR...........................................................................................................iii
DAFTAR ISI.........................................................................................................................iv
DAFTAR GAMBAR............................................................................................................vi
DAFTAR TABEL................................................................................................................vii
BAB 1 PENDAHULUAN.....................................................................................................1
1.1. Latar Belakang...........................................................................................................1
1.2. Rumusan Masalah......................................................................................................2
1.3 Batasan Masalah........................................................................................................2
1.4. Tujuan Laporan..........................................................................................................3
1.5. Manfaat Laporan........................................................................................................3
1.6. Waktu Pelaksanaan....................................................................................................3
1.7. Sistematika Penulisan Laporan..................................................................................3
BAB II GAMBARAN UMUM.............................................................................................5
2.1. Sejarah Perusahaan....................................................................................................5
2.2. Struktur Organisasi....................................................................................................5
2.3. Tugas dan Fungsi Personal Perusahaan.....................................................................6
2.3.1 Tugas dan Fungsi Chief Technology Officer (CTO)...........................................6
2.3.2 Tugas dan Fungsi Business Development Officer (BDO)...................................6
2.3.2 Tugas dan Fungsi Chief Marketing Officer (CMO)............................................6
2.3.4 Tugas dan Fungsi Chief Financial Officer (CFO)................................................6
2.3.5 Tugas dan Fungsi Software Engineer (SE).........................................................7
2.4. Denah Lokasi Perusahaan..........................................................................................7
BAB III LANDASAN TEORI..............................................................................................8
3.1. Buku...........................................................................................................................8
3.2. Sistem.........................................................................................................................8
3.3. Mobile........................................................................................................................8
3.4. M-Commerce..............................................................................................................8

iv
 3.5. Figma.........................................................................................................................9
3.6. Desain Grafis..............................................................................................................9
3.7. Layout........................................................................................................................9
3.8. Ikon............................................................................................................................9
3.9. UML (Unified Modelling Lenguage).......................................................................10
3.9.1 Use Case...........................................................................................................10
3.9.2 Activity Diagram...............................................................................................11
3.9.3 Class Diagram..................................................................................................11
3.9.4 Sequence diagram.............................................................................................12
BAB IV PELAKSANAAN DAN PEMBAHASAN...........................................................13
4.1. Proses Pelaksanaan...................................................................................................13
4.2. Perancangan Sistem..................................................................................................14
4.2.1 UML (Unified Modeling language)....................................................................14
4.2.2 Desain Antarmuka Sistem...................................................................................24
BAB V PENUTUP..............................................................................................................30
5.1. Kesimpulan...............................................................................................................30
5.2. Saran.........................................................................................................................30
DAFTAR PUSTAKA...........................................................................................................31
LAMPIRAN.........................................................................................................................32

v
 DAFTAR GAMBAR

Gambar 2.1 Sturktur Organisasi CV MEGA Teknologi........................................................6

Gambar 2.2 Denah Lokasi CV. MEGA Teknologi.................................................................7

Gambar 4.1 Use Case Diagram 14

Gambar 4.2 Activity Diagram Login Pengguna..................................................................15
Gambar 4.3Activity Diagram Login Admin.........................................................................15
Gambar 4.4 Actvity Diagram Register.................................................................................16
Gambar 4.5 Activity Diagram Pemesanan..........................................................................16
Gambar 4.6 Activity Diagram Kelola Barang......................................................................17
Gambar 4.7 Activity Diagram Tambah Barang...................................................................17
Gambar 4.8 Squence Diagram Login..................................................................................18
Gambar 4.9 Squence Diagram Register..............................................................................19
Gambar 4.10 Squence Diagram Pemesanan........................................................................19
Gambar 4.11 Squence Diagram Tambah Barang.................................................................20
Gambar 4.12 Class Diagram................................................................................................21
Gambar 4.13 Desain Halaman Login...................................................................................24
Gambar 4.14 Desain Halaman Register...............................................................................24
Gambar 4.15 Desain Halaman Home..................................................................................25
Gambar 4.16 Desain Halaman Produk Populer...................................................................25
Gambar 4.17 Desain Halaman Detail Produk......................................................................26
Gambar 4.18 Desain Halaman Keranjang...........................................................................26
Gambar 4.19 Desain Halaman Chat....................................................................................27
Gambar 4.20 Desain Halaman Dashboard Admin...............................................................27
Gambar 4.21 Desain Halaman Barang................................................................................28
Gambar 4.22 Desain Halaman Tambah Barang...................................................................28
Gambar 4.23 Desain Halaman Chat Pelanggan...................................................................29
Gambar 4.24 Desain Halaman History Transaksi................................................................29

vi
 DAFTAR TABEL

Tabel 3.1 Tabel Simbol Usecase..........................................................................................10

Tabel 3.2 Tabel Simbol Activity Diagram............................................................................11
Tabel 3.3 Tabel simbol Class Diagram................................................................................11
Tabel 3.4 Tabel Simbol Sequence diagram..........................................................................12

Tabel 4.1 Tabel Login 21

Tabel 4.2 Tabel Register.......................................................................................................21
Tabel 4.3 Tabel Admin.........................................................................................................22
Tabel 4.4 Tabel Pemesanan..................................................................................................22
Tabel 4.5 Tabel Barang........................................................................................................22
Tabel 4.6 Tabel Pelanggan...................................................................................................23

vii
 BAB 1 PENDAHULUAN
1.1. Latar Belakang
Tidak dapat dipungkiri lagi teknologi informasi yang semakin berkembang ke
berbagai aspek kehidupan, berpengaruh terhadap gaya hidup manusia zaman sekarang
di mana hampir semua kegiatan dapat dilakukan melalui teknologi khususnya
smartphone, salah satunya perdagangan online berbasis smartphone atau yang dikenal
dengan m-commerce. Tren perdagangan online melalui mobile device yang marak
terjadi tentu menjadi peluang bisnis yang menguntungkan bagi para pelaku bisnis
untuk semakin memperkuat bisnis, mempertahankan pelanggan mereka dengan
memberikan berbagai kemudahan salah satunya yakni dengan menyediakan aplikasi
mobile commerce.
Pembuatan Toko Buku Bisnis awal penjualannya hanya menyediakan pembelian
buku secara offline. yaitu pembeli harus datang ke toko untuk bisa melakukan
pembelian. Hal ini tentu sangat membuang waktu, biaya serta tenaga hanya untuk
pembelian sebuah buku. Sistem penjualan dengan cara ini membutuhkan waktu yang
lama dan dinilai kurang efektif dan efesien, karena hanya mengandalkan sistem
penjualan dengan cara tersebut maka pendapatan perusahaan tidak mengalami
peningkatan yang signifikan dan perkembangan perusahaan terasa dinilai agak lambat.
Berbagai permasalahan juga terjadi ketika seseorang akan berbelanja buku mulai dari
tidak mengetahui buku apa yang mereka inginkan karena keterbatasan informasi
mengenai buku yang dicari serta toko buku yang belum pasti memiliki buku yang
mereka inginkan, yang mengakibatkan calon pembeli harus mengunjungi toko buku
untuk mengetahui informasi mengenai buku yang dicari. Persaingan tentu menjadi
permasalahan tersendiri bagi para pelaku bisnis toko buku. Kemudahan pelanggan,
pelayanan yang baik dan kelengkapan buku adalah beberapa keunggulan yang perlu
dimiliki oleh toko buku untuk dapat bersaing. M-commerce penjualan buku diharapkan
bisa membantu mempermudah pelanggan dalam melakukan transaksi pembelian buku,
selain itu dengan adanya aplikasi M-commerce ini diharapkan dapat memperluas pasar
penjualan buku, memperkenalkan Toko Buku Bisnis dan dapat meningkatkan jumlah
penjualan.
Setiap manusia selalu menginginkan kemudahan, kecepatan dan sistem informasi
yang relevan untuk memudahkan dalam segala aktifitasnya. Begitu juga dalam hal jual
beli, seperti pemesanan dan pembelian buku. Semakin maraknya pengguna smartphone

1
terutama platform android di masyarakat dengan berbagai kelebihannya seharusnya
permasalahan di atas tidak harus terjadi lagi. maka perlu membuat perancangan sistem
informasi penjualan buku online dengan menggunakan design diagram UML (Unified
Modeling Language). UML adalah bahasa standar untuk menggambarkan, merancang,
dan menganalisis sistem perangkat lunak. UML menyediakan notasi grafis
menggambarkan berbagai bagian dari sistem untuk membantu para pengembang
memahami secara menyeluruh tentang sistem yang akan dikembangkan dan
memastikan bahwa kebutuhan bisnis terpenuhi dengan baik.
Berdasarkan latar belakang yang telah dipaparkan, penulis mencoba
mengembangkan sistem informasi yang telah ada dan dari penelitian ini penulis
mengangkat judul “Perancangan Sistem Informasi Penjualan Buku Online Berbasis
Mobile Pada Toko Buku Bisnis’’.
1.2. Rumusan Masalah
Dari latar belakang dapat dirumuskan beberapa permasalahan yaitu :

1. Sistem pembelian yang sudah berjalan masih menggunakan manual

sehingga untuk mencari informasi tetang buku maupun membeli buku
membutuhkan waktu yang lama
2. Bagaimana membuat suatu sistem penjualan buku Online yakni dengan
mengadakan aplikasi yang dapat berjalan di perangkat mobile pada Toko
Buku Bisnis.

1.3 Batasan Masalah

Batasan Masalah Setelah penulis melakukan berbagai rangkaian penelitian, penulis
akan melakukan serangkaian kegiatan yang nantinya akan penulis lakukan dan
diterapkan kedalam bentuk desain media Mobile. Agar dalam penyusunan Laporan
PKL ini dapat terarah dan tidak menyimpang dari tujuan yang hendak dicapai maka
diperlukan Batasan-batasan masalah dalam waktu pembahasannya. Adapun batasan
dalam penulis ini antara lain :

1. Mendesain tampilan antar muka toko buku bisnis berbasis mobile agar terlihat
menarik dan nyaman untuk menarik minat pelanggan
2. Mendesain fitur fitur apa saja yang terkandung di dalam aplikasi mobile mulai
dari Halaman Login, Home, Keranjang, Chat, Dan lain-lain.

2
1.4. Tujuan Laporan
Adapun tujuan kegiatan dari praktek kerja lapangan adalah sebagai berikut:

1. Membangun sistem informasi penjualan online berbasis mobile pada toko buku
bisnis
2. Mempermudah pembeli dalam mencari informasi dan membeli buku

1.5. Manfaat Laporan

Adapun manfaat dalam pembuatan implementasi sistem e-presensi ini diantaranya:

1. Bagi Penulis
- Dapat menjadi tolak ukur dalam menerapkan hasil belajar selama mengikuti
perkuliahan di program studi teknologi komputer ITSNU Pekalongan.
- Hasil program yang telah dibuat dapat menjadi bahan kajian untuk
pengembangan projek kedepan supaya lebih baik lagi.
2. Bagi Toko Buku Bisnis
- Menjadi jawaban dari permasalahan yang selama ini timbul dalam proses
penjualan pada toko.

1.6. Waktu Pelaksanaan

Praktik Kerja Lapangan (PKL) dilaksanakan selama 1 Bulan. Lokasi pelaksanaan
Praktik Kerja Lapangan (PKL) di CV. Mega Teknologi. Dilaksanakan mulai tanggal 16
Januari 2023 dan berakhir pada 15 Maret 2023. Dengan jam kerja sebagai berikut :
Senin – Jumat : 09.00 – 17.00
Sabtu : 09.00 – 13.00
Minggu : Libur
1.7. Sistematika Penulisan Laporan
BAB I PENDAHULUAN
Bab ini mangulas latar belakang, rumusan masalah, batasan masalah, tujuan
laporan, manfaat laporan, waktu pelaksanaan, serta sistematika penulisan
laporan.
BAB II GAMBARAN UMUM PERUSAHAAN
Bab ini mangulas tentang cerminan universal CV. Mega Teknologi.
Membagikan cerminan secara pendek sejarah dari industri, posisi industri,
visi serta misi industri, struktur organisasi industri, dan tugas serta guna
kerja dari personal yang terdapat pada bagian tempat PKL.

3
BAB III LANDASAN TEORI
Bab ini mangulas teori- teori serta konsep bawah pembuatan desain toko
buku bisnis , ataupun postingan buat menunjang ulasan dan mendasari
metode- metode yang digunakan dalam membongkar permasalahan yang
dibahas.

BAB IV PROSES PELAKSANAAN DAN PEMBAHASAN

Pada bab ini menguraikan proses aktivitas yang sudah dicoba pada dikala
PKL serta ulasan dari permasalahan yang diteliti.
BAB V PENUTUP
Pada bab ini membahas tentang kesimpulan yang didapat dari pembahasan
masalah serta saran-saran yang diberikan untuk dijadikan masukan bagi
perusahaan dan bagi pembaca yang akan melakukan penelitian yang serupa.

4
 BAB II GAMBARAN UMUM
2.1. Sejarah Perusahaan
Kami suatu perusahaan yang bergerak dibidang Informasi Teknologi (IT) dan
Business Intelligence Sejak Tahun 2015. Kami perusahaan yang mengembangkan
Sistem Informasi. Layanan Mega Teknologi secara umum meliputi Layanan Jasa
Teknologi Informasi Perancangan Software Sistem Informasi berbasis Web (Web
based Information Systems). Beberapa produk dan layanan kami, meliputi:
Perancangan Sistem Informasi Akademik, Perpustakaan, Kepegawaian, Keuangan,
Pengelolaan Aset, Portal Web/Web Desain, Pengadaan Hardware,
Networking/Jaringan serta Pelatihan / Kursus di bidang Teknologi Informasi. Selain
itu kami juga bergerak dibidang Internet Service Provider menggunakan jaringan
Radio / RT RW Net tetapi hanya di wilayah kota Semarang.

Didukung oleh staf-staf yang menguasai konsep Teknologi Informasi terbaru dan
berpengalaman mengembangkan serta menerapkan Sistem Informasi dan analisa data
dibanyak organisasi, kami sanggup memberikan solusi dalam bidang Teknologi
Informasi dengan menggunakan ide, kreasi dan inovasi-inovasi smart dengan
mengutamakan profesionalisme dan memberikan yang terbaik untuk klien dan mitra
kami dalam menggapai masa depan perusahaan bisa lebih berkembang, efisien dan
efektif sehingga mampu berkompetisi dengan yang lain.

2.2. Struktur Organisasi

Pada CV. Mega Teknologi memiliki struktur organisasi guna mempermudah
pembagian tugas dan tanggung jawabnya masing-masing. Berikut adalah bagan
struktur organisasi CV. Mega Teknologi.

5
 Gambar 2.1 Sturktur Organisasi CV MEGA Teknologi

2.3. Tugas dan Fungsi Personal Perusahaan

2.3.1 Tugas dan Fungsi Chief Technology Officer (CTO)
Tugas utama chief technology officer ialah menetapkan jika teknologi yang
tengah digunakan perusahaan tidak sama dengan perusahaan lain serta
mempraktikkan teknologi terkini yang lebih mutahir. Perihal tersebut dicoba
supaya industri tidak kalah saing dengan industri lain.

2.3.2 Tugas dan Fungsi Business Development Officer (BDO)

Tugas seseorang business development officer yaitu membenarkan gimana
perusahaan bisa tumbuh secara terus menerus baik dari segi bisnis, produk,
hubungan, konsumen sampai kerja sama. Peranan utama dari business
development officer merupakan buat menolong industri meningkatkan bisnis
dengan tingkatkan posisi industri di pasar.

2.3.2 Tugas dan Fungsi Chief Marketing Officer (CMO)

Tugas seseorang chief marketing officer merupakan posisi eksekutif
maupun pimpinan perusahaan yang bertanggung jawab dalam urusan marketing
maupun pemasaran. CMO bertugas guna memastikan tujuan serta pencapaian
marketing serta bertanggung jawab dalam memutuskan strategi semacam apa
yang dilaksanakan serta sesuai buat industri.

2.3.4 Tugas dan Fungsi Chief Financial Officer (CFO)

Tugas seorang chief financial officer merupakan eksekutif senior yang
bertanggung jawab guna mengelola kegiatan keuangan perusahaan. Tugas CFO
6
 tercantum melacak arus kas serta perencanaan keuangan dan menganalisis
kekuatan serta kelemahan keuangan industri serta menganjurkan aksi korektif.

2.3.5 Tugas dan Fungsi Software Engineer (SE)

Tugas seseorang software engineer bertugas melaksanakan analisa,
membuat rekayasa, menyusun spesifikasi, mengimplementasikan serta
memvalidasi sesuatu rancangan sistem fitur lunak buat menanggapi sesuatu kasus.

2.4. Denah Lokasi Perusahaan

CV. Mega Teknologi beroperasi di Kota Semarang lebih tepatnya di Jl. Wolter
Monginsidi No.2, RT.1/RW.1, Banjardowo, Kec. Genuk, Kota Semarang, Jawa
Tengah.

Gambar 2.2 Denah Lokasi CV. MEGA Teknologi

7
 BAB III LANDASAN TEORI
3.1. Buku
Buku adalah sumber ilmu pengetahuan yang tiada batas. Semuanya tentu
memiliki manfaat, tergantung akan kegunaan dari buku itu. Misalnya buku pelajaran
tentu saja digunakan oleh para siswa agar mereka dapat lebih memahami apa yang
diterangkan oleh guru di sekolah. Buku panduan komputer digunakan oleh orang yang
ingin mendalami komputer dan untuk para pemilik komputer (Muh. Saleh Malawat,
2018)

3.2. Sistem
sistem adalah jaringan proses kerja yang saling terkait dan berkumpul guna untuk
mencapai sebuah tujuan serta melakukan suatu kegiatan (Erawati, 2019).

3.3. Mobile
Aplikasi mobile yaitu program siap pakai yang direkap untuk melaksanakan suatu
fungsi bagi pengguna atau aplikasi yang lain dan dapat digunakan oleh sasaran yang
dituju sedangkan mobile dapat di artikan sebagai perpindahan dari suatu tempat
ketempat yang lain. Maka aplikasi mobile dapat di artikan sebuah program aplikasi
yang dapat dijalankan atau digunakan walaupun pengguna berpindah-pindah dari satu
tempat ketempat yang lain serta mempunyai ukuran yang kecil (Ardian, A, 2020)

3.4. M-Commerce
Mobile Commerce Lab (http://mcom.cs.cmu.edu/), sebuah lab riset yang
mengkhususkan pengkajiannya tentang Mobile Commerce (M-Commerce),
memberikan definisi mengenai M-Commerce sebagai sebuah bentuk ekspansi dan
pengembangan dari e-commerce ke ranah mobile, yang mana memiliki proses bisnis,
teknologi-teknologi terbaru, barang dan jasa dapat dilakukan secara mobile. Proses
penjualan dan penawaran barang dan jasa secara mobile. Proses pembayaran transaksi
online pun juga dapat dilakukan secara online melalui internet dan layanan bank,
sehingga meminimalkan penggunaan secara tunai. Bahkan proses pemesanan,
penentuan lokasi dan sebagainya dapat dilakukan didalamnya.

Menurut Corry Jansen, menyatakan bahwa M-Commerce merupakan bentuk

transaksi elektronik transaksi berbasiskan jaringan wireless sebagaimana halnya e-

8
commerce, namun lebih mengkhusus kepada perangkat mobile (smartphone,
handphone, tablets) maupun komputer jinjing (notebook, netbook).

3.5. Figma
Figma adalah salah satu design tool yang biasanya digunakan untuk membuat
tampilan aplikasi mobile, desktop, website dan lain-lain. Figma bisa digunakan di
sistem operasi windows, linux ataupun mac dengan terhubung ke internet. Figma
memiliki keunggulan yaitu untuk pekerjaan yang sama dapat dikerjakan oleh lebih dari
satu orang secara bersama-sama walaupun ditempat yang berbeda. Hal tersebut bisa
dikatakan kerja kelompok dan karena kemampuan aplikasi figma tersebut lah yang
membuat aplikasi ini menjadi pilihan banyak UI/UX designer untuk membuat
prototype website atau aplikasi dengan waktu yang cepat dan efektif. (Al-Faruq, 2022)

3.6. Desain Grafis

Desain Grafis merupakan sebuah materi dalam bidang komputer untuk kategori
computer graphics. Desain Grafis ini memberikan sebuah gambaran dan kemampuan
tentang mengenal dan menyelesaikan proyek berupa Desktop Publishing, Digital
Illustration, Digital Imaging, Web Design, dan Multimedia. Pelatihan desain grafis
juga mampu memotivasi diri dalam menemukankreasi yang layak untuk
dipublikasikan serta memberi inspirasi terhadap kemajuan teknologi yang semakin
pesat (Casofa & Isa, 2022).

3.7. Layout
Desain layout adalah cabang mendasar dari desain grafis yang menyangkut
pengaturan teks dan visual. Layout mengacu pada pengaturan elemen visual dalam
kotak untuk menyampaikan pesan tertentu. Fungsi dan tujuan dari layout adalah untuk
menyajikan berbagai elemen seperti teks dan gambar yang mampu berkomunikasi,
sehingga mempermudah seseorang untuk memahami dan bisa memperoleh informasi
dari elemen tersebut. (Rheny, 2022)

3.8. Ikon
Ikon adalah tampilan suatu objek atau gambar yang merepresentasikan fungsi dari
objek itu sendiri. Dalam hal ini, ikon dibuat untuk mempermudah pengguna dalam
mengakses objek tertentu. Hal ini disebabkan karena adanya bantuan visual yang
membantu pengguna familiar terhadap objek ikon tersebut.(Dharma, 2022)

9
3.9. UML (Unified Modelling Lenguage)
Uml merupakan Bahasa standar yang banyak digunakan di dunia industry untuk
mendefinisikan requirement, membuat analisis dan desain, serta mendeskripsikan
arsitektur dalam pemprogaman berotientasi objek (Sujarwo et al., 2020).

3.9.1 Use Case

merupakan model dari perilaku sistem informasi yang akan dibuat. Use
Case menggambarkan interaksi satu atau lebih aktor dengan sistem informasi
yang muncul

Tabel 3.1 Tabel Simbol Usecase

Gambar Nama Keterangan
orang atau sistem lain yang berinteraksi dengan sistem
Informasi yang akan dibuat di luar sistem informasi
Actor buatan sendiri, meskipun simbol aktornya adalah
gambar seseorang, biasanya diekspresikan dengan kata
benda di awal Frasa judul aktor.
Hubungan di mana perubahan elemen independen
Dependency (independen) memengaruhi elemen yang bergantung
pada elemen yang tidak independent.
Hubungan generalisasi dan spesialisasi (generalization)
Generalization antara kedua Use Case di mana suatu fungsi mencakup
beberapa fungsi
Hubungan Use Case tambahan ke Use Case di mana
Use Case yang ditambahkan membutuhkan
Include
penggunaan ini untuk dapat berjalan atau sebagai syarat
untuk eksekusi Use Case ini.
Hubungan Use Case tambahan ke Use Case di mana
Extend Use Case yang ditambahkan juga bisa berdiri sendiri
tanpa Use Case lain.
Komunikasi antara aktor dan kasus usecase yang
berpartisipasi Use Case atau Use Case memiliki
Association
interaksi dengan aktor.

10
Gambar Nama Keterangan

System
Menspesifikasikan paket yang menampilkan paket
yang terbatas.

Use Case Fungsi yang disediakan sistem sebagai unit pertukaran

pesan antar entitas atau aktor.

3.9.2 Activity Diagram

Menggambarkan alur kerja atau pengoperasian sistem, proses bisnis, atau
menu perangkat lunak

Tabel 3.2 Tabel Simbol Activity Diagram

Gambar Nama Keterangan

Memperlihatkan bagaimana masing masing kelas
Activity
antarmuka saling berentraksi satu sama lain
State dari sistem yang mencerminkan eksekusi dari
Action
suatu aksi
Bagaimana objek dibentuk atau diawali
Initial Node

Activity Final Bagaimana objek dibentuk dan diakhiri

Node
Digunakan untuk menggambarkan suatu keputusan /
Decision
tindakan yang harus diambil pada kondisi tertentu
Digunakan untuk menyambungkan satu simbol dengan
Line Conektor
simbol lainya

3.9.3 Class Diagram

Menggambarkan struktur sistem mendefinisikan kelas-kelas yang dibuat
untuk membangun sistem. Kelas memiliki atribut dan operasi atau metode

11
 Tabel 3.3 Tabel simbol Class Diagram

GAMBAR NAMA KETERANGAN

Hubungan dimana objek anak (descendent)

Generalization berbagi perilaku dan struktur data dari objek

yang ada di atasnya objek induk (ancestor).
Upaya untuk menghindari asosiasi
Nary Association dengan lebih dari 2 objek.

Himpunan dari objek-objek yang berbagi

Class atribut serta operasi yang sama.

Deskripsi dari urutan aksi-aksi yang

ditampilkan sistem yang menghasilkan suatu
Collaboration
hasil yang terukur bagi suatu actor

Operasi yang benar-benar dilakukan oleh suatu

Realization objek.

Hubungan dimana perubahan yang terjadi pada

suatu elemen mandiri (independent) akan
Dependency mempegaruhi elemen yang bergantung
padanya elemen yang tidak mandiri

Apa yang menghubungkan antara

Association objek satu dengan objek lainnya

3.9.4 Sequence diagram

Mendeskripsikan perilaku objek dalam kasus penggunaan dengan
mendeskripsikan masa pakai objek dan pesan yang dikirim dan diterima antar
objek.
Tabel 3.4 Tabel Simbol Sequence diagram

Gambar Nama Keterangan

Actor Simbol aktor adalah gambar seseorang, tetapi aktor
belum tentu orang, biasanya diungkapkan dengan kata

12
 benda yang dimulai dengan frase judul aktor.

Object Lifeline Menyatakan objek yang berinteraksi dengan pesan.

Massage Menyatakan arah tujuan antara object lifeline.

Massage/return Menyatakan arah kembali dalam satu object lifeline.

Massage/return Menyatakan arah tujuan antara object lifeline.

Menyatakan suatu objek dalam mode aktif dan
Activation
interaktif.

BAB IV PELAKSANAAN DAN PEMBAHASAN

4.1. Proses Pelaksanaan
PKL Tersebut dilaksanakan selama kurun waktu 4 minggu dari tanggal 16 Januari
sampai dengan 15 Februari 2023 dengan mengambil tempat di CV. Media Global
Teknologi yang beralamatkan di Kota Semarang Jl. Wolter Monginsidi No.2
Rt.1/Rw.1 Banjardowo, Kec. Genuk, Kota Semarang Jawa Tengah. Waktu
pelaksanaan Praktek Kerja Lapangan dilaksanakan pada hari senin sampai jum’at,
dimulai dari pukul 09.00 sampai 16.00 WIB.

Adapun pelaksanaan kegiatan PKL yang dilakukan selama empat minggu, sebagai
berikut:

1. Input (Pengenalan)
Hari pertama PKL di CV. MEGA Teknologi Semarang, diawali dengan
perkenalan kepada pimpinan, Pembimbing lapangan dan Tim Developer.
Dilaksanakan juga tes membuat Portofolio untuk semua mahasiswa PKL
diamana tes tersebut untuk mengetes sejauh mana kita sudah mengetahui tentang
Bahasa pemprogaman. Pada minggu pertama ini, mempelajari dasar-dasar
pemprogaman dan pembagian job desk oleh Pembimbing lapangan, serta
pembagia job desk pembuatan Aplikasi Buku Bisnis.
2. Proses (kegiatan selama PKL)
Pada proses pembuatan program, dilaksanakan pada minggu kedua. Pada
minggu ini dilakukan proses perancangan sistem aplikasi Buku Bisnis.

13
 Kemudian minggu ketiga dan keempat pembuatan Back End atau perkodingan
menggunakan Android Studio. aplikasi penggajian memiliki beberapa menu
yang diantaranya: Login, Register, Home Keranjang, Chat, Profil, Log Out.
3. Output (Penyelesaian)
Proses penyelesaian ini dilaksanakan pada pekan terakhir . kegiatan pada
tahap akhir ini yaitu penyempurnaan sistem informasi beserta pengecekan
mengenai sistem informasi tersebut. Dan dilanjutkan penyerahan hasil final
dari program aplikasi Buku Bisnis kepada pihak CV. MEGA Teknologi.

4.2. Perancangan Sistem

4.2.1 UML (Unified Modeling language)
Perancangan sistem ini menggunakan alat bantu UML (Unified Modeling
Language). Terdapat beberapa diagram yang akan menggambarkan sistem pada
halaman admin, diagram tersebut diantaranya use case diagram, activity diagram,
dan sequence diagram serta desain antarmuka system

4.2.1.1 Use Case Diagram

Use Case diagram menggambarkan bagaimana cara kerja dari
sistem. Berikut gambar dari use case :

Gambar 4.1 Use Case Diagram

Pada gambar 4.1 Use Case Diagram terdapat dua actor yaitu admin
dan pelanggan. Actor admin dapat melakukan hak akses yaitu :

14
melakukan login, mengolah barang, menambah barang, melihat history
transaksi. Sedangkan actor pelanggan dapat mengakses melakukan login,
register dan melakukan pemesanan.

4.2.1.2 Activity Diagram

Activity ini menjelaskan tentang aliran program yang sedang dibuat :

15
1. Activity Diagram login Pengguna

Gambar 4.2 Activity Diagram Login Pengguna

Gambar 4.2 merupakan activity login, dimulai dengan

mengakses sistem dan ditampilkan form login. Setelah itu
memasukkan username dan password maka akan divalidasi oleh
sistem, jika benar makan akan masuk ke halaman Home.

2. Activity Diagram Login Admin

Gambar 4.3Activity Diagram Login Admin

Gambar 4.3 merupakan activity login, dimulai dengan

mengakses sistem dan ditampilkan form login. Setelah itu
memasukkan username dan password maka akan divalidasi oleh

16
sistem, jika benar maka akan masuk ke halaman dashboard
admin.
3. Activity Diagram Register

Gambar 4.4 Actvity Diagram Register

Pada gambar 4.4 merupakan activity diagram register.

Dimulai dengan mengeklik menu register pada menu login
kemudian sistem akan menampilkan formulir register, setelah itu
user mengisi formulir tersebut kemudian memvalidasi nya, jika
valid maka sistem akan menampilkan pesan berhasil register.

4. Activity Diagram Pemesanan

Gambar 4.5 Activity Diagram Pemesanan

Pada gambar 4.5 merupakan activity Diagram pemesanan,

menggambarkan pelanggan dalam mengeklik buku lalu sistem

17
menampilkan detail dari buku tersebut, kemudian mengeklik
tombol beli lalu sistem akan mengarahkan ke chat Admin.
5. Activity Diagram Kelola Barang

Gambar 4.6 Activity Diagram Kelola Barang

Pada gambar 4.6 merupakan activity diagram kelola barang,

setelah admin melakukan pengelolaan barang , lalu admin bisa
tambah, edit dan hapus data yang terdapat pada menu kelola
barang.
6. Activity Diagram Tambah Barang

Gambar 4.7 Activity Diagram Tambah Barang

Pada gambar 4.7 menjelaskan activity diagram tambah

barang, yang mana admin mengeklik menu tambah barang,

18
 kemudian sistem akan menampilkan halaman tambah barang.
Setelah itu isi semua form yang ada pada halaman tambah barang
kemudian klik simpan dan sistem akan memproses inputan
barang.

4.2.1.3 Squence Diagram

Squence Diagram adalah sebuah diagram yang digunakan untuk
menjelaskan dan menampilkan interaksi antar objek-objek dalam sebuah
sistem secara terperinci.

1. Squence Diagram Login

Gambar 4.8 Squence Diagram Login

Pada gambar squence diagram diatas, maka User harus

melakukan login terlebih dahulu, jika gagal sistem akan
mengirimkan pesan “eror gagal login” dan jika berhasil sistem
akan megarahkan pada dashboard.

19
3. Squence Diagram Register

Gambar 4.9 Squence Diagram Register

Pada gambar squence diagram diatas, maka User harus

melakukan Register account terlebih dahulu, jika gagal sistem
akan mengirimkan pesan “eror gagal register” dan jika berhasil
sistem akan megarahkan pada halaman login.
4. Squence Diagram Pemesanan

Gambar 4.10 Squence Diagram Pemesanan

20
 Pada gambar squence diagram sebelumnya pelanggan
melakukan pemesanan, pertama pelanggan harus memilih
produk, kemudian klik tombol beli dan akan di arahkan oleh
sistem ke chat admin untuk konfirmasi pembelian.

5. Squence Diagram Tambah Barang

Gambar 4.11 Squence Diagram Tambah Barang

Pada gambar squence diagram diatas Admin melakukan

tambah barang, kemudian sistem akan menampilkan halaman
tambah barang. Setelah itu isi semua form yang ada pada halaman
tambah barang kemudian klik simpan untuk menyimpan barang
yang di tambahkan pada database jika gagal sistem akan
mengirimkan pesan “eror gagal upload” dan jika berhasil sistem
akan megarahkan pada halaman barang.

21
4.2.1.4 Class Diagram

Gambar 4.12 Class Diagram

Gambar 4.12 Merupakan gambar class diagram yang menjelaskan
visualisasi dari struktur program pada perancangan yang di bentuk.
4.2.1.5. Struktur Tabel
Tabel 4.1 Tabel Login

No Field Name Type Field Size Keterangan

1. Email Varchar 50 Email
2. Username Varchar 10 Username
3. Password Varchar 20 Password

Pada tabel 4.1 merupakan tabel login yang ada pada perancangan
sistem penjualan buku online berbasis mobile. Tabel login ini terdiri dari
Email, Username, Password.

Tabel 4.2 Tabel Register

No Field Name Type Field Size Keterangan
1. Username Varchar 10 Username
2. Email Varchar 50 Email
3. Password Varchar 20 Password

4. Konfirmasi Password Varchar 20 Konfirmasi Password

22
 Pada tabel 4.2 merupakan tabel register yang ada pada perancangan
sistem penjualan buku online berbasis mobile. Tabel login ini terdiri dari
Email, Username, Password, Konfirmasi Password.

Tabel 4.3 Tabel Admin

No Field Name Type Field Size Keterangan
1. Id_Admin int 5 Id_Admin
2. Username Varchar 10 Username
3. Email Varchar 50 Email
4. Password Varchar 20 Password

Pada tabel 4.3 merupakan tabel admin yang ada pada perancangan
sistem penjualan buku online berbasis mobile. Tabel login ini terdiri dari
Id_Admin, Username, Email, Password.

Tabel 4.4 Tabel Pemesanan

No Field Name Type Field Size Keterangan
1. Id_Pesanan int 5 Id_Pesanan
2. No_transaksi Varchar 10 No_transaksi
3. Tanggal Date - Tanggal
4. Nama Varchar 50 Nama
5. Id_Barang Varchar 10 Id_Barang
6. Judul_Buku Varchar 100 Judul_Buku
7. Jenis_Buku Varchar 15 Jenis_Buku
8. Harga int 20 Harga
9. Total Varchar 30 Total

Pada tabel 4.4 merupakan tabel admin yang ada pada perancangan
sistem penjualan buku online berbasis mobile. Tabel login ini terdiri dari
Id_Pesanan, No_Transaksi, Tanggal, Nama, Id_Barang, Judul_Buku,
Jenis_Buku, Harga, Total.

Tabel 4.5 Tabel Barang

No Field Name Type Field Size Keterangan
1. Id_Buku int 5 Id_Buku
2. Judul_Buku Varchar 100 Judul_Buku

23
 3. Penulis Varchar 20 Penulis
4. Penerbit Varchar 50 Penerbit
5. ISBN Varchar 20 ISBN
6. Jenis_Buku Varchar 15 Jenis_Buku
7. Ukuran Varchar 10 Ukuran
8. Halaman Varchar 5 Halaman
9. Harga_Jual int 20 Harga_Jual
10. Deskripsi Varchar 200 Deskripsi

Pada tabel 4.5 merupakan tabel Barang yang ada pada perancangan
sistem penjualan buku online berbasis mobile. Tabel login ini terdiri dari
Id_Buku, Judul_Buku, Penulis, Penerbit, ISBN, Jenis_Buku, Ukuran,
Halaman, Harga_Jual, Deskripsi.

Tabel 4.6 Tabel Pelanggan

No Field Name Type Field Size Keterangan

1. Id_Pelanggan int 5 Id_Buku
2. Username Varchar 10 Judul_Buku
3. Email Varchar 20 Penulis
4. Password Varchar 20 Penerbit

Pada tabel 4.6 merupakan tabel admin yang ada pada perancangan
sistem penjualan buku online berbasis mobile. Tabel login ini terdiri dari
Id_Pelanggan, Username, Email, Password.

24
4.2.2 Desain Antarmuka Sistem
1. Desain Halaman Login

Gambar 4.13 Desain Halaman Login

Halaman login digunakan admin dan pengguna untuk bisa akses

masuk ke aplikasi. Halaman ini berisi form username/email, form
password, button login serta button register.
2. Desain Halaman Register

Gambar 4.14 Desain Halaman Register

Desain halaman regiser digunakan untuk menambah akun baru

Pelanggan. Halaman ini berisi form username, email, password dan
konfirmasi password.

25
3. Desain Halaman Home

Gambar 4.15 Desain Halaman Home

Desain halaman home merupakan halaman utama untuk

pelanggan setelah melakukan login pada aplikasi buku bisnis.
Halaman ini berisi search, produk populer, tombol menu keranjang
dan tombol menu chat.
4. Desain Halaman Produk Populer

Gambar 4.16 Desain Halaman Produk Populer

Desain halaman produk populer merupakan halaman yang
menampilkan produk populer yang ada pada toko buku bisnis.
Halaman ini berisi buku-buku yang populer saat ini, tombol kembali,
tombol keranjang, search, menu filter dan tombol detail produk.

26
5. Desain Halaman Detail Produk

Gambar 4.17 Desain Halaman Detail Produk

Desain halaman detail produk merupakan halaman yang
mendeskripsikan sebuah produk. Halaman ini berisi tombol kembali,
search, keranjang, detail buku, tombol chat dan tombol beli.
6. Desain Halaman Keranjang

Gambar 4.18 Desain Halaman Keranjang

Desain halaman keranjang merupakan halaman untuk menyimpan

barang yang mau di beli oleh pelanggan pada aplikasi buku bisnis.
Halaman ini berisi barang yang mau dibeli, tombol tambah dan
kurang jumlah barang yang di beli total harga, tombol beli, tombol
menu home dan tombol menu chat.

27
7. Desain Halaman Chat

Gambar 4.19 Desain Halaman Chat

Desain halaman chat merupakan halaman untuk komunikasi dari

pelanggan ke admin . Halaman ini berisi from pesan, tombol menu
home dan tombol menu keranjang.
8. Desain Halaman Dasboard Admin

Gambar 4.20 Desain Halaman Dashboard Admin

Desain halaman dashboard admin merupakan halaman utama

untuk admin setelah login pada aplikasi buku bisnis. Halaman ini
berisi tombol barang, tombol tambah barang, tombol chat pelanggan,
tombol history transaksi dan tombol log out.

28
9. Desain Halaman Barang

Gambar 4.21 Desain Halaman Barang

Desain halaman barang merupakan halaman yang menampilkan

barang apa saja yang ada pada aplikasi buku bisnis. Halaman ini
berisi tombol kembali, tombol edit barang, tombol hapus barang dan
tambah barang.
10. Desain Halaman Tambah Barang

Gambar 4.22 Desain Halaman Tambah Barang

Desain halaman tambah barang merupakan halaman untuk admin

menambah barang pada toko buku bisnis. Halaman ini berisi form
judul, form penulis, form penerbit, form ISBN, form halaman, form
ukuran, form deskripsi, upload foto dan tombol simpan.

29
11. Desain Halaman Chat Pelanggan

Gambar 4.23 Desain Halaman Chat Pelanggan

Desain halaman chat pelanggan merupakan halaman chat untuk

admin melakukan konfirmasi pembelian kepada pelanggan. Halaman
ini berisi tombol kembali dan history chat masuk dari pelanggan.
12. Desain Halaman History Transaksi

Gambar 4.24 Desain Halaman History Transaksi

Desain halaman history transaksi merupakan halaman utama

untuk admin melihat history transaksi yang ada pada aplikasi buku
bisnis. Halaman ini berisi tampilan history transaksi.

30
 BAB V PENUTUP
5.1. Kesimpulan
Berdasarkan dari perancangan yang telah dibuat, maka dapat ditarik kesimpulan
sebagai berikut :

1. Dengan adanya Sistem Penjualan Buku pada Toko Buku Bisnis Berbasis
Mobile guna mempermudah konsumen untuk membeli buku yang ada
tanpa harus datang ke toko dan mengurangi antrian pelanggan yang
sering terjadi di kasir.
2. Aplikasi ini dapat dimanfaatkan pembeli sebagai media untuk
mendapatkan informasi buku dan sebagai media promosi Toko Buku
Bisnis untuk membantu mengenalkan produk yang dijual sehingga
berdampak pada peningkatkan penjualan

5.2. Saran
Beberapa saran yang dapat penulis sampaikan untuk dapat mengembangkan mobile
commere ini lebih lanjut, antara lain :

1. Diharapkan untuk kedepannya tampilannya di buat lebih menarik lagi.

2. Diharapkan untuk kedepannya di tambahkan biaya pengiriman dan juga
opsi pembayaran.
2.

31
 DAFTAR PUSTAKA

Muh. Saleh Malawat, dkk. 2018. E-Commerce Penjualan Menggunakan

MetodeCustomer Relationship Management (CRM)

Erawati, W. (2019). Perancangan Sistem Informasi Penjualan Dengan Pendekatan

Metode Waterfall. Jurnal Media Informatika Budidarma, 3(1), 1.
https://doi.org/10.30865/mib.v3i1.987

Ardian, A., & Fernando, Y. (2020). Sistem Imformasi Manajemen Lelang Kendaraan
Berbasis Mobile (Studi Kasus Mandiri Tunas Finance). Jurnal Teknologi Dan
Sistem Informasi, 1(2), 10-16.

Eka, I Putu Agus. 2019. E-commerce, E-business dan Mobile Commerce. Bandung:
Informatika.

Al-Faruq, M. N. M., Nur’aini, S., & Aufan, M. H. (2022). Perancangan UI/UX

Semarang Virtual Tourism Dengan Figma. Walisongo Journal of Information
Technology, 4(1), 43-52.Casofa, F., & Isa, A. (2022). Gerbang Kreativitas:
Jagat Desain Grafis. Bumi Aksara.

Rheny, S. (2022). Layout adalah: Pengertian, 5 elemen desain layout, manfaat, dan
prinsip pembuatannya. 16 Desember. https://www.ekrut.com/media/layout-
adalah

Dharma, R. (2022). Icon Adalah Simbol dari Suatu Fungsi, Sudah Tahukah Kamu? 23
Februari. https://accurate.id/teknologi/icon-adalah/

Sujarwo, A., Sari, A. M., Lestari, R., & Yani, D. (2020). Sistem Informasi Pengajuan
Klaim Asuransi Kendaraan Berbasis Web Menggunakan UML. Jurnal Sistem
Komputer Dan Informatika (JSON), 1(3), 294.
https://doi.org/10.30865/json.v1i3.2197

32
LAMPIRAN

33
34