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 :
- 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 :CREATE TABLE `tb_user` ( `user_id` int(5) NOT NULL AUTO_INCREMENT, `user_name` varchar(50) DEFAULT NULL, `user_email` varchar(50) DEFAULT NULL, `user_address` varchar(50) DEFAULT NULL, PRIMARY KEY (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
- 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.<!DOCTYPE html> <html ng-app="simpleApp"> <head lang="en"> <meta charset="utf-8"> <title>Aplikasi Sederhana Dengan AngularJS, PHP, AJAX dan MySQL </title> <style> .data th , .data td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } .data tr:nth-child(odd) { background-color: #f2f2f2; } .data tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>Masukkan Data User</h2> <div ng-controller="mainController"> <form> <table border="0"> <tr> <td>Nama</td> <td><input type="text" ng-model="newName" /></td> </tr> <tr> <td>Email</td> <td><input type="email" ng-model="newEmail" /></td> </tr> <tr> <td>Alamat</td> <td><input type="text" ng-model="newAddress" /></td> </tr> <tr> <td></td> <td><button ng-click="reset()">Reset</button> <input type="button" value="Simpan" ng-click="addUser()"></td> </tr> </table> </form> <br /> <h2>Daftar User</h2> <table class="data" cellspacing="0" cellpadding="0"> <t> <th>Nama</th> <th>Email</th> <th>Alamat</th> <th></th> </tr> <tr ng-repeat="user in users"> <td>{{ user.user_name }}</td> <td>{{ user.user_email }}</td> <td>{{ user.user_address }}</td> <td><button ng-click="deleteUser( user.user_id )">Delete</button></td> </tr> </table> </div> <script src="angular.min.js"></script> <script src="script.js"></script> </body> </html>
- 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.var simpleApp = angular.module('simpleApp', []); simpleApp.controller('mainController',function($scope,$http){ $scope.users; $scope.getUser = function() { $http({ method: 'GET', url: 'get.php' }).then(function (response) { // success $scope.users = response.data; }, function (response) { // error console.log(response.data,response.status); }); }; $scope.addUser = function() { $http({ method: 'POST', url: 'insert.php', data: {newName: $scope.newName, newEmail: $scope.newEmail, newAddress: $scope.newAddress } }).then(function (response) { //success $scope.getUser(); }, function (response) { //error console.log(response.data,response.status); }); }; $scope.deleteUser = function( user_id ) { $http({ method: 'POST', url: 'delete.php', data: { recordId : user_id } }).then(function (response) { $scope.getUser(); }, function (response) { console.log(response.data,response.status); }); }; $scope.reset = function(){ $scope.newName = ""; $scope.newEmail = ""; $scope.newAddress = ""; } $scope.getUser(); });
- Membuat halaman PHP
Ada empat file PHP yang akan dibuat, antara lain :
a. Koneksi ke database, dengan nama db.php :<?php define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'db_belajar'); function connect() { $connect = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); if (mysqli_connect_errno($connect)) { die("Failed to connect:" . mysqli_connect_error()); } mysqli_set_charset($connect, "utf8"); return $connect; } ?>
b. Mendapatkanย data dari database, dengan nama get.phpย :
<?php require 'db.php'; $connect = connect(); $user = array(); $sql = "SELECT user_id, user_name, user_email, user_address FROM tb_user"; if ($result = mysqli_query($connect, $sql)) { $count = mysqli_num_rows($result); $i = 0; while ($row = mysqli_fetch_assoc($result)) { $user[$i]['user_id'] = $row['user_id']; $user[$i]['user_name'] = $row['user_name']; $user[$i]['user_email'] = $row['user_email']; $user[$i]['user_address'] = $row['user_address']; $i++; } } $json = json_encode($user); echo $json; exit; ?>
c. Menyimpan data ke database, dengan nama insert.php :
<?php require 'db.php'; $connect = connect(); $postdata = file_get_contents("php://input"); if (isset($postdata) && !empty($postdata)) { $request = json_decode($postdata); $newName = $request->newName; $newEmail = $request->newEmail; $newAddress = $request->newAddress; if ($newName == '' || $newEmail == '' || $newAddress == '') return; $sql = "INSERT INTO `tb_user`(`user_name`, `user_email`, `user_address`) VALUES ('$newName','$newEmail','$newAddress')"; mysqli_query($connect, $sql); } exit; ?>
d. Menghapus data, dengan nama delete.php :
<?php require 'db.php'; $connect = connect(); $postdata = file_get_contents("php://input"); if (isset($postdata) && !empty($postdata)) { $request = json_decode($postdata); $id = (int) $request->recordId; $sql = "DELETE FROM `tb_user` WHERE `user_id` = '$id' LIMIT 1"; mysqli_query($connect, $sql); } ?>
Kita tentunya masih menggunakan json untuk format membaca data yang diterima, sesuai dengan file get.php.
Semoga bermanfaat ๐
Bermanfaat sekali artikel nya mas, Trima kasih banyak ๐
sama2 mas ๐
Terima kasih mas tutorialnya sangat membantu bagi pembelajar pemula di angular js seperti saya, semoga berkah share ilmunya…:)
terima kasih sudah berkunjung ke blog saya ๐
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
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.
kalo menampilkan data sesuai id /user gmana bro??
thanks bro, nanti saya buatkan tutorialnya ๐
angular buat frontend, ga usah sampe crud ๐
salah bales :v
crd udah. yg update dong mas
siap gan, tunggu ya ๐
terimakasih mas ๐
Terima kasih atas tutorialnya, sangat membantu sekali.
Saya Yudi Permana (1922520004), kunjungi website saya di https://www.atmaluhur.ac.id/
Mas ko saya eror seperti ini teus ya pas dicoba .
Access to XMLHttpRequest at ‘file:///var/www/IDN/E-cuti/get.php’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Coba tambahkan header Access-Control-Allow-Origin: {url_site_anda} di file db.php. Sepertinya beda url antara index.html dengan file2 untuk manipulasi db.