2.2 World Wide Web (WWW) Awalnya informasi dapat dicari pada internet dengan menggunakan fasilitas Information Services berbasis Archie, Gopher dan

Transkripsi

1 5 2.2 World Wide Web (WWW) Awalnya informasi dapat dicari pada internet dengan menggunakan fasilitas Information Services berbasis Archie, Gopher dan WAIS (Wide Area Information) dan output yang dihasilkan berbasis text. Saat ini dengan teknologi World Wide Web (WWW), dimungkinkan untuk mengakses informasi secara interaktif, dan bentuk informasinya berupa tampilan grafis maupun text. Hal ini dimungkinkan dengan adanya Hypertext Transfer Protocol (HTTP) yang digunakan untuk mengakses suatu informasi yang disimpan pada suatu situs web (Website). Dengan teknologi hypertext akan menggabungkan beberapa jenis representasi dengan metode pengaksesan informasi dan menyajikannya dalam beragam bentuk informasi seperti text, grafik, suara, animasi, video, dan sebagainya. Untuk menggunakan sarana ini dibutuhkan aplikasi Web Browser. Dengan adanya fasilitas ini menjadikan web sebagai salah satu aplikasi yang paling luwes untuk menjelajahi internet. World Wide Web (WWW), sering disebut sebagai The Web adalah alat hipertext yang memberi kesempatan pada anda mencari dan menampilkan data berdasarkan kata-kata kunci. Apa yang membuat web sangat handal adalah ide dari hypertext; data yang berisi hubungan ke data lain. Sebagai contoh, sementara anda membaca informasi, anda mungkin memperhatikan bahwa beberapa kata atau frase ditandai dengan kata yang khusus misalnya Bold, Italic, Underline. Anda dapat meminta web untuk meloncat ke satu dari kata-kata atau frase-frase tersebut. Selanjutnya, web menelusuri hubungan, menemukan informasi yang relevan, dan menampilkanya. Dengan cara ini, anda dapat meloncat dari satu tempat ketempat-tempat yang lain, mengikuti hubungan logis yang ada.

2 6 2.3 Elemen-Elemen Web Dalam web terdapat elemen-elemen yang mendukung suatu homepage. Elemen ini dapat berupa web browser, protocol dan lain-lain. (Steve Browne, 1995, Hal 45-46) Web Browser Dalam mengakses web, diperlukan suatu program yang disebut Web Browser atau yang biasa disebut browser saja. Browser merupakan suatu program yang dirancang untuk mengambil informasi-informasi dari suatu server komputer pada jaringan internet. Informasi-infomasi tersebut biasanya dikemas dalam bentuk page (halaman), dimana setiap page memiliki beberapa link yang menghubungkan webpage tersebut ke sumber informasi lainnya. Dulu browser hanya dapat menampilkan informasi dalam bentuk teks saja. Pada tahun 1993, NSCA membuat browser Mosaic yang mempunyai kemampuan yang lebih baik dari browser-browser lain dan dapat menampilkan gambar. Setelah NCSA Mosaic, perkembangan browser amat pesat sekali terbukti dengan munculnya browser Netscape Navigator yang dibuat oleh Netscape Communicator. Netscape Navigator dapat menampilkan teks ataupun gambar lebih baik dibandingkan menggunakan Mosaic. Selain Netscape Navigator ada juga Internet Explorer (IE) yang dikeluarkan oleh Microsoft. 2.4 Hypertext Markup Language (HTML) Hypertext Markup Language (HTML) merupakan suatu script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri adalah suatu dokumen teks biasa yang mudah dimengerti dibandingkan bahasa pemrograman lainnya. Walaupun berbentuk dokumen text biasa, HTML memiliki perbedaan dengan dokumen lain seperti dokumen word, misalnya perbedaan yang paling mencolok adalah pada dokumen word, banyaknya karakter akan terbatasi

3 7 oleh besarnya kertas sehingga jika teks yang ada di dalamnya banyak ia akan terdiri dari banyak halaman pula. Sedangkan HTML tidak memiliki batas teks, sehingga tidak ada pemisah halaman 1, 2, dan seterusnya. HTML merupakan bahasa pemrograman fleksibel di mana kita bisa meletakkan skrip dari bahasa pemrograman lain seperti JAVA, Visual Basic, dan lain-lain, jika HTML tersebut tidak dapat mendukung suatu perintah pemrograman tertentu. Browser tidak akan menampilkan kotak dialog Syntax Error jika terdapat penulisan kode yang keliru pada skrip HTML sepanjang kode-kode yang dituliskan merupakan kode-kode. Hypertext dalam HTML berarti bahwa kita dapat menuju ke suatu tempat, misalnya website atau halaman homepage lain, dengan cara memilih suatu link yang biasanya digaris bawahi atau diwakili oleh suatu gambar. Selain link ke website atau homepage halaman lain, hypertext ini juga memungkinkan kita menuju ke salah satu bagian dalam satu teks itu sendiri. Sedangkan Markup Language menunjukkan suatu fasilitas yang berupa tanda tertentu dalam skrip HTML dimana kita bisa men-set judul, garis, tabel, gambar dan lain-lain, dengan perintah khusus Elemen-Elemen HTML Elemen pada HTML akan memisahkan dokumen menjadi beberapa bagian, antara lain: a.elemen <HEAD> </HEAD> : merupakan bagian untuk menuliskan keterangan mengenai judul dokumen, nama pengarang, dan lain-lain. b. Elemen <BODY> </BODY> : merupakan bagian untuk menuliskan kode-kode layout untuk tampilan homepage. c.elemen <FRAMESET> </FRAMESET> : merupakan bagian untuk meletakkan kode-kode frame.

4 8 Sedangkan tag hanyalah bagian dari elemen. Tag adalah kode-kode yang digunakan untuk men-setting dokumen HTML. (Steve Browne, 1995, Hal 32). 2.5 Pengertian PHP PHP adalah sebuah bahasa scripting yang menyatu dengan tag-tag HTML dieksekusi di server, dan digunakan untuk membuat halaman web yang dinamis seperti halnya Active Server Pages (ASP) atau Java Server Page (JSP). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995, versi pertama ini berupa sekumpulan script PERL yang digunakan untuk membuat halaman web yang dinamis disitus pribadinya. Kemudian ia menulis ulang sriptscript PERL tersebut menggunakan Bahasa C, kemudian ditambah fasilitas untuk Form HTML, Koneksi MySQL maka meluncurlah PHP versi kedua yang diberi nama PHP/F1 pada tahun Versi ketiga dirilis pada pertengahan 1997, kemudian versi terakhir (PHP 4.0) dirillis pada oktober 2000 yang merupakan penyempurnaan dari PHP Scripting Engine Struktur Penulisan Script PHP Ada beberapa cara untuk penulisan script PHP, yaitu : a. <?php...script PHP?> b. <?...Script PHP?>

5 9 c. <script language= php >...Script PHP </script> d. <%...Script PHP %> Setiap baris dari kode PHP ditutup dengan tanda titik koma (;). Kode program PHP menyatu dengan tag-tag HTML dalam satu file, kode PHP diawali dengan tag <? dan ditutup dengan?>. File yang berisi tag HTML dan kode PHP ini diberi ekstensi (*.php), berdasarkan ekstensi ini pada saat file diakses, server akan tahu bahwa file tersebut mengandung kode PHP kemudian server akan mengeksekusi file tersebut. Kemudian output yang dihasilkan dalam bentuk HTML akan dikirim ke Browser Client yang mengakses file tersebut Penggunaan Spasi Spasi tidak berpengaruh pada penulisan baris perintah pada PHP, hal ini memudahkan dalam penulisan program agar program dapat lebih mudah dibaca.

6 Komentar Program Ada tiga macam style penulisan komentar program yang dapat digunakan, yaitu : a.c Style, komentar diawali dengan tag /* dan diakhiri dengan */, style ini digunakan untuk komentar yang lebih dari satu baris. b. C++ Style, komentar ini diawali dengan tag // dan hanya berlaku utuk satu baris komentar, untuk baris berikutnya harus diawali tag // lagi. c.bourne Shell Style, diawali dengan tag # untuk satu baris komentar Keistimewaan PHP Sejak dikembangkan sampai versi 4.0, PHP memiliki keistimewaan, diantaranya : 1. Life Cycle yang singkat, sehingga PHP selalu Up To Date mengikuti perkembangan teknologi-teknologi internet. 2. Cross Platform, PHP dapat digunakan di hampir semua web server yang ada di pasaran (Apache, Microsoft IIS, PWS, AOLserver, phttpd, fhttpd, dan Xitami) yang dijalankan pada berbagai sistem operasi (Linux, FreeBSD, Unix, Solaris, Windows). Dengan demikian, proses developing dapat dilakukan menggunakan sistem operasi yang berbeda dengan sistem operasi yang digunakan setelah publish (misalnya, developing di Windows kemudian dipasang di web server yang menggunakan sistem operasi Linux). 3. PHP mendukung banyak paket database baik yang komersil maupun nonkomersil, seperti PosgreSQL, MySQL, msql, Oracle, SQL, Informix, MicrosoftSQL Server, dan banyak lagi. 4. PHP memiliki tingkat akses yang lebih cepat. 5. PHP memiliki tingkat keamanan yang tinggi. 6. PHP diterbitkan secara free atau gratis.

7 Tipe data pada PHP PHP mengenal lima tipe data, yaitu Integer, Floating Point, String, Array dan Objects. Tipe data dari sebuah variabel akan ditentukan otomatis oleh PHP bergantung pada operasi yang sedang dilakukan menggunakan variabel tersebut Tipe Data Integer Tipe data integer meliputi semua bilangan bulat, besarnya range data integer pada PHP, yaitu antara 2,147,483,648 sampai +2,147,483,647 pada platform 32-bit. PHP akan secara otomatis mengkonversi data integer menjadi floating point jika berada di luar range diatas. Integer dapat dinyatakan dalam bentuk octal (basis 8), desimal (basis 10) atau heksadesimal (basis 16) Tipe Data Floating Point Floating Point merepresentasikan bilangan pecahan atau bilangan desimal. Range tipe data floating sama dengan range tipe data double pada bahasa C, yaitu antara 1.7E-308 sampai 1.7E+308. Floating Point dapat dinyatakan dalam bentuk desimal dan dalam bentuk pangkat Tipe Data String Sebuah data dengan String dinyatakan dengan mengapitnya menggunakan tanda petik tunggal ( ) maupun tanda kutip ganda ( ) Tipe Data Array Array adalah sebuah data yang mengandung satu atau lebih data dan dapat diindeks berdasarkan numerik maupun string

8 12 (Associative Array). Data yang dikandung oleh sebuah data array dapat dari tipe data lainnya bahkan dapat juga bertipe array (Multiple Array) Tipe Data Object Object adalah sebuah tipe data yang dapat berupa sebuah bilangan, variabel atau bahkan sebuah fungsi. Object dibuat dengan tujuan untuk membantu programmer yang terbiasa dengan Object Oriented Programming, meskipun fasilitas OOP yang disediakan oleh PHP masih sangat kurang Variabel Dalam PHP Variabel adalah sebuah tempat di memori untuk menyimpan data yang nilainya dapat berubah-ubah. Namun tidak seperti pada bahasa pemrograman lain yang mengharuskan kita untuk mendeklarasikan variabel terlebih dahulu, variabel dalam PHP tidak harus dideklarasikan sebelum variabel tersebut digunakan. Variabel diwakili oleh kata tertentu dengan aturan penulisan sebagai berikut : a.variabel dimulai dengan tanda dollar ($). b. Harus dimulai dengan huruf atau underscore ( _ ). c.tidak boleh menggunakan tanda baca. d. Case Sensitive atau penulisan nama variabel membedakan bentuk penulisan antara huruf kecil dan huruf besar Struktur Kendali Struktur kendali merupakan pengatur aliran program, mempunyai rangkaian perintah yang harus ditulis untuk memenuhi beberapa keadaan, yaitu : a.mengulang suatu perintah pernyataan bila kondisi terpenuhi.

9 13 b. Melanjutkan sebuah pernyataan bila kondisi terpenuhi. c.memilih sebuah pilihan dari beberapa alternatif bila kondisi terpenuhi. Struktur kendali dapat dibagi menjadi dua jenis, yaitu struktur kendali percabangan (pengambilan keputusan) dan pengulangan (looping) Percabangan Struktur kendali percabangan adalah struktur kendali yang memungkinkan pemilihan atas perintah yang akan dijalankan sesuai dengan kondisi tertentu. Ada tiga perintah percabangan dalam PHP, yaitu If, If..Else, dan Switch If Perintah ini digunakan untuk menjalankan satu atau lebih perintah yang menyatakan keadaan. Sintaks penulisannya adalah sebagai berikut : <? If (Kondisi) { Operasi Program; }?> If...Else Perintah ini mirip dengan kondisi if, hanya dapat digunakan untuk banyak pernyataan berkondisi. Fungsi ini menyatakan bahwa jika Kondisi terpenuhi, maka Operasi I dilaksanakan. Akan tetapi, jika Kondisi tidak terpenuhi, maka Operasi I diabaikan dan menjalankan Operasi II. Sintaks penulisannya sebagai berikut :

10 14 <? If (Kondisi) { Operasi I; } else { Operasi II; }?> Switch Perintah ini digunakan sebagai alternatif pengganti dari sintaks If...Else dengan Else lebih dari satu. Dengan perintah ini program percabangan akan semakin mudah dibuat dan dipelajari. Sintaks penulisannya adalah sebagai berikut : <? Switch (Kondisi) { Case Konstanta1 ; Pernyataan 1; Break; Case Konstanta2 ; Pernyataan 2; Break; Default; Pernyataan Default; }

11 15?> Pengulangan Digunakan untuk mengulang suatu perintah sebanyak yang diinginkan tanpa harus menulis ulang. Bahasa PHP mengenal tiga jenis perintah pengulangan, yaitu : For Digunakan untuk mengulangi perintah dalam jumlah pengulangan yang sudah diketahui. Pada perintah ini tidak perlu menuliskan suatu kondisi untuk diuji. Sintaks penulisannya adalah sebagai berikut : <? For (Nilai_Awal;Nilai_Akhir;Penambahan/Pengurangan) { Operasi Program; }?> While Perintah ini digunakan bila mengulangi suatu perintah sejumlah yang belum bisa ditentukan. Pengulangan akan terus berjalan selama kondisi masih bernilai benar. Sintaks penulisannya adalah sebagai berikut : <? While (Kondisi) { Operasi Program; }?>

12 Do Proses pengulangan akan berjalan jika kondisi yang diperiksa di while masih bernilai benar dan dihentikan jika kondisinya sudah bernilai salah. Sintaks penulisannya adalah : <? Do { Operasi; } While (Kondisi)?> Operator Operator adalah simbol yang digunakan untuk memanipulasi data, seperti penambahan dan pengurangan. Ada operator yang menggunakan satu operand, ada juga yang menggunakan dua operand. Operator dapat dikelompokkan dalam empat kategori, yaitu : a. Operator Aritmatika adalah operator yang berhubungan dengan fungsi matematika. b. Operator Logika adalah operator yang membandingkan TRUE dan FALSE. c. Operator Bitwise adalah operator yang membandingkan binary. d. Ada juga operator yang sering digunakan namun tidak termasuk dalam kelompok diatas.

13 17 Tabel 2.1 Operator Aritmatika Operator Operasi + Penambahan - Pengurangan * Perkalian / Pembagi % Sisa Pembagian ++ Penambahan dengan 1 -- Pengurangan dengan 1 Tabel 2.2 Operator Logika Operator Operasi = = Sama dengan!= Tidak sama dengan < Lebih kecil > Lebih besar <= Lebih kecil sama dengan

14 18 >= Lebih besar sama dengan AND atau && Logika AND OR atau Logika OR XOR Logika XOR! Logika NOT Tabel 2.3 Tabel Lain Operator Arti. Penggabungan String = Penugasan/pengisian nilai $ Mengacu pada variabel Sekilas Tentang Apache Apache adalah program kecil yang menjadikan sebuah komputer PC mempunyai web server pribadi. Meskipun kecil namun ketika seseorang membuat PHP, Apache akan banyak sekali membantu meskipun tidak secara keseluruhan, khususnya ketika seseorang mengerjakan script-script yang mengharuskan user untuk memakai Internet Information Server atau IIS secara utuh seperti script-script yang mengandung Server Component dan PHP mail. Apache merupakan web server yang paling banyak dipergunakan diinternet. Program ini pertama kali didesain untuk sistem operasi

15 19 lingkungan UNIX. Namun demikian, pada beberapa versi berikutnya Apache mengeluarkan programnya yang dapat dijalankan di windows NT. Saat ini Apache digunakan secara luas. Hal ini disebabkan karena programnya yang gratis, dengan kinerja relatif stabil. Dalam pengembangannya pun mempergunakan sistem bazar, yakni tiap orang dibuka kesempatan seluas-luasnya untuk dapat memberikan kontribusi dalam mengembangkan program. 2.6 MySQL MySQL Bersifat Relational Database Management System (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). PHP mendukung MySQL sebagai database yang dapat digunakan dalam PHP. MySQL merupakan turunan dari konsep utama dalam database, yaitu SQL (Structured Query Language). SQL adalah sebuah konsep pengoperasian database terutama untuk pemilihan dan pemasukkan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. Pemilihan MySQL sebagai program berbasis data didasarkan atas mudah dikoneksikan dengan PHP dan mempunyai program tambahan yang disebut PHPMyAdmin, yang memudahkan pembuatan basis data dengan menggunakan table PHPMyAdmin dapat dijalankan dengan cara mengetikan alamat sebagai berikut PHPMyAdmin merupakan sistem administrasi database MySQL berbasis web. Segala administrasi dan manajemen dapat dilakukan dalam tampilan web yang interaktif. Administrasi-administrasi yang dapat dilakukan dengan PHPMyAdmin, antara lain :

16 20 a. Create dan drop database b. Create, copy, dan alter table c. Delete, edit, dan menambah field d. Mengeksekusi pernyataan SQL e. Me-manage keys pada field, dan lain-lain MySQL mempunyai banyak keistimewaan (menurut buku Administrasi Database Server MySQL karangan Didik Dwi Prasetyo) yaitu, MySQL dapat berjalan stabil pada berbagai sistem operasi diantaranya adalah Windows, Linux, FreeBSD, Solaris, dan lainnya. MySQL didistribusikan secara Open Source. MySQL mempunyai tipe kolom yang sangat kompleks seperti Integer, Float, Double, Char, Varchar, Text dan lainnya. MySQL dapat digunakan oleh beberapa user dalam waktu yang bersamaan tanpa mengalami masalah atau konflik (Multi User). MySQL mempunyai beberapa level sekuritas seperti Level SubnetMask, nama user, izin akses user dengan sistem perizinan yang detail serta password terenkripsi. Secara umum akses ke database melalui tiga tahapan yaitu : 1. Koneksi ke database (tahap persiapan) 2. Query atau Permintaan data (tahap operasi) 3. Pemutusan koneksi (tahap selesai) Untuk mengaktifkan MySQL dilingkungan Windows maka harus dijalankan software server MySQL. Untuk Windows XP 2003 yang merupakan software servernya adalah mysql. Program ini terletak pada direktori c:\mysql\bin Beberapa Perintah Dasar MySQL 1. Statement CREATE Statement ini digunakan untuk membuat database atau table dalam suatu database. Sintaks untuk membuat database sebagai berikut :

17 21 a. CREATE DATABASE nama_database; Sedangkan sintaks untuk membuat table adalah sebagai berikut : b. CREATE TABLE nama_table (nama_kolom tipe_data panjang_kolom); 2. Statement SELECT Statement ini digunakan untuk menampilkan data didalam table, perintah ini memiliki cakupan yang sangat luas. Pada statement ini ada beberapa perintah yang dapat digunakan dan fungsi sebagai syarat dalam menampilkan data. Sintaksnya adalah sebagai berikut : SELECT nama_kolom FROM nama_tabel WHERE syarat1,syarat2; 3. Statement INSERT Statement ini digunakan untuk memasukkan data dalam kolom pada suatu table. Sintaksnya adalah sebagai berikut : INSERT INTO nama_table VALUES (kolom_1,kolom_2,kolom_n); 4. Statement UPDATE Statement ini digunakan untuk merubah atau memperbaharui data yang terdapat pada suatu table. Sintaksnya adalah sebagai berikut : UPDATE nama_table SET nama field1=nilai_baru WHERE syarat1, syarat2; 5. Statement RENAME Statement RENAME TABLE ini dapat digunakan untuk mengganti nama suatu table. 6. Statement DROP

18 22 Statement ini dapat digunakan untuk menghapus database, table, index, dan fungsi secara permanen. 7. Statement GRANT dan REVOKE Kedua statement ini digunakan untuk memberikan suatu hak kepada user ataupun mencabut hak tersebut. Untuk memberikan suatu hak pada user digunakan perintah GRANT. Sedangkan untuk mencabutnya digunakan perintah REVOKE. 8. Statement DELETE Digunakan untuk menghapus suatu baris dari suatu table. Jika menggunakan perintah ini tanpa perintah Where, semua baris akan di hapus dan mengakibatkan table menjadi kosong. 9. Statement ALTER TABLE Statement ini digunakan untuk memodifikasi struktur table. Statement ini dapat digunakan untuk menambah kolom, menghapus kolom, mengubah kolom, mengubah tipe data dan lain sebagainya Tool Administrasi MySQL memiliki banyak tool yang dapat digunakan untuk memudahkan administrasi. Salah satu tool yang akan dijelaskan yaitu WinMySQLadmin. WinMySQLadmin WinMySQLadmin merupakan tool khusus pada sistem operasi Windows. Tool ini akan di boot secara otomatis ketika masuk pada sistem Windows. Administrasi-administrasi yang dapat dilakukan dengan tool ini antara lain : 1. Mengontrol MySQL server 2. Konfigurasi file my.ini

19 23 3. Administrasi Database Fungsi API MySQL Agar dapat menampilkan hasil query pada browser klien, PHP memerlukan fungsi API (Aplication Programming Interface). Berikut ini beberapa fungsi API My SQL yang didukung oleh PHP. Tabel 2.4 Fungsi API PHP ke MySQL Nama Fungsi Kegunaan Mysql_affected_rows Untuk menampilkan nomor dari baris pada operasi sebelumnya. Mysql_close Untuk menutup koneksi MySQL Server. Mysql_connect Untuk melakukan koneksi dengan MySQL Server. Mysql_create_db Untuk membuat database baru pada MySQL. Mysql_data_seek Untuk memindahkan hasil internal. Mysql_db_name Untuk menampilkan data. Mysql_db_query Untuk mengirim perintah SQL ke Server MySQL. Mysql_drop_db Untuk menghapus sebuah database pada database MySQL. Mysql_error Untuk menampilkan pesan error berupa teks dari operasi yang terakhir dilakukan. Mysql_escape_string Untuk memasukkan string pada perintah query. Mysql_fetch_array Untuk menampilkan baris hasil dalam bentuk array asosiatif, array angka. Mysql_fetch_field Untuk mendapatkan informasi kolom dari hasil

20 24 Mysql_fetch_length Mysql_fetch_row Mysql_field_len dan ditampilkan sebagai objek. Untuk menampilkan panjang pada beberapa kolom baris terakhir. Untuk menampilkan baris hasil dalam bentuk array satu persatu. Untuk mendapatkan panjang ukuran dari spesifikasi kolom. Mysql_field_name Mysql_field_seek Mysql_field_table Mysql_field_type Mysql_free_result Mysql_get_client_info Mysql_get_host_info Mysql_get_server_info Mysql_insert_id Mysql_list_dbs Mysql_list_fields Mysql_list_tables Mysql_num_fields Mysql_num_rows Mysql_connect Mysql_query Mysql_result Mysql_select_db Untuk menampilkan spesifikasi nama pada kolom. Untuk menghasilkan field atau kolom tertentu. Untuk menghasilkan nama table tertentu. Untuk menghasilkan tipe pada kolom tertentu. Untuk membebaskan memori. Untuk mendapatkan informasi Client MySQL. Untuk mendapatkan informasi Host MySQL. Untuk mendapatkan informasi server pada MySQL. Untuk mendapatkan ID dari operasi insert yang dilakukan sebelumnya. Untuk menampilkan semua database yang ada pada MySQL Server. Untuk menampilkan semua kolom yang ada pada MySQL Server. Untuk menampilkan daftar table yang ada pada MySQL Server. Untuk menampilkan nomor pada hasil. Untuk menampilkan nomor baris pada hasil. Untuk membuka koneksi (hubungan) secara permanen atau tetap dengan MySQL Server. Untuk mengirimkan perintah SQL ke server MySQL. Untuk menampilkan hasil data. Untuk memilih sebuah database sebagai database sebagai database aktif.

21 25 Mysql_tablename Untuk mendapatkan nama table suatu database. 2.7 HomePage Setiap informasi disimpan pada suatu file yang berbeda-beda. File ini disebut halaman web (Web Page). Di dalam web page inilah tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lainnya, baik itu di dalam satu web page yang sama ataupun dalam web page lain pada website yang berbeda. Sebelum mengakses berbagai macam informasi pada suatu website, kita akan menemui suatu web pembuka yang disebut sebagai homepage. Page ini merupakan halaman pertama dari suatu web. Pada dasarnya Homepage adalah suatu sarana untuk memperkenalkan secara singkat tentang apa yang menjadi isi dari keseluruhan suatu website. (Isak Rickyanto, 2002, Hal 39). 2.8 Struktur Navigasi Penjejakan termasuk struktur terpenting dalam pembuatan suatu website dan gambarannya harus sudah ada pada tahap perencanaan. Peta penjejakan merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen pages. Peta penjejakan juga memberikan kemudahan dalam menganalisa keinteraktifan seluruh pages dalam web dan bagaimana pengaruh keinteraktifannya terhadap pengguna. Ciri khas peta penjajakan yaitu dapat digolongkan menurut kebutuhan akan obyek, kemudahan pemakaian, keinteraktifitasannya, dan kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu multimedia.

22 Linear Gambar 2.1 Navigasi Linear Linear (satu alur) merupakan struktur yang hanya mempunyai satu rangkaian cerita yang berurut. Dengan kata lain struktur ini hanya dapat menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat di tampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya dan tidak dapat menampilkan dua halaman sebelumnya atau dua halaman sesudahnya. Salah satu yang terpenting dari struktur ini adalah tidak diperkenankan terjadinya percabangan Hierarchical (Hirarki) Gambar 2.2 Hirarki

23 27 Struktur Hierarchi (bercabang) ini percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama kesatu), halaman utama ini akan mempunyai halaman percabangan yang dikatakan Slave Page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama Master Page (halaman utama kedua), dan seterusnya. Yang terpenting dari struktur penjejakan ini tidak diperkenankan adanya tampilan secara linear Non Linear Gambar 2.3 Non Linear Struktur penjejakan Non Linear (tidak berurut) merupakan pengembangan dari struktur penjejakan Linear. Pada struktur ini diperkenankan membuat penjejakan bercabang. Percabangan yang dibuat pada struktur Non Linear ini berbeda dengan percabangan pada struktur Hierarchi, karena pada percabangan Non Linear ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada Master Page dan Slave Page.

24 Composite Gambar 2.4 Composite Composite (campuran) atau disebut juga struktur penjejakan bebas merupakan gabungan dari ketiga struktur sebelumnya yaitu Linear, Non Linear dan Hierarchi. Jika suatu tampilan membutuhkan percabangan, maka dapat dibuat percabangan, dan bila dalam percabangan tersebut terdapat suatu tampilan yang sama kedudukannya maka dapat dibuat struktur Linear dalam percabangan tersebut. Setiap struktur peta penjejakan seperti yang baru dibahas mempunyai fungsi dan tujuan tersendiri, tidak ada yang lebih baik atau lebih buruk. Penggunaan peta penjejakan bergantung kepada kebutuhan dan tujuan dari web yang hendak dibuat. Semakin kompleks peta penjejakan yang digunakan, maka semakin sulit pula pembuatan page dari peta penjejakan tersebut.

25 Macromedia Dreamweaver MX Memulai Macromedia Dreamweaver MX 2004 Ada beberapa cara untuk memulai Macromedia Dreamweaver MX 2004, salah satunya dengan menggunakan tombol Start. Caranya yaitu klik tombol Start arahkan ke Program lalu pilih folder Macromedia Dreamweaver MX 2004 dan klik, seperti Gambar 2.5. Gambar 2.5 Macromedia Dreamweaver MX 2004 Seperti dikutip dari (Zak Ruvalcaba, 2002, Hal 2) Macromedia Dreamweaver MX 2004 yang sedang terbuka akan menampilkan sebuah bidang kerja yang membuka sebuah lembar kerja yang bernama Untitled Document [Untitled-1] seperti Gambar 2.6

26 30. Gambar 2.6 Bidang Kerja Dreamweaver MX 2004 Sebelum kita membuat web maka kita harus mengenal dulu fungsifungsi dasar yang terdapat pada Dreamweaver seperti Properti, Objek, Behaviors. (Isak Rickyanto, 2002, Hal 4-13) Property Properti berfungsi untuk menyeleksi suatu objek seperti untuk mengatur font, mengatur lurus kiri, tengah atau lurus kanan, dan juga untuk menge-link objek tersebut jika diingin menge-link nya, seperti Gambar 2.7. Gambar 2.7 Properti

27 31 a.format : Mengatur style paragraph, seperti paragraph, heading 1, heading 2, dan lain-lain. b. Link : Untuk menge-link suatu page. c.default Font : Mengubah bentuk font / tulisan. d. Size : Mengubah ukuran tulisan. e.b : Bold / tebal Object Dengan menggunakan Object kita dapat membuat berbagai macam objek seperti membuat objek, table, layer, dan sebagainya. Dengan menggunakan objek ini kita dapat mempermudah dan mempercepat kita dalam membuat Web. Karena Object ini dengan kata lain seperti shortcut kita. Seperti Gambar 2.8 Gambar 2.8 Object Behaviors Behaviors berguna untuk menyisipkan suara pada suatu objek, menyisipkan gambar pada gambar yang sudah ada, memanggil JavaSrcipt, memberikan Popup Massage dan lain-lain dengan mengklik symbol + pada sebelah kiri dan untuk menghapus perintah yang telah dibuat klik simbol -. Seperti pada Gambar 2.9

28 32 Gambar 2.9 Behaviors Membuat Web Dengan Dreamweaver Ketika membuka Dreamweaver akan terbuka lembar kerja yang sudah siap pakai, setelah itu kita dapat menyisipkan gambar, text, ataupun warna dasar web. Setelah itu kita dapat menyimpannya dengan cara klik menu File lalu pilih Save As ketik nama file yang kita inginkan dan kemudian tekan tombol OK, harus disimpan dalam bentuk (*.html). (Zak Ruvalcaba, 2002, Hal 29) Menulis Di Dalam Dreamweaver Salah satu fungsi suatu web adalah untuk memberi informasi kepada masyarakat. Agar para pemakai web tersebut tertarik untuk membaca isi dari suatu web tersebut maka web tersebut harus memberikan informasi yang bagus. Selain itu web tersebut juga harus mempunyai tampilan yang bagus, salah satunya adalah bentuk huruf dan tata letaknya. Dalam Dreamweaver, telah disediakan fasilitas untuk mengatur tulisan yang telah ditulis melalui tekan menu Text, kemudian dari menu tersebut paragraph format, font, besar tulisan, warna dan sebagainya dapat disesuaikan. Atau kalau ingin cepat, dapat mengaturnya melalui shortcut Properties. Cara mengatur tulisan didalam Dreamweaver sama seperti kalau mengatur tulisan didalam Microsoft Word. Selain menulis langsung didalam

29 33 Dreamweaver, dapat juga menulis dengan bantuan program lain seperti Adobe Photoshop. Karena didalam Adobe Photoshop terdapat fasilitas untuk memperbagus bentuk tulisan seperti yang di inginkan Memberi Warna Dasar Dalam membuat web tentu web tersebut harus mempunyai tampilan yang menarik Agar web itu menarik maka web itu harus di beri dengan warna-warna yang menarik, gambar-gambar yang lucu, atau dapat pula isi dari web itu. Pertama-tama yang akan dibahas adalah cara memberi warna pada web. Klik menu Modify lalu pilih Page Properties seperti pada Gambar Gambar 2.10 Modify

30 34 Setelah di klik maka dalam menu Page Properties akan muncul menu lagi seperti Gambar 2.11 Page Properties a. Title : Untuk memberi nama background. b. Background Image : Untuk memasukkan warna backgrond sendiri maka dapat mencarinya dan memasukannya dengan menekan tombol Browse. c. Background : Memuat warna-warna yang telah disediakan. d. Text : Warna untuk text yang akan digunakan e. Left Margin : Memberi batas kiri. f. Top Margin : Memberi batas atas. g. Margin Width : Lebar margin. h. Margin Height : Panjang margin. i. Image Transparency : Mengatur transparansi gambar.

31 35 Setelah memilih warna yang akan digunakan maka tekan Apply dan tekan tombol OK. Atau kalau mau memberi Transparansi pada warna maka dapat juga mengaturnya di Page Properties tadi Memberi Images Tentu saja di dalam sebuah web akan terdapat banyak gambar-gambar yang menarik perhatian dan akan lebih menarik jika gambar tersebut mengandung unsur yang berbau multimedia. Jika ingin memasukkan gambar di dalam Dreamweaver, pertama-tama tekan menu Insert lalu pilih Images seperti Gambar Gambar 2.12 Menu Insert Image Selain dari menu Insert dapat juga menekan shortcut dari menu Objek seperti yang telah di jelaskan diatas. Setelah di klik menu Images tadi maka akan muncul menu seperti Gambar 2.13.

32 36 Gambar 2.13 Select Image Source a. Look In : Untuk mencari letak file image. b. File name : Nama file image. c. File of type : Jenis extension file. Setelah gambar dipilih, sisipkan gambar tersebut kedalam homepage lalu tekan Select. Maka gambar tersebut akan muncul di dalam lembar kerja. Untuk mengatur besar kecilnya gambar yang di inginkan dapat diatur melalui menu Property seperti yang sudah dibahas diatas, tentunya setelah gambar tersebut telah dipilih Link Dalam membuat web tentu saja terdapat banyak page atau halaman, untuk menghubungkan halaman-halaman tersebut gunakan perintah Link (sambung / penyambung) yang terdapat pada Property. Dalam menge-link tentu saja harus terdapat banyak halaman yang harus terkait satu sama lain. Suatu gambar atau suatu kalimat dapat dijadikan penghubung ke suatu halaman lain. Contohnya, jika mempunyai suatu gambar yang diinginkan menjadi

33 37 tombol penyambung maka pertama-tama pilih gambar tersebut dan kemudian dengan menu Property yang terdapat fasilitas Link maka gambar tersebut dapat dijadikan penghubung ke halaman lain. (Zak Ruvalcaba, 2002, Hal 47-53). Gambar 2.14 Cara Link Seperti contoh diatas dimana tombol yang telah dipilih dan pada menu Property akan memunculkan menu Link. Lalu cari halaman yang ingin di Link dengan menu Browse (yang berbentuk folder disebelah Link). Jika telah memilih halaman mana yang akan di Link maka tombol tersebut telah menjadi suatu penghubung Menjalankan Pages Yang telah Selesai Jika web yang dibuat telah selesai dan jika ingin menjalankannya maka tekan tombol F12 pada keyboard dan web yang telah dibuat akan ditampilkan dalam bentuk site-site yang biasa dilihat di Internet. Tentu saja sebelum menjalankannya harus disimpan terlebih dahulu.

34 Sistem Hardware Yang Di Perlukan Untuk menginstal Macromedia Dreamweaver MX 2004, suatu komputer harus memenuhi persyaratan agar dapat menginstalnya. Persyaratan minimal yang diperlukan adalah sebagai berikut : a. Sistem operasi Windows XP 2003 b. Intel Pentium 4 c. RAM 128 MegaByte DDR d. Diperlukan kapasitas hardisk minimal 40 GigaByte 2.11 Sistem Sofware Yang Di Perlukan Sedangkan sistem software yang diperlukan antara lain : a. Macromedia Dreamweaver MX 2004 b. Macromedia Flash MX 2004 c. Macromedia Fireworks MX 2004 d. Browser : Internet Explorer, Netscape Communicator, dan lain-lain Software Pendukung Selain menggunakan Macromedia Dreamweaver MX 2004, penulis juga menggunakan software-software pendukung seperti : Macromedia Flash MX 2004 Macromedia Flash MX 2004 adalah perangkat lunak aplikasi untuk pembuatan animasi yang diinginkan pada web, Macromedia Flash MX 2004 mampu melengkapi situs web dengan beberapa macam animasi, suara, animasi interaktif, dan lain-lain. Gambar Macromedia Flash dapat diubah kedalam format lain untuk digunakan pada pembuatan desain yang tidak langsung mengadaptasi Flash. Dapat dibayangkan bila suatu halaman web yang berisi gambar statis, dan pengunjung membuka halaman-halaman lain dengan tampilan

35 39 yang monoton. Pengunjung akan bosan dan pada akhirnya berpindah dengan membuka situs yang lebih menarik, kini situs-situs web telah banyak menampilkan animasi yang menarik dengan Flash, sehingga lama-kelamaan menjadi hal yang biasa. Namun penyajian yang dinamis dengan kreatifitas yang meningkat akan membuat situs tetap menarik bagi para pengunjung. Pada saat ini, multimedia mempunyai arti tak hanya integrasi antara teks dan grafik sederhana saja, tetapi dilengkapi dengan suara dan animasi, sambil mendengarkan penjelasan dalam bentuk teks. Flash dilengkapi dengan alat-alat untuk menggambarkan (tool) seperti garis, lingkaran, kotak, dan lain-lain. Fungsi dari icon yang terdapat dalam tool yang ada pada perangkat lunak aplikasi grafik lainya ToolBox ToolBox berisi gambar alat-alat dengan icon untuk masing-masing fungsi. ToolBox terdiri dari empat bagian yaitu tools, view, color, dan option seperti pada gambar dibawah ini: a. Pensil Tool Untuk menggambar garis seperti menggunakan pensil. b. Pens Tool Untuk menggambarkan path seperti garis lurus dan grafik lurus. c. Line Tool Untuk menggambar garis lurus. d. Oval Tool Untuk menggambar lingkaran dan elips. e. Rectangle Tool Untuk menggambar kotak. f. Brush Tool Untuk menggambar menggunakan brush. g. Zoom Tool Untuk memperbesar dan memperkecil gambar. h. Hand Tool Untuk menggeser gambar. i. Stroke Color Untuk menentukan warna outline pada gambar.

36 40 j. Fill Color Untuk mewarnai gambar. Gambar 2.15 Tool Box pada Flash MX Stage Seperti film, Flash movie mempunyai panjang yang terdiri dari sejumlah frame. Stage merupakan bidang yang berwarna putih, diman semua objek seperti gambar, teks, dan foto ditempatkan dan diatur didalamnya. Gambar 2.16 Stage pada Flash MX

37 Panel Panel berfungsi untuk menampilkan serta mengubah informasi objek yang berada di stage. terdapat beberapa macam panel dalam Flash, dan setiap panel menampilkan informasi dari suatu objek yang kita kehendaki Timeline Digunakan untuk mengatur semua jalan cerita, dimana aktor ditampilkan dan menghilang. Suatu objek yang muncul diatur dalam timeline tersebut, komponen utama timeline adalah layer, frame, dan paly head Frame Didalam timeline, anda dapat bekerja dengan frame dan keyframe. Keyframe adalah frame dimana anda mendefinisikan perubahan animasi termasuk frame action untuk memodifikasi movie. Keyframe ini adalah merupakan bagian yang sangat penting didalam animasi. Anda dapat mengubah panjang animasi keyframe dengan menggunakan drag keyframe didalam timeline Macromedia Fireworks MX 2004 Apabila anda berhasil menginstal program, maka akan terdapat shortcut pada start menu, dan pada display. Untuk menjalankannya, ikuti langkah berikut: 1. Klik Start pada taskbar, Program Macromedia Fireworks MX

38 42 2. Aplikasi akan ditampilkan dalam keadaan tools tidak aktif (Disable). 3. Untuk membuka dokumen baru, pilih menu File New, maka akan muncul dialog box seperti berikut: Gambar 2.17 Tampilan pengatur ukuran dan warna kanvas 4. Masukan lebar, tinggi dan resolusi untuk halaman kerja anda. Secara default lebar dan tinggi kanvas (halaman kerja) adalah 800 x 600 pixel. Dengan resolusi 72 ppi (pixel per inci). 5. Pilih warna kanvas anda. Putih, transparan dan custom. Warna custom dapat anda ubah dengan warna yang lain dengan memilih pada kotak warna 6. Pilih OK. Ketika interface program ditampilkan, maka halaman kerja akan ditampilkan dengan ukuran sesuai setting anda. Tool, panels serta property inspector juga ditampilkan. Tool panels secara default akan ditampilkan di sebelah kiri halaman kerja, sedangkan property inspector akan terlihat di bawah stage, dan di sebelah kanan halaman kerja terdapat tab-tab panel. Apabila anda tidak ingin menampilkan tab-tab dan panel tool, tekan tombol TAB pada keyboard.

39 43 Gambar 2.18 Tampilan halaman kerja Toolbars Toolbars terdiri dari dua macam yaitu toolbar main dan toolbar modify. Apabila toolbar tersebut belum aktif, Anda dapat menampilkanya dari menu Windows Toolbar Main Toolbar ini mengandung perintah yang terdapat pada menu File dan menu Edit.

40 44 Gambar 2.19 Tampilan Toolbar Berikut ini masing-masing fungsi setiap tools : a. Tools Pemilih (select tools), digunakan untuk memilih sebuah obyek yang akan digerakan, diubah skalanya, dirotasi. Diskew, atau dicrop, berfungsi juga untuk menghapus obyek diluar obyek yang dicrop. b. Tools Bitmap (Bitmap Tools), ini digunakan untuk membuat, mengedit, dan mewarnai gambar bitmap. c. Tools Vector (Vector Tools), objek yang dibuat menggunakan tool ini akan mempunyai mode vector. d. Tools Web (Web Tools), kelebihan Macromedia Fireworks MX 2004 ini adalah kita dapat membuat obyek interaktif untuk aplikasi web menggunakan tool ini yaitu slice ataupun hotspot.dengan memilih pada obyek yang akan menjadi obyek interaktif seperti rollover ataupun peng-link-an. e. Tools Warna (Color Tools), tools ini terbagi dalam beberapa tool yaitu fill color, yang digunakan untuk mengatur warna dari obyek. Stroke color, digunakan untuk memberi warna pada outline obyek. Default stroke / fill color, memilih warna default yaitu hitam untuk warna stroke dan putih untuk warna stroke. No stroke / fill color dan swap brus / fill color, membuat obyek tidak mempunyai warna pada garis batas obyek dan warna obyek f. Tools Tampilan (View Tools), terdapat beberapa tool untuk mengatur tampilan halaman kerja. Full screen mode untuk menampilkan halaman kerja maximize tanpa menampilkan menu dan toolbar. Full screen with menu mode, untuk menampilkan halaman kerja maximize dengan menu bar. Standar screen mode, menampilkan

41 45 halaman kerja secara default, yaitu terdapat toolbar dan menu windows. Zoom, untuk memperbesar tampilan obyek terpilih. Sedangkan hand tool, digunakan untuk menggerakan tampilan windows. Tool ini digunakan ketika bekerja dengan halaman kerja yang besar.