Tutorial membuat Form Login Dengan PHP dan CSS

Membuat Form Login Dengan PHP Dan CSS

Login disebut juga “logon” atau “sign in” adalah istilah dalam hal keamanan komputer, yakni berupa proses pintu masuk bagi pengguna untuk mengakses sistem komputer. Login dimaksudkan untuk mengatur proses identifikasi. Berbeda dngan logout, proses login membutuhkan hal spesifik tertentu. Dengan teknologi terkini, proses login semakin diperketat dengan enkripsi secara hardware, seperti proses scan sidik jari dan retina mata.

Cara Membuat Form Login Dengan PHP dan CSS

Baiklah mari kita langsung ke tutorialnya sekrng ,dan di Sini saya akan memberikan Tutorial membuat Form Login yang keren dan standart

Bahan : - Kesabaran dan Teliti
- Hosting kalau tidak Punya bisa pakai XAMPP

Tutorial :

1. Buat File dengan nama Index.php lalu pastekan script bawah ini

<!DOCTYPE html>
<html>
<head>
  <title>Form Login Menggunakan CSS</title>
 <link rel="stylesheet" href="style.css" type="text/css">
 <style>
 img {
   width: 150px;
   height: 150px;
   border-radius: 50%;
}
</style>
</head>
<body>
  <h2>
Form Login</h2>
<form action="login.php" method="post">
    <div class="imgcontainer">
     <center>
 <img src="gambar.png" alt="gambar"></center>
</div>
<div class="container">
     <br>
       Nama kamu:<br>
       <input type="text" name="nama" value=""placeholder="Masukan nama kamu"class=form-control required>
         <br>Password:</br>
       <input type="password" name="password" value=""placeholder="Masukan Password kamu" class=form-control required>

       <br><br>
       
       <input type="submit" value="Login">
    <input type="checkbox" checked="checked"><span>Ingat Form Saya</span>
  </div>
<div class="container" >
    <a href="#"><input type="button" value="Lupa Password"></button></a>
    <center>
<p>
Copyright © 2018 <a href="https://onessh.net">Team OneSSH and @ProPannel.site</a></p>
</center>
</div>
<!--/ .footer -->
  </div>
</form>
<style scoped="" type="text/css">
 
input[type=text], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 2px solid #25aae1;border-radius: 4px;box-sizing: border-box;}
input[type=email], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 2px solid #25aae1;border-radius: 4px;box-sizing: border-box;}
input[type=submit] {width: 100%;background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,.75);font-size:16px;font-weight:600;color:#444;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}
input[type=submit]:hover {font-size:16px;font-weight:600;color:#fff;cursor:pointer;text-align:center;border:none;background-size:300% 100%;border-radius:50px;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
input[type=button] {width: 100%;background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,.75);font-size:16px;font-weight:600;color:#444;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}
input[type=button]:hover {font-size:16px;font-weight:600;color:#fff;cursor:pointer;text-align:center;border:none;background-size:300% 100%;border-radius:50px;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

#comments,.post_meta,#blog-pager{display:none}
</style>
</body>
</html>

2. Buat File dengan nama style.css lalu pastekan script bawah ini

*{
    padding: 0; margin: 0;
}
h2{
 color:#50626C;
 text-align: center;
 font-family: arial;
 text-transform: uppercase;
 border: 3px solid #f1f1f1;
 padding: 5px;
 width: 490px;
 margin: auto;
 margin-bottom: 10px;
    margin-top: 20px;
}
form {
    border: 3px solid #f1f1f1;
    font-family: arial;
    width: 500px;
    margin: auto;
}

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;
}
label{
 color:#50626C;
 text-transform: uppercase;
}
button {
    background-color: #049372;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f03434;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;

}
img {
   width: 350px;
   height: 350px;
   border-radius: 50%;
}

3. Tambahkan gambar.png untuk membuat gambar bulatnya seperti Gambar di atas
4. Kemudian coba akses dan hasilnya :D ,sdh bgus kan

Dan itu saja untuk pembuatan Form login sederhana dan Keren tentunya
Jika msh belum paham simak Video berikut ini
Download source Code Form Login ini,supaya tinggal upload dan Jadi :)
Di sini

ProPannel

Sabtu, 26 Mei 2018

Tutorial membuat Form Login Dengan PHP dan CSS

onessh

Comments

ProPannel

Sabtu, 26 Mei 2018

Tutorial membuat Form Login Dengan PHP dan CSS

Artikel Terkait

onessh

Comments