WAS-01 | Pemrograman PHP

MENGGUNAKAN CODEIGNITER DAN JQUERY

Sesi 01

PreRequisite

Sebelum Memulai...
Webserver

Webprogramming PHP+HTML
OOP (Object Oriented Programming) MySQL + phpMyAdmin

Webserver
Definisi:

A web server program is software that runs on the web site hosting Server computer. Its main purpose is serving web pages; which means it waits for requests from web browsers (also known as clients) and responds by sending the required data back.
[Link]

Apache Tomcat

Paket webserver: XAMPP (Windows), MAMP (Mac OS X), LAMP (Linux)

Microsoft's Internet Information Services (IIS) Windows

Server Nginx web server, Jigsaw, Klone, Abyss web server, Oracle Web Tier, X5 (Xitami) web server, Zeus web server

Webprogramming PHP+HTML
HTML Static Web pages Tag dan Style PHP Dynamic and interactive Web pages Menghasilkan dokumen HTML untuk dimunculkan di browser Disisipkan ke dalam dokumen HTML

PHP
Tipe Data integer, floating point, character dan boolean array Variabel Semua variabel diawali dengan $.

Misal: $nama, $alamat Misal: $tempat_dan_tanggal_lahir Misal: $data1_a Misal: $3bersaudara, $2wanita, $1lelaki

Nama variabel boleh sepanjang apapun, akan tetapi lebih baik jika nama itu simple dan bermakna.

Nama variabel hanya boleh dibentuk dari alphabet, angka dan underscore.

Nama variabel boleh diawali alphabet atau underscore tapi tidak boleh angka.

Nama variabel merupakan case-sensitive artinya variabel $nama tidak sama dengan $Nama atau $NaMa

PHP (cont.)
Operator Aritmetik: +, -, *, /, % Logika: and, or, xor, !, &&, || Pembanding: ==, !=, <>, ===, !==, <, >, <=, >= Bitwise: &, |, ^, ~, <<, >>

PHP (cont.)
Percabangan
if (kondisi) { ... } [ else if (kondisi) { ... } elseif switch (ekspresi) { case nilai_ekspresi_1: case nilai_ekspresi_2: case nilai_ekspresi_3: ... case nilai_ekspresi_n: default: ...; [ break; ] } { ... } ] { ... } [ else { ... } ]
....; break; ....; break; ....; break; ....; break;

PHP (cont.)
Operator Ternary ? kondisi ? pernyataan1_jika_benar : pernyataan2_jika_salah;
<?php $nilai = 80; $status = ($nilai>70)?Lulus:Tidak Lulus; echo Status kita adalah $status; ?>

PHP (cont.)
Looping / Pengulangan
while (kondisi) { ... } do { ... } while (kondisi); for (nilaiAwal; kondisi; increment) { ... } foreach (array_expression as $value) { ... } foreach (array_expression as $key => $value) { ... }

PHP (cont.)
Fungsi
function nama_fungsi(<arg1>,<arg2>,...,<argN>) { Blok pernyataan; return <return_value>; //opsional }

OOP
Object Oriented Programming (Pemrograman

Berorientasi Object) merupakan sebuah paradigma baru dalam teknik pemrograman. Dimana isu terpenting dari pemrograman OOP adalah objek itu sendiri Class Objek Property Method Constructor / Destructor

OOP (cont.)

Sumber: [Link]

OOP (cont.)
Inheritance

Merupakan mekanisme pewarisan sebuah kelas oleh kelas yang lain. Artinya, kelas yang mewarisi kelas lain akan memiliki sifat dari kelas yang diwarisinya. Contoh: kelas mobil_balap mewarisi kelas mobil Merupakan suatu proteksi terhadap member kelas agar tidak dapat diakses atau diubah dari luar kelas. Contoh: property saldo pada kelas rekening Polymorphism adalah merupakan kemampuan untuk menciptakan variable, function, atau sebuah object yang memiliki banyak bentuk. Inti dari polymorphism adalah meng-overide method pada subkelas. Contoh: method bicara() pada kelas anjing dan kucing hasil pewarisan dari kelas hewan

Encapsulation

Polymorphism

MySQL + phpMyAdmin
MySQL merupakan database yang bersifat open

source sehingga banyak digunakan di dunia. Walaupun gratis, MySQL tetap berkualitas dan sudah cukup memberikan performa yang memadai. Ada 2 cara menggunakan MySQL:

Menggunakan console (command line) Menggunakan phpMyAdmin

[Link]

MySQL
Tipe Data Numeric
Integer: INTEGER, INT, SMALLINT, TINYINT, MEDIUMINT, BIGINT Fixed-Point: DECIMAL, NUMERIC Floating-Point: FLOAT, DOUBLE

String

CHAR, VARCHAR, BINARY, VARBINARY, BLOB, TEXT, ENUM, dan SET DATE, TIME, DATETIME, TIMESTAMP, dan YEAR

Date and Time

MySQL (cont.)
Data Definition Language (DDL) adalah query SQL

yang berhubungan dengan pendefinisian basis data atau struktur tabel.

create nama_database; alter table nama_tabel add nama_kolom tipe_data;

Data Manipulation Language (DDL) adalah query

SQL yang berhubungan dengan pengolahan data dalam suatu tabel.

select * from nama_tabel; insert into master_strata (id, nama) values(1, 'S1');

Web Programming vs Web Designing

Web Programming vs Web Designing

Web Programming Mengelola kode yang berhubungan dengan bisnis proses suatu aplikasi (backend) Web Designing Mengelola kode yang berhubungan dengan antar muka dan interaksi aplikasi dengan pengguna (frontend)

Framework

Evolusi Pengembangan Web

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]

Evolusi Pengembangan Web

[Link]

[Link]

[Link]

[Link] [Link]

Setiap bagian yang umum dipecah menjadi beberapa bagian

Evolusi Pengembangan Web

Controller

[Link]

View

Model
Umumnya menggunakan framework PHP

Mengapa Framework?
Framework aplikasi web Membangun website dinamis Pustaka untuk koneksi ke berbagai database Template frameworks Manajemen session Fungsi paging untuk menampilkan data Menyediakan banyak fungsi yang siap pakai ... dan banyak lagi lainnya

Arsitektur MVC

Arsitektur HMVC

MVC
View View (views/[Link]) <html> <body> <p>Product Count:<?=$count?></p> </body> </html> Controller (controllers/[Link]) function showProduct($id) { $this->load->model(product); $count = $this->product->getCount($id); $data[count] = $count; $this->load->view(showProduct, $data); } Model (models/[Link]) function getCount($id) { $this->db->where(id, $id); $this->db->from(my_product); $query = $this->db->get(); return $query->num_rows(); }

Controller

Model

Beberapa Framework

Kenapa CodeIgniter?
Gratis

Ringan & Cepat

Menggunakan M-V-C Memiliki pustaka yang lengkap

Terdokumentasi dengan baik

Komunitas berkembang pesat

Instalasi CodeIgniter
Download [Link]

Unzip file CodeIgniter_2.[Link] ke DocumentRoot webserver (/xampp/htdocs/)

Rename folder CodeIgniter_2.1.3 menjadi ci

Edit application/config/[Link] application/config/[Link]

Buka [Link]

Application Flow of CodeIgniter

URL pada CodeIgniter

[Link]

[Link]

Struktur Direktori
application

system
user_guide [Link]

Tempat kita menyimpan coding aplikasi Core dari framework CodeIgniter

Front controller yang bergfungsi menginisiasi segala sumber daya yang dibutuhkan untuk menjalankan CodeIgniter

Struktur Direktori Aplikasi

Config -> konfigurasi aplikasi

Controllers -> tempat menyimpan Controller

Errors -> CI error message Helpers -> tempat menyimpan Helpers

Libraries -> tempat menyimpan Libraries

Language -> jika menggunakan multi bahasa Models -> tempat menyimpan Model

Views -> tempat menyimpan View

Membangun Aplikasi

Konfigurasi
Edit file application/config/[Link] $config['base_url'] = '[Link] Buka [Link] application/controllers/[Link] application/views/welcome_message.php

Default controller: application/config/[Link]

$route['default_controller'] = "welcome";

Alternatif: [Link] [Link]

Latihan 10 menit
Modifikasi bebas view welcome_message.php

Controller
[BARU] application/controllers/[Link]
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class About extends CI_Controller { public function __construct() { parent::__construct(); } function index(){ echo "About Me"; } }

/* End of file [Link] */ /* Location: ./application/controllers/[Link] */

[Link]

View
[BARU] application/views/v_about.php
<html> <title> View Pertama</title> <body> <h1>About me</h1> </body> </html>

Controller
[EDIT] application/controllers/[Link]
... class About extends CI_Controller { public function __construct() { parent::__construct(); } function index(){ echo "About Me"; } function me() { $this->load->view('v_about'); } } ...

[Link]

Controller -> View

[EDIT] application/controllers/[Link]

...
function me() { $this->load->view('v_about'); }

function person() { $data = array( nama => Kenggo, email => [Link]@[Link] ); $this->load->view(v_about_person, $data); }
} ...

View
[BARU] application/views/v_about_person.php
<html> <title> View Pertama</title> <body> <h1>About <?=$nama?></h1> <h2>Email me at <?=$email?></h2> </body> </html>

[Link]

Controller -> View

[EDIT] application/controllers/[Link] ...

function person() { $data = array( nama => Kenggo, email => [Link]@[Link] ); $this->load->view(v_about_person, $data); }
function post($nama, $email) { $data = array( nama => $nama, email => urldecode($email) ); $this->load->view(v_about_person, $data); } } ...

[Link]

Referensi
[Link]

yuki%[Link] = urlencode(yuki@[Link]); yuki@[Link] = urldecode(yuki%[Link]); Beberapa karakter khusus tidak boleh dilewatkan ke URL

PHP Closing Tag

INCORRECT: <?php echo "Here's my code!"; ?>

CORRECT: <?php
echo "Here's my code!";

/* End of file [Link] */ /* Location: ./system/modules/mymodule/[Link] */

Latihan 15 menit
Modifikasi bebas :
- [Link] - v_about_person.php

Model
[BARU] application/models/m_about.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class M_about extends CI_Model { function __construct() { parent::__construct(); } function get_data() { return array('nama' => 'Miu', 'email' => 'miu@[Link]'); } } /* End of file m_about.php */ /* Location: ./application/models/m_about.php */

Controller
[EDIT] application/controllers/[Link] ...

function post($nama, $email) { $data = array( 'nama' => $nama, 'email' => urldecode($email) ); $this->load->view('v_about_person', $data); }
function get_person() { $this->load->model('M_about'); $data = $this->M_about->get_data(); //$data = M_about::get_data(); $this->load->view('v_about_person', $data); } } ...

[Link]

Buat db & tabel

Buka phpMyAdmin Buat database ci_training Buat tabel person sbb:

Isi dengan data sbb:

Configurasi
[EDIT] application/config/[Link] $db['default']['hostname'] = $db['default']['username'] = $db['default']['password'] = $db['default']['database'] = $db['default']['dbdriver'] = 'localhost'; 'root'; password'; 'ci_training'; 'mysql';

[EDIT] application/config/[Link] $autoload['libraries'] = array('database');

Model
[EDIT] application/models/m_about.php
... function get_data($id) { $this->db->select(nama, email); $this->db->from(person); $this->db->where(id, $id); $q = $this->db->get(); $r = $q->result_array(); return $r[0]; } ...

Controller
[EDIT] application/controllers/[Link]

...
function get_person($id) { $this->load->model('M_about'); $data = $this->M_about->get_data($id); $this->load->view('v_about_person', $data); }

} ...
[Link]

Latihan 30 menit

Buat fungsi get_email_by_nama() di model m_about.php

Buat tabel barang dengan field id, nama dan jumlah (tipe data sesuaikan), kemudian buatkan model, view dan controller-nya seperti contoh sebelumnya
TIPS: ketik ulang, jangan copy-paste

Sesi 02

Pustaka CodeIgniter
Database

File Uploading
Pagination Input and Security (SQL Injection)

Session
Form Validation dll

FORM DAN DATABASE

Form dan Database

Form Login Buat tabel user daftar_user

Insert data sbb:

View
[BARU] application/views/v_login.php
<html> <head> <meta charset="utf-8"> <title>Welcome to CodeIgniter</title> </head> <body> <form id='login' action='<?=base_url()?>login' method='post'> <fieldset > <legend>Login</legend> <input type='hidden' name='submitted' id='submitted' value='1'/> <label for='username' >UserName*:</label> <input type='text' name='username' id='username'

maxlength="50" />

<label for='password' >Password*:</label> <input type='password' name='password' id='password' maxlength="50" /> <input type='submit' name='Submit' value='Submit' /> </fieldset> </form> </body> </html>

Controller
[BARU] application/controllers/[Link]
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Login extends CI_Controller { public function __construct() { parent::__construct(); } function index(){ $this->load->view('v_login'); } } /* End of file [Link] */ /* Location: ./application/controllers/[Link] */

[Link]

Error? Blank?
[EDIT] application/views/v_login.php

<body>

<?php $this->load->helper('url'); ?>

<form id='login' action='<?=base_url()?>login' method='post'>

[Link]

base_url()
Isi dari base_url() sesuai dengan konfigurasi di

application/config/[Link]

$config['base_url']

= '[Link]

FORM HELPER

View
[BARU] application/views/v_login2.php
... <body> <?php $this->load->helper('form'); $this->load->helper('url'); echo form_open(base_url().'login'); echo form_fieldset('Login'); echo form_hidden('submitted', '1'); echo form_label('UserName*:', 'username'); $data = array('name'=>'username', 'id'=>'username', 'maxlength'=>'50'); echo form_input($data);

View (cont.)
application/views/v_login2.php
echo form_label('Password*:', 'password'); $data = array('name'=>'password', 'id'=>'password', 'maxlength'=>'50'); echo form_password($data); echo form_submit('Submit', 'Submit'); echo form_fieldset_close(); echo form_close(); ?> </body> </html>

Controller
[EDIT] application/controllers/[Link]
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Login extends CI_Controller { public function __construct() { parent::__construct(); } function index(){ $this->load->view('v_login2'); } } /* End of file [Link] */ /* Location: ./application/controllers/[Link] */

[Link]

Autoload Helper
[EDIT] application/config/[Link]

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

[EDIT] application/views/v_login2.php
... <?php $this->load->helper('form'); $this->load->helper('url'); echo form_open(base_url().'login'); ?> ...

Form Helper
form_open() form_hidden() form_input() form_fieldset_close() form_radio() form_submit()

form_open_multipart() form_checkbox()

form_upload()
form_textarea() form_dropdown()

form_label()
form_reset() form_button()

form_multiselect()
form_fieldset()

form_close()

VALIDATION

View
[BARU] application/views/v_main.php
<!DOCTYPE html> <html lang="en"> <head> <title>Login Success</title> </head> <body> <div> <h1>Login Success</h1> </div> </body> </html>

Model
[BARU] application/models/m_daftar_user.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class M_daftar_user extends CI_Model { function __construct() { parent::__construct(); } function get_data($username, $passwd) { $this->db->from('daftar_user'); $this->db->where(array('user' => $username, 'passwd' => md5($passwd))); return $this->db->count_all_results(); } } /* End of file m_daftar_user.php */ /* Location: ./application/models/m_daftar_user.php */

[EDIT] Controller: [Link]

function index(){ $this->load->library('input'); $submitted = $this->input->post("submitted")?$this->input->post("submitted"):""; if ($submitted == 1) { $username = $this->input->post("username")?$this->input->post("username"):""; $password = $this->input->post("password")?$this->input->post("password"):""; if ($username == "") { show_error('Kolom username kosong' ); } else { $this->load->model('M_daftar_user'); if ($this->M_daftar_user->get_data($username, $password)>0) { $this->load->view('v_main'); } else { show_error('Maaf, user/password Anda tidak cocok' ); } } } else { $this->load->view('v_login2'); } }

View
[BARU] application/views/v_login3.php Save as dari v_login2.php dengan perubahan berikut:
... <body> <?php echo validation_errors(); echo form_open(base_url().'login/validasi'); ?> ...

[EDIT] Controller: [Link]

function validasi() { $this->load->library(array('input', 'form_validation')); $this->form_validation->set_rules('username', 'Username', 'required'); $this->form_validation->set_rules('password', 'Password', 'required');

if ($this->form_validation->run() == FALSE) { $this->load->view('v_login3'); } else { $submitted = $this->input->post("submitted")?$this->input->post("submitted"):""; if ($submitted == 1) { $username = $this->input->post("username")?$this->input->post("username"):""; $password = $this->input->post("password")?$this->input->post("password"):"";
if ($username == "") { show_error('Kolom username kosong' ); } else { $this->load->model('M_daftar_user'); if ($this->M_daftar_user->get_data($username, $password)>0) { $this->load->view('v_main'); } else { show_error('Maaf, user/password Anda tidak cocok' ); } } } } }

Tes Validasi
URL: [Link]

Kasus: User/Password dikosongkan User/Password diisi data salah User/Password diisi data valid

[EDIT] Controller: [Link]

function validasi() { $this->load->library(array('input', 'form_validation')); $this->form_validation->set_message('required', Maaf, kolom %s tidak boleh dikosongkan.'); $this->form_validation->set_rules('username', 'Username', 'required'); $this->form_validation->set_rules('password', 'Password', 'required'); ...

Update

[EDIT] application/views/v_login3.php
Ganti teks UserName* menjadi Nama User* Ganti teks Password* menjadi Kata Kunci*

[EDIT] application/controllers/[Link]
$this->form_validation->set_rules('username', 'Nama User',

'required'); $this->form_validation->set_rules('password', 'Kata Kunci', 'required');

[Link]

Rule Validasi

PAGINATION

Data
Download [Link]

Import ke database ci_training Tabel: tmst_mahasiswa Jumlah data: 30 records

[BARU] Model: m_mahasiswa.php

<?php defined('BASEPATH') OR exit('No direct script access allowed'); class M_mahasiswa extends CI_Model { function __construct() { parent::__construct(); }

function get_all_data() { $this->db->order_by('nim', 'asc'); return $this->db->get('tmst_mahasiswa'); }

} /* End of file m_mahasiswa.php */ /* Location: ./application/models/m_mahasiswa.php */

[BARU] Controller: [Link]

... class Mahasiswa extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('M_mahasiswa'); } function index(){ $q = $this->M_mahasiswa->get_all_data(); if ($q->num_rows()>0) { $m = array(); foreach ($q->result() as $row) { $m[] = array($row->nim, $row->nama_mahasiswa, $row->jk, $row->tanggal_masuk); } $data['mhs'] = $m; $this->load->view('v_mahasiswa', $data); } else { show_error('Sorry, no data'); } } } ...

[BARU] View: v_mahasiswa.php

... <table> <thead> <tr><td>No</td><td>NIM</td><td>Nama Mahasiswa</td><td>JK</td><td>Tgl Masuk</td></tr> </thead> <tbody> <?php $i = 1; foreach ($mhs as $m) { ?> <tr> <td align="right"><?=$i?></td> <?php foreach ($m as $v) { echo "<td>$v</td>"; }; ?> </tr> <?php $i++; } ?> </tbody> </table> ...

[Link]

[EDIT] Model: m_mahasiswa.php

... function get_data($page=0) { $this->db->limit(10,$page); $this->db->order_by('nim', 'asc'); return $this->db->get('tmst_mahasiswa'); } ...

[EDIT] Controller: [Link]

... function data($idx=0){ $this->load->library('pagination'); $config['base_url'] = base_url().'mahasiswa/data/'; $config['total_rows'] = 30; $config['per_page'] = 10; $this->pagination->initialize($config); $q = $this->M_mahasiswa->get_data($idx); if ($q->num_rows()>0) { $m = array(); foreach ($q->result() as $row) { $m[] = array($row->nim, $row->nama_mahasiswa, $row->jk, $row->tanggal_masuk); } $data['mhs'] = $m; $data['page'] = $this->pagination->create_links(); $this->load->view('v_mahasiswa_page', $data); } else { show_error('Sorry, no data'); } } ...

[BARU] View: v_mahasiswa_page.php

... <table> <thead> <tr><td>No</td><td>NIM</td><td>Nama Mahasiswa</td><td>JK</td><td>Tgl Masuk</td></tr> </thead> <tbody> <?php $i = 1; foreach ($mhs as $m) { ?> <tr> <td align="right"><?=$i?></td> <?php foreach ($m as $v) { echo "<td>$v</td>"; }; ?> </tr> <?php $i++; } ?> <tr><td colspan="5"><?=$page?></td></tr> </tbody> </table> [Link] ...

Active Record
SELECT * FROM tabel $query = $this->db->get(tabel');
atau $this->db->from(tabel); $query = $this->db->get();

Active Record
SELECT * FROM tabel WHERE id=10 $this->db->where(id, 10); $query = $this->db->get(tabel');
atau $this->db->where(id, 10); $this->db->from(tabel); $query = $this->db->get();

Active Record
SELECT * FROM tabel WHERE id=10 AND jk=P $this->db->where(id, 10); $this->db->where(jk, P);
atau
$this->db->where(array(id => 10, jk => P));

Active Record
... WHERE id>10 and jk=P AND LEFT(nama, 1)=A
$this->db->where(array(id > => 10, jk => P)); $this->db->where(LEFT(nama,1)=A, NULL, FALSE); ...

Active Record
SELECT * FROM tabel WHERE id=10 OR jk=P $this->db->where(id, 10); $this->db->or_where(jk, P);

Active Record
SELECT * FROM tabel WHERE nama LIKE

%budi%
$this->db->like(nama, budi);

SELECT * FROM tabel WHERE nama LIKE budi% $this->db->like(nama, budi, after); SELECT * FROM tabel WHERE nama LIKE %budi $this->db->like(nama, budi, before);

Active Record
SELECT * FROM tabel WHERE id=10 OR jk=P
$q = $this->db->query(SELECT * FROM tabel WHERE id=10 OR jk=P);

Active Record
SELECT * FROM tabel1 JOIN tabel2 ON

[Link]=[Link];
$this->db->from(tabel1); $this->db->join(tabel2, [Link]=[Link]); $q = $this->db->get();

 Buat fungsi pada model

Latihan 15 menit

untuk menghitung jumlah semua record pada tabel tmst_mahasiswa Isikan jumlah record yang dihasilkan tersebut ke baris $config['total_rows'] = 30; pada controller [Link]

[BARU] Helper: utility_helper.php

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); if (!function_exists('trimTime')) { function trimTime($tgl) { $temp = explode(' ', $tgl); return $temp[0]; } } if (! function_exists('YMD2DMY')) { function YMD2DMY($tgl, $separator) { $arr = explode($separator, $tgl); if (count($arr)==3) { return sprintf('%s%s%s%s%s', $arr[2], $separator, $arr[1], $separator, $arr[0]); } else { return $tgl; } } }

[EDIT] View: v_mahasiswa_page.php

... $this->load->helper('utility'); foreach ($mhs as $m) { ?> <tr> <td align="right"><?=$i?></td> <?php foreach ($m as $k => $v) { if ($k==3) { $v = YMD2DMY(trimTime($v), '-'); } echo "<td>$v</td>"; }; ?> </tr> ...

[Link]

FORM ENTRY

Form Entry Mahasiswa

[EDIT] application/config/[Link] $autoload['libraries'] = array('database', 'input', 'form_validation'); $autoload['helper'] = array('url', 'form', 'utility');

[EDIT] Helper: utility_helper.php

... if (! function_exists('DMY2YMD')) { function DMY2YMD($tgl, $separator) { $arr = explode($separator, $tgl); if (count($arr)==3) { return sprintf('%s%s%s%s%s', $arr[2], $separator, $arr[1], $separator, $arr[0]); } else { return $tgl; } } }

[EDIT] Model: m_mahasiswa.php

...

function insert_data($fields) { $this->db->insert('tmst_mahasiswa', $fields); return $this->db->affected_rows(); }

[BARU] View: v_form_mahasiswa.php

... <?php echo validation_errors(); echo form_open(base_url().'mahasiswa/entry'); echo form_fieldset('Data Mahasiswa'); echo form_hidden('submitted', '1');

echo form_label('NIM*:', 'nim'); $data = array('name'=>'nim', 'id'=>'nim', 'maxlength'=>'15'); echo form_input($data);

echo form_label('Nama*:', 'nama'); $data = array('name'=>'nama', 'id'=>'nama', 'maxlength'=>'30'); echo form_input($data); ...

View: v_form_mahasiswa.php (cont.)

... echo form_label('Jenis Kelamin:', 'jk'); $data = array('name'=>'jk', 'id'=>'jk', 'value'=>'L', 'checked' => TRUE); echo 'L'.form_radio($data); $data = array('name'=>'jk', 'id'=>'jk', 'value'=>'P', 'checked' => FALSE); echo 'P'.form_radio($data);

echo form_label('Tgl Masuk (DD-MM-YYYY)*:', 'tgl_masuk'); $data = array('name'=>'tgl_masuk', 'id'=>'tgl_masuk', 'value'=> date("d-mY")); echo form_input($data);
echo form_submit('Submit', 'Submit'); echo form_fieldset_close(); echo form_close(); ?> <p><?=isset($status)?$status:''?></p> ...

[EDIT] Controller: [Link]

function entry() { $this->form_validation->set_message('required', 'Maaf, kolom %s tidak boleh dikosongkan.'); $this->form_validation->set_rules('nim', 'NIM', 'required|min_length[8]|max_length[15]|is_unique[tmst_mahasiswa.nim]'); $this->form_validation->set_rules('nama', 'Nama Mahasiswa', 'required|max_length[30]'); $this->form_validation->set_rules('tgl_masuk', 'Tanggal Masuk', 'required'); .... }

[EDIT] Controller: [Link]

function entry() { ... if ($this->form_validation->run() == FALSE) { $this->load->view('v_form_mahasiswa'); } else { $submitted = $this->input->post("submitted")?$this->input>post("submitted"):""; if ($submitted == 1) { $field['nim'] = $this->input->post("nim"); $field['nama_mahasiswa'] = $this->input->post("nama"); $field['jk'] = $this->input->post("jk"); $field['tanggal_masuk'] = $this->input->post("tgl_masuk"); $field['tanggal_masuk'] = DMY2YMD($field['tanggal_masuk'], '-'); if ($this->M_mahasiswa->insert_data($field)>0) { $data['status'] = 'Sukses'; $this->load->view('v_form_mahasiswa', $data); } else { show_error('Maaf, penambahan data gagal dilakukan.' ); } } } }

[Link]

TEMPLATE PARSER

[BARU] View: v_mahasiswa_template.php

... <title>{judul}</title> ... <table> <thead> <tr><td>No</td><td>NIM</td><td>Nama Mahasiswa</td><td>JK</td><td>Tgl Masuk</td></tr> </thead> <tbody> {mhs} <tr> <td>{nomor}</td> <td>{nim}</td> <td>{nama_mahasiswa}</td> <td>{jk}</td> <td>{tanggal_masuk}</td> </tr> {/mhs} </tbody> </table> ...

[EDIT] Controller: [Link]

... function templating(){ $q = $this->M_mahasiswa->get_all_data(); if ($q->num_rows()>0) { $m = array(); $idx = 1; foreach ($q->result_array() as $row) { $row['tanggal_masuk'] = YMD2DMY(trimTime($row['tanggal_masuk']), '-'); $m[] = array_merge(array('nomor' => $idx), $row); $idx++; } $data['mhs'] = $m; $data['judul'] = 'Data Mahasiswa'; $this->load->library('parser'); $this->parser->parse('v_mahasiswa_template', $data); } else { show_error('Sorry, no data'); } }

[Link]

Latihan 15 menit
Buat template untuk menampilkan data mahasiswa yang menggunakan paginasi

EDIT DATA

[EDIT] Controller: [Link]

...

function edit($nim='') { if ($nim=='') { show_error('Data error'); }

$data = $this->M_mahasiswa->get_data_by_nim($nim); if ($data != FALSE) { $data[is_update] = 1; $this->load->view('v_form_mahasiswa', $data); } else { show_error('Data tidak ditemukan'); }
}

[EDIT] Controller: [Link]

function entry() { ... $this->form_validation->set_rules('nim', 'NIM', 'required|min_length[8]|max_length[15]'); ... } else { $submitted = $this->input->post("submitted")?$this->input>post("submitted"):""; $is_update = $this->input->post("is_update"); if ($submitted == 1) { $field['nama_mahasiswa'] = $this->input->post("nama"); $field['jk'] = $this->input->post("jk"); $field['tanggal_masuk'] = $this->input->post("tgl_masuk"); $field['tanggal_masuk'] = DMY2YMD($field['tanggal_masuk'], '-'); ...

[EDIT] Controller: [Link]

... if ($is_update==0) { $field['nim'] = $this->input->post("nim"); $retval = $this->M_mahasiswa->insert_data($field); } else { $nim = $this->input->post("nim"); $retval = $this->M_mahasiswa->update_data($nim, $field); } if ($retval>0) { $data['status'] = 'Sukses'; $this->load->view('v_form_mahasiswa', $data); } else { show_error('Maaf, user/password Anda tidak cocok' ); } } } }

[EDIT] Model: m_mahasiswa.php

...

function get_data_by_nim($nim) { $this->db->where('nim', $nim); $q = $this->db->get('tmst_mahasiswa'); if ($q->num_rows()>0) { $r = $q->row_array(); $r['tanggal_masuk'] = YMD2DMY(trimTime($r['tanggal_masuk']), '-'); return $r; } else { return FALSE; } } function update_data($nim, $fields) { $this->db->where('nim', $nim); $this->db->update('tmst_mahasiswa', $fields); return $this->db->affected_rows(); }

[EDIT] View: v_form_mahasiswa.php

... <body> <?php echo validation_errors(); echo form_open(base_url().'mahasiswa/entry'); echo form_fieldset('Data Mahasiswa'); echo form_hidden('submitted', '1'); echo form_hidden('is_update', (isset($is_update)?$is_update:0)); echo form_label('NIM*:', 'nim'); $data = array('name'=>'nim', 'id'=>'nim', 'maxlength'=>'15', 'value' => (isset($nim)?$nim:'')); echo form_input($data); echo form_label('Nama*:', 'nama'); $data = array('name'=>'nama', 'id'=>'nama', 'maxlength'=>'30', 'value' => (isset($nama_mahasiswa)?$nama_mahasiswa:'')); echo form_input($data); ...

[EDIT] View: v_form_mahasiswa.php

... echo form_label('Jenis Kelamin:', 'jk'); $jk = isset($jk)?$jk:'L'; $data = array('name'=>'jk', 'id'=>'jk', 'value'=>'L', 'checked' => ($jk=='L'?TRUE:FALSE)); echo 'L'.form_radio($data); $data = array('name'=>'jk', 'id'=>'jk', 'value'=>'P', 'checked' => ($jk=='P'?TRUE:FALSE)); echo 'P'.form_radio($data); echo form_label('Tgl Masuk (DD-MM-YYYY)*:', 'tgl_masuk'); $data = array('name'=>'tgl_masuk', 'id'=>'tgl_masuk', 'value'=>isset($tanggal_masuk)?$tanggal_masuk:date("d-m-Y")); echo form_input($data); echo form_submit('Submit', 'Submit'); echo form_fieldset_close(); echo form_close(); ?> ...

[Link]

[EDIT] Controller: [Link]

function data($idx=0){ ... foreach ($q->result_array() as $row) { $row['tanggal_masuk'] = YMD2DMY(trimTime($row['tanggal_masuk']), '-'); $row['edit'] = anchor(base_url().'mahasiswa/edit/'.$row['nim'], 'edit'); $m[] = array_merge(array('nomor' => $idx), $row); $idx++; } ... }

[EDIT] View: v_mahasiswa_page2.php

... <table> <thead> <tr><td>No</td><td>NIM</td><td>Nama Mahasiswa</td><td>JK</td><td>Tgl Masuk</td><td>Aksi</td></tr> </thead> <tbody> {mhs} <tr><td>{nomor}</td><td>{nim}</td><td>{nama_mahasiswa}</td><td>{jk}</td><td>{t anggal_masuk}</td><td>{edit}</td></tr> {/mhs} <tr><td colspan="5"><?=$page?></td></tr> </tbody> </table> ...

[Link]

UPLOAD

Data
Buat folder uploads di dalam folder ci

Download [Link]
Import ke database ci_training Tabel: berkas Jumlah data: 0 records

[BARU] View: v_upload.php

... <?php echo form_open_multipart(base_url().'berkas/unggah'); ?> <fieldset > <legend>Unggah Berkas</legend> <?=form_hidden('submitted', '1')?> <label for='namafile' >Nama File*:</label> <?php $data = array('name'=>'namafile', 'id'=>'namafile'); echo form_upload($data); ?> <?=form_submit('Submit', 'Unggah')?> </fieldset> <?=form_close()?> <br /><?=isset($status)?$status:''?> ...

[BARU] Model: m_berkas.php

<?php defined('BASEPATH') OR exit('No direct script access allowed'); class M_berkas extends CI_Model { function __construct() { parent::__construct(); } function insert_data($fields) { $this->db->insert('berkas', $fields); return $this->db->affected_rows(); }

}
/* End of file m_berkas.php */ /* Location: ./application/models/m_berkas.php */

[BARU] Controller: [Link]

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Berkas extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('M_berkas'); } function index(){ $this->load->view('v_upload'); } } /* End of file [Link] */ /* Location: ./application/controllers/[Link] */

[EDIT] Controller: [Link]

function unggah() { $submitted = $this->input->post("submitted")?$this->input->post("submitted"):""; if ($submitted == 1) { $config['upload_path'] = './uploads/'; $config['allowed_types'] = 'gif|jpg|png'; $config['max_size'] = '100'; $config['max_width'] = '1024'; $config['max_height'] = '768'; $this->load->library('upload', $config); .... .... } else { $this->load->view('v_upload'); }

[EDIT] Controller: [Link]

... if ( ! $this->upload->do_upload('namafile')) { $data['status'] = $this->upload->display_errors(); $this->load->view('v_upload', $data); } else { $f = $this->upload->data(); $fields['namafile'] = $f['file_name']; $fields['ukuran'] = $f['file_size']; $fields['ekstensi'] = $f['file_ext']; $fields['tipe_file'] = $f['file_type'];

if ($this->M_berkas->insert_data($fields)>0) { $id_file = $this->db->insert_id(); rename( $config['upload_path'].$f['file_name'], $config['upload_path'].$id_file.$f['file_name']); $data['status'] = 'Upload data sukses.'; } else { $data['status'] = 'Upload data gagal.'; }
$this->load->view('v_upload', $data); } ...

[Link]

Kasus
Kasus gagal: Upload file dengan ekstensi selain gif, jpg dan png Upload file dengan ukuran lebih besar dari 100 Kb Upload file gambar dengan resolusi lebih besar dari 1024x768 pixel
$config['allowed_types'] $config['max_size'] $config['max_width'] $config['max_height'] = = = = 'gif|jpg|png'; '100'; '1024'; '768';

Konfigurasi Upload

Informasi Upload
$f = $this->upload->data();

Referensi
if ($this->M_berkas->insert_data($fields)>0) { $id_file = $this->db->insert_id(); rename( $config['upload_path'].$f['file_name'], $config['upload_path'].$id_file.$f['file_name'] ); $data['status'] = 'Upload data sukses.'; } else { $data['status'] = 'Upload data gagal.'; }

Jika berkas sukses di unggah dan di masukan datanya,

ganti nama berkas tersebut dengan menambahkan id didepannya. Hal ini untuk menghindari ada berkas dengan nama yang sama (padahal isi berbeda) di unggah di kemudian hari.

Latihan 10 menit
Buat fungsi untuk menampilkan data yang sudah di unggah

Gunakan template pada view!

DOWNLOAD HELPER

[EDIT] Controller: [Link]

function data($idx=0){ ... foreach ($q->result_array() as $row) { $row['tgl_input'] = YMD2DMY(trimTime($row['tgl_input']), '-'); $row['namafile'] = anchor(base_url().'uploads/'.$row['id'].$row['namafile'], $row['namafile'], array('target' => '_blank')); $row['unduh'] = anchor(base_url().'berkas/unduh/'.$row['id'], 'download'); $m[] = array_merge(array('nomor' => $idx), $row); $idx++; } ...

[EDIT] Controller: [Link]

... function unduh($id) { $namafile = $this->M_berkas->get_namafile_from_id($id); if ($namafile != FALSE) { $this->load->helper('download'); $data = file_get_contents('./uploads/'.$id.$namafile);

force_download($namafile, $data);
} }

[EDIT] Model: m_berkas.php

... function get_namafile_from_id($id) { $this->db->select('namafile'); $this->db->where('id', $id); $q = $this->db->get('berkas'); if ($q->num_rows()>0) { $r = $q->result_array(); return $r[0]['namafile']; } else { return FALSE; } }

[EDIT] View: v_berkas.php

... <tr><td>No</td><td>Namafile</td><td>Ukuran</td><td>Tipe</td><td>Tgl Input</td><td>Aksi</td></tr> ... <tr><td>{nomor}</td><td>{namafile}</td><td>{ukuran} Kb</td><td>{tipe_file}</td><td>{tgl_input}</td> <td>{unduh}</td></tr> ...

[Link]

SESSION

Session
[EDIT] application/config/[Link] $autoload['libraries'] = array('database', 'input', 'form_validation, session); [EDIT] application/config/[Link] $config['encryption_key'] = 'BEBASbebasBeBaS';

[EDIT] Controller: [Link]

function validasi() { .... $this->load->model('M_daftar_user'); if ($this->M_daftar_user->get_data($username, $password)>0) { $this->session->set_userdata('userlogin', $username); redirect(base_url().'mahasiswa/data'); } else { show_error('Maaf, user/password Anda tidak cocok' ); } ... }

[EDIT] Controller: [Link]

public function __construct() { parent::__construct(); if (!$this->session->userdata('userlogin')) { redirect(base_url().'login/validasi'); } $this->load->model('M_mahasiswa'); }

[Link]

Tentang Session
Sangat mudah menggunakan session di CI

$this->session->set_userdata(nama_sesi, nilai_sesi); $data = $this->session->userdata(nama_sesi);

Isi session adalah sbb:

[array] ( 'session_id' 'ip_address' 'user_agent' 'last_activity' 'user_data' ) => => => => => random hash, 'string - user IP address', 'string - user agent data', timestamp, array(???)

user_data adalah session yang bisa kita tambahkan

sesuai kebutuhan

Catatan: ukuran maksimal session adalah 4Kb

HEADER-FOOTER

Free Simple Template

[EDIT] application/config/[Link]

define('BASE_TEMPLATE', '[Link]

Download [Link] Ekstrak di htdocs

/asubtlegreen/

Buat folder assets di dalam ci

Selain [Link], copy semua file di folder

asubtlegreen ke dalam folder assets Buka [Link] Buka [Link] menggunakan Notepad++

[BARU] View: [Link]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link] <html xmlns="[Link] xml:lang="en" lang="en"> <head> <title>Latihan CodeIgniter</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="<?=BASE_TEMPLATE?>assets/[Link]" /> </head> <body> <div id="page"> <div id="header"> <div class="title">Latihan CodeIgniter</div> <div class="subText">A design by Bryant Smith</div> </div> <?php require_once('[Link]'); ?> <div id="pageContent">

[BARU] View: [Link]

<div id="bar"> <div class="menuLink"><?=anchor(base_url()."mahasiswa/data", "Home")?></div> <div class="menuLink"><?=anchor(base_url()."mahasiswa/entry", "Tambah")?></div> <div class="menuLink"><?=anchor(base_url()."berkas", "Unggah Berkas")?></div> <div class="menuLink"><?=anchor(base_url()."login/keluar", "Logout")?></div> </div>

[BARU] View: [Link]

</div> </div> <div id="footer"><a href="[Link] development</a> by <a href="[Link] smith</a></div> </body> </html>

[BARU] View: v_mahasiswa_page2.php

<?php require_once('[Link]'); ?> <div class="articleTitle">Data Mahasiswa</div> <div class="articleContent"> <table> ... </table> </div> <?php require_once('[Link]'); ?>

[EDIT] Controller: [Link]

function data($idx=0){ ... $data['mhs'] = $m; $data['idx'] = $idx; $data['page'] = $this->pagination->create_links(); $this->load->view('v_mahasiswa_page2', $data); } else { show_error('Sorry, no data'); } }

[EDIT] Controller: [Link]

function keluar() { $this->session->sess_destroy(); redirect(base_url().'login/validasi'); }

[Link]

Referensi: Menyertakan File Lain

include ([Link]);

Jika file itu tidak ada, maka akan muncul pesan warning, tetapi ekskusi program dibawahnya akan dilanjutkan.
Jika file itu tidak ada, maka akan muncul pesan warning dan tidak akan mengekskusi program dibawahnya. Akan melihat, apakah sudah di-include-kan atau belum, karena PHP melarang include() file yang sama lebih dari satu kali. Akan melihat, apakah sudah di-require-kan atau belum, karena PHP melarang require() file yang sama lebih dari satu kali.

require ([Link]);

include_once ([Link]);

require_once ([Link]);

Latihan 20 menit
Buat juga view dengan format header-footer untuk menu Tambah dan Unggah Berkas.

Trik
MENGHILANGKAN [Link]

Menghilangkan [Link]
URL sebelumnya: [Link] [Link] am2/dst URL sesudahnya: [Link] [Link]

Menghilangkan [Link] (cont.)

Memanfaatkan file .htaccess yang disimpan di

direktori utama aplikasi (/xampp/htdocs/ci/) Isi file .htaccess adalah sbb:

Options -Indexes

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_URI} ^system.* RewriteRule ^(.*)$ /[Link]/$1 [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ [Link]/$1 [L] </IfModule>

Menghilangkan [Link] (cont.)

Syarat utamanya adalah mengaktifkan modul

mod_rewrite di Apache. Caranya:

Edit /xampp/apache/conf/[Link] Cari baris berikut:

LoadModule rewrite_module modules/mod_rewrite.so Jika sudah tidak ada tanda pagar, berarti mod_rewrite sudah aktif.

Hapus tanda pagar (#) jika memang ada.

Simpan Restart Apache

[EDIT] application/config/[Link] $config['base_url'] = '[Link]

Trik
DYNAMIC BASE_URL

Dynamic base_url
Latar belakang: $config['base_url']

= '[Link]

Pertanyaannya: Apa yang harus Anda lakukan jika aplikasi di upload ke server lain? Atau aplikasi dipindah direktori? Jawabannya: Anda harus atur ulang base_url di aplikasi Adakah cara agar tidak perlu repot mengatur ulang

base_url tersebut?

???

Dynamic base_url (cont.)

[EDIT] application/config/[Link]
if (isset($_SERVER['HTTP_HOST'])) { $base_url = isset($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) == 'on' ? 'https' : 'http'; $base_url .= '://' . $_SERVER['HTTP_HOST']; $base_url .= str_replace(basename($_SERVER['SCRIPT_NAME']), '', $_SERVER['SCRIPT_NAME']);
// Base URI (It's different to base URL!) $base_uri = parse_url($base_url, PHP_URL_PATH); if (substr($base_uri, 0, 1) != '/') $base_uri = '/' . $base_uri; if (substr($base_uri, -1, 1) != '/') $base_uri .= '/'; } else { $base_url = '[Link] $base_uri = '/'; } ...

Dynamic base_url (cont.)

[EDIT] application/config/[Link] ... // Define these values to be used later on define('BASE_URL', $base_url); define('BASE_URI', $base_uri); define('APPPATH_URI', BASE_URI.APPPATH);
// We dont need these variables any more unset($base_uri, $base_url);

[EDIT] application/config/[Link] $config['base_url'] = BASE_URL;

Sesi 03

jQuery

jQuery
Merupakan pustaka (library) javascript,

sama dengan Prototype, YUI, Dojo, mooTools, dsb Lebih mudah menulis kode jQuery dibanding dengan Javascript murni Extremely succinct Cepat dipelajari

jQuery vs Javascript murni

Menyembunyikan semua div dengan JavaScript

divs = [Link](div); for (i = 0; i < [Link]; i++) { divs[i].[Link] = none; }

Menyembunyikan semua div dengan jQuery
$(div).hide();

Referensi Javascript
HTML terikat ke Javascript Filosofi jQuery: 1. Cari suatu elemen HTML 2. Lakukan sesuatu terhadap elemen HTML tersebut

jQuery: #1 Cari suatu elemen HTML

Gunakan selector $() $(elemen) $(#idElemen) $(.kelasElemen)

Contoh Penggunaan Selector

$(div) cari semua elemen div $(.menuLink) cari semua elemen dengan kelas menuLink $(#nama) cari semua elem dengan id nama $(li:first) cari list item (<li></li>) pertama $(tr:odd) cari table rows (<tr></tr>) dengan nomor ganjil $(form[id^=step]) cari semua form yang id-nya diawali dengan kata step $(a[target=_blank]) cari semua link yang isi atribut target-nya _blank $(div, #nama, li:first) gabungan 3 kriteria

jQuery: #2 Lakukan sesuatu terhadap elemen tsb

$(elemen).method(<sesuatu>); $(elemen).method(<sesuatu>).method(); Chain methods!!! One Method, Many Uses $(...).html(); $(...).html(<p>hello</p>); $(...).html(function(i){ return <p>hello + i + </p>; });

Beberapa Method jQuery

Moving Elements:

append(), appendTo(), before(), after(), css(), attr(), html(), val(), addClass()

Attributes

Traversing

find(), is(), prevAll(), next(), hasClass()

bind(), trigger(), unbind(), live(), click()

Events

Ajax

get(), getJSON(), post(), ajax(), load()

show(), fadeOut(), toggle(), animate()

Effects

INSTALASI JQUERY

Instalasi jQuery
URL: [Link]

Klik kanan link Download the uncompressed,

development jQuery 1.9.1, kemudian lakukan Save link as ke direktori \ci\assets\

<script type="text/javascript" src=[Link]

DOCUMENT READY

Memulai jQuery
<script type="text/javascript"> $(document).ready(function() { //kode javascript Anda }); </script>

atau
<script type="text/javascript"> $(function() { //kode javascript Anda }); </script>

CODING JQUERY

[EDIT] View: v_login3.php

... <script type="text/javascript" src=[Link] <script type="text/javascript"> $(function() { alert(DOM ready); $("label[for=username]").css("color", "red"); $("label[for=password]").css("color", "#00FF00"); }); </script> </body> </html>

[Link]

Referensi
DOM (Document Object Model) : suatu objek model

standar yang dikeluarkan W3C untuk mengakses dan memanipulasi HTML.

EVENTS

[EDIT] Controller: [Link]

...

function klik() { $this->load->view('v_jquery'); }

[BARU] View: v_jquery.php

... <body> <?php $data = array('name'=>'btn_1', 'id'=>'btn_1'); echo form_button($data, ' Tes 1 '); ?> <script type="text/javascript" src="[Link] <script type="text/javascript"> $(function(){ $("button").click(function(){ var teks = $(this).text(); alert('Tombol "'+teks+'" diklik.'); }); }); </script> </body> </html>

[Link]

[EDIT] View: v_jquery.php

... <body> <?php $data = array('name'=>'btn_1', 'id'=>'btn_1'); echo form_button($data, ' Tes 1 '); $data = array('name'=>'btn_2', 'id'=>'btn_2'); echo form_button($data, ' Tes 2 '); ?>

[Link]

[EDIT] View: v_jquery.php

... <script type="text/javascript"> $(function(){ $(#btn_1").click(function(){ var teks = $(this).text(); alert('Tombol "'+teks+'" diklik.'); }); }); </script>

[Link]

Daftar Event

AJAX

AJAX
AJAX = Asynchronous JavaScript and XML. AJAX bukanlah bahasa pemrograman baru, tetapi

merupakan teknik baru dalam menggunakan standar yang ada.

AJAX merupakan seni dalam pertukaran data

dengan server, dan mengubah beberapa bagian pada suatu halaman web, tanpa me-reload keseluruhan isi web.

AJAX (cont.)
jQuery $.ajax()
$.get() $.getJSON() $.post() $.load()

[EDIT] View: v_jquery.php

... <body> <?php $data = array('name'=>'btn_1', 'id'=>'btn_1'); echo form_button($data, ' Tes 1 '); $data = array('name'=>'btn_2', 'id'=>'btn_2'); echo form_button($data, ' Tes 2 '); ?> <div id="myDiv"><h2>Teks ini akan berubah jika tombol di klik.</h2></div> <?php $data = array('name'=>'btn_ajax', 'id'=>'btn_ajax'); echo form_button($data, ' Ubah Teks '); ?> ...

[EDIT] View: v_jquery.php

... <script type="text/javascript"> $(function(){ ... $("#btn_ajax").click(function(){ $.ajax({ type: "POST", url: "<?=base_url()?>welcome/get_info", data: "param=1", success: function(msg){ $("#myDiv").html(msg); } }); });

}); </script>
...

[EDIT] Controller: [Link]

...

function get_info() { echo "<b>BERUBAH!!!</b> 1...2...3..."; }

[Link]

[EDIT] View: v_jquery.php

... <div id="myDiv"><h2>Teks ini akan berubah jika tombol di klik.</h2></div> <?php $data = array('name'=>'btn_ajax', 'id'=>'btn_ajax'); echo form_button($data, ' Ubah Teks '); ?> <h2>Get Info Mahasiswa</h2> <?php $data = array('name'=>'nim', 'id'=>'nim'); echo form_input($data, ''); $data = array('name'=>'btn_getInfo', 'id'=>'btn_getInfo'); echo form_button($data, ' Get Info '); ?> <div id="divMhs style="background-color: #af44bb;"></div> ...

[EDIT] Model: m_mahasiswa.php

...

function get_data_by_nim($nim) { $this->db->where('nim', $nim); $q = $this->db->get('tmst_mahasiswa'); if ($q->num_rows()>0) { $r = $q->row_array(); $r['tanggal_masuk'] = YMD2DMY(trimTime($r['tanggal_masuk']), '-'); return $r; } else { return FALSE; } }

[EDIT] View: v_jquery.php

... <script type="text/javascript"> $(function(){ ... $("#divMhs").hide(); $("#btn_getInfo").click(function(){ var nim = $("#nim").val(); $.post("<?=base_url()?>welcome/get_info_mhs", {nim: nim}, function(msg){ $("#divMhs").hide(); if (msg!='') { $("#divMhs").html('NIM '+nim+' adalah milik '+msg); } else { $("#divMhs").html('NIM '+nim+' tidak terdaftar.'); } $("#divMhs").slideDown("slow"); } ); }); }); </script>

[EDIT] Controller: [Link]

...

function get_info_mhs() { $nim = $this->input->post('nim')?$this->input->post('nim'):''; if ($nim!='') { $this->load->model('M_mahasiswa'); $data = M_mahasiswa::get_data_by_nim($nim); if ($data != FALSE) { echo $data['nama_mahasiswa']; } else { echo ''; } } }

[Link]

[EDIT] View: v_jquery.php

... <h2>Get Info Mahasiswa</h2> <?php $data = array('name'=>'nim', 'id'=>'nim'); echo form_input($data, ''); $data = array('name'=>'btn_getInfo', 'id'=>'btn_getInfo'); echo form_button($data, ' Get Info '); ?> <div id="divMhs" style="background-color: #af44bb;"></div> <h2>Cari Mahasiswa</h2> <?php $data = array('name'=>'nama', 'id'=>'nama'); echo form_input($data, ''); ?> <div id="divNamaMhs"></div>

[EDIT] View: v_jquery.php

... $("#nama").keyup(function(e){ var nama = $(this).val(); $.ajax({ type: "POST", url: "<?=base_url()?>welcome/get_nama_mhs", data: "nama="+nama, success: function(msg){ $("#divNamaMhs").html(msg); } }); }); ...

[EDIT] Model: m_mahasiswa.php

...

function get_nama($nama) { $this->db->select('nama_mahasiswa'); $this->db->order_by('nama_mahasiswa', 'asc'); $this->db->like('nama_mahasiswa', $nama, 'after'); return $this->db->get('tmst_mahasiswa'); }

[EDIT] Controller: [Link]

...

function get_nama_mhs() { $nama = $this->input->post('nama')?$this->input->post('nama'):''; if ($nama!='') { $this->load->model('M_mahasiswa'); $q = M_mahasiswa::get_nama($nama); $retval = ''; foreach ($q->result_array() as $r) { $retval .= $r['nama_mahasiswa'] . '<br />'; } echo $retval; } }

[Link]

EFFECT

Jenis Efek
Hide and Show .hide() .show() Fade In and Out .fadeIn() .fadeOut() .fadeTo() Slide Up and Down .slideUp() .slideDown() .slideToggle()

[BARU] View: v_slide.php

<!DOCTYPE html> <html> <head> <style type="text/css"> #panel, #flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> ...

[BARU] View: v_slide.php

... <div id="flip">Klik panel ini untuk buka/tutup</div> <div id="panel">Hello!<br /><br />Ini adalah demo menggunakan efek slideToggle().</div> <script type="text/javascript" src="[Link] <script type="text/javascript"> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> </body> </html>

[EDIT] Controller: [Link]

...

function slide() { $this->load->view('v_slide'); }

[Link]

Referensi

 [Link]

[Link]
[Link] [Link]