Tutorial CRUD Framework7 Bahasa Indonesia #2 Read Data Dari Database


Kurnia Andi Nugroho
Semoga kita semua diridhoi
Tutorial CRUD Framework7 Bahasa Indonesia #2 Read Data Dari Database

Pada tutorial sebelumnya kita telah sedikit belajar mengenai CRUD mengunakan Php Native didalam Framework7.

setelah kita berhasil menyelesaikan pembelajaran pada bab pertama yaitu bagaimana caranya untuk input data menuju database menggunakan framework7. Kali ini kita akan belajar bagaimana untuk menampilkan data yang sudah kita input agar bisa tampil didalam aplikasi Mobile kita.

Langsung saja, dalam hal ini kita akan menampilkan data (READ) didalam page home. jadi didalam page content home, kita akan menambah component table dari framework7 . karena data yang kita tampilkan adalah berupa data mata pelajaran, alangkah baiknya kita tampilkan dalam bentuk table agar lebih kompleks.

Yang perlu diperhatikan disini adalah, pada baris code

<div class="block">
            <div class="data-table">
              <table>
                <thead>
                  <tr>
                    <th>No.</th>
                    <th>Nama Mapel</th>
                    <th>Kode Mapel</th>
                  </tr>
                </thead>
                <tbody id="tampil">
                </tbody>
              </table>
            </div>
          </div>

<tbody> element digunakan untuk mengelompokkan konten yang terletak pada bagian tubuh table itu sendiri. Di dalam element <tbody> tersebut, harus ditulis element <tr> yang menunjukkan table row atau baris sebuah table.

didalamnya saya menambahkan id="tampil" agar yang diharapkan proses transmisi data dari server yang dibantu API akan ditangan oleh JavaScript kemudian akan ditampilkan oleh index.html kita.

Selanjutnya kita akan menambah baris kode didalam file my-apps.js. seperti baris kode dibawah ini.

function lihat() {
  app.request.json('http://localhost/framework7/api/lihat.php', function (data) {
    var jlh = data.length;
    var i = "";
    console.log(data);
    var buatTabel = "";
    for (i = 0; i < jlh; i++) {
      buatTabel += "<tr>" +
        "<td>" + (i + 1) + "</td>" +
        "<td>" + data[i].kd_mapel + "</td>" +
        "<td>" + data[i].nama_mapel + "</td>" +
        "</tr>";
    }
    $$("#tampil").html(buatTabel);
  });
}

Dari penjelasan kode diatas, kita akan menggunakan api baru yang akan digunakan untuk mendapatkan semua data yang kita inginkan. Disini kita membuat satu file baru bernama lihat.php. file ini berisi query PHP dengan syntax untuk menampilkan data dari table Mata Pelajaran yang sebelumnya kita telah membuatnya.

Berikut untuk script lengkap dari file lihat.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();
$cari = mysqli_query($koneksi, "select * FROM tbl_mapel");
while ($row = mysqli_fetch_object($cari)) {
    $data[] = $row;
}
echo json_encode($data);

Kode diatas kita akan menggunakan Select *, berarti dengan tujuan semua row didalam table mapel akan diminta. Fungsi json_encode() adalah mengembalikan representasi JSON dari suatu nilai. Dengan kata lain, ia mengubah variabel PHP (berisi array) menjadi JSON.

kemudian kita akan fokus kembali pada kode my-app.js setelah kita memahami tentang API lihat.php, kali ini kita teruskan dengan penjelasan berikutnya yaitu

"<td>" + data[i].kd_mapel + "</td>" +
"<td>" + data[i].nama_mapel + "</td>" +

Diatas merupakan contoh perulangan/ Looping, adapun kd_mapel dan nama_mapel merupakan nama kolom yang telah kita buat dari table yang bernama tbl_mapel dari database kita.

$$("#tampil").html(buatTabel);

Beikut merupakan full code dari file my-app.js kita.

var app = new Framework7({
  el: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  panel: {
    swipe: true,
  },
  view: {
    stackPages: true,
  },
  routes: [{
    path: '/mapel/',
    pageName: 'mapel'
  }, ],
});

var mainView = app.views.create('.view-main');
var $$ = Dom7;
lihat();

$$("#tambah").click(function () {
  var kd = $$("#kd_mapel").val();
  var nama = $$("#nama_mapel").val();
  app.request({
    url: "http://localhost/framework7/api/tambah.php",
    type: "POST",
    data: {
      'kd': kd,
      'nama': nama
    },
    success: function (data) {
      app.dialog.alert("Berhasil Tambah Jadwal!");
      $$("#kd_mapel").val("");
      $$("#nama_mapel").val("");
    }
  });
});

function lihat() {
  app.request.json('http://localhost/framework7/api/lihat.php', function (data) {
    var jlh = data.length;
    var i = "";
    console.log(data);
    var buatTabel = "";
    for (i = 0; i < jlh; i++) {
      buatTabel += "<tr>" +
        "<td>" + (i + 1) + "</td>" +
        "<td>" + data[i].kd_mapel + "</td>" +
        "<td>" + data[i].nama_mapel + "</td>" +
        "</tr>";
    }
    $$("#tampil").html(buatTabel);
  });
}

kemudian kita akan menampilkan data dari tbl_mapel kedalam front end aplikasi kita, disini kita akan menggunakan #tampil yang akan kita implementasikan kedalam baris kode <tbody id="tampil"> pada file index.html.

untuk hasil lengkapnya akan tampil seperti gambar dibawah ini.

Alhamdulillaah, sampai disini kita sudah berhasil melakukan Read 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