CodeIgniter jQuery

MENGGUNAKAN CODEIGNITER DAN JQUERY

WAS-01 | Pemrograman PHP

Sesi 01

PreRequisite

Sebelum Memulai...

WebserverWebprogramming PHP+HTMLOOP (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.

http://www.webdevelopersnotes.com/basics/what_is_web_server.php

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

(Linux)Microsoft's Internet Information Services (IIS)

Windows ServerNginx 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 Nama variabel boleh sepanjang apapun, akan tetapi lebih baik jika nama

itu simple dan bermakna. Misal: $tempat_dan_tanggal_lahir

Nama variabel hanya boleh dibentuk dari alphabet, angka dan underscore. Misal: $data1_a

Nama variabel boleh diawali alphabet atau underscore tapi tidak boleh angka. Misal: $3bersaudara, $2wanita, $1lelaki

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.)

Percabanganif (kondisi) { ... } [ else { ... } ]if (kondisi) { ... } elseif { ... } [ else { ... } ]switch (ekspresi) { case ‘nilai_ekspresi_1’: ....; break; case ‘nilai_ekspresi_2’: ....; break; case ‘nilai_ekspresi_3’: ....; break; ... case ‘nilai_ekspresi_n’: ....; break; default: ...; [ 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 / Pengulanganwhile (kondisi) { ... }do { ... } while (kondisi);for (nilaiAwal; kondisi; increment) { ... }foreach (array_expression as $value) { ... }foreach (array_expression as $key => $value) { ... }

PHP (cont.)

Fungsifunction 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

ClassObjekPropertyMethodConstructor / Destructor

OOP (cont.)

Sumber: http://www.4guysfromrolla.com/webtech/chapters/BuildASPNETWebSite/ch02.2.shtml

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 mobilEncapsulation

Merupakan suatu proteksi terhadap member kelas agar tidak dapat diakses atau diubah dari luar kelas.

Contoh: property saldo pada kelas rekeningPolymorphism

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

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

http://localhost/phpmyadmin

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 and Time

DATE, TIME, DATETIME, TIMESTAMP, dan YEAR

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)

Web Programmer ≠ Web Designer

Framework

Evolusi Pengembangan Web

index.php

about.php news.php links.php contact.phpproduct.php


index.php

page.php

header.php

news.php

footer.php

Setiap bagian yang umum dipecah menjadi beberapa bagian


index.php

Controller

Model

View

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 (views/showProduct.php)<html>

<body><p>Product Count:<?=$count?></p></body>

</html>

Controller (controllers/product.php)function showProduct($id) {

$this->load->model(“product”);$count = $this->product->getCount($id);$data[‘count’] = $count;$this->load->view(“showProduct”, $data);

}

Model (models/product.php)function getCount($id) {

$this->db->where(“id”, $id);$this->db->from(“my_product”);$query = $this->db->get();return $query->num_rows();

}

View

Controller

Model

Beberapa Framework

Kenapa CodeIgniter?

GratisRingan & CepatMenggunakan M-V-CMemiliki pustaka yang lengkapTerdokumentasi dengan baikKomunitas berkembang pesat

Instalasi CodeIgniter

Download http://ellislab.com/codeigniter/download

Unzip file CodeIgniter_2.1.3.zip ke DocumentRoot webserver (/xampp/htdocs/)

Rename folder “CodeIgniter_2.1.3” menjadi “ci”

Edit application/config/config.php application/config/database.php

Buka http://localhost/ci/index.php

http://ellislab.com/codeigniter/download

http://ellislab.com/codeigniter/download

Application Flow of CodeIgniter

URL pada CodeIgniter

http://localhost/news.php?mode=edit&id=10

http://localhost/index.php/news/edit/10

Struktur Direktori

applicationsystemuser_guideindex.php

Front controller yang bergfungsi menginisiasi

segala sumber daya yang dibutuhkan untuk

menjalankan CodeIgniter

Tempat kita menyimpan coding aplikasi

Core dari framework CodeIgniter

Struktur Direktori Aplikasi

Config -> konfigurasi aplikasiControllers -> tempat menyimpan ControllerErrors -> CI error messageHelpers -> tempat menyimpan HelpersLibraries -> tempat menyimpan LibrariesLanguage -> jika menggunakan multi bahasaModels -> tempat menyimpan ModelViews -> tempat menyimpan View

Membangun Aplikasi

Konfigurasi

Edit file application/config/config.php $config['base_url'] = 'http://localhost/ci/index.php/';

Buka http://localhost/ci/index.php application/controllers/welcome.php application/views/welcome_message.php

Default controller: application/config/routes.php

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

Alternatif: http://localhost/ci/index.php/welcome http://localhost/ci/index.php/welcome/index

http://localhost/ci/index.php

http://localhost/ci/index.php

http://localhost/ci/index.php/welcome

http://localhost/ci/index.php/welcome/index

http://localhost/ci/index.php/welcome/index

Latihan 10 menit

Modifikasi bebas view welcome_message.php

Controller

[BARU] application/controllers/about.php

<?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 about.php *//* Location: ./application/controllers/about.php */

http://localhost/ci/index.php/about

View

[BARU] application/views/v_about.php

<html><title> View Pertama</title><body> <h1>About me</h1></body></html>

Controller

[EDIT] application/controllers/about.php

...class About extends CI_Controller {

public function __construct() { parent::__construct();

}

function index(){ echo "About Me";}

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

}...

http://localhost/ci/index.php/about/me

Controller -> View


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

function person() {$data = array( ‘nama’ => ‘Kenggo’, ‘email’ => ‘[email protected]’);$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>

http://localhost/ci/index.php/about/person

Controller -> View


...function person() {$data = array( ‘nama’ => ‘Kenggo’, ‘email’ => ‘[email protected]’);$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);}

}...

http://localhost/ci/index.php/about/post/Yuki/yuki%40gmail.com

Referensi

http://localhost/ci/index.php/about/post/Yuki/yuki%40gmail.com

yuki%40gmail.com = urlencode(‘[email protected]’); [email protected] = urldecode(‘yuki%40gmail.com’); Beberapa karakter khusus tidak boleh dilewatkan ke URL

http://localhost/ci/index.php/about/post/Yuki/[email protected]

http://localhost/ci/index.php/about/post/Yuki/[email protected]

PHP Closing Tag

INCORRECT:<?php

echo "Here's my code!";

?>

CORRECT:<?php

echo "Here's my code!";

/* End of file myfile.php *//* Location: ./system/modules/mymodule/myfile.php */

Latihan 15 menit

Modifikasi bebas :

- about.php

- 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' => '[email protected]');

}

}

/* End of file m_about.php */ /* Location: ./application/models/m_about.php */

Controller


...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);}

}...

http://localhost/ci/index.php/about/get_person

• Buka phpMyAdmin• Buat database “ci_training”• Buat tabel “person” sbb:

• Isi dengan data sbb:

Buat db & tabel

• [EDIT] application/config/database.php• $db['default']['hostname'] = 'localhost';• $db['default']['username'] = 'root';• $db['default']['password'] = ‘password';• $db['default']['database'] = 'ci_training';• $db['default']['dbdriver'] = 'mysql';

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

Configurasi

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


...function get_person($id) {

$this->load->model('M_about');$data = $this->M_about->get_data($id);$this->load->view('v_about_person', $data);

}

}...

http://localhost/ci/index.php/about/get_person/1

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

DatabaseFile UploadingPaginationInput and Security (SQL Injection)SessionForm Validationdll

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/login.php


class Login extends CI_Controller {public function __construct() {


function index(){$this->load->view('v_login');

}

}

/* End of file login.php *//* Location: ./application/controllers/login.php */

http://localhost/ci/index.php/login

Error? Blank?

[EDIT] application/views/v_login.php

…<body>

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

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

…


base_url()

Isi dari base_url() sesuai dengan konfigurasi di application/config/config.php $config['base_url'] = 'http://localhost/ci/index.php/';

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/login.php


class Login extends CI_Controller {public function __construct() {


function index(){$this->load->view('v_login2');

}

}

/* End of file login.php *//* Location: ./application/controllers/login.php */


Autoload Helper

• [EDIT] application/config/autoload.php• $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_open_multipart(

)form_hidden()form_input()form_upload()form_textarea()form_dropdown()form_multiselect()form_fieldset()

form_fieldset_close()form_checkbox()form_radio()form_submit()form_label()form_reset()form_button()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: login.php

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>

<?phpecho validation_errors();echo form_open(base_url().'login/validasi');?>...

Tes Validasi

URL: http://localhost/ci/index.php/login/validasi

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

http://localhost/ci/index.php/login/validasi



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.phpGanti teks “UserName*” menjadi “Nama User*”Ganti teks “Password*” menjadi “Kata Kunci*”

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

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

'required');


Rule Validasi

PAGINATION

Data

Download http://167.205.108.215/ci/mhs.sqlImport ke database “ci_training”

Tabel: tmst_mahasiswa Jumlah data: 30 records

http://xxxx/ci/mhs.sql



[BARU] Model: m_mahasiswa.php


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: mahasiswa.php

...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>...

http://localhost/ci/index.php/mahasiswa

[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: mahasiswa.php

...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>...

http://localhost/ci/index.php/mahasiswa/data

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 tabel2.id=tabel1.id;

$this->db->from(‘tabel1’);$this->db->join(‘tabel2’, ‘tabel2.id=tabel1.id’);$q = $this->db->get();

Latihan 15 menit

Buat fungsi pada model untuk menghitung jumlah semua record pada tabel tmst_mahasiswa

Isikan jumlah record yang dihasilkan tersebut ke baris $config['total_rows'] = 30; pada controller mahasiswa.php

[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> ...


FORM ENTRY

Form Entry Mahasiswa

[EDIT] application/config/autoload.php $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; } }}


...

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

}

[BARU] View: v_form_mahasiswa.php...<?phpecho 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-m-Y"));echo form_input($data);


echo form_fieldset_close();echo form_close();?><p><?=isset($status)?$status:''?></p>...


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');

.... }

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>...


...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'); }}

http://localhost/ci/index.php/mahasiswa/templating

Latihan 15 menit

Buat template untuk menampilkan data mahasiswa yang menggunakan paginasi

EDIT DATA


...

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'); } }


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'], '-');...


... 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' ); } } } }


...

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><?phpecho 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_fieldset_close();echo form_close();?>...

http://localhost/ci/index.php/mahasiswa/edit/20709302


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>{tanggal_masuk}</td><td>{edit}</td></tr> {/mhs} <tr><td colspan="5"><?=$page?></td></tr> </tbody></table>...


UPLOAD

Data

Buat folder “uploads” di dalam folder “ci”Download http://167.205.108.215

/ci/berkas.sqlImport ke database “ci_training”

Tabel: berkas Jumlah data: 0 records




[BARU] View: v_upload.php

...<?phpecho 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


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: berkas.php


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 berkas.php *//* Location: ./application/controllers/berkas.php */

[EDIT] Controller: berkas.php

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'); }}


...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);}...

http://localhost/ci/index.php/berkas/unggah

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'] = 'gif|jpg|png';$config['max_size'] = '100';$config['max_width'] = '1024';$config['max_height'] = '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


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++; }...


...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>...

http://localhost/ci/index.php/berkas/data

SESSION

Session

[EDIT] application/config/autoload.php $autoload['libraries'] = array('database', 'input',

'form_validation‘, ‘session’);[EDIT] application/config/config.php

$config['encryption_key'] = 'BEBASbebasBeBaS';


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


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' => random hash, 'ip_address' => 'string - user IP address', 'user_agent' => 'string - user agent data', 'last_activity' => timestamp, 'user_data' => 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/constants.php define('BASE_TEMPLATE', 'http://localhost/ci/');

Download http://167.205.108.215/ci/asubtlegreen.zip

Ekstrak di htdocs /asubtlegreen/

Buat folder “assets” di dalam “ci”Selain “index.html”, copy semua file di folder

“asubtlegreen” ke dalam folder “assets”Buka http://localhost/asubtlegreen/ Buka “index.html” menggunakan Notepad++

http://xxxx/ci/asubtlegreen.zip



http://localhost/asubtlegreen/

[BARU] View: header.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"><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/asubtlegreen.css" /></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('menu.php'); ?>

<div id="pageContent">

[BARU] View: menu.php

<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: footer.php

</div></div> <div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div> </body></html>

[BARU] View: v_mahasiswa_page2.php

<?php require_once('header.php');?>

<div class="articleTitle">Data Mahasiswa</div><div class="articleContent">

<table>...</table>

</div>

<?php require_once('footer.php');?>


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'); }}


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


Referensi: Menyertakan File Lain

include (‘file.php’); Jika file itu tidak ada, maka akan muncul pesan warning, tetapi

ekskusi program dibawahnya akan dilanjutkan. require (‘file.php’);

Jika file itu tidak ada, maka akan muncul pesan warning dan tidak akan mengekskusi program dibawahnya.

include_once (‘file.php’); Akan melihat, apakah sudah di-include-kan atau belum, karena

PHP melarang include() file yang sama lebih dari satu kali.require_once (‘file.php’);

Akan melihat, apakah sudah di-require-kan atau belum, karena PHP melarang require() file yang sama lebih dari satu kali.

Latihan 20 menit

Buat juga view dengan format header-footer untuk menu “Tambah” dan “Unggah Berkas”.

MENGHILANGKAN INDEX.PHP

Trik

Menghilangkan index.php

URL sebelumnya: http://www.alamat.website/index.php/controller/ http://

www.alamat.website/index.php/controller/param1/param2/dst

URL sesudahnya: http://www.alamat.website/controller/ http://

www.alamat.website/controller/param1/param2/dst

http://www.alamat.website/index.php/controller/

http://www.alamat.website/index.php/controller/param1/param2/dst








Menghilangkan index.php (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 OnRewriteCond %{REQUEST_URI} ^system.*RewriteRule ^(.*)$ /index.php/$1 [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ index.php/$1 [L]</IfModule>

Menghilangkan index.php (cont.)

Syarat utamanya adalah mengaktifkan modul mod_rewrite di Apache. Caranya: Edit /xampp/apache/conf/httpd.conf Cari baris berikut:

LoadModule rewrite_module modules/mod_rewrite.so Hapus tanda pagar (#) jika memang ada.

Jika sudah tidak ada tanda pagar, berarti mod_rewrite sudah aktif.

Simpan Restart Apache

[EDIT] application/config/config.php $config['base_url'] = 'http://localhost/ci/';

DYNAMIC BASE_URL

Trik

Dynamic base_url

Latar belakang: $config['base_url'] = 'http://localhost/ci/';

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/constants.php

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 = 'http://localhost/'; $base_uri = '/';}...

Dynamic base_url (cont.)

[EDIT] application/config/constants.php ...// Define these values to be used later ondefine('BASE_URL', $base_url);define('BASE_URI', $base_uri);define('APPPATH_URI', BASE_URI.APPPATH);

// We dont need these variables any moreunset($base_uri, $base_url);

[EDIT] application/config/config.php $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 succinctCepat dipelajari

jQuery vs Javascript murni

Menyembunyikan semua div dengan JavaScript

divs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}

Menyembunyikan semua div dengan jQuery

$(“div”).hide();

Referensi Javascript

HTML terikat ke JavascriptFilosofi jQuery:

1. Cari suatu elemen HTML2. 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(),

Attributes css(), attr(), html(), val(), addClass()

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

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

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

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

INSTALASI JQUERY

Instalasi jQuery

URL: http://jquery.com/download/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=“http://localhost/ci/assets/jquery-1.9.1.js"></script>

http://jquery.com/download/

http://jquery.com/download/

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=“http://localhost/ci/assets/jquery-1.9.1.js"></script><script type="text/javascript">$(function() { alert(“DOM ready”); $("label[for=username]").css("color", "red"); $("label[for=password]").css("color", "#00FF00");}); </script>

</body></html>


Referensi

DOM (Document Object Model) : suatu objek model standar yang dikeluarkan W3C untuk mengakses dan memanipulasi HTML.

EVENTS

[EDIT] Controller: welcome.php

...

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="http://localhost/ci/assets/jquery-1.9.1.js"></script><script type="text/javascript"> $(function(){ $("button").click(function(){ var teks = $(this).text(); alert('Tombol "'+teks+'" diklik.'); }); });</script>

</body></html>

http://localhost/ci/index.php/welcome/klik

[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 '); ?>



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


Daftar Event

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()


...<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 '); ?>

...


...<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>

...


...

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



...<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>...


...

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>


...

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 ''; } }}



...<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>


... $("#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); } }); });

...


...

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');}


...

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; }}


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="http://localhost/ci/assets/jquery-1.9.1.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); });});</script>

</body></html>


...

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

http://localhost/ci/index.php/welcome/slide

Referensi

http://ellislab.com/codeigniterhttp://jquery.com/http://www.visualjquery.com/http://www.w3schools.com

http://ellislab.com/codeigniter

http://ellislab.com/codeigniter

http://jquery.com/

http://jquery.com/

http://www.visualjquery.com/

http://www.visualjquery.com/

http://www.w3schools.com/

http://www.w3schools.com/

CodeIgniter jQuery

Documents

Transcript of CodeIgniter jQuery