Tugas: Membuat Web Perpustakaan dengan HTML dan CSS

Kali ini Saya akan membagikan script untuk membuat website sederhana yang bertemakan perpustakaan. Selain itu tampilan websitenya responsive menyesuaikan ukuran layar dan untuk web dibawah ini tidak perlu menggunakan database.

1. Membuat Index halaman utama

Halaman Index

Nama file : index.php

2. Membuat Form Login ( 2 file php )

Form login

Nama file: login.php

<html>
<head>
<title>Login Anggota</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<form method="post" action="login_admin.php">

<div class="tampilan">
<div class="kepala">
<div class="logo"></div>
<h2 class="judul">Login Anggota</h2>
</div>
<div class="artikel">

<div class="kesalahan">
<?php
if(isset($_GET["login_error"])){
echo "Username atau password salah";
}
?>
</div>

<div class="kotak">
<p><input type="text" name="username" value="" placeholder="Masukan Username Anda"></p>
<p><input type="password" name="password" value="" placeholder="Masukan Password Anda"></p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>
</div>

</div>
</div>
</body>
</html>

Nama file: login_admin.php

<?php

ob_start();
session_start();
ob_end_clean();

$username=$_POST["username"];
$password=$_POST["password"];

if($username=="admin" AND $password=="admin")
{
$_SESSION["username"]=$username;
header("location:home.php");
}else{
header("location:login.php?login_error");
}
?>

3. Membuat Halaman Home Setelah Login

Halaman home

Nama file: home.php

4. Membuat Halaman Daftar Buku

Daftar buku

Nama file: daftar_buku.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan Online</title>
</head>
<body>

<div id="container">
<div class="header"><img src="images/logo.png" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
<h4>Selamat Datang, Tiyo</h4>

<div class="main">
<div class="left">
<h3 align="center">MENU</h3>
<ul>
<li><a href="http://localhost/perpus/index.php">Logout</a></li>
<li><a href="http://localhost/perpus/home.php">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>

<br>

<h3 align="center">BUKU TERPOPULER</h3>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Database</a></li>
</ul>
</div>
</div>

<div class="middle2">
<h2 align="center">DAFTAR BUKU</h2><br>
<div align="center">
</div>

<div class="buku">
<div class="foto">
<img src="images/rahvayana.jpg">
<div class="judul">Rahvayana - Aku Lala Padamu</div>
<div class="penulis">Penulis: Sujiwo Tejo</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/dermaga.jpg">
<div class="judul">Dermaga Sastra Indonesia</div>
<div class="penulis">Penulis: Jamal D. Rahman</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/android.jpg">
<div class="judul">Pemrograman Android & Database</div>
<div class="penulis">Penulis: Abdul Kadir</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/seni.jpg">
<div class="judul">Sebuah Seni Untuk Bersikap Bodo Amat</div>
<div class="penulis">Penulis: Mark Manson</div>
</div>
</div>
</div>

<div class="middle2">
<div class="buku">
<div class="foto">
<img src="images/web.jpg">
<div class="judul">Menjadi Web Entrepreneur, Siapa takut?</div>
<div class="penulis">Penulis: Su Rahman</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/mikrotik.jpg">
<div class="judul">Jaringan Komputer Berbasis Mikrotik +Cd</div>
<div class="penulis">Penulis: Iwan Sofana</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/pemograman.jpg">
<div class="judul">Buku Sakti Pemrogaman Web</div>
<div class="penulis">Penulis: Didik Setiawan</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/desain.jpg">
<div class="judul">Mahir Desain Grafis dengan CorelDraw</div>
<div class="penulis">Penulis: Jubilee Enterprise</div>
</div>
</div>

</div>
</div>
<div class="footer"><p align="center">Copyright © 2018 - Belajar CSS Responsive</a></p>
</div>
</body>
</html>

5. Kode CSS untuk Mengatur Tampilan Web

Nama file: Style.css

*{
padding :0 ;
margin :0 ;
}

body{
width: 100%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
background-color: #dedede;
}

.marquee{
background-color: #ffffffd7;
color: #0006ff
}

p{
margin-bottom: 20px;
line-height: 1.5em;
}

h2{
font-size: 17px;
font-weight: 600;
}

h3{
font : #fff;
font-size: 17px;
padding-bottom: 10px;
border-bottom: 4px solid #fff;
}

h4{
font : white;
padding-top: 10px;
text-align: left;
font-size: 15px;
}

/*Halaman Buku*/

.buku {
padding: 0 6px;
margin-right: 10px;
float: left;
border:1px solid #dedede;
width: 23%;
}

.gallery:hover {
}

.foto img {
padding:5px 0 5px 0;
width: 100%;
height: 250px;
}

.judul {
font-size: 13px;
font-weight: 600;
padding:0 0 3px 0;
text-align: left;
}

.penulis{
font-size:10px;
padding-bottom: 5px;
}

* {
box-sizing: border-box;
}

a{
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: inherit;
font-size: 20px;
color: #d4d2db;
}

a:hover{
color: #000;
}

#container{
max-width: 1140px;
text-align: : center;
background: #fff;
overflow: hidden;
border:0px solid #d9d9d9;
margin : 0px 90px;
padding:20px 20px 20px 20px;
}

.header{
border-radius: 10px 10px 0 0 ;
padding: 10px 0 0 10px;
text-align : center;
background-image: url(../images/header.jpg);
}

.header h1{
font-size: 40px;
color:#fff;
padding-bottom: 10px;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
text-align:center;
}

/* main */

.left{
width: 280px;
color:#fff;
border: 1px solid #dedede;
padding: 10px;
margin: 10px 10px 10px 0px;
float: left;
background-color: #281e5a;
}

.left ul{
list-style-type: none;
}

.left ul li{
display: block;
}

.left ul li a{
display: block;
font-size: 17px;
border-bottom: 1px dotted #d4d2db;
margin-bottom: 10px;
padding: 10px 5px;
font: #64bed4;
}

.left ul li a:hover{
color: #ca1414 ;
}

.middle{
width: 500px;
border: 1px solid #dedede;
padding: 5px;
margin: 10px;
float: left;
}

.middle img{
background-image: img src="images/..vizta.jpg";
max-width: 100%;
height: auto;
}

.middle a{
font-weight: bold;
}

.middle2{
width: 790px;
height:100%;
padding: 5px;
margin: 10px;
float: left;
}

.middle2 a{
font-weight: bold;
}

.right{
width: 280px;
color: #fff;
border: 1px solid #dedede;
padding: 10px;
margin: 10px 0 10px 10px;
float: right;
background-color: #281e5a;
}

.right ul{
list-style-type: none;
}

.right ul li{
display: block;
}

.right ul li a{
display: block;
font-size: 17px;
border-bottom: 1px dotted #d4d2db;
margin-bottom: 10px;
padding: 10px 5px;
}

.right ul li a:hover{
color: #ca1414;
}

#footer{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 20px;
color: #6813c9;
clear: both;
border: 1px solid #dedede;
padding: 15px;
}

@media screen and(max-width:995px){
#container{
width: 100%;
}
#left-columm{
width: 70%;
}
#right-columm{
width: 30%;
}
img{
width: 100%;
}
}

/* MEDIA QUIRIES (Responsive)***********/

@media screen and (max-width:1140px){
.container{
width: 100%;
}
.left{
width: 25%;
background: #0c7575d7;
}
.middle{
width: 68%;
float: right;
}
.middle2{
width: 90%;
float: right;
}

.right{
clear: both;
padding: 1% 4%;
width: auto;
float: none;
background: #0c7575d7;
}
}

/* Untuk ukuran layar 700px kebawah */

@media screen and (max-width:780px){
.header,
.footer{
text-align: center;
}
.left{
width: auto;
float: none;
}

.middle{
width: auto;
float: none;
}

.right{
width: auto;
float: none;
}
}

Nama file: login.css

e.cssCSS

*{
padding: 0;
margin: 0;

}

body{
background-image: url(../images/login.jpg);
font-family: verdana;
}

.tampilan{
background: #fff;
width: 400px;
margin: 100px auto 0;
border-radius: 16px;
min-height: 256px;
overflow: hidden;
}
.kepala{
background: #281e5a;
padding: 10px 22px;
height: 60px;
}

.logo{
background-image: url(../images/logo.png);
background-position: center;
background-size: 60px;
width: 60px;
height: 60px;
float: left;
margin-right: 20px;
}

.kepala h2.judul{
color: #fff;
font-size: 25px;
font-weight: normal;
text-align: left;
line-height: 20px;
}

.kesalahan{
font-size:20px;
color: #ff0000;
padding: 10px 0 0 0;
text-align: center;
}

.artikel{
padding:10px 22px 0;
color: #808080;
}

.artikel div.kotak{
margin: 16px 0;
}

.kotak input[type="text"],
.kotak input[type="password"]{
font-size: 15px;
width: 100%;
height: 40px;
padding: 0 10px;
background: #eeeeee;
border:none;
color: #808080;
}

.kotak input[type="submit"]{
background: #ff5555;
font-size:18px;
margin: 0 0 0 130px;
border-radius: 5px;
color: #fff;
cursor: pointer;
}

D Prasetiyo

Techno enthusiast dan penulis amatir
di Hapeplus.com

10 comments

Balas

Unknown

Mei 06, 2019

Mas minta img nya sekalian dong

Aji Rifki

Juni 26, 2019

Min minta img nya sekalian dong

tolong saya dijawab min ini penting demi tugas unversitas saya tolong saya dikasih!!!!!!!!!

MohFirdausFirmansyah

Oktober 19, 2019

nama di llocalhost nya apa?

Muhammad Sirat Zailani

Februari 09, 2020

Assalamu alaikum mas,mau tanya ni.Punya saya ketika dijalan kan di bagian login nya kok ada yang error ya.
katanya dibaris 13 dan 15.Mohon pencerahannya ,trima kasih