Membuat Form Login Dengan PHP dan CSS - Hallo sahabat Blogging Linux Mikrotik Device Setting Java PHP HTML CSS, Pada Artikel yang anda baca kali ini dengan judul Membuat Form Login Dengan PHP dan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel php, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Membuat Form Login Dengan PHP dan CSS
link : Membuat Form Login Dengan PHP dan CSS
Membuat Form Login Dengan PHP dan CSS
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, agar aplikasi di dalam website tidak boleh di akses oleh sembarang orang oleh karena 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 lalu copy paste scrip berikut ini simpan lalu 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 akses http://localhost/formlogin akan tampil seperti gampar di bawah ini.
Demikianlah Artikel Membuat Form Login Dengan PHP dan CSS
Sekianlah artikel Membuat Form Login Dengan PHP dan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Form Login Dengan PHP dan CSS dengan alamat link https://linuxmikrotikdevicesetting.blogspot.com/2019/03/membuat-form-login-dengan-php-dan-css.html