PEMBUATAN FORM LOGIN DAN BIODATA DENGAN PHP MENGGUNAKAN METODE POST

Pada Kesempatan Kali inI saya akan membuat form login dan biodata dengan PHP menggunakan metode post oke langsung saja saya akan membahas apa itu form login.

Form login biasanya terdapat pada tampilan awal pada program aplikasi maupun website. Penggunaan form login diperlukan untuk menjaga keamanan sistem pada aplikasi maupun website yang dibuat. Form login hanya dapat diakses atau dibuka oleh pemilik, hal ini dilakukan untuk meminimilisir orang yang tidak bertanggung jawab dapat mengaksesnya. Pada form login, pengguna diminta untuk memasukan username dan password. Bila username dan password tidak sesuai maka program tidak muncul atau tampil, pengguna perlu melakukan login kembali. Terkadang untuk meningkatkan keamanan, pemilik bisa menerapkan sistem kemananan yang lebih protektif, misalnya: bila melakukan kesalahan sebanyak 3 kali, pengguna tidak dapat melakukan login hingga beberapa jam. Berbicara mengenai form login, Kami ingin berbagi informasi mengenai pembuatan form login sederhana menggunakan bahasa pemrograman PHP. Untuk lebih jelasnya, berikut ini cara pembuatan program tersebut
.
  • 1.       Buat file PHP

Untuk membuat file PHP, Anda dapat menggunakan software editor text salah satunya Notepad++. Jalankan Notepad++ dan buat file baru dengan cara memilih File > New dan simpan dengan tipe ekstensi .php. Simpan file PHP pada Local Disk > xampp > htdocs > buat folder baru untuk menyimpan file php. Buat script pemrograman php seperti berikut ini.

a. Script login.php untuk tampilan awal ketika login username dan password.


b. Script proseslogin.php untuk menampilkan hasil, jika login berhasil akan keluar biodata dan jika login gagal akan keluar notification periksa kembali username dan password anda.

<html>
<head>
                <title>Hasil Login</title>
                <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body bgcolor="#FFFF66">
                                <form action="proseslogin.php" method="post" name="form1">
                                <table>
                                <tr>
                                <td>
                                                <?php
                                                                if (isset($_POST['Login'])){
                                                                                $login = $_POST['username'];
                                                                                $pass = $_POST['password'];
                                                                               
                                                                                if ($login == "bayuoutlook99" && $pass == "bayu1234"){
                                                                                                echo "<h1>Biodata</h1>
                                                                                                 <tr>
                          <td>Nama</td>
                          <td>:</td>
                                                                                                  <td>Aditya Bayu Irawan</td>
                                                                                                  </tr>
                                                                                                  <tr>
                                                                                                   <td>Nim</td>
                                                                                                   <td>:</td>
                                                                                                   <td>16.3.0043</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Jurusan</td>
                                                                                                   <td>:</td>
                                                                                                   <td>Teknik Informatika</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Agama</td>
                                                                                                   <td>:</td>
                                                                                                   <td>Islam</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Tempat lahir</td>
                                                                                                   <td>:</td>
                                                                                                   <td>Tanggerang</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Tanggal Lahir</td>
                                                                                                   <td>:</td>
                                                                                                   <td>10 Juni 1999</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Hobi</td>
                                                                                                   <td>:</td>
                                                                                                   <td>Bermain Badminton</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Golongan Darah</td>
                                                                                                   <td>:</td>
                                                                                                   <td>O</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>No Telephone</td>
                                                                                                   <td>:</td>
                                                                                                   <td>0877884340933</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Email</td>
                                                                                                   <td>:</td>
                                                                                                   <td>bayubocahcartoe@outlook.com</td>
                                                                                                   </tr>
                                                                                                   <tr>
                                                                                                   <td>Situs Saya</td>
                                                                                                   <td>:</td>
                                                                                                   <td>adityabayuirawan145.blogspot.com</td>
                                                                                                   </tr>";
                                                                                } else{
                                                                                                echo "<h2>Login Gagal</h2>
                                                                                                <tr>
                                                                                                <td>periksa kembali username dan password anda</td>
                                                                                                </tr>";
                                                                                }
                                                                }
                                                ?>
                                                </td>
                                                </tr>
                                </table>
                                </form>
</body>
</html>

2. Buat file CSS
Desain form login menggunakan bahasa tampilan CSS. Buat file css menggunakan Notepad++ dengan memilih File > New dan simpan dengan nama style.css. Berikut ini contoh script file style.css yang telah selesai dibuat.
body{
                   background-image:url(triangulation-background.jpg);
                    font-family: arial;
                }

                table {
                                width:350px;
                    margin:100px auto;
                    padding:20px 40px;
                    border:1px solid #ccc;
                    background:rgba(255, 255, 255, 0.77);
                    border-radius: 10px;
                    box-shadow: 0 0 10px #fff;

                }

                input[type="text"], input[type="password"]{
                    border:1px solid rgba(51,51,51,.5);
                    border-radius:10px;
                    padding: 5px;
                    font-size: 15px;
                    line-height: 20px;
                    width: 100%;
                    text-align:center;
                }

                input[type="submit"], input[type="reset"]{
                                margin-top: 15px;
                    font-size: 18px;
                    border:1px solid #000;
                    padding:5px 10px;
                    border:1px solid rgba(51,51,51,.5);
                    border-radius:10px;

                    box-shadow: 2px 1px 1px #aaa;
                    cursor:pointer;
                }
                input[type="submit"]:hover, input[type="reset"]:hover{
                    background:#f4f4f4;
                }
                h2 {
                                text-align: center;
                }
                table tr td {
                    margin:10px 5px;
                    padding:5px 0;
                    line-height: 30px;
                }

1.       Cek hasil program
Anda dapat mengecek hasil program dengan menggunakan software browser salah satunya Mozilla Firefox. Jalankan browser dan ketik pada address url, seperti: http://localhost/nama folder/nama file.php. Pada program tersebut, pengguna diminta melakukan input username dan password. Bila data diisi dengan benar maka akan tampil laporan biodata dan jika login gagal akan keluar notification periksa kembali username dan password anda.

Previous
Next Post »