SISTEM INFORMASI PENGOLAHAN DATABASE PERPUSTAKAAN SMAN 25

GARUT

TUGAS DATABASE DESIGN DAN PROGRAMMING

Berbasis WEB dan MYSQLi

Oleh :

Ravi Nugraha

NIM. 22571003

PROGRAM STUDI SISTEM INFORMASI

INSTITUT PENDIDIKAN INDONESIA

FAKULTAS ILMU TERAPAN DAN SAINS

2023
A. Latar Belakang Masalah
Perkembangan dunia teknologi sangat berpengaruh terhadap ilmu pengetahuan dan
teknologi pada kehidupan sehari-hari yang makin kompleks, maka manusia dituntut untuk
menyesuaikan dengan perkembangan zaman. Saat ini telah menjadi suatu kebutuhan bahwa
sistem komputer dapat memberi kemudahan dalam pencarian, informasi yang di inginkan,
mengurangi terjadinya kesalahan yang disebabkan oleh kelalaian manusia atau yang disebut
dengan human error, serta keamanan data pun dapat lebih terjamin. Pemanfaatan teknologi
komputerisasi juga perlu diimbangi dengan sumber daya manusia yang berkualitas, agar dalam
pemanfaatan teknologi komputerisasi tersebut dapat berjalan dengan baik sesuai yang
diharapkan. Penggunaan komputerisasi dan sistem informasi yang optimal, dalam sebuah
perusahaan merupakan pilihan yang tepat dalam pengolahan data yang efektif, dan efisien untuk
mendapatkan informasi yang dibutuhkan.
Komputer itu sendiri dapat diartikan sebagai seperangkat alat elektronik yang dapat
digunakan oleh manusia untuk membantu menyelesaikan suatu masalah yang dihadapinya,
berdasarkan intruksi-intruksi yang diberikan kepadanya. Untuk menyelesaikan suatu masalah
dengan komputer, maka kita dituntut untuk bisa mengoperasikanya. Perusahaan-perusahaan
perangkat lunak dengan segala daya dan kemampuannya, terus bersaing menciptakan dan
mengembangkan paket program yang baru untuk aplikasi tertentu.
SMA Negeri 25 Garut adalah salah satu satuan pendidikan dengan jenjang SMA di
Banyuresmi, Kec. Banyuresmi, Kab. Garut, Jawa Barat. Dalam menjalankan kegiatannya, SMA
Negeri 25 Garut berada di bawah naungan Kementerian Pendidikan dan Kebudayaan. Pada
perpustakaan SMA Negeri 25 Garut sistem informasi yang digunakan masih sangat sederhana.
Sistem tersebut masih banyak memiliki kelemahan, kelemahan-kelemahan tersebut antara lain
adalah Pengelolaan data buku dan peminjaman yang masih dilakukan secara manual, sehingga
memakan waktu dan bisa menyebabkan terjadinya kesalahan data. Selain itu, tidak adanya
sistem monitoring dan evaluasi kinerja perpustakaan sekolah berbasis data, sehingga sulit untuk
melakukan perbaikan dan pengembangan pada sistem informasi perpustakaan sekolah.
B. Identifikasi Masalah
Berikut adalah beberapa masalah yang mungkin terjadi pada sistem informasi pengolahan
database perpustakaan sekolah:
1. Pengelolaan data buku dan peminjaman yang masih dilakukan secara manual, sehingga
memakan waktu dan bisa menyebabkan terjadinya kesalahan data.
 2. Tidak adanya sistem monitoring dan evaluasi kinerja perpustakaan sekolah berbasis data,
sehingga sulit untuk melakukan perbaikan dan pengembangan pada sistem informasi
perpustakaan sekolah.
3. Kurangnya sistem keamanan pada sistem informasi perpustakaan, sehingga memungkinkan
terjadinya kebocoran data.

C. Tujuan Pengolahan Database Perpustakaan Pada SMA Negeri 25 Garut

Tujuan pengolahan database perpustakaan pada sekolah adalah untuk mengelola data dan
informasi perpustakaan secara efektif dan efisien, sehingga dapat mendukung kegiatan
operasional perpustakaan. Beberapa tujuan khusus dari pengolahan database perpustakaan pada
sekolah antara lain:
1. Mempercepat proses pelayanan dan manajemen perpustakaan, seperti peminjaman dan
pengembalian buku, pengelolaan koleksi buku, dan manajemen anggota perpustakaan.
2. Memudahkan monitoring dan evaluasi kinerja perpustakaan berbasis data, sehingga dapat
dilakukan perbaikan dan pengembangan pada sistem informasi perpustakaan.

Meningkatkan keamanan data perpustakaan, sehingga tidak terjadi kebocoran data atau serangan
siber pada sistem informasi perpustakaan.

D. Pembuatan Database dan Strukturnya

1. Pembuatan Database dan Insert Data

Langkah pertama membuka aplikasi XAMPP CONTROL PANEL lalu men klik start pada
Apache dan mysql lalu setelah itu mengklik Admin pada bagian mysql. Maka akan membuka
jendela dan aplikasi browser defaulta pada pc atau laptop lalu setelah itu mengklik NEW/BARU

Pada bagian kiri phpMyAdmin, setelah itu maka akan tampil sebuah form pengisian nama datbase
seperti pada Gambar. 1. pembuatan database.
 Gambar 1. pembuatan database

Setelah itu maka akan tampil sebuah form untuk membuat nama tabel dan jumlah field atau
kolom Gambar 2. Nama Tabel.

Gambar 2. Nama Tabel

Lalu mengisi form form field atau kolom tabel seperti pada Gambar 3. Field tabel

Gambar 3. Field tabel

Di atahap ini melakukan simpan dengan mengklik button atau tombol simpan atau save

2. Struktur database

Nama Database : perpustakaansman25garut

Nama Tabel : perpustakaan

Field Tabel :

No, Index INT, Auto Increment

kode_buku, primary key Char(4)

judul_buku Varchar(225)

pengarang text

penerbit text
 tahun_terbit date

kode_peminjaman Char(4)

tanggal_pinjam date

tempo_pengembalian date

denda INT(225)

3. Database dan Strukturnya Di PHP My Admin

Gambar 4. Struktur tabel perpus

Dalam tahap ini kita harus menentukan terlebih dahulu struktur database nya secara tertulis. Data
untuk menentukan kebutuhan field type data dari field dan Unik key dari field tersebut, lalu setelah
itu menerapkan dan pembuatan database strukturnya di XAMPP dengan sesuai struktur yang
sebelumnya di tentukan seperti pada Gambar4. Struktur tabel perpus

4. Insert data pada phpMyAdmin

Melakukan Insert data pada tabel perpus database perpustakaansman25garut dengan cara mengklik
opsi tombol tambahkan di mennu bar atas php my admin, seperti pada Gambar 4.1 tambah data
perpus
 Gambar 4.1 Tambah data perpus

E. Tampilan Program Aplikasi Berbasis Web

Dalam tahap ini di haruskan membuat file web php nya di dalam direktory nya htdocs
XAMPP guna untuk dapat mengakses local server nya Aplikasi XAMPP MySQL

Untuk caranya dengan sbb :

1. Membuka vs code

2. Klik FILE

3. Open Folder

4. Cari direktori data C

5. Lalu XAMPP

6. Lalu htdocs

7. Disini klik kanan lalu new - folder “ berinama folder ini untuk tempat penyimpanan project
web CRUD ini

8. Klik select folder

9. Untuk cara membuat file web nya, pada menu exploler di klik kanan lalu new file dan
setelah itu tinggal memasukan nama file seperti contoh “ index.php “ lalu tekan enter dan
akan terbuat sebuah file dengan format php, selanjutnya tinggal mengisi note di file tersebut
dengan sintax sintax web.

a. Membuat dulu file koneksi.php dengan berisikan sintax sbb

Langkah awal membuat file web php dengan nama file koneksi.php seperti pada
Gambar 5. Koneksi.php

Gambar 5. Koneksi.php

b. Membuat file index.php

Langkah kedua membuat file web php dengan nama file index.php seperti pada
Gambar 6. Index.php
 Gambar 6. Index.php

c. Hasil WEB dari Code file index.php

Berikut pada Gambar 7. tampilan web index

 Gambar 7. Tampilan web index

d. Membuat file web tambah.php untuk prosedur penambahan data baru

Langkah ketiga membuat file web php dengan nama file tambah.php seperti
pada Gambar 8. Tambah.php (a) dan Gambar 9. Tambah.php(b)

Image 8, Tambah.php (a)

 Image 9. Tambah.php(b)

e. Hasil WEB dari Code file Tambah.php

Berikut pada Image 10. tampilan web tambah

 Gambar 10. Tampilan web tambah

f. Membuat file tambah_aksi.php untuk tahap lakukan simpan data pada form
tambah.php ke dalam database perpustakan SMAN 25 Garut

Langkah keempat membuat file web php dengan nama file tambah_aksi.php
seperti pada Gambar 11. Tambah_aksi.php

Gambar 11. Tambah_aksi.php

g. Membuat file WEB hapus.php untuk melakukan prosedur hapus data pada tabel /
database perpustakaan SMAN 25 Garut

Langkah kelima membuat file web dengan nama file Hapus.php seperti pada
Gambar 12. Hapus.php

Gambar 12. Hapus.php

h. Membuat file WEB edit.php untuk melakukan Prosedur Update atau peng editan data
pada tabel database

Langkah keenam membuat file web php dengan nama file Edit.php seperti
pada Gambar 13. Edit.php
Gambar 13. Edit.php
i. Hasil dari File WEB edit.php

Berikut pada Gambar 14. tampilan web edit

Gambar 14. tampilan edit

j. Membuat file update.php untuk tahap lakukan update / edit data dan simpan data pada
form edit.php ke dalam database perpustakan SMAN 25 Garut

Berikut pada Gambar15. sintax web update.php

 Gambar 15.sintax web update.php

F. Pembahasan

Untuk keseluruhan field pada database perpustakaan sman 25 garut memiliki 10 field, dan
untuk jumlah banyaknya file WEB CRUD sebanyak 7 file

Setelah semuanya dibuat untuk database di XAMPP dan membuat file - file web nya, melakukan
tahap test atau akses WEB CRUD dengan

1. Akses link di Browser dengan cara menjalankan terlebih dahulu server aplikasi XAMPP
pada apache dan mysql dengan mengkilk start dan mengklik admin pada mysql

2. Lalu setelah itu membuka browser dan mengketikan atau memasukan link sbb

Localhost/ disetelah tanda garis miring memasukan nama folder yang dibuat untuk penyimpanan
file web yang berada di htdocs, seperti saya memakai nama CrudWeb maka Sbb localhost/CrudWeb
seperti pada Gambar 16. directory file web crud merupakan tempat saya menyimpan file - file web
 Gambar 16. directory file web crud

G. Program Pencarian Data

Pada tugas berlanjutan dengan tema pencarian data saya melalukan banyak perubahan, mulai
dari tampilan dan warna yang saya pakai dan juga dalam file index.php, saya pakain untuk
halaman home dari web Crud Perpustakaan SMAN 25 GARUT sebelumnya, untuk hasilnya
sebagai berikut seperti pada Gambar 17.home index
 Gambar17. Home Index

Diatas merupakan hasil out dari file index.php yang saya buat, disini saya memakai metode
database viewer dan tombol button untuk mengarahkan ke halaman web database1 untuktabel
pertama yaitu tentang perpustakaan yang saya buat pertama dalam tugas database, dan pada web
database1 saya memakai metode interuksi pencarian 1 kriteria dimana dalam web ini saya hanya
melakukan pencarian data pada field Judul Buku saja, berikut adalah hasilnya pada Gambar 18.
Database1.php

Gambar 18. Database1.php

Dan untuk hasil dari intruksinya saya mencari data sbb yang tertera pada Judul Buku seperti pada
Gambar 19. Database1.php interuksi
 Gambar 19. Database2.php interuksi

Dan berikut ini merupakan hasil jika saya melakukan pencarian selain Field Judul Buku seperti
pada Gambar 20. Database2.php interuksi salah

Gambar 20. Database2.php interuksi salah

lalu pada hasil web tambah data saya juga melakukan perubahan dengan hasil sebagai berikut
seperti pada Gambar 21. Tambah data

Gambar 21. Tambah data

Lalu pada hasil web edit.php sebagai berikut seperti pada Gambar 22. Edit data

Gambar 22. Edit data

H. Membuat Tabel Baru

Pada bagian ini saya membuat tabel database baru yang bernamakan (pengunjung) seperti pada
Gambar 23. Data pengunjung

Gambar 23. Data pengunjung

I. Code atau Listing dari web nya

Di dalam code listing hapus.php saya mamakai yang dulu dan hanya menambahkan metode hapus
data untuk tabel ke 2 seperti pada Gambar 24. Hapus .php

Gambar 24. Hapus .php

 Dan dalam file tambah_aksi juga saya memakai Gambar 25. Update .php

Gambar 25. Update .php

Kemudian dibawah ini adalah code atau listing dari tabel database pertama untuk 1 kriteria Gambar
26. Database1.php untuk tabel pertama lebih dari 1 kriteria
Gambar 26. Database1.php untuk tabel pertama lebih dari 1 kriteria
Gambar 27. Database2.php untuk tabel pertama 1 kriteria
Gambar 28. Database3.php untuk tabel kedua 1 kriteria
Gambar 29 Database4.php untuk tabel kedua lebih dari 1 kriteria
Gambar 30. edit.php untuk tabel ke satu
Gambar 31.edit1.php untuk tabel ke dua
Gambar 32. index.php
Gambar 33. Tambah.php untuk tabel pertama
Gambar 34 Tambah2.php untuk tabel kedua
 Gambar 35 Tambah akshi.php untuk tabel pertama dan kedua

J. Hasil Web Crud Pencarian Lebih dari 1 Kriteria

dari file listing web tabel pertama 26. Database1.php untuk tabel pertama lebih dari 1 kriteria dan
tabel kedua kedua saya Gambar 29 Database4.php untuk tabel kedua lebih dari 1 kriteria. Pada
Gambar 36 Hasil dari tabel pertama dan kedua leboh dari 1 kriteria
 Gambar 36 Hasil dari tabel pertama dan kedua lebih dari 1 kriteria

Dan berikut di bawah ini ialah merupakan dari hasil tabel pertama yang saya buat pencarian lebih
dari 1 kriteria, dan untuk melakukan test saya akan tampilkan di gambar ke 38 sampai ke gambar 40

Gambar 37 Hasil dari tabel pertama lebih dari 1 kriteria

 Gambar 38 Hasil dari tabel pertama lebih dari 1 kriteria – mencari field kode buku

Gambar 39 Hasil dari tabel pertama lebih dari 1 kriteria – mencari field kode peminjaman
 Gambar 40 Hasil dari tabel pertama lebih dari 1 kriteria – mencari field judul buku

Dan untuk tabel kedua pun saya melakukan test yang akan saya tampulkan di gambar 41 sampai
gambar 44. Dengan judul tabel pengunjung, yaitu sebuah tabel yang saya buat untuk form pengisian
daftar pengunjung yang hendak berkunjung di perpustakaan SMAN 25 GARUT

Gambar 41 Hasil dari tabel kedua lebih dari 1 kriteria – mencari field kode pengunjung
Gambar 42 Hasil dari tabel kedua lebih dari 1 kriteria – mencari field kode pengunjung

Gambar 43 Hasil dari tabel kedua lebih dari 1 kriteria – mencari field nama pengunjung
 Gambar 44 Hasil dari tabel kedua lebih dari 1 kriteria – mencari field instansi

K. Membuat Frame
Dalam HTML, elemen <frame> digunakan sebelumnya untuk membagi jendela browser
menjadi beberapa bagian yang dapat menampilkan dokumen HTML yang berbeda secara
independen. Namun, penggunaan <frame> telah usang dalam HTML versi terbaru (HTML5)
dan tidak direkomendasikan lagi karena beberapa alasan, seperti masalah aksesibilitas,
pengindeksan oleh mesin pencari, dan pengembangan web responsif yang lebih baik dengan
teknik lain seperti CSS Grid atau Flexbox.
Elemen <frame> memiliki beberapa atribut, seperti src untuk menentukan URL dokumen yang
akan dimuat di dalam frame tersebut, name untuk memberikan nama ke frame agar dapat
diakses melalui hyperlink atau dalam scripting, dan atribut lain untuk mengatur sifat tampilan
dan perilaku frame.
Pernyataan yang Anda sebutkan, "frame left nested top," mungkin merujuk pada salah satu cara
untuk menyusun elemen <frame> di dalam sebuah dokumen HTML yang menggunakan
kerangka pemosisian nested atau bertingkat. Namun, sebagaimana disebutkan sebelumnya,
penggunaan <frame> tidak lagi direkomendasikan dalam pengembangan web karena
keterbatasan dan masalah yang timbul.
Berikut adalah langkah langkah dalam pembuatan frame pada aplikasi dreamweaver cs6
1. Membuka aplikasi dreamweaver dengan cara, klik start window lalu cari
dreamweaver cs6, seperti pada Gambar 45. Aplikasi dreamweaver cs6

Gambar 45. Aplikasi dreamweaver cs6

2. Memilih HTML Pada opsi Create new dengan cara mengkliknya, seperti pada
Gambar 46. Create new project dreamweaver

Gambar 46. Create new project dreamweaver

3. Setelah itu akan tampil new blank seperti pada Gambar 47. New blank project
dreamweaver

Gambar 47. New blank project dreamweaver

4. Menambahkan frame left nested top pada project dengan cara seperti pada Gambar
48. Menambahkan frame HTML left nested top

Gambar 48. Menambahkan frame HTML left nested top

5. Berikut ini merupakan dari blank frame left nested top seperti pada Gambar 49.
Frame left nested top
Di dalam frame ini terdapat 3 frame yang sudah tersedia dan untuk klasifikasinya :
Kiri sebagai frame navigasi berupa tombol button atau juga bisa berupa kolom
search, namun lebih layaknya sebagai frame navigasi sedangkan untuk Kanan atas
adalah frame yang biasanya digunakan untuk sebuah judul dari sub judul, dan yang
terakhir yaitu frame kanan bawah sebagai main frame yang akan di gunakan sebagai
wadah atau penampung dari tujuan tujuan frame navigasi, bisa berupa tampilan dari
web atau lainnya

Gambar 49. Frame left nested top

6. Melakukan pengisian sesuai dengan kebutuhan framenya masing masing seperti pada
Gambar 50. Frame sub menu perpustakaan
 Gambar 50. Frame sub menu perpustakaan

7. Menambahkan sebuah gambar pada main frame seperti pada Gambar 51.
Menambahkan gambar pada main frame

Gambar 51. Menambahkan gambar pada main frame

Pada langkah ini saya melakukan penyimpanan gambar yang akan saya spakai sebagai
profile perpustakaan di dalam direktori htdocs : data c /xampp / htdocs / CrudWeb1 / , agar gambar
yang saya pakai bisa tampil dan ke serrver oleh php myadminnya seperti pada Gambar 52.
Melakukan insert Gambar

Gambar 52. Melakukan insert Gambar

Lalu akan tampil seperti berikut ini untuk menambahkan tag link dari gambar tersebut,
pada bagian ini bebas untuk mengisinya. Seperti pada Gambar 53. Tag link gambar

Gambar 53. Tag link gambar

 Setelah tahap melakukan penambahan Gambar disini tinggal melakukan custom
ukuran gambar pada bagian bawah properties seperti pada Gambar 54. Hasil gambar

Gambar 54. Hasil gambar

8. Melakukan Save all

a. Pada tahap ini melakukan save all dengan cara mengklik file – save all dan pada
bagian pertama akan melakukan save semua Set Frame seperti pada Gambar 55.
Save semua frame left nested top
b. Save frame kanan sebagai frame sub menu home seperti pada Gambar 56. Save
frame sub menu home
c. Save frame atas sebagai frame sub judul seperti pada Gambar 57. Save frame sub
judul
d. Save frame kiri sebagai frame navigasi seperti pada Gambar 58. Save frame
navigasi
Gambar 55. Save semua frame left nested top

Gambar 56. Save frame sub menu home

 Gambar 57. Save frame sub judul

Gambar 58. Save frame navigasi

9. Membuat link pada komponen home, managemen perpus dan lainnya

Pada tahap ini saya melakukan blok pada Home lalu klik kanan – make link –
memilih file sub menu home.html yang sudah saya buat sebelumnya, seperti pada
Gambar 59. Melakukan make link pada home dan Gambar 60. Memilih target link

Gambar 59. Melakukan make link pada home

Gambar 60. Memilih target link

 Setelah tahap ini melakukan penentuan target frame dari link button home dengan cara
klik kanan pada home – target link – main frame, seperti pada Gambar 61. Melakukan target frame
home ke main frame

Gambar 61. Melakukan target frame home ke main frame

10. Melakukan make link

Untuk cara nya pada komponen navigasi laiinya sama halnya seperti diatas cuman saat
memikih taget link kita memilih file index web .php yang sudah jadi, pada kali ini saya
memakai database1.php, database2.php, database3.php dan database4.php seperti pada
Gambar 62. Hasil make link menyambungkan ke link tugas sebelumnya
 Gambar 62. Hasil make link menyambungkan ke link tugas sebelumnya

11. Melakukan make link