: 


Pengertian Website, Bagaimana Dapat Mengakses Situs Website, Apa yang 

di Pelajari, dan Persiapan Lingkungan 

1.1 Pengertian Website 

Pada dasarnya, web adalah skumpulan computer yang saling ter-

koneksi dan berbicara satu sama lain. Komputer-komputer biasanya ter-

koneksi melalui jaringan telpon, signal satelit kabel, dan tipe data tranfer 

lainnya. Data tranfer dapat disederhanakan sebagai cara untuk memin-

dahkan informasi dari poin A ke poin B ke poin C dan seterusnya. 

Komputer-komputer di dalam satu jaringan dapat saja terkoneksi 24  

jam, atau bisa juga hanya terkoneksi pada saat-saat tertentu. Komputer-

komputer yang terkoneksi terus selama 24  jam pada umumnya disebut 

server. Server adalahkomputer-komputer sama saja seperti yang mungkin 

kamu gunakan sekarang dalam membaca artikel ini. Dengan satu perbedaan 

besar, mereka memiliki server software. 

1.2 Bagaimana Dapat Mengakses Situs Website 

Jawaban pendeknya adalah : dengan mengetik di URL, atau dengan 

kata lain alamt web, contoh: apabila kamu ingin membuka website Face-

book, kamu akan mengetik alamt tersebut di kolom alamt web browser ad-

dress bar atau mungkin juga melalui link favorit/bookmart.  Ada cara lain 

untuk menemukan situs-situs web, seperti search engines (Google,  Bing, ya-

hoo, dll) tapi untuk beberapa situs hanya bisa ditemukan apabila kita 

mengetahui alamatnya. 

1.3 Apa yang di Pelajari 

Buku ini di buat agar pembaca bisa memahami konsep dasar dari pem-

rograman web dan membuat aplikasi sederahana. Adapun yang di pelajari 

di buku ini adalah sebagai berikut. 

1.  HTML (Hypertext Makrup Language) 

2.  PHP: Hypertext Preprocessing 

3.  Studi Kasus: Membangun Master Blog 

1.4 Persiapan Lingkungan Pengembang 

Untuk  bekerja dengan PHP, perlu beberapa aplikasi yang dibutuhkan, 

yaitu: 

1.  Web server (Apache, IIS, Personal Web Server/PWS)  

2.  PHP server ( dapat di download di  php.net) 

3.  Database Server (MySQL  dan lain-lain) 

4.  Web editor (Sublime Text, Visual  Studi Code) 

Untuk menggunakan tools aplikasi yang didalam nya sudah terdapat web 

server (Apache), PHP Server, dan MYSQL  yang terintegrasi menjadi satu. 

Tools tersebut dapat diinstal di PC sebagai saran belajar PHP. Salah satu 

contohnya adalah XAMPP yang bisa dijalankan di windows, LAMP yang 

bisa diajalankan di Linuk, dan  lain-lain. 

1.4.1  Instal XAMPP  di Windows  

1.  Download aplikasi xampp terlebih dahulu di 

https://www.apachefriends.org/download.html   jika bingung me-

milih versi yang digunakan maka gunakan versi 7.2.6/  PHP 7.2.6.  sep-

erti gambar di bawah ini. 

Pendahuluan  3  

 

 

2.  Dobel klik file XAMPP yang baru saja Anda download, nanti selanjut-

nya akan muncul jendela “Lnstaller language” seperti di bawah ini: 

 

 

3.   Selanjutnya pilih bahasa. Pilih yang Bahasa Inggris (English). Klik OK.  

4.   Kadang pada proses ini muncul pesan error. Jika ada, abaikan saja dan 

lanjutkan dengan klik OK  dan YES. 

 

 

5.   Berikutnya akan muncul jendela yang isinya meminta Anda menutup 

semua aplikasi yang sedang berjalan. Jika semua aplikasi sudah ditutup, 

maka klik tombol Next. 

 

 

Pendahuluan  5  

6.   Selanjutnya akan diminta untuk memilih aplikasi yang mau diinstal. 

Centang saja semua pilihan dan klik tombol Next. 

 

 

7.   Kemudian Anda akan diminta untuk menentukan lokasi folder penyim-

panan file-file dan folder XAMPP. Secara default akan diarahkan ke lo-

kasi c:\ xampp. Namun jika Anda ingin menyimpannya di folder lain 

bisa klik browse dan tentukan secara manual folder yang ingin 

digunakan. Jika sudah selesai, lanjutkan dan klik tombol Install. 

 

 

8.   Tunggu beberapa menit hingga proses intalasi selesai. Jika sudah mun-

cul jendela seperti di bawah ini, klik tombol Finish  untuk me-

nyelesaikannya. 

 

Pendahuluan  7  

9.  Berikutnya, akan muncul jendela dialog seperti gambar di bawah ini 

yang menanyakan Anda apakah mau langsung menjalankan aplikasi 

XAMPP atau tidak. Jika ya, maka klik YES. 

1.4.2  Instal  Text  Editor  untuk  PHP 

Banyak tools yang menyediakan untuk text editor php, misalnya se-

perti notepade, notepade++,  sublime text, visual studio code, dreamweaver, 

dan lain sebagainya. Silahkan pilih salah satunya saja, untuk instalannya si-

lahkan cek di google.com karena sudah banyak sekali tutorialnya. 

 

-oo0oo- 

 

  

 

 HTML  

(Hype rtext Makr up Languag e)  

 

Pembahasan : 

Pengertian HTML, struktur dasar HTML, HTML Format Text, HTML 

Format Daftar Urutan, HTML Tabel, HTML Gambar, HTML Hyperlink, 

HTML Link, latihan 

2.1 Pengertian HTML  

HTML merupakan singkatan dari HyperText Markup Language adalah 

script untuk menyusun dokumen-dokumen Web. Dokumen HTML disim-

pan dalam format teks reguler dan mengandung tag-tag yang memerinta-

hkan web browser untuk mengeksekusi perintah-perintah yang dispesifi-

kasikan. 

2.2 Struktur Dasar HTML  

Struktur dasar dokumen HTML adalah sebagai berikut: 

<html> 

<head> 

<title> 

 

Disini Judul Dokumen HTML</title>  

</head> 

<body> 

 

10

 Disini penulisan informasi Web 

</body> 

</html> 

 

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut: 

2.2.1 Tag 

Adalah teks khusus (markup) berupa dua karakter " < "  dan " > ",   sebagai 

contoh <body>  adalah tag dengan nama body. Secara umum tag ditulis 

secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (dit-

ambahkan karakter " / "  setelah karakter " < "),  sebagai contoh <body>  ini ada-

lah tag pembuka isi dokumen HTML, dan </body>  ini adalah tag penutup 

isi dokumen HTML. 

2.2.2 Element 

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag pe-

nutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada 

web browser digunakan element title, dimana: <title>  ini adalah tag pem-

buka judul dokumen HTML Disini Judul Dokumen HTML ini adalah isi 

judul dokumen HTML </title>  ini adalah tag penutup judul dokumen 

HTML Tag-tag yang ditulis secara berpasangan pada suatu element HTML,  

tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya. Contoh 

penulisan tag-tag yang benar: 

<p> 

 <b> 

    ................ 

 </b> 

</p> 

Contoh penulisan tag-tag yang salah 

<p> 

 <b> 

 ................ 

   </p> 

</b> 

 

 

 

HTML (Hypertext Makrup Language) 11 

2.2.3 Attribute 

Attribute mendefinisikan property dari suatu element HTML, yang 

terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut: 

<TAG 

nama-attr="nilai-attr" 

nama-attr="nilai-attr" 

   ................. 

  ................. 

 

</TAG> 

 

Secara umum nilai attribute harus berada dalam tanda petik satu atau 

dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latar-

belakang halaman web menjadi hitam, penulisannya adalah <body  

bgcolor="black"  text="yellow">  

2.2.4 Element HTML 

Menyatakan pada browser bahwa dokumen Web yang digunakan 

adalah HTML. 

Sintaks: 

<html> 

.......... 

</html> 

2.2.5 Element HEAD 

Merupakan kepala dari dokumen HTML. Tag <head>  dan tag 

</head>  terletak di antara tag <html>  dan tag </html>.  

Sintaks: 

<head> 

........... 

</head> 

2.2.6 Element TITLE 

Merupakan judul dari dokumen HTML yang ditampilkan pada judul 

jendela browser. Tag <title>  dan tag </title>  terletak di antara tag <head>  

dan tag </head>.  

 

 

  

12

Sintaks: 

<title> 

......... 

</title> 

2.2.7 Element BODY 

Element ini untuk menampilkan isi dokumen HTML. Tag <body>  dan 

tag </body>  terletak di bawah tag <head>  dan tag </head>.  Element BODY  

mempunyai attribute attribute yang menspesifikasikan khususnya warna 

dan latarbelakang dokumen yang akan ditampilkan pada browser. 

Sintaks: 

<body text="v" bgcolor="w" background="uri" link="x" alink="y" 

vlink="z"> 

.............. 

</body> 

 

Attribute text memberikan warna pada teks, bgcolor memberikan 

warna pada latarbelakang dokumen HTML, background memberikan latar-

belakang dokumen HTML dalam bentuk gambar, linkmemberikan nilai 

warna untuk link, alink memberikan warna untuk link yang sedang aktif, 

vlink memberikan warna untuk link yang telah dikunjungi. Jika attribute 

bgcolor dan background keduanya dispesifikasikan maka attribute back-

ground yang akan digunakan, akan tetapi jika nilai attribute background 

(gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor 

yang akan digunakan. 

2.3 HTML  Format TEXT  

2.3.1 ELEMENT BR (Line Break) 

Element BR berfungsi untuk ganti baris. Dan element BR ini tidak 

mempunyai tag penutup. 

Sintaks: 

<br> 

2.3.2 ELEMENT P (Paragraph) 

Element P berfungsi untuk ganti paragraf yang diikuti dengan baris 

kosong di awal dan akhir paragraf. Tag penutup </p>  sifatnya optional jika 

HTML (Hypertext Makrup Language) 13 

suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p>  diabaikan, 

maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf. 

Element P mempunyai attribute yaitu align yang bernilai "left", "cen-

ter", "right" yang menspesifikasikan posisi tepi horizontal  dari paragraf (de-

fault: "left").  

Sintaks: 

<p align="left"|"center"|"right"> 

.......................... 

</p> 

2.3.3 ELEMENT H1,H2,H3,H4,H5,H6 (Header) 

Element H1,H2,H3,H4,H5,H6  berfungsi untuk membuat header 

dengan format 6  jenis ukuran huruf  dan tercetak tebal. Nilai ukuran huruf 

terbesar adalah H1 dan terkecil adalah H6.  Element ini mempunyai attribute 

yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan po-

sisi horizontal  dari header (default: "left").  

Sintaks: 

<hx align="left"|"center"|"right"> 

.......................... 

</hx> 

 

x : 1 ... 6 

2.3.4 ELEMENT B (Bold) 

Element B berfungsi untuk membuat tampilan teks tercetak tebal 

(bold). 

Sintaks: 

<b> 

.......................... 

</b> 

2.3.5 ELEMENT I (Italic) 

Element I berfungsi untuk membuat tampilan teks tercetak miring 

(italic). 

Sintaks: 

<i> 

.......................... 

</i> 

14

2.3.6 ELEMENT U (Underline) 

Element U berfungsi untuk membuat tampilan teks tercetak garis 

bawah (underline). 

Sintaks: 

<u> 

.......................... 

</u> 

2.3.7 ELEMENT PRE (Preformated text) 

Element PRE berfungsi untuk menampilkan teks seperti apa adanya. 

Sintaks: 

<pre> 

.......................... 

</pre> 

2.3.8 ELEMENT CENTER 

Element CENTER berfungsi untuk menampilkan teks dengan posisi 

horizontal  ditengah. 

Sintaks: 

<center> 

.......................... 

</center> 

2.3.9 ELEMENT BASEFONT 

Element BASEFONT  berfungsi untuk merubah dasar ukuran huruf 

tampilan dari web browser. Attribute dari element ini adalah size  yang 

merupakan ukuran  huruf dengan nilai "1"  sampai dengan "7"  pixel, atau 

berupa ukuran relatif ( +  atau - ), default nya adalah "3"  pixel. Element ini 

tidak mempunyai tag penutup. 

Sintaks: 

<basefont size="pixel"> 

2.3.10 ELEMENT FONT 

Element FONT  berfungsi untuk merubah jenis, ukuran dan warna dari 

tampilan huruf. Element ini mempunyai attribute color untuk merubah 

warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, 

harus dibatasi dengan koma), dan size  untuk merubah ukuran huruf (pixel). 

HTML (Hypertext Makrup Language) 15 

Sintaks: 

<font color="warna" face="font" size="pixel"> 

.......................... 

</font> 

2.3.11 ELEMENT HR (Horizontal Rule) 

Element HR berfungsi untuk membuat suatu garis horizontal.  Element 

ini tidak mempunyai tag penutup dan mempunyai attribute align untuk 

menempatkan posisi secara horizontal  ("left",  "center",  "right"),  size  untuk 

ukuran ketebalan garis ("pixel"),  width untuk ukuran panjang garis ("per-

sen"),  dan noshade (garis solid). 

Sintaks: 

<hr align="left"|"center"|"right" size="pixel" width="persen" noshade> 

2.4 HTML  Daftar Urutan  

2.4.1 ELEMENT OL (Orderd List) 

Element OL  berfungsi untuk membuat nomor daftar urut. Element ini 

mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk 

memberikan nilai awal dari daftar urutan, attributetype berfungsi untuk 

memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk ab-

jad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 

untuk angka decimal (default: start="1"  type="1"  ). Dalam element OL  harus 

terdapat beberapa element LI. 

Sintaks: 

<ol start="number" type="A"|"a"|"I"|"i"|"1"> 

........................ 

</ol> 

2.4.2 ELEMENT UL (Unordered List) 

Element UL berfungsi untuk membuat daftar tanpa nomor urut (da-

lam format bullet). Element ini mempunyai attribute yaitu type. Attribute 

type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari 

pada attribute type ini adalah "circle",  "square"  dan "disc"  . Dalam element 

UL harus terdapat beberapa element LI. 

Sintaks: 

<ul  type="circle"|"square"|"disc"> 

.......................... 

</ul> 

16

2.4.3 ELEMENT LI (List Item) 

Element LI merupakan isi dari pada daftar. Element ini harus berada 

di dalam element OL  atau UL. Element ini mempunyai attribute type dan 

value. Nilai attribute type adalah A , a, I, i, 1, circle, square,  disc dan attribute 

value berisikan nilai nomor urutan dari attribute type. 

Sintaks: 

<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc"> 

.......................... 

</li> 

2.5  HTML  Tabel  

2.5.1 ELEMENT TABLE 

Element TABLE befungsi untuk membuat suatu data multidimensi 

yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti 

align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cell-

spacing(jarak antara sel), width (lebar tabel), height (tinggi tabel). Element 

TABLE berisikan element CAPTION,  TH, TR dan TD. 

Sintaks: 

<table> 

........................ 

</table> 

2.5.2 ELEMENT CAPTION 

Element CAPTION  berfungsi untuk membuat judul dari tabel. Ele-

ment ini harus berada di dalam element TABLE dan mempunyai attribute 

align dengan nilai top(judul terletak di atas tabel), danbottom(judul terletak 

di bawah tabel). 

Sintaks: 

<caption align="top"|"bottom"> 

.......................... 

</caption> 

2.5.3 ELEMENT TR (Table Row) 

Element TR mendefinisikan baris pada tabel dan element ini harus be-

rada di dalam element TABLE. Pada element TR terdapat element TH dan 

HTML (Hypertext Makrup Language) 17 

TD. Attribute yang terdapat pada element ini adalah align, valign(posisi 

vertikal), dan bgcolor. 

Sintaks: 

<tr> 

.......................... 

</tr> 

2.5.4 ELEMENT TH (Table Header) dan TD (Table Data) 

Element TH dan TD merupakan informasi pada tabel. TH mendefin-

isikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal 

dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di 

dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, 

colspan, rowspan. 

Sintaks: 

<th  align="left"|"center"|"right"  valign="top"|"middle"|"bottom" 

bgcolor="color" colspan="number"  rowspan="number"> 

.......................... 

</th> 

 

<td  align="left"|"center"|"right" valign="top"|"middle"|"bottom" 

bgcolor="color" colspan="number" rowspan="number"> 

.......................... 

</td> 

2.6  HTML  Form  

2.6.1 ELEMENT FORM 

Element FORM  berfungsi untuk mendefinisikan form interaktif. Ele-

ment ini mempunyai attribute yaitu action, dan method. Attribute action 

berisikan aksi terhadap form yang dikirim (URI) dan attribute method 

berisikan metode form melakukan proses pengiriman(GET/POST).  

Sintaks: 

<form action="action" method="GET"|"POST"> 

........................... 

</form> 

2.6.2 ELEMENT INPUT 

Element INPUT berfungsi untuk mendefinisikan input yang akan di-

masukkan pengguna. Element ini mempunyai attribute yaitu name, size , 

type, value, checked. Attribute name mendefinisikan nama dari input 

18

kontrol form, attribute size  mendefinisikan ukuran teks pada input kontrol, 

type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan 

nilai awal/reset/submit,  checked mendefinisikan pilihan terpilih pada type 

radio/checkbox.  Element ini tidak mempunyai tag penutup dan harus be-

rada di dalam element FORM.  

Sintaks: 

<input name="name" type="text"|"checkbox"|"radio"|"submit"|"reset"> 

2.6.3 ELEMENT SELECT 

Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada 

form kontrol. Element ini mempunyai attribute yaitu name, size , multi-

ple(diizinkan  banyak pilihan). Element ini harus berada di dalam element 

FORM.  

Sintaks: 

<select name="name"  size="number" multiple > 

..................... 

</select> 

2.6.4 ELEMENT OPTION 

Element OPTION  mendefinisikan opsi pilihan pada menu SELECT. El-

ement ini mempunyai attribute selected, dan value. Attribute selected opsi 

terpilih dan attribute value berisikan nilai element OPTION.  

Sintaks: 

<option selected   ="number" > 

.................... 

</option> 

2.6.5 ELEMENT TEXTAREA 

Element TEXTAREA berfungsi sebagai input kontrol form untuk me-

masukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu 

name, cols, rows. Attribute name mendefinisikan nama input kontrol form 

element textarea, attribute cols mendefinisikan jumlah kolom textarea yang 

terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang ter-

lihat. 

Sintaks: 

<textarea name="name" ="number" ="number" > 

..................... 

</textarea> 

HTML (Hypertext Makrup Language) 19 

1.7  Latihan 

Gunakan teks editor Sublime text atau notepade untuk menyunting 

dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah 

file tersebut dengan menggunakan web browser. 

Latihan-1 

Buatlah nama file : latihan.html 

<html> 

<head> 

<title>Latihan1-1</title> 

</head> 

<body> 

Belajar bahasa pemrograman web ternyata mudah juga 

</body> 

</html> 

Latihan-2 

<html> 

<head> 

<title>Latihan1-2</title> 

</head> 

<body text="red"> 

Belajar bahasa pemrograman web ternyata mudah juga :) 

</body> 

</html> 

Latihan-3 

<html> 

<head> 

<title>Latihan1-3</title> 

</head> 

<body text="red" bgcolor="black"> 

Belajar bahasa pemrograman web ternyata mudah juga :) 

</body> 

</html> 

Latihan-4 

<html> 

<head> 

<title>Latihan1-4</title> 

</head> 

<body text="red" bgcolor="aqua" background="./images/image027.jpg"> 

Belajar bahasa pemrograman web ternyata mudah juga :) 

</body> 

</html> 

  

20

catatan: 

./images/ = nama direktori file gambar disimpan 

image027.jpg = nama file gambar 

latihan-5 

<html> 

<head> 

<title>Latihan1-5</title> 

</head> 

<body> 

Belajar bahasa pemgrograman web. Dengan mater dasar HTML. Dan JSP. <br> 

<br>Belajar bahasa pemrograman web.<br>Dengan materi dasar HTML.<br>Dan 

JSP. 

</body> 

</html> 

Latihan -6 

<html> 

<head> 

<title>Latihan1-6</title> 

</head> 

<body> 

Tampilan teks sebelum paragraf. 

<p>Tampilan teks paragraf pertama.</p> 

<p>Tampilan teks paragraf kedua.</p> 

Tampilan teks setelah paragraf. 

</body> 

</html> 

Latihan-7 

<html> 

<head> 

<title>Latihan1-7</title> 

</head> 

<body> 

Ini normal teks<br> 

<b>Ini teks tercetak tebal (bold)</b><br> 

<i>Ini teks tercetak miring (italic)</i><br> 

<u>Ini teks tercetak garis bawah (underline)</u> 

</body> 

</html> 

Latihan-8 

<html> 

<head> 

<title>Latihan1-8</title> 

</head> 

<body> 

<pre> 

Ini bentuk penulisan preformated text apapun bentuknya tulisan ini akan 

ditampilkan pada web browser seperti apa adanya, alias yang ditulis 

</pre> 

</body> 

</html> 

HTML (Hypertext Makrup Language) 21 

Latihan-9 

<html> 

<head> 

<title>Latihan1-9</title> 

</head> 

<body> 

Matakuliah TKJ Semester 1: 

<ol> 

<li>Bahasa Inggris 1</li> 

<li>Matematika 1</li> 

<li>Jaringan Komputer 1</li> 

<li>Konsep Teknologi Informasi</li> 

<li>Keterampilan Komputer dan Pengelolaan Informasi</li> 

<li>Perangkat Keras Komputer</li> 

<li>Sistem Operasi</li> 

</ol> 

</body> 

</html> 

Latihan-10 

<html> 

<head> 

<title>Latihan4-1</title> 

</head> 

<body> 

<table align="center" border="2" bgcolor="cyan" cellpadding="5" 

cellspacing="0" > 

<caption align="top"><b>Tabel 1.1</b></caption> 

<tr> 

<th>No.</th> 

<th>Nama</th> 

</tr> 

<tr> 

    <td>1.</td> 

<td>Bang Raje</td> 

</tr> 

<tr> 

 <td>2.</td> 

<td>Eri B</td> 

</tr> 

<tr> 

<td>3.</td> 

<td>Sri Murni</td>     

</tr> 

</table> 

</body> 

</html> 

  

22

Latihan-11 

<html> 

<head> 

<title>Latihan4-2</title> 

</head> 

<body> 

<table align="center" border="2" bgcolor="cyan" cellpadding="5" 

cellspacing="0" > 

<caption align="top"><b>Tabel 1.1</b></caption> 

<tr bgcolor="green"> 

<th>No.</th> 

<th>Nama</th> 

</tr> 

<tr bgcolor="yellow"> 

<td>1.</td> 

    <td>Rina Hastuti</td> 

</tr> 

<tr bgcolor="red"> 

<td>2.</td> 

<td>Ali Amran</td>     

</tr> 

<tr bgcolor="blue"> 

<td>3.</td> 

<td>Rahmat</td>     

</tr> 

</table> 

</body> 

</html> 

Latihan-12 

<html> 

<head> 

<title>Latihan7-2</title> 

</head> 

<body> 

<FORM METHOD="POST" ACTION=" "> 

<H4>FORM</H4> 

<INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here."> 

<BR><BR> 

<B>Are you a student?</B> 

<INPUT TYPE="checkbox" NAME="var2"> 

<BR><BR> 

<B>How old are you?</B> 

<BR> 

<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 – 15 

<BR> 

<INPUT TYPE="radio" NAME="var3" VALUE="r2">16 – 20 

<BR> 

<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 – 25 

<BR><BR> 

<B>Where are you from?</B> 

<BR> 

<SELECT NAME="var6" SIZE="1"> 

<OPTION VALUE="BG">Bulgaria 

<OPTION VALUE="UK">United Kingdom 

<OPTION VALUE="USA" SELECTED>USA 

HTML (Hypertext Makrup Language) 23 

</SELECT> 

<BR><BR> 

<INPUT TYPE="submit" NAME="var4" VALUE="Send"> 

<INPUT TYPE="reset" NAME="var5" VALUE="Clear"> 

</FORM> 

</body> 

</html> 

 

-oo0oo- 

 

 

 

  

24

  

 PHP : Hyper text Preproces sing  

 

 

Pembahasan : 

Sejarah PHP, Sintaks PHP, Struktur Kendali, Function, Percabangan dan 

Perulangan, Array, Get dan Post, PHP dan MySQL, CRUD, latihan.  

3.1 Sejarah PHP 

Php merupakan salah satu bahasa pemrograman yang bayak 

digunakan oleh developer untuk mengembagkan suatu system informasi. 

Dia antaranya adalah di kalangan Pendidikan, perkantoran, kesehatan, dan 

lain sebagainya. Secara sederahana PHP adalah Bahasa pemrograman script 

server-side yang di desain untuk perkembangan web dan juga PHP bias 

diguankan sebagai Bahasa pemrogrman umum. 

Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, se-

buah kepanjangan rekursif, yakni kata dimana kepanjangannya terdiri dari 

singkatatan itu sendiri. PHP bersifat open source sehingga banyak 

digunakan untuk proyek open source. 

Pada awalnya PHP merupakan kependekan dari Personal Home Page 

(Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 

1995.  Pada waktu itu PHP masih bernama Form  Interpreted (FI),  yang 

wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data 

formulir dari web.  

2 6 

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan 

menamakan PHP/FI  dengan perilisan kode sumber ini menjadi terbuka, 

maka banyak pemrograman yang tertarik untuk ikut mengembangkan PHP. 

Pada November 1997,  dirilis PHP/FI  2.0 dimana intreperter sudah 

diimplementasi dengan pemrogrmana C. dalam rilis ini disertakan juga 

modul-modul ekstensi yang meningkatkan kemampuan PHP/FI  secara sig-

nifikan. 

Pada tahun 1997,  sebuah perusahaan bernama Zend  menulis ulang in-

terpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian 

pada Juni 1998,  perusahaan tersebut merilis interpreter baru untuk PHP dan 

meresmikan rilis tersebut sebagai PHP 3.0  dan singkatan PHP diubah men-

jadi akronim berulang PHP: Hypertext Preprocessing. 

Pada pertengahan tahun 1999, Zend  merilis interpreter PHP baru dan 

rilis tersebut dikenal dengan PHP 4.0.  PHP 4.0  adalah versi PHP yang paling 

banyak dipakai pada awal abad ke-21. Versi  ini banyak dipakai disebabkan 

kemampuannya untuk membangun aplikasi web kompleks tetapi tetap 

memiliki kecepatan dan stabilitas yang tinggi. 

Pada Juni 2004,  Zend  merilis PHP 5.0.  Dalam versi ini, inti dari inter-

preter PHP mengalami perubahan besar. Versi  ini juga memasukkan model 

pemrograman berorientasi objek ke dalam PHP untuk menjawab perkem-

bangan bahasa pemrograman ke arah paradigma berorientasi objek. Server 

web bawaan ditambahkan pada versi 5.4  untuk mempermudah pengem-

bang menjalankan kode PHP tanpa menginstall software server. 

Versi  terbaru dan stabil dari bahasa pemograman PHP saat ini adalah 

versi 7.0.16  dan 7.1.2  yang resmi dirilis pada tanggal 17  Februari  2017.  

3.2 Sintaks PHP 

Secara sederhana sintax penulisan PHP sangat simple yaitu : 

>?php 

//syntax php di letakkan disini « 

//kode php di akhiri Degnan titik koma  µ¶ 

?> 

PHP: Hypertext Preprocessing  27  

Untuk mengetikkan baris code php, maka anda perlu mengapitnya 

dengan tag <?php  dan di akhir dengan ?>  karena di luar dari itu php engine 

tidak menganggapnya sebagai script php, melainkan hanya html biasa. Se-

bagai contoh kita akan menggunakan php, untuk menampilkan kalimat 

"Hallo  dunia PHP?!"  kita cukup membuka notepad, lalu ketikan seperti ini 

di notepad : 

<?php 

(FKR´+DOOR dunia PHP?!  ³ 

?> 

 

Maka akan muncul tampilan seperti berikut ini. 

 

3.2.1 Variable 

Dalam pemrograman, variabel adalah suatu lokasi penyimpanan (di 

dalam memori komputer) yang berisikan nilai atau informasi yang nilainya 

tidak diketahui maupun telah diketahui. Dalam definisi bebasnya, variabel 

adalah kode program yang digunakan untuk menampung nilai tertentu. 

Nilai yang disimpan di dalam variabel selanjutnya dapat dipindahkan ke 

dalam database, atau ditampilkan kembali ke pengguna.  

Nilai dari variabel dapat di isi dengan informasi yang diinginkan dan 

dapat diubah nilainya pada saat kode program sedang berjalan. Sebuah var-

iabel memiliki nama yang digunakan untuk mengakses nilai dari variabel 

itu. Jika anda memiliki pengetahuan dasar tentang bahasa pemrograman, 

2 8 

tentunya tidak asing dengan istilah variabel. Sama seperti variabel dalam 

bahasa pemrograman lainnya, variabel dalam PHP digunakan untuk men-

ampung nilai inputan dari user, atau nilai yang kita definisikan sendiri. Na-

mun PHP memiliki beberapa aturan tentang cara penggunaan dan penu-

lisan variabel. 

3.2.1.1 Aturan Penulisan Variabel 

3.2.1.1.1 Penulisan variable harus diawali dengan tanda $ 

Variable di dalam PHP  harus di awali dengan dollar sign atau tanda 

dollar ($). Setelah tanda $,  sebuah variabel PHP harus diikuti dengan karak-

ter pertama berupa huruf atau underscore (_),  kemudian untuk karakter 

kedua dan seterusnya bisa menggunakan huruf, angka atau underscore (_).  

Dengan aturan tersebut, variabel di dalam PHP tidak bisa diawali dengan 

angka. Minimal panjang variabel adalah 1 karakter setelah tanda $.  

Berikut adalah contoh penulisan variabel yang benar dalam PHP: 

<?php 

   $i;  

   $nama;  

   $Umur;  

   $_lokasi_memori;  

   $ANGKA_MAKSIMUM;  

?> 

 

Dan berikut adalah contoh penulisan variabel yang salah: 

<?php 

   $4ever;  //variabel tidak boleh diawali dengan angka 

   $_salah  satu;  //variabel tidak boleh mengandung spasi 

   $nama*^;  //variabel tidak boleh mengandung karakter khusus: *  dan ^  

?> 

 

3.2.1.1.2 Variabel dalam PHP bersifat case sensitive 

PHP membedakan variabel yang ditulis dengan huruf besar dan kecil 

(bersifat case sensitif), sehingga $belajar tidak sama dengan $Belajar dan 

$BELAJAR, ketiganya akan dianggap sebagai variabel yang berbeda. Untuk 

menghindari kesalahan program yang dikarenakan salah merujuk variabel, 

disarankan menggunakan huruf kecil untuk seluruh nama variabel. 

  

PHP: Hypertext Preprocessing  29  

<?php 

   $andi="Andi";  

   echo $Andi;  // Notice: Undefined variable: Andi 

?> 

 

Dalam contoh di atas, PHP mengeluarkan error karena tidak menemukan 

variabel $Andi. 

3.2.1.1.3 Cara memberikan nilai pada variable 

Sama seperti sebagian besar bahasa pemrograman lainnya, untuk 

memberikan nilai kepada sebuah variabel, PHP menggunakan tanda sama 

dengan (=). Operator  ¶sama dengan¶ ini dikenal dengan istilah Assignment 

Operators.  

Perintah pemberian nilai kepada sebuah variabel disebut dengan as-

signment. Jika variable tersebut belum pernah digunakan, dan langsung 

diberikan nilai awal, maka disebut juga dengan proses inisialisasi. 

Berikut contoh cara memberikan nilai awal (inisialisasi) kepada varia-

bel: 

<?php 

   $nama  = "andi";  

   $umur  = 17;  

   $pesan  = "Saya sedang belajar PHP di duniailkom.com";  

?> 

3.2.1.1.4 Variabel dalam PHP tidak bertipe 

Dalam kelompok bahasa pemrograman, PHP termasuk Loosely Type 

Language, yaitu jenis bahasa pemrograman yang variabelnya tidak terikat 

pada sebuah tipe tertentu. Hal ini berbeda jika dibandingkan dengan bahasa 

pemrograman desktop seperti Pascal atau C, dimana jika anda membuat se-

buah variabel bertipe integer, maka variabel itu hanya bisa menampung 

nilai angka, dan anda tidak akan bisa mengisinya dengan huruf. 

Di dalam PHP, setiap variabel bebas diisi dengan nilai apa saja, seperti 

contoh berikut: 

<?php 

   $a  = 17;  // nilai variabel a berisi angka (integer) 

   $a  = "aku";  // nilai variabel a diubah menjadi kata (string) 

   $a  = 17.42;  // nilai variabel a diubah menjadi desimal (float) 

?> 

3 0 

3.2.1.1.5 Variabel system PHP (Predefined Variables) 

Predefined Variables  atau terjemahan bebasnya Variabel  Sistem PHP, 

adalah beberapa variabel yang telah di definisikan secara sistem oleh PHP, 

dan kita sebaiknya tidak membuat variabel dengan nama yang sama. 

Beberapa contoh Predefined Variables  dalam PHP adalah: 

$GLOBALS  , $_SERVER  , $_GET  , $_POST  , $_FILES  , $_COOKIE  , $_SESSION  , 

$ _REQUEST  , $_ENV,  $php_errormsg,  $HTTP_RAW_POST_DATA,  

$http_response_header,  $argc,  $argv,  $this.  

 

Daftar list Predefined Variables  tersebut saya ambil dari manual PHP di 

http://www.php.net/reserved.variables , di dalam manual tersebut juga 

dijelaskan bahwa mungkin masih terdapat beberapa variabel sistem PHP 

selain list di atas, hal ini tergantung dengan jenis web server, versi PHP yang 

digunakan, dan beberapa faktor lainnya. Namun kebanyakan variabel 

sistem PHP menggunakan tanda $_ pada awal nama variabel, namun tidak 

selalu. 

3.2.1.2 Cara Menampilkan Variabel 

Untuk menampilkan nilai atau isi dari variabel, kita tinggal menam-

pilkannya dengan perintah echo atau print, seperti berikut ini: 

<?php 

   $a='Saya  Sedang belajar PHP';  

   $b=5;  

     

   print $a;   

   echo $b;  

?> 

 

Hasil yang didapat adalah: 

Saya Sedang belajar PHP7 

3.2.2 Operator 

Operator Aritmatika adalah operator matematis yang terdiri dari op-

erator penambahan, pengurangan, perkalian, pembagian, modulus, plus, 

dan minus. Didalam PHP terdapat 7  jenis operator aritmatika, berikut ke 

tujuh operator tersebut: 

 

PHP: Hypertext Preprocessing  31  

Nama Operator Contoh Hasil 

Positif +$a  Nilai Positif dari $a  

Negative -$a  Nilai Negatif dari $a  

Penambahan $a + $b  Total dari $a dan $b  

Pengurangan $a - $b  Selisish dari $a dan $b  

Perkalian $a * $b  Hasil kali dari $a dan $b  

Div/Pembagian  $a/$b  Hasil bagi dari $a dan $b  

Mod/Sisa hasil bagi  $a % $b  Sisa dari pembagian $a/$b  

 

Kebanyakan operator aritmatika dalam PHP bertipe binary yakni 

membutuhkan 2 operand, kecuali operator minus (-) dan plus (+) yang 

merupakan operator tipe unary (hanya membutuhkan 1 operand). Dari ke 7 

operator aritmatika dalam PHP tersebut, operator modulus ($a % $b) mung-

kin terdengar baru. Operator ini menghasilkan sisa hasil bagi dari hasil pem-

bagian. Misalkan 10 % 3, hasilnya adalah 1. Biasanya operator modulus ini 

digunakan bersama-sama dengan operator pembagian (/).  

Berikut adalah contoh kode program, cara penggunaan operator arit-

matika dalam PHP: 

<?php 

$hasil1=  -3;  

$hasil2=3+5;  

$hasil3=8 -4.5;  

$hasil4=2*5;  

$hasil5=3+8/5 -3;  

$hasil6=10  %  4;  

  

echo "$hasil1:";  var_dump($hasil1);  // $hasil1:int( -3)  

echo "<br \ >";                     

echo "$hasil2:";  var_dump($hasil2);  // $hasil2:int(8)   

echo "<br \ >";  

echo "$hasil3:";  var_dump($hasil3);  // $hasil3:float(3.5)   

echo "<br \ >";  

echo "$hasil4:";  var_dump($hasil4);  // $hasil4:int(10)   

echo "<br \ >";  

echo "$hasil5:";  var_dump($hasil5);  // $hasil5:float(1.6)   

echo "<br \ >";  

echo "$hasil6:";  var_dump($hasil6);  // $hasil6:int(2)   

?> 

 

Pada kode program diatas, saya menggunakan fungsi var_dump()  un-

tuk menampilkan hasil perhitungan, sehingga kita bisa melihat tipe data 

dari masing-masing variabel. 

3 2 

Dari hasil var_dump(),  terlihat bahwa variabel $hasil3  dan $hasil5  

bertipe float. Hal ini dikarenakan perhitungan aritmatika pada baris ke-4 

dan ke-6  menghasilkan angka desimal, sehingga secara otomatis variabel 

tersebut tidak dapat ditampung sebagai integer, melainkan harus float. Na-

mun jika hasil operasi matematis tersebut menghasilkan bilangan bulat, PHP 

akan menyimpannya sebagai tipe data int (integer), seperti variabel $hasil1,  

$hasil2,  $hasil4  dan $hasil6.  

Pada perhitungan baris ke-6 yaitu persamaan $hasil5=3+8/5 -3,  hasil-

nya adalah 1.6 . Hal ini karena operator pembagian memiliki prioritas lebih 

tinggi daripada operator tambah dan kurang. Operasi 3+8/5 -3  dikerjakan 

oleh PHP sebagai (3+(8/5)) -3 . Namun untuk hal ini, disarankan 

menggunakan tanda kurung secara tertulis agar memudahkan dalam mem-

baca alur program, dari pada bergantung kepada aturan prioritas operator 

PHP. 

3.3 Function 

Dalam merancang kode program, kadang kita sering membuat kode 

yang melakukan tugas yang sama secara berulang-ulang, seperti membaca 

tabel dari database, menampilkan penjumlahan, dan lain-lain. Tugas yang 

sama ini akan lebih efektif jika dipisahkan dari program utama, dan 

dirancang menjadi sebuah fungsi. Fungsi  (atau Function)  dalam bahasa 

pemograman adalah kode program yang dirancang untuk menyelesaikan se-

buah tugas tertentu, dan merupakan bagian dari program utama. Kita dapat 

membuat fungsi sendiri, atau menggunakan fungsi yang dibuat oleh pro-

grammer lain. 

Dalam dunia pemograman terdapat istilah ¶la]y SrogammLng· yang 

artinya bukanlah programmer yang malas. Tetapi, daripada membuat kode 

program umum dari dasar, kita bisa menggunakan fungsi yang telah dibuat 

oleh programmer lain. PHP bahkan menyediakan ribuan fungsi bawaan 

yang tersedia untuk membantu kita dalam merancang program. 

Menggunakan fungsi dalam teori pemograman sering juga disebut dengan 

LstLlaK ¶memanggil fungsi’ (calling a function). Fungsi  dipanggil dengan 

menulis nama dari fungsi tersebut, dan diikuti dengan argumen (jika ada). 

PHP: Hypertext Preprocessing  33  

Argumen ditulis di dalam tanda kurung, dan jika jumlah argument lebih 

dari satu, maka diantaranya dipisahkan oleh karakter koma. Setelah 

memproses nilai inputan, hampir semua fungsi akan memberikan nilai hasil 

pemrosesan tersebut (walaupun ada fungsi yang tidak memberikan nilai). 

Cara fungsi memberikan nilainya ini sering dLsebut dengan ¶mengembalikan 

nLlaL· (return a value). Nilai yang dikembalikan oleh sebuah fungsi dapat dit-

ampung ke dalam variabel, atau langsung ditampilkan ke web browser. 

Sebuah fungsi dalam memproses data, kadang memerlukan beberapa 

inputan atau nilai masukan. Inputan inilah yang dimaksud dengan argu-

men. Sebuah fungsi bisa membutuhkan 1, 2, atau 5 argumen, namun bisa 

juga tidak memerlukan argumen sama sekali. Parameter adalah sebutan lain 

untuk argumen. Perbedaannya, parameter merujuk kepada inputan fungsi 

pada saat pendefenisian fungsi tersebut, dan agrumen adalah sebutan untuk 

inputan fungsi pada saat pemanggilan fungsi. Kita akan membahas perbe-

daan Argumen dan Parameter secara lebih dalam  pada tutorial selanjutnya, 

namun pada dasarnya argumen dan parameter merujuk kepada hal yang 

sama, yaitu inputan kepada fungsi dan kedua istilah ini sering dipertukar-

kan. 

Sebagai contoh, PHP menyediakan fungsi akar kuadrat, yakni sqrt(),  

berikut adalah cara penggunaannya: 

<?php 

$akar_kuadrat  = sqrt(49);  

echo "Akar kuadrat dari 49 adalah $akar_kuadrat";  

// Akar kuadrat dari 49 adalah 7 

?> 

 

Dalam contoh diatas, fungsi sqrt()  akan menghitung akar kuadrat dari nilai 

argumen yang diinput. Saya menambahkan argumen 49 sebagai inputan. 

Nilai hasil dari fungsi sqrt(49),  selanjutnya di tampung dalam variabel 

$akan_kuadrat,  yang kemudian ditampilkan ke dalam web browser. Selain 

ditampung di dalam variabel, kita bisa menampilkan hasil fungsi langsung 

ke web browser, seperti contoh berikut: 

<?php 

echo "12 pangkat 2 adalah: ".pow(12,2);  

// 12 pangkat 2 adalah: 144 

?> 

 

3 4 

Fungsi pow() adalah fungsi pemangkatan matematika bawaan PHP. Fungsi 

ini membutuhkan 2 argumen, argumen pertama adalah nilai awal yang 

ingin dihitung, dan argumen kedua adalah nilai pangkat. Pow(12,2) sama 

dengan 12 kuadrat. 

Perlu juga diperhatikan adalah tipe parameter yang dibutuhkan oleh 

sebuah fungsi. Seperti 2 contoh kita diatas, fungsi sqrt()  dan pow() adalah 

fungsi matematika. Kedua fungsi ini hanya bisa memproses parameter 

dengan tipe angka (interger dan float). Jika anda memasukkan parameter 

jenis string, maka PHP akan mengeluarkan error. Jumlah dan urutan argu-

men juga harus sesuai dengan yang dibutuhkan oleh fungsi. Jika sebuah 

fungsi hanya membutuhkan 1 argumen, maka kita tidak bisa menambahkan 

argumen kedua, kecuali ada argumen yang bersifat opsional (dapat dia-

baikan). 

3.4 Percabangan 

Percabangan adalah kondisi, dimana jika kondisi bernilai benar atau 

salah maka akan ada perintah yang dijalankan. Perintah yang dijalankan ini 

berdasarkan nilai dari kondisi tersebut. Kondisi ini berupa pernyataan Bool-

ean (True/Fal se).  

Contoh 1 : Jika Hari ini hujan saya akan membawa mobil, tapi jika tidak 

hujan, saya akan membawa motor saja. Ternyata hari ini hujan, maka saya 

akan membawa mobil. Hujan adalah kondisi, membawa mobil atau motor 

adalah statement. Masing-masing kondisi menjalankan statement yang 

berbeda. 

Di bawah ini merupakan kode dasar dalam membuat percabangan 

pada bahasa pemrograman PHP. 

if(kondisi){  

 Statement 1... 

}else{  

 Statement 2... 

}  

 

  

PHP: Hypertext Preprocessing  35  

Agar lebih paham, sekarang kita berlanjut ke contoh ke 2 : 

Jika saya laSar«. 

Saya MaNan«.. 

Jika saya tidak laSar«. 

Saya 7Ldur«.. 

Dari contoh di atas, terdapat 2 kondisi yakni : 

Jika saya lapar. 

Jika saya tidak lapar. 

Dan juga ada 2 statement. 

Saya Makan 

Saya Tidur 

Apabila nilai kebenarannya adalah “LaSar” maka statement yang 

dijalankan adalah “MaNan”. 

<?php 

$x  = "lapar";  

if($x  == "lapar") 

{  

 echo "Saya makan";  

}  

else 

{  

 echo "Saya tidur";  

}  

?> 

 

Di bawah ini adalah hasil dari kode sumber di atas : 

 

3 6 

3.4.1 If 

If… merupakan percabangan tunggal dan paling sederhana. Karena 

hanya akan menjalankan 1 aksi, jika kondisi bernilai True. Tapi jika ternyata 

tidak bernilai TRUE, maka tidak akan ada aksi yang di jalankan. 

Bentuk dasarnya adalah seperti ini : 

If(kondisi){  

 Statement 1... 

}  

 

Contoh Program 

<?php 

$bulan  = date("M");  

if($bulan=="Feb"){  

 echo "Ini adalah bulan February";  

}  

?> 

 

Dari kode sumber di atas, akan di dapat hasil output “Ini adalah bulan 

February“, namun apabila sekarang (saat ini) bukan bulan February, maka 

tidak akan ada output yang ditampilkan. 

 

 

Anda juga dapat memasukan lebih dari 1 perintah dalam percabangan 

if. Contoh : “-LNa hari ini hujan, saya akan pergi, dengan membawa mobil, 

dan Payung untuk menjemput 5LsNa”. Sintaks dasarnya adalah seperti 

source code di bawah ini : 

if(kondisi){  

 Statement 1... 

 Statement 2... 

 Statement 3... 

}  

 

PHP: Hypertext Preprocessing  37  

Berikut contoh kode sumbernya : 

<?php 

$cuaca  = 'hujan';  

if($cuaca  == 'hujan'){  

 echo 'Saya  akan pergi <br>';  

 echo 'Saya  akan membawa mobil <br>';  

 echo 'Saya  juga akan membawa payung';  

}  

?> 

 

Dan di bawah ini adalah hasil dari kode sumber di atas : 

 

3.4.2 If-Else 

,I«(lse disebut juga percabangan ganda, karena hanya ada 2 kondisi 

yang ditampilkan. Apabila kondisi pertama bernilai benar, maka statement 

1 yang akan dijalankan. Namun jika kondisi bernilai salah, maka statement 

2 yang akan dijalankan. Tidak ada kondisi lainnya. 

Bentuk dasar percabangan ,I«(lse« adalah seperti ini : 

if(kondisi){  

 Statement 1... 

}else{  

 Statement 2... 

}  

 

Silahkan copas kode sumber di bawah ini : 

<?php 

$x  = 9;  

$y  = 12;  

if($x>$y){  

 echo "X  lebih besar dari Y";  

}else{  

 echo "X  lebih kecil dari Y";  

}  

?> 

3 8 

 

Dan di bawah ini adalah hasilnya : 

 

3.4.3 IF Else IF 

,I«(lseLI« merupakan konsep percabangan bersarang. Terdapat n 

(tak terhingga) kondisi yang ditampilkan, jika kondisi pertama nilai kebena-

rannya adalah FALSE  maka akan berpindah ke kondisi kedua, dan jika kon-

disi kedua nilai kebenarannya masih FALSE,  maka akan berpindah ke kon-

disi ke tiga dan begitu seterusnya. Sampai di temukan kondisi kebenarannya 

adalah TRUE. 

If(kondisi 1){  

 Statement 1... 

}Elseif(kondisi  2){  

 Statement 2... 

}Elseif(kondisi  3){  

 Statement 3... 

}Elseif(kondisi  4){  

 Statement 4... 

}  

dst... 

 

Di bawah ini adalah contoh kode sumbernya : 

<?php 

$nilai  = 40;  

if($nilai<=100  &&  $nilai>=80){  

 echo "Memuaskan";  

}elseif($nilai<=79  &&  $nilai>=60){  

 echo "Cukup";  

}elseif($nilai<=59  &&  $nilai>=40){  

 echo "Kurang";  

}else{  

 echo "Kacau";  

}  

?> 

 

 

PHP: Hypertext Preprocessing  39  

Dan di bawah ini adalah hasilnya : 

 

3.4.5 Switch 

Fungsi  dari penggunaan Switch sebenarnya sama dengan 

percabangan menggunakan ,I«(lseLI. Namun pada percabangan Switch, 

kondisi di bagi dalam beberapa kasus (case) kemudian kasus ² kasus ini di 

cocokan dengan nilai pada Expression. Jika salah satu kasus bernilai benar, 

maka statement yang ada di dalamnya lah yang akan di jalankan. 

Bentuk dasarnya adalah seperti ini : 

switch (expression) 

{  

case label1: 

  statement 1;   

  break;    

case label2: 

  statement 2;  

  break;  

default: 

  statement 3;  

}  

 

Di bawah ini adalah contoh kode sumbernya : 

<?php 

$hari  = date('l');  

switch($hari)  

{  

 case "Sunday": 

4 0 

  echo "This is Sunday";  

  break;  

 case "Monday": 

  echo "This is Monday";  

  break;  

 case "Tuesday": 

  echo "This is Tuesday";  

  break;  

 case "Wednesday": 

  echo "This is Wednesday";  

  break;  

 case "Thursday": 

  echo "This is Thursday";  

  break;  

 case "Friday": 

  echo "This is Friday";  

  break;  

 case "Saturday": 

  echo "This is Saturday";  

  break;  

 default: 

  echo "Anda dari planet lain.";  

}  

?> 

 

Dan di bawah ini adalah outputnya : 

 

Keterangan : 

 Pertama tentukan dulu ekspresinya pada switch. Switch(expression). 

 Buat daftar pilihan menggunakan keyword case, anda buat kondisinya 

dan juga statemennya. Statement ini akan dijalankan jika kondisi ber-

nilai benar. 

case "Kondisi": 

statement... 

break;  

PHP: Hypertext Preprocessing  41  

Maka program akan mencocokan nilai dari expression dengan nilai dari tiap 

case n pada blok kode switch. 

 Apabila kecocokan ditemukan pada salah satu case, maka statement 

yang ada di dalamnya akan dijalankan. 

 Gunakan  keyword break untuk menghentikan statement yang dijalan-

kan apabila ditemukan kecocokan pada case n. Karena jika tidak, pro-

gram akan terus berjalan. Silahkan anda hapus breakagar mengetahui 

apa yang akan terjadi. 

 Gunakan  keyword default sebagai opsi lain untuk menjalankan state-

ment yang lain pula, apabila kecocokan pada tiap case tidak ditemukan. 

3.5 Perulangan 

Perulangan atau yang juga dikenal dengan istilah looping termasuk 

dari struktur kendali (flow control) seperti percabangan. Namun konsep 

Perulangan berbeda dengan konsep Percabangan. Bila pada Perulangan 

statement akan terus dijalankan SELAMA kondisi masih bernilai benar  

(true), dan baru akan berhenti apabila kondisi sudah bernilai salah (false). 

Dengan konsep Perulangan akan mempermudah anda untuk menjalankan 

statement sampai pada kondisi tertentu. Dan berbeda jika anda 

melakukannya secara manual yang akan banyak menyita tenaga dan waktu. 

Contoh, saya ingin mencetak nilai dari 1 sampai 5  menggunakan cara 

manual tanpa menggunakan konsep perulangan. 

<?php 

echo "1 ,";  

echo "2 ,";  

echo "3 ,";  

echo "4 ,";  

echo "5";  

?> 

 

  

4 2 

Dan di bawah ini adalah hasil dari kode sumber di atas : 

 

 

Dalam membuatnya saja sudah agak bosan, walau hanya tinggal copy paste. 

Tapi saya masih harus merubah angkanya menjadi 2 /  3  /  4  /  5.  Jika bingung 

maksudnya, coba tulis kode sumber di atas. Dan jika statement yang ingin 

dijalankan hanya 5,  tentu tidak masalah. Namun, bagaimana jika saya ingin 

mencetak sampai 200 NalL«". Oleh  karena itu di perkenalkanlah konsep 

Perulangan untuk mempermudah dalam pembuatan program. 

Contoh, saya ingin mencetak angka dari 1 sampai 200. 

<?php 

$x=1;  

while($x<=200){  

 echo "$x  ,";  

 $x++;  

}  

?> 

 

Dan di bawah ini adalah hasil dari kode sumber di atas : 

 

PHP: Hypertext Preprocessing  43  

3.5.1 While 

Pada keyword while, kondisi perulangan akan di eksekusi lebih dulu 

selama kondisi masih bernilai benar (true), barulah statement dijalankan. 

Sintaks dasarnya adalah seperti contoh di bawah ini : 

While(kondisi){  

 Statement.... 

}  

Di bawah ini adalah contohnya : 

<?php 

$x=1;  

while($x<=6){  

 echo "<h$x  style='color:  blue';>Heading  $x</h$x>";  

 $x++;  

}  

?> 

 

Dan di bawah ini adalah outputnya : 

 

4 4 

3.5.2 Do While 

Sedangkan bila pada perulangan menggunakan statement do…while, 

statement akan dijalankan lebih dulu, barulah mengecek kondisi perulan-

gan, apakah masih bernilai true. Statement baru akan berhenti ketika kondisi 

tersebut sudah bernilai false. 

Di bawah ini adalah sintaks dasarnya : 

Do{  

 Statement... 

}  

While(kondisi);  

 

Berikut contoh kode sumbernya : 

<?php 

$x=1;  

do{  

 echo "Angka ke $x  <br>";  

 $x++;  

}  

while($x<=6);  

?> 

 

Dan di bawah ini adalah outputnya : 

 

PHP: Hypertext Preprocessing  45  

3.5.3 For 

Perulangan dengan for merupakan tipe pengulangan (iterasi) yang 

jumlah pengulangannya telah ditentukan di awal pendefinisian. 

Dalam perulangan for didefinisikan dengan 3  parameter : 

For(inisialisasi;  kondisi;  increment/decrement){  

 Statement... 

}  

 

Ket : 

 Inisialisasi : membuat nilai awal untuk sebuah variabel. 

 Kondisi : sampai kapan keadaan tersebut di ulang. 

 Increment/decrement  : menaikan atau menurukan nominal nilai per-

ulangan. 

Di bawah ini contoh kode sumbernya : 

<?php 

for($x=1;$x<=7;$x++){  

 echo "Ini adalah hari ke $x  <br>";  

}  

?> 

 

Dan di bawah ini adalah outputnya : 

 

4 6 

3.5.4 Foreach 

Perulangan dengan foreach hanya bisa digunakan pada tipe data Ar-

ray. Fungsinya  sama dengan perulangan for, while, do«ZKLle. Hanya cara 

dan penempatannya saja yang berbeda. 

Bentuk dasarnya adalah seperti ini : 

Foreach($array  as $value){  

 Statement... 

}  

 

Setiap elemen pada array tersebut akan di assign/ditempatkan pada 

variabel $value. Barulah SELURUH elemen ² elemen array tersebut akan di 

eksekusi. 

<?php 

$hari  = array( 

  "Senin", "Selasa",  

  "Rabu", "Kamis",  

  "Jumat", "Sabtu",  

  "Minggu" 

 );  

foreach($hari  as $value){  

 echo "Ini adalah hari $value  <br>";  

}  

?> 

 

Dan di bawah ini adalah hasilnya : 

 

PHP: Hypertext Preprocessing  47  

3.6 Array 

Array dalam bahasa Indonesia disebut juga sebagai Larik. Array berisi 

sekumpulan tipe data yang bernilai sama, maksudnya disini jika isinya tipe 

data String, maka semua datanya bertipe String, jika Integer maka semua 

datanya bertipe Integer. 

Kita dapat menggunakan Array untuk menyimpan banyak nilai dalam 

1 variabel, dan berbeda pada variabel pada umumnya yang hanya menyim-

pan 1 nilai saja. Jadi dapat disimpulkan pula jika Array dapat menampung 

banyak data sekaligus hanya dalam 1 pendeklarasian. 

 

 

Array dapat di akses berdasarkan nomor indeksnya. Seperti pada con-

toh gambar di atas. Dimana jika anda ingin mengakses elemen 1, maka in-

deks yang harus anda gunakan adalah indeks [0],  elemen 2 indeks [1]  dan 

begitu seterusnya. Selain itu Array juga memiliki ukuran, pada gambar di 

atas ukuran Array adalah 4  (Elemen 1, Elemen 2, Elemen 3,  Elemen 4).  Ele-

men pertama di mulai dari 0. 

Di dalam PHP sendiri terdapat 3  jenis tipe array, yakni : 

3.6.1 Array Index 

Indexed Array adalah tipe Array yang elemennya di akses berdasar-

kan nomor Indeksnya. Seperti pada penjelasan dari gambar di atas, dimana 

ketika ingin mengakses elemen 1, maka index yang harus kita gunakan ada-

lah index [0], hal ini karena index array dimulai dari 0. Dan ada 2 cara untuk 

membuat array index, yakni : 

  

4 8 

Cara Pertama : 

Mendeklarasikannya secara langsung menggunakan keyword array, 

sehingga nomor indexnya akan dihasilkan secara otomatis. 

<?php 

$negara  = array("Indonesia", "Malaysia", "Singapura", "Brunei 

Darussalam", "Filipina");  

?> 

Cara Kedua 

Mendeklarasikannya secara manual : 

<?php 

$negara[0]  = "Indonesia";  

$negara[1]  = "Malaysia";  

$negara[2]  = "Singapura";  

$negara[3]  = "Brunei Darussalam";  

$negara[4]  = "Filipina";  

?> 

 

Output dari kedua cara di atas pun juga sama saja, sekarang mari kita 

tambahkan perintah print_r(). 

<?php 

$negara[0]  = "Indonesia";  

$negara[1]  = "Malaysia";  

$negara[2]  = "Singapura";  

$negara[3]  = "Brunei Darussalam";  

$negara[4]  = "Filipina";  

?> 

<pre> 

 <?php print_r($negara)  ?> 

</pre> 

 

 

PHP: Hypertext Preprocessing  49  

3.6.2 Array Assosiative 

Array assosiative adalah array yang memilki pasangan key (kunci) 

dan juga value (nilai) yang dimana masing ² masing value memiliki key ² 

nya sendiri ² sendiri, sehinggan untuk mengakses valuenya yang harus kita 

gunakan adalah nama key ² nya. Berbeda dengan Array Index yang dimana 

bila ingin mendapatkan nilainya maka yang kita akses adalah nomor in-

deksnya. 

Cara pendeklarasian array assosiative adalah seperti ini : 

<?php 

$variabel  = array( 

  key1  => value2, 

  key2  => value2, 

  key3  => value3, 

  key4  => value4, 

  dst... 

?> 

 

Jadi masing ² masing key memiliki value ² nya sendiri ² sendiri, dan kita 

bisa mengakses valuenya berdasarkan key ² nya. Contoh : 

<?php 

$negara  = array( 

  'Indonesia'  => 'Jakarta',  

  'Malaysia'   => 'Kuala  Lumpur',  

  'Singapura'  => 'Singapura',  

  'Thailand'   => 'Bangkok',  

  'Filipina'   => 'Manila'  

);  

echo $negara['Indonesia'];  

?> 

 

Dari contoh kode di atas saya ingin menampilkan output Jakarta, sehingga 

pengaksesan arraynya adalah dengan menggunakan key yang memiliki 

value Jakarta, yakni  : 

$negara['Indonesia'];  

5 0 

 

Selain itu, kita juga dapat menampilkan semua nilai array menggunakan 

konsep perulangan : 

$negara  = array( 

  'Indonesia'  => 'Jakarta',  

  'Malaysia'   => 'Kuala  Lumpur',  

  'Singapura'  => 'Singapura',  

  'Thailand'   => 'Bangkok',  

  'Filipina'   => 'Manila'  

);  

?> 

  

<ul> 

  <?php foreach ($negara  as $key  => $value):  ?> 

      <li>Ibukota <?= $key  ?> adalah <?= $value  ?></li> 

  <?php endforeach ?> 

</ul> 

 

 

PHP: Hypertext Preprocessing  51  

3.6.3 Array Multidimensi 

Array Multidimensi merupakan konsep dimana di dalam array masih 

terdapat array lagi. Multidimensi disini dapat menjadi array 3  dimensi, array 

4  dimensi, dan seterusnya tergantung pada tingkat kedalaman array terse-

but. Dan umumnya, semakin banyak tingkatan array yang dirancang oleh 

developer, akan lebih sulit lagi untuk di atur. 

Dalam contoh di bawah ini saya berikan contoh Array 2 Dimensi : 

<?php 

$negara  = array( 

  array('Jawa  Barat',  'Bandung',  'Depok',  'Bogor'),  

  array('Jawa  Timur',  'Madiun',  'Surabaya',  'Malang'),  

  array('Jawa  Tengah',  'Semarang',  'Tegal',  'Solo')  

);  

?> 

<pre> 

   <?php print_r($negara);  ?> 

</pre> 

 

Dan jika kita print_r() untuk melihat struktur nya, gambaran dari array 2 

dimensi adalah seperti ini : 

 

5 2 

 

Dapat anda lihat pula, kalau dalam array multidimensi sendiri, tiap 

arraynya juga di berikan nomor indeks. Dan untuk mengakses array ini, kita 

dapat menggunakan keyword foreach(), dimana yang akan kita looping 

adalah indeks dari nilai tiap array. Yakni: 

'J awa Barat'  => index[0]  

'Bandung'  => index[1]  

'Depok'  => index[2]  

'Bogor'  => index[3]  

 

Perhatikan contoh di bawah ini : 

<?php 

$negara  = array( 

  array('Jawa  Barat',  'Bandung',  'Depok',  'Bogor'),  

  array('Jawa  Timur',  'Madiun',  'Surabaya',  'Malang'),  

  array('Jawa  Tengah',  'Semarang',  'Tegal',  'Solo')  

);  

?> 

  

<ul> 

  <?php foreach ($negara  as $key  => $value):  ?> 

      <li>Kota - kota di <?= $value[0]  ?> adalah <?= $value[1].',  

'.$value[2].',  '.$value[3]  ?></li> 

  <?php endforeach ?> 

</ul> 

 

 

 

Sedangkan untuk pembuatan array dimensi tingkat 3 / 4 / 5, kita 

hanya perlu memasukan array baru di dalam tingkatan array yang lebih da-

lam. Seperti ini : 

<?php 

$negara  = array( 

  array( 'Asia',  array( 'Indonesia',  array('Jakarta',  'Surabaya')  ) ), 

  array( 'Eropa',  array( 'Inggris',  array('London',  'Manchester')  ) ), 

  array( 'Amerika',  array( 'Amerika',  array('New  York',  'Los  Angeles')  ) 

), 

);  

PHP: Hypertext Preprocessing  53  

?> 

  

<pre> 

  <?php print_r($negara)  ?> 

</pre> 

3.7 Post dan Get Method 

Method merupakan metode atau cara yang digunakan untuk mengi-

rimkan data atau nilai ke halaman lain untuk diproses. Ada 2 Method dalam 

pemrograman PHP yang dapat kita gunakan pada form, yakni method 

POST  dan GET.  Contoh: 

 

Pada form di atas, saya membuat sebuah form dengan method POST  dan 

saya akan mengirimkan data/nilai  ke halaman proses.php (action). 

Kemudian atribut (name) digunakan untuk membuat variable penampung 

nilai. 

Perbedaan method GET  dan POST  

 Method POST  akan mengirimkan data atau nilai langsung ke action un-

tuk ditampung, tanpa menampilkan pada URL. 

 

Sedangkan method GET akan menampilkan data/nilai pada URL, 

kemudian akan ditampung oleh action. 

5 4 

 

 Method POST  menggunakan variable $_POST  untuk menampung 

data/nilai.  

 

Sedangkan method GET menggunakan variable $_GET untuk 

menampung data/nilai.  

 

 Method POST  data yang dikirim tidak terbatas. Sedangkan method GET  

tidak boleh lebih dari 2047  karakter. 

3.8 CRUD 

CRUD adalah akronim untuk Create, Read, Update, dan Delete. Operasi  

CRUD adalah manipulasi data dasar untuk database. Dalam latihan ini kita 

mencoba untuk membuat aplikasi sederhana dengan menggunakan 

perintah PHP dalam melakukan operasi pada table database MYSQL.  

 

PHP: Hypertext Preprocessing  55  

3.8.1 Koneksi database 

Untuk pertama tentukan nama database terlebih dahulu, sebagai con-

toh beri nama Database.sql 

/* Create Database and Table */  

create database crud_db;  

 

use crud_db;  

 

CREATE TABLE `users` (  

  `id` int(2) NOT NULL auto_increment,  

  `name` varchar(25),  

  `email` varchar(25),  

  `mobile` varchar(15),  

  PRIMARY KEY  (`id`)  

);  

 

Jika sudah, kita akan melakukan impor file Database.sql yang telah dibuat 

menggunakan PhpMyadmin. Setelah Database.sql selesai dan tidak terjadi 

error, berikutnya kita akan membuat file config.php 

<?php 

/**  

 *  using mysqli_connect  for database connection 

 */  

 

$databaseHost  = 'localhost';  

$databaseName  = 'crud_db';  

$databaseUsername  = 'root';  

$databasePassword  = '';  

 

$mysqli  = mysqli_connect($databaseHost,  $databaseUsername,  

$databasePassword,  $databaseName);   

 

?> 

 

File  config.php menyimpan informasi tentang database host, 

username dan password. Sebagian besar server lokal bekerja dengan detail 

yang diberikan. Anda dapat mengubahnya sesuai dengan detail host dan 

database Anda. Untuk menghubungkan PHP dengan MySQL,  kita 

menggunakan fungsi mysqli_connect()  dengan alamat server sebagai pa-

rameter pertama, user database sebagai parameter kedua, password user se-

bagai parameter ketiga, dan nama database sebagai parameter keempat. Si-

lahkan isi password sesuai dengan yang dibuat di servernya. Jika tidak 

menggunakan passsword, maka isikan dengan String kosong saja. 

 

5 6 

3.8.2 Membuat Perintah Create 

Perintah Create ini berfungsi untuk membuat pengguna baru. Untuk 

itu kita buat file dengan nama add.php 

<html> 

<head> 

    <title>Add Users</title> 

</head> 

 

<body> 

    <a href="index.php">Go to Home</a> 

    <br/><br/> 

 

    <form action="add.php" method="post" name="form1"> 

        <table width="25%"  border="0"> 

            <tr>  

                <td>Name</td> 

                <td><input type="text" name="name"></td> 

            </tr> 

            <tr>  

                <td>Email</td> 

                <td><input type="text" name="email"></td> 

            </tr> 

            <tr>  

                <td>Mobile</td> 

                <td><input type="text" name="mobile"></td> 

            </tr> 

            <tr>  

                <td></td> 

                <td><input type="submit" name="Submit" value="Add"></td> 

            </tr> 

        </table> 

    </form> 

 

    <?php 

 

    // Check If form submitted, insert form data into users table. 

    if(isset($_POST['Submit']))  {  

        $name  = $_POST['name'];  

        $email  = $_POST['email'];  

        $mobile  = $_POST['mobile'];  

 

        // include database connection file 

        include_once("config.php");  

 

        // Insert user data into table 

        $result  = mysqli_query($mysqli,  "INSERT INTO 

users(name,email,mobile) VALUES('$name','$email','$mobile')");  

 

        // Show message when user added 

        echo "User added successfully. <a href='index.php'>View  

Users</a>";  

    }  

    ?> 

</body> 

</html> 

PHP: Hypertext Preprocessing  57  

 

Formulir  HTML digunakan untuk menerima masukan data pengguna. 

Setelah data pengguna diserahkan, MySQL  INSERT Query  digunakan un-

tuk memasukkan data pengguna ke dalam database. 

3.8.3 Membuat Perintah Read 

<?php 

// Create database connection using config file 

include_once("config.php");  

 

// Fetch all users data from database 

$result  = mysqli_query($mysqli,  "SELECT *  FROM users ORDER BY id DESC");  

?> 

 

<html> 

<head>     

    <title>Homepage</title> 

</head> 

 

<body> 

<a href="add.php">Add New User</a><br/><br/> 

 

    <table width='80%'  border=1> 

 

    <tr> 

        <th>Name</th> <th>Mobile</th> <th>Email</th> <th>Update</th> 

    </tr> 

    <?php   

    while($user_data  = mysqli_fetch_array($result))  {           

        echo "<tr>";  

        echo "<td>".$user_data['name']."</td>";  

        echo "<td>".$user_data['mobile']."</td>";  

        echo "<td>".$user_data['email']."</td>";      

        echo "<td><a href='edit.php?id=$user_data[id]'>Edit</a>  | <a 

href='delete.php?id=$user_data[id]'>Delete</a></td></tr>";          

    }  

    ?> 

    </table> 

</body> 

</html> 

 

File  index.php merupakan file utama yang menyertakan file konfigur-

asi untuk koneksi database. Kemudian menampilkan semua daftar 

pengguna menggunakan MySQL  Select Query.  Pengguna yang akan dit-

ampilkan di dalam daftar perlu menambahkan terlebih dahulu 

menggunakan tautan 'Tambahkan  Pengguna Baru'.  

 

5 8 

3.8.4 Membuat Perintah Update 

Edit.php digunakan untuk mengedit /  update data pengguna. Anda 

dapat mengubah data pengguna dan memperbaruinya. File  ini akan 

mengarahkan pengguna kembali ke homepage, setelah update sukses. 

<?php 

// include database connection file 

include_once("config.php");  

 

// Check if form is submitted for user update, then redirect to homepage 

after update 

if(isset($_POST['update']))  

{     

    $id  = $_POST['id'];  

 

    $name=$_POST['name'];  

    $mobile=$_POST['mobile'];  

    $email=$_POST['email'];  

 

    // update user data 

    $result  = mysqli_query($mysqli,  "UPDATE users SET 

name='$name',email='$email',mobile='$mobile'  WHERE id=$id");  

 

    // Redirect to homepage to display updated user in list 

    header("Location: index.php");  

}  

?> 

<?php 

// Display selected user data based on id 

// Getting id from url 

$id  = $_GET['id'];  

 

// Fetech user data based on id 

$result  = mysqli_query($mysqli,  "SELECT *  FROM users WHERE id=$id");  

 

while($user_data  = mysqli_fetch_array($result))  

{  

    $name  = $user_data['name'];  

    $email  = $user_data['email'];  

    $mobile  = $user_data['mobile'];  

}  

?> 

<html> 

<head>   

    <title>Edit User Data</title> 

</head> 

 

<body> 

    <a href="index.php">Home</a> 

    <br/><br/> 

 

    <form name="update_user"  method="post" action="edit.php"> 

        <table border="0"> 

            <tr>  

                <td>Name</td> 

PHP: Hypertext Preprocessing  59  

                <td><input type="text" name="name" value=<?php echo 

$name;?>> </td> 

            </tr> 

            <tr>  

                <td>Email</td> 

                <td><input type="text" name="email" value=<?php echo 

$email;?>></td>  

            </tr> 

            <tr>  

                <td>Mobile</td> 

                <td><input type="text" name="mobile" value=<?php echo 

$mobile;?>></td>  

            </tr> 

            <tr> 

                <td><input type="hidden" name="id" value=<?php echo 

$_GET['id'];?>></td>  

                <td><input type="submit" name="update" 

value="Update"></td> 

            </tr> 

        </table> 

    </form> 

</body> 

</html> 

 

3.8.5 Membuat Perintah Delete 

File  delete.php hanya dipanggil saat kita klik link 'Delete'  untuk 

pengguna manapun yang dipilih, berikut codingan tersebut: 

<?php 

// include database connection file 

include_once("config.php");  

 

// Get id from URL to delete that user 

$id  = $_GET['id'];  

 

// Delete user row from table based on given id 

$result  = mysqli_query($mysqli,  "DELETE FROM users WHERE id=$id");  

 

// After delete redirect to Home, so that latest user list will be 

displayed. 

header("Location:index.php");  

?> 

 

-oo0oo- 

 

 

 

  

6 0 

 

 STUDI KASUS:  

MEMBANGUN MASTER BLOG  

 

4.1 Membuat database 

Desainlah database dengan nama maste r_bl og dan desain tabel-tabel 

seperti berikut: 

 

6 2 

 

 

 

 

4.2 Membuat Web Master Blog  

 Sebelum mendesain tampilan menu, silahkan download bootstraps 4 

sebagai tools untuk mendesain tampilan web yang berisi kumpulan source 

CSS, Jquery dan Javascript. Silahkan download melalui link   https://get-

bootstrap.com/docs/4.0/getting -started/introduction/  

Setelah selesai mendownload, ekstrak file ke local penyimpanan. Tools 

aplikai yang digunakan dalam pembuatan web master blog ini adalah 

sublime text dan xampp. 

Studi Kasus: Membangun  Master Blog 63  

 

4.2.1  Backend  

Tampilan isi folder admin (backend) untuk web master blog seperti 

berikut: 

 

 

Halaman Login 

 

  

6 4 

Tampilan Dashboard halaman admin 

 

 

Berikut Source Artikel, yang berada di folder artikel. 

Aside.ph p  

<div class="col - sm - 3 col - md - 2 sidebar">  

    <ul class="nav nav - sidebar">  

        <li <?php echo isset($home)? $home : ""; ?>><a 

href="../index.php"><i class="fa fa - home fa - lg"></i> 

Home</a></li>  

        <li <?php echo isset($artikel)? $artikel : ""; ?>><a 

href="index.php"><i class="fa fa - newspaper - o fa - lg"></i> 

Artikel</a></li>  

        <li <?php echo isset($menu)? $menu : ""; ?>><a 

href="../menu"><i class="fa fa - th - list fa - lg"></i> Menu</a></li>  

        <li <?php echo isset($user)? $user : ""; ?>><a 

href="../users"><i class="fa fa - users fa - lg"></i> Users</a></li>  

    </ul>  

</div>  

 

Navbar.php  

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

  <div class="container-fluid"> 

    <div class="navbar-header"> 

      <button type="button" class="navbar-toggle" data-toggle="collapse" 

data-target=".navbar-collapse"> 

        <span class="sr-only">Toggle navigation</span> 

Studi Kasus: Membangun  Master Blog 65  

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

      </button> 

      <a class="navbar-brand" href="index.php"><i class="fa fa-

wrench"></i> Administrator Master Blog</a> 

    </div> 

    <div class="navbar-collapse collapse"> 

      <ul class="nav navbar-nav navbar-right"> 

        <li><a href="tambah_artikel.php"><i class="fa fa-pencil"></i> 

Tulis Artikel</a></li> 

        <li><a href="#"><i class="fa fa-user"></i> <?php echo 

$_SESSION['username']; ?></a></li> 

        <li><a href="../logout.php" title="Log out!"><i class="fa fa-

sign-out"></i> Logout</a></li> 

      </ul> 

    </div> 

  </div> 

</div> 

 

Index. php  

<?php 

session_start(); 

if(isset($_SESSION['username'])){ 

    include('../../konektor.php'); 

?> 

<!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"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" href="../../img/bsi.png"> 

    <title>Administrator Blog</title> 

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

    <link href="../../bootstrap/css/style-admin.css" rel="stylesheet"> 

    <link href="../../font-awesome/css/font-awesome.css" 

rel="stylesheet"> 

  </head> 

  <body> 

    <nav><?php include("navbar.php"); ?></nav> 

    <div class="container-fluid"> 

      <div class="row"> 

          <aside> 

              <?php $artikel = "class='active'"; ?> 

              <?php include('aside.php'); ?> 

          </aside> 

          <section id="konten"> 

              <?php include('data_artikel.php'); ?> 

          </section> 

      </div> 

    </div> 

    <script src="../../bootstrap/js/jquery.js"></script> 

    <script src="../../bootstrap/js/bootstrap.min.js"></script> 

6 6 

    <script src="../../bootstrap/js/holder.js"></script> 

  </body> 

</html> 

<?php 

} else { 

    header('location: ../login.php'); 

?> 

 

Tambah_ artikel.ph p  

<?php 

session_start(); 

if(isset($_SESSION['username'])){ 

    include('../../konektor.php'); 

?> 

<!-- Tampilkan halaman damin --> 

<!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"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" href="../../img/bsi.png"> 

    <title>Administrator Blog</title> 

    <!-- Bootstrap core CSS --> 

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

    <!-- Custom styles for this template --> 

    <link href="../../bootstrap/css/style-admin.css" rel="stylesheet"> 

    <!-- font-awesome untuk ikon --> 

    <link href="../../font-awesome/css/font-awesome.css" 

rel="stylesheet"> 

  </head> 

  <body> 

    <nav><?php include('navbar.php'); ?></nav> 

    <div class="container-fluid"> 

      <div class="row"> 

          <aside> 

              <?php $artikel = "class='active'"; ?> 

              <?php include('aside.php'); ?> 

          </aside> 

          <section id="konten"> 

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-

offset-2 main"> 

 

              <form class="form" action="" method="POST"> 

                  <div class="form-group"> 

                      <input type="text" name="judul" class="form-

control" placeholder="Judul artikel"> 

                  </div> 

                  <div class="form-group"> 

                      <textarea name="isi" class="form-control" 

rows="16" placeholder="Tuliskan apa yang anda pikirkan"></textarea> 

                  </div> 

                  <div class="form-group"> 

Studi Kasus: Membangun  Master Blog 67  

                      <input type="hidden" name="penulis" value="<?php 

echo $_SESSION['username'] ?>"/> 

                      <button type="submit" name="simpan" class="btn 

btn-primary"><i class="fa fa-send"></i> Terbitkan</button> 

                  </div> 

              </form> 

            </div> 

          </section> 

      </div> 

    </div> 

    <!-- Bootstrap core JavaScript 

    ================================================== --> 

    <!-- Placed at the end of the document so the pages load faster --> 

    <script src="../../bootstrap/js/jquery.js"></script> 

    <script src="../../bootstrap/js/bootstrap.min.js"></script> 

    <script src="../../bootstrap/js/holder.js"></script> 

  </body> 

</html> 

<?php 

// kode untuk menyimpan artikel ke database 

if(isset($_POST['simpan'])){ 

    $judul = empty($_POST['judul']) ? "Tampa judul": $_POST['judul']; 

    $isi = $_POST['isi']; 

    $penulis = $_POST['penulis']; 

    // lakukan penyimpanan ke database 

    $simpan = mysqli_query($koneksi, "INSERT INTO artikel 

(judul,isi,penulis) VALUES('$judul','$isi','$penulis')"); 

    if($simpan) { 

        // berhasil tersimpan, arahkan ke tabel data artikel 

        header("location: index.php"); 

    } else { 

        // gagal menyimpan 

        echo "Gagal menyimpan, suatu kesalahan terjadi!"; 

    } 

} else { 

    // suruh user login 

    header('location: ../login.php'); 

?> 

Data_a rtikel.ph p  

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 

  <h2 class="sub-header">Semua Artikel <a href="tambah_artikel.php" 

class="btn btn-success pull-right"><i class="fa fa-plus-circle fa-

lg"></i> Artikel Baru</a></h2> 

  <div class="table-responsive"> 

 

    <table class="table table-striped"> 

      <thead> 

        <tr> 

          <th>#</th> 

          <th>Judul</th> 

          <th>Penulis</th> 

          <th>Tanggal</th> 

        </tr> 

      </thead> 

6 8 

      <tbody> 

          <?php 

            $query = mysqli_query($koneksi, "SELECT id, judul, penulis, 

tanggal FROM artikel"); 

            while ($artikel = mysqli_fetch_array($query)){ 

                echo "<tr>"; 

                echo "<td>".$artikel['id']."</td>"; 

                echo "<td><b>".$artikel['judul']."</b><br/>"; 

                echo "<a 

href='edit_artikel.php?id=".$artikel['id']."'><i class='fa fa-

pencil'></i> Edit</a> | "; 

                echo "<a 

href='hapus_artikel.php?id=".$artikel['id']."'><i class='fa fa-

trash'></i> Hapus</a>"; 

                echo "</td>"; 

                echo "<td>".$artikel['penulis']."</td>"; 

                echo "<td>".$artikel['tanggal']."</td>"; 

                echo "</tr>"; 

            } 

          ?> 

      </tbody> 

    </table> 

  </div> 

</div> 

Edit_artikel.ph p  

<?php 

session_start(); 

if(isset($_SESSION['username'])){ 

    if(isset($_GET['id']) && !empty($_GET['id'])){ 

        // tampilkan form edit 

        include('../../konektor.php'); 

        // ambil data dari database 

        $id = $_GET["id"]; 

        $query = mysqli_query($koneksi, "SELECT * FROM artikel WHERE 

id=$id"); 

        if(mysqli_num_rows($query) > 0){ 

            $art = mysqli_fetch_array($query); 

        } else { 

            // artikel tidak ada di database 

            echo "<script>window.location = 'index.php'</script>"; 

        } 

?> 

<!-- Tampilkan Form ubah --> 

<!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"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" href="../../img/ArdiantaPargo.png"> 

    <title>Administrator Blog</title> 

    <!-- Bootstrap core CSS --> 

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

    <!-- Custom styles for this template --> 

Studi Kasus: Membangun  Master Blog 69  

    <link href="../../bootstrap/css/style-admin.css" rel="stylesheet"> 

    <!-- font-awesome untuk ikon --> 

    <link href="../../font-awesome/css/font-awesome.css" 

rel="stylesheet"> 

  </head> 

  <body> 

    <nav><?php include('../navbar.php'); ?></nav> 

    <div class="container-fluid"> 

      <div class="row"> 

          <aside> 

              <?php $artikel = "class='active'"; ?> 

              <?php include('aside.php'); ?> 

          </aside> 

          <section id="konten"> 

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-

offset-2 main"> 

              <form class="form" action="" method="POST"> 

                  <div class="form-group"> 

                      <input type="text" name="judul" class="form-

control" placeholder="Judul artikel" value="<?php echo $art['judul']; 

?>"> 

                  </div> 

                  <div class="form-group"> 

                      <textarea name="isi" class="form-control" 

rows="16"><?php echo $art['isi']; ?></textarea> 

                  </div> 

                  <div class="form-group"> 

                      <input type="hidden" name="penulis" value="<?php 

echo $_SESSION['username'] ?>"/> 

                      <button type="submit" name="simpan" class="btn 

btn-primary"><i class="fa fa-send"></i> Ubah</button> 

                  </div> 

              </form> 

            </div> 

          </section> 

      </div> 

    </div> 

    <!-- Bootstrap core JavaScript 

    ================================================== --> 

    <!-- Placed at the end of the document so the pages load faster --> 

    <script src="../../bootstrap/js/jquery.js"></script> 

    <script src="../../bootstrap/js/bootstrap.min.js"></script> 

    <script src="../../bootstrap/js/holder.js"></script> 

  </body> 

</html> 

<?php 

    } else { 

        // arahkan ke halaman data artikel 

    } 

    // kode untuk mengupdate artikel ke database 

    if(isset($_POST['simpan'])){ 

        $judul = empty($_POST['judul']) ? "Tampa judul": 

$_POST['judul']; 

        $isi = $_POST['isi']; 

        $penulis = $_POST['penulis']; 

        // lakukan penyimpanan ke database 

        $simpan = mysqli_query($koneksi, "UPDATE artikel SET 

judul='$judul',isi='$isi',penulis='$penulis' WHERE id=$id"); 

        if($simpan) { 

7 0 

            // berhasil tersimpan, arahkan ke tabel data artikel 

            echo "<script>window.location = 'index.php'</script>"; 

        } else { 

            // gagal menyimpan 

            echo "Gagal menyimpan, suatu kesalahan terjadi!"; 

        } 

    } 

} else { 

    // suruh user login 

    header('location: ../login.php'); 

?> 

Hapus_artikel.ph p  

<?php 

    if(isset($_GET["id"]) && !empty($_GET['id'])){ 

        // hapus artikel 

        include("../../konektor.php"); 

        $id = $_GET["id"]; 

        $query = mysqli_query($koneksi, "DELETE FROM artikel WHERE 

id=$id"); 

        if($query) { 

            // arahkan ke data artikel 

            echo "<script> window.location = 'index.php'</script>"; 

        } else { 

            // tampilkan pesan error 

            die("Gaga menghapus: " . mysqli_error($koneksi)); 

        } 

    } else { 

        // arahkan ke data artikel 

        header("location: index.php"); 

    } 

?> 

 

Berikut Source Menu, yang berada di folder menu. 

Aside.ph p  

<div class="col-sm-3 col-md-2 sidebar"> 

    <ul class="nav nav-sidebar"> 

        <li <?php echo isset($home)? $home : ""; ?>><a 

href="../index.php"><i class="fa fa-home fa-lg"></i> Home</a></li> 

        <li <?php echo isset($artikel)? $artikel : ""; ?>><a 

href="../artikel"><i class="fa fa-newspaper-o fa-lg"></i> 

Artikel</a></li> 

        <li <?php echo isset($menu)? $menu : ""; ?>><a 

href="index.php"><i class="fa fa-th-list fa-lg"></i> Menu</a></li> 

        <li <?php echo isset($user)? $user : ""; ?>><a 

href="../users"><i class="fa fa-users fa-lg"></i> Users</a></li> 

    </ul> 

</div> 

 

 

Studi Kasus: Membangun  Master Blog 71  

Navbar.php  

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

  <div class="container-fluid"> 

    <div class="navbar-header"> 

      <button type="button" class="navbar-toggle" data-toggle="collapse" 

data-target=".navbar-collapse"> 

        <span class="sr-only">Toggle navigation</span> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

      </button> 

      <a class="navbar-brand" href="index.php"><i class="fa fa-

wrench"></i> Administrator Blog</a> 

    </div> 

    <div class="navbar-collapse collapse"> 

      <ul class="nav navbar-nav navbar-right"> 

        <li><a href="../artikel/tambah_artikel.php"><i class="fa fa-

pencil"></i> Tulis Artikel</a></li> 

        <li><a href="#"><i class="fa fa-user"></i> <?php echo 

$_SESSION['username']; ?></a></li> 

        <li><a href="../logout.php" title="Log out!"><i class="fa fa-

sign-out"></i> Logout</a></li> 

      </ul> 

    </div> 

  </div> 

</div> 

Index. php  

<?php 

session_start(); 

if(isset($_SESSION['username'])){ 

    include('../../konektor.php'); 

?> 

<!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"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" href="../../img/bsi.png"> 

    <title>Administrator Blog</title> 

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

    <link href="../../bootstrap/css/style-admin.css" rel="stylesheet"> 

    <link href="../../font-awesome/css/font-awesome.css" 

rel="stylesheet"> 

  </head> 

  <body> 

    <nav><?php include('navbar.php'); ?></nav> 

    <div class="container-fluid"> 

      <div class="row"> 

          <aside> 

              <?php $menu = "class='active'"; ?> 

              <?php include('aside.php'); ?> 

          </aside> 

7 2 

          <section id="konten"> 

              <?php include('data_menu.php'); ?> 

          </section> 

      </div> 

    </div> 

    <!-- Bootstrap core JavaScript 

    ================================================== --> 

    <!-- Placed at the end of the document so the pages load faster --> 

    <script src="../../bootstrap/js/jquery.js"></script> 

    <script src="../../bootstrap/js/bootstrap.min.js"></script> 

    <script src="../../bootstrap/js/holder.js"></script> 

  </body> 

</html> 

<?php 

} else { 

    // suruh user login 

    header('location: ../login.php'); 

?> 

Tambah_ men u.p hp  

<?php 

session_start(); 

if(isset($_SESSION['username'])){ 

    include('../../konektor.php'); 

?> 

<!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"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" href="../../img/bsi.png"> 

    <title>Administrator Blog</title> 

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

    <link href="../../bootstrap/css/style-admin.css" rel="stylesheet"> 

    <link href="../../font-awesome/css/font-awesome.css" 

rel="stylesheet"> 

  </head> 

  <body> 

    <nav><?php include('../navbar.php'); ?></nav> 

    <div class="container-fluid"> 

      <div class="row"> 

          <aside> 

              <?php $menu = "class='active'"; ?> 

              <?php include('aside.php'); ?> 

          </aside> 

          <section id="konten"> 

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-

offset-2 main"> 

              <form class="form" action="" method="POST"> 

                  <div class="form-group"> 

                      <label for="nama">Nama Menu</nama> 

                      <input type="text" name="nama" class="form-

control" placeholder="Nama menu" required> 

Studi Kasus: Membangun  Master Blog 73  

                  </div> 

                  <div class="form-group"> 

                      <label for="url">URL</nama> 

                      <input type="text" name="url" class="form-control" 

placeholder="Inputkan URL" required> 

                  </div> 

                  <div class="form-group"> 

                      <label for="urutan">Urutan</nama> 

                      <input type="number" name="urutan" class="form-

control" placeholder="Urutan" required> 

                  </div> 

                  <div class="form-group"> 

                      <label for="Status">Status</nama> 

                      <select name="status" class="form-control"> 

                          <option value="1">Aktif</option> 

                          <option value="0">Non-aktif</option> 

                      </select> 

                  </div> 

                  <div class="form-group"> 

                      <button type="submit" name="simpan" class="btn 

btn-primary"><i class="fa fa-save"></i> Simpan</button> 

                  </div> 

              </form> 

            </div> 

          </section> 

      </div> 

    </div> 

 

    <script src="../../bootstrap/js/jquery.js"></script> 

    <script src="../../bootstrap/js/bootstrap.min.js"></script> 

    <script src="../../bootstrap/js/holder.js"></script> 

  </body> 

</html> 

<?php 

if(isset($_POST['simpan'])){ 

    $nama = $_POST['nama']; 

    $url = $_POST['url']; 

    $urutan = $_POST['urutan']; 

    $status = $_POST['status']; 

    // lakukan penyimpanan ke database 

    $simpan = mysqli_query($koneksi, "INSERT INTO menu 

(nama,url,urutan,status) VALUES('$nama','$url','$urutan','$status')"); 

    if($simpan) { 

        // berhasil tersimpan, arahkan ke tabel data artikel 

        echo "<script>window.location = 'index.php'</script>"; 

    } else { 

        // gagal menyimpan 

        echo "Gagal menyimpan, suatu kesalahan terjadi!"; 

    } 

} else { 

    // suruh user login 

    header('location: ../login.php'); 

?> 

 

 

7 4 

Data_men u.php  

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 

  <h1 class="page-header">Menu <a href="tambah_menu.php" class="btn btn-

success pull-right"><i class="fa fa-plus-circle"></i> Menu</a></h1> 

  <div class="table-responsive"> 

    <table class="table table-striped"> 

      <thead> 

        <tr> 

            <th>Nama Menu</th> 

            <th>URL</th> 

            <th>Urutan</th> 

            <th>Status</th> 

            <th>Aksi</th> 

        </tr> 

        <tbody> 

        <?php 

            $query = mysqli_query($koneksi, "SELECT * FROM menu"); 

            while($menu = mysqli_fetch_array($query)){ 

                echo "<tr>"; 

                echo "<td>".$menu['nama']."</td>"; 

                echo "<td>".$menu['url']."</td>"; 

                echo "<td>".$menu['urutan']."</td>"; 

                echo ($menu['status'] == 1) ? "<td>Aktif</td>":"<td>Non-

aktif</td>"; 

                echo "<td><a href='edit_menu.php?id=".$menu['id']."' 

class='btn btn-info'><i class='fa fa-edit'></i></a> <a 

href='hapus_menu.php?id=".$menu['id']."' class='btn btn-danger'><i 

class='fa fa-trash'></i></a></td>"; 

                echo "</tr>"; 

            } 

         ?> 

      </tbody> 

    </table> 

  </div> 

</div> 

 

Edit_me nu.php  

<?php 

session_start(); 

if(isset($_SESSION['username'])){ 

    include('../../konektor.php'); 

    if(isset($_GET['id']) && !empty($_GET['id'])){ 

        include('../../konektor.php'); 

        $id = $_GET["id"]; 

        $query = mysqli_query($koneksi, "SELECT * FROM menu WHERE 

id=$id"); 

        if(mysqli_num_rows($query) > 0){ 

            $mn = mysqli_fetch_assoc($query); 

        } else { 

            echo "<script>window.location = 'index.php'</script>"; 

        } 

?> 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

Studi Kasus: Membangun  Master Blog 75  

    <meta charset="utf-8"> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" href="../../img/bsi.png"> 

    <title>Administrator Blog</title> 

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

    <link href="../../bootstrap/css/style-admin.css" rel="stylesheet"> 

    <link href="../../font-awesome/css/font-awesome.css" 

rel="stylesheet"> 

  </head> 

  <body> 

    <nav><?php include('../navbar.php'); ?></nav> 

    <div class="container-fluid"> 

      <div class="row"> 

          <aside> 

              <?php $menu = "class='active'"; ?> 

              <?php include('aside.php'); ?> 

          </aside> 

          <section id="konten"> 

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-

offset-2 main"> 

 

                <form class="form" action="" method="POST"> 

                    <div class="form-group"> 

                        <label for="nama">Nama Menu</nama> 

                        <input type="text" name="nama" class="form-

control" placeholder="Nama menu" required value="<?php echo $mn['nama']; 

?>"> 

                    </div> 

                    <div class="form-group"> 

                        <label for="url">URL</nama> 

                        <input type="text" name="url" class="form-

control" placeholder="Inputkan URL" required value="<?php echo 

$mn['url']; ?>"> 

                    </div> 

                    <div class="form-group"> 

                        <label for="urutan">Urutan</nama> 

                        <input type="number" name="urutan" class="form-

control" placeholder="Urutan" required value="<?php echo $mn['urutan']; 

?>"> 

                    </div> 

                    <div class="form-group"> 

                        <label for="Status">Status</nama> 

                        <select name="status" class="form-control"> 

                            <option value="1" <?php echo ($mn['status'] 

== 1) ? "selected":"" ?>>Aktif</option> 

                            <option value="0" <?php echo ($mn['status'] 

== 0) ? "selected":"" ?>>Non-aktif</option> 

                        </select> 

                    </div> 

                    <div class="form-group"> 

                        <input type="hidden" name="id" value="<?php echo 

$mn['id']; ?>" /> 

                        <button type="submit" name="simpan" class="btn 

btn-primary"><i class="fa fa-save"></i> Simpan</button> 

                    </div> 

                </form> 

7 6 

              </form> 

            </div> 

          </section> 

      </div> 

    </div> 

    <script src="../../bootstrap/js/jquery.js"></script> 

    <script src="../../bootstrap/js/bootstrap.min.js"></script> 

    <script src="../../bootstrap/js/holder.js"></script> 

  </body> 

</html> 

<?php 

    } else { 

        // arahkan ke halaman data artikel 

    } 

    // kode untuk menyimpan menu ke database 

    if(isset($_POST['simpan'])){ 

        $id = $_POST['id']; 

        $nama = $_POST['nama']; 

        $url = $_POST['url']; 

        $urutan = $_POST['urutan']; 

        $status = $_POST['status']; 

        $simpan = mysqli_query($koneksi, "UPDATE menu SET nama='$nama', 

url='$url', urutan='$urutan', status='$status' WHERE id=$id"); 

        if($simpan) { 

            echo "<script>window.location = 'index.php'</script>"; 

        } else { 

            echo "Gagal menyimpan, suatu kesalahan terjadi!"; 

        } 

    } 

 

} else { 

    header('location: ../login.php'); 

?> 

Hapus_me nu. php  

<?php 

    if(isset($_GET["id"]) && !empty($_GET['id'])){ 

        // hapus artikel 

        include("../../konektor.php"); 

        $id = $_GET["id"]; 

        $query = mysqli_query($koneksi, "DELETE FROM menu WHERE 

id=$id"); 

        if($query) { 

            // arahkan ke data artikel 

            echo "<script> window.location = 'index.php'</script>"; 

        } else { 

            // tampilkan pesan error 

            die("Gaga menghapus: " . mysqli_error($koneksi)); 

        } 

    } else { 

        // arahkan ke data artikel 

        header("location: index.php"); 

    } 

?> 

 

Studi Kasus: Membangun  Master Blog 77  

Berikut Source User, yang berada di folder user. 

Aside.ph p  

<div class="col-sm-3 col-md-2 sidebar"> 

    <ul class="nav nav-sidebar"> 

        <li <?php echo isset($home)? $home : ""; ?>><a 

href="index.php"><i class="fa fa-home fa-lg"></i> Home</a></li> 

        <li <?php echo isset($artikel)? $artikel : ""; ?>><a 

href="artikel"><i class="fa fa-newspaper-o fa-lg"></i> Artikel</a></li> 

        <li <?php echo isset($menu)? $menu : ""; ?>><a href="menu"><i 

class="fa fa-th-list fa-lg"></i> Menu</a></li> 

        <li <?php echo isset($user)? $user : ""; ?>><a href="users"><i 

class="fa fa-users fa-lg"></i> Users</a></li> 

    </ul> 

</div> 

 

Navbar.php  

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

  <div class="container-fluid"> 

    <div class="navbar-header"> 

      <button type="button" class="navbar-toggle" data-toggle="collapse" 

data-target=".navbar-collapse"> 

        <span class="sr-only">Toggle navigation</span> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

      </button> 

      <a class="navbar-brand" href="index.php"><i class="fa fa-

wrench"></i> Administrator Blog</a> 

    </div> 

    <div class="navbar-collapse collapse"> 

      <ul class="nav navbar-nav navbar-right"> 

        <li><a href="artikel/tambah_artikel.php"><i class="fa fa-

pencil"></i> Tulis Artikel</a></li> 

        <li><a href="#"><i class="fa fa-user"></i> <?php echo 

$_SESSION['username']; ?></a></li> 

        <li><a href="logout.php" title="Log out!"><i class="fa fa-sign-

out"></i> Logout</a></li> 

      </ul> 

    </div> 

  </div> 

</div> 

 

Index. php  

<?php 

session_start(); 

if(isset($_SESSION['username'])){ 

?> 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

7 8 

    <meta charset="utf-8"> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" href="../img/bsi.png"> 

    <title>Administrator Blog</title> 

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

    <link href="../bootstrap/css/style-admin.css" rel="stylesheet"> 

    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet"> 

  </head> 

  <body> 

    <nav><?php include('navbar.php'); ?></nav> 

    <div class="container-fluid"> 

      <div class="row"> 

          <aside> 

              <?php $home = "class='active'"; ?> 

              <?php include('aside.php'); ?> 

          </aside> 

          <section id="konten"> 

              <?php include('home.php'); ?> 

          </section> 

      </div> 

    </div> 

    <script src="../bootstrap/js/jquery.js"></script> 

    <script src="../bootstrap/js/bootstrap.min.js"></script> 

    <script src="../bootstrap/js/holder.js"></script> 

  </body> 

</html> 

 

<?php 

} else { 

    header('location: login.php'); 

?> 

 

Login.php  

<?php 

if(isset($_POST['login'])){ 

    include('../konektor.php'); 

    session_start(); 

    $user = $_POST['username']; 

    $pass = md5($_POST['password']); 

    $query = mysqli_query($koneksi, "SELECT * FROM user WHERE 

username='$user' AND password='$pass'"); 

    if(mysqli_num_rows($query) > 0){ 

        $_SESSION['username'] = $user; 

        header("location: index.php"); 

    } else { 

        $login_gagal = "Login gagal, silahkan coba lagi!"; 

    } 

?> 

<!DOCTYPE html> 

<html> 

<head> 

Studi Kasus: Membangun  Master Blog 79  

    <title>Login Admin</title> 

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

    <link rel="stylesheet" href="../bootstrap/css/style-admin.css" /> 

    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css" 

/> 

</head> 

<body> 

    <div class="container"> 

        <div class="row"> 

            <div class="col-md-12"> 

                <div class="panel panel-default panel-login"> 

                  <div class="panel-heading">Login Admin</div> 

                  <div class="panel-body"> 

                    <form role="form" action="" method="POST"> 

                      <div class="form-group"> 

                        <label for="username">Username</label> 

                        <input type="text" class="form-control" 

placeholder="username" name="username"> 

                      </div> 

                      <div class="form-group"> 

                        <label for="password">Password</label> 

                        <input type="password" class="form-control" 

placeholder="password" name="password"> 

                      </div> 

                      <?php if(isset($login_gagal)) { ?> 

                      <div class="form-group alert alert-warning"> 

                          <p><i class="fa fa-warning"></i> <?php echo 

$login_gagal; ?></p> 

                      </div> 

                      <?php } ?> 

                      <button type="submit" name="login" class="btn btn-

primary pull-right"><i class="fa fa-paper-plane"></i> Login</button> 

                    </form> 

                    </div> 

                </div> 

            </div> 

        </div> 

    </div> 

</body> 

</html> 

 

Logout.p h p  

<?php 

session_start(); 

session_unset($_SESSION['username']); 

header('location: login.php'); 

?> 

Home.php 

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 

  <h1 class="page-header">Home Admin</h1> 

  <div class="row placeholders"> 

    <div class="col-xs-6 col-sm-3 placeholder"> 

      <img data-src="holder.js/200x200/auto/sky" class="img-responsive" 

alt="Generic placeholder thumbnail"> 

      <h4>Label</h4> 

      <span class="text-muted">Something else</span> 

8 0 

    </div> 

    <div class="col-xs-6 col-sm-3 placeholder"> 

      <img data-src="holder.js/200x200/auto/vine" class="img-responsive" 

alt="Generic placeholder thumbnail"> 

      <h4>Label</h4> 

      <span class="text-muted">Something else</span> 

    </div> 

    <div class="col-xs-6 col-sm-3 placeholder"> 

      <img data-src="holder.js/200x200/auto/sky" class="img-responsive" 

alt="Generic placeholder thumbnail"> 

      <h4>Label</h4> 

      <span class="text-muted">Something else</span> 

    </div> 

    <div class="col-xs-6 col-sm-3 placeholder"> 

      <img data-src="holder.js/200x200/auto/vine" class="img-responsive" 

alt="Generic placeholder thumbnail"> 

      <h4>Label</h4> 

      <span class="text-muted">Something else</span> 

    </div> 

  </div> 

</div> 

 

4.2.2  Frontend  

Struktur folder untuk frontend dapat dilihat sebagai berikut, yang 

perlu diperhatikan bahwa file yang diblok adalah source untuk halaman 

frontend. 

 

Studi Kasus: Membangun  Master Blog 81  

 

 

404.php  

<div class="artikel-kop"> 

    <h2><b>ERROR 404: tidak ditemukan</b></h2> 

</div> 

<div class="artikel-isi"> 

    <div class="alert alert-warning"> 

        <p>Halaman yang anda akses tidak ditemukan pada server ini. 

Silahkan menuju ke halaman yang lain atau kontak admin melalui email: 

<code>ardianta_pargo@yahoo.co.id</code> Terima kasih!</p> 

    </div> 

</div> 

Konektor. p h p  

<?php 

// konfigurasi database 

$host = "localhost"; 

$user = "root"; 

$pass = ""; 

$db = "master_blog"; 

// melakukan koneksi ke db 

$koneksi = mysqli_connect($host, $user, $pass, $db); 

if(!$koneksi){ 

 echo "Gagal konek: " . die(mysqli_error($koneksi)); 

 

Menu.php  

<div class="container wrap"> 

    <div class="row"> 

        <div class="col-md-12"> 

            <ol class="nav navbar-nav"> 

                <li><a href="index.php">Home</a></li> 

8 2 

                <li><a href="daftar_isi.php">Daftar isi</a></li> 

                <li><a href="about.php">About</a></li> 

            </ol> 

            <ol class="nav navbar-nav navbar-right"> 

                <li><a href="http://facebook.com target="blank"><i 

class="fa fa-lg fa-facebook-square"></i></a></li> 

                <li><a href="http://twitter.com" target="blank"><i 

class="fa fa-lg fa-twitter-square"></i></a></li> 

            </ol> 

        </div> 

    </div> 

</div> 

 

Header.php  

<div class="container wrap"> 

    <div class="row"> 

        <div class="col-md-12"> 

            <div class="profil"> 

                <img src="img/bsi.png" /> 

                <div class="deskripsi"> 

                    <h1><b>Programmer PHP</b></h1> 

                    <p>Belajar Asyik dengan PHP !!!!</p> 

                </div> 

            </div> 

        </div> 

    </div> 

</div> 

Footer.php  

<div class="container wrap"> 

    <div class="row"> 

        <div class="col-md-6"> 

            <h4><b>Kontak BSI</b></h4> 

            <p>Jl. Abdurrahman Saleh No. 18A</p> 

            <p>Telepon <tel>0561-583924</tel>,<br> Email: 

<b>kampus_P1@bsi.ac.id</b></p> 

            <br><br> 

        </div> 

        <div class="col-md-6"> 

            <h4><b>Sosmed @ubsi_pontianak</b></h4> 

            <div> 

                <p class="fa fa-lg fa-twitter" style="float: left; 

margin: 5px 10px"></p> <p>Sedang belajar membuat master blog dengan #php 

dan #mysql. Ternyata mudah sekali!</p> 

                <p class="fa fa-lg fa-facebook" style="float: left; 

margin: 5px 10px"></p> <p>PHP-in Laptop sampai Error!</p> 

            </div> 

        </div> 

    </div> 

    <div class="row"> 

        <div class="col-md-12"> 

            <hr> 

            <p>Hak Cipta &copy; <?php  echo Date("Y"); ?> Programmer 

PHP</p> 

        </div> 

Studi Kasus: Membangun  Master Blog 83  

    </div> 

</div> 

 

Index. php  

<?php include("konektor.php"); ?> 

<!DOCTYPE html> 

<html> 

    <head> 

        <meta charset="utf-8"> 

        <title>Blog Programer PHP</title> 

        <link rel="icon" href="img/bsi.png" /> 

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

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

        <link rel="stylesheet" href="font-awesome/css/font-awesome.css" 

/> 

    </head> 

    <body> 

        <header> 

            <?php include("header.php"); ?> 

        </header> 

        <nav class="navbar navbar-default"><?php include("menu.php"); 

?></nav> 

        <article> 

            <div class="container wrap"> 

                <div class="row"> 

                    <div class="col-md-12"> 

                        <?php 

                            $query = mysqli_query($koneksi, "SELECT * 

FROM artikel ORDER BY tanggal DESC"); 

                            // looping Artikel 

                            while($artikel = 

mysqli_fetch_array($query)){ 

                                echo "<div class='artikel-kop'>"; 

                                echo 

"<h2><b>".$artikel['judul']."</b></h2>"; 

                                echo "<p class='artikel-tanggal'>Oleh 

<b>".$artikel['penulis']."</b>, pada ".$artikel['tanggal']."</p>"; 

                                echo "</div>"; 

                                echo "<div class='artikel-isi'>"; 

                                echo substr($artikel['isi'], 0, 255); 

                                echo " [<a 

href='artikel.php?id=".$artikel['id']."' />Lanjut Baca...</a>]"; 

                                echo "</div><hr/>"; 

                            } 

                        ?> 

                        <!-- END ARTIKEL --------------> 

                    </div> 

                </div> 

            </div> 

        </article> 

        <footer> 

            <?php include("footer.php"); ?> 

        </footer> 

    </body> 

</html> 

About.php 

8 4 

<?php include("konektor.php"); ?> 

<!DOCTYPE html> 

<html> 

    <head> 

        <meta charset="utf-8"> 

        <title>Blog Programer PHP</title> 

        <link rel="icon" href="img/ArdiantaPargo.png" /> 

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

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

        <link rel="stylesheet" href="font-awesome/css/font-awesome.css" 

/> 

    </head> 

    <body> 

        <header> 

            <?php include("header.php"); ?> 

        </header> 

        <nav class="navbar navbar-default"><?php include("menu.php"); 

?></nav> 

        <article> 

            <div class="container wrap"> 

                <div class="row"> 

                    <div class="col-md-12"> 

                        <!-- ARTIKEL ------------------> 

                        <div class='artikel-kop'> 

                            <h2><b>Tentang Blog ini</b></h2> 

                        </div> 

 

                        <div class='artikel-isi'> 

                            <p>Blog ini adalah blog eksperimen di 

Labroatorium. Blog ini dibuat dengan PHP dan MySQL.</p> 

                            <br><br> 

                        </div> 

                        <!-- END ARTIKEL --------------> 

                    </div> 

                </div> 

            </div> 

        </article> 

        <footer> 

            <?php include("footer.php"); ?> 

        </footer> 

    </body> 

</html> 

 

Daftar_isi.php  

<?php include("konektor.php"); ?> 

<!DOCTYPE html> 

<html> 

    <head> 

        <meta charset="utf-8"> 

        <title>Blog Programer PHP</title> 

        <link rel="icon" href="img/bsi.png" /> 

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

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

        <link rel="stylesheet" href="font-awesome/css/font-awesome.css" 

/> 

    </head> 

Studi Kasus: Membangun  Master Blog 85  

    <body> 

        <header> 

            <?php include("header.php"); ?> 

        </header> 

        <nav class="navbar navbar-default"><?php include("menu.php"); 

?></nav> 

        <article> 

            <div class="container wrap"> 

                <div class="row"> 

                    <div class="col-md-12"> 

                        <!-- ARTIKEL ------------------> 

                        <?php 

                            $query = mysqli_query($koneksi, "SELECT * 

FROM artikel ORDER BY tanggal DESC"); 

                            $i = 1; 

                            // looping Artikel 

                            echo "<div class='list-group'>"; 

                            while($artikel = 

mysqli_fetch_array($query)){ 

                                echo "<a class='list-group-item' 

href='artikel.php?id=".$artikel['id']."'>$i. 

<b>".$artikel['judul']."</b><span 

class='badge'>".$artikel['tanggal']."</span></a>"; 

                                $i++; 

                            } 

                            echo "</div>"; 

                        ?> 

                        <!-- END ARTIKEL --------------> 

                    </div> 

                </div> 

            </div> 

        </article> 

        <footer> 

            <?php include("footer.php"); ?> 

        </footer> 

    </body> 

</html> 

 

Artikel.ph p  

<?php include("konektor.php"); ?> 

<!DOCTYPE html> 

<html> 

    <head> 

        <meta charset="utf-8"> 

        <title>Blog Programer PHP</title> 

        <link rel="icon" href="img/bsi.png" /> 

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

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

        <link rel="stylesheet" href="font-awesome/css/font-awesome.css" 

/> 

    </head> 

    <body> 

        <header> 

            <?php include("header.php"); ?> 

        </header> 

8 6 

        <nav class="navbar navbar-default"><?php include("menu.php"); 

?></nav> 

        <article> 

            <div class="container wrap"> 

                <div class="row"> 

                    <div class="col-md-12"> 

                        <!-- ARTIKEL ------------------> 

                        <?php 

                            if(isset($_GET['id']) && 

!empty($_GET['id'])){ 

                                $id = $_GET['id']; 

                                $query = mysqli_query($koneksi, "SELECT 

* FROM artikel WHERE id='$id' ORDER BY tanggal DESC"); 

                                if(mysqli_num_rows($query) > 0 ){ 

                                    // looping Artikel 

                                    while($artikel = 

mysqli_fetch_array($query)){ 

                                    echo "<div class='artikel-kop'>"; 

                                    echo 

"<h2><b>".$artikel['judul']."</b></h2>"; 

                                    echo "<p class='artikel-

tanggal'>Oleh <b>".$artikel['penulis']."</b>, pada 

".$artikel['tanggal']."</p>"; 

                                    echo "</div>"; 

                                    echo "<div class='artikel-isi'>"; 

                                    echo $artikel['isi']; 

                                    echo "</div><hr/>"; 

                                    } 

                                } else { 

                                    include("404.php"); 

                                } 

                            } else { 

                                include("404.php"); 

                            } 

                        ?> 

                        <!-- END ARTIKEL --------------> 

                    </div> 

                </div> 

            </div> 

        </article> 

        <footer> 

            <?php include("footer.php"); ?> 

        </footer> 

    </body> 

</html> 

 

-oo0oo- 

 

 

 

 

 

HTML Layanan layout web hingga studi kasus untuk meningkatkan 

pemahaman lebih luas mengenai web 

Komputer Komputer di dalam satu jaringan dapat saja terkoneksi 24 jam  

PHP  Salah satu bahasa pemrograman yang bayak digunakan oleh 

developer untuk mengembagkan suatu system informasi 

Web  Sekumpulan computer yang saling terkoneksi dan berbicara 

satu sama lain 

Mater Blog Studi kasus yang di buat untuk latihan dasar dari 

pembelajaran buku ini 

Variable  Suatu lokasi penyimpanan (di dalam memori komputer) yang 

berisikan nilai atau informasi yang nilainya tidak diketahui 

maupun telah diketahui 

Xampp Web server 

 

-oo0oo- 

 

9 0