0% menganggap dokumen ini bermanfaat (0 suara)

25 tayangan

Pemrograman Web PHP Dasar Database Mysql

Diunggah oleh

anggagautama

Hak Cipta

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

25 tayangan

Pemrograman Web PHP Dasar Database Mysql

Diunggah oleh

anggagautama

Hak Cipta

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

Anda di halaman 1/ 97

PEMROGRAMAN WEB PHP DASAR DATABASE MYSQLI DENGAN BOOTSTRAP

Penulis:
Agustinus Budi Santoso

Desain Cover:
Fawwaz Abyan

Tata Letak:
Handarini Rohana

Editor:
N. Rismawati

ISBN:
978-623-459-131-6

Cetakan Pertama:
Juli, 2022

Hak Cipta 2022, Pada Penulis

Hak Cipta Dilindungi Oleh Undang-Undang
Copyright © 2022
by Penerbit Widina Bhakti Persada Bandung
All Right Reserved

Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau

seluruh isi buku ini tanpa izin tertulis dari Penerbit.

PENERBIT:
WIDINA BHAKTI PERSADA BANDUNG
(Grup CV. Widina Media Utama)
Komplek Puri Melia Asri Blok C3 No. 17 Desa Bojong Emas
Kec. Solokan Jeruk Kabupaten Bandung, Provinsi Jawa Barat

Anggota IKAPI No. 360/JBA/2020

Website: www.penerbitwidina.com
Instagram: @penerbitwidina
PRAKATA

Rasa syukur yang teramat dalam dan tiada kata lain yang patut kami
ucapkan selain rasa syukur, karena berkat rahmat dan karunia-Nya buku yang
berjudul Pemrograman Web PHP Dasar Database MySQLi dengan Bootstrap
ini telah dapat di terbitkan untuk dapat dikonsumsi oleh khalayak banyak.
Website merupakan kumpulan halaman yang digunakan untuk menampilkan
informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan
dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk
satu rangkaian bangunan yang saling terkait, yang masing-masing
dihubungkan dengan jaringan-jaringan halaman.
Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi
untuk mendesain website responsive dengan cepat dan mudah. Bootstrap
dengan cepat meraih popularitas website di dunia ini, karena kesederhanaan
dan konsistensi yang ditawarkan Bootstrap dibanding framework lainnya saat
itu. Kemudahan yang ditawarkan oleh Bootstrap adalah Anda tak perlu coding
komponen website dari nol. Framework ini tersusun dari kumpulan file CSS
dan JavaScript berbentuk class yang tinggal pakai.
Server lokal membutuhkan beberapa instalasi seperti Apache, PHP dan
MySQL. Tetapi sering kali menjadi masalah kesulitan utama bagi pemula yang
baru belajar pemrograman web dengan PHP. Saat ini sudah tersedia Aplikasi
yang Free dan dapat digunakan untuk lebih mudah dalam menggunakan
Server Lokal.
Untuk itu maka dalam buku ini akan mengenalkan beberapa class dan
beberapa dari bagian bootstrap yang relatif lebih sering digunakan untuk
membuat projek. Memulai projek dengan mengenal boostrap dan CSS untuk
membangun aplikasi dan projek berdasarkan library yang lebih lengkap
berdasarkan URL https://getbootstrap.com/.
Pemrograman bootstrap dengan server lokal akan lebih mudah digunakan
dalam belajar. Penggunaan teori dasar pada HTML dan PHP dapat sebagai
landasan kita untuk berpikir sebagai developer aplikasi dan menggunakan
PhpMyadmin dan MySQL sebagai eksekusi pada akhir.
Oleh karena itu buku yang berjudul Pemrograman Web PHP Dasar
Database MySQLi dengan Bootstrap ini hadir sebagai bagian dari upaya untuk
menambah khazanah, diskusi Tantangan Pemrograman Web PHP Dasar
Database MySQLi dengan Bootstrap. Akan tetapi pada akhirnya kami
mengakui bahwa tulisan ini terdapat beberapa kekurangan dan jauh dari kata

iii
sempurna, karena sejatinya kesempurnaan hanyalah milik tuhan semata.
Maka dari itu, kami dengan senang hati secara terbuka untuk menerima
berbagai kritik dan saran dari para pembaca sekalian, hal tersebut tentu
sangat diperlukan sebagai bagian dari upaya kami untuk terus melakukan
perbaikan dan penyempurnaan karya selanjutnya di masa yang akan datang.
Terakhir, ucapan terimakasih kami sampaikan kepada seluruh pihak yang
telah mendukung dan turut andil dalam seluruh rangkaian proses
penyusunan dan penerbitan buku ini, sehingga buku ini bisa hadir di hadapan
sidang pembaca. Semoga buku ini bermanfaat bagi semua pihak dan dapat
memberikan kontribusi bagi pembangunan ilmu pengetahuan di Indonesia,
khususnya terkait Pemrograman Web PHP Dasar Database MySQLi dengan
Bootstrap.

Juli, 2022

Penulis

iv
DAFTAR ISI

PRAKATA ···································································································· iii

DAFTAR ISI··································································································· v
BAB 1 PENGENALAN WEBSITE DAN PHP ······················································· 1
A. Pengertian Website ················································································ 1
B. Sejarah PHP ···························································································· 1
C. Web Server ···························································································· 2
D. Install XAMPP Server Lokal ····································································· 3
BAB 2 FRAMEWORK BOOTSTRAP ································································· 9
A. Mengenal Apa itu Bootstrap ·································································· 9
B. Instalasi Bootstrap Awal ······································································· 10
C. Mengenal Form HTML ·········································································· 12
D. Form Layout ·························································································· 13
E. Form Input ···························································································· 14
F. Form Radio Button················································································ 17
G. Form Check Box ···················································································· 18
H. Form Button ·························································································· 19
I. Form Select ·························································································· 20
J. Form Validation ···················································································· 21
K. Tabel ····································································································· 21
BAB 3 STRUKTUR DASAR PHP ···································································· 27
A. Mengenal PHP ······················································································ 27
B. Tipe Data ······························································································ 27
C. Operator ······························································································· 33
D. Perulangan ··························································································· 35
BAB 4 MENGENAL FORM DAN DATABASE MYSQL ······································· 41
A. Mengenal Form ···················································································· 41
B. Menghubungkan Server Localhost ······················································· 42
C. Cara Insert Data dengan Form ke Database ········································· 43
D. Cara Menampilkan Data Tabel dari Database······································ 46
E. Cara Update & Delete Data ································································· 47
BAB 5 APLIKASI CRUD SEDERHANA PHP MYSQLI ········································· 53
A. Persiapan Data dan Desain Awal ························································· 53
B. Mengolah Template Bootstrap····························································· 54
C. Desain Database dan Tabel ································································· 55
D. Tampilan Menu····················································································· 59
E. Koneksi Database ················································································· 60

v
F. Halaman Petugas ·················································································· 60
G. Halaman Supplier ·················································································· 66
H. Halaman Pelanggan ·············································································· 72
I. Halaman Barang ··················································································· 78
DAFTAR PUSTAKA ······················································································ 88
PROFIL PENULIS ························································································· 89

vi
PENGENALAN WEBSITE DAN PHP

A. PENGERTIAN WEBSITE
Website merupakan kumpulan halaman yang digunakan untuk
menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan
atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling terkait, yang masing-
masing dihubungkan dengan jaringan-jaringan halaman.
Website juga dapat dikatakan sebagai kumpulan halaman dalam suatu
domain yang memuat tentang berbagai informasi agar dapat dibaca dan
dilihat oleh pengguna internet melalui sebuah mesin pencari. Informasi yang
dapat dimuat dalam sebuah website umumnya berisi mengenai konten
gambar, ilustrasi, video, dan teks untuk berbagai macam kepentingan.
Biasanya untuk tampilan awal sebuah website dapat diakses melalui
halaman utama (homepage) menggunakan browser dengan menuliskan URL
yang tepat. Di dalam sebuah homepage, juga memuat beberapa halaman
web turunan yang saling terhubung satu dengan yang lain.

B. SEJARAH PHP
Penemuan website dimulai ketika Berners merasakan masalah atau
kesulitan soal bagaimana berbagi informasi satu sama lain. Pada Oktober
1990, Berners menulis tiga teknologi dasar hingga kini menjadi dasar web
dibuat (yang juga muncul pada bagian-bagian browser web Anda).
Ketiganya yaitu:
- HTML: HyperText Markup Language. HTML adalah bahasa format buat
web.
- URI: Uniform Resource Identifier. Semacam “alamat” yang unik. Fungsinya
untuk mengidentifikasi ke setiap sumber daya yang ada di web. Kini lebih
awam disebut URL.
- HTTP: Hypertext Transfer Protocol. Memungkinkan Anda untuk
mengambil kembali sumber daya yang terhubung dari seluruh web.

Berners juga menulis halaman web editor/browser pertama

(“WorldWideWeb.app”) serta server web pertama (“httpd”). Pada akhir tahun
1990, halaman web pertama akhirnya disediakan di internet secara terbuka.
Tahun 1991, orang-orang di luar CERN, termasuk orang awam, juga diundang
untuk bergabung dengan komunitas web baru ini. Dengan demikian, awal
mula lahirnya website adalah sebagai media atau alat komunikasi otomatis
untuk berbagi informasi antar ilmuwan di berbagai belahan dunia.
Tim Berners Lee membuka website untuk publik pada 6 Agustus 1991.
Tahun 1994, ia mendirikan World Wide Web Consortium yang berfungsi
mengembangkan protokol dan guideline untuk memastikan pertumbuhan
jangka panjang website. Sejarah website dimuat di laman Cern sebagai rumah
website pertama (home of the first website).

C. WEB SERVER
1. Pengertian Server atau Web server
Server atau Web server adalah sebuah software yang memberikan
layanan berbasis data dan berfungsi menerima permintaan dari HTTP atau
HTTPS pada klien yang dikenal dan biasanya kita kenal dengan nama web
browser (Mozilla Firefox, Google Chrome) dan untuk mengirimkan kembali
yang hasilnya dalam bentuk beberapa halaman web dan pada umumnya akan
berbentuk dokumen HTML.

2. Fungsi Server atau Web Server

Fungsi utama Server atau Web server adalah untuk melakukan atau akan
mentransfer berkas permintaan pengguna melalui protokol komunikasi yang
telah ditentukan sedemikian rupa. halaman web yang diminta terdiri dari
berkas teks, video, gambar, file dan banyak lagi. pemanfaatan web server
berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah
halaman web termasuk yang di dalam berupa teks, video, gambar dan banyak
lagi.
Salah satu contoh dari Web Server adalah Apache. Apache (Apache Web
Server – The HTTP Web Server) merupakan web server yang paling banyak
dipergunakan di Internet. Program ini pertama kali didesain untuk sistem
operasi lingkungan UNIX. Apache mempunyai program pendukung yang
2 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
cukup banyak. Hal ini memberikan layanan yang cukup lengkap bagi
penggunanya.

D. INSTALL XAMPP SERVER LOKAL

Server lokal membutuhkan beberapa instalasi seperti Apache, PHP dan
MySQL. Tetapi seringkali menjadi masalah kesulitan utama bagi pemula yang
baru belajar pemrograman web dengan PHP. Saat ini sudah tersedia Aplikasi
yang Free dan dapat digunakan untuk lebih mudah dalam menggunakan
Server Lokal.
XAMPP merupakan suatu aplikasi yang memungkinkan membuat web
server lokal untuk melakukan pembuatan projek secara lokal. Beberapa orang
menggunakan XAMPP karena aplikasi ini mudah dan sangat mudah untuk
dijalankan. Selain itu, XAMPP dapat digunakan di berbagai platform, mulai
dari Apache, MySQL, PHP, hingga Perl. Walaupun XAMPP dapat dijalankan di
Mac dan Linux, tapi di tutorial ini kami hanya akan membahas tentang cara
instal XAMPP di Windows.

a. Proses Instalasi XAMPP

1. Proses download pada XAMPP pada versi terbaru dapat download/
unduh pada website resmi pada alamat berikut
https://www.apachefriends.org/download.html

Terdapat pilihan untuk download versi XAMPP untuk windows silahkan

download versi sesuai dengan kebutuhan.

Pengenalan Website dan PHP | 3

Simpan dan jalankan installer untuk dapat proses selanjutnya

2. Install XAMPP
setelah selesai mengunduh file Exe, maka dapat segera doble klik untuk
melanjutkan Install. Selama proses instalasi akan melihat pesan yang
menanyakan apakah Anda yakin akan menginstallnya. Silakan tekan Next
untuk melanjutkan instalasi.

4 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Memilih komponen apa saja yang akan di install, jika standar maka dapat
lakukan Next untuk melanjutkan. Jika tidak menginginkan komponen
maka dapat menghilangkan centang pada pilihan tersebut.

Lokasi penyimpanan instalasi dapat ditentukan sendiri pada default pada

pilihan di C:\xampp, tetapi dapat diganti dengan keperluan masing-
masing yang akan digunakan.

Pengenalan Website dan PHP | 5

Pemilihan Bahasa untuk pengoperasian. Bahasa dapat dirubah melalui
pilihan language untuk melakukan pengaturan.

Lanjutkan Next untuk install XAMPP

6 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Klik Next untuk melanjutkan proses Install

Ketika Sudah selesai klik Finish dan buka XAMPP Control Panel, klik Start
pada Module Apache dan MySQL

Pengenalan Website dan PHP | 7

Untuk mengakses dengan server local dapat buka browser dan ketik
Localhost

8 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

FRAMEWORK BOOTSTRAP

A. MENGENAL APA ITU BOOTSTRAP

Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi
untuk mendesain website responsive dengan cepat dan mudah. Bootstrap
dengan cepat meraih popularitas website di dunia ini, karena kesederhanaan
dan konsistensi yang ditawarkan Bootstrap dibanding framework lainnya saat
itu. Kemudahan yang ditawarkan oleh Bootstrap adalah Anda tak perlu coding
komponen website dari nol. Framework ini tersusun dari kumpulan file CSS
dan JavaScript berbentuk class yang tinggal pakai.
Bootstrap memiliki Class yang cukup lengkap. Mulai dari class untuk
layout halaman, class menu navigasi, class animasi, dan masih banyak lainnya.
Bootstrap bersifat responsive berkat grid system yang digunakan. Sistem grid
pada bootstrap menggunakan rangkaian containers, baris, dan kolom untuk
menyesuaikan bentuk layout dan konten website. Dengan kata lain, Bootstrap
memiliki tampilan website dan konsisten di berbagai perangkat yang
mengakses website. Baik melalui smartphone, tablet, atau laptop/PC.
Untuk itu maka dalam buku ini akan mengenalkan beberapa class dan
beberapa dari bagian bootstrap yang relatif lebih sering digunakan untuk
membuat projek. Memulai projek dengan mengenal boostrap dan CSS untuk
membangun aplikasi dan projek berdasarkan library yang lebih lengkap
berdasarkan URL https://getbootstrap.com/
B. INSTALASI BOOTSTRAP AWAL
Bootstrap sudah disediakan dan dapat di unduh pada alamat bootstraps
https://getbootstrap.com/ dan pada tombol download. Letakkan hasil
download di folder htdocs/bootstrap pada XAMPP dan extract file.

Persiapkan dengan control panel XAMPP dengan start Apache dan MySQL

Setelah berhasil start maka dapat mencoba mengakses halaman dengan

membuka browser dengan alamat localhost/bootstrap/

Maka akan tampil halaman dengan gambar seperti diatas.

10 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Untuk file Editor dapat menggunakan Notepad++/Visual Studio Code
dapat di unduh pada website resmi

Untuk library CSS dan JavaScript kita dapat menggunakan secara online
dengan menggunakan booststrap CDN

Atau link CDN berikut

Silahkan dapat diletakkan pada bagian <head> dan lengkapi struktur

HTML
Simpan dengan file starter.php

Framework Bootstrap | 11
Hasil Preview HTML

C. MENGENAL FORM HTML

Form adalah bentuk halaman pada web yang digunakan untuk menerima
masukan dari pengguna, selanjutnya input dari pengguna tersebut diolah
menggunakan bahasa pemrograman dan dapat dikirim dengan 2 method
POST dan GET, dan akan diproses pada sisi server ataupun disisi Client.
Form dibagi menjadi 3 tipe layout
 Vertical form
 Horizontal form
 Inline form

Contoh HTML FORM:

<form name="form1" methode="POST" action="">
<div class="form-group">
<label for="Nama">Nama:</label>
<input type="text" class="form-control" id="Nama">
</div>
<div class="form-group">
<label for="Alamat">Alamat:</label>
<input type="text" class="form-control"
id="Alamat">
</div>
<button type="submit" class="btn btn-
primary">Submit</button>
</form>

12 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Letakkan pada bagian <body>

Hasil program:

D. FORM LAYOUT
Bootstrap memiliki Sistem Grid yang telah ditetapkan yaitu 12 kolom di
seluruh halaman yang ada. Jika tidak memerlukan 12 kolom tersebut maka
dapat menjadi 1 kolom yang lebar.

Framework Bootstrap | 13
Grid options
Sistem Grid di bootstrap dapat memiliki beberapa breakpoint yang dapat
di rubah dan disesuaikan sesuai kebutuhan. Ada beberapa seperti berikut
 Extra small (xs)
 Small (sm)
 Medium (md)
 Large (lg)
 Extra large (xl)
 Extra extra large (xxl)

Untuk menggunakan sistem grid pada 12 kolom dapat menggunakan

sebagai berikut . = col-md-12
<div class="col-md-12">
.col-md-12
</div>

Angka 12 dapat digunakan pada pembagian layar dengan menggunakan 1

layar penuh. Jika menggunakan layar setengah dapat pula menggunakan
perbandingan col-md-6 dan col-md-6 untuk membagi 2 layar sama besar.
Berdasarkan contoh pada pembagian Grid diatas.

E. FORM INPUT
Input atau bagian dari masukkan untuk proses penyimpanan data atau
bisa digunakan perhitungan merupakan komponen yang memiliki banyak
type atau kegunaan masing-masing. Blok input text adalah sebagai berikut:
<input type="text" name="name" id="name">

a. Input Text
Input text biasanya digunakan untuk masukkan berbentuk teks atau
keterangan campuran mengenai angka. Biasanya bisa digunakan untuk nama,
alamat, dan lainnya dengan menuliskan type=”text”.
Blok untuk input text seperti berikut
<div class="form-group">
<label for="Nama">Nama:</label>
<input type="text" name="Nama" class="form-control">
</div>

14 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Hasil:

Pada input text ini ada 4 macam yang biasa digunakan yaitu normal,
readonly, disabled dan plain text. Penggunaan dengan menambahkan pada
kontrol input.

b. Input Password
Type password digunakan untuk melakukan konfirmasi kata kunci/
password aplikasi yang berfungsi untuk mengamankan karakter yang kita
inputkan untuk disembunyikan dengan menuliskan type=”Password”.
Contoh:
<div class="form-group">
<label for="Passwd">Password:</label>
<input type="Password" name="Passwd" class="form-control">
</div>

Hasil:

c. Input Date/Tanggal
Type Date digunakan untuk pemilihan tanggal dan auto dikonversi ke
local time zone sesuai dengan perangkat masing-masing menghasilkan pilihan
tanggal yang berformat hari/bulan/tahun dan jika diklik akan menghasilkan
tampilan calendar. Penggunaan variabel dapat menggunakan type=“date”
Contoh:
<div class="form-group">
<label for="Tanggal">Tanggal:</label>
<input type="date" name="tgl" class="form-control">
</div>

Framework Bootstrap | 15
Hasil:

d. Input Number
Type Number merupakan masukkan hanya berupa angka. sebelah kanan
nanti akan muncul tombol atas dan bawah untuk menambah dan mengurangi
angka. Type Number memiliki set minimal dan maximal serta bisa diset juga
step yang ditambahkan atau dikurangkan saat klik tombol sebelah kanan
dengan menuliskan type=”number”.
Contoh:
<div class="form-group">
<label for="Number">Number :</label>
<input type="number" min="5" max="10" name="Number"
class="form-control">
</div>

Hasil:

e. Input Email
Type email akan secara otomatis melakukan validasi terhadap jenis email
dengan isian valid yang akan dicek kembali saat form di kirim. Ketika
mengisikan bukan jenis input email maka akan ada peringatan untuk
mengisikan inputan berjenis email.
Penggunaan variabel dapat menggunakan type=”email”.

16 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Contoh:
<div class="form-group">
<label for="Email">Email :</label>
<input type="email" name="Email" class="form-control">
</div>

Hasil:

F. FORM RADIO BUTTON

Terdapat kesamaan dan perbedaan mengenai check box dan radio button.
Untuk kesamaan dapat digunakan pada pemilihan item/pilihan/opsi yang
disediakan oleh pengembangan aplikasi. Perbedaan keduanya adalah pada
jumlah pilihan. Jika checkbox dapat memilih lebih dari 1 pilihan, tetapi radio
grup/radio button hanya dapat memilih 1 pilihan saja.
Untuk penulisan dapat menggunakan type="radio"

Contoh:
<div class="form-group">
<label for="Email">Jenis Kelamin :</label>
<div class="col-md-12">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="rdjenis"
checked> Laki-Laki
</label>
</div>
<div class="col-md-12">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="rdjenis">
Perempuan
</label>
</div>
</div>

Framework Bootstrap | 17
Hasil:

G. FORM CHECK BOX

Sedangkan untuk Check Box dapat memilih dari beberapa pilihan Input.
Hampir mirip dengan radio button bedanya checkbox bisa dipilih lebih dari
satu dan sesuai dengan pengembangan aplikasi. berikut adalah contoh
kodenya penulisan dapat menggunakan type="checkbox"
Contoh:
<div class="form-group">
<label for="Email">Menu makanan :</label>
<div class="col-md-12">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
value="" checked> Bakmie Goreng
</label>
</div>
<div class="col-md-12">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
value=""> Ayam Bakar
</label>
</div>
<div class="col-md-12">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
value=""> Nasi Goreng
</label>
</div>
</div>

Hasil:

18 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

H. FORM BUTTON
Penggunaan button dapat memiliki berbagai fungsi.
a. Dapat digunakan untuk Button dengan link untuk berpindah layar dengan
gabungan html <a href=””>.
b. Sebagai tombol eksekusi untuk memproses seperti simpan/hitung/
proses yang lanjutan dengan bentuk form POST/GET.
c. Sebagai tombol untuk reset form dengan type reset.

berikut adalah contoh kodenya penulisan dapat menggunakan

type="button"
Contoh:
<div class="form-group">
<label for="Email">Type Button :</label>
<div class="col-md-12">
<button class="btn btn-warning" type="button">
Button biasa
<i class="ace-icon fa fa-signal"></i>
</button>

<a href="#"><button class="btn btn-primary"

type="button">
Button Link
<i class="ace-icon fa fa-signal"></i>
</button></a>

<button class="btn btn-success"

type="submit">Button submit
<i class="ace-icon fa fa-signal"></i>
</button>
</div>
</div>

Hasil:

Framework Bootstrap | 19
I. FORM SELECT
Select atau pilihan dapat digunakan menggunakan dropdown yang ada
pada pemilihan yang hanya 1 (satu) pilihan. Yang dapat digunakan dengan
beberapa pilihan. berikut adalah contoh kodenya penulisan dapat
menggunakan <select>
Contoh:
<div class="form-group">
<label for="Email">Pilih Kategori :</label><br>
<div class="col-md-4">
<select class="form-control" name="kgt">
<option
value="Makanan">Makanan</option>
<option
value="Minuman">Minuman</option>
<option
value="Akesori">Akesori</option>
<option
value="Sayur">Sayur</option>
</select>
</div>
</div>

Hasil:

Jika di buka seperti berikut:

20 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

J. FORM VALIDATION
Validasi digunakan pada pemrograman untuk mengetahui bahwa input
yang diterima sudah sesuai atau belum. Dengan notifikasi “Please fill out this
field” maka ada indikasi bahwa isian sedang kosong. Atau jika mengisikan
kolom type email dengan tulisan biasa maka akan peringatan untuk
memberitahukan mengisi dengan isian berjenis email. berikut adalah contoh
kodenya penulisan dapat menggunakan required pada komponen
Contoh:
<div class="form-group">
<label for="Nama">Nama :</label>
<input type="text" required name="Nama" class="form-
control">
</div>
<div class="form-group">
<label for="Email">Email :</label>
<input type="email" required name="Email" class="form-
control">
</div>

Hasil:

K. TABEL
Tempat data atau media sebagai data baris dapat ditampilkan dengan
Tabel. Penggunaan tabel juga dipermudah dengan menggunakan library
bootstrap yang mudah digunakan dalam class. Terdapat beberapa konteks
class yang dapat digunakan di dalam membangun tabel. Menggunakan class
berupa class =” table” . beberapa pilihan sebagai berikut:
- class="table" = Digunakan memanggil class bentuk tabel
- class=" table table-responsive" = Digunakan untuk tabel responsive
menyesuaikan lebar dan mengecil sesuai lebar layar.

Framework Bootstrap | 21
Contoh:
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>Jl. Merpati no 12 Rt.03 / Rw.02</td>
</tr>
<tr>
<td>2</td>
<td>Bunga</td>
<td>Jl. Anggrek IV no 12 Rt.02 /
Rw.03</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>Perum Vila Hijau Blok A3</td>
</tr>
</tbody>
</table>

Hasil:

- class="table table-striped" = penambahan Striped/warna strip pada setiap

tabel dengan selang-seling.

22 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Contoh:
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>Jl. Merpati no 12 Rt.03 / Rw.02</td>
</tr>
<tr>
<td>2</td>
<td>Bunga</td>
<td>Jl. Anggrek IV no 12 Rt.02 / Rw.03</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>Perum Vila Hijau Blok A3</td>
</tr>
</tbody>
</table>

Hasil:

- class="table table-bordered" = digunakan untuk menambahkan garis

border setiap cell pada tabel. Dapat di kombinasikan juga dengan table-
striped.

Framework Bootstrap | 23
Contoh:
<table class=" table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>Jl. Merpati no 12 Rt.03 / Rw.02</td>
</tr>
<tr>
<td>2</td>
<td>Bunga</td>
<td>Jl. Anggrek IV no 12 Rt.02 / Rw.03</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>Perum Vila Hijau Blok A3</td>
</tr>
</tbody>
</table>

Hasil:

- class="table table-hover" = digunakan untuk memberikan tanda/garis

stiped saat mouse melintas di baris tabel/hover.

24 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Contoh:
<table class=" table table-hover ">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>Jl. Merpati no 12 Rt.03 / Rw.02</td>
</tr>
<tr>
<td>2</td>
<td>Bunga</td>
<td>Jl. Anggrek IV no 12 Rt.02 / Rw.03</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>Perum Vila Hijau Blok A3</td>
</tr>
</tbody>
</table>

Hasil:

Pada tanda No 1 dengan Nama Alex terdapat garis pada baris tabel yang
berwarna abu-abu. Apabila di geser menuju baris lainnya maka tanda akan
mengikuti mouse.

Framework Bootstrap | 25
26 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
STRUKTUR DASAR PHP

A. MENGENAL PHP
Saat ini apakah kita mengerti arti dari PHP itu sendiri ? Ya. PHP
Merupakan singkatan dari PHP: Hypertext Prepocessor. Pada sejarahnya
dibuat Pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1994. PHP sendiri
memiliki ciri khas blok penulisan dalam pemrogramannya sebagai berikut:
 <? dan ?>
 <?php dan ?>
 <script language=”php”> dan </script>
 <% dan %>
 Penulisan bahasa pemrograman pada penulisan biasanya diakhiri dengan
titik-koma (;). Untuk mengakhiri dari satu perintah sebelum ke perintah
lainnya.
 Memiliki ciri khas CASE SENSITIVE untuk nama identifier yang dibuat oleh
user dengan simbol $ dan pemanggilan ulang sebagai contoh
Bahwa $Nama tidak sama dengan $NAMA dan $nama karena memiliki
Case sensitive sendiri.

B. TIPE DATA
Terdapat beberapa tipe data dalam pemrograman PHP. Pada dasarnya
PHP akan otomatis mengenali tipe data secara otomatis jika sesuai dengan
kebutuhan yang akan di inginkan. Berikut 5 tipe data utama/dasar dalam
pemrograman PHP.
 Tipe data Integer
Tipe data yang pertama adalah integer. Tipe data ini biasa digunakan
untuk menyimpan bilangan bulat dan dapat dioperasikan untuk operator
aritmatika. Cara kerja tipe data integer dengan membuat variabel dengan tipe
integer kemudian menampilkan perintah echo. Atau dengan proses yang
akhirnya dapat di set value awal. Untuk menampilkan tipe data dari suatu
variabel dapat menggunakan var_dump. Dengan demikian akan
menampilkan hasil dari suatu variabel dan menampilkan bentuk tipe data dari
nilai variabel itu sendiri.

Contoh:
<div class="col-md-12">
<b>Tipe Data Integer </b><br>
<?php
// Pengenalan dan Nilai Variabel Awal
$a = 10;
$b = 5;
$c = $a + 5;
$d = $b + (10 * 5);
$e = $d - $c;

// Panggil Nilai dari Variabel

echo "Nilai Variabel a: {$a} <br>";
echo "Nilai Variabel b: {$b} <br>";
echo "Nilai Variabel c: {$c} <br>";
echo "Nilai Variabel d: {$d} <br>";
echo "Nilai Variabel e: {$e} <br>";

// mengetahui tipe data dari variabel

var_dump($e);
?>
</div>

Hasil:

28 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

 Tipe data Float
Jenis tipe data float, cara penggunaan hampir sama dengan integer.
Tetapi memiliki perbedaan bahwa tipe data Float menerima bilangan selain
bulat (pecahan, desimal).
Contoh bilangan pecahan atau desimal dapat dimasukkan dengan contoh
berikut:
Var_a = 1.00;
Var_b = 2.58;
Var_c= 3.23495;

Dengan bilangan tersebut dapat ditampung dalam Float atau pecahan.

Perhatikan contoh berikut:

Contoh:
<div class="col-md-12">
<b>Tipe Data Float </b><br>

<?php
// Pengenalan dan Nilai Variabel Awal
$Alas = 3;
$Tinggi = 5;
$LuasSegitiga = 0.5 * $Alas * $Tinggi;

// Panggil Nilai dari Variabel

echo "Alas = $Alas <br>";
echo "Tinggi = $Tinggi <br>";
echo "Luas Segitiga = $LuasSegitiga <br>";

?>
</div>

Hasil:

 Tipe data Boolean

Jenis Tipe data boolean memiliki nilai true atau false. Tipe data ini
termasuk data yang mudah dan simpel, tetapi memerlukan beberapa
penggunaan yang dapat dicampurkan dengan beberapa nilai kebenaran atau
logika OR/AND.

Struktur Dasar PHP | 29

Berikut ini contoh penggunaan Boolean:
Contoh:
<div class="col-md-12">
<b>Tipe Data Boolean </b><br>

<?php
$a = true;
$b = false;

if($a==true){
echo "Nilai a adalah True";
}else{
echo "Nilai a adalah False";
}
?>
</div>

Hasil:

 Tipe data String

Jenis Tipe data string merupakan tipe data yang dipakai untuk jenis data
teks/huruf. Penulisan teks tersebut memakai tanda petik satu ('') atau tanda
petik dua ("") dalam penulisan variabel awal ataupun. Sebelumnya kita telah
berkali kali menggunakan tipe teks ini ketika kita memanggil fungsi echo
dalam php yang diikuti setelahnya dengan teks. Tetapi data string tersebut
tidak kita simpan ke dalam sebuah variabel.

30 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Beberapa contoh penulisan dengan echo dengan menggabungkan
beberapa variabel dapat kita tuliskan sebagai berikut:
Perhatikan kode program berikut:
Contoh:
<div class="col-md-12">
<b>Tipe Data String </b><br>

<?php
//Penulisan petik dua ""
$String1 = "Rumah Saya";

//Penulisan petik satu ''

$String2 = 'Jalan Merpati No 2.';

//Menggabungkan String
$String3 = $String1.' '.$String2;

echo 'Nilai String1 = '.$String1.'<br>';

echo 'Nilai String2 = '.$String2.'<br>';
echo 'Nilai String3 = '.$String3.'<br>';

?>
</div>

Hasil:

 Tipe data Array

Array bukan jenis tipe data dasar seperti integer atau boolean, Array
merupakan tipe data yang terdiri dari kumpulan tipe data lainnya.
Menggunakan array dapat memudahkan dalam membuat kelompok data,
serta menghemat penulisan dan penggunaan variabel.

Struktur Dasar PHP | 31

Misalnya kita memerlukan 10 nama siswa, maka penulisan PHPnya jika
tanpa array sebagai berikut:
Contoh:
<?php
$siswa0="Alex";
$siswa1="Budi";
$siswa2="Cindy";
$siswa3="Doni";
$siswa4="Erik";
//... dst sampai $siswa10
?>

Penulisan program diatas menjadi lebih rapi jika ditulis ke bentuk array,
karena hanya memerlukan 1 variabel untuk menampung nilai. Berikut contoh
menggunakan array:
$nama_variabel = array(
key => value,
key2 => value2,
key3 => value3,
...
)

Contoh:
<div class="col-md-12">
<b>Tipe Data Array </b><br>
<?php
$siswa = array (
0=>"Alex",
1=>"Budi",
2=>"Cindy",
3=>"Doni",
4=>"Erik",);
//... dst sampai 10

//memanggil / mencetak
echo $siswa[0]; //Alex
echo "<br />";
echo $siswa[1]; //Budi
echo "<br />";
echo $siswa[2]; //Cindy
?>
</div>

32 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Hasil:

Jenis Tipe data array bisa digunakan untuk menyimpan himpunan data.
Himpunan data tersebut diapit oleh tanda kurung siku ([]). Untuk mengisi
variabel array, kita bisa menggunakan indeks. Indeks dimulai dari 0. Sehingga
jika menampilkan nama pertama dari variabel $listMotor, dapat
menggunakan indeks 0 contoh berikut:
Sebagai contoh, saya memiliki 3 Data Motor, dan ditampilkan ketiga
nama motor dalam variabel dapat dengan menggunakan tipe data array
sebagai berikut:

Contoh:
[
{
"idmotor": "1",
"kdmotor": "VRCT15",
"nama": "Vario Techno",
"harga": "18000000"
},
{
"idmotor": "2",
"kdmotor": "BT01",
"nama": "Beat Sporty New",
"harga": "16000000"
},
{
"idmotor": "3",
"kdmotor": "SCPY",
"nama": "Honda scoopy",
"harga": "21000000"
}
]

C. OPERATOR
Pemrograman PHP dapat menggunakan Operator aritmatika. Operator
itu sendiri merupakan operator untuk melakukan operasi aritmatika.
Operator aritmatika sebagai berikut:

Struktur Dasar PHP | 33

Operator Simbol
Penjumlahan +
Pengurangan -
Perkalian *
Pemangkatan **
Pembagian /
Sisa Bagi %

Contoh:
<div class="col-md-12">
<b>Operator Aritmatika</b><br>
<?php
$a = 7;
$b = 2;

// penjumlahan
$c = $a + $b;
echo "$a + $b = $c";
echo "<br>";

// pengurangan
$c = $a - $b;
echo "$a - $b = $c";
echo "<br>";

// Perkalian
$c = $a * $b;
echo "$a * $b = $c";
echo "<br>";

// Pembagian
$c = $a / $b;
echo "$a / $b = $c";
echo "<br>";

// Sisa bagi
$c = $a % $b;
echo "$a % $b = $c";
echo "<br>";

// Pangkat
$c = $a ** $b;
echo "$a ** $b = $c";
echo "<br>";
?>
</div>

34 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Hasil:

D. PERULANGAN
Memahami bentuk perulangan dalam PHP memiliki 4 jenis. Berikut
penjelasan mengenai perulangan dalam PHP.
a. Perulangan For
Perulangan For merupakan perulangan yang termasuk dalam perulangan
yang kita bisa menentukan jumlah perulangannya.
Blok Perulangan FOR
<?php

for ($i = 0; $i < 5; $i++){

//letakan disni yg akan di ulang.
}

Ada 3 yang diperhatikan dalam perulangan FOR

- $i = 0; merupakan Nilai awal
- $i < 5; merupakan Nilai batas maksimal dalam perulangan.
- $i++ merupakan increment atau dapat menggunakan increment
perubahan sendiri misal $i= $i +2;

Blok Perulangan FOR untuk mengulang 5x

<div class="col-md-12">
<b>Perulangan FOR</b><br>
<?php
for($i = 0; $i < 5; $i++){
echo "Perulangan FOR ke-$i <br>";
}
?>
</div>

Struktur Dasar PHP | 35

Hasil:

b. Perulangan While
Bentuk Perulangan while merupakan perulangan yang tidak dapat di
hitung. Dikatakan tidak dapat dihitung karena akan mengulang sampai syarat
terpenuhi atau belum jelas kapan berhenti. Tetapi juga dapat digunakan
seperti FOR yang diberikan batas perulangan.
Bentuk dasar Blok Perulangan FOR
<?php

while (<kondisi>){
// blok perulangan.
}

Terdapat kondisi, kondisi tersebut di isi batas perulangan yang akan

membuat perulangan berhenti. Syarat tersebut jangan sampai berlawanan
dengan syarat perulangan yang dapat menyebabkan tak terhingga.

Blok Perulangan WHILE untuk mengulang 5x

<div class="col-md-12">
<b>Perulangan FOR</b><br>
<?php

$i = 0;
while($i < 5){
echo "Perulangan WHILE ke-$i <br>";
$i++;
}
?>
</div>

36 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Hasil:

c. Perulangan Do-While
Jenis Perulangan Do-While hampir mirip dengan perulangan while karena
tergolong dalam uncounted loop atau dengan kata lain perulangan yang tidak
dapat di hitung. Perbedaan Do-While dengan while adalah pada cara
bagaimana memulai logika pengulangan. Cara memulai Perulangan Do-While
akan melakukan pengulangan sebanyak 1 kali terlebih dahulu kemudian
melakukan pengecekan syarat kondisi untuk melakukan perulangan
selanjutnya. Sebaliknya saat memulai perulangan while akan melakukan
pengecekan kondisi terlebih dahulu, kemudian melakukan perulangan.
Bentuk dasar perulangan Do-While:
<?php

do {
// blok yang diulang
} while (<kondisi>);
?>

Terdapat kondisi, kondisi tersebut di isi batas perulangan di cek terlebih

dahulu untuk melanjutkan perulangan selanjutnya.

Blok Perulangan Do-While untuk mengulang 5x

<div class="col-md-12">
<b>Perulangan Do-While</b><br>
<?php

$i = 5;
do {
echo "Perulangan WHILE ke-$i <br>";
$i--;
} while ($i > 0);
?>
</div>

Struktur Dasar PHP | 37

Hasil:

d. Perulangan For Each

Perulangan selanjutnya adalah foreach, bentuk perulangan ini sama
dengan perulangan for. Tetapi ada perbedaan khusus hanya digunakan untuk
array.
Bentuk dasar perulangan foreach:
<?php

foreach($array as $dataArray){
echo $ dataArray;
}

Blok Perulangan Do-While untuk mengulang 5x

<div class="col-md-12">
<b>Perulangan Foeach</b><br>
<?php
$arrayMotor = [
"Honda CBR",
"Yamaha YZR",
"Suzuki GSR",
"Kawazaki Ninja"
];

echo "Data Motor : <br>";

$i = 0;
foreach($arrayMotor as $dataMotor){
$i++;
echo "$i $dataMotor</br>";
}
?>
</div>

38 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Hasil:

Struktur Dasar PHP | 39

40 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
MENGENAL FORM DAN DATABASE MYSQL

A. MENGENAL FORM
Form digunakan dalam PHP seperti pada penjelasan bab sebelumnya
sudah di jelaskan bahwa digunakan untuk bagaimana menangkap data yang
akan di input, diolah, atau di edit. Form sendiri juga memiliki 2 metode dalam
pengoperasian beserta beberapa komponen yang perlu di perhatikan. Berikut
komponen yang perlu di setting dalam melakukan form.
a. name = digunakan untuk pemberian nama form, atau sebagai pemberi
identitas form tersebut.
b. id = digunakan untuk pemrosesan form pada javacript. Boleh digunakan
boleh tidak. Jika menggunakan native biasanya id tidak diikutkan.
c. action = tempat untuk melakukan eksekusi form. Jika eksekusi action
form jika di kosongkan akan dilakukan pada halaman tempat form itu
berdada. Apabila di isikan, maka menuju halaman atau alamat file yang
akan dituju.

Pada bab II sudah dijelaskan contoh HTML FORM. Tetapi pada kali ini
akan kita bahas lebih lanjut. Berikut contoh simple blok form dalam PHP.
Contoh FORM:
<form id="form1" name="form1" method="POST" action="">
…… //komponen HTML
</form>
Pada method FORM terdapat 2 yaitu POST dan GET. Pastikan jika POST
digunakan untuk mengirim data pada penanganan Form. Selanjutnya kita
gunakan form untuk proses lebih lanjut pada input data.

B. MENGHUBUNGKAN SERVER LOCALHOST

Server lokal atau sering disebut dengan Localhost dapat digunakan untuk
berbagai macam pengolahan pemrograman. Salah satunya adalah
pemrograman website dengan PHP. Untuk dapat tersambung dengan server
lokal maka ada beberapa variabel yang harus dipenuhi untuk dapat
tersambung pada server lokal.
Proses yang perlu disiapkan adalah sebagai berikut:
a. XAMPP = sudah terinstall (langkah ikuti bab 1)
b. Database = db_latihan_bootstrap
c. File php = koneksidb.php

Buat file terlebih dahulu dengan nama koneksidb.php pada htdocs

C:\xampp73\htdocs\bootstrap\bab4
<?php
$server = "localhost";
$database = "db_latihan_bootstrap";
$username = "root";
$password = "";
$koneksidb = mysqli_connect($server, $username,
$password, $database);
?>

Penjelasan:
a. $server = lokasi server berada, jika pada 1 komputer gunakan “localhost”,
jika pada komputer dan terhubung jaringan dapat gunakan dengan
alamat IP misalnya 192.168.1.1
b. $databsase = nama database yang telah dibuat.
c. $username = nama user ada XAMPP. User standard adalah root dan
dapat diganti pada settingan xampp.
d. $password = password masuk server lokal/phpMyAdmin. Jika tidak
pernah diganti maka defaultnya adalah kosong.

42 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Untuk mengetahui terhubung atau tidak dapat kita tambahkan validasi
pada koding diatas menjadi berikut
<?php
$server = "localhost";
$database = "db_latihan_bootstrap";
$username = "root";
$password = "";
$koneksidb = mysqli_connect($server, $username,
$password, $database);
if($koneksidb){
echo "Sukses terhubung";
}else{
echo "Gagal terhubung";
}
?>

Berikut Hasil jika dijalankan:

C. CARA INSERT DATA DENGAN FORM KE DATABASE

Untuk insert memerlukan beberapa komponen.
a. Buat Database bernama db_latihan_bootstrap
Buat juga tabel bernama tb_member

Mengenal Form dan Database MYSQL | 43

Code untuk create table
CREATE TABLE `tb_member` (
ÌD` INT(11) NOT NULL AUTO_INCREMENT,
`Nama` VARCHAR(250) NULL DEFAULT NULL
COLLATE 'latin1_swedish_ci',
Àlamat` VARCHAR(250) NULL DEFAULT NULL
COLLATE 'latin1_swedish_ci',
`Telp` VARCHAR(250) NULL DEFAULT NULL
COLLATE 'latin1_swedish_ci',
Èmail` VARCHAR(250) NULL DEFAULT NULL
COLLATE 'latin1_swedish_ci',
PRIMARY KEY (ÌD`) USING BTREE
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
;

b. Masih tetap di folder yang sama di BAB 4. Maka kita dapat menambahkan
satu file baru bernama inputform.php dan berikut coding dan
tampilannya

44 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Preview tampilan inputform.php

Mengenal Form dan Database MYSQL | 45

Input pada setiap input text pada isian form. Dan kemudian akan proses
simpan. Jika berhasil maka akan masuk kedalam database. Nah pada
selanjutnya kita akan membahas bagaimana menampilkan data yang telah
kita simpan ke dalam tabel.

D. CARA MENAMPILKAN DATA TABEL DARI DATABASE

Proses menampilkan data dari database juga memerlukan koneksi ke
database yang akan dipanggil dalam bentuk perulangan. Perulangan tersebut
nanti yang akan mengulang sebanyak data yang akan ditampilkan kedalam
bentuk tabel. Setiap baris memberikan nilai pada bentuk mysqli_fetch_assoc
atau mysqli_fetch_array tergantung dengan kebutuhan kita masing-masing.
Berikut Coding untuk php dan beri nama dataregistrasi.php

46 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

E. CARA UPDATE & DELETE DATA
Untuk update merupakan proses yang cukup memiliki beberapa tahapan.
Update atau perubahan biasanya dilakukan untuk memberikan perubahan
data yang telah di simpan, sehingga mendapatkan data yang lebih baik.
Proses delete atau hapus hanya digunakan untuk menghapus data tanpa
merubah. Untuk mendapatkan data maka kita membutuhkan data GET sesuai
dengan permintaan variabel Get pada $_GET[‘Value’] dari URL yang akan
dikirim. Berikut langkah untuk proses edit data:
 Langkah 1:
Tambahkan Link atau Button Link yang akan membuka halaman edit pada
dataregistrasi2.php (copy dari dataregistrasi.php) dan tambahkan seperti
Berikut untuk membedakan hasil file dataregistrasi.php dengan
dataregistrasi2.php

Dengan Code Html Sebagai berikut:

Mengenal Form dan Database MYSQL | 47

Perhatikan dengan script berikut
<a href="ubahdata.php?id=<?php echo $data['ID'];
?>"><button>Ubah</button></a>

<a href="hapusdata.php?id=<?php echo $data['ID'];

?>"><button>Hapus</button></a>

Terdapat <?php echo $data['ID']; ?>

 Langkah 2:
Menjelaskan bahwa pada database terdapat kolom bernama ID yang
akan kita ubah berdasarkan data get dengan memberikan value “id” maka
kita akan membuat file baru bernama ubahdata.php yang menggunakan data
berdasarkan URL Get.

48 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Proses perubahan data pastikan sudah membuat auto increment pada
database untuk perubahan seperti contoh di atas merupakan menggunakan
field ID. Field yang akan digunakan lebih bersifat primary key supaya tidak
memiliki data kembar atau redundancy. Data yang akan dirubah dapat
terhubung dengan klik tombol ubah pada halaman data dan akan menuju link
ubahdata.php berdasarkan link yang berada pada variabel yang sudah
disiapkan di URL button. Hasilnya seperti berikut:

Mengenal Form dan Database MYSQL | 49

Ketika di simpan maka akan menjalankan perintah update pada sql yang
berada pada atas header.

Proses Delete/Hapus.
Proses penghapusan data juga hampir sama dengan proses edit/ubah
data. Dengan kata lain kita bisa menggunakan value dari GET untuk dikirim ke
URL yang akan di eksekusi dengan file atau langsung pada form data. Berikut
langkah menggunakan link URL

 Langkah 1:
Buat file bernama hapusdata.php, pastikan sudah melakukan pembuatan
desain sesuai dengan edit data sebelumnya. Pada button link “hapus”
mengarah ke URL hapusdata.php?id=<?php echo $data['ID']; ?> yang
kemudian akan diarahkan ke file hapusdata.php.

50 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Ketika di klik button hapus maka akan menghapus sesuai dengan ID yang
akan dihapus. Berikut tampilan jika berhasil menghapus data

Mengenal Form dan Database MYSQL | 51

52 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
APLIKASI CRUD SEDERHANA PHP MYSQLI

A. PERSIAPAN DATA DAN DESAIN AWAL

Penggunaan bootstrap dengan MySQLi menjadi topik utama dalam
pembuatan aplikasi. Setelah bab 4 menggunakan pembahasan sederhana
untuk Insert, Edit, Delete, dan Menampilkan data maka kita akan mencoba
aplikasi sederhana yang lebih lengkap dan menggunakan template bootstrap
yang dibagikan secara gratis yang dapat di download pada web resmi
bootstrap. Salah satu link untuk saat ini aktif seperti
https://getbootstrap.com/docs/4.0/examples/atau https://colorlib.com
dan masih banyak lainnya. Untuk versi gratis disarankan untuk tidak
menghilangkan copyright supaya lebih menghargai dan menghormati
pembuat template yang telah kita gunakan.
Dengan tampilan seperti berikut kita akan membentuk 1 form dari input
dan data. Aplikasi sederhana ini akan menerapkan semua menu dengan
materi bab sebelumnya.

B. MENGOLAH TEMPLATE BOOTSTRAP

Silakan download terlebih dahulu dan simpan ke dalam folder htdocs/

persediaan kemudian extract file tersebut untuk mendapatkan library
bootstrap.
Selanjutnya dapat memilih template di bawah menu download

Bebas dapat memilih sesuai dengan keinginan anda, tetapi saat ini kita
gunakan yang lebih sederhana menggunakan Navbar Static.

54 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

C. DESAIN DATABASE DAN TABEL
Buatlah Database bernama db_aplikasi_persediaan
Masuk pada tab database dan ketik seperti berikut

Langkah 2:
Buat Tabel-Tabel sebagai berikut:
a) Tabel Petugas

SQL Create:
CREATE TABLE `tb_petugas` (
`KodePetugas` VARCHAR(50) NOT NULL COLLATE
'latin1_swedish_ci',
`Nama` VARCHAR(250) NOT NULL COLLATE 'latin1_swedish_ci',
`Jabatan` VARCHAR(250) NOT NULL COLLATE
'latin1_swedish_ci',
`Password` VARCHAR(10) NOT NULL COLLATE
'latin1_swedish_ci',
PRIMARY KEY (`KodePetugas`) USING BTREE
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB;

Aplikasi CRUD Sederhana PHP MYSQLI | 55

b) Tabel barang

SQL Create:
CREATE TABLE `tb_barang` (
`KodeBarang` VARCHAR(50) NOT NULL COLLATE
'latin1_swedish_ci',
`Nama` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`HargaBeli` INT(11) NULL DEFAULT '0',
`HargaJual` INT(11) NULL DEFAULT '0',
`Stok` INT(11) NULL DEFAULT '0',
`Satuan` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Petugas` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
PRIMARY KEY (`KodeBarang`) USING BTREE
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB;

c) Tabel Pelanggan

SQL Create:
CREATE TABLE `tb_pelanggan` (
`KodePelanggan` VARCHAR(50) NOT NULL COLLATE
'latin1_swedish_ci',
`Nama` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Alamat` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Telp` VARCHAR(25) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
PRIMARY KEY (`KodePelanggan`) USING BTREE

56 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB;

d) Tabel Supplier

SQL Create:
CREATE TABLE `tb_supplier` (
`KodeSupplier` VARCHAR(50) NOT NULL COLLATE
'latin1_swedish_ci',
`Nama` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Alamat` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Telp` VARCHAR(25) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
PRIMARY KEY (`KodeSupplier`) USING BTREE
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB;

e) Tabel Barang Masuk

SQL Create:
CREATE TABLE `tb_barang_masuk` (
`Id` INT(11) NOT NULL AUTO_INCREMENT,
`Tanggal` DATETIME NULL DEFAULT NULL,
`KodeSupplier` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`KodeBarang` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Nama` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Jumlah` INT(11) NULL DEFAULT NULL,

Aplikasi CRUD Sederhana PHP MYSQLI | 57

`Satuan` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Petugas` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
PRIMARY KEY (`Id`) USING BTREE,
INDEX `KodeBarang` (`KodeBarang`) USING BTREE,
INDEX `KodeSupplier` (`KodeSupplier`) USING BTREE
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB;

f) Tabel Barang Keluar

SQL Create:
CREATE TABLE `tb_barang_keluar` (
`Id` INT(11) NOT NULL AUTO_INCREMENT,
`Tanggal` DATETIME NULL DEFAULT NULL,
`KodePelanggan` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`KodeBarang` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Nama` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Jumlah` INT(11) NULL DEFAULT NULL,
`Satuan` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Petugas` VARCHAR(50) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
PRIMARY KEY (`Id`) USING BTREE,
INDEX `KodeBarang` (`KodeBarang`) USING BTREE,
INDEX `KodeSupplier` (`KodePelanggan`) USING BTREE
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB;

58 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

D. TAMPILAN MENU

Buat file menu.php dari edit dari template diatas, letakkan dalam 1 folder

Selanjutnya buat file bernama index.php sebagai dashboard menu utama

Aplikasi CRUD Sederhana PHP MYSQLI | 59

E. KONEKSI DATABASE
Siapkan file koneksidb.php untuk menghubungkan database sebagai
berikut:

F. HALAMAN PETUGAS
Untuk data petugas akan dibagi menjadi 4 bagian yaitu Data, Tambah,
Edit, dan Hapus. Untuk yang pertama kita awali dengan Data.
a. Data Petugas
Siapkan dan buat file bernama petugas.php dan desain sebagai berikut:

60 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Aplikasi CRUD Sederhana PHP MYSQLI | 61
b. Tambah Data Petugas
Siapkan file petugastambah.php dengan tampilan hasil akhir seperti
gambar dibawah ini

62 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Dan untuk script petugastambah.php script sebagai berikut:

Aplikasi CRUD Sederhana PHP MYSQLI | 63

c. Edit Petugas
Siapkan file bernama petugasedit.php dengan desain sebagai berikut:

64 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Untuk script petugasedit.php adalah sebagai berikut:

Aplikasi CRUD Sederhana PHP MYSQLI | 65

d. Edit Petugas
Siapkan file bernama petugashapus.php dengan desain sebagai berikut:

G. HALAMAN SUPPLIER
a. Data Supplier, Proses pembuatan data supplier hampir sama dengan
pembuatan proses petugas. Mari kita sediakan 4 file untuk CRUD.

66 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Berikut untuk coding script supplier.php

Aplikasi CRUD Sederhana PHP MYSQLI | 67

b. Tambah Supplier
Penambahan data supplier menggunakan struktur yang sama dengan
petugas. Berikut tampilan suppliertambah.php

Untuk source code suppliertambah.php sebagai berikut:

68 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Aplikasi CRUD Sederhana PHP MYSQLI | 69
c. Edit Supplier
Tampilan merubah supplier didapat dengan klik tombol edit pada
halaman supplier. Dengan menggunakan Kode Supplier sebagai metode GET
dalam php yang akan disimpan dalam variabel id makan akan membuka
pencarian berdasarkan KodeSupplier. Maka didapatkan sebagai berikut:

Berikut script source code untuk supplieredit.php

70 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Aplikasi CRUD Sederhana PHP MYSQLI | 71
d. Hapus Supplier
Penghapusan data supplier bekerja seperti cara edit. Dengan mengambil
data KodeSupplier dengan metode GET dari URL yang akan di eksekusi dan
disimpan dalam variabel id. Berikut code untuk supplierhapus.php

H. HALAMAN PELANGGAN
a. Data Pelanggan
Proses pembuatan data pelanggan hampir sama dengan pembuatan
proses supplier. Mari kita sediakan 4 file untuk CRUD.

Berikut script code untuk pelanggan.php

72 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Aplikasi CRUD Sederhana PHP MYSQLI | 73
b. Tambah Pelanggan
Proses tambah pelanggan juga menggunakan metode Post untuk insert.

Berikut script untuk pelanggantambah.php dibawah ini

74 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Aplikasi CRUD Sederhana PHP MYSQLI | 75
c. Edit Pelanggan
Tampilan edit pelanggan didapat dari data pelanggan kemudian klik
tombol Edit untuk mendapat URL dari id yang berisi KodePelanggan yang
akan dibaca pada form pelangganedit.php kemudian pencarian data sebagai
KodePelanggan kunci tabelnya.

Berikut koding untuk pelangganedit.php

76 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Aplikasi CRUD Sederhana PHP MYSQLI | 77
d. Hapus Pelanggan
Untuk hapus pelanggan menggunakan teknik yang sama dengan edit,
tetapi digunakan untuk menghapus data. Berikut code script
pelangganhapus.php

I. HALAMAN BARANG
a. Data Barang
Proses pembuatan barang sebagai persediaan utama pada program.
Pembuatan barang hampir serupa dengan master data lainnya. Barang
digunakan untuk menyimpan data persediaan yang nanti akan digabungkan
dengan menjadi relasi untuk transaksi barang masuk dan keluar.

78 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Berikut kode script untuk barang.php

Aplikasi CRUD Sederhana PHP MYSQLI | 79

b. Tambah Barang
Proses pembuatan tambah barang menjadi preview sebagai berikut:

80 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Untuk script pembuatan tambah barang ada validasi tambahan sebelum
input database. berikut kodenya:

Aplikasi CRUD Sederhana PHP MYSQLI | 81

82 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
c. Edit Barang
Untuk edit barang sama dengan teknis penggunaan edit pada pelanggan
dengan menggunakan alamat URL dengan KodeBarang. Berikut tampilan
preview tampilan edit barang.

Aplikasi CRUD Sederhana PHP MYSQLI | 83

Berikut script kode untuk barangedit.php

84 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Aplikasi CRUD Sederhana PHP MYSQLI | 85
86 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
d. Hapus Barang
Berikut untuk script baranghapus.php

SOAL PRAKTEK:
1. Buatlah Barang Masuk dengan format dan meniru format yang sudah ada
dan gabungkan data masuk dengan supplier dan menambah jumlah
barang !
2. Buatlah Barang Keluar dengan mengambil pelanggan sebagai pilihan pada
select item dengan mengisi dan mengurangi jumlah barang !

Aplikasi CRUD Sederhana PHP MYSQLI | 87

DAFTAR PUSTAKA

https://dewankomputer.com/2019/01/27/macam-macam-form-input-pada-
html-dan-bootstrap/ (Diakses April 2022)
https://idcloudhost.com/pengertian-web-server-dan-fungsinya/ (Diakses
April 2022)
https://jagongoding.com/web/php/dasar/tipe-data-dan-variabel/ (Diakses
April 2022)
https://katalisnet.com/pengertian-dan-sejarah-website/(Diakses April 2022)
https://www.duniailkom.com/mengenal-tipe-data-array-dan-cara-penulisan-
array-dalam-php/ (Diakses April 2022)
https://www.malasngoding.com/grid-system-bootstrap-4/ (Diakses Maret
2022)
https://www.niagahoster.co.id/blog/bootstrap-adalah/(Diakses Maret 2022)
https://www.petanikode.com/php-perulangan/ (Diakses April 2022)
https://www.sekawanmedia.co.id/blog/pengertian-website/(Diakses April
2022)

88 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

PROFIL PENULIS

Agustinus Budi Santoso, S.ST., M.Cs.

Penulis bertempat lahir pada Semarang 03 September
1990. Penulis merupakan anak ke empat dari empat
bersaudara. Memiliki riwayat sekolah pada SMA Sint Louis
Semarang dan melanjutkan studi pada Universitas
STEKOM di Semarang dan UKSW Salatiga. Dengan dedikasi
dan motivasi yang tinggi untuk pendidikan maka saat ini
menjadi salah satu tenaga pengajar di Universitas STEKOM.
Penulis juga memiliki beberapa kegemaran seperti memancing dan touring
bersama rekan kerja dan semasa sekolah untuk menambah wawasan dan
rekan sahabat pada kehidupannya. Ia memiliki keahlian khusus dalam bidang
logika dan algoritma pada Sistem Informasi yang menjadi unggulan untuk
seorang analisis dan pengujian data algoritma suatu aplikasi dan sistem pada
suatu perusahaan yang telah bekerja sama sejak 2015. Beberapa
pengembangan algoritma sistem yang telah dipakai pada pelayanan
masyarakat seperti Puskesmas, Toko Retail. Dan pengembangan dalam
bidang sistem website. Penulis juga merupakan seorang pendiri pengembang
usaha dibidang IT yang mengembangkan bersama tim IT bernama
SantosoWeb.com. Bersama tim produksi membuat produksi dalam bidang
Jasa pembuatan software website, Android, dan web hosting. Sampai
sekarang masih aktif dalam bidang pengembangan teknologi yang bertujuan
memajukan teknologi dan perekonomian segala sektor baik perdagangan,
layanan jasa dan pendidikan.

Profil Penulis | 89