A. Pendahuluan
pada kali ini aku akan membuat sebuah artikel yaitu tentang membuat sebuah tampilan untuk Login System. Nah nantinya diharapkan Interface ini dapat digunakan Sebagai Interface Login System yang akan dibangun dengan PHP dan Mysqli. Nah Berikut ini adalah artikel tentang cara membuat Interface Login System.
B. Latar Belakang
Karena suatu system login membutuhkan antarmuka untuk User dan System.
C. Maksud & Tujuan
Agar nantinya Interface ini dapat menjadi Penghubung antara System Login dan User.
D. Waktu Pelaksanaan
- Tergantung Individu.
E. Pembahasan
Dalam pembuatan suatu login system mengunakan coding. Hal yang pertama harus di siapkan yaitu membuat suatu Tampilan Layout dengan HTML dan CSS. Nah berikut ini adalah contoh Cara pembuatan Antarmukanya.
Pertama buat file baru dengan nama index.html. Lalu tulis kan Coding Seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Mukti911 - Tutorial</title>
<style type="text/css">
body {
background-image: linear-gradient(to right top, #00ff37, #00e1b6, #00baff, #0087ff, #2100ff);
min-height: 675px;
margin: 0px;
}
div.s {
width: 800px;
height: 200px;
float: left;
position: relative;
top: 100px;
left: 100px;
padding: 150px 0px;
}
div.a {
position: relative;
border-radius: 20px;
top: 100px;
float: right;
right: 100px;
width: 300px;
height: 500px;
background-color: #000000aa;
}
div.a div {
width: 150px;
height: 150px;
background-color: #fff;
margin: 70px auto 0px auto;
border-radius: 50%;
}
h1 {
font-size: 120px;
font-family: arial;
margin: 0px;
}
h4 {
font-size: 50px;
font-family: arial;
margin: 0px;
}
form {
width: 250px;
margin: 20px 25px 100px 25px;
height: auto;
}
form input[type=text], form input[type=password]{
width: 200px;
padding:20px 25px;
background-color: transparent;
border: none;
text-align: center;
font-size: 20px;
color: #fff;
}
button {
width: 250px;
border-radius: 10px;
color: #000;
padding:20px 25px;
margin: 0px auto;
background-color: #fff;
border: none;
text-align: center;
font-size: 20px;
font-family: arial;
}
</style>
</head>
<body>
<div class="s">
<h1>Login System</h1>
<h4>Mukti911 - Tutorial</h4>
</div>
<div class="a">
<div></div>
<form>
<input type="text" name="" placeholder="Username">
<input type="password" name=""placeholder="Password">
<button>LOGIN</button>
</form>
</div>
</body>
</html>
Codingan Tersebut akan menghasilkan tampilan seperti berikut :
Nah berikut ini adalah penjelasannya :
<!DOCTYPE html>Pada bagian codingan diatas Seperti yang terlihat Codingan ini mengunakan HTML. Berikut adalah penjelasan tag tag nya dan atributnya :
<html>
<head>
<title>Mukti911 - Tutorial</title>
</head>
<body>
<div class="s">
<h1>Login System</h1>
<h4>Mukti911 - Tutorial</h4>
</div>
<div class="a">
<div></div>
<form>
<input type="text" name="" placeholder="Username">
<input type="password" name=""placeholder="Password">
<button>LOGIN</button>
</form>
</div>
</body>
</html>
- <html> untuk memulai membuat codingan HTML.
- <title> untuk menambahkan informasi nama dari Halaman File Jika File ini nantinya akan dibuka di Browser.
- <head> untuk mendefinisikan beberapa informasi kepala yang ada di halaman ini.
- <body> adalah tempat untuk menaruh suatu tatanan Layout dari Login System Tadi.
- <div> adalah suatu tag yang tidak memiliki style default namun div dapat diberi style dengan atribut dan CSS.
- <h1> dan <h4> adalah tag yang digunakan untuk header.
- <form> form adalah suatu tag yang dimana untuk merepresentasikan sebuah form isian.
- <input> digunakan untuk membuat kolom isian di form.
- <button> digunakan untuk membuat sebuah tombol.
<style type="text/css">
body {
background-image: linear-gradient(to right top, #00ff37, #00e1b6, #00baff, #0087ff, #2100ff);
min-height: 675px;
margin: 0px;
}
div.s {
width: 800px;
height: 200px;
float: left;
position: relative;
top: 100px;
left: 100px;
padding: 150px 0px;
}
div.a {
position: relative;
border-radius: 20px;
top: 100px;
float: right;
right: 100px;
width: 300px;
height: 500px;
background-color: #000000aa;
}
div.a div {
width: 150px;
height: 150px;
background-color: #fff;
margin: 70px auto 0px auto;
border-radius: 50%;
}
h1 {
font-size: 120px;
font-family: arial;
margin: 0px;
}
h4 {
font-size: 50px;
font-family: arial;
margin: 0px;
}
form {
width: 250px;
margin: 20px 25px 100px 25px;
height: auto;
}
form input[type=text], form input[type=password]{
width: 200px;
padding:20px 25px;
background-color: transparent;
border: none;
text-align: center;
font-size: 20px;
color: #fff;
}
button {
width: 250px;
border-radius: 10px;
color: #000;
padding:20px 25px;
margin: 0px auto;
background-color: #fff;
border: none;
text-align: center;
font-size: 20px;
font-family: arial;
}
</style>
Nah kodingan diatas adalah kodingan yang mengubah tampilan yang sebelumnya flat di HTML menjadi lebih baik. Nah berikut ini adalah beberapa penjelasannya :
- background-image: linear-gradient(to right top, #00ff37, #00e1b6, #00baff, #0087ff, #2100ff);. Codigan ini digunakan untuk menambahkan backgrountd pada tag yang ada.
- width dan height digunakan untuk memberikan ukuran panjang dan lebar.
- margin dan padding : digunakan untuk memberikan jarak content dari luar dan dalam.
- float yaitu untuk membuat sebuah perataan dari tag yang diberi kodingan ini.
- position yaitu digunakan untuk mengatur posisi dari tag.
- top, bottom, left, right digunakan untuk memindahkan tag dari beberapa sisi tersebut.
- border-radius digunakan untuk mengatur sudut dari tag.
- font-size mengatur unturan font
- font-family mengatur bentuk dari tulisan
- text-align untuk mengatur perataan text.
Nah berikut adalah contoh pembuatan Interface Login System.
- Interface Login Juga tetap bisa dibuat menarik meskipun hanya dengan HTML CSS
J. Referensi
- -
No comments:
Post a Comment