Membuat CRUD dengan AngularJS dan PHP Part 1

Javascript adalah bahasa scripting yang sangat powerful, tidak hanya berjalan disisi browser saja, namun bahasa ini sudah dikembangkan dan bisa melakukan request ke server. Selain itu Javascript juga telah dikembangkan dalam berbagai jenis framework, salah satunya adalah AngularJS.

AngularJS adalah framework Javascript yang dikembangkan oleh Google dan menjadi framework Javascript paling populer saat ini. Tidak hanya untuk website, AngularJS juga telah digunakan untuk membangun mobile aplikasi dengan teknologi hybrid.

Dalam artikel kali ini saya akan mengajarkan bagaimana membuat CRUD dengan AngularJS dan PHP, caranya sangat mudah. Silahkan teman-teman buat folder crud di dalam xampp/htdocs (pastikan kalian sudah menginstalnya), jika sudah buatlah file index.html dan buatlah kerangka HTML dan panggil file AngularJS.

./htdocs/crud/index.html

Langkah selanjutnya adalah buat database dengan nama angularjscrud, kemudian buat table dengan nama kota, isi table sebanyak 5 data, seperti gambar di bawah ini.

Tabel kota

Kemudian pada index.html, di dalam body, buatlah tag script dan ketikan perintah AngularJS, seperti gambar di bawah ini.

./htdocs/crud/index.html

Perhatikan pada perintah $http, kita akan me-request data pada url http://localhost/crud/select.php, itu artinya kita harus membuat file PHP dan mengetikan perintah untuk memanggil database. Masih pada folder yang sama, buatlah file .htaccess, connect.php dan select.php. Ketikan perintah pada file tersebut sesuai dengan gambar-gambar berikut ini.

./htdocs/crud/.htaccess

Ini adalah perintah yang mengijinkan browser untuk melakukan request ke server.

./htdocs/crud/connect.php

Perintah untuk koneksi database dengan PHP.

./htdocs/crud/select.php

Perintah sql untuk menampilkan database.

Perintah json_encode(), akan menkonvert array menjadi bentuk json. Kalau kita akses maka hasilnya seperti berikut.

Selanjutnya tinggal kita tampilkan menggunakan ng-repeat.

./htdocs/crud/index.html

Silahkan akses, bisa dengan http://localhost atau klik langsung file index.html.

Selamat mencoba!

Baca http://www.dumetschool.com/blog/Membuat-CRUD-Dengan-AngularJS-Dan-PHP-Part-2

6 September 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat