Tutorial CRUD Framework7 Bahasa Indonesia #1 Insert Data ke dalam Database


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

Setelah kita belajar dari dasar- dasar mobile programming, kemudian jenis dan type pemrogramman yang ada didalam mobile programming , pengertian hybrid apps dan juga dilanjutkan dengan instalasi & inisialisasi framewework7.kemudian juga dibahas sedikit mengenai component yang teredapat di dalam framework7. pastinya kita semua sudah faham untuk dasar-dasar didalam framework7. untuk itu, pada materi kali ini kita akan belajar menerapkan CRUD pada framework7, istilah ini bagi-teman-teman semua mungkin tidak asing lagi. bagi teman-teman yang masih belum memahami apa itu CRUD ? bisa untuk mengikuti tutorial set ini, yang diharapkan setelah belajar bersama santrikoding teman-teman bisa mengimplementasikan ilmu yang didapat untuk mengeksplore project lainnya.

Oke langsung saja CRUD yang berarti Create Read Update dan Delete. Create memungkinkan kita untuk menambah/ input data baru yang nantinya dikirim kedalam table database menggunakan bantuan API .studi kasus ini bisa menambah data produk, data mahasiswa data jadwal dan lainnya menuju database teman-teman dalam bentuk mobile apps. otomatis pekerjaan akan menjadi lebih mudah karena proses input bisa dilakukan melalui smartphone teman-teman tanpa harus membuka laptop ataupun personal computer.

Disini kami menggunakan kode index.html yang kemarin kemudian kami edit sedikit agar pengoperasiannya mendukung CRUD, berikut lengkapnya.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#2196f3">
  <title>My App</title>
  <link rel="stylesheet" href="assets/css/framework7-bundle.min.css">
  <link rel="stylesheet" href="assets/css/my-app.css">
  <link rel="stylesheet" href="assets/css/framework7-icons.css">
</head>

<body>
  <div id="app">
    <div class="view view-main">
      <div data-name="home" class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Simple CRUD Framework7</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"><a href="/mapel/" class="col button button-outline color-theme-green">Tambah
              Jadwal</a>
          </div>
          <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>
        </div>
      </div>
      <div data-name="mapel" class="page stacked">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Tambah 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" 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" 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="tambah">
                  Tambah Mapel
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script>
  <script type="text/javascript" src="assets/js/my-app.js"></script>
</body>

</html>

Dari kode diatas kettika kita Run menggunakan Browser Emulator maka hasilnya seperti gambar dibawah ini:

Yang perlu teman-teman ketahui, dari kode diatas kami merubah sedikit untuk tampilan home dan menambah satu form input yang mana form itu menggunakan path mapel dan pageName mapel, hal ini agar ketika kita meng-click button tambah maka yang diharapkan kita akan diarahkan menuju form input tambah Mata Pelajaran.

pada form tambah mata pelajaran yang perlu diingat adalah masing-masing id didalam form input teman-teman karena hal ini akan berkaitan dengan proses input data kedalam Database dan nantinya akan dihubungkan dengan JavaScript dalam proses simpan / create data.

<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" 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" 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="tambah">
                  Tambah Mapel
                </a>
              </div>
            </div>

Listing Code diatas merupakan form input kita, disini kami akan menjelaskan dari fungsi dan tujuan kode diatas.

<input type="text" id="kd_mapel" placeholder="Kode Mapel">

Kode diatas terdapat Form Input dengan type text, disini karena yang kita akan masukkan adalah data dengan jenis text, hal ini bisa dirubah dengan kebutuhan teman-teman. Kemudian terdapat id dengan vallue kd_mapel nah id ini akan kita gunakan untuk menginisialisasi masing-masing form dan akan diteruskan menuju API kita.

hal ini berlaku untuk semua form input kita didalam menggunakan framework7. Usahakan menggunakan kata yang mudah, agar tidak terjadi error / problem dalam proses input data menuju Database.

kemudian dibawahnya terdapat baris Script button, hal ini bertujuan ketika kita melakukan click pada button tersebut maka data yang kita masukkan diharapkan tersimpan didalam database.

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

Pada button kita tambahkan id dengan value tambah. setelah teman-teman sudah memahami dasar-dasar inisialisasi id form , maka lebih baiknya kita siapkan terlebih dahulu database kita.

disini kami sudah membuat database menggunakan nama database crud dan didalamnya terdapat 1 table dengan 3 column. Lebih lengkapnya seperti gambar dibawah ini.

Dalam studi kasus ini teman-teman bisa mencotoh semua konfigurasi database seperti diatas agar lebih mudah dalam prakteknya, atau teman-teman bisa menggunakan nama dan konfigurasi teman-teman masing-masing.

Setelah berhasil untuk membuat Database dan Table, mari kita menuju kedalam script my-app.js kita .

disini kami menambahkan beberapa baris kode . lengkapnya seperti dibawah ini

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;
$$("#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("");
    }
  });
});

Kami menambahkan Routes baru untuk halaman tambah kita dengan inisialisasi path: '/mapel/', pageName: 'mapel' disini kami menambahkan variabel DOM7 silahkan teman-teman bisa mempelajarinya DISINI. kita fokus pada proses input data,

$$("#tambah").click(function () {

itu merupakan id dari kode html kita sebelumnya yang berada pada button dengan idtambah.

untuk berikutnya var kd dan var nama kita gunakan untuk menampung data sementara yang id input melalui form tambah data jadwal diatas.

var kd = $$("#kd_mapel").val();
var nama = $$("#nama_mapel").val();

Kemudian kita akan membuat satu file dengan extensi file php. ini merupakan API yang akan kita gunakan untuk mengirim data ke dalam table database yang telah kita buat

 url: "http://localhost/framework7/api/tambah.php",

berikut daftar susunan kode lengkap dari file tambah.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["kd"];
$b = $_POST["nama"];
$simpan = mysqli_query($koneksi, "INSERT INTO tbl_mapel (kd_mapel,nama_mapel) VALUES ('$a','$b')") or die(mysqli_error()); 

Oh iya, kita juga harus membuat satu file koneksi dengan tujuan untuk menghubungkan dengan Database.

berikut file koneksi kita.

<?php
  error_reporting(0);
  header("Access-Control-Allow-Origin: *");
  date_default_timezone_set("Asia/Jakarta");
  $koneksi = mysqli_connect("localhost", "root", "", "crud");
?>

Disini kami meletakkan kedua file didalam folder localhost/htdocs/framework7/api/tambah.php dan localhost/htdocs/framework7/api/koneksi.php silahkan teman-teman letakkan sesuai folder yang teman-teman inginkan. Yang terpenting pengarahan file dalam konfigurasi tepat agar tidak terjadi error.

kembali lagi menuju file tambah.php disitu terdapat CORS yakni Konfigurasikan server web untuk mengirim header CORS yang terbatas dengan setiap respons, sehingga memiliki beberapa permissions yang ditentukan, misalanya untuk Get, Put dll. untuk lebih lengkap nya teman-teman bisa membaca referensi lengkap lainnya mengenai CORS.

$a = $_POST["kd"];
$b = $_POST["nama"];
$simpan = mysqli_query($koneksi, "INSERT INTO tbl_mapel (kd_mapel,nama_mapel) 

Baris kode diatas merupakan variable yang kita dapat dari file my-app.js Agar lebih simple disini kami merubahnya menjadi huruf saja agar cepat . dan kita tambahkan satu variable $simpan. disini prose query insert dilakukan.

lebih lengkapnya hasil dari insert/ create pada framework7 akan terlihat sebagaimana gambar dibawah ini.

Disitu kami memasukkan Kode Mapel dan Nama Mapel. dan untuk data yang dikirim kedalam database akan seperti hasil dibawah ini.

Alhamdulillaah, sampai disini kita sudah berhasil melakukan Create Data dengan framework7.

Semoga teman-teman berhasil melakukan Input/ Create Data. 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