LAPORAN UJI KOMPETENSI KEAHLIAN

PENGEMBANGAN MEDIA PROMOSI

ASIOP TRANING GROUND

Diajukan Sebagai Syarat Kelulusan Ujian Kompetensi Kejuruan

Tahun Pelajaran 2020/2021

Disusun Oleh :
Rizwar Falah Failasuf
NIS:

KOMPETENSI KEAHLIAN MULTIMEDIA

SMK DARUSSA’ADAH KABUPATEN BOGOR
 LEMBAR PERSETUJUAN

Judul Laporan : APLIKASI PERPUSTAKAAN BERBASIS WEB

Nama : Abdurozzaq Nurul Hadi
NISN : 0032113789
Program Keahlian : Rekayasa Perangkat Lunak

Telah disetujui dan disahkan sesuai dengan prosedur dan ketentuan yang
berlaku.

Disetujui Oleh :

Kepala Program Keahlian Guru Pembimbing

Abdul Haris, S.Kom. Dodi Rindiansyah, M.Kom.

Mengetahui :
Kepala SMKN 12 Kab. Tangerang

M.Akrom, S.Pd., M.Pd.

NIP. 197404042006041008

II
 LEMBAR PENGESAHAN

Judul Laporan : APLIKASI PERPUSTAKAAN BERBASIS WEB

Nama : Abdurozzaq Nurul Hadi
NISN : 0032113789
Program Keahlian : Rekayasa Perangkat Lunak

Telah diperiksa dan diuji pada

Tanggal…………Bulan……………..Tahun 20…..
Oleh :

Penguji I Penguji II

(..............................................) (..........................................)

Mengetahui :

Kepala Program Keahlian Kepala Sekolah

Abdul Haris, S.Kom. M.Akrom, S.Pd., M.Pd.

NIP. 197404042006041008

III
 DAFTAR ISI
COVER....................................................................................................................I
LEMBAR PERSETUJUAN.................................................................................II
LEMBAR PEGESAHAN...................................................................................III
DAFTAR ISI........................................................................................................IV
DAFTAR GAMBAR...........................................................................................VI
DAFTAR TABEL..............................................................................................VII
KATA PENGANTAR......................................................................................VIII
BAB I PENDAHULUAN.......................................................................................1
1.1 Latar Belakang.............................................................................................1
1.2 Tujuan..........................................................................................................2
BAB II TINJAUAN PUSTAKA...........................................................................3
2.1 Rekayasa Perangkat Lunak..........................................................................3
2.2 Sistem Informasi..........................................................................................5
2.3 Analisa dan Perancangan Sistem.................................................................5
2.4 Konsep Perrangkat Lunak............................................................................7
2.5 Alat Perancang Sistem...............................................................................10
BAB III PERANCANGAN.................................................................................16
3.1 Waktu dan Tempat Pelaksanaan................................................................16
3.2 Alat dan Bahan...........................................................................................16
3.3 Diagram Use Case......................................................................................17
3.4 Diagram Activity.......................................................................................17
3.5 Diagram Sequence.....................................................................................18
3.6 Diagram Class............................................................................................20
3.7 Rancangan Database..................................................................................21
3.8 Rancangan..................................................................................................24
BAB IV IMPLEMENTASI.................................................................................26
4.1 Print Screen Program Aplikasi...................................................................26
4.2 Print Screen Source Code..........................................................................30
BAB V PENUTUP................................................................................................39
5.1 Kesimpulan................................................................................................39
IV
 5.2 Saran..........................................................................................................39
LAMPIRAN..........................................................................................................40
DATA DIRI SISWA............................................................................................41

V
 DAFTAR GAMBAR
GAMBAR 1 ILUSTRASI MVVM VUE JS........................................................9
GAMBAR 2 DIAGRAM USE CASE OIBRARY.............................................17
GAMBAR 3 DIAGRAM ACTIVITY OIBRARY............................................18
GAMBAR 4 DIAGRAM SEQUENCE OIBRARY..........................................19
GAMBAR 5 DIAGRAM CLASS OIBRARY....................................................20
GAMBAR 6 SKETCH TAMPILAN AUTENTIKASI.....................................24
GAMBAR 7 SKETCH TAMPILAN DASHBOARD.......................................25
GAMBAR 10 HALAMAN LOGIN....................................................................26
GAMBAR 11 HALAMAN DASBOR ADMIN..................................................26
GAMBAR 12 HALAMAN DASBOR PUSTAKAWAN...................................27
GAMBAR 13 HALAMAN TAMBAH ANGGOTA..........................................27
GAMBAR 14 HALAMAN DAFTAR ANGGOTA...........................................28
GAMBAR 15 HALAMAN TAMBAH BUKU...................................................28
GAMBAR 16 HALAMAN PINJAM BUKU.....................................................29
GAMBAR 17 HALAMAN SIRKULASI...........................................................29
GAMBAR 18 HALAMAN LAPORAN PEMINJAMAN.................................30
GAMBAR 19 HALAMAN LAPORAN PENGEMBALIAN...........................30

VI
 DAFTAR TABEL
TABEL 1 KOMPONEN DIAGRAM USE CASE.............................................11
TABEL 2 KOMPONEN ACTIVITY DIAGRAM............................................12
TABEL 3 KOMPONEN DIAGRAM SEQUENCE..........................................13
TABEL 4 KOMPONEN DIAGRAM CLASS...................................................14
TABEL 5 ALAT & BAHAN...............................................................................16
TABEL 6 TABEL DATABASE USERS............................................................21
TABEL 7 TABEL DATABASE ROLES...........................................................22
TABEL 8 TABEL DATABASE ROLE_USER.................................................22
TABEL 9 TABEL DATABASE BUKU.............................................................22
TABEL 10 TABEL DATABASE PEMINJAMAN...........................................23

VII
 KATA PENGANTAR
Alhamdulillah, puji syukur kami panjatkan kehadirat Allah SWT yang telah
melimpahkan rahmat, hidayah-Nya pada kami sehingga kami bisa menyelesaikan
laporan Ujian Kompetensi Keahlian (UKK) dengan judul “APLIKASI

PERPUSTAKAAN BERBASIS WEB” dan dapat menyusun laporan

UKK ini dengan lancar. Dalam menyusun laporFan UKK ini, tidak lepas dari
bantuan beberapa pihak, maka dari itu kami mengucapkan terima kasih kepada :
1. Bapak M.Akrom, S.Pd., M.Pd. Selaku Kepala SMK Negeri 12 Kab.
Tangerang.
2. Bapak Abdul Haris, S.Kom. selaku Kepala Program Keahlian RPL.
3. Orang Tua yang telah memberikan persetujuan dan prasarana pada
pembuatan laporan kerja proyek ini.
Kami menyadari dalam menyusun laporan UKK ini masih jauh dari sempurna.
Oleh karena itu kritik dan saran yang bersifat membangun sangat kami harapkan
demi perbaikan di kemudian hari.
Akhir kata, semoga laporan ini bermanfaat bagi pembaca dan bisa
memberikan referensi untuk pembuatan web.

Tangerang, 17 Desember 2020

Abdurozzaq Nurul Hadi

VII
I
 BAB I
PENDAHULUAN

1.1 Latar belakang

Perpustakaan merupakan faktor penting di dalam penunjang transformasi
antara sumber ilmu (koleksi) dengan pencari ilmu (pengunjung). Perpustakaan
juga sering disebut jantung dari sekolah dimana di dalamnya terdapat kumpulan
koleksi, majalah, koran yang disusun berdasarkan sistem tertentu yang digunakan
sebagai media dalam mencari ilmu dan wawasan bagi masyarakat khususnya para
siswa dan guru di sekolah atau universitas. Hal ini disebabkan peranan
perpustakaan sangatlah penting dalam usaha dan upaya menunjang civitas
akademik yang ada.

Teknologi Informasi berperan penting dalam memperbaiki kualitas dan

kuantitas suatu lembaga pendidikan. Penggunaan teknologi informasi dalam
lingkup perpustakaan tidak hanya sebagai proses otomatisasi terhadap akses
informasi, tetapi juga menciptakan akurasi, kecepatan, dan kelengkapan sebuah
sistem yang terintegrasi, sehingga proses transaksi yang terjadi akan menjadi
efektif dan efisien. Teknologi Informasi juga dapat mendukung ketersediaan
informasi yang terintegrasi sebagai upaya menciptakan berbagai kemudahan-
kemudahan dalam melakukan semua transaksi yang ada di perpustakaan,
misalnya proses pendaftaran anggota baru, pemesanan koleksi, peminjaman
koleksi dan pengembalian koleksi perpustakaan.

Penerapan sistem basis data di perpustakaan yang masih menggunakan sistem

manual yang semua proses transaksinya ditulis pada kertas. sehingga
menimbulkan beberapa permasalahan di karena-kan (human error) seperti:

1. Kesalahan pada proses peminjaman buku yang mana buku yang di pinjam
oleh siswa tidak sesuai dengan buku yang tercatat dalam buku
peminjaman.
1
 2. Kesalahan pada penulisan nama siswa peminjam, nama siswa tertukar
dengan siswa lainnya pada saat pencatatan ke dalam buku
peminjaman.
3. Sebagian koleksi buku yang ada di perpustakaan tidak tercatat ke dalam
buku peminjaman.

Berdasarkan pada permasalahan di atas, maka dibuatlah sistem informasi

perpustakaan yang terkomputerisasi yang dapat memberikan kemudahan terhadap
pengguna dan membuat fitur-fitur untuk memenuhi kebutuhan petugas
perpustakaan. Dengan adanya aplikasi perpustakaan yang terkomputerisasi ini,
diharapkan dapat mengatasi permasalahan dan menambah nilai guna terhadap
perpustakaan, terutama bagi petugas perpustakaan dalam pengolahan data
transaksi yang terjadi seperti pendaftaran anggota baru, pemesanan, peminjaman
dan pengembalian koleksi serta dalam pembuatan laporan-laporan tiap
periodiknya.

1.2 Tujuan
Sistem ini dibuat untuk merancang bangun sistem informasi perpustakaan
secara terkomputerisasi sehingga dapat memperoleh informasi tentang data-data
koleksi perpustakaan, transaksi pendaftaran anggota, pemesanan, peminjaman dan
pengembalian koleksi serta mendapatkan laporan secara tepat, cepat dan akurat.

2
 BAB II
TINJAUAN PUSTAKA
2.1 Rekayasa Perangkat Lunak
Rekayasa perangkat lunak (RPL, atau dalam bahasa Inggris: Software
Engineering) adalah satu bidang profesi yang mendalami cara-cara
pengembangan perangkat lunak termasuk pembuatan, pemeliharaan, manajemen
organisasi pengembanganan perangkat lunak dan manajemen kualitas.

2.1.1 Karakteristik Rekayasa Perangkat Lunak

Pengembangan perangkat lunak adalah serangkaian proses pengembangan
produk berupa perangkat lunak agar tetap bisa memenuhi nilai kegunaan.
Proses ini dilakukan tanpa jangka waktu, tergantung dari proyek yang
dilakukannya. Selain itu menurut IBM, research software development
mengacu pada rangkaian aktivitas ilmu komputer yang dimaksudkan untuk
menciptakan, mendesain, menyebar dan mendukung software.

Pada dasarnya proses-proses pengembangan itu dilakukan untuk

menghasilkan software dengan kualitas tertinggi, yang membutuhkan biaya
terendah, dan dalam waktu yang singkat. Selain proses pengembangan, juga
terdapat tahapan terperinci tentang perubahan dan maintenance software.
Tergantung dari perusahaannya, beberapa perusahaan menggunakan tahapan
perencanaan, desain, pembangunan, pengujian dan penyebaran sebelum
mendapatkan hasil jadi yang akan di publish.

Untuk melakukan proses pengembangan ini biasanya menggunakan

metode waterfall, spiral dan agile. Dimana sebagian proses dijalankan oleh
programer, software engineer dan software developer.

Untuk menjalankan semua proses yang dibutuhkan pengembangan

perangkat lunak memang tidak mudah, ada langkah-langkah yang harus
diikuti secara sistematis. Hal ini bertujuan untuk mendapatkan hasil yang
maksimal.
3
2.1.2 Program Aplikasi Perpustakaan Berbasis Web
Aplikasi ini berbentuk web yang diperuntukan untuk kepala perpustakaan
(Admin) dan pegawai perpustakaan yang bertindak sebagai pustakawan.
Website ini dibangun menggunakan PHP sebagai script pemrogramannya dan
MySQL sebagai databasenya.

Dalam aplikasi web ini terdapat dua akses yaitu:

1. Administrator (Admin)
Pada akses sebagai admin yaitu kepala perpustakan, bertugas untuk
memasukkan data pustakawan dan semua User. Pada akses ini
terdapat 2 menu, yaitu:
a. Input User baru berdasarkan akses
Pada menu ini admin diberikan akses untuk memasukkan data
pribadi User berdasarkan aksesnya masing-masing.
b. Manajemen Data User
Pada menu ini admin diberikan akses untuk menajemen data
User berdasarkan aksesnya masing-masing.
2. Pustakawan (Pegawai)
Pada akses sebagai pustakawan yaitu pegawai perpustakaan, yang
dimana tugas utamanya adalah manajemen Buku, Anggota,
peminjaman buku, pengembalian buku serta laporan peminjamannya.
Pada akses ini terdapat beberapa menu, menu utama nya yaitu:
a. Manajemen Anggota
Pada menu ini pustakawan diberikan akses untuk memasukan
data anggota baru dan manajemen data anggota.
b. Manajemen Buku
Pada menu ini pustakawan diberikan akses untuk memasukan
data buku baru, manajemen data buku, lokasi buku pada
perpustakaan, dan stok buku yang tersedia.

4
 c. Manajemen Peminjaman dan Pengembalian Buku
Pada menu ini pustakawan diberikan akses untuk melakukan
peminjaman dan pengembalian buku dalam sistem.
d. Laporan Peminjaman dan Pengembalian Buku
Pada menu ini pustakawan diberikan akses untuk melihat
laporan peminjaman dan pengembalian buku serta mengekspor
data laporannya ke dalam file excel.

2.2 Sistem Informasi

Sistem informasi merupakan suatu kumpulan dari komponen – komponen
dalam suatu organisasi yang berhubungan dengan proses penciptaan dan
pengaliran informasi (Indrajit, 2001). Masih menurut Richardus, bahwa
keandalan suatu sistem informasi dalam sebuah organisasi terletak pada
keterkaitan antara komponen yang ada, sehingga dapat dihasilkan dan dialirkan
suatu informasi yang berguna akurat, terpercaya, detail, cepat, relevan dan
sebagainya) untuk organisasi yang bersangkutan.

Sistem informasi manajemen yang berbasis komputer terdiri dari manusia,

perangkat keras, perangkat lunak, data dan prosedur–prosedur organisasi yang
saling berinteraksi untuk menyediakan data dan informasi yang tepat waktunya
kepada pihak – pihak didalam maupun diluar organisasi yang kompeten.

2.3 Analisa dan Perancangan Sistem

2.3.1 Pengertian Analisa Sistem

Analisis adalah aktivitas yang memuat sejumlah kegiatan seperti mengurai,
membedakan, memilah sesuatu untuk digolongkan dan dikelompokkan kembali
menurut kriteria tertentu kemudian dicari kaitannya dan ditafsirkan maknanya.
Dalam pengertian yang lain, analisis adalah sikap atau perhatian terhadap sesuatu
(benda, fakta, fenomena) sampai mampu menguraikan menjadi bagian-bagian,
serta

5
 mengenal kaitan antarbagian tersebut dalam keseluruhan. Analisis dapat juga
diartikan sebagai kemampuan memecahkan atau menguraikan suatu materi atau
informasi menjadi komponen-komponen yang lebih kecil sehingga lebih mudah
dipahami.

Jadi, dari pengertian analisis diatas, dapat disimpulkan bahwa analisis

adalah sekumpulan aktivitas dan proses. Salah satu bentuk analisis adalah
merangkum sejumlah besar data yang masih mentah menjadi informasi yang
dapat diinterpretasikan. Semua bentuk analisis berusaha menggambarkan
pola- pola secara konsisten dalam data sehingga hasilnya dapat dipelajari dan
diterjemahkan dengan cara yang singkat dan penuh arti (Santoso, 2014)

2.3.2 Pengertian Perancangan Sistem

Teori-teori mengenai pengertian perancangan sistem menurut para ahli
diantaranya adalah:
1. Menurut Satzinger, Jackson dan Burd (2012 : 5) perancangan sistem
adalah sekumpulan aktivitas yang menggambarkan secara rinci
bagaimana sistem akan berjalan. Hal itu bertujuan untuk menghasilkan
produk perangkat lunak yang sesuai dengan kebutuhan User.
2. Menurut Kenneth dan Jane (2006 : G12) perancangan sistem adalah
kegiatan merancang dan menentukan cara mengolah sistem informasi
dari hasil analisa sistem sehingga sistem tersebut sesuai dengan
requirement..
3. Menurut O’Brien dan Marakas (2009 : 639) perancangan sistem
adalah sebuah kegiatan merancang dan menentukan cara mengolah
sistem informasi dari hasil analisa sistem sehingga dapat memenuhi
kebutuhan dari pengguna termasuk diantaranya perancangan User
interface, data dan aktivitas proses.

6
 Dari beberapa teori-teori diatas dapat disimpulkan bahwa perancangan
sistem adalah proses perancangan untuk merancang suatu sistem baru atau
memperbaiki suatu sistem yang telah ada sehingga sistem tersebut menjadi
lebih baik dan biasanya proses ini terdiri dari proses merancang input, output
dan file.

2.4 Konsep Perangkat Lunak

Pada bagian ini akan menjelaskan konsep HTML, CSS, PHP Laravel, VueJS,
Vuetify, MySQL.

2.4.1 HTML
HTML adalah Hypertext Markup Languange. HTML merupakan bahasa
markup yang mudah untuk dipahami oleh pengguna. HTML dapat
memudahkan user pemula ataupun developer dalam memformat, menyusun,
serta mengorganisir suatu dokumen secara online menggunakan program
Microsoft Word.
HTML berfungsi untuk memudahkan pengguna saat mengelola atau
mengatur sebuah data dalam bentuk dokumen pada website. Sehingga
menghasilkan dokumen yang menarik dan mudah dibaca oleh seluruh
pengguna internet di seluruh dunia. HTML mempunyai kelebihan dari bahasa
yang digunakan. Bahasa mark up untuk HTML mempunyai banyak sumber
dan luas serta konsisten
HTML dapat dijalankan secara alami pada setiap website. HTML juga
mempunyai learning curve yang lebih mudah serta open source yang dapat
dijalankan dengan gratis. Selain itu, HTML pun mempunyai standar website
yang resmi oleh World Wide Web Consortium pada maintain. Serta mudah
diintegrasikan dengan PHP, Node.js bahkan hingga bahasa backend.
HTML mempunyai fitur yang tidak bisa digunakan secara logic. Sehingga
halaman website harus dipisahkan meski mempunyai elemen yang sama. Saat
melakukan eksekusi, browser juga kadang tidak bisa diprediksi. Sehingga

7
 browser tidak bisa render yang lebih baru. Namun, Anda masih bisa
menggunakan HTML sesuai kebutuhan.

2.4.2 CSS
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan
kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya
tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah
sebuah teknologi internet yang direkomendasikan oleh World Wide Web
Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di
SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah
mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG
(Scalable Vector Graphics) dan Mozilla XUL (XML User Interface
Language). Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi
CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan
lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya
diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan
meningkatkan
Kemampuan CSS2 ke CSS3.

2.4.3 PHP Laravel

Laravel adalah salah satu Framework PHP yang paling populer dan paling
banyak digunakan di seluruh dunia dalam membangun aplikasi web mulai
dari proyek kecil hingga besar. Framework ini banyak digunakan oleh Web
Developer karena kinerja, fitur, dan skalabilitas nya.
Framework ini mengikuti struktur MVC (Model View Controller), MVC
adalah sebuah metode aplikasi dengan memisahkan data dari tampilan
berdasarkan komponen- komponen aplikasi, seperti: manipulasi data,
controller, dan user interface.
Dengan menggunakan struktur MVC maka membuat laravel mudah untuk
dipelajari dan mempercepat proses pembuatan prototipe aplikasi web.

8
 Framework ini juga menyediakan fitur bawaan seperti otentikasi, mail,
perutean, sesi, dan daftar berjalan.
Framework ini banyak disukai oleh para web developer, Sesuai sedikit
penjelasan diatas. Kelebihan lainnya yaitu Laravel sangat mudah untuk
disesuaikan, Karena kemudahan itulah kamu dapat membuat suatu struktur
proyek kamu sendiri yang memenuhi permintaan aplikasi web kamu.

2.4.4 VueJS
Vue (dibaca /vju;/ atau seperti view) adalah sebuah progressive framework
yang berguna untuk membangun antarmuka pengguna (user interface). Tidak
seperti monolithic framework lainnya, framework ini hanya fokus tampilan,
mudah diimplementasikan terhadap framework lainnya. Vue juga cukup
powerful untuk mendukung website 1 halaman (single-page) jika
dikombinasikan dengan perangkat modern dan pustaka pendukung lainnya.

Gambar 1 - Ilustrasi Konsep MVVM Vue.JS

Programmer dalam membangun sebuah sistem akan menggunakan

komponen-komponen yang sama untuk mendapatkan efisiensi (reuse-
components). Komponen-komponen yang sama tersebut sudah ada yang
membuatkan dari pihak ketiga yang biasanya berupa framework. Framework
terdiri dari berbagai komponen yang sudah sering digunakan.

Maka ketika programmer sudah disediakan framework yang tepat untuk

dipakai, pekerjaannya untuk membangun komponen dapat dihilangkan.
Programmer cukup melakukan re-using atau penggunaan ulang komponen
dari dalam framework. Contohnya vue framework yang fokus pada
komponen-
9
 komponen di layer view, dapat digunakan programmer untuk mempercepat
proses pembuatan sistem di layer view.

2.4.5 Vuetify
Vuetify adalah kombinasi dari kata “Vue” dan “Beautify” dan hal itu akan
terjadi di aplikasi kamu jika kamu menggunakannya. Vuetify adalah library
yang memungkinkan kamu membuat aplikasi dengan tampilan yang indah
walaupun kamu bukanlah seorang desainer. Vuetify memiliki lebih dari 80
komponen berbasis Material Design yang mana komponen tersebut dapat
membantu kamu lebih cepat dalam mendesain aplikasi.

2.4.6 MySQL
MySQL adalah sebuah database management system (manajemen basis
data) menggunakan perintah dasar SQL (Structured Query Language) yang
cukup terkenal. Database management system (DBMS) MySQL multi
pengguna dan multi alur ini sudah dipakai lebih dari 6 juta pengguna di
seluruh dunia.

MySQL adalah DBMS yang open source dengan dua bentuk lisensi, yaitu
Free Software (perangkat lunak bebas) dan Shareware (perangkat lunak
berpemilik yang penggunaannya terbatas). Jadi MySQL adalah database
server yang gratis dengan lisensi GNU General Public License (GPL)
sehingga dapat Anda pakai untuk keperluan pribadi atau komersil tanpa harus
membayar lisensi yang ada.

2.5 Alat Perancang Sistem

Pada bagian ini akan menjelaskan tentang alat perancang sistem yaitu
pengertian UML dan pengertian Database.
2.5.1 Pengertian UML

10
 UML (Unified Modeling Language) adalah bahasa spesifikasi standar
untuk mendokumentasikan,menspesifikasikan, dan membangun sistem
perangkat lunak.

A. Diagram Use Case

Diagram Use Case adalah suatu urutan interaksi yang saling
berkaitan antara sistem dan aktor. Use case dijalankan melalui cara
menggambarkan tipe interaksi antara user suatu program (sistem)
dengan sistemnya sendiri. Use case melalui sebuah cerita yang mana
sebuah sistem itu dipakai. Use case juga dipakai untuk membentuk
perilaku (behaviour) sistem yang akan dibuat. Sebuah use case
menggambarkan sebuah interakasi antara pengguna (aktor) dengan
sistem yang sudah ada.

Komponen Diagram Use Case:

Tabel 1 - Komponen Diagram Use Case

11
B. Activity Diagram
Menggambarkan rangkaian aliran dari aktivitas, digunakan untuk
mendeskripsikan aktifitas yang dibentuk dalam suatu operasi sehingga
dapat juga digunakan untuk aktifitas lainnya seperti use case atau
interaksi.

Komponen Activity Diagram:

Tabel 2 - Komponen Activity Diagram

12
C. Diagram Sequence
Menggambarkan kolaborasi dinamis antara sejumlah object.
Kegunaanya untuk menunjukkan rangkaian pesan yang dikirim antara
objek juga interaksi antara objek, sesuatu yang terjadi pada titik
tertentu dalam eksekusi sistem.

Komponen Diagram Sequence:

Tabel 3 - Komponen Diagram Sequence

D. Diagram Class
Menggambarkan struktur statis class di dalam sistem. Class
merepresentasikan sesuatu yang ditangani oleh sistem. Class dapat
berhubungan dengan yang lain melalui berbagai cara: associated

13
 (terhubung satu sama lain), dependent (satu class
tergantung/menggunakan class yang lain), specialed (satu class
merupakan spesialisasi dari class lainnya), atau package (grup bersama
sebagai satu unit). Sebuah sistem biasanya mempunyai beberapa
Diagram Class.

Komponen Diagram Class:

Tabel 4 - Komponen Diagram Class

2.5.2 Pengertian Database

Pengertian dari database itu sendiri adalah kumpulan data yang telah
disusun dengan aturan dan ketentuan tertentu serta saling berkaitan sehingga
bisa memudahkan pengguna untuk mengelola juga mendapatkan informasi
yang diperlukan. Jika dilihat dari segi bahasanya, maka database juga
diartikan sebagai basis data.

14
 Sebuah data bisa disebut sebagai suatu informasi yang didapat dan
disimpan, sedangkan basis sendiri merupakan perkumpulan atau tempat
kumpul. Maka bisa disimpulkan jika pengertian database ialah kumpulan
informasi atau data yang didapat kemudian disimpan pada sebuah file media
seperti misalnya disimpan pada media komputer.

Melakukan pengolahan database dengan menggunakan media komputer

diperuntukkan agar bisa memudahkan dan tentu supaya mengikuti zaman
yang semakin maju seperti sekarang ini yang semuanya serba menggunakan
komputer. Pengolahan sistem database di dunia IT dikenal dengan nama
DBMS atau Database Management System. Database juga diartikan
mengenai kumpulan tabel untuk menyimpan informasi dan data.

Namun penggunaan database ini juga bukan hanya untuk lingkup IT saja,
akan tetapi Anda bisa menggunakannya lebih dari itu. Seperti misalnya saja di
dunia pendidikan seperti universitas atau sekolahan ada database mahasiswa,
tenaga pengajar, murid, staf, dan lain sebagainya. Dalam perusahaan juga ada
data perusahaan seperti keuangan, karyawan, dan lainnya.

15
 BAB III
PERANCANGAN

3.1 Waktu dan Tempat Pelaksanaan

3.1.1 Waktu
Dalam kegiatan uji kompetensi ini pihak sekolah memberi waktu bagi
para siswa untuk mempersiapkan diri dan kemampuan yang akan diujikan.
Hal itu dilakukan agar siswa tidak memerlukan waktu yang cukup lama dalam
menyelesaikan ujian praktik kejuruan tersebut.

3.1.2 Tempat Pelaksanaan

Pelaksanaan uji kompetensi dan penyusunan laporan ini dilaksanakan
secara daring dari rumah siswa masing-masing.

3.2 Alat dan Bahan

No. Nama Alat/Bahan/Software Spesifikasi

Alat
1 PC Minimal Intel i3 6006U CPU @
2.00 GHz, RAM 4 GB, VGA
Intel HD 520, SSD 120 GB
2 OS Microsoft Windows 10 Home
3 Software basis data MySQL 15.1
4 Web Server Apache 2.4.35
5 Software Server Side PHP 7.4.60
Programming
6 Software script editor Microsoft Visual Studio Code
7 Software desain web Microsoft Visual Studio Code

16
 8 Software desain gambar Inkscape
Bahan
Database Oibrary
 Tabel user
 Tabel roles
 Tabel role_user
 Tabel Peminjaman
 Tabel Buku

Tabel 5 - Alat & Bahan

3.3 Diagram Use Case

Gambar 2 - Diagram Use Case Oibrary

3.4 Diagram Activity

17
 Gambar 3 - Activity Diagram Oibrary

3.5 Diagram Sequence

18
Gambar 4 - Diagram Sequence Oibrary

19
3.6 Diagram Class

Gambar 5 - Diagram Class Oibrary

20
3.7 Rancangan Database

3.7.1 Tabel Users

Nama Field Type Null Keterangan

1 id bigint(20) No Auto increment

2 kode_user varchar(255) No Kode unik user

5 foto_user varchar(255) Yes Foto user

6 first_name varchar(255) No Nama depan user

7 last_name varchar(255) No Nama belakang user

8 nis varchar(255) Yes Nis user anggota jika siswa

9 nuptk varchar(255) Yes Nuptk user anggota jika guru

10 alamat varchar(255) Yes Alamat user

11 no_telp varchar(255) Yes Nomor telepon user

12 email varchar(255) No Email user

14 password varchar(255) Yes Password user

16 created at timestamp Yes Cap waktu saat record di buat

17 updated_at timestamp Yes Cap waktu saat record di update

Tabel 6 - Tabel Database Users

3.7.2 Tabel Roles

21
 Name Type Null Keterangan

1 id bigint(20) No Auto increment

2 name varchar(255) No Nama role

3 description varchar(255) No Deskripsi role

4 created_at timestamp Yes Cap waktu saat record di buat

5 updated_at timestamp Yes Cap waktu saat record di update

Tabel 7 - Tabel Database Roles

3.7.3 Tabel role_user

3
 5 foto_buku varchar(255) Yes Foto buku

6 judul_buku varchar(255) No Judul buku

7 pengarang_buku varchar(255) No Pengarang buku

8 penerbit_buku varchar(255) No Penerbit buku

9 tahun_terbit_buku varchar(255) No Tahun terbit buku

10 jumlah_halaman_buku varchar(255) No Jumlah halaman buku

11 stok_buku varchar(255) No Stok buku yang tersisa

12 nama_rak varchar(255) No Nama rak buku

13 Iokasi_rak varchar(255) No Lokasi rak buku

Cap waktu saat record di
14 created_at timestamp Yes
buat
Cap waktu saat record di
15 updated_at timestamp Yes
update
Tabel 9 - Tabel Database Buku

3.7.5 Tabel Peminjaman

Name Type Null Keterangan

1 id bigint(20) No Auto increment
Kode unik peminjaman
2 kode_peminjaman varchar(255) No
buku
Jumlah buku yang
3 jumlah_buku varchar(255) No dipinjam
4 id_buku varchar(255) No Id buku pada tabel buku
Id member pada tabel
5 id_member varchar(255) No users
Id pustakwan pada tabel
6 id_pustakawan varchar(255) No
users

23
 7 tanggal_pinjam varchar(255) No Tanggal peminjaman
9 tanggal_pengembalian varchar(255) Yes Tanggal pengembalian
Tanggal buku harus di
10 tanggal_harus_kembali varchar(255) No
kembalikan
11 denda varchar(255) Yes Nominal denda jika telat
Jumlah hari telat
12 terlambat varchar(255) Yes mengebalikan buku
Cap waktu saat record di
13 created_at timestamp Yes
buat
Cap waktu saat record di
15 updated_at timestamp Yes
update

Tabel 10 – Tabel Database Peminjaman

3.8 Rancangan User Interface

3.8.1 Sketch Tampilan Autentikasi

Gambar 6 – Sketch Tampilan Autentikasi

3.8.2 Sketch Tampilan Dashboard

24
Gambar 7 – Sketch Tampilan Dashboard

25
 BAB IV
IMPLEMENTASI

4.1 Print Screen Program Aplikasi

4.1.1 Halaman Login

Gambar 8 - Halaman Login

4.1.2. Halaman Dasbor Admin

Gambar 9 - Halaman Dasbor Admin

26
4.1.3 Halaman Dasbor Pustakawan

Gambar 10 - Halaman Dasbor Pustakawan

4.1.4 Halaman Tambah Anggota

Gambar 11 - Halaman Tambah Anggota

27
4.1.5 Halaman Daftar Anggota

Gambar 12 - Halaman Daftar Anggota

4.1.6 Halaman Tambah Buku

Gambar 13 - Halaman Tambah Buku

4.1.7 Halaman Pinjam Buku

28
 Gambar 14 - Halaman Pinjam Buku

4.1.8 Halaman Sirkulasi

Gambar 15 - Halaman Sirkulasi

29
 4.1.9 Halaman Laporan Peminjaman

Gambar 16 - Halaman Laporan Peminjaman

4.1.10 Halaman Laporan Pengembalian

Gambar 17 - Halaman Laporan Pengembalian

4.2 Print Screen Source Code

4.2.1 Source Code Tambah Anggota (Backend Laravel)

public function createMember(Request $request) {

$this->validate($request, [
'first_name' => 'required',
'last_name' => 'required',
'email' => 'required|email|unique:users',
'role' => 'required' 7.]);

30
8.
9. if($request->hasFile('foto_user')){
10. $resource = $request->file('foto_user');
11. $name = Carbon::now()->timestamp."_".$resource-
>getClientOriginalName();
12. $userId = Auth::user()->id;
13. $url = "/storage/foto_user/".$userId."/".$name;
14. $resource-
>move(\base_path() ."/public/storage/foto_user/".$userId, $nam
e);
15.
16.
17. $user = User::create([
18. 'foto_user' => $url,
19. 'first_name' => $request['first_name'],
20. 'last_name' => $request['last_name'],
21. 'email' => $request['email'],
22. 'email_verified_at' => Carbon::now()->timestamp,
23. 'nis' => $request['nis'],
24. 'nuptk' => $request['nuptk'],
25. 'alamat' => $request['alamat'],
26. 'no_telp' => $request['no_telp'],
27. 'id_prefix' => '3'
28. ])->assignRole('member');
29.
30. return response()->json([
31. 'status' => 'success',
32. 'message' => 'Anggota telah berhasil ditambahkan'
33. ], 200);
34.
35. } else {
36.
37. $user = User::create([
38. 'first_name' => $request['first_name'],
39. 'last_name' => $request['last_name'],
40. 'email' => $request['email'],
41. 'nis' => $request['nis'],
42. 'nuptk' => $request['nuptk'],
43. 'alamat' => $request['alamat'],
44. 'no_telp' => $request['no_telp'],
45. 'id_prefix' => '3'
46. ])->assignRole('member');
47.
48. return response()->json([
49. 'status' => 'success',
50. 'message' => 'Anggota telah berhasil ditambahkan,
tanpa foto user.'
51. ], 200);
52.
53. }
54. }
55.

31
4.2.2 Source Code Tambah Anggota (Frontend VueJS/Vuetify)

<template>
<div class="ma-2"> 3.
<v-row justify="start"class="mx-auto">
<v-col
6.cols="12"
7.
8.>
<v-form @submit.prevent="createAnggota">
<v-card
class=" mx-auto"
elevation="8"
13.>
<v-card-title class="purple darken-3">
<v-icon
large
left
color="white"
19.>
mdi-account-plus
</v-icon>
<span class="title white-- text">Tambah Anggota Baru</span>

23. </v-card-title>
24.
25. <v-card-text class="headline font-weight-bold">
26. <v-row>
27.
28. <v-col cols="12" sm="12">
29.
30. <v-alert
31. v-model="errorAlert" border="top" color="red lighten-2"
32.
33.
34.
35. dismissible
36. >
37.<ul v-
for="(error, index) in serverError" v-bind:key="index">
38. <li>
39. {{ error[0] }}
40. </li>
41. </ul>
42. </v-alert>
43.
44. <v-row>
45. <v-
col cols="12" lg="6" md="12" sm="12" xs="12">
46.<v-text-field

32
47. label="Nama Depan" hint="Nama Depan | Required"
48. single-line filled
49.
50.
51.
52.
53. required
54. :error-messages="firstNameErrors" v-model="first_name
55. ></v-text-field>
56.
57. <v-text-field
58. label="Nama Belakang" hint="Nama Belakang | Required
59. single-line filled
60.
61. required
62. :error-messages="lastNameErrors" v-model="last_name"
63. ></v-text-field>
64.
65. <v-text-field
66. label="NIS"
67. hint="Nomor Induk Siswa"
68. persistent-hint single-line filled
69.
70.
required
71. v-model="nis"
72.
></v-text-field>
73.
74.
<v-text-field
75.
label="NUPTK"
76.
hint="Nomor Unik Pendidik dan Tenag
77.
78.
79. persistent-hint single-line filled
80.
81. required
82. v-model="nuptk"
83. ></v-text-field>
84.
85.
86. </v-col>
87.
a Kependidikan" 88.
89.
90.
91.
92.
93.
94.
95.
96.
97.

33
98.
99. <v-
col cols="12" lg="6" md="12" sm="12" xs="12"> 100.

101. <v-text-field label="Alamat" hint="Alamat" persiste

102.
103.
104.
105.
106.
107.
108. required
109. v-model="alamat"
110. ></v-text-field>
111.
112. <v-text-field label="No. Telp" hint="No. Telp" persisten
113.
114. required
115. v-model="no_telp"
116. ></v-text-field>
117.
118. <v-text-field label="Email" hint="Email | Required" pers
119. single-line filled
120.
121. required
122.
:error-messages="emailErrors" v-model="email" @input="$v.
123. ></v-text-field>
124.
125.
<v-file-input label="Foto User" filled
126.
prepend-icon="mdi-camera" v-model="foto_user"
127.
></v-file-input>
128.
129.
130. </v-col>
131. </v-row>
132.
133.
134. </v-col>
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.

34
149.
150. </v-row>
151. </v-card-text>
152.
153. <v-card-actions>
154. <v-list-item class="grow">
155. <v-row
156. align="center"
157. justify="end"
158. >
159. <v-btn color="red darken-1 white--
text" type="submit" >Tambah</v-btn>
160. </v-row>
161. </v-list-item>
162. </v-card-actions>
163.
164. <v-overlay
165. :absolute="true"
166. :value="overlay"
167. >
168. <v-progress-circular
169. :size="50"
170. color="white"
171. indeterminate
172. ></v-progress-circular>
173. </v-overlay>
174. </v-card>
175. </v-form>
176. </v-col>
177. </v-row>
178.
179. <v-snackbar top v-
model="snack" :timeout="3000" :color="snackColor">
180. {{ snackText }}
181.
182. <template v-slot:action="{ attrs }">
183. <v-btn v-
bind="attrs" text @click="snack = false">Close</v-btn>
184. </template>
185. </v-snackbar>
186.
187. </div>
188. </template>

<script>
import { required, email } from 'vuelidate/lib/validators'
import axios from 'axios'
export default {
name: 'createAnggotaPage',
data() {
return {

35
8.dialog: false, 9.
// Form
foto_user: [],
first_name: '',
last_name: '',
14.nis: '',
nuptk: '',
alamat: '',
no_telp: '',
email: '',
role: 'member', 20.
// Response
errorAlert: false,
overlay: false,
serverErrorCode: null,
serverError: null,
snack: false,
snackText: null,
snackColor: null, 29.
30.}
31.}, // end of data() 32.
validations: {
first_name: {
required, 36.},
last_name: {
required, 39.},
email: {
required,
email
43.},
44.}, // end of validations 45.
computed: {
firstNameErrors () {
let currentObj = this
const errors = []
if (!currentObj.$v.first_name.$dirty) return errors
!currentObj.$v.first_name.required && errors.push('Na ma Depan harus di isi.')

52. return errors

53. },
54.
55. lastNameErrors () {
56. let currentObj = this const errors = []
57. if (!currentObj.$v.last_name.$dirty) return errors
58.

36
59. !currentObj.$v.last_name.required && errors.push('Nam
a Belakang harus di isi.')
60. return errors
61. },
62.
63. emailErrors () {
64. let currentObj = this
65. const errors = []
66. if (!currentObj.$v.email.$dirty) return errors
67. !currentObj.$v.email.required && errors.push('Email h
arus di isi.')
68. !currentObj.$v.email.email && errors.push('Email haru
s valid.')
69. return errors
70. },
71.
72. }, //End of Computed
73.
74. methods: {
75.
76. createAnggota: function() {
77.
78. let currentObj = this
79.
80. currentObj.$v.$touch()
81.
82. if (currentObj.$v.$invalid) {
83. currentObj.snack = true
84. currentObj.snackColor = 'error'
85. currentObj.snackText = 'Ada data yang tidak valid.'
86. } else {
87. currentObj.errorAlert = false
88. currentObj.overlay = true
89.
90. let formData = new FormData();
91.
92. // Files
93. formData.append("foto_user", currentObj.foto_user)
94. // Text
95. formData.append("first_name", currentObj.first_name
)
96. formData.append("last_name", currentObj.last_name)
97. formData.append("nis", currentObj.nis)
98. formData.append("nuptk", currentObj.nuptk)
99. formData.append("alamat", currentObj.alamat)
100. formData.append("no_telp", currentObj.no_telp)
101. formData.append("email", currentObj.email)
102. formData.append("role", currentObj.role)
103.
104. axios.post('api/perpus/users/member/create', formDa
ta)
105. .then(function (response) {

37
106.
107. // after success show successSnackbar currentObj.snack = tru
108. currentObj.snackText = 'Anggota telah berhasil
109.
110.
di tambahkan!' 111.
112.
113. currentObj.overlay = false
114.
115. currentObj.$v.$reset() currentObj.$router.push('/perpus/anggo
116.
117.

118. })
119. .catch(function (error) { currentObj.overlay = false if(error.
120. currentObj.serverError = error.response.data.
121.
122.
errors 123.
124. currentObj.errorAlert = true
125. }
126. })
127. }
128. }, // End of createAnggota()

129.}, // End of Methods 130.

}
131. </script>

38
 BAB V
PENUTUP
5.1 Kesimpulan
Selama Ujian Kompetensi Keahlian dilaksanakan saya dapat menarik
kesimpulan kesimpulan yang erat kaitannya antara pelaksanaan Ujian Kompetensi
Keahlian dapat melatih disiplin, kerja keras, kreatif dan jujur.
Dan juga dalam melaksanakan UKK membutuhkan banyak alat dan bahan
yang akan dikelola oleh siswa sehingga menerapkan kopetensi dasar yang telah
didapat oleh siswa sebelum UKK.
Dalam pengerjaan script–script yang siswa terapkan pada pelaksanaan UKK,
melatih siswa untuk lebih teliti dan sabar terhadap pekerjaaannya, dengan adanya
kerjasama antara siswa dan pihak sekolah, akan memberikan manfaat yang besar
bagi mereka sendiri.

5.2 Saran
Ada beberapa saran yang perlu saya sampaikan untuk pihak panitia UKK,
Saran-saran berikut yang saya sampaikan untuk:

1. Memberikan toleransi saat terjadi gangguan listrik.

2. Memberikan toleransi saat tidak mempunyai kuota internet saat UKK.
3. Memberikan kebijakan untuk point-point pelanggaran saat UKK

39
 LAMPIRAN
http://lanaoke.blogspot.co.id/2016/09/contoh-laporan-upk.html

https://www.academia.edu/17252591/REKAYASA_PERANGKAT_LUNAK

https://ids.ac.id/mengetahui-proses-peran-penting-software-development/

https://www.academia.edu/10350057/Rekayasa_Perangkat_Lunak

http://www.lontar.ui.ac.id/file?file=digital%2F125915-S-5445-Analisis+pengembangan-
Literatur.pdf

https://repositori.uin-alauddin.ac.id/7081/1/Vimila%20Muntihana.pdf

https://www.ansoriweb.com/2020/03/pengertian-use-case-diagram.html

https://sharer.codepolitan.com/unified-modeling-language-uml

https://www.dumetschool.com/images/fck/Screen%20Shot%202014-12- 20%20at
%209.49.53%20AM.png

https://lh3.googleusercontent.com/-
f2YZNA_fa4M/VJTsypumAoI/AAAAAAAAEVU/W4ey2flYHZg/w402-h357-
no/Screen%2BShot%2B2014-12-20%2Bat%2B10.15.37%2BAM.png

https://guratgarut.com/wp-content/uploads/2020/08/simbol-classs-diagram.png

https://lh4.googleusercontent.com/-QhK7KcdYjE8/VJTttQrrzWI/AAAAAAAAEVo/Lmlccgv-
3r8/w513-h425-no/Screen%2BShot%2B2014-12-03%2Bat%2B1.25.30%2BPM.png

https://bootup.ai/blog/pengertian-database-beserta-fungsi-dan-manfaat-penggunaannya/

40
 DATA DIRI SISWA

Nama : Abdurozzaq Nurul Hadi

NISN 0032113789

TTL : Tangerang, 26 Februari 2003

Kelas : XII RPL 3

Program keahlian : Rekayasa Perangkat Lunak

Sekolah : SMK Negeri 12 Kabupaten Tangerang

Alamat : Jl. Sentul No. 57, Curug Kulon, Curug

Nomor HP 089603363136

Penyusun

Abdurozzaq Nurul Hadi

41