modul 1 php lanjut (modularisasi, pengaksesan file)€¦ · tugas praktikum 1. tulis kesimpulan...

1

MODUL 1 PHP Lanjut

(Modularisasi, Pengaksesan File)

1. Dasar teori

Modularisasi Modularisasi adalah penyusunan/pembuatan program berdasarkan modul-

modul. Modul dapat berupa fungsi atau prosedur. Jenis modularisasi di dalam PHP antara lain : § require() § include() § require_once() § include_once() 1.1.Mengakses File

PHP menyediakan sejumlah fungsi yang dapat digunakan untuk melakukan interaksi dengan file. Ada fungsi untuk melakukan pembuatan, pembukaan, penulisan dan penghapusan file. Urutan pengaksesan file adalah seperti yang ditunjukkan pada gambar 7.9:

Tujuan : Mampu menjelaskan perintah-perintah PHP (modularisasi, pengaksesan file) dan membuat aplikasi dengan perintah-perintah PHP.

Tugas Pendahuluan 1. Ada 4 jenis Modularisasi dalam PHP, jelaskan masing-masing

dengan contoh: a. Require() b. Include() c. Require_once() d. Include_once()

2. Jelaskan apa yang dimaksud dengan pengaksesan file! 3. jelaskan apa saja fungsi dari pengaksesan file!

2

Gambar 7.9 Skema pengaksesan file

Sebuah file dapat dibayangkan seperti buku. Bila ingin membaca isi sebuah

buku tersebut , maka perlu membuka buku terlebih dahulu. Serupa dengan hal tersebut maka bisa dilakukan operasi pembacaan atau perekaman data pada berkas. Selanjutnya jika t idak lagi bermaksud menggunakan berkas tersebut, maka perlu menutup berkas. 1.2. Pemeriksaan File

Pemeriksan apakah file yang akan kita gunakan dalam aplikasi yang kita buat sangat penting. Pemeriksaan file memberikan kepastian kepada program apakah file yang akan diproses sudah ada atau belum, jika belum ada pakah perlu dibuat dulu filenya atau langsung mmebrikan pesan peringatan kepada pemakai bahw file yang akan digunakan atau diproses tidak ada. Skrip secara umum untuk pemeriksaan file adalah: file_exists(“nama file”). Untuk lebih jelasnya seperti dibawah in i:

<?php $nama_file =”pesan.txt”; if(file_exists($nama_file){ echo “FILE $nama_file SUDAH ADA!”; }else{ echo “FILE $nama_file BELUM ADA!”; } ?>

1.3. Membuk a File

Untuk mengakses dan mengubah isi file, maka dibutuhkan file descriptor adalah suatu variable yang digunakan untuk mewakili file tertentu. File descriptor didapat dengan menggunakan fungsi PHP: fopen() untuk membuka file. Bentuk pemanggilan fungsi ini adalah sebagai berikut:

3

fopen (nama_berkas , mode)

§ Fungsi fopen membutuhkan 2 parameter yaitu nama_berkas dan mode (jenis akses).

§ Nama berkas bertipe string yang merupakan nama file yang akan dibuka. Harus berada dalam d irektori yang sama dengan tempat script php yang memanggilnya.

§ Mode (jenis akses) bertipe string yang digunakan untuk menentukan perlakuan yang diperbolehkan terhadap file yang dibuka. Ada beberapa mode (jenis akses) yaitu:

Mode Keterangan r File hanya bisa dibaca. Penunjuk File akan diletakkan diawal

berkas r+ File dibuka dengan mode baca dan tulis (artinya, bisa merekam

data atau membaca data). Penunjuk File akan diletakkan diawal berkas.

w Mode perekaman data. File akan d iciptakan kalau belum ada. Kalau sudah ada, isinya akan dihapus.

w+ File dibuka dengan mode baca dan tulis (artinya, bisa merekam dan atau membaca data). File akan diciptakan kalau belum ada. Kalau sudah ada, isinya akan dihapus.

a Mode untuk penambahan data. Pada saat file dibuka, penunjuk file diletakkan pada akhir file. Apabila berkas belum ada, file akan diciptakan.

a+ File dibuka dengan mode baca dan tulis (artinya, bisa merekam data atau membaca data). Penunjuk file akan diletakkan diakhir file. Apabila belum ada, file akan diciptakan.

b Digunakan pada file system windows yang membedakan file text dan binary.

1.4. Membaca Isi File

Setelah file berhasil dibuka maka data dapat dilakukan pembacaan file atau memanipulasi file. Ada beberapa fungsi yang digunakan untuk melakukan manipulasi file diantaranya: § Fungsi Menyimpan Data ke File

Proses penyimpanan data ke dalam file membutuhkan fungsi fputs(). Bentuk pemanggilannya:

fputs (pegangan, data) Dalam hal in i argumen pegangan menyatakan pegangan file yang

diperoleh ketika memanggil fopen. Dan argument data (bertipe string) menyatakan data yang akan direkam. Fungsi memberikan n ilai balik berupa: § TRUE kalau data berhasil direkam

4

§ FALSE jika data gagal d irekam. Contoh: $pegangan = fopen (“BUKUTAMU.DAT”,”a”); fputs ($pegangan,”devie”);

§ Fungsi Membaca Data ke File Proses pembacaan data yang terdapat pada file membutuhkan fungsi fgets(). Fungsi fgets() merupakan kebalikan dari fputs(). Bentuk pemanggilannya:

fgets (pegangan, panjang)

arugen pegangan menyatakan pegangan file yang diperoleh ketika memanggil fopen (yang menyatakan file yang akan d ibaca). Argument panjang menyatakan jumlah karakter yang akan dibaca. Contoh: $pegangan=fopen (“BUKUTAMU.DAT”,”r”); fgets($pegangan,255);

§ Fungsi Penunjuk Akhir Berkas Proses untuk memeriksa apakah penunjuk file sedang menunjuk akhir file atau tidak mengggunakan fungsi feof. Bentuk pemanggilannya:

feof (peganngan)

Fungsi ini menghasilkan nilai TRUE kalau penunjuk file sedang menunjuk akhir file. Untuk keadaan lainnya, nilai baliknya berupa FALSE. Contoh: $pegangan=fopen(“BUKUTAMU.DAT”,”r”); feof($pegangan);

2.Kegiatan Praktikum :

1. Setelah mengenal sejumlah fungsi yang terkait dengan berkas maka buat program dengan PHP dalam mengimplementasikan buku tamu. Dimana buku tamu in i dengan tujuan memungkinkan pengunjung memasukkan data pribadi dan memberi komentar, silahkan ketik koding di bawah ini, amat i hasilnya

5

2. Setelah membuat web desain buku tamu, ketiklah simpan.php untuk

menyimpan data yang dimasukkan pada file buku tamu diatas

7

3. Ketik bukutamu.php di bawah ini dan modifikasi programnya untuk

menampilkan siapa saja tamu yang pernah masuk ke web kita, contoh tampilannya seperti di bawah ini.

10

3. Tugas Praktikum

1. Tulis kesimpulan anda mengenai praktikum d i atas 2. PHP memungkinkan suatu kode yang disimpan dalam sutu berkas

disertakan kedalam suatu skrip PHP menggunakan pernyataan include. Hal ini sangat berguna jika mempunyai sederetan kode (misalnya definisi suatu fungsi, definisi kosntanta, atau kode yang lain) yang sering digunakan pada berbeagai skrip PHP yang dibuat. Adapun bentuk pernyataan include adalah sebagai berikut: include (nama_berkas) Pernyataan include mengasumsikan bahwa berkas eksternal yang akan diproses adalah HTML. Buat desain web seperti di bawah in i, d imana terdiri dari 2 file php yaitu forminclude.php untuk input data dan include.php sebagai file eksternal untuk menukar nilai pertama menjadi kedua dan sebaliknya

11

File Include.php

5. Referensi

1. Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”. ANDI Yogyakarta.Yogyakarta, 2003.

2. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & MYSQL”. PT. Elex Komputindo. Jakarta. 2005.

3. Chris Bates, Web Programming: Build ing Internet Applications, Third Ed ition, John Wiley & Sons Ltd, England, 2006.

4. Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006.

12

5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”, Gava Media, Yogyakarta. 2007.

6. Welling Luke, Thompson Laura, ”PHP and MySQL Web Development”, Sams Publishing, 2003.

7. http://www.php.net 8. http://www.mysql.com

9. http://www.w3c.org

10. http://www.ilmukomputer.com

http://www.php.net/

http://www.mysql.com/

http://w3c.org/

http://www.ilmukomputer.com/

13

MODUL II BASISDATA MYSQL DAN KONEKSI

1. Dasar Teori

Basis data adalah sekumpalan in formasi yang diatur agar mudah dicari. Dalam art i umum basis data adalah sekumpulan data yang diproses dengan bantuan komputer yang memungkinkan data dapat diakses dengan mudah dan tepat, yang dapat digambarkan sebagai akt ifitas dari satu atau lebih organisasi yang berelasi.

MYSQL termasuk jenis RDBMS (Relasional Database Management System). Sedangkan RDBMS sendiri akan lebih banyak mengenal istilah seperti tabel, baris dan kolom digunakan dalam perintah-perintah di MYSQL. MYSQL merupakan sabuah basis data yang mengandung satu atau sejumlah tabel. Tabel terdiri atas sejumlah baris dan setiap baris mengandung satu atau beberapa kolom. Didalam PHP telah menyediakan fungsi untuk koneksi ke basis data dengan sejumlah fungsi untuk pengaturan baik menghubungkan maupun memutuskan

Tujuan : Mampu menggunakan dan mengaplikasikan Basis Data MySQL serta mengkoneksikannya dengan PHP.

PrePraktikum 1. Apakah yang anda ketahui tentang basis data? 2. Sebutkan operator-operator dan fungsi-fungsi pada MYSQL serta

jelaskan setiap bagian yang mendukung operator dan fungsi tersebut? 3. Apa yang anda ketahui tentang query serta sebutkan tiga golongan dari

Pernyataan (statement) SQL? 4. Apa yang anda ketahui tentang function? 5. Jelaskan apa kegunaan dari:

a. Fungsi String b. Fungsi fclose c. Fungsi fgets d. Fungsi fputs e. Fungsi Date f. Fungsi Mail g. Fungsi fopen h. Fungsi feof

14

koneksi dengan server database MySQL sebagai sarana untuk mengumpulkan informasi.

1.1 Fungsi-Fungsi Yang disediakan Oleh PHP

1. Fungsi String PHP menyediakan banyak sekali fungsi-fungsi yang berhubungan dengan string. Beberapa diantaranya adalah

- String strlen (string str) - string strtoupper (string string) - string substr (string, string, int, string [,int length]) - dst 2. Fungsi Date

Fungsi date dapat digunakan untuk mempero leh tanggal atau jam pada system (server). Bentuk pemanggilan : date(string_format) Nilai balik berupa string yang tergantung oleh nilai pada argumennya.

Argumen Nilai Balik D Nama hari yang terdiri atas tiga huruf (misalnya “Sun” dan

“Fri”); F Nama bulan sekarang (misalnya “January”) l (Huruf L Kecil) Nama hari sekarang, dengan format panjang (misalnya,

“Friday”) M Nama bulan, terdiri atas tiga huruf, misalnya “Jan” Y Tahun dalam bentuk 4 dig it. Misalnya, “2009” t Jumlah hari pada bulan sekarang (“28” sampai dengan “31”) d hari sekarang dengan format angka

3. Fungsi File Fungsi yang digunakan baik untuk kebutuhan pembukaan, pemanipulasi maupun menutup file. Fungsi-fungsi tersebut diantaranya:

- Bool fopen (string filename, string mode) - int fwrite (resource handle, string string[, int length) - bool fclose (resource handle) - dst

1.2 Koneksi Ke Database

PHP menyediakan fungsi untuk koneksi ke database dengan sejumlah fungsi untuk pengaturan baik menghubungkan maupun memutuskan koneksi dengan server database MySQL. Selain MySQL, PHP juga menyediakan beragam fungsi untuk melakukan hubungan dengan server database misalnya database MS SQL Server, mSQL, Oracle dan sebagainya. Kebanyakan fungsi koneksi ke server

15

database mengunakan pola yang sama yaitu server, port, user, password. Fungsi-fungsi tersebut adalah:

1. mysql_connect(host,user,password) Fungsi ini digunakan untuk membuka koneksi dengan server MySQL.

Parameter yang digunakan sebagai berikut: Host: nama server dengan server local dapat dengan menggunakan localhost. User: user yang terdaftar dalam MySQL yang digunakan untuk login ke server. Password: password dari user yang melakukan koneksi.Contoh:

$host = "localhost"; $name = "root"; $pass = ""; $conn =mysql_connect($host,$name,$pass);

2. mysql_select_db(nama_database,nama_koneksi)

Fungsi ini digunakn untuk memilih database yang akan digunakan. Contoh:

$conn=mysql_connect("localhost","root",""); $sukses=mysql_select_db("perpustaan",$conn); 3. mysql_query(perintah_query,nama_koneksi)

Perintah ini digunakan untuk mengirimkan query ke server database melalui link nama koneksi. Fungsi in i mengembalikan nilai FALSE baik CREATE, UPDATE, DELETE, DROP, dll. Contoh:

$conn=mysql_connect("localhost","root",""); $sql="select nama_anggota, password from anggota where nomor_anggota='$username'"; $rs=mysql_query($sql,$conn); 4. mysql_fetch_array(hasil_query)

Fungsi ini d igunakan untuk melakukan pembacaan record hasil query yang dilakukan. Pembacaan ini d ilakukan mulai dari record pertama sampai nilai terakhir. Tiap record dibaca, dibentuk menjadi array dengan index numeric dari 0 sampai dengan n-1 dan index assosiatif dengan index adalah nama field dari table. 5. mysql_fetch_row(hasil_query)

Fungsi ini mempunyai hampir sama dengan mysql_fetch_array tetapi array hasil pembacaan data hanya menggunakan index numeris saja yang dimulai dari 0 untuk kolom pertama samapai n -1 untuk kolom terakh ir hasil query. 6. mysql_result(hasil_query,no_record,nama_field),

16

Fungsi ini berguna untuk mengambil langsung nilai hasil query pada suatu baris dan kolom tertentu (satu sel) dengan menyebutkan parameter variabel hasil proses query, no_record, untuk nomor baris (dimulai dari 0) dan nama field.

7. mysql_num_field(hasil_query)

Fungsi berguna untuk mendapatkan jumlah field dari hasil query. Contoh:

$jum_kolom=mysql_num_fields($rs); 8. mysql_num_rows(hasil_query)

Fungsi ini berguna untuk mendapatkan jumlah baris dari hasil query. Menghasilkan suatu array yang berisi seluruh ko lom dari sebuah baris pada suatu himpunan hasil. Mengambil data secara baris per baris. Data yang diambil dalam bentuk array (elemen dari array adalah field-field dari tabel data). Contoh:

$jml_baris=mysql_num_rows($rs);

2. Kegiatan Praktikum

1. Aktifkan database db_Akademik dan table mahasiswa, klik tombol structure, cek table mahasiswa, kemudian klik icon structure

Gambar 2.1. Tampilan untuk merubah struktur tabel 2. Setelah klik icon structure, maka cek salah satu field yang akan di ubah structure, misalnya cek alamat, kemudian klik icon change. 3. Setelah itu ketikkan pada field alamat, misalnya akan mengubah alamat menjadi alamat_rumah, setelah itu klik save.

17

Gambar 2.2 Tampilan untuk menuliskan data yang akan di ubah

4. Setelah membuat database db_Akademik dengan tabel mahasiswa, maka anda dapat membuat coding PHPnya untuk koneksi ke database kemudian buat form untuk menyimpan data sebagai berikut: File : db1.php

File : Mahasiswa1_form.php

18

Hasilnya:

19

File : mahasiswa1_saving.php

5. Amatilah yang terjadi dari studi kasus diatas! 6. Tugas tambahan (ditentukan oleh asisten praktikum)!

20

3. Tugas Praktikum

1. Desainlah sistem informasi akademik dengan melanjutkan kasus I pada kegiatan prakt ikum sehingga terjadi relasi antara dosen, mahasiswa dan matakuliah serta jurusan.

2. Koneksikan setiap tabel dengan file PHP yang terdiri dari Input, Saving dan List data dosen seperti yang terjadi pada kegiatan prakt ikum pada studi kasus ke-4. 3. Amatilah apa yang terjadi!

4. Catatan Praktikum 5. Referensi


2. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & MYSQL”. PT. Elex Komputindo. Jakarta. 2005.

3. Chris Bates, Web Programming: Building Internet Applications, Third Ed ition, John Wiley & Sons Ltd, England, 2006.

4. Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006.

5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”, Gava Media, Yogyakarta. 2007.

6. Welling Luke, Thompson Laura, ”PHP and MySQL Web Development”, Sams Publishing, 2003.

7. http://www.php.net 8. http://www.mysql.com 9. http://www.w3c.org 10. http://www.ilmukomputer.com

http://www.php.net/


http://w3c.org/


21

MODUL III APLIKASI

1. Dasar Teori

Pada pembahasan kali in i kita akan membuat aplikasi yang sering diikutsertakan pada web khususnya yang berhubungan dengan database yaitu Sistem Perpustakaan. Database adalah sekumpalan informasi yang diatur agar mudah dicari. Dalam art i umum database adalah sekumpulan data yang diproses dengan bantuan komputer yang memungkinkan data dapat diakses dengan mudah dan tepat, yang dapat digambarkan sebagai aktifitas dari satu atau lebih organisasi yang berelasi.

Sebagaimana diketahui manajemen modern mengikutsertakan informasi sebagai sumber daya penting yang setara dengan sumber daya manusia, uang, mesin dan material. Informasi adalah suatu bentuk penyajian data yang melalui mekanis me pemrosesan, berguna bagi pihak tertentu misalnya manajer. Bagi pihak manajemen, informasi merupakan bahan bagi pengambilan keputusan.

Sebagai contoh Sistem Informasi Managemen (SIM) perpustakaan dimana ada koleksi-koleksi buku yang disediakan, pemin jaman oleh anggota perpustaan maka dalam system tersebut akses yang dapat dilakukan oleh anggota adalah dapat melihat data-data buku yang pernah dipinjam, denda yang harus dibayar juga melakukan pencarian buku-buku d iperpustakaan tersebut.

Tujuan : Mampu membuat suatu aplikasi sederhana dengan PHP dan basisdata

menggunakan MYSQL.

Tugas Pendahuluan 2. Apakah yang anda ketahui tentang system informasi? 3. Apakah yang anda ketahui tentang web statis dan dinamis? 4. Sebutkan langkah-langkah yang harus dipersiapkan dalam mendesain

suatu sistem informasi? 5. Apa fungsi dari ob_start() dalam membuat suatu aplikasi?

22

Teknisnya setelah pegawai login dengan username dan password pada system tersebut, maka pegawai tersebut dapat mengakses isi database baik untuk pemasukan data buku baru maupun peminjaman dan pengembalian. Sedangkan bagi anggota dapat melakukan akses database untuk pencarian buku, dan melihat data pemin jaman buku oleh d iri sendiri.


1. Mempersiapkan database yang menggunakan sejumlah tabel dengan desain sebagai berikut:

Gambar 3.1. Desain Database Sistem Perpustakaan

File koneksi Database:

2. Mendesain Menu Utama yang merupakan menu awal dari SIM Perpustakaan.

24

Gambar 3.2. Menu Utama

3. Mendesain Data Master, yang terdiri dari data pengarang, data buku, pegawai dan data anggota. Didalam data-data tersebut terdapat program insert, update dan delete. Untuk program data pengarang:

26

Hasilnya:

File Tambah Data Pengarang:

27

File ubah data pengarang :

29

File hapus data pengarang:

4. Tugas tambahan (ditentukan oleh asisten praktikum)!

30

5. Tugas Praktikum 6. Desainlah Sistem Informasi Perpustakaan dengan melanjutkan pada kegiatan

praktikum studi kasus 3 untuk data buku, pegawai dan data anggota. Kemudian amat ilah apa yang terjadi?

7. Dengan mendesain sistem informasi perpustakaan tersebut, maka pada form menu utama terdapat data master dan data transaksi. Coba buatlah program dengan PHP untuk dat transaksi baik transaksi pemin jaman maupun pengembalian. Kemudian amatilah apa yang terjadi?



2. Arief Ramadahan, dkk. ”Buku Lat ihan PHP 5 & MYSQL”. PT. Elex Komputindo. Jakarta. 2005.


4. Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006. 5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP &

ASP”, Gava Media, Yogyakarta. 2007. 6. Welling Luke, Thompson Laura, ”PHP and MySQL Web Development”,

Sams Publishing, 2003.




http://www.php.net/


http://w3c.org/


31

MODUL IV SESSION DAN COOKIES

1. Dasar Teori 1.1 Cookies

Cookie adalah sepotong data yang disimpan pada hard disk local milik pengunjung dan digunakan oleh halaman web dalam mengingat suatu informasi. Dengan melihat data pada hard disk local innilah, suatu server mendapatkan kembali informasi yang pernah dikirmkan ke klien. Sehingga dapat dikatakan cookie adalah mekanisme penyimpanan sebuah variabel data dari server dan kemudian dikirmkan browser web client. Berdasarkan sifat yang disebutkan diatas, cookie dapat digunakan untuk: · Menyimpan nama pengunjung · Merekam daftar barang yang ingin dibeli pengunjung.

· Mnyimpan pilihan-pilihan yang diatur oleh pengunjung, dan · Membuat suatu sesi yang memungkinkan seseorang dapat masuk ke halaman-halaman lain tanpa perlu melakukan login kembali.

Dari kegunaan cookie tersebut maka adapun kelemahan cookie yaitu pengiriman data bersifat sementara sehingga ketika browser ditutup, atau waktu penyimpanan cookies habis, maka cookie juga akan dihapus. Dan jika fasilitas

Tujuan : Mampu menjelaskan dan mengimplementasikan cookies & session pada aplikasi PHP untuk meningkatkan sekuriti pada sistem.

Tugas Pendahuluan 1. Apa yang anda ketahui tentang Cookies dan session? 2. Apa perbedaan antara keduanya? 3. Sebutkan dan jelaskan Fungsi apa saja yang digunakan untuk

implementasi session? 4. Apakah fungsi dari cookies?

32

cookie pada browser itu disable maka pengiriman data untuk disimpan di cookie browser akan mengalami kegagalan. Fungsi yang digunakan ntuk penggunaan cookies:

Setcookie (string name[, string value[, int expire]]); Keterangan dari parameter tersebut adalah: · Name: nama cookie yang nantinya menjadi varibel yang akan dikirimkan

kembali ke server. · Value: nilai yang dimiliki oleh variabel cookie. · Expire: batas waktu berlakunya cookie. Biasanya diisikan alam satuan detik. Contoh: time()+3600 -> cookie akan berlaku selama 1 jam. Untuk menghapus cookie, maka t inggal memberikan nilai kosong (“”) pada parameter value pada cookies. Contoh:

<?php setcookie("nama","Rosa"); print("cookies telah terbentuk"); ?>

Sedangkan untuk mengakses cookie ada 2 cara yaitu: · $nama_cookie Contoh:

<?php print("Dosen PHP:$nama"); ?>

· HTTP_COOKIE_VARS Contoh:

<?php $nama_cookie=$HTTP_COOKIE_VARS["nama"]; print("Dosen PHP : $nama_cookie"); ?>

Dan untuk menghapus cookie yaitu:

33

<?php $akses_cookie=$nama; setcookie("nama"); print("setelah dihapus: $nama"); ?>

Contoh cookie dengan mengatur batas waktunya sehingga ketika menutup browser dengan mengklik (X) kemudian panggil kembali browser untuk akses cookie maka data cookie dapat ditampilkan tetapi jika menjalankan browser lebih dari 1 jam maka data cookies tidak dapat ditampilkan. Contohnya:

<?php setcookie("nama","Rosa",time()+3600); print("cookies terbentuk"); ?>

1.2 Session

Sesion pada prinsipnya sama seperti cookie hanya saja pada session mempunyai t ingkat sekuriti yang lebih tinggi dalam pengiriman dan penyimpanan data di browser client. Selain itu dengan session tidak perlu memeriksa apakah fasilitas cookie pada browser di disable atau tidak karena session tetap bisa melakukan apapun status cookie dari browser (baik disable maupun enable). Dalam session, nilai yang dikirmkan dari server ke browser disebut session_id (dalam cookie diistilahkan sebagai nama cookie) dimana session_id ini juga akan hilang jika dilakukan penghapusan atau browser ditutup.

Beberapa fungsi yang digunakan untuk implementasi session: · session_start() · session id() · session register()

· session unregister() · session unset() · session destroy()

2. Kegiatan Praktikum Untuk membuat sistem perpustakaan dengan dua user yaitu anggota dan pegawai, yang mana diantara keduanya mempunyai hak akses masing masing menggunakan cookies, maka ket iklah langkah sebagai berikut: 1. ketiklah program untuk mendesain form dari login, sebagai berikut:

34

2. Memberikan keamanan akses menggunakan cookies, sebagai berikut :

35

3. Amatilah yang terjadi pada studi kasus 2! 4. Tugas tambahan (ditentukan oleh asisten praktikum)!

36

3. Tugas Praktikum

1. Modifikasi dengan memberikan akses menggunakan session pada kasus I kegiatan prakt ikum diatas.

2. Buatlah fasilitas logout pada sistem akademik dengan melakukan pengosongan nilai pada variabel session tersebut sehingga ketika browser yang tampil maka dibelokkan ke halaman log in. Untuk itu pada form mahasiswa ataupun form dosen diberi hiperlink ”keluar” nilai perlu diganti dengan <a href =”logout.php”>keluar</a>.

3. Jelaskan program dan hasil eksekusinya berikut ini: <?php session_start(); print("SID:".session_id()."<br>"); session_register("var_x"); $var_x="7896"; print("SID sekarang: $var_x <br>"); session_unregister("var_x"); print("SID unregister:".session_id()); session_destroy(); ?>

session_start() : ----------------------- session_register() :-------------------- session_unregister() : ----------------- session_destroy() : --------------------- 4. Catatan Praktikum 5. Referensi 1. Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”.

ANDI Yogyakarta.Yogyakarta, 2003. 2. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & MYSQL”. PT. Elex

Komputindo. Jakarta. 2005. 3. Chris Bates, Web Programming: Building Internet Applications, Third

Ed ition, John Wiley & Sons Ltd, England, 2006.

37

4. Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006. 5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”,

Gava Media, Yogyakarta. 2007. 6. Welling Luke, Thompson Laura, ”PHP and MySQL Web Development”,





http://www.php.net/


http://w3c.org/


38

MODUL V CONTENT MANAGEMENT SYSTEM

( WORDPRESS)

1. Dasar Teori 1.1 CMS CMS (Content Management System) adalah suatu sistem yang digunakan untuk mengelo la dan memfasilitasi proses pembuatan, pembaharuan, dan publikasi content secara bersama (co llaborat ive content management). Content mengacu pada informasi dalam bentuk teks, grafik, gambar maupun dalam format-fo rmat lain yang perlu dikelola dengan tujuan memudahkan proses pembuatan, pembaharuan, distribusi, pencarian, analisis, dan meningkatkan fleksibilitas untuk ditransformasikan ke dalam bentuk lain. Saat in i, berbagai perusahaan mengkombinasikan content tak berstruktur dengan transaksi tradisional dan application logic untuk membangun aplikasi berbasis Web. Web application ini mewujudkan interaksi yang lebih personal dengan para user-nya, dan meningkatkan kinerja perusahaan dengan menyediakan layanan mandiri bagi para karyawan, partner, penyedia barang dan pelanggan.

Tujuan : 1. Mampu menginstall ap likasi wordpress yang berlisensi GPL/free di

komputer untuk di jalankan secara offline 2. Memahami CMS (Content Management System)

Tugas Pendahuluan 1. Download aplikasi wordpress yang berlisensi GPL/free dari situs

www.wordpress.org ! 2. Jelaskan langkah-langkah memulai wordpress offline?

3. Apa yang anda ketahui mengenai CMS (Content Manajement System) ?

4. Sebutkan dan jelaskan beberapa aplikasi CMS yang popular menurut anda?

http://www.wordpress.org/

39

Dengan adanya CMS yang terintegrasi dengan sebuah WebSite akan memberikan suatu nilai lebih yang akan meningkatkan fungsionalitas dan fleksibiltas dari Web Site tersebut, terlebih pada WebSite yang tujuan pemanfaatannya sebagai media promosi dan membangun citra konsumen, dimana kontinuitas dan inovasi dalam pemasaran produk-produk secara berkala dan berkesinambungan sebagai suatu hal yang memegang peranan penting dalam tercapainya target pemasaran. 1.2 Manfaat CMS

· Manajemen data · Mengatur siklus hidup website · Mendukung web templating dan standarisasi · Personalisasi website

· Sindikasi · Akuntabilitas 1.3 Blog Blog merupakan kependekan dari weblog. Kata weblog berasal dari kata web dan log. Web berarti internet dan log berarti pencatatan. Jadi, blog dapat diartikan sebagai pencatatan yang menggunakan media internet. Blog bisa berisi segala hal. Mulai dari kegiatan sehari-hari(diary), ilmu pengetahuan populer, perkembangan teknologi, pemasaran produk, berita politik, sampai ke hal-hal yang bersifat sensitif seperti ideologi. Penulis blog juga bervariasi. Bisa dari pakar komputer, pekerja umum, ataupun ibu rumah tangga. Rentang usianya jauh, mulai dari anak-anak, remaja, dewasa dan orang tua. Berikut adalah beberapa fungsi blog: 1. Media pencatatan ide, pengalaman, metode 2. Sarana promosi 3. Pendidikan 4. Ekspresi diri Isi sebuah blog dapat dengan mudah diakses oleh semua orang yang tehubung lewat internet. Pada awalnya, orang melakukan keg iatan blog dengan menggunakan situs pribadi. Kesulitan yang umum dijumpai adalah min imnya kemampuan desain, pemahaman HTML, dan pemrograman web. Hal itulah yang seringkali membuat situs pribadi tidak bertahan lama. Beberapa kelompok mencoba memecahkan permasalahan ini dengan membuat dan menyediakan situs khusus tempat orang bisa melakukan kegiatan blog tanpa keharusan menjadi ahli dalam teknologi web. Salah satu aplikasi blog yang populer adalah WordPress.

40

2. Kegiatan Praktikum 1. Langkah awal untuk melakukan instalasi wordpress pada local host adalah dengan menyediakan surce yang kita butuhkan untuk proses instalasinya. Yaitu xampp win-32 1.6.1 installer packages dan wordpress 2.2.1 (atau yang terbaru). 2. Coba akses alamat: http://localhost/ melalui address bar pada browser kita, apabila instalasi yang kita lakukan benar, maka browser kita akan membuka halaman Interface XAMPP pada browser kita (halaman tersebut adalah berfungsi seperti cPanel webhost kita).

3. Sekarang yang pertama kali kita perlu lakukan adalah memodifikasi setting sekuriti XAMPP kita. Kita dapat mengubah password untuk akses ke MySQL dan direktori XAMPP melalu i halaman alamat in i: http://localhost/security/xampsecurity.php.

4. Setelah mengkonfigurasi setting sekuriti MySQL, maka sekarang dapat mulai membuat database MySQL yang nantinya digunakan untuk Wordpress melalui interface PHPMyAdmin. Buka melalui sidebar XAMPP dan buat database baru, untuk contoh dibawah namai database baru tersebut dengan nama wordpress.

http://localhost/security/xampsecurity.php

41

5. Sekarang untuk mengkonfigurasi Wordpress ke localhost, mulai dengan meng-ekstract file .zip wordpress di folder htdocs yang ada di dalam fo lder, sehingga di dalam folder htdocs akan ada folder baru dengan nama wordpress, buka folder wordpress tersebut dan buka file wp-config-sample.php menggunakan notepad (atau menggunakan text ed itor lainnya). Modifikasi 3 baris di file in i yaitu, wordpress (untuk DB_NAME), root (untuk DB_USER) dan test (untuk DB_PASSWORD). Setelah selesai, maka simpan file yang telah dimodifikasi tersebut dengan nama wp-config.php.

6. Setelah itu, buka browser dan tulis alamat berikut ini di address bar-nya: http://localhost/wordpress/wp-admin.php/install.php dan lanjutan penginstalan wordpress ini sesuai petunjuk penginstalan yang ada. Setelah instalasi selesai, maka blog wordpress telah siap untuk digunakan. Dan alamat untuk meng-aksesnya yaitu di alamat: http://localhost/wordpress/ 7. Default username adalah admin. Catat password yang sudah di generate secara otomatis karena hanya akan ditampilkan sekali. Pada langkah berikutnya, untuk login kita harus menggunakan password tersebut, meskipun setelah itu kita dapat mengubahnya sekehendak kita. Setelah mencatat password, klik Log in. Sekarang anda harus login ke Wordpress. Isikan admin pada form username dan isikan password yang tadi telah dicatat pada form password. Setelah itu klik log in untuk masuk ke dashboard.

http://localhost/wordpress/

42

8. Setelah Log In, akan dijumpai halaman Dashboard. Halaman “Dashboard” yang muncul adalah seperti berikut.

43

9. Dari klik bagian “Visit Site” yang terdapat pada bagian atas Dashboard atau disebelah kiri Tit le Blog. Halaman apa yang tampil ?Jelaskan secara detail sebagai tugas praktikum no 1. 10. Buat halaman Blog pertama anda dengan tema welcome. Pengelolaan halaman blog dilakukan melalui halaman Pages. Isi halaman Pages mirip dengan halaman Posts. Kali in i yang ditampilkan adalah daftar halaman yang terdapat pada sebuah blog. Operasi yang dapat dilakukan terhadap halaman adalah Add, View, Ed it, dan Delete.

Tampilan halaman Pages

Tambahkan sebuah halaman baru :

a. klik tombol Add New yang terletak di bagian atas halaman.

44

Halaman Add New Page

11. Ketikkan judul halaman pada kotak teks atas. Ketikkan juga isi halaman pada kotak teks di bawahnya. Klik tombol Publish untuk mempublikasikan.

Menambahkan informasi pada halaman Add New Page

b. Klik tombol View Page untuk melihat tampilan halaman baru pada blog.

45

Tampilan halaman yang baru

46

c. Pada halaman utama, link ke halaman baru terdapat pada bagian kanan halaman.

Link ke halaman baru pada halaman utama

3. Tugas Praktikum 1. Halaman apa yang ditampilkan ket ika anda klik ”Vis it Site” ? submenu

apa saja yang ada pada halaman tersebut dan apa fungsi dari masing-masing submenu?

2. Dengan memanfaatkan fasilitas penyuntingan teks, edit tulisan pada kegiatan prakt ikum no 10 yang telah anda buat.

47

· Manfaatkan menu tab HTML · Beri warna pada font yg digunakan (warna bebas) · Dokumentasikan segala perubahan yang anda buat, dan cara mengeditnya.

Tunjukkan hasil sebelum dan sesudah melakukan perubahan dalam bentuk file print screen. 3. Tambahkan sebuah gambar (tema gambar sesuaikan dengan tulisan) pada post

”Welcome” yang telah anda buat sebelumnya.

48

4. Buat post/tulisan kedua dengan tema bebas, min imal 5 paragraf (1000 kata), kembangkan sesuai keinginan anda (boleh disertai gambar, boleh tidak)


1. Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Po int.

Melbourne Australia, 2006 2. www.wordpress.com 3. www.wordpress.org

49

MODUL VI CONTENT MANAGEMENT SYSTEM

(WORDPRESS LANJUT)

1. Dasar Teori

1.1 Pengertian dan Pemanfaatan BLOG

Blog merupakan kependekan dari web log. Kata weblog berasal dari kata web dan log. Web berarti internet dan log berarti pencatatan. Jadi, blog dapat diartikan sebagai pencatatan yang menggunakan media internet. Blog bisa berisi segala hal. Mulai dari keg iatan sehari-hari(diary ), ilmu pengetahuan populer, perkembangan teknologi, pemasaran produk, berita politik, sampai ke hal-hal yang bersifat sensitif seperti ideologi. Penulis blog juga bervariasi. Bisa dari pakar komputer, pekerja umum, ataupun ibu rumah tangga. Rentang usianya jauh, mulai dari anak-anak, remaja, dewasa dan orang tua. Berikut adalah beberapa fungsi blog:

5. Media pencatatan ide, pengalaman, metode 6. Sarana promosi 7. Pendidikan 8. Ekspresi diri

Tujuan : Mampu Menjelaskan pengertian blog, cara membuat blog dan mengelola blog di wordpress (online)

Tugas Pendahuluan 1. Jelaskan yang anda pahami mengenai blog? 2. Sebutkan manfaat dari b log?jelaskan! 3. Jelaskan apa yang anda ketahui mengenai wordpress ! 4. Apa hubungan antara CMS dan wordpress? 5. Buat draf/rencana penulisan blog yang meliputi :

a. Tema tulisan tentang Toko online b. Judul Tulisan

c. Buat pengkategorian produk yg dijual (min 6)

50

Isi sebuah blog dapat dengan mudah diakses oleh semua orang yang tehubung lewat internet. Pada awalnya, orang melakukan kegiatan blog dengan menggunakan situs pribadi. Kesulitan yang umum dijumpai adalah minimnya kemampuan desain, pemahaman HTML, dan pemrograman web. Hal itulah yang seringkali membuat situs pribadi tidak bertahan lama. Beberapa kelompok mencoba memecahkan permasalahan ini dengan membuat dan menyediakan situs khusus tempat orang bisa melakukan kegiatan blog tanpa keharusan menjadi ah li dalam teknologi web. Salah satu aplikasi blog yang populer adalah WordPress

1.2 Menu Kelola – Manage Menu ini dipergunakan untuk mengelola ( mengedit/menyunting, menghapus dsb) tulisan, halaman, links, Kategori, Tag, dan pustaka media yang telah kita masukkan sebelumnya. Menu ini terd iri dari 9 submenu lag i sebagai berikut:

· Tulisan (posts) Berfungsi menampilkan art ikel-artikel yang sudah kita posting.

· Halaman (pages) Berfungsi menampilkan halaman statis / Pages yang sudah kita buat. Di sini kita b isa mengedit halaman yang ada atau membuat halaman baru..

· Taut (Link) Menu ini dipergunakan untuk untuk menambah atau mengedit link / blogroll.

· Kategori (Category) Menu ini digunakan untuk mengedit, mendelete atau membuat kategori baru. Nama Kategori adalah Nama yang digunakan untuk mengidentifikasi kategori di hampir seluruh tempat, b isa di dalam tulisan atau di widget kategori. Induk Kategori adalah kategori, tidak seperti tag, dapat memiliki hierarki. Anda boleh saja memiliki kategori Jazz dan di bawahnya ada kategori anak Bebop dan Big Band. Deskripsi adalah keterangan kategori secara standar

tidak tampil. Namun sebagian tema dapat menampilkannya.

· Tag Menu untuk menambah, mendelete atau mengedit tag. Yaitu sederetan kata dalam xml yang digunakan untuk memberikan informasi dokumen sehingga

mudah dikenali oleh pembacanya. · Kategori Taut (Link Categories).

Menu untuk mengedit kategori link. Pada menu ini anda akan melihat daftar kategori links. Sub menunya adalah Cari, Tambah Kategori, Hapus, Ed it (sunting)

51

· Pustaka Media Menu untuk mengatur tempat link file atau image yang sudah diupload. Menu yang tampil adalah Kelola Media (Manage Media ).

maka perubahan yang telah dibuat dianggap dibatalkan. · Impor

Menu untuk mengimpor file content dari blog lain. Wordpress menyediakan beberapa jenis situs yang dapat anda impor ke dalam wordpress anda.

· Eks por Menu untuk mengekspor file d i blog ke blog lain. Wordpress memberikan pilihan untuk anda jika saja anda sewaktu-waktu ingin memindahkan blog atau memiliki beberapa blog sekaligus dengan fasilitas ekspor impor.

1.3 Pengelolaan User. Sebuah blog bisa saja dibuat sebagai perwujudan ekspresi suatu komunitas, bukan sekedar blog pribadi. Pada kasus seperti ini, kemungkinan besar jumlah orang yang memiliki wewenang untuk menulis di blog lebih dari satu.

52

2. Kegiatan Praktikum 1. Tambahkan Kategori min imal 6 kategori dengan spesifikasi bebas :

Anda dapat menentukan kategori tulisan pada area kategori. Secara default, hanya ada satu kategori, yaitu Uncategorized.

Area Categories

Untuk menambahkan suatu kategori baru, klik +Add new Category. Muncul area tambahan di bagian bawah Area Categories.

Penambahan kategori

Ketikkan nama kategori pada kotak teks New category name, lalu klik tombol add.

53

Kategori telah ditambahkan

Tampak kategori baru sudah tampil. Pilih/centang kategori yang diinginkan.

2. Tambahkan Tag min imal 6 tag, bebas : Di samping kanan halaman penyuntingan teks terdapat area yang digunakan untuk menuliskan tag. Tag adalah semacam penggolongan tulisan. Wordpress mengenal dua macam penggolongan tulisan, yaitu kategori dan tag. Jelaskan perbedaan keduanya dengan membandingkan kegiatan prak no 1 dan 2 yang akan dikerjakan berikut. (Tugas praktikum no 2)

Tambahkan beberapa tag pada halaman blog anda, dengan cara :

· Masuklah ke halaman dashboard · Pada menu Right Now/At a glance p ilih Tag

54

· Setelah itu muncul tampilan berikut,

isilah tag name dengan nama tag, misal Art ikel, description bisa dikosongi ato diisi, kemudian klik add tag. · Tag yang baru anda buat muncul di kolom sebelah kanan seperti gambar

berikut

55

3. Buat sebuah pengelolaan User

a. Pengelolaan user dilakukan melalui tab User.

b. Daftar user dan penulis sebuah blog dapat dilihat pada halaman

Users/Author & Users. c. Daftar user yang ditampilkan pada halaman tersebut terdiri dari enam

buah kolom, yaitu : · ID, nomor identitas user · Username, nama login user

· Name, nama asli user · E-mail, alamat e-mail user

56

· Website, situs yang dimiliki oleh user d. Actions, aksi yang dapat dilakukan terhadap user, yaitu melihat

tulisan yang pernah dipublikasikan oleh user dan menyunting profil user.

e. Seleksi terhadap user dilakukan dengan mengklik kotak cek yang terdapat pada kolom ID.

f. Untuk menghapus user terseleksi, pilih opsi Remove checked user. Untuk menentukan tugas user di dalam b log, pilih opsi Set the Role of checked users to, kemudian pilih salah satu nilai berikut. :

· Contributor, user hanya dapat memberi kontribusi berupa tulisan dan mengelola tulisan tersebut tetapi tidak dapat melakukan publikasi. · Author, user dapat menulis, mengelola tulisannya, dan melakukan publikasi tulisan. · Editor, user dapat menulis, melakukan publikasi tulisan mengelo la tulisannya sendiri dan user yang lain.

· Administrator, user yang memiliki akses penuh terhadap blog.

Area pengaturan user

57

g. Undanglah user lain terlibat dalam penulisan blog, ketikkan alamat e-mail user yang akan diundang pada kotak teks User E-mail, tentukan Role yang akan dimiliki user tersebut, dan klik tombol Add User. Perhatikan bahwa user yang diundang tersebut harus memiliki account di Wordpress.com dan alamat e-mail yang digunakan saat pendaftaran adalah alamat e-mail yang Anda masukkan pada kotak teks User E-mail.

3. Tugas Praktikum

1. Setelah mencoba seluruh kegiatan praktikum, sekarang anda buka halaman site yang telah anda tmbahi dengan berbagai fitur tadi. Tunjukkan hasilnya dengan print screen, dan jelaskan.

2. Anda sudah membuat beberapa tag kemudian anda jelaskan fungsi tag, dan hubungkan tag yang anda buat dengan artikel yang sesuai. Jelaskan apa bedanya dengan kategori.

3. Lanjutkan tugas anda dengan membuat contoh pemanfaatan Kategori Taut (Link Categories), Pustaka Media, Pustaka Media, Import dan Eksport. Tunjukkan hasilnya dengan print screen.

4. Pada laporan jelaskan langkah-langkah pembuatan fitur pada soal nomor 3 yang disertai print sreen seperti yang telah dicontohkan pada kegiatan praktikum.

5. Jelaskan kegunaan masing-masing fitur yang anda buat pada soal nomor 3 !

6. Apa keuntungan membuat pengelolaan user ? 3. Catatan Praktikum 4. Referensi

4. Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Po int.

Melbourne Australia, 2006 5. www.wordpress.com 6. www.wordpress.org

58

MODUL VII CONTENT MANAGEMENT SYSTEM

( WORDPRESS LANJUT )

1. Dasar Teori Appearance Setelah berhasil membuat blog di wordpress.com, maka langkah berikut adalah memberikan sentuhan penampilan, bagian in i bersifat subjektif karena sesuai selera. Pada menu Appearance terdapat beberapa sub menu yaitu : Themes, Widgets, Extras, Custom Header, Header Colors, Typekits Fonts, Ed it CSS. Themes Dari semua theme WordPress biasanya miliki jumlah kolom 2 atau 3 bahkan ada yang lebih, berikut contoh theme yang hanya memiliki 2 kolom yaitu kolom “body” dan kolom “navigasi”. Gambar d ibawah ini menjelaskan bagian-bagian tersebut.

Tujuan : Mampu membuat tampilan blog lebih menarik dengan memanfaatkan fitur-fitur appearance dari wordpress.

Tugas Pendahuluan : 1. Mengapa diperlukan untuk mempercantik tampilan blog ? Jelaskan ! 2. Fitur-fitur apa saja di wordpress yang berfungsi untuk mempercantik

tampilan blog ! Jelaskan

3. Apa fungsi fitur pengelolaan user pada wordpress ? Jelaskan !

59

Bagian-Bagian dari Sebuah Halaman Blog

Widgets

Widgets adalah komponen-komponen blog yang umumnya diletakkan pada sidebar. Sidebar sendiri adalah ruang kolom yang ada di sisi kanan dan kiri blog, tergantung theme yang digunakan. Pada Kolom yang ada di sebelah kanan (navigasi) pada gambar yang ada diatas sudah terdapat 3 widget, yaitu Search, Links, dan Blogroll. Jadi itulah yang dimaksud dengan widget.


1. Lakukan perubahan tampilan agar leb ih menarik. Ikuti langkah berikut :

· Klik menu APPEARANCE

Tampilan halaman Appeareance

60

· Klik submenu THEMES

Tampilan halaman Themes

· Pilih theme yang disukai pada bagian AVAILABLE THEMES · Klik ACTIVATE untuk theme yang disukai

· Untuk melihat perubahannya, klik VISITE SITE

Tombol Visit Site

· Lihat perubahan setelah themes diganti

61

Tampilan Theme Blog telah berganti

2. Masih dengan halaman appearance, tambahkan beberapa widget, dengan mengikuti langkah berikut :

· Pengelolaan widgets dilakukan melalui halaman Widgets.

Tampilan halaman Widgets

· Daftar widgets yang tersedia diberikan pada area Available Widgets.

Untuk menambahkan suatu widgets ke sidebar, drag-and-drop widgets yang terletak pada area Availab le Widgets ke area sidebar.

63

Drag-and-Drop widgets ke area sidebar

· Gambar d i bawah ini menunjukkan contoh widgets yang telah

·

·

· ditambahkan ke dalam sidebar.

Widgets yang telah ditambahkan ke sidebar

· Setelah selesai, klik tombol save. Gambar di bawah menunjukkan

perbedaan tampilan b log sebelum dan sesudah penambahan widgets.

64

Perbedaan tampilan area sidebar

3. Merubah gambar header Fasilitas untuk mengganti gambar header hanya dimiliki oleh jen is theme tertentu. Jadi jangan heran jika link untuk menuju ke halaman Custom Header tidak terdapat pada bab Presentation blog Anda. Untuk mengganti gambar header dimulai dengan klik Appearance/Header Color, seperti tampak pada gambar berikut:

Tampilan halaman Header Colors

65

Contoh Setting warna

Untuk mengganti gambar header, klik browse dan carilah gambar yang diinginkan. Perhat ikan ukuran yang disarankan oleh penunjuk yang terdapat pada halaman tersebut. Klik upload untuk melakukan upload gambar. Jika ingin melihat hasilnya, klik link View site, seperti gambar berikut:

66

Hasil penggantian warna

Seandainya dengan penggantian gambar tersebut warna teks judul blog menjadi t idak cocok, masuklah kembali ke halaman Custom Header. Perhatikan bahwa di bawah gambar header terdapat empat buah tombol sebagai berikut : · Hide Text, untuk menyembunyikan teks judul blog · Select a Text Color, untuk mengubah warna teks

· Use Original Color, untuk mengembalikan warna teks ke warna asal · Save Changes, untuk menyimpan perubahan yang dilakukan Lakukan perubahan terhadap teks sesuai dengan tombol-tombol yang tersedia tersebut. Dapatkah perubahan tersebut dikembalikan ke wujud aslinya?

4. Merubah Warna Header

Seperti halnya gambar header, tidak semua theme mendukung penggantian warna header. Jika kebetulan theme yang digunakan mendukung penggantian warna header, di bawah tab Presentation akan terdapat link Color Header. Dibawah gambar header akan terdapat enam buah tombol yang digunakan untuk pengaturan warna. Tombol-tombol tersebut adalah sebagai berikut :

· Font color, digunakan untuk menentukan warna teks

67

· Upper color, digunakan untuk menentukan warna bagian atas header · Lower colo r, d igunakan untuk menentukan warna bagian bawah header · Revert, d igunakan untuk mengembalikan warna header ke warna semula · Advanced, digunakan untuk menentukan warna berdasarkan nilai

heksadesimal warna.

· Update header, digunakan untuk menyimpan perubahan warna yang telah

diterapkan Saat tombol pemilih warna diklik, akan muncul panel berisi warna-warna yang dapat dipilih. Untuk menutup panel tersebut, klik tombol Close Color Picker.

3. Tugas Praktikum :

68

Buat suatu Toko Online sederhana yang menjual suatu produk (ditentukan oleh asisten praktikum, masing-masing praktikan tidak sama), fitur yang harus ada : 1. Support berbagai macam sistem pembayaran (sistem pembayaran bebas). Paypal, Google Check Out, bahkan … manual (misalkan kita pengin dengan transfer BCA, BNI, dsb) 2. Ada pengkategorian produk. Yang dibedakan berdasarkan macam (warna, ukuran, tipe, d ll) produk. 3. Email pemberitahuan kepada pembeli, kita tinggal set bagaimanakah email

pemberitahuan kepada pembeli 4. Bisa menentukan berbagai tarif pengiriman 5. Real time shopping cart begitu klik ‘beli’ langsung masuk shopping cart dan

terlihat dengan seluruh perhitungan total belanja. 6. Buat database dengan My SQL untuk menyimpan tabel barang dan tabel

belanja.

4. Catatan Praktikum

5. Referensi

1. Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Po int. Melbourne Australia, 2006

2. www.wordpress.com 3. www.wordpress.org

69

MODUL VIII EXTENSIBLE MARKUP LANGUAGE

(XML)

1. Dasar Teori

XML Singkatan dari eXtensible Markup Language, dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998. Teknologi yang digunakan pada XML sebenarnya bukan teknologi baru, tapi merupakan turunan dari SGML yang telah dikembangkan pada awal 80-an dan telah banyak digunakan pada dokumentasi teknis proyek-proyek berskala besar. Ketika HTML d ikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian paling penting pada SGML dan dengan berpedoman pada pengembangan HTML menghasilkan markup language yang tidak kalah hebatnya dengan SGML. Seperti halnya HTML, XML juga menggunakan elemen yang ditandai dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup(diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen(parameter yang dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai didalamnya, sedangkan pada XML kita bisa menggunakan tag dan atribut sesuai kehendak kita. 1.1 Bagian- Bagian dari Dokumen XML

Sebuah dokumen XML terdiri dari bagian bagian yang disebut dengan node. Node-node itu adalah:

· Root node

Tujuan : Mampu menjelaskan pengertian, bagian, syntax, format pada XML dan membuat aplikasi dengan perintah-perintah XML.

PrePraktikum 1. Sebutkan apa saja keuntungan dari XML 2. Jelaskan perbedaan XML dengan HTML 3. Buatkan hierarki XML apabila kita membuat data input dari suatu

restoran

70

· Element node · Attribute note · Text node · Comment node

· Processing Instruction node · NameSpace Node

Gambar 11.1 child tag yang berada didalam root yang membentuk hirarki

1.2 Sintaks XML Dibandingkan dengan HTML, XML leb ih detail. Kalau kita menulis

sebuah dokumen HTML, beberapa kesalahan penulisan masih ditolerir. Misalnya kita menempatkan tag bersilangan seperti <p><b>Huruf Tebal</p></b> meskipun tidak dianjurkan, HTML masih bisa bekerja dan menampilkan hasil seperti yang kita ing inkan. Tidak demikian dengan XML. Lebih jelasnya kita akan bahas di bawah bagaimana membuat dokumen XML yang baik.

Heading standard untuk Document XML : Biasakanlah setiap membuat dokumen XML d iawali dengan heading standard XML. Formatnya adalah sebagai berikut: <?xml version=”1.0” encoding=”iso-8859-1”?>

71

Dokumen XML harus memiliki Root tag Sebuah dokumen XML yang baik harus memiliki root tag. Yaitu tag yang melingkupi keseluruhan dari dokumen. Tag-tag yang lain, disebut child tag, berada didalam root membentuk hirarki seperti gambar 11.1

Contoh: <root>

<child> <subchild></subchild>

</child> </root>

1.3 Memformat XML

Terdapat 2 cara untuk memformat data XML untuk menampilkannya pada web browser, yaitu dengan menggunakan: 1. CSS (Cascading Style Sheets)

Selain dapat digunakan untuk memformat dokumen HTML, CSS juga dapat digunakan untuk memformat dokumen XML. CSS dapat melakukan redefinisi tag HTML, memungkinkan tag tersebut disajikan dalam cara berbeda. Dengan cara yang sama, CSS dapat digunakan untuk mendefin isikan bagaimana tag XML ditampikan. 2. XSL (eXstensible Stylesheet Language)

XSL merupakan singkatan dari eXstensible Stylesheet Language, dan merupakan suatu bahasa yang dikembangkan untuk memformat dokumen XML. Untuk menformat kode maka harus dibuat terlebih dahulu suatu stylesheet XLS. Meskipun XLS adalah sebuah bahasa yang lengkap dan untuk menyelesaikan masalah di atas cukup memanfaatkan beberapa fiturnya saja. 2. Kegiatan Praktikum

1. Membuat data input dari suatu fakultas teknik dengan pohon hierarki, sebagai berikut:

72

2. Membuat coding XML dari h ierarki fakultas teknik berikut ini:

3. Jika perubahan pada program xml diatas menjadi:

73

4. Tugas tambahan (ditentukan oleh asisten praktikum)? 3. Tugas Praktikum

1. Amatilah apa yang terjadi dengan studi kasus ke-3 pada kegiatan praktikum d iatas?

2. Buatkan Dengan menggunakan Coding XML hirarki untuk sistem perpustakaan Unijoyo. Contoh kasus seperti dibawah ini:

3. Carilah di internet contoh aplikasi XML d i bidang pendidikan dan b isnis

dengan menggunakan elemen XML dan DTD 4. Catatan Praktikum 5. Referensi


2. Arief Ramadahan, dkk. ”Buku Lat ihan PHP 5 & MYSQL”. PT. Elex Komputindo. Jakarta. 2005.


4. Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006. 5. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP &

ASP”, Gava Media, Yogyakarta. 2007. 6. Welling Luke, Thompson Laura, ”PHP and MySQL Web Development”,


7. http://www.php.net

http://www.php.net/

http://www.php.net/

74

8. http://www.mysql.com

9. http://www.w3c.org 10. http://www.ilmukomputer.com


http://w3c.org/


75

MODUL IX AJAX

(DASAR-DASAR AJAX)

1. Dasar Teori

Mengenal Ajax Ajax pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul Ajax: A New Approach To Web Applications. Ajax singkatan dari Asynchronous JavaScript and XML. Ajax memberi teknik client-server JavaScript untuk mengambil data dan menerima data dari server secara "background". Halaman web dapat diupdate pada tempat tertentu (misalnya teksbox, label, combobox, optionbox, dll) tanpa harus reload (me-refresh satu halaman penuh). Ajax sendiri sangat populer pada tahun 2005 yang diperkenalkan oleh google ataupun web developer besar lainnya. Ajax sendiri akan sangat berhubungan dengan JavaScript. Pada awal lah irnya javaScript, banyak programmer yang menggunakan script ini untuk membuat dynamic halaman web. JavaScript in i banyak digunakan untuk validasi, popup message, jam, dll. Tetapi JavaScript ini tidak berhubungan langsung dengan Web Server. Kenapa programmer menggunakan JavaScript ini guna mengurangi beban server. Jika ingin mendapatkan informasi dari server, maka dapat menggunakan bahasa pemrograman client-server seperti PHH, ASP, ColdFusion, Java, dll. Bahasa pemrograman ini dapat mendapatkan informasi dari server dengan menggunakan HTML Form baik POST ato GET. Data dapat dikirim atau diambil dengan

Tujuan : Mampu memahami teknologi ajax dan membuat aplikasi ajax sederhana.

Tugas Pendahuluan 1. Apa yang anda ketahu mengenai AJAX dan teknologi AJAX ? 2. Apa kelebihan yang dimiliki AJAX ? 3. Sebutkan contoh aplikasi terkenal yang memanfaatkan

teknologi ajax ! Jelaskan !

76

menggunakan tombol "submit". Dimana halaman akan direload secara keseluruhan, hal in i akan sangat bermasalah jika web servernya lambat. Ajax mencoba memperbaiki JavaScript untuk dapat berkomunikasi secara langsung dengan server secara langsung. Ajax menggunakan javaScript Object XMLHttpRequest. Dengan Object ini, maka java script dapat berhubungan dengan server secara langsung.dan nilai tambahnya adalah Ajax dapat mengambil dan mengirim data tanpa harus mereload seluruh halaman. Dengan kata lain, user dapat bekerja dan Ajax dapat berkerja. Karena Ajax bekerja secara background. 2. Kegiatan Praktikum

1. Buka sembarang editor (notepad, edit+, dreamweaver, dll)

2. Ketikkan scrip berikut in i :

<head> <title>AJAX - Demo 1</tit le> <script language="javascript"> function createRequest(){ var oAJAX = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { oAJAX = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { oAJAX = false; } } @end @*/ if (!oAJAX && typeof XMLHttpRequest != 'undefined') { oAJAX = new XMLHttpRequest(); } if (!oAJAX){ alert(" Error saat membuat XMLHttpRequest!"); }else{ alert("XMLHttpRequest sukses dibuat!");

77

} return oAJAX; }

</script> <style type="text/css">  </style></head> <body onload="javascript:createRequest();"> Halaman in i memangil function pembuatan class object XMLHttpRequest<br /> Jika gagal atau pun berhasil akan di tampilkan A lert message. </body> </html> 3. Simpan dengan nama ajax-contoh1.html, letakkan pada folder modul9

4. Kembali pada text editor, buat file baru kemudian ketikkan script berikut :

<head> <title>AJAX - Demo 1</tit le> <script language="javascript"> function createRequest(){ var oAJAX = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { oAJAX = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { oAJAX = false; }

78

} @end @*/ if (!oAJAX && typeof XMLHttpRequest != 'undefined') { oAJAX = new XMLHttpRequest(); } if (!oAJAX){ alert(" Error saat membuat XMLHttpRequest!"); } return oAJAX; } function requestContent(){ oRequest = createRequest(); var url = "dataLoad.html"; // Buka komunikasi dengan server oRequest.open("GET", url, true); // menunggu respon dari server // jika sudah di dapat respon dari server, maka hasil respon akan di tampilkan pada DIV dengan ID='d ivContent' oRequest.onreadystatechange = function () { document.getElementById("divContent").innerHTML="<div align='center'>Menunggu Respon server</div>"; if (oRequest.readyState == 4) { // baca data respon dari server var response = oRequest.responseText; document.getElementById("divContent").innerHTML = response; } } // Send the request

79

oRequest.send(null); } </script> <style type="text/css">  </style></head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="3"> <tr> <td>Pemanfaatan class object XMLHttpRequest untuk berkomunikasi dengan server<br /> <a href="#" onclick=" javascript:requestContent();">Click disin i untuk load Data</a> </td> </tr> <tr> <td> <div id="divContent"></div> </td> </tr> </table> </body> 5. Simpan pada folder yang sama (modul9) dengan nama ajax-contoh2.html

6. Kembali ke text editor, buat file baru, ketikkan script ke 3 berikut :

<head> <title>Unt itled Document</title> <style type="text/css"> <!-- body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #006699; }

80

.table { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-t ransform: none; color: #006699; text-decoration: none; background-color: #FFFFEA; border: 1px solid #0099CC; } --> </style> </head> <body> <table width="500" border="0" cellpadding="3" cellspacing="0" class="table"> <tr> <td><strong>File dataLoad.html</strong><br /> Apapun isi content dari file in i akan di load dan di tampilkan pada lokasi DIV content yang di tuju. <br /> <br /> File yang di load in i bisa berupa file statis biasa, ataupun file berisi content yang di proses terlebih dahulu oleh server. </td> </tr> </table> </body> 7. Simpan dengan nama ajax-contoh3.html pada folder modul9

8. Kemudian masuk ke fo lder modul9 yang telah anda buat tadi, buka ajax-

contoh1 dengan menggunakan web browser (IE/Mozilla/Opera d ll), jika

seluruh script yang anda ketikkan benar maka akan muncul tampilan

berikut :

81

9. Klik Ok pada message yang muncul.

10. Masih tetap pada folder modul9, buka ajax-contoh2 dengan

menggunakan web browser (IE/Mozilla/Opera dll), jika seluruh script

yang anda ketikkan benar maka akan muncul tampilan berikut :

11. Selanjutnya kalimat terakhir “Click disini untuk Load Data” warnanya

berbeda, yang menunjukkan link, silahkan klik link tersebut sehingga

muncul tampilan berikut.

82

12. Apa kesimpulan anda?

3. Tugas Praktikum

1. Jelaskan beberapa fungsi dari beberapa bagian script inti dari 3 script

diatas! mengapa harus ada?

2. Apa yang terjadi jika script yang anda maksud tidak d imunculkan?

3. Apa yang dapat anda simpulkan dari keseluruhan kegiatan praktikum

diatas?

4. Jika ditemukan error pada saat running di web browser, kira-kira apa saja

kemungkinan penyebabnya?

5. Buat contoh ajax sederhana seperti kegiatan praktikum diatas, dengan

menyisipkan ajax pada html. !


5. Referensi

1. Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Point. Melbourne Australia, 2006

2. www.slash.web.id 3. www.atnlie.blogspot.com 4. www.bambangriadi.com

http://www.slash.web.id/


83

MODUL 10 AJAX

(AJAX LANJUT) . 1. Dasar Teori

Membahas lebih jauh tentang AJAX, AJAX bukanlah barang baru dan bukan teknologi baru. AJAX merupakan paduan dari beberapa teknologi yang sudah dikenal sebalumnya yaitu HTML, DOM, XML, Javascript dan teknologi pendukung lainnya. AJAX adalah akronim dari Asynchronous JavaScript and XML, komponen-komponen AJAX meliputi:

· HTML (HyperText Markup Language) digunakan dalam membuat halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam browser. HTML merupakan standar internasional dengan spesifikasi yang ditetapkan oleh World Wide Web Consortium (W3C). Versi terakh ir saat tulisan ini d ibuat adalah HTML 4.01.

Tujuan : Mampu memahami dan menggunakan ajax yang dipadukan dengan html, xml dan css.

Tugas Pendahuluan : 1. Keleb ihan utama AJAX terletak pada pemanfaatan class object

XMLHttpRequest untuk berkomunikasi dengan Web Server. Buatlah function pembuat class object XMLHttpRequest, Untuk dapat berjalan pada semua browser (Cross Browser) !

2. Beri penjelasan dari tugas pendahuluan no 1 ! 3. Apa beda responseXML dan responseText ? kapan menggunakan

responseXML dan responseText ? 4. Baca kembali referensi tentang ajax, xml, css, dom dan component

lain yang dapat dipadukan dengan ajax !

84

· XHTML (Extensible HyperText Markup Language), adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. Versi terakhir saat tulisan ini d ibuat adalah XHTML 2.0.

· CSS (Cascading Style Sheets ) adalah sebuah mekanis me sederhana untuk memberikan style (seperti font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan SVG).

· JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada produk dan aplikasi lain seperti peramban web.

· DOM (Document Object Model) adalah sebuah API (Application Program Interface) untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan untuk merubah isi dan presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemprograman.

· XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar sistem yang beraneka ragam.

· XSLT (Extensible Stylesheet Language Transformations ) adalah sebuah bahasa berbasis-XML untuk transformasi dokumen XML. Walaupun proses merujuk pada transformasi, dokumen asli t idak berubah melainkan dokumen XML baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya digunakan untuk merubah skema XML ke halaman web atau dokumen PDF.

· Objek XMLHttpRequest untuk melakukan pertukaran data secara asinkron dengan peladen (server) web. Beberapa kerangka-kerja Ajax dan dalam beberapa situasi, objek IFrame digunakan selain objek XMLHttpRequest untuk melakukan pertukaran data dengan peladen web.

· JSON (JavaScript Object Notation) yaitu format pertukaran data komputer yang ringan dan mudah. Keuntungan JSON dibandingkan dengan XML adalah pada proses penterjemahan data menggunakan Javascript. Javascript dapat menterjemahkan JSON menggunakan built-in procedure eval().

Dalam penerapannya, tidak semua teknologi di atas digunakan. Terdapat beberapa teknik komunikasi yang digunakan untuk implementasi AJAX. Teknik yang umum digunakan adalah dengan menggunakan:

85

· HiddenFrame Metode ini memanfaatkan frame yang tersembunyi. Biasanya salah satu frame diset dengan ukuran tinggi/lebar 0 sehingga tidak terlihat di halaman. Frame tersembunyi inilah yang sebenarnya melakukan request ke dan menerima respon dari server, sehingga frame yang tampil kelihatan tidak melakukan postback ke server. Javascript digunakan untuk mengambil data dan mengisi data yang ada di frame tersembunyi ini.

· Hidden Frame Metode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame.

· Objek XMLHttpRequest Metode yang satu ini memanfaatkan ActiveX Objek (IE) atau objek javascript XMLHttpRequest (Mozilla/Firefox, Safari, Opera). Objek ini yang akan melakukan postback ke server dan menerima respon balik berupa data (bukan halaman). Data yang didapat dari server kemudian diolah di klien untuk ditampilkan ke halaman.

Teknik pemprosesan halaman secara umum ada dua:

· Pemprosesan halam dengan pembuatan/manipulasi objek dokumen menggunakan javascript. Klien mengirimkan data dalam format XML/JSON kepada server dan mendapatkan data dari server berupa XML/JSON. Data XML/JSON kemudian diolah untuk memanipulasi objek dokumen menggunakan DOM dan javascript.

· Parsial rendering. Pada teknik ini UI dan behaviour tidak diproses di klien melainkan diproses di server. Klien menerima UI dan behaviour kemudian melakukan rendering pada bagian halaman tertentu.

2. Perpaduan teknologi-teknologi tersebut dapat meningkatkan kinerja aplikasi web dan lebih responsif terhadap aksi pengguna. Dengan AJAX pertukaran data antara klien dan server lebih ringan karena hanya data yang dipertukarkan (bukan halaman) sehingga aplikasi web dapat berjalan lebih cepat.

86

Kegiatan Praktikum 1. Buka kembali text editor anda, buat file baru selanjutnya ketikkan script

berikut ini : <head> <title>AJAX - XML data respon format ing</title> <script language="javascript"> function createRequest(){ var oAJAX = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { oAJAX = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { oAJAX = false; } } @end @*/ if (!oAJAX && typeof XMLHttpRequest != 'undefined') { oAJAX = new XMLHttpRequest(); } if (!oAJAX){ alert(" Error saat membuat XMLHttpRequest!"); } return oAJAX; } function requestContent(){ oRequest = createRequest(); var url = "coreQuick-data.xml"; // Buka komunikasi dengan server oRequest.open("GET", url, true); // menunggu respon dari server

87

// jika sudah di dapat respon dari server, maka hasil respon akan di tampilkan pada DIV dengan ID='d ivContent' oRequest.onreadystatechange = function () { document.getElementById("divContent").innerHTML="<div align='center'>Menunggu Respon server</div>"; if (oRequest.readyState == 4) { document.getElementById("divContent").innerHTML = ""; // baca data respon dari server //alert(oRequest.responseXML); var xmlData = oRequest.responseXML; var coreQuick = xmlData.getElementsByTagName("quicknews"); //alert("Panjang: " + coreQuick.length); for (var i=0; i < coreQuick.length; i++){ var currentQuick = coreQuick[i]; var newQuick = document.createElement("div"); newQuick.setAttribute("className", "quickNews"); newQuick.setAttribute("class", "quickNews"); var newTit le = document.createElement("div"); newTitle.setAttribute("className", "title"); newTitle.setAttribute("class", "title"); var titleStr = document.createTextNode(currentQuick.getElementsByTagName("title")[0].firstChild.data); newTitle.appendChild(t itleStr);

88

var newSender = document.createElement("div"); newSender.setAttribute("className", "sender"); newSender.setAttribute("class", "sender"); var senderStr = document.createTextNode("Pengirim: " + currentQuick.getElementsByTagName("sender")[0].firstChild.data);; newSender.appendChild(senderStr); var newDate = document.createElement("div"); newDate.setAttribute("className", "date"); newDate.setAttribute("class", "date"); var dateStr = document.createTextNode("Tanggal kirim: " + currentQuick.getElementsByTagName("date")[0].firstChild.data); newDate.appendChild(dateStr); var newInfo = document.createElement("div"); newInfo.setAttribute("className", "info"); newInfo.setAttribute("class", "info"); var infoStr = document.createTextNode(currentQuick.getElementsByTagName("info")[0].firstChild.data); newInfo.appendChild(infoStr); newQuick.appendChild(newTitle); newQuick.appendChild(newInfo); newQuick.appendChild(newSender); newQuick.appendChild(newDate); document.getElementById("divContent").appendChild(newQuick); } }

89

} // Send the request oRequest.send(null); } </script> <style type="text/css">  </style> <link href="ajax-example.css" rel="stylesheet" type="text/css" /> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="3"> <tr> <td>Berikut contoh melakukan format ing data XML hasil respon dari server <br /> dengan menafaatkan DOM dan Javascript. <br /> <br /> Untuk melakukan request data XML dari server click link dibawah ini,<br /> setelah data XML diterima maka javascript function akan melakukan formating data tersebut.<br /> <br /> <br /> <a href="#" onclick="javascript:requestContent();">Click d isini untuk load Data</a> </td> </tr> <tr> <td> <div id="divContent"></div> </td> </tr> </table> </body>

90

2. Simpan dengan nama ajax-contoh4.html, letakkan pada folder modul10 3. Untuk mengetikkan script ke 2, anda buka kembali text editor, buat file

baru dan ketikkan script berikut ini : <xml id="coreQuick"> <coreQuick> <quicknews> <id>1</id> <title>Quick news pertama</title> <sender>JerryPeter</sender> <date>2006-07-30</date> <time>19:20:19</time> <info>Ruangkecil.Or.id, pemanfaatan AJAX dalam pengembangan web application </info> </quicknews> <quicknews> <id>1</id> <title>Quick news pertama</title> <sender>JerryPeter</sender> <date>2006-07-30</date> <time>19:20:19</time> <info>Ruangkecil.Or.id, pemanfaatan AJAX dalam pengembangan web application </info> </quicknews> <quicknews> <id>1</id> <title>Quick news pertama</title> <sender>JerryPeter</sender> <date>2006-07-30</date> <time>19:20:19</time> <info>Ruangkecil.Or.id, pemanfaatan AJAX dalam pengembangan web application </info> </quicknews> <quicknews> <id>1</id> <title>Quick news pertama</title> <sender>JerryPeter</sender> <date>2006-07-30</date> <time>19:20:19</time>

91

<info>Ruangkecil.Or.id, pemanfaatan AJAX dalam pengembangan web application </info> </quicknews> <quicknews> <id>1</id> <title>Quick news pertama</title> <sender>JerryPeter</sender> <date>2006-07-30</date> <time>19:20:19</time> <info>Ruangkecil.Or.id, pemanfaatan AJAX dalam pengembangan web application </info> </quicknews> </coreQuick> </xml> 4. Masih pada folder yang sama, modul10 simpan file tersebut dengan nama

coreQuick-data.xml 5. Terakhir anda ket ikkan script berikut ini pada text ed itor anda dengan

membuka file baru : .quickNews{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-t ransform: none; color: #006699; text-decoration: none; display: block; padding: 0px; width: 220px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left : 0px; background-color: #F9F9F9; border: 1px solid #006699; } .title {

92

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-t ransform: none; color: #000000; text-decoration: none; background-color: transparent; display: block; padding: 3px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #0099CC; border-right-color: #0099CC; border-bottom-color: #0099CC; border-left-co lor: #0099CC; } .info { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-t ransform: none; color: #006699; text-decoration: none; padding: 3px; display: block; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left : 0px;

93

} .sender { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-t ransform: none; color: #006699; text-decoration: none; display: block; padding-top: 3px; padding-right: 3px; padding-bottom: 0px; padding-left: 3px; } .date { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-t ransform: none; color: #006699; text-decoration: none; display: block; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; } 6. Simpan file tersebut dengan nama ajax-example.css letakkan juga di

folder modul10 7. Buka file ajax-contoh4 dengan menggunakan web browser

(IE/Mozilla/Opera, d ll), jika semua script yang anda ketikkan benar dan web browser yang anda gunakan support maka tampilan yang muncul adalah seperti ini.

94

8. Baris terakh ir terdapat kalimat “Click disin i untuk load Data” dengan

warna yang berbeda dan bergaris bawah yang menunjukkan link 9. Klik link tersebut maka akan anda dapatkan hasilnya seperti berikut :

10. Apa kesimpulan anda?

95

3. Tugas Praktikum 1. Apa yang dapat anda jelaskan dari keg iatan praktikum d iatas? 2. Jelaskan keterkaitan antara file 1 (ajax-contoh4.html) dengan file 2 (

coreQuick-data.xml) dan file 3 (ajax-example.css) ! 3. Buat contoh aplikasi ajax sederhana yang menggabungkan xml dan css

seperti kegiatan prakt ikum diatas. 4. Beri penjelasan dari apa yang telah anda kerjakan pada soal no 3 !


1. Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Point. Melbourne Australia, 2006

2. www.slash.web.id 3. www.atnlie.blogspot.com 4. www.bambangriadi.com


96

MODUL XI FRAMEWORK

(PENGENALAN CODEIGNITER)

1. Dasar Teori 1.1 Pengertian Framework

Adalah sekumpulan perintah dan fungsi dasar yang dapat membantu menyelesaikan proses – proses yang lebih kompleks.

Mengapa harus Framework ? Sebenarnya bukan keharusan untuk menggunakan framework. Namun, seperti pengertian diatas, framework dapat membantu anda dalam menyelesaikan pekerjaan yang lebih kompleks.

1.2 Pengenalan CodeIgniter CodeIgniter adalah sebuah framework php yang dapat mempercepat

developer untuk membuat sebuah aplikasi web. Ada banyak library dan helper yang berguna didalamnya dan tentunya mempermudah proses development.

Apa Keunggulan Codeigniter?

CodeIgniter sangat ringan, terstruktur, mudah dipelajari, dokumentasi lengkap dan support yang luar biasa dari forum codeigniter. A lasan lainnya

Tujuan :

1. Peserta praktikum dapat mengenal cara kerja framework dan

mengetahui fungsi serta kelebihannya.

2. Peserta praktikum dapat mengenal framework CodeIgniter dan

menggunakannya dalam ap likasi dasar/sederhana.

Tugas Pendahuluan :

1. Apakah framework itu? Jelaskan secara rinci!

2. Masing-masing framework punya keunggulan tersendiri. Apakah

keunggulan CodeIgniter? Jelaskan masing-masingnya!

3. Kebanyakan framework menggunakan model MVC. Bagaimana

cara kerja MVC? Jelaskan!

97

adalah

· Menggunakan pattern MVC yang mempermudah dan meningkatkan flesibilitas

· Menghasilkan url yang search engine friendly CI menggunakan struktur pemanggilan eksekusi seperti ini : www.your-site.com/news/article/345. Jadi maksudnya, ketika sebuah Search Engine mencari kata yang terkait ke sebuah situs, maka kata kunci tersebut bisa saja didapatkan dalam pemanggilan alamat situs tersebut.

· Mudah untuk membuat library dan helpernya · Jalan di PHP 4 (4.3.2+) dan 5

· Support banyak database MySQL (4.1+), MySQLi, MS SQL, Postgres, Oracle, SQLite, dan ODBC.

· Sekuritas aplikasi terjaga

· Banyak lib rary dan helper yang mempermudah pekerjaan

1.3 MVC Secara umum, framework menggunakan struktur MVC (Model, View,

Controller). MVC sebenarnya adalah sebuah pattern yang bertujuan memisahkan bisnis logic, data logic dan persentation logic (interface) atau simplenya memisahkan antara desain, data dan proses.

Jika digambarkan, kira-kira seperti ini : Input > Processing > Output = Controller > Model > View

98

Model Model mencangkup semua proses yang terkait dengan pemanggilan struktur data dan interaksi ke database, baik berupa pemanggilan fungsi, input processing atau mencetak output ke dalam browser Controller Controller mencangkup semua proses yang terkait dengan pemanggilan database dan kapsulisasi proses-proses utama. Jadi semisal di bagian in i ada file bernama member.php, maka semua proses yang terkait dengan member akan dikapsulisasi/dikelompokan dalam file ini. Controller bert indak sebagai penghubung data dan view. View View mencangkup semua proses yang terkait layout output. Bisa dibilang untuk menaruh template interface website atau aplikasi.

99

1.4 Stuktur CodeIgniter Setelah di ekstrak, letakkan di fo lder htdoc s, maka akan didapatkan

struktur direktori seperti ini :

Kita hanya akan bermain di fo lder application, di situlah aplikasi kita diletakkan. Ø Folder system menyimpan semua file, baik itu file aplikasi yang kita buat

maupun core frameworknya.

100

Ø Folder application: disin ilah ap likasi yang akan kita bangun diletakkan Ø Folder config : tempat menyimpan semua file konfigurasi yang ada di

aplikasi mulai dari database, router dan autoload dari aplikasi

Ø Folder controllers : tempat menyimpan semua file controller.

Ø Folder errors : tempat menyimpan semua template error ap likasi

Ø Folder helpers : tempat menyimpan helper-helper yang bukan berasal dari

CI

Ø Folder hooks : tempat menyimpan hook yang digunakan untuk mengubah

alur fungsi dari core CI

Ø Folder language tempat menyimpan bahasa-bahasa yang akan di gunakan

Ø Folder libraries tempat menyimpan semua lib rary buatan kita sendiri

Ø Folder models tempat menyimpan semua model.

Ø Folder views tempat menyimpan semua file view applikasi.

Ø Folder cache tempat menyimpan semua cache yang dibuat caching library.

Ø Folder codeigniter tempat menyimpan semua semua file internals CI.

Ø Folder database tempat menyimpan semua driver database drivers dan class

yang akan digunakan.

Ø Folder fonts tempat menyimpan semua fonts yang digunakan image manipulation library.

Ø Folder helpers tempat menyimpan semua helper core CI.

Ø Folder language tempat menyimpan semua langguage core CI.

Ø Folder libaries tempat menyimpan semua library core CI

Ø Folder logs tempat menyimpan semua logs generated oleh CI.

Ø Folder plugin tempat menyimpan semua plugin core CI.

Ø Folder scaffolding tempat menyimpan semua file yang berfungsi sebagai scaffolding .

Ø Folder user_guide berisi userguide/manual penggunaan CI.

Ø Fileindex.php file yang akan menghandle semua request yang dilakukan oleh client.

yang perlu diperhatikan 3 fo lder penting : /system/application/model /system/application/controller /system/application/view Jadi, semua file yang terkait dengan website atau aplikasi anda, masing-masing harus ditaruh di ketiga fo lder ini sesuai dengan fungsinya masing-masing.

1.5 Aturan Penulisan Fungsi

101

Karena CI menggunakan Object Oriented Programming (OOP), maka yang perlu diingat bahwa penulisan nama class utama harus menggunakan huruf besar di awal dan disimpan dengan nama yang sama ,tetapi menggunakan huruf kecil semua. Sebagai contoh, silahkan buka file /system/application/controllers/welcome.php class Welcome extends Controller { function Welcome() { parent::Controller(); } function index() { $this->load->view(’welcome_message’); } }

Aturan ini berlaku untuk semua file yang terkait dengan class fungsi. Sedangkan jika d idalamnya terdapat fungsi-fungsi lain, boleh menggunakan huruf kecil saja atau huruh besar. Tetapi perlu d iingat bahwa PHP sangat Case Sensitive, jadi berhati-hatilah dalam menggunakan nama fungsi. 1.6 Konfigurasi

Selanjutnya, dalam folder /system/application/config/ ada beberapa file yang perlu diubah supaya CI b isa berjalan dengan baik. config.php Isi alamat pemanggilan di browser. Dalam contoh ini alamatnya adalah http://localhost/codeigniter $config['base_url'] = “http://localhost/codeigniter”; database.php Isi hostname, username, password dan nama database yang digunakan. autoload.php File ini berfungsi untuk memanggil secara otomat is fungsi-fungsi yang sudah disediakan CI atau yang anda buat tanpa harus memanggillnya dalam ap likasi anda. Dalam kasus ini, kita akan memanggil fungsi database secara otomatis sehingga setiap fungsi lain yang membutuhkan fungsi database cukup dengan menggunakan perintah $this->db Kira-kira seperti ini isinya : $autoload['libraries'] = array(’database’); routes.php Variabel ini digunakan untuk menentukan nama file utama yang digunakan sebagai eksekutor utama website atau aplikasi. Contoh secara defaultnya adalah file welcome. $route['default_controller'] = “welcome”;

102

Silahkan buka folder /system/application/controllers/, pasti anda menemukan file yang bernama welcome.php. File ini yang disebut sebagai eksekutor utama dari proses secara keseluruhan. Bisa dibilang ‘index’ nyalah.


1. Downloadlah CI (CodeIgniter) di http://codeigniter.com/download.php (saat tutorial ini ditu lis, versi yang saya download adalah CodeIgniter_1.7.2.zip). Ekstraklah file CodeIgniter_1.7.2.zip di folder yang bisa diakses web, ubahlah nama folder menajd i CodeIgniter.

2. Buatlah file userpage.php dan letakkan di folder CodeIgniter/system/application/controllers. Buatlah juga file header.php, sidebar.php, main.php, footer.php,desain.css, letakkan di di folder CodeIgniter/system/application/views.

3. Aktifkan web-server, lalu akseslah folder CodeIgniter 4. Bukalah file CodeIgniter/system/application/config/routes.php, gantilah

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

5. Akses kembali folder CodeIgniter dengan browsermu

<?php //userpage.php class Userpage extends Controller { //perhatikan bahwa huruf "U" harus besar function Userpage() //begitu juga dengan huruf "U" difungsi { parent::Controller(); } function index() { $data['judul'] = "Selamat Datang di Web Pertamaku"; $data['header'] = "Web Pertamaku"; $data['sidebar'] = "Menu SideBar"; $data['menu'] = array('menu 1', 'menu 2', 'menu 3'); $data['main'] = "In i adalah bagian main"; $data['copy'] = "Copyright © cesser :-)";

103

 <div id="sidebar"> <h3><?php echo $sidebar; ?></h3> <?php foreach($menu as $daftar): ?> <?php echo $daftar.'<br />'

 <div id="main"> <h1><?php echo $judul; ?></h1> <p><?php echo $main; ?></p> <p><?php echo $main; ?></p>

 <div class="clear"></div> </div> <div id="footer"> <p><?php echo $copy; ?></p> </div> </div> </body>

104

 <html> <head> <style type="text/css" media="all">@import "<?php echo base_url();?>system/application/views/desain.css";</style>  <title><?php echo $judul; ?></tit le> </head> <body> <div id="container"> <div id="header"> <h2><?php echo $header; ?></h2> </div> <div id="content"> /*-- desain.css --*/ body { background-color:#FFF; text-align:center; } #container{ width:900px; margin:0 auto; padding : 0; border : 0; background-color : red; } #header{ width:900px; margin:auto; height:30px; background-color : #057; color : #fff; } #content{ width:900px; margin:0;

105

background-color : #cecece; padding : 0; border : 0; } #sidebar{ width:300px; float:left; 3. Tugas Praktikum

1. Apa yang terjadi pada keg iatan praktikum, point 2? Jelaskan jawabanmu! 2. Apa yang terjadi pada keg iatan praktikum, point 5? Jelaskan jawabanmu!


· http://www.codeigniter.com

· http://www.codeigniter-id.com

106

class Model_name extends Model { function Model_name() { parent::Model(); } }

MODUL XII FRAMEWORK (PENGENALAN CODEIGNITER)

1. Dasar Teori

1.1. Model

Model mencangkup semua proses yang terkait dengan pemanggilan

struktur data dan interaksi ke database, baik berupa pemanggilan fungsi, input

processing atau mencetak output ke dalam browser.

Anatomi Model

Tujuan :

1. Peserta praktikum mengetahui settingan database dalam

CodeIgniter.

2. Peserta praktikum dapat membuat aplikasi database dengan

CodeIgniter.

Tugas Pendahuluan :

1. Apakah peranan model dalam ap likasi database dengan

CodeIgniter? Jelaskan!

2. File-file apa saja yang berperan dalam settingan database di

CodeIgniter? Bagiamana settingan dilakukan?

107

Dan filenya disimpan d i application/models/user_model.php

Membaca Model

$this->load->model('Model_name ');

$this->Model_name->function();

1.2. Database

Mengambil Data

· $this->db->get()

1 parameter :

$query = $this->db->get('mytable'); // menghasilkan : SELECT * FROM mytable

2 & 3 parameter : $query = $this->db->get('mytable', 10, 20); // menghasilkan : SELECT * FROM mytable LIMIT 20, 10 (in MySQL. Other databases have slightly different syntax)

· $this->db->select()

untuk menyeleksi sebagian field table, d igunakan fungsi ini :

$this->db->select('t itle , content, date'); $query = $this->db->get('mytable'); // menghasilkan : SELECT t itle, content, date FROM mytable

· $this->db->where()

$where = "name='Joe' AND status='boss' OR status='active'"; $this->db->where($where);

1.3. Memasukkan Data

$this->db->insert()

Contoh :

108

$data = array( 't itle ' => 'My title ' , 'name' => 'My Name' , 'date' => 'My date' ); $this->db->insert('mytable', $data); // menghasilkan : INSERT INTO mytable (tit le, name, date) VALUES ('My tit le', 'My name', 'My date')

$this->db->set() Contoh :

$this->db->set('name', $name); $this->db->insert('mytable'); // menghasilkan : INSERT INTO mytable (name) VALUES ('{$name}')

1.4. Meng-update Data

$this->db->update()

Contoh :

$data = array( 't itle ' => $tit le, 'name' => $name, 'date' => $date ); $this->db->where('id', $id ); $this->db->update('mytable', $data); // menghasilkan : // UPDATE mytable // SET tit le = '{$t itle}', name = '{$name}', date = '{$date}' // WHERE id = $id

1.5. Menghapus Data

$this->db->delete()

Contoh :

$this->db->where('id', $id ); $this->db->delete('mytable'); /*atau

109

$this->db->delete('mytable', array('id' => $id)); */ // menghasilkan : // DELETE FROM mytable // WHERE id = $id

$this->db->empty_table()

Contoh :

$this->db->empty_table('mytable'); // menghasilkan // DELETE FROM mytable

$this->db->truncate();

Contoh :

$this->db->from('mytable'); $this->db->truncate(); /* or $this->db->truncate('mytable'); */ // menghasilkan : // TRUNCATE mytable

1.6. Pagination


1. Buatlah database, misalnya ci_test.

2. Buatlah tabel pagination seperti contoh berikut :

create table pagination(

NoID int,

IsiNo varchar(20)

);

110

3. Isilah tabel pagination dengan data sbb :

INSERT INTO pagination VALUES(1,'Data ke satu');

INSERT INTO pagination VALUES(2,'Data ke dua');

INSERT INTO pagination VALUES(3,'Data ke tiga');

INSERT INTO pagination VALUES(4,'Data ke empat');

INSERT INTO pagination VALUES(5,'Data ke lima');

INSERT INTO pagination VALUES(6,'Data ke enam');

INSERT INTO pagination VALUES(7,'Data ke tujuh');

INSERT INTO pagination VALUES(8,'Data ke delapan');

INSERT INTO pagination VALUES(9,'Data ke sembilan');

INSERT INTO pagination VALUES(10,'Data ke sepuluh');

INSERT INTO pagination VALUES(11,'Data ke sebelas');

INSERT INTO pagination VALUES(12,'Data ke duabelas');

INSERT INTO pagination VALUES(13,'Data ke t igabelas');

INSERT INTO pagination VALUES(14,'Data ke empatbelas');

INSERT INTO pagination VALUES(15,'Data ke limabelas');

4. Buatlah file mpagination.php dan letakkan di folder

application/models/

<?php class Mpagination extends Model { function Mpagination(){ parent::Model(); } function AmbilData($num, $offset) { $query = $this->db->get('pagination', $num, $offset); return $query; } } ?>

111

5. Buatlah file pagination.php dan letakkan di folder

application/controllers/

<?php class Pagination extends Controller { function __construct() { parent::Controller(); $this->load->helper('url'); $this->load->database(); } function index() {

//load pagination class $this->load->library('pagination'); // Pengaturan konfigurasi untuk pagination $config['base_url'] = base_url().'index.php/pagination/index/'; $config['total_rows'] = $this->db->count_all('pagination'); $config['per_page'] = '4'; $config['first_link'] = 'Awal'; $config['last_link'] = 'Akhir'; $config['next_link'] = 'Selanjutnya'; $config['prev_link'] = 'Sebelumnya'; $this->pagination->initialize($config); //load model and ambil hasilnya $this->load->model('Mpagination'); $data['hasil'] = $this->Mpagination->AmbilData($config['per_page'],$this->uri->segment(3)); // load the HTML Table Class $this->load->library('table'); $this->table->set_heading('NoID', 'IsiNo'); // load the view $this->load->view('v_pagination', $data);

112

} } ?>

6. Buatlah file v_pagination.php dan letakkan di folder

application/views/

<html> <head> <title>Membuat Pagination</title> </head> <body> <h1>Membuat Pagination</h1> <? echo $this->table->generate($hasil); ?> <? echo $this->pagination->create_links(); ?> </body> </html>

7. Jalankan web-server dan akseslah aplikasi yang telah Anda buat!

8. Bukalah file application/config/autoload.php, ubahlah

$autoload['libraries'] = array(‘’); Menjadi

$autoload['libraries'] = array('database');

9. Ubahlah konfigurasi database pada file

application/config/database.php sesuai dengan konfigurasi database

Anda.

10. Akseslah lagi aplikasi yang telah Anda buat!

3. Tugas Praktikum

1. Apa yang terjadi pada Percobaan langkah ke-7? Jelaskan jawabanmu!

2. Apa yang terjadi pada Percobaan langkah ke-10? Jelaskan jawabanmu!

3. Sebutkan min imal 25 fungsi query database dalam CodeIgniter! Jelaskan

penggunaan masing-masing!

4. Jelaskan tentang penggunaan Method Chaining dalam akses database

CodeIgniter!

113


5. Referensi

· http://www.codeigniter.com

· http://www.codeigniter-id.com

modul 1 php lanjut (modularisasi, pengaksesan file)€¦ · tugas praktikum 1. tulis kesimpulan...

Documents