Praktek Minggu 1

Pemrograman Website dan Perangkat Bergerak
Membuat Login dan Dashboard Admin Bagian 1
Buatlah Project Folder di htdocs dengan nama progweb_nis kalian

Didalam Project buatlah folder css dan html
Buatlah login1.html dengan script dibawah ini.
<html>
<head>
<title>Login Admin</title>
<link rel="stylesheet" href="../css/login.css">
<script>
function auth(){
var myform = document.loginn;
if(myform.username.value=="admin" &&
myform.pass.value=="admin"){
alert("Berhasil Login sebagai admin");
load("dashboard.html");
}else{
alert("Username atau password ada yang
salah");
}
}
</script>
</head>
<body>
<div class="login">
<h2> Form Login </h2>
<form action="#" name="loginn">
<div class="input-group">
<input type="text" name="username" required="">
<span>Username</span>
</div>
<input type="password" name="pass" required="">
<span>Password</span>
</div>
<input type="submit" name="submit"
value="Login" onclick="auth()">
</div>
</form>
</div>
</body>
</html>
Kemudian buatlah login2.php dengan script dibawah ini.
<html>
<head>
<meta charset="utf-8">
<title>Login Admin</title>
<link rel="stylesheet" type="text/css"
href="../css/stylelogin.css">
</head>
<body>
<div class="center">
<h1>Login</h1>
<form action="#" method="post">
<div class="txt_field">
<input type="text" required="">
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required="">
<span></span>
<label>Password</label>
</div>
<div class="forgot">Forgot Password?</div>
<input type="submit" value="Login">

</form>
</div>
</body>
</html>
Kemudian di dalam folder css buatlah style dari kedua login

Untuk login1 buatlah style dengan nama login.css dengan script dibawah ini.
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
height: 600px;
background-color: cyan;
align-items: center;
font-family: sans-serif;
}
.login{
background-color: #fff;
width: 350px;
text-align: center;
padding: 40px;
box-sizing: border-box;
border-radius: 10px;
}
.login h2{
margin: 0 0 20px;
width: 100%;
margin-bottom: 25px;
}
.login .input-group{
position: relative;
width: 100%;
margin-bottom: 25px;
}
.login .input-group input{

height: 50px;
width: 100%;
padding: 0 20px;
font-size: 10px;
border: 3px solid black;
}
.login .input-group span{

position: absolute;
top: 12px;
left: 20px;
padding: 0px;
text-transform: capitalize;
background-color: #fff;
transition: 0.5px;
}
.login .input-group input:focus ~ span,

.login .input-group input:valid ~ span{
top: -15px;
left: 20px;
font-size: 12px;
background-color: yellow;
padding: 2px 4px;
border: 1px solid #000;
border-radius: 5px;
}
.login .input-group input[type="submit"]{

background-color: grey;
border: none;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
width: 35%;
transition: 0.5;
}
.login .input-group input[type="submit"]:hover{

width: 100%;
background-color: rgba(255,0,0,0.5);
color: yellow;
}
Untuk style dari login 2 dengan nama stylelogin.css dengan script dibawah ini.
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(120deg,#2980b9,#8e44ad);
height: 100vh;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
background: white;
}
.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form{
padding: 0 40px;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 100px;
height: 2px;
background-color: #2691d9;
transition: .5s;
}
.txt_field input:focus ~ label,

.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,

.txt_field input:valid ~ span::before{
width: 100%;
}
.forgot{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.forgot:hover{
text-decoration: underline;
}
input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
Kemudian buatlah dashboard.php dengan script berikut,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">

<title>admin Template</title>


<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.m
in.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">


href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Anton"
rel="stylesheet">
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" href="../css/admin.css">

</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dumet School</a>
</div>
</nav>
<aside class="sidebar">
<menu>
<ul class="menu-content">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li>
<a href="#"><i class="fa fa-cube"></i> <span>Data
Master</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul>
<li><a href="">Merk</a></li>
<li><a href="">Kategori</a></li>
<li><a href="">Produk</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-shopping-basket"></i>
<span>Pembelian</span></a></li>
</ul>
</menu>
</aside>
<section class="content">
<div class="inner">
<p>
Dashboard Admin
</p>
</div>
</section>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.j
s"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min
.js" integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script>
$("menu li > a").click(function(e){
$("menu ul ul").slideUp(),$(this).next().is(":visible") ||
$(this).next().slideDown(),e.stopPropagation()
});
</script>
</body>
</html>
Dan untuk bagian script CSS buatlah di dalam folder css dengan nama admin.css dengan script
berikut.
body{
font-family: 'Quicksand', sans-serif;

}
.wrapper{
width: 100%;
height: 100%;
}
.navbar{
margin-bottom: 0;
}
.sidebar{
width: 100%;
height: 100%;
background: #293949;
position: absolute;
z-index: 100;
}
ul{
padding: 0;
margin-left: -40px;
}
ul li{
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
ul li a{
text-decoration: none;
color: #aeb2b7;
display: block;
padding: 19px 0px 18px 25px;
transition: all 200ms ease-in;
}
ul li a:hover{
color: #1abc9c;
}
ul li a:visited{
color: #fff;
}
li li a span{
display: inline-block;
}
ul ul{
display: none;
margin:0px;
}
ul li a .fa-angle-down{
margin-right: 10px;
}
/*apabila lebar min 768px*/
@media(min-width: 768px) {
.sidebar{
width: 240px;
}
.content{
margin-left: 250px;
}
.inner{
padding: 15px;
}
}
Setelah kalian semua berhasil membuat halaman html dan css. Tunjukan hasil ke instruktur.
Tugas Anda berikutnya:

Menjalankan dari kedua login itu berjalan dan menyambung ke halaman dashboard.
Buatlah lokal database mysql dengan nama progweb dan satu table dengan nama user.
Atribut pada table user di antaranya ada Id_user, username, password dan nama.
Jika sudah selesai tunjukan hasil ke isntruktur.

Praktek Minggu 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktek Minggu 1

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Website dan Perangkat Bergerak

Membuat Login dan Dashboard Admin Bagian 1

Buatlah Project Folder di htdocs dengan nama progweb_nis kalian

Kemudian di dalam folder css buatlah style dari kedua login

.login .input-group input{

.login .input-group span{

.login .input-group input:focus ~ span,

.login .input-group input[type="submit"]{

.login .input-group input[type="submit"]:hover{

.txt_field input:focus ~ label,

.txt_field input:focus ~ span::before,

Kemudian buatlah dashboard.php dengan script berikut,

<link rel="stylesheet" href="../css/admin.css">

font-family: 'Quicksand', sans-serif;

Tugas Anda berikutnya:

Anda mungkin juga menyukai