Membuat Form Registrasi dengan Modal Bootstrap 4

-

Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana menggunakan Modal dari Bootstrap 4 untuk membuat sebuah form yang akan digunakan untuk proses registrasi user. Bahan dan alat yang diperlukan sama seperti pada tutorial sebelumnya yaitu,
1. Text Editor. Misalnya Notepad, Notepad++, Sublime Text Editor dan sebagainya.
2. Browser. Saya rekomendasikan menggunakan Google Chrome untuk hasil yang lebih baik.
3. XAMPP atau WAMPP.
4. Bootstrap 4.

Pada tutorial ini saya sarankan untuk membuat sebuah form login seperti pada tutorial sebelumnya untuk mempermudah dalam memahami syntax yang nantinya akan ditulis. Jika alat, bahan dan kebutuhan lain sudah siap maka langsung saja kita coba. Pertama buka file index.php yang berada di dalam folder login.


Kemudian tuliskan syntax berikut pada bagian dalam tag head.
<head>
    <meta charset="UTF-8">
    <title>LOGIN</title>
    <!-- IMPORT FILE DARI DIRECTORY -->
    <link rel="icon" href="bootstrap-4.0.0/assets/img/favicons/favicon-16x16.png">
    <link rel="stylesheet" href="bootstrap-4.0.0/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-4.0.0/dist/css/floating-labels.css">
    <link rel="stylesheet" href="style.css">

    <!-- IMPORT FILE DARI INTERNET -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

Syntax di atas digunakan untuk mengimport file berupa script dari halaman yang ada di internet. Hal ini dikarenakan apabila langsung menggunakan script dari hasil extract file Bootstrap 4 maka terdapat beberapa fungsi komponen yang tidak berjalan. Kejadian tersebut sering terjadi karena sedang dikembangkannya Bootstrap 4 oleh para pengembangnya sehingga belum stabil dan kadang masih terdapat bug.

Selanjutnya tuliskan syntax dibawah ini di dalam tag html.
<!-- MODAL BOOTSTRAP -->
  <div class="modal fade" id="ModalRegistrasi" tabindex="-1" role="dialog" aria-labelledby="myModalRegistrasi">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="myModalRegistrasi">Registration</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="FormRegistrasi" action="">
          <div class="form-label-group">        
            <input name="newFirstName" class="form-control" type="text" id="newFirstName" placeholder="First Name" autocomplate="no" required="">
            <label for="newFirstName">First Name</label>
          </div>

          <div class="form-label-group">
            <input name="newLastName" class="form-control" type="text" id="newLastName" placeholder="Last Name" autocomplete="no" required="">
            <label for="newLastName">Last Name</label>
          </div>

          <div class="form-label-group">        
            <input name="newEmail" class="form-control" type="email" id="newEmail" placeholder="Email" autocomplate="no" required="">
            <label for="newEmail">Email Address</label>
          </div>

          <div class="form-label-group">        
            <input name="newPass" class="form-control" type="password" id="newPass" placeholder="Password" required="">
            <label for="newPass">Password</label>
          </div>

          <div class="form-label-group">        
            <input name="confPass" class="form-control" type="password" id="confPass" placeholder="Confirm Password" required="">
            <label for="confPass">Confirm Password</label>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-success">SIGNUP</button>
        </div>
        </form>
      </div>
    </div>
  </div>

Syntax diatas ini merupakan komponen Modal Bootstrap 4 yang akan muncul setelah melakukan suatu aksi pada dokumen web.

Kemudian tuliskan kembali syntax pada bagian body.
<body>
  <form class="form-signin" id="FormLogin" action="">
    <div class="text-center mb-4">
      <img width="240" height="240" src="bootstrap-4.0.0/assets/img/user.png">
    </div>

    <div class="form-label-group">       
      <input name="inEmail" class="form-control"type="email" id="inEmail" placeholder="Email"  autofocus="yes" autocomplate="no" required="">
      <label for="inEmail">Email Address</label>
    </div>

    <div class="form-label-group">       
      <input name="inPass" class="form-control"type="password" id="inPass" placeholder="Password" required="">
      <label for="inPass">Password</label>
    </div>

    <div class="form-label-group">
      <button type="submit" class="btn btn-lg btn-block btn-primary">LOGIN</button>
    </div>

    <!-- TOMBOL UNTUK MEMUNCULKAN MODAL BOOTSTRAP -->
    <div class="alert alert-warning text-center" role="alert">
      Not Have Account? <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#ModalRegistrasi">Register
      </button>
    </div>
  </form>
</body>

Pada bagian syntax di atas terdapat sebuah button atau tombol yang akan digunakan sebagai pemicu munculnya Modal apabila di lakukan aksi yaitu klik.

Lalu masukkan syntax Javascript dibawah ini diluar tag html.
<script type="text/javascript">
  // UNTUK MEMFOKUSKAN CURSOR PADA INPUT FIRST NAME
  $('#ModalRegistrasi').on('shown.bs.modal', function () {
  $('#newFirstName').trigger('focus')});
</script>

Syntax di atas digunakan untuk memfokuskan cursor saat Modal dibuka pada input dengan id newFirstName. Sehingga akan memudahkan dalam melakukan penginputan data.

Jangan lupa untuk mengatur tampilan dari Modal tersebut. Silahkan ganti atau modifikasi pada file style.css seperti dibawah ini.
body {
 background-image: url("bootstrap-4.0.0/assets/img/repeated-image.jpg");
 background-repeat: repeat;
}

#FormLogin {
 background-color: #b1bace;
 border-radius: 10px;
 border: 1px solid #7283a7;
}

img {
 border: 5px solid #7283a7;
 border-radius: 100%;
}

Apabila digabungkan secara keseluruhan, maka syntax tersebut akan berbentuk seperti ini.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
      <title>LOGIN</title>
      <!-- IMPORT FILE DARI DIRECTORY -->
      <link rel="icon" href="bootstrap-4.0.0/assets/img/favicons/favicon-16x16.png">
      <link rel="stylesheet" href="bootstrap-4.0.0/dist/css/bootstrap.css">
      <link rel="stylesheet" href="bootstrap-4.0.0/dist/css/floating-labels.css">
      <link rel="stylesheet" href="style.css">

      <!-- IMPORT FILE DARI INTERNET -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </head>

 <!-- MODAL BOOTSTRAP -->
  <div class="modal fade" id="ModalRegistrasi" tabindex="-1" role="dialog" aria-labelledby="myModalRegistrasi">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="myModalRegistrasi">Registration</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="FormRegistrasi" action="">
          <div class="form-label-group">        
            <input name="newFirstName" class="form-control" type="text" id="newFirstName" placeholder="First Name" autocomplate="no" required="">
            <label for="newFirstName">First Name</label>
          </div>

          <div class="form-label-group">
            <input name="newLastName" class="form-control" type="text" id="newLastName" placeholder="Last Name" autocomplete="no" required="">
            <label for="newLastName">Last Name</label>
          </div>

          <div class="form-label-group">        
            <input name="newEmail" class="form-control" type="email" id="newEmail" placeholder="Email" autocomplate="no" required="">
            <label for="newEmail">Email Address</label>
          </div>

          <div class="form-label-group">        
            <input name="newPass" class="form-control" type="password" id="newPass" placeholder="Password" required="">
            <label for="newPass">Password</label>
          </div>

          <div class="form-label-group">        
            <input name="confPass" class="form-control" type="password" id="confPass" placeholder="Confirm Password" required="">
            <label for="confPass">Confirm Password</label>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-success">SIGNUP</button>
        </div>
        </form>
      </div>
    </div>
  </div>

<body>
  <form class="form-signin" id="FormLogin" action="">
    <div class="text-center mb-4">
      <img width="240" height="240" src="bootstrap-4.0.0/assets/img/user.png">
    </div>

    <div class="form-label-group">       
      <input name="inEmail" class="form-control"type="email" id="inEmail" placeholder="Email"  autofocus="yes" autocomplate="no" required="">
      <label for="inEmail">Email Address</label>
    </div>

    <div class="form-label-group">       
      <input name="inPass" class="form-control"type="password" id="inPass" placeholder="Password" required="">
      <label for="inPass">Password</label>
    </div>

    <div class="form-label-group">
      <button type="submit" class="btn btn-lg btn-block btn-primary">LOGIN</button>
    </div>

    <!-- TOMBOL UNTUK MEMUNCULKAN MODAL BOOTSTRAP -->
    <div class="alert alert-warning text-center" role="alert">
      Not Have Account? <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#ModalRegistrasi">Register
      </button>
    </div>
  </form>
  </body>
</html>

<script type="text/javascript">
  // UNTUK MEMFOKUSKAN CURSOR PADA INPUT FIRST NAME
  $('#ModalRegistrasi').on('shown.bs.modal', function () {
  $('#newFirstName').trigger('focus')});
</script>

Setelah selesai jangan lupa untuk menyimpan dokumen tersebut terlebih dahulu. Jika sudah silahkan dijalankan dengan XAMPP dan lihat hasilnya. Untuk tampilannya kurang lebih akan seperti pada gambar berikut ini.

Halaman Login

Penampilan Modal Bootstrap 4

DOWNLOAD FILE
FileHost | Mirror

Bagaimana menurut anda? Mudah atau susah? Semua itu tergantung pada anda. Jika mau berusaha pasti segala sesuatu yang sulit akan menjadi lebih mudah. Kunci utama kesuksesan adalah Melihat, Memahami, Mencoba dan Mengulang kembali dari awal hingga berhasil. Sekian dan terima kasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

Layouts HTML5

-
Gambar
Pada versi HTML5, telah dikembangkan beberapa tag yang bertujuan untuk mempermudah pengguna dalam mengatur dan menyusun tata letak komponen pada halaman webnya. Sebelum munculnya penggunaan tag tersebut, banyak tampilan halaman web berwujud seperti koran. Tidak bergitu teratur tata letaknya dan tidak menarik untuk dilihat pembaca. Tag HTML5 yang berkaitan dengan layouts atau tata letak antara lain, 1. <header> 2. <nav> 3. <section> 4. <article> 5. <aside> 6. <footer> 7. <details> Setiap tag mempunyai kegunaan seperti yang dijelaskan pada artikel Semantic Elements HTML5 . Berikut penerapan tag HTML5 pada bagian layouts atau tampilan. Catatan: Untuk melihat hasil dari program tersebut, silahkan klik pada bagian RESULT.
Baca selengkapnya

Rancangan Sistem Login

-
Gambar
Gambar Form Login Pada kesempatan ini saya akan membagikan tentang bagaimana untuk membuat rancangan login untuk postingan sebelumnya . Rancangan yang akan dibuat yaitu algoritma, pseudocode, dan flowchart. Langsung saja berikut ini alur algoritma dalam rancangan login yang akan dibuat. 1. Masukkan alamat email dan password pada form di dalam input. 2. Kemudian klik pada tombol bertuliskan LOGIN. 3. Lalu sistem akan mengecek data yang telah diinputkan. 4. Jika data yang diinputkan sama dengan data yang berada di dalam database, maka akan dialihkan ke halaman utama. 5. Apabila data yang diinputkan tidak sama dengan data yang ada maka akan ada pemberitahuan bahwa email dan atau password salah. 6. Kembali ke halaman login untuk memasukkan email dan password kembali. 7. Jika terjadi kesalahan dalam memasukkan email dan password lebih dari tiga kali, maka otomatis akan diblokir. 8. Jika benar maka akan langsung menuju halaman menu utama. Kemudian untuk pseudocoden
Baca selengkapnya