Nama : Ahmad dzaky

Kelas : 11 SIJA A

No : 03

Resume Project SaaS: E-Library

1. Database untuk perpustakaan

a. Buat database dengan nama perpustakaan
Buat dengan perintah create database perpustakaan;

b. Buat tabel di database untuk menampung data dari perpustakaan

Buat dengan perintah create table nama_tabel(field1
tipe_data(lebar),field2 tipe_data(lebar), dan seterusnya);
I. Tabel user

II. Tabel anggota

III. Tabel buku

 IV. Tabel kategori

V. Tabel penerbit

VI. Tabel peminjaman

VII. Tabel detail_peminjaman

 VIII. Tabel pengembalian

c. Relasikan tabel tabel yang telah dibuat

2. Web untuk Perpustakaan

a. Buat folder untuk menampung front end dari perpustakaan
Buat di C:>laragon>www>buat folder perpustakaan>buat folder lainnya
b. Buat codingan untuk perpustakaan
I. Buat file koneksi dalam folder perpustakaan

II. buat file tampilan login dalam folder perpustakaan

III. buat file proses-login dalam folder perpustakaan

IV. buat file logout dalam folder perpustakaan

V. buat file dashboard dalam folder admin

VI. buat file css dalam folder css
*{
margin: 0;
padding: 0;
}

.main{
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
background-position: center;
background-size: cover;
height: 100vh;
background-image: url('https://d1csarkz8obe9u.cloudfront.net/posterpreviews/library-
zoom-background-design-template-18c11f933ef10cc76543f2b560183b53_screen.jpg?
ts=1588617711');
}

.navbar{
width: 1200px;
height: 75px;
margin: auto;
}

.icon{
width: 200px;
float: left;
height: 70px;
}

.logo{
color: white;
font-size: 35px;
font-family: Arial;
padding-left: 20px;
float: left;
padding-top: 10px;
margin-top: 5px
}

.menu{
width: 400px;
float: left;
height: 70px;
}

ul{
float: left;
display: flex;
justify-content: center;
align-items: center;
}

ul li{
list-style: none;
margin-left: 62px;
margin-top: 27px;
font-size: 14px;
}

ul li a{
text-decoration: none;
color: #fff;
font-family: Arial;
font-weight: bold;
transition: 0.4s ease-in-out;
}

ul li a:hover {
display: block;
color: gold;
background: #222;
box-shadow: inset 0px 0px 5px #000;
}

/* dropdown1 */
ul li .dropdown1{
display: none;
}
ul li:hover .dropdown1{
display: block;
background: grey;
position: absolute;
padding: 5px;
}
ul li:hover .dropdown1 li{
display: block;
}

.search{
width: 330px;
float: left;
 margin-left: 270px;
}

.srch{
font-family: 'Times New Roman';
width: 200px;
height: 40px;
background: transparent;
border: 1px solid white bold;
margin-top: 13px;
color: white;
border-right: none;
font-size: 16px;
float: left;
padding: 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

.btn{
width: 100px;
height: 40px;
background: white;
border: 2px solid white;
margin-top: 13px;
color: #000;
font-size: 15px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: 0.2s ease;
cursor: pointer;
}
.btn:hover{
color: gold;
}

.btn:focus{
outline: none;
}

.srch:focus{
outline: none;
}

.content{
width: 1200px;
height: auto;
margin: auto;
color: white;
position: flex;
}

.content .par{
padding-left: 20px;
padding-bottom: 25px;
font-family: Arial;
letter-spacing: 1.2px;
line-height: 30px;
}

.content h1{
font-family: 'Times New Roman';
font-size: 50px;
padding-left: 20px;
margin-top: 9%;
letter-spacing: 2px;
}

.content .cn{
width: 160px;
height: 40px;
background: white;
border: none;
margin-bottom: 10px;
margin-left: 20px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
transition: .4s ease;

.content .cn a{
text-decoration: none;
color: #000;
transition: .3s ease;
}

.cn:hover{
background-color: white;
}

.content span{
color: white;
font-size: 65px
 }

.form{
width: 250px;
height: 380px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6)50%,rgba(0,0,0,0.6)50%);
position: absolute;
top: 100px;
left: 870px;
transform: translate(0%,-5%);
border-radius: 10px;
padding: 25px;
}

.form h2{
width: 220px;
font-family: sans-serif;
text-align: center;
color: #000;
font-size: 22px;
background-color: white;
border-radius: 10px;
margin: 2px;
padding: 8px;
}

.form input{
width: 240px;
height: 35px;
background: transparent;
border-bottom: 1px solid white;
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 15px;
letter-spacing: 1px;
margin-top: 30px;
font-family: sans-serif;
}

.form input:focus{
outline: none;
}

::placeholder{
color: white;
font-family: Arial;
}

.btnn{
width: 240px;
height: 40px;
background: white;
border: none;
margin-top: 30px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
color: wheat;
transition: 0.4s ease;
}
.btnn:hover{
background: #fff;
color: #000;
}
.btnn a{
text-decoration: none;
color: #000;
font-weight: bold;
}
.form .link{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding-top: 20px;
text-align: center;
}
.form .link a{
text-decoration: none;
color: white;
}
.liw{
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
}
footer{
padding: 30px 0;
color: gold;
text-align: center;
}
.container{
width: 80%;
margin: 0 auto;
}
3. Hasil
Tampilan login

Setelah login

4. Kekurangan
Mungkin untuk saat ini sampai itu saja. Saya masih belum membuat tombol untuk logout, untuk
input atau drop anggota, buku, penerbit, dan kategori. Sedangkan untuk transaksi peminjaman
dan pengembalian buku saya masih kesulitan untuk memahami dan membuatnnya.
5. kesimpulan