Modul D3 - WebProgramming1 - 2018 PDF

MODUL PRAKTIKUM
WEB PROGRAMMING 1
Disusun Oleh Tim Penyusun Modul Manajeman Informatika
Akademik Manajemen Informatika dan Komputer

Bina Sarana Informatika
Jakarta
2018
Web Programming I
AMIK Bina Sarana Informatika
BAB I
KONSEP DASAR WEB
1.1. Dasar-Dasar Website

1.1.1. Internet
Internet merupakan “kependekan dari kata “internetwork”, yang berarti
rangkaian komputer yang terhubung menjadi beberapa rangkaian jaringan”. Sistem
komputer terhubung secara global dan menggunakan TCP/IP sebagai protocol.
Secara umum internet dapat diartikan sebagai pertukaran informasi dan komunikasi.
Semua informasi bisa didapatkan dengan mudah dan bebas di internet tanpa ada
batasan.
Ada beberapa istilah yang sering digunakan apabila anda bekerja dengan
internet diantaranya yaitu:
1. World Wide Web (WWW)
WWW merupakan kumpulan web server diseluruh dunia yang dapat
menyediakan data dan informasi untuk dapat digunakan secara massal.
2. Website
Website atau situs web merupakan sebuah alamat tertentu di WWW yang
menyediakan informasi tertentu. Untuk membuka sebuah situs web, anda dapat
menggunakan browser.
3. Web Pages (Halaman Web)
Web pages atau halaman web merupakan bagian dari situs web, apabila situs
web diumpamakan merupakan sebuah buku, maka halaman web merupakan
lembaran-lembaran kertas penyusun buku tersebut.
4. Home Page (Halaman Muka)
Homepage merupakan halaman muka dari sebuah situs web, atau ibarat cover
muka sebuah buku. Homepage biasanya berupa outline dari isi situs web yang
bersangkutan.
2
Web Programming I
5. Browser
Browser adalah aplikasi yang digunakan untuk berselancar didunia internet.
Browser dapat memandu pengguna internet untuk berpindah antar situs web
dengan mudah.
6. URL (Universal Resource Locator)
URL merupakan suatu alamat yang menunjukkan sebuah halaman tertentu
internet. Contoh URL adalah: http://www.google.com
7. HTTP (Hypertext Transfer Protocol)
HTTP adalah bagian dari sebuah URL yang mengidentifikasikan lokasi web,
dan digunakan dalam protokol HTML.
8. DNS (Domain Name System)
DNS merupakan sistem database terdistribusi yang tidak banyak dipengaruhi
oleh bertambanhnya database. DNS menjamin informasi host terbaru akan
disebarkan ke jaringan bila diperlukan.
9. TCP/IP (Transmission Control Protocol / Internet Protocol)
TCP/IP (Transmission Control Protocol/Internet Protocol) merupakan metode-
metode yang digunakan untuk menghubungi server. TCP/IP merupakan bahasa
standarisasi untuk internet.
10. IP (Internet Protocol)
IP (Internet Protocol) merupakan protokol yang digunakan dalam internet,
secara teknis bermakna suatu bentuk pengisian dan pengalamatan data-data dan
informasi yang akan dikirim melalui internet.
11. Hyperlink
Hyperlink atau disebut link saja merupakan sebuah fasilitas yang sangat
berperan mempopulerkan pengguna internet, karena mampu mereferensikan
sebuah teks atau gambar ke alamat lain di internet.
12. Web Browser
Menggunakan web browser mudah, yang diperlukan hanyalah Anda harus
memiliki alamat web yang akan dibuka. Alamat ini biasa disebut dengan
Uniform Resource Locator (URL). Di dalam sistem operasi Windows Anda
3
Web Programming I
juga terdapat program web browser sertaan, yaitu Internet Explorer. Namun
demikian diluar terdapat banyak program alternative web browser yang
sebagian besar bersifat gratis, seperti Netscape, Firefox, Opera, Avant Browser,
dan seterusnya.
1.1.2. Perangkat Lunak Web Server
Web Server adalah sebuah perangkat lunak server yang berfungsi menerima
permintaan HTTP atau HTTPS dari Client yang dikenal dengan web browser dan
mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya
berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah:
a. Apache, web server antar platform
1) XAMPP
2) PHPTriad; discontinued
3) Apache2Triad
b. Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS
Windows
1.2. Struktur Navigasi
Struktur Navigasi adalah “Susunan menu atau hirarki dari suatu situs yang
menggambarkan isi dari setiap halaman dan link atau navigasi tiap halaman pada
suatu situs web”. Struktur Navigasi dapat dikatakan sebagai penggambar dari
hubungan atau rantai kerja dari seluruh elemen yang akan digunakan dalam aplikasi.
Struktur Navigasi dapat digolongkan menurut kebutuhan akan objek,
kemudahan pemakaian, keinteraktifitasannya, dan kemudahan membuatnya yang
berpengaruh terhadap waktu pembuatan suatu situs web. Dalam penggambarannya
Struktur Navigasi terbagi kedalam 4 Struktur yang berbeda yaitu: Linier, Non Linier,
Hierarchical (Hirarki) dan Composit (Campuran).
Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam
proses pembuatan aplikasi web, yaitu:
1. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut,
yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.
4
Web Programming I
Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman
sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau
dua halaman sesudahnya.
Gambar 1.1. Struktur Navigasi Linier

Contoh :
Gambar 1.2 Contoh Struktur Navigasi Linier
2. Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu
struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan
kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master
Page (halaman utama pertama), halaman utama ini mempunyai halaman percabangan
yang disebut Slave Page (halaman pendukung). Jika salah satu halaman pendukung
dipilih atau diaktifkan, maka tampilan tersebut akan bernama Master Page (halaman
utama kedua), dan seterusnya. Pada struktur navigasi ini tidak diperkenankan adanya
tampilan secara linier.
Gambar 1.3. Struktur Navigasi Hirarki
5
Web Programming I
Contoh :
Gambar 1.4 Contoh Struktur Navigasi Hirarki
3. Struktur Navigasi Non-Linier

Struktur navigasi non-linier atau struktur tidak berurut merupakan
pengembangan dari struktur navigasi linier. Pada struktur
ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat pada
struktur nonlinier ini berbeda dengan percabangan pada struktur hirarki, karena pada
percabangan nonlinier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan
mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave Page.
Gambar 1.5. Struktur Navigasi Non-Linier
Contoh :
Gambar 1.6. Contoh Struktur Navigasi Non-Linier
6
Web Programming I
4. Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur
sebelumnya yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa
disebut dengan struktur navigasi bebas. Struktur navigasi ini banyak digunakan dalam
pembuatan website karena struktur ini dapat digunakan dalam pembuatan website
sehingga dapat memberikan ke-interaksian yang lebih tinggi.
Gambar 1.7. Struktur Navigasi Campuran

Contoh :
Gambar 1.8. Contoh Struktur Navigasi Campuran
Tugas 01 :
Buatlah Struktur Navigasi dari sebuah halaman website.
7
Web Programming I
1.3. Pengertian HTML (Hypertext Markup Language)

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk
menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas,
artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang
di banyak Negara dan bias dikatakan sebagai sebuah bahasa yang dikembangkan
bersama-sama secara global.
Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh
editor teks apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh
tag-teks yang dimulai dengan symbol < dan berakhir dengan sebuah symbol >.
Editor teks yang digunakan oleh penyusun adalah menggunakan Notepad dan
XAMPP Versi 1.8.1 untuk web servernya dengan bahasa pemrograman PHP Versi 5.
1.4. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan
tag akhir. Tag berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya
</HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. Sebuah
dokumen HTML standar terlihat seperti ini :
Keterangan :
1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.
8
Web Programming I
2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini
akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag
<META> dan <TITLE>. Tag <META> merupakan informasi atau header suatu
dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML
secara otomatis dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang
akan dipanggil.
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META>
dalam suatu document HTML boleh ada maupun tidak.
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web
memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>.
Judul ini akan muncul dalam titlebar dari browser.
4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.
Contoh penggunaan script HTML
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan
dengan nama Contoh01.php
Judul Web
Perintah dibuat di antara

<body> dan <body>
Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\ buat folder baru
untuk menyimpan file di dalam folder htdocs. Simpan file dengan nama
9
Web Programming I
contoh01.html. Pembuatan nama file pada saat penyimpanan harus diakhiri dengan
extention “.html”
Cara penyimpanan dengan Notepad, perhatikan cara berikut :
Sertakan
extension .html
pada nama
filenya contoh :
contoh01.html
Pastikan memilih
All Files pada
Save as Type
Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla,
google chrome, internet explorer atau jenis browser lain. Ketikkan pada address bar
“Localhost\Nama Folder Penyimpanan\”, kemudian pilih file contoh01.html
Sebelum di ketikkan alamat file tersebut, pastikan anda telah menjalankan Module
Apache pada Xampp Control Panel.
Lihat gambar di bawah ini :
Klik Tombol start pada

service Xampp Control
Panel
10
Web Programming I
Ketikkan localhost
kemudian nama folder
penyimpanan file
Klik di contoh01.html
Hasilnya :
Kode-kode dalam HTML biasanya disebut TAG. Tag adalah sesuatu yang
digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag dalam
HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garismiring ( / ).
Biasanya Tag dituliskan secara berpasangan, misanya <h1> dan </h1>. Tag yang
tidak menggunakan garis miring ( / ) adalah Tag pembuka atau awal elemen.
Sedangkan yang Tag yang mengandung garis miring ( / ) adalah penutup elemen atau
akhir elemen. Namun, ada juga Tag yang dalam pemakaiannya tidak berpasangan,
diantaranya adalah :
a. Tag untuk ganti paragraph yaitu <p>
b. Tag untuk ganti baris atau line break yaitu <br>
c. Tag untuk garis datar yaitu <hr>
d. Tag list item yaitu <li>
Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis
menggunakan pasangannya. Hal ini dilakukan untuk mengantisipasi standar
rekomendasi HTML kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita
bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ).
11
Web Programming I
Tapi untuk mengantisipasi standar penulisan Tag, sebaiknya kita menggunakan huruf
kecil semua.
Jenis – jenis tag dalam HTML :
12
Web Programming I
13
Web Programming I
Contoh script penggunaan Tag HTML

dengan nama Contoh02.html
Simpan dengan nama contoh02.html

Hasil Tampilan
14
Web Programming I
Tugas 02 :
Buatlah script html sehingga menghasilkan tampilan berikut ini :
1.5. Pembuatan Tabel Menggunakan HTML

Tabel penting peranannya dalam halaman Web, selain untuk menampilkan
teks atau gambar dalam format lajur dan kolom bias juga menggunakan tabel untuk
membantu me-layout tampilan halaman.
Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column.
Untuk membuat tabel, anda menggunakan tag <table> dan menutupnya dengan tag
</table>. Anda bisa juga menambahkan atribut lain di tag <table> pembuka.
Misalnya menentukan warna, border, dan sebagainya.
Di dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :
a. Tag <tr>
Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row.
b. Tag <td>
Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di
dalam tag <tr>. TD singkatan dari Table Data.
15
Web Programming I
c. Tag <th>
Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk header
tabel. TH singkatan dari Table Header.
Menggabungkan sel
Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita ingin
membuat sebuah sel memiliki lebar atau tinggi yang berbeda dari sel-sel lainnya,
maka satu-satunya cara yang bisa kita lakukan adalah dengan menggabungkan
beberapa sel menjadi satu. Cara ini disebut merge atau penggabungan sel.
Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau colspan.
Atribut rowspan digunakan untuk menggabungkan sel-sel tabel pada kolom yang
sama. Atribut colspan untuk menggabungkan sel-sel tabel pada baris yang sama.
Berikut contoh penggabungan kedua jenis :
1. Secara Vertikal (Rowspan)
Tabel dengan kode HTML dibawah ini sel-sel kolom pertama akan digabung:
Setelah digabung maka kondisi kode HTML menjadi seperti berikut:
16
Web Programming I
2. Secara Horisontal (Colspan)

Tabel dengan kode HTML dibawah ini sel-sel baris pertama akan digabung:
Setelah digabung maka kondisi kode HTML menjadi seperti berikut:
17
Web Programming I
Contoh script pembuatan tabel

dengan nama Contoh03.html
18
Web Programming I
Jika dilihat di browser, maka terlihat sebagai berikut :
Penggunaan Cellpadding dan cellspacing

dengan nama tabelcell.html
19
Web Programming I
Hasil di browser :
Penggunaan Rowspan dan colspan

dengan nama tabelspan.html
Hasil di browser :
20
Web Programming I
Tugas 03:
Buat script HTML untuk bentuk tampilan di bawah ini :
21
Web Programming I
BAB II
DASAR-DASAR PHP DAN OPERATOR
2.1. Pengertian PHP (PHP Hypertext Preprocessor)

PHP atau PHP Hypertext Prepocessor adalah sebuah bahasa script berbasis
server (server-side) yang mampu mem-parsing kode php dari kode web dengan
ekstensi .php, sehingga menghasilkan tampilan website yang dinamis di sisi client
(browser). Dengan PHP, anda bisa menjadikan halaman HTML menjadi lebih
powerful dan bisa dipakai sebagai aplikasi lengkap, misalnya untuk beragam aplikasi
cloud computing.
PHP adalah bahasa script yang sangat cocok untuk pengembangan web dan
dapat dimasukkan ke dalam HTML. PHP awalnya dikembangkan oleh seorang
programmer bernama Rasmus Lerdrof pada tahun 1995, namun semenjak itu selalu
dikembangkan oleh kelompokindependen yang disebut Group PHP dan Kelompok ini
juga yang mendefinisikan standar de facto untuk PHP karena tidak ada spesifikasi
formal. Saat ini pengembangannya dipimpin oleh duo maut, Andi Gutmans dan Zeev
Suraski.
Yang menyebabkan PHP banyak dipakai oleh banyak orang adalah karena
PHP adalah perangkat lunak bebas (Open Source) yang dirilis di bawah lisensi PHP.
Artinya untuk menggunakan bahasa pemrograman ini gratis, bebas, dan tidak terbuka.
2.2. Memasukkan Kode PHP

Tidak seperti halaman HTML biasa, kode PHP tidak akan diberikan oleh
server secara langsung ketika ada permintaan dari client (browser), namun melalui
pemrosesan dari sisi server, makanya PHP disebut skrip server-side.
Kode PHP dimasukkan ke dalam kode HTML dengan cara menyelipkannya di
dalam kode HTML. Untuk membedakan kode PHP dengan kode HTML, di depan
kode PHP tersebut diberi tag pembuka dan diakhir kode PHP diberi tag penutup.
Dengan adanya kode PHP, sebuah halaman web bisa melakukan banyak hal yang
dinamis, seperti mengakses database, membuat gambar, membaca dan menulis file,
22
Web Programming I
dan sebagainya. Hasil akhir pengolahan kode PHP akan dikembalikan lagi dalam
bentuk kode HTML untuk ditampilkan di browser. Ada 4 jenis tag yang bisa
digunakan untuk memasukkan kode PHP.
Tabel III.1 Jenis-jenis Tag PHP

Jenis Tag Tag Pembuka Tag Penutup
Tag Standar < ? php ?>
Tag Pendek <? ?>
Tag ASP <% %>
Tag Script <script language = “php”> </script>
Yang dapat langsung diterapkan disemua platform adalah tag standard dan tag
script. Di dalam modul ini bahasa pemrograman yang digunakan adalah PHP Versi 5
sehingga jenis tag yang harus digunakan adalah tag standar. Untuk tag lainnya perlu
penyetingan di server oleh administrator server.
Contoh Script PHP

Buka file baru di Notepad. Kemudian ketikkan script seperti di bawah ini :
Simpan file dengan nama contoh04.php

Untuk melihat hasilnya buka browser masuk ke dalam localhost dan folder
penyimpanan. Pilih file contoh04.php maka akan tampil hasilnya :
23
Web Programming I
Contoh04.php merupakan contoh script php yang berdiri sendiri tanpa ada tambahan
script yang lain. Perintah echo merupakan perintah yang digunakan untuk mencetak.
Script PHP bisa juga digabung dalam tag HTML.
Perbedaan HTML dengan PHP

• HTML dapat diakses langsung tanpa melalui akses server saat ada permintaan
dari client(browser)
• PHP harus di akses melalui server saat ada permintaan dari client(browser)
Dari 2 gambar di atas dapatkah anda melihat perbedaannya, tanpa melihat extension
nama filenya?
Ya, untuk file dengan extension html, kita dapat melihat hasilnya langsung di
browser, tanpa harus menjalankan akses server. Namun, untuk file dengan extension
php, kita harus menjalankannya melalui akses server, yaitu localhost, dan
penyimpanan filenya pun, disimpan pada htdocs yang ada di folder xampp
24
Web Programming I
2.3. Dasar-Dasar Php

A. Variabel
Variabel merupakan sebuah istilah yang menyatakan sebuah tempat yang
menampung nilai-nilai tertentu di mana nilai di dalamnya bisa diubah-ubah. Variable
penting karena tanpa adanya variable tidak bisa menyimpan nilai tertentu untuk
diolah.
Variabel ditandai dengan adanya tanda dolar ($) yang kemudian bisa diikuti
dengan angka, huruf, dan underscore. Namun variable tidak bisa mengandung spasi.
Berikut ini contoh pendefinisian variable. Untuk mendefinisikan variable, hanya perlu
menuliskannya maka otomatis variable dikenali oleh PHP.
$nama
$no_telp
$_pekerjaan
Variable merupakan tempat untuk menyimpan data dalam tipe tertentu, variable bisa
berupa null (belum ada isinya), angka, string, objek, array, Boolean, dan isinya bisa
diubah-ubah nantinya.
Contoh05.php:
Hasil :
25
Web Programming I
B. Tipe Data
Berbeda dengan bahasa pemrograman lain, variable di PHP lebih fleksibel.
Kita tidak perlu mendefinisikan jenisnya ketika mendefinisikan pertama kali. Ada 6
Tipe data dasar yang dapat diakomodasi di PHP, seperti terlihat di tabel.
Tabel IV.1. Jenis-jenis tipe data
Tipe Contoh Penjelasan
Integer 134 Semua angka bukan pecahan
Double 5.1234 Nilai pecahan
String “asep” Kumpulan karakter
Boolean False Salah satu nilai True atau False
Object Sebuah instance dari class
Array Larik
Untuk mengetahui tipe data sebuah variable, kita bisa menggunakan perintah
gettype, misalnya :
Print gettype ($nama_variabel);
Anda juga bisa mengubah jenis variable tertentu dengan perintah :
(jenis_variabel) $nama_variabel;
Misalnya untuk mengubah variable menjadi string, kita dapat menggunakan perintah:
$var_string = (string) $angka;
26
Web Programming I
Contoh06.php:
Hasil Tampilan :
Tugas 04 :
Buat script php untuk tampilan di bawah ini. Tentukan variablenya :
27
Web Programming I
C. Konstanta
Selain variable, sebuah program umumnya juga memungkinkan adanya
konstanta. Konstanta fungsinya sama seperti variable namun nilainya statis/konstan
dan tidak bisa berubah. Cara untuk mendefinisikan konstanta adalah :
Define (“NAMA_KONSTANTA”, nilai_konstanta);
Setelah didefinisikan, kita dapat langsung menggunakannya dengan
mengetikkan nama konstanta tersebut. Nama konstanta umumnya diketik
menggunakan huruf besar.
D. Komentar
Program merupakan kegiatan menuliskan bahasa yang dipahami oleh mesin.
Walaupun bahasa yang digunakan adalah bahasa tingkat tinggi, namun tent masih
tidak semudah dipahami oleh bahasa biasa. Untuk itu kita bisa menggunakan
komentar. Berikut ini contoh pembuatan komentar di php.
//komentar satu baris
#ini juga komentar satu baris
/*komentar
Banyak baris
Kode di sini tidak
Dieksekus oleh parser */
28
Web Programming I
Contoh script konstanta & komentar.

Contoh07.php
Deklarasi komentar
Deklarasi konstanta
Hasil :
29
Web Programming I
2.4. Operator
A. Mengenal Operator
Sebuah bahasa pemrograman juga wajib untuk mampu mengolah nilai
operand (variable atau konstanta yang dioperasikan) menggunakan operator, seperti
menjumlah, membagi, dan sebagainya.
Operator merupakan symbol yang berfungsi untuk melakukan aksi / operasi
tertentu terhadap nilai operand yang pada umumnya dari hasil operasi tersebut
menghasilkan nilai baru. Sementara operand adalah nilai yang dilibatkan dalam
operasi oleh operator.
B. Jenis-Jenis Operator
1. Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika, sebagian
berikut :
Operator Nama Contoh Hasil
+ Penambahan 1+4 5
- Pengurangan 1-4 -3
/ Pembagian ¼ 0.25
* Perkalian 1*4 4
% Sisa Pembagian 5%2 1
++ Inkremen X=5; X++ X=6
- Dekremen X=5; X- X=4
30
Web Programming I
Contoh script :
Operatoraritmatika.php
Hasil :
2. Operator Perbandingan
Operator perbandingan digunakan untuk menghasilkan 2 nilai yang hasil
akhirnya adalah nilai Boolean true dan false. Operator ini sangat berguna
dalam pemrograman karena bisa menentukan arah pemrograman. Operator
perbandingan di PHP adalah :
Operator Nama Contoh Hasil
== Sama dengan 6==6 False
!= Tidak sama dengan 3!=3 False
> Lebih besar 1>5 False
>= Lebih besar atau sama 3>=4 False
dengan
31
Web Programming I
< Lebih kecil 2<4 True

<= Lebih kecil atau sams dengan 5<=4 False
Opertorperbandingan.php
Hasil :
32
Web Programming I
3. Operator Logika
Operator untuk menyusun kalimat ekspresi/ungkapan logika. Hasil operasi ini
akan didapatkan nilai satu jika benar dan nol jika salah.
Operator Fungsi
AND atau && Operasi logika AND
OR atau || Operasi logika OR
XOR Operasi logika eksklusife OR
! Ingkaran/negasi
Operatorlogika.php
Hasilnya :
33
Web Programming I
4. Operator String
Dalam PHP juga tersedia operator string, yaitu digunakan untuk operasi
penggabungan teks. Adapun symbol yang digunakan yaitu berupa karakter
titik (.).
Operatorstring.php
Hasilnya :
Tugas 05 : Penggunaan Operator

1. Buat script menggunakan bahasa pemrograman PHP untuk menghitung volume
Kubus menggunakan fungsi operator aritmatika dan operator string dengan
ketentuan sebagai berikut :
Panjang sisi kubus = 15cm
Hitung volume balok dengan rumus = sisi x sisi x sisi
Buat variable teks1 yang berisi = “Belajar Menghitung” dan teks2 yang berisi =
“Volume Kubus”. Buat perintah untuk menggabungkan nilai dari variable teks1
dan teks2 menggunakan operator string.
Outputnya sebagai berikut :
34
Web Programming I
BAB III
PENGENALAN PERCABANGAN DAN FORM
3.1. Pernyataan Seleksi

Sebagian besar bahasa pemrograman mengandung pernyataan seleksi. Pada
dasarnya pernyataan seleksi adalah suatu mekanisme yang menjelaskan apakah
pernyataan akan dikerjakan atau tidak, hal ini tergantung kondisi yang dirumuskan.
Dalam bahasa pemrograman PHP pernyataan seleksi diterapkan dengan
menggunakan statement IF dan Switch Case.
1. Statement IF
a. If Tunggal
Statement IF merupakan statement yang penting dan pasti terdapat di semua
bahasa pemrograman. Statement ini berguna untuk membuat percabangan
berdasarkan kondisi tertentu yang harus dipenuhi.
Bentuk umun Statement IF adalah sebagai berikut :
Prinsip kerjanya adalah perintah di atas akan dikerjakan apabila kondisi

bernilai TRUE atau benar, sedangkan jika kondisi salah / FALSE maka statement di
atas tidak akan dikerjakan
b. Pernyataan IF dan Else
Pernyataan ELSE merupakan bagian dari pernyataan if. Else digunakan untuk
memberikan alternative perintah apabila kondisi bernilai salah / FALSE.
Bentuk umum :
35
Web Programming I
Contoh : contohpercanganifelse.php
Hasilnya :
c. Pernyataan IF Majemuk
Jika pernyataan else memberikan alternative pilihan kedua, maka untuk
pernyataan ElseIf dapat digunakan untuk meumuskan banyak alternative pilihan
(lebih dari dua pilihan).
Bentuk umum :
if ( kondisi_1 )
{
Statement_1;
}
elseif ( kondis_2)
{
Statement_2;
}
elseif ( kondisi_3)
{
Statement_3;
}
36
Web Programming I
else
{
Statement_n;
}
Contoh : contohpercabanganifmajemuk.php
Hasilnya :
37
Web Programming I
2. Statement Switch
Statement untuk pengatur alur program berikutnya adalah switch. Salah satu
keuntungan switch adalah ada bisa langsung mengevaluasi satu statement dan
memerintahkan aksi dalam jumlah yang lebih banyak.
Bentuk umum :
Switch ( nilai_ekspresi ){
Case nilai_1 : statement_1; break;
Case nilai_2 : statement_2; brea;
Default: statement_n;}
Contoh :
Hasil:
38
Web Programming I
3.2. Komponen Form

Sebuah website dinamis seringkali memerlukan interaksi antara browser client
dan server bisa berupa pemasukan data teks, angka, atau upload file untuk diproses
oleh server. Untuk mewadahi suatu data yang dikirimkan oleh browser client,
dibutuhkan adanya FORM HTML. Penggunaan form misalnya untuk pendaftaran
keanggotaan, pemasukan kode kartu kredit, login user, transaksi perbelanjaan, dan
upload file.
Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan,
antara lain :
a. Form
<FORM ACTION=action METHOD=method ENCTYPE=media type> </FORM>
b. Text Box
Text box : untuk menginput data string ataupun angka.

< INPUT TYPE=TEXT NAME=”nama_variabel” VALUE=”value”>
c. Text Area
Text area : untuk menginput string ataupun angka yang terdiri atas banyak baris.
<textarea rows=” ” cols=” ” name=”nama_variabel”> </textarea>
d. Radio buton
Radio buton : untuk memilih satu pernyataan dari beberapa pernyataan yang
disediakan.
<input type=”radio” name=”nama_variabel” value=” ”>Isi_Radio
39
Web Programming I
e. Combo Box
Combo box untuk menampilkan daftar data.
<select name=”nama_variabel” value=” “>

<option>Combo1</option>
<option>Combo2</option></select>
f. Check Box
Check box untuk memilih satu atau lebih pernyataan dari beberapa pernyataan
yang disediakan.
<input type=”checkbox” name=”nama_variabel” value=”ON” checked>
g. Submit
Submit untuk mengirimkan semua variable data pada komponen-komponen form
yang ada.
<input type=”submit” name=”submit” value=”submit”>
h. Reset
Reset untuk membatalkan semua penginputan yang telah dituliskan.
<input type=”reset” name=”reset” value=”reset”>
3.3. Pengolahan Data Dari Form

Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan tag
</FORM>. Di dalam tag pembuka <FORM> diikuti dengan atribut action dan
method. Action menjelaskan ke h alaman yang digunakan untuk memproses input,
sementara method digunakan untuk mengatur cara mem-parsing konten
Web menerima input dari user atau pengunjung menggunakan metode GET
dan POST. GET akan mengirimkan data bersama dengan URL, sedangkan POST
akan mengirimkannya secara terpisah. User mengirimkan data input dengan mengisi
teks atau pilihan pada attibut form html.
40
Web Programming I
Proses Form menggunakan Metode GET.

File metodeget.php
Hasilnya :
Buat file untuk memproses variable yang diberikan oleh file metodeget.php, beri
nama filenya : metodegetproses.php
Karena menggunakan
metode GET, data
dikirmkan bersama dengan
Hasilnya : URL
41
Web Programming I
Proses Form menggunakan metode : POST

Untuk membuat inputan, dan beri nama file : metodepost.php
Hasilnya :
Buat file untuk memproses variable yang diberikan oleh file metodepost.php beri
nama filenya : metodepostproses.php
Hasilnya : Karena menggunakan

metode POST, data
tidak dikirimkan
bersama dengan URL
42
Web Programming I
Latihan Pembuatan Form 1

Buat file untuk menampilkan form input dan output seperti gambar di bawah ini.
Simpan dengan nama : forminputkomentar.php dan tampilkomentar.php
Form Input :
Form Output :
43
Web Programming I
Nama File : forminputkomentar.php
Nama File : tampilkomentar.php
44
Web Programming I
LATIHAN Penggunaan Form :

Form input :
Form Output :
45
Web Programming I
Script forminputmahasiswa.php
46
Web Programming I
Script tampilmahasiswa.php
Contoh Pembuatan Form dengan Input, Proses, dan Output Dalam Satu File
Untuk membuat form input dan halaman untuk menampilkan dalam satu file,
kita bisa menggunakan statement :
If (!Empty (nama_variabel))
Artinya jika variable yang dicari tidak kosong (alias ada) maka baru
ditampilkan, sementara jika tidak ada maka tidak akan ditampilkan.
Yang perlu diketahui adalah digunakannya alamat action :
$_server [„php_self‟]
Artinya alamat action akan mengacu ke halaman itu sendiri dan bukan di
halaman yang lain. Dengan demikian, jika form di submit, maka halaman yang
dipanggil tetap halaman yang sama.
47
Web Programming I
Contoh formdatadiri.php
Hasil :
Inputkan datanya :
48
Web Programming I
KLIK Tombol Tampil, maka akan tampil kiriman datanya.
Tugas 06 : Pembuatan dan Pemanggilan Form :

1. Buat script program untuk membuat form input dengan data sbb :
2. Buat script program untuk memanggil data dari form input dengan bentuk sbb :
49
Web Programming I
Tugas 07 : Percabangan 1. Buatlah script sehingga mendapatkan tampilan

sebagai berikut :
Tampilan Input
Tampilan Output
Ketentuan Soal :
Jika STUDIO 1 maka bintang tamu “Opick”
Jika STUDIO 2 maka bintang tamu “Raihan”
Jika Jenis kelas VIP maka harga 500000
Selain itu kelas FESTIVAL maka harga 250000
Total Harga : jumlah beli * harga
Jika klik Kembali Ke Awal akan kembali ke halaman input
50
Web Programming I
Tugas 07 : Percabangan 2 : Buatlah script sehingga mendapatkan tampilan

sebagai berikut :
Tampilan Input
Tampilan Output
Ketentuan Soal :
 Jenis Cat :
 Harga di dapat dari :

o MOWILEX maka Harga = 20000
o DANAPAINT maka Harga = 30000
o CATYLAC maka Harga = 40000
 Total Harga = Harga * Jumlah Beli
 Diskon:
o Jika Jumlah Beli >= 5 maka diskon 5% dari Total Harga
o Jika Jumlah Beli >= 10 maka diskon 10% dari Total Harga
 Selain itu diskon=0
 Total Bayar = Total Harga - Diskon
 Jika di Klik Kembali maka akan tampil Form cat.php
51
Web Programming I
BAB IV
JAVASCRIPT
Javascript adalah bahasa script yang populer di internet dan dapat bekerja di sebagian
besar penjelajah web browser seperti Internet Explorer (IE), Mozilla Firefox,
Netscape, opera dan web browser lainnya. Kode javascript biasa dituliskan dalam
bentuk fungsi (Function) yang ditaruh di bagian dalam tag <head> yang dibuka
dengan tag <script language =” javascript”>
Isi dari script javascript sama dengan konsep yang sudah dipelajari dalam materi
PHP, yakni ada deklarasi variabel, penggunaan operator, percabangan, looping, dan
fungsi. Di dalam java script juga sebuah komponen Alert yang digunakan untuk
menampilkan kotak pesan pada browser ketika fungsinya di jalankan.
Untuk berlatih deklarasi script pada javascript, salin contoh-contoh berikut ini pada
editor anda. Dan jalankan pada browser, amati tampilannya.
Latihan Javacsript :
1. Menuliskan teks = contohjs1.html
2. Memformat teks dengan tag HTML = contohjs2.html
52
Web Programming I
3. JavaScript yang diletakkan pada bagian HEAD = contohjs3.html
4. JavaScript yang diletakkan pada bagian BODY = contohjs4.html
5. Fungsi = contohjs5.html
53
Web Programming I
6. Fungsi dengan argumen = contohjs6.html
7. Memunculkan tanggal lengkap = contohjs7.html
54
Web Programming I
BAB V
CSS
5.1 PENGERTIAN CSS
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa
yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan
secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur
tampilan / desain suatu halaman HTML.
Beberapa hal yang dapat dilakukan dengan CSS.
 Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) ,
colors (warna), margins (ukuran), latar belakang (background), ukuran font (font
sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes
(ukuran) dan spacing (jarak) disebut juga “styles”.
 Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada
layers (lapisan) yang berbeda.
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
 External Style Sheet
Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML.
Kemudian tambahkan kode pemanggilan file CSS dalam dokumen HTML.
Akhiran file CSS adalah .css
 Internal Style Sheet

Aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag
<style>
55
Web Programming I
 Inline Style Sheet

Aturan CSS ditulis langsung pada tag HTML yang akan diatur tampilannya
menggunakan atribut style:
5.2. SATUAN DALAM CSS

1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
56
Web Programming I
5.3. MENULIS CSS

Sintaks penulisan CSS sebagai berikut:
Penjelasan:
Aturan CSS terdiri 2 bagian:
 Selector
Biasanya berupa tag HTML, id, class
id menggunakan tanda # didepan nama selector
class menggunakan tanda titik didepan nama selector
contoh :
h1 { color : blue ; }  tag html h1
#teks { color :green; }  id
.warna { color : red; }  class
 Declaration
Berisi aturan-aturan css yang terdiri dari properti dan nilainya yang dipisahkan
oleh tanda titik dua. Setiap aturan css harus diakhiri dengan tanda titik koma.
Selector ID dan Class pada CSS

Untuk selector id pada css ditandai dengan tanda #(pagar) contoh penulisan seperti
berikut :
Penggunaanya dalam script HTML ::
57
Web Programming I
Yang perlu di perhatikan jika menggunakan selector id :

 Sebuah elemen HTML hanya boleh memiliki 1 id
 Setiap halaman hanya boleh memiliki 1 elemen dengan id tersebut
 Dapat di gunakan sebagai penanda halaman untuk link
 Digunakan juga untuk javascript
 Sebaiknya tidak digunakan untuk css ( lebih baik gunakan class)
Untuk selector class pada css ditandai dengan tanda .(titik) contoh penulisan seperti
berikut :
Penggunaanya dalam script HTML :
Properti-properti CSS
Properti CSS jumlahnya sangat banyak, berikut beberapa diantaranya:
58
Web Programming I
Pseduo-Class
Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang membuat kita
dapat mendefinisikan style pada keadaan tertentu dari elemen tersebut. Pseduo-class
terbagi menjadi beberapa type, sebagai berikut :
1. Yang berhubungan dengan link
 : link
Style default pada sebuah link (a yang memiliki href)
 : hover
Style ketika kursor mouse berada diatas sebuah link / elemen
 : active
Style ketika sebuah link di klik (keadaan aktif)
 : visisted
Style ketika sebuah link sudah pernah di kunjungi sebelumnya (menggunakan
browser yang sama)
2. Yang berhubungan dengan posisi elemen (ada pada css 3)
 : first-child
Memilih elemen pertama dari sebuah parent (elemen pembungkusnya )
 : last-child
Memilih elemen terakhir dari sebuah parent (elemen pembungkusnya )
 : nth-child(n)
Memilih elemen ke (n) dari sebuah parent (elemen pembungkusnya )
n bisa berarti urutan 1,2,3,….. atau pola (2n),(3n+2), atau ganjil dan genap,
even & odd
 : first-of-type
Memilih elemen pertama dari sebuah jenis / tipe tag
 : last-of-type
Memilih elemen terakhir dari sebuah jenis / tipe tag
59
Web Programming I
5.4. PADDING, MARGIN DAN BORDER

Dalam CSS dikenal istilah „Box Model‟. Perhatikan gambar berikut ini:
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian
dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
CSS menggunakan konsep ini dalam mengatur tag-tag HTML. Pada gambar,
bayangkan area „Content‟ misalnya adalah sebuah paragraph. Obyek paragraph ini
akan dianggap CSS memiliki area padding, border, dan margin disekitarnya.
Keberadaan area-area ini berguna untuk pengaturan tata letak. Misalnya ingin diatur
agar 2 buah gambar yang terletak berdampingan tidak terlalu rapat, maka kita dapat
memperbesar lebar dari area margin agar jarak antara gambar lebih lebar.
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas,
kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px;  ini adalah untuk pengaturan padding kanan
padding-top:5px;  untuk bagian atas dan
padding-bottom:5px;  untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti
sesuai satuan yang lain yang sesuai
60
Web Programming I
Border
Ditulis dengan CSS border:1px dotted #000000;  urutan penggunaanya adalah
ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px;  ini adalah ketebalan border
border-style:dotted;  ini adalah jenis bordernya bisa kamu ganti dengan dashed,
solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF;  ini adalah warna dari border.. kamu bisa mengganti code
warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px;  urutanya atas, kanan, bawah dan
kiri,
atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Latihan CSS :
- Salin script berikut ini, lalu simpan di folder modul_web1 dengan nama
style_css.css
61
Web Programming I
62
Web Programming I
- Salin script berikut ini, lalu simpan di folder modul_web1 dengan nama
latihan_css.html
- Hasil di web browser :
63
Web Programming I
BAB VI-VII
Membuat Design Web Responsive Menggunakan CSS
Pada pembahasan materi kali ini kita akan membuat Design Web Responsive.
Design Web Responsive adalah sebuah metode atau pendekatan sistem web desain
yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai
perangkat, baik mobile maupun komputer. Dengan metode ini. Berikut kita akan
membuat form responsive. Langkah-langkah yang perlu di gunakan dalam
pembuatan web ini adalah :
1. Tentukan tema website

- Tema web perpustakaan
2. Membuat sketsa / blueprint / rancangan dari halaman web yang akan di buat
Seperti contoh berikut ini :
3. Web responsive berarti web yang tampilannya mengikuti ukuran layar

gadget yang di gunakan untuk akses web tersebut
– Buat folder di xampp/htdocs dengan nama : perpus
– Didalam folder perpus, siapkan 2 buah folder :
• images  untuk simpan gambar
• css  untuk simpan file css
– Buka editor, salin script css berikut : simpan di folder css dengan
nama style.css
*{
padding : 0;
margin : 0;
box-sizing : border-box;
}
64
Web Programming I
body{
backgroud : #dedede;
font-family : 'Verdana',arial,sans-serif;
font-size : 15px;
p{
margin-bottom : 20px;
line-height : 1.5em;
}
h3{
border-bottom : 1px solid #aaa;
}
a{
text-decoration : none;
color : #333;
}
a:hover{
color : #666;
}
.container{
max-width : 1080px;
margin : 20px auto;
background : #fff;
overflow : hidden;
padding : 10px;
}
.header{
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
background : #9E9AFB;
}
/* main */
.left{
width : 250px;
padding : 10px;
margin : 10px;
float : left;
}
.left ul{
list-style-type : none;
}
65
Web Programming I
.left ul li{
display : block;
}
.left ul li a{
display :block;
border-bottom : 1px solid #dedede;
padding : 10px 5px;
font-color : #D3D2ED;
}
.left ul li a:hover{
color:#461AF3;
}
.middle{
width : 500px;
padding : 10px;
margin : 10px;
float : left;
}
.middle img{
max-width : 100%;
height : auto;
}
.middle a{
font-wight:bold;
}
.right{
width : 250px;
padding : 10px;
margin : 10px;
float : left;
}
.right ul{
list-style-type : none;
}
.right ul li{
display : block;
}
.right ul li a{
display :block;
border-bottom : 1px solid #dedede;
padding : 10px 5px;
}
66
Web Programming I
.right ul li a:hover{
color:#461AF3;
}
.footer{
clear : both;
padding : 15px;
margin : 10px;
background : #9E9AFB;
}
@media screen and (max-width:959px){

#container{
width : 100%;
}
#left-column{
width : 70%;
}
#right-column{
width : 30%;
}
img{
width : 100%;
}
}
/*MEDIA QUERIES ( Responsive )
*******************************************/
@media screen and (max-width:1080px)
{
.container{
width : 100%;
}
.left{
width : 25%;
background : #D6CCFE;
}
.middle{
width : 68%;
float : right;
}
.right{
clear : both;
padding : 1% 4%;
width : auto;
float : none;
background : #D6CCFE;
}
}
67
Web Programming I
/* untuk ukuran layar 700px kebawah */

@media screen and (max-width: 780px)
{
.header,
.footer{
text-align : center;
}
.left {
width : auto;
float : none;
}
.middle {
width : auto;
float : none;
}
.right {
width : auto;
float : none;
}
Buatlah script untuk tampilan berikut : index.html simpan di dalam folder perpus
68
Web Programming I
Tampilan diatas ini kodenya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center"> Selamat Datang DI Pepustakaan XYZ
</h1>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<p align="center"><strong><a href="#" >Membuat
Design Web Responsive</a></strong></p>
<p><img src="images/gambar.jpg" alt=""></p>
<p><a href="#">Baca Selengkapnya >> </a>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Database</a></li>
</ul>
</p>
</div>
</div>
<div class="footer">
<p align="center">Coppright © 2018 Belajar CSS
Responsive </a></p>
</div>
</div>
</body>
</html>
69
Web Programming I
Penjelasan Source Code

<meta name="viewport" content="width=device-width, initial-scale=1.0">
merupakan syntax yang berfungsi untuk menampilkan web sesuai dengan layar.
<link rel="stylesheet" href="css/main.css">
merupakan External Style sheet yang digunakan untuk mengload file css .
Pada Struktur HTML berikut terdapat 3 class utama yaitu header , main dan footer .
Yaitu :
<div class="container">
<div class="header">digunakan untuk bagian header</div>
<div class="main">
<div class="left">Digunakan kolom bagian Kiri...</div>
<div class="middle">Digunakan kolom bagian tengah...</div>
<div class="right">Digunakan kolom bagian kanan...</div>
</div>
<div class="footer">Digunakan bagian footer...</div>
</div>
70
Web Programming I
BAB VIII
UJIAN TENGAH SEMESTER (UTS)
71
Web Programming I
BAB IX
PENGENALAN CODE IGNITER DAN MVC
Pada bab ini diharapkan mahasiswa dapat memahami materi-materi fundamental

yang diperlukan sebelum mempelajari framework codeigniter, yaitu bagaimana cara
melakukan installing perangkat-perangkat lunak yang diperlukan untuk dapat bekerja
dengan codeigniter seperti PHP, web server, database server, dan framework
codeigniter itu sendiri. Mahasiswa juga diharapkan dapat memahami pola desain atau
arsitektur dari Model-View-Controller (MVC), yang merupakan syaratk mutlak
dalam proses pengembangan aplikasi menggunakan codeigniter.
1. Framework Web
Web Application Framework (WAF), atau sering disingkat web framework,
adalah Suatu kumpulan kode berupa pustaka (library) dan alat (tool) yang dipadukan
sedemikian rupa menjadi kerangka kerja (framework) guna memudahkan dan
mempercepat proses pengembangan aplikasi.
Framework web untuk PHP:
 Codeigniter
 Yii
 Slim framework
 Zend framework
 Laravel
 Symfony
 CakePHP
 Phalcon
 Kohana
 FuelPHP, dll
72
Web Programming I
Sebagian besar dari framework di atas mengimplementasikan pola desain Model-

View-Controller (MVC), yang memisahkan bagian kode untuk penanganan proses
bisnis dengan bagian kode untuk keperluan presentasi (tampilan).
2. Codeigniter
Codeigniter adalah framework web utnuk bahasa pemrograman PHP, yang
dibuat oleh Rick Ellis pada tahun 2006, penemu dan pendiri EllisLab
(www.ellislab.com). EllisLab merupakan suatu tim kerja yang berdiri pada tahun
2002 yang bergerak di bidang pembuatan software dan tool untuk para pengembang
web. Sejak tahun 2014 sampai sekarang , EllisLab telah menyerahkan hak
kepemilikan codeigniter ke British columbia Institue of Technology (BCIT) saat ini
situs resmi codeigniter adalah www.codeigniter.com.
3. Instalasi Software
Software yang dibutuhkan pada pembelajaran kali ini yaitu:
a. Web server (Apache2Triad, WAMPP server, Xampp Server, dll)
Untuk Xampp server bisa didownload di https://www.apachefriends.org/
b. Text Editor (notepad, notepad++, sublime text, atom, dll)
Pembelajaran kali ini akan menggunakan text editor Atom, karena bersifat
Opensource. Bisa didownload di https://atom.io/
c. Codeigniter https://codeigniter.com/
d. Web Browser (Mozila Firefox, google chrome, IE, Safari, UCBrowser, Opera,
dll).
4. Instalasi Codeigniter
a. Download Package codeigniter pada situ resminya yang sudah disebutkan di

atas.
b. Saat ini versi stabil dari codeigniter adalah 3.1.6
c. Setelah di download ektrak file codeigniter pada direktori C:\xampp\htdocs
73
Web Programming I
d. lalu ubah folder Codeigniter menjadi sesuai keinginan kita. disini saya akan
ubah folder codeigniter tersebut menjadi rental_buku.
e. Setelah itu, sekarang coba akses folder tersebut melalui browser.

f. jangan lupa untuk menyalakan XAMPP terlebih dahulu.
74
Web Programming I
g. lalu akses dengan url http://localhost/nama_folder_project pada tutorial kali

ini saya beri nama dengan rental_buku
h. Jika sudah tampil halaman Welcome Codeigniter, itu artinya anda telah
berhasil melakukan instalasi codeigniter.
5. Struktur Folder Codeigniter

Di dalam folder codeigniter terdapat 3 folder utama yaitu Application, System,
User Guide. Folder application berguna sebagai tempat untuk mendevelop aplikasi
nanti, Folder system berisi library atau kumpulan fungsi-fungsi dasar Codeigniter
(CI), sedangkan User Guide berisi sebagai buku panduan atau dokumentasi dari
codeigniter.
75
Web Programming I
Lalu kita fokus pada folder application/config dan semua berawal dari file
routes.php Apabila kita buka file tersebut, maka kita akan
menemukan default_controller yang telah terisi dengan nama “welcome”, yang
mana default_controller ini berfungsi ketika user tidak melakukan atau memasukkan
apapun pada URL browser, maka secara otomatis mencari controller dengan
nama “welcome”. (lihat gambar).
Controller Welcome itu sendiri bisa anda temukan pada folder

application/controllers. Pada file welcome_controller tersebut terdapat fungsi
index yang gunanya meload bagian view atau memanggil halaman views dengan
nama welcome_messages sebagai berikut.
76
Web Programming I
Sekarang lihat pada bagian views yang terletak pada application/views. Pada
folder view tersebut terdapat file dengan nama welcome_message. Pada bagian inilah
semua html dan css akan diletakkan yang nantinya akan ditampilkan ke pengunjung.
MODEL, VIEW, CONTROLLER
1. Pengertian MVC
Pada pengertian codeigniter di atas tadi di jelaskan bahwa codeigniter
menggunakan metode MVC. Apa itu MVC? kita juga harus mengetahui apa itu MVC
sebelum masuk dan lebih jauh dalam belajar codeigniter.
MVC adalah teknik atau konsep yang memisahkan komponen utama menjadi tiga
komponen yaitu model, view dan controller.
77
Web Programming I
a. Model
Model adalah kelas yang merepresentasikan atau memodelkan tipe data yang
akan digunakan oleh aplikasi. Model juga dapat didefinisakn sebagai bagian
penanganan yang berhubungan dengan pengolahan atau manipulasi database. seperti
misalnya mengambil data dari database, menginput dan pengolahan database lainnya.
semua intruksi atau fungsi yang berhubung dengan pengolahan database di letakkan
di dalam model. Sebagai contoh, jika ingin membuat aplikasi untuk menghitung luas
dan keliling lingkaran, maka dapat memodelkan objek lingkaran sebagai kelas model.
Sebagai catatan, Semua model harus disimpan di dalam folder
application\models
b. View
View merupakan bagian yang menangani halaman user interface atau halaman
yang muncul pada user(pada browser). tampilan dari user interface di kumpulkan
pada view untuk memisahkannya dengan controller dan model sehingga
memudahkan web designer dalam melakukan pengembangan tampilan halaman
website.
c. Controller
Controller merupakan kumpulan intruksi aksi yang menghubungkan model dan
view, jadi user tidak akan berhubungan dengan model secara langsung, intinya data
yang tersimpan di database (model) di ambil oleh controller dan kemudian controller
pula yang menampilkan nya ke view. Jadi controller lah yang mengolah intruksi.
Dari penjelasan tentang model view dan controller di atas dapat di simpulkan
bahwa controller sebagai penghubung view dan model. misalnya pada aplikasi yang
menampilkan data dengan menggunakan metode konsep mvc, controller memanggil
intruksi pada model yang mengambil data pada database, kemudian controller yang
meneruskannya pada view untuk di tampilkan. jadi jelas sudah dan sangat mudah
dalam pengembangan aplikasi dengan cara mvc ini karena web designer atau front-
end developer tidak perlu lagi berhubungan dengan controller, dia hanya perlu
berhubungan dengan view untuk mendesign tampilann aplikasi, karena back-end
developer yang menangani bagian controller dan modelnya. Jadi pembagian tugas
78
Web Programming I
pun menjadi mudah dan pengembangan aplikasi dapat di lakukan dengan cepat dan
terstruktur.
Bentuk umum model seperti berikut:
Class Nama_model extends CI_model {
// badan kelas
}
jika ingin memanggil konstruktor kelas CI_model dari konstruktor kelas model
yang didefinisikan, maka bentuk umumnya seperti berikut:
class Nama_model extends CI_model {
//konstruktor kelas model
Function __construct( ) {
//memanggil konstruktor kelas CI_model
$parent: : __construct( );
//...
}
// ...
}
Contoh1 penggunaan hanya controller

<?php
class Hello1 extends CI_Controller {
public function index( ){
echo “<h2> Hello World! (Versi 1) </h2>
}
}
Contoh2 menggunakan Controller dan Model

Model simpan di application\model\Hello_model.php
<?php
class Hello2_model extends CI_Model{
79
Web Programming I
//mendefinisikan properti dengan nama $str

Public $str = „Hello World! (versi 2)‟;
Controller simpan di application\controllers\Hello2.php

class Hello2 extends CI_Controller {
public function index( ) {
//memuat model dengan nama Hello2_model
$this->load->model(„Hello2_model‟);
//menangkap objek dari kelas Hello2_model yang telah dimuat

ke variabel $model
$model = $this->Hello2_model;
echo ”<html>
<head><title>Controller dan Model</title></head>
<body>”;
//memanggil properti $str milik objek $model

echo “<h2>”. $model->str .”</h2>”;
echo “</body>”;
echo “</html>”;
}
}
80
Web Programming I
Contoh3 menggunakan Controller dan View

View Simpan di application\views\Hello3view.php
<html>
<head><title>Controller dan View</title></head>
<body>
<h2>Hello World! (Versi 3) </h2>
</body>
</html>
Contoller simpan di application\controllers\Hello3.php

<?php
class Hello3 extends CI_Controller{
//memuat view „hello3view‟
$this->load->view(„hello3view‟);
}
}
Untuk melihat hasil dari contoh-contoh di atas bisa dengan ketik URI:
http://localhost/rental_buku/index.php/hello1.
Contoh4 menggunakan Controller, Model, dan View

Model Simpan di application\models\lingkaran_model.php:
<?php
Class Lingkaran_model extends CI_model {
//mendefinisikan konstanta untuk nilai PI
const PI = 3.14;
//atribut model
private $jarijari;
81
Web Programming I
//metode untuk menentukan nilai $jarijari

public function set_jarijari($r){
$this->jarijari = $r;
}
//metode untuk mengambil nilai $jarijari

public function get_jarijari( ){
return $this->jarijari;
}
//metode untuk menghitung luas lingkaran

public function hitung_luas( ){
return self : :PI * $this->jarijari * $this->jarijari;
}
//metode untuk menghitung keliling lingkaran

public function hitung_keliling( ){
return 2 * self : :PI * $this->jarijari;
}
}
Controller Simpan di application\controllers\lingkaran.php
<?php
Class Lingkaran extends CI_Controller {
public function index( ) {
//meload model Lingkaran_model
$this->load->model („Lingkaran_model‟);
//menangkap model yang telah dimuat oleh controller

$model = $this->Lingkaran_model;
82
Web Programming I
//menentukan nilai jari jari

$model->set_jarijari(3);
//memuat view dan mengirimkan $model ke view

$this->load->view („lingkaranview‟, array(„model‟ =>
$model));
}
}
View Simpan di application\views\lingkaranview.php

<html>
<head>
<title> Demo Model, View, Controller </title>
</head>
<body>
<h2> Model Lingkaran </h2>


Nilai Jari Jari : <?php echo $model->get_jarijari( ); ?> <br>


Luas Lingkaran : <?php echo $model->hitung_luas( ); ?> <br>


Keliling Lingkaran : <?php echo $model->hitung_keliling( ); ?>
</body>
</html>
Jalankan aplikasi di atas menggunakan URI berikut:

http://localhost/rental_buku/index.php/lingkaran
83
Web Programming I
hasil yang ditampilkan adalah seperti berikut:
2. Menetukan Kontroler Standar (Default)

Controller standar (default) adalah controller yang akan dipanggil secara
otomatis ketika user tidak menyertakan nama controller di dalam URI.
Contoh penulisan URI:
http://localhost/rental_buku/index.php
pada contoh permintaan di atas, kita tidak menyertakan nama controller yang akan
dipanggil (segmen pertama). Permintaan tersebut akan memanggil controller standar
yang sudah didefinisikan oleh codeigniter, dan akan memberikan hasil seperti berikut:
84
Web Programming I
Controller standar dapat ditentukan sendiri sesaui dengan keinginan, yaitu dengan
cara melakukan konfigurasi pada file application\config\routes.php. cari baris code
berikut:
$route[„default_controller‟] = „welcome‟;
Ubah kata welcome dengan nama controller yang diinginkan untuk dijadikan
controller standar
3. Menghilangkan index.php pada codeigniter

Dalam rangka pengamanan web site, biasanya seorang web developer akan
melakukan berbagai trik untuk dapat mengamankan web miliknya. Ada yang
dibuatkan sistem sandi yang diubah secara berkala, ada yang menggunakan sistem
sandi dengan teknik kriptografi yaitu mengenkrip sandi sedemikian rupa agar tidak
mudah dipecahkan oleh pihak yang tidak bertanggung jawab, ada juga yang
menggunakan trik kamuplase pengaksesan file, dan lain lain. Berikut ini adalah salah
satu trik untuk mengelabuhi pihak yang tidak bertanggung jawab agar tidak mudah
untuk melakukan pencurian atau penggunaan data yang merugikan yaitu dengan cara
menghilangkan index.php pada url codeigniter. cara nya buka pengaturan
“index_page” codeigniter pada application/config/config.php, kemudian cari
pengaturan index_page seperti di bawah ini.
Kemudian hapus index.php pada pengaturan sehingga menjadi
Setelah menghapus index, selanjutnya adalah membuat file .htaccess pada

direktori root codeigniter. Caranya buat file baru dengan nama .htaccess tanpa diberi
extensi, karena .htaccess merupakan file yang tidak berekstensi. Diawali dengan
tanda titik ( . ).
File rental_buku/.htaccess
85
Web Programming I
Simpan dan sekarang coba akses di web. Disini untuk contoh dalam rangka
mencoba apakah sudah berhasil atau belum menghilangkan index pada codeigniter
akan dibuat sebuah method dengan nama pemrograman pada file controller
Belajar.php yang sudah pernah dibuat.
application/controllers/belajar.php
Jika biasanya untuk mengakses method “pemrograman” dalam kontroler belajar

diatas harus dengan mengetikkan
http://localhost/rental_buku/index.php/belajar/pemrograman
maka sekarang tidak perlu, melainkan bisa langsung mengakses alamat url di atas
tanpa menyertakan kata index.php
http://localhost/rental_buku/belajar/pemrograman
berikut hasil dalam browser
86
Web Programming I
4. Aturan merancang Model, View, dan Controller

a. Model
Secara umum perancangan model dapat dibuat menggunakan aturan berikut:
1) Model harus memiliki atribut yang dapat mewakili element tertentu.
2) Model seharusnya berisi kode kode yang menangani proses bisnis untuk
data bersangkutan, misalnya untuk melakukan proses validasi data.
3) Model boleh berisi kode kode yang dugunakan untuk memanipulasi data,
misalnya untuk menambah baris data baru, mengubah baris data, dan
menghapus baris data pada sebuah tabel yang terdapat dalam database.
4) Model seharusnya tidak berisi kode kode yang berkaitan langsung dengan
permintaan yang dilakukan oleh user melalu URL (tidak berisi $_GET
maupun $_POST). Pekerjaan seperti ini seharusnya dilakukan oleh
controller.
5) Model seharusnya tidak berisi kode kode yang berkaitan dengan
presentasi (tampilan) halaman web yang akan disajikan ke hadapan user.
Pekerjaan semacam ini seharusnya dilakukan oleh view.
b. View
Berikut ini aturan yang dapat digunakan untuk merancang view.
1) View harus berisi kode kode yang bersifat presentasional, biasanya
berupa kode HTML. View juga dapat berisi perintah perintah PHP
sederhana yang masih berkaitan dengan proses pembuatan tampilna,
misalnya untuk menampilkan data yang dihasilkan oleh model tertentu.
2) View seharusnya tidak berisi kode PHP yang melakukan akses data
secara langsung ke database. Pekerjaan semacam ini sebaiknya dilakukan
oleh model.
3) View seharunsnya menghindari kode PHP yang mengakses secara
langsung permintaan dari user (tidak berisi $_GET maupun $_POST).
Tugas ini sebaiknya didelegasikan ke controller
c. Controller
Berikut ini aturan yang dapat digunakan untuk merancang controller.
87
Web Programming I
1) Controller boleh mengakses $_GET, $_POST, dan variabel variabel PHP

lainnya yang berkaitan dengan permintaan user.
2) Controller boleh membuat objek (instance) dari kelas kelas model dan
mengarahkan ke view (jika model bersangkutan menghasilkan data yang
perlu ditampilkan ke user)
3) Controller seharusnya tidak berisi kode kode yang mengakses data secara
langsung dari database. Tugas seperti ini sebaiknya dilakukan oleh model.
Dan controller tinggal menggunakannya saja.
4) Controller seharusnya tidak berisi kode kode HTML yang diperlukan
untuk tujuan presentasi. Tugas ini sebaiknya dilakukan oleh view.
5. Parsing Data Ke View

Untuk memparsing data dari controller ke view, anda dapat memparsingnya
dengan menggunakan bantuan array. Jadi data yang akan diparsing kita masukkan ke
array.
Perhatikan contoh cara memparsing data ke view codeigniter berikut ini. Buka
controller belajar.
Contoh5 parsing data dari controller ke view
Controller simpan di application\controllers\belajar.php
<?php
class Belajar extends CI_Controller {
function __contruct( ){
parent : : __construct( );
}

echo “ini method index pada controller Belajar | cara membuat
controller pada codeigniter”;
}
public function halo( ){
88
Web Programming I
//memparsing data ke view

$data[„nama_web‟] = “Codeigniter.com”;
$this->load->view(„view_belajar‟,$data);
}
}
View simpan di application\views\view_belajar.php

<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat View Pada CodeIgniter </title>
</head>
<body>
<h1><?php echo $nama_web; ?></h1>
</body>
</html>
89
Web Programming I
BAB X
MEMBUAT TEMPLATE (TEMPLATING) WEB SEDERHANA
Pada pertemuan ini, mahasiswa diharapkan mampu membuat template

sederhana. Mahasiswa juga diharapkan mampu membuat template web dinamis.
Pada codeigniter, halaman yang dipecah-pecah dapat dengan mudah untuk me-
load halaman-halaman tersebut sesuai dengan keinginan.
1. Membuat Template Sederhana

Untuk membuat dan menampilkan template sederhana yang akan dibuat,
dibutuhkan pembuatan controller dan view agar hasilnya bisa dilihat.
Buatlah sebuah kontroler yang akan digunakan untuk menampilkan view. Sebagai
contoh, buatlah kontroler Web.php lalu simpan di application/controllers/Web.php.
<?php
defined('BASEPATH') or exit ('no direct script access allowed');
class Web extends CI_Controller{
function __construct(){
parent::__construct();
}
public function index(){
$data['judul'] = "Halaman depan";
$this->load->view('v_index',$data);
}
}
Kemudian buatlah sebuah v_index.php simpan pada application/views/v_index.php
<!DOCTYPE html>
<html>
<head>
90
Web Programming I
<meta charset="utf-8">
<title>Web Prog II | Merancang Template sederhana dengan
codeigniter</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url()
?>assets/css/stylebuku.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>RentalBuku.net</h1>
<h3>Membuat Template Sederhana dengan
CodeIgniter</h3>
</hgroup>
<nav>
<ul>
<li><a href="<?php echo
base_url().'index.php/web' ?>">Home</a></li>
base_url().'index.php/web/about' ?>">About</a></li>
</ul>
</nav>
<div class="clear"></div>
</header>
<section>
<h1><?php echo $judul ?></h1>
<p align='justify'>Pada pengertian codeigniter di atas tadi di
jelaskan bahwa codeigniter menggunakan metode MVC. Apa itu MVC? kita juga
harus mengetahui apa itu MVC sebelum masuk dan lebih jauh dalam belajar
codeigniter.</p>
<p>MVC adalah teknik atau konsep yang memisahkan
komponen utama menjadi tiga komponen yaitu model, view dan controller.</p>
91
Web Programming I
<ol type="a">
<li>Model</li>
<p align='justify'>Model adalah kelas yang merepresentasikan atau memodelkan tipe
data yang akan digunakan oleh aplikasi. Model juga dapat didefinisakn sebagai
bagian penanganan yang berhubungan dengan pengolahan atau manipulasi database.
seperti misalnya mengambil data dari database, menginput dan pengolahan database
lainnya. semua intruksi atau fungsi yang berhubung dengan pengolahan database di
letakkan di dalam model. Sebagai contoh, jika ingin membuat aplikasi untuk
menghitung luas dan keliling lingkaran, maka dapat memodelkan objek lingkaran
sebagai kelas model.</p>
<p align='justify'>Sebagai catatan, Semua model harus disimpan di dalam folder
application\models</p>
<li>View</li>
<p align='justify'>View merupakan bagian yang menangani halaman user interface
atau halaman yang muncul pada user(pada browser). tampilan dari user interface di
kumpulkan pada view untuk memisahkannya dengan controller dan model sehingga
website.</p>
<li>Controller</li>
<p align='justify'>Controller merupakan kumpulan intruksi aksi yang
menghubungkan model dan view, jadi user tidak akan berhubungan dengan model
secara langsung, intinya data yang tersimpan di database (model) di ambil oleh
controller dan kemudian controller pula yang menampilkan nya ke view. Jadi
controller lah yang mengolah intruksi.</p>
<p align='justify'>Dari penjelasan tentang model view dan controller di atas dapat di
simpulkan bahwa controller sebagai penghubung view dan model. misalnya pada
aplikasi yang menampilkan data dengan menggunakan metode konsep mvc,
controller memanggil intruksi pada model yang mengambil data pada database,
kemudian controller yang meneruskannya pada view untuk di tampilkan. jadi jelas
sudah dan sangat mudah dalam pengembangan aplikasi dengan cara mvc ini karena
web designer atau front-end developer tidak perlu lagi berhubungan dengan
controller, dia hanya perlu berhubungan dengan view untuk mendesign tampilann
aplikasi, karena back-end developer yang menangani bagian controller dan
92
Web Programming I
modelnya. Jadi pembagian tugas pun menjadi mudah dan pengembangan aplikasi
dapat di lakukan dengan cepat dan terstruktur.</p>
</section>
<footer>
<a href="http://www.RentalBuku.com">RentalBuku</a>
</footer>
</div>
</body>
</html>
Kemudian buatlah stylebuku.css untuk membuat tampilan lebih bagus dan simpan di
folder root seperti berikut: rental_buku/assets/css/stylebuku.css
body{
background: #eee;
color: #333;
font-family: sans-serif;
font-size:15px;
}
#wrapper{
background: #fff;
width: 1100px;
margin: 20px auto;
}
#wrapper header{
background: #232323;
padding: 20px;
}
#wrapper header hgroup{
93
Web Programming I
float: left;
color: #fff;
}
#wrapper header nav{

float: right;
margin-top: 50px;
}
#wrapper header nav ul{

padding: 0;
margin: 0;
}
#wrapper header nav ul li{

float: left;
list-style: none;
}
#wrapper header nav ul li a{

padding: 15px;
color: #fff;
text-decoration: none;
}
.clear{
clear: both;
}
footer{
background: #232323;
padding: 20px;
}
94
Web Programming I
footer a{
color: #fff;
text-decoration: none;
}
section{
padding: 20px;
}
Seteleah membuat 3 file di atas. sebelum di jalankan melalui browser, terlebih dahulu
perlu dilakukan seting base_url( ) untuk memudahkan dalam menghubungkan file
view dengan file css nya.
e. Seting base_url () pada codeigniter

Untuk melakukan seting base_url( ), dapat dilakukan melalui file config.php yang ada
di dalam application/config/config.php. buka file tersebut lalu cari baris sintak
seperti berikut:
Kemudian diubah menjadi
Setingan di atas mengikuti alamat path projek masing-masing. Kemudian dapat

diperhatikan pada contoh file v_index.php di bagian <head> bahwa untuk
menghubungkan dengan file css, dibutuhkan bantuan base_url( ). seperti berikut:
Hasil perintah di atas akan sama seperti ini
<link rel="stylesheet" type="text/css"
href="http://localhost/rental_buku/assets/css/stylebuku.css">
Hal tersebut di atas dikarenakan base_url( ) sudah terlebih dahulu di seting menjadi
“localhost/rental_buku”. Ketika base_url( ) sudah diseting atau diubah dari bentuk
95
Web Programming I
default menjadi seperti di atas, maka perlu juga dilakukan pengaktifan helper url. Hal
ini dapat dilakukan dengan cara menambahkan script load helper pada controller
Web.php yang sudah dibuat pada bagian construct.
<?php
$this->load->helper(„url‟);
}
}
}
Atau bisa juga melalu file autoload.php yang ada di

application/config/autoload.php kemudian cari baris sintak seperti di bawah
Kemudian diubah dengan ditambahkan kata „url‟ menjadi seperti di bawah
Setelah selesai, bisa dilihat hasilnya dengan menjalankan kontroler Web.php

http://localhost/rental_buku/index.php/web
hasilnya seperti gambar di bawah.
96
Web Programming I
Demikian tampilan web sederhana sudah berhasil dibuat pada codeigniter. Tapi
halaman ini belum dinamis. Masih perlu membuat bagian header dan footer secara
berulang-ulang pada halaman-halamn lainnya.
f. Membuat Halaman Template Dinamis

Pembuatan template web yang dinamis hanya cukup dengan cara memisah-misahkan
file v_index.php yang sudah dibuat tadi menjadi beberapa bagian file view. Yaitu
akan dibuat menjadi tiga file view menjadi file v_header.php, v_index.php,
v_footer.php. file-file tersebut disimpan di tempat yang sama seperti file
v_index.php sebelumnya.
File application/views/v_header.php
<!DOCTYPE html>
<html>
<head>
97
Web Programming I
<meta charset="utf-8">
<title>Web Prog II | Merancang Template sederhana dengan
codeigniter</title>
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>RentalBuku.net</h1>
<h3>Membuat Template Sederhana dengan
CodeIgniter</h3>
</hgroup>
<nav>
<ul>
base_url().'index.php/web' ?>">Home</a></li>
base_url().'index.php/web/about' ?>">About</a></li>
</ul>
</nav>
<div class="clear"></div>
</header>
Kemudian file application/views/v_index.php

<section>
codeigniter.</p>
98
Web Programming I

<ol type="a">
<li>Model</li>
<li>View</li>
website.</p>
<li>Controller</li>
99
Web Programming I
</section>
File application/views/v_footer.php
<footer>
<a href="http://www.RentalBuku.com">RentalBuku</a>
</footer>
</div>
</body>
</html>
Setelah file dipecah menjadi tiga file, selanjutnya cara untuk memanggil file-file
tersebut agar bisa tampil menyatu adalah dengan cara memanggilnya secara berurutan
pada controller Web.php
<?php
}
$this->load->view(„v_header‟,$data);
$this->load->view(„v_footer‟,$data);
}
}
100
Web Programming I
Hasil yang ditampilkan akan sama seperti sebelum dipisah menjadi 3 file.
Tetapi kelebihannya adalah dapat dengan mudah untuk membuat halaman lainnya
dengan tampilan header dan footer yang tetap sama. Tinggal memanggil
v_header.php dan v_footer.php dan mengganti file v_index.php dengan file
halaman lain yang ingin ditampilkan dengan header dan footer tersebut.
Contoh untuk membuat halaman lainnya yaitu akan dibuat halam
v_about.php. Yang mana link untuk menuju halaman about sudah dibuat
sebelumnya pada file v_header.php. Link yang sudah dibuat yaitu Home diseting
untuk menuju atau mengakses method index() dan About diseting menuju atau
mengakses methode about()
<li><a href="<?php echo base_url().'index.php/web' ?>">Home</a></li>
<li><a href="<?php echo base_url().'index.php/web/about' ?>">About</a></li>
Sekarang buatlah file view lagi dan beri nama v_about.php dan simpan di
application/views/v_about.php
<section>
codeigniter.</p>
<ol type="a">
<li>Model</li>
101
Web Programming I
<li>View</li>
website.</p>
<li>Controller</li>
</section>
102
Web Programming I
Kemudian buat method baru yaitu method about() pada controller Web.php
<?php
}

$this->load->view('v_header',$data);
$this->load->view('v_footer',$data);
}
public function about(){

$data['judul'] = "Halaman About";
$this->load->view('v_header',$data);
$this->load->view('v_footer',$data);
}
}
Selanjutnya jalankan kembali pada browser dan klik pada menu About atau bisa
langsung mengakses ke method about.
http://localhost/rental_buku/index.php/web/about
103
Web Programming I
104
Web Programming I
BAB XI
MEMBUAT FORM VALIDASI PADA CODEIGNITER
1. Form Validasi
Pada pertemuan ini mahasiswa diharapkan dapat memahami tentang validasi data
dan bagaimana membuat form validasi data pada codeigniter dalam penginputan data.
Seperti misalnya dalam menentukan form, apa saja yang wajib untuk diisi, form
dengan format input tertentu, membuat konfirmasi password dan lainnya.
Pembuatan form validasi pada codeigniter diperlukan adanya pemanggilan
library form_validation pada codeigniter.
Pada saat membuat dan menangani form, proses validasi data merupakan bagian yang
sangat penting untuk diperhatikan. Validasi data diperlukan untuk menjaga keabsahan
dari data yang dikirim oleh user ke dalam aplikasi
2. Mekanisme Validasi Data di dalam Form

a. Form ditampilkan ke halaman web
b. User mengisi data ke dalam form tersebut
c. Jika terdapat satu atau beberapa data yang salah, maka form akan ditampilkan
ulang, biasanya disertai dengan pesan kesalahan.
d. Proses ini akan diulang sampai semua data yang diminta di dalam form diisi
dengan benar.
Proses pemeriksaan data yang dikirim oleh user di dalam form dilakukan di dalam
kontroler, demikian juga dengan pendefinisian aturan (rule) dari datanya.
3. Memuat Library Form_validation

Untuk mengimplementasikan proses validasi data, yang diperlukan adalah
memuat librari dari form_validation terlebih dahulu. Proses pemuatan librari tersebut
dapat dilakukan di bagian konstruktor controller.
$this->load->library(„form_validation‟);
105
Web Programming I
Atau bisa juga dilakukan melalui file autoload yang ada dalam folder
application/config/autoload.php
Buka file tersebut lalu cari baris sintak seperti berikut:
Kemudian diubah dengan ditambahkan kata form_validation seperti berikut:
Contoh pembuatan form validasi kali ini akan membuat kontroler dengan nama
Form.php simpan pada application/controllers/Form.php
Berdasarkan kontroler Form.php di atas, maka perlu dibuat terlebih dahulu sebuah
form pada view yang akan dipanggil pada method index agar dipanggil pertama kali.
application/views/v_form.php
106
Web Programming I
Untuk membuat form validation, sebelumnya harus menentukan dulu form

yang akan di berikan validasi. Seperti contoh di atas telah membuat form validation
107
Web Programming I
pada form input nama, email dan konfir_email. function set_rules di atas berarti telah
menetapkan peraturan untuk form. cara penulisannya pada parameter pertama berikan
nama form yang ingin di beri validasi, pada parameter kedua berikan kata yang di
munculkan pada saat validasi. dan parameter ketiga isikan peraturan form. required
berarti wajib, berarti form tersebut wajib di isi. sekarang coba jalankan form
validation yang sudah dibuat dengan alamat
http://localhost/rental_buku/form. lalu klik tombol submit jangan mengisi form nya
maka akan muncul peringatan untuk mengisi form.
letak pesan peringatan form validationnya di tampilkan dengan fungsi berikut

pada
view form.
dan jika ingin menampilkan pesan dengan manual anda dapat menggunakan
fungsi
berikut
108
Web Programming I
untuk selengkapnya tentang membuat form validation pada codeigniter anda

dapat membacanya pada user_guide yang sudah di sediakan oleh codeigniter pada
project CI anda.
http://localhost/malasngoding/user_guide/libraries/form_validation.html#the-form
109
Web Programming I
BAB XII
STUDI KASUS PERPUSTAKAAN
Pada pertemuan ini mahasiswa diharapkan dapat memahami persiapan dasar

untuk memulai sebuah projek kasus. Mahasiswa juga mampu memahami desain dan
pembuatan database
Pada tahap ini akan dimulai membuat sebuah project aplikasi berbasis web
yang
akan dibuat dengan menggunakan CodeIgniter. untuk memulai pembuatan aplikasi
perpustakaan berbasis web.
1. Persiapan Membuat Aplikasi Perpustakaan

Pada tahap persiapan ini terdiri dari instalasi codeigniter, pemilihan tool
pendukung, setting base_url, load librari, helper, dan segala yang dibutuhkan. Tetapi
disini tidak akan membahas instalasi codeigniter karena sudah sangat mudah
dijelaskan di pertemuan awal. Disini hanya kan membahas mulai dari seting base_url
dan seterusnya.
Diperlukan beberapa penyesuaian atau pengaturan pada codeigniter sebelum
mulai digunakan untuk membuat aplikasi perpustakaan. Semua pengaturan atau
penyesuaian yang dilakukan di sini sesuai dengan kebutuhan untuk membuat aplikasi
perpustakaan dengan codeigniter. diantaranya adalah:
2. Setting Base URL

Pengaturan base url adalah pengaturan URL dasar dalam sebuah project
aplikasi yang dibuat dengan menggunakan codeigniter. Pengaturan base url di
codeigniter terdapat di dalam file config.php di dalam folder project codeigniter.
perpustakaan/application/config/config.php
Helper dan Library bisa dibilang seperti perpusatakaan coding dengan fungsi-
fungsi yang berbeda dan memiliki kegunaan masing-masing. Tinggal memanggil dan
110
Web Programming I
menggunakannya saja. Kita juga bisa membuat helper atau library kita sendiri di
codeigniter untuk memudahkan pekerjaan kita.
Di tahap ini kita akan men-load atau membuka beberapa library dan helper
codeigniter yang kita butuhkan dalam pembuatan aplikasi perpustakaan ini. Untuk
menjalankan atau membuka library dan helper secara otomatis di codeiginter, kita
bisa mengaturnya dalam file autoload.php dalam folder
application/config/autoload.php.
Perpustakaan/application/config/autoload.php
Library yang akan kita load secara otomatis adalah database, session dan
form_validation.
Cari sintak
Kemudian tambahkan database, session dan form_validation. Sehingga menjadi

seperti berikut:
Dan helper yang akan kita load secara otomatis adalah url:
Kemudian tambahkan “url” (karena kita hanya membutuhkan helper url

disini). Maka akan menjadi seperti berikut.
Proses autoload library dan helper selesai. Selanjutnya kita akan membuat
database untuk aplikasi perpustakaan dan melakukan konfigurasi database pada
codeigniter.
3. Merancang & Membuat Database Aplikasi Perpustakaan dan Konfigurasi

database di Codeigniter
Berikut adalah gambaran struktur database yang akan kita buat untuk aplikasi
perpustakaan ini.
111
Web Programming I
Buat sebuah database baru dengan nama “perpus”.

Ada 5 buah tabel yang akan kita buat dalam database dan 1 tabel tambahan. Yaitu:
1. Kategori
2. Buku
3. Anggota
4. Peminjaman
5. Detail_pinjam
6. Admin
7. Transaksi
Buatlah sebuah database melalui localhost/phpmyadmin. Beri nama database
dengan nama perpus. Kemudian buat tabel-tabelnya. Seperti berikut:
Admin
kategori
112
Web Programming I
buku
anggota
transaksi
113
Web Programming I
4. Membuat Koneksi Database Codeigniter dengan MySQL

Sebelum melakukan seting konfigurasi pada file database, terlebih dahulu harus
disiapkan databasenya. Agar bisa langsung dipraktekkan.
Selanjutnya untuk menghubungkan codeigniter dengan database buka file
config database codeigniter yang terletak di application/config/database.php
kemudian cari baris sintak seperti berikut:
Kemudian masukkan username, password, dan nama database, untuk password

jika tidak ada maka bisa dibiarkan kosong. Sehingga akan menjadi.
114
Web Programming I
5. Membuat Model Yang Terstruktur dan Efisien untuk CRUD

Pada tahap ini akan dibuat fungsi-fungsi yang bisa gunakan berulang kali, tanpa
harus repot banyak-banyak membuat fungsi pada model. contohnya untuk insert data
ke database, hanya buat satu fungsi untuk insert data ke database. Dan bisa kita
gunakan secara berulang-ulang kali. Begitu juga dengan fungsi edit, hapus dan update
data pada database.
Buat sebuah file model dengan nama M_perpus.php. perlu diperhatikan untuk
Penamaan Controller dan Model harus diawali dengan huruf besar di codeigniter 3.
Memang tidak masalah jika dibuat dengan nama kecil, tetapi akan menyalahi aturan
penggunaan codeigniter yang benar dan akan terjadi trouble saat diupload dihosting.
115
Web Programming I
Dengan model seperti di atas, kita bisa menggunakannya secara berulang-ulang

tanpa membuat 1 function model untuk 1 function pengelolaan database. Untuk
menginput data ke database kita bisa menggunakan function insert_data(), untuk
menampilkan data atau mengambil data dari database kita bisa menggunakan
function get_data(). Untuk mengambil data tertentu bisa menggunakan edit_data(),
untuk menghapus data dari database kita bisa menggunakan function delete_data(),
dan untuk mengupdate data pada database kita bisa menggunakan function
update_data().
Kemudian kita harus mengatur autoload model di
application/config/autoload.php. agar model m_rental di load secara otomatis. Jadi
tidak perlu lagi kita load dari controller.
Application/config/autoload.php
Cari baris sintak berikut:
Kemudian ubah menjadi
6. Integrasi CodeIgniter dan Bootstrap

Untuk bisa menggunakan bootstrap, kita bisa mendownload bootstrap ini dari
situs resminya di http://getbootstrap.com/, atau bisa menggunakan bootstrap yang
telah di sertakandi dalam folder pendukung. ekstrak bootstrap ke directory root
project perpustakaanini. Lalu rename nama folder menjadi “assets”.
116
Web Programming I
MEMBUAT FORM LOGIN, MD5 DAN PESAN NOTIFIKASI
1. Membuat Halaman Login

Halaman login akan kita buat di halaman utama pada saat aplikasi
perpustakaan ini diakses. sebagai percobaan, kita harus menginput data username dan
password admin terlebih dulu di tabel admin. Caranya bisa klik tambahkan pada
tabel admin. Kemudian isi username dengan “nama kamu”, password dengan
“admin123”. Jangan lupa pilih fungsi md5 pada password. Seperti contoh pada
gambar berikut ini:
Kemudian klik kirim untuk menyimpan data. Oke selesai, akun admin sudah kita
buat, selanjutnya kita buat sistem loginnya.
117
Web Programming I
Form login akan kita buat pada controller Welcome.php. karena controller
Welcome.php adalah controller yang default di gunakan pada codeigniter. Untuk
mengubah default controllernya teman-teman bisa mengubahnya di
application/config/routes.php. tapi di sini kita tidak akan mengubahnya, kita akan
langsung menggunakan controller Welcome.php sebagai controller default. Halaman
login pun akan kita buat di controller ini. Buka Controller welcome.php dan tuliskan
syntax berikut.
Application/controller/Welcome.php
Setelah selesai menulis syntax di atas pada controller Welcome.php, akan

sedikit dijelaskan tentang function construct(), function construct seperti contoh di
atas adalah function yang pertama kali akan di jalankan pada saat sebuah class
dijalankan. Setelah function construct() di jalankan, selanjutnya yang di jalankan
118
Web Programming I
adalah function index(). Ini merupakan ketetapan dari codeigniter. Coba perhatikan
pada function construct() di atas, pada function construct() ada pemanggilan model
„m_perpus‟. kenapa kita perlu memanggil model ini? karena kita akan berhubungan
dengan model m_perpus di dalam controller Welcome ini. Selanjutnya perhatikan
juga pada function index() di atas.
Pada function index() kita membuat perintah untuk membuka view login.
Syntax $this->load->view() adalah perintah untuk menampilkan view (tampilan). Di
sini kita memerintahkan untuk menampilkan view login (login.php). ekstensi .php
nya tidak perlu lagi kita tuliskan saat memanggil view. Cukup seperti perintah di atas.
Pada saat controller welcome dijalankan, otomatis function index juga dijalankan,
dan akan menampilkan halaman login (view login.php). Karena pada function index
kita ingin menampilkan view login.php, maka sekarang kita buat dulu view login.php
nya.
119
Web Programming I
Application/view/login.php
120
Web Programming I
Perhatikan pada tag <head> … </head> di atas, Disinilah terlihat kegunaan dari
base_url() yang sudah di jelaskan di atas tadi.
Pada pengaturan config[„base_url‟] sebelumnya kita telah menetapkannya dengan

http://localhost/perpustakaan/. Jadi saat kita gunakan seperti contoh menghubungkan
template dengan bootstrap seperti di atas, sama seperti
<link rel="stylesheet" type="text/css"
href="http://localhost/perpustakaan/assets/css/bootstrap.css'
?>">
Karena base_url() sudah sama dengan http://localhost/perpustakaan/. Kemudian lagi
perhatikan pada form yang sudah kita buat pada view login.php di atas.
Action dari form ini telah diatur agar ke function/method login di controller
welcome.
method/function login pada controller welcome yang telah dibuat. yang akan di
eksekusi sebagai form handler dari form login.
121
Web Programming I
Pertama kita menangkap data yang dikirim dari form. Dan kita tetapkan
validasinya, bahwa username dan password harus wajib di isi (required), kemudian
kita cek validasinya. Jika tidak ada masalah, kita cek username dan password yang
diinput sesuai atau tidak dengan username dan password pada tabel admin. Jika
sesuai maka kita buat session id, dan nama. Yang mana session id kita simpan id
admin yang melakukan login, session nama kita menyimpan nama admin yang login.
Setelah dibuat sessionnya, maka selanjutnya mengalihkan halamannya ke controller
admin. Karena controller admin ini yang akan dijadikan sebagai halaman admin.
Jika login gagal maka dialihkan ke controller welcome kembali. Yang mana
halaman login ada di controller welcome. Sambil mengirimkan pesan melalui url
untuk membuat pesan notifikasi bahwa login gagal.
view login.php yang sudah dibuat. Di sana telah dibuat pesan notifikasi. Jika
terdapat data pesan yang dikirim dari url, dan jika pesannya adalah “gagal”, maka
akan di tampillkan pesan notifikasi “ login gagal! Username dan password salah ”.
122
Web Programming I
Jika pesannya adalah logout, maka akan di tampilkan “anda telah logout“. Jika
pesannya adalah “belumlogin”. Maka akan di tampilkan notifikasi “silahkan login
dulu”. Sampai di sini, sistem login belum rampung 100%, karena belum menyiapkan
halaman admin. Oleh sebab itu kita akan membuat dan menyiapkan halaman admin
dulu. Baru setelah itu kita coba apakah login sudah berjalan sebagai mana yang kita
perintahkan atau belum.
2. Membuat Halaman Admin dan logout

a. Membuat Halaman Admin
Jika login berhasil, halaman akan dialihkan ke controller admin. Maka dari itu
harus disiapkan dulu controller admin nya. Buat sebuah controller baru dengan nama
Admin.php
123
Web Programming I
Application/controller/Admin.php
Pada function construct() kita membuat pengecekan jika si admin belum login, maka
akan di alihkan ke halaman login. Ini bertujuan untuk melindungi controller admin
dari pengguna yang belum melakukan login.
Dan pada function index() di controller admin, kita akan membuat halaman
dashboard.
Pada function index() kita menampilkan view header, index dan footer. Yang mana
pada view index kita memparsing data yang kita ambil dari database.
$this->db->query() adalah fungsi untuk menjalankan query database di codeigniter.

bisa dibaca panduannya pada user_guide codeigniter.
http://localhost/perpustakaan/user_guide/database/queries.html
124
Web Programming I
Disarankan untuk membaca tutorial membuat template web sederhana dengan

codeigniter dan tutorial cara memarsing data ke view codeigniter terlebih dulu
sebelum melanjutkan ke depan. Tutorial membuat tampilan atau template web
sederhana dengan codeigniter dan cara memparsing data ke vew sudah dijelaskan
pada pertemuan sebelumnya. Pada variabel array peminjaman di atas bertujuan untuk
mengambil data transaksi dari tabel peminjaman sebanyak 10 record. Untuk di
tampilkan di halaman admin. Variabel array anggota kita buat untuk mengambil 10
record data kostumer terakhir, dan variabel array buku kita buat untuk mengambil 10
record terakhir data buku dari tabel buku. Semua data yang kita ambil ini akan kita
tampilkan pada view index (halaman dashboard admin). Buat sebuah folder dengan
nama „admin‟ di dalam folder view.kemudian buat 3 buah view baru dengan nama
index.php, header.php dan footer.php di dalam folder admin. pada view index.php ini
kita akan membuat halaman dashboard admin.
application/views/admin/header.php
125
Web Programming I
application/views/admin/index.php
126
Web Programming I
127
Web Programming I
128
Web Programming I
129
Web Programming I
Application/views/admin/footer.php
Silahkan buka controller welcome pada browser untuk melihat hasilnya.

http://localhost/perpustakaan/
perlu diperhatikan di sini, saat kita mengakses http://localhost/perpustakaan/ sama
saja seperti kita mengakses http://localhost/perpustakaan/welcome. karena controller
welcome telah kita set sebagai controller default.
Coba memasukkan username dan password yang salah. Untuk memastikan

sistem login yang kita buat sudah berjalan sebagaimana mestinya. Di sini saya
mencoba memasukkan username : samsul, dan passwordnya samsul123.
130
Web Programming I
Dan coba untuk akses halaman admin tanpa login. Dengan langsung mengakses
controller admin. Seharusnya jika belum login, maka tidak bisa mengakses halaman
admin (controller admin). Coba kita akses langsung halaman admin dengan
mengakses url berikut.
http://localhost/perpustakaan/admin
maka akan muncul pesan notifikasi yang mengharuskan kita untuk melakukann
login terlebih dulu.
131
Web Programming I
Setelah kita mencoba masuk langsung ke halaman admin tanpa login, dan
mencoba memasukkan username password yang salah, sekarang kita akan mencoba
memasukkan username dan password yang benar. Coba kita masukkan username =
imam, dan password = imam. Maka hasilnya kita berhasil login dan masuk ke
halaman dashboard admin.
132
Web Programming I
b. Membuat Logout
Setelah berhasil membuat login, selanjutnya kita akan membuat logout. Atau
link keluar dari sistem. Perhatikan pada menu logout pada view header.php. kita telah
membuat link menu logout.
Link logout di atas, mengarahkan ke function/method logout di controller admin.

Oleh karena itu kita akan membuat function logout pada controller admin.
Tambahkan function logout berikut ini ke controller admin
Syntax $this->session->sess_destroy(); merupakan fungsi codeigniter untuk

menghapus semua session. Setelah menghapus session, kita alihkan halaman ke
halaman login.
Sekarang coba klik pada menu logtout. Maka halaman akan dialihkan kembali ke
halaman login.
133
Web Programming I
c. Membuat Fitur Ganti password

Selanjutnya akan dibuat sebuah fitur untuk admin, yaitu fitur untuk mengganti
password. Perhatikan pada menu ganti password di header admin. Kita telah
membuatkan link menu untuk mengganti password. Dimana link tersebut sudah kita
arahkan ke function ganti_password di controller admin.
jadi kita akan membuat sebuah function baru di controller admin, yaitu function
ganti_password(). Tambahkan function/syntax berikut pada controller admin.php.
Seperti yang terlihat pada function di atas, kita menampilkan view header.php, view
ganti_password.php dan view footer.php. pada view ganti_password.php akan kita
buat form untuk mengganti password.
Buat file view baru dengan nama ganti_password.php. dalam folder admin dalam
view.
Application/view/admin/ganti_password.php
134
Web Programming I
Aksi dari form ini akan di jalankan pada function ganti_password_act pada controller
admin.
Selanjutnya buat function ganti_password_act() pada controller admin.

Application/controllers/Admin.php
135
Web Programming I
Syntax di atas adalah function yang kita buat untuk menangani form ganti password.
Perhatikan pada validation yang kita buat, kita menggunakan validation required dan
maches. Seperti yang pernah disinggung sebelumnya tentang form validation
required, required berarti kita menetapkan form tersebut menjadi wajib di isi atau
tidak boleh kosong. Dan matches[] adalah form validation untuk memvalidasi
kesamaan value. Di sini kita mewajibkan password baru harus sama dengan form
ulangi password.
Kemudian kita cek validasinya, jika sesuai dan tidak ada masalah, maka kita update
data password si admin.
Syntax $this->session->userdata('id') merupakan perintah untuk menampilkan session

„id‟ admin yang sedang login. Setelah data password admin di update, maka
kemudian halaman akan dialihkan lagi ke function ganti_password. Sekarang kita
akan mencoba mengganti password admin. Seperti yang dijelaskan sebelumnya, kita
membuat validasi password dimana password baru yang diketikkan pada form
password baru harus sama dengan yang di ketikkan pada form ulang password. Ini
berguna untuk memvalidasi dan mencegah admin salah memasukkan password
barunya (salah ketik). Disini kita akan mencoba mengganti password admin dengan
“administrator”. Tapi kita coba dulu memasukkan password yang berbeda. Maka
hasilnya akan muncul pesan notifikasi bahwa “password baru” dan “ulangi password
baru” yang di input harus sama.
136
Web Programming I
Ketika password baru dan ulangi password baru diinput dengan password yang sama,
maka akan muncul pesan password berhasil duganti.
137
Web Programming I
BAB XIII
1. Menampilkan Data Buku

Langkah pertama akan dibuatkan file untuk menampilkan data buku. Data buku akan
kita tampilkan pada function/method buku(). Sesuai dengan link yang sudah kita
tentukan di menu “Data Buku” pada menu navigasi.
Tambahkan sebuah function dengan nama buku() pada controller admin.php.

Application/controllers/Admin.php
Pertama, kita akan mengambil data buku dari database dengan menggunakan function
get_data() di model m_perpus.
Dari data yang didapatkan dari hasil query di function edit_data() di atas kita return
kembali untuk dimasukkan ke variabel array buku.
Lalu kita parsing/kirim datanya ke view buku.php seperti pada syntax di atas. jadi di
sini pada view buku.php lah kita akan menampilkan data bukunya.
Buat view baru di dalam folder admin dengan nama buku.php
138
Web Programming I
Application/view/admin/buku.php
Sekarang coba kita klik pada menu data buku. Maka halaman akan diarahkan ke
method/function buku(). Dan data buku pun berhasil ditampilkan.
139
Web Programming I
2. Input Data Buku

Form input data buku akan kita buat pada method/function tambah_buku() dalam
controller Admin.php. seperti yang sudah kita arahkan pada tombol “Buku Baru”.
Buat function tambah_buku() baru pada controller Admin.php.

Pada function tambah_buku() ini kita akan membuat form penginputan data buku
baru. Yaitu akan kita buat pada view tambahbuku.php. seperti yang sudah kita
tetapkan pada function tambah_buku()
140
Web Programming I
Application/view/admin/tambahbuku.php
141
Web Programming I
Form tambah buku ini akan di proses pada function/method tambah_buku_act() di

controller admin.php.
Jadi kita buat lagi function baru di controller admin.php. yaitu function
tambah_buku_act().
142
Web Programming I
Sekarang kita akan mencoba menginput data buku baru dengan klik pada tombol
“buku baru”. Silahkan coba diisi semua, kemudian disimpan, ketika berhasil
menyimpan maka akan kembali ke tampilan data buku.
143
Web Programming I
BAB XIV
3. Update Data Buku

Untuk megedit data buku, akan kita buat sebuah form baru lagi pada function
edit_buku() di controller admin.php. seperti yang telah kita arahkan pada tombol edit
di data buku.
Buat function baru lagi dengan nama edit_buku() dalam controller admin.php.
Di sini kita menangkap data id buku yang ingin diedit di dalam parameter function
edit_buku(). Kemudian kita ambil data buku yang memiliki id tersebut, kemudian
kita parsing/kirim ke view editbuku.php. karena pada view editbuku.php inilah akan
kita buat form untuk mengedit data buku.
Application/view/admin/editbuku.php
144
Web Programming I
145
Web Programming I
Form edit data buku ini akan di proses pada function update_buku() dalam controller
admin.php pada saat disubmit.
Jadi buat lagi sebauh function baru dengan nama update_buku() pada controller
Admin.php.
146
Web Programming I
147
Web Programming I
Sekarang kita akan mencoba mengubah/mengedit salah satu data buku.

Klik pada tombol edit. Lalu ubah yang dibutuhkan kemudian simpan/update
4. Menghapus Data Buku.

Sesuai dengan link yang sudah kita tentukan pada tombol hapus di table data
buku seperti di atas.
Untuk aksi dari penghapusan data buku kita akan membuatnya di function/method
hapus_buku() dalam controller admin. Buat sebuah method baru dengan nama
hapus_buku() di controller admin.php.
Application/controllers/admin.php
148
Web Programming I
Sekarang untuk mencobanya, bisa klik tombol hapus pada buku yang ingin di hapus.
Maka data bukupun terhapus
149
Web Programming I
BAB XV
LIVE PROJECT
Penjelasan Live Project

 Berdasarkan project Perpustakaan, masing-masing kelompok wajib
menambahkan CRUD Anggota, dan kategori.
 Untuk menyelesaikan project diatas, mahasisa diperbolehkan membuka CRUD
buku yang ada pada pertemuan 13 & 14
Penilaian Live Project

 Create : 25%
 Read : 25%
 Update : 25%
 Delete : 25%
150
Web Programming I
BAB XV
UJIAN AKHIR SEMESTER
151

Modul D3 - WebProgramming1 - 2018 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul D3 - WebProgramming1 - 2018 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PRAKTIKUM

Disusun Oleh Tim Penyusun Modul Manajeman Informatika

Akademik Manajemen Informatika dan Komputer

1.1. Dasar-Dasar Website

Gambar 1.1. Struktur Navigasi Linier

Gambar 1.2 Contoh Struktur Navigasi Linier

2. Struktur Navigasi Hirarki

Gambar 1.3. Struktur Navigasi Hirarki

Gambar 1.4 Contoh Struktur Navigasi Hirarki

3. Struktur Navigasi Non-Linier

Gambar 1.5. Struktur Navigasi Non-Linier

Gambar 1.6. Contoh Struktur Navigasi Non-Linier

4. Struktur Navigasi Campuran

Gambar 1.7. Struktur Navigasi Campuran

Gambar 1.8. Contoh Struktur Navigasi Campuran

1.3. Pengertian HTML (Hypertext Markup Language)

1.4. Struktur Dasar HTML

Perintah dibuat di antara

Klik Tombol start pada

Contoh script penggunaan Tag HTML

Simpan dengan nama contoh02.html

1.5. Pembuatan Tabel Menggunakan HTML

Setelah digabung maka kondisi kode HTML menjadi seperti berikut:

2. Secara Horisontal (Colspan)

Setelah digabung maka kondisi kode HTML menjadi seperti berikut:

Contoh script pembuatan tabel

Jika dilihat di browser, maka terlihat sebagai berikut :

Penggunaan Cellpadding dan cellspacing

Penggunaan Rowspan dan colspan

2.1. Pengertian PHP (PHP Hypertext Preprocessor)

2.2. Memasukkan Kode PHP

Tabel III.1 Jenis-jenis Tag PHP

Contoh Script PHP

Simpan file dengan nama contoh04.php

Perbedaan HTML dengan PHP

2.3. Dasar-Dasar Php

Contoh script konstanta & komentar.

< Lebih kecil 2<4 True

Tugas 05 : Penggunaan Operator

3.1. Pernyataan Seleksi

Prinsip kerjanya adalah perintah di atas akan dikerjakan apabila kondisi

3.2. Komponen Form

Text box : untuk menginput data string ataupun angka.

<input type=”radio” name=”nama_variabel” value=” ”>Isi_Radio

<select name=”nama_variabel” value=” “>

3.3. Pengolahan Data Dari Form

Proses Form menggunakan Metode GET.

Proses Form menggunakan metode : POST

Hasilnya : Karena menggunakan

Latihan Pembuatan Form 1

Nama File : forminputkomentar.php

Nama File : tampilkomentar.php

LATIHAN Penggunaan Form :

KLIK Tombol Tampil, maka akan tampil kiriman datanya.

Tugas 06 : Pembuatan dan Pemanggilan Form :

Tugas 07 : Percabangan 1. Buatlah script sehingga mendapatkan tampilan

Tugas 07 : Percabangan 2 : Buatlah script sehingga mendapatkan tampilan

 Harga di dapat dari :

2. Memformat teks dengan tag HTML = contohjs2.html

3. JavaScript yang diletakkan pada bagian HEAD = contohjs3.html

4. JavaScript yang diletakkan pada bagian BODY = contohjs4.html

6. Fungsi dengan argumen = contohjs6.html

7. Memunculkan tanggal lengkap = contohjs7.html