MODUL PERKULIAHAN Pemrograman Web - …fasilkom.mercubuana.ac.id/wp-content/uploads/2017/10/Modul... · Modul ini mempelajari tag dasar html, struktur dasar html dan membuat judul

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

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.



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.



E. Komentar Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentar dalam kode

HTML adalah sebagai keterangan. Sebuah komentar diawali dengan .

Contoh :

<!— File komentar.htm Dibuat pada tanggal 4 Agustus 2002 -->

<HTML> <HEAD> <TITLE>Komentar</TITLE> </HEAD> <BODY>  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 :



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



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>



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



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 :



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



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



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



MODUL PERKULIAHAN

Pemrograman

Web

Pembuatan Paragraf, Format Karakter & Membuat Daftar Di HTML



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



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.



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



<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>&copy STMIK EL RAHMA

<br><b>Yogyakarta</b></font>

</center>

</body>

</html>



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.



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>



<BR>

<S>strikethrough</s>

<BR>

CO<sup>2</sup>

<BR>

H<sub>2</sub>O

</BODY>

</HTML>

Simpan dengan nama font.html


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>



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>



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



Yogyakarta, 2002.




MODUL PERKULIAHAN

Pemrograman

Web

Pembuatan Dokumen Yang Berisikan Gambar Serta Link



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.



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



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



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


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


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



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



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



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



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




Yogyakarta, 2002.



MODUL PERKULIAHAN

Pemrograman

Web

Membuat Link Internal Dan Eksternal



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.


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 :



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



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 :



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 :



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>



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



<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



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


Yogyakarta, 2002.





MODUL PERKULIAHAN

Pemrograman

Web

Membuat Dokumen Yang Berisikan Tabel



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.


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 :



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 :



Contoh berikut menunjukkan pewarnaan table melalui BGCOLOR pada <TABLE> dan <TD> :



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 :



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>



Contoh :

G. Mengatur Tinggi Sel Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag <TABLE>.

Contoh :



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 :



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 :



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 :



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>



<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


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>



<th width="33%">Tugas</th>

<th width="34%">Praktikum</th>

</tr>

<tr>

<td width="33%">Lutfia</td>

<td width="33%" align="center">80</td>


</tr>

<tr>

<td width="33%">yulia </td>



</tr>

<tr>

<td width="33%">Ardian</td>



</tr>

</table>

</body>

</html>

Simpan dengan nama tabel2.html


M. Praktikum 3



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


Yogyakarta, 2002.




MODUL PERKULIAHAN

Pemrograman

Web

Membuat Dokumen Menggunakan Frame



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.



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



Contoh :



C. Menggunakan BORDER

Atribut BORDER pada tag <FRAMESET> berguna untuk mengatur ketebalan garis pemisah antarframe. Contoh :

D. Menghilangkan SCROLLING



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 :



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 :



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



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>



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



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




Yogyakarta, 2002.




MODUL PERKULIAHAN

Pemrograman

Web

Membuat Formulir



Tim Dosen

Abstract Kompetensi Modul ini mempelajari pembuatan formulir dengan menggunakan tipe input, text boxes, radio button dsb.

Mahasiswa mampu membuat formulir.



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 :



<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



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 :



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 :



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>



<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




I. Praktikum 2 (validasi data) Bukalah kembali file form.html.

Tambahkan script berikut pada bagian head :

<script language="VBscript">



</script>

Jalankan dengan browser.

Validasi Data dengan JavaScript:


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



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


</tr>

<tr>

<td>Email</td>

<td><input name="email" type="text" id="email" size="25"


</tr>

<tr>

<td> </td>

<td><input type="submit" name="Submit" value="Kirim"></td>

</tr>



</table>

</form>

</body>

</html>

Jalankan hasilnya.


Yogyakarta, 2002.




MODUL PERKULIAHAN

Pemrograman

Web

Aplikasi Java Script



Tim Dosen

Abstract Kompetensi Modul ini mempelajari pengenalan aplikasi java script.

Mahasiswa mampu membuat aplikasi dengan menggunakan aplikasi java script.



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



kita.

Sekarang mari kita simpan kode tersebut dengan File Name: tes.html, jangan lupa Save as type: All Files, seperti gambar di bawah.



Untuk mengetesnya, anda tinggal double klik file tes.html yang kita buat tadi, hasilnya akan seperti berikut:



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>



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 Operator



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.



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>



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 =



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;



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");



}else{ }

alert("Nilai = D");



</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">  </SCRIPT></P> </BODY> </HTML>




2002.




MODUL PERKULIAHAN

Pemrograman

Web

Penggunaan Perulangan



Tim Dosen

Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan perulangan.

Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan perulangan.



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 :



<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



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;



}

Contoh :



<script> var buah = "mangga"; switch (buah) {

case "apple": alert("buahnya adalah apple"); break;



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(



i<=5) {

document.write(“Nomor : "+i +"<br />"); i++;

} </script>


2002.




MODUL PERKULIAHAN

Pemrograman

Web

Penggunaan Fungsi



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



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>



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


http://www.google.com/


• onunload


http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial


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/




contoh: <html> <body>




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


2002.




MODUL PERKULIAHAN

Pemrograman

Web

Penggunaan Array



Tim Dosen

Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan array.

Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan array.



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>



<script type="text/javascript"> var buah = new Array("Mangga","Rambutan","Durian");

document.write(buah[1]);

</script> </body> </html>



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:



Jani,Tove,Hege,John,Andy,Wendy,Stale,Borge




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)





</script>





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





Contoh:






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:


document.write(arr + "<br />") document.write(arr.shift() + "<br />") document.write(arr)

</script>

Hasilnya:

Jani,Hege,Stale Jani Hege,Stale





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


2002.


MODUL PERKULIAHAN

Pemrograman

Web

Penggunaan Objek



Tim Dosen

Abstract Kompetensi Modul ini mempelajari aplikasi java script dengan penggunaan objek.

Mahasiswa mampu membuat aplikasi dengan java script dengan penggunaan objek.


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>



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



}

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



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.



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>





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>


2002.




MODUL PERKULIAHAN

Pemrograman

Web

Penggunaan Objek Bawaan



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.



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





Untuk mereload window adalah dengan cara:

window.location.reload() Untuk menutup window adalah dengan cara:



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>



anak.html

<html> <head> <title>testing</title> <script language=javascript> function setInduk(){



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



</script>



prompt, digunakan untuk meminta inputan melalui window

Contoh:

<script type="text/javascript"> var y=window.prompt("Masukkan nama anda") window.alert(y) </script>

Hasilnya


2002.

MODUL PERKULIAHAN Pemrograman Web - …fasilkom.mercubuana.ac.id/wp-content/uploads/2017/10/Modul... · Modul ini mempelajari tag dasar html, struktur dasar html dan membuat judul

Documents