PANDUAN PRAKTIKUM PEMROGRAMAN WEB I

PANDUAN PRAKTIKUM

PEMROGRAMAN WEB I

MATERI:

1. PENGANTAR WEB

2. HTML

3. CSS

4. JAVASCRIPT

5. PHP MySQL

DISUSUN OLEH

Dr. RELITA BUATON, ST, M. KOM

STMIK KAPUTAMA

2020

1

PERTEMUAN I

PENGANTAR WEB

Tujuan:

Memahami latar belakang internet dan kaitannya dengan teknologi website serta memahami

protocol-protokol yang diperlukan dalam membangun website

Materi:

I. Pengertian Internet

Jaringan komputer berdasarkan area terdiri dari 3 jenis yaitu LAN, MAN dan WAN. WAN

adalah jaringan global atau kumpulan jaringan komputer yang terdapat di seluruh penjuru

dunia. WAN melahirkan satu teknologi yang disebut dengan Internet. Internet merupakan

teknologi WAN yang menghubungkan suatu network dengan network lainya di seluruh dunia. Di

dalam jaringan computer terdapat satu protocol yang berfungsi untuk mengatur lalu lintas

jaringan yaitu TCP/IP sebagai protocol penghubung antar jaringan-jaringan yang beragam di

seluruh dunia agar dapat berkomunikasi dan menjamin data tepat pada tujuan

2. Manfaat Internet

Internet (interconnection-networking) secara harafiah ialah sistem global dari seluruh

jaringan komputer yang saling terhubung menggunakan standar Internet Protocol Suite

(TCP/IP) untuk melayani miliaran pengguna di seluruh dunia.

Sumber (Wikipedia.com)

Internet mempunyai manfaat dan fungsi yang berbeda-beda sesuai dengan user dan kebutuhan

akan internet, secara umum manfaat internet adalah :

Pertukaran informasi /data secara online

Surat-menyurat antar unit kerja secara cepat

Pertukaran dan mengirim dokumen / file secara elektronik

Sebagai media share/diskusi/video conference

2

Untuk mengakses data/info yang tersedia baik dalam maupun luar negeri

Sarana Multimedia/Video Streaming secara online

E-commerce (Elektronik Perdagangan),E-Banking, dll

3. Model Aplikasi Web

Komputer saling terhubung, user mengetik URL di browser lalu browser menghubungi

server yang tersebut pada URL. Setelah terhubung, browser mengirimkan HTTP request dan

server menjawab dengan mengirim HTTP response (berisi header dan isi dokumen). Untuk

dokumen yang terdiri atas beberapa file (misalnya dokumen bergambar), browser harus

mengirimkan HTTP request lagi untuk setiap file dan browser menampilkan semua isi dokumen

kepada user

4. Lalu Lintas Aplikasi Web

Content-type: text/html

<html> <head><title> Google </title></head> <body>Welcome to google <img src='logo.gif'></body> </html>

GET / HTTP/1.1

Accept: image/gif, image/jpeg, application/x-shockwave-flash,

*/* User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

GET /logo.gif HTTP/1.1

Accept: image/gif, image/jpeg, application/x-shockwave-flash,

*/* User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

Content-type: image/gif

GIF89a€6‚aD&nˆ†!VRŠ:¾è gÛ5ÈßŢ7J ‰¥Ø£“ !Y¤•K•"d‘qDbF9~¨âkµÈ

•ö}&•%= æâz!ÙÑ– uéebóùx’˜M‰"š*ÉæŒ‚Õ˜¡•ÉI§^„........

browser

browser

server

server

HTTP request 1

HTTP request 2

HTTP response 1

HTTP response 2

server

server

browser

browser

3

Rektorat Sekretariat

PDE Dengan

PC Stand Alone

Bank Bukopin

HTTP adalah protokol komunikasi yang digunakan dalam web, Spesifikasi HTTP standar

(HTTP 1.1) dideskripsikan di RFC 2616 (http://www.ietf.org/rfc/rfc2616.txt) contoh “obrolan”

komunikasi antara browser dan server untuk menghantarkan sebuah dokumen web yang disisipi

sebuah gambar

5. Sistem Informasi Konvensional

6. Istilah-Istilah Isternet

Istilah Keterangan

WWW World Wide Web adalah protocol untuk layanan Internet yang

menggunakan konsep hypertext antar dokumen yang berkaitan, yang di

dalamnya terdapat halaman web (web page). Untuk mengakses www

digunakan http (HyperText Transfer Protocol)

Protocol Sejumlah aturan yang menentukan bagaimana dua komputer atau lebih

saling berkomunikasi

Home Page Tampilan awal (halaman utama) suatu website yang memuat informasi

singkat tentang apa isi dari website tersebut

Situs Suatu alamat di dalam sebuah web

Browser Software yang digunakan untuk surfing atau browsing Internet, seperti

4

Internet Explorer, Mozilla, Google Crome,Opera, Netscape dll

ISP Internet Service Provider, penyedia jasa layanan Internet, seperti

Indosatnet, Nusanet,Lintasarta,Asia Global,Wasantara, Meganet dll

Download Menyalin/mengambil file atau objek dari Internet ke komputer

E-Mail Electronic Mail, suatu layanan/fasilitas yang disediakan untuk saling

berkirim surat lewat internet

Search Engine Mesin pencari, suatu layanan/fasilitas untuk melakukan pencarian di

Internet seperti google,yahoo,dll

Miling List Suatu forum/kelompok diskusi di Internet yang dapat saling bertukar

Informasi satu sama lain sesame anggota grup

Messenger Program untuk berkirim pesan sesame secara online, seperti ICQ, MSN

Messenger, Yahoo Messenger, AOL Instant Messenger, dll, Anda bisa

mengetahui siapa saja dari teman-teman anda di Internet yang saat itu

sedang menggunakan Internet. Bahkan anda bisa mecari siapa saja

berdasarkan Negara,kota, hobby yang saat itu sedang memakai

Internet. Dan bisa mengajaknya chatting pada saat online.

Internet News Internet News atau News juga dikenal sebagai Usenet. Orang dapat

melakukan aksi atau memberikan komentar tentang suatu hal,

sehingga menjadi suatu forum diskusi. Beberapa newsgroups

mempunyai moderator dan beberapa tidak. Karena banyak orang dapat

mengirimkan apa saja, maka artikel bisa informatif atau sampah.

Telnet Dengan program telnet, anda dapat menjalankan komputer lain. Benar-

benar menjalankan, seolah-olah anda berada di tempat tsb.

Editor Program yang di gunakan untuk membuat document HTML, ada banyak

HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage,

Dreamweaver, Notepad.

LATIHAN

1. Jelaskan perbedaan LAN, MAN, WAN

2. Jelaskan perbedaan internet, website

3. Jelaskan perbedaan URL, LINK,Homepage, webpage

4. Jelaskan fungsi protocol dalam internet

5. Sebutkan dan jelaskan protocol-protokol yang terdapat dalam internet

6. Jelaskan latar belakang dan sejarah internet

7. Jelaskan system kerja internet

8. Jelaskan cara kerja protocol HTTP

1

Pertemuan 2,3

PEMROGRAMAN HTML

Tujuan:

Memahami struktur dasar pemrograman HTML dan mampu membuat content website

sederhana dengan mengggunakan tag format teks, font, image,link dan numbering.

Alat dan Bahan:

Perangkat lunak : Macromedia Dreamweaver

Materi:

1. Tag HTML

HTML (Hypertext Markup Language) merupkan standard bahasa yang di gunakan untuk

menampilkan document web, yang bisa dilakukan dengan HTML yaitu:

Membuat tampilan web page beserta contentnya.

Mempublikasikan document secara online sehingga bisa di akses dari seluruh

penjuru.

Membuat online form yang bisa di gunakan untuk menangani

pendaftaran,registrasi dan transaksi secara online.

Menambahkan object-object seperti image, audio, video dan objek lainnya dalam

document HTML.

Perintah HTML disebut dengan TAG, TAG digunakan untuk menentukan tampilan document

HTML.

Syntax:

<HTML>

<Head>

<title>

…..

</title>

</head>

<body>

……..

……..

</body>

<HTML>

Document HTML dibagi mejadi tiga bagian utama:

HTML

Setiap document HTML harus di awali dan ditutup dengan tag HTML

<HTML></HTML>, tag HTML memberi tahu browser bahwa yang di dalam kedua

tag tersebut adalah document HTML.

HEAD

2

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD>

di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul

BODY

Document body digunakan untuk menampilkan text, image link dan semua yang

akan di tampilkan pada web page.

2. Format Text

a. Heading

Heading adalah judul atau sub judul dalam suatu dokumen, heading yang dimaksud adalah

H1-H6

Syntax:

<H1>…..</H1>

Latheading.html

<body>

<h1>Heading Satu</h1>






</body>

Output:

b. Paragraf Dan Pengaturan Text

TAG Keterangan

<P> Berfungsi untuk membuat Paragraf,didalamnya boleh

disisipkan atribute align dengan value (Left, Right,center)

untuk mengatur perataan teks dalam suatu paragraf

<BR> Berpindah baris

<HR> Membuat garis horizontal

<BLOCKQUOTE> Membuat kutipan

<PRE> Membuat tulisan sama dengan format asli

3

Latparagraf.html

<body>

Contoh Format Text

<br />Ini adalah pindah baris

<p>Ini adalah sebuag paragraf, jarak lebih jauh dengan br</p>

<hr />

<blockquote>membuat web gampang menurut ahlinya</blockquote>

<pre>Membuat web adalah

Gampang menurut ahlinya</pre>

</body>

Output

3. Format Tulisan

Mengatur bentuk font pada text

TAG Keterangan

<B> untuk membuat huruf cetak tebal

<I> untuk membuat huruf cetak miring

<U> untuk membuat garis bawah pada teks

<TT> untuk membuat huruf seperti huruf mesin ketik

<STRIKE> untuk membuat garis horizontal pada bagian tengah huruf

<BIG> untuk membuat ukuran huruf yang lebih besar

<SMALL> untuk membuat ukuran huruf yang lebih kecil

<SUB> untuk membuat subscript

<SUP> untuk membuat superscript

Lattulisan.html

<body>

<b>Tulisan Bold</b><br />

<i>Cetak Miring</i><br />

<u>Garis Bawah</u><br />

<strike>Garis Di Tengah</strike><br />

<big>huruf lebih besar</big><br />

<small>huruf lebih kecil</small>

a<sub>a</sub>

4<sup>2</sup>

</body>

Output

4

4. FONT

Mengatur jenis, ukuran dan warna font

TAG Keterangan

Color Untuk mengatur warna font, bisa menggunakan nama

warna atau menggunakan hexadecimal (#000000 -

#ffffff)

Size Untuk menentukan ukuran font( 1 – 7)

Face Untuk menentukan jenis font, biasanya dalam satu list

ada beberapa jenis font, bila terdapat beberapa jenis

font maka pembacaannya dimulai dari yang paling kiri.

Latfont.html

<body>

<font size="+1">Besar Huruf +1</font><br />

<font face="Arial, Helvetica, sans-serif">Jenis Huruf Arial</font><br />

<font color="#FF0000">warna Huruf merah</font><br />

<font color="red">Warna Huruf Merah</font><br />

<font face="Arial, Helvetica, sans-serif" size="+2" color="#0000FF">gabungan huruf</font>

</body>

Output

5. Link Address

5

Link berupa gambar atau teks yang terkait dengan alamat tertentu. Bilamana Link diklik

maka dokumen akan terhubung dengan alamat yang dituju. Link Ditandai dengan <A>(Anchor).

Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribut HREF digunakan bila sebuah

anchor digunakan sebagai link, sedangkan atribut NAME digunakan jika anchor digunakan

sebagai tujuan.

Syntax:

<a href=”namafile/address”>Klik Disini</a>

TAG Keterangan

Anchor

Anchor tag <A> berfungsi untuk menentukan hyperlink

dalam document HTML. HREF property digunakan

untuk menentukan tujuan hyperlin.

Absolute Address Merupakan full internet address (URL) yang meliputi

protocol, network location dan path dan nama file.

Contoh: http ://www.yahoo.com/index.html

Relatif Address URL yang tidak menyebutkan protocol dan network

location (hanya path dan nama filenya)

Latlink.html

<body>

<a href="lattulisan.html">Klik Disini Untuk Melihat Latihan Satu</a>

<a href="http://www.yahoo.com">Klik Disini Untuk Login Yahoo</a>

</body>

6. Penomoran

Digunakan untuk membuat penomoran tulisan. Format yang digunakan adalah LIST (daftar).

Ada dua jenis penomoran, yaitu ORDERED list (OL) dan UNORDERED list (UL).

Contoh UL

PC

Laptop

Ipad

Contoh OL

1. PC

2. Laptop

3. Ipad

TAG Keterangan

UL Type square :Bullet Kotak

Type Disc:Bullet Titik

Type Circle: Bullet Lingkaran

6

OL Type I:Upper Roman

Type i:Lower Roman

Type A:Upercase

Type a:Lowercase

Start x :Begin Number

Latpenomoran.html Output

<body>

<h2>Program Studi</h2>

<ol type="1">

<li>Program S-1</li>

<ul type="circle">

<li>Teknik Informatika</li>

<li>Sistem Informasi</li>

</ul>

<li>Program D-III</li>

<ul type="disc">

<li>Teknik Informatikan</li>

<li>Manajemen Informatikan</li>

<li>Komputer Akuntansi</li>

</ul>

</ol>

</body>

7. Images

Digunakan untuk menampilkan gambar pada web untuk menambah daya tarik content.

Format gambar yang dapat ditampilkan adalah :

GIF (Graphical Interchange Format) (.GIF)

JPEG (Joint Photographic Expert Image) (.JPG)

PNG (Portable Network Graphics),dll

Syntax:

<img src=”nama file gamabr” |atribute lain|”>

TAG Keterangan

SRC Merujuk URL atau direktori file gambar

ALIGN Middle,Top, bottom, digunakan untuk menentukan

posisi image pada document

Left, right, center, digunakan untuk menentukan

posisi image pada document

HEIGHT Tinggi gambar dalam pixel

Atribut Lain Mengatur format lain hspace, vspace, border, width

7

Contoh, Buat 3 gambar dengan format jpg, beri nama r1,r2 dan r3 dan pastikan

latgambar.html berada dalam satu folder dengan gambar tersebut, kemudian ketik tag

berikut

Latgambar.html Output

<body>

<p>Gambar Tanpa Format</p>

<img src="r1.jpg" height="100" />

<p>Gambar Dengan Format hspace</p>

<img src="r2.jpg" height="100" hspace="100" />

<p>Gambar Dengan Border</p>

<img src="r3.jpg" border="2" height="100" />

</body>

Keterangan:

Src berarti memanggil nama file

Height berarti menentukan panjang/

tinggi gambar

Hspace berarti mengatur jarak gambar

dari tepi kiri

8

1

Pertemuann 4,5

FRAME dan TABEL

Tujuan:

Mampu memahami dan menggunakan tag HTML dengan format frame dan table, serta mampu

membuat content website dengan penerapan table dan frame.

Alat dan Bahan:


Materi:

1. Frame

Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-

masing bagian terdiri dari dokumen HTML tersendiri.

Tag Frameset

Rows Membuat frame secara mendatar (baris)

sekaligus mendefinisikan lebar masing-

masing frame

Cols Membuat frame secara vertikal (kolom)

sekaligus mendefinisikan labar

masing-masing

Bordercolor Mendefinisikan warna bingkai frame

Untuk mendefinisikan lebar frame pada atribut ROWS dan COLS ada tiga cara yang dapat

digunakan, yaitu dengan nilai tetap, nilai persentase, dan nilai proporsional. Misalnya membuat

tiga buah frame berikut ini

Dengan nilai tetap

<FRAMESET ROWS=”100,200,500”>

Dengan nilai tetap, frame pertama ukuran 200, kedua dengan ukuran 200 dan

ketiga dengan 500, setiap frame didefinisikan dalam ukuran pixel. Cara ini kurang

baik karena jika resolusi monitor user tidak sama dengan resolusi monitor pada

saat perancangan frame, maka frame yang terbentuk akan menjadi kurang tepat.

Dengan nilai persentase

<FRAMESET COLS=”25%,50%,25%”>

Dengan nilai persentase, lebar setiap frame didefinisikan sebagai persentase dari

lebar jendela browser sehingga resolusi monitor tidak akan berpengaruh.

Dengan nilai proporsional

2

<FRAMESET ROWS=” *,2*,3*”>

Dengan nilai proporsional, lebar setiap frame juga didefinisikan sebagai

persentase dari lebar jendela browser, hanya saja pembacaannya agak berbeda.

Misalnya nilai proporsionalnya adalah “*,2*,*”, jumlah bintang seluruhnya adalah

1+2+1=4, frame pertama akan memiliki lebar ¼ dari jendela browser, frame

kedua 2/4 atau ½ dari jendela browser, dan frame ketiga ¼ dari jendela browser.

Tag Frame

SRC Menentukan nama file HTML yang digunakan

sebagai isi frame

Marginheight Menentukan batas atas dan bawah antara

dokumen dengan bingkai

dalam pixel

Marginwidth Menentukan batas kiri dan kanan antara

dokumen dengan bingkai

dalam pixel

Scrooling Menentukan apakah frame dapat memiliki scroll

bar. Nilainya adalah

YES, NO, AUTO

Noresize Jika atribut ini disebutkan, frame tidak dapat

diubah ukurannya

Name Mendefinisikan nama dari objek frame. Nama ini

dapat digunakan

sebagai tujuan sebuah link

Border Menentukan ukuran bingkai frame

Tag Noframe, digunakan untuk menampilkan sebuah alternatif dokumen jika browser

tidak mendukung penggunaan frame. Sebuah frame dapat didefinisikan di dalam frame

lain.

Contoh:

Judul.html

Menu.html

3

latgambar.html

latframe.html Output

</head>

<frameset cols="40%,*">

<frame src="latgambar.html" />

<frameset rows="25%,*">

<frame src="judul.html" />

<frame src="menu.html" />

</frameset>

</frameset>

</html>

Keterangan

<Frameset cols=”40%,*”> artinya membagi halaman menjadi 2 kolom, kolom pertama

dengan ukuran 40%, sedangkan * menyatakan sisa kolom yaitu 60%, boleh juga syntax

diganti menjadi <frameset cols=”40%,60%”>

<frame src=”latgambar.html”> artinya kolom pertama menampilkan halaman

latgambar.html

<frameset rows=”25%,*”> artinya kolom kedua dibagi 2 baris, baris pertama dengan

ukuran 250%, sedangkan * menyatakan sisa baris yaitu 75%, boleh juga syntax diganti

menjadi <frameset rows=”25%,75%”>

<frame src=”judul.html:> adalah menampilkan halaman judul pada kolom ke 2 baris

pertama

<frame src=”menu.html:> adalah menampilkan halaman menu pada kolom ke 2 baris

kedua

4

2. Tabel

HTML menyediakan tag-tag untuk membuat table dalam menyajikan data berbentuk baris

dan kolom, beberapa tag dalam table sebagai berikut :

Tag <TABLE> : untuk mendefinisikan sebuah tebel

Tag <TR> : untuk mendefinisikan baris tabel

Tag <TH> : untuk mendefinisikan judul tiap kolom atau baris

Tag <TD> : untuk mendefinisikan isi tiap kolom

Syntax:

<table>

<tr>

<td>Baris 1 Kolom1 </td>

<td>Baris 1 Kolom 2 </td>

</tr>

<tr>

<td>Baris 2 Kolom1 </td>

<td>Baris 2 Kolom 2</td>

</tr>

</table>

Atribut untuk tag TABLE sebagai berikut :

Align Mengatur posisi horizontal table

Background Menentukan gambar sebgai background halaman

Bgcolor Menentukan warna latar belakang halaman

Border Menentukan ketebalan bingkai table

Bordercolor Mengatur warna bingkai table

Bordercolorlight Mengatur warna depan bingkai tabel

Bordercolordark Mengatur warna bayangan bingkai

Cellspacing Mengatur jarak spasi sel

Cellpadding Mengatur jarak isi sel dengan bingkai

Height Mengatur tinggi table

Width Mengatur lebar table

Valign Menentukan posisi vertikal isi teks dalam sel

Sedangkan atribut tag <TD> adalah :

ALIGN Posisi horizontal teks dalam sel

BACKGROUND Menentukan gambar latar belakang sel

BGCOLOR Menentukan warna latar belakang sel

BORDER Menentukan tebal bingkai sel

BORDERCOLOR Menentukan warna bingkai sel

BORDERCOLORLIGHT Menentukan warna depan bingkai sel

5

BORDERCOLORDARK Menentukan warna bayangan bingkai sel

COLSPAN Menentukan jumlah kolom yang digabung

HEIGHT Menentukan tinggi sel

NOWRAP Menentukan teks agar tetap satu baris

ROWSPAN Menentukan lebar table

VALIGN Menentukan posisi vertikal teks dalam sel

Contoh

Lattabel.html

<body>

<h2 align="center">Daftar Mahasiswa</h2>

<table border="1">

<tr bgcolor="#999999">

<td width="100" align="center" rowspan="2">Nama Mahasiswa</td>

<td width="200" align="center" rowspan="2">Jurusan</td>

<td width="100" align="center" colspan="2">Nilai</td>

<td width="100" align="center" rowspan="2">Nilai Akhir</td>

</tr>

<tr bgcolor="#999999">

<td width="100" align="center">UTS</td>

<td width="100" align="center">UAS</td>

</tr>

<tr>

<td>Paijio</td>

<td>TIK</td>

<td>80</td>

<td>75</td>

<td>B</td>

</tr>

<tr>

<td>Karsono</td>

<td>SI</td>

<td>85</td>

<td>90</td>

<td>A</td>

</tr>

</table>

</body>

Output

1

Pertemuan 6,7

Form dan CSS

Tujuan:

Memahami struktur form dan dasar pemrograman CSS dan mampu membuat content website

sederhana dengan mengggunakan form dan efek CSS

Alat dan Bahan:


Materi:

1. Form

Form adalah sebuah fasilitas untuk menerima input dari keyboard atau pengunjung, dengan

tujuan agar pengunjung dapat berintertaksi dengan system. Form atau daftar isian

memungkinkan untuk menerima informasi dari user dan kemudian diolah. Umumnya

pengolahan form dilakukan pada server dengan menjalankan script yang bersifat server-side.

Untuk membuat sebuah form, secara umum tag-tag yang diperlukan adalah :

Tag <FORM>

Tag <TEXTAREA>

Tag <SELECT>

Tag <INPUT>

Syntax:

<form action=”Post|Get” method=”namafile”>

…..

….

….

</form>

Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah form. Tag ini

mempunyai dua atribut, yaitu METHOD dan ACTION. Untuk mendapatkan hasil yang sempurna

sebaiknya kombinasikan dengan Table agar terstruktur sesuai dengan baris dan kolom.

METHOD Menentukan bagaimana data akan di kirim ke server.

GET – data akan di kirim dengan menggunakan query string

pada URL.

POST – data akan di kirim ke server sebagai block data ke

script.

Syntax:

2

METHOD=”POST|GET”

ACTION Menentukan lokasi script yang akan memproses data dari

form

Syntax:

ACTION=”URL”

Tag <TEXTAREA>

Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris.

Syntax:

<textarea name="nama" cols="jml kolom" rows="jml baris"></textarea>

Tag ini mempunyai beberapa atribut, yaitu :

NAME Mendefinisikan nama objek textarea

ROWS Menentukan jumlah baris textarea

COLS Menentukan lebar textarea

Tag <SELECT>

Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan.

Syntax:

<select name="nama" size="jlh tampil">

<option value="Nama Yang Akan Dikirim">nama Yang Ditampilkan</option>

</select>

Tag ini memiliki beberapa atribut, yaitu :

NAME Mendefinisikan nama dari objek select

SIZE Menentukan berapa pilhan yang akan

ditampilkan. Jika atribut ini tidak disertakan atau

diberi nilai 1, pilihan akan ditampilkan sebagai

dropdown list. Jika diberi nilai 2 atau lebih,

pilihan akan ditampilkan sebagai scroll box. Jika

nilai SIZE lebih besar dari jumlah pilihan yang

ada pada <SELECT>, pilihan kosong akan

ditambahkan. Jika user memilih pilihan ini maka

nilainya adalah kosong.

MULTIPLE Mengizinkan untuk memilih lebih dari satu

Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>. Tag <OPTION>

sendiri mempunyai dua atribut yaitu VALUE yang digunakan untuk memberi nama item pilihan

dan SELECTED yang menunjukkan pilihan yang terpilih secara deafult. Tag <OPTION> bisa tidak

perlu ditutup dengan </OPTION>.

Tag <INPUT>

3

Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk

meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain.

Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :

NAME Mendefinisikan nama dari objek input. Atribut ini

harus dituliskan kecuali untuk tipe submit dan

clear

MAXLENGTH Menentukan jumlah maksimum karakter yang

dapat dimasukkan pada kotak teks

VALUE Untuk kotak teks, menentukan teks yang tertulis.

Untuk check box atau radio, menentukan nilai

item yang dipilih. Untuk Submit dan Reset,

menentukan teks yang tertulis pada tombol

TEXT digunakan untuk membuat kotak teks

CHECKED Hanya digunakan untuk check box atau radio.

Menentukan pilihan yang terpilih secara default.

PASSWORD untuk membuat kotak teks, tetapi semua karakter

akan ditampilkan dengan tanda *

CHECK BOX digunakan untuk membuat suatu daftar pilihan

yang dapat dipilih lebih dari satu

RADIO digunakan untuk membuat suatu daftar pilihan

yang hanya dapat dipilih satu saja

RESET digunakan untuk membuat tombol yang

fungsinya untuk menghapus semua isian form

yang telah diberikan

SUBMIT digunakan untuk membuat tombol yang

fungsinya untuk mengirimkan data form agar

diolah

TYPE Menentukan tipe input yang dibuat

latform.html

4

<body>

<h2 align="center">Form Pendaftaran</h2>

<table border="1" bgcolor="#00FF00">

<form method="post" action="proses.php">

<tr>

<td>Nama</td>

<td width="200"><input type="text" name="nama" size="10" /></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td><select name="jk" size="1">

<option value="Laki-laki">Laki-laki</option>

<option value="Perempuan">Perempuan</option>

</select></td>

</tr>

<tr>

<td>Agama</td>

<td>

<input type="radio" name="hobby" value="Islam">Islam</option><br />

<input type="radio" name="hobby" value="Islam">Katholik</option><br />

<input type="radio" name="hobby" value="Islam">Protestan</option><br />

<input type="radio" name="hobby" value="Islam">Hindu</option><br />

<input type="radio" name="hobby" value="Islam">Budha</option>

</td>

</tr>

<tr>

<td>Hobby</td>

<td><input type="checkbox" name="hobby" value="Browsing" />Browsing<br />

<input type="checkbox" name="hobby" value="Browsing" />Game<br />

<input type="checkbox" name="hobby" value="Browsing" />Olah Raga

</td>

</tr>

<tr>

<td>Alamat</td>

<td><textarea name="alamat" cols="20" rows="5"></textarea></td>

</tr>

<tr>

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

<td><input type="reset" value="Batal" /></td>

</tr>

</form>

</table>

</body>

Keterangan

Diawali denga form kemudian diikuti metode pengiriman POST, dan action proses.php,

artinya semua data yang diinput di form akan diproses oleh file proses.php. Selanjutnya

membuat table yang tujuannnya agar penempatan objek-objek form tersusun rapi

dalam bentuk baris dan kolom

Output

5

LATIHAN

Tuliskan tag HTML untuk menampilkan hasil di bawah

6

CSS

1. Pengantar CSS

CSS singkatan dari Cascading Style Sheet yaitu dokumen yang digunakan untuk melakukan

pengaturan halaman web. Menggunakan CSS tidak memerlukan perangkat lunak tertentu

karena merupakan script yang telah embeded dengan HTML. Cukup menggunakan aplikasi

seperti notepad atau editor lainnya sudah mampu menciptakan script CSS. CSS merupakan

feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan

suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan

kelebihan tersendiri.

Style sheet berfungsi untuk mengontrol dan memanage style-style yang ada. Style sheet

mendeskripsikan bagaimana tampilan document HTML di layar, juga bisa disebut sebagai

template document HTML yang menggunakannya, selain itu juga bisa membuat efek-efek

sepsial pada web dengan menggunakan style sheet. Sebagai contoh membuat style sheet yang

mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag

<P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih

banyak lagi yang bisa dilakukan dengan style sheet.

Keuntungan dengan menggunakan CSS, yaitu

Ukuran file lebih kecil

Load file lebih cepat

Lebih mudah untuk mengontrol dan merubah tampilan web, dll

a. Ketentuan Dasar CSS

Setiap Style Rule /perintah CSS, terdiri dari dua elemen dasar yaitu :

"selector" dan "declaration"

"selector" biasanya adalah tag HTML, sedangkan declaration adalah satu atau

beberapa perintah/nilai dari css yang menunjukkan type bentuk yang

diaplikasikan pada selector.

Declaration di tandai dengan kurung kurawal, dan perintah/nilai css yang

berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma

b. Penulisan syntax CSS

Secara umum penulisan syntax CSS terdiri dari 2 jenis yaitu Internat style sheet dan

External style sheet

1. External Style Sheet

Yang dimaksud dengan external style sheet adalah antara file document dengan css

terpisah atau berbeda file

7

Syntax:

<link rel=”stylesheet” type=”text/css” href=”filecss.css”>

Keterangan

Atribut Keterangan

link Merupakan tag pembuka diakhiri dengan tanda “>

rel=“stylesheet” Menerangkan halaman ini akan dikenai efek style

sheet

type=“text/css” File yang dipanggil berupa css

href=“filecss.css” Alamat dokumen stylesheet yang dipanggil

Atribut CSS Pengaturan Halaman

Properties Value Keterangan

Background-image url Lokasi gambar

Background-repeat Repeat

Repeat-x

Repeat-y

No-repeat

Diulang penuh pada halaman

Diulang pada sumbu x

Diulang pad sumbu y

Hanya tampil 1 gambar saja

Background-position Top left

Top center

Top right

Center left

Center center

Center right

Bottom left

Bottom center

Bottom right

Posisi atas halaman

Posisi tengah halaman

Posisi atas kanan halaman

Posisi tengah kiri halaman

Center halaman

Posisi tengah kanan halaman

Posisi bawah kiri halaman

Posisi bawah tengah halaman

Posisi bawah kanan halaman

Atribut CSS Pengaturan Text

Properties Value Keterangan

Color Red,green,blue,dst Warna font

Letter-spacing Normal

length

Pengaturan spasi standard

Pengaturan spasi satuan cm,pixel

Text-align Left

Right

Perataan rata kiri text

Perataan rata kanan text

8

Center

Justify

Perataan rata tengah text

Perataan rata kiri kanan text

Text-decoration None

Underline

Overline

Line-thorought

Blink

Bentuk standard

Garis bawah

Garis atas

Text coret

Text berkedip

Text-indent Length

%

Indentasi dengan cm,pixel

Indentasi dengan ukuran persen

Text-transform Capitalize

Uppercase

Lowercase

None

Huruf besar

Awal huruf Huruf besar

Huruf kecil

Standard

Font-family Arial,comic sans,dst Jenis huruf

Font-size Small

Medium

Large

length

%

Ukuran kecil

Ukuran sedang

Ukuran besar

Ukuran font satuan pt,pixel

Ukuran dengan persentase

Font-style Normal

Italic

Oblique

Standard

Cetak miring

Font-weight Normal

bold

Ketebalan huruf standard

Cetak tebal

Contoh:

Filecss.css

body

{

background:#00FF00;

font:"Courier New", Courier, monospace;

font-size:14px;

}

latexternal.html

</head>

<link rel="stylesheet" type="text/css"

href="filecss.css" />

<body>

Ini Contoh External Style Sheet

</body>

Output

9

Keterangan

Dengan external CSS, terlebih dahulu dibuat filecss.css misalkan untuk menentukan background

hijau, jenis font arial dan ukuran font 14 pixel, kemudian pada file utama yaitu latexternal.html

coding diawali dengan tag link rel bertujuan untuk memanggil file css(filecss.css), dan bila kita

lihat hasilnya secara otomatis latexternal.html akan dikenai efek CSS dengan latar belakang

hijau dan semua efek CSS yang telah ditentukan sebelumnya

2. Internal Style Sheet

Syntax:

<style type=“text/css”>

…definisi style…

</style>

Beberap jenis penulisan internal style sheet sebagai berikut

Selector untuk merubah body

Contoh:

latselector.html

</head>

<style type="text/css">

body

{

font-family:"Times New Roman", Times, serif;

font-size:16px;

color:#FF0000;

}

</style>

<body>

Contoh penggunaan selector merubah body secara otomatis<br />

Menggunakan jenis huruf Times New Roman<br />

Besar huruf 16 pixel dan berwarna merah

</body>

Output

Keterangan

Secara otomatis content nya berubah sesuai dengan format css, karena nama selector css nya

menggunakan nama body

Selector bebas

Contoh:

10

latselectorbebas.html

</head>


bebas

{

font-family:"Times New Roman", Times, serif;

text-decoration:underline;

color:#FF0000;

}

</style>

<body>

Ini tidak pakai selector bebas<br />

<bebas>Ini pakai Selector bebas Menggunakan jenis huruf Times New Roman<br />

Dan cetak miring dan berwarna merah</bebas>

</body>

Output

Keterangan

Baris pertama tidak dikenai efek CSS berbeda dengan hasil latselector, sedangkan baris kedua

dan ketiga dikenai efek CSS, karena baris kedua(lihat coding diatas) diawali dengan

selector(<bebas>)

Selector Dengan Class

Digunakan untuk mengelompokkan beberapa elemen agar memiliki style sama.

Penggunaan selector class diawali dengan titik(.kelas), dan untuk pemanggilan selector

diawalai dengan class(class=”kelas’).

Contoh:

latselectorclass.html

</head>


.kelas

{

font-family:"Courier New", Courier, monospace;

text-align:center;

color:#FF0000;

}

</style>

<body>

<p class="kelas">Ini dikenai selector pakai kelas

Menggunakan jenis huruf Courier New

Rata Tengah dan berwarna merah</p>

<p>Ini tidak dikenai efek CSS karena paragraf ini

tidak disertakan class kelas</p>

</body>

Output

11

Keterangan

Semua tulisan di paragrap pertama dikenai efek css karena paragraph tersebut memanggil

class=”kelas”(<p class=”kelas”>), sedangkan paragraph kedua tidak dikenai efek

Selector ID

Penggunaan selector ID diawali dengan symbol #(pagar)

Contoh:

latselectorid.html

</head>


.pakaiID

{

font-family:"Courier New", Courier, monospace;;

font-style:italic;

text-align:center;

color:#FF0000;

}

</style>

<body>

<h4 id="pakaiID">

Menggunakan selector ID

Menggunakan jenis huruf Courier New

Rata Tengah,cetak miring dan berwarna merah</p>

</body>

Output

Memformat Halaman Web

Contoh:

Latfhalaman.html


body

{

margin-left:1 cm;

margin-right:2 cm;

margin-top:1 cm;

margin-bottom:1 cm;

background-color:#99FF33;

}

</style>

<body>

Format halaman website dengan batas kiri 1

cm, batas kanan 2 cm, batas atas 1 cm dan

batas bawah 1 cm, background warna hijau

</body>

Output:

12

c. Layout Dengan CSS

Membuat tampilan website lebih menarik dan halaman website lebih terstruktur

dengan memanfaatkan CSS. Dengan CSS, tidak membutuhkan tabel dalam menata

layout. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga

lebih meminimalisasi jumlah byte file. Apabila menggunakan tabel untuk mendesain

layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran byte file dan

akibatnya loading web pun membutuhkan waktu yang lebih lama. Untuk membuat

layout dengan CSS hal terpenting yang harus dilakukan adalah membagi elemen

halaman ke dalam division-division tertentu.

Contoh:

<body>

<div id="header">

<h2>Selamat Datang di Website Kami</h2>

</div>

<div id="navigasi">

<h3>Menu Navigasi</h3>

<ul>

<li><a href="beranda.htm">Beranda</a></li>

<li><a href="krs.htm">KRS</a></li>

<li><a href="krs.htm">KHS</a></li>

<li><a href="daftar.htm">Daftar</a></li>

</ul>

</div>

<div id="isi">

<img src="r1.jpg" height="160" width="250" />

<p>Ini adalah bagian isi. Membuat tampilan website lebih menarik dan halaman website lebih terstruktur dengan memanfaatkan CSS. Dengan

CSS, tidak membutuhkan tabel dalam menata layout. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih

meminimalisasi jumlah byte file

</p>

<p>Ini adalah bagian isi. Apabila menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran

byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama.

</p>

</div>

<div id="footer">

<p>Copyright © 2013 by Mr. B</p>

</div>

</body>

13

Berikut didesign dengan menggunakan layout sbb:

Layout di atas terdiri dari 4 bagian atau sel, agar lebih mudah sebaiknya untuk nama id

pada masing-masing bagian diberi nama sesuai desain supaya mudah dipahami. Untuk yang

pertama sel untuk bagian header. Style untuk bagian header dimisalkan.

#header {

padding:10px; /* jarak teks dari garis kotak */

border:1px solid #000000; /* membuat garis tepi 1 pixel jenis garis solid dan warna hitam */

background-color:#FFFFCC /* membuat warna latar */

}

Padding 10 px artinya jarak dari garis ke text Selamat adalah 10 px, dan garis bingkai

solid dan warna hitam, jika solid diganti dengan dashed maka maka garis bingkai menjadi

terputus-putus . Background adalah #FFFFCC warna latar belakang bingkai. Header diatas

tambahkan pada tag css sebelumnya

Output:

14

Sel berikutnya dalah Footer, tambahkan tag nya menjadi

<style type="text/css">#header {




}

#footer {

padding:10px;

border:1px solid #000000;

background-color:#FFCCFF;

}

</style>

Output:

Begitu juga dengan sel isi dengan menambahkan padding, border dan background.

Berikutnya untuk navigasi, sehingga tag css menjadi

15


#header {




}

#footer {

padding:10px;



}

#navigasi {

float:right;

padding:10px;


background:#FF99FF;

}

</style>

Untuk sel navigasi ada penambahan float, valuenya boleh diganti deganti dengan

left, silahkan coba dan liat sendiri apa efek dan posisinya dengan merubah value left

misalnya pada float, hasilnya sebagai berikut

Output:

Sel isi dengan navigator terjadi tumpang tindih, maka perlu pengaturan lebar dan

pengaturan jarak agar isi sel berada pada sel masing-masing.


#header {




}

#footer {

padding:10px;



}

#navigasi {

float:right;

padding:10px;


background:#FF99FF;

margin-top: 10px;

}

#isi {

width: 830px;

margin-top: 10px;

margin-bottom:10px;

padding:10px;


}

</style>

16

Sel isi dengan menambahkan width, yang lebarnya sesuaikan sehinggan tidak

mengenai sel navigasi dan tambahkan margin top untuk mengatur jarak dari tepi atas

terhadap isi sel, hasilnya sbb

Output:

Sampai tahap ini semua bagian sudah berada pada sel masing-masing, berikut

mengatur sel isi agar gambar menyatu dengan paragraph, artinya bagaimana

menampilkan paragraph tepat pada sisi gambar, sehingga space tidak kosong. Dalam hal

ini perlu menambahkan class untuk gambar, sehingga setiap menampilkan gambar

cukup dengan memanggil class maka secara otomatis space pada gambar akan terisi

dengan paragraph. Tambahkan class berikut

.gambar {

float: left;

margin-top: 0px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 0px;

}

Pada class gambar nilai float adalah left agar

gambar ditampilkan di sebelah kiri. Serta

pemgaturan margin, margin top untuk menentukan

jarak teks terhadap bagian atas gambar, begitu juga

dengan right, bottom dan left yang fungsinya untuk

menentukan jarak teks terhadap gambar. Kemudian

tambahkan pada gambar

<img src="r1.jpg" height="160" width="250"

class="gambar" />, Tag akhirnya sbb

<style type="text/css">#header {

padding:10px;


background-color:#FFFFCC;

}

#footer {

padding:10px;



}

#navigasi {

float:right;

padding:10px;


background:#FF99FF;

margin-top: 10px;

}

#isi {

width: 830px;

margin-top: 10px;

margin-bottom:10px;

padding:10px;


}

.gambar {

float: left;

margin-top: 0px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 0px;

}

</style>

17

Output:

LATIHAN

Dengan menggunakan css, designlah web dengan tampilan berikut ini

2.

3.

18

BAB IV

JAVASCRIPT

I. Pengantar JavaScript

Javascript berbeda dengan bahasa Java dan merupakan dua bahasa yang berbeda.

Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode

Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Dengan adanya bahasa javascript, kemampuan dokumen HTML menjadi semakin luas.

Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi

masukan pada formulir sebelum formulir dikirimkan ke server.

JavaScript merupakan bahasa pemrograman yang "sederhana" karena tidak bisa

digunakan untuk membuat suatu aplikasi atau pun applet. JavaScript merupakan sebuah

bahasa scripting yang dikembangkan oleh Netscape. Dengan JavaScript bisa dengan mudah

membuat sebuah halaman web yang interaktif. JavaScript merupakan client side scripting

yakni pemrosesan statement disisi client (browser). Oleh karena itu browser sangat

berpengaruh

Kemampuan javascript sebagai berikut:

Menciptakan halaman web yang lebih interaktif dan menarik.

Dapat memberikan text/content yang dinamis kedalam halaman HTML.

Dapat memberikan reaksi tertentu pada suatu event.

JavaScript bisa digunakan untuk validasi data pada form HTML sebelum

dikirim ke server. Contoh pada validasi e-mail.

Mendeteksi banyaknya pengunjung pada browser.

JavaScript juga sering digunakan sebagai trik, misalnya memberikan efek

mouseover pada suatu image atau link. Dengan efek ini, suatu gambar dapat

berubah ketika mouse didekatkan ke gambar tersebut dan masih banyak

lagi.

Ada beberapa hal penting dalam JavaScript yaitu :

1. Menggunakan blok awal "{" dan blok akhir "}".

2. Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan

huruf besar dan huruf kecil.

3. Extension umumnya menggunakan "*.js".

4. Setiap statement dapat diakhiri dengan ;

5. Jika tidak didukung dalam browser versi lama, Scriptnya dapat disembunyikan diantara

tag "".

6. Jika program dalam satu baris terlalu panjang dapat disambung ke baris berikut dengan

karakter "\".

19

II. Struktur JavaScript

Struktur dari JavaScript adalah sbb :

<SCRIPT TYPE = ”Text/JavaScript”>

…….Penulisan kode javascript……

</SCRIPT>

Keterangan :

Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali

JavaScript maka browser akan memperlakukannya sebagai komentar sehingga

tidak ditampilkan pada jendela browser.

a. Variable

Nama variable terdiri dari letters, digits, dan underscores, diawali dengan letter, Nama

variables adalah case-sensitive

Contoh:latvar.html

<body>

<script type="text/javascript">

var a,b,usia;

a="Nama:";

b="Richard";

usia=3;

document.write(a);

document.write(b);

document.write("Usia:"+usia+"Tahun");

</script>

</body>

Output:

b. Operator

Operator standard dan statement kontrol pada C++/Java sama seperti pada JavaScript

• +, -, *, /, %, ++, --, …

• ==, !=, <, >, <=, >=

• &&, ||, !,===,!==

Latoperator.html

20

<body>


var a,b,tambah,kurang,kali,bagi,sisabagi;

a=6;

b=3;

tambah=a+b;

kurang=a-b;

kali=a*b;

bagi=a/b;

sisabagi=a%b;

document.write("Hasil Tambah:"+tambah+"<br>");

document.write("Hasil Pengurangan:"+kurang+"<br>");

document.write("Hasil Perkalian:"+kali+"<br>");

document.write("Hasil Bagi:"+bagi+"<br>");

document.write("Hasil MOD:"+sisabagi+"<br>");

</script>

</body>

Output:

c. Statement Kontrol

Statement IF

Syntax

if (condition) {

statements

}

else {

else statements

}

Lat_if.html

<body>


var nilai;

nilai=80;

if(nilai>=80)

document.write("Nilai A");

else

document.write("Bukan Nilai A");

</script>

</body>

Output:

21

d. Switch

Syntax

Switch(kondisi)

Case kondisi : statements;

Default: statements;

Lat_case.html

<body>


var nilai;

nilai=80;

switch(nilai)

{

case 80:


break;

default:


break;

}

</script>

</body>

Output:

e. Perulangan (Looping)

For

Syntax

for ([initial expression]; [condition]; [update expression]) {

statements

}

Contoh:

Latfor.html

22

</head>


var a=0;;

for(a==1;a<=10;a++)

{

document.write(a);

}

</script>

<body>

</body>

</html>

Output:

Hasilnya adalah menampilkan bilangan mulai dari 0 sampai dengan 10, inisialisasi a=0

artinya nilai awal a=10, agar hasilnya memanjang ke bawah tinggal merubah

document.write(a+”<br>”).

While

Pada prinsipnya penggunaan while mirip dengan for, secara umum syntax while sbb:

while (condition) {

statements

}

Contoh:

Latwhile.html

</head>


var a=0;;

while(a<=10)

{

document.write(a);

a++;

}

</script>

<body>

</body>

</html>

Hasilnya sama dengan penggunaan for,semua statement dengan for, juga dapat

dilakukan dengan menggunakan statement while, tetapi tidak semua yang dapat

dilakukan dengan menggunakan while juga dapat dilakukan dengan for, perbedaan yang

umum adalah bahwa dengan menggunakan menggunakan for maka batas akhir harus

diketahui, sedangkan dengan while tidak harus diketahui batas akhirnya atau jumlah

perulangannya.

f. Function

Function adalah sub program yang bilamana dipanggil akan melaksanakan

perintah sesuai dengan syntax yang ada di dalamnya, function digunkana untuk

menghindari repetisi atau perulangan syntax dengan hasil yang sama, secara umum

penulisannnya:

Syntax:

23

function nama_fungsi(parameter)

{

Statement

…

…

}

Function diawali dengan function dan diikuti nama function kemudian parameter

variable. Penggunaan parameter bersifat opsional, boleh ada atau tidak ada, tergantung

nilai balik yang akan diproses oleh function.

Contoh tanpa parameter

Latfuntion.html

</head>


function nilai()

{

var nilai;

nilai=prompt("Masukkan Nilai Anda;");

document.write("Nilai Anda Adalah:"+nilai);

}

</script>

<body>

<form method="post">

<input type="button" value="Klik" onclick="nilai()" />

</form>

</body>

</html>

Output:

Contoh penggunaan dengan parameter

Latfunction1. Html

</head>


function na(tugas1,uts1,uas1)

{

var na;

na=(tugas1*20/100)+(uts1*30/

100)+(uas1*50/100);

return na;

}

var tugas=prompt("Masukkan Nilai Tugas:");

var uts=prompt("Masukkan Nilai UTS:");

var uas=prompt("Masukkan Nilai UAS:");

document.write("Nilai Akhir:"+na(tugas,uts,uas));

</script>

<body>

</body>

</html>

24

Ouput: Masukkan Nilai 90 sebanyak 3 kali maka hasilnya:

g. Objek

Sekilas tentang pemrograman yang berbasis objek, karena buku ini bukan focus

terhadap pemrograman objek maka akan dijelaskan sekilas sebagai pengantar. Objek

adalah semua hal yang ada di dunia nyata baik abstrak maupun konkrit. Contoh objek

konkrit adalah rumah, gedung, mobil, buku dll, sedangkan objek abstrak adalah mata

kuliah, jadwal kuliah dll.

Objek memiliki status/atribut(state) dan tingkah laku(behavior). Contoh objek

mobil. State:merek,warna dan bahan bakar, sedangkan tingkah laku atau behavior

adalah maju,mundur, dan menambah kecepatan. Pada prinsipnya status objek dalam

bentuk variable, sedangkan tingkah laku disimpan dalam bentuk method.

Kita akan membahas beberapa objek javascript

a. Objek Date

Method:

getDate() : mendapatkan tanggal dari objek date (1 sampai dengan 31)

getDay() : mendapatkan hari dalam seminggu (1 sampai dengan 7)

getFullYear() : menampilkan tahun

getHours() : menampilkan jam

getMilliseconds() :menampilkan milisekon

GetMinutes() :mendpatkan jumlah menit

getMonth() : mendapatkan bulan

getSeconds() :mendapatkan jumlah detik

getTime() :mendapatkan millisecond

25

contoh latobjek.html

</head>


var sekarang=new Date();

hari=sekarang.getDay();

if(hari == 1)

namahari="Senin";

else if(hari == 2)

namahari="Selasa";

else if(hari == 3)

namahari="Rabu";

else if(hari == 4)

namahari="Kamis";

else if(hari == 5)

namahari="Jumat";

else if(hari == 6)

namahari="Sabtu";

else if(hari == 7)

namahari="Minggu";

tgl=sekarang.getDate();

bln=sekarang.getMonth()+1;

thn=sekarang.getFullYear();

document.write("Sekarang adalah " +namahari+",Tanggal: "+tgl+",Bulan: "+bln+",Tahun: "+thn);

</script>

<body>

</body>

</html>

Outputnya adalah:

b. Objek Window

Merupakan objek yang terkait dengan window pada web browser, beberapa

property yang sering digunakan adalah size atau ukuran window browser, jenis browser

serta ukuran screen dll. Objek ini merupakan objek global artinya langsng memanggil

nama method atau property tanpa perlu mencantumkan script. Contoh penggunaan

alert(), method alert() adalah method dalam objek window, tetapi bisa langsung

digunakan tanpa menuliskan nama objek.

Contoh

Latobjekwindow.html

</head>


window.alert("Tampilan Pertama");

window.defaultStatus="Selamat Datang";

</script>

<body>

</body>

</html>

Outputnya

26

Output akan sama halnya dengan jika diubah (dengan menghilangkan window) dengan

coding berikut ini

</head>


alert("Tampilan Pertama");

defaultStatus="Selamat Datang";

</script>

<body>

</body>

</html>

i. Objek History

Objek history juga merupakan property objek window digunakan untuk

mengakses history(halam web yang dikunjugi sebelumnya) atau sama halnya dengan

penggunaan back dan forward pada web browser. Beberapa method yang termasuk

dalam dalam objekhistory adalah back(),forward()

Contoh

Latobjekhistory.html

</head>


function mundur()

{

back();

}

function maju()

{

forward();

}

</script>

<body>

<form>

<input type="button" value="Mundur"

onclick="mundur()" />

<input type="button" value="Maju"

onclick="maju()" />

<a href="latfor.html">Latihan For</a>

</form>

</body>

</html>

Outputnya

Juga bisa menyantumkan history.back() dan history.forward(), hasilnya sama saja,

selain metod diatas juga bisa menggunkan history.go(2) artinya sama dengan menekan

tombol forwar dua kali. Sedangkan gistory.go(-1) artinya sama dengan menekan

tombol back satu kali.

d. Objek Location

Objek location merupakan alat navigasi menuju web page yang dituju. Untuk

melakukan navigasi dengan objek ini terdapat method dan property yang dapat

digunakan yaitu

Location.replace(“halaman yang dituju”)

Location.href=”halaman yang dituju”

Perbedaan kedua method diatas adalah dengan replace maka halaman yang

sedang aktif akan dihapus dari data history dan diganti dengan halaman yang dituju,

27

sedangkan property href tidak akan menghapus data history halaman yang sedang aktif

dan menyimpan halaman yang dituju dalam history yang baru.

Contoh

Latobjeklocation.html

</head>


function nreplace()

{

window.location.replace("latfor.html");

}

function nhref()

{

window.location.href="latfor.html";

}

</script>

<body>

<form>

<input type="button" value="Replace" onclick="nreplace()" />

<input type="button" value="Href" onclick="nhref()" />

</form>

</body>

</html>

Output awal

Output dengan menekan tombol href

Perhatikan tombol back tetap aktif bisa digunakan untuk kembali ke halman

sebelumnya

Output dengan menekan tombol Replace

Perhatikan tombol back dan forward tetap aktif, tetapi tombol tersebut tidak berfungsi

karena halam sebelumnya telah terhapus dari histori

e. Objek Screen

Digunakan untuk mengetahui ukuran layar browser panjang dan lebar dengan

satuan pixel

Contoh

Latobjekscreen.html

28

</head>


function ukuranlayar()

{

var p,l;

p=screen.height;

l=screen.width;

document.write("Panjang Layar: "+p+" px"+"<br>");

document.write("Lebar Layar: "+l+" px");

}

</script>

<body>

<form>

<input type="button" value="Klik" onclick="ukuranlayar()" />

</form>

</body>

</html>

Output

Hasilnya akan menampilkan ukuran panjang dan lebar monitor yang anda gunakan

h. Form Pada Javascript

Penggunaan form pada javascrip sangat diperlukan, bilamana dibutuhkan operasi

aritmatika pada web maka form sebagai inputan sangatlah berperan, karena dengan

dengan tag html sendiri operasi aritmatika tidak bisa di handle. Beberapa komponen

yang sering dibunakan untuk memberikan input adalah textbox, combobox,radio

button dan check box.

Untuk menerima masukan dari form, maka bilaman data tersebut digunakan

untuk operasi aritmatika(penamahan, kali,bagi,kurang,akar, pangkat,mod) maka

terlebih dahulu dikonversi nilainya dengan menggunakan

parseFloat(nilai), atau parseInt(nilai)

langkah awal dengan membuat form input dan output, jangan lupa nama form dibuat

sebagai contoh nilai. form input dengan dengan 2 buah data dengan type textbox yaitu

dengan nama na dan nb, kemudian untuk output misalkan ada 2 yaitu untuk

menampung hasil penjumlahan dengan nama hasiltambah dan pengurangan dengan

nama hasilkurang. Berikutnya membuat tombol proses dengan type button, button

pertama untuk menampilkan hasil penjumlahan, perhatikan pada atribut onclick ada

tambah(), artinya bila mana tombol dklik maka akan memanggil fungsi tambah(),

dengan mengirimkan 2 buah data sebagai inputan an menampilkn hasil penjumlahan

pada text hasil yambah

29

<body>

<form name="nilai">

<table align="center">

<tr><td>Nilai a</td><td><input type="text" name="na" /></td></tr>

<tr><td>Nilai b</td><td><input type="text" name="nb" /></td></tr>

<tr><td><input type="button" value="+" onclick="tambah()" /></td>

<td><input type="button" value="-" onclick="kurang()" /></td></tr>

<tr><td>Hasil Penjumlahan</td><td><input type="text" name="hasiltambah" /></td></tr>

<tr><td>Hasil Pengurangan</td><td><input type="text" name="hasilkurang" /></td></tr>

</form>

</body>

Beikut kita lihat syntax pada javascript


function tambah()

{

var nilaia,nilab,nilaitambah;

nilaia=document.nilai.na.value;

nilaib=document.nilai.nb.value;

nilaia=parseInt(nilaia);

nilaib=parseInt(nilaib);

nilaitambah=nilaia+nilaib;

document.nilai.hasiltambah.value=nilaitambah;

}

</script>

Tombol tambah diklik berarti memanggil function tambah, pada function tambah semua variable

dideklarasikan ditandai dengan awal var,

Nilaia=document.nilai.na.value

Keterangan

Nilai berarti nama form

Na berarti nilai tetxt pada form yang akan ditampung oleh variable nilaia

Nilaia=parseInt(nilaia)

Keterangan

parseInt berarti mengkoversi nilaia menjadi integer, apabila nilaia tidak dirubah menjadi

integer maka hasilnya akan digabungkan, contoh 4+5 menjadi 45, dengan merubah ke integer

maka 4+5 menjadi 9. Berikutnya menambahkan function kurang, sehingga syntax lengkap

sebagai berikut:

30

</head>


function tambah()

{








}

function kurang()

{

var nilaia,nilab,nilaikurang;





nilaikurang=nilaia-nilaib;

document.nilai.hasilkurang.value=nilaikurang;

}

</script>

<body>

<form name="nilai">








</form>

</body>

</html>

Outputnya adalah

Selain evet onclick, juga anda bisa mencoba event handker yang lain seperti di bawah ini

No Event Keterangan

1 onclick Muncul ketika user

mengklik

elemen/komponen

2 ondblclick Muncul ketika user

mengklik ganda komponen

3 onmousedown Muncul ketika user

menekan tombol pada

mouse

4 onmousemove Muncul ketika user

menggerakan pointer

mouse

5 onkeydown Muncul ketika user

menekan sebuah tombol

31

pada keyboard

6 onkeypress Muncul ketika user

menekan tombol keyboard

dan akan terus muncul

sampai user melepas

tombol

dll

LATIHAN

1. Harga barang,besar cicilan dan lama cicilan diinput dari form, tampilkan jumlah pembayaran

cicilan dan jumlah sisa cicilan dari bulan awal sampai akhir

2. Harga dan jumlah barang diinput dari form, total=harga x jumlah, jika jumlah barang>=3 maka

diskon=total x 5%, total bayar=total-diskon

3. Tabungan awal, besar bunga dan lama menabung diinput dari form, dengan menggunakan

bunga majemuk atau bunga berbunga, tampilkan saldo awal,bunga, saldo akhir dari bulan awal

sampai bulan akhir

4. Penerimaan Polri Online, diterima jika perempuan dengan tinggi badan=165 s/d 175, berat

badan=tinggi badan-109, IPK>=3, pendidikan min D-III, usia=21 s/d 24 atau jika laki-laki dengan

tinggi badan=175 s/d 185, berat badan=tinggi badan-110, IPK>=3, pendidikan min D-III, usia=22

s/d 25, selesaikan dengan web base untuk menentukan diterima atau tidak

32

BAB V

PHP

I. Pengantar PHP

PHP adalah salah satu bahasa Server-side yang didesain khusus untuk aplikasi web. PHP

singkatan dari PHP Hypertext Preprocessor yang diciptakan oleh Rasmus Lerdorf, PHP dapat

disisipkan diantara bahasa HTML dan karena bahasa Server side berarti semua sintaks yang kita

berikan sepenuhnya dijalankan pada server, maka bahasa PHP akan dieksekusi di server,

sehingga yang dikirimkan ke browser adalah output dalam bentuk HTML dan kode PHP tidak

akan terlihat.

PHP digunakan untuk membangunkan aplikasi web yang dijalankan dengan

menggunakan Internet Browser seperti Internet Explorer dan Netscape, Mozilla, Google Crome

dll. PHP berinteraksi dengan database untuk membangun halaman web yang dinamik. Antara

pangkalan data/database yang boleh berinteraksi dengan PHP adalah MySQL, Postgresql,

Oracle, MS SQL, dan lain-lain. PHP mempunyai module atau API tertentu supaya dapat

berkomunikasi dengan pengkalan data tersebut. Agar PHP dapat berfungsi, maka dibutuhkan

pelayan web (web server) untuk digunakan, seperti Apache dan IIS, sering digunakan Apache

sebagai web server untuk PHP

PHP mempunyai kelebihan yaitu kompabilitasnya dengan berbagai macam jenis

database,dukungan dengan berbagai macam jenis sistem operasi. PHP lebih cocok dan umum

digunakan jika digabungkan dengan database mysql. Mysql dengan Php seakan-akan dua hal

yang tidak dapat dipisahkan. Tentunya untuk dapat menggunakan keduanya, dibutuhkan tingkat

kemampuan programming tertentu. Buku ini ditujukan bagi anda yang ingin mulai membangun

web dinamis dan mengembangkan aplikasi berbasis PHP Mysql.

Langkah untuk menjalankan dokumen php pada server apache :

1. Buat folder(contoh webku) dan tempatkan di folder apache/htdocs/

2. Simpan semua program(contoh coba.php) pada folder tersebut(webku)

3. Jalankan web server apache.

4. Buka browser dan ketikkan pada URL http://localhost/webku/coba.php

Aturan penulisan script php :

1. Script php diawali tag <? dan diakhiri dengan tag ?>

Contoh:

<?

echo("Bentuk Pertama");

?>

2. Script php diawali tag <?php dan diakhiri dengan tag ?>

Contoh:

33

<?php

echo("Bentuk Kedua");

?>

3. Script php diawali tag <script language=”php”> dan diakhiri dengan </script>

Contoh:

<script language="php">

echo("Bentuk Ketiga");

</script>

Penulisan tag php dengan html

Contoh:

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<?php

echo("Bentuk Penulisan Keempat");

?>

</body>

</html>

5. Menulis komentar

Contoh :

<?php

//Contoh Komentar Pertama

/* Contoh Komentar Kedua*/


?>

6. Setiap statement php diakhiri dengan tanda ( ;) titik koma.

II. Type Data Dan Variable

Type data adalah jenis data yang akan ditampung oleh suatu variable. Sedangkan variable

merupakan tempat untuk menampung data atau nilai.

Dalam php terdapat tipe data dasar yaitu:

Integer, untuk data yang berisi angka. Data tersebut dapat digunakan untuk

operasi matematika.

String, untuk data yang berisi karakter, tipe data ini tidak digunakan untuk

operasi matematika.

Array, untuk data yang berkelompok. Array memiliki nama variable yang sama.

Definisi lain dari array adalah kumpulan variable yang memiliki tipe data yang

sama.

i. Float/ double, untuk data yang berupa pecahan desimal. Untuk menangani

operasi matematika dengan nilai pecahan.

j. Objek, digunakan dengan statement fuction.

Aturan untuk pendeklarasian variable :

1. Suatu variable dinyatakan dengan tanda dollar ( $ ) dan diikuti nama variable.

34

2. Nama variable tidak boleh diawali dengan angka, harus dengan karakter,

setelahnya dapat diikuti dengan angka/underscore ( garis bawah).

3. Penamaan bersifat case sensitive atau variable membendakan huruf kecil dan

besar.

4. Deklarasi variable selalu diikuti dengan pemberian ( assignment) nilai dari

variable

5. tersebut. Jika sebuah variable belum memiliki nilai tidak perlu dideklarasikan

terlebih dahulu.

Contoh: lat1.php

<?php

echo("Menghitung Gaji Total<br>");

$gapok=2000000;

$tunjangan=500000;

$total=$gapok+$tunjangan;

echo("Total Gaji=$total");

?>

Output:

Keterangan:

3 buah variable yaitu gapok,tunjangan dan total. Dinyatakan dalam bentuk variable sehingga

diawali dengan tada dolar($)

III. STRUKTUR KONTROL

IF

Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat.

Cara penulisannya adalah sebagai berikut:

if (syarat)

{

statement

}

atau:

if (syarat)

{

statement

}

else

{

statement lain

}

atau:

35

if (syarat pertama)

{

statement pertama

}

elseif (syarat kedua)

{

statement kedua

}

else

{

statement lain

}

contoh:lat2.php

<?php

$x=100;

$y=150;

if($x>$y)

echo("X > Y");

elseif($Y>$X)

echo("Y > X");

else

echo("X = Y");

?>

Output:

Switch

digunakan untuk membandingkan suatu variable dengan beberapa nilai serta

menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan.

Struktur Switch adalah sebagai berikut:

switch (variable)

case nilai:

statement

case nilai:

statemant

case nilai:

statement

.

.

.

36

IV. Struktur Perulangan

While

While adalah memberikan perintah untuk menjalankan statement dibawahnya secara

berulang-ulang, selama syaratnya terpenuhi.

while (syarat)

{

statement

}

Contoh: lat3.php

<?php

$x=10;

while($x<=100)

{

echo($x."<br>");

$x+=10;

}

?>

Output:

Keterangan:

$x=10 : memberikan nilai awal x=10;

While($x<=100) : syarat yang harus dipenuhi yaitu hingga x bernilai <= 100

echo($x."<br>"):menampilkan nilai x yang diikuti dengan <br> artinya nilai x berikutnya

ditampilkan pada baris baru

For

Cara penulisan statement FOR adalah sebagai berikut:

for (ekspresi1; ekspresi2 ; ekspresi3)

statement

ekspresi1 menunjukkan nilai awal untuk suatu variable

ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemant

ekspresi3 menunjukkan pertambahan nilai untuk suatu variable

Contoh:lat4.php

37

<?php

$x=0;

for($x==0;$x<=10;$x++)

{

echo("Bilangan Genap: $x");

$x++;

echo("<br>");

}

?>

Output:

5. PHP dan MySQL

1

Pertemuan 9,10,11

JAVASCRIPT

Tujuan:

Memahami struktur dasar pemrograman Javascript dan mampu membuat content website

sederhana dengan mengggunakan bahasa pemrograman javascript khususnya dalam operasi

aritmatika.

Alat dan Bahan:


Materi:

I. Pengantar JavaScript

Javascript berbeda dengan bahasa Java dan merupakan dua bahasa yang berbeda.

Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode

Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Dengan adanya bahasa javascript, kemampuan dokumen HTML menjadi semakin luas.

Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi

masukan pada formulir sebelum formulir dikirimkan ke server.

JavaScript merupakan bahasa pemrograman yang "sederhana" karena tidak bisa

digunakan untuk membuat suatu aplikasi atau pun applet. JavaScript merupakan sebuah

bahasa scripting yang dikembangkan oleh Netscape. Dengan JavaScript bisa dengan mudah

membuat sebuah halaman web yang interaktif. JavaScript merupakan client side scripting

yakni pemrosesan statement disisi client (browser). Oleh karena itu browser sangat

berpengaruh

Kemampuan javascript sebagai berikut:

Menciptakan halaman web yang lebih interaktif dan menarik.

Dapat memberikan text/content yang dinamis kedalam halaman HTML.

Dapat memberikan reaksi tertentu pada suatu event.

JavaScript bisa digunakan untuk validasi data pada form HTML sebelum

dikirim ke server. Contoh pada validasi e-mail.

Mendeteksi banyaknya pengunjung pada browser.

JavaScript juga sering digunakan sebagai trik, misalnya memberikan efek

mouseover pada suatu image atau link. Dengan efek ini, suatu gambar dapat

berubah ketika mouse didekatkan ke gambar tersebut dan masih banyak

lagi.

2

Ada beberapa hal penting dalam JavaScript yaitu :

1. Menggunakan blok awal "{" dan blok akhir "}".

2. Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan

huruf besar dan huruf kecil.

3. Extension umumnya menggunakan "*.js".

4. Setiap statement dapat diakhiri dengan ;

5. Jika tidak didukung dalam browser versi lama, Scriptnya dapat disembunyikan diantara

tag "".

6. Jika program dalam satu baris terlalu panjang dapat disambung ke baris berikut dengan

karakter "\".

II. Struktur JavaScript

Struktur dari JavaScript adalah sbb :

<SCRIPT TYPE = ”Text/JavaScript”>

…….Penulisan kode javascript……

</SCRIPT>

Keterangan :

Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali

JavaScript maka browser akan memperlakukannya sebagai komentar sehingga

tidak ditampilkan pada jendela browser.

a. Variable

Nama variable terdiri dari letters, digits, dan underscores, diawali dengan letter, Nama

variables adalah case-sensitive

Contoh:latvar.html

<body>


var a,b,usia;

a="Nama:";

b="Richard";

usia=3;

document.write(a);

document.write(b);

document.write("Usia:"+usia+"Tahun");

</script>

</body>

Output:

3

b. Operator

Operator standard dan statement kontrol pada C++/Java sama seperti pada JavaScript

• +, -, *, /, %, ++, --, …

• ==, !=, <, >, <=, >=

• &&, ||, !,===,!==

Latoperator.html

<body>


var a,b,tambah,kurang,kali,bagi,sisabagi;

a=6;

b=3;

tambah=a+b;

kurang=a-b;

kali=a*b;

bagi=a/b;

sisabagi=a%b;

document.write("Hasil Tambah:"+tambah+"<br>");

document.write("Hasil Pengurangan:"+kurang+"<br>");

document.write("Hasil Perkalian:"+kali+"<br>");

document.write("Hasil Bagi:"+bagi+"<br>");

document.write("Hasil MOD:"+sisabagi+"<br>");

</script>

</body>

Output:

c. Statement Kontrol

Statement IF

Syntax

if (condition) {

statements

}

else {

else statements

}

Lat_if.html

4

<body>


var nilai;

nilai=80;

if(nilai>=80)


else


</script>

</body>

Output:

d. Switch

Syntax

Switch(kondisi)

Case kondisi : statements;

Default: statements;

Lat_case.html

<body>


var nilai;

nilai=80;

switch(nilai)

{

case 80:


break;

default:


break;

}

</script>

</body>

Output:

5

e. Perulangan (Looping)

For

Syntax

for ([initial expression]; [condition]; [update expression]) {

statements

}

Contoh:

Latfor.html

</head>


var a=0;;

for(a==1;a<=10;a++)

{

document.write(a);

}

</script>

<body>

</body>

</html>

Output:

Hasilnya adalah menampilkan bilangan mulai dari 0 sampai dengan 10, inisialisasi a=0

artinya nilai awal a=10, agar hasilnya memanjang ke bawah tinggal merubah

document.write(a+”<br>”).

While

Pada prinsipnya penggunaan while mirip dengan for, secara umum syntax while sbb:

while (condition) {

statements

}

Contoh:

Latwhile.html

</head>


var a=0;;

while(a<=10)

{

document.write(a);

a++;

}

</script>

<body>

</body>

</html>

Hasilnya sama dengan penggunaan for,semua statement dengan for, juga dapat

dilakukan dengan menggunakan statement while, tetapi tidak semua yang dapat

dilakukan dengan menggunakan while juga dapat dilakukan dengan for, perbedaan yang

umum adalah bahwa dengan menggunakan menggunakan for maka batas akhir harus

6

diketahui, sedangkan dengan while tidak harus diketahui batas akhirnya atau jumlah

perulangannya.

f. Function

Function adalah sub program yang bilamana dipanggil akan melaksanakan

perintah sesuai dengan syntax yang ada di dalamnya, function digunkana untuk

menghindari repetisi atau perulangan syntax dengan hasil yang sama, secara umum

penulisannnya:

Syntax:

function nama_fungsi(parameter)

{

Statement

…

…

}

Function diawali dengan function dan diikuti nama function kemudian parameter

variable. Penggunaan parameter bersifat opsional, boleh ada atau tidak ada, tergantung

nilai balik yang akan diproses oleh function.

Contoh tanpa parameter

Latfuntion.html

</head>


function nilai()

{

var nilai;

nilai=prompt("Masukkan Nilai Anda;");

document.write("Nilai Anda Adalah:"+nilai);

}

</script>

<body>

<form method="post">

<input type="button" value="Klik" onclick="nilai()" />

</form>

</body>

</html>

Output:

Contoh penggunaan dengan parameter

7

Latfunction1. Html

</head>


function na(tugas1,uts1,uas1)

{

var na;

na=(tugas1*20/100)+(uts1*30/

100)+(uas1*50/100);

return na;

}

var tugas=prompt("Masukkan Nilai Tugas:");

var uts=prompt("Masukkan Nilai UTS:");

var uas=prompt("Masukkan Nilai UAS:");

document.write("Nilai Akhir:"+na(tugas,uts,uas));

</script>

<body>

</body>

</html>

Ouput: Masukkan Nilai 90 sebanyak 3 kali maka hasilnya:

g. Objek

Sekilas tentang pemrograman yang berbasis objek, karena buku ini bukan focus

terhadap pemrograman objek maka akan dijelaskan sekilas sebagai pengantar. Objek

adalah semua hal yang ada di dunia nyata baik abstrak maupun konkrit. Contoh objek

konkrit adalah rumah, gedung, mobil, buku dll, sedangkan objek abstrak adalah mata

kuliah, jadwal kuliah dll.

Objek memiliki status/atribut(state) dan tingkah laku(behavior). Contoh objek

mobil. State:merek,warna dan bahan bakar, sedangkan tingkah laku atau behavior

adalah maju,mundur, dan menambah kecepatan. Pada prinsipnya status objek dalam

bentuk variable, sedangkan tingkah laku disimpan dalam bentuk method.

Kita akan membahas beberapa objek javascript

a. Objek Date

Method:

getDate() : mendapatkan tanggal dari objek date (1 sampai dengan 31)

getDay() : mendapatkan hari dalam seminggu (1 sampai dengan 7)

getFullYear() : menampilkan tahun

getHours() : menampilkan jam

getMilliseconds() :menampilkan milisekon

GetMinutes() :mendpatkan jumlah menit

getMonth() : mendapatkan bulan

getSeconds() :mendapatkan jumlah detik

getTime() :mendapatkan millisecond

8

contoh latobjek.html

</head>


var sekarang=new Date();

hari=sekarang.getDay();

if(hari == 1)

namahari="Senin";

else if(hari == 2)

namahari="Selasa";

else if(hari == 3)

namahari="Rabu";

else if(hari == 4)

namahari="Kamis";

else if(hari == 5)

namahari="Jumat";

else if(hari == 6)

namahari="Sabtu";

else if(hari == 7)

namahari="Minggu";

tgl=sekarang.getDate();

bln=sekarang.getMonth()+1;

thn=sekarang.getFullYear();

document.write("Sekarang adalah " +namahari+",Tanggal: "+tgl+",Bulan: "+bln+",Tahun: "+thn);

</script>

<body>

</body>

</html>

Outputnya adalah:

b. Objek Window

Merupakan objek yang terkait dengan window pada web browser, beberapa

property yang sering digunakan adalah size atau ukuran window browser, jenis browser

serta ukuran screen dll. Objek ini merupakan objek global artinya langsng memanggil

nama method atau property tanpa perlu mencantumkan script. Contoh penggunaan

alert(), method alert() adalah method dalam objek window, tetapi bisa langsung

digunakan tanpa menuliskan nama objek.

Contoh

Latobjekwindow.html

9

</head>


window.alert("Tampilan Pertama");

window.defaultStatus="Selamat Datang";

</script>

<body>

</body>

</html>

Outputnya

Output akan sama halnya dengan jika diubah (dengan menghilangkan window) dengan

coding berikut ini

</head>


alert("Tampilan Pertama");

defaultStatus="Selamat Datang";

</script>

<body>

</body>

</html>

i. Objek History

Objek history juga merupakan property objek window digunakan untuk

mengakses history(halam web yang dikunjugi sebelumnya) atau sama halnya dengan

penggunaan back dan forward pada web browser. Beberapa method yang termasuk

dalam dalam objekhistory adalah back(),forward()

Contoh

Latobjekhistory.html

</head>


function mundur()

{

back();

}

function maju()

{

forward();

}

</script>

<body>

<form>

<input type="button" value="Mundur"

onclick="mundur()" />

<input type="button" value="Maju"

onclick="maju()" />

<a href="latfor.html">Latihan For</a>

</form>

</body>

</html>

Outputnya

10

Juga bisa menyantumkan history.back() dan history.forward(), hasilnya sama saja,

selain metod diatas juga bisa menggunkan history.go(2) artinya sama dengan menekan

tombol forwar dua kali. Sedangkan gistory.go(-1) artinya sama dengan menekan

tombol back satu kali.

a. Objek Location

Objek location merupakan alat navigasi menuju web page yang dituju. Untuk

melakukan navigasi dengan objek ini terdapat method dan property yang dapat

digunakan yaitu

Location.replace(“halaman yang dituju”)

Location.href=”halaman yang dituju”

Perbedaan kedua method diatas adalah dengan replace maka halaman yang

sedang aktif akan dihapus dari data history dan diganti dengan halaman yang dituju,

sedangkan property href tidak akan menghapus data history halaman yang sedang aktif

dan menyimpan halaman yang dituju dalam history yang baru.

Contoh

Latobjeklocation.html

</head>


function nreplace()

{

window.location.replace("latfor.html");

}

function nhref()

{

window.location.href="latfor.html";

}

</script>

<body>

<form>

<input type="button" value="Replace" onclick="nreplace()" />

<input type="button" value="Href" onclick="nhref()" />

</form>

</body>

</html>

Output awal

Output dengan menekan tombol href

Perhatikan tombol back tetap aktif bisa digunakan untuk kembali ke halman

sebelumnya

Output dengan menekan tombol Replace

11

Perhatikan tombol back dan forward tetap aktif, tetapi tombol tersebut tidak berfungsi

karena halam sebelumnya telah terhapus dari histori

b. Objek Screen

Digunakan untuk mengetahui ukuran layar browser panjang dan lebar dengan

satuan pixel

Contoh

Latobjekscreen.html

</head>


function ukuranlayar()

{

var p,l;

p=screen.height;

l=screen.width;

document.write("Panjang Layar: "+p+" px"+"<br>");

document.write("Lebar Layar: "+l+" px");

}

</script>

<body>

<form>

<input type="button" value="Klik" onclick="ukuranlayar()" />

</form>

</body>

</html>

Output

Hasilnya akan menampilkan ukuran panjang dan lebar monitor yang anda gunakan

h. Form Pada Javascript

Penggunaan form pada javascrip sangat diperlukan, bilamana dibutuhkan operasi

aritmatika pada web maka form sebagai inputan sangatlah berperan, karena dengan

dengan tag html sendiri operasi aritmatika tidak bisa di handle. Beberapa komponen

yang sering dibunakan untuk memberikan input adalah textbox, combobox,radio

button dan check box.

Untuk menerima masukan dari form, maka bilaman data tersebut digunakan

untuk operasi aritmatika(penamahan, kali,bagi,kurang,akar, pangkat,mod) maka

terlebih dahulu dikonversi nilainya dengan menggunakan

parseFloat(nilai), atau parseInt(nilai)

langkah awal dengan membuat form input dan output, jangan lupa nama form dibuat

sebagai contoh nilai. form input dengan dengan 2 buah data dengan type textbox yaitu

dengan nama na dan nb, kemudian untuk output misalkan ada 2 yaitu untuk

menampung hasil penjumlahan dengan nama hasiltambah dan pengurangan dengan

nama hasilkurang. Berikutnya membuat tombol proses dengan type button, button

pertama untuk menampilkan hasil penjumlahan, perhatikan pada atribut onclick ada

tambah(), artinya bila mana tombol dklik maka akan memanggil fungsi tambah(),

12

dengan mengirimkan 2 buah data sebagai inputan an menampilkn hasil penjumlahan

pada text hasil yambah

<body>

<form name="nilai">








</form>

</body>

Beikut kita lihat syntax pada javascript


function tambah()

{








}

</script>

Tombol tambah diklik berarti memanggil function tambah, pada function tambah semua variable

dideklarasikan ditandai dengan awal var,

Nilaia=document.nilai.na.value

Keterangan

Nilai berarti nama form

Na berarti nilai tetxt pada form yang akan ditampung oleh variable nilaia

Nilaia=parseInt(nilaia)

Keterangan

parseInt berarti mengkoversi nilaia menjadi integer, apabila nilaia tidak dirubah menjadi

integer maka hasilnya akan digabungkan, contoh 4+5 menjadi 45, dengan merubah ke integer

maka 4+5 menjadi 9. Berikutnya menambahkan function kurang, sehingga syntax lengkap

sebagai berikut:

13

</head>


function tambah()

{








}

function kurang()

{

var nilaia,nilab,nilaikurang;





nilaikurang=nilaia-nilaib;

document.nilai.hasilkurang.value=nilaikurang;

}

</script>

<body>

<form name="nilai">








</form>

</body>

</html>

Outputnya adalah

Selain evet onclick, juga anda bisa mencoba event handker yang lain seperti di bawah ini

No Event Keterangan

1 onclick Muncul ketika user

mengklik

elemen/komponen

2 ondblclick Muncul ketika user

mengklik ganda komponen

3 onmousedown Muncul ketika user

menekan tombol pada

mouse

4 onmousemove Muncul ketika user

menggerakan pointer

mouse

5 onkeydown Muncul ketika user

menekan sebuah tombol

14

pada keyboard

6 onkeypress Muncul ketika user

menekan tombol keyboard

dan akan terus muncul

sampai user melepas

tombol

dll

LATIHAN

1. Harga barang,besar cicilan dan lama cicilan diinput dari form, tampilkan jumlah pembayaran

cicilan dan jumlah sisa cicilan dari bulan awal sampai akhir

2. Harga dan jumlah barang diinput dari form, total=harga x jumlah, jika jumlah barang>=3 maka

diskon=total x 5%, total bayar=total-diskon

3. Tabungan awal, besar bunga dan lama menabung diinput dari form, dengan menggunakan

bunga majemuk atau bunga berbunga, tampilkan saldo awal,bunga, saldo akhir dari bulan awal

sampai bulan akhir

4. Penerimaan Polri Online, diterima jika perempuan dengan tinggi badan=165 s/d 175, berat

badan=tinggi badan-109, IPK>=3, pendidikan min D-III, usia=21 s/d 24 atau jika laki-laki dengan

tinggi badan=175 s/d 185, berat badan=tinggi badan-110, IPK>=3, pendidikan min D-III, usia=22

s/d 25, selesaikan dengan web base untuk menentukan diterima atau tidak

1

Pertemuan 12,13,14

PHP

Tujuan:

Memahami struktur dasar pemrograman Php dan mampu membuat website interaktif

sederhana dengan mengggunakan bahasa pemrogramana php dan database MySQL

Alat dan Bahan:

Perangkat lunak : Macromedia Dreamweaver,Xampp(Php dan MySQL)

Materi:

I. Pengantar PHP

PHP adalah salah satu bahasa Server-side yang didesain khusus untuk aplikasi web. PHP

singkatan dari PHP Hypertext Preprocessor yang diciptakan oleh Rasmus Lerdorf, PHP dapat

disisipkan diantara bahasa HTML dan karena bahasa Server side berarti semua sintaks yang kita

berikan sepenuhnya dijalankan pada server, maka bahasa PHP akan dieksekusi di server,

sehingga yang dikirimkan ke browser adalah output dalam bentuk HTML dan kode PHP tidak

akan terlihat.

PHP digunakan untuk membangunkan aplikasi web yang dijalankan dengan

menggunakan Internet Browser seperti Internet Explorer dan Netscape, Mozilla, Google Crome

dll. PHP berinteraksi dengan database untuk membangun halaman web yang dinamik. Antara

pangkalan data/database yang boleh berinteraksi dengan PHP adalah MySQL, Postgresql,

Oracle, MS SQL, dan lain-lain. PHP mempunyai module atau API tertentu supaya dapat

berkomunikasi dengan pengkalan data tersebut. Agar PHP dapat berfungsi, maka dibutuhkan

pelayan web (web server) untuk digunakan, seperti Apache dan IIS, sering digunakan Apache

sebagai web server untuk PHP

PHP mempunyai kelebihan yaitu kompabilitasnya dengan berbagai macam jenis

database,dukungan dengan berbagai macam jenis sistem operasi. PHP lebih cocok dan umum

digunakan jika digabungkan dengan database mysql. Mysql dengan Php seakan-akan dua hal

yang tidak dapat dipisahkan. Tentunya untuk dapat menggunakan keduanya, dibutuhkan tingkat

kemampuan programming tertentu. Buku ini ditujukan bagi anda yang ingin mulai membangun

web dinamis dan mengembangkan aplikasi berbasis PHP Mysql.

Langkah untuk menjalankan dokumen php pada server apache :

1. Buat folder(contoh webku) dan tempatkan di folder apache/htdocs/

2. Simpan semua program(contoh coba.php) pada folder tersebut(webku)

3. Jalankan web server apache.

4. Buka browser dan ketikkan pada URL http://localhost/webku/coba.php

2

Aturan penulisan script php :

1. Script php diawali tag <? dan diakhiri dengan tag ?>

Contoh:

<?

echo("Bentuk Pertama");

?>

2. Script php diawali tag <?php dan diakhiri dengan tag ?>

Contoh:

<?php

echo("Bentuk Kedua");

?>

3. Script php diawali tag <script language=”php”> dan diakhiri dengan </script>

Contoh:

<script language="php">

echo("Bentuk Ketiga");

</script>

Penulisan tag php dengan html

Contoh:

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<?php


?>

</body>

</html>

5. Menulis komentar

Contoh :

<?php

//Contoh Komentar Pertama

/* Contoh Komentar Kedua*/


?>

6. Setiap statement php diakhiri dengan tanda ( ;) titik koma.

II. Type Data Dan Variable

Type data adalah jenis data yang akan ditampung oleh suatu variable. Sedangkan variable

merupakan tempat untuk menampung data atau nilai.

Dalam php terdapat tipe data dasar yaitu:

Integer, untuk data yang berisi angka. Data tersebut dapat digunakan untuk

operasi matematika.

String, untuk data yang berisi karakter, tipe data ini tidak digunakan untuk

operasi matematika.

3

Array, untuk data yang berkelompok. Array memiliki nama variable yang sama.

Definisi lain dari array adalah kumpulan variable yang memiliki tipe data yang

sama.

a. Float/ double, untuk data yang berupa pecahan desimal. Untuk menangani

operasi matematika dengan nilai pecahan.

b. Objek, digunakan dengan statement fuction.

Aturan untuk pendeklarasian variable :

1. Suatu variable dinyatakan dengan tanda dollar ( $ ) dan diikuti nama variable.

2. Nama variable tidak boleh diawali dengan angka, harus dengan karakter,

setelahnya dapat diikuti dengan angka/underscore ( garis bawah).

3. Penamaan bersifat case sensitive atau variable membendakan huruf kecil dan

besar.

4. Deklarasi variable selalu diikuti dengan pemberian ( assignment) nilai dari

variable

5. tersebut. Jika sebuah variable belum memiliki nilai tidak perlu dideklarasikan

terlebih dahulu.

Contoh: lat1.php

<?php

echo("Menghitung Gaji Total<br>");

$gapok=2000000;

$tunjangan=500000;

$total=$gapok+$tunjangan;

echo("Total Gaji=$total");

?>

Output:

Keterangan:

3 buah variable yaitu gapok,tunjangan dan total. Dinyatakan dalam bentuk variable sehingga

diawali dengan tada dolar($)

III. STRUKTUR KONTROL

IF

Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat.

Cara penulisannya adalah sebagai berikut:

if (syarat)

{

statement

}

4

atau:

if (syarat)

{

statement

}

else

{

statement lain

}

atau:

if (syarat pertama)

{

statement pertama

}

elseif (syarat kedua)

{

statement kedua

}

else

{

statement lain

}

contoh:lat2.php

<?php

$x=100;

$y=150;

if($x>$y)

echo("X > Y");

elseif($Y>$X)

echo("Y > X");

else

echo("X = Y");

?>

Output:

Switch

digunakan untuk membandingkan suatu variable dengan beberapa nilai serta

menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan.

Struktur Switch adalah sebagai berikut:

5

switch (variable)

case nilai:

statement

case nilai:

statemant

case nilai:

statement

.

.

.

IV. Struktur Perulangan

While

While adalah memberikan perintah untuk menjalankan statement dibawahnya secara

berulang-ulang, selama syaratnya terpenuhi.

while (syarat)

{

statement

}

Contoh: lat3.php

<?php

$x=10;

while($x<=100)

{

echo($x."<br>");

$x+=10;

}

?>

Output:

Keterangan:

$x=10 : memberikan nilai awal x=10;

While($x<=100) : syarat yang harus dipenuhi yaitu hingga x bernilai <= 100

echo($x."<br>"):menampilkan nilai x yang diikuti dengan <br> artinya nilai x berikutnya

ditampilkan pada baris baru

For

Cara penulisan statement FOR adalah sebagai berikut:

6

for (ekspresi1; ekspresi2 ; ekspresi3)

statement

ekspresi1 menunjukkan nilai awal untuk suatu variable

ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemant

ekspresi3 menunjukkan pertambahan nilai untuk suatu variable

Contoh:lat4.php

<?php

$x=0;

for($x==0;$x<=10;$x++)

{

echo("Bilangan Genap: $x");

$x++;

echo("<br>");

}

?>

Output:

5. PHP dan MySQL

PANDUAN PRAKTIKUM PEMROGRAMAN WEB I

Documents