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

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 :

    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;
  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.

    <!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>
    
  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.

    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();
    });
  4. 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 ๐Ÿ™‚

Tinggalkan Balasan ke yudana Batalkan balasan

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