Prak PWC

MODUL 1
PRAKTIKUM PEMROGRAMAN WEB CLIENT
Disusun oleh :
FX. Henry Nugroho, S.T., M.Cs.
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AKAKOM
YOGYAKARTA
2019

i

MODUL 1
LINGKUNGAN KERJA PEMBUATAN WEB

CAPAIANPEMBELAJARAN

1. Mengenal dan menggunakan browser
2. Mengenal dan menggunakan editor
3. Menulis script HTML pada editor

KEBUTUHAN ALAT/BAHAN/SOFTWARE

1. Editor notepad
2. Browser

DASAR TEORI

1. Website
Website adalah kumpulan halaman web yang dapat diakses melalui browser dan
memerlukan jaringan internet, contohnya https://www.akakom.ac.id . Cara mengakses
web terbagi atas dua bagian, yaitu sisi client serta sisi server. Script yang digunakan
untuk membuat tampilan web adalah HTML(Hypertext Markup Language).

2. HTML
HTML pada dasarnya hanya file teks dengan kode yang memberi tahu browser cara
menampilkan informasi, misalnya memberi tahu browser bahwa teks tertentu harus
ditampilkan sebagai header dengan huruf tebal, atau teks diberi warna merah. Untuk
memberi tahu browser file teks berisi HTML, digunakan ekstensi file .html. Karena
dokumen HTML tidak lain adalah file teks maka dapat menggunakan editor teks apa
saja untuk membuatnya, misalnya Notepad, Microsoft Word. Struktur HTML terbagi
atas bagian

3. Browser
Browser adalah program yang digunakan untuk menampilkan website. Beberapa
browser yang populer adalah Google Chrome, Firefox, Internet Explorer, Opera, dan
Safari. Melalui browser kita dapat melihat kode HTML dari sebuah web, caranya klik

1

kanan di halaman web lalu pilih popup menu “view page source”. Bagian‐bagian
browser dapat dilihat pada gambar 1.1.

Gambar 1.1 Bagian dan Fungsi Browser

4. Editor
Digunakan untuk menuliskan kode script HTML. Editor terdiri dari duajenis, yaitu:
a. Text Editor : editor yang berbasis pada text saja seperti notepad. File
disimpan dengan ekstensi .html . Tampilan web bisa dilihat dari editor ,
harus dengan menggunakan browser.
b. Graphic User Interface : editor memiliki komponen – komponen yang dapat
di drag and drop untuk membuat sebuah halaman web. Dikenal juga
dengan istilah editor WYSIWUG . Keunggulan editor jenis ini adalah kita
sudah mendapat langsung melihat tampilan web dan kode html otomatis di
generate oleh sistem.

2

5. Struktur Dokumen HTML
Kode program HTML menggunakan simbol <> biasa disebut “tag” . Pengetikan kode
html bersifat insensitivecase tidak membedakan huruf besar dengan huruf kecil.
Struktur penulisan html adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

PRAKTIK

1. Buka program Notepad dan browser (internet explorer/ firefox/ chrome)
2. Pada program notepad , ketikkan kode berikut ini

3. simpan dengan nama first.html
4. Buka Browser, Klik menu File | Open File. Arahkan ke file first.html.
5. Amati hasil yang muncul di bagian‐bagian browser : title bar, page content, address.
6. Modifikasi file first.html , ubahlah script di beberapa tag dengan huruf kapital dan
non kapital. Amati apakah ada perubahan atau tidak.

3

LATIHA
AN

1 Gunakan file first.html. Ganti bagiaan body denggan nim , nam
1. ma, prodi.

TUGAS

1 Carilah 2 tag , selain <<title> yang b
1. bisa diletakkan
n di dalam tagg <head>. Seb
butkan tag‐
nya dan b
berikan penje elasan

REFERE
ENSI
1
1. https://ww
ww.w3schoolss.com/html/h
html_intro.asp
4

5

MODUL 2
Disusun oleh :
AKAKOM
YOGYAKARTA
2019

i

MODUL 2
TAG DASAR HTML

CAPAIANPEMBELAJARAN

1. Menuliskan script HTML sesuai struktur
2. Menuliskan tag‐tag dasar (h1, p, div, span, hr, br)
3. Menuliskan script hyperlink
4. Menuliskan script list (ul dan ol)
5. Menuliskan atribut yang sesuai


1. Editor notepad / notepad++
2. Browser

DASAR TEORI

HTML (Hyper Text MarkUp Language) adalahstandar kode program untuk
pembuatan halaman website, dikembangkan oleh Tim Berners‐Lee sekitar tahu 1990.
Kode program HTML menggunakan simbol <> biasa disebut “tag” . Pengetikan kode
html bersifat insensitivecaseyaitu tidak membedakan huruf besar dengan huruf kecil.
Struktur penulisan html adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

1

penjelasan tag html:
• <!DOCTYPE html>adalah suatu deklerasi yang digunakan untuk
mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat
menentukan bagaimana memperlakukan kode tersebut
• <html>menentukan jenis dokumen yang digunakan. Ada jenis lain misalnya
XHTML (Extensible Hypertext Markup Language).
• <head>untuk mendeskripsikan bagian header web. Pada bagian header kita
bisa menentukan beberapa seting global dokumen web, misalnya menentukan
kalimat yang muncul di title bar, menentukan kata/kalimat untuk pencarian di
google.
• <body>merupakan bagian utama dari web dimana konten website diletakkan.
Pada bagian ini pengguna juga bisa berinteraksi , misalnya: melakukan
pemesanan barang, memutar video, melakukan chat.
Berikut adalah beberapa tag-tag HTML.
Nama Tag Keterangan / Kegunaan

Basic
<h1> to <h6> Tag untuk membuat heading
<p> Tag untuk membuat paragraf
<br> Memasukan satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
 Tag untuk membuat komentar
Formatting
<b> Tag untuk membuat huruf bercetak tebal
Tag untuk membuat sebuah bagian dari teks yang
<i>
disesuaikan dengan mood
<font> Tag untuk mengatur setingan huruf (jenis, ukuran)
<small> Tag untuk membuat teks kecil
<strong> Tag untuk membuat teks penting
Tag untuk membuat teks subskrip (seperti dalam penulisan
<sub>
Jat Kimia)
Tag untuk membuat teks superscripted (seperti dalam
<sup>
penulisan akar kuadrat)
Tag untuk membuat teks yang memiliki Gaya yang berbeda
<u>
dari teks biasa lainnya
<iframe> Tag untuk membuat sebuah bingkai
Images

2

<img> Tag untuk membuat gambar

<map> Tag untuk membuat gambar-peta
<area> Tag untuk membuat area dalam gambar-peta
Digunakan untuk menggambar grafik, melalui scripting
<canvas>
(JavaScript ) (tag baru HTML5)
Tag untuk membuat sebuah caption untuk elemen <figure>
<figcaption>
(tag baru HTML5)
<figure> Menentukan konten mandiri (tag baru HTML5)
Links
<a> Tag untuk membuat hyperlink
Tag untuk membuat hubungan antara dokumen dan sumber
<link> daya eksternal (paling sering digunakan untuk link ke style
sheet)
<nav> Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul> Tag untuk membuat daftar dengan selain nomor
<ol> Tag untuk membuat daftar dengan nomor
<li> Tag untuk membuat sebuah item daftar
Tables
<table> Tag untuk membuat tabel
<caption> Tag untuk membuat sebuah caption tabel
<th> Tag untuk membuat sebuah sel header tabel
<tr> Tag untuk membuat baris dalam sebuah tabel
<td> Tag untuk membuat sel dalam sebuah tabel
Style/Sections
<style> Tag untuk membuat informasi style untuk dokumen
<div> Tag untuk membuat sebuah bagian dalam dokumen
<span> Tag untuk membuat sebuah bagian dalam dokumen
Tag untuk membuat sebuah header untuk dokumen atau
<header>
bagian (tag baru HTML5)
Tag untuk membuat footer untuk dokumen atau bagian (tag
<footer>
baru HTML5)
Meta Info
<head> Tag untuk membuat informasi tentang dokumen
<meta> Tag untuk membuat metadata tentang dokumen HTML
Menentukan URL dasar / target untuk semua URL relatif
<base>
dalam dokumen

3

PRAKTIIK

Praktik 1 :
P
1 Buka edittor (notepad ++ atau notepad)
1.
2 Ketikkan script html berikut ini, sim
2. mpan dengan nama home.html

3 amati hassilnya. Pada b
3. n semester geenap , semestter ganjil tampilan hasil
bagian tulisan
di browseer tidak samaa dengan di ed
ditor.
4 Edit scrip
4. no.10 . Tambahkan tag <br> pada akhirr baris.
pt pada baris n
5 amati perrbedaan hasilnya.
5.

Praktik 2: Membuat List TTanpa Nomorr.
P
1 Gunakan
1. dengan nama “tanpaNomo
n kembali file home.html, lalu Save as d or.html”.
2 edit mulai baris ke‐10
2. 0 dengan kode program seeperti di bawaah ini
4

Praktik 3: Membuat List B
P Bernomor.
1 Gunakan
1. n kembali file home.html, lalu Save as d
dengan nama “denganNom
mor.html”.
2 edit mulai baris ke‐10

3.
3 edit baris 10 pada baggian “type”. Ubah type=”1” menjadi tyype=”A” .
4
4. Pengampu memberi ttambahan un ntuk tipe yangg lain
Praktik 4: Membuat List P
P Penomoran GGabungan.
1 Gunakan
1. n kembali file “dengaanNomor.htmml, lalu Savve as dengan nama
“gabunggan.html”.
2 Edit mulai baris ke‐10

5

P
Praktik 5 : Lin
nk
1 Buat file b
1. baru. Ketikkan
n program berikut
2 Buat file b
2. n program berikut
baru. Ketikkan
LATIHA
AN

1 Tuliskan kkode program
1. m untuk mengghasilkan tam
mpilan sepertii berikut
6

TUGAS

Tugas diberikan oleh dosen pengampu

REFERENSI
1. https://www.w3schools.com/html/html_lists.asp
2. https://www.w3schools.com/html/html_links.asp

7

MODUL 3
Disusun oleh :
AKAKOM
YOGYAKARTA
2019

i

M
MODUL 3
TAG D
DASAR HT
TML

CAPAIA
ANPEMBEL
LAJARAN

1.
1 Menuliskkan CSS sesuai aturan (properti dan nilaai)
2
2. Menuliskkan selektor taag
3
3. Menuliskkan selektor idd
4
4. Menuliskkan selektor class
5
5. Menuliskkan script inteernal style
6
6. Menuliskkan script ekstternal style
7
7. Menuliskkan inline style

KEBUTUHAN ALA
AT/BAHAN//SOFTWARE
E

1. Editor no
1 otepad / notepad++
2 Browser
2.

DASAR TEORI

CSS (Cascading Style SSheets) adalaah script proggram yang diggunakan untu uk mengatur
t
tampilan weebsite, misalnnya warna bbody , jenis serta ukurann font, layout website.
P
Perintah htm l hanya mam mpu mengaturr tampilan un ntuk satu halaaman site sed dangkan CSS
m
mampu meng gontrol tampilan banyak h halaman sekaligus. CSS tidak dikategorikan sebagai
b
bahasa pemrrograman kaarena di dalaamnya tidak ada strukturr kontrol (pe ercabangan,
p
perulangan, a mbahkan ke daalam HTML dengan 3 cara:
array dll). CSSS dapat ditam
a. inline
e : m
melalui atribu
ut “style” padda elemen Htm ml
b. internnal : m
melalui tag <sstyle> yang diletakkan di ddalam tag <Heead>
c. eksteernal : C
CSS disimpan pada sebuah h file tersendiiri dengan eksstensi *.css

¾ Syntax CSS :
1

Keterangan :
‐ Selector : menentukan elemen html yang akan diatur tampilannya.
‐ Declaration : menentukan atribut apa saja yang akan diatur , misal warna font,
ukuran font, warna background website.

¾ CSS ID Selector
ID pada CSS berfungsi layaknya KTP pada manusia, yaitu sebagai nama pengenal. Jadi
kita dapat membuat sebuah nama pengenal khusus untuk memudahkan mengingat
bagian CSS tertentu. CSS ID diawali dengan karakter (#), contohnya:

#aturFont {
text-align: center;
color: red;
}
¾ CSS Class Selector
Class CSS fungsinya mirip seperti ID CSS yaitu sebagai pengenal. Perbedaannya saat
pemanggilan pada file Html, CSS class bisa dipanggil lebih dari satu kali sedangkan
CSS Id hanya dipanggil satu kali. Penulisan CSS class diawali dengan tanda (.),
contohnya:
.center {
text-align: center;
color: red;
}

2

PRAKTIIK

Praktik 1 : Menambahkan
P n CSS secara IInternal
1 Ketikan ko
1. ode program berikut ini

3

P n CSS secara iinline di dalam elemen html
B
Buat file baru
u lalu ketikkan
n kode prograam berikut ini

P n CSS secara eeksternal
1 Buat file b
1. baru lalu ketikkkan kode pro
ogram berikut ini. simpan dengan namaa file
desainku.ccss

2 Buat file b
2. baru lalu ketikkkan kode pro
ogram berikut ini. simpan dengan namaa file
eksternalC
CSS.html

3 Jalankan d
3. di browser file
e eksternalCSSS.html
4

P
Praktik 4 : Membuat ID CSSS
Buat file b
baru lalu ketikkkan kode pro
ogram berikut ini
Praktik 5 : Membuat Classs CSS
P
Buat file b
baru lalu ketikkkan kode pro
ogram berikut ini.

Perhatikan
n baris 13 , 14
4 dimana seb
buah class bisaa dipanggil leebih dari satu kali
5

LATIHA
AN

1 Modifikassi program prraktik 4, CSS d
1. dibuat menjadi eksternal ffile seperti praktik 3
2 Modifikassi program prraktik 5, CSS d
2. dibuat menjadi eksternal ffileseperti praaktik 3

TUGAS

Tugas dib
berikan oleh d
dosen pengam
mpu

REFERE
ENSI
1. httpss://www.w3scchools.com/ccss/
6

MODU
UL 4
PRAK
KTIKUM
M PEM
MROGR
RAMAN
N WEB
B CLIEN
NT
Disusun oleh
o :
FX. Hen
nry Nugroh
ho, S.T., M..Cs.
SEKO
OLAH TING
GGI MANA
AJEMEN INFORMATIK
KA DAN K
KOMPUTER
R
AKAKO
OM
YOGYAKA
ARTA
2019
9
i

MODUUL 4
LAYOUT
L WEBSITE
E DENGAN CSS

CAPAIAN PEM
MBELAJARA
AN

1. Menulisskan konten teks
2. Memforrmat konten teks dengann CSS (warnaa, bentuk dan
n jenis huruff, latar belakang)
3. Megatu ur margin, pa
adding dan b order
4. Position
ning konten

KEBU
UTUHAN A
ALAT/BAH
HAN/SOFTW
WARE

1. Editor notepad / no
otepad++
2. Browseer

DASA
AR TEORI

Sebbelum kemampuan CSS berkembangg secara luass, desainer w web menggunakan
tabel HTMML untuk me abel membeentuk kotak alami
embuat layo ut halaman.. Sebuah ta
yang membuatnya rela atif sepele u ntuk mengatur konten m menjadi bari s dan kolomm yang
selaras. Naamun untuk tingkat lanjjut menggun
nakan tabel untuk menggatur layoutt akan
menimbulkkan banyak kesulitan, CCSS 3 adalaah cara terbaik untuk membuat layout
l
website.

 Model Box
Setiap elemmen yang adda pada hala man web akkan diletakka an dalam sebbuah box, diimana
box tersebut akan terkkait dengan pengaturan yang ada di file CSS. iluustrasi mode el box
pada CSS adalah sepertti berikut ini

1

Penjelasan:
 Content – Bagian utama daari web dimaana text dan gambar akann ditampilka an
 Pad dding – jarak antara konten de engan pemb batas box. padding be ersifat
traansparan
 Border – berfuungsi sebagaai pembatas antara kontent dengann padding. Border
B
bissa transparann atau terlihaat.
 Maargin – jarakk diluar borrder yang membatasi
m dengan box yyang lain. margin
m
bersifat transparan.
bentuk dari b
beberapa b border
 Pengaaturan Ukuran Box
Digunakan untuk mene entukan heigght/width se ebuah box. DDalam melakkukan penga aturan
bisa dibaggi menjadi dua
d nnya tetap(ffixed) dan uukuran box akan
jenis, yyaitu ukuran
menyesuaikan ukuran layar (respponsive). Pro operty yang
g digunakan untuk men ngatur
ukuran boxx:
 autto : merupakan nilaii default. Browser ya ang akan mmenghitung nilai

height/width bbox.
 ngth = ditentukan dengann satuan px,, cm etc. Termasuk fixed value
len
2

 % = menentukan heighht/width dari box den ngan menulliskan prosentasi

perbandingann nya. Akan m
menyesuaikaan dengan perbandinggan ukuran layar
(reesponsive).
 inittial = menen ntukan heighht/width mennjadi nilai de
efault
 inhherit ‐ nilai he
eight/width akan mengaacu pada parent value
PRAK
KTIK

Praktik 1 : Membuat file CSS
am berikut inni dan simpan dengan na
1. Ketikan kode progra ama desain.ccss

3

4

2. Ketikkan
n kode HTMLL berikut, berri nama index.html
5

LATIHAN

1. Modifikasi file CSS sehingga terrlihat borderr‐nya. coba dengan 3 jeniis border yan
ng
berbed
da‐beda.
6

2. Tambahkan sebuah h kolom (sidee) disebelah kanan pengumuman, attur sehingga
tampilaan tetap proporsional.

TUGA
AS

Tugas d
diberikan ole
eh dosen penngampu

ERENSI
REFE
1. htttps://www.w
w3schools.coom/css/
7

MODUL 5
Disusun oleh :
AKAKOM
YOGYAKARTA
2019
i
MODUL 5
FORM
CAPAIAN PEMBELAJARAN
1. Menuliskan script kontainer form beserta atributnya

2. Menuliskan element input teks dan submit
3. Menyiapkan server web
4. Menguji input form dengan mengirim data ke server dan menampilkan data dari
server
5. Menjelaskan perbedaan metode POST dan GET

2. Browser
3. local server
DASAR TEORI
Form atau formulir adalah media untuk menerima input dari user, contohnya saat
proses login untuk memasukkan user name dan password. Data-data yang diinputkan
melalui form akan dikirim ke server, bianya diikuti dengan proses penyimpanan di
database. Contoh saat mendaftar di email.
Tag yang digunakan adalah <form> , terdapat beberapa atribut yang sering dipakai
terkait dengan proses pengiriman data ke server, yaitu:
 Action : mengatir URL kemana data akan dikirim.

 method : cara protokol http mengirim data, terdapat 2 cara yaitu POST dan GET.
 target :menentukan lokasi yang digunakan untuk menampilkan respon dari
data yang telah diterima server setelah proses submit. Pilihan target yaitu : _blank ,
_self, _parent, _top
1
Perbedaan pengiriman data dengan method POST atau GET dapat dilihat pada URL
website. Jika menggunakan method GET maka data yang dikirim akan terlihat sedangkan
dengan method POST datanya tidak akan terlihat.
PRAKTIK
Praktik 1 : Membuat file CSS

1. Aktifkan dulu server lokal. Bisa menggunakan XAMPP, SQLYog.
2. Semua File harus disimpan diserver.
3. Ketikkan program berikut dan simpan dengan nama style.css
2
4. Ketikkan program berikut dan simpan dengan nama proses.php
5. Ketikkan program berikut dan simpan dengan index.php . Form menggunakan

method GET.
6. Jalankan program dan amati bagian URL browser , pada bagian tulisan “fname” dan
“lalamat”.
3
7. Modifikasi file index.php pada baris no.9. Isikan method dengan POST. amati kembali
bagian URL.
LATIHAN
1. Modifikasi file index.php , tambahkan isian untuk input no hp dan tanggal lahir.
TUGAS
1. Simpan data input dari form ke database.
REFERENSI
1. https://www.w3schools.com/css/
4
MODUL 6
Disusun oleh :
AKAKOM
YOGYAKARTA
2019
i
MODUL 6
FORM
1. Menuliskan script HTML untuk element-element Form

2. Browser
3. local server
DASAR TEORI
Pada modul 5 telah dijelaskan bahwa form digunakan untuk menerima inputan dari
pengguna. Tipe input form yang digunakan di modul 5 adalah tipe “text”. Namun data
yang diinputkan jenisnya bermacam – macam sehingga dibutuhkan berbagai macam tipe
penerima inputan. Tujuan dari adanya berbagai tipe input adalah untuk mempercepat
pekerjaan dan meminimalkan kesalahan. Contoh jika pengunjung website diminta
memasukkan jenis kelamin maka akan lebih cepat dan tepat jika menggunakan pilihan
berupa tipe radio. Lebih cepat karena pengunjung tinggal klik tombol radio, tidak perlu
mengetik. Lebih tepat karena dengan klik tombol menghindari kesalahan pengetikan.
Berikut ini beberapa jenis tipe inputan form:
a. Select
Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list
pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa”
user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada
saat form dibuat.
1
Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai “isi” dari
tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:
<select >
<option>Pilihan 1</option>
</select >
b. Radio
Tag input type radio berfungsi untuk membuat tombol radio atau tombol pilihan
yang diisi dengan cara memilih dari salah satu tombol radio yang ada. Radio biasa
digunakan untuk pilihan yang membatasi user untuk memilih satu dari pilihan yang
ada.
Dalam penggunaan radio HTML, kita hanya memerlukan tag input dengan sebuah
atribut type radio. Berikut format dasar radio dalam HTML:
<input type="radio"/>Pilihsn 1 radio
c. Checkbox
Tag Input type checkbox berfungsi untuk membuat checkbox atau kotak isian yang
diisi dengan cara menceklist kotak tersebut. checkbox biasa digunakan untuk pilihan
yang dapat dipilih dengan lebih dari 1 pilihan. Dalam penggunaan checkbox HTML,
kita hanya memerlukan tag input dengan sebuah atribut type=”checkbox”. Berikut
format sederhana checkbox dalam HTML:
<input type="checkbox"/>Penjelasan checkbox
d. Textarea
Objek form textarea digunakan untuk membuat text inputan yang bisa menampung
lebih dari 1 baris inputan. Tag textarea mirip dengan tag input type text, namun
memiliki kelebihan untuk menampung beberapa baris. Biasanya textarea digunakan
untuk inputan yang panjang, seperti komentar, keterangan, atau catatan. format
sederhana textarea dalam HTML:
<textarea> komentar </textarea>
2
PRAKTIK
Praktik 1 : Memodifikasi file index.php

1. Aktifkan dulu server lokal. Bisa menggunakan XAMPP, SQLYog.
2. Semua File harus disimpan diserver.
3. Kita akan menggunakan kode program modul 5 untuk dimodifikasi.
4. buka file index.php. Pada elemen form, modifikasi property action menjadi
action=”proses.php”
5. Hapus kode program berikut ini
<?php include "proses.php";?>
6. Ketikkan kode program tambahan di bawah elemen input alamat (perhatikan tulisan
berwarna hijau)
3
7. Simpan file.
Praktik 2: modifikasi file proses.php
1. Siapkan file proses.php

2. modifikasi dilakukan pada kode program bagian method “post”.
4
3. simpan program.
4. uji program di browser.
LATIHAN
1. Modifikasi file proses.php , terapkan penerimaan input pada method tipe “get”.
TUGAS
1. Tambahkan input komentar dengan menggunakan inputan tipe textarea.
REFERENSI
1. https://www.w3schools.com/css/
5
MODUL 7
Disusun oleh :
AKAKOM
YOGYAKARTA
2019
i
MODUL 7
TABEL
1. Menuliskan script HTML element tabel (table, tr, th, td, tbody, thead, tfoot)
2. Menuliskan script HTMLelement tabel dan atribut untuk mengatur format tabel
(mengabung sel dan membagi sel)
3. Menuliskan script HTML dan CSS untuk mengatur layout tabel

2. Browser
DASAR TEORI
Tabel merupakan elemen HTML yang mengatur suatu tampilan dalam bentuk kolom
dan baris. Penyajian data dengan menggunakan tabel akan terlihat lebih rapi karena
tersusun secara teratur dalam urutan kolom atau baris. Tag yang digunakan di elemen
tabel adalah:
<table> Membuat tabel
<th> Singkatan table Header untuk membuat header.
<tr> Singkatan table row untuk membuat baris baru.
<td> Singkatan table data untuk menginputkan data .
<thead> Singkatan table head untuk mengelompokkan
bagian header.
<tbody> Singkatan table body untuk mengelompokkan
bagian body yang berisi data-data tabel.
<tfoot> Singkatan table footer untuk mengelompokkan
1
bagian footer.
Penggabungan kolom menggunakan perintah COLSPAN , sedangkan penggabungan

baris menggunakan ROWSPAN.
PRAKTIK
Praktik 1 : Membuat tabel

1. buat file baru, penyimpanan tidak harus di server
2
2. jalankan di browser.
Praktik 2: Menggabungkan Kolom dan Baris

1. Menggabungkan Baris dengan rowspan. Siapkan file baru
3
2. Menggabungkan kolom dengan colspan. Siapkan file baru.
3. Lihat kembali file praktik 1. Contoh lain colspan terdapat pada tag <tfoot>
Praktik 2: Mengatur Layout Tabel dengan CSS
1. buat file baru, simpan dengan nama aturtabel.css.
4
2. buka kembali file praktik 1. Pada baris ke-4 hapus atribut border=”1” karena
akan diatur melalui CSS.
3. sisipakan css secara eksternal.
LATIHAN
1. Modifikasi file praktik 1. tambahkan 2 baris data baru.
TUGAS
1. Tugas diberikan oleh dosen pengampu.
REFERENSI
1. https://www.w3schools.com/html/html_tables.asp
5
6
MODUL 8
Disusun oleh :
AKAKOM
YOGYAKARTA
2019
i
MODUL 8
HTML MEDIA
1. Menuliskan script HTML element image, video, sound.

2. Browser
DASAR TEORI
Multimedia merupakan salah satu elemen dalam HTML yang dapat

menampilkan berbagai media. Contoh dari multimedia tersebut adalah musik,
video, gambar, animasi, dan lain-lain. Tag yang digunakan untuk dapat
menampilkan multimedia adalah :
<video> Menampilkan media berupa video.
<audio> Menampilkan media berupa audio.
<source> Elemen untuk menentukan file media yang
dapat diputar dalam suatu browser.
Sebagai contoh dalam penggunaan <source> apabila suatu browser tidak

mendukung file format .ogg, maka secara otomatis dapat memilih format yang
mendukung dalam browser tersebut.
Tag atribut yang digunakan pada elemen video dan audio :
<autoplay> Menentukan video/audio diputar secara
otomatis.
1
<width> Mengatur lebar dari video player.
<height> Mengatur tinggi dari video player.
PRAKTIK
Praktik 1 : Menampilkan Video. file movie dan audio disesuaikan yang ada
di PC masing-masing.
1. Buat file baru dengan nama video.html, penyimpanan tidak harus di server.
2. Jalankan di browser.
Praktik 2 : Menampilkan Audio

1. Buat file baru dengan nama audio.html, penyimpanan tidak harus di server
2
LATIHAN
1. Modifikasi file praktik 1. Ubah dan tampilkan ukuran video menjadi 3 macam
(besar, kecil, sedang).
TUGAS
REFERENSI
1. https://www.w3schools.com/html/html_media.asp
3
MODUL 9
PRAKTIKUM PEMROGRAMAN WEB
CLIENT
Disusun oleh :
AKAKOM
YOGYAKARTA
1
ST
MI
2019
KA
KA
KO
M
5
MODUL 9
JAVASCRIPT
1. Menuliskan script javascript internal dan eksternal.

2. Menuliskan script javascript untuk perintah input/output (document.write,
prompt, alert).
M
3. Menuliskan script Javascript sesuai aturan penulisan program.
4. Menuliskan script Javascript menerapkan variabel dan tipe data.
KO
KA
2. Browser
KA
DASAR TEORI
MI
Javascript adalah bahasa pemrograman yang awalnya dirancang untuk

berjalan diatas browser. JavaScript memiliki banyak kegunaan seperi
ST
memberikan efek pada sebuah web, mengganti value dari elemen HTML, dan
lain-lain.
Terdapat 2 cara untuk penulisan JavaScript, yaitu secara internal dan
eksternal. Secara internal maksudnya adalah kode program JavaScript tersebut
dilakukan pada halaman itu sendiri, contoh :
5
Sedangkan untuk penulisan secara eksternal adalah dengan melakukan
pemanggilan file JavaScript yang kemudian sisipkan di antara tag <head> atau
tag <body>, contoh :
M
KO
KA
KA
Contoh script pada JavaScript

MI
document.write Script untuk menuliskan pada dokumen HTML

getElementById( Fungsi dari objek document untuk membaca
) elemen HTML berdasarkan id nya
ST
PRAKTIK
Praktik 1 : Menuliskan JavaScript secara internal

1. Buat file baru, penyimpanan tidak harus di server
5
M
Praktik 2 : Eksternal JavaScript
KO
KA
KA
MI
Praktik 3 : JavaScript document.write

ST
5
Praktik 4 : JavaScript window.alert

1. Modifikasi file praktik 3, lalu ganti isi script dengan window.alert
M
KO
KA
Praktik 5 : JavaScript variable dan tipe data
KA
MI
ST
5
LATIHAN
1. Buatlah halaman web yang menampilkan alert yang berisi nama dari
halaman tersebut. Contoh ketika user berada di halaman beranda, maka
akan menampilkan alert “anda berada di halaman beranda”. (buat minimal 2
halaman)
TUGAS
M
KO
KA
REFERENSI
KA
1. https://www.w3schools.com/js/default.asp
MI
ST
5
MODUL 10
CLIENT
Disusun oleh :
AKAKOM
YOGYAKARTA
1
ST
MI
2019
KA
KA
KO
M
3
MODUL 10
ARRAY, OBJEK, STRUKTUR KONTROL dan FUNGSI
1. Menuliskan script javascript menerapkan array, objek, struktur control(if,

while, dll), fungsi.
M

2. Browser KO
KA
DASAR TEORI
KA
Array pada umumnya adalah sebuah variable yang dapat menampung banyak
value dalam 1 waktu dan untuk mengakses nilai dari array cukup dengan
MI
menentukan index dari arraynya. Dalam JavaScript array memiliki method, sort
dan iteration. Cara untuk membuat array adalah :
ST
Contoh menggunakan array method dan sort :
3
Struktur Kontrol dalam JavaScript meliputi JavaScript Condition, Switch, Loop
For, Loop While, dan break. JavaScript condition adalah untuk menentukan
tindakan pada kondisi tertentu, contoh penggunaannya adalah :
M
Fungsi atau function dalam JavaScript adalah suatu blok code yang dirancang
function.
KO
untuk melakukan tugas tertentu. Untuk membuat fungsi menggunakan keyword
Objek dalam JavaScript adalah suatu tipe data yang didefinisikan sebagai
KA
mutable properties collection, yang artinya sekumpuluan properti (ciri khas) yang
nilainya dapat berubah. Dengan JavaScript dapat mudah untuk membuat objek
KA
sendiri. Ada berbagai cara untuk membuat objek baru :

- Mendefinisikan dan menciptakan satu objek, menggunakan literal objek.
- Mendefinisikan dan membuat objek tunggal, dengan kata kunci new.
- Mendefinisikan konstruktor objek, dan kemudian membuat objek dari jenis
MI
dibangun.
ST
PRAKTIK
Praktik 1 : Membuat Array

3
Praktik 2 : JavaScript If Condition

M
KO
KA
KA
MI
Praktik 3 : JavaScript Switch

ST
3
M
Praktik 4 : JavaScript Loop For KO

KA
KA
MI
ST
3
Praktik 5 : JavaScript Loop While
M
KO
KA
Praktik 6 : JavaScript Functions
KA
MI
ST
3
2. Jalankan di browser
Praktik 7 : JavaScript Objects
1. Buat file baru
M
LATIHAN
KO
KA
1. Buatlah array yang menampung nama binatang dan nama sayuran (minimal
5)
KA
2. Modifikasi file praktik 7 dengan mengisikan data diri anda
TUGAS
MI

ST
REFERENSI
1. https://www.w3schools.com/js/js_arrays.asp
2. https://www.w3schools.com/js/js_if_else.asp
3. https://www.w3schools.com/js/js_object_definition.asp
3
MODUL 11
CLIENT
Disusun oleh :
AKAKOM
YOGYAKARTA
1
ST
MI
2019
KA
KA
KO
M
6
MODUL 11
DOM dan VALIDASI FORM
1. Menuliskan script Javascript untuk membuat web dinamis menggunakan

DOM.
2. Menuliskan script untuk validasi form.
M
KO

KA
2. Browser
KA
DASAR TEORI
DOM atau document object model adalah standar objek Model dan
MI
pemrograman antarmuka untuk HTML. Ini mendefinisikan :

- HTML elements sebagai objek
ST
- Properti dari semua element HTML

- Method yang dapat mengakses semua element HTML
- Event untuk semua element HTML
Dalam kata lain, DOM adalah standar untuk melakukan bagaimana
mendapatkan, merubah, menambah, dan menghapus HTML.
Validasi Form adalah suatu cara untuk menghindari kesalahan dalam mengisi
field pada suatu form dengan menampilkan alert dan memberikan nilai balik false
6
agar form tidak dikirim. Sebagai contoh jika suatu field pada form belum terisi
maka javascript akan menampilkan alert bahwa field tersebut belum terisi.
PRAKTIK
Praktik 1 : DOM Methods

M
Praktik 2 : DOM Elements KO

KA
KA
MI
ST
6
Praktik 3 : DOM HTML
M
Praktik 4 : DOM CSS
KO
KA
KA
MI
ST
Praktik 5 : DOM Events

6
Praktik 6 : DOM Event Listener
M
Praktik 7 : DOM Navigation

1. Buat file baru
KO
KA
KA
MI
Praktik 8 : DOM Nodes

1. Buat file baru
ST
6
Praktik 9 : Validasi Form

1. Buat file baru
M
KO
KA
KA
MI
ST
LATIHAN
6
1. Buatlah Form untuk pendaftaran mahasiswa baru form fieldnya berupa nama,
alamat, email, no telepon, jenis kelamin. Dengan valifasi form field tidak boleh
kosong.
TUGAS
M
REFERENSI
KO
KA
1. https://www.w3schools.com/js/js_htmldom.asp
KA
MI
ST

Prak PWC

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Prak PWC

Diunggah oleh

Hak Cipta:

Format Tersedia

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

Berikut adalah beberapa tag-tag HTML.

Nama Tag Keterangan / Kegunaan

<img> Tag untuk membuat gambar

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

 autto : merupakan nilaii default. Browser ya ang akan mmenghitung nilai

 % = menentukan heighht/width dari box den ngan menulliskan prosentasi

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

1. Menuliskan script kontainer form beserta atributnya

1. Editor notepad / notepad++

 Action : mengatir URL kemana data akan dikirim.

Praktik 1 : Membuat file CSS

5. Ketikkan program berikut dan simpan dengan index.php . Form menggunakan

1. Simpan data input dari form ke database.

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

1. Menuliskan script HTML untuk element-element Form

1. Editor notepad / notepad++

<input type="checkbox"/>Penjelasan checkbox

Praktik 1 : Memodifikasi file index.php

Praktik 2: modifikasi file proses.php

1. Siapkan file proses.php

1. Tambahkan input komentar dengan menggunakan inputan tipe textarea.

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

1. Editor notepad / notepad++

Penggabungan kolom menggunakan perintah COLSPAN , sedangkan penggabungan

Praktik 1 : Membuat tabel

Praktik 2: Menggabungkan Kolom dan Baris

Praktik 2: Mengatur Layout Tabel dengan CSS

1. buat file baru, simpan dengan nama aturtabel.css.

1. Modifikasi file praktik 1. tambahkan 2 baris data baru.

1. Tugas diberikan oleh dosen pengampu.

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

1. Menuliskan script HTML element image, video, sound.

1. Editor notepad / notepad++

Multimedia merupakan salah satu elemen dalam HTML yang dapat

Sebagai contoh dalam penggunaan <source> apabila suatu browser tidak

Praktik 2 : Menampilkan Audio

1. Tugas diberikan oleh dosen pengampu.

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

1. Menuliskan script javascript internal dan eksternal.

Javascript adalah bahasa pemrograman yang awalnya dirancang untuk

Contoh script pada JavaScript

document.write Script untuk menuliskan pada dokumen HTML

Praktik 1 : Menuliskan JavaScript secara internal

Praktik 2 : Eksternal JavaScript

Praktik 3 : JavaScript document.write

1. Buat file baru, penyimpanan tidak harus di server

Praktik 4 : JavaScript window.alert

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

1. Menuliskan script javascript menerapkan array, objek, struktur control(if,

1. Editor notepad / notepad++

Contoh menggunakan array method dan sort :

sendiri. Ada berbagai cara untuk membuat objek baru :