panduan web

August 12, 2009 [TUTORIAL PANDUAN WEB]

Tutorial Panduan Web | Copyright @ 2009 By Eli Astutik 1

Instalasi Program Pendukung Web Design

1.1 Instalasi PHP server dengan XAMPP 1.5.1 1. Masukkan CD Program XAMPP 1.5.1 ke dalam CD ROM. 2. Double klik XAMPP 1.5.1. 3. Tunggu proses (setup is loading). 4. Pada kotak dialog installer language di textbox please select a language pilih English lalu

klik Ok.

Gambar 1.1 Kotak dialog installer language 5. Klik Next untuk memasuki proses instalasi.

Gambar 1.2 Tampilan awal proses instalasi Xampp 1.5.1



6. Tahap selanjutnya adalah memilih folder tempat program Xampp 1.5.1 ditempatkan. Secara default program ini ditempatkan pada folder C:\Program Files\xampp. Namun apabila user ingin mengganti (memilih folder) sendiri, yaitu dengan mengklik Browse. Setelah menentukan lokasi tempat penyimpanan program Xampp 1.5.1, klik Install untuk memasuki tahap proses instalasi.

Gambar 1.3 Memilih folder tempat penyimpanan program Xampp 1.5.1 7. Tunggu Proses Installing sampai indikator loading penuh.

Gambar 1.4 Proses installing



Gambar 1.5 Tampilan otomatis Command Prompt, mengecek konfigurasi Xampp

8. Ketika tampil kotak dialog Install Xampp servers (Apache, MySQL or FileZillaFTP) as

service?. Klik Yes untuk tahap selanjutnya.

Gambar 1.6 Kotak dialog install Xampp servers

Gambar 1.7 Tampilan otomatis Command Prompt, mengecek instalasi Xampp servers

9. Ketika tampil kotak dialog Install Apache 2 as service?. Klik Yes untuk tahap

selanjutnya.

Gambar 1.8 Kotak dialog install Apache 2 as service



Gambar 1.9 Tampilan otomatis Command Prompt, instalasi Apache sukses

10. Selanjutnya klik Ok, instalasi Apache sukses.

Gambar 1.10 Instalasi Apache sukses 11. Ketika tampil kotak dialog Install MySQL as service?. Klik Yes untuk tahap selanjutnya.

Gambar 1.11 Kotak dialog install MySql as service

Gambar 1.12 Tampilan otomatis Command Prompt, instalasi MySql sukses



12. Kemudian klik Ok, instalasi MySql sukses.

Gambar 1.13 Instalasi MySql sukses 13. Ketika tampil kotak dialog installer FileZilla FTP, klik Ok untuk tahap selanjutnya.

Gambar 1.14 Kotak dialog installer FileZilla FTP 14. Klik Yes, Instalasi Xampp 1.5.1 sukses. Setelah itu akan tampil secara otomatis kotak

dialog XAMPP Control Panel Application. Jika Apache, MySQL, FileZilla Running berarti instalasi Xampp 1.5.1 sukses dan siap digunakan. Kemudian klik tombol close.

Gambar 1.15 Instalasi Xampp 1.5.1 sukses



Gambar 1.16 Kotak dialog XAMPP Control Panel Application

15. Selanjutnya jalankan program Xampp, dengan cara sebagai berikut:

Klik Start All Programs Klik Internet Explorer Pada Address Internet Explorer ketik localhost dan tekan tombol enter atau klik go. Lihat gambar 1.17, dan klik English untuk memilih bahasa program yang digunakan

yaitu bahasa Inggris.

Gambar 1.17 Memilih bahasa program yang digunakan 16. Setelah itu program Xampp akan tampil seperti gambar 1.18.

Gambar 1.18 Tampilan awal Program Xampp 1.5.1 dan siap digunakan 1.2 Instalasi Macromedia Dreamweaver MX 2004



1. Masukkan CD program Macromedia Studio MX 2004 ke dalam CD ROM..

2. Double klik Install Studio MX 2004. 3. Klik Dreamweaver MX 2004 kemudian klik tombol Install.

Gambar 1.19 Tampilan Macromedia Studio MX 2004, dan memilih Intalasi Dreamweaver MX 2004

4. Tunggu proses Extracting Files.

Gambar 1.20 Extracting Files



Gambar 1.21 Tampilan otomatis InstallShield Wizard 5. Pada tampilan awal proses instalasi. Klik Next untuk memasuki tahap selanjutnya, yaitu

tahap perjanjian. Pada tahap ini produsen Macromedia Dreamweaver MX 2004 memberikan perjanjian pada user yang isinya tercantum secara langsung.

Gambar 1.22 Tampilan awal proses instalasi 6. Klik Yes untuk menyetujui perjanjian yang ditawarkan dan memasuki tahap selanjutnya..

Gambar 1.23 License Agreement



7. Pada tahap ini adalah memilih folder tempat penyimpanan program Macromedia

Dreamweaver MX 2004. Secara default program ini akan ditempatkan pada folder C:\Program Files\Macromedia\Dreamweaver MX 2004. Namun apabila user ingin mengganti (memilih folder) sendiri, yaitu dengan mengklik Browse. Kemudian klik Next.

Gambar 1.24 Memilih folder tempat penyimpanan program Macromedia Dreamweaver MX 2004

8. Pada tahap ini adalah untuk pemilihan editor. Secara default editor yang diberikan antara

lain, JavaScript, CSS, dan XML. User dapat mengurangi editor dengan menghilangkan tanda centang didalam kotak editor. Setelah itu klik Next.

Gambar 1.25 Memilih Editor 9. Tahap ini adalah tahap review setting yang telah dilakukan sebelumnya. Macromedia

Dreamweaver MX 2004 memberikan tampilan review setting dan apabila Anda setuju, klik Next untuk memulai peng-copy-an file.



Gambar 1.26 Review Setting 10. Proses peng-copy-an file dapat didentifikasi dengan indikator yang akan berjalan sampai

hitungan persentase 100%.

Gambar 1.27 Proses peng-copy-an file

11. Setelah indikator menunjukakan 100%, maka berakhirlah proses instalasi progam Macromedia Dreamweaver MX 2004. kemudian klik Finish untuk menyudahi proses instalasi.



Gambar 1.28 Akhir dari proses instalasi 12. Selanjutnya jalankan program Macromedia Dreamweaver MX 2004, dengan cara sebagai

berikut: Klik Start All Programs Pilih Macromedia Lalu pilih dan klik Macromedia Dreamweaver MX 2004 Lihat gambar 1.29, pilih Designer dan klik Ok

Gambar 1.29 Untuk memilih tampilan Designer 13. Sehingga tampilan program Macromedia Dreamweaver MX 2004 seperti gambar 1.30.



Gambar 1.30 Tampilan awal Program Macromedia Dreamweaver MX 2004 1.3 Instalasi Macromedia Flash MX 2004 1. Klik Flash MX 2004 kemudian klik tombol Install.

Gambar 1.31 Tampilan Macromedia Studio MX 2004, dan memilih Intallasi Flash MX 2004

2. Tunggu proses Extracting Files.



Gambar 1.32 Extracting Files 3. Pada tampilan awal proses instalasi. Klik Next untuk memasuki tahap selanjutnya, yaitu

tahap perjanjian. Pada tahap ini produsen Macromedia Flash MX 2004 memberikan perjanjian pada user yang isinya tercantum secara langsung.

Gambar 1.33 Tampilan awal proses instalasi 4. Klik Yes untuk menyetujui perjanjian yang ditawarkan dan memasuki tahap selanjutnya.



Gambar 1.34 License Agreement 5. Pada tahap ini adalah memilih folder tempat penyimpanan program Macromedia Flash

MX 2004. Secara default program ini akan ditempatkan pada folder C:\Program Files\Macromedia\Flash MX 2004. Namun apabila user ingin mengganti (memilih folder) sendiri, yaitu dengan mengklik Browse. Kemudian klik Next.

Gambar 1.35 Memilih folder tempat penyimpanan program Macromedia Flash MX 2004

6. Pada tahap ini adalah untuk menginstal Macromedia Flash Player. User dapat mengurangi

program pendukung instalasi Macromedia Flash Player dengan menghilangkan tanda dentang didalam kotak. Setelah itu klik Next.



Gambar 1.36 Tampilan Instal Macromedia Flash MX 2004 7. Tahap ini adalah tahap review setting yang telah dilakukan sebelumnya. Macromedia

Flash MX 2004 memberikan tampilan review setting dan apabila Anda setuju, klik Next untuk memulai peng-copy-an file.

Gambar 1.37 Review Setting 8. Proses peng-copy-an file dan proses instalasi Macromedia Dreamweaver MX 2004 dapat

didentifikasi dengan indikator yang akan berjalan sampai hitungan persentase 100%.



Gambar 1.38 Proses peng-copy-an file dan proses installing 9. Setelah indikator menunjukakan 100%, maka berakhirlah proses instalasi progam

Macromedia Flash MX 2004. kemudian klik Finish untuk menyudahi proses instalasi.

Gambar 1.39 Akhir dari proses instalasi 10. Selanjutnya jalankan program Macromedia Flash MX 2004, dengan cara sebagai berikut:

Klik Start All Programs Pilih Macromedia Lalu pilih dan klik Macromedia Flash MX 2004 Lihat gambar 1.40, klik No



Gambar 1.40 Pilihan untuk download help content 11. Sehingga tampilan program Macromedia Flash MX 2004 seperti gambar 1.41.

Gambar 1.41 Tampilan awal Program Macromedia Flash MX 2004 1.4 Instalasi Adobe Photoshop CS 1. Masukkan CD program Adobe Photoshop CS ke dalam CD ROM. 2. Double klik setup. 3. Tunggu proses starting InstallShield Wizard.

Gambar 1.42 Tampilan otomatis InstallShield Wizard 4. Klik Next untuk memulai proses instalasi Photoshop CS. Setelah itu akan tampil kotak

pesan peringatan, dan klik Ok



Gambar 1.43 Tampilan awal proses instalasi Photoshop CS 5. Pilih USA English untuk bahasa program yang digunakan. Kemudian klik Next untuk

memasuki tahap selanjutnya, yaitu tahap perjanjian. Pada tahap ini produsen Adobe Photoshop CS memberikan perjanjian pada user yang isinya tercantum secara langsung.

Gambar 1.44 License Aggreement Language Selection 6. Klik Accept untuk menyetujui perjanjian yang ditawarkan dan memasuki tahap

berikutnya.



Gambar 1.45 Software License Agreement 7. Pada tahap ini Anda diharuskan untuk mengisi nama lengkap (first name dan last name),

company dan serial number sebagai data customer information. Untuk serial number (no seri CD) tergantung dari Instalasi Photoshop yang digunakan. Jika sudah tersisi, maka klik Next untuk tahap selanjutnya yaitu tahap registration informasi. Tahap registration informasi bertujuan untuk menyakinkan Anda bahwa name dan company yang digunakan sama dengan name dan company yang Anda inputkan pada customer information tadi, lalu klik Next.

Gambar 1.46 Tampilan Customer Information 8. Selanjutnya adalah memilih folder tempat penyimpanan program Adobe Photoshop CS

8.0. Secara default program ini akan ditempatkan pada folder C:\Program Files\Adobe\Photoshop CS. Namun apabila user ingin mengganti (memilih folder) sendiri, yaitu dengan mengklik Browse. Kemudian klik Next.



Gambar 1.46 Memeilih folder tempat penyimpanan program Adobe Photoshop CS

9. Pada tahap ini adalah untuk memilih beberapa file-file aplikasi photoshop yang diinginkan untuk di instal. Secara default pilihannya tampil seperti gambar 1.47. User dapat mengurangi pilihan file-file apilikasi photoshop yang tidak ingin diinstal, dengan cara menghilangkan tanda centang pada daftar pilihan tersebut. Setelah itu klik Next.

Gambar 1.47 Untuk memilih File Association dari aplikasi Photoshop CS

10. Tahap ini adalah tahap review setting yang telah dilakukan sebelumnya. Adobe Photoshop CS memberikan tampilan review setting dan apabila Anda setuju, klik Next untuk memulai peng-copy-an file.



Gambar 1.48 Review Setting

11. Proses peng-copy-an file dan proses instalasi Photoshop CS dapat didentifikasi dengan indikator yang akan berjalan sampai penuh.

Gambar 1.49 Proses peng-copy-an dan proses instalasi Photoshop CS

12. Setelah indikator berjalan sampai penuh maka berakhirlah proses instalasi progam Adobe Photoshop CS. Kemudian klik Finish untuk menyudahi proses instalasi. Secara otomatis akan muncul kotak pesan terima kasih, dan klik Ok.

Gambar 1.50 Akhir dari proses instalasi



MySQL

MySQL adalah multiuser database yang menggunakan bahasa Structured Query Language (SQL). Sedangkan SQL adalah bahasa standar yang digunakan untuk mengakses database server.

Tujuan dari pemakaian SQL dalam menyelesaikan tugas-tugas yang berkaitan dengan database, diantaranya: Memanggil data dari satu tabel atau lebih pada satu database atau lebih. Memanipulasi data pada tabel-tabel dengan menyisipkan, menghapus, atau memperbarui

record. Mendapatkan ringkasan informasi mengenai data pada tabel, seperti total, jumlah record,

nilai minimun, nilai maksimum, dan nilai rata-rata. Membuat, memodifikasi, atau menghapus tabel pada database. 2.1 Jenis-Jenis Perintah SQL

Secara umum perintah-perintah SQL dibagi menjadi dua kelompok, yaitu:

1. DDL (Data Definition Language)

Data Definition Language merupakan bagian dari SQL yang digunakan untuk mendefinisikan data dan obyek database. Perintah tersebut berupa membuat, mengubah, menghapus dll.

Beberapa perintah SQL yang termasuk Data Definition Languag, seperti terlihat pada

tabel berikut ini: Perintah Kegunaan

Create Table Membuat tabel Create Index Membuat index Alter Table Mengubah atau menyisipkan ke dalam tabel Drop Table Menghapus tabel Drop Index Menghapus index

2. DML (Data Manipulation Language)

Data Manipulation Language merupakan bagian dari perintah SQL yang digunakan untuk manipulasi data. Perintah-perintah ini bertugas untuk melakukan query dan perubahan yang dilakukan didalam suatu tabel.

Beberapa perintah SQL yang termasuk Data Manipulation Language, seperti terlihat

pada tabel berikut ini:

Perintah Kegunaan



Select Digunakan untuk memilih data dari suatu tabel Insert Menyisipkan atau memasukkan data dari suatu tabel Delete Menghapus isi data dari beris (record) pada tabel tertentu Update Mengubah isi data dari kolom (field) pada tabel tertentu

2.2 Tipe Data Pada MySQL 2.2.1 Tipe Data Interger

Pada tipe data ini yang dapat disimpan hanya berupa angka (numerik) saja, baik berupa angka positif maupun angka negatif. Lebih jelasnya lihat tabel dibawah ini:

Tabel tipe data numerik di MySql:

Tipe Data Jangkauan Signed Jangkauan Unsigned Memori TINYINT -128 – 127 0 – 255 1 byte SMALLINT -32768 – 32767 0 – 65535 2 byte MEDIUMINT -8388608 – 8388607 0 – 16777215 3 byte INT -2147483648 – 2147483647 0 – 4294967295 4 byte BIGINT -922337203685477508 –

9223372036854775807 0 – 18446744073709551615

8 byte

FLOAT Tergantung nilainya – 4 byte DOUBLE Tergantung nilainya – 8 byte DECIMAL Tergantung nilainya – M+2

byte Sedangkan attribut AUTO_INCREMENT, UNSIGNED dan ZEROFILL hanya dapat

digunakan pada tipe data interger saja. AUTO_INCREMENT memberikan nilai tipe data angka(number) yang di setting oleh

servernya, jadi secara otomatis nilai dari data(filed) tersebut akan selalu naik 1 angka setelah nilai data sebelumnya.

UNSIGNED memberikan nilai tipe data yang hanya dengan nilai positif saja, karena secara default tipe data ini jangkauannya sampai negatif.

ZEROFILL berfungsi untuk memberikan imbuhan nilai 0 di depan nilai sepanjang lebar tipe data.

2.2.2 Tipe Data String

Pada tipe data ini dapat beisi nilai string (alpanumerik/karakter) dan numerik. Yang jelas nilai numerik disini dapat untuk operasi perhitungan sebelum dilakukan konversi.

Tabel tipe data string di MySql:

Tipe Data Max Size Memori VARCHAR 225 byte X+1 byte TINYTEXT 225 byte X+1 byte TINYBLOB 225 byte X+2 byte



TEXT 65535 byte X+2 byte BLOB 65535 byte X+2 byte MEDIUMTEXT 1.6 byte X+3 byte MEDIUMBLOB 1.6 byte X+3 byte LONGTEXT 4.2 byte X+4 byte LONGBLOB 4.2 byte X+4 byte

2.2.3 Tipe Data Waktu

Tipe data ini menyimpan informasi waktu, baik tanggal maupun jam. Walaupun data yang disimpan disini numerik tetapi pembacaan terhadap data string. Jadi perlu dilakukan konversi bila ingin melakukan perhitungan. Berikut tipe data waktu yang didukung MySQL.

Tabel tipe data date time di MySql:

Tipe Data Format Standard Zero Value DATETIME YYY-MM-DD HH:MM:SS 0000-00-00 00:00:00 DATE YYY-MM-DD 0000-00-00 TIME HH:MM:SS 00:00:00 YEAR YYY 0000 TIMESTAMP YYYMMDDHHMMSS 00000000000000

2.2.4 Tipe Data Binary String BINARY

Mendefinisikan bilangan dengan ukuran teteap hingga 8000 byte. VARBINARY

Mendefinisikan bilangan dengan ukuran bervariasi hingga 8000 byte 2.2.5 Tipe Data Lainnya

Selain macam tipe data yang disebutkan diatas masih ada dua tipe data, yaitu ENUM dan SET. ENUM

Merupakan tipe data yang menyimpan beberapa pilihan data yang akan disimpan tetapi hanya satu pilihan yang boleh disimpan.

SET Tipe data ini hampir mirip dengan ENUM tetapi bisa memilih lebih dari satu pilihan.

2.3 Mendefinisikan Data 2.3.1 Membuat Database

Sebelum membuat tabel-tabel ataupun memasukkan data, terlebih dahulu harus membuat databasenya. Untuk membuat database, gunakan perintah SQL sebagai berikut ini:



CREATE DATABASE nama_database;

Setiap akhir perintah SQL biasanya diakhiri dengan simbol titik koma ( ; ). Sebagai contoh buatlah database baru dengan nama toko buku. Ikuti langkah-langkah di bawah ini. Aktifkan Program Xampp. Pada menu Tools klik phpMyAdmin.

Gambar 2.1 Tampilan program Xampp dan sedang mengklik phpMyAdmin

Lalu klik icon atau klik icon , setelah itu akan muncul tampilan seperti

gambar 2.2.

Gambar 2.2 Jendela Window SQL Ketik perintah SQL: CREATE DATABASE toko_buku; Klik GO. Secara otomatis database toko_buku akan tampil di daftar listmenu database.

Jika Anda menggunakan Program Xampp, file-file database akan tersimpan otomatis di lokasi C:\Program Files\xampp\mysql\data. 2.3.2 Membuka Database

Untuk membuka database gunakan perintah SQL sebagai berikut ini:

USE nama_database;



Bila Anda ingin membuat suatu tabel di database toko_buku, terlebih dahulu Anda harus

membuka database tersebut dengan perintah SQL: USE toko_buku; lalu klik go.

2.3.3 Membuat Tabel

Untuk membuat tabel gunakan perintah CREATE. Sintaks penulisannya adalah sebagai berikut ini:

CREATE TABLE nama_tabel ( nama_field1tipe_data1 nama_field2tipe_data2 … );

Sebelum Anda membuat tabel terlebih dahulu tentukan field-field yang diperlukan beserta type datanya seperti tabel di bawah ini.

Tabel buku:

Field Type data Keterangan kode_buku int(6) auto_increment dan primary Kode untuk buku judul varchar(60) Judul buku jenis varchar(20) Jenis buku penerbit varchar(30) Penerbit buku penulis varchar(30) Penulis buku harga int(6) Harga buku

Sehingga perintah SQL nya seperti ini:

CREATE TABLE buku ( kode_buku int(6) NOT NULL auto_increment, judul varchar(60) NOT NULL, jenis varchar(20) NOT NULL, penerbit varchar(30) NOT NULL, penulis varchar(30) NOT NULL, harga int(6) NOT NULL, PRIMARY KEY (kode_buku) );

2.3.4 Modifikasi tabel

Modifikasi tabel adalah mengubah atau mengedit kondisi tabel yang telah dibuat. Perubahan yang dimaksud bisa berkaitan dengan struktur tabel, misalnya menambah, menghapus field. Selain itu juga dapat digunakan mengubah jenis dari tipe filed pada suatu tabel.



Sintaks penulisan untuk menambah filed baru pada suatu tabel adalah sebagai berikut:

ALTER TABLE nama_tabel ADD nama_filed tipe_data;

Misal: pada tabel buku akan ditambah field baru dengan nama discount tipe int(6),

perintah yang harus diberikan:

ALTER TABLE buku ADD discount int(6);

Sintaks penulisan untuk mengganti field atau tipe data yang sudah ada pada suatu tabel

adalah sebagai berikut:

ALTER TABLE nama_tabel CHANGE 'nama_filed_sebelumnya' 'nama_filed_yang _diubah' tipe_data;

Misal: pada tabel buku di field discount tipe int(6) di ganti dengan nama filed potongan

tipe varchar(5) perintah yang harus diberikan:

ALTER TABLE buku CHANGE 'discount' 'potongan' varchar(5);

Sedangkan sintaks penulisan untuk meghapus field pada suatu tabel adalah sebagai berikut:

ALTER TABLE nama_tabel DROP nama_field;

Misal: pada tabel buku di field potongan ingin dihapus, maka perintah yang harus diberikan:

ALTER TABLE buku DROP potongan;

2.4.5 Menghapus tabel

Sekiranya ada tabel yang tidak dibutuhkan lagi dan ingin dihapus maka sintaks penulisan untuk menghapus tabel sebagai berikut:

DROP TABLE nama_tabel;

Jika tabel buku sudah tidak diinginkan ada dan ingin dihapus, maka perintah yang diberikan:

DROP TABLE buku;

2.4 Manipulasi Data



Manipulasi data atau pengelolahan data pada suatu tabel merupakan salah satu fasilitas MySQL yang memanfaatkan DML (Data Manipulation Language) diantaranya perintah Insert, Update, Delete, dan Select.

2.4.1 Memasukkan Data

Untuk memasukkan data (record) baru pada suatu tabel yang sudah dibuat, kita gunakan perintah INSERT.

Sintaks:

INSERT INTO nama_tabel (field1, filed2, … ) VALUES (nilai_field1, nilai_field2, … );

Sekarang kita coba untuk memasukkan beberapa data ke dalam tabel buku, maka perintah yang diberikan:

INSERT INTO buku (kode_buku, judul, jenis, penerbit, penulis, harga) VALUES ('',belajar,'buku','pustaka','dani',15000);

2.4.2 Modifikasi Data

Setiap data yang telah tersimpan dapat dimodifikasi/diubah sesuai dengan kriteria yang ada, dengan menggunakan perintah UPDATE.

Sintaks:

UPDATE nama_tabel SET field1 = nilai_field1, field2 = nilai_field2, … WHERE kriteria_field = predikat LIMIT 1;

Penjelasan perintah Insert : insert into nama_tabel : memasukkan data ke tabel. field1, field2 dst : nama dari masing-masing field yang terdapat pada tabel

tersebut. values : nilai dari variabel. nilai field1, nilai field2 dst : isi data / nilai field yang akan dimasukkan ke tabel sesuai

dengan kriteria field yang ada. Jadi field1 = nilai field1, field2 = field2, dst. Bila antara field dan nilai field tidak sesuai maka perintah insert gagal.



Sekarang kita coba untuk memodifikasi field judul dan jenis dari tabel buku dimana kode_buku = 1, maka perintah yang diberikan:

UPDATE buku SET judul= 'belajar lebih giat', jenis= 'buku ilmu pengetahuan' WHERE kode_buku = 1 LIMIT 1;

2.4.3 Menghapus Data

Untuk menghapus data (record) harus sesuai dengan kriteria yang ada, dengan menggunakan perintah DELETE.

Sintaks:

DELETE FROM nama_tabel WHERE kriteria_field = predikat LIMIT 1;

Misalnya kita akan menghapus data dimana recordnya itu ditentukan dengan kriteria kode_buku=1, maka perintah yang akan diberikan:

DELETE FROM buku WHERE kode_buku = 1 LIMIT 1;

Sedangkan perintah untuk menghapus seluruh record pada suatu tabel, dilakukan dengan

perintah DELETE tanpa menentukan kriterianya. Tetapi perlu waspada dalam menggunakan perintah ini karena data yang telah terhapus tidak dapat dikembalikan lagi.

Sintaks:

DELETE FROM nama_tabel;

Misal, menghapus seluruh record pada tabel buku, perintahnya yaitu:

DELETE FROM buku;

Penjelasan perintah Update: update nama_tabel : mengubah / mengganti data ke tabel. set field1=nilai field1, field2=nilai field2 dst. : menentukan nama field1= nilai field1,

nama field2=nilai field2 dst. where kriteria_field = predikat : dimana kriteria filed = kualifikasi untuk

record yang akan diubah. limit 1 : hanya mengganti satu record saja.

Penjelasan perintah Delete: delete from nama_tabel : menghapus dari tabel yang ingin dihapus. where kriteria_field = predikat : dimana kriteria field = kualifikasi untuk record yang

akan dihapus. limit 1 : hanya menghapus satu record saja.



2.4.4 Menampilkan Data

Perintah SELECT digunakan untuk menampilkan isi data pada field-field tertentu dari suatu tabel.

Sintaks:

SELECT field1, field2, … FROM nama_tabel;

Misalnya, kita menampilkan isi data pada field judul,penerbit dan penulis saja dari tabel buku, maka perintah yang diberikan:

SELECT judul,penerbit,penulis FROM buku;

Sedangkan perintah SELECT untuk menampilkan semua isi data pada field dari suatu tabel.

Sintaks:

SELECT * FROM nama_tabel;

Misalnya, kita menampilkan semua isi data pada field dari tabel buku, maka perintah yang diberikan:

SELECT * FROM buku;

2.4.5 Menyaring Hasil Penampilan Data dengan klausa WHERE

Klausa Where digunakan untuk menampilkan batasan baris (record) data yang akan ditampilkan. Umumnya klausa Where dikombinasikan dengan operator lain, misalnya operator relasi dan operator logika. Operator tersebut dapat dikenakan pada data number, string, maupun date.

Sintaks:

SELECT field1, field2, … FROM nama_tabel WHERE kriteria;

Penjelasan perintah Select: select field1, field2, dst : menampilakan isi data pada field-field tertentu. from nama_tabel : dari tabel yang ingin ditampilkan. Sedangkan tanda bintang ( * ) : menampilkan semua isi field.



Operator relasi digunakan untuk operasi yang membandingkan dua buah nilai dan menghasilkan nilai berupa True (benar) atau False (Salah). Simbol-simbol yang digunakan antara lain:

Simbol Operasi relasi Contoh

< lebih kecil 2 < 3 hasilnya TRUE , 8 < 3 hasilnya FALSE > lebih besar 8 > 3 hasilnya TRUE, 2 > 3 hasilnya FALSE

<= lebih kecil atau sama dengan 2 <= 3 hasilnya TRUE , 8 <= 3 hasilnya FALSE >= lebih besar atau sama dengan 8 >= 3 hasilnya TRUE, 2 >= 3 hasilnya FALSE = sama dengan 8 = 8 hasilnya TRUE , 8 = 3 hasilnya FALSE

<> tidak sama dengan 8 <> 3 hasilnya TRUE, 3 = 3 hasilnya FALSE

Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan kriteria field harga nilainya lebih besar dari 12500, yaitu:

SELECT * FROM buku WHERE harga > 12500;

Jika data yang digunakan untuk kriteria adalah string, data tersebut harus dilingkupi dengan tanda petik satu ('…') atau dua petik ("…"). Selain itu jika data yang digunakan untuk kriteria adalah string berupa numerik/angka data tersebut tidak dilingkupi tanda ("…"). Misalnya menampilkan data dari tabel buku dengan kriteria field jenis nilainya sama dengan novel, yaitu :

SELECT * FROM buku WHERE jenis = 'novel'; Atau SELECT * FROM buku WHERE jenis = "novel";

Operator logika digunakan untuk operasi yang membandingkan suatu perbandingan. Simbol-simbol yang digunakan antara lain:

Simbol Operasi logika Contoh

Or atau ( 8 <> 12 ) Or ( 8 > 3 ) hasilnya TRUE, ( 2 < 5 ) Or ( 2 < 5 ) hasilnya FALSE

And dan ( 3 < 8 ) And ( 9 = 9 ) hasilnya TRUE, ( 3 < 8 ) And ( 3 > 8 ) hasilnya FALSE

Not tidak Not ( 8 < 3 ) hasilnya TRUE, Not ( 8 > 3 ) hasilnya FALSE Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan kriteria

field penerbit nilainya sama dengan balai pustaka atau field penulis nilainya sama dengan budiawan, yaitu:

SELECT * FROM buku WHERE penerbit = 'pustaka' OR penulis = 'budiawan';

Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan kriteria

field jenis nilainya sama dengan novel dan field harga nilainya lebih besar dari 12500, yaitu: SELECT * FROM buku WHERE jenis = 'novel' AND harga > 12500;



2.4.6 Menyaring Hasil Penampilan Data dengan LIKE dan NOT LIKE

Kondisi Like dan Not Like digunakan untuk menyaring hasil penampilan data dengan bila string tertentu, bisa berdasarkan Prefik (kata depan) maupun Sufix (kata akhir atau kata tengah). Sintaks penulisan LIKE dan NOT LIKE.

SELECT * FROM nama_tabel WHERE kriteria_field LIKE ' %predikat%' Dan SELECT * FROM nama_tabel WHERE kriteria_field NOT LIKE '%predikat%'

Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan kriteria field jenis nilainya ditampilkan dari sederet data yang isi field jenisnya diawali dengan huruf “k”, yaitu:

SELECT * FROM buku WHERE jenis LIKE '%k%'

Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan kriteria field harga nilainya ditampilkan dari sederet data yang isi field harganya diawali dengan harga 7500 yaitu:

SELECT * FROM buku WHERE harga LIKE '%7500%'

Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan kriteria

field jenis nilainya ditampilkan dari sederet data yang isi field jenisnya diawali dengan selain huruf “k”, yaitu:

SELECT * FROM buku WHERE jenis NOT LIKE '%k%'

2.4.7 Mengurutkan Data

Penjelasan Like atau Not Like: select field1, field2, dst : menampilakan isi data pada field-field tertentu. from nama_tabel : dari tabel yang ingin ditampilkan. Sedangkan tanda bintang ( * ) : menampilkan semua isi field. where kriteria_field : dimana nama filed tersebut/dimana kriteria field tersebut

digunakan. like '%predikat%' : menyaring string tertentu dari nilai kualifikasi untuk record

yang disaring sesuai dengan nilai yang di sandang oleh isi filed tersebut.

Sedangkan not like '%predikat%' : kondisi kebalikan dari Like.



Mengurutkan data (sort) bertujuan untuk menata data-data yang ada agar urutan tampilannya sesuai dengan yang diinginkan, dan perintah SQL-nya untuk mengurutkan data dibantu dengan klausa ORDER BY. Serta pola urutan yang terdapat pada perintah SQL ini tedapat dua macam, yaitu:

Ascending

Pola urutan Ascending (Asc) adalah mengurutkan data mulai dari data terkecil sampai data terbesar (menaik). Jika diilustrasikan, untuk data string dimualai dari abjad “A” sampai “Z”. Sedangkan untuk data number dimulai dari angka 0 (nol) sampai 9 (sembilan).

Descending

Pola urutan Descending (Desc) adalah mengurutkan data mulai dari data terbesar sampai data terbesar (menaik). Jika diilustrasikan, untuk data string dimualai dari abjad “Z” sampai “A”. Sedangkan untuk data number dimulai dari angka 9 (sembilan) sampai 0 (nol). Sintaks penulisannya adalah sebagai berikut:

SELECT * FROM nama_tabel ORDER BY kriteria_field ASC Atau SELECT * FROM nama_tabel ORDER BY kriteria_field DESC

Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan diurutkan berdasarkan filed kode buku dimana nilai dari field kode buku urut secara Ascending, yaitu:

SELECT * FROM buku ORDER BY kode_buku ASC

Perintah SQL berikut, bertujuan untuk menampilkan data dari tabel buku dengan diurutkan berdasarkan filed kode buku dimana nilai dari field kode buku urut secara Descending, yaitu:

Penjelasan ASC dan DESC: select field1, field2, dst : menampilakan isi data pada field-field tertentu. from nama_tabel : dari tabel yang ingin ditampilkan. Sedangkan tanda bintang ( * ) : menampilkan semua isi field. order by kriteria_field : menyortir / mengurutkan / mengelompokkan data dari field

yang sedang digunakan. asc : mengurutkan data berdasarkan dari data terkecil sampai data

terbesar. Sedangkan desc : kondisi kebalikan dari asc.



SELECT * FROM buku ORDER BY kode_buku DESC

2.5 Menampilkan Data dari Banyak Tabel

Menggabungkan beberapa tabel untuk hasil keluaran (output) yang dikehendaki disebut Join. Disini saya akan membahas 3 kategori Join, yaitu:

2.5.1 Inner Join

Operasi Inner Join yaitu jenis operasi penggabungan yang mengkombinasikan setiap record dari dua tabel / lebih yang memiliki isi field tertentu yang sama. Jika pada operasi Inner Join terdapat nilai pada suatu tabel tidak sesuai dengan tabel lainnya, maka record tersebut tidak ditampilkan. Sintaks penulisannya adalah sebagai berikut:

SELECT nama_tabel1.field1, nama_tabel1.field2, nama_tabel1.field3 … nama_tabel2.field1, nama_tabel2.field2, nama_tabel2.field3 … FROM nama_tabel1 INNER JOIN nama_tabel2 ON nama_tabel1.field1 = nama_tabel2.field1 WHERE nama_tabel1.field1 = predikat; Atau lebih singkatnya SELECT * FROM nama_tabel1 INNER JOIN nama_tabel2 ON nama_tabel1.field1 = nama_tabel2.field1 WHERE nama_tabel1.field1 = predikat;

Perintah SQL berikut, bertujuan untuk menampilkan data sekaligus untuk penggabungan data dengan menngunkan proses Inner Join yaitu dari tabel master buku di Inner Join-kan

Penjelasan Operasi Inner Join: select : perintah menampilkan. nama_tabel1.field1, dst : menampilakan isi data pada field-field tertentu dari tabel

pertama. nama_tabel2.field1, dst : menampilakan isi data pada field-field tertentu dari tabel

kedua. Sedangkan tanda bintang ( * ) : menampilkan semua isi field dari tabel1 maupun tabel2. from nama_tabel1 : dari tabel pertama yang ingin ditampilkan. Inner Join nama_tabel2 : tabel pertama di gabungkan ke tabel kedua On nama.tabel1. field1= : dimana field1(dari tabel pertama) = field1(dari tabel kedua) nama_tabel2.field1 sebagai kunci untuk menggabungkan dua / lebih tabel. Where : dimana kriteria field1(dari tabel pertama) = kualifikasi untuk nama_tabel1.field1 = record yang akan ditampilkan. predikat



(digabungkan) ke tabel buku dengan kunci field kode (pada tabel master buku) sama dengan field kode (pada tabel buku), yaitu:

SELECT * FROM master_buku INNER JOIN buku ON master_buku.kode = buku.kode WHERE master_buku.kode = 1;

Atau

SELECT master_buku.kode, master _buku.kelompok_buku, master_buku.harga, master_buku.potongan, buku.kode, buku.judul, buku.penerbit, buku.penulis, buku.harga FROM master_buku INNER JOIN buku ON master_buku.kode = buku.kode WHERE master_buku.kode = 1;

2.5.2 Outer Join

Operasi Outer Join yaitu operasi pernggabungan (join) pada umumnya tetapi juga menampilkan record yang tidak ikut relasi pada saat penggabungan tabel. Operasi Outer Join terdapat 3 variasi yang ditinjau dari penempatan tabel yang ditempatkan, yaitu:

Left Outer Join

Operator Left Outer Join digunakan untuk mengkombinasikan record dimana semua

record yang ada pada tabel pertama (tabel primer) ditampilkan walaupun pada tabel tersebut terdapat record yang tidak berhubungan dengan tabel kedua (tabel relasi). Dengan kata lain Operasi Left Outer Join akan menampilkan seluruh data berdasarkan tabel yang berada disebelah kiri dari perintah join.

Misalnya, pada tabel master buku dan tabel buku akan dilakukan proses penggabungan data dengan Operasi Left Outer Join dimana field kode(dari tabel master buku) sama dengan field kode (dari tabel buku), yaitu:

SELECT * FROM master_buku LEFT JOIN buku ON master_buku.kode = buku.kode

Right Outer Join

Operator Right Outer Join digunakan untuk mengkombinasikan record dimana semua record yang ada pada tabel pertama (tabel primer) ditampilkan walaupun pada tabel tersebut terdapat record yang tidak berhubungan dengan tabel kedua (tabel relasi). Dengan kata lain Operasi Right Outer Join akan menampilkan seluruh data berdasarkan tabel yang berada disebelah kanan dari perintah join.

Misalnya, pada tabel master buku dan tabel buku akan dilakukan proses penggabungan data dengan Operasi Right Outer Join dimana field kode(dari tabel master buku) sama dengan field kode (dari tabel buku), yaitu:

SELECT * FROM master_buku RIGHT JOIN buku ON master_buku.kode = buku.kode



Full Outer Join

Operator Full Outer Join digunakan untuk mengkombinasikan record dimana semua record yang ada pada tabel pertama (tabel primer) maupun tabel kedua (tabel relasi) akan ditampilkan walaupun pada tabel tersebut terdapat record yang tidak berhubungan.

Misalnya, pada tabel master buku dan tabel buku akan dilakukan proses penggabungan data dengan Operasi Full Outer Join, tanpa menggunakan kriteria field sebagai field kunci, yaitu:

SELECT * FROM master_buku FULL JOIN buku

2.5.3 Cross Join

Operasi Cross Join merupakan operasi yang mengkombinasikan antara setiap record disalah satu tabel dengan seluruh record di tabel lainnya. Artinya jika tabel primer terdapat 2 record dan di tabel sekunder terdapat 5 record, maka hasil kombinasinya adalah 10 record.

Misalnya, pada tabel master buku dan tabel buku akan dilakukan proses penggabungan data dengan Operasi Cross Join, tanpa menggunakan kriteria field sebagai field kunci, yaitu:

SELECT * FROM master_buku CROSS JOIN buku



HTML HTML (Hypertext Markup Language) adalah bahasa yang digunakan untuk menulis

halama web. Dikatakan markup language karena HTML berfungsi untuk menformat file dokumen teks biasa untuk bisa ditampilkan pada web browser dengan tag HTML.

Yang Anda bisa lakukan dengan HTML, yaitu: Mengontrol tampilan dari web page dan contentnya. Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi

secara online. Menambahkan object-object seperti image, animasi, audio, video dan juga java applet

dalam document HTML.

Dokumen HTML sebenarnya berupa dokumen teks biasa (tujuannya agar dapat dengan mudah dipindah-pindah antar berbagai platform), namun kelebihannya dari dokumen yang lain adalah dengan HTML dapat dilakukan pemformatan text, peletakaan gambar, suara dan elemen-elemen multimedia yang lain, dan yang terpenting adalah Hypertext, yakni teks yang berfungsi sebagai pendukung (hyperlink atau link) antara halaman web lainnya.

Untuk mengetik dokumen HTML, Anda dapat menggunakan lembar kerja editor. Editor

merupakan program yang digunakan untuk membuat dokumen HTML, ada banyak HTML editor yang bisa Anda gunakan diantaranya: Microsoft FrontPage, Dreamweaver, Notepad. Sedangkan untuk melihat hasil dari HTML, Anda dapat melihat di browser. Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Mozilla Firefox dan masih banyak yang lainya.

Ciri utama dokumen HTML adalah adanya elemen dan tag. Elemen dalam dokumen

HTML dikategorikan menjadi dua, yaitu: elemen HEAD dan BODY. Elemen HEAD (Header) berfungsi untuk memberikan informasi tentang dokumen

tersebut. Bagian header dari dokumen HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang berfungsi untuk menampilkan judul dari halaman pada titlenya browser. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai dokumen HTML, anda bisa menentukan author name, keywords, dan lainya pada tag META.

Contoh: <META name="Author" contents="Petualangan"> Author dari dokumen tersebut adalah "Petualangan" Atribut http-equiv dapat di gunakan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP header. Contoh: <META http-equiv="Expires" content="Wed, 7 May 2003 20:30:40 GMT”>



yang akan menciptakan HTTP header: Expires: Wed, 7 May 2003 20:30:40 GMT Sehingga jika dokumen di cached, HTTP akan megetahui kapan untuk meng-update dokumen tersebut pada cache. Elemen BODY berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di

web browsernya. Isi dokumen tersebut dapat berupa text, image, animasi, audio, video, image link dan seterusnya.

Sedangkan tag dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar

“>“ (tag akhir). Pasangan dari sebuah tag ditandai dengan tanda “ / “. Misalnya pasangan dari tag <HTML> adalah </HTML>.

HTML mempunyai 3 tag utama, yaitu tag html, head, dan body sehingga struktur dasar

HTML adalah sebagai berikut: <html> <head> <title> Untitled Document </title> </head> <body> </body> </html>

Untuk lebih jelasnya, ketik editor teks dibawah ini di program notepad. Lalu simpan dengan nama belajar_html.htm

<html> <head> <title>Belajar HTML</title> </head> <Body> Selamat belajar membuat homepage dengan html </Body> </html>

Penjelasan struktur dasar HTML: <html> : untuk mencirikan kode html. <head> : untuk memberikan informasi tentang dokumen tersebut. Di area tag

<head> bisa ditambahkan tag <title> … </title>, tag <title> tersebut tidak bisa ditambahkan ke area tag <body>. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainnya pada tag META.

<title> </title> : untuk menampilkan judul dari halaman pada titlenya browser. </head> : penutup tag head. <body> : area kerja untuk membuat halaman web. </body> : penutup tag body. </html> : penutup tag html.



Gambar 3.1 Mengetik listing html di notepad

Jalankan editor teks tersebut di Intenet Explorer, hasilnya akan seperti gambar 3.2

Gambar 3.2 Tampilan hasil listing html di Internet Explorer 3.1 Kode Warna

Sebelum lebih jauh mempelajari tag-tag HTML ada baiknya terlebih dahulu kita mengenal kode warna yang sering digunakan di penulisan tag-tag HTML.

Pengaturan warna di halaman HTML menggunakan mode kombinasi RGB (red, green,

blue) yang mana setiap warna ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2,…..,F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau, dan biru. Berikut ini adalah contoh beberapa kode warna:

Tabel warna heksadesimal:

Warna Heksadesimal White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF



Cyan #00FFFF Yellow #FFFF00

3.2 Kode Simbol

Untuk membuat simbol di halaman HTML selalu diawali tanda (&) dan diakhiri tanda (;). Berikut ini adalah contoh beberapa kode simbol: Tabel kode simbol:

Kode Simbol Kode Simbol © © » » " " ² ² & & √ √ < < &frasl; ⁄ > > ¿ ¿ £ £ “ “ ¥ ¥ ” ” € € ™ ™ &frac 14; ¼ ƒ ƒ ® ® Non-Breaking Space

(spasi untuk karakter) 3.3 Pengaturan Properti Halaman Web

Properti dokumen diatur melalui attribut-attribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link, dan lain-lain.

Attribut elemen body:

background = lokasi dan nama file (latar belakang image dokumen)

bgcolor = warna (warna latar belakang dokumen, default putih)

text = warna (warna teks dokumen, default hitam)

link = warna (warna link dokumen, default biru)

vlink = warna (warna visited link dokumen, default ungu)

alink = warna (warna active link dokumen, default merah) Contoh: body.htm <HTML> <HEAD> <TITLE>Belajar attribut elemen body</TITLE> </HEAD> <BODY bgcolor="#0000CC" text="#FFFFFF">



Attribut elemen body untuk bgcolor dan text. Hasilnya untuk warna body berwarna biru dan tulisan teks dokumen berwarna putih.

</BODY> </HTML>

Gambar 3.3 Penggunaan elemen body bagian 1

Contoh: bg_image.htm <HTML> <HEAD> <TITLE>Belajar background image</TITLE> </HEAD> <Body background="kartun.jpg"> </Body> </HTML> Untuk membuat background image seperti gambar 3.4 jangan lupa image-nya

(gambar kartun format jpg) simpan di dalam folder file-file html Anda.

Gambar 3.4 Penggunaan elemen body bagian 2



3.4 Heading

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. HTML menyediakan enam tingkatan heading.

Contoh: heading.htm <HTML> <HEAD> <TITLE>Belajar Heading</TITLE> </HEAD> <BODY> <H1> Heading Level 1 </H1> <H2> Heading Level 2 </H2> <H3> Heading Level 3 </H3> <H4> Heading Level 4 </H4> <H5> Heading Level 5 </H5> <H6> Heading Level 6 </H6> </BODY> </HTML>

Gambar 3.5 Heading

3.5 Paragraph

Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan ditutup oleh tag </P>. Dalam elemen tag paragraf terdapat atribut align yang berfungsi sebagai pengaturan perataan paragraf. Align terdiri dari left (rata kiri), right (rata kanan), center (rata tengah), dan justify (rata kanan kiri).

Contoh: paragraph.htm



<HTML> <HEAD> <TITLE>Belajar paragraph</TITLE> </HEAD> <BODY> <P align = "center" > HTML (Hypertext Markup Language) adalah bahasa yang digunakan untuk

menulis halama web. Dikatakan markup language karena HTML berfungsi untuk menformat file dokumen teks biasa untuk bisa ditampilkan pada web browser dengan tag HTML

</P> <P align = "left" >

Dokumen HTML sebenarnya berupa dokumen teks biasa (tujuannya agar dapat dengan mudah dipindah-pindah antar berbagai platform), namun kelebihannya dari dokumen yang lain adalah dengan HTML dapat dilakukan pemformatan text, peletakaan gambar, suara dan elemen-elemen multimedia yang lain, dan yang terpenting adalah Hypertext, yakni teks yang berfungsi sebagai pendukung (hyperlink atau link) antara halaman web lainnya.

</P> <P align = "right" > Untuk mengetik dokumen HTML, Anda dapat menggunakan lembar kerja editor.

Editor merupakan program yang digunakan untuk membuat dokumen HTML, ada banyak HTML editor yang bisa Anda gunakan diantaranya: Microsoft FrontPage, Dreamweaver, Notepad. Sedangkan untuk melihat hasil dari HTML, Anda dapat melihat di browser.

</P> <P align = "justify" >

Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Mozilla Firefox dan masih banyak yang lainya.

</P> </BODY> </HTML>



Gambar 3.6 Paragraph 3.6 Grouping Elemen

Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span

digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content.

Contoh: divisi.htm <HTML> <HEAD> <TITLE>Div dan Span</TITLE> </HEAD> <BODY> <div> Divisi 1 <p> Div tag digunakan untuk mengelompokkan group elemen biasanya untuk

block-level elemen. </p> </div> <div align="right"> Divisi 2 <p> Ini didalam devisi kedua di tulis dengan alignment kanan. </p> </div> <span style="font-size:25; color:green"> Baris ini dalam span dengan warna hijau. </span> </body> </html>



Gambar 3.7 Penggunaan Div dan Span 3.7 Blockquote

Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan text. Pada saat browser text akan tampil menjorok ke dalam.

Contoh: blockquote.htm <HTML> <HEAD> <TITLE>Belajar blockquote</TITLE> </HEAD> <BODY> <H3>Pengertian Blockquote</H3> <BLOCKQUOTE>

Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam.

</BLOCKQUOTE> </BODY> </HTML>



Gambar 3.8 Blockquote 3.8 Preformatted Text

Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen HTML.

Contoh: pre.htm <HTML> <HEAD> <TITLE>Belajar Preformatted Text</TITLE> </HEAD> <BODY> <PRE> w w w . i l m u website . c o m

------------------------------------------------------------------------------------------------ tulisan di atas menggunakan jenis font SimSun dan menggunakan spasi ------------------------------------------------------------------------------------------------ </PRE> </BODY> </HTML>

Gambar 3.9 Preformatted Text 3.9 BR dan HR



Tag Line Break <BR> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web. Tag break tidak menggunakan tag penutup </BR>.

Tag Horizontal Ruler <HR> berfungsi untuk menampilkan garis horisontal tiga dimensi di dalam halaman web. Tag horizontal ruler juga tidak menggunakan tag penutup </HR>.

Attribut elemen horisontal rules:

align = left, right, center, justify (perataan horisontal, default center)

size = pixel (tebal garis, default 2)

width = panjang (lebar garis, pixel, atau persen, default 100%) Contoh: br.htm <HTML> <HEAD> <TITLE>Belajar Line Break</TITLE> </HEAD> <BODY> <H4>ATK (Alat Tulis Kantor)</H4> yaitu terdiri dari : <BR>Pensil <BR>Polpen <BR>Penggaris <BR>Penghapus dll </BODY> </HTML>

Gambar 3.10 Line Break

Contoh: hr.htm <HTML> <HEAD> <TITLE>Belajar Horizontal Ruler</TITLE> </HEAD>



<BODY> www.ilmu website.com <HR align="left" width="200" size="4"> www.ilmu komputer.com <HR align="left" width="200" size="4"> www.ilmu php.com <HR align="left" width="200" size="4"> </BODY> </HTML>

Gambar 3.11 Horizontal Ruler 3.10 Font

Untuk mengatur huruf dokumen HTML digunakan tag <FONT>. Tag <FONT> memiliki beberapa attribut untuk mengatur ukuran huruf, jenis huruf yang digunakan, dan warna huruf.

Attribut elemen font:

size = urutan angka (ukuran huruf, default 3).

color = warna dalam bahasa inggris (warna huruf, default black).

face = jenis huruf (jenis huruf, default Times New Roman). Attribut ragam karakter:

Physical Formatting <b>isi teks</b> menghasilkan huruf tebal (bold text)

<i>isi teks</i> menghasilkan huruf miring (italic text)

<u>isi teks</u> menghasilkan huruf bergaris bawah (underline text)

<big>isi teks</big> menghasilkan ukuran teks yang lebih besar dari ukuran

normal



<small>isi teks</small> menghasilkan ukuran teks yang lebih kecil dari ukuran

normal

<strike>isi teks</strike> untuk memberi garis tengah pada teks

<sup>isi teks</sup> memberikan effect superscript pada teks

<sub>isi teks</sub> memberikan effect subscript pada teks

<center>isi teks</center> menghasilkan dokumen teks rata tengah

Logical Formatting <strong>isi teks</strong> menghasilkan huruf tebal. Fungsi ini sama dengan bold.

<em>isi teks</em> menghasilkan huruf miring. Fungsi ini sama dengan italic

<del>isi teks</del> untuk memberi garis tengah pada teks/mecoret teks. Fungsi

ini sama dengan strike

<ins>isi teks</ins> menghasilkan huruf bergaris bawah. Fungsi ini sama

dengan underline.

Contoh: font.htm <HTML> <HEAD> <TITLE>Belajar tag FONT</TITLE> </HEAD> <BODY> <p align="center"><font face="Georgia" color="blue" size="6"> <u>TOKO BANGUNAN SERBA GUNA</u> </font></p> <p align="left"><font face="Arial" color="green" size="5"> <b>Menyediakan :</b> </font></p> <p align="left"><font face="Tahoma" color="purple" size="3"> <i>Semen Gresik</i> </font></p> <p align="left"><font face="Tahoma" color="purple" size="3"> <i>Pasir</i> </font></p> <p align="left"><font face="Tahoma" color="purple" size="3"> <i>Kayu</i> </font></p> <p align="left"><font face="Tahoma" color="purple" size="3"> <i>Besi</i> </font></p> </BODY> </HTML>



Gambar 3.12 Penggunaan pada attribut font Contoh: karakter.htm <HTML> <HEAD> <TITLE>Penggunaan attribut karakter</TITLE> </HEAD> <BODY> <b>bold text</b> <br> <i>italic text</i> <br> <u>underline text</u> <br> <small>ukuran teks lebih kecil </small>dari ukuran normalnya <br> <strike>effect garis tengah pada teks</strike> <br> effect superscript contoh pukul 08.<sup>00</sup> <br> effect subscript contoh H<sub>2</sub>O </BODY> </HTML>



Gambar 3.13 Penggunaan attribut karakter

3.11 Menampilkan Gambar

3.11.1 Format Gambar

Ada banyak format gambar, tapi ada tiga jenis format yang paling sering digunakan: GIF (Graphical Interchange Format) (.GIF) JPEG (Joint Photographic Expert Image) (.JPG) PNG (Portable Network Graphics) (.PNG)

3.11.2 Memasukkan Gambar ke Dokumen Tag <IMG> digunakan untuk memasukkan gambar dan menampilkan gambar di halaman

HTML dengan format file JPG, GIF dan PNG. Standar penulisan tag <IMG> adalah.

<IMG SRC=”URL_file_gambar”> Attribut elemen image:

src = lokasi dan nama gambar

alt = teks (teks alternatif)

width = pixel (lebar gambar)

height = pixel (tinggi gambar)

align = top, middle, bottom, (untuk menentukan posisi image terhadap text) left,

right, center (untuk menentukan posisi image di dokumen)

border = pixel (tebal garis tepi gambar)

hspace = pixel (menentukan jarak spasi horizontal dan spaci vertikal)

vspace = pixel (menentukan jarak antara gambar dengan object disekitarnya) Contoh: gambar.htm

<HTML> <HEAD> <TITLE>Belajar menampilkan gambar</TITLE> </HEAD> <BODY bgcolor="gray"> <img src="./mainan.jpg" width="300" height="170" hspace="2" vspace="4"> <img src="./makan madu.jpg" width="300" height="170" hspace="2"

vspace="4"> <img src="./kartun.jpg" width="300" height="170" hspace="2" vspace="4"> <img src="./makan berdua.jpg" width="300" height="170" hspace="2"

vspace="4"> </BODY>



</HTML>

Jangan lupa image-nya (gambar mainan, makan madu, kartun, makan berdua format jpg) simpan di dalam folder file-file html Anda.

Gambar 3.14 Menampilkan image di halaman HTML Contoh: gambar_teks.htm <HTML> <HEAD> <TITLE>Bekerja dengan gambar</TITLE> </HEAD> <BODY> <p> <img src="./anjing.jpg" height="100" width="100">Text berada di bawah

dari posisi gambar, align bottom merupakan default alignment </p> <p> <img src="./anjing.jpg" height="100" width="100" align="top">Text berada

di atas dari posisi gambar </p> <p> <img src="./anjing.jpg" height="100" width="100" align="middle">Text

berada di tengah dari posisi gambar</p> </BODY> </HTML>



Gambar 3.15 Menampilkan gambar dan posisi teks pada gambar di halaman HTML

3.11.3 Peta Gambar Anda bisa gunakan gambar yang ada pada website Anda untuk membuat peta gambar.

Peta gambar (image map) yaitu suatu area pada gambar yang bisa kita beri hyperlink area ini biasanya disebut “hotspots”. Koordinat dari hotspot ditentukan menggunakan bidang geometry seperti rectangle, polygon dan lainya.

Attribut shape:

default = semua area gambar

rect = area kotak (persegi empat/panjang) tertentu

circle = area lingkaran/ellips tertentu

poly = area polygon

Koordinat dari object relatif terhadap pojok kiri atas gambar:

Coordinate Value Rect Left-x, top-y, right-x, bottom-y Circle CENTER-X, CENTER-Y, RADIUS Poly X1, Y1, X2, Y2, … XN, YN

Contoh: hotspot.htm

<HTML> <HEAD> <TITLE>Membuat Hotspot</TITLE> </HEAD> <BODY>



<img src="./mainan.jpg" width="300" height="170" hspace="2" vspace="4" usemap="#Map">

<map name="Map"> <area shape="rect" coords="0,0,200,100" href="gambar.htm" alt="link image.... silahkan link, dengan cara klik gambar ini "> </map> </BODY> </HTML>

Gambar 3.16 Penggunaan peta gambar Ketika gambar disorot secara otomatis akan muncul kalimat “link image…. Silahkan link,

dengan cara klik gambar ini”. Pesan tersebut untuk memberi petunjuk. Jika di link akan menuju ke halaman gambar.htm. Gambaran ilustrasi itulah yang disebut dengan peta gambar (image map).

3.12 Link

Perintah anchor (a) digunakan untuk membuat link. Sedangkan elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL lain. Format tag link adalah sebagai berikut:

<A HREF = “URL”>Hypertext</A>

URL bernilai lokasi tujuan dari link tersebut, sedangkan hypertext nilainya akan

ditampilkan dibrowser sebagai text link atau tombol penghubung. Contoh: link.htm <HTML>



<HEAD> <TITLE>Belajar membuat link</TITLE> </HEAD> <BODY> <FONT size="4">Dasar-Dasar HTML</FONT> <br> <br> <A HREF="heading.htm">Heading</A> <br> <A HREF="paragraph.htm">Paragraph</A> <br> <A HREF="blockquote.htm">Blockquote</A> <br> <A HREF="pre.htm">Preformatted Text</A> </BODY> </HTML>

Gambar 3.17 Link Setelah itu coba Anda jalankan programnya. Klik link Heading secara otomatis file

heading.htm akan tampil di web browser dst.

3.13 List Item Tag <LI> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua

jenis daftar yang sering digunakan di HTML, yaitu daftar dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).

Attribut elemen list:

Unordered list

type = disc, square, circle (tipe bullet, default disc)

Ordered list

type = 1, a, A, i, I (type penomoran, default 1)



Contoh: list.htm <HTML> <HEAD> <TITLE>Belajar daftar list</TITLE> </HEAD> <BODY> <P align="center"><FONT size="5" color="Green"> Daftar Ujian </FONT></P> <b>Senin :</b> <OL> <LI>Matematika <LI>Fisika </OL> <b>Selasa :</b> <UL> <LI>Olahraga <LI>Komputer </UL> <b>Rabu :</b> <OL type="circle"> <LI>Bahasa Inggris <LI>Kewirausahaan </OL> <b>Kamis :</b> <OL type="square"> <LI>Kimia <LI>Bahasa Mandarin </OL> <b>Jumat :</b> <UL type="i"> <LI>Agama <LI>Pembukuan </UL> </BODY> </HTML>



Gambar 3.18 Daftar List

3.14 Definition List

Definition List diapit oleh tag <DL> … </DL> dan tag <DT> yaitu tag yang menentukan definition item serta tag <DD> yaitu tag menentukan definition itu sendiri.

Contoh: definition_list.htm

<HTML> <HEAD> <TITLE>Definition List</TITLE> </HEAD> <BODY> <P> <B>HTML</B> </P> <DL> <DT>HEAD



<DD> Header : untuk memberikan informasi tentang dokumen tersebut. Di area

tag header ini bisa ditambahkan tag title, tag title tersebut tidak bisa ditambahkan ke area tag body. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainnya pada tag META.

</DD> </DT> <DT>BODY

<DD> body di gunakan untuk menampilkan text, image link dan semua yang

akan di tampilkan pada web page (area kerja untuk membuat halaman web)

</DD> </DT> </DL> </BODY> </HTML>

Gambar 3.19 Definition List

3.15 Tabel Tabel adalah kumpulan kolom dan baris. Untuk membuat tabel gunakan tag <TABLE>

dan ditutup dengan tag </TABLE>. Untuk membuat kolom gunakan tag <TD> … </TD> dan untuk membuat baris gunakan tag <TR> … </TR>

Atribut elemen table:

width = pixel dan % (lebar tabel)

height = pixel dan % (tinggi tabel)

border = pixel (tebal garis tepi tabel)

bordercolor = warna (warna tebal garis tepi tabel)



background = lokasi dan nama file (latar belakang image tabel)

bgcolor = warna (warna latar belakang tabel)

align = left, center, right (perataan tabel) Atribut elemen row:

align = left, center, right (perataan sebaris sel secara horizontal)

valign = top, middle, bottom (perataan sebaris sel secara vertikal)

bgcolor = warna (warna latar belakang baris) Atribut elemen colom:

align = left, center, right (perataan sekolom sel secara horizontal)

valign = top, middle, bottom (perataan sekolom sel secara vertikal)

bgcolor = warna (warna latar belakang kolom) Atribut elemen data dalam tabel (sel):

rowspan = angka (baris yang di-span oleh sel, untuk merge baris)

colspan = angka (kolom yang di-span oleh sel, untuk merge kolom)

align = left, center, right (perataan horizontal)

valign = baseline, top, middle, bottom (perataan vertikal)

width = pixel dan % (lebar sel)

height = pixel dan % (tinggi sel)

bgcolor = warna (warna latar belakang sel) Anda juga bisa menambahkan attribut cellspacing (untuk memberi spasi antar sel) dan

cellpadding (untuk spasi dari border ke teks dalam sel). Contoh: kolom_baris.htm <HTML> <HEAD> <TITLE>Kolom dan baris</TITLE> </HEAD> <BODY> <TABLE border="1"> <TR> <TD>kolom pertama</TD> <TD>kolom kedua</TD> <TD>kolom ketiga</TD> </TR> </TABLE>



<br> <br> <TABLE border="1"> <TR> <TD>baris pertama</TD> </TR> <TR> <TD>baris kedua</TD> </TR> <TR> <TD>baris ketiga</TD> </TR> </TABLE> </BODY> </HTML>

Gambar 3.20 Tiga kolom dan tiga baris Contoh : tabel.htm <HTML> <HEAD> <TITLE>Tabel 4 kolom 3 baris</TITLE> </HEAD> <BODY> <TABLE border="1"> <TR> <TD>kolom1 baris1</TD> <TD>kolom2 baris1</TD> <TD>kolom3 baris1</TD> <TD>kolom4 baris1</TD> </TR> <TR> <TD>kolom1 baris2</TD> <TD>kolom2 baris2</TD> <TD>kolom3 baris2</TD> <TD>kolom4 baris2</TD> </TR> <TR> <TD>kolom1 baris3</TD>



<TD>kolom2 baris3</TD> <TD>kolom3 baris3</TD> <TD>kolom4 baris3</TD> </TR> </TABLE> </BODY> </HTML>

Gambar 3.21 Tabel empat kolom tiga baris Contoh : rowspan.htm <HTML> <HEAD> <TITLE>Rowspan</TITLE> </HEAD> <BODY> <TABLE width="0" border="1"> <tr> <td colspan="4"><div align="center"><b> Persediaan Voucher Pulsa di Koperasi Jaya Guna </b></div></td> </tr> <tr> <td><div align="center">Persediaan </div></td> <td><div align="center">Nominal</div></td> <td><div align="center">Harga</div></td> <td><div align="center">Jenis Pulsa </div></td> </tr> <tr> <td width="80" rowspan="2">5</td> <td width="80" rowspan="2">5000</td> <td width="80" rowspan="2">6500</td> <td width="80">IM3</td> </tr> <tr> <td>AS</td> </tr> <tr> <td rowspan="3">16</td> <td rowspan="3">10000</td> <td rowspan="3">11000</td>



<td>Simpati</td> </tr> <tr> <td>Mentari</td> </tr> <tr> <td>Starone</td> </tr> <tr> <td>7</td> <td>8000</td> <td>9000</td> <td>IM3</td> </tr> <tr> <td rowspan="2">3</td> <td rowspan="2">15000</td> <td rowspan="2">16000</td> <td>AS</td> </tr> <tr> <td>IM3</td> </tr> <tr> <td rowspan="3">4</td> <td rowspan="3">20000</td> <td rowspan="3">20500</td> <td>XL</td> </tr> <tr> <td>Mentari</td> </tr> <tr> <td>Simpati</td> </tr> </TABLE> </BODY> </HTML>



Gambar 3.22 Penggunaan Rowspan Contoh : colspan.htm <HTML> <HEAD> <TITLE>Rowspan</TITLE> </HEAD> <BODY> <TABLE width="0" border="1"> <tr>

<td colspan="6"><div align="center"><b> Gaji Karyawan </b></div></td>

</tr> <tr> <td width="112" rowspan="2"><div align="center"> Nama Karyawan </div></td> <td width="56" rowspan="2"><div align="center"> Jabatan </div></td> <td colspan="4"><div align="center">Gaji</div></td> </tr> <tr> <td><div align="center">Pokok</div></td> <td><div align="center">Lembur</div></td> <td><div align="center">Potongan</div></td>



<td><div align="center">Total</div></td> </tr> <tr> <td>Susanti</td> <td>Personalia</td> <td>2.500.000</td> <td>575.000</td> <td>10.000</td> <td>3.065.000</td> </tr> <tr> <td>Harianto</td> <td>Manager</td> <td>2.000.000</td> <td>320.000</td> <td>15.000</td> <td>2.305.000</td> </tr> <tr> <td>Edy Sucipto </td> <td>Assembly</td> <td>950.000</td> <td>250.000</td> <td>30.000</td>

<td>1.175.000</td> </tr> <tr> <td>Bambang</td> <td>Assembly</td> <td>950.000</td> <td>250.000</td> <td>30.000</td> <td>1.175.000</td> </tr> <tr> <td>Sri Wahyuni</td> <td>Assembly</td> <td>950.000</td> <td>250.000</td> <td>30.000</td> <td>1.175.000</td> </tr> </TABLE> </BODY> </HTML>



Gambar 3.23 Penggunaan Colspan

Contoh: data_bentuk_tabel.htm <HTML> <HEAD> <TITLE>Data dalam bentuk tabel</TITLE> </HEAD> <BODY> <P align="center"><FONT size="5"> <b>Cicilan Piutang</b> </FONT></P> <TABLE width="600" border="1" align="center" cellpadding="0" cellspacing="0"

bordercolor="#0000FF"> <tr align="center"> <td rowspan="2">Tanggal Bayar </td> <td rowspan="2">Angsuransi Ke</td> <td rowspan="2">Total Pinjaman </td> <td colspan="3">Cara Pembayaran </td> </tr> <tr> <td align="center" bordercolor="#0000FF">Bunga</td> <td align="center" bordercolor="#0000FF">Angsuransi</td> <td align="center" bordercolor="#0000FF">Jumlah</td> </tr> <tr align="center" bordercolor="#0000FF"> <td>02/05/2009</td> <td>1</td> <td>2750000</td> <td>10%</td> <td>687500</td> <td>687500</td> </tr> <tr align="center" bordercolor="#0000FF"> <td>03/06/2009</td> <td>2</td> <td>3250000</td> <td>10%</td>



<td>812500</td> <td>812500</td> </tr> <tr align="center" bordercolor="#0000FF"> <td>04/07/2009</td> <td>3</td> <td>1650000</td> <td>10%</td> <td>412500</td> <td>412500</td> </tr> <tr align="center" bordercolor="#0000FF"> <td>04/08/2009</td> <td>4</td> <td>2075000</td> <td>10%</td> <td>518750</td> <td>518750</td> </tr> </TABLE> </BODY> </HTML>

Gambar 3.24 Data dalam bentuk Tabel 3.16 Form

Tag <FORM> dan tag <INPUT> digunakan bersama-sama untuk menerima inputan dari user lalu kemudian dikirimkan ke server. Form menyediakan properti masukan berupa textboxt, check box, radio button, dan button. Standar penulisan form adalah:

<FORM METHOD=”POST” atau “GET” ACTION=”URL”; ….. ….. </FORM>

Attribut elemen form:

name = variabel (nama untuk form)

method = get / post (method get mengirimkan data pada akhir URL (Uniform Resource Locator) yang ditunjuk, sedangkan method post



mengirimkan data secara terpisah, yaitu dari data yang di inputkan melalui properti masukan berupa textboxt, check box, radio button, dll yang kemudian dibawa ke server)

action = lokasi dari nama file (attribut action berisi URL dari nama file yang dipanggil oleh form tersebut)

enctype = multipart/form-data, application/x-www-form-urlencoded

(menentukan tipe pengkodeaan MIME dari data yang di-submit ke server untuk pemrosesan)

target = _blank, _parent, _self, _top (menentukan jendela yang akan

menampilkan data yang dikembalikan oleh program invoked)

Properti Masukan pada Elemen Form: 1. Text Field: <input type="text">

Digunakan untuk memasukkan data berupa teks.

name = nama untuk textbox

size = ukuran dari textbox dalam karakter, defult 20

maxlenght = maksimal banyaknya karakter yang dapat diterima

value = nilai dari variabel utnuk textbox

2. Password Field: <input type="password"> Digunakan untuk memasukkan password.

name = nama untuk textbox

size = ukuran dari textbox dalam karakter, defult 20


value = nilai dari variabel untuk textbox

3. Textarea: <textarea> … </textarea> Digunakan untuk memasukkan data berupa teks-teks yang panjang.

name = nama untuk textarea

cols = angka (panjang textarea)

rows = angka (lebar textarea)

wrap = pilihan pengaturan untuk pemasukan data oleh user yang akan ditampilkan pada saat user memasukkan informasi. Adapun pilihannya adalah:

Off or Default: untuk mencegah teks dari penggulungan ke baris sehingga pada saat user memasukkan kata melebihi batas kanan teks area, maka teks akan menggulung teks sebelah kiri.

Virtual: untuk mengatur penggulungan kata di dalam area teks sehinggga pada user memasukkan informasi melebihi batas kanan teks area, teks akan menggulung teks ke baris berikutnya.



Physical: untuk mengatur penggulungan kata di dalam teks seperti halnya pada saat kata di-submit untuk pemprosesan.

4. Hidden: <input type="hidden"> Digunakan untuk mengirimkan data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser. name = nama untuk hidden

value = nilai dari variabel untuk hidden

5. Check Box: <input type="checkbox"> Digunakan untuk dapat memilih lebih dari satu pilihan.

name = nama untuk checkbox

value = nilai dari variabel untuk checkbox

checked (checkbox yang sudah ditandai)

6. Radio Button: <input type="radio"> Digunakan agar dapat memilih hanya satu pilihan.

name = nama untuk radio button

value = nilai dari variabel untuk radio button

checked (radio button yang sudah ditandai)

7. Submit Button: <input type="submit"> Tombol untuk mengirimkan nama (data) dan nilainya ke suatu aplikasi yang ditentukan dalam attribut ACTION dalam elemen FORM.

name = nama untuk submit

value = label teks untuk tombol

8. Reset: <input type="reset"> Tombol untuk mereset semua masukan dalam form.

name = nama untuk reset

value = label teks untuk tombol

9. File: <input type="file"> Digunakan untuk mengupload file sehingga dapat memilih file di dalam komputer untuk di upload ke servernya.

name = nama untuk file

size = angka (panjang file)


10. Select: <select> … </select> Daftar isi dalam properti select menggunakan tag <option> … </option>

name = nama untuk select



size = angka (jumlah pilihan yang dapat terlihat) Contoh: form.htm <HTML> <HEAD> <TITLE>Form Identitas</TITLE> </HEAD> <BODY> <form name="form1" method="post" action=""> <p>Nama <input type="text" name="nama"> </p> <p>Alamat <input type="text" name="alamat"> </p> <p>Jenis kelamin <input type="radio" name="Laki-laki"> Laki-laki <input type="radio" name="Wanita"> Wanita </p> <p>Pekerjaan <select name="select"> <option value="Pelajar">Pelajar</option> <option value="Wiraswasta">Wiraswasta</option> <option value="PNS">PNS</option> <option value="Swasta">Swasta</option> </select> </p> <p>Hobby <input type="checkbox" name="hobby" value="membaca"> membaca <input type="checkbox" name="hobby" value="berenang"> berenang <input type="checkbox" name="hobby" value="menulis"> menulis <input type="checkbox" name="hobby" value="nonton tv"> nonton tv </p> <p> <input type="submit" name="Submit" value="KIRIM"> <input type="reset" name="Submit2" value="ULANGI"> </p> </form> </BODY> </HTML>



Gambar 3.25 Penggunaan properti masukkan pada Elemen Form

3.17 Style Sheets

Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana Anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan dokumen HTML di layar. Anda juga bisa menyebutnya sebagai template dari dokumen HTML yang menggunakanya. Anda juga bisa membuat efek-efek sepesial di web Anda dengan menggunakan style sheet. Sebagai contoh Anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold, italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa Anda lakukan dengan style sheet.

Secara teoritis Anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah distandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

3.17.1 Inline Styles

Ada dua cara untuk merubah style dari web page Anda yaitu dengan : Merubah inline style Menulis script untuk merubah style Anda. Dengan meggunakan inline style Anda dapat membuat dynamic style tanpa harus

menambahkan script ke web Anda. Inline styles merupakan style yang bisa kita pasang pada elemen web tertentu saja.

Contoh:



Jika Anda ingin menambahkan style pada <H1> dengan warna merah, Anda harus mengeset attribut STYLE dari tag <H1>. <H1 STYLE=”color:red”> Jika Anda ingin menggunakan script untuk memodifikasi inline style, Anda dapat menggunakan Style Object. Style Object mensupport semua property yang di support CSS untuk style. Untuk menggunakan property pada script: 1. Hilangkan tanda hubung “-” dari property CSS Style 2. Ganti huruf setelah tanda hubung menjadi Capital. Contoh: font-weight menjadi fontWeight text-align menjadi textAlign 3.17.2 Istilah-Istilah dalam Style Sheet

Style rule Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari

documen. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna orange.

Style sheet Style sheet dapat di embedded ke HTML dokumen. Atau disebut embedded style sheet.

Style sheet juga bisa dibuat sebagai external file dan di link ke dokumen HTML. Style rule bisa di kenakan pada bagian tertentu dari web page. Sebagai contoh Anda bisa menentukan paragraf tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.

Selector

selector {property1: value; property2:value, . . .} H1 {color:green; background-color:orange} Style sheets terdiri dari dua bagian: 1. Selector : Bagian pertama sebelum tanda “{}” disebut selector 2. Declaration : Terdiri dari property dan nilainya. 3.17.3 Komentar dalam Style Sheet

Comments atau komentar biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya, Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan:



/* isi komentar */ Contoh: H1 {color:blue;} /* H1 elements akan menjadi biru */ Tags.H1.color = "blue"; /* H1 elements akan menjadi biru */ 3.17.4 Pemakaian Elemen Style

Mari kita mulai dengan mengatur warna huruf dan latar belakang. Anda dapat mengerjakan ini dengan menggunakan elemen style untuk mengatur karakter kode tag dokumen Anda.

Contoh: <style type="text/css"> body {color: black; background: white;} </style>

Pernyataan yang ditulis antara kode tag <style> dan tag </style> menunjukkan perintah pengaturan style.

Link ke sheet lainnya Apabila Anda menginginkan style yang sama untuk halaman HTML Anda yang lain,

disarankan mempergunakan sheet-sheet terpisah namun satu dan lainnya terhubung dengan cara link. Anda dapat mengikuti cara berikut ini:

<link rel="stylesheet" href="style.css">

Kode tag untuk link ini ditempatkan di bagian "head" dokumen Anda. Perintah rel perlu diatur dengan pernyataan "stylesheet" agar supaya browser dapat menemukan perintah href sebagai penunjukan ke alamat Web (URL) sheet Anda.

Mengatur tepi halaman (page margin) Halaman Web akan tampil cantik bila dituliskan dalam margin yang lebih lebar. Anda

dapat mengatur sisi kiri dan kanan memakai karakter "margin-left" dan "margin-right". Contoh: <style type="text/css"> body {margin-left: 10%; margin-right: 10%;} </style>

Perintah di atas dituiskan dengan tujuan agar tampilan halaman Web di layar monitor memiliki batas halaman kiri 10% dari lebar layar monitor.

Mengatur inden kiri dan kanan Agar halaman Web Anda tampil lebih cantik bisa juga diberikan inden (spasi) dari margin

kiri beberapa huruf sebelum menuliskan awal kalimat.



Contoh : <style type="text/css"> body {margin-left: 10%; margin-right: 10%;} h1 {margin-left: -8%;} h2,h3,h4,h5,h6 {margin-left: -4%;} </style>

Mengatur jarak penulisan dari tepi atas dan bawah halaman Program Browser biasanya mengerjakan batas atas dan bawah, paragraf dan lain-lain

dengan baik. Namun ketika Anda ingin membuat ruang disebelah atas atau bawah halaman web Anda, atau Anda ingin membuat spasi yang khusus, barulah disini Anda perlu memiliki cara mengaturnya.

Property "margin-top" menentukan ruang sebelah atas dan property "margin-below" menentukan ruang sebelah bawah halaman web Anda. Bila Anda hendak mengatur semuanya dengan heading h2, anda cukup menuliskan dengan perintah HTML sebagai berikut:

h2 {margin-top: 8em; margin-bottom: 3em;}

Kode em merupakan unit penting dalam mengatur ukuran tinggi font (huruf). Ini lebih mudah bila dibandingkan dengan pengaturan pixel atau titik (point). Unit ini akan sangat berguna pada pembuatan huruf besar. Satuan titik (Point) umumnya dipergunakan oleh program word processor misalnya dituliskan ukuran huruf 10 pt. Sayangnya untuk ukuran titik yang sama, menghasilkan ukuran huruf yang berbeda pada pemakaian program browser yang berbeda pula. Apa yang Anda kerjakan dengan baik dengan menggunakan sebuah program browser, bila dibaca dengan program browser yang lain belum tentu baik!. Pergunakanlah kode em untuk mengatasi hal ini.

Untuk mengatur ruang sebelah atas bagian heading halaman web, Anda sebaiknya membuat nama style untuk heading tersebut. Dalam penulisan HTML-nya Anda cukup menggunakan attribut class.

Contoh:

<h2 class="subsection">Getting started</h2> Kemudian pengaturan ruangnya ditulis dengan perintah berikut: h2.subsection {margin-top: 8em; margin-bottom: 3em;}

Pengaturan ini dimulai dengan nama tag, sebuah titik dan kemudian nilai dari atribut class. Hati-hati dalam menempatkan ruang sebelum atau sesudah titik tersebut. Bila pengaturan tersebut tidak memberikan hasil. Ada cara lain untuk mengatur style elemen tertentu. Tapi atribut class tetap bersifat fleksibel.

Pada saat sebuah "heading" diikuti dengan sebuah paragraf, nilai untuk batas bawah (margin-bottom) untuk heading tersebut tidak ditambahkan dengan nilai batas atas (margin-top) paragraf.

Inden pada baris pertama



Kadang-kadang Anda ingin membuat inden pada baris pertama tiap paragraf. Cara berikut dapat Anda lakukan.

p {text-indent: 2em; margin-top: 0; marginbottom:0;}

Cara tersebut akan membuat inden pada baris pertama paragraf sejauh 2 em dan memberikan jarak antar paragraf.

3.17.5 Mengatur Format Font

Model huruf Model yang umum dipakai adalah teks miring (italik) atau tebal (bold). Umumnya

program browser mempergunakan tag em untuk huruf italic dan tag strong untuk huruf tebal. Misalnya anda ingin menuliskan kode em agar huruf tampil berbentuk italic dan tebal dan menuliskan kode strong untuk huruf tebal uppercase, perintahnya dituliskan sebagai berikut:

em {font-style: italic; font-weight: bold;} strong {text-transform: uppercase; font-weight: bold;} Bila gagal dapat ditambahkan perintah ini: h2 {text-transform: lowercase;}

Mengatur ukuran huruf Kebanyakan program browser mempergunakan huruf yang lebih besar untuk heading

yang penting sifatnya. Bila Anda menimpa ukuran defaultnya, Anda menempuh resiko yaitu huruf menjadi tampak lebih kecil khususnya bila Anda mempergunakan ukuran yang Anda tambahkan tersebut dengan ukuran titik (point). Karenanya Anda disarankan untuk melakukan pengaturan ukuran huruf dengan ukuran yang sama. Contoh berikut mengatur ukuran heading dalam persen relatif terhadap ukuran teks normal.

h1 {font-size: 200%;} h2 {font-size: 150%;} h3 {font-size: 100%;}

Mengatur jenis huruf Bisa saja jenis huruf favorit Anda tidak bisa ditampilkan oleh berbagai jenis browser.

Untuk mengatasi hal ini Anda dapat menuliskan beberapa jenis huruf yang tidak dapat ditampilkan oleh hampir semua browser. Ada beberapa jenis huruf generik yang dijamin cocok, sehingga Anda kami sarankan untuk mengakhiri daftar perintah HTML Anda dengan salah satu jenis huruf berikut : serif, sans-serif, cursive, fantasy, atau monospace, contoh:

body {font-family: Verdana, sans-serif;} h1,h2 {font-family: Garamond, Times New Roman, serif;}



Dalam contoh ini heading penting akan ditampilkan dalam bentuk huruf Garamond, bila gagal maka akan ditampilkan dalam bentuk Times New Roman, dan bila juga masih tidak dapat tampil, maka akan tampil sebagai huruf serif. Teks paragraf akan ditampilkan dengan huruf Verdana atau bila masih tidak tampil juga, maka browser masih dapat menampilkannya dengan jenis huruf standar sans-serif.

Cara menghindari masalah huruf dan batas tepi halaman web Pertama pergunakan elemen <p> untuk mencegah teks pada body tulisan yang tidak dapat

ditampilkan dengan baik.

Contoh: <h2>Rumah</h2> Rumah merupakan tempat bertedu dan tempat berlindung bagi keluarga.

Teks yang ditulis mengikuti sebuah heading dapat menimbulkan akibat tampilan jenis huruf yang berbeda pada beberapa jenis program browser. Anda disarankan segera menutup teks pada paragraf tersebut.

Contoh : <h2>Rumah</h2> <p> Rumah merupakan tempat bertedu dan tempat berlindung bagi keluarga.</p>

Kedua pergunakan selalu elemen <pre> ketika anda menuliskan pengaturan jenis huruf yang anda pergunakan.

pre {font-family: monospace;}

Ketiga pergunakan elemen <p> dan <ul> pada waktu mengatur jenis huruf untuk heading. Khususnya ketika Anda melakukan pengaturan border atau warna halaman web Anda dengan elemen div. Beberapa jenis program browser tidak dapat melakukan pengaturan huruf dengan baik dan cenderung lupa sehingga huruf heading Anda tampak menjadi huruf standar saja. Untuk menghindari hal ini Anda dapat menuliskan perintah HTML sebagai berikut : h1,h2,h3,h4,h5,p,ul {font-family: sans-serif;} 3.17.6 Menambahkan Border dan Latar Belakang

Anda dapat dengan mudah menambahkan border disekitar heading, daftar (list), atau paragraf atau sekelompok heading, list dan paragraf secara tertutup dengan mempergunakan elemen div.

Contoh: div.box{border: solid; border-width: thin; width: 100%} Catatan : tanpa property "width" beberapa browser akan menempatkan tepi kanan terlalu jauh ke arah kanan. Untuk mencegah hal ini Anda dapat menuliskan perintah HTML-nya sebagai berikut:



<div class="box"> isi teks ini menggunakan class box dan elemen div ini akan keluar dari class box dengan sebuah garis. </div>

Ada sedikit jenis border yaitu: dotted, dashed, solid, double, groove, ridge, inset dan outset. Lebar border diatur dengan mempergunakan property "border-width". Nilai dari property ini yaitu thin, medium dan thick yang tampak setipis ukuran 0.1em. Property "border-color" memungkinkan Anda mengatur warna. Sebuah efek yang cantik dapat dilakukan dengan memberikan warna latar belakang kotak dengan warna tebal (solid color) atau dengan hamburan gambar ("tile image"). Untuk melakukan ini Anda perlu mempergunakan property "background". Anda dapat mengikuti perintah berikut ini.

div.color { background: rgb(204,204,255); padding: 0.5em; border: none; }

Tanpa pengaturan property border, biasanya program browser hanya akan menampilkan warna standar saja. Property padding memberikan beberapa ruangan diantara tepi-tepi daerah berwarna dan teks yang ada didalamnya. Anda dapat mengatur nilai property pading dengan menambahkan padding-left, padding-top, padding-right dan padding-bottom. Pengaturan ini dituliskan misalnya sebagai berikut:

padding-left: 1em. Anggaplah Anda menginginkan border pada satu sisi halaman web saja. Anda dapat melakukan pengontrolan tiap sisi border dengan memberikan keterangan border-left, border-top, border-right dan border-bottom. Contoh : p.changed { padding-left: 0.2em; border-left: solid; border-right: none; border-top: none; border-bottom: none; border-left-width: thin; border-color: red; }

Susunan perintah diatas memberikan efek pada tampilan web anda dengan border berwarna merah disisi sebelah kiri. 3.17.7 Mengatur Warna Contoh berikut adalah perintah pengaturan warna. body { color: black;



background: white; } strong { color: red }

Model pengaturan diatas memberikan warna hitam teks (default) dan latar belakang putih, tetapi memiliki elemen strong pada warna merah. Ada 16 buah nama warna standar yang dijelaskan dalam uraian berikut. Selain itu Anda dapat juga mempergunakan nilai desimal untuk warna merah, hijau dan biru, dan masing-masing memiliki interval antara 0 sampai 255. Misalnya rgb(255, 0, 0) akan memberikan warna merah di layar monitor. Anda juga dapat mempergunakan angka hexadesimal yang dimulai karakter # yang diikuti enam angka hexadesimal sebagai pengaturan warna. Sebuah pengubah juga diberikan dibawah ini agar Anda dapat melakukan pengubahan nilai dari RGB ke nilai hexadesimal.

Mengatur warna link

Anda dapat mempergunakan CSS untuk mengatur warna hypertex link, dengan warna yang berbeda untuk link yang belum pernah Anda akses, link yang pernah Anda akses dan link yang akan kemudian Anda akses serta link yang aktif. Anda bahkan dapat mengatur warnanya pada saat kursor mouse berada diatas daerah yang akan dilink. Hal ini dapat Anda tuliskan dalam bentuk perintah berikut: :link {color: rgb(0, 0, 153)} /* untuk warnalink yang belum diakses */ :visited {color: rgb(153, 0, 153)} /* untuk warna link yang telah diakses */ :active {color: rgb(255, 0, 102)} /* untuk warna link ketika link diklik */ :hover {color: rgb(0, 96, 255)} /* untuk warna link ketika mouse diatasnya*/

Kadang-kadang Anda ingin memperlihatkan link hyperteks tanpa garis bawah. Anda dapat melakukan ini dengan memberikan property textdecoration atau none, contoh:

a.plain { text-decoration: none } Contoh berikut juga menampilkan link yang tidak bergaris bawah. Teks_link <a class="plain" href="nama_file.htm">not underlined</a>

Kebanyakan orang ketika mereka melihat garis bawah dibawah sebuah link selalu mengira itu adalah bagian teks yang diberi link. Umumnya orang memberikan warna biru pada teks yang diberi link ke halaman atau alamat internet lain. Anda disarankan untuk meninggalkan warna link ini apabila warna latar belakang menyebabkan teks Anda yang diberi link jadi sulit terbaca.



PHP PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada server

side. Artinya semua sintaks yang kita berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. MySQL adalah database yang sering dipakai dalam kombinasi sistem yang menggunakan interface PHP. Keuntungan pengguna PHP adalah kode yang menyusun program tidak perlu diedarkan ke user sehingga kerahasiaan kode terlindungi.

Pada awalnya PHP hanya berjalan pada Linux dan Unix, namun seiring dengan

perkembangannya, PHP dapat dijalankan pada OS windows. Untuk menjalankan script-script PHP, kita membutuhkan sebuah server PHP. Server untuk PHP adalah APACHE server. Untuk itu, kita dapat menggunakan XAMPP (sudah dibahas pada bab sebelumnya).

Ada beberapa cara untuk menulis script PHP yaitu:

1. <? script PHP ?> 2. <script language="php"> script PHP </script> 3. <% Script PHP %> 4.1 Statement

Statement atau pernyataan adalah satuan perintah dalam PHP. Statement harus diakhiri dengan tanda semicolon/titik-koma (;). Semicolon merupakan separator yang digunakan untuk membedakan satu instruksi dengan instruksi yang lain.

Contoh: statement.php

<html> <head> <title>statement</title> </head> <body> <?php echo "Welcome PHP"; echo "<br>"; echo "9 * 4 ="; echo 9 * 4; ?>



</body> </html> Atau <html> <head> <title>statement</title> </head> <body> <?php print "Welcome PHP"; echo "<br>"; print "9 * 4 ="; print 9 * 4; ?> </body> </html> Tulisan yang bercetak tebal adalah statement. Perintah echo maupun print fungsinya sama

yaitu untuk mengirimkan output ke browser. Jangan lupa simpan file php didalam folder belajar pada lokasi C:\Program Files\Xampp\htdocs\belajar. Untuk menjalankannya buka internet explorer, pada address IE (Internet Explorer) ketik localhost/belajar/statement.php

Gambar 4.1 Tampilan browser statement

4.2 Ekspresi

Ekspresi atau expression adalah satu bagian kecil kode yang akan dihitung hasilnya oleh php.

Contoh ekspresi:

9 x 4

Penggunaan ekspresi: echo 9 * 4;



Secara otomatis hasilnya akan keluar 36

Contoh: ekspresi.php

<html> <head> <title>Ekspresi</title> </head> <body> <?php echo 9 + 4 * 3; echo "<br>"; echo (9 + 4) * 3; ?> </body> </html>

Gambar 4.2 Expression 4.3 Komentar

Komentar atau comment adalah bagian dari kode yang tidak dieksekusi/dijalankan. Komentar dibuat untuk memperjelas atau memberi keterangan pada kode program. Ada dua cara menulis komentar: komentar satu baris (menggunakan tanda //) dan komentar banyak baris (menggunakan tanda /* … */.

Contoh komentar:

echo 9 * 4; // menampilkan hasil 9 x 4

/* kode ini akan menampilkan hasil dari 9 x 4 */ echo 9 * 4; 4.4 Tipe Data



PHP mengenal beberapa macam tipe data, diantaranya integer (bilangan bulat), floating

point (double atau desimal) dan string (kumpulan karakter atau kalimat bisa berupa huruf atau angka). Penulisan string untuk huruf dilingkupi tanda petik satu (' … ') atau tanda petik dua (" … "). Sedangkan string untuk numerik/angka tidak dilingkupi tanda petik (" … ").

Contoh penulisan tipe data adalah sebagai berikut:

Tipe Data Contoh Keterangan Integer $total = 7500;

$nilai = -3; Bilangan bulat

Double $diskon = 40.00; $bunga = 15.24;

Bilangan real

String $negara = "indonesia" $kota = "sidoarjo" $harga = 2500;

Kumpulan karakter/kalimat berupa huruf atau angka

4.5 Variabel

Variabel digunakan sebagai tempat penyimpanan data sementara. Data yang disimpan dalam variabel akan hilang setelah program selesai dieksekusi. Variabel dalam PHP tidak harus dideklarasikan sebelum variabel tersebut digunakan. Tidak seperti bahasa-bahasa tertentu yang mengharuskan kita untuk mendeklarasikan variabel terlebih dahulu. Untuk memberi nilai variabel digunakan tanda sama dengan (=). Ada beberapa aturan yang diikuti berkenaan dengan penggunaan nama variabel. Aturan tersebut adalah sebagai berikut: Variabel dimulai dengan tanda dollar($) Karakter pertama harus huruf atau underscore ( _ ) Karakter berikutnya boleh huruf, angka, atau garis bawah. Tidak boleh menggunakan tanda baca. Nama variabel tidak boleh mengandung spasi. Case sensitive atau huruf besar dan huruf kecil dibedakan. Contoh penulisan variabel: $namabarang $jumlah $harga Contoh penulisan variabel dengan memberi nilai variabel: $namabarang = "rinso"; $jumlah = 12; $harga = 6500; $total = $jumlah * $harga;

Contoh: variabel.php



<html> <head> <title>variabel</title> </head> <body> <? $namabarang = "rinso"; $jumlah = 12; $harga = 6500; $total = $jumlah * $harga; echo "Ibu ita membeli $namabarang sebanyak $jumlah dengan harga $harga sehingga Beliau harus membayar $total"; ?> </body> </html>

Gambar 4.3 Penggunaan variabel

Scope variabel adalah sebuah istilah dalam variabel, menyatakan dimana variabel itu dapat digunakan dalam program. PHP mengenal dua macam scope, yaitu lokal dan global. Variabel lokal hanya dapat digunakan dalam blok tempatnya dideklarasi. Sedangkan variabel global dapat digunakan di mana saja dalam program setelah dideklarasi dan di-inisialisasi. Untuk memahami scope lokal dan global, perhatikan contoh dibawah ini:

Contoh: scope.php <? $i = "variabel global"; function test(){ $i = "variabel lokal"; echo "nilai I dalam fungsi = $i"; } test(); echo "<br>"; echo "nilai I luar fungsi = $i"; ?>



Gambar 4.4 Scope lokal dan global

Variabel yang dinyatakan didalam function memiliki scope lokal saja, artinya variabel itu hanya dikenali atau dapat digunakan didalam function itu saja. Pada contoh diatas, $i yang berada didalam function test() merupakan scope lokal, sedangkan $i yang berada diluar function test() merupakan scope global. Untuk menyatakan suatu variabel global dari dalam function dapat digunakan kata kunci global. Perhatikan contoh berikut ini:

Contoh: scope.php <? $i = "variabel global"; function test(){ global $i = "variabel global"; echo "nilai I dalam fungsi = $i"; } test(); echo "<br>"; echo "nilai I luar fungsi = $i"; ?>

Gambar 4.5 Scope global

PHP memiliki variabel-variabel yang telah didefinisikan sebelumnya, variabel ini digunakan untuk memberikan tentang server, client dan lain-lain. Misalnya:



$DOCUMENT_ROOT: berisi nama direktori root pada server. $SERVER_NAME: berisi nama dari server host dimana script dieksekusi. Nilainya bisa

berupa nama virtual host. $HTTP_USER_AGENT: berisi tentang informasi client seperti jenis browser dan Sistem

Operasinya.

Untuk lebih detailnya, nama-nama variabel yang ada, Anda dapat menggunakan fungsi phpinfo(). Script ini jangan sembarangan di akses kepada orang lain untuk menjalankannya. Karena informasi yang dihasilkan dapat digunakan untuk mengetahui spesifikasi server kita. Jelas hal ini tidak aman sebab ada kemungkinan user tersebut dapat masuk ke system kita berdasarkan informasi yang ia baca.

Contoh: info.php <html> <head> <title>fungsi phpinfot</title> </head> <body> <? phpinfo(); ?> </body> </html>

Gambar 4.6 Fungsi phpinfo 4.6 Konstanta

Konstanta mirip dengan variabel. Bedanya nilai konstanta tidak perna berubah sejak dideklarasikan. Untuk mendeklarasikan konstanta digunakan fungsi define();

Sintaks:



define("nama_konstanta",nilai);

Contoh: konstanta.php

<html> <head> <title>konstanta</title> </head> <body> <? define("phi",3.14); $r = 5; $luas = phi * $r * $r; echo "Luas = $luas"; ?> </body> </html>

Gambar 4.7 Penggunaan konstanta 4.7 Operator

Operator adalah simbol yang digunakan untuk memanipulasi data, seperti perkalian, pembagian, penambahan dan pengurangan. Ada operator yang menggunakan satu operand atau dua operand. Sedangkan operand adalah data yang dioperasikan atau dimanipulasi. Operand dapat digantikan dengan variabel. Penjumlahan adalah sebuah contoh sederhana dari suatu operasi, misalnya 5 + 3. 5 dan 3 adalah operand. Tanda ( + ) disebut operator. Secara umum, operasi pada PHP dapat dikelompokkan menjadi 6 jenis yaitu: 1. Operator Assignment 2. Operator Aritmatika 3. Operator Logika 4. Operator Increment dan Decrement 5. Operator Relasional 6. Operator Bitwise



4.7.1 Operator Assignment

Operator Assignment digunakan untuk memberikan nilai pada variabel tertentu.

Simbol operator assignment:

Operator Operasi Contoh Ilustrasi = Sama dengan $a = 5; $a = $a

+= Ditambah dengan $a += 5; $a = $a + 5 -= Dikurangi dengan $a -= 5; $a = $a – 5 /= Dibagi dengan $a /= 5; $a = $a / 5 *= Dikali dengan $a *= 5; $a = $a * 5 %= Dimoduulus dengan $a %= 5; $a = $a % 5 &= Logika AND dengan $a &= TRUE; $a = $a & TRUE |= Logika OR dengan $a |= FALSE; $a = $a | FALSE; ^= Logika XOR dengan $a ^= 5; $a = $a ^ 5 .= Digabung dengan

(penggabungan string) $a .= "Nela"; $a = $a . "Nela"

Contoh: assignment.php <html> <head> <title>Operator Assignment</title> </head> <body> <? $a=12; $b="nela"; echo $a += 3 ; echo " hasil dari 12 + 3 <br>"; echo $b .= " agustin"; echo " berasal dari penggabungan nama nela dan agustin"; ?> </body> </html>



Gambar 4.8 Penggunaan operator assignment Contoh: penggabungan.php

<html> <head> <title>penggabungan string</title> </head> <body> <? $string1 = "Welcome"; $string2 = "PHP"; echo($string1." ".$string2); ?> </body> </html>

Gambar 4.9 Penggunaan operasi penggabungan string

4.7.2 Operator Aritmatika

Operator aritmatika merupakan operator yang berhubungan dengan fungsi matematika.



Simbol operator aritmatika:

Operator Operasi Contoh Ilustrasi + Penambahan $a + $b; 9 + 3 hasilnya 14 - Pengurangan $a - $b; 9 – 3 hasilnya 6 * Perkalian $a * $b; 9 x 3 hasilnya 27 / Pembagian bilangan bulat $a / $b; 9 : 3 hasilnya 3

% Modulus (Mencari sisa hasil bagi variabel dengan bilangan tertentu)

$a % $b; 9 % 3 hasilnya 0 11 % 3 hasilnya 2

Contoh: aritmatika.php <html> <head> <title>Operator Aritmatika</title> </head> <body> <? echo "9 + 3 = ", 9 + 3 , "<br>"; echo "9 - 3 = ", 9 - 3 , "<br>"; echo "9 * 3 = ", 9 * 3 , "<br>"; echo "9 / 3 = ", 9 / 3 , "<br>"; echo "9 % 3 = ", 9 % 3 , "<br>"; echo "11 % 3 = ", 11 % 3; ?> </body> </html>

Gambar 4.10 Penggunaan operator aritmatika 4.7.3 Operator Logika

Operator logika digunakan untuk melakukan operasi logika sehingga menghasilkan nilai berupa TRUE dan FALSE. Seperti bahasa C, PHP mendefinisikan False dengan 0 dan True dengan 1. Sebagai contoh logika AND akan bernilai true jika semua kondisi bernilai benar.



Simbol operator logika:

Operator Operasi Contoh Ilustrasi AND atau && Logika AND (dan) (5 > 3) && (5 < 12); 1 dan 1 hasilnya 1

OR atau || Logika OR (atau) (5 > 3) || (3 < 5); 1 atau 1 hasilnya 1

XOR Logika XOR (Exclusive Or) (2 > 5) XOR (2 < 5); 0 xor 1 hasilnya 1

! Logika Not (nilai kebalikan dari pernyataan/operand)

!(2 > 5); negasi 0 hasilnya 1 (nilai kebalikan)

Tabel kebenaran operasi logika:

p q p AND q p OR q p XOR q !p True True True True False False True False False True True False False True False True True True False False False False False True

Atau

p q p AND q p OR q p XOR q !p 1 1 1 1 0 0 1 0 0 1 1 0 0 1 0 1 1 1 0 0 0 0 0 1

Contoh: logika.php

<html> <head> <title>Operator Logika</title> </head> <body> <? echo (5 > 3) && (5 < 12); //atau (5 > 3) and (5 < 12) /* penjelasan: kedua kondisi bernilai benar sehingga nilai true dan true = 1 (true) */ echo "<br>"; echo (5 > 3) || (3 < 5); //atau (5 > 3) or (3 < 5) /* penjelasan: kedua kondisi bernilai benar sehingga true atau true = 1 (true) */ echo "<br>"; echo (2 > 5) XOR (2 < 5); /* penjelasan: kondisi1 bernilai salah, kondisi2 bernilai benar sehingga false xor true =



1 (true) */ echo "<br>"; echo !(2 > 5); /* penjelasan: kondisi bernilai salah sehingga kebalikan nilai false = 1 (true) */ ?> </body> </html>

Gambar 4.11 Penggunaan operator logika 4.7.4 Operator Increment dan Decrement

Operator ini diadopsi dari bahasa C++, digunakan untuk menambahkan atau mengurangi nilai suatu variabel dengan 1.

Simbol operator logika:

Operator Operasi Contoh Ilustrasi

++$a

Pre-increment (Menambahkan nilai satu pada variabel sebelum pengoperasian)

$a = ++$b; $a = + 1 $b

--$a Pre-decrement (Mengurangi nilai satu pada variabel sebelum pengoperasian)

$a = --$b; $a = - 1 $b

$a++

Pre-increment (Menambahkan nilai satu pada variabel sesudah pengoperasian)

$a = $b++; $a = $b + 1

$a--

Pre-increment (Menambahkan nilai satu pada variabel sesudah pengoperasian)

$a = $b--; $a = $b - 1



Maksud pre adalah nilai suatu variabel ditambahkan/dikurangi dulu dengan satu

kemudian operasi lainnya dijalankan. Sedangkan post adalah operasi dilaksanakan dulu, setelah semua operasi selesai kemudian nilai dari variabel itu ditambahkan/dikurangi dengan satu.

Contoh: aritmatika.php <html> <head> <title>Operator Increment&Decrement</title> </head> <body> <? $a=5; $b=5; echo $x = ++$a; echo "<br>"; echo $x = --$b; ?> </body> </html>

Gambar 4.12 Penggunaan operator increment dan decrement 4.7.5 Operator Relasional

Operator relasional/perbandingan merupakan operator yang digunakan untuk membandingkan dua buah nilai berupa True (benar) atau False (salah). Seperti bahasa C, PHP mendefinisikan False dengan 0 dan True dengan 1. Simbol operator relasional: Operator Operasi Contoh Ilustrasi

== Sama dengan $a == $b; 8 == 8 hasilnya TRUE (1) , 8 == 3 hasilnya FALSE (0)

=== Identik/Sama dengan dan sama $a === $b; 8 === 8 hasilnya TRUE (1), 8 === 3

hasilnya FALSE (0)



tipe (untuk PHP4)

!= Tidak sama dengan $a != $b; 8 != 3 hasilnya TRUE (1), 3 != 3 hasilnya

FALSE (0)

< Lebih kecil $a < $b; 2 < 3 hasilnya TRUE (1), 8 < 3 hasilnya FALSE (0)

> Lebih besar $a > $b; 8 > 3 hasilnya TRUE (1), 2 > 3 hasilnya FALSE (0)

<= Lebih kecil sama dengan $a <= $b; 2 <= 3 hasilnya TRUE (1), 8 <= 3

hasilnya FALSE (0)

>= Lebih besar sama dengan $a >= $b; 8 >= 3 hasilnya TRUE (1), 2 >= 3

hasilnya FALSE (0)

Contoh: relasional.php

<html> <head> <title>Operator Relasional</title> </head> <body> <?php echo 8>5; echo "<br>"; echo 5<8; echo "<br>"; echo 5>=5; echo "<br>"; echo 8<=8; echo "<br>"; echo 5!=8; echo "<br>"; echo 5==5; ?> </body> </html>

Gambar 4.13 Penggunaan operator relasional



4.7.6 Operator Bitwise

Operator Bitwise digunakan untuk memanipulasi bit-bit dari nilai data.

Simbol operator bitwise:

Operator Operasi Contoh >> Pergeseran bit ke kanan 9 >> 3; << Pergeseran bit ke kiri 9 << 3; ~ Komplemen satu / NOT ~3; & Bitwise AND 9 & 3; | Bitwise OR 9 | 3;

^ Bitwise XOR (Exclusive Or) 9 ^ 3;

Contoh: bitwise.php

<html> <head> <title>Operator Bitwise</title> </head> <body> <? echo 9 >> 3 ,"<br>"; echo 9 << 3 ,"<br>"; echo ~3 ,"<br>"; echo 9 & 3 ,"<br>"; echo 9 | 3 ,"<br>"; echo 9 ^ 3 ,"<br>"; ?> </body> </html>

Gambar 4.14 Penggunaan operator bitwise



4.8 Struktur Kendali

Control flow dalam bahasa Indonesia dapat diartikan sebagai aliran kendali atau struktur kendali. Struktur kendali merupakan urutan eksekusi perintah di dalam program, berbentuk rangkaian perintah yang harus digunakan untuk memenuhi beberapa keadaan yaitu:

Mengulang suatu perintah jika suatu kondisi terpenuhi. Melanjutkan sebuah pernyataan bila konsdisi terpenuhi. Memilih sebuah pilihan dari beberapa alternatif bila kondisi terpenuhi.

Cotrol Flow/struktur kendali dalam PHP terdapat tiga jenis:

Percabangan (branching) Perulangan (looping) Perpindahan (jumping)

4.8.1 Percabangan

Struktur percabangan adalah struktur kendali yang memungkinkan pemilihan atas

perintah yang akan dijalankan sesuai dengan kondisi tertentu. Ada empat macam perintah percabangan dalam PHP, yaitu:

A. IF B. IF…ELSE C. IF…ELSEIF…ELSE D. SWITCH

A. IF Perintah ini digunakan untuk menjalankan satu perintah yang menyatakan keadaan.

Sintaks:

if (kondisi) { pernyataan akan dijalankan bila kondisi bernilai benar }

Contoh: if.php

<html> <head> <title>Percabangan IF</title> </head> <body> <? $x=12; $y=18; if ($x<$y) {



echo "nilai x lebih kecil dari nilai y"; } ?> </body> </html>

Gambar 4.15 Hasil percabangan if

B. IF…ELSE Perintah ini digunakan untuk menjalankan dua perintah dengan pernyataan banyak

kondisi.

Sintaks:

if (kondisi1) { pernyataan1 akan dijalankan bila kondisi1 bernilai benar } else { penyataan ini akan dijalankan bila kondisi1 bernilai salah }

Contoh: if_else.php

<html> <head> <title>Percabangan IF … ELSE</title> </head> <body> <? $x=12; $y=18; if ($x>$y) { echo "nilai x lebih kecil dari nilai y"; } else {

echo "tulisan ini akan tampil karena kondisi pertama bernilai salah"; } ?> </body>



</html>

Gambar 4.16 Hasil percabangan if … else

C. IF…ELSEIF…ELSE Perintah ini digunakan untuk menjalankan lebih dari dua perintah dengan pernyataan

banyak kondisi.

Sintaks: if (kondisi1) { pernyataan1 akan dijalankan bila kondisi1 bernilai benar } elseif (kondisi2) { penyataan2 akan dijalankan bila kondisi1 bernilai salah dan kondisi2

bernilai benar } elseif (kondisi3) { penyataan3 akan dijalankan bila kondisi1 dan kondisi2 bernilai salah

dan kondisi3 bernilai benar } … else { pernyataan ini akan dijalankan bila kondisi-kondisi sebelumnya

bernilai salah }

Contoh: if_elseif_else.php

<html> <head> <title>Percabangan IF … ELSEIF ... ELSE</title> </head> <body> <? $x=12; $y=18;



if ($x>$y) { echo "nilai x lebih besar dari nilai y"; } elseif ($x ==$y) { echo "nilai x sama dengan nilai y"; } elseif ($x<$y) { echo "nilai x lebih kecil dari nilai y"; } else { echo "tulisan ini akan tampil karena kondisi-kondisi sebelumnya bernilai

salah"; } ?> </body> </html>

Gambar 4.17 Hasil percabangan if … elseif … else

C. SWITCH Perintah switch digunakan sebagai alternatif pengganti dari sintaks if … else dengan else

lebih dari satu. Dengan menggunakan perintah ini program percabangan akan semakin mudah dibuat dan dipelajari. Sintaks:

switch (kondisi) { case konstanta1 : pernyataan1; break; case konstanta2 : pernyataan2; break; case konstanta3 : pernyataan3; break; … default :



pernyataan default; break; }

Perintah switch akan menyeleksi kondisi yang diberikan dan membandingkan hasilnya

dengan konstanta-konstanta yang berada di case. Perbandingan akan dimulai dari konstanta pertama sampai konstanta terakhir. Jika hasil kondisi sama dengan nilai konstanta tertentu, maka pernyataan tersebut akan dijalankan sampai ditemukan perintah break. Misal, apabila kondisi == 1, pernyataan1 akan dijalankan, apabila kondisi == 2, pernyataan2 akan dijalankan, dan seterusnya.

Pernyataan break akan membawa proses keluar dari perintah switch, fungsinya adalah

untuk mencegah full-through maksudnya pernyataan akan dijalankan hanya sampai break saja, jika tidak ada perintah break maka pernyataan akan terus dijalankan sampai ditemukanya perintah break untuk mengakhiri pernyataan tersebut. Jika hasil dari kondisi tidak ada yang sama dengan konstanta-konstanta yang diberikan, maka pernyataan pada default akan dijalankan. Agar Anda dapat membandingkan penggunaan perintah switch-case. Perhatikan kedua contoh berikut ini:

Contoh: Penggunaan perintah switch bagian pertama File: switch.php

<html> <head> <title>Percabangan SWITCH</title> </head> <body> <? $x=3; switch($x){ case 1 : echo "nilai x sama dengan 1"; break; case 2 : echo "nilai x sama dengan 2"; break; case 3 : echo "nilai x sama dengan 3, pernyataan ini akan dijalankan karena

kondisi yang diberikan pada switch bernilai 3 dimana nilai tersebut sama dengan kontanta ke 3 pada case ";

break; default: echo "nilai x sama dengan 0"; break; } ?> </body> </html>



Gambar 4.18 Hasil percabangan switch-case bagian 1

Contoh: Penggunaan perintah switch bagian kedua File: bulan.php

<html> <head> <title>perhitungan hari</title> </head> <body> <form name="form1" method="post" action="hitung.php"> bulan : <input name="bulan" type="text" id="bulan"> tahun : <input name="tahun" type="text" id="tahun"> <input type="submit" name="Submit" value="Hitung"> </form> </body> </html>

file: hitung.php

<? $bulan=$_POST['bulan']; $tahun=$_POST['tahun']; switch($bulan){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : case 12 : $hari = 31; break; case 4 :



case 6 : case 9 : case 11 : $hari = 30; break; case 2 : if(($tahun%4) == 0){ $hari = 29; }else{ $hari = 28; } break; } echo "<h2>Jumlah hari pada bulan $bulan tahun $tahun = $hari hari</h2>"; ?>

Pada file bulan.php terdapat textbox bulan, textbox tahun dan button. Textbox tersebut

bertujuan untuk menginputkan nilai bulan dan tahun. Jika Anda tekan button hitung, maka file tersebut akan diproses ke file hitung.php, dimana kedua nilai tersebut akan di bandingkan dengan kontansta-konstanta yang ada di case. Apabila hasil kondisi sama dengan nilai konstanta tertentu, maka pernyataan tersebut akan dijalankan sampai ditemukan perintah break. Apabila tidak ada perintah break maka pernyataan akan terus dijalankan sampai ditemukanya perintah break untuk mengakhiri pernyataan tersebut.

Alur program pada file hitung.php adalah apabila kondisi == 1, 3, 5, 7, 8, 10, 12,

pernyataan $hari = 31 akan dijalankan, apabila kondisi == 4, 6, 9, 11 pernyataan $hari = 30 akan dijalankan, apabila kondisi = 2, akan diproses lagi ke perintah if, jika nilai tahun yang diinputkan dioperasikan % 4 (nilai = sisa hasil bagi 4) dan hasilnya == 0, maka $hari = 29 akan dijalankan, jika hasil kondisi if tidak memenuhi syarat yang diberikan maka $hari = 28 akan dijalankan.

Gambar 4.19 Form bulan dan tahun



Gambar 4.20 Hasil percabangan switch-case bagian 2 4.8.2 Perulangan

Struktur perulangan digunakan untuk mengulang suatu perintah sebanyak yang diinginkan tanpa harus menulis ulang. Ada tiga macam perintah perulangan dalam PHP, yaitu:

A. FOR - loop seluruh blok code sebanyak angka tertentu B. FOREACH - loop seluruh blok kode setiap elemen dalam array C. WHILE - loop seluruh blok code selama kondisi tertentu bernilai true D. DO…WHILE - loop seluruh blok kode satu kali, kemudian mengulangi beberapa kali

selama kondisi tertentu bernilai true

A. FOR Perintah for digunakan untuk mengulang perintah dengan jumlah pengulangan yang dapat

ditentukan berapa kali harus dilakukan. Pada perintah ini Anda tidak perlu menuliskan suatu kondisi untuk diuji. Anda hanya perlu menulis nilai awal dan akhir variabel penghitung. Nilai variabel penghitung akan secara otomastis bertambah/berkurang tiap kali sebuah pengulangan dilaksanakan. Sintaks:

for (nilai_awal; batas_akhir; increment/decrement) { pernyataan yang dijalankan;

} contoh:

for ($a=1; $a<=6; $a++){ echo $a;

}



Contoh: for.php

<html> <head> <title>Perulangan For</title> </head> <body> <? for ($a=1; $a<=6; $a++){ echo ("Ini adalah pengulangan ke-$a <br>"); } ?> </body> </html>

Gambar 4.21 Hasil percabangan for

Contoh: pemanfaatan_for.php <html> <head> <title>Memanfaatkan Perulangan For</title> </head>

Penjelasan: $a : variabel penghitung 1 : bilangan nilai awal hitungan 6 : angka hitungan akhir $a++ : isi variabel penghitung ditambah satu apabila telah sampai akhir blok for,

perintah pada bagian ini tidak harus $a++ atau $a-- yang berarti ditambah/dikurangi satu, tetapi juga bisa dapat menggunakan $a+=n. n adalah angka pertambahan yang diinginkan

echo $a; : pernyataan yang akan dijalankan



<body> <div align="center"> <h4>DAFTAR KONVERSI TEMPERATUR</h4> <table width="0" border="1" cellpadding="2" cellspacing="2"> <tr> <td><b>CELSIUS</b></td> <td><b>REAMUR</b></td> <td><b>FAHRENHEIT</b></td> </tr> <? for($c=0; $c<=100; $c+=10){ $r=(4/5)*$c; $f=(9/5)*$c+32; ?> <tr> <td><? echo $c; ?></td> <td><? echo $r; ?></td> <td><? echo $f; ?></td> </tr> <? } ?> </table> </div> </body> </html>

Atau lebih singkatnya:

<? echo "<h4>DAFTAR KONVERSI TEMPERATUR</h4>"; echo "<table border=1>"; echo "<tr><th>CELSIUS</th><th>REAMUR</th><th>FAHRENHEIT</th></tr>"; for($c=0; $c<=100; $c+=10){ $r=(4/5)*$c; $f=(9/5)*$c+32; echo "<td>$c</td>"; echo "<td>$r</td>"; echo "<td>$f</td></tr>"; } ?>



Gambar 4.22 Pemanfaatan perulangan for

B. FOREACH

Foreach merupakan perulangan/loop seluruh blok kode setiap elemen dalam array.

Sintaks:

foreach (array as $var) { pernyataan yang dijalankan; }

Contoh:

foreach ($_POST as $input) { echo $input; }

Contoh: foreach.php

<html> <head> <title>Perulangan Foreach</title> </head> <body> <? $hari=array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"); echo "Nama-Nama Hari: <br>"; foreach($hari as $sebutkan){



echo "$sebutkan<br>"; } ?> </body> </html>

Gambar 4.23 Hasil percabangan foreach

C. WHILE Perintah while digunakan untuk mengulang perintah dengan jumlah loopingnya tidak

ditentukan pada awal perulangan. Proses pengulangan akan terus berjalan jika kondisi yang diperiksa di while masih bernilai true (benar) dan pengulangan akan dihentikan jika kondisinya sudah bernilai false (salah). Sintaks:

while (kondisi) { pernyataan yang akan dijalankan; }

Contoh:

$i = 2; while ($i<20) { echo $i; $i = $i + 20; }

Contoh: while.php

<html>



<head> <title>Perulangan While</title> </head> <body> <? $angka=1; while ($angka<=10){ echo "<font size=\"$angka\"color=\"green\"face=\"verdana\">$angka </font><br>"; $angka++; } ?> </body> </html>

Gambar 4.24 Hasil percabangan while

Proses pengulangan tersebut akan terus dijalankan selama nilai $angka lebih kecil atau

sama dengan 10. Pengulangan tersebut berhenti pada pengulangan ke 10 karena pengulangan ke 11 merupakan kondisi yang bernilai salah jadi perintah while akan berhenti.

D. DO…WHILE Do…While merupakan modifikasi dari while sehingga fungsinya hampir sama.

Perbedaan antara perintah while dengan do…while yaitu terletak pada kondisi yang diperiksa. Pada perintah while kondisi yang diperiksa terletek pada awal perulangan sehingga



sebelum masuk dalam perulangan while, kondisi harus bernilai benar. Sedangkan perintah while kondisi yang diperiksa diakhir perulangan. Perintah-perintah dalam blok do…while akan dikerjakan paling sedikit satu kali, karena proses pemeriksaan dari blok do … while ini dilakukan pada akhir blok.

Sintaks:

do { pernyataan yang akan dijalankan; } while (kondisi);

Contoh: $i = 0; do{ $i++; echo $i; } while ($i<5);

Contoh: do_while.php

<html> <head> <title>Perulangan Do … While</title> </head> <body> <? $count=1; do{ echo "pengulangan ke-$count<br>"; $count++; } while ($count<=6); ?> </body>

</html>



Gambar 4.25 Hasil percabangan do…while 4.8.3 Perpindahan

Pada struktur perpindahan, saya hanya membahas perintah break, continue, return dan exit.

A. BREAK Break digunakan dalam looping untuk menghentikan suatu pengulangan. Sedangkan

break digunakan dalam switch untuk mengakhiri statement atau pernyataan. Untuk lebih jelasnya, perhatikan kode berikut ini:

Break digunakan dalam looping: Contoh: break_contoh1.php <? for($i=0; $i<7; $i++){ if($i==3){ break; } echo "Nilai i: $i <br>"; } echo "pengulangan selesai"; ?> Kode tersebut akan melakukan break pada saat i bernilai 3, sehingga akan menghasilkan

output seperti gambar berikut ini:



Gambar 4.26 Break pada looping

Break digunakan dalam switch: Contoh: break_contoh2.php

<? $i=3; switch($i){ case 1 : echo "nilai i = 1"; break; case 2 : echo "nilai i = 2"; break; case 3 : echo "nilai i = 3"; break; } ?>

Gambar 4.27 Break pada switch

B. CONTINUE Continue berfungsi untuk melewati satu iterasi/putaran dalam rangkaian loop. Untuk

lebih jelasnya, perhatikan kode berikut ini: Contoh: continue.php



<? for($i=0; $i<7; $i++){ if($i==3){ continue; } echo "Nilai i: $i <br>"; } echo "pengulangan selesai"; ?>

Kode tersebut akan melakukan break pada saat i bernilai 3. kemudian i akan dilanjutkan

sampai i bernilai 6, sehingga akan menghasilkan output seperti gambar berikut ini:

Gambar 4.28 Penggunaan continue

C. RETURN

Perintah return berfungsi untuk memerintahkan kode untuk keluar dari fungsi. Perhatikan kode berikut ini:

Contoh: return.php <? function testReturn(){

for($i=0; $i<7; $i++){ if($i==3){

return; }

echo "Nilai i : $i <br>"; } echo "Pengulangan selesai";

} testReturn(); echo "Function selesai"; ?>



Gambar 4.29 Penggunaan return Perhatikan bahwa perintah echo"Pengulangan selesai"; tidak dijalankan. Ini

menunjukkan bahwa setelah return dieksekusi, program langsung keluar dari function dan mengeksekusi perintah setelah function, yaitu echo"Function selesai";

D. EXIT

Perintah exit digunakan untuk menghentikan keseluruhan script php. Untuk lebih jelasnya, perhatikan kode berikut ini:

Contoh: exit.php <? function testExit(){

for($i=0; $i<7; $i++){ if($i==3){

exit; }

echo "Nilai i : $i <br>"; } echo "Pengulangan selesai";

} testExit(); echo "Function selesai"; ?>



Gambar 4.30 Penggunaan exit

Jika Anda perhaitkan bahwa perintah echo"Function selesai"; tidak dijalankan. Karena

pada saat i bernilai 3, setelah itu perintah exit akan menghentikan keseluruhan scipt php. 4.9 Array

Array merupakan tempat untuk menyimpan sejumlah nilai scalar. Berbeda dengan variabel yang hanya menyimpan satu nilai saja. Masing-masing nilai diakses melalui index yang biasa disebut subskrip. Normalnya, sebuah index berupa interger dan dimulai dari nol. Secara default, array adalah basis nol, artinya elemen pertama dari array memiliki index nol. Akan tetapi index dapat juga berupa string.

Data dalam suatu array disebut elemen-elemen array. Bentuk sederhana array terdiri dari serangkaian elemen yang bertanda dimulai dari nol dan bertambah secara sekuensial atau berurutan. Array dalam PHP dapat berisi elemen dari sejumlah tipe data yang berbeda. Artinya array dalam PHP tidak harus memiliki tipe data yang sama. Setiap elemen dapat berupa tipe data apa saja.

Ada tiga jenis array di PHP: Numeric array – Array dengan kunci ID numerik Associative array – Array dimana setiap kunci ID berasosiasi dengan sebuah nilai Multidimensional array - Array yang menyimpan satu atau lebih array

4.9.1 Inisialisasi Array

Ada banyak cara untuk melakukan inisialisasi sebuah array. Cara pertama yang sederhana adalah cukup dengan memberikan nilai kepada variabel array.

$kota[] = "Sidoarjo"; $kota[] = "Surabaya"; $kota[] = "Kediri";



Jika tanda kurung siku pada variabel array tidak diberikan nilai index, secara default maka element sebenarnya bernilai index 0,1,2,... contoh dibawah akan menghasilkan array yang sama dengan contoh diatas.

$kota[0] = "Sidoarjo"; $kota[1] = "Surabaya"; $kota[2] = "Kediri";

Contoh: array.php

<? $kota[0]="Sidoarjo"; $kota[1]="Surabaya"; $kota[2]="Kediri"; $kota[3]="Madiun"; $kota[4]="Ngawi"; echo "$kota[0]"; echo "&nbsp"; echo "$kota[3]"; ?>

Gambar 4.31 Tampilan browser file array.php

Secara default, pemberian index dilakukan secara sekuensial atau berurutan. Tetapi dilain hal dapat dilakukan peng-indexkan secara acak sesuai keinginan user.

$kota[35] = "Sidoarjo"; $kota[36] = "Surabaya"; $kota[37] = "Kediri"; echo $kota[36]; // nilai output yang keluar yaitu Surabaya

Array tersebut memiliki tiga buah elemen juga tetapi indexnya merupakan bilangan acak yaitu 35, 36, 37.



Jika menginginkan jumlah dari elemen array yang terdapat pada sebuah variabel array, dapat digunakan fungsi count(). Fungsi tersebut mengembalikan nilai fungsi berupa integer yang menyatakan jumlah elemen array.

$kota[35] = "Sidoarjo"; $kota[36] = "Surabaya"; $kota[] = "Kediri"; // memiliki index 37 echo count ($kota); // nilai output yang keluar yaitu 3 echo $kota[37]; // nilai output yang keluar yaitu Kediri

Cara lain untuk menginisialisasi array adalah dengan konstruksi array array(). Nilai dikirimkan kedalam array yang akan diberikan.

$kota = array("Sidoarjo", "Surabaya", "Kediri"); echo $kota[2]; // nilai output yang keluar yaitu Surabaya

Contoh: array_1.php

<? $warna=array("putih","hitam","merah","hijau"); echo "$warna[1]"; ?>

Gambar 4.32 Tampilan browser file array_1.php

Jika user ingin mengesampingkan index secara default, operator (=>) dapat digunakan untuk memberikan index spesifik untuk elemen array. Pada contoh sebelumnya $kota memiliki tiga elemen dengan index 0, 1, dan 2. Jika user menginginkan array dengan basis satu (index dimulai dari 1, 2, 3, ...), maka dapat dituliskan dengan menggunakan operator (=>).

$kota = array(1 => "Sidoarjo", "Surabaya", "Kediri"); echo $kota[3]; // nilai output yang keluar yaitu Kediri Atau $kota = array("Solo", 12 => "Madiun", "Ngawi", "Magetan");



echo $kota[8]; // nilai output yang keluar yaitu Ngawi

4.9.2 Navigasi Array

Navigasi (mengakses nilai) array dapat dilakukan dengan looping/perulangan. Misalnya untuk menampilkan isi array berindex numerik, kita akan menggunakan kode seperti berikut: $kawan[0]="112"; $kawan[1]="306"; $kawan[2]="241"; $kawan[3]="129"; while(list($index, $nilai) = each($kawan)){ echo "Array kawan index $index berisi nilai $nilai"; echo "<br>"; }

Untuk mengakses array berindex asosiatif, kita tidak dapat menggunakan loop seperti di atas, karena label/index elemen disimpan dalam bentuk string. Akan menghasilkan output: Array $kawan index 0 berisi nilai Anton Array $kawan index 1 berisi nilai Lisa Array $kawan index 2 berisi nilai Doni

Ada dua fungsi yang terlibat di atas, each dan list. Fungsi each berguna untuk mengakses masing-masing elemen dalam array. Elemen yang dihasilkan adalah pasangan key dan value, dimana key adalah indexnya dan value adalah isinya. Pasangan tersebut akan dipisahkan oleh fungsi list dan dimasukkan ke dalam variabel $index dan $nilai.

4.9.3 Fungsi-Fungsi Array A. SORT Elemen-elemen dalam array dapat diurutkan dengan menggunakan fungsi sort(). Contoh

penggunaannya adalah sebagai berikut : $kawan = array (112=>"Anton", 306=>"Lisa", 241=>"Doni", 129=>"Anisah"); sort($kawan); while(list($index, $nama) = each($kawan)){ echo "Array kawan index ke $index adalah $nama"; echo "<br>"; } Akan menghasilkan output: Array kawan index ke 0 adalah Anisah Array kawan index ke 1 adalah Anton



Array kawan index ke 2 adalah Doni Array kawan index ke 3 adalah Lisa

B. ASORT Asort digunakan untuk mengurutkan asosiatif array menurut isinya. Contoh penggunaan:

$kawan = array ("Charlie"=>123, "Ani"=>528, "Budi"=>456); asort($kawan); while(list($index, $nilai) = each($kawan)){ echo "Array kawan index $index berisi nilai $nilai"; echo "<br>"; } Akan menghasilkan output: Array kawan index Charlie berisi nilai 123 Array kawan index Budi berisi nilai 456 Array kawan index Ani berisi nilai 528

C. KSORT

Ksort digunakan untuk mengurutkan asosiatif array menurut indexnya. Contoh penggunaan:

$kawan = array ("Charlie"=>123, "Ani"=>528, "Budi"=>456); ksort($kawan); while(list($index, $nilai) = each($kawan)){ echo "Array kawan index $index berisi nilai $nilai"; echo "<br>"; } akan menghasilkan output: Array kawan index Ani berisi nilai 528 Array kawan index Budi berisi nilai 456 Array kawan index Charlie berisi nilai 123 4.10 Fungsi

Fungsi merupakan serangkaian script/kode yang diberi nama dan kemudian dapat dipanggil sewaktu-waktu. Dengan adanya fungsi maka pemrograman dapat dipermudah karena tidak harus menulis berulang-ulang rangkaian script/kode yang sama. Dalam bahasa PHP, hanya mengenal perintah function untuk membuat fungsi.

4.10.1 Return dan Parameter



Function dibawah ini akan menerima masukkan berupa dua angka. Kemudian kedua

angka tersebut akan dijumlahkan, dan hasilnya dikembalikan kepada pemanggil function. Nilai yang dikembalikan tersebut disebut return value. Sedangkan nilai yang dimasukkan ke dalam function ($a dan $b) disebut parameter atau argument.

function add($a, $b){ return $a + $b; }

Secara default sebuah parameter atau argument bersifat pass by value, yang berarti hanya nilainya saja yang dibutuhkan sehingga nilai pada variabel tersebut tidak mengalami perubahan setelah function dijalankan. Perhatikan contoh berikut: function pengurangan($input1, $input2){ $hasil = $input2 - $input1; echo $hasil; } pengurangan(2,9);

Akan menghasilkan output: nilai 7

Selain argument yang telah dijelaskan diatas, ada juga argument yang bersifat pass by

reference, yang digunakan ketika kita ingin mengubah nilai sebuah argument. Argument yang bersifat pass by reference ini nilainya akan berubah setelah function dijalankan. Untuk membuat argument pass by reference kita menggunakan karakter ( . ) di depan nama argument. Untuk lebih jelasnya, perhatikan contoh berikut ini:

function sambung($input) {

echo $input . " belajar PHP"; } sambung("Ely"); Akan menghasilkan output: Ely belajar PHP 4.10.2 Deklarasi Function

Ada beberapa hal utama yang perlu diperhatikan dalam deklarasi function pada PHP: Nama function Parameter Function body Standar penulisan fungsi adalah:

function nama_fungsi(daftar_parameter){ pernyataan

}



Contoh function: function tambah($x, $y){ $z = $x + $y; echo $z; } tambah(3,5); Atau function jumlah($x, $y){ $z = $x + $y; return $z; } echo jumlah(3,5);

Perhatikan contoh function tambah di atas. Baris satu merupakan deklarasi function. deklarasi berisi: Keyword function Nama function Parameter

Parameter adalah nilai yang dimasukkan ke dalam function untuk diproses sehingga menghasilkan output. Nama function ditentukan dengan memenuhi aturan sebagai berikut: Tidak boleh sama dengan function yang telah ada dalam PHP. Hanya boleh terdiri dari huruf, angka, dan garis bawah (underscore) Tidak boleh diawali dengan angka

Contoh: function.php <? function cetak_tebal($input){ $teks = "<b>"; $teks .= "$input"; $teks .= "</b>"; return($teks); } echo "kalimat ini belum dicetak tebal<br>"; echo cetak_tebal("kalau yang ini sudah dicetak tebal"); ?>



Gambar 4.33 Function cetak tebal

4.10.3 Implementasi Function Contoh function: 1 function tambah($x, $y){ 2 $z = $x + $y; 3 echo $z; 4 } 5 function jumlah($x, $y){ 6 $z = $x + $y; 7 return $z; 8 } 9 tambah(3,5); 10 echo "<br>"; 11 echo jumlah(3,5);

Perhatikan contoh function tambah di atas. Perhatikan baris 1 sampai 4. Function body dibatasi oleh sepasang tanda buka kurawal { dan tanda tutup kurawal } Function body berisi instruksi yang harus dilakukan komputer untuk menghasilkan output

yang diinginkan. Baris 2 menyuruh komputer untuk membuat satu variabel bernama z yang isinya adalah

hasil penjumlahan x dan y. x dan y didapat dari input yang diberikan user. Baris 3 menyuruh komputer untuk menampilkan hasil perhitungan ke layar. Bedakan dengan baris 7 pada function jumlah yang memerintahkan komputer untuk

menampilkan hasil perhitungan dilayar

Contoh: function_return.php

<? function luas($panjang, $lebar){ $luas = $panjang * $lebar; return($luas);



} echo "hasil perkaliannya adalah "; echo luas(5,3); ?>

Gambar 4.34 Penggunaan Return 4.11 Fungsi Built-in

Fungsi built-in adalah fungsi yang telah disediakan oleh PHP, pemrogram dapat langsung memakainya. Macam-macam fungsi built-in PHP dapat dikelompokan menjadi: 1. Fungsi untuk array dan variabel 2. Fungsi untuk matematika 3. Fungsi untuk string dan pemrosesan file 4. Fungsi untuk tanggal dan waktu 5. Fungsi Mail 6. Fungsi untuk database 7. Fungsi untuk Web dan XML

Pada halaman fungsi built-in, kali ini saya hanya membahas fungsi-fungsi umum yang sering dipakai seperti fungsi array, fungsi variabel, fungsi matematika, fungsi string, fungsi pemrosesan file, fungsi tanggal,fungsi waktu dan fungsi mail. Bila Anda ingin mengetahui lebih detail tentang fungsi PHP, Anda dapat lihat pada manual PHP (www.php.net). 4.11.1 Fungsi untuk Array dan Variabel A. empty(variabel)

Fungsi ini akan mengembalikan nilai true jika variabel dalam argument belum mempunyai nilai, dan sebaliknya false jika variabel telah diberi nilai.

Contoh: Penggunaan empty

File: form_nama.php

<html> <head>



<title>Form Nama</title> </head> <body> <form name="form1" method="post" action="fungsi_empty.php"> Masukkan Nama Anda : <input name="nama" type="text" id="nama"> <input type="submit" name="Submit" value="Submit"> </form> </body> </html>

File: fungsi_empty.php

<? $nama = $_POST["nama"]; if(empty($nama)){ echo "Tolong, isi nama Anda Segera"; } else { echo "Nama Anda adalah $nama"; } ?>

Pada file form_nama.php terdapat textbox nama dan button. Textbox tersebut bertujuan untuk menginputkan nilai nama. Jika Anda tekan button submit, maka file tersebut akan diproses ke file fungsi_empty.php. Alur program pada file fungsi_empty.php adalah apabila variabel nama terdapat nilai atau keadaan variabel nama tersebut tidak kosong maka hasil output akan keluar penyataan Nama Anda adalah (nilai variabel nama). Apabila variabel nama tidak terdapat nilai atau variabel nama dalam keadaan kosong maka hasil output akan keluar pernyataan Tolong, isi nama Anda Segera.

Gambar 4.35 Form nama



Gambar 4.36 Pengecekan nilai variabel dengan fungsi empty B. isset(variabel)

Fungsi ini akan mengembalikan nilai true jika variabel dalam argument telah memiliki nilai, dan sebaliknya false jika variabel belum diberi nilai. Fungsi ini merupakan kebalikan dari fungsi empty.

Contoh: Penggunaan isset

File: form_nama.php

<html> <head> <title>Form Nama</title> </head> <body> <form name="form1" method="post" action="fungsi_isset.php"> Masukkan Nama Anda : <input name="nama" type="text" id="nama"> <input type="submit" name="Submit" value="Submit"> </form> </body> </html>

File: fungsi_isset.php

<? $nama = $_POST["nama"]; if(isset($nama)){ echo "Nama Anda adalah $nama"; } else { echo "Tolong, isi nama Anda Segera"; } ?>



Gambar 4.37 Form nama

Gambar 4.38 Pengecekan nilai variabel dengan fungsi isset

C. is_array(expression)

Fungsi ini akan mengembalikan nilai true jika ekspresi dalam argument adalah array, dan sebaliknya false jika ekpresi dalam argument adalah bukan array.

Contoh: fungsi_is_array.php

<html> <head> <title>fungsi is_array</title> </head> <body> <? $alat = array("pena", "pensil", "penghapus", "buku", "penggaris"); if(is_array($alat)){ echo "variabel alat merupakan array"; } ?> </body> </html>



Gambar 4.39 Pengecekan suatu variabel dengan fungsi is_array

D. is_double(expression)

Fungsi ini akan mengembalikan nilai true jika nilai pada ekspresi dalam argument bertipe double, dan sebaliknya false jika nilai pada ekpresi dalam argument bukan bertipe double.

Contoh: fungsi_is_double.php

<html> <head> <title>fungsi is_double</title> </head> <body> <? $dollar = 9500.35; if(is_double($dollar)){ echo "variabel dollar bertipe double"; } ?> </body>

</html>

Gambar 4.40 Pengecekan nilai suatu variabel dengan fungsi is_double

E. is_integer(expression)



Fungsi ini akan mengembalikan nilai true jika nilai pada ekspresi dalam argument bertipe

integer, dan sebaliknya false jika nilai pada ekpresi dalam argument bukan bertipe integer.

Contoh: fungsi_is_integer.php

<html> <head> <title>fungsi is_integer</title> </head> <body> <? $total = 6500; if(is_integer($total)){ echo "variabel total bertipe integer"; } ?> </body>

</html>

Gambar 4.41 Pengecekan nilai suatu variabel dengan fungsi is_integer

F. is_string(expression)

Fungsi ini akan mengembalikan nilai true jika nilai pada ekspresi dalam argument bertipe string, dan sebaliknya false jika nilai pada ekpresi dalam argument bukan bertipe string.

Contoh: fungsi_is_string.php

<html> <head> <title>fungsi is_string</title> </head> <body> <? $lisa = "lisa adalah anak yang pandai dikelasnya"; if(is_string($lisa)){ echo "variabel lisa bertipe string"; } ?> </body>



</html>

Gambar 4.42 Pengecekan nilai suatu variabel dengan fungsi is_string

G. count(variabel array)

Fungsi ini akan mengembalikan nilai integer berupa jumlah elemen array dari argument variabel. Jika variabel belum diisi maka fungsi akan mengembalikan nilai 0. Apabila variabel bukan array, fungsi akan mengembalikan nilai 1.

Contoh: fungsi_count.php

<html> <head> <title>fungsi count</title> </head> <body> <? $alat = array("pena", "pensil", "penghapus", "buku", "penggaris"); if(count($alat)){ echo count($alat); } ?> </body>

</html>

Gambar 4.43 Menentukan jumlah elemen dari suatu variabel array



4.11.2 Fungsi untuk Matematika A. abs(number value)

Fungsi ini akan menghasilkan nilai mutlak dari nilai integer pada argument. Jika nilai pada argument bernilai positif, maka fungsi abs akan mengembalikan nilai itu sendiri. Jika nilai argument bernilai negatif, maka fungsi abs akan mengalikan argument dengan negatif satu (-1).

Contoh: fungsi_abs.php

<html> <head> <title>fungsi abs</title> </head> <body> <? echo abs(-8); ?> </body>

</html>

Gambar 4.44 Penggunaan fungsi abs

B. Double pi()

Fungsi ini mengembalikan nilai pendekatan dari phi (22/7 atau 3.14).

Contoh: fungsi_pi.php

<html> <head> <title>fungsi pi</title> </head> <body> <? echo pi(); ?>



</body> </html>

Gambar 4.45 Penggunaan fungsi pi

C. Double cos (double angle)

Fungsi ini mengembalikan bilai cosinus dari nilai sudut (dalam radian).

Contoh: fungsi_cos.php

<html> <head> <title>fungsi cos</title> </head> <body> <? echo cos(4*pi()); ?> </body>

</html>

Gambar 4.46 Penggunaan fungsi cos

D. Double sin (double angle)



Fungsi ini akan menghasilkan nilai sinus dari nilai sudut (dalam radian) pada argumen.

Contoh: fungsi_sin.php

<html> <head> <title>fungsi sin</title> </head> <body> <? echo sin(2*pi()); ?> </body>

</html>

Gambar 4.47 Penggunaan fungsi sin

E. Double tan (double angle)

Fungsi ini akan menghasilkan nilai tangen dari sudut (dalam radian) pada argumen.

Contoh: fungsi_tan.php

<html> <head> <title>fungsi tan</title> </head> <body> <? echo tan(3*pi()); ?> </body>

</html>



Gambar 4.48 Penggunaan fungsi tan

F. Double log(double value)

Fungsi ini mengembalikan nilai log dari argumen.

Contoh: fungsi_log.php

<html> <head> <title>fungsi log</title> </head> <body> <? echo log10(10000); ?> </body>

</html>

Gambar 4.49 Penggunaan fungsi log

G. Double sqrt(double value)

Fungsi ini digunakan untuk mencari nilai akar dari argumen.

Contoh: fungsi_sqrt.php



<html> <head> <title>fungsi sqrt</title> </head> <body> <? echo sqrt(144); ?> </body>

</html>

Gambar 4.50 Penggunaan fungsi sqrt H. Double round(double value)

Fungsi ini akan mengubah nilai integer pada argument (bertipe double) menjadi nilai

integer yang tedekat (pembulatan).

Contoh: fungsi_round.php

<html> <head> <title>fungsi round</title> </head> <body> <? echo round(2.3); echo "<br>"; echo round(2.7); ?> </body>

</html>



Gambar 4.51 Penggunaan fungsi round 4.11.3 Fungsi untuk String dan Pemrosesan File

Fungsi string digunakan memanipulasi string untuk berbagai macam kebutuhan. Disini akan dibahas beberapa fungsi string yang sering digunakan dalam membuat program aplikasi web. Sedangkan fungsi pemrosesan file adalah fungsi yang berhubungan dengan pemrosesan file-file PHP. Misal, menggabungkan/menyisipkan suatu script PHP atau text dari file lain dengan script PHP yang memanggilnya atau digunakan untuk membaca nilai variabel dan fungsi-fungsi dari sebuah file lain.

A. addslashes(string)

Digunakan untuk menambahkan karakter backslash ( \ ) pada suatu string. Hal ini penting digunakan pada query string untuk database, misalkan pada MySQL. Beberapa karakter yang akan ditambahkan tanda backslahses adalah karakter tanda petik satu ( ‘ ), karakter petik dua ( “ ), backslash ( \ ) dan karakter NULL.

Contoh: addslashes.php

<html> <head> <title>Fungsi AddSlashes</title> </head> <body> <?

$baca = "tanda petik satu ' akan menambahkan backslah ''' "; echo addslashes($baca); ?> </body>

</html>



Gambar 4.52 Penggunaan fungsi AddSlashes

B. stripslashes(string)

Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu string.

Contoh: stripslashes.php

<html> <head> <title>Fungsi StripSlashes</title> </head> <body> <? $baca = " \ tanda backslash akan hilang ketika di browser"; echo stripslashes($baca); ?> </body>

</html>

Gambar 4.53 Penggunaan fungsi StripSlashes

C. echo(string first, string second, … string last)



Digunakan untuk mengirim satu atau lebih parameter/argument yang dipisahkan dengan tanda baca koma ke browser.

Contoh: echo.php

<html> <head> <title>fungsi echo</title> </head> <body> <? echo "Mari berhitung ", 1, 2, 3, "...!"; ?> </body>

</html>

Gambar 4.54 Penggunaan fungsi echo

D. print(string) Fungsi ini hampir sama dengan fungsi echo, yaitu untuk mengirim output ke browser.

Bedanya string dalam parameter/argument yang dikirimkan ke browser tidak boleh dipisahkan dengan tanda baca koma, jika Anda menggunakan fungsi print seperti fungsi echo maka akan terjadi fatal error.

Contoh: print.php

<html> <head> <title>fungsi print</title> </head> <body> <? print "Mari berhitung 123...!"; ?> </body>

</html>



Gambar 4.55 Penggunaan fungsi print

E. explode(string pemisah, string yang akan dijadikan array) Digunakan untuk memecah-mecah suatu string berdasarkan tanda pemisah tertentu dan

memasukkan hasilnya kedalam suatu variabel array. Contoh: explode.php

<html> <head> <title>fungsi explode</title> </head> <body> <?

$kalimat = "saya sedang belajar ilmu php"; $kata = explode(" ",$kalimat); $jumlahArray = count($kata); for($i=0; $i<$jumlahArray; $i++){ echo "\$kata[$i] = $kata[$i]<br>"; }

?> </body>

</html>



Gambar 4.56 Penggunaan fungsi explode

F. implode(string perekat, array yang akan digabung) Kegunaan fungsi implode adalah kebalikan daripada fungsi explode. Fungsi implode

digunakan untuk menghasilkan suatu string dari masing-masing elemen suatu array. String yang dihasilkan tersebut dipisahkan oleh suatu string telah yang ditentukan sebelumnya. Misal, menggunakan tanda strip tengah (-) untuk penggabungan suatu string.

Contoh: implode.php

<html> <head> <title>fungsi implode</title> </head> <body> <?

$kalimat = "saya sedang belajar ilmu php"; $kata = explode(" ",$kalimat);

$gabung=implode("-",$kata); echo "\$gabung = $gabung"; ?> </body>

</html>

Gambar 4.57 Penggunaan fungsi implode

G. strlen(string) Digunakan untuk menghitung jumlah karakter suatu string.

Contoh: strlen.php

<html> <head> <title>Fungsi StrLen</title> </head>



<body> <? echo strlen("panjang string/karakter ini adalah"); ?> </body>

</html>

Gambar 4.58 Penggunaan fungsi StrLen

H. str_repeat(string, jumlah perulangan) Digunakan untuk mengulang isi suatu string.

Contoh: str_repeat.php

<html> <head> <title>Fungsi Str_Repeat</title> </head> <body> <? echo str_repeat(Belajar , 5); ?> </body>

</html>

Gambar 4.59 Penggunaan fungsi Str_Repeat



I. strtolower(string)

Digunakan untuk merubah suatu string menjadi huruf kecil (lowercase). Contoh: strtolower.php

<html> <head> <title>Fungsi StrToLower</title> </head> <body> <? echo strtolower("BELAJAR WEB DESIGN"); ?> </body>

</html>

Gambar 4.60 Penggunaan fungsi StrToLower

J. strtoupper(string) Digunakan untuk merubah suatu string menjadi huruf besar (uppercase) Contoh: strtoupper.php

<html> <head> <title>Fungsi StrToUpper</title> </head> <body> <? echo strtoupperr("belajar web design"); ?> </body>

</html>



Gambar 4.61 Penggunaan fungsi StrToUpper

K. substr(string, integer posisi, jumlah string) Digunakan untuk mengambil suatu sub string dengan panjang tertentu dari suatu string

pada posisi tertentu pula. Contoh: substrt.php

<html> <head> <title>Fungsi SubStr</title> </head> <body>

<? echo substr("abcdefg",0,3); echo "<br>"; echo substr("abcdefg",1,4); echo "<br>"; echo substr("abcdefg",3,2); ?>

</body> </html>

Gambar 4.62 Penggunaan fungsi SubStr



L. substr_count(string, string substring) Digunakan untuk menghitung jumlah sub string dalam suatu string.

Contoh: substrt_count.php

<html> <head> <title>Fungsi SubStr_Count</title> </head> <body>

<? echo substr_count("This is a test","is"); ?>

</body> </html>

Gambar 4.63 Penggunaan fungsi SubStr_Count

M. ucfirst(string)

Digunakan untuk mengganti karakter pertama pada suatu string menjadi huruf besar.

Contoh: ucfirst.php

<html> <head> <title>Fungsi UCfirst</title> </head> <body>

<? echo ucfirst("belajar web design"); ?>

</body> </html>



Gambar 4.64 Penggunaan fungsi UCfirst

N. ucwords(string)

Digunakan untuk mengganti karakter pertama pada setiap kata dalam suatu string menjadi

huruf besar.

Contoh: ucwords.php

<html> <head> <title>Fungsi UCwords</title> </head> <body>

<? echo ucwords("belajar web design"); ?>

</body> </html>

Gambar 4.65 Penggunaan fungsi UCwords

O. require(string filename) Fungsi Require digunakan untuk membaca nilai variabel dan fungsi-fungsi dari sebuah

file lain. Fungsi Require ini tidak dapat dimasukkan didalam suatu struktur looping misalnya



perulangan while atau for. Karena hanya memperbolehkan pemangggilan file yang sama tersebut hanya sekali saja.

Contoh: Penggunaan fungsi require File: tebal.php

<? $a="saya sedang belajar ilmu PHP"; function tulistebal($teks){ echo "<b>$teks</b>"; } ?>

File: require.php

<? require "tebal.php"; tulistebal("ini adalah tulisan tebal"); echo "<br>"; echo $a; ?>

Gambar 4.66 Penggunaan fungsi require

P. include(string filename) Fungsi Include merupakan kontruksi yang digunakan untuk menyisipkan/menggabungkan

suatu script atau file dengan script pemanggilnya. Include dapat diletakkan didalam suatu looping misalkan dalam perulangan for atau while.

Contoh: Penggunaan fungsi include File: ulang.php

<? echo "----------------------------------------------------------------<br>"; echo "PHP adalah bahasa scripting yang menyatu dengan HTML<br>"; echo "----------------------------------------------------------------<br>";



echo "<br>"; ?>

File: include.php

<? for ($b=1; $b<4; $b++){ include "ulang.php"; } ?>

Gambar 4.67 Penggunaan fungsi include

Q. require_once(string filename) Pada prinsipnya sama dengan require tapi dengan menggunakan require_once dapat

menghindari duplikat pemanggilan suatu fungsi. Contoh: Penggunaan fungsi require_once File: pilih.php <html> <head> <title>Halaman Admin</title> </head> <body>

<p align="center">Pilih Menu di Atas</p> </body>

</html>

File: halaman.php



<html> <head> <title>Halaman Admin</title> </head> <body>

<p align="center">Halaman Admin <br><br> Home | Master Data | Login | Buku Tamu <br><br> <? $halaman=$_GET[halaman]; if($halaman){ require_once($halaman.".php"); } else { require_once("pilih.php"); } ?> </p>

</body> </html>

Gambar 4.68 Penggunaan fungsi require_once

R. include_once(string filename) Kontruksi include_once ini sama dengan require_once akan tetapi pada kontruksi

include_once setiap kali selalu ada evaluasi ulang pada saat suatu perintah include terjadi pada script yang dispesifikasikan dalam include_once.

Contoh: Penggunaan fungsi include_once File: cetak.php <html> <head> <title>file cetak</title> </head> <body>



<p align="center">Ini dari file cetak.php yang di sisipkan ke file include_once.php</p>

</body> </html> File: include_once.php <html> <head> <title>include once</title> </head> <body>

<? include_once("cetak.php"); ?>

</body> </html>

Gambar 4.69 Penggunaan fungsi include_once

S. dl(modulename) Modulname adalah nama modul yang berisi fungsi yang belum disediakan dalam PHP,

disimpan dalam file library eksternal. Konstruksi dl(modulename) memungkinkan fungsi-fungsi eksternal yang belum didukung oleh PHP yang dibuat dan disimpan dalam file library tertentu yang dapat dipanggil pada saat dibutuhkan saja.

4.11.4 Fungsi untuk Tanggal dan Waktu

A. date(string format)

Fungsi date digunakan untuk mengambil tanggal dan jam. Hasil dari fungsi ini adalah sebuah string yang berisi tanggal/jam sesuai dengan format yang diinginkan. Format yang dikenal dalam fungsi date ini adalah sebagai berikut:

Tabel string format fungsi date:

Format Keterangan



a am atau pm A AM atau PM d Tanggal, format tanggal: 01 sampai 31 D Nama hari dalam seminggu (disingkat 3 digit) F Nama bulan (lengkap) g Jam, 12 jam: format jam: 1 sampai 12 (tanpa nol) G Jam, 24 jam: format jam: 0 sampai 23 (tanpa nol) h Jam, 12 jam: format jam: 01 sampai 12 H Jam, 24 jam: format jam: 00 sampai 23 i Menit, format menit: 00 sampai 59 j Tanggal, format tanggal: 1 sampai 31 (tanpa nol)

l (huruf kecil L)

Nama hari dalam seminggu (lengkap)

m Bulan dalam angka, format bulan: 01 sampai 12 M Nama bulan dalam setahun (disingkat 3 digit) n Bulan dalam angka, format bulan: 1 sampai 12 (tanpa nol) s Detik, format detik: 00 sampai 59 w Hari dalam seminggu, klasifikasi yaitu “0” (minggu) dan

untuk “6” (sabtu) Y Tahun (4 digit) y Tahun (2 digit)

Contoh: date.php

<? echo date("Y-m-d"); echo "<br>"; echo date("l, j F Y"); echo "<br>"; echo date("D, j M y"); echo "<br>"; echo date("H:i:s A"); ?>

Gambar 4.70 Penggunaan fungsi date



Contoh: tgl.php

<?php echo '<font face="Verdana, Arial, Helvetica, sans-serif" size="2">'; function tanggal_hari_ini(){ $hari=date(w,time()); $tanggal=date(d,time()); $bulan=date(m,time()); $tahun=date(Y,time()); switch ($hari) { case 0: $hari="Minggu"; break; case 1: $hari="Senin"; break; case 2: $hari="Selasa"; break; case 3: $hari="Rabu"; break; case 4: $hari="Kamis"; break; case 5: $hari="Jum'at"; break; case 6: $hari="Sabtu"; break; } switch ($bulan) { case 01: $bulan="Januari"; break; case 02: $bulan="Februari"; break; case 03: $bulan="Maret"; break; case 04: $bulan="April"; break; case 05: $bulan="Mei"; break; case 06: $bulan="Juni"; break; case 07: $bulan="Juli"; break; case 08: $bulan="Agustus"; break; case 09: $bulan="September"; break; case 10: $bulan="Oktober"; break; case 11: $bulan="November"; break; case 12: $bulan="Desember"; break; } echo "<b>Format Tanggal Indonesia</b> <br>Ini Hari $hari<br>Tanggal $tanggal $bulan $tahun"; } tanggal_hari_ini(); ?>



Gambar 4.71 Pemanfaatan fungsi date

B. getdate(integer timestamp) Fungsi getdate digunakan untuk menghasilkan waktu dengan keluaran bertipe array. Argument timestamp bersifat opsional. Daftar elemen array getdate dapat dilihat dalam tabel dibawah ini: Tabel index elemen array fungsi getdate:

Elemen Keterangan hours Jam mday Hari

minutes Menit mon Bulan dalam 3 digit

month Bulan seconds Detik wday Hari dalam 3 digit

weekday Hari yday Hari ke- dari tahun year Tahun

Contoh: getdate.php <html> <head> <title>Ucapan Selamat</title> </head> <body>

<? $waktu = getdate(); if($waktu[hours] <= 9){ echo "Selamat Pagi"; } elseif($waktu[hours] <= 14){ echo "Selamat Siang"; } elseif($waktu[hours] <= 19){ echo "Selamat Sore"; } else {



echo "Selamat Malam"; } ?>

</body> </html>

Gambar 4.72 Penggunaan fungsi getdate 4.11.5 Fungsi Mail

Digunakan untuk mengirimkan e-mail ke alamat e-mail tertentu.

Sintaks:

mail(string tujuan, string subject, string isi, string header);

Contoh: $header = "From: [email protected]"; $tujuan = "[email protected]"; $subject = "Pemberitahuan"; $isi = "Ini adalah percobaan pengiriman e-mail dengan menggunakan PHP"; mail($tujuan,$subject,$isi,$header);

Fungsi mail di atas hanya dapat berjalan apabila anda terkoneksi dengan internet. Bila Anda tidak terkoneksi dengan internet lalu anda menajalankannya di localhost maka akan muncul peringatan “Failed to connect to mailserver…. Oleh karena itu untuk mencobanya, sebaiknya Anda men-hosting file mail di hosting gratis saja. Jika fungsi mail tersebut berhasil, pesan tersebut biasanya tidak langsung terkirim.Biasanya ada delay 10-15 menit). 4.12 String Handling

String handling adalah kumpulan function PHP yang berguna untuk memanipulasi string. Ada banyak kegunaan yang bisa didapat dengan menggunakan fungsi-fungsi ini, misalnya: Pencarian kata dalam website Pemeriksaan user input



Memformat file untuk keperluan khusus (misalnya email). Dan sebagainya

Untuk dapat menggunakan fungsi-fungsi string handling dengan baik, kita perlu menguasai teknik pembuatan pola kalimat. Contoh pola kalimat misalnya, alamat email yang valid (misalnya [email protected]) selalu memiliki pola sebagai berikut: Satu atau lebih huruf/angka, diikuti tanda @ kemudian diikuti dengan Satu atau lebih huruf/angka, dipisahkan oleh tanda titik, lalu diakhiri dengan satu atau

lebih huruf/angka. Pola tersebut, dapat dinyatakan dengan seperangkat kode sebagai berikut:

Pola Kode Harus diawal kata ^ Huruf A-Za-z Angka 0-9 Huruf atau angka [A-Za-z0-9] Semua jenis karakter . Berjumlah satu atau lebih + atau {1,} Berjumlah nol atau lebih * atau {0,} Berjumlah tiga sampai sepuluh {3,10} Diikuti dengan @ @ Tanda titik ¥. Harus berada diakhir kalimat $

Pola alamat email di atas dapat dinyatakan dengan satu baris kode sebagai berikut:

^.+@.+\..+$

Atau kita dapat membatasi alamat email yang digunakan oleh user agar hanya menerima

domain com, net, atau edu dengan menggunakan pola berikut:

^.+@.+\.((com)|(edu)|(net))$

Contoh: Penggunaan String Handling File: cek.php <html> <head> <title>Cek email dan telepon</title> </head> <body>

<p>CEK EMAIL DAN TELEPON</p> <form name="form1" method="post" action="validasi.php"> <p>Email :</p> <p><input name="email" type="text" id="email"></p> <p>Telp :</p> <p><input name="telp" type="text" id="telp"></p> <p> <input type="submit" name="Submit" value="CEK">



</p> </form>

</body> </html>

File: cek.php

<? $email = $_POST['email']; $telp = $_POST['telp']; if(!preg_match("/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+/",$_POST['email'])){ echo "<script>alert('Invalid Alamat Email..! Coba

Lagi..!');window.location='cek.php';</script>"; } elseif(!preg_match("/^([0-9])+/",$_POST['telp'])){ echo "<script>alert('Invalid No Telepon Coba

Lagi..!');window.location='cek.php';</script>"; } else { echo "<script>alert('TRUE..!');window.location='cek.php';</script>"; } ?>

Gambar 4.73 Form cek email dan telepon

Gambar 4.74 Kotak pesan TRUE menandakan bahwa cek email dan telp valid (tidak bermasalah)



Gambar 4.75 Kotak pesan Invalid Alamat Email menandakan bahwa email invalid (bermasalah)

Gambar 4.76 Kotak pesan Invalid No Telepon menandakan bahwa no telepon invalid (bermasalah)

Alur dari program diatas yaitu, apabila Anda memasukkan data email dan telepon valid

maka akan keluar kotak pesan TRUE. Apabila email dan telepon invalid maka akan keluar kotak pesan invalid alamat email dan invalid telepon. 4.13 Pengolahan Data dari FORM

Data yang dituliskan oleh user akan dikirimkan ke server jika user mengklik tombol submit. Data akan dikirim sebagai bagian dari string url atau bisa juga secara terpisah. Atribut method pada tag form mempunyai dua pilihan nilai yaitu method get dan method post.

GET Method ini menyebabkan data yang dikirimkan ke server disatukan dengan string URL.

URL yang dituliskan pada address IE(Internet Explorer) akan menampilkan data isi-an pada form. Teknik ini umum digunakan sebagai model passing parameter kepada URL yang berfungsi sebagai script. Kelebihannya yaitu mudah untuk memasukkan nilai untuk melakukan query kepada situs, kekurangannya data yang digunakan sebagai method tertampilkan (seharusnya parameter tersembunyi) dan tidak dapat digunakan untuk pengiriman ke server web dengan jumlah besar.

POST



Method post akan memisahkan data yang diisikan oleh pengunjung dengan string URL-nya pada saat mengirimkan kepada server dan data yang dikirimkan dapat lebih besar jumlahnya dibanding dengan method get.

4.14 PHP dengan MySQL A. Koneksi (mysql_connect) merupakan perintah koneksi yang digunakan untuk membuat koneksi

antara ke server basis data Mysql. Sedangkan (mysql_select_db) merupakan perintah koneksi yang digunakan untuk membuat koneksi dengan database yang dipilih. Sintak:

$conn = mysql_connect($hostname,$username,$password); mysql_select_db(nama_database,$conn);

Contoh:

$conn = mysql_connect('localhost','root','2727'); mysql_select_db('perpus',$conn);

B. Query Perintah-perintah query atau SQL, nantinya akan digunakan untuk memanipulasi data.

Perintah yang umum untuk manipulasi data seperti: menambah/memasukkan, menghapus, mengedit, dan lain sebagainya.

Sintaks:

mysql_query($query);

Perintah-perintah SQL dasar sebagai berikut: A. Create Membuat database. Sintaks:

create database nama_database; create table nama_tabel;

Contoh:

create database perpus; create table buku;



Membuat tabel serta atributnya. Sintaks:

(nama_filed type(length) not null/null, nama_filed type(length) not null/null);

Contoh:

(kode_buku int(6) NOT NULL, judul varchar(60) NOT NULL, jenis varchar(20) NOT NULL, penerbit varchar(30) NOT NULL, penulis varchar(30) NOT NULL, harga int(6) NOT NULL);

B. Select Menampilkan seluruh field yang ada pada tabel. Sintaks:

select * from nama_tabel; Contoh: select * from buku; Menampilkan data field yang diinginkan secara keseluruhan. Sintaks:

select nama_field1,nama_field2… from nama_tabel; Contoh: select kode_buku,judul,jenis,penerbit,penulis,harga from buku; Menampilkan data field yang diinginkan secara keseluruhan dengan syarat yang telah ditentukan. Sintaks:

select nama_field from nama_tabel where nama_field="kondisi"; Contoh:

select * from buku where jenis = "novel";

C. Insert Menambah/memasukkan data ke dalam tabel.



Sintaks:

insert into nama_tabel (field1,field2,…) values ("nilai1","nilai2,…); Contoh: insert into buku (kode_buku,judul,jenis) values ('".$_POST['kode_buku']."',

'".$_POST['judul']."."', '".$_POST['penerbit']."."');

D. Update Meng-update date suatu field dalam suatu tabel. Sintaks:

update nama_tabel set field1="nilai1", field2="nilai2"… where field="kondisi";

Contoh: update buku set kode_buku='".$_POST['kode_buku']."', judul='".$_POST['judul']."',

where id='".$_GET['id']."';

E. Delete Menhapus data/record dari suatu tabel. Sintaks:

delete from nama_tabel where kriteria; Contoh: detele from buku where id='".$_GET['id']."';

F. Counter dengan MySql mysql_error() = digunakan untuk memeriksa apabila kondisi error. mysql_num_rows() = digunakan untuk memeriksa kondisi hasil query secara baris

perbaris pada tabel. mysql_fetch_array() = digunakan untuk membaca hasil query secara baris perbaris

dengan konsep array, jadi peletakannya harus berurutan dengan field yang ada pada tabel.

mysql_fetch_object() = digunakan untuk membaca hasil query secara baris perbaris dengan berpatokan pada object yang digunakan pada tabel.

4.15 Session



PHP mempunyai session (catatan aktivitas) yang digunakan untuk menjaga/memelihara informasi akses dari seseorang pengakses/pemakai aplikasi web. Session memungkinkan pelacakan akses pemakaian, pengaturan pemakaian aplikasi oleh pemakai, dan meningkatkan layanan situs web.Fasilitas session ini ada sejak PHP versi 4.0.

Setiap pengunjung akan diberi sebuah id yang unik, yang disebut dengan id session

(session_id). Id ini dapat disimpan dalam suatu cookie pada sisi user atau disertakan pada URL.

Dukungan session memungkinkan kita untuk mencatat sejumlah variabel untuk

digunakan antar permintaan (request). Pada saat seorang pengunjung mengakses situs web kita, PHP akan melakukan pemeriksaan secara otomatis (jika session.auto_start bernilai 1) atau pada request (secara eksplisit melalui session_start) atau (implisit melalui session_register), apakah id session telah dikirim atau belum bersamaan dengan request.

Session koneksi antara klien dan server akan hilang atau putus apabila browser ditutup

(selesai menggunakan browser). Apabila browser dijalankan kembali dan koneksi kepada server dilakukan maka dianggap sebagai koneksi baru.

Perintah session selalu paling atas dari script, tidak boleh ada perintah yang melakukan

penulisan apapun sebelum perintah session selesai dijalankan. Contoh: Pemanfaatan session untuk login File: login.php <html> <head> <title>Login</title> </head> <body> <table width="250" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div align="center"><span class="admin">LOGIN</span> <br><br><br> <form name="form1" method="post" action="proses_login.php"> <table width="0" border="0" cellspacing="2" cellpadding="2"> <tr align="left" valign="top"> <td class="kiri">Username</td> <td class="kiri">:</td> <td><input name="user" type="text" class="isi" id="user"></td> </tr> <tr align="left" valign="top"> <td class="kiri">Password</td> <td class="kiri">:</td> <td><input name="pass" type="password" class="isi"

id="pass"></td> </tr> <tr align="left" valign="top"> <td class="kiri"> </td> <td class="kiri"> </td> <td><input name="Submit" type="submit" class="isi"

value="Login"></td>



</tr> </table> </form> </div></td> </tr> </table> </body> </html>

Gambar 4.77 Form Login

File: proses_login.php <? session_start(); $pass=$_POST['pass']; if($pass=='123'){ $_SESSION['masuk']=1; } if($_SESSION['masuk']>0){ header("Location: admin.php"); } else { echo "<script>alert('Invalid Password');window.location='login.php';</script>"; } ?> File: admin.php <? session_start(); if($_SESSION['masuk']>0){ ?> <html> <head> <title>Halaman Admin</title> </head> <body>



<p align="center">Halaman Admin <br><br> Home | Master Data | Login | Buku Tamu <br><br> <a href="proses_logout.php">Logout</a> </p> </body> </html> <? } else { echo "<script>alert('Anda Tidak Berhak Mengakses Halaman Administrator'); window.location='login.php';</script>"; } ?>

Gambar 4.78 Tampilan file admin.php

File: proses_logout.php <? session_start(); include'config.php'; $_SESSION['masuk']=0; header("Location: login.php"); ?> Alur dari program diatas yaitu, apabila password yang dimasukkan sama dengan kode

123, maka file admin.php dapat diakses(dibuka). Apabila password yang dimasukkan tidak sama dengan kode 123, maka secara otomatis akan keluar kotak pesan invalid password dan kembali ke file login.php. Untuk keluar dari file admin.php, Anda wajib mengklik menu logout. Jika tidak di logout halaman admin tersebut dapat diakses sembarangan orang. Setelah Anda klik menu logout maka secara otomatis akan kembali ke tampilan file login.php.



Gambar 4.79 Memasukkan password dengan kode 123

Gambar 4.80 Kotak pesan tersebut keluar karena password yang dimasukkan tidak sama dengan kode 123

4.16 Cookie

Cookie merupakan fasilitas seperti halnya session, cookie merupakan mekanisme untuk menyimpan data pada web browser. Dengan cookie Anda dapat melakukan pelacakan atau mengidentifikasi user yang berkunjung ke website Anda.

Cookie atau data kecil dari server yang disimpan dalam browser sifatnya temporer seperti halnya session. Setiap cookie yang dikirimkan dari web server ke web browser secara otomatis akan dianggap sebagai variabel PHP. Cookie secara default akan hilang apabila browser ditutup (close). Seperti halnya session maka perintah untuk membuat cookies harus dilakukan pertama kali, sebagai perintah pertama dalam script kita.

Cookie dapat diset dengan menggunakan fungsi setcookie(). Fungsi setcookie()

merupakan bagian dari HTTP header, sehingga fungsi setcookie() harus dipanggil sebelum ada output yang dikirimkan ke web browser, atau dengan kata lain cookie harus dikirimkan sebelum tag<html>.

Sintaks fungsi setcookie():

Setcookie("namacookie","data_nilai",masaberlaku,"path","domain",



secure) Keterangan: namacookie : Nama cookie yang diinginkan. data-nilai : Data untuk cookie. masa berlaku : Waktu berlakunya cookie dalam hitungan detik, dari jam sekarang

ditambah dengan berapa detik. Data berupa integer tanggal. Path : Nama path yang valid untuk berlakunya suatu cookie. Jika script berbeda

path dengan script yang melakukan pendefinisian cookie, maka cookie bisa jadi tidak berlaku.

Domain : Nama domain yang digunakan untuk membuat proses kirim-mengirim cookies dilakukan apabila pada domain yang benar (membatasi domain).

Secure : Digunakan agar proses pengiriman cookies dilakukan pada mode koneksi yang secure (aman). Data berupa interger.

Contoh: cookie.php <? $pengunjung++; setcookie("pengunjung",$pengunjung); echo "Anda pengunjung ke "; echo "$pengunjung"; ?>

Gambar 4.81 Saat file cookie.php diakses pertama kali

Contoh di atas menjelaskan penggunaan cookie. Setiap kali script di atas dieksekusi maka akan menambah nilai pada variabel $pengunjung.



Mengenal Macromedia Dreamweaver MX 2004

Dreamweaver merupakan salah satu jenis paket aplikasi design web virtual yang dapat digunakan untuk membuat halaman web secara WYSIWYG (What You See Is What You Get), yaitu kombinasi antara tampilan design dan tampilan kode. Selain Dreamweaver masih banyak aplikasi yang menawarkan pembuatan web secara WYSIWYG, seperti halnya Frontpage, Netcape Composer, dll. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX 2004 mendukung pula PHP, ColdFusion, ASP.NET dan lain sebagainya.

Pada bab ini kita akan membahas Pengenalan tentang aplikasi program Macromedia

Dreamweaver MX 2004. walaupun yang dibahas tidak begitu detail, namun diharapkan para pembaca tidak begitu awam mengenal Dreamwever. 5.1 Lingkungan Kerja Macromedia Dreamweaver MX 2004

Gambar 5.1 Lingkungan kerja Macromedia Dreamweaver MX 2004

5.1.1 Komponen Utama



1. Title Bar secara garis besar merupakan baris judul dari program yang sedang aktif. Pada title bar terdiri dari kontrol menu box, nama aplikasi yang sedang aktif juga dilengkapi dengan tiga tombol kontrol.

Gambar 5.2 Bagian Title Bar

Gambar 5.3 Kontrol menu box

Berikut adalah kontrol menu bar: a. Restore

Digunakan untuk mengembalikan ukuran jendela aplikasi Dreamweaver ke ukuran semula, setelah sebelumnya terjadi perubahan ukuran jendela aplikasi.

b. Move Menu ini akan aktif apabila tampilan jendela aplikasi Dreamweaver tidak pada kondisi full screen dan digunakan untuk memindahkan jendela aplikasi sesuai keinginan.

c. Size Menu ini akan aktif apabila tampilan jendela aplikasi Dreamweaver tidak pada kondisi full screen dan digunakan untuk merubah ukuran jendela aplikasi sesuai keinginan.

d. Minimize atau klik tombol Digunakan untuk menyembunyikan jendela aplikasi di dalam taskbar. Klik nama aplikasi yang ada di dalam taskbar, untuk menampilkan kembali aplikasi Dreamweaver ke ukuran semula.

e. Maximixe atau klik tombol Digunakan untuk merubah ukuran jendela aplikasi Dreamweaver menjadi satu layar penuh.

f. Close atau klik tombol Digunakan untuk menutup jendela aplikasi Dreamweaver.

2. Menu Bar merupakan bagian yang berisi daftar menu perintah.



Gambar 5.4 Menu Bar

Berikut adalah menu-menu yang terdapat pada Dreamweaver MX 2004: a. File Berkaitan dengan file seperti membuat file baru, menyimpan, membuka, export,

import, convers, dan cetak kode. b. Edit Menu editing secara umum seperti undo, redo, cut, copy, paste, serta untuk mengatur

preferences Dreamweaver. c. View Digunakan untuk mengatur tampilan dokumen seperti tampilan design, code, design

dan code, layout view, dan standard view. d. Insert Berkaitan dengan tombol-tombol yang berfungsi untuk membuat dan menyisipkan

objek ke dalam dokumen, seperti tabel, form, image dll. e. Modify Berhubungan dengan modifikasi object, seperti modifikasi tabel, image, frameset,

selection properties, library, dan templetes. f. Text Berhubungan dengan pengaturan teks, seperti jenis teks, align teks, warna teks,

ukuran teks, dan style teks. g. Commands Berhubungan dengan command (perintah). Misalnya perintah untuk mengedit list

command, Anda tinggal klik saja perintah edit command list pada menu commands. h. Site Menu ini berkaitan dengan pengaturan site. i. Window Digunakan untuk mengatur/menampilkan window. j. Help Untuk menampilkan help, informasi tentang Dreamweaver serta terdapat tutorial

Dreamweaver.

3. Insert Bar terdiri dari beberapa macam icon untuk memasukkan berbagai macam objek web seperti gambar, layer, Flash movie, tabel, atau elemen lain. Insert Bar ini serupa dengan menu Insert pada menu bar. Untuk memunculkan Insert Bar, klik Windows>Insert atau tekan Ctrl-F2. Insert Bar ini juga terdiri dari beberapa tab-tab yang masing-masing terdiri dari beberapa icon yang berkesesuaian.

4. Tool Bar merupakan sekumpulan gambar/simbol yang mewakili suatu perintah dalam menu. Salah satu perintah yang ada di Tool Bar seperti perintah untuk mengubah tampilan dari design/visual view, code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser.



Gambar 5.5 Tool Bar Dokumen Berikut penjelasan beberapa icon-icon yang terdapat pada Tool Bar: a. Show Code View Untuk menampilkan dokumen dalam bentuk tampilan kode saja. b. Show Code And Design Views Untuk menampilkan dokumen dalam bentuk tampilan kode dan designnya secara

bersamaan. c. Show Design View Untuk menampilkan dokumen dalam bentuk tampilan design saja. d. Live Data View Untuk mengatur atau melihat setting-an server yang sudah dibuat waktu pertama kali

manage site. e. Document Title Untuk memberikan judul pada dokumen. f. Found 2 Browser Errors Untuk menemukan dua kesalahan script pada dokumen jika di browser. g. File Management Untuk manajemen file-file yang ada pada panel files. h. Preview/Debug in Browser Untuk melihat tampilan awal(preview) atau kesalahan(debug) dokumen. i. Refresh Design View Untuk merefresh tampilan design view. j. View Options Untuk memberikan objek tambahan bantuan pada dokumen, seperti ruler(garis bantu

dokumen), grid(garis berpetak-petak di dalam dokumen), dll. 5. Dokumen adalah tempat di mana Anda dapat membuat halaman web secara visual, kode,

atau keduanya. 6. Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX 2004. 7. Tag Selection menampilkan parent tag HTML yang mengatur teks/object yang terseleksi.

Klik salah satu tag untuk memberikan highligt (garis terang) pada elemen di dalam dokumen window.

8. Property Inspector menampilkan property dari objek yang kita pilih di dalam dokumen. 9. Windows Size Pop-up memungkinkan pengaturan ulang (resize) dokumen window yang

aktif. Disebelah kanan kotak window size pop-up menu terdapat kotak estimasi ukuran dokumen dan waktu yang dibutuhkan untuk download, termasuk juga semua file yang yang terkait seperti image dan media lainnya.



Gambar 5.6 Window size pop-up 5.1.2 Bekerja dengan Design View

Design view mempresentasikan dokumen secara virtual. Untuk versi Dreamweaver MX 2004, pada saat bekerja dengan design view, terdapat tiga tampilan yang bisa dipilih yaitu layout mode, standard mode dan expanded tables mode. Default design view sama dengan tampilan standard mode.

1. Langkah-langkah untuk menampilkan layout mode:

- Klik menu View > Table Mode > Layout Mode atau - Klik icon Layout Mode yang terdapat pada panel insert di tab view atau. - Tekan Ctrl+F6.

Gambar 5.7 Tampilan Layout Mode

2. Langkah-langkah untuk menampilkan standard mode: - Klik menu View > Table Mode > Standard Mode atau - Klik icon Standard Mode yang terdapat pada panel insert di tab view.

Gambar 5.8 Tampilan Standard Mode



3. Langkah-langkah untuk menampilkan expanded tables mode: - Klik menu View > Table Mode > Expanded Tables Mode atau - Klik icon Expanded Table Mode yang terdapat pada panel insert di tab view atau. - Tekan F6.

Gambar 5.9 Tampilan Expended Table Mode 5.1.3 Bekerja dengan Code View

Pada saat membuat/bekerja dengan dokumen. Macromedia Dreamweaver MX 2004 secara otomatis memberikan dasar source code HTML untuk memudahkan mengedit/menggunakan code tersebut. Anda dapat menggunakan fasilitas yang disediakan Macromedia Dreamweaver yaitu code editor. Fasilitas ini terdiri dari code view dan code inspector. Code view dan code inspector mempunyai teknik kerja yang sama. Perbedaan antar keduanya hanya terletak pada tampilan, dimana code inpector tampil dengan jendela yang terpisah.

Pada saat menambah/mengubah isi di dalam design view, Dreamweaver secara otomatis

akan menampilkan perubahan di dalam code view maupun code inspector. Keuntungan yang bisa diambil pada cara tersebut adalah dengan menjadikan code view dan code inspector sebagai sarana untuk menghafal/mempelajari HTML apabila user belum berpengalaman dengan HTML. Dan juga bisa dijadikan sebagai sarana untuk mengingat sintaks-sintaks/value untuk tag atau attribut tertentu.

1. Langkah-langkah untuk menampilkan code view: - Klik menu View > Code atau. - Klik icon Show Code View yang terdapat pada Tool Bar.



Gambar 5.10 Tampilan Code View

2. Sedangkan untuk menampilkan design dan code view secara bersamaan dalam satu tampilan window yaitu: - Klik menu View > Code and Design atau. - Klik icon Show Code and Design views yang terdapat pada Tool Bar.

Gambar 5.11 Tampilan Code and Design Views

3. Langkah-langkah untuk menampilkan code inspector: - Klik menu Window > Code Inspector.



Gambar 5.12 Tampilan Code Inspector 5.2 Insert Bar

Insert Bar terdiri dari beberapa macam icon untuk memasukkan berbagai macam objek web seperti gambar, layer, Flash movie, tabel, atau elemen lain. Insert bar ini juga terdiri dari beberapa tab-tab yang masing-masing terdiri dari beberapa icon yang berkesesuaian. Pada versi Macromedia Dreamweaver MX 2004, secara default insert bar mempunyai 9 kategori yaitu Common, Layout, Forms, Text, HTML, PHP, Application, Flash element, dan yang terakhir Favorites. Berikut ini adalah keterangan penggunaan Insert Bar di dalam dokumen.

Untuk menampilkan dan menyembunyikan Insert Bar, klik menu Window > Insert

(Ctrl+F12). Untuk menyisipkan objek, klik salah satu tab pada Insert Bar sehingga muncul deretan

icon objek sesuai tipe tab yang dipilih. Kemudian klik objek yang diinginkan. Seperti objek table pada tab Common, objek text field pada tab Forms, dan seterusnya.

Untuk berpindah kategori, Anda tinggal klik saja tab-tab yang berada di bagian atas Insert Bar sesuai kebutuhan.

Gambar 5.13 Insert Bar 5.2.1 Tab Common

Tab Common berisikan icon objek untuk membuat dan menyisipkan objek yang paling sering digunakan didalam dokumen, seperti gambar, tabel, tanggal, link email dst. Tabel daftar icon pada Tab Common:

Item Keterangan Hyperlink Untuk memberikan link pada objek, text yang digunakan. Email link Untuk menempatkan link e-mail pada titik insertasi. Named Anchor Untuk menempatkan named anchor pada titik insertasi. Table Untuk menempatkan tabel pada titik insertasi. Image Untuk menyisipkan image pada titik insertasi tempat kursor berada. Media Untuk memilih spesial media, seperti media flash, flash button, flash

text, media shockwave, dst. Kemudian menempatkannya pada titik



insertasi. akan dibahas pada tabel media). Date Untuk menempatkan tanggal pada titik insertasi. Comment Untuk menyisipkan komentar di HTML pada titik insertasi. Templates Untuk menyimpan dokumen sebagai file template dan menyisipkan

berbagai macam area ke dalam file template. Tag Chooser Untuk memilih tag yang akan disisipi, dari hirarki tag yang sudah

dikategorikan. Tabel Media:

Item Keterangan Flash Untuk menyisipkan Flash movie pada titik insertasi. Flash Button Untuk menempatkan objek-objek tombol Flash pada titik insertasi. Flash Text Untuk menempatkan objek-objek teks Flash pada titik insertasi. Shockwave Untuk menyisipkan Macromedia Shockwave movie pada titik

insertasi. Applet Untuk menempatkan Java applet pada titik insertasi. Param Untuk menempatkan tag param pada titik insertasi. ActiveX Untuk menempatkan control ActiveX pada titik insertasi. Plugin Untuk menyisipkan suatu file yang membutuhkan Netcape plugin agar

dapat dimainkan. 5.2.2 Tab Layout

Tab Layout berisikan icon objek untuk membuat layout halaman, seperti standard mode, layout mode, dan expanded tables mode dst. Tabel daftar icon pada Tab Layout:

Item Keterangan Table Untuk menyisipkan tabel pada titik insertasi. Insert Div Tag Untuk memasukan div tag CSS Styles yang sudah Anda buat

sebelumnya di CSS Styles. Draw Layer Untuk membuat layer. Standard Mode Untuk menampilkan tabel sebagai grid(garis yang terputus-putus). Expanded Mode Untuk menampilkan tabel dengan mempertegas garis tabel. Layout Mode Untuk menampilkan tabel sebagai kotak yang dapat di-drag, diatur

ulang ukurannya. Layout table Icon ini akan aktif, jika design dalam tampilan layout mode. Layout

table digunakan untuk membuat tabel pada tampilan layout mode. Draw layout cell Icon ini akan aktif, jika design dalam tampilan layout mode. Untuk

membuat sel didalam tabel. Insert Row Above Icon ini akan aktif, jika kursor berada di dalam tabel. Insert row above

digunakan untuk menyisipkan tabel bagian baris di atas. Insert Row Below Icon ini akan aktif, jika kursor berada di dalam tabel. Insert row below

digunakan untuk menyisipkan tabel bagian baris di bawah. Insert Column to the Left

Icon ini akan aktif, jika kursor berada di dalam tabel. Insert column to the left digunakan untuk menyisipkan tabel bagian kolom di sebelah kiri.



Insert Column to the Right

Icon ini akan aktif, jika kursor berada di dalam tabel. Insert column to the right digunakan untuk menyisipkan tabel bagian kolom di sebelah kanan.

Frames Untuk memilih berbagai macam frame, seperti left frame, right frame, top frame, dst. Kemudian menempatkannya di dalama dokumen HTML.

Tabular Data Untuk mengimport data dalam bentuk tabel. 5.2.3 Tab Forms

Tab Forms berisikan icon objek untuk membuat form dan menyisipkan elemen-elemen form. Tabel daftar icon pada Tab Forms:

Item Keterangan Forms Untuk menyisipkan forms pada titik insertasi. Text Field Untuk menempatkan kotak teks pada titik insertasi. Hidden Field Untuk menempatkan kotak teks yang tersembunyi pada titik insertasi. Text Area Untuk menempatkan n kotak teks panjang pada titik insertasi. Checkbox Untuk menempatkan checkbox pada titik insertasi. Radio Button Untuk menempatkan kontrol korespondensi pada titik insertasi. Radio Group Untuk menempatkan tombol radio pada titik insertasi. List/Menu Untuk menempatkan list atau menu pop-up pada titik insertasi. Jump Menu Untuk menempatkan menu pop-up URL pada titik insertasi. Image Untuk menempatkan kotak image(gambar) pada titik insertasi. File Field Untuk menempatkan kotak file pada titik insertasi. Button Untuk menempatkan tombol pada titik insertasi. Secara default, nama

tombol yaitu submit. Label Untuk menyediakan cara yang secara struktur berasosiasi dengan label

teks. Fieldset Untuk menyimpan tag bagi logical group dari berbagai elemen form.

5.2.4 Tab Text

Tab Text berisikan icon objek yang berfungsi untuk melakukan editing teks dan memformat teks. Tabel daftar icon pada Tab Text:

Item Keterangan Font Tag Editor Untuk mengatur type font dan menyisipkan tag tersebut pada titik

insertasi. Bold Untuk mengatur teks menjadi tebal. Italic Untuk mengatur teks menjadi miring. Strong Untuk mengatur teks menjadi tebal. Fungsi ini sama dengan bold. Emphasis Untuk mengatur teks menjadi miring. Fungsi ini sama dengan italic. Paragraph Untuk membuat paragraf. Block Qoute Untuk membuat kalimat/paragraf menjorok kedalam.



Preformatted Text Untuk menampilkan teks sama seperti yang Anda ketikan di dokumen HTML.

Heading 1 Untuk membuat judul atau sub judul pada dokumen (level 1). Heading 2 Untuk membuat judul atau sub judul pada dokumen (level 2). Heading 3 Untuk membuat judul atau sub judul pada dokumen (level 3). Unordered List Untuk menampilkan data dalam bentuk daftar dengan format bullet. Ordered List Untuk menampilkan data dalam bentuk daftar dengan format nomor. List Item Untuk menampilkan data dalam bentuk daftar (list). Definition List Untuk menentukan daftar definisi. Definition Term Untuk menentukan definition term (istilah definisi). Definition Description

Untuk menentukan uraian definisi.

Abbreviation Untuk membuat singkatan dari teks. Acronym Untuk membuat singkatan dari teks. Characters Untuk memilih jenis simbol yang digunakan, seperti simbol copyright,

trademark, tanda petik, dst. Kemudian menempatkannya pada titik insertasi (akan dibahas pada tabel characters).

Tabel Characters:

Item Keterangan Line Break (Shift+Enter)

Untuk memberikan spasi (pemisah) baris pada titik insertasi.

Nonbreaking Space

Untuk memberikan spasi (pemisah) jarak pada titik insertasi.

Left Quote Untuk memberikan tanda kutip awal pada titik insertasi. Right Quote Untuk memberikan tanda kutip akhir pada titik insertasi. Em-Dash Untuk memberikan em dash (garis hubung) pada titik insertasi. Pound Untuk menempatkan simbol mata uang Pound pada titik insertasi. Euro Untuk menempatkan simbol mata uang Euro pada titik insertasi. Yen Untuk menempatkan simbol mata uang Yen pada titik insertasi. Copyright Untuk menempatkan simbol copyright (simbol hak cipta) pada titik

insertasi. Registered Trademark

Untuk menempatkan simbol registered-trademark pada titik insertasi.

Trademark Untuk menempatkan simbol trademark pada titik insertasi. Other Characters Untuk memilih spesial karakter, seperti ‰, Ø, dan Æ kemudian

menempatkannya pada titik insertasi. 5.2.5 Tab HTML

Tab HTML berisikan icon objek berupa tag-tag yang berhubungan dengan HTML. Seperti horizontal ruler, head:meta, head:keywords dst. Tabel daftar icon pada Tab HTML:

Item Keterangan Horizontal Ruler Untuk menyisipkan garis horisontal tiga dimensi di dalam dokumen

HTML pada titik insertasi.



Head Untuk memilih berbagai elemen head, seperti meta, keywords, base tags, dst. Kemudian menempatkannya pada titik insertasi (akan dibahas pada tabel head).

Tables Untuk memilih tag yang berkaitan dengan tabel, seperti table row, table headre, dst. Kemudian menempatkannya pada titik insertasi.

Frames Untuk memilih struktur frameset. Kemudian menempatkannya di dalam dokumen HTML

Script Untuk memilih berbagai elemen-elemen yang berhubungan dengan script, seperti Java script, dst. Kemudian menempatkannya di dalam dokumen HTML (akan dibahas pada tabel script).

Tabel Head:

Item Keterangan Meta Untuk menyisipkan meta tag ke dalam kolom head. Keywords Untuk menyisipkan keyword meta tag ke dalam kolom head. Description Untuk menyisipkan description meta tag ke dalam kolom head. Refresh Untuk menyisipkan refresh meta tag ke dalam kolom head. Base Untuk menyisipkan base meta tag ke dalam kolom head. Link Untuk menyisipkan link tag ke dalam kolom head.

Tabel Script:

Item Keterangan Script Untuk menyisipkan script pada titik insertasi. Server-Side Include

Untuk menempatkan server side include pada titik insertasi. (Server-Side-Include adalah instruksi pada server untuk menyertakan file yang sudah dispesifikasikan pada dokumen yang aktif sebelum mengirimkan dokumen kepada user).

Noscript Untuk menyisipkan bagian yang di dalamnya tidak terdapat script. 5.2.6 Tab PHP

Tab PHP berisikan icon objek berupa script/code/tag-tag yang berhubungan dengan PHP. Seperti session variables, cookie variables, include, require, dst. Tabel daftar icon pada Tab PHP:

Item Keterangan Form Variables Untuk menyisipkan script $_POST[]; pada code block yang

diinginkan. URL Variables Untuk menyisipkan script $_GET[]; pada code block yang

diinginkan. Session Variables Untuk menyisipkan script $_Session[]; pada code block yang

diinginkan. Cookie Variables Untuk menyisipkan script $_Cookie[]; pada code block yang

diinginkan. Include Untuk menyisipkan script include(); pada code block yang

diinginkan.



Require Untuk menyisipkan script require(); pada code block yang diinginkan.

PHP Page Encoding

Untuk menyisipkan script berupa infomasi sandi PHP pada halaman HTML, informasi tersebut berupa mb_http_input("iso-8859-1"); dan mb_http_output("iso-8859-1");

Code Block Untuk menyisipkan script PHP berupa <?php dan ?>. Script tersebut sebagai pembuka dan penutup script PHP atau untuk mencirikan script PHP.

Echo Untuk menyisipkan script echo pada code block yang diinginkan. Comment Untuk menyisipkan tag berupa /* dan */ pada code block yang

diinginkan. tag seperti itu digunakan untuk memberi komentar pada code block PHP dan tag tersebut tidak akan dieksekusi ke program PHP.

If Untuk menyisipkan script if pada code block yang diinginkan. Else Untuk menyisipkan script else pada code block yang diinginkan. More Tag Untuk memilih berbagai tag-tag bahasa pemograman yang digunakan.

Seperti tag HTML, tag PHP, tag ASP, dst. 5.2.7 Tab Applications

Tab Applications memungkinkan penambahan server behavor ke dalam halaman. Macromedia Dreamweaver MX 2004 menyediakan fasilitas yang memudahkan penerapan isi dynamic dan behavor yang kompleks ke dalam halaman. Faslitas itu terangkum dalam icon objek Recordset, Repeated Region, Dynamic Table, Dynamic Text, dan yang lainnya. 5.2.8 Tab Flash Elements

Tab Flash Elements berisikan icon objek berupa elemen-elemen yang berhubungan dengan Flash. Seperti Image Viewer yaitu untuk menyisipkan Flash movie pada titik insertasi. 5.2.9 Tab Favorites

Macromedia Dreamweaver MX 2004 menyediakan tab Favorites sebagai tab yang berfungsi untuk menaruh icon-icon objek yang sering digunakan seperti icon table, icon form, dst. Dengan adanya tab ini Anda tidak perlu kerepotan lagi mencari icon objek pada tab-tab kategori. Karena icon yang sering Anda gunakan dapat Anda letakkan pada tab ini. Caranya klik kanan pada area tab Favorites lalu pilih dan klik Customize Favorites.

Gambar 5.14 Klik kanan pada area tab favorites



Setelah muncul kotak box Customize Favorite Objects, Anda akan disuguhkan daftar icon objek dari tab-tab kategori Insert Bar yang berada di sebelah kanan. Klik salah satu icon objek yang Anda inginkan lalu klik tombol panah. Jika sudah Anda pilih, klik tombol OK. Maka icon objek yang Anda pilih akan tampil di area tab Favorites.

Gambar 5.15 Kotak dialog Customize Favorite Objects 5.3 Property Inspector

Property Inspector berfungsi untuk melakukan pengeditan property pada suatu elemen di dalam dokumen yang terpilih (terseleksi). Elemen tersebut dapat berupa objek atau teks. Untuk memunculkan Property Inspector dengan mengklik menu Windows > Properties atau dengan menekan Crtl+F3. Panel Property Inspector dapat diekspansi untuk melihat lebih detail properti dari elemen yang terseleksi. Sebagai contoh perhatikan dua gambar di bawah ini:

Gambar 5.16 Property Inspector untuk teks



Gambar 5.17 Property Inspector untuk objek gambar 5.3.1 Property Inspector untuk Teks

Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolahan kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memasukkan teks Anda tinggal ketik di halaman web tersebut. Sedangkan untuk mengatur teks Anda bisa mengubah di peroperty teks yang ada pada Property Inspector. Property Inspector untuk Teks digunakan untuk memformat teks, ukuran, warna, jenis huruf, perataan paragraf (alignment), menebalkan huruf (bold), memiringkan huruf (italic), penomoran bentuk bullet dan numbering (list), dll. Untuk lebih mengenal Property Inspector untuk Teks perhatikan gambar 7.18.

Gambar 5.18 Property Inspector untuk teks secara detail 5.3.2 Property Inspector untuk Objek

Ada banyak sekali objek yang bisa kita masukkan ke dalam dokumen web kita, seperti objek gambar, tabel, form, flash, dan banyak lagi yang lainnya. Pada Dreamweaver, objek-objek tersebut dapat kita masukkan ke dalam dokumen web kita dengan sangat mudah. Misalnya Anda ingin memasukkan objek gambar, caranya Anda tinggal klik menu insert > image (Ctrl+Alt+I) atau klik tab common pada Insert Bar lalu klik icon image. Setelah itu akan muncul jendela Select Image Source. Jendela tersebut digunakan untuk mencari lokasi tempat penyimpanan gambar dan memilih gambar yang ingin di masukkan ke halaman web Anda. Selanjutnya Anda tinggal klik salah satu gambar lalu klik tombol OK. Jika lokasi



gambar tersebut berada di luar folder root penyimpanan file-file web Anda, maka akan muncul jendela konfirmasi yang isinya merupakan pertanyaan yaitu apakah Anda ingin menyimpan gambar tersebut ke lokasi folder root Anda atau tidak. Anda tinggal klik tombol Yes (ya) atau No (tidak).

Sedangkan untuk memasukkan objek Flash, caranya Anda tinggal klik menu insert >

media > flash (Ctrl+Alt+F) atau klik tab common pada Insert Bar lalu klik icon media flash. Setelah itu akan muncul jendela Select File. Jendela tersebut digunakan untuk mencari lokasi tempat penyimpanan file-file flash dan memilih file flash yang ingin di masukkan ke halaman web Anda. Selanjutnya Anda tinggal klik salah satu file flash tersebut lalu klik tombol OK. Jika lokasi file flash berada di luar folder root penyimpanan file-file web Anda, maka akan muncul jendela konfirmasi yang isinya merupakan pertanyaan yaitu apakah Anda ingin menyimpan file flash tersebut ke lokasi folder root Anda atau tidak. Anda tinggal klik tombol Yes (ya) atau No (tidak).

Untuk mengedit objek yang sudah ada di dalam dokumen web Anda, bisa Anda lakukan

dengan mengklik objek tersebut kemudian Anda bisa mengubah propertynya pada Property Inspector, sesuai dengan yang Anda inginkan. Property yang dapat Anda ubah pada Property Inspector akan berbeda-beda, tergantung dari jenis objek yang akan Anda edit.

Anda juga bisa menggunakan klik kanan mouse pada suatu objek untuk menampilkan

daftar menu favorit yang bisa Anda pilih, sesuai dengan objek yang bersangkutan. Anda juga bisa menggunakan objek layer sebagai tempat dari teks Anda. Sehingga Anda bisa dengan mudah untuk memformat dan memindah-memindah teks Anda tersebut. Untuk menggambar suatu layer bisa dilakukan dengan memilih menu Insert > Layer atau dengan mengklik icon Draw Layer pada Insert Bar > Tab Common.

Property Inspector untuk Objek Gambar/image digunakan untuk merubah tinggi (height)

atau lebar (width) suatu gambar, mengcrop gambar, mengatur warna brightness dan warna contrast gambar, mempertajam warna gambar (sharpen), membuat hotspot, alignment untuk gambar, tebal tepi suatu gambar (border), dll. Untuk lebih mengenal Property Inspector untuk Objek Gambar perhatikan gambar 7.19.

Gambar 5.19 Property Inspector untuk objek gambar secara detail

Property Inspector untuk Objek Flash/animasi digunakan untuk merubah tinggi (height) atau lebar (width) suatu objek flash, memainkan objek Flash (play), mengedit objek Flash ke program aplikasi Macromedia Flash, perulangan animasi ketika dijalankan (loop), alingment



untuk objek Flash, mengembalikan ukuran objek Flash ke ukuran semula, kualitas objek Flash ketika dijalankan, dll. Untuk lebih mengenal Property Inspector untuk Objek Flash perhatikan gambar 7.20.

Gambar 5.20 Property Inspector untuk objek Flash secara detail

Selain objek gambar dan flash, akan dibahas juga penggunaan objek berupa tabel beserta cara memasukkannya ke dokumen web Anda. Penggunaan tabel sangat berguna untuk pegaturan data. Tabel juga bisa digunakan untuk mengontrol dimana harus meletakkan gambar dan teks pada halaman/dokumen web Anda. Dengan tabel juga memungkinkan Anda untuk memodifikasi isi dari tiap sel pada tabel. Atau Anda bisa memblok sel, kolom, atau baris yang ingin Anda atur dengan setting yang sama.

Anda bisa mengontrol hampir semua fitur suatu tabel menggunakan Property Inspector.

Untuk memasukkan tabel ke dalam dokumen web Anda, bisa dilakukan dengan cara memilih menu Insert > Tabel atau klik tab common pada Insert Bar lalu klik icon table. Kemudian akan muncul kotak dialog untuk memasukkan tabel dimana Anda bisa mengatur jumlah baris dan kolom.

Gambar 5.21 Kotak dialog Tabel



Property Inspector untuk Objek Tabel digunakan untuk merubah tinggi (height) atau lebar

(width) suatu objek tabel, menambah baris atau kolom, menambah cellpad atau cellspace, mengatur posisi tabel (alignment tabel), mengatur tebal tepi tabel atau warna tebal tepi tabel, dll. Untuk lebih mengenal Property Inspector untuk Objek Tabel perhatikan gambar 7.22.

Gambar 5.22 Property Inspector untuk objek Tabel

Jika kursor berada di dalam tabel atau Anda sedang memblok baris atau kolom, maka Property Inspector akan berubah seperti gambar di bawah ini.

Gambar 5.23 Property Inspector untuk baris, kolom atau sel 5.4 Bekerja dengan Teks

Hal yang paling sering digunakan dalam dokumen web adalah pengolahan teks. Pengolahan teks pada Dreamweaver sama halnya dengan pengolahan dengan HTML di notepad seperti bab HTML yang sudah kita bahas sebelumnya. 5.4.1 Heading

Heading digunakan untuk membuat judul atau subjudul dari dokumen dengan berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Untuk menggunakan heading, klik menu Text > Paragraph Format > pilih dan klik Heading yang Anda inginkan. Atau menggunakan tag <h1>…</h1>, <h2>…</h2>, <h3>…</h3>, dan seterusnya sampai heading level 6.



Gambar 5.24 Heading

5.4.2 Paragraph dan Line Break

Bila Anda menekan Enter pada pengolahan kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (<p>) secara default menghasilkan jarak lebih besar dari pada jarak antar baris. Jika Anda ingin antar baris tidak ada jarak, maka Anda membutuhkan <br> di HTML. Untuk menggunakannya pada Dreamweaver Anda tinggal tekan Shift+Enter atau klik tab common pada Insert Bar lalu klik icon BR (Line Break).

Gambar 5.25 Paragraph dan line break 5.4.3 Memformat Teks dengan Property Inspector



Seperti yang sudah kita bahas sebelumnya, Property Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran teks, warna, dan perataan paragraf.

Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 6 jenis font yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, Verdana, dan Geneva. Untuk mengubah teks yang telah Anda ketik yaitu dengan cara blok teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Time New Roman.

Gambar 5.26 Mengubah format huruf dan warna huruf 5.4.4 Membuat List dan Garis Horisontal (HR)

List digunakan untuk menampilkan informasi dalam bentuk daftar. Ada dua jenis daftar, yaitu daftar dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>). Sedangakan HR (Horizontal Ruler) digunakan untuk menampilkan garis horisontal. Pada umumnya HR digunakan sebagai garis pembatas. Untuk menggunakan list klik menu Text > List > dan pilih list yang diinginkan. Sedangkan untuk menggunakan garis horisontal, pada design code Anda tinggal ketik <hr>.



Gambar 5.27 List dan HR 5.4.5 Blockquote dan Preformatted Text

Blockquote digunakan untuk menulis kutipan dengan teks menjorok ke dalam. Sedangkan Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen. Untuk menggunakan Blockquote dan PRE, klik tab Text pada Insert Bar lalu klik icon Blockquote atau PRE.

Gambar 5.28 Blockquote dan PRE 5.4.6 Membuat Link, Target, dan Anchor

Membuat Link



Untuk membuat link antar halaman, selain diperlukan halaman link sumber (source link)

juga diperlukan link tujuan (destination link). Misal Anda membuat halaman web dengan nama home.php (halaman ini yang akan menjadi link sumber Anda). Dan buat halaman web dengan nama index.php (halaman ini untuk yang dilink).

Gambar 5.29 File index.php

Gambar 5.30 File home.php Setelah Anda membuat kedua halaman tersebut, pada file index.php blok tulisan home.

Kemudian pada Property Inspector di textbox link ketik: home.php. Ketika Anda jalankan file index.php dan mengklik menu home secara otomatis browser akan menampilkan isi dari file home.php.

Gambar 5.31 Memasukkan Link Target Target adalah perintah atau opsi pada link yang memberitahukan di window nama link

tersebut akan dibuka. Setiap window atau frame di HTML dapat Anda beri nama dan browser akan memuat halaman ke window/frame sesuai yang ditunjukkan oleh link. Sesuai aturan di HTML, terdapat nama-nama target khusus yang berarti spesial. _Self adalah pilihan default, bila Anda tidak menentukan target, link akan dibuka pada window browser atau frame yang sama. _top memuat ke window terluar (di luar semua frame yang ada). _Blank membuka link pada browser window baru. _Parent membuka link pada frame induk.



Gambar 5.32 Target pada Property Inspector Named Anchor Bila halaman web Anda memungkinkan pengunjung menscroll window browser karena

isi dari halaman tersebut panjang dan terdiri dari beberapa halaman, Anda dapat menggunakan Named Anchors ini untuk menentukan titik-titik tertentu pada halaman dengan tujuan memudahkan navigasi pengunjung mencari sesuatu dalam halaman dengan cepat. Pada halaman yang saya buat index.php terdapat beberapa menu yang langsung menuju ke topik tertentu pada halaman tersebut, setelah itu pengunjung dapat kembali ke atas halaman.

Untuk membuat Named Anchor, pertama Anda tandai bagian khusus dari halaman: klik

Insert > Named Anchor, atau tekan Ctrl-Alt-A. Setelah kotak dialog muncul masukan nama anchor. Pada file ini saya memberi nama kesukaan. Setelah itu klik OK. Pada bagian yang ditandai akan tampak tanda/icon buku terbuka. Perhatikan gambar 7.32.

Gambar 5.33 Named Anchor Setelah itu kembali ke halaman atas pilih teks yang akan di buat link pada bagian atas

dokumen yang akan dihubungkan dengan Anchor tersebut, pada textbox link di Property Inspector ketikkan #kesukaan. Untuk mengembalikan ke atas halaman buat link baru pada bagian tersebut misal: kembali ke atas. Lihat gambar 7.33. Kemudian masukkan di textbox link tanda # dan pilih _top untuk target dari link tersebut. Untuk mengetahui perbedaannya jalankan webnya di browser dengan menekan F12.



Gambar 5.34 Membuat link ke bagian atas sampai named Anchor yang sudah ditentukan dan link ke bagian atas dokumen

5.5 Page Properties

Page Properties adalah fasilitas untuk mengubah properti dasar sebuah dokumen web, seperti judul halaman, warna latar belakang dokumen, warna teks, gambar pada latar belakang, level transparasi dari gambar, warna-warna link, dsb. Untuk membuka Page Properties klik Modify > Page Properties. Pada versi Macromedia Dreamweaver MX 2004, untuk kotak dialog Page Properties terdapat lima kategori yaitu Appearance, Links, Headings, Title/Encoding, Tracing Image.

5.5.1 Page Properties Kategori Appearance

Page Properties dengan kategori Appearance, Anda dapat mengatur sebagai berikut: Page Font untuk menentukan jenis huruf yang digunakan pada dokumen. Bold/Italic untuk mengatur huruf menjadi tebal/miring. Size untuk menentukan ukuran huruf. Text Color untuk mengatur warna huruf. Background Color untuk menentukan warna latar belakang. Background Image tempat untuk memasukkan gambar sebagai latar belakang. Margin (Left | Right | Top | Bottom) untuk menentukan tepi batas (batas kiri, kanan, atas dan bawah) halaman.

Gambar 5.35 Page Properties kategori Appearance

5.5.2 Page Properties Kategori Links



Page Properties dengan kategori Links, Anda dapat mengatur sebagai berikut: Link Font untuk menentukan jenis huruf link. Bold/Italic untuk mengatur huruf link menjadi tebal/miring. Size untuk menentukan ukuran huruf link. Link Color untuk mengubah warna link. Rollover Link untuk mengubah warna link ketika link di rollover (link yang dilalui/disorot oleh mouse). Visited Link untuk mengubah warna link yang telah dikunjungi. Active Link untuk mengubah warna link yang sedang diklik. Underline Style terdapat empat pilihan yaitu: Always underline (link selalu di ikuti garis bawah), Never underline (link tidak terdapat garis bawah), Show underline only on rollover (ketika link di rollover link disertai garis bawah), dan yang terakhir Hide underline on rollover (ketika link di rollover link menyembunyikan garis bawah).

Gambar 5.36 Page Properties kategori Links

5.5.3 Page Properties Kategori Headings Page Properties dengan kategori Headings, Anda dapat mengatur sebagai berikut:

Heading Font untuk menentukan jenis huruf yang digunakan sebagai heading. Bold/Italic untuk mengatur huruf heading menjadi tebal/miring. Heading 1 sampai Heading 6 untuk mengubah ukuran heading dan warna heading dari ukuran level heading yang sudah diatur oleh Dreamweaver.

Gambar 5.37 Page Properties kategori Headings

5.5.4 Page Properties Kategori Title/Encoding



Page Properties dengan kategori Title/Encoding, Anda dapat mengatur sebagai berikut: Title untuk memberi judul halaman. Dalam kategori ini Anda dapat mengetahui lokasi folder dokumen web yang Anda gunakan, serta site folder.

Gambar 5.38 Page Properties kategori Title/Encoding 5.5.5 Page Properties Kategori Tracing Image

Page Properties dengan kategori Tracing Image, Anda dapat mengatur sebagai berikut:

Tracing Image tempat untuk memasukkan gambar sebagai latar belakang halaman. Transparency untuk mengatur level transparasi dari gambar.

Gambar 5.39 Page Properties kategori Tracing Image 5.6 Panels Group

Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX 2004. Untuk membuka dan menutup berbagai panel Anda tinggal klik menu Edit > Preferences (Ctrl+U) lalu pada kolom Category klik item Panels. Beri tanda centang untuk menampilkan panel yang diinginkan atau sebaliknya, hilangkan tanda centang untuk menyembunyikan panel yang diinginkan kemudian klik OK.



Gambar 5.40 Kotak Dialog Preferences 5.6.1 Panel CSS Styles

Panel CSS Styles digunakan untuk menerapkan aneka CSS Style ke dalam seleksi. Sedangkan tempat untuk menerapkan aneka CSS Style di sebut style sheets (lembar style). Panel CSS Style hanya memperlihatkan berbagai macam CSS Style saja. Pendefinisian HTML tag dan CSS selector style tidak akan terlihat di dalam panel CSS Style karena secara otomatis akan diterapkan pada setiap teks yang dikontrol oleh tag atau selector yang ditentukan.

Secara garis besar fungsi dari CSS Style yaitu mengatur fomatting font untuk sebuah halaman web, seperti mengatur ukuran font, jenis font, warna latar belakang, warna link, dll. Dengan menggunakan CSS Style kita bisa mengatur font dari semua halaman web yang ada, dengan begitu font yang ada dalam halaman web akan rapi dan sesuai dengan style dan ukuran yang diinginkan.



Gambar 5.41 Panel CSS Styles beserta menu yang terdapat di dalam panel CSS Styles

Berikut ini adalah keterangan item atau menu yang terdapat di dalam panel CSS Styles: Go to Code

Untuk menampilkan file style sheet dan kursor akan menuju ke definisi style yang terseleksi.

New Untuk membuka kotak dialog New Style dan membuat style baru untuk dokumen tertentu.

Edit Untuk menampilkan kotak dialog CSS Style definition for dari style item yang terseleksi yang digunakan untuk mengubah style yang sudah ada.

Duplicate Untuk mengandakan isi dari style item yang terseleksi dan Anda diharuskan untuk memberi nama baru pada style yang digandakan tersebut.

Rename Untuk mengganti nama dari style item yang terseleksi.

Apply Untuk menampilkan tag pada seleksi yang sedang dilakukan.

Delete Untuk menghapus nama dari style item yang terseleksi.

Attach Style Sheet Untuk membuka kotak dialog Select Style Sheet File dan memilih style sheet eksternal yang akan digunakan untuk diterapkan ke dalam dokumen yang aktif.

5.6.2 Panel Files

Panel Files atau set window menampilkan sebuah daftar yang berisi semua folder-folder dan file-file di dalam situs lokal yang Anda buat. Daftar ini juga bertindak sebagai sebuah file manager, yang memperbolehkan Anda untuk mengcopy, paste, menghapus, merename (mengganti nama), memindahkan, membuat folder baru, dan membuka file layaknya seperti pada window explorer.



Gambar 5.42 Panel Files

5.6.3 Panel Assets Assets di dalam Maacromedia Dreamweaver MX 2004 adalah elemen-elemen seperti

image, file movie, atau objek lain yang digunakan di dalam sebuah page atau site. Panel Assets berfungsi untuk mengelola dan mengorganisasikan aset-aset sebuah site. Dibanding menggunakan site window, pengorganisasian aset-aset sebuah site akan lebih mudah dilakukan melalui panel Assets.

Panel Asset membagi aset-aset di dalam sebuah site menjadi beberapa kategori, yang

antara lain Image, Color, URLs, Flash, Movies, Shockwave Movies, MPEG and QuickTime Movies, Scripts, Templates , dan Library Items. Untuk lebih jelasnya, perhatikan gambar di bawah ini:

Gambar 5.43 Panel Assets

5.6.4 Panel Behaviors Panel Behaviors digunakan untuk menerapkan behaviors pada elemen-elemen di dalam

page. Gambar di bawah ini merupakan tampilan panel Behaviors.



Gambar 5.44 Panel Behaviors Di bawah ini adalah keterangan item atau menu yang terdapat di dalam panel Behaviors: Actions (+) Untuk menerapkan actions yang dapat diterapkan pada seleksi yang aktif. Delete (-) Untuk menghapus event atau actions pada seleksi yang aktif dari daftar behavior. Panah ke atas dan ke bawah () Untuk mengeser actions yang terpilih agar urutannya berpindah ke atas atau ke

bawah. Events Untuk membuat pemicu agar actions dapat berfungsi. Show Event For Untuk menentukan browser yang dapat menjalankan behavior yang terpilih.

5.6.5 Panel History

Panel History memperlihatkan daftar semua langkah yang sudah dilakukan di dalam pembuatan atau pengeditan dokumen. Panel History memungkinkan user untuk membatalkan langkah yang sudah dilakukan (undo).

Gambar 5.45 Panel History



Mengenal Macromedia Flash MX 2004

Macromedia Flash MX 2004 merupakan salah satu program canggih yang dibuah oleh Macromedia untuk membuat animasi dan gambar vektor. Macromedia Flash pada awalnya dibuat dalam upaya untuk mewujudkan animasi berwarna-warni untuk web serta untuk membuat animasi GIFs. Desainer, web profesional dan para pemula telah memilih Flash karena berbagai alasan diantaranya kemudahan dan tersedianya script sehingga memudahkan pembuatan animasi secara interaktif.

Program Flash memiliki beberapa kelebihan seperti, Flash dapat memanipulasi vektor dan

raster grafik, mendukung streaming audio dan video secara bi-directional. Flash berisikan sebuah bahasa skripting yang disebut dengan Action Script. Program authoring Adobe Flash Profesional digunakan untuk membuat isi untuk platform Adobe seperti, aplikasiweb, permainan, film, dan content untuk telepon selular. File dalam SWF format (Shock Wave Flash), Flash Movie atau Flash Games biasanya berekstensi .swf dan dapat berupa sebuah obyek halaman web serta dapat pula dijalankan menggunakan standalone Flash Player. File Flash video mempunyai ekstensi .flv dan dapat dijalankan melalui flv player.

Banyak kelebihan yang ditawarkan oleh Flash begitu juga kekurangan pada program ini.

Salah satu kekurangannya yaitu ukuran file animasi yang umumnya sangat besar bisa menjadi kendala dari pembuatan sebuah web. Ukuran web yang relatif lebih kecil dari ukuran file animasi, memungkinkan kesulitan untuk memasukkan animasi didalamnya. Namun Anda tidak harus berkecil hati karena program Flash sudah mengatasi kendala-kendala diatas dengan baik, sehingga hampir semua web yang iteraktif saat ini menggunakan Flash sebagai bagian didalamnya. 6.1 Lingkungan Kerja Macromedia Flash MX 2004



Gambar 6.1 Lingkungan kerja Macromedia Flash MX 2004 6.1.1 Komponen Utama 1. Title Bar secara garis besar merupakan baris judul dari program yang sedang aktif. Pada

title bar terdiri dari kontrol menu box, nama aplikasi yang sedang aktif juga dilengkapi dengan tiga tombol kontrol.






Digunakan untuk mengembalikan ukuran jendela aplikasi Flash ke ukuran semula, setelah sebelumnya terjadi perubahan ukuran jendela aplikasi.

b. Move Menu ini akan aktif apabila tampilan jendela aplikasi Flash tidak pada kondisi full screen dan digunakan untuk memindahkan jendela aplikasi sesuai keinginan.

c. Size Menu ini akan aktif apabila tampilan jendela aplikasi Flash tidak pada kondisi full screen dan digunakan untuk merubah ukuran jendela aplikasi sesuai keinginan.

d. Minimize atau klik tombol Digunakan untuk menyembunyikan jendela aplikasi di dalam taskbar. Klik nama aplikasi yang ada di dalam taskbar, untuk menampilkan kembali aplikasi Flash ke ukuran semula.

e. Maximixe atau klik tombol Digunakan untuk merubah ukuran jendela aplikasi Flash menjadi satu layar penuh.

f. Close atau klik tombol Digunakan untuk menutup jendela aplikasi Flash.


Gambar 6.4 Menu Bar

Berikut adalah menu-menu yang terdapat pada Flash MX 2004: a. File Berkaitan dengan file seperti membuat file baru, menyimpan, membuka, export,

import, publish. b. Edit Menu editing secara umum seperti undo, redo, cut, copy, paste, serta untuk mengatur

preferences Flash. c. View Digunakan untuk mengatur tampilan stage seperti memberi alat bantu stage berupa

grid, ruler, guides, zoom in, dan zoom out. d. Insert Berkaitan dengan timeline, timeline effects, scane, seperti insert layer, insert

keyframe, insert frame, dll. e. Modify Berhubungan dengan modifikasi object, seperti modifikasi objek simbol, objek shape,

objek bitmap, transform objek, dll. f. Text Berhubungan dengan pengaturan teks, seperti jenis teks, ukuran teks, align teks, dan

style teks. g. Commands Berhubungan dengan command (perintah). Misalnya perintah untuk menjalankan

command, Anda tinggal klik saja perintah run command pada menu commands.



h. Control Menu ini berkaitan dengan pengontrolan movie, seperti perintah untuk test movie,

debug movie, dsb. i. Window Digunakan untuk mengatur/menampilkan window, seperti perintah untuk

menampilkan/menyembunyikan timeline, tools, properties, library, dsb. j. Help Untuk menampilkan help, informasi tentang Flash, dsb.

3. Toolbox berisikan sekumpulan tool perintah yang memiliki peran untuk menggambar

objek dalam stage dan masing-masing tool mempunyai fungsi berbeda. 4. Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau

mengontrol jalannya animasi (durasi animasi). 5. Stage disebut juga layar atau panggung. Stage merupakan area kerja dalam pembuatan

animasi. Dalam stage Anda dapat membuat gambar, teks, memberi warna dan lain-lain.

Gambar 6.5 Stage 6. Panels Group merupakan kumpulan dari panel-panel Flash MX 2004. 6.1.2 Mengenal Rulers, Grid dan Guides

Grid adalah sebuah sel garis-garis yang saling berpotongan vertikal dan horisontal yang berguna sebagai penuntun menggambar dan meletakkan elemen-elemennya. Fungsinya hampir mirip seperti kertas grafik pada dunia non digital. Flash juga menggukan grid untuk meluruskan benda jika Anda mengaktifkan fitur snap to grid. Karena grid hanya sebagai alat bantu maka grid tidak tampil pada hasil movie Anda. Cara menampilkan grid klik menu View > Grid > Show Grid.

Grid yang ada dalam stage dapat diatur sesuai dengan keinginan Anda, yaitu warna dan

ukuran panjang dan lebarnya, caranya adalah gunakan menu View > Grid > Edit Grid, sehingga muncul kotak dialog mengenai setting dari warna dan ukuran grid.



Gambar 6.6 Grid

Ruler dan Guides membantu Anda dalam menggambar objek dengan posisi ukuran,

bentuk dan posisi pada stage. Untuk menampilkan ruler pilih menu View > Rulers. Guides digunakan untuk meluruskan antara gambar yang ada pada stage dengan ruler. Caranya klik ruler yang ada di pinggir yang horisontal/vertikal. Kemudian drag ke arah stage dan letakkan pada tempat yang sesuai dengan keperluan. Untuk mengatur warna dan ukuran dari guides klik menu File > Guides > Edit Guides.

Gambar 6.7 Ruler and Guides

6.2 Timeline Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau

mengontrol jalannya animasi (durasi animasi). Timeline terdiri dari beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasi akan berjalan.

Di dalam timeline terdapat timeline header yaitu bagian yang terdapat angka 1,5,10, dan

seterusnya, berguna untuk menunjukkan letak frame. Sedangkan Playhed atau penunjuk frame yaitu garis vertikal berwarna merah berguna untuk menunjukkan posisi dari frame yang ditampilkan pada stage. Playhead dapat dipindah ke frame yang Anda inginkan cukup dengan mengklik frame tersebut.



Gambar 6.8 Timeline

Beberapa penjelasan tentang layer control: a. Insert Layer Digunakan untuk menambah layer di dalam timeline. b. Add Motion Guide Ada dua tipe dari layer yaitu mask dan guide. Keduanya digunakan untuk animasi

yang khusus. Seperti membuat gerakan dari objek yang mengikuti lintasan tertentu. c. Insert Layer Folder Digunakan untuk menambahkan folder sebagai tempat layer agar layer tampak

ringkas dan tidak memanjang. d. Delete Layer Digunakan untuk menghapus layer. e. Show/Hide All Layers Digunakan untuk menampilkan atau menyembunyikan layer. f. Lock/Unlock All Layers Digunakan untuk mengunci layer. Sehingga Anda tidak akan bisa merubah objek pada

layer yang dikunci ketika Anda sedang bekerja dengan layer lainnya. g. Show All Layers as Qutlines Digunakan untuk menyembunyikan objek dan hanya menampilkan garis tepinya saja.

Gambar 6.9 Layer Control



6.3 Toolbox

Untuk membuat atau mengedit gambar tentu dibutuhkan peralatan yang memadai. Toolbox dalam Flash berisikan sekumpulan tool yang digunakan untuk membuat atau mengedit objek di area stage. Toolbox terbagi menjadi tool dan modifier. Setiap tool memiliki ukuran modifier tertentu yang ditampilkan ketika Anda memiliki tool tersebut. Sebagai contoh jika Anda memilih brush tool maka modifier seperti jenis brush, ukuran brush dapat Anda atur.

Gambar 6.10 Tool dan Modifier



Gambar 6.11 Jenis-Jenis Tool

Berikut ini komponen-komponen dalam toolbox beserta fungsi atau kegunaannya:

Tool Fungsi Modifier

Selection Tool (V)

Memilih dan memindahkan Objek

---

Subselection Tool (A)

Mengubah bentuk objek dengan objek points

---

Line Tool (N)

Membuat garis lurus

---

Lasso Tool (L)

Menyeleksi bagian objek yang akan diedit

Magic Wand dan Magic Wand Properties digunakan untuk membuat seleksi suatu bidang yang memiliki warna sejenis.

Polygon Mode digunakan untuk membuat seleksi dengan poligon dan segi banyak serta memungkinkan Anda membuat seleksi berupa daerah yang tertutup oleh garis-garis lurus.



Pen Tool (P) Membuat bentuk objek secara bebas berupa dengan titik-titik sebagai penghubung

---

Text Tool (T)

Membuat teks (kata atau kalimat)

---

Oval Tool (O)

Membuat objek elips atau lingkaran

---

Rectangle Tool (R)

PolyStar Tool (R)

Membuat objek berbentuk persegi empat atau persegi panjang, polygon dan star

Round Rectangle Radius digunakan untuk menentukan besarnya sudut tumpul yang akan dibuat pada objek berbentuk persegi empat atau persegi panjang. Cara penggunaanya yaitu klik icon Round Rectangle Radius setelah itu akan tampil kotak dialog Rectangle Settings. Kemudian Anda ketikan angka ditextbox Corner radius dan klik Ok.

Pencil Tool (Y)

Menggambar objek secara bebas dan membuat garis luar secara bebas (garis tidak tepat lurus)

Straighten digunakan untuk membantu memperlurus lintasan yang Anda buat, tetapi hasilnya tidak akan selurus garis yang dibuat dengan line tool.

Smooth digunakan untuk membantu memperhalus lintasan yang Anda buat.

Ink digunakan untuk menghilangkan bantuan flash dalam memperhalus suatu lintasan. Dengan menggunakan ink maka hasilnya akan sama dengan lintasan yang Anda buat dan tidak mendapat bantuan dari flash didalamnya.

Brush Tool (B)

Menggambar objek secara bebas, dan hasil gambar seperti coretan kuas

Brush Mode digunakan untuk menentukan jenis coretan kuas yang akan dihasilkan ketika menggambar menggunakan Brush Tool. Pada Brush Mode terdapat lima pilihan yaitu Paint Normal, Paint Fills, Paint Behind, Paint Selection, dan Paint Inside.

Lock Fill digunakan untuk tidak menggunakan (mengunci) gradient fill pada Brush Tool.

Brush Size digunakan untuk mengatur ukuran dari kuas yang Anda gunakan.

Brush Shape digunakan untuk memilih bentuk kuas yang Anda digunakan.



Free Transform Tool (Q)

Mengubah atau memutar objek sesuai keinginan

Rotate and Skew digunakan untuk memutar dan memiringkan objek.

Scale digunakan untuk merubah besar kecilnya suatu objek dari bentuk aslinya.

Distort digunakan untuk merubah bentuk objek sesuai arah dari titik pembantu yang Anda rubah.

Envelope digunakan untuk merubah bentuk objek sesuai arah dari titik pembantu yang Anda rubah, bedanya titik pembantu ini lebih banyak dari titik pembantu distort.

Fill Transform Tool (F)

Mengubah warna gradasi

---

Int Bottle Tool (S)

Memberi warna garis tepi (outline)

---

Paint Bucket Tool (K)

Memberi warna pada objek secara bebas

Gap Control digunakan untuk memberi isi suatu garis luar yang tidak benar-benar tertutup. Pada Gap Control terdapat empat pilihan yaitu Don’t Close Gaps, Close Small Gaps, Close Medium Gaps, dan Close Large Gaps.

Lock Fill digunakan untuk mengunci titik pusat gradient yang sudah ada meskipun warna gradient bisa diubah.

Eyedropper Tool (I)

Mengambil contoh warna dari bentuk/objek yang ada

---

Eraser Tool (E)

Menghapus bagian dari bentuk objek

Eraser Mode digunakan untuk menentukan cara menghapus dari Eraser Tool. Pada Eraser Mode terdapat lima pilihan yaitu Eraser Normal, Eraser Fills, Eraser Lines, Eraser Selected Fills, dan Eraser Inside.

Faucet digunakan untuk menghapus semua isi atau garis luar dengan sekali klik.

Eraser Shape digunakan untuk menentukan bentuk penghapus yang Anda gunakan.

Menggeser stage

---



Hand Tool (H)

Zoom Tool (M, Z)

Membesar atau memperkecil objek

Enlarge digunakan untuk memperbesar objek yang ada di daerah stage.

Reduce digunakan untuk memperkecil objek yang ada di daerah stage.

Stroke Color

Memberi warna pada garis tepi objek

---

Fill Color

Memberi warna pada objek

---

Black and White

Warna default untuk stroke color dan fill color yaitu hitam putih

---

No Color

Tidak ada warna pada garis tepi

---

Swap Colors

Membalik warna stroke color dan fill color

---

6.4 Panels Group

Panels Group merupakan kumpulan dari panel-panel Flash MX 2004. Untuk membuka dan menutup berbagai panel Anda tinggal klik menu Window lalu klik item Panel. Beri tanda centang untuk menampilkan panel yang diinginkan atau sebaliknya, hilangkan tanda centang untuk menyembunyikan panel yang diinginkan. 6.4.1 Panel Properties

Panel ini terdapat di bawah stage. Untuk menampilkan atau menyembunyikan panel ini klik menu Window > Properties atau Ctrl+F3. Panel Properties digunakan untuk mengatur ukuran background, warna background, kecepatan animasi dan lain-lain. Jika Anda mengklik salah satu toolbox seperti oval tool maka Panel Properties tersebut akan menampilkan property oval tool dan digunakan untuk mengatur property dari objek yang dibuat.

Gambar 6.12 Panel Properties



6.4.2 Panel Actions

Panel Actions digunakan untuk menuliskan script atau bahasa pemrograman Flash (ActionScript). Bahasa ActionScript ini mirip dengan bahasa JavaScript. Pada dasarnya ActionScript ini adalah suatu kumpulan perintah yang digunakan untuk mengaktifkan suatu action tertentu dan mengendalikan objek yang dibuat sesuai dengan keinginan creator. Anda dapat mengetikkan secara langsung pada layar Actions atau menggunakan bantuan yang disediakan oleh Macromedia Flash MX 2004. Untuk menampilkan atau menyembunyikan panel ini klik menu Window > Development Panel > Actions atau tekan F9.

Gambar 6.13 Panel Actions 6.4.3 Panel Library

Panel Library digunakan untuk menyimpan objek-objek berupa graphic atau gambar, button atau tombol, movie dan suara baik yang dibuat langsung pada stage ataupun hasil proses impor dari luar stage. Untuk menampilkan atau menyembunyikan panel ini klik menu Window > Library atau Crtl+L.

Gambar 6.14 Panel Library



6.4.4 Panel Color

Panel Color merupakan panel yang digunakan untuk memilih warna yang digunakan dalam pembuatan objek-objek pada stage. Ada dua jenis panel color, yaitu: Panel Color Mixer dan Panel Color Swatches. Untuk menampilkan atau menyembunyikan Panel Color Mixer klik menu Window > Design Panel > Color Mixer atau Shift+F9. Sedangkan untuk menampilkan atau menyembunyikan Panel Color Swatches klik menu Window > Design Panel > Color Swatches atau Ctrl+F9.

Gambar 6.15 Panel Color Mixer dan Panel Color Swatches

6.4.5 Panel Align, Info dan Transform

Panel ini digunakan untuk mengatur posisi objek, ingin diletakkan pada tengah stage, sebelah kiri atau kanan dan lain-lain. Dengan panel ini Anda juga dapat memutar objek dengan Transform. Untuk menampilkan atau menyembunyikan Panel ini klik menu Window > Design Panel > Align (Ctrl+K) atau Info (Ctrl+I) atau Transform (Ctrl+T).



Gambar 6.16 Panel Align, Panel Info, Panel Transform

6.4.6 Panel Components

Panel Components digunakan untuk menambahkan objek untuk web apllication yang nantinya dipublish ke internet. Penambahan objek pada umumnya yang sering digunakan yaitu component button. Untuk menampilkan atau menyembunyikan klik menu Window > Development Panel > Components atau Ctrl+F7.

Gambar 6.17 Panel Components

6.4.7 Panel Frame Panel frame digunakan untuk mengatur animasi. Pada option tween terdapat dua pilihan

animasi yaitu motion dan shape. Motion digunakan untuk menggerakkan di antara dua buah key frame dengan syarat objek yang ada di dalam kedua key frame tersebut sudah berupa



symbol. Animasi tweening motion digunakan untuk membuat animasi yang berupa perubahan letak, warna, ukuran, dan lain-lain. Dua buah key frame yang akan diberi tweening motion tersebut harus berisi objek yang hanya berasal dari satu symbol. Biasanya objek yang telah di tween motion pada timeline akan terlihat tanda panah dan frame diantara kedua keyframe berwarna ungu.

Sedangkan Shape digunakan untuk membuat animasi yang menampilkan perubahan

bentuk objek, misal dari bentuk lingkaran menjadi persegi. Untuk membuat tweening shape objek tidak boleh berupa symbol. Biasanya objek yang telah di tween shape pada timeline akan terlihat tanda panah dan frame diantara kedua keyframe berwarna hijau.

Gambar 6.18 Panel Frame dengan Option Tween Motion Setting yang bisa dilakukan pada tweening motion adalah: Easing

Untuk mengatur percepatan dari gerak gambar. Terdapat pilihan dari -100 sampai 100. Jika Anda memilih easing lebih dari 0 maka gerakan gambar akan mengalami perlambatan. Begitu juga sebaliknya, jika Anda memilih easing kurang dari 0 maka gerakan gambar akan mengalami percepatan.

Rotate Untuk memutar gambar sambil bergerak. Option yang bisa Anda pilih: CW (putaran searah jarum jam), CCW (putaran berlawanan jam). Dan disebelahnya dapat Anda isikan jumlah putaran yang Anda inginkan dalam satu kali bergerak.

6.5 Symbol

Symbol adalah objek dalam Flash, sehingga objek tersebut bisa dianimasikan, symbol bisa berupa Movie Clip, Button dan Ghaphic. Symbol Movie Clip digunakan untuk membuat bagian animasi. Symbol Button digunakan untuk membuat button (tombol) interaksi di dalam movie yang mampu merespons aksi mouse. Sedangkan Symbol Graphic digunakan untuk image (gambar) yang statis dan untuk membuat potongan-potongan animasi yang terangkum pada timeline.

Untuk mengubah objek biasa ke symbol yaitu dengan mengklik objek kemudian klik

menu Modify > Convert to Symbol (F8). Atau klik objek kemudian klik kanan pilih Convert to Symbol setelah itu akan tampil kotak diaolog Convert to Symbol dan terdapat option pilihan symbol yaitu Movie Clip, Button dan Graphic. Objek yang sudah dikenai symbol maka objek tersebut akan terdapat lingkaran kecil di tengah objek yang bersangkutan. Sedangkan untuk mengembalikan symbol menjadi objek biasa yaitu dengan mengklik menu Modify > Break Apart atau Ctrl+B.



Gambar 6.19 Kotak dialog Convert to Symbol

Gambar 6.20 Objek yang belum menjadi symbol

Gambar 6.21 Objek yang sudah menjadi symbol

6.6 Pembuatan Animasi Dasar 6.6.1 Animasi Dasar Motion Tween

Animasi ini merupakan animasi yang paling dasar karena animasi ini pada prinsipnya adalah pergerakan suatu objek (motion), seperti halnya definisi animasi yaitu teks/gambar yang bergerak.

Langkah-langkah pembuatan animasi dasar motion tween: 1. Buat lembar kerja baru dengan cara klik menu File > New (Ctrl+N). 2. Buat objek lingkaran menggunakan Oval Tool (O) di frame 1. 3. Hilangkan garis tepi lingkaran dengan menggunakan Selection Tool (V). Klik dua kali

tepat di garis tepi lingkaran dan tekan delete. 4. Klik objek lingkaran, setelah itu klik kanan Convert To Symbol.



Gambar 6.22 Pengguanan Convert to Symbol

5. Beri nama symbol dengan nama Bola dan pilih type symbol graphic lalu klik Ok.

Gambar 6.23 Memilih type symbol graphic

6. Pilih frame 30 pada Layer 1 di Timeline, setelah klik kanan dan pilih Insert Keyframe (F6). Kemudian geser objek sebelah kanan, agar objek benar-benar lurus geser kekanan tekan shift dan drag dengan mouse sebelah kanan.

Gambar 6.24 Pengguanan Insert Keyframe

7. Blok frame 25 – 30 dan pilih Create Motion Tween. Jika Langkah benar, maka dari frame 1 ke frame 30 akan terlihat tanda panah dan frame akan berwarna ungu. Untuk menjalankan animasi tekan Enter atau Ctrl+Enter untuk melakukan Test Movie. Sedangkan untuk menghentikan Test Movie tekan Ctrl+W.



Gambar 6.25 Pengguanan Create Motion Tween

6.6.2 Animasi Dasar Motion Shape

Animasi shape merupakan animasi perubahan objek, bisa berupa perubahan bentuk atau warna. Pada praktik motion shape kita akan menggunakan tiga buah objek yaitu lingkaran, persegi, dan polygon. Ketiga objek tersebut kita akan buat animasi perubahan bentuk dan warna objek.

Langkah-langkah pembuatan animasi shape: 1. Klik File > New (Ctrl+N).

2. Atur warna fill dengan warna kuning 3. Buat objek lingkaran dengan menggunakan Oval Tool (O) di frame 1. 4. Pilih frame 15 dan klik kanan Insert Blank Keyframe (F7).

Gambar 6.26 Pengguanan Insert Blank Keyframe

5. Atur warna fill dengan warna hijau



6. Buat objek persegi empat dengan menggunakan Rectangle Tool (R) di frame 15.

Gambar 6.27 Objek persegi empat dengan warna hijau

7. Pilih frame 30 dan klik kanan Insert Blank Keyframe (F7). 8. Atur warna fill dengan warna biru 9. Buat objek polygon dengan menggunakan PolyStar Tool di frame 30.

Gambar 6.28 Objek polygon dengan warna biru

10. Blok frame 10 - 20. Pada Properties frame di option tween pilih shape. Kemudian

jalankan animasinya tekan Ctrl+Enter dan perhatikan perubahan yang dialami ketiga objek tersebut.

Gambar 6.29 Memilih Tween Shape



6.6.3 Animasi Dasar Motion Guide

Animasi ini merupakan dasar dari animasi game balapan mobil atau motor, yaitu bahwa mobil/motor bergerak mengikuti jalur/track yang sudah ditentukan. Hati-hati dalam membuat animasi ini, karena langkah tidak sesuai prosedur, maka animasi tidak akan berhasil.

Langkah-langkah pembuatan animasi motion guide: 1. Klik File > New (Ctrl+N). 2. Klik dan tahan Rectangle Tool dan pilih PolyStar Tool. Setelah itu pada properties

PolyStar Tool klik Options dan pilih style star lalu klik Ok.

Gambar 6.30 Memilih PolyStar Tool

Gambar 6.31 Memilih Style Star

3. Buat objek bintang menggunakan PolyStar Tool di frame 1. 4. Klik objek bintang, setelah itu klik kanan Convert To Symbol. 5. Beri nama symbol dengan nama Bintang dan pilih type symbol graphic lalu klik Ok. 6. Klik layer 1 kemudian klik kanan pilih Add Motion Guide.



Gambar 6.32 Pengguanan Add Motion Guide

7. Buar jalur bebas menggunakan Pencil Tool di layer guide. Kemudian klik di frame 30 di layer guide dan klik kanan pilih Insert Keyframe (F6).

Gambar 6.33 Membuat jalur bebas dengan Pencil Tool

8. Pilih kembali layer 1 lalu klik frame 30 di layer 1 dan klik kanan pilih Insert Keyframe (F6).

9. Blok frame 20 - 30 di layer 1 dan klik kanan pilih Create Motion Tween. 10. Klik frame 30 di layer 1 setelah itu pindahkan objek bintang ke ujung jalur dengan

menggunakan Selection Tool (V), posisikam objek dengan tepat, sehingga terlihat lingkaran kecil di tengah-tengah objek bintang. Jalankan animsinya dengan menekan Ctrl+Enter. Pada saat animasi dijalankan lintasan/jalur yang Anda buat tadi tidak akan tampil karena guide layer hanya berfungsi sebagai pemandu.



Gambar 6.34 Memindahkan objek ke ujung jalur

6.6.4 Animasi Dasar Menggunakan Mask

Mask yang artinya penutup, fungsi dari mask yaitu untuk menutupi suatu layer. Mask dapat diterapkan kepada suatu layer dan layer yang sudah dikenai mask bisa berfungsi untuk menutupi layer dibawahnya. Animasi dasar menggunakan mask merupakan animasi dasar yang mempunyai ciri khusus untuk menutupi objek satu dengan objek lain yang tidak bisa dimiliki oleh motion.

Langkah-langkah pembuatan animasi dasar menggunakan mask: 1. Klik File > New (Ctrl+N). 2. Atur warna background dokumen dengan warna biru muda pada panel properties

dokumen . 3. Buat tulisan dengan kalimat Belajar Animasi menggunakan Text Tool (T). 4. Atur tulisan pada properties Text Tool:

- jenis huruf : verdana - ukuran : 60 - warna : hitam

5. Klik frame 40 di layer 1 dan klik kanan piluh Insert Keyframe (F6). 6. Tambahkan layer dengan mengklik icon insert layer. 7. Copy semua frame yang ada di layer 1 ke layer 2 dengan cara blok frame 1-40 di

layer 1 dan klik kanan pilih Copy Frames. Klik layer 2, blok frame 1-40 kemudian tekan Ctrl+Alt+V agar paste tepat dengan letak original copy-an-nya. Jika Anda menggunakan Klik kanan dan pilih Copy Frames maka letak pastenya tidak akan berada tepat di original copy-an-nya.



Gambar 6.35 Mengcopy frame

8. kunci kedua layer tersebut dengan mengklik icon Lock layer agar objek tidak bisa diedit lagi.

9. Klik layer 1 dan tambahkan layer baru dengan mengklik icon layer baru. 10. Pada panel color mixer atur fill linear serta atur warna linear pada garis warna

menjadi hitam putih hitam.

Gambar 6.36 Mengatur warna linear

11. Buat objek persegi panjang dengan menggunakan Rectangle Tool (R). 12. Hilangkan garis tepi persegi panjang dengan menggunakan Selection Tool (V). Klik

dua kali tepat di garis tepi persegi panjang dan tekan delete. 13. Edit objek persegi panjang dengan menggunakan Free Transform Tool (Q). kemudian

miringkan objek dengan menarik titik sudut hitam objek seperti gambar dibawah ini.

Gambar 6.37 Mengedit objek persegi panjang menjadi miring



14. Klik frame 40 di layer 3 dan klik kanan pilih Insert Keyframe (F6). 15. Aktifkan Selection Tool kemudian klik frame 40 di layer 3 dan geser objek persegi

panjang ke kanan agar objek benar-benar lurus tekan Shift dan drag objek tersebut.

Gambar 6.38 Menggeser objek persegi panjang ke kanan

16. Blok frame 30 - 40 di layer 3 dan klik kanan pilih Create Motion Tween. 17. Klik layer 2 dan klik kanan pilih Mask. Kemudian jalankan animasinya dan

perhatikan animasi, seolah-olah text terkena cahaya.

Gambar 6.39 Penggunaan Mask

6.6.5 Animasi Frame by Frame Animasi Frame by frame merupakan suatu konsep pembuatan animasi dalam Flash yang

menggunakan frame pada timeline. Biasanya animasi yang dibuat dengan konsep ini prinsipnya sama dengan membuat sebuah film pada windows movie maker, tetapi bedanya pada Flash harus menyesuaikan kuncinya terlebih dahulu dan meletakkan film tersebut pada kunci yang telah dibuat dan disesuaikan. Sedangkan kerugian dalam pembuatan animasi



frame by frame adalah Anda harus mengisikan gambar satu persatu pada tiap-tiap frame sehingga membutuhkan waktu lama.

Langkah-langkah pembuatan animasi mask: 1. Klik File > New (Ctrl+N). 2. Buat objek segi panjang dengan menggunakan Rectangle Tool (R) di frame 1. Ubah

objek menjadi gambar bangun jajar genjang menggunakan Free Transform Tool (F) dan pada modifiernya pilih Distort.

Gambar 6.40 Objek gambar persegi panjang yang sudah diubah ke gambar bangun jajar genjang

3. Klik frame 20 lalu klik kanan dan pilih Insert Keyframe (F6). 4. Kunci layer 1. 5. Tambahkan layer baru dengan cara mengklik icon Insert layer. 6. Buat objek lingkaran kecil di atas bangun jajar genjang.



Gambar 6.41 Objek lingkaran pada frame 1

7. Klik frame 2 di layer 2 dan klik kanan pilih Insert keyframe kemudian Seleksi objek dengan menggunakan Selection Tool (V) dan geser objek ke bawah.

8. Lakukan berulang-ulang langkah No 7 sehingga objek seolah-olah menjadi bola yang sedang dipantulkan. Untuk lebih jelasnya perhatikan gambar di bawah ini.

Gambar 6.42 Gerakan objek tiap-tiap frame

9. Jalankan animasi dengan menekan Ctrl+Enter dan perhatikan gerakan objek yang

terjadi.



Dasar-Dasar Photoshop CS

Adobe Photoshop merupakan salah satu program pengolah gambar standar profesional. Pada bab ini akan diulas tentang dasar-dasar Photoshop, meliputi komponen-komponen utama, tool-tool perintah beserta fungsi dan kegunaan dari masing-masing komponen tersebut. Mungkin Anda berpikir mengapa hanya materi dasar-dasar Photoshop saja yang di bahas pada buku ini, karena diharapkan pembaca agar tidak begitu awam mengenal program Photoshop yang nantinya program Photoshop ini digunakan untuk mendesign banner web yang akan kita buat.

Photoshop juga digunakan untuk keperluan web, misalnya: kompresi file gambar agar

ukurannya lebih kecil, memotong gambar kecil-kecil (slice), dan membuat web photo gallery. Dengan Adobe Photoshop, gambar yang sudah ada bisa dibuat untuk keperluan web, misalnya menjadi rollover dan animasi GIF. 7.1 Lingkungan Kerja Adobe Photoshop CS

Gambar 7.1 Lingkungan Kerja Photoshop CS 7.1.1 Komponen Utama Adobe Photoshop CS

10. Title Bar secara garis besar merupakan baris judul dari program yang sedang aktif. Pada

title bar terdiri dari kontrol menu box, nama aplikasi yang sedang aktif juga dilengkapi dengan tiga tombol kontrol.






Digunakan untuk mengembalikan ukuran jendela aplikasi Photoshop ke ukuran semula, setelah sebelumnya terjadi perubahan ukuran jendela aplikasi.

b. Move Menu ini akan aktif apabila tampilan jendela aplikasi Photoshop tidak pada kondisi full screen dan digunakan untuk memindahkan jendela aplikasi sesuai keinginan.

c. Size Menu ini akan aktif apabila tampilan jendela aplikasi Photoshop tidak pada kondisi full screen dan digunakan untuk merubah ukuran jendela aplikasi sesuai keinginan.

d. Minimize atau klik tombol Digunakan untuk menyembunyikan jendela aplikasi di dalam taskbar. Klik nama aplikasi yang ada di dalam taskbar, untuk menampilkan kembali aplikasi Photoshop ke ukuran semula.

e. Maximixe atau klik tombol Digunakan untuk merubah ukuran jendela aplikasi Photoshop menjadi satu layar penuh.

f. Close atau klik tombol Digunakan untuk menutup jendela aplikasi Photoshop.


Gambar 7.4 Menu Bar



Berikut adalah menu-menu yang terdapat pada Adobe Photoshop CS: a. File Berkaitan dengan file seperti menyimpan, membuka, export, import, dan cetak. b. Edit Menu editing secara umum seperti cut, copy, paste, transform image, serta untuk

mengatur preferences Adobe Photoshop. c. Image Berisi editing image untuk mengatur warna, hue/saturation, brightness/contrast,

ukuran. d. Layer Berkaitan dengan manajemen layer pada image, seperti menambah layer, menghapus,

menambah efek pada layer, serta masking. e. Select Berkaitan dengan selection image. f. Filter Berhubungan dengan pada Photoshop yang dapat digunakan untuk memberi Efek

tertentu pada image. g. View Digunakan untuk pengaturan view seperti zooming image, menampilkan skala, dan

sebagainya. h. Window Digunakan untuk mengatur/menampilkan window i. Help Untuk menampilkan help dan tutorial Adobe Photoshop.

12. Toolbox merupakan palet yang berisi sekumpulan tool perintah yang akan sering dipakai

dan masing-masing mempunyai fungsi berbeda. 13. Options Bar merupakan bagian yang berisi daftar perintah tambahan yang isinya akan

selalu berubah tergantung pada tool perintah yang dipilih pada bagian Toolbox. 14. Dokumen merupakan file lembar kerja utama yang berisi gambar, object atau teks yang

sedang diolah. Sedangkan Kanvas merupakan area kerja untuk menggambar, memanipulasi pada Photoshop.

15. Panel merupakan bagian yang terdiri dari beberapa palet. Palet-palet tersebut memuat beberapa perintah untuk memanipulasi dokumen.

16. Palet digunakan sebagai perangkat bantu sehingga gambar bisa diedit lebih mudah dan cepat. Palet yang ada pada Photoshop, antara lain: Navigator, Info, Color, Swatches, Styles, History, Actions, Layers, Channels, Paths, Paragraph, Tool Preset, Character dll.

17. Palet Well merupakan fasilitas yang disertakan pada Photoshop CS yang berfungsi untuk menempatkan koleksi palet yang sering digunakan, seperti Brusher Palet, Tool Presets dan lain-lain.

18. Goto Bridge berfungsi sebagai managemen file yang dikeluarkan oleh adobe yang menggantikan fasilitas file browse pada Photoshop CS.

19. Status Bar digunakan untuk mengetahui ukuran halaman dan besar kecilnya kapasitas file dokumen.

7.1.2 Tips Sebelum Memulai Program Photoshop CS

Sebelum mulai menggunakan Photoshop, ada beberapa tips yang mungkin berguna bagi

Anda yang masih awam.



Untuk mengetahui cara penggunaan tool dari toolbox yang sedang aktif, perhatikan status bar (di bagian bawah). Status bar akan menampilkan petunjuk cara penggunaan tool dikombinasikan

dengan tombol keyboard (Ctrl, Alt, Shift, dll) Shortcut (hotkey), mengeksekusi perintah tertentu langsung melalui keyboard yang sering

dipakai: o Full screen (tekan F) o Menyembunyikan dan menampilkan semua komponen (palet, option bar dan toolbox)

kecuali jendela dokumen (tekan Tab) o Menyembunyikan dan menampilkan semua komponen kecuali jendela dokumen dan

toolbox (tekan Shift + Tab). o Menggunakan Move Tool sementara (tekan Ctrl) o Membatalkan seleksi (tekan Ctrl + D) o Menginvers seleksi (tekan Ctrl + Shift + I)

7.2 Toolbox

Untuk membuat atau mengedit gambar tentu dibutuhkan peralatan yang memadai. Toolbox dalam Photoshop berisi sekumpulan tool yang sering dipakai dan masing-masing mempunyai fungsi berbeda. Tool-tool perintah dilengkapi dengan tanda segitiga ( ) disudut kanan tool yang berfungsi untuk menampilkan tool-tool perintah lain yang terdapat didalamnya.

Gambar 7.5 Jenis-jenis Tool



Berikut ini adalah penjelasan nama dan fungsi dari tool-tool perintah yang terdapat dalam toolbox. 7.2.1 Tool Untuk Menyeleksi

Tool Ilustrasi

Rectangular Marquee Tool (seleksi objeck dengan pola persegi empat dan persegi panjang).

Elliptical Marquee Tool (seleksi objeck dengan pola elips dan lingkaran).

Single Row Marquee Tool (seleksi satu baris dengan tinggi satu pixel) dan

Single Column Marquee Tool (seleksi satu kolom dengan lebar satu pixel).

Move Tool berfungsi untuk memilih layer, mengeser (drag object) dan memindah area seleksi.

Magic Wand Tool membuat seleksi otomatis pada gambar berdasarkan warna-warna yang sejenis.

Lasso Tool membuat seleksi dengan pola bebas.

Polygonal Lasso Tool membuat seleksi dengan pola poligon dan seleksi segi banyak.

Magnetic Lasso Tool membuat seleksi berdasarkan perbedaan tonal warna.

7.2.2 Tool Untuk Memotong



Tool Ilustrasi

Crop Tool digunakan untuk memotong bagian gambar tertentu.

Slice Tool digunakan untuk memotong gambar menjadi beberapa bagian. Dan sering dipakai untuk membuat layout table pada halaman web (HTML).

Slice Select Tool digunakan untuk mengedit slice yang sudah ada (mengedit gambar yang sudah dipotong oleh slice tool).

7.2.3 Tool Untuk Memperbaiki Gambar

Tool Ilustrasi

Healing Brush Tool untuk mengubah bagian tertentu pada gambar dengan mengambil area gambar tertentu. Kelebihannya dari patch tool adalah kemampuan untuk menyesuaiakan gambar baru (tekstur, pencahayaan dan bayangan) dengan lingkungan. Misal kita akan menutup coretan pada gambar disamping kemudian ditutup dengan area gambar yang tidak terdapat coretan. Caranya: tekan Alt diarea gambar yang tidak terdapat coretan lalu klik pada area gambar yang terdapat coretan.

Tekan alt diarea ini, lalu klik area gambar yang terdapat coretan, hasilnya akan seperti gambar di bawah ini.



Patch Tool untuk menutupi bagian area gambar tertentu yang tidak diinginkan ada di object gambar tersebut.

Buat area seleksi seperti ini tepat di area yang ingin ditutupi. Lalu drag seleksinya hasilnya akan seperti gambar dibawah ini.

Color Replacement Tool untuk menghapus efek mata merah kareana kilau cahaya.

7.2.4 Tool Untuk Duplikasi

Tool Ilustrasi



Clone Stamp Tool digunakan untuk menduplikasi area gambar tertentu kearea lain. Caranya: tekan Alt diarea gambar yang ingin digandakan lalu sapukan tool pada area gambar sebagai tempat untuk menghasilkan duplikat object tersebut.

Tekan alt diarea ini.

Sapukan tool pada area ini, sampai object tampil.

Pattern Stamp Tool digunakan untuk menduplikasi pattern (pola) pada gambar. Pattern adalah pola (berupa gambar kecil) yang disusun secara berurutan (grid) menghasilkan gambar yang lebih besar. Analogikan dengan ubin = pattern dan lantai = gambar. Kesimpulannya untuk mengisi area gambar dengan suatu pola yang sama dengan patten.

Pada options bar pilih patten seperti ini.

lalu sapukan tool pada object. Hasilkan akan seperti dibawah ini.

7.2.5 Tool Untuk Menghapus

Tool Ilustrasi



Eraser Tool untuk menghapus area gambar tertentu.

Background Eraser Tool untuk meng-hapus gambar berdasarkan warna gambar yang diklik pertama kali, sehingga gambar akan tampak transparan.

Magic Eraser Tool untuk menghapus area warna tertentu pada gambar secara otomatis. Penggunaanya hanya diklik saja.

7.2.6 Tool Untuk Efek Mengaburkan, Ketajaman dan Smudge.

Tool Ilustrasi

Blur Tool digunakan untuk me-ngaburkan gambar.

Sharpen Tool digunakan untuk me-nambah ketajaman gambar.

Smudge Tool digunakan untuk memberi efek smudge (seperti terkena gosokan tangan).

7.2.7 Tool Untuk Efek Fotografi

Tool Ilustrasi



Dodge Tool digunakan untuk me-ngatur pencahayaan (exposure) agar lebih terang (light).

Burn Tool digunakan untuk me-ngatur pencahayaan agar lebih gelap (dark).

Sponge Tool digunakan untuk me-nambah atau mengurangi tingkat kontras warna (saturation) pada gambar. Pada options bar pilih mode Desaturate untuk mengurangi tingkat saturasi gambar. Sedangkan mode Saturate untuk menambah tingkat saturasi gambar.



7.2.8 Tool Untuk Menggambar, Pewarnaan dan Menulis Teks

Tool Ilustrasi

Brush Tool menghasilkan gambar seperti coretan kuas. Pilihan air brush pada options bar membuat brush tool berfungsi seperti cat semprot. Penerapannya pada suatu tempat secara terus menerus mengakibatkan warna semakin banyak (menyebar) sampai pada titik jenuh (tidak ada perubahan lagi). Ukuran dan bentuk kuas dapat diubah melalui options bar.

Pencil Tool menghasilkan gambar seperti goresan / coretan pensil.

History Brush Tool untuk me-ngembalikan gambar ke kondisi semula setelah gambar dimanipulasi.

Art History Tool untuk me-ngembalikan gambar ke kondisi semula setelah gambar dimanipulasi, namun dengan tatanan style atau pola kuas yang berbeda.



Menggambar object dengan bentuk tertentu;

Rectangle Tool (persegi empat dan persegi panjang),

Rounded Rectangle Tool (persegi empat dan persegi panjang dengan sudut tumpul),

Ellipse Tool (lingkaran dan elips),

Polygon Tool (poligon dan segi banyak), sesuai dengan jumlah siku yang diinginkan pada Sides di options bar.

Line Tool (garis), dan

Custom Shape Tool (bentuk kompleks/bebas), menggambar object sesuai dengan bentuk shape yang dipilih pada options bar.

Pen Tool untuk membuat path garis lurus atau lengkung.

Freeform Pen Tool untuk membuat path dengan pola garis bebas (freehand).

Add Anchor Point Tool untuk

menambah titik labuh pada suatu path.



Delete Anchor Point Tool untuk menghapus titik labuh pada suatu path.

Convert Anchor Point Tool untuk

mengubah tipe titik labuh dari garis lurus menjadi garis lengkung dan sebaliknya.

Path Selection Tool untuk memilih dan memindah posisi path.

Direct Selection Tool untuk me-milih satu atau beberapa titik labuh dan mengubah bentuk path.

Gradient Tool untuk memberi warna gradasi pada gambar. Warna yang di-gunakan bisa diedit melalui options bar



Paint Bucket Tool untuk mengisi area gambar yang memiliki warna sejenis dengan warna foreground.

Horizontal Type Tool untuk mem-buat tulisan dengan arah horisontal atau mendatar.

Vertical Type Tool untuk membuat tulisan dengan arah vertikal atau me-nurun.

Horizontal Type Mask untuk mem-buat seleksi dengan bentuk tulisan horisontal.

Vertical Type Mask untuk membuat seleksi dengan bentuk tulisan vertikal.

7.2.9 Tool Anotasi, Pengukur dan Navigasi

Tool Ilustrasi

Notes Tool digunakan untuk membuat catatan pada image seperti copyright, dan Audio Annotation Tool digunakan untuk membuat suara/audio pada image

Eyedropper Tool untuk menentukan warna foreground dari gambar atau tekan Alt dan klik gambar untuk memilih warna background dari gambar.



Color Sample Tool untuk melihat nilai/kode warna pada suatu titik area gambar.

Measure Tool untuk mengukur jarak dan besaran sudut.

Hand Tool untuk menggeser dan mengatur posisi

tampilan gambar dalam jendela dokumen. Seperti scrolling pada gambar.

Zoom Tool untuk memperbesar tampilan ukuran gambar atau tekan Alt dan klik gambar untuk memperkecil tampilan ukuran gambar.



7.2.10 Tool-Tool dengan Fungsi Lain

Tool Fungsi

Set Color

Kotak atas (warna atas) untuk memilih warna foreground sedangkan kotak bawah (warna bawah) untuk memilih warna background. Penggunaannya Anda tinggal klik salah satu kotak tersebut untuk mengganti warnanya. Tekan D untuk merubah tatanan warna default (hitam putih). Tekan X untuk membalik warna foreground dan background.

Edit in Standard Mode Untuk menyunting gambar dalam mode standard.

Edit in Quick Mask Mode Untuk menyunting gambar dalam mode mask. Standard Screen Mode Untuk mengatur mode tampilan ruang kerja

Photoshop dalam format tampilan standard. Full Screen Mode with Menu Bar Untuk mengatur mode tampilan ruang kerja

Photoshop dalam format tampilan standard. Full Screen Mode Untuk mengatur mode tampilan ruang kerja

Photoshop dalam format penuh/full dengan adanya menu bar (baris menu).

Edit in ImageReady Untuk mengatur mode tampilan ruang kerja Photoshop dalam format penuh/full tanpa adanya menu bar (baris menu).

7.2.11 Tool-Tool Lain Yang Penting Di Photoshop CS

1. FILL (Edit > Fill) Berfungsi untuk memberi warna di dalam area seleksi atau warna keseluruhan kalau

tidak ada seleksi. Warna bisa diatur pada kotak color foreground dan color background.

2. STROKE (Edit > Stroke) Berfungsi untuk mewarnai garis di area seleksi. Ketebalan dan warna bisa diatur di

dalam window option nya. 3. TRANSFORM (Edit > Tranform)



Gambar 7.6 Transform

Tool ini untuk mentransformasi gambar di dalam layer tertentu. Scale : untuk merubah besar kecilnya suatu gambar Rotate : untuk memutar gambar Skew, distorsi, perspektif, warp : untuk merubah bentuk gambar sesuai keinginan

kita. Rotate 180 : untuk memutar gambar sebesar 180 derajat. Rotate 90 CW : untuk memutar gambar sebesar 90 derajat searah

jarum jam Rotate 90 CCW : untuk memutar gambar sebesar 90 derajat

berlawanan arah jarum jam. Flip horizontal : untuk memirror gambar kearah Horizontal Flip Vertikal : untuk memirror gambar kearah Vertikal.

4. MODE (Image > Mode) Untuk merubah system pewarnaan, diantaranya: - RGB : Red, Green, Blue - CMYK : Cyan Magenta Yellow Black - Grayscale : untuk warna Hitam Putih. 5. ADJUSTMENT (Image > Adjustment) Untuk menentukan terang gelapnya gambar ( Brightness/Contrast. Dan bisa pula

untuk menentukan warna ( Hue/Saturation ) 6. IMAGE SIZE (Image > Size)

Untuk merubah besar kecilnya suatu gambar. Bedanya dengan di tool transform adalah seluruh image berubah nilai besar kecilnya.

7. CANVAS SIZE (Image > Canvas Size) Untuk merubah besar kecilnya background. Dan ini akan membuat gambar di layer

menjadi terpotong. 8. ROTATE CANVAS (Image > Rotate Canvas) Untuk memutar background beserta gambar yang ada didalam area gambar. 9. INVERSE (Select > Inverse) Untuk menyeleksi yang bukan area seleksi sebelumnya. Tool ini berfungsi hanya jika

ada image atau layer yang terseleksi. 10. FEATHER (Select > Feather)

Untuk memperhalus atau membuat blur suatu gambar yang sudah terseleksi. Ini biasanya digunakan pada saat pemisahan suatu objek gambar dengan background nya.

11. EFFECT



Tool untuk membuat effect ini ada semua di dalam toolbar filter. digunakan untuk membuat efek tertentu (special effect) secara otomatis pada gambar. Ada 14 filter built-in dalam Photoshop, meliputi : Artistic, Blur, Brush Strokes, Distort, Noise, Pixelate, Render, Sharpen, Sketch, Stylize, Texture, Video, Other, dan Digimarc.

12. RULER (View > Ruler) Untuk menampilkan ukuran di area gambar. Ukuran bisa disetting dengan cara klik kanan di ruler area gambar maka akan muncul satuan ukuran yang akan digunakan. Seperti pixel, cm , inches, dll. Kalau kita drag ruler ke dalam area gambar maka akan muncul suatu garis bantu berwarna biru terang. Dan garis bantu ini tidak akan tercetak kalau kita print.

13. SNAP (View > Snap) Untuk menempatkan gambar dengan pas sesuai dengan keinginan kita. Kalau kita drag suatu objek gambar dan kita sudah mengaktifkan tool snap ini maka kita tidak perlu susah-susah untuk menempatkan gambar. Kita bisa menempatkan gambar pas ditengah, di pinggir atau pada garis bantu.

14. MENAMPILAKAN TOOL Untuk menampilan tool kita cukup dengan mengklik toolbar windows maka akan muncul tool yang akan kita pakai. Seperti layer, color, history, brush dll.

7.3 Options Bar

Setiap tool (alat) pada toolbox mempunyai setting yang bisa diubah sesuai dengan

kebutuhan. Untuk itu disediakan Options Bar (Window | Options). Berikut contoh options bar untuk Rectangular Marquee Tool .

Gambar 7.6 Options Bar Keterangan: 1. Rectangular Marquee Tool, tool jenis seleksi objeck dengan pola persegi empat dan

persegi panjang. 2. New selection, membuat seleksi baru. 3. Add to selection, menambah dan menggabungkan seleksi yang sudah ada dengan seleksi

yang akan dibuat. 4. Subtract from selection, mengurangi seleksi yang sudah ada dengan seleksi yang akan

dibuat. 5. Intersect with selection, memotong seleksi yang sudah ada dengan seleksi yang akan

dibuat. 6. Feather, untuk besarnya sudut tumpul yang akan dibuat (seleksi object pola persegi

empat dan persegi panjang dengan sudut tumpul). 7. Style untuk Rectangular Marquee Tool terdapat tiga style yaitu: style Normal, Fixed

Aspect Ratio dan Fixed Size. Untuk pilihan style Normal, Anda dapat menggunakan

1 2 4 5 6 7 8 9 3



seleksi tanpa ukuran tertentu (bebas) dan pada kotak with serta height tidak akan aktif. Karena kotak with dan height digunakan untuk menentukan ukuran seleksi yang akan dibuat. Untuk pilihan style Fixed Aspect Ratio dan Fixed Size Anda diharuskan mengisi kotak with dan height untuk menentukan ukuran panjang dan lebarnya seleksi yang diinginkan. Bedanya untuk kedua pilihan tersebut, style Fixed Aspect Ratio merupakan seleksi dengan ukuran perbandingan. Misal Anda mengetikan with 5 height 6, maka seleksi yang terbentuk dengan perbandingan ukuran panjang 5 lebar 6. walaupun seleksinya kecil atau besar tetap perbandingannya panjang 5 lebar 6. Sedangkan Fixed Size ukurannya sudah paten. Misal Anda mengetikan with 5 height 6, maka seleksi yang terbentuk sama dengan ukuran yang Anda isikan di with dan heightnya.

8. Kotak width akan aktif jika Anda memilih style Fixed Aspect Ratio dan Fixed Size. With digunakan untuk menentukan ukuran panjang seleksi.

9. Kotak height akan aktif jika Anda memilih style Fixed Aspect Ratio dan Fixed Size. Height digunakan untuk menentukan ukuran lebar seleksi.

7.4 Palet

Palet merupakan bagian yang berisi informasi-informasi dari dokumen aktif atau beberapa perintah untuk memanipulasi objek gambar/teks dokumen. Palet yang ada pada Photoshop, antara lain: Navigator, Info, Color, Swatches, Styles, History, Actions, Layers, Channels, Paths, Paragraph, Tool Preset, Character dll. 7.4.1 Navigator

Palet ini mengatur persentase ukuran tampilan gambar dalam dokumen aktif, yaitu dengan cara menggeser slider zoom, mengklik tombol zoom out dan zoom in, atau mengetikan ukuran persentase gambar pada kotak zoom.

Gambar 7.7 Palet Navigator 7.4.2 Info

Palet ini berisi informasi-informasi posisi mouse dalam dokumen, nilai-nilai warna, ukuran area gambar yang terseleksi, dan ukuran file dokumen.



Gambar 7.8 Palet Info 7.4.3 Histogram

Palet ini berisi informasi tonal warna yang dimiliki sebuah gambar.

Gambar 7.9 Palet Histogram 7.4.4 Color

Palet ini untuk mengganti warna foreground atau background dengan cara mengklik kotak foreground atau background, kemudian geser slider-slider untuk memilih warnanya.

Gambar 7.10 Palet Color

7.4.5 Swatches Palet ini untuk mengganti warna foreground atau background dengan cara mengklik

kotak warna untuk memilih warna foreground, atau tekan Ctrl dan klik kotak warna untuk memilih warna background.



Gambar 7.11 Palet Swatches

7.4.6 Styles

Palet ini berfungsi untuk memilih dan memasang style pada objeck gambar/layer yang terpilih. Klik salah satu style maka object akan berubah sesuai dengan style yang diinginkan.

Gambar 7.12 Styles Palette 7.4.7 History

Palet ini menyimpan semua perintah yang telah dikerjakan. Salah satu fungsi yang sering digunakan dalam palet ini adalah perintah untuk membatalkan perintah yaitu dengan cara mengklik item perintah yang dibatalkan. Jadi kesimpulannya history palette berfungsi sebagai UNDO dan REDO.

Gambar 7.13 Palet History



7.4.8 Actions

Palet ini digunakan untuk mengeksekusi perintah-perintah tertentu secara otomatis. Dengan Action, Anda bisa merekam (record), memainkan, mengubah, menghapus sederetan aksi atau perintah dan mengeksekusi kembali (play) langkah-langkah dalam memanipulasi file yang telah dilakukan. Action sering digunakan untuk mempermudah dan mempercepat proses manipulasi agar tidak harus mengulang secara manual. Karena bisa disimpan dalam bentuk file (dengan ekstension .ATN), kita bisa tukar-menukar Action. Selain itu, kita juga bisa mempelajari langkah-langkah action milik orang lain dalam memanipulasi image. Dengan menggunakan batch (menu File | Automate | Batch), Action bisa dieksukesi pada beberapa file gambar sekaligus.

Gambar 7.14 Palet Actions 7.4.9 Layers

Palet ini berisi tumpukan layer yang berisi objeck gambar/teks/lapisan transparan yang

memuat objeck gamabar/teks. Palet layers juga dilengkapi dengan banyak fasilitas dan tombol perintah untuk memanipulasi layer.

Ada beberapa jenis layer, antara lain: Layer normal (raster), adalah layer yang biasa digunakan untuk manipulasi biasa. Type layer, adalah layer pada teks (tulisan). Shape layer adalah layer yang berisi shape/bentuk. Layer Mask adalah layer yang berisi mask. Adjustment Layer atau Fill layer dipakai untuk mengubah pewarnaan pada gambar.



Gambar 7.15 Palet Layers 7.4.10 Channels

Palet ini berisi deretan layer yang memuat channel-channel warna pembentuk. Warna tersebut terdiri dari RGB (Red, Green, Blue).

Gambar 7.16 Channels Palette 7.4.11 Paths

Palet ini berisi deretan layer yang berisi objeck-objeck path yang terdapat dalam dokumen.



Gambar 7.17 Palet Paths 7.4.12 Goto Bridge

Palet ini berfungsi untuk mengaktifkan Adobe Bridge yang berfungsi sebagai managemen file yang dikeluarkan oleh adobe yang meggantikan fasilitas file browse pada Photoshop CS 8.0, dengan menggunakan Adobe Bridge Anda dapat melakukan pencarian sebuah file, pengurutan file, mengatur file gambar, membuat folder baru, merubah nama file atau folder, memindah dan menghapus file, memutar gambar, selain itu Anda juga dapat melihat informasi lain tentang file terpilih dan melakukan import file dari kamera digital, dapat dikatakan Adobe Bridge mempunyai kemampuan setara dengan Windows Explorer. Untuk membuka File Browser klik saja gambar ini yang terdapat pada options bar atau klik menu Window > File Browser.

Gambar 7.17 Goto Bridge 7.4.13 Palet Well

Palet ini merupakan fasilitas yang disertakan pada Photoshop CS 8.0 yang berfungsi untuk menempatkan koleksi palet yang sering digunakan, sehingga apabila akan



menggunakan palet yang terdapat dalam palet wel Anda tinggal klik pada tab palette yang akan digunakan tersebut.seperti Brusher Palet, Tool Presets dan lain-lain. Palet wel ini hanya akan tampil jika menggunakan resolusi monitor lebih tinggi dari 800 pixels x 600 pixels.

Gambar 7.18 Palet wel 7.4.14 Brusher

Palet ini akan aktif jika Anda sedang menggunakan tool brush. Brusher Palette berisikan jenis-jenis ukuran brush, diameter brush, sehingga Anda dapat memilih jenis brush sesuai dengan keinginan. Untuk menggunakannya Anda tinggal klik item brush.

Gambar 7.19 Palet Brusher 7.4.15 Character dan Paragraph

Palet ini digunakan untuk mengatur text seperti jenis huruf, ukuran huruf, alignment text, dan lain-lain. Untuk menampilkan palet tersebut klik menu Window > Character.



Gambar 7.20 Palet Character dan Paragraph



TENTANG PENULIS

Nama : Eli Astutik Blog : http://eliastutik.blogspot.com Email : [email protected] Cewek kelahiran 24 mei 1990 di kota tercinta yaitu SIDOARJO, senang mengotak-atik kode mengenai pemrograman. Dulunya sekolah di SMK PGRI 2 SIDOARJO, Jurusan Teknik Informatika (2006-2009) dan sekarang melanjutkan di Universitas Muhammadiyah Sidoarjo, Jurusan Teknik Informatika dan seorang ibu rumah tangga

s

panduan web

Documents

tunggu proses setup

masukkan cd program