Membuat Form Login Dengan Php Dan Css

logophp


Lama tidak post tentang pemrograman web, kali ini saya akan mencoba membuat form login dengan menggunakan php dan css. Form login ini di gunakan untuk keamanan web dalam mengakses suatu data maka di butuhkan sistem autentikasi berupa user dan password.

Login merupakan proses penting untuk menjaga keamanan dalam sebuah website, semoga aplikasi di dalam website dihentikan di saluran oleh sembarang orang oleh lantaran adalah itu proses login di gunakan untuk pengaman masing masing akun yang sudah terdaftar.

Kelengkapan sofware
1. XAMPP
2. Notepad ++
3. Browser

Nah langsung saja berikut scrip programnya
1. Buatlah file index.php kemudian copy paste scrip berikut ini simpan kemudian simpan di folder htdocs/formlogin

<html> <head>     <title>CSS Desain Form Login Minimalis</title>     <link rel="stylesheet" href="style.css">     </head> <body>     <h1 class="tengah">Contoh Form Login</h1>     <div class="konten">     <div class="atas">     <div class="grup">       </div>          <form action="#" method="post">             <div class="grup">                     <input type="text" placeholder="Isikan Username Anda">                 </div>                 <div class="grup">                     <input type="password" placeholder="Isikan Password Anda">                 </div>                 <div class="jarakatas30">                     <div class="grup tengah">                         <button type="submit" class="tombol kirim">Submit</button>                         <button type="button" class="tombol hapus">Clear</button>                     </div>                 </div>                 <div class="grup">                     <div class="kiri">                         </div>                     <div class="kanan">                      </div>                 </div>             </form>         </div>         <div class="bawah tengah">            </div>     </div> </body> </html>

2. Setelah itu buat file style.css copy paste script berikut ini lalu simpan di folder htdocs/formlogin

*{     padding: 0;     margin: 0;     box-sizing: border-box;     font-family: sans-serif; }   body{     background: #c0c0c0; }   h1{     color: #01afee;     margin-top: 70px;     font-size: 32px; }   a{     text-decoration: none; }   div.konten{     background: #ffffff;     width: 380px;     margin: 20px auto 10px;     border-radius: 5px;     overflow: hidden; }   .tengah{     text-align: center; }   .jarakatas30{     margin: 30px 0; }   div.kiri{     float: left; }   div.kanan{     float: right; }   span{     font-size: 13px; }   /** *   Desain Bagian Atas *  */     div.atas{     height: 290px;     padding: 30px 30px 0; }   div.grup{     margin: 10px 0; }   a.a{     font-size: 13px;     color: #808080; }   a.a.garisbawah{     text-decoration: underline; }   a.a.tombol{     font-size: 14px;     padding: 0 7px;     border-radius: 3px;     color: #ffffff;     display: inline-block;     line-height: 28px;     width: 49.3%; }   a.a i{     margin-right: 10px; }   form{     margin: 20px 0; }   input[type="text"], input[type="password"]{     width: 100%;     height: 30px;     padding: 0 10px;     border: 1px solid #d9d9d9;     border-radius: 4px;     color: #454545;     outline: none; }   input[type="text"]:focus, input[type="password"]:focus{     border: 1px solid #e9cd00; }   button.tombol{     color: #ffffff;     width: 88px;     height: 28px;     border: none;     font-weight: bold;     cursor: pointer; }   button.tombol.kirim{     background: #e9cd00;     border-top-left-radius: 10px;     border-bottom-left-radius: 10px; }   button.tombol.kirim:hover{     background: #ccb400; }   button.tombol.hapus{     background: #01afee;     border-top-right-radius: 10px;     border-bottom-right-radius: 10px; }   button.tombol.hapus:hover{     background: #0195cb; }     /** *   Desain Bagian Bawah *  */  span.info{     color: #e6f8ff;     line-height: 70px; }

Setelah semua scrip di simpan pada folder htdocs di xampp, silahkan saluran http://localhost/formlogin akan tampil menyerupai gampar di bawah ini.

login
Scroll to Top