Membuat Contoh Halaman Login dan Register Sederhana

by agungekkasmkbantaraDesember 11, 20180 Comments
Assalamulaikum Warahmatullahi Wabarakatuh,
                                                                        
1.Pendahuluan
    Hallo sahabat IT, gimana kabarnya untuk hari ini baik-baik saja bukan. Nah pada pertemuan kali ini kita akan membahas sedikit tentang teknis yakni membuat halaman login ketika kita pengen masuk pada sebuah halamn web, hal ini cukup dibilang simpel dan mendasar sih. Tentunya...
A.Pokok Bahasan
Membuat halaman login sederhana.
B.Latar Belakang
    Karena dalam membuat sebuah halaman web ataupun tampilan perlu suatu pendaftaran dan kejelasan dari pengguna yang meliputi identitas si pengguna, alamat, maupun hal lain yang dapat digunakan sebagai pendaftaran.
C.Tujuan
    Memberikan kejelasan mengenai pendataan siapa saja yang telah atau sudah mengakses halamn tersebut.
2.Isi
D.Pembahasan
    Dalam pembuatan sebuah halaman login atau register diperluka kelengkapan data diri mulai dari yang sederhana seperti nama maupun email yang kita miliki, nah bukankah sangat penting dan perlu sekali halaman login ini dalam aktfitas informasi. Maka dari itu untuk tahap awal saya buat tampilan ini terlebih dahulu nah baru nantinya ada pengembangan.
Tutorial membuat halaman login dan register sederhana :
1.Siapkan Text Editor terlebih dahulu.
2.Pastikan anda memahami bahasa HTML,CSS, dan juga PHP.
3.Untuk tahapan pengerjaan kita gunakan Bahasa HTML yang dimasukkan dalam PHP. Dan juga pembuatan tampilan menariknya menggunakan CSS.
4.Untuk tahapan awalnya kita buat dahulu folder yang berjudul register.php,  Nah kemudian masukkan perintah kodenya mulai dari pembuatan headernya baru kemudian ke tag form-nya yakni mulai dari (Username, Email, assword, dan Confirm Password). yakni meliputi hal berikut.(Catatan : dalam pengujian tag PHP perlu anda ketahui juga, bahwasannya tag PHP hanya dapat diakses atau dijalankan dengan menggunakan Localhost PHP My Admin, baik itu menggunakan LAMPP maupun XAMPP).
 Berikut susunan kode programnya :


Berikut contoh source code-nya :

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Registrasi</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
    <h2>register</h2>
</div>

<form method="post" action="register.php">
    <div class="input-group">
        <label>Username</label>
        <input type="text" name="username">
    </div>
    <div class="input-group">
        <label>Email</label>
        <input type="text" name="email">
    </div>
    <div class="input-group">
        <label>Password</label>
        <input type="password" name="pasword_1">
    </div>
    <div class="input-group">
        <label>Confirm Password</label>
        <input type="password" name="pasword_2">
    </div>
    <div class="input-group">
        <button type="submit" name="register" class="btn">Register</button>
    </div>
    <p>
        Ingin masuk...?<a href="login.php">Sign In</a>
    </p>
</form>

</body>
</html>

5.Untuk tahapan selanjutnya adalah membuat CSS, buat folder dan simpan dengan nama style.css. Kemudian, sebelum saya jelaskan mana saja  menurut kalian yang perlu dipercantik tampilannya...? (Untuk saya sendiri yang saya akan edit tampilannnya yakni bagian body, header, form, input, dan btn),
Maka dari itu, saya membuat perintah seperti gambar berikut.



Berikut source code-nya :
* {
    margin: 0px;
    padding: 0px;
}
body{
    font-size: 120%;
    background: #F8F8FF;
}

.header {
    width:30% ;
    margin: 50px auto 0px;
    color: white;
    background: #5f9ea0;
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
}
form {
    width: 30%;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #B0C4DE;
    background: white;
    border-radius: 0px 0px 10px 10px;
}
.input-group {
    margin: 10px 0px 10px 0px;
  }

  .input-group label{
      display: block;
      text-align: left;
      margin: 3px;
  }
  .input-group input {
      height: 30px;
      width: 93%;
      padding: 5px 10px;
      font-size: 16px;
      border-radius: 50px;
      border: 1px solid gray;
  }
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5f9ea0;
    border: none;
    border-radius: 50px;
}


6. Ok, untuk tahapan pengerjaan cukup sampai sekian terlebih dahulu, Ooo, ya untuk hasil output dari tag-tag yang sudah kita buat tadi adalah demikian.



E.Referensi
E-Book (belajar-HTMLPHP-dan-MySQL.pdf)
Video (Complete User Registration System using PHP and MySQL database.mp4)
F.Waktu pelaksanaan
09:00 WIB-12:00WIB.
3.Penutup
G.Kesimpulan
    Dari uraian diatas dapat disimpulkan bahwasannya kita dapat mengetahui bagaimana cara pembuatan serta fungsi dan kegunaan dari dibuatnya sebuah halaman login dan register.

H.Alat dan bahan yang dibutuhkan
Laptop
Aplikasi Text Editor (Disini saya menggunakan Sublime Text).
Koneksi jaringan (Searching).

0 Komentar

Posting Komentar