Hello Coderss mimin akan memberikan sedikit ilmu tentang Cara Membuat From Login Dengan Html Dan Css , Nah sudah pada paham tentang apa itu from login kan ya Coderss , from login itu adalah suatu kontak from untuk login kesuatu website yang akan diproses melalui php mysql kalo gk salah begitu Coderss hehehe .
Tapi Disini mimin bukan ingin membahas tentang mengkoneksinya kedatabase tapi disini mimin akan menjelaskan Cara Membuat From Login Dengan Html Dan Css , Sebelum kalian Membuat From Login Dengan Html Dan Css ini pastikan tersebuh dahulu kalian mempunyai script php untuk menginput atau memproses data loginnya
Nah jika kalian belom mempunyainya kalian bisa menggunakan script input sederhana seperti dibawah ini Namun script dibawah ini berbeda dengan script input ke Mysql database ya Coderss pertama kalian buat satu folder dulu terserah kalian ya Coderss misalnya kalian membuat nama folder latihan .
Setelah itu kalian copy script dibawah ini dan kalian simpan dengan extensi .php contoh > action.php
<head>
<meta http-equiv="Refresh" content="3; URL=http://localhost/tes/form.html"/>
</head>
<body>
<?php
if( $_GET["uname"] || $_GET["psw"])
// { hapus tanda // untuk menampilkan username dan passwordnya
// echo "Username Anda: ". $_GET['uname']. "<br />";
// echo "Password Anda: ". $_GET["psw"]. "<br />";
// }
?>
<h1>Selamat Anda Berhasil Login Tunggu sebentar Anda akan dialihkan Ke Homepage......</h1>
<script>
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(pesen);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(pesen);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(pesen);return false")
</script>
</body>
</html>
Setelah itu bisa kalian simpan dengan extenti .php contoh > action.php . Oh iya Coderss Script diatas Belum Termasuk input ke database Mysql jadi jika kalian menggunakan script input diatas mereka bisa login secara anonim dan data mereka tidak akan masuk kedalam Database kalian ya Coderss .
Jadi kalian harus menyambungkan dengan mysql database kalian , Nah untuk menyambungkannya kalian bisa cari sendiri atau kalian bisa menggunakan referensi link dibawah untuk membuat from login dengan php dan mysql .
pada tag meta http-equiv tersebut kalian ganti url menjadi tempat kalian sesudah melalui from loginnya contohnya kalian ingin mengarahkan orang yang setelah login kembali lagi pada home bisa kalian isi dengan url home kalian , contoh tongcoder.blogspot.com maka otomatis akan langsung pindah ke home .
Nah setelah kalian membuat From action untuk menginput suatu data sekarang kalian buat lagi script extensi html dan kalian copy script From Login dibawah ini .
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>From Login Html</title>
</head>
<body>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="action.php" method="get">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1jB41oLsoBvVvxnzwYB-fudVZDFnl4R5ikEFedkqwKIzqEkuiJpLOS_cw4P0XcpGuSX2aKTXcbAEGqI5OZsGr-4OZszwc0LexSMIFX3DzHBzznbDDsUFty4BPFUIpEtGjRHApMVX7dA/s1600/tongcoders.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" value="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</div>
</body>
</html>
setelah itu kalian save dengan nama form.html .
Coba kalian perhatikan pada tag html <form> kalian ganti yang atribut actionnya menuju script input yang tadi kalian buat contohnya seperti script input pada php sederhana yang diatas Coderss contoh > action.php .
Pada Atribut action berisi alamat url kemana data form tersebut akan dikirim. Pada contoh script diatas, kita isi atribut action dengan action.php sehingga, ketika tombol login tersebut di klik, maka data form tersebut dikirim ke http://localhost/form/action.php
Namun sebelum kalian jalankan script tersebut coba kalian buat satu file lagi yang bernama style.css dan kalian copy script dibawah ini untuk membangung atau merapihkan tampilan pada form kalian .
body {font-family: Arial, Helvetica, sans-serif;}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
Setelah kalian copy script diatas coba kalian save dengan extensi style.css
Setelah kalian simpan file diatas sekarang kalian copy script javascript dibawah ini .
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Sesudah kalian copy script diatas kalian letakan pada file form.html yang tadi kalian buat dan kalian taro javascript ini diatas tag </body> setelah itu kalian save .
Nah kita sudah jadi untuk membuat Membuat From Login Dengan Html Dan Css sekarang coba kalian jalankan menggunakan Xampp jika kalian belum menginstall silahkan install dulu jika kalian belum menginstallnya bisa kalian cari digoogle dahulu cara menginstall xampp maaf karna mimin belom membuat article cara menginstal xammp hehehe.
Nah gimana keren bukan form loginnya? heheh jika kalian masih bingung bisa kalian tanyakan dikolom komentar dibawah ini ya Codersss dan jika kalian ingin mendownload source codenya silahkan kalian download menggunakan link dibawah ya .
Mungking itu dulu Codersss Cara Membuat From Login Dengan Html Dan Css nanti mimin akan update article menarik lainnya lagi jika kalian mempunyai saran bisa kalian tuliskan dibawah kolom komentar dibawah ini ya sobat Codersss Thankss
Demo : Disini
Link Download : Disini
Referensi :
https://www.w3schools.com/howto/howto_css_login_form.asp
Tidak ada komentar:
Posting Komentar