Pengiriman data menggunakan Ajax jQuery

admin
Arief Siswanto
2019-11-09 09:51:43
Reply Share

Tambahkan ajax berikut pada peminjamanBuku\index.php
pada bagian ini kita mengambil data dari file update.php dan menampungnya dengan sintax form.serialize() dimana sintax tersebut untuk mengumpulkan data input yang ada pada form tersebut.
kemudian kita set form id menggunakan id dari buku guna mendapatkan primary key kemudian data dikirimkan ke API buku dan di proses, jika berhasil tersimpan modal dialog akan menampilkan data berhasil disimpan.


       $("#saveRecord").click(function(){
            var modal = $("#myModal");
            var content = modal.find(".modal-body");
            var form = modal.find(".modal-body form");
            var id = form.attr("id");

            $.ajax({
                method: "POST",
                url: "http://localhost/peminjamanbuku/api/buku.php?action=saveUpdate&id="+id,
                data: form.serialize()
            }).done(function( response ) {
                if(response == true){
                    content.html("data berhasil tersimpan!");
                }
            });
        });

Tambahkan id pada form di peminjamanBuku\update.php
pada bagian ini untuk menentukan primary key dari data yang ditampilkan

<form action="" id="<?= isset($model['id_buku']) ? $model['id_buku'] : '' ?>">

Dan hide dulu field kategori (jika kalian tambahkan field ini) karena ini akan dibahas pada pertemuan selanjutnya.

Tambahkan method pada baseModel class
method ini untuk membuat query update dan menyimpannya ke dalam database

    /**
     * data adalah data post yang dikirim oleh ajax
     * @param type $data
     * return boolean
     */
    public function saveUpdate($data, $id){
        $query = "UPDATE {$this->tableName()} SET ";
       
        $rawData = array()
        foreach($data as $key => $value){
            $rawData[] = "`{$key}` = '{$value}' ";
        }
       
        $query .= implode(",", $rawData);
        $query .= " WHERE {$this->primary()} = '{$id}'";
       
        echo $this->saveRecord($query);
    }
   
    /**
     *
     * @param type $query
     * @return type
     */
    public function saveRecord($query){
        $connection = $this->conn;
        $sql = $connection->query($query)->execute();
       
        return $sql;
    }

Tambahkan pada API buku
bagian ini untuk menambahkan action API yang akan di proses dan memanggil method yang ada pada baseModel karena buku adalah anak class dari baseModal

    case 'saveUpdate':
        $data = isset($_POST) ? $_POST : die;
        $id = isset($_GET['id']) ? $_GET['id'] : die;
        return $model->saveUpdate($data, $id);

buatlah sampai koding kasus ini berjalan dengan baik dan kirimkan koding anda ke link berikut.
semua file dari materi sebelumnya dapat didownload disini.

No reply found.