NAMA : HAMSYAH LA MANE BELE

NIM : 4012022040
TUGAS : MODUL
MATA KULIAH: APLIKASI KOMPUTER
DOSEN PENGAMPUH : RIDWAN AFRIANSAH, S.KOM
 Kata Pengantar

Segala puji bagi Allah Swt. yang telah memberikan

nikmat serta hidayah-Nya terutama nikmat
kesempatan dan kesehatan sehingga kami bisa
menyelesaikan modul mata kuliah "Aplikasi
Komputer"
Selawat serta salam kita sampaikan kepada Nabi
besar kita Muhammad saw. yang telah memberikan
pedoman hidup yakni Al-Qur'an dan sunah untuk
keselamatan umat di dunia.
Modul ini merupakan satu di antara tugas mata
kuliah aplikasi komputer jurusan akuntansi sektor
publik kampus Politeknik Bombana
Selanjutnya penulis mengucapkan terima kasih yang
sebesar-besarnya kepada dosen pengampuh pak.
RIDWAN AFRIANSAH, S.KOM.
Penulis menyadari bahwa terdapat banyak
kekurangan dalam penulisan modul ini maka itu
penulis mengharapkan kritik dan saran yang
membangun dari para pembaca demi kesempurnaan
modul ini.

DAFTAR ISI
KATA PENGANTAR ............................................................
DAFTAR ISI ......................................................................
BAB 1 PENGENALAN WEBSITE DAN PHP .............................
A. Pengertian Website .................................................................
B. Sejarah PHP .............................................................................
C. Web Server .............................................................................
D. Install XAMPP Server Lokal ......................................................
BAB 2 FRAMEWORK BOOTSTRAP .......................................
A. Mengenal Apa itu Bootstrap ....................................................
B. Instalasi Bootstrap Awal ..........................................................
C. Mengenal Form HTML .............................................................
D. Form Layout ............................................................................
E. Form Input ...............................................................................
F. Form Radio Button ..................................................................
G. Form Check Box ......................................................................
H. Form Button ............................................................................
I. Form Select ..............................................................................
J. Form Validation ........................................................................
K. Tabel .......................................................................................
BAB 3 STRUKTUR DASAR PHP ...........................................
A. Mengenal PHP .........................................................................
B. Tipe Data ................................................................................
C. Operator ..................................................................................
D. Perulangan ..............................................................................
BAB 4 MENGENAL FORM DAN DATABASE
MYSQL ............................................................................
A. Mengenal Form .......................................................................
B. Menghubungkan Server Localhost ..........................................
C. Cara Insert Data dengan Form ke Database ...........................
D. Cara Menampilkan Data Tabel dari Database .........................
E. Cara Update & Delete Data .....................................................
BAB 5 APLIKASI CRUD SEDERHANA PHP MYSQLI
........................................................................................
A. Persiapan Data dan Desain Awal ................
B. Mengolah Template Bootstrap ....................
C. Desain Database dan Tabel ........................
D. Tampilan Menu ...........................................
E. Koneksi Database .......................................
F. Halaman Petugas ........................................
 G. G.Halaman Supplier ....................................
H. H.Halaman Pelanggan .................................
I. Halaman Barang .........................................

DAFTAR PUSTAKA ............................................................

PROFIL PENULIS ...............................................................
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 masingmasing
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 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.
 Simpan dan jalankan installer untuk dapat proses
selanjutnya

1. 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.
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
masingmasing yang akan digunakan.

Pemilihan Bahasa untuk pengoperasian. Bahasa

dapat dirubah melalui pilihan language untuk
melakukan pengaturan.
Lanjutkan Next untuk install XAMPP
Klik Next untuk melanjutkan proses Install

Ketika Sudah selesai klik Finish dan buka XAMPP

Control Panel, klik Start pada Module Apache dan
MySQL
Untuk mengakses dengan server local dapat buka
browser dan ketik Localhost
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 dengancontrol panel XAMPP dengan startApache dan MySQL

Setelah berhasil start maka dapat mencoba mengakses halaman dengan

membuka browser dengan alamat localhost/bootstrap/

18 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

 Maka akan tampil halaman dengan gambar seperti diatas.
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

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist
/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl
2QvZ6jIW3" crossorigin="anonymous">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/
js/bootstrap.bundle.min.js"
integrity="sha384ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9s
ENBO0LRn5q+8 nbTov4+1p" crossorigin="anonymous"></script>

Atau link CDN berikut

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/c
ss/bootstrap.min.css">

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1
/jquery.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js
/bootstrap.min.js"></script>

Silahkan dapat diletakkan pada bagian <head> dan lengkapi struktur

HTML
 Simpan dengan file starter.php

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="">

20 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

 <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
btnprimary">Submit</button> </form>

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.

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.

22 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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>

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>

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:

24 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

 <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”.

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>

Hasil:

26 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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:
 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:
28 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
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:

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="formcontrol">
</div>
<div class="form-group">
<label for="Email">Email :</label>
<input type="email" required name="Email"
class="formcontrol">
</div>

30 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

 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.
 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.
32 | 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 tablestriped.
 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.

34 | 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.
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:
• 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:
38 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
 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.

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.
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.

Misalnya kita memerlukan 10 nama siswa, maka penulisan PHPnya jika

tanpa array sebagai berikut:
Contoh:
<?php
40 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
 $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>

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:
Operator Simbol
42 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
 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>

Hasil:

44 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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>

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>

Hasil:
46 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
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>
 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++;
48 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
 echo "$i $dataMotor</br>";
}
?>
</div>

Hasil:
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.
 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

52 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

 Code untuk create table
CREATE TABLE `tb_member` (
`ID` INT(11) NOT NULL AUTO_INCREMENT,
`Nama` VARCHAR(250) NULL DEFAULT NULL
COLLATE 'latin1_swedish_ci',
`Alamat` VARCHAR(250) NULL DEFAULT NULL COLLATE
'latin1_swedish_ci',
`Telp` VARCHAR(250) NULL DEFAULT NULL
COLLATE 'latin1_swedish_ci',
`Email` VARCHAR(250) NULL DEFAULT NULL
COLLATE 'latin1_swedish_ci',
PRIMARY KEY (`ID`) 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
54 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
Preview tampilan inputform.php
 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

56 | 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:

 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.

58 | 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:
 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.

60 | 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
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.

C. DESAIN DATABASE DAN TABEL

Buatlah Database bernama db_aplikasi_persediaan
Masuk pada tab database dan ketik seperti berikut

64 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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;

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
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB;

66 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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,
`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

68 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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;

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

E. KONEKSI DATABASE
70 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
 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:
72 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
b. Tambah Data Petugas
Siapkan file petugastambah.php dengan tampilan hasil akhir seperti
gambar dibawah ini
Dan untuk script petugastambah.php script sebagai berikut:

74 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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

76 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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.
Berikut untuk coding script supplier.php

78 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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

Untuk source code suppliertambah.php sebagai berikut:

80 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
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

82 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap
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

84 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

b. Tambah Pelanggan
Proses tambah pelanggan juga menggunakan metode Post untuk insert.

Berikut script untuk pelanggantambah.php dibawah ini

86 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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

88 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

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.

90 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

Berikut kode script untuk barang.php
b. Tambah Barang
Proses pembuatan tambah barang menjadi preview sebagai berikut:

92 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

 Untuk script pembuatan tambah barang ada validasi tambahan sebelum
input database. berikut kodenya:
94 | 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.

Berikut script kode untuk barangedit.php

96 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap

98 | 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 !
 DAFTAR PUSTAKA

https://dewankomputer.com/2019/01/27/macam-macam-form-input-
padahtml-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-
penulisanarray-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)

100 | Pemrograman Web PHP Dasar Database MYSQLI dengan Bootstrap