Categories
VueJS

Cara Install Vue CLI (Command Line Interface)

Hallo coder πŸ˜ƒ,vue membuat vue cli (command line interface) yaitu tools sederhana untuk scaffolding proyek aplikasi berbasi vue. terkadang kita rumit mengaturan javascript bundler dan semua tools terkait.

vue membuat tools untuk memudahkan kita untuk melakukan semua itu.

pada saat ini vue cli telah mencapai versi 3.x di vue cli 3 kita disediakan user interface berbasis web untuk membuat project. didalamnya terdapat banyak plugin yang bisa kita pakai.

Beberapa plugins yang disediakan antara lain: Typescript, PWA, Vuex, Vue Router, ESLint, unit testing dll.

Install Vue CLI

Sebelumnya anda buat dulu folder vue-project setelah itu masuk ke folder itu lewat terminal, sekarang coba anda ketikan seperti berikut di terminal anda.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Tunggu sampa instalasi selesai, ini akan memakan waktu lama, pastikan anda tersambung internet.

setelah instalasi selesai coba ketikan seperti berikut di terminal yang tadi. untuk mengcek versi.

vue --version

nanti akan muncul versi vue cli yang kamu install.

Membuat Project

Sekarang kita akan mencoba membuat project di vue cli, Untuk membuat projek baru dengan menggunakan vue-cli ini maka cukup jalankan perintah dengan format berikut. vue create

vue create myproject

atau

vue create <nama-project>

coba ketikan di terminal seperti berikut vue create myproject setelah kita enter maka akan keluar seperti berikut ini.

Cara Install Vue CLI (Command Line Interface)

Tunggu sampai selesai pastikan anda tersambung internet, jika sudah selesai dan berhasil maka akan keluar seperti ini di terminal.

Cara Install Vue CLI (Command Line Interface)

Berikut ini struktur folder dari project yang dibuat

Cara Install Vue CLI (Command Line Interface)

Sekarang kita akan jalankan projek kita ini. Pada terminal, masuk ke folder myproject kemudian jalankan perintah npm run serve.

$ cd myproject
$ npm run serve

Setlah berhasil di jalankan maka akan keluar tampilan berikut, setelah itu ketikan http://localhost:8081/ di browser anda

Cara Install Vue CLI (Command Line Interface)

jika sudah ketikan http://localhost:8081/ maka nampilan default nya akan seperti ini.

Cara Install Vue CLI (Command Line Interface)

Terdapat 3 folder utama yang terinstall yaitu:

  1. node_modules yaitu folder untuk menampung pustaka yan terinstalasi untuk projek ini, terdapat lebih dari 80 pustaka di dalamnya diantaranya: webpack, babel, browserify, eslint, dsb.
  2. src yaitu folder untuk menampung source code kita, seperti component, assets (image, icon), template, store, dsb.
  3. public yaitu folder untuk menampung file index.html atau mount point dari aplikasi kita nanti, ada juga file favicon di sini.

Baca juga pengenalan vue js

Categories
VueJS

Belajar Vue Js Bagian 10 : Components Basics

Hallo coder, ditutorial sebelumnya kita membahas Event Handling di vue js, sekarang kita akan membahas Components Basics di vue js.

Component merupakan sub class/objek dari Vue yang bisa kita buat untuk berbagai tujuan misalnya memecah kompleksitas kode. Setiap component memiliki lifecycle yang sama dengan objek Vuenya.

Untuk membuat sebuah component kita cukup, membuatnya seperti berikut.

Components Basics

Vue.component('nama-component', { /* options */ })

kita akan membuat sebuah component sederhana seperti ini.


Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: ''
        })
        new Vue({
            el: '#components-demo'
        })

    

didalam code di atas kita hanya cuku memanggil <button-counter></button-counter> sesuai nama component yang kita daftarkan.

hasilnya akan seperti ini :

Reusable Component

Component yang ada kita bisa kita gunakan berkali kali seperti ini.


    

Organizing Components

Banyak component yang terdapat dalam sebuah website contohnya navigation links, blog posts, footer, sidebar dan sbb.

Terkadang kita ingin merubah salah satu component tersebut hanya dalam satu atau beberapa halaman yang ada. jika kita tidak pisah pisah antar component, maka dalam satu file terdapat banyak sekali code.

maka oleh sebab itu kita harus memisah misah setiap component tersebut agar mudah di panggil kembali.

Sebuah aplikasi Vue bisa dibangun dari beberapa component yang memiliki strukturnya hirarki. seperti gambar di atas. ada dua cara Component Registration didalam vue js, yaitu : global dan local.

Component Registration

Global Component

Register component secara global akan membuat component tersebut bisa digunakan oleh semua objek utama (root) Vue.

Vue.component('my-component-name', {
  // ... options ...
})

component diatas akan di daftarkan secara global, dapat digunakan pada vue root(new vue).

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

dan kita bisa memakainya seperti ini


Local Registration

Register component secara local artinya component tersebut diregister hanya pada objek tersebut, dan tidak bisa dipakai di objeck lain.

contohnya sepeti berikut ini

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

dan kita harus definisikan component tersebut seperti ini

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Component Names

Component Names atau penamaan component di dalam vue js di bagi menjadi dua yaitu :

kebab-case

Format kebab-case menggunakan huruf lowercase dan tentunya di antara katanya di pisahkan – (strip). contohnya seperti berikut ini.

Vue.component('my-component-name', { /* ... */ })

Ketika kita mendefinisikan component dengan menggunakan format kebab-case, maka komponen tersebut dapat diakses menggunakan custom element . <my-component-name>

PascalCase

Jika di PascalCase kita harus menggunakan huruf kapital di awal katanya, contohnya seperti berikut ini :

Vue.component('MyComponentName', { /* ... */ })

Ketika kita mendefinisikan component dengan menggunakan format PascalCase, maka kita bisa memilih untuk mengakses komponen tersebut dengan cara <my-component-name> atau <MyComponentName> . Namun hanya elemen kebab-case yang dianggap valid oleh DOM.

Materi dari Components Basics sudah beres di tutorial selanjutnya kita akan membahas bagian lanjutan dari component, jadi tetap pantengin web warungcode.com , jangan lupa share yah, salam coder .

Categories
VueJS

Belajar Vue Js Bagian 9 : Event Handling di Vue JS

Hallo Coder πŸ˜ƒ , Pada tutorial sebelumnya kita mambahas Input bindings di vue js, kali ini kita akan membahas Event Handling di Vue Js, Event Handling adalah suatu penanganan action yang terjadi.

jadi sesuatu akan terjadi jika ada event contohnya, saat tombol di klik akan ada tulisan keluar.

Listening to Events

Kamu dapat menggunakan v-on merupakan directive yang berperan sebagai sebuah event listener.

Contohnya :


Button yang di klik {{ counter }}.


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Hasilnya :

Button yang di klik {{ counter }}.

Method Event Handlers

method event handlers berfungsi untuk menangani event yang lebih komplek. jadi di dalam v-on kita simpan method yang akan di jalankan.

Contohnya :


  
var example2 = new Vue({
            el: '#example-2',
            data: {
                name: ''
            },
            // define methods under the `methods` object
            methods: {
                greet: function (event) {
                    // `this` inside methods points to the Vue instance
                    alert('Hello ' + this.name + '!')
                    // `event` is the native DOM event
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })

Hasilnya :

Methods in Inline Handlers

Jika dalam Metode event handlers kita hanya mengisi nama method di dalam v-on:click="nama_method" sedangkan di methods in inline handlers kita bisa langsung ke mengisi isi method nya juga seperti ini v-on:click=”nama_method(‘isi method’)”

Contohnya :

 
 
var example3 = new Vue({
            el: '#example-3',
            methods: {
                say: function (message) {
                    alert('Hi, '+message)
                }
            }
        })

Hasilnya :

dengan menggunakan method di atas akan mempersingkat code yang kita ketikan. semuanya tinggal kamu sesuaikan dengan kebutuhan yang kamu inginkan.

Bagaimana tutorial Event Handling di Vue Js, jika ada kesulitan silahkan tinggalkan dikolom komentar, Pada tutorial selanjutnya kita akan membahas Menggunakan Components Basics, Semoga dapat membantu tutorialnya, salam coder

Categories
VueJS

Belajar Vue Js Bagian 8 : Form Input Binding

Hallo Coder πŸ˜ƒ , Pada tutorial sebelumnya kita sudah membahas Membuat List di Vue Js , dan pada kali ini kita akan membahas Form input binding di vue js.

Didalam form html terdapat beberapa type yaitu : Text, Textarea, Radio, Checkbox, Select dan lainya. fungsi dari type tersebut berbeda beda.

Didalam input biding nanti kita akan memakai v-model dengan two way data binding. yang artinya jika kita menginputkan sesuatu maka akan ada data yang ikut terinput atau terubah.

Form input binding di vue js

#Text


Hasilnya: {{ messageText }}

Dalam code diatas kita melihat v-model untuk sebagai identitas dari input tersebut. jika kita ketikan sesuatu maka pada hasilpun akan ikut muncul sesuai yang kita ketikan

Hasilnya :

Hasilnya: {{ messageText }}

#TextArea


    

Hasilnya :
{{ messageTextarea }}


Hasilnya :

Hasilnya :
{{ messageTextarea }}


Didalam textarea kita bisa gunakan enter.

#Checkbox


    

Hasilnya :

Didalam checkbox juga kita bisa membuatnya dengan banyak checkbox, contohnya seperti ini


    

Checked names: {{ checkedNames }}

Hasilnya :


Checked names: {{ checkedNames }}

#Radio




Picked: {{ picked }}

Hasilnya :



Picked: {{ picked }}

#Select


    
Hasilnya: {{ selected }}

Hasilnya :

Hasilnya: {{ selected }}

Kamu juga bisa coba Multiple Select seperti ini


    
Hasilnya: {{ selected }}

Hasilnya :

Hasilnya: {{ selected }}

Itulah materi dari tutorial Input Binding di vue js indah bukan πŸ’•, selebihnya tinggal kamu kreasikan dan pake sesuai kebutuhan kamu. semoga dapat membantu, sampai ketemu di tutorial selanjutnya, Salam Coder πŸ˜ƒ

Categories
VueJS

Belajar Vue Js Bagian 7 : Membuat List

Hallo Coder πŸ˜€, di permbahasan sebelumnya kita telah membahas Menggunakan v-bind di vue js, dan di pembahasan sekarang kita akan membahas Bagaimana caranya membuat List di Vue js.

Data dalam bentuk list atau daftar yang bisa berupa array , objek atau collection (array dari objek) bisa kita tampilkan dengan mudah menggunakan Vue Js

Membuat List di Vue Js

Sebagai contoh, kita mempunyai data array bahasa pemograman seperti berikut ini

languages: [
                    'PHP',
                    'Java',
                    'Python',
                    'SQL',
                    'Javascript'
                ]

Jika kita masukan dalam vue js kira kira seperti berikut ini

 var vm = new Vue({
            el: '#app',
            data: {
                languages: [
                    'PHP',
                    'Java',
                    'Python',
                    'SQL',
                    'Javascript'
                ]
            }
        })

Nah kita telah punya data yang akan ditampilkannya sekarang kita akan menampilkan datanya dalam bentuk list menggunakan tag <li>


  • {{ language }}

Dalam tag <li v-for="language in languages"> berfunsi untuk mengulang setiap data yang ada. Vue mempunyai directive v-for yang berfungsi untuk melakukan perulangan sebanyak elemen data yang ada pada variabel languages.

berbeda dengan php jika kita akan menampilkan biasanya kita menggunakan foreach, variable array nya biasanya di depan, seperti ini.

Foreach($languages as $language){
echo $language;
}

Sedangkan di vue js kita memangilnya dibelakang. mari kita lihat hasil dari List nya vue


Menampilkan Data Collection

Pada kasus nyata, seringkali kita dapati data tidak dalam bentuk array sederhana ataupun objek, melainkan dalam bentuk yang lebih kompleks semisal array dari objek atau dalam format JSON. apalagi sekarang lagi buming nya web servis, Terus bagaimana jika kita dapat data array dalam bentuk seperti ini.

courses: [
          {
           id: 'PHP-211',
           nama: 'PHP',
           harga: 600000
          },
]

kita ingin menapilkanya sesuai keynya. misalkan hanya data namanya saja atau data harganya saja. misalkan kita ingin menampilkan datanya kedalam bentuk table.

maka kita akan memakai template seperti ini


    
{{ courses.id }} {{ courses.nama }} Rp. {{ courses.harga }}

Mari kita bedah satu persatu code diatas.

karena kita akan menampilkannya dalam bentuk table maka kita harus meloopingnya di dalam tag <tbody> agar dapat tersusun rapih, codenya seperti berikut ini.




Oleh karena variabel c yang dihasilkan dari perulangan variabel courses berbentuk objek, maka kita bisa panggil setiap item didalamnya dengan menggunakan titik diikuti nama keynya.

c.nama //menampilkan nama
c.harga //menampilkan harga

contoh penerapanya seperti berikut ini.


                
                    {{ courses.id }}
                    {{ courses.nama }}
                    Rp. {{ courses.harga }}
                

Dan berikut Code kumplitnya.

Code Lengkapnya


{{ courses.id }} {{ courses.nama }} Rp. {{ courses.harga }}

kamu bisa menerapkannya sesuai keinginan kamu, bisa dalam bentuk list bisa dalam table ataupun card. jadi, salam coder.πŸ˜ƒπŸ˜ƒπŸ˜ƒ

Categories
VueJS

Belajar Vue JS Bagian 6 : Menggunakan v-bind

hallo coder πŸ˜ƒ, setelah dipertemuan sebelumnya kita membahas, Menggunakan v-once dan v-on pada vue js sekarang kita akan membahas Menggunakan v-bind di vue js.

v-bind adalah directive yang ada di vue js,Β v-bind mempunyai fungsi untuk mem-binding atribut HTML agar nilainya terupdate secara reactive.

Sesuai dengan data yang dinginkan. misalnya perubahan gambar, perubahan class pada suatu tag, perubahan style pada suatu tag.

Contohnya :

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
    <style>
        .active {
            color: brown
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 v-bind:class="{ active: isActive }">Test</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: false
            }
        })
        setTimeout(() => {
            vm.isActive = true
        }, 3000);
    </script>
</body>

</html>

Pada contoh diatas, kita mem-biding suatu class pada tag h1, sehingga nilai class pada h1 menggikuti isActive, Β lihat disini

setTimeout(() => {
            vm.isActive = true
        }, 3000);

ini berfungsi untuk merubah isActive menjadi true dalam waktu 3 detik. jadi warna dari h1 akan berubah menjadi merah.

ini dapat di pakai untuk anda yang sedang membuat aplikasi yang menginginkan perbuhan data yang realtime.

kita juga dapat mem-biding dengan dua variable sekaligus dengan menggunakan [ ] (kurung siku). contohnya seperti ini

<h1 v-bind:class="[class1, class2]"></h1>

selain class, kita juga dapat mem-biding style contohnya seperti berikut ini.

 <h1 v-bind:style="{ color: color }">Test</h1>

Selesai suda tutorial Menggunakan v-bind di vue js, anda dapat kerasikan penggunaan v-bind ini. selamat mencoba sampai ketemu di tutorial Membuat List di Vue Js . salam coder πŸ’»

Categories
VueJS

Belajar Vue JS Bagian 5 : Menggunakan v-once dan v-on

Hallo coder, pada tutorial sebelumnya kita telah membahas Menggunakan if dan else di vue js pada pembahasan kali ini kita akan membahas v-once dan v-on pada Vue js.Β v-once dan v-on merupakan directive.

Directive merupakan atribut khusus yang disematkan pada elemen atau markup HTML sebagai penanda bahwa elemen DOM tersebut akan dikenai perlakuan tertentu oleh Vue js.

Menggunakan v-once dan v-on

V-once digunakan agar nilai variabel pada template tidak bisa diubah-ubah lagi, kita lihat contohnya di bawah ini.

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <h1 v-once>{{ message2 }}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello world!',
                message2: 'Ini V-once'
            }
        })
    </script>
</body>

</html>

di contoh di atas kita punya dua data yaitu message dan message2, di message2 kita akan kasih directive v-once, setalah copy code di atas coba run. setelah itu coba buka console ganti data message dan message2 dengan mengketikan seperti berikut

vm.message ="test"
vm.message2 ="test"

dan ini lah hasil yang akan terjadi

bisa terlihat bahwa data message2 tidak berubah tetap sama, berarti directive v-once berjalan.

v-on

Merupakan directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue Js.
Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue Js.

Contoh penggunaannya

<div id="app">
        <button v-on:click="info('halo')">
            Informasi
        </button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                info(text) {
                    alert(text)
                }
            }
        })
    </script>

maka hasilnya akan seperti ini

Selain directive v-on:click ada beberapa directive lain yang bisa kita gunakan, diantaranya:

  • v-on:mouseover ketika mouse berada di area elemen.
  • v-on:mouseenter ketika mouse masuk ke area elemen.
  • v-on:mouseout ketika mouse keluar dari area elemen.
  • v-on:mousedown sama dengan v-on:click.
  • v-on:keyup ketika keyboard up pada elemen (biasanya digunakan pada elemen input).
  • v-on:keydown ketika keyboard down pada elemen (biasanya digunakan pada elemen input).
  • v-on:submit ketika form di submit.
Categories
Laravel

Mengenal Lebih Dekat Framework Laravel

Laravel adalah framework php yang sedang populer saat ini. banyak yang sudah dan sedang memakainya.

Laravel adalah proyek open source yang oleh Taylor Otwell, untuk menyediakan framework alternatif yang lebih canggih dibandingkan CodeIgniter.

saat itu Codeigniter tidak memiliki beberapa fitur penting, itulah yang membuat Taylor Otwell untuk mengembangkan aplikasi berbasis web dengan arsitektur MVC (Model-View-Controller).

Beberapa fitur Laravel antara lain, Artisan, Migrate Database, Namespace, desain yang modular, Testing dan masih banyak lagi.

Semua fitur itu memudahkan developer dalam pengembangan maupun maintenance.

Semua itu mengarah kepada sintaks yang pendek dan mudah dipahami (syntactic sugar). Fitur-fitur tersebut akan kita bahas lebih detil di tutorial selanjutnya.

Rilis pertama Laravel dilakukan pada 9 Juni 2011 dengan versi beta, dan diikuti dengan rilis Laravel 1 pada bulan yang sama. dan sekarang versi terbaru Laravel versi 5.8.

Fitur Unggulan

  • Eloquent ORM

ORM memiliki kepanjangan Object Relational Mapping, dengan ORM kita bisa melakukan operasi CRUD ke database tanpa harus menulis SQL Command.

ORM inilah yang bertugas untuk menulis SQL Command untuk kita. Laravel menggunakan ORM yang bernama Eloquent. contohnya jika memakai native

$id = 1;

$command = "Select * From user whereuser.id = $id";

Bandingkan dengan menggunakan Eloquent ORM

$id=1;
$user = User::find($id);

berbeda sekali bukan dengan menggunakan PHP native. kita tetap menggunakan SQL Command namun dengan menggunakan Eloquent ORM akan lebih singkat code yang di hasilkan.

Selain itu Eloquent ORM juga memiliki fitur unggulan lain seperti Mudah mengganti database.

Jika kita Menggunakan MYSQL ingin pindah ke ORACLE itu mudah kita hanya perlu menggunakan syntax yang sama. dan satu lagi yaitu mudah membuat sebuah relation antar table.

  • Template Engine (Blade)

Laravel memanfaatkan templating engine yaitu Blade. Blade berguna untuk menghindari penulisan yang berulang, memudahkan dalam Templating, Memudahkan dalam memanggil dan menyembunyikan commponent.

//Data yang akan ditampilkan
$user='warungcode';
//cara menampilkan
<?php
echo $user;
?>

//Jika menggunakan Blade akan lebih singkat

{{$user}}
  • Migration

Migration memudahkan kita mengelola struktur database dan tabel aplikasi kita.

Jika kita terbiasa membuat tabel atau field menggunakan GUI semisal PHPMyAdmin atau SQL Management Studio, maka dengan Migration kita bisa langsung melakukannya dari teks editor tanpa berpindah aplikasi.

  • Policy & Gate

Dalam aplikasi Laravel kita bisa lebih mudah untuk menetapkan hak akses ke aplikasi atau ke fitur-fitur tertentu dengan Policy & Gate.

  • Built-in JSON

Kamu bisa mengembangkan aplikasi dengan view Blade ataupun menggunakan frontend javascript seperti VueJS, ReactJS atau yang lain.

dari semua fitur diatas mahis banyak fitur unggulan laravel lainya. Mengapa kita menggunakan laravel ? Karena laravel bersifat Open Source atau gratis, memiliki ekosistem yang baik, memiliki kemamanan yang baik pula, dan mudah dalam pengembangan.

Kesimpulan

Laravel cocok buat kamu developer yang ingin merhatikan keindahan code, Keamanan, dan modern. dengan fitur fitur yang dimiliki laravel, akan memudakan kita dalam pembuatan sebuah web, selain itu juga laravel telah bisa di gunakan di PHP 7. jadi apakah kamu akan berpidah hati ke laravel ?

Baca juga Mengenal Vue JS

Categories
Codeigniter

Membuat Helper Select Option di Codeigniter

Pada tutorial kali ini kita akan Membuat Helper Select Option di CodeigniterΒ , kita sering menggunakan select option untuk pemilihan inputan dengan data yang banyak.

mengapa kita menggunakan helper ? karena untuk mempermudah dalam penampilan data dari database ke select option.

Yang belum mengetahui model bisa lihat di totorial Menggunakan Model di Codeigniter. sebelum ke contoh kita buat dulu model dan controllernya.

CREATE TABLE `siswa` (
  `nis` int(12) NOT NULL,
  `nama` varchar(30) NOT NULL,
  `jenis_kelamin` varchar(10) NOT NULL,
  `telp` varchar(12) NOT NULL,
  `alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
<?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
}
<?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('select', $data);
}

Sekarang kita buat contoh select option dengan cara yang biasa. coba ketikan coding dibawah ini.

<select name="nis" class="form-control">
<?php
foreach ($siswa as $key) {
echo "<option value='".$key->nis."'>$key->nama</option>";
}
 ?>
</select>

cara di atas adalah cara dimana kita mengambil data lewat controller dan model, tapi dengan adanya helper kita bisa langsung mengambil data dengan memanggil nama tablenya, seperti contoh di bawah ini.

sebelum itu buat terlebih dahulu helper dengan nama myselect_helper.php. dan ketikan code dibawah ini

<?php
//warungcode.com
//$name = nama select options
//$table = nama table yang akan di ambil datanya
//$field = nama field yang akan di tampilkan pada selected
//$selected = id yang akan di select biasanya di gunakan saat edit datanya
//$class = nama class $option_tamabahan
//$extra = untuk menambahkan id atau yang lainnya
//opion_tambahan = untuk menambah option tambahan seperti Pilih Nama siswa
function select_option($name, $table, $field, $pk, $selected = null,$class = null, $extra = null, $option_tamabahan = null) {
    $ci = & get_instance();
    $cmb = "<select name='$name' class='form-control $class  ' $extra>";
    $cmb .= $option_tamabahan;
    $data = $ci->db->get($table)->result();
    foreach ($data as $row) {
        $cmb .="<option value='" . $row->$pk . "'";
        $cmb .= $selected == $row->$pk ? 'selected' : '';
        $cmb .=">" . $row->$field . "</option>";
    }
    $cmb .= "</select>";
    return $cmb;
}
//warungcode.com

Setelah kita buat helper kita load terlebih dahulu di autoload.php di bagian helper.

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

lalu ketikan code dibawah ini.

<?php
echo select_option('siswa','siswa','nama','nis',null,'class_tambahan','id=siswa','<option>Pilih Data siswa</option>');
 ?>

lalu apa bedanya dengan tidak menggunakan helper, dengan menggunakan helper lebih mempersedikit codingan yang kita buat, karena kita tidak perlu menggunakan model.

kita hanya perlu controller dan view saja, serta helper, dan dengan helper juga akan mempermudah kita dalam pemanggilan selanjutnya.

ketikan code dibawah ini dan lihat perbedaannya.

<html>
<head>
  <title>Menggunakan Helper Select</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-md-8">
  <div class="form-group">
      <label for="exampleInputEmail1">Select Biasa</label>
<select name="nis" class="form-control">
<?php
foreach ($siswa as $key) {
echo "<option value='".$key->nis."'>$key->nama</option>";
}
 ?>
</select>
</div>

<div class="form-group">
<label for="exampleInputEmail1">Select Menggunakan Helper</label>
<?php
echo select_option('siswa','siswa','nama','nis',null,'class_tambahan','id=siswa','<option>Pilih Data siswa</option>');
 ?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Select Menggunakan Helper (menggunakan select id)</label>
<?php
echo select_option('siswa','siswa','nama','nis','16171101','class_tambahan','id=siswa','<option>Pilih Data siswa</option>');
 ?>
</div>
</div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>

sekian tutorial Memuat Helper Select Option di codeigniter, semoga dapat bermanfaat jangan lupa share dan Klik satu iklan untuk donasi website kami.

Categories
Codeigniter

Cara Membuat Import Excel di Codeigniter

Pada tutorial sebelumnya kita telah membahas 2 Cara Ekspor data di codeigniter yaitu , Cara membuat Eksport Excel di codeigniter dan Cara Membuat Eksport PDF di CodeigniterΒ di tutorial kali ini kita akan membuat Import Excel di Codeigniter, Import Excel sangat penting apalagi dalam Sebuah Sistem Perusahaan Atau sekolah, yang biasaya menyimpan data dalam excel. Import Excel juga dapat mempercepat dalam penambahan data. Bisa di bayangkan kalau kita mempunyai 1000 data yang akan di input secara manual, pasti akan lama, tapi apabila kita menggunakan Import excel ini mungkin hanya itungan menit.

Kita Masih menggunakan Library yang sama yaitu PHPExcel. Langsung saja Pada Codingannya membuat Import Excel di Codeigniter.

  1. Buat database dengan nama latihan dan import sql di bawah ini.
CREATE TABLE `siswa` (
  `nis` int(12) NOT NULL,
  `nama` varchar(30) NOT NULL,
  `jenis_kelamin` varchar(10) NOT NULL,
  `telp` varchar(12) NOT NULL,
  `alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `siswa` (`nis`, `nama`, `jenis_kelamin`, `telp`, `alamat`) VALUES
(16171101, 'Asep', 'L', '0899999999', 'Jakarta'),
(16171102, 'Udin', 'L', '0888888888', 'Bandung'),
(16171103, 'Lisa', 'P', '07777777', 'Bali'),
(16171104, 'Raisha', 'P', '02322323', 'Kalimantan'),
(16171105, 'Sudirman', 'L', '08888', 'Surabaya');


ALTER TABLE `siswa`
  ADD PRIMARY KEY (`nis`);
COMMIT;

2. Buat Controller dengan nama Siswa.php

<?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)
}
}

3. Buat Model dengan nama SiswaModel.php

<?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);
}
}

4. Buat file baru beri nama Form.php

<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("index.php/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>

5. Buat File baru dengan nama View.php

<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>

buat file excel seperti di atas dan coba import

Semoga tutorialnya berguna, jangan lupa comment dan share artikel membuat Import Excel di Codeigniter. Klik satu iklan untuk donasi website warungcode.com sampai bertemu di tutorial selanjutnya. Anda bisa download juga di sini