Membuat Form Login ( Frontend ) || Aplikasi Restoran
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
A. Pendahuluan
Pada Kali Ini saya Akan Membuat Form Login, Langsung Saja Dibaca Dan Dipahami
B. Latar Belakang
Latar Belakang saya Membuat Form Login ini adalah Untuk Menjaga Keamanan Dari Dashboard admin
C. Maksud Dan Tujuan
Untuk Menjaga Keamanan dari halaman Dashboard admin, Agar Tidak sembarang orang yang dapat masuk ke dashboard admin
D. Jangka Waktu Yang Dibutuhkan
2 Jam
E. Alat Dan Bahan
Laptop
Browser
Teks Editor ( Sublime Teks )
F. Langkah Kerja
Seperti Biasa Dalam Pembuatan halaman Login Ini saya hanya menggunakan HTML Dan Css, Hal Paling Utama Yang Dibutuhkan Dalam Pembuatan Form Login ini adalah Form Input Dan Button, Kenapa? Karena Jika Tidak Ada itu Apakah Bisa Jadi From Login :v, Nah Form Login Ini hanya Digunakan Untuk Administrator Sebelum Masuk Ke dashboard admin, Jika Seorang Administrator ingin mengakses Dashboard admin maka akan Disuguhkan Form Login Terlebih dahulu, agar tidak sembarang orang yang dapat masuk,
Berikut Source Code Nya : Ketik Ulang ya, Jangan Copas!
Buat File Baru Dengan nama Index.html, Setelah Itu Isi Dengan Kode Berikut
Setelah Itu Buat File Baru Lagi Dengan Nama style.css
Setelah Itu Save Dan Lihat Hasilnya :
Gimana ? Mudah Bukan
G. Kesimpulan
Dalam Pembuatan Form Login Ini, Hal Pertama yang harus kalian Pahami adalah Tentang Pengkodean HTML Dan CSS
H. Referensi
w3school
Sekian yang dapat saya sampaikan Mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
Wassalamu'alaikum Wr.Wb
Salam Dan Bahagia
A. Pendahuluan
Pada Kali Ini saya Akan Membuat Form Login, Langsung Saja Dibaca Dan Dipahami
B. Latar Belakang
Latar Belakang saya Membuat Form Login ini adalah Untuk Menjaga Keamanan Dari Dashboard admin
C. Maksud Dan Tujuan
Untuk Menjaga Keamanan dari halaman Dashboard admin, Agar Tidak sembarang orang yang dapat masuk ke dashboard admin
D. Jangka Waktu Yang Dibutuhkan
2 Jam
E. Alat Dan Bahan
Laptop
Browser
Teks Editor ( Sublime Teks )
F. Langkah Kerja
Seperti Biasa Dalam Pembuatan halaman Login Ini saya hanya menggunakan HTML Dan Css, Hal Paling Utama Yang Dibutuhkan Dalam Pembuatan Form Login ini adalah Form Input Dan Button, Kenapa? Karena Jika Tidak Ada itu Apakah Bisa Jadi From Login :v, Nah Form Login Ini hanya Digunakan Untuk Administrator Sebelum Masuk Ke dashboard admin, Jika Seorang Administrator ingin mengakses Dashboard admin maka akan Disuguhkan Form Login Terlebih dahulu, agar tidak sembarang orang yang dapat masuk,
Berikut Source Code Nya : Ketik Ulang ya, Jangan Copas!
Buat File Baru Dengan nama Index.html, Setelah Itu Isi Dengan Kode Berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Admin</title>
<link rel="stylesheet" href="asset/style.css">
<link rel="stylesheet" href="asset/font/css/all.css" />
</head>
<body>
<div class="wrapper">
<form action="cek.php" method="post">
<div class="dasar">
<h1 style="text-align: center;padding-top: 20px;">Sign in</h1>
<div class="username">
<div class="ico"><i style="float: left;margin-left: 5px;margin-top: 3px;" class="fa fa-user fa-2x"></div></i><input class="user" type="text" name="username" placeholder="Username" required="">
</div>
<div class="usernam">
<div class="ico"><i style="float: left;margin-left:7px;margin-top: 3px;" class="fa fa-lock fa-2x style="color:white"></div></i><input class="user" name="password" style="margin-left: 8px;" type="Password" placeholder="Password" required="">
<button class="btn" name="masuk">MASUK</button>
</form>
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Admin</title>
<link rel="stylesheet" href="asset/style.css">
<link rel="stylesheet" href="asset/font/css/all.css" />
</head>
<body>
<div class="wrapper">
<form action="cek.php" method="post">
<div class="dasar">
<h1 style="text-align: center;padding-top: 20px;">Sign in</h1>
<div class="username">
<div class="ico"><i style="float: left;margin-left: 5px;margin-top: 3px;" class="fa fa-user fa-2x"></div></i><input class="user" type="text" name="username" placeholder="Username" required="">
</div>
<div class="usernam">
<div class="ico"><i style="float: left;margin-left:7px;margin-top: 3px;" class="fa fa-lock fa-2x style="color:white"></div></i><input class="user" name="password" style="margin-left: 8px;" type="Password" placeholder="Password" required="">
<button class="btn" name="masuk">MASUK</button>
</form>
</div>
</div>
</div>
</body>
</html>
Setelah Itu Buat File Baru Lagi Dengan Nama style.css
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 400px;
background-image: url(../img/back.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.dasar {
width: 380px;
height: 280px;
background:white;
margin: 150px auto;
border-radius: 20px;
/*opacity: 0.3;*/
background: rgb(255, 250, 250,0.39);
}
.user {
height: 36px;
width: 215px;
margin-left: 5px;
vertical-align: top;
border:1px white;
text-align: center;
outline-color: white;
margin-top: 1px;
}
.username {
width: 255px;
height: 38px;
background: white;
margin: 30px auto;
border: 1px solid black;
}
.usernam {
width: 260px;
height: 38px;
background: white;
margin: 30px auto;
margin-top: -20px;
border: 1px solid black;
}
.btn {
width: 250px;
height: 30px;
background: #ffac33;
border: 0;
color: white;
margin-top: 30px;
cursor: pointer;
}
.btn:active {
transform: translateY(3px);
background-color: rgb(222, 156, 60);
}
.logo {
width: 100px;
height: 60px;
margin:40px auto;
}
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 400px;
background-image: url(../img/back.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.dasar {
width: 380px;
height: 280px;
background:white;
margin: 150px auto;
border-radius: 20px;
/*opacity: 0.3;*/
background: rgb(255, 250, 250,0.39);
}
.user {
height: 36px;
width: 215px;
margin-left: 5px;
vertical-align: top;
border:1px white;
text-align: center;
outline-color: white;
margin-top: 1px;
}
.username {
width: 255px;
height: 38px;
background: white;
margin: 30px auto;
border: 1px solid black;
}
.usernam {
width: 260px;
height: 38px;
background: white;
margin: 30px auto;
margin-top: -20px;
border: 1px solid black;
}
.btn {
width: 250px;
height: 30px;
background: #ffac33;
border: 0;
color: white;
margin-top: 30px;
cursor: pointer;
}
.btn:active {
transform: translateY(3px);
background-color: rgb(222, 156, 60);
}
.logo {
width: 100px;
height: 60px;
margin:40px auto;
}
Setelah Itu Save Dan Lihat Hasilnya :
Gimana ? Mudah Bukan
G. Kesimpulan
Dalam Pembuatan Form Login Ini, Hal Pertama yang harus kalian Pahami adalah Tentang Pengkodean HTML Dan CSS
H. Referensi
w3school
Sekian yang dapat saya sampaikan Mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
Wassalamu'alaikum Wr.Wb
