Tutorial CRUD Framework7 Bahasa Indonesia #3 Update Data ke dalam Database


Kurnia Andi Nugroho
Semoga kita semua diridhoi
Tutorial CRUD Framework7 Bahasa Indonesia #3 Update Data ke dalam Database

Semoga teman-teman semua diberikan kemudahan dalam mencari ilmu, pada tutorial CRUD sebelumnya kita bersama telah belajar untuk Create & Read data menggunakan framework7 dengan API Php Native, selanjutnya kita akan belajar tentang bagaimana cara untuk update data dari database dan ketika proses update sudah selesai yang diharapkan adalah kita akan melihat data yang sudah di update terebut kedalam aplikasi Mobile kita, hal ini berlaku untuk text/ file yang sudah kita input didalam database jika terdapat kesalahan dalam input text maka kita bisa dengan mudah untuk merubahnya melalui ponsel kita masing-masing.

Baik, pertama-tama kita harus menambahkan sedikit baris kode kedalam kode perulangan yang sudah kita buat kemarin, agar nanti didalam tampilan nama mapel dan kode mapel terdapat button update dan juga button delete.

lengkapnya bisa teman-teman perhatikana baris kode dibawah ini .

 "<td>" + (i + 1) + "</td>" +
        "<td>" + data[i].kd_mapel + "</td>" +
        "<td>" + data[i].nama_mapel + "</td>" +
        "<td><a href='#' id='ubah' data-id='" + data[i].id_mapel + "'>Update</a>&nbsp|<a href='#' id='hapus' data-id='" + data[i].id_mapel + "'>Delete</a><td>" +
        

Pada listing diatas kita menambahkan dua link yaitu Update dan Delete dengan masing-masing data-id yang kita peroleh dari tbl_mapel Database kita sebelumnya. sampai disini untuk menambah update dan delete pada tampilan awal telah selesai.

Berikutnya kita akan menambahkan Paramater Routes pada file my-app.js terlebih dahulu. Hal ini diharapkan agar ketika kita mengklik salah satu link, maka akan diarahkan menuju halaman yang kita inginkan.

routes: [{
      path: '/mapel/',
      pageName: 'mapel'
    },
    {
      path: '/home/',
      pageName: 'home'
    }, {
      path: '/update/',
      pageName: 'update'
    }
  ],

Dari baris kode diatas, kita telah menambahkan dua parameter baru, yaitu Routes untuk halaman update agar kita bisa merubah data yang kita inginkan dihalaman / page tersebut, dan juga terdapat routes untuk halaman home, hal ini bertujuan agar ketika kita sudah selesai dalam proses edit/ update data, maka kita akan diarahkan menuju halaman / Page Home kita sebelumnya.

ketika proses Routing sudah selesai, maka hal selanjtnya adalah dengan membuat satu halaman dengan fitur page stacked, agar kita bisa dimudahkan oleh pengelompokkan susunan baris kode kita.

dalam hal ini kita bisa menyalin listing code kita sebelumnya.

<div data-name="update" class="page stacked">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Update Mapel</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">
            <form class="list" id="my-form">
              <ul>
                <li>
                  <div class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-title item-label">Kode Mapel</div>
                      <div class="item-input-wrap">
                        <input type="text" id="kd_mapel_e" placeholder="Kode Mapel">
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-title item-label">Nama Mapel</div>
                      <div class="item-input-wrap">
                        <input type="text" id="nama_mapel_e" placeholder="Mata Pelajaran">
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </form>
            <div class="block block-strong row">
              <div class="col">
                <a class="col button button-outline color-theme-green" href="#" id="update">
                  Update Mapel
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

Disini kami membuat baris kode untuk halaman update kita. dengan menggunakan pageName update. didalam page ini juga sama persis seperti halnya tampilan input data pada pembahasan sebelumnya. yang harus diperhatikan adalah pemberian id pada masing-masing form edit tersebut.

<input type="text" id="kd_mapel_e" placeholder="Kode Mapel">
<input type="text" id="nama_mapel_e" placeholder="Mata Pelajaran">

kami melakukan sedikit perubahan, agar ketika program dijalankan tidak terjadi error dengan alasan penamaan id yang sama. selanjutnya mari kita perhatikan baris kode berikut

<a class="col button button-outline color-theme-green" href="#" id="update">
                  Update Mapel
                </a>

Kita menambahkan button dengan menggunakan id update, agar ketika data yang kita edit melalu form edit akan diproses oleh button update ini.

oke, untuk langkah-langkah pembuatan halaman update telah kita lakukan, hal berikutnya adalah membuat function update didalam javascript lebih tepatnya apda file my-app.js.

$$("#tampil").on("click", "#update", function () {
  app.views.main.router.navigate('/update/');
  var id = $$(this).data("id");
  app.request.json('http://localhost/framework7/api/get_mapel.php', {
    id: id
  }, function (data) {
    $$("#id_mapel").val(data[0].id_mapel);
    $$("#kd_mapel_e").val(data[0].kd_mapel);
    $$("#nama_mapel_e").val(data[0].nama_mapel);
  });
});

Penjelasan kode diatas, kita menggunakan form dengan inisial #tampil kemudian kita menggunakan data-id yang telah kita siapkan sebelumnya, hal ini kita menggunakan id_mapel dalam table ita , yang nantinya untuk mendapatkan row sesuai id yang ingin kita update. berikut agar mengingat kode sebelumnya.

"<td><a href='#' id='update' data-id='" + data[i].id_mapel + "'>Update</a>

Diatas kita bisa melihat id yang kita gunakan selanjutnya untuk proses update data didalam framework7. selanjutnya kita akan membat satu file bernama get_mapel.php yang mana bertujuan untuk mendapatkan row yang sesuai dari data id yang bersangkutan.

Berikut daftar lengkap kode get_mapel.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");
$data = array();
$id = $_GET['id'];
$cari = mysqli_query($koneksi, "select * FROM tbl_mapel WHERE id_mapel ='$id'") or die(mysqli_error());
while ($row = mysqli_fetch_object($cari)) {
    $data[] = $row;
}
echo json_encode($data);

Jika sudah, sampai langkah ini kita akan mendapatkan row yang sesuai diinginkan dan ditampilkan dalam form update yang sudah kita buat sebelumnya.

Kita telah berhasil mendapatkan data yang ingin kita update, Selanjutnya kita akan membuat function didalam file my-app.js. agar ketika kita melakukan perintah pada button UPDATE MAPEL. otomatis data akan diperbarui didalam table kita, Berikut lengkapnya.

$$("#update").click(function () {
  var id = $$("#id_mapel").val();
  var kd = $$("#kd_mapel_e").val();
  var nama = $$("#nama_mapel_e").val();
  if (id == "" || kd == "" || nama == "") {
    app.dialog.alert("Harap Lengkapi semua Form Diatas!", "Error");
    return;
  }
  app.request({
    url: "http://localhost/framework7/api/update.php",
    type: "POST",
    data: {
      'id': id,
      'kode': kd,
      'nama': nama
    },
    success: function (data) {
      app.dialog.alert("Data berhasil di Update,!", "Sukses");
      app.views.main.router.navigate('/home/');
      lihat();
    }
  });
});

Disini kita menggunakan tambahan kode Validator, apabila form input yang didefinisikan belum diisi/ kosong maka aan muncul alert dengan pesan Harap Lengkapi semua Form Diatas! dengan title alert Error. kemudian disini kita membuat file dengan nama update.php. didalamnya kita menggunakan query set untuk proses update. bisa dilihat dibawah ini.

<?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["kode"];
$c = $_POST["nama"];
$simpan = mysqli_query($koneksi, "UPDATE tbl_mapel SET kd_mapel='$b', nama_mapel='$c' WHERE id_mapel='$a'") or die(mysqli_error()); 

Sampai disini kita telah berhasil untuk membuat update, pada project kita.hasilnya bisa kita lihat seperti gambar dibawah ini.

Diatas merupakan proses update, sebelumnya kita menggunakan kode mapel 123-fiqih, Kali ini kita coba untuk merubah menjadi 123-Nahwu dan nama mapel akan kita update menjadi Nahwu.

Ketika proses update berhasil, kita akan mendapatkan Alert seperti gambar diatas, untuk lebih yakin, kita juga bisa melihat didalam database apakah benar berubah data yang baru saja kita update. seperti gambar dibawah ini.

Diddalam database juga berhasil untuk update data, Kita juga bisa melihat didalam Page Home data yang kita update juga akan ikut berubah,

Alhamdulillaah, sampai disini kita sudah berhasil melakukan Update Data dengan framework7 dengan 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