4 2.1 Internet
Interconnected network, atau yang lebih dikenal dengan internet adalah sebuah sistem komunikasi global yang menghubungkan beberapa komputer melalui jaringan diseluruh dunia. (http://en.wikipedia.org/Internet : 2009)
Secara umum, internet merupakan suatu jaringan komputer global yang terbentuk dari jaringan lokal dan regional yang memungkinkan komunikasi data antar komputer-komputer yang terhubung ke jaringan tersebut.
Gambar 2.1 Jaringan internet
Internet lahir pada masa perang dingin sekitar tahun 1969 dan digunakan pertama kali untuk keperluan militer. Pada saat itu, Departemen Pertahanan Amerika Serikat membangun sebuah jaringan dengan menghubungkan semua komputer di daerah-daerah vital untuk mengatasi masalah bila sewaktu-waktu terjadi serangan nuklir. Untuk itulah dibentuk sebuah proyek bernama ARPANET (Advanced Research Projects Agency Network) yang dibuat oleh DARPA, suatu bagian dari Departemen Pertahanan Amerika Serikat yang bekerja sama dengan beberapa universitas dan research facilities.
ARPANET pada awalnya sangat kecil dan hanya menghubungkan tiga unit komputer di California dan satu di Utah. Tidak lama kemudian, proyek ini berkembang diseluruh daerah, dan semua universitas di negara bagian tersebut ingin bergabung, sehingga membuat ARPANET kesulitan untuk mengaturnya. Oleh sebab itu, ARPANET dibagi menjadi dua yaitu “MILNET” untuk keperluan militer dan “ARPANET” baru yang lebih kecil untuk non-militer.
Gabungan dari kedua jaringan ini akhirnya dikenal dengan nama DARPA Internet, yang kemudian disederhanakan menjadi internet. Internet mulai komersial dan berkembang sangat pesat sejak tahun 1990.
2.2 World Wide Web (WWW)
World Wide Web (WWW) adalah suatu sistem informasi berbasiskan hypertext yang menjadikan suatu kalimat hypertext didalam dokumen tersebut sebagai penunjuk kepada informasi lainnya yang lebih lengkap dan saling berhubungan. (http://en.wikipedia.org/WWW : 2009)
Untuk dapat mengakses WWW, maka sebuah sistem harus terhubung dan berada didalam lingkup TCP/IP internasional (internet). Selain itu, diperlukan juga sebuah aplikasi untuk mengakses WWW tersebut, yaitu sebuah web browser atau yang lebih dikenal sebagai browser.
2.3 Web Browser / Browser
Web browser adalah sebuah aplikasi yang digunakan untuk menjelajahi internet. (http://en.wikipedia.org/Web_browser : 2009)
Dulu, browser hanya dapat menampilkan sebuah informasi dalam bentuk teks saja, kemudian pada tahun 1993 NSCA membuat sebuah browser yang diberi nama Mosaic, yang memiliki kemampuan untuk menampilkan gambar.
Seiring dengan berjalannya waktu, selain NSCA Mosaic muncul pula Netscape Navigator Communicator. Munculnya Netscape Navigator membuat perkembangan browser menjadi semakin pesat. Netscape Navigator memiliki
kecepatan yang lebih baik dibandingkan NSCA Mosaic dalam menampilkan informasi baik berupa teks ataupun gambar.
Perkembangan browser menjadi semakin semarak ketika Microsoft, pembuat software terbesar di dunia ikut terjun kedalam dunia WWW dengan mengeluarkan browser yang diberi nama Internet Explorer (IE). Kini, semakin banyak browser-browser baru bermunculan, diantaranya adalah Mozilla Firefox, Opera, dan yang terbaru adalah browser yang dikeluarkan oleh mesin pencari raksasa Google yang diberi nama Google Chrome.
2.4 Web Server
Web Server adalah sebuah software yang memproses dan melayani permintaan file-file dari web browser. (http://en.wikipedia.org/Web_server : 2009)
Web server yang dimaksud disini adalah simulasi dari sebuah web server secara fisik. Web server biasanya juga disebut sebagai HTTP server karena menggunakan protokol HTTP sebagai basisnya.
Beberapa web server yang sering digunakan diantaranya adalah PWS, IIS, Apache dan sebagainya.
2.5 Client-side – Server-side
Interaksi yang terjadi didalam dunia internet dikategorikan menjadi dua, yaitu: 2.5.1 Client-side
Client-side adalah suatu interaksi satu arah. Proses yang terjadi tidak menyebabkan adanya perubahan data maupun ruang yang ada didalam situs tersebut. Hal ini mengakibatkan situs yang tercipta bersifat statis.
Gambar 2.2 Proses pada client-side 2.5.2 Server-side
Hubungan komunikasi yang terjadi pada server-side, merupakan interaksi yang menyebabkan beberapa perubahan data maupun perubahan ruang yang menyebabkan terciptanya suatu situs yang dinamis yang disebabkan adanya permintaan atau request yang mengakibatkan adanya tanggapan atau response.
Komunikasi dapat tercipta apabila adanya interaksi antara dua objek atau lebih. Dalam melakukan interaksi, dibutuhkan suatu bahasa penghubung yang menyebabkan adanya interaksi dan suatu media penampung data yang sering disebut dengan database.
2.6 Apache
Gambar 2.4 Logo Apache
Apache (A PAtCHy sErver) merupakan salah satu web server yang memiliki tujuan untuk mengirim kembali sintaks yang diberikan oleh user dan menampilkan kembali dalam bentuk dan format hasilnya saja.
Gambar 2.5 Proses pada Apache
Sesuai dengan namanya, Apache mengambil suatu patch atau bagian dari program yang diberikan. Beberapa keunggulan yang diberikan, diantaranya adalah :
1. Memiliki kemampuan pembacaan yang tinggi dan mudah disesuaikan.
2. Memiliki tingkat keamanan yang tinggi. Sangat berguna bagi para penyimpan data yang memiliki tingkat kerahasiaan tertentu.
2.7 HTML
HTML (Hyper Text Markup Language) merupakan bentuk standar untuk isi dan tampilan yang ada di halaman WWW. (http://www.w3schools.com/ : 2009)
HTML diawali dan diakhiri dengan suatu perintah yang sudah baku yang disebut dengan tag. Diantara kedua tag tersebut terdapat nilai-nilai dan atribut-atribut. HTML merupakan bahasa pemrograman fleksibel karena bisa meletakkan script dari bahasa pemrograman lain seperti PHP, Javascript, VB script dan C.
Dokumen HTML adalah file teks murni yang dapat dibuat dengan sembarang teks editor (misalnya notepad). Dokumen HTML merupakan sebuah halaman situs yang dibaca browser dan berisikan informasi tentang halaman situs tersebut. Suatu dokumen HTML disimpan dalam sebuah file berekstensi *.html. Tidak seperti bahasa pemrograman lainnya, HTML tidak mengenal jumping atau looping. Script-script HTML dibaca oleh browser dari atas ke bawah tanpa adanya pengulangan dan lompatan.
Sebuah dokumen HTML diawali dengan tag <html> dan diakhiri dengan tag </html>. Sebuah dokumen HTML dibagi menjadi dua bagian, yaitu bagian kepala (header) dan bagian inti (body). Sehingga setiap dokumen HTML harus memiliki pola dasar sebagai berikut :
Gambar 2.7 Pola dasar HTML dibrowser 2.8 PHP
PHP (PHP Hypertext Preprocessor) adalah sebuah bahasa interpreter yang memiliki kemiripan dengan bahasa C dan Perl, mempunyai kesederhanaan dalam perintah dan digunakan untuk pembuatan aplikasi web. (http://www.php.net/ : 2009)
PHP dibuat oleh Rasmus Lerdoff pada musim gugur tahun 1994. Pada awalnya, PHP digunakan pertama kali pada situsnya untuk mencatat siapa saja yang berkunjung untuk melihat biodatanya. Dengan menggunakan PHP, maka maintenance situsnya menjadi lebih mudah.
Versi pertama yang dirilis pada tahun 1995 dikenal dengan tool Personal Home Page, terdiri atas engine parser yang sangat sederhana, hanya mengerti beberapa makro khusus dan beberapa utilitas yang sering digunakan pada halaman-halaman situs, seperti buku tamu, hit counter, dan lainnya.
PHP merupakan server-side scripting. Artinya proses kerja dari PHP dimulai dari permintaan client browser atas halaman web tertentu kepada server, kemudian server akan mencari dan memprosesnya terlebih dahulu lalu mengirimkan hasilnya saja kepada browser.
Script PHP dapat dibuat dengan menggunakan sembarang teks editor dan disimpan dalam sebuah file teks yang diberi ekstensi *.php. Penulisan script PHP yaitu dengan cara disisipkan didalam tag-tag HTML, diawali dengan tag <?php dan diakhiri dengan tag ?>. Setiap baris perintah / statement harus diakhiri dengan menggunakan tanda ; (semicolon / titik koma). Umumnya setiap perintah / statement dituliskan dalam satu baris.
Berikut ini merupakan contoh sederhana dari penulisan sintaks PHP : <?php phpinfo(); ?>
2.8.1 Indentifier PHP
Identifiter dalam PHP bersifat case-sensitive. Artinya, PHP membedakan antara huruf kapital dan huruf kecil. Namun untuk reserved word dalam PHP tidak bersifat case-sensitive, seperti contoh echo dan ECHO mempunyai arti yang sama.
Identifier dalam PHP terdiri dari : 1. Variabel
Variabel adalah tempat untuk menyimpan data. Penulisannnya diawali dengan karakter $ dan diikuti dengan huruf sebagai karakter pertama, lalu kombinasi huruf dan angka. Tidak boleh ada karakter khusus, tanda baca, spasi dan reserved word PHP dalam penamaan variabel. Yang diperbolehkan hanya karakter garis bawah (_) atau underscore.
2. Konstanta
Konstanta adalah suatu nilai yang tidak berubah selama proses dari program. PHP mempunyai built-in konstanta seperti PHP_VERSION, TRUE dan FALSE, dan PHP_OS. Selain built-in konstanta yang sudah disediakan oleh PHP, PHP juga menyediakan fungsi define(); untuk membuat konstanta sendiri.
2.8.2 Tipe Data PHP
Tipe data dari sebuah variabel akan ditentukan otomatis oleh PHP bergantung pada operasi yang sedang dilakukan oleh variabel tersebut. Tipe data dalam PHP terdiri dari :
1. Integer
Tipe data integer meliputi semua bilangan bulat. Range dari tipe data ini antara -2,147,483,648 sampai dengan +2,147,483,647 pada sistem yang ber-platform 32 bit. PHP akan secara otomatis mengkonversi tipe data integer menjadi floating point jika berada diluar range diatas.
2. Floating Point
Floating point merepresentasikan bilangan pecahan atau bilangan desimal, range dari tipe data ini yaitu antara 1.7E-308 sampai 1.7E+308.
3. String
Sebuah data dengan tipe data string dinyatakan dengan mengapitnya mengunakan tanda petik tunggal (‘ ‘) maupun ganda (“ “). Perbedaannya adalah, jika kita menggunakan tanda petik tunggal, maka pada string itu tidak dapat dimasukkan variabel dan escape sequence handling.
4. Array
Array adalah sebuah tipe data yang mengandung satu atau lebih data, dan dapat di indeks berdasarkan numerik maupun string. Data yang dikandung pada sebuah array bisa dari tipe data yang lain bahkan dapat juga bertipe array. PHP memperbolehkan elemen dari array terdiri atas data dengan tipe yang berbeda-beda.
5. 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.
2.8.3 Struktur Kontrol
Script-script PHP dijalankan dari baris pertama kemudian ke baris berikutnya sampai baris terakhir. Untuk program yang sederhana dalam menampilkan hasil dan memasukkan data proses dari satu statement ke statement berikutnya dilakukan secara urut sesuai dengan letak urutannya. Namun, ketika program yang dibuat kompleks, proses yang ada tidak hanya proses yang berurutan, tetapi proses yang terjadi adalah proses penyeleksian kondisi, proses perulangan dan proses perlompatan. Ada dua jenis struktur kontrol di dalam PHP, yaitu :
1. Penyeleksian Kondisi
Statement yang digunakan dalam penyeleksian kondisi adalah statement if, else, elseif dan switch.
Contoh : <?php
if ($a > $b)
echo "a lebih besar daripada b"; ?>
Pada sintaks diatas, kondisi dilihat dari kebenarannya. Jika kondisi bernilai benar atau true, PHP akan memproses statement tersebut. Namun jika kondisi bernilai salah atau false, statement tersebut tidak akan diproses.
Statement else dan elseif digunakan jika kita ingin mengeksekusi statement lain. Statement else dan elseif hanya akan dieksekusi jika kondisi if bernilai salah atau false.
Contoh :
<?php
if ($a > $b) {
echo "a lebih besar daripada b"; } elseif ($a == $b) {
echo "a sama besar dengan b"; } else {
echo "a lebih kecil daripada b"; }
?>
Statement switch akan menyeleksi kondisi yang diberikan kemudian membandingkan hasilnya dengan konstanta-konstanta yang berada didalam case. Pembandingan akan dimulai dari konstanta yang pertama hingga konstanta terakhir. Jika hasil dari kondisi sama dengan nilai konstanta tertentu, maka statement tersebut akan dijalankan.
Contoh : <?php
switch ($i) { case "merah":
echo "i berwarna merah"; break;
case "kuning":
echo "i berwarna kuning"; break;
case "hijau":
echo "i berwarna hijau"; break;
} ?>
2. Perulangan (looping)
Dalam PHP terdapat tiga jenis perulangan, yaitu for, while dan do-while. Jika perulangan dilakukan dengan statement for, statement tersebut akan terus dikerjakan sampai dengan nilai akhir dengan peningkatan yang telah dilakukan.
Contoh : <?php
for ($i = 1; $i <= 10; $i++) { echo $i;
} ?>
Untuk perulangan dengan menggunakan while, proses perulangan akan terus dilakukan selama kondisi yang diseleksi masih bernilai benar dan akan berhenti jika kondisi bernilai salah.
Contoh : <?php $i = 1; while ($i <= 10) { echo $i++; } endwhile; ?>
Perulangan dengan menggunakan do-while tidak jauh berbeda dengan perulangan while. Hanya saja, perulangan do-while menempatkan suatu kondisi yang bernilai benar pada akhir statement.
Contoh : <?php $i = 0; do { echo $i; } while ($i > 0); ?>
Struktur kontrol PHP seperti if, else, elseif, switch, while, do-while ataupun for tidak harus menggunakan kurung kurawal ({}) sebagai pembuka dan penutup blok masing-masing struktur. Namun harus diakhiri dengan statement endif untuk if, else dan elseif, endswitch untuk switch, endwhile untuk while, dan endfor untuk for.
2.9 Database dan MySQL
Database adalah sekumpulan data terstruktur yang disimpan dalam satu atau beberapa buah file. (MySQL Reference Manual : Hal-4 : 2009)
Database merupakan salah satu hal penting dalam pembuatan suatu situs yang disertai dengan aplikasi karena database berfungsi sebagai wadah atau tempat penampungan data yang telah diberikan oleh user. Dengan menggunakan database, maka proses update dan maintenance data menjadi lebih mudah.
2.9.1 Relational Database Management System (RDBMS)
Relational Database Management System (RDBMS) atau sistem manajemen database relasional adalah database yang dikelompokkan kedalam beberapa tabel dimana masing-masing tabel saling berhubungan antara tabel yang satu dengan tabel yang lainnya. (MySQL Reference Manual : Hal-5 : 2009)
RDBMS merupakan salah satu model dari suatu sistem manajemen database. RDBMS memiliki beberapa komponen dasar, antara lain :
9 Database (“DB” dalam RDBMS), sebagai tempat penampungan data yang distrukturkan kedalam :
Data yang disimpan kedalam beberapa tabel. Setiap tabel terdiri atas baris dan kolom.
9 Sistem Manajemen (“MS dalam RDBMS), software yang memungkinkan data dapat dimasukkan, diubah, diambil kembali (dibaca), dicari, dan dihapus record-nya.
9 Relational (“R” dalam RDBMS), menunjukkan bahwa data yang ada didalam suatu tabel dapat berhubungan dengan data yang ada di tabel yang lainnya.
2.9.2 MySQL
MySQL (dibaca “My Ess Que Ell”) adalah sebuah software sistem manajemen database yang dikembangkan, didistribusikan, dan didukung oleh MySQL AB, sebuah perusahaan komersial yang berlokasi di Swedia. (MySQL Reference Manual : Hal-4 : 2009)
MySQL merupakan salah satu software sistem manajemen database yang populer dikalangan web programmer. Kepopuleran ini dikarenakan MySQL merupakan sebuah software open source yang bersifat gratis, memiliki performa query database yang cepat dan jarang bermasalah.
PHP dan MySQL merupakan kombinasi yang paling umum digunakan dalam pembuatan dan pengembangan situs web berbasis database. Karena kedua kombinasi ini memberikan kemudahan bagi para pengembang situs web dan menghasilkan suatu situs yang dinamis, interaktif dan memberikan kemudahan dalam maintenance.
Statement MySQL dibedakan menjadi dua, yaitu : 1. Data Definition Language (DDL)
Data definition language merupakan statement yang digunakan untuk mendefinisikan suatu database dan struktur datanya. Diantaranya adalah statement untuk membuat database, membuat tabel, membuat indeks dan lain-lain.
2. Data Manipulation Language (DML)
Data manipulation language merupakan statement untuk melakukan manipulasi atau pengelolaan data yang ada didalam database. Diantaranya adalah statement untuk menambah data, mengubah data, menghapus data, mengambil dan mencari data.
Berikut adalah beberapa fungsi PHP – MySQL : 1. mysql_connect()
Digunakan untuk melakukan koneksi kepada server. Sintaksnya :
$connect=mysql_connect(“host”, “username”, “password”)
$connect : Merupakan nama variabel penampung status hasil koneksi kepada database.
host : Lokasi dimana MySQL dipublikasikan.
username : String dengan isi data nama user yang terdaftar dalam
MySQL yang digunakan untuk mengakses data pada MySQL. password : Kata sandi dari username untuk masuk kedalam database.
2. mysql_select_db()
Digunakan untuk memilih database yang ada didalam MySQL. Sintaksnya :
$db=mysql_select_db(“nama_database”, $connect)
$db : Merupakan variabel untuk memilih database. $connect : Merupakan koneksi kedalam database yang telah
berhasil.
nama_database : Database yang akan diproses.
3. mysql_query()
Digunakan untuk mengeksekusi perintah SQL untuk memanipulasi database yang berhasil melakukan koneksi.
Sintaksnya :
$result=mysql_query(“statemen”)
$result akan berupa record set apabila statement berupa perintah select.
2.10 Struktur Navigasi
Navigasi merupakan rancangan hubungan dan rantai makanan dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen dengan pemberian perintah dan pesan. (http://en.wikipedia.org/Navigation_structure : 2009)
1. Linier
Linier (satu jalur) merupakan struktur yang hanya mempunyai satu rangkaian cerita yang terurut. Struktur ini menampilkan satu demi satu tampilan layar secara berurutan. Tampilan yang dapat ditampilkan pada struktur ini adalah satu halaman sebelumnya atau satu halaman sesudahnya tidak dapat dua halaman sebelumnya atau sesudahnya. Pada struktur linier tidak diperbolehkan adanya percabangan.
Gambar 2.9 Struktur navigasi linear 2. Hirarki
Hirarki (bercabang) merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama disebut dengan master page (halaman utama), dan akan mempunyai halaman percabangan yang disebut sebagai slave page (halaman pendukung).
3. Non-Linier
Non-Linier (tidak berurutan) merupakan pengembangan dari struktur navigasi linier. Pada struktur non-linier diperbolehkan membuat navigasi bercabang tetapi berbeda dengan struktur hirarki. Walaupun terdapat percabangan tetapi tidak ada master page dan slave page.
Gambar 2.11 Struktur navigasi non-linear 4. Komposit
Komposit merupakan gabungan dari ketiga struktur sebelumnya, yaitu linier, non-linier dan hirarki. Struktur ini biasa disebut struktur bebas. Maksudnya, jika dalam suatu tampilan membutuhkan percabangan maka dapat dibuat percabangan, dan bila dalam percabangan terdapat suatu tampilan yang sama kedudukannya maka dapat dibuat struktur linier dalam percabangan tersebut.
2.11 XAMPP
Gambar 2.13 Logo XAMPP XAMPP merupakan singkatan dari :
X : (baca:cross) yang berarti cross-platform atau dapat digunakan pada sistem operasi yang berbeda.
A : Apache
M : MySQL
P : PHP
P : Perl
Adalah sebuah web-server yang mudah digunakan, bersifat gratis dan dapat disebarluaskan. (http://apachefriends.org/ : 2009)
XAMPP digunakan oleh para pengembang dan programmer web untuk menguji dan memvalidasi sebuah halaman web tanpa harus terhubung dengan internet. XAMPP tersedia untuk Microsoft Windows, Linux, Mac OS dan Sun Solaris.
2.11.1 Instalasi Dan Konfigurasi XAMPP
XAMPP membutuhkan beberapa konfigurasi untuk berjalan, namun sebelum proses instalasi dan konfigurasi, perlu diperhatikan kebutuhan sistem yang dperlukan oleh XAMPP, diantaranya :
9 Minimum RAM 64Mb.
9 Kapasitas Harddisk minimum 200Mb.
9 Sistem operasi Windows XP direkomendasikan.
Setelah kebutuhan sistem terpenuhi, selanjutnya download XAMPP dari http://www.apachefriends.org/en/xampp.html. Besar file sekitar 16Mb.
Kemudian jalankan xampplite-win32-1.7.0.exe.
Gambar 2.14 Paket instalasi XAMPP Ekstrak pada drive C:
Gambar 2.15 Lokasi instalasi XAMPP
Setelah proses ekstraksi selesai, jalankan setup_xampp.bat yang terdapat didalam folder C:\xampp.
Untuk mengaktikan XAMPP, jalankan xampp_start.exe.
Gambar 2.17 XAMPP start
Dan untuk menghentikan XAMMP, jalankan xampp_stop.exe.
Gambar 2.18 XAMPP stop 2.12 Adobe Dreamweaver CS3
Adobe Dreamweaver CS3 (atau yang biasa disebut Dreamweaver) merupakan sebuah software pengembangan web yang awalnya diciptakan oleh Macromedia pada tahun 1997, namun sekarang dimiliki oleh Adobe, yang mengakuisisi Macromedia pada tahun 2005. (http://www.adobe.com/dreamweaver : 2009)
Adobe Dreamweaver CS3 adalah script editor profesional yang digunakan untuk melakukan desain secara visual dan mengolah halaman web serta pembuatan aplikasi web. Para pengembang dan programmer web lebih menyukai menggunakan Dreamweaver. Karena Dreamweaver merupakan script editor yang berbasiskan WYSIWYG (What You See Is What You Get).
Dreamweaver adalah sebuah software desain web yang menawarkan cara mendesain web dengan dua langkah sekaligus dalam satu waktu, yaitu mendesain dan memprogram. Karena setiap kali mendesain seperti menulis kata-kata, meletakkan gambar, membuat tabel dan proses lainnya, script akan tertulis secara otomatis dan langsung mengisi proses pengaturan.
Dreamweaver mengandalkan pada fitur visual editing, sehingga para pengguna dapat dengan cepat melakukan desain dan mengfungsikan halaman web yang diinginkan tanpa harus menuliskan beberapa baris kode pemrograman. Selain itu juga Dreamweaver membantu para pengguna untuk membangun aplikasi jaringan database dengan menggunakan bahasa server.
2.12.1 Kebutuhan Sistem
Untuk dapat menggunakan Adobe Dreamweaver CS3 dibutuhkan minimum spesifikasi komputer sebagai berikut :
1. Prosesor : Minimum Intel yang bersoket LGA775 atau AMD yang bersoket AM2.
2. RAM : 512Mb
3. Harddisk : 1.3Gb ruang kosong 4. Media : DVD-ROM untuk instalasi
2.12.2 Mengenal Interface Adobe Dreamweaver CS3
Pada dasarnya, interface Adobe Dreamweaver CS3 dapat dibagi kedalam delapan bagian, yaitu :
1. Menu Utama 2. Insert Bar 3. Document Bar 4. Jendela Dokumen 5. Tag Selector 6. Status Bar 7. Kotak Properti 8. Jendela Panel.
1. Menu Utama
Gambar 2.21 Menu Utama
Merupakan baris perintah yang terdiri dari menu-menu pop-up yang dapat diakses dengan menekan menu bar tersebut sehingga akan tampil menu pop-up yang terdiri dari seluruh perintah yang ada didalamnya. Menu Utama berisi perintah antara lain : File, Edit, View, Insert, Modify, Text, Commands, Site, Window, dan Help.
2. Insert Bar
Gambar 2.22 Insert Bar
Merupakan baris yang terdiri dari ikon-ikon yang mempercepat melakukan penambahan obyek pada jendela dokumen. Obyek yang ditambahkan dapat berupa table, layer, image dan sebagainya.
3. Document Bar
Gambar 2.23 Document Bar
Digunakan untuk menampilkan atau mengorganisasikan semua obyek yang ada didalam jendela dokumen atau area dokumen.
Gambar 2.24 Jendela Dokumen
Digunakan untuk menampilkan atau merupakan areal yang digunakan untuk membuat design dari website.
5. Tag Selector
Gambar 2.25 Tag Selector
Bagian ini terletak dibawah jendela dokumen dan merupakan bagian dari dokumen sehingga apabila dokumen dalam keadaan kosong maka tag seleksi ini tidak akan berisi nilai apa-apa, kecuali <body>.
Bagian ini terletak disebelah kanan tag selector, yang berfungsi untuk menampilkan status pada jendela dokumen.
7. Kotak Properti
Gambar 2.26 Kotak Properti
Digunakan untuk melakukan perubahan dari obyek yang ditampilkan, baik itu image, animasi, tabel, atau yang lainnya.
8. Jendela Panel
Gambar 2.27 Jendela Panel
Terdiri dari beberapa buah panel yang berfungsi untuk mengorganisasikan file- file yang digunakan.
