L O A D I N G
Profile image
  • Name

    Yudana
  • Title

    Website Developer
  • Phone

    -
  • Email

    me@yudana.com
  • Date of birth

    -
  • Age

    -
  • Residence

    Bali
  • Freelance Work

blog banner

Aplikasi CRD Sederhana Dengan AngularJS

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 ๐Ÿ™‚

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *