Skip to main content
Pengenalan AngularJS

Teknik CRUD Multiple data Menggunakan AngularJS

Pendahuluan Teknik CRUD Multiple data Menggunakan AngularJS

Salam Sejahtera semuanya, kembali lagi kita membahas materi pembahasan tentang Teknik CRUD Multiple data Menggunakan AngularJS. Kita balik sebentar ke tentang belajar Framework AngularJS, yang mana kita ketahui dengan menggunakan AngularJS kita bisa membuat aplikasi mobile khususnya di framework Ionic. Jika kita ingin menguasai pembuatan aplikasi Hybrid menggunakan Ionic, pastinya AngularJS harus kita pahami. Untuk tahapan belajar AngularJS, kali ini akan kita bahas tentang pemahaman AngularJS lanjut dan contoh kasusnya yaitu teknik Insert Multiple Data memanfaatkan database MYSQL. Sekilas CRUD adalah Create (Input), Read (Tampil), Update (Ubah) dan Delete (Hapus). 

Topik Pembahasan Teknik CRUD Multiple data Menggunakan AngularJS:

  1. Pendahuluan
  2. Teknik Insert Multiple Data
  3. Source Code Download
  4. Video Demo

Untuk pertama dalam belajar angularJS dan contoh kasusnya kita awali dengan kasus melakukan Insert atau input data dari Browser ke database MYSQL.

Download Source Code

Berikut Source Code Latihan : Via Dropbox

Video Demo Teknik CRUD Multiple data Menggunakan AngularJS

Kebutuhan Tools

Untuk mengikuti materi ini, pastikan laptop /PC sudah mempunyai dan terinstall Aplikasi Web Server (Saya gunakan XAMPP), IDE (Notepad++, etc) dan browser kesayangan anda masing-masing.

Teknik Insert Multiple Data

Kali ini kita akan membuat insert multiple data dengan AngularJS, jadi kita bisa langsung menginputkan data banyak sekaligus tanpa satu persatu, jumlahnya pun akan dinamis sesuai dengan keinginan user. Berikut langkah-langkahnya:

Pertama, buatkan terlebih dahulu database (bisa gunakan phpmyadmin) beri nama : db_angularcrud. Kemudian dalam database buatkan (create) sebuah tabel dengan nama : Mahasiswa dengan struktur fieldnya : npm, nama, jurusan dan semester. Berikut gambarannya :

Teknik AngularJS crud multiple data
Tampilan crud multiple data

Kemudian buat folder : angularcrud di : C:\xampp\htdocs\ , anda bisa sesuaikan dimana install xampp. Dalam folder lalu buat file dengan nama : insert.html dan simpan folder yang baru dibuat tersebut, kemudian ketikkan source code berikut kedalam : insert.html

Source code : insert.html

<!DOCTYPE html>
<html data-ng-app="bab1">
<head>
    <meta charset="utf-8" />
    <title>Insert Multiple Data</title>
    <script src="./lib/angular/angular.js"></script>
</head>
<body ng-controller="MainController" >
{{ data }}


<div data-ng-repeat="key in data">
        NPM <input type="text" data-ng-model="data[$index].npm"> 
        Nama <input type="text" data-ng-model="data[$index].nama"> 
        Jurusan <input type="text" data-ng-model="data[$index].jurusan"> 
        Semester <input type="text" data-ng-model="data[$index].semester"> 
    </div>


     <button data-ng-click="tambah()">Tambah Data</button>
     <button data-ng-click="cancel()" data-ng-show="data.length > 1">Cancel</button>
     <button data-ng-click="simpan()">Simpan</button>
{{ pesan }}

</body>
</html>
<script>
     angular.module('bab1', [])

    .controller('MainController',function($scope,$http){
        //set type data 'data' dengan object
        $scope.data = [{npm : '',nama  : '',jurusan : '',semester : ''} ];
        //fungsi tambah inputan
        $scope.tambah = function(){
            $scope.data.push({npm : '',nama  : '',jurusan : '',semester : ''});
        };
        //fungsi kurangi inputan
        $scope.cancel = function(){
            $scope.data.splice($scope.data.length-1);
        };
        //fungsi simpan
        $scope.simpan = function(){
            $http.post('http://localhost/angularcrud/server.php?action=insert',$scope.data).success(function(response){
                if(response > 0){
                    $scope.data = [{npm : '',nama  : '',jurusan : '',semester : ''} ];
                    $scope.pesan = response +' Data telah berhasil di simpan';
                    $scope.$apply();
                }
            });
        }
    })
</script>

Jika kita jalankan via browser, maka tampilan adalah sebagai berikut :

Teknik AngularJS crud multiple data
Tampilan AngularJS crud multiple data

Note : Jangan lupa dalam struktur folder tambahkan framework AngularJS, lihat gambar berikut:

AngularJS crud multiple data
Tampilan AngularJS crud multiple data

Video Petunjuk

Kemudian buat file dengan nama : server.php dan simpan difolder yang sama, kemudian isikan source code berikut:

<?php $hostname = "localhost"; 
$user = "root"; 
$pass = ""; 
$database = "db_angularcrud"; 
$conn = mysql_connect($hostname,$user,$pass); 
if(!$conn) die ("gagal melakukan koneksi"); 
mysql_select_db($database,$conn) or die("database tidak ditemukan"); 
switch($_GET['action']){ 
case 'insert' : 
$data = json_decode(file_get_contents("php://input")); 
$i = 0; foreach($data as $k => $v){
            $query = "INSERT INTO mahasiswa(npm,nama,jurusan,semester) VALUES ('".$v->npm."','".$v->nama."','".$v->jurusan."','".$v->semester."')";
 mysql_query($query);
            $i++;
        };
        echo json_encode($i);
        break;
}
?>

Selanjutnya, buka browser dan ketikkan : http://localhost/angularcrud/insert.html, maka akan tampil form insert seperti gambar berikut :

Teknik AngularJS crud multiple data
Tampilan crud multiple data

Video Petunjuk

Karena kita akan melakukan insert lebih dari 1 data, maka sekarang coba klik tombol “Tambah Data”, maka secara otomatis form insert akan bertambah dibawahnya, lihat gambar :

Teknik AngularJS crud multiple data
Tampilan crud multiple data

Kemudian coba perhatikan gambar diatas, ketika terjadi penambahan sebuah data baru, akan muncul sebuah tombol baru yaitu “CANCEL”, apabila diklik, mak akan mengurangi form insert. Langkah selanjutnya, coba isikan sebuah data atau 2 data, kemudian tekan tombol “SIMPAN”.

Apabila data berhasil disimpan, maka akan tampil informasi berapa jumlah data yang disimpan ke database, dalam contoh ada 2 data yang disimpan, artinya kita baru saja memasukkan lebih dari satu data sekaligus, itulah yang dimaksud dengan insert multiple data.

Teknik AngularJS crud multiple data
Tampilan crud multiple data

Jika kita cek database, maka akan tampil datanya yang telah disimpan.

AngularJS crud multiple data
AngularJS crud multiple data

Next Teknik CRUD Multiple data Menggunakan AngularJS

Untuk tahapan awal belajar CRUD yaitu Insert data selesai, selanjutnya akan kita bahas tentang Update (ubah) data juga dengan model Multiple.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

  • Muhammad Iqbal

    tutorialnya bagus pak. minta tutorial CRUD yang ada nya donk pak

  • Rio

    pak, programnya di windows jalan tapi di lamp server gak.. kenapa ya?