Pemrograman Web 1. Persiapan awal, Tagitag dasar HTML, Struktur Dasar HTML, Memberikan judul dengan (Tittle) MODUL PERKULIAHAN

(1)

MODUL PERKULIAHAN

Pemrograman Web 1

Persiapan awal, Tagitag dasar

HTML, Struktur Dasar HTML,

Memberikan judul dengan (Tittle)

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Fakultas Ilmu Komputer Teknik Informatika

01

MK87039 Tim Dosen

Abstract

Kompetensi

(2)

2015

2

Pemrograman Web 1 Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pembahasan

Tahapan Awal

Sebelum memulai melakukan pembuatan pengkodean bahasa program berbasis web, maka kita wajib mempersiapkan web server. Pada kesempatan ini kita menggunakan web server XAMPP. XAMPP merupakan sebuah paket instalasi untuk PHP, APACHE dan MySQL. Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah. Untuk download XAMPP terbaru, silahkan download di http://www.apachefriends.org/index.html dimana disediakan paket XAMPP for Windows, Linux dan Apple. Pada tutorial lengkap cara menggunakan XAMPP di windows ini, saya menggunakan XAMPP 1.7.2. Langkah yang harus dipersiapkan adalah:

1. Jalankan file xampp-win32-1.7.2.exe

2. Kemudian akan tampil window untuk menentukan lokasi instalasi. Lalu silahkan anda pilih C:\ klik “install”.

(3)

3. Proses instalasi akan berjalan. Tunggu beberapa saat.

4. Kemudian command prompt akan muncul beberapa kali. Pertama adalah penambahan shortcut pada desktop/startmenu. Jika ingin ditambahkan shortcut, silahkan anda tekan y kemudian enter.

(4)

2015

4

Pemrograman Web 1 Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id 5. Untuk melanjutkan tekan y lagi kemudian enter

6. Selanjutnya anda akan ditanyakan, apakah ingin menginstal XAMPP secara “portable”. Jika ingin instal portable, pilih y. Tapi bila anda menginstal di komputer, silahkan pilih n. Kemudian tekan enter.

(5)

(6)

2015

6

8. Instalasi selesai, pilih 1 kemudian enter untuk menjalankan XAMPP Control Panel. Selanjutnya pilih X untuk keluar dari proses instalasi.

9. Aktifkan Service “Apache” dan “MySQL” melalui XAMPP Control Panel. Klik tombol “Start”. XAMPP Control Panel bisa diakses dari desktop atau start menu. Jika tidak ada, langsung saja akses ke C:/xampp/xampp-control.exe

(7)

10. Sampai disini, Anda sudah berhasil menginstal XAMPP, artinya anda sudah berhasil instal PHP, APACHE dan MYSQL. Silahkan buka browser anda dan ketikkan http://localhost untuk memastikan XAMPP sudah selesai terinstal. Jika hasilnya seperti gambar di bawah ini, instalasi yang anda lakukan berjalan dengan sukses.

Setelah proses instalasi selesai, langkah selanjutnya kita buat folder untuk document root Xampp. Documentroot merupakan lokasi/folder untuk menyimpan file PHP/web agar bisa dipanggil/dijalankan oleh webserver. Pada contoh ini, lokasi documentroot berada di c:/xampp/htdocs/. Berarti jika anda ingin agar file bisa dijalankan melalui webserver, letakkan file anda folder tersebut.

Akan tetapi lokasi documentroot bisa Anda pindahkan ke tempat lain sesuai dengan keinginan. Misalnya Anda ingin memindahkan ke drive D: komputer/laptop yang anda miliki. Langkah yang harus dilakukan adalah sebagai berikut:

(8)

2015

8

1. Buatlah satu folder terlebih dahulu dengan nama htdocs di drive D:

Kemudian buka file c:/xampp/apache/conf/httpd.conf menggunakan notepad ataupun notepad++

2. Setelah terbuka, Cari kata documentroot didalam file tersebut. Untuk memudahkan pencarian silahkan anda tekan Ctrl+F.

(9)

3. Anda akan menemukan satu baris sebagai berikut, lihat gambar di bawah ini:

4. Ganti c:/xampp/htdocs dengan folder lain sesuai keinginan, bila anda sudah membuatnya di folder D, maka gantilah menjadi D:/htdocs sebagai documentroot.

(10)

2015

10

5. Kemudian ada beberapa settingan tersebut, terdapat tulisan <Directory “C:/xampp/htdocs”>, ganti c:xampp/htdocs dengan D:/htdocs

6. Terakhir, save file tersebut dan buka kembali XAMPP Control Panel. Restart Apache dengan mengklik “Stop” dan “Start” kembali. Sekarang semua file PHP harus disimpan di D:/htdocs/

7. Buatlah nama folder untuk projek yang akan kita buat di dalam folder htdocs/ Pengenalan HTML

HTML bukan bahasa pemograman (programming language), tetapi bahasa markup

(markup language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa

pemograman lain, dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemograman seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa

(11)

Lalu bagaimana cara menjalankan file html atau php yang kita buat pada browser?. Langkah yang harus dilakukan adalah sebagai berikut:

1. Buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut ini

2. Lalu simpan file tersebut pada folder di dalam htdocs yang telah dibuat. Untuk diperhatikan bahwa nama file penyimpanan harus diketikan extensi filenya, seperti .html atau .php seperti pada gambar di bawah ini

3. Buka browser dan ketikan //localhost/[nama folder yang kita buat], maka akan muncul file yang telah kita buat seperti pada gambar di bawah ini

(12)

2015

12

4. Pilih nama file latihan1.php, maka akan tampil seperti gambar di bawah ini

Struktur Dasar HTML

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

Agar lebih mudah memahaminya, silahkan buka text editor (Notepad++), lalu ketikkan kode berikut ini:

Contoh struktur dasar HTML:

Tag <html>

Setelah DTD, tag berikutnya adalah tag <html>.

Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML akan berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

(13)

Tag <head>

Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

Tag <title>

dalam contoh kita digunakan untuk menampilkan title dari sebuah halaman web, dan biasanya ditampilkan pada bagian paling atas web browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan pada tab browser.

Tag <body>

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar waktu kita dalam merancang web adalah di dalam tag <body> ini.

Cara Membuat Judul (heading) di HTML

HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading. Heading dirancang terpisah dari paragraf. Tag Heading biasanya

digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul.

Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan huruf

tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.

Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang merupakan tag paling awal dari sebuah halaman web.

(14)

2015

14

Pemrograman Web 1 Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id Cara Membuat Komentar di HTML

Untuk membuat komentar di HTML, kita menggunakan awalan . Agar lebih mudah dipahami, langsung saja kita simak dalam bentuk contoh. Silahkan tulis kode HTML berikut dan save sebagai komentar.html

Contoh penggunaan tag komentar HTML:

(15)

Cara Membuat Warna di HTML

HTML menyediakan tag khusus untuk membuat warna pada tulisan dengan tag <font> </font>

Contoh penggunaan tag warna HTML:

Hasil pada browser seperti gambar di bawah ini

Untuk memilih warna lain, dapat menggunakan alat bantu pada photo shop atau corel draw seperti contoh di bawah ini, warna bd5a5a

(16)

2015

16 Daftar Pustaka

Bahra. 2005. Analisis dan Desain Sistem Informasi. Tangerang: Graha Ilmu.

Hermawan, Benny . 2005. Menguasai Java 2 & Object Oriented Programming. Yogyakarta: Andi Yogyakarta.

Hakim, Rachmad dan Sutarto . 2009. Konsep Pemrograman Java dan Penerapannya untuk Membuat Software Aplikasi. Jakarta: Elex Media Komputindo.

Jogiyanto. 2005. Analisis & Disain Sistem Informasi: Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis. Yogyakarta: Andi Yogyakarta.

(17)

MODUL PERKULIAHAN

Pemrograman Web 1

Pembuatan paragraf, format

karakter dan membuat daftar di

HTML

02 Abstract

Kompetensi

(18)

2015

2

Pemrograman Web 1 Pusat Bahan Ajar dan eLearning

Tim Dosen http://www.mercubuana.ac.id

Pembahasan

Cara Membuat Tag Paragraph <p>

Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML yang dibuat pada tutorial sebelum ini, dan menambahkan beberapa text. Silahkan buka kembali text editor, lalu ketikkan kode berikut:

Contoh penggunaan tag paragraf:

Hasilnya pada browser seperti pada gambar di bawah ini

Tag Break (<br>)

Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).

(19)

Hasilnya pada browser seperti pada gambar di bawah ini

Cara Memasukkan dan Menampilkan Karakter Khusus pada HTML

Selain karakter alfanumerik, kadang kita butuh menulis karakter-karakter khusus ke dalam

HTML, misalnya tanda “<”. Karakter kurung siku “<” tidak bisa dituliskan begitu saja di dalam

HTML, karena karakter kurung siku berfungsi internal dalam HTML sebagai tanda pembuka tag. Di dalam tutorial text HTML kali ini, kita akan mempelajari cara menampilkan dan memasukkan karakter khusus ke dalam HTML.

Untuk memasukkan karakter-karakter khusus ke dalam HTML, kita harus men-‘escape’

karakter tersebut. Istilah escape maksudnya bahwa dari pada menulis sebuah karakter secara langsung, kita bisa menggantinya dengan angka atau referensi yang merujuk kepada

karakter tersebut.

Dalam HTML, terdapat 2 cara untuk men-‘escape’ karakter, yaitu dengan menggunakan

penomoran angka (numeric entity), dan menggunakan singkatan untuk karakter (named

entity). Kedua cara ini ditulis dengan karakter ‘&’ pada awal penulisan, dan diakhiri dengan

(20)

2015

4

Sebagai contoh, jika saya ingin menuliskan karakter “<” di dalam konten HTML, maka penulisannya adalah sebagai berikut:

Hasilnya adalah sebagai berikut

Tabel Karakter Khusus dalam HTML

Selain karakter “<”, HTML menyediakan ratusan karakter khusus yang bisa digunakan. Berikut adalah tabel karakter khusus yang sering digunakan:

(21)

Contoh penggunaan karakter spesial seperti gambar di bawah ini

Hasil yang didapatkan

Cara Membuat Daftar/List di HTML

Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak

berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered

list dengan bulatan atau kotak.

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

(22)

2015

6

Maka akan dihasilkan seperti gambar di bawah ini

Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

(23)

Hasil yang ditampilkan adalah sebagai berikut

(24)

2015

8

Hasil yang didapatkan seperti gambar di bawah ini

Selain default yang telah disediakan, dalam HTML juga dapat melakukan permulaan dengan nilai tertentu. Berikut beberapa tipe list dengan tag <ol>:

(25)

Hasil yang ditampilkan seperti gambar di bawah ini

Cara Membuat Description List dalam HTML (tag dl, dt dan dd).

Description List adalah jenis list yang ditujukan untuk membuat struktur yang berisi

deskripsi atau daftar penjelasan.

List jenis ini mungkin tidak sepopuler ordered list atau unordered list, namun jika anda membutuhkan struktur HTML untuk membuat list yang berisi penjelasan istilah-istilah dengan keterangannya, mungkin bisa menggunakan list jenis ini.

Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl>

dan </dl>. Untuk setiap deskripsi atau judul istilah, kita menggunakan tag <dt>. Sedangkan

untuk penjelasan istilah tersebut, kita menggunakan tag <dd>.

(26)

2015

10

Cara Membuat Daftar/List dengan CSS

Sebelum kita melanjutkan pembuatan menggunakan CSS, mari kita buat nama file

style.css, dan isikan code seperti di bawah ini

Pada body, digunakan untuk mendeklarasikan penggunaan jenis tulisan default, font tulisan secara default, dan lain-lain sesuai keinginan programmer.

(27)

(28)

2015

12 Daftar Pustaka

(29)

MODUL PERKULIAHAN

Pemrograman Web 1

Pembuatan dokumen HTML berisi

gambar dan link

03 Abstract

Kompetensi

(30)

2015

2 Pembahasan

Cara Menambahkan Gambar di HTML <tag image>

Sulit membayangkan sebuah halaman HTML tanpa gambar untuk standard web saat ini.

Pada tutorial belajar HTML cara menambahkan gambar di HTML ini kita akan

mempelajari cara penggunaan tag image. Tag Image digunakan untuk menampilkan

gambar kedalam halaman web, menggunakan <img>. Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.

Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan

sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.

Pada contoh dibawah ini saya menggunakan sebuah gambar koala.jpg yang berada dalam

satu folder dengan halaman HTML saat ini. Contoh code:

Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan /> Maka akan tampil hasil seperti gambar di bawah ini

(31)

Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, yaitu alt

Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar.

(32)

2015

4

Atribut width dan height dalam tag <img>

Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.

Contoh penggunaan atribut width dan height pada tag <img>:

Hasil yang didapatkan seperti gambar di bawah ini:

Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang

kita tetapkan.

Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun

(33)

height), maka web browser akan menampilkan gambar dengan lebar 300px, dan

menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.

Cara Mengatur Tampilan Gambar dalam HTML

Pada tutorial HTML dasar tentang gambar, kita telah mempelajari cara memasukkan gambar ke dalam HTML. Dalam tutorial HTML lanjutan ini kita akan membahas 2 buah atribut yang sering digunakan di dalam mengatur tampilan gambar dalam HTML, yaitu atribut align dan atribut border.

Mengenal Atribut Align pada Tag <img>

Secara default, gambar akan tampil dengan text berada di sisi bawah gambar. Untuk mengubah atau mengatur tampilan gambar dalam HTML, kita bisa menambahkan atribut

align ke dalam tag <img>. Atribut align bisa diisi dengan beberapa nilai, yakni bottom, left,

middle, right dan top.

Sesuai dengan namanya, masing-masing nilai dari atribut align bisa digunakan untuk mengatur tampilan gambar. Berikut adalah contoh kode HTML dengan menggunakan atribut

align=”left” pada gambar. Contoh code:

(34)

2015

6

Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, anda bisa merubah kode diatas dengan mengubah-ubah nilai dari atribut align.

Mengenal Atribut Border pada Tag <img>

Atribut border digunakan untuk menambahkan garis tepi (border) kedalam gambar. Nilai dari atribut ini adalah angka yang berisi ukuran lebar garis tepi dalam satuan pixel. Berikut

adalah contoh kode HTML dengan menggunakan atribut border=”5” pada gambar:

(35)

Hasil yang didapatkan:

Penggunaan atribut border secara langsung ke dalam tag <img> memiliki banyak keterbatasan, misalnya kita tidak bisa mengatur warna dan jenis border dari gambar.

Pengaturan yang lebih disarankan adalah dengan menggunakan CSS.

Cara Membuat Image dengan CSS

(36)

2015

8

mendeklasrasikan file css kita pada file php yang kita buat. Selanjutnya buatlah file php dengan kode seperti di bawah ini

(37)

Daftar Pustaka

(38)

MODUL PERKULIAHAN

Pemrograman Web 1

Link internal dan eksternal

04 Abstract

Kompetensi

(39)

Pembahasan

Cara Menambahkan Link di HTML <tag a>

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan

pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a>

setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah

singkatan dari hypertext reference).

Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat

kode seperti dibawah ini.

Contoh penggunaan tag link <a>:

Maka akan tampil hasil seperti gambar di bawah ini

Alamat absolute ditulis dengan lengkap, sebagai contoh

(40)

2015

3

Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini.

Seandainya nama file kita adalah latihan1.php, dan dalam folder yang sama terdapat

halaman latihan2.php, kita dapat menggunakan href=”latihan2.html” untuk membuat link

ke halaman latihan2.php

Atribut tag <a>: target

Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan

apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.

Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa

halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru,

gunakan atribut target=”_blank”.

Contoh penggunaan tag link <a> dengan atribut target:

Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru, dan tidak menimpa tab saat ini.

Selain digunakan untuk menghubungkan halaman HTML, Tag <a> juga bisa digunakan

untuk dihubungkan ke bagian lain dari halaman yang sama, atau disebut Internal Link.

Cara pembuatan internal link adalah dengan membuat link berisi atribut id dari tag lain.

Cara Membuat Internal Link ke Bagian Lain Dokumen (Atribut id)

Jika pada tutorial HTML Dasar kita telah mempelajari cara membuat link ke halaman lain

(baik link dengan alamat absolut maupun alamat relatif), kita juga bisa membuat link ke

bagian lain dari dokumen yang sama. Dalam Tutorial HTML Lanjutan kali ini kita akan mempelajari Cara Membuat Internal Link ke Bagian Lain Dokumen dengan menggunakan atribut id.

(41)

Selain digunakan di dalam CSS dan JavaScript, atribut id juga digunakan di dalam HTML

sebagai ‘penanda’ bagian dari halaman web.

Apabila paragraf pertama dari halaman kita memiliki id=”paragraf1”, maka kita bisa

membuat link yang akan ‘memindahkan’ jendela web browser ke bagian “paragraf1”,

dengan menuliskan:

<a href="#paragraf1">Kembali ke paragraf pertama</a>

Jika bagian tersebut dijalankan, web browser akan menampilkannya seperti link ‘normal’,

namun ketika user men-klik kalimat link tersebut, ia akan dipindahkan ke bagian halaman

yang memiliki id=”paragraf1”. Perhatikan bahwa di dalam tag <a>, kita menggunakan

tanda pagar “#” untuk berpindah ke bagian lain halaman.

Syarat dari link tersebut bisa berfungsi adalah di bagian lain halaman, harus ada tag yang

memiliki atribut id=”paragraf1”.

Selain digunakan untuk pindah ke bagian lain pada halaman yang sama, kita juga bisa membuat link untuk halaman lain, dan sekaligus memindahkan tampilan ke bagian tertentu.

Untuk keperluan ini, kita hanya tinggal menambahkan tanda pagar di akhir atribut href,

seperti contoh berikut ini:

<a href="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>

Jika digabungkan dengan alamat absolut, kita bisa memandu pengunjung situs ke bagian

(42)

2015

5

Sebagai contoh, berikut adalah kode HTML cara membuat link ke bagian lain dokumen HTML:

(43)

Cara Membuat <a> dengan CSS

(44)

2015

7

(45)

Daftar Pustaka

Jogiyanto. 2005. Analisis & Disain Sistem Informasi: Pendekatan Terstruktur Teori dan

(46)

MODUL PERKULIAHAN

Pemrograman Web 1

Dokumen HTML berisikan tabel dan

kegunaannya

05 Abstract

Kompetensi

(47)

Pembahasan

Cara Membuat Tabel dengan Tag <table>,<tr>,<td>

Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <tabel>, tag <tr>, dan tag <td>:

 Tag <tabel> digunakan untuk memulai tabel

 Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari

tabel.

 Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke

tabel.

Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:

(48)

2015

3

Maka akan tampil hasil seperti gambar di bawah ini

Perhatikan bahwa pada tag <tabel> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

Atribut cellpadding dalam tabel HTML

Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.

Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellpadding=”2″, maka web browser akan membuat jarak sebesar 2 pixel dari border sisi dalam tabel dengan isi text tabel.

(49)

Berikut contoh penggunaan atribut cellpadding dalam tag table HTML:

(50)

2015

5

Atribut cellspacing dalam tabel HTML

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.

Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellspacing=”2″, maka web browser akan menampilkan jarak sebesar 2 pixel diantara garis border tabel.

(51)

Fungsi Atribut Rowspan and Colspan

Atribut rowspan and colspan digunakan untuk membuat sel tabel ‘bersatu’ dengan sel yang lain. Atribut ini diletakkan pada tag td dari sebuah tabel. Agar mudah memahami, langsung saja kita buat contoh kode HTMLnya.

Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelspan.html

(52)

2015

7

Maka hasilnya seperti gambar di bawah ini

Dalam membuat tabel dengan atribut rowspan dan clospan, anda sebaiknya telah mengkalkulasi seberapa besar tabel yang akan dibuat, karena dengan semakin kompleks tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut

Fungsi Tag th

Sering kali dalam membuat tabel, baris pertama kita gunakan sebagai judul kolom dari baris-baris dibawahnya. Dan biasanya baris-baris pertama tabel ini secara visual dibedakan dengan baris dibawahnya agar tampak lebih menarik, misalnya diberi warna yang berbeda, atau font yang berbeda.

Untuk keperluan ini, HTML memiliki tag khusus yang bisa digunakan, yaitu tag th (singkatan dari table head) . Dalam penggunaan tag th, kita hanya perlu mengganti tag td dengan th pada baris pertama tabel.

Sebagai contoh cara penggunaan tag th, silahkan buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelth.html

(53)

Contoh penggunaan tag th:

(54)

2015

9

Penggunaan atribut width pada tag col

Salah satu atribut yang bisa kita gunakan pada tag col adalah atribut width. Atribut ini digunakan untuk mengatur lebar dari masing-masing kolom dalam tabel.

Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelcolwidth.html

(55)

Dengan hasil seperti pada gambar di bawah ini

Dari contoh kode HTML diatas, saya menggunakan atribut width untuk mengatur lebar dari kolom tabel. Misalnya untuk kolom pertama, atribut width=”75px” digunakan untuk membuat lebar kolom menjadi 75 pixel. Lebih lanjut tentang atribut width, akan saya bahas secara tersendiri pada tutorial selanjutnya.

Cara membuat garis antara baris dan kolom tabel (atribut rules)

Jika sebelumnya anda telah mempelajari pembahasan tentang atribut border untuk tabel, maka jika diperhatikan, web browser sebenarnya tidak hanya menampilkan border, namun juga garis pembatas di antara sel tersebut, seperti tampilan dibawah ini:

HTML menyediakan sebuah atribut yang dapat digunakan untuk mengontrol garis pembatas antara baris dan kolom ini, yakni atribut rules. Penulisan atribut rules di letakkan pada tag table. Atribut rules dapat berisi 1 diantara 4 nilai: rows, cols, all, atau none.

Sesuai dengan arti dari masing-masing nilai tersebut, jika kita menambahkan atribut rules=”cols” pada tabel, maka untuk setiap sel akan ditampilkan garis pembatas hanya diantara kolom. Sedangkan atribut rules=”rows” akan menampilkan garis pembatas hanya diantara baris. Jika menginginkan garis tampil baik untuk kolom maupun untuk baris tabel, kita dapat menggunakan atribut rules=”all”. Sebaliknya jika tidak ingin menampilkan garis apapun diantara sel, bisa menggunakan atribut rules=”none”.

(56)

2015

11

Contoh penggunaan atribut rules pada tag rules :

(57)

Hasil jika menggunakan rules=”rows”

Hasil jika menggunakan rules=”all”

(58)

2015

13

Cara Membuat <table> dengan CSS

Sebelum kita melanjutkan pembuatan menggunakan CSS, mari kita buat nama file style.css, dan isikan code seperti di bawah ini (tambahkan dari css sebelumnya)

(59)

Daftar Pustaka

(60)

MODUL PERKULIAHAN

Pemrograman Web 1

Dokumen HTML dengan

menggunakan frame dan inlilne

frame

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Fakultas Ilmu Komputer Teknik Informatika

06 Abstract

Kompetensi

(61)

Pembahasan

Cara Membuat Frame HTML

Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian.

Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan

halaman lainnya.

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:

1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya

2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen

3. Membuat suatu dokumen tanya jawab, dll.

Sama halnya seperti membuat tabel, dalam mendefinisikan frame, hal pertama yang harus dilakukan adalah mendefinisikan dahulu bentuk frame yang akan dibuat, misalnya bentuk frame pada contoh berikut:

(62)

2015

3

Cara Membuat Frame HTML

Untuk membuat frame seperti Frame A2, sebuah halaman kita bagi menjadi dua bagian

terlebih dahulu secara horizontal seperti Frame A1, kemudian dibagi lagi hingga seperti Frame A2. Demikian pula untuk membuat Frame B2 harus melalui bentuk Frame B1. Urutan

ini akan sangat memengaruhi bentuk frame yang akan kita bangun. Tag untuk membuat frame diawali dengan menggunakan <FRAMESET> dan diakhiri dengan </FRAMESET>. Pada file pendefinisi frame kita tidak lagi memerlukan tag <BODY></BODY>, sehingga struktur dasar pendefinisi frame adalah sebagai berikut:

(63)

Pada file pendefinisi frame ini, setiap kita akan membagi menjadi beberapa bagian, maka kita gunakan tag <FRAMESET></FRAMESET>. Atribut-atribut yang dapat menyertai tag ini adalah:

 BORDER, untuk menentukan tebal garis pemisah antar frame  ROWS, untuk menentukan berapa baris bagian yang akan dibentuk  COLS, untuk menentukan berapa kolom yang akan dibentuk

Jika kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan frame tersebut dengan tag <FRAME>. Atribut-atribut yang dapat menyertai tag ini adalah:

 NAME, untuk memberi identitas/nama bagi frame tersebut. Fungsinya adalah ketika frame tersebut dijadikan target untuk menampilkan suatu halaman.

 SRC, menunjukkan file yang mengisi frame tersebut.

 SCROLLING, untuk menunjukkan apakah kita akan menggunakan scrolling bar di

samping atau di bawah halaman, opsi inputnya adalah "YES, NO atau AUTO". Yang perlu diperhatikan saat membuat file pendefinisi frame adalah bahwa kita telah mempunyai file yang akan digunakan untuk mengisi frame tersebut.

Aturan Pendefinisian Ukuran :  Nilai angka dalam pixel.

 Nilai angka dalam persentase (%) yang menandakan persentase dari keseluruhan area tampilan yang tesedia.

(64)

2015

5

Berikut adalah code yang akan dibuat

(65)

Daftar Pustaka

(66)

MODUL PERKULIAHAN

Pemrograman Web 1

Pembuatan formulir HTML

07 Abstract

Kompetensi

(67)

Pembahasan

Cara Membuat Form HTML

Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web.

Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan

akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya akan menjelaskannya pada tutorial tentang PHP dan JavaScript.

Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input,

textarea,select dan option.

Pengertian tag <form>

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form>

dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.

Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP

yang digunakan untuk memproses isi data form.

Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.

Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan

get (dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form

akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian.

Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi

(68)

2015

3

Struktur dasar form akan terlihat sebagai berikut:

<form action="prosesdata.php" method="post"> ...isi form...

</form>

Mengenal tag <input>

Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak

bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>.

Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:

 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang

menerima input berupa text, contohnya digunakan untuk inputan nama, username,

dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut

value yang bisa diisi nilai tampilan awal dari text

 <input type=”password” /> dalam tampilannya sama dengan type text, namun

teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.

 <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist

atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type

checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked,

akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih

beberapa hobi.

 <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih

satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.

 <input type=”submit” /> akan menampilkan tombol untuk memproses form.

Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

(69)

Mengenal tag <textarea>

Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat

berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows

dan cols, atau melalui CSS.

Contoh penggunaan textarea adalah sebagai berikut:

Text yang diisi dapat mencapai banyak baris </textarea>

Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.

Mengenal tag <select>

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat

memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.

Contoh penggunaan tag select adalah sebagai berikut:

<option>Pilihan 1</option> <option>Pilihan 2</option>

<option value="pilihan ketiga">Pilihan 3</option> </select>

Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah

berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value

berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak

(70)

2015

5

Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi nilai

awal. Contoh penggunaanya adalah sebagai berikut: <select>

<option>Pilihan 1</option> <option>Pilihan 2</option>

<option value="pilihan ketiga" selected>Pilihan 3</option> </select>

Mengenal Atribut: Name

Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh

web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau

ASP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya

adalah sebagai berikut:

Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing akan dibedakan menurut atributname.

Akhirnya, Sebuah Form Utuh

Merangkum seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk membuat sebuah form HTML. Silahkan buka text editor, dan tuliskan kode HTML berikut,

(71)

Contoh penggunaan tag form:

<!DOCTYPE html> <html>

<head>

<title>Belajar Membuat Form </title> </head>

<body>

Nama: <input type="text" name="nama" value="Nama Kamu" /> <br />

Password: <input type="password" name="password" /> <br />

Jenis Kelamin :

<input type="radio" name="jenis_kelamin" value="laki-laki" checked /> Laki - Laki

<input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan

<br />

Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku <input type="checkbox" name="hobi_nulis" checked /> Menulis <input type="checkbox" name="hobi_mancing" /> Memancing <br />

Asal Kota:

<option value="Kota Jakarta"> Jakarta</option> <option>Bandung</option>

<option value="Kota Semarang" selected>Semarang</option> </select>

<br />

(72)

2015

7

Pemrograman Web 1 Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id Komentar Anda:

<textarea name="komentar" rows="5" cols="20"> Silahkan katakan isi hati anda

</textarea> <br />

</form> </body> </html>

(73)

Daftar Pustaka

(74)

MODUL PERKULIAHAN

Pemrograman Web 1

Java Script, Tipe Data, Hirarki Object

09 Abstract

Kompetensi

(75)

Pembahasan

Cara Memasukkan kode JavaScript ke dalam HTML

Cara pertama untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan

menggunakan tag <script> secara internal. Internal disini berarti bahwa kode JavaScript

ditulis pada halaman yang sama dengan HTML, atau di dalam satu file HTML.

Cara ini merupakan cara yang paling sering digunakan, jika kode JavaScript tidak begitu panjang, dan hanya digunakan di 1 halaman saja. Kode JavaScript yang akan diinput diletakkan diantara tag pembuka<script> dan tag penutup</script> seperti berikut ini:

//kode javascript diletakkan disini </script>

Tag <script> akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah

HTML, tetapi JavaScript.

Sebagai contoh cara penginputan JavaScript dengan tag <script>, berikut adalah kode

HTMLnya: <!DOCTYPEhtml> <html>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/> <head> <title>Belajar JavaScript</title>

</head>

<body> <h1>Belajar JavaScript</h1>

<p>Saya sedang belajar JavaScript</p> <p>Belajar Web Programming</p>

</body> </html>

Dalam contoh diatas, saya meletakkan tag <script> di dalam tag <head> dari HTML (pada

baris ke 7). Tag <script> tersebut berisi kode JavaScript: alert(“Hello World!!”);. alert()

adalah fungsi dalam JavaScript yang akan menampilkan pesan ke dalam web browser.

Fungsi ini sering digunakan dalam proses pembuatan program JavaScript untuk

(76)

2015

3

String. Kita akan membahas cara penulisan fungsi dan tipe-tipe data JavaScript pada tutorial-tutorial selanjutnya.

Cara Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)

Cara berikutnya untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan

Event Handler dari dalam tag HTML.

Konsep Event Handler akan kita pelajari secara khusus pada tutorial terpisah, namun secara

sederhananya, event handler adalah pemanggilan kode javascript ketika ‘sesuatu’ terjadi

dalam tag HTML.

Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan, di

arahkan mouse, dan lain-lain. Event handler di dalam JavaScript ditulis dengan

penambahan kata on. Sehingga jika sebuah tombol di-klik, maka disebut sebagai onclick,

jika mouse berada diatas element disebut sebagai onmouseover, dan lain-lain.

Sebagai contoh, ketika sebuah tombol di-klik, maka kita bisa menampilkan alert(“Hello

World!!”). Berikut adalah contoh kode programnya: <!DOCTYPEhtml>

<html>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/> <head> <title>Belajar JavaScript</title> </head>

<body> <h1>Belajar JavaScript</h1>

<p>Saya sedang belajar JavaScript</p> <p>Belajar Web Programming</p>

<buttononclick="alert('Hello World!!')">Klik Saya

</body> </html>

(77)

Dari pembahasan sebelumnya, telah membuat form seperti di bawah ini

Bagaimana menampilkan jendela konfirmasi dan peringatan

Kemudahan untuk menjalankan JavaScript hanya dengan web browser, memberikan

permasalah tersendiri untuk programmer. Biasanya dalam membuat program adakalanya kita melakukan kesalahan penulisan program, seperti salah penulisan fungsi, atau lupa menambahkan tanda “;” sebagai penutup baris. Biasanya pesan kesalahan akan langsung ditampilkan, dan kita tinggal melakukan koreksi.

Akan tetapi, pesan kesalahan (error) untuk JavaScript tidak langsung ditampilkan web

browser. Web browser pada dasarnya adalah aplikasi untuk menampilkan halaman web,

dan secara default web browser “menyembunyikan” permasalahan coding halaman web

yang ditampilkan. Hal ini berguna untuk pengguna awam yang pasti akan bingung melihat pesan-pesan error dari sebuah halaman web.

Khusus untuk programmer, kita butuh hal sebaliknya, yaitu agar web browser dapat

(78)

2015

5

Sesuai dengan namanya, Developer Tools adalah fasilitas yang dirancang untuk

pengembangan web. Dengan fitur ini, kita bisa menampilkan pesan kesalahan JavaScript,

HTML, CSS dan melihat efeknya secara real time.

Untuk mengakses fitur ini, cari menu Tools, lalu pilih salah satu Developer Tools atau

JavaScript Console. Developer Tools bisa juga dibuka dengan shortcut tombol keyboard:

ctrl+shift+i. Untuk kenyamanan, anda dapat menghapalkan tombol shortcut tersebut karena

kita akan sering menggunakan fitur Developer Tools ini.

Contoh kasus penggunaan jendela peringatan dan Konfirmasi

Pada pertemuan sebelumnya telah kita buat tombol submit seperti di bawah ini <input type="submit" value="Simpan">

Selanjutnya untuk menampilkan kode menggunakan javascript, lakukan perubahan seperti di bawah ini

Lalu tambahkan javascript seperti di bawah ini

Penjelasan:

1. Dari onClick=”clickSaya()” , event tersebut akan mencari kode javascript yang

dibuat dengan awalan <script> </script> den mencari function clickSaya() 2. Perhatikan penulisannya karena bersifat case sensitive

3. Dari script di atas, ketika kita memilih tombol Simpan maka akan tampil seperti

(79)

Selanjutnya untuk script konfirmasi, lakukan seperti di bawah ini

(80)

2015

7

Jika pilihan Cancel (jawaban==false) maka akan muncul pesan

Jika pilihan Ok (jawaban==true) maka akan muncul pesan

Tipe data

1. String

Tipe data String di dalam JavaScript adalah tipe data yang terdiri dari kumpulan karakter yang berurutan. Atau di dalam penggunaan sehari-hari string adalah tipe

data yang menampung nilai text atau kalimat.

Untuk membuat sebuah tipe data string, kita hanya tinggal menambahkan tanda

kutip (bahasa inggris: ’quotes’) pada awal dan akhir dari text. JavaScript

mendukung penggunaan tanda kutip satu ( ’ ) manupun tanda kutip ganda ( ’’ ).

Didalam sumber bahasa inggris sering disebut sebagai single quote dan double

quote.

Di dalam JavaScript, kedua tanda kutip ini bisa digunakan secara terpisah, maupun

(81)

Contoh dalam program: Tambahkan

Lalu tambahkan script java di bawah ini

Lihat kasus berikut ini jika kita menggunakan angka untuk dijumlahkan Tambahkan script

(82)

2015

9

Berikut adalah Escape Sequences di dalam JavaScript:

a. \0: Karakter NUL b. \b: Backspace c. \t: Horizontal tab d. \n: Newline e. \v: Vertical tab f. \f: Form feed g. \r: Carriage return

h. \”: Tanda kutip dua (double quote)

i. \’: Tanda kutip satu (apostrophe atau single quote)

j. \\: Garis miring backslash

k. \xXX: Karakter Latin-1 dengan menggunakan dua digit heksa desimal XX

l. \uXXXX: Karakter Unicode dengan menggunakan empat digit heksa XXXX

Contoh script: <script>

varnama = 'Juma\'in'; //hasil: Juma'in

varsitus = 'http:\\\\www.dunia.com'; //hasil: http:\\www.dunia.com

var pesan = "dia berkata:I\"ll be back"; //hasil: dia berkata:I'll be back

varpesan2 = "Kalimat ini terdiri dari\n 2 baris"; // hasil: Kalimat ini terdiri dari

// 2 baris

varsantai = "Saya sedang ngopi di caf\u00e9"; //hasil: Saya sedang ngopi di café

(83)

2. Numeric

Dengan memberikan nilai angka ke dalam sebuah variabel, secara otomatis variabel

tersebut akan bertipe angka (number). Variabel dengan tipe angka, akan memiliki

method yang bisa digunakan untuk memproses data yang ada didalam varibel tersebut.

Di dalam JavaScript, method untuk tipe angka akan lebih banyak berfungsi untuk

mengontrol bagaimana angka tersebut ditampilkan ke dalam web browser, dan

umumnya akan menghasilkan nilai dengan tipe data String. Kita akan membahas

method untuk tipe data number ini secara satu-persatu. Contoh kasus dapat dilakukan seperti di bawah ini

*

Perkalian

+

Penjumlahan

/

Pembagian

(84)

2015

11 Daftar Pustaka

(85)

MODUL PERKULIAHAN

Pemrograman Web 1

Operator, If, dan Switch

10 Abstract

Kompetensi

(86)

2015

2 Pembahasan

Operator Perbandingan dalam JavaScript

Di dalam JavaScript (dan juga bahasa pemograman lain) operator perbandingan adalah

operator yang digunakan untuk membandingkan sebuah nilai atau variabel dengan variabel

lainnya. Hasil dari operasi perbandingan ini akan menghasilkan nilai boolean.

Operator perbandingan di dalam JavaScript adalah sebagai berikut:

Operator sama dengan (==)

Operator sama dengan adalah operator yang akan membandingkan 2 buah nilai atau

variabel dan menghasilkan nilai true jika variabel tersebut bernilai sama. Berikut adalah

contoh programnya:

document.getElementById(‘txtKomentar’).value=(a==benar); // true var a = 12; var b = 4; document.getElementById(‘txtKomentar’).value=(a==b); // false

vara = 7; varb = "7"; document.getElementById(‘txtKomentar’).value=(a==b); // true ! </script>

Perhatikan persamaan pada baris terakhir. Operasi == tidak melihat tipe data dari variabel

yang akan dibandingkan, sehingga 7 (tipe data number) akan dianggap sama dengan “7” (tipe data string). Jika anda ingin membandingkan kedua variabel ini, dan memasukkan jenis tipe data sebagai salah satu penilaian sama atau tidaknya 2 buah variabel, maka harus menggunakan operator identikal (===).

Operator identik dengan (===)

Operator identikal === hampir sama dengan operator ==, yaitu membandingkan apakah 2 buah variabel atau hasil operasi program sama atau tidak. Perbedaannya, operator === lebih ‘ketat aturan’ daripada operator ==. Operasi 7 == “7” akan dianggap sama dan

menghasilkan nilai true, namun operasi 7 === “7” akan dianggap false, karena tipe data kedua nilai ini berbeda.

(87)

document.getElementById(‘txtKomentar’).value=(a===benar); // true

vara = 12; varb = 4; document.getElementById(‘txtKomentar’).value=(a===b); // false var a = 7; var b = "7"; document.getElementById(‘txtKomentar’).value=(a===b); // false ! var a = "7"; var b = "7"; document.getElementById(‘txtKomentar’).value=(a===b); // true </script>

Operator tidak sama dengan (!=)

Operator != adalah kebalikan dari operator ==, dan akan menghasilkan nilai true jika hasil operasi 2 buah variabel yang dibandingkan tidak memiliki nilai yang sama. Berikut adalah contoh penggunannya:

document.getElementById(‘txtKomentar’).value=(a!=benar); // false var a = 12; var b = 4; document.getElementById(‘txtKomentar’).value=(a!=b); // true

vara = 7; varb = "7"; document.getElementById(‘txtKomentar’).value=(a!=b); // false ! </script>

Perhatikan juga untuk persamaan baris terakhir, operator != tidak mempertimbangkan tipe data variabel, sama seperti operator ==. Jika anda ingin jenis tipe data juga merupakan kriteria perbandingan, maka gunakan operator !==.

Operator tidak identik dengan (!==)

Jika operator != tidak mempertimbangkan tipe data, maka operator !== hanya akan false

jika operator yang dibandingkan memiliki nilai yang sama dan juga tipe data yang sama. Berikut adalah contoh penggunaannya: