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

8/Post a Comment/Comments

  1. Kang edit dan delete nya belum keluar ya =D

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

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

    ReplyDelete
    Replies
    1. perlu, lihat di controller angular.php bagian function insert_data

      Delete
  3. gan kalo mau reload setelah insert gimana caranya?..

    ReplyDelete
  4. bang, kau tak punya menu search kah di website kau?

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

      Delete

Post a Comment

Previous Post Next Post