LAPORAN UJIAN KOMPETENSI KEJURUAN

SISTEM MANAJEMEN PERPUSTAKAAN ONLINE

SMK NEGERI CIBOGO SUBANG

Diajukan Sebagai Syarat Kelulusan

Ujian Kompetensi Kejuruan

Rekayasa Perangkat Lunak (RPL)

Tahun Pelajaran 2022 / 2023

Disusun :

Nama : ADIT

NIS : 00100001 / 020202222013

Kelas : XII RPL

SEKOLAH MENENGAH KEJURUSAN NEGERI CIBOGO

Jln. Raya Subang-Cikamurang Km. 12 Sadawarna Cibogo ( 0260 ) 760 5300
E- Mail Cibogo@Yahoo.co.id website : www.smkncibogo.sch.id NPSN :
69878008 Kabupaten Subang- 41285
 LEMBAR PENGESAHAN

LAPORAN

SISTEM MANAJEMEN

PERPUSTAKAAN ONLINE

SMK NEGERI CIBOGO SUBANG

Disusun Oleh :

Nama : ADIT

NIS : 00100001 / 020202222013

Kelas : XII RPL

Telah Di Setujui dan Diketahui Oleh :

Penguji Ekternal, Penguji Internal,

Novi Supriatna Sofyan, S.Kom Herman , S. Kom

PT. CITRA JELAJAH INFORMATIKA (CIFO)

Mengetahui :

Kepala Sekolah Kepala Program

ADE SUHENDIN S.T

DEDEN SETIAWAN S.Pd
NIP. 19730208 200701 1 005
 DAFTAR ISI

LEMBAR PENGESAHAN …………………………………………………………….

KATA PENGANTAR…………………………………………………………………..

BAB I PENDAHULUAN………………………………………………………………..
1.1 Latar belakang…………………………………………………………………….
1.2 Tujuan……………………………………………………………………………..

BAB II TINJAUAN PUSTAKA………………………………………………………...

2.1 HTML……………………………………………………………………………..
2.2 SCC ……………………………………………………………………………….
2.3 PHP………………………………………………………………………………..
2.4 MYSQL…………………………………………………………………………...
2.5 BOOTSTRAP …………………………………………………………………….

BAB III PROSES………………………………………………………………………..

3.1 Waktu Dan Tempat Pelaksanaan………………………………………………….
3.2 Alat Dan Bahan…………………………………………………………………...
3.3 APLIKASI ………………………………………………………………………..

BAB IV HASIL
4.1 ERD……………………………………………………………………………….
4.2 Hasil Program ( Screen Program aplikasi )……………………………………….
4.3 CODING (Screen Coding Program)……………………………………………...

BAB V PENUTUP
5.1 Kesimpulan………………………………………………………………………..
5.2 Saran………………………………………………………………………………

DAFRTAR PUSTAKA………………………………………………………………….
 KATA PENGANTAR

Syukur Alhamdulilah penulis panjatkan kehadiran Allah SWT yang telah

melimpahkan rahmat dan hidayah-Nya, sehingga penulis dapat menyelesaikan laporan ini
dengan baik dan sebagai bukti bahwa penulis telah melaksanakan Uji Kompetensi Keahlian
(UKK).

Di dalam pelaksanaan kegiatan dan penyusunan hasil laporan UKK ini, Penulis
mengucapkan terimakasih kepada semua pihak yang telah membantu pelaksanaan kegiatan
ini, terutama kepada :

1. Ade Suhendin, S.T Selaku Kepala SMK Negeri Cibogo Subang

2. Ddeden Setiawan , S.Pd Selaku Ketua Program Keahlian RPL
3. Herman , S.Kom Selaku Penguji Internal
4. Novi Supriatna Sofyan, S.Kom Selaku Penguji Ekternal dari PT. Citra Jelajah
Informatika (CIFO).

Dari sanalah Kesuksesan Berawal, semoga semua ini bisa memberikan sedikit
kebahagiaan dan menuju kearah yang lebih baik. Penulis menyadari banyak kekurangan dan
kesalahan dari laporan ini oleh karena itu Penulis membutuhkan kritik dan saran yang
membaguan agar laporan ini bisa lebih baik lagi . Akhir Kata Penulis berharap dari Laporan
ini bisa bermanfaat bagi pembaca.

Subang, April 2023

Penulis
 BAB I

PENDAHULUAN

1.1 Latar belakang

Sekolah Menengah Kejuruan (SMK) merupakan pendidikan yang lebih
mengutamakan pengembangan keterampilan siswa. Keterampilan itu didapat
dari pembelajaran di sekolah dan industry. Setelah melaksanakan Praktik Kerja
Lapangan (PKL), siswa akan disibukkan dengan berbagai kegiatan yang harus
dilakukan agar mendapat kelulusan. Siswa SMK akan dinyatakan lulus jika
mereka berhasil menyelesaikan Ujian Sekolah, dan Uji Kompetensi Keahlian
(UKK). UKK dilaksanakan sesuai dengan jurusan masing-masing dan
dilaksanakan sebelum Ujian Sekolah. UKK dilaksanakan sebagai indikator
ketercapaian standar kompetensi lulusan, sedangkan bagi stakeholder Uji
Kompetenai dijadikan informasi atas kompetensi yang dimiliki calon tenaga
kerja.

1.2 Tujuan
Tujuan UKK adalah sebagai berikut :
1 Mengukur pencapaian kompetensi siswa SMK.
2 Memfasilitasi siswa SMK yang akan menyelesaikan pendidikannya untuk
mendapatkan sertifikat kompetensi.
3 Mengoptimalkan pelaksanaan sertifikat oleh SMK yang berorientasi pada
permitaan industri terhadap tenaga kerja kompeten yang memiliki sertifikat
kompetensi.
4 Memfasilitasi kerjasama SMK dengan dunia usaha / industri dalam rangka
memenuhi kebutuhan tenaga kerja kompeten bersertifikat kompetensi.
5 Mencetak pelajar agar apa yang telah didapat dari mata pelajaran dalam
keahlian Rekayasa Perangkat Lunak dimulai dari kelas X sampai XII bisa
dimanfaatkan dan dipraktikkan di depan para penguji. Jadi, siswa dituntut agar
bisa mempersiapkan materi, fisik, dan mentalnya supaya dalam penyampaian
kepada penguji lebih dimengerti.
6 Siswa-siswi bisa lebih mandiri saat lulus dari SMK Negeri Cibogo sehingga
bisa bersaing sehat dan optimal baik dalam dunia kerja maupun melanjutkan
kejenjang pendidikan yang lebih tinggi.
 BAB II
TINJAUAN PUSTAKA

2.1 HTML
HTML adalah bahasa yang digunakan untuk membuat halaman web. Bagi
yang berkecimpung di dunia perangkat gadget dan ilmu komputer, pasti sudah tidak
asing lagi dengan berbagai kode di dalamnya. HTML adalah kependekan
dari Hypertext Markup Language.
Berbeda dengan orang awam, mungkin hanya sekedar mendengar istilah
HTML semata. Tanpa tahu makna pengertian HTML dan kegunaan sebenarnya.
Terutama maksud di balik kode-kode yang tersusun. Kode HTML tersebut
memastikan format teks dan gambar yang tepat untuk browser Internet. Tanpa
HTML, browser tidak akan tahu bagaimana menampilkan teks sebagai elemen atau
memuat gambar atau elemen lainnya. HTML adalah bahasa standar pemrogaman
yang digunakan untuk membuat halaman website, yang diakses melalui internet.
Singkatan dari "Hypertext Markup Language" atau "bahasa markup".
HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan dalam
sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan bisa
dipahami oleh para pengguna internet.
Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan
sebagai metode yang digunakan untuk berpindah laman web ke laman lain. Usai
mengklik tulisan atau simbol yang muncul di halaman website.
Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML
terhadap teks didalamnya. Contoh jika mengetik suatu teks dengan tanda tag  . 
Melansir dari Nesabamedia, 'language' berarti bahasa pemrograman atau script.
Disusun dari tag-tag tertentu yang akan diterjemahkan dalam teks atau visual yang
bisa dilihat di website.

2.2 SCC

CSS adalah salah satu bahasa yang wajib Anda ketahui saat belajar membuat
website. Tanpanya, tampilan website akan kurang menarik, dan perlu upaya lebih
untuk melakukan perubahan pada elemen tampilan. Nah, untuk mulai belajar
tentang CSS, Anda bisa menyimak artikel ini. Anda akan mengenal apa itu CSS dan
berbagai hal terkait bahasa tersebut, mulai dari fungsi hingga jenis jenis CSS.

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang

digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS,
Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman. CSS
digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk
membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik.
CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format
halaman website. Kenapa demikian?

Apabila hanya menggunakan HTML ketika membangun website dengan

beberapa halaman, Anda harus menulis tag untuk sebuah elemen HTML di semua
halaman tersebut.  Dengan adanya CSS, Anda cukup menulis kode satu kali untuk
sebuah elemen HTML untuk diterapkan ke semua halaman. Nantinya, ketika akan
melakukan perubahan, Anda juga cukup melakukan perubahan pada satu kode tadi.
Praktis, bukan? Pun demikian, CSS sering dianggap sebagai sebuah bahasa
pemrograman. Padahal, CSS lebih tepat disebut sebagai bahasa style sheet yang
umumnya digunakan bersamaan dengan JavaScript. 

Secara umum, CSS berfungsi untuk mengatur tampilan halaman website

berbasis HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS
lainnya, yaitu:

1. Mempercepat Loading Halaman Web

Jika Anda mengatur tampilan website dengan CSS, kecepatan loading

website bisa meningkat. Karena Anda bisa menuliskan satu rangkaian kode untuk
beberapa halaman website sekaligus, jumlah kode bisa diminimalkan. Dengan
begitu, beban pada saat proses loading website lebih kecil.

2. Memudahkan Pengelolaan Kode

Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin
mengganti tampilan website. Sebagai contoh, Anda ingin mengubah latar
 belakang semua halaman website. Maka, cukup edit kode CSS terkait latar
belakang, perubahan itu akan diterapkan di semua halaman.

3. Menawarkan Lebih Banyak Variasi Tampilan

HTML adalah bahasa yang dapat untuk mengatur tampilan halaman website,

tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga Anda
bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa
menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan,
atau membuat menu dropdown CSS.

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website
optimal di berbagai ukuran layar. Baik itu di laptop maupun di smartphone.
Mengapa demikian? CSS memiliki berbagai property untuk mengatur tampilan
konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika
menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran layar
yang digunakan untuk menampilkan website.

2.3 PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page (situs
personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada
waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa
sekumpulan script yang digunakan untuk mengolah data form dari web. PHP adalah
bahasa pemrograman web dinamis yang sering digunakan saat ini. Contoh aplikasi
lain yang lebih kompleks berupa CMS yang dibangun menggunakan PHP adalah
Mambo, Joomla, Postnuke, Xaraya, dll.
Kelebihan PHP dari bahasa pemrograman lainnya :
1. Bahasa pemrogram PHP adalah sebuah bahasa script yang tidak menggunakan
kompilasi dalam penggunaannya.
2. Dalam sisi pengembangan lebih mudah karena banyaknya milis-milis dan
developer yang siap membantu dalam pengembangan.
3. PHP adalah bahasa open source yang dapat digunakan diberbagai mesin.
2.4 MySQL

MySQL adalah Relational Database Management System (RDBMS) yang

didistribusikan secara gratis dibawah lisensi GPL (General Public License). Dimana
setiap orang bebas menggunakan MySQL, namun tidak diperbolehkan menjadikan
produk turunan yang bersifat komersial. MySQL sebenarnya adalah konsep turunan
database sejak lama, yaitu SQL (Structured Query Language). SQL adalah konsep
pengoperasian database, terutama untuk pemilihan / seleksi dan pemasukkan data,
yang memungkinkan pengoperasian data dikerjakan dengan mudah dan secara
otomatis.
Kelebihan MySQL, antara lain :
1. Open Source. MySQL didistribusikan secara open source, dibawah lisensi GPL
sehingga dapat digunakan secara cuma-cuma.
2. Multiuser. MySQL dapat digunakan oleh beberapa user dalam waktu yang
bersamaan tanpa mengalami masalah / konflik.
3. Perintah dan fungsi. MySQL memiliki operator dan fungsi secara penuh yang
mendukung perintah select dan where dalam perintah query.

2.5 Bootstrap

Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi untuk
mendesain website responsive dengan cepat dan mudah. Framework open source ini
diciptakan pada tahun 2011 oleh Mark Otto dan Jacob Thornton dari Bootstrap
dengan cepat meraih popularitas digunakan oleh 27% website di seluruh dunia.
Hal itu karena kesederhanaan dan konsistensi yang ditawarkan Bootstrap dibanding
framework lainnya saat itu. 

Kemudahan yang ditawarkan oleh Bootstrap adalah Anda tak

perlu coding komponen website dari nol. Framework ini tersusun dari kumpulan file
CSS dan JavaScript berbentuk class yang tinggal pakai.  Class yang disediakan
Bootstrap juga cukup lengkap. Mulai dari class untuk layout halaman, class menu
navigasi, class  animasi, dan masih banyak lainnya.  Menariknya lagi, Bootstrap
bersifat responsive berkat grid system yang digunakan. Sistem grid pada bootstrap
menggunakan rangkaian containers, baris, dan kolom untuk menyesuaikan bentuk
layout dan konten website Anda.
 Dengan kata lain, Bootstrap menjamin tampilan website Anda akan tetap rapi dan
konsisten di berbagai perangkat pengunjung. Baik melalui smartphone, tablet, atau
laptop.

 Menciptakan website Mobile Friendly —Berkat sistem grid, proses

membuat website mobile friendly  tak akan membutuhkan waktu lama.
 Memudahkan resize gambar — Cukup dengan menambahkan class .img-
responsive ke gambar, maka gambar tersebut akan otomatis di-resize sesuai
ukuran layar pengguna.
 Menambahkan elemen website tanpa ribet — Bootstrap menyediakan
berbagai elemen yang bisa langsung Anda gunakan di website. Misalnya,
navigasi, menu dropdown, thumbnail, dan sebagainya.
 Membuat website lebih interaktif — Bootstrap juga memungkinkan Anda
menggunakan plugin custom JQuery. Jadi, Anda bisa menambahkan berbagai
elemen interaktif ke website dengan mudah. Misalnya, popup, transisi, image
carousel, dan sebagainya.

Beberapa kelebihan Bootstrap yang membuatnya menjadi salah satu framework

terpopuler di dunia adalah:

1. Ramah untuk Pemula

Meskipun baru memahami dasar HTML, CSS, dan JavaScript, Anda sudah dapat
menggunakan bootstrap untuk membuat website. Alasannya, sudah tersedia berbagai
elemen dan class yang bisa langsung Anda pakai. Inilah yang membuat Bootstrap
ramah untuk pemula. 

2. Grid System yang Canggih

Dengan grid system, membuat website yang responsive bukan hal sulit lagi. Semua
elemen di dalam website bisa dibuat menyesuaikan dengan perangkat yang
digunakan pengunjung. Selain itu, Anda sebagai developer tak perlu membuat
berbagai versi mobile dari website secara terpisah dengan bantuan Bootstrap sebagai
salah satu CSS Framework terbaik.
3. Kompatibilitas dengan Web Browser Terbaru

Bootstrap mendukung semua versi terbaru web browser di berbagai perangkat.

Misalnya, Google Chrome, Firefox, dan Safari. Dengan begitu, website yang dibuat
dengan Bootstrap akan tetap terlihat baik, apapun browser yang digunakan untuk
mengaksesnya.

4. Bersifat Open-Source

Bootstrap merupakan framework open-source yang bebas untuk dikembangkan oleh

penggunannya. Hal ini tentu akan membuat Bootstrap lebih berkualitas berkat
berbagai kontribusi dari pengembang di seluruh dunia.  Selain itu, sifat Bootstrap
yang open-source membuat Anda bebas menggunakannya tanpa harus mengeluarkan
biaya. Cocok untuk developer pemula yang ingin belajar, kan?

5. Kebebasan Kustomisasi

Versi default Bootstrap, menyediakan apa yang Anda butuhkan untuk membuat
website. Namun, Anda bisa mengubahnya dengan mudah sesuai kebutuhan
pengembangan website yang akan dilakukan. Anda bisa masuk ke halaman
kustomisasi Bootstrap, lalu pilih komponen, dan desain sesuai keinginan untuk
membuat pekerjaan Anda lebih mudah. Oh ya, ada banyak sekali template
Bootstrap yang bisa Anda gunakan di website, loh.

6. Rutin Diperbarui

Menggunakan framework yang selalu update itu penting. Bootstrap termasuk ke

salah satu framework dengan pembaruan rutin. Jadi, bukan hanya pembaruan besar
(major update) saja. Apabila ada fitur terbaru atau celah keamanan yang perlu
diperbaiki, pengguna Bootstrap akan bisa langsung mendapatkan versi terbarunya.

7. Tersedia Dokumentasi Lengkap

Bootstrap memudahkan pengguna untuk menggunakan framework ini dengan tepat.

Baik pengguna baru yang masih belajar, maupun pengguna yang sudah mahir.
 Setiap bagian dari penggunaan Bootstrap seperti cara download hingga ketentuan
melakukan migrasi disediakan lengkap. Bahkan lengkap dengan contoh dan coding
untuk mempraktekkannya.  Dengan begitu, pengguna jadi semakin yakin untuk
mencoba framework ini untuk pengembangan website mereka.  

8. Memiliki Komunitas Besar yang Aktif

Anda masih mengalami kesulitan menggunakan Bootstrap setelah membaca

dokumentasinya? Atau menemukan kendala yang belum ada di dokumentasi
tersebut? Tenang, komunitas Bootstrap di seluruh dunia bisa membantu Anda.
Mereka cukup aktif menjawab berbagai pertanyaan developer pemula, kok. Jadi,
Anda bisa menanyakannya melalui GitHub Bootstrap atau Stack Overflow. 

Walaupun menawarkan banyak kelebihan, Bootstrap punya kekurangan yang perlu

diketahui, yaitu:

1. Elemennya Banyak Digunakan Developer Website Lain

Bootstrap adalah framework yang menyediakan elemen cukup banyak. Namun,

pengguna Bootstrap bisa saja menggunakan elemen yang sama dengan Anda di
website mereka. Alhasil, tampilan website Anda bisa jadi akan mirip dengan
beberapa website lain. Wah, jadi pedang bermata dua, ya? Sebenarnya, hal ini bisa
disiasati dengan mengubah kode elemen Bootstrap. Sayangnya, mungkin tidak
semua orang mampu mengubahnya. Baik terkendala kemampuan atau waktu
pengerjaannya.

2. Bisa Memperlambat Website

Ketika pertama kali diunduh, ukuran file Bootstrap memang tidak terlalu besar. Tapi,
di dalamnya berisi file CSS, JavaScript, hingga jQuery yang akan digunakan
membangun website.  Nah, seiring pengembangan website akan semakin banyak file
yang digunakan dan pada akhirnya membuat website menjadi berat.  Solusinya,
usahakan Anda hanya menggunakan class Bootstrap yang memang dibutuhkan saja,
ya.
3. Memperlambat Proses Belajar

Apakah Anda sedang belajar coding? Bila iya, menggunakan Bootstrap saja mungkin
bukan pilihan terbaik. Kenapa begitu?  Dengan kemudahan yang disediakan
Bootstrap, Anda bisa saja membuat website tanpa melakukan coding yang rumit dan
belajar lebih jauh. Bahkan dengan kode yang disediakan pada halaman dokumentasi,
bisa saja membuat Anda hanya menggunakan tanpa mempelajari konsepnya. 
 BAB III
PROSES

3.1 Waktu Dan Tempat Pelaksanaan

Ujian Praktek dan Kompetensi Rekayasa Perangkat lunak (RPL) dilaksanakan pada :
Hari Senin tanggal 28 April 2023 di mulai dari jam 07.00 sampai dengan selesai. Di
Lab KOM 1 SMK Negeri Cibogo.
3.2 Alat dan Bahan Yang di gunakan
1. Laptop atau PC Intel Core i3
2. Windows 10
3. Software basis data  MySql 10.1.21
4. Web Server  Apache 2.4.25
5. Software Server Side Programming  PHP 5.6.30
6. Sublime texts
7. Software desain web Bootstrap
8. Software desain gambar Adobe Photoshop CS3
 BAB IV

HASIL

Sistem Manajemen Perpustakaan Online SMK Negeri Cibogo adalah sebuah Aplikasi
yang dibuat sebagai pembantu para pengunjung perpustakaan khususnya siswa / i yang
menginginkan jenis buku yang pareatif serta menarik dan bisa dibuka atau di akses melalui
handphone android persi sederhana sehingga dapat memudahkan penggunanya secara gratis
dimanapun dan kapanpun sehingga para siswa/i di mudahkan dalam proses pencarian sumber
media belajar ataupun sumber media dalam meyelesaikan tugas-tugas dari guru.

Sistem aplikasi ini hanya berfokus pada pendataan buku tamu perpustakaan di SMK
Negeri Cibogo, Adapun ebook sebagai pendukung hanyalah penyimpanan file yang di
padukan dengan google drive.

4.1 ERD

4.2 Hasil Program ( Screen Program aplikasi )

1. Tampilan Login
2. Tampilan Menu dasbor

3. Tampilan Data Tamu

4. Tampilan data Buku

5. Laporan
4.3 CODING (Screen Coding Program)
1. Login
2. Menu Dasbor

3. Koneksi
4. Data Tamu
5. Data Buku
6. Laporan

7. Style CSS
 BAB V

PENUTUP

5.1 Kesimpulan
Setelah pelaksanaan kompetisi dan dilanjutkan dengan pembuatan laporan ini
adalah suatu evaluasi gambaran tentang UKK  merupakan kegiatan yang sangat
penting, karena dapat mengetahui sejauh mana keahlian peserta didik pada paket
keahlian yang dipilihnya. Selain itu peserta didik juga dapat lebih melatih mental dan
kepercayaan melalui kegiatan tersebut. Penulisan laporan UKK ini merupakan wujud
pertanggungjawaban yang dilakukan pada saat UKK melalui sebuah laporan.

5.2 Saran
1. Untuk implementasinya, maka eksistensi Gugus Sekolah dan managemennya
menjadi pilihan yang strategis bagi pengadaan dan pengembangan alat
peraga/media pendidikan.
2. Kritik dan saran dari pembaca sangat diharapkan demi kesempurnaan penulisan
makalah di kemudian hari
 Daftar Pustaka

https://www.merdeka.com/trending/pengertian-html-lengkap-dengan-fungsi-dan-sejarah-
kemunculannya-kln.html
https://www.niagahoster.co.id/blog/pengertian-css/
https://www.niagahoster.co.id/blog/bootstrap-adalah/