PHP-2019 (Bab 1-9) PDF

Darmawan Satyananda
Jurusan Matematika
Fakultas Matematika dan Ilmu Pengetahuan Alam
Universitas Negeri Malang
2019
Daftar Isi
DAFTAR ISI .................................................................................................................................................. II
1. PENDAHULUAN....................................................................................................................................... 1
1.1. SISTEM KOMUNIKASI ANTARA CLIENT DENGAN SERVER........................................................................................ 1
1.2. HTML SEBAGAI ”BAHASA” PENYUSUN HALAMAN WEB ....................................................................................... 2
1.3. CLIENT-SIDE SCRIPTING DAN SERVER-SIDE SCRIPTING .......................................................................................... 3
2. PENGENALAN PHP .................................................................................................................................. 5
2.1. APAKAH PHP ITU?...................................................................................................................................... 5
2.2. STRUKTUR SKRIP PHP.................................................................................................................................. 6
2.3. VARIABEL .................................................................................................................................................. 8
2.4. TIPE DATA ................................................................................................................................................. 9
2.5. TYPECASTING DAN JUGGLING ......................................................................................................................... 9
2.6. KONSTANTA ............................................................................................................................................. 11
2.7. OPERATOR............................................................................................................................................... 11
2.8. MENAMPILKAN TEKS KE BROWSER ................................................................................................................ 14
3. LOGIKA PEMROGRAMAN ...................................................................................................................... 17
3.1. PEMILIHAN KONDISI................................................................................................................................... 17
3.2. PERULANGAN (ITERASI).............................................................................................................................. 20
3.3. PERULANGAN RANGKAP ............................................................................................................................. 22
3.4. BREAK-CONTINUE ...................................................................................................................................... 23
3.5. PRAKTIKUM ............................................................................................................................................. 23
CATATAN ....................................................................................................................................................... 26
4. FORM.................................................................................................................................................... 28
4.1. FORM ..................................................................................................................................................... 28
4.2. KOMPONEN ............................................................................................................................................. 29
4.3. MENGGABUNGKAN DUA FILE....................................................................................................................... 38
5. ARRAY................................................................................................................................................... 40
5.1. KEY DAN VALUE ........................................................................................................................................ 40
5.2. DEKLARASI ARRAY ..................................................................................................................................... 40
5.3. PENELUSURAN ARRAY ................................................................................................................................ 43
5.4. OPERATOR ARRAY ..................................................................................................................................... 46
5.5. FUNCTION PADA ARRAY .............................................................................................................................. 46
5.5. MENAMPILKAN ISI ARRAY ........................................................................................................................... 49
5.6. KOMPONEN HTML YANG MEMANFAATKAN ARRAY ......................................................................................... 49
6. BOOTSTRAP .......................................................................................................................................... 54
6.1. PERSYARATAN .......................................................................................................................................... 54
6.2. STRUKTUR HALAMAN BOOTSTRAP ................................................................................................................ 55
6.3. FORM DENGAN BOOTSTRAP ........................................................................................................................ 58
7. JQUERY ................................................................................................................................................. 64
7.1. KOMUNIKASI SINKRON-ASINKRON ................................................................................................................ 64
7.2. JQUERY .................................................................................................................................................. 66
7.3. AJAX DENGAN JQUERY ............................................................................................................................... 69
7.4. KOTAK DIALOG DENGAN BOOTSTRAP ............................................................................................................. 72
7.5. KOTAK DIALOG DENGAN BOOTBOX ............................................................................................................... 74
7.6. DATEPICKER ............................................................................................................................................. 75
8. AKSES BASIS DATA ................................................................................................................................ 78
8.1. PEMBUATAN APLIKASI BASIS DATA ................................................................................................................ 79
Pemrograman Web 2017 – Darmawan Satyananda ii

8.2. TIPE DATA DI MYSQL ................................................................................................................................ 83
8.3. MEMBUAT BASIS DATA DI MYSQL ............................................................................................................... 84
8.4. KONEKSI BASIS DATA DI MYSQL .................................................................................................................. 85
8.5. OPERASI DASAR DALAM BASIS DATA .............................................................................................................. 85
9. UPLOAD FILE ....................................................................................................................................... 114
9.1. KOMPONEN FILE.................................................................................................................................... 114
9.2. PENYIMPANAN FILE KE SUATU FOLDER ......................................................................................................... 117
9.3. PENYIMPANAN ISI FILE KE DALAM TABEL ...................................................................................................... 123
10. SESSION ............................................................................................................................................ 125
10.1. PENANGANAN SESSION .......................................................................................................................... 125
10.2. PENGGUNAAN SESSION .......................................................................................................................... 126
11. PEMANFAATAN LIBRARY................................................................................................................... 133
11.1. LIBRARY UNTUK MENANGANI FILE EXCEL DARI PHP...................................................................................... 133
11.2. LIBRARY UNTUK MEMBUAT FILE PDF DARI PHP .......................................................................................... 144
Pemrograman Web 2017 – Darmawan Satyananda iii

1. PENDAHULUAN
Teknologi Internet telah berkembang pesat, tidak sulit saat ini terhubung ke Internet,
misalnya melalui fasilitas hotspot, wireless modem, handphone, fixed line, dan sebagainya.
Khusus dalam web (salah satu layanan dalam Internet), keberadaannya juga sangat beragam,
baik jenis kegunaannya (misalnya sebagai webmail, mailing list, chat, e-commerce, e-learning,
hiburan, search engine, social network) maupun teknologi yang digunakan untuk
mengantarkan informasi ke penggunanya.
1.1. Sistem komunikasi antara client dengan server

Pihak yang memanfaatkan layanan aplikasi web secara umum bertindak sebagai client
dan penyedia layanan adalah sebagai server. Saat anda membuka membuka webmail, anda
bisa dianggap sebagai client, bahkan web browser yang anda manfaatkan juga bisa dianggap
sebagai client. Di server bisa tersimpan file statik (image, audio, video, dokumen HTML), file
yang berisi skrip (script) atau kode program, basis data, dan aplikasi lain yang diperlukan.
Mekanisme komunikasi antara client dan server bisa dilihat pada Gambar 1.1:
Gambar 1.1. Mekanisme komunikasi antara client dan server
Dalam mekanisme ini, pengguna memasukkan suatu alamat halaman yang akan diakses
(alamat dikenal juga dengan URL: Uniform Resource Locator). Oleh web browser, request
(permintaan) pengguna akan diterjemahkan menjadi suatu HTTP request dan dikirimkan ke
web server (secara teknis hal ini melibatkan DNS server untuk menentukan alamat server
yang tepat). Oleh web server, request dari browser akan diproses, apakah server harus
mengirimkan suatu file statis tertentu (bisa berupa file HTML, pdf, image, video, file lainnya),
atau mengeksekusi file yang berisi skrip, atau mengakses basis data, atau tidak melakukan
sesuatu. Hasil proses ini akan dikirimkan ke browser sebagai suatu response (balasan).
Browser menentukan apa yang harus dilakukan. Bila yang dikirimkan adalah suatu halaman
web (dalam bentuk dokumen HTML) atau format lain yang didukung browser (misakan pdf)
maka browser akan memuat dan menampilkannya kepada pengguna. Bila yang dikirimkan
adalah file dengan format tidak bisa dibuka di browser, maka browser akan memberitahukan
kepada pengguna untuk menyimpannya (melalui proses download).
Mekanisme request-response ini akan berlangsung terus menerus setiap kali browser
Pemrograman Web 2019 – Darmawan Satyananda 1

memerlukan akses ke server. Kedua belah pihak tidak akan saling mengetahui status masing-
masing (stateless). Untuk mengkaitkan satu halaman dengan lainnya, bisa digunakan cookies
atau session. Ada juga cara untuk meng-otomasi mekanisme request-response sehingga
tanpa keterlibatan user tetap berlangsung komunikasi antara client dan server, misalnya
dengan komunikasi asinkron memanfaatkan teknologi Ajax (yang diwadahi oleh jQuery).
Bila permintaan dari client dilakukan terhadap file statik maka yang dikembalikan dari
server adalah isi file yang diminta. Bila permintaan dilakukan terhadap file yang berisi skrip
maka hasilnya bersifat dinamis (bayangkan anda melakukan pencarian dengan google maka
hasil hari ini bisa berbeda dengan kemarin, atau bila anda masukkan kata kunci yang berbeda
maka hasilnya juga akan berbeda pula). Skrip yang dimaksud adalah kode program yang
dieksekusi di web server. Ketika ada request kepada file yang berisi skrip, maka server
mengeksekusinya. Apapun hasilnya, akan dikembalikan kepada pengguna sebagai suatu
halaman web (web page). Pengguna tidak bisa melihat apa kode skrip, yang dilihat adalah
hasil eksekusinya saja.
1.2. HTML sebagai ”bahasa” penyusun halaman web

Secara umum, suatu halaman dalam web disusun dengan menggunakan ”bahasa”
HTML (Hypertext Markup Language). HTML berisi sejumlah simbol atau elemen (dalam bentuk
tag) yang digunakan sebagai penanda (markup) suatu informasi tertentu. Tag-tag memberi
tanda kepada browser bagaimana menampilkan suatu informasi, misalkan apakah berbentuk
list, tabel, paragraf, tercetak tebal (bold), miring (italics), bentuk perataannya, atau sebagai
penanda isi (content) apa yang ditampilkan pada suatu browser. Dalam perkembangannya,
sudah mulai dipisahkan antara informasi apa yang ditampilkan dengan bagaimana cara
menampilkannya. Melalui CSS (Cascading Style Sheet), suatu halaman web bisa hanya berisi
content saja karena hal-hal yang berkaitan dengan tampilan ditangani oleh style sheet.
Bentuk umum setiap tag adalah diapit ”<” dan ”>”. Contoh kode HTML dan tampilannya
bisa dilihat pada gambar 3.1:
<html>
<head>
<title>Contoh HTML </title>
</head>
<body>
<img src="logo-um.jpg" />
<font color="blue" face="Arial" size="6">
<b>Universitas Negeri Malang</b></font>
<hr />
</body>
</html>

Perhatikan bahwa tag <html> berpasangan dengan </html>, <body> dengan
</body>. Selain penulisan secara berpasangan (ada tag pembuka dan tag penutup), ada juga
tag yang tidak memiliki pasangan, misalnya <hr> untuk menampilkan garis horizontal. Pada
standar XHTML, suatu tag yang tidak memiliki pasangan dituliskan dengan menambahkan ”/”
(slash) di belakangnya, contohnya adalah <hr/>.
Suatu tag juga bisa memiliki atribut untuk keterangan tambahan, misalkan pada pada
tag font terdapat atribut color, face, dan size. Setiap atribut memiliki nilai tertentu,
misalnya pada contoh di atas atribut color memiliki nilai ”red”. Diktat ini tidak membahas
tentang HTML karena anda telah mendapatkannya pada kuliah Desain Web. Untuk informasi
yang lebih luas bisa dilihat di situs yang membahas tentang HTML dan teknologi yang terkait,
misalnya di http://www.w3schools.com.
Suatu file HTML adalah file plain text (file teks yang tidak memiliki format tertentu)
sehingga bisa disusun dengan menggunakan editor teks sederhana seperti Notepad,
Notepad++, atau yang lain. Untuk mempermudah perancangan suatu halaman web tersedia
juga perangkat lunak perancangan web yang bersifat WYSIWYG (What You See Is What You
Get) sehingga hasil perancangan bisa dilihat seketika, misalnya dengan menggunakan Adobe
Dreamweaver.
Dalam kaitannya dengan file yang berisi skrip, maka yang dirupakan sebagai file dalam
format HTML adalah file hasil eksekusi skrip. File yang berisi skrip sendiri tidak harus
semuanya berupa skrip, bisa jadi disisipkan kode HTML di dalamnya. Dalam hal ini yang
dieksekusi hanya skripnya, tetapi yang dikembalikan adalah kode HTML yang telah ada dan
hasil eksekusi skrip.
1.3. Client-side scripting dan server-side scripting

Halaman web yang disusun murni dari tag HTML bersifat statis, apa yang dibuat
perancangnya itulah yang diberikan ke pengguna dan tidak ada mekanisme interaksi apapun
antara keduanya. Juga HTML memiliki keterbatasan lain seperti tidak bisa mengolah hasil

input, validasi data, perhitungan matematika, animasi sederhana, dan hal lain yang bersifat
programatik.
Untuk menangani keterbatasan HTML yang disebutkan itu, dibuatlah client-side script
language, contohnya adalah JavaScript dan VBScript. Dinamakan client-side karena kode skrip
disimpan dan dieksekusi di sisi klien (browser). Kode skrip bisa disisipkan dalam suatu file
HTML. Begitu browser menjumpai kode skrip maka langsung dieksekusi dan hasilnya
ditampilkan dalam browser itu juga. Skrip di sisi klien memiliki keterbatasan, misalnya tidak
bisa melakukan akses ke database, dan tidak melakukan penulisan ke disk, atau dalam
menghasilkan suatu file dengan tipe tertentu.
Untuk keperluan yang lebih luas dari apa bisa ditangani oleh skrip di sisi klien, misalnya
melakukan akses ke basis data (database), pencarian informasi, pembentukan halaman secara
dinamis, pengolahan data dari form, digunakanlah server-side script language. Contoh
bahasanya adalah CGI, ASP, PHP, JSP, Perl, Python, ColdFusion, atau bahasa lain yang bisa
memanfaatkan protokol HTTP. Salah satu perbedaan yang tampak antara server-side
dibanding client-side adalah kemampuan untuk berkomunikasi dengan server basis data
sehingga pengguna bisa menyimpan atau mencari data dalam basis data. Skrip atau kode
program pada bahasa jenis ini tersimpan dan dieksekusi di server. Dengan server-side script,
sebuah halaman web bisa ditampilkan secara lebih dinamis dan interaktif.
Dalam kaitannya dengan mekanisme request dan response, bila yang diminta oleh klien
adalah halaman yang mengandung skrip, maka skrip akan dieksekusi lebih dulu oleh server.
Yang dikirim ke klien adalah hasil eksekusi dalam bentuk kode HTML. Kode skrip pada server
tidak akan bisa diketahui oleh klien karena klien hanya menerima hasil eksekusi.

2. PENGENALAN PHP
Salah satu bahasa pada sisi server adalah PHP. PHP adalah server-side script yang
paling populer di dunia, menurut W3Techs (http://w3techs.com) per Desember 2017 PHP
digunakan oleh 83.1% situs web di seluruh dunia. PHP memiliki kelebihan antara lain (1)
merupakan proyek open source sehingga bisa didapat dan digunakan secara gratis, (2)
banyak library / widget /extension yang dikembangkan oleh berbagai komunitas pengembang,
(3) tersedia dan bisa digunakan pada berbagai platform sistem operasi (Unix/Linux, Windows,
MacOS, dan OS/2), (4) mudah digunakan, (5) mendukung banyak sistem basis data, serta (6)
script PHP diklaim bisa dieksekusi lebih cepat.
2.1. Apakah PHP Itu?

PHP merupakan singkatan rekursif dari PHP: Hypertext Processor (awalnya adalah
akronim dari Personal Home Page). Awalnya PHP bernama PHP/FI, yang versi pertamanya
(1.0) dibuat oleh Rasmus Lerdorf pada 1995. PHP berkembang dengan pesat pada masa-
masa setelahnya dengan penambahan berbagai fasilitas dan kemampuan, sampai pada versi
terbaru saat ini yaitu versi 5.5, 5.6, dan 7 (Januari 2016).
PHP banyak digunakan dalam pembuatan aplikasi berbasis web, misalnya: Joomla
(aplikasi Content Management System), Moodle (aplikasi Learning Management System),
phpBB (aplikasi Bulletin Board), Wordpress (aplikasi blog publishing tool), squirrelmail (aplikasi
mail server), phpMyAdmin (aplikasi MySQL administration tool). Beberapa website populer
yang menggunakan PHP (menurut http://w3techs.com) adalah facebook.com, baidu.com,
wikipedia.org, twitter.com, dan wordpress.com.
Untuk membangun aplikasi berbasis PHP, diperlukan (1) web server untuk menerima
HTTP request, dan (2) interpreter PHP untuk membaca kode PHP, mengeksekusinya, dan
mengirimkan hasilnya ke pengguna. Web server yang populer untuk mengeksekusi PHP
adalah Apache. Skrip PHP juga bisa dieksekusi pada web server IIS (Internet Information
Service) pada Windows dengan menambahkan modul tertentu.
Skrip PHP disimpan dalam suatu file plain text dengan ekstensi .php atau .php3.
Skripnya bisa dituliskan bersamaan dengan tag HTML di dalam satu file yang sama, atau
berdiri sendiri sebagai suatu file yang hanya berisi kode PHP. Webserver hanya mengeksekusi
halaman yang berisi skrip, sedangkan tag HTML langsung dikembalikan ke klien.
Untuk membuat kode PHP bisa digunakan editor teks (sebaiknya yang bisa
menunjukkan nomor baris perintah) seperti Notepad++, atau menggunakan perangkat lunak
perancangan web yang mendukung penggunaan kode PHP seperti Dreamweaver,
PHPDesigner, atau SublimeText. Untuk keperluan akses basis data, PHP mendukung sejumlah

DBMS seperti dBase, IBM DB2, Informix, InterBase, mSQL, Microsoft SQL Server, MySQL,
Oracle, PostgreSQL, sqLite, dan ODBC. Banyak hal yang bisa ditangani PHP dengan
memanfaatkan library dari pihak lain, misal pada proyek PEAR (PHP Extension and Application
Repository), yang memungkinkan untuk menghasilkan file PDF atau image, membaca dan
menulis file PDF, Excel atau Word, enkripsi, kompresi/dekompresi, penanganan multimedia,
dan lainnya. Apapun DBMS yang dipilih, pasti diperlukan database server yang melayani
request untuk mengakses basis data.
Untuk kemudahan penggunaan khususnya di lingkungan Windows, beberapa produsen
perangkat lunak menyatukan webserver Apache, interpreter PHP, dan DBMS (umumnya
adalah MySQL) ke dalam satu paket. Contoh produknya adalah PHPTriad, AppServ, dan
XAMPP. Secara umum paket ini di lingkungan Windows dikenal dengan WAMP (Windows-
Apache-MySQL-PHP).
2.2. Struktur Skrip PHP

Bila dibandingkan dengan bahasa pemrograman pada umumnya, PHP adalah bahasa
yang loosely-typed, artinya tidak perlu mendeklarasikan variabel, menentukan tipe variabel,
atau memusnahkan variabel. PHP sendirilah yang secara cerdas akan menentukan tipe yang
sesuai dengan melihat data yang digunakan dan melakukan typecasting bila diperlukan. Kode
PHP bisa disisipkan di antara tag HTML, atau berdiri sendiri sebagai satu file yang hanya berisi
kode PHP. Apapun itu, browser akan mengenalinya sebagai kode HTML.
2.2.1. Delimiter
Untuk membedakan kode PHP dengan tag HTML atau kode lain, maka kode PHP diapit
oleh pembatas (delimiter), contohnya sebagai berikut:
<?php
// tuliskan kode PHP di sini
?>
Satu file PHP bisa berisi beberapa pasang delimiter yang terpisah. Cara ini bermanfaat
bila file berisi campuran kode PHP dan tag HTML. Contoh campuran antara kode PHP dan
HTML dalam satu file adalah sebagai berikut:
<html>
<head>
<title> Menampilkan tanggal</title>
</head>
<body>
<?php
$tgl = date("j m Y");
echo "Tanggal: ".$tgl;
?>
</body>
</html>

Contoh berikut adalah bila file hanya berisi kode PHP saja:
<?php
// file yang berisi kode PHP saja
echo "Tanggal: ".date("j m Y");
?>
echo adalah pernyataan untuk menampilkan teks ke browser (penjelasan lebih lengkap
ada di sub bab 2.8). Halaman yang didapat oleh user adalah:
Bila halaman yang tampil di browser dilihat kodenya oleh pengguna, maka yang didapat
adalah kode berikut:
<html>
<head>
<title>Menampilkan tanggal</title>
</head>
<body>
Tanggal: 8 08 2011
</body>
</html>
Tampak bahwa apa yang didapat oleh pengguna hanyalah kode HTML saja. Ingat, skrip PHP
hanya berlaku di server. Hasil eksekusinyalah yang diberikan ke pengguna/klien.
Tag HTML dituliskan di luar tag PHP. Bila dituliskan di dalamnya maka akan dianggap
error karena tag HTML bukanlah sintaks PHP. Tag HTML bisa dituliskan di dalam tag PHP
tetapi harus dinyatakan sebagai teks yang ditampilkan oleh pernyataan echo. Contoh berikut
menunjukkan kode yang berbeda untuk menampilkan tanggal dalam cetak tebal, ada yang
ditulis di dalam tag PHP, ada yang ditulis di luar tag PHP. Keduanya memberi hasil yang sama.
<?php
echo "<b>Tanggal: ".date("j m Y")."</b>"; // <b> sebagai teks
?>
<b>Tanggal:
<?php
echo date("j m Y");
?>

</b>
2.2.2. Komentar program
Dalam banyak hal PHP mengambil aturan dari bahasa C. Komentar bisa diberikan di
antara /* dan */ (bila terdiri dari beberapa baris) atau // atau # (bila komentarnya hanya
sebaris). Komentar tidak akan diproses oleh server. Berikut contoh penggunaannya:
<?php
// Program: entry.php
/* Entry data mahasiswa baru
Ke dalam tabel mahasiswa */
# Dibuat tanggal 1 Januari 2010
?>
2.2.3. Identifier (pengenal)
Identifier memberikan nama kepada variabel, function, dan kelas. Aturan penamaan
pengenal dalam PHP adalah:
 Karakter pertama harus huruf atau underscore ( _ ), selanjutnya bisa berupa huruf, angka,
atau underscore.
 Panjang nama bisa berapapun.
 Membedakan antara huruf besar dan kecil (case-sensitive). Perkecualian adalah untuk
nama function yang tidak membedakan huruf besar dan kecil.
 Tidak boleh menggunakan karakter-karakter tertentu, seperti karakter yang digunakan
untuk operasi matematika (misalnya +, -, /, *, <, >), karakter yang digunakan untuk
operasi logika (&, |, ^), atau menggunakan kata-kata kunci yang merupakan keyword PHP,
misalnya if, then, else, exit, dan lain-lain.
 Tidak boleh menggunakan spasi. Untuk menggantikan spasi, Anda dapat menggunakan
karakter underscore.
Aturan ini secara umum juga ditemui di bahasa pemrograman lain, kecuali sifat case-
sensitive yang hanya ada di beberapa bahasa saja.
2.3. Variabel
Variabel adalah suatu tempat di memori yang dialokasikan sebagai wadah untuk
menyimpan data yang dibutuhkan program dan nilainya dapat berubah-ubah sepanjang
jalannya program. Variabel dalam PHP selalu diawali dengan ‘$’. Karena variabel adalah
termasuk pengenal, maka penamaan variabel dalam PHP bersifat case-sensitive, misalnya
membedakan variabel $Umur dengan $umur. Tipe data suatu variabel tidak perlu
dideklarasikan secara khusus, karena akan dilakukan secara otomatis oleh PHP dengan
melihat nilai yang tersimpan di dalamnya.
Assignment dilakukan dengan menggunakan operator '=', misalnya:
<?php

$umur = 30; // nilai integer
$nama = "Joko"; // nilai string
?>
2.4. Tipe data

Setiap variabel berisi data dengan tipe tertentu. Walaupun PHP memiliki tipe data,
variabel di PHP tidak perlu didekarasikan secara khusus tipe datanya. Tipe data digunakan
untuk acuan ketika perlu melakukan konversi tipe dan menentukan apakah nilai yang
disimpan melebihi jangkauan nilai yang diperbolehkan.
Secara umum ada dua macam tipe data: skalar dan gabungan. Tipe skalar hanya bisa
menerima satu nilai, sedangkan tipe gabungan bisa menerima lebih dari satu nilai sekaligus
dalam satu variabel.
2.4.1. Tipe Data Skalar

Tipe data skalar adalah tipe data bagi variabel yang hanya bisa menyimpan satu nilai
saja. Tipe skalar yang tersedia:
 Integer: untuk nilai berupa bilangan bulat dengan rentangan nilai -2147483648 sampai
+2147483647. Selain dalam notasi desimal, nilai integer bisa dalam notasi oktal dan
heksadesimal.
 Float: untuk nilai desimal presisi tunggal atau ganda dengan rentangan nilai 1.7E-308
sampai 1.7E+308. Nilai desimal bisa dinyatakan dengan menggunakan titik desimal atau
tanda eksponensial (E).
 String: untuk nilai berupa teks. Setiap nilai string selalu diapit dengan tanda petik tunggal
atau ganda (' atau "). Suatu nilai string bisa diperlakukan sebagaimana array untuk
mengakses satu karakter di dalamnya.
 Boolean: untuk menyimpan nilai kebenaran true (1) atau false (0).
 NULL: Null adalah tipe khusus untuk menyatakan nilai kosong. Tipe ini hanya memiliki
satu nilai yaitu null.
2.4.2. Tipe Data Gabungan

Tipe data gabungan adalah tipe data bagi variabel yang secara sekaligus bisa
menyimpan lebih dari satu nilai. Tipe data gabungan yang tersedia adalah tipe array dan
object.
Array adalah penggabungan data yang memiliki tipe yang sama dan menggunakan
indeks untuk mengakses elemen-elemennya. Tidak perlu untuk menentukan ukuran array di
awal, cukup dengan menambahkan elemen baru ke dalam array yang sudah ada. Lebih lanjut,
array akan dibahas pada bab IV. Tipe object tidak dibahas dalam diktat ini.
2.5. Typecasting dan juggling

Suatu variabel bisa menyimpan data dengan tipe apapun, dan PHP memungkinkan
melakukan konversi data dalam variabel dari satu tipe ke tipe lain. Cara ini dinamakan dengan
typecasting. Typecasting dilakukan dengan menyebutkan operator berupa nama tipe baru di
depan data yang ada.
Operator casting Konversi menjadi
(array) Array
(bool) atau (boolean) Boolean
(int) atau (integer) Integer
(int64) 64-bit integer Integer 64 bit, ada mulai PHP 6
(object) Object
(real) atau (double) atau (float) Float
(string) String
Contoh:
<?php
$X = 100;
echo $X; // X sebagai integer
$A = (string)$X; echo $A; // X dikonversi menjadi string
$B = (float)$X; echo $B; // X dikonversi menjadi float
$C = (int)$B; echo $C; // B dikonversi menjadi integer
?>
Yang perlu diperhatikan adalah:
 Bila data bertipe double dikonversi menjadi integer, maka akan dilakukan pembulatan ke
bawah (tanpa melihat nilai desimalnya).
 Bila data string dikonversi menjadi integer dan hanya ada karakter non numerik (misalkan
huruf), atau karakter pertamanya bukan angka atau tanda negatif, maka akan dikonversi
menjadi 0.
 Bila data string dikonversi menjadi integer dan karakter awalnya adalah angka atau tanda
negatif, maka akan dikonversi menjadi nilai numerik yang sesuai.
Juggling adalah kemampuan PHP untuk melakukan konversi antar tipe secara otomatis.
PHP akan melihat nilai variabel itu, operator yang digunakan, lalu mengkonversikannya
menjadi tipe yang sesuai. Nilai yang dihasilkan menyesuaikan dengan aturan yang ada di
typecasting. Contoh:
<?php
$total = 100; // integer
$X = "5"; // string
$total = $total + $X; // $total = 105
// sebagai integer karena + adalah operator numerik
$total = 100; // integer

$X = "5"; // string
$total = $total . $X; // $total = 1005
// sebagai string karena . (titik) adalah operator string

$A = "10 kg"; // string
$B = 5; // integer
$C = "Berat 10 kg"; // string
echo $A+$B; // output: 15
echo $C+$B; // output: 5 karena $C dikonversi menjadi 0
echo $A+$C; // output: 10 karena 10+0
?>
Bila tidak yakin dengan tipe data yang tersimpan dalam suatu variabel, maka bisa
digunakan function gettype(), seperti pada contoh berikut ini:
<?php
$total = 100;
$X = "5";
echo gettype($total); // output: integer
echo gettype($X); // output: string
?>
Untuk mendapatkan sejumlah nilai bertipe tertentu dari nilai yang tersimpan di variabel,
bisa digunakan function strval(), intval(), dan floatval(), yang masing-masing
mendapatkan nilai string, integer, dan float. Parameternya adalah nilai atau variabel yang
akan diambil nilainya, serta basis dari nilai yang akan dikonversi (khusus untuk intval).
<?php
echo intval('42'); // output: 42 dalam basis 10
echo intval('42',8);
//input: 42 dlm basis 8, output: 34 dlm basis 10
echo intval(042);
//input: 42 dlm basis 8, output: 34 dlm basis 10
echo intval(0x1A);
//input: 1A dlm basis 16, output: 26 dlm basis 10
echo strval('42'); // output: karakter '42'
echo floatval('3.1415927'); // output: nilai 3.1415927
?>
2.6. Konstanta
Konstanta adalah nilai yang tetap selama program dijalankan dan tidak diperbolehkan
diubah. Menyatakan suatu konstanta adalah dengan menggunakan pernyataan define.
Berikut ini X sebagai konstanta akan didefinisikan bernilai 10. Pengubahan X menyebabkan
kesalahan. Perhatikan bahwa konstanta tidak perlu menggunakan $.
<?php
define("X", 10); // membuat konstanta X bernilai 10
echo (X*5); // penggunaan konstanta dalam suatu pernyataan
?>
2.7. Operator
Operator digunakan untuk memanipulasi data. Ada beberapa macam operator,
disesuaikan dengan tipe datanya.

2.7.1. Operator assignment
Operator ini digunakan untuk memasukkan nilai ke dalam suatu variabel. Seperti yang
ada pada contoh sebelumnya, operatornya adalah =. Selain bentuk standar ini, operator
assignment juga bisa dikombinasikan dengan operator aritmatika dan string.
2.7.2. Operator aritmatika

Sesuai namanya, operator ini digunakan untuk operasi matematika. Bentuknya sudah
umum, yaitu * (perkalian), / (pembagian), % (pembagian modulus), + (penjumlahan), -
(pengurangan), ++ (increment), -- (decrement). Increment adalah menjumlahkan nilai dalam
variabel dengan 1, dan decrement adalah mengurangkan nilai dalam variabel dengan 1.
Operator decrement dan increment bisa diletakkan di depan atau di belakang variabel. Bila di
depan variabel (misal: ++$X) maka variabelnya di-increment dulu kemudian nilainya
diberikan. Bila di belakang variabel (misal $X++) maka nilainya diberikan dulu kemudian
variabelnya di-increment.
<?php
$X = 100;
echo ++$X;
// X diincrement lalu ditampilkan,
// nilai yg ditampilkan: 101, nilai di X sekarang: 101
$Y = 100;
echo $X++;
// X ditampilkan lalu diincrement,
// nilai yg ditampilkan: 100, nilai di X sekarang 101
?>
2.7.3. Operator string
Hanya ada satu operator untuk string yaitu ‘.’ (titik) yang digunakan untuk
menggabungkan dua buah string (concatenate). Contoh:
<?php
$namadepan = 'Dean';
$namabelakang = 'Thomas';
$namalengkap = $namadepan . " " . $namabelakang;
echo "Nama anda: ".$namalengkap;
?>
Perhatikan, bila tanda titik ada di luar tanda petik, maka dianggap sebagai operator,
sedangkan bila di dalam dianggap sebagai bagian dari teks dan ditampilkan apa adanya.
2.7.4. Operator pembandingan (relasional)

Operator pembandingan digunakan untuk membandingkan dua buah nilai, dengan
output berupa nilai TRUE atau FALSE. Operatornya juga umum dijumpai yaitu: <, >, <=, >=,
== (kesamaan), != (ketidaksamaan), === (identik), !== (tidak identik). Operator == akan
menghasilkan nilai TRUE bila kedua nilai adalah ekuivalen (sama). Operator === akan

menghasilkan nilai TRUE bila kedua nilai adalah ekuivalen dan bertipe sama, jadi
pembandingannya lebih ketat dari operator ==. Perhatikan contoh berikut ini:
<?php
$X = '5';
$Y = 5;
if ($X == $Y)
{ echo "SAMA"; }
else
{ echo "TIDAK SAMA"; }
// ($X == $Y), output: SAMA. ($X === $Y), output: TIDAK SAMA
?>
Bila bermaksud melakukan pembandingan tetapi menuliskannya dengan satu tanda ’=’
(assignment),maka hal itu tidak dinyatakan sebagai kesalahan penulisan tetapi bisa jadi
memberikan maksud yang berbeda. Perhatikan contoh berikut ini:
<?php
$X = 5; // $X bernilai 5
$Y = 7; // $Y bernilai 7
if ($X = $Y) // assignment dalam if, $X menjadi 7.
{ echo "SAMA"; }
else
?>
Secara sepintas, nilai 5 akan dibandingkan dengan 7 sehingga jawabannya adalah TIDAK
SAMA. Tapi dalam kasus ini, yang ditampilkan adalah SAMA karena secara umum setiap nilai
yang bukan nol akan dievaluasi sebagai TRUE dan setiap nilai nol akan dievaluasi sebagai
FALSE. Isi $Y dimasukkan ke $X sehingga $X bernilai 7. Karena isi $X sekarang bernilai 7, dan
7 bukan 0, maka evaluasinya menjadi TRUE. Jadi pernyataan itu relevan dengan:
<?php
$X = 5; // $X bernilai 5
$Y = 7; // $Y bernilai 7
if (($X = $Y) != 0) // nilai $X dibandingkan dengan 0
{ echo "SAMA"; }
else
?>
2.7.5. Operator logika
Operator ini digunakan untuk membandingkan dua ekspresi, kemudian memberikan
hasil TRUE atau FALSE. Operatornya: AND atau && (operasi And), OR atau || (operasi Or),
XOR (Operasi Xor), ! (operasi Not). AND menghasilkan TRUE jika kedua ekspresinya bernilai
TRUE, selain itu menghasilkan FALSE. Operator OR menghasilkan TRUE bila salah satu
ekspresi bernilai TRUE dan menghasilkan FALSE bila keduanya FALSE. Operator XOR
menghasilkan FALSE jika kedua ekspresinya bernilai sama (TRUE-TRUE atau FALSE-FALSE),
selain itu menghasilkan TRUE.

Operator logika banyak digunakan untuk mengkombinasikan lebih dari satu operasi
pembandingan. Contoh:
<?php
$A = 10; $B = 8; $C = 8;
if (($A == $B) && ($B == $C) && ($C == $A))
{ echo 'Segitiga sama sisi';
}
else if (($A == $B) || ($B == $C) || ($C == $A))
{ echo 'Segitiga sama kaki';
}
?>
2.7.6. Operator bitwise
Operator ini digunakan untuk operasi bilangan biner (dikenakan terhadap setiap bit
dalam variabel). Macam-macam operatornya: & (AND), | (OR), ^ (XOR), ~ (NOT), << (Shift
Left), dan >> (Shift Right). Operator & akan meng-AND-kan setiap bit dalam dua variabel,
operator | akan meng-OR-kan setiap bit dalam dua variabel, operator ^ akan meng-XOR-kan
setiap bit dalam dua variabel, operator ~ akan meng-NOT-kan setiap bit dalam variabel, <<
akan menggeser setiap bit ke kiri, dan operator >> akan menggeser setiap bit ke kanan.
<?php
$X = 11; // biner: 1011
$Y = 6; // biner: 0110
echo $X & $Y; // output: 2 karena hasil operasi adalah 0010
echo $X | $Y; // output: 15 karena hasil operasi adalah 1111
echo $X ^ $Y; // output: 13 karena hasil operasi adalah 1101
echo ~$X; // output: -12
echo $X << 1; // output: 22 karena hasil operasi adalah 10110
echo $Y >> 1; // output: 3 karena hasil operasi adalah 0011
?>
2.7.7. Operator assignment tambahan
Ada beberapa bentuk tambahan operator aritmatika: +=, -=, *=, /=, %=, &= |=, ^=,
.=. Secara umum bentuknya adalah <operator>=. Artinya adalah variabel di kiri dan kanan
tanda sama dengan akan dikenai <operator> lalu hasilnya dimasukkan ke kiri tanda sama
dengan. Contoh: $X += $Y memiliki arti yang sama dengan $X = $X + $Y.
2.8. Menampilkan teks ke browser

Dua perintah untuk menampilkan suatu teks ke dalam browser adalah echo() dan
print(). Yang ditampilkan bisa berupa nilai secara langsung atau nilai dalam variabel.
Berikut contohnya:
<?php
print("<u>Pengenalan PHP</u>");
print "Penggunaan fungsi Print dan echo";
$tanggal = date("j m Y");
echo "Hari ini tanggal: ".$tanggal;

echo "Selamat"," belajar";
?>
Perbedaan echo dengan print adalah print hanya bisa menerima satu nilai teks,
sedangkan echo bisa menerima beberapa nilai yang dipisahkan tanda titik atau koma. Setiap
baris pernyataan harus diakhiri dengan tanda ; (titik koma). Perintah dalam PHP bukan case-
sensitive, sehingga tidak membedakan print dengan PriNt.
Perhatikan kode di atas, suatu nilai string (teks) diawali dan diakhiri dengan petik ganda
atau tunggal ( " atau ' ). Bila menggunakan tanda petik ganda, nama variabel yang akan
ditampilkan isinya bisa diletakkan di antara tanda petik. Bila menggunakan petik tunggal maka
variabel harus ditampilkan di luar tanda petik dan digabungkan dengan teks lain
menggunakan operator ’.’ (titik). Perhatikan contoh berikut ini untuk menampilkan isi variabel:
<?php
$RP = 13000;
echo "1 Dolar Amerika sama dengan $RP Rupiah";
echo '1 Dolar Amerika sama dengan '.$RP.' Rupiah';
echo '1 Dolar Amerika sama dengan $RP Rupiah'; // contoh yg salah
// yang ditampilkan bukan isi $RP tetapi teks ’$RP’
?>
Ke dalam echo atau print bisa disisipkan tag HTML dan escape sequence untuk
menampilkan non-printing character. Syaratnya adalah ditampilkan di antara petik ganda.
Escape sequence adalah karakter khusus untuk mengatur tampilan teks, berupa:
Sequence Deskripsi
\n Ganti baris baru (di bawah baris sekarang)
\r Kembali ke awal baris (carriage return)
\t Tab horizontal
\\ Backslash
\$ Tanda Dollar
\" Petik ganda
\' Petik tunggal
\0 sampai \777 Notasi bilangan Oktal
\x0 sampai \xFF Notasi bilangan Hexadesimal
<?php
echo "<b>Jurusan Matematika\nUniversitas Negeri Malang</b>";
echo "\tMoto:\"The Learning University\"";
?>
Penggunaan ”\"” dan ”\'” adalah untuk menampilkan karakter petik tunggal atau ganda,
karena bila tidak diberi tanda backslash maka akan dianggap sebagai pembatas teks yang
akan ditampilkan, dan mungkin menyebabkan error. Perhatikan contoh berikut ini:
<?php
// tidak error krn pembatasnya petik ganda
echo "Assalamu'alaikum";
// parse error krn pembatasnya petik tunggal
echo 'Assalamu'alaikum';

// tidak error krn ditambah backslash
echo 'Assalamu\'alaikum';
?>
Efek ”\n” dan ”\t” akan tampak bila output script adalah file teks dan dibuka dengan
teks editor, bukan pada saat ditampilkan di browser. Untuk menampilkan ganti baris di
browser,bisa digunakan tag <br> atau membentuk paragraf baru dengan <p> ... </p>.

3. LOGIKA PEMROGRAMAN
Dalam membantu menyelesaikan permasalahan, sebuah program mungkin memiliki
alternatif tindakan atau perulangan tindakan. Struktur kendali menentukan alur kode yang
dieksekusi dalam suatu aplikasi, berupa pemilihan kondisi yang sesuai dan perulangan
pernyataan tertentu.
3.1. Pemilihan kondisi

Pernyataan kondisi digunakan untuk memilih satu dari sejumlah alternatif pilihan
sebelum menuju ke langkah berikutnya. Pemilihan dilakukan dengan menguji kondisi tertentu,
yang memberikan hasil TRUE atau FALSE. Untuk setiap hasil tersebut akan ada aksi yang akan
dilakukan atau pernyataan yang harus dikerjakan.
3.1.1. if-else if-else

Pernyataan ini digunakan untuk memilih salah satu dari beberapa blok pernyataan,
tergantung dari nilai ekspresi yang diuji. Bentuk pernyataan if...else adalah sebagai
berikut:
if (kondisi_1)
{ alternatif_tindakan_1; }
[else if (kondisi_2)
{ alternatif_tindakan_2; } ]
[else if (kondisi_3)
{ alternatif_tindakan_3; } ]
...
[else
{ alternatif_tindakan_n; } ]
Bentuk tersebut adalah kerangka umumnya, bagian bertanda ‘[ ]’ adalah opsional
(boleh tidak ada bila memang tidak diperlukan). Bila dalam suatu pernyataan terdapat
beberapa kondisi dan ada satu kondisi yang bernilai true, maka tindakan/aksi yang terkait
akan dieksekusi dan mengabaikan kondisi dan tindakan lainnya dalam pernyataan itu. Berikut
ini beberapa contoh bentuk if-else:
<?php
if ($A < 0) // contoh if tanpa else
{ echo "Bilangan negatif"; }
if ($Harga >= 1000000) // contoh if - else

{ $diskon = 0.075*$Harga; }
else
{ $diskon = 0.025*$Harga; }
if ($Skor >= 85) // contoh if – else if (if berjenjang)

{ $Nilai = "A"; }
else if ($Skor >= 70)

{ $Nilai = "B"; }
else if ($Skor >= 55)
{ $Nilai = "C"; }
else
{ $Nilai = "D"; }
?>
Untuk kasus tertentu, kita bisa gunakan if yang hanya ditulis sebaris (ternary operator),
dengan sintaks:
$var = if (kondisi ? tindakan_true : tindakan_false);
Sebagai contoh, kasus penentuan diskon pada contoh di atas bisa ditulis sebagai berikut:
$diskon = if ($Harga > 1000000 ? 0.075*$Harga : 0.025*$Harga);
Bila kondisinya bernilai benar, maka hasil perkalian $Harga dengan 0,075 akan dimasukkan
ke variabel $diskon, dan bila salah maka hasil perkalian $Harga dengan 0,025 dimasukkan
ke variabel $diskon.
3.1.1. switch-case
Pernyataan ini juga digunakan untuk mengeksekusi satu dari beberapa blok pernyataan,
tergantung dari nilai ekspresi yang diuji. Pernyataan switch-case dapat dikatakan sebagai
penyederhanaan bentuk dari if-else jika terdapat banyak alternatif kondisi. Bentuk umum
pernyataan switch-case adalah sebagai berikut:
switch (variabel)
{ case nilai_1:
{ tindakan_1; break; }
case nilai_2:
{ tindakan_2; break; }
...
case nilai_n:
{ tindakan_n; break; }
default:
{ tindakan_default; }
}
Contoh:
<?php
switch ($status)
{ case "A":
{ $Bonus = 0.1 * $Gaji;
break; }
case "B":
{ $Bonus = 0.15 * $Gaji;
break; }
case "C":
{ $Bonus = 0.2 * $Gaji;
break; }
default:
{ $Bonus = 0;

break; }
}
?>
Nilai yang diperiksa dalam case harus ordinal (bulat), bisa berupa bilangan atau
karakter. Satu hal yang perlu diperhatikan adalah adanya “break” pada setiap tindakan. Bila
tidak ada, maka seleksi akan dilanjutkan terus untuk case berikutnya (tidak otomatis
berhenti). default adalah pernyataan yang akan menangkap semua nilai yang tidak
termasuk ke dalam salah satu case yang disebutkan sebelumnya.
Bila ada lebih dari satu kasus untuk aksi yang sama, maka penulisannya bisa digabung
dalam bentuk seperti contoh berikut:
<?php
$nilai="E";
switch ($nilai)
{ case "A":
case "B":
case "C":
{ $status="Lulus";
break; }
case "D":
case "E":
{ $status="Tidak Lulus";
break; }
}
echo $status;
?>
Script tersebut adalah untuk menentukan status kelulusan. Bila nilai huruf adalah A, B,
C maka statusnya Lulus dan bila nilai hurufnya adalah D, E maka statusnya Tidak Lulus. Case
untuk A dan B tidak diisi aksi apapun dan tidak memiliki break, sehingga bila terpenuhi
(nilainya A atau B) maka akan berlanjut masuk ke dalam case untuk C.
Bentuk lain adalah dengan memanfaatkan operator logika. Cara ini bisa tetapi menurut
beberapa sumber, kurang disarankan:
$nilai="E";
switch ($nilai)
{ case (($nilai == "A") || ($nilai=="B") || ($nilai=="C")):
{ $status="Lulus";
break; }
case (($nilai == "D") || ($nilai == "E")):
{ $status="Tidak Lulus";
break; }
}
echo $status;
Kondisi case dituliskan dengan menggunakan operator logika, sedangkan yang ada di
switch adalah tetap nama variabel atau nilai true.

3.2. Perulangan (iterasi)
Perulangan digunakan untuk mengulang suatu blok pernyataan selama kondisi yang
disebutkan masih terpenuhi, atau sampai terpenuhinya suatu kondisi tertentu. Ada tiga
pernyataan perulangan yang dimiliki oleh PHP, yaitu while, do while, dan for.
3.2.1. while
Pernyataan ini digunakan untuk mengulang-ulang suatu blok pernyataan selama kondisi
yang disebutkan pada klausa while masih terpenuhi (selama bernilai TRUE). Pengulangan
eksekusi pernyataan ini bisa dipastikan banyaknya, bisa pula tidak (kasus perulangan tak
pasti). Bentuk umum pernyataan while adalah sebagai berikut:
while (kondisi)
{ pernyataan; }
Contoh berikut menunjukkan penggunaan while untuk melakukan perhitungan faktorial.
<?php
$n = 5;
$f = 1;
$b = 1;
while ($b <= $n)
{ $f *= $b; // $f = $f * $b
$b++;
}
echo "$n! = $f";
?>
Pada kasus tersebut kita bisa ketahui bahwa akan terjadi perulangan sebanyak $n kali
karena counter $b diawali dari 1 dan memiliki selisih (kenaikan nilai) sebanyak 1. While
sebenarnya lebih sesuai digunakan untuk kasus perulangan yang tidak bisa dipastikan berapa
kali berulang. Contoh kasusnya adalah untuk mencari FPB dengan algoritma Euclid.
<?php
$m = 9;
$n = 7;
while ($n != 0)
{ $r = $m % $n;
$m = $n;
$n = $r;
}
echo "FPB = $m";
?>
Kondisi yang disebutkan di klausa while bisa berupa satu kondisi atau gabungan
beberapa kondisi yang dihubungkan dengan operator relasional. Pastikan bahwa di dalam
perulangan itu kondisi yang disebutkan di while bisa menjadi false sehingga perulangan
berhenti. Perubahan menuju berhentinya kondisi itu dicantumkan di blok perintah yang
diulang (pada contoh di atas ada proses increment sehingga $b yang awalnya 1 pada
akhirnya akan melampaui $n sehingga kondisinya menjadi false dan perulangan berhenti).

3.2.2. do..while
Seperti halnya while, pernyataan do-while juga digunakan untuk mengulang suatu
blok pernyataan selama suatu kondisi yang disebutkan masih terpenuhi, tetapi penyeleksian
kondisi dilakukan pada akhir perulangan. Dengan demikian paling tidak pernyataan dieksekusi
satu kali, berbeda dengan while di atas yang mungkin tidak pernah mengeksekusi
pernyataannya. Bentuk umum perintahnya sebagai berikut:
do
{ pernyataan; }
while (kondisi);
Kasus faktorial bisa diselesaikan dengan menggunakan do-while sebagai berikut:
<?php
$n = 5;
$f = 1;
$b = 1;
do
{ $f *= $b; // $f = $f * $b
$b++;
}
while ($b <= $n)
echo "$n! = $f";
?>
Yang penting diperhatikan dalam menggunakan do-while adalah memastikan bahwa
kasus itu memiliki paling tidak satu kali iterasi. Kasus FPB sebenarnya kurang tepat bila
menggunakan do-while karena bila di awal $n bernilai 0 maka akan terjadi error karena ada
pembagian dengan 0, kecuali bila dipastikan bahwa nilai awal $n bukan 0. Hal ini tidak
menjadi masalah bila menggunakan while karena kondisinya langsung menjadi false dan tidak
ada eksekusi perintah apapun.
3.2.3. for
Pada dua pernyataan sebelumnya, perulangan dilakukan selama kondisi tertentu masih
terpenuhi. Bergantung kasusnya, mungkin tidak diketahui berapa kali perulangan dilakukan.
Untuk perulangan pasti, lebih sesuai bila digunakan pernyataan for, dengan sintaks:
for (nilai_awal_counter; kondisi_perulangan; update_counter)
{ pernyataan;
}
Pada pernyataan for, ditentukan kondisi awal perulangan, kondisi agar perulangan
terus berlangsung, serta bagaimana pernyataan untuk menuju berhentinya perulangan.
Perulangan dikendalikan oleh counter. Nilai awal counter diperiksa sekali saja pada awal
iterasi. Pada setiap iterasi, dilihat apakah kondisi perulangan tetap terpenuhi. Eksekusi
pernyataan dilakukan selama kondisi perulangan terpenuhi. Penggantian nilai counter
dilakukan pada akhir iterasi, demikian seterusnya sampai perulangan berakhir (kondisi

perulangan menjadi false). Misalkan diinginkan melakukan perulangan mulai dari 1 sampai 10
dengan kenaikan sebanyak 1, maka perintahnya adalah:
<?php
echo "<ul>";
for ($a = 1; $a <= 10; $a++)
{ echo "<li>$a";
}
echo "</ul>";
?>
Kondisi awal perulangan, kondisi perulangan, dan update counter bisa saja tidak
dituliskan. Bila ini yang dilakukan, pengendalian perulangan dilakukan di dalam blok
pernyataan, seperti contoh berikut:
<?php
$km = 1;
for (;;)
{ // jika $km > 5 maka keluar dari loop.
if ($km > 5) break;
print("$km kilometer = $km*0.62140 mil <br>");
$km++;
}
?>
Pada bahasa lain (misal Pascal dan Basic), salah satu argumen dalam for nilai akhir
yang menjadi batasan variabel perulangan. Perulangan berhenti bila nilai variabel perulangan
melebihi batasan itu. Hal yang berbeda ada di PHP dan Java: argumennya adalah kondisi
perulangan, sehingga bisa diisi lebih dari 1 kondisi. Contohnya adalah iterasi untuk mencari
pembagi yang nilainya lebih dari 1 dari suatu bilangan:
<?php
$b = 49;
for ($n = 2; (($n <= $bil) && ($bil % $n != 0)); $n++)
{ echo "$n bukan faktor dari $bil<br>";
}
echo "$n adalah faktor $bil<br>";
?>
Perulangan akan terus berlangsung selama kedua kondisi tersebut terpenuhi: $n belum
melebihi $bil dan $n tidak habis membagi $bil. Bila salah satu tidak terpenuhi, maka
perulangan berhenti.
3.3. Perulangan rangkap

Ada kasus yang memerlukan perulangan dalam perulangan. Contoh yang sederhana
adalah untuk menampilkan sederetan karakter membentuk segitiga, sebagai berikut dengan
menggunakan for:
<?php
for ($i = 1; $i <= 5; $i++) // perulangan luar

{ $teks = '';
for ($j = $i; $j <= 5; $j++) // perulangan dalam
{ $teks = $teks + '*';
}
echo "$teks<br />"
};
?>
Contoh tersebut menunjukkan ada 2 perulangan. Untuk setiap nilai $i di perulangan
luar, akan dilakukan eksekusi perulangan dalam secara lengkap. Output dari kode tersebut:
*****
****
***
**
*
Dalam kasus ini ada 5+4+3+2+1 iterasi. Kasus lain memiliki banyak iterasi yang
berbeda, misalnya penjumlahan matriks berordo n, maka ada nxn iterasi. Bentuk semacam ini
yang sering menjadikan salah paham, karena dianggap sebagai perulangan yang terpisah;
karena dianggap perulangan luar dikerjakan sampai habis, lalu perulangan dalam yang
dieksekusi berikutnya, atau dianggap perulangan dalam hanya dieksekusi sekali apapun
kondisi yang tercantum.
3.4. break-continue
Keduanya bukan perintah pengulangan, tetapi untuk menghentikan perulangan atau
melanjutkan perulangan. Bila ditemukan break, maka perulangan dihentikan dan sisa
perintah di bawah break diabaikan. Sedangkan bila ditemukan continue maka sisa perintah
di bawah continue diabaikan tetapi perulangan dilanjutkan lagi untuk nilai selanjutnya.
<?php
for ($i = 1; $i <= 10; $i++)
{ if ($i == 7)
{ break; }
if ($i == 5)
{ continue; }
echo $i;
}
?>
Pada contoh tersebut, perulangan dilakukan mulai dari $i bernilai 1 dan selama $i
kurang dari atau sama dengan 10. Untuk setiap perulangan, program menampilkan nilai $i.
Yang ditampilkan oleh script itu adalah deretan bilangan 1, 2, 3, 4, 6. Pada saat $i bernilai 5
echo tidak dikerjakan karena melompat ke perulangan berikutnya ($i menjadi bernilai 6), dan
pada saat $i bernilai 7 perulangan diakhiri.
3.5. Praktikum

Untuk kegiatan praktikum digunakan paket XAMPP webserver. Semua script diletakkan
di dalam folder \xampp\htdocs (sebagai home directory), disarankan membuat folder agar
terpisah dari file lainnya. Pastikan webserver dalam keadaan running (pengaktifannya
menyesuaikan produk apa yang digunakan).
Gambar 3.1. XAMPP control panel.
A. Penggunaan if
Kasus pertama adalah melakukan seleksi kelulusan. Setiap mahasiswa mengikuti 3 ujian
sehingga ada 3 skor ujian. Bila ada ujian yang tidak diikuti, maka skor ujiannya adalah 0 dan
pasti mendapat nilai E (tanpa mempertimbangkan skor ujian lainnya). Bila skornya lengkap,
maka dihitung rata-rata skornya dan ditentukan kelulusan dan nilai akhirnya. Ada
kemungkinan dia lulus dengan mendapat nilai A (rata-rata 85 sampai 100), B (rata-rata 70
sampai 84,9), C (rata-rata 50 sampai 69,9) dan kemungkinan tidak lulus dengan mendapat
nilai D (rata-rata di bawah 50).
1. Tuliskan kode berikut dalam editor PHP anda, lalu simpan filenya di dalam folder yang
anda buat, misal dengan nama skorlulus.php.
Praktikum 3.1: Membuat kode untuk penentuan nilai (file: skorlulus.php)

<?php
$skor1 = 70;
$skor2 = 55;
$skor3 = 0;
$ratarata = ($skor1 + $skor2 + $skor3) / 3;
if (($skor1 == 0) || ($skor2 == 0) || ($skor3 == 0))
{ echo "Anda tidak lulus, nilai: E, skor: $ratarata ";
}
else
{ if (($ratarata >= 85) && ($ratarata <= 100))
{ echo "Anda lulus, nilai: A, skor: $ratarata";
}
else if (($ratarata >= 70) && ($ratarata < 85))

{ echo "Anda lulus, nilai: B, skor: $ratarata";
}
else if (($ratarata >= 50) && ($ratarata < 70))
{ echo "Anda lulus, nilai: C, skor: $ratarata";
}
else
{ echo "Anda tidak lulus, nilai: D, skor: $ratarata";
}
}
?>
2. Misal tadi foldernya bernama “praktikum” maka bukalah browser dan panggillah dengan
mengetikkan URL di address bar browser: http://localhost/pronet/skorlulus.php
(sesuaikan dengan nama folder dan file yang anda buat). Jangan pernah memanggil file
script PHP dengan double click pada nama file. Itu akan menampilkan file di broswer, tapi
tidak pernah melakukan eksekusi script.
Gambar 3.2. Pemanggilan script PHP di browser
3. Amati apakah program sudah benar ataukah ada pesan kesalahan yang ditampilkan. Bila
ditemukan kesalahan penulisan, maka jenis kesalahannya ditampilkan dan nomor baris
pernyataan yang salah juga ditunjukkan. Umumnya kesalahan yang sering terjadi adalah
tanda petik atau tanda kurung yang tidak seimbang/tidak lengkap, kurang tanda titik
koma di akhir pernyataan, penulisan nama yang tidak konsisten, ada tambahan spasi di
nama variabel, dan nama variabel tidak diawali $. Kadang nomor baris yang ditunjukkan
bukanlah sumber kesalahannya sebenarnya, bisa jadi pernyataan/baris sebelumnya yang
salah sehingga berdampak pada pernyataan selanjutnya. Kadang juga kesalahan yang
sama menghasilkan pesan yang berbeda, tergantung pernyataan berikutnya yang ada.
Perbaikilah kesalahannya pada baris yang disebutkan, dan panggil kembali filenya dengan
cara seperti langkah 2. Lakukan ini sampai tidak ada kesalahan, dan program memberikan
hasil yang benar.
4. Coba ubah nilai variabel $skor1 atau $skor2 atau $skor3 secara langsung dalam script

dan jalankan ulang programnya. Apakah hasilnya sudah benar secara logika?
B. Penggunaan for
Kasus kedua adalah menampilkan semua faktor dari suatu bilangan bulat positif dan
jumlah semua faktor tersebut. Faktor positif adalah semua bilangan bulat positif yang habis
membagi bilangan bulat positif lainnya. Untuk mengetahui apakah suatu bilangan habis
membagi bilangan lainnya maka gunakan fungsi sisa bagi (modulus), yang dalam PHP
menggunakan operator ‘%’. Bila sisa baginya 0 maka itulah faktornya. Di sini kita harus
memeriksa apakah setiap bilangan dari 1 sampai N (bilangan yang akan diketahui faktornya)
habis membagi N atau tidak. Penelusuran ini menggunakan perulangan for, dengan nilai awal
variabel perulangan adalah 1, kondisi perulangan adalah selama variabelnya <= N, dan
perubahan nilai variabelnya adalah +1.
1. Buat file baru, lalu tuliskan kode berikut:
Praktikum 3.2: Membuat kode untuk menampilkan faktor (file: faktor.php)

<?php
$n = 36;
$total = 0;
for ($f = 1; $f <= $n; $f++)
{ if (($n % $f) == 0)
{ echo "$f ";
$total += $
}
}
echo "Jumlah semua faktor: $total";
?>
Simpan dengan nama faktor.php di folder yang anda gunakan sebagai home directory
pada praktikum sebelumnya.
2. Buka browser anda, lalu panggillah file faktor.php (sesuaikan dengan dimana file
disimpan). Bila anda benar, program menampilkan faktor positif dari 36 yaitu 1 2 3 4 6 9
12 18 36, dan jumlahnya yaitu 91
3. Ubahlah nilai variabel $n dengan bilangan lain untuk melihat hasil yang berbeda.
Catatan
Berikut ini akan ditunjukkan perbedaan tampilan pesan kesalahan karena masalah yang
sama. Misal kode pada praktikum A tentang if diberi nomor baris sebagai berikut:
1 <?php
2 $skor1 = 70;
3 $skor2 = 55;
4 $skor3 = 0;
5 $ratarata = ($skor1 + $skor2 + $skor3) / 3;
6 if (($skor1 == 0) || ($skor2 == 0) || ($skor3 == 0))
7 { echo "Anda tidak lulus, nilai: E, skor: $ratarata ";
8 }

9 else
10 { $ratarata = ($skor1 + $skor2 + $skor3) / 3;
11 if (($ratarata >= 85) && ($ratarata <= 100))
12 { echo "Anda lulus, nilai: A, skor: $ratarata";
13 }
14 else if (($ratarata >= 70) && ($ratarata < 85))
15 { echo "Anda lulus, nilai: B, skor: $ratarata";
16 }
17 else if (($ratarata >= 50) && ($ratarata < 70))
18 { echo "Anda lulus, nilai: C, skor: $ratarata";
19 }
20 else
21 { echo "Anda tidak lulus, nilai: D, skor: $ratarata";
22 }
23 }
24 ?>
Berikut contoh beberapa pesan kesalahan yang ditampilkan untuk jenis kesalahan yang sama:
 Titik koma pada baris 2 dihilangkan, maka server menampilkan pesan kesalahan “Parse
error: syntax error, unexpected T_VARIABLE in D:\xampp\htdocs\pronet\skorlulus.php on
line 3”. PHP menganggap kesalahan adalah karena adanya variabel baru pada baris 3
($skor2) tanpa mengakhiri baris sebelumnya dengan ;
 Titik koma pada akhir baris 10 dihilangkan, maka server menampilkan pesan kesalahan
“Parse error: syntax error, unexpected T_IF in D:\xampp\htdocs\pronet\skorlulus.php on
line 11”. PHP menganggap kesalahan adalah karena adanya if pada baris 11 padahal
sebelumnya tidak ada ;.
 Titik koma pada baris 18 dihilangkan, maka server menampilkan pesan kesalahan “Parse
error: syntax error, unexpected '}', expecting ',' or ';' in D:\xampp\htdocs\pronet
\skorlulus.php on line 19”. Jadi PHP menganggap kesalahan adalah karena adanya “}”
pada pada baris 19, dan meminta adanya tanda koma atau titik koma sebelum “}”.
Berusahalah memahami pesan yang ditampilkan, dan berusalah mencari apa
perbaikannya. Lama kelamaan anda akan terbiasa dengan pesan kesalahan yang ditampilkan
dan bagaimana perbaikannya.

4. FORM
Semua contoh di bab 3 belum menggunakan input, nilai awal masih ditentukan secara
manual. Program dibuat untuk mengolah nilai input menjadi output. Pada aplikasi berbasis
web, input dilakukan dengan menggunakan form dan komponen. Informasi yang diisikan oleh
client selanjutnya dikirimkan ke server dan diolah lebih lanjut. Selain untuk input, form juga
bisa menjadi sarana untuk output suatu informasi.
4.1. Form
Form adalah wadah dari sejumlah komponen untuk interaksi antara klien dengan
aplikasi. Pada aplikasi berbasis web, form terletak dalam suatu halaman web. Melalui
komponen yang ada di form, klien bisa mengisikan informasi (dalam berbagai bentuk isian),
yang selanjutnya akan diberikan ke server untuk diolah. Bila anda melakukan registrasi
webmail, blog, atau lainnya dan anda diminta mengisikan informasi, saat itu anda
memanfaatkan form dan komponen. Konsep form di halaman web kurang lebih seperti form
yang ada pada bahasa pemrograman bergaya visual seperti Delphi atau Visual Basic.
Suatu halaman web bisa berisi lebih dari satu form, tetapi hanya satu form yang bisa
dikirimkan ke server pada satu saat. Sintaks HTML untuk mendeklarasikan form dalam suatu
halaman web adalah:
<form name="namaform" method="POST|GET" action="namafile">
name adalah nama form, method adalah cara pengiriman isian form ke aplikasi yang
memproses, dan action adalah nama file PHP yang memproses data dari pengguna. Bila
dipilih method POST maka data isian disertakan dalam header HTTP (header berisi permintaan
suatu halaman tertentu di server oleh pengguna), sedangkan GET akan menyertakan data
dalam URL (bisa dilihat dalam address bar di browser). POST memiliki kelebihan dari GET,
selain menyembunyikan isian pengguna juga bisa menangani data dalam jumlah yang lebih
banyak. Pengolahan hasil input (oleh yang disebutkan dalam action) bisa dilakukan dalam
file yang terpisah atau dalam file yang sama dengan pendefinisian komponen dan formnya.
Pengiriman data dilakukan pada saat user menekan tombol Submit. Browser akan
mengirimkan semua isian yang ada di setiap komponen ke file yang disebutkan di atribut
action dengan metode GET atau POST (sesuai yang didefinisikan di method). Di file yang
dituju, semua isian yang dikirimkan akan diambil lalu diolah lebih lanjut. Dengan
menggunakan Submit, browser memuat hasil eksekusi file yang tersebut di action, dan
menimpa tampilan sebelumnya. Kejadian menimpa ini dinamakan dengan reload. Ada cara
untuk menghindari proses reload, antara lain dengan menggunakan Ajax. Kedua cara dengan
menggunakan reload dan tanpa reload, akan dibahas pada bagian ini.

4.2. Komponen
Berikut ini adalah tabel yang berisi sintaks komponen yang ada. Beberapa komponen di
antaranya menggunakan tag yang sama yaitu input, dengan pembeda adalah nilai atribut
type dan atribut lainnya yang spesifik untuk suatu komponen. Komponen Checkbox, Select
dengan pilihan ganda, hidden dan file akan dibahas pada bab lainnya,
Nama
Sintaks
komponen
Text <input type="text" name="namakomponen" id="identitas"
value="nilaiawal" size="lebar" maxlength="karaktermax" />
Password <input type="password " name="namakomponen"
id="identitas" value="nilaiawal" size="lebar"
maxlength="karaktermax" />
Radio <input type="radio" name="namakomponen" id="identitas"
value="nilaitersimpan" />
Checkbox <input type="checkbox" name="namakomponen" id="identitas"
value="nilaitersimpan" checked />
Button, <input type="button" name="namakomponen" id="identitas"
value="pesan" />
Submit dan
Reset <input type="submit" name="namakomponen" id="identitas"
value="pesan" />
<input type="reset" name="namakomponen" id="identitas"

value="pesan" />
Button, <button type="button" name="namakomponen" id="identitas"
value="pesan" />
Submit dan
Reset (versi <button type="submit" name="namakomponen" id="identitas"
value="pesan" formaction="namafile"
HTML5)
formmethod="get|post"/>
<button type="reset" name="namakomponen" id="identitas"

value="pesan" />
Listbox dan <select name="namakomponen" id="identitas"
size="tinggibaris">
Combobox
<option value="nilai" selected>Pilihan pertama</option>
<option value="nilai" selected>Pilihan kedua</option>
...
<option value="nilai" selected>Pilihan ke-n</option>
</select>
Textarea <textarea name="namakomponen" id="identitas"
rows="banyakbaris" cols="banyakkolom"
wrap="off|virtual|physical" />
Hidden <input type="hidden" name="namakomponen" id="identitas"
value="nilaitersimpan" />
File <input type="file" name="namakomponen" id="identitas"/>
Setiap komponen memiliki nama, yang ditunjukkan melalui atribut name. Atribut id
digunakan untuk memberi identitas komponen, fungsinya sebenarnya sama dengan name.
Atribut name digunakan untuk pengolahan dengan PHP atau bahasa script lainnya, sedangkan

id digunakan untuk pengenal di CSS dan Javascript/jQuery.
4.2.1. Text
Text adalah komponen untuk memasukkan input berupa suatu teks alfanumerik,
misalnya untuk isian nama, umur, dan alamat. Teks yang diisikan hanya sebaris. Gambar 4.1.
menunjukkan contoh halaman yang menggunakan komponen text untuk entry data. Anda
bisa menggunakan Dreamweaver untuk menghasilkan kode HTMLnya, atau menggunakan
editor teks untuk memasukkan kodenya.
Gambar 4.1. Tampilan komponen TEXT
Untuk lebih jelasnya, lihat contoh kode HTML berikut ini untuk Gambar 4.1. Tabel
digunakan untuk meluruskan posisi komponen (bukan merupakan keharusan). Kalau anda
menggunakan aplikasi desain web seperti Dreamweaver, kodenya mungkin sedikit berbeda.
Praktikum 4.1: Membuat kode untuk pengisian data (file: formisi.php)

<html>
<head>
<title>Pengisian data</title>
</head>
<body>
<form method="GET" action="prosesdata.php" name="isian" id="isian">
<table border="0" width="100%">
<tr>
<td width="25%">NIM:</td>
<td width="75%"><input type="text" name="nim" id="nim"
size="20"></td>
</tr>
<tr>
<td>Nama:</td>
<td><input type="text" name="nama" id="nama" size="50"></td>
</tr>
<tr>
<td>Alamat:</td>
<td><input type="text" name="alamat" id="alamat" size="60"></td>
</tr>
</table>
<p><input type="submit" value="Submit" name="Submit" id="Submit" >
<input type="reset" value="Reset" name="Reset" id="Reset" ></p>

</form>
</body>
</html>
Perhatikan bahwa di deklarasi form ada atribut action="prosesdata.php". Ini
berarti pada saat tombol Submit ditekan, browser akan mengirimkan semua isian ke file yang
bernama prosesdata.php. Pada komponen submit terdapat atribut value, yang digunakan
untuk menampilkan teks di atas tombol.
Berikut ini contoh file yang menerima dan mengolah isian (misal diberi nama
prosesdata.php sesuai dengan yang didefinisikan di klausa action):
Praktikum 4.2: Membuat kode untuk menampilkan data isian (file:

prosesdata.php)
<html>
<head>
<title>Pengolahan data</title>
</head>
<body>
<?php
$NIM = $_GET['nim'];
$nama = $_GET['nama'];
$alamat = $_GET['alamat'];
echo "Data yang kami terima adalah:<br/>";
echo "NIM: $NIM <br/>";
echo "Nama: $nama <br/>";
echo "Alamat: $alamat <br/>";
?>
</body>
</html>
Perhatikan bahwa walaupun ekstensinya .php, tag HTML bisa dituliskan apa adanya di luar
delimiter <?php... ?>.
Yang penting diperhatikan adalah bagaimana cara mendapatkan isi komponen. Gunakan
$_GET atau $_POST, tergantung dari method yang ditentukan di deklarasi form sebelumnya.
Yang mengikuti $_GET atau $_POST adalah nama komponen yang ada di dalam form.
Penamaan komponen bebas, asalkan konsisten antara yang digunakan di form dengan yang
diacu di skrip PHP, dan tidak ada komponen yang bernama sama. Berikut contoh tampilan bila
data telah diterima:

Gambar 4.2. Hasil eksekusi prosesdata.php
Perhatikan isi address bar di browser:

http://localhost/pronet/prosesdata.php?nim=123&nama=Joko&alamat=Tlogomas
&Submit=Submit&Reset=Reset. Tampak data yang diisikan di komponen sebelumnya
dikirimkan melalui URL (karena menggunakan method GET). Isi URL selain nama file yang
disebutkan di atribut action, adalah pasangan nama komponen dan isinya (misal “nama=Joko”
berarti komponen “nama” berisi nilai “Joko”). Antar komponen dipisahkan oleh tanda “&”, dan
antara nama file dan komponen dipisahkan oleh “?”.
Kelemahan cara penggunaan method GET semua data yang diisikan akan tampak di
URL. Ini tidak disarankan untuk data penting seperti password. Selain itu PHP hanya bisa
memproses 1024 karakter yang disertakan di URL, sehingga mungkin ada nilai yang hilang.
Kelebihannya kita bisa memanggil suatu halaman dari halaman lain dengan menyertakan data
di URL tanpa menggunakan form.
Untuk menggunakan metode POST, maka tentukan atribut method pada tag <form>
dengan "POST", dan pada file yang menerima input sesuaikan gunakan $_POST alih-alih
$_GET. Bila mengirimkan request ke server setelah pengisian data, maka URL tidak berisi data
apapun karena semua isian dari klien dikirimkan sebagai bagian HTTP Header dari klien ke
server. Tampilan browser-nya sama, kecuali bagian address bar saja yang berbeda. PHP
membedakan pemrosesan data yang dikirim dengan GET atau POST.
4.2.2. Radio dan Select

Untuk data yang berbentuk teks lebih sesuai menggunakan komponen text. Bagaimana
dengan data “jenis kelamin” yang hanya berupa pilihan L atau P? Atau “nama bulan” yang
sudah tetap Januari sampai Desember? Untuk itu digunakan komponen pemilihan yaitu radio
dan select. Jangan gunakan isian, untuk hal yang bisa dipilih.
Untuk isian yang hanya bisa dipilih salah satunya (seperti agama atau jenis kelamin),
bisa digunakan komponen radio karena sifat radio yang hanya bisa dipilih salah satu itemnya
saja. Misalkan formisi.php ditambahkan komponen radio maka tampilannya menjadi seperti
berikut:

Gambar 4.3. Tampilan komponen RADIO
Kodenya seharusnya menjadi berikut ini (tambahkan yang tercetak tebal):
Praktikum 4.3: Menambahkan komponen radio (file: formisi.php)

... (kode lainnya)
<td><input type="text" name="alamat" id="alamat" size="60"></td>
</tr>
<tr>
<td>Jenis kelamin:</td>
<td><input type="radio" name="jk" id="jk1" value="L">Laki-laki
<input type="radio" name="jk" id="jk2" value="P">Perempuan</td>
</tr>
</table>
<p><input type="submit" value="Submit" name="Submit"></p>
... (kode lainnya)
Perhatikan bahwa walaupun ada 2 pilihan, nama komponennya harus sama (dalam hal
ini bernama jk). Yang membedakan adalah value masing-masing pilihan, yaitu value “L”
untuk laki-laki dan “P” untuk perempuan. Nama yang sama digunakan untuk
mengelompokkan komponen. Untuk maksud yang berbeda berilah nama komponen yang
berbeda (misal ada kelompok Jenis Kelamin, Agama, Status dalam form yang sama). Atribut
id harus memiliki nilai yang berbeda karena 1 identitas hanya untuk 1 komponen.
Pada prosesdata.php, cara mengambil nilai yang dikirimkan juga sama yaitu dengan
$_GET. Nilai yang diterima adalah sesuai dengan yang dispesifikasikan pada atribut value di
tag input.
Praktikum 4.4: Menambahkan kode untuk mengambil isi komponen radio (file:
prosesdata.php)
<?php
... // kode lainnya
$alamat = $_GET['alamat'];
$jenkel = $_GET['jk'];
... // kode lainnya
echo "Jenis kelamin: $jenkel <br/>";
?>
Bila pilihannya banyak, bisa kita gunakan komponen Select (drop-down list) untuk
menyembunyikan item pilihan dan hanya menampilkannya ketika diakses. Sebagai contoh

penggunaan komponen select adalah untuk isian tanggal lahir yang terdiri dari 3 hal: tanggal,
bulan, dan tahun. Tanggal dan tahun bisa menggunakan komponen text, bulan lahir
menggunakan komponen select karena nama bulan telah terdefinisi dari Januari sampai
Desember (tidak harus select sebenarnya, dengan radio juga bisa). Kode HTML untuk
komponen select pada file formisi.html adalah:
Praktikum 4.5: Menambahkan komponen select (file: formisi.php)

... (kode lainnya)
<tr>
<td>Tempat/tanggal lahir:</td>
<td><input type="text" name="tempat" id="tempat" size="20">,
<input type="text" name="tgl" id="tgl" size="8">
<select name="bln" id="bln" size="1">
<option value="1">Januari</option>
<option value="2">Pebruari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">Nopember</option>
<option value="12">Desember</option>
</select>
<input type="text" name="thn" id="thn" size="10">
</td>
</tr>
... (kode lainnya)
Gambar 4.4 Tampilan komponen SELECT berbentuk combo box
Nama komponen untuk pengisian data nama bulan adalah “bln”. Di deklarasinya ada
properti size yang digunakan untuk menentukan jenis atau sifat komponen. Bila size
bernilai 1, maka komponen akan bersifat sebagai combobox, sedangkan nilai lebih besar dari
itu akan menghasilkan komponen yang bersifat sebagai listbox. Isian yang ditampilkan
ditentukan melalui elemen <option>. Yang penting adalah harus ada properti value yang

berisi nilai apa yang akan dihasilkan bila pilihan dilakukan.
Misal pernyataan <select> diubah menjadi berikut:
maka elemen select menampilkan 3 baris option pada setiap saat karena size diatur bernilai 3.
Gambar 4.5 Tampilan komponen SELECT berbentuk list box
Sebenarnya elemen select bisa menerima 1 atau lebih pilihan. Bila elemen (sebagai
combo atau listbox) hanya diatur menerima 1 pilihan, cara pengambilannya sama dengan
elemen lain yaitu dimasukkan ke dalam satu variabel tunggal. Kode dari file prosesdata.php
bisa disesuaikan menjadi sebagai berikut:
Praktikum 4.6: Menambahkan kode untuk mengambil isi komponen select (file:
prosesdata.php)
<?php
... // kode lainnya
$tempat = $_GET['tempat'];
$tanggal = $_GET['tgl'];
$tahun = $_GET['thn'];
$bulan = $_GET['bln'];
... // kode lainnya
echo "Tempat/tanggal lahir: $tempat, $tanggal-$bulan-$tahun <br>";
?>
4.2.3. Textarea
Komponen text hanya bisa menerima sebaris teks. Untuk keperluan isian teks yang lebih
dari sebaris, misalkan mengisi komentar, perlu komponen pengisian lain yaitu Textarea.
Contoh kode penggunaan textarea dalam form:
Praktikum 4.9: Menambahkan komponen text area (file: formisi.php)

... (kode lainnya)
<tr>
<td>Komentar:</td>
<td><textarea name="komentar" id="komentar" rows="10" cols="50" >
</textarea> </td>
</tr>
... (kode lainnya)

Gambar 4.6 Tampilan komponen TEXTAREA
Atributnya adalah cols dan rows yang digunakan untuk mengatur ukuran lebar (dalam
karakter) dan tinggi baris. Secara default, fontnya berjenis fixed (biasanya adalah Courier
New). Modifikasi yang dilakukan untuk formproses.php adalah berikut ini (tercetak tebal):
Praktikum 4.10: Menambahkan kode untuk mengambil isi komponen text area
(file: prosesdata.php)
<?php
... // kode lainnya
$komentar = $_GET['komentar'];
... // kode lainnya
echo "Komentar: $komentar <br />";
?>
Misal diisikan sejumlah isian dan tiga baris teks di dalam textarea sebagai berikut:
Halo
Apa
Kabar
Setelah submit, lihatlah value yang dikirimkan form melalui address bar:
http://localhost/pronet/prosesdata.php?nim=1234&nama=Joko&alamat=Malan
g&jk=L&tempat=Malang&tgl=12&bln=3&thn=1997&hobi%5B%5D=Membaca&hobi%5B%
5D=Nonton+TV&komentar=Halo%0D%0AApa%0D%0AKabar&Submit=Submit
Tampak elemen dengan nama “komentar” memiliki nilai Halo%0D%0AApa%0D%0AKabar.
Nilai “%OD” adalah karakter ASCII yang menyatakan carriage return (disingkat CR), yaitu
mengarahkan kursor ke awal baris. Nilai “%OA” adalah line feed (disingkat LF, ada yang
menyebut sebagai new line yang disingkat dengan NL), yaitu mengarahkan kursor ke baris
baru. Pasangan CRLF digunakan untuk menyatakan pergantian baris teks dan memulai
penulisan dari karakter pertama di baris baru (ini terminologi yang dibuat di awal
diciptakannya komputer dan ketika mesin ketik manual masih digunakan).
Perhatikan output dari prosesdata.php, terlihat bahwa PHP tidak langsung bisa
mengenali adanya karakter CRLF sehingga teks ditampilkan dalam 1 baris. Untuk

menampilkan teks dalam beberapa baris seperti saat diisikan, salah satu caranya adalah
dengan menggunakan function nl2br() yang mengkonversi karakter NL menjadi elemen
HTML <br/> (break). Kode di prosesdata.php bisa diubah menjadi:
<?php
... // kode lainnya
echo "Komentar: <br/>". nl2br($komentar);
?>
4.2.4. Pengiriman komponen yang tidak diisi
Penyediaan komponen di dalam form berarti mengharapkan adanya isian di dalamnya.
Apa yang terjadi bila tidak diisi lalu dilakukan submit? Cobalah lakukan. Bila diamati, maka
komponen text dan textarea tetap mengirimkan data kosong, komponen select mengirimkan
value opsi pertama, komponen radio dan checkbox tidak mengirimkan value. Data kosong
tetap bisa diambil oleh $_GET atau $_POST, tetapi data yang tidak ada pasti tidak akan bisa
diambil. Misal isian jenis kelamin tidak dipilih, PHP akan mengeluarkan pesan semacam ini:
“Notice: Undefined index: jk in D:\xampp\htdocs\pronet\prosesdata.php on line 10” pada
pernyataan $_GET['jk'];
Untuk menghindari peringatan dan kesalahan lain yang mengikutinya, maka bisa
digunakan pernyataan isset(), yang memeriksa keberadaan suatu variabel, misalnya:
<?php
... // kode lainnya
if (isset($_GET['jk'])) // bila valuenya ada: true
{ $jenkel = $_GET['jk'];
}
else
{ die("<script>alert('Isikan data dengan lengkap!');
window.history.back();</script>");
}
... // kode lainnya
?>
Pada contoh kode, bila elemen “jk” diisi maka isinya diambil dan dimasukkan ke
$jenkel, sedangkan bila tidak diisi maka ditampilkan alert untuk menampilkan pesan dan
setelah tombol OK diklik, tampilan window dialihkan ke halaman sebelumnya (dalam hal ini
adalah halaman pengisian data). Pernyataan die() adalah untuk menghentikan proses
eksekusi script sambil menampilkan pesan. Dalam hal ini pesan yang ditampilkan adalah alert,
yang merupakan bawaan dari Javascript.
Verifikasi kelengkapan komponen yang diisi sebaiknya dilakukan sebelum submit
dilakukan. Ini bisa menggunakan client-side script seperti JavaScript atau jQuery karena akan
meringankan beban server. Bila menggunakan PHP maka semua data harus dikirimkan ke
server untuk diperiksa kebenarannya, barulah hasilnya dikembalikan ke klien. Hal ini memakan
waktu terutama pada saat lalu lintas Internet sedang padat. Bila menggunakan skrip di klien

maka data yang dikirim ke server sudah pasti benar. Tersedia library berbasis jQuery untuk
keperluan verifikasi, anda bisa mencarinya dari berbagai sumber di web.
4.3. Menggabungkan dua file

Pengisian dan pemrosesan data di atas memerlukan dua file karena file kedua (berisi
skrip PHP) akan dieksekusi setelah data masuk ke server. Kita bisa meringkasnya menjadi satu
file saja karena salah satu kelebihan PHP adalah isian form bisa diproses pada halaman yang
sama. Ini bukanlah keharusan, anda bisa pilih mana yang lebih mudah.
Karena akan menggabungkan dua file, perlu diperhatikan kapan pengisian data
dilakukan dan kapan pemrosesan data dilakukan. Pemrosesan data dilakukan hanya bila
tombol Submit ditekan; pada saat submit semua value komponen yang ada di form
dikirimkan. Jadi pertama kali diperiksa apakah value komponen Submit bisa diambil telah
dengan GET atau POST (gunakan isset() untuk hal ini).
Perubahan yang perlu dilakukan pada atribut action di tag <form>. Action tidak
diarahkan ke file lain, tetapi ke dirinya sendiri. Untuk menunjukkan diri sendiri, bisa digunakan
variabel $PHP_SELF atau $_SERVER['PHP_SELF'] yang mencatat nama dan lokasi file.
Kenapa ada dua cara? $PHP_SELF adalah variabel global yang bisa diakses dari sembarang
halaman. Ada server yang membatasi penggunaan variabel global, sehingga harus dinyatakan
dengan cara kedua. Sesuaikan apa yang anda gunakan dengan pengaturan server anda.
Berikut ini contoh kode yang merupakan gabungan file formisi.php dan
prosesdata.php pada pembahasan sebelumnya (sebagian kode tidak ditampakkan):
<?php
if (isset($_GET['Submit'])) // bila Submit sudah dipilih
{ // tampilkan kode untuk proses data yang di-submit
?>
<html>
<head>
<title>Pemrosesan data</title>
</head>
<body>
<?
$NIM = $_GET['nim'];
... // kode lain, tidak dituliskan
?>
</body>
</html>
<?php
}
else // bila submit belum dipilih
{ // tampilkan form pengisian data
?>
<html>
<head>

</head>
<body>
<form method="GET" action="<?php echo $_SERVER['PHP_SELF'] ?>"
name="isian" id="isian">
<p><input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Reset"></p>
</form>
</body>
</html>
<?
}
?>
Pada awal file, dilakukan pengecekan apakah button Submit sudah ditekan atau belum
(dengan isset($_GET['Submit'])). Bila button ditekan maka value “Submit” yang
dikirimkan (sesuai dengan yang didefinisikan di form), bila tidak ditekan maka belum ada nilai
yang dikirimkan. Pada saat tidak ada nilai yang dikirimkan maka kode untuk pengisian yang
ditampilkan, sedang bila berisi nilai maka kode untuk pemrosesan yang ditampilkan.
Penggabungan ini memerlukan ketelitian dalam penulisan skrip atau kode HTML. Untuk
tampilan, sebaiknya dirancang dulu melalui editor HTML, lalu setelah benar barulah
gabungkan kodenya dengan skrip PHP. Penggunaan kode juga tidak selalu seperti pada
contoh, tentu variasi lain.

5. ARRAY
Pada bab II telah disebutkan bahwa secara umum tipe data terbagi menjadi tipe data
skalar (variabelnya hanya bisa menyimpan satu nilai) dan tipe data gabungan (variabelnya
bisa menyimpan lebih dari satu nilai dalam satu waktu). Ada dua tipe dalam tipe gabungan
yaitu Array dan Object, tetapi yang akan dibahas kali ini adalah array saja. Konsep tentang
array sama dengan yang ada di bahasa pemrograman pada umumnya, yaitu bahwa variabel
berjenis array bisa menyimpan banyak nilai sekaligus dan masing-masing nilai terletak pada
elemen dengan nomor indeks tertentu.
Dalam PHP, ada dua macam array: enumerated array dan associative array.
Keduanya dibedakan dari bentuk indeks elemennya. Kelebihan array di PHP bila dibandingkan
dengan bahasa lain adalah tidak perlu mendeklarasikan ukuran array, dan array bisa
menampung data dengan tipe string dan numerik sekaligus (tidak hanya satu tipe seperti
array pada umumnya).
5.1. Key dan value

Seperti yang disebutkan, setiap nilai menempati elemen dengan indeks tertentu. Indeks
ini digunakan sebagai pengenal setiap elemen yang tersimpan. Setiap elemen array terdiri dari
dua bagian: key dan value. Key adalah pengenal (sebagai indeks) dan value adalah nilai
yang tersimpan di elemen array. Enumerated array memiliki key berbentuk bilangan, dan
associative array memiliki key asosiatif (associative). Key yang numerik hanya sekedar
menunjukkan posisi elemen array dan tidak ada kaitannya dengan data (contohnya adalah
array yang umum dikenal di mana indeksnya berupa nilai numerik integer). Key yang asosiatif
biasanya digunakan untuk menunjukkan hubungan antara pengenal dan nilai yang disimpan.
Indeksnya bisa berupa suatu teks atau karakter tertentu.
5.2. Deklarasi array

Ada banyak cara deklarasi array dalam PHP, baik untuk yang indeksnya numerik atau
asosiatif. Berikut ini contoh pendeklarasian dan pengisian nilainya dalam beberapa cara:
<?php
// contoh pertama: menyebutkan nomor indeksnya
$makanan[0] = "Nasi Pecel";
$makanan[1] = "Tahu Campur";
$makanan[2] = "Soto Ayam";
$makanan[3] = "Gado-gado";
// contoh kedua: tanpa menyebutkan nomor indeksnya (otomatis)

$snack[] = "Kacang";
$snack[] = "Emping";
$snack[] = "Kripik";

// contoh ketiga: menggunakan konstruktor array tanpa nomor indeks
$minuman = array("Es Teh", "Es Jeruk", "Es Cendol", "Es Degan" );
// contoh keempat: menggunakan konstruktor array dengan nomor indeks

$softdrink = array(0 => "Cocacola", 1 => "Fanta", 3 => "Sprite");
?>
Penjelasan:
 Contoh pertama adalah mendeklarasikan variabel array dan menentukan isinya dengan
menyebutkan nomor indeks elemen secara eksplisit.
 Contoh kedua adalah langsung menentukan isi suatu array tanpa menyebutkan nomor
elemen. Penomoran dilakukan secara otomatis oleh sistem PHP. Dengan demikian
“Kacang” akan menempati elemen ke 0, ”Emping” di elemen ke 1, dan seterusnya.
 Contoh ketiga adalah mendeklarasikan suatu variabel bertipe sekaligus menentukan isinya
dengan konstruktor array(). Dengan demikian secara otomatis ”Es teh” akan menempati
elemen nomor 0, ”Es Jeruk” menempati elemen nomor 1, dan seterusnya.
 Contoh keempat adalah dengan menyebutkan nomor indeksnya dalam konstruktor array.
Sebenarnya cara keempat ini sama dengan cara pertama. Sebagai pembeda/pemisah
antara key dan value adalah simbol ”=>”.
Untuk key asosiatif, pada dasarnya sama dengan contoh key yang numeris. Perhatikan
contoh berikut:
<?php
// contoh pertama: array dg key berupa konstanta
$harga[kacang] = 1000;
$harga[emping] = 3000;
$harga[kripik] = 1500;
// contoh kedua: array dg key berupa teks/string

$ibukota["Jatim"] = "Surabaya";
$ibukota["Jabar"] = "Bandung";
$ibukota["Sulsel"] = "Makassar";
// contoh ketiga: dg konstruktor, key berupa teks/string

$kota = array("ML" => "Malang", "MN" => "Madiun", "JR" => "Jember");
?>
Penjelasan:
 Contoh pertama adalah key asosiatif berbentuk suatu konstanta, yang ditulis tanpa
menggunakan tanda petik (bukan sebagai string)
 Contoh kedua mirip dengan cara pertama, hanya saja key-nya berbentuk suatu teks.
 Contoh ketiga adalah dengan menggunakan konstruktor array() dan menyebutkan nama
key di depan nama value.
Key dari array asosiatif harus unik, masing-masing key mengacu ke satu nilai tertentu,

dan hubungan antara key dan value dinyatakan dengan simbol ’=>’.
Bagaimana bila ingin menambah elemen baru? Langsung saja lakukan assignment
seperti contoh berikut ini (masih mengacu ke kode sebelumnya):
<?php
$minuman[5] = "Soda gembira";
$makanan[4] = "Rujak manis";
$snack[4] = "Pop corn";
$harga[soto] = 6000;
$kota["BL"] = "Blitar";
?>
Yang membedakan dengan array di bahasa pemrograman lainnya, penambahan elemen
bisa saja tidak memperhatikan nomor indeks elemen terakhir, yaitu dengan memberikan
nomor yang ”meloncat” atau bisa juga tanpa menyebutkan nomor indeksnya. Contohnya
sebagai berikut:
$minuman[10] = "Air putih";
$minuman[] = "Teh manis";
”Air putih” akan menempati elemen dengan indeks nomor 10 (indeks nomor 6 sampai 9 tidak
ada di array), sedangkan ”Teh manis” akan menempati elemen setelah elemen terakhir
(menjadi elemen dengan nomor indeks 11). Banyaknya elemen di $minuman hanya 7 elemen
(pada indeks 0,1,2,3,4,5,10).
Untuk mengacu elemen tertentu, harus menyebutkan indeksnya, misalkan pada
assignment di atas atau untuk menampilkan isi elemen, sebagai berikut:
<?php
$minuman[3] = "Juice Mangga";
echo "Menu saat ini: $makanan[1]<br>";
echo "Harga kacang: $harga[kacang]<br>";
echo "Ibukota Jawa Timur: $ibukota["Jatim"]<br>";
?>
Untuk array berdimensi dua dan seterusnya (multidimensi) digunakan cara yang serupa,
seperti contoh berikut:
<?php
// contoh pertama: key dengan nilai numerik
$aNilai[0][0] = 90; $aNilai[0][1] = 83; $aNilai[0][2] = 78;
$aNilai[1][0] = 83; $aNilai[1][1] = 76; $aNilai[1][2] = 71;
echo 'Nilai anda: '.$aNilai[1][1];
// contoh kedua: associative key berupa string

$propinsi=array("ibukota"=>array("Jatim"=>"Surabaya",
"Bali"=>"Denpasar"),
"gubernur"=>array("Jatim"=>"Sukarwo", "Bali"=>"Mangku Pastika"));
echo "Gubernur Jatim: ".$propinsi["gubernur"]["Jatim"];
// contoh ketiga: associative key berupa numerik dan konstanta

$buku=array(
array(judul=>"Algoritma", pengarang=>"Rinaldi Munir",
penerbit=>"Informatika"),
array(judul=>"Kalkulus", pengarang=>"Purcell",
penerbit=>"Erlangga"));
echo "Buku: ".$buku[0][judul];
?>
Penjelasan:
 Contoh pertama merupakan contoh yang juga ada di bahasa pemrograman lain,
pengaksesan elemen dilakukan dengan menyebutkan nomor elemennya yang masing-
masing diapit tanda kurung siku.
 Pada contoh kedua, nama baris pertama adalah ”ibukota” dengan kolom bernama ”Jatim”
dan ”Bali”. Baris kedua bernama “gubernur” dengan dengan kolom bernama ”Jatim” dan
”Bali”. Entry data array dilakukan dengan menggunakan tanda =>, dengan menyebutkan
nama elemen dan nilainya. Posisi data dalam array $propinsi adalah:
”Jatim” ”Bali”
”ibukota” ”Surabaya” ”Denpasar”
”gubernur” ”Sukarwo” ”Mangku Pastika”
 Contoh ketiga adalah contoh array multidimensi yang tidak menyebutkan nama atau nomor
indeks baris. Bila demikian, secara default indeks baris adalah bilangan mulai dari 0. Posisi
data dalam array $propinsi adalah:
judul pengarang penerbit
0 ”Algoritma” ”Rinaldi Munir” ”Informatika”
1 ”Kalkulus” ”Purcell” ”Erlangga”
5.3. Penelusuran array

Penelusuran ke elemen array bisa dilakukan dalam beberapa cara. Cara pertama yang
paling sederhana adalah dengan menyebutkan indeksnya, tetapi ini khusus untuk array
enumerated. Tentu saja harus diketahui banyaknya elemen dalam array, dengan
menyebutkannya secara langsung, melalui fungsi sizeof() atau melalui fungsi count().
Sebagai contoh untuk menampilkan elemen array dalam bentuk list dengan menggunakan
sizeof():
<ul>
<?php
for ($j = 0; $j < sizeof($makanan); $j++)
{ echo "<li>".$makanan[$j]."</li>"
}
?>
</ul>
Cara kedua adalah mengacu setiap elemen array dengan foreach yang tidak perlu
mempertimbangkan nomor atau nama indeks. Cara ini bisa digunakan untuk array
enumerated dan asosiatif. Bentuk umum sintaksnya:

foreach (array as variabel)
{ pernyataan;
}
Artinya adalah “ambil setiap elemen dari variabel array, letakkan dalam suatu variabel, lalu
lakukan pernyataan untuk setiap nilai variabel tersebut". Pencetakan nama makanan dalam
bentuk list seperti pada contoh sebelumnya bisa dituliskan dengan cara berikut:
<ul>
<?php // contoh untuk array enumerated
foreach ($makanan as $mkn) // tiap elemen $makanan dicopy ke $mkn
{ echo "<li>".$mkn."</li>";
}
?>
</ul>
<ol>
<?php // contoh untuk array asosiatif
foreach ($ibukota as $kota)
{ echo "<li>".$kota."</li>";
}
?>
</ol>
Perhatikan potongan kode berikut untuk mendefinisikan isi array $makanan.
$makanan[0] = "Nasi Pecel";
$makanan[1] = "Tahu Campur";
$makanan[2] = "Soto Ayam";
$makanan[3] = "Gado-gado";
$makanan[10] = "Rujak cingur";
Hanya ada 5 elemen di array $makanan, elemen ke 4 sampai 9 tidak ada. Pernyataan for
yang menghendaki keterurutan indeks elemen tidak bisa digunakan karena nomor indeks 4
tidak dikenali di array $makanan. Gunakan foreach untuk keadaan seperti ini.
Cara ketiga adalah khusus untuk array asosiatif, yaitu menggunakan variabel yang
dicantumkan dalam foreach, dalam bentuk pasangan key dan value (berarti harus digunakan
dua variabel untuk menampung kedua hal itu). Bentuk umum sintaksnya:
foreach (array as key=>value)
{ pernyataan;
}
Berikut contoh penggunaan untuk array asosiatif satu dimensi, dengan mengambil
contoh array $ibukota yang didefinisikan sebelumnya. Setiap elemen array $ibukota terdiri
dari key (sebagai indeks) dan value yang tersimpan dalam elemen array.
<?php
foreach($ibukota as $prop=>$kota)
{ echo "Propinsi: $prop, Nama ibukota: $kota<br>";
}
?>

Variabel $prop berisi nama indeks array, dan variabel $kota berisi nilai yang tersimpan di
elemen array.
Cara keempat adalah dengan menggunakan function each() atau pasangan function
current() dan next(), tetapi ini khusus untuk array asosiatif. Keduanya menggunakan
while, perulangannya akan dilakukan selama masih ada elemen yang dibaca. Berikut ini
contoh untuk menampilkan daftar propinsi dan ibukotanya, dalam kedua cara:
<?php
// cara pertama. 'key' dan 'value' utk merujuk elemen array
while ($kota = each($ibukota))
{ echo "Propinsi: $kota['key'], Nama ibukota: $kota['value'] <br>";
}
// variasi: nama key dan value dimasukkan variabel dg list()

reset();
while (list($prop, $kota) = each($ibukota))
{ echo "Propinsi: $prop, Nama ibukota: $kota <br>";
}
// cara kedua, hanya mengambil value

while($kota = current($ibukota))
{ echo("$kota <br />");
next($ibukota);
}
?>
each() akan mencatat posisi elemen saat itu. Bila akan mengulangi menelusuri array yang
sama, gunakan reset() untuk mengembalikan pembacaan kembali ke elemen pertama.
Untuk array dua dimensi, cara yang digunakan juga sama, dengan melihat bentuk
arraynya. Berikut contoh-contohnya:
<?php
// enumerated array, dengan for
for ($i=0; $i<sizeof($aNilai); $i++)
{ for ($j=0; $j<sizeof($aNilai[$i]); $j++)
{ printf("%3d",$aNilai[$i][$j]);
}
print "<br>";
}
// enumerated array, dengan foreach

foreach ($aNilai as $brs)
{ foreach ($brs as $klm)
{ printf ("%3d", $klm);
}
print "<br>";
}
// associative array, dengan foreach:

foreach ($buku as $db)
{ foreach($db as $key=>$value)

{ echo "$key: $value<br>";
}
}
?>
5.4. Operator array

Array juga memiliki sejumlah operator, dengan pengertian yang sama dengan pada
variabel skalar. Berikut ini penjelasannya, $a dan $b adalah array.
Operator Nama Penggunaan Hasil
+ Union $a + $b Mengembalikan array yang merupakan
gabungan array $a dan $b
== Kesamaan $a == $b Mengembalikan TRUE bila kedua array
memiliki elemen yang sama
=== Identik $a === $b Mengembalikan TRUE bila kedua array
memiliki elemen yang sama dalam urutan
yang sama
!= Ketidaksamaan $a != $b Mengembalikan TRUE bila kedua array tidak
<> $a <> $b sama
!== Bukan identik $a !== $b Mengembalikan TRUE bila kedua array tidak
identik
5.5. Function pada array

PHP menyediakan sejumlah function yang bisa digunakan untuk manipulasi array.
Beberapa di antaranya adalah yang disebutkan pada tabel berikut ini. Secara lengkap, bisa
dilihat di www.php.net atau situs lain yang menyediakan dokumentasi library php.
Nama function Keterangan
explode() Memecah suatu string menjadi array menurut separator
tertentu (output: array yang tiap elemennya adalah substring
dari string asal)
implode() Menggabungkan elemen array menjadi suatu string (output:
string yang merupakan gabungan dari elemen array)
array_unshift() Menambah elemen baru ke awal array. Hanya untuk array
berindeks numerik.
array_push() Menambah elemen baru ke akhir array. Hanya untuk array
berindeks numerik.
array_shift() Menghapus elemen pertama array (output: arrayelemen
pertama array). Hanya untuk array berindeks numerik.
array_pop() Menghapus elemen terakhir array (output: elemen terakhir
array). Hanya untuk array berindeks numerik.
unset() Menghapus isi array
array_merge() Menggabungkan sejumlah array (output: array yang
merupakan gabungan array lain)
array_slice() Mendapatkan sejumlah elemen array mulai offset tertentu
(output: bagian array mulai posisi yang ditetapkan)
array_splice() Menghapus sejumlah elemen array mulai offset tertentu
(output: sejumlah elemen array mulai posisi yang ditetapkan,
array asal elemennya berkurang)
array_intersect() Mendapatkan elemen yang bernilai sama pada sejumlah array
(output: array yang berisi elemen yang sama)
array_intersect_assoc() Mendapatkan elemen yang bernilai sama pada sejumlah
associative array (output: array yang berisi elemen yang

sama)
array_diff() Mendapatkan elemen array pertama yang tidak ada di array
yang lain (output: array yang berisi elemen yang dicari)
array_diff_assoc() Mendapatkan elemen associative array pertama yang tidak
ada di associative array yang lain (output: array yang berisi
elemen yang dicari)
array_unique() Menghilangkan elemen array yang nilainya sama (output:
array yang isinya telah unik)
sort() Mengurutkan isi array secara ascending, tanpa
mempertahankan korespondensi key-value
asort() Mengurutkan isi array asosiatif secara ascending, dengan
rsort() Mengurutkan isi array secara descending, tanpa
arsort() Mengurutkan isi array secara descending menurut nilai value-
nya, dengan mempertahankan korespondensi key-value
ksort() Mengurutkan isi array secara ascending menurut nilai key-nya,
dengan mempertahankan korespondensi key-value
krsort() Mengurutkan isi array secara descending menurut nilai key-
nya, dengan mempertahankan korespondensi key-value
shuffle() Mengacak urutan elemen array
array_reverse() Membalik urutan elemen array menurut nilai elemen atau key-
nya (output: array yang urutannya telah dibalik)
is_array() Menguji apakah suatu variabel merupakan array atau bukan
(output: TRUE bila array atau FALSE bila bukan)
in_array() Menguji apakah suatu nilai ada dalam array (output: TRUE
bila ada atau FALSE bila tidak ada)
array_key_exists() Menguji apakah suatu key ada dalam associative array
(output: TRUE bila ada atau FALSE bila tidak ada)
array_search() Mencari suatu nilai dalam associative array (output: nama key
bila ada atau FALSE bila tidak ada)
array_keys() Mendapatkan nama key setiap elemen dalam associative array
(output: array yang berisi nama key setiap elemen)
array_values() Mendapatkan nilai setiap elemen dalam associative array
(output: array yang berisi nilai tiap elemen)
key() Mendapatkan nama key pada posisi elemen associative array
saat itu (output: nilai key array pada posisi array saat itu)
current() Mendapatkan nilai elemen pada posisi elemen associative
array saat itu (output: nilai elemen array pada posisi array
saat itu)
each() Mendapatkan pasangan key dan value pada posisi elemen
associative array saat itu (output: array yang berisi pasangan
key dan value)
reset() Mengawali penelusuran array dari elemen pertama
(memindahkan pointer ke elemen pertama)
end() Memindahkan pointer ke elemen terakhir
next() Memindahkan pointer ke elemen berikutnya
prev() Memindahkan pointer ke elemen sebelumnya
pos() Mendapatkan posisi pointer saat itu
array_count_values() Menghitung banyaknya nilai elemen array (output: array yang
berisi nilai elemen array dan frekuensinya masing-masing)
array_sum() Menjumlahkan elemen array yang bernilai numerik (output:
jumlah semua nilai numerik dalam array)
array_chunk() Memecah array satu dimensi menjadi array dua dimensi,
dengan banyak kolom tertentu (output: array dua dimensi

hasil pecahan array asal)
Berikut ini beberapa contoh penggunaannya (silahkan dicoba sendiri!):
<?php
// menambah data baru
array_push($makanan,"Sop", "Rujak Manis", "Pangsit Mie");
// menggabungkan array
$gabung=array_merge($makanan, $minuman);
// menghapus data array

$hapus = array_shift($snack); echo "Yang dihapus: $hapus<br/>";
echo "Isi array sekarang:<br/>";
foreach($snack as $s)
{ echo "$s<br/>";
}
// mengurutkan array
sort($gabung);
foreach($gabung as $menu)
{ echo "$menu<br>";
}
$kota = array("satu" => "Malang", "dua" => "Madiun", "tiga" =>

"Jember", "empat" => "Blitar");
ksort($kota); // mengurutkan berdasar key-nya
foreach($kota as $key => $value)

{ echo "$key : $value<br/>";
}
// mengacak urutan array

shuffle($snack);
// mencari apakah “Kacang telor” ada di array $snack

echo in_array("Kacang telor", $snack);
?>
Dua function yang sering digunakan adalah explode() dan implode(). Fungsi
pertama digunakan untuk membentuk array dari suatu string, dengan syarat ada delimiter
(pemisah) antara kata-kata yang akan dijadikan elemen array. Perhatikan contoh berikut:
<?php
$str = "Pepaya, mangga, pisang, jambu";
$buah = explode(" ", $str);
?>
Parameter pertama explode() adalah 1 karakter yang ada di string sebagai pemisah antar
elemen, dan parameter kedua adalah string yang akan dipecah elemennya (karakter pemisah
bisa apapun, tidak harus tanda koma). Dengan demikian array $buah berisi 4 elemen:
Pepaya, mangga, pisang, jambu, sesuai urutan yang ada di string.

Fungsi implode() adalah kebalikan dari explode(), untuk membentuk string dari
array. Lihat contoh berikut:
<?php
$arr = array('Hello','World!','Beautiful','Day!');
$str = implode(" ", $arr);
?>
Ada 4 elemen di $arr, dengan menggunakan implode() semua elemen digabungkan dalam
1 string dengan pemisah tanda spasi. Parameter pertama implode() adalah karakter yang
disisipkan sebagai pemisah elemen yang digabungkan. Karakternya bebas, tidak harus spasi.
5.5. Menampilkan isi array

Untuk menampilkan isi array, tidak bisa digunakan echo. Pengamatan isi variabel array
secara lengkap bisa dilakukan dengan menggunakan print_r() atau var_dump(). Berikut
contohnya:
<?php
$ibukota["Jatim"] = "Surabaya";
$ibukota["Jabar"] = "Bandung";
$ibukota["Sulsel"] = "Makassar";
echo "Dengan echo: ". $ibukota."<br/>"; // ditampilkan dengan echo

echo "Dengan var_dump: ";
var_dump($ibukota);
echo "<br/>";
echo "Dengan print_r: ";
print_r($ibukota);
?>
Output yang didapatkan:
Dengan echo: Array
Dengan var_dump: array(3) { ["Jatim"]=> string(8) "Surabaya"
["Jabar"]=> string(7) "Bandung" ["Sulsel"]=> string(8) "Makassar" }
Dengan print_r: Array ( [Jatim] => Surabaya [Jabar] => Bandung
[Sulsel] => Makassar )
var_dump() menunjukkan struktur variabel, tipe data, dan nilai setiap elemennya, sedangkan
print_r() hanya menunjukkan struktur variabel array dan nilai setiap elemen. echo tidak
bisa digunakan untuk mencetak isi array (yang ditampilkan hanya “Array”).
5.6. Komponen HTML yang memanfaatkan array
Ada komponen yang dibahas di sini karena sifatnya bisa menerima banyak isian
sekaligus, yang harus ditangani dengan array.
5.6.1. Checkbox
Untuk data yang tersedia pilihannya tetapi tidak ada batasan pemilihan (misalkan isian
hobi dimana seseorang bisa memiliki lebih dari satu hobi atau tidak samasekali), bisa

menggunakan komponen checkbox. Konsekuensinya, data nantinya harus disimpan dalam
array karena ada lebih dari 1 data. Kita bisa tambahkan komponen checkbox ke dalam file
formisi.htm, di atas komponen textarea. Kodenya menjadi sebagai berikut:
Praktikum 5.1: Menambahkan komponen checkbox (file: formisi.php)

... (kode lainnya)
<tr>
<td>Hobi:</td>
<td><input type="checkbox" name="hobi[]" value="Membaca">Membaca<br
/>
<input type="checkbox" name="hobi[]" id="hobi1" value="Nonton TV">
Nonton TV<br />
<input type="checkbox" name="hobi[]" id="hobi2" value="Nonton
film">Nonton film<br />
<input type="checkbox" name="hobi[]" id="hobi3" value="Main
musik">Main musik<br />
<input type="checkbox" name="hobi[]" id="hobi4" value="Jalan-
jalan">Jalan-jalan<br />
<input type="checkbox" name="hobi[]" id="hobi5" value="Olah raga">
Olah raga<br />
<input type="checkbox" name="hobi[]" id="hobi6" value="Seni">Seni
<br />
</td>
</tr>
... (kode lainnya)
Gambar 5.1 Tampilan komponen Checkbox
Nama komponennya adalah “hobi”. Perhatikan bahwa karena nanti komponen hobi bisa
terisi dengan beberapa pilihan maka tambahkan tanda ‘[]’ di belakang namanya. Kalau tidak
ditambahkan tanda ‘[]’ maka yang terbaca hanya opsi yang terakhir kali diisikan. Sama halnya
dengan radio, atribut id juga harus memiliki nilai yang berbeda antar komponennya.
Modifikasi yang dilakukan untuk prosesdata.php adalah sebagai berikut (yang tercetak tebal):
Praktikum 5.2: Menambahkan kode untuk mengambil isi komponen checkbox

(file: prosesdata.php)
<?php

... // kode lainnya
$aHobi = $_GET['hobi'];
... // kode lainnya
echo "Tempat/tanggal lahir: $tempat, $tanggal-$bulan-$tahun <br>";
echo "Hobi:<br>";
foreach($aHobi as $hobi)
{ echo "* $hobi<br />";
}
?>
Isi komponen hobi dimasukkan ke dalam $aHobi yang berupa array karena user bisa
memasukkan beberapa pilihan sekaligus. Untuk menampilkan isi array kita gunakan
pernyataan foreach atau pernyataan lainnya yang mendukung.
Yang perlu diperhatikan adalah isi array $aHobi menyesuaikan pilihan yang ditentukan.
Misal memilih "Main Musik", "Jalan-jalan", dan "Seni" maka isi array $aHobi adalah {"Main
Musik", "Jalan-jalan", "Seni"}, dimulai dari indeks nomor 0. Urutan pemilihan tidak
berpengaruh terhadap isi array. Misal memilih "Seni" sebelum "Nonton film" maka posisi
"Nonton film" tetap akan mendahului "Seni", karena definisi komponen untuk “Nonton film”
mendahului definisi komponen untuk “Seni”.
5.6.2. Multiple select

Komponen select (sebagai listbox) bisa diatur untuk menerima lebih dari 1 pilihan
sekaligus. Misal dibuat isian tentang pertanyaan konsentrasi kuliah favorit sebagai berikut:
Praktikum 5.3: Menambahkan komponen listbox dengan pilihan multiple (file:

formisi.php)
... (kode lainnya)
<tr>
<td>Konsentrasi favorit:</td>
<td>
<select name="konsen[]" id="konsen" size="3" multiple>
<option value="Analisis">Analisis</option>
<option value="Aljabar">Aljabar</option>
<option value="Statistik">Statistik</option>
<option value="Terapan">Terapan</option>
<option value="Geometri">Geometri</option>
<option value="Komputasi">Komputasi</option>\
<select>
</td>
</tr>
... (kode lainnya)

Gambar 5.2 Tampilan listbox
Untuk menyatakan bisa menerima lebih dari 1 pilihan, maka ada atribut multiple pada
elemen <select>. Seperti halnya dengan checkbox, nama komponen juga harus diakhiri oleh
‘[]’. Pemilihan dilakukan dengan menekan tombol Ctrl dan click mouse.
Variabel yang menerima isian dari komponen select juga berupa array. Contoh untuk
sekedar menampilkan item yang dipilih pengguna:
Praktikum 5.4: Menambahkan kode untuk mengambil isi komponen select (file:
prosesdata.php)
<?php
... // kode lainnya
$aKonsen = $_GET['konsen'];
... // kode lainnya
echo "Konsentrasi favorit:<br>";
foreach($aKonsen as $konsen)
{ echo "* $konsen<br />";
}
?>
Isi komponen bisa diatur isinya dengan memanfaatkan script PHP, dengan
memanfaatkan array asosiatif, misalnya menentukan nama bulan:
... (kode lainnya)
<tr>
<td>Tempat/tanggal lahir:</td>
<td><input type="text" name="tempat" id="tempat" size="20">,
<input type="text" name="tgl" id="tgl" size="8">
<?php
$bulan = array(1 => "Januari", 2 => "Pebruari", 3 => "Maret",
4 => "April", 5 => "Mei", 6 => "Juni", 7 => "Juli", 8 => "Agustus",
9 => "September", 10 => "Oktober", 11 => "Nopember",
12 => "Desember");
foreach($bulan as $bl=>$nm)
{ echo "<option value=\"$bl\">$nm</option>\n";
}

?>
</select>
<input type="text" name="thn" id="thn" size="10">
</td>
</tr>
... (kode lainnya)

6. BOOTSTRAP
Bootstrap adalah tools untuk merancang halaman web secara responsif pada perangkat
komputer atau mobile device yang mengaksesnya (responsif: bisa ditampilkan dengan baik
menyesuaikan dengan perangkat yang mengakses halaman web tersebut). Awalnya web
berkembang di perangkat komputer dengan layar lebar, tetapi kemudian berkembang
perangkat mobile dengan ukuran kecil. Web yang dirancang hanya untuk komputer tidak
dapat ditampilkan dengan baik pada perangkat mobile, sehingga pengembang ada yang
membuat web dalam 2 versi: versi desktop dan mobile. Ini menyulitkan karena harus kerja
dua kali.
Bootstrap memungkinkan perancang cukup membuat 1 versi tampilan, karena sistem
akan menyesuaikan tampilan apabila mendeteksi jenis perangkat yang berbeda untuk
mengaksesnya. Bootstrap merupakan kombinasi dari HTML, CSS, dan Javascript. Di dalamnya
didefinisikan berbagai template untuk jenis huruf (typography), form dan komponen, tabel,
navigasi, modal (alert, dialog box) dan sebagainya.
Bootstrap bisa diambil dari http://getbootstrap.com. Versi terbaru adalah 4.3.1 (atau
secara umum adalah versi 4). Terdapat perbedaan antara versi 3 dan 4, tetapi secara konsep
keduanya masih sama. Untuk menggunakan Bootstrap disarankan agar menggunakan
browser terbaru. Internet Explorer 9 dan versi sebelumnya tidak disupport oleh Bootstrap
versi 4 ini.
6.1. Persyaratan
Untuk menggunakan bootstrap, halaman harus memuat library dalam bentuk file offline
(diletakkan pada home directory tempat halaman web berada) atau secara online (dengan
mengakses situs tertentu yang menyediakan file library bootstrap). Cara kedua harus
menggunakan koneksi internet, dan dikenal dengan CDN (Content Delivery Network).
Persyaratan lain halaman HTML yang menggunakan bootstrap harus memenuhi struktur
tertentu. Berikut struktur minimal dokumen HTML yang memuat bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Contoh Bootstrap </title>

<link href="path_ke/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<h1>Hello, world!</h1>


<script src="path_ke/jquery.min.js"></script>
<!—Include-kan semua plugins (below) yang diperlukan -->
<script src="path_ke/bootstrap.min.js"></script>
</body>
</html>
Yang ada di dokumen tersebut adalah:
 <doctype> untuk menyatakan sebagai halaman HTML5
 tag <meta> untuk memastikan bahwa halaman bisa ditampilkan dengan baik pada
berbagai device, dan termasuk pada browser Internet Explorer yang sering tidak
kompatibel dengan berbagai inovasi dalam HTML. Untuk mengatasi ketidakkompatibelan
dengan browser IE sebelum versi 9, harus ada script yang dimuat di halaman.
 link untuk memuat file css milik bootstrap (sesuaikan path-nya dengan lokasi file di
komputer, atau dengan menggunakan CDN).
 Di head atau body, ada penyisipan script jquery dan bootstrap
6.2. Struktur halaman bootstrap

Halaman yang dibuat dengan bootstrap mengacu pada grid system. Bentuknya seperti
tabel dengan sejumlah baris dan kolom. Lebar halaman yang dibuat terbagi ke dalam 12
kolom. Lebar masing-masing kolom adalah spesifik, tergantung pada jenis perangkat yang
mengaksesnya. Setiap kolom dimuat dalam 1 baris (row), dan 1 atau lebih baris dimuat dalam
container. Jadi bayangkan seperti anda punya tabel dengan lebar 12 kolom, dan setiap baris
jumlah kolomnya paling banyak adalah 12 (bisa 1x12, 2x6, (1x4)+(4x2), dan sebagainya).
Pastikan jumlah kolom adalah 12 atau kurang (tidak harus semua kolom digunakan). Bila lebih
maka kolom berikutnya akan ditampilkan di baris berikutnya (bertumpuk) sehingga merusak
tampilan. Antar kolom terdapat jarak (gutter) sebesar 15px di masing-masing sisi.

Gambar 6.1 Perbandingan 4 device dalam menampilkan kolom di Boostrap 4.
Ada 4 kelas yang disediakan, disesuaikan dengan device-nya: .col-xx (extra small),
.col-sm-xx (small), .col-md-xx (medium), .col-lg-xx (large) dan .col-xl-xx (large).
xx adalah angka yang menunjukkan ukuran kolom (nilainya 1 sampai 12). Contoh:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4< /div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="container"> adalah wadah semua <div> lainnya. Untuk menyatakan 1 baris
tampilan, digunakan <div class="row"> (mengemas sejumlah kolom). Pada setiap baris
didefinisikan <div> lain yang berfungsi sebagai kolom dengan class yang menunjukkan lebar
kolomnya. Definisi kelas yang disebutkan akan berlaku untuk device yang disebutkan dan
kelas di atasnya, tapi tidak di bawahnya. Contoh di atas berlaku untuk medium, large, dan
extra large devices, tetapi tidak untuk small dan extra small.

Gambar 6.2 Perbandingan penggunaan lebar kolom yang berbeda
Bila didefinisikan kolom untuk extra small device kemudian ditampilkan di large device,
ukurannya akan menyesuaikan (melebar), tetapi tidak sebaliknya.
Bila lebar kolom tidak disebutkan, maka kolom dalam satu baris ditentukan secara
otomatis memiliki lebar yang sama. Contoh berikut berlaku untuk semua jenis device, yang
membagi satu baris menjadi tiga kolom dengan lebar yang sama (33,3%).
<div class="row">
<div class="col">col</div>
</div>
Untuk mengantisipasi tampilan yang dibuka di perangkat yang berbeda, digunakan
multiple classes (definisi lebih dari 1 kelas pada elemen yang sama) seperti contoh berikut ini:

<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
</div>


<div class="row">
</div>

<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>

Gambar 6.3 Penggunaan multiple classes
Ini adalah tampilan bila dibuka di medium device. Baris pertama ada 2 kolom dengan
lebar masing-masing 8 dan 4. Tetapi pada baris pertama juga didefinisikan lebar bila dibuka di
small device yaitu 12 dan 6. Karena 12+6 = 18 > 12 maka kolom kedua baris pertama akan
ditampilkan pada baris berikutnya.
Penjelasan dan contoh yang cukup lengkap bisa dilihat di
https://www.w3schools.com/bootstrap4/ dan https://getbootstrap.com/docs/4.3/getting-
started/introduction/
6.3. Form dengan bootstrap

Dengan menggunakan bootstrap, pada dasarnya sama dengan komponen yang telah
dibahas, hanya saja harus ditambahkan kelas untuk mengatur tampilannya (bentuk dan
ukurannya). Umumnya komponen di form selalu disertai keterangan yang menunjukkan apa
yang ditanyakan atau diisikan. Keterangan dinyatakan sebagai elemen <label>, yang bisa
diletakkan di sisi atas atau samping komponen. Komponen pengisian dikemas dalam satu
<div> dengan class .form-group.
Perhatikan contoh sederhana deklarasi form dan komponen berikut ini. Untuk semua
contoh yang digunakan, diasumsikan anda membuat folder dengan nama “bootstrap” di
dalam folder tempat script PHP anda berada, dan meng-ekstrak file zip library bootstrap ke
dalam folder “bootstrap” itu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<h1>Isilah data berikut ini</h1>
<form>
<div class="form-group">
<label for="NIM">NIM</label>
<input type="text" class="form-control" id="NIM" placeholder="NIM">
</div>
<label for="nama">Nama</label>
<input type="text" class="form-control" id="nama" placeholder="Nama
mahasiswa">
</div>
<label for="jk">Jenis kelamin</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="jk" id="jk1"
value="L">
<label class="form-check-label" for="jk1">Laki-laki</label>
</div>
value="P">
<label class="form-check-label" for="jk2">Perempuan</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script src="boostrap/js/bootstrap.min.js"></script>
</body>
</html>
Gambar 6.4 Penggunaan bootstrap untuk form

Dengan menggunakan kode tersebut, lebar komponen <input> adalah selebar layar
dan label terletak di atas komponen. Penambahan class .form-control dilakukan agar
komponen bisa diatur tampilannya oleh bootstrap. Bila tidak ditambahkan, maka yang
ditampilkan adalah bentuk standarnya. Kelas .form-control berlaku untuk komponen
tekstual seperti <input>, <select>, dan <textarea>.
Label dan form dinyatakan sebagai satu kesatuan sehingga dikemas ke dalam <div>
dengan class .form-group. Untuk radio dan checkbox, masing-masing memiliki class .form-
check untuk mengemas item pilihan dan teks label pilihan. Normalnya setiap item akan
ditampilkan ke bawah, tetapi bisa diatur mendatar satu baris.
Mungkin akan lebih indah bila label diletakkan berdampingan dengan komponen secara
horizontal. Perubahan yang dilakukan adalah menambahkan kelas .row pada setiap form
group, serta menentukan lebar dari tiap kolom (label dan komponen) menggunakan class
yang sesuai. Kode praktikum 5.4 dimodifikasi menggunakan bootstrap menjadi kode berikut
ini (hanya ditampilkan bagian body saja, header sama dengan contoh di sub bab 6.1):
Praktikum 6.1: Menggunakan bootstrap pada form (file: formisi-bs.php)

... // kode lainnya
<body>
<h1>Isilah data berikut ini</h1>
<div>
<form name="isian" id="isian">
<div class="form-group row">
<label class="col-md-2 col-form-label">NIM</label>
<div class="col-md-10">
<input type="text" class="form-control" name="nim" id="nim">
</div>
</div>
<label class="col-md-2 col-form-label">Nama</label>
<input type="text" class="form-control" name="nama" id="nama">
</div>
</div>
<label class="col-md-2 col-form-label">Alamat</label>
<input type="text" class="form-control" name="alamat"
id="alamat">
</div>
</div>
<label class="col-md-2 col-form-label">Jenis kelamin</label>
<div class="radio col-md-6">
<div class="form-check form-check-inline">
value="L">

</div>
value="P">
</div>
</div>
</div>
<label class="col-md-2 col-form-label">Tempat/ tanggal
lahir</label>
<input type="text" class="form-control" name="tempat"
id="tempat">
</div>
<input type="text" class="form-control" name="tgl" id="tgl">
</div>
<select class="form-control" name="bln" id="bln" size="1">
<option value="1">Januari</option>
<option value="2">Pebruari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">Nopember</option>
<option value="12">Desember</option>
</select>
</div>
<input type="text" class="form-control" name="thn" id="thn">
</div>
</div>
<label class="col-md-2 col-form-label">Hobi</label>
<input class="form-check-input" type="checkbox" id="hobi1"
name="hobi[]" value="Membaca">
<label class="form-check-label" for="hobi1">Membaca</label>
</div>
name="hobi[]" value="Nonton TV">
<label class="form-check-label" for="hobi2">Nonton TV</label>
</div>

name="hobi[]" value="Nonton film">
<label class="form-check-label" for="hobi3">Nonton film</label>
</div>
name="hobi[]" value="Main musik">
<label class="form-check-label" for="hobi4">Main musik</label>
</div>
name="hobi[]" value="Jalan-jalan">
<label class="form-check-label" for="hobi5">Jalan-jalan</label>
</div>
name="hobi[]" value="Olahraga">
<label class="form-check-label" for="hobi6">Olahraga</label>
</div>
name="hobi[]" value="Seni">
<label class="form-check-label" for="hobi7">Seni</label>
</div>
</div>
</div>
<label class="col-md-2 col-form-label">Konsentrasi
favorit</label>
<select class="form-control" name="konsen[]" id="konsen"
size="3" multiple>
<option value="Analisis">Analisis</option>
<option value="Aljabar">Aljabar</option>
<option value="Statistik">Statistik</option>
<option value="Terapan">Terapan</option>
<option value="Geometri">Geometri</option>
<option value="Komputasi">Komputasi</option>
</select>
</div>
</div>
<label class="col-md-2 col-form-label">Komentar</label>
<textarea class="form-control" rows="4" name="komentar"
id="komentar"></textarea>
</div>
</div>
<div class="offset-md-2 col-md-10">
</div>
</div>
</form>
</div>

</div>
</body>
... // kode lainnya
Gambar 6.5 Form pengisian data dengan bootstrap
Setiap pasangan label (teks) dan komponen dikemas dalam <div> dengan kelas
.form-group dan .row untuk menyatakan form horizontal. Pada form ini lebar label diatur
selebar 2 kolom, 10 kolom sisanya untuk komponen pengisian. Komponen <label> (teks awal
setiap komponen) menggunakan kelas .col-form-label.Radio dan checkbox dikemas dalam
wrapper yang sama yaitu kelas .form-check. Input menggunakan kelas .form-check-input
dan label (teks) menggunakan kelas .form-check-label. Yang baru adalah pengaturan
submit yang menggunakan kelas .offset-md-2. “offset” adalah untuk menggeser kolom ke
kanan selebar satuan tertentu.
Untuk button, bisa digunakan <a> (dipasangkan dengan atribut role), <input> atau
<button> yang dikenai kelas .btn, diikuti kelas lain untuk menyatakan jenis button dan
ukurannya. Jenis style button ada 9 macam: btn-primary, btn-secondary, btn-success,
btn-danger, btn-warning, btn-info, btn-light, btn-dark, dan btn-link. Ukuran
button ada 2 macam: .btn-lg, dan .btn-sm. Contoh penggunaannya:
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info btn-lg" value="Submit
Button">

7. JQUERY
7.1. Komunikasi sinkron-asinkron

Mekanisme komunikasi aplikasi berbasis web adalah berbasis request-response secara
bergantian. Pada sisi server, request diterima lalu diproses untuk menghasilkan suatu
response. Apapun bentuknya, response dikirimkan ke client untuk ditampilkan. Proses ini
dinamakan proses sinkron karena hanya salah satu pihak saja yang bekerja pada saat yang
sama. Secara umum tampilan response akan menimpa halaman sebelumnya yang meminta
request (ada proses reload atau pemuatan file yang dipanggil ke dalam browser). Anda sudah
melihat hal ini di bab 5, ketika proses submit dilakukan maka semua komponen menjadi tidak
ada, dan digantikan teks output. Agar form dan komponen tetap tampak maka bisa digunakan
penggabungan script untuk menampilkan komponen dengan script untuk menampilkan
output, seperti di bagian akhir bab 5. Walaupun keduanya tampak, sebenarnya masih tetap
ada proses reload.
Gambar 7.1. Mekanisme komunikasi sinkron
Proses sinkron tidak bisa dihindari, misalnya saat berpindah ke halaman baru melalui
suatu hyperlink. Akan tetapi cara ini terasa kuno karena aplikasi terus beragam jenisnya dan
kebutuhan data pada satu saat yang sama semakin banyak. Bila anda punya akun facebook,
bukalah wall anda. Tanpa anda perintahkan, isi timeline berubah ketika ada posting baru dari
teman anda. Tanpa diperintahkan, isi iklan berganti sendiri, isi aktifitas teman berubah. Tidak
ada perintah untuk memulai menampilkan update kegiatan itu. Siapa yang melakukan?
Contoh lain adalah ketika anda mengisikan satu karakter di mesin pencari google, maka ada
suggested words yang diberikan. Bagaimana bisa muncul?

Semua itu terjadi karena ada proses yang bekerja di latar belakang dan melakukannya
terus menerus. Pada mesin pencari Google, pada saat pengguna mengetikkan satu karakter
maka ada script yang mengirimkan karakter itu ke server Google, kemudian server mencari
alternatif kata/keyword dari database sesuai dengan karakter yang telah dimasukkan, dan
mengirimkan hasilnya kembali ke client untuk ditampilkan sebagai saran. Pada kasus
facebook, ada script yang terus melakukan request ke server untuk mencari kegiatan terbaru
dari teman anda dan menampilkannya di wall anda.
Apa yang dilakukan google atau facebook itu adalah proses asinkron, artinya kedua
pihak bekerja pada saat yang sama. User mengisikan karakter, server melakukan pencarian.
Pencarian ini tidak dilakukan setelah user men-submit keyword yang diisikan. Hal ini karena
ada request yang dikirimkan ke server secara “diam-diam”. Dengan demikian pengguna tetap
bisa berinteraksi dengan halaman yang ditampilkan selama belum ada response yang
diterima.
Gambar 7.2. Mekanisme komunikasi asinkron
Perhatikan Gambar 7.2, pada saat diperlukan request ke server maka halaman yang
terbuka saat itu meminta script bekerja mengirimkan request-nya. Response dari server
diterima oleh script (melalui callback function), yang kemudian mengolah hasil response dan
melakukan update sebagian isi halaman. Jadi tidak ada halaman baru dan reloading seperti
yang dilakukan pada komunikasi sinkron. Callback function adalah script di client yang
menerima data response dan mengolahnya (dalam hal ini meng-update tampilan).
Satu teknologi yang memungkinkan terjadinya proses asinkron ini adalah Ajax. Istilah
AJAX diutarakan oleh Jesse James Garrett pada 2005 sebagai singkatan dari Asynchronous
JavaScipt and XML (walaupun teknologi semacam ini sudah muncul sebelumnya). Engine Ajax

bertindak sebagai perantara, sehingga bukan client yang secara langsung yang berkomunikasi
dengan server.
Saat ini istilah AJAX (sebagai singkatan) tidak digunakan, digantikan oleh Ajax yang
sekedar nama dari produk teknologi. Ajax sendiri tidak harus digunakan untuk keperluan
komunikasi asinkron, banyak aplikasi yang basisnya komunikasi sinkron mengandalkan Ajax,
seperti yang akan kita terapkan nanti.
“Keuntungan” dari penggunaan Ajax ini adalah kecilnya data yang dikirim ke server atau
diterima dari server, dan script bisa melakukan update sebagian dari halaman yang
ditampilkan tanpa melakukan pemanggilan ulang satu halaman utuh. Dengan demikian, kesan
“cepat”, otomatis, lebih kaya tampilan, dan menyenangkan akan muncul pada halaman itu.
Tetapi sisi negatifnya adalah: tombol back tidak bisa digunakan untuk kembali ke
halaman sebelumnya (ingat yang di-update hanya sebagian halaman sehingga tidak ada
pemanggilan halaman baru), tidak bisa dimasukkan ke dalam bookmark, sulit bagi search
engine untuk mencari konten yang dihasilkan secara dinamis, dan fitur Javascript pada
browser harus diaktifkan.
7.2. JQuery
jQuery adalah library yang dibangun dari JavaScript dan menyediakan berbagai macam
tools dan fungsi antara lain untuk tampilan, penyediaan berbagai widget untuk menambah
fungsionalitas suatu page, penanganan berbagai event, animasi, dan komunikasi client-server
secara sinkron maupun asinkron. Khusus untuk keperluan komunikasi asinkron, jQuery sudah
menyediakan fasilitas Ajax.
7.2.1. Menggunakan library jQuery

Library jQuery bisa diunduh dari www.jquery.com, untuk selanjutnya dipanggil dari
script (secara offline) atau langsung mengacu ke salah satu situs yang menyediakan library
jquery (secara online). Library disediakan dalam 2 bentuk: compressed dan uncompressed.
Versi uncompressed memungkinkan pengembang memodifikasi kodenya, sedangkan versi
compressed adalah bentuk siap pakai, sudah dimampatkan sehingga filenya berukuran lebih
kecil dari yang uncompressed, tetapi tidak bisa dibaca oleh pengguna biasa.
Pengacuan ke library jQuery disebutkan di dalam elemen <script>. Elemen ini bisa
diletakkan di bagian <head> bila ada script yang harus dieksekusi lebih dulu sebelum isi
halaman dimuat di browser, atau di bagian <body> bila tidak ada eksekusi di awal. Bootstrap
selalu menggunakan script jQuery sehingga harus dimuat sebelum memuat script bootstrap.
<html>
<body>
...
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</body>

</html>
Atribut src pada elemen <script> merujuk ke file library yang di-load dari page ini. Ini
menunjukkan bahwa file jquery-3.3.1.min.js terletak di folder yang sama dengan halaman
ini (pastikan nama yang ada di src adalah nama file yang ada di folder script anda). Contoh
berikut menunjukkan pengacuan menggunakan CDN (Content Delivery Network) secara online
ke library yang disediakan oleh ajax.googleapis.com:
<html>
<body>
...
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
>
</script>
</body>
</html>
Untuk menggunakan CDN ini berarti harus selalu terhubung dengan Internet.
7.2.2. Struktur dasar jQuery

Struktur dasar sintaks jQuery:
$(selector).action();
Selector adalah elemen atau bagian dokumen yang dipilih, action adalah event atau method
yang dikenakan terhadap elemen yang terpilih. Apa yang dilakukan ketika suatu event terjadi
atau suatu method ditetapkan, dinyatakan dalam bentuk function.
Struktur utama script jQuery umumnya dinyatakan sebagai akses ke dokumen utama,
dengan memanfaatkan event ready. Berikut contoh implementasi strukturnya:
<script type="text/javascript">
$(document).ready(function () {
// kode di sini, dieksekusi setelah halaman dimuat dg lengkap
});
</script>
Arti dari script tersebut adalah jika document (halaman) sudah ready (secara teknis, struktur
halaman dalam bentuk Document Object Model telah terbentuk) maka eksekusilah
function() yang disebutkan. Pada umumnya function memiliki nama, tetapi dimungkinkan
juga function tanpa nama dan hanya berisi kode (contoh di atas adalah bentuk function tanpa
nama). Function yang tidak memiliki nama disebut dengan anonymous function.
Selain dengan anonymous function, kode bisa diletakkan dalam suatu function dengan
nama tertentu lalu dipanggil pada saat ready. Contoh:
$(document).ready(doSomething);
function doSomething()
{ // tulis kode di sini,

}
</script>
Salah satu alternatif dari $(document).ready() adalah versi pendek berikut, ini juga
bisa digunakan dalam script:
$(function () {
// kode di sini, dieksekusi setelah halaman dimuat dg lengkap
});
</script>
7.2.3. Selector jQuery
Apa saja yang bisa dipilih oleh selector? Pada dasarnya semua elemen di page, baik
yang memiliki pengenal (name atau id) maupun tidak. Cara pengenalan elemen di jQuery
sama dengan di CSS, sebagaimana yang tersaji di tabel berikut:
Selector CSS jQuery
Elements p { ... } $("p")
Class .header { ... } $(".header")
Id #teks { ... } $("#teks")
All elements * { ... } $("*")
Multiple / h1, .title, #teks $("h1, .title, #teks")
combination { ... }
Descendant li a { ... } $("li a")
Attribute input[id="button1"] $("input[id='button1']")
{ ... }
Umumnya action dikenakan terhadap elemen tunggal, sehingga selector yang banyak
digunakan adalah selector untuk element, class, dan id. Untuk pembahasan di diktat ini akan
digunakan selector untuk id komponen, sehingga pastikan komponen yang dikenai script
sudah memiliki id.
7.2.4. Action jQuery

Action bisa berupa method dan event bawaan jQuery, atau function buatan sendiri.
Intinya adalah menentukan apa yang harus dilakukan atau diterima suatu elemen yang
terpilih. Event berkaitan dengan apa yang diterima oleh komponen dari luar (di-klik, diisi,
digeser, dan sebagainya). Method jQuery biasanya berkaitan dengan efek dan manipulasi
elemen.
 Contoh event jQuery: blur(), focus(), change(), click(), dblclick(), error(), keydown(),
keypress(), keyup(), load(), unload(), mousedown(), mouseenter(), mouseleave(),
mousemove(), mouseout(), mouseover(), mouseup(), resize(), scroll(), select(), submit().
 Contoh method yang berkaitan dengan efek animasi: show(), hide(), toggle(), slideDown(),
slideUp(), slideToggle(), fadeIn(), fadeOut(), fadeTo(), animate(), stop().
 Contoh method yang berkaitan dengan manipulasi content elemen: html(), val(), attr(),
text().

 Contoh method yang berkaitan dengan manipulasi style: addClass(), removeClass(),
toggleClass(), hasClass(), css(), height(), width(), offset(), position(), scrollLeft(),
scrollTop(), attr()
Misal ada elemen button berikut:
<input type="button" value="OK" name="Submit" id="Submit" />
Kemudian akan dibuat script yang dieksekusi ketika button tersebut di-klik, maka terhadap
button tersebut dikenai event click. Contoh kerangka kode jQuery untuk menangani event
tersebut adalah:
$(document).ready(function(){ // jika dokumen sdh termuat sepenuhnya
$("#Submit").click(function(){ // ketika tombol di #Submit ditekan
alert("OK");
});
});
</script>
Sesuai dengan struktur dasar sintaks jQuery, maka elemen yang dikenai kode dipilih dengan
diawali ‘#’ karena mengacu ke id elemen. Apa yang dilakukan didefinisikan dalam anonymous
function, yang dalam hal ini berisi kode menampilkan alert.
7.3. Ajax dengan JQuery

Secara umum, permintaan koneksi asinkron dengan Ajax di jQuery memiliki sintaks
sebagai berikut:
$.ajax(parameter);
Beberapa parameter yang digunakan:
 type: untuk menentukan metode request, yaitu GET atau POST (sama dengan method di
<form>). Defaultnya adalah GET
 url: untuk menentukan file yang dituju pada saat request (sama dengan action di
<form>)
 data: data yang dikirimkan ke server untuk diproses. Data bisa ditentukan sendiri atau
diambil dari komponen. Bentuknya harus serialized (sebagai rangkaian dari pasangan
atribut dan nilai), misalnya "nim=123&nama=Joko". Bentuk ini sudah anda temui pada saat
submit data dari suatu form dengan menggunakan method GET.
Pemanggilan method .ajax menghasilkan suatu obyek jqXHR, yaitu obyek browser
yang berperan melakukan koneksi asinkron. Kembaliannya bisa diidentifikasi dari method
berikut:
 done: method yang dijalankan ketika request sukses dilaksanakan dan response telah
diterima. “sukses” belum tentu berarti request benar/sesuai dengan yang diharapkan, bisa
saja berarti hasil yang salah, atau pencarian data yang gagal. Untuk itu perlu dilakukan

seleksi berdasarkan suatu nilai yang dikembalikan sebagai response.
 fail: method yang dijalankan ketika request gagal dilaksanakan, misalkan karena file
yang dipanggil tidak ada, timeout, atau sebab lain. Kesalahan logika script atau pencarian
data yang gagal tidak termasuk dalam fail.
 always: method yang dijalankan ketika request dan response telah dilaksanakan secara
lengkap, baik bila sukses maupun gagal (gabungan antara done dan fail).
Di dalam masing-masing method disebutkan anonymous function yang dieksekusi
sesuai dengan apa yang terjadi setelah .ajax dilaksanakan. Function ini berperan sebagai
callback function (function yang menindaklanjuti response dari server).
Sebagai contoh, lihat kode formisi-bs.php yang dibuat di bab 5. Pada kode tersebut,
data dikirimkan ke file prosesdata.php, untuk kemudian ditampilkan semua apa yang diisikan.
Simpanlah file formisi.php pada praktikum 6.1 dengan nama lain (misal formisi-jq.php), lalu
masukkan perubahan berikut yang tercetak tebal.
Praktikum 7.1: Membuat kode jQuery untuk submit data (file: formisi-bs-jq.php)
<body>
... // kode lainnya
</form>
<div id="hasil"></div>
<script src="bootstrap/js/bootstrap.min.js"></script>
$(document).ready(function(){ // bila page dimuat lengkap
$("#isian").submit(function(e){ // bila #isian melakukan submit
e.preventDefault(); // gagalkan submit oleh form
$.ajax({ // lakukan pemanggilan dg Ajax
type: "GET", // method
url: "prosesdata.php", // file yg dipanggil
data: $("#isian").serialize() // serialize data di form
})
.done(function(hasilProses) { // bila request sukses
$("#hasil").html(hasilProses); // tampilkan di #hasil
})
.fail(function(jqXHR, textStatus) { // bila request gagal
alert( "Request gagal: " + textStatus );
});
});
});
</script>
</body>
</html>
Penjelasan dari kode tersebut:
 Library jQuery mengacu ke file jquery-3.3.1.min.js. Pastikan anda memiliki file library ini
(versi library bisa berbeda), sesuaikan dengan nama file yang anda miliki, perhatikan path
tempat file berada, dan pastikan filenya ada.
 Keadaan ketika dokumen dimuat lengkap adalah menentukan kode yang harus dieksekusi

pada saat elemen dengan id #isian (dalam hal ini adalah form) melakukan action submit.
Pada saat ini function belum dieksekusi karena submit belum terjadi.
 Pada saat submit dilakukan oleh #isian, maka method ajax dipanggil dengan parameter
method pengiriman, url file yang dipanggil, dan data yang dikirimkan. Data didapat dari
form dengan menggunakan method serialize(), yang membaca semua pasangan nama
komponen dan value-nya. Selain dengan serialize(), data bisa ditentukan secara
manual.
 Bila method .ajax dipanggil, maka disiapkan function ketika keadaan sukses (di method
done) dan gagal (di method fail) terjadi. Bila sukses maka kembalian dari file yang
dipanggil ada di parameter hasilProses (dalam bentuk string). Ini yang selanjutnya
ditampilkan di elemen #hasil (dalam hal ini berbentuk <div>). Bila gagal maka ada alert
yang ditampilkan.
 Seharusnya form akan melakukan submit data pada saat button submit ditekan, maka ini
digagalkan dengan e.preventDefault(); karena nantinya proses submit diambil alih
oleh script. Variabel e adalah obyek yang menangkap event yang terjadi. Alternatifnya
adalah dengan menggunakan button biasa (<input type="button">) yang hanya bisa
bekerja dengan script, sehingga tidak perlu menggagalkan proses submit.
 Atribut elemen <form> hanya tersisa nama dan id elemen. id ini penting karena sebagai
pengenal dalam script. Method dan action tidak dituliskan karena telah ditangani oleh
script.
 Tambahkan satu <div> dengan id tertentu (dalam contoh memiliki id “hasil”) untuk
menampilkan hasil pemanggilan file script. Inilah yang menjadi sasaran update tampilan
oleh script jQuery.
 Hasil pemanggilan prosesdata.php ditangkap oleh script jQuery sehingga tidak langsung
keluar di browser, di dalam parameter data. Isi variabel ditamplkan di #hasil dengan
method .html().
Coba jalankan, bila anda benar maka hasil pemanggilan prosesujian.php ditampilkan di
bawah form, sesuai dengan lokasi definisi elemen #hasil. Inilah contoh proses update
sebagian halaman oleh proses Ajax dengan menggunakan jQuery. Prosesnya sendiri belum
asinkron, nanti akan kita lihat pada contoh yang lain.

Gambar 7.3. Hasil update tampilan oleh jQuery
7.4. Kotak dialog dengan bootstrap

Pada praktikum sebelumnya, contoh output pemanggilan halaman prosesdata.php
dilakukan pada sebuah <div> dengan id tertentu. Kali ini akan dicoba variasi lain yaitu
menampilkannya dalam sebuah kotak dialog dengan menggunakan bootstrap, yang dalam
bootstrap disebut sebagai modal.
Kerangka modal adalah sebagai berikut: dikutip dari
(https://getbootstrap.com/docs/4.3/components/modal)
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>
Modal terbagi ke dalam 3 bagian: header, body, dan footer. Header (class .modal-

header) digunakan untuk menampilkan teks judul dan button untuk close di sudut kanan
atas; body (class .modal-body) untuk menampilkan teks yang ditampilkan, dan footer (class
.modal-footer) untuk menampilkan button untuk aksi lain (misal untuk close atau fungsi
yang lain).
Jadi teks hasil pengisian akan diletakkan pada body dengan memanfaatkan jQuery,
tepatnya pada elemen .modal-body, serta menentukan teks judul pada elemen .modal-
title. Modifikasi yang dilakukan adalah pada aksi fungsi ajax untuk memanggil
prosesdata.php sebagai berikut.
Praktikum 7.2a: Membuat kode untuk modal (file: formisi-bs-jq.php)

... // kode lainnya
</form>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Teks output</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>
<script src=" bootstrap/js/bootstrap.min.js"></script>
... // kode lainnya
})
$(".modal-title").html('Data yang diisikan');
$(".modal-body").html(hasilProses);
$("#myModal").modal()
})

});
});
});
</script>
</body>
</html>
Definisi kode untuk modal sebenarnya bisa diletakkan di mana saja karena tidak
ditampakkan. Selanjutnya, pada script ajax, yang awalnya menampilkan hasil pemanggilan
ajax ke #hasil, sekarang ditampilkan pada .modal-body (sebaiknya tidak mengubah nama
agar tidak mengacaukan tampilan). Modal #myModal selanjutnya ditampilkan dengan method
.modal().
Gambar 7.4. Modal dengan bootstrap
7.5. Kotak dialog dengan bootbox

Dengan bootstrap, struktur kotak dialog dituliskan di suatu halaman untuk selanjutnya
ditampilkan dalam bentuk modal. Ada library lain yang menyederhanakan hal ini, di antaranya
bootbox (http://bootboxjs.com/). Kotak dialog yang ditampilkan bisa berupa alert (sekedar
menampilkan informasi kepada pengguna), confirm (menampilkan informasi dan meminta
pengguna mengkonfirmasinya), dan prompt (meminta pengguna memasukkan suatu input).
Unduhlah script librarynya dan masukkan filenya ke folder tempat script, dan panggillah dari
halaman yang akan menampilkan kotak dialog.
Untuk menunjukkan contohnya, digunakan hasil praktikum 7.1 (diasumsikan belum
melakukan langkah di praktikum 7.2a).
Praktikum 7.2b: Membuat kode untuk bootbox (file: formisi-bs-jq.php)

... // kode lainnya
</form>

<script src="bootbox.min.js"></script>
... // kode lainnya
})
bootbox.alert({
title: 'Data yang diisikan',
message: hasilProses
})
})
});
});
});
</script>
</body>
</html>
Library bootbox harus dimuat setelah library jQuery dan bootstrap. Pemanggilan alert
dilakukan dengan method .alert() dengan atribut title untuk menunjukkan judul dan
message untuk menunjukkan teks yang ditampilkan. Dengan bootbox, tidak perlu
didefinisikan satu <div> tersendiri untuk alert. Bootbox inilah yang akan kita gunakan pada
pembahasan selanjutnya.
Gambar 7.5. Alert dengan bootbox
7.6. datePicker
Pada praktikum terakhir, pengisian tanggal dilakukan dengan menggunakan 3

komponen, masing-masing untuk tanggal, bulan, tahun. Di bootstrap tersedia komponen
untuk membuat pengisian data tanggal menjadi lebih interaktif yaitu dengan menggunakan
datepicker (sebenarnya dari pengembang lain, bukan dari pengembang asli bootstrap).
Bentuk datepicker seperti kalender yang menampilkan semua tanggal dalam 1 bulan dan bisa
dipilih tanggal/bulan/tahun yang lain. Komponen dasarnya adalah text, yang ditampilkan
sebagai picker. Library bisa diambil dari https://uxsolutions.github.io/bootstrap-datepicker/.
Buatlah folder “datepicker” di dalam home directory tempat script berada, ekstraklah library
datepicker ke dalamnya. Modifikasilah file formisi-jq.php sebagai berikut (yang tercetak tebal):
Praktikum 7.3: Menggunakan datePicker (file: formisi-bs-jq.php)

<html>
<head>
... // kode lainnya
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="datepicker/css/bootstrap-
datepicker3.css" />
... // kode lainnya
</head>
<body>
... // kode lainnya
id="tempat">
</div>
</div>
</div>
... // kode selanjutnya
<script src="datepicker/js/bootstrap-datepicker.min.js"></script>
$('#tgl').datepicker({
format: 'dd-mm-yyyy',
startDate: '01-01-2000',
todayBtn: 'linked',
autoclose: true
});
$("#isian").submit(function(){ // bila #isian melakukan submit
... // kode lainnya
</script>
</body>
</html>
Perubahan yang dilakukan adalah menghilangkan komponen select untuk pemilihan
bulan dan text untuk pengisian tahun, dan hanya menyisakan text untuk pengisian tanggal.
Selanjutnya menambahkan link untuk menyisipkan file css dan script dari datepicker.
Datepicker dipanggil dengan method .datepicker pada komponen #tgl. Atribut yang

disertakan antara lain adalah:
 format untuk menentukan bentuk tanggal yang ditampilkan
 startDate untuk menentukan tanggal awal yang bisa dipilih
 todayBtn untuk menampilkan button yang bila diklik akan menuju tanggal saat ini
 autoClose untuk menutup tampilan bila suatu tanggal dipilih.
Perubahan berikutnya adalah pada script prosesdata.php, yaitu dengan menghapus GET
untuk bln dan thn, serta mengubah echo untuk menampilkan informasi tanggal.
Praktikum 7.4: Mengambil data dari datePicker (file: prosesdata.php)

<?php
... // kode lainnya
$tanggal = $_GET['tgl']; // GET untuk bln & thn dihapus
$aHobi = $_GET['hobi'];
... // kode lainnya
echo "Tempat/tanggal lahir: $tempat, $tanggal <br>"; // tgl-bln-thn
... // kode lainnya
?>
Gambar 7.6. Datepicker dengan Bootstrap
HTML5 sebenarnya memiliki komponen input untuk data tanggal. Sayangnya komponen
ini tidak bisa ditampilkan di Firefox. Bentuk penulisan dan tampilan awalnya sama dengan
input untuk teks, tetapi memiliki tipe date.
<input type="date" name="tgl" id="tgl">
Contoh tampilan komponen date di Chrome:
Gambar 7.7. datePicker dengan HTML5

8. AKSES BASIS DATA
Salah satu kelebihan server-side script adalah kemampuan untuk mengakses data,
sehingga pengguna bisa menyimpan data dalam basis data (database) melalui aplikasi
berbasis web. PHP bisa berhubungan dengan berbagai DBMS (Database Management System)
seperti Microsoft SQL Server, MySQL, IBM DB2, MS-Access, PostgreSQL, bahkan sampai
FoxPro dan Oracle. Tetapi yang paling umum digunakan berpasangan dengan PHP adalah
MySQL, karena disebutkan MySQL memberikan hasil yang optimal dari sisi kecepatan dan
reliabitas manajemen data, dan sifatnya yang open-source menyebabkannya berkembang
secara pesat dan digunakan begitu banyak pengguna yang tidak ingin mengeluarkan biaya
besar untuk membangun sistem basis data.
PHP menyediakan extension yang spesifik untuk setiap produk DBMS. Extension adalah
kumpulan fungsi program tambahan yang membuat PHP dapat mendukung berbagai fitur
DBMS. Akibatnya, bila ingin berpindah ke produk DBMS yang berbeda maka harus dilakukan
pengubahan kode program.
Untuk MySQL, awalnya digunakan mysql extension dalam bentuk prosedural.
Selanjutnya karena perkembangan MySQL yang tidak bisa diwadahi mysql extension, maka
sejak PHP 5.0 dan MySQL 4.1 dikenalkan mysqli extension (MYSQL improved extension) yang
berbentuk prosedural dan berorientasi obyek. mysql extension sendiri sudah tidak digunakan
(deprecated) sejak PHP 5.5. Selain itu sejak PHP 5.0 dikenalkan antarmuka yang umum untuk
segala jenis database, yaitu dengan PDO (PHP Data Objects). PDO dimaksudkan sebagai
interface yang berlaku untuk semua produk DBMS. Perpindahan antar satu DBMS dengan
DBMS tidak memerlukan perubahan kode program seperti halnya penggunaan extension,
cukup mengubah setting awal saja.
Dengan PDO manipulasi basis data yang berbeda bisa dilakukan dengan cara yang
sama, dan ini yang lebih disarankan agar aplikasinya bersifat universal untuk berbagai
lingkungan operasi. Untuk kuliah ini, yang dibahas hanya penggunaan mysqli extension dalam
bentuk prosedural, tetapi di lampiran akan ditunjukkan perbandingan bentuk prosedural dan
obyek sebagai pengantar penggunaan PDO yang berorientasi obyek.
Untuk berhubungan dengan MySQL mutlak diperlukan pengetahuan tentang query
dalam SQL. Pembuatan basis data dan manipulasi basis data bisa dilakukan melalui command
line dengan menggunakan perintah SQL, tetapi sebagian fungsi bisa dilakukan dengan
PHPMyAdmin, sebuah aplikasi web untuk administrasi basis data dalam MySQL, atau dengan
software lain seperti MySQLYog dan Navicat.
Pada bab ini akan dibahas mengenai koneksi ke database dan operasi dasar terhadap
basis data (create, read, update, dan delete). Operasi ini digunakan oleh semua aplikasi di
web. Perbedaannya adalah pada logika pemrograman berkaitan dengan permasalahan yang

diselesaikan atau fitur yang ditawarkan, serta manipulasi tampilannya.
8.1. Pembuatan aplikasi basis data

Aplikasi yang akan dibuat adalah aplikasi sederhana untuk mengelola data mahasiswa,
mulai dari entry data baru, pencarian data, edit data, dan hapus data. Untuk keperluan entri
data, akan digunakan datepicker dan bootbox yang telah dibahas sebelumnya. Sebelum
aplikasi dibuat, perlu dirancang antar mukanya.
Banyak pengembang menyediakan web template berbasis Bootstrap, yang gratis dan
open source, salah satunya adalah StartBootsrap (https://startbootstrap.com/templates/sb-
admin/). Di dalam template ini sudah disertakan berbagai fitur antara lain untuk menu, tabel
data, grafik, dan sebagainya. File library juga sudah disertakan di dalamnya sehingga tidak
perlu mengunduh secara terpisah. Perlu diingat, yang ditampilkan sebagai demo hanya secara
statis dengan menggunakan kode HTML. Untuk tampilan dinamis, pengguna harus
menggunakan script server. Kita akan memodifikasi dari sejumlah contoh yang disediakan.
Gambar 8.1. Halaman untuk unduh SBAdmin
Unduhlah file script SBAdmin dari alamat yang disebutkan itu, lalu ekstraklah ke dalam
home directory (nama folder default hasil ekstrak adalah “startbootstrap-sb-admin-2-gh-
pages”, sebaiknya diganti agar lebih ringkas, misal “mahasiswa”). Cobalah tampilkan file
index.html di browser.

Gambar 8.2. File index.html di folder admin
File index.html berisi contoh semua fitur yang ada di SBAdmin. Pada sisi kiri ada sidebar
yang berisi sejumlah menu dan sub menu, di antaranya bagaimana menggunakan form,
komponen, tabel, utility lainnya. Di sisi atas ada header yang antara lain berisi link profil dan
notifikasi. Bagian tengah digunakan untuk isi utama halaman. Di sisi bawah dari bagian
tengah ada footer. Tidak semua fitur akan digunakan di kuliah ini karena waktu yang terbatas.
Template yang digunakan untuk pembahasan kuliah ini sudah disiapkan untuk dimodifikasi
lebih lanjut.
Struktur halaman di SBAdmin dapat dilihat di Gambar 8.3. Satu halaman dibagi menjadi
4 bagian: sidebar, header, isi utama, dan footer.
<div id="wrapper">  halaman
<ul class="navbar ..."> ... </ul>  sidebar
<div id="content-wrapper">
<div id="content">
<nav class="navbar ..."> ... </nav>  header
<div class="container-fluid"> ... </div>  isi utama
</div>
<footer class="sticky-footer ..."> ... </footer>  footer
</div>
</div>
Gambar 8.3. Struktur halaman dalam SBAdmin
File utama template yang digunakan dalam praktikum ini diambil dari file index.html dan
disederhanakan dengan menghapus beberapa menu dari sidebar, dan fitur notifikasi dari
header dan isi utama. Secara garis besar, kode HTML yang membentuk susunan di Gambar
8.3 ditunjukkan di kode Praktikum 8.1 (diambil bagian bodynya saja). File ini hanya sebagai
penjelasan, file aslinya bisa diunduh di link bahan kuliah yang telah disiapkan.

Praktikum 8.1: Mendefinisikan struktur halaman (file: default.php)
<body id="page-top">

<div id="wrapper">


<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark
accordion" id="accordionSidebar">
...  letak kode sidebar
</ul>



<div id="content-wrapper" class="d-flex flex-column">


<div id="content">


<nav class="navbar navbar-expand navbar-light bg-white topbar
mb-4 static-top shadow">
...  letak kode header
</nav>



<div class="container-fluid">
...  letak kode isi utama
</div>

</div>



<footer class="sticky-footer bg-white">
...  letak kode footer
</footer>

</div>

</div>

</body>
Untuk keperluan file pendukung di praktikum ini (bootbox dan datepicker), copykan
folder datepicker dan folder bootbox yang telah digunakan di praktikum sebelumnya ke dalam
folder vendor sebagai folder yang disediakan SBAdmin untuk fitur pendukung. Bootstrap dan
jQuery tidak perlu dicopy karena telah dimiliki oleh SBAdmin. Satu hal lagi, SBAdmin
memerlukan koneksi Internet untuk menggunakan font teks. Page tetap bisa dibuka bila tidak

ada koneksi, tetapi hurufnya menjadi berbeda.
Gambar 8.4. File default.php yang digunakan untuk template
Pada file aslinya, file javascript yang diperlukan oleh halaman ini dimuat di akhir
halaman (tepat sebelum </body>). Padahal file tersebut diperlukan untuk eksekusi script di
tengah halaman, sehingga kalau menggunakan susunan aslinya akan timbul error karena
terbalik posisinya (definisi variabel dan fungsi yang diperlukan untuk eksekusi justru terletak
lebih akhir). Untuk itu semua pemanggilan script dipindah ke bagian <head> setelah
pemuatan file css. Carilah posisi yang sesuai, lalu sisipkan baris yang tercetak tebal berikut.
Praktikum 8.2: Menambahkan pemuatan file css dan js (file: default.php)

... // kode sebelumnya


<link href="css/sb-admin-2.min.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/datepicker/css/bootstrap-
datepicker3.css" />


<script src="js/sb-admin-2.min.js"></script>
<script src="vendor/datepicker/js/bootstrap-
datepicker.min.js"></script>
<script src="vendor/bootbox/bootbox.min.js"></script>
</head>

Kode untuk penyisipan css dan script menyatakan bahwa folder datepicker dan bootbox harus
ada di folder “vendor” yang ada di dalam folder utama SBAdmin.

8.2. Tipe data di MySQL
Seperti halnya DBMS yang lain, setiap field memiliki tipe data tertentu yang
menunjukkan jenis data yang bisa disimpan di dalamnya. Berikut ini sebagian tipe data yang
digunakan:
Type Size Deskripsi
Numerik
TINYINT[Length] 1 byte Rentang nilai: -128 sampai 127 (signed) atau 0
sampai 255 (unsigned).
SMALLINT[Length] 2 byte Rentang nilai: -32.768 sampai 32.767 (signed)
atau 0 sampai 65.535 (unsigned).
MEDIUMINT[Length] 3 byte Rentang nilai: -8.388.608 sampai 8.388.607
(signed) atau 0 sampai 16.777.215 (unsigned)
INT[Length] 4 byte Rentang nilai: -2.147.483.648 sampai
2.147.483.647 (signed) atau 0 sampai
4.294.967.295 (unsigned)
BIGINT[Length] 8 byte Rentang nilai: -9.223.372.036.854.775.808
sampai 9.223.372.036.854.775.807 (signed)
atau 0 sampai 18.446.744.073.709.551.615
(unsigned)
FLOAT 4 byte Bilangan floating-point Single Precision.
DOUBLE[Length, 8 byte Bilangan floating-point Double Precision.
Decimals]
DECIMAL[Length, Bilangan fixed-point dalam format biner
Decimals]
String
CHAR[Length] String dengan panjang tetap, 0 sampai 255
karakter
VARCHAR(Length) Length+1 String dengan panjang bervariasi, 0 sampai
65.535 karakter
TINYTEXT String dengan panjang maksimum 255 karakter
TEXT String dengan panjang maksimum 65.535
BLOB karakter
MEDIUMTEXT String dengan panjang maksimum 16.777.215
MEDIUMBLOB karakter
LONGTEXT String dengan panjang maksimum
LONGBLOB 4.294.967.295 karakter
Waktu
DATE 3 byte Tanggal dalam format YYYY-MM-DD
DATETIME 8 byte Tanggal dan jam dalam format YYYY-MM-DD
HH:MM:SS.
TIMESTAMP 4 byte Timestamp dalam format YYYYMMDDHHMMSS;
nilai yang mungkin adalah sampai tahun 2037
TIME 3 byte Jam dalam format HH:MM:SS.
Enumerasi dan Himpunan
ENUM 1 atau 2 byte Untuk tipe enumerasi, dimana suatu kolom bisa
berisi satu dari sejumlah nilai yang ditentukan
SET 1, 2, 3, 4, atau 8 Untuk tipe enumerasi, dimana suatu kolom bisa
byte berisi lebih dari satu nilai yang telah ditentukan
Perbedaan antara CHAR dan VARCHAR adalah dalam representasi internalnya. CHAR(8)
berarti maksimal 8 karakter yang bisa ditampung di field itu. Bila panjangnya kurang dari 8
maka sisanya akan diisi dengan spasi. Jadi panjang teksnya seolah-olah bervariasi tetapi
sebenarnya tetap 8 karakter. Pada VARCHAR(8), panjang teks maksimum adalah 8 karakter.

Bila kurang dari 8 karakter, maka tidak ada penambahan spasi atau karakter lain. Jadi
panjang teksnya benar-benar bervariasi.
BLOB (Binary Large Object) adalah tipe data yang biasanya digunakan untuk
menyimpan data biner seperti data image. Dengan tipe TEXT sebenarnya sama, hanya saja
ada perbedaan di representasi internalnya, dimana BLOB dinyatakan sebagai binary strings
(dalam bentuk byte) sedangkan TEXT sebagai character strings (sebagai karakter).
8.3. Membuat basis data di MySQL

Langkah pertama pembuatan aplikasi yang memanfaatkan basis data adalah
mendefinisikan basis data, tabel, field, dan tipe datanya. Umumnya di paket WAMP seperti
XAMPP telah disediakan phpmyadmin sebagai sarana melakukan administrasi basis data,
tetapi tool atau aplikasi lain juga bisa digunakan.
Bab ini akan membahas sejumlah operasi yang berkaitan dengan data tentang
mahasiswa di perguruan tinggi. Permasalahannya disederhanakan agar pengkodeannya juga
tidak terlalu banyak, tetapi bisa dikembangkan sendiri untuk permasalahan yang lebih
kompleks. Basis data yang digunakan bernama ”AKADEMIK”, dan salah satu tabelnya
bernama ”MAHASISWA”. Struktur tabel MAHASISWA adalah sebagai berikut:
Nama Field Tipe data Panjang Keterangan
NIM char 8 Primary Key
Nama Varchar 30
Alamat varchar 40
TempatLahir varchar 20
TanggalLahir Date
JenisKelamin enum('L', 'P')
Prodi Varchar 4
Foto Varchar 50
Berikut secara sederhana langkah-langkah penentuan struktur basis data dan tabelnya,
dengan menggunakan phpmyadmin:
Praktikum 8.3: Mendefinisikan basis data dan tabel

1. Buka browser, tuliskan di address bar: http://localhost/phpmyadmin.
2. Untuk membuat basis data baru, pada kolom “Create new database”, isikan nama
database baru (misal beri nama Akademik), lalu klik Create. Tampak di sisi kiri
terdapat “Akademik (0)” yang menandakan database Akademik belum memiliki tabel.
3. Untuk membuat tabel, isikan pada kolom “Name” nama tabel yang akan dibuat (beri
nama Mahasiswa) dan banyaknya field di “Number of fields”. Seandainya anda tidak
tahu akan membuat berapa field, isikan sembarang angka karena nanti bisa diubah.
4. Isikan semua nama field, tipe data, dan panjang field. Untuk menentukan Primary Key,
pilih “PRIMARY” pada combo box “Index”. (Catatan: mungkin caranya berbeda
tergantung kepada versi PHPMyAdmin atau tool yang anda gunakan). Bila

sudah lengkap, klik tombol Save atau Go untuk menambahkan field baru.
5. Tipe char digunakan untuk menampung karakter dan disimpan di tabel dengan panjang
tetap, tipe varchar digunakan untuk menampung karakter dan disimpan di tabel dengan
menyesuaikan karakter yang diiisikan, tipe enum digunakan untuk data enumerasi (jenis
nilai yang diisikan sudah ditentukan sebelumnya)
6. Untuk membuat tabel yang lain, klik pada nama database, ulangi lagi langkah 3 dan
seterusnya.
8.4. Koneksi basis data di MySQL

Seperti yang disebutkan sebelumnya, pembahasan di diktat ini menggunakan mysqli
dalam bentuk prosedural. Perbandingan dengan mysqli berbasis obyek serta PDO disediakan
di lampiran. Langkah pertama yang dilakukan untuk memanfaatkan database mySQL adalah
melakukan koneksi ke server. Struktur perintah dasarnya adalah:
koneksi = mysqli_connect(hostname, username, password);
hostname adalah nama komputer server (bila komputer lokal yang digunakan sebagai server,
maka isinya adalah “localhost” atau alamat IP 127.0.0.1), username adalah nama pengguna
yang memiliki hak mengakses basis data dan password adalah kata kuncinya (bila ada dan
isinya tergantung sistem yang digunakan). Output dari pemanggilan kunci ini adalah pengenal
(identifier) koneksi ke sistem mysql, atau false bila gagal.
Selanjutnya dilakukan penentuan basis data apa yang akan digunakan, dengan perintah
berikut:
mysqli_select_db(koneksi, nama_basisdata);
koneksi adalah pengenal koneksi yang dihasilkan dari mysqli_connect, nama_basisdata
adalah nama basis data yang akan digunakan. Kedua hal ini harus dilakukan setiap kali suatu
page akan melakukan akses ke basis data.
Untuk menghentikan proses bila terjadi error bisa digunakan fungsi die(), dan untuk
menampilkan pesan kesalahan yang mungkin timbul, bisa digunakan fungsi mysqli_error()
atau dengan mysqli_errno() untuk mengetahui apakah terjadi error atau tidak. Contoh
selengkapnya dari tahapan koneksi ke database server dan penentuan database adalah:
$koneksi = mysqli_connect("localhost", "root", "") or
die(mysqli_error($koneksi));
mysqli_select_db($koneksi, "akademik") or die(mysqli_error($koneksi));
8.5. Operasi dasar dalam basis data

Setelah basis data dibuka maka tahap selanjutnya adalah pengolahan data. Secara
mendasar, hanya ada empat operasi basis data: menambah data baru (INSERT), membaca
data yang tersimpan (SELECT), mengubah data yang ada (UPDATE), dan menghapus data

(DELETE). Operasi dasar ini dikenal dengan istilah CRUD (Create, Read, Update, Delete).
Secara umum, alur pengolahan data yang digunakan dalam pembahasan berikutnya
adalah sebagai berikut (langkah ke 4 dan 5 mungkin bisa dibalik, tergantung pada prosesnya)
1. Lakukan koneksi ke database server.
2. Buka basis data yang akan digunakan
3. Tentukan query yang sesuai dan eksekusi query tersebut kepada database aktif
4. Lakukan proses lanjutan (misal menampilkan pesan atau yang lain)
5. Tutup koneksi ke server basis data
Query adalah permintaan ke sistem basis data untuk melakukan sesuatu aksi.
Formatnya dalam notasi SQL. Eksekusi query dilakukan dengan perintah mysqli_query(),
dengan sintaks
hasilquery = mysqli_query(koneksi, query);
koneksi adalah pengenal koneksi yang dihasilkan dari mysqli_connect, query adalah teks
yang berisi query yang akan dieksekusi, hasilquery adalah variabel yang menampung hasil
eksekusi query atau menerima balikan hasil eksekusi, tergantung kepada bentuk query-nya.
Bila query berkaitan dengan manipulasi data (INSERT, UPDATE, DELETE) maka hasilquery
berisi TRUE (bila eksekusi berhasil) atau FALSE (bila eksekusi query gagal misal karena
kesalahan query atau kesalahan eksekusi). Bila query berkaitan dengan pencarian data
(SELECT) maka hasilquery berisi FALSE (bila eksekusi gagal) atau sejumlah record
(recordset) yang sesuai dengan kriteria dalam SELECT.
Setelah semua selesai, maka koneksi ditutup, dengan perintah mysqli_close(),
dengan sintaks:
mysqli_close(koneksi);
Berikut ini adalah penjelasan mengenai setiap operasi, dan langsung digunakan dalam
aplikasi pendataan mahasiswa.
8.5.1. Membuat file untuk koneksi data

Penggunaan pernyataan mysqli_connect() dan mysqli_select_db() akan terus
digunakan sepanjang penggunaan akses ke basis data. Untuk menghindari penulisan kode
yang sama berulang-ulang, kodenya bisa dituliskan di suatu file untuk diacu dari script yang
memerlukan. Tuliskan kode berikut ini, simpan dengan nama koneksi.php:
Praktikum 8.4: Membuat file untuk koneksi ke database (file: koneksi.php)

<?php // file untuk koneksi ke database
$koneksi = mysqli_connect("localhost", "root", "") or
die(mysqli_error($koneksi)); // buka koneksi
mysqli_select_db($koneksi, "akademik") or
die(mysqli_error($koneksi)); // pilih database
?>

Untuk menyisipkan isi file ini bisa digunakan pernyataan require(). Penggunaannya
bisa dilihat pada pembahasan selanjutnya berikut ini.
8.5.2. Menyisipkan data baru
a. Query SQL
Untuk menyisipkan data baru ke dalam tabel, digunakan query INSERT INTO. Yang
penting diperhatikan adalah tipe data setiap field. Gunakan tanda petik untuk data string
(CHAR dan VARCHAR) dan date, serta tanpa petik untuk data numerik. Bentuk umum query
INSERT INTO adalah:
INSERT INTO <namatabel> [(<namafield> {, <namafield>})]
VALUES (<nilai> {, <nilai>}) | <pernyataan SELECT>;
Nama field bisa tidak dicantumkan bila kita yakin bahwa urutan dan banyaknya data yang
dimasukkan adalah sama dengan struktur tabel.
b. Kode PHP dan jQuery

Untuk form pengisian data, buatlah halaman yang kodenya ada di praktikum 8.5 berikut
ini. Sebaiknya nama komponen tidak diubah agar konsisten dengan script lain yang akan
dibuat. Halaman ini berisi kode HTML untuk form dan komponen, serta script untuk
penanganan datepicker dan proses simpan data ke tabel.
Praktikum 8.5: Membuat halaman untuk pengisian data (file: entrymhs.php)

<h1>Entry Data Mahasiswa</h1>
<div class="row">
<div>
<form method="GET" name="formisi" id="formisi">
<input type="text" class="form-control" name="nim" id="nim">
</div>
</div>
<input type="text" class="form-control" name="nama" id="nama">
</div>
</div>
id="alamat">
</div>
</div>

<input class="form-check-input" type="radio" value="L"
name="jk" id="jk1">
</div>
<input class="form-check-input" type="radio" value="P"
name="jk" id="jk2">
</div>
</div>
</div>
<label class="col-md-2 col-form-label">Tempat/tanggal lahir
</label>
id="tempat">
</div>
</div>
</div>
<label class="col-md-2 col-form-label">Prodi</label>
<select class="form-control" name="prodi" id="prodi" size="1">
<option value="MAT">Matematika</option>
<option value="PMAT">Pendidikan Matematika</option>
<option value="FIS">Fisika</option>
<option value="PFIS">Pendidikan Fisika</option>
<option value="KIM">Kimia</option>
<option value="PKIM">Pendidikan Kimia</option>
<option value="BIO">Biologi</option>
<option value="PBIO">Pendidikan Biologi</option>
<option value="PIPA">Pendidikan IPA</option>
</select>
</div>
</div>
<div class="col-md-offset-2 col-md-10">
</div>
</div>
</form>
</div>
</div>
</div>
$(document).ready(function(){

startDate: '01-01-2000',
todayBtn: 'linked',
autoclose: true
});
$("#formisi").submit(function(e){
e.preventDefault(); // gagalkan proses aslinya
$.ajax({
url : "simpanmhs.php", // tujuan data
type : "POST", // cara kirim data
data : $("#formisi").serialize() // data yg dikirim
})
.done(function(hasil){
bootbox.alert({
title: "Hasil entry data",
message: hasil
});
})
.fail(function(q, textStatus) { // bila gagal
alert(textStatus); // tampilkan sbg alert
})
});
});
</script>
Pada kode tersebut tidak ada deklarasi <body> karena file ini akan disisipkan ke dalam
file default.php. Bila melihat kodenya, ada panel yang menjadi wadah semua komponen,
selebar container-nya. Di dalam panel terdapat form yang terbagi ke dalam 2 kolom: kolom
untuk judul isian dan kolom untuk komponen isian. Ada sejumlah komponen yang digunakan,
disesuaikan dengan struktur tabel yang dibuat (kecuali untuk field foto yang akan dikerjakan
selanjutnya). Isian untuk NIM, nama, tempat lahir, alamat menggunakan text, isian untuk
tanggal lahir menggunakan datepicker, isian untuk jenis kelamin menggunakan radio button
secara inline (sebaris), dan isian untuk prodi menggunakan select. Nama komponen untuk
masing-masing isian secara berurutan adalah nim, nama, alamat, jk (berisi Laki-laki dan
Perempuan; dengan nilai masing-masing L dan P), tempat, tanggal, dan prodi (berisi
sejumlah nilai yang merupakan kode prodi). Script untuk penanganan datepicker pada
dasarnya sama dengan yang digunakan di praktikum 7.3.
Kode jQuery untuk memanggil file script yang bertugas menyimpan data ke tabel basis
data, kurang lebih sama dengan kode yang dibahas pada bab 7. Kode jQuery ini diletakkan di
entrymhs.php karena kodenya hanya spesifik digunakan oleh file entrymhs.php.
Kode entrymhs.php dipanggil dari file default.php. Kode tidak dicopy ke dalamnya, tapi
dipanggil dengan menggunakan include(). Ubahlah kode di default.php menjadi berikut ini:
Praktikum 8.6: Memanggil entrymhs.php (file: default.php)


<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="?kode=entry">Entry data</a>

</div>


<div class="container-fluid">

<?php
if (isset($_GET['kode']))
{ $kode = $_GET['kode'];
if ($kode == 'entry')
{ include('entrymhs.php');
}
}
?>
</div>

Pada definisi menu untuk input data mahasiswa, ditentukan kode <a class="
collapse-item" href="?kode=entry">Entry data</a>. Ini berarti link untuk
memanggil file yang sama (dalam hal ini adalah default.php), dengan menambahkan properti
URL “kode” dengan nilai “entry”. Itulah yang kemudian dilihat oleh script PHP. Variabel $kode
berisi GET dari properti kode. Bila nilainya sama dengan “entry” maka isi file entrymhs.php
disisipkan ke posisi itu. Cara ini nantinya akan digunakan untuk menyisipkan file lainnya.
Cobalah memanggil file default.php dan memastikan bahwa link ke input data mahasiswa bisa
bekerja dan form bisa ditampilkan. Bila ada, perbaiki semua kesalahan yang ada. Gunakan
fasilitas untuk debugging (pemeriksaan kesalahan) script Javascript dengan Firebug, atau
tools bawaan dari browser (Developer Toolbar pada Firefox atau Developer tools pada
Chrome).

Gambar 8.4. Tampilan form pengisian data
Berikut kode file simpanmhs.php untuk mendapatkan data dari form dan
menyisipkannya ke tabel MAHASISWA. Pastikan tidak ada tag HTML di luar <?php .. ?>
untuk menghindari kesalahan tampilan, karena nanti akan digabungkan dengan file lain.
Praktikum 8.7: Membuat kode untuk penyimpanan data baru (file:

simpanmhs.php)
<?php
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$tempat = $_POST['tempat'];
$tanggal = $_POST['tgl']; // format: dd-mm-yy
$jk = $_POST['jk'];
$alamat = $_POST['alamat'];
$prodi = $_POST['prodi'];
$aTgl = explode('-', $tanggal);
$tgl_lahir = "$aTgl[2]-$aTgl[1]-$aTgl[0]";
require("koneksi.php"); // buka koneksi dan database
// susun query
$query = "INSERT INTO MAHASISWA (NIM, Nama, Alamat, TempatLahir,
TanggalLahir, JenisKelamin, Prodi) VALUES ('$nim', '$nama',
'$alamat', '$tempat','$tgl_lahir','$jk','$prodi')";
$hasil = mysqli_query($koneksi, $query); // eksekusi query
if (!$hasil)
{ echo "Error: " . mysqli_error($koneksi); // tampilkan pesan
}
else
{ echo "<table width='100%' border='0'>";
echo "<tr><td width='35%'>NIM:</td><td width='65%'>$nim</td>
</tr>";
echo "<tr><td>Nama:</td><td>$nama</td></tr>";
echo "<tr><td>Alamat:</td><td>$alamat</td></tr>";
echo "<tr><td>Tempat lahir:</td><td>$tempat</td></tr>";

echo "<tr><td>Tanggal lahir:</td><td>$tanggal</td></tr>";
echo "<tr><td>Jenis Kelamin:</td><td>$jk</td></tr>";
echo "<tr><td>Prodi:</td><td>$prodi</td></tr>";
echo "</table>";
}
mysqli_close($koneksi); // tutup koneksi */
?>
Jadi file yang terlibat: file entrymhs.php (berisi form untuk pengisian data) dimuat lebih dulu
oleh file default.php. Ketika proses submit terjadi, file simpanmhs.php akan terpanggil oleh
entrymhs.php.
Alur proses pada simpanmhs.php:
 Mula-mula semua isian dari halaman sebelumnya (entrymhs.php) diambil dan dimasukkan
ke variabel (diasumsikan isian telah lengkap). Tipe Date dalam mySQL memiliki format
tahun-bulan-tanggal sehingga harus diatur dulu susunannya (perhatikan variabel
$tgl_lahir).
 File koneksi.php disisipkan ke script dengan menggunakan require() untuk melakukan
koneksi ke database (dengan mysqli_connect) dan membuka database (dengan
mysqli_select_db)
 Selanjutnya menentukan perintah SQL untuk menyisipkan record baru ke tabel, dan
mengeksekusinya dengan fungsi mysqli_query. Hasil eksekusi ditampung dalam suatu
variabel. Ini berguna untuk melihat apakah eksekusi berhasil atau gagal.
 Bila ada kesalahan, maka ada pesan yang ditampilkan di layar yang berasal dari fungsi
mysqli_error. Bila tidak, data yang diisikan ditampilkan ke layar juga (dengan
memanfaatkan modal yang didefinisikan di default.php), dalam bentuk tabel.
 Terakhir kali, koneksi ditutup dengan mysqli_close. Pernyataan ini sebenarnya opsional
karena koneksi secara otomatis ditutup begitu script selesai dieksekusi.
Eksekusi query (yang ada di variabel $query) mengembalikan hasil yang berbeda. Bila
querynya adalah INSERT, maka mysqli_query mengembalikan true bila eksekusi berhasil
dan false bila gagal (diterima oleh variabel $hasil). Bila $hasil bernilai false, maka jenis
kesalahan bisa dilihat dengan mysqli_error().
Alternatif pemeriksaan kesalahan eksekusi query dengan if adalah dengan
menggunakan fungsi die() untuk menghentikan proses bila terjadi kegagalan. Kode apapun
setelah pernyataan die() tidak akan dieksekusi. Contoh berikut adalah kode yang relevan
dengan sebelumnya, dengan menggunakan die().
$hasil = mysqli_query($koneksi, $query) or die("Error: ".
mysqli_error($koneksi));
echo "<table width='100%' border='0'>";
// pernyataan berikutnya
Pada saat terjadi error, proses dihentikan dengan die(), sedangkan bila sukses maka

pernyataan berikutnya yang dieksekusi.
Ujilah dulu proses entry data dengan memanggilnya secara langsung (misal:
http://localhost/mahasiswa/default.php). Pastikan bahwa tidak ada error di script PHP, script
jQuery, dan data tersimpan dengan benar di tabel. Seharusnya bila script benar maka
tampilannya sebagai berikut (keadaan bila benar dan bila ada kesalahan).
Gambar 8.5. Pesan hasil pengisian data
8.5.3. Menampilkan semua data dari tabel
a. Query SQL
Pencarian data dilakukan dengan query SELECT. Pencarian bisa didasarkan pada suatu
kondisi tertentu untuk mendapatkan data tertentu atau tanpa kondisi apapun untuk
mendapatkan semua data. Bentuk umum query SELECT adalah:
SELECT <namafield>{, <namafield>}
FROM <namatabel>
[ WHERE <kondisi> ];
Yang mengikuti klausa SELECT adalah nama field yang akan ditampilkan mengacu ke
nama field di tabel (urutannya bebas, tidak harus sama dengan struktur tabel), atau karakter
‘*’ yang mewakili pernyataan untuk mengambil semua field. Yang mengikuti klasa WHERE
adalah kondisi pencarian, sehingga record yang dihasilkan dipastikan sesuai dengan kondisi
yang disebutkan. WHERE diperlukan bila ingin mendapatkan record dengan kriteria tertentu.
Operasi SELECT mungkin tidak menghasilkan record apapun (bila tidak ada data yang
sesuai dengan kriteria pencarian atau bila tabelnya kosong), beberapa record yang sesuai
dengan kondisi pencarian, atau semua record dalam tabel (bila semua record sesuai dengan
kondisi pencarian, atau bila tidak menggunakan klausa WHERE). Seperti yang dijelaskan
sebelumnya, pernyataan mysqli_query() untuk query SELECT menghasilkan FALSE bila

terdapat kesalahan di query, atau menghasilkan satu atau lebih record yang sesuai dengan
kriteria yang disebutkan dalam query.
Pengolahan hasil query hanya bisa dilakukan per record, sehingga harus digunakan
dalam iterasi untuk mengambil satu per satu data. Beberapa function yang bisa digunakan
untuk mendapatkan hasil query SELECT adalah:
mysqli_fetch_row(result) Mendapatkan baris tabel hasil pencarian sebagai
suatu array enumerated
mysqli_fetch_assoc(result) Mendapatkan baris tabel hasil pencarian sebagai
suatu array asosiatif
mysqli_fetch_object(result) Mendapatkan baris tabel hasil pencarian sebagai
suatu object
mysqli_fetch_array(result, Mendapatkan baris tabel hasil pencarian sebagai
tipe) gabungan array asosiatif dan enumerated. Parameter
tipe menyatakan jenis array yang dikembalikan.
Nilai parameter MYSQLI_NUM menyatakan array
enumeratif (efeknya sama dengan
mysqli_fetch_row), nilai MYSQLI_ASSOC
menyatakan array asosiatif (efeknya sama dengan
mysqli_fetch_assoc), dan MYSQLI_BOTH
mengembalikan kedua jenis array
mysqli_num_rows(result) Mendapatkan banyaknya record hasil pecarian
mysqli_affected_rows(result Mengetahui apakah ada record yang berubah karena
); operasi INSERT, UPDATE, DELETE

Sebagai kerangka dasar, buatlah kode berikut (kode disimpan pada file
browsemhs.php):
Praktikum 8.8: Membuat kode untuk menampilkan semua data (file:

browsemhs.php)
<?php
require 'koneksi.php';
$sql = "SELECT NIM, Nama, TempatLahir, TanggalLahir, JenisKelamin,
Prodi FROM Mahasiswa";
$hasil = mysqli_query($koneksi, $sql) or die("Error: ".
?>
<div class="box-body">
<div class="table-responsive">
<table id="tblMahasiswa" class="table table-striped table-bordered
table-hover">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>NIM</th>
<th>Nama</th>
<th>Tempat/tgl.lahir</th>
<th>Jen.kel</th>
<th>Prodi</th>
<th>Action</th>

</tr>
</thead>
<tbody>
<?php
$counter = 1;
While ($arData = mysqli_fetch_array($hasil))
{ echo '<tr>';
echo '<td>'.$counter.'</td>';
echo '<td>'.$arData['NIM'].'</td>';
echo '<td>'.$arData ['Nama'].'</td>';
$arTgl = explode('-',$arData['TanggalLahir']);
echo '<td>'.$arData['TempatLahir'].', '.$arTgl[2].'-'.$arTgl[1].'-
'.$arTgl[0]. '</td>';
echo '<td>'.$arData ['JenisKelamin'].'</td>';
echo '<td>'.$arData ['Prodi'].'</td>';
echo '<td>-</td>';
echo '</tr>';
$counter++;
}
?>
</tbody>
</table>
</div>
</div>
Alur proses:
 Seperti sebelumnya, pernyataan untuk melakukan koneksi ke mySQL ada di file
koneksi.php dan diacu dengan menggunakan require().
 Selanjutnya tentukan query untuk mendapatkan semua data dan mengeksekusinya. Hasil
querynya tentu saja bisa kosong, 1 baris, atau banyak baris data. Hasil eksekusi query
(recordset) ditampung dalam sebuah variabel (dalam hal ini bernama $hasil).
 Untuk menampilkan data, maka recordset dibaca satu per satu melalui perulangan yang
berlangsung selama data yang dibaca masih ada. Dengan menggunakan
mysqli_fetch_array(), maka setiap record aktif saat itu dimasukkan ke dalam suatu
array asosiatif dan enumeratif (dalam program itu diberi nama $arData).
 Setiap elemen array $arData diambil dan kemudian ditampilkan pada kolom tabel yang
sesuai. Seperti yang disebutkan sebelumnya, data tanggal dari mysql harus dibalik dulu
agar bisa tampil dengan format tanggal-bulan-tahun. Untuk mengambil setiap bagian
tanggal lahir, maka teks tanggal dari hasil SELECT diubah ke array dengan explode(),
lalu dituliskan sesuai urutan yang dikehendaki. Cara lain adalah menggunakan fungsi
date_format() sebagai berikut:
echo '<td>'.$arData['TempatLahir'].',
'.date_format(date_create($arData['TanggalLahir']), 'd-m-Y'). '</td>';
Jadi variabel $arData['TanggalLahir'] diubah dulu menjadi tipe date, dan
ditampilkan dalam format tanggal-bulan-tahun.

 Kolom terkanan tabel sementara diisi dengan “-“, nantinya akan diisi dengan informasi lain.
 Demikian seterusnya iterasi dilakukan sampai semua data selesai dibaca. Terakhir, koneksi
dengan mySQL ditutup dengan mysqli_close().
Iterasi dengan while pada kode tersebut akan berlangsung selama pembacaan record
hasil query masih berhasil. Untuk setiap iterasi, satu record dari hasil query akan diambil.
mysqli_fetch_array() menghasilkan array yang berisi record aktif saat itu, berupa
campuran associated dan enumerated array. Array ini bisa diakses dengan menyebutkan
nomor indeksnya (diawali dari 0) atau nama fieldnya. Bila menggunakan penyebutan indeks
berarti anda harus tahu bagaimana struktur recordset yang dihasilkan oleh SELECT.
Strukturnya bisa sesuai dengan tabel (bila query mengambil semua field dari tabel) atau
sesuai dengan urutan field dalam SELECT. Bila menggunakan penyebutan nama fieldnya
berarti anda harus tahu apa nama field di tabel (bila query mengambil semua field dari tabel)
atau sesuai dengan nama field dalam SELECT.
Script itu bisa dikembangkan untuk membuat form pencarian data. Dengan demikian
pada operasi SELECT harus dicantumkan juga syarat pencarian (misal berdasar NIM atau
nama atau yang lainnya).
File browsemhs.php tidak dipanggil secara langsung, tetapi dengan memanfaatkan link
yang ada. Modifikasilah file default.php untuk menambahkan kode pemanggilan
browsemhs.php (kode yang diubah adalah yang tercetak tebal).
Praktikum 8.9: Memanggil tampildata.php (file: default.php)

<div class="bg-white py-2 collapse-inner rounded">

<a class="collapse-item" href="?kode=entry">Entry data</a>
<a class="collapse-item" href="?kode=browse">Browse
data</a>
</div>
<?php
if (isset($_GET['kode']))
{ $kode = $_GET['kode'];
if ($kode == 'entry')
{ include('entrymhs.php');
}
else if ($kode == 'browse')
{ include('browsemhs.php');
}
}
?>

Cara pemanggilannya kurang lebih serupa dengan pemanggilan entrymhs.php, sekarang yang
menjadi identitas halaman adalah “browsemhs”, dan akan menyisipkan file browsemhs.php.
Gambar 8.6. Tampilan semua data di tabel
Data mahasiswa ditampilkan dalam format standar dan semua record ditampilkan.
Tentunya akan jadi tabel yang sangat panjang bila ada banyak data di tabel basis data. Ingin
yang lebih baik? Gunakan library dari DataTables (https://datatables.net/), yang merupakan
plug-in jQuery. Dengan library ini, data bisa diurutkan per kolom, difilter melalui search box,
dan dibuat pagination (keseluruhan data dibagi menjadi beberapa halaman). SBAdmin telah
menyediakan librarynya (ada di folder “vendor”), tetapi belum dimuat di default.php.
Pertama kali, modifikasilah file default.php untuk memuat css dan js milik datatables.
Praktikum 8.10: Memuat file css dan js untuk datatables (file: default.php)


<link href="css/sb-admin-2.min.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/datepicker/css/bootstrap-
datepicker3.css" />
<link rel="stylesheet"
href="vendor/datatables/dataTables.bootstrap4.min.css" />
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js">
</script>
</head>

Selanjutnya, file browsemhs.php dirombak. Disarankan ada memiliki salinan

browsemhs.php agar tidak kehilangan kode awalnya. Lakukan modifikasi dengan menghapus
semua kode php dan menambahkan script untuk memanggil script pencarian data.
Praktikum 8.11: Menampilkan semua data dengan datatable (file:

browsemhs.php)
<div class="box-body">
<div class="table-responsive">
<table id="tblMahasiswa" class="table table-striped table-bordered
table-hover">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>NIM</th>
<th>Nama</th>
<th>Tempat/tgl.lahir</th>
<th>Jen.kel</th>
<th>Prodi</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
var dataTable = $('#tblMahasiswa').DataTable( {
"processing": true,
"serverSide": true,
"bSort" : false,
"ajax":{
url :"getmhs.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".lookup-error").html("");
$("#tblMahasiswa").append('<tbody class="employee-grid-
error"><tr><th colspan="7">Data tidak
ditemukan</th></tr></tbody>');
$("#lookup_processing").css("display","none");
}
}
});
});
</script>
Apa yang ditampilkan kalau semua script dibuang? Pembacaan isi tabel mahasiswa akan
dilakukan pada script yang lain (dalam hal ini bernama getmhs.php). Pemanggilan script
getmhs.php dilakukan dari script jQuery pemanggilan datatables di default.php.
Tabel dengan id #tblMahasiswa selanjutnya dikenai method DataTables. Ada
beberapa atribut yang digunakan, antara lain serverSide yang menyatakan bahwa data

didapat dari server. Alamat script pencarian data ada di atribut url, dan method pengiriman
requestnya adalah post. Ada juga atribut error yang berisi function untuk menampilkan
pesan ketika terjadi error (misal saat ada error di query database).
File getmhs.php yang dipanggil berfungsi untuk membaca data dari tabel sesuai dengan
parameter yang dikirimkan melalui request. Bila tidak ada request apapun maka semua isi
tabel dikembalikan. Bila ada parameter lain berupa pemilihan banyaknya record per tabel,
keyword pencarian tertentu di search box, atau halaman tabel tertentu, barulah pencarian
dilakukan sesuai dengan kriteria itu. Berikut kode getmhs.php:
Praktikum 8.12: Membuat kode untuk membaca isi tabel (file: getmhs.php)
<?php
$requestData = $_REQUEST; // dapatkan semua parameter pencarian
// dapatkan banyaknya semua record

$sql = "SELECT count(*) FROM mahasiswa";
$data = mysqli_fetch_row($hasil);
$totalData = $data[0];
$totalFilter = $totalData;
// bila tidak ada parameter pencarian maka banyaknya baris hasil
filter ($totalFilter) adalah sama dengan banyaknya baris tanpa
filter ($totalData)
$parameter = $requestData['search']['value']; // isi search box

$start = $requestData['start']; // berisi nomor awal baris
$length = $requestData['length']; // berisi limit pencarian
if(empty($parameter)) // search box kosong

{ $sql = "SELECT NIM, Nama, TempatLahir, TanggalLahir, JenisKelamin,
Prodi ";
$sql .= " FROM Mahasiswa ";
$sql .= " LIMIT $start, $length";
}
else // ada isi di search box
{ $sql = "SELECT NIM, Nama, TempatLahir, TanggalLahir, JenisKelamin,
Prodi ";
$sql .= " FROM Mahasiswa ";
$sql .= " WHERE Nama LIKE '%$parameter%' ";
$sql .= " OR NIM LIKE '%$parameter%' ";
mysqli_error($koneksi)); // eksekusi query tanpa limit
$totalFilter = mysqli_num_rows($hasil);
// bila ada parameter pencarian maka banyaknya baris ($totalFilter)
sesuai dengan hasil pencarian yang ditemukan
$sql .= " LIMIT $start, $length";

mysqli_error($koneksi)); // eksekusi query dg limit
}
$data = array(); // array penampung data per tabel

$counter = $start + 1;
while($row = mysqli_fetch_row($hasil))
{ $nestedData = array(); // siapkan array penampung utk per baris
$nestedData[] = $counter;
$nestedData[] = $row[0];
$nestedData[] = $row[2].', '.$row[3];
$nestedData[] = '-';
$data[] = $nestedData;
$counter++;
}
$jsonData = array(
"draw" => intval($requestData['draw']),
// suatu angka yg dikirim method DataTable(), dan dikembalikan
// lagi ke DataTable()
"recordsTotal" => intval($totalData), // banyak record di tabel
"recordsFiltered" => intval($totalFilter), // banyaknya record
hasil pencarian, jika tidak ada pencarian maka $totalFilter =
$totalData
"data" => $data // array berisi data yang ditemukan
);
echo json_encode($jsonData); // kirim data dalam format json
?>
Alur proses:
 Semua request diambil dengan variabel global $_REQUEST, dimasukkan ke
$requestData. Ini adalah alternatif mendapatkan data, selain dengan $_POST atau
$_GET. $_REQUEST tidak membedakan method asalnya apakah POST atau GET, sehingga
lebih fleksibel.
 Query yang pertama kali dieksekusi adalah untuk menghitung berapa banyak record dalam
tabel dengan menggunakan COUNT(*). Hasil query dimasukkan ke variabel $totalData
dan $totalFilter (keduanya saat ini bernilai sama karena pencarian dilakukan tanpa
kriteria apapun). Ini nantinya digunakan untuk antara lain untuk menghitung berapa
banyak halaman yang harus disediakan, bila diketahui berapa record per halaman.
Alternatif dari penggunaan COUNT(*) adalah menggunakan fungsi PHP mysql_num_rows
untuk menghitung banyaknya record hasil query.
 3 parameter yang ada di $requestData diambil, yaitu dari
$requestData['search']['value'] (ke variabel $parameter), dari
$requestData['start'] (ke variabel $start), dan dari $requestData['length']
(ke variabel $length). Variabel $parameter berisi string yang ada di search box sebagai

kriteria pencarian, variabel $start berisi nomor record pertama yang akan ditampilkan di
suatu halaman (karena adanya pagination), dan $length adalah banyaknya record dalam
suatu halaman.
 Query selanjutnya adalah berdasar variabel $parameter. Bila kosong, maka query akan
menghasilkan semua record, dan bila tidak kosong maka query akan menghasilkan
sejumlah record yang sesuai kriteria pencarian. Dalam kode tersebut, parameter pencarian
digunakan untuk mencari NIM atau nama yang mengandung karakter yang ada di
parameter pencarian. Bila ada parameter pencarian, maka dihitung juga banyaknya record
yang sesuai dengan parameter (ada di variabel $totalFilter).
 Karena menggunakan pagination, maka query dieksekusi sekali lagi untuk mengambil
record tertentu yang sesuai dengan nomor awal record pada halaman itu (ada di variabel $
start), sebanyak baris tabel yang ditentukan (ada di variabel $length). Bila tidak
menggunakan parameter pencarian maka pembatasan record langsung digabungkan
dengan query pencarian.
 Setelah query dieksekusi, data dibaca dengan mysqli_fetch_row() dan setiap field
dimasukkan ke dalam array $nestedData. Sejumlah elemen $nestedData yang
menyatakan 1 record lalu dimasukkan ke array $data. Yang dimasukkan ke array tidak
harus sama dengan field yang dibaca, misalkan pada kode tersebut juga dimasukkan
nomor record. Pastikan apa yang ditampilkan sesuai dengan header tabel yang ada di
browsemhs.php Array $data inilah yang akan ditampilkan di tabel hasil.
 Setelah selesai membentuk array yang berisi data, selanjutnya dilakukan penggabungan
banyaknya record dalam tabel secara keseluruhan (dalam field “recordsTotal”), banyaknya
record yang dihasilkan dari query (dalam field “recordsFiltered”), serta suatu angka yang
dikirimkan dari client (dalam field “draw”), serta data hasil query (dalam field “data”).
Setelah dilakukan encoding menjadi data JSON, data inilah yang dikembalikan ke halaman
pemanggilnya.
 Pada file browsemhs.php, tabel dengan id #example ditampilkan dengan memanggil
method DataTable(). Hasilnya (bila dipanggil dari menu) bisa dilihat di Gambar 8.7.

Gambar 8.7. Tampilan semua data di tabel dengan DataTables
Pada bagian atas tabel ada penentuan berapa banyak record per halaman (di sebelah
kiri atas), dan isian keyword filter (di sebelah kanan atas). Masukkan satu atau lebih huruf,
maka script akan menampilkan record yang mengandung keyword itu. Pada bagian bawah,
ditunjukkan total record yang ada serta record ke berapa yang sedang ditampilkan (di sebelah
kiri bawah), dan link ke halaman tertentu (di sebelah kanan bawah).
8.5.4. Mengubah data
a. Query SQL
Data yang telah tersimpan di tabel bisa diubah dengan operasi UPDATE. Syaratnya
adalah kondisi record yang akan diubah harus ditentukan, karena bila tidak ada maka semua
record dalam tabel akan berubah. Bentuk umum query UPDATE:
UPDATE <namatabel>
SET <namafield>=<ekspresi> {, <namafield>=<ekspresi>}
[WHERE <kondisi>];
ekspresi adalah data baru yang akan direkam ke dalam field yang disebutkan di
namafield. kondisi adalah syarat penentuan record yang akan diubah. Banyaknya
ekspresi disesuaikan dengan banyaknya field yang akan diupdate.
Untuk mengetahui apakah perubahan berhasil atau tidak, bisa menggunakan function
mysqli_affected_rows(). Function ini akan menghasilkan berapa banyak record yang
terpengaruh oleh query itu.

Penentuan data yang akan diubah bisa dilakukan dengan berbagai cara. Salah satunya
adalah dengan memilih link yang dikaitkan dengan record tertentu (kurang lebih caranya

sama dengan saat anda akan membuka salah satu email dari sejumlah email yang ditampilkan
di inbox). Link sendiri bisa diwakili oleh button, dan bootstrap menyediakan ikon untuk
mewakili aksi yang dilakukan.
Modifikasilah kode getmhs.php dari pembahasan sebelumnya. Berikut ini perubahannya,
tambahkan kode yang tercetak tebal berikut (sebagian kode tidak ditampilkan untuk
meringkas tampilan).
Praktikum 8.13: Membuat link untuk edit data (file: browsemhs.php)

$nestedData[] = '<a href="?kode=edit&nim='.$row[0].'"><button
type="button" class="btn btn-primary">Edit</button></a>';

Kode tersebut mengisi kolom terkanan di tabel (awalnya berisi “-” ) dengan link
(berbentuk sebagai button) ke file default.php untuk memanggil file yang berkaitan dengan
pengubahan data. Pemanggilan dilakukan dengan membawa informasi kode halaman dan NIM
mahasiswa yang akan diubah. Informasinya diletakkan sebagai bagian dari URL pemanggilan
default.php, dipisahkan tanda “?”. Parameter bisa ditentukan sendiri namanya (dalam hal ini
adalah “nim” dan “kode”) dan diikuti oleh suatu nilai yang dipisahkan tanda “=” (dalam hal ini
nilainya adalah isi dari $row[0] yaitu isi field NIM dan “editmhs”). Beberapa parameter lain
bisa ditambahkan dalam URL, antar parameter dipisahkan tanda “&”. Dengan demikian
halaman untuk menampilkan semua data berubah seperti gambar 8.8.
Gambar 8.8. Tampilan semua data dengan button untuk Edit
Arahkan pointer mouse di atas setiap link, maka anda akan lihat nilai parameter yang

berbeda, yang disesuaikan dengan NIM dari setiap record mahasiswa yang ditampilkan.
Jangan diklik dulu, karena file yang dipanggil belum ditentukan
Yang mengenali kode halaman adalah default.php, sehingga tambahkan kode berikut di
default.php (kode tambahan tercetak tebal):
Praktikum 8.14: Memanggil editdata.php (file: default.php)

if (isset($_GET['page']))
{ ... // kode selanjutnya
else if ($kode == 'browse')
{ include('browsemhs.php');
}
else if ($kode == 'edit')
{ include('editmhs.php');
}
}

Selanjutnya tentang halaman untuk mengubah data yang diperlukan. Dasarnya adalah
page untuk entry data sebelumnya (file entrymhs.php praktikum 8.5). Simpanlah file
entrymhs.php menjadi editmhs.php. Susunan dan nama komponennya tetap sama.
Berikut kodenya, perubahan atau penambahan terletak pada kode yang tercetak tebal:
Praktikum 8.15: Membuat kode untuk menampilkan data tersimpan dan isian
untuk edit data (file: editmhs.php)
<?php
if (!isset($_GET['nim']))
{ die("<script>alert('Tentukan dulu data yang akan diubah!');
window.location.href = 'default.php?kode=browse'</script>");
}
$nim = $_GET['nim'];
$sql = "SELECT * FROM Mahasiswa WHERE NIM='$nim'";
if (mysqli_num_rows($hasil) == 0)
{ die("NIM $nim tidak ditemukan!");
}
$data = mysqli_fetch_row($hasil);
$aTgl = explode('-', $data[4]);
mysqli_close($koneksi);
?>
<h1>Edit Data Mahasiswa</h1>
<div class="row">
<div>
<form method="GET" name="formedit" id="formedit">

<input type="text" class="form-control" name="nim" id="nim"
value="<?php echo $data[0] ?>" readonly>
</div>
</div>
<input type="text" class="form-control" name="nama" id="nama"
value="<?php echo $data[1] ?>">
</div>
</div>
id="alamat" value="<?php echo $data[2] ?>">
</div>
</div>
<label class="radio-inline">
<input type="radio" value="L" name="jk" id="jk1" <?php echo
($data[5] == "L" ? "checked" : "") ?>>Laki-laki
</label>
<label class="radio-inline">
<input type="radio" value="P" name="jk" id="jk2" <?php echo
($data[5] == "P" ? "checked" : "") ?>>Perempuan
</label>
</div>
</div>
<label class="col-md-2 col-form-label">Tempat/tanggal lahir
</label>
id="tempat" value="<?php echo $data[3] ?>">
</div>
<input type="text" class="form-control" name="tgl" id="tgl"
value="<?php echo $tgl_lahir ?>">
</div>
</div>
<label class="col-md-2 col-form-label">Prodi</label>
<select class="form-control" name="prodi" id="prodi" size="1">
<option value="MAT" <?php echo ($data[6] == "MAT" ? "selected"
: "") ?>>Matematika</option>
<option value="PMAT" <?php echo ($data[6] == "PMAT" ?
"selected" : "") ?>>Pendidikan Matematika</option>
<option value="FIS" <?php echo ($data[6] == "FIS" ? "selected"

: "") ?>>Fisika</option>
<option value="PFIS" <?php echo ($data[6] == "PFIS" ?
"selected" : "") ?>>Pendidikan Fisika</option>
<option value="KIM" <?php echo ($data[6] == "KIM" ? "selected"
: "") ?>>Kimia</option>
<option value="PKIM" <?php echo ($data[6] == "PKIM" ?
"selected" : "") ?>>Pendidikan Kimia</option>
<option value="BIO" <?php echo ($data[6] == "BIO" ? "selected"
: "") ?>>Biologi</option>
<option value="PBIO" <?php echo ($data[6] == "PBIO" ?
"selected" : "") ?>>Pendidikan Biologi</option>
<option value="PIPA" <?php echo ($data[6] == "PIPA" ?
"selected" : "") ?>>Pendidikan IPA</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
startDate: '01-01-2000',
todayBtn: 'linked',
autoclose: true
});
$("#formedit").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "simpaneditmhs.php",
data: $("#formedit").serialize()
})
.done(function(hasilProses) {
bootbox.alert({
title: 'Hasil edit data',
message: hasilProses,
callback: function(result){
window.location.href = "default.php?kode=browse";
}
});
})
});

});
});
</script>
Alur proses edit data:
 Halaman sebelumnya (default.php) memanggil file ini dengan membawa informasi berupa
NIM dari record mahasiswa yang akan diubah. Untuk itu harus diperiksa, apakah atribut
URL yang bernilai “nim” memiliki nilai (dengan fungsi isset()). Bila tidak maka program
dihentikan dengan menampilkan alert, sedangkan bila ada maka dimasukkan ke variabel
$nim.
 Nilai yang ada di $nim digunakan untuk kondisi pencarian data dalam tabel Mahasiswa.
Recordset hasil query diambil dengan mysqli_fetch_row(). Hasil eksekusi query
diperiksa apakah ditemukan hasil atau tidak dengan fungsi mysqli_num_rows(). Bila
bernilai 0 maka data tidak ada dan ditampilkan alert, sedangkan bila menghasilkan nilai
lebih dari 0 maka record itu ada di tabel.
 Semua nilai yang didapat dari tabel dimasukkan ke komponen yang sesuai melalui atribut
value (untuk komponen text), selected (untuk komponen combobox), dan checked
(untuk komponen radio). Efeknya adalah semua nilai yang tersimpan di tabel akan
ditampilkan di komponen. Perhatikan penggunaan inline selection untuk meringkas
penulisan if pada isian Prodi dan Jenis Kelamin. NIM tidak diedit karena untuk acuan
penyimpanan data dan sifatnya sebagai key dalam tabel. NIM tetap ditampilkan dalam text
tetapi memiliki atribut readonly (tidak bisa diubah tetai tetap dikirimkan saat submit).
Alternatifnya, agar data yang tidak diubah tetap dikirimkan ke script saat submit, maka
bisa ditambahkan komponen hidden yang diberi nama nim. Perhatikan benar-benar
indeks array hasil pembacaan dari tabel. Bila SELECT menggunakan ‘*’ maka indeks array
menyesuaikan struktur tabel.
 Sama halnya dengan pengisian data, script diletakkan pada posisi akhir. Pada script
dilakukan pemanggilan file simpaneditmhs.php untuk menyimpan hasil edit.
Cobalah panggil default.php, tampilkan semua data dengan browse, dan pilih salah satu
baris untuk diedit. Gambar 8.9 menunjukkan tampilan bila salah satu record terpilih. Jangan
lakukan apapun dulu karena belum ada kode untuk menyimpan hasil edit.

Gambar 8.9. Tampilan data yang akan diubah
Setelah dilakukan pengubahan data dan tombol Simpan data ditekan, maka perubahan
disimpan dalam tabel Mahasiswa. Manfaatkan kode dari simpanmhs.php sebelumnya untuk
membuat file simpaneditmhs.php berikut ini. Perbedaan terletak query SQL (lihat kode
yang tercetak tebal):
Praktikum 8.16: Membuat kode untuk menyimpan hasil edit data (file:
simpaneditmhs.php)

// susun query
$query = "UPDATE MAHASISWA SET Nama='$nama', Alamat='$alamat',
TempatLahir='$tempat', TanggalLahir='$tgl_lahir',
JenisKelamin='$jk', Prodi='$prodi' WHERE NIM='$nim'";
if (!$hasil)
{ echo "Error: " . mysqli_error($koneksi); // tampilkan pesan
}
else if (mysqli_affected_rows($koneksi) == 0)
{ echo "Data tidak berubah";
}
else
{ echo "<table width='100%' border='0'>";

Prosesnya kurang lebih sama dengan penyimpanan data baru. Mula-mula ambil semua
isian yang dikirimkan oleh proses submit. Setelah penentuan koneksi ke mysql dan pemilihan
database, maka selanjutnya adalah penentuan query untuk update tabel. Update dilakukan
terhadap semua field, karena tidak dilakukan pendeteksian perubahan data apa yang terjadi.

Perhatikan bahwa field NIM tidak diubah karena dijadikan kondisi update (di klausa WHERE).
Pemeriksaan apakah data berubah atau tidak dilakukan dengan fungsi
mysqli_affected_rows(). Setelah data diubah, maka semua data ditampilkan dalam
bentuk modal, seperti halnya pada saat pengisian data baru.
Karena file simpaneditmhs.php hanya dipanggil dari page untuk pengubahan data,
maka jangan dipanggil secara langsung, pasti akan error (coba cari tahu, kenapa?).
8.5.5. Menghapus data
a. Query SQL
Data yang telah tersimpan di tabel tentunya juga bisa dihapus. SQL menyediakan
operasi DELETE. Bentuk umum query-nya:
DELETE FROM <namatabel>
[WHERE <kondisi>];
Bila WHERE tidak dicantumkan, maka seluruh record akan terhapus.

Untuk menentukan data yang akan dihapus, bisa digunakan cara yang serupa dengan
edit data, yaitu melalui page getmhs.php. Tambahkan kode berikut ini yang tercetak tebal
(kode lain tidak dituliskan):
Praktikum 8.17: Membuat link untuk menghapus data (file: getmhs.php)

while($row = mysqli_fetch_row($hasil))
{ ... // kode selanjutnya
$nestedData[] = '<a href="?kode=edit&nim='.$row[0].'"><button
type="button" class="btn btn-primary">Edit</button></a>
<a href=" javascript:KonfirmasiHapus('.$row[0].');"><button
type="button" class="btn btn-danger">Delete</button></a>';
$counter++;
}
Link “Hapus” diarahkan ke suatu function dengan nama KonfirmasiHapus(), dengan parameter
adalah NIM dari mahasiswa yang akan dihapus record-nya. Untuk bentuk linknya, sama
dengan untuk Edit yaitu berupa button.
Fungsi KonfirmasiHapus() diletakkan di browsemhs.php sebagai yang bertugas
menampilkan data mahasiswa. Letakkan kodenya diluar $(document).ready().
Praktikum 8.18: Membuat script KonfirmasiHapus() (file: browsemhs.php)

function KonfirmasiHapus(x)

{ bootbox.confirm({
title: "Konfirmasi",
message: "NIM " + x + " dihapus?",
if (result == true)
{ $.ajax({
type: "GET",
url: "hapusmhs.php",
data: { "nim" : x },
})
.done(function(hasilProses) {
bootbox.alert({
title: "Hasil penghapusan",
message: hasilProses,
window.location.href = "default.php?kode=browse";
}
});
})
.fail(function(jqXHR, textStatus) {
});
}
}
});
}

Function KonfirmasiHapus() berisi pemanggilan kotak dialog untuk konfirmasi
penghapusan. Method .confirm() memiliki 2 atribut: title dan message, serta callback
untuk mendefinisikan aksi yang dilakukan setelah ada tombol yang dipilih oleh pengguna
(confirm ini terdiri dari 2 button: Ok dan Cancel). Bila Ok yang dipilih, proses penghapusan
dilakukan, dengan memanggil file hapusmhs.php melalui ajax. Parameternya adalah “nim”
yang disusun secara manual (tidak menggunakan serialize). Output dari hapusmhs.php
(ada di parameter hasilProses) ditampilkan dalam bentuk alert dari bootbox, seperti pada
saat input data dan edit data. Pada alert ditambahkan atribut callback yang berisi
pernyataan untuk redirect ke halaman yang menampilkan semua data mahasiswa, untuk
menunjukkan bahwa penghapusan berhasil. Redirect dilakukan setelah penekanan tombol Ok.
Isi file hapusmhs.php bisa dimodifikasi dari script yang ada di editmhs.php, dengan
beberapa modifikasi berikut:
Praktikum 8.19: Membuat script untuk menghapus data di tabel (file:

hapusmhs.php)
<?php
{ die("<script>alert('Tentukan dulu data yang akan dihapus!');

window.location.href = 'default.php?kode=browse'</script>");
}
$sql = "SELECT * FROM mahasiswa WHERE NIM='$nim'";
}
$sql = "DELETE FROM Mahasiswa WHERE NIM='$nim'";
if (mysqli_affected_rows($koneksi) > 0)
{ echo "NIM $nim berhasil dihapus";
}
else
{ echo "NIM $nim gagal dihapus";
}
?>
Alur proses hapus data:
 Halaman sebelumnya (default.php) memanggil file ini dengan membawa informasi berupa
NIM dari record mahasiswa yang akan diubah. Untuk itu harus diperiksa, apakah atribut
URL yang bernilai “nim” memiliki nilai (dengan fungsi isset()). Bila tidak maka program
dihentikan dengan menampilkan alert, sedangkan bila ada maka dimasukkan ke variabel
$nim.
 Nilai yang ada di $nim digunakan untuk kondisi query menghitung banyaknya record yang
sesuai. Recordset hasil query dihitung banyaknya dengan mysqli_num_rows(). Bila
banyaknya record adalah 0 maka data yang sesuai tidak ada dan ditampilkan alert (kalau
akses penghapusan melalui button di tabel hasil browsemhs.php tentu tidak akan mungkin
tidak ada data).
 Selanjutnya adalah proses penghapusan data di tabel dengan menggunakan query DELETE
FROM. Banyaknya record yang terpengaruhi oleh query dilihat dengan
mysqli_affected_rows(). Bila lebih dari 0 maka penghapusan berhasil.
Untuk melihat hasilnya, panggillah default.php, kemudian tampilkan semua data.

Berikut contoh tampilannya:

Gambar 8.10. Tampilan semua data dengan ikon untuk Edit dan Hapus
Klik pada button untuk menghapus salah satu data mahasiswa. Ketika link dipilih akan tampil
kotak konfirmasi untuk memastikan apakah record dihapus atau tidak. Bila dipilih OK maka
proses penghapusan dilakukan.
Gambar 8.11. Konfirmasi penghapusan

Gambar 8.12. Pesan penghapusan berhasil
8.5.6. Impor-ekspor data

Mungkin diperlukan perpindahan data dari satu komputer ke komputer lain, yang bisa
jadi berbeda versi DBMSnya atau bahkan berbeda produk DBMSnya. Sarana untuk melakukan
hal ini adalah fasilitas import-export. Suatu basis data diekspor ke format SQL yang dikenal
oleh semua DBMS, dan di komputer tujuan hasil ekspor ini bisa diimpor untuk dimasukkan ke
DBMS yang ada.
Praktikum 8.20: Melakukan ekspor basis data

2. Pilih salah satu basis data yang akan diekspor (dari daftar di sisi kiri), yang selanjutnya
memunculkan daftar tabel di dalam basis data
3. Pilih tab Export, pastikan diekspor ke format SQL.
4. Pilih “Custom – display all possible options”, lalu centanglah “Add CREATE DATABASE /
USE statement”. Ini bertujuan agar database ikut terekspor.
5. Klik Go, maka hasil ekspor akan tersimpan di dalam suatu file.
Praktikum 8.21: Melakukan impor basis data

2. Klik tab Import, klik Browse, lalu pilihlah file hasil export sebelumnya
3. Klik Go, maka terbentuk basis data dan tabel baru yang sudah berisi data
4. Apabila anda tidak melakukan langkah 4 di praktikum 8.20 maka pada saat ekspor maka
anda harus membuat basis data secara manual, selanjutnya melakukan impor file.

9. UPLOAD FILE
Contoh yang disajikan untuk operasi basis data pada bab sebelumnya adalah data teks.
Mungkin kita perlukan data berupa image, misalnya untuk foto masing-masing mahasiswa,
atau pada saat memerlukan file yang diunggah (misal file tugas berupa dokumen MS Word).
Ada dua pendekatan yang bisa dilakukan yaitu (1) meletakkan filenya pada suatu folder
khusus, dan (2) memasukkan data ke salah satu field di dalam tabel basis data. Keduanya
memerlukan proses yang sama yaitu upload file. Cara pertama lebih mudah dan lebih umum
diimplementasikan. Antara kedua cara ini tidak perlu diimplementasikan bersamaan, pilih
salah satu saja.
9.1. Komponen FILE

Komponen yang digunakan untuk melakukan upload adalah FILE, bentuknya adalah text
dan button. Ketika button diklik maka akan muncul kotak dialog pemilihan file dan setelah
dipilih maka nama file akan ditampilkan di text.
Setelah yang file akan di-upload ditentukan dan dilakukan proses submit, maka file
tersebut akan disimpan di server sebagai file temporer. Informasi file terletak di variabel
global $_FILES yang berbentuk array. Walaupun metode pengiriman di form adalah POST,
untuk file diambil dari $_FILES, bukan $_POST. Parameter pertama variabel $_FILES adalah
nama komponen input file di form, dan indeks berikutnya bisa salah satu dari berikut ini:
Konstanta Arti
$_FILES["kompfile"]["name"] nama file yang di-upload
$_FILES["kompfile"]["type"] type file yang di-upload
$_FILES["kompfile"]["size"] ukuran file yang di-upload (dalam byte)
$_FILES["kompfile"]["tmp_name"] nama file temporer yang tersimpan di server
$_FILES["kompfile"]["error"] error code yang dihasilkan dari proses upload
kompfile disini adalah nama komponen bertipe file yang ada di form. Proses selanjutnya
tergantung kepada bentuk penggunaan datanya, apakah disimpan di tabel atau disalin ke
suatu folder.
Setelah proses upload, maka dilakukan pemeriksaaan apakah upload berhasil atau tidak,
melalui variabel $_FILES["kompfile"]["error"]. Penyebab kegagalan bisa beberapa hal,
antara lain karena masalah koneksi, tidak ada file yang diunggah, atau gagal menyimpan di
folder temporer. Variabel ini mengembalikan suatu nilai yang menunjukkan kode hasil upload,
yaitu salah satu dari berikut ini:
Konstanta Value Arti
UPLOAD_ERR_OK 0 Tidak ada error, upload berhasi
UPLOAD_ERR_INI_SIZE 1 Ukuran file yang di-upload melebihi ukuran
maksimum yang ditentukan di direktif
upload_max_filesize di php.ini
UPLOAD_ERR_FORM_SIZE 2 Ukuran file yang di-upload melebihi ukuran

Konstanta Value Arti
maksimumyang ditentukan di direktif
MAX_FILE_SIZE di form HTML
UPLOAD_ERR_PARTIAL 3 Hanya sebagian file yang ter-upload
UPLOAD_ERR_NO_FILE 4 Tidak ada file yang diupload
UPLOAD_ERR_NO_TMP_DIR 6 Tidak ada folder temporer
UPLOAD_ERR_CANT_WRITE 7 Gagal menulis file ke disk
UPLOAD_ERR_EXTENSION Suatu ekstensi PHP menghentikan proses upload
Kasus yang akan dibahas adalah penambahan foto setiap mahasiswa. Ada sejumlah
pengubahan yang dilakukan pada script pengisian data (entrymhs.php) dan script untuk
penyisipan data ke tabel (simpanmhs.php) pada bab sebelumnya. Untuk form pengisian data,
perhatikan perubahan dan tambahan bagian yang tercetak tebal (sebagian kode yang lain
tidak dituliskan). Komponen file ditambahkan di atas button untuk submit.
Praktikum 9.1: Membuat kode untuk komponen FILE (file: entrymhs.php)


<label class="col-md-2 col-form-label">File foto:</label>
<input type="file" class="form-control-file" name="foto"
id="foto">
<p class="help-block">File yang bisa diunggah hanya bertipe
{jpg, jpeg, png, gif}, dengan ukuran maksimum 1 MB.</p>
</div>
</div>
</div>
</div>
$("#formisi").submit(function(e){
e.preventDefault();
var namafile = $("#foto").val().toLowerCase();// ambil nama file
if (namafile.length == 0) // periksa apa ada yg diupload
{ bootbox.alert({
title: "Error",
message: 'Tidak ada file yang diupload !'
});
return false;
}
// ambil ekstensi file
var ext = namafile.substring(namafile.lastIndexOf('.')+1);
var aExt = ['jpg','jpeg','gif','png']; // ekstensi yg dibolehkan
if (aExt.indexOf(ext) == -1) // apakah ekstensi ada di array?
{ bootbox.alert({
title: "Error",
message: namafile + ' bukan file image !'
});

return false;
}
var ukuran = $("#foto")[0].files[0].size; // dapatkan ukuran file
if (ukuran > 1048576)
{ bootbox.alert({
title: "Error",
message: 'Ukuran file lebih dari 1 MB !'
});
return false;
}
var formdata = new FormData($('#formisi')[0]); // ambil isi form

type: "POST", // method
url: "simpanmhs.php", // file yg dipanggil
data: formdata,
enctype: "multipart/form-data", // encoding type
processData: false,
contentType: false
})
.done(function(hasil){

Hal yang ditambahkan di form adalah komponen file untuk memilih file yang akan diupload
(dengan id #foto).
Alur proses upload image diawali dengan serangkaian validasi:
 Dapatkan nama file yang diupload, dengan mengambil dari value komponen #foto. Bila
nama file memiliki panjang 0, berarti tidak ada yang diupload, proses dihentikan
 Selanjutnya dari nama file yang telah didapatkan, diambil serangkaian karakter setelah
tanda titik terakhir (sebagai ekstensi yang menunjukkan jenis file). Bila teks yang
dihasilkan tidak ada dalam array daftar ekstensi yang valid, maka proses dihentikan.
 Validasi berikutnya diawali dengan mendapatkan ukuran file dari komponen #foto. Bila
ukurannya lebih dari 1048576 byte (1 MB) maka proses dihentikan.
 jQuery tidak bisa secara langsung membaca data non tekstual (data selain yang diisikan
atau dipilih, misalnya berupa isi suatu file) dengan menggunakan serialize(). Untuk itu
digunakan obyek FormData() untuk membaca semua isi komponen termasuk data non
tekstual ini.
 Pada option ajax(),value untuk data diubah dengan mengacu ke variabel formdata,
menambahkan option enctype, processData, dan contentType. Selanjutnya request
dikirim ke simpanmhs.php. Opsi "multipart/form-data" adalah untuk menunjukkan
bahwa konten form tidak hanya data tekstual, tapi juga data biner.

Gambar 9.1. Penambahan komponen file
9.2. Penyimpanan file ke suatu folder

Cara ini lebih umum digunakan untuk file yang diunggah, dengan meletakkan file pada
suatu folder khusus, dan hanya informasi yang terkait dengan file saja yang disimpan di tabel
(misal nama file, nama folder, dan tipe file). Filenya bisa berjenis apapun (image, dokumen
PDF, dan lainnya)
9.2.1. Menyisipkan data baru

Script berikut ini adalah modifikasi dari script simpandata.php. Pertama kali, buatlah
folder untuk menampung hasil upload di bawah home directory (misal dengan
nama “upload”). Anda sebenarnya bisa saja tentukan lokasi atau nama folder yang berbeda,
tetapi untuk mudahnya kita gunakan cara ini. Untuk menghubungkan data file yang diunggah
dengan record tertentu sebagai pemiliknya, nama file akan disimpan di field ‘Foto’ yang telah
dibuat sebelumnya. Tambahkan kode tercetak tebal berikut di simpandata.php:
Praktikum 9.2: Membuat kode untuk menyimpan image ke suatu folder (file:
simpanmhs.php)
$foto = $_FILES['foto']; // 'foto' adalah nama komponen file
$pesan = array(1=>'Ukuran file terlalu besar', 2=>'Ukuran file
terlalu besar', 3=>'Proses upload gagal', 4=>'Tidak ada file yang
diunggah', 6=>'Folder temporer tidak ada', 7=>'Gagal menulis ke
disk');
if ($foto["error"] > 0)
{ die("Error: ".$pesan[$foto["error"]]);
}
$ext = pathinfo($foto['name'], PATHINFO_EXTENSION);

$fileBaru = "$nim.$ext"; // tentukan nama file
// pindahkan file dari folder temporer ke folder upload
$hasil = move_uploaded_file($foto["tmp_name"], "upload/$fileBaru");
if (!$hasil)
{ die("Error: Gagal upload $fileBaru ke server");
}
// susun query
TanggalLahir, JenisKelamin, Prodi, Foto) VALUES ('$nim', '$nama',
'$alamat', '$tempat','$tgl_lahir','$jk','$prodi', '$fileBaru')";

echo "<tr><td>Foto:</td> <td><img src='upload/$fileBaru' class='img-
thumbnail'/></td> </tr>";
echo "</table>";
?>
Alur proses penyimpanan image ke folder:
 Semua informasi yang berkaitan dengan file diambil dari komponen “foto” dan dimasukkan
dalam variabel $foto. File yang diterima tersimpan sebagai file temporer di folder milik
server.
 Berikutnya file temporer yang ada di server diperiksa apakah mengalami error saat upload
atau tidak. Bila ada error (kode error > 0) maka ada pesan yang ditampilkan (didefinisikan
di array $pesan) dan proses dihentikan.
 Selanjutnya ditentukan nama file yang akan disimpan. File yang diunggah akan di-rename
sesuai dengan NIM, agar berbeda dengan file mahasiswa lain. Aturan penamaan ini
ditentukan sendiri oleh pemrogram, atau bisa juga tanpa mengubah nama file aslinya.
 File yang ada di folder temporer di server dipindah ke folder penyimpanan file yang telah
ditentukan sebelumnya, dengan perintah move_uploaded_file(). Proses upload
mungkin saja mengalami kegagalan misalnya karena folder tidak ada, atau tidak ada hak
akses untuk menulis ke folder tujuan. Bila ada kegagalan, maka proses dihentikan.
 Nama file disimpan di tabel pada field Foto sebagai keterangan tambahan dari mahasiswa
itu.
 Untuk menampilkan file hasil upload, bisa digunakan elemen <img> yang langsung
mengacu ke file yang diunggah. Bootstrap memungkinkan pembuatan thumbnail dari suatu
image dengan menambahkan class img-thumbnail pada <img>. Tidak benar-benar
thumbnail, tapi me-resize image sesuai dengan lebar container-nya.
Dengan cara ini maka semua foto tersimpan di suatu folder, dengan kelebihan bahwa
mudah untuk ditampilkan (misalnya bisa dibuat sebagai galeri foto). Konsekuensi dari
penyimpanan data adalah folder dan file harus dijaga keberadaannya, jangan sampai terhapus

atau file tidak tercopy ke folder. Konsekuensi lain adalah bila anda melakukan penghapusan
data mahasiswa, seharusnya foto yang terupload di suatu folder juga harus dihapus.
Gambar 9.2. Preview gambar hasil upload
9.2.2. Mengubah data

Kalau pada input data baru sudah memasukkan bisa memasukkan file, tentunya pada
proses edit dimungkinkan hal yang sama. Teks dengan mudah diganti, seharusnya demikian
pula untuk foto. Proses sebenarnya sama dengan input, yaitu memilih foto dan
menyimpannya ke folder dan nama filenya ke tabel. Buka kembali file editmhs.php,
tambahkan kode berikut yang tercetak tebal untuk menampilkan image yang telah tersimpan
di folder, untuk pengaturan file yang diunggah, dan untuk pengiriman data ke script.
Praktikum 9.3: Membuat kode untuk menampilkan image di halaman edit data
(file: editmhs.php)

<label class="col-md-2 col-form-label">Foto:</label>
<img src='upload/<?php echo $data[7] ?>' class="img-thumbnail">
<input type="hidden" name="fotolama" id="fotolama" value="<?php
echo $data[7] ?>" />
</div>
</div>
<label class="col-md-2 col-form-label">Foto baru:</label>
<input type="file" class="form-control-file" name="fotobaru"
id="fotobaru">
<p class="help-block">File yang bisa diunggah hanya bertipe
{jpg, jpeg, png, gif}, dengan ukuran maksimum 1 MB.</p>
</div>

</div>
</div>
</div>
... // kode lainnya
$("#formedit").submit(function(e){
var namafile = $("#fotobaru").val().toLowerCase();//nama file
if (namafile != '' ) // jika ada file diunggah
{ var ext = namafile.substring(namafile.lastIndexOf('.')+1);
var aExt = ['jpg','jpeg','gif','png']; // ekstensi yg dibolehkan
// apakah file ada dan ekstensi ada di array?
if (aExt.indexOf(ext) == -1)
{ bootbox.alert({
title: "Error",
message: namafile + ' bukan file image !'
});
return false;
}
// cek ukuran file
var ukuran = $("#fotobaru")[0].files[0].size;
if (ukuran > 1048576)
{ bootbox.alert({
title: "Error",
message: 'Ukuran file lebih dari 1 MB !'
});
return false;
}
}
var formdata = new FormData($('#formedit')[0]); // isi form
$.ajax({
type: "POST",
url: "simpaneditmhs.php",
data: formdata, // serialize data di form
enctype: "multipart/form-data", // encoding type
processData: false,
contentType: false
})

Penambahan yang dilakukan adalah untuk menampilkan foto yang telah diupload, dan
menampilkan komponen pemilihan foto yang baru. Untuk menandai nama file lama,
digunakan komponen hidden dengan nama “fotolama”, dan komponen pemilihan foto dengan
nama “fotobaru”. Elemen <img> menggunakan class .img-thumbnail dan ukuran kolom
diatur dg class .col-md-4.
Di kode Javascript, digunakan pemeriksaan file yang sama dengan saat input, yaitu

memeriksa ekstensi nama file, dan memeriksa ukuran file. Keberadaan file tidak diperiksa,
karena perubahan data tidak selalu mengubah data image. Data yang dikirimkan dan properti
pemanggilan ajax menggunakan kode yang sama dengan entrymhs.php, sesuaikan nama
form untuk pembentukan obyek FormData. Tambahan lain adalah callback untuk mengalihkan
halaman ke tampilan browse semua data, setelah alert ditampilkan.
Perubahan selanjutnya adalah pada saat penyimpanan hasil edit. Buka file
simpaneditmhs.php dan lakukan perubahan berikut:
Praktikum 9.4: Menyimpan data image hasil edit (file: simpaneditdata.php)

$fotoLama = $_POST['fotolama'];
$fotoBaru = $_FILES['fotobaru'];
$pesan = array(1=>'Ukuran file terlalu besar', 2=>'Ukuran file
terlalu besar', 3=>'Proses upload gagal', 4=>'Tidak ada file yang
diunggah', 6=>'Folder temporer tidak ada', 7=>'Gagal menulis ke
disk');
if ($fotoBaru["error"] == 4) // jika tidak ada yg diupload
{ $query = "UPDATE MAHASISWA SET Nama='$nama', Alamat='$alamat',
JenisKelamin='$jk', Prodi='$prodi' WHERE NIM='$nim'";
$namaFile = $fotoLama;
}
else if ($fotoBaru["error"] == 0) // jika tidak ada error
{ if (($fotoLama != '') && file_exists("upload/$fotoLama")) //
apakah file lama ada?
{ unlink("upload/$fotoLama"); // hapus file lama
}
$ext = pathinfo($fotoBaru['name'], PATHINFO_EXTENSION);
$namaFile = "$nim.$ext"; // tentukan nama file
// pindahkan file dari folder temporer ke folder upload
$hasil = move_uploaded_file($fotoBaru["tmp_name"],
"upload/$namaFile");
if (!$hasil)
{ die("Error: Gagal upload $namaFile ke server");
}
$query = "UPDATE MAHASISWA SET Nama='$nama', Alamat='$alamat',
JenisKelamin='$jk', Prodi='$prodi', Foto='$namaFile' WHERE
NIM='$nim'";
}
else
{ die("Error: ".$pesan[$fotoBaru["error"]]);
}

... // kode lainnya
echo "<tr><td>Prodi:</td><td>$prodi</td></tr>";

echo "<tr><td>Foto:</td> <td><img src='upload/$namaFile'
class='img-thumbnail' /></td> </tr>";
echo "</table>";
}
mysqli_close($koneksi); // tutup koneksi */
?>
Ada sejumlah perubahan kode yang dilakukan yang pada dasarnya serupa dengan yang
dilakukan saat input data baru. Isi komponen fotobaru diambil dan diperiksa apakah ada
yang diupload (kode error 4). Bila tidak ada yang di-upload (misal karena memang tidak
mengubah file image sebelumnya), maka disusun query tanpa menyertakan update nama file.
Query yang digunakan adalah query lama dari kode simpaneditmhs.php sebelumnya. Nama
file yang digunakan adalah nama file yang ada saat ini, yang diambil dari komponen
fotolama. Bila ada yang diunggah (kode error 0) maka dilakukan penghapusan file yang
lama (dengan unlink), pembentukan nama file yang baru, pemindahan file temporer ke
folder upload, dan penyusunan query yang menyertakan update nama file. Nama file yang
digunakan adalah nama file yang baru.
Terakhir, pada akhir data yang ditampilkan, ditambahkan pernyataan untuk
menampilkan image, dengan nama yang didapat dari nama file yang sudah ada ataupun
nama file yang baru, tergantung dari aksi yang dilakukan.
9.2.3. Menghapus data

Untuk penghapusan, tentunya bila data seseorang dihapus, maka fotonya harus dihapus
pula dari folder tempat penyimpanannya. Modifikasilah file hapusmhs.php berikut ini untuk
memasukkan kode penghapusan file
Praktikum 9.5: Menghapus file image (file: hapusmhs.php)

}
$arData = mysqli_fetch_row($hasil);
$namaFile = $arData[7];
if (file_exists("upload/$namaFile")) // apakah file ada?
{ unlink("upload/$namaFile"); // hapus file lama
}
$sql = "DELETE FROM Mahasiswa WHERE NIM='$nim'";

Script untuk pemeriksaan keberadaan data yang dihapus bisa dimanfaatkan untuk
mendapatkan nama file. Yang dilakukan berikutnya adalah mencari nama file yang terkait
dengan mahasiswa tersebut. Bila ada, maka file dihapus dengan pernyataan unlink.
Selanjutnya dilakukan penghapusan record seperti kode aslinya.

9.3. Penyimpanan isi file ke dalam tabel
mySQL menyediakan satu tipe data yang bisa digunakan untuk memasukkan data biner
(misal untuk image, audio, video), yaitu tipe BLOB (Binary Large Object). Tipe ini masih
dibedakan menurut ukuran data yang dimasukkan yaitu tinyblob, mediumblob, dan longblob.
Bagian ini akan menunjukkan pemanfaatan tipe tersebut untuk menyimpan data biner. Anda
cukup implementasikan salah satu cara di sub bab 9.2 lalu atau 9.3 ini, jangan
implementasikan keduanya.
Pertama kali, tambahkan field baru ke tabel Mahasiswa, beri nama “foto”
dengan tipe longblob (pastikan belum ada field dengan nama ini). Proses awalnya upload
sama dengan praktikum sebelumnya. Setelah proses submit, maka file tersimpan di folder
temporer di server. Proses selanjutnya yang berbeda. File temporer lalu dibuka dalam mode
read (dengan fopen()), dibaca isinya (dengan fread()), dan dimasukkan ke suatu variabel
untuk nantinya disimpan dalam tabel. Pada saat pembacaan isi file, beberapa karakter
tertentu ditambah dengan backslash (“\”) membentuk escape sequence karena nantinya isi
file disimpan sebagai teks dan menghindari peluang timbulnya kesalahan pada pembacaan
berikutnya. Setelah ditambah backslash maka hasil pembacaan isi file siap disimpan di tabel.
Berikut ini modifikasi kode file simpandata.php, perhatikan yang tercetak tebal. Yang
dimodifikasi adalah simpanmhs.php hasil dari bab 8, bukan dari sub bab 9.2.
Praktikum 9.6: Membuat kode untuk menyisipkan image ke tabel (file:

simpanmhs.php)
$foto = $_FILES['foto'];
if ($foto["error"] > 0)
{ die("Error: " . $foto["error"]);
}
$tmpName = $foto['tmp_name']; // dapatkan nama file temporer
$fp = fopen($tmpName,'r'); // buka file temporer
$dataImage = fread($fp,filesize($tmpName)); // baca isi file
$dataImage = addslashes($dataImage); // tangani backslash
fclose($fp); // tutup filenya
unlink($tmpName); // hapus file temporer
... // kode lainnya

TanggalLahir, JenisKelamin, Jurusan, Foto) VALUES ('$nim',
'$nama', '$alamat', '$tempat','$tgl_lahir','$jk','$jurusan',
$dataImage)";
... // kode lainnya

echo "<tr><td>Foto:</td> <td><img src='tampilfoto.php?nim=$nim'
class='img-thumbnail'/> </td></tr>";

echo "</table>";
?>
Bila tidak ada error dan berhasil melakukan penyisipan data baru, maka image
ditampilkan dalam kotak dialog. Image didapatkan dari hasil pemanggilan file tampilfoto.php
dengan atribut pengenal berupa NIM. Isi file tampilfoto.php adalah sebagai berikut:
Praktikum 9.7: Membuat kode untuk membaca data image dari tabel (file:
tampilfoto.php)
<?php
{ die("Tentukan dulu NIM-nya! ");
}
require("koneksi.php");
$query = "SELECT foto FROM mahasiswa WHERE NIM='$NIM'";
$hasil = mysqli_query($koneksi, $query) or
die(mysqli_error($koneksi));
$data = mysqli_fetch_array($hasil);
if (empty($data[0]))
{ echo "<script>alert('Tidak ada foto yang terupload!') </script>";
}
else
{ header("Content-type: image/jpeg");
echo $data[0];
}
?>
Mula-mula dicari dulu record mahasiswa sesuai dengan NIM yang dikirimkan. Bila data
ada dan ada image yang tersimpan maka akan dibentuk output berupa image bertipe jpeg
(asumsi: yang diunggah adalah image bertipe jpeg). Output adalah isi field foto. Untuk
mengantisipasi kesalahan maka isi field foto ($data[0]) dilihat apakah kosong atau tidak.
Bila kosong maka akan ada pesan yang ditampilkan.
Isi field foto ditampilkan sebagai image, ini ditandai dengan definisi header bahwa
content bertipe image/jpeg. Konsekuensinya, jangan memberi kode apapun sebelum <?php,
dan setelah ?> karena akan terikut sebagai output, yang justru menyebabkan data tidak
dikenal sebagai data image.
Dengan demikian, kelebihan cara penyimpanan image ke dalam tabel adalah semua
foto tersimpan di tabel. Konsekuensi dari penyimpanan data adalah ukuran file tabel yang
menjadi besar. Tetapi penamaan file tidak menjadi masalah karena record penyimpanan yang
berbeda.
Untuk proses edit dan penghapusan data, silahkan disesuaikan sendiri. Yang pasti, tidak
ada pemeriksaan keberadaan file dan penghapusan file seperti halnya upload image ke folder.

PHP-2019 (Bab 1-9) PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

PHP-2019 (Bab 1-9) PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Darmawan Satyananda

Pemrograman Web 2017 – Darmawan Satyananda ii

Pemrograman Web 2017 – Darmawan Satyananda iii

1.1. Sistem komunikasi antara client dengan server

Gambar 1.1. Mekanisme komunikasi antara client dan server

Pemrograman Web 2019 – Darmawan Satyananda 1

1.2. HTML sebagai ”bahasa” penyusun halaman web

Pemrograman Web 2019 – Darmawan Satyananda 2

1.3. Client-side scripting dan server-side scripting

Pemrograman Web 2019 – Darmawan Satyananda 3

Pemrograman Web 2019 – Darmawan Satyananda 4

2.1. Apakah PHP Itu?

Pemrograman Web 2019 – Darmawan Satyananda 5

2.2. Struktur Skrip PHP

Pemrograman Web 2019 – Darmawan Satyananda 6

Pemrograman Web 2019 – Darmawan Satyananda 7

Pemrograman Web 2019 – Darmawan Satyananda 8

2.4. Tipe data

2.4.1. Tipe Data Skalar

2.4.2. Tipe Data Gabungan

2.5. Typecasting dan juggling

Pemrograman Web 2019 – Darmawan Satyananda 9

$total = 100; // integer

Pemrograman Web 2019 – Darmawan Satyananda 10

Pemrograman Web 2019 – Darmawan Satyananda 11

2.7.2. Operator aritmatika

2.7.4. Operator pembandingan (relasional)

Pemrograman Web 2019 – Darmawan Satyananda 12

Pemrograman Web 2019 – Darmawan Satyananda 13

2.8. Menampilkan teks ke browser

Pemrograman Web 2019 – Darmawan Satyananda 14

Pemrograman Web 2019 – Darmawan Satyananda 15

Pemrograman Web 2019 – Darmawan Satyananda 16

3.1. Pemilihan kondisi

3.1.1. if-else if-else

if ($Harga >= 1000000) // contoh if - else

if ($Skor >= 85) // contoh if – else if (if berjenjang)

Pemrograman Web 2019 – Darmawan Satyananda 17

Pemrograman Web 2019 – Darmawan Satyananda 18

Pemrograman Web 2019 – Darmawan Satyananda 19

Pemrograman Web 2019 – Darmawan Satyananda 20

Pemrograman Web 2019 – Darmawan Satyananda 21

3.3. Perulangan rangkap

Pemrograman Web 2019 – Darmawan Satyananda 22

Pemrograman Web 2019 – Darmawan Satyananda 23

Gambar 3.1. XAMPP control panel.

Praktikum 3.1: Membuat kode untuk penentuan nilai (file: skorlulus.php)

Pemrograman Web 2019 – Darmawan Satyananda 24

Gambar 3.2. Pemanggilan script PHP di browser

Pemrograman Web 2019 – Darmawan Satyananda 25

Praktikum 3.2: Membuat kode untuk menampilkan faktor (file: faktor.php)

Pemrograman Web 2019 – Darmawan Satyananda 26

Pemrograman Web 2019 – Darmawan Satyananda 27

Pemrograman Web 2019 – Darmawan Satyananda 28

<input type="reset" name="namakomponen" id="identitas"

<button type="reset" name="namakomponen" id="identitas"

Pemrograman Web 2019 – Darmawan Satyananda 29

Gambar 4.1. Tampilan komponen TEXT

Praktikum 4.1: Membuat kode untuk pengisian data (file: formisi.php)

Pemrograman Web 2019 – Darmawan Satyananda 30

Praktikum 4.2: Membuat kode untuk menampilkan data isian (file:

Pemrograman Web 2019 – Darmawan Satyananda 31

Perhatikan isi address bar di browser: