modul perkuliahan pemrograman web -...
TRANSCRIPT
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Tag Dasar HTML & Struktur Dasar HTML
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 01 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari tag dasar html, struktur dasar html dan membuat judul dengan (title), menyusun heading dan sub heading serta menentukan posisi heading.
Mahasiswa mampu membuat dokumen html sederhana menggunakan text editor dan menampilkannya lewat browser
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Pengenalan Web Apakah web :
Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai komputer yang
terhubung ke internet, yang dapat memudahkan pengguna komputer untuk berinteraksi dengan
pengguna internet lainnya dan mencari informasi yang diperlukan.
Web browser :
Browser web merupakan software yang digunakan untuk menampilkan informasi dari server web.
Contoh dari web browser : Opera, Mozzila, Netscape Navigator, Internet Explorer, Lynx, Konqueror.
Server web :
Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini
akan melayani permintaan dokumen web dari kliennya.
Contoh dari web server : IIS, PWS, Apache, Xitami.
B. Pemrograman web (HTML) Dalam pemrograman web, diperlukan suatu file teks yang bernama atau berekstensi HTML (Hypertext
Markup Language).
Ada dua cara untuk membuat sebuah web page:
1. dengan menggunakan editor teks biasa (notepad, editplus)
2. dengan HTML Editor.
Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table, paragraf dan list.
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Untuk menandai berbgai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag HTML terdiri
atas sebuah kurung sudut kiri (<, lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda
lebih besar). Tag umumnya berpasangan, misalkan tag awal <H1> berpasangan dengan tag akhir </H1>.
C. Struktur Dokumen HTML Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>, <head>,
dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head
berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun
dari link, grafis, paragraf dan elemen lainnya.
Berikut ini adalah pola dasar sebuah dokumen HTML :
<html>
<head>
…. Informasi tentang dokumen HTML.
</head>
<body>
…. Informasi tentang yang akan ditampilkan dalam browser web.
</body>
</html>
D. Atribut dalam Tag
Beberapa tag mengandung atribut di dalamnya. Contoh : <P ALIGN=”CENTER”> Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut. Pada umumnya, atribut melibatkan nilai. Pada contoh di atas, “CENTER” adalah nilai untuk atribut ALIGN.
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
E. Komentar Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentar dalam kode
HTML adalah sebagai keterangan. Sebuah komentar diawali dengan <!-- dan diakrhiri dengan -->.
Contoh :
<!— File komentar.htm Dibuat pada tanggal 4 Agustus 2002 -->
<HTML> <HEAD> <TITLE>Komentar</TITLE> </HEAD> <BODY> <!-- Ini juga komentar --> Selamat Belajar HTML </BODY> </HTML>
F. Tag <BR> Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris.
Contoh :
<HTML> <HEAD> <TITLE>Tag BR</TITLE> </HEAD> <BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY> </HTML>
G. Tag <P> Tag <P> digunakan untuk membuat paragraph.
Contoh :
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<HTML> <HEAD> <TITLE>Contoh Paragraf</TITLE> </HEAD> <BODY> Pesona Tanaman Hias<P> Keindahan tanaman hias<BR> membawa suatu pesona tersendiri<BR> Warna-warni bunga<BR> aneka rupa corak daun<BR> membuat orang dengan senang hati mengoleksinya </BODY> </HTML>
H. Tag Judul HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang
dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa : ƒ <H1> ... </H1> ƒ <H2> ... </H2> ƒ <H3> ... </H3> ƒ <H4> ... </H4> ƒ <H5> ... </H5> ƒ <H6> ... </H6> Contoh : <HTML> <HEAD> <TITLE>Tag H1-H6</TITLE> </HEAD> <BODY> <H1>Tag H1</H1> <H2>Tag H2</H2> <H3>Tag H3</H3> <H4>Tag H4</H4> <H5>Tag H5</H5> <H6>Tag H6</H6> </BODY> </HTML>
Seperti halnya pada tag <P>, tag judul atau heading ini juga memiliki atribut ALIGN. Nilai yang dapat diberikan pada ALIGN adalah : LEFT (default), mengatur teks rata kiri terhadap halaman RIGHT, mengatur teks rata kanan terhadap halaman CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat
panjang.
I. Tag <HR>
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis
horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag <HR>.
Contoh :
<HTML> <HEAD> <TITLE>Tag HR</TITLE> </HEAD> <BODY>
<H2>Aneka Tanaman Hias</H2> <HR> Aglaonema atau Sri rejeki <HR> Begonia <HR> Bromelia <HR> dll <HR> </BODY> </HTML>
Daftar atribut tag <HR>
Atribut Keterangan SIZE Menentukan ketebalan garis WIDTH Menentukan lebar garis ALIGN Menentukan peletakkan teks dalam baris NOSHADE Mengatur agar garis tidak disertai bayangan
J.Tag <CENTER> Untuk menengahkan suatu teks, bisa juga digunakan tag <CENTER>. Tentu saja, untuk
mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu disertakan </CENTER>. Contoh :
<HTML> <HEAD> <TITLE>Tag CENTER</TITLE> </HEAD> <BODY> <CENTER> <H2>Berbagai Jenis Keladi yang mempesona:</H2> Red Flash <BR> Red Fire <BR> Fannie Munson <BR> Pink Beauty <BR> Hilo Beauty <BR> Jackie Suthers <BR> </CENTER>
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
***** </BODY> </HTML>
K. Tag DIV Tag divisi (<DIV>) berguna untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama.
Contoh :
<HTML> <HEAD> <TITLE>Tag DIV</TITLE> </HEAD> <BODY> <DIV ALIGN = "RIGHT"> <H1><U>PRIMASOFT KREASINDO</U></H1> <H2>Jl. Kalasan KM 14</H2> <H2>Yogyakarta</H2> </DIV> <HR> </BODY> </HTML>
L. Praktikum 1 Bukalah notepad atau program text editor yang lain.
Ketikkan script berikut :
<HTML>
<HEAD>
<TITLE> World Wide Web</TITLE>
<BODY>
<CENTER><H1>Definisi World Wide Web</H1></CENTER>
<P ALIGN=”LEFT”>
WWW adalah layanan yang paling sering digunakan dan memiliki
perkembangan yang sangat cepat karena dengan layanan ini kita bisa
menerima informasi dalam berbagai format (multimedia). Untuk mengakses
layanan WWW dari sebuah komputer (yang disebut WWW server atau web
server) digunakan program web client yang disebut web browser atau
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
browser saja. Jenis-jenis browser yang sering digunakan adalah:
Netscape Navigator/Comunicator, Internet Explorer, NCSA Mosaic,
Arena, Lynx, dan lain-lain.
<P ALIGN=”RIGHT”>
Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia
maya atau web. Tampilan web yang sangat artistik yang tidak hanya
menampilkan teks tapi juga gambar-gambar yang di tata sedemikian rupa
sehingga selalu membuat betah netter untuk surfing berjam-jam. Karena
itu para netter harus sangat memperhitungkan rencana web mana saja
yang akan dikunjungi atau batasi informasi yang ingin diakses, karena
bila tidak netter akan tersesat kedalam rimba informasi yang maha
luas.
</BODY>
</HTML>
Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type, pilihlan All Files(*.*).
Buka web browser anda (internet explorer)
Bukalah dokumen yang anda buat tadi. (File|Open)
Klik browse: arahkan ke file Contoh1.html, klik OK
Lihatlah hasilnya :
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
M. Praktikum 2
Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan pemformatan
tampilan teks.
Buka kembali file web.html pada program teks editor anda (notepad).
Ubah perintah berikut <BODY BGCOLOR=”PINK”>
Ubah paragraf pertama menjadi seperti dibawah ini :
<P ALIGN=”LEFT”>
<B>WWW</B> adalah layanan yang paling sering digunakan dan memiliki
perkembangan yang sangat cepat karena dengan layanan ini kita bisa
menerima informasi dalam berbagai format (multimedia). Untuk
mengakses layanan WWW dari sebuah komputer (yang disebut <U>WWW
server atau web server </U>) digunakan program web client yang
disebut web browser atau browser saja. Jenis-jenis browser yang
2015 10 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
sering digunakan adalah: <I>Netscape Navigator/Comunicator,
Internet Explorer, NCSA Mosaic, Arena, Lynx, dan lain-lain.</I>
Simpan hasil editing anda (File|Save)
Lihat hasil perubahan pada web browser anda.
N. Praktikum 3 Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
Simpan dengan nama Lulusan_kompetitif.html.
Lulusan S-1 yang Kompetitif
Sebuah perenungan untuk anda para mahasiswa
SEKITAR 15-20 tahun yang lalu, lulusan Strata 1 (S-1) dapat dipastikan bisa memperoleh pekerjaan
yang enak dengan cepat. Enak di sini maksudnya mendapatkan jabatan dan gaji yang baik. Namun,
sekarang keadaan berubah. Tidak sedikit lulusan sarjana yang menganggur karena tidak mendapat
pekerjaan dan tidak bisa membuka usaha sendiri. Untuk menutupi kenyataan menganggur, beberapa
penganggur mencoba melucu dengan mengatakan bekerja di perumtel, kependekan dari penunggu
rumah dan telenovela. Menganggurnya lulusan S-1 tidak saja akibat kondisi di luar, tetapi juga akibat
kondisi dari dalam diri lulusan S-1 itu. Banyak mahasiswa yang tidak menyiapkan diri dan mentalnya
selama kuliah sehingga ketika lulus tidak tahu ke arah mana harus melangkah.
Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah dan bidang studi
yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak sekolahan? Lalu, ke mana setelah itu?
Apakah di benak mereka terpikirkan 3 K: Kuliah, kerja, kawin? Lulus kuliah, mencari pekerjaan,
kemudian menikah, dan seterusnya?
Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri tanpa melihat dunia di luarnya
seperti adanya pasar global yang dinamis dan menuntut daya saing sangat kompetitif? Siapkan mereka
menyambut pasar bebas ASEAN (AFTA) tahun 2003? Pedulikah mereka pada pengakuan kualitas
2015 11 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
kelulusan mereka oleh negara lain yang sangat penting untuk persaingan global dan pasar bebas?
Pedulikah mereka pada posisi sumber daya manusia (SDM) Indonesia di antara SDM bangsa lain?
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002.
Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Pembuatan Paragraf, Format Karakter & Membuat Daftar Di HTML
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 02 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari pembuatan paragraf, atribut pada paragraf , membuat karakter spesial dan membuat daftar di html.
Mahasiswa mampu membuat paragraf, memformat karakter dan membuat daftar di html
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Mengatur Teks Secara Fisik Daftar tag untuk mengatur teks secara fisik
Pemakaian Tag Keterangan <B>Teks</B> Teks ditampilkan dalam keadaan ditebalkan <BIG>Teks</BIG> Teks ditampilkan dengan ukuran lebih besar dari ukuran normal <I>Teks</I> Teks ditampilkan dalam keadaan miring <SMALL>Teks</SMALL> Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal <SUB>Teks</SUB> Teks ditampilkan sebagai subskrip <SUP>Teks</SUP> Teks ditampilkan sebagai superskrip <TT>Teks</TT> Teks ditampilkan dalam bentuk seperti ketikan mesin tik <U>Teks</U> Teks ditampilkan dengan diberi garis bawah
B. Mengatur Teks Secara Logis Daftar tag untuk mengatur teks secara logis
Pemakaian Tag Keterangan <CITE>Teks</CITE> Menyatakan teks adalah kutipan <CODE>Teks</CODE> Menyatakan bahwa teks adalah kode atau program komputer.
Umumnya teks ditampilkan dengan font monoskrip. <EM>Teks</EM> Menyatakan penekanan pada teks. Umumnya teks ditampilkan
miring. <KBD>Teks</KBD> Menyatakan teks adalah masukan dari keyboard. Teks seperti ini
umumnya ditampilkan dengan font monospasi. <SAMP>Teks</SAMP> Menyatakan bahwa teks adalah suatu konstanta sederetan
karakter. Biasanya ditampilkan dengan font monospasi. <STRONG>Teks</STRONG> Menyatakan bahwa teks yang sangat penting untuk diperhatikan
orang. Biasanya disajikan dengan ditebalkan. <VAR>Teks</VAR> Menyatakan teks adalah variabel atau ekspresi matematika atau
program komputer. Teks akan disajikan dalam bentuk miring.
C. Mengatur Font Tag <FONT>…</FONT> berguna untuk mengatur jenis, ukuran, maupun warna font.
D. Ukuran Font Untuk font ditentukan oleh atribut SIZE.
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
E. Warna Font
Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna . Jika warna latar belakang yang akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa BGCOLOR. Tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen.
Daftar nama warna pada atribut penentu warna
Nama Warna RGB Nama Warna RGB aqua 00FFFF navy 000080 black 000000 olive 808000 blue 0000FF purple 800080 fuchsia FF00FF red FF0000 gray 808080 silver C0C0C0 green 008000 teal 008080 lime 00FF00 yellow FFFF00 maroon 800000 white FFFFFF
F. Praktikum 1 Ketikkan script berikut menggunakan teks editor.
Simpan dengan nama Internet.html
<html>
<head><title> Interconnected Network</title>
</head>
<body bgcolor=”pink”>
<center>
<font face=”arial” size=6 color=red> Interconnected Network
alias Internet</font>
</center>
<hr>
<font face=”helvetica” size=4 color=red>
<p align=”left”>
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<I>Interconnected Network</I> - atau yang lebih populer dengan
sebutan Internet - adalah sebuah sistem komunikasi global yang
menghubungkan komputer-komputer dan jaringan-jaringan komputer
di seluruh dunia. Setiap komputer dan jaringan terhubung - secara
langsung maupun tidak langsung - ke beberapa jalur utama yang
disebut <I> internet backbone </I> dan dibedakan satu dengan
yang lainnya menggunakan <I>unique name</I> yang biasa disebut
dengan alamat IP 32 bit. Contoh: 202.155.4.230 . Komputer dan
jaringan dengan berbagai platform yang mempunyai perbedaan dan
ciri khas masing-masing (Unix, Linux, Windows, Mac, dll)
bertukar informasi dengan sebuah protokol standar yang dikenal
dengan nama TCP/IP (<I>Transmission Control Protocol/Internet
Protocol</I>). TCP/IP tersusun atas 4 layer (network access,
internet, host-to-host transport, dan application) yang masing-
masing memiliki protokolnya sendiri-sendiri.
</font></p>
<font face=”garamond” size=4 color=blue>
<p align=”right”>
Bila anda mempunyai Komputer minimal prosessor 486, Windows
95, Modem, dan line telepon, maka anda telah bisa bergabung
dengan ribuan juta komputer lain dari seluruh dunia dan
mengakses harta karun informasi di internet.
</font>
</p>
<hr>
<center>
<font face=”century” size=3 color=brown>© STMIK EL RAHMA
<br><b>Yogyakarta</b></font>
</center>
</body>
</html>
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
G. Praktikum 2 Ketikkan script berikut menggunakan teks editor.
<HTML>
<HEAD>
<TITLE> karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright © <br>
Trademark ™ <br>
Registered ® <br>
Poundsterling £ <br>
Yen ¥ <br>
Euro €<br>
</BODY>
</HTML>
Simpan dengan nama karakter_khusus.html
Lihat hasilnya dengan browser.
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
H. Praktikum 3 Ketikkan script berikut menggunakan teks editor.
<HTML>
<HEAD>
<TITLE> Formatting Font </TITLE>
</HEAD>
<BODY>
<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<BR>
<S>strikethrough</s>
<BR>
CO<sup>2</sup>
<BR>
H<sub>2</sub>O
</BODY>
</HTML>
Simpan dengan nama font.html
Lihat hasilnya dengan browser.
I. LIST List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu.
Jenis-jenis list dalam HMTL :
List dengan nomor (OL : Ordered List)
Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3.., dst sampai
sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type yang lain (romawi, abjad
huruf besar/kecil), maka kita tinggal mengisi atribut type pada tag <ol>
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh untuk list dengan angka romawi : <ol type=”I”>
List tanpa nomor (UL: Unordered List)
Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag <ul>
Contoh <ul type=”box”> : bila ingin bullet berbentuk kotak.
List definisi
J. Praktikum 1: Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> Ordered List & Unordered List</TITLE>
</HEAD>
<BODY>
<h4>An ordered List : </h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An unordered List : </h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</BODY>
</HTML>
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Simpan dengan nama list.html
Jalankan dengan web browser
K. Praktikum 2: Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> definition list </TITLE>
</HEAD>
<BODY>
<DL>
<DT>Coffee</DT>
<DD>Black hot drink</DD>
<DT>Ice Cream</DT>
<DD>sweet Cold drink</DD>
</DL>
</BODY>
</HTML>
Simpan dengan nama definition.html
Jalankan dengan web browser
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002.
Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Pembuatan Dokumen Yang Berisikan Gambar Serta Link
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 03 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari pembuatan format gambar gif dan jpeg, pertimbangan dalam penggunaan gambar serta menampilkan gambar dalam web.
Mahasiswa mampu membuat dokumen html yang berisikan gambar dan membuat link.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Mengatur Gambar Latar Belakang
Terkadang kita jumpai halaman Web dengan latar belakang berupa suatu gambar. Latar belakang seperti itu kadangkala mempercantik tampilan halaman Web. Untuk menyertakan suatu gambar sebagai latar belakang, dapat digunakan atribut BACKGROUND pada tag <IMG>. Bentuknya sebagai berikut :
<BODY BACKGROUND = ”NamaFileGambar”>
Contoh :
<BODY BACKGROUND = ”Caladium.jpg”>
B. Menampilkan Gambar
Untuk menampilkan gambar, digunakan tag <IMG>. Bentuk paling sederhana dari tag <IMG> :
<IMG SRC = ”nama_gambar”>
Contoh :
<IMG SRC = ”keladi.jpg”>
C. Mengatur Letak Teks Terhadap Gambar Tag <IMG> menyediakan atribut bernama ALIGN yang berfungsi untuk mengatur
penempatan teks terhadap gambar dan untuk mengatur penempatan gambar. Nilai untuk atribut ALIGN :
Nilai Keterangan
TOP Teks diletakkan di bagian atas MIDDLE Teks diletakkan di tengah-tengah BOTTOM Merupakan nilai default. Teks diletakkan di bagian bawah. LEFT Gambar diletakkan di sebelah kiri pada halaman RIGHT Gambar diletakkan di sebelah kanan pada halaman
Contoh :
<IMG SRC = ”RedFlash.gif” ALIGN = ”MIDDLE”> <IMG SRC = ”RedFlash.gif” ALIGN = ”TOP”>
<IMG SRC = ”RedFlash.gif” ALIGN = ”LEFT”> <IMG SRC = ”RedFlash.gif” ALIGN = ”RIGHT”>
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
D. Memberi Bingkai Gambar
Dengan menggunakan atribut BORDER pada tag <IMG>, Anda bisa mengatur agar gambar ditampilkan dengan diberi bingkai. Caranya adalah dengan memberikan bilangan pada atribut BORDER. Nilai pada atribut tersebut menyatakan ketebalan bingkai dalam satuan piksel. Contoh :
<IMG SRC = ”RedFlash.gif” ALIGN = ”RIGHT” BORDER = “1”>
E. Menyediakan Teks Alternatif
Adakalanya pemakai mematikan fitur untuk mematikan penampilan gambar dan ada kemungkinan pula pemakai menggunakan browser yang tidak mendukung gambar. Untuk mengatasi keadaan ini, Anda bisa menyediakan teks alternatif sebagai pengganti gambar. Hal seperti ini dilakukan dengan menggunakan atribut ALT pada tag <IMG>. Contoh :
<IMG SRC = ”RedFlash.gif” ALT = “Gambar Keladi” ALIGN = ”MIDDLE”>
F. Mengatur Ukuran Gambar
Bila Anda memiliki gambar yang berukuran besar dan bermaksud mengubah ukuran gambar saat gambar ditampilkan, Anda bisa mengaturnya melalui atribut pada tag <IMG> yang bernama HEIGHT dan WIDTH. • HEIGHT untuk mengatur tinggi gambar • WIDTH untuk mengatur lebar gambar
Contoh :
<IMG SRC = ”RedFlash.gif” HEIGHT = “150” WIDTH = ”150”>
G. Mengatur Ruang Gambar
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
teks.
Atribut VSPACE dan HSPACE dapat dimanfaatkan untuk mengatur jarak gambar terhadap
• VSPACE akan memberikan ruang kosong sebanyak nilai yang disebutkan (dalam satuan piksel) di atas dan bagian bawah gambar
• HSPACE akan memberikan ruang kosong sebanyak nilai yang disebutkan (dalam satuan piksel) di sebelah kiri dan bagian kanan gambar
Contoh :
<IMG SRC = ”RedFlash.gif” HSAPCE = “25”> <IMG SRC = ”RedFlash.gif” VSAPCE = “25”>
Perintah-perintah yang digunakan dalam penyisipan gambar :
Perintah dibawah ini digunakan untuk menyisipkan gambar kedalam dokumen HTML.
<img src=”nama_ image.ext” width=”ukuran lebar gambar”
height=”ukuran tinggi gambar” align=”posisi/perataan gambar
terhadap teks”>
Bila ingin menggunakan gambar sebagai background/latar belakangdokumen HTML
<body background=”nama_image.ext”>
H. Praktikum 1
Ketikkan script berikut :
<html>
<head>
<title>Wisata Dunia</title>
</head>
<body background="Bgd.gif">
<p align="center"><b><u>Tempat-tempat yang indah didunia
</u></b></p>
<hr>
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<p align="left">Inilah tempat-tempat wisata dunia yang banyak
dikunjungi oleh
wisatawan tiap tahunnya:</p>
<p align="left"><img border="0" src=" lawu.jpg" width="148"
height="103">
<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur
Indonesia</p>
<p align="left"><b>Hawaii</b> : Terletak di Benua Amerika <img
border="0" src=" Hawaii.jpg" width="203" height="134"></p>
</body>
</html>
Simpan dengan nama image_align.html
Lihat hasil melalui browser.
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
I. Praktikum 2
Buatlah dokumen HTMl dengan tampilan sebagai berikut :
J. IMAGE MAP Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan daerah-daerah dalam
suatu gambar (image) yang mempunyai link. Derah yang didefinisikan berupa bentuk daerah dan
koordinat pembatasnya. Bentuk daerah peta dibedakan menjadi :
Point : daerah berupa titik
Rect : daerah berupa kotak/persegi panjang
Poly : daerah berbentuk polygon
Circle : daerah berbentuk lingkaran
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian koordinat (0,0)
dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah pojok kanan bawah gambar
(lebar_maks, tinggi_maks).
Sintaks :
<img src=”nama gambar sebagai map” width=”lebar tampilan
gambar” height=”tinggi tampilan gambar” usemap=”#nama_map”
border=0>
<map name=”nama_map”>
<area shape=”jenis map” coords=”koordinat map” href=”file
yang dipanggil”>
</map>
Coordinat dari object relatif terhadap pojok kirai atas image.
Coordinate Value
Rect Left-x, top-y, right-x, bottom-y
Circle CENTER-X, CENTER-Y, RADIUS
Poly X1, Y1, X2, Y2, … XN, YN
Contoh:
<html>
<head>
<title>Creating Hotspot</title>
</head>
<body>
<img src="Starry.gif" width="400" height="200"
border="0" usemap="#Map">
<map name="Map">
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<area shape="rect"
coords="0,0,200,100"
href="file1.htm"
alt="kotak link">
<area shape="circle"
coords="354,41,36"
href="file2.htm"
alt="lingkaran link">
<area shape="poly"
coords="58,102,97,101,110,134,
119,119,177,195,69,196,
47,162,62,143" href="#">
</map>
</body>
</html>
Contoh penggunaan image map:
2015 10 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Script dari image map diatas adalah :
<html>
<head><title>Image Map</title></head>
<body>
<p align="center"><map name="Peta">
<area href="profile.html" shape="rect" coords="114, 4, 228, 118">
<area href="fasilitas.html" shape="rect" coords="115, 119, 229,
234">
<area href="Prodi.html" shape="rect" coords="4, 2, 114, 118">
<area href="alumni" shape="rect" coords="4, 115, 114, 232"></map>
<img border="0" src="logostmik.jpg" width="230" height="235"
usemap="#peta"></p>
<p align="center"><b>Selamat Datang</b></p>
</body>
</html>
Link 1 Link 2
Link 3 Link 4
2015 11 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002.
Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung, 2002
MODUL PERKULIAHAN
Pemrograman
Web
Membuat Link Internal Dan Eksternal
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 04 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari pembuatan link hubungan antar bagian dan antar dokumen serta link ke sumber lain di internet.
Mahasiswa mampu membuat link internal dan eksternal.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Hyperlink ke Halaman Web
Untuk membuat link ke halaman lain, digunakan pasangan tag <A>…</A> atau yang biasa yang disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut :
<A HREF = “URL”>Label</A>
Dalam hal ini, URL (Uniform Resource Locator) dapat berupa alamat suatu dokumen Web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP). Untuk mempraktikan link, buatlah terlebih dulu dua buah berkas HTML bernama halx.htm dan haly.htm.
File halx.htm :
File haly.htm :
Sekarang marilah membuat kode HTML yang menyediakan link ke dua buah kode HTML di depan.
File halutama.htm :
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
B. Link ke Situs Web Lain Hyperlink tak terbatas ke halaman-halaman Web yang berada pada sistem yang sama. Hyperlink
seringkali ditujukan ke situs Web yang lain yang berada di sembarang Web server.
Contoh :
C. Menentukan Warna Hyperlink Label yang menjadi penghubung ke halaman Web lain secara bawaan diberi warna tertentu
(umumnya biru) dan diberi garis bawah. Warna tersebut dapat diubah dengan menggunakan atribut LINK yang terdapat pada tag <BODY>.
Contoh :
Selain LINK, terdapat dua atribut lagi yang berkaitan dengan pengaturan warna hyperlink : • ALINK berguna untuk menentukan link aktif, yaitu link yang telah diklik pemakai tetapi
halaman belum selesai dibuka • VLINK berguna untuk menentukan warna link yang halaman Web terkaitnya telah dikunjungi
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh :
D. Menggunakan Bookmark
Jika halaman Web sangat panjang, adakalanya halaman tersebut dilengkapi dengan sejumlah hyperlink yang mengacu ke area tertentu pada halaman itu sendiri. Hal seperti ini diimplementasikan melalui bookmark sehingga pemakai tidak perlu membolak-balik halaman secara manual untuk mendapatkan bagian tertentu dalam halaman tersebut.
Contoh :
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
E. Membuka Jendela Baru
Kadangkala dikehendaki agar kalau suatu link diklik maka jendela baru akan ditampilkan untuk menampung halaman yang di-link. Hal ini bisa dikerjakan dengan menambahkan kode :
TARGET = “_blank” pada tag <A>.
Contoh :
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Perintah-perintah yang digunakan :
Membuat link dengan karakter : <a href=”URL/dokumen.html”>link</a>
Membuat link dengan gambar :
<a href=”URL/dokumen.html”><img src=”nama_gambar”></a>
Membuat nama link pada satu dokumen (anchor) :
<a name=”nama_anchor”></a>
Membuat link pada bagian lain dalam satu dokumen HTML. :
<a href=’#nama_anchor’>nama_link</a>
F. Praktikum 1 Ketikkan script berikut :
<html>
<head>
<title>Wisata Dunia</title>
</head>
<body background=" Bgd.gif">
<p align="center">
<a name="atas"><b><u>Tempat-tempat yang indah didunia
</u></b></a>
</p>
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<hr>
<p align="left">
Inilah tempat-tempat wisata dunia yang banyak dikunjungi oleh
wisatawan tiap tahunnya.
</p>
<p align="left">Ikuti link pada gambar untuk melihat secara
detail.</p>
<p align="left">
<a href=" detail_tempat_wisata.html"><img src="lawu.jpg"
width="136" height="95">
</a>
<b>Gunung Lawu</b> : di Propinsi Jawa Timur
<p>
<p align="left">
<b>Hawaii</b> : Terletak di Benua Amerika
<a href=" detail_tempat_wisata.html"><img src=" Hawaii.jpg"
width="161" height="99"></a>
</p>
<p align="left">
<a href="detail_tempat_wisata.html">
<img src="Colouseum.jpg" width="134" height="89"></a>
<b>Colloseum</b> : ada di Romawi
</p>
<p align="left">
<b>Candi Borobudur</b> : Di Jawa Tengah
<a href=" detail_tempat_wisata.html"><img src="Borobudur.jpg"
width="132" height="92"></a>
</p>
<p align="center"></p>
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<p align="center">Tersedia paket perjalanan wisata dengan harga
mulai 100$ US</p>
<p align="center"><a href="mailto:[email protected]">Pesan
sekarang juga</a></p>
<hr>
<a href="#atas">TOP</a>
</body>
</html>
Simpan dengan nama Tempat_wisata.html
Jalankan dari web browser.
G. Praktikum 2 Buat script berikut dan simpan dengan nama detail_tempat_wisata.html
<html>
<head>
<title>Detail Tempat Wisata</title>
</head>
<body>
<p align="center">
<b><font size="4">Detail Tempat Wisata</font></b>
</p>
<p>
<u><b>Gunung Lawu</b></u>
</p>
<p>
<img src="lawu.jpg" width="156" height="113" align="left">
Gunung yang indah dan penuh dengan legenda ini terletak di
Propinsi Jawa Timur, dengan
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
ketinggian sekitar 3265 diatas permukaan laut.
</p>
<p>Harga paket perjalanan wisata : Rp. 500.000 (3H2M)</p>
<p> </p>
<p>
<b><u>Hawaii</u></b>
</p>
<p>
<img src="Hawaii.jpg" width="154" height="98" align="left">
</p>
<p align="left">
Kepulauan hawaai merupakan pulau yang indah dengan pantai-pantai
yang eksotis. Dengan tarian yang khas, dan keramah-tamahan
penduduknya.
</p>
<p align="left">
Harga paket perjalanan wisata : $500.000 (3H2M)</p>
<p> </p>
<p><b><u><a href="wisata_dunia.html">Kembali</a></u></b></p>
</body>
</html>
Cek semua link yang terdapat pada kedua file HTML diatas
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002.
2015 10 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung, 2002
MODUL PERKULIAHAN
Pemrograman
Web
Membuat Dokumen Yang Berisikan Tabel
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 05 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari dasar-dasar sebuah tabel,membuat judul table dengan mengatur posisi, fungsi cellspacing dan cellpading serta fungsi colspan dan rowspan.
Mahasiswa mampu membuat dokumen html yang berisikan tabel dan kegunaannya.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Menggunakan Tabel Tag-tag yang terkait dengan pembuatan table :
Tag Keterangan
<TABLE>…</TABLE> Mengawali dan mengakhiri sebuah table <CAPTION>…</CAPTION> Menentukan judul pada table <TR>…</TR> Membuat sebuah baris dalam table <TH>…</TH> Membuat judul kolom <TD>…</TD> Membuat sebuah sel data
Contoh :
B. Memberi Garis pada Tabel Bentuk : <TABLE BORDER = ‘bilangan”> Kalau BORDER tidak disertakan dalam tag <TABLE>, nilai untuk BORDER dianggap sama dengan nol, dengan akibat garis tidak ditampilkan. Dengan kata lain,
<TABLE>
identik dengan <TABLE BORDER = “0”>
Contoh :
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
C. Meletakkan Judul di Bawah Tabel
Untuk menampilkan judul di bawah table, digunakan atribut ALIGN = “BOTTOM” pada tag <CAPTION>. Contoh :
D. Menentukan Warna Latar Belakang Table
Untuk menambahkan warna latar belakang table, digunakan atribut BGCOLOR pada tag <TABLE>.
Contoh :
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh berikut menunjukkan pewarnaan table melalui BGCOLOR pada <TABLE> dan <TD> :
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
E. Menggabungkan Sel
Untuk menggabungkan beberapa baris sel, digunakan atribut ROWSPAN pada tag <TD>.
Contoh:
Untuk menggabungkan beberapa sel dalam satu baris, digunakan atribut COLSPAN pada tag <TH> atau <TD>. Contoh :
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
ALIGN dan Nilainya Keterangan ALIGN = “LEFT” Teks diatur rata kiri ALIGN = “CENTER” Teks ditengahkan ALIGN = “RIGHT” Teks diatur rata kanan
Contoh menggabungkan ROWSPAN dan COLSPAN :
F. Mengatur Peletakkan Tabel dalam halaman Atribut ALIGN pada <TR>, <TH>, dan <TD>
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh :
G. Mengatur Tinggi Sel Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag <TABLE>.
Contoh :
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh berikut menunjukkan pengaturan tinggi pada sel tertentu saja. Caranya adalah dengan menggunakan atribut HEIGHT pada tag <TR>.
H. Pengaturan Teks pada Posisi Vertikal
Di dalam sebuah sel, teks dapat diatur menurut posisi vertical apakah akan diletkkan di atas, di tengah, atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut VALIGN pada tag seperti <TH>, <TR>, atau <TD>.
Nilai untuk atribut VALIGN Nilai VALIGN Keterangan
TOP Teks diletakkan di bagian atas pada sel MIDDLE Teks diletakkan di bagian tengah pada sel BOTTOM Teks diletakkan di bagian bawah pada sel
Contoh :
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
I. Mengatur Lebar Tabel dan Sel
Atribut WIDTH pada tag <TABLE> dapat digunakan untuk mengatur lebar table tanpa tergantung oleh ukuran jendela browser. Contoh :
Contoh berikut menunjukkan penggunaan lebar dalam satuan persen :
2015 10 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkannya pada tag <TD> atau <TH>. Contoh :
Nilai WIDTH pada tag <TD> juga bisa berupa %. Contoh :
J. Mengatur Jarak dalam Tabel
Pada tag <TABLE> terdapat dua buah atribut lagi yang dapat digunakan untuk mengatur jarak teks terhadap tepi kiri (yaitu CELLPADDING) dan untuk mengatur jarak bagian sel terhadap tepi dalam bingkai table (yaitu CELLSPACING). Contoh :
2015 11 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
K. Praktikum 1 Ketikkan script berikut
<HTML>
<HEAD>
<TITLE> Belajar Tabel </TITLE>
</HEAD>
<BODY>
<h4>Daftar Pegawai STMIK</h4 >
<TABLE BORDER="1">
<TR ALIGN="CENTER" BGCOLOR="PINK">
<TD>No</TD>
<TD>Nama</TD>
<TD>Alamat</TD>
<TD>Telepon</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Asih Winantu</TD>
<TD>Bantul Yogyakarta</TD>
<TD>0274-441170</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Agus Riyanto</TD>
<TD>Sleman Yogyakarta</TD>
<TD>0274-377982</TD>
</TR>
2015 12 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<TR>
<TD>3</TD>
<TD>M Wahib</TD>
<TD>Blora Jawa Tengah</TD>
<TD>0274-377982</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Simpan dengan nama tabel1.html
Jalankan dengan web browser
L. Praktikum 2
Ketikkan script berikut ini
<html>
<head>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<caption><b>Daftar Nilai Pemrograman Web 1</b></caption>
<tr>
<th width="33%" rowspan="2" valign="middle">Nama</th>
<th width="67%" colspan="2" >Nilai</th>
</tr>
<tr>
2015 13 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<th width="33%">Tugas</th>
<th width="34%">Praktikum</th>
</tr>
<tr>
<td width="33%">Lutfia</td>
<td width="33%" align="center">80</td>
<td width="34%" align="center">85</td>
</tr>
<tr>
<td width="33%">yulia </td>
<td width="33%" align="center">90</td>
<td width="34%" align="center">93</td>
</tr>
<tr>
<td width="33%">Ardian</td>
<td width="33%" align="center">100</td>
<td width="34%" align="center">98</td>
</tr>
</table>
</body>
</html>
Simpan dengan nama tabel2.html
Jalankan dengan web browser
M. Praktikum 3
2015 14 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Buatlah dokumen HTML dengan tampilan sebagai berikut :
Biaya SPP Per semester STMIK El Rahma Yogyakarta
Tahun ajaran 2005/2006
Lulusan Periode Daftar Biaya
LPK El Rahma
I Rp. 650.000
II Rp. 700.000
III Rp. 750.000
LPK Non El Rahma
I Rp. 675.000
II Rp. 725.000
III Rp. 775.000
SMU/Sederajat
I Rp. 700.000
II Rp. 750.000
III Rp. 800.000
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002.
Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Membuat Dokumen Menggunakan Frame
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 06 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari konsep frame, membuat bingkai frame baris dan kolom serta variasi frame.
Mahasiswa mampu membuat dokumen html dengan menggunakan Frame dan inline frame.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Dasar Penggunaan Frame Frame memungkinkan satu halaman Web atau lebih ditampilkan pada sebuah jendela
browser. Untuk mempraktikan frame, buatlah terlebih dulu dua buah berkas HTML bernama framekir.htm dan framekan.htm.
File framekir.htm :
File framekan.htm :
Halaman yang berbasis frame dibentuk dengan menggunakan pasangan <FRAMESET> dan </FRAMESET>, atribut COLS digunakan untuk menentukan lebar masing-masing frame. Contoh :
B. Mengantisipasi Tidak Adanya Dukungan Frame
Ada kemungkinan bahwa Web browser yang digunakan pemakai tidak mendukung fitur
frame. Untuk mengatur agar ada pemberitahuan bahwa halaman Web hanya bisa dilihat dengan browser yang mendukung frame digunakan pasangan tag <NOFRAMES> dan </NOFRAMES>.
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh :
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
C. Menggunakan BORDER
Atribut BORDER pada tag <FRAMESET> berguna untuk mengatur ketebalan garis pemisah antarframe. Contoh :
D. Menghilangkan SCROLLING
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
E. Frame dan Link
Untuk mempraktekkan penggabungan pemakaian frame yang melibatkan link ke frame yang lain, buatlah tiga buah file HTML berikut : File redflash.htm :
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
File rosebud.htm :
File daftar.htm :
Pada file daftar.htm, atribut TARGET digunakan untuk menentukan frame yang akan ditempati oleh halaman Web yang dipanggil.
Kode yang digunakan untuk menggabungkan ketiga file di atas adalah seperti berikut :
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
F. Frame Horisontal
HTML juga memungkinkan pembuatan frame horisontal. Caranya dengan mengubah atribut COLS pada <FRAMESET> menjadi ROWS. Contoh :
G. Penggunaan NORESIZE
Atribut NORESIZE pada tag <FRAME> digunakan agar frame tidak bisa diubah ketika ditampilkan pada browser. Contoh :
H. Gabungan Frame Horisontal dan Vertikal
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
File judul.htm :
I. Praktikum 1 Buat file dengan nama Frame.html
<frameset framespacing="0" border="0" rows="64,*,79"
frameborder="0">
<frame name="top" scrolling="no" noresize target="contents"
src="atas.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="kiri.htm">
<frame name="main" src="utama.htm" scrolling="no">
</frameset>
<frame name="bottom" scrolling="no" noresize target="contents"
src="bawah.htm">
</frameset>
Buat file dengan nama atas.html
<html>
<head>
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
</head>
<body>
<p align="center"><b><font size="5">
<marquee width="661" height="19">STMIK EL RAHMA : Menggapai Ilmu
Menuju Rahmat</marquee>
</font></b></p>
</body>
</html>
Buat file dengan nama utama.html
<html>
<head>
<title>SELAMAT DATANG DI SITUS STMIK EL RAHMA</title>
</head>
<body>
<p align="center"><b><img border="0" src="LOGOSTIMIK.jpg"
width="61" height="61" align="middle">
SELAMAT DATANG DI SITUS STMIK EL RAHMA</b></p>
<hr>
<p align="left">STMIK El Rahma Yogyakarta berdiri pada tanggal 30
Agustus 2001
dengan SK Mendiknas No. 155/D/0/2001 dibawah naungan Yayasan El
Rahma. Pada saat
berdirinya, STMIK El Rahma memiliki lima program studi yaitu
Sistem Informasi,
Teknik Informatika, Manajemen Informatika, Teknik Komputer dan
Komputerisasi
Akuntansi.</p>
2015 10 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
</body>
</html>
Buat file dengan nama kiri.html
<html>
<head>
<title>Program Studi</title>
</head>
<body>
<p>Sejarah Singkat</p>
<p>Program Studi</p>
<p>Fasilitas</p>
<p>Alumni</p>
<p>Info Kerja</p>
</body>
</html>
Buat file dengan nama bawah.html
<html>
<head>
<title>untitled</title>
</head>
<body>
<p align="center">© STMIK EL RAHMA<br>2005</p>
</body>
</html>
Jalankan file frame.html, pastikan hasilnya seperti gambar berikut :
2015 11 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002.
Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Membuat Formulir
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 07 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari pembuatan formulir dengan menggunakan tipe input, text boxes, radio button dsb.
Mahasiswa mampu membuat formulir.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Dasar Penggunaan Form Form dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM>. Dua atribut
yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD. • ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada
formulir. Jika ACTION tidak disebutkan, informasi akan dikirimkan ke URL yang sama dengan halaman web itu sendiri.
• METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL.
Contoh penggunaan pasangan tag <FORM> dan </FORM> :
<FORM ACTION = ”info.htm” METHOD = ”POST”> ... </FORM>
B. Memasukkan Data dengan INPUT
Tag <INPUT> digunakan untuk melakukan pemasukan data dan letaknya berada dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET.
Atribut pada tag INPUT
Atribut Keterangan
NAME Menentukan nama data. Atribut ini diperlukan oleh semua jenis masukan, kecuali SUBMIT dan RESET
SIZE Menentukan ukuran kotak masukan yang tertampil untuk teks dan password MAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan dalam kotak password dan
kotak teks VALUE Menentukan nilai awal untuk kotak masukan CHECKED Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal TYPE Menentukan tipe kotak masukan
C. Tipe TEXT
Tipe TEXT bermanfaat untuk memasukkan data seperti nama orang atau alamat seseorang. Contoh pemakaian :
<INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE = “20” MAXLENGTH = “20”>
Dengan menggunakan atribut VALUE pada tag <INPUT>, field teks dapat diberi nilai bawaan. Contoh :
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE = “20” MAXLENGTH = “20” VALUE = “Isi dengan nama Anda”>
D. Tombol SUBMIT dan RESET Tipe SUBMIT pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang
menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling sederhana :
<INPUT TYPE = “SUBMIT”> Jika tulisan pada tombol tidak berisi Submit, perlu disebutkan pada atribut VALUE. Contoh :
<INPUT TYPE = “SUBMIT” VALUE = ”Kirim”> Tombol Reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan.
Contoh penggunaan formulir yang melibatkan field teks, tombol Submit, dan tombol Reset :
Perbedaan GET dan POST
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
E. Tipe PASSWORD
Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag <INPUT> akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai).
F. Tipe CHECKBOX Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk masukan
yang memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.
Kotak cek paling tidak melibatkan atribut NAME. Adapun atribut CHECKED bersifat opsional,
yang digunakan untuk memberi nilai awal berupa tanda centang. Contoh :
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
G. Tombol Radio Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai
hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai “RADIO”. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama. Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol tersebut diklik. Contoh :
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
H. Praktikum 1 Ketikkan script berikut :
<html>
<head>
<title>formulir</title>
</head>
<body>
<p><b>Formulir Pendaftaran Kursus</b></p>
<form method="POST" action=" " name=”form_kursus”>
<table width="100%">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" size="39"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio" value="L" checked name="jkl">Laki-
laki
<input type="radio" name="jkl" value="p">Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<td><input type="text" name="alamat" size="39"></td>
</tr>
<tr>
<td>Propinsi</td>
<td>:</td>
<td><select size="1" name="propinsi">
<option>Jawa Barat</option>
<option>Jawa Tengah</option>
<option>Jawa Timur</option>
</select></td>
</tr>
<tr>
<td>Pilihan Kursus</td>
<td>:</td>
<td><input type="checkbox" name="kursus"
value="inggris">Bahasa Inggris<br>
<input type="checkbox" name="kursus"
value="komputer">Komputer</td>
</tr>
</table>
<p><input type="submit" value="Submit" name="Bsubmit"><input
type="reset" value="Reset" name="Breset"></p>
</form>
</body>
</html>
Simpan dengan nama form.html
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Lihat hasilnya dengan browser.
I. Praktikum 2 (validasi data) Bukalah kembali file form.html.
Tambahkan script berikut pada bagian head :
<script language="VBscript">
<!--
sub Bsubmit_OnClick
dim TheForm
Set Theform= document.form_kursus
if IsNumerik(TheForm.nama.value) then
Msgbox " Input anda salah"
Else
TheForm.submit
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
End If
End Sub
-->
</script>
Jalankan dengan browser.
Validasi Data dengan JavaScript:
Ketikkan script berikut :
<html>
<head>
<title>Membuat Validasi</title>
<script LANGUAGE="JAVASCRIPT">
function ValidasiForm()
{
if (document.FormTamu.nama.value=="") {
alert("Kolom nama tidak boleh kosong");
return false;
}
if (document.FormTamu.alamat.value=="") {
alert("Kolom Alamat tidak boleh kosong");
return false;
}
if (document.FormTamu.email.value=="") {
alert("Kolom Email tidak boleh kosong");
return false;
}
}
</script>
2015 10 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
</head>
<body>
<form onSubmit="return ValidasiForm()" name="FormTamu"
method="post" action="">
<table class="TABLE" width="307" border="0" cellspacing="0"
cellpadding="3">
<tr align="left" bgcolor="#00FF00">
<th colspan="2" scope="col">Form Validasi </th>
</tr>
<tr>
<td width="92">Nama </td>
<td width="246">
<input name="nama" type="text" id="nama" size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input name="alamat" type="text" id="alamat" size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" id="email" size="25"
maxlength="35"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Kirim"></td>
</tr>
2015 11 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
</table>
</form>
</body>
</html>
Jalankan hasilnya.
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002.
Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Aplikasi Java Script
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 09 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari pengenalan aplikasi java script.
Mahasiswa mampu membuat aplikasi dengan menggunakan aplikasi java script.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Apa Itu Javascript
Javascript adalah bahasa script yang biasa jalan di browser, orang-orang biasa bilang client side programming. Client di sini adalah browser, seperti: Internet Explorer, Firefox, Safari dan sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML.
Di mana saya bisa menulis kode javascript? Anda bisa menulis kode java script di teks editor eperti notepad dan sebagainya.
Apakah saya butuh compiler untuk menjalankan javascript? Tidak perlu, anda cukup menjalankan javascript menggunakan browser. Semua browser mempunyai engine yang menginterpretasikan kode javascript kita.
B. Memulai Javascript Oke sekarang mari kita coba mulai menulis kode javascript kita. Di sini kita menggunakan notepad sebagai teks editor.
Kode javascript ditulis diantara tag <script> dan </script>, bisa kita sisipkan di kode-kode HTML
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
kita.
Sekarang mari kita simpan kode tersebut dengan File Name: tes.html, jangan lupa Save as type: All Files, seperti gambar di bawah.
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Untuk mengetesnya, anda tinggal double klik file tes.html yang kita buat tadi, hasilnya akan seperti berikut:
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Javascript bisa juga ditulis terpisah, filenya diberi ekstension .js Contoh: namafile.js, nanti cara menyisipkannya di file html adalah seperti berikut:
<script type="text/javascript" src="namafile.js"></script>
C. Sintaks Javascript Sintaks javascript mirip-mirip bahasa C atau java. Javascript bersifat case sensitive, artinya huruf kecil dan huruf besar adalah berbeda.
Setiap baris kode javascript dipisahkan baris baru atau bisa juga titik
koma (;) Komentar dalam javascript di awali dengan // atau ditulis
diantara /* dan */ D. Variabel
Variabel di javascript bisa ditulis dengan diawalai huruf atau underscore ( _ ) atau tanda dollar ().
Contoh : jumlah_hits , _nama
Deklarasi variable
• Anda bisa mendeklarasi dengan menggunakan var, contoh: var x = 5, ini
bersifat local dan global (bisa di akses oleh semua fungsi) • Atau langsung deklarasikan tanpa var, x = 5
Contoh:
<script> var x = 5; var nama = “Desrizal”; document.write(nama); </script>
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : JavaScript & PHP, Penerbit Andi, Yogyakarta,
2002.
Betha Sidik, Pemrograman Web Dengan JavaScript, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Penggunaan Operator
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 10 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan operator.
Mahasiswa mampu membuat aplikasi dengan menggunakan aplikasi java script serta penggunaan operator.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Jenis-Jenis Operator Dalam Java Script Operator pada JavaScript terbagi menjadi enam, yaitu : • Aritmatika • Pemberian nilai (Assign) • Pemanipulasian bit (bitwise) • Pembanding • Logika • String
B. Operator Aritmatika
Yaitu operator untuk operasi matematika
Operator Definisi Contoh
+ Penambahan 5 + 5 = 10
- Pengurangan 6 – 2 = 4
* Perkalian 4 * 4 = 16
/ Pembagian 8 / 2 = 4
% Modulus (sisa hasil pembagian)
5 % 2 = 1 10 % 4 = 2
Contoh:
<script> var x = 4; var y = 2;
z = x + y; alert(z); </script>
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
C. Operator Assignment
Seperti kebanyakan bahasa pemograman lainnya, untuk memberikan nilai kepada suatu variable menggunakan tanda sama dengan =
Berikut adalah penyingkatan penulisan operator
Shorthand Operator Artinya
x += y x = x + y x -= y x = x - y x *= y x = x * y x /= y x = x / y
Contoh:
<script> var x = 4; var y = 2; x -= y alert(x); </script>
D. Operator Manipulasi Bit Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan bulat.
Contoh : var A = 12; // A =
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
1100b var B = 10; // B = 1010b var C = A & B maka akan dihasilkan bilangan seperti berikut : 1100b 1010b AND 1000b var A = 12; var C = A<< 2 var D = A >> 1 maka variabel C akan bernilai 48(0011 0000b) variabel D akan bernilai 6 (0110b)
E. Operator Pembanding
Berguna untuk membanding nilai suatu variable Operator Definisi Contoh
== Sama dengan var1 == “Desrizal”
!= Tidak sama dengan x != y
> Lebih besar dari x > y
< Lebih kecil dari x < 6
>= Lebih besar sama dengan x>= y
<= Lebih kecil sama dengan x < 5
Contoh: <html> <head> <script> var x = 4; var y = 2;
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
if(x > y){ alert("x lebih besar dari y");
} </script> </head> <body> </body> </html>
F. Operator Logika
Operator Definisi Contoh
&& DAN x>=5 && x<10
|| ATAU x == 6 || x == 12
! BUKAN !expression
Contoh: <script> var x = 76;
if(x >= 80){
alert("Nilai = A"); }else if(x >= 70 && x < 80){
alert("Nilai = B"); }else if(x >= 60 && x < 70){
alert("Nilai = C");
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
}else{ }
alert("Nilai = D");
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
</script>
G. Operator String Selain operator pembanding, operator string pada JavaScript juga mengenal satu operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan untuk menggabungkan beberapa string menjadi sebuah string yang lebih panjang. Contoh : nama = ”Java” + ”Script”; akan menghasilkan ”JavaScript” pada variabel nama
H. Contoh Program JavaScript : <HTML> <HEAD><TITLE>Operasi Aritmatika</TITLE></HEAD> <BODY> <P><SCRIPT language="JavaScript"> <!-- document.writeln("<PRE>"); document.writeln("<H1>Operasi Aritmatik</H1>"); var A = "100"; var B = "200"; var C = 300; var D = 400; var E = A + B; document.writeln('"100" + "200" = ' + E); E = B + C; document.writeln('"200" + 300 = ' + E); E = C + D; document.writeln('300 + 400 = ' + E); document.writeln("<PRE>"); //--> </SCRIPT></P> </BODY> </HTML>
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : JavaScript & PHP, Penerbit Andi, Yogyakarta,
2002.
Betha Sidik, Pemrograman Web Dengan JavaScript, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Penggunaan Perulangan
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 11 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan perulangan.
Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan perulangan.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Statement
Kondisional Kondisional berguna untuk mengecek suatu kondisi dan melakukan suatu kode jika kondisi tersebut benar atau salah.
B. Penggunaan IF
Sintaks : if(kondisi){
kode yang dijalankan jika benar }
Contoh : <script> var x = 10; if(x == 10){
alert("Hai Apa kabar"); } </sc
ript
>
C. Penggunaan IF - ELSE Sintaks :
if(kondisi){ kode yang dijalankan jika benar
}else{ kode yang dijalankan jika salah
}
Contoh :
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<script> var x = 5; if(x == 10){
alert("Hai Apa kabar"); }else{
alert("X tidak sama dengan 10"); } </script> if - else if - else
Jika anda membutuhkan kondisi yang banyak
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Sintaks : if(kondisi 1){
kode yang dijalankan jika kondisi 1 benar }else if(kondisi 2){
kode yang dijalankan jika kondisi 2 benar }else if(kondisi 3){
kode yang dijalankan jika kondisi 3 benar }else{
kode jika salah satu kondisi di atas tidak ada yang benar }
Contoh : <script> var nilai = 80;
if(nilai >= 85){
alert("A"); }else if(nilai >= 70 && nilai < 85){
alert("B"); }else if(nilai >= 60 && nilai < 70){
alert("C"); }else{
alert("D"); } </script>
D. Penggunaan Switch
Sama seperti if - else if - else, berguna jika membutuhkan kondisi yang banyak
Sintaks : switch(ekspresi){
case kondisi1 : kode yang dijalankan jika kondisi1 benar; break;
case kondisi2 : kode yang dijalankan jika kondisi2 benar; break;
case kondisi3 : kode yang dijalankan jika kondisi3 benar; break;
}
Contoh :
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<script> var buah = "mangga"; switch (buah) {
case "apple": alert("buahnya adalah apple"); break;
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
case
"mangga": alert("buahnya adalah mangga"); break;
case "jambu":
alert("buahnya adalah jambu"); break;
} </script>
E. Pengulangan for Berguna untuk pengulangan yang sudah ditentukan terlebih dahulu awalnya berapa, dijalankan sampai kondisi bagaimana.
Sintaks :
for(awal; kondisi; penambahan){
kode untuk dijalankan }
Contoh :
<script> for (i = 1; i <= 10; i++) {
document.write(i);
} </script>
F. Pengulangan While
Berguna untuk menjalankan suatu kode terus menerus selama kondisi bernilai
TRUE Sintaks :
while(kondisi){ kode untuk dijalankan;
}
Contoh : <script> var i=1; while(
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
i<=5) {
document.write(“Nomor : "+i +"<br />"); i++;
} </script>
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : JavaScript & PHP, Penerbit Andi, Yogyakarta,
2002.
Betha Sidik, Pemrograman Web Dengan JavaScript, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Penggunaan Fungsi
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 12 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan fungsi.
Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan fungsi.
A. Fungsi
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Apa itu fungsi? Fungsi adalah kumpulan blok kode yang membentuk fungsi tersendiri. Kita bisa membuat sendiri fungsi tersebut
Sintaks:
function nama_fungsi(parameter){
kode-kode javascript
}
Contoh 1:
<script> function tes(){
document.write("Hello World!"); }
//untuk menjalankan fungsi, cukup tulis namafungsi
tes();
</script>
Contoh 2:
<script> function kalikan(x,y){
z = x * y; alert("Hasil kali "+x+" * "+y+" = "+z);
} kalikan(5,3);
</script>
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
B. Penanganan Event Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi event atau kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan sebagainya.
Sintaknya:
nama_event=”kode javascript”
Contoh:
<html> <body> <a href=”http://www.google.com” onclick=”alert(‘hello’)”>google</a> </body> </html>
Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka akan dieksekusi kode javascript alert(‘hello’)
Ada macam-macam event yang bisa terjadi pada halaman web atau objek HTML, yaitu sebagai berikut:
• onblur • onchange • onclick • ondblclick • onerror • onfocus • onkeydown • onkeypress • onkeyup • onload • onmousedown • onmousemove • onmouseout • onmouseover • onmouseup • onreset • onresize • onselect • onsubmit
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
• onunload
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
C. Contoh-contoh Penanganan Event 1. onclick
Pada contoh dibawah kita membuat tombol, yang kalau diklik akan muncul window alert
<script> function inform(){
alert("Hai anda mengklik saya") } </script>
<form> <input type="button" name="test" value="Click me" onclick="inform()"> </form> Pada contoh berikut jika kita mengklik radio button akan mengubah warna latar halaman web
<html> <body> <form name="go"> <input type="radio" name="C1" onclick="document.bgColor='lightblue'"> <input type="radio" name="C1" onclick="document.bgColor='lightyellow'"> <input type="radio" name="C1" onclick="document.bgColor='lightgreen'"> </form> </body> </html> 2. onload
Event onload akan dieksekusi jika suatu objek telah diload, pada contoh berikut kita menaruh event onload di tag <body>, artinya jika halaman web sudah diload semua, maka dieksekusi kode javascript
<html> <head><title>Body onload example</title> </head> <body onload="alert('Halaman ini telah selesai di loading')"> Welcome to my page </body> </html> 3. onmouseover dan onmouseout
Onmouseover berguna untuk mendeteksi apakah pointer mouse berada di atas suatu objek HTML, onmouseout berguna untuk mendeteksi apakah pointer mouse keluar dari objek HTML,
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
contoh: <html> <body>
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<table> <tr onmouseover="this.bgColor='lightblue'" onmouseout="this.bgColor='#efefef'" bgcolor="#efefef"> <td>Baris pertama</td> </tr> <tr> <td>Baris kedua</td> </tr> </body> </html>
4. onunload
Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup suatu halaman web
<html> <body onunload="alert('Thank you. Please come back to this site and visit us soon, ok?')"> <h1>Welcome</h1> </body> </html>
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : JavaScript & PHP, Penerbit Andi, Yogyakarta,
2002.
Betha Sidik, Pemrograman Web Dengan JavaScript, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Penggunaan Array
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 13 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan array.
Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan array.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Pengenalan Array
Apa sih array? Array adalah semacam variabel tunggal yang terindex secara teratur, jadi cukup satu nama variabel tapi bisa punya banyak nilai. Karena terindex sacara teratur kita jadi gampang mengolah dan menampilkan nilai-nilai dari variabel tersebut.
Contoh bentuk array:
Buah[1] = “Rambutan” Buah[2] = “Durian” Buah[3] = “Manggis”
Bagaimana cara buat array di javascript? Untuk membuat array di javascript, kita perlu mendeklarasikan variabel array dengan cara new Array()
Contoh:
<html> <body>
<script type="text/javascript"> var mobil = new Array() mobil[0] = "Saab" mobil[1] = "Volvo" mobil[2] = "BMW"
for (i=0;i<mobil.length;i++){ document.write(mobil[i] + "<br />")
} </script>
</body> </html>
Selain di atas kita juga bisa membuat array dengan cara menulis langsung di dalam argument Array(). Index atau Key array dimulai dari nol (0)
Contoh:
<html> <body>
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<script type="text/javascript"> var buah = new Array("Mangga","Rambutan","Durian");
document.write(buah[1]);
</script> </body> </html>
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Hasilnya adalah Rambutan
B. Metode untuk Manipulasi Array
Javascript menyediakan metode-metode untuk melakukan manipulasi terhadap objek array
Properti Array Properti Deskripsi
length Menghasilkan jumlah elemen dalam suatu array
Metode Array
concat()
fungsi:
Menggabungkan dua atau lebih array Sintaks:
arrayObject.concat(arrayX,arrayX,......,arrayX)
Contoh: <script type="text/javascript"> var arr = new Array(3) arr[0] = "Jani" arr[1] = "Tove" arr[2] = "Hege"
var arr2 = new Array(3) arr2[0] = "John" arr2[1] = "Andy" arr2[2] = "Wendy"
var arr3 = new Array(2) arr3[0] = "Stale" arr3[1] = "Borge"
document.write(arr.concat(arr2,arr3))
</script>
Hasilnya:
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Jani,Tove,Hege,John,Andy,Wendy,Stale,Borge
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
join()
Fungsi:
Menuliskan elemen-elemen array ke dalam satu string dipisahkan oleh karakter yang kita set
Sintaks:
arrayObject.join(pemisah)
Contoh:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale"
document.write(arr.join() + "<br />") document.write(arr.join(".")) </script>
Hasilnya:
Jani,Hege,Stale Jani.Hege.Stale
pop()
Fungsi: Untuk mendelete elemen terakhir dari suatu array
Sintaks:
arrayObject.pop()
Contoh:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale" document.write(arr + "<br />") document.write(arr.pop() + "<br />") document.write(arr)
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
</script>
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Hasilnya:
Jani,Hege,Stale Stale Jani,Hege
push()
Fungsi:
Menambah satu atau lebih elemen ke bagian akhir suatu array
Sintaks:
arrayObject.push(newelement1,newelement2,....,newelementX)
Contoh: <script type="text/javascript"> var arr = new Array(3) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale"
document.write(arr + "<br />") document.write(arr.push("Kai Jim") + "<br />") document.write(arr)
</script>
Hasilnya:
Jani,Hege,Stale 4 Jani,Hege,Stale,Kai Jim
reverse()
Fungsi:
Membalikkan urutan elemen dalam suatu array
Sintak:
arrayObject.reverse()
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 9 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh:
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 10 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
<script type="text/javascript"> var arr = new Array(3) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale"
document.write(arr + "<br />") document.write(arr.reverse())
</script>
Hasilnya:
Jani,Hege,Stale Stale,Hege,Jani
shift()
Fungsi:
Untuk mendelete elemen pertama dari suatu array
Sintaks:
arrayObject.shift()
Contoh:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale"
document.write(arr + "<br />") document.write(arr.shift() + "<br />") document.write(arr)
</script>
Hasilnya:
Jani,Hege,Stale Jani Hege,Stale
http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial
2015 11 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
unshift()
Fungsi:
Untuk menambahkan satu atau lebih elemen pada awal array Sintaks:
arrayObject.unshift(newelement1,newelement2,....,newelementX)
Contoh: <script type="text/javascript"> var arr = new Array() arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale"
document.write(arr + "<br />") arr.unshift("Kai Jim") document.write(arr)
</script>
Hasilnya:
Jani,Hege,Stale Kai Jim,Jani,Hege,Stale
sort()
Fungsi:
Untuk mengurutkan elemen array
Sintaks:
arrayObject.sort(sortby)
Contoh: <script type="text/javascript"> var arr = new Array(6) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale" arr[3] = "Kai Jim" arr[4] = "Borge"
arr[5] = "Tove"
document.write(arr + "<br />") document.write(arr.sort())
</script>
Hasilnya:
Jani,Hege,Stale,Kai Jim,Borge,Tove Borge,Hege,Jani,Kai Jim,Stale,Tove
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : JavaScript & PHP, Penerbit Andi, Yogyakarta,
2002.
Betha Sidik, Pemrograman Web Dengan JavaScript, Penerbit Informatika, Bandung, 2002
MODUL PERKULIAHAN
Pemrograman
Web
Penggunaan Objek
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 14 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan objek.
Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan objek.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Memformat T eks dengan Javascript
Untuk membantu melakukan formatting terhadap teks secara programming, javascript menyediakan beberapa metode formatting menggunakan javascript.
Properti Deskripsi
length Menghasilkan jumlah karakter dari suatu string atau teks
Metode Deskripsi
anchor(nama) Menghasilkan string dengan diapit tag <A name="nama">
big() Menghasilkan string dengan diapit tag <BIG>.
blink() Menghasilkan string dengan diapit tag <BLINK>
bold() Menghasilkan string dengan diapit tag <B>
fixed() Menghasilkan string dengan diapit tag <TT> surrounding it.
fontcolor(warna) Menghasilkan string dengan diapit tag <FONT color="warna">
fontsize(size) Menghasilkan string dengan diapit tag <FONT size="size">
italics() Menghasilkan string dengan diapit tag <I>
link(url) Menghasilkan string dengan diapit tag <A href="url">
small() Menghasilkan string dengan diapit tag <SMALL>
strike() Menghasilkan string dengan diapit tag <STRIKE>
sub() Menghasilkan string dengan diapit tag <SUB>
sup() Menghasilkan string dengan diapit tag <SUP>
toLowerCase() Mengubah string menjadi huruf kecil semua.
toUpperCase() Mengubah string menjadu huruf besar semua
Contoh 1: <script> var teks = "Desrizal"
panjang = teks.length;
alert(panjang); </script>
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Hasilnya:
Contoh 2: <script> var message="Welcome to our site!" document.write(message) </script>
Output: Welcome to our site!
<script> var message="Welcome to our site!" document.write(message.toUpperCase()) </script>
Output: WELCOME TO OUR SITE!
Contoh 3:
<script> var message="Welcome to our site!" document.write(message.toUpperCase().bold()) </script>
Output: WELCOME TO OUR SITE!
Contoh 4:
<script> var message="Welcome to our site!" var format=message.toUpperCase() var size=1 for
(i=0;i<message.length;i++){ document.write(format.charAt(i).fontsize(size).bold()) if (size<7){
size++ }else{
size=1
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
}
} </script>
Output:
WELCOMETO OURSITE!
B. Penanganan Objek String
Setelah kita mempelajari metode string yang berkaitan dengan format teks. Sekarang kita lanjut metode objek string lainnya ayng bertugas menangani dan memanipulasi objek string dan contoh-contohnya.
Metode Deskripsi
charAt(x) Menghasilkan karakter pada posisi x dari suatu string.
charCodeAt(x) Menghasilkan nilai Unicode value dari karakter pada posisi x dari suatu string.
concat(teks1, teks2,...) Menggabungkan satu atau lebih string-string (teks1, teks2, dan sebagainya).
fromCharCode(c1, c2,...) Meghasilkan string yang dibuat menggunakan urutan dari nilai unicode
indexOf(substr, [start]) Mencari dan (jika ditemukan) menghasilkan nomor index number dari karakter atau substring yang di dalam string. Jika tidak ditemukan, hasilnya -1. "Start" adalah argument opsional,posisi awal di string untuk memulai pencarian , defaultnya adalah 0
match(regexp) Mengeksekusi suatu pencarian untuk string berdasarkan pola regular expression. Menghasikan suatu array informasi, jika tidak ditemukan menghasilkan null.
replace( regexp, replacetext) Mencari dan menukar string yang dicari berdasarkan pola regular expression.
search(regexp) Mengetes apakah pola regular expression cocok pada suatu string, jika cocok akan menghasilkan index dari yang cocok, jika tidak ada yang cocok menghasilkan -1.
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
slice(start, [end]) Menghasilkan substring dari suau string berdasarkan “start” dan “end” argument.
split(delimiter, [limit]) Memotong-motong string berdasarkan pembatas yang ditentukan, hasilnya dalam bentuk array.
substr(start, [length]) Menghasilkan karakter atau substring dari suatu string yang dimulai dari “start” sampai panjang “length” yang ditentukan.
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Contoh-contoh:
1. Validasi email, pada contoh berikut kita akan mengecek apakah email berikut valid atau tidak. Cara mengeceknya adalah apakah string yang diinput mengandung karakter @ atau titik (.)
<form name="test" onSubmit="checkemail(this.test2.value);return false"> <input type="text" size=20 name="test2"> <input type="submit" value="Submit"> </form>
<script type="text/javascript"> function checkemail(email){
if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1) alert("bagus!")
else }
alert("Bukan email")
</script>
2. Menghitung kata, Pada contoh berikut kita akan menghitung kata, caranya adalah mengambil isi suatu textarea, lalu memotong-motong isinya dengan metode split.
<form name="wordcount"> <textarea rows="12" name="wordcount2" cols="38" wrap="virtual"></textarea><br> <input type="button" value="Hitung kata" onClick="hitung()"> <input type="text" name="wordcount3" size="20"> </form>
<script type="text/javascript"> function hitung(){
var formcontent=document.wordcount.wordcount2.value isi=formcontent.split(" ") document.wordcount.wordcount3.value=isi.length
} </script>
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
C. Parse String ke Integer dan Float parseInt, untuk mengubah string menjadi Integer parseFloat, untuk mengubah string menjadi Float
<script type="text/javascript"> document.write(parseInt("10") + "<br />") document.write(parseInt("10.00") + "<br />") document.write(parseInt("10.33") + "<br />") document.write(parseInt("34 45 66") + "<br />") document.write(parseInt(" 60 ") + "<br />") document.write(parseInt("40 years") + "<br />") document.write(parseInt("He was 40") + "<br />")
document.write("<br />") document.write(parseInt("10")+ "<br />") document.write(parseInt("10",10)+ "<br />")
document.write(parseInt("010")+ "<br />") document.write(parseInt("10",8)+ "<br />")
document.write(parseInt("0x10")+ "<br />") document.write(parseInt("10",16)+ "<br />") </script>
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : JavaScript & PHP, Penerbit Andi, Yogyakarta,
2002.
Betha Sidik, Pemrograman Web Dengan JavaScript, Penerbit Informatika, Bandung, 2002
2015 1 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
MODUL PERKULIAHAN
Pemrograman
Web
Penggunaan Objek Bawaan
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Sistem Informasi 15 87039
Tim Dosen
Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan objek bawaan.
Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan objek bawaan.
2015 2 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
A. Membuka Window di Javascript
Untuk membuka window di javascript adalah dengan metode
open() Sintaks: window.open(url, nama_window, konfigurasi)
Contoh: window.open(“http://www.google.com”,”windowku”,”width=300,height=200”);
Untuk konfigurasi yang bisa diset sebagai berikut:
Konfigurasi Deskripsi Nilai
width Lebar window Lebar window dalam pixel
height Tinggi window Tinggi window dalam pixel
toolbar Menampilkan toolbar browser 1 atau 0
menubar Menampilkan menubar browser 1 atau 0
scrollbars Apakah menampilkan scrollbars 1 atau 0
resizable Set apakah bisa window diubah-ubah ukurannya
1 atau 0
Contoh:
<html> <body> <script> function bukawindow(){
window.open("http://www.google.com","google","width=400,height=300,toolbar=1" ); } </script> <input type="button" onclick="bukawindow()" value="buka"> </body> </html>
B. Mereload, Menutup, Meloading Halaman Baru, Print
2015 3 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
Untuk mereload window adalah dengan cara:
window.location.reload() Untuk menutup window adalah dengan cara:
2015 4 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
window.close()
Untuk meloading halaman baru adalah:
window.location="urlkamu.com"
kode di atas akan sama jika anda mengklik suatu link:
<a href=”urlkamu.com”>urlkamu</a>
Untuk mengeprint halaman web
window.print()
C. Komunikasi Antar Window
Adakalanya ketika kita membuka window baru, kita bisa melakukan komunikasi data ke window parent-nya, atau bisa mengakses dan memanipulasi objek di window parent.
Untuk mengakses window parent gunakan window.opener
Contoh:
Induk.html <html> <head> <title>Test</title> <script language="javascript"> function buka(){
var x = window.open('anak.html', 'newWindow', 'height=300,width=300'); } </script> </head> <body> <form name=formulir> <INPUT type=button value="buka window" name=submit1 onClick="buka();"> <input type=text name=kotak id=kotak> </form> </body> </html>
2015 5 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
anak.html
<html> <head> <title>testing</title> <script language=javascript> function setInduk(){
2015 6 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
window.opener.document.getElementById("kotak").value =
document.getElementById("inputan").value; } </script> </head> <body> <form name=myForm>
<input type=text name="inputan" id="inputan"> <input type=button value="Click Me" onClick="setInduk();">
</form> </body> </html>
D. Alert, Confirm dan Prompt alert digunakan untuk menampilkan window alert
Contoh:
<script> alert(“Hellow World!!”); </script>
Hasil:
cofirm, digunakan untuk memunculkan window konfirmasi atau semacam pertanyaan yang jawabannya antara OK atau Cancel
Contoh:
<script type="text/javascript"> var x=window.confirm("Apakah anda baik-baik saja?") if (x) window.alert("Good!") else window.alert("Too bad")
2015 7 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
</script>
2015 8 Pemrograman Web Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id
prompt, digunakan untuk meminta inputan melalui window
Contoh:
<script type="text/javascript"> var y=window.prompt("Masukkan nama anda") window.alert(y) </script>
Hasilnya
Daftar Pustaka Abdul Kadir, Pemrograman Web Mencakup : JavaScript & PHP, Penerbit Andi, Yogyakarta,
2002.
Betha Sidik, Pemrograman Web Dengan JavaScript, Penerbit Informatika, Bandung, 2002