Cara Membuat Input Data Menggunakan Angular JS dan PHP

Cara Membuat Input Data Menggunakan Angular JS dan PHP

Hai sahabat Bukaka host, artikel Cara Membuat Input Data Menggunakan Angular JS dan PHP adalah artikel pertama dalam membuat aplikasi CRUD Menggunakan Angular JS dan PHP, kita akan membuat proses input data atau Insert Data. Namun, Sebelum masuk dalam penulisan program php dan angular, terlebih dahulu anda diminta untuk membuat database di phpmyadmin. Cara Membuat Database di phpmyadmin.
Cara Membuat Database : Pada artikel kali ini, langkah awal yang kita harus lakukan adalah menyiapkan database yang fungsinya untuk menyimpan data yang kita akan simpan dari proses input nantinya. Untuk itu pastikan anda sudah menjalankan webserver di komputer anda.

Cara Membuat Input Data Menggunakan Angular JS dan PHP

Langkah selanjutnya anda masuk ke PhpMyadmin dengan mengakses localhost/phpmyadmin (ini bagi yang pemula ya… yang sudah familiar dengan phpmyadmin jagan baper di langkah ini wkwkwwk….). Buat database sesuai yang anda inginkan, dalam kasus ini database yang akan saya buat adalah database dengan nama ‘Sekolah’, perintahnya : CREATE DATABASE Sekolah;. Dan lanjutkan dengan membuat table – tabel dengan perintah dibawah ini :

CREATE TABLE murid(
ID INT (5) NOT NULL,
NAMA VARCHAR (20) NOT NULL,
ALAMAT TEXT,
JENISKELAMIN ENUM ('LAKI-LAKI', 'PEREMPUAN'),
PRIMARY KEY (ID)
);

Jika, database dan tabel berhasil anda buat, maka langkah selanjutnya kita masuk pada penulisan script php dan angular, script pertama yang kita harus buat adalah script koneksi ke databse dari database yang telah anda buat tadi. Berikut scriptnya, simpan dengan nama connectdb.php :

<?php 
define("HOSTNAME","localhost");
define("USERNAME","root");
define("PASSWORD","");
define("DATABASE","Sekolah");

$conn=new mysqli(HOSTNAME,USERNAME,PASSWORD,DATABASE) or die ("unable to Connect DB");
 ?>

Selanjutnya anda membuat halaman utama form input data siswa. Nah sebagai tambahan pada artikel ini kita membuat tampilan form input siswa menggunakan boostrap, yang belum familiar dengan boostrap bisa berselancar dulu di website resminya di GetBootstrap.com. kalo sudah kita lanjut lagi dengan membuat halaman input dengan nama index.html dan untuk itu ketikkan script dibawah ini.

<!DOCTYPE html>
<head> 
<title>Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 1</title>

<!– 1 script html di bawah ini untuk memanggil bootstrap.min.css dari mxcdn.bootstrapcdn.com. ini menadakan bahwa script css bootstrap yang kita gunakan berada di luar dari komponen script yang kita akan buat. Cara ini adalah cara sederhana untuk menggunakan komponen bootstrap untuk suatu halaman web –>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<!— 2 script html di bawah ini di gunakan untuk memanggil source dari angular.min.js yang tersimpan di ajax.googleapis.com. cara ini juga merupakan cara sederhana jika kita tidak menyertakan file angular.min.js Bersama dengan file web lainnya. –>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<!— 3 Untuk memberikan variasi warna di form akan dibuat,anda bisa menambahkan script CSS seperti dibawah ini –>

<style type="text/css"> 
p{color:green; font-weight: bold} 
.button{cursor:pointer;} 
</style>
</head>
<body>

<!— 4    menambahkan ng-app=”myApp” dan ng-controller=”cntrl”. ng-app berfungsi untuk mendefinisikan sebuah komponen angularJS. Dalam kasus ini kita membuat myApp yang akan digunakan untuk mendefinisikan script angular JS nantinya. Sedangkan ng-controller untuk memanggil fungsi dari controller yang telah dibuat dengan nama cntrl. controller ini nantinya berfungsi untuk menampilkan variable dari cntrl dengan menngunakan view.–>

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

<!—5 membuat form input disertai dengan tag ng-model=”” yang berfungsi untuk mengambil nilai pada tag HTML (input , select , textarea). Sisipkan tag ng-model ini disetiap tag input yang ada.–>

<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 />

<!—6 menmabhakan fungsi ng-click=”inserdata()” untuk melaksanakan fungsi Angular Js saat tombol di klik.–>

<input type="button" class="form-control btn btn-info" value="{{btnName}}" ng-click="insertdata()">
     </br>
     </br>
             <input type="reset" class=" class="form-control btn " 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 membuat proses input form di atas dengan menggunakan script php, berikut scriptnya;

<?php
                include "connectdb.php";
                $data=json_decode(file_get_contents("php://input"));
                $nama=$conn->real_escape_string($data->nama);         
                $alamat=$conn->real_escape_string($data->alamat);
                $jenis=$conn->real_escape_string($data->jenis);
                $query = "INSERT INTO murid (nama, alamat, jeniskelamin) VALUES ('$nama','$alamat',
                '$jenis')";
                $conn->query($query);
 ?>




Cara Membuat Input Data Menggunakan Angular JS dan PHP

Tampilan setelah di akses melalui browser

Setelah anda selesai membuat script simpan tersebut jangan lupa anda menyimpannya dengan nama input.php. setelah anda memastikan semua script sudah anda buat sesuai dengan contoh di atas selanjutnya anda mencoba untuk menjalankan dengan mengetik localhost/angular/ di browser anda sehingga akan tampil halaman seperti gambar dibawah ini.

Nah, gimana mudahkan untuk membuat script php dengan angular js untuk membuat form input, selanjutnya kita akan bahas di artikel cara menampilkan data dengan angular 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.

3 thoughts on “Cara Membuat Input Data Menggunakan Angular JS dan PHP

Leave a Reply