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.
 |
| 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>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
Setelah melakukan input data maka akan ada alert yang memberitahu bahwa data suda berhasil di input. dan setelah di cek di database.....
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 :)
Kang edit dan delete nya belum keluar ya =D
BalasHapusbelum hahaha,
Hapuslagi 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???
BalasHapusperlu, lihat di controller angular.php bagian function insert_data
Hapusgan kalo mau reload setelah insert gimana caranya?..
BalasHapusKok tidak bisa ya? :(
BalasHapusbang, kau tak punya menu search kah di website kau?
BalasHapusga ada, cuma ada ini kang-cahya.com/2015/05/membuat-filter-data-dengan-angularjs.html
HapusPosting Komentar