Anda di halaman 1dari 133

 

 
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   

01
  Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
   
 
 
 

   
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”.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


  3 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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
7. XAMPP telah siap, tekan enter 2 kali untuk melanjutkan.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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
struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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>

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

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

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Cara Membuat Komentar di HTML

Untuk membuat komentar di HTML, kita menggunakan awalan <!-- dan penutup -->. 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:

Hasil pada browser seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

 
MODUL PERKULIAHAN
 

 
Pemrograman Web 1  

Pembuatan paragraf, format


karakter dan membuat daftar di
  HTML
 
 

             

  Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh   

02
  Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer     

Abstract  Kompetensi 
   
 
 
 

   
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).

Contoh penggunaan tag break:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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
karakter ‘;’.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Maka akan dihasilkan seperti gambar di bawah ini

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

Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Hasil yang ditampilkan adalah sebagai berikut

Untuk membuat nested list dapat dilakukan dengan kode seperti di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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>:

Contoh code programnya dapat dilakukan seperti di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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>.

Contoh kode yang dapat dilakukan adalah sebagai berikut

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Hasil yang didapatkan seperti gambar di bawah ini

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.

<link rel="stylesheet" type="text/css" href="style.css"> ini digunakan untuk


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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Hasil yang ditampilkan pada browser seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Pembuatan dokumen HTML berisi


gambar dan link

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

03
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

Contoh penggunaan atribut alt pada tag <img>:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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
tidak keduanya). Misalkan jika kita menetapkan atribut width=300px (tanpa mencantumkan

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Hasil yang didapatkan seperti gambar di bawah ini

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:

Contoh code:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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

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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
<link rel="stylesheet" type="text/css" href="style.css"> ini digunakan untuk
mendeklasrasikan file css kita pada file php yang kita buat. Selanjutnya buatlah file php
dengan kode seperti di bawah ini

Hasil yang ditampilkan pada browser seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Link internal dan eksternal

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

04
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
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 http://www.elematics-


indonesia.com,

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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
tertentu situs lain, dengan syarat pada bagian tersebut memiliki tag id.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

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

Dengan hasil seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Cara Membuat <a> 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)

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Hasil yang ditampilkan pada browser seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Dokumen HTML berisikan tabel dan


kegunaannya

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

05
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
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:

Contoh penggunaan tag <tabel>:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Berikut contoh penggunaan atribut cellpadding dalam tag table HTML:

Hasil yang didapatkan seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

Berikut contoh penggunaan atribut cellspacing dalam tag table HTML:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Hasil yang didapatkan seperti gambar di bawah ini

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

Contoh penggunaan atribut rowspan and colspan:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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 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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Contoh penggunaan tag th:

Hasil yang didapatkan seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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

Contoh penggunaan atribut width pada tag col :

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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”.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Contoh penggunaan atribut rules pada tag rules :

Hasil jika menggunakan rules=”rows”

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Hasil jika menggunakan rules=”rows”

Hasil jika menggunakan rules=”all”

Hasil jika menggunakan rules=”none”

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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)

Hasil yang ditampilkan pada browser seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Dokumen HTML dengan


menggunakan frame dan inlilne
frame

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

06
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
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:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.
 Tanda bintang (*) yang menandakan sisa ruang yang masih ada.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Berikut adalah code yang akan dibuat

Tampilan yang didapat seperti pada gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Pembuatan formulir HTML

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

07
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
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
password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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:

<textarea rows="5" cols="20">

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:

<select>

<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
akan tampak dalam tampilan form.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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:

<input type="text" name="username">

<input type="text" name="email">

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

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,
lalu save sebagai formulir.html

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Contoh penggunaan tag form:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html" method="get">

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:
<select name="asal_kota" >
<option value="Kota Jakarta"> Jakarta</option>
<option>Bandung</option>
<option value="Kota Semarang" selected>Semarang</option>
</select>
<br />

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Komentar Anda:
<textarea name="komentar" rows="5" cols="20">
Silahkan katakan isi hati anda
</textarea>
<br />

<input type="submit" value="Mulai Proses!" >

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

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Java Script, Tipe Data, Hirarki Object

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

09
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
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:

<script>
//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:

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

<script>
alert("Hello World!!");
</script>

</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
menampilkan output sederhana. Fungsi alert membutuhkan 1 inputan (argumen) bertipe

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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:

<!DOCTYPE html>
<html>
<meta http-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>

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

</body>
</html>

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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
menampilkan pesan kesalahan dari program yang kita buat.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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
gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Selanjutnya untuk script konfirmasi, lakukan seperti di bawah ini

Maka akan dihasilkan seperti gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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
secara bersamaan. Perhatikan contoh berikut ini:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Contoh dalam program:

Tambahkan

Lalu tambahkan script java di bawah ini

Lihat kasus berikut ini jika kita menggunakan angka untuk dijumlahkan

Tambahkan script

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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>
var nama = 'Juma\'in';
//hasil: Juma'in

var situs = 'http:\\\\www.dunia.com';


//hasil: http:\\www.dunia.com

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


//hasil: dia berkata:I'll be back

var pesan2 = "Kalimat ini terdiri dari\n 2 baris";


// hasil: Kalimat ini terdiri dari
// 2 baris

var santai = "Saya sedang ngopi di caf\u00e9";


//hasil: Saya sedang ngopi di café

</script>

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
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

% Modulus

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Daftar Pustaka

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

MODUL PERKULIAHAN

Pemrograman Web 1  

Operator, If, dan Switch

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

10
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 

 
 

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:

<script>
var a = true;
var benar = true;
document.getElementById(‘txtKomentar’).value=(a==benar); // true

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

var a = 7;
var b = "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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

<script>
var a = true;
var benar = true;
document.getElementById(‘txtKomentar’).value=(a===benar); // true

var a = 12;
var b = 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:

<script>
var a = true;
var benar = true;
document.getElementById(‘txtKomentar’).value=(a!=benar); // false

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

var a = 7;
var b = "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:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

<script>
var a = true;
var benar = true;
document.getElementById(‘txtKomentar’).value=(a!==benar); // false

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

var a = 7;
var b = "7";
document.getElementById(‘txtKomentar’).value=(a!==b); // true !

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

Operator Kurang dari (<) dan Kurang sama dengan dari: (<=)

Operator < dan <= hanya akan bernilai true jika variabel di sisi kiri operator memiliki nilai
yang kurang dari variabel di sisi kanan. Perbedaan antara < dan <= adalah jika kedua nilai
yang dibandingkan sama, maka operator < akan menghasilkan false, namun operator <=
akan menghasilkan true. Berikut adalah contoh programnya:

<script>
var a = 3;
var b = 4;
document.getElementById(‘txtKomentar’).value=(a<b); // true
document.getElementById(‘txtKomentar’).value=(a<=b); // true

var a = 5;
var b = 5;
document.getElementById(‘txtKomentar’).value=(a<b); // false
document.getElementById(‘txtKomentar’).value=(a<=b); // true
</script>

Operator Besar dari (>) dan Besar sama dengan dari (>=)

Operator > dan >= hanya akan bernilai true jika variabel di sisi kiri operator memiliki nilai
yang lebih besar dari variabel di sisi kanan. Perbedaan antara > dan >= adalah jika kedua
nilai yang dibandingkan sama, maka operator > akan menghasilkan false, namun operator
>= akan menghasilkan true. Berikut adalah contoh programnya:

<script>
var a = 3;
var b = 4;
document.getElementById(‘txtKomentar’).value=(a>b); // false
document.getElementById(‘txtKomentar’).value=(a>=b); // false

var a = 5;
var b = 5;

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

document.getElementById(‘txtKomentar’).value=(a>b); // false
document.getElementById(‘txtKomentar’).value=(a>=b); // true
</script>

Walaupun di dalam contoh yang kita jalankan, operasi perbandingan menggunakan tipe
data angka (number), namun operasi perbandingan di dalam JavaScript juga bisa
dilakukan untuk tipe data String. Operasi perbandingan string di dalam JavaScript dilakukan
secara bit per bit atau dengan melihat urutan dari kode Unicodenya.

Operasi Logika dalam JavaScript

Selain operasi perbandingan, operasi logika juga sangat berkaitan dengan tipe data
boolean. Operasi logika ini juga sering digunakan untuk pembuatan alur program.

Berikut adalah operator logika dan cara penulisan operator logika di dalam JavaScript:

 Operator “dan” (and), ditulis dengan &&. Operator and hanya akan menghasilkan
nilai true jika kedua nilai yang dibandingkan juga bernilai true, dan menghasilkan
nilai false jika salah satu atau kedua nilai yang dibandingkan adalah false.
 Operator “atau” (or), ditulis dengan ||. Operator or akan menghasilkan nilai true jika
salah satu atau kedua nilai yang dibandingkan adalah true. Jika kedua nilai yang
dibandingkan false, maka hasilnya adalah false.
 Operator negasi, ditulis dengan !. Operator ini digunakan untuk membalik nilai
logika. Jika ditulis a adalah true maka !a adalah false dan begitu juga sebaliknya.

Berikut adalah contoh kode program penggunaan operator logika di dalam JavaScript:

<script>
var a = true;
var b = false;

var hasil1 = a && b;


document.getElementById(‘txtKomentar’).value=(hasil1); //false

var hasil2 = a && a;


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

var hasil3 = a || b;
document.getElementById(‘txtKomentar’).value=(hasil3); //true

var hasil4 = !a;


document.getElementById(‘txtKomentar’).value=(hasil4); //false
</script>

Di dalam JavaScript tidak dikenal operator logika XOR, yakni operator yang akan
menghasilkan nilai true jika salah satu bernilai true, tetapi akan menghasilkan false jika

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

kedua nilai true atau kedua nilai false. Namun hal ini bisa ‘diakali’ dengan menggunakan
kode seperti berikut ini: !a != !b.

Berikut contoh penggunaannya:

<script>
var a = true;
var b = false;

var xor1 = !a != !b;


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

var xor2 = !a != !a;


document.getElementById(‘txtKomentar’).value=(xor2); // false
</script>

Struktur IF

Jika anda pernah mempelajari bahasa pemograman lain, pastinya tidak asing dengan
struktur IF. Struktur IF adalah stuktur kode pemograman ‘conditional’ yang akan membuat
percabangan di dalam program. Dengan menggunakan struktur IF, kita bisa membuat 2
percabangan program yang akan dieksekusi jika ‘kondisi’ terpenuhi, dan akan menjalankan
kode program lain jika ‘kondisi’ tidak terpenuhi.

Berikut adalah penulisan dasar alur logika IF:

if (kondisi) {
//kode program jika kondisi true
}
else {
//kode program jika kondisi false
}

Cara Penulisan Struktur Logika IF

Penulisan stuktur IF di dalam JavaScript, mirip dengan bahasa pemograman C++ atau PHP.
Berikut adalah contoh penulisan struktur IF di dalam JavaScript:

<script>
var nama="ilkom"; //buat variabel String nama dan isi dengan ”ilkom”
if (nama=="ilkom") // cek apakah variabel nama berisi ”ilkom”
document.getElementById(‘txtKomentar’).value=("Berhasil!");
</script>

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

Kode program diatas tidak akan menjalankan perintah


document.getElementById(‘txtKomentar’).value=(“Berhasil!”) jika variabel nama tidak
berisi string “ilkom”.

Jika baris yang akan dijalankan terdiri dari 2 baris atau lebih, maka kita harus menggunakan
tanda kurung kurawal (tanda { dan })pada awal dan akhir blok kondisi IF, seperti contoh
berikut:

<script>
var nama="ilkom";
if (nama=="ilkom")
{
document.getElementById(‘txtKomentar’).value=("Berhasil!");
document.getElementById(‘txtKomentar’).value=("Belajar");
document.getElementById(‘txtKomentar’).value=("JavaScript");
}
</script>

Cara Penulisan Struktur Logika IF ELSE dalam JavaScript

Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF tidak terpenuhi,
yakni dengan menambahkan perintah ELSE. Berikut contoh penulisannya:

<script>
//buat variabel Number angka dan isi dengan nilai 17
var angka=17;

// jika sisa hasil bagi (mod) variabel angka dengan 2 adalah 0,


// maka jalankan perintah document.getElementById(‘txtKomentar’).value=()
if (angka%2==0)
document.getElementById(‘txtKomentar’).value=("Angka adalah bilangan
genap");
else
document.getElementById(‘txtKomentar’).value=("Angka adalah bilangan
ganjil");
</script>

Kondisi angka%2==0 hanya akan bernilai TRUE jika nilai dari variabel angka bisa habis
dibagi 2, yang menandakan angka adalah bilangan genap, selain itu dapat dipastikan bahwa
angka adalah bilangan ganjil.

Sama seperti struktur IF, jika bagian ELSE memiliki baris lebih dari 1, maka kita harus
menambahkan tanda kurung kurawal untuk menandai blok tersebut. seperti contoh berikut:

<script>
var angka=12;

if (angka%2==0)

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

{
document.getElementById(‘txtKomentar’).value=("Angka = "+angka);
document.getElementById(‘txtKomentar’).value=("Angka adalah bilangan
genap");
}
else
{
document.getElementById(‘txtKomentar’).value=("Angka = "+angka);
document.getElementById(‘txtKomentar’).value=("Angka adalah bilangan
ganjil");
}
</script>

Cara Penulisan Nested IF dalam JavaScript

Struktur Nested IF atau IF bersarang adalah cara penggunaan struktur IF secara berulang,
yakni stuktur IF yang berada didalam IF. Alur program seperti ini biasa di gunakan untuk
logika yang lebih detail. Berikut adalah contoh penggunaannya:

<script>
var angka=-12;

if (angka%2==0)
{
document.getElementById(‘txtKomentar’).value=("Angka = "+angka);
document.getElementById(‘txtKomentar’).value=("Angka adalah bilangan
genap");
if (angka > 0)
{
document.getElementById(‘txtKomentar’).value=("Angka besar dari 0");
}
else
{
document.getElementById(‘txtKomentar’).value=("Angka kecil dari 0");
}
}
else
{
document.getElementById(‘txtKomentar’).value=("Angka = "+angka);
document.getElementById(‘txtKomentar’).value=("Angka adalah bilangan
ganjil");
if (angka > 0)
{
document.getElementById(‘txtKomentar’).value=("Angka besar dari 0");
}
else
{
document.getElementById(‘txtKomentar’).value=("Angka kecil dari 0");
}
}
</script>

Dalam contoh diatas, saya membuat program yang akan menyeleksi apakah variabel angka
berisi 4 kemungkinan, yakni apakah angka merupakan bilangan genap dan positif, bilangan

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

genap dan negatif, bilangan ganjil dan positif, atau bilangan ganjil dan negatif. Karena ada 4
kondisi akhir yang mungkin terjadi, maka saya menggunakan nested IF.

Dalam pembuatan kode program yang menggunakan konsep nested IF ini, kita harus selalu
memperhatikan tanda kurung kurawal yang menandakan awal dan akhir blok program. Lupa
dalam menutup suatu blok IF akan menyebabkan program tersebut tidak akan berjalan
(akan menghasilkan error), atau yang lebih sukar di deteksi adalah program akan
menghasilkan kesalahan logika. Editor pemograman yang khusus seperti Notepad++ akan
memudahkan kita untuk memastikan bahwa suatu blok program telah ditutup secara benar.

Cara Penulisan Struktur Logika ELSE IF dalam JavaScript

Struktur ELSE IF adalah bentuk lain dari penulisan struktur IF ELSE. Struktur ELSE IF
terbentuk ketika kita menggunakan struktur IF ELSE secara berulang. Berikut contoh
sederhananya:

<script>
var angka=2;

if (angka==1)
{
document.getElementById(‘txtKomentar’).value=("Angka Satu");
}
else if (angka==2)
{
document.getElementById(‘txtKomentar’).value=("Angka Dua");
}
else if (angka==3)
{
document.getElementById(‘txtKomentar’).value=("Angka Tiga");
}
else if (angka==4)
{
document.getElementById(‘txtKomentar’).value=("Angka Empat");
}
</script>

Pengertian Struktur Logika SWITCH dalam JavaScript

Struktur logika SWITCH dapat disederhanakan sebagai bentuk khusus dari struktur IF
ELSE. SWITCH digunakan untuk percabangan kode program dimana kondisi yang diperiksa
hanya 1 namun membutuhkan banyak opsi.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

Struktur dasar penulisan SWITCH adalah sebagai berikut:

switch (kondisi)
{
case hasil_kondisi_1:
// kode program jika kondisi sama dengan hasil_kondisi_1
break;
case hasil_kondisi_2:
// kode program jika kondisi sama dengan hasil_kondisi_2
break;
default:
kode program untuk kondisi lainnya
break;
}

Kondisi untuk inputan struktur SWITCH biasanya adalah variabel yang akan diperiksa.
Hasil percabangan dari variabel tersebut akan ditangani oleh perintah case. Opsi default
bisa ditambahkan untuk menangani kasus yang tidak ditangani oleh perintah case.

Cara Penulisan Struktur Logika SWITCH dalam JavaScript

Agar lebih mudah dipahami, langsung saja kita masuk ke dalam kode program SWITCH
dalam JavaScript. Contoh program berikut mengambil contoh terakhir dalam tutorial
percabangan ELSE IF sebelumnya, yakni kita memeriksa nilai dari variabel angka dan
menampilkan hasilnya dalam bentuk huruf. Jika menggunakan struktur SWITCH, berikut
adalah cara penulisannya:

<script>
var angka=5;

switch (angka)
{
case 1:
document.getElementById(‘txtKomentar’).value=("Angka Satu");
break;
case 2:
document.getElementById(‘txtKomentar’).value=("Angka Dua");
break;
case 3:
document.getElementById(‘txtKomentar’).value=("Angka Tiga");
break;
case 4:
document.getElementById(‘txtKomentar’).value=("Angka Empat");
break;
default:
document.getElementById(‘txtKomentar’).value=("Bukan angka 1 - 4");
break;
}
</script>

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

Setelah mendeklarasikan variabel a dan mengisi nilainya dengan angka 5, kemudian kita
masuk ke struktur SWITCH.

Blok SWITCH diawali dan diakhiri dengan kurung kurawal. Dan kemudian untuk setiap
kemungkinan yang terjadi dari variabel angka, ditampung dengan perintah case.

Perintah case diikuti dengan kondisi yang ingin di-’tampung’. Di dalam contoh diatas, saya
menampung isi variabel angka dengan case 1 untuk menangani kondisi jika angka==1,
case 2 untuk menangani kondisi jika angka==2, dan seterusnya. Setiap case lalu diikuti
dengan tanda titik dua (:).

Pada kondisi terakhir, terdapat perintah default yang tujuannya adalah untuk menampung
kondisi jika seluruh kondisi case tidak tersedia. Contohnya, jika variabel angka berisi angka
0, maka kondisi case yang ada tidak tersedia untuk menangani hal ini, dan perintah default
lah yang akan dijalankan.

Jika anda perhatikan dalam setiap case, saya menambahkan perintah break. Perintah
break disini bertujuan untuk mengistruksikan kepada JavaScript untuk segera keluar dari
SWITCH jika salah satu case ditemukan. Jika kita tidak mencantumkan perintah break,
maka seluruh perintah mulai dari case yang sesuai sampai ke bawah akan dijalankan.
Berikut contohnya:

<script>
var angka=3;
var hasil=””;
switch (angka)
{
case 1:
hasil=hasil+("Angka Satu \n");
case 2:
hasil=hasil+ ("Angka Dua \n ");
case 3:
hasil=hasil+ ("Angka Tiga \n ");
case 4:
hasil=hasil+ ("Angka Empat \n ");
default:
hasil=hasil+ ("Bukan angka 1 - 4");
}
document.getElementById('txtKomentar').value=hasil;
</script>

Jika anda menjalankan kode JavaScript tersebut, maka yang akan dihasilkan adalah:

Angka Tiga
Angka Empat
Bukan angka 1 – 4

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

Hal ini terjadi karena jika tanpa perintah break, struktur SWITCH akan mengeksekusi
seluruh kode program dimulai dari posisi case yang dicapai.

Sepintas kebutuhan atas perintah break ini membuat kondisi SWITCH menjadi sedikit ribet,
namun karena hal tersebut, kita bisa membuat perintah break seperti berikut ini:

<script>
var angka=9;

switch (angka)
{
case 1,2,3,4,5:
document.getElementById(‘txtKomentar’).value=("Angka berada antara 1-
5");
break;
case 6,7,8,9:
case 10:
document.getElementById(‘txtKomentar’).value=("Angka berada antara
6-10");
break;
default:
document.getElementById(‘txtKomentar’).value=("Bukan angka 1 - 10");
break;
}
</script>

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

Daftar Pustaka

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Perulangan, Break, dan Continue

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

11
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
Pembahasan
Cara Penulisan Struktur Perulangan WHILE

Cara penulisan perulangan WHILE mirip dengan stuktur logika IF, yakni kondisi
perulangan akan diperiksa di awal. Jika kondisi bernilai TRUE, maka perulangan akan terus
dilakukan sampai dengan nilai kondisi bernilai FALSE.

Berikut adalah penulisan dasar perulangan WHILE:

while (kondisi)
{
//kode program
counter
}

Kondisi akan selalu diperiksa pada setiap perulangan, dan kita bisa ‘mengendalikan’
kondisi ini pada bagian counter di dalam perulangan.

Contoh Kasus (masih menggunakan form yang sama):

Bandingkan dengan script di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Cara Penulisan Struktur Perulangan DO WHILE

Struktur perulangan DO WHILE sebenarnya adalah bentuk lain dari perulangan WHILE.
Perbedaan keduanya terletak pada posisi pengecekan kondisi. Apabila dalam perulangan
WHILE kondisi di cek pada awal perulangan, pada perulangan DO WHILE, kondisi
perulangan di cek pada akhir perulangan.

Contoh kasus:

Babndingkan dengan di bawah ini

Cara Penulisan Struktur Perulangan FOR

Struktur perulangan di dalam bahasa pemograman di gunakan untuk mengulang perintah


program. Terdapat beberapa struktur perulangan yang didukung oleh JavaScript, dan
struktur perulangan pertama yang akan kita bahas adalah struktur perulangan FOR.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Jika anda telah mempelajari bahasa pemograman lain sebelumnya, perulangan for ini akan
terasa familiar. Bagi yang baru mempelajari JavaScript, jangan khawatir, kita akan
mempelajarinya melalui contoh-contoh program sederhana.

Contoh kasus:

Bandingkan dengan di bawah ini

Perintah Break dan Continue JavaScript

Fungsi Perintah Break

Agar lebih mudah dipahami, berikut adalah contoh cara penulisan perintah break dalam
perulangan FOR:

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Dalam contoh diatas, kondisi if (i==6) break akan menyebabkan perulangan FOR hanya
berjalan sampai perulangan ke-7, setelah itu perulangan akan berhenti secara ‘prematur’.

Fungsi Perintah Continue

Jika perintah break jika digunakan untuk ‘menghentikan paksa’ proses perulangan yang
berlangsung, perintah continue hanya akan menghentikan perulangan yang saat ini terjadi
(1 iterasi saja), dan kemudian melanjutkan perulangan iterasi berikutnya, atau bisa disebut
juga untuk ‘melewati’ 1 perulangan.

Sama seperti perintah break ,continue biasanya digunakan setelah kondisi IF yang
digunakan untuk menyeleksi ‘kapan’ perulangan harus di-skip atau dilewati.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Dari contoh di atas, perintah if (i==6) akan meyeleksi perulangan. Pada saat variabel
counter i sama dengan 6, maka continue. Perintah continue menyebabkan fungsi
console.log yang berada dibawahnya untuk di-’lewati’ dan perulangan akan lanjut ke i=7.
Dari hasil program dapat dilihat bahwa “Perulangan ke- 6” tidak akan ditampilkan.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Daftar Pustaka

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Fungsi dan Validasi

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

12
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
Pembahasan
Mendefinisikan Fungsi dan Variabel

Fungsi pada JavaScrip merupakan serangkaian kode yang dirancang untuk melaksanakan
suatu tugas tertentu. Seperti halnya prosedur atau subrutin yang dikenal pada program lain,
misalnya Visual Basic, Fungsi pada JavaScript memiliki peranan yang sama dimana ia tidak
akan dieksekusi secara langsung sampai dilakukan pemanggilan terhadap fungsi tersebut.
Proses pemanggilan dapat juga dilakukan melalui suatu tombol saat diklik atau dibuat agar
secara otomatis memanggil dirinya sendiri. Sebagian pengertian ini juga telah dibahas pada
bagian awal.

Alasan kenapa mengunakan Fungsi JavaScript adalah bahwa Fungsi pada JavaScript dapat
digunakan berkali-kali dengan argumen yang berbeda-beda untuk menghasilkan output
yang berbeda, walaupun tetap melalui proses yang sama.

Pendefinisian Fungsi

Fungsi JavaScript didefinisikan melalui 'keyword function' yang diikuti kurung buka dan
kurung tutup, (), lalu diikuti dengan blok kurung kurawal,{}. Kumpulan kode-kode di dalam
Fungsi JavaScript, yang akan dieksekusi untuk melaksanakan suatu tugas tertentu, berada
di dalam kurung kurawal ini.

Sintaks Fungsi JavaScript

Contoh dalam program:

Pada form sebelumnya

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Lalu tambahkan script java di bawah ini

Lihat kasus berikut ini jika kita menggunakan angka untuk dijumlahkan

Tambahkan script

Membuat Validasi

Berdasarkan formulir yang telah dibuat sebelumnya, kita akan melakukan validasi atas isian
yang dimasukkan. Validasi ini digunakan untuk menentukan apakah isian yang dilakukan
sesuai dengan yang diharapkan analis sistem.

Tambahkan script di bawah ini diantara tag <script></script>

Contoh pemanggilan function dengan menggunakan type button, seperti script di bawah ini

Memanggil function clickSaya seperi script di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Contoh pertama:

Dari script di atas, program menginginkan jika isian Nama dan Alamat tidak diisi (script
terlihat pada baris 94 – 102), maka akan muncul pesan peringatan dan akan tampil seperti
gambar di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Untuk melakukan eksekusi berikutnya jika isian nama dan form terisi, maka tambahkan
script berikut ini di bawah if (warning) { alert(warning); exit(); }

Fungsi setTimeout pada script di atas untuk memberikan waktu delay selama 1.1 detik.
Setelah melakukan delay maka eksekusi selanjutnya akan kembali pada formulir.php
dengan melakukan refresh browser.

Selanjutnya buatlah terlebih dahulu database dengan nama UAS dan tabel dengan nama
bukutamu dengan field seperti di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Dari script di atas menjelaskan bahwa script tersebut akan diarahkan pada file Formulir-
Save.php. pengambilan data pada contoh ini menggunakan fungsi $_GET

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Contoh kedua:

Script tersebut di atas langsung menuju pada form formulir-action.php sesuai arahan pada
script di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Lalu tambahkan script di bawah ini pada file formulir-action.php

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Untuk menampilkan data pada tabel tambahkan script di bawah ini

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Daftar Pustaka

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Array

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

13
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
Pembahasan
Pengertian Array di dalam JavaScript

Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam
array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan
istilah index.

Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di
index 0, elemen kedua berada di index 1, dst. Index maksimum yang bisa ditampung array
dalam JavaScript adalah 4.294.967.294 (2^23 – 2), dengan jumlah elemen maksimum
adalah 4.294.967.295.

Array di dalam JavaScript tidak bertipe (untyped array). Elemen dari array bisa bertipe data
string, number dan boolean dalam sebuah array yang sama, bahkan elemen dari array
bisa berupa objek atau array yang lain.

Array di dalam JavaScript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa
ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang
setiap saat.

Index array di dalam JavaScript juga tidak harus berurutan, JavaScript membolehkan
elemen dari array ‘tidak terurut’. Kita bisa mengisi hanya index 0, 5, dan 10 saja di dalam
array.

Cara Penulisan Array di dalam JavaScript

Terdapat 2 cara penulisan tipe data array di dalam JavaScript, yaitu dengan penulisan
menggunakan kurung siku [ dan ], dan menggunakan keyword new Array(). Perintah new
ini akan membuat ‘objek’ array. Berikut adalah contoh pembuatan array di dalam
JavaScript:

<script>
var arr1 = [] // array kosong, 0 elemen
var arr2 = [1,2,3,4,5] // array dengan 5 elemen
var arr3 = [3,4.1,"belajar","JavaScript"] // array dengan 4 elemen

//buat object objek1


var arr4 = new Array(); // array kosong, 0 elemen
var arr5 = new Array(1,2,3,4,5) // array dengan 5 elemen
var arr6 = new Array(3,4.1,"belajar","JavaScript") // array 4 elemen

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
// tampilkan array
console.log(arr1.toString());
console.log(arr2.toString());
console.log(arr3.toString());
console.log(arr4.toString());
console.log(arr5.toString());
console.log(arr6.toString());
</script>

Dalam contoh diatas, saya mendefenisikan array dengan menggunakan kurung siku, dan
menggunakan keyword new Array(). Setelah menginput beberapa data ke dalam Array,
saya kemudian menampilkan isi array dengan perintah console.log. toString adalah
method array yang digunakan untuk menkonversi Array menjadi String (tentang fungsi dan
method yang berkaitan dengan array akan kita bahas dalam tutorial berikutnya).

Nilai elemen dari array juga tidak harus bersifat tetap. Kita bisa membuat nilai array
bersasal dari variabel lain. Berikut contohnya:

<script>
var a=12
var arr1 = [a,a+1,a/2,a-3,3+5]

console.log(arr1.toString()); // hasil: 12,13,6,9,8


</script>

Jika sebuah elemen ‘dilompati’ pada saat penulisan array, maka nilai elemen tersebut
adalah undefined, yang berarti ‘tidak ada’ data.

Berikut contohnya:

<script>
var arr1 = [1,2,,,,6]

console.log(arr1.toString());
console.log(arr1[0]); // elemen ke-1 array
console.log(arr1[1]); // elemen ke-2 array
console.log(arr1[2]); // elemen ke-3 array
</script>

Jika menggunakan cara pendefenisian array dengan perintah new Array(), apabila hanya
diberikan 1 argumen angka, maka perintah tersebut berarti menyuruh JavaScript untuk
mempersiapkan jumlah elemen array sebanyak nilai tesebut, namun array itu sendiri belum
memiliki index dan elemen apa-apa, seperti contoh berikut ini:

<script>
var arr1 = new Array(10);

console.log(arr1.toString());
console.log(arr1.length);

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
console.log(arr1[0]); // elemen ke-1 array
console.log(arr1[1]); // elemen ke-2 array
</script>

Terlihat dari pemanggilan method toString dan length bahwa array tersebut berisi 10
elemen, namun pada saat dilakukan pemanggilan, hasilnya adalah undefined.

Cara Membaca Data dan Menambah Data ke dalam Array

Untuk membaca data array, kita menggunakan format:

nama_array[index]

sedangkan untuk menambah data kedalam array, formatnya adalah:

nama_array[index] = data_baru

Jika pada saat menambahkan data kedalam array yang sudah berisi data pada index
tersebut, maka data yang lama akan ditimpa oleh data yang baru.

Berikut adalah contoh pembacaan data dan penambahan data array JavaScript:

<script>
var arr1 = [1,2,3];
var a = arr1[2];
console.log(arr1.toString()); // hasil: 1,2,3
console.log(a); // hasil: 3

arr1[3]=4;
arr1[4]=5;
console.log(arr1.toString()); // hasil: 1,2,3,4,5

arr1[5]=arr1[4]+1; // arr[5] = 6
arr1[5+1]=(arr1[1+2]*2)-1; // arr[6] = 7
console.log(arr1.toString()); // hasil: 1,2,3,4,5,6,7
</script>

Perhatikan bahwa kita bisa mengakses index array dengan rumus matematis selama
menghasilkan nilai angka.

Cara Mengetahui Jumlah elemen Array: Property Length

Walaupun kita akan membahas tentang fungsi atau method array pada tutorial selanjutnya,
namun property array length akan saya bahas disini. Sesuai dengan namanya, property
length dari Array digunakan untuk mengetahui ‘panjang’ elemen dari sebuah array.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
*Hasil dari property array length adalah berapa banyak elemen di dalam array tersebut,
bukan index tertinggi. Karena index dimulai dari 0, maka nilai length akan selalu lebih besar
daripada nilai index tertinggi. Untuk array dengan index yang terurut dari 0, maka index
tertinggi adalah nilai length-1.

Berikut adalah contoh penggunaan property length dalam JavaScript:

<script>
var arr1 = ["a","b","c","d","e"];
console.log(arr1.toString()); // hasil: a,b,c,d,e
console.log(arr1.length); // hasil: 5

arr1[5]="f";
arr1[6]="g";
console.log(arr1.toString()); // hasil: a,b,c,d,e,f,g
console.log(arr1.length); // hasil: 7

arr1[arr1.length]="h";
arr1[arr1.length]="i";
arr1[arr1.length]="j";
console.log(arr1.toString()); // hasil: a,b,c,d,e,f,g,h,i,j
console.log(arr1.length); // hasil: 10
</script>

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Daftar Pustaka

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Objek Buatan

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

14
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
Pembahasan
OBJECT

Konsep object

Selain dapat membuat objek sendiri, JavaScript menyediakan banyak objek yang dapat
digunakan. Pada dasarnya tedapat tiga macam objek :

1. Objek bawaan
Objek yang tidak berhubungand dengan browser maupun halaman HTML.

2. Objek Browser
Objek yang berhubungan dengan browser pengguna

3. Objek HTML
Objek yang berhubungan dengan dokumen HTML yang dimuat di browser.

Untuk membuat objek, hal-hal yang harus diperhatikan adalah mendefinisikan fungsi yang
akan menjadi metode bagi objek dan membuat konstruktor objek. Konstruktor adalah fungsi
yang berisi definisi properti dan menghubungkan metode-metode objek dengan definisi
fungsi.

Bentuk umum konstruktor adalah sebagai berikut :

      Function namaObjek (arg1, ...., arg2) { 

          // properti objek 

          this.nama_properti = arg2; 

          //Metode Objek 

          this.namaMetode = namaFungsi; 

      } 

Untuk membuat objek buatan, bentuk umumnya adalah : 

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 

namaVariabel=new konstruktorObjek(daftarParameter); 

Latihan 1

<HTML>  

 <HEAD>  

 <TITLE>Membuat Objek</TITLE>  

 </HEAD>  

 <BODY>  

 <SCRIPT LANGUAGE = "JavaScript">  

     function perolehWarna () {  

         return(this.warna);  

     }  

     function ubahWarna (warna) {  

         this.warna = warna;  

     }  

   function tampilkanInfoMobil() {  

       document.write("Tipe : " +  this.tipe + "<BR>");  

       document.write("Merk : " +  this.merk + "<BR>");  

       document.write("cc    : " + this.cc + "<BR>");  

       document.write("Warna: " +  this.warna + "<BR>");  

   }  

   function Mobil(tipe, merk, cc, warna) {  

       // Properti  

       this.tipe  = tipe;  

       this.merk  = merk;  

       this.cc    = cc;  

       this.warna = warna;  

       // Metode  

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
       this.perolehWarna = perolehWarna;  

       this.ubahWarna = ubahWarna;  

       this.tampilkanInfoMobil = tampilkanInfoMobil;  

   }  

   // Membuat objek berdasarkan Mobil  

   var mobilku = new Mobil("Sidekick", "Suzuki", 1600, "Merah");  

   mobilku.tampilkanInfoMobil();  

   document.write("<HR>");  

   mobilku.ubahWarna("Merah Metalik");  

   mobilku.tampilkanInfoMobil();  

</SCRIPT>  

</BODY>  

</HTML> 

Simpan file diatas, kemudian jalankan pada web browser anda, maka hasilnya akan seperti

pada gambar dibawah ini :

Latihan 2

<HTML>  

 <HEAD>  

 <TITLE>Menciptakan Objek dengan Notasi Literal</TITLE>  

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 </HEAD>  

 <BODY>  

 <SCRIPT LANGUAGE = "JavaScript">  

  

     // Membuat objek berdasarkan Buku  

     var bukuPascal = {judul: "Pemrograman Pascal",  

           pengarang: "Abdul Kadir"};  

     document.write(bukuPascal.judul + "<BR>");  

     document.write(bukuPascal.pengarang + "<BR>");  

  

 </SCRIPT>  

 </BODY>  

 </HTML> 

Simpan file diatas, kemudian jalankan pada web browser anda, maka tampilannya akan
seperti pada gambar dibawah ini :

Latihan 3

<HTML>  

 <HEAD>  

 <TITLE>Menampilkan Properti Objek</TITLE>  

 </HEAD>  

 <BODY>  

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
 <SCRIPT LANGUAGE = "JavaScript">  

      function Mobil(tipe, merk, cc, warna) {  

          // Properti  

          this.tipe = tipe;  

          this.merk = merk;  

          this.cc     = cc;  

          this.warna = warna;  

      }  

      // Membuat objek berdasarkan Mobil  

      var mobilku = new Mobil("Sidekick", "Suzuki", 1600, "Merah");  

      document.write(mobilku.tipe + "<BR>");  

      document.write(mobilku["tipe"] + "<BR>");  

 </SCRIPT>  

 </BODY>  

 </HTML> 

Simpan file diatas, kemudian jalankan pada web browser anda, maka tampillannya akan
seperti pada gambar dibawah ini :

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Daftar Pustaka

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
MODUL PERKULIAHAN

Pemrograman Web 1  

Objek Bawaan

Fakultas  Program Studi  Tatap Muka  Kode MK  Disusun Oleh 

15
Fakultas Ilmu  Teknik Informatika  MK87039  Tim Dosen 
Komputer   

Abstract  Kompetensi 
Pembahasan
OBJECT BAWAAN JAVASCRIPT

Object Document

Objek ini digunakan untuk mengakses informasi mengenai dokumen HTML, penampilan
output, dan memanipulasinya. Seperti yang telah diuraikan sebelumnya bahwa Java Script
berada dalam dokumen HTML dibungkus dalam tag <SCRIPT>, sehingga Java Script dapat
secara langsung mengakses tag-tag HTML.

Property dari Objek Document

berikut adalah property yang sering digunakan dalam Objek Document :

document.alinkColor=warna

memberikan warna activated link color

document.bgColor=warna

memberikan warna background

document.fgColor=warna

memberikan warna foreground atau warna huruf

document.linkColor=warna

memberikan warna link

document.vlinkColor=warna

memberikan warna visited link color

document.title=judul_window

memberikan judul/title window

document.image[]

mengakses objek image (dapat digunakan nama dari objek anchor/link)

document.forms[]

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
mengakses objek form (dapat digunakan nama dari objek form)

Method dari Objek Document

Method yang sering digunakan dalam Objek Document adalah sebagai berikut :

document.open()

menciptakan document HTML

document.close()

mengakhiri document HTML

document.write(output)

memberikan output ke browser

document.writeln(output)

memberikan output ke browser dengan menyertakan perpindahan baris

khusus untuk output ke browser ada beberapa hal yang perlu diperhatikan, yaitu :

 anda dapat memberikan string diantara tanda ( dan ) pada objek write atau writeln.
Contoh : document.write(“Batman Jogja”);

 dalam objek write atau writeln, dapat juga digunakan untuk menampilkan isi variabel.
Contoh :

P = 5;

L = 10;

Luas = P*L;

document.write(Luas);

 terdapat karakter spesial yang dapat digunakan dalam objek write atau writeln, yaitu :
\b untuk backspace

\f untuk form feed

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
\n untuk baris baru

\r untuk carriage return

\t untuk tab

Object Window

Window merupakan objek tertinggi dalam objek JavaScript. Objek ini digunakan untuk
memanipulasi tampilan kendela dari document HTML.

Property dari objek window

berikut adalah property yang sering digunakan dalam Objek Window :

window.length

mengetahui jumlah frame dalam window

window.location.href=alamat_url

mengakses objek location untuk melakukan redirect atau berpindah ke alamat tertentu

window.status=nilai_status

memberikan niai status window

Method dari Objek Window

method yang sering digunakan dalam Objek Window adalah sebagai berikut :

window.alert(pesan)

memunculkan messagw box atau sebuah pesan peringatan

window.confirm(pesan)

memunculkan sebuah pesan konfirmasi. Method ini memiliki dua nilai kembalian yaitu true
untuk Ok dan False untuk Cancel

window.prompt(pesan,nilaidefault)

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
memunculkan sebuah pesan yang menantikan sebuah input

window.close()

menutup jendela aktif

window.open(url | file, windowname, windowfeatures)

membuka jendela baru dengan feature yang diberikan.

window.print()

membuka jendela dialog print

Object History

secara default akan menyimpan daftar-daftar URL yang pernah dikunjungi. Dalam javascript
terdapat sebuah objek untuk mengakses daftar tersebut yaitu objek history.

Property dari objek history

Berikut adalah property yang sering digunakan dalam Objek History :

history.length

mengetahui banyaknya daftar URL yang pernah dikunjungi

Method dari Objek History

Berikut adalah method yang sering digunakan dalam objek History :

history.back()

menampilkan URL sebelum dari daftar

history.forward()

menampilkan URL sesudahnya dari daftar

history.go(n)

menampilkan history ke-n dari daftar

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

 
Daftar Pustaka

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.

2015 Pemrograman Web 1 Pusat Bahan Ajar dan eLearning


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

Anda mungkin juga menyukai