Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 1

Halo teman teman di panduan kali ini saya akan menjelaskan mengenai Cara Membangun CRUD Di AngularJs Menggunakan PHP Myadmin, nah di panduan Cara Membangun CRUD Di AngularJs Menggunakan PHP Myadmin Part 1, kali ini yang akan kita bikin yaitu sebuah strukturnya, merancang file koneksi, dan insert data ke database. bagi proses yang lainya seperti Delete dan Update, dan menampilkan data dari database yang telah kita input akan saya bahas di pertemuan berikutnya di tutorialÂ Cara Membuat CRUD Pada AngularJs Menggunakan PHP Myadmin Part 2

Oke teman teman kita seketika saja, langkah pertama-tama silahkan teman teman bikin sebuah database baru dengan nama Angular, di database Angular kita akan bikin sebuah table baru dengan nama table murid, dan nama filed nya id, nama, domisili, dan JK seperti gambar dibawah ini,

Langkah berikutnya kita akan bikin file koneksinya, silahkan teman teman simpan script dibawah ini dengan nama connectdb.php

<?php<br />
define(“HOSTNAME”,”localhost”);<br />
define(“USERNAME”,”root”);<br />
define(“PASSWORD”,””);<br />
define(“DATABASE”,”webmaster”);</p>
<p>$conn=new mysqli(HOSTNAME,USERNAME,PASSWORD,DATABASE) or die (“unable to Connect DB”);<br />
 ?>

<?php

define(“HOSTNAME”,“localhost”);

define(“USERNAME”,“root”);

define(“PASSWORD”,“”);

define(“DATABASE”,“webmaster”);

$conn=new mysqli(HOSTNAME,USERNAME,PASSWORD,DATABASE) or die (“unable to Connect DB”);

Berikutnya kita akan bikin sebuah file index nya bagi kita tampilkan di browser, dan silahkan teman teman simpan script dibawah ini dengan nama index.html

<!DOCTYPE html><br />
<html><br />
<head><br />
	<title>Cara Membangun CRUD Di AngularJs Menggunakan PHP Myadmin Part 1</title><br />
	<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js”></script><br />
	<style type=”text/css”><br />
		p{color:green; font-weight: bold}<br />
		.button{cursor:pointer;}<br />
	</style><br />
</head><br />
<body><br />
<div ng-app=”myApp” ng-controller=”cntrl”><br />
	<form><br />
		<table><br />
			<tr><br />
				<td>id</td><br />
				<td>:</td><br />
				<td><input type=”text” ng-model=”id” name=”id”></td><br />
			</tr><br />
			<tr><br />
				<td>nama</td><br />
				<td>:</td><br />
				<td><input type=”text” ng-model=”nama” name=”id”></td><br />
			</tr><br />
			<tr><br />
				<td>Domisili</td><br />
				<td>:</td><br />
				<td><textarea type=”text” ng-model=”domisili” name=”id”></textarea></td><br />
			</tr><br />
			<tr><br />
				<td>Jenis Kelamin</td><br />
				<td>:</td><br />
				<td> <input type=”radio” ng-model=”jenis” name=”id” value=”laki-laki” selected>Laki-laki<br />
					<input type=”radio” ng-model=”jenis” name=”id” value=”perempuan”>Perempuan</td><br />
				<p>{{msg}}</p><br />
			</tr><br />
			<tr><br />
				<td colspan=”3″><input type=”button” class=”button” value=”simpan” ng-click=”insertdata()”></td><br />
			</tr><br />
		</table><br />
	</form><br />
</div></p>
<p>	<script type=”text/javascript”><br />
		var app=angular.module(‘myApp’,[]);<br />
		app.controller(‘cntrl’, function($scope,$http){<br />
			$scope.insertdata=function(){<br />
				$http.post(“input.php”,{‘id’:$scope.id, ‘nama’:$scope.nama, ‘domisili’:$scope.domisili,’jenis’:$scope.jenis})<br />
				.success(function(){<br />
					$scope.msg=”Data Berhasil Disimpan”;<br />
					$scope.displayStud();<br />
				})<br />
			}</p>
<p>		});<br />
	</script><br />
</body><br />
</html>

<!DOCTYPE html>

<html>

<head>

<title>Cara Membangun CRUD Di AngularJs Menggunakan PHP Myadmin Part 1</title>

p{color:green; font-weight: bold}

.button{cursor:pointer;}

</style>

</head>

<body>

<form>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Domisili</td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td> <input type=“radio” ng–model=“jenis” name=“id” value=“laki-laki” selected>Laki–laki

<input type=“radio” ng–model=“jenis” name=“id” value=“perempuan”>Perempuan</td>

<p>{{msg}}</p

(Visited 13 times, 1 visits today)

Leave a Reply Cancel reply