Tutorial Framework7 Authentication #1 Login Page


Kurnia Andi Nugroho
Semoga kita semua diridhoi
Tutorial Framework7 Authentication #1 Login Page

tutorial login f7

Setelah kita mempelajari Tutorial Set CRUD framework7, pada kesempatan kali ini kita akan melanjutkan pembelajaran materi selanjutnya. pada materi ini kita akan membahas login pada aplikasi mobile, yang diharapkan adalah ketika kita mengakses project localhost/framework7, kita akan dihadapkan menuju page login. Di dalam implementasinya, teman-teman bisa mencoba beberapa template page login, seperti bootstrap dll. tapi pada kesempatan kali ini, kami akan menggunakan login yang sudah disediakan oleh framework7 di dalam documents components.

Seperti pada umumnya, di dalam page login terdapat beberapa form yang harus di lengkapi. Halnya Username dan Juga Password. Pada studi kasus kali ini, kita akan membuat dua form saja, yaitu form username dan password sebagai dasar materi pengantar. Mari kita membuat table di dalam database yang sudah kita buat sebelumnya.

Disini kami membuat table baru dengan nama tbl_user di dalam database yang bernama crud. di dalam tbl_user, terdapat 5 column, diantaranya terdapat column username & password. Teman-teman bisa membuat sesuai keinginan masing-masing, tapi alangkah baiknya di samakan dengan kami saja untuk mempermudah proses pembelajaran.

Sebagai contoh, kami menambahkan data ke dalam tbl_user untuk proses pembelajaran dalam materi kali ini.

Gambar diatas, teman-teman bisa melihat data yang baru saja kami tambahkan ke dalam tbl_user. Sebagai bahan pembelajaran dasar, kami menggunakan jenis password biasa, untuk mempermudah dasar-dasar materi. Insyaallah dalam materi selanjutnya kita akan menggunakan beberapa macam type encrypt password seperti md5 SHA-1 dan lain sebagainya.

Sampai disini kita berhasil membuat tabel baru dan menambahkan data kedalam tabel tersebut. Hal selanjutnya yaitu kita akan menambahkan satu page baru kedalam file index.html kita sebelumnya. Yaitu page login.

<div data-name="home" class="page">
        <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;">Login</div>
            <div class="right">
              <a href="#" class="link back">
                <i class="f7-icons">lock_shield</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">
            <div class="page-content login-screen-content">
              <form>
                <div class="list">
                  <img
                    src="assets/img/png-clipart-padlock-computer-icons-key-escape-room-almere-padlock-technic-red-wine-removebg-preview.png"
                    width="75" height="75" class="center">
                  <ul>
                    <li class="item-content item-input color-theme-green">
                      <div class="item-inner">
                        <div class="item-title item-label">Username</div>
                        <div class="item-input">
                          <input type="text" id="username" placeholder="Masukkan Username ">
                        </div>
                      </div>
                    </li>
                    <li class="item-content item-input color-theme-red">
                      <div class="item-inner">
                        <div class="item-title item-label">Password</div>
                        <div class="item-input">
                          <input type="password" id="password" placeholder="Masukkan Password">
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="block">
                  <a class="col button button-raised color-red" href="#" id="login">
                    Login
                  </a>
                  <div class="block-footer">Untuk masuk,<br>Silahkan masukkan Username
                    & Password anda.</div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

Dari baris kode diatas yang perlu diperhatikan adalah baris kode <div data-name="home" class="page">. Jadi inti di dalam framework7 untuk page yang akan ditampilkan di awal project terdapat pada jenis class nya. Jika kita menggunakan jenis class dengan value page, maka halaman ini akan ditampilkan pada root project kita, berbeda halnya jika kita menggunakan value page stacked, maka tidak akan ditampilkan. Dalam hal ini teman-teman bisa mempelajarinya DISINI.

Kemudian kita kembali membahas id yang akan digunakan untuk menampung data yang akan kita input di dalam aplikasi kita nantinya. disini pada form input username, kami menggunakan id dengan value username berikut bisa kita perhatikan bersama beberapa properti yang kita gunakan dalam form input username.

<input type="text" id="username" placeholder="Masukkan Username ">

Seperti halnya username, begitu juga halnya berlaku pada form input password, yang jadi pembeda adalah properti type input nya, dala hal ini kita menggunakan dengan type password, tujuannya agar ketika user melakukan input pada form ini, maka akan berubah menjadi karakter *.

<input type="password" id="password" placeholder="Masukkan Password">

Pada baris berikutnya, kita melihat satu button beserta propertinya, yang diharapkan ketika sudah melakukan input maka akan di submit melalui button tersebut.

<a class="col button button-raised color-red" href="#" id="login">

Dalam hal ini berbeda dengan manajamen page, jadi di dalam href="" kita tidak memasukkan halaman yang dituju. Karena dalam hal ini kita akan berhubungan dengan API login. Yang harus diperhatikan adalah value id.

Langkah berikutnya yaitu menambahkan baris kode ke dalam file my-app.js. Kode ini digunakan untuk menjalankan perintah yang dikirim dari button pada page login yang sudah kita bahas tadi.

$$("#login").click(function () {
  var username = $$("#username").val();
  var password = $$("#password").val();
  if (username == "" || password == "") {
    app.dialog.alert("Login Gagal, Masukkan username & Password", "Error");
    return;
  }
  app.request({
    url: "http://localhost/framework7/api/login.php",
    type: "POST",
    data: {
      "username": username,
      "password": password
    },
    dataType: 'json',
    success: function (data) {
      console.log(data);
      if (data.error) {
        app.dialog.alert(data.pesan, "Error");
        $$("#username").val("");
        $$("#password").val("");
      } else {
        $$("#username").val("");
        $$("#password").val("");
        localStorage.setItem("status", "login");
        localStorage.setItem("id", data.id_user);
        localStorage.setItem("username", data.nama_user);
        app.dialog.alert("Berhasil Log In", "Sukses");
        app.views.main.router.navigate('/admin/');
      }
      var idadmin = "";
      idadmin = idadmin + '<div class="chip-media bg-color-green"><i class="icon f7-icons ">person</i></div><a href="#" id="detailprofile" data-id="' + data.id_user + '" class="chip-label">' + data.nama_user + '</a>';
      $$("#dataid").html(idadmin);
      var infodata = data.pesan;
      $$("#datauser").html(infodata);
    }
  });
});

Penjelasan baris kode diatas, kita akan menggunakan methode get. Dimana ketika data yang di inputkan melalui form login itu sesuai dengan data yang berada didalam database kita tadi. Maka user akan dialihkan menuju halaman admin app.views.main.router.navigate('/admin/');. localstorage, merupakan salah satu cara yang dapat digunakan untuk menyimpan data di web browser. Pada localStorage penyimpanan data tidak memiliki kadaluarsa, artinya data yang disimpan tetap ada meskipun browser telah ditutup, Disini kami menambahkan key dengan status login dan mengambil id beserta username.

Untuk pembahasan halaman admin, akan kita lanjut pada artikel berikutnya. Apabila data yang di input tidak sesuai dengan tabel user maka akan muncul notif app.dialog.alert(data.pesan, "Error"); adapun data.pesan ini kita ambil dari API php kita. Berikut lengkapnya.

<?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");
$username=$_POST['username'];
$password=$_POST['password'];
$login = mysqli_query($koneksi,"select * from tbl_user where username='$username' and password='$password'");
$cek = mysqli_num_rows($login);
$data = array();
if($cek > 0){
	$data = mysqli_fetch_assoc($login);
	{
		$nama = $data["nama_user"];
		$info = $data["username"];
		$id = $data["id_user"];
	}
	$data['info']=$nama;
	if($data['level']=="admin"){
		$_SESSION['username'] = $username;
	}
	}else{
	$data['error']=true;
	$data['pesan']="Username / Password Salah!";
	}
echo json_encode($data,JSON_PRETTY_PRINT);

Kami menyimpan baris kode diatas dengan nama login.php sehingga jika kita lihat direktorinya menjadi /framework7/api/login.php . Berikut hasil screenshot dalam studi kasus ini.

Kami mencoba memasukkan username yang salah. Untuk bahan uji coba, apakah kode yang kita tulis benar apa kurang benar. Ternyata setelah saya klik button login maka akan tampil seperti gambar dibawah ini.

Data pesan itu kita dapat dari API di dalam file login.php tepatnya pada baris ini

else{
	$data['error']=true;
	$data['pesan']="Username / Password Salah!";
	}

Untuk selanjutnya kita akan melakukan uji coba dengan memasukkan username dan password yang sesuai dengan data didalam tabel kita. Maka yang terjadi seperti gambar dibawah ini.

Diatas merupakan detail login yang sesuai yaitu username = admin & password = admin.

Sampai disini kita berhasil masuk ke dalam halaman admin. disana juga terdapat detail login yang kita dapat dari API kita sebelumnya. Tepatnya pada baris kode

{
		$nama = $data["nama_user"];
		$info = $data["username"];
		$id = $data["id_user"];
	}

Dan kemudian kita teruskan kedalam function pada file my-app.js.

 var idadmin = "";
      idadmin = idadmin + '<div class="chip-media bg-color-green"><i class="icon f7-icons ">person</i></div><a href="#" id="detailprofile" data-id="' + data.id_user + '" class="chip-label">' + data.nama_user + '</a>';
      $$("#dataid").html(idadmin);
      var infodata = data.admin;
      $$("#datauser").html(infodata);

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