Insert Data dengan PHP dan Angular

AngularJS adalah salah satu framework javascript yang sedang populer saat ini. Karena keunggulan angular ini layaknya javascript pada umumnya yaitu dapat memanipulasi tampilan HTML secara langsung tanpa perlu mereload isi websitenya. Selain itu juga dibuat sedemikian ringkas scriptnya agar tidak terlalu rumit dibaca layaknya javascript. Dan yang lebih penting lagi adalah angular ini dapat dikombinasikan dengan PHP juga dalam menarik data dari database.

Sesuai dengan pembahasan kita kali ini, kita akan mencoba membuat suatu fungsi insert data dengan PHP dan Angular. Untuk memahami materi ini disarankan agar sudah minimal mengetahui dasar penggunaan PHP dan Javascript. Jika sudah kalian bisa coba buat file berikut ini seperti dibawah ini.

Pertama kita akan buat tampilanya terlebih dahulu seperti pada code dibawah ini,

index.php

<!DOCTYPE html>
<html ng-app='myTable'>
<head>
	<title>Table</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller='myCtrl'>
	<h1>Table Murid</h1>
	<form>
		<input type="text" name="" ng-model='nama' placeholder="nama"><br><br>
		<input type="text" name="" ng-model='alamat' placeholder="alamat"><br><br>
		<input type="text" name="" ng-model='hp' placeholder="no hp"><br><br>
		<!-- <input type='button' ng-click='insertdata()' value="submit"> -->
		<button ng-click='insertdata()'>Input</button>
	</form>	
</body>
</html>

Kemudian kalian simpan dengan format php. Selanjutnya kita buat file angularnya seperti berikut ini,

app.js

var app = angular.module('myTable',[]);

app.controller('myCtrl',function($scope,$http){
	$scope.insertdata=function(){
		$http.post('insert.php',{'nama':$scope.nama,'alamat':$scope.alamat,'hp':$scope.hp})
		.then(function (success){
			 console.log(response.data);
		},function (error){
			console.error("Error : ",error);
   		});
	}
});

Simpan kembali file tersebut dengan format javascript (.js). Lanjutkan dengan membuat file PHP baru lagi untuk mengeksekusi perintah insert ke database dengan contoh code seperti ini,

insert.php

<?php 
include 'config.php';
$data = json_decode(file_get_contents('php://input'));

$nama = mysqli_real_escape_string($conn,$data->nama);
$alamat = mysqli_real_escape_string($conn,$data->alamat);
$hp = mysqli_real_escape_string($conn,$data->hp);

mysqli_query($conn,"INSERT INTO angular_crud VALUES ('','$nama','$alamat','$hp')");
?>

Kalian simpan dengan format php dan yang terakhir adalah membuat file config ke databasenya. Kalian bisa buat dalam satu file dengan code diatas ataupun dipisah, hasilnya sama saja. Tetapi pada contoh kali ini file config dipisah agar dapat digunakan kembali suatu waktu.

config.php

<?php
$servername = "localhost";
$username = "dumet";
$password = "school";
$db_name = "webmaster";

// Create connection
$conn = new mysqli($servername, $username, $password, $db_name);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

?>

Jika sudah jangan lupa untuk menyimpan semua file tersebut dalam satu folder didalam folder htdocs. Dan jangan lupa untuk membuat databasenya terlebih dahulu agar datanya bisa ditampung. Untuk database kalian cukup buat 4 kolom saja, untuk id, nama, alama, telepon. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser dengan mengetikan localhost/namafoldernya.

Sekian pembahasan mengenai bagaimana cara insert data dengan PHP dan Angular. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *