Hallo sahabat semua,semoga dalam keadaan baik-baik dan selalu semangat. Dalam pembahasan kali ini kita kakn belajar tentang Cara Membuat CRUD Menggunakan AngularJS dan PHP Mysql. Dimana nanti langkah demi langkah kita akan belajar membuat Cread, Read, Update, dan Delete kemudian akan langsung berhubungan dengan database PHPMyadmin.

Baiklah kita lanjutkan dengan proses pembuatan database serta struktutnya seperti berikut ini:

struktur db

sahabat buat database baru beri nama database test kemudian table baru dengan nama table tbl_customer.

berikutnya kita langsung membuat sebuah konfigurasi koneksi ke database, buat file baru kemudian beri nama config.php

<?php

//konfigurasi database

$connect = new PDO("mysql:host=localhost;dbname=test", "dumet", "school");

?>

jika sudah simpan terlebih dahulu. Sahabat lanjutkan dengan membuat struktur tampilan awal untuk menampilkan data dari database serta form yang digunakan untuk melakukan proses insert maupun edit data.

buat file baru beri nama index.php

dalam bagian head berisi library Bootstrap dan library AngularJS.

<html>  
    <head>  
        <title>Membuat CRUD Menggunakan AngularJS dan PHP Mysql</title>  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />  
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>  
    </head>

selanjutnya bagian dalam body seperti code berikut ini:

<body>  
        <div class="container my-5">  
               <h3 class="text-center">Membuat CRUD Menggunakan AngularJS dan PHP Mysql</h3><br />
            <div class="table-responsive" ng-app="crudApp" ng-controller="crudController" ng-init="fetchData()">
                <div class="alert alert-success alert-dismissible" ng-show="success" >
                    <a href="#" class="close" data-dismiss="alert" ng-click="closeMsg()" aria-label="close">×</a>
                    {{successMessage}}
                </div>
                <form name="testform" ng-submit="insertData()">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Nama Customer</th>
                                <th>Alamat</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" ng-model="addData.Cust_Name" class="form-control" placeholder="Masukan Nama" ng-required="true" /></td>
                                <td><input type="text" ng-model="addData.Address" class="form-control" placeholder="Masukan Alamat" ng-required="true" /></td>
                                <td><button type="submit" class="btn btn-success btn-sm" ng-disabled="testform.$invalid">Add</button></td>
                            </tr>
                            <tr ng-repeat="data in namesData" ng-include="getTemplate(data)">
                            </tr>
                            
                        </tbody>
                    </table>
                </form>
</div>  
  </div>
    </body>  
</html>

oke selanjutnya membuat bagian template dimana untuk menampilkan daftar data yang berasal dari database dan bagian proses edit data seperti dibawah ini

<script type="text/ng-template" id="display">
                    <td>{{data.Cust_Name}}</td>
                    <td>{{data.Address}}</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" ng-click="showEdit(data)">Edit</button>
                        <button type="button" class="btn btn-danger btn-sm" ng-click="deleteData(data.id)">Delete</button>
                    </td>
                </script>
                <script type="text/ng-template" id="edit">
                    <td><input type="text" ng-model="formData.Cust_Name" class="form-control"  /></td>
                    <td><input type="text" ng-model="formData.Address" class="form-control" /></td>
                    <td>
                        <input type="hidden" ng-model="formData.data.id" />
                        <button type="button" class="btn btn-info btn-sm" ng-click="editData()">Save</button>
                        <button type="button" class="btn btn-default btn-sm" ng-click="reset()">Cancel</button>
                    </td>
                </script>

script diatas bisa sahabat sisipkan setelah form , selanjutnya kita akan menambahkan script untuk menginisialisasikan ng-app, ng-controller,ng-init serta function lainnya.

<script>
var app = angular.module('crudApp', []);

app.controller('crudController', function($scope, $http){

    $scope.formData = {};
    $scope.addData = {};
    $scope.success = false;

    $scope.getTemplate = function(data){
        if (data.id === $scope.formData.id)
        {
            return 'edit';
        }
        else
        {
            return 'display';
        }
    };

    $scope.fetchData = function(){
        $http.get('view_data.php').success(function(data){
            $scope.namesData = data;
        });
    };

    $scope.insertData = function(){
        $http({
            method:"POST",
            url:"insert.php",
            data:$scope.addData,
        }).success(function(data){
            $scope.success = true;
            $scope.successMessage = data.message;
            $scope.fetchData();
            $scope.addData = {};
        });
    };

    $scope.showEdit = function(data) {
        $scope.formData = angular.copy(data);
    };

    $scope.editData = function(){
        $http({
            method:"POST",
            url:"edit.php",
            data:$scope.formData,
        }).success(function(data){
            $scope.success = true;
            $scope.successMessage = data.message;
            $scope.fetchData();
            $scope.formData = {};
        });
    };

    $scope.reset = function(){
        $scope.formData = {};
    };

    $scope.closeMsg = function(){
        $scope.success = false;
    };

    $scope.deleteData = function(id){
        if(confirm("Apakah sudah yakin hapus data ini?"))
        {
            $http({
                method:"POST",
                url:"delete.php",
                data:{'id':id}
            }).success(function(data){
                $scope.success = true;
                $scope.successMessage = data.message;
                $scope.fetchData();
            }); 
        }
    };

});

</script>

Pada script diatas terdapat bebrapa fuction seperti untuk menampilkan data, melakukan edit, maupun delete.

Saya kira cukup dalam pembahasan kali ini dan akan dilanjutkan pada artikel berikutnya untuk script perintah menampilkan data, edit data serta proses delete.

terima kasih.