MODUL PRAKTIKUM
2016
1
Modul Praktikum Pemrograman Web 2 (PG066)
DAFTAR ISI
2
Modul Praktikum Pemrograman Web 2 (PG066)
4.2 TEORI SINGKAT .......................................................................................... 46
4.2.1 Pengenalan Framework ....................................................................... 46
4.2.2 Pengenalan Codeigniter ....................................................................... 47
4.2.3 Diagram Alur Aplikasi Codeigniter ....................................................... 47
4.2.4 Konsep Model-View-Controller (MVC).................................................. 48
4.3 PELAKSANAAN PRAKTIKUM ....................................................................... 49
4.4 LATIHAN ..................................................................................................... 57
4.5 TUGAS MANDIRI ........................................................................................ 58
PRAKTIKUM 5 PHP FRAMEWORK #2..............................................................................59
5.1 TUJUAN PRAKTIKUM .................................................................................. 59
5.2 TEORI SINGKAT .......................................................................................... 59
5.2.1 Controller ............................................................................................. 59
5.2.2 Views.................................................................................................... 61
5.2.3 Model ................................................................................................... 61
5.2.4 Konfigurasi Base URL dan Index .......................................................... 62
5.2.5 Konfigurasi Database ........................................................................... 63
5.2.6 Bekerja Dengan Database .................................................................... 64
5.3 PELAKSANAAN PRAKTIKUM ....................................................................... 66
5.4 LATIHAN ..................................................................................................... 78
5.5 TUGAS MANDIRI ........................................................................................ 79
PRAKTIKUM 6 PHP FRAMEWORK #3..............................................................................80
6.1 TUJUAN PRAKTIKUM .................................................................................. 80
6.2 TEORI SINGKAT .......................................................................................... 80
6.2.1 Library Form Validation ........................................................................ 80
6.2.2 Library Upload ...................................................................................... 81
6.2.3 Library Email ........................................................................................ 81
6.3 PELAKSANAAN PRAKTIKUM ....................................................................... 82
6.4 LATIHAN ..................................................................................................... 94
6.5 TUGAS MANDIRI ........................................................................................ 95
PRAKTIKUM 7 PHP FRAMEWORK #4..............................................................................97
7.1 TUJUAN PRAKTIKUM .................................................................................. 97
7.2 TEORI SINGKAT .......................................................................................... 97
7.2.1 Library Table ........................................................................................ 97
3
Modul Praktikum Pemrograman Web 2 (PG066)
7.2.2 Library Pagination ................................................................................ 97
7.3 PELAKSANAAN PRAKTIKUM ....................................................................... 99
7.4 LATIHAN ....................................................................................................108
7.5 TUGAS MANDIRI .......................................................................................109
PRAKTIKUM 8 UJIAN TENGAH SEMESTER .................................................................... 111
PRAKTIKUM 9 AJAX DAN JQUERY ................................................................................ 112
9.1 TUJUAN PRAKTIKUM .................................................................................112
9.2 TEORI SINGKAT .........................................................................................112
9.2.1 Pengenalan JQuery .............................................................................112
9.2.2 Cara Menggunakan JQuery .................................................................114
9.2.3 Selector Jquery ...................................................................................115
9.2.4 AJAX ....................................................................................................116
9.2.5 Cara Kerja AJAX ..................................................................................117
9.2.6 JQUERY DAN AJAX ..............................................................................117
9.3 PELAKSANAAN PRAKTIKUM ......................................................................118
9.4 LATIHAN ....................................................................................................124
9.5 TUGAS MANDIRI .......................................................................................124
PRAKTIKUM 10 CRUD DENGAN AJAX DAN JQUERY ....................................................... 126
10.1 TUJUAN PRAKTIKUM ..............................................................................126
10.2 TEORI SINGKAT......................................................................................126
10.2.1 CRUD ................................................................................................126
10.3 PELAKSANAAN PRAKTIKUM ...................................................................126
10.4 LATIHAN .................................................................................................140
10.5 TUGAS MANDIRI ....................................................................................141
PRAKTIKUM 11 LAPORAN GRAFIK ............................................................................... 142
11.1 TUJUAN PRAKTIKUM ..............................................................................142
11.2 TEORI SINGKAT......................................................................................142
11.2.1 Laporan Grafik .................................................................................142
11.2.2 Chartjs .............................................................................................142
11.3 PELAKSANAAN PRAKTIKUM ...................................................................144
11.4 LATIHAN .................................................................................................151
11.5 TUGAS MANDIRI ....................................................................................153
PRAKTIKUM 12 LAPORAN PDF .................................................................................... 154
4
Modul Praktikum Pemrograman Web 2 (PG066)
12.1 TUJUAN PRAKTIKUM ..............................................................................154
12.2 TEORI SINGKAT......................................................................................154
12.2.1 Laporan PDF .....................................................................................154
12.2.2 FPDF .................................................................................................154
12.3 PELAKSANAAN PRAKTIKUM ...................................................................155
12.4 LATIHAN .................................................................................................164
12.5 TUGAS MANDIRI ....................................................................................166
PRAKTIKUM 13 LAPORAN SPREADSHEET ..................................................................... 167
13.1 TUJUAN PRAKTIKUM ..............................................................................167
13.2 TEORI SINGKAT......................................................................................167
13.2.1 Laporan Spreadsheet .......................................................................167
13.2.2 PHPSpreadsheet ..............................................................................167
13.3 PELAKSANAAN PRAKTIKUM ...................................................................168
13.4 LATIHAN .................................................................................................178
13.5 TUGAS MANDIRI ....................................................................................181
PRAKTIKUM 14 APLIKASI PHP FRAMEWORK #1 ........................................................... 182
14.1 TUJUAN PRAKTIKUM ..............................................................................182
14.2 TEORI SINGKAT......................................................................................182
14.2.1 Aplikasi Penjualan............................................................................182
14.3 PELAKSANAAN PRAKTIKUM ...................................................................182
14.4 LATIHAN .................................................................................................195
14.5 TUGAS MANDIRI ....................................................................................196
PRAKTIKUM 15 APLIKASI PHP FRAMEWORK #2 ........................................................... 197
15.1 TUJUAN PRAKTIKUM ..............................................................................197
15.2 TEORI SINGKAT......................................................................................197
15.2.1 Aplikasi Penjualan............................................................................197
15.3 PELAKSANAAN PRAKTIKUM ...................................................................197
15.4 LATIHAN .................................................................................................207
15.5 TUGAS MANDIRI ....................................................................................209
5
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 1
PHP LANJUTAN : ARRAY DAN FUNGSI
Tujuan Khusus
1. Mahasiswa dapat mendeklarasikan dan menggunakan array.
2. Mahasiswa dapat membuat fungsi dan menggunakannya
Array merupakan sebuah tipe data terstruktur yang berguna untuk menyimpan
sejumlah data yang bertipe sama. Bagian yang menyusun array disebut elemen
array, yang masing-masing elemen dapat diakses tersendiri melalui index array.
Index array dapat berupa bilangan integer atau string.
Array yang indexnya berupa angka disebut dengan array numeric. Index array ini
dimulai dengan angka 0. Ada 2 cara untuk mendeklarasikan array numeric, yaitu
a. $var = array(“Mobil”,”Motor”,”Sepeda”);
Dengan cara di atas deklarasi array langsung diikuti dengan menyebutkan
value/nilai array. Mobil memiliki index 0, Motor index 1 dan Sepeda index 2
b. $var = array();
6
Modul Praktikum Pemrograman Web 2 (PG066)
$var[] = “Mobil”;
$var[] = “Motor”;
$var[] = “Sepeda”;
Dengan cara di atas dibuat sebuah variabel dengan tipe data array yang
isinya masih kosong. Kemudian untuk mengisinya dengan menulis nama
variable diikuti []. Mobil memiliki index 0, Motor index 1 dan Sepeda index 2
b. $var = array();
$var[„PG065‟] = “PW1”;
$var[„PG066‟] = “PW2”;
Dengan cara di atas dibuat sebuah variabel dengan tipe data array yang
isinya masih kosong. Kemudian untuk mengisinya dengan menulis nama
variable diikuti [].PW1 memiliki index PG065 dan PW2 memiliki index PG066
Untuk mencetak seluruh isi sebuah array bisa menggunakan fungsi perulangan for()
dan foreach(). Bentuk umum fungsi for untuk mencetak seluruh isi array numeric
7
Modul Praktikum Pemrograman Web 2 (PG066)
for($i=0;$i<count($var);$i++){
echo $var[$i];
Bentuk umum fungsi foreach untuk mencetak seluruh isi array numeric
foreach($var as $data){
echo $data;
Bentuk umum fungsi foreach untuk mencetak seluruh isi array string
foreach($var as $index=>$value){
Untuk mencetak struktur array bisa menggunakan fungsi print_r(). Fungsi ini akan
menampilkan index array dan valuenya sehingga mudah dibaca
8
Modul Praktikum Pemrograman Web 2 (PG066)
1.2.2 Fungsi
Fungsi atau function adalah bagian program yang dirancang untuk menyelesaikan
tugas tertentu. Sebuah fungsi bisa dibuat dengan menggunakan keyword function().
Sebuah fungsi bisa dibuat tanpa parameter, maupun dengan parameter.
Function nama_fungsi(parameter1,parameter2,…,parameter2){
Statement;
9
Modul Praktikum Pemrograman Web 2 (PG066)
Fungsi yang dibuat bisa dipanggil dari bagian lain dengan cara menyebutkan nama
fungsinya. Jumlah parameter saat pemanggilan fungsi, sesuai dengan jumlah
parameter saat deklarasi fungsi.
2) Apa yang tercetak di browser jika pada baris 12 program di atas ditambahkan
kode berikut:
Echo $var[5];
10
Modul Praktikum Pemrograman Web 2 (PG066)
3) Di bawah ini adalah contoh menampilkan array string dan array numeric.
Ketik menggunakan notepad++ dan jalankan pada browser.
4) Apa yang tercetak di browser jika pada baris 12 program di atas ditambahkan
kode berikut:
Echo $var[„pg066‟];
11
Modul Praktikum Pemrograman Web 2 (PG066)
5) Di bawah ini adalah contoh menampilkan isi array numeric dan array string.
Ketik menggunakan notepad++ dan jalankan pada browser.
12
Modul Praktikum Pemrograman Web 2 (PG066)
6) Modifikasi program 1.3 di atas sehingga tampilan array $var2 pada browser
menjadi sebagai berikut :
13
Modul Praktikum Pemrograman Web 2 (PG066)
8) Apa yang tercetak di layar jika pada baris 17 program di atas ditambahkan
perintah :
Cetakbiodata($a)
14
Modul Praktikum Pemrograman Web 2 (PG066)
15
Modul Praktikum Pemrograman Web 2 (PG066)
1.4 LATIHAN
1) Sebuah variable array numeric memiliki nilai sebagai berikut :
10,13,15,20,24,30,33,40,46,50,100
Lakukan pembacaan terhadap variable array tersebut dan munculkan di layar
nilai yang merupakan kelipatan 5!
16
Modul Praktikum Pemrograman Web 2 (PG066)
3) Buatlah sebuah fungsi yang memiliki 1 parameter dan sebuah return value.
Parameter berupa bilangan bulat. Return value berupa “genap” atau “ganjil”
tergantung dari parameter yang diberikan :
Jawab no 3 :
17
Modul Praktikum Pemrograman Web 2 (PG066)
Jawab :
3) Buatlah sebuah form untuk menginput jam masuk dan jam keluar sebuah
kendaraan pada tempat parkir. Buatlah fungsi untuk menghitung tarif
parkirnya jika aturannya sebagai berikut
• 2 jam pertama Rp 2000
• 1 jam berikutnya Rp 500
• Maksimal Rp 10000
Jawab No 3:
18
Modul Praktikum Pemrograman Web 2 (PG066)
19
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 2
PHP LANJUTAN : PENANGANAN FILE
Tujuan Khusus
1. Mahasiswa dapat menggunakan fungsi untuk penanganan file
2. Mahasiswa dapat menggunakan fungsi untuk penanganan direktori
3. Mahasiswa dapat membuat form untuk upload file
Dalam management file dan direktori, PHP menyediakan lebih dari 70 fungsi.
Beberapa fungsi utama yang berhubungan dengan management file (create, write,
append, dan delete), antara lain :
20
Modul Praktikum Pemrograman Web 2 (PG066)
w Hanya untuk tulis file, isi file lama dihapus, jika file belum
ada maka akan di-create
w+ Untuk baca dan tulis file, isi file lama dihapus, jika file
belum ada maka akan di-create
a Hanya untuk menambahkan isi file, pointer berada di akhir
file, jika file belum ada maka di-create
a+ Untuk membaca dan menambahkan isi file, pointer berada
di akhir file, jika file belum ada maka di-create
Fungsi fgets() akan membaca isi file tiap baris. Sedangkan fungsi fread() akan
membaca isi file setiap jumlah byte tertentu.
21
Modul Praktikum Pemrograman Web 2 (PG066)
• Membuka direktori
opendir($nama_direktori)
• Menutup direktori
closedir($nama_direktori)\
• Membaca isi direktori
readdir($nama_direktori)
Beberapa fungsi yang berhubungan dengan informasi file bisa dilihat pada table
berikut
22
Modul Praktikum Pemrograman Web 2 (PG066)
ENCTYPE="multipart/form-data"
2. Form inputan upload file dapat menggunakan tag <input> dengan value
atribut TYPE=”FILE”.
4. Destination folder file upload harus bisa writable (bisa diakses), biasanya dengan
permission 777 atau 775.
23
Modul Praktikum Pemrograman Web 2 (PG066)
2) Apa yang muncul di browser jika mode akses yang dipakai pada program
2.1 di atas adalah “w”? Jelaskan!
24
Modul Praktikum Pemrograman Web 2 (PG066)
4) Di bawah ini adalah contoh program membaca isi file. Ketik menggunakan
notepad++ dan jalankan pada browser.
Program 2.3 file3.php
Pada program di atas fungsi fgets akan membaca sebanyak 2048 karakter
dan fungsi fread akan membaca sebanyak 20 karakter saja.
25
Modul Praktikum Pemrograman Web 2 (PG066)
5) Apa yang terjadi pada program di atas, jika pada baris ke-3 mode akses file
diganti menjadi “a”?
6) Di bawah ini adalah contoh program membaca isi file baris hingga baris
sampai selesai.
26
Modul Praktikum Pemrograman Web 2 (PG066)
7) Di bawah ini adalah contoh program untuk membuat user counter yang
disimpan ke dalam file
27
Modul Praktikum Pemrograman Web 2 (PG066)
28
Modul Praktikum Pemrograman Web 2 (PG066)
10) Di bawah ini adalah contoh program untuk membaca dan menampilkan
seluruh isi file yang ada di sebuah direktori. Ketik pada notepad++ dan
jalankan pada browser
29
Modul Praktikum Pemrograman Web 2 (PG066)
Program akan menampilkan di layar, semua file dan direktori yang berada
dalam direktori “images”. Fungsi opendir() pada baris ke-3 adalah untuk
membuka direktori. Sedangkan fungsi readdir() akan membaca file dalam
direktori satu per satu secara urut. Fungsi closedir() pada baris ke-9 adalah
untuk menutup pembukaan direktori.
11) Di bawah ini adalah contoh program untuk mendapatkan informasi sebuah
file.
Program 2.8 infofile.php
30
Modul Praktikum Pemrograman Web 2 (PG066)
12) Contoh program di bawah ini digunakan untuk upload file. Ada 2 file yang
digunakan yaitu form_upload.php yang berfungsi sebagai form untuk
memilih file dan upload.php yang berfungsi untuk memproses file yang
akan diupload. Yang dijalankan pada browser adalah upload.php
31
Modul Praktikum Pemrograman Web 2 (PG066)
2.4 LATIHAN
1) Buatlah sebuah program untuk mengupload sebuah file dengan ketentuan
file yang diupload hanya file doc, docx, pdf, xls, xlsx dengan ukuran
maksimal 1MB!
32
Modul Praktikum Pemrograman Web 2 (PG066)
33
Modul Praktikum Pemrograman Web 2 (PG066)
2) Apa yang dimaksud dengan mode permission 777 pada sebuah direktori?
Jawab :
- DBMS mengurangi dataganda (data redundancy) dengan cara
menghilangkan unsur-unsur data yang
sama.-
- Ini merupakan salah satu keunggulan dari pengelolaan data dengan
sistem database, dimana anda dapat saling berbagi dalam penggunaan
file, baik bersifat jaringan maupun client server.
- Untuk manajemen data Database lebih unggul,
34
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 3
PEMROGRAMAN BERORIENTASI OBJEK
Tujuan Khusus
1. Mahasiswa dapat membuat sebuah class
2. Mahasiswa dapat membuat method
3. Mahasiswa dapat membuat object dari sebuah class dan memanggil method
yang ada di dalamnya
35
Modul Praktikum Pemrograman Web 2 (PG066)
OOP bukanlah sekedar cara penulisan sintaks program yang berbeda, namun lebih
dari itu, OOP merupakan cara pandang dalam menganalisa system dan
permasalahan pemrograman. Dalam OOP, setiap bagian dari program adalah object.
Sebuah object mewakili suatu bagian program yang akan diselesaikan.
3. Polymorphisme
Bagian dasar dari sebuah program yang berorientasi objek adalah objects. Secara
mudah kita dapat memahami mengenai object ini. Sebagai contoh, sebuah mobil
adalah objek. Sebuah mobil mempunyai properties atau bagian-bagian di dalamnya,
seperti warna, mesin, roda, pintu dsb. Sebuah mobil juga dapat melakukan sesuatu
(ada sesuatu yang bisa dilakukan dengan mobil), seperti mengisi bensin,
menyalakan mesin, berjalan, mengerem dsb.
Biasanya object adalah sebuah kata benda. Orang adalah object. Demikian juga
mobil, pohon, bunga, komputer, TV, buku dsb. Namun, object tidak selamanya
sebuah objek fisik. Bisa saja sebuah benda abstrak, seperti account bank, sebuah
file di komputer, database, pesan email, acara TV, dsb.
Class merupakan penjelasan atau deskripsi dari object. Di dalam class, terdapat
penjelasan tentang suatu object termasuk properties yang dimilikinya serta kelakuan
atau method yang bisa dilakukan oleh object. Sebagai contoh, class Orang. Class
Orang tentu setidaknya memiliki beberapa bagian seperti tangan, kaki, mata, telinga
dsb. Class Orang juga setidaknya harus bisa jalan, bisa loncat, bisa lari, bisa melihat,
bisa bicara dsb.
36
Modul Praktikum Pemrograman Web 2 (PG066)
Salah satu keuntungan program didefinisikan dengan konsep OOP adalah adanya
pengkapsulan (encapsulation) program dalam class dan object, dimana programmer
yang menggunakan class tidak perlu mengetahui isi dan jalannya class secara detail,
hanya perlu tahu bagaimana cara menggunakannya. Sama halnya dengan sebuah
mobil misalnya. Seorang pemilik mobil tentunya tidak perlu mengetahui bagian-
bagian mobil secara menyeluruh. Dia tidak perlu mengetahui bagaimana mesin
mobil melakukan pembakaran dan bagaimana mesin mobil bisa menggerakkan roda,
dsb. Dia hanya perlu tahu bagaimana cara menjalankan mobil, bagaimana
menghentikan mobil, dan fungsi mobil lainnya.
Setiap class memiliki properties yang kadang disebut juga attributes. Properties dari
sebuah mobil misalnya warna, ukuran, harga dsb. Di dalam class, properties
dinyatakan dengan sebuah variabel. Misalnya $warna, $harga, dsb.
Method merupakan sesuatu yang bisa dilakukan oleh object. Method dalam PHP
sama artinya dengan sebuah fungsi. Method yang mungkin dipunyai dari sebuah
mobil misalnya, method untuk menghidupkan mobil, menjalankan mobil,
menghentikan mobil, dsb.
Penamaan properties dan method memiliki aturan yang sama dengan penamaan
sebuah variabel atau fungsi. Akan tetapi berdasarkan kesepakatan (convention),
penamaan properties dan method harus menggunakan camel Caps, dimana tiap kata
diawali dengan huruf besar kecuali kata pertama, setiap kata digabung tanpa spasi
atau under-score (_).
class namaClass
37
Modul Praktikum Pemrograman Web 2 (PG066)
Class namaClass
Var $var1;
Var $var2;
Pendeklarasian variabel dalam class seperti pada contoh di atas, bukanlah suatu
keharusan, karena dalam PHP variabel tidak perlu dideklarasikan, cukup digunakan
saja. Namun demikian, pendeklarasian variabel yang digunakan sangat dianjurkan
untuk kemudahan pembacaan dan pemahaman program. Variabel class juga dapat
langsung diinisialisasi dengan sebuah nilai.
38
Modul Praktikum Pemrograman Web 2 (PG066)
Menambahkan Method
Class namaClass
Function namafunction()
Statement;
Menambahkan Konstruktor
Class namaClass
Function construct()
39
Modul Praktikum Pemrograman Web 2 (PG066)
Statement;
Untuk menggunakan sebuah objek, harus dibentuk objek dari classnya. Dari sebuah
class bisa dibentuk beberapa objek sekaligus. Bentuk umum pembentukan objek
adalah sbb :
Sedangkan untuk memanggil anggota (member) dari class dapat dengan format
sbb :
$namaObjek->variabel;
$namaObjek->namaMethod();
40
Modul Praktikum Pemrograman Web 2 (PG066)
41
Modul Praktikum Pemrograman Web 2 (PG066)
2) Buatlah objek ketiga dari class mobil. Apa yang muncul di layar jika object
tersebut memanggil method tampilWarna();
42
Modul Praktikum Pemrograman Web 2 (PG066)
4) Di bawah ini adalah contoh sebuah class untuk membuat sebuah form
inputan sederhana.
Program 2.4 pbo02.inc.php
43
Modul Praktikum Pemrograman Web 2 (PG066)
44
Modul Praktikum Pemrograman Web 2 (PG066)
6) Buatlah sebuah class untuk mengkoneksikan antara PHP dan Mysql. Dalam
class tersebut terdapat properties host,user,password, dan database. Dalam
class tersebut juga ada method untuk koneksi ke database. Buat juga
sebuah object yang menggunakan class tersebut.
3.4 LATIHAN
1) Sebuah class bernama pegawai memiliki properties
nip,nama,alamat,notelp dan tgllahir. Dalam class tersebut terdapat
method untuk menampilkan data pegawai dan method untuk mengubah
data pegawai.
Tuliskan program untuk class tersebut
45
Modul Praktikum Pemrograman Web 2 (PG066)
b. Kecepatan pengembangan
d. Adanya Konsistensi
47
Modul Praktikum Pemrograman Web 2 (PG066)
4) Pada sebuah universitas terdapat dua golongan pegawai, yaitu Dosen dan
Staf biasa. Semua pegawai mendapatkan gaji awal yang sama, yaitu
1.500.000. Gaji tambahan dosen dihitung dari jumlah sks yang diampu
Gaji tambahan staf dihitung dari jumlah kehadiran per bulan Buatlah
program untuk mencetak semua gaji pegawai menggunakan konsep
pemrograman beriorientasi objek!
48
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 4
PHP FRAMEWORK #1
Tujuan Khusus
1. Mahasiswa mengetahui konsep framework
2. Mahasiswa mengetahui konsep MVC
3. Mahasiswa mengetahui cara kerja framework
Secara bahasa, framework berarti kerangka kerja. Framework adalah kerangka kerja
yang berupa perangkat lunak ini bertujuan memudahkan programmer untuk
membangun aplikasi.
• Laravel (https://laravel.com/)
• Zend (http://framework.zend.com/)
• Symfony (https://symfony.com/)
• CakePHP (http://cakephp.org/)
• Yii (http://www.yiiframework.com/)
• CodeIgniter (http://www.codeigniter.com/)
49
Modul Praktikum Pemrograman Web 2 (PG066)
50
Modul Praktikum Pemrograman Web 2 (PG066)
• Model mewakili struktur data. Umumnya kelas model akan berisikan fungsi
untuk retrieve, insert, dan update informasi di database.
• View adalah informasi yang akan ditampilkan ke user.
• Controller bertindak sebagai perantara antara Model, View dan resource lain
yang dibutuhkan untuk memroses request HTTP dan men-generate halaman
web
51
Modul Praktikum Pemrograman Web 2 (PG066)
Penerapan MVC pada CodeIgniter tidak terlalu ketat, jika Model tidak dibutuhkan,
maka aplikasi minimal akan terdiri dari Controller dan View
52
Modul Praktikum Pemrograman Web 2 (PG066)
53
Modul Praktikum Pemrograman Web 2 (PG066)
4) File pertama yang dijalankan adalah file index.php yang berada di folder
budiluhur. Pada file ini Anda dapat merubah setting standar seperti direktori
tempat menyimpan file system dan application .
54
Modul Praktikum Pemrograman Web 2 (PG066)
5) Setelah itu akan menjalankan proses routing yang ada pada file
application/config/routes.php.
55
Modul Praktikum Pemrograman Web 2 (PG066)
Penjelasan program
• Nama file diawali oleh huruf kapital (Welcome.php)
• Nama class diawali oleh huruf kapital kemudian extends kelas
CI_Controller
class Welcome extends CI_Controller {
…
…
}
• Method yang dikerjakan jika tidak ada konstruktor adalah index()
• Statement ini akan menyebabkan controller menjalankan view
welcome_message
$this->load->view('welcome_message');
56
Modul Praktikum Pemrograman Web 2 (PG066)
57
Modul Praktikum Pemrograman Web 2 (PG066)
58
Modul Praktikum Pemrograman Web 2 (PG066)
59
Modul Praktikum Pemrograman Web 2 (PG066)
4.4 LATIHAN
1) Buatlah satu halaman web untuk mencetak nim dan nama mahasiswa
menggunakan Controller dan View
Tuliskan program untuk class tersebut
60
Modul Praktikum Pemrograman Web 2 (PG066)
62
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 5
PHP FRAMEWORK #2
Tujuan Khusus
1. Mahasiswa mengetahui cara membuat Controller, View dan Model
2. Mahasiswa mengetahui cara menginput data ke database
example.com/index.php/blog
Pada contoh di atas, CodeIgniter akan mencari Controller yang bernama Blog.php
a. Method
Example.com/index.php/NAMACONTROLLER/NAMAMETHOD
Jika pada URL tidak terdapat NAMAMETHOD, maka method yang digunakan
adalah index().
63
Modul Praktikum Pemrograman Web 2 (PG066)
example.com/index.php/blog
sama dengan
example.com/index.php/blog/index
Jika URI lebih dari 2 bagian, maka akan dijadikan parameter untuk sebuah
method
b. Private Method
Untuk membuat method yang tidak dapat diakses oleh publik dengan
mendeklarasikannya sebagai private atau protected, sehingga tidak dapat
ditampilkan lewat URL request
http://localhost/budiluhur/index.php/test/_checkSetting
5.2.2 Views
View bisa berupa halaman web sederhana maupun yang kompleks. View dipanggil di
Controller, tidak dapat dijalankan langsung melalui URL. Halaman web bisa terdiri
dari header, footer, menu dll. View disimpan pada folder application/views/
$this->load->view('name_view')
Sebuah view bisa ditambahkan dynamic data yang berasal dari controller. Data
dikirimkan dari Controller ke View menggunakan Array ataupun Object, diletakkan
pada bagian parameter kedua di pemanggilan View
$this->load->view('name_view',$data)
5.2.3 Model
Models merupakan kelas yang dirancang untuk bekerja dengan Database. Models
disimpan dalam direktori application/models. Model dapat dipanggil ketika proses
inisialiasi sistem berjalan dengan menambahkannya di file
application/config/autoload.php
65
Modul Praktikum Pemrograman Web 2 (PG066)
parent:: construct();
Pada bentuk di atas, Model_name adalah nama dari kelas, diawali oleh huruf besar
dan pastikan extends dari CI_Model . Nama file model di atas adalah
Model_name.php dan disimpan di application/models
$this->load->model('model_name');
$this->load->model('direktori/model_name');
Untuk mengakses method di dalam model, menggunakan nama kelas dari Model tsb
$this->load->model('model_name');
$this->model_name->method();
66
Modul Praktikum Pemrograman Web 2 (PG066)
Index page, biasanya berisikan index.php dan dapat dihilangkan jika menggunakan
mod_rewrite
67
Modul Praktikum Pemrograman Web 2 (PG066)
Insert
Bentuk umum :
$this->db->insert
$data = array(
'title' => 'My title',
'name' => 'My Name',
'date' => 'My date'
);
$this->db->insert('mytable', $data);
68
Modul Praktikum Pemrograman Web 2 (PG066)
INSERT INTO mytable (title, name, date) VALUES ('My title', 'My name', 'My date')
Update
Bentuk umum
$this->db->update()
$data = array(
'title' => $title,
'name' => $name,
'date' => $date
);
$this->db->where('id', $id);
$this->db->update('mytable', $data);
UPDATE mytable
DELETE
Bentuk umum :
69
Modul Praktikum Pemrograman Web 2 (PG066)
$this->db->delete();
Bentuk umum
$this->db->select();
70
Modul Praktikum Pemrograman Web 2 (PG066)
71
Modul Praktikum Pemrograman Web 2 (PG066)
72
Modul Praktikum Pemrograman Web 2 (PG066)
73
Modul Praktikum Pemrograman Web 2 (PG066)
74
Modul Praktikum Pemrograman Web 2 (PG066)
75
Modul Praktikum Pemrograman Web 2 (PG066)
76
Modul Praktikum Pemrograman Web 2 (PG066)
77
Modul Praktikum Pemrograman Web 2 (PG066)
78
Modul Praktikum Pemrograman Web 2 (PG066)
79
Modul Praktikum Pemrograman Web 2 (PG066)
80
Modul Praktikum Pemrograman Web 2 (PG066)
81
Modul Praktikum Pemrograman Web 2 (PG066)
5.4 LATIHAN
1) Buatlah sebuah halaman untuk menampilkan rata-rata dari 3 nilai yang
dikirimkan melalui parameter URL. Gunakan view dan controller
Contoh URL
http://localhost/budiluhur/index.php/hitung/rata/60/70/80
Output :
Rata-rata dari 60,70,80 adalah 70
82
Modul Praktikum Pemrograman Web 2 (PG066)
83
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 6
PHP FRAMEWORK #3
Tujuan Khusus
1. Mahasiswa mengetahui cara penggunaan library validation
2. Mahasiswa mengetahui cara penggunaan library email
Skenario yang biasa terjadi saat validasi form adalah sebagai berikut :
1. Form ditampilkan
2. Form diisi kemudian disubmit
3. Jika terdapat kesalahan atau ada yang belum diisi, form akan ditampilkan
kembali dengan menampilkan data serta pesan kesalahan
4. Proses akan berlanjut hingga form yang disubmit sudah valid
84
Modul Praktikum Pemrograman Web 2 (PG066)
4. Melakukan pre-format data jika diperlukan (apakah data harus di-trim ? Atau
di HTML Encode, dll)
5. Menyiapkan data untuk diinsert ke Database
CodeIgniter memiliki kelas untuk menangani upload file yang dapat diset untuk
beberapa keperluan seperti membatasi tipe dan ukuran file. Library ini bisa dipanggil
menggunakan
$this->load->library(‘upload’);
Proses Upload:
1. Form upload ditampilkan sehingga user dapat memilih file dan
menguploadnya
2. Ketika form disubmit, file akan diupload ke direktori yang sudah ditentukan
3. File yang diupload divalidasi berdasarkan aturan yang diset sebelumnya
4. Setelah diupload akan tampil pesan sukses
85
Modul Praktikum Pemrograman Web 2 (PG066)
$this->load->library(‘email);
86
Modul Praktikum Pemrograman Web 2 (PG066)
87
Modul Praktikum Pemrograman Web 2 (PG066)
88
Modul Praktikum Pemrograman Web 2 (PG066)
Jika form diisi kemudian disubmit tidak ada perubahan, sebab hanya direload
Untuk itu akan ditambahkan validasi dengan method set_rules() pada
controller Form.php
89
Modul Praktikum Pemrograman Web 2 (PG066)
Jika valid akan muncul pesan sukses yang berasal dari view form_success.php
Untuk menampilkan isian form kembali ketika error terjadi, dapat digunakan
method set_value(„field_name‟); Ubah file views myform.php sehingga
menjadi seperti ini
90
Modul Praktikum Pemrograman Web 2 (PG066)
91
Modul Praktikum Pemrograman Web 2 (PG066)
'required|min_length[5]|max_length[12]|is_unique[users.userna
me]',
array(
'required' => 'You have not provided %s.',
'is_unique' => 'This %s already exists.'
)
);
• Field password harus sama dengan field confirmation password
$this->form_validation->set_rules('passconf', 'Password
Confirmation', 'required|matches[password]');
92
Modul Praktikum Pemrograman Web 2 (PG066)
$this->form_validation->set_rules('email', 'Email',
'required|valid_email|is_unique[users.email]');
93
Modul Praktikum Pemrograman Web 2 (PG066)
94
Modul Praktikum Pemrograman Web 2 (PG066)
95
Modul Praktikum Pemrograman Web 2 (PG066)
96
Modul Praktikum Pemrograman Web 2 (PG066)
97
Modul Praktikum Pemrograman Web 2 (PG066)
6.4 LATIHAN
1) Buat sebuah form untuk menginput nim, nama, umur. Tambahkan validasi
sebagai berikut
98
Modul Praktikum Pemrograman Web 2 (PG066)
2) Buatlah sebuah form untuk menginput email tujuan, judul pesan dan isi
pesan. Jika diklik tombol submit, kirim email ke tujuan dengan judul dan isi
pesan yang dimasukkan.
99
Modul Praktikum Pemrograman Web 2 (PG066)
100
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 7
PHP FRAMEWORK #4
Tujuan Khusus
1. Mahasiswa mengetahui cara penggunaan library table
2. Mahasiswa mengetahui cara penggunaan library pagination
3. Mahasiswa mengetahui cara penggunaan library session
Table Class menyediakan fungsi-fungsi yang dapat menghasilkan tabel HTML dari
array atau database. Untuk memanggil library table gunakan :
$this->load->library('table');
$this->table
101
Modul Praktikum Pemrograman Web 2 (PG066)
$config['total_rows'] = 200;
// Jumlah data per halaman
$config['per_page'] = 20;
//Proses inisialisasi
$this->pagination->initialize($config);
// Membuat link untuk navigasi
echo $this->pagination->create_links();
Session merupakan salah satu cara untuk mengetahui aktivitas serta keadaan dari
pengguna system.
$this->load->library(‘session');
$this->session
$_SESSION[‘key’] = value;
$this->session->set_userdata(‘key', 'value');
Method set_userdata() memiliki dua parameter yaitu nama variabel session dan
nilainya. Dapat juga menggunakan array sebagai berikut
$newdata = array(
'username' => ‘budiluhur',
'email' => ‘admin@budiluhur.ac.id',
102
Modul Praktikum Pemrograman Web 2 (PG066)
unset($_SESSION[‘var’]);
$this->session->unset_userdata(‘var');
$this->session->unset_userdata($var_array);
$name = $this->session->userdata(‘var');
103
Modul Praktikum Pemrograman Web 2 (PG066)
2) Di bawah ini adalah contoh program menggunakan library table dan data
pada table diambil dari table mhs yang sudah dibuat pada pertemuan
sebelumnya.
Simpan controller Table.php di application/controllers
100
Modul Praktikum Pemrograman Web 2 (PG066)
101
Modul Praktikum Pemrograman Web 2 (PG066)
102
Modul Praktikum Pemrograman Web 2 (PG066)
103
Modul Praktikum Pemrograman Web 2 (PG066)
Perubahan template table dapat dilakukan pada elemen yang diperlukan saja,
tanpa perlu merubah semua, misalnya:
$template = array(
'table_open' => '<table border="1" cellpadding="2"
cellspacing="1" class="mytable">'
);
$this->table->set_template($template);
104
Modul Praktikum Pemrograman Web 2 (PG066)
105
Modul Praktikum Pemrograman Web 2 (PG066)
106
Modul Praktikum Pemrograman Web 2 (PG066)
107
Modul Praktikum Pemrograman Web 2 (PG066)
7.4 LATIHAN
1) Buat sebuah table bernama barang dengan spesifikasi sebagai berikut
Spesifikasi table barang
Nama Field Tipe Data Keterangan
kdbarang varchar(5) Primary key
nmbarang varchar(10)
harga int(10)
merek varchar(30)
stok int(3)
108
Modul Praktikum Pemrograman Web 2 (PG066)
109
Modul Praktikum Pemrograman Web 2 (PG066)
Bedakan tampilan menu user yang sudah berhasil login berdasarkan hak
akses yang dimiliki.
Jika hak akses user, munculkan menu berikut
• Home
• Profile
• Ganti Password
• Berita Terbaru
110
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 8
UJIAN TENGAH SEMESTER
111
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 9
AJAX DAN JQUERY
Tujuan Khusus
1. Mahasiswa mengetahui konsep AJAX
2. Mahasiswa mengetahui implementasi AJAX dan JQUERY pada Codeigniter
JQuery merupakan library open source dengan lisensi GNU General Public License
dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya
sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang
menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas
dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara
gratis di internet.
112
Modul Praktikum Pemrograman Web 2 (PG066)
113
Modul Praktikum Pemrograman Web 2 (PG066)
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu
konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML).
Pada penerapannya, cukup ribet jika harus membangun website dengan
konsep AJAX, saat ini banyak library khusus yang berusaha
mempermudahnya. JQuery merupakan salah satunya.
Download JQuery
Biasanya file jquery dipanggil di bagian <head>, tetapi ada juga yang
meletakkannya sebelum </body>. Pemanggilan dilakukan melalui
<script src=‟lokasifile/jquery.js‟></script>
114
Modul Praktikum Pemrograman Web 2 (PG066)
Konsep dasar dari JQuery adalah untuk memilih beberapa element dan melakukan
sesuatu terhadapnya. Selector adalah fungsi utama pada jQuery. semua fungsi
lainnya di jQuery dapat diakses melalui selector.
fungsi selector adalah $(„ekspressi‟). untuk penggunaan $() yang aman sebaiknya
dilakukan setelah semua page DOM selesai terbaca semua. jadi webpagenya sudah
lengkap baru script di eksekusi. kita dapat melakukannya dengan pada fungsi
$(document).ready().
Adapun parameter yang bisa digunakan pada jquery adalah Id element, class
element dan element itu sendiri. Selector juga bisa mengenali hirarki sebagai
parameter inputnya dan bisa memfilternya langsung dari ekspressi.
Selector Deskripsi
Tag HTML digunakan untuk menunjuk tag HTML. Misalnya $(„p‟) artinya
memilih semua paragraph dalam dokumen
Tag ID Digunakan untuk menunjuk tag yang memiliki atribut ID
tertentu. Misalnya $(„#menu‟) artinya memilih sebuah tag
HTML yang memiliki atribut ID=‟menu‟
tag CLASS Digunakan untuk menunjuk tag yang memiliki atribut CLASS
tertentu. Misalnya $(„.judul) artinya memilih sebuah tag HTML
yang memiliki atribut class=‟judul‟
Contoh Penggunaan
• $('#div1').css('background‐color','red')
memilih tag HTML yang memiliki atribut ID=‟div1‟ dan mengubah warna
backgroundnya menjadi merah
115
Modul Praktikum Pemrograman Web 2 (PG066)
• $('.big').css('background‐color', 'yellow')
memilih tag HTML yang memiliki atribut class=‟big‟ dan mengubah warna
backgroundnya menjadi kuning
• $('#div3').css('background‐color','green')
memilih tag HTML yang memiliki atribut ID=‟div3‟ dan mengubah warna
background menjadi hijau
• $('p').css('background‐color','blue')
memilih tag <p> dan mengubah warna background menjadi biru
• $('div,p').css('color','orange')
memilih tag <div> atau <p> dan mengubah warna huruf menjadi orange
• $('a.strong').css('font‐size','20px')
memilih <a> yang memiliki atribut CLASS=‟strong‟ dan mengubah ukuran
huruf menjadi 20px
9.2.4 AJAX
Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik
pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya
adalah untuk memindahkan sebagian besar interaksi pada komputer pengguna,
melakukan pertukaran data dengan server di belakang layar, sehingga halaman web
tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna
melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan
usability. AJAX merupakan kombinasi dari:
• DOM (Document Object Model) yang diakses dengan client side scripting
language, seperti JavaScript, berguna untuk menampilkan secara dinamis dan
berinteraksi dengan informasi yang ditampilkan
• Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di
implementasikan pada beberapa browser. Objek ini berguna sebagai
kendaraan pertukaran data asinkronus dengan web server.
• XML (eXtensible Markup Language) umumnya digunakan sebagai dokumen
transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text.
116
Modul Praktikum Pemrograman Web 2 (PG066)
117
Modul Praktikum Pemrograman Web 2 (PG066)
118
Modul Praktikum Pemrograman Web 2 (PG066)
Jika diklik tulisan “klik donk” dan “klik lagi donk” akan muncul sebagai berikut
Jika diklik 2 kali (double click) tulisan “jangan diklik” akan muncul sebagai
berikut
119
Modul Praktikum Pemrograman Web 2 (PG066)
120
Modul Praktikum Pemrograman Web 2 (PG066)
3) Apa warna huruf dan warna background yang dihasilkan jika pada file view
ditambahkan baris berikut?
<a class=”big” id=”div1”>Test A</a>
121
Modul Praktikum Pemrograman Web 2 (PG066)
122
Modul Praktikum Pemrograman Web 2 (PG066)
123
Modul Praktikum Pemrograman Web 2 (PG066)
9.4 LATIHAN
1) Buatlah sebuah halaman web yang terdiri dari 6 tombol yang masing-masing
bertuliskan Background Merah, Background Kuning, Background Hijau, Text
Hitam, Text Putih, Text Biru.
Di dalam halaman terdapat text “Percobaan JQuery”.
Jika tombol diklik, ubah warna background atau warna text tersebut!
124
Modul Praktikum Pemrograman Web 2 (PG066)
125
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 10
CRUD DENGAN AJAX DAN JQUERY
Mahasiswa mengetahui cara membuat aplikasi untuk create read update delete
(CURD) sebuah table menggunakan AJAX dan Jquery
Tujuan Khusus
1. Mahasiswa mengetahui cara membuat aplikasi yang memiliki kemampuan
CRUD menggunakan AJAX dan JQuery
CRUD merupakan singkatan dari Create Read Update Delete. Sebuah aplikasi yang
memiliki kemampuan CRUD berarti aplikasi tersebut bisa menyimpan data, membaca
data, mengubah data dan menghapus data dari sebuah table.
2) Selanjutnya kita buat form untuk menginput data ke dalam table tersebut.
Ada 3 file yang diperlukan dalam aplikasi ini yaitu
• Controller datauser.php yang disimpan di application/controllers
• View datauser_view.php yang disimpan di application/views
126
Modul Praktikum Pemrograman Web 2 (PG066)
Pada bagian awal akan dimunculkan form untuk input data ke dalam table
user.
127
Modul Praktikum Pemrograman Web 2 (PG066)
128
Modul Praktikum Pemrograman Web 2 (PG066)
129
Modul Praktikum Pemrograman Web 2 (PG066)
3) Berikutnya adalah data yang ada di table akan ditampilkan pada bagian
bawah form. Data ini diambil dari database dengan konsep AJAX dengan
data JSON.
130
Modul Praktikum Pemrograman Web 2 (PG066)
131
Modul Praktikum Pemrograman Web 2 (PG066)
132
Modul Praktikum Pemrograman Web 2 (PG066)
4) Berikutnya akan dibuat fungsi untuk ubah data. Pada halaman di atas, saat
link “Ubah” diklik, data akan diambil dari database dengan konsep AJAX
kemudian ditampilkan datanya pada form inputan. Setelah itu data diubah
dan diklik tombol Save. Proses Save sudah dibuat sebelumnya di controller
133
Modul Praktikum Pemrograman Web 2 (PG066)
Jika tombol ubah diklik, username dan nama masuk ke form. Data bisa
diubah dengan mengklik tombol Save.
134
Modul Praktikum Pemrograman Web 2 (PG066)
5) Berikutnya akan dibuat fungsi untuk hapus data. Pada halaman di atas, saat
link “hapus” diklik, data akan dihapus dengan konsep AJAX
135
Modul Praktikum Pemrograman Web 2 (PG066)
136
Modul Praktikum Pemrograman Web 2 (PG066)
137
Modul Praktikum Pemrograman Web 2 (PG066)
138
Modul Praktikum Pemrograman Web 2 (PG066)
139
Modul Praktikum Pemrograman Web 2 (PG066)
10.4 LATIHAN
1) Buatlah aplikasi CRUD untuk table dosen yang memiliki struktur sebagai
berikut
Nama Field Tipe Data Keterangan
kddosen varchar(5) Primary Key
namadosen varchar(100)
alamat varchar(100)
email varchar(100)
notelp varchar(20)
140
Modul Praktikum Pemrograman Web 2 (PG066)
141
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 11
LAPORAN GRAFIK
Tujuan Khusus
1. Mahasiswa mengetahui cara membuat laporan grafik menggunakan library
yang sudah ada
Untuk membuat laporan terkadang digunakan bentuk grafik seperti grafik batang,
grafik garis maupun lingkaran. Ada beberapa library yang bisa digunakan untuk
membuat grafik, yaitu
Masing-masing library memiliki kekurangan dan kelebihan. Untuk praktikum ini kita
akan menggunakan library chartjs.
11.2.2 Chartjs
• Opensource
142
Modul Praktikum Pemrograman Web 2 (PG066)
• Dapat mendukung beberapa jenis chart yaitu line chart, bar chart, radar
chart, polar area chart, pie chart, bubble chart, scatter dan horizontal bar
• Ukurannya kecil dan ringan
• Berbasis HTML5 sehingga tidak memerlukan plugin tambahan di browser
• responsive
Kemudian buat object menggunakan class tersebut. Gunakan salah satu cara
berikut
143
Modul Praktikum Pemrograman Web 2 (PG066)
type:….,
data :….,
options :….,
});
Penjelasan
• type => berisi jenis grafik seperti apa yang akan buat. Isinya „bar‟, „pie‟,
atau „line‟
• data => berisi array untuk menampilkan data pada grafik.
o Labels => judul masing-masing grafik.
o datasets => menentukan data yang akan ditampilkan
▪ label => label grafik
▪ data => nilai masing-masing grafik
▪ backgroundColor => warna background untuk masing-
masing grafik. Isinya nilai rgb atau nama warna
▪ borderColor => warna border untuk masing-masing grafik.
Isinya nilai rbg atau nama warna
▪ borderWidth => ketebalan border grafik
144
Modul Praktikum Pemrograman Web 2 (PG066)
145
Modul Praktikum Pemrograman Web 2 (PG066)
146
Modul Praktikum Pemrograman Web 2 (PG066)
147
Modul Praktikum Pemrograman Web 2 (PG066)
3) Data yang ditampilkan pada chart bisa berasal dari database. Buatlah
sebuah table bernama polling dengan struktur sebagai berikut
Nama Field Tipe Data Keterangan
idpilihan int(3) Primary Key
pilihan varchar(100)
jumlahvote int(3)
bgcolor varchar(10)
Untuk membuat grafik hasil vote diperlukan file controller, model dan view.
Buat Controller bernama Chart2.php yang isinya sebagai berikut
148
Modul Praktikum Pemrograman Web 2 (PG066)
149
Modul Praktikum Pemrograman Web 2 (PG066)
150
Modul Praktikum Pemrograman Web 2 (PG066)
11.4 LATIHAN
1) Buatlah aplikasi CRUD untuk table barang yang memiliki struktur sebagai
berikut!
Nama Field Tipe Data Keterangan
kdbarang varchar(5) Primary Key
namabarang varchar(100)
merek varchar(100)
stok int(5)
harga int(5)
151
Modul Praktikum Pemrograman Web 2 (PG066)
152
Modul Praktikum Pemrograman Web 2 (PG066)
2) Dari soal di atas, tampilkan juga 5 barang dengan stok paling banyak
menggunakan grafik bar!
153
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 12
LAPORAN PDF
Tujuan Khusus
1. Mahasiswa mengetahui cara membuat laporan pdf menggunakan library yang
sudah ada
Laporan PDF diperlukan agar laporan dapat disimpan di harddrive komputer. laporan
dalam bentuk PDF memiliki keunggulan karena memiliki format standar, keamanan
terhadap perubahan data serta dukungan berbagai browser dan sistem operasi
dalam membuka file PDF. Ada beberapa library yang bisa digunakan untuk membuat
laporan PDF yaitu
• FPDF http://fpdf.org
• Mpdf http://mpdf.github.io
• Dompdf https://github.com/dompdf/dompdf
• Wkhtmltopdf https://github.com/wkhtmltopdf/wkhtmltopdf
• Tcpdf https://tcpdf.org/
library memiliki kekurangan dan kelebihan. Untuk praktikum ini kita akan
menggunakan library fpdf.
12.2.2 FPDF
154
Modul Praktikum Pemrograman Web 2 (PG066)
FPDF (http://fpdf.org) merupakan salah satu library PHP yang memungkinkan untuk
membuat / generate file PDF secara langsung dari PHP (on-the-fly) tanpa harus
menginstall atau mengaktifkan modul PHP tertentu (seperti PDFLib). dari nama FPDF
merupakan singkatan dari Free, jadi FPDF dapat didownload, digunakan dan
dikembangkan secara bebas. FPDF dapat didownload secara gratis di
http://fpdf.org/en/download.php beserta dokumentasi lengkapnya di
http://fpdf.org/en/doc/index.php. Tersedia juga dokumentasi dalam bahasa
Indonesia.
155
Modul Praktikum Pemrograman Web 2 (PG066)
156
Modul Praktikum Pemrograman Web 2 (PG066)
Penjelasan
157
Modul Praktikum Pemrograman Web 2 (PG066)
158
Modul Praktikum Pemrograman Web 2 (PG066)
Tabel Barang
Kdbarang namabarang merek stok harga
B0001 Mie instan indomie 100 2000
B0002 Air mineral aqua 50 1500
B0003 minyak goreng bimoli 10 23000
B0004 kecap abc 30 8500
Tabel Penjualan
idtransaksi tgltransaksi
1 2016-07-12
2 2016-07-13
3 2017-07-13
Tabel detilpenjualan
159
Modul Praktikum Pemrograman Web 2 (PG066)
160
Modul Praktikum Pemrograman Web 2 (PG066)
161
Modul Praktikum Pemrograman Web 2 (PG066)
162
Modul Praktikum Pemrograman Web 2 (PG066)
163
Modul Praktikum Pemrograman Web 2 (PG066)
12.4 LATIHAN
1) Buatlah program untuk mencetak data barang dalam bentuk PDF berdasarkan
table di atas
164
Modul Praktikum Pemrograman Web 2 (PG066)
2) Buatlah program untuk mencetak data barang yang belum pernah dipesan
dalam bentuk PDF!
165
Modul Praktikum Pemrograman Web 2 (PG066)
166
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 13
LAPORAN SPREADSHEET
Tujuan Khusus
1. Mahasiswa mengetahui cara membuat laporan Spreadsheet menggunakan
library yang sudah ada
Laporan bisa disajikan dalam bentuk spreadsheet/excel. Ada beberapa library yang
bisa digunakan untuk membuat laporan spreadsheet yaitu
• PHPExcel https://github.com/PHPOffice/PHPExcel
• PHPSpreadsheet https://github.com/PHPOffice/PhpSpreadsheet
PHPSpreadsheet merupakan versi terbaru dari PHPExcel. Untuk praktikum ini kita
akan menggunakan library PHPSpreadsheet.
13.2.2 PHPSpreadsheet
PHPSpreadsheet adalah library PHP yang berfungsi untuk mengelola file Spreadsheet
dengan PHP. Menurut dokumentasinya yang tersedia di
https://phpspreadsheet.readthedocs.io/ ada beberapa jenis file spreadsheet yang
bisa dibaca dan ditulis oleh PHPSpreadsheet yaitu
167
Modul Praktikum Pemrograman Web 2 (PG066)
Gnumeric ✓
HTML ✓ ✓
SYLK ✓
CSV ✓ ✓
168
Modul Praktikum Pemrograman Web 2 (PG066)
169
Modul Praktikum Pemrograman Web 2 (PG066)
170
Modul Praktikum Pemrograman Web 2 (PG066)
2) Instalasi PHPSpreadsheet
Ketikkan perintah berikut (Anda butuh koneksi ke internet ) lalu tekan Enter
171
Modul Praktikum Pemrograman Web 2 (PG066)
$config['composer_autoload'] = 'vendor/autoload.php';
172
Modul Praktikum Pemrograman Web 2 (PG066)
Penjelasan program
• Baris 1 dan 2 : pemanggilan class Spreadsheet dan Xlsx
• Baris 10 : membuat object bernama $spreadsheet yang berasal dari
class Spreadsheet()
• Baris 11 : menentukan sheet yang aktif
• Baris 12 : mengisi Cell A1 dengan kata “Hello World”
• Baris 13 : membuat file xlsx
• Baris 14 : menentukan nama file xlsx
• Baris 15 : menyimpan file xlsx ke documentroot project
173
Modul Praktikum Pemrograman Web 2 (PG066)
5) Modifikasi program di atas untuk membuat file xlsx yang isinya sebagai berikut
174
Modul Praktikum Pemrograman Web 2 (PG066)
175
Modul Praktikum Pemrograman Web 2 (PG066)
176
Modul Praktikum Pemrograman Web 2 (PG066)
177
Modul Praktikum Pemrograman Web 2 (PG066)
13.4 LATIHAN
1) Buatlah table bernama gaji dengan struktur table sebagai berikut
178
Modul Praktikum Pemrograman Web 2 (PG066)
179
Modul Praktikum Pemrograman Web 2 (PG066)
• Pada view di atas, jika dipilih bulan “Januari” dan Tahun “2016”,
kemudian diklik “Cetak Laporan Pegawai” akan menghasilkan file
excel dengan isi sebagai berikut
180
Modul Praktikum Pemrograman Web 2 (PG066)
header('Content-Type:application/vnd.openxmlformats-
officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="Laporan
Pegawai.xlsx"');
header('Cache-Control: max-age=0');
2) Buatlah laporan Excel untuk data dari tabel polling yang sudah dibuat pada
praktikum sebelumnya!
3) Buatlah laporan Excel untuk data penjualan yang sudah dibuat pada
praktikum sebelumnya!
181
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 14
APLIKASI PHP FRAMEWORK #1
Tujuan Khusus
1. Mahasiswa mempraktekkan cara membuat aplikasi penjualan berbasis
framework yang menggunakan beberapa library jquery, css dan PHP
182
Modul Praktikum Pemrograman Web 2 (PG066)
183
Modul Praktikum Pemrograman Web 2 (PG066)
a. Table kategori
Nama Field Tipe Data Keterangan
idkategori int(3) primary key, auto
increment
namakategori varchar(50)
b. Tabel user
Nama Field Tipe Data Keterangan
user varchar(50) primary key
nama varchar(50)
password varchar(100)
c. Table produk
Nama Field Tipe Data Keterangan
idproduk varchar(5) primary key
idkategori int(3) foreign key kategori
namaproduk varchar(100)
harga int(10)
184
Modul Praktikum Pemrograman Web 2 (PG066)
d. Table customer
Nama Field Tipe Data Keterangan
idcustomer varchar(5) primary key
namacustomer varchar(50)
alamat varchar(100)
nohp varchar(20)
email varchar(100)
e. Table penjualan
Nama Field Tipe Data Keterangan
idtransaksi int(3) primary key, auto
increment
tgltransaksi date
idcustomer varchar(5) foreign key customer
f. Tabel detilpenjualan
Nama Field Tipe Data Keterangan
iddetil int(3) primary key, auto
increment
idtransaksi int(3) foreign key transaksi
idproduk varchar(5) foreign key produk
jumlah int(3)
hargajual int(5) harga jual produk
4) Halaman login
a. File Controller login.php simpan di application/controllers
185
Modul Praktikum Pemrograman Web 2 (PG066)
186
Modul Praktikum Pemrograman Web 2 (PG066)
187
Modul Praktikum Pemrograman Web 2 (PG066)
188
Modul Praktikum Pemrograman Web 2 (PG066)
189
Modul Praktikum Pemrograman Web 2 (PG066)
190
Modul Praktikum Pemrograman Web 2 (PG066)
191
Modul Praktikum Pemrograman Web 2 (PG066)
192
Modul Praktikum Pemrograman Web 2 (PG066)
193
Modul Praktikum Pemrograman Web 2 (PG066)
7) Tambahkan tombol Print PDF dan Print Excel pada master user di atas untuk
mencetak file PDF dan Excel!
194
Modul Praktikum Pemrograman Web 2 (PG066)
14.4 LATIHAN
1) Buatlah program CRUD untuk halaman kategori produk, produk dan
customer.
195
Modul Praktikum Pemrograman Web 2 (PG066)
196
Modul Praktikum Pemrograman Web 2 (PG066)
PRAKTIKUM 15
APLIKASI PHP FRAMEWORK #2
Tujuan Khusus
1. Mahasiswa mempraktekkan cara membuat aplikasi penjualan berbasis
framework yang menggunakan beberapa library jquery, css dan PHP
197
Modul Praktikum Pemrograman Web 2 (PG066)
198
Modul Praktikum Pemrograman Web 2 (PG066)
Penjelasan
• Baria 6-10 : membuat variable untuk menampung nama table database
yang digunakan
• Baris 12-20 : untuk menginput data ke dalam table penjualan.
Kembalikan status penyimpanan (gagal atau sukses) ke controller
• Baris 21-28 : untuk menginput data ke dalam table detilpenjualan.
• Baris 29-41 : untuk mengambil data barang dari table produk dan join ke
table kategori. Kembalikan data ke controller
• Baris 42-40 : untuk mengambil data barang dari table customer.
Kembalikan data ke controller
199
Modul Praktikum Pemrograman Web 2 (PG066)
Penjelasan
• Baris 8 : memberikan variable dataheader yang akan digunakan pada
views template header.php
• Baris 11-12 : Memanggil function yang ada di controller ini
• Baris 17-19 : mengambil data customer dan disimpan ke dalam variable
$this->data[„listdatacust‟];
200
Modul Praktikum Pemrograman Web 2 (PG066)
201
Modul Praktikum Pemrograman Web 2 (PG066)
202
Modul Praktikum Pemrograman Web 2 (PG066)
203
Modul Praktikum Pemrograman Web 2 (PG066)
Penjelasan
• Baris 16-19 : digunakan untuk menampilkan semua data customer ke
dalam dropdown
• Baris 20 : tombol yang digunakan untuk memanggil fungsi popbarang().
Fungsi popbarang akan menampilkan semua data barang untuk dipilih
• Baris 28-35 : table HTML untuk menampung data barang yang sudah
dipilih
• Baris 41-44 : tombol untuk menyimpan, menghitung ulang dan mereset
form
• Baris 49-76 : table HTML untuk menampilkan data barang. Awalnya table
ini tidak muncul di layar, tapi akan menjadi modal jika tombol “Pilih
Barang” di klik
204
Modul Praktikum Pemrograman Web 2 (PG066)
• Baris 88-117 : fungsi javascript yang akan berfungsi saat modal pilih
barang muncul dan tombol “Pilih” diklik. Fungsi ini akan memanggil detail
nama barang untuk dimunculkan pada table HTML data barang yang
sudah dipesan.
• Baris 119-121 : fungsi javascript untuk menampilkan modal data barang
• Baris 122-128 :fungsi javascript yang berfungsi saat salah satu barang di
table HTML pesanan diklik
• Baris 129-136 : fungsi javascript untuk menghitung ulang nilai pesanan
jika ada data pada table HTML pesanan yang diklik Save
• Baris 137-147 : fungsi javacript untuk mengecek data sebelum disubmit
• Baris 148-162 : fungsi javacsript untuk menghitung ulang nilai pesanan
Berikut tampilan jika tombol “Pilih Barang” diklik kemudian diisi quantity barang
yang akan dipesan dan klik pilih
205
Modul Praktikum Pemrograman Web 2 (PG066)
Jika tanggal dan customer sudah diisi kemudian diklik Save, tampilannya seperti
ini
206
Modul Praktikum Pemrograman Web 2 (PG066)
6) Tambahkan tombol Print PDF dan Print Excel pada master user di atas untuk
mencetak file PDF dan Excel!
15.4 LATIHAN
1) Buatlah controller untuk laporan yang akan menampilkan data penjualan yang
terjadi selama 30 hari terakhir.
Data tersebut berisi no penjualan, nama customer dan total penjualan
207
Modul Praktikum Pemrograman Web 2 (PG066)
2) Buat tombol PDF dan XLS pada halaman laporan untuk menampilkan data
laporan dalam bentuk PDF dan XLS
208
Modul Praktikum Pemrograman Web 2 (PG066)
Note :
209
Modul Praktikum Pemrograman Web 2 (PG066)
Note :
- Nama dengan gelar merupakan gabungan dari gelardepan + namalengkap
+ gelarbelakang
- untuk jenis kelamin tampilkan wanita / pria (Gunakan if else)
- untuk tanggal lahir tampilkan dalam format DD/MM/YYYY
- untuk fakultas, tampilan nama fakultas lengkap (Gunakan if else)
210