Modul Praktikum APSI

PENDAHULUAN
a. XAMPP
XAMPP adalah perangkat lunak ( free software) bebas, yang mendukung untuk
banyak sistem operasi, yang merupakan kompilasi dari beberapa program.
Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), yang terdiri
beberapa program antara lain : Apache HTTP Server, MySQL database, dan penerjemah
bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP sendiri
merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan
Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web
server yang mudah untuk digunakan yang dapat menampilkan halaman web yang dinamis.
Untuk mendapatkanya XAMPP anda dapat mendownload langsung dari web resminya.
b. Cara menggunakan XAMPP

Setelah aplikasi XAMPP terpasang pada komputer, cara mengunakan aplikasi xampp
adalah sebagai berikut :
- Pada start menu atau pada dekstop, carilah icon XAMPP control panel (gambar 1.1).
kemudian jalankan aplikasi tersebut sehingga akan muncul jendela seperti yang
ditampilkan pada gambar 1.2.
- Tekanlah tombol start (gambar 1.2), sehingga Service Apache dan MySql menjadi on
(berwarna cyan dalam gambar 1.3). Untuk keperluan pengembangan web pada
localhost cukup kedua service ini yang dalam posisi on.
- bukalah browser mozilla firefox atau browser yang terpsang misalnya Chrome. Setelah
browser terbuka, ketikkan localhost/xampp sehingga apabila XAMPP telah terinstal
dengan benar maka akan muncul gambar seperti yang ditampilkan oleh gambar 1.4.
1
Gambar 1.1 Icon XAMPP Control Panel
Gambar 1.2 Jendela XAMPP Control Panel (Service Apache dan MySQL dalam posisi off)
Gambar 1.3 Jendela XAMPP Control Panel (Service Apache dan MySQL dalam posisi on)
2
Gambar 1.4 Tampilan aplikasi XAMPP pada localhost
3
PRAKTIKUM 1
1.1 Judul
HTML (HyperText Markup Language)
1.2 Tujuan
Mahasiswa dapat mengenal dan memahami dan mengggunakan bahasa pemrograman
HTML sebagai bahasa untuk menampilkan dokumen web.
1.3 Dasar Teori

a. Pengertian HTML
HTML merupakan singkatan dari Hypertext Markup Language yang dikembangkan
pertamakali oleh Tim Berners Lee, HTML adalah bahasa yang dapat dimengerti oleh
komponen komputer saat digunakan dalam pengembangan web secara standar. HTML
mendeskripsikan struktur dari halaman-halaman web dengan menggunakan markup.
Elemen-elemen HTML digunakan untuk membentuk blok halaman-halaman HTML.
Elemen-elemen HTML ini direpresentasikan oleh tag-tag seperti “heading”, “paragraph”,
“table” dan seterusnya. Browser tidak menampilkan tag-tag HTML, tetapi menggunakan
tag-tag tersebut untuk membentuk konten dari halaman web.
Dari tahun 90an HTML sudah merilis versi pertamanya yang dikembangkan seiring
berjalannya waktu. Versi terbaru html sampai sekarang adalah HTML5 yang memiliki fitur
baru yang lebih fleksibel dibandingkan pendahulunya.Berikut ini beberapa versi HTML
dari awal hingga sekarang :
 Versi HTML1
Ini adalah versi awal html, pada masa ini html hanya bisa digunakan untuk
membuat :
 heading,
 hypertext,
 cetak tebal (bold),
 cetak miring (italic),
 list
 dan paragraph.
Pada versi ini sebuah web hanya bisa berisi satu atau dua gambar saja. Karena
minimnya penggunaan gambar maka biasanya website dahulu hanya berisi teks saja.
 Versi HTML2
HTML2 dirilis pada tanggal 14 Januari 1996 dengan beberapa penambahan fitur
baru salah satunya adalah fitur form. Versi HTML ini dapat dikatakan sebagai awal
4
untuk membuat sebuah web interaktif. Kembali lagi pada versi sebelumnya, mungkin
pada masa ini sudah bisa membubuhkan beberapa gambar pada web atau beberapa user
interface yang menarik sehingga menjadi interaktif.
 Versi HTML3
Dirilis pada tanggal 18 Desember 1997 dengan tetap konsisten menambahkan fitur
terbarunya salah satu fitur yang terkenal pada masa ini adalah fitur tabel didalam
paragraph. HTML3 dikenal juga dengan HTML+ karena banyak penambahan fitur
yang lebih fleksibel untuk membuat web yang intraktif.
 HTML3.2
Merupakan perkembangan dari HTML3 yang menambahkan sedikit kekurangan
atau kesalahan pada HTML3.
 HTML4
Dirilis pada tahun 1999 tepatnya tanggal 24 Desember. Dengan menambahkan fitur
seperti :
 imagemaps,
 link
 dan sebagainya.
Pada masa ini web sudah semakin interaktif dan lebih mementingkan tampilan yang
menarik serta nyaman kepada pengguna.
 HTML5
Ini adalah versi html yang diperbaharui hingga sekarang yang secara resmi dirilis
pada tahun 2009 yang menjadi standar terbaru sebuah web saat ini. HTML5 merupakan
proyek kerjasama antara W3C (World Wide Web Consurtium) dan WHATG (Web
Hypertext Application Technology Group).
Berikut adalah contoh dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
5
Penjelasan kode :
 <!DOCTYPE html>, pernyataan yang menjelaskan bahwa dokumen ini adalah
dokumen dengan versi HTML5.
 Elemen <html> adalah elemen root dari sebuah halaman HTML.
 Elemen <head> berisi informasi tambahan mengenai dokumen.
 Elemen <title> merupakan judul secara spesifik dari dokumen.
 Elemen <body> mengandung kontent yang akan ditampilkan pada halaman web.
 elemen <h1> mendefinisikan sebuah ukuran tag heading yang terbesar
 elemen <p> mendefinisikan sebuah paragraf.
b. Dasar-Dasar HTML
Tag-tag HTML
Tag-tag HTML adalah nama-nama elemen yang diawali dengan tanda kurung siku.
Contohnya :
<tagname>konten diletakkan di sini...</tagname>
 tag-tag HTML secara umum ditulis berpasangan seperti ini : <p> and </p>
 Tag pertama adalah merupakan tag awal dan tag kedua adalah tag akhir.
 Tag akhir ditulis seperti tag awal, namun disisipkan slash (garis miring) sebelum
nama tag.
 Tag awal disebut juga tag pembuka dan tag akhir disebut tag penutup.
Web Browsers
Tujuan dari sebuah web browser (Chrome, IE, Firefox, Safari) adalah untuk
membaca dokumen-dokumen HTML dan menampilkannya. Browser-browser tidak
menampilkan tag-tag HTML, tetapi menggunakan tag-tag tersebut untuk menentukan
bagaimana menampilkan dokumen :
6
Gambar 2.1 Contoh halaman web.
Struktur Halaman HTML

Berikut adalah visualisasi dari sebuah struktur halaman HTML
Gambar 2.2 Struktur HTML

Hanya konten di dalam bagian <body> (dengan area warna putih dalam gambar 2.2), yang
ditampilkan pada browser.
Deklarasi <!DOCTYPE>
Pernyataan <!DOCTYPE> merepresentasikan tipe dokumen, dan membantu
browser menampilkan halaman-halaman web dengan benar. Pernyataan ini hanya
dituliskan satu kali pada halaman paling atas (sebelum tag-tag HTML). Pernyataan <!
DOCTYPE> adalah tidak case sensitive. Penulisannya adalah sebagai berikut :
<!DOCTYPE html>
Elemen kosong HTML
Elemen-elemen HTML tanpa konten disebut elemen-elemen kosong. <br> adalah
sebuah elemen kosong tanpa sebuah tag penutup (tag <br> adalah tag untuk
mendefinisikan sebuah perpindahan baris).
Elemen-elemen kosong dapat “ditutup” pada tag pembuka seperti : <br />. HTML5
tidak memerlukan elemen kosong untuk ditutup. Tetapi jika diinginkan validasi yang ketat,
atau jika diperlukan agar dokumen dapat dibaca oleh parser XML, semua elemen harus
diberi tag penutup tanpa terkecuali.
Penggunaan tag-tag dengan huruf kecil

Tag-tag HTML tidak case sensitive, artinya <P> sama dengan <p>, tapi standar W3C
memberikan rekomendasi penggunaan huruf kecil pada HTML, dan keharusan penggunaan
huruf kecil untuk tipe-tipe dokumen seperti XHTML.
7
Atribut-atribut HTML
Atribut-atribut menyediakan informasi tambahan mengenai elemen-elemen HTML.
Atribut-atribut ini selalu ditulis pada tag pembuka, dan biasanya nama dan nilainya ditulis
seperti : name = “value”. Atribut direkomendasikan oleh W3C menggunakan huruf kecil,
sama halnya dengan elemen-elemen HTML.
- Atributie “lang” (bahasa)
Bahasa dari dokumen dapat dideklarasikan dalam tag <html> dengan atribut “lang”.
pendeklarasian sebuah bahasa penting untuk keperluan aksesibilitas dan mesin pencari.
Penulisannya sebagai berikut :
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Dua huruf pertama menjelaskan bahasa (contoh “en” – bahasa Inggris). Jika terdapat
dialek, gunakan dua atau lebih huruf (contoh “US” – dialek amerika).
- Atribut “title” atau judul
Di sini, sebuah atribut judul atau title ditambahkan pada elemen <p>. Nilai dari
atribut akan ditampilkan sebagai sebuah “tooltip” saat mouse berada di atas paragraf.
Sebagai contoh :
<p title="I'm a tooltip">
This is a paragraph.
</p>
- Atribut “href” atau link

Link-link HTML links didefinisikan dengan tag <a>. Alamat link secara spesifik
ditulis dalam atribut href. Contoh :
<a href="http://www.w3schools.com">This is a link</a>
- Atribut-atribut “Size” atau ukuran
Gambar-gambar HTML didefinisikan dengan tag <img>. Nama file dari sumber
(src), dan ukuran dari gambar (width = lebar dan height = tinggi) dinyatakan sebagai
atribut-atribut :
Contoh :
<img src="w3schools.jpg" width="104" height="142">
8
Ukuran gambar dituliskan dalam ukuran pixel : width="104" artinya 104 pixel
lebar layar
- Atribut “alt”
Atribute alt menjelaskan sebuah text alternatif yang digunakan, ketika gambar
tidak bisa ditampilkan. Nilai dari atribut dapat dibaca oleh pembaca layar. Hal ini
berarti seseorang “mendengarkan” pada halaman web, seperti seorang buta dapat
“mendengar” elemen.
Contoh :
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Tag Span dan tag Div
Tag <span> dan tag <div> adalah tag yang tidak memiliki makna apa-apa. Selain

kedua tag ini, tag-tag lain di dalam HTML memiliki makna masing-masing. Jadi, apa
fungsi dari kedua tag ini? Tag <span> dan tag <div> yang tidak bermakna ini malah
menjadi salah satu tag yang paling sering digunakan untuk membuat struktur web,
terutama tag <div>. Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek
tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS. Biasanya tag <div>
menggunakan atribut id sebagai pembeda antara tag <div> yang satu dengan yang lainnya.
Contoh paling umum untuk penggunaan tag <div> adalah sebagai container atau pembatas
satu struktur HTML dengan struktur lainnya. Berikut adalah contoh struktur HTML
menggunakan tag <div>:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Div</title>
</head>
<body>
<div id="header">
<h1>Judul Website</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
9
<div id="article_1">
<p>......Isi dari artikel.....</p>
</div>
</div>
<div id="sidebar">
<h1>Artikel Terbaru</h1>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</div>
<div id="footer">
<p>Footer ----</p>
</div>
</body>
</html>
Stuktur web diatas umum ditemukan pada web modern yang menggunakan CSS
untuk men-stylehalaman tersebut. Perhatikan bahwa masing-masing tag <div> memiliki
atribut id yang membedakannya dengan tag <div> lainnya.
Perbedaan antara tag Span dan tag Div
Secara garis besar, tag-tag di dalam HTML dapat dibagi menjadi 2 jenis,
yaitu Block-line dan In-line. Jenis tag Block-line atau Block-style adalah kelompok tag
yang ‘ingin’ berdiri sendiri, dan memisahkan diri dari tag disekitarnya.Block Style tag
umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi (enter) di
akhir tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>),
dan tabel (<table>). Tag Block-line akan membuat sebuah ‘blok’ dalam struktur HTML.
Di dalam tag ini bisa terdapat tag block lain, maupun tag In-line.
Jenis tag In-line atau Inline style adalah tag yang tidak membuat blok baru di
dalam struktur HTML. Tag jenis ini tidak menambahkan spasi di akhir tag, dan cenderung
menyambung tag sebelum dan sesudahnya dalam baris yang sama. Contoh tag
inline adalah tag garis miring (<em> atau <i>), tag penebalan (<strong> atau <b>) dan
tag link (<a>). Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk
kedalam in-line tag.
HTML Table
Sebuah tabel HTML didefinisikan dengan tag <table>. Setiap baris tabel didefinisikan
dengan tag <tr>. Sebuah tabel header didefinisikan dengan tag <th>. Secara default,
10
heading table adalah bold dan centered. Sebuah data/sel tabel didefinisikan dengan tag
<td>. Contoh :
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Table - Menambah sebuah Border (garis pembatas)
Jika tidak ditentukan secara spesifik garis pembatas pada sebuah tabel, maka akan
ditampilkan tanpa pembatas. Sebuah pembatas diset dengan property pembatas CSS.
Sebagai catatan definsikanlah garis pembatas tabel dan selnya.
Contoh :
table, th, td {
border: 1px solid black;
}
HTML Table - Collapsed Borders
Jika diingkinkan garis pembatas bertumpang tindih satu sama lain (collapsed),
tambahkanlah property CSS border-collapse.
Contoh :
table, th, td {
border-collapse: collapse;
}
HTML Table – Menambah Cell Padding
Cell padding men-spesifikkan spasi antara isi sel dan garis pembatasnya. Jika tidak di-
spesifikkan sebuah padding, sel-sel tabel akan ditampilkan tanpa padding. Untuk men-set
padding digunakan property CSS.
Contoh :
th, td {
padding: 15px;
}
11
HTML Table - Left-align Headings
Secara default, table heading atau kepala tabel adalah tebal dan posisinya berada ditengah.
Untuk membuat rata kiri dapat digunakan property CSS text-align.
Contoh :
th {
text-align: left;
}
HTML Table – Menambah Border Spacing
Border spacing men-spesifikkan spasi antara sel-sel. Untuk men-set border spacing sebuah
tabel, dapat menggunakan property CSS border-spacing. Jika tabel diset dengan collapsed
border, border-spacing tidak akan memberikan efek.
Contoh :
table {
border-spacing: 5px;
}
HTML Table – Sel dengan rentang menjadi beberapa kolom
Untuk membuat sebuah cell span (rentang sel) lebih dari satu kolom, gunakan atribut
colspan.
Contoh:
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - Sel dengan rentang menjadi beberapa baris

Untuk membuat sebuah cell span (rentang sel) lebih dari satu baris, gunakan atribut
rowspan.
Contoh:
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
12
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table – Menambah judul tabel
Menambah judul dari sebuah tabel dapat digunakan tag <caption>. Tag <caption> harus
disisipkan setelah tag <table>.
Contoh:
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Satu Style Khusus untuk Satu Tabel
Untuk mendefinisikan sebuah style khusus untuk sebuah tabel khusus, tambahkan sebuah
atribut id pada tabel.
Contoh :
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Sehingga, style khusus untuk tabel ini adalah :
13
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
dan, dapat pula ditambahkan style :

table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
HTML Form
Elemen <form>
Elemen HTML <form> mendefinsikan sebuah form yang digunakan untuk mengambil
masukan/input dari pengguna.
<form>
.
.
form elements
.
.
</form>
Sebuah HTML form berisi elemen-elemen form. Elemen-Elemen Form adalah terdiri dari
beberapa jenis elemen yang berbeda, seperti text fields, checkboxes, radio buttons, submit
buttons, dan seterusnya.
Elemen <input>
Elemen <input> adalah elemen yang paling penting dari elemen form. Elemen <input>
dapat ditampilkan dalam beberapa cara, tergantung pada tipe-tipe atributnya.
Tabel 3.1 Beberap contoh tipe elemen <input>
Tipe Deskripsi
<input type="text"> Mendefinisikan satu baris text input field
Mendefinisikan satu radio button (untuk memilih satu dari
<input type="radio">
beberapa pilihan)
<input type="submit"> Mendefinisikan satu submit button (untuk fom pengiriman )
<input type="password"> Mendefinsikan sebuah password field
<input type="reset"> Mendefinisikan satu tombol reset yang akan mereset semua
14
nilai menjadi nilai default.
Text Input
Contoh :
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Browser akan menampilkan seperti ini :
First name:
Last name:
Catatan, secara default, rentang isian sebuah text field adalah 20 karakter.
Radio Button Input
Radio buttons akan meminta user memilih SATU dari pilihan terbatas.
Contoh :
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Browser akan menampilkan kode HTML di atas sebagai berikut :
Male
Female
Other
The Submit Button
<input type="submit"> mendefinisikan sebuah tombol (button)

untuk submitting (mengirimkan) data dari form ke form-handler. Form-handler adalah
tipe halaman server dengan sebuah skrip untuk pemrosesan data yang dimasukkan. form-
handler secara khusus dalam atribut action dari form.
Contoh :
<form action="action_page.php">
First name:<br>
15
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
First name:
Mickey

Last name:
Mouse

Submit
Input Type Password
Contoh :
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Browser akan menampilkan kode HTML di atas seperti :

User name:
User password:
Karakter dalam password field akan tertutup (tampilan hanya berupa karakter asterik atau
bulatan hitam)
Input Type Reset
Contoh :
First name:<br>
Last name:<br>
<input type="reset">
</form>
Browser akan menampilkan kode HTML di atas seperti :

First name:
Mickey
Last name:
16
Mouse

Submit Reset

jika nilai-nilai input diubah kemudian tombol “Reset” ditekan, form-data akan direset ke
nilai default.
The Action Attribute

Atribut action mendefinisikan aksi yang akan dilakukan ketika form dikirimkan. Secara
normal, data form dikirim ke halaman web pada server ketika pengguna meng-klik pada
tombol submit. Pada contoh di atas, data form di kirim ke satu halaman pada server yang
diberi nama "action_page.php". Halaman ini berisi skrip server-side (sisi server) yang
mengolah data form.
Jika atribut action dihilangkan, aksi di-set pada halaman itu sendiri.
The Method Attribute
Atribut method menentukan HTTP method (GET atau POST) yang digunakan ketika

mengirimkan data form.
<form action="action_page.php" method="get">
Atau
<form action="action_page.php" method="post">
Kapan menggunakan GET?
Method default ketika pengiriman data form adalah GET. Namun, ketika GET digunakan,
data form yang dikirim akan terlihat pada field alamat halaman.
action_page.php?firstname=Mickey&lastname=Mouse
catatan, GET tidak boleh digunakan untuk mengirim informasi yang dirahasiakan !. GET
paling cocok untuk jumlah data kecil dan tidak rahasia.
Kapan menggunakan POST?

Selalu gunakan POST jika data berupa data atau informasi yang sifatnya rahasia. Method
POST tidak akan ditampilkan pada field alamat halaman ketika data form dikirim. POST
tidak memiliki batasan ukuran sehingga dapat digunakan untuk mengirim data dalam
jumlah yang besarhas no size limitations, and can be used to send large amounts of data.
Atribut Name
17
Setiap input field harus memiliki atribut name untuk dikirim. Jika atribut name
dihilangkan, data dari input field tidak akan dikirim. Contoh berikut hanya akan mengirim
input field dengan nama “last name”.
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
</form>
Pengelompokkan Form Data dengan <fieldset>

Elemen <fieldset> digunakan untuk mengelompokkan data-data yang berhubungan dalam
sebuah form. Elemen <legend> mendefinisikan judul untuk elemen <fieldset> . Contoh :
<fieldset>
<legend>Personal information:</legend>
First name:<br>
Last name:<br>
</fieldset>
</form>

Personal information:First name:
Mickey

Last name:
Mouse

Submit
18
1.4 Kegiatan Praktek
1. Buatlah file baru pada Visual Studio Code, kemudian beri nama modul 1.1_nama
panggilan anda.html
2. Ketiklah kode HTML berikut :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

</body>
</html>
3. Pada elemen heading <h1> dan <p> kemudian hilangkan tag penutupnya satu demi
satu, kemudian jalankan pada browser anda, berikan komentar terhadap hasil yang
anda dapatkan.
4. Buatlah file baru, kemudian beri nama modul 1.2_nama panggilan anda.html
<!DOCTYPE html>
<html>
<body>
<p>Jurusan Teknik Industri FT-UNG.</p>
<img src="teknikIndustri.jpg" width="104" height="142">
Ini adalah sebuah link
<a href="http://www.w3schools.com">This is a link</a>
</body>
</html>
6. Tambahkan sebuah “tooltip” pada paragraf di atas dengan teks “Prodi S1 Teknik
Industri”.
7. Ubahlah ukuran gambar menjadi 250 pixels lebarnya dan 400 pixels untuk tinggi.
8. Buatlah tulisan berwarna merah pada kode HTML nomor 5 menjadi sebuah link ke
www.ung.ac.id.
9. Gantilah link pada elemen <a> ke link www.ung.ac.id
10. Tag gambar pada kode HTML dalam nomor 5 tidak terdefinisi. Spesifikasikan teks
alternatif menjadi “Teknik Industri” untuk gambar.
11. Buatlah file html pada project anda, kemudian beri nama modul 2.1_nama panggilan
anda.html
19
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
13. Ubahlah kode HTML pada nomor 3 dengan membuat garis pembatas collapse ke
dalam satu garis pembatas dengan menambahkan CSS border-collapse property.
14. Ubahlah ukuran tabel pada kode HTML nomor 3 dengan lebar 300 pixel.
15. Tambahkan judul tabel “Nama-Nama”, kemudian ubahlah warna tulisan dalam setiap
sel menjadi warna putih dan warna latar sel berwarna hitam. Selanjutnya, buatlah rata
tengah untuk setiap data dalam sel.
16. Buatlah file html baru, kemudian beri nama modul 2.2_nama panggilan anda.html
<!DOCTYPE html>
<html>
<body>
</body>
20
</html>
18. Buat sebuah HTML form, berisi satu elemen <input> dengan type="button", dan
value="OK". Petunjuk : Buatlah satu elemen <form>, dan tempatkan elemen <input
type="button" value="OK"> di dalamnya.
19. Tambahkan 2 radio buttons ke dalam form. Satu untuk "male", dan satu untuk
"female", beri nama keduanya : name="gender".
20. Tambahkan satu submit button ke dalam form, dan tentukan bahwa form harus menuju
halaman "action_page.php". petunjuk : tambahkan satu elemen <input> dengan
type="submit". Set atribut action untuk elemen <form>.
21. Spesifikasikan bahwa form dikirimkan menggunakan method POST.
22. Jalankan setiap perubahan pada browser anda kemudia berikan komentar dari setiap
hasil yang anda dapatkan.
1.5 Tugas Mandiri

1. Buatlah sebuah dokumen web layout dari project aplikasi yang anda rancang.
2. Layout yang dirancang berupa desain dengan struktur HTML. Implementasi HTML
sudah mencakup table dan form.
21
PRAKTIKUM 2
2.1 Judul
Styling HTML dengan CSS (Cascading Style Sheet)
2.2 Tujuan
a. Mahasiswa dapat mengenal dan memahami CSS.
b. Mahasiswa dapat memahami penggunaan CSS untuk styling HTML
2.3 Dasar Teori
CSS memiliki kepanjangan Cascading Style Sheets. CSS menjelaskan bagaimana
elemen-elemen HTML ditampilkan pada layar, kertas atau pada media yang lain. CSS
meminimalisir pekerjaan yang banyak. CSS dapat mengontrol layout dari halaman-
halaman web secara sekaligus.
CSS dapat ditambahkan ke elemen-elemen HTML ke dalam 3 cara :
 Inline – dengan menggunakan atribut style dalam elemen-elemen HTML.
 Internal – dengan menggunakan satu elemen sesi <style> pada sesi <head>
 External – dengan menggunakan satu file eksternal CSS
Cara umum yang sering digunakan untuk menambahkan CSS adalah membuat file
secara terpisah. Namun pada pembahasan ini akan digunakan cara inline dan cara internal,
sebab kedua cara ini lebih mudah untuk didemontrasikan, dan mudah untuk dicoba sendiri.
Aturan Penulisan CSS
Aturan penulisan yaitu berisi selector dan blok deklarasi, yaitu :
Gambar 3.1 Aturan penulisan CSS
Selector adalah elemen HTML yang ingin diberikan style. Blok deklarasi terdiri dari satu
atau lebih deklarasi yang dipisahkan oleh semicolon (titik koma). Setiap deklarasi terdiri
dari satu name (nama) dan satu value (nilai) yang dipisahkan oleh koma. Sebuah deklarasi
CSS selalu diakhiri dengan satu semicolon, dan blok deklarasi dibuka dan ditutup oleh
kurung kurawal.
22
Inline CSS
Satu CSS inline digunakan untuk menerapkan style unik dari sebuah elemen tunggal
HTML. Satu CSS inline menggunakan atribut style untuk satu elemen HTML. Contoh
berikut men-set warna teks dari elemen <h1> menjadi warna biru.
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
Satu CSS internal digunakan untuk mendefinisikan sebuah style untuk satu halaman
HTML. Sebuah CSS internal didefinisikan pada sesi <head> dari halaman HTML, dengan
menggunakan satu elemen <style> :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
Satu halaman style digunakan untuk mendefinisikan style untuk beberapa halaman HTML.
Dengan sebuah halaman style eksternal, dapat mengubah penampilan sebuah web site
secara keseluruhan, hanya dengan satu file saja. Untuk menggunakan halaman style secara
eksternal, ditambahkan satu linknya pada sesi <head> dari halaman HTML.
Contoh :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
23
Sebuah halaman style eksternal dapat ditulis dalam beberapa editor teks. File tidak harus
berupa kode-kode HTML, tetapi harus disimpan dengan ekstensi .css. berikut contoh file
"styles.css" :
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
Properti CSS-color mendefinisikan warna teks yang digunakan. Properti The CSS font-

family mendefinisikan font yang digunakan. Properti CSS font-size mendefinsikan ukuran
teks yang digunakan.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
CSS Border
Properti CSS border mendefinisikan satu garis pembatas sekeliling sebuah elemen HTML.
24
Contoh :
p {
border: 1px solid powderblue;
}
CSS Padding
Properti CSS padding mendefinisikan satu padding (spasi) antara teks dan garis pembatas.
Contoh :
p {
padding: 30px;
}
CSS Margin
Properti CSS margin mendefinisikan sebuah margin (spasi) ke bagian luar dari garis

pembatas. Contoh :
p {
margin: 50px;
}
Atribut id
Untuk mendefinisikan sebuah style spesifik untuk satu elemeh khusus, dapat ditambahkan
atribut id pada elemen,
<p id="p01">I am different</p>
Selanjutnya, definisikan sebuah style untuk elemen dengan id spesifik. Catatan, id dari satu
elemen harus unik dalam sebuah halaman, sehingga selector id digunakan hanya unik
untuk satu elemen saja. Contoh :
#p01 {
color: blue;
}
Atribut class
Untuk mendefinisikan sebuah style untuk elemen-elemen tertentu, tambahkan sebuah

atribut class pada elemen.
<p class="error">I am different</p>
Selanjutnya, definisikan sebuah style untuk elemen-elemen dengan class yang spesifik.
25
Contoh :
p.error {
color: red;
}
Referensi Eksternal
Halaman-halaman style secara eksternal dapat direferensikan dengan sebuah URL lengkap
atau dengan path yang relatif kepada halaman web tersebut. Contoh berikut menggunakan
satu URL Lengkap yang berhubungan dengan satu halaman style. Contoh :
<link rel="stylesheet" href="http://www.w3schools.com/html/styles.css">
Contoh ini menghubungkan halaman style yang berada dalam folder html pada web site
tersebut.
Contoh :
<link rel="stylesheet" href="/html/styles.css">
Contoh ini berhubungan dengan suatu halaman style yang berada pada folder yang sama
dalam halaman web. Contoh :
<link rel="stylesheet" href="styles.css">
Warna Latar
Property background-color diperuntukkan untuk memberi warna latar dari sebuah elemen.
Warna latar dari sebuah halaman dapat ditetapkan seperti ini.
Contoh
body {
background-color: lightblue;
}
dengan CSS, penentuan satu warna biasanya menggunakan :

 nama warna yang valid – seperti “red”.
 nilai warna dalam bentuk Hexadecimal – misalnya "#ff0000"
 atau, dengan mode RGB – contohnya, rgb(255,0,0)
Dalam contoh berikut, elemen-elemen <h1>, <p>, and <div> memiliki warna latar yang
berbeda.
Contoh :
h1 {
background-color: green;
}
26
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Background Image (Latar dengan Gambar)

Properti background-image menspesifikkan sebuah gambar yang digunakan sebagai latar
dari sebuah elemen. Secara default, gambar diulang sehingga melingkupi semua elemen.
Latar gambar untuk sebuah halaman dapat di-set seperti contoh berikut.
Contoh :
body {
background-image: url("paper.gif");
}
Penentuan gambar yang akan dijadikan latar sebaiknya merupakan kombinasi yang sesuai
dengan tulisan yang berada di atasnya. Penyesuaian warna, jenis dan ukuran teks yang
akan diletakkan di atas gambar tersebut.
Background Image - Repeat Horizontally or Vertically (pengulangan tegak dan
mendatar)
Secara default, properti background-image mengulang sebuah gambar secara vertikal
(tegak) dan horizontal (mendatar). Pengulangan gambar sebaiknya memperhatikan
kesesuaian apakah gambar tersebut cocok diulang secara vertikal atau secara horizontal,
agar gambar yang ditampilkan nanti tidak kelihatan aneh. Jika pengulangan diulang hanya
secara mendatar penulisannya adalah background-repeat: repeat-x;, dan jika pengulangan
secara vertikal penulisannya yaitu background-repeat: repeat-y;.
Contoh :
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Background Image - Set position and no-repeat

Untuk menampilkan background image hanya satu kali dan juga ditetapkan dengan
properti background-repeat.
Contoh :
<!DOCTYPE html>
<html>
27
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>gambar hanya ditampilkan satu kali, tetapi mengganggu tulisan header!</p>
</body>
</html>
Jika contoh kode ini dijalankan pada browser, background image ditampilkan dibelakang
teks, sehingga teks dari header sulit dibaca. Selanjutnya, diinginkan untuk mengubah posisi
gambar, maka perubahan ini tidak akan mempengaruhi posisi teksnya. Properti spesifik
dari posisi gambar yaitu background-position.
Contoh :
body {
background-position: right top;
}
Perubahan posisi gambar telah berada ada sebelah kanan atas dari halaman.
Background Image - Fixed position
Untuk menetapkan gambar yang tidak berubah (tetap), digunakan properti background-
attachment.
Contoh :
body {
background-position: right top;
background-attachment: fixed;
}
Background - Shorthand property

Untuk menyingkat kode, juga sangat dimungkinkan penulisan properti background
menjadi satu baris saja. Yaitu hanya menulis background.
Contoh :
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
28
Ketika menggunakan penulisan singkat dari properti urutan value atau nilanya adalah
sebagai berikut :
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
tidak mengapa jika salah satu nilai atau value dari properti tidak ada, selama salah satunya
ada dari semua properti ini.

Buatlah file html baru pada project anda, ketiklah kode html berikut :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:black}
</style>
</head>
<body>
<h1> Lorem ipsum</h1>
<p> dolor sit amet.</p>

<p> consectetuer adipiscing elit.</p>
<p> Maecenas porttitor congue massa.</p>
</body>
</html>
1. Ubah warna latar halaman menjadi warna kuning.

2. Ganti font dari elemen h1 dan p menjadi font "courier".
3. Ubah warna tulisan paragraf dengan setiap paragraf berbeda warnanya.
4. Tambahkan border untuk paragraf dengan warna merah.
5. Buatlah file CSS eksternal dan buatlah style sesuai dengan keinginan anda, kemudian
beri nama “mystyel.css”, selanjutnya tambahkan ke halaman html yang telah anda buat
dengan cara URL.
6. Setlah warna latar halaman menjadi warna linen, menggunakan internal style sheet.
7. Sama dengan nomor 6, namun gunakan inline style.
29
8. Gantilah latar halaman dengan menggunakan gambar yang ada pada komputer anda,
gunakan gambar yang ukurannya kecil (maksimal 250 x 250 pixel).
9. Set-lah gambar tersebut diulang hanya secara vertikal.
10. Set-lah gambar tersebut, hanya ditampilkan satu kali pada sebelah kanan bawah dari
halaman.
11. Gunakan penulisan singkat untuk properti latar gambar tersebut ditampilkan hanya satu
kali, dan berada di sebelah kanan bawah halaman.
2.5 Tugas Mandiri

Perbaharui laman web dari project aplikasi yang anda rancang dengan menggunakan CSS
30
PRAKTIKUM 3
3.1 Judul
JavaScript
3.2 Tujuan
a. Mahasiswa dapat mengenal dan memahami bahasa pemrograman JavaScript.
b. Mahasiswa dapat menggunakan JavaScript untuk mengembangkan web dan HTML
3.3 Dasar Teori
JavaScript adalah bahasa script yang di-interpreter oleh browser (client-side). Pada
awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana
untuk browser Netscape Navigator 2. Sintaks penulisan JavaScript memiliki kemiripan
dengan bahasa pemrograman Java atau C yang bisa diterapkan dalam JavaScript, tetapi
perlu diingat JavaScript tidak sama dengan Java.
Penulisan kode JavaScript diletakkan di antara tag HTML. Dengan menambahkan
JavaScript akan membuat halaman web menjadi lebih menarik dan interaktif.
Menggunakan JavaScript memungkinkan kustomisasi terhadap dokumen HTML pada saat
diakses dengan menulis melalui penanganan event terhadap elemen-elemen tag HTML
dalam halaman tersebut, memeriksa data form pada sisi client dan melakukan perhitungan
pada sisi client hingga membuat animasi kursor mouse dan sebagainya.
Sintaks penulisan Java Script sebagai berikut :
<script language=”javascript”>

</script>
Cara Penulisan JavaScript

Script JavaScript dapat ditempatkan pada :
1. Body dalam dokumen HTML
<body>

</script>
</body>
31
2. Header, dalam bentuk function
<head>
Function namafunction(parameter input)
{
//baris kode fungsi di sini dan diakhiri oleh “;”
}
</script>
</head>
<head> function saya (x)

<script> {
Function-function … …
JavaScript yang </script> }
dipanggil dalam </head>
body …
<body>
…
…
</body>
3. Terpisah dari dokumen HTML (Eksternal JavaScript). Bilamana JavaScript diletakkan

pada file (file.js) terpisah maka file tersebut dapat dipanggil dengan cara :
<script language=”javascript” src=”path/file.js></script>
… …
<script> <script>
file.js …
…
… …
File1.html … File3.html
<script>
…
…
File2.html
Tampilan Web dengan JavaScript

JavaScript dapat "menampilkan" data dalam beberapa cara:
 Menulis ke dalam alert box, menggunakan window.alert().
Untuk menampilkan data data, dapat digunakan alert box:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
32
<script>
window.alert(5 + 6);
</script>
</body>
</html>
 Menulis ke dalam keluaran HTML menggunakan document.write().

Untuk keperluan pengujian, dimungkinkan untuk menggunakan
document.write():
Contoh :
<!DOCTYPE html>
<html>
<body>

<script>
document.write(5 + 6);
</script>
</body>
</html>
Penggunaan document.write() setelah seluruh dokumen HTML terbuka, akan

menghapus semua HTML yang ada. Sehingga penggunaan document.write(),
hanya untuk keperluan pengujian saja.
Contoh :
<!DOCTYPE html>
<html>
<body>

<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
 Menulis ke dalam elemen HTML, menggunakan innerHTML.

Untuk mengakses sebuah elemen HTML, JavaScript dapat menggunakan method
document.getElementById(id) method.
33
Atribut id mendefinisikan elemen HTML. Properti InnerHTML mendefinisikan
konten HTLM. Untuk “menampilkan data” di HTLM, (dalam banyak kasus) dapat
di-set nilai dari properti innerHTML
Contoh:
<!DOCTYPE html>
<html>
<body>

<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
 Menulis ke dalam console browser, menggunakan console.log().

Contoh :
<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>
</body>
</html>
Pernyataan-Pernyataan JavaScript
Pernyataan-pernyataan JavaScript disusun oleh Nilai, Operator, Eksrpesi, Kata
Kunci dan Komentar-Komentar
Nilai-Nilai JavaScript
Aturan penulisan JavaScript mendefinisikan dua jenis nilai, yakni nilai tetap dan nilai
berubah. Nilai tetap disebut literal. Nilai berubah disebut variables.
Literal-literal JavaScript
Aturan yang paling penting dalam penulisan nilai tetap adalah angka-angka ditulis dengan
atau tanpa tanda desimal.
34
Contoh :
10.50
1001
Strings adalah teks, penulisannya diantara tanda petik dua atau tanda petik satu.
Contoh:
"John Doe"
'John Doe'
Variabel-variabel JavaScript
Dalam bahasa pemrograman, variabel-variabel digunakan untuk menyimpan nilai data.
JavaScript menggunakan kata kunci var untuk mendeklarasikan variabel. Tanda sama
dengan digunakan untuk memasukkan nilai ke dalam variabel. Pada contoh berikut, x
didefinisikan sebagai sebuah variabel. Kemudian, x diberikan nilai 6.
Contoh :
var x;
x = 6;
Operator-operator JavaScript
JavaScript menggunakan operator aritmetika ( + - * / ) untuk menghitung nilai.
Contoh :
(5 + 6) * 10
Ekspresi-ekspresi JavaScript
Sebuah ekpresi adalah kombinasi dari nilai, variabel dan operator untuk menghitung
sebuah nilai.
Contoh :
5 * 10
Eksrpesi dapat juga berisi nilai variabel.
Contoh :
x * 10
nilai-nilai dapat berupa tipe yang bervariasi, misalnya berupa angka-angka dan string.
Sebagai contoh, "John" + " " + "Doe", dimaksudkan "John Doe":
"John" + " " + "Doe"
Kata-kata kunci JavaScript
Kata-kata kunci JavaScript digunakan untuk mendefinsikan aksi-aksi yang dilakukan. Kata
kunci var “menyuruh” browser untuk menciptakan variabel-variabel.
35
Contoh :
var x, y;
x = 5 + 6;
y = x * 10;
Komentar-Komentar JavaScript
Tidak semua pernyataan-pernyataan JavaScript yang “dieksekusi”. Kose setelah tanda dua
buah garis miring // atau antara /* dan */ dianggap sebagai sebuah komentar. Komentar
dilewati, dan tidak akan dieksekusi.
Contoh :
var x = 5; // I will be executed
// var x = 6; I will NOT be executed
Aturan Penulisan Function (Fungsi) JavaScript

Sebuah fungsi JavaScript didefinisikan dengan kata kunci function, yang diikuti
oleh sebuah nama kemudian diikuti oleh tanda kurung buka dan kurung tutup (). Nama
fungsi dapat berupa huruf, angka, garis bawah dan tanda dollar. Kurung buka dan kurung
tutup dapat berisi parameter yang dipisahkan oleh koma (parameter1, parameter2, ...).
Kode yang akan dieksekusi oleh fungsi ditempatkan di antara tanda kurung kurawal buka
dan kurung kurawal tutup.
Contoh :
function name(parameter1, parameter2, parameter3) {
code to be executed
}
parameter-parameter fungsi diurutkan dalam definisi fungsi. Argument-argumen fungsi
adalah nilai-nilai asli yang diterima ketika fungsi dipanggil. Di dalam fungsi, argumen
(parameter) bertindah sebagai variabel lokal.
Pemanggilan Fungsi
Kode di dalam fungsi akan dieksekusi ketika “sesuatu” memanggil fungsi, yaitu :
 Ketika sebuah event terjadi (ketika pengguna meng-klik sebuah tombol).
 Ketika fungsi tersebut dipanggil dari kode JavaScript
 Secara otomatis (pemanggilan diri sendiri)
Keluaran dari Fungsi
Ketika JavaScript sampai pada pernyataan return, fungsi akan berhenti mengeksekusi.
Jika fungsi dipanggil dari sebuah pernyataan, JavaScript akan “mengembalikan” kepada
kode setelah pernyataan pemanggilan. Fungsi sering menghitung sebuah keluaran nilai.
Nilai “dikembalikan” kepada pemanggil.
36
Contoh : menghitung perkalian dua bilangan dan mengembalikan hasilnya.
var x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
hasilnya adalah : 12
Mengapa menggunakan Fungsi?
Kode dapat digunakan kembali: pendefinisian satu kali dan penggunaannya berulang kali.
Penggunaan kode yang sama berulang kali dengan argumen-argumen yang berbeda, untuk
menghasilkan hasil yang berbeda pula.
Contoh : Konversi Fahrenheit ke Celcius
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
The () Operator Invokes the Function

Gunakan contoh di atas, toCelsius mengacu pada objek fungsi dan toCelsius() mengacu
pada hasil fungsi.
Contoh :
Pengaksesan sebuah fungsi tanpa () akan mengembalikan definisi fungsi.
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
Fungsi digunakan sebagai nilai dari variabel

Fungsi dapat digunakan seperti halnya penggunaan variabel, dalam semua rumus,
penetapan nilai dan perhitungan.
Contoh penggantian variabel untuk menyimpan hasil keluaran dari fungsi.
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";
fungsi dapat digunakan secara langsung, seperti nilai variabel, contoh :

var text = "The temperature is " + toCelsius(77) + " Celsius";

1. Buatlah file html baru pada editor VS Code, kemudian ketikkan kode berikut :
<!DOCTYPE html>
37
<html>
<body>
<p id="demo">Tampilan Hasil di sini.</p>
<script>
// buat variabel di sini
</script>
</body>
</html>
a. Buatlah variabel dan beri nama NamaMobil, kemudian tetapkan nilainya

“Inova” ke dalam variabel tersebut, kemudian tampilkan hasil ke halaman web.
b. buatlah sebuah variabel, beri nama angka, tetapkan nilainya 50, kemudian
tampilkan hasilnya.
c. Tampilkan penjumlahan 5 + 10, menggunakan dua variabel x dan y.
d. Buatlah variabel ketiga dengan nama z, masukkan hasil penjumlahan x + y ke
dalam variabel tersebut, kemudian tampilkan hasilnya.
e. Gunakan variabel tunggal untuk menampilkan tiga variabel dengan nilai :
f. NamaDepan = “Kaita”, NamaBelakang =”Nyonyo”, umur = 35.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
// Call the function here
</script>
</body>
</html>
a. Buatlah statement untuk memanggil fungsi.

b. Ubahlah fungsi di atas untuk menampilkan penjumlahan 5 + 5
c. Tambahkan pada fungsi judul “hasil penjumlahan”
d. Tampilkah fungsi di atas pada elemen <p>
<!DOCTYPE html>
<html>
38
<body>
<p id="demo"></p>
<script language=javascript>
angka = window.prompt(“masukkan sebuah angka =“,0);
if (angka%2==0){
Document.write(“Bilangan Genap”);
}else{
Document.write(“Bilangan Ganjil”);
}
</script>
</body>
</html>
a. Perbaiki kode di atas, kemudian jalankan.
b. Tambahkanlah script windows.status =”Program JavaScript Saya”;
c. Tambahkan script pada program di atas jika pengguna memasukkan angka 0
maka akan muncul konfirmasi bahwa angka 0 yang masukkan.
3.5 Tugas Mandiri

Perbaharui laman web dari project yang anda rancang dengan mengintegrasikan
JavaScript.
39
PRAKTIKUM 4
4.1 Judul
JQuery
4.2 Tujuan
a. Mahasiswa dapat mengenal dan memahami JQuery sebagai library untuk
penyederhanaan implementasi JavaScript pada laman web.
b. Mahasiswa dapat menggunakan JQuery untuk mengembangkan web.
4.3 Dasar Teori

JQuery merupakan pustaka dari JavaScript yang lightweight (ringan), “menulis
lebih sedikit, melakukan lebih banyak”. JQuery bertujuan untuk mempermudah
penggunaan dari JavaScript pada situs web.
Jika pada JavaScript membutuhkan baris kode yang banyak untuk menyelesaikan
tugas-tugas umum, maka dengan JQuery, tugas umum tersebut dibungkus dengan metode
yang dapat dipanggil dengan satu barus kode. JQuery juga menyederhanakan banyak hal
yang rumit dari JavaScript, seperti panggilan AJAX dan manipulasi DOM.
Pustaka jQuery berisi fitur-fitur :
 Manipulasi HTML/DOM
 Manipulasi CSS
 Metode event HTML
 Efek dan animasi
 AJAX
 Utilities
Terdapat beberapa cara untuk menggunakan jQuery pada situs web :
 Mengunduh pustaka JQuery dari jQuery.com
 Menyertakan JQuery dari CDN
Mengunduh jQuery
Ada dua versi jQuery yang tersedia untuk diunduh :
 Versi produksi – versi ini situs web secara langsung karena telah diperkecil dan
dikompres.
 Versi pengembangan – versi ini untuk pengujian dan pengembangan (kode tidak
dikompres dan dapat dibaca)
Kedua versi ini dapat diunduh pada jQuery.com
40
Pustaka jQuery adalah file JavaScript tunggal, dan mereferensikannya dengan
<script>tag HTML</script> :
<head>
<script src =”jquery-3.5.1.min.js”></script>
</head>
jQuery CDN
bila tidak ingin mengunduh dan menghosting jQuery sendiri, dapat memasukannya dari
CDN (Content Delivery Network)
Google CDN :
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.
min.js">
</script>
</head>
Sintaks jQuery
Sintaks jQuery dikhususkan untuk memilih elemen-elemen HTML dan melakukan
beberapa aksi pada elemen-elemen HTML tersebut.
Sintaks dasar : $(selector).action()
 Tanda $ mendefinisikan/mengakses jQuery
 (selector) untuk “memanggil (atau mencari)” elemen HTML
 jQuery .(action) dilakukan pada elemen HTML tersebut
contoh :
$(this).hide() – menyembunyikan elemen yang ditunjuk.
$("p").hide() – menyembunyikan semua elemen <p>.
$(".test").hide() – menyembunyikan semua elemen dengan
class="test".
$("#test").hide() – menyembunyikan elemen dengan id="test".
41
The Document Ready Event
Penulisan semua method jQuery semua ditempatkan dalam sebuah Document
Ready Event :
$(document).ready(function(){
// jQuery methods di sini...
});
Hal ini untuk mencegah kode jQuery berjalan sebelum dokumen selesai dimuat (atau siap).
Merupakan cara yang baik untuk menunggu dokumen selesai dimuat secara keseluruhan
dan siap sebelum bekerja dengan kode-kode jQuery. Hal ini juga memungkinkan untuk
penempatan kode JavaScript sebelum body dari dokumen, pada bagian head.
Berikut beberapa contoh dari aksi yang dapat gagal jika method dijalankan sebelum
dokumen dimuat secara sempurna :
 mencoba menyembunyikan sebuah elemen yang belum dibuat
 mencoba mendapatkan ukuran dari sebuah gambar dimana belum dibuka.
jQuery Selectors
jQuery selectors memungkinkan untuk memilih dan memanipulasi elemen-elemen HTML.
jQuery selectors digunakan untuk “mencari” (atau memilih) elemen-elemen HTML
berdasarkan nama, id, class, tipe, atribut, nilai dari atribut dan masih banyak lagi.
Semua selector dalam jQuery diawali dengan karakter dollar dan tanda kurung : $().
The Element Selectors

jQuery element selector memilih elemen berdasarkan pada nama elemen. Pemilihan
elemen dapat dilakukan pada semua elemen misalnya <p> pada sebuah laman contohnya :
$(“p”).
contoh :
$("button").click(function(){
$("p").hide();
});
});
The #id Selector

jQuery #id selector menggunakan atribut id dari sebuah tag HTML untuk mencari
elemen tertentu. Sebuah id harus unik dengan sebuah laman, sehingga seharusnya
42
menggunakan selector #id ketika mencari sebuah elemen yang unik. Untuk mencari sebuah
elemen dengan id tertentu, tuliskan sebuah karakter hash, diikuti id dari elemen HTML :
$("#test")
Contoh :
Ketika pengguna meng-click sebuah tombol, elemen dengan id=”test” akan
disembunyikan :
$("#test").hide();
});
});
The .class Selector

jQuery .class selector mencari elemen dengan kelas terentu. Untuk mencari elemen dengan
spesifikasi kelas tertentu, tuliskan karakter titik, diikuti dengan nama dari kelas :
$(".test")
Contoh :
Ketika pengguna meng-click sebuah tombol, elemen dengan class=”test” akan
disembunyikan :
$(".test").hide();
});
});

1. Buatlah file html baru pada vscode
2. Ketiklah script berikut :
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquer
y.min.js"></script>
<script>
$("*").hide();
});
});
</script>
</head>
43
<body>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3. Jalankan script tersebut
4. Gantilah $("*").hide(); dengan $(this)
5. Tambahkan dua buah elemen paragraf pada script no 1, kemudian buatlah class
dengan nama “intro” pada salah satu elemen paragraf tersebut. Buatlah jQuery
untuk menyembunyikan elemen paragraf yang diberi nama class intro tadi.
6. Ketiklah script berikut :
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquer
y.min.js"></script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>Click me</button>
</body>
</html>
7. Pada script pada nomor 6, buatlah kode jQuery untuk menyembunyikan item coffee
pada list 1
4.5 Tugas Mandiri

Perbaharui laman web dari project yang anda rancang dengan mengintegrasikan jQuery.
44
PRAKTIKUM 5
5.1 Judul
PHP (Hypertext Preprocessor)
5.2 Tujuan
c. Mahasiswa dapat mengenal dan memahami PHP sebagai bahasa pemrograman
pada sisi server.
d. Mahasiswa dapat menggunakan PHP untuk mengembangkan web.
5.3 Dasar Teori

PHP adalah singkatan dari Hypertext Preprocessor". Penggunaan PHP sudah sangat
luas digunakan saat ini sebagai bahasa scripting yang open source. Skrip atau kode PHP
dieksekusi di sisi server dan yang paling mendasar mengapa PHP paling banyak diminati
orang sebab PHP bebas atau gratis digunakan ataupun di unduh. PHP adalah bahasa yang
populer dan sangat luar biasa karena digunakan sebagai inti pada sistem web terbesar yaitu
WordPress, dan pada jaringan media sosial yaitu Facebook. PHP sangat mudah dipelajari
sehingga cocok untuk pemula untuk mempelajari kode pemrograman pada sisi server.
Apa itu file PHP?
 File-file PHP dapat berupa teks, HTML, CSS, JavaScript, dan kode PHP.
 Kode PHP dieksekusi pada server, dan mengirimkan hasilnya kepada browser
untuk ditampilkan secara sederhana oleh HTML
 File-file PHP berekstensi ".php"
Apa yang dapat dilakukan oleh PHP?
 PHP dapat meng-generate konten halaman secara dinamis.
 PHP dapat meng-create, open, read, write, delete, dan close file-file pada server.
 PHP dapat mengumpulkan data form
 PHP dapat mengirim dan menerima cookies.
 PHP dapat menambah, menghapus, memodifikasi data dalam database
 PHP dapat digunakan untuk mengendalikan akses
 PHP dapat mengenkripsi data
Dengan PHP keluaran-keluaran tidak dibatasi. Keluarannya dapat berupa gambar, file
PDF, bahkan Flash movies. Selain itu pula, keluarannya dapat berupa teks, seperti
XHTML dan XML.
45
Mengapa PHP?
 PHP dapat berjalan pada beberapa platform (Windows, Linux, Unix, Mac OS X,
etc.)
 PHP cocok untuk hampir semua server yang digunakan saat ini (Apache, IIS, etc.)
 PHP mendukung jangkauan secara luas dari database.
 PHP gratis, dapat diunduh pada situs resminya: www.php.net
 PHP mudah untuk dipelajari dan berjalan secara efisien pada sisi server.
Dasar Aturan Penulisan PHP
Sebuah skrip PHP dapat ditambahkan pada semua tempat dalam dokumen. Skrip PHP
script dimulai dengan <?php dan diakhiri dengan ?>:
<?php
// Kode-kode PHP di sini
?>
Ekstensi default dari file-file PHP adalah".php". secara normal, satu file PHP berisi tag-tag
HTML, dan beberapa script kode PHP. Berikut contoh file PH sederhana, dengan sebuah
skrip PHP yang menggunakan fungsi built-in "echo" untuk menampilkan teks "Hello
World!" pada sebuah halaman web.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
Sebagai catatan, pernyataan-pernyataan PHP diakhiri dengan semicolon (;).
Komentar-Komenter pada PHP
Sebuah komenter dalam kode PHP adalah sebuah baris yang tidak dibaca/dieksekusi dan
merupakan bagian dari program. Komentar hanya ditujukan untuk orang yang ingin
mengetahui makna dari kode.
Komentar dapat digunakan untuk:
 Memberikan informasi kepada orang lain mengenai apa yang programer lakukan.
 Sebagai pengingat kepada pembuat kode. Hampir semua programer memperoleh
pengalaman dengan melihat kembali terhadap apa yang telah mereka lakukan pada
satu atau beberapa tahun sebelumnya
46
PHP mendukung beberapa cara penulisan komentar.
Contoh :
<!DOCTYPE html>
<html>
<body>
<?php
// ini adalah komentar per baris
# ini juga komentar per baris
/*
ini blok komentar jika diperlukan beberapa
baris
*/
// komentar juga dapat digunakan sebagai pemisah antara kode

$x = 5 /* + 15 */ + 5;
echo $x;
?>
</body>
</html>
PHP Case Sensitivity

Dalam PHP, semua kata-kata kunci (misal: if, else, while, echo, dll.), kelas-kelas, fungsi-
fungsi, dan fungsi-fungsi yang didefinisikan oleh pengguna adalah TIDAK case-sensitive.
Dalam contoh berikut, tiga pernyataan echo adalah dibolehkan atau sama.
Contoh:
<!DOCTYPE html>
<html>
<body>
<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>
</body>
</html>
Mesikipun, semua nama variabel adalah case-sensitive. Dalam contoh berikut, hanya
pernyataan pertama yang akan ditampilkan nilai dari variabel $color, (hal ini dikarenakan
$color, $COLOR, adalah $coLOR dianggap sebagai tiga variabel yang berbeda).
Contoh :
47
<!DOCTYPE html>
<html>
<body>
<?php
$color = "red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>
</body>
</html>
Deklarasi variabel PHP

Pada PHP, sebuah variabel diawali dengan tanda $, kemudian diikuti oleh nama variabel.
Contoh :
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
Setelah mengeksekusi pernyataan di atas, variabel $txt akan memiliki nilai Hello world!,
variabel $x akan bernilai 5, dan variabel $y akan bernilai 10.5. Catatan, jika diinginkan
memberikan sebuah teks ke dalam variabel, harus diberi tanda petik. Tidak seperti bahasa
pemrograman, PHP tidak memiliki perintah untuk mendeklarasikan variabel. Variabel
akan dibuat ketika pertama kali menetapkan nilai ke dalam variabel tersebut.
Variabel-Variabel PHP
Nama Sebuah variabel dapat berupa huruf (seperti x dan y) atau nama yang lebih deskriptif
(umur, namamobil, total_volume).
Aturan untuk variabel PHP :
 Variable dimulai dengan tanda $, diikuti oleh nama variabel.
 Nama variabel harus diawali dengan huruf atau garis bawah (underscore
character).
 Nama variabel tidak boleh diawali dengan sebuah angka.
 Nama variabel hanya berisi karakter alpha-numeric dan underscore (A-z, 0-9, dan
_ ).
 Nama variabel adalah case-sensitive ($umur and $UMUR adalah dua variabel yang
berbeda).
Variabel-Variabel Keluaran
48
Pernyataan PHP echo sering digunakan untuk menampilkan data ke layar.
Contoh :
<?php
$txt = "Fakultas Teknik";
echo "Aku mahasiswa $txt!";
?>
Contoh berikut akan menghasilkan keluaran yang sama dengan yang di atas :
<?php
$txt = "Fakultas Teknik";
echo "Aku mahasiswa " . $txt . "!";
?>
Contoh berikut akan menampilkan jumlah dari dua variabel :

<?php
$x = 5;
$y = 4;
echo $x + $y;
?>
Dalam contoh di atas, perhatikan bahwa variabel-variabelnya tidak ditentukan tipe datanya.
PHP secara otomatis mengubah variabel ke dalam tipe data yang benar, tergantung
nilainya. Pada bahasa pemrograman yang lain seperti C, C++, dan Java, programer harus
mendeklarasikan nama dan tipe variabel sebelum menggunakannya.
Ruang lingkup variabel PHP

Dalam PHP, variabel dapat dideklarasikan dimanapun dalam skrip. Ruang lingkup PHP
dibedakan menjadi tiga :
 Lokal
 global
 static
Ruang lingkup Global dan Local
Variabel yang dideklarasikan di luar sebuah fungsi memiliki lingkup GLOBAL dan hanya
dapat diakses di luar fungsi.
Contoh :
<?php
$x = 5; // global scope
function myTest() {
// menggunakan variabel x akan menghasilkan error
echo "<p>Variable x inside function is: $x</p>";
}
49
myTest();
echo "<p>Variable x outside function is: $x</p>";

?>
Sebuah variabel dideklarasikan di dalam sebuah fungsi maka variabel ini memiliki lingkup
LOKAL dan hanya dapat diakses di dalam fungsi.
Contoh :
<?php
function myTest() {
$x = 5; // local scope
echo "<p>Variable x inside function is: $x</p>";
}
myTest();
// menggunakan x di luar fungsi akan menghasilkan error

echo "<p>Variable x outside function is: $x</p>";
?>
Nama variabel lokal boleh sama untuk fungsi yang berbeda, karena variabel lokal hanya
dikenali oleh fungsi yang mendeklarasikannya.
Kata Kunci global PHP
Kata kunci global digunakan untuk mengakses variabel global dari dalam fungsi. Untuk
melakukan ini, gunakan kata kunci global sebelum variabel (di dalam fungsi).
Contoh :
<?php
$x = 5;
$y = 10;
function myTest() {
global $x, $y;
$y = $x + $y;
}
myTest();
echo $y; // outputs 15
?>
PHP juga menyimpan semua variabel global dalam sebuah array yang disebut
$GLOBALS[index]. Index merupakan nama variabel. Array ini juga dapat diakses dari
dalam fungsi dan dapat digunakan untuk meng-update variabel global secara langsung.
Contoh di atas dapat diperbaharui seperti berikut :
<?php
$x = 5;
$y = 10;
50
function myTest() {
$GLOBALS['y'] = $GLOBALS['x'] + $GLOBALS['y'];
}
myTest();
echo $y; // outputs 15
?>
Kata Kunci static PHP

Biasanya, ketika sebuah fungsi selesai dieksekusi, semua variabel akan dihapus. Meskipun,
kadang diinginkan sebuah variabel lokal tidak dihapus, sebab diperlukan untuk tugas
berikutnya. Untuk melakukan hal ini dapat digunakan kata kunci static ketika pertama kali
mendeklarasikan variabel.
Contoh :
<?php
function myTest() {
static $x = 0;
echo $x;
$x++;
}
myTest();
myTest();
myTest();
?>
Selanjutnya, setiap kali fungsi dipanggil, variabel tersebut akan tetap memiliki informasi
yang dimilikinya dari saat terakhir fungsi itu dipanggil.
Catatan, variabel tersebut tetap variabel lokal.
PHP Global Variables - Superglobals
Beberapa predefined variabel dalam PHP adalah "superglobals", yang berarti bahwa
variabel ini selalu bisa diakses, tanpa memperhatikan batasan tertentu. Variabel ini dapat
diakses dari fungsi, kelas atau file tanpa melakukan sesuatu yang khusus. Variabel-variabel
ini adalah:
 $GLOBALS
 $_SERVER
 $_REQUEST
 $_POST
 $_GET
 $_FILES
 $_ENV
 $_COOKIE
51
 $_SESSION
PHP $GLOBALS
$GLOBALS adalah sebuah super global variabel PHP yang digunakan untuk mengakses
variabel dari mana saja dalam skrip PHP (juga dari fungsi atau method). PHP menyimpan
semua variabel global dalam array yang disebut $GLOBALS[index]. Index mengacu pada
nama dari variabel. Contoh berikut menunjukkan bagaimana menggunakan variabel super
globar $GLOBALS.
Contoh :
<?php
$x = 75;
$y = 25;

function addition() {
$GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}

addition();
echo $z;
?>
Dalam contoh di atas, karena z adalah variabel yang dinyatakan dengan array $GLOBAL,
maka variabel z tersebut dapat diakses dari luar fungsi.
PHP $_SERVER
$_SERVER adalah variabel super global PHP yang berisi informasi mengenai header, path
dan lokasi skrip. Contoh berikut menunjukkan bagaiaman menggunakan beberapa elemen-
elemen $_SERVER.
Contoh :
<?php
echo $_SERVER['PHP_SELF'];
echo "<br>";
echo $_SERVER['SERVER_NAME'];
echo "<br>";
echo $_SERVER['HTTP_HOST'];
echo "<br>";
echo $_SERVER['HTTP_REFERER'];
echo "<br>";
echo $_SERVER['HTTP_USER_AGENT'];
echo "<br>";
echo $_SERVER['SCRIPT_NAME'];
?>
PHP $_REQUEST
PHP $_REQUEST digunakan untuk mengumpulkan data setelah pengiriman HTML form.
Contoh berikut menunjukkan sebuah form dengan satu input dan satu tombol kirim.
52
Ketikan user submits (mengirim) data dengan meng-klik pada "Submit", data form dikirim
ke file tertentu yang ditetapkan pada atribut aksi dari tag <form> tag. Dalam contoh, file
itu sendiri yang dituju untuk mengolah data. Jika diinginkan untuk menggunakan file PHP
lain untuk mengolah data, tinggal diganti dengan nama file yang dituju. Kemudian, dapat
digunakan variabel super global $_REQUEST untuk mengumpulkan nilai yang
dimasukkan dalam input field.
Contoh :
<html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_REQUEST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
</body>
</html>
PHP $_POST
PHP $_POST secara luas digunakan untuk mengumpulkan data form setelah sebuah
HTML form mengirimkannya dengan method “post”. $_POST juga sering digunakan
untuk mengirimkan variabel. Contoh berikut menunjukkan sebuah form dengan satu input
field dan satu tombol submit. Ketika pengguna mengirim data dengan meng-klik pada
tombol submit, data form akan dikirim ke file tertentu yang dispesifikkan dalam atribut
action dari tag <form>. Pada contoh ini ditunjukkan file pemrosesnya adalah file itu
sendiri. Jika diinginkan file tersendiri untuk memproses data, dapat diganti nama file
dengan file lain tersebut. Selanjutnya, dapat digunakan variabel super global $_POST
untuk mengumpulkan data pada field input.
Contoh :
<html>
<body>
53
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// mengumpulkan nilai dari field input
$name = $_POST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
</body>
</html>
PHP $_GET
PHP $_GET juga dapat digunakan untuk mengumpulkan data form setelah pengiriman
HTML form dengan method="get". $_GET juga dapat mengumpulkan data dalam URL.
Dapat diasumsikan halaman HTML berisi hyperlink dengan parameter :
<html>
<body>
<a href="test_get.php?subject=PHP&web=W3schools.com">Test $GET</a>
</body>
</html>
Ketika pengguna meng-klik pada link "Test $GET", parameter "subject" dan "web" dikirim
ke "test_get.php", dan nilai tersebut dapat diakses dalam "test_get.php" dengan $_GET.
The example below shows the code in "test_get.php".
Contoh :
<html>
<body>
<?php
echo "Study " . $_GET['subject'] . " at " . $_GET['web'];
?>
</body>
</html>
54
1. Buatlah file php baru pada editor VS Code, kemudian ketikkan kode berikut :
<!DOCTYPE html>
<html>
<body>
<?php
$txt1 = Jika tulisan ini berhasil ditampilkan
$txt2 = koding PHP yang pertama;
$x = “5”;
$y = 4;
print "<h2>" . $txt1 . "</h2>";

print "Anda berhasil membuat" . $txt2 . "<br>";
print $x + $y;
?>
</body>
</html>
2. Jalankan file tersebut, jika ada error, perbaiki errornya kemudian jalankan lagi. Berikan
komenter terhadap hasil yang anda dapatkan.
3. Buatlah file php baru pada editor VS Code, beri nama “handling51.php” kemudian
ketikkan kode berikut :
<html>
<body>
<form action=welcome.php method="post">
Name: <input type="text" name="name"><br>
nim: <input type="text" name=nim><br>
Program studi: <input type="text" name=ps><br>
</form>
</body>
</html>
4. Jalankan skripnya. Jika ada kesalahan, pebaiki, kemudian jalankan lagi. Tekan tombol
submit, perhatikan hasilnya. Berikan komentar atas hasil yang anda dapatkan.
5. Buatlah file php baru, beri nama “welcome.php”. kemudian ketikkan kode berikut:
<html>
<body>
Welcome <?php echo $_POST[name]; ?><br>

NIM anda adalah: <?php echo $_POST[nim]; ?>
Anda mahasiswa program studi: <?php echo $_POST[nim]; ?>
</body>
</html>
55
6. Jalankan kembali handling51.php, kemudian klik tombol submit, jika ada kesalahan
perbaiki kesalahannya kemudian jalankan kembali. Kemudian berikan komentar dari
hasil yang anda dapatkan.
7. Gantilah method pada file handling51.php dalam tag <form> menjadi ‘get’ kemudian
jalankan. Berikan penjelasan perbedaanya dengan method ‘post’ tadi.
5.5 Tugas Mandiri

Implementasikan PHP untuk mengelola sisi server dari aplikasi yang anda rancang
56
PRAKTIKUM 6
6.1 Judul
SQL (Strutured Query Language) dan MySQL
6.2 Tujuan
a. Mahasiswa dapat mengenal dan memahami serta menggunakan SQL sebagai
bahasa untuk mengakses database atau basis data
b. Mahasiswa dapat membuat database MySQL dengan menggunakan PHPMyAdmin
6.3 Dasar Teori
a. SQL
SQL adalah Structured Query Language, merupakan bahasa yang dapat mengakses
dan memanipulasi database. SQL adalah merupakan suatu standar ANSI (American
National Standards Institute). SQL dapat :
- mengeksekusi query terhadap database,
- mengambil data dari database
- menyisipkan record (urutan data) ke dalam database
- memperbaharui record dalam database
- menghapus record dari database
- membuat database baru
- menyimpan prosedur dalam database
- membuat view-view dalam database
- men-set permission pada tabel, prosedur dan view.
Menggunakan SQL dalam Web Site
Untuk membangung sebuah web site yang menampilkan data dari database, diperlukan :
 program RDBMS database (misalnya, MS Access, SQL Server, MySQL)
 bahasa pengkodean server, seperti PHP atau ASP
 pernyataan-pernyataan SQL untuk mengambil data yang diinginkan
 HTML / CSS
RDBMS
RDBMS adalah Relational Database Management System. RDBMS adalah dasar untuk
SQL, dan untuk semua sistem database moderen seperti MS SQL Server, IBM DB2,
Oracle, MySQL, and Microsoft Access. Data dalam RDBMS disimpan dalam objek
database yang disebut tabel. Sebuah tabel adalah kumpulan dari data-data yang saling
berhubungan dan terdiri dari baris dan kolom.
57
Aturan penulisan SQL
Tabel Database
Sebuah database biasanya berisi satu atau lebih tabel . setiap tabel diidentifikasikan dengan
sebuah nama misalnya, pegawai. Tabel berisi record (barisan atau urutan data).
Berikut contoh tabel Customer:
Tabel 5.1 Tabel Customer
CustomerI
CustomerName ContactName Address City PostalCode Country
D
1 Alfreds Futterkiste Maria Anders Obere Str. 57 Berlin 12209 Germany
Avda. de la
Ana Trujillo Emparedados y México
2 Ana Trujillo Constitución 05021 Mexico
helados D.F.
2222
México
3 Antonio Moreno Taquería Antonio Moreno Mataderos 2312 05023 Mexico
D.F.
4 120 Hanover
Around the Horn Thomas Hardy London WA1 1DP UK
Sq.
Christina
5 Berglunds snabbköp Berguvsvägen 8 Luleå S-958 22 Sweden
Berglund
Tabel di atas berisi lima record (satu untuk setiap pelanggan) dan 7 kolom (CustomerID,
CustomerName, ContactName, Address, City, PostalCode, dan Country).
pernyataan SQL
kebanyakan aksi yang diperlukan untuk mengakses database dilakukan dengan pernyataan-
pernyataan SQL. Pernyataan berikut menyelesi atau mengambil semua record dalam tabel
“Customer”.
Contoh :
SELECT * FROM Customers;
Sebagai catatan, kata kunci SQL adalah TIDAK case-sensitive: select sama dengan
SELECT.
Beberapa sistem database mengharuskan tanda titik koma (semicolon) pada akhir
pernyataan SQL. Titik koma adalah suatu standar untuk memisahkan penyataan SQL
dalam sistem database yang memungkinkan satu atau beberapa pernyataan SQL dieksekusi
pada pemanggilan yang sama pada server.
Beberapa pernyataan penting SQL :
 SELECT – mengambil data dari database
SELECT nama_kolom,nama_kolom
FROM nama_tabel;
dan
SELECT * FROM nama_tabel;
Contoh SELECT Kolom
58
Contoh pernyataan SQL berikut adalah mengambil kolom "CustomerName" dan
"City" dari tabel "Customers".
Contoh :
SELECT CustomerName,City FROM Customers;
Contoh SELECT *
Contoh berikut pernyataan SQL mengambil semua kolom dari tabel Customer.
Contoh :
SELECT * FROM Customers;
 UPDATE – memperbaharui data dalam database

Aturan Penulisan
UPDATE nama_tabel
SET kolom1=nilai1,kolom2=nilai2,...
WHERE kolom_tertentu=nilai_tertentu;
Perthatikan bahwa klausa WHERE dalam pernyataan SQL UPDATE, klausa WHERE
menspesifikkan record mana atau record yang seharusnya diperbaharui. Jika klausa
WHERE dihilangkan, maka semua record akan diperbaharui.
UPDATE banyak kolom

Untuk memperbaharui satu atau lebih kolom, gunakan koma sebagai pemisah.
Asumsikan yang akan diperbaharui misalnya pada tabel Customer adalah "Alfreds
Futterkiste" dengan sebuah contact person dan city yang baru, maka digunakan
pernyataan SQL :
UPDATE Customers
SET ContactName='Alfred Schmidt', City='Frankfurt'
WHERE CustomerID=1;
UPDATE banyak record

Dalam pernyataan UPDATE, klause WHERE yang menentukan berapa banyak record
yang akan diperbaharui. Klausa WHERE : WHERE Country='Mexico' akan
memperbaharui semua record yang bernilai "Mexico" dalam field "Country".
Perhatikan, jika klause WHERE dihilangkan maka semua record akan diperbaharui.
Contoh :
UPDATE Customers
SET ContactName='Juan'
WHERE Country='Mexico';
59
 DELETE – mengahapus data dari dabase
Aturan Penulisan:
DELETE FROM nama_tabel
WHERE kolom_tertentu=nilai_tertentu;
Perthatikan bahwa klausa WHERE dalam pernyataan SQL DELETE, klausa WHERE
menspesifikkan record mana atau record yang seharusnya dihapus. Jika klausa
WHERE dihilangkan, maka semua record akan dihapus.
Contoh SQL DELETE
Misalkan bahwa data customer yang akan dihapus adalah "Alfreds Futterkiste" dari
tabel "Customers". Gunakan pernyataan SQL :
Contoh :
DELETE FROM Customers
WHERE CustomerName='Alfreds Futterkiste' AND ContactName='Maria Anders';
Menghapus semua data

Sangat dimungkinkan untuk menghapus semua baris dalam tabel tanpa menghapus
tabel. Perhatikan, ketika menghapus record, pernyataan ini tidak dapat diulang.
DELETE FROM nama_tabel;
atau
DELETE * FROM nama_tabel;
 INSERT INTO – menyisipkan database ke dalam database

Penulisan penyataan INSERT INTO memiliki dua bentuk. Bentuk pertama, tidak
menspesifikasikan nama kolom dimana data akan disisipkan, hanya nilainya.
Contoh :
INSERT INTO nama_tabel
VALUES (nilai1,nilai 2,nilai 3,...);
Bentuk kedua, perlu menspesifikasikan nama kolom dan nilai yang akan disisipkan.
Contoh :
INSERT INTO nama_tabel (kolom1,kolom2,kolom3,...)
VALUES (nilai 1,nilai 2,nilai 3,...);
Contoh INSERT INTO
60
Misalkan, akan disisipkan sebuah baris baru pada tabel Customer, maka digunakan
pernyataan SQL :
INSERT INTO Customers (CustomerName, ContactName, Address, City, PostalCode,
Country)
VALUES ('Cardinal','Tom B. Erichsen','Skagen 21','Stavanger','4006','Norway');
Menyisipkan Data hanya pada kolom tertentu

Untuk menyisipkan data hanya pada kolom tertentu, misalnya pada tabel Customer
akan disisipkan data dalam kolom "CustomerName", "City", dan "Country" (dan field
CustomerID juga tentu akan diperbaharui secara otomatis).
Contoh :
INSERT INTO Customers (CustomerName, City, Country)
VALUES ('Cardinal', 'Stavanger', 'Norway');
 CREATE DATABASE – membuat sebuah database baru

Aturan Penulisan :
CREATE DATABASE dbname;
Contoh :
Pernyataan SQL berikut akan membuat sebuah database baru dengan nama “my_db":
CREATE DATABASE my_db;
 CREATE TABLE – membuat sebuah tabel baru

Aturan Penulisan SQL CREATE TABLE
CREATE TABLE nama_tabel
(
nama_kolom1 tipe_data(ukuran),
....
);
Parameter nama_kolom menspesifikkan nama dari kolom dari tabel, parameter

tipe_data menspesifikkan tipe data apa dari kolom yang dibuat (contoh: varchar,
integer, decimal, date, dst.). Parameter ukuran menspesifikkan panjang maksimum
dari data pada kolom.
Contoh SQL CREATE TABLE
Jika ingin membuat tabel diberi nama "Persons", berisi lima kolom: PersonID,
LastName, FirstName, Address, dan City.
Selanjutnya, digunakan pernyataan CREATE TABLE.
Contoh :
61
CREATE TABLE Persons
(
PersonID int,
LastName varchar(255),
FirstName varchar(255),
Address varchar(255),
City varchar(255)
);
Kolom PersonID diberi tipe int yang berarti integer, selanjutnya kolom LastName,
FirstName, Address, dan City diberi tipe varchar yang berarti diisi dengan karakter,
kemudian panjang maksimum dari field-fieldnya adalah 255 karakter. Tabel person
akan menghasilkan tabel kosong seperti di bawah ini :
PersonID LastName FirstName Address City
Selanjutnya tabel kosong dapat diisi dengan data menggunakan pernyataan INSERT
INTO.
Batasan SQL PRIMARY KEY

Batasan PRIMARY KEY secara unik mengidentifikasikan setiap record dalam
tabel database. Primary key harus berupa nilai yang UNIQUE (unik artinya tidak boleh
sama dengan yang lain). Sebuah kolom primary key column tidak boleh mengandung nilai
NULL.
Beberapa tabel seharusnya memiliki sebuah primary key, dan setiap tabel hanya memiliki
SATU primary key.
Batasan pernyataan SQL PRIMARY KEY pad CREATE TABLE
Pernyataan SQL berikut adalah membuat sebuah PRIMARY KEY pada kolom "P_Id"
ketika tabel "Persons" table dibuat.
MySQL:
(
P_Id int NOT NULL,
LastName varchar(255) NOT NULL,
City varchar(255),
PRIMARY KEY (P_Id)
)
SQL Server / Oracle / MS Access:
(
62
P_Id int NOT NULL PRIMARY KEY,
City varchar(255)
)
Untuk membolehkan penamaan dari sebuah batasan PRIMARY KEY, dan untuk
mendefinisikan sebuah batasan PRIMARY KEY pada beberapa kolom, gunakan sintaks
SQL berikut :
MySQL / SQL Server / Oracle / MS Access:
(
P_Id int NOT NULL,
City varchar(255),
CONSTRAINT pk_PersonID PRIMARY KEY (P_Id,LastName)
)
Catatan: pada contoh di atas hanya satu PRIMARY KEY (pk_PersonID). Meskipun, nilai
dari primary key dibuat menjadi dua kolom (P_Id + LastName).
Batasan SQL PRIMARY KEY pada ALTER TABLE

Untuk membuat batasan PRIMARY KEY pada kolom "P_Id" ketika tabel telah dibuat
sebelumnya, gunakan pernyataan SQL berikut:
ALTER TABLE Persons
ADD PRIMARY KEY (P_Id)
Untuk memberi nama batasan PRIMARY KEY, dan untuk mendefinisikan batasan
PRIMARY KEY pada kolom yang banyak, gunakan sintaks SQL berikut :
ALTER TABLE Persons
ADD CONSTRAINT pk_PersonID PRIMARY KEY (P_Id,LastName)
Catatan: Jika digunakan pernyataan ALTER TABLE untuk menambah sebuah primary
key, kolom primary key sudah harus dideklarasikan tidak mengandung nilai NULL ketika
pertama kali membuat tabel.
Untuk menghapus batasan PRIMARY KEY, digunakan pernyataan SQL berikut :
MySQL:
63
ALTER TABLE Persons
DROP PRIMARY KEY
ALTER TABLE Persons
DROP CONSTRAINT pk_PersonID
Batasan SQL FOREIGN KEY

Sebuah FOREIGN KEY dalam tabel menunjuk kepada sebuah PRIMARY KEY
dalam tabel yang lain. Sebagai ilustrasi lihat pada dua tabel berikut.
Tabel "Persons":
P_Id LastNam FirstName Address City
e
1 Hansen Ola Timoteivn 10 Sandnes
2 Svendson Tove Borgvn 23 Sandnes
3 Pettersen Kari Storgt 20 Stavanger
Tabel "Orders":
O_Id OrderNo P_Id
1 77895 3
2 44678 3
3 22456 2
4 24562 1
Catatan bahwa kolom "P_Id" dalam tabel "Orders" menunjuk pada kolom "P_Id" dalam
tabel "Persons". Kolom "P_Id" dalam tabel "Persons" adalah PRIMARY KEY dalam tabel
"Persons". Kolom "P_Id" dalam tabel "Orders" adalah FOREIGN KEY dalam
tabel"Orders".
Batasan FOREIGN KEY digunakan untuk mencegah hilangnya hubungan antara kedua
tabel.
Batasan FOREIGN KEY juga mencegah data tidak valid yang disisipkan ke dalam kolom
foreign key, karena data tersebut adalah merupakan nilai yang ada mengacu pada tabel
yang ditunjuk.
Batasan SQL FOREIGN KEY pada CREATE TABLE
SQL berikut membuat FOREIGN KEY pada kolom "P_Id" ketika tabel "Orders" dibuat:
MySQL:
CREATE TABLE Orders
(
O_Id int NOT NULL,
OrderNo int NOT NULL,
P_Id int,
PRIMARY KEY (O_Id),
FOREIGN KEY (P_Id) REFERENCES Persons(P_Id)
)
64
CREATE TABLE Orders
(
O_Id int NOT NULL PRIMARY KEY,
P_Id int FOREIGN KEY REFERENCES Persons(P_Id)
)
Untuk memberikan nama batasan FOREIGN KEY, dan untuk mendefinisikan batasan
FOREIGN KEY pada beberapa kolom, gunakan sintaks SQL berikut:
CREATE TABLE Orders
(
O_Id int NOT NULL,
P_Id int,
PRIMARY KEY (O_Id),
CONSTRAINT fk_PerOrders FOREIGN KEY (P_Id)
REFERENCES Persons(P_Id)
)
Batasan SQL FOREIGN KEY pada ALTER TABLE

Untuk membuat batasan FOREIGN KEY pada kolom "P_Id" ketika tabel "Orders" sudah
dibuat, gunakan sintaks SQL berikut:
ALTER TABLE Orders
ADD FOREIGN KEY (P_Id)
Untuk memberikan nama batasan FOREIGN KEY, dan untuk mendefinisikan batasan
FOREIGN KEY pada beberapa kolom, gunakan sintaks SQL berikut:
ALTER TABLE Orders
ADD CONSTRAINT fk_PerOrders
FOREIGN KEY (P_Id)
Untuk DROP batasan FOREIGN KEY, gunakan SQL berikut :

MySQL:
ALTER TABLE Orders
DROP FOREIGN KEY fk_PerOrders

ALTER TABLE Orders
DROP CONSTRAINT fk_PerOrders
b. MySQL
65
MySQL adalah sistem database yang populer yang digunakan dengan PHP. Lebih
lanjut MySQL :
 System database yang digunakan pada web
 System database yang berjalan pada server.
 Cocok untuk aplikasi kecil maupun yang besar
 Sangat cepat, reliabel dan mudah digunakan
 Menggunakan standar SQL
 Mengkompilasi pada sejumlah platform
 Gratis diunduh dan digunakan
 Dikembangkan, didistribusikan dan didukung oleh Oracle Corporation
 Namanya diambil dari nama co-founder andak Monty Widenius's daughter: My
System PHP + MySQL Database

PHP dikombinasikan dengan MySQL adalah merupakan cross-platform (pengembangan
dapat dilakukan pada Windows dan serve pada platform Unix).

1. Jalankan aplikasi control panel XAMPP
2. Pastikan posisi service Apache dan MySQL dalam posisi on, pada control panel
XAMPP
3. Bukalah browser anda, kemudian ketiklah localhost/phpmyadmin
4. Kemudian klik-lah tab SQL sehingga tampilan pada browser anda seperti yang
ditampilkan pada gambar 5.1.
Gambar 5.1 tampilan phpMyAdmin

5. Buatlah sebuah database beri nama “my_db”, dengan menggunakan pernyataan SQL.
6. Buatlah tabel Customer (dengan field seperti yang ditampilkan oleh tabel 5.1 di atas).
66
7. Isilah setiap kolom dan baris sesuai dengan data yang ada pada tabel 5.1 dengan
pernyataan INSERT INTO.
8. Untuk melihat isi database dapat meng-klik pada daftar database yang ada dibagian kiri
dalam gambar 5.1.
9. Cobalah pernyataan UPDATE, DELETE pada database yang telah anda kerjakan
10. Dokumentasikan setiap hasil pekerjaan anda dengan melakukan capture screen.
6.5 Tugas Mandiri

Implementasikan SQL pada aplikasi yang anda rancang untuk menampilkan database yang
telah dibuat pada tahapan sebelumnya.
67
PRAKTIKUM 7
7.1 Judul
jQuery + AJAX (Asynchronous JavaScript And XML)
7.2 Tujuan
a. Mahasiswa dapat memahami pengertian dan penggunaan AJAX
b. Mahasiswa dapat menggunakan kombinasi jQuery + AJAX untuk pengiriman data
7.3 Dasar Teori
7.3.1 AJAX
AJAX adalah bukan sebuah bahasa pemrograman. AJAX hanya menggunakan sebuah
kombinasi dari :
 Sebuah built-in object XMLHttpRequest dari browser (untuk meminta data dari
web server)
 JavaScript dan HTML DOM (untuk menampilkan atau menggunakan data)
AJAX bisa berarti bias, dimana aplikasi AJAX mungkin menggunakan XML untuk
mengangkut data, tetapi secara umum juga dapat mengangkut teks biasa atau teks
JSON. AJAX memungkinkan laman web untuk diperbaharui secara asinkron dengan
mengubah data dengan sebuah web server di belakang layar. Hal ini berarti, bahwa
dimungkinkan untuk memperbaharui bagian dari sebuah laman web, tanpa memuat
semua laman web.
Bagaimana AJAX bekerja :
Gambar 7.1 Cara Kerja AJAX

68
1. Sebuah event terjadi pada sebuah laman web (laman dimuat, sebuah tombol di-
click)
2. Sebuah object XMLHttpRequest dibuat dengan JavaScript
3. Object XMLHttpRequest mengirim sebuah permintaan ke sebuah web server
4. Server memproses permintaan tersebut
5. Server mengirim balik sebuah tanggapan ke laman web
6. Tanggapan ini dibaca oleh JavaScript
7. Aksi yang bersesuaian (seperti perbaharui laman) dilakukan oleh JavaScript
Secara umum AJAX dapat dikatakan merupakan teknik bertukar data dengan
server, dan memperbarui bagian laman web - tanpa memuat ulang seluruh halaman.
7.3.2 jQuery AJAX
jQuery menyediakan beberapa metode untuk fungsionalitas AJAX. Dengan metode

jQuery AJAX, dapat meminta teks, HTML, XML atau JSON dari server menggunakan
HTTP Get dan HTTP Post. Dan dapat memuat data eksternal langsung ke elemen HTML
yang dipilih dari laman web. Tanpa jQuery, pengkodean AJAX bisa menjadi sedikit rumit,
karena browser yang berbeda memiliki sintaks yang berbeda untuk implementasi AJAX.
Hal ini berarti kode tambahan harus ditulis untuk menguji browser yang berbeda. Namun
dengan jQuery, hal ini sudah dapat ditangani, sehingga penulisan fungsionalitas AJAX
dapat ditulis dengan satu baris kode.
jQuery load() Method

jQuery load() method adalah metode yang sederhana, namun merupakan method
AJAX yang powerfull (sangat kuat). load() method memuat data dari sebuah server dan
menempatkan data kembalian ke dalam elemen yang terpilih.
Sintaks :
$(selector).load(URL,data,callback);
Parameter URL secara spesifik harus ditulis agar dapat dimuat.

Parameter data (optional) ditentukan dengan pasangan kunci string/nilai untuk dikirimkan
dengan permintaan.
Parameter callback (optional) adalah nama dari sebuah fungsi yang dieksekusi setelah
method load() selesai.
jQuery – Method AJAX get() dan post()

Method jQuery get() dan post() digunakan untuk meminta data dari server dengan sebuah
permintaan HTTP GET atau POST. Dua method umum untuk sebuah request-response
69
(perminataan dan layanan) antara sebuah klien dan server adalah GET dan POST. Kedua
method ini sudah dibahas pada praktikum 5. Pada materi ini, kedua method ini tidak akan
dijelaskan lagi. Pembahasan hanya difokuskan pada penggunaan kedua method ini dengan
menggunakan jQuery.
jQuery $.get() method

sintaks :
$.get(URL, callback);
Parameter URL menspesifikan URL yang ingin diminta.
Parameter callback adalah nama dari sebuah fungsi yang akan dieksekusi jika permintaan
berhasil. Berikut contoh pennggunaan method $.get() untuk mengambil data dari sebuah
file pada server :
$.get("demo_test.asp", function(data,status){
alert("Data:"+data+ "\nStatus:" +status);
});
});
Parameter pertama dari $.get() adalah URL yang ingin diakses (“demo_test.asp”).
Parameter kedua adalah sebuah fungsi callback. Parameter pertama callback berisi konten
dari laman yang diminta, dan parameter kedua berisi status dari permintaan.
Berikut isi dari file ASP “demo_test.asp” ;

<%
response.write("This is some text from an external ASP
file.")
%>
jQuery $.post() method
sintaks :
$.post(URL, callback);
Parameter URL menspesifikan URL yang ingin diminta.
Parameter callback adalah nama dari sebuah fungsi yang akan dieksekusi jika permintaan
berhasil. Berikut contoh pennggunaan method $.post() untuk mengambil data dari sebuah
file pada server :
$.post("demo_test_post.asp",
{
name: "DonaldDuck",
city: "Duckburg"
},
70
function(data,status){
alert("Data:"+data+ "\nStatus:"+status);
});
});
Parameter pertama dari $.post() adalah URL yang ingin diakses (“demo_test_post.asp”).
Kemudian data yang akan dikirim bersamaan dengan permintaan, pada contoh adalah
name dan city.
Scipt ASP dalam “demo_test_post.asp” membaca parameter, memprosesnya, dan
mengembalikan hasilnya.
Parameter ketiga adalah sebuah fungsi callback. Parameter pertama callback berisi konten
dari laman yang diminta, dan parameter kedua berisi status dari permintaan.
Berikut adalah isi dari file ASP “demo_test_post.asp” :

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear"&fname&".")
Response.Write("Hope you live well in " & city & ".")
%>

1. Buatlah dua buah file pada editor VS Code anda, kemudian file pertama beri nama
dengan ajax_load.php. File kedua beri nama target_load.txt.
2. Ketiklah script berikut pada file ajax_get.php :
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.
min.js"></script>
<script>
$("#div1").load("target_loads.txt");
});
});
</script>
</head>
<body>
<div id="div01"><h2>Buat jQuery AJAX untuk mengubah text
ini</h2></div>
<button>Ambil file eksternal</button>
</body>
</html>
71
3. Bukalah browser anda, kemudian panggil file ajax_load.php
4. Perbaikilah jika terjadi error
5. Buatlah empat buah file pada VSCode anda, masing-masing beri nama : ajax_get.php,
ajax_post, ajax_response_get.php dan ajax_response_post.php.
6. Ketiklah script berikut pada file ajax_get.php :
<!DOCTYPE html>
<html>
<head>
<script
<script>
$.get("ajax_response_get.php", function(data, status){
alert("Data: " + data + "\nStatus: " + status)
});
});
});
</script>
</head>
<body>
<button>Kirim permintaan dengan HTTP Get ke sebuah laman dan
mendapatkan respon </button>
</body>
</html>
7. Ketik script berikut pada file ajax_response_get.php :
Tulisan ini berasal dari file external
8. Jalankan file ajax_get.php
9. Perbaikilah jika terjadi error.
10. Ketiklah script berikut pada file ajax_post.php :
<!DOCTYPE html>
<html>
<head>
<script
<script>
$.get("ajax_post_response.php", function(data, status){
alert("Data: " + data + "\nStatus: " + status)
});
});
});
</script>
</head>
<body>
72
<button>Kirim permintaan dengan HTTP Get ke sebuah laman dan
mendapatkan respon </button>
</body>
</html>
11. Ketik script berikut pada file ajax_response_get.php :
$nama = $_POST['nama'];
$kota = $_POST['kota'];
echo "Halo, " . $nama . ", ";
echo "Semoga ditemui dalam keadaan sehat di " . $kota;
12. Jalankan file ajax_post.php

13. Perbaikilah jika terjadi error.
14. Dokumentasikan setiap hasil pekerjaan anda dengan melakukan capture screen.
7.5 Tugas Mandiri

Implementasikan jQuery+AJAX pada aplikasi yang anda rancang untuk pengiriman data.
73
PRAKTIKUM 8
8.1 Judul
Create Read Update Delete (CRUD) dengan AJAX dan MySQLi
8.2 Tujuan
 Mahasiswa dapat memahami bagaimana membuat aplikasi CRUD
 Mahasiswa dapat menerapkan perpaduan PHP+JQuery AJAX+MySQLi
8.3 Dasar Teori
Ketika mengembangkan sebuah aplikasi, diinginkan untuk membuat sebuah model
yang menyediakan empat tipe fungsionalitas dasar. Model tersebut sebaiknya dapat
melakukan Create (membuat), Read (membaca), Update (memperbaharui) dan Delete
(menghapus). Dalam ilmu komputer, keempat fungsi ini sering disingkat dengan CRUD.
Sebuah model seharusnya memiliki kemampuan untuk melakukan keempat fungsi ini
secara menyeluruh. Jika suatu aksi tidak dapat dijelaskan oleh salah satu dari empat model
ini, maka aksi tersebut dibuat menjadi model yang lain.
Paradigma CRUD adalah merupakan suatu hal yang umum dalam pengembangan
aplikasi berbasis web, karena CRUD menyediakan kerangka kerja yang mudah diingat
untuk mengingatkan pengembang tentang bagaimana membangun model yang lengkap dan
dapat digunakan. Sebagai contoh, bayangkan sebuah sistem harus menyimpan catatan dari
perpustakaan. Dalam basisdata perpustakaan, dapat dibayangkan bahwa di sana akan ada
sejumlah sumber informasi buku yang akan disimpan sebagai obyek dari buku. Misalkan
obyek dari buku adalah :
“book”: {
"id": <Integer>,
“title”: <String>,
“author”: <String>,
“isbn”: <Integer>
}
Untuk membuat sistem perpustakaan dapat digunakan, harus dapat dipastikan bahwa
mekanisme pengoperasian CRUD dapat dioperasikans secara menyeluruh :
Create – poin ini berisi sebuah fungsi yang akan digunakan untuk menambahkan sebuah
buku yang baru ke dalam katalog. Program memanggil fungsi yang akan memasukkan
“title”, “author” dan “isbn”. Setelah fungsi ini dipanggil, akan ada tambahan data untuk
buku ini yang akan tersimpan di dalam database. Sebagai tambahan penambahan data baru
ini ditetapkan dengan menggunakan sebuah “id”, dimana dengan “id” ini data tentang buku
ini dapat diakses kembali.
74
Read – bagian ini akan berisi sebuah fungsi dimana akan melihat semua buku yang tercatat
dalam katalog. Pemanggilan fungsi ini tidak akan mengubah buku dalam katalog - itu
hanya akan mengambil sumber daya dan menampilkan hasilnya. Juga merupakan fungsi
untuk mengambil data sebuah buku, berupa title, author atau ISBN. Sekali lagi, fungsi ini
tidak akan mengubah namun hanya mengambil saja.
Update – fungsi ini adalah merupakan fungsi yang dipanggil untuk mengubah informasi
dari sebuah buku yang diinginkan. Program memanggil fungsi untuk mengubah sebuah
nilai atau lebih baik “title”, “autor” atau “isbn”. Setelah fungsi dipanggil, data yang
bersesuaian dengan data buku ini akan menjadi sebuah data isian yang baru.
Delete – merupakan fungsi yang dipanggil untuk menghapus sebuah buku dari katalog.

1. Jalankan aplikasi control panel XAMPP
2. Pastikan posisi service Apache dan MySQL dalam posisi on, pada control panel
XAMPP
3. Bukalah browser anda, kemudian ketiklah localhost/phpmyadmin
4. Buatlah database dengan nama mahasiswa.
5. Buatlah tabel dan beri nama “biodata” dengan format field seperti yang ditunjukkan oleh
gambar berikut:
6. Buatlah tabel dan beri nama “dosen_pa” dengan format field seperti yang ditunjukkan oleh
gambar berikut:
7. Koneksikan kedua tabel

8. Isilah data pada tabel dosen_pa secara manual melalui phpmyadmin. Isilah data ke
dalam tabel dosen_pa minimal dua data.
9. Buatlah sebuah file php, kemudian beri nama koneksi.php, kemudian ketikkan kode
berikut :
<?php
$servername = "localhost";
$username = "root";
$password = "";
75
$dbname = "Mahasiswa";
// membuat koneksi
$conn = mysqli_connect($servername, $username, $password, $dbname);
// memeriksa koneksi
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}else{
echo(“Connection success”);
}
10. Jalankan file php di atas, jika tidak menemukan error, maka akan tampil pemberitahuan
seperti pada gambar berikut:
11. Buatlah file sebuah file php yang baru, kemudian berinama index.php, kemudian
ketikkan kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Simple CRUD (Teknik Ajax)</title>
<script type="text/javascript" src="jquery-2.1.3.min.js">
</script>

<script>
$(document).ready(function() {
var url = 'beranda.php';
$('#data').load(url);
$('#tampil-tambah').on('click', function(event) {
event.preventDefault();
$('#tampil').text('loading...');
$('#tampil').load('tambah.php');
});
$('#btnfind').on('click', function(event) {
var v_cari = $('#infind').val();
var image = $('<img width =200 height=30
style="margin: 0px auto;display:block;margin-bottom:5px">
</img>');
image.attr('src', 'pbar.gif');
$('#data').prepend(image);
if (v_cari != "") {
$.ajax({
url: 'beranda.php',
type: 'POST',
dataType: 'html',
data: 'varcari=' + v_cari,
success: function(tanggap) {
$('#data').html(tanggap).show();
76
},
})
} else {
$('#data').load('beranda.php');
}
});
});
</script>
</head>
<body>
<h2>Simple CRUD (Teknik Asynchronous Javascript And XML - AJAX +
JQuery)</h2>
<button id="tampil-tambah">Tambah Data</button>

<table width="692" id="tabelikutan">
<tr>
<td width="191">
<h3>Biodata Mahasiswa</h3>
</td>
<td width="291" colspan="6" align="right">
<form>
<input id="infind" type="text" name="cars"
placeholder="ketiklah nim atau nama" />
<input type="submit" name="carikar"
id="btnfind" value="cari" />
</form>
</td>
</tr>
</table>
<div id="data"></div>
<h3> di bawah garis ini akan menampilkan <label
style="color:#0000FF">formulir tambah dan edit</label>, <label
style="color:#FF0000">tanpa harus</label> berpindah halaman</h3>
<hr>
<div id="tampil"></div>
</body>
</html>
12. Buatlah file php baru dan beri nama beranda.php, kemudian ketikkan kode berikut :
<script>
$('.cedit').on('click', function(event) {
var nim = 0;
nim = this.id;
$('#tampil').text('loading...');
$.ajax({
url: 'edit.php',
type: 'POST',
dataType: 'html',
data: 'vnim=' + nim,
success: function(res) {
$('#tampil').html(res);
},
})
});
$('.chapus').on('click', function(event) {
77
var nim = 0;
nim = this.id;
var image = $('<img width =200 height=30 style="margin: 0px

auto;display:block;margin-bottom:5px"></img>');
$('#data').append(image);
$.ajax({
url: 'hapus.php',
type: 'POST',
dataType: 'html',
data: 'id=' + nim,
success: function(respon) {
if (respon.trim() == 'ok') {
} else {
alert(respon);
}
},
})
});
</script>
<table cellpadding="5" cellspacing="0" border="1" id="tabelawal">

<tr bgcolor="#CCCCCC">
<th>No.</th>
<th>NIM</th>
<th>Nama Lengkap</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Dosen PA</th>
<th>Aksi</th>
</tr>
<?php
//iclude file koneksi ke database
include('koneksi.php');
if (isset($_POST['varcari'])) {
$kar = $_POST['varcari'];
//query ke database dg SELECT table biodata diurutkan
berdasarkan NIM paling kecil
$query = mysqli_query($koneksidb, "SELECT * FROM biodata
WHERE nim LIKE '%$kar%' OR nama LIKE '%$kar%'") or die(mysql_error());
//cek, apakakah hasil query di atas mendapatkan hasil atau
tidak (data kosong atau tidak)
if (mysqli_num_rows($query) == 0) { //ini artinya jika
data hasil query di atas kosong
//jika data kosong, maka akan menampilkan row kosong

echo 'none';
exit;
} else { //else ini artinya jika data hasil query ada
(data diu database tidak kosong)
//jika data tidak kosong, maka akan melakukan

perulangan while
$no = 1; //membuat variabel $no untuk membuat
nomor urut
78
while ($data = mysqli_fetch_assoc($query)) {
//perulangan while dg membuat variabel $data yang akan mengambil data di
database
//menampilkan row dengan data di database

echo '<tr>';
echo '<td>' . $no . '</td>'; //menampilkan
nomor urut
echo '<td>' . $data['nim'] . '</td>';
//menampilkan data nim dari database
echo '<td>' . $data['nama'] . '</td>';
//menampilkan data nama lengkap dari database
echo '<td>' . $data['jengkel'] . '</td>';
//menampilkan data jenis kelamin dari database
echo '<td>' . $data['alamat'] . '</td>';
//menampilkan data alamat dari database
echo '<td><a href="#edit" id="' .
$data['nim'] . '" class="cedit">Edit</a> / <a href="#hapus" id="' .
$data['nim'] . '"
class = "chapus" >Hapus</a></td>';
//menampilkan link edit dan hapus dimana tiap link terdapat GET id -> ?
id=siswa_id
echo '</tr>';
$no++; //menambah jumlah nomor urut setiap row
}
}
} else {
//query ke database dg SELECT table biodata diurutkan
berdasarkan NIM paling kecil
$query = mysqli_query($koneksidb, "SELECT * FROM biodata
ORDER BY nim DESC") or die(mysql_error());
//cek, apakakah hasil query di atas mendapatkan hasil atau

tidak (data kosong atau tidak)
if (mysqli_num_rows($query) == 0) { //ini artinya jika
data hasil query di atas kosong
//jika data kosong, maka akan menampilkan row kosong

echo '<tr><td colspan="6">Tidak ada data!</td></tr>';
} else { //else ini artinya jika data hasil query ada
(data diu database tidak kosong)
//jika data tidak kosong, maka akan melakukan

perulangan while
$no = 1; //membuat variabel $no untuk membuat
nomor urut
while ($data = mysqli_fetch_assoc($query)) {
//perulangan while dg membuat variabel $data yang akan mengambil data di
database
//menampilkan row dengan data di database

echo '<tr>';
echo '<td>' . $no . '</td>'; //menampilkan
nomor urut
echo '<td>' . $data['nim'] . '</td>';
//menampilkan data nim dari database
echo '<td>' . $data['nama'] . '</td>';
//menampilkan data nama lengkap dari database
79
echo '<td>' . $data['jengkel'] . '</td>';
//menampilkan data jenis kelamin dari database
echo '<td>' . $data['alamat'] . '</td>';
//menampilkan data alamat dari database
$queryD = mysqli_query($koneksidb, "SELECT *
FROM dosen_pa WHERE nidn = '" . $data['nidn'] . "'");
$NamaDosen = mysqli_fetch_array($queryD);
echo '<td>' . $NamaDosen['nama_dosen'] .
'</td>'; //menampilkan data dosen dari database
echo '<td><a href="#edit" id="' .
$data['nim'] . '" class="cedit">Edit</a> / <a href="#hapus" id="' .
$data['nim'] . '"
class = "chapus" >Hapus</a></td>';
//menampilkan link edit dan hapus dimana tiap link terdapat GET id -> ?
id=siswa_id
echo '</tr>';
$no++; //menambah jumlah nomor urut setiap row
}
}
}
?>
</table><br>
13. Buatlah file php baru kemudian beri nama tambah.php, kemudian ketikkan kode
berikut :
<script>
$(document).ready(function() {
$('#idtambah').on('click', function(event) {
var nim = 0;
var nama = 0;
var jkel = 0;
var alamat = 0;
nim = $('#idnim').val();
nama = $('#idnama').val();
jkel = $('#idjeniskelamin').val();
alamat = $('#idalamat').val();
dosen = $('#dosen').val();
var image = $('<img width =200 height=30

style="margin: 0px auto;display:block;margin-bottom:5px"></img>');
$.ajax({
url: 'tambah-proses.php',
type: 'POST',
dataType: 'html',
data: {
vnim: nim,
vnama: nama,
vjkel: jkel,
valamat: alamat,
vdosen: dosen
},
80
//data :
'vnim='+nim+'&vnama='+nama+'&vjkel='+jkel+'&valamat='+alamat+'&vdosen='+d
osen,
success: function(respon) {
if (respon.trim() == 'ok') {
} else {
alert(respon);
}
}
})
});
});
</script>
<h3>Tambah Data Mahasiswa</h3>
<form>
<table cellpadding="3" cellspacing="0">
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" name="nim" id="idnim"
required></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text" name="nama" id="idnama"
size="30" required></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<select name="jeniskelamin" id="idjeniskelamin"
required>
<option value="">Pilih Jenis
Kelamin</option>
<option value="laki-laki">Laki</option>
<option
value="perempuan">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td valign="top">:</td>
<td><textarea name="alamat" id="idalamat" rows="5"
cols="20" required></textarea></td>
</tr>
<tr>
<td>Dosen PA</td>
<td>:</td>
<td>
<?php
include "koneksi.php";
$queryDosen = mysqli_query($koneksidb, "SELECT
* FROM dosen_pa");
81
?>
<select name="cmbDosen" id="dosen" required>
<option value="blank" selected>--Pilih
Dosen PA--</option>
<?php
while ($NamaDosen =
mysqli_fetch_array($queryDosen)) {
?>
<option value="<?php echo
$NamaDosen['nama_dosen']; ?>"><?php echo $NamaDosen['nama_dosen'];
?></option>";
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td><input type="submit" name="tambah" id="idtambah"
value="Tambah"></td>
</tr>
</table>
</form>
14. Buatlah file php baru,kemudian beri nama tambah_proses.php, kemudian ketikkan
kode berikut :
<?php
//mulai proses tambah data
//cek dahulu, jika tombol tambah di klik
//inlcude atau memasukkan file koneksi ke database

//jika tombol tambah benar di klik maka lanjut prosesnya

$nim = $_POST['vnim']; //membuat variabel $nim dan datanya dari
inputan NIM
$nama = $_POST['vnama']; //membuat variabel $nama dan datanya
dari inputan Nama Lengkap
$jenkel = $_POST['vjkel']; //membuat variabel $jenis kelamin
dan datanya dari inputan dropdown jenis kelamin
$alamat = $_POST['valamat']; //membuat variabel $alamat
dan datanya dari inputan alamat
$dosen = $_POST['vdosen']; //membuat variabel $alamat dan datanya
dari inputan alamat
$queryDosen = mysqli_query($koneksidb, "SELECT nidn FROM dosen_pa WHERE

nama_dosen ='".$dosen."'");
$NidnDosen = mysqli_fetch_array($queryDosen);
$nidn = $NidnDosen['nidn'];
//melakukan query dengan perintah INSERT INTO untuk memasukkan data ke

database
$input = mysqli_query($koneksidb, "INSERT INTO biodata VALUES('".$nim."',
'".$nama."', '".$jenkel."', '".$alamat."', '".$nidn."')"); //or
die(mysqli_error());
82
//$input = mysqli_query($koneksidb, "INSERT INTO biodata VALUES('$nim',
'$nama', '$jenkel', '$alamat')") or die('Data baru tidak bisa ditambahkan !
' . mysqli_error($koneksidb));
//jika query input sukses
if($input){
echo 'ok'; //Pesan jika proses tambah sukses

//echo '<a href="tambah.php">Kembali</a>'; //membuat Link untuk
kembali ke halaman tambah
}else{
echo 'Gagal menambahkan data! '; //Pesan jika proses tambah

gagal
?>
15. Buatlah file php baru,kemudian beri nama edit.php, kemudian ketikkan kode berikut :
<script>
$('#idubah').on('click', function(event) {
var id =0; var nim =0; var nama = 0; var jkel = 0; var alamat = 0;
id = $('#idid').val();
nim = $('#idnim').val();
nama = $('#idnama').val();
jkel = $('#idjkel').val();
alamat = $('#idalamat').val();
dosen = $('#dosen').val();
var image = $('<img width =200 height=30 style="margin: 0px

auto;display:block;margin-bottom:5px"></img>');
//$('#data').text('Loading...');
$.ajax({
url : 'edit-proses.php',
type : 'POST',
dataType : 'html',
data :
'vnim='+nim+'&vnama='+nama+'&vjkel='+jkel+'&valamat='+alamat+'&vid='+id+'&vd
osen='+dosen,
success : function(respon){
if(respon.trim() =='ok'){
}else{
alert(respon);
}
},
})
});
</script>
83
<h3>Edit Biodata Mahasiswa</h3>
<?php
//proses mengambil data ke database untuk ditampilkan di form edit
berdasarkan nim yg didapatkan dari GET id -> edit.php?id=nim
//$id = $_POST['vnim'];
//include atau memasukkan file koneksi ke database

//membuat variabel $id yg nilainya adalah dari URL POST id -> edit.php?
id=siswa_id
//melakukan query ke database dg SELECT table biodata dengan kondisi

WHERE nim = '$id'
$nim = trim($_POST['vnim']);
$nim = $nim ? $nim : $_POST['vnim'];
$sqlShow= "SELECT * FROM biodata WHERE nim ='".$nim."'";
$qryShow= mysqli_query($koneksidb, $sqlShow) or die ("Query salah tampil
: ".mysql_error());
$dataShow = mysqli_fetch_array($qryShow);
# MASUKKAN DATA KE VARIABEL

$dataNim = isset($dataShow['nim']) ? $dataShow['nim'] :
$_POST['txtNim'];
$dataNimLama = $dataShow['nim'];
$dataNama = isset($dataShow['nama']) ? $dataShow['nama'] :
$_POST['txtNama'];
$dataJekel = isset($dataShow['jengkel']) ? $dataShow['jengkel'] :
$_POST['cmbJekel'];
$dataAlamat = isset($dataShow['alamat']) ? $dataShow['alamat'] :
$_POST['txtAlamat'];
?>
<form>
<input type="hidden" name="id" id="idid" value="<?php echo
$dataNimLama; ?>"> 
<table cellpadding="3" cellspacing="0">
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" name="txtNim" id="idnim"
value="<?php echo $dataNim; ?>" required></td> 
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text" name="txtNama" id="idnama"
size="30" value="<?php echo $dataNama; ?>" required></td> 
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<select name="cmbJekel" id="idjkel" required>
<option value="">Jenis Kelamin</option>
84
<option value="Laki-Laki" <?php
if($dataJekel == 'Laki-Laki'){ echo 'selected'; } ?>>Laki-Laki</option>

<option value="Perempuan" <?php
if($dataJekel == 'Perempuan'){ echo 'selected'; } ?>>Perempuan</option>

</select>
</td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td valign="top">:</td>
<td valign="top"><textarea name="txtAlamat"
id="idalamat" required><?php echo $dataAlamat; ?></textarea></td> 
</tr>
<tr>
<td>Dosen PA</td>
<td>:</td>
<td>
<?php
$nidn = $dataShow['nidn'];
include "koneksi.php";
$queryDosen = mysqli_query($koneksidb, "SELECT
* FROM dosen_pa");
?>
<select name="cmbDosen" id="dosen" required>
<?php
while($Dosen = mysqli_fetch_array($queryDosen))
{
if ($nidn == $Dosen['nidn']){
?>
<option value="<?php echo $Dosen['nama_dosen'];
?>" selected><?php echo $Dosen['nama_dosen']; ?></option>
<?php
}else{
?>
<option value="<?php echo $Dosen['nama_dosen'];
?>"><?php echo $Dosen['nama_dosen']; ?></option>
<?php
}
}
?>
</select>
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td><input type="submit" name="simpan" id="idubah"
value="Simpan"></td>
</tr>
</table>
</form>
16. Buatlah file php baru,kemudian beri nama edit_proses.php, kemudian ketikkan kode
berikut :
<?php
85
//mulai proses edit data
//cek dahulu, jika tombol simpan di klik

//jika tombol tambah benar di klik maka lanjut prosesnya

$id = $_POST['vid']; //membuat variabel $nis dan datanya dari
inputan id
$nim = $_POST['vnim']; //membuat variabel $nis dan datanya dari
inputan NIM
$nama = $_POST['vnama']; //membuat variabel $nama dan datanya
dari inputan Nama Lengkap
$jeniskelamin = $_POST['vjkel']; //membuat variabel $jenis kelamin dan
datanya dari inputan dropdown jenis kelamin
$alamat = $_POST['valamat']; //membuat variabel $alamat dan datanya
dari inputan dropdown alamat
$dosen = $_POST['vdosen']; //membuat variabel $dosen dan datanya dari
inputan dropdown alamat
$quwerydosen = mysqli_query($koneksidb, "SELECT nidn FROM dosen_pa WHERE
nama_dosen ='" . $dosen . "'");
$NidnDosen = mysqli_fetch_array($quwerydosen);
$nidn = $NidnDosen['nidn'];
//melakukan query dengan perintah UPDATE untuk update data ke database

dengan kondisi WHERE siswa_id='$id' <- diambil dari inputan hidden id
$update = mysqli_query($koneksidb, "UPDATE biodata SET nim='$nim',
nama='$nama', jengkel='$jeniskelamin', alamat='$alamat', nidn='$nidn' WHERE
nim='$id'"); //jika query update sukses
if ($update) {
echo 'ok'; //Pesan jika proses simpan sukses
} else {
echo 'Gagal update data! '; //Pesan jika proses simpan gagal
}
17. Buatlah file php baru,kemudian beri nama hapus.php, kemudian ketikkan kode
berikut :
<?php
//memulai proses hapus data
//cek dahulu, apakah benar URL sudah ada GET id -> hapus.php?id=id

//membuat variabel $id yg bernilai dari URL GET id -> hapus.php?id=id

$id = $_POST['id'];
//cek ke database apakah ada data biodata dengan nim='$id'

$cek = mysqli_query($koneksidb, "SELECT nim FROM biodata WHERE
nim='$id'");
//jika data siswa tidak ada
if(mysqli_num_rows($cek) == 0){
//jika data tidak ada, maka redirect atau dikembalikan ke halaman

beranda
echo 'tidak ada data yang bisa dihapus';
86
}else{
//jika data ada di database, maka melakukan query DELETE table

biodata dengan kondisi WHERE nim='$id'
$del = mysqli_query($koneksidb, "DELETE FROM biodata WHERE
nim='$id'");
//jika query DELETE berhasil

if($del){
echo "ok";
}else{
echo 'Gagal menghapus data! '; //Pesan jika proses
hapus gagal
?>
18. Jalankan program yang telah anda buat melalui file index.php.
19. Apabila ada error, perbaiki errornya kemudian jalankan lagi.
20. Buatlah dokumentasi dari hasil kerja yang telah anda lakukan dengan capture screen.
8.5 Tugas Mandiri
Terapkan fungsi CRUD pada aplikasi yang anda rancang dengan teknik AJAX + jQuery
87
REFERENSI
Buku :
Suteja, B.R., A. Prijono, dan R. Agustaf. Mudah dan Cepat menguasai Pemrograman
WEB. Penerbit INFORMATIKA Bandung. 2007.
Syafii, M. Membangung Aplikasi Berbasis PHP dan MySQL. Penerbit ANDI Yogyakarta.
2004.
Sunarfrihantono, B. PHP dan MySQL untuk Web. Penerbit ANDI. 2003
Internet :
www.w3schools.com.
www.duniailkom.com
88

Modul Praktikum APSI

Diunggah oleh

Informasi Dokumen

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

Modul Praktikum APSI

Diunggah oleh

Hak Cipta:

Format Tersedia

PENDAHULUAN

b. Cara menggunakan XAMPP

1.3 Dasar Teori

<h1>My First Heading</h1>

Struktur Halaman HTML

Gambar 2.2 Struktur HTML

Penggunaan tag-tag dengan huruf kecil

- Atribut “href” atau link

Tag <span> dan tag <div> adalah tag yang tidak memiliki makna apa-apa. Selain

HTML Table - Menambah sebuah Border (garis pembatas)

HTML Table – Menambah Border Spacing

HTML Table – Sel dengan rentang menjadi beberapa kolom

HTML Table - Sel dengan rentang menjadi beberapa baris

HTML Table – Menambah judul tabel

Satu Style Khusus untuk Satu Tabel

Sehingga, style khusus untuk tabel ini adalah :

dan, dapat pula ditambahkan style :

Radio Button Input

Browser akan menampilkan kode HTML di atas sebagai berikut :

The Submit Button

<input type="submit"> mendefinisikan sebuah tombol (button)

Input Type Password

Browser akan menampilkan kode HTML di atas seperti :

Browser akan menampilkan kode HTML di atas seperti :

The Action Attribute

The Method Attribute

Atribut method menentukan HTTP method (GET atau POST) yang digunakan ketika

Kapan menggunakan GET?

Kapan menggunakan POST?

Pengelompokkan Form Data dengan <fieldset>

Browser akan menampilkan kode HTML di atas sebagai berikut :

<h1>My First Heading</h1>

1.5 Tugas Mandiri

Gambar 3.1 Aturan penulisan CSS

Properti CSS-color mendefinisikan warna teks yang digunakan. Properti The CSS font-

Properti CSS border mendefinisikan satu garis pembatas sekeliling sebuah elemen HTML.

Properti CSS margin mendefinisikan sebuah margin (spasi) ke bagian luar dari garis

Untuk mendefinisikan sebuah style untuk elemen-elemen tertentu, tambahkan sebuah

dengan CSS, penentuan satu warna biasanya menggunakan :

Background Image (Latar dengan Gambar)

Background Image - Set position and no-repeat

Background - Shorthand property

2.4 Kegiatan Praktek

<h1> Lorem ipsum</h1>

<p> dolor sit amet.</p>

1. Ubah warna latar halaman menjadi warna kuning.

2.5 Tugas Mandiri

Cara Penulisan JavaScript

<head> function saya (x)

3. Terpisah dari dokumen HTML (Eksternal JavaScript). Bilamana JavaScript diletakkan

Tampilan Web dengan JavaScript

<h1>My First Web Page</h1>

 Menulis ke dalam keluaran HTML menggunakan document.write().

<h1>My First Web Page</h1>

Penggunaan document.write() setelah seluruh dokumen HTML terbuka, akan

<h1>My First Web Page</h1>

<button onclick="document.write(5 + 6)">Try it</button>

 Menulis ke dalam elemen HTML, menggunakan innerHTML.

<h1>My First Web Page</h1>

 Menulis ke dalam console browser, menggunakan console.log().

<h1>My First Web Page</h1>

Aturan Penulisan Function (Fungsi) JavaScript

The () Operator Invokes the Function

Fungsi digunakan sebagai nilai dari variabel