Chained dropdown dengan PHP laravel MySql dan AJAX Jquery

Pada kesempatan kali ini admin hendak membagikan pengalamannya bagaimana membuat dropdown yang saling terhubung satu sama lain atau istilahnya chained dropdown. Admin mengambil sample Country-State-City dropdown karena memang dropdown model ini banyak dipakai saat pembuatan aplikasi berbasis web.

Masih sama dengan artikel sebelumnya kita menggunaka Laravel sebagai back end side, MySql sebagai database Country-State-City yang akan di generate dan juga kali ini kita akan memakai fungsi AJAX Jquery getJSON. Tentu saja peranan getJSON disini menjadi sangat penting, karena dengan menggunakan fungsi ini respone yang dikirimkan oleh server terjadi secara real time tanpa men-refresh browser, tanpa jeda waktu membuat aplikasi yang kita buat terlihat dinamis dan lebih user friendly. Oke langsung kita mulai saja!

Pertama siapkan databasenya, untuk gampangnya bisa download projectnya DISINI. Databasenya saya taruh di folder database tinggal di import saja di phpmyadmin PC agan. Setelah database di import, kita siapkan modelnya. 

Berikut ini model yang harus disiapkan, csc_countries.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class csc_countries extends Model
{
    
protected $table='csc_countries';
    protected $fillable=[
        'name',
        'sortname',
        'phonecode'
    ];

}

csc_states.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class csc_states extends Model
{
    
protected $table='csc_states';
    protected $fillable=[
        'name',
        'country_id'
    ];


}

csc_cities.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class csc_cities extends Model

{

    

protected $table='csc_cities';

    protected $fillable=[

        'name',

        'state_id'

    ];

}

Berikutnya kita siapkan controllernya, csccontroller.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Response;
use App\csc_cities;
use App\csc_states;
use App\csc_countries;

class csccontroller extends Controller
{
    
  public function chained_dopdown(){
    $csc_countrie=csc_countries::all();

    return view('chained-dropdown')->with('csc_countrie',$csc_countrie);
  }

public function getStates($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_state = csc_states::where('country_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_state as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

    }

    public function getCities($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_citie = csc_cities::where('state_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_citie as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

    }


}

Lalu siapkan juga router yang akan menghubungkan request dari client ke server. Route.php:

Route::get('/chained_dopdown','csccontroller@chained_dopdown');

Route::get('/chained_dopdown/getStates/{param}','csccontroller@getStates');

Route::get('/chained_dopdown/getCities/{param}','csccontroller@getCities');

Selanjutnya kita siapkan file javascript untuk men-generate dropdown secara dinamis. csc.js:

$(document).ready(function(){

    var host = window.location.href;    

$("#country").change(function() {

            $.getJSON(host + "/getStates/" + $("#country option:selected").val(), function(data) {
            //console.log(data);            
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#state').empty();
                $('#state').append('<option>Select State/Province</option>');
                $('#city').empty();
                $('#city').append('<option>NA</option>');
                $.each(temp, function(key, obj) {
                    $('#state').append('<option value="' + obj.k +'">' + obj.v + '</option>');
                });
            });                
            
        });

        $("#state").change(function() {

            $.getJSON(host + "/getCities/" + $("#state option:selected").val(), function(data) {
                //console.log(data);
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#city').empty();
                $.each(temp, function(key, obj) {
                    $('#city').append('<option value="' + obj.k +'">' + obj.v + '</option>');           
                });            
            });
            
        }); 

});//end of document ready

Terakhir kita siapkan view-nya. chained-dropdown.blade.php:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Chained Dropdown</div>

                <div class="panel-body">                            
                    <label>Country</label>
                        <select name="state_province" id="country">
                            <option value="">Select Country</option>
                            @foreach($csc_countrie as $csc_countries)
                                <option value="{{$csc_countries->id}}">{{$csc_countries->name}}</option>
                            @endforeach
                        </select>
                    <br>

                    <label>State</label>
                        <select name="state_province" id="state">
                            <option value="">NA</option>
                        </select>
                    <br>

                    <label>City</label>
                        <select name="city" id="city">
                            <option value="">NA</option>
                        </select>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src='{{URL::asset("js/jquery-1.12.4.min.js")}}'></script>
<script type="text/javascript" src='{{URL::asset("js/csc.js")}}'></script>
@endsection

Dan persiapan kitapun selesai. Penjelasan singkatnya kurang lebih begini. Table country, state dan city saling terhubung satu sama lain atau memiliki relasi, dimana table country dan table state dihubungkan oleh kolom id(pada table country) dan kolom country_id(pada table state), begitu juga dengan table state dan city, id(pada table state) dan kolom state_id(pada table city). 

Jadi, saat user memilih nama country, maka id nya akan dikirm kan ke controller dan dicocokan ke database (melalui model) sehingga controller akan mencocokan id country mana yang dimaksud oleh user pada table state barulah setelahnya respone dikembalikan ke user.

public function getStates($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_state = csc_states::where('country_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_state as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

Nah magic-nya terjadi disini. Respone diterima oleh getJSON (pada file csc.js) dan di tampilkan pada view.

$("#country").change(function() {

            $.getJSON(host + "/getStates/" + $("#country option:selected").val(), function(data) {
             //console.log(data);            
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#state').empty();
                $('#state').append('<option>Select State/Province</option>');
                $('#city').empty();
                $('#city').append('<option>NA</option>');
                $.each(temp, function(key, obj) {
                    $('#state').append('<option value="' + obj.k +'">' + obj.v + '</option>');
                });
            });                
            
        });

Begitu juga mekanisme yang terjadi pada state dan city, id pada state yang dipilih dicocokan dengan table city dan barulah responenya dikembalikan ke user.

public function getCities($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_citie = csc_cities::where('state_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_citie as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

    }

$("#state").change(function() {

            $.getJSON(host + "/getCities/" + $("#state option:selected").val(), function(data) {
                //console.log(data);
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#city').empty();
                $.each(temp, function(key, obj) {
                    $('#city').append('<option value="' + obj.k +'">' + obj.v + '</option>');           
                });            
            });
            
        });

Nah selesai sudah permbahasan kita kali ini, semoga bermanfaat dan mohon maaf kalau ada penjelasan yang kurang dapat dimengerti, pun kalau ada koreksi perhal penjelasan saya boleh di cantumkan dalam kolom komentar. Terima Kasih

Custom error page pada Laravel

Error tentunya jadi hal yang lumrah dan biasa saja kita temukan disaat kita sedang mengerjakan suatu project, namun apa jadinya kalau error page yang pastinya hanya dimengerti oleh programmer/developer secara tidak sengaja ditampilkan pada user?

Tentunya hal ini sangat tidak baik dan tidak user friendly, selain terkesan tidak professional, internal dari project kita juga bisa dengan mudah diketahui oleh user. Maka dari itu kali ini admin bermaksud berbagi pengalaman bagaimana men-redirect user ke custom error page kita sendiri. Tentunya hal ini lebih user friendly karena user tidak perlu melihat kode-kode yang sukar dipahami tetapi user tahu kalau telah terjadi error pada system. Dalam laravel, error page itu sendiri di render di app\Exceptions\Handler.php.

Tinggal tambahkan satu baris pada file Handler.php, atau lihat gambar berikut:

Artinya, setiap ada request dari user yang menghasilkan error maka secara otomatis akan di redirect ke view error page kita sendiri. di sini kita men-redirectnya ke folder errors, file error_page.blade.php (views/errors/error_page.blade.php). Maka user akan di redirect ke halaman yang lebih user friendly.

Begitulah kurang lebih cara untuk membuat custom error page kita sendiri dilaravel,  mohon maaf kalau ada yang salah-salah, kurang-kurang dan informasinya kurang jelas. Terima Kasih

Bagaimana cara menambahkan limit import file size pada PhpMyadmin

Secara default import file pada phpmyadmin adalah 2mb, tentu terkadang kita mengalami kesulitan saat hendak meng-import file dengan ukuran lebih dari 2mb. Sebetulnya cara untuk menambah limitnya cukup mudah, kita hanya tinggal merubah beberapa parameter pada file php.ini dan jangan lupa setelahnya me-restart apache server. Setelah itu kita bisa dengan mudah meng-import file.sql dengan ukuran yang lebih besar. Umumnya file php.ini bisa ditemukan di C:\xampp\php\php.ini atau kalau mau mudahnya click Config -> PHP (php.ini), seperti gambar di bawah ini:

 Setelah file php.ini terbuka silahkan ubah beberapa parameter berikut ini:

post_max_size = 20M upload_max_filesize = 20M max_execution_time = 5000 max_input_time = 5000 memory_limit = 40M

Lalu jangan lupa untuk men-restart apache server. Kalau sudah seharusnya kita sudah bisa meng-import file.sql dengan ukuran yang lebih besar.

Note: jangan lupa untuk men-setting memory_limit lebih besar dari post_max_size. Mengunakan OS Windows XAMPP

Login page sederhana dan cara mengkoneksikan database dengan PHP Laravel + MySql

Hai! Kali ini saya mau membagikan sedikit pengetahuan saya seputar Laravel framework. Postingan kali ini kita akan coba membuat login page sederhana menggunakan laravel dan juga bagaimana mengkoneksikan laravel dengan database mysql. Pertama mari kita mengkoneksikan laravel dengan database mysql, disini kita akan pakai Laravel 5.2 sebetulnya ini adalah hal yang mudah karena laravel itu sendiri secara default sudah terkoneksi dengan database mysql yang kita perlu lakukan hanyalah merubah beberapa konfigurasinya saja. Yang akan kita ubah adalah file .env defaultnya file ini bisa ditemukan di root folder (kalau struktur foldernya tidak agan ubah). Lalu ubah sesuai ketentuan berikut:

• DB_DATABASE=NAMA_DATABASE

• DB_USERNAME=USERNAME

• DB_PASSWORD=PASSWORD

Username dan password disini adalah yang kita gunakan sebagai username dan password pada PhpMyadmin, atau biasanya usernamenya adalah "root" dan passwordnya kosong. Jadi kurang lebih begini penampakannya:

• DB_DATABASE=belajar_laravel

• DB_USERNAME=root

• DB_PASSWORD=

Atau boleh intip gambar dibawah ini:

Nah sampai sini, aplikasi kita sudah terhubung dengan database. Berikutnya kita akan membuat login page dengan laravel. Pertama kita siapkan dulu databasenya, bisa langsung copy paste code dibawah ini:

CREATE TABLE IF NOT EXISTS `users` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
`email` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
`password` varchar(60) COLLATE utf8_unicode_ci DEFAULT NULL,
`remember_token` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
PRIMARY KEY (`id`),
UNIQUE KEY `users_email_unique` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;

Lalu buka CMD dan arahkan ke project laravel kita, lalu ketikan perintah berikut di CMD:

php artisan make:auth

Maka secara otomatis akan ter-generate  beberapa file yang sudah siap pakai untuk login page aplikasi kita. Atau kalau masih bingung bisa lihat contoh dibawah ini:

Sekarang silahkan coba akses web aplikasi lewat browser agan, kalau tampilannya sudah seperti dibawah ini, berarti kita sudah sukses membuat login page sederhana dengan laravel:

Ini login pagenya:

Dan ini untuk registernya:

Sekian pembahasan kita mengenai cara mengkoneksikan laravel dengan database mysql PLUS membuat login page sederhana dengan laravel. Mohon maaf kalau ada yang salah-salah, kurang-kurang dan informasinya kurang jelas.

NOTE: kalau ada agan yang masih bingung-bingung atau malas ikutin langkah-langkah diatas, silahkan download codenya langsung disini, lengkap sudah berikut sama databasenya.

Cara install laravel 5 pada windows xampp

Hola! setelah sekian lama saya baru tertarik nih bikin artikel lagi. Kali ini mau bikin tutorial cara install laravel 5 pada sistem operasi windows. Sebelum mulai saya mau jelasin dikit nih apa sih laravel itu. Laravel adalah sebuah framework besutan taylor otwell untuk PHP, stop apa itu PHP? apa itu framework? PHP gampangnya adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. Nah kalau framework itu bisa diartikan berisi potongan-potongan code yang sudah tersusun dan terorganisir dengan baik sehingga dapat digunakan untuk membuat aplikasi tanpa harus memulai code dari awal, intinya beberapa fungsi dasar biasanya sudah ada (koneksi ke database, pagination dll). Oke kita kembali ke laravel, pertama kali ditemukan oleh taylor otwell pada juni 2011 sekarang laravel sudah sampai versi ke 5.3 sebagai release terbarunya. Beberapa kelebihan laravel adalah,

1. memliki syntax yang expresif dan elegant. Jadi cenderung mudah dipelajari dan tidak berbelit-belit.
2. Mendukung sampai PHP 5.3, php 5.3 memiliki banyak sekali fitur baru yang pastinya bisa kita gunakan seiringan dengan laravel itu sendiri.
3. Composer, adalah  ‘dependency manager’ untuk PHP, jadi kita tidak perlu install package satu persatu karena si composer ini lah yang akan bantu kita untuk install package yang kita butuhkan. Composer yang nyari, yang download, juga yang install, kita tinggal pake gan.

Oke sekarang kita mulai saja installasi laravelnya! dan sebelum install laravel pastikan composer sudah lebih dahulu ter-install, kalau belum ya download dulu gan disini! kita akan coba install laravel 5.3 dan juga berikut beberapa requirements yang harus dipenuhi supaya installasi berhasil:

• PHP >= 5.6.4
• OpenSSL PHP Extension
• PDO PHP Extension
• Mbstring PHP Extension
• Tokenizer PHP Extension
• XML PHP Extension

Selanjutnya buka command promt (CMD) agan dan ketik perintah berikut untuk mengarahkan intallasi agan ke root directory localhost,

 cd C:/xampp/htdocs

Lalu ketikan perintah berikut untuk menginstall laravel

composer create-project --prefer-dist laravel/laravel blog

Dimana kata "blog" adalah nama project agan nantinya, bisa di ubah sesuka hati.

Tunggu sampai proses installasi selesai...

Nah kalau sudah seperti diatas, kita coba akses project kita memalui web browser. Karena kita menginstall-nya di root folder maka ketik URL berikut 'localhost/blog/public'. Kalau sudah tampil seperti dibawah ini bisa di asumsikan kalau installasi sudah selesai.

Nah sekian artikel saya hari ini, saya mohon maaf kalau ada salah-salah dan ada yang kurang. Terima Kasih

Catatan: hiraukan localhost:8080 pada gambar diatas, itu saya pakai port 8080 karena port deffaultnya terpakai untuk aplikasi yang lain.

Sumber refrensi: 

• www.wikipedia.org 
• laravel.com