CodeIgniter Jquery

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

index.php
about.php
news.php
product.php
links.php
contact.php

header.php
news.php
index.php
page.php footer.php
Setiap bagian yang umum dipecah menjadi beberapa bagian
Controller
index.php
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/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(); }
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 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
Application Flow of CodeIgniter
URL pada CodeIgniter
http://localhost/news.php?mode=edit&id=10
http://localhost/index.php/news/edit/10
Struktur Direktori
application
system
user_guide index.php
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/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
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 => kenggo.cat@gmail.com ); $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

[EDIT] application/controllers/about.php ...
function person() { $data = array( nama => Kenggo, email => kenggo.cat@gmail.com ); $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(yuki@gmail.com); yuki@gmail.com = urldecode(yuki%40gmail.com); 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 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' => 'miu@gmail.com'); } } /* End of file m_about.php */ /* Location: ./application/models/m_about.php */
Controller
[EDIT] application/controllers/about.php ...
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
Buat db & tabel

Buka phpMyAdmin Buat database ci_training Buat tabel person sbb:
Isi dengan data sbb:
Configurasi
[EDIT] application/config/database.php $db['default']['hostname'] = $db['default']['username'] = $db['default']['password'] = $db['default']['database'] = $db['default']['dbdriver'] = 'localhost'; 'root'; password'; 'ci_training'; 'mysql';
[EDIT] application/config/autoload.php $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
...
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
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/login.php
class Login extends CI_Controller { public function __construct() { parent::__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() { parent::__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_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: 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> <?php echo validation_errors(); echo form_open(base_url().'login/validasi'); ?> ...

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: http://localhost/ci/index.php/login/validasi
Kasus: User/Password dikosongkan User/Password diisi data salah User/Password diisi data valid

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/login.php
$this->form_validation->set_rules('username', 'Nama User',
'required'); $this->form_validation->set_rules('password', 'Kata Kunci', 'required');

http://localhost/ci/index.php/login/validasi
Rule Validasi
PAGINATION
Data
Download http://167.205.108.215/ci/mhs.sql
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: 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();
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 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> ...
http://localhost/ci/index.php/mahasiswa/data
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

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

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

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.' ); } } } }
http://localhost/ci/index.php/mahasiswa/entry
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> <?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(); ?> ...
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>{t anggal_masuk}</td><td>{edit}</td></tr> {/mhs} <tr><td colspan="5"><?=$page?></td></tr> </tbody> </table> ...
http://localhost/ci/index.php/mahasiswa/data
UPLOAD
Data
Buat folder uploads di dalam folder ci
Download http://167.205.108.215/ci/berkas.sql
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: berkas.php

<?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 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'] $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

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

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

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' '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/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++
[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.
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 (file.php);
include_once (file.php);
require_once (file.php);
Latihan 20 menit
Buat juga view dengan format header-footer untuk menu Tambah dan Unggah Berkas.
Trik
MENGHILANGKAN INDEX.PHP
Menghilangkan index.php
URL sebelumnya: http://www.alamat.website/index.php/controller/ http://www.alamat.website/index.php/controller/param1/par am2/dst URL sesudahnya: http://www.alamat.website/controller/ http://www.alamat.website/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 On RewriteCond %{REQUEST_URI} ^system.* RewriteRule ^(.*)$ /index.php/$1 [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ 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 Jika sudah tidak ada tanda pagar, berarti mod_rewrite sudah aktif.
Hapus tanda pagar (#) jika memang ada.
Simpan Restart Apache
[EDIT] application/config/config.php $config['base_url'] = 'http://localhost/ci/';
Trik
DYNAMIC BASE_URL
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 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/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 succinct Cepat 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 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: 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>
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/jquery1.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/jquery1.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
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; } }

... <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/jquery1.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/codeigniter
http://jquery.com/
http://www.visualjquery.com/ http://www.w3schools.com

CodeIgniter Jquery

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CodeIgniter Jquery

Hochgeladen von

Copyright:

Verfügbare Formate

WAS-01 | Pemrograman PHP

MENGGUNAKAN CODEIGNITER DAN JQUERY

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

Microsoft's Internet Information Services (IIS) Windows

Menggunakan console (command line) Menggunakan phpMyAdmin

Date and Time

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.

Web Programming vs Web Designing

Web Programming vs Web Designing

Evolusi Pengembangan Web

Evolusi Pengembangan Web

Setiap bagian yang umum dipecah menjadi beberapa bagian

Evolusi Pengembangan Web

Ringan & Cepat

Terdokumentasi dengan baik

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

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

Application Flow of CodeIgniter

URL pada CodeIgniter

Tempat kita menyimpan coding aplikasi Core dari framework CodeIgniter

Struktur Direktori Aplikasi

Controllers -> tempat menyimpan Controller

Libraries -> tempat menyimpan Libraries

Views -> tempat menyimpan View

Default controller: application/config/routes.php

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

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

Controller -> View

Controller -> View

PHP Closing Tag

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

Buat db & tabel

Isi dengan data sbb:

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

Buat fungsi get_email_by_nama() di model m_about.php

FORM DAN DATABASE

Form dan Database

Insert data sbb:

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

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

[EDIT] Controller: login.php

[EDIT] Controller: login.php

[EDIT] Controller: login.php

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

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

[BARU] Model: m_mahasiswa.php

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

[BARU] Controller: mahasiswa.php

[BARU] View: v_mahasiswa.php

[EDIT] Model: m_mahasiswa.php

[EDIT] Controller: mahasiswa.php

[BARU] View: v_mahasiswa_page.php

Buat fungsi pada model

[BARU] Helper: utility_helper.php

[EDIT] View: v_mahasiswa_page.php

Form Entry Mahasiswa

[EDIT] Helper: utility_helper.php

[EDIT] Model: m_mahasiswa.php

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

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

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