Membuat Form Login
|
September 06, 2018 |
No Comments |
Assalamu'alaikum wr.wb
A.Pendahuluan
Alhamdulillah masih dikasih kesempatan untuk bertemu dengan saya lagi.... OK singkat saja kali ini saya akan sharingkan cara Membuat Form Login.
B.Latar Belakang
Mempermudah untuk membatasi hak Akses bagi user.
C.Maksud Dan Tujuan
Untuk membatasi hak akses bagi user untuk melihat dan
berinteraksi dengan data. Hanya user yang sudah terdaftar yang bisa
mengakses data-data rahasia.
D.Alat Dan Bahan
-Laptop
-Text Editor
E.Pembahasan
Form Login,
biasanya digunakan untuk membatasi hak akses bagi user untuk melihat dan
berinteraksi dengan data. Hanya user yang sudah terdaftar yang bisa
mengakses data-data rahasia.
Berdasarkan pengalaman penulis di sekolah, Form Login ini biasanya digunakan dalam aplikasi Pendataan Penerimaan Siswa Baru, Pembayaran Siswa, dan Aplikasi Pengolah Nilai yang digunakan oleh beberapa orang yang berbeda.
Berdasarkan pengalaman penulis di sekolah, Form Login ini biasanya digunakan dalam aplikasi Pendataan Penerimaan Siswa Baru, Pembayaran Siswa, dan Aplikasi Pengolah Nilai yang digunakan oleh beberapa orang yang berbeda.
F.Tahap Pelaksanaan
Berikut Langkah-langkah untuk membuat Form Login.
- Silahkan Anda buat sebuah file index.php atau index.html, kemudian Anda isi tulisan seperti dibawah:
<!DOCTYPE html>
<html>
<head>
<title>Desain Form Login Dengan Css</title>
<link rel="stylesheet" href="coba.css">
</head>
<body>
<div class="konten">
<div class="kepala">
<div class="lock"></div>
<h2 class="judul">Sign In</h2>
</div>
<div class="artikel">
<form action="#" method="post">
<div class="grup">
<label for="email">E-mail Address</label>
<input type="text" placeholder="Masukkan Alamat Email Anda">
</div>
<div class="grup">
<label for="password">Password</label>
<input type="password" placeholder="Masukkan password Anda">
</div>
<div class="grup">
<input type="submit" value="Kirim">
</div>
</form>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Desain Form Login Dengan Css</title>
<link rel="stylesheet" href="coba.css">
</head>
<body>
<div class="konten">
<div class="kepala">
<div class="lock"></div>
<h2 class="judul">Sign In</h2>
</div>
<div class="artikel">
<form action="#" method="post">
<div class="grup">
<label for="email">E-mail Address</label>
<input type="text" placeholder="Masukkan Alamat Email Anda">
</div>
<div class="grup">
<label for="password">Password</label>
<input type="password" placeholder="Masukkan password Anda">
</div>
<div class="grup">
<input type="submit" value="Kirim">
</div>
</form>
</div>
</div>
</body>
</html>
2. Setelah Anda membuat index.php atau index.html, langkah selanjutnya ialah silahkan Anda buat sebuah halaman coba.css ( namanya terserah Anda, akan tetapi harus berekstensi .css
Kemudian isi seperti berikut:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background-image: url("wa.jpg");
}
div.konten{
background: #ffffff;
width: 350px;
margin: 222px auto 0;
border-radius: 16px;
min-height: 256px;
overflow: hidden;
}
div.kepala{
background: #f85252;
padding: 10px 22px;
height: 60px;
}
div.kepala h2.judul{
color: #fff;
font-weight: normal;
line-height: 40px;
display: inline-block;
}
div.lock{
background-image: url("lock.png");
background-position: center;
background-size: 38px;
display: inline-block;
width: 25px;
height: 25px;
margin-top: 8px;
float: left;
margin-right: 10px;
}
div.artikel{
padding:10px 22px 0;
color: #808080;
}
div.artikel div.grup{
margin: 16px 0;
}
div.artikel div.grup label,
div.artikel div.grup input{
display: block;
}
div.artikel div.grup label{
font-size: 13px;
margin-bottom: 10px;
}
div.artikel div.grup input[type="text"],
div.artikel div.grup input[type="password"]{
width: 100%;
height: 30px;
padding: 0 10px;
background: #eeeeee;
border:none;
color: #808080;
}
div.artikel div.grup input[type="submit"]{
background: #33cd77;
padding: 4px 16px;
margin: 0 auto;
border: 1px solid #33cd77;
border-radius: 2px;
color: #fff;
cursor: pointer;
}
div.artikel div.grup input[type="submit"]:hover{
background: #28a45e;
}
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background-image: url("wa.jpg");
}
div.konten{
background: #ffffff;
width: 350px;
margin: 222px auto 0;
border-radius: 16px;
min-height: 256px;
overflow: hidden;
}
div.kepala{
background: #f85252;
padding: 10px 22px;
height: 60px;
}
div.kepala h2.judul{
color: #fff;
font-weight: normal;
line-height: 40px;
display: inline-block;
}
div.lock{
background-image: url("lock.png");
background-position: center;
background-size: 38px;
display: inline-block;
width: 25px;
height: 25px;
margin-top: 8px;
float: left;
margin-right: 10px;
}
div.artikel{
padding:10px 22px 0;
color: #808080;
}
div.artikel div.grup{
margin: 16px 0;
}
div.artikel div.grup label,
div.artikel div.grup input{
display: block;
}
div.artikel div.grup label{
font-size: 13px;
margin-bottom: 10px;
}
div.artikel div.grup input[type="text"],
div.artikel div.grup input[type="password"]{
width: 100%;
height: 30px;
padding: 0 10px;
background: #eeeeee;
border:none;
color: #808080;
}
div.artikel div.grup input[type="submit"]{
background: #33cd77;
padding: 4px 16px;
margin: 0 auto;
border: 1px solid #33cd77;
border-radius: 2px;
color: #fff;
cursor: pointer;
}
div.artikel div.grup input[type="submit"]:hover{
background: #28a45e;
}
3. Setelah itu, Anda membuat kedua halaman tersebut, langkah selanjutnya jangan lupa untuk men-download gambar lock pada alamat url berikut: Download Gambar Lock
Setelah Anda men-download gambar tersebut, silahkan Anda pindahkan gambar tersebut ke tempat project Anda berada.
4. Selesai
Kemudian buka lewat browser. jika benar maka akan muncul seperti gambar dibawah.
G.Kesimpulan
Kita bisa membuat login form yang sesuai dengan keinginan
H.Penutup
Sekian yang dapat saya sharingkan Semoga dapat bermanfaat.
Wassalamu'alaikum wr.wb
Wassalamu'alaikum wr.wb
Assalamu'alaikum wr.wb
Hay perkenalkan nama saya Rizka Mala Alfiana my nick name is Rizka, I from in Jepara. Sekian dan Terimakasih.
Wassalamu'alaikum wr.wb
0 comments:
Posting Komentar