Aplikasi CRD Sederhana Dengan AngularJS

Share

Setelah menulis artikel sebelumnya mengenai AJAX dan AngularJS, pada kesempatan ini saya akan menulis artikel untuk membuat aplikasi CRD sederhana dengan kombinasi AJAX, PHP, MySQL dan tentunya AngularJS. Seperti kita ketahui, AngularJS sangat mumpuni untuk membuat single-page application. Sehingga user hanya akan membuka satu halaman tanpa berpindah ke halaman lain pada saat menggunakannya.

Pada aplikasi sederhana ini kita akan mencoba meng-input data, kemudian menampilkan data dan menghapus data. Memang untuk membuatnya kita biasa saja hanya menggunakan PHP, MySQL dan AJAX. Tapi bagaimana kalau kita menambahkan AngularJS?

Berikut ini langkah-langkah yang dilakukan, pastikan web server, PHP dan MySQL sudah berjalan dengan baik di PC/laptop Anda :

  1. Membuat database dan table
    Untuk membuat database bisa dilakukan dengan memakai phpmyadmin. Pada contoh ini saya membuat database dengan nama ‘db_belajar’. Kemudian membuat table dengan nama ‘tb_user’ field-field-nya seperti di bawah ini :
  2. Membuat halaman index.html
    Halaman ini adalah antarmuka dari aplikasi, pastikan Anda telah mendownload AngularJS di sini. Kemudian tempatkan di folder sesuai dengan letak aplikasi Anda. Pada halaman ini juga dipanggil script untuk merespon $http service yaitu script.js.
  3. Membuat script AngularJS : script.js
    Kemudian menulis script AngularJS untuk merespon service $http, saya membuat empat fungsi yaitu : menampilkan data, menyimpan data, menghapus data dan me-reset form.
  4. Membuat halaman PHP
    Ada empat file PHP yang akan dibuat, antara lain :
    a. Koneksi ke database, dengan nama db.php :

    b. Mendapatkan data dari database, dengan nama get.php :

    c. Menyimpan data ke database, dengan nama insert.php :

    d. Menghapus data, dengan nama delete.php :

Kita tentunya masih menggunakan json untuk format membaca data yang diterima, sesuai dengan file get.php.

Semoga bermanfaat 🙂

10 Comments

  1. Bermanfaat sekali artikel nya mas, Trima kasih banyak 🙂

  2. Terima kasih mas tutorialnya sangat membantu bagi pembelajar pemula di angular js seperti saya, semoga berkah share ilmunya…:)

  3. Mas bro, saya mau nanya… kira2 itu bisa ngakses langsung gak ya ke MySQL yang ada di hosting, jadi si PHP db connector-nya yang di baca AngularJS bisa nampil realtime fresh langsung dari live server MySQL-nya, saya kadang keheranan sendiri… bisa gak ya begitu, seharusnya kan bisa semua shell application macam cordova atau ionic basic-nya sama

    • mm
      yudana

      Maret 15, 2017 at 12:25 pm

      Hi mas, hal itu bisa lakukan kok. Remote koneksi database MySQL, masuk ke cpanel kemudian di bagian database pilih remote MySQL dan masukkan IP address yang akan di-allow.

  4. kalo menampilkan data sesuai id /user gmana bro??

  5. crd udah. yg update dong mas

Tinggalkan Balasan

Your email address will not be published.

*