Sunday, May 10, 2015

Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter-3

Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter-3
Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter-3 - Pada artikel sebelumnya saya telah membahas bagaimana "cara menampilkan data menggunakan angularJS dan Codeigniter" . Artikel kali ini akan melanjutkan pembahasan seputar angularJS, kita akan coba membuat input data menggunakan angularJS dan codeigniter.

Spesifikasi Soucecode :
  • Codeigniter 3
  • AngularJS 1.3
  • Bootstrap 3.3.4
  • Mysql

Persiapan

Pada tahap persiapan tidak ada yang berubah, sama dengan pembahasan kemarin, monggo di baca dulu :) .

#Database
Buat database terlebih dahulu, untuk nama database terserah anda (bebas).
Lalu buat tabel baru dengan nama mahasiswa. samakan fieldnya seperti gambar di bawah ini.

Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter-3
Tabel Mahasiswa
#Configurasi Codeigniter
Atur pada application/config/database.php , sesualkan nama databasenya.
Atur pada application/config/routes.php , sesuaikan default controller yang akan diloadnya.

#Angular
Jika anda terkoneksi ke internet, di sarankan langsung meload angularJS dari CDN agar lebih cepat. tapi kalau tidak terkonesi, ya terpaksa anda harus mendownloadnya terlebih dahulu.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

Direkomendasikan pakai angularJS 1.3

#Bootstrap
Menggunakan bootstrap hanya sebagai penghias saja agar tidak terlalu polos tampilannya :). Untuk bootstrap saya sarankan menggunakan dari CDN.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Praktik
Seletah semua persiapan sudah selesai di lakukan. Sekarang saatnya kita praktik :)
Pertama-tama, buat controller baru dengan nama Angular.php . (salin kode dibawah ini)

<?php
if (!defined('BASEPATH'))exit('No direct script access allowed');

class Angular extends CI_Controller {
function __construct() {
parent::__construct();
}

public function index(){
$this->load->view('angular-insert-data');
}

public function insert_data(){
//Ambil data dari method POST angular
$data = (array)json_decode(file_get_contents('php://input'));

//Simpan data ke mysql
$val=array(
'nim' => $data['nim'],
'nama' => $data['nama'],
'jk' => $data['jk'],
'alamat' => $data['alamat']
);
$this->db->insert('mahasiswa', $val);
}
}
?>

Keterangan :
Data yang dikirim oleh angularJS akan di decode terlebih dahulu. barulah setelah itu data di simpan ke tabel mahasiswa.
Untuk keterangan kode lebih lanjut sudah saya sisipkan pada kodenya langsung dengan menggunakan komentar // .
Selanjutnya buat view baru dengan nama angular-insert-data.php (salin kode dibawah ini)

<html ng-app="app_insert">
<meta charset="utf-8">
<head>
<title>Angular Insert Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="ini_controller">
<h1>ANGULAR.JS : Insert data</h1>
<form>
<label>NIM</label>
<input type="number" class="form-control" ng-model="nim">
<label>NAMA</label>
<input type="text" class="form-control" ng-model="nama">
<label>JENIS KELAMIN</label>
<select class="form-control" ng-model="jk">
<option value="L">Laki-laki</option>
<option value="P">Perempuan</option>
</select>
<label>ALAMAT</label>
<textarea class="form-control" ng-model="alamat"></textarea><br>
<input type="button" class="btn btn-primary" ng-click="insert_data()" value="SUBMIT">
</form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('app_insert',[]);
app.controller('ini_controller',function($scope,$http){
// $scope.insert_data => insert_data merupakan nama dari ng-click pada tombol submit
$scope.insert_data=function(){
//data akan dikirim ke controller angular/insert_data , data yang dikirim berupa json.
//contoh => $scope.nim => nim merupakan nama ng-model pada inputan NIM di form. $scope.nim akan mengambil data nim dari inputan.
$http.post("<?php echo site_url('angular/insert_data');?>",{'nim':$scope.nim,'nama':$scope.nama,'jk':$scope.jk,'alamat':$scope.alamat}).success(function(data,status,headers,config){
//Beritahu jika data sudah berhasil di input
alert("Data Berhasil Di Input");
});
}

});
</script>
</body>
</html>
Keterangan :
Angular akan mengirim data menggunakan $http.post ke controller angular/insert_data dengan format json.
Untuk keterangan kode lebih lanjut sudah saya sisipkan pada kodenya langsung dengan menggunakan komentar // .
Hasilnya

Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter-3

Setelah melakukan input data maka akan ada alert yang memberitahu bahwa data suda berhasil di input. dan setelah di cek di database.....

Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter-3

Mungkin cukup sekian dulu untuk artikel angularJS kali ini. Mohon maaf jika ada banyak sekali kekurangan pada saat menjelaskan materi. Harap di ma'lum, saya juga masih belajar sama seperti anda hihihi :) . Jangan sungkan untuk mengirim komentar jika ada yang tidak paham atau pun ada yang perlu di perbaiki dari kode yang saya buat. :)

Artikel ini masih bersambung, tunggu artikel selanjutnya ya :). Jangan lupa di bookmak alamatnya. tekan CTRL+D :)

Terimakasih :)
Reff Learning : Angular Guide & Youtube

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.

8 komentar

Kang edit dan delete nya belum keluar ya =D

belum hahaha,
lagi mumet sama projek. terus di tambah sama kuliah mumetnya jadi plus plus huhuu

gan kalo pake angular berarti ga perlu modul ya untuk proses ke database???

perlu, lihat di controller angular.php bagian function insert_data

gan kalo mau reload setelah insert gimana caranya?..

bang, kau tak punya menu search kah di website kau?

ga ada, cuma ada ini kang-cahya.com/2015/05/membuat-filter-data-dengan-angularjs.html


EmoticonEmoticon