Senin, 02 Oktober 2017

Workshop bersama PHP Indonesia with Mas Daniel & Mas Yogi | Form Login





A. JUDUL
Workshop bersama PHP Indonesia with Mas Daniel & Mas Yogi | Form Login

B. PENDAHULUAN
1. Pengertian
Form Login adalah sebuah form atau kolom kolom untuk di isi sebagai media memasukkan nilai.

2. Latar Belakang
Mengapa ada form, dengan form akan termudahkan dalam penginputan data ataupun yang lainnya. Karena apa disitu akan tertera informasi yang seharusnya diisikan.

3. Maksud danTujuan
  • Membuat form untuk login
4. Hasil yang Diharapkan
Dari form login ini dapat dijadikan interface untuk login di suatu system.

C. ALAT dan BAHAN
  • PC/Laptop
  • Browser
  • Text Editor
D. JANGKA WAKTU
2 jam

E. LANGKAH-LANGKAH
1. Siapkan laptop
2. Buka text editor
3. Kita buat kerangkanya dahulu, seperti script di bawah
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login SI Perpus</title>
    <link rel="stylesheet" type="text/css" href="css/stylee.css">
</head>
<body>
    <form method="post" name="form_login" id="form_login" style="margin-top: 120px;">
        <table class="form">
            <tr>
                <td colspan="2">
                    <h1 align="center">Login Petugas</h1>
                </td>
            </tr>
            <tr>
                <td>Username</td>
                <td>
                    <input type="text" name="username" id="username" required/>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" name="password" id="password" required/>
                </td>
            </tr>
            <tr style="height:10px"></tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="submit" name="login" id="login" value="Login" class="btn btn-submit" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
dan hasilnya jika dibuka dibrowser akan seperti ini 

4. Setelah sudah terbentuk kerangkanya agar lebih menarik kita akan menambahkan css, seperti dibawah.

*{
    font-weight: 100;
}
body{
    margin: 0;
    background : #798E82;
}
/*form*/

.form{
    background: #42775A;
    border-radius: 5px;
    padding: 4px 20px 15px 20px;
    box-shadow: 0px 0px 5px black;
    color: #FFF;
    margin: 0 auto;
    width: 430px;
}

input, textarea, select {
    width: 100%;
    padding: 10px 5px;
    box-sizing: border-box;
    font-size: large;
}

textarea {
    min-height: 80px;
}

.btn {
    width: auto;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.btn-submit {
    background-color: #C35045;
}

.btn-submit:hover {
    background-color: #CA665C;
}
5. Untuk menhubungkan antara html dan css bagaimana? Nah tinggal kita tambahkan tag link di bagian file html, di bawah title

F. HASIL yang DIDAPAT
Hasilnya seperti gambar dibawah ini

G. PENEMUAN PERMASALAHAN
-

H. KESIMPULAN
Dengan form login ini, untuk masuk ke suatu sistem akan lebih interaktif.

I. REFERENSI
-

Tidak ada komentar:
Write komentar