Module hitung ongkir JNE, TIKI, POS dengan Prestashop & RAJA ONGKIR GRATIS

Halo,  sebelumnya saya sudah buat module dengan fungsi serupa. Namun karena ada teman-teman yang menanyakan bisa atau tidaknya module ini menggunakan API dari raja ongkir maka saya buatkan juga module ini.

Pertama-tama jangan lupa ambil API key nya dulu dari, https://rajaongkir.com daftar lalu masuk menu panel untuk ambil API key.

1.     Berikut ini contoh halaman panel untuk ambil API:

Modulenya masih saya taruh di GIT supaya mudah di download, https://github.com/ImmanuelJL/prestashop-ongkir-mycarrier_rj. Setelah dapat api key dan download module nya, ikuti langkah-langkah berikut untuk proses installasi (yang sebenarnya part ini sama saja dengan artikel sebelumnya) :

1.     Upload module

Dan berikut penampakan bila proses upload berhasil

2.     Install module, tinggal next next saja gan…

3.     Masukan api key dan nama kota dari mana barang atau ongkir akan di hitung, misalnya toko agan di Jakarta Pusat

4.     Selesai, dan berikut penampilannya

Dari module ini kita memiliki 3 kurir sekaligus JNE, TIKI dan POS. Namun karena alasan performance hanya beberapa service saja yang saya tampilkan (untuk service lengkapnya boleh cek dari web resmi raja ongkir). Dan juga perlu menjadi catatan, nama kota tujuan maupun pengiriman harus menggunakan nama kota secara lengkap dan benar (untuk memastikan perhitungan ongkir yang akurat).

Saya akui module ini masih memliki fitur yang sederhana, saya akan kembangkan lagi apabila saya ada waktu luang dan mendapat respon yang cukup positif. Dukung pengembangan module ini dengan like and share! Sekian terima kasih.

NOTE: 

1. Menggunakan Prestashop 1.6
2. Untuk versi Prestashop 1.7 bisa cek disini

Module hitung ongkir JNE dengan Prestashop GRATIS

Halo,  sebelumnya saya ucapkan terima kasih kepada prestashop untuk free software e-commerce nya yang sangat luar biasa dan juga kepada ongkir.info untuk API hitung ongkirnya. Saya membuat module ini diwaktu luang dan juga sebagai proses pembelajaran, jadi mohon maklum apabila module ini penuh keterbatasan.

Oke kali ini saya akan membagikan module untuk menghitung ongkos kirim via JNE dengan prestashop secara cuma-cuma alias GRATIS. Module ini menggunakan API dari ongkir.info jadi pastikan anda dapatkan dulu api key dari web resminya di http://api.ongkir.info/akun/registrasi/  atau kalau sudah punya login dulu di http://api.ongkir.info/akun/login. Dan untuk detailnya bisa liat SS dibawah ini:

1.     Register page kalau anda belum punya aksesnya

2.     Setelah proses regristrasi selesai, tinggal login ke akun anda

 

3.     Ambil API KEY yang akan kita masukan pada module nantinya

Dan juga berikut link untuk download module nya disini https://github.com/ImmanuelJL/prestashop-jne-mycarrier. Setelah dapat api key dan download module nya, ikuti langkah-langkah berikut untuk proses installasi :

1.     Upload module

Dan berikut penampakan bila proses upload berhasil

2.     Install module, tinggal next next saja gan…

3.     Masukan api key dan nama kota dari mana barang atau ongkir akan di hitung, misalnya toko agan di jakarta

4.     Selesai, dan berikut penampilannya

Ya memang semudah itu untuk menggunakan module ini, tinggal install dan pakai. Module ini akan menginstall 3 jne carrier sekaligus yaitu JNE OKE, JNE REG dan JNE YES. Dimana tujuan pengiriman diambil otomatis dari alamat yang customer pilih pada saat check out,  apabila track alamat tujuan dan pengiriman tidak di temukan, maka secara otomatis module tidak akan di tampilkan. Terkadang juga hanya tampil satu atau dua carrier hal ini karena memang hanya tersedia satu atau dua layanan pada jalur pengiriman tersebut. Dan mohon maaf hal ini tidak bisa diubah, karena layanan yang tersedia diambil berdasarkan API dari ongkir.info.  Jika menemukan kesulitan atau pun error pada penggunaan module ini bisa di informasi kan di kolom komentar.

Saya harap module ini bias bermanfaat buat agan-agan yang memang membutuhkan. Dukung pengembangan module ini dengan like and share! Sekian terima kasih.

NOTE: 

1. Menggunakan Prestashop 1.6

Live searching box dan highlight dengan Jquery

Baru-baru ini admin diminta klien untuk dibuatkan suatu searching box tetapi yang cara kerjanya live (real time), jadi user tidak mau repot dan lama menunggu loading selagi data dari database di query untuk di tampilkan hasil pencariannya. Sebetulnya code ini belum dicoba lebih jauh, dan refrensinya pun dari google, belum di tes juga kalau jumlah data yang di cari besar (big data), tapi sudah di rasa cukup untuk memenuhi permintaan klien admin yang tadi. Baiklah berikut ini full codenya, bisa langsung di copy paste saja:

<input type="text" id="search" placeholder="Search...">
<table id="table" border="1">
     <thead>
            <tr>
                <th>Nama</th> 
                <th>Alamat</th> 
            </tr>
     </thead>
     <tbody>   
      <tr>
      <td>Anisa</td>
      <td>Jakarta</td>    
      </tr>
      <tr>
      <td>Anton</td>
      <td>Jakarta</td>
      </tr>
      <tr>
      <td>Budi</td>
      <td>Bandung</td>
      </tr>
      <tr>
      <td>Basuki</td>
      <td>Jakarta</td>
      </tr>
      <tr>
      <td>Cika</td>
      <td>Solo</td>
      </tr>
      <tr>
      <td>Cyntia</td>
      <td>Palembang</td>
      </tr>
      <tr>
      <td>Desy</td>
      <td>Solo</td>
      </tr>
      <tr>
      <td>Donald</td>
      <td>Jakarta</td>
      </tr>
     </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var $rows = $('#table >tbody >tr:visible');
$('#search').keyup(function() {
    // fungsi untuk search
    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;
    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();

    var value = $(this).val().toLowerCase();    
    // fungsi untuk highlight
    $("#table >tbody >tr >td").each(function(index, elem) {
        var $elem = $(elem);
        if (value.length > 0 && $elem.text().toLowerCase().indexOf(value) != -1) {
            $elem.css('backgroundColor', 'yellow');             
        }
        else {
            $elem.css('backgroundColor', '');             
        }
    });
});
</script>

Jadi saat user mengetikan kata pencarian pada search box, maka jquery akan mem-filter table dan menampilkan data yang cocok saja. Hal ini tentu akan membuat tampilan lebih menarik dan user friendly. Terima kasih.

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