Tutorial Framework7 Authentication #2 Sign Up Page


Kurnia Andi Nugroho
Semoga kita semua diridhoi
Tutorial Framework7 Authentication #2 Sign Up Page

Pada tutorial sebelumnya kita telah belajar bersama mengenai login page, bagi teman-teman yang hendak mempelajarinya, bisa mengikuti nya DISINI. Dalam materi kali ini, kita akan melanjutkan pembahasan selanjutnya yaitu Sign Up, konsepnya sama persis tentang materi sebelumnya, yaitu pada Materi CRUD, tepatnya pada pembahasan insert. Disini kita akan membuat page Sign Up, agar user bisa membuat/ mendaftarkan siri sebagai admin dalam sebuah aplikasi. Kami membuat contoh dan melanjutkan pada materi sebelumnya, yaitu login page. Mari kita perhatikan kembali halaman login yang sudah kita kerjakan sebelumnya seperti gambar dibawah ini.

Diatas merupakan halaman login kita sebelumnya, mari kita tambahkan satu button baru dibawahnya yaitu button sign up. Yang diharapkan adalah ketika member / user hendak mendaftarkan diri sebagai admin atau sebagai guru atau sebagainya, bisa melalui button sign up nanti teman-teman bisa mengeksplorasi dalam studi kasus lainnya. Dalam materi ini kita akan membuat fitur sign up untuk administrator aplikasi mobile kita. Maka akan menjadi sperti gambar dibawah ini.

Kami menambahkan sedikit class baris kode baru dalam page content dari page home kita. Pada pembahasan sebelumnya kita sepakat bahwasannya untuk halaman home kita isi dengan tampilan login sebuah aplikasi.

<a class="col button color-green" href="/sign_up/">Sign Up</a>

Kami menggunakan class button dengan menggunakan warna green, apabila button ini di klik maka akan diarahkan menuju halaman yang bernama sign_up. Oke, mari kita tambahkan route untuk halaman sign_up yang berada pada file my-app.js.

routes: [{
      path: '/mapel/',
      pageName: 'mapel'
    },
    {
      path: '/admin/',
      pageName: 'admin'
    },
    {
      path: '/home/',
      pageName: 'home'
    },
    {
      path: '/sign_up/',
      pageName: 'sign_up'
    },
    {
      path: '/update/',
      pageName: 'update'
    }
  ],
});

Sampai pada langkah kali ini kita telah menambahkan route untuk halaman baru kita. Yaitu halaman Sign Up. Untuk selanjutnya mari kita membuat halaman sign up yang akan digunakan untuk input detail akun yang akan kita masukkan kedalam database.

<div data-name="sign_up" class="page stacked">
        <div class="navbar color-theme-red">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="left">
              <a href="#" class="button back">
                <i class="icon f7-icons">house</i>
              </a>
            </div>
            <div class="title" style="margin-left: 50px;">Sign Up</div>
            <div class="right">
              <a href="#" class="link back">
                <i class="f7-icons">menu</i>
              </a>
            </div>
          </div>
        </div>
        <div class="toolbar tabbar tabbar-labels toolbar-bottom color-theme-green">
          <div class="toolbar-inner">
            <a href="#tab-4" class="tab-link tab-link-active">
              <i class="f7-icons ">house</i>
              <span class="tabbar-label color-theme-green">Home</span>
            </a>
            <a href="#tab-6" class="tab-link">
              <i class="icon f7-icons ">dot_radiowaves_left_right</i>
              <span class="tabbar-label color-theme-green">Informasi</span>
            </a>
          </div>
        </div>
        <div class="page-content">
          <div class="block-title">Form Sign Up</div>
          <div class="list inline-labels no-hairlines-md">
            <ul>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Nama Lengkap</div>
                  <div class="item-input-wrap">
                    <input id="namalengkap" type="text" placeholder="Nama Lengkap">
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">E-Mail</div>
                  <div class="item-input-wrap">
                    <input id="email" type="email" placeholder="E-Mail">
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Username</div>
                  <div class="item-input-wrap">
                    <input name="kelas" id="username_sign" type="text" placeholder="Username">
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Password</div>
                  <div class="item-input-wrap">
                    <input name="kamar" id="password_sign" type="password" placeholder="Password">
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="block" style="margin-top: 25px">
            <p class="row">
              <button id="submit_daftar" type="button" class="col button button-raised color-green">Submit</button>
              <button id="clear" type="button" class="col button button-raised color-red button back">Clear</button>
            </p>
          </div>
        </div>
      </div>

Seperti pada pembahasan sebelumnya, yang harus diperhatikan adalah penamaan id pada masing-masing form input. Alangkah baiknya kita samakan dengan menggunakan kode diatas saja dengan tujuan untuk mempermudah pembelajaran kali ini. Untuk tampilan form sign up bisa kita tinjau seperti gambar dibawah ini.

Diatas terdapat 4 form input, yang dimulai dari nama lengkap, email kemudian username dan juga form password.

dibawah nya terdapat 2 button, yang pertama button submit berfungsi untuk mengirim data yang dimasukkan melalui form diatas. Sedangkan untuk button clear, berfungsi sebagai membersihkan form tersebut. misalnya kita hendak menghapus secara cepat bisa klik tombol clear tersebut. Berikut baris kode function yang akan kita tambahkan kedalam file my-app.js.

$$("#submit_daftar").click(function () {
  var nama = $$("#namalengkap").val();
  var email = $$("#email").val();
  var username = $$("#username_sign").val();
  var password = $$("#password_sign").val();
  if (nama == "" || email == "" || username == "" || password == "") {
    app.dialog.alert("Harap Lengkapi semua Form Diatas!", "Error");
    return;
  }
  app.request({
    url: "http://localhost/framework7/api/signup.php",
    type: "POST",
    data: {
      'nama': nama,
      'email': email,
      'username': username,
      'password': password
    },
    success: function (data) {
      app.dialog.alert("Berhasil Sign Up,!", "Sukses");
      $$("#namalengkap").val("");
      $$("#email").val("");
      $$("#username_sign").val("");
      $$("#password_sign").val("");
      app.views.main.router.navigate('/home/');
    }
  });
});

kode diatas juga membutuhkan satu file lagi bernama signup.php yang nantinya akan kita gunakan sebagai API untuk memproses insert data kedalam tbl_user . Berikut baris kode lengkapnya file signup.php.

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Credentials:true");
header("Access-Control-Allow-Methods: POST,GET,PUT,DELETE,OPTIONS");
header("Access-Control-Max-Age:604800");
header("Access-Control-Request-Headers: x-requested-with");
header("Access-Control-Allow-Headers: x-requested-with, x-requested-by");
include("koneksi.php");
$a = $_POST["nama"];
$b = $_POST["email"];
$c = $_POST["username"];
$d = $_POST["password"];
$simpan = mysqli_query($koneksi, "INSERT INTO tbl_user (nama_user,username,password,email) VALUES ('$a','$c','$d','$b')") or die(mysqli_error()); 

Adapun untuk fuction javascript pada button clear seperti dibawah ini

$$("#clear").click(function () {
  $$("#namalengkap").val("");
  $$("#email").val("");
  $$("#username_sign").val("");
  $$("#password_sign").val("");
});

Untuk tabel dalam studi kasus kali ini, kita akan menggunakan tabel yang sudah kita buat sebelumnya pada materi login page. Kita akan memanfaatkan tbl_user untuk menampung data yang dikirimkan melalui form sign up ini.

Jika teman-teman sudah berhasil mengikuti materi sampai saat ini. maka kita telah berhasil membuat form sign up dengan sederhana. Kami mencoba menambahkan satu user baru dengan nama Imam Syafii dan username imam kemudian untuk password kita menggunakan admin. Maka ketika kita klik submit akan tampil dan redirect ke halaman home dan user akan dihadapkan dengan page login kembali.

Ketika kita memasukkan detail login pada form login dengan user yang baru saja kita tambahkan, maka akan dialihkan menuju halaman admin.

Kita juga akan menampilkan screenshot database, untuk memastikan apakah data yang kita input benar benar masuk kedalam table yang diharapkan.

Untuk penjelasan page admin dan seterusnya. Akan kita bahas pada materi berikutnya. Alhamdulillaah, sampai disini kita sudah berhasil membuat login sederhana dengan framework7 dan menggunakan bantuan API PHP Native.

Semoga teman-teman berhasil melakukan pembelajaran kali ini dengan baik. jika teradapat problem, mari sama sama kita selesaikan dikolom komentar untuk berdiskusi :D. Sekian yang bisa kami sampaikan, semoga membuahkan ilmu yang bermanfaat. Aamiin :D Selamat Belajar.


Kurnia Andi Nugroho
Semoga kita semua diridhoi

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami