Tutorial for You: 2013

Kamis, 07 November 2013

Ajax

Ajax atau Asynchronous Javascript and Xml merupakan sebuah bahasa pemograman, dimana javascript berkomunikasi langsung dengan server dengan sebuah fungsi yang disebut XMLHttpRequest dalam penerimaan dan pengiriman data ke web client.
Ajax merupakan penggabungan dari beberapa teknologi seperti html/xhml, javascript, xml, css, dan server side client.
Misalnya dalam web yang mempunyai data dari database, tanpa menggunakan ajax kita harus merefresh halaman web tersebut (dengan klik kanan refresh atau menekan tombol refresh), - kalau misalnya data record yang keluar itu satu -satu, dan kita tidak tahu kapan record tersebut bertambah atau di update, bisa repot ngerefreshnya, nah dengan menggunakan fungsi ajax kita tidak perlu repot merefresh ulang halaman tersebut.
Contohnya ada banyak sekali kalau anda sering membuka facebook atau twitter, misalnya status- status yang keluar sendiri tanpa kita harus merefreshnya.

Baca selengkapnya>>

Selasa, 15 Oktober 2013

DatePicker dengan Jquery

Download Jquery UI yang ada Datepickernya http://jqueryui.com/download/
Setting autoload.php yang ada di config $autoload['helper'] = array('url','form');
Setting juga routes.php dan base url yang ada di config.php
berikut Script sederhanya

untuk datepicker.php di controller

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Datepicker extends CI_Controller {
public function index()
{
$this->load->view('datepicker_view');
}
}

untuk datepicker_view.php di view

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="<?php echo base_url(); ?>asset/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>asset/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>asset/js/jquery-ui-1.10.3.custom.min.js"></script>
<link type="text/css" href="<?php echo base_url() ?>asset/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<meta charset="utf-8">
<title>datepicker</title>
</head>
<body>
<script>
$(document).ready(function() {
width:100;
$("#test").datepicker({
dateFormat: 'dd-mm-yy',
buttonImageOnly: true,
});
});
</script>
<div id="container">
<h1>datepicker!</h1>
<?php
echo form_input('test','','id="test"');
?>
</div>
</body>
</html>

Baca selengkapnya>>

AutoComplete Jquery dengan CodeIgniter

Autocomplete merupakan salah satu fitur pada suatu form dimana data-data akan keluar saat kita ketikan pada form. Contoh penggunaan autocomplete ini yang paling sering kita jumpai adalah google.

Berikut adalah penggunaan autocomplete dengan codeigniter (PHP):
1. Download terlebih dahulu Jquery UI yang ada autocompletenya http://jqueryui.com/download/
2. Buatlah database akademik dengan table mahasiswa yang isinya (id dan nama)
3. pada codeigniter setting konfigurasi
-> autoload.php

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

-> constant.php
pada baris terakhir ketikan script berikut jika menggunakan ajax :

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

-> setting database.php

-> setting routes.php dengan $route['default_controller'] = "Home";

4. edit model, view, dan controller nya
-> Buat model Home_model.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_model extends CI_Model
{
function seek($keyword){
$this->db->select('*')->from('mahasiswa');
$this->db->like('nama',$keyword,'after');
$query = $this->db->get();
return $query->result();
}
}

-> Buat Home_view.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="akademik" class=" no_js">
<head>
<title>Cari Data</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<link type="text/css" href="<?php echo base_url() ?>asset/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo base_url() ?>asset/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>asset/js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>
<script type="text/javascript">
$().ready( function() {
$("#autocomplete").autocomplete({
minLength: 1,
source:
function(req, add){
$.ajax({
url: "index.php/home/lookup",
dataType: 'json',
type: 'POST',
data: req,
success:
function(data){
if(data.response =='true'){
add(data.message);
}
}
});
},
});
});
</script>
<?php
echo form_input('autocomplete','','id="autocomplete"');
?>
</body>
</html>

-> Buat Controller Home.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->helper('form');
}
function index() {
$this->load->view('home_view');
}
function lookup(){
// memproses hasil pengetikan keyword pada form
$keyword = $this->input->post('term');
$data['response'] = 'false'; //mengatur default response
$this->load->model('home_model'); // memanggil file model
$query = $this->home_model->seek($keyword); //memanggil fungsi pencarian pada model
if(! empty($query) ) {
$data['response'] = 'true'; //mengatur response
$data['message'] = array(); //membuat array
foreach( $query as $row ){
$data['message'][] = array('label' => $row->nama, 'value' => $row->nama); //mengisi array dengan record yang diperoleh
}
}
//konstanta IS_AJAX
if(IS_AJAX){
echo json_encode($data); //mencetak json jika merupakan permintaan ajax
}
else {
$this->load->view('home/index',$data); //memanggil file view dan mengisi data yg diperoleh
}
}
}

oh ya jangan lupa untuk menempatkan file jquerynya disesuikan juga ya dengan yang ada di home_view.php

Baca selengkapnya>>

Rabu, 04 September 2013

Inheritance (Pewarisan)

Dalam objek memungkin memiliki beberapa persamaan dengan objek yang lainnya, baik itu berupa atribut ataupun metode. Misalkan, sepeda gunung dan sepeda onthel merupakan beberapa jenis sepeda yang sama- sama memiliki current speed dan gear. Dari berbagai jenis sepeda tersebut memiliki tambahan - tambahan atribut, sepeda onthel memiliki keranjang dan tambahan jok sedangkan sepeda elektrik mempunyai status on/off dan mengecilkan gear.

Penggunaan inheritance adalah sebagai berikut :

/* Buat kelas sepeda (SuperClass) */

public class Sepeda {
    int speed = 0;
    int gear = 1;

    void changeGear(int newValue){
        gear = newValue;
    }

    void speedUp(int increment){
        speed = speed + increment;
    }

    void applyBrakes(int decrement){
        speed = speed - decrement;
    }

    void printStates(){
        System.out.println("Speed : " + speed +
                           "gear : " + gear);
    }
}

/* Buat kelas SepedaOntel (SubClass) */

public class SepedaOntel extends Sepeda{
    boolean Keranjang = false;
    boolean doubleJok = false;
    String stKeranjang;
    String stDoubleJok;

    void changeStatusKeranjang(boolean Keranjang){
        this.Keranjang = Keranjang;

        if(this.Keranjang == true) {
            stKeranjang = "ada";
        }
        else {
            stKeranjang = "tidak ada";
        }

    }

    void changeStatusDoubleJok(boolean doubleJok){
        this.doubleJok = doubleJok;

        if(this.doubleJok == true) {
            stDoubleJok = "ada";
        }
        else {
            stDoubleJok = "tidak ada";
        }
    }

    void printStates2(){
        System.out.println("Keranjang : " + stKeranjang + " " +
                           "Status Jok : " + stDoubleJok);
    }
}

/* Buat kelas SepedaDemo */

public class SepedaDemo {

    public static void main(String[] args) {
        // Objek sepeda spd1 dan spd2
        Sepeda spd1 = new Sepeda();
        SepedaOntel spd2 = new SepedaOntel();

        // Pemanggilan method untuk objek
        spd1.speedUp(10);
        spd1.applyBrakes(5);
        spd1.changeGear(2);
        spd1.printStates();

        spd2.speedUp(10);
        spd2.applyBrakes(5);
        spd2.changeGear(2);
        spd2.changeStatusKeranjang(true);
        spd2.changeStatusDoubleJok(false);
        spd2.printStates();
        spd2.printStates2();

    }
}

Dan hasilnya :

run:
Speed : 5 gear : 2
Speed : 5 gear : 2
Keranjang : ada
Status Jok : tidak ada
BUILD SUCCESSFUL (total time: 1 second)

Baca selengkapnya>>

Selasa, 03 September 2013

Objek dan Kelas dalam OOP (Object Oriented Programming)

Bahasa Pemograman Java dikembangkan oleh Sun Microsystems dan direlease pada tahun 1995. Java dapat dijalankan dalam berbagai macam platform seperti Windows, Mac OS, dan berbagai macam versi UNIX lainnya.

Bahasa pemograman Java merupakan kumpulan dari objek - objek yang saling berhubungan melalui method.
Objek - Kalu kita lihat lingkungan di sekitar kita ada banyak sekali objek yang dapat kita jadikan contoh, misalnya orang, lampu, sepeda, handphone, anjing, bangku, tas, dll.

Objek selalu mempunyai 2 karakteristik yaitu keadaan(state) dan perilaku(behaviour).
Misalkan :

Orang mempunyai state(jenis kelamin, umur, tinggi badan, warna kulit) dan behaviour(berjalan, memukul, melihat, memakan).
Lampu mempunyai state(mati dan nyala) dan behaviour(matikan dan nyalakan).
Radio mempunyai state(mati, nyala, volume, channel) sedangkan behaviour(matikan, nyalakan, kecilkan suara, besarkan suara, ganti channel).
Sepeda mempunyai state(current gear, current speed) dan behaviour(channging gear, changging speed, applying breaks).

Kesimpulan:

State sebuah objek disampaikan melalui sebuah variabel, dan behaviour melalui method dalam bahasa pemograman berorientasi objek.
Method mengoperasikan state yang ada dalam sebuah objek juga menghubungkan satu objek lainnya.
Deklarasikan state(mati, nyala, volume, channel) dan method untuk mengubah state tersebut.

Impementasi :

/* Buat kelas Sepeda */

/* Buat kelas SepedaDemo */

Dan hasilnya adalah :

run :
Speed : 10 gear : 2
Speed : 15 gear : 3

BUILD SUCCESSFUL (total time: 0 seconds)

Download Pdf : http://www.4shared.com/office/7nIj0ULZ/Objek_dan_kelas_dalam_OOP.html

Baca selengkapnya>>

Halaman

Kamis, 07 November 2013

Ajax

Selasa, 15 Oktober 2013

DatePicker dengan Jquery

AutoComplete Jquery dengan CodeIgniter

Rabu, 04 September 2013

Inheritance (Pewarisan)

Selasa, 03 September 2013

Objek dan Kelas dalam OOP (Object Oriented Programming)