| DAFTAR TABEL

LABORATORIUM MULTIMEDIA DESIGN

2018
KELOMPOK KEAHLIAN PROGRAMMING &
INTERACTIVE MULTIMEDIA
FAKULTAS ILMU TERAPAN
UNIVERSITAS TELKOM
 DAFTAR PENYUSUN
Kiki Ismawan

Diperbaiki Oleh

Modul Praktikum Pemrograman

Berbasis Web

Hanya
diperguna
LEMBAR REVISI

No Keterangan Revisi Tanggal Revisi

Terakhir

1 Revisi Bagian Pertama

LEMBAR PERNYATAAN

Saya yang bertanggung jawab di bawah ini:

Nama : Yahdi Siradj

NIP : 14870017

Jabatan : Kaprodi D4 SM

Kelompok Keahlian : Programming dan Interactive Multimedia

Menerangkan dengan sesungguhnya bahwa modul ini telah diteview dan akan digunakan untuk
pelaksanaan praktikum di Semester Genap Tahun Ajaran 2016/2017 dan 2017/2018 di Laboratorium
Fakultas Ilmu Terapan Universitas Telkom

Bandung, 10 Agustus 2016

Mengetahui,

Kepala Program Studi D4 Sistem Multimedia

Yahdi Siradj S.T, M.T

NIP 14870017
 DAFTAR ISI
DAFTAR PENYUSUN...........................................................................................................................2
LEMBAR REVISI..................................................................................................................................3
LEMBAR PERNYATAAN......................................................................................................................4
DAFTAR ISI.............................................................................................................................................5
DAFTAR GAMBAR..................................................................................................................................8
Modul 0 : Running Modul..................................................................................................................9
0.1 Tujuan....................................................................................................................................9
0.2 Peraturan Praktikum..............................................................................................................9
0.3 Penilaian Praktikum.............................................................................................................10
Modul 1 : DASAR PENGGUNAAN SCRIPT HTML5.............................................................................11
1.1 Tujuan..................................................................................................................................11
1.2 Alat & Bahan........................................................................................................................11
1.3 Dasar Teori...........................................................................................................................11
1.3.1 HTML............................................................................................................................11
1.3.2 Membuat Form............................................................................................................11
1.4 Latihan.................................................................................................................................14
Modul 2 : BASIC HTML5 ELEMENT...................................................................................................16
2.1 Tujuan..................................................................................................................................16
2.2 Alat & Bahan........................................................................................................................16
2.3 Dasar Teori...........................................................................................................................16
2.3.1 HTML Text Element......................................................................................................16
2.3.2 Penggunaan Link dan Image........................................................................................17
2.3.3 Hyperlink antar Page....................................................................................................19
2.3.4 Image HTML.................................................................................................................19
2.4 Latihan.................................................................................................................................20
Modul 3 : TABLE & FORM INPUT DATA HTML5................................................................................21
3.1 Tujuan..................................................................................................................................21
3.2 Alat & Bahan........................................................................................................................21
3.3 Dasar Teori...........................................................................................................................21
3.3.1 Tabel HTML..................................................................................................................21
3.3.2 Form Input HTML.........................................................................................................22
3.3.3 Membuat Form............................................................................................................24
3.4 Latihan.................................................................................................................................25
Modul 4 : WEB DESIGN CSS3............................................................................................................28
4.1 Tujuan..................................................................................................................................28
4.2 Alat & Bahan........................................................................................................................28
4.3 Dasar Teori...........................................................................................................................28
4.3.1 CSS3.............................................................................................................................28
4.3.2 Modifikasi Style CSS3...................................................................................................31
4.4 Latihan.................................................................................................................................35
Modul 5 : INTRODUCTION WEB SCRIPTING PHP..............................................................................37
5.1 Tujuan..................................................................................................................................37
5.2 Alat & Bahan........................................................................................................................37
5.3 Dasar Teori...........................................................................................................................37
5.3.1 PHP..............................................................................................................................37
5.3.2 PHP Condition..............................................................................................................42
5.3.3 PHP Loop (Iterasi)......................................................................................................44
5.4 Latihan.................................................................................................................................44
Modul 6 : PHP INPUT DATA FORM...................................................................................................46
6.1 Tujuan..................................................................................................................................46
6.2 Alat & Bahan........................................................................................................................46
6.3 Dasar Teori...........................................................................................................................46
6.3.1 Input dan Validasi Form PHP........................................................................................46
6.3.2 Error Handling..............................................................................................................48
6.3.3 PHP Loop (Iterasi).........................................................................................................50
6.4 Latihan.................................................................................................................................52
Modul 7 : PHP SESSION & COOKIES..................................................................................................53
7.1 Tujuan..................................................................................................................................53
7.2 Alat & Bahan........................................................................................................................53
7.3 Dasar Teori...........................................................................................................................53
7.3.1 Input Form dan Validasi.............................................................................................53
7.3.2 PHP Cookies................................................................................................................54
7.3.3 PHP Session................................................................................................................56
7.4 latihan..................................................................................................................................57
Modul 8 : BASIC PHP & MYSQL........................................................................................................59
8.1 Tujuan..................................................................................................................................59
8.2 Alat & Bahan........................................................................................................................59
 8.3 Dasar Teori...........................................................................................................................59
8.3.1 Dasar Penggunaan Database menggunakan PHP.....................................................59
8.3.2 Basic Query Database..................................................................................................62
8.4 Latihan.................................................................................................................................63
Modul 9 : INPUT DATA PHP & MYSQL..............................................................................................64
9.1 Tujuan..................................................................................................................................64
9.2 Alat & Bahan........................................................................................................................64
9.3 Dasar Teori...........................................................................................................................64
9.3.1 Insert data PHP dengan MySQL...................................................................................64
9.4 Latihan.................................................................................................................................66
Modul 10 : WEB HOSTING DAN SERVER.........................................................................................67
10.1 Tujuan..................................................................................................................................67
10.2 Alat & Bahan........................................................................................................................67
10.3 Dasar Teori...........................................................................................................................67
10.3.1 Penggunaan Twitter APIs..........................................................................................67
10.4 Latihan.................................................................................................................................72
Daftar Pustaka.....................................................................................................................................73
 DAFTAR GAMBAR
Gambar 1 form sederhana...................................................................................................................12
Gambar 2 hasil form............................................................................................................................15
Gambar 3 penggunaan link gambar....................................................................................................18
Gambar 4 hyperlink kembali halaman 1..............................................................................................19
Gambar 5 hyperlink menuju halaman 2..............................................................................................19
Gambar 6 direktori folder....................................................................................................................20
Gambar 7 hasil tabel...........................................................................................................................23
Gambar 8 proses input form................................................................................................................23
Gambar 9 form sedeherhana...............................................................................................................25
Gambar 10 struktur penulisan CSS......................................................................................................29
Gambar 11 memilih kelas....................................................................................................................30
Gambar 12 memilih id.........................................................................................................................30
Gambar 13 memilih grup.....................................................................................................................30
Gambar 14 memilih secara berurutan.................................................................................................30
Gambar 15 kode warna.......................................................................................................................32
Gambar 16 tampilan layout web.........................................................................................................36
Gambar 17 operator PHP....................................................................................................................39
Gambar 18 daftar nilai........................................................................................................................41
Gambar 19 proses input dan validasi PHP...........................................................................................47
Gambar 20 ilustrasi shoping chart.......................................................................................................58
Gambar 21 penggunaan PHP melalui Command................................................................................61
Gambar 22 antar muka PHPmyAdmin.................................................................................................61
Gambar 23 tampilan olah data...........................................................................................................65
Gambar 24 timeline twitter.................................................................................................................68
Gambar 25 tampilan aplikasi twitter...................................................................................................69
Gambar 26 form pembuatan aplikasi..................................................................................................70
Gambar 27 tampilan konsumer...........................................................................................................71
 Modul 0 : Running Modul

0.1 Tujuan
Setelah mengikuti Running Modul mahasiswa diharapkan dapat:
1. Memahami peraturan kegiatan praktikum.
2. Memahami Hak dan Kewajiban praktikan dalam kegiatan praktikum.
3. Memhami komponen penilaian kegiatan praktikum.
0.2 Peraturan Praktikum
1. Praktikum diampu oleh Dosen Kelas dan dibantu oleh Asisten Laboratorium dan
Asisten Praktikum.
2. Praktikum dilaksanakan di Gedung FIT lantai 2 (PRIDE LAB) sesuai jadwal yang
ditentukan.
3. Praktikan wajib membawa modul praktikum, kartu praktikum, dan alat tulis.
4. Praktikan wajib mengisi daftar hadir dan BAP praktikum dengan bolpoin bertinta
hitam.
5. Durasi kegiatan praktikum D3 = 4 jam (200 menit).
a. 15 menit untuk pengerjaan Tes Awal atau wawancara Tugas Pendahuluan
b. 60 menit untuk penyampaian materi
c. 125 menit untuk pengerjaan jurnal dan tes akhir
6. Jumlah pertemuan praktikum:
 10 kali di lab (praktikum rutin)
 3 kali di luar lab (terkait Tugas Besar dan/atau UAS)
 1 kali berupa presentasi Tugas Besar dan/atau pelaksanaan UAS
7. Praktikan wajib hadir minimal 75% dari seluruh pertemuan praktikum di [Link]
total kehadiran kurang dari 75% maka nilai UAS/ Tugas Besar = 0.
8. Praktikan yang datang terlambat :
 <= 30 menit : diperbolehkan mengikuti praktikum tanpa tambahan waktu Tes
Awal
 > 30 menit : tidak diperbolehkan mengikuti praktikum
9. Saat praktikum berlangsung, asisten praktikum dan praktikan:
 Wajib menggunakan seragam sesuai aturan Institusi.
 Wajib mematikan/ men-silent semua alat komunikasi(smartphone, tab, iPad,
dsb).
 Dilarang membuka aplikasi yang tidak berhubungan dengan praktikum yang
berlangsung.
 Dilarang mengubah setting software maupun hardware komputer tanpa ijin.
 Dilarang membawa makanan maupun minuman di ruang praktikum.
 Dilarang memberikan jawaban ke praktikan lain (pre-test, TP, jurnal, dan
post-test).
 Dilarang menyebarkan soal pre-test, jurnal, dan post-test.
 Dilarangmembuang sampah/sesuatu apapun di ruangan praktikum.

10. Setiap praktikan dapat mengikuti praktikum susulan maksimal 2 modul untuk satu
praktikum.
 Praktikan yang dapat mengikuti praktikum susulan hanyalah praktikan yang
memenuhi syarat sesuai ketentuan Institusi, yaitu rawat inap di Rumah Sakit
(menunjukkan bukti rawat inap dan resep obat dari RS), tugas dari Institusi
 (menunjukkan surat dinas dari Institusi), atau mendapat musibah
(menunjukkan surat keterangan dari orangtua/ wali mahasiswa).
 Persyaratan untuk praktikum susulan diserahkan sesegera mungkin ke
Asisten Praktikum untuk keperluan administrasi.
11. Pelanggaran terhadap peraturan praktikum ini akan ditindak secara tegas secara
berjenjang di lingkup Kelas, Laboratorium, Program Studi, Fakultas, hingga Institusi.
0.3 Penilaian Praktikum
1. Komponen penilaian praktikum:
60% nilai permodul dan 40% nilai Tugas Besar (atau UAS praktek)
2. Seluruh komponen penilaian beserta pembobotannya ditentukan oleh dosen PJMP
3. Penilaian permodul dilakukan oleh asisten praktikum, sedangkan nilai Tugas Besar/ UAS
diserahkan kepada dosen kelas, dilaporkan ke PJMP.
4. Baik praktikan maupun asisten tidak diperkenankan meminta atau memberikan tugas
tambahan untuk perbaikan nilai.
5. Standar indeks dan range nilai ditentukan oleh dosen PJMP atas sepengetahuan Ketua
Kelompok Keahlian
 Modul 1 : DASAR PENGGUNAAN SCRIPT HTML5
1.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Mampu menjelaskan konsep dasar client side scripting
2. Mampu menggunakan script dasar HTML
3. Pengenalan TAG dan Attribute HTML

1.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya berjumlah 40
PC serta Software notepad++ atau sublime yang sudah terinstall pada masing – masing pc.

1.3 Dasar Teori

1.3.1 HTML
HTML adalah bahasa markup deklaratif, yang artinya menggambarkan isi dokumen.
Misalnya, ini adalah judul tingkat pertama, ini adalah paragraf, ini adalah tautan, ini adalah teks yang
ditekankan, ini adalah pemblokiran, ini adalah gambar, dll. Setiap elemen HTML memiliki tag elemen
pembuka dan penutup yang mungkin berisi atribut dan informasi lainnya. Isi antara tag pembuka
dan penutup, termasuk tag pembuka dan penutup.

<!DOCTYPE html>

<html lang="en">
<!-- contoh penggunaan tag head-->
<head>
<title>03_02 Exercise - End</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="[Link]" rel="stylesheet">
</head>

1.3.2 Membuat Form

Pada pembuatan Form Input Anda diminta untuk membuat form input HTML sesuai dengan
karakteristik dari data yang akan disimpan. Pada bagian ini, Anda akan mempelajari kembali
pengguna HTML dan CSS pada pembuatan layout web. Namun untuk materinya akan lebih
diperdalam dengan menggunakan versi HTML5 dan CSS3.

Gambar 1 form sederhana

Gunakan fitur-fitur form yang ada pada HTML5 dan CSS3 untuk membuat form seperti di atas.

<!DOCTYPE html>
<html>
<head>
<title>
Contoh form
</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<form action="" method="post" class="elegant-aero">

<h1>Contact Form
<span>Please fill all the texts in the fields.</span>
</h1>
<label>
<span>Your Name :</span>
<input id="name" type="text" name="name" placeholder="Your Full Name" />
</label>
<label>
<span>Your Email :</span>
<input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<label>
<span>Message :</span>
<textarea id="message" name="message" placeholder="Your Message to Us">
</textarea>
</label>
<label>
<span>Subject :</span><select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General Question</option>
</select>
</label>
<label>
<span>&nbsp;</span>
<input type="button" class="button" value="Send" />
</label>
</form>
</body>
</html>

Tambahkan script CSS3 berikut ini bisa secara internal maupun eksternal CSS.
/* Elegant Aero */
.elegant-aero {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #D2E9FF;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
.elegant-aero h1 {
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 10px 10px 10px 20px;
display: block;
background: #C0E1FF;
border-bottom: 1px solid #B8DDFF;
margin: -20px -20px 15px;
}
.elegant-aero h1>span {
display: block;
font-size: 11px;
}
.elegant-aero label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 15px;
margin-top: 10px;
font-weight: bold;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegantaero
textarea, .elegant-aero select {
color: #888;
width: 70%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
.elegant-aero select {
background: #fbfbfb url('[Link]') no-repeat right;
background: #fbfbfb url('[Link]') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
}
.elegant-aero .button{
padding: 10px 30px 10px 30px;
background: #66C1E4;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px #4C6E91;
-webkit-box-shadow: 1px 1px 1px #4C6E91;
-moz-box-shadow: 1px 1px 1px #4C6E91;
text-shadow: 1px 1px 1px #5079A3;
}
.elegant-aero .button:hover{
background: #3EB1DD;
}
Berikut ini hasil dari tampilan form yang Anda buat.

Gambar 2 hasil form

1.4 Latihan

Lanjutkan pengerjaan Form Input HTML5 yang telah disampaikan pada materi sebelumnya, dengan
beberapa modifikasi berikut ini:

1. Buatlah Tampilan Form Input menggunakan minimal 6 type input baru pada HTML5
2. Gunakan CSS3 untuk membuat tampilan Form menjadi lebih menarik, minimal menggunakan 5
attribute CSS3

3. Lakukan juga validasi dengan kriteria :

[Link]-pendek inputan
[Link] yang tidak boleh kosong
c. Inputan list pilihan (data list)
 Modul 2 : BASIC HTML5 ELEMENT
2.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
[Link] penggunaan script HTML5 dan CSS3
[Link] Link dan Image HTML

2.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc.

2.3 Dasar Teori

2.3.1 HTML Text Element
a. Paragraph
Element ini umum digunakan untuk memasukkan konten text berupa narasi pada tampilan web.
Cara penggunaan tag ini sama seperti penggunaan paragraph pada penulisan text.
Syntaks :
<p>Serif typefaces have small slabs at the ends of letter strokes.
In general, serif fonts can make large amounts of text easier to
read.</p>
b. Heading
Element Heading digunakan sama seperti pada formatting teks, yaitu untuk membuat format
heading. Misal pada bagian judul, sub judul, item judul dan seterusnya. Pada umumnya bentuk
format teks heading lebih besar dan tebal dari format teks biasa.

<h1>Judul Tulisan</h1>
<h2>Sub Judul Paragraf</h2>
<h3>Sub Item Paragraf</h3>
c. List & Numbering
Pengunaan list sangat dibutuhkan untuk menyajikan informasi data secara berurutan. Pada
penggunaan formatting text terdapat 2 jenis list yaitu yang menggunakan urutan angka atau abjad
(tag<ol>) dan list bullet (tag <ul>).

<ol>
<li>D4 Sistem Multimedia</li>
<li>D3 Komputerisasi Akuntansi</li>
<li>D3 Teknik Komputer</li>
<li>D3 Perhotelan</li>
</ol>
d. Div & Span Element
Khusus untuk beberapa element tag ini umumnya digunakan untuk mempermudah pengaturan
layout pada formatting text. Berikut ini beberapa tag yang umum digunakan

<div>
<span>
<hr>
<pre>
 e. Text Style konten
Pada penggunaan script HTML5 dikenal beberapa tag tambahan untuk pengaturan konten pada
halaman web. Hal ini merupakan standar baru yang digunakan untuk mempermudah mesin pencari
pada web mengenali bagian informasi text pada halaman web. Berikut ini beberapa tag yang bisa
digunakan.
- <header>
- <section>
- <article>
- <aside>
- <nav>

2.3.2 Penggunaan Link dan Image

Pada bagian ini akan dibahas mengenai penggunaan link page pada halaman web, dan
penggunaan image pada tampilan web sederhana.
a. HTML script Image
- Sediakan file gambar di dalam folder Modul 1, beri nama “[Link]”.
- Buka Notepad++
- Tuliskan syntaks berikut diantara tag BODY :
<img src="[Link]" border=”2” width="50" height="50"
align="left" />Gambar di samping kiri<br>
Gambar di tengah <img src="[Link]" width="50"
height="50" align="middle" /> Gambar di tengah<br>
<img src="[Link]" width="50" height="50"
align="right" />Gambar di samping kanan
- Simpan file sebagai “[Link]”
- Buka file menggunakan browser
- Hasilnya :

Gambar 3 penggunaan link gambar

 b. HTML script Hyperlink
Bagian ini akan membuat 2 (dua) buah file, dan dibaca dengan teliti.
- Buka Notepad++
- Tuliskan syntaks berikut diantara tag BODY :
<a href="[Link]" target="_top">Menuju halaman 2</a>
- Simpan file sebagai “[Link]”
- Buka file “[Link]” kemudian klik teks pada dokumen.
- Hasilnya :

Gambar 4 hyperlink menuju halaman 2

Gambar 5 hyperlink kembali halaman 1

2.3.3 Hyperlink antar Page
Buatlah direktori pada computer Anda dengan hirarki seperti gambar berikut ini,

Gambar 6 direktori folder

Kemudian buatlah tampilan web untuk 4 halaman web berikut ini,

- [Link]
- [Link]
- [Link]
- [Link]
Langkah berikutnya Anda diminta untuk membuat link pada setiap halaman web yang telah dibuat
diatas, agar setiap halaman web tersebut dapat saling terhubung.
Gunakan teknik relative path pada penggunaan link tersebut. Dan jangan lupa untuk melakukan
settingan target link, dengan menggunakan attribute target.

2.3.4 Image HTML

Langkah berikutnya Anda diminta untuk membuat 2 image dengan format png pada direktori
“images”. Kemudian tampilan image tersebut pada page [Link] dan [Link]. Perhatikan
penggunaan attribute image berikut ini: src, alt, width, height, title, dan usemap.
Gunakan teknik relative path untuk menyajikan source dari image tersebut.
2.4 Latihan

1. Jelaskan minimal 20 Tag HTML yang Anda ketahui berkaitan dengan formatting text dan element
page untuk link atau image. Untuk masing-masing Tag yang Anda jelaskan tersebut silahkan berikan
contoh penerapan dan contoh pengunaan minimal 2 Attribute

2. Buatlah tampilan web sederhana dengan mencontek dari tampilan web berita pada referensi web
berikut :

a. [Link]
b. [Link]
c. [Link]
d. [Link]
Anda diminta untuk menerapkan minimal 10 Tag HTML pada formatting tulisan yang Anda buat, dan

sertakan juga penggunaan Image pada tampilan tulisan tersebut.

 Modul 3 : TABLE & FORM INPUT DATA HTML5
3.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Mengetahui penggunaan script HTML5 dan CSS3
2. Penggunaan Table HTML
3. Penggunaan Form, Input Form dan attribute data
4. Mampu menyajikan data dalam bentuk Table
5. Memahami berbagai penggunaan TAG Form, element form, input form dan
attribute form
6. Memahami penggunaan Form sesuai dengan karakteristik data inputan dari user

3.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc.

3.3 Dasar Teori

3.3.1 Tabel HTML
Tabel HTML didefinisikan dengan tag <table>. Setiap baris tabel didefinisikan dengan tag
<tr>. Header tabel didefinisikan dengan tag <th>. Secara default, judul tabel dicetak tebal dan
berpusat. Data tabel / sel didefinisikan dengan tag <td> .Catatan: Elemen <td> adalah wadah data
dari tabel. Mereka dapat berisi beragam macam elemen HTML; teks, gambar, daftar, tabel lainnya,
dll.

a. Deklarasi Element Table pada HTML5

Gunakan tag Table pada dokumen HTML tersebut.
<table border="1">
<tr>
</tr>
</table>
b. Membuat Row dan Kolom pada Table HTML5

Sama seperti penggunaan table pada umumnya, Anda akan membuat bagian baris dan kolom,
gunakan tag TR (baris) dan TD atau TH (kolom), perhatikan contoh berikut

<tr>
<th>NIM</th>
<th>Nama</th>
<th>Kelas</th>
<th>Hadir</th>
<th>Sakit</th>
<th>Absen</th>
</tr>
c. Membuat Table data pada HTML5
Berikut ini scrip lengkap untuk penggunaan table.
<table border="1">
<tr>
<th>NIM</th>
<th>Nama</th>
 <th>Kelas</th>
<th>Hadir</th>
<th>Sakit</th>
<th>Absen</th>
</tr>
<tr>
<td>1122334455</td>
<td> Indra Sjafri </td>
<td>SM-01</td>
<td>10</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Silahkan Anda menambahkan data selanjutnya pada setiap baris menggunakan blok script TR yang
sama. Hasil kurang lebih akan seperti gambar di bawah ini :

Gambar 7 hasil tabel

3.3.2 Form Input HTML

Pada bagian ini, akan dipelajari tentang teknik dasar penggunaan Form, input Form dan data pada
HTML. Silahkan buka buku referensi (learning web design) pada chapter yang menjelaskan tentang
penggunaan form. Anda diharapkan telah mengetahui bagaimana cara form pada web bekerja,
untuk menerima inputan data dari user dan kemudian dikirimkan ke halaman server lainnya untu
diproses. Perhatikan gambar berikut, dan lihat lebih lanjut penjelasan pada buku referensi

Gambar 8 proses input form

Perhatikan penggunaan script Form berikut ini,
<form>
Nama Lengkap:<br>
<input type="text" name="nama"><br>
NIM:<br>
<input type="text" name="nime">
</form>
Penggunaan form selalu diawali dengan TAG Form yang terdiri dari attribute wajib sebagai berikut,
- Action = url dari pemrosesan form
- Method = pilihan teknik submit dari form tersebut (post/gets)

Selanjutnya didalam TAG form tersebut, Anda dapat menuliskan berbagai macam variasi element
dan inputan Form sesuai dengan kebutuhan data yang diinginkan, diantaranya adalah
- <input> Defines an input control
- <textarea> Defines a multiline input control (text area)
- <label> Defines a label for an <input> element
- <fieldset> Groups related elements in a form
- <legend> Defines a caption for a <fieldset> element
- <select> Defines a drop-down list
- <optgroup> Defines a group of related options in a drop-down list
- <option> Defines an option in a drop-down list
- <button> Defines a clickable button
Beberapa macam jenis TAG input pada Form,
- text - color
- checkbox - date
- radio - email
- submit - number
- reset
- range

Perhatikan contoh berikut,

<form action="[Link]">
First name:<br>
<input type="text" name="firstname" value="Udin" /><br>
Last name:<br>
<input type="text" name="lastname" value="Lagi" /><br><br>
Gender:<br>
<input type="radio" name="gender" value="male" checked /> Male<br>
<input type="radio" name="gender" value="female" /> Female
Birthday:
<input type="date" name="bday" />
<input type="submit" value="Submit" />
<input type="reset" />
</form>
3.3.3 Membuat Form
Buatlah tampilan web sederhana dengan HTML, semirip mungkin dengan contoh berikut ini,

Gambar 9 form sedeherhana

Perhatikan penggunaan berbagai macam TAG element yang berkaitan dengan Form.
Penggunaan input tersebut harus disesuaikan dengan kebutuhan data input yang akan
dimasukkan oleh user pada apikasi.

Solusi,
<html>
<body>
<h1>Pendaftaran Multimedia Club</h1>
<form action="/action_page.php">
Nama Langkap:<br>
<input type="text" name="name" value="Udin Lagi">
<br>
NIM:<br>
<input type="text" name="nim" value="">
<br>
Prodi
<select name="prodi">
<option value="sm">D4 SM</option>
<option value="mi">D3 MI</option>
<option value="tk">D3 TK</option>
<option value="tt">D3 TT</option>
</select>
<br>
Alamat <br>
 <textarea name="alamat" rows="10" cols="30">
jalan...
</textarea>
<br>
Birthday: <br>
<input type="date" name="bday">
<br>
Gender<br>
<input type="radio" name="gender" value="pria" checked> Pria<br>
<input type="radio" name="gender" value="wanita"> Wanita<br>
<br>
Hobi<br>
<input type="checkbox" name="hobi" value="Bola"> Main Bola<br>
<input type="checkbox" name="hobi" value="Baca"> Baca Buku
<br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>

3.4 Latihan
Pekan ini Anda mendapatkan project dari seorang Client yang sedang membuat aplikasi jual beli
untuk Koperasi di SMA. Buatlah Form Input menggunakan HTML, Anda diminta membuatnya dengan
design dan layout yang menarik, mudah dipahami dan sesuai karakteristik data. Berikut ini spesifikasi
data yang diinginkan oleh client Anda.

1. Untuk ANDA NIM (digit terakhir GENAP), buat halaman [Link] yang berisi form
PENDAFTARAN SISWA SMA untuk menerima inputan :
a. NIS (nomor induk siswa), terdiri dari 6 digit/karakter angka
b. Nama Lengkap, harus terdiri dari 3 atau 50 karakter saja
c. Tempat Lahir
d. Tanggal Lahir
e. Alamat Orang Tua, diisi dengan alamat lengkap
f. Kecamatan (hanya untuk area bandung saja)
g. Jenis Kelamin, hanya untuk pilihan Pria atau Wanita
h. No. Telepon, sesuai dengan format nomer yang berlaku di Indonesia
i. Hobi siswa, dalam bentuk pilihan Hobi
j. Ukuran Baju, untuk pilihan S, M, L, XL
2. Untuk ANDA NIM (digit terakhir GANJIL), buat halaman data [Link] yang berisi form
REKAP DATA BARANG untuk menerima inputan :
a. Kode Barang, terdiri dari 5 digit/karakter
b. Nama Barang, harus terdiri dari 3 atau 50 karakter saja
c. Kategori Barang, sesuai dengan pilihan kategori (makanan, elektronik, obat,
pakaian, minuman, dll)
d. Tanggal Masuk
e. Tanggal Kadaluarsa
f. Area Penjualan, memilih beberapa target kota distribusi barang (misal bandung,
jakarta, semarang, subang, dll)
g. Harga Barang
h. Upload Gambar Barang
i. Alamat Distributor Resmi
j. Jumlah Stok Barang

3. Pastikan setiap Form Input yang Anda buat sesuai dengan karakteristik data yang telah
disampaikan diatas (pada point 1 dan 2 sesuai NIM ANDA)

4. Jangan lupa untuk memastikan setiap inputan harus diisi oleh user (required dan valid).
Kemudian Input form yang telah terisi akan disimpan atau submit ke halaman [Link]
 Modul 4 : WEB DESIGN CSS3

4.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Mengetahui penggunaan script HTML5 dan CSS3
2. Penggunaan CSS3 untuk Design Web
3. Penggunaan Teknik sederhana layout Web dengan CSS3
4.2 Alat & Bahan
Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc.

4.3 Dasar Teori

4.3.1 CSS3
CCS atau Cascading Style Sheets adalah markup presentasional yang digunakan untuk
memberikan petunjuk browser tentang tampilan elemen HTML. CSS diperkenalkan untuk
menciptakan pemisahan yang jelas antara konten, markup HTML dan penyajiannya, aturan CSS, ini
sebagai tanggapan terhadap kecenderungan awal menggunakan tabel dan bingkai dan lapisan untuk
memaksa tata letak pada dokumen vertikal dengan membangun elemen presentasi langsung ke
dalam HTML, dengan demikian mencampur konten dengan hal-hal yang tidak bermakna dan juga
mengacaukan konten dalam prosesnya.

Pada praktikum ini, Anda disarankan untuk menggunakan script CSS dengan teknik
pemanggilan file CSS, yaitu external link style sheet. Perhatikan contoh berikut untuk dibuat
pada dokumen HTML Anda,

[Link]
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
Jangan lupa untuk membuat file [Link] dan file [Link] berada pada direktori web
yang sama. Kemudian script CSS dapat Anda tuliskan pada file [Link], dengan
memanggil selector atau element tag HTML yang ada pada file [Link]. Perhatikan
struktur penulisan script CSS berikut ini.

Gambar 10 struktur penulisan CSS

Selector pada CSS (untuk hal yang dasar) dapat berupa:

a. Element TAG HTML, seperti <body>, <p>, <td>, <div>, <input>, <a>, <img>, <form>,
<h1>, etc. Cara pemanggilannya pada CSS adalah dengan menuliskan nama element
TAG, misal: body.
b. Class TAG, gunakan Class Selector dengan menambahkan titik (.) pada element class
yang akan dimodifikasi
 c. ID Tag, gunakan ID Selector dengan menambahkan pagar (#) pada element ID yang
akan dimodifikasi.
Perhatikan contoh berikut ini untuk Class Selector.

Gambar 11 memilih kelas

Perhatikan contoh berikut ini untuk ID Selector

Gambar 12 memilih id

Selain itu dapat juga dilakukan pemanggilan lebih dari satu selector (group) untuk satu
block script CSS, dengan cara menggunakan tanda koma (,) pada pemisah selector. Berikut
ini contohnya.

Gambar 13 memilih grup

Dalam penulisan CSS juga dikenal teknik pemanggilan Selector secara Descendant atau berurutan
sesuai hirarki penulisan element tag pada file HTML yang dibuat. Teknik ini menggunakan pemisah
spasi ( ) antar selector. Perhatikan contoh berikut ini.

Gambar 14 memilih secara berurutan

Cara membaca script CSS diatas adalah sebagai berikut, “cari selector ID #tagline yang
didalamnya ada selector Class .sidebar kemudian ubah style CSS-nya”.

Ikuti contoh script CSS berikut ini. Perhatikan penggunaan selector dan parameter pada
CSS agar Anda bisa lebih paham penggunaannya.

A. Pemanggilan Selector secara Descendant (pemisah dengan spasi).

 [Link]
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>

[Link]
div p {
background-color: yellow;
}
Perhatikan hasilnya, kemudian bandingkan jika pemisah spasi ( ) diganti dengan koma (,).
Anda dapat menambahkan modifikasi lainnya untuk melihat perbedaan ketika manggil
sekaligus selector pada satu block script CSS yang sama.

B. Pemanggilan Class selector dan ID Selector.

[Link]
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
<p class="default">another style paragraph.</p>
<p id="test">another background style paragraph.</p>
</body>
[Link]
.center, #test { text-
align: center;
color: red;
}

p {
text-align:
right; color:
green; }

[Link] {
text-align: center;
color: red;
}
#test{
Background: yellow;
}
Perhatikan teknik pemanggilan selector gabungan dari Tag HTML dan Class tanpa pemisah
spasi. Anda juga bisa mencoba untuk modifikasi jika menggunakan tanda koma (,), spasi (),
atau gabungan lainnya.

4.3.2 Modifikasi Style CSS3

Pada bagian ini akan dipelajari lebih lanjut berbagai script CSS untuk melakukan modifikasi design
pada HTML. Meliputi design konten text, table, form dan layout sederhana. Sebaiknya Anda juga
membaca referensi pada buku CSS.

a. Teknik Color & Background

Penggunaan warna pada script CSS bisa mengikuti format warna keyword HTML,
hexadecimal, atau RGB color. Penggunaan format warna yang tepat akan mempermudah
Anda untuk mendapatkan komposisi warna yang lebih presisi. Perhatikan contoh warna
dengan berbagai format berikut ini.

Gambar 15 kode warna

Selain itu untuk perubahan warna background dari element bisa juga menggunakan image
background, seperti contoh berikut ini.

body {
background: #ffffff url("img_tree.png") no-repeat right top; }

Perhatikan contoh diatas, penggunaan value dari 5 parameter background digunakan

secara bersamaan. Hal ini bisa dilakukan pada script CSS, dan bisa pula dilakukan jika
setiap parameter digunakan terpisah. Perhatikan contoh penggunaan parameter
background secara terpisah.

body {
background-image: url("img_tree.png");
background-repeat: no-repeat; background-position:
right top; background-attachment: fixed; }

Anda perlu mengetahui berbagai macam parameter yang ada pada CSS.
B. Modifikasi Konten Text

Silahkan untuk melihat pada buku referensi untuk penggunaan CSS pada modifikasi text
dengan kebutuhan sebagai berikut ini,

 Textalignment  TextDecoration
 Color  Transformation
  Line Height  Direction
 Text Shadow  Etc
 Vertical align

Perhatikan contoh berikut ini.

h1 {
text-align: center; text-
transform: uppercase;
color: #4CAF50;
} p
{
text-indent: 50px; text-
align: justify; letter-
spacing: 3px;
} a
{
text-decoration:none;
color: #008CBA;
}
Pada Penggunaan modifikasi Font, yang perlu Anda perhatikan adalah berbagai teknik
penulisan parameter font dan satuan ukuran pada font (pixel, percent, em, point, etc).
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

Contoh Soal

Buatlah Aplikasi sederhana menggunakan script HTML berikut ini, simpan dalam file [Link]

<html>
<head>
<title>All About Me</title> <link rel="stylesheet"
type="text/css" href="[Link]">
</head>
<body>
<div id="header">
<h1>My Profile</h1> <span
id="tagline"> "selalu
memberikan yang terbaik"
</span> <div class="menutop">
<ul>
<li><a href="#" class="menu">Home</a></li>
<li><a href="#" class="menu">Gallery</a></li>
<li><a href="#" class="menu">Profile</a></li>
<li><a href="#" class="menu">Link</a></li>
</ul>
</div>
</div>
<div id="main-content"> <p class="konten"> Hari ini begitu indah untuk belajar
HTML. Saya sangat mencintai HTML sepenuh hati. </p> <p class="konten">Hobby
Saya:
<ul class="listkonten">
<li>Mancing</li>
<li>Futsal</li>
<li>Makan Banyak</li>

<li>Mandi</li>
</ul>
</p>
<div class="konten"> <h3>Menu Makanan Hari ini</h3> <p> <table border="1"> <tr>
<th>No Menu item</th> <th>Calories</th> <th colspan="2">Size (g)</th>
</tr> <tr>
<td>1</td> <td>Chicken noodle soup</td> <td>120</td> <td rowspan="2" >2</td>
</tr> <tr>
<td>2</td>
<td>Caesar salad</td>
<td>400</td>
</tr> <tr>
 <td>3</td> <td>Chicken noodle soup</td>
<td>120</td>
<td>2</td>
</tr> <tr>
<td>4</td>
<td>Caesar salad</td>

<td>400</td>
<td>26</td> </tr>

</table> </p>
</div>
<hr />
<h2>Ceritaku Hari ini</h2> <p class="konten">
Hari ini begitu indah untuk &nbsp; &laquo; belajar HTML. Saya sangat mencintai HTML
sepenuh [Link] <i>ini begitu indah untuk belajar</i> HTML. Saya sangat <b>mencintai</b> HTML
sepenuh [Link] ini begitu indah untuk belajar HTML. <pre>Saya sangat mencintai HTML sepenuh
hati.</pre> Hari ini begitu indah untuk belajar HTML.
Saya sangat mencintai HTML sepenuh [Link] ini begitu indah untuk belajar HTML. Saya sangat mencintai
HTML sepenuh [Link] ini begitu indah untuk belajar HTML. Saya sangat mencintai HTML sepenuh hati.
</p>
</div> <div id="footer">
bagian bawah dari tampilan website Anda &copy 2015 </div>
</body> </html>

4.4 Latihan
 1. Layout Web Design

Buatlah tampilan Layout Web berikut ini menggunakan HTML dan CSS.

Gambar 16 tampilan layout web

Clue untuk pengerjaan Tugas Akhir ini ada pada buku Learning Web Design Chapter 15-16.

2. Modifikasi CSS

Silahkan gunakan hasil pekerjaan Anda pada exersice 2. Dan lengkapi modifikasi sesuai list
kebutuhan berikut ini. Perhatikan NIM GANJIL mengerjakan point GANJIL, dan NIM GENAP
mengerjakan point GENAP.

1. Modifikasi warna huruf pada class Judul mirip seperti “Merah Tel-U”
2. Modifikasi warna huruf pada class Judul dengan warna biru
3. Ubah ukuran Font class Judul menjadi lebih Besar
4. Ubah ukuran Font bagian tagline menjadi lebih kecil dan italic
5. Buatlah agar tampilan menutop pada class menu menjadi horizontal (menyamping)
6. Buatlah agar tampilan menutop pada class menu menjadi horizontal (menyamping)
7. Ubah warna background setiap bagian menu menjadi Hijau
8. Ubah warna background pada bagian menutop menadi Biru
9. Modifikasi bentuk/jenis dan ukuran huruf pada bagian main-konten
10. Modifikasi bentuk/jenis dan ukuran huruf pada bagian konten
11. Ubah bentuk “bullet” pada listkonten menjadi kotak
12. Ubah bentuk “bullet” pada listkonten menjadi bentuk selain kotak/bulat
13. Buatlah tampilan untuk semua tabel tanpa garis pinggir
14. Buatlah tampilan tabel dengan garis pinggir warna pink dan lebih tebal
15. Ubah warna background bagian header dari tabel menjadi Merah, dan sesuaikan
warna hurufnya
16. Ubah warna background bagian header dari tabel menjadi Coklat, dan sesuaikan
warna hurufnya
17. Lakukan modifikasi pada bagian konten, ubah jenis dan warna font
18. Lakukan modifikasi pada bagian backround konten
19. Buatlah background body menjadi gambar hello kitty
20. Buatlah background body menjadi gambar Marsha & Bears
21. Ubah posisi footer menjadi center, dan tambahkan garis pinggir
22. Ubah posisi footer menjadi right, dan tambahkan garis pinggi putus-putus
 Modul 5 : INTRODUCTION WEB SCRIPTING PHP
5.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Memahami penggunaan dasar PHP
2. Mengetahui penggunaan variable, condition dan loop pada PHP
3. Mengetahui teknik troubleshooting sederhana

5.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc.

5.3 Dasar Teori

5.3.1 PHP
PHP adalah bahasa pemrograman populer yang dapat Anda gunakan untuk menulis kode
sederhana untuk halaman web. Jika Anda telah menggunakan HTML untuk mengembangkan situs
web, belajar PHP akan memungkinkan Anda untuk membuat halaman dinamis. Dalam kursus ini,
pelajari dasar-dasar PHP. Konsep-konsep seperti bagaimana menanamkan kode PHP ke dalam
halaman HTML, dan meninjau jenis data PHP dasar seperti string dan array. Dia juga mencakup
struktur kontrol yang berbeda di PHP, cara bekerja dengan fungsi PHP built-in, dan bagaimana
mendefinisikan fungsi kustom Anda sendiri.

[Link] Variable & tipe data

Penggunaan script PHP mengikuti aturan case sensitive, sehingga dalam penamaan variable harus
memperhatikan kaidah penulisannya. Sedangkan untuk tipe data pada setiap variable adalah sama
seperti pada Bahasa pemrograman lainnya pada umumnya.

Perhatikan contoh deklarasi variable berikut ini,

<?php
$Nama = "Udin";
$nama = "Susi";
echo "I love " . $Nama . "!";

$x = 5; $y = 4;
echo $x + $y;
echo $nama + $y;
echo "Hasil penjumlahan ".$y." dengan ".$x." adalah ".$y+$x;

?>

Perhatikan cara penggabungan variable pada contoh diatas, menggunakan titik (.) atau operator
tambah (+) akan memberikan hasil yang berbeda. Selain itu Anda juga perlu mengetahui lingkup
penggunaan variable secara Global, Local dan Static. Silahkan diskusikan penggunaan lingkup
variable tersebut dengan teman Anda.

Berikut ini beberapa tipe data yang bisa digunakan pada PHP,
 • String
• Integer
• Float (floating point numbers - also called double)
• Boolean
• Array
• Object
• NULL
• Resource

Silahkan cek mekanisme penggunaan berbagai tipe data tersebut pada PHP Manual Anda.
<

?php

buah

array

(“semangka”,

“durian ”, “ pisang ”, ”nanas ”, “jeruk ”);

echo $buah[3];

?>
 Contoh diatas adalah untuk pengunaan variable Array. Perhatikan juga perbedaan untuk
penggunaan variable lainnya, seperti Integer, Float dan Boolean.

2. Operator PHP

<?php
$x = 20; $x += 100; echo
$x;
?>
Perhatikan hasil dari contoh penggunaan operator penjumlahan diatas. Ada banyak operator pada
PHP, yang penggunaannya juga sama seperti pada Bahasa pemrograman lainnya. Berikut ini
berbagai jenis operator yang ada dan perlu Anda coba pelajari,

• Arithmetic operators
• Assignment operators
• Comparison operators
• Increment/Decrement operators
• Logical operators
• String operators
• Array operators

Gambar 17 operator PHP

Penggunaan operator aritmatik umumnya digunakan untuk perhitungan angka (numeric)

pada variable integer atau float. Perhatikan contoh penulisan tiap operator aritmatic
diatas.
Operator diatar adalah untuk kebutuhan perbandingan (comparison), umumnya digunakan pada
penerapan algoritma yang menggunakan loop atau condition. Perhatikan contoh penggunaan
operator comparison diatas.

Selain itu dikenal juga operator untuk string yang menggunakan titik(.). Dan berbagai operator
lainnya yang tidak dibahas dalam modul ini, silahkan untuk Anda cari tahu kembali pada referensi
PHP yang telah dimiliki.

Contoh Soal

Buatlah aplikasi web sederhana dengan PHP, yang dapat menampilkan data nilai dan IP Anda pada
semester 2. Data dapat diambil dari iGracias, dengan ketentuan sebagai berikut:

- Setiap Nilai dan jumlah SKS pada matakuliah harus dimasukkan ke dalam variable PHP
- Komponen perhitungan IP dibuat dalam variable dan dihitung langsung menggunakan script
PHP
- Total IP yang ditampilkan berasal dari perhitungan PHP yang Anda buat
- Perhatikan contoh tampilan berikut ini,
 Gambar 18 daftar nilai

Langkah Penyelesaian

1. Perhatikan penggunaan Kode MK, Nama MK, SKS dan Nilai, buat parameter tersebut
dalam setiap variable terpisah.
2. Kemudian buat tampilan menggunakan HTML table, untuk menyajikan data Nilai semester
tersebut.
3. Untuk perhitungan IP, tinggal menggunakan semua variable SKS dan Nilai tiap MK yang
telah dibuat. Ikuti aturan perhitungan IP yang berlaku di Tel-U

<table align="center" cellpadding="0" cellspacing="0" border="1" id="tDisplay" class="crud_table"

width="100%" style="font-family:verdana;font-size:12px;color:#333;">
<thead>
<tr>
<th align="center" colspan="5">Semester 1</th>
</tr>
<tr>
<th align="center" width="100px">No</th>
<th align="center" width="150px">Kode Mata Kuliah</th>
<th align="center">Nama Mata Kuliah</th>
<th align="center" width="100px">SKS</th>
<th align="center" width="100px">Nilai</th>
</tr>
</thead>
<tbody><tr>
 <td align="center">1</td>
<td align="center"><?php echo $kodeMK1; ?></td>
<td><?php echo $namaMK1;?></td>
<td align="center"><?php echo $sksMK1; ?></td>
<td align="center"><?php echo $nilaiMK1; ?></td>
</tr><tr>
<td align="center">2</td>
<td align="center"><?php echo $kodeMK2; ?></td>
<td><?php echo $namaMK2;?></td>
<td align="center"><?php echo $sksMK2; ?></td>
<td align="center"><?php echo $nilaiMK2; ?></td>
</tr><tr>
<td align="center">3</td>
<td align="center"><?php echo $kodeMK3; ?></td>
<td><?php echo $namaMK3;?></td>
<td align="center"><?php echo $sksMK3; ?></td>
<td align="center"><?php echo $nilaiMK3; ?></td>
</tr><tr>
<td align="center">4</td>
<td align="center"><?php echo $kodeMK4; ?></td>
<td><?php echo $namaMK4;?></td>
<td align="center"><?php echo $sksMK4; ?></td>
<td align="center"><?php echo $nilaiMK4; ?></td>
</tr><tr>
<td align="center">5</td>
<td align="center"><?php echo $kodeMK5; ?></td>
<td><?php echo $namaMK5;?></td>
<td align="center"><?php echo $sksMK5; ?></td>
<td align="center"><?php echo $nilaiMK5; ?></td>
</tr><tr>
<td align="center">6</td>
<td align="center"><?php echo $kodeMK6; ?></td>
<td><?php echo $namaMK6;?></td>
<td align="center"><?php echo $sksMK6; ?></td>
<td align="center"><?php echo $nilaiMK6; ?></td>
</tr><tr>
<td align="center">7</td>
<td align="center"><?php echo $kodeMK7; ?></td>
<td><?php echo $namaMK7;?></td>
<td align="center"><?php echo $sksMK7; ?></td>
<td align="center"><?php echo $nilaiMK7; ?></td>
</tr><tr>
<td align="center">8</td>
<td align="center"><?php echo $kodeMK8; ?></td>
<td><?php echo $namaMK8;?></td>
<td align="center"><?php echo $sksMK8; ?></td>
<td align="center"><?php echo $nilaiMK8; ?></td>
</tr></tbody>
<tfoot>
<tr>
<td colspan="3" align="center">TOTAL SKS</td>
<td align="center"><?php echo $TotalSKS; ?></td>
<td>&nbsp;</td>
</tr><tr>
<td colspan="3" align="center">IP SEMESTER</td>
<td colspan="2" align="center"><?php echo $IPsemester; ?></td>
</tr>
</tfoot>
</table>
5.3.2 PHP Condition

Pada bagian ini akan dibahas cara penggunaan script PHP untuk kasus algoritma kondisi
seperti yang biasa digunakan pada pemrograman lainnya.

Umumnya untuk penggunaan Condition pada PHP mengikuti ketentuan berikut ini,

 “IF” kondisi benar hanya satu

 “IF … ELSE ” kodisi benar atau salah
 “IF … ELSE IF … ELSE” kondisi benar atau salah bisa lebih dari satu
 “switch … case” untuk kondisi pilihan

<?php
$t = date("H");

if ($t < "20") {

echo "Horray Tanggal MUDA!";
} else {
echo "Ampuuun Tanggal TUA!";
}
?>

Pada contoh diatas, penggunaan date() merupakan library yang dimiliki PHP untuk
menampilkan function tanggal, silahkan pelajari lebih lanjut penggunaan library tersebut.
Perhatikan juga penggunaan condition dengan operator perbandingan “<” atau “>” atau
yang lainnya. Selain itu perhatikan juga penggunaan kondisi dalam bentuk berjenjang dan
bersarang.

<?php $x

= 20;

if($x > 0){ echo "$x is greater than

zero";
}elseif($x == 0){ echo
"$x is zero";
}else{ echo "$x is less than
zero";
}

?>

Jenis kondisi yang lain adalah Switch, memiliki karakteristik khusus yang biasa digunakan
pada kasus algoritma pilihan.
 <?php
$tech = 'PHP';
$msg = '';
switch($te
ch){ case
'PHP':
$msg = 'PHP is cool';
br
eak; case
'Perl':
$msg = 'Perl is awesome';
br
eak; case
'Python':
$msg = 'Perl is beautiful';
br
eak; case
'Java/JSP
':
$msg = 'JSP is robust';
brea
k; case
'C#/[Link]
T':
$msg = 'C#/[Link] is awesome';
break;
default:
$msg = 'What technology are you
using?';
break;
}

echo $msg;
?>
Jika Anda masih ragu dengan penggunaan Algoritma Condition, disarankan untuk
membuka kembali materi algoritma dan pemrograman pada semester yang telah lalu.

5.3.3 PHP Loop (Iterasi)

Pada bagian ini akan dibahas cara penggunaan script PHP untuk kasus algoritma Looping atau
perulangan atau iterasi seperti yang biasa digunakan pada pemrograman lainnya. Pada penggunaan
PHP dikenal 2 jenis Loop yang umum digunakan, yaitu “For loop” dan “While loop”.
<?php
for ($x = 0; $x <= 10; $x++)
{ echo "Urutan nomer ke:
$x <br>";
}
?>
Contoh diatas adalah penggunaan sederhana dari “for loop” untuk iterasi yang sudah pasti bisa
diketahui jumlahnya. Atau bisa juga digunakan untuk menampilkan isi data dari sebuah Array yang
sudah diketahui pasti jumlah isi datanya.

<?php
$warna = array("red", "green", "blue", "yellow");

foreach ($warna as $isi) {

echo "$isi <br>";
}
?>
Selain itu ada juga jenis loop yang lain yaitu while. Perhatikan contoh berikut ini.

<?php
$x = 6;

do {
echo "The number is: $x <br>";
$x++;
} while ($x <= 5);
?>

Perhatikan penggunaan loop dengan menggunakan while , Anda harus hati-hati menerapkan
statement pada bagian kondisi while untuk memastikan loop ini bisa berhenti. Misal pada contoh
diatas adalah jika $x <= 5 maka iterasi dari while tersebut akan berhenti.

5.4 Latihan

Kasus 1

Dibutuhkan aplikasi PHP untuk menghitung uang kembalian pada Kasir Toko. Pecahan nilai
kembalian yang dibolehkan hanya dalam nominal uang 500, 1000, 5000 dan 10000. Aplikasi akan
menerima inputan dalam bentuk total kembalian, dan memberikan hasil tampilan jumlah uang
kembalian. Berikut beberapa contoh penerapanannya.

• Inputan : 12500, Tampilan Output: 1 uang 500, 2 uang 1000 dan 1 uang 10000.
• Inputan : 7500, Tampilan Output: 1 uang 500, 2 uang 1000, 1 uang 5000

Anda disarankan untuk menggunakan Form pada penyelesaian kasus ini!

Kasus 2

Pada Jurnal pertama Anda diminta untuk membuat tampilan nilai pada iGracias. Pada kasus ini Anda
diminta melakukan modifikasi pada proses hasil tampilan tersebut, dengan ketentuan sebagai
berikut,

 Gunakan variable ARRAY untuk setiap data Mata Kuliah (Kode, nama MK, SKS, Nilai)
 Tampilkan data ARRAY pada table tersebut, dengan menggunakan LOOP

 Index Nilai ditampilkan dengan menggunakan hasil pengerjaan pada Jurnal kedua,
menggunakan condition
 Lakukan perhitungan IPK pada semester 1 dan 2 untuk nilai Anda tersebut.

Modul 6 : PHP INPUT DATA FORM

6.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Memahami penggunaan method Form pada PHP
2. Mengetahui penggunaan variable, condition dan loop pada PHP
3. Mengetahui teknik validasi data sederhana pada PHP

6.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc mysql dan xampp.
6.3 Dasar Teori
6.3.1 Input dan Validasi Form PHP
Teknik penggunaan input Form ini merupakan kelanjutan dari materi input Form HTML. Jika pada
script HTML Anda telah berhasil membuat tampilan Form input yang sesuai kebutuhan data, maka
pada bagian PHP Anda akan diminta untuk menangkap data. Perhatikan ilustrasi dibawah ini,

Gambar 19 proses input dan validasi PHP

Form yang telah diisi oleh user/client, kemudian akan dikirim ke server dengan meng-klik
tombol ‘submit’. Server akan menangkap data pada form tersebut dan mengolahnya
menggunakan PHP. Teknik method yang dimiliki oleh PHP untuk menangkap data dari
client adalah sebagai berikut,

• POST
• GET

Penggunaan method ini juga tergantung dari data hasil kiriman pada form HTML yang telah dibuat.
Pada beberapa tutorial PHP dikenal dengan istilah Form Handling (tampilan form yang kita buat).
Kemudia pada halaman web lainnya dibuat Form Validation untuk menangkap hasil kiriman dari
tampilan [Link] Anda membuat 2 file pada server web Anda, yaitu file [Link] (berisi
tampilan form HTML input data) dan file [Link] (berisi script PHP untuk menangkap variable
data form).

Perhatikan contoh script untuk tampilan form berikut ini,

[Link]
<form action="[Link]" method="post">
Nama Lengkap: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
 Kemudian berikutnya script PHP untuk handling atau menangkap inputan form.

[Link]
<h2>Simpan Data Form</h2>
<p>Selamat Datang <?php echo $_POST["name"]; ?></p>
<p>data email Anda berhasil kami simpan: <?php echo $_POST["email"]; ?> </p>

Perhatikan hasil inputan dari kedua form diatas, dan lihat juga hasilnya pada halaman berikutnya.
Pada prinsipnya setiap inputan yang dikirim melalui HTML client akan bisa ditangkap sebagai variable
POST atau GET oleh server PHP. Berikut ini contoh lain penggunaan method GET (hampir sama
dengan POST).

input_get.php
<form action="simpan_get.php" method="get">
Nama Lengkap: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
simpan_get.php
<h2>Simpan Data Form</h2>
<p>Selamat Datang <?php echo $_GET["name"]; ?></p>
<p>data email Anda berhasil kami simpan: <?php echo $_GET["email"]; ?> </p>

Silahkan perhatikan perhatikan hasil data yang dilempar menggunakan POST dan GET, pasti hasilnya
sama. Yang membedakan hanya pada teknik pengiriman data. Penggunaan method ini juga
berkaitan dengan masalah keamanan data. Anda perlu cari tahu tentang kelebihan dan kekurangan
dari penggunaan kedua method ini.

Untuk melakukan Validasi inputan form, Anda tinggal mengolah semua variable input yang sudah
ditangkap. Proses validasi biasanya terjadi pada kasus data akan disimpan, cek login, dan teknik
pengolahan inputan lainnya. Pastikan tipe data dari variable yang Anda tangkap digunakan secara
konsisten. Biasanya dalam banyak kasus variable yang digunakan adalah integer, string dan array.
Coba cari tahu mengenai library PHP yang berkaitan dengan tipe data tersebut, misal (cek di PHP
Manual Anda):

 String()
 Date()
 Integer()
 Array()

6.3.2 Error Handling

Pada bagian ini akan dibahas cara penggunaan script PHP untuk kasus algoritma pengecekan isi form
yang sesuai atau tidak sesuai dengan kebutuhan. Pengecekan dilakukan oleh server PHP, dan jika
tidak sesuai maka form akan dikembalikan dan data tidak diproses lebih lanjut. Perhatikan dan coba
contoh script berikut,

input_form.php
<h1>Cek Error Form PHP: Registrasi Form</h1>

<?php
if(isset($_GET['nama'])){ if($_GET['nama'] == "kosong"){ echo "<h4
style='color:red'>Nama Belum Di Masukkan !</h4>";
}
}
?>

<h4>Masukkan Nama Anda :</h4>

<form action="cek_form.php" method="post">
<table>
<tr>
<td>Nama</td>
<td><input type="text" name="nama"></td>
<td><input type="submit" value="Cek"></td>
</tr>
</table>
</form>

Kemudian hasil submit dari form tersebut akan ditangkap pada file cek_form.php

cek_form.php
<?php
$nama = $_POST['nama'];

if($nama == ""){ header("location:input_form.php?nama=kosong"); // kirim balik dengan

method get
}else{ echo "Nama anda adalah". $nama;
}
?>

Teknik ini menggunakan gabungan method POST dan GET untuk mengecek kesalahan input data
yang kosong. Coba amati dan perhatikan hasilnya, dan Anda bisa juga menggunakan untuk
pengecekan kesalahan yang lainnya.

Berikut ini contoh lain penggunaan error handling dan validation pada form.

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
}

if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
 }

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

Kemudian tambahkan scrip untuk mencoba menampilkan data inputan form.

<h2>PHP Form Validation Example</h2>

<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echohtmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
 </form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
Perhatikan penggunaan berbagai teknik algoritma untuk pengambilan input data form seperti
contoh di atas. Pada dasarnya setiap variable yang telah berhasil ditangkap maka akan bisa diolah
lebih lanjut pada server PHP.

6.3.3 PHP Loop (Iterasi)

Pada bagian ini akan dibahas cara penggunaan script PHP untuk upload File ke Server. Perhatikan
penggunaan script berikut ini.

[Link]
<form action="[Link]" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
Perhatikan penggunaan attribute multipart, pada pembuatan form input diatas. Kemudian
tambahkan file untuk mengolah hasil inputan form file upload tersebut.

[Link]
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
 }
// Check if file already exists if
(file_exists($target_file)) { echo
"Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) { echo
"Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been
uploaded."; }
else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
Perhatikan hasil dari percobaan upload file tersebut. File gambar yang berhasil di upload akan
berpindah ke direktori server (pada HTDOCS). Jika belum berhasil, maka file upload hanya akan
muncul di temporary directory dari server.

6.4 Latihan

Anda diminta untuk membaca kembali script yang telah dikerjakan. Kemudia coba pahami dan
jelaskan maksud penggunaan algoritma dan script PHP pada semua bagian jurnal praktikum ini. Jika
masih kurang jelas, silahkan bertanya pada Asisten.
 Modul 7 : PHP SESSION & COOKIES
7.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Memahami penggunaan Form dan Validasi dengan PHP
2. Mengetahui teknik penggunaan Session dan Cookies variable PHP
3. Mengetahui berbagai macam Library PHP

7.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc mysql dan xampp.
7.3 Dasar Teori
7.3.1 Input Form dan Validasi

Materi ini sedikit mengulang dari meteri pada pekan sebelumnya. Penggunaan form menjadi sangat
penting dalam pengembangan aplikasi web di PHP karena menjadi sarana untuk bertukar variable.
Pada bagian ini Anda diminta untuk memahami kembali penggunaan form dan method form untuk
pertukaran data antar page PHP, kemudian melakukan vallidasi terhadap data yang diberikan.
Beberapa hal perlu Anda pahami kembali dari penggunaan form adalah sebagai berikut,

 Jenis Tipe Form input HTML yang sesuai kebutuhan data

 Attribute Inputan Form, seperti panjang karakter, wajib diisi, petunjuk, dll
 Teknik penggunaan method form, post atau get
 Penggunaan nama variable dan value pada form input
 Penggunaan form untuk Upload File dan mekanisme tangkap File
 Teknik menangkanp dan mengelola Variable inputan Form di PHP
 Penggunaan Array pada variable Form input pilihan, seperti pada penggunaan
radio, checkbox, list, dan select option.

Jika Anda belum mahir menggunakannya, maka disarankan untuk terus berlatih agar semakin mahir
dan mampu mengembangkan teknik untuk membuat aplikasi web

Contoh soal

Buatlah aplikasi web Dinamis dari hasil pengerjaan Pertanyaan pendahuluan point 1 di atas. Dari
hasil pemuatan variable Array yang berisi 5 NAMA teman Anda dengan menggunakan NIM sebagai
index-nya. Kemudian buatlah 3 file PHP berikut ini,

 File [Link]
 File [Link]
 File [Link]

Halaman [Link] berisi form inputan untuk login, yang terdiri dari input NIM dan PASSWORD,
kedua input tersebut wajib diisi. Form login tersebut akan di submit ke file [Link] untuk dicek
validitas dari data nim dan password yang diinputkan.

Pada file [Link] Anda diminta membuat variable nama mahasiswa dan password mahasiswa
dengan Array, index dari kedua variable tersebut menggunakan nim mahasiswa. Kemudian lakukan
pengecekan dengan condition PHP, untuk mengetahui apakah nim dan password yang diinputkan
pada form login sesuai dengan data pada variable yang dimiliki. Jika validasi berhasil (nim dan
password benar) maka akan tampil nama mahasiswa pada halaman [Link]. Jika validasi gagal,
maka akan kembali ke halaman [Link], dengan menampilkan pesan error “nim atau password
Anda tidak ditemukan”.

Langkah Penyelesaian

Langkah penyelesaian dari kasus ini sesuai dengan petunjuk pengerjaan diatas. Silahkan mengikut
petunjuk untuk pengerjaan file [Link], lengkapi script berikut ini.

[Link]
 <html>
<head>
<title> </title>
</head>
<body>
<form>
NIM: <input />
Password: <input />
<input type=”submit” />
</form>
</body>
</html>
Perhatikan script diatas, pastikan form input tersebut akan mengirimkan (post atau get) data submit
ke file [Link]. kemudian pada file [Link] akan dilakukan beberapa perintah berikut ini

[Link]
<?php

//Tangkap semua variable input yang dikirim dari [Link]

//kemudian buat variable Array untuk nama mahasiswa, index menggunakan NIM
//kemudian buat variable Array untuk password, index menggunakan NIM

//pengecekan validasi login

//jika nim dan password ditemukan, maka login berhasil
//selain itu jika tidak ditemukan, maka login gagal

//Jika login berhasil tampilkan data NIM dan NAMA mahasiswa, lengkapi dengan kata sapaan

//Jika login gagal, maka kembali tampilkan (secara otomatis) ke halaman [Link]

?>
Langkah pengerjaan secara sederhana dapat Anda perhatikan pada contoh diatas. Untuk
pengecekan kondisi bisa menggunakan parameter perbandingan atau function cek empty() atau
isset() yang dimiliki PHP. Sedangkan untuk membuat tampilan kembali otomatis ke halaman
[Link], bisa menggunakan function redirect page yang dimiliki oleh PHP.

7.3.2 PHP Cookies

Librari Cookies pada PHP digunakan untuk menyimpan bentuk variable secara global, agar dapat
digunakan secara berulang pada page PHP yang berbeda. Permasalahan utama pada pemrograman
web adalah setiap deklarasi variable tidak bisa digunakan pada page yang berbeda. Untuk itulah
salah satu solusinya dengan menggunakan variable Cookies PHP. Informasi singkat tentang
penggunaan cookies dapat dilihat pada [Link]

Variable Cookies digunakan hanya pada sisi client, karena secara teknis akan tersimpan pada
temporary browser dari client. Data yang disimpan pada variable Cookies dapat diatur untuk jangka
waktu yang lama (expired time) dan diatur sesi penggunaannya pada sisi client. Sebagai contoh
penggunaan, pada Aplikasi Facebook yang telah Anda gunakan dapat otomatis login pada
penggunaan berikutnya dikarenakan penyimpanan data login Facebook menggunakan teknik
Cookies.
Perhatikan beberapa contoh penggunaan Cookies PHP berikut ini,

set_cookies.php
<?php
setcookie("nama", "Udin Saparudin Mahfudin", time()+3600, "/","", 0);
setcookie("umur", "36", time()+3600, "/", "", 0);
?>
<html>

<head>
<title>Setting Cookies with PHP</title>
</head>

<body>
<h2><?php echo "Set Variable Cookies"?></h2>
<p>Pada bagian ini variable cookies akan diinisialisasi</p>
</body>

</html>
Kemudian pada halaman lainnya variable cookies dapat dipanggil,
get_cookies.php
<body>
<?php
echo $_COOKIE["nama"]. "<br />";
/* cara lain memanggil variable cookies */
echo $HTTP_COOKIE_VARS["nama"]. "<br />";

echo $_COOKIE["umur"] . "<br />";

/* cara lain memanggil variable cookies */
echo $HTTP_COOKIE_VARS["umur"] . "<br />";
?>
</body>
Perhatikan contoh penggunaan Cookies diatas, dapat dilihat bahwa tanpa menggunakan form input
Anda tetap dapat melempar atau menggunakan variable PHP pada page yang berbeda. Namun
variable tersebut memiliki expired time 3600ms, yang artinya jika lewat batas waktu itu maka
variable tidak akan bisa digunakan lagi.

Perhatikan, bahwa variable Cookies harus di Set pada awal file PHP!

Buatlah penyimpanan data 5 Nama dan NIM teman Anda mennggunakan variable Cookies (pada
halaman set_cookies.php). Kemudian tampilkan pada halaman [Link] dan [Link]. Setting
variable tersebut hanya bisa digunakan selama 1 menit saja.

7.3.3 PHP Session

Pada bagian ini akan dibahas cara penggunaan script PHP Session untuk menangani penggunaan
variable. Sama seperti yang telah dibahas sebelumnya, bahwa permasalahan utama pada
pemrograman web adalah penggunaan variable yang hanya bisa dilakukan ada satu page. Jika solusi
sebelumnya menggunakan Cookies, maka pada bagian ini dapat juga digunakan Session untuk
menyimpan data secara global.

Perbedaannya dengan Cookies, jika menggunakan Session maka data variable akan disimpan di
server. Selebihnya penggunaan Session secara konsep mirip dengan Cookies, yaitu sebagai berikut

 harus dilakukan deklarasi variable Session pada bagian awal page PHP
 pemanggilan dapat dilakukan pada page PHP manapun sesuai format script
 variable session dapat dimusnahkan atau di delete

Penggunaan variable Session sangat sederhana, perhatikan contoh berikut ini.

set_session.php
<?php
// Start the
session
session_start(); ?>

<html>
<body>

<?php
// Set session variables
$_SESSION["color"] = "Biru";
$_SESSION["animal"] = "Kuda";
echo "Session variables are
set."; ?>

</body>
</html>
Perhatikan deklarasi session_start() harus dilakukan pada bagian awal page PHP. Untuk
penggunaan variable session juga sangat mudah, Anda hanya tinggal memanggil nama
variablenya Session tersebut pada page yang lain.

[Link]
<?php
session_start();
?>

<?php
// Echo session variables that were set on previous page
echo "Warna Paling disukai " . $_SESSION["color"] .
".<br>";
echo "Binatang yang paling lucu adalah " . $_SESSION["animal"] . ".";
?>
Pada banyak kasus penggunaan Session sangat penting, terutama untuk memudahkan programmer
dalam mengelola data dan variable. Setiap variable yang telah didaftarkan atau inisialisasi sebagai
Session maka akan dengan mudah diakses pada berbagai halaman Server lainnya.
 Beberapa contoh kasus penggunaan Session adalah sebagai berikut,

 Hak akses user pada fitur Login

 Penggunaan Shopping Cart pada toko online Fitur remember password
pada aplikasi web
 Rekomendasi barang pada katalog produk aplikasi jual beli online
 Teknik simpan data temporary
 Penggunaan Teknik Ajax atau interaktif web lainnya

Tipe data yang dapat digunakan pada Session variable juga sangat beragam, sehingga dapat
memudahkan programmer untuk menyimpan data yang akan digunakan secara berulang-ulang.
Namun jika data akan disimpan secara permanen barulah kita menggunakan Database (DBMS).

7.4 latihan
Silahkan ikuti perintah berikut ini,

Gambar 20 ilustrasi shoping chart

[Link] aplikasi web sederhana untuk menyimpan data belanja online, seperti cara kerja
keranjang belanja (shopping cart) di supermarket. Keranjang dapat menyimpan variable Array
Barang untuk nama barang dan harga barang, dengan index kedua variable tersebut
menggunakan kode barang. Buatlah inisialisasi katalog (variable) barang tersebut pada
halaman [Link] Kemudian tampilkan isi variable tersebut pada halaman [Link].
Berikan tombol beli pada setiap barang yang ditampilkan, yang jika di klik maka barang
tersebut akan masuk ke variable Session bernama keranjang. Tampilkan isi keranjang pada
halaman web lain, misalnya [Link]
Clue: bentuk dan tipe data pada variable Keranjang sama dengan Array Barang
[Link] Mainan sebelumnya Anda sudah diminta untuk membuat Group Project. Silahkan
tuliskan nama dan nim group Anda tersebut. Kemudian jelaskan Topik Project yang akan
Anda kerjakan, Deskripsi dari Aplikasi tersebut dan Fitur-fitur yang akan Anda buat pada
aplikasi tersebut. (Sesuai dengan ketentuan yang ada pada mainan pekan lalu)
 Modul 8 : BASIC PHP & MYSQL
8.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Memahami penggunaan PHP dan Database
2. Mengetahui teknik Koneksi Database MySQL (MariaDB)
3. Mengetahui penggunaan Query Dasar pada PHP Database

8.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc serta mysql dan xampp.

8.3 Dasar Teori

8.3.1 Dasar Penggunaan Database menggunakan PHP

Penggunaan Database menjadi sangat penting pada pengembangan aplikasi web yang dinamis.
Kebutuhan data pada tampilan informasi web, akan disimpan secara online pada server database.
Kemudian aplikasi akan mengakses data tersebut sesuai kebutuhan, misalnya data disimpan untuk
kebutuhan berikut ini:

 Data Pengguna untuk identifikasi dan pemberian hak akses

 Penyimpanan teks informasi berita
 Data produk yang akan dijual
 Hasil transaksi data, misalnya pada saat pasien mendapat resep obat
 Hasil perhitungan atau proses yang disimpan
 Dan banyak lagi…

Intinya, penggunaan database akan sangat dibutuhkan pada kasus data yang disimpan, data penting
untuk diingat dan akan dipakai berulang.
Teknik dasar penggunaan Database pada PHP.

Anda diasumsikan sudah mahir menggunakan database MySQL atau MariaDB, baik dengan
penggunaan Command prompt maupun tampilan GUI seperti Aplikasi PHPmyAdmin.

Gambar 22 antar muka PHPmyAdmin

Gambar 21 penggunaan PHP melalui Command

Untuk memahami dasar penggunaan Database pada PHP, perhatikan langkah-langkah berikut ini.

1. Buat Database pada DBMS MySQL (MariaDB)

a. Buat databasenya: Create DB
b. Buat table: Create Table
c. Isi data pada table menggunakan fitur aplikasi PHPMyAdmin
2. Jalankan script Koneksi DB pada file PHP, gunakan teknik MSQLi procedural
a. Lakukan pengecekan apakah koneksi berhasil atau gagal
b. Jika gagal, kemungkinan kesalahan pada script atau Server DBMS
3. Pastikan koneksi berhasil
4. Buat Script Query SQL yang sesuai kebutuhan Aplikasi (4 pilihan script Query)
a. 4 jenis Query: Select, Insert, Update, Delete
 b. Cara menuliskan script di PHP sama dengan di command prompt MySQL
5. Eksekusi script pada langkah ke-4 dengan menggunakan koneksi pada langkah ke-
2
6. Tangkap variable hasil eksekusi, menggunakan type Array atau Object
a. Pilih mode type data Array atau Object sesuai kebutuhan
b. Hasil eksekusi tidak selalu data, bisa juga hanya berupa konfirmasi gagal
atau berhasil misalnya ketika menjalankan query Delete.
7. Tampilkan hasil eksekusi data menggunakan PHP

Setiap langkah diatas akan berlaku umum pada semua jenis Query yang akan Anda
gunakan.

<?php
$servername = "localhost";
$username = "root";
$password = "12345";
$dbname = "Kampus";

// Lakukan koneksi DB dan PHP menggunakan script ini

$conn = mysqli_connect($servername, $username,
$password, $dbname);

// Lakukan pengecekan apakah koneksi berhasil atau

tidak
if (!$conn) {
die("Connection failed: " .
mysqli_connect_error());
}
echo "Connected successfully"; ?>

Permasalahan/Soal

Buatlah Database dengan nama “Kampus”, pada DBMS yang Anda gunakan. Untuk mempermudah
pembuatan database, silahkan menggunakan PhpMyAdmin.

Perhatikan struktur database Kampus yang akan Anda buat.

mempunyai

MAHASISWA WALI

Anda diminta untuk mengimplementasikan ERD tersebut kedalam bentuk table pada database
Kampus yang telah dibuat sebelumnya. Untuk bentuk data (field pada tabel) silahkan disesuaikan
dengan asumsi data yang menurut Anda dibutuhkan. Termasuk Relasi antar kedua entitas tersebut
menghasilkan kardinalitas yang sesuai dengan asumsi Anda.

Langkah Penyelesaian

Berikut ini adalah asumsi untuk bentuk data table yang dihasilkan pada setiap entitas yang ada.
 Tabel MAHASISWA Table WALI
1. NIM = varchar(12) 1. KD_DOSEN = varchar (3)
2. NAMA = 2. NAMA_DOSEN =
3. 3.
4. 4.
5.

Silahkan lengkapi table data diatas, dan buat realisasinya pada table di MySQL Anda. Kemudian isi
setiap table tersebut dengan data dummy (data percobaan), untuk masing-masing table berisi
minimal 5 data

8.3.2 Basic Query Database

Setelah Anda memahami penggunaan koneksi Database pada PHP, maka langkah berikutnya adalah
penggunaan Query. Query yang paling sederhana adalah penggunaan Insert dan Select.

Pada bagian ini perhatikan penggunaan Query Select.

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "Kampus";

// Koneksi Database
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Cek apakah koneksi berhasil

if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

// buat Query Select seperti pada MySQL

$sql = "SELECT * FROM Mahasiswa";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) { // output data dalam format Array

while($row = mysqli_fetch_assoc($result)) { echo "NIM: " .
$row["nim"]. " – Nama Mahasiswa: " . $row["nama"]. " " .
$row["tlg_lahir"]. "<br>";
}
} else {
echo "0 results";
}

mysqli_close($conn);
?>

Permasalahan/Soal

Perhatikan script PHP Contoh diatas!

Buatlah script PHP untuk menampilkan isi dari table Mahasiswa dan Wali, sesuai dengan format data
pada latihan pertama. Tampilkan data dengan menggunakan table HTML, koneksi pada PHP dan
MySQL. Kemudian lakukan modifikasi query sebagai berikut ini:

 Tampilkan urut berdasarkan NIM (ASC dan DESC) untuk table Mahasiswa
 Tampilkan urut berddasarkan KD_DOSEN (ASC dan DESC) untuk table WALI

8.4 Latihan
1. Buatlah tampilan data MAHASISWA dan WALI semenarik mungkin dengan HTML dan CSS

2. Lakukan Query pada file PHP lain, untuk men-Delete 1 data Mahassiwa (gunakan NIM).

Jika masih ada waktu, silahkan konsultasikan dengan Asisten untuk persiapan Anda Presentasi
Project web Pekan ini, dan tanyakan juga jika Anda masih mengalami kendala.
 Modul 9 : INPUT DATA PHP & MYSQL
9.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Memahami penggunaan PHP dan Database
2. Mengetahui teknik Read & Create data MySQL (MariaDB)
3. Mengetahui penggunaan Query Insert dan Select pada PHP Database

9.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc serta mysql dan xampp.

9.3 Dasar Teori

9.3.1 Insert data PHP dengan MySQL

Sebelum lanjut pada pembahasan modul ini, diharapkan Anda sudah memahami dengan baik
penggunaan Database pada PHP. Anda diharapkan telah mahir menggunakan PHP untuk membuat
koneksi dengan Database MySQL. Koneksi ini diperlukan untuk semua jenis Query atau
fungsionalitas yang akan dilakukan pada pengelolaan data. Yaitu dikenal dengan istilah CRUD pada
PHP,

 Create  Insert
 Read  Select
 Update  Update
 Delete  Delete

Secara logica, apapun aplikasi yang Anda buat, jika didalamnya terdapat aktifitas (fungsionalitas)
untuk mengelola data, maka pasti akan melakukan pengelolaan secara CRUD. Misal pada aplikasi
mengelola member (user) dari aplikasi Toko Online atau yang lainnya. Pada aplikasi tersebut aka
nada fitur untuk menambah member baru (Create), mengedit data member (Update), menampilkan
informasi data member (Read) dan menghapus data member (Delete).
 Gambar 23 tampilan olah data

Insert data menggunakan PHP

Untuk melakukan input data pada form PHP ke Database MySQL, maka kita dapat menggunakan
Query Insert. Penggunaan Query ini sama dengan penggunaan Query lainnya, terutama pada
tahapan pengerjaan seperti modul sebelumnya. Hal utama yang menjadi pembeda adalah masalah
syntax Query insert saja. Perhatikan contoh Query Insert berikut ini.
<?php
$query_insert = "INSERT INTO mahasiswa (nim, nama,
email)
VALUES ('321456', 'Komar Udin',
'udinkomar@[Link]')";
?>
Berikut ini adalah langkah-langkah yang bisa Anda gunakan untuk membuat fungsionalitas Create
atau input data pada PHP dan MySQL.

a. Pastikan Anda telah memiliki Table pada database MySQL. Table ini memiliki field,
type data dan primary key sesuai dengan kaidah pembuatan table. Jangan lupa
berikan data (isi data dummy) pada table tersebut untuk ujicoba
b. Buat file PHP (file pertama) yang berisi form HTML untuk input data sesuai jumlah
field pada table database
c. Form input tersebut mengirimkan (action) data inputn ke file PHP lainnya, yang
akan menerima input variable dan memasukkannya ke dalam database
d. Tangkap semua variable input PHP yang dikirimkan oleh form
e. Kemudian pada file PHP (file kedua) tersebut buatlah script PHP untuk koneksi ke
Database, mirip seperti penjelasan modul pekan lalu
f. Kemudian buatlah script Query Insert pada table yang dituju, dan masukkan
variable input pada script Query tersebut
 g. Selanjutkan jalankan perintah mysqli_query(), untuk mengeksekusi query insert
yang telah dibuat
h. Jika hasil eksekusi berhasil, maka data inputan akan masuk ke table
i. Kemudian coba tampilkan kembali isi table pada PHP, untuk melihat hasil inputan
yang telah dilakukan (gunakan query Select)

Langkah-langkah diatas adalah mekanisme yang umum dilakukan untuk membuat fitur Create pada
pengelolaan data table PHP. Silahkan ikuti langkah tersebut pada pengembangan aplikasi tugas
besar Anda, untuk table yang dibuat.

Permasalahan/Soal

Latihan ini harus dikerjakan oleh setiap mahasiswa, dan dipandu langsung oleh Asisten Praktikum.
Setiap mahasiswa telah diminta membuat tampilan form untuk fungsionalitas yang akan dibuatnya
pada pengerjaan Project Aplikasi Web. Setiap mahasiswa wajib mengunakan 1 table (yang beda
dengan rekan groupnya) sesuai pembagian tugas/fitur aplikasi di groupnya. Kemudian ikuti langkah
berikut ini. a) Buat Tampilan View.

Pada langkah ini, mahasiswa harus membuat tampilan isi table pada database, menggunakan query

Select. Pengerjaan bagian ini mirip seperti tugas pada modul pekan lalu

a) Buat Form Input data

Sesuai hasil presentasi pekan lalu, seharusnya mahasiswa sudah memiliki tampilan
(HTML/CSS) dari aplikasi web yang akan dibuat, termasuk untuk form input. Namun jika
belum, maka wajib untuk membuat form inputan pada file PHP, dengan jumlah input
sesuai jumlah field pada table

b) Buat file PHP untuk menyimpan Data

Kemudian hasil dari inputan form, akan ditangkap oleh file PHP yang berbeda, dan
melakukan mekanisme input data menggunakan query Insert pada PHP

c) Finishing tampilan
Setelah berhasil membuat mekanisme penyimpanan data dengan Insert Query, hasil akhir
ditampilkan kembali dengan memanggil tampilan web PHP untuk menyajikan data isi table
(dengan fitur query Select)

Silahkan kerjakan latihan ini sesuai langkah tersebut. Dan pastikan Anda sudah berkonsultasi dan
berdiskusi dengan teman segroup dan asisten praktikum.

9.4 Latihan
1. Hasil dari praktikum kali ini diharapkan bisa membantu Anda dan group dalam pengerjaan
Project Web, terutama untuk penggunaan fitur Read dan Create data (menggunakan query
Insert dan Select). Sehingga diwajibkan untuk semua mahasiswa mencoba, dan memastikan
paham dengan teknis penggunaan PHP dan MySQL tersebut. Setiap mahasiswa akan diminta
untuk presentasi hasil pekerjaannya (sesuai fitur) pada pertemuan berikutnya.
 Modul 10 : WEB HOSTING DAN SERVER
10.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:
1. Mengetahui dasar penggunaan Hosting Web dan Server
2. Mengimplementasikan Web pada environtment online
3. Mengetahui fitur-fitur layanan Hosting

10.2 Alat & Bahan

Alat & Bahan Yang digunakan adalah hardware perangkat PC beserta Kelengkapannya serta software
notepad++ atau sublime yang sudah terinstall pada masing – masing pc serta mysql dan xampp.

10.3 Dasar Teori

10.3.1 Penggunaan Twitter APIs

Pada bagian ini akan dibahas cara koneksi dan mengimplementasikan Twitter APIs, pada aplikasi web
dengan menggunakan pemrograman PHP. Pada bagian ini proses koneksi dilakukan secara online ke
situs layanan Twitter APIs.

Soal/Permasalahan
Buatlah aplikasi web sederhana untuk mengakses Twitter APIs menggunakan Bahasa PHP. Pada
aplikasi tersebut terdapat fitur untuk menampilkan isi timeline Twitter dari pengguna akun yang
dicari (search akun).

Gambar 24 timeline twitter

Langkah Penyelesaian

Langkah pertama, Anda diharuskan mendaftar sebagai developer Twitter pada link berikut
ini, [Link]

Pada informasi layanan Twitter APIs, Anda bisa melihat berbagai jenis layanan yang disediakan untuk
bisa diakses pada aplikasi web yang dibutuhkan oleh developer. Misalnya untuk APIs yang digunakan
dalam bentuk button, embedded aplikasi maupun modifikasi script untuk parsing data antar aplikasi.
Untuk penggunaannya juga tidak hanya dengan Bahasa PHP, namun bisa juga dengan Java, ASP,
Javascript dan lainnya.

Setelah memiliki akun Twitter untuk developer, langkah berikutnya adalah membuat aplikasi di
Twitter Apps. Buat Aplikasi baru dan isikan data Anda sesuai dengan kebutuhan.
 Gambar 25 tampilan aplikasi twitter

Kemudian isi data-data informasi dan setting tentang aplikasi yang akan dibuat. Twitter Apps ini akan
terkoneksi nantinya dengan aplikasi yang kita buat sendiri dengan PHP. Silahkan ikuti petunjuk
Assisten dalam pengisian data Twitter Apps tersebut.

Anda akan berhasil mendaftarkan Aplikasi pada Twitter Apps, dan diperbolehkan menggunakan fitur-
fitur pada Twitter API, jika telah berhasil memunculkan akses Token dan consumer Key, berikut ini
diantaranya,

 Consumer Key
 Consumer Secret
 OAuth Access Token
 OAuth Access Token Secret

Perhatikan contoh form dibawah ini,

 Gambar 26 form pembuatan aplikasi

Kode-kode token, akan kita gunakan untuk Authentication pada penggunaan Twitter API, sehingga
tidak sembarangan orang nantinya bisa mengakses key tersebut. Ini contoh tampilan untuk melihat
informasi tentang Token dan Consumer Key,
 Gambar 27 tampilan konsumer

Berikut ini contoh script PHP untuk authentication akun Twitter APIs,

<?php session_start();
require_once("twitteroauth/twitteroauth/[Link]"); //Path to
twitteroauth library

$twitteruser = "twitterusername";
$notweets = 30;
$consumerkey = "12345";
$consumersecret = "123456789";
$accesstoken = "123456789";
$accesstokensecret = "12345";
function getConnectionWithAccessToken($cons_key, $cons_secret,
$oauth_token, $oauth_token_secret) {
 $connection = new TwitterOAuth($cons_key, $cons_secret, $oauth_token,
$oauth_token_secret);
return $connection;
}

$connection = getConnectionWithAccessToken($consumerkey, $consumersecret,

$accesstoken, $accesstokensecret);

$tweets = $connection-
>get("[Link]
tteruser."&count=".$notweets);
echo
json_encode($tweets); ?>

Pada contoh diatas kita bisa menggunakan token yang sudah didapat untuk melakukan
aunthentication pada Twitter APIs, untuk selanjutnya mengakses layanan timeline pada Twitter.

Berikut ini contoh bentuk parsing data pada Twitter untuk melakukan twit dengan menggunakan
PHP.
<?php
session_start();
require_once("twitteroauth/twitteroauth/[Link]"); //Path to
twitteroauth library

$search = "@timberners_lee OR netneutrality OR #openinternet";

$notweets = 50;
$consumerkey = "12345678910";
$consumersecret = "12345678910";
$accesstoken = "12345678910";
$accesstokensecret = "12345678910";

function getConnectionWithAccessToken($cons_key, $cons_secret, $oauth_token,

$oauth_token_secret) {
$connection = new TwitterOAuth($cons_key, $cons_secret, $oauth_token,
$oauth_token_secret);
return $connection; }

$connection = getConnectionWithAccessToken($consumerkey, $consumersecret,

$accesstoken, $accesstokensecret);

$search = str_replace("#", "%23", $search);

$tweets = $connection-
>get("[Link]
eets);

echo json_encode($tweets);
?>

Untuk langkah berikutnya, silahkan lakukan modifikasi dalam tampilan HTML agar hasil parsing data
dari Twitter bisa disajikan sesuai dengan kebutuhan aplikasi. Dengan teknik ini Anda bisa membuat
aplikasi yang terkoneksi langsung dengan social media. Bahkan Anda bisa membuat aplikasi yang
cara kerja seperti aggregator data post pada Twitter (seperti Uber Twit dan lainnya)
10.4 Latihan
1. Perhatikan script penggunaan PHP untuk parsing data Twitter, diskusikan bagaimana cara
penggunaan dan modifikasi untuk akses timeline tersebut

2. Sebutkan function PHP yang sering digunakan pada saat melakukan akses data ke Twitter?

3. Bagaimana menurut Anda format data Twitter yang diberikan pada APIs tersebut, jenis data
apakah yang digunakan?
 Daftar Pustaka

[1] C. Peterson, "Clarissa Peterson," Lynda, [Online]. Available: [Link]

tutorials/Welcome/612196/[Link]. [Accessed 12 November 2018].

[2] R. Sharma, "What is PHP?," [Online]. Available: [Link] [Accessed

16 November 2018].

[3] J. N. Robbins, Learning Web Design 5th Edition, O'Reilly Media.