My Notes Code http://www.mynotescode.com The Notes of Programmer Sat, 06 Jan 2018 17:36:29 +0000 en-US hourly 1 https://wordpress.org/?v=4.7.9 http://www.mynotescode.com/wp-content/uploads/2016/10/cropped-My-Notes-Code-Logo-32x32.png My Notes Code http://www.mynotescode.com 32 32 Cara Membuat Import Data Dari CSV dengan Codeigniter dan PHPExcel http://www.mynotescode.com/import-csv-codeigniter-phpexcel/ http://www.mynotescode.com/import-csv-codeigniter-phpexcel/#comments Sat, 06 Jan 2018 17:31:30 +0000 http://www.mynotescode.com/?p=1871 Kembali lagi berjumpa dengan saya. Sebelumnya sata telah share catatan / tutorial mengenai Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel. Kali ini saya akan coba share hal yang sama, tapi yang membedakan disini adalah kita akan coba import datanya dari File CSV. Masih sama seperti catatan sebelumnya, disini kita masih menggunakan bantuan...

The post Cara Membuat Import Data Dari CSV dengan Codeigniter dan PHPExcel appeared first on My Notes Code.

]]>
Kembali lagi berjumpa dengan saya. Sebelumnya sata telah share catatan / tutorial mengenai Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel. Kali ini saya akan coba share hal yang sama, tapi yang membedakan disini adalah kita akan coba import datanya dari File CSV. Masih sama seperti catatan sebelumnya, disini kita masih menggunakan bantuan librari PHPExcel untuk membaca isi dari File CSV nya. Oke tanpa basa basi lagi, langsung saja ikuti step by step nya berikut ini.

Berikut adalah fitur-fitur yang akan kita buat:

  1. View Data dari Database.
  2. Form untuk Import Data.
  3. Preview Data yang akan diimport sebelum di simpan ke database.
  4. Validasi terhadap file yang dipilih oleh User pada form import. Hanya file CSV (.csv) yang diperbolehkan.
  5. Validasi terhadap input data. Jika ada data yang kosong / belum diisi, sistem akan memberitahu jumlah data yang kosong dan data mana saja.

DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Buat sebuah folder dengan nama import_csv_ci lalu simpan pada folder xampp/htdocs/
  2. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/import_csv_ci/.
  3. Download plugin JQUERY, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  4. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/import_csv_ci/js/.
  5. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  6. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/import_csv_ci/.
  7. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Struktur Tabel - Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel

    CREATE TABLE `siswa` (
      `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
      `nis` varchar(11) NOT NULL,
      `nama` varchar(50) NOT NULL,
      `jenis_kelamin` varchar(10) NOT NULL,
      `alamat` text NOT NULL
    )

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/import_csv_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/import_csv_ci/';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'siswa';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi siswa.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Langkah selanjutnya adalah membuat modelnya. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/import_csv_ci/application/models/. Berikut kodenya :

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

class SiswaModel extends CI_Model {
  public function view(){
    return $this->db->get('siswa')->result(); // Tampilkan semua data yang ada di tabel siswa
  }
  
  // Fungsi untuk melakukan proses upload file
  public function upload_file($filename){
    $this->load->library('upload'); // Load librari upload
    
    $config['upload_path'] = './csv/';
    $config['allowed_types'] = 'csv';
    $config['max_size']	= '2048';
    $config['overwrite'] = true;
    $config['file_name'] = $filename;
  
    $this->upload->initialize($config); // Load konfigurasi uploadnya
    if($this->upload->do_upload('file')){ // Lakukan upload dan Cek jika proses upload berhasil
      // Jika berhasil :
      $return = array('result' => 'success', 'file' => $this->upload->data(), 'error' => '');
      return $return;
    }else{
      // Jika gagal :
      $return = array('result' => 'failed', 'file' => '', 'error' => $this->upload->display_errors());
      return $return;
    }
  }
  
  // Buat sebuah fungsi untuk melakukan insert lebih dari 1 data
  public function insert_multiple($data){
    $this->db->insert_batch('siswa', $data);
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘siswa’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel siswa. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data siswa.

Lalu terdapata function upload_file($filename), fungsi ini berfungsi untuk melakukan upload file excel yang akan di import datanya. Ada beberapa konfigurasi dalam uploadnya antara lain :

  1. $config[‘upload_path’] = ‘./csv/’;
    Berfungsi untuk menentukan folder untuk menyimpan file yang akan diupload. Dalam catatn ini, kita akan menguploadnya di folder csv yang berada di root direktori web (xampp/htdocs/import_csv_ci/csv).
  2. $config[‘allowed_types’] = ‘csv’;
    Berfungsi untuk memvalidasi file tipe apa saja yang boleh diupload.
  3. $config[‘max_size’]    = ‘2048’;
    Berfungsi untuk menentukan maksimal ukuran file yang boleh diupload dalam satuan Kb. Disini saya tentukan 2048 Kb = 2 MB.
  4. $config[‘overwrite’] = true;
    Berfungsi untuk me-replace file apabila di dalam folder (tempat menyimpan file uploadnya) sudah ada file dengan nama tersebut.
  5. $config[‘file_name’] = $filename;
    Berfungsi untuk menentukan dan me-rename file yang akan diupload sesuai keinginan. Dalam catatan ini, kita set nama filenya menjadi import_data.csv
  6. Untuk lebih lengkapnya mengenai konfiurasi apa saja yang bisa kita gunakan, Anda bisa lihat pada dokumentasi Codeigniternya langsung disini.

$this->upload->data()
Berfungsi untuk mengambil output dari hasil proses upload. outputnya berupa array seperti contoh berikut :

Array
(
  [file_name]     => mypic.jpg
  [file_type]     => image/jpeg
  [file_path]     => /path/to/your/upload/
  [full_path]     => /path/to/your/upload/jpg.jpg
  [raw_name]      => mypic
  [orig_name]     => mypic.jpg
  [client_name]   => mypic.jpg
  [file_ext]      => .jpg
  [file_size]     => 22.2
  [is_image]      => 1
  [image_width]   => 800
  [image_height]  => 600
  [image_type]    => jpeg
  [image_size_str] => width="800" height="200"
)

$this->upload->display_errors()
Berfungsi untuk mengambil pesan error apabila proses upload gagal.

$this->db->insert_batch(‘siswa’, $data);
Berfungsi untuk melakukan insert lebih dari 1 data sekaligus. Terdapat 2 parameter yang dibutuhkan oleh fungsi ini yakni :

  1. Parameter 1 : diisi dengan nama tabel
  2. Parameter 2 : diisi dengan array data yang akan di insert, contoh array nya :
    array(
      array('field1'=>'isi_field1','field2'=>'isi_field2'), // Data ke 1
      array('field1'=>'isi_field1','field2'=>'isi_field2') // Data ke 2
    )

Untuk lebih jelasnya mengenai insert_batch, silahkan anda lihat di dokumentasi nya langsung : klik disini.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Siswa.php, lalu simpan pada folder xampp/htdocs/import_csv_ci/application/controllers/. Berikut ini kodenya :

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

class Siswa extends CI_Controller {
  private $filename = "import_data"; // Kita tentukan nama filenya
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('SiswaModel');
  }
  
  public function index(){
    $data['siswa'] = $this->SiswaModel->view();
    $this->load->view('view', $data);
  }
  
  public function form(){
    $data = array(); // Buat variabel $data sebagai array
    
    if(isset($_POST['preview'])){ // Jika user menekan tombol Preview pada form
      // lakukan upload file dengan memanggil function upload yang ada di SiswaModel.php
      $upload = $this->SiswaModel->upload_file($this->filename);
      
      if($upload['result'] == "success"){ // Jika proses upload sukses
        // Load plugin PHPExcel nya
        include APPPATH.'third_party/PHPExcel/PHPExcel.php';
        
        $csvreader = PHPExcel_IOFactory::createReader('CSV');
        $loadcsv = $csvreader->load('csv/'.$this->filename.'.csv'); // Load file yang tadi diupload ke folder csv
        $sheet = $loadcsv->getActiveSheet()->getRowIterator();
        
        // Masukan variabel $sheet ke dalam array data yang nantinya akan di kirim ke file form.php
        // Variabel $sheet tersebut berisi data-data yang sudah diinput di dalam csv yang sudha di upload sebelumnya
        $data['sheet'] = $sheet; 
      }else{ // Jika proses upload gagal
        $data['upload_error'] = $upload['error']; // Ambil pesan error uploadnya untuk dikirim ke file form dan ditampilkan
      }
    }
    
    $this->load->view('form', $data);
  }
  
  public function import(){
    // Load plugin PHPExcel nya
    include APPPATH.'third_party/PHPExcel/PHPExcel.php';
    
    $csvreader = PHPExcel_IOFactory::createReader('CSV');
    $loadcsv = $csvreader->load('csv/'.$this->filename.'.csv'); // Load file yang tadi diupload ke folder csv
    $sheet = $loadcsv->getActiveSheet()->getRowIterator();
    
    // Buat sebuah variabel array untuk menampung array data yg akan kita insert ke database
    $data = [];
    
    $numrow = 1;
    foreach($sheet as $row){
      // Cek $numrow apakah lebih dari 1
      // Artinya karena baris pertama adalah nama-nama kolom
      // Jadi dilewat saja, tidak usah diimport
      if($numrow > 1){
        // START -->
        // Skrip untuk mengambil value nya
        $cellIterator = $row->getCellIterator();
        $cellIterator->setIterateOnlyExistingCells(false); // Loop all cells, even if it is not set
        
        $get = array(); // Valuenya akan di simpan kedalam array,dimulai dari index ke 0
        foreach ($cellIterator as $cell) {
          array_push($get, $cell->getValue()); // Menambahkan value ke variabel array $get
        }
        // <-- END
        
        // Ambil data value yang telah di ambil dan dimasukkan ke variabel $get
        $nis = $get[0]; // Ambil data NIS dari kolom A di csv
        $nama = $get[1]; // Ambil data nama dari kolom B di csv
        $jenis_kelamin = $get[2]; // Ambil data jenis kelamin dari kolom C di csv
        $alamat = $get[3]; // Ambil data alamat dari kolom D di csv
        
        // Kita push (add) array data ke variabel data
        array_push($data, [
          'nis'=>$nis, // Insert data nis
          'nama'=>$nama, // Insert data nama
          'jenis_kelamin'=>$jenis_kelamin, // Insert data jenis kelamin
          'alamat'=>$alamat, // Insert data alamat
        ]);
      }
      
      $numrow++; // Tambah 1 setiap kali looping
    }

    // Panggil fungsi insert_multiple yg telah kita buat sebelumnya di model
    $this->SiswaModel->insert_multiple($data);
    
    redirect("Siswa"); // Redirect ke halaman awal (ke controller siswa fungsi index)
  }
}

Saya akan sedikit jelaskan mengenai kode diatas.

$csvreader = PHPExcel_IOFactory::createReader(‘CSV’);
$loadcsv = $csvreader->load(‘csv/’.$this->filename.’.csv’); // Load file yang tadi diupload ke folder csv
$sheet = $loadcsv->getActiveSheet()->getRowIterator();

Kode ini berfungsi untuk membaca isi dari file csv yang telah kita upload sebelumnya. Hasilnya nanti akan menjadi array yang akan kit looping menggunakan foreach pada file form.php.

$nis = $get[0]; // Ambil data NIS
$nama = $get[1]; // Ambil data nama
$jenis_kelamin = $get[2]; // Ambil data jenis kelamin
$alamat = $get[3]; // Ambil data alamat

Yang saya beri warna merah pada skrip diatas, itu merupakan angka index array. Dimana pada File CSV dimulai dari Kolom A, kolom A ini di aliaskan dengan angka nol (0) index array. Dan seterusnya bertambah 1 sampai kolom yang kita pakai. Untuk lebih jelasnya lihat gambar dibawah ini :

Penjelasan - Cara Membuat Import Data Dari CSV dengan Codeigniter dan PHPExcel


STEP 6 – VIEW
Langkah selanjutnya adalah membuat file view untuk menampilkan interface / antarmukanya. Buat sebuah file dengan nama view.php, lalu simpan pada folder xampp/htdocs/import_csv_ci/application/views/. Berikut tampilan dan kodenya :

View - Cara Membuat Import Data Dari CSV dengan Codeigniter dan PHPExcel

<html>
<head>
  <title>IMPORT CSV CI 3</title>
</head>
<body>
  <h1>Data Siswa</h1><hr>
  <a href="<?php echo base_url("index.php/siswa/form"); ?>">Import Data</a><br><br>

  <table border="1" cellpadding="8">
  <tr>
    <th>NIS</th>
    <th>Nama</th>
    <th>Jenis Kelamin</th>
    <th>Alamat</th>
  </tr>

  <?php
  if( ! empty($siswa)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
    foreach($siswa as $data){ // Lakukan looping pada variabel siswa dari controller
      echo "<tr>";
      echo "<td>".$data->nis."</td>";
      echo "<td>".$data->nama."</td>";
      echo "<td>".$data->jenis_kelamin."</td>";
      echo "<td>".$data->alamat."</td>";
      echo "</tr>";
    }
  }else{ // Jika data tidak ada
    echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
  }
  ?>
  </table>
</body>
</html>

Pada kode diatas terdapat kode foreach($siswa as $data){, kode tersebut akan manampilkan satu per satu data siswa sampai data siswa yang terakhir.
echo “<td>”.$data->nis.”</td>”;
echo “<td>”.$data->nama.”</td>”;
echo “<td>”.$data->jenis_kelamin.” </td>”;
echo “<td>”.$data->alamat.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel siswa.


STEP 7 – FORM
Terakhir, kita akan buat form untuk import datanya. Buat sebuah file dengan nama form.php, lalu simpan pada folder xampp/htdocs/import_csv_ci/application/views/. Berikut tampilan dan kodenya :

Form - Cara Membuat Import Data Dari CSV dengan Codeigniter dan PHPExcel

<html>
<head>
  <title>Form Import</title>
  
  <!-- Load File jquery.min.js yang ada difolder js -->
  <script src="<?php echo base_url('js/jquery.min.js'); ?>"></script>
  
  <script>
  $(document).ready(function(){
    // Sembunyikan alert validasi kosong
    $("#kosong").hide();
  });
  </script>
</head>
<body>
  <h3>Form Import</h3>
  <hr>
  
  <a href="<?php echo base_url("csv/format.csv"); ?>">Download Format</a>
  <br>
  <br>
  
  <!-- Buat sebuah tag form dan arahkan action nya ke controller ini lagi -->
  <form method="post" action="<?php echo base_url("index.php/Siswa/form"); ?>" enctype="multipart/form-data">
    <!-- 
    -- Buat sebuah input type file
    -- class pull-left berfungsi agar file input berada di sebelah kiri
    -->
    <input type="file" name="file">
    
    <!--
    -- BUat sebuah tombol submit untuk melakukan preview terlebih dahulu data yang akan di import
    -->
    <input type="submit" name="preview" value="Preview">
  </form>
  
  <?php
  if(isset($_POST['preview'])){ // Jika user menekan tombol Preview pada form 
    if(isset($upload_error)){ // Jika proses upload gagal
      echo "<div style='color: red;'>".$upload_error."</div>"; // Muncul pesan error upload
      die; // stop skrip
    }
    
    // Buat sebuah tag form untuk proses import data ke database
    echo "<form method='post' action='".base_url("index.php/Siswa/import")."'>";
    
    // Buat sebuah div untuk alert validasi kosong
    echo "<div style='color: red;' id='kosong'>
    Semua data belum diisi, Ada <span id='jumlah_kosong'></span> data yang belum terisi semua.
    </div>";
    
    echo "<table border='1' cellpadding='8'>
    <tr>
      <th colspan='5'>Preview Data</th>
    </tr>
    <tr>
      <th>NIS</th>
      <th>Nama</th>
      <th>Jenis Kelamin</th>
      <th>Alamat</th>
    </tr>";
    
    $numrow = 1;
    $kosong = 0;
    
    // Lakukan perulangan dari data yang ada di csv
    // $sheet adalah variabel yang dikirim dari controller
    foreach($sheet as $row){ 
      // START -->
      // Skrip untuk mengambil value nya
      $cellIterator = $row->getCellIterator();
      $cellIterator->setIterateOnlyExistingCells(false); // Loop all cells, even if it is not set
      
      $get = array(); // Valuenya akan di simpan kedalam array,dimulai dari index ke 0
      foreach ($cellIterator as $cell) {
        array_push($get, $cell->getValue()); // Menambahkan value ke variabel array $get
      }
      // <-- END
      
      // Ambil data value yang telah di ambil dan dimasukkan ke variabel $get
      $nis = $get[0]; // Ambil data NIS
      $nama = $get[1]; // Ambil data nama
      $jenis_kelamin = $get[2]; // Ambil data jenis kelamin
      $alamat = $get[3]; // Ambil data alamat
      
      // Cek jika semua data tidak diisi
      if(empty($nis) && empty($nama) && empty($jenis_kelamin) && empty($alamat))
        continue; // Lewat data pada baris ini (masuk ke looping selanjutnya / baris selanjutnya)
      
      // Cek $numrow apakah lebih dari 1
      // Artinya karena baris pertama adalah nama-nama kolom
      // Jadi dilewat saja, tidak usah diimport
      if($numrow > 1){
        // Validasi apakah semua data telah diisi
        $nis_td = ( ! empty($nis))? "" : " style='background: #E07171;'"; // Jika NIS kosong, beri warna merah
        $nama_td = ( ! empty($nama))? "" : " style='background: #E07171;'"; // Jika Nama kosong, beri warna merah
        $jk_td = ( ! empty($jenis_kelamin))? "" : " style='background: #E07171;'"; // Jika Jenis Kelamin kosong, beri warna merah
        $alamat_td = ( ! empty($alamat))? "" : " style='background: #E07171;'"; // Jika Alamat kosong, beri warna merah
        
        // Jika salah satu data ada yang kosong
        if(empty($nis) or empty($nama) or empty($jenis_kelamin) or empty($alamat)){
          $kosong++; // Tambah 1 variabel $kosong
        }
        
        echo "<tr>";
        echo "<td".$nis_td.">".$nis."</td>";
        echo "<td".$nama_td.">".$nama."</td>";
        echo "<td".$jk_td.">".$jenis_kelamin."</td>";
        echo "<td".$alamat_td.">".$alamat."</td>";
        echo "</tr>";
      }
      
      $numrow++; // Tambah 1 setiap kali looping
    }
    
    echo "</table>";
    
    // Cek apakah variabel kosong lebih dari 1
    // Jika lebih dari 1, berarti ada data yang masih kosong
    if($kosong > 1){
    ?>	
      <script>
      $(document).ready(function(){
        // Ubah isi dari tag span dengan id jumlah_kosong dengan isi dari variabel kosong
        $("#jumlah_kosong").html('<?php echo $kosong; ?>');
        
        $("#kosong").show(); // Munculkan alert validasi kosong
      });
      </script>
    <?php
    }else{ // Jika semua data sudah diisi
      echo "<hr>";
      
      // Buat sebuah tombol untuk mengimport data ke database
      echo "<button type='submit' name='import'>Import</button> ";
      echo "<a href='".base_url("index.php/Siswa")."'>Cancel</a>";
    }
    
    echo "</form>";
  }
  ?>
</body>
</html>

Saya tidak akan menjelaskan soal skrip diatas, karena sudah saya jelaskan per masing-masing skrip (dengan komentar). Tapi saya akan jelaskan alur form import diatas. Pertama, User harus mendownload Format File CSV yang sudah kita buat sebelumnya. Kedua, User megisi data yang akan diimport pada file csv yang telah di download tadi. Ketiga, user memilih file csv yang akan diimport datanya lalu klik tombol preview. Keempat, Ketika user mengklik tombol preview, sistem akan melakukan:

  1. Validasi apakah file yang dipilih memiliki format CSV (.csv atau tidak
  2. Validasi apakah user telah mengisi semua data yang diperlukan pada file csv tersebut. Jika masih ada yang kosong / belum diisi, sistem akan memberi informasi berupa jumlah data yang masih kosong dan memberi tahu user data mana saja yang kosong dengan cara memberi background merah pada kolom / baris yang kosong (pada tabel preview)
  3. Apabila lolos dari kedua validasi yang saya sebutkan diatas, sistem akan memunculkan tombol Import untuk melakukan proses import data. Tapi apabila ternyata tidak lolos validasi, tombol import tidak akan muncul.

Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Dokumentasi PHPExcel : https://github.com/PHPOffice/PHPExcel/wiki/User%20Documentation
Tutorial membuat import data dari csv dengan codeigniter dan phpexcel, tutorial import csv dengan codeigniter 3 dan mysql, cara mudah membuat import data dari csv dengan codeignite 3 dan phpexcel, cara mudah membuat import csv dengan codeigniter 3 dan mysql.

Import CSV

The post Cara Membuat Import Data Dari CSV dengan Codeigniter dan PHPExcel appeared first on My Notes Code.

]]>
http://www.mynotescode.com/import-csv-codeigniter-phpexcel/feed/ 2
Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel http://www.mynotescode.com/import-excel-codeigniter-phpexcel/ http://www.mynotescode.com/import-excel-codeigniter-phpexcel/#comments Tue, 26 Dec 2017 06:37:55 +0000 http://www.mynotescode.com/?p=1858 Sudah lama tidak update catatan, pada kesempatan ini. Saya akan coba berbagi kembali catatan/tutorial yang mudah-mudahan bisa bermanfaat yakni Cara Membuat Import Data Dari Excel dengan menggunakan Framework Codeigniter 3, librari PHPExcel (berguna untuk membantu kita membaca isi dari file excel yang akan diimport datanya), dan Database MySQL. Berikut adalah fitur-fitur yang akan kita buat:...

The post Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel appeared first on My Notes Code.

]]>
Sudah lama tidak update catatan, pada kesempatan ini. Saya akan coba berbagi kembali catatan/tutorial yang mudah-mudahan bisa bermanfaat yakni Cara Membuat Import Data Dari Excel dengan menggunakan Framework Codeigniter 3, librari PHPExcel (berguna untuk membantu kita membaca isi dari file excel yang akan diimport datanya), dan Database MySQL.

Berikut adalah fitur-fitur yang akan kita buat:

  1. View Data dari Database.
  2. Form untuk Import Data.
  3. Preview Data yang akan diimport sebelum di simpan ke database.
  4. Validasi terhadap file yang dipilih oleh User pada form import. Hanya file Microsoft Office 2007 (.xlsx) yang diperbolehkan.
  5. Validasi terhadap input data. Jika ada data yang kosong / belum diisi, sistem akan memberitahu jumlah data yang kosong dan data mana saja.

DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Buat sebuah folder dengan nama import_excel_ci lalu simpan pada folder xampp/htdocs/
  2. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/import_excel_ci/.
  3. Download plugin JQUERY, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  4. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/import_excel_ci/js/.
  5. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  6. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/import_excel_ci/.
  7. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Struktur Tabel - Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel

    CREATE TABLE `siswa` (
      `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
      `nis` varchar(11) NOT NULL,
      `nama` varchar(50) NOT NULL,
      `jenis_kelamin` varchar(10) NOT NULL,
      `alamat` text NOT NULL
    )

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/import_excel_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/import_excel_ci/';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'siswa';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi siswa.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Langkah selanjutnya adalah membuat modelnya. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/import_excel_ci/application/models/. Berikut kodenya :

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

class SiswaModel extends CI_Model {
  public function view(){
    return $this->db->get('siswa')->result(); // Tampilkan semua data yang ada di tabel siswa
  }
  
  // Fungsi untuk melakukan proses upload file
  public function upload_file($filename){
    $this->load->library('upload'); // Load librari upload
    
    $config['upload_path'] = './excel/';
    $config['allowed_types'] = 'xlsx';
    $config['max_size']	= '2048';
    $config['overwrite'] = true;
    $config['file_name'] = $filename;
  
    $this->upload->initialize($config); // Load konfigurasi uploadnya
    if($this->upload->do_upload('file')){ // Lakukan upload dan Cek jika proses upload berhasil
      // Jika berhasil :
      $return = array('result' => 'success', 'file' => $this->upload->data(), 'error' => '');
      return $return;
    }else{
      // Jika gagal :
      $return = array('result' => 'failed', 'file' => '', 'error' => $this->upload->display_errors());
      return $return;
    }
  }
  
  // Buat sebuah fungsi untuk melakukan insert lebih dari 1 data
  public function insert_multiple($data){
    $this->db->insert_batch('siswa', $data);
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘siswa’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel siswa. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data siswa.

Lalu terdapata function upload_file($filename), fungsi ini berfungsi untuk melakukan upload file excel yang akan di import datanya. Ada beberapa konfigurasi dalam uploadnya antara lain :

  1. $config[‘upload_path’] = ‘./excel/’;
    Berfungsi untuk menentukan folder untuk menyimpan file yang akan diupload. Dalam catatn ini, kita akan menguploadnya di folder excel yang berada di root direktori web (xampp/htdocs/import_excel_ci/excel).
  2. $config[‘allowed_types’] = ‘xlsx’;
    Berfungsi untuk memvalidasi file tipe apa saja yang boleh diupload.
  3. $config[‘max_size’]    = ‘2048’;
    Berfungsi untuk menentukan maksimal ukuran file yang boleh diupload dalam satuan Kb. Disini saya tentukan 2048 Kb = 2 MB.
  4. $config[‘overwrite’] = true;
    Berfungsi untuk me-replace file apabila di dalam folder (tempat menyimpan file uploadnya) sudah ada file dengan nama tersebut.
  5. $config[‘file_name’] = $filename;
    Berfungsi untuk menentukan dan me-rename file yang akan diupload sesuai keinginan. Dalam catatan ini, kita set nama filenya menjadi import_data.xlsx
  6. Untuk lebih lengkapnya mengenai konfiurasi apa saja yang bisa kita gunakan, Anda bisa lihat pada dokumentasi Codeigniternya langsung disini.

$this->upload->data()
Berfungsi untuk mengambil output dari hasil proses upload. outputnya berupa array seperti contoh berikut :

Array
(
  [file_name]     => mypic.jpg
  [file_type]     => image/jpeg
  [file_path]     => /path/to/your/upload/
  [full_path]     => /path/to/your/upload/jpg.jpg
  [raw_name]      => mypic
  [orig_name]     => mypic.jpg
  [client_name]   => mypic.jpg
  [file_ext]      => .jpg
  [file_size]     => 22.2
  [is_image]      => 1
  [image_width]   => 800
  [image_height]  => 600
  [image_type]    => jpeg
  [image_size_str] => width="800" height="200"
)

$this->upload->display_errors()
Berfungsi untuk mengambil pesan error apabila proses upload gagal.

$this->db->insert_batch(‘siswa’, $data);
Berfungsi untuk melakukan insert lebih dari 1 data sekaligus. Terdapat 2 parameter yang dibutuhkan oleh fungsi ini yakni :

  1. Parameter 1 : diisi dengan nama tabel
  2. Parameter 2 : diisi dengan array data yang akan di insert, contoh array nya :
    array(
      array('field1'=>'isi_field1','field2'=>'isi_field2'), // Data ke 1
      array('field1'=>'isi_field1','field2'=>'isi_field2') // Data ke 2
    )

Untuk lebih jelasnya mengenai insert_batch, silahkan anda lihat di dokumentasi nya langsung : klik disini.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Siswa.php, lalu simpan pada folder xampp/htdocs/import_excel_ci/application/controllers/. Berikut ini kodenya :

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

class Siswa extends CI_Controller {
  private $filename = "import_data"; // Kita tentukan nama filenya
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('SiswaModel');
  }
  
  public function index(){
    $data['siswa'] = $this->SiswaModel->view();
    $this->load->view('view', $data);
  }
  
  public function form(){
    $data = array(); // Buat variabel $data sebagai array
    
    if(isset($_POST['preview'])){ // Jika user menekan tombol Preview pada form
      // lakukan upload file dengan memanggil function upload yang ada di SiswaModel.php
      $upload = $this->SiswaModel->upload_file($this->filename);
      
      if($upload['result'] == "success"){ // Jika proses upload sukses
        // Load plugin PHPExcel nya
        include APPPATH.'third_party/PHPExcel/PHPExcel.php';
        
        $excelreader = new PHPExcel_Reader_Excel2007();
        $loadexcel = $excelreader->load('excel/'.$this->filename.'.xlsx'); // Load file yang tadi diupload ke folder excel
        $sheet = $loadexcel->getActiveSheet()->toArray(null, true, true ,true);
        
        // Masukan variabel $sheet ke dalam array data yang nantinya akan di kirim ke file form.php
        // Variabel $sheet tersebut berisi data-data yang sudah diinput di dalam excel yang sudha di upload sebelumnya
        $data['sheet'] = $sheet; 
      }else{ // Jika proses upload gagal
        $data['upload_error'] = $upload['error']; // Ambil pesan error uploadnya untuk dikirim ke file form dan ditampilkan
      }
    }
    
    $this->load->view('form', $data);
  }
  
  public function import(){
    // Load plugin PHPExcel nya
    include APPPATH.'third_party/PHPExcel/PHPExcel.php';
    
    $excelreader = new PHPExcel_Reader_Excel2007();
    $loadexcel = $excelreader->load('excel/'.$this->filename.'.xlsx'); // Load file yang telah diupload ke folder excel
    $sheet = $loadexcel->getActiveSheet()->toArray(null, true, true ,true);
    
    // Buat sebuah variabel array untuk menampung array data yg akan kita insert ke database
    $data = [];
    
    $numrow = 1;
    foreach($sheet as $row){
      // Cek $numrow apakah lebih dari 1
      // Artinya karena baris pertama adalah nama-nama kolom
      // Jadi dilewat saja, tidak usah diimport
      if($numrow > 1){
        // Kita push (add) array data ke variabel data
        array_push($data, [
          'nis'=>$row['A'], // Insert data nis dari kolom A di excel
          'nama'=>$row['B'], // Insert data nama dari kolom B di excel
          'jenis_kelamin'=>$row['C'], // Insert data jenis kelamin dari kolom C di excel
          'alamat'=>$row['D'], // Insert data alamat dari kolom D di excel
        ]);
      }
      
      $numrow++; // Tambah 1 setiap kali looping
    }

    // Panggil fungsi insert_multiple yg telah kita buat sebelumnya di model
    $this->SiswaModel->insert_multiple($data);
    
    redirect("Siswa"); // Redirect ke halaman awal (ke controller siswa fungsi index)
  }
}

Saya akan sedikit jelaskan mengenai kode diatas.

$excelreader = new PHPExcel_Reader_Excel2007();
$loadexcel = $excelreader->load(‘excel/’.$this->filename.’.xlsx’);
$sheet = $loadexcel->getActiveSheet()->toArray(null, true, true ,true);
Kode ini berfungsi untuk membaca isi dari file excel yang telah kita upload sebelumnya. Hasilnya nanti akan menjadi array yang akan kit looping menggunakan foreach pada file form.php.

array_push($data, [
    ‘nis’=>$row[‘A’],
    ‘nama’=>$row[‘B’],
    ‘jenis_kelamin’=>$row[‘C’],
    ‘alamat’=>$row[‘D’],
]);
Kode ini berfungsi untuk menambahkan array baru ke dalam variabel $data. Nantinya variabel data akan terisi array seperti berikut :

array(
  array('nis'=>'isi dari nis 1', 'nama'=>'isi dari nama 1', 'jenis_kelamin'=>'isi dari jenis kelamin 1', 'alamat'=>'isi dari alamat 1'),
  array('nis'=>'isi dari nis 2', 'nama'=>'isi dari nama 2', 'jenis_kelamin'=>'isi dari jenis kelamin 2', 'alamat'=>'isi dari alamat 2'),
  array('nis'=>'isi dari nis 3', 'nama'=>'isi dari nama 3', 'jenis_kelamin'=>'isi dari jenis kelamin 3', 'alamat'=>'isi dari alamat 3'),
)

STEP 6 – VIEW
Langkah selanjutnya adalah membuat file view untuk menampilkan interface / antarmukanya. Buat sebuah file dengan nama view.php, lalu simpan pada folder xampp/htdocs/import_excel_ci/application/views/. Berikut tampilan dan kodenya :

View - Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel

<html>
<head>
  <title>IMPORT EXCEL CI 3</title>
</head>
<body>
  <h1>Data Siswa</h1><hr>
  <a href="<?php echo base_url("index.php/siswa/form"); ?>">Import Data</a><br><br>

  <table border="1" cellpadding="8">
  <tr>
    <th>NIS</th>
    <th>Nama</th>
    <th>Jenis Kelamin</th>
    <th>Alamat</th>
  </tr>

  <?php
  if( ! empty($siswa)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
    foreach($siswa as $data){ // Lakukan looping pada variabel siswa dari controller
      echo "<tr>";
      echo "<td>".$data->nis."</td>";
      echo "<td>".$data->nama."</td>";
      echo "<td>".$data->jenis_kelamin."</td>";
      echo "<td>".$data->alamat."</td>";
      echo "</tr>";
    }
  }else{ // Jika data tidak ada
    echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
  }
  ?>
  </table>
</body>
</html>

Pada kode diatas terdapat kode foreach($siswa as $data){, kode tersebut akan manampilkan satu per satu data siswa sampai data siswa yang terakhir.
echo “<td>”.$data->nis.”</td>”;
echo “<td>”.$data->nama.”</td>”;
echo “<td>”.$data->jenis_kelamin.” </td>”;
echo “<td>”.$data->alamat.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel siswa.


STEP 7 – FORM
Terakhir, kita akan buat form untuk import datanya. Buat sebuah file dengan nama form.php, lalu simpan pada folder xampp/htdocs/import_excel_ci/application/views/. Berikut tampilan dan kodenya :

Form - Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel

<html>
<head>
  <title>Form Import</title>
  
  <!-- Load File jquery.min.js yang ada difolder js -->
  <script src="<?php echo base_url('js/jquery.min.js'); ?>"></script>
  
  <script>
  $(document).ready(function(){
    // Sembunyikan alert validasi kosong
    $("#kosong").hide();
  });
  </script>
</head>
<body>
  <h3>Form Import</h3>
  <hr>
  
  <a href="<?php echo base_url("excel/format.xlsx"); ?>">Download Format</a>
  <br>
  <br>
  
  <!-- Buat sebuah tag form dan arahkan action nya ke controller ini lagi -->
  <form method="post" action="<?php echo base_url("index.php/Siswa/form"); ?>" enctype="multipart/form-data">
    <!-- 
    -- Buat sebuah input type file
    -- class pull-left berfungsi agar file input berada di sebelah kiri
    -->
    <input type="file" name="file">
    
    <!--
    -- BUat sebuah tombol submit untuk melakukan preview terlebih dahulu data yang akan di import
    -->
    <input type="submit" name="preview" value="Preview">
  </form>
  
  <?php
  if(isset($_POST['preview'])){ // Jika user menekan tombol Preview pada form 
    if(isset($upload_error)){ // Jika proses upload gagal
      echo "<div style='color: red;'>".$upload_error."</div>"; // Muncul pesan error upload
      die; // stop skrip
    }
    
    // Buat sebuah tag form untuk proses import data ke database
    echo "<form method='post' action='".base_url("index.php/Siswa/import")."'>";
    
    // Buat sebuah div untuk alert validasi kosong
    echo "<div style='color: red;' id='kosong'>
    Semua data belum diisi, Ada <span id='jumlah_kosong'></span> data yang belum diisi.
    </div>";
    
    echo "<table border='1' cellpadding='8'>
    <tr>
      <th colspan='5'>Preview Data</th>
    </tr>
    <tr>
      <th>NIS</th>
      <th>Nama</th>
      <th>Jenis Kelamin</th>
      <th>Alamat</th>
    </tr>";
    
    $numrow = 1;
    $kosong = 0;
    
    // Lakukan perulangan dari data yang ada di excel
    // $sheet adalah variabel yang dikirim dari controller
    foreach($sheet as $row){ 
      // Ambil data pada excel sesuai Kolom
      $nis = $row['A']; // Ambil data NIS
      $nama = $row['B']; // Ambil data nama
      $jenis_kelamin = $row['C']; // Ambil data jenis kelamin
      $alamat = $row['D']; // Ambil data alamat
      
      // Cek jika semua data tidak diisi
      if(empty($nis) && empty($nama) && empty($jenis_kelamin) && empty($alamat))
        continue; // Lewat data pada baris ini (masuk ke looping selanjutnya / baris selanjutnya)
      
      // Cek $numrow apakah lebih dari 1
      // Artinya karena baris pertama adalah nama-nama kolom
      // Jadi dilewat saja, tidak usah diimport
      if($numrow > 1){
        // Validasi apakah semua data telah diisi
        $nis_td = ( ! empty($nis))? "" : " style='background: #E07171;'"; // Jika NIS kosong, beri warna merah
        $nama_td = ( ! empty($nama))? "" : " style='background: #E07171;'"; // Jika Nama kosong, beri warna merah
        $jk_td = ( ! empty($jenis_kelamin))? "" : " style='background: #E07171;'"; // Jika Jenis Kelamin kosong, beri warna merah
        $alamat_td = ( ! empty($alamat))? "" : " style='background: #E07171;'"; // Jika Alamat kosong, beri warna merah
        
        // Jika salah satu data ada yang kosong
        if(empty($nis) or empty($nama) or empty($jenis_kelamin) or empty($alamat)){
          $kosong++; // Tambah 1 variabel $kosong
        }
        
        echo "<tr>";
        echo "<td".$nis_td.">".$nis."</td>";
        echo "<td".$nama_td.">".$nama."</td>";
        echo "<td".$jk_td.">".$jenis_kelamin."</td>";
        echo "<td".$alamat_td.">".$alamat."</td>";
        echo "</tr>";
      }
      
      $numrow++; // Tambah 1 setiap kali looping
    }
    
    echo "</table>";
    
    // Cek apakah variabel kosong lebih dari 1
    // Jika lebih dari 1, berarti ada data yang masih kosong
    if($kosong > 1){
    ?>	
      <script>
      $(document).ready(function(){
        // Ubah isi dari tag span dengan id jumlah_kosong dengan isi dari variabel kosong
        $("#jumlah_kosong").html('<?php echo $kosong; ?>');
        
        $("#kosong").show(); // Munculkan alert validasi kosong
      });
      </script>
    <?php
    }else{ // Jika semua data sudah diisi
      echo "<hr>";
      
      // Buat sebuah tombol untuk mengimport data ke database
      echo "<button type='submit' name='import'>Import</button>";
      echo "<a href='".base_url("index.php/Siswa")."'>Cancel</a>";
    }
    
    echo "</form>";
  }
  ?>
</body>
</html>

Saya tidak akan menjelaskan soal skrip diatas, karena sudah saya jelaskan per masing-masing skrip (dengan komentar). Tapi saya akan jelaskan alur form import diatas. Pertama, User harus mendownload Format File Excel yang sudah kita buat sebelumnya. Kedua, User megisi data yang akan diimport pada file excel yang telah di download tadi. Ketiga, user memilih file excel yang akan diimport datanya lalu klik tombol preview. Keempat, Ketika user mengklik tombol preview, sistem akan melakukan:

  1. Validasi apakah file yang dipilih memiliki format microsoft excel 2007 (.xlsx) atau tidak
  2. Validasi apakah user telah mengisi semua data yang diperlukan pada file excel tersebut. Jika masih ada yang kosong / belum diisi, sistem akan memberi informasi berupa jumlah data yang masih kosong dan memberi tahu user data mana saja yang kosong dengan cara memberi background merah pada kolom / baris yang kosong (pada tabel preview)
  3. Apabila lolos dari kedua validasi yang saya sebutkan diatas, sistem akan memunculkan tombol Import untuk melakukan proses import data. Tapi apabila ternyata tidak lolos validasi, tombol import tidak akan muncul.

Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Dokumentasi PHPExcel : https://github.com/PHPOffice/PHPExcel/wiki/User%20Documentation
Tutorial membuat import data dari excel dengan codeigniter dan phpexcel, tutorial import excel dengan codeigniter 3 dan mysql, cara mudah membuat import data dari excel dengan codeignite 3 dan phpexcel, cara mudah membuat import excel dengan codeigniter 3 dan mysql.

Import Excel

The post Cara Membuat Import Data Dari Excel dengan Codeigniter dan PHPExcel appeared first on My Notes Code.

]]>
http://www.mynotescode.com/import-excel-codeigniter-phpexcel/feed/ 2
Cara Membuat Pencarian Tanpa Refresh Halaman dengan Codeigniter http://www.mynotescode.com/pencarian-tanpa-refresh-codeigniter/ http://www.mynotescode.com/pencarian-tanpa-refresh-codeigniter/#comments Mon, 27 Nov 2017 05:57:26 +0000 http://www.mynotescode.com/?p=1840 Di sela-sela kesibukan saya. Saya coba sempatkan buat update catatan/tutorial pada blog saya ini. Pembahasan kali ini adalah mengenai pencarian. Pencarian merupakan fitur paling penting dan hampir di semua aplikasi berbasis web atau desktop pasti memiliki fitur ini. Maka dari itu, saya akan bahas soal ini. Pencarian yang kita buat bukan pencarian sederhana yang ketika...

The post Cara Membuat Pencarian Tanpa Refresh Halaman dengan Codeigniter appeared first on My Notes Code.

]]>
Di sela-sela kesibukan saya. Saya coba sempatkan buat update catatan/tutorial pada blog saya ini. Pembahasan kali ini adalah mengenai pencarian. Pencarian merupakan fitur paling penting dan hampir di semua aplikasi berbasis web atau desktop pasti memiliki fitur ini. Maka dari itu, saya akan bahas soal ini. Pencarian yang kita buat bukan pencarian sederhana yang ketika klik tombol cari halaman web tersebut akan memuat ulang (refresh/reload). Tapi pencarian yang kita buat adalah pencarian yang ketika proses tidak akan me-refresh/me-reload halaman web tersebut. Jadi kelihatan lebih dinamis. Tentunya bisa seperti itu karena bantuan Jquery Ajax. Ajax ini lah yang membuat kita bisa melakukan pengiriman data ke file php tanpa harus reload/refresh halaman. Pada catatan ini kita akan membuatnya dengan Framework Codeigniter 3 (versi 3) dan Database MySQL.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Buat sebuah folder dengan nama search_ajax_ci lalu simpan pada folder xampp/htdocs/
  2. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/search_ajax_ci/.
  3. Download plugin JQUERY, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  4. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/search_ajax_ci/js/.
  5. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  6. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/search_ajax_ci/.
  7. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Tabel - Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter

    CREATE TABLE IF NOT EXISTS `siswa` (
      `nis` varchar(11) NOT NULL,
      `nama` varchar(50) NOT NULL,
      `jenis_kelamin` varchar(10) NOT NULL,
      `telp` varchar(15) NOT NULL,
      `alamat` text NOT NULL,
      PRIMARY KEY (`nis`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/search_ajax_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/search_ajax_ci/';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'siswa';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi siswa.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Langkah selanjutnya adalah membuat modelnya. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/models/. Berikut kodenya :

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

class SiswaModel extends CI_Model {
  
  public function view(){
    return $this->db->get('siswa')->result(); // Tampilkan semua data yang ada di tabel siswa
  }
  
  public function search($keyword){
    $this->db->like('nis', $keyword);
    $this->db->or_like('nama', $keyword);
    $this->db->or_like('jenis_kelamin', $keyword);
    $this->db->or_like('telp', $keyword);
    $this->db->or_like('alamat', $keyword);
    
    $result = $this->db->get('siswa')->result(); // Tampilkan data siswa berdasarkan keyword
    
    return $result; 
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘siswa’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel siswa. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data siswa.

Fungsi search() ini berfungsi untuk melakukan query menampilkan data siswa berdasarkan keyword yang di ketik oleh user pada textbox pencarian. Pada fungsi ini terdapat kode $this->db->like(), $this->db->or_like(). Jika kita buat query sql nya langsung, kurang lebih fungsi tersebut akan mengeksekusi query seperti berikut :

SELECT * FROM siswa WHERE nis LIKE '$keyword' OR nama LIKE '$keyword' OR jenis_kelamin LIKE '$keyword' OR telp LIKE '$keyword' OR alamat LIKE '$keyword'

STEP 5 – BUAT CONTROLLER

Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Siswa.php, lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/controllers/. Berikut ini kodenya :

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

class Siswa extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('SiswaModel');
  }

  public function index(){
    $data['siswa'] = $this->SiswaModel->view();
    $this->load->view('index', $data);
  }
  
  public function search(){
    // Ambil data NIS yang dikirim via ajax post
    $keyword = $this->input->post('keyword');
    $siswa = $this->SiswaModel->search($keyword);
    
    // Kita load file view.php sambil mengirim data siswa hasil query function search di SiswaModel
    $hasil = $this->load->view('view', array('siswa'=>$siswa), true);
    
    // Buat sebuah array
    $callback = array(
      'hasil' => $hasil, // Set array hasil dengan isi dari view.php yang diload tadi
    );

    echo json_encode($callback); // konversi varibael $callback menjadi JSON
  }
}

public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘SiswaModel’);, kode tersebut berfungsi untuk memuat (meload) model siswa (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

public function index(). Dalam fungsi ini ada kode $data[‘siswa’] = $this->SiswaModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model siswa (SiswaModel.php) lalu memasukannya ke dalam array data dengan index siswa ($data[‘siswa’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘view’, $data);. Kode tersebut berfungsi untuk memuat (meload) file view.php (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.

public function search() berfungsi untuk memanggil fungsi search() yang ada di SiswaModel. Fungsi search() tersebut untuk melakukan query ke database untuk mencari data siswa berdasarkan nis / nama / jennis kelamin / telelpon / alamat (sesuai yang diinput oleh user di textbox pencarian).


STEP 6 – VIEW
Langkah selanjutnya adalah membuat file view untuk menampilkan interface / antarmukanya. Buat sebuah file dengan nama index.php, lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/views/. Berikut tampilan dan kodenya :

View - Cara Membuat Pencarian Tanpa Refresh Halaman dengan Codeigniter

<html>
<head>
    <title>Search with Ajax CI</title>
    
    <script>
    var baseurl = "<?php echo base_url("index.php/"); ?>"; // Buat variabel baseurl untuk nanti di akses pada file config.js
    </script>
    <script src="<?php echo base_url("js/jquery.min.js"); ?>"></script> <!-- Load library jquery -->
    <script src="<?php echo base_url("js/config.js"); ?>"></script> <!-- Load file process.js -->
</head>
<body>

<h1>Data SISWA</h1><hr>

<input type="text" id="keyword">
<button type="button" id="btn-search">Search</button>
<a href="<?php echo base_url(); ?>">Reset</a>
<br>

<div id="view">
  <?php $this->load->view('view', array('siswa'=>$siswa)); // Load file view.php dan kirim data siswanya ?>
</div>

</body>
</html>

Pada kode diatas, kita menyisipkan kode $this->load->view(‘view’, array(‘siswa’=>$siswa));, kode tersebut berguna untuk me-load file view.php sebagai kondisi awal saat kita membuka web ini. Kita tampilkan dulu semua data siswanya.

Lalu kita buat file view nya, buat sebuah file dengan nama view.php, lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/views/. Berikut ini kodenya :

<table border="1" cellpadding="8">
  <tr>
    <th>NIS</th>
    <th>Nama</th>
    <th>Jenis Kelamin</th>
    <th>Telepon</th>
    <th>Alamat</th>
  </tr>

  <?php
  if( ! empty($siswa)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
    foreach($siswa as $data){ // Lakukan looping pada variabel siswa dari controller
      echo "<tr>";
      echo "<td>".$data->nis."</td>";
      echo "<td>".$data->nama."</td>";
      echo "<td>".$data->jenis_kelamin."</td>";
      echo "<td>".$data->telp."</td>";
      echo "<td>".$data->alamat."</td>";
      echo "</tr>";
    }
  }else{ // Jika data tidak ada
    echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
  }
  ?>
</table>

Pada kode diatas terdapat kode foreach($siswa as $data){, kode tersebut akan manampilkan satu per satu data siswa sampai data siswa yang terakhir.
echo “<td>”.$data->nis.”</td>”;
echo “<td>”.$data->nama.”</td>”;
echo “<td>”.$data->jenis_kelamin.” </td>”;
echo “<td>”.$data->telp.” </td>”;

echo “<td>”.$data->alamat.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel siswa.


STEP 7 – AJAX
Langkah terakhir adalah membuat kode ajax nya. Buat sebuah file dengan nama config.js, lalu simpan pada folder xampp/htdocs/search_ajax_ci/js/. Berikut ini kodenya :

$(document).ready(function(){
  $("#btn-search").click(function(){ // Ketika tombol simpan di klik
    // Ubah text tombol search menjadi SEARCHING... 
    // Dan tambahkan atribut disable pada tombol nya agar tidak bisa diklik lagi
    $(this).html("SEARCHING...").attr("disabled", "disabled");
    
    $.ajax({
      url: baseurl + 'siswa/search', // File tujuan
      type: 'POST', // Tentukan type nya POST atau GET
      data: {keyword: $("#keyword").val()}, // Set data yang akan dikirim
      dataType: "json",
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType("application/json;charset=UTF-8");
        }
      },
      success: function(response){ // Ketika proses pengiriman berhasil
        // Ubah kembali text button search menjadi SEARCH
        // Dan hapus atribut disabled untuk meng-enable kembali button search nya
        $("#btn-search").html("SEARCH").removeAttr("disabled");
        
        // Ganti isi dari div view dengan view yang diambil dari controller siswa function search
        $("#view").html(response.hasil);
      },
      error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
        alert(xhr.responseText); // munculkan alert
      }
    });
  });
});

Untuk kode ini sebagian besar sudah saya jelaskan dengan komentar di masing-masing kode.


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Tutorial membuat pencarian tanpa refresh halaman dengan codeigniter dan jquery ajax, Tutoria membuat pencarian tanpa reload halaman dengan codeigniter dan jquery ajax, cara mudah membuat pencarian tanpa harus refresh halaman dengan codeigniter mysql dan jquery ajax.

Pencarian

The post Cara Membuat Pencarian Tanpa Refresh Halaman dengan Codeigniter appeared first on My Notes Code.

]]>
http://www.mynotescode.com/pencarian-tanpa-refresh-codeigniter/feed/ 6
Tutorial PHP Bahasa Indonesia Lengkap Plus Source Code http://www.mynotescode.com/tutorial-php/ http://www.mynotescode.com/tutorial-php/#comments Sat, 18 Nov 2017 15:41:16 +0000 http://www.mynotescode.com/?p=1817 Selamat Datang coders. Anda kesini tentunya karena ingin mempelajari yang namanya Bahasa Pemograman PHP bukan? Jika iya Anda masuk ke blog yang tepat. Karena di blog ini saya akan terus update tutorial/artikel mengenai PHP dan bahasa pemograman lainnya. PHP adalah sebuah bahasa pemograman yang banyak dipakai oleh para web developer dan masuk ke kurikulum pembelajaran di...

The post Tutorial PHP Bahasa Indonesia Lengkap Plus Source Code appeared first on My Notes Code.

]]>
Selamat Datang coders. Anda kesini tentunya karena ingin mempelajari yang namanya Bahasa Pemograman PHP bukan? Jika iya Anda masuk ke blog yang tepat. Karena di blog ini saya akan terus update tutorial/artikel mengenai PHP dan bahasa pemograman lainnya. PHP adalah sebuah bahasa pemograman yang banyak dipakai oleh para web developer dan masuk ke kurikulum pembelajaran di SMK (jurusan RPL) dan diperkuliahan untuk jurusan Teknik Informatika, Manajemen Informatika, dan sebagainya. Sebelum Anda melihat-lihat daftar menu tutorial PHP apa saja yang terdapat pada blog ini, mari simak penjelasan sedikit mengenai PHP yang saya ambil dari website lain (Sumber ada dibawah artikel ini).

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).

Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.

PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source.


DAFTAR MENU TUTORIAL

  1. Cara Membuat Upload Gambar dengan PHP dan MySQL : Lihat
  2. Cara Membuat Upload Gambar dengan PHP AJAX dan MySQL : Lihat
  3. Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan PHP AJAX dan MySQL : Lihat
  4. Cara Mudah Membuat Laporan PDF dengan PHP dan MySQL : Lihat
  5. Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL : Lihat
  6. Cara Membuat CRUD Plus Upload Gambar dengan PHP AJAX Bootstrap : Lihat
  7. Cara Membuat Multiple Upload Gambar dengan PHP AJAX Bootstrap : Lihat
  8. Cara Membuat Import Data Excel dengan PHP dan MySQL : Lihat
  9. Cara Mudah Membuat Export Excel Tanpa Plugin dengan PHP : Lihat
  10. Cara Membuat Pencarian Tanpa Refresh Halaman dengan PHP dan AJAX : Lihat
  11. Cara Mudah Membuat Pagination dengan PHP dan MySQL : Lihat
  12. Cara Membuat Export Data Dari Database ke Excel dengan PHPExcel : Lihat
  13. Cara Membuat Import Data CSV dengan PHP dan MySQL : Lihat
  14. Cara Membuat Crop Gambar Plus Upload dengan PHP : Lihat
  15. Cara Mudah Membuat Multiple Insert dengan PHP dan MySQL : Lihat
  16. Cara Simpel Membuat Chained Dropdown dengan PHP AJAX dan MySQL : Lihat
  17. Cara Membuat Pencarian Plus Pagination Tanpa Refresh dengan PHP : Lihat

Semoga catatan-catatan ini bisa bermanfaat untuk Anda. SHARE jika Anda menyukai tutorial-tutorial tersebut. Terimakasih.

Happy Coding ^_^


SUMBER & REFERENSI
http://www.duniailkom.com/pengertian-dan-fungsi-php-dalam-pemograman-web/

The post Tutorial PHP Bahasa Indonesia Lengkap Plus Source Code appeared first on My Notes Code.

]]>
http://www.mynotescode.com/tutorial-php/feed/ 4
Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter http://www.mynotescode.com/pencarian-data-textbox-codeigniter/ http://www.mynotescode.com/pencarian-data-textbox-codeigniter/#respond Sat, 18 Nov 2017 04:32:05 +0000 http://www.mynotescode.com/?p=1820 Catatan saya kali ini akan membahas yang namanya Pencarian Data. Pencarian adalah salah satu fitur yang penting dalam sebuah aplikasi/web. Karena dengan fitur ini bisa memudahkan pengguna dalam mencari sebuah data yang sudah tersimpan dalam database. Pencarian yang akan kita buat kali ini adalah pencarian data dari database dan dari hasil pencarian tersebut, datanya akan...

The post Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter appeared first on My Notes Code.

]]>
Catatan saya kali ini akan membahas yang namanya Pencarian Data. Pencarian adalah salah satu fitur yang penting dalam sebuah aplikasi/web. Karena dengan fitur ini bisa memudahkan pengguna dalam mencari sebuah data yang sudah tersimpan dalam database. Pencarian yang akan kita buat kali ini adalah pencarian data dari database dan dari hasil pencarian tersebut, datanya akan kita tampilkan ke dalam sebuah textbox yang telah kita sediakan. Kita akan menggunakan Framework Codeigniter 3 (Versi 3), Jquery dan Database MySQL untuk menyimpan datanya. Berikut ini langkah-langkahnya.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Buat sebuah folder dengan nama getdata_ajax_ci lalu simpan pada folder xampp/htdocs/
  2. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/.
  3. Download plugin JQUERY, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  4. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/getdata_ajax_ci/js/.
  5. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  6. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/getdata_ajax_ci/.
  7. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Tabel - Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter

    CREATE TABLE IF NOT EXISTS `siswa` (
      `nis` varchar(11) NOT NULL,
      `nama` varchar(50) NOT NULL,
      `jenis_kelamin` varchar(10) NOT NULL,
      `telp` varchar(15) NOT NULL,
      `alamat` text NOT NULL,
      PRIMARY KEY (`nis`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/getdata_ajax_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/getdata_ajax_ci/';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'form';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi form.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Sekarang kita akan membuat modelnya. Berisi sebuah fungsi untuk menampilkan semua data siswa pada tabel siswa. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/application/models/. Berikut kodenya :

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

class SiswaModel extends CI_Model {
  
  public function viewByNis($nis){
    $this->db->where('nis', $nis);
    $result = $this->db->get('siswa')->row(); // Tampilkan data siswa berdasarkan NIS
    
    return $result; 
  }
}

Pada kode diatas, kita membuat sebuah fungsi viewByNis(). Dimana didalamnya terdapat kode $this->db->where(‘nis’, $nis);, kode ini yang berguna untuk menyeleksi data siswa berdasarkan NIS Jadi tidak akan semua kota yang munculnya. Pada fungsi ini juga, kita membutuhkan parameter $nis, $nis tersebut adalah NIS yang nantinya akan kita ambil dari controller. Lalu terdapat juga kode return $this->db->get(‘siswa’)->row(). Kode tersebut berfungsi untuk menampilkan data siswa berdasarkan NIS yang telah diset pada where clausenya. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->row(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data siswa.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Form.php, lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/application/controllers/. Berikut ini kodenya :

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

class Form extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('SiswaModel');
  }

  public function index(){
    $this->load->view('form');
  }
  
  public function search(){
    // Ambil data NIS yang dikirim via ajax post
    $nis = $this->input->post('nis');
    
    $siswa = $this->SiswaModel->viewByNis($nis);
    
    if( ! empty($siswa)){ // Jika data siswa ada/ditemukan
      // Buat sebuah array
      $callback = array(
        'status' => 'success', // Set array status dengan success
        'nama' => $siswa->nama, // Set array nama dengan isi kolom nama pada tabel siswa
        'jenis_kelamin' => $siswa->jenis_kelamin, // Set array jenis_kelamin dengan isi kolom jenis_kelamin pada tabel siswa
        'telepon' => $siswa->telp, // Set array jenis_kelamin dengan isi kolom telp pada tabel siswa
        'alamat' => $siswa->alamat, // Set array jenis_kelamin dengan isi kolom alamat pada tabel siswa
      );
    }else{
      $callback = array('status' => 'failed'); // set array status dengan failed
    }

    echo json_encode($callback); // konversi varibael $callback menjadi JSON
  }
}

Mungkin tidak perlu saya jelaskan lagi karena sudah saya kasih penjelasan tiap kode dengan  komentar.


STEP 6 – PROSES AJAX
Langkah selanjutnya adalah membuat sebuah file javascript untuk menampung kode jquery ajax nya. Buat sebuah file dengan nama config.js, lalu simpad pada folder xampp/htdocs/getdata_ajax_ci/js/. Berikut ini kodenya :

function search(){
  $("#loading").show(); // Tampilkan loadingnya
  
  $.ajax({
        type: "POST", // Method pengiriman data bisa dengan GET atau POST
        url: baseurl + "form/search", // Isi dengan url/path file php yang dituju
        data: {nis : $("#nis").val()}, // data yang akan dikirim ke file proses
        dataType: "json",
        beforeSend: function(e) {
            if(e && e.overrideMimeType) {
                e.overrideMimeType("application/json;charset=UTF-8");
            }
    },
    success: function(response){ // Ketika proses pengiriman berhasil
            $("#loading").hide(); // Sembunyikan loadingnya
            
            if(response.status == "success"){ // Jika isi dari array status adalah success
        $("#nama").val(response.nama); // set textbox dengan id nama
        $("#jenis_kelamin").val(response.jenis_kelamin); // set textbox dengan id jenis kelamin
        $("#telepon").val(response.telepon); // set textbox dengan id telepon
        $("#alamat").val(response.alamat); // set textbox dengan id alamat
      }else{ // Jika isi dari array status adalah failed
        alert("Data Tidak Ditemukan");
      }
    },
        error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
      alert(xhr.responseText);
        }
    });
}

$(document).ready(function(){
  $("#loading").hide(); // Sembunyikan loadingnya
  
    $("#btn-search").click(function(){ // Ketika user mengklik tombol Cari
        search(); // Panggil function search
    });
    
    $("#nis").keyup(function(){ // Ketika user menekan tombol di keyboard
    if(event.keyCode == 13){ // Jika user menekan tombol ENTER
      search(); // Panggil function search
    }
  });
});

STEP 7 – BUAT VIEW
Selanjutnya kita akan buat sebuah file untuk menampilkan formnya. Buat file baru dengan nama form.php, lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/application/views/. Berikut ini kode dan tampilannya :

Form - Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter

<html>
<head>
    <title>GET DATA with AJAX</title>
    
    <script>
    var baseurl = "<?php echo base_url("index.php/"); ?>"; // Buat variabel baseurl untuk nanti di akses pada file config.js
    </script>
    <script src="<?php echo base_url("js/jquery.min.js"); ?>"></script> <!-- Load library jquery -->
    <script src="<?php echo base_url("js/config.js"); ?>"></script> <!-- Load file process.js -->
</head>
<body>

<h1>FORM SISWA</h1><hr>
<form>
<table>
  <tr>
    <td>NIS</td>
    <td>:</td>
    <td><input type="text" name="nis" id="nis"> <button type="button" id="btn-search">Cari</button> <span id="loading">LOADING...</span></td>
  </tr>
  <tr>
    <td>Nama</td>
    <td>:</td>
    <td><input type="text" name="nama" id="nama"></td>
  </tr>
  <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td><input type="text" name="jenis_kelamin" id="jenis_kelamin"></td>
  </tr>
  <tr>
    <td>Telepon</td>
    <td>:</td>
    <td><input type="text" name="telepon" id="telepon"></td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td>:</td>
    <td><input type="text" name="alamat" id="alamat"></td>
  </tr>
</table>
</form>

</body>
</html>

PENJELASAN CARA KERJA
Saya akan coba jelaskan cara kerja / alur proses pencarian.
Pertama, User akan menginput NIS pada textbox dengan id=”nis”.

<input type="text" name="nis" id="nis">

Kemudian ketika user menekan tombol ENTER atau mengklik tombol Cari,

<button type="button" id="btn-search">Cari</button>

function search() akan mengeksekusi perintah AJAX (yang ada di file config.js) untuk mengirimkan NIS yang telah diinput tadi ke fungsi search() yang ada di file controller Form.php. Lalu di file fungsi search(), dilakukan pencarian data ke tabel siswa di database berdasarkan NIS yang dikirim tadi oleh AJAX. Kemudian, fungsi search() akan memberikan hasil pencarian dalam bentuk array $callback yang telah di konversi menjadi JSON. Array tersebut akan diambil kembali oleh AJAX dan memasukkannya ke dalam variabel response. Lalu langkah terakhir adalah men-set textbox dengan hasil pencarian tadi.


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Load data dari database ke dalam textbox dengan Codeigniter, Cara membuat pencarian tanpa refresh halaman dan menampilkannya ke textbox dengan Codeigniter, Cara mudah dan cepat membuat pencarian tanpa refresh halaman dan menampilkannya ke textbox dengan Codeigniter, Load data dari database tanpa refresh halaman ke dalam textbox dengan Codeigniter, cara menampilkan data otomatis dari database ke textbox dengan Codeigniter

Pencarian

The post Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter appeared first on My Notes Code.

]]>
http://www.mynotescode.com/pencarian-data-textbox-codeigniter/feed/ 0
Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL http://www.mynotescode.com/chained-dropdown-dengan-codeigniter/ http://www.mynotescode.com/chained-dropdown-dengan-codeigniter/#comments Fri, 10 Nov 2017 14:29:31 +0000 http://www.mynotescode.com/?p=1799 Pada kesempatan kali ini, saya akan coba share tutorial yang hampir sama dengan tutorial sebelumnya. Yaitu mengenai membuat yang namanya Chained Dropdown (sering disebut juga dengan dropdown bertingkat / combo box bertingkat / select berantai / combo box berantai dan masih banyak lagi). Hanya saja pada tutorial sebelumnya menggunakan PHP Native (Murni PHP), sedangkan pada...

The post Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL appeared first on My Notes Code.

]]>
Pada kesempatan kali ini, saya akan coba share tutorial yang hampir sama dengan tutorial sebelumnya. Yaitu mengenai membuat yang namanya Chained Dropdown (sering disebut juga dengan dropdown bertingkat / combo box bertingkat / select berantai / combo box berantai dan masih banyak lagi). Hanya saja pada tutorial sebelumnya menggunakan PHP Native (Murni PHP), sedangkan pada tutorial kali kita akan menggunakan Framework Codeigniter 3 (Versi 3).

Sebelum lanjut ke tutorial pembuatannya, saya akan jelaskan apa itu chained dropdown, Chained Dropdown adalah 2 buah dropdown / combo box yang keduanya saling terhubung atau berelasi. Misalnya saya memiliki combo box Provinsi dan combo box Kota. Nah combo box kota tadi isi pilihannya akan menyesuaikan dengan apa yang dipilih pada combo box provinsi. Jadi pilihan pada combo box kota tergantung apa yang dipilih pada combo box provinsi. Kurang lebih seperti itu gambaran mengenai chained dropdown ini. Sekarang kita lanjut ke langkah-langkah pembuatannya.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Buat sebuah folder dengan nama chained_dropdown lalu simpan pada folder xampp/htdocs/
  2. Buat sebuah folder dengan nama images, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
  3. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
  4. Download plugin JQUERY, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  5. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/js/.
  6. Download gambar loading, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  7. Copy and paste file loading.gif yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/images/.
  8. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  9. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/chained_dropdown.
  10. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama provinsi. Struktur tabelnya sebagai berikut :
    Struktur Tabel Provinsi - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL

    CREATE TABLE IF NOT EXISTS `provinsi` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `nama` varchar(100) NOT NULL,
      PRIMARY KEY (`id`)
    );
  3. Buat sebuah tabel lagi dengan nama kota. Struktur tabelnya sebagai berikut :
    Struktur Tabel Kota - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL

    CREATE TABLE IF NOT EXISTS `kota` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `id_provinsi` int(11) NOT NULL,
      `nama` varchar(100) NOT NULL,
      PRIMARY KEY (`id`)
    );

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/chained_dropdown/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/chained_dropdown/';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'form';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi form.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
#1
Pertama kita akan membuat model untuk provinsi. Buat sebuah file dengan nama ProvinsiModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :

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

class ProvinsiModel extends CI_Model {
  
  public function view(){
    return $this->db->get('provinsi')->result(); // Tampilkan semua data yang ada di tabel provinsi
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘provinsi’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel provinsi. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data provinsi.

#2 Kedua kita akan buat model untuk kota. Buat sebuah file dengan nama KotaModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :

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

class KotaModel extends CI_Model {
  
  public function viewByProvinsi($id_provinsi){
    $this->db->where('id_provinsi', $id_provinsi);
    $result = $this->db->get('kota')->result(); // Tampilkan semua data kota berdasarkan id provinsi
    
    return $result; 
  }
}

Hampir sama seperti fungsi view() di model provinsi. Hanya saja, pada fungsi viewByProvinsi() disini, kita akan menampilkan semua data kota berdasarkan provinsinya. Pada kode diatas terdapat kode $this->db->where(‘id_provinsi’, $id_provinsi);, kode ini yang berguna untuk menyeleksi data kota berdasarkan provinsi. Jadi tidak akan semua kota yang munculnya. Pada fungsi ini juga, kita membutuhkan parameter $id_provinsi, id tersebut adalah ID Provinsi yang nantinya akan kita ambil dari controller.


 STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/controllers/. Berikut ini kodenya :

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

class Form extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('ProvinsiModel');
    $this->load->model('KotaModel');
  }

  public function index(){
    $data['provinsi'] = $this->ProvinsiModel->view();
    
    $this->load->view('form', $data);
  }
  
  public function listKota(){
    // Ambil data ID Provinsi yang dikirim via ajax post
    $id_provinsi = $this->input->post('id_provinsi');
    
    $kota = $this->KotaModel->viewByProvinsi($id_provinsi);
    
    // Buat variabel untuk menampung tag-tag option nya
    // Set defaultnya dengan tag option Pilih
    $lists = "<option value=''>Pilih</option>";
    
    foreach($kota as $data){
      $lists .= "<option value='".$data->id."'>".$data->nama."</option>"; // Tambahkan tag option ke variabel $lists
    }
    
    $callback = array('list_kota'=>$lists); // Masukan variabel lists tadi ke dalam array $callback dengan index array : list_kota

    echo json_encode($callback); // konversi varibael $callback menjadi JSON
  }
}

Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘ProvinsiModel’); dan kode $this->load->model(‘KotaModel’);, kode tersebut berfungsi untuk memuat (meload) model provinsi dan kota (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘provinsi’] = $this->ProvinsiModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model provinsi (ProvinsiModel.php) lalu memasukannya ke dalam array data dengan index provinsi ($data[‘provinsi’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘form’, $data);. Kode tersebut berfungsi untuk memuat (meload) file form.php yang ada di folder views (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.

Fungsi yang kedua yaitu public function listKota(). Fungsi ini berguna untuk menampilkan data kota berdasarkan provinsi yang dikirim oleh Ajax dari form. Alur dari request dengan ajax ini adalah Pertama, kita telah memberi sebuah kode dengan event onchange pada combo box provinsi. Kode tersebut akan mengeksekusi kode ajax yang digunakan untuk mengirim data ID Provinsi yang diplih oleh user ke file option_kota.php. Di file tersebut akan dilakukan proses query sql untuk menampilkan data kota berdasarkan ID Provinsi yang di kirim tadi. Lalu file fungsi listKota() ini akan menghasilkan sebuah tag-tag option kota yang kemudian di konversi menjadi JSON untuk nantinya di ambil kembali hasil JSON tadi oleh AJAX. Lalu AJAX akan me-replace isi dari tag select kota sesuai JSON yang diterima tadi dari option_kota.php.


 STEP 6 – BUAT FORM
Selanjutnya kita akan buat sebuah file untuk menampilkan form dropdown provinsi dan kota. Buat file baru dengan nama form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/views/. Berikut ini kode dan tampilannya :

Form - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL

<html>
<head>
  <title>Chained Dropdown</title>
</head>
<body>
  <h1>Chained Dropdown</h1>
  <hr>
  
  <table cellpadding="8">
    <tr>
      <td><b>Provinsi</b></td>
      <td>
        <select name="provinsi" id="provinsi" style="width: 200px;">
          <option value="">Pilih</option>
          
          <?php
          foreach($provinsi as $data){ // Lakukan looping pada variabel siswa dari controller
            echo "<option value='".$data->id."'>".$data->nama."</option>";
          }
          ?>
        </select>
      </td>
    </tr>
    <tr>
      <td><b>Kota</b></td>
      <td>
        <select name="kota" id="kota" style="width: 200px;">
          <option value="">Pilih</option>
        </select>

        <div id="loading" style="margin-top: 15px;">
          <img src="images/loading.gif" width="18"> <small>Loading...</small>
        </div>
      </td>
    </tr>
  </table>
  
  <!-- Load librari/plugin jquery nya -->
  <script src="<?php echo base_url("js/jquery.min.js"); ?>" type="text/javascript"></script>
  
  <script>
  $(document).ready(function(){ // Ketika halaman sudah siap (sudah selesai di load)
    // Kita sembunyikan dulu untuk loadingnya
    $("#loading").hide();
    
    $("#provinsi").change(function(){ // Ketika user mengganti atau memilih data provinsi
      $("#kota").hide(); // Sembunyikan dulu combobox kota nya
      $("#loading").show(); // Tampilkan loadingnya
    
      $.ajax({
        type: "POST", // Method pengiriman data bisa dengan GET atau POST
        url: "<?php echo base_url("index.php/form/listKota"); ?>", // Isi dengan url/path file php yang dituju
        data: {id_provinsi : $("#provinsi").val()}, // data yang akan dikirim ke file yang dituju
        dataType: "json",
        beforeSend: function(e) {
          if(e && e.overrideMimeType) {
            e.overrideMimeType("application/json;charset=UTF-8");
          }
        },
        success: function(response){ // Ketika proses pengiriman berhasil
          $("#loading").hide(); // Sembunyikan loadingnya

          // set isi dari combobox kota
          // lalu munculkan kembali combobox kotanya
          $("#kota").html(response.list_kota).show();
        },
        error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
          alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError); // Munculkan alert error
        }
      });
    });
  });
  </script>
</body>
</html>

Pada kode diatas terdapat kode foreach($provinsi as $data){, kode tersebut akan manampilkan satu per satu data provinsi sampai data provinsi yang terakhir.
echo “<option value='”.$data->id.”‘>”.$data->nama.”</option>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel provinsi.

Akan saya jelaskan sedikit mengenai AJAX nya, karena sebagian besar sudah saya jelaskan lewat kode diatas dengan komentar.

  • url : diisi dengan url file yang akan dituju
  • type :  diisi dengan method yang ingin digunakan. isi dengan GET atau POST
  • data : data yang akan dikirim ke file yang dituju
  • success : function(){} : ketika proses pengiriman selesai, lakukan aksi
  • error : function(){} : ketika terjadi error, lakukan aksi

untuk penjelasan lebih lengkap mengenai atiribut yang ada di JQUERY AJAX, klik disini (Anda akan masuk ke halaman Iklan terlebih dahulu, Tunggu 5 detik lalu klik tombol SKIP AD yang ada di pojok kanan atas).


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Chained select box using codeigniter mysql, membuat chained dropdown bertingkat dengan codeigniter dan mysql, membuat dropdown berantai dengan codeigniter, tutorial chained dropdown dengan codeigniter dan mysql, chain dropdown dengan codeigniter, chained dropdown dengan codeigniter, membuat dropdown bertingkat dengan codeigniter

Chained Dropdown Codeigniter

The post Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL appeared first on My Notes Code.

]]>
http://www.mynotescode.com/chained-dropdown-dengan-codeigniter/feed/ 8
Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter http://www.mynotescode.com/export-excel-dengan-phpexcel-codeigniter/ http://www.mynotescode.com/export-excel-dengan-phpexcel-codeigniter/#respond Sat, 28 Oct 2017 07:13:41 +0000 http://www.mynotescode.com/?p=1780 Ketemu lagi dengan saya. Pada kesempatan kali ini, saya akan coba share catatan saya mengenai export data dari database ke excel. Hampir di setiap web aplikasi di perlukan yang namanya fitur Report / Laporan. Biasanya laporan tersebut menggunakan PDF atau Excel. Nah untuk catatan kali ini, kita akan buat laporan excel (export data ke excel)....

The post Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter appeared first on My Notes Code.

]]>
Ketemu lagi dengan saya. Pada kesempatan kali ini, saya akan coba share catatan saya mengenai export data dari database ke excel. Hampir di setiap web aplikasi di perlukan yang namanya fitur Report / Laporan. Biasanya laporan tersebut menggunakan PDF atau Excel. Nah untuk catatan kali ini, kita akan buat laporan excel (export data ke excel). Dalam catatan ini, kita menggunakan sebuah plugin yang sudah lama dan banyak digunakan yakni PHPExcel. Menurut saya, plugin ini benar-benar plugin yang sangat lengkap dan dokumentasi nya pun lengkap dan mudah di pahami (untuk dokumentasi saya cantumkan link nya pada akhir catatan ini). Oke sekarang kita langsung masuk ke langkah demi langkah untuk membuat hal tersebut. Oh iyaa disini kita juga pakai Framework Codeigniter 3 (versi 3).


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – INSTALASI
Pada tahap ini kita akan menyiapkan hal-hal yang diperlukan.

  1. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Download plugin PHPExcel, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  3. Buat sebuah folder dengan nama export_phpexcel_ci, lalu simpan pada folder xampp/htdocs/.
  4. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/export_phpexcel_ci.
  5. Ekstrak file codeigniter_v3.7z nya.
  6. Ekstrak file PHPExcel.7z yang telah di download tadi, lalu copy and paste folder PHPExcel nya ke folder xampp/htdocs/export_phpexcel_ci/application/third_party/.

STEP 2 – BUAT DATABASE
Buat database dengan nama mynotescode, lalu buat sebuah tabel siswa dengan struktur tabel seperti berikut ini :

Struktur Tabel - Cara Mudah Membuat Export Excel Tanpa Plugin dengan Codeigniter

CREATE TABLE `siswa` (
  `nis` varchar(11) NOT NULL PRIMARY KEY,
  `nama` varchar(50) NOT NULL,
  `jenis_kelamin` varchar(10) NOT NULL,
  `alamat` text NOT NULL
)

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/export_phpexcel_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/export_phpexcel_ci';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'siswa';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi siswa.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Sekarang kita akan membuat modelnya. Berisi sebuah fungsi untuk menampilkan semua data siswa pada tabel siswa. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/export_phpexcel_ci/application/models/. Berikut kodenya :

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

class SiswaModel extends CI_Model {
  public function view(){
    return $this->db->get('siswa')->result(); // Tampilkan semua data yang ada di tabel siswa
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘siswa’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel siswa. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data siswa.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Siswa.php, lalu simpan pada folder xampp/htdocs/export_phpexcel_ci/application/controllers/. Berikut ini kodenya :

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

class Siswa extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('SiswaModel');
  }
  
  public function index(){
    $data['siswa'] = $this->SiswaModel->view();
    $this->load->view('view', $data);
  }
  
  public function export(){
    // Load plugin PHPExcel nya
    include APPPATH.'third_party/PHPExcel/PHPExcel.php';
    
    // Panggil class PHPExcel nya
    $excel = new PHPExcel();

    // Settingan awal fil excel
    $excel->getProperties()->setCreator('My Notes Code')
                 ->setLastModifiedBy('My Notes Code')
                 ->setTitle("Data Siswa")
                 ->setSubject("Siswa")
                 ->setDescription("Laporan Semua Data Siswa")
                 ->setKeywords("Data Siswa");

    // Buat sebuah variabel untuk menampung pengaturan style dari header tabel
    $style_col = array(
      'font' => array('bold' => true), // Set font nya jadi bold
      'alignment' => array(
        'horizontal' => PHPExcel_Style_Alignment::HORIZONTAL_CENTER, // Set text jadi ditengah secara horizontal (center)
        'vertical' => PHPExcel_Style_Alignment::VERTICAL_CENTER // Set text jadi di tengah secara vertical (middle)
      ),
      'borders' => array(
        'top' => array('style'  => PHPExcel_Style_Border::BORDER_THIN), // Set border top dengan garis tipis
        'right' => array('style'  => PHPExcel_Style_Border::BORDER_THIN),  // Set border right dengan garis tipis
        'bottom' => array('style'  => PHPExcel_Style_Border::BORDER_THIN), // Set border bottom dengan garis tipis
        'left' => array('style'  => PHPExcel_Style_Border::BORDER_THIN) // Set border left dengan garis tipis
      )
    );

    // Buat sebuah variabel untuk menampung pengaturan style dari isi tabel
    $style_row = array(
      'alignment' => array(
        'vertical' => PHPExcel_Style_Alignment::VERTICAL_CENTER // Set text jadi di tengah secara vertical (middle)
      ),
      'borders' => array(
        'top' => array('style'  => PHPExcel_Style_Border::BORDER_THIN), // Set border top dengan garis tipis
        'right' => array('style'  => PHPExcel_Style_Border::BORDER_THIN),  // Set border right dengan garis tipis
        'bottom' => array('style'  => PHPExcel_Style_Border::BORDER_THIN), // Set border bottom dengan garis tipis
        'left' => array('style'  => PHPExcel_Style_Border::BORDER_THIN) // Set border left dengan garis tipis
      )
    );

    $excel->setActiveSheetIndex(0)->setCellValue('A1', "DATA SISWA"); // Set kolom A1 dengan tulisan "DATA SISWA"
    $excel->getActiveSheet()->mergeCells('A1:E1'); // Set Merge Cell pada kolom A1 sampai E1
    $excel->getActiveSheet()->getStyle('A1')->getFont()->setBold(TRUE); // Set bold kolom A1
    $excel->getActiveSheet()->getStyle('A1')->getFont()->setSize(15); // Set font size 15 untuk kolom A1
    $excel->getActiveSheet()->getStyle('A1')->getAlignment()->setHorizontal(PHPExcel_Style_Alignment::HORIZONTAL_CENTER); // Set text center untuk kolom A1

    // Buat header tabel nya pada baris ke 3
    $excel->setActiveSheetIndex(0)->setCellValue('A3', "NO"); // Set kolom A3 dengan tulisan "NO"
    $excel->setActiveSheetIndex(0)->setCellValue('B3', "NIS"); // Set kolom B3 dengan tulisan "NIS"
    $excel->setActiveSheetIndex(0)->setCellValue('C3', "NAMA"); // Set kolom C3 dengan tulisan "NAMA"
    $excel->setActiveSheetIndex(0)->setCellValue('D3', "JENIS KELAMIN"); // Set kolom D3 dengan tulisan "JENIS KELAMIN"
    $excel->setActiveSheetIndex(0)->setCellValue('E3', "ALAMAT"); // Set kolom E3 dengan tulisan "ALAMAT"

    // Apply style header yang telah kita buat tadi ke masing-masing kolom header
    $excel->getActiveSheet()->getStyle('A3')->applyFromArray($style_col);
    $excel->getActiveSheet()->getStyle('B3')->applyFromArray($style_col);
    $excel->getActiveSheet()->getStyle('C3')->applyFromArray($style_col);
    $excel->getActiveSheet()->getStyle('D3')->applyFromArray($style_col);
    $excel->getActiveSheet()->getStyle('E3')->applyFromArray($style_col);

    // Panggil function view yang ada di SiswaModel untuk menampilkan semua data siswanya
    $siswa = $this->SiswaModel->view();

    $no = 1; // Untuk penomoran tabel, di awal set dengan 1
    $numrow = 4; // Set baris pertama untuk isi tabel adalah baris ke 4
    foreach($siswa as $data){ // Lakukan looping pada variabel siswa
      $excel->setActiveSheetIndex(0)->setCellValue('A'.$numrow, $no);
      $excel->setActiveSheetIndex(0)->setCellValue('B'.$numrow, $data->nis);
      $excel->setActiveSheetIndex(0)->setCellValue('C'.$numrow, $data->nama);
      $excel->setActiveSheetIndex(0)->setCellValue('D'.$numrow, $data->jenis_kelamin);
      $excel->setActiveSheetIndex(0)->setCellValue('E'.$numrow, $data->alamat);
      
      // Apply style row yang telah kita buat tadi ke masing-masing baris (isi tabel)
      $excel->getActiveSheet()->getStyle('A'.$numrow)->applyFromArray($style_row);
      $excel->getActiveSheet()->getStyle('B'.$numrow)->applyFromArray($style_row);
      $excel->getActiveSheet()->getStyle('C'.$numrow)->applyFromArray($style_row);
      $excel->getActiveSheet()->getStyle('D'.$numrow)->applyFromArray($style_row);
      $excel->getActiveSheet()->getStyle('E'.$numrow)->applyFromArray($style_row);
      
      $no++; // Tambah 1 setiap kali looping
      $numrow++; // Tambah 1 setiap kali looping
    }

    // Set width kolom
    $excel->getActiveSheet()->getColumnDimension('A')->setWidth(5); // Set width kolom A
    $excel->getActiveSheet()->getColumnDimension('B')->setWidth(15); // Set width kolom B
    $excel->getActiveSheet()->getColumnDimension('C')->setWidth(25); // Set width kolom C
    $excel->getActiveSheet()->getColumnDimension('D')->setWidth(20); // Set width kolom D
    $excel->getActiveSheet()->getColumnDimension('E')->setWidth(30); // Set width kolom E
    
    // Set height semua kolom menjadi auto (mengikuti height isi dari kolommnya, jadi otomatis)
    $excel->getActiveSheet()->getDefaultRowDimension()->setRowHeight(-1);

    // Set orientasi kertas jadi LANDSCAPE
    $excel->getActiveSheet()->getPageSetup()->setOrientation(PHPExcel_Worksheet_PageSetup::ORIENTATION_LANDSCAPE);

    // Set judul file excel nya
    $excel->getActiveSheet(0)->setTitle("Laporan Data Siswa");
    $excel->setActiveSheetIndex(0);

    // Proses file excel
    header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    header('Content-Disposition: attachment; filename="Data Siswa.xlsx"'); // Set nama file excel nya
    header('Cache-Control: max-age=0');

    $write = PHPExcel_IOFactory::createWriter($excel, 'Excel2007');
    $write->save('php://output');
  }
}

Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘SiswaModel’);, kode tersebut berfungsi untuk memuat (meload) model siswa (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘siswa’] = $this->SiswaModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model siswa (SiswaModel.php) lalu memasukannya ke dalam array data dengan index siswa ($data[‘siswa’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘view’, $data);. Kode tersebut berfungsi untuk memuat (meload) file view.php (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.

Lalu pada function export(), disitu terdapat kode :

$excel->setActiveSheetIndex(0)->setCellValue(‘A1’, “DATA SISWA”);
Seperti yang sudah saya jelaskan lewat komentar, skrip diatas berfungsi untuk menset kolom A1 dengan tulisan DATA SISWA. Mungkin ada yang bingung maksud dari A1 disini apa? lihat gambar berikut ini :

Set Value - Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter

Yang saya beri tanda panah itulah yang dimaksud dengan kolom A1. Saya harap Anda paham maksud saya.

$excel->getActiveSheet()->mergeCells(‘A1:F1’);
Fungsi dari skrip diatas adalah untuk membuat “Merge Cells”. Dan arti dari ‘A1:F1’ itu adalah buat merge kolom dari kolom A1 sampai dengan kolom F1. Untuk lebih jelasnya lihat gambar dibawah :

Merge Cells - Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter

Setelah di merge akan menghasilkan seperti gambar berikut :

After Merge - Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter

Mungkin itu tambahan penjelasan dari skrip proses excel nya. untuk lebih lengkapnya mengenai fungsi apa saja yang disediakan oleh PHPExcel, Anda bisa membaca dokumentasinya langsung. Klik link berikut untuk download dokumentasi PHPExcel nya : Download.


STEP 6 – BUAT VIEW
Selanjutnya kita akan buat sebuah file untuk menampilkan data siswa dan tombol export nya. Buat file baru dengan nama view.php, lalu simpan pada folder xampp/htdocs/export_phpexcel_ci/application/views/. Berikut ini kode dan tampilannya :

View - Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter

<h1>Data Siswa</h1><hr>
<a href="<?php echo base_url("index.php/siswa/export"); ?>">Export ke Excel</a><br><br>

<table border="1" cellpadding="8">
<tr>
  <th>NIS</th>
  <th>Nama</th>
  <th>Jenis Kelamin</th>
  <th>Alamat</th>
</tr>

<?php
if( ! empty($siswa)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
  foreach($siswa as $data){ // Lakukan looping pada variabel siswa dari controller
    echo "<tr>";
    echo "<td>".$data->nis."</td>";
    echo "<td>".$data->nama."</td>";
    echo "<td>".$data->jenis_kelamin."</td>";
    echo "<td>".$data->alamat."</td>";
    echo "</tr>";
  }
}else{ // Jika data tidak ada
  echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
}
?>
</table>

Pada kode diatas terdapat kode foreach($siswa as $data){, kode tersebut akan manampilkan satu per satu data siswa sampai data siswa yang terakhir.
echo “<td>”.$data->nis.”</td>”;
echo “<td>”.$data->nama.”</td>”;
echo “<td>”.$data->jenis_kelamin.” </td>”;
echo “<td>”.$data->alamat.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel siswa.


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Dokumentasi PHPExcel : download
Membuat Export Data ke Excel tanpa plugin dengan codeigniter, Membuat Export Data ke Excel tanpa plugin dengan codeigniter 3, membuat laporan excel tanpa plugin dengan codeigniter, cara mudah membuat laporan excel tanpa plugin dengan framework codeigniter 3

PHPExcel

The post Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter appeared first on My Notes Code.

]]>
http://www.mynotescode.com/export-excel-dengan-phpexcel-codeigniter/feed/ 0
Cara Mudah Membuat Export Excel Tanpa Plugin dengan Codeigniter http://www.mynotescode.com/export-excel-tanpa-plugin-codeigniter/ http://www.mynotescode.com/export-excel-tanpa-plugin-codeigniter/#respond Tue, 10 Oct 2017 03:57:49 +0000 http://www.mynotescode.com/?p=1754 Kali ini saya akan melanjutkan catatan-catatan saya mengenai Framework Codeigniter. Saya akan coba share catatan / tutorial mengenai cara membuat export data ke excel (laporan excel) tanpa plugin dengan framework codeigniter 3 (versi 3). Tentunya semua hal ada kelebihan dan kelemahananya. Jika kalian membuat export ke excel tanpa plugin, kalian akan kesulitan ketika akan melakukan...

The post Cara Mudah Membuat Export Excel Tanpa Plugin dengan Codeigniter appeared first on My Notes Code.

]]>
Kali ini saya akan melanjutkan catatan-catatan saya mengenai Framework Codeigniter. Saya akan coba share catatan / tutorial mengenai cara membuat export data ke excel (laporan excel) tanpa plugin dengan framework codeigniter 3 (versi 3). Tentunya semua hal ada kelebihan dan kelemahananya. Jika kalian membuat export ke excel tanpa plugin, kalian akan kesulitan ketika akan melakukan kustomisasi terhadap cell/kolom di excel nya. Tapi cara ini cukup ampuh bagi kalian yang dikejar sama deadline kerjaan atau pun kalian yang sedang diburu-buru oleh dosen pembimbing kalian haha. Oke langsung ikuti langkah-langkah nya berikut ini.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – INSTALASI
Pada tahap ini kita akan menyiapkan hal-hal yang diperlukan.

  1. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Buat sebuah folder dengan nama export_excel_ci, lalu simpan pada folder xampp/htdocs/.
  3. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/export_excel_ci.
  4. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – BUAT DATABASE
Buat database dengan nama mynotescode, lalu buat sebuah tabel siswa dengan struktur tabel seperti berikut ini :

Struktur Tabel - Cara Mudah Membuat Export Excel Tanpa Plugin dengan Codeigniter

CREATE TABLE `siswa` (
  `nis` varchar(11) NOT NULL PRIMARY KEY,
  `nama` varchar(50) NOT NULL,
  `jenis_kelamin` varchar(10) NOT NULL,
  `alamat` text NOT NULL
)

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/export_excel_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/export_excel_ci';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database, form, dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'siswa';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi siswa.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Sekarang kita akan membuat modelnya. Berisi sebuah fungsi untuk menampilkan semua data siswa pada tabel siswa. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/export_excel_ci/application/models/. Berikut kodenya :

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

class SiswaModel extends CI_Model {
  public function view(){
    return $this->db->get('siswa')->result(); // Tampilkan semua data yang ada di tabel siswa
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘siswa’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel siswa. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data siswa.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Siswa.php, lalu simpan pada folder xampp/htdocs/export_excel_ci/application/controllers/. Berikut ini kodenya :

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

class Siswa extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('SiswaModel');
  }
  
  public function index(){
    $data['siswa'] = $this->SiswaModel->view();
    $this->load->view('view', $data);
  }
  
  public function export(){
    // Skrip berikut ini adalah skrip yang bertugas untuk meng-export data tadi ke excel
    header("Content-type: application/vnd-ms-excel");
    header("Content-Disposition: attachment; filename=Data_Siswa.xls");
    
    $data['siswa'] = $this->SiswaModel->view();
    $this->load->view('export', $data);
  }
}

Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘SiswaModel’);, kode tersebut berfungsi untuk memuat (meload) model siswa (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘siswa’] = $this->SiswaModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model siswa (SiswaModel.php) lalu memasukannya ke dalam array data dengan index siswa ($data[‘siswa’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘view’, $data);. Kode tersebut berfungsi untuk memuat (meload) file view.php (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.

Inti dari kode untuk export excel nya hanya ada 2 baris kode. Berikut ini kodenya :
header(“Content-type: application/vnd-ms-excel”);
header(“Content-Disposition: attachment; filename=Data_Siswa.xls”);

Yang saya beri warna merah bisa kalian ganti dengan nama file excel yang kalian inginkan.


STEP 6 – BUAT VIEW
Selanjutnya kita akan buat sebuah file untuk menampilkan data siswa dan tombol export nya. Buat file baru dengan nama view.php, lalu simpan pada folder xampp/htdocs/export_excel_ci/application/views/. Berikut ini kode dan tampilannya :

View - Cara Mudah Membuat Export Excel Tanpa Plugin dengan Codeigniter

<h1>Data Siswa</h1><hr>
<a href="<?php echo base_url("index.php/siswa/export"); ?>">Export ke Excel</a><br><br>

<table border="1" cellpadding="8">
<tr>
  <th>NIS</th>
  <th>Nama</th>
  <th>Jenis Kelamin</th>
  <th>Alamat</th>
</tr>

<?php
if( ! empty($siswa)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
  foreach($siswa as $data){ // Lakukan looping pada variabel siswa dari controller
    echo "<tr>";
    echo "<td>".$data->nis."</td>";
    echo "<td>".$data->nama."</td>";
    echo "<td>".$data->jenis_kelamin."</td>";
    echo "<td>".$data->alamat."</td>";
    echo "</tr>";
  }
}else{ // Jika data tidak ada
  echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
}
?>
</table>

Pada kode diatas terdapat kode foreach($siswa as $data){, kode tersebut akan manampilkan satu per satu data siswa sampai data siswa yang terakhir.
echo “<td>”.$data->nis.”</td>”;
echo “<td>”.$data->nama.”</td>”;
echo “<td>”.$data->jenis_kelamin.” </td>”;
echo “<td>”.$data->alamat.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel siswa.


STEP 7 – BUAT FILE EXPORT
Langkah terakhir adalah kita buat file untuk tampilan data di excel nya nanti. Buat file baru dengan nama export.php, lalu simpan pada folder xampp/htdocs/export_excel_ci/application/views/. Berikut ini kodenya :

<h4>Data Siswa</h4>

<table border="1" cellpadding="8">
<tr>
  <th>NIS</th>
  <th>Nama</th>
  <th>Jenis Kelamin</th>
  <th>Alamat</th>
</tr>

<?php
if( ! empty($siswa)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
  foreach($siswa as $data){ // Lakukan looping pada variabel siswa dari controller
    echo "<tr>";
    echo "<td>".$data->nis."</td>";
    echo "<td>".$data->nama."</td>";
    echo "<td>".$data->jenis_kelamin."</td>";
    echo "<td>".$data->alamat."</td>";
    echo "</tr>";
  }
}else{ // Jika data tidak ada
  echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
}
?>
</table>

Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Membuat Export Data ke Excel tanpa plugin dengan codeigniter, Membuat Export Data ke Excel tanpa plugin dengan codeigniter 3, membuat laporan excel tanpa plugin dengan codeigniter, cara mudah membuat laporan excel tanpa plugin dengan framework codeigniter 3

Export Excel

The post Cara Mudah Membuat Export Excel Tanpa Plugin dengan Codeigniter appeared first on My Notes Code.

]]>
http://www.mynotescode.com/export-excel-tanpa-plugin-codeigniter/feed/ 0
Cara Mudah Membuat Upload Gambar Tanpa Refresh dengan Codeigniter http://www.mynotescode.com/upload-gambar-tanpa-refresh-codeigniter/ http://www.mynotescode.com/upload-gambar-tanpa-refresh-codeigniter/#respond Mon, 02 Oct 2017 07:55:22 +0000 http://www.mynotescode.com/?p=1738 Setelah pada catatan sebelumnya saya membuat tutorial mengenai Cara Membuat Upload Gambar dengan Codeigniter dan MySQL. Pada catatan ini tujuan utamanya sama yakni membuat upload gambar. hanya perbedaannya adalah kita akan membuat upload gambar tanpa refresh halaman dengan Cramework Codeigniter versi 3 (Codeigniter 3) dan bantuan librari Jquery Ajax. Jadi ketika proses upload berlangsung, halaman...

The post Cara Mudah Membuat Upload Gambar Tanpa Refresh dengan Codeigniter appeared first on My Notes Code.

]]>
Setelah pada catatan sebelumnya saya membuat tutorial mengenai Cara Membuat Upload Gambar dengan Codeigniter dan MySQL. Pada catatan ini tujuan utamanya sama yakni membuat upload gambar. hanya perbedaannya adalah kita akan membuat upload gambar tanpa refresh halaman dengan Cramework Codeigniter versi 3 (Codeigniter 3) dan bantuan librari Jquery Ajax. Jadi ketika proses upload berlangsung, halaman tersebut tidak akan me-refresh / me-reload sehingga tampak lebih dinamis. Oke kita langsung menuju ke langkah-langkah untuk membuatnya.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – INSTALASI
Pada tahap ini kita akan menyiapkan hal-hal yang diperlukan.

  1. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Buat sebuah folder dengan nama upload_ci_ajax, lalu simpan pada folder xampp/htdocs/.
  3. Buat sebuah folder dengan nama images, lalu simpan pada xampp/htdocs/upload_ci_ajax/.
  4. Buat sebuah folder dengan nama js, lalu simpan pada xampp/htdocs/upload_ci_ajax/.
  5. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/upload_ci_ajax.
  6. Ekstrak file codeigniter_v3.7z nya.
  7. Download JQUERY, klik link berikut : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  8. Copy and paste file jquery.min.js pada folder xampp/htdocs/upload_ci_ajax/js/.

STEP 2 – BUAT DATABASE
Buat database dengan nama mynotescode, lalu buat sebuah tabel gambar dengan struktur tabel seperti berikut ini :

Struktur Tabel - Cara Membuat Upload Gambar dengan Codeigniter dan MySQL

CREATE TABLE IF NOT EXISTS `gambar` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `deskripsi` varchar(100) NOT NULL,
  `nama_file` varchar(100) NOT NULL,
  `ukuran_file` double NOT NULL,
  `tipe_file` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
)

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/upload_ci_ajax/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/upload_ci_ajax';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('form','url');

    Kode diatas digunakan untuk memuat (menload) class database, form, dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'gambar';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi main.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Sekarang kita akan membuat modelnya. berisi sebuah fungsi untuk menampilkan semua data gambar pada tabel gambar. Buat sebuah file dengan nama GambarModel.php, Lalu simpan pada folder xampp/htdocs/upload_ci_ajax/application/models/. Berikut kodenya :

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

class GambarModel extends CI_Model {
  // Fungsi untuk menampilkan semua data gambar
  public function view(){
    return $this->db->get('gambar')->result();
  }
  
  // Fungsi untuk melakukan proses upload file
  public function upload(){
    $config['upload_path'] = './images/';
    $config['allowed_types'] = 'jpg|png|jpeg';
    $config['max_size']	= '2048';
    $config['remove_space'] = TRUE;
  
    $this->load->library('upload', $config); // Load konfigurasi uploadnya
    if($this->upload->do_upload('input_gambar')){ // Lakukan upload dan Cek jika proses upload berhasil
      // Jika berhasil :
      $return = array('result' => 'success', 'file' => $this->upload->data(), 'error' => '');
      return $return;
    }else{
      // Jika gagal :
      $return = array('result' => 'failed', 'file' => '', 'error' => $this->upload->display_errors());
      return $return;
    }
  }
  
  // Fungsi untuk menyimpan data ke database
  public function save($upload){
    $data = array(
      'deskripsi'=>$this->input->post('input_deskripsi'),
      'nama_file' => $upload['file']['file_name'],
      'ukuran_file' => $upload['file']['file_size'],
      'tipe_file' => $upload['file']['file_type']
    );
    
    $this->db->insert('gambar', $data);
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘gambar’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel gambar. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data gambar.

$config[‘upload_path’] = ‘./images/’;
Kode berfungsi untuk menentukan tempat gambar yang kita upload disimpan.

$config[‘allowed_types’] = ‘jpg|png|jpeg’;
Kode ini untuk menentukan file apa saja yang boleh kita upload. Kode ini diisi dengan mime type atau ekstensi dari file yang akan kita upload.

$config[‘max_size’]    = ‘2048’;
Kode ini untuk menentukan maksimal ukuran file yang boleh di upload. Satuannya adalah KB (Kilobytes). Disini kita mengisi dengan angka “2048”, berarti sama saja dengan 2 MB. Karena 1024 KB = 1 MB.

$config[‘remove_space’] = TRUE;
Kode ini berfungsi untuk mengganti “spasi ( )” pada nama file yang kita upload dengan “underscore (_)”. Misalkan saya akan mengupload gambar dengan nama “My Notes Code.png”, nanti setelah kita upload, nama file nya akan berubah menjadi “My_Notes_Code.png”. Jadi spasinya di ganti dengan underscore.

Untuk lebih lengkapnya tentang konfigurasi dan validasi yang bisa kita lakukan terhadap file yang akan di upload, kalian bisa lihat disini (tunggu 5 detik, lalu klik tombol SKIP AD yang ada di pojok kanan atas).

$this->upload->data()
Kode ini berfungsi untuk mengambil data hasil upload yang kita lakukan. Kode ini akan mengeluarkan beberapa data yang kita perlukan seperti nama file, ukuran file, width, height, dan lain-lain. Untuk lebih lengkapnya bisa kalian lihat disini (tunggu 5 detik, lalu klik tombol SKIP AD yang ada di pojok kanan atas).

$this->upload->display_errors()
Kode ini berfungsi untuk mengeluarkan pesan error jika terjadi error saat akan melakukan upload. Lebih lengkapnya bisa kalian lihat disini (tunggu 5 detik, lalu klik tombol SKIP AD yang ada di pojok kanan atas).

$data = array(
    ‘deskripsi‘=>$this->input->post(‘input_deskripsi’),
    ‘nama_file‘ => $upload[‘file’][‘file_name’],
    ‘ukuran_file‘ => $upload[‘file’][‘file_size’],
    ‘tipe_file‘ => $upload[‘file’][‘file_type’]
);
Kemudian kita masuk ke fungsi save(). Dalam fungsi tersebut terdapat kode seperti diatas. Kita buat sebuah array untuk menampung data apa saja yang akan kita simpan ke tabel di database. Lihat pada kode yang saya beri warna merah, kode tersebut harus sama dengan nama-nama field/kolom pada tabel gambar di databasenya. Lalu array $data tersebut akan kita simpan ke database dengan kode ini $this->db->insert(‘gambar’, $data). Struktur dari kode ini adalah $this->db->insert(nama_tabel, array_data);.

$upload[‘file‘][‘file_name’]
$upload[‘file‘][‘file_size’]
$upload[‘file‘][‘file_type’]
Untuk kode ini, ini diambil dari result atau hasil array yang dikeluarkan function upload(). Lihat pada baris ke 19. Disitu terdapa kode ini : $return = array(‘result’ => ‘success’, ‘file‘ => $this->upload->data(), ‘error’ => ”);. Nah yang saya beri warna merah pada kode diatas, itu harus sama dengan yang saya beri warna hijau. Untuk file_name, file_size, file_type itu adalah keluaran dari kode $this->upload->data() yang sudah saya jelaskan sebelumnya.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Gambar.php, lalu simpan pada folder xampp/htdocs/upload_ci_ajax/application/controllers/. Berikut ini kodenya :

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

class Gambar extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('GambarModel');
  }
  
  public function index(){
    $data['gambar'] = $this->GambarModel->view();
    $this->load->view('gambar/index', $data);
  }
  
  public function upload(){
    // lakukan upload file dengan memanggil function upload yang ada di GambarModel.php
    $upload = $this->GambarModel->upload();
    
    if($upload['result'] == "success"){ // Jika proses upload sukses
       // Panggil function save yang ada di GambarModel.php untuk menyimpan data ke database
      $this->GambarModel->save($upload);
      
      // Echo hasil dari proses dengan tanda pemisah <|>
      echo "SUCCESS<|>Gambar berhasil diupload<|>";
      echo $this->load->view('gambar/view', array('gambar'=>$this->GambarModel->view()), true); // Load view.php
    }else{ // Jika proses upload gagal
      // Echo hasil dari proses dengan tanda pemisah <|>
      echo "FAILED<|>".$upload['error']; // Ambil pesan error uploadnya untuk dikirim ke file form dan ditampilkan
    }
  }
}

Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘GambarModel’);, kode tersebut berfungsi untuk memuat (meload) model gambar (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘gambar’] = $this->GambarModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model gambar (GambarModel.php) lalu memasukannya ke dalam array data dengan index gambar ($data[‘gambar’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘gambar/view’, $data);. Kode tersebut berfungsi untuk memuat (meload) file view.php (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.

echo “SUCCESS<|>Gambar berhasil diupload<|>”;
echo $this->load->view(‘gambar/view’, array(‘gambar’=>$this->GambarModel->view()), true);
Pada kode diatas terlihat saya memberi tanda “<|>”. Tnda itu hanya untuk pemisah agar nanti pada proses ajax nya bisa kita pisahkan berdasarkan tanda tadi. Disini saya set data pertama adalah data status sukses atau tidak, kedua adalah pesan sukses atau error, dan terakhir adalah view data untuk merefresh tabel nya di web. Pada skrip ini juga terdapat perbedaan untuk penggunaan $this->load->view(). Di parameter terakhir saya kasih “true”. Itu kita set true karena yang akan kita ambil adalah dalam bentuk string data agar nantinya bisa kita replace isi dari div dengan data view tersebut oleh jquery nya


STEP 6 – BUAT HALAMAN AWAL DAN FORM
Selanjutnya kita akan membuat halaman untuk menampilkan data dan form upload nya. Buat sebuah folder dengan nama gambar pada folder xampp/htdocs/upload_ci/application/views/. Lalu buat sebuah file dengan nama index.php, lalu simpan pada folder gambar yang tadi kita buat (xampp/htdocs/upload_ci_ajax/application/views/gambar/). Berikut ini tampilan dan kodenya :

View - Cara Mudah Membuat Upload Gambar Tanpa Refresh dengan Codeigniter

<html>
<head>
  <title>Data Gambar</title>
  <script src="<?php echo base_url("js/jquery-2.2.4.min.js"); ?>"></script>
  <script src="<?php echo base_url("js/ajax.js"); ?>"></script>
</head>
<body>
  <h1>Data Gambar</h1><hr>

  <form>
    <!-- Untuk menampilkan pesan -->
    <div id="msg"></div>

    <table cellpadding="8">
      <tr>
        <td>Deskripsi</td>
        <td><input type="text" name="input_deskripsi" id="input_deskripsi"></td>
      </tr>
      <tr>
        <td>Gambar</td>
        <td><input type="file" name="input_gambar" id="input_gambar"></td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td><button type="button" id="btn-upload">Upload</button></td>
        <td><span id="loading">Uploading...</span></td>
      </tr>
    </table>
  </form>

  <div id="view">
    <?php $this->load->view('gambar/view', array('gambar'=>$gambar)); // Load view.php dan kirimkan data gambarnya ?>
  </div>

  <script>
  $(document).ready(function(){
    $("#loading").hide(); // Sembunyikan dulu loadingnya
    
    $("#btn-upload").click(function(){ // Ketika user mengklik tombol Upload, lakukan: 
      upload('<?php echo base_url("index.php/gambar/upload"); ?>', $("#loading"), $("#msg"), $("#view")); // Panggil fungsi upload yg ada di file process.js
    });
  });
  </script>
</body>
</html>

Pada skrip diatas setiap input kita beri atiribut id agar nanti bisa kita ambil value nya dengan jquery. Disini saya pisahkan tabel view nya dan pada skrip ini kita beri fungsi load untuk mengambil isi dari view.php. Kenapa saya pisahkan? agar nanti kita tidak harus buat 2x. karena view.php ini akan kita gunakan juga pada controller untuk nanti kita replace ke div id=”view” (yang pada step sebelumnya saya jelaskan).

upload(‘<?php echo base_url(“index.php/gambar/upload”); ?>’, ‘#input_gambar’, $(“#loading”), $(“#msg”), $(“#view”));
Untuk skrip ini berfungsi untuk memanggil fungsi upload yang nanti akan kita buat pada file ajax.js. Tentunya dengan beberapa parameter yang harus kita berikan untuk fungsi tersebut. Nanti pada step membuat ajax.js akan saya jelaskan.


STEP 7 – BUAT VIEW
Lalu kita akan membuat file untuk menampilkan data gambar nya dalam bentuk tabel. Buat sebuah file dengan nama view.php, lalu simpan pada folder xampp/htdocs/upload_ci_ajax/protected/views/gambar/. Berikut ini kode nya :

<table border="1" cellpadding="8">
<tr>
  <th>Gambar</th>
  <th>Deskripsi</th>
  <th>Nama File</th>
  <th>Ukuran File</th>
  <th>Tipe File</th>
</tr>

<?php
if( ! empty($gambar)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
  foreach($gambar as $data){ // Lakukan looping pada variabel gambar dari controller
    echo "<tr>";
    echo "<td><img src='".base_url("images/".$data->nama_file)."' width='100' height='100'></td>";
    echo "<td>".$data->deskripsi."</td>";
    echo "<td>".$data->nama_file."</td>";
    echo "<td>".$data->ukuran_file." kB</td>";
    echo "<td>".$data->tipe_file."</td>";
    echo "</tr>";
  }
}else{ // Jika data tidak ada
  echo "<tr><td colspan='5'>Data tidak ada</td></tr>";
}
?>
</table>

Pada kode diatas terdapat kode foreach($gambar as $data){, kode tersebut akan manampilkan satu per satu data gambar sampai data gambar yang terakhir.

echo “<td><img src='”.base_url(“images/”.$data->nama_file).”‘ width=’100′ height=’100’></td>”;
echo “<td>”.$data->deskripsi.”</td>”;
echo “<td>”.$data->nama_file.”</td>”;
echo “<td>”.$data->ukuran_file.” kB</td>”;
echo “<td>”.$data->tipe_file.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel gambar.


STEP 8 – BUAT AJAX
Langkah terakhir adalah kita akan membuat proses ajax nya. Buat sebuah file dengan nama ajax.js, lalu simpan pada folder xampp/htdocs/upload_ci_ajax/js/. Berikut ini kodenya :

function upload(url, loading, msg, view){
  var data = new FormData();
  // ambil atribut file yg akan diupload, lalu masukkan ke variabel input_gambar
  data.append('input_gambar', $(field)[0].files[0]); 
  
  // Ambil isi dari textbox deskripsi
  data.append('input_deskripsi', $("#input_deskripsi").val()); 
  
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        cache: false,
        processData: false,
        contentType: false,
        beforeSend: function(){
      msg.hide();
      loading.show();
    },
        success: function(response){
      // Pisahkan hasil (output) proses dengan tanda pemisah <|>
      var result = response.split("<|>");
      
      if(result[0] == "SUCCESS"){ // Jika sukses
        loading.hide(); // sembunyikan loadingnya
        msg.css({"color":"green"}).html(result[1]).show(); // tampilkan pesan sukses
        view.html(result[2]); // Load ulang tabel view nya
      }else{ // Jika gagal
        loading.hide(); // sembunyikan loadingnya
        msg.css({"color":"red"}).html(result[1]).show(); // tampilkan pesan error
      }
    },
        error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.responseText);
        }
    });
}

data.append(‘input_gambar’, $(field)[0].files[0]); 
kode tersebut berfungsi untuk mengambil (GET) atribut-atribut dari file gambar yang akan kita upload seperti nama file, size file, tipe file, dan lain-lain. atribut-atribut tadi kemudian akan disimpan ke dalam array input_gambar yang nantinya array input_gambar tersebut akan di akses oleh PHP pada proses upload.

function upload(url, field, loading, msg, view){
Pada fungsi upload ini, saya memberikan beberapa parameter. Berikut penjelasannya :

  1. url : adalah url file untuk memproses uploadnya
  2. loading : atribut id dari tag div untuk loading
  3. msg : atribut id dari tag div untuk pesan / message
  4. view : atribut id dari tag div untuk view

Lalu pada kode AJAX nya. disitu ada beberapa atribut yang harus kita isi. berikut penjelasannya :

  • url : diisi dengan url file yang akan dituju
  • type :  diisi dengan method yang ingin digunakan. isi dengan GET atau POST
  • data : data yang akan dikirim ke file yang dituju
  • success : function(){} : ketika proses pengiriman selesai, lakukan aksi
  • error : function(){} : ketika terjadi error, lakukan aksi

untuk penjelasan lebih lengkap mengenai atribut yang ada di JQUERY AJAX, klik disini.


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Membuat Upload Gambar Tanpa Refresh dengan Codeigniter, Membuat Upload Gambar Tanpa Refresh dengan CI, Tutorial lengkap membuat Upload Gambar Tanpa Refresh Halaman dengan Codeigniter, Tutorial lengkap membuat Upload Gambar Tanpa Refresh Halaman dengan CI, Upload Gambar Tanpa Refresh dengan framework codeigniter, Upload Gambar Tanpa Refresh dengan framework CI, Cara Mudah Membuat Upload Gambar Tanpa Refresh Halaman dengan Codeigniter dan AJAX

UPLOAD GAMBAR

The post Cara Mudah Membuat Upload Gambar Tanpa Refresh dengan Codeigniter appeared first on My Notes Code.

]]>
http://www.mynotescode.com/upload-gambar-tanpa-refresh-codeigniter/feed/ 0
Cara Membuat Upload Gambar dengan Codeigniter dan MySQL http://www.mynotescode.com/upload-gambar-dengan-codeigniter/ http://www.mynotescode.com/upload-gambar-dengan-codeigniter/#comments Tue, 19 Sep 2017 14:34:05 +0000 https://mynotescode.wordpress.com/?p=171 Pada kesempatan kali ini, saya akan coba berbagi catatan / tutorial mengenai bagaimana cara membuat upload gambar dengan menggunakan Framework Codeigniter (CI). Codeigniter yang akan kita gunakan adalah Codeigniter 3 (versi 3). Tentunya hampir setiap web memiliki fitur untuk meng-upload sebuah gambar. Dan yang paling membuat developer semakin mudah adalah karena framework codeigniter telah menyediakan...

The post Cara Membuat Upload Gambar dengan Codeigniter dan MySQL appeared first on My Notes Code.

]]>
Pada kesempatan kali ini, saya akan coba berbagi catatan / tutorial mengenai bagaimana cara membuat upload gambar dengan menggunakan Framework Codeigniter (CI). Codeigniter yang akan kita gunakan adalah Codeigniter 3 (versi 3). Tentunya hampir setiap web memiliki fitur untuk meng-upload sebuah gambar. Dan yang paling membuat developer semakin mudah adalah karena framework codeigniter telah menyediakan sebuah fungsi (function) untuk memudahkan kita dalam melakukan upload file / gambar. Sekarang kita lanjut untuk membahas step by step untuk membuat upload gambar, Ikuti langkah-langkahnya berikut ini.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – INSTALASI
Pada tahap ini kita akan menyiapkan hal-hal yang diperlukan.

  1. Download Framework Codeigniter, klik link berikut : download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Buat sebuah folder dengan nama upload_ci, lalu simpan pada folder xampp/htdocs/.
  3. Buat sebuah folder dengan nama images, lalu simpan pada xampp/htdocs/upload_ci_ajax/.
  4. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/upload_ci.
  5. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – BUAT DATABASE
Buat database dengan nama mynotescode, lalu buat sebuah tabel gambar dengan struktur tabel seperti berikut ini :

Struktur Tabel - Cara Membuat Upload Gambar dengan Codeigniter dan MySQL

CREATE TABLE IF NOT EXISTS `gambar` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `deskripsi` varchar(100) NOT NULL,
  `nama_file` varchar(100) NOT NULL,
  `ukuran_file` double NOT NULL,
  `tipe_file` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
)

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/upload_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/upload_ci';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('form','url');

    Kode diatas digunakan untuk memuat (menload) class database, form, dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'gambar';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi main.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Sekarang kita akan membuat modelnya. berisi sebuah fungsi untuk menampilkan semua data gambar pada tabel gambar. Buat sebuah file dengan nama GambarModel.php, Lalu simpan pada folder xampp/htdocs/upload_ci/application/models/. Berikut kodenya :

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

class GambarModel extends CI_Model {
  // Fungsi untuk menampilkan semua data gambar
  public function view(){
    return $this->db->get('gambar')->result();
  }
  
  // Fungsi untuk melakukan proses upload file
  public function upload(){
    $config['upload_path'] = './images/';
    $config['allowed_types'] = 'jpg|png|jpeg';
    $config['max_size']	= '2048';
    $config['remove_space'] = TRUE;
  
    $this->load->library('upload', $config); // Load konfigurasi uploadnya
    if($this->upload->do_upload('input_gambar')){ // Lakukan upload dan Cek jika proses upload berhasil
      // Jika berhasil :
      $return = array('result' => 'success', 'file' => $this->upload->data(), 'error' => '');
      return $return;
    }else{
      // Jika gagal :
      $return = array('result' => 'failed', 'file' => '', 'error' => $this->upload->display_errors());
      return $return;
    }
  }
  
  // Fungsi untuk menyimpan data ke database
  public function save($upload){
    $data = array(
      'deskripsi'=>$this->input->post('input_deskripsi'),
      'nama_file' => $upload['file']['file_name'],
      'ukuran_file' => $upload['file']['file_size'],
      'tipe_file' => $upload['file']['file_type']
    );
    
    $this->db->insert('gambar', $data);
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘gambar’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel gambar. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data siswa.

$config[‘upload_path’] = ‘./images/’;
Kode berfungsi untuk menentukan tempat gambar yang kita upload disimpan.

$config[‘allowed_types’] = ‘jpg|png|jpeg’;
Kode ini untuk menentukan file apa saja yang boleh kita upload. Kode ini diisi dengan mime type atau ekstensi dari file yang akan kita upload.

$config[‘max_size’]    = ‘2048’;
Kode ini untuk menentukan maksimal ukuran file yang boleh di upload. Satuannya adalah KB (Kilobytes). Disini kita mengisi dengan angka “2048”, berarti sama saja dengan 2 MB. Karena 1024 KB = 1 MB.

$config[‘remove_space’] = TRUE;
Kode ini berfungsi untuk mengganti “spasi ( )” pada nama file yang kita upload dengan “underscore (_)”. Misalkan saya akan mengupload gambar dengan nama “My Notes Code.png”, nanti setelah kita upload, nama file nya akan berubah menjadi “My_Notes_Code.png”. Jadi spasinya di ganti dengan underscore.

Untuk lebih lengkapnya tentang konfigurasi dan validasi yang bisa kita lakukan terhadap file yang akan di upload, kalian bisa lihat disini (tunggu 5 detik, lalu klik tombol SKIP AD yang ada di pojok kanan atas).

$this->upload->data()
Kode ini berfungsi untuk mengambil data hasil upload yang kita lakukan. Kode ini akan mengeluarkan beberapa data yang kita perlukan seperti nama file, ukuran file, width, height, dan lain-lain. Untuk lebih lengkapnya bisa kalian lihat disini (tunggu 5 detik, lalu klik tombol SKIP AD yang ada di pojok kanan atas).

$this->upload->display_errors()
Kode ini berfungsi untuk mengeluarkan pesan error jika terjadi error saat akan melakukan upload. Lebih lengkapnya bisa kalian lihat disini (tunggu 5 detik, lalu klik tombol SKIP AD yang ada di pojok kanan atas).

$data = array(
    ‘deskripsi‘=>$this->input->post(‘input_deskripsi’),
    ‘nama_file‘ => $upload[‘file’][‘file_name’],
    ‘ukuran_file‘ => $upload[‘file’][‘file_size’],
    ‘tipe_file‘ => $upload[‘file’][‘file_type’]
);
Kemudian kita masuk ke fungsi save(). Dalam fungsi tersebut terdapat kode seperti diatas. Kita buat sebuah array untuk menampung data apa saja yang akan kita simpan ke tabel di database. Lihat pada kode yang saya beri warna merah, kode tersebut harus sama dengan nama-nama field/kolom pada tabel gambar di databasenya. Lalu array $data tersebut akan kita simpan ke database dengan kode ini $this->db->insert(‘gambar’, $data). Struktur dari kode ini adalah $this->db->insert(nama_tabel, array_data);.

$upload[‘file‘][‘file_name’]
$upload[‘file‘][‘file_size’]
$upload[‘file‘][‘file_type’]
Untuk kode ini, ini diambil dari result atau hasil array yang dikeluarkan function upload(). Lihat pada baris ke 19. Disitu terdapa kode ini : $return = array(‘result’ => ‘success’, ‘file‘ => $this->upload->data(), ‘error’ => ”);. Nah yang saya beri warna merah pada kode diatas, itu harus sama dengan yang saya beri warna hijau. Untuk file_name, file_size, file_type itu adalah keluaran dari kode $this->upload->data() yang sudah saya jelaskan sebelumnya.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Gambar.php, lalu simpan pada folder xampp/htdocs/upload_ci/application/controllers/. Berikut ini kodenya :

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

class Gambar extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('GambarModel');
  }
  
  public function index(){
    $data['gambar'] = $this->GambarModel->view();
    $this->load->view('gambar/view', $data);
  }
  
  public function tambah(){
    $data = array();
    
    if($this->input->post('submit')){ // Jika user menekan tombol Submit (Simpan) pada form
      // lakukan upload file dengan memanggil function upload yang ada di GambarModel.php
      $upload = $this->GambarModel->upload();
      
      if($upload['result'] == "success"){ // Jika proses upload sukses
         // Panggil function save yang ada di GambarModel.php untuk menyimpan data ke database
        $this->GambarModel->save($upload);
        
        redirect('gambar'); // Redirect kembali ke halaman awal / halaman view data
      }else{ // Jika proses upload gagal
        $data['message'] = $upload['error']; // Ambil pesan error uploadnya untuk dikirim ke file form dan ditampilkan
      }
    }
    
    $this->load->view('gambar/form', $data);
  }
}

Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘GambarModel’);, kode tersebut berfungsi untuk memuat (meload) model gambar (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘gambar’] = $this->GambarModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model gambar (GambarModel.php) lalu memasukannya ke dalam array data dengan index gambar ($data[‘gambar’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘gambar/view’, $data);. Kode tersebut berfungsi untuk memuat (meload) file view.php (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.


 STEP 6 – BUAT VIEW
Selanjutnya kita akan membuat file view untuk menampilkan data gambarnya. Buat sebuah folder dengan nama gambar pada folder xampp/htdocs/upload_ci/application/views/. Lalu buat sebuah file dengan nama view.php, lalu simpan pada folder gambar yang tadi kita buat (xampp/htdocs/upload_ci/application/views/gambar/). Berikut ini tampilan dan kodenya :

View - Cara Membuat Upload Gambar dengan Codeigniter dan MySQL

<h1>Data Gambar</h1><hr>
<a href="<?php echo base_url("index.php/gambar/tambah"); ?>">Tambah Gambar</a><br><br>

<table border="1" cellpadding="8">
<tr>
  <th>Gambar</th>
  <th>Deskripsi</th>
  <th>Nama File</th>
  <th>Ukuran File</th>
  <th>Tipe File</th>
</tr>

<?php
if( ! empty($gambar)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
  foreach($gambar as $data){ // Lakukan looping pada variabel gambar dari controller
    echo "<tr>";
    echo "<td><img src='".base_url("images/".$data->nama_file)."' width='100' height='100'></td>";
    echo "<td>".$data->deskripsi."</td>";
    echo "<td>".$data->nama_file."</td>";
    echo "<td>".$data->ukuran_file." kB</td>";
    echo "<td>".$data->tipe_file."</td>";
    echo "</tr>";
  }
}else{ // Jika data tidak ada
  echo "<tr><td colspan='5'>Data tidak ada</td></tr>";
}
?>
</table>

Pada kode diatas terdapat kode foreach($gambar as $data){, kode tersebut akan manampilkan satu per satu data gambar sampai data gambar yang terakhir

echo “<td><img src='”.base_url(“images/”.$data->nama_file).”‘ width=’100′ height=’100’></td>”;
echo “<td>”.$data->deskripsi.”</td>”;
echo “<td>”.$data->nama_file.”</td>”;
echo “<td>”.$data->ukuran_file.” kB</td>”;
echo “<td>”.$data->tipe_file.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel gambar.


STEP 7 – BUAT FORM

Langkah terakhir adalah membuat form untuk uploadnya. Buat sebuah file dengan nama form.php, lalu simpan pada folder xampp/htdocs/crud_ci/application/views/gambar/. Berikut ini kodenya :

<h1>Tambah Gambar</h1><hr>

<!-- Menampilkan Error jika validasi tidak valid -->
<div style="color: red;"><?php echo (isset($message))? $message : ""; ?></div>

<?php echo form_open("gambar/tambah", array('enctype'=>'multipart/form-data')); ?>
  <table cellpadding="8">
    <tr>
      <td>Deskripsi</td>
      <td><input type="text" name="input_deskripsi" value="<?php echo set_value('input_deskripsi'); ?>"></td>
    </tr>
    <tr>
      <td>Gambar</td>
      <td><input type="file" name="input_gambar"></td>
    </tr>
  </table>
    
  <hr>
  <input type="submit" name="submit" value="Simpan">
  <a href="<?php echo base_url(); ?>"><input type="button" value="Batal"></a>
<?php echo form_close(); ?>

set_value(‘input_deskripsi’)
Kode ini berfungsi untuk menset ulang value dari textbox yang telah kita isi ketika validasi tidak valid dan halaman kembali ke form. Biasanya kan ketika halaman di refresh, maka textbox yang telah terisi akan otomatis terhapus / kosong lag. Nah dengan kode ini hal tersebut tidak akan terjadi, jadi ketika terjadi error validasi, maka user tidak perlu menginputkan kembali semua inputan yang ada di form. cukup inputkan yang memang tidak sesuai validasi saja. Untuk lebih jelasnya, kalian bisa baca disini (tunggu 5 detik, lalu klik tombol SKIP AD yang ada di pojok kanan atas).


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Membuat Upload Gambar dengan Codeigniter dan MySQL, Membuat Upload Gambar dengan CI dan MySQL, Tutorial lengkap membuat Upload Gambar dengan Codeigniter, Tutorial lengkap membuat Upload Gambar dengan CI, Upload Gambar dengan framework codeigniter, Upload Gambar dengan framework CI

UPLOAD GAMBAR

The post Cara Membuat Upload Gambar dengan Codeigniter dan MySQL appeared first on My Notes Code.

]]>
http://www.mynotescode.com/upload-gambar-dengan-codeigniter/feed/ 10