Pada artikel sebelumnya tentang Cara Membuat Edit Data Menggunakan AngularJs Part1 saya sudah membuat struktur html yang berisikan form input untuk edit data dan sebuah table untuk mencetak datanya. Dan pada artikel kali ini yang berjudul Cara Membuat Edit Data Menggunakan AngularJs Part2 kita akan membuat sebuah fungsi edit di dalam controller seperti pada script di bawah ini.

Script di atas teman-teman bisa salin semua, karena disini juga ada fungsi untuk menampilkan data dari databasenya. Tapi untuk fungsi getData() saya anggap mengerti ya teman-teman. Kita akan focus kepada fungsi editData(). Jika teman-teman perhatikan fungsi editData() di atas, saya menggunakan tiga parameter yang mana di ambil dari tombol edit yang sudah di buat di htmlnya. Kemudian saya buat variable id, title dan desc dengan $scope untuk menampilkan data yang kita pilih untuk edit ke dalam form input. Teman teman harus sesuaikan nama variablenya dengan ng-model yang ada di form input htmlnya.

Langkah selanjutnya  Cara Membuat Edit Data Menggunakan AngularJs Part2 kemudian teman-teman buat fungsi ketika tombol submit di tekan. Dimana didalam fungsi tersebut ada metode post untuk mengirim data dengan 2 parameter di dalamnya. Parameter pertama adalah nama file php untuk edit data. Dan parameter kedua adalah data baru yang sudah di edit disambung dengan memnuat callback atau aksi selanjutnya dimana form input title dan desc akan melakukan reset atau kosong kembali.

Langkah terakhir disini saya akan menampilkan script php yang ada di file data.php untuk melakukan request data atau tampil data dan insert.php untuk melakukan update atau ubah data ke dalam database.

Berikut ini adalah gambar dari script data.php

Cara Membuat Edit Data Menggunakan AngularJs Part2

Dan gambar di bawah adalah gambar dari script insert.php

Cara Membuat Edit Data Menggunakan AngularJs Part2

Jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Cara Membuat Edit Data Menggunakan AngularJs Part2

Demikian artikel tentang Cara Membuat Edit Data Menggunakan AngularJs Part2. Semoga dapat bermanfaat dan selamat mencoba.