training module "web application development with cms and bootstrap"

Jl. Gayungan PTT No.17-19, Gayungan,
Kota Surabaya, Jawa Timur 60234, Indonesia
Phone: (+62 31) 8280800, (+62 81) 139808009, (+62 81) 13278005
Email: info@ittelkom-sby.ac.id
MODUL PELATIHAN
PENGEMBANGAN APLIKASI WEB
DENGAN CMS DAN BOOTSTRAP
Tim Penyusun:
Dewi Rahmawati, S.Kom., M.Kom.
Ardian Yusuf Wicaksono, S.Kom., M.Kom.
Fidi Wincoko Putro, S.ST., M.Kom.
PENGABDIAN MASYARAKAT
PROGRAM STUDI REKAYASA PERANGKAT LUNAK
FAKULTAS TEKNOLOGI INFORMASI DAN INDUSTRI
INSTITUT TEKNOLOGI TELKOM SURABAYA
TAHUN 2018

Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
2
Kata Pengantar
Syukur Alhamdulillah Kami panjatkan kehadirat Allah SWT karena
Kami dapat menyelesaikan Modul Pelatihan Pengembangan Aplikasi Web
dengan CMS dan Bootstrap ini. Kami mengucapakan terima kasih kepada
semua pihak yang telah membantu dalam penyusunan modul ini.
Modul ini disusun untuk dipakai sebagai buku pegangan bagi Siswa
SMKN 1 Surabaya dalam pelatihan Pengembangan Aplikasi Web dengan
CMS dan Bootstrap. Buku ini terdiri dari dua Bab yaitu Bab 1 tentang
aplikasi web berbasis Content Management System (CMS) Wordpress dan
Bab 2 yang berisi tentang mempercantik aplikasi web berbasis PHP dan
bootstrap. Penulis berharap buku ini dapat bermanfaat bagi Siswa SMKN 1
Surabaya sehingga mampu mengaplikasikan buku ini dalam praktek sehari-
hari.
Penulis menyadari bahwa dalam modul ini masih terdapat beberapa
kekurangan dan Kami berterima kasih bila Pembaca bersedia memberikan
kritik dan saran bagi pengembangan modul di masa yang akan datang.
Surabaya, November 2018
Penyusun

3
Daftar Isi
KATA PENGANTAR............................................................................................................2
DAFTAR ISI .......................................................................................................................3
BAB 1 WORDPRESS...........................................................................................................4
A. SERVER DI LOCALHOST.....................................................................................................4
B. INSTALASI WORDPRESS DI LOCALHOST................................................................................9
1) Membuat Database..............................................................................................9
2) Menginstall.........................................................................................................10
C. INSTALASI TEMA...........................................................................................................13
D. UJI LATIHAN ...........................................................................................................15
BAB 2 MEMPERCANTIK APLIKASI WEB DENGAN BOOTSTRAP ........................................16
A. APLIKASI WEB .............................................................................................................16
B. TUJUAN DAN OUTPUT ...................................................................................................16
C. SERVER.......................................................................................................................17
D. DATABASE..............................................................................................................17
E. CRUD .......................................................................................................................18
1) Koneksi Database ...............................................................................................19
2) Create .................................................................................................................19
3) Read....................................................................................................................21
4) Update................................................................................................................23
5) Delete..................................................................................................................25
F. TEMPLATE...................................................................................................................25
1) Mengubah Create...............................................................................................26
2) Mengubah Read .................................................................................................28
3) Mengubah Update..............................................................................................30
4) Optimasi .............................................................................................................31
G. MENAMPILKAN DASHBOARD .....................................................................................36
REFERENSI......................................................................................................................39

4
BAB 1
Wordpress
A. Server di Localhost
Jika anda tidak punya hosting, anda dapat membangun wordpress di
localhost. Caranya anda harus mempunyai server web sendiri. Salah satu
server yang mudah digunakan adalah xampp.
Cara menginstal xampp:
1. Siapkan installer dari XAMPP. Installer XAMPP bisa diunduh dari
https://www.apachefriends.org/index.html, dimana anda bisa memilih
installer yang sesuai dengan system operasi anda. (Catatan: dalam
perkuliahan ini, installer XAMPP sudah disediakan di dalam file
pendukung).Pada kuliah ini, XAMPP yang digunakan adalah XAMPP
versi.
2. Copy installer xampp ke dalam direktori lokal anda.
3. Jalankan installer xampp
4. Jika User Account Control (UAC) sudah tidak aktif maka akan muncul
pesan seperti berikut. Jika UAC masih aktif, maka anda harus
mengubahnya. Jika muncul pesan seperti gambar berikut klik OK.
5. Muncul tampilan seperti berikut, klik Next.

5
6. Pada kotak dialog pemilihan direktori untuk instalasi, jika sudah sesuai
klik Next, jika belum sesuai klik Browse dulu dan pilih direktori yang
anda inginkan.
7. Muncul kotak dialog apakah apache, MySQL, dan Filezilla dijadikan
sebagai service seperti beriku, disini kita membiarkan poin-poin di
bawah service section tidak tercentang karena kalau mereka selalu
dijadikan sebagai service akan membebani komputer.
8. Klik Install.
9. Setelah itu proses instalasi akan berjalan seperti tampilan berikut ini:

6
10. Kalau sudah selesai, klik Finish, kemudian klik Yes.
Menggunakan xampp control panel
Setelah XAMPP berhasil diinstal, anda tidak bisa langsung
menggunakannya karena service Apache dan MySQLnya belum jalan.
Jadi, ketika anda ingin mengaktifkan XAMPP anda harus menjalankan
service Apache dan MySQL. Adapun cara untuk menjalankan service
Apache dan MySQL adalah sebagai berikut:
1. Jalankan XAMPP control panel, pada menu Start, cari Xampp control
panel

7
2. Pada tampilan berikut, klik Start pada Apache dan MySQL.
3. Sehingga hasilnya adalah seperti berikut:
4. Tanda xampp sudah siap digunakan, anda bisa membuka browser
kemudian memasukkan alamat http://localhost/, maka akan muncul
tampilan seperti berikut ini:

8
5. Anda juga bisa membuka phpMyAdmin dengan memasukkan alamat
berikut: http://localhost/phpmyadmin/. Sehingga hasilnya adalah
seperti ini:
Menjalankan file PHP di dengan server XAMPP
Setelah server xampp dipasang, biasanya di dalam directory C
komputer muncul folder “xampp”. Kemudian di dalam folder xampp terdapat
folder “htdocs”. Di dalam folder htdocs inilah semua file-file php anda harus
anda simpan dan kemudian dipanggil di dalam browser. Berikut adalah cara
untuk menjalankan file php di dengan server XAMPP:

9
1. Buat folder baru di dalam directori htdocs anda dan beri nama
“Latihan1”
2. Copykan file php “cobaxampp.php” dari file pendukung bab 1 ke
dalam folder tersebut.
3. Jalankan file php tersebut dengan membuka browser (internet
explorer, firefox, atau Chrome), kemudian ketikkan alamat
“http:localhostLatihan1”. Maka akan muncul file-file yang ada di
dalam folder Latihan 1.
4. Kemudian klik file php yang akan dijalankan, misal: cobaxampp.php.
Maka hasilnya adalah sebagai berikut:
Catatan: jika file php tersebut dibuka dengan menggunakan
dream weaver baris-baris program php sehingga bisa menghasilkan
tampilan seperti di atas. Penjelasan lebih detil tentang maksud dari
baris-baris program tersebut akan dibahas pada bab selanjutnya.
B. Instalasi Wordpress di Localhost
1) Membuat Database
Sebelum menginstalasi WordPress, anda harus menyiapkan
database dulu untuk menyimpan data-data. Adapun langkah-langkah untuk
membuat database adalah sebagai berikut:

10
1. Mulai dengan membuka web phpMyAdmin. Caranya: buka browser
(bisa Mozilla, internet explorer, dll), lalu ketikan alamat URL berikut
http://localhost/phpmyadmin/
2. Klik menu Databases, pada text field Create new database
masukkan nama database yang akan anda buat, misal: A1_NIM_db.
Kemudia klik Create.
2) Menginstall
WordPress yang akan dipakai pada mata kuliah ini adalah WordPress
4.5.3 (Versi WordPress yang terbaru saat modul ini dibuat). Jika nanti anda
memakai WordPress dengan versi yang berbeda, mungkin ada beberapa
menu yang berbeda. Langkah-langkahnya adalah sebagai berikut:
1. Buat folder di root web server (10.151.16.10) dan beri nama
kelas_nim_WordPress
(Contoh: A1_NIM_db)
2. Copy installer WordPress-4.5.3.zip ke dalam folder yang baru
dibuat. (Catatan: https://wordpress.org/download/ atau pada
kuliah ini installer sudah dishare di file pendukung mahasiswa)
3. Klik kanan file WordPress-4.5.3.zip, lalu pilih Extract here.
4. Tunggu proses ekstraksi selesai.
5. Setelah proses ekstraksi selesai, hapus file WordPress-4.5.3.zip

11
6. Akses installer WordPress anda, dengan buka browser dan
masukkan URL berupa folder tempat anda mengekstrak
WordPress (http://localhost/A1_NIM_Wordpress/wp-login.php).
7. Langkah selanjutnya untuk instalasi aplikasi.
Instalasi aplikasi
1. Buka browser, ketikkan alamat domain anda pada url, misal:
http://localhost/A1_NIM_Wordpress/wp-admin/install.php
2. Klik Let’s go
3. Masukkan data-data mengenai database anda sebagai berikut:
- Database Name : a1_nim_db (catatan: database yang baru anda
buat)
- Username: root
- Password: (kosong)
- Database Host: localhost
- Table prefix: ganti nama default “wp_” menjadi “ah_”.
Tabel prefix adalah awalan nama tabel wordpress anda di
database.
4. Jika data yang anda masukkan pada langkah sebelumnya benar,
maka akan muncul tampilan seperti berikut, kemudian klik Run the

12
install. Jika tampilan seperti berikut tidak muncul berarti informasi
tentang database yang anda masukkan pada tahap sebelumnya
masih ada yang salah.
5. Kemudian masukkan informasi-informasi sebagai berikut:
- Site title: IT Telkom Surabaya
- Username: admin
- Password: silahkan diisi dengan password anda sendiri (catat
password anda kalau takut lupa)
- Your email: masukkan email anda
- Centang pilihan search engine visibility
6. Klik Install Wordpress
7. Tanda proses instalasi berhasil adalah muncul tampilan seperti
berikut:

13
C. Instalasi Tema
Tema (themes) di dalam wordpress bermanfaat untuk menciptakan
desain dan fungsi dari situs wordpress yang menggunakan tema tersebut.
Dengan adanya tema, pemilik website wordpress dapat mengubah
tampilan website mereka secara langsung. Tema untuk wordpress yang
tersedia di internet ada yang bersifat responsive dan ada yang tidak. Tema
yang bersifat responsive artinya tema tersebut dapat menyesuikan
tampilannya terhadap berbagai device baik dekstop, hp, maupun tablet.
Tema ini banyak tersedia di internet. Ada yang berbayar dan ada yang tidak.
Anda bisa mencari tema yang sesuai dengan keinginan anda di internet.
Dalam buku ini, tema yang akan dipakai adalah “Panoramic” yang bisa
di download dari link berikut: https://wordpress.org/themes/panoramic/.
Adapun tampilan Panoramic adalah seperti berikut:
Adapun cara untuk menginstal tema adalah sebagai berikut:
1. Masuklah ke dashboard, jika belum anda harus login (Link login
Localhost: http://localhost/A1_NIM_Wordpress/wp-login.php).
2. Pada halaman dashboard klik Appearance → Themes.

14
3. Klik Add New
4. Klik Upload Themes, kemudian browse template yang anda
inginkan. Dalam hal ini template yang akan digunakan sudah dishare
di file pendukung dengan nama panoramic.1.0.62.zip.
5. Klik install Now.
6. Klik activate jika ingin mengaktifkannya.

15
7. Untuk melihat hasilnya klik Visit Site dipojok kiri atas, sehingga
hasilnya:
D. Uji Latihan
1. Cari 2 buah website institusi yang dibangun menggunakan
wordpress!
2. Cara tema wordpress yang support untuk website institusi!

16
BAB 2
Mempercantik Aplikasi Web dengan Bootstrap
A. Aplikasi Web
Aplikasi web merupakan sebuah aplikasi yang menggunakan
teknologi browser untuk menjalankan aplikasi dan diakses melalui
jaringan komputer (Remick, 2011). Sedangkan menurut (Rouse, 2011)
aplikasi web adalah sebuah program yang disimpan di server dan dikirim
melalui internet dan diakses melalui antarmuka browser.
Dari dua pendapat di atas maka dapat disimpulkan bahwa aplikasi
web adalah aplikasi yang diakses menggunakan web browser melalui
jaringan internet atau intranet. Aplikasi web dikodekan dalam bahasa
pemrograman yang mendukung perangkat lunak berbasis web seperti
HTML, Javascript, CSS, Ruby, Python, PHP, Java dan lain-lain.
Gambar 1. Arsitektur Aplikasi Web
B. Tujuan dan Output
Pada modul pelatihan ini akan dibahas langkah demi langkah
untuk membangun suatu aplikasi web sederhana dengan fungsi Create
(membuat), Read (Membaca data), Update (Mengubah Data), dan
Delete (Menghapus Data). Aplikasi akan dibangun dengan bahasa
pemrograman PHP dan menggunakan database MySQL. Kemudian

17
untuk mempercantik tampilan aplikasi web, kita akan menggunakan
Bootstrap. Sehingga hasil output akhirnya nanti akan tampak seperti
Gambar 2.
Gambar 2. Tampilan Output
C. Server
PHP merupakan bahasa pemrograman untuk aplikasi web yang
dijalankan di bagian Server, oleh karena itu kita perlu aplikasi server yang
akan menjalankan program PHP kita. Kali ini kita akan memakai paket
aplikasi XAMPP dimana di dalam di dalamnya ada aplikasi Apache yang
akan bertindak sebagai web server PHP. Instalasi Xampp bisa dilihati
pada BAB 1.
D. Database
Selain Apache sebagai web server, kita juga memerlukan server
database yang akan digunakan sebagai wadah penyimpanan data yang
kita masukkan ke aplikasi web. Aplikasi yang digunakan adalah MySQL.

18
Pada paket aplikasi XAMPP sudah meliputi Mysql server dan PHP
MyAdmin sebagai antarmuka sistem manajemennya, sehingga mudah
untuk mengoperasikan MySQL.
Setelah kita instalasi semua server yang diperlukan, maka kita
menjalankan aplikasi server tersebut (Apache dan MySQL). Langkah
selanjutnya adalah mempersiapkan data yang akan kita isikan di
database terlebih dahulu sebagai data awal. Pada pelatihan ini sudah
kita siapkan data awal dalam format file berekstensi sql yaitu file
pelatihan.sql.
Buka PHPMyAdmin melalui browser dan import file pelatihan.sql.
Gambar 3. Tampilan PHPMyAdmin
E. CRUD
CRUD adalah akronim untuk Create, Read, Update, dan Delete.
Operasi CRUD adalah manipulasi data dasar untuk database. Dalam
modul ini kita akan membuat aplikasi PHP sederhana untuk melakukan
semua operasi ini pada tabel database MySQL di satu tempat. Langkah-
langkah yang akan kita lakukan pada pembuatan CRUD ini adalah
Koneksi Database, Create, Read, Update dan Delete. Untuk lebih
lengkapnya mari kita ikuti langkahnya sebagai berikut:

19
1) Koneksi Database
File dbconfig.php menyimpan informasi tentang database, host,
username dan password. Sebagian besar server lokal bekerja dengan
detail yang diberikan. Anda dapat mengubahnya sesuai dengan detail
host dan database Anda. Untuk menghubungkan PHP dengan
MySQL, kita menggunakan fungsi mysqli_connect() dengan
parameter alamat, user database, password user, dan nama
database.
1. <?php
2. define("MYSQL_DB_HOST", "localhost");
3. define("MYSQL_DB_USER", "root");
4. define("MYSQL_DB_PASSWORD", "");
5. define("MYSQL_DB_DATABASE", "pelatihan");
6.
7. $conn = mysqli_connect(MYSQL_DB_HOST, MYSQL_DB_USER, MYSQL_D
B_PASSWORD, MYSQL_DB_DATABASE);
8. if (!$conn) {
9. die("Connection failed: " . mysqli_connect_error());
10. }
11. ?>
2) Create
File kontakbaru.php berfungsi untuk menambahkan kontak baru.
Formulir HTML digunakan untuk menerima masukan data kontak.
Setelah data kontak diserahkan, MySQL INSERT Query digunakan
untuk memasukkan data kontak ke dalam database.
1. <?php
2. // Membuka koneksi database menggunakan file config
3. require_once("dbconfig.php");
4.
5. // Cek form apakah telah tersubmit lalu isi data ke tabel
kontak

20
6. if(isset($_POST['submit'])) {
7. // Masukkan data ke tabel kontak
8. $result = mysqli_query($conn, "INSERT INTO
kontak(nama,email,hp)
VALUES('".$_POST['nama']."','".$_POST['email']."','".$_POST[
'hp']."')");
9.
10. // Tampilkan pesan berhasil menambahkan
11. echo "Sukses menambahkan kontak. <a
href='listkontak.php'>Lihat Kontak</a>";
12. }
13. ?>
14. <html>
15. <head>
16. <title>Tambah Kontak</title>
17. </head>
18.
19. <body>
20. <a href="listkontak.php">Kembali</a>
21. <form action="kontakbaru.php" method="post"
name="form1">
22. <table width="25%" border="0">
23. <tr>
24. <td>Nama</td>
25. <td><input type="text"
name="nama"></td>
26. </tr>
27. <tr>
28. <td>Email</td>
name="email"></td>
30. </tr>
31. <tr>
32. <td>HP</td>
name="hp"></td>
34. </tr>
35. <tr>

21
36. <td><input type="hidden"
name="submit" value="key"></td>
37. <td><input type="submit"
value="Tambah"></td>
38. </tr>
39. </table>
40. </form>
41. </body>
42. </html>
Gambar 4. Contoh tampilan halaman kontakbaru.php
3) Read
File listkontak.php merupakan file utama yang menyertakan file
konfigurasi untuk koneksi database. Kemudian menampilkan semua
daftar kontak menggunakan MySQL Select Query. Kontak yang akan
ditampilkan di dalam daftar perlu menambahkan terlebih dahulu
menggunakan tautan ‘Tambah Kontak’.
1. <?php
4.
5. // Ambil semua data kontak dari database
6. $result = mysqli_query($conn, "SELECT * FROM kontak");
7. ?>
8. <html>
9. <head>

22
10. <title>Kontak</title>
11. </head>
12.
13. <body>
14. <a href="kontakbaru.php">Tambah Kontak</a>
15. <table>
16. <tr>
17. <th>Nama</th>
18. <th>Email</th>
19. <th>HP</th>
20. <th>Aksi</th>
21. </tr>
22. <?php
23. while($kontak = mysqli_fetch_array($re
sult)) {
24. echo "<tr>";
25. echo "<td>".$kontak['nama']."<
/td>";
26. echo "<td>".$kontak['email']."
</td>";
27. echo "<td>".$kontak['hp']."</t
d>";
28. echo "<td><a
href='editkontak.php?id=$kontak[id]'>Ubah</a> | <a
href='deletekontak.php?id=$kontak[id]'>Hapus</a></td>";
29. echo "</tr>";
30. }
31. ?>
32. </table>
33. </body>
34. </html>

23
Gambar 5. Contoh tampilan halaman listkontak.php
4) Update
File editkontak.php digunakan untuk mengedit / update data
kontak. Anda dapat mengubah data kontak dan memperbaruinya. File
ini akan mengarahkan pengguna kembali ke homepage, setelah
update sukses.
1. <?php
4.
5. // Cek form update apakah telah tersubmit lalu ubah dan
redirect setelah selesai
6. if(isset($_POST['update']))
7. {
8. // update data kontak
9. $result = mysqli_query($conn, "UPDATE kontak SET
nama='".$_POST['nama']."',email='".$_POST['email']."',hp='".
$_POST['hp']."' WHERE id=".$_POST['id']);
10.
11. // redirect ke list
12. header("Location: listkontak.php");
13. }
14. ?>
15. <?php
16. // Tampilkan data sesuai id
17. $id = $_GET['id'];
18. $result = mysqli_query($conn, "SELECT * FROM kontak
WHERE id=$id");
19. $kontak = mysqli_fetch_array($result)

24
20. ?>
21. <html>
22. <head>
23. <title>Edit User Data</title>
24. </head>
25.
26. <body>
27. <a href="listkontak.php">Kembali</a>
28. <form method="post" action="editkontak.php">
29. <table border="0">
30. <tr>
31. <td>Nama</td>
name="nama" value=<?php echo $kontak['nama'];?>></td>
33. </tr>
34. <tr>
35. <td>Email</td>
name="email" value=<?php echo $kontak['email'];?>></td>
37. </tr>
38. <tr>
39. <td>HP</td>
name="hp" value=<?php echo $kontak['hp'];?>></td>
41. </tr>
42. <tr>
43. <td><input type="hidden"
name="id" value=<?php echo $_GET['id'];?>></td>
44. <td><input type="submit"
name="update" value="Ubah"></td>
45. </tr>
46. </table>
47. </form>
48. </body>
49. </html>

25
Gambar 6. Contoh tampilan halaman editkontak.php
5) Delete
File deletekontak.php hanya dipanggil saat kita klik link 'Hapus'
untuk kontak manapun yang dipilih.
1. <?php
4.
5. // Hapus data sesuai id
6. $id = $_GET['id'];
7. $result = mysqli_query($conn, "DELETE FROM kontak WHERE
id=$id");
8.
9. // redirect ke list
10. header("Location: listkontak.php");
11. ?>
F. Template
Untuk mempercantik tampilan aplikasi web kita, pada pelatihan
kali ini akan menggunakan template (cetakan). Template yang akan kita
gunakan adalah AdminLTE. Template AdminLTE dibangun di atas

26
Bootstrap 3, AdminLTE menyediakan berbagai komponen yang
responsif, dapat digunakan kembali, dan umum digunakan. Dengan
menambahkan tema AdminLTE pada file halaman yang kita buat,
nantinya akan membuat tampilan aplikasi web jadi lebih menarik serta
lebih responsif.
1) Mengubah Create
Dengan menambahkan class dan id yang sesuai dengan tema
AdminLTE pada file kontakbaru.php, akan didapatkan tampilan input
yang jauh lebih baik daripada hanya menggunakan HTML saja.
1. ...
2. <form
action="kontakbaru2.php" method="post" class="form-
horizontal">
3. <div class="box-body">
4. <div class="form-group">
5. <label for="inputNama" class="col-sm-2
control-label">Nama</label>
6.
7. <div class="col-sm-10">
8. <input type="text" class="form-
control" id="inputNama" name="nama" placeholder="Nama">
9. </div>
10. </div>
12. <label for="inputEmail" class="col-
sm-2 control-label">Email</label>
13.
15. <input type="email" class="form-
control" id="inputEmail" name="email" placeholder="Email">
16. </div>
17. </div>

27
19. <label for="inputHP" class="col-sm-2
control-label">HP</label>
20.
control" id="inputHP" name="hp" placeholder="081XXXXXXX">
23. </div>
24. </div>
25. </div>
26. 
27. <div class="box-footer">
28. <input
type="hidden" name="submit" value="key">
29. <button type="submit" class="btn btn-
info pull-right">Tambah</button>
30. </div>
31. 
32. </form>
33. ...
Gambar 7. Tampilan baru kontakbaru.php

28
2) Mengubah Read
AdminLTE pada file listkontak.php, akan didapatkan tampilan tabel
1. ...
2.
3. <table id="tabel2" class="table table-bordered
table-striped">
4. <thead>
5. <tr>
6. <th>Nama</th>
7. <th>Email</th>
8. <th>HP</th>
9. <th>Aksi</th>
10. </tr>
11. </thead>
12. <tbody>
13. <?php
14. while($kontak = mysqli
_fetch_array($result)) {
15. echo "<tr>";
16. echo "<td>".$k
ontak['nama']."</td>";
17. echo "<td>".$k
ontak['email']."</td>";
18. echo "<td>".$k
ontak['hp']."</td>";
19. echo "<td><button
type="submit" class="btn btn-block btn-
warning" onclick="window.location.assign('editkontak2.php?
id=".$kontak["id"]."');">Ubah</button><button
danger" onclick="window.location.assign('deletekontak2.php
?id=".$kontak["id"]."');">Hapus</button></td>";
20. echo "</tr>";

29
21. }
22. ?>
23. </tbody>
24. <tfoot>
25. <tr>
26. <th>Nama</th>
27. <th>Email</th>
28. <th>HP</th>
29. <th>Aksi</th>
30. </tr>
31. </tfoot>
32. </table>
33. ...
Gambar 8. Tampilan baru listkontak.php

30
3) Mengubah Update
AdminLTE pada file editkontak.php, akan didapatkan tampilan input
1. ...
2. <form action="editkontak2.php" method="post"
class="form-horizontal">
3. <div class="box-body">
5. <label for="inputNama" class="col-sm-2
control-label">Nama</label>
6.
8. <input type="text" class="form-control"
id="inputNama" name="nama" placeholder="Nama"
value=<?php echo $kontak['nama'];?>>
9. </div>
10. </div>
12. <label for="inputEmail" class="col-
sm-2 control-label">Email</label>
13.
15. <input type="email" class="form-
control" id="inputEmail" name="email" placeholder="Email"
value=<?php echo $kontak['email'];?>>
16. </div>
17. </div>
19. <label for="inputHP" class="col-sm-2
control-label">HP</label>
20.
control" id="inputHP" name="hp" placeholder="081XXXXXXX"
value=<?php echo $kontak['hp'];?>>

31
23. </div>
24. </div>
25. </div>
26. 
27. <div class="box-footer">
28. <input type="hidden"
name="update" value="key">
29. <input type="hidden"
name="id" value=<?php echo $_GET['id'];?>>
30. <button type="submit" class="btn btn-
info pull-right">Ubah</button>
31. </div>
32. 
33. </form>
34. ...
Gambar 9. Tampilan baru editkontak.php
4) Optimasi
Dengan menggunakan cara sebelumnya, semua data akan
dimasukkan ke dalam halaman ketika sedang melihat halaman
tersebut. Cara ini cukup memberatkan browser karena harus
mengambil data yang lebih banyak apabila data yang akan

32
ditampilkan sangatlah banyak. DataTables pada bootstrap dapat
mengatasi hal ini dengan mengambil dan menampilkan hanya
beberapa data saja ketika membuka halaman. Dengan menambahkan
file datalistkontak.php yang nanti akan memberi data kepada
DataTables dalam bentuk format json. Maka membuka data yang
banyak akan selalu lebih ringan karena data yang ditampilkan saja
yang diambil dari database.
Perubahan pada file listkontak.php. Pada hasilnya nanti tampilan
di browser muncul sama seperti sebelumnya namun dengan
kecepatan memuat yang lebih cepat.
1. ...
2. <table id="tabel3" class="table table-bordered table-
striped">
3. <thead>
4. <tr>
5. <th>Nama</th>
6. <th>Email</th>
7. <th>HP</th>
8. <th>Aksi</th>
9. </tr>
10. </thead>
11. <tfoot>
12. <tr>
13. <th>Nama</th>
14. <th>Email</th>
15. <th>HP</th>
16. <th>Aksi</th>
17. </tr>
18. </tfoot>
19. </table>
20. <script>
21. $(function () {
22. $(document).ready(function() {

33
23. var dataTable = $('#tabel3').DataTable
( {
24. "processing": true,
25. "serverSide": true,
26. "order": [[ 2, "asc" ]],
27. "ajax":{
28. url :"datalistkontak.p
hp", // json datasource
29. type: "post", //
method , by default get
30. error: function(){ //
error handling
31. $(".record-
grid-error").html("");
32. $("#tabel3").a
ppend('<tbody class="record-grid-error"><tr><th
colspan="4">Data tidak ditemukan</th></tr></tbody>');
33. $("#record-
grid_processing").css("display","none");
34. }
35. }
36. } );
37. } );
38. })
39. </script>
40. ...
Isi pada file datalistkontak.php sebagai sumber data dari
datalistkontak.php
1. <?php
4.
5. // storing request (ie, get/post) global array to a
variable
6. $requestData= $_REQUEST;
7.

34
8. $columns = array(
9. // datatable column index => database column name
10. 0 => 'nama',
11. 1 => 'email',
12. 2 => 'hp',
13. 3 => 'id',
14. );
15.
16. // getting total number records without any search
17. $sql = "select count(id) from kontak";
18. $query = mysqli_query($conn, $sql) or trigger_error(my
sqli_error($conn));
19. $row = mysqli_fetch_array($query);
20. $totalData = $row[0];
21. $totalFiltered = $totalData; // when there is no
search parameter then total number rows = total number
filtered rows.
22.
23. if( !empty($requestData['search']['value']) ) {
24. // if there is a search parameter
25. $sql = "SELECT *from kontak";
26. $sql.=" where nama LIKE
'%".$requestData['search']['value']."%' "; //
$requestData['search']['value'] contains search parameter
27. $sql.=" or email LIKE
28. $sql.=" or hp LIKE
29. $query=mysqli_query($conn, $sql) or trigger_er
ror(mysqli_error($conn));
30. $totalFiltered = mysqli_num_rows($query); //
when there is a search parameter then we have to modify total
number filtered rows as per search result without limit in
the query
31.

35
32. $sql.=" ORDER BY
". $columns[$requestData['order'][0]['column']]." ".$reque
stData['order'][0]['dir']." LIMIT
".$requestData['start']."
,".$requestData['length']." "; //
$requestData['order'][0]['column'] contains colmun index,
$requestData['order'][0]['dir'] contains order such as
asc/desc , $requestData['start'] contains start row number
,$requestData['length'] contains limit length.
ror(mysqli_error($conn)); // again run query with limit
34. } else {
35. $sql = "SELECT *from kontak";
36. $sql.=" ORDER BY
". $columns[$requestData['order'][0]['column']]." ".$reque
stData['order'][0]['dir']." LIMIT
".$requestData['start']." ,".$requestData['length']." ";
ror(mysqli_error($conn));
38. }
39.
40. $data = array();
41. while( $row=mysqli_fetch_array($query) ) { //
preparing an array
42. $nestedData=array();
43. $nestedData[] = $row["nama"];
44. $nestedData[] = $row["email"];
45. $nestedData[] = $row["hp"];
46. $nestedData[] = "<button
warning" onclick="window.location.assign('editkontak3.php?
id=".$row["id"]."');">Ubah</button><button
danger" onclick="window.location.assign('deletekontak3.php
?id=".$row["id"]."');">Hapus</button>";
47. $data[] = $nestedData;
48. }
49.

36
50. $json_data = array(
51. "draw" => intval( $
requestData['draw'] ), // for every request/draw by
clientside , they send a number as a parameter, when they
recieve a response/data they first check the draw number, so
we are sending same number in draw.
52. "recordsTotal" => intval( $
totalData ), // total number of records
53. "recordsFiltered" => intval( $
totalFiltered ), // total number of records after searching,
if there is no searching then totalFiltered = totalData
54. "data" => $data //
total data array
55. );
56.
57. echo json_encode($json_data); // send data as json
format
58. ?>
G. Menampilkan Dashboard
Pada tema AdminLTE memiliki banyak template desain
dashboard yang banyak. Salah satunya kita dapat menampilkan
berapa banyak kontak yang ada pada database kita. Bisa kita
tampilkan dengan kode berikut ini.
1. <?php
4.
5. // Ambil semua data kontak dari database
6. $result = mysqli_query($conn, "select count(id) from
kontak");
7. $row = mysqli_fetch_array($result);
8. $jumlah = $row[0];
9. ?>

37
10.
11. ...
12. <div class="col-lg-4 col-xs-6">
13. 
14. <div class="small-box bg-red">
15. <div class="inner">
16. <h3><?php echo $jumlah; ?></h3>
17.
18. <p>Kontak Simple</p>
19. </div>
20. <div class="icon">
21. <i class="ion ion-person-add"></i>
22. </div>
23. <a href="listkontak1.php" class="small-box-
footer">Lihat Kontak <i class="fa fa-arrow-circle-
right"></i></a>
24. </div>
25. </div>
27. 
28. <div class="small-box bg-yellow">
31.
32. <p>Kontak +Tema</p>
33. </div>
36. </div>
right"></i></a>
38. </div>
39. </div>
41. 
42. <div class="small-box bg-green">

38
45.
46. <p>Kontak +Tema+DataTable</p>
47. </div>
50. </div>
right"></i></a>
52. </div>
53. </div>
54. ...
Hasilnya akan menjadi seperti Gambar 10.
Gambar 10. Tampilan Dashboard

39
Referensi
1. XAMPP: https://www.apachefriends.org/index.html,
2. PHP: https://php.net
3. Bootstrap: https://getbootstrap.com
4. AdminLTE: https://adminlte.io

training module "web application development with cms and bootstrap"

More Related Content

What's hot

Similar to training module "web application development with cms and bootstrap"

training module "web application development with cms and bootstrap"