Modul Praktikum Desain dan Pengolahan Web

Jurusan Sistem Informasi

Penyusun:• Kiswono Prayogo, S.Kom.

Universitas Pelita Harapan Surabaya

2011

1

Daftar IsiDaftar Revisi...................................................................................6Bab 1: Pengantar.............................................................................7

Tujuan........................................................................................7Framework.................................................................................7CodeIgniter................................................................................9Instalasi CodeIgniter................................................................10Flowchart CodeIgniter.............................................................11Mode View Controller..............................................................11Search Engine Friendly............................................................11Controller.................................................................................12View.........................................................................................13Model.......................................................................................13Helper.......................................................................................13Library......................................................................................14Auto-Loading...........................................................................15Global Functions......................................................................15Routing dan URI......................................................................16Caching....................................................................................16Profiling dan Benchmark.........................................................16Post, Get, Cookie and Global Variables...................................17Session.....................................................................................18Latihan.....................................................................................18

Bab 2: CI Libraries.......................................................................19Tujuan......................................................................................19Calendar Library......................................................................19Shopping Cart Library.............................................................20Config Library.........................................................................21Database Library......................................................................22Active Record Library.............................................................24Transaction...............................................................................26Database Metadata...................................................................26Query Caching.........................................................................27Database Forge Library............................................................27Database Utility Library..........................................................28

2

Email Library...........................................................................28Encryption Library...................................................................29File Upload Library..................................................................30Form Validation Library...........................................................31FTP Library..............................................................................33HTML Table Library................................................................34Output Library.........................................................................34Pagination Library...................................................................35Zip Encoding Library...............................................................36Library-library Lainnya...........................................................36Latihan.....................................................................................37

Bab 3: CI Helper...........................................................................38Tujuan......................................................................................38Helper.......................................................................................38Array Helper............................................................................38Cookie Helper..........................................................................38Date Helper..............................................................................39Directory Helper......................................................................40Download Helper.....................................................................40Email Helper............................................................................40File Helper...............................................................................40Form Helper.............................................................................41HTML Helper...........................................................................42Path Helper...............................................................................42Security Helper........................................................................42Simley Helper..........................................................................43String Helper............................................................................43Text Helper...............................................................................44Typography..............................................................................45URL helper...............................................................................45XML Helper.............................................................................45Latihan.....................................................................................46

Bab 4: JQuery...............................................................................47Tujuan......................................................................................47JQuery......................................................................................47Plugins......................................................................................48Core..........................................................................................49

3

Selector....................................................................................49Attribute...................................................................................53Tranversal.................................................................................54Manipulation............................................................................56Event........................................................................................58Effect........................................................................................60Utilities.....................................................................................62AJAX.......................................................................................63UI.............................................................................................65Latihan.....................................................................................65

Bab 5: HTML5.............................................................................66Tujuan......................................................................................66HTML5....................................................................................66New Markup............................................................................67Form.........................................................................................69Video........................................................................................71Audio........................................................................................72Web Storage.............................................................................72Web Workers............................................................................73Offline Web Application .........................................................73Geolocation..............................................................................73Canvas......................................................................................73Latihan.....................................................................................79

Bab 6: CSS3..................................................................................80Tujuan......................................................................................80CSS3........................................................................................80Unit..........................................................................................80Font..........................................................................................80Aural........................................................................................81Selector....................................................................................81Color........................................................................................82Animation................................................................................84Background..............................................................................84Borders.....................................................................................85Box Model...............................................................................85Color........................................................................................85Content.....................................................................................85

4

Flexible Box.............................................................................86Font..........................................................................................86Generated Content...................................................................86Grid..........................................................................................87Hyperlink.................................................................................87Linebox....................................................................................87Marquee...................................................................................87Multi-column...........................................................................87Paged Media.............................................................................88Ruby.........................................................................................88Speech......................................................................................88Text...........................................................................................882D/3D Transform.....................................................................89Transition.................................................................................89User Interface...........................................................................90Latihan.....................................................................................90

Daftar Referensi............................................................................91

5

Daftar Revisi

2011-07-07 Kiswono Prayogo / Draft 1

2011-08-12 Kiswono Prayogo / Draft 2

6

Bab 1: Pengantar

Tujuan

Praktikan mampu mengetahui kegunaan framework, cara penggunaan codeigniter, dan struktur dasar framework code-igniter.

Framework

Web application framework merupakan sebuah kerangka kerja yang dapat membantu pembuatan website secara dinamis, aplikasi web maupun web service. Framework tersebut umumnya menggunakan arsitektur MVC (Model View Controller). Berikut ini adalah fitur-fitur umum sebuah web application framework:

• template, bagian view dalam MVC, yaitu bagian statis beserta kode-kode sederhana untuk membuat tampilan

• caching, bagian untuk mempercepat response dari tiap request user

• security, bagian keamanan, biasanya dalam hal SQL injection

• database mapping, bagian model dalam MVC, yaitu bagian abstraksi database

• url mapping, bagian pemrosesan URL sebelum masuk ke controller bertujuan untuk memudahkan pembacaan URL (SEF, search engine friendly)

• ajax, untuk membuat website yang interaktif dan responsif

• automatic configuration, bagian untuk membuat model secara otomatis dari skema database

• web service, bagian untuk mempermudah pembuatan web service

7

Terdapat berbagai jenis framework, diantaranya:

• Perl: catalyst, dancer, interchange, mason, maypole, reaction

• PHP: alloy, cakephp, codeigniter, doophp, drupal, e107, horde, joomla, kajona, kohana, lithium, modx, outglow, qcodo, quickphp, sapphire, seagull, solar, rain framework, symfony, yii, zend framework, zeta components, silverstripe

• java: apache click, apache cocoon, apache struts, apache tapestry, apache wicket, appfuse, aranea, context framework, eclipse rap, formengine, gwt, hamlets, icefaces, itsnat, javaserver faces, jboss seam, jspx-bay, jvx webui, manydesigns portofino, open laszlo, openxava, oracle adf, play!, rife, shale, sling, smartclient, spring, stripes, thinwire, vaadin, wavemaker, webobjects, webfork, zk, ztemplates

• python: bluedream, cherrypy, cubicweb, django, flask, grok, nagare, pyjamas, pylons, pyramid, turbogears, web2py, webware, zope

• ruby: camping, merb, nitro, ruby on rails, ramaze, sinatra

• coldfusion: coldbox platform, wirebox, coldfusion on wheels, coldspring, fusebox, fw/1, mach-II, model-glue, ontap

• asp.net: asp.net mvc, bfc, csla, dotnetnuke, monorail, openrasta

• C++: cppcms, tntnet, wt

• lua: kepler

• haskell: snap, happstack, yesod, haskell on a horse, loli, lemmachine, mohws, salvia

8

CodeIgniter

CodeIgniter merupakan salah satu web application framework populer untuk bahasa PHP. Versi yang dipakai dalam praktikum kali ini adalah 2.0.2. CodeIgniter memiliki beberapa fitur utama, yaitu:

• hanya membutuhkan sedikit resource

• performa yang cukup baik

• kompatibel dengan berbagai versi php (>5.1.6) sesuai dengan service hosting pada umumnya

• hampir tidak membutuhkan konfigurasi apa-apa

• tidak membutuhkan command line

• tidak memaksa mempergunakan pemrograman yang membatasi

• tidak memaksa untuk mempergunakan bahasa template tertentu

• solusi tidak kompleks

• dokumentasi yang jelas

• berbasiskan MVC

• kompatibel dengan berbagai database

• memiliki active record (insert update delete melalui object)

• validasi form dan data

• manajemen session

• library untuk:

◦ pengiriman e-mail

◦ manipulasi gambar

9

◦ file upload

◦ ftp

◦ localization

◦ paging

◦ enkripsi

◦ benchmark

◦ pencatatan error

◦ analisa performa

◦ kalender

◦ user agent

◦ template engine

◦ XML-RPC

◦ unit testing

◦ helper

◦ SEF URL dan routing

Instalasi CodeIgniter

Berikut ini adalah langkah-langkah instalasi CI:

• Download dan extract CI pada direktori root website

• Lakukan perubahan konfigurasi pada file 'application/config/config.php' dan 'application/config/database.php'.

• Opsional: lakukan rename terhadap folder 'system' dan 'application', dan edit 'index.php' pada bagian $system_folder dan $application_folder. Untuk alasan

10

keamanan sebaiknya kedua folder tersebut ditaruh di luar direktori root website.

Flowchart CodeIgniter

Berikut ini adalah tampilan diagram alur dari aplikasi CodeIgniter:

Mode View Controller

MVC adalah pendekatan untuk memisahkan antara tampilan dan logika aplikasi. MVC terdiri dari:

• Model, bagian yang merupakan representasi dari struktur data (database). Bagian ini opsional pada CI, sehingga kita dapat menggunakan controller dan view saja apabila membutuhkan aplikasi minimal

• View, bagian yang ditampilkan pada user

• Controller, bagian perantara antara Model, View dan sumberdaya lainnya yang dibutuhkan untuk memproses request HTTP dan menggenerate tampilan

Search Engine Friendly

CodeIgniter memiliki struktur 'domain/index.php/class/fungsi/param1/…/paramN'. File 'index.php' pada URL dapat dihilangkan dengan memanfaatkan rewrite engine dari web server yang dipakai. Berikut ini contoh isi .htaccess untuk web server Apache:

RewriteEngine on RewriteCond $1 !^(index\.php|images|robots\.txt)

11

RewriteRule ^(.*)$ /index.php/$1 [L]

Controller

Controller pada CI merupakan class yang diturunkan dari 'CI_Controller' dengan nama dimulai dengan huruf kapital dan nama file dengan huruf kecil pada folder 'application/controllers' yang berasosiasi dengan url tertentu. Tiap member function yang ada pada class tersebut menentukan bagian ke-2 dari URL yang dapat dipanggil. Berikut ini adalah contoh pembuatan controller:

class Test extends CI_Controller { public function index() { echo 'hello world'; } // dipanggil pada: domain/test/ atau domain/test/index/ public function test2() { echo 'hello test2'; } // dipanggil pada: domain/test/test2/ public function test3($nama,$nomor) { echo 'hello '.$nama.' no.'.$nomor; } // dipanggil pada: domain/test/test3/eureka/123}

Untuk mengatur controller utama yang dipanggil apabila tidak terdapat parameter pada URL yang dipanggil, dapat diatur pada file 'application/config/routes.php' yaitu pada variabel $route['default_controller'], variabel ini dapat di isi dengan nama class (dimulai dengan huruf besar).

Untuk mengubah nama fungsi yang dipanggil, fungsi khusus bernama '_remap($method,$param=array())'. Berikut ini adalah contoh pemakaian fungsi remap:

public function _remap($method, $params = array()) { $method = 'process_'.$method; if (method_exists($this, $method)) { return call_user_func_array(array($this, $method), $params); } show_404(); }

Seperti halnya fungsi PreRender pada ASP.NET, terdapat fungsi '_output($output)' yang selalu dipanggil sebelum text data diberikan pada browser. Apabila ingin membuat fungsi yang tidak dapat dipanggil oleh URL, kita dapat menambahkan tanda underscore '_' sebelum nama fungsi.

Apabila dalam membuat class controller kita membuat

12

constructor '__construct()', kita harus memanggil 'parent::__construct()' pada awal constructor agar controller berjalan dengan benar. Perlu di ingat dalam membuat class controller, nama-nama berikut ini tidak diperbolehkan sebagai nama class: 'Controller', 'CI_Base', '_ci_initialize', 'Default' dan 'index'.

View

View pada CI merupakan file php yang terdapat dalam folder 'application/views' yang dapat dipanggil dalam controller dengan perintah '$this->load->view(“namaFileView”,$data,$returnAsString)'. Semua indeks dalam $data akan dianggap sebagai variabel biasa pada halaman view.

Model

Model pada CI merupakan class yang diturunkan dari 'CI_Model' yang terdapat dalam folder 'application/models' yang memiliki peraturan nama file dan class sama seperti Controller. Model dapat di load pada controller dengan menggunakan perintah '$this->load->model($ModelName,$newName,$autoConnect);' dan dapat diakses dengan '$this->namaBaru' atau '$this->Nama_model' apabila namaBaru tidak disertakan.

Helper

Helper pada CI merupakan kumpulan fungsi-fungsi yang dapat digunakan untuk membantu tugas-tugas tertentu. Berikut ini beberapa contoh helper beserta kegunaanya:

• URL Helpers, membantu pembuatan link

• Form Helpers, membantu pembuatan form

• Text Helpers, membantu formatting teks

• Cookie Helpers, membantu pengaksesan cookie

• File Helpers, membantu manipulasi file

13

Helpers tidak dibuat dengan object oriented, melainkan prosedural. Helper dapat di-load dengan perintah '$this->load->helper($helperNameOrArray)'. Lokasi helper dapat ditemukan di folder 'application/helpers' dan 'system/helpers'. Untuk membuat menambahkan atau menumpuki helper yang telah ada, dapat dilakukan dengan membuat file baru dengan nama sama seperti file helper yang ingin ditumpuki dan ditambahkan nama '$config[“subclass_prefix”]' pada bagian depan nama file.

Library

Library merupakan kumpulan class-class yang dapat digunakan untuk membantu tugas-tugas tertentu. Library dapat di load dengan perintah '$this->load->library($classNameOrArray,$configArray,$newName)'. Library dapat ditemukan pada folder 'application/libraries' dan 'system/libraries'. Untuk membuat library baru, nama file dan nama class harus sama dan huruf pertama harus berupa huruf kapital. Berikut ini adalah contoh prototype class:

// Someclass.php<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Someclass { public function __construct($params=array()) { } public function some_function() { } }// $this-load->library('someclass');// $this->someclass->some_function();

Untuk melakukan override library yang sudah ada, aturan nama file yang dipakai adalah sama seperti ketika ingin menumpuki Helper, nama class juga sama harus sama seperti nama file dengan menambahkan ' extends CI_Namaclasslama'. Sama seperti controller, untuk apabila terdapat constructor, 'parent::__construct()' harus dipanggil juga.

Driver merupakan library yang memiliki parent dan sejumlah child. Driver memiliki sebuah folder dengan nama sama nama parent. Driver dapat di-load dengan perintah '$this->load->driver(“namaDriver”)'.

14

Auto-Loading

Auto-Load merupakan fitur yang memperbolehkan library, helper, dan model untuk di-load secara otomatis tiap halaman dibuka. Auto-Load dapat diatur pada file 'application/config/autoload.php', perlu di ingat untuk tidak menambahkan extension ketika menuliskan nama library/helper/model yang ingin di load.

Global Functions

Berikut ini adalah fungsi-fungsi yang ditambahkan oleh CI yang berlaku secara global:

• is_php('major.minor.rev'), untuk memeriksa apakah versi php yang dipakai sama atau lebih besar dari major.minor.rev.

• is_really_writable('filePath'), untuk memeriksa apakah filePath dapat ditulisi.

• config_item('key'), untuk mengambil sebuah nilai dari file konfigurasi.

• show_error('message',$statusCode=500), untuk menampilkan pesan error sesuai template pada 'application/errors/error_general.php'

• show_404('page',$logThisError=TRUE), untuk menampilkan pesan error sesuai template pada 'application/errors/error_general.php'

• log_message($level,'message'), untuk mencatat pesan error pada folder 'logs', dimana $level dapat berupa 'debug', 'error' dan 'info'.

• set_status_header($code,$text), untuk mengubah status header HTTP sesuai RFC http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html.

• remove_invisible_characters($str) untuk menghapus

15

karakter null.

Routing dan URI

Secara default, tiap url memiliki relasi 1 to 1 terhadap class dan method dengan pattern 'domain/class/function/params'. Pattern ini dapat diubah atau ditambahkan pada file konfigurasi 'application/config/routes.php' dengan wildcard atau regex, perlu diingat untuk tidak menambahkan slash (“/”) pada akhir pattern dan bahwa route berjalan secara urut berdasarkan urutan pendeklarasian. Berikut ini adalah contoh-contoh rule route:

$route['test'] = 'class1' $route['blog/kiz'] = 'blog/user/1';$route['item/(:any)'] = 'catalog/findItemByName';$route['product/(:num)'] = 'catalog/findItemById/$1';$route['product/([a-z]+)/(\d+)'] = '$1/id_$2';

Untuk mengakses uri yang di-request, dapat dilakukan dengan perintah '$this->uri->segment($position,$valueIfNotExists=FALSE)', perlu di ingat bahwa indeks dimulai dari 1. Selain cara ini, dapat juga digunakan perintah '$this->uri->uri_to_assoc($numberOfArguments,$arrayListOfIndex)', kebalikan dari fungsi ini adalah assoc_to_uri. Untuk mengetahui jumlah segmen, digunakan fungsi '$this->uri->total_segments()'.

Caching

Cache pada CI merupakan suatu metode untuk menyimpan halaman yang telah selesai di-render sehingga apabila halaman tersebut di-request ulang tidak perlu melakukan proses ulang. Cache hanya akan berjalan apabila halaman digenerate dengan menggunakan view, bukan dengan echo. Fitur cache dapat dinyalakan dengan menggunakan perintah '$this->output-cache($minutes)' pada bagian manapun di dalam fungsi controller. Untuk menghilangkan cache, penghapusan secara manual harus dilakukan sebelum masa expired selesai, yaitu pada folder 'application/cache'.

Profiling dan Benchmark

Profiling digunakan untuk mengetahui performa suatu fungsi

16

yang dapat digunakan untuk optimisasi ataupun debugging. Profiling dapat dinyalakan dengan menambahkan '$this->output->enable_profiler(TRUE)' pada bagian manapun di dalam fungsi controller. Untuk melakukan benchmark, cukup dengan menambahkan '$this->benchmark->mark(“nama_start”)' dan '$this->benchmark->mark(“nama_end”)', maka informasi tersebut akan tampil pada bagian profiler. Bechmark juga dapat memberitahu 2 informasi tambahan, yaitu:

• Total durasi eksekusi, dengan fungsi '$this->benchmark->elapsed_time()' atau '{elapsed_time}' pada view.

• Total penggunaan memory, dengan fungsi '$this->benchmark->memory_usage()' atau '{memory_usage}' pada view.

Post, Get, Cookie and Global Variables

Variabel post, get, request header, server dan cookie dapat diakses dengan menggunakan syntax seperti ini '$this->input->post/get/get_post/get_request_header/server($varName=NULL,$doXssFIlter=FALSE)', fungsi ini mengembalikan nilai false apabila data belum pernah terisi. Untuk mengisi sebuah variabel cookie dapat dilakukan dengan perintah '$this->input->set_cookie($arrayVal)', dimana array harus memiliki indeks: name, value, expire, domain, path, prefix, secure. Berikut ini adalah contoh pemakaian set_cookie:

$cookie = array( 'name' => 'var1', 'value' => 'Nilainyaa', 'expire' => '86500', 'domain' => '.domain.com', 'path' => '/', 'prefix' => 'prefix_', 'secure' => TRUE ); $this->input->set_cookie($cookie);

Berikut ini daftar fungsi yang dapat dipanggil dari obyek input:

• ip_address(), mengambil alamat IP dari client

• user_agent(), mengambil user agent yang digunakan

17

browser client

• request_headers(), mengambil array yang berisi header request dari client secara keseluruhan

• is_ajax_request(), apabila request berasal dari javascript

• is_cli_request(), untuk memeriksa apakah PHP dijalankan secara command line

Session

Pada CI, untuk session tidak aktif secara otomatis, tetapi harus di-load seperti layaknya melakukan load terhadap library atau dengan autoload. Untuk mengakses data, digunakan fungsi '$this->session->userdata($data)', '$this->session->set_userdata($arrayOfData)/($index,$value)', '$this->session->unset_userdata($index)/($arrayOfData)' dan '$this->session->sess_destroy()'.

Latihan

Dengan menggunakan css, controller dan view CI, buatlah halaman web yang memiliki menu dinamis berdasarkan isi suatu variabel, dimana apabila menu tersebut belum terdapat fungsi atau class yang menghandlenya akan menghasilkan halaman 404 yang memiliki tampilan seperti halaman utama.

18

Bab 2: CI Libraries

Tujuan

Praktikan mampu mengetahui library-library yang telah tersedia dalam framework CodeIgniter.

Calendar Library

Calendar pada CI merupakan library untuk menghasilkan kalender. Setelah melakukan load library, kalender dapat ditampilan dengan perintah '$this->calendar->generate($year,$month,$data)'. Variabel $data adalah array asosiatif dengan ideks berupa tanggal dan value berupa URL. Preferensi dapat diatur ketika melakukan load library dengan menambahkan parameter kedua berupa array asosiatif dengan key:

• local_time, waktu lokal, default: time()

• start_day, awal minggu, default: sunday

• month_type, short atau long, default: long

• day_type, long, short atau abr, default: abr

• show_next_prev, tampilan link next/prev, default: FALSE

• next_prev_url, tampilan url apabila show_next_prev TRUE, contoh:

$prefs = array ( 'show_next_prev' => TRUE , 'next_prev_url' => 'http://domain/cal/show/' ); $this->load->library('calendar', $prefs); echo $this->calendar->generate ( $this->uri->segment(2) , $this->uri->segment(3) );// akses: http://domain/cal/show/2011/07

• template, mengubah tampilan, contoh:{table_open}<table border="0" cellpadding="0" cellspacing="0">{/table_open}

19

{heading_row_start}<tr>{/heading_row_start} {heading_previous_cell}<th><a href="{previous_url}">&lt;&lt;</a></th>{/heading_previous_cell} {heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell} {heading_next_cell}<th><a href="{next_url}">&gt;&gt;</a></th>{/heading_next_cell} {heading_row_end}</tr>{/heading_row_end} {week_row_start}<tr>{/week_row_start} {week_day_cell}<td>{week_day}</td>{/week_day_cell} {week_row_end}</tr>{/week_row_end} {cal_row_start}<tr>{/cal_row_start} {cal_cell_start}<td>{/cal_cell_start} {cal_cell_content}<a href="{content}">{day}</a>{/cal_cell_content} {cal_cell_content_today}<div class="highlight"><a href="{content}">{day}</a></div>{/cal_cell_content_today} {cal_cell_no_content}{day}{/cal_cell_no_content} {cal_cell_no_content_today}<div class="highlight">{day}</div>{/cal_cell_no_content_today} {cal_cell_blank}&nbsp;{/cal_cell_blank} {cal_cell_end}</td>{/cal_cell_end} {cal_row_end}</tr>{/cal_row_end} {table_close}</table>{/table_close}

Shopping Cart Library

Cart adalah library yang digunakan untuk memberikan fungsionalitas dasar shopping cart yang memiliki fungsi-fungsi sebagai berikut:

• insert(), array yang memiliki indeks: id, qty, price, name, options (array)

• update(), berdasarkan rowid (atribut yang digenerate otomatis dari id dan options)

• total(), total_items()

• contents(), isi dari cart

• has_options($rowId), untuk mengetahui apakah item rowid memiliki option

• product_options($rowid), untuk mengambil nilai dari tiap option

• destroy(), untuk menghapus isi cart

20

Berikut ini adalah contoh pemakaian cart beserta form helper:

<?=form_open('path/to/controller/update/function'); ?> <table cellpadding="6" cellspacing="1" style="width:100%" border="0"> <tr> <th>QTY</th> <th>Item Description</th> <th style="text-align:right">Item Price</th> <th style="text-align:right">Sub-Total</th> </tr> <?php $i = 1; ?> <?php foreach ($this->cart->contents() as $items): ?> <?=form_hidden($i.'[rowid]', $items['rowid']); ?> <tr> <td><?=form_input(array('name' => $i.'[qty]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?></td> <td> <?=$items['name']; ?> <?php if ($this->cart->has_options($items['rowid']) == TRUE): ?> <p> <?php foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?> <strong><?=$option_name; ?>:</strong> <?=$option_value; ?><br /> <?php endforeach; ?> </p> <?php endif; ?> </td> <td style="text-align:right"><?=$this->cart->format_number($items['price']); ?></td> <td style="text-align:right">$<?=$this->cart->format_number($items['subtotal']); ?></td> </tr> <?php $i++; ?> <?php endforeach; ?> <tr> <td colspan="2"> </td> <td class="right"><strong>Total</strong></td> <td class="right">$<?=$this->cart->format_number($this->cart->total()); ?></td> </tr> </table> <p><?=form_submit('', 'Update your Cart'); ?></p> <?=form_close()?>

Config Library

Class config digunakan untuk melakukan load file konfigurasi secara manual. Memiliki 2 buah fungsi helper yaitu:

• site_url(), untuk mengambil URL utama beserta index

21

apabila ada.

• system_url(), untuk mengetahui posisi folder 'system'.

Database Library

Class database dapat diaktifkan dengan memanggil fungsi '$this->load->database($dbGroup=$active_group,$returnAsObject)' atau dengan konfigurasi autoinit dan autoload. Konfigurasi database dapat diatur pada file '/application/config/database.php'. Berikut ini adalah contoh konfigurasi database:

$db['default']['hostname'] = "localhost"; $db['default']['username'] = "root"; $db['default']['password'] = ""; $db['default']['database'] = "database_name"; $db['default']['dbdriver'] = "mysql"; $db['default']['dbprefix'] = ""; $db['default']['pconnect'] = TRUE; $db['default']['db_debug'] = FALSE; $db['default']['cache_on'] = FALSE; $db['default']['cachedir'] = ""; $db['default']['char_set'] = "utf8"; $db['default']['dbcollat'] = "utf8_general_ci"; $db['default']['swap_pre'] = ""; $db['default']['autoinit'] = TRUE; $db['default']['stricton'] = FALSE;$db['test']['hostname'] = "localhost"; $db['test']['username'] = "pguser"; $db['test']['password'] = ""; $db['test']['database'] = "database_name"; $db['test']['dbdriver'] = "postgres"; // odbc, sqlite$db['test']['dbprefix'] = ""; $db['test']['pconnect'] = TRUE; $db['test']['db_debug'] = TRUE; $db['test']['cache_on'] = TRUE; $db['test']['cachedir'] = "/tmp/"; $db['test']['char_set'] = "utf8"; $db['test']['dbcollat'] = ""; $db['test']['swap_pre'] = ""; $db['test']['autoinit'] = TRUE; $db['test']['stricton'] = FALSE;$db['test']['port'] = 5433;$active_group = "test";$active_record = true;

Pengaksesan standar dapat digunakan dengan perintah '$this->db->query()' tetapi menggunakan perintah '$dbReturnedObject->query()'. Berikut ini adalah daftar member function dari database object:

22

• query($sql,$bindValue), mengembalikan result object apabila berupa SELECT, TRUE atau FALSE untuk INSERT, UPDATE dan DELETE. Variabel array $bindValue akan menggantikan tiap tanda tanya (“?”) yang terdapat dalam $sql.

• simple_query($sql), mengembalikan TRUE atau FALSE

• escape($str), escape_str($str), escape_like_str($str), memfilter data secara manual sebelum masuk ke dalam SQL

• reconnect(), melakukan koneksi ulang apabila terputus atau timeout

• close(), menutup koneksi

• insert_id(), mengembalikan id hasil insert terakhir

• affected_rows(), mengembalikan hasil jumlah INSERT, UPDATE atau DELETE terakhir

• count_all($tableName), mengembalikan jumlah row dari tabel tertentu

• platform(), mengembalikan nama software database

• version(), mengembalikan versi database

• last_query(), mengembalikan SQL string dari query terkahir

• insert_string($tableName,$arrayData), melakukan insert dengan aman ke tableName dengan data array asosiatif

• update_string($tableName,$arrayData,$sqlWhere), melakukan update sesuai arrayData dengan syarat sqlWhere

Result object dihasilkan oleh query, memiliki beberapa method, diantaranya:

• result(), mengembalikan array baris yang berisi object yang tiap data membernya adalah nama kolom.

• num_rows(), mengembalikan jumlah baris hasil query

23

• result_array(), menggembalikan array baris yang berisi array yang tiap indeksnya adalah nama kolom

• row(), mengembalikan object baris pertama

• row_array(), mengembalikan array baris pertama

• first_row(), last_row(), next_row(), previous_row(), loncat menuju hasil baris tertentu dan mengembalikan object pada baris tersebut, apabila diberi parameter dengan nilai 'array', maka akan mengembalikan array pada baris tersebut.

• num_fields(), mengembalikan jumlah kolom hasil query

• free_result(), menghapus semua baris dari memory

Active Record Library

Active Record pada CI merupakan hasil modifkasi dari Active Record Pattern. Keuntungan menggunakan active record adalah database-independent, dimana tiap sql syntax digenerate otomatis dan aman terhadap injection. Berikut ini adalah fungsi-fungsi (dapat di-chaining) tambahan pada class database ($this->db) apabila active record dinyalakan:

• get($tableName), melakukan SELECT *

• get_where($tableName,$whereArray,$limit,$offset)

• select($fieldsStr,$notContainingSubquery=TRUE), memilih field yang diambil untuk perintah get() berikutnya.

• select_max($field,$alias), select_min($field,$alias), select_avg($field,$alias), select_sum($field,$alias) memilih field dengan aggregate untuk perintah get() berikutnya.

• from($tableName), mengambil data dari tabel tertentu, digunakan apabila perintah get() tidak menggunakan parameter

• join($tableName,$selectionCriteria,$joinType), melakukan

24

join tabel, joinType dapat berupa 'left', right', 'inner', 'left outer', 'right outer'

• where($fieldName,$fieldValue), where($string,NULL,$protectSQL=TRUE), where($whereArray), melakukan filter, fieldName boleh mengandung operator, misal “!=” serta pemanggilan fungsi where() lebih dari 1x akan menggabungkan filter-filter sebelumnya dengan operator AND

• or_where(), sama seperti where() tetapi penggabungan dengan operator OR

• where_in/or_where_in/where_not_in/or_where_not_in($fieldStr,$valueArray),(), melakukan query WHERE IN

• like($fieldStr,$value,$position='both'), like($fieldValueArray), or_like(), not_like(), or_not_like(), melakukan filtering dengan LIKE, position dapat bernilai 'before', 'after' atau 'both'

• group_by($column), group_by($columnsArray), melakukan GROUP BY

• distinct(), menambahkan keyword DISTINCT sebelum pemanggilan get()

• having/or_having($fieldStr,$fieldValue,$protect=TRUE), menambahkan HAVING dengan penggunaan sama seperti where

• order_by($fieldStr,$order='ASC'), order_by($orderStr), melakukan ORDER BY, dapat dilakukan pemanggilan berulang

• limit($howMany), limit($howMany,$offset), melakukan pembatasan jumlah dan baris awal pemanggilan query

• count_all_results($tableName=''), berfungsi sama seperti get tetapi menghasilkan jumlah baris saja, dapat ditambahkan filter-filter pada sebelumnya.

25

• count_all($tableName), sama seperti di count_all_results tetapi tanpa filter.

• insert($tableName,$dataArray), insert_batch($tableName,$dataArrayOfArray), update($tableName,$dataArray), melakukan hal yang sama seperti insert_string() atau update_string(), untuk update() dapat ditambahkan pemanggilan fungsi-fungsi filtering

• set($fieldStr,$fieldValue), mengisi value sebelum pemanggilan insert() maupun update()

• delete($tableName,$whereArray), truncate(), empty_table(), melakukan DELETE atau TRUNCATE, sebelumnya dapat ditambahkan pemanggilan fungsi filtering

• start_cache(), stop_cache(), clear_cache(), memanipulasi perintah-perintah select, from, join, where, like, group_by, having, order_by maupun set agar bertahan atau dihilangkan tiap pemanggilan get, insert, update atau delete

Transaction

Transaksi atomik dapat dilakukan dengan memanggil fungsi 'trans_start()', 'trans_complete()' dan 'trans_off()', untuk mengetahui status transaksi terakhir, dapat digunakan perintah 'trans_status()'.

Database Metadata

Berikut ini adalah fungsi-fungsi untuk mengakses metada database:

• list_tables(), mendapatkan array daftar tabel dalam database

• table_exists($tableName), untuk mengetahui apakah tabel ada dalam database

• list_fields($tableName), mendapatkan daftar kolom dalam

26

tabel, dapat dipanggil juga dari result object

• field_exists($fieldStr,$tableName), untuk mengetahui apakah kolom terdapat dalam tabel

• field_data($tableName), untuk mengetahui metadata dari field (name,type,max_length,primary_key), dapat dipanggil juga dari result object

Query Caching

Query caching merupakan metode untuk mengurangi akses query SELECT dari database. Tiap terjadi perubahan dalam tabel, sebaiknya cache dihapus karena cache tidak akan terhapus secara otomatis, konfigurasi lokasi cache diatur pada '/application/config/database.php'. Untuk mengaktifkan query cache secara manual, lakukan pemanggilan 'cache_on()', 'cache_off()', 'cache_delete($class,$function)', serta 'cache_delete_all()'.

Database Forge Library

Database Forge merupakan class yang digunakan untuk membantu memanipulasi metadata database. Untuk mengaktifkannya perlu dilakukan pemanggilan terhadap library database dan '$this->load->dbforge()'. Berikut ini adalah daftar fungsi yang terdapat dalam object dbforge:

• create_database($dbName), membuat database

• drop_database($dbName), menghapus database

• add_fields($fieldsArrayOfArray), menambahkan field (untuk create_table(), array dapat memiliki indeks: 'type', 'contraint' (maxLength), 'default', 'null'

• add_key($field,$isPrimary=FALSE), menambahkan unique atau primary key

• create_table/drop_table($tableName), membuat atau menghapus tabel

27

• rename_table($old,$new), mengubah nama tabel

• add_column($tableName,$fieldsArrayOfArray), menambahkan kolom pada tabel

• drop_column($tableName,$columnName), menghapus kolom

• modify_column($newColumnName,$fieldsArrayOfArray), mengubah kolom

Database Utility Library

Merupakan class yang digunakan memanipulasi database. Database Utility dapat di load dengan memanggil '$this->load->dbutil()'. Berikut ini adalah daftar member function dalam object '$this->dbutil':

• list_database(), untuk mendapatkan daftar database

• database_exists($dbName), untuk mengetahui apakah database ada

• csv_from_result($resultObject,$delimiter,$newline), xml_from_result(), untuk mengubah hasil query menjadi teks CSV/XML

Email Library

Email class merupakan class untuk membantu pengiriman e-mail. Library ini dapat dipanggil dengan cara yang sama seperti pemanggilan library lainnya. Pengaturan class ini terdapat pada file 'application/config/email.php'. Berikut ini adalah beberapa property dari $config yang dapat diatur (atau melalui pemanggilan fungsi initialize($config):

• useragent, software pengirim

• mail, metode pengiriman: mail, smtp, sendmail

• mailtype, tipe e-mail: text, html

28

Berikut ini adalah daftar nama fungsi beserta kegunaannya dalam email object:

• from($senderEmail,$senderName), reply_to($replyToEmail,$replyToName), to/cc/bcc($emailsArrayOrStr), mengatur pengirim atau penerima

• subject($subject), message($message), set_alt_message($message), mengatur judul dan isi pesan, pesan non-HTML. Untuk memaksa sebuah teks tidak dipotong dalam wrapping, tambahkan teks '{unwrap}' dan '{/unwrap}'

• clear(), menghapus semua properti dari pengiriman terakhir

• send(), mengirim e-mail

• attach($filePath), menambahkan attachment

• print_debugger(), menampilkan semua pesan pengiriman

Encryption Library

Encrpyt merupakan class untuk membantu proses enkripsi dan dekripsi data. Untuk melakukan load library ini sama seperti load library lainnya, yaitu dengan '$this->load->library(“encrypt”);'. Konfigurasi key terdapat pada file 'application/config/config.php' yaitu pada variabel $config[“encryption_key”]'. Object encrypt memiliki fungsi-fungsi sebagai berikut:

• encode($message,$optionalKey), mengenkripsi data

• decode($crypted,$optionalKey), mendekripsi data

• set_chiper(MCRPYT_RIJNDAEL_256), mengatur metode enkripsi, daftar metode dapat dilihat pada http://php.net/manual/en/mcrypt.ciphers.php

• sha1($msg), mendapatkan hasil hash sha1

29

File Upload Library

File Uploading class merupakan class yang digunakan untuk membantu upload file. Sama seperti library lainnya, perlu dilakukan load terhadap library ini sebelum menggunakan. Berikut ini adalah contoh pemakaian class file upload:

<-- file: domain/application/views/uform.php --> <html> <head><title>Upload Form</title></head> <body> <?=$error;?> <?=form_open_multipart('upload/doUpload');?> <input type="file" name="userfile" size="20" /> <input type="submit" value="upload" /> <?=form_close()?> </body> </html>

<-- file: domain/application/views/udone.php --> <html> <head><title>Upload Form</title></head> <body> <h3>Your file was successfully uploaded!</h3> <ul> <?php foreach ($udata as $item => $value):?> <li><?=$item;?>: <?=$value;?></li> <?php endforeach; ?> </ul> <p><?=anchor('upload', 'Upload Another File!'); ?></p> </body> </html>

<?php // file: domain/application/controller/uload.php class Uload extends CI_Controller { function __construct() { parent::__construct(); $this->load->helper(array('form', 'url')); } function index() { $this->load->view('uform', array('error' => ' ' )); } function doUpload() { $config['upload_path'] = './uploads/'; $config['allowed_types'] = 'gif|jpg|png'; $config['max_size'] = '100'; $config['max_width'] = '1024'; $config['max_height'] = '768'; $config['encrypt_name'] = FALSE; $config['remove_spaces'] = TRUE; $config['overwrite'] = TRUE; $this->load->library('upload', $config); if ( ! $this->upload->do_upload()) { $error = array('error' => $this->upload->display_errors('<pre>','</pre>'));

30

$this->load->view('uform', $error); } else { $data = array('udata' => $this->upload->data()); $this->load->view('udone', $data); } } }

// url: domain/uload

Form Validation Library

Form Validation merupakan class dalam CI untuk membantu memeriksa form. Sama seperti pada library lainnya form_validation perlu di-load terlebih dahulu. Berikut ini adalah daftar fungsi beserta kegunaan member function dari object form_validation:

• set_rules($fieldName,$label,$validationRules), set_rules($arrayOfArray), memasukkan field dan aturan validasi. Tiap array dalam arrayOfArray harus memiliki indeks: field, label dan rules (dapat dilakukan pipe), berikut ini adalah daftar rules:

◦ required, harus di isi

◦ min_length[N], max_length[N], exact_length[N], greater_than[N], less_than[N], validasi panjang

◦ valid_email, valid_emails, alamat e-mail sesuai format

◦ alpha, alpha_numeric, alpha_dash, numeric, integer, decimal, is_natural, is_natural_no_zero, validasi karakter

◦ valid_ip, validasi alamat IP

◦ valid_base64, validasi base64 encoding

◦ matches[anotherField], identical value to another field

◦ xss_clean, clean from XSS attack

◦ md5, mengubah menjadi hash md5

◦ trim, menghapus spasi di depan dan belakang

31

◦ prep_url, menambahkan http:// apabila tidak ada

◦ strip_image_tags, menghapus tag img

◦ encode_php_tags, mengubah tag php menjadi html

◦ prep_for_form, mengubah semua karakter HTML dengan benar agar dapat ditampilkan pada field form

◦ fungsi apapun yang memiliki 1 parameter string dapat dipakai sebagai rule

◦ fungsi didalam data member controller harus dituliskan menggunakan 'callback_' pada bagian rules, fungsi tersebut harus mengembalikan nilai boolean

• run(), menjalankan validasi, mengembalikan nilai FALSE apabila gagal

• set_message($namaFungsiTanpa_callback,$message), dipanggil dalam fungsi-data member yang menjadi rule apabila terjadi error

• set_message($ruleName,$errorMessage), untuk melakukan override pesan error, dengan '%s' sebagai string yang diinputkan

• set_error_delimiters($prefix,$postfix), untuk mengganti html pembungkus pesan error

Pesan error default dapat diubah, lokasi file-nya terletak pada 'language/english/form_validation_lang.php'. Pesan error pada view dapat ditampilkan dengan perintah 'form_error($fieldName,$prefix,$postfix)' atau 'validation_errors($prefix,$postfix)'. Untuk mengembalikan data yang telah di-input, dapat dipanggil fungsi-fungsi berikut ini pada bagian view:

• set_value($fieldName,$valueIfNull='') untuk elemen standar input-value atau textarea-innerHTML

• set_select($fieldName,$value,$defaultIfNull=FALSE) untuk elemen option-select

32

• set_checkbox($fieldName[],$value) untuk elemen input type-checkbox

• set_radio($fieldName,$value,$defaultIfNull=FALSE) untuk elemen input type-radio

FTP Library

FTP merupakan protokol resmi untuk file transfer. Seperti halnya library umumnya, library ini harus di-load terlebih dahulu. Berikut ini adalah daftar data member dalam object ftp:

• connect($config), untuk melakukan koneksi menuju FTP server, dimana $config adalah array yang memiliki indeks: hostname, username, password, port, passive, debug

• upload($localFile,$remoteFile,$mode,$permission), untuk melakukan upload dimana $mode adalah ascii, binary atau auto, sedangkan permission harus berupa nilai oktal

• download($remoteFile,$localFile,$mode), untuk melakukan download

• rename/move($old,$new), untuk melakukan rename/move file

• delete_file($remoteFile), untuk melakukan penghapusan file

• list_files($remoteDir), untuk melihat isi dalam bentuk array

• mirror($localDir,$remoteDir), untuk melakukan upload isi direktori secara rekursif

• mkdir($dir$$permission), untuk membuat direktori pada server

• chmod($path,$permission), untuk mengubah permission

• close(), untuk menutup koneksi, sebaiknya selalu dipanggil

33

HTML Table Library

Table class merupakan library untuk membuat tabel sesuai dengan array. Seperti halnya tabel pada umumnya, perlu dilakukan load library baik secara manual maupun autoload. Berikut ini adalah daftar data member dari object table:

• generate($arrayOfArray), generate($resultObject), generate(), untuk menggenerate tabel HTML

• set_heading($headerName,…), set_heading($headerNamesArray), untuk membuat header.

• add_row($fieldValue,…), add_row($fieldValuesArray) untuk membuat baris

• set_template($configArray), untuk mengubah tampilan tabel, configArray memiliki index: table_open, heading_row_start, heading_row_end, heading_cell_start, heading_cell_end, row_start, row_end, cell_start, cell_end, row_alt_start, row_alt_end, cell_alt_start, cell_alt_end, table_close.

• set_caption($caption), mengatur judul tabel

• make_columns($cellsArray,$columnSize), untuk membuat tabel dengan ukuran kolom dari array

• set_empty($htmlText), untuk mengisi cell yang kosong dengan htmlText

• clear(), untuk menghapus heading dan data sebelumnya

• function, merupakan properti yang dapat di isi dengan string atau array yang berisi nama-nama fungsi yang akan dijalankan untuk tiap isi sel

Output Library

Output class merupakan library untuk melakukan manipulasi output, class ini di-load secara otomatis. Berikut ini adalah daftar fungsi dari object output beserta kegunaannya:

34

• set_output($data), untuk mengatur isi dari output secara manual, sebaiknya dipanggil terakhir kali

• set_content_type($type), untuk mengatur tipe content, misal 'text/html'

• append_output($data), untuk menambahkan data pada posisi terakhir output

• set_header($str), untuk mengatur header response HTTP secara manual

• set_status_header($code,$text), untuk mengatur status response HTTP secara manual

Pagination Library

Pagination class merupakan class untuk mengatur pembagian halaman hasil output data atau lebih dikenal dengan istilah paging. Library ini harus di-load terlebih dahulu sebelum dipakai. Berikut ini adalah contoh pemakaian pagination class:

$this->load->library('pagination'); $config['base_url'] = 'http://domain/products/all/page/'; $config['total_rows'] = '210'; $config['per_page'] = '20'; $this->pagination->initialize($config); echo $this->pagination->create_links();

Konfigurasi dapat disimpan pada file 'application/config/pagination.php' dengan begitu, fungsi initialize tidak perlu dipanggil. Berikut ini adalah daftar konfigurasi yang dapat diubah:

• uri_segment, posisi halaman yang mengandung nomor halaman

• num_links, jumlah halaman yang ingin ditampilkan sebelum dan sesudah halaman sekarang

• full_tag_open, full_tag_close, first_link, first_tag_open, first_tag_close, last_link, last_tag_open, last_tag_close, next_link, next_tag_open, next_tag_close, prev_link, prev_tag_open, prev_tag_close, cur_tag_open,

35

cur_tag_close, num_tag_open, num_tag_close, untuk mengatur tampilan paging

• display_pages, untuk mengatur apakah nomor halaman ditampilkan

Zip Encoding Library

Zip merupakan class untuk memanipulasi file zip. Sama seperti library lainnya library ini harus di load terlebih dahulu. Berikut ini adalah daftar fungsi dalam object zip:

• add_data($pathAndName,$data), menambahkan file ke dalam arsip dengan data dari memory

• add_dir($path), menambahkan folder kosong

• read_file($path), menambahkan data dari file yang tersimpan di harddisk

• read_dir($path), menambahkan data secara rekursif dari sebuah direktori

• archive($path), mengkompres dan menyimpan file ke dalam harddisk

• download($fileName), memaksa user melakukan download

• get_zip(), mengambil archive ke dalam variabel

• clear_data(), untuk membuat archive baru

Library-library Lainnya

Berikut ini adalah library-library lainnya yang terdapat pada CI:

• Image_lib merupakan class untuk melakukan manipulasi gambar. Untuk melakukan load library ini, dibutuhkan array konfigurasi yang berisi indeks source_image (lokasi gambar yang akan dimanipulasi).

36

• Loader, merupakan library yang di-load secara otomatis yang berguna melakukan load segala jenis library lainnya

• Language, merupakan library untuk memanipulasi bahasa, untuk bahasa inggris tersimpan pada folder: 'system/language/english'

• Trackback merupakan class untuk membantu mengirimkan dan menerima signal data trackback.

• Parser, class untuk membuat template engine minimum secara manual.

• Typography, class untuk mengatur format teks.

• Unit Testing, class untuk melakukan testing unit

• User_agent, class untuk melakukan parsing terhadap string User-Agent yang dikirimkan HTTP client.

• XML-RPC, library untuk melakukan komunikasi remote via XML

Latihan

Dari sejumlah library di-atas, buatlah website pribadi yang mempergunakan minimal 6 library di atas

37

Bab 3: CI Helper

Tujuan

Praktikan mempu mengetahui dan menggunakan dengan efisien helper-helper yang telah tersedia pada CodeIgniter

Helper

Helper merupakan fungsi-fungsi yang dapat membantu coding maupun mempersingkat penulisan. Helper harus di load terlebih dahulu dengan syntax '$this->load->helper($helperName)'

Array Helper

Berikut ini daftar fungsi dalam array helper:

• element($index,$array,$valueIfNotExists=FALSE), mengambil nilai dari indeks tertentu dan mengembalikan nilai FALSE apabila tidak ada

• random_element($array), mengambil salah satu nilai dari array secara random

• elements($indexArray,$array,$valueIfNotExists=FALSE), mengambil beberapa nilai dengan indeks tertentu dan mengembalikan nilai FALSE pada indeks yang tidak ditemukan

Cookie Helper

Berikut ini daftar fungsi dalam cookie helper:

• set_cookie(), sama seperti $this->input->set_cookie()

• get_cookie(), sama seperti $this->input->get_cookie()

• delete_cookie($name,$domain,$path,$prefix), sama seperti set_cookie

38

Date Helper

Berikut ini daftar fungsi dalam date helper:

• now()

• mdate(), sama seperti date() tetapi menggunakan format MySQL

• standard_date($format,$time=time()), mengembalikan format tanggal DATE_ATOM, DATE_COOKIE, DATE_ISO8601, DATE_RFC822, DATE_RFC850, DATE_RFC1036, DATE_RFC1123, DATE_RFC2822, DATE_RSS, DATE_W3C.

• local_to_gmt($timestamp), mengembalikan waktu sesuai GMT

• gmt_to_local($timestamp,$timezone,$isDaylightSaving), mengembalikan waktu lokal dari waktu GMT

• mysql_to_uniq($mysqltime), mengubah timestamp MySQL ke UNIX

• unix_to_human($timestamp,$withSeconds=FALSE,$regionalFormat='us'), mengubah format waktu UNIX menjadi format yang dapat dibaca manusia normal, kebalikan dari fungsi ini adalah human_to_unix($timestr)

• timespan($prevtime,$nexttime), mengetahui durasi

• days_in_month($month,$year), mengetahu jumlah hari dalam bulan tertentu

• timezones($str), mengetahui durasi perbedaan waktu dari UTC

• timezone_menu($firstSelected), menggenerate combobox yang berisi timezone, daftar timezone dapat dibaca pada: http://codeigniter.com/user_guide/helpers/date_helper.html

39

Directory Helper

Berikut ini adalah daftar fungsi dalam directory helper:

• directory_map($path,$maxLevel,$showHidden), memunculkan daftar file dan folder dari path (relatif terhadap index.php)

Download Helper

Berikut ini adalah daftar fungsi dalam download helper:

• force_download($fileName,$data), memaksa client untuk mendownload file dari memory

Email Helper

Berikut ini adalah daftar fungsi dalam email helper:

• valid_email($email), memeriksa format alamat e-mail

• send_email($recipient,$subject,$message), mengirim e-mail

File Helper

Berikut ini adalah daftar fungsi dalam file helper:

• read_file($filePath), membaca semua isi dari file, path relatif terhadap index.php

• write_file($filePath,$data), menuliskan data ke dalam file

• delete_files($folderPath,$deleteThisFolderAlso), menghapus secara rekursif

• get_filenames($folderPath,$thisFolderAlso=FALSE), mengambil array yang berisi semua file di dalam folder

• get_dir_file_info($folderPath,$topLevelOnly=TRUE), mengambil array berisi nama, ukuran, tanggal dan

40

permission

• get_file_info($filePath,$infoName), mengambil informasi dari sebuah file, FALSE apabila file tidak ditemukan

• get_mime_by_extension($fileName), mengambil informasi tipe berdasarkan nama extension

• symbolic_permissions($perms), mengembalikan informasi rwx, $perms didapatkan dari fungsi fileperms($path)

• ocal_permissions($perms), mengembalikan infomasi oktal

Form Helper

Berikut ini adalah daftar fungsi dalam form helper:

• form_open/form_open_multipart($sendUrl,$htmlAttr,$hiddenInput), membuat form

• form_hidden($name,$value)/($attrArray), membuat hidden input

• form_input/form_password/form_upload/form_textarea($name,$value)/($attrArray), membuat input

• form_dropdown/form_multiselect($name,$values,$defaultOrArray), membuat dropdown atau listbox

• form_fieldset($legend), form_fieldset_close(), membuat fieldset

• form_checkbox/form_radio($name,$value,$isChecked)/($attrArray), membuat checkbox/radiobutton

• form_submit($name,$value), membuat submit button

• form_label($innerHTML,$forId), membuat label

• form_reset(), membuat tombol reset

• form_button($name,$value)/($attrArray), membuat button

41

• form_close(), membuat tag penutup form

• form_prep($str), mempersiapkan nilai attribut HTML agar tidak merusak HTML

• set_value($inputName,$defaultValue), mengembalikan nilai dari indeks post atau nilai default bila bukan hasil postback

• set_select/set_checkbox/set_radio($selectName,$value,$defaultIfNotExists), mengembalikan nilai dari indeks post

HTML Helper

Berikut ini adalah daftar fungsi dalam html helper:

• br($count), membuat break tag

• heading($title,$level), membuat heading

• img($src)/($attrArray), membuat tag image

• link_tag($path,$rel='stylesheet',$type), membuat tag link

• nbs($count), membuat &nbsp;

• ol/ul($listArray,$attrArray), membuat list, boleh nested array

• meta($name,$content)/($arrayOfArray), membuat tag meta

• doctype($type='xhtml11'), membuat tag doctype

Path Helper

Berikut ini adalah daftar fungsi dalam path helper:

• set_realpath($path,$errorIfNotExists=FALSE), mengembalikan path asli tanpa symbolic link

Security Helper

Berikut ini adalah daftar fungsi dalam security helper:

42

• xss_clean($str), mengubah karakter-karakter yang dapat menyebabkan XSS

• sanitize_filename($path), mengamankan transversal path

• do_hash($str,$type='sha1'), memanggil hash

• strip_image_tags($str), menghapus tag image menghasilkan URLnya saja

• encode_php_tags(), mengganti tag php menjadi HTML

Simley Helper

Berikut ini adalah daftar fungsi dalam smiley helper:

• get_clickable_smileys($smileyURL,$textareaId), memunculkan daftar smiley

• smiley_js(), memunculkan javascript yang dibutuhkan agar smiley dapat ditambahkan ke dalam textarea ketika smiley di-klik

• parse_smileys($str,$smileyURL), mengembalikan string yang berisi emoticon yang telah diganti menjadi gambar

String Helper

Berikut ini adalah daftar fungsi dalam string helper:

• random_string($type,$length), membuat string random berdasarkan tipe: alpha, alnum, numeric, nozero, unique, sha1

• alternator($str,…), mengembalikan nilai urut dari parameter pertama hingga terakhir, berjalan maju tiap kali fungsi dipanggil. Untuk me-reset nilai terakhir, panggil fungsi ini tanpa parameter

• repeater($str,$num), menduplikat string

• reduce_double_slashes($str), menghilangkan slash berganda

43

“//”, kecuali 'http://'

• trim_slashes($str), menghapus “/” dari depan dan belakang string

• reduce_multiples($str,$charToReduce,$alsoTrim=FALSE), menghapus karakter dempet yang berulang

• quotes_to_entities($str), mengubah quote menjadi entity html

• strip_quotes($str), menghapus semua quote

Text Helper

Berikut ini adalah daftar fungsi dalam text helper:

• word_limiter/character_limiter($str,$count,$replaceWith='...'), menghapus semua string setelah menemui sejumlah kata/huruf

• ascii_to_entities($str), mengubah karakter ascii menjadi entitiy html, kebalikan dari fungsi ini adalah entities_to_ascii($str)

• conver_accented_characters($str), menghapus karakter dengan accent menjadi karakter ascii biasa

• word_censor($str,$wordArray,$replace='####'), menyensor kata-kata tertentu

• highlight_code($str), mewarnai source code

• highlight_phrase($str,$phrase,$tag_start,$tag_end), membungkus frasa tertentu dengan tag

• word_wrap($str,$count), memecah paragraf berdasarkan jumlah karakter maksimum

• ellipsize($str,$count,$ellipsisPosition,$ellipChar='&hellip;'), mengganti sejumlah karakter pada posisi tertentu dari string yang terlalu panjang

44

Typography

Berikut ini adalah daftar fungsi typography helper:

• auto_typography($str), membenarkan syntax html

• nl2br_except_pre($str), mengganti newline dengan tag break kecuali berada dalam tag pre

URL helper

Berikut ini adalah daftar fungsi url helper:

• site_url($path), mengembalikan URL absolut

• base_url(), mengembalikan URL /

• current_url(), mengembalikan url dari segmen yang sedang di-requrest

• uri_string(), mengambil url setelah domain:port

• index_page(), mengembalikan halaman index

• anchor/anchor_popup/mailto/safe_mailto($segmen,$text,$attrArray=array()), membuat tag anchor

• auto_link($str,$what='both',$toNewWindow), mengubah semua url dan email dalam string menjadi tag anchor

• url_title($str), mengubah string menjadi bagian URI yang legal

• prep_url($url), menambahkan “http://” apabila belum ada

• redirect($url,$method,$httpCode='400'), untuk melakukan redirect dengan metode 'refresh' maupun 'location'

XML Helper

Berikut ini adalah daftar fungsi dalam xml helper:

45

• xml_convert($str), mengubah stringmenjadi entity xml yang valid, kecuali “&” yang sudah menjadi entity xml.

Latihan

Dari sejumlah helper di atas, lanjutkan latihan sebelumnya, dan gunakan minimal 15 helper di atas.

46

Bab 4: JQuery

Tujuan

Praktikan mampu menggunakan jQuery dengan baik.

JQuery

JQuery merupakan salah satu library client-side javascript atau AJAX Framework populer. Beberapa library javascript lainnya diantaranya: Ally, Ample SDK, Artisan JS, Blackbird, Cappucino, Clean AJAX, Cufon, Datejs, DHTMLX, Dojo Toolkit, Echo3, ExtJS, Flot, FUEL, Glow, Google Closure Library, GWT, Himle, iX Framework, Jelly, Joose, Jwee Javascript Toolkit, jQuery UI, jsDraw2D, Knockout, Lively kernel, Microsoft AJAX Library, Midori, MochiKit, MooTools, My Library, OpenLink AJAX Toolkit, PlotKit, PottisJS, Processing.js, Prototype + Script.aculo.us, PUR Javascript Template Engine, Pyjamas, qooxdoo, Raphael, Rialto Toolkit, Rico, SmartClient + SmartGWT, SoundManager, Spark, SproutCore, Spry framework, Sylvester, SWFObject, Taffy DB, typeface.js, Underscore.js, SweetDEV RIA, YUI, Zeleos web toolkit, Zreshk, ZK. Beberapa diantara framework tersebut terintegrasi dengan server side scripting/programming. JQuery yang digunkana dalam praktikum ini adalah versi 1.6.2.

Untuk memakai jQuery, cukup dengan melakukan download dari website jQuery dan melakukan include script javascript yang telah di download seperti berikut ini:

<script src=”path/to/jquery.min.js”></script><script src=”http://jquery.com/src/jquery-latest.js”></script>

Untuk menjalankan source code javascript tertentu ketika doukumen mulai di-load:

window.onload = function() { // do something }

Untuk menjalankan source code javascript dengan jquery ketika dokumen selesai di-load:

$(document).ready( function() { // do something

47

} );

Untuk menambahkan fungsi pada event apapun dapat dilakukan dengan cara yang sama, sebagai contoh, untuk semua anchor ketika terjadi event click:

$(“a”).click( function(e) { e.preventDefault(); // untuk mencegah aksi yang dilakukan otomatis oleh browser} );

Plugins

Berikut ini adalah contoh cara membuat plugins pada jQuery:jQuery.fn.myPlugin = function() { // something to do return this.each( function() { // do something with “this” → selected elements } );}// called with $( … ).myPlugin();

Berikut ini adalah contoh cara membuat plugins dengan option pada jQuery:

jQuery.fn.myPlugin = function(options) { var settings = { value: 10, name: 'test', somethingElse: 'a' }; if( options ) jQuery.extend( settings, options );}// called with $( … ).myPlugin( { value: 3 } );

Berikut ini adalah contoh pembuatan plugin untuk memilih semua checkbox:

jQuery.fn.check1 = function(mode) { mode = mode || 'on'; return this each(function() { switch(mode) { case 'off': this.checked = false; break; case 'on' : this.checked = true ; break; default : this.checked = ! this.checked ; break; } } );}// called with $( ':checkbox' ).check1( 'off' );

Apabila menggunakan banyak library bersamaan, direkomendasikan untuk menggunakan syntax berikut ini dalam membuat plugin agar dapat menggunakan tanda “$”:

( function( $ ) { $.fn.myPlugin2 = function ( bla ) { return this.each( function() { var t = $(this); // do something with t }

48

}} )( jQuery );

Core

Core merupakan library dasar dari jQuery yang dapat digunakan untuk membantu scripting javascript secara umum. Berikut ini adalah daftar fungsi dalam modul core:

• $.holdReady(), untuk menahan pelaksanaan fungsi ready dari dokumen, berikut ini adalah contoh penggunaannya

$.holdReady(true);$.getScript(“something.js”,function() { $.holdReady(false); } );

• $(selectorString,searchContext=document)/(element)/([element,…])/(jqObject)/(), untuk memilih dan mengubah suatu elemen menjadi jqObject

• $(htmlTagsOrText,ownerDocument=document)/(html,{attr:value}), untuk membuat elemen HTML baru

• $.noConflict(removeAll=false), dipanggil sebelum menjalakan source code library lain yang menggunakan tanda “$”, mengembalikan class jQuery

• $.sub(), menduplikat class jQuery sehingga dapat diubah-ubah tanpa mempengaruhi class “$”

• $.when(defferedObject), untuk memanggil callback untuk object yang pengembaliannya tertunda

Selector

Selector merupakan syntax untuk melakukan query atau pemilihan dari elemen-elemen DOM. Syntax selector meminjam dari CSS 1-3 (http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier) beserta tambahan-tambahan tertentu. Perlu diingat, meta karakter tertentu harus ditambahkan tanda “\\” pada bagian depannya, meta karakter tersebut adalah

!”#$%&()*+,./:;<=>?@[\]^{|}~

Berikut ini adalah daftar attribute selector:

49

• tag[attr|=”value”], untuk memilih elemen dengan nilai attribut “attr” tepat “value” atau dimulai dengan “value-”

• tag[attr*=”value”], untuk memilih tag dengan nilai atribut “attr” yang memiliki substring “value”

• tag[attr~=”value”], untuk memilih tag dengan nilai atribut “attr” yang memiliki kata “value” (dipisahkan dengan spasi).

• tag[attr$=”value”], untuk memilih tag dengan nilai atribut “attr” diakhiri dengan “value”, case sensitive

• tag[attr=”value”], untuk memilih tag dengan nilai atribut “attr” tepat “value”

• tag[attr!=”value], untuk memilih tag yang tidak memiliki atribut “attr” tersebut atau memiliki atribut tetapi tidak bernilai “value”

• tag[attr^=”value”], untuk memilih tag dengan nilai atribut “attr” dimulai dengan “value”

• tag[attr], untuk memilih tag yang memiliki atribut “attr”

• tag[attr1=”value”][attr2=”value”], untuk memilih atribut filter dengan operator AND

Berikut ini adalah daftar basic css selector:

• *, untuk memilih semua elemen

• .class, untuk memilih semua elemen yang memiliki class “class”

• tag, untuk memilih semua elemen dengan tag “tag”

• #id, untuk memilih sebuah elemen yang memiliki id “id”

• , , (tanda koma), untuk menggabungkan pemilihan dengan operator OR

Berikut ini adalah daftar basic filter selector

50

• :animated, untuk memilih semua elemen yang sedang melakukan animasi

• :eq(index), untuk memilih elemen pada indeks ke “posisi”

• :even, untuk memilih semua elemen yang berada pada indeks genap

• :first, untuk memilih elemen pertama (indeks ke-0)

• :focus, untuk memilih elemen yang sedang terfokus

• :gt(index), untuk memilih semua elemen yang berada pada indeks lebih besar dari “index”

• :header, untuk memilih semua elemen header (h1, h2, dst)

• :last, untuk memilih elemen terakhir (indeks ke-[n-1])

• :lt(index), untuk memilih semua elemen yang berada pada indeks lebih kecil dari “index”

• :not(selector), untuk memilih semua elemen yang tidak sesuai dengan selector “selector”

• :odd, untuk memilih semua elemen pada indeks ganjil

Berikut ini adalah daftar child filter selector:

• :first-child, untuk memilih tiap anak pertama dari parent

• :last-child, untuk memilih tiap anak terakhir dari parent

• :nth-child(n), untuk memilih tiap anak ke-n dari parent

• :only-child, untuk memilih tiap anak tunggal dari parent

Berikut ini adalah daftar content filter selector:

• :contains(“text”), memilih semua elemen yang mengandung “text” pada innerHTMLnya

• :empty, memilih semua elemen yang tidak memiliki anak ataupun node text

51

• :has(selector), memilih semua elemen yang mengandung elemen sesuai selector “selector”

• :parent, memilih semua elemen yang menjadi parent dari elemen lain, termasuk node text (innerHTML)

Berikut ini adalah daftar form selector:

• :button, mencari semua button

• :checkbox, mencari semua input type='checkbox'

• :checked, mencari semua yang tercentang

• :disabled, mencari semua elemen yang tidak dapat dipilih

• :enabled, mencari semua elemen yang dapat dipilih

• :file, mencari semua elemen input type='file'

• :focus, mencari elemen yang sedang terfokus

• :image, mencari semua elemen input type='image'

• :input, mencari semua elemen input, textarea, select dan button

• :password, mencari semua elemen input type='password'

• :radio, mencari semua elemen input type='radio'

• :selected, mencari semua elemen yang sedang terpilih

• :submit, mencari semua elemen input type='submit'

• :text, mencari semua elemen input type='text'

Berikut ini adalah daftar hierarchy selector:

• parent > child, untuk memilih semua anak dengan kriteira “child” yang memiliki parent dengan kriteria “parent”

• anchestor descendant, untuk memilih semua turunan dengan kriteria “descendant” yang merupkan keturunan

52

dari “anchestor”

• prev + next, untuk memilih sebuah adik dengan kriteria “next” yang memiliki kakak dengan kriteria “prev”

• prev ~ siblings, untuk memilih semua adik dengan kriteria “siblings” yang memiliki kakak dengan kriteria “prev”

Berikut ini adalah daftar visibility filter:

• :hidden, untuk memilih semua elemen yang tidak tampil

• :visible, untuk memilih semua elemen yang tampil

Attribute

Attributes merupakan member function dari class jQuery untuk menambahkan atribut dari sebuah elemen. Berikut ini adalah daftar fungsi attributes:

• addClass(className)/(function(index,currentClasses)), menambahkan class (dipisahkan spasi)

• attr(attrName), mengambil nilai attribut dari elemen pertama dari selector

• attr(attrName,value)/({attrName:value,…})/(function(index,currentAttrMap)), untuk mengisi suatu atribut

• hasClass(className), untuk memeriksa apakah memiliki class “className”

• html(), mengambil isi dari innerHTML

• html(innerHTML)/(function(index,oldHtml)), untuk mengisi innerHTML

• prop(propName), mengambil nilai property (dalam bentuk native, bukan dalam bentuk string) dari elemen pertama dair selector, sebaiknya digunakan untuk selectedIndex, tagName, nodeName, nodeType, ownerDocument,

53

defaultChecked, atau defaultSelected

• prop(propName,value)/({propName:value,…})/(function(index,oldPropValue)), untuk mengisi property

• removeAttr(attrName), untuk menghapus atribut

• removeClass(className)/(function(index,class)), untuk menghapus class

• removeProp(propName), untuk menghapus property

• toggleClass(className)/(className,addOnlyOrRemoveOnly)/(function(index,class,addOnlyOrRemoveOnly)), untuk menambahkan atau menghapus atribut class-class

• val(),untuk mengambil dari atribut value

• val(value)/(function(index,oldValue)), untuk mengeset atribut value

Tranversal

Tranversal merupakan metode untuk memanipulasi hasil selector. Berikut ini adalah filtering transversal:

• eq(index), mengambil elemen posisi ke-index, atau dari total+index apabila index negatif

• filter(selector)/(function(index))/(element)/(jqObject), untuk melakukan seleksi ulang berdasarkan hasil selection

• first(), mengambil elemen dari indeks pertama

• has(selector)/(element), untuk melakukan seleksi ulang pada child hasil selection

• is(selector)/(function(index))/(jqObject)/(element), untuk memeriksa apakah salah satu elemen dari hasil selection mengandung parameter transversal

• last(), mengambil elemen dari indeks terakhir

54

• map(function(index,element)), untuk melakukan pemanggilan fungsi untuk tiap elemen dan menghasilkan array yang berisi kumpulan return value

• slice(start)/(start,end), untuk mengambil elemen dari posisi ke-start sampai ke-end, nilai start dan end dapat negatif

Berikut ini adalah daftar tree tranversal:

• children()/(selector), mengambil semua anak dari hasil selector sebelumnya

• closest(selector,context=document)/(jqObject)/(element), mengambil satu turunan terdekat yang cocok dengan kriteria tranversal

• find(selector)/(jqObject)/(element), mencari tiap turunan yang cocok dengan kriteria tranversal

• next()/(selector), mencari satu adik berikutnya

• nextAll()/(selector), mencari semua adik

• nextUntil()/(lastSelector)/(lastSelector,selector), mencari semua adik sebelum batas tertentu

• offsetParent(), mencari parent terdekat yang memiliki sub-atribut “position” dari style

• parent()/(selector), mencari tiap parent

• parents()/(selector), mencari semua tiap tetua

• parentsUntil()/(lastSelector)/(lastSelector,selector), mencari semua parent sebelum batas tertentu

• prev()/(selector), mencari satu kakak sebelumnya

• prevAll()/(selector), mencari semua kakak

• prevUntil()/(lastSelector)/(lastSelector,selector), mencari semua kakak sebelum batas tertentu

• siblings()/(selector), mencari semua saudara

55

• Berikut ini adalah daftar misc tranversal

• add(selector)/(element)/(html)/(jqObject), menambahkan elemen ke dalam hasil selector sebelumnya

• andSelf(), menggabungkan 2 hasil selector terakhir

• contents(), mengambil semua anak termasuk node text dan komentar

• end(), kembali menuju seleksi ke-2 sebelum terakhir dari chaining

Manipulation

Manipulation member function merupakan fungsi untuk memanipulasi jqObject, selain attribute member function, berikut ini adalah daftar fungsi manipulasi:

• clone(withDataAndEvents=false,deepWithDataAndEvents=false), untuk melakukan duplikasi elemen

• unwrap(), menghapus tiap parent

• wrap(element)/(funcion(index)), untuk membungkus tiap elemen

• wrapAll(element), untuk membungkus menjadi satu hasil selector terakhir

• wrapInner(element)/(function()), untuk membungkus anak dari tiap elemen

• prepend/append/after/insertAfter(content,…)/(function(index,html)), menambahkan content ke bagian depan/belakang dalam/luar tiap elemen

• prependTo/appendTo/before/insertBefore(target), menambahkan elemen-elemen terpilih ke bagian depan/belakang dalam/luar target

• detach()/(selector), menghapus hubungan elemen dari DOM

56

• empty(), menghapus semua node anak dari elemen

• remove()/(selector), menghapus elemen, termasuk tiap elemen di dalamnya dari DOM

• replaceAll(target), mengganti semua elemen hasil selector “target” dengan hasil selector sebelumnya

• replaceWith(content)/(function()), mengganti semua elemen hasil selector terakhir dengan content

Berikut ini adalah daftar fungsi style manipulation:

• css(propName), untuk mengambil nilai CSS

• css(propName,value)/({propName:value,…})/(propName,function(index,value)), untuk mengganti nilai CSS

• height/width()/(value), untuk mengakses/mengganti nilai computed tinggi/lebar elemen pertama tidak termasuk padding

• innerHeight/innerWidth(), untuk mengakses ukuran tinggi/lebar elemen pertama termasuk padding

• outerHeight/outerWidth(includeMargin=false), untuk mengakses ukuran tinggi/lebar elemen pertama termasuk border

• position(), mengambil object yang memiliki property top dan left posisi dari relatif dari parent

• offset(), sama seperti position() tetapi relatif dari dokumen

• offset(coord)/(function(index,coord)), mengatur posisi elemen relatif terhadap dokumen

• scrollLeft/scrollTop()/(value), mengakses/mengubah posisi scroll dari elemen pertama

57

Event

Event member function merupakan fungsi-fungsi yang dapat dipanggil untuk memanipulasi event. Tiap fungsi di bawah ini apabila tidak dituliskan, memiliki parameter “(function(evObject))/(data,function(evObject))” Berikut ini adalah daftar browser event:

• error, untuk menghandle javascript error

• resize, untuk menghandle perubahan ukuran elemen

• scroll, menghandle event scoll

Berikut ini adalah daftar document event:

• load, dipanggil ketika sub-elemen image, script, frame, iframe dan windows selesai load

• ready(function()), dipanggil ketika DOM selesai dibuat

• unload, dipanggil ketika tab browser ditutup

Berikut ini adalah daftar fungsi event handler attachment:

• bind(eventType,data,function(evObject))/(eventType,function(evObject),dontPreventBubbling=true)/({eventType:function(evObject),…}), menambahkan handler untuk event untuk tiap elemen. Parameter eventType dapat berisi: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup atau error. Tiap eventType memiliki shortcut seperti terlihat pada bagian sebelumnya (fungsi-fungsi browser event)

• delegate(selector,eventType,function)/(selector,eventType,data,function)/(selector,{eventType:function(evObject),…}), menambahkan event handler untuk tiap elemen baik yang ada sekarang maupun baru ada di masa depan, eventType dapat ditambahkan '.namaNamespace'

58

• die()/(eventType,function)/({eventType:function,…}), menghapus event handler dari tiap event handler yang ditambahkan melalui live()

• live(eventType,function)/(eventType,data,function)/({eventType:function,…}), melakukan hal yang sama seperti delegate

• one(eventType,function(evObject))/(eventType,data,function(evObject)), menambahkan event handler yang hanya berjalan 1x untuk tiap elemen

• $.proxy(function,context)/(context,functionNameInContext), mengubah “this” di dalam fungsi handler sebagai “context” lain.

• trigger(eventType, [extraParam,…])/(evObject), untuk memanggil event secara manual

• unbind()/(function(evObject))/(evObject)/(eventType,function(evObject),dontUseBind=true), untuk membuang event handler dari tiap elemen

• undelegate(selector,eventType)/(selector,eventType,function)/(selector,{eventType:function(evObject),…})/(namespace), untuk menghilangkan semua delegate yang telah terdaftar

Berikut ini adalah daftar fungsi atau property yang berhubungan dengan event object (evObject):

• $.Event(eventType,{evProp:value,…}), membuat event object baru

• altKey, attrChange, attrName, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, fromElement, handler, keyCode, layerX, layerY, metaKey*, newValue, offsetX, offsetY, originalTarget, pageX*, pageY*, prevValue, relatedNode, relatedTarget*, screenX, screenY, shiftKey, srcElement, target*, toElement, view, wheelDelta, which*, property yang terdapat dalam evObject

59

• evObject.isDefaultPrevented(), untuk mengetahui apakah preventDefault() pernah dipanggil

• evObject.isImmediatePropagation(), untuk mengetahui apakah stopImmediatePropagation() pernah dipanggil

• evObject.isPropagationStopped(), untuk mengetahui apakah stopPropagation() pernah dipanggil

• evObject.namespace, namespace dari object ini (lihat bagian delegate)

• evObject.preventDefault(), mencegah pemanggilan default action dari browser

• evObject.result, mengetahui nilai terakhir yang dikembalikan oleh event handler

• evObject.stopImmediatePropagation(), mencegah pemanggilan event handler lainnya

• evObject.stopPropagation(), mencegah event bubbling, mencegah pemanggilan event handler parent

Berikut ini adalah daftar fungsi form event yang merupakan shortcut untuk binding event: blur, change, focus, select, submit. Berikut ini adalah daftar shortcut untuk keyboard dan mouse event binding: focusin, focusout, keydown, keypress, keyup, click, dblclick, hover, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, toggle(cycleFunction(evObject),…).

Effect

Effect merupakan member function yang berhubungan dengan animasi. Berikut ini daftar fungsi dan property effect:

• hide/show/toggle/fadeIn/fadeOut/slideDown/slideUp(duration,callback)/(duration,easing,callback), menampilkan atau menghilangkan suatu elemen, duration dapat bernilai 'slow' (600), 'fast' (200), atau angka. Easing adalah nama fungsi transisi, bernilai 'swing' dan 'linear' tetapi dapat bertambah

60

apabila menggunakan jQueryUI atau jQuery Easing Plugin

• toggle/fadeToggle/slideToggle(addOnlyOrRemoveOnly), menampilkan elemen apabila true dan menghilangkan elemen apabila false

• $.fx.interval merupakan delay tiap frame dalam animasi, defaultnya 13

• animate({cssProp:value,…},duration,easing,callback)/({cssProp:value,…},options), melakukan animasi berdasarkan properti css, options dapat memiliki property: duration, easing, callback, step (stepCallback), queue (false=immediately) dan specialEasing. Value dapat dimulai dengan operator seperti '+=' atau '-='.

• clearQueue(queueName=fx), menghapus animasi yang belum berjalan

• delay(duration,queueName=fx), menambahkan efek yang hanya berfungsi menahan sementara animasi berikutnya dalam chaining

• dequeue(queueName=fx), untuk menjalankan animasi berikutnya secara bersamaan

• $.fx.off, untuk mematikan semua animasi

• queue(queueName=fx), melihat daftar queue animasi

• queue(queueName=fx,newQueueArray)/(queueName=fx,callback(next)), menumpuki queue dengan nilai yang baru

• stop(clearQueue=false,jumpToEnd=false), menghentikan animasi

• fadeTo(duration,opacity,callback)/(duration,opacity,easing,opacity), mengubah opacity

61

Utilities

Merupakan fungsi-fungsi atau property yang dapat digunakan untuk membantu pemrograman. Berikut ini adalah daftar fungsi dan property utilities:

• $.browser, untuk mengetahui versi browser

• $.data(element,key)/(element,key,value), untuk mengambil atau memasukkan data custom ke dalam salah satu elemen DOM

• $.each(collection,function(index,value)), melakukan iterasi untuk tiap elemen dalam collection

• $.grep(array,function(value,index),invert=false), melakukan duplikasi dan filtering array berdasarkan fungsi

• $.extend(target,obj,…)/extend(true,target,obj,…), melakukan penggabungan dari obj ke merge, apabila parameter pertama adalah true, akan mengembalikan object baru

• $.globalEval(code), melakukan evaluasi dalam konteks global

• $.inArray(value,array), mengembalikan indeks dari value, -1 apabila tidak ada

• $.isArray/isEmptyObject/isFunction/isPlainObject/isWindow/isXMLDoc(obj), untuk mengetahui jenis dari object

• $.makeArray(object), mengubah tiap elemen dalam map menjadi array

• $.map(collection,function(index,value)), berfungsi sama seperti $.each() tetapi juga menghasilkan array hasil pemanggilan fungsi, apabila fungsi mengembalikan null, maka elemen akan dihapus, sedangkan apabila mengembalikan array, maka tiap elemen array anak digabungkan

62

• $.merge(target,source), menggabungkan array

• $.noop(), fungsi yang tidak melakukan apa-apa

• $.now(), mengembalikan waktu saat ini

• $.parseJSON(json), mengubah json string menjadi object

• $.parseXML(xml), mengubah xml menjadi object

• $.removeData(elemen)/(elemen,key), menghapus data dari elemen dom

• $.support, memeriksa dukungan browser, mengandung: ajax, boxModel, changeBubbles, checkClone, checkOn, cors, cssFloat, hrefNormalized, htmlSerialize, leadingWhitespace, noCloneChecked, noCloneEvent, opacity, optDisabled, optSelected, scriptEval(), style, sumitBubbles, tbody

• $.trim(str), menghapus whitespace pada bagian depan dan belakang string

• $.type(obj), mengembalikan tipe object, dapat bernilai: boolean, number, string, function, array, date, regexp atau object

• $.unique(elemetsArray), menghilangkan elemen DOM yang kembar dari array

AJAX

JQuery menyediakan fungsi-fungsi AJAX yang cross-browser. Berikut ini adalah daftar fungsi helper dan global handler ajax:

• ajaxComplete/ajaxError/ajaxSend/ajaxStart/ajaxStop/ajaxSuccess(function(evObject,xhrObject,ajaxOptions)), menjalankan fungsi callback tiap kali event-event ajax untuk tiap elemen dalam hasil selector

• $.param(obj,traditional=false), untuk mengubah object menjadi parameter query string

63

• serialize(), melakukan serialize terhadap tiap elemen dalam hasil selector menjadi parameter query string

• serializeArray(), melakukan serialize terhadap tiap elemen dalam hasil selector menjadi array of object

Berikut ini adalah daftar fungsi singkat untuk melakukan request ajax:

• $.get(url,data=null,function(response,status,xhrObject),dataType), melakukan request GET

• $.getJSON(url,data=null,function(response,status,xhrObject)), melakukan request GET dan mengembalikan hasil JSON pada variabel response

• $.getScript(url,function(response,status)), melakukan request GET dan menjalankannya

• load(url,data=null,function(response,status,xhrObject)), melakukan load dan mengisinya ke dalam hasil selector sebelumnya

• $.post(url,data=null,function(response,status,xhrObject),dataType), sama seperti $.get() tetapi menggunakan method POST

Berikut ini adalah daftar fungsi low-level untuk melakukan request AJAX:

• $.ajax(url,settings)/(settings), untuk melakukan request AJAX, object settings dapat memiliki key: accept, async, beforeSend(xhrObject,settings), cache, complete(xhrObject,status), contents, contentType, context, converters, crossDomain, data, dataFilter(response,type), dataType, error(xhrObject,status,error), global, headers, ifModified, isLocal, jsonp, jsonpCallback, mimeType, password, processData, scriptCharset, statusCode, sucess(response,status,xhrObject), timeout, traditional, type, url, username, xhr, xhrFields. XhrObjects dapat memiliki property: readyState, status, statusText,

64

responseXML/responseText, setRequestHeader(name,value), getAllResponseHeaders(), getResponseHeader(), abort().

• $.ajaPrefilter(dataTypes,function(options,originalOptions,xhrObject))/(function(options,originalOptions,xhrObject)), fungsi untuk melakukan perubahan terhadap options/settings sebelum tiap pemanggilan $.ajax()

• $.ajaxSetup(options), untuk mengubah options secara default.

UI

JQueryUI merupakan salah satu widget toolkit, seperti GWT, YUI, Dojo atau JqueryTools. JQueryUI memiliki beberapa bagian, yaitu:

• Interaction: draggable, droppable, resizable, selectable, sortable

• Widgets: accordion, autocomplete, button, datepicker, dialog, progressbar, slider, tabs

• Utilities: position

• Effects: effectType untuk hide dan show (blind, clip, drop, explode, fade, fold, puff, slide, scale), standaloneEffectType untuk effect (bounce, highlight, pulsate, shake, size, transfer)

Latihan

Dengan mempergunakan jquery, desain dan buatlah website e-commerce sederhana

65

Bab 5: HTML5

Tujuan

Praktikan mampu mengetahui fitur-fitur baru yang terdapat pada HTML5 dibandingkan pendahulunya serta menggunakannya dengan baik.

HTML5

HTML5 merupakan bahasa markup pengembangan dari HTML4 dan XHMTL1.1, hingga saat ini (juli 2011), masih dalam tahap pengembangan. Berikut ini beberapa perbedaan HTML5 dengan pendahulunya:

• Menggunakan aturan parsing yang baru, tidak berbasiskan SGML

• Mampu mempergunakan SVG dan MathML secara inline

• Elemen-elemen baru, diantaranya: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

• Kontrol-kontrol baru, diantaranya: dates and times, email, url, search, number, range, tel, color

• Atribut-atribut baru, diantaranya: charset (meta), async (script), id, tabindex, hidden, data-* (custom attribute)

• Semua elemen yang sudah obsolete/depreceated akan dihilangkan: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

• API baru, yaitu: canvas, media playback, offline storage, document editing, drag-and-drop, cross-document messaging, browser history management, registrasi mime

66

type dan protokol handler, microdata

New Markup

Berikut ini adalah daftar markup baru dalam HTML5:

• doctype, pada HTML5 doctype dituliskan dengan “<!DOCTYPE html>”, jauh lebih singkat dibandingkan HTML4 atau XHTML11

• <article>, untuk kontent external, misalnya dari forum, blog, dll. Berikut adalah contoh penggunaan tag ini:

<article> <a href="http://blog.netscape.com/2007/12/28/ end-of-support-for-netscape-web-browsers"> Netscape is dead</a><br /> AOL has a long history on the internet, being one of the first companies to really get people online..... </article>

• <aside>, untuk content di luar content utama tetapi masih berhubungan, berikut ini adalah contoh penggunaan tag ini:

<p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> The Epcot Center is a theme park in Disney World, Florida. </aside>

• <command>, tombol, radio button atau checkbox, contoh:<menu> <command onclick="alert('Hello World')"> Click Me!</command> </menu>

• <details>, untuk menjelaskan detail dari dokumen atau bagian dokumen

<details> <summary>Copyright 1999-2011.</summary> <p>All pages and graphics on this web site are the property of the company Refsnes Data.</p> </details>

• <summary>, judul, summary dari detail, contoh:<details> <summary>Copyright 1999-2011.</summary> <p>All pages and graphics on this web site are the property of the company Refsnes Data.</p> </details>

67

• <figure>, untuk mengelompokkan bagian dari content terpisah, dapat berupa video

• <figcaption>, judul dari figure, berikut ini contoh penggunaan figure dan figcaption:

<figure> <figcaption>A view of the pulpit rock in Norway</figcaption> <img src="img_pulpit.jpg" width="304" height="228" /> </figure>

• <footer> untuk memberikan keterangan mengenai dokumen, seperti: nama author, tanggal dokumen, informasi kontak dan copyright, contoh:

<footer>This document was written in 2009.</footer>

• <header>, untuk memberikan pengantar dokumen atau bagian, dapat mengandung navigasi, contoh:

<header> <h1>Welcome to my homepage</h1> <p>My name is Donald Duck</p> </header> <p>The rest of my home page...</p>

• <hgroup>, untuk bagian heading, menggunakan <h1> sampai <h6>

• <mark>, memberi tanda teks yang di-highlight, penggunaannya sama seperti tag b, i atau u

• <meter>, untuk memberi informasi mirip dengan progress bar. Memiliki atribut form, high, low, max, min, optimum dan value, contoh:

<meter value="2" min="0" max="10">2 out of 10</meter><br /> <meter value="0.6">60%</meter><meter value="0.2" high="0.7" low="0.3" optimum="0.5">20%</meter>

• <nav>, membuat daftar navigasi, contoh:<nav> <a href="default.asp">Home</a> <a href="tag_meter.asp">Previous</a> <a href="tag_noscript.asp">Next</a> </nav>

• <progress>, penanda progress, contoh:The object's downloading progress: <progress value="22" max="100"> </progress>

68

• <ruby>, untuk memberikan ruby annotation

• <rt>, penjelasan mengenai ruby annotation

• <rp>, untuk browser yang tidak mendukung ruby annotation, contoh:

<ruby> 漢 <rt><rp>(</rp>ㄏㄢ <rp>)</rp></rt> ˋ

</ruby>

• <section>, untuk mengumpulkan bagian dari dokumen seperti chapter, header dan footer, contoh:

<section> <h1>WWF</h1> <p>The World Wildlife Foundation was born in 1961...</p> </section>

• <time>, untuk mendeskripsikan tanggal atau waktu, contoh:<p>We open at <time>10:00</time> every morning.</p> <p>I have a date on <time datetime="2008-02-14">Valentines day</time></p>

• <wbr>, untuk memberikan kesempatan ganti baris pada suatu kata yang panjang, contoh:

<p> To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object. </p>

Berikut ini adalah daftar elemen baru untuk media content dan penggambaran:

• <audio> untuk suara atau music

• <video> untuk video clip

• <source> untuk sumber dari video atau audio

• <embed> untuk embedded content/plugin, memiliki atribut width, height dan type, contoh:

<embed src="helloworld.swf" />

• <canvas>, untuk membuat gambar dengan javascript

Form

Berikut ini adalah daftar elemen baru untuk form:

69

• <datalist>, pilihan jawaban untuk input, berikut ini contoh penggunaan datalist:

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3Schools" value="http://www.w3schools.com" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>

• <keygen> membuat key untuk mengautentikasi user

• <output> membuat output hasil dari pemanggilan fungsi javascript

Berikut ini adalah daftar type baru untuk input:

• tel, untuk nomor telepon

• search, untuk pencarian

• url, untuk input URL

• email, untuk e-mail

• datetime, untuk tanggal dan waktu

• date, untuk tanggal

• month, untuk tahun dan bulan

• week, untuk tahun dan minggu ke

• time, untuk waktu (tanpa tanggal)

• datetime-local, untuk tanggal dan waktu lokal

• number, untuk angka, memiliki atribut min, max dan step

• range, untuk batas atas dan bawah, memiliki atribut yang sama dengan number

• color, untuk warna heksadesimal

Berikut ini adalah daftar atribut baru untuk input:

• autocomplete=off, untuk mematikan autocomplete dari

70

browser, berlaku juga untuk form

• autofocus=autofocus, untuk memberikan fokus ketika halaman di load

• form, untuk input yang berada di luar tag form

• formaction, formenctype, formmethod, formnovalidate, formtarget, untuk melakukan override atribut dari form

• list=id, untuk mendapatkan pilihan dari datalist, berlaku untuk tipe: text, search, url, telephone, email, date pickers, number, range dan color

• min, max dan step, berlaku untuk number dan range

• multiple, berlaku untuk tipe e-mail dan file

• novalidate, untuk mematikan validasi, berlaku untuk form dan tipe: text, search, url, tel, email, password, date pickers, range dan color

• pattern, untuk melakukan validasi dengan regular expression, hanya berlaku untuk tipe: text, search, url, tel, email dan password

• placeholder, untuk memberikan keterangan apabila belum di-isi, berlaku untuk tipe: text, search, url, telephone, email dan password

• required=required, untuk memaksa input diisi sebelum melakukan submit

Video

Berikut ini adalah contoh penggunaan tag video:<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video><video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" />

71

Your browser does not support the video tag. </video>

Berikut ini adalah daftar atribut dalam tag video:

• audio=muted, untuk menunjukkan state dari audio

• autoplay=autoplay, untuk menjalankan video secara otomatis setelah siap, membuat preload=preload

• controls=controls, untuk menunjukkan control bar

• height/width=…px, untuk menunjukkan ukuran video

• loop=loop, untuk melakukan perulangan

• preload=preload, untuk melakukan load secara otomatis bersamaan dengan dokumen

• poster=url, gambar yang menjadi representasi dari video

• src=url, file sumber dari video, dapat digantikan oleh tag source

Audio

Sebelumnya, file audio pada html dimainkan dengan menggunakan flash, namun tidak semua browser terinstall plugin flash. Tag audio mendukung atribut autoplay, controls, loop, preload dan src seperti tag video. Berikut ini adalah contoh penggunaan tag audio:

<audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio> <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>

Web Storage

Web Storage merupakan metode untuk menyimpan data pada client, sebelumnya hal ini dilakukan dengan cookie, tetapi cookie tidak cocok untuk menyimpan data dalam jumlah besar, karena

72

cookie dikirimkan ke server tiap kali terjadi request. Terdapat 2 jenis web storage, yaitu localStorage dan sessionStorage, sessionStorage hanya berlaku untuk sebuah sesi. Untuk mengakses kedua variabel tersebut, sama seperti dengan cara mengakses variabel Object javascript pada umumnya.

Web Workers

Merupakan cara standar untuk menjalankan javascript thread pada background. Dapat diakses dengan menjalankan “new Worker('script.js')”. Tanpa menggunakan worker, maka apabila javascript yang dijalankan membutuhkan proses yang lama, akan membuat browser nampak “hang”.

Offline Web Application

Merupakan cara standar untuk menjalankan web secara offline. Untuk mengaksesnya dibutuhkan file manifest yang ditunjuk oleh atribut manifest pada tag html dalam tiap halaman. File manifest berisi daftar file yang harus dan tidak boleh di-cache oleh browser.

Geolocation

Merupakan cara standar untuk mengirimkan posisi client dalam koordinat bumi. Bagi browser tertentu yang tidak mendukung geolocation, dapat menggunakan library Geo.js.

Canvas

Canvas digunakan untuk melakukan penggambaran dengan menggunakan javascript. Berikut ini contoh pendeklarasian canvas:

<canvas id='test' width='320' height='255'></canvas>

Setelah mendeklarasikan canvas, yang perlu dilakukan adalah melakukan scripting penggambaran dengan javascript. Berikut ini contoh sederhana untuk menggambar kotak:

var cv = document.getElementById('test');var c = cv.getContext('2d');c.fillRect(10,20,30,40);

73

Berikut ini adalah daftar property dan member function dari object canvas:

• width/height, untuk mengatur ukuran kanvas, apabila diubah, maka isi canvas akan hilang

• addEventListener(eventType,function(evObject),false), untuk menambahkan event listener pada object canvas, contoh:

cv.addEventListener('click',function(e){ var pos = getCursorPosition(e); // pos.row, pos.column},false);

Berikut ini adalah daftar property dan member function dari object context:

• fillStyle, untuk mode penggambaran dapat berupa warna CSS, pattern atau object gradien

• fillRect(x,y,w,h), untuk menggambar kotak

• strokeStyle, untuk mode penggambaran garis, pengisiannya sama seperti fillStyle

• strokeRect(x,y,w,h), untuk menggambar border dari kotak

• clearRect(x,y,w,h), untuk menghapus pixel

• moveTo(x,y), untuk memindahkan posisi kursor (pen)

• lineTo(x,y), untuk menggaris, tetapi garis belum akan tampil hingga method strike() dipanggil (berlaku untuk semua fungsi dengan akhiran “To”), posisi kursor pen otomatis berubah kepada koordinat fungsi “To” terakhir.

• LineJoin, untuk mengatur bentuk yang dibentuk dari 2 garis, dapat bernilai: miter (tajam), round, bevel (potong)

• quadraticCurveTo(controlX,controlY,endX,endY), untuk menggambar kurva kuadratik, context point adalah posisi penggambaran terakhir

74

• bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY), untuk menggambar kurva bezier

• arcTo(controlX,controlY,endX,endY,r), untuk menggmabar baris membundar (sperti pojok rounded rectangle)

• lineWidth, untuk mengatur lebar garis

• lineCap, untuk mengatur akhir garis, dapat berisi: butt, round, square

• strike(), untuk melakukan menggambar garis berdasarkan moveTo() dan lineTo()

• beginPath(), untuk mereset isi queue moveTo() dan lineTo()

• closePath(), untuk menutup kurva dari titik terakhir menuju titik pertama, memperbolehkan pemanggilan fill()

• fill(), melakukan penggambaran kurva tertutup sama

75

seperti strike tetapi memiliki isi

• arc(cx,cy,r,startAngle,endAngle,isCW), untuk menggambar garis melingkar, angle harus dikalikan Math.PI

• font, untuk mengubah font, pengisiannya sesuai dengan rule CSS font

• textAlign, dapat di isi dengan start, end, left, right, center

• textBaseline, untuk mengatur posisi relatif penggambaran, dapat bernilai: top, hanging, middle, alphabetic, ideographic, bottom

• save/restore(), melakukan save dan restore matrix transformasi/clipping

• clip(), memberikan batas penggambaran berdasarkan path terakhir

• translate(x,y), memindahkan posisi 0,0

76

• scale(persentaseX,persentaseY), mengubah skala lebar dan tinggi, bila persentase negatif akan melakukan efek mirror

• rotate(angle), memutar kanvas searah jarum jam, angle = Math.PI/180 * derajat

• transform(a,b,c,d,e,f), melakukan transformasi matriks secara manual, shear dapat dilakukan dengan a=1, b=shearY, c=shearX, d=1, e=f=0

• fillText(str,x,y), untuk menuliskan text

• strokeText(str,x,y), untuk menuliskan outline text

• createLinearGradient(x1,y1,x2,y2), untuk membuat object gradien linear

• createRadialGradient(x1,y1,r1,x2,y2,r2), untuk membuat object gradien radial

• createPattern(image,repeat), untuk membuat fill pattern object, repeat dapat bernilai: repeat-x, repeat-y, no-repeat

• drawImage(image,x,y), menaruh gambar pada kanvas, image dapat DOM Object yang sudah ada (dari getElementById) ataupun dapat dibuat secara realtime (new Image()), contoh:

var i = new Image()i.src = 'bla.jpg'i.onload = function() { c.drawImage(i,0,0); }

• drawImage(image,x,y,w,h), menaruh gambar pada kanvas dengan melakukan scaling

• drawImage(image,sx,sy,sw,sh,x,y,w,h), mengambil sebagian

77

gambar dan menaruh gambar pada kanvas dengan melakukan scaling

• shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, untuk mengatur bayangan dari penggambaran fill() berikutnya

• getImageData(x,y,w,h), mengambil object imageData

• putImageData(imageDataObject,x,y), menumpuk imageData pada kanvas

• globalAlpha=persentase, untuk mengatur transparansi

• globalCompositeOperation, untuk mengatur operasi penggambaran

Berikut ini adalah daftar fungsi dari object gradien:

• addColorStop(persentase,warna), untuk menambahkan warna dalam gradien

Berikut ini adalah daftar fungsi dari object imageData

78

• data, merepresentasikan array yang berisi warna pixel dalam gambar, yaitu: red (index+0), green, blue dan alpha (index+3), warna bernilai 0-255

Untuk membuat animasi, disarankan menggunakan library Kinetic.js yang mampu mengatur frame rate dan region detection.

Latihan

Buatlah tirulah logo perusahan dengan menggunakan canvas

Buatlah 2 buah halaman yang mempergunakan tag audio dan video HMTL5, tambahkan dalam website pribadi anda

79

Bab 6: CSS3

Tujuan

Praktikan mampu mengetahui fitur-fitur baru dalam CSS3 dan mempergunakannya dengan baik.

CSS3

CSS3 merupakan pengembangan dari CSS2 yang tetap kompatibel dengan CSS versi sebelumnya. Beberapa property baru yang ada dalam CSS3 pada browser lama harus ditambahkan prefix “-moz-” untuk mozilla, “-webkit-” untuk chrome dan safari.

Unit

Terdapat beberapa unit baru dalam CSS3, diantaranya:deg sudut/degree(0deg-360deg)s durasi/second untuk durasims.....durasi/millisecond untuk durasi

Font

Berikut ini adalah daftar nilai font-family yang aman dipakai dalam web:

• Keluarga Serif

◦ Georgia, serif

◦ “Palatino Linotype”, “Book Antiqua”, Palatino, serif

◦ “Times New Roman”, Times, serif

• Keluarga Sans-Serif

◦ Arial, Helvetica, sans-serif

◦ Arial Black, Gadget, sans-serif

80

◦ "Comic Sans MS", cursive, sans-serif

◦ Impact, Charcoal, sans-serif

◦ "Lucida Sans Unicode", "Lucida Grande", sans-serif

◦ Tahoma, Geneva, sans-serif

◦ "Trebuchet MS", Helvetica, sans-serif

◦ Verdana, Geneva, sans-serif

• Keluarga Monospace

◦ "Courier New", Courier, monospace

◦ "Lucida Console", Monaco, monospace

Aural

Merupakan property CSS yang membantu manusia yang memiliki keterbatasan tertentu. Berikut ini daftar property dan nilai bagian aural:

azimuth: (ANGLE)|left-side|far-left|left|center-left|center|center-right|right|far-right|right-side|behind|leftwards|rightwardscue: (cue-before) (cue-after)cue-before|cue-after: (URL)|noneelevation: (ANGLE)|below|level|above|higher|lowerpause: (pause-before) Opause-after)pause-before|pause-after: (durasi|persentase)pitch: (frequency)|x-low|low|medium|high|x-highpitch-range: (angka)play-during: auto|none|(URL)|mix|repeatrichness: (angka)speak: normal|none|spell-outspeak-header: always|oncespeak-numeral: digits|continuousspeak-punctuation: none|codespeech-rate: (angka)|x-slow|slow|medium|fast|x-fast|faster|slowerstress: (angka)voice-family: (generic-voice|specific-voice)volume: (angka|persentase)|silent|x-soft|soft|medium|loud|x-loud

Selector

Berikut ini daftar selector yang tidak terdapat pada CSS2:p~ul

81

/* memilih semua el yang didahului oleh p */a[src^='https'] /* memilih semua a yang nilai atribut src-nya dimulai dengan “https” */a[src$='.pdf'] /* memilih semua a yang nilai atribut src-nya diakhiri dengan “.pdf” */a[src*='bla'] /* memilih semua a yang nilai atribut src-nya mengandung substring “bla” */

Berikut ini adalah daftar pseudo class yang tidak terdapat dalam CSS2:

p:first-of-type, p:last-of-type, p:only-of-type, p:nth-of-type(n), p:nth-last-of-type(n) /* memilih elemen p yang pertama/terakhir/satu-satunya anak/ke-n dari depan/ke-n dari belakang dengan tipe tersebut dari parent-nya */p:only-child, p:nth-child(n), p:nth-last-child(), p:last-child /* memilih elemen p yang satu-satunya anak/anak ke-n dari depan/anak ke-n dari belakang/anak terakhir dari parentnya */:root /* memilih dokumen */p:empty /* memilih p yang tidak memiliki anak (termasuk node text) */input:enabled, input:disabled, input:checked /* memilih semua input yang enabeld/disabled/tercentang */:not(p) /* memilih semua elemen yang bukan p */::selection /* memilih semua elemen yang sedang dihighlight oleh user */

Color

Nilai warna dalam CSS dapat menggunakan format berikut ini:

• Hex Format: #RRGGBB. RR, GG dan BB harus bernilai antara 00-FF

• RGB Desimal: rgb(R,G,B). R, G dan B harus bernilai 0-255 atau 0%-100%

• RGBA Desimal: rgba(R,G,B,A). A harus bernilai 0.0-1.0

• HSL (hue, saturation, lightness): hsl(H,S,L). H harus bernilai 0-360 dimana 0/360 adalah merah, 120 adalah hijau dan 240 adalah biru. S harus bernilai 0%-100% dimana 0% adalah abu-abu dan 100% adalah warna penuh, L juga harus bernilai 0%-100% dimana 0% adalah gelap dan 100% adalah

82

terang.

• HSLA: hsla(H,S,L,A)

Berikut ini daftar warna dalam CSS3:AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGrey #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkSlateGrey #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DimGrey #696969 DodgerBlue #1E90FF FireBrick #B22222 FloralWhite #FFFAF0 ForestGreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC GhostWhite #F8F8FF Gold #FFD700

GoldenRod #DAA520 Gray #808080 Grey #808080 Green #008000 GreenYellow #ADFF2F HoneyDew #F0FFF0 HotPink #FF69B4 IndianRed #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA LavenderBlush #FFF0F5 LawnGreen #7CFC00 LemonChiffon #FFFACD LightBlue #ADD8E6 LightCoral #F08080 LightCyan #E0FFFF LightGoldenRodYellow #FAFAD2 LightGray #D3D3D3 LightGrey #D3D3D3 LightGreen #90EE90 LightPink #FFB6C1 LightSalmon #FFA07A LightSeaGreen #20B2AA LightSkyBlue #87CEFA LightSlateGray #778899 LightSlateGrey #778899 LightSteelBlue #B0C4DE LightYellow #FFFFE0 Lime #00FF00 LimeGreen #32CD32 Linen #FAF0E6 Magenta #FF00FF Maroon #800000 MediumAquaMarine #66CDAA MediumBlue #0000CD MediumOrchid #BA55D3 MediumPurple #9370D8 MediumSeaGreen #3CB371 MediumSlateBlue #7B68EE MediumSpringGreen #00FA9A MediumTurquoise #48D1CC MediumVioletRed #C71585 MidnightBlue #191970 MintCream #F5FFFA MistyRose #FFE4E1 Moccasin #FFE4B5 NavajoWhite #FFDEAD Navy #000080 OldLace #FDF5E6 Olive #808000

83

OliveDrab #6B8E23 Orange #FFA500 OrangeRed #FF4500 Orchid #DA70D6 PaleGoldenRod #EEE8AA PaleGreen #98FB98 PaleTurquoise #AFEEEE PaleVioletRed #D87093 PapayaWhip #FFEFD5 PeachPuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD PowderBlue #B0E0E6 Purple #800080 Red #FF0000 RosyBrown #BC8F8F RoyalBlue #4169E1 SaddleBrown #8B4513 Salmon #FA8072 SandyBrown #F4A460 SeaGreen #2E8B57

SeaShell #FFF5EE Sienna #A0522D Silver #C0C0C0 SkyBlue #87CEEB SlateBlue #6A5ACD SlateGray #708090 SlateGrey #708090 Snow #FFFAFA SpringGreen #00FF7F SteelBlue #4682B4 Tan #D2B48C Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE Wheat #F5DEB3 White #FFFFFF WhiteSmoke #F5F5F5 Yellow #FFFF00 YellowGreen #9ACD32

Animation

Berikut ini adalah daftar property baru dari CSS3 untuk mengatur animasi:

1. [keyFrameDefinition] → (percentage)|from|to { [cssStyles]; … }@keyframes (keyFrameName) { [keyFrameDefinition] …

2. }3. animation: (animation-name) (animation-duration)

(animation-timing-function) (animation-delay) (animation-iteration-count) (animation-direction)

4. animation-name: (keyFrameName)|none5. animation-duration: (durasi)|06. animation-timing-function: linear|ease|ease-in|ease-out|

ease-in-out|cubic-bezier(n,n,n,n)7. animation-delay: (durasi)8. animation-iteration-count: (angka)|infinite|19. animation-direction: normal|alternate10. animation-play-state: paused|running

Background

Berikut ini daftar property background baru dalam CSS3:1. background: (background-color) (background-position)

(background-size) (background-size) (background-repeat) (background-origin) (background-clip) (background-attachment) (background-image)

2. background-size: (panjang|persentase)|cover|contain

84

3. background-origin|background-clip: padding-box|border-box|content-box

Borders

Berikut ini daftar property border baru dalam CSS3:1. border-radius: (panjang|persentase) (panjang|persentase)

(panjang|persentase) (panjang|persentase) / (panjang|persentase) (panjang|persentase) (panjang|persentase) (panjang|persentase)

2. border-top-left-radius|border-top-right-radius|border-bottom-right-radius|border-bottom-right-radius: (panjang|persentase) (panjang|persentase)

3. border-image: (border-image-source) (border-image-slice) (border-image-width) (border-image-outset) (border-image-repeat)

4. border-image-source: none|(image)5. border-image-slice: (panjang|persentase)|fill6. border-image-width: (panjang|persentase)|auto7. border-image-outset: (panjang|angka)8. border-image-repeat: stretch|repeat|round9. box-shadow: (panjang) (panjang) (panjang) (panjang) (warna)

inset

Box Model

Berikut ini adalah daftar property baru untuk box model:1. overflow-x|overflow-y: visible|hidden|scroll|auto|no-

display|no-content2. overflow-style: auto|scrollbar|panner|move|marquee3. rotation: (sudut)4. rotation-point: left|right|center|(persentase) top|center|

bottom|(persentase)

Color

Berikut ini daftar property baru untuk warna:1. color-profile2. opacity: (0-1.0)|inherit3. rendering-intent

Content

Berikut ini daftar property baru untuk content:1. bookmark-label2. bookmark-level3. bookmark-target4. float-offset5. hyphenate-after

85

6. hyphenate-before7. hyphenate-character8. hyphenate-lines9. hyphenate-resource10. hyphens11. image-resolution12. marks13. string-set

Flexible Box

Berikut ini adalah daftar property baru untuk flexible box:1. box-align: start|end|center|baseline|stretch2. box-direction: normal|reverse|inherit3. box-flex: (angka)4. box-flex-group: (integer)5. box-lines: single|multiple6. box-ordinal-group: (integer)7. box-orient: horizontal|vertical|inline-axis|block-axis|

inherit8. box-pack: start|end|center|justify

Font

Berikut ini daftar property font baru:1. @font-face {

font-family: newFontFamily; src: (url);..font-stretch: (font-stretch)..font-style: (font-style)..font-weight: (font-weight) unicode-range: (unicode-range)}

2. font-size-adjust: (angka)|none|inherit3. font-stretch: wider|narrower|ultra-condensed|extra-

condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit

Generated Content

Berikut ini adalah daftar property untuk generated content:1. content: (string)|none|normal|counter|attr(attrName)|open-

quote|close-quote|no-open-quote|no-close-quote|url(url)|inherit …

2. counter-increment|counter-reset: none|(angka)|inherit3. quotes: (string) (string) (string) (string)4. crop5. move-to6. page-policy

86

Grid

Berikut ini daftar property baru untuk grid:1. grid-columns|grid-rows: (panjang|persentase)|none|inherit

Hyperlink

Berikut ini daftar property baru untuk hyperlink:1. target: (target-name) (target-new) (target-position)2. target-name: current|root|parent|new|modal|(string)3. target-new: window|tab|none4. target-position: above|behind|front|back

Linebox

Berikut ini daftar property baru untuk linebox:1. alignment-adjust2. alignment-baseline3. basline-shift4. dominant-baseline5. drop-initial-after-adjust6. drop-initial-after-align7. drop-initial-before-adjust8. drop-initial-before-align9. drop-initial-size10. drop-initial-value11. inline-box-align12. line-stacking13. line-stacking-ruby14. line-stacking-strategy15. text-height

Marquee

Berikut ini daftar property baru untuk marquee:1. marquee-direction2. marquee-play-count3. marquee-speed4. marquee-style

Multi-column

Berikut ini daftar property untuk multi-column:1. column-count: (integer)|auto2. column-fill: balance|auto3. column-gap: (panjang)|normal4. column-rule: (column-rule-width) (column-rule-style)

(column-rule-color)

87

5. column-rule-color: (warna)6. column-rule-style: none|hidden|dotted|dashed|solid|double|

groove|ridge|inset|outset7. column-rule-width: thin|medium|thick|(panjang)8. column-span: 1|all9. column-width: auto|(panjang)10. columns: (column-width) (column-count)

Paged Media

Berikut ini daftar property baru untuk paged media:1. fit2. fit-position3. image-orientation4. page5. size

Ruby

Berikut ini daftar property baru untuk ruby:1. ruby-align2. ruby-overhang3. ruby-position4. ruby-span

Speech

Berikut ini daftar property baru untuk speech:1. mark2. mark-after3. mark-before4. phonemes5. rest6. rest-after7. rest-before8. voice-balance9. voice-duration10. voice-pitch11. voice-pitch-range12. voice-rate13. voice-stress14. voice-volume

Text

Berikut ini daftar text property baru untuk text:1. text-align-last2. hanging-punctuation: none|first|last|allow-end|force-end3. text-justify: auto|inter-word|inter-ideograph|inter-

88

cluster|distribute|kashida|trim4. punctuation-trim: none|start|end|allow-end|adjacent5. text-outline: (panjang) (panjang) (warna)6. text-overflow: clip|ellipsis|(string)7. text-shadow: (panjang) (panjang) (panjang) (warna)8. normal|none|unrestricted|suppress9. word-break: normal|break-all|hyphenate10. word-wrap: normal|break-word

2D/3D Transform

Berikut ini adalah daftar property baru untuk 2D/3D transformation:

1. transform: none|(fungsiTransformasi)2. transform-origin: left|center|right|(panjang|persentase)

top|center|bottom|(panjang|persentase) (panjang)3. transform-style: flat|preserve-3d4. perspective: (angka)|none5. perspective-origin: left|center|right|(panjang|persentase)

top|center|bottom|(panjang|persentase)6. backface-visibility: visible|hidden

Berikut ini adalah daftar fungsi transformasi untuk mengisi property transform:

1. matrix(a,b,c,d,e,f)2. matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)3. translate(x,y)4. translate3d(x,y,z)5. translateX(x)6. translateY(y)7. translateZ(z)8. scale(x,y)9. scale3d(x,y,z)10. scaleX(x)11. scaleY(y)12. scaleZ(z)13. rotate(sudut)14. rotate3d(x,y,z,sudut)15. rotateX(sudut)16. rotateY(sudut)17. rotateZ(sudut)18. skew(sudut,sudut)19. skewX(sudut)20. skewY(sudut)21. perspective(n)

Transition

Berikut ini adalah daftar property baru untuk transisi:1. transition: (transition-property) (transition-duration)

(transition-timing-function) (transition-delay)2. transition-property: none|all|(cssStyle),…3. transition-duration: (durasi)|0

89

4. transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)

5. transition-delay: (durasi)

User Interface

Berikut ini daftar property baru untuk user-interface:1. appearance: normal|icon|window|button|menu|field2. box-sizing: content-box|border-box|inherit3. icon: auto|(URL)|inherit4. nav-down|nav-left|mav-right|nav-up: auto|(id)|

(targetFrame)|inerhit5. nav-index: auto|(angka)|inherit6. outline-offset: (panjang)|inherit7. resize: none|both|horizontal|vertical

Latihan

Ubahlah salah satu halaman website anda dengan menggunakan gradient, animation, border dan multi-column

90

Daftar ReferensiWeb Application Frameworkhttp://en.wikipedia.org/wiki/Web_application_frameworkCodeIgniter User Guidehttp://codeigniter.com/user_guide/Getting Started with jQueryhttp://docs.jquery.com/Tutorials:Getting_Started_with_jQueryPlugins Authoringhttp://docs.jquery.com/Plugins/AuthoringHTML5http://www.w3schools.com/html5/default.asphttp://diveintohtml5.org/http://www.html5canvastutorials.com/tutorials/CSS3http://www.w3schools.com/css3/default.asp

91