MODUL 1 PHP Lanjut (Modularisasi, Pengaksesan File) Tujuan : Mampu menjelaskan perintah-perintah PHP (modularisasi, peng aksesan file) dan membuat aplikasi dengan perintah-perintah PHP.

Tug as 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! 1. Dasar teori Modularisasi Modularisasi adalah penyusunan/pembuatan program berdasarkan modulmodul. 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 seju mlah fungsi yang dapat digunakan untuk melaku kan interaksi dengan file. Ada fungsi untuk melaku kan pembuatan, pembukaan, penulisan dan penghapusan file. Urutan pengaksesan file adalah seperti yang ditunjukkan pada gambar 7.9:

1

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 dilaku kan 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 belu m ada pakah perlu dibuat dulu filenya atau langsung mmebrikan pesan peringatan kepada pemakai bahw file yang akan digunakan atau diproses tidak ada. Skrip secara umu m untuk pemeriksaan file adalah: file_exists(“nama file”). Untuk lebih jelasnya seperti dibawah in i: 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:

2

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 belu m 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 belu m 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 belu m 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 melaku kan man ipulasi file diantaranya: § Fungsi Menyi mpan Data ke File Proses penyimpanan data ke dalam file membutuhkan fungsi fputs(). Bentuk pemanggilannya: fputs (pegangan, data) Dalam hal in i argu men 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

3

§ 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). Argu ment panjang menyatakan ju mlah 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 seju mlah 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 ko mentar, silahkan ketik koding di bawah ini, amat i hasilnya

4

2.

Setelah membuat web desain buku tamu, ketiklah simpan.php untuk menyimpan data yang dimasukkan pada file buku tamu diatas

5

6

3.

Ketik bukutamu.php di bawah ini dan modifikasi programnya untuk menamp ilkan siapa saja tamu yang pernah masuk ke web kita, contoh tampilannya seperti di bawah ini.

7

8

9

3. Tugas Praktikum 1. Tulis kesimpu lan anda mengenai praktiku m 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 sebag ai file eksternal untuk menukar nilai pertama menjadi kedua dan sebaliknya

10

File Include.php

5. Referensi 1. 2. 3. 4.

Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”. ANDI Yogyakarta.Yogyakarta, 2003. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & M YSQL”. PT. Elex Ko mputindo. Jakarta. 2005. Chris Bates, Web Programming: Bu ild ing Internet Applications, Third Ed ition, John Wiley & Sons Ltd, England, 2006. Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006.

11

5. 6. 7. 8. 9. 10.

Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”, Gava Media, Yogyakarta. 2007. Welling Lu ke, Tho mpson Laura, ”PHP and MySQL Web Develop ment”, Sams Publishing, 2003.

http://www.php.net http://www.mysql.com http://www.w3c.org http://www.ilmukomputer.com

12

MODUL II BASISDATA MYSQL DAN KONEKSI Tujuan : Mampu menggunakan dan mengaplikasikan Basis Data MySQL serta mengkoneksikannya dengan PHP.

PrePraktikum Apakah yang anda ketahui tentang basis data? 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 1. 2.

1.

Dasar Teori Basis data adalah sekumpalan in formasi yang diatur agar mudah dicari. Dalam art i u mu m basis data adalah sekumpulan data yang diproses dengan bantuan ko mputer yang memungkin kan 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. M YSQL 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

13

koneksi dengan server database MySQL sebagai sarana untuk mengumpulkan informasi. 1.1 Fungsi-Fungsi Yang disedi akan 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 argu mennya. 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. M isalnya, “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 melaku kan hubungan dengan server database misalnya database MS SQL Server, mSQL, Oracle dan sebagainya. Kebanyakan fungsi koneksi ke server

14

database mengunakan pola yang sama yaitu server, port, user, password. Fungsifungsi 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 lin k nama koneksi. Fungsi in i mengembalikan nilai FA LSE baik CREATE, UPDATE, DELETE, DROP, dll. Contoh: $conn=mysql_connect("localhost","root",""); $sql="select nama_anggota, password fro m 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 mu lai dari record pertama sampai nilai terakhir. Tiap record dibaca, dibentuk men jadi array dengan index nu meric 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 nu meris saja yang dimulai dari 0 untuk kolo m pertama samapai n -1 untuk kolo m terakh ir hasil query. 6. mysql_result(hasil_query,no_record,nama_field),

15

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 (dimu lai dari 0) dan nama field. 7.

mysql_num_fiel d(hasil_query) Fungsi berguna untuk mendapatkan ju mlah field dari hasil query. Contoh:

$ju m_ kolo m=mysql_num_fields($rs); 8.

mysql_num_rows(hasil_query) Fungsi ini berguna untuk mendapatkan ju mlah baris dari hasil query. Menghasilkan suatu array yang berisi seluruh ko lo m 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 to mbol 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 men jadi alamat_ru mah, setelah itu klik save.

16

Gambar 2.2 Tamp ilan 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

17

Hasilnya:

18

File : mahasiswa1_saving.php

5. 6.

Amatilah yang terjadi dari studi kasus diatas! Tugas tambahan (ditentukan oleh asisten praktiku m)!

19

3.

Tug as Praktikum 1. Desainlah sistem informasi akademik dengan melanjutkan kasus I pada kegiatan prakt iku m 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 iku m pada studi kasus ke-4. 3. Amatilah apa yang terjadi! 4. 5.

Catatan Praktikum 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 Ko mputindo. 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 Lu ke, Tho mpson Laura, ”PHP and MySQL Web Development”, Sams Publishing, 2003. 7. http://www.php.net 8. http://www.mysql.co m 9. http://www.w3c.org 10. http://www.ilmuko mputer.co m

20

MODUL III APLIKASI

Tujuan : Mampu membuat suatu aplikasi sederhana dengan PHP dan basisdata menggunakan M YSQL.

Tug as 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?

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 u mu m 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 Info rmasi 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.

21

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

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

22

23

3.

Gambar 3.2. Menu Utama 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:

24

25

Hasilnya:

File Tambah Data Pengarang:

26

File ubah data peng arang :

27

28

File hapus data pengarang:

4.

Tugas tambahan (ditentukan oleh asisten praktiku m)!

29

5. 6.

7.

Tug as Praktikum Desainlah Sistem Informasi Perpustakaan dengan melanjutkan pada kegiatan praktiku m studi kasus 3 untuk data buku, pegawai dan data anggota. Kemudian amat ilah apa yang terjadi? Dengan mendesain sistem info rmasi 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?

3.

Catatan Praktikum

4.

Referensi 1. Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”. ANDI Yogyakarta.Yogyakarta, 2003. 2. Arief Ramadahan, dkk. ”Buku Lat ihan PHP 5 & M YSQL”. PT. Elex Ko mputindo. 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 Lu ke, Tho mpson Laura, ”PHP and MySQL Web Develop ment”, Sams Publishing, 2003. 7. http://www.php.net 8. http://www.mysql.com 9. http://www.w3c.org 10. http://www.ilmukomputer.com

30

MODUL IV SESSION DAN COOKIES

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

Tug as 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?

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 halamanhalaman lain tanpa perlu melaku kan 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

31

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. · Exp ire: 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:

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

· HTTP_ COOKIE_ VA RS Contoh: Dan untuk menghapus cookie yaitu:

32

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 ditamp ilkan. Contohnya: 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 imp lementasi 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:

33

2.

Memberikan keamanan akses menggunakan cookies, sebagai berikut :

34

3. 4.

Amatilah yang terjadi pada studi kasus 2! Tugas tambahan (ditentukan oleh asisten praktiku m)!

35

3.

Tug as Praktikum 1. Modifikasi dengan memberikan akses menggunakan session pada kasus I kegiatan prakt iku m diatas. 2. Buatlah fasilitas logout pada sistem akademik dengan melaku kan pengosongan nilai pada variabel session tersebut sehingga ketika browser yang tampil maka dibelo kkan ke halaman log in. Untuk itu pada form mahasiswa ataupun form dosen diberi hiperlin k ”keluar” nilai perlu diganti dengan keluar. 3. Jelaskan program dan hasil eksekusinya berikut ini: "); session_register("var_x"); $var_ x="7896"; print("SID sekarang: $var_ x
"); session_unregister("var_x"); print("SID unregister:".session_id()); session_destroy();

?> session_start() : ----------------------session_register() :-------------------session_unregister() : ----------------session_destroy() : --------------------4.

Catatan Praktikum

5. 1.

Referensi Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”. ANDI Yogyakarta.Yogyakarta, 2003. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & MYSQL”. PT. Elex Ko mputindo. Jakarta. 2005. Chris Bates, Web Programming: Building Internet Applications, Third Ed ition, John Wiley & Sons Ltd, England, 2006.

2. 3.

36

4. 5. 6. 7. 8. 9. 10.

Elliot White III, Jonathan Eisenhamer, PHP 5 in Practice, Sams, 2006. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”, Gava Media, Yogyakarta. 2007. Welling Lu ke, Tho mpson Laura, ”PHP and MySQL Web Develop ment”, Sams Publishing, 2003.

http://www.php.net http://www.mysql.com http://www.w3c.org http://www.ilmukomputer.com

37

MODUL V CONTENT MANAGEMENT SYSTEM ( WORDPRESS)

Tujuan : 1. Mampu menginstall ap likasi wordpress yang berlisensi GPL/free di ko mputer untuk di jalankan secara offline 2. Memahami CMS (Content Management System)

Tug as Pendahuluan 1. Download aplikasi wordpress yang berlisensi GPL/free dari situs www.wordpress.org ! 2. Jelaskan langkah-langkah memu lai wo rdpress offline? Apa yang anda ketahui mengenai CMS (Content Manajement System) ? 4. Sebutkan dan jelaskan beberapa aplikasi CMS yang popular menurut anda?

3.

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 meningkat kan 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 men ingkatkan kinerja perusahaan dengan menyediakan layanan mandiri bagi para karyawan, partner, penyedia barang dan pelanggan.

38

Dengan adanya CMS yang terintegrasi dengan sebuah WebSite akan memberikan suatu nilai lebih yang akan men ingkatkan 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 temp lating 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 ko mputer, pekerja umu m, 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 pro mosi 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 diju mpai adalah min imnya kemampuan desain, pemahaman HTM L, dan pemrograman web. Hal itulah yang seringkali membuat situs pribadi tidak bertahan lama. Beberapa kelo mpok mencoba memecah kan 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.

39

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 mu lai membuat database MySQL yang nantinya digunakan untuk Wordpress melalui interface PHPMyAd min. Buka melalui sidebar XAMPP dan buat database baru, untuk contoh dibawah namai database baru tersebut dengan nama wordpress.

40

5. Sekarang untuk mengkonfigurasi Wordpress ke localhost, mulai dengan mengekstract 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 mengaksesnya 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.

41

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

42

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 praktiku m no 1. 10. Buat halaman Blog pertama anda dengan tema welco me. 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 to mbol Add New yang terletak di bagian atas halaman.

43

Halaman Add New Page

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

M enambahkan informasi pada halaman Add New Page

b.

Klik to mbol View Page untuk melihat tampilan halaman baru pada blog.

44

Tampilan halaman yang baru

45

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

Link ke halaman baru pada halaman utama

3.

Tug as Praktikum 1. Halaman apa yang ditamp ilkan ket ika anda klik ”Vis it Site” ? submenu apa saja yang ada pada halaman tersebut dan apa fungsi dari masingmasing submenu? 2. Dengan meman faatkan fasilitas penyuntingan teks, edit tulisan pada kegiatan prakt iku m no 10 yang telah anda buat.

46

· Manfaatkan menu tab HTM L · Beri warna pada font yg digunakan (warna bebas) · Doku mentasikan 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.

47

4.

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

1.

Catatan Praktikum

2.

Referensi 1. 2. 3.

Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Po int. Melbourne Australia, 2006 www.wordpress.com www.wordpress.org

48

MODUL VI CONTENT MANAGEMENT SYSTEM (WORDPRESS LANJUT) Tujuan : Mampu Menjelaskan pengertian blog, cara membuat blog dan mengelola blog di wo rdpress (online)

Tug as 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)

1.

Dasar Teori

1.1 Pengertian dan Pemanfaatan B LOG 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 med ia 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 ko mputer, pekerja u mu m, 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 pro mosi 7. Pendidikan 8. Ekspresi diri

49

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 umu m diju mpai adalah minimnya kemampuan desain, pemahaman HTM L, dan pemrograman web. Hal itulah yang seringkali membuat situs pribadi tidak bertahan lama. Beberapa kelo mpok mencoba memecahkan permasalahan ini dengan membuat dan menyediakan situs khusus tempat orang bisa melaku kan kegiatan blog tanpa keharusan menjadi ah li dalam teknologi web. Salah satu aplikasi blog yang populer adalah WordPress 1.2 Menu Kelol a – 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 menamp ilkan 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. · Kateg ori (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 doku men sehingga mudah dikenali oleh pembacanya. Kateg ori Taut (Link Categ ories). Menu untuk mengedit kategori lin k. Pada menu ini anda akan melihat daftar kategori lin ks. Sub menunya adalah Cari, Tambah Kategori, Hapus, Ed it (sunting)

50

·

·

·

Pustaka Medi a 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 wo rdpress 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.

51

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.

52

Kategori telah ditambahkan

2.

Tampak kategori baru sudah tampil. Pilih/centang kategori yang diinginkan. 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 praktiku m 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

53

·

Setelah itu muncul tampilan berikut,

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

54

3.

Buat sebuah pengelolaan User a. Pengelolaan user dilakukan melalui tab User.

b. c.

Daftar user dan penulis sebuah blog dapat dilihat pada halaman Users/Author & Users. Daftar user yang ditampilkan pada halaman tersebut terdiri dari enam buah kolom, yaitu : · ID, nomo r identitas user · Username, nama login user · Name, nama asli user · E-mail, alamat e-mail user

55

d.

e. f.

· Website, situs yang dimiliki oleh user Actions, aksi yang dapat dilakukan terhadap user, yaitu melihat tulisan yang pernah dipublikasikan oleh user dan menyunting profil user. Seleksi terhadap user dilakukan dengan mengklik kotak cek yang terdapat pada kolo m ID. 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 melaku kan publikasi. · Author, user dapat menulis, mengelola tulisannya, dan melakukan publikasi tulisan. · Ed itor, user dapat menulis, melaku kan publikasi tulisan mengelo la tulisannya sendiri dan user yang lain. · Admin istrator, user yang memiliki akses penuh terhadap blog.

Area pengaturan user

56

g.

Undanglah user lain terlibat dalam penulisan blog, ketikkan alamat email user yang akan diundang pada kotak teks User E-mail, tentukan Role yang akan dimiliki user tersebut, dan klik to mbol 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.

Tug as Praktikum 1. Setelah mencoba seluruh kegiatan praktiku m, 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 (Lin k 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 praktiku m. 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. 5. 6.

Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Po int. Melbourne Australia, 2006 www.wordpress.com www.wordpress.org

57

MODUL VII CONTENT MANAGEMENT SYSTEM ( WORDPRESS LANJUT ) Tujuan : Mampu membuat tamp ilan blog lebih menarik dengan memanfaatkan fiturfitur appearance dari wordpress.

Tug as 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 !

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 ju mlah kolo m 2 atau 3 bahkan ada yang lebih, berikut contoh theme yang hanya memiliki 2 kolo m yaitu kolo m “body” dan kolom “navigasi”. Gambar d ibawah ini menjelaskan bagian-bagian tersebut.

58

Bagian-Bagian dari Sebuah Halaman Blog Widgets Widgets adalah komponen-ko mponen blog yang umumnya diletakkan pada sidebar. Sidebar sendiri adalah ruang kolo m yang ada di sisi kanan dan kiri blog, tergantung theme yang digunakan. Pada Kolo m 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. 2.

Kegiatan Praktikum

1. Lakukan perubahan tamp ilan agar leb ih menarik. Ikuti langkah berikut : ·

Klik menu APPEA RANCE

Tampilan halaman Appeareance

59

·

Klik submenu THEM ES

Tampilan halaman Themes

· · ·

Pilih theme yang disukai pada bagian AVAILA BLE THEM ES Klik A CTIVA TE untuk theme yang disukai Untuk melihat perubahannya, klik VISITE SITE

Tombol Visit Site

·

Lihat perubahan setelah themes diganti

60

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.

61

62

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 to mbol save. Gambar di bawah menunjukkan perbedaan tampilan b log sebelum dan sesudah penambahan widgets.

63

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 Col or, seperti tampak pada gambar berikut:

Tampilan halaman Header Colors

64

Contoh Setting warna

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

65

Hasil penggantian warna

Seandainya dengan penggantian gambar tersebut warna teks judul blog men jadi 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 wu jud 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 lin k Color Header. Dibawah gambar header akan terdapat enam buah tombol yang digunakan untuk pengaturan warna. To mbol-tombol tersebut adalah sebagai berikut : · Font color, digunakan untuk menentukan warna teks

66

· · · ·

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 Co lor Picker.

3.

Tug as Praktikum :

67

Buat suatu Toko Online sederhana yang menjual suatu produk (ditentukan oleh asisten praktiku m, 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 www.wordpress.com www.wordpress.org

2. 3.

68

MODUL VIII EXTENSIBLE MARKUP LANGUAGE (XML)

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

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

1.

Dasar Teori XM L Singkatan dari eXtensible Markup Language, dikembangkan mu lai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998. Teknologi yang digunakan pada XML sebenarnya bukan teknologi baru, tapi merupakan turunan dari SGM L yang telah dikembangkan pada awal 80-an dan telah banyak digunakan pada dokumentasi teknis proyek-proyek berskala besar. Ketika HTM L d ikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian paling penting pada SGM L dan dengan berpedoman pada pengembangan HTM L menghasilkan markup language yang tidak kalah hebatnya dengan SGM L. Seperti halnya HTM L, XM L juga menggunakan elemen yang ditandai dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup(diawali dengan ‘’) dan atribut elemen(parameter yang dinyatakan dalam tag pembuka misal ). 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 XM L terdiri dari bagian bagian yang disebut dengan node. Node-node itu adalah: · Root node

69

· · · · · ·

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 Sintaks XML Dibandingkan dengan HTM L, XM L leb ih detail. Kalau kita menulis sebuah dokumen HTM L, beberapa kesalahan penulisan masih ditolerir. Misalnya kita menempatkan tag bersilangan seperti

Hu ruf Tebal

meskipun tidak dianjurkan, HTM L masih bisa bekerja dan menamp ilkan hasil seperti yang kita ing inkan. Tidak demikian dengan XML. Lebih jelasnya kita akan bahas di bawah bagaimana membuat dokumen XM L yang baik. Heading standard untuk Document XM L : Biasakanlah setiap membuat dokumen XM L d iawali dengan heading standard XML. Formatnya adalah sebagai berikut: 1.2

70

Doku men XM L harus memiliki Root tag Sebuah dokumen XM L 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: <subchild>

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 HTM L, CSS juga dapat digunakan untuk memfo rmat doku men XM L. CSS dapat melaku kan redefinisi tag HTM L, memungkinkan tag tersebut disajikan dalam cara berbeda. Dengan cara yang sama, CSS dapat digunakan untuk mendefin isikan bagaimana tag XM L ditamp ikan. 2. XSL (eXstensible Stylesheet Language) XSL merupakan singkatan dari eXstensible Stylesheet Language, dan merupakan suatu bahasa yang dikembangkan untuk memformat doku men XM L. 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 memanfaat kan beberapa fiturnya saja. 2.

Kegiatan Praktikum

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

71

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

3. Jika perubahan pada program xml diatas menjadi:

72

4. Tugas tambahan (ditentukan oleh asisten praktiku m)? 3.

Tug as Praktikum 1. Amatilah apa yang terjadi dengan studi kasus ke-3 pada kegiatan praktiku m d iatas? 2. Buatkan Dengan menggunakan Coding XML hirarki untuk sistem perpustakaan Unijoyo. Contoh kasus seperti dibawah ini:

3.

Carilah di internet contoh aplikasi XM L d i bidang pendidikan dan b isnis dengan menggunakan elemen XM L dan DTD

4.

Catatan Praktikum

5.

Referensi 1. Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”. ANDI Yogyakarta.Yogyakarta, 2003. 2. Arief Ramadahan, dkk. ”Buku Lat ihan PHP 5 & M YSQL”. PT. Elex Ko mputindo. 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 Lu ke, Tho mpson Laura, ”PHP and MySQL Web Develop ment”, Sams Publishing, 2003. 7. http://www.php.net

73

8. http://www.mysql.com 9. http://www.w3c.org 10. http://www.ilmuko mputer.co m

74

MODUL IX AJAX (DASAR-DASAR AJAX) Tujuan : Mampu memahami teknologi ajax dan membuat aplikasi ajax sederhana.

Tug as 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 ! 1. Dasar Teori Mengenal Ajax Ajax pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul Ajax: A New Approach To Web Applicati ons. 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 HTM L Form baik POST ato GET. Data dapat dikirim atau diambil dengan

75

menggunakan tombol "submit". Dimana halaman akan direload keseluruhan, hal in i akan sangat bermasalah jika web servernya lambat.

secara

Ajax mencoba memperbaiki JavaScript untuk dapat berkomunikasi secara langsung dengan server secara langsung. Ajax menggunakan javaScript Ob ject XM LHttpRequest. Dengan Object ini, maka java script dapat berhubungan dengan server secara langsung.dan nilai tambahnya adalah Ajax dapat mengamb il 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 :

<style type="text/css">
79

.table { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11p x; 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: 1p x solid # 0099CC; } -->

<strong>File dataLoad.html Apapun isi content dari file in i akan di load dan di tampilkan pada lokasi DIV content yang di tuju. File yang di load in i bisa berupa file statis biasa, ataupun file berisi content yang di proses terlebih dahulu oleh server.

7. 8.

Simpan dengan nama ajax-contoh3.html pada folder modul9 Kemudian masuk ke fo lder modul9 yang telah anda buat tadi, buka ajaxcontoh1 dengan menggunakan web browser (IE/Mo zilla/Opera d ll), jika seluruh script yang anda ketikkan benar maka akan muncul tampilan berikut :

80

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 tamp ilan berikut.

81

3.

12. Apa kesimpulan anda? Tug as 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 praktiku m diatas? 4. Jika ditemu kan error pada saat running di web browser, kira-kira apa saja kemungkinan penyebabnya? 5. Buat contoh ajax sederhana seperti kegiatan praktiku m diatas, dengan menyisip kan ajax pada html. !

4.

Catatan Praktikum

5.

Referensi

Mathew Errnisse, “Build Your Own AJAX Web Application”. Site Point. Melbourne Australia, 2006 2. www.slash.web.id 3. www.atnlie.blogspot.com 4. ww w.bambangriadi.co m 1.

82

MODUL 10 AJAX (AJAX LANJUT)

Tujuan :

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

Tug as Pendahuluan : 1. Keleb ihan utama AJAX terletak pada pemanfaatan class object XM LHttpRequest 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 co mponent lain yang dapat dipadukan dengan ajax !

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, XM L, Javascript dan teknologi pendukung lainnya. AJAX adalah akronim dari Asynchronous JavaScript and XM L, ko mponen-ko mponen AJAX meliputi: ·

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

83

·

·

·

·

·

·

·

·

XHTML (Extensible HyperText Markup Language), adalah bahasa markup sebagaimana HTM L, tetapi dengan gaya bahasa lebih baik. Versi terakhir saat tulisan ini d ibuat adalah XHTM L 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 HTM L atau XM L (termasuk beberapa variasi bahasa XML seperti XHTM L dan SVG). JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melain kan dirancang untuk ditanamkan pada produk dan aplikasi lain seperti peramban web. DOM (Document Ob ject Model) adalah sebuah API (Application Program Interface) untuk dokumen HTM L dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkin kan 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 u mu m yang disarankan oleh W3C untuk membuat doku men markup keperluan khusus. Keperluan utama XM L adalah untuk pertukaran data antar sistem yang beraneka ragam. XSLT (Extensible Stylesheet Language Transformations ) adalah sebuah bahasa berbasis-XML untuk transformasi doku men XM L. Walaupun proses merujuk pada transformasi, doku men asli t idak berubah melain kan dokumen XM L baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya digunakan untuk merubah skema XM L 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 XM LHttpRequest untuk melakukan pertukaran data dengan peladen web. JSON (JavaScript Object Notation) yaitu format pertukaran data ko mputer 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 ko munikasi yang digunakan untuk imp lementasi AJAX. Teknik yang umum digunakan adalah dengan menggunakan:

84

·

·

·

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 melaku kan postback ke server. Javascript digunakan untuk mengambil data dan mengisi data yang ada di frame tersembunyi ini. Hidden Frame Metode ini hamp ir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame. Objek XM LHttpRequest Metode yang satu ini memanfaat kan ActiveX Objek (IE) atau objek javascript XMLHttpRequest (Mozilla/Firefo x, Safari, Opera). Ob jek ini yang akan melaku kan postback ke server dan menerima respon balik berupa data (bukan halaman). Data yang didapat dari server kemudian diolah di klien untuk ditamp ilkan ke halaman.

Teknik pemprosesan halaman secara umu m ada dua: ·

·

2.

Pemprosesan halam dengan pembuatan/manipulasi objek doku men menggunakan javascript. Klien mengirimkan data dalam format XML/JSON kepada server dan mendapatkan data dari server berupa XML/JSON. Data XM L/JSON kemudian diolah untuk meman ipulasi objek doku men menggunakan DOM dan javascript. Parsial rendering. Pada teknik ini UI dan behaviour tidak diproses di klien melain kan diproses di server. Klien menerima UI dan behaviour kemudian melakukan rendering pada bagian halaman tertentu. 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.

85

1.

Kegiatan Praktikum Buka kembali text editor anda, buat file baru selanjutnya ketikkan script berikut ini :

<script language="javascript"> function createRequest(){ var oAJAX = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXOb ject("Msxml2.XM LHTTP"); } catch (e) { try { oAJAX = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { oAJAX = false; } } @end @*/ if (!oAJAX && typeof XM LHttpRequest != 'undefined') { oAJAX = new XM LHttpRequest(); } if (!oAJAX){ alert(" Error saat membuat XM LHttpRequest!"); } return oAJAX; } function requestContent(){ oRequest = createRequest(); var url = "coreQuick-data.xml"; // Bu ka ko munikasi dengan server oRequest.open("GET", url, true); // menunggu respon dari server

86

// jika sudah di dapat respon dari server, maka hasil respon akan di tamp ilkan pada DIV dengan ID='d ivContent' oRequest.onreadystatechange = function () {

document.getElement ById("divContent").innerHTM L="Menunggu Respon server