Sabtu, 20 September 2014

[C# .NET] [VB .NET] Membuat Desktop Mini untuk Mengontrol Desktop dengan Skala Tertentu (Desktop Scale)


Setelah sekian lama absen menulis pada blog ini, akhirnya saya menyempatkan diri untuk kembali menulis. Artikel ini berbeda dari sebelumnya yang mana sebelumnya membahas mengenai PHP dan PHP Framework, sekarang sedikit menambahkan kategori baru yaitu VB .NET dan C# .NET.

Tujuan penulisan artikel ini berawal dari permintaan teman saya yang menginginkan mengontrol lokasi munculnya form dengan hanya menggeser pada desktop mini yang terdapat pada form. Jujur saja untuk urusan judul saya sendiri bingung dan hasilnya seperti di atas. Terlalu panjang dan ribet menurut saya.

Baiklah langsung saja, untuk pembuatan aplikasi silahkan anda buat project baru terserah mau C# ataupun VB .NET dan buat form seperti dibawah


Keterangan :
- PictureBox (yang berwarna orange)
- Panel (yang berwarna Gelap)

Ribet juga jelasin step-stepnya, langsung aja deh berikut kode lengkapnya untuk C# .NET

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace desktopscale_csharp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private Point pointScale;
        private Form form = new Form();
        private Label label = new Label();

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                pointScale = e.Location;
            }
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                PictureBox1.Left = e.X + PictureBox1.Left - pointScale.X;
                PictureBox1.Top = e.Y + PictureBox1.Top - pointScale.Y;
            }
        }

        private void Button1_Click(object sender, EventArgs e)
        {
            label.Text = "Dida Nurwanda";
            label.Font = new Font("Arial", 20, FontStyle.Bold);
            label.ForeColor = Color.DeepPink;
            label.AutoSize = true;

            form.Controls.Add(label);
            form.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
            form.BackColor = Color.CornflowerBlue;
            form.Size = new Size(300, 100);
            form.Left = (PictureBox1.Left * 4);
            form.StartPosition = FormStartPosition.Manual;
            form.Top = (PictureBox1.Top * 4);
            form.TopMost = true;
            form.Show();
        }
    }
}

Jika untuk VB .NET berikut kodenya

Public Class Form1

    Private pointScale As Point
    Private form As New Form()
    Private label As New Label()

    Private Sub PictureBox1_MouseDown(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseDown
        If e.Button = MouseButtons.Left Then
            pointScale = e.Location
        End If
    End Sub

    Private Sub PictureBox1_MouseMove(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseMove
        If e.Button = MouseButtons.Left Then
            PictureBox1.Left = e.X + PictureBox1.Left - pointScale.X
            PictureBox1.Top = e.Y + PictureBox1.Top - pointScale.Y
        End If
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        label.Text = "Dida Nurwanda"
        label.Font = New Font("Arial", 20, FontStyle.Bold)
        label.ForeColor = Color.DeepPink
        label.AutoSize = True

        form.Controls.Add(label)
        form.FormBorderStyle = Windows.Forms.FormBorderStyle.None
        form.BackColor = Color.CornflowerBlue
        form.Size = New Size(300, 100)
        form.Left = (PictureBox1.Left * 4)
        form.StartPosition = FormStartPosition.Manual
        form.Top = (PictureBox1.Top * 4)
        form.TopMost = True
        form.Show()
    End Sub
End Class

Download

VB .NET
 Download
Password : http://blog.didanurwanda.com

C# .NET
 Download
Password : http://blog.didanurwanda.com

Selasa, 04 Februari 2014

[CodeIgniter] Penggunaan Ajax Login pada CodeIgniter dan EasyUI


Kali ini saya akan sedikit memberikan contoh penggunaan atau pemakaian ajax untuk proses login pada EasyUI dan CodeIgniter. Tentunya karena ini menggunakan teknologi Ajax, sehingga untuk proses login dan logout tidak perlu pindah halaman dan tidak berat pula. Sebab semua komunikasi data yang dikirim dan diterima dalam bentuk JSON.

Sebelum memulai ke pembuatan kode, silahkan Anda buat database dan table user terlebih dahulu. Karena ini hanya contoh, saya disini menggunakan database test dan membuat table dengan struktur berikut:

CREATE TABLE IF NOT EXISTS `tbl_user` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

INSERT INTO `tbl_user` (`id`, `nama`, `username`, `password`) VALUES
(1, 'Dida Nurwanda', 'admin', '21232f297a57a5a743894a0e4a801fc3'); 

Jika pembuatan database sudah, selanjutnya siapkan project codeigniter baru dan siapkan juga jquery dan jquery easyui Anda. Oya, jangan lupa atur konfigurasi databasenya. Kemudian buka folder libraries dan buat library baru dengan nama Auth.php

<?php

class Auth {
    
    public $core;
    
    public function __construct() {
        $this->core =& get_instance();
        $this->core->load->library('session');
    }

    public function authenticate(CI_DB_result $query) {
        $data = $query->row();
        $this->core->session->set_userdata(array(
            'id' => $data->id,
            'logged_in' => TRUE
        ));
    }
    
    public function is_guest() {
        if($this->core->session->userdata('logged_in') == TRUE) {
            return FALSE;
        }
        return TRUE;
    }
    
    public function get_id() {
        return $this->core->session->userdata('id');
    }
    
    public function logout() {
        $this->core->session->sess_destroy();
    }

}

Setelah itu buka controller dan edit file Welcome.php

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

class Welcome extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url');
        $this->load->library('Auth');
        $this->load->database();
    }

    public function index()
    {
        $this->load->view('index');
    }
    
    public function main()
    {
        $this->load->view('main');
    }

    public function login()
    {
        $this->load->view('login');
    }
    public function logout()
    {
        $this->auth->logout();
    }
    
    public function proses_login()
    {
        $this->output->set_content_type('application/json');
        if (isset($_POST))
        {
            $this->db->where('username', $this->input->post('username'));
            $this->db->where('password', md5($this->input->post('password')));
            $db = $this->db->get('tbl_user');

            if($db->num_rows() > 0) {
                $this->auth->authenticate($db);
                echo json_encode(array(
                    'success'=>true, 
                    'auth_id'=>$this->auth->get_id()
                ));
            } else {
                echo json_encode(array('success'=>false));
            }
        }
    }
}

Jika sudah, kita mulai pembuatan view. Buat file pada folder view dengan nama index.php

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>EasyUI Ajax Login</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/themes/default/easyui.css'); ?>" />
    <link rel="stylesheet" href="<?php echo base_url('assets/themes/icon.css'); ?>" />
    <script type="text/javascript" src="<?php echo base_url('assets/jquery.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery.easyui.min.js'); ?>"></script>
    <style type="text/css">
        .fill 
        {
            background-color: #DFE8F6;
        }
        body
        {
            margin: 0;
            padding: 0;
            color: #555;
            font: normal 10pt Arial,Helvetica,sans-serif;
            background: #DFE8F6;
        }
        .header-view
        {
            padding-left: 10px;
            color: #555;
        }
    </style>
</head>
<body class="easyui-layout">

<!-- north -->
<div region="north" class="fill header-view" style="height: 110px" border="false" split="true">
    <h1>CodeIgniter EasyUI</h1>
    <h2>Implementasi Ajax Login pada CodeIgniter dan Easyui</h2>
</div>

<!-- west -->
<div region="west" class="fill" border="true" title="Navigation" style="width: 250px" split="true">
    <div class="easyui-accordion" fit="true" border="false" iconCls="icon-redo">
        <div title="Menu 1" iconCls="icon-reload">
            <ul class="easyui-tree">
                <li><a href="javascript:void(0)" id="log">Logout</a></li>
                <li>Child Menu 1</li>
                <li>Child Menu 2</li>
            </ul>
        </div>
        <div title="Menu 2" iconCls="icon-search">
            <ul class="easyui-tree">
                <li>Child Menu 1</li>
                <li>Child Menu 2</li>
                <li>Child Menu 3</li>
            </ul>
        </div>
        <div title="Menu 3" iconCls="icon-help">
            <ul class="easyui-tree">
                <li>Child Menu 1</li>
                <li>Child Menu 2</li>
                <li>Child Menu 3</li>
            </ul>
        </div>
    </div>
</div>

<!-- center -->
<div region="center" split="true" title="Main Content" id="content">

</div>

<!-- south -->
<div region="south" class="fill" style="height: 35px; padding: 5px;" split="true">
Copyright &copy; 2014 - Dida Nurwanda
</div>

<script type="text/javascript">
var AUTH_ID = '<?php echo $this->auth->get_id(); ?>';
jQuery(function($) {
    if(AUTH_ID == '') {
        show_login_view();
    } else {
        show_main_view();
    }
    
    $('#log').click(function() {
        if (AUTH_ID != '') {
            $.get('<?php echo site_url('welcome/logout'); ?>', [], function(e) {
                show_login_view();
                AUTH_ID = '';
            });
        }
    });
});

function show_login_view() {
    $('#log').html('Login');
    $('#content').panel('refresh', '<?php echo site_url('welcome/login'); ?>');
}
    
function show_main_view() {
    $('#log').html('Logout');
    $('#content').panel('refresh', '<?php echo site_url('welcome/main'); ?>');
}
</script>

</body>
</html>

Atur path untuk jquery dan jquery easyui anda. Kemudian buat file login.php

<div style="padding: 13% 30%">
    <div class="easyui-panel fill" style="width: 450px; height: 200px;" title="Login" iconCls="icon-redo">
        <form id="form-login" method="post" style="padding: 20px;" novalidate onsubmit="return false">
            <div class="form-item">
                <label for="username">Username</label> 
                <br />
                <input type="text" name="username" class="easyui-validatebox" required="true" style="width: 100%" />
            </div>
            <div class="form-item">
                <label for="password">Password</label> 
                <br />
                <input type="password" name="password" class="easyui-validatebox" required="true" style="width: 100%" />
            </div>
            <div class="form-item">
                <br />
                <a id="submit-login" class="easyui-linkbutton" iconCls="icon-ok">Login</a>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $('#submit-login').click(function() {
        $.post('<?php echo site_url('welcome/proses_login'); ?>', $('#form-login').serialize(), function(e) {
            if (e.success == true) {
                AUTH_ID = e.auth_id;
                show_main_view();
            }
        });
    });
</script>
Buat juga file dengan nama main.php

<div id="main-content" class="easyui-tabs" data-options="fit:false,border:false" style="padding:1px" >
    <div title="Selamat Datang" data-options="iconCls: 'icon-filter'">
        <h1>Selamat Datang</h1>
    </div>
</div> 

Selesai deh, silahkan di analisa dan di kembangkan. Untuk username dan password yaitu "admin"

Berikut penampakannya :


Download
Download
Password : didanurwanda.blogspot.com

Jumat, 31 Januari 2014

[CodeIgniter] Mudahnya Membuat Laporan dalam Bentuk Excel pada CodeIgniter


Tutorial mengenai pembuatan laporan dalam bentuk Excel sebenarnya telah banyak tersebar di google, akan tetapi disini saya akan memberikan tips agar pembuatanya jauh lebih mudah. Sekalian promosi Library CodeIgniter untuk membuat laporan excel, library ini saya namakan Excel Generator. Excel Generator ini merupakan class yang diturunkan dari PHPExcel. Lalu bagaimana cara menggunakannya ?

Bahan tambahan
Langkah kerja

Jika Anda telah mendownload semuanya, silahkan buat projet CodeIgniter anda dan pilih database sesuai kehendak Anda, disini saya menggunakan database 'test' dengan table 'users' dan isinya seperti berikut.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  `jenis_kelamin` varchar(10) NOT NULL,
  `alamat` varchar(200) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;


INSERT INTO `users` (`id`, `nama`, `jenis_kelamin`, `alamat`, `email`) VALUES
(1, 'Dida Nurwanda', 'Laki-laki', 'Pandeglang', 'didanurwanda@gmail.com'),
(2, 'Siwi Septi Hastuti', 'Perempuan', 'Pandeglang', '-'),
(3, 'Ahmad', 'Laki-laki', 'Serang', 'ahmad_hehe@gmail.com'),
(4, 'Saepul', 'Laki-laki', 'Lebak', 'sae_sae_pull@gmail.com');

Setelah itu buka file phpexcel yang telah Anda download tadi kemudian extract folder classes ke folder library pada project CodeIgniter Anda dan ubah namanya dengan nama "PHPExcel". Jangan lupa extract juga Excel_generator.php tentunya masih pada folder library. Jika semua sudah selesai, kemudian atur konfigurasi database anda. Kemudaian karena hanya contoh, silahkan buka controller welcome.php dan edit seperti berikut

<?php

class Welcome extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->database();
        $this->load->library('Excel_generator');
    }


    public function index() {
        $query = $this->db->get('users');
        $this->excel_generator->set_query($query);
        $this->excel_generator->set_header(array('Nama', 'Jenis Kelamin', 'Alamat', 'Email'));
        $this->excel_generator->set_column(array('nama', 'jenis_kelamin', 'alamat', 'email'));
        $this->excel_generator->set_width(array(25, 15, 30, 15));
        $this->excel_generator->exportTo2007('Laporan Users');
    }

}

Kemudian buka browser Anda dan buka link project Anda, nanti akan ada dialog download, silahkan open file excelnya. Untuk hasilnya seperti berikut.


Keren bukan, hehe.
Sebenarnya script utama pada untuk membuat file excel adalah hanya
$query = $this->db->get('users');
$this->excel_generator->set_query($query);
$this->excel_generator->set_column(array('nama', 'jenis_kelamin', 'alamat', 'email'));
$this->excel_generator->exportTo2007('Laporan Users');
Lalu apa bedanya jika scriptnya hanya seperti diatas ? ok saya jelaskan satu persatu.

$this->excel_generator->set_query($query);
Digunakan untuk memanggil query dari database.

$this->excel_generator->set_column(array('nama', 'jenis_kelamin', 'alamat', 'email'));
Digunakan untuk manampilkan field-field mana saja  yang akan ditampilkan pada excel. Field-field ini diampil dari table suatu database.

$this->excel_generator->exportTo2007('Laporan Users');
Digunakan untuk mengexport laporan kedalam bentuk file .xlsx (Excel 2007) dengan nama Laporan Users

$this->excel_generator->exportTo2003('Laporan Users');
Digunakan untuk mengexport laporan kedalam bentuk file .xls (Excel 2003) dengan nama Laporan Users

$this->excel_generator->set_width(array(25, 15, 30, 15));
Digunakan untuk menambahkan lebar kolom pada excel, jumlahnya harus sesuai dengan jumlah column yang anda masukan.

$this->excel_generator->set_header(array('Nama', 'Jenis Kelamin', 'Alamat', 'Email'));
Digunakan untuk menambahkan  Judul pada setiap kolom pada Excel.

$this->excel_generator->start_at(8);
Digunakan untuk memulai pembuatan laporan dari baris ke 8. Ini dapat dimanfaatkan untuk menambahkan Judul atau Header dokumen pada laporan Anda.

Download
Download
Password : didanurwanda.blogspot.com

Minggu, 26 Januari 2014

[PHP] Membaca dan Menampilkan File Excel di PHP dengan PHPExcel Reader


Sudah tau PHPExcel kan?  PHPExcel merupakan kumpulan class php yang berfungsi untuk membuat dan membaca file Excel. Nah pada artikel ini saya akan sedikit memberikan contoh membaca file excel dengan php. Tetapi sebelumnya Anda harus download PHPExcel terlebih dahulu.

Buat project php baru, terus buka PHPExcel.zip dan extract folder Classes pada folder project Anda dan ubah nama Classes tersebut menjadi phpexcel. Setelah itu buat atau pilih file excel dan simpan pada folder project Anda dengan nama file.xlsx selanjutnya buat file baca.php dan isi seperti berikut.

<center>
    <h1>Dida Nurwanda</h1>
    <a href="http://didanurwanda.blogspot.com">http://didanurwanda.blogspot.com</a>
</center>
<br />
<br />

<?php

require_once dirname(__FILE__) .'/phpexcel/PHPExcel/IOFactory.php';

$objPHPExcel = PHPExcel_IOFactory::load('./file.xlsx');
$sheet = $objPHPExcel->getActiveSheet()->toArray(null, true, true, true);

$no = 1;
echo '<table border="1" width="800" align="center">';
foreach($sheet as $row):
    if($no == 1) 
    {
        echo '<tr>';
            echo '<td></td>';
            foreach($row as $key => $val)
                echo '<td><b>'. $key .'</b></td>';
        echo '</tr>';   
    }
    echo '<tr>';
    echo '<td><b>'. $no .'</b></td>';
    foreach($row as $key => $val)
        echo '<td>'. $row[$key] .'</td>';
    echo '</tr>';
    $no++;
endforeach;
echo '</table>';

Selesai deh, silahkan buka browser Anda dengan url http://localhost/{nama-project-anda}/baca.php

Berikut penampakannya : 


 Download :
Download
Password : didanurwanda.blogspot.com

Jumat, 17 Januari 2014

[Laravel] Membuat Dropdown Dependency dengan Ajax Pada Contoh Pemilihan Nama Daerah


Belum seminggu saya kenal dengan framework ini, entah kenapa saya mulai luluh dan suka. Entah karena rasa penasaran atau mungkin kebosenan pada framework lain. Ah ya sudahlah. Pada kesempatan ini, saya akan sedikit memberikan contoh penggunaan Dropdown Dependency dengan Ajax jQuery pada laravel. Nah loh, apa itu Dropdown Dependency ? "Mungkin" Dropdown Dependency merupakan cara atau kelakuan dropdown atau combobox dimana jika kita memilih suatu pilihan pada combobox pertama, maka otomatis combobox berikutnya akan mengikuti hasil dari pilihan pertama tai, sebaga contoh, Jika pada dropdown pertama itu pilihan indonesia, dan malaysia. maka jika kita pilih indonesia otomatis pada combobox kedua akan mengikuti hasil pilihan tersebut, yaitu nama propinsi-propinsi yang ada di indonesia, dan jika kita pilih propinsi maka otomatis pada combobox berikutnya lagi akan berisi nama kota atau kabupaten yang berada pada propinsi yang kita pilih, dan begitu seterusnya.

Ok persiapkan project laravel anda, dan atur database dengan table terserah anda. Saya disini menggunakan database 'test'. setelah itu buka command line yang telah di set pada folder project laravel anda. kemudian buat Migrate seperti berikut
php artisan migrate:make create_table_propinsi
Kemudian buka folder app/database/migrations dan buka file yang belakangnya ada nama create_table_propinsi dan edit seperti berikut

<?php

use Illuminate\Database\Migrations\Migration;

class CreateTablePropinsi extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('propinsi', function(Illuminate\Database\Schema\Blueprint $table) {
            $table->increments('id');
            $table->string('propinsi', 50);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('propinsi');
    }

}

Selanjutnya ulangi langkah diatas tadi tetapi dengan nama file berbeda, yaitu create_table_kota dan edit lagi

<?php

use Illuminate\Database\Migrations\Migration;

class CreateTableKota extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('kota', function(Illuminate\Database\Schema\Blueprint $table){
            $table->increments('id');
            $table->string('kota', 100);
            $table->unsignedInteger('propinsi_id');
            $table->foreign('propinsi_id')
                ->references('id')->on('propinsi')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('kota');
    }

}

ulangi lagi langkah diatas dengan nama file create_table_kecamatan

<?php

use Illuminate\Database\Migrations\Migration;

class CreateTableKecamatan extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('kecamatan', function(Illuminate\Database\Schema\Blueprint $table){
            $table->increments('id');
            $table->string('kecamatan', 100);
            $table->unsignedInteger('kota_id');
            $table->foreign('kota_id')
                ->references('id')->on('kota')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('kecamatan');
    }

}

ulangi lagu dengan nama create_table_desa
<?php

use Illuminate\Database\Migrations\Migration;

class CreateTableDesa extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('desa', function(Illuminate\Database\Schema\Blueprint $table){
            $table->increments('id');
            $table->string('desa', 100);
            $table->unsignedInteger('kecamatan_id');
            $table->foreign('kecamatan_id')
                ->references('id')->on('kecamatan')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('desa');
    }

}

Jika sudah, pada command line ketik
php artisan migrate
Lihat database anda, maka otomatis akan berisi table-table sesuai isi migrate di atas. Selanjutnya buka folder app/database/seeds dan buat file dengan nama AllSeeder.php dan isi seperti berikut

<?php

class AllSeeder extends Seeder {

    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
    
        // TABLE PROPINSI
        DB::table('propinsi')->insert(array(
            array('propinsi' => 'Banten')
        ));
        
        // TABLE KOTA
        DB::table('kota')->insert(array(
            array('kota' => 'Pandeglang', 'propinsi_id' => 1),
            array('kota' => 'Serang', 'propinsi_id' => 1),
        ));
        
        // TABLE KECAMATAN
        DB::table('kecamatan')->insert(array(
            array('kecamatan' => 'Picung', 'kota_id' => 1),
            array('kecamatan' => 'Munjul', 'kota_id' => 1),
            array('kecamatan' => 'Cikeusal', 'kota_id' => 2),
            array('kecamatan' => 'Curug', 'kota_id' => 2)
        ));
        
        // TABLE DESA
        DB::table('desa')->insert(array(
            array('desa' => 'Cililitan', 'kecamatan_id' => 1),
            array('desa' => 'Kadupandak', 'kecamatan_id' => 1),
            array('desa' => 'Ciodeng', 'kecamatan_id' => 2),
            array('desa' => 'Pasir Tenjo', 'kecamatan_id' => 2),
            array('desa' => 'Dahu', 'kecamatan_id' => 3),
            array('desa' => 'Katulisan', 'kecamatan_id' => 3),
            array('desa' => 'Tinggar', 'kecamatan_id' => 4),
            array('desa' => 'Cipete', 'kecamatan_id' => 4),
        ));
    }

}

Buka file DatabaseSeeder.php yang juga terdapat pada folder seeds tersebut dan edit seperti berikut

<?php

class DatabaseSeeder extends Seeder {

    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Eloquent::unguard();

        $this->call('AllSeeder');
    }

}

Pada command line ketik seperti berikut
php artisan db:seed
 Pembuatan database dan table selesai, selanjutnya buat Controller dengan nama SiteController.php dan isi seperti berikut.

<?php

class SiteController extends \BaseController {

    public function getIndex() {
        $propinsi = array('' => '');
        foreach(Propinsi::all() as $row)
            $propinsi[$row->id] = $row->propinsi;
        
        return View::make('index', array(
            'propinsi' => $propinsi
        ));
    }
    
    public function postData() {
        switch(Input::get('type')):
            case 'kota':
                $return = '<option value=""></option>';
                foreach(Kota::where('propinsi_id', Input::get('id'))->get() as $row) 
                    $return .= "<option value='$row->id'>$row->kota</option>";
                return $return;
            break;
            case 'kecamatan':
                $return = '<option value=""></option>';
                foreach(Kecamatan::where('kota_id', Input::get('id'))->get() as $row) 
                    $return .= "<option value='$row->id'>$row->kecamatan</option>";
                return $return;
            break;
            case 'desa':
                $return = '<option value=""></option>';
                foreach(Desa::where('kecamatan_id', Input::get('id'))->get() as $row) 
                    $return .= "<option value='$row->id'>$row->desa</option>";
                return $return;
            break;
        endswitch;    
    }
}

Kode diatas tampak berantakan, silahkan rapihkan sesuai selera anda.

selanjutnya buat 4 buah model dengan nama Propinsi.php, Kota.php, Kecamatan.php dan Desa.php dan isi seperti berikut.


// Untuk Propinsi.php
<?php

class Propinsi extends Eloquent {
    
    protected $table = 'propinsi';
    public $timestamps = false;
    
}

// Untuk Kota.php
<?php

class Kota extends Eloquent {
    
    protected $table = 'kota';
    public $timestamps = false;
        
}


// Untuk Kecamatan.php
<?php

class Kecamatan extends Eloquent {
    
    protected $table = 'kecamatan';
    public $timestamps = false;
    
}


// Untuk Desa.php
<?php

class Desa extends Eloquent {
    
    protected $table = 'desa';
    public $timestamps = false;
    
}


Untuk selanjutnya buka folder view dan buat file dengan nama layouts.blade.php
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dropdown Depedency - Studi kasus Pemilihan Propinsi Indonesia</title>
        {{ HTML::script("assets/jquery.js") }}
    </head>
    <body>
        @yield('content')
        <script type="text/javascript">
            $(document).ready(function() {
                @yield('script')
            });
        </script>
    </body>
</html>

Buat lagi dengan nama index.blade.php

@extends('layouts')

@section('content')
{{ Form::open(array('url' => '#', 'id' => 'wilayah')) }}

<table width="500px" align="center">
    <tr>
        <td>{{ Form::label('propinsi', 'Propinsi') }}</td>
        <td>: {{ Form::select('propinsi', $propinsi, null, array('id' => 'sPropinsi', 'style'=>'width: 200px'))  }}</td>
    </tr>
    <tr>
        <td>{{ Form::label('kota', 'Kabupaten / Kota') }}</td>
        <td>: {{ Form::select('kota', array(), null, array('id' => 'sKota', 'style'=>'width: 200px'))  }}</td>
    </tr>
    <tr>
        <td>{{ Form::label('kecamatan', 'Kecamatan') }}</td>
        <td>: {{ Form::select('kecamatan', array(), null, array('id' => 'sKecamatan', 'style'=>'width: 200px'))  }}</td>
    </tr>
    <tr>
        <td>{{ Form::label('desa', 'Desa / Kelurahan') }}</td>
        <td>: {{ Form::select('desa', array(), null, array('id' => 'sDesa', 'style'=>'width: 200px'))  }}</td>
    </tr>
</table>

{{ Form::close() }}

@stop

@section('script')
$('#sPropinsi').on('change', function(){
    $.post('{{ URL::to('site/data') }}', {type: 'kota', id: $('#sPropinsi').val()}, function(e){
        $('#sKota').html(e);
    });
    
    $('#sKecamatan').html('');
    $('#sDesa').html('');
    
});
$('#sKota').on('change', function(){
    $.post('{{ URL::to('site/data') }}', {type: 'kecamatan', id: $('#sKota').val()}, function(e){
        $('#sKecamatan').html(e);
    });
    $('#sDesa').html('');
});
$('#sKecamatan').on('change', function(){
    $.post('{{ URL::to('site/data') }}', {type: 'desa', id: $('#sKecamatan').val()}, function(e){
        $('#sDesa').html(e);
    });
});
@stop

Buka file routes.php dan isi seperti berikut

<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the Closure to execute when that URI is requested.
|
*/

Route::get('/', 'SiteController@getIndex');
Route::controller('site', 'SiteController');

Selesai deh, berikut penampakannya.



Download
Download
Password : didanurwanda.blogspot.com

Rabu, 15 Januari 2014

[Laravel] Contoh Penerapan DataTables pada Laravel 4


Ini merupakan artikel pertama saya yang membahas Framework Laravel. Dan pada kesempatan ini, saya akan sedikit memberikan contoh penerapan DataTables pada Laravel dengan AJAX Source disertai dengan Twitter Bootstrap 3 tentunya, ya walaupun sederhana sih.

Langsung saja, pada contoh ini saya menggunakan database test dan membuat table dengan nama browser. berikut querynya.

CREATE TABLE IF NOT EXISTS `browser` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `engine` varchar(100) NOT NULL,
  `browser` varchar(100) NOT NULL,
  `platform` varchar(100) NOT NULL,
  `version` varchar(10) NOT NULL,
  `grade` varchar(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=58;

INSERT INTO `browser` (`id`, `engine`, `browser`, `platform`, `version`, `grade`) VALUES
(1, 'Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'),
(2, 'Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'),
(3, 'Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'),
(4, 'Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'),
(5, 'Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'),
(6, 'Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'),
(7, 'Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'),
(8, 'Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A'),
(9, 'Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A'),
(10, 'Gecko', 'Firefox 3.0', 'Win 2k+ / OSX.3+', '1.9', 'A'),
(11, 'Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'),
(12, 'Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'),
(13, 'Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'),
(14, 'Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'),
(15, 'Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'),
(16, 'Gecko', 'Mozilla 1.0', 'Win 95+ / OSX.1+', '1', 'A'),
(17, 'Gecko', 'Mozilla 1.1', 'Win 95+ / OSX.1+', '1.1', 'A'),
(18, 'Gecko', 'Mozilla 1.2', 'Win 95+ / OSX.1+', '1.2', 'A'),
(19, 'Gecko', 'Mozilla 1.3', 'Win 95+ / OSX.1+', '1.3', 'A'),
(20, 'Gecko', 'Mozilla 1.4', 'Win 95+ / OSX.1+', '1.4', 'A'),
(21, 'Gecko', 'Mozilla 1.5', 'Win 95+ / OSX.1+', '1.5', 'A'),
(22, 'Gecko', 'Mozilla 1.6', 'Win 95+ / OSX.1+', '1.6', 'A'),
(23, 'Gecko', 'Mozilla 1.7', 'Win 98+ / OSX.1+', '1.7', 'A'),
(24, 'Gecko', 'Mozilla 1.8', 'Win 98+ / OSX.1+', '1.8', 'A'),
(25, 'Gecko', 'Seamonkey 1.1', 'Win 98+ / OSX.2+', '1.8', 'A'),
(26, 'Gecko', 'Epiphany 2.20', 'Gnome', '1.8', 'A'),
(27, 'Webkit', 'Safari 1.2', 'OSX.3', '125.5', 'A'),
(28, 'Webkit', 'Safari 1.3', 'OSX.3', '312.8', 'A'),
(29, 'Webkit', 'Safari 2.0', 'OSX.4+', '419.3', 'A'),
(30, 'Webkit', 'Safari 3.0', 'OSX.4+', '522.1', 'A'),
(31, 'Webkit', 'OmniWeb 5.5', 'OSX.4+', '420', 'A'),
(32, 'Webkit', 'iPod Touch / iPhone', 'iPod', '420.1', 'A'),
(33, 'Webkit', 'S60', 'S60', '413', 'A'),
(34, 'Presto', 'Opera 7.0', 'Win 95+ / OSX.1+', '-', 'A'),
(35, 'Presto', 'Opera 7.5', 'Win 95+ / OSX.2+', '-', 'A'),
(36, 'Presto', 'Opera 8.0', 'Win 95+ / OSX.2+', '-', 'A'),
(37, 'Presto', 'Opera 8.5', 'Win 95+ / OSX.2+', '-', 'A'),
(38, 'Presto', 'Opera 9.0', 'Win 95+ / OSX.3+', '-', 'A'),
(39, 'Presto', 'Opera 9.2', 'Win 88+ / OSX.3+', '-', 'A'),
(40, 'Presto', 'Opera 9.5', 'Win 88+ / OSX.3+', '-', 'A'),
(41, 'Presto', 'Opera for Wii', 'Wii', '-', 'A'),
(42, 'Presto', 'Nokia N800', 'N800', '-', 'A'),
(43, 'Presto', 'Nintendo DS browser', 'Nintendo DS', '8.5', 'C'),
(44, 'KHTML', 'Konqureror 3.1', 'KDE 3.1', '3.1', 'C'),
(45, 'KHTML', 'Konqureror 3.3', 'KDE 3.3', '3.3', 'A'),
(46, 'KHTML', 'Konqureror 3.5', 'KDE 3.5', '3.5', 'A'),
(47, 'Tasman', 'Internet Explorer 4.5', 'Mac OS 8-9', '-', 'X'),
(48, 'Tasman', 'Internet Explorer 5.1', 'Mac OS 7.6-9', '1', 'C'),
(49, 'Tasman', 'Internet Explorer 5.2', 'Mac OS 8-X', '1', 'C'),
(50, 'Misc', 'NetFront 3.1', 'Embedded devices', '-', 'C'),
(51, 'Misc', 'NetFront 3.4', 'Embedded devices', '-', 'A'),
(52, 'Misc', 'Dillo 0.8', 'Embedded devices', '-', 'X'),
(53, 'Misc', 'Links', 'Text only', '-', 'X'),
(54, 'Misc', 'Lynx', 'Text only', '-', 'X'),
(55, 'Misc', 'IE Mobile', 'Windows Mobile 6', '-', 'C'),
(56, 'Misc', 'PSP browser', 'PSP', '-', 'C'),
(57, 'Other browsers', 'All others', '-', '-', 'U'); 

Selanjutnya setting project laravel anda sesuai database yang anda buat (Saya memakai database 'test'). Setelah itu, buat Controller dengan nama SiteController.php dan berisikan seperti berikut.

<?php

class SiteController extends \BaseController {

    public function getIndex() {
        return View::make('index');
    }

    public function getBrowser() {
        if (Request::ajax()) {
            $result = [];
            foreach (Browser::all() as $row):
                $result[] = [
                    $row->engine,
                    $row->browser,
                    $row->platform,
                    $row->version,
                    $row->grade
                ];
            endforeach;
            return json_encode(['aaData' => $result]);
        }
        else {
            return Redirect::to('site');
        }
    }

}

Kemudian pada folder views buat file lagi dengan nama layouts.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Contoh Penerapan DataTables pada Laravel 4</title>
        {{ HTML::style("assets/css/jquery.dataTables.css") }}
        {{ HTML::style("assets/twbs/css/bootstrap.css") }}

        {{ HTML::script("assets/js/jquery.js") }}
        {{ HTML::script("assets/twbs/js/bootstrap.js") }}
        {{ HTML::script("assets/js/jquery.dataTables.js") }}
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>Contoh Penerapan DataTables pada Laravel 4</h2>
                    <h4>dengan DataTables AJAX source</h4>
                </div>
            </div>
            <hr />
            @yield('content')
            <hr />
            <div class="row">
                <div class="col-lg-12">
                    <h4> {{ HTML::link('http://didanurwanda.blogspot.com') }} </h4>
                </div>
            </div>        
        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                @yield('script')
            });
        </script>
    </body>
</html>

Pada script diatas, saya menyimpan file twitter bootstrap, jquery, dan jquery datatables pada folder assets. Atur sesuai dengan lokasi Anda menyimpan file-file tersebut. Lanjut lagi, masih di view buat file dengan nama index.blade.php


@extends('layouts')

@section('content')
<div class="row">
    <div class="col-lg-12">
        <table width="100%" id="browser" class="table table-bordered table-condensed table-striped">
            <thead>
                <tr>
                    <th width="10%">Rendering engine</th>
                    <th width="30%">Browser</th>
                    <th width="20%">Platform(s)</th>
                    <th width="20%">Engine Version</th>
                    <th width="20%">CSS Grade</th>                        
                </tr>
            </thead>
        </table>
    </div>
</div>
@stop

@section('script')
$("#browser").dataTable({
    "bProcessing": true,
    "sAjaxSource": "{{ URL::to('site/browser') }}"
});
@stop


Jika sudah kemudian buka folder models dan buat file dengan nama Browser.php dan isi seperti berikut

<?php

class Browser extends Eloquent {
 protected $table = 'browser';
        public $timestamps = false;
}

Jangan lupa atur juga routes.php sesuai dengan nama controllernya, saya mengaturnya seperti berikut.


<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the Closure to execute when that URI is requested.
|
*/

Route::get('/', 'SiteController@getIndex');
Route::controller('site', 'SiteController');

Selesai, silahkan di coba. Berikut penampakan di Laptop saya


Download
Download 
Password: didanurwanda.blogspot.com