Disain dan Pemograman Website

(1)

Disain dan Pemograman Website

Oleh : Dr. Afzeri

(2)

Pendahuluan : Learning Outcome

Pengantar Pada Website

1 Pemakaian HTML

10 Form dan Web Editor

17 Dasar dasar Skrip Java

28 XML dan XHTML

38 Menggunakan CSS

54 PHP dan MySQL

60 Membuat Website yang Berkualitas

90 Apendik

98

(3)

(4)

Objektif

Mata kuliah ini memberikan skil dan pengetahuan untuk perancangan website melalui konten statik dan dinamik. Melalui ekplorasi pada pembuatan web dasar , mahasiswa mampu membuat halaman web menggunakan tool yang umum dalam pengembangan web.

Pada akhir dari kelas ini mahasiswa akan mampu :

1. Melakukan penanganan web server untuk setup dan uploading file.

2. Membuat Halaman web statik menggunakan HTML secara manual dan melalui web editor.

3. Menggunakan fungsi-fungsi dasar dalam pemograman Javascript dan php.

4. _{Menggunakan Javascript, PHP dan HTML untuk membuat halaman web}

interaktif

5. Membuat form dan pengendalian web dinamis melalui database.

(5)

1

Bab 1 : Pengantar pada Website

Outcome :

Setelah mempelajari bab ini mahasiswa mampu: 1. Mengetahui sejarah dan kegunaan dari website.

2. Mengenal bentuk bentuk rancangan tampilan web secara umum. 3. Menyiapkan server web.

4. Mengenal bentuk dasar dari bahasa html.

1. Apa itu Website

Situs web (Website) adalah satu set halaman web yang berisi kandungan media teks, video, musik, audio, gambar, imej dan sebagainya. Situs web ditempatkan sekurangnya pada satu server web yang bisa diakses dalam network seperti Internet atau dalam sebuah netwok pribadi (LAN) melalui alamat Internet (Internet address). Semua website yang bisa diakses oleh publik dikelompokkan dalam World Wide Web (www). Kata kata World Wide Web atau dengan singkatan "WWW" atau “Web") berarti media informasi global dimana pengguna bisa membaca dan menulis melaui komputer ( juga dengan Tablet PC, smart phone) yang terhubung ke Internet.

Teknologi yang bisa dipakai untuk terhubung ke internet dapat berupa Local Area Networks(LAN), Dial-up access (saluran Telepon), Broadband access atau Wireless broadband access. Gambar 1-1 memperlihatkan perangkat komputer yang terhubung ke internet melalui koneksi LAN dan wireless. Komputer yang terhubung ke Internet diberi nomor pengenal yang disebut dengan IP address. IP address bisa diset otomatis oleh sistim (dynamic IP address) atau diset secara manual.

Gambar 1-1 Ilustrasi Koneksi komputer ke Internet

Gambar 1-2 Mengakses halaman web pada Server

(6)

2

pengiriman data kadang kadang dilakukan enkripsi (HTTP Secure/ HTTPs). Pengguna (web browser) memaparkan isi halaman web sesuai dengan instruksi dari HTML melalui terminal pemaparan (Mozila, Explorer dsb).

Halaman web biasanya diakses dari Uniform Resource Locator (URL) disebut homepage. Beberapa halaman web memerlukan pendaftaran terlebih dahulu untuk bisa dilihat sebagian atau seluruh kandungan isinya. Beberapa contoh dari halaman web yang memerlukan pendaftaran adalah situs web bisnis, sebagian websites pemberitaan (kompas.com, detik.com), academic journal websites, permainan (game) websites, situs berbagi file (file-sharing websites), message boards, web-based email (gmail, yahoo), social networking websites (facebook, twiter), websites penyedia data real-time stock market, dan websites menyediakan berbagai macam servis (e.g., fasilitas penyimpanan files dan lain lain). Gambar 1-3 adalah salah satu contoh halaman web yang di lihat menggunakan browser mozila.

Gambar 1-3 Halaman Web elearning stkip surya

2. Sejarah Website

Konsep dari web sudah dimulai sejak tahun 1946 yang dikenal dengan home-based global information system. Tahun 1979 sampai 1991 merupakan era pengembangan World Wide Web. Pada 1984 dikembangkan pilot project oleh CERN untuk instalasi dan evaluasi protokol TCP/IP pada beberapa non-Unix machines. Pada tahun 1990 CERN sudah menjadi Internet site terbesar di Eropa.

Pada 1990, Berners-Lee membangun tool yang diperlukan untuk bekerjanya web HyperText Transfer Protocol (HTTP), HyperText Markup Language (HTML), Web browser (disebut juga WorldWideWeb, yang juga berfungsi sebagai editor). HTTP server software pertama yang kemudian dikenal dengan CERN httpd), web server pertama (http://info.cern.ch) juga dikembangkan pada tahun bersamaan.

Tahun 1992 sampai 1995 merupakan tahun pertumbuhan Web. Protokol populer dikembangkan hypertex menu untuk akses yang lebih baik ke sistem file. Beberapa sites memungkinkan pengguna mengirim teks penuh yang kemampuannya dikembangkan oleh mesin pencari. Browser grafik juga dikembangkan sehingga fitur seperti embedded graphics, scripting, dan gambar animasi bisadilayari.

3. Penggunaan website

Saat ini website sudah banyak digunakan untuk berbagai keperluan. Mulai untuk sumber berita, informasi kerja juga untuk keperluan bisnis dan akses ke berbagai media. Hampir semua instansi pemerintah dan swasta sudah mempunyai halaman web sendiri dengan berbagai keperluan. Mesin pencari merupakan salah satu tool yang paling banyak digunakan orang. Google merupakan mesin pencari yang sangat populer. Berbagai macam alamat situs bisa ditemukan dengan mudah hanya dengan memasukkan beberapa kata kunci kedalam mesin pencari. Dengan adanya mesin pencari menjadikan penggunaan situs web semakin mudah.

(7)

3

Berbagai website dengan bermacam-macan disain dikembangkan sesuai dengan selera dan jenis informasi yang disajikan. Berikut adalah beberapa website dengan uraian ringkas fitur dan tampilannya.

Website dikti : http://dikti.go.org (Gambar 1.4)

Gambar 1.4

Tampilan halaman utama web ini memiliki beberapa kelompok komponen: 1. Baner yang terdapat pada bagian paling atas

2. Menu menu

3. Gambar SlideshowWrapper

Gambar 1.5

(8)

4

Gambar 1.6

Tampilan halaman utama google lebih sederhana namun keunggulan website ini adalah pada program yang ada dibelakangnya untuk melakukan pencarian.

Website sebuah bank (Gambar 1.7). Website pada bank selain beri informasi tentang bank tersebut juga mempunyai fasilitas bagi nasabah untuk mengakses akon nya yang disebut dengan internet banking. Untuk masuk kehalaman internet banking ini, pengguna harus terdaftar dan masuk melalui nama pengguna dan password yang disediakan.

5. Tool yang diperlukan dalam memakai Website

Ada dua kategori pemakai website ini pertama adalah kelompok yang membuat atau menyajikan website dan yang kedua adalah kelompok yang memanfaatkan informasi yang tersedia di website. Dalam pelajaran ini kita akan memfokuskan menjadi penyaji atau pembuat website.

(9)

5

6. Melihat / mengunjungi Web

Untuk melihat halaman web diperlukan browser web. Berbagai macam browser web dekombangkan oleh berbagai perusahaan diantaranya Firefox, Explorer, Netscape, Opera, GoogleCrome. Secara umum setiap browser berkemampuan sama dalam menampilkan halaman web. Namun ada beberapa browser web bisa menampilkan lebih baik untuk fitur tertentu.

Gambar 1.8 Logo Berbagai aplikasi browser web

Explorer, Mozilla dan Google Chrome adalah beberapa browser web yang popular saat ini, sedangkan Netscape popular pada era 1990 an.

Mozilla Netscape Explorer Gambar 1.9 Logo Website Populer

7. Membuat Web

Website dibuat agar orang bisa mendapat informasi yang diperlukan. Berbagai macam informasi dan fasilitas dilakukan melalui jaringan situs web. Berbagai fasilitas tersedia untuk membuat web namun fasilitas tersebut hanya digunakan sesuai dengan bentuk web yang dibuat. Untuk itu sebelum memulai membuat web harus terlebih dahulu menentukan bentuk informasi apa yang akan ditampilkan.

Kenapa orang perlu mengunjungi website? Secara umum orang melihat halamat web dengan dua alasan utama:

1. Menemukan informasi yang mereka inginkan. Ini bisa berbagai informasi mulai dari seorang peljar hanya ingin mencari gambar untuk tugas sekolah, mencari informasi saham atau untuk menemukan restoran yang terdekat. 2. Menyelesaikan tugas. Berbagai bentuk informasi yang berhubungan dengan pekerjaan juga bisa dilakukan melalui

web. Pengunjung bisa saja ingin membeli barang yang lagi laris, mendownload software atau berpartisipasi dalam diskusi online tentang hobi mereka.

(10)

6

bahwa website bukan dibuat untuk diri sendiri. Pembuat tentu sudah tahu tentang isi halaman webnya. Website dibuat untuk pengunjung untuk mendapatkan isi yang dia inginkan. Isi dan tampilan web harus sesuai dengan harapan pengunjung.

8. Hosting (Penempatan Web)

Penempatan web dilakukan pada server yang mempunyai fasilitas web server. Server web dapat merujuk baik pada

perangkat keras ataupun perangkat lunak yang menyediakan layanan akses kepada pengguna melalui protokol komunikasi

HTTP atau HTTPS. Fungsi utama sebuah server web adalah untuk mentransfer berkas atas permintaan pengguna (pada web browser) melalui protokol komunikasi yang telah ditentukan. Sebuah halaman web dapat terdiri atas berkas teks, gambar, video, dan lainnya. Server web berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web yang terkait termasuk teks, gambar, video, atau lainnya. Server web merupakan sebuah komputer yang didalamnya terinstal aplikasi webserver. Contoh aplikasi webserver adalah Apache.

Pengguna, melalui aplikasi web meminta layanan atas berkas ataupun halaman web yang terdapat pada sebuah server web, kemudian server sebagai manajer layanan tersebut akan merespon balik dengan mengirimkan halaman dan berkas-berkas pendukung yang dibutuhkan, atau menolak permintaan tersebut jika halaman yang diminta tidak tersedia.

saat ini umumnya server web telah dilengkapi pula dengan mesin penerjemahbahasa skrip yang memungkinkan server web menyediakan layanan situs web dinamis dengan memanfaatkan pustaka tambahan seperti PHP, ASP. Secara umum server web berfungsi untuk menempatkan situs web, namun pada prakteknya penggunaannya diperluas sebagai tempat penyimpanan data ataupun untuk menjalankan sejumlah aplikasi kelas bisnis.

Penempatan pada server lokal

Server local adalah computer yang tidak terhubung ke jaringan umum. Biasanya server local diakses melalui alamat IP misalnya 192.168.0.1. Sistim operasi server bisa menggunakan Microsoft windows atau Linux.

9. Instalasi Web Server

Server web adalah sebuah program yang bertugas untuk merespon permintaan yang beragam dari browser melalui protocol HTTP atau HTTPS. Skema operasi dari server web adalah seperi loop berikut :

1. Menunggu permintaan yang ditentukan melalui port TCP (untuk HTTP adalah 80) 2. Menerima permintaan.

3. Melihat isi yang terdapat dalam requeat string

4. Mengirim resource dengan koneksi yang sama dimana perminttan diterima. 5. Kembali ke urutan 2.

Semua web server harus sekurang kurangnya bisa melayani file-file statis yang ditempatkan pada lokasi tertentu pada hardisk. Kebanyakan webserver mengizinkan untuk menambah direktori-direktori untuk dilayani.

Webserver modern memungkinkan untuk pengontrolan keamanan dan autentikasi pengguna dari program server. Cara pengontrol yang simple adalah menggunakan file .htaccess.

Pelayanan file static

(11)

7

Konten dinamis

Satu dari banyak aspek penting dalam memilih server web adalah kemampuan yang ditawarkan untuk menangani konten dinamis. Kebanyakan server web mendukung beberapa bahasa pemograman seperti PHP, JSP, ASP, CGI dan lain lain. Sangat direkomendasikan server web yang digunakan mendukung bahasa bahasa tersebut. PHP merupakan salah satu bahasa yang paling banyak penggunanya.

Server Apache

Apache merupakan sebuah server web yang robust, free software yang mempunyai fitur sejajar dengan server komersial. Proyek ini disupervisi dan dipimpin oleh sekelompok volentir dikenal sebagai Apache Group. Apache server dipublikasikan pertama kali pada tahun 1995 yang dikembangkan dari server NCSA.

Menginstal Apache

Ada dua cara untuk menginstall Apache; melalui kompilasi source code atau menginstal paket untuk operating yang sesuai.

Instalasi Web Server pada Ubuntu Linux

Pada umumnya server Apache sudah terinstall dalam aplikasi linux. Tetapi perlu untuk menginstal kembali kalau sebelumnya belum ada, mengganti ke versi yang baru atau ada problem dari file.

pada terminal ketik sudo apt-get install apache2 maka server web akan terinstal pada komputer anda.

Mengkonfigurasi Apache

Konfigurasi mungkin diperlukan setelah instalasi. Secara default, Apache dating dengan konfigurasi minimum untuk booting server pada port default (port 80) dan melayani semua file dari folder yang ditentukan pada pengarah configurasi (configuration diective) DocumentRoot. _{File configurasi Apache dinamai httpd.conf}._{File httpd.conf berbentuk teks (ASCII)}

yang berisi pengarah konfigurasi Apache.

Redhat/Fedora

rpm -ihv httpd-x.x.x.rpm

You will also need to install any additional modules, such as: • mod_auth_*

(Tugas : lakukan instalasi server web pada computer anda)

Lokasi dari halaman web pada server apace adalah : var/www.

Untuk mengakses web yang ada pada komputer anda dilakukan dengan mengetikkan http://localhost melalui web browser (seperti Mozila).

Konfigurasi Apache

(12)

8

Konfigurasi server web yang telah diinstall untuk merespon permintaan HTTP pada port 123.

Untuk tugas ini lakukan :

edit file /home/carlesm/apache/conf/httpd.conf

ganti papameter berikut :

Untuk memastikan aplikasi web server yang telah terinstal bekerja dengan baik, periksa dengan menjalankan sebuah file html yang ada di direktori (folder) web.

Sebagai contoh: Buat sebuah file web menggunakan Open office writer dan kemudian simpan file tersebut pada folder web (/var/www) dengan ektensi html (save as html), misalnya test.html (lihat gambar berikut) :

Gambar 1.10

Catatan:

Agar file tersebut bisa ditulis oleh semua user, ubah dulu mode direktori www dengan cara berikut ~$ cd /var/

(13)

9

Buka file test.html tersebut melalui web browser dengan mengetikkan alamat http://localhost/test.html. Hasilnya akan muncul seperti gambar berikut. Apabila browser menampilkan isis file sesuai dengan yang dibuat berarti file telah bekerja.

Gambar 1.11

10.Latihan

1. Menggunakan Mesin Pencari. Dengan menggunakan satu kata kunci (misal STKIP) buka salah satu halaman web yang ditemukan dari hasil pencarian tersebut.

2. Mengamati tampilan sebuah web. Sebutkan media dan fasilitas apa saja yang ditampilkan dari halaman web yang anda amati (Video, gambar, teks, menu, slide show)

3. Melihat kode dari web (page source).

1. Dengan menggunakan Mozila Pilih view->Page source untuk melihat code yang digunakan oleh halaman web tersebut. Simbol apa yang sering dijumpai dalam kode tersebut.

2. Copy dan simpan kode tersebut dan buka kembali dengan web browser (File->Open). Apakah tampilannya masih sama dengan aslinya. Kalau tidak bagian manakah yang hilang?.

3. Kembali amati kode web tersebut. Terka salah satu arti dari teks yang sering muncul dalam kode tersebut.

11.Pertanyaan

1. Apa guna aplikasi Apache2

(14)

10

Bab 2 : Pemakaian HTML

Outcome :

Setelah mempelajari mahasiswa mampu:

1. Membuat web sederhana menggunakan bahasa html 2. Belajar membuat web melalui informasi dari internet

3. Mengatur tampilan web dengan menu, latar belakang dan bentuk huruf.

Website atau disingkat web atau dikenal juga dengan nama homepage merupakan sarana penyampaian informasi melalui Internet. Berbagai macam website kini telah meramaikan dunia maya dengan berbagai macam kandungan informasi seperti berita, iklan perusahaan, ilmu pengetahuan ataupun informasi pribadi seseorang.

Bahasa yang umum dipakai untuk membuat halaman website ini salah satunya adalah Hyper Text Mark up Language yang dikenal dengan singkatan HTML. Perintah perintah yang dipakai dalam HTML ini dinamakan tag. Tag-tag yang dipakai dalam sebuah web dapat dilihat dengan mengeklik tab View Source dalam web browser yang dipakai.

Contoh berikut adalah source dari sebuah halaman web dengan tampilan seperti Gambar 2.1

Gambar 2. 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>

<HEAD>

<P ALIGN=CENTER STYLE="margin-bottom: 0in; background: #cccccc">Internal Website Afzeri</P>

<h2>

(15)

11

<P><A HREF="DisainDanPemogramanWeb/index.php">Disain dan Pemograman Web</A> </h2>

</BODY> </HTML>

Contoh 1: Source HTML

Apakah HTML?

HTML adalah bahasa untuk penjabaran halaman web digunakan untuk membuat dokumen dengan struktur hiperteks. HTML juga bisa digunakan untuk membuat dokumen multimedia.

 HTML singkatan dari Hyper Text Markup Language

 HTML bukanlah bahasa pemograman, ini adalah teks yang di tambah-tambah (markup)  HTML menggunakan tags untuk menjabarkan halaman web.

Ekstensi File manakah yang dipakai .HTM atau .HTML?

Bila anda menyimpan file HTML, anda bisa menyimpannya dengan ekstensi .htm atau .html. Keduanya tidak ada bedanya. HTML juga bisa digunakan untuk membuat file multimedia yaitu informasi yang mengandung tidak hanya teks tetapi juga berupa imej, video, suara atau juga sub program aktif (plig-ins, applets).

Beberapa contoh tag yang dipakai untuk membangun sebuah halaman website adalah <html>, <head>, <title>, <body>, </html>, </head>, </title>, </body> . Pada contoh di atas terlihat bahwa setiap tag mempunyai pasangan yang ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak semua tag mempunyai pasangan seperti contoh di atas, ada tag tag yang tidak mempunyai pasangan seperti tag <p> yang digunakan untuk memisahkan paragraf.

Tugas : Tunjukkan tag-tag dari source website pada contoh 1 diatas serta pasangannya?

Software untuk membuat Web

Dokumen HTML adalah berupa teks datar (tanpa ada format tertentu) sehingga pada dasarnya bisa diedit menggunakan editor teks.

Website bisa dibuat dengan bantuan software web developer seperti Microsoft Frontpage atau Macromedia Dreamweaver, Kompozer atau Visual Studio.

KompoZer merupakan aplikasi membuat web gratis untuk sistim operasi Ubuntu. Aplikasi ini dapat diinstal dengan mengetik sudo apt-get install kompozer melalui terminal Ubuntu. Gambar 2 menampilkan aplikasi kompozer (Pembuatan web dengan komposer akan dipelajari pada bab selanjutnya).

(16)

12

Explorer, atau web browser sejenis bisa dipakai. Untuk latihan membuat web secara online bisa dilakukan melalui http://www.w3schools.com/html/.

Gambar 2

Struktur Halaman Web

Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala memberi nama website, sedangkan bagian badan berisi halaman inti sebuah web. Bagian kepala dan bagian badan ini nantinya akan membentuk sebuah kesatuan halaman website yang akan kita buat.

Website Saya

</title> </head> <body>

Selamat datang di website saya yang pertama

(17)

13

</html>

Kalimat atau kata yang kita tuliskan di antara tag <title> </title> merupakan judul atau deskripsi dari website yang dibuat. Sedangkan kalimat di antara <body> </body> merupakan isi dari website.

Paragraf

Tag paragraph <p> digunakan un tuk memisahkan alinea. HTML mengabaikan pemotong baris (line breaks) yang dimasukkan menggunakan tombol enter pada file asli. Sebuah paragraph diindikasikan dengan teks yang dibatasi oleh <p> dan </p>. Tag P mempunyai atribut ALIGN untuk mengatur kelurusan teks dalam satu alinea <P ALIGN ttt>.

Nilai ttt adalah satu dari yang berikut:

LEFT, Mengatur paragraph rata kiri. RIGHT, mengatur paragraph rata kanan. CENTER, meletakkan teks ditengah.

Pemotong baris (Line breaks)

Untuk memisahkan baris digunakan tag <br>. BR tidak mengubah parameter yang dimasukkan pada tag paragraph.

Warna Background

Warna background website dapat dilakukan dengan menambahkan kata “bgcolor = warna” setelah tag body. Misalnya anda ingin memberi warna hitam website anda maka anda tinggal tambahkan kode berikut :

Bila anda ingin mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik setelah bgcolor, misalnya : red, green, blue, atau warna lainnya.

Gambar imej juga bisa dijadikan sebuah gambar sebagai background website dengan menambahkan

kode : “background = file gambar” setelah tag body.

Misalnya file gambar pemandangan.jpg dijadikan sebagai

background halaman website, maka tinggal tambahkan kode berikut :

(18)

14 Pengatur tampilan teks

Beberapa pengaturan tampilan teks adalah

 Ukuran font

 Warna font

 Efek tulisan

ukuran tulisan bisa juga kita ubah ubah.

Untuk itu kita perlu menyisipkan tag <font> </font> dalam tag <body> </body>.

Untuk mengubah warna tulisan kita tambahkan kode “color” setelah font.

Khusus untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka semakin besar pula huruf yang akan ditampilkan dalam halaman web.

Kita bisa mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan dengan dipisahkan spasi.

Website Saya

</title> </head>

<font color = white face = verdana size = +3 align = center>

Selamat datang di website saya yang pertama </font>

</body> </html>

Kode di atas berarti memberi pengaruh tulisan warna putih berjenis Verdana dan berukuran +3. Anda bisa juga menambahkan efek tulisan bergerak dengan menyisipkan tag <marquee> </marquee> sebelum kode <font> </font>

(19)

15

gambar ditambahkan dengan tag img seperti berikut. <img src = file foto anda>

Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda tambahkan tag <br>.

Selamat datang di website saya yang pertama <br> <img src = logo.jpg>

</font>

Tampilan website anda akan seperti ini. Ukuran gambar bisa anda atur dengan menambahkan kode

“height = ukuran”, dan/atau “width = ukuran”. Misalkan anda ingin gambar anda mempunyai tinggi 100 pixel maka anda tinggal tambahkan “height = 100” setelah kode nama file gambar yang anda

sisipkan.

Komentar

Kita bisa memasukkan komentar kedalam HTML dengan menggunakan tag <!-- dan --!>. Isi diantara penanda ini akan diabaikan oleh browser dan tidak ditampilkan

.

Menu

Menu merupakan lintasan masuk kedalam suatu halaman web. Menu standar yang ada dalam web sederhana biasanya adalah profil, galeri foto, dan link. Satu buah menu biasanya mengacu pada satu file halaman web. Apabila kita menyiapkan menu profil, galeri foto dan link, maka untuk itu kita perlu menambah halaman baru yang mempunyai nama file profil.html, galeri.html, dan link.html (cattatan : nama file bisa berbeda dari nama file). Untuk membuat halaman halaman ini anda bisa mengulangi langkah langkah yang telah dijelaskan sebelumnya. Untuk menghubungkan halaman utama website dengan halaman halaman tambahan ini kita perlu ketikkan tag <a href = profil.html> dan ditutup dengan </a> bila kita ingin menghubungkan dengan halaman profil, demikian pula untuk halaman web lainnya. Kode berikut akan menampilkan hubungan antar halaman website yang berjejer.

<a href = profil.html> Profil </a> <a href = galeri.html> Galeri </a> <a href = http://stkipsurya.ac.id> </a> STKIP Surya

Untuk halaman profil, galeri, dan link bisa anda tambahkan sesuka anda seperti langkah langkah sebelumnya. Khusus untuk halaman link, anda bisa mengisinya dengan link ke STKIP Surya, Detik, Google, dan sebagainya. Link yang telah dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam satu jendela browser yang sama. Bila kita ingin tetap menikmati halaman website kita sedangkan kita juga ingin membuka STKIP Surya misalnya, maka kita perlu menambahkan tag “target

= “_blank” setelah alamat STKIP Surya misal :

(20)

16

Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda tinggal hilangkan saja

“target = “_blank” nya.

Bila anda ingin link ke halaman profil anda berupa gambar profil.jpg misalnya, maka anda perlu menyisipkan file gambar di dalam tag <a href = profil.html> </a>. Sehingga dapat kita tuliskan sebagai berikut :

Bila benar maka kursor mouse akan berubah menjadi “tangan” bila didekatkan ke gambar profil.jpg.

Demikian pula bila link ke STKIP Surya atau Detik juga dalam bentuk gambar, maka anda tinggal menambahkan tag <img src = gambar> di antara tag <a href = link > </a>.

Latihan

(21)

17

Tip: Menginstall kompozer pada Ubuntu Pada terminal ketik : sudo apt-get install kompozer

akan mumcul pertanyyan : Do you want to continue [Y/n]?

Pilih Y maka Kompozer akan terinstall

Setelah terinstal, Kompozer dijalankan melalui menu Application->Internet->KompoZer

Bab 3 Menggunakan Web Editor dalam merancang halaman Web

Outcome

Setelah mempelajari bab ini mahasiswa mampu:

1. Menggunakan web editor untuk merancang halaman web 2. Mengatur tampilan halaman web menggunakan frame dan tabel 3. Membuat form dengan beberapa tipe kontrol

Sebuah web yang baik haruslah mempunyai tampilan yang menarik dan mudah diakses informasi yang ada didalamnya. Menggunakan tag-tag secara langsung untuk membangun web adalah tidak praktis. Dalam pelajaran ini kita akan berlatih membuat halaman web dengan bantuan web editor kompoZer. Fungsi web editor adalah untuk memudahkan dalam perancangan web dan menkonversikan hasil pembuatan kedalam bahasa HTML. Dengan menggunakanweb editor kita tidak harus mengetikkan tanda tag. Tag-tag akan ditulis secara otomatis oleh kompozer sesuai dengan tampilan yang kita masukkan. Walaupun demikian pengetahuan tentang tag-tag diperlukan untuk melengkapi disain web dengan keperluan lain seperti pemograman atau menyisipkan link.

Dalam Bab ini dibahas fasilitas web sebagai berikut :

1. Menyisipkan gambar. 2. Membuat link

3. Membuat tabel 4. Membuat form 5. Frame

Latihan penggunaan fasilitas ini dilakukan menggunakan Web editor kompoZer.

KompoZer merupakan sebuah sistim web autor yang mengkombinasikan manajemen file dan pengeditan halaman web yang mudah digunakan. Halaman web dengan tampilan yang aktraktif dan profesional bisa dibuat dengan mudah melalui tampilan WYSWIG (Apa yang di inginkan itu yang ditampilkan).

(22)

18

1. Mengunakan Komposer

(23)

19

Ada tiga plilihan yang tersedia untuk memulai; halaman kosong, dari template dan template kosong. Untuk pelajaran pertama kita akan membuat dokumen baru dari sebuah template. Pilih radio yang kedua (a new document based on a template). Kemudian pilih template yang disediakan.

2. Menyisipkan gambar

Gambar disisipkan dengan dengan memilih menu Insert->Image. Kemudian pilih imej yang akan digunakan melalui dialog yang muncul.

Pilih imej yang mau disisipkan dengan klik gsmbsr folder Image location. (Cat: imej file harus dikirim keserver direktori yang sama dengan file web)

(24)

20

Imej yang disipkan akan dikonversikan ka bahasa HTML seperti berikut:

<img style="width: 246px; height: 187px;" alt="Contoh Menyisipkan imej" src="../../Desktop/logo.png"

(untuk beralih ke tampilan HTML dan WYSWYG pilih Tab Split yang terletak dibagian bawah layar editor)

Anda bisa melakukan perubahan melalui kode html tersebut. Misalnya untuk mengganti lokasi file gambar yang diletakkan dalam forlder www/imej/, maka isi variabel src harus diubah menjadi

src="imej/logo.png".

3. Membuat link

Link berfungsi untuk membuka halaman web lain melalui menu dari web yang dilihat. Menu bisa dengan mengklik teks, gambar. Cara membuat link adalah terlebih dahulu dengan memilih gambar atau teks yang akan dijadikan menu untuk link. Melalui menu Link anda bisa membuat link baru atau

mengubah link yang sudah ada.

Lengkapi halaman web yang akan dituju melalui link ini dengan mengisi bidang Enter a web page

location...

Teks atau gambar yang mempunyai link akan ditulis dalam bahasa HTML dengan tag

<a href=....></a>. Berikut adalah contoh link dari teks Website dan Sejarah ke file Bab%201%20Pengantar%20pada%20Website.doc.

(25)

21

Apabila teks Website dan Sejarah di klik maka browser akan membuka file Bab%201%20Pengantar%20pada%20Website.doc.

4. Membuat tabel

Tabel merupakan susunan tulisan atau tampilan dalam bentuk baris dan kolom. Cara Membuat tabel dengan composer hampir serupa dengan cara seperti office writer. Membuat table dilakukan melalui

Insert->Table kemudian tentukan jumlah baris dan kolom

Ada tiga cara dalam mendefinisikan table secara cepat (Quickly), Presisi atau sel. Silahkan coba ketiga metode tersebut. Ukuran sel bisa diubah dengan klik ganda kolom dan melengkapi isi ukuran kolom.

Membuat form

Pernahkah anda melakukan pendaftaran melalui online atau setidaknya melakukan mencarian melalui internet? Area tempat memasukkan data itu disebut field. Form mesin pencari hanya terdiri dari satu field saja.

(26)

22

(27)

23

Pengantar pada form

Form HTML adalah satu seksi dokumen yang berisi kandungan normal, markup dan elemen khusus yang disebut kontrol (checkboxes, radio buttons, menus, etc.) dan label pada kontrol tersebut. Para pengguna biasanya melengkapi sebuah form menggunakan kontrol modifikasi (memasukkan teks, memilih item menu dll) sebelum mengirim form ke sebuah agen untuk diproses (spt., ke Web server, ke mail server, dsb.).

Berikut adalah contoh form sederhana yang berIsi. Label, tombol radio, tombol tekan untuk mengulang atau mengirim.

<LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><BR>

<INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P>

(28)

24

Contoh form dengan berbagai macam kontrol

Kontrol-kontrol

Pengguna berinteraksi dengan form melalui fungsi yang disebut dengan kontrol. Sebuah nama kontrol diberikan melalui atribut nama. Setiap kontrol mempunyai nilai awal dan nilai sekarang, keduanya dalam bentuk karakter. Nilai awal dari kontrol didefenisikan melalui nilai atribut, tetapi tidak untuk TEXTAREA dan OBJECT.

(29)

25

Apabila form di submit untuk proses, beberapa kontrol mempunyai pasangan nama dengan nilainya. Bila pasangan nama dan nilai kontrol terkirim maka disebut successful controls.

Tipe-tipe Kontrol

HTML mendefenisikan beberapa tipe kontrol

buttons (tombol)

Ada tiga macam tombol yang bisa dibuat:

Tombol pengiriman (submit buttons): bila Diaktifkan (ditekan) , sebuah tombol kirim mengirimkan isi form. Sebuah form bisa mempunyai lebih dari satu tombol kirim.

Tombol riset (reset buttons): bila diaktifkan tombol riset akan mengembalikan kontrol kontrol ke nilai awal.

Tombol tekan (push buttons): tombol tekan tidak mempunyai prilaku dasar (default behavior). Tiap tombol tekan bisa mempunyai skrip sisi klien yang ter asoSiasi dengan atribut kejadian. Bila kejadian berlaku (spt., pengguna menekann tombol atau

melepaskan, dsb.), skrip yang terasosiasi akan di triger (dijalankan).

Pembuat web (Authors ) harus menentukan bahasa skrip melalui deklarasi skrip awal melaui META (pembahasan ttg skrip akan dibahas pada bab 5).

Tombol tombol dibuat dengan menggunakan elemen BUTTON element atau elemen INPUT.

Note. Authors should note that the BUTTON element offers richer rendering capabilities than the INPUT element.

checkboxes

Checkboxes (dan tombol radio) merupakan kontak on/off Yang bisa di togle oleh pengguna. Kontak akan "on" bila atribut cek di set. Bila form dikirim, hanya kontrol checkbox "on" yang berstatus berhasil.

Tombol radio

Tombol radio (Radio buttons) merupakan checkboxes yang berbagi dengan beberapa kontrol. Bila satu dari sekumpulan radion dibuat "on", semua yang lainnya menjadi "off". Elemen INPUT digunakan untuk membuat kontrol tombol radio.

menus

Menus menawarkan ke pengguna pilihan untuk di pilih. Elemen SELECT membuat menu yang dikombinasikan dengan elemen OPTGROUP dan OPTION.

Input teks (text input)

Ada dua tipe elemen kontrol untuk membuat input teks; INPUT dan TEXTAREA. Elemen INPUT membuat satu baris kontrol input dan elemen TEXTAREA membuat beberapa baris kontrol input.

file select

(30)

26

Elemen INPUT digunakan untuk membuAt kontrol file select.

Kontrol tersembunyi (hidden controls)

Penulis bisa membuat kontrol yang tidak ditampilkan Authors may create controls that are not rendered b tetapi nilainya dikirim dengan sebuah form. Tipe kontrol ini digunakan untuk menyimpan pertukaran informasi antara server dan klien dimana kemungkinan bisa hilang mengacu pada keadaan alami dari http. Kontrol tersembunyi dibuat menggunakan elemen INPUT.

object controls

Objek objek gEnerik bisa disisipkan ke dalam form dimana nilai nilai yang terasosiasi bisa dikirim dengan kontrol kontrol yang lain. Kontrol objek dibuat dengan elemen OBJECT.

Latihan 3-1 : Membuat Form Isian

Dengan menggunakan Kompozer, form dibuat melalui menu Insert->Form. Langkah pertama yang

harus dilakukan adalah mendefenisikan form melalui Insert->form->Define form. Lengkapi form dengan mengisikan nama form. Action URL adalah target file atau script yang akan diproses apabila form selesai diisi. Untuk sementara action URL dilakukan pada sebuah file sebagai contoh krs.php (file disediakan.

Ada beberapa jenis tipe filed yang bisa digunakan diantaranya: 1. Text

(31)

27

Methods :

Filed methods mendefinisikan cara mengirimkan data. Ada dua macam cara yang bisa dipakai Post dan Get. Untuk latihan ini pilih post.

Aksi merupakan proses yang dilakukan terhadap data yang sampai pada server. Aksi dapat berupa pencarian atau menyimpanan. Tindakan ini harus dikakukan melalui pemograman Aksi untuk form selanjutnya akan dibahas pada bab pemograman melalui PHP.

Latihan 3-2 Merancang halaman web

Latihan ini bertujuan untuk merancang sebuah website dengan tampilan yang terdiri atas baner, menu dan satu halaman aksi dari menu dengan tata letak yang baik.

Rancangan isi atau tema

Buatlah halaman Web untuk menampilkan pelajaran yang saudara asuh dari sebuah buku (misal fisika). Menu berupa daftar isi ditempatkan pada halaman pertama dan isi ditampilkan pada halaman yang lain dengan mengklik daftar isi tersebut. Masukkan link ke form yang dibuat pada latihan 1 sebagai komponen dari menu.

Layout

(32)

28

Bab 4 Dasar dasar pemograman dengan JavaScript

Berbagai Bahasa Pemograman untuk web tersedia. Setiap bahasa mempunyai kelebihan masing masing dan mendukung satu sama lainnya.

Java merupakan bahasa pemograman yang dikembangkan oleh Sun Microsystem Inc. Berbagai aplikasi dibuat dengan bahasa Java diantaranya pemograman web, desktop dan handphone.

Bahasa pemograman Java dibagi dalam dua bagian; Bahasa (setengah) terkompilasi dan bahasa diinterpretasikan langsung oleh browser (script).

Pengertian Scripting

Komputer bekerja berdasarkan program yang dijalankan. Ada dua jenis program yang dijalankan oleh komputer; file eksekusi dan file script. File eksekusi merupakan hasil kompilasi dari kode program ke bahasa mesin. Bentuk file eksekusi antara lain dll,exe, jar. Jenis kedua menggunakan file script. File scrip merupakan kode program dalam bentuk teks. Komputer membaca kode ini setiap ada perintah untuk menjalankannya kemudian menterjemahkan baris perbaris.

Dari segi kecepatan program dalam bentuk file eksekusi lebih cepat dari pada file skrip, karena pada file skrip ada waktu menterjemahkan program selain waktu eksekusi.

Dalam pemograman web, kedua jenis program ini dipakai. Walaupun waktu eksekusi lebih lama, kode skrip masih tetap populer dengan beberapa alasan. Kebanyakan browser bisa mengeksekusi skrip. Beberapa Kode skrip (pemograman sisi klient) bisa dilihat oleh pengguna sehingga mudah mengubah kalau ada modifikasi yang diperlukan. Untuk kecepatan, waktu yang lebih lama pada umumnya adalah pada proses tranfer data dari pada waktu eksekusi sehingga hampir tidak berbeda kecepatan dalam keseluruhan operasi antara skrip dan file eksekusi.

Jenis scripting

Berdasarkan tempat dieksekusinya skrip dapat dibagi atas dua; Client side programming

Server side programming

Pada client side programming eksekusi program dilakukan oleh browser. Server side programming melakukan eksekusi skrip terlebih dahulu baru di kirim ke kien. Kode yang dikirim bisa berupa gabungan antara kode html dan kode client side skrip.

Bahasa java script dalam teori tidak bisa mengakses hardware dan file kien. Bahasa VBScript bisa mengakses file dan hardware klient Memerlukan instalasi objek ActiveX pada sistim klien . . http://homepages.ius.edu/rwisman/a348/html/client.htm

(33)

29 Pemograman Web

Pemograman sisi klient merupakan kode yang harus dijalankan dalam browser. JavaScript merupakan salah satu contoh dari pemograman sisi kien karena kode dikirim ke browser terlebih dahulu dan dieksekusi di sana(browser) . Kode skrip bisa dilihat oleh klien dengan menggunakan menu Tool source (mozila).

PHP (yang dipelajari pada bab 7) merupakan contoh skrip sisi server karena kode di eksekusi di server dan hasilnya dikirim ke browser untuk ditampilkan. Kode program sisi server tidak bisa dilihat pada browser. Ini salah satu keuntungan dari pemogrman sisi server untuk mengamankan kode program terutama pasword yang digunakan untuk mengakses data. Program sisi server juga bisa digunakan membangkitkan kode scrip untuk dieksekusi disisi klien.

Web dinamis dengan JavaScrip

HTML pada dasarnya adalah statis, browser menampilkan teks dan grafik dan menunggu sampai pengguna menklik sebuah link atau mengisi sebuah form kemudian mengembalikan data ke server. Kemampuan dinamis umumnya hanya terbatas pada klik sebuah link atau mengirimkan form ke server dan menerima HTML statik lagi.

Pemograman sisi klien dirancang untuk menambah prilaku dinamis ke klien dengan menjalankan sebuah program pada browser.

Ada beberapa alasan menggunakan pemograman sisi klien.

JavaScrip adalah bahasa skrip yang memungkinkan untuk menambahkan pemograman nyata pada sebuah web. Contoh aplikasi web yang bisa dibuat dengan JavaScript seperti game primitive, kalkulator dsb.

Namun ada penggunan yang serius untuk JavaScript :

1. Mendeteksi browser yang digunakan.

Tergantung pada browser yang digunakan, beberapa halaman web tidak bisa dijalankan oleh browser tertentu. Dengan mendeteksi browser yang digunakan, pesan bisa diberikan ke pengguna bahwa halaman yang sedang dilayari tidak bisa ditampilkan dengan sempurna.

2. Cookies

Menyimpan informasi pada komputer visitor dan kemudian mengambil informasi ini kembali secara otomatis pada waktu mendatang saat pengguna pengguna mengunjungi halaman yang sama.

Teknik ini disebut "cookies".

3. Mengontrol browser

(34)

30

4. Memvalidasi form.

Memvalidasi data yang diinputkan sebelum form dikirim merupakan cara yang cepat memberi tahu pengguna akan kelengkapan data yang dikirim. Sebagai contoh, alamat email yang dimasukkan bisa divalidasi misalnya melalui karakter. Setiap alamat email selalu mengandung sebuah karakter @. Jika tidak kelihatan atau lebih dari satu karakter @ berarti bukan alamat email yang valid.

Untuk mahir menggunakan javascript mulailah dulu dengan mengerti pada dasar dasarnya.

Pelajaran ini menyajikan semua inti yang perlu diketahui sebelum membangun dan mngkostomisasi sebuah web yang bagus.

Dasar-dasar JavaScript

DIMANA MENEMPATKAN KODE JAVASCRIPT?

Karena javascript bukanlah HTML, anda harus perlu memberi tahu browser bila memasuki javascript pada sebuah halaman HTML. Ini dilakukan dengan menggunakan tag <script>. Pada browser gunakan kode <script> type="text/javascript"> dan </script> yang berarti awal dan akhir dari javascript.

Lihat contoh berikut:

alert("Selamat datang di hompage saya!!!"); </script>

</body> </html>

Kata alert adalah sebuah perintah standard javascript yang akan menampilkan kotak pop up pada layar. Visitor perlu menklick tombol "OK" pada kotak alert box untuk melanjutkan. Dengan memasuki perintah alert yang ada antara tag <script type="text/javascript"> dan </script>, browser akan mengenal bahwa ini adalah sebuah perintah javascript. Bila perintah tidak ditulis diantara tag <script>, browser akan mengenal sebagai teks dan menuliskan teks apa adanya pada layar.

Kode javascript bisa ditempatkan pada bagian <head> dan <body> pada sebuah dokumen. Secara umum disarankan untuk menempatkan sebanyak mungkin dalam bagian <head>.

(35)

31

Sudah diketahui bahwa perlu bahwa javascript memerlukan <script> untuk memulai. Ada beberapa hal lagi yang perlu diketahui sebelum memulai menulis javascript:

Baris-baris Javascript berakhir dengan tanda titik koma (;).

Lihat kembali contoh 4-1 sebelumnya dimana baris kode javascript berakhir dengan titik koma (semicolon).

Tanda berpengaruh pada performan, kode java skrip bisa ditulis dalam satu baris. Tapi cara ini tidak disarankan karena akan susah mengamati skrip secara keseluruhan.

Tempatkan teks diantara tanda " ". Bila memasukkan teks untuk di handle oleh javascript, selalu ditempatkan dalam tanda " ". Bila lupa menutup teks dalam tanda " ", javascript akan menginterpretasikan teks tersebut sebagai variabel bukan teks.

Berikut ini akan dipelajari kenapa terjadi kesalahan dalam kode skrip.

Huruf besar berbeda dengan huruf kecil. Harus selalu diingat bahwa huruf kapital. Ini berarti bila menulis perintah dengan huruf besar dalam javascript, perlu mengetikkannya pada yang tepat. Kesalahan yang umum pada semua level pemogram adalah kesalahan penilisan huruf besar.

Disamping menyuruh javascript untuk menampilkan sesuatu melalui kotak pop up kita bisa menulis secara langsung kedalam dokumen.

<title>Halaman Javascript Saya</title> </head>

document.write("Selamat datang di tempat saya!!!"); </script>

</body> </html>

Fungsi documen.write adalah perintah javascript mengatakan ke browser bahwa tulisan terletak antara tanda kutip ditulis kedalam dokument.

Catatan: Bila memasukkan teks dalam javascript, perlu untuk menempatkannya diantara " ".

Script dalam contoh diatas menghasilkan keluaran : Selamat datang ditempat saya!!!

Tugas:

(36)

32

Perhatikan contoh ini untuk mempelajari dimana menulis teks javascript:

<title>My Javascript Page</title> </head>

document.write("Selamat di web saya!!!<br>"); </script>

Semoga senang...<br> </body>

</html>

Output dari contoh ini akan kelihatan seperti berikut:

Halo!!!

Selamat dating di web saya!!! Semoga senang...

Seperti yang terlihat dilayar, javascript menulis teks pada dimana skrip ditempatkan dalam kode HTML. Sebuah aspek yang menarik adalah bahwa segala jenis tag HTML bisa diletakkan kehalaman web melalui metoda document.write method. Sebagai contoh, jika ingin membuat table untuk membandingkan temperature dalam Fahrenheit dan Celsius, selain dengan menulis

For instance, if you wanted to make a long table that compared Fahrenheit and Celsius, instead of actually typing all the values into the table, you could have javascript calculate the values and write the table to the document.

An example of a javascript generated table can be seen on the page explaining the hexadecimal colorsytem.

On that page, there are 15 tables with 25 columns in each.

Each cell shows different mixtures of the basic colors red, green and blue.

(37)

33

JavaScript Basics : VARIABEL-VARIABEL

Variabel bisa diibaratkan kotak kecil dengan sebuah nama. Isi dari kotak bisa berbeda atau berubah untuk satu kota yang sama.

Bila anda mempunya beberapa pasanag sepatu, bisa menempatkan dalam satu kotak dengan satu nama. Misalnya kotak sepatu adidas berisi 5 pasang sepatu. Bila sepasang sepatu dikeluarkan dari kotak maka kota sepatu adidas berisi 4 pasang sepatu tetapi namanya masih tetap kotak sepatu adidas. Disini bisa dedifenisika kotak sepatu adidas adalah variable, jumlah sepatu didalamnya adalah isi variabel.

Defini variabel adalah sebuah tempat didalam memori komputer untuk menyimpan informasi. Variabel ditetapkan dengan memberi nama yang unik padanya.

Perhatikan contoh berikut : <html>

<head>

<title>Mengenal Variabel dalam Javascript</title> </head>

http://photos-c.ak.fbcdn.net/hphotos-ak-ash4/424526_2582068475210_1359410841_31950779_456974593_n.jpg </script>

</body> </html>

Pada contoh ini akan menulis "Henri" pada dokumen.

Kembali diingatkan bila menuliskan teks dalam variabel harus ditempatkan didalam tanda " ". Apabila teks tidak ditempatkan dalam tanda kutip maka Javascript memperlakukan sebagai variabel.

Lihat contoh beriku dan perhatikan perbedaannya dengan contoh sebelumnya. <html>

<head>

<title>My Javascript Page</title> </head>

(38)

34

myname=Henrik;

document.write(myname); </script>

</body> </html>

Try to predict the output of the example before reading on.

- In the first line, the text "my first name" is stored in the Henrik variable.

- In the second line, the Henrik variable is stored in the myname variable.

- Finally in line 3, the myname variable is written to the document.

The result is that "my first name" will be written on the page.

MEMBERIKAN NILAI KE VARIABEL

Cara yang umum memberikan nilai kedalam variabel adalah menggunakan tanda sama dengan (=).

Perhatikan contoh berikut yang memberikan perbedaan pemberian nilai teks dan nilai lainnya. Tanda kurung digunakan untuk mengontrol penulisan rumus-rumus yang rumit.

Contoh : a=2; a=2; a++; a=2; a--;

a=2; b=3; c=a+b; a=2; d=a+6; Awal="Henri"; Akhir="Dunand";

NamaLengkap=Awal+" "+Akhir; a=2*7;

b=20/5; c=(20/5)*2; d=20/(5*2);

Hasil keluaran: a=2

(39)

35

Akhir=Dunand

NamaLengkap=Henri Dunand a=14 (2*7)

b=4 (20/5) c=8 (4*2) d=2 (20/10)

Pemberian huruf besar pada variable nama hanyalah mode saja, variabel bilangan juga bisa diberi huruf besar.

Operasi-Operasi aritmetika

Pada contoh diatas kita telah menggunakan apa yang disebut operator arithmetika a++ dan a--. Operator ini akan sering dijumpai dalam skrip karena ini bias mempersingkat penulisan. Menulis dalam bentuk a++ lebih cepat dari pada a=a+1;.

Operator Penjelasan Contoh

++ inkremental a=5;a++; nilai a sekarang = 6

-- dekremental A=5;a--; nilai a sekarang = 4

% mengembalikan modulus yaitu

sisa dari pembagian

a=8 % 3; nilai a adalah 2, karena 8 dibagi 3 mempunyai nilai sisa 2.

Membandingkan Variabel

Ada beberapa cara berbeda untuk membandingkan variabel. Yang paling mudah adalah membandingkan kesamaan menggunakan dua tanda samadengan.

if (a==b) {alert("a sama dengan b")};

if (namaakhir=="Melati") {alert("Nama yang cantik!!!")};

Membandingkan kesamaan nilai variabel harus menggunakan dobel sama dengan (= =). Apabila hanya dituliskan satu saja akan mengakibatkan variabel sebelah kiri sama dengan diisi dengan nilai variabel sebelah kanan.

(40)

36

if (namaakhir="Mutiara") {alert("Nama bagus!!!")};

Setelah baris ini dieksekusi maka namaakhir akan berisi teks Mutiara. Penulisan seperti ini akan menyebabkan bug (memberikan hasil yang tidak diharapkan) pada script.

Operator Penjelasan Contoh

== Sama dengan 4==5 (false) 5==5 (true) 5==4 (false)

!= Tidak sama dengan 4!=5 (true) 5!=5 (false) 5!=4 (true)

< Kurang dari 4<5 (true) 5<5 (false) 5<4 (false)

> Lebih dai 4>5 (false) 5>5 (false) 5>4 (true)

>= Kecil atau sama dengan 4<=5 (true) 5<=5 (true) 5<=4 (false)

<= Besar atau sama dengan 4>=5 (false) 5>=5 (true) 5>=4 (true)

Campuran HTML/Script

Pemograman melalui Bahasa Script pada umumnya dicampur dengan HTML dalam sebuah file tunggal. HTML menyediakan antarmuka dan program script menyediakan logika. Perhatikan contoh Javascript berikut yang menampilkan Apa Kabar sebanyak 5 kali.

JavaScript and HTML JHelloWorld.htm JavaScript

<H1>Hello World JavaScript</H1> <SCRIPT LANGUAGE="JavaScript"> for( i=1; i<=5; i++)

(41)

37

Latihan e 2 - JavaScript

(42)

38

Bab 5 Pengenalan XHMTL dan XML

Ada dua bagian utama pada XHTML:

HTML 4

HTML 4 adalah bahasa markup digunakan untuk menampilkan teks dan dokumen dokumen lainnya melalui platform dan mesin yang berbeda.

Pada mulanya ditujukan untuk audien tertentu dan sekarang sudah ditingkatkatan untuk memasukkan hypertext, multimedia serta style untuk memaparkan dokumen.

XML

 XML merupakan sebuah bahasa markup yang bisa diperpanjang dikembangkan menambah fleksibilitas dan kemampuan dari HTML. Banyak kompleksitas yang bisa diturunkan dengan menggunakan XML.

XHTML menggabungkan fleksibilitas HTML dengan ekstensibilitas XML. Tetapi apa maksudnya ini? Bila kita menulis tag harus bisa terlihat oleh satu dan lain browser. Dalam perkembangan versi dari HTML,disamping dibuatnya tag yang baru, beberapa tag ada yang ditinggalkan dari versi sebelumnya ada juga yang terus dibawa ke versi selanjutnya. Akibatnya halaman yang dibuat tidak pernah terlihat sama pada semua browser.

Solusinya adalah penulis HTML tidak menggunakan tag-tag yang tidak didukung semua browser karena versi yang berbeda. Harus ada sebuah teknik skripting yang mengarahkan pembaca pada halaman yang sesuai.

XHTML mengatasi ketidakseragaman tag. Dengan XHTML, jika kiat memerlukan markup tag yang baru, bisa didefenisikan dengan mudah dalam modul XHTML. Tag-tag baru bisa digunakan sama seperti tag yang lainnya .

XHTML 1.0 merupakan perumusan ulang HTML 4.0. Maksudnya, mempelajari XHTML pada dasarnya sama dengan HTML. Perbedaan utamanya adalah ada sedikit aturan baru dimana XHTML lebih kaku daripada HTML. Ada bererapa aturan dasar untuk mengkonversikan HTML 4 ke XHTML seperti diuraikan dalam pembahasan berikut.

1. Stricter adherence to the HTML specification.

Many browsers are very lax in how they interpret HTML. This leads to incongruities in how the pages are displayed, and XHTML doesn't allow that. The best way to correct this is to use an

XHTML validator.

2. Menulis dokument dengan format yang baik. Maksud dari penulisan dengan format yang baik adalah menghindari penggunaan elemen yang tumpang tindih.

3. Berikut adalah contoh yang bisa diterima:

<p>Paragraph <em>emphasized</em></p>

Tag <em> dibuka dan ditutup diantara tag <p>. Contoh dibawah ini adalah tidak diizinkan dalam format XHTML:

(43)

39

Karena tag <em> overlap dengan tag <p>.

4. Menulis atribut tag dengan huruf kecil.

XHTML merupakan bahasa markup yang case-sensitive, sehingga <LI> and <li> akan diartikan sebagai tag yang berbeda.

5. Tag penutup diperlukan.

Pada HTML, beberapa tag terdiri atas elemen yang tidak memerlukan tag penutup seperti tag <p>.. XHTML memerlukan penutup

</p>

Untuk tag tunggal seperti <br> harus memasukkan trailing slash kedalam tag tersebut yaitu <br /> untuk membuat baris baru.

6. Semua atribut harus menggunakan tanda kutip dan diberi nilai.

Atribut yang tidak ditulis diantara tanda kutip adalah salah seperti <table border=3>. Atribut yang biasanya berdiri sendiri sekarang harus berpasangan dengan nilai.

Contoh diatas adalah menambahkan atribut bayang dengan nilai tanpa bayang pada tag <hr/>.

7. Lakukan validasi kedua.

Langkah terakhir adalah melakukan validasi pada XHTML. Proses validasi bertujuan untuk mengetahui kesalahan atau permasalahan pada kode yang dibuat.

Format Teks Terstruktur XML

(Bahan ini disajikan setelah mempelajari java script)

Extensible Markup Language (XML) merupakan bahasa markup yang mendefenisikan aturan dalam pengkodean dokumen. Format dari kode ini bisa dibaca(dimengerti) oleh manusia juga bisa dibaca oleh mesin( human-readable and machine-readable).

Tujuan dari perancangan XML ini adalah penekanan pada keringkasan(simplicity), kesamarataan(generality) dan ketergunaan( usability) pada Internet.

(44)

40

Banyak antarmuka pemograman aplikasi ( application programming interfaces/(APIs) dikembangkan untuk memproses data XML. XML menjadi sangat penting daam pertukaran variasi informaisi yang luas pada Web dan pada konteks lainnya

XML dirancang untuk mengantar dan menyimpan data sementara HTML dirancang untuk menampilkan data.

Kenapa XML diperlukan? HTML diturunkan dengan sejumlah kekurangan: HTML dioptimalkan untuk mudah dipelajari bukan mudah diproses.

 Ada tunggal

 Semantik sudah didefenisikan untuk setiap tag

 Struktur data yang sudah terdefenisi.

HTML bagus untuk aplikasi langsung bukan untuk aplikasi yang rumit

 Perlu data untuk ditangani dengan cara yang berbeda

 Data untuk mengontrol program

XML dikembangkan untuk menyedikan kemampuan :

Exstensibility : tag atau atribut baru bias didefenisikan bila diperlukan. Struktur : berbagai bentuk hirarki data bias dimodelkan.

Validitas : Data bisa divalidasi.

Media independence : konten yang sama bisa dipublikasi oleh banyak media.

XML mempunyai karakteristik dimana sangat mudah diterapkan. Merupakan metalangage, dirancang untuk bisa digunakan pada jumlah bahasa yang tidak terbatas.

Apa yang perlu diketahui?

Sebelum mempelajari XML harus sudah mengetahui

HTML

JavaScript

Perbedaan antara XML dan HTML

XML bukanlah pengganti dari HTML.

XML dan HTML dirancang dengan tujuan yang berbeda:

XML dirancang untuk mengantar dan menyimpan data.

HTML dirancang untuk menampilkan data.

HTML adalah tentang menamilkan informasi sedangkan XML tentang membawa informasi..

XML tidak melakukan apa apa

(45)

41

mengantarkan informasi.

Berikut adalah contoh struktur data yang disusun.

<note>

<heading>Ingat</heading>

<body>Jangan lupakan saya alhir minggu ini!</body> </note>

Catatan diatas bisa diartikan sendiri. Ada informasi pengirim (from) dan penerima (to). Struktur juga mempunyai heading dan body. Apabila dikirim, dokumen ini tidak melakukan apa-apa. Ini hanya informasi. Kode software harus ditulis untuk mengirim atau menampilkan data tersebut. Disinilah repotnya.

Contoh berikut mendemonstrasikan perbedaan antara XML dan HTML

XML

HTML

GNUFDL • PID_00148402 8 Text structured format: XML

<P><B>Author:</B>Miguel de Cervantes</P> <P><B>Publisher</B>Alfaguara</P>

</BODY> </HTML>

As we can see, HTML offers us ways of representing the display format (<B>, <I> etc. represent the format: bold, italic etc.), but these do not give us any information on the semantics of the data they contain. In XML, we have tags that tell us about the semantics of the data: <author> indicates that the data contained corresponds to the author etc. No information is given on the display format; we are not told how the name of the author will be visualized on screen (bold, italics, etc). XML has other tools for specifying this and for changing the format of representation according to where it is to be displayed (to adapt it to a specific web browser, mobile telephone etc).

XML bukanlah pengganti HTML

XML merupakan pelengkap HTML.

It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data.

(46)

42

. Untuk melakukannya akan dirancang sebuah format XML untuk menampilkan sebuah resep makanan. Kita akan menyimpan resep ini dalam format XML (secara umum disebut aplikasi XML), kita sebut saja ini dengan ResepXML.

<?xml version="1.0"?> <Recipe>

<Name>Spanish omelette</Name> <Description>

The traditional, typical Spanish omelette, just like our mothers make it.

</Description>

Peel and slice the potatoes </Step>

<Step>

Add some oil to a frying pan </Step>

</Instructions>

</Recipe>

Resep ditulis dalam ResepXML

Contoh berikut adalah satu kelompok data yang dibatasi oleh tag <markers> dan <markers/>. Kelompok ini berisi tiga data dimana masing masing data terletak antara <marker dan />. Setipa data berisi variable nama, alamat, keterangan, email dan type.

<markers>

</markers>

Contoh JavaScript untuk mengextract XML

Skrip berikut mengirim data dari sebuah database yang dilakukan oleh skrip program

alamat_genxml.php oleh fungsi GDownloadUrl(). Isi database disimpan dalam variable data.

Selanjutnya isi file data diextrak oleh fungsi GXml.parse() dan hasilnya disimpan dalam variable xml. Kemudian data yang tersimpan dipecah berdasarkan kelompok marker oleh fungsi

(47)

43

isi variable user diextrak selanjutnya oleh user[i].getAttribute dan isinya dituangkan kedalam

variable-variable yang ada diantara loop for.

GDownloadUrl("alamat_genxml.php?", function(data) {

var xml = GXml.parse(data);

var user = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < user.length; i++) {

var nama = user[i].getAttribute("nama"); var alamat = user[i].getAttribute("alamat");

var keterangan = user[i].getAttribute("keterangan"); var email = parseFloat(markers[i].getAttribute("email")); var keyword = user[i].getAttribute("keyword");

var point = new GLatLng(parseFloat(user[i].getAttribute("lat")), parseFloat(user[i].getAttribute("lng")));

var type = user[i].getAttribute("type");

var marker = createMarker(point, nama, alamat, keterangan, keyword,type); map.addOverlay(marker);

}

Aturan sintak XML

Aturan sintak XML adalah sangat ringkas dan logis. Aturan mudah dipelajari dan digunakan.

Semua elemen XML harus dengan tag tertutup

Aturan ini sudah diterapkan pada XHTML. Tidak sah kalau tag dalamXML tidak diikuti oleh tag penutup.

<p>This is a paragraph.</p> <br> tidak sah

Tag-tag XML adalah Case Sensitive

Tag-tag XML tags are case sensitive. The tag <Letter> adalah berbeda dengan tag <letter>.

Opening and closing tags must be written with the same case: <Message>This is incorrect</message>

<message>This is correct</message>

(48)

44

Elemen XML harus Properly Nested

In HTML, you might see improperly nested elements:

<b><i>This text is bold and italic</b></i>

In XML, all elements must be properly nested within each other:

<b><i>This text is bold and italic</i></b>

In the example above, "Properly nested" simply means that since the <i> element is opened inside the <b> element, it must be closed inside the <b> element.

XML Documents Must Have a Root Element

XML documents must contain one element that is the parent of all other elements. This element is called the root element.

</root>

XML Attribute Values Must be Quoted

XML elements can have attributes in name/value pairs just like in HTML. In XML, the attribute values must always be quoted.

Study the two XML documents below. The first one is incorrect, the second is correct:

(49)

45

Entity References

Some characters have a special meaning in XML.

If you place a character like "<" inside an XML element, it will generate an error because the parser interprets it as the start of a new element.

This will generate an XML error:

<message>if salary < 1000 then</message>

To avoid this error, replace the "<" character with an entity reference:

<message>if salary < 1000 then</message> There are 5 predefined entity references in XML:

< < less than > > greater than & & ampersand ' ' apostrophe " " quotation mark

Note: Only the characters "<" and "&" are strictly illegal in XML. The greater than character is legal, but it is a good habit to replace it.

Comments in XML

The syntax for writing comments in XML is similar to that of HTML.

White-space is Preserved in XML

HTML truncates multiple white-space characters to one single white-space:

HTML: Hello Tove Output: Hello Tove

With XML, the white-space in a document is not truncated.

XML Stores New Line as LF

(50)

46

XML stores a new line as LF.

What is an XML Element?

An XML element is everything from (including) the element's start tag to (including) the element's end tag. <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year>

<book category="WEB"> <title>Learning XML</title> <author>Erik T. Ray</author> <year>2003</year>

</bookstore>

In the example above, <bookstore> and <book> have element contents, because they contain other elements. <book> also has an attribute (category="CHILDREN"). <title>, <author>, <year>, and <price> have text content because they contain text.

Well-formed is equivalent to analysable

The importance of whether or not a document is well formed in XML lies in the fact that a well-formed document can be subject to syntactic analysis or parsing (i.e. it can be automatically processed). There are many parsers

(analysers) in many programming languages enabling us to work with XML documents. XML parsers can detect structural errors in XML documents (i.e. whether they are well formed) and report them to the program. This feature is very important for programmers because it releases them from the task of having to detect errors by assigning it to a program (the parser), which does it automatically.

Namespaces

XML is a standard designed for the sharing of information. What happens when we take information from two different sources and combine it in XML to send it to somebody else? We may have some sort of conflict arising from coincidences in the names of tags.