Sistem Login PHP di Dropdown Form Tanpa Membuka Halaman Login

Secara default, sistem login itu terbuat dari sebuah halaman depan dan halaman dasbor (halaman yang memerlukan login) yang kemudian dihubungkan oleh halaman login untuk menjembatani kedua halaman tersebut. Pada tutorial kali ini kita akan membuat sistem login PHP tapi di dropdown form login (form login di menu tarik-turun) tanpa menuju halaman login.

Sistem login di dropdown ini bisa dilihat contohnya di Twitter ketika membukanya di laptop / komputer, di ujung kanan ada tombol login dan muncul form untuk login atau bisa lihat juga di video tutorial YouTube Rio Bermano Channel (beberapa video saya menampilkan contoh drpdown login ini).

Pertama, perlu mempersiapkan menu dropdown nya terlebih dahulu. Jika belum punya silahkan lihat disini bagaimana membuat menu dropdown di HTML CSS / Bootstrap kemudian pada menu dropdown tersebut berikan form login misalnya untuk Username dan Password. Contohnya seperti ini:

ads by posciety

 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <form class="navbar-form navbar-left" role="search" method="post" action="">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Username/Email" name="username" autofocus>
        <input type="password" class="form-control" placeholder="Password" name="password">
      </div>
      <button type="submit" class="btn btn-default" name="submit_login">Login</button>
      <button type="submit" class="btn btn-default">Belum Punya Akun?</button>
    </form>
  </ul>
</li>

Dropdown menu ini menggunakan framework Bootstrap, hanya sekedar contoh saja. Silahkan buat dropdown menu dengan form login didalamnya.

Selanjutnya, buatlah sistem login di halaman login seperti biasa. Supaya tidak panjang lebar, silahkan pelajari disini cara membuat sistem login dan logout di PHP (Panduan Lengkap).

Setelah selesai dan berhasil disimpan, tinggal panggil sistem tersebut di dropdown form login ini dengan menambahkan direktori file sistem login tersebut (biasanya bernama login.php) di action pada form. Perhatikan pada form diatas terdapat action=”” yang masih kosong di dalam tag <form>, jika tidak ada silahkan tambahkan action=”” di form yang kalian miliki.

Didalam action=”” itu diisi dengan direktori file login.php yang tadi sudah dibuat, misalnya saya menyimpannya di dalam folder dasbor maka didalam action ini menjadi action=”dasbor/login.php”. Save dan lihat hasilnya !

Setelah berhasil login di dropdown ini akan diarahkan sesuai arahan di sistem file login.php, setiap settingan di dalam file login.php akan berpengaruh sama untuk di dropdown ini karena dropdown ini hanya memanggil action saja alias memanggil sistem yang ada di file login.php (bukan membuat sistem baru).

Setelah berhasil login ingin menghilangkan menu login ?

Caranya gampang banget tinggal menggunakan kondisi if & else saja pada form login dropdown ini, pelajari selengkapnya tentang if else disini. Begitupun untuk alert jika username atau password yang dimasukkan salah tinggal diubah dibagian if else nya saja, karena pada sistem login yang saya contoh di tutorial login dan logout menampilkan alert di halaman originalnya.

Masih bingung ? Lihat : Video Tutorial cara membuat sistem login PHP di form login dropdown menu.

Hal seperti ini hanya perlu menggunakan action saja, setelah memahami artikel ini maka akan mampu membuat sistem lain dan menerapkannya di action seperti sistem pencarian dan sebagainya. Pastikan untuk membuat file sistem originalnya terlebih dahulu sebelum memanggilnya di action.

Selamat mencoba !