Cara Input Data Menggunakan AngularJs Part2

Oke teman-teman. Kita lanjutkan pembahasan sebelumnya di Cara Input Data Menggunakan AngularJs Part1. Dimana pada artikel sebelumnya saya sudah membuat database struktur html sederhana dan sebuah fungsi didalam factory. Dan di pembahasan kali ini tentang Cara Input Data Menggunakan AngularJs Part2 saya akan membuat sebuah controller untuk menampilkan data dan menyimpan data. Kenapa disini saya membahas juga tentang menampilkan data. Karena agar teman-teman bisa lihat menyimpan data tanpa harus mereload halaman dan data langsung tampil setelah diinput.

Langkah selanjutnya untuk menyelesaikan Cara Input Data Menggunakan AngularJs Part2 teman-teman buat controller sebagai berikut ini.

modul.controller('add',function($scope,$http, factoryData){
        // Tampil Data
        factoryData.getData().then(function(response){
            $scope.dataPost = response.data;
        });

        // Tambah Data
        $scope.tambahData = function(){
            databaru = {
                nama : $scope.databaru.nama,
                jurusan :$scope.databaru.jurusan
            };
            factoryData.addData(databaru).then(function(){
                $scope.dataPost.push({
                    title : $scope.databaru.nama,
                    body :$scope.databaru.jurusan
                })
                $scope.databaru.nama='';
                $scope.databaru.jurusan='';
            });
        };
})

modul.controller('add',function($scope,$http, factoryData){

// Tampil Data

factoryData.getData().then(function(response){

$scope.dataPost = response.data;

});

// Tambah Data

$scope.tambahData = function(){

databaru = {

nama : $scope.databaru.nama,

jurusan :$scope.databaru.jurusan

};

factoryData.addData(databaru).then(function(){

$scope.dataPost.push({

title : $scope.databaru.nama,

body :$scope.databaru.jurusan

})

$scope.databaru.nama='';

$scope.databaru.jurusan='';

});

};

})

Dan langkah terakhir teman-teman buat 2 file baru dengan format php. Dan berikan nama data.php untuk mengambil data dari database yang nanti akan kita cetak seperti pada script berikut ini.

<?php

$host = 'localhost';
$user = 'dumet';
$pass = 'school';
$db = 'webmaster';

$conn = mysqli_connect($host,$user,$pass,$db);
if(!$conn){
	die("Connection :Failed ".mysqli_connect_error());
}

$query = $conn->query("SELECT * FROM shelli_posts");
$posts = [];

if($query->num_rows > 0) :
	while($row = $query->fetch_assoc()) :
		extract($row);

		$data = array(
			'id' => $id,
			'title' => $title,
			'body' => $body,
			'created_at' => $created_at
		);

		#push data
		array_push($posts, $data);

	endwhile;

	#output json
	echo json_encode($posts);
else:

	echo json_encode(array(
		'message' => 'No Posts Found'
	));

endif;	
?>

<?php

$host = 'localhost';

$user = 'dumet';

$pass = 'school';

$db = 'webmaster';

$conn = mysqli_connect($host,$user,$pass,$db);

if(!$conn){

die("Connection :Failed ".mysqli_connect_error());

}

$query = $conn->query("SELECT * FROM shelli_posts");

$posts = [];

if($query->num_rows > 0) :

while($row = $query->fetch_assoc()) :

extract($row);

$data = array(

'id' => $id,

'title' => $title,

'body' => $body,

'created_at' => $created_at

);

#push data

array_push($posts, $data);

endwhile;

#output json

echo json_encode($posts);

else:

echo json_encode(array(

'message' => 'No Posts Found'

));

endif;

Dan file kedua berikan nama add.php dimana ada script php untuk melakukan request atau permintaan simpan data ke dalam database. Dan seperti pada script di bawah ini.

<?php

$host = 'localhost';
$user = 'dumet';
$pass = 'school';
$db = 'webmaster';

$conn = mysqli_connect($host,$user,$pass,$db);
if(!$conn){
	die("Connection :Failed ".mysqli_connect_error());
};

$data = json_decode(file_get_contents("php://input"));
$nama = $data->nama;
$jurusan = $data->jurusan;

$sql = "INSERT INTO shelli_posts (title,body) VALUES ('$nama', '$jurusan')";
if(mysqli_query($conn, $sql)){
	$pesan = "Input Berhasil";
}else{
	$pesan = "Input Gagal";
}
echo $pesan;

?>

<?php

$host = 'localhost';

$user = 'dumet';

$pass = 'school';

$db = 'webmaster';

$conn = mysqli_connect($host,$user,$pass,$db);

if(!$conn){

die("Connection :Failed ".mysqli_connect_error());

};

$data = json_decode(file_get_contents("php://input"));

$nama = $data->nama;

$jurusan = $data->jurusan;

$sql = "INSERT INTO shelli_posts (title,body) VALUES ('$nama', '$jurusan')";

if(mysqli_query($conn, $sql)){

$pesan = "Input Berhasil";

}else{

$pesan = "Input Gagal";

}

echo $pesan;

Jika kita lihat file index.html nya secara keseluruhan maka akan seperti pada gambar di bawah ini. Dan jika teman-teman masih bingung datanya di ambil dari mana atau nama parameter di ambil dari mana disini saya berikan tanda dengan warna yang berbeda. Untuk warna yang sama berarti nama tersebut saling berkaitan.

Demikian artikel tentang Cara Input Data Menggunakan AngularJs Part2. Semoga dapat bermanfaat dan selamat mencoba.

Facebook DUMET School

Categories