Membuat Form Register Dan Login Yang Menarik Dalam Satu Halaman Pada PHP dan MySQL

Form Register dan Login merupakan salah satu rangkaian fitur dalam sebuah aplikasi website. Semua situs yang melakukan proses pendaftaran Akun sudah pasti melakukan yang namanya Registrasi dan Login. Apabila kita masuk dalam suatu situs website dan melakukan proses Registrasi dan Login terkadang kita dibawa pada halaman yang berbeda antara Form Registrasi dan Login. Beragam cara orang membuat Form Registrasi dan Login, ada yang memisahkan antara halaman Registrasi dan halaman Login dan adapula yang membuatnya dalam satu halaman, tergantung kebutuhan masing-masing yang membuat website tersebut.

Untuk tutorial singkat kali ini saya akan membahas dan memberikan Inspirasi Source Code tentang Membuat Form Register Dan Login Yang Menarik Dalam Satu Halaman Pada PHP dan MySQL.

Lihat juga: Membuat Form Login Serta Validasi Pada PHP dan MySQL

Nah..., bagaimana cara membuat form Register dan Login yang menarik dalam satu halaman website dengan menggunakan bahasa pemrograman PHP dan MySQL seperti yang tampak pada gambar berikut..?

Berikut langkah-langkahnya:

Seperti biasa kita siapkan terlebih dahulu database dan tabel database untuk penyimpanan file. contoh tabel: user_member
Siapkan satu halaman file php untuk form Register dan Login, contoh : index.php
Kemudian ketikan source code pada form index.php Anda seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>Registrasi | Login :: kodingbuton.com</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Grocery Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
       function hideURLbar(){ window.scrollTo(0,1); } </script>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="all" />


<script src="js/jquery-1.11.1.min.js"></script>


<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function($) {
       $(".scroll").click(function(event){
           event.preventDefault();
           $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
       });
   });
</script>

</head>

<body>


   <div class="products-breadcrumb">
       <div class="container">
           <ul>
               <li><i class="fa fa-home" aria-hidden="true"></i><a href="../index.php">Home</a><span>|</span></li>
           </ul>
       </div>
   </div>



       <div class="w3_login">
           <h3>LOGIN & REGISTRASI</h3>
           <div class="w3_login_module">
               <div class="module form-module">
                  <div class="toggle"><i class="fa fa-times fa-pencil"></i>
                   <div class="tooltip">Buat Akun</div>
                  </div>
                  <div class="form">
                   <h2>Login ke akun Anda..</h2>
                   <form action="sigin.php" method="post">
                      <input type="text" name="email" placeholder="Email" required data-errormessage-value-missing="lengkapi email sesuai akun">
                      <input type="password" name="password" id="password" placeholder="Password" required data-errormessage-value-missing="lengkapi password sesuai akun">
                      <input type="submit" value="Login">
                   </form>
                  </div>
                  <div class="form">
                   <h2>Registrasi</h2>

                   <form action="?module=member&aksi=simpan" method="post">
                      <input type="text" name="nama" placeholder="Nama Lengkap" required data-errormessage-value-missing="Isi nama sesuai KTP">
                      <input type="text" name="alamat" placeholder="Alamat Lengkap" required data-errormessage-value-missing="lengkapi alamat sesuai KTP">
                      <input type="text" name="telpon" placeholder="Nomor Telepon" required data-errormessage-value-missing="lengkapi pesan dengan angka" onkeypress="return hanyaAngka(event)"/>
                      <input type="email" name="email" placeholder="Alamat Email" required data-errormessage-value-missing="lengkapi isian dengan email">
                      <input type="password" name="password" placeholder="Password" required data-errormessage-value-missing="isi password minimal 8 digit">
                      <input type="submit" value="Register">
                   </form>
                  </div>
                  <div class="cta"></div>
               </div>
           </div>
           <script>
               $('.toggle').click(function(){
                  // Switches the Icon
                  $(this).children('i').toggleClass('fa-pencil');
                  // Switches the forms
                  $('.form').animate({
                   height: "toggle",
                   'padding-top': 'toggle',
                   'padding-bottom': 'toggle',
                   opacity: "toggle"
                  }, "slow");
               });
           </script>
       </div>


<div class="wthree_footer_copy">
<p><small>© Copyright © <script>document.write(new Date().getFullYear());</script> kodingbuton.com</small></p>
</div>


<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $(".dropdown").hover(
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');
        }
    );
});
</script>

   <script type="text/javascript">
       $(document).ready(function() {
           /*
               var defaults = {
               containerID: 'toTop', // fading element id
               containerHoverID: 'toTopHover', // fading element hover id
               scrollSpeed: 1200,
               easingType: 'linear'
               };
           */

           $().UItoTop({ easingType: 'easeOutQuart' });

           });
   </script>

</body>
</html>

Untuk semua komponen file tambahan berupa: bootstrap.css, font-awesome.css, style.css, jquery-1.11.1.min.js, move-top.js, easing.js, bootstrap.min.js dan file font-awesome seerta file lengkapnya dapat di Download disini..

Lihat juga : Cara Mengkoneksikan XAMPP Dengan Website PHP dan MySQL

Demikian tutorial singkat tentang Membuat Form Register Dan Login Yang Menarik Dalam Satu Halaman Pada PHP dan MySQL dan Selamat mencoba, semoga tutorial singkat yang dapat saya bagikan dapat bermanfaat…..!

Apabila ada source code yang tidak berjalan, error atau tidak sesuai,, silahkan isi kolom komentar pada bagian bawah tutorial ini...!.

Membuat Form Register Dan Login Yang Menarik Dalam Satu Halaman Pada PHP dan MySQL

4 Comments

Post a Comment

Source Code Aplikasi Metode Z-Score Berbasis Web Mobile

Contact Form