PERANCANGAN WEB DESAIN PAKAIAN INSTAN PADA

PINUSJAYA PRINTING MENGGUNAKAN METODE

WATERFALL

LAPORAN KERJA PRAKTEK

Oleh:
NIM NAMA

1. 191011401776 AHMAD ZULKAISI BEKTIANTO

2. 191011401770 MUKHAMMAD SYAFI’I

3. 191011401756 RIAN RIYONO

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK UNIVERSITAS PAMULANG

2021/2022
 ABSTRAK

NIM : 191011401776
Nama : Ahmad Zulkaisi Bektianto
NIM : 191011401770
Nama : Mukhammad Syafi’i
NIM : 191011401756
Nama : Rian Riyono
Judul : PERANCANGAN WEB DESAIN PAKAIAN INSTAN PADA
PINUSJAYA PRINTING MENGGUNAKAN METODE
WATERFALL

Mata kuliah Kerja Praktek merupakan salah satu mata kuliah wajib bagi
Seluruh Mahasiswa Fakultas Teknik Universitas Pamulang. Kegiatan Kerja
Praktek ini bertujuan untuk mengenal ruang lingkup pekerjaan di lapangan serta
memberikan pengalaman praktek kerja kepada mahasiswa agar lebih mudah
beradaptasi dengan lingkungan kerja ketika lulus dari dunia perkuliahan. Kegiatan
ini dilaksanakan selama dua bulan mulai pukul 09.00 sampai dengan pukul 15.00
WIB, di Percetakan Pinusjaya Printing yang beralamat di Jl. Lavender blok R5
no.6 gn. Sindur, Bogor.
Selama pelaksanaan kegiatan kerja praktek ini, penulis mendapatkan tugas
untuk membuat sebuah Apliaksi berbasis website yang nantinya digunakan untuk
mempermudah mengiklankan produk yang ditawarkan oleh Pinusjaya Printing.
Berdasarkan hal-hal yang dilakukan selama pelaksanaan kerja praktek, penulis
dapat mengetahui tugas dan wewenang di lokasi kerja praktek, tentang cara
bersikap dan berperilaku dengan baik ditempat kerja agar tercipta rasa saling
menghargai satu sama lain. Yang terpenting kerja praktik memberikan
pengalaman dan mengenal dunia pekerjaan yang sesungguhnya.

i
 KATA PENGANTAR

Puji syukur kehadirat Tuhan Yang Maha Esa, berkat dan rahmat yang
diberikan sehingga laporan kegiatan kerja praktek yang berjudul
“PERANCANGAN WEB DESAIN PAKAIAN INSTAN PADA PINUSJAYA
PRINTING” dapat diselesaikan.
Penulis mengucapkan terimakasih kepada PINUSJAYA PRINTING yang
telah memberikan kesempatan kepada penulis untuk menambah pengetahuan juga
wawasan baru kepada penulis. Laporan ini juga akan digunakan sebagai
pemenuhan mata kuliah Kerja Praktek (KP) pada Universitas Pamulang.
Dalam penulisan laporan akhir Kerja Praktek ini penulis menyampaikan
ucapan terima kasih kepada pihak-pihak yang membantu dalam menyelesaikan
laporan ini, khususnya kepada :

1. Allah SWT, atas segala Petunjuk dan Kemudahan-Nya sehingga pada

akhirnya penulis dapat menyelesaikan penyusunan Laporan Kerja
Praktek ini dengan baik.

2. Ayah dan ibu serta adik tercinta, serta keluarga besar atas do’a, kasih
sayang, semangat, dan dukungan yang telah diberikan selama ini.

3. Bapak Dr. (Hc). H. Darsono selaku Ketua Yayasan Sasmita Jaya.

4. Bapak Dr. E. Nurzaman, M.si selaku Rektor Universitas Pamulang.

5. Bapak Achmad Udin Zailani, S. Kom., M. Kom selaku Ketua Program

Studi Teknik Informatika, Fakultas Teknologi Informasi Universitas
Pamulang.

6. Ibu Thoyyibah T. S.Kom., M. Kom selaku Dosen Pembimbing yang

telah banyak membantu dalam penyusunan Laporan Kerja Praktik ini.

7. Bapak Didik Suryanto selaku Pimpinan Pinusjaya Printing yang telah

memberi kesempatan dan kepercayaan untuk melakukan Kerja Praktek di
Percetakan tersebut.

ii
 8. Rekan kelompok Kerja Praktik yang sudah banyak membantu, memberi
support, dan sekaligus penyemangat dalam penyusunan Laporan Kerja
Praktik dari awal hingga akhir.

Penulis menyadari penyusunan Laporan Kerja Praktik ini masih terdapat

kekurangan. Penulis mohon maaf apabila banyak terdapat kekurangan dan
keterbatasan. Oleh karena itu, kritik dan saran sangat penulis harapkan demi
perbaikan di masa yang akan datang. Semoga laporan ini dapat menjadi acuan bagi
rekan-rekan mahasiswa khususnya di Universitas Pamulang.

Pamulang, 04 Juni 2022

Penulis

KELOMPOK 6

iii
 DAFTAR ISI

COVER
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK
UNIVERSITAS PAMULANG ................................................................................1
ABSTRAK ............................................................................................................... i
KATA PENGANTAR ............................................................................................ ii
DAFTAR ISI ............................................................................................................v
DAFTAR GAMBAR ........................................................................................... viii
DAFTAR TABEL ....................................................................................................x
DAFTAR LAMPIRAN .......................................................................................... xi
DAFTAR SIMBOL ............................................................................................... xii
BAB I PENDAHULUAN ........................................................................................1
1.1. Latar Belakang ........................................................................................1
1.2. Identifikasi Masalah ................................................................................1
1.3. Tujuan Penulisan .....................................................................................2
1.4. Batasan Permasalahan ............................................................................2
1.5. Metode Penelitian ....................................................................................3
1.6. Sistematika Penulisan .............................................................................4
BAB II ORGANISASI.............................................................................................5
2.1. Sejarah singkat Instansi ..........................................................................5
2.2. Struktur Organisasi ................................................................................5
2.3. Logo Instansi ............................................................................................5
2.4. Visi dan Misi Instansi ..............................................................................6
2.5. Kebijakan Manajemen Instansi .............................................................6
2.6. Kegiatan Umum Instansi ........................................................................6
BAB III PEMBAHASAN ........................................................................................8
3.1. Landasan Teori ........................................................................................8
3.1.1. Konsep Dasar Web...........................................................................8
3.1.2. Pengertian Desain ............................................................................8
3.1.3. Pengertian Konsumen......................................................................8

v
 3.1.4. Pengertian Instan .............................................................................8
3.1.5. Pengertian Sablon ............................................................................8
3.1.6. Pengertian Bordir.............................................................................9
3.1.7. UML ..................................................................................................9
3.1.8. XAMPP .............................................................................................9
3.1.9. ERD .................................................................................................10
3.1.10. Flowchart.........................................................................................10
3.1.11. Database ..........................................................................................10
3.2. Konsep dan Aplikasi Perangkat Lunak ..............................................10
3.3. Alat dan Teknik .....................................................................................11
3.4. Perangkat Lunak Pendukung ..............................................................12
3.5. Metode penelitian dan Perancangan sistem ........................................13
3.6. Jenis dan model pengembangan perangkat lunak .............................14
3.7. Prosedur Penelitian ...............................................................................14
3.8. Analisa sistem berjalan (Use Case Diagram) ......................................16
3.9. Perancangan Sistem (Use Case, Activity dan Sequence Diagram) .....17
3.10. Perancangan Database dan Relasi Tabel ........................................25
3.10.1. Tabel Pembeli .................................................................................25
3.10.2. Tabel Barang ..................................................................................26
3.10.3. Tabel Transaksi ..............................................................................26
3.10.4. Tabel Bayar ....................................................................................27
3.10.5. Tabel Kurir .....................................................................................27
3.10.6. Relasi Tabel ....................................................................................28
3.11. Perancangan Menu ............................................................................28
3.12. Perancangan Flowchart ....................................................................32
3.13. Source Code Program .......................................................................34
3.14. Metode Pengujian dan Rencana Pengujian ....................................36
3.14.1. Metode Pengujian ..........................................................................36
3.14.2. Rencana Pengujian ........................................................................37
3.15. Hasil Pengujian ..................................................................................37
3.15.1. Pembahasan ....................................................................................37

vi
 3.15.2. Pengujian Black-Box Testing ........................................................38
3.15.3. Kesimpulan Hasil Pengujian .........................................................42
3.16. Tampilan Desain Aplikasi (Prototype) ............................................43
3.16.1. Prototype Tampilan Figma ...........................................................43
3.16.2. Prototype Tampilan Aplikasi Web ...............................................47
BAB IV PENUTUP ..............................................................................................55
4.1. Kesimpulan ............................................................................................55
4.2. Saran .......................................................................................................55
DAFTAR PUSTAKA ............................................................................................57
LAMPIRAN ...........................................................................................................58

vii
 DAFTAR GAMBAR

Gambar 1. Struktur Organisasi ...............................................................................5

Gambar 2. Logo Instansi ........................................................................................6
Gambar 3. Prototype Model .................................................................................15
Gambar 4. Analisa Sistem Berjalan (Use-Case Diagram) ...................................17
Gambar 5. Perancangan Sistem (Use-Case Diagram) ..........................................18
Gambar 6. Perancangan Sistem (Activity Diagram) ............................................19
Gambar 7. Sequence Diagram Login Admin dan User ........................................20
Gambar 8. Sequence Diagram Register User .......................................................21
Gambar 9. Logout User ........................................................................................22
Gambar 10. Input data produk ..............................................................................23
Gambar 11. Update data .......................................................................................24
Gambar 12. Delete data ........................................................................................25
Gambar 13. Relasi Tabel ......................................................................................28
Gambar 14. Halaman Login .................................................................................29
Gambar 15. Halaman Register .............................................................................30
Gambar 16. Halaman Home .................................................................................31
Gambar 17. Halaman Transaksi ...........................................................................31
Gambar 18. Flowchart Pemesanan Produk...........................................................32
Gambar 19. Flowchart Pembayaran .....................................................................33
Gambar 20. Mock-up Login .................................................................................43
Gambar 21. Mock-up Register .............................................................................44
Gambar 22. Mock-up Sweater ..............................................................................45
Gambar 23. Mock-Up kaos ..................................................................................45
Gambar 24. Mock-up tas ......................................................................................46
Gambar 25. Mock-up scan QR .............................................................................46
Gambar 26. Mock-up transaksi berhasil ...............................................................47
Gambar 27. Form Login Web ..............................................................................48
Gambar 28. Form dashboard ................................................................................48
Gambar 29. dashboard User .................................................................................49
Gambar 30. Menu Edit Desain Pakaian................................................................49
Gambar 31. Menu data pelanggan ........................................................................50
Gambar 32. Transaksi ...........................................................................................50
Gambar 33. Menu data pelanggan ........................................................................51
Gambar 34. Menu data supplier ...........................................................................51
Gambar 35. Kategori produk ................................................................................51
Gambar 36. Pembelian Produk .............................................................................52
Gambar 37. Retur .................................................................................................52

viii
Gambar 38. Akun pengguna .................................................................................53
Gambar 39. Menu Laporan...................................................................................53
Gambar 40. Transaksi berhasil .............................................................................54
Gambar 41. Alert Logout .....................................................................................54
Gambar 42. Anggota Kelompok 6 KP Bersama dengan Bapak Didik Suryanto .58
Gambar 43. Kegiatan KP di Pinusjaya Printing ...................................................59

ix
 DAFTAR TABEL

Tabel 1. Alat dan spesifikasi yang digunakan .......................................................12

Tabel 2. Perangkat Lunak Pendukung ...................................................................13
Tabel 3. Perancangan DB dan Tabel Pembeli .......................................................25
Tabel 4. Perancangan DB dan Tabel Barang ........................................................26
Tabel 5. Perancangan DB dan Tabel transaksi ......................................................26
Tabel 6. Perancangan DB dan Tabel bayar ..........................................................27
Tabel 7. Perancangan DB dan Tabel kurir ............................................................27
Tabel 8. Source Code Login Aplikasi ...................................................................35
Tabel 9. Pengujian Halaman Login .......................................................................39
Tabel 10. Pengujian Halaman Daftar akun............................................................39
Tabel 11. Pengujian Halaman Home .....................................................................40
Tabel 12. Pengujian Form Pembayaran.................................................................41
Tabel 13. Pengujian Form Registrasi ....................................................................41
Tabel 14. Pengujian Form Stok .............................................................................42

x
 DAFTAR LAMPIRAN

Lampiran 1. Foto Kegiatan kerja praktek bersama Pimpinan Instansi ................58

Lampiran 2. Lembar Persetujuan KP ...................................................................60
Lampiran 3. Surat Pengesahan Laporan KP .........................................................61
Lampiran 4. Lembar Pengesahan selesai KP .......................................................62
Lampiran 5. Lembar penilaian Mahasiswa 1 .......................................................63
Lampiran 6. Lembar penilaian Mahasiswa 2 .......................................................64
Lampiran 7. Lembar penilaian Mahasiswa 3 .......................................................65
Lampiran 8. Lembar berita acara konsultasi dengan dosen KP ..........................66
Lampiran 9. Lembar berita acara konsultasi dengan Supervisor KP ...................67
Lampiran 10. Surat Permohonan Magang Mahasiswa 1......................................68
Lampiran 11. Surat Permohonan Magang Mahasiswa 2......................................69
Lampiran 12. Surat Permohonan Magang Mahasiswa 3......................................70
Lampiran 13. Surat Persetujuan Kerja Praktek dari Instansi................................71
Lampiran 14. Surat IA ..........................................................................................72
Lampiran 15. Log Harian Mahasiswa 1 ...............................................................73
Lampiran 16. Log Harian Mahasiswa 2 ...............................................................74
Lampiran 17. Log Harian Mahasiswa 3 ...............................................................75
Lampiran 18. Listing Program .............................................................................76

xi
 DAFTAR SIMBOL

A. Simbol ERD (Entity Relationship Diagram)

B. Simbol Activity Diagram

xii
C. Simbol Use Case Diagram

xiii
D. Simbol Flowchart

xiv
E. Simbol Sequence Diagram

xv
 1

BAB I
PENDAHULUAN

1.1. Latar Belakang

Instant Clothing Design ini merupakan sebuah web (Apriyanto. 2020)

dimana para konsumen akan diberikan sebuah sarana untuk membuat desain
sebuah pakaian dan totebag (Carolina, I. 2019) dimana mereka akan bebas
berkreasi dengan ide serta imajinasi untuk menghasilkan sebuah barang
sesuai dengan yang mereka inginkan. Setelah menuangkan ide pada kanvas
yang kami berikan, konsumen juga dapat langsung untuk membuat pesanan
sesuai dengan desain yang telah dibuat didalam website (Habibie, D.R. 2020)
lengkap dengan pilihan size, bahan, maupun warna dasar yang dipilih.
Dalam kehidupan sehari hari banyak orang yang memiliki ide dan
pemikiran yang berbeda beda dan terbilang unik, begitupun dalam hal web
desain. Web Desain adalah Perancangan produk atau benda yang akan dibuat
pada website (Irawan, A. 2021). Desain dapat berupa sketsa gambar atau
model. Desain digunakan untuk merancang banyak hal mulai dari pakaian,
karya seni, dll. Hal yang mendasari perancangan dan pembuatan web atau
aplikasi (Junidar, A. 2021) ini karena banyak orang yang memiliki ide tentang
desain terutama dalam bidang konveksi atau pakaian tetapi tidak memiliki
wadah untuk menuangkan ide dari pemikiran tersebut untuk langsung
dijadikan sebuah produk, oleh karena itu alasan utama kami memilih judul
tersebut karena ingin membuat sebuah sarana untuk membantu membuat
sebuah sarana atau platform agar mempermudah pengimplementasian ide
(Rizal. 2018) tersebut menjadi sebuah barang atau produk yang mereka
inginkan pada Percetakan Pinusjaya Printing.

1.2. Identifikasi Masalah

1) Bagaimana web/aplikasi/platform ini dapat membantu konsumen dalam

pengimplementasian ide mereka ?
 2

2) Apakah dengan hadir nya web ini memberikan dampak yang signifikan
pada perusahaan tersebut ?
3) Bagaimana mempromosikan percetakan di daerah yang belum terjangkau?
4) Bagaimana membuat website yang berisi jenis-jenis barang sehingga
pelanggan tidak harus datang ke tempat percetakan secara langsung?

1.3. Tujuan Penulisan

Berdasarkan latar belakang diatas, maka tujuan dalam penelitian dapat

diuraikan sebagai berikut :

1. Mampu membangun sebuah web atau aplikasi dimana nantinya akan

membantu konsumen dalam menyalurkan ide mereka menjadi sebuah
produk yang diinginkan.
2. Mampu menghubungkan PERCETAKAN PINUSJAYA PRINTING
terhadap konsumen dimana terjadi interaksi secara tidak langsung
(online) yang akan membantu meningkatkan penjualan.

1.4. Batasan Permasalahan

Berdasarkan Latar belakang dan Rumusan Masalah dapat di identifikasi

bahwa dalam pembuatan web tersebut berfokus pada bagaimana kami
menghubungkan ide yang dimiliki oleh konsumen terhadap jasa yang
ditawarkan PERCETAKAN PINUSJAYA PRINTING, sehingga penelitian ini
dibatasi terhadap bagaimana kami bisa membantu para konsumen untuk
mengimplementasikan ide menjadi sebuah produk dalam website (Sagala, G.
2019) tersebut dan bagaimana kami bisa membantu PERCETAKAN
PINUSJAYA PRINTING untuk meningkatkan kualitas pelayanan kepada
konsumen.
Pemilihan masalah pada penelitian ini dilakukan dengan beberapa
pertimbangan yaitu, pengembangan dan peningkatan kualitas layanan Website
(Saputra, E. P. 2019) dari PERCETAKAN PINUSJAYA PRINTING dapat
ditingkatkan sehingga dapat berinteraksi secara langsung dengan pemikiran
 3

atau ide yang dimiliki oleh konsumen.

1.5. Metode Penelitian

Dalam metode penelitian ini menggunakan metode Prototyping untuk

membuat aplikasi berbasis Web (Siahaan, M. Y. 2020), dengan Model yang
merupakan salah satumetode penelitian rekayasa perangkat lunak yang banyak
dan umum digunakan, karena pada metode prototyping ini si pengembang
(development) dan si pengguna (customer) dapat saling berinteraksi selama
proses pembuatan suatu sistem.
Ada juga metode Penelitian lain yang digunakan dalam penyusunan
Laporan Kerja Praktek ini, diantaranya :

a. Wawancara
Wawancara dilakukan untuk mengetahui masalah yang timbul atau
dialami langsung oleh setiap subjek yang bersangkutan. Dalam
kegiatan ini diajukan pertanyaan lisan dalam usaha untuk melengkapi
data-data yang akan diperoleh. Wawancara dilakukan kepada bagian-
bagian yang terkait dalam sistem perancangan Aplikasi berbasis
Website Desain Pakaian (Yuliani, Y. 2021).
b. Observasi
Penulis melakukan observasi yaitu dengan melihat secara langsung
cara kerja bagian-bagian yang terkait dengan pencatatan hasil-hasil
kegiatan yang dilakukan, setelah itu penulis diberikan kesempatan
untuk melihatnya.
c. Studi Pustaka
Dalam penulisan ini tidak terlepas dari data-data yang terdapat dari
berbagai buku dan artikel yang menjadi referensi seperti pedoman
penulisan laporan Kerja Praktek, berbagai macam tutorial pembuatan
aplikasi berbasis web dan referensi-referensi lainnya yang berkaitan
dengan penyusunan laporan dan sebagai landasan teori untuk
menyelesaikan masalah yang dihadapi.
 4

1.6. Sistematika Penulisan

Sistematika penulisan dibuat untuk mempermudah dalam penyusunan

Laporan Kerja Praktek ini maka perlu ditentukan sistematika penulisan yang
baik. Sistematika penulisannya adalah sebagai berikut :
BAB I PENDAHULUAN
Bab pendahuluan mendeskripsikan mengenai latar belakang
masalah, identifikasi masalah, batasan masalah, tujuan penelitian,
metode penelitian dan sistematika penulisan.
BAB II ORGANISASI
Berisi tentang Instansi tempat KP, Sejarah, Struktur organisasi, visi
dan misi, kebijakan manajemen, serta kegiatan umum Instansi.
BAB III PEMBAHASAN
Membahas kegiatan yang dilaksanakan selama Kerja Praktek (KP).
BAB IV PENUTUP
Berisi tentang kesimpulan dan saran dari seluruh penelitian yang
telah dilakukan.
 5

BAB II
ORGANISASI

2.1. Sejarah singkat Instansi

Pinusjaya Printing adalah usaha di bidang percetakan. Percetakan

Pinusjaya Printing didirikan oleh Bapak Didik Suryanto pada tahun 1996.
Lokasi awal percetakan beralamat di BSD Jalan Pinus Raya Blok D7 No 35
Sektor II Tangerang Selatan. Lalu, pada tahun 2013 percetakan tersebut
pindah lokasi di Jl. Lavender blok R5 no.6 gn. Sindur, Bogor sampai saat ini.

2.2. Struktur Organisasi

Pemilik Percetakan

Bagian Gudang Bagian Percetakan

dan pemasaran

Gambar 1. Struktur Organisasi

2.3. Logo Instansi

 6

Gambar 2. Logo Instansi

2.4. Visi dan Misi Instansi

Berikut adalah visi dan misi yang dimiliki Percetakan Pinusjaya Printing,
antara lain :

a. Visi
Menjadi Percetakan yang mengutamakan kualitas hasil dan pelayanan.

b. Misi
1. Terus berinovasi melakukan pengembangan kualitas produk secara
maksimal demi pelayanan terbaik.
2. Menciptakan kondisi kerja yang aman, nyaman, disiplin dan
bertanggung jawab dalam bekerja.
3. Berusaha meningkatkan sarana dan prasaran sesuai perkembangan
teknologi.

2.5. Kebijakan Manajemen Instansi

1. Jam kerja dari pukul 09.00 WIB sampai dengan pukul 17.00 WIB dari
hari Senin sampai Jumat, jam kerja dari pukul 07.30 WIB sampai
dengan pukul 15.00 WIB pada hari Sabtu.
2. Mengenakan pakaian bebas (sopan), disarankan kemeja.
3. Fasilitas karyawan dipenuhi sesuai kebutuhan.
4. Karyawan harus jujur dan bertanggung jawab, serta memberikan
pelayanan terbaik untuk pelanggan yang datang ke percetakan.

2.6. Kegiatan Umum Instansi

Pinusjaya Printing memiliki beberapa kegiatan yang umum dilakukan
pada setiap harinya, diantaranya adalah cetak undangan, cetak foto, banner
dan kartu nama. Namun masih banyak lagi kegiatan yang dilakukan
 7

dipercetakan dan pada dasarnya kegiatan umum yang dilakukan oleh

Pinusjaya Printing yaitu menghasilkan barang yang didapatkan dari proses
desain dan printing.
Pada Pinusjaya Printing hal yang harus diutamakan yaitu pelayanan
terhadap pelanggan, karyawanya dituntut untuk berlaku sopan, ramah,
senyum dan sabar ketika sedang melayani pemesanan pelanggan atau pun
komplain pelanggan.
 8

BAB III
PEMBAHASAN

3.1. Landasan Teori

3.1.1. Konsep Dasar Web

Konsep dasar web merupakan suatu aplikasi yang mampu

membantu seseorang dalam mengolah data. Perkembangan aplikasi
web semakin banyak di gunakan dalam bidang pendidikan, ekonomi,
telekomunikasi maupun asuransi.

3.1.2. Pengertian Desain

Desain adalah ide kreatif untuk merancang dan merencanakan

sesuatu yang umumnya fungsional agar memiliki nilai lebih dan
menjadi lebih berguna bagi penggunanya.

3.1.3. Pengertian Konsumen

Konsumen yaitu seseorang atau aktor pelaku usaha yang

membeli atau menggunakan barang atau jasa tertentu.

3.1.4. Pengertian Instan

Instan merupakan suatu hal yang mempermudah seseorang

untuk melakukan sesuatu yang mereka inginkan.

3.1.5. Pengertian Sablon

Sablon adalah sebuah Teknik memindahkan Sebuah gambar

atau desain digital ke media cetak seperti kaos, jaket, sweater hoodie,
celana, dan lain lain.
 9

3.1.6. Pengertian Bordir

Sablon adalah kegiatan mencetak objek dalam bentuk gambar atau

tulisan yang dilakukan dengan menggunakan screen atau template di
permukaan yang datar dengan media apa saja. media yang biasanya
digunakan dalam sablon ini bisa media yang memiliki daya serap
tinggi seperti kain, daya serap menengah seperti spanduk dan daya
serap minimal seperti plastik.

3.1.7. UML

UML (Unified Modelling Language) adalah suatu metode dalam

pemodelan secara visual yang digunakan sebagai sarana perancangan
sistem berorientasi objek.
UML diharapkan mampu mempermudah pengembangan piranti
lunak (RPL) serta memenuhi semua kebutuhan pengguna dengan
efektif, lengkap, dan tepat. Hal itu termasuk faktor-faktor scalability,
robustness, security, dan sebagainya.

3.1.8. XAMPP

XAMPP adalah software atau aplikasi komputer yang banyak

digunakan dalam dunia web developer yang juga bisa dipelajari untuk
membuat website. XAMPP adalah perangkat lunak berbasis web
server yang bersifat open source (bebas) serta mendukung di berbagai
sistem operasi seperti OS Linux, OS Windows, Mac OS, dan juga
Solaris.
XAMPP adalah singkatan dari X (cross platform), A (Apache), M
(MySQL/MariaDB), P (PHP), dan P (Perl) yang adalah program-
 10

program yang tersedia di software ini.

3.1.9. ERD

ERD (Entity Relationship Diagram) atau diagram hubungan entitas

adalah sebuah diagram yang digunakan untuk perancangan suatu
database dan menunjukan relasi atau hubungan antar objek atau entitas
beserta atribut-atributnya secara detail. Dengan menggunakan ERD,
sistem database yang sedang dibentuk dapat digambarkan dengan
lebih terstruktur dan terlihat rapi.

3.1.10. Flowchart

Flowchart atau bagan alur adalah diagram yang menampilkan

langkah-langkah dan keputusan untuk melakukan sebuah proses dari
suatu program. Setiap langkah digambarkan dalam bentuk diagram
dan dihubungkan dengan garis atau arah panah.

3.1.11. Database

Database atau basis data adalah kumpulan data yang dikelola

sedemikian rupa berdasarkan ketentuan tertentu yang saling
berhubungan sehingga mudah dalam pengelolaannya. Melalui
pengelolaan tersebut pengguna dapat memperoleh kemudahan dalam
mencari informasi, menyimpan informasi dan membuang informasi.

3.2.Konsep dan Aplikasi Perangkat Lunak

Konsep pada perancangan ini bertujuan agar mempermudah konsumen

dalam membuat desain pakaian yang mereka inginkan. Clothing Design
 11

merupakan sebuah konsep yang digunakan untuk merancang suatu

busana/pakaian.

Penyusunan Tugas Laporan KP ini berkaitan dengan pembuatan suatu

website untuk membantu masyarakat khususnya anak muda untuk membuat
kreasi kaos sablon. Maka dari itu dibuat Web perancangan Desain Pakaian
Instan pada Percetakan Pinusjaya Printing, yang konsepnya dimulai dari
membuat rancangan web, berupa model baju atau kaos, lalu kemudian icon –
icon dan Tools – tools yang digunakan untuk mengganti atau merubah size
ataupun warna Baju dan kaos yang akan dibeli oleh customer. Lalu kemudian
membuat analisa sistem, perancangan sistem, perancangan database dan relasi
tabel serta membuat rancangan menu yang tentunya akan memudahkan untuk
pembuatan design pada Percetakan Pinusjaya Printing.

3.3. Alat dan Teknik

Berikut adalah alat & teknik yang digunakan untuk perancangan web design:

Jenis Perangkat/Alat Jumlah Keterangan

Untuk kebutuhan
Development Web
Design, dengan
spesifikasi minimal
intel Core i5 gen 7
Laptop 1
atau sejenis, RAM 4
Hardware GB, SSD 250 GB,
dan Operating
System Windows
10.
1 Untuk mencetak
Printer
Desain Baju/Kaos
Modem 1 Untuk Jaringan
 12

Internet
Web Design Figma
- Chrome :
100.0.4896.127 (64-
Browser bit)
- Firefox : 99.0.1
(64-bit)
- WAMP/XAMPP
dengan konfigurasi :
Software Apache/2.4.39
Web Server (Win64) PHP/7.3.5
MariaDB 10.3.14
MySQL 5.7.26
- phpMyAdmin
- VSCode Version
1.66.0 (64-bit)
Text Editor
- NetBeans IDE
Version 8.2 (64-bit)
Tabel 1. Alat dan spesifikasi yang digunakan

3.4. Perangkat Lunak Pendukung

Berikut adalah Perangkat lunak pendukung yang digunakan untuk

perancangan Aplikasi Desain Pakaian Instan Berbasis Web :

Aplikasi Keterangan
MySQL Untuk mengakses Database
Adobe Illustrator CS6 Untuk Editing Desain Grafis
Visual Studio Code Untuk Text Editor
XAMPP Untuk Webserver Testing
 13

Figma Untuk Web Design (Membuat

Prototype)
Tabel 2. Perangkat Lunak Pendukung

3.5. Metode penelitian dan Perancangan sistem

Metode merupakan kegiatan ilmiah yang berkaitan dengan cara kerja

(sistematis) untuk memahami suatu subjek atau objek penelitian. Adapun
pengertian penelitian adalah suatu proses pengumpulan dan analisis data yang
dilakukan secara sistematis untuk mencapai tujuan tertentu. Dari kedua
pengertian di atas, dapat disimpulkan bahwa metode penelitian adalah suatu
cara untuk memcahkan masalah ataupun cara mengembangkan ilmu
pengetahuan dengan menggunakan metode ilmiah.

Metode Penelitian yang digunakan di dalam laporan ini adalah Prototyping

Model. Prototyping model merupakan salah satu metode penelitian rekayasa
perangkat lunak yang banyak dan umum digunakan, karena pada metode
prototyping ini si pengembang (development) dan si pengguna (customer)
dapat saling berinteraksi selama proses pembuatan suatu sistem. Jadi sistem
akan dikembangkan lebih cepat pada model suatu sistem atau bagiannya
dengan adanya diskusi yang berulang dengan si pengguna dan
mengembangkan model tersebut menjadi sistem final.

Secara sederhananya pihak pengembang akan melakukan identifikasi

kebutuhan si pengguna, menganalisa sistem dan melakukan studi kelayakan
serta studi terhadap kebutuhan si penguna, meliputi model interface, teknik
prosedural dan teknologi yang akan dimanfaatkan.

Implementasi dalam penelitian Web Design pada Pinusjaya Printing ini

adalah dengan melakukan perancangan sistem dengan menggunakan UML
(Unified Modelling Language), serta membuat program aplikasi berbasis web
dengan menggunakan bahasa pemrograman PHP serta database server
 14

MySQL yang akan digunakan sebagai backend storage dari aplikasi Web
Desain Pakaian Instan.

3.6. Jenis dan model pengembangan perangkat lunak

Model pengembangan perangkat lunak yang akan digunakan adalah

menggunakan Metode Waterfall dan juga Metode Prototype. Metode
Waterfall merupakan metode pengembangan perangkat lunak yang berurutan
dan sistematis. Metode ini memiliki lima tahapan proses, di antaranya
Communication (komunikasi), Planning (perencanaan), Modeling
(permodelan), Construction (pembangunan), dan Deployment (penyebaran).

Metode waterfall mempunyai kelebihan yakni, melibatkan berbagai proses

yang sistematis dan komprehensif. Sumber daya dan tahapan pengerjaannya
dikumpulkan secara lengkap sehingga dapat mencapai hasil maksimal.

Metode prototype adalah metode yang menggunakan pendekatan untuk

membuat program dengan cepat dan bertahap sehingga dapat dievaluasi oleh
pengguna. Perubahan yang dilakukan oleh pengembang dikerjakan sesuai
dengan permintaan pengguna.

3.7. Prosedur Penelitian

Metode Prototype menurut Pressman (2002:40), dimulai dengan

mengumpulkan kebutuhan. Pengembang dan klien bertemu guna
mendefinisikan obyektif keseluruhan dari perangkat lunak,
mengidentifikasikan segala kebutuhan dari segi input dan format output
serta gambaran interface, kemudian dilakukan perancangan cepat. Dari hasil
perancangan cepat tersebut nantinya akan dilakukan pengujian dan evaluasi.
Penjelasan lengkap pada metode prototype akan dijelaskan melalui gambar
berikut ini.
 15

Gambar 3. Prototype Model

Pada gambar di atas terdapat tiga siklus yang akan dijelaskan sebagai
berikut :

a. Listen to Customer (Mendengarkan Pelanggan)

Pada tahap ini merupakan identifikasi kebutuhan user, proses

ini dilakukan agar penulis dapat memperoleh informasi mengenai
permasalahan yang terjadi oleh klien. Data yang diperoleh dari
permasalahan tersebut yang nantinya menjadi acuan untuk
dilakukan proses pencarian solusi dan pengembangan pada tahap
selanjutnya.

b. Build and Revise Mock-up (Membangun dan Memperbaiki

Prototype)

Setelah kebutuhan sistem terkumpul, maka akan dilakukan

proses perancangan prototype pada sistem yang diusulkan oleh
user, yang mana tahap-tahapannya sebagai berikut :
− Perancangan proses-proses yang akan terjadi di dalam sistem,
seperti, input (masukan), output (keluaran) dari sistem yang telah
diusulkan.
 16

− Perancangan UML (Unified Modelling Language), hal ini

dilakukan untuk menspesifikasikan sistem tentang apa yang
diperlukan dan bagaimana sistem tersebut direalisasikan.
Perancangan UML yang digunakan pada sistem ini meliputi:
Use-Case Diagram dan Activity Diagram.
− Perancangan Interface (antarmuka) dan fitur yang dibutuhkan
oleh klien (User).

c. Customer Test Drives Mock-up (Pengujian Prototype)

Pada tahap ini akan dilakukan pengujian terhadap prototype

sistem yang telah dibuat, serta mengevaluasi apakah prototype
sistem yang sudah dibuat sudah sesuai dengan yang diharapkan.
Apabila dari hasil pengujian prototype tersebut belum memenuhi
kebutuhan klien (user), maka pengembang akan melakukan proses
perbaikan ulang prototype sampai prototype tersebut menjadi
sistem yang final dan benar-benar diterima atau sesuai dengan
keinginan user. Proses pengujian prototype sistem nantinya
menggunakan teknik pengujian black box. Hasil dari pengujian
black box tersebut akan dibahas pada pembahasan selanjutnya di
Bab III ini mengenai hasil pengujian.

3.8. Analisa sistem berjalan (Use Case Diagram)

Use-case diagram merupakan graphical dari beberapa atau semua actor,

use-case, dan interaksi diantara komponen-komponen tersebut yang
memperkenalkan suatu sistem yang akan dibangun. Use-case diagram
menjelaskan manfaat suatu sistem jika dilihat menurut pandangan orang yang
berada di luar sistem. Diagram ini menunjukkan fungsionalitas suatu sistem
atau kelas dan bagaimana sistem tersebut berinteraksi dengan dunia luar.
 17

Use-case diagram yang digunakan untuk menggambarkan proses

pemesanan dan pembelian produk pakaian yang dilakukan oleh konsumen
pada Web Desain Pakaian Instan dapat dilihat pada Gambar berikut :

Gambar 4. Analisa Sistem Berjalan (Use-Case Diagram)

3.9. Perancangan Sistem (Use Case, Activity dan Sequence Diagram)

A. Use Case Diagram :

 18

Gambar 5. Perancangan Sistem (Use-Case Diagram)

B. Activity Diagram :
 19

Gambar 6. Perancangan Sistem (Activity Diagram)

 20

C. Sequence Diagram :

1. Form Login (Admin dan Customer) :

Sequence diagram login menjelaskan aktivitas alur aktor ketika
melakukan login. Admin dan User dapat melakukan login dengan
mengisi data berupa email dan password. Data yang telah di isikan
akan diperoses oleh sistem, jika data salah maka sistem akan kembali
ke halaman login. Sequence diagram login dapat dilihat pada gambar
dibawah ini:

Gambar 7. Sequence Diagram Login Admin dan User

 21

2. Form Registrasi (Customer/User) :

Sequence diagram register user menjelaskan alur user saat hendak
melakukan pendaftaran akun. Sequence diagram register dapat dilihat
pada gambar dibawah ini:

Gambar 8. Sequence Diagram Register User

3. Form Logout User :

Sequence diagram logout user menjelaskan alur aktor untuk
melakukan logout akun. Sequence diagram logout user dapat dilihat
pada gambar dibawah ini:
 22

Gambar 9. Logout User

4. Input data Produk :

Sequence diagram input data produk menjelaskan alur aktor untuk
menginput data Produk. Sequence diagram input data Produk dapat
dilihat pada gambar dibawah ini:
 23

Gambar 10. Input data produk

5. Input data Pembelian Produk :

Sequence diagram input data Pembelian Produk menjelaskan alur
aktor untuk melakukan penginputan data dalam pembelian Produk.
Sequence diagram input data pembelian Produk dapat dilihat pada
gambar dibawah ini:
 24

Gambar 11. Update data

6. Hapus data penerimaan barang/produk :

Sequence diagram hapus data penerimaan produk menjelaskan alur
actor untuk melakukan hapus data penerimaan barang produk.
Sequence diagram hapus data penerimaan produk dapat dilihat pada
gambar dibawah ini:
 25

Gambar 12. Delete data

3.10. Perancangan Database dan Relasi Tabel

3.10.1. Tabel Pembeli

Nama Tabel : pembeli

Primary key : id_pembeli

Fungsi : Menyimpan data pembeli

No Nama Field Tipe Data Panjang Keterangan

1 id_pembeli Int 20 id pembeli
2 nm_pembeli Varchar 20 nama pembeli
3 alamat Varchar 50 alamat pembeli
4 provinsi Varchar 20 provinsi pembeli
5 kota Varchar 20 kota asal pembeli
6 kecamatan Varchar 20 kecamatan pembeli
7 kode_pos Varchar 20 kode pos pembeli
8 no_telp Varchar 20 nomer telpon pembeli
Tabel 3. Perancangan DB dan Tabel Pembeli
 26

3.10.2. Tabel Barang

Nama Tabel : barang

Primary key : id_barang

Fungsi : Menyimpan data barang

No Nama Field Tipe Data Panjang Keterangan

1 id_barang Int 20
2 nm_barang Varchar 30
3 size Varchar 20
4 warna Varchar 20
Tabel 4. Perancangan DB dan Tabel Barang

3.10.3. Tabel Transaksi

Nama Tabel : transaksi

Primary key : kd_pesan

Fungsi : Menyimpan data transaksi

No Nama Field Tipe Data Panjang Keterangan

1 kd_pesan Int 20
2 id_pembeli Int 20
3 id_barang Int 20
4 kuantitas Varchar 30
5 harga Varchar 30
6 ongkir Int 30
7 total_bayar Varchar 30
8 opsi_bayar Int 30
9 no_resi Int 30
Tabel 5. Perancangan DB dan Tabel transaksi
 27

3.10.4. Tabel Bayar

Nama Tabel : bayar

Primary key : opsi_bayar

Fungsi : Menyimpan data pembayaran

No Nama Field Tipe Data Panjang Keterangan

1 opsi_bayar Int 30
Tabel 6. Perancangan DB dan Tabel bayar

3.10.5. Tabel Kurir

Nama Tabel : kurir

Primary key : id_kurir

Fungsi : Menyimpan data kurir

No Nama Field Tipe Data Panjang Keterangan

1 id_kurir Int 20
2 nm_kurir Varchar 30
3 no_telp Varchar 30
4 no_resi Int 30
5 kd_pesan Int 20
6 ongkir Int 30
Tabel 7. Perancangan DB dan Tabel kurir
 28

3.10.6. Relasi Tabel

Gambar 13. Relasi Tabel

3.11. Perancangan Menu

Berikut ini adalah menu aplikasi Desain Pakaian Instan berbasis
website.

a. Desain halaman Login

Halaman login berguna agar user dan admin dapat mengakses
ke dashboard pemesanan. Pada halaman login, user dan admin harus
mengisi username dan password yang sebelumnya telah di daftarkan.
Desain login dapat dilihat pada gambar berikut ini :
 29

MENU LOGIN

LOGIN

Username

Password
Login
sign-up

Gambar 14. Halaman Login

b. Desain Halaman Register

Halaman Register merupakan halaman untuk para pengguna
mendaftar sebelum melakukan login. Desain register dapat dilihat pada
gambar berikut ini :
 30

MENU REGISTRASI

PENDAFTARAN

Nama

Username

E-mail

No Hp

Alamat

Password Konfirmasi Password

Daftar

Gambar 15. Halaman Register

c. Desain Halaman Pemesanan (Home)

Halaman Home merupakan halaman tampilan utama pada
website, halaman ini akan menampilkan Kategori Produk yang dapat di
pesan dan di desain sendiri oleh Customer (Pelanggan). Desain halaman
home dapat di lihat pada gambar dibawah ini :
 31

MENU PEMESANAN (HOME)

Kategori Produk Kategori Produk

(Sweater, Kaos, dan Tas)
(Sweater, Kaos, dan Tas) berupa Button Text
berupa gambar

Button Colors

Pilihan Pembayaran
Spesifikasi

Button Create Your Keranjang Ukuran (Size)

Own Pembelian

Gambar 16. Halaman Home

d. Desain Halaman Pilihan Pembayaran (Transaksi)

Halaman Transaksi merupakan halaman yang akan
menampilkan pilihan metode pembayaran serta Scan QR Qode. Desain
halaman Transaksi dapat dilihat pada gambar dibawah ini :

MENU TRANSAKSI PEMBELIAN

Scan QR Code

Qty Price

e-wallet

Gambar 17. Halaman Transaksi

 32

3.12. Perancangan Flowchart

a. Flowchart Pemesanan Produk

Gambar 18. Flowchart Pemesanan Produk

Flowchart pemesanan produk diatas menjelaskan alur ketika

pelanggan melakukan pemesanan produk yang dimulai dengan
memilih produk, validasi produk, dan upload desain yang akan
dicetak. Ketika pesanan berhasil dilakukan, pesanan akan masuk ke
keranjang dan pelanggan bisa lanjut belanja atau menyelesaikan
pesanan.
 33

b. Flowchart Pembayaran

Gambar 19. Flowchart Pembayaran

Flowchart pembayaran diatas menjelaskan alur ketika pelanggan

melakukan pembayaran yang dimulai dengan memasukkan alamat
rumah dan memilih kurir pengiriman yang tersedia, jika kurir
pengiriman tersedia pelanggan akan diarahkan untuk memilih metode
pembayaran manual atau menggunakan e-wallet pada halaman
invoice. Setelah itu pelanggan harus melakukan pembayaran dan
pesanan akan diproses ketika admin telah melakukan konfirmasi
pembayaran. Jika pesanan sudah selesai dicetak, pelanggan
mendapatkan resi dari admin.
 34

3.13. Source Code Program

Form Login
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Percetakan Pinusjaya Printing</title>

<!-- Bootstrap core CSS-->

<link href="<?php echo base_url().'assets/css/bootstrap.min.css'?>"
rel="stylesheet">

<!-- Custom fonts for this template-->

<link href="<?php echo base_url().'assets/css/all.min.css'?>"
rel="stylesheet" type="text/css">

<!-- Custom styles for this template-->

<link href="<?php echo base_url().'assets/css/sb-admin.css'?>"
rel="stylesheet">

</head>

<body class="bg-dark">
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container">

<div class="page-content container">

<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="box">
<div class="content-wrap">
<center>
<img width="200px" alt="logo" title="Pinusjaya Printing"
 35

src="<?php echo base_url().'assets/img/logo pinusjaya.png'?>"/>

</center>
<p><?php echo $this->session->flashdata('msg');?></p>
<hr/>
<form action="<?php echo base_url().'administrator/cekuser'?>"
method="post" >
<div class="form-group">
<div class="form-label-group">
<input type="text" id="username" name="username" class="form-
control" required="required" autofocus="autofocus">
<label for="username">Username</label>
</div>
</div>
<div class="form-group">
<div class="form-label-group">
<input type="password" id="password" name="password"
class="form-control" required="required" autofocus="autofocus">
<label for="inputPassword">Password</label>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">
Remember Password
</label>
</div>
</div>
<button class="btn btn-success btn-block" type="submit">Login
</button>
<br>
</form>
</div>
</div>
</div>
<p class="login-box-msg">IP Kamu : <?php echo $ipaddres; ?></p>

<!-- Bootstrap core JavaScript-->

<script src="<?php echo
base_url().'assets/jquerys/jquery.min.js'?>"></script>
<script src="<?php echo
base_url().'assets/js/bootstrap.bundle.min.js'?>"></script>
<!-- Core plugin JavaScript-->
<script src="<?php echo base_url().'assets/jquery-
easing/jquery.easing.min.js'?>"></script>

</body>

</html>
Tabel 8. Source Code Login Aplikasi
 36

3.14. Metode Pengujian dan Rencana Pengujian

3.14.1. Metode Pengujian

Metode Pengujian yang digunakan untuk merancang
Aplikasi Web Desain Pakaian Instan ini adalah Black Box.
Pengujian black box dilakukan untuk menguji apakah sistem yang
dikembangkan sesuai dengan apa yang tertuang dalam spesifikasi
fungsional sistem. Black box juga digunakan untuk menguji fungsi-
fungsi yang ada pada sistem yang dibangun.
Black Box Testing atau yang sering dikenal dengan sebutan
pengujian fungsional merupakan metode pengujian Perangkat
Lunak yang digunakan untuk menguji perangkat lunak tanpa
mengetahui struktur internal kode atau Program.
Black Box Testing dapat menemukan error seperti :
1. Fungsi atau logika yang tidak benar;
2. Error interface;
3. Error performance;
4. Kesalahan dalam struktur data atau akses database eksternal.

Kelebihan Black Box Testing :

1. Tidak perlu melihat source code secara detail;
2. Mendeteksi kesalahan pengetikan / typo;
3. Mendeteksi kesalahan design / user interface dari sebuah
software /website;
4. Menampilkan asumsi yang tidak sesuai dengan kenyataan,
untuk dianalisa dan diperbaiki.
Kekurangan Black Box Testing :
1. Ketergantungan dengan dokumen dan design software tersebut;
2. Tidak sampai level code, sehingga tester tidak mengetahui level
security dari software tersebut.
 37

3.14.2. Rencana Pengujian

Rencana pengujian adalah konsep pengujian terhadap fungsi-

fungsi yang ada di dalam aplikasi yang dibangun, apakah
fungsional dari aplikasi berfungsi sesuai yang diharapkan atau
tidak. Rencana pengujian yang dilakukan pada aplikasi ini yakni
Pengujian Fungsionalitas.

Pengujian yang dilakukan terhadap fungsionalitas perangkat

lunak ini menggunakan metode Black Box. Pengujian ini
merupakan pengujian yang berfokus pada persyaratan fungsional
perangkat lunak. Tujuan dari pengujian dengan metode Black
Box ini adalah untuk menemukan kesalahan fungsi pada
perangkat lunak yang telah dibangun. Selain itu, pengujian ini
dilakukan dengan mencoba semua kemungkinan yang terjadi dan
dilakukan berulang- ulang. Jika dalam pengujian ditemukan
kesalahan, maka akan dilakukan penelusuran dan perbaikan untuk
memperbaiki kesalahan yang terjadi.

3.15. Hasil Pengujian

3.15.1. Pembahasan
Sistem pemesanan Desain Produk pada Pinusjaya Printing
masih menggunakan cara manual, dimana pelanggan harus datang
ke Percetakan Pinusjaya Printing untuk melakukan pemesanan dan
Desain Produk.
Kelemahan yang timbul karena penerapan sistem
pemesanan yang masih menggunakan cara manual tersebut adalah
terletak pada metode pembayarannya, dimana Customer
diharuskan melakukan pembayaran secara cash, sehingga sangat
berpengaruh dan berkaitan dengan kinerja, efektivitas dan efisiensi
kerja, serta biaya yang dikeluarkan untuk kebutuhan pada Instansi
 38

tersebut (Percetakan Pinusjaya Printing). Salah satu langkah yang

tepat yaitu dengan merancang dan membangun sistem Aplikasi
Desain Pakaian Instan terkomputerisasi berbasis Website untuk
diterapkan pada Pinusjaya Printing.

3.15.2. Pengujian Black-Box Testing

Pengujian black-box testing dilakukan dengan mengecek

fungsionalitas dan output dari aplikasi yang dibuat. Yaitu pengujian
terhadap halaman yang mempunyai akun (input) dan keluaran
(output) untuk mengetahui apakah suatu fungsi ketika terjadi proses
lalu lintas data sudah sesuai dengan yang diharapkan atau tidak.
Berikut Hasil Pengujian menggunakan metode Black-Box Testing :
1. Hasil pengujian Halaman Login

Hasil Hasil Yang

Butir Uji Cara Uji Kesimpulan
Diharapkan Ada

Input username
dan password
Dapat masuk Sesuai Ok
sesuai dengan
tabel

Tidak
Input
dapat Sesuai Ok
Login username saja
masuk

Tidak
Input
dapat Sesuai Ok
password saja
masuk

Tanpa
Tidak
memasukan
dapat Sesuai Ok
username dan
masuk
password
 39

Input
username
benar Tidak
password dapat Sesuai Ok
salah, masuk
begitu
sebaliknya
Input
Tidak
username dan
dapat Sesuai Ok
password
masuk
salah
Tabel 9. Pengujian Halaman Login

2. Hasil Pengujian Halaman Registrasi Akun (Bagi User baru)

Hasil Hasil Yang Kesimpula

Butir Uji Cara Uji
Diharapkan Ada n

Memasukan Nama,
Username, Email, No
Dapat
Hp, Alamat,
mendaftar Sesuai Ok
Password dan
Akun
Konfirmasi Password
sesuai dengan tabel
Pendaftaran
Akun Input dengan
hanya memasukan Tidak
salah satu dari dapat
data tabel masuk / Sesuai Ok
(Misalkan mendaftar
username dan akun
Email saja)
Tabel 10. Pengujian Halaman Daftar akun
 40

3. Hasil pengujian Halaman Home (Menu data Desain Produk

untuk user)

Hasil Hasil Yang

Butir Uji Cara Uji Kesimpulan
Diharapkan Ada
Menampilkan
Halaman data
Klik menu data
Produk berupa Sesuai Ok
Produk
Sweater, Tas,
Atau Kaos
Menu Dapat
Data Klik button
menampilkan Sesuai Ok
Produk Colors
Form warna
Desain Klik icon e-
Menampilkan
wallet (button Sesuai Ok
(Sweater, detail pembayaran
bayar)
Kaos, Memasukan Daftar
Tas) Klik button cart pesanan ke Sesuai Ok
keranjang
Mengedit desain
Klik button
produk dari mulai Sesuai Ok
create your own
size dan warna
Tabel 11. Pengujian Halaman Home

4. Hasil pengujian Form Pembayaran

Hasil Hasil
Butir Uji Cara Uji Kesimpulan
Diharapkan YangAda

Tidak dapat
Data
memproses Sesuai Ok
Kosong
permintaan

Klik button
Tidak
save dengan
terkirim dan
mengisi
muncul Sesuai Ok
Form form
notifikasi
Pembayaran permintaan gagal
salah
 41

Klik button Dapat

save dengan terkirim
mengisi data dan
Sesuai Ok
form muncul
permintaan notifikasi
benar berhasil
Tabel 12. Pengujian Form Pembayaran

5. Hasil pengujian Form Registrasi

Hasil Hasil
Butir Uji Cara Uji Kesimpulan
Diharapkan Yang Ada
Tidak dapat
Data Kosong memproses Sesuai Ok
permintaan
Klik button save
dengan mengisi Tidak terkirim
Form form muncul Sesuai Ok
Registrasi permintaan notifikasi gagal
salah
Klik button save
Dapat terkirim
dengan mengisi
munculnotifikasi Sesuai Ok
formpermintaan
berhasil
benar
Tabel 13. Pengujian Form Registrasi

6. Hasil pengujian Stok (Quantity)

Hasil Hasil
Butir Uji Cara Uji Kesimpulan
Diharapkan YangAda
Klik button
e-wallet
dengan
Stok jumlah
Dapat memesan Sesuai Ok
Produk pemesanan
kurangdari
atau sama
dengan stok
 42

Klik pesan
dengan
jumlah
Gagal pesan Sesuai Ok
pemesana
n lebih
dari stok

Menu
Stok kosong menghilang Sesuai Ok
dari daftar
Tabel 14. Pengujian Form Stok

3.15.3. Kesimpulan Hasil Pengujian

Berdasarkan analisa dan perancangan sistem maka
dibangunlah “Perancangan Web Desain Pakaian Instan Pada
Pinusjaya Printing menggunakan metode waterfall” yang telah
selesai dibuat. Penelitian tersebut menghasilkan interface. Dan
Jenis pengujian yang dilakukan pada sistem ini menggunakan
black-box testing.
Aplikasi Desain Pakaian Instan untuk Pinusjaya Printing ini
merupakan aplikasi berbasis website dimana aplikasi ini bertujuan
agar mempermudah pelanggan dalam memesan Produk berupa
Sweater, Kaos, Tas, dsb serta membuat pelanggan dapat melakukan
pemesanan dan mengubah desain pada web tanpa harus datang
langsung ke Pinusjaya Printing.
Berdasarkan hasil pengujian black box testing yang telah
dilakukan maka dapat disimpulkan bahwa Aplikasi yang diuji
sudah berjalan dengan baik dan terbukti berhasil serta tidak
ditemukan adanya masalah. Pengujian menggunakan metode
black-box testing dilakukan pada halaman yang mempunyai input
dan output untuk mengetahui apakah fungsi pada aplikasi sudah
sesuai dengan yang diharapkan atau tidak.
 43

3.16. Tampilan Desain Aplikasi (Prototype)

3.16.1. Prototype Tampilan Figma

A. Menu/Form Login

Gambar 20. Mock-up Login

 44

B. Menu/Form Registrasi (Bagi User yang belum memiliki

akun)

Gambar 21. Mock-up Register

 45

C. Menu Pilihan (Kategori Sweater)

Gambar 22. Mock-up Sweater

D. Menu Pilihan (Kategori Kaos)

Gambar 23. Mock-Up kaos

 46

E. Menu Pilihan (Kategori Tas)

Gambar 24. Mock-up tas

F. Opsi Pembayaran

Gambar 25. Mock-up scan QR

 47

G. Transaksi Berhasil

Gambar 26. Mock-up transaksi berhasil

3.16.2. Prototype Tampilan Aplikasi Web

A. Form Login
 48

Gambar 27. Form Login Web

B. Dashboard / Master Home (Admin)

Gambar 28. Form dashboard

 49

C. Dashboard / Master Home (User)

Gambar 29. dashboard User

D. Menu Edit Desain

Gambar 30. Menu Edit Desain Pakaian

 50

E. Menu Data Pelanggan

Gambar 31. Menu data pelanggan

F. Menu Penjualan Produk

Gambar 32. Transaksi

 51

G. Menu Data Pelanggan

Gambar 33. Menu data pelanggan

H. Menu data supplier

Gambar 34. Menu data supplier

I. Menu kategori produk

Gambar 35. Kategori produk

 52

J. Menu/form pembelian produk

Gambar 36. Pembelian Produk

K. Menu/form Retur

Gambar 37. Retur

 53

L. Menu Pengguna

Gambar 38. Akun pengguna

M. Menu Laporan

Gambar 39. Menu Laporan

 54

N. Form transaksi berhasil

Gambar 40. Transaksi berhasil

O. Logout (Alert Logout)

Gambar 41. Alert Logout

 55

BAB IV
PENUTUP

4.1. Kesimpulan

Dalam pembuatan Rancangan Web Desain Pakaian Instan pada

PERCETAKAN PINUSJAYA PRINTING dapat diambil kesimpulan sebagai
berikut :

1. Aplikasi Desain Pakaian Instan Berbasis Website telah selesai dibuat dan
telah diuji menggunakan figma dan metode black-box.
2. Hasil uji coba metode Waterfall, prototype, serta Black Box Testing belum
ditemukan adanya masalah. Semua menu atau fitur yang ada pada sistem
dapat berjalan sesuai dengan fungsinya.
3. Untuk Spesifikasi baik Hardware ataupun Software yang digunakan untuk
membuat Aplikasi Desain Pakaian Instan Berbasis Website ini pun
tergolong ringan (tidak membutuhkan software dan hardware yang
sifatnya memberatkan perangkat mungkin di Laptop ataupun PC) dan
juga hemat biaya.
4. Sistem yang dibuat siap digunakan di PERCETAKAN PINUSJAYA
PRINTING.

4.2. Saran

Penulis dalam membuat Laporan Kerja Praktek perancangan Aplikasi

Desain Pakaian Instan Berbasis Website ini menyadari masih banyak
kesalahan dan kekurangan, baik dalam penulisan bahasa yang mungkin
kurang baku, ataupun dalam penyusunan dan perancangan aplikasi dan
perancangan menu serta sistem yang masih banyak kekurangan, maka dari
itu pendapat serta koreksi/kritik yang membangun tentu akan membuat
penulisan makalah kelompok kami menjadi lebih lengkap dan rapih.
 56

Dan berikut saran tambahan dari penulis terkait Laporan Kerja Praktek
yang sudah disusun dan dibuat.
1. Aplikasi agar dikembangkan pada platform selain website agar dapat
menyesuaikan dengan perkembangan teknologi sekarang.
2. Konfirmasi pembayaran dikembangkan agar menjadi otomatis, sehingga
admin tidak perlu menunggu pelanggan untuk mengupload bukti transfer.
3. Penambahan metode dan penyempurnaan terhadap aturan-aturan yang
digunakan dalam penarikan kesimpulan.
4. Menambah fitur-fitur tambahan agar aplikasi yang dibuat lebih
menarik.
 DAFTAR PUSTAKA

Apriyanto. (2020). Instant Clothing Design Pada Sebuah Web. Jurnal Simada,
Vol 3, No 3.

Carolina, I. (2019). Sarana Untuk Membuat Desain Sebuah Pakaian Dan

Totebag. Jurnal INOVTEK Polbeng, Vol 4, No 5.

Habibie, D. R. (2020). Membuat Pesanan Sesuai Dengan Desain Yang Telah

Dibuat Di Dalam Website. JURSIMA, Vol 8, No 2.

Irawan, A. (2021). Perancangan Produk Atau Benda Yang Akan Dibuat Pada
Website. Jurnal positif, Vol 3, No 2.

Junidar, A. A. (2020). Perancangan Dan Pembuatan Web Atau Aplikasi. Jurnal

Neliti, Vol 6, No 4.

Rizal. (2018). Membuat Sebuah Sarana Atau Platform Agar Mempermudah

Pengimplementasian Ide. Jurnal Sisfokom Sistem Informasi Dan
Komputer, Vol 7, No 1.

Sagala, G. (2019). Mengimplementasikan Ide Menjadi Sebuah Produk Dalam

Website. Jurnal Riset Komputer, Vol 4, No 4.

Saputra, E. P. (2019). Pengembangan Dan Peningkatan Kualitas Layanan

Website. Jurnal Simnasiptek , Vol 2, No 1.

Siahaan, M. Y. (2020). Metode Prototyping Untuk Membuat Aplikasi Berbasis

Web. JIK (Jurnal Informatika Kaputama), Vol 1, No 3.

Yuliani, Y. (2021). Perancangan Aplikasi Berbasis Website Desain Pakaian.

JSPEED – Jurnal Sentra Penelitian Engineering dan Edukasi, Vol 13, No
1.
 LAMPIRAN

1. Foto-foto kegiatan selama pelaksanaan kerja Praktek

a) Foto Bersama dengan pimpinan Instansi

Lampiran 1. Foto Kegiatan kerja praktek bersama Pimpinan Instansi

b) Presentasi Laporan KP kepada Pimpinan Instansi

Gambar 42. Anggota Kelompok 6 KP Bersama dengan Bapak Didik Suryanto

c) Kegiatan Kerja Praktek di Pinusjaya Printing

Gambar 43. Kegiatan KP di Pinusjaya Printing

2. Salinan Surat Persetujuan Kerja Praktek dari Dosen Pembimbing
Akademik

Lampiran 2. Lembar Persetujuan KP

3. Salinan Surat Pengesahan Laporan Kerja Praktek

Lampiran 3. Surat Pengesahan Laporan KP

4. Salinan Surat Pengesahan selesai Kerja Praktek

Lampiran 4. Lembar Pengesahan selesai KP

5. Lembar Penilaian Kerja Praktek Mahasiswa

Lampiran 5. Lembar penilaian Mahasiswa 1

Lampiran 6. Lembar penilaian Mahasiswa 2
Lampiran 7. Lembar penilaian Mahasiswa 3
6. Lembar berita acara konsultasi dengan dosen pembimbing KP

Lampiran 8. Lembar berita acara konsultasi dengan dosen KP

7. Lembar berita acara konsultasi dengan Supervisor KP

Lampiran 9. Lembar berita acara konsultasi dengan Supervisor KP

8. Lembar Pengajuan Kerja Praktek kepada Instansi

Lampiran 10. Surat Permohonan Magang Mahasiswa 1

Lampiran 11. Surat Permohonan Magang Mahasiswa 2
Lampiran 12. Surat Permohonan Magang Mahasiswa 3
9. Surat Persetujuan Kerja Praktek dari Instansi yang bersangkutan

Lampiran 13. Surat Persetujuan Kerja Praktek dari Instansi

10. Lembar Surat IA

Lampiran 14. Surat IA

11. Log Harian Tugas Kerja Praktek

Lampiran 15. Log Harian Mahasiswa 1

Lampiran 16. Log Harian Mahasiswa 2
Lampiran 17. Log Harian Mahasiswa 3
12. Bentuk masukan dan hasil keluaran dari tema yang dibahas

Lampiran 18. Listing Program

 LINK PUBLISH MAKALAH KERJA PRAKTEK

1. Link Jurnal

http://openjournal.unpam.ac.id/index.php/ESIT/article/view/22345#

2. Link Youtube (Dokumentasi Kegiatan Kerja Praktek di tempat Instansi)

https://youtu.be/4GSfw9mhBr4

3. Link Artikel Berita

https://www.kompasiana.com/rianriyono3653/62c6e126bb44862d920d1e2
2/perancangan-web-desain-pakaian-instan-pada-pinusjaya-printing-
menggunakan-metode-waterfall