Cara Menampilkan Data Menggunakan Angular JS dan PHP Part 2

Cara Menampilkan Data Menggunakan Angular JS dan PHP Part 2

Ketemu kembali sahabat Bukaka host, kali ini saya akan menyajikan artikel lanjutan dari CRUD angular JS dan php. Untuk kesempatan ini artikel yang saya sajikan adalah Cara menampilkan data menggunakan Angular JS dan PHP. Seperti pada artikel pertama kita, yakni Cara input data menggunakan Angular JS dan PHP, langkah yang harus kita lakukan adalah memastikan database sudah kita buat sebelumnya ( bagi yang belum mengikuti artikel pertama, agar disarankan membacanya terlebih dahulu). Setelah database dipastikan berjalan di localhost anda, langkah selanjutunya adalah kita akan membuat script untuk menampilkan data dari database yang sudah di rekam.

<?php
include "connectdb.php";
$query="SELECT * FROM murid";
$rs=$conn->query($query);
while($row=$rs->fetch_assoc()) {
                $data[]=$row;
}
print json_encode($data);
?>

Simpan dengan nama get.php
Penjelasan Script
Script yang akan kita buat adalah script php untuk memanggil data dari database lalau diproses untuk untuk di tampilkan dengan menggunakan fungsi SELECT. Setelah itu akan ditampilkan dengan fungsi perulangan agar semua data yang ada pada table murid di tampilkan dengan mengubah data dalam bentuk array ke bantuk json.

Selanjutnya membuka script pada index.html yang telah dibuat sebelumnya. Script yang sudah di buat sebelumnya seperti berikut;

hosting dan domain murahCara Menampilkan Data Menggunakan Angular JS dan PHP

<!DOCTYPE html>
<html>
<head>
                <title>Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 2</title>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
                <style type="text/css">
                                p{color:green; font-weight: bold}
                                .button{cursor:pointer;}
                </style>
</head>
<body>
                <div ng-app="myApp" ng-controller="cntrl">
                <div class="container" style="width: 500px;">
                <h3 align="center">Angular JS CRUD Tutorial</h3>          
                <form>
                                <label>ID Siswa</label>
                                <input type="text" ng-model="id" name="id" ng-disabled="obj.idisable" class="form-control">
                                <br />
                                <label>Nama</label>
                                <input type="text" name="id" ng-model="nama" class="form-control" />
                                <br />
                                <label>Alamat</label>
                                <textarea class="form-control" type="text" ng-model="alamat" name="id"></textarea>
                                <br />
                                <label class="radio-inline">
                                <input type="radio" ng-model="jenis" name="id" value="laki-laki"> Laki-Laki
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" ng-model="jenis" name="id" value="perempuan"> Perempuan
                                </label>
                                <br />
                                <br />
                                <input type="button" class="form-control btn btn-info" value="{{btnName}}" ng-click="insertdata()">
                </br>
    </br>
                <input type="reset" class="button" value="clear">
                </form>
                <br />
                <br />
                <div class="alert alert-success" role="alert">{{msg}}</div>
</div>
</div>
                <script type="text/javascript">
                                var app=angular.module('myApp',[]);
                                app.controller('cntrl', function($scope,$http){
                                                $scope.obj={'idisable':false};
                                                $scope.btnName="Insert";
                                                $scope.insertdata=function(){
                                                                $http.post("input.php",{'id':$scope.id, 'nama':$scope.nama, 'alamat':$scope.alamat,'jenis':$scope.jenis,'btnName':$scope.btnName})
                                                                .success(function(){
                                                                                $scope.msg="Data Berhasil Disimpan";
                                                                                $scope.displayStud();
                                                                })
                                                }
                                 
                                });
                </script>
</body>
</html>

Selanjutnya tambahkan script dibawah <div class=”alert alert-success” role=”alert”>{{msg}}</div> . script yang kita akan tambahkan adalah script untuk membuat table dengan menyisipkan varaibel – variable data yang telah dibuat. Berikut scripnya ;

<table class="table table-striped" cellspacing="0" cellpadding="0">
        <tr>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Jenis Kelamin</th>
            <th></th>
        </tr>
        <tr ng-repeat="murid in data">
                                                <td>{{murid.nama}}</td>
                                                <td>{{murid.alamat}}</td>
                                                <td>{{murid.jeniskelamin}}</td>
                                                <td><button class="btn btn-danger" ng-click="deleteStud(murid.id);">Delete</button>
                                                <button class="btn btn-danger" ng-click="editStud(murid.id, murid.nama, murid.alamat, murid.jeniskelamin);">Edit</button></td>
                                </tr>
    </table>

Langakah selanjutnya membuat scrip untuk menampilkan data menggunakan javascript di index.html. script dibuat seperti gambar dibawah ini;

$scope.displayStud=function(){
                $http.get("get.php")
                .success(function(data){
                $scope.data=data
                })
             }

Setelah selesai coba anda jalankan di browser anda, maka akan tampil seperti gambar dibawah ini;

Untuk memastikan proses script yang telah anda buat, coba lakukan proses input data di form yang anda buat. Jika tidak ada masalah di script yang telah anda buat maka proses input dan tampilnya akan seperti gambar dibawah ini.

Sekian artikel untuk menapilkan data menggunakan Angular js dan php, untuk selanjutnya kita akan masuk ke artikel untuk edit data menggunakan angular js dan php.

About the Author
Hasmin Aries Pratama
Programmer dan Support Sistem di Bukaka Host, Saat ini telah mengembangkan website prakits di Bukaka Host untuk layanan terbaru kepada pelanggan.