Oke guys.. kali ini saya akan menshare bagaimana cara membuat project perpustakaan berbasis web tanpa database.
Cekidot...!
Buat folder di xampp/htdocs/perpus
Buat folder di xampp/htdocs/perpus
- Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<marquee scrollamount="3"><h2>Selamat Datang Di Perpustakaan Universitas Bina Sarana Informatika</h2></marquee>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="login.php">Login</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<center>Membuat Design Web Responsive</center><br>
<div class="gambar" style="width: 100%">
<img src="images/webresponsive.jpg" height="70%" width="100%">
</div>
<p><a href="webresponsive.php">Baca Selengkapnya >> </a></p>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<ul>
<li><a href="webdesign.php">Web Design</a></li>
<li><a href="pemrograman.php">Pemrograman</a></li>
<li><a href="database.php">Database</a></li>
</ul>
</div>
</div>
<div class="footer">
<p style="text-align: center !important">Copyright © 2018 Belajar CSS Responsive</p>
</div>
</div>
</body>
</html>
- Login.php
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/style_login.css">
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<br>
<center><h2>Silahkan Anda Login Terlebih Dahulu</h2></center>
<div class="login">
<form action="home.php" method="post" onSubmit="return validasi()"><br>
<div>
<label>Username</label>
<input type="text" name="username" id="username"/>
</div>
<div>
<label>Password</label>
<input type="password" name="password" id="password"/>
</div>
<div>
<center>
<input type="submit" value="Login" class="tombol">
<input type="reset" value="Batal" class="tombol">
</center>
</div>
</form>
</div>
</body>
</html>
- Home.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?php
$user = $_POST['username'];
$pass = $_POST['password'];
?>
<div class="container">
<h4>Anda Berhasil Login Dengan Nama : <?php echo $user;?></h4>
<div class="header">
<marquee scrollamount="3"><h2>Perpustakaan Universitas Bina Sarana Informatika</h2></marquee>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="login.php">Logout</a></li>
<li><a href="#">Home</a></li>
<li><a href="daftarbuku.php">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<center>Membuat Design Web Responsive</center><br>
<div class="gambar" style="width: 100%">
<img src="images/webresponsive.jpg" height="70%" width="100%">
</div>
<p><a href="webresponsive.php">Baca Selengkapnya >> </a></p>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<ul>
<li><a href="webdesign.php">Web Design</a></li>
<li><a href="pemrograman.php">Pemrograman</a></li>
<li><a href="database.php">Database</a></li>
</ul>
</div>
</div>
<div class="footer">
<p style="text-align: center !important">Copyright © 2018 Belajar CSS Responsive</p>
</div>
</div>
</body>
</html>
- DaftarBuku.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daftar Buku</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<marquee scrollamount="3"><h2>Daftar Buku di Universitas Bina Sarana Informatika</h2></marquee>
</div>
<div class="main">
<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/webresponsive.jpg" height="70%" width="100%">
<p><a href="webresponsive.php">Membuat Design Web Responsive</a></p>
</div>
</div>
<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/webdesign.jpg" height="70%" width="100%">
<p><a href="webdesing.php">Mendesain Web Dengan Dinamis</a></p>
</div>
</div>
<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/database.jpg" height="70%" width="100%">
<p><a href="database.php">Tutorial Belajar Mahir Database MySQL</a></p>
</div>
</div>
<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/pemrograman.jpg" height="70%" width="100%">
<p><a href="pemrograman.php">Kumpulan Script Bahasa Pemrograman Terbaru</a></p>
</div>
</div>
</div>
<div class="footer">
<p style="text-align: center !important">Copyright © 2018 Belajar CSS Responsive</p>
</div>
</div>
</body>
</html>
Untuk file css disimpan dalam folder baru dalam folder project perpus/css. Terdapat 2 file css yaitu style.css berguna untuk memperindah tampilan halaman web dan style_login.css khusus untuk tampilan halaman login.
Baik cukup disitu script dalam membuat project perpustakaan. Sekian dan terima kasih :)
- style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #ffbf80;
font-family: 'Verdana', arial, sans-serif;
font-size: 15px;
}
p{
margin-bottom: 20px;
line-height: 1.5em;
text-align: justify;
}
h3{
margin-bottom: 20px;
border-bottom: 1px solid #aaa;
}
a{
text-decoration: none;
color: #333;
}
a:hover{
color: #666;
}
.container{
max-width: 80%;
margin: 20px auto;
background: #ff9933;
overflow: hidden;
padding: 10px;
}
.header{
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
background: #fff;
}
/* main */
.left{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background: #fff;
}
.left ul{
list-style-type: none;
}
.left ul li{
display: block;
}
.left ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
font-color: #D3D2ED;
}
.left ul li a:hover{
color: #461AF3;
}
.middle{
width: 47%;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background: #fff;
}
.middle img{
max-width: 100%;
height: auto;
}
.middle a{
font-weight: bold;
}
.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: right;
background: #fff;
}
.right ul{
list-style-type: none;
}
.right ul li{
display: block;
}
.right ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
}
.right ul li a:hover{
color: #461AF3;
}
.footer{
clear: both;
border: 1px solid #dedede;
padding: 15px;
margin: 10px;
background: #fff;
}
/*MEDIA QUERIES ( Responsive)
******************************************/
@media screen and(max-width: 959px){
#container{
width: 100%;
}
#left-column{
width: 70%;
}
#right-column{
width: 30%;
}
img{
width: 100%;
}
}
@media screen and(max-width: 1080px){
.container{
width: 100%;
}
.left{
width: 25%;
}
.middle{
width: 68%;
float: right;
}
.right{
clear: both;
padding: 1% 4%;
width: auto;
float: none;
background: #D6CCFE;
}
img{
width: 100%;
}
}
@media screen and(max-width: 4000px){
.container{
width: 100%;
}
.left{
width: 25%;
}
.middle{
width: 68%;
float: right;
}
.right{
clear: both;
padding: 1% 4%;
width: auto;
float: none;
background: #D6CCFE;
}
img{
width: 100%;
}
}
/* 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;
}
img{
width: 100%;
}
}
- Style_login.css
body{
background: #3498db;
font-family: sans-serif;
}
h2{
color: #fff;
}
.login{
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label{
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="password"],
textarea{
padding: 8px;
width: 95%;
background: #c0c0c0;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol{
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
margin: 20px 0px;
}
Berpindah pada javascript disimpan pada folder baru dalam folder perpus/js
- Login.js
function validasi() {
var username = document.getElementBlyd("username").value;
var password = document.getElementBlyd("password").value;
if (username != "" && password != "") {
return true;
}else{
alert("Username dan Password harus di isi !");
return false;
}
}
Baik cukup disitu script dalam membuat project perpustakaan. Sekian dan terima kasih :)
Nama : Willy Permana
Nim : 12160209
Kelas : 12.5D.11
No comments:
Post a Comment