Modul Pendidikan Vokasi Kelas Xi

1
SEKOLAH PRESTASI PRIMA

KATA PENGANTAR
Puji syukur kami panjatkan ke hadirat Tuhan Yang Maha Esa atas berkat dan rahmat-
Nya, sehingga buku “Pendidikan Vokasi” dapat kami rilis untuk menjadi panduan
belajar bagi pembaca yang ingin mengembangkan keterampilan pemrograman
meliputi konsep-konsep dasar serta teknik-teknik yang diperlukan dalam
pengembangan aplikasi web.
Pemrograman web telah menjadi salah satu bidang yang berkembang pesat dalam
dunia teknologi informasi. Semakin banyak organisasi dan individu yang
bergantung pada aplikasi web untuk berbagai keperluan, mulai dari e-commerce
hingga media sosial. Dalam modul ini, akan membahas berbagai aspek penting yang
terkait dengan pemrograman web modern.
Dalam penulisan buku ini, akan memulai membahas topik-topik lanjutan seperti
bahasa pemrograman server-side, Implementasi framework pada pembuatan web
statis dan dinamis, pembuatan web statis dan dinamis untuk beragam kebutuhan
yang kontekstua terakhir akan membahas Dokumentasi dan presensi web statis dan
dinamis yang telah dikembangkan. Dalam buku ini Anda akan mendapatkan
pemahaman yang mendalam tentang bagaimana membangun aplikasi web yang
handal, efisien, dan aman.
Akhir kata, kmai mengucapkan Terima kasih kepada semua pihak yang telah
memberikan dukungan dan bantuan dalam penulisan buku ini. Semoga buku ini
dapat bermanfaat bagi pembaca dan membantu meningkatkan keterampilan
pemrograman web.
Selamat belajar, dan semoga sukses!
Penulis
2
DAFTAR ISI
KATA PENGANTAR .......................................................................................................................... 2
DAFTAR ISI........................................................................................................................................... 3
BAB 1........................................................................................................................................................ 6
BAHASA PEMROGRAMAN SERVER-SIDE ............................................................................. 6
A. DEFINISI PEMROGRMAN SERVER-SIDE ............................................................................ 6
B. PHP for Web Development ............................................................................................................... 8
C. KEUNGGULAN PHP ........................................................................................................................ 8
D. SERVER SIDE SCRIPTING ........................................................................................................... 9
E. CARA KERJA SERVER SIDE..................................................................................................... 11
ASEMEN SUMATIF 1 ................................................................................................................................... 13
BAB 2...................................................................................................................................................... 16
IMPLEMENTASI FRAMEWORK PADA PEMBUATAN WEB STATIS DAN

DINAMIS .............................................................................................................................................. 16
A. Web Statis dan Dinamis .................................................................................................................. 16
B. Framework ......................................................................................................................................... 16
C. Implementasi Framework pada pembuatan WEB Statis Dan Dinamis ............................ 19
D. Menampilkan Data dari Database MySQL Menggunakan PHP ........................................ 30
ASESMEN SUMATIF 2 ................................................................................................................................. 41
BAB 3...................................................................................................................................................... 43
PEMBUATAN WEB STATIS DAN DINAMIS UNTUK BERAGAM KEBUTUHAN

YANG KONTEKSTUAL .................................................................................................................. 43
A. Pengertian dan Konsep ................................................................................................................... 43
B. DATABASE ....................................................................................................................................... 45
3
C. STRUKTUR FOLDER DAN FILE ............................................................................................. 50
D. HALAMAN UTAMA ....................................................................................................................... 53
E. KONEKSI DATABASE ................................................................................................................. 59
F. HALAMAN BERANDA ............................................................................................................... 61
G. HALAMAN DATA PELANGGAN ............................................................................................. 66
H. HALAMAN DATA PULSA ........................................................................................................... 76
I. HALAMAN DATA PENJUALAN ............................................................................................... 87
ASESMEN SUMATIF III ........................................................................................................................... 101
BAB 4................................................................................................................................................... 104
DOKUMENTASI DAN PRESENSI WEB STATIS DAN DINAMIS YANG TELAH

DIKEMBANGKAN ......................................................................................................................... 104
A. HALAMAN LAPORAN PENJUALAN ................................................................................... 104
ASESMEN SUMATIF ................................................................................................................................. 111
DAFTAR PUSTAKA ...................................................................................................................... 112
4
5
BAB 1
BAHASA PEMROGRAMAN SERVER-SIDE
A. DEFINISI PEMROGRMAN SERVER-SIDE

PHP, atau nama panjangnya PHP: Hypertext Preprocessor adalah bahasa pemrograman
yang dapat dijalankan di server (server side programming) yang artinya PHP membutuhkan
sebuah server untuk dapat diproses. PHP bersifat open source. Dokumentasi lengkap dari
PHP dapat dilihat pada https://www.php.net/.
PHP biasanya digunakan untuk membuat logical side dari sisi backend web development.
Selain itu PHP juga dapat dimanfaatkan untuk membuat GUI Apps dengan menggunakan
PHP-GTK. Lebih jauh lagi, PHP juga saat ini dimanfaatkan untuk pengolahan algoritma
machine learning. Hingga saat ini PHP masih menjadi bahasa pemrograman server-side
yang paling popular dibanding yang lainnya (w3techs.com).
6
SEJARAH PHP
PHP pertama kali diprakarsai oleh Rasmus Lerdorf pada tahun 1994 dengan nama awal
Personal Home Page. PHP mengalami banyak perubahan pada masa itu, mulai dari
fungsinya yang mulanya hanya sekedar digunakan sebagai interpreter / penghubung antara
form dengan database hingga saat ini sudah menjadi bagian yang tak terpisahkan dari dunia
server-side scripting.
• 1994. PHP / FI
Personal home page / form interpreter. Penggunaan pribadi.
• 1995. PHP Tools V.1

Mulai dipublikasikan dan dapat digunakan untuk umum
• 1997. PHP Tools V.2

Pengembangan pertama dari PHP Tools
• 1998. PHP 3
Dibantu oleh Zeev Suraski dan Andi Gutmans. Mereka membuat PHP parser sebagai
penerjemah script PHP. Bahasa PHP juga mulai berubah arti menjadi PHP: Hypertext
Preprocessor
• 2000. PHP 4
Rilis Zend Engine sebagai nama komersial dari parser PHP
• 2004. PHP 5
Merupakan major update dari PHP 4 dengan menggunakan Zend Engine 2. Pada PHP 5
sudah dapat dilakukan Object Oriented Programming (abstract, inheritance,
7
polymorphism). Konsep PHP Data Object (PDO) juga dikenalkan untuk mempermudah
perubahan koneksi antara aplikasi dengan database.
• 2008. GoPHP5 dan PHP 6 tidak rilis

Layanan PHP 4 berhenti dikembangkan karena teknologi dari PHP 5 yang jauh lebih
mutakhir sehingga dirasa lebih “worth” untuk dikelola daripada PHP 4. PHP 6 juga tidak
dikembangkan karena hal yang sama. Update yang ingin dikembangkan di PHP 6 (unicode)
dirasa masih belum penting untuk dilakukan sehingga ditunda dan akhirnya diabaikan.
• 2014. PHP 7
Penggunaan Zend Engine 3 yang digadang-gadang lebih secure dan lebih handal dibanding
Zend Engine 2.
• 2020. PHP 8
Versi paling mutakhir dari PHP. PHP 8 adalah pembaruan dari PHP 7.4 yang akan berhenti
active supportnya pada November 2021. Berbeda dengan PHP 7.4 yang hanya minor
update, PHP 8 adalah sebuah major update dari bahasa pemrograman PHP.
B. PHP for Web Development

• PHP dapat generate dynamic page content
• PHP dapat digunakan untuk create, open, read, write, delete dan close file di server
• PHP dapat dmenerima dan mengolah data dari form
• PHP dapat mengirim dan membaca cookies
• PHP dapat digunakan untuk add delete modify data di dalam DBMS
• PHP dapat digunakan untuk mengontrol user-access
• PHP dapat digunakan untuk enkripsi data.
C. KEUNGGULAN PHP
• PHP dapat dijalankan pada beragam OS Platforms (Windows, UNIX, Linux, Mac,
dll)
• PHP kompatibel dengan semua web server (Apache, IIS, Nginx, dll)
• PHP mendukung banyak database (MySQL, Oracle, PGSQL, dll)
8
• PHP 100% free yang dapat diunduh di dalam https://www.php.net/ atau dengan
versi bundled khusus untuk web dev (XAMPP, LAMPP, WAMP, MAMP, Laragon,
dll).
• PHP diterapkan pada beberapa Conten Management System besar (Joomla,
Wordpress)
• PHP memiliki banyak framework untuk memudahkan pengembangan website
(Laravel, CodeIgniter, YII)
• PHP relatif mudah dipelajari dan efisien untuk dijalankan di server.
• PHP memiliki komunitas besar dan aktif.
• PHP memiliki dokumentasi lengkap, jelas dan terstruktur; buka
https://www.php.net/manual/en
D. SERVER SIDE SCRIPTING
Server-side scripting merupakan bahasa pemrograman web yang pengolahannya dilakukan

dalam server, maksudnya ialah web server yang sudah telah terintegrasi oleh web engine.
Server side Script biasanya hanya ada pada web dinamis saja. Web bersifat Dinamis yaitu
bisa dirubah kontennya dengan mudah tanpa mengotak-ngatik scriptnya.
Disini peran web engine ialah memproses semua script yang ada termasuk kategori client
side scripting. Web engine biasanya harus diinstal dalam komputer terlebih dahulu dari
bagian terpisah web server. Contoh dari server side scripting ialah:
• PHP : Hypertext preprocessor (PHP),

• Active server pages (ASP),
• Java sever pages (JSP).
• ColdFusion
• Lasso
• SSI
9
PERBEDAAN SERVER SIDE SCRIPTING DAN CLIENT SIDE SCRIPTING
• Perbedaan
SERVER SIDE SCRIPTING CLIENT SIDE SCRIPTING
Mekanisme pemanggilan program dan Skrip dieksekusi di browser
pengambilan output program dilakukan oleh
web server (CGI)
Tidak tergantung pada browser Tergantung browser
Dapat melihat, menulis, dan mengedit semua Hak akses dibatasi untuk mengakses suatu
jenis file script yang ada didalam server web
Hak akses tidak dibatasi dan dapat Kode program didownload bersama dengan
mengakses seluruh halaman web halaman web
Ada client yang meminta request Bersifat interpreter dan diterjemahkan oleh
browser
Eksekusi program dilakukan di server Model eksekusinya simple dan skrip dapat
dijadikan satu dengan HTML
• Kelebihan
Cross platform : tidak tergantung dengan Waktu eksekusi relative lebih cepat dari
browser tertentu script sisi server (Eksekusi script lebih
cepat)
Optimasi dan pemeliharaan dilakukan di Dalam hal tertentu kita lebih memerlukan
browser client side daripada server side misalnya
untuk menu, control elemen halaman web
dan validasi form
10
Dapat mengakses database dan tidak Tidak perlu server khusus untuk
tergantung dengan keamanan menjalankannya
Menambah kekuatan server Tidak membebani kinerja web server
Kode / data program aman
• Kelemahan
Proses transfer data lebih lama karena hanya Keamanan kurang terjamin karena script
hasil eksekusi server yang dikirim ke client. bisa
Tetapi untuk saat ini kekurangan tersebut dibaca dan dilihat oleh orang lain sehingga
bisa diatasi dengan adanya peningkatan script bisa di copy-paste dan diubah oleh
performa computer dan komunikasi jaringan orang lain (Dari segi keamanan kurang
yang lebih baik dapat
diandalkan).
Memerlukan server khusus Harus di support oleh browser dari pihak
client
Menambah beban kerja server Script dapat ditiru
Agak lambat jika dibandingkan dengan
Client-Side-Scripting karena script di
terjemahkan di server
E. CARA KERJA SERVER SIDE

F. Arsitektur dari server side sering disebut juga denga backend. Jika kita melakukan interaksi
dengan halaman web maka browser akan mengirimkan perintah ke server, kemudian server
akan merespon dan melakukan perintah yang diberikan. Pada tahap ini script server-side
akan mengirimkan kembali data/ perintah dari browser, dan browser akan menampilkan
data/ perintah tersebut. Sehingga secara garis besar berikut karakteristik server side
programming:
1. Ada client yang meminta request
2. Eksekusi program dilakukan di server
3. Mengirimkan hasil ke client
11
A. PRAKTIKUM : Persiapan Environment
a. Perangkat yang diperlukan
i. Web server
ii. PHP Kernel
iii. DBMS
iv. Obviously komputer / laptop
b. Option
i. Install semua perangkat yang diperlukan secara independent
1. Apache : http://httpd.apache.org/download.cgi
2. PHP : http://php.net/downloads.php
3. MySQL : https://dev.mysql.com/downloads
ii. Install semua dalam bentuk all-in-one packet bundle
1. XAMPP
2. WAMP
3. MAMP
12
4. LAMP
c. Text Editor
i. Sublime
ii. Notepad++
iii. Atom
iv. Visual Studio Code
v. Netbeans
1. Silakan cermati dan ikuti tutorial instalasi dan setup PHP di localhost via
https://www.youtube.com/watch?v=8qFWoSOAki4
2. Silakan cari dan install text editor yang sesuai dengan bahasa pemrograman PHP beserta
add-on yang (barangkali) diperlukan
B. REFERENSI
• https://www.php.net/
• https://www.w3schools.com/php/
• https://www.infanthree.com/2020/perbedaan-client-side-dan-server-side-web-
programming/
• https://github.com/topics/php
ASEMEN SUMATIF 1
A. PILIHAN BERGANDA
1. Bahasa pemrograman server-side umumnya digunakan untuk:
A. Membuat tampilan antarmuka pengguna
B. Mengelola database
C. Menjalankan kode di sisi klien
D. Menyimpan file di server
E. Mengelola server oleh pengguna
2. Mana yang merupakan bahasa pemrograman server-side?

A. HTML
B. CSS
C. JavaScript
D. PHP
E. C++
13
3. Mana yang bukan merupakan bahasa pemrograman server-side?
A. Python
B. Ruby
C. Java
D. JavaScript
E. HTML
4. Bahasa pemrograman server-side yang sering digunakan dalam pengembangan web

adalah:
A. C++
B. Python
C. Ruby
D. Pascal
E. HTML
5. Pernyataan yang benar tentang PHP sebagai bahasa pemrograman server-side adalah:
A. PHP merupakan singkatan dari Personal Home Page
B. PHP biasanya dieksekusi di sisi klien
C. PHP dapat mengakses dan mengelola database
D. PHP hanya dapat digunakan untuk pengembangan web statis
E. PHP merupakan bahasa pemrograman web dinamis
14
15
BAB 2
IMPLEMENTASI FRAMEWORK PADA PEMBUATAN WEB
STATIS DAN DINAMIS
A. Web Statis dan Dinamis

Web statis adalah sebuah kumpulan item seperti teks, gambar atau foto, dan elemen
multimedia lainnya yang terdiri dari konten marked-up yang dibuat dengan Hyper Text Markup
Language (HTML) dalam server website tersebut. Disebut statis, karena konten dalam web ini
tidak berubah-ubah kecuali diubah secara manual dengan HTML. Berikut ciri-ciri web statis.
• Hanya menggunakan HTML dan bisa dikolaborasikan dengan CSS

• Tidak memiliki database
• Kontennya hanya diberikan pada pemilik web
• Jarang terupdate
Contoh Website Statis : Website Profil Perusahaan (Hanya menampilkan Info Kontak, Profil, Produk,
Galery, yang semua itu sudah fix dan hanya diupdate jika ada perubahan profil perusahaan tersebut)/
Portopolio.
Sedangkan website dinamis adalah jenis web yang disusun dengan konten dan layout yang
dilengkapi dengan informasi di dalamnya. Sesuai namanya, konten dalam website ini dapat
berubah-ubah karena terdapat program yang berfungsi untuk mengatur perubahan data yang
ditampilkan dalam website tersebut. Berikut ciri-ciri web dinamis.
• Menggunakan bahasa pemrograman web (HTML, CSS dan JavaScript)

• Memiliki database
• Konten di dalamnya bisa berasal dari pengunjung dan juga dari admin web.
• Sering di-update
Contoh Website Dinamis : Website media social,Web Penjualan Pulsa, Website toko online,
Website berita, Website forum, Dan lainnya
B. Framework
Framework adalah sebuah kerangka kerja yang digunakan untuk mengembangkan website.
Framework ini diciptakan untuk membantu web developer dalam menulis baris kode. Dengan
menggunakan framework penulisan kode akan jauh lebih mudah, cepat, dan terstruktur rapi.
16
Fungsi Framework
Framework memiliki fungsi utama untuk memudahkan web developer dalam membuat
sebuah website. Selain itu, framework juga memiliki fungsi lain. Berikut di antaranya:
Membuat kode program menjadi lebih terstruktur
Framework biasanya memiliki pola arsitektur dalam menuliskan kode. Sehingga, kode yang
dituliskan lebih mudah dan struktur. Dampaknya, kamu dapat dengan cepat menemukan kesalahan
dan langsung memperbaikinya.
Meningkatkan keamanan
Selain membuat kode lebih terstruktur, framework dapat meningkatkan keamanan website kamu.
Seperti contohnya framework Laravel yang sudah mengadopsi berbagai sistem keamanan seperti
autentikasi, enkripsi, dan hashing.
Mempercepat pembuatan website
Berikutnya adalah framework ini dapat mempercepat pembuatan website. Hal itu karena
pengembang dapat menggunakan komponen-komponen yang sudah disediakan dan tidak perlu
menulis kode dari awal, sehingga dapat mempercepat pembuatan sebuah website.
Pemeliharaan dan perawatan website lebih mudah
Yang terakhir adalah framework ini dapat mempermudah kamu dalam memperbaiki dan merawat
website. Perbaikan bug, maintenance menambah fitur dan meningkatkan keamanan website akan
jadi lebih mudah karena kebanyakan framework sudah menggunakan pola arsitektur yang beragam.
Jenis-Jenis Framework
Ada beragam jenis framework yang sering digunakan untuk membuat website. Setiap framework
memiliki fungsinya masing-masing dan juga menggunakan bahasa pemrograman yang berbeda
juga. Nah, berikut ini adalah jenis-jenis framework untuk membuat suatu website.
• Framework CSS
Cascading Style Sheet atau yang disingkat menjadi CSS adalah bahasa pemrograman yang digunakan
untuk mengatur layout dan tampilan pada HTML agar menjadi lebih menarik. Biasanya CSS ini dibuat
oleh front end developer. Berikut ini adalah beberapa contoh dari framework CSS.
• Bootstrap
Yang pertama adalah Bootstrap. Framework ini memiliki tampilan yang modern, dinamis, dan
juga lebih ramah pengguna. Fitur lain dari framework ini adalah website yang dibuat menggunakan
bootstrap ini akan responsive jika dibuat dengan mengikuti aturan-aturan yang disediakan
bootstrap.
17
• Semantic UI
Framework ini memiliki kelebihan dalam penulisan class yang lebih mudah dibandingkan
framework lain. Selain itu ia juga menyediakan banyak komponen UI yang berguna untuk
membuat tampilan HTML menjadi lebih menarik.
• Materialize
Framework ini dibuat dengan tujuan untuk mengembangkan desain yang memungkinkan
pengguna merasakan pengalaman yang serupa saat menggunakan produk di semua platform.
Materialize ini mengadaptasi Material Design yang dibuat dan dikembangkan oleh Google.
• Framework JavaScript
JavaScript merupakan bahasa pemrograman yang sering digunakan oleh para front end
developer dalam pembuatan tampilan website menjadi lebih interaktif. JavaScript merupakan
bahasa pemrograman yang berjalan pada sisi front end dan masuk ke dalam golongan bahasa
pemrograman tingkat tinggi. Berikut ini merupakan beberapa framework JavaScript yang sering
digunakan.
• AngularJS
Framework AngularJS ini bersifat open source dan ia berjalan pada sisi client dengan
menggunakan konsep MVC untuk membuat tampilan dari website menjadi lebih dinamis.
• ReactJS
ReactJS adalah framework yang dikembangkan oleh Facebook. Ia sering digunakan untuk
membuat UI untuk suatu website atau aplikasi mobile karena ReactJS ini dapat digunakan
secara multi platform. ReactJS ini merupakan inti dari React Native yang dapat memungkinkan
kamu untuk mengembangkan aplikasi mobile di dua sistem operasi secara bersamaan, yaitu
Android dan iOS.
• Framework PHP
PHP atau Hypertext Preprocessor adalah bahasa pemrograman yang digunakan untuk komunikasi
dari sisi server. Berikut ini adalah beberapa framework PHP yang populer digunakan dalam
pembuatan website.
• CodeIgniter
CodeIgniter atau dapat disingkat menjadi CI merupakan framework dengan arsitektur yang khas,
yaitu arsitektur MVC (Model, View, controller). Dengan begitu kamu dapat menulis kode dengan
lebih terstruktur dan spesifik.
18
• Laravel
Laravel ini biasanya digunakan oleh para developer untuk mengembangkan website dengan
kompleksitas yang tinggi. Ia memiliki library yang lengkap serta memilih sintaksis atau kode
yang elegan, ringkas, dan rapi.
• Symfony
Symfony ini cocok digunakan untuk mengembangkan website dengan skala yang besar dan
kompleks. Ia juga memakan sedikit memori jika dibandingkan dengan framework lainnya dan
menghasilkan performa yang tinggi.
Jadi, Apa itu Framework?
Jadi, itulah pembahasan kali ini. Framework ini dapat diartikan sebagai kerangka kerja yang
digunakan untuk mempermudah web developer dalam mengembangkan website. Banyak fungsi
yang menguntungkan para developer jika ia menggunakan framework ini seperti dapat menghemat
waktu dan biaya pembuatan aplikasi.
• AJAX
Ajax Asynchronous JavaScript and XML adalah teknik yang digunakan untuk membuat website
yang dinamis. Artinya website mampu mengupdate dan menampilkan data baru dari server tanpa
perlu melakukan reload.
Salah satu contoh penggunaannya misalnya pada update jumlah angka likes dan komentar pada
media sosial Instagram, Facebook, Twitter, dan lainnya. Sesuai namanya, AJAX terdiri dari
JavaScript dan XML yang bekerja bersama. JavaScript adalah bahasa pemrograman untuk
mengelola konten website yang dinamis. Sementara XML (eXtensible Markup
Language) digunakan untuk memuat dan membawa data dari server ke browser.
AJAX JavaScript dan XML ini bekerja secara asynchronous untuk berkomunikasi dengan server.
Proses pertukaran informasi ini dilakukan di background. Artinya, saat AJAX JavaScript dan
XML bekerja, halaman dapat tetap diakses oleh pengunjung website.
C. Implementasi Framework pada pembuatan WEB Statis Dan Dinamis

Implementasi framework pada pembuatan web statis dan dinamis :
• WEB STATIS
Membuat Web Sekolah SMK PRESTASI PRIMA
Langkah pertama untuk membuat website sekolah adalah membuat konsep, langsung saja buat konsep
sesuai yang anda kuasai.
1. Buat File: index.html
19
kode dibawah ini kedalam file yang telah dibuat.
Nama kamu
20
21
22
23
Nama kamu
2. Buat File: style.css

Buat kode dibawah ini kedalam file yang telah dibuat.
24
3. Cara Pemasangan Files
Berikut ini cara menaruh file-file tersebut.
1. Buat Sebuah Folder.

2. Buat File "index.html", "style.css" didalam folder tersebut, dan pastekan kode-kode diatas tadi.
3. Buat Folder "img". Jika Bingung lihat gambar dibawah ini.
OUTPUT :
Nama kamu
25
26
Pembuatan Web statis dan dinamis kebutuhan yang kontekstual :
Secara singkat istilah aplikasi yang terdapat CRUD didalamnya adalah proses dimana sistem yang
kita buat dapat Create (membuat) data atau menambah data, Read (melihat) data, Update
(mengubah) data, Delete (menghapus) data, pasti kebanyakan sistem/aplikasi memiliki data jika
tidak ada crud bagaimana sistem itu dapat mengolah data datanya ? makadari itu crud sangat
penting untuk dipelajari
Sebelumnya silahkan download list dibawah ini :
Boostrap 4 : https://www.ismynr.xyz/2019/09/crud-dengan-php-mysql-bootstrap.html
Jquery : https://www.ismynr.xyz/2019/09/crud-dengan-php-mysql-bootstrap.html
4. Persiapan Membuat CRUD PHP MYSQL
Jalankan Xampp klik button start pada apache dan mysql , buka browser chrome. Lalu buka juga
text editor nya bisa menggunakan sublime text, notepad++, vscode dll. Langkah awal karena kita
ingin membuat crud data kita harus mebuat rancangan database terlebih dahulu dengan
• Membuat database dengan nama "phbweb2_crudnupev"
• Membuat nama tabel "user"
• Colom pada tabel tersebut "id, nama, username, password, email"
5. Membuat Database
Silahkan ketik localhost/phpmyadmin pada browsernya lalu buat database nya misalkan dengan
nama "phbweb2_crudnupev" atau bisa disesuaikan apa nama database nya, lalu klik create
27
6. Membuat Tabel
Setelah itu buat tabel untuk menyimpan data datanya beserta contoh datanya, sebagai contoh disini
saya menggunakan query sql agar mudah untuk membuat tabel nya
Cek datanya pada tab struktur untuk melihat seluruh struktur tabel yaitu terdapat kolom apa saja
pada tabel tersebut, tab browse melihat data apa saja yang sudah diinputkan, karena tadi kita sudah
insert into 'user' pada query diatas harusnya sudah ada 4 data yang diinputkan.
28
7. Struktur File
Struktur file yaitu agar file file kodingan yang kita buat menjadi lebih tersusun pastikan ada
sudah download bootstrap 4 dan jquery yang sudah disiapkan di awal tutorial
• Buat folder misalkan "1tugascrud" bisa disesuaikan di htdocs C:\xampp\htdocs\

• Lalu buat folder lagi yaitu "assets" dan "operasi" didalam "1tugascrud"
• Ekstrak doc bootstrap 4 lalu ambil ambil 2 file saja yaitu css (bootstrap.min.css) dan js
(bootstrap.min.js) buat folder bernama "bootstrap" taruh didalam folder "assets" lalu
simpan file bootstrap tadi difolder ini
• Buat folder "jquery" taruh didalam folder "assets"lalu simpan file jquery.min.js yang
sudah didownload tadi difolder ini
• Buat folder "img" taruh didalam folder "assets" ini dibuat untuk menyimpan gambar2
8. Konfigurasi Database Mysql dan Variable PHP
Buat file config.php dan index dalam folder "1tugascrud", anda bisa langsung membuatnya di text
editor seperti sublime text, notepad++, vscode dll
Copy paste kode program berikut ke file config.php yang sudah dibuat tadi
<?php
//WEB CONFIG
$WEB_CONFIG = [
'app_name' => 'CRUD PHP MYSQL',
'base_url' => 'http://localhost/1tugascrud/'
];
//DATABASE CONFIG
$DB_CONFIG = [
'host' => 'localhost',
'user' => 'root',
'passwd' => '',
'db_name' => 'phbweb2_crudnupev'
];
//KONEK KE MYSQL
$connect = mysqli_connect($DB_CONFIG['host'], $DB_CONFIG['user'], $DB_CONFIG['passwd'], $DB_CONFIG['db_name']);
?>
29
Pada web config untuk membuat variabel yang tetap agar dapat kita pakai berulang ulang tanpa
harus dibuat lagi jadi ini berguna ketika suatu saat app_name berarti nama aplikasi nya ganti, kita
cukup mengubah app_name pada config.php tidak usah mengganti semua yang berkaitan dengan
nama aplikasinya.
Begitu jugaa base_url juga agar link/lokasi file dapat kita ubah hanya pasti suatu saat kita
mengubah linknya, selain itu juga database config juga sama jika hak akses pada phpmyadmin
masih default biasanya gunakan password kosong saja dengan username root
D. Menampilkan Data dari Database MySQL Menggunakan PHP

Biasanya menampilkan data adalah hal yang paling biasa untuk memperlihatkan data sebelum
melakukan edit, hapus jadi kita disini membuat tampilan main website nya
1. Pembuatan Tampilan Main (Index)
Buat file baru dengan nama "index.php" pada folder "1tugascrud"
30
File ini oleh php akan dieksekusi terlebih dahulu jadi pada awal kode terdapat <?php require
'config.php'; ?> untuk memanggil file config.php tadi yang berisi konfigurasi website termasuk database,
dengan pemanggilan file config.php ini anda dapat menggunakan variabel/function dll yang ada dalam
file config.php di dalam file index.php.
Seperti pada contoh <title><?= $WEB_CONFIG['app_name'] ?></title>; pada index.php kita belum
menginisialisasi variabel/array apapun ... nah itu dapat kita gunakan untuk ketika dalam kode program
banyak penggunaan variabel tersebut ketika terdapat perubahan tidak perlu lagi untuk mengganti satu
satu, cukup pada file config.php
Pada code selanjutnya seperti biasa pemanggilan file css dan js, pada tag html nav pun sama
menggunakan array assosiative untuk mendapatkan nama aplikasi dan base_url (url default)
2. Pembuatan Tabel Data / Menampilkan Data Dari Database MySQL

Buat file read.php didalam folder "operasi" copy paste code berikut
<?php
//PENGHUBUNGAN MYSQL DENGAN QUERY UNTUK MENDAPATKAN NAMA, USERNAME, PASSWORD, DAN EMAIL
$query = "SELECT * FROM user ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>
<a href="<?= $WEB_CONFIG['base_url'] ?>index.php?page=add" class="btn btn-primary mb-3">

<svg style="width:20px;height:20px" viewBox="0 0 24 24" class="mb-1 m">
31
<path fill="#fff" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10
0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg> Add New
</a>
<div class="box_table">
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>Nama</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th width="20%">Action</th>
</tr>
</thead>
<tbody>

<?php $no = 1; ?>

<?php while($data = mysqli_fetch_array($result)) : ?>
<tr>
<td><?= $no ?></td>

<td><?= $data['nama'] ?></td>
<td><?= $data['username'] ?></td>
<td><?= $data['password'] ?></td>
<td><?= $data['email'] ?></td>
<td>

<a href="<?= $WEB_CONFIG['base_url'] ?>index.php?page=update&id=<?= $data['id'] ?>" class="btn btn-success
m-1">
<svg style="width:20px;height:20px" viewBox="0 0 24 24" class="mb-1">
<path fill="#fff" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12H20A8,8 0 0,1 12,20A8,8 0
0,1 4,12A8,8 0 0,1 12,4V2M18.78,3C18.61,3 18.43,3.07 18.3,3.2L17.08,4.41L19.58,6.91L20.8,5.7C21.06,5.44 21.06,5
20.8,4.75L19.25,3.2C19.12,3.07 18.95,3 18.78,3M16.37,5.12L9,12.5V15H11.5L18.87,7.62L16.37,5.12Z" />
</svg> Edit</a>

<a href="javascript:alertDelete(<?= $data['id'] ?>);" class="btn btn-danger m1">
<path fill="#fff"
d="M20.37,8.91L19.37,10.64L7.24,3.64L8.24,1.91L11.28,3.66L12.64,3.29L16.97,5.79L17.34,7.16L20.37,8.91M6,19V7H11.07
L18,11V19A2,2 0 0,1 16,21H8A2,2 0 0,1 6,19Z" />
</svg> Delete</a>
</td>
</tr>
<?php $no++ ?>
<?php endwhile; ?>
</tbody>
</table>
</div>


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm To Delete Data</h5>
</div>
<div class="modal-body">
<p>Are you sure ? </p>
</div>
32
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<a type="button" class="btn btn-danger" id="deleteButtonModal">Delete Now!</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function alertDelete(idn) {
//MENAMBAHKAN ATTRIBUT HTML href DENGAN ID deleteButtonModal KETIKA FUNCTION INI DIPANGGIL
$('#deleteButtonModal').attr('href', '<?= $WEB_CONFIG['base_url'] ?>index.php?page=delete&id='+idn);
//MEMUNCULKAN MODAL DIALOG
$('#deleteModal').modal('show');
}
</script>
Hasilnya ...
Pada gambar terlihat terlalu keatas, kita beri margin atas agar container posisinya lebih ke
bawah, Buat file style.css pada folder "assets", copy paste code berikut
3. Menambahkan Data Ke Database MySQL (Create Data)

Perhatikan potongan kode dibawah pada file read.php yang ada diatas
<a href="<?= $WEB_CONFIG['base_url'] ?>index.php?page=add" class="btn btn-primary mb-3">
<svg style="width:20px;height:20px" viewBox="0 0 24 24" class="mb-1 m">
<path fill="#fff" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10
0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg> Add New
</a>
Tombol untuk membuat record baru (data baru) jika dilihat url mengarah
ke http://localhost/1tugascrud/index.php?page=add jika kita lihat lagi potongan code pada file index.php
<?php session_start();l
//MENGAMBIL VALUE PAGE YANG TERDAPAT PADA URL
$content = (isset($_GET["page"])) ? $_GET["page"] : ""; ?>
33
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h2 class='text-uppercase'><?= $content ?> Data</h2>
</div>
<div class="col-md-10">
<?php
//UNTUK PEMBERITAHUAN SUCCES DATA SUDAH DIOLAH
if(isset($_SESSION['flash'])){
echo $_SESSION['flash'];
unset($_SESSION['flash']);
}
//PERPINDAHAAN PAGES WEBSITE

switch ($content) {
case 'add':
require 'operasi/create.php';
break;
case 'delete':
require 'operasi/delete.php';
break;
case 'update':
require 'operasi/update.php';
break;
//YANG PERTAMA KALI DI JALANKAN SELAIN DARI CASE DIATAS
default:
require 'operasi/read.php';
break;
} ?>
</div>
</div>
</div>
Pada variabel $content mengambil value dari method get yaitu $_GET['page'] bisa dilihat pada url
tadi index.php?page=add berarti jika disimpulkan $content = add karena $_GET['page'] mengambil value
dari page yang ada di url, jadi pada switch case php akan me require file yang terdapat pada
operasi/create.php (seperti menaruh file kedalam case tersebut) nah file create.php
buat file create.php dalam folder "operasi"
<?php
//VARIABEL UNTUK MENYIMPAN PESAN (VALIDASI)
$namaErr = $usernameErr = $passwordErr = $emailErr = "";
//JIKA MENGIRIMKAN DATA DENGAN NAME "SAVE" (TOMBOL SAVE TELAH DI KLIK)
if(isset($_POST['save'])){
//JIKA DATA ADA YANG KOSONG
if(!isset($_POST['nama']) || !isset($_POST['username']) || !isset($_POST['password']) || !$_POST['email']){
if($_POST['nama'] == ""){
$namaErr = "Nama tidak boleh kosong!";
}
if($_POST['username'] == ""){
$usernameErr = "Username tidak boleh kosong!";
}
if($_POST['password'] == ""){
$passwordErr = "Password tidak boleh kosong!";
}
if($_POST['email'] == ""){
$emailErr = "Email tidak boleh kosong!";
34
}
}else{
//SELAIN DATA ADA YANG KOSONG (BERARTI SEMUA FORM TERISI)
$nama = $_POST['nama'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$query = "INSERT INTO user (nama,username,password,email) VALUES('$nama', '$username', '$password', '$email')";
//KONEKSI DATABASE DAN EKSEKUSI QUERY

if (mysqli_query($connect, $query)) {
echo "<div class=\"alert alert-success\" role=\"alert\">Berhasil disimpan</div>";
}else{
//JIKA GAGAL KONEK DATABASE / EKSEKUSI QUERY
echo "<div class=\"alert alert-danger\" role=\"alert\">Gagal disimpan</div>";
}
}
}
?>
<a href="<?= $WEB_CONFIG['base_url'] ?>" class="btn btn-warning mb-3">

<path fill="#000000" d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1
2,12M18,11H10L13.5,7.5L12.08,6.08L6.16,12L12.08,17.92L13.5,16.5L10,13H18V11Z" />
</svg> Back To Data
</a>
<div class="container">
<form action="" method="post">
<div class="form-group">
<label for="inputNama">Nama</label>
<input type="text" name="nama" class="form-control" id="inputNama" maxlength="40" required autofocus>

<small class="text-danger"><?= $namaErr == "" ? "":"* $namaErr " ?></small>
</div>
<label for="inputUsername">Username</label>
<input type="username" name="username" class="form-control" id="inputUsername" maxlength="30" required>
<small class="text-danger"><?= $usernameErr == "" ? "":"* $usernameErr" ?></small>
</div>
<label for="inputPassword">Password</label>
<input type="password" name="password" class="form-control" id="inputPassword" maxlength="30" minlength="3"
required>
<small class="text-danger"><?= $passwordErr == "" ? "":"* $passwordErr" ?></small>
</div>
<label for="inputEmail">Email</label>
<input type="email" name="email" class="form-control" id="inputEmail" maxlength="50" required>
<small class="text-danger"><?= $emailErr == "" ? "":"* $emailErr" ?></small>
</div>
<input type="submit" class="btn btn-dark m-1" name="save" value="Save Now!">
</form>
</div>
Dalam file create.php code untuk pengisian data form dan operasi tambah data dijadikan satu
35
4. Menghapus Data dari Database MySQL (Delete Data)
Dalam database terdapat id, nama, username, password, dan email dari kolom2 tersebut kita
memerlukan sebuah identitas yang tidak mungkin data dari satu ora dengan orang lain sama, jadi untuk
menghapus data kita memerlukan identitas yang biasa dipake di database adalah "id", id dibuat secara
otomatis dan terus bertambah jika data nya ditambahkan Misalkan kita ingin mengubah semua data-
data yang namanya "yahiko" lalu bagaimana bisa menghapusnya ?
Bagaimana jika terdapat kesamaan nama ? tentu tidak bisa sistem akan menghapus semua jika nama =
yahiko makanya id ini sangat penting dalam database mysql untuk menentukan data. Karena kolom id
ini tidak ditampilkan bisa dibilang tidak penting karena id ini tidak terurut misalkan data ada 1-5 data,
lalu data ke 5 dihapus maka mysql akan menambahkan 1 dengan id yg terakhir dibuat yaitu 5 maka
5+1 = 6 .... karena tadi id 5 sudah terhapus maka data menjadi 1, 2, 3, 4, 6 belum lagi sampai ribuat
data rasanya lebih baik menggunakan nomor saja, Selain itu tidak ditampilkan bisa juga karena masalah
keamanan data jika seseorang mengetahui id dari salah satu data,
bisa saja kita mengalami kebocoran data dan data sengaja dihapus / dimodifikasi oleh seseorang
tersebut. Untuk itu kita harus tau cara mengetahui data ini itu id nya berapa sih ? bisa dilihat potongan
kode pada body tabel pada file read.php
<tbody>
<?php $no = 1; ?>
<?php while($data = mysqli_fetch_array($result)) : ?>
<tr>
<td><?= $no ?></td>
<td><?= $data['nama'] ?></td>
<td><?= $data['username'] ?></td>
<td><?= $data['password'] ?></td>
<td><?= $data['email'] ?></td>
<td>
<a href="<?= $WEB_CONFIG['base_url'] ?>index.php?page=update&id=<?= $data['id'] ?>" class="btn btn-success
m-1">
<path fill="#fff" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12H20A8,8 0 0,1 12,20A8,8 0
0,1 4,12A8,8 0 0,1 12,4V2M18.78,3C18.61,3 18.43,3.07 18.3,3.2L17.08,4.41L19.58,6.91L20.8,5.7C21.06,5.44 21.06,5
20.8,4.75L19.25,3.2C19.12,3.07 18.95,3 18.78,3M16.37,5.12L9,12.5V15H11.5L18.87,7.62L16.37,5.12Z" />
</svg> Edit</a>
<a href="javascript:alertDelete(<?= $data['id'] ?>);" class="btn btn-danger m1">
<path fill="#fff"
d="M20.37,8.91L19.37,10.64L7.24,3.64L8.24,1.91L11.28,3.66L12.64,3.29L16.97,5.79L17.34,7.16L20.37,8.91M6,19V7H11.07
L18,11V19A2,2 0 0,1 16,21H8A2,2 0 0,1 6,19Z" />
</svg> Delete</a>
</td>
</tr>
<?php $no++ ?>
<?php endwhile; ?>
</tbody>
Potongan kode untuk modal konfirmasi penghapusan data pada file read.php
36
Potongan kode javascript pada file read.php
Pada code <a class="btn btn-danger m1" href="javascript:alertDelete(<?=

$data['id'] ?>);"> ini memberikan parameter id untuk dikirimkan ke funsi alertDelete
dijavascript, jadi bisa dilihat selama kode tersebut masuk dalam while (perulangan) data seperti id,
nama, username, password, email
Dalam kode javascript didalam function alertDelete pada baris pertama memberikan atribut berupa
href ke dalam #deleteButtonModel (button yang terdapat pada modal dialog) yang url akan
mengarahkan ke penghapusan data dengan menggunakan argument idn yang telah dikirimkan
dihtml pada tag <a> , url yang didapat adalah
Sekarang buat file delete.php pada folder "operasi"
37
5. Mengubah Data dari Database MySQL (Update Data)
Mengubah data juga membutuhkan id sama seperti halnya delete data, misalkan ingin mengubah yang
tadinya nama "mitsuki" menjadi "orochimaru" trus id mana yang namanya ingin dirubah, tampilan
form ubah sama seperti add data
Bedanya ketika data yang kita pilih klik Edit akan mengirimkan id yang method nya .
Buat file update.php didalam folder "operasi"
<?php
$namaErr = $usernameErr = $passwordErr = $emailErr = "";
if(isset($_POST['save'])){
if(!isset($_POST['nama']) || !isset($_POST['username']) || !isset($_POST['password']) || !$_POST['email']){
if($_POST['nama'] == ""){
$namaErr = "Nama tidak boleh kosong!";
}
if($_POST['username'] == ""){
$usernameErr = "Username tidak boleh kosong!";
}
if($_POST['password'] == ""){
$passwordErr = "Password tidak boleh kosong!";
}
if($_POST['email'] == ""){
$emailErr = "Email tidak boleh kosong!";
}
}else{
$id = $_GET['id'];
$nama = $_POST['nama'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$query = "INSERT INTO user (nama,username,password,email) VALUES('$nama', '$username', '$password', '$email')";

$query = "UPDATE user SET nama='$nama', username='$username', password='$password', email='$email' WHERE
id=$id";
if (mysqli_query($connect, $query)) {
echo "<div class=\"alert alert-success\" role=\"alert\">Berhasil diubah</div>";
38
}else{
echo "<div class=\"alert alert-danger\" role=\"alert\">Gagal diubah</div>";
}
}
}
//AMBIL ID PADA URL

$id = $_GET['id'];
$query = "SELECT * FROM user WHERE id = $id";
//KONEKSI DATABASE DAN EXECUTE QUERY

$result = mysqli_query($connect, $query);
//PENGAMBILAN DATA TERSIMPAN PADA VARIABEL $data

$data = mysqli_fetch_array($result);
?>
<a href="<?= $WEB_CONFIG['base_url'] ?>" class="btn btn-warning mb-3">

<svg style="width:20px;height:20px" viewBox="0 0 24 24">
<path fill="#000000" d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1
2,12M18,11H10L13.5,7.5L12.08,6.08L6.16,12L12.08,17.92L13.5,16.5L10,13H18V11Z" />
</svg> Back To Data
</a>
<div class="container">
<form action="" method="post">
<label for="inputNama">Nama</label>

<input type="text" name="nama" class="form-control" id="inputNama" value="<?= $data['nama'] ?>" maxlength="40"
required autofocus>
<small class="text-danger"><?= $namaErr == "" ? "":"* $namaErr " ?></small>
</div>
<label for="inputUsername">Username</label>
<input type="username" name="username" class="form-control" id="inputUsername" value="<?= $data['username'] ?>"
maxlength="30" required>
<small class="text-danger"><?= $usernameErr == "" ? "":"* $usernameErr" ?></small>
</div>
<label for="inputPassword">Password</label>
<input type="password" name="password" class="form-control" id="inputPassword" value="<?= $data['password'] ?>"
maxlength="30" minlength="3" required>
<small class="text-danger"><?= $passwordErr == "" ? "":"* $passwordErr" ?></small>
</div>
<label for="inputEmail">Email</label>
<input type="email" name="email" class="form-control" id="inputEmail" value="<?= $data['email'] ?>" maxlength="50"
required>
<small class="text-danger"><?= $emailErr == "" ? "":"* $emailErr" ?></small>
</div>
<input type="submit" class="btn btn-dark m-1" name="save" value="Update Now!">
</form>
</div>
39
Tambahkan juga trakhir icon pada navbar, sebelumnya sudah ada url menuju icon tersebut pada atribut
src tetapi belum ditambahkan gambar png nya pada assets/img/
Sumber : https://www.ismynr.xyz/2019/09/crud-dengan-php-mysql-bootstrap.html
40
ASESMEN SUMATIF 2
B. PILIHAN BERGANDA
1. Apa tujuan utama dari menggunakan framework dalam pembuatan web?
A. Mempercepat proses pembuatan web
B. Meningkatkan keamanan web
C. Meningkatkan skalabilitas web
D. Semua benar kecuali pilihan C
E. Semua jawaban di atas benar
2. Framework mana yang sering digunakan untuk membangun web dinamis?

A. React
B. Laravel
C. Express.js
D. Semua jawaban di atas benar
E. Semua benar kecuali pilihan A
3. Keuntungan menggunakan framework dalam pembuatan web dinamis adalah:

A. Memudahkan pengelolaan routing
B. Menyediakan struktur yang terorganisir
C. Memiliki fitur-fitur bawaan yang siap digunakan
E. Semua benar kecuali pilihan B
4. Salah satu contoh framework PHP yang sering digunakan dalam pembuatan web
dinamis adalah:
A. Ruby on Rails
B. Express.js
C. Django
D. Laravel
E. PHP
5. Keuntungan menggunakan framework pada pengembangan web statis adalah:

A. Memiliki kemampuan memproses permintaan dan menghasilkan konten dinamis
B. Memungkinkan penggunaan basis data dan penanganan interaksi pengguna
C. Memudahkan pengelolaan konten statis dan pengoptimasian performa
E. Semua benar kecuali pilihan B
41
42
BAB 3
PEMBUATAN WEB STATIS DAN DINAMIS UNTUK
BERAGAM KEBUTUHAN YANG KONTEKSTUAL
A. Pengertian dan Konsep

Dalam BAB ini akan dipelajari bagaimana membuat Aplikasi Penjualan Pulsa
menggunakan PHP dan AJAX. Aplikasi Penjualan Pulsa merupakan aplikasi yang digunakan
untuk memudahkan dalam melakukan pencatatan data penjualan pulsa. Dalam aplikasi ini terdapat
menu yang bisa digunakan untuk pengelolaan data Pelanggan, Pulsa, Penjualan, dan Laporan
Penjualan.
PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah singkatan rekursif, yakni
kepanjangannya terdiri dari singkatan itu sendiri. PHP merupakan bahasa pemrograman server-
side-scripting yang bisa digunakan bersamaan dengan HTML untuk pengembangan web yang
dinamis. Sintaks dan perintah-perintah PHP akan diesksekusi diserver kemudian hasilnya akan
dikirimkan ke browser dengan format HTML.
AJAX adalah singkatan dari “Asynchronous JavaScript and XML“, merupakan suatu teknik
pemrograman berbasis web untuk menciptakan aplikasi web interaktif yang lebih baik dan lebih
cepat. Dengan AJAX kita dapat melakukan pertukaran data dengan server di belakang layar,
sehingga halaman web tidak harus dibaca ulang (refresh halaman) secara keseluruhan setiap kali
seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan
usability.
Dalam buku ini akan dipelajari juga bagaimana cara menggunakan database MariaDB untuk
manajemen data. MariaDB adalah sistem manajemen database relasional yang dikembangkan dari
MySQL, dan merupakan versi pengembangan terbuka dan mandiri dari MySQL. Bagi Anda yang
sudah terbiasa dengan database MySQL tidak perlu repot belajar MariaDB lagi karena hampir
keseluruhan struktur, query, dan penggunaannya sama seperti MySQL.
Untuk berkomunikasi dengan database, akan dipelajari bagaimana cara menggunakan MySQLi
Extension dengan antarmuka Object Oriented dan menggunakan Prepared statements untuk
membuat query. Dengan Prepared statements kita bisa mengirim query (perintah) secara terpisah
antara query inti dengan “data” dari query. Tujuannya agar query menjadi lebih aman dan cepat
(jika perintah yang sama akan digunakan beberapa kali). Prepared Statement adalah salah satu cara
yang cukup efektif untuk mencegah SQL Injection saat melakukan komunikasi ke database.
43
Tujuan Pembelajaran
Tujuan dari pembelajaran ini adalah untuk mempelajari dan mempraktekkan secara langsung
bagaimana membuat aplikasi web interaktif yang lebih baik dan lebih cepat menggunakan PHP
dan AJAX.
Diharapkan setelah membaca BUKU ini, Anda dapat mempelajari :
1. Membuat aplikasi web interaktif yang dapat melakukan pemanggilan halaman tanpa
reload/refresh halaman, melakukan operasi CRUD tanpa reload/refresh halaman,
menampilkan laporan data penjualan berdasarkan tanggal dan mengexport laporan dalam
bentuk Ms. Excel tanpa reload/refresh halaman.
2. Menggunakan MySQLi Extension dengan antarmuka Object Oriented untuk berkomunikasi
dengan database.
3. Menggunakan Prepared statements untuk membuat query menjadi lebih aman dan cepat saat
melakukan komunikasi ke database.
4. Membuat validasi form input wajib diisi dengan memunculkan notifikasi menggunakan
SweetAlert, dan membuat fungsi untuk membatasi karakter yang diinputkan (bisa diinputkan
huruf, angka atau karakter tertentu saja).
5. Mendesain tampilan aplikasi menggunakan CSS Bootstrap 4.
6. Membuat tabel yang dinamis menggunakan DataTables Server-side Processing untuk
menampilkan data dari database dalam jumlah yang sangat besar. Sehingga aplikasi yang
memiliki banyak data, akan terasa ringan ketika di load. Tabel sudah dilengkapi dengan filter
jumlah data yang ditampilkan, form pencarian data dan pagination.
7. Membuat tampilan alert (kotak dialog) JavaScript menggunakan SweetAlert untuk
memunculkan notifikasi pada saat sukses menyimpan data, sukses mengubah data, konfirmasi
hapus data, sukses menghapus data, dan validasi form input.
8. Membuat icon yang menarik menggunakan Font Awesome, dengan sistem “Font Icon” yang
memungkinkan untuk membuat icon hanya menggunakan teks (tanpa gambar) dan mengubah
warna serta ukuran font menggunakan CSS tanpa takut icon menjadi pecah.
9. Menampilkan data dari database ke Select Box menggunakan plugin jQuery Chosen, yang
sudah dilengkapi dengan fitur pencarian sehingga dapat memudahkan dalam memilih data
yang diinginkan ketika data yang ditampilkan sangat banyak
10. Menampilkan data dari database ke Textfield berdasarkan data yang dipilih pada Select Box.
Persiapan Pembuatan Aplikasi

Sebelum memulai pembuatan aplikasi, persiapkan tools dan library yang dibutuhkan dalam
pembuatan aplikasi berikut ini :
1. XAMPP v7.2.12 6. Bootstrap 4 – Chosen
2. Visual Studio Code v1.29 7. DataTables v 1.10.18 dan DataTables
3. jQuery v3.3.1 Server-side Processing Class
4. Bootstrap v4.1.3 8. SweetAlert
5. Bootstrap 4 – Datepicker 9. Font Awesome Free for Web v5.5.0
44
Tools dan library tersebut diatas adalah versi terbaru yang penulis gunakan saat membuat
buku ini. Silahkan Anda download tools dan library tersebut lalu menginstalnya pada laptop
Anda.
Dalam buku ini tidak diberikan tutorial dan penjelasan installasi XAMPP dan Visual Code
Studio, Penulis berasumsi Anda sudah mengerti tentang web server dan instalasi web server
menggunakan XAMPP, serta instalasi editor kode menggunakan Visual Studio Code.
Catatan :
Anda dapat mendownload semua tools dan library melalui link yang penulis sediakan disini :
https://drive.google.com/open?id=1tHo_gBLQkqzX0eGZxPjhVHlUoGpnhpTa
B. DATABASE
Tahap pertama pembuatan aplikasi adalah mempersiapkan database. Kita akan merancang dan
membuat database serta tabel-tabel yang akan digunakan untuk menyimpan data-data dari
Aplikasi Penjualan Pulsa.
1. Perancangan Tabel
Sebelum membuat database, terlebih dahulu kita membuat perancangan tabel-tabel yang
dibutuhkan dalam Aplikasi Penjualan Pulsa. Ada 3 tabel yang akan kita gunakan dengan struktur
masing-masing tabel sebagai berikut :
Tabel tbl_pelanggan.
Tabel tbl_pelanggan digunakan untuk menyimpan informasi pelanggan. Berikut struktur

tabelnya :
Name Type Length/Values Index A_I Keterangan
id_pelanggan INT 11 PRIMARY √ ID Pelanggan

nama VARCHAR 30 Nama Pelanggan
no_hp VARCHAR 13 No. HP Pelanggan
Tabel tbl_pulsa.
Tabel tbl_pulsa digunakan untuk menyimpan informasi pulsa. Berikut struktur tabelnya :
id_pulsa INT 11 PRIMARY √ ID Pulsa

provider VARCHAR 15 Nama Provider
nominal INT 11 Nominal Pulsa
harga INT 11 Harga Jual Pulsa
45
Tabel tbl_penjualan.
Tabel tbl_penjualan digunakan untuk menyimpan informasi penjualan pulsa. Berikut struktur
tabelnya :
id_penjualan INT 11 PRIMARY √ ID Penjualan

tanggal DATE Tanggal
Penjualan
pelanggan INT 11 ID Pelanggan
pulsa INT 11 ID Pulsa
jumlah_bayar INT 11 Jumlah Bayar
Pulsa
Keterangan :
• pelanggan sebagai foreign key untuk asosiasi (terhubung) dengan tbl_pelanggan.

• pulsa sebagai foreign key untuk asosiasi (terhubung) dengan tbl_pulsa.
2. Membuat Database menggunakan phpMyAdmin
Buka web browser Google Chrome / Mozilla Firefox (penulis menggunakan Google Chrome),
kemudian ketik http://localhost/phpmyadmin/ pada kolom url web browser lalu tekan Enter
untuk mengakses phpMyAdmin. Tampilannya akan terlihat seperti gambar berikut ini.
46
Buat database baru dengan nama db_penjualan_pulsa. Caranya klik pada tab menu
Databases, kemudian ketikan db_penjualan_pulsa pada Database name, lalu klik Create
untuk membuat database.
Setelah tombol Create diklik maka akan tampil seperti gambar dibawah ini. Sampai disini
database telah berhasil dibuat.
47
3. Membuat Tabel menggunakan phpMyAdmin
Selanjutnya buat tabel-tabel yang dibutuhkan dalam Aplikasi Penjualan Pulsa menggunakan
phpMyAdmin, caranya adalah sebagai berikut :
Tabel tbl_pelanggan.
Buat tabel dengan nama tbl_pelanggan. Caranya klik pada nama database
db_penjualan_pulsa, kemudian ketikan tbl_pelanggan pada Name dan ketikan jumlah field
3 pada Number of columns, lalu klik Go untuk melanjutkan.
Isikan nama field-field dari tabel sesuai dengan perancangan yang sudah dibuat. Lengkapi
bagian Name, Type, Length/Values. Kemudian tentukan id_pelanggan sebagai Primary
Key dan ceklis A_I (Auto Increment) untuk membuat id_pelanggan secara otomatis pada
tabel tersebut. Selanjutnya klik Save untuk menyimpan tabel.
48
Setelah tombol Save diklik maka akan tampil seperti gambar dibawah ini. Sampai disini
tabel
tbl_pelanggan telah berhasil dibuat.
Selanjutnya buat tabel tbl_pulsa dan tbl_penjualan dengan cara yang sama seperti saat
membuat tbl_pelanggan. Sesuaikan nama tabel dan jumlah field serta isi tabel dengan
perancangan yang sudah dibuat. Jika sudah selesai, maka tampilannya akan terlihat seperti
gambar berikut ini.
Tabel tbl_pulsa.
49
Tabel tbl_penjualan.
C. STRUKTUR FOLDER DAN FILE
Tahap kedua pembuatan aplikasi adalah mempersiapkan Struktur Folder dan File. Kita
akan membuat folder yang akan digunakan untuk tempat penyimpanan file Aplikasi
Penjualan Pulsa, dan menambahkan file Library yang dibutuhkan dalam Aplikasi
Penjualan Pulsa.
1. Membuat Folder
Buat sebuah folder baru dengan nama penjualan-pulsa di dalam direktori

C:\xampp\htdocs (letak folder instalasi XAMPP penulis berada pada direktori default
C:\xampp). Folder ini nantinya akan digunakan untuk tempat penyimpanan file aplikasi
yang akan dibuat. Folder ini juga yang akan digunakan untuk menampilkan Aplikasi
Penjualan Pulsa melalui web browser dengan mengetikan http://localhost/penjualan-
pulsa/ pada url web browser.
50
Selanjutnya buat beberapa folder baru di dalam folder penjualan-pulsa dengan nama
config, dan modules. Folder config digunakan untuk menyimpan file konfigurasi koneksi
database dan DataTables Server-side Processing Class. Folder modules digunakan untuk
menyimpan folder dan file modul/halaman yang akan dibuat pada aplikasi.
Selanjutnya buat beberapa folder baru di dalam folder modules dengan nama beranda,
pelanggan, pulsa, penjualan, dan laporan. Folder-folder tersebut akan digunakan untuk
menyimpan file-file modul/halaman yang akan dibuat pada aplikasi sesuai halaman masing-
masing.
2. Menambahkan Library
Selanjutnya kita akan menambahkan file library pendukung yang akan digunakan untuk
layout aplikasi. Pastikan Anda sudah mendownload semua file pendukung yang dibutuhkan
melalui link yang sudah saya sertakan pada bagian 1.
51
Setelah semua file pendukung didownload, kemudian copy dan paste kan ke dalam
folder
penjualan-pulsa seperti berikut :
1. Extract file assets.zip, kemudian Copy folder assets, lalu paste ke dalam folder
penjualan- pulsa.
2. Copy file ssp.class.php, lalu paste ke dalam folder config.
Jika semua telah selesai dikerjakan, maka tampilan struktur folder dan file bisa dilihat seperti
gambar berikut ini.
Keterangan :
• Folder assets berisi file-file library pendukung untuk layout aplikasi, seperti CSS,
Image, dan jQuery.
• File ssp.class.php merupakan DataTables Server-side Processing Class, yang
digunakan untukmenampilkan data dari database secara server-side menggunakan
DataTables.
52
D. HALAMAN UTAMA
Tahap selanjutnya pembuatan aplikasi adalah membuat halaman-halaman yang terdapat pada
aplikasi. Kita akan menggunakan Visual Studio Code sebagai kode editor untuk membuat file-
file dan mengetikan script program. Ikuti langkah-langkah berikut ini.
1. Membuat file index.php
Buka aplikasi Visual Studio Code, kemudian pada Welcome page klik Open Folder
untuk memasukan folder ke dalam Visual Studio Code.
Selanjutnya akan muncul tampilan Windows Dialog Box, kemudian arahkan ke

direktori
C:\xampp\htdocs\, lalu pilih folder penjualan-pulsa dan klik tombol Select Folder.
53
Setelah tombol Select Folder diklik, maka akan tampil seperti gambar dibawah ini.
Selanjutnya buat file baru di dalam folder penjualan-pulsa dengan nama

index.php. Caranya klik
New File, kemudian ketikan nama file index.php, lalu tekan Enter.
Setelah menekan Enter, maka akan tampil seperti gambar dibawah ini.
File index.php adalah file yang dipanggil pertama kali saat user mengakses atau melakukan
pemanggilan sebuah alamat website. index.php merupakan halaman utama yang digunakan
untuk memanggil file-file lainnya.
54
Selanjutnya ketikan script berikut ini pada file index.php.
001: <!doctype html>

002: <html lang="en">
003: <head>
004: 
005: <meta charset="utf-8">

006: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">007: <meta name="description" content="Aplikasi Penjualan Pulsa">
008: <meta name="keywords" content="Aplikasi
Penjualan Pulsa">009:<meta name="author"
content="Indra Styawantoro">
010:
011: 
012: <link rel="shortcut icon"

href="assets/img/favicon.png">013: 
014: <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-4.1.3/css/bootstrap.min.css">015:


016: <link rel="stylesheet" type="text/css" href="assets/plugins/DataTables/css/dataTables.bootstrap4.min.css">017:

018: <link rel="stylesheet" type="text/css" href="assets/plugins/datepicker/css/datepicker.min.css">
019: 
020: <link rel="stylesheet" type="text/css" href="assets/plugins/fontawesome-free-5.5.0-web/css/all.min.css">021:

022: <link rel="stylesheet" type="text/css" href="assets/plugins/sweetalert/css/sweetalert.css">
023: 
024: <link rel="stylesheet" type="text/css" href="assets/plugins/chosen-bootstrap-4/css/chosen.css">
025: 
026: <link rel="stylesheet" type="text/css"
href="assets/css/style.css">027: 
028: <script type="text/javascript" src="assets/js/jquery-
3.3.1.js"></script>029:
030: 
031: <title>Data
Transaksi Penjualan</title>032:
</head>
033: <body>
034: <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light d-flex flex-column flex-md-
rowalign-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
035: <div class="container">
036: 
037: <a class="navbar-brand" href="index.php">

038: <img src="assets/img/logo.png" width="30" height="30" class="d-inline-block align-top title-icon"
alt="Logo">
039: <span class="title">TORO CELL</span>
040: </a>
041: <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarCollapse"aria-controls="navbarCollapse" aria-expanded="false" aria-
label="Toggle navigation">
042: <span class="navbar-toggler-icon"></span>
043: </button>
044: 
045: <div class="collapse navbar-collapse"

id="navbarCollapse">046: <ul class="navbar-
nav ml-auto">
047: <li class="nav-item">
55
048: <a class="nav-link mr-1 menu" id="beranda"
href="javascript:void(0);">049: <i class="fas fa-home title-icon"></i>
Beranda
050: </a>
051: </li>
052: <li class="nav-item">
053: <a class="nav-link mr-1 menu" id="pelanggan"
href="javascript:void(0);">054: <i class="fas fa-user title-icon"></i> Pelanggan
055: </a>
056: </li>
56
104: <script type="text/javascript" src="assets/plugins/sweetalert/js/sweetalert.min.js"></script>
105: 
106: <script type="text/javascript" src="assets/plugins/chosen-bootstrap-4/js/chosen.jquery.js"></script>
107:
108: <script type="text/javascript">
109: $(document).ready(function() {
110: // halaman yang diload default pertama kali saat aplikasi dijalankan
111: $('.content').load('modules/beranda/view.php');
112:
113: // fungsi untuk pemanggilan halaman tanpa reload/refresh
114: $('.menu').click(function(){
115: // membuat variabel untuk menampung nama id dari class 'menu' yang diklik
116: var menu = $(this).attr('id');
57
163: // control keys
164: if ( key==null || key==0 || key==8 || key==9 || key==27 )
165: return true;
166:
167: if (key == 13) {
168: var i;
169: for (i = 0; i < field.form.elements.length; i++)
170: if (field == field.form.elements[i])
171: break;
172: i = (i + 1) % field.form.elements.length;
173: field.form.elements[i].focus();
174: return false;
175: };
176: // else return false
177: return false;

178: }
179: // =====================================================================================
180: </script>
181: </body>
182: </html>
Keterangan :
• Script berwarna abu-abu yang diawali dengan tanda // atau  untuk membuat komentar di dalam tag HTML. Komentar tidak
akan dieksekusi saat aplikasi dijalankan.
• Angka 001:, 002:, dst, tidak perlu diketik karena hanya sebagai informasi baris kode
untuk memberikan keterangan.
Setelah file index.php selesai dibuat, selanjutnya buka web browser untuk menjalankan aplikasi.
Ketikan http://localhost/penjualan-pulsa/ pada kolom url web browser lalu tekan Enter. Maka
tampilannya akan terlihat seperti gambar berikut ini.
58
E. KONEKSI DATABASE
Untuk dapat berinteraksi dengan database kita perlu membuat file koneksi database. file
koneksi database ini digunakan untuk menghubungkan antara aplikasi dengan database.
1. Membuat file database.php
Buat file baru di dalam folder config dengan nama database.php (dengan cara yang
sama seperti saat membuat file index.php). File database.php ini berisi parameter
koneksi database yang akan digunakan.
59
2. Membuat file config.php
Selanjutnya buat file baru di dalam folder config dengan nama config.php. Dalam file
config.php ini terdapat pengaturan standar zona waktu yang digunakan dan fungsi
untuk membuat koneksi ke database menggunakan MySQLi Extension dengan
antarmuka Object Oriented.
60
F. HALAMAN BERANDA
Halaman Beranda merupakan sebuah dashboard yang berisi informasi jumlah Data
Pelanggan, Data Pulsa, Data Penjualan, dan Total Penjualan. Halaman Beranda akan
ditampilkan saat pertama kali aplikasi dijalankan. Untuk membuat halaman Beranda ikuti
langkah-langkah berikut ini.
1. Membuat file view.php
Buat file baru di dalam folder beranda yang berada di dalam folder modules dengan nama
view.php. File view.php merupakan file utama pada halaman Beranda yang digunakan untuk
memanggil file-file lainnya. Ketikan script berikut ini pada file view.php.
61
2. Membuat file get_pelanggan.php
Buat file baru di dalam folder beranda dengan nama get_pelanggan.php. File
get_pelanggan.php berfungsi untuk menampilkan jumlah data pelanggan dari tabel
pelanggan pada database ke aplikasi. Ketikan script berikut ini pada file
get_pelanggan.php.
62
3. Membuat file get_pulsa.php
Buat file baru di dalam folder beranda dengan nama get_pulsa.php. File get_pulsa.php
berfungsi untuk menampilkan jumlah data pulsa dari tabel pulsa pada database ke aplikasi.
Ketikan script berikut ini pada file get_pulsa.php.
63
4. Membuat file get_penjualan.php
Buat file baru di dalam folder beranda dengan nama get_penjualan.php. File
get_penjualan.php berfungsi untuk menampilkan jumlah data penjualan dari tabel
penjualan pada database ke aplikasi.
Ketikan script berikut ini pada file get_penjualan.php.
64
5. Membuat file get_total.php
Buat file baru di dalam folder beranda dengan nama get_total.php. File
get_total.php berfungsi untuk menampilkan jumlah total penjualan dari tabel
penjualan pada database ke aplikasi. Ketikan script berikut ini pada file
get_total.php.
65
Setelah semua file selesai dibuat, selanjutnya refresh browser untuk melihat perubahan pada
aplikasi. Maka tampilannya akan terlihat seperti gambar berikut ini.
G. HALAMAN DATA PELANGGAN
Halaman Data Pelanggan digunakan untuk mengelola data pelanggan. Pada halaman ini
kita dapat menginput, mengubah, menghapus, dan mencari data pelanggan. Untuk
membuat halaman Data Pelanggan ikuti langkah-langkah berikut ini.
Buat file baru di dalam folder pelanggan dengan nama view.php. File view.php merupakan
file utama pada halaman Data Pelanggan, yang berisikan script untuk membuat view data
pelanggan menggunakan DataTables Server-side Processing, membuat form entri dan ubah data
pelanggan menggunakan bootstrap modal, dan melakukan proses CRUD menggunakan AJAX.
Ketikan script berikut ini pada file view.php.
66
67
68
69
70
2. Membuat file data.php
Buat file baru di dalam folder pelanggan dengan nama data.php. File data.php adalah
script dari DataTables Server-side Processing, yang digunakan untuk menampilkan data
pelanggan dari tabel pelanggan pada database ke aplikasi. Ketikan script berikut ini pada file
data.php.
71
3. Membuat file insert.php
Buat file baru di dalam folder pelanggan dengan nama insert.php. File insert.php
digunakan untuk melakukan proses insert data pelanggan dari form entri data pelanggan ke tabel
pelanggan pada database. Ketikan script berikut ini pada file insert.php.
72
4. Membuat file get_data.php
Buat file baru di dalam folder pelanggan dengan nama get_data.php. File get_data.php
digunakan untuk menampilkan data pelanggan dari tabel pelanggan pada database berdasarkan
id_pelanggan, yang selanjutnya data tersebut akan ditampilkan pada form ubah data pelanggan.
Ketikan script berikut ini pada file get_data.php.
5. Membuat file update.php
Buat file baru di dalam folder pelanggan dengan nama update.php. File update.php
digunakan untuk melakukan proses update data pelanggan di tabel pelanggan pada database
melalui form ubah data pelanggan. Ketikan script berikut ini pada file update.php.
73
6. Membuat file delete.php
Buat file baru di dalam folder pelanggan dengan nama delete.php. File delete.php
digunakan untuk melakukan proses delete data pelanggan dari tabel pelanggan pada database.
Ketikan script berikut ini pada file delete.php.
74
aplikasi. Kemudian jalankan aplikasi untuk mencoba semua fungsi yang telah dibuat pada
halaman Data Pelanggan. Tampilannya akan terlihat seperti gambar berikut ini.
• Insert Data Pelanggan
• View Data Pelanggan
75
• Update Data Pelanggan
• Delete Data Pelanggan
H. HALAMAN DATA PULSA

Halaman Data Pulsa digunakan untuk mengelola data pulsa. Pada halaman ini kita dapat
menginput, mengubah, menghapus, dan mencari data pulsa. Untuk membuat halaman
Data Pulsa ikuti langkah- langkah berikut ini.
Buat file baru di dalam folder pulsa dengan nama view.php. File view.php merupakan
file utama pada halaman Data Pulsa, yang berisikan script untuk membuat view data pulsa
menggunakan DataTables Server-side Processing, membuat form entri dan ubah data pulsa
menggunakan bootstrap modal, dan melakukan proses CRUD menggunakan AJAX. Ketikan
script berikut ini pada file view.php.
76
001: <div class="content-header row mb-3">
002: <div class="col-md-12">

003: <h5>
004: 
005: <i class="fas fa-tablet-alt title-icon"></i> Data Pulsa006: 
007: <a class="btn btn-info float-right" id="btnTambah" href="javascript:void(0);" data-

toggle="modal"data-target="#modalPulsa" role="button"><i class="fas fa-plus"></i> Tambah
</a>
008: </h5>
009: </div>
010: </div>
011:
012: <div class="border mb-4"></div>013:
014: <div class="row">
015: <div class="col-md-12">
016: 
017: <table id="tabel-pulsa" class="table table-striped table-bordered" style="width:100%">018: 
019: <thead>
020: <tr>
021: <th>No.</th>
022: <th>Provider</th>
023: <th>Nominal</th>
024: <th>Harga</th>
025: <th></th>
026: </tr>
027: </thead>
028: </table>
029: </div>
030: </div>
031:
032: 
033: <div class="modal fade" id="modalPulsa" tabindex="-1" role="dialog" aria-

labelledby="modalPulsa"aria-hidden="true">
034: <div class="modal-dialog" role="document">035: <div class="modal-content">
036: 
037: <div class="modal-header">

038: <h5 class="modal-title"><i class="fas fa-edit title-icon"></i><span
id="modalLabel"></span></h5>
77
78
79
80
Buat file baru di dalam folder pulsa dengan nama data.php. File data.php adalah script
dari DataTables Server-side Processing, yang digunakan untuk menampilkan data pulsa
dari tabel pulsa pada database ke aplikasi. Ketikan script berikut ini pada file data.php.
81
Buat file baru di dalam folder pulsa dengan nama insert.php. File insert.php
digunakan untuk melakukan proses insert data pulsa dari form entri data pulsa ke tabel pulsa
pada database. Ketikan script berikut ini pada file insert.php.
82
Buat file baru di dalam folder pulsa dengan nama get_data.php. File get_data.php
digunakan untuk menampilkan data pulsa dari tabel pulsa pada database berdasarkan
id_pulsa, yang selanjutnya data tersebut akan ditampilkan pada form ubah data pulsa.
83
Buat file baru di dalam folder pulsa dengan nama update.php. File update.php
digunakan untuk melakukan proses update data pulsa di tabel pulsa pada database melalui
form ubah data pulsa. Ketikan script berikut ini pada file update.php.
84
Buat file baru di dalam folder pulsa dengan nama delete.php. File delete.php
digunakan untuk melakukan proses delete data pulsa dari tabel pulsa pada database.
halaman Data Pulsa. Tampilannya akan terlihat seperti gambar berikut ini.
• Insert Data Pulsa
85
• View Data Pulsa
• Update Data Pulsa
• Delete Data Pulsa
86
I. HALAMAN DATA PENJUALAN
Halaman Data Penjualan digunakan untuk mengelola data penjualan pulsa. Pada
halaman ini kita dapat menginput, mengubah, menghapus, dan mencari data penjualan
pulsa. Untuk membuat halaman Data Penjualan ikuti langkah-langkah berikut ini.
Buat file baru di dalam folder penjualan dengan nama view.php. File view.php merupakan
file utama pada halaman Data Penjualan, yang berisikan script untuk membuat view data
penjualan menggunakan DataTables Server-side Processing, membuat form entri dan ubah
data penjualan menggunakan bootstrap modal, dan melakukan proses CRUD menggunakan
AJAX. Ketikan script berikut ini pada file view.php.
87
88
89
90
91
92
93
Buat file baru di dalam folder penjualan dengan nama data.php. File data.php adalah
penjualan dari tabel penjualan pada database ke aplikasi. Ketikan script berikut ini pada file
data.php.
Buat file baru di dalam folder penjualan dengan nama data.php. File data.php adalah
penjualan dari tabel penjualan pada database ke aplikasi. Ketikan script berikut ini pada file
data.php.
94
3. Membuat file get_pelanggan.php
Buat file baru di dalam folder penjualan dengan nama get_pelanggan.php. File
get_pelanggan.php digunakan untuk menampilkan data nama pelanggan dari tabel pelanggan
pada database berdasarkan id_pelanggan yang dikirim dari select box No. HP. Selanjutnya data
tersebut akan ditampilkan ke textfield Nama Pelanggan pada form entri/ubah data penjualan.
Ketikan script berikut ini pada file get_pelanggan.php.
4. Membuat file get_pulsa.php
Buat file baru di dalam folder penjualan dengan nama get_pulsa.php. File get_pulsa.php
digunakan untuk menampilkan data harga pulsa dari tabel pulsa pada database berdasarkan
id_pulsa yang dikirim dari select box Pulsa. Selanjutnya data tersebut akan ditampilkan ke
95
textfield Harga pada form entri/ubah data penjualan. Ketikan script berikut ini pada file
get_pulsa.php.
Buat file baru di dalam folder penjualan dengan nama insert.php. File insert.php
digunakan untukmelakukan proses insert data penjualan dari form entri data penjualan ke tabel
penjualan pada database. Ketikan script berikut ini pada file insert.php.
96
Buat file baru di dalam folder penjualan dengan nama get_data.php. File get_data.php
digunakan untuk menampilkan data penjualan dari tabel penjualan pada database berdasarkan
id_penjualan, yang selanjutnya data tersebut akan ditampilkan pada form ubah data penjualan.
97
Buat file baru di dalam folder penjualan dengan nama update.php. File update.php
digunakan untuk melakukan proses update data penjualan di tabel penjualan pada database
melalui form ubah data penjualan. Ketikan script berikut ini pada file update.php.
98
Buat file baru di dalam folder penjualan dengan nama delete.php. File delete.php
digunakan untuk melakukan proses delete data penjualan dari tabel penjualan pada database.
99
halaman Data Penjualan. Tampilannya akan terlihat seperti gambar berikut ini.
• Insert Data Penjualan
• View Data Penjualan
• Update Data Penjualan
100
• Delete Data Penjualan
ASESMEN SUMATIF III

A. PILIHAN BERGANDA
1. Apa singkatan dari "PHP"?
a. Personal Home Page
b. Preprocessed Hypertext Processor
c. PHP: Hypertext Preprocessor
d. Public Hosting Platform
2. Apa kegunaan utama dari PHP dalam pengembangan web?

A. Mengatur tampilan dan desain website.
B. Menangani interaksi antara pengguna dan server.
C. Mengelola database untuk penyimpanan data.
D. Memproses gambar dan multimedia.
3. Apa yang dimaksud dengan AJAX dalam konteks pengembangan web?

101
A. Bahasa pemrograman web untuk membuat tampilan interaktif.
B. Metode pengiriman data dari server ke browser tanpa harus memuat ulang halaman.
C. Format file untuk menyimpan data terstruktur.
D. Teknik enkripsi data sensitif dalam pengembangan web.
4. Bagaimana cara menggunakan AJAX dalam pengembangan web?

A. Dengan mengubah tampilan visual website menggunakan CSS.
B. Dengan menulis kode JavaScript untuk mengirim permintaan dan menangani respons
dari server.
C. Dengan menggunakan PHP untuk mengelola interaksi antara pengguna dan server.
D. Dengan mengatur database untuk menyimpan dan mengambil data.
5. Apa manfaat utama dari penggunaan AJAX dalam pengembangan web?

A. Mempercepat waktu muat halaman website.
B. Meningkatkan keamanan website dari serangan peretas.
C. Membuat tampilan website menjadi lebih menarik dan interaktif.
D. Mengurangi penggunaan memori pada server.
6. Apa perbedaan antara PHP dan AJAX?

A. PHP adalah bahasa pemrograman sementara AJAX adalah teknik dalam
pengembangan web.
B. PHP digunakan untuk membuat tampilan website, sementara AJAX digunakan untuk
mengelola interaksi pengguna.
C. PHP hanya bekerja di sisi server, sementara AJAX bekerja di sisi klien dan server.
D. PHP dan AJAX tidak berhubungan satu sama lain dalam pengembangan web.
102
103
BAB 4
DOKUMENTASI DAN PRESENSI WEB STATIS DAN DINAMIS
YANG TELAH DIKEMBANGKAN
A. HALAMAN LAPORAN PENJUALAN

Halaman Laporan Penjualan digunakan untuk menampilkan dan mencetak laporan data
penjualan pulsa. Pada halaman ini kita dapat menampilkan laporan data penjualan pulsa
berdasarkan filter tanggal penjualan. Laporan yang ditampilkan bisa perhari, perminggu, perbulan,
dan pertahun. Laporan dapat dicetak/export ke dalam format Ms. Excel. Untuk membuat halaman
Laporan Penjualan ikuti langkah- langkah berikut ini.
Buat file baru di dalam folder laporan dengan nama view.php. File view.php
merupakan file utama pada halaman Laporan Penjualan, yang berisikan script untuk membuat
form filter data penjualan berdasarkan tanggal penjualan, dan membuat view data penjualan
berdasarkan filter tanggal penjualan. Ketikan script berikut ini pada file view.php.
104
105
106
Buat file baru di dalam folder laporan dengan nama get_data.php. File get_data.php
digunakan untuk menampilkan data penjualan dari tabel penjualan pada database berdasarkan
tanggal, yang selanjutnya data tersebut akan ditampilkan pada halaman Laporan Penjualan.
107
3. Membuat file export.php
Buat file baru di dalam folder laporan dengan nama export.php. File export.php
digunakan untuk mengexport laporan data penjualan pulsa ke dalam format Ms. Excel. Ketikan
script berikut ini pada file export.php.
108
109
halaman Laporan Penjualan. Tampilannya akan terlihat seperti gambar berikut ini.
110
ASESMEN SUMATIF
ESSAY
1. Buatlah aplikasi penjualan yang dapat dipergunakan baik lingkungan sekolah, masyarakat
ataupun negara
111
DAFTAR PUSTAKA
Flanagan, David. (2011). JavaScript: The Definitive Guide. O'Reilly Media.
Duckett, Jon. (2014). HTML & CSS: Design and Build Websites. John Wiley & Sons.
Mitchell, John, & Elmore, Jon. (2018). Node.js 8 the Right Way: Practical, Server-Side JavaScript
That Scales. Pragmatic Bookshelf.
Powell, Thomas A. (2018). Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5.
O'Reilly Media.
Meyer, Eric A. (2007). CSS: The Definitive Guide. O'Reilly Media.
112

Modul Pendidikan Vokasi Kelas Xi

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 Pendidikan Vokasi Kelas Xi

Diunggah oleh

Hak Cipta:

Format Tersedia

1

SEKOLAH PRESTASI PRIMA

KATA PENGANTAR .......................................................................................................................... 2

BAHASA PEMROGRAMAN SERVER-SIDE ............................................................................. 6

A. DEFINISI PEMROGRMAN SERVER-SIDE ............................................................................ 6

B. PHP for Web Development ............................................................................................................... 8

C. KEUNGGULAN PHP ........................................................................................................................ 8

D. SERVER SIDE SCRIPTING ........................................................................................................... 9

E. CARA KERJA SERVER SIDE..................................................................................................... 11

ASEMEN SUMATIF 1 ................................................................................................................................... 13

IMPLEMENTASI FRAMEWORK PADA PEMBUATAN WEB STATIS DAN

A. Web Statis dan Dinamis .................................................................................................................. 16

C. Implementasi Framework pada pembuatan WEB Statis Dan Dinamis ............................ 19

D. Menampilkan Data dari Database MySQL Menggunakan PHP ........................................ 30

ASESMEN SUMATIF 2 ................................................................................................................................. 41

PEMBUATAN WEB STATIS DAN DINAMIS UNTUK BERAGAM KEBUTUHAN

A. Pengertian dan Konsep ................................................................................................................... 43

D. HALAMAN UTAMA ....................................................................................................................... 53

E. KONEKSI DATABASE ................................................................................................................. 59

F. HALAMAN BERANDA ............................................................................................................... 61

G. HALAMAN DATA PELANGGAN ............................................................................................. 66

H. HALAMAN DATA PULSA ........................................................................................................... 76

I. HALAMAN DATA PENJUALAN ............................................................................................... 87

ASESMEN SUMATIF III ........................................................................................................................... 101

BAB 4................................................................................................................................................... 104

DOKUMENTASI DAN PRESENSI WEB STATIS DAN DINAMIS YANG TELAH

A. HALAMAN LAPORAN PENJUALAN ................................................................................... 104

ASESMEN SUMATIF ................................................................................................................................. 111

DAFTAR PUSTAKA ...................................................................................................................... 112

A. DEFINISI PEMROGRMAN SERVER-SIDE

• 1995. PHP Tools V.1

• 1997. PHP Tools V.2

• 2008. GoPHP5 dan PHP 6 tidak rilis

B. PHP for Web Development

Server-side scripting merupakan bahasa pemrograman web yang pengolahannya dilakukan

• PHP : Hypertext preprocessor (PHP),

E. CARA KERJA SERVER SIDE

2. Mana yang merupakan bahasa pemrograman server-side?

4. Bahasa pemrograman server-side yang sering digunakan dalam pengembangan web

A. Web Statis dan Dinamis

• Hanya menggunakan HTML dan bisa dikolaborasikan dengan CSS

• Menggunakan bahasa pemrograman web (HTML, CSS dan JavaScript)

C. Implementasi Framework pada pembuatan WEB Statis Dan Dinamis

1. Buat File: index.html

2. Buat File: style.css

1. Buat Sebuah Folder.

• Buat folder misalkan "1tugascrud" bisa disesuaikan di htdocs C:\xampp\htdocs\

8. Konfigurasi Database Mysql dan Variable PHP

D. Menampilkan Data dari Database MySQL Menggunakan PHP

2. Pembuatan Tabel Data / Menampilkan Data Dari Database MySQL

<a href="<?= $WEB_CONFIG['base_url'] ?>index.php?page=add" class="btn btn-primary mb-3">

3. Menambahkan Data Ke Database MySQL (Create Data)

//PERPINDAHAAN PAGES WEBSITE

$query = "INSERT INTO user (nama,username,password,email) VALUES('$nama', '$username', '$password', '$email')";

//KONEKSI DATABASE DAN EKSEKUSI QUERY

<a href="<?= $WEB_CONFIG['base_url'] ?>" class="btn btn-warning mb-3">

Pada code <a class="btn btn-danger m1" href="javascript:alertDelete(&lt;?=

Sekarang buat file delete.php pada folder "operasi"

Buat file update.php didalam folder "operasi"

$query = "INSERT INTO user (nama,username,password,email) VALUES('$nama', '$username', '$password', '$email')";

//AMBIL ID PADA URL

//KONEKSI DATABASE DAN EXECUTE QUERY

Pada code <a class="btn btn-danger m1" href="javascript:alertDelete(<?=