Insert Data Ke Mysql Dengan Angularjs Dan Codeigniter-3

cara menampilkan data memakai angularJS dan Codeigniter" . Artikel kali ini akan melanjutkan pembahasan seputar angularJS, kita akan coba menciptakan input data memakai 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 gres dengan nama mahasiswa. samakan fieldnya menyerupai gambar di bawah ini.

Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter 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 eksklusif meload angularJS dari CDN semoga lebih cepat. tapi kalau tidak terkonesi, ya terpaksa anda harus mend0wnl0adnya 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 semoga tidak terlalu polos tampilannya :). Untuk bootstrap saya sarankan memakai dari CDN.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Praktik
Seletah semua persiapan sudah final di lakukan. Sekarang saatnya kita praktik :)
Pertama-tama, buat controller gres dengan nama Angular.php . (salin instruksi 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 sehabis itu data di simpan ke tabel mahasiswa.

Untuk keterangan instruksi lebih lanjut sudah saya sisipkan pada kodenya eksklusif dengan memakai komentar // .

Selanjutnya buat view gres dengan nama angular-insert-data.php (salin instruksi 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 kalau data sudah berhasil di input
     alert("Data Berhasil Di Input");
     });
    }
    
   });
  </script>
 </body>
</html>

Keterangan :
Angular akan mengirim data memakai $http.post ke controller angular/insert_data dengan format json.

Untuk keterangan instruksi lebih lanjut sudah saya sisipkan pada kodenya eksklusif dengan memakai komentar // .

Hasilnya

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

Mungkin cukup sekian dulu untuk artikel angularJS kali ini. Mohon maaf kalau ada aneka macam kekurangan pada dikala menjelaskan materi. Harap di ma'lum, saya juga masih berguru sama menyerupai anda hihihi :) . Jangan sungkan untuk mengirim komentar kalau ada yang tidak paham atau pun ada yang perlu di perbaiki dari instruksi 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

Sumber http://hudachair.blogspot.com

iklan banner

Insert Data Ke Mysql Dengan Angularjs Dan Codeigniter-3

0 Response to "Insert Data Ke Mysql Dengan Angularjs Dan Codeigniter-3"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel