Tutorial Framework7 Authentication #3 View & Update User Profile


Kurnia Andi Nugroho
Semoga kita semua diridhoi
Tutorial Framework7 Authentication #3 View & Update User Profile

Semoga kita semua diberikan kemudahan dalam mencari ilmu. Dan mendapatkan ilmu yang bermanfaat dan barokah. Melanjutkan materi berikutnya, sebenarnya materi ini implementasi dari dasar CRUD, hanya saja kita terapkan dalam studi kasus aplikasi santri. Bagi teman-teman yang ingin mempelajari dasar-dasar CRUD, bisa mengikutinya melalui Tutorial Set ini.

Pada materi sebelumnya kita telah berhasil membuat Login Dan Sign Up User. Pada pembahasan kali ini kita akan membuat sebuah page, dimana page ini berfungsi untuk melihat dan memperbarui detail user, yang nantinya user bisa melihat data detail user yang dimulai dengan melihat nama user, email, username dan juga untuk update password.

Baik, langsung saja kita tambahkan satu page baru dengan menggunakan data-name="editprofile" , seperti biasanya, kita akan menggunakan parameter stackPage. Berikut baris kode editprofile.

<div data-name="editprofile" class="page stacked">
        <!-- Top Navbar -->
        <div class="navbar color-theme-red">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="left">
              <a href="#" class="back button">
                <i class="icon f7-icons">arrow_left</i>
              </a>
            </div>
            <div class="title">View Profile</div>
            <div class="right">
              <div class="chip">
                <div class="chip-media bg-color-green">
                  <i class="icon f7-icons ">person</i>
                </div>
                <a href="/editprofile/" class="chip-label" id=""></a>
              </div>
            </div>
          </div>
        </div>
        <!-- Scrollable page content -->
        <div class="page-content">
          <div class="block-title">Detail & Update Profile</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</div>
                  <div class="item-input-wrap">
                    <input id="txtadmin" type="text" placeholder="Nama Admin">
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Email</div>
                  <div class="item-input-wrap">
                    <input id="user_email" type="text" placeholder="Username Admin">
                  </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 id="txtusername" type="text" placeholder="Username Admin">
                  </div>
                </div>
              </li>
              <input type="hidden" id="idadmin" readonly>
              <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="txtpassword" id="txtpassword" type="password" placeholder="Password">
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="block" style="margin-top: 25px">
            <p class="row">
              <button id="updateadmin" 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">Cancel</button>
            </p>
          </div>
        </div>
      </div>

Baris kode diatas akan kita gunakan untuk menampilkan dan juga sekaligus untuk proses update data user, disana teerdapat beberapa form dengan id masing-masing yang berbeda, dimana id tersebut akan digunakan untuk function view dan update profile dalam file my-app.js .

Setelah kita berhasil menambahkan satu page baru dengan menggunakan data-name="editprofile", jangan lupa untuk menambahkan pagename tersebut dalam parameter routes kita.

{
path: '/editprofile/',
pageName: 'editprofile'
},

Jika sudah, mari kita sedikit kembali membahas project kita sebelumnya seperti gambar dibawah ini.

Kita Akan memanfaatkan icon kanan atas untuk langkah awal menuju halaman edit dan detail profile. disana terdapat baris kode seperti dibawah ini.

<div class="navbar color-theme-red">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="left">
              <a href="#" id="logout" class="link icon-only">
                <i class="icon f7-icons">power</i>
              </a>
            </div>
            <div class="title">Administrator</div>
            <div class="right">
              <div id="dataid" class="chip">
              </div>
            </div>
          </div>
</div>

Baris kode diatas merupakan potongan dari halaman admin, bagi teman-teman yang belum mengetahuinya bisa mengikuti DISINI untuk melihat kelengkapan kode nya. Yang perlu diperhatikan adalah <div id="dataid" class="chip">. id dataid ini kita peroleh dari API login kita sebelumnya. Ini digunakan untuk mendefinisikan user satu dengan yang lainnya.

Mari kita menambahkan function untuk menuju halaman view & edit profile. Teman-teman bisa kembali membuka file my-app.js dan tambahkan function berikut ini.

$$("#dataid").on("click", "#detailprofile", function () {
  app.views.main.router.navigate('/editprofile/');
  var id = $$(this).data("id");
  app.request.json('http://localhost/framework7/api/editadmin.php', {
    id: id
  }, function (data) {
    $$("#idadmin").val(data[0].id_user);
    $$("#txtadmin").val(data[0].nama_user);
    $$("#user_email").val(data[0].email);
    $$("#txtusername").val(data[0].username);
  });
});

SIngkat maksud dari kode diatas adalah ketika kita melakukan klik pada baris kode yang memiliki id dataid maka kita akan di redirect menuju halaman editprofile yang tadi kita sudah membuatnya. Disini kita juga membutuhkan satu file dengan ekstensi php yang bernama editadmin.php. Untuk penamaan file bisa sesuka teman-teman, 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");
$data = array();
$id = $_GET['id'];
$cari = mysqli_query($koneksi, "select * FROM tbl_user WHERE id_user ='$id'") or die(mysqli_error());
while ($row = mysqli_fetch_object($cari)) {
    $data[] = $row;
}
echo json_encode($data);

Diatas kita menggunakan id untuk mendapatkan detail data yang berkaitan dengan id tersebut, detail tersebut kita ambil dari tabel user kita sebelumnya. Jika sudah maka kita bisa melihat detail user seperti gambar dibawah ini.

Sampai pada langkah ini, kita berhasil mendapatkan detail data user. Langkah selanjutnya kita akan membuat proses update user. Dalam hal ini kita cukup menambahkan function baru kedalam file my-app.js kita dengan menggunakan id dari button submit dalam baris kode editprofile diatas.

$$("#updateadmin").click(function () {
  var id = $$("#idadmin").val();
  var nama = $$("#txtadmin").val();
  var username = $$("#txtusername").val();
  var email = $$("#user_email").val();
  var password = $$("#txtpassword").val();
  if (id == "" || email == "" || nama == "" || username == "" || password == "") {
    app.dialog.alert("Harap Lengkapi semua Form Diatas!", "Error");
    return;
  }
  app.request({
    url: "http://localhost/framework7/api/updateadmin.php",
    type: "POST",
    data: {
      'id': id,
      'nama': nama,
      'username': username,
      'email': email,
      'password': password
    },
    success: function (data) {
      app.dialog.alert("Data berhasil di Update,!", "Sukses");
      $$("#txtadmin").val("");
      $$("#txtusername").val("");
      $$("#user_email").val("");
      $$("#txtpassword").val("");
      app.views.main.router.navigate('/admin/');
    }
  });
});

Diatas juga membutuhkan satu file bernama updateadmin.php, file ini akan berfungsi sebagai proses update data menuju database.

<?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["id"];
$b = $_POST["nama"];
$c = $_POST["username"];
$d = $_POST["password"];
$e = $_POST["email"];
$simpan = mysqli_query($koneksi, "UPDATE tbl_user SET nama_user='$b', username='$c', password='$d', email='$e' WHERE id_user='$a'") or die(mysqli_error()); 

Sampai pada langkah ini kita berhasil membuat aplikasi sederhana view dan update profile user. Untuk hasil yang didapatkan bisa kita lihat seperti gambar dibawah ini.

Disini kami mencoba memasukkan data yang berbeda, sebelumnya kita menggunakan nama Kurnia Andi Nugroho, dan email kurniaandi18@gmail adapun username sebelumnya kita menggunakan username andi. Sekarang kita akan merubahnya sesuai gambar diatas. maka akan tampil seperti dibawah ini.

Maka data yang kita update akan berubah, untuk memastikan, kita juga bisa melihat didalam database pada tbl_user kita.

Untuk penjelasan LogOut dan seterusnya. Akan kita bahas pada materi berikutnya. Alhamdulillaah, sampai disini kita sudah berhasil membuat view dan update profile 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