CRUD dengan PHP Mysql

Website merupakan suatu halaman berisi banyak informasi yang

disediakan melalui akses internet sehingga bisa diakses oleh

seluruh pengguna internet di dunia. Awal adanya internet, akses

informasi pada website masih sangat terbatas. Perkembangan

website masih sangat sederhana dan belum tersedia cukup banyak

untuk bisa diakses.

Secara terminologi, website yaitu kumpulan yang berasal dari

halaman-halaman situs, biasanya terangkum di dalam sebuah

domain atau subdomain, yang tempatnya berada di dalam World

Wide Web (WWW) di Internet. World Wide Web (WWW)

merupakan gabungan atas semua situs yang dapat diakses publik di

internet. Website biasanya ditempatkan setidaknya pada

sebuah server web yang dapat diakses melalui jaringan

seperti internet, ataupun jaringan area lokal (LAN) melalui alamat

internet yang dikenal dengan URL.

Proses kerja World Wide Web (WWW) dapat dibagi menjadi

beberapa komponen seperti berikut:

1. Protocol: Protocol yaitu sebuah media yang distandarkan

untuk dapat mengakses komputer di dalam sebuah jaringan.

Dengan menggunakan protocol ini sebuah halaman yang ada di

dalam komputer jaringan dapat dibuka dan diakses.

2. Address: Merupakan alamat yang berkaitan dengan penamaan

sebuah komputer di dalam jaringan. Alamat ini merupakan sebuah

nomor yang dimiliki sebuah komputer atau disebut dengan nomor

IP. Namun, dengan adanya perkembangan teknologi nomor IP

tersebut berkembang dengan nama Domain Name.

3. HTML: HTML (Hypertext Markup Language), yaitu sebuah

bahasa scripting yang dapat menghasilkan halaman website

sehingga halaman tersebut dapat diakses.

Halaman web yaitu dokumen yang ditulis dalam format HTML

yang bisa di akses melalui HTTP, yaitu protokol yang

menyampaikan informasi dari server website untuk ditampilkan

kepada para pemakai melalui web browser. Semua informasi yang

ditampilkan melalui website tersebut membentuk sebuah jaringan

informasi yang sangat besar. Layaknya sebuah buku, halaman web

menampung informasi tentang berbagai hal, baik yang bersifat

komersil maupun nonkomersil. Melalui media web inilah seseorang

dapat bertukar informasi kepada orang lain di seluruh dunia.

Berikut alur pertukaran informasi yang berada di dalam website.

HTML merupakan singkatan dari Hypertext Markup

Language. Bahasa pemrograman HTML merupakan salah satu

bahasa pemrograman untuk membangun website dengan mudah

dan cepat. Selain bahasa pemrograman HTML tersebut masih

banyak lagi bahasa pemrograman lain untuk membangun sebuah

website. Saat ini banyak sekali bahasa pemrograman yang menjadi

salah satu bahasa yang mudah dipahami. Bahasa pemrograman

tersebut antara lain seperti JavaScipt, C++, PHP, Visual Basic,

Laravel, Python, dan lain sebagainya.

Ada beberapa situs yang bahkan memberikan informasi terkait

bahasa pemrograman apa yang sering digunakan, salah satunya

yaitu pada situs TIOBE. Yang bisa Anda akses ke link situs

https://tiobe.com/tiobe-index/ .

Berikut daftar bahasa pemrograman yang sering digunakan oleh

seluruh pengembang website.

Web Statis

Secara sederhana, website statis dapat didefinisikan sebagai

website yang kontennya konstan atau tidak berubah. Setiap laman

dibuat dengan kode HTML dan menunjukkan informasi yang sama

kepada setiap pengunjung. Hanya webmaster atau developer yang

bisa melakukan update pada konten website statis.

Umumnya website statis dibuat dengan menggunakan HTML

dan CSS oleh developer yang memahami pemrograman dan

coding. Anda juga bisa menggunakan generator website statis

seperti Jekyll, Hexo, atau Hugo.

Karena website statis tidak membutuhkan update konten secara

berkala, website statis tidak memerlukan database. Biasanya

website statis digunakan untuk website perusahaan yang hanya

perlu memberikan informasi-informasi dasar seperti alamat,

kontak, dan sejarah perusahaan.

Web Dinamis

Website dinamis mempunyai konten yang dapat di-update

secara berkala dengan mudah. Adanya kemampuan website dalam

pembaruan konten tersebut, maka diperlukan adanya database di

dalamnya. Web dinamis dibuat dengan bahasa pemrograman yang

lebih kompleks dari pada web statis, seperti menggunakan bahasa

pemrograman PHP, Javascript, Phyton, dan lain sebagainya.

Perancangan web dinamis dibuat semudah mungkin sehingga

pengguna website dapat menggunakan secara maksimal sesuai

dengan kebutuhan para penggunanya. Web dinamis memungkinkan

untuk memiliki banyak user untuk dapat melakukan proses update

konten sendiri tanpa merubah desain web utama.

Database MySQL

MySQL yaitu salah satu aplikasi RDBMS (Relational

Database Management System). MySQL merupakan system

manajemen database relasional open source (RDBMS) dengan

client server model.

Sedangkan RDBMS merupakan software untuk membuat dan

mengelola database berdasarkan pada model relasional. Paypal,

NetFlix, Ebay, Facebook, Twitter, YouTube, Google termasuk

beberapa aplikasi maupun website yang menggunakan MySQL

untuk database mereka. Penggunaan MySQL sebelumnya

digunakan hanya terbatas. Namun, saat ini MySQL sudah

kompatibel dengan berbagai platform computing, seperti Microsoft

Windows, Linux, macOS, dan Ubuntu.

SQL statement menginstruksikan server untuk menjalankan

operasi tertentu:

 Data query: Meminta informasi yang spesifik dari database yang

sudah ada.

 Manipulasi data: Menambahkan, menghapus, mengubah,

menyortir, melakukan operasi lainnya untuk memodifikasi data,

value, atau visual.

 Identitas data (data identity): Menentukan tipe data, misalnya

mengubah data numerik menjadi data integer. Selain itu, juga

menentukan schema atau hubungan dari masing-masing tabel

yang ada di database.

 Data access control: Menyediakan metode keamanan untuk

melindungi data, termasuk dalam menentukan siapa yang boleh

melihat atau menggunakan informasi yang tersimpan di

database.

Bootstrap

Bootstrap merupakan framework HTML, CSS, Javascript

populer untuk membangun situs web yang responsive. Dengan

Bootstrap, developer website dapat membuat responsive website

dan dapat berjalan sempurna pada browser-browser populer seperti

Chrome, Firefox, Opera, dan Internet Explorer serta pada

perangkat-perangkat handphone maupun PC desktop. Responsive

Web Design yaitu desain website yang secara otomatis akan

menyesuaikan dengan kondisi platform yang digunakan dari sisi

tampilan serta segala isinya yang ada pada website tersebut.

Bootstrap terdiri dari satu set file CSS, Javascript, dan Jquery.

Bootstrap menyediakan class-class dalam membuat berbagai jenis

komponen-komponen website seperti menu buttons, card, form,

jumbotron, media object, navbar, pagination, progress, spinners,

dan lainnya.

Selain komponen tersebut, bootstrap juga menyediakan format

layout dan content yang dapat mendukung pengembangan sebuah

website menjadi lebih menarik dan tentunya dengan website yang

responsive.

PHP

Bahasa script jenis server-side (Javascript yaitu bahasa script

jenis client-side) artinya file-file PHP akan dieksekusi pada server.

PHP terlihat bersama HTML, CSS, dan Javascript serta MySQL

untuk membuat aplikasi atau situs web. Untuk menggunakan PHP

harus menginstal dulu server web seperti XAMPP.

CRUD

CRUD merupakan singkatan dari Create, Read, Update, dan

Delete. Fungsi CRUD ini digunakan untuk menambah data,

membaca, memperbarui dan menghapus data pada sebuah sistem

atau aplikasi pengolah data.

Create

Membuat sebuah data baru yang nantinya data tersebut akan

masuk ke dalam sebuah database. Contoh; pada sistem pendaftaran.

Pengguna mendaftarkan diri dengan mencantumkan identitas yang

kemudian data tersebut tersimpan di sebuah database pada sistem

tersebut. Berikut code script untuk create:

INSERT INTO

Read

Membaca atau menampilkan suatu data yang sudah ada di dalam

database. Contoh; sebuah data yang berhasil dibuat dan tersimpan

di dalam database kemudian sistem akan membaca data tersebut

dan akan ditampilkan di dalam web menggunakan perintah

menggunakan bahasa pemrograman PHP. Berikut code script untuk

read:

SELECT FROM

Update

Memperbarui, artinya memperbarui atau mengedit data yang ada

di database dengan menggunakan bahasa pemrograman PHP.

Contoh: Jika ada kekurangan kelengkapan data, pengguna dapat

mengubah data yang sebelumnya dimasukkan di database untuk

bisa diubah maupun ditambahkan kembali sesuai dengan

kebutuhan pengguna tersebut. Berikut code script untuk update:

UPDATE FROM namatabel WHERE

Delete

Menghapus data yang ada di database melalui bahasa

pemrograman PHP. Contoh; menghapus atau menghilangkan data

yang sudah masuk ke dalam database pada sistem yang sedang

dijalankan dengan perintah menggunakan bahasa pemrograman

PHP. Berikut code script untuk delete:

DELETE FROM namatabel WHERE namadata

BAB II

DATABASE MY SQL

BAB II DATABASE MY SQL

Elemen Database My SQL

Elemen dasar SQL mencakup pernyataan, nama, tipe data,

konstanta, ekspresi, dan fungsi bawaan.

Pernyataan

Pernyataan yaitu perintah SQL yang meminta sesuatu tindakan

kepada DBMS. SQL memiliki kira-kira 30 pernyataan. Beberapa

pernyataan dasar SQL dapat dilihat pada tabel berikut :

Tabel 1. Tipe Data Pernyataan

Pernyataan Keterangan

ALTER Mengubah struktur tabel

COMMIT Mengakhiri sebuah eksekusi transaksi

CREATE Menciptakan tabel, indeks atau pandangan

DELETE Menghapus baris pada tabel

DROP Menghapus tabel, indeks atau pandangan

GRANT

Menugaskan hak terhadap basis data kepada

pengguna atau grup pengguna

INSERT Menambahkan sebuah baris pada tabel

REVOKE Membatalkan hak terhadap basis data

ROLLBACK

Mengembalikan ke keadaan semula sekiranya

suatu transaksi gagal dilaksanakan

SELECT Memilih baris dan kolom pada tabel

UPDATE Mengubah nilai pada sebuah baris

Nama

Nama digunakan sebagai identitas bagi objek-objek pada

DBMS. Contoh objek pada DBMS yaitu tabel, kolom, dan

pengguna.

Tipe Data

Setiap data memiliki tipe data. Berikut ini yaitu tipe data dalam

MySQL :

Tipe data untuk numerik :

Tabel 2. Tipe Data Numerik

Tipe Keterangan

TINYINT Nilai integer yang sangat kecil

SMALLINT Nilai integer yang kecil

MEDIUMINT Integer dengan nilai medium

Tipe Keterangan

INT Integer dengan nilai standar

BIGINT Integer dengan nilai besar

FLOAT Bilangan desimal dengan single-precission

DOUBLE

Bilangan desimal dengan double-

precission

DECIMAL(M,D)

Bilangan float (desimal) yang dinyatakan

sebagai string. M yaitu jumlah digit yang

disimpan dalam suatu kolom, N yaitu

jumlah digit di belakang koma

Tipe Data String

Tabel 3. Tipe Data String

Tipe Keterangan

CHAR

Karakter yang memiliki panjang

tetap yaitu sebanyak n

VARCHAR

Karakter yang memiliki panjang

tidak tetap yaitu maksimum

TINYBLOB BLOB dengan ukuran sangat kecil

BLOB BLOB yang memiliki ukuran kecil

MEDIUMBLOB BLOB yang memiliki ukuran sedang

LONGBLOB BLOB yang memiliki ukuran besar

TINYTEXT teks dengan ukuran sangat kecil

TEXT teks yang memiliki ukuran kecil

MEDIUMTEXT teks yang memiliki ukuran sedang

LONGTEXT teks yang memiliki ukuran besar

ENUM

kolom diisi dengan satu member

enumerasi

SET

Kolom dapat diisi dengan beberapa

nilai anggota himpunan

Tipe Data, Tanggal, dan Waktu

DATE: Date mempunyai format tahun-bulan-tanggal

TIME : Time mempunyai format jam-menit-detik

DATETIME: Paduan dari format date dan time

Konstanta

Nilai yang tetap

Ekspresi

Ekspresi digunakan untuk menghasilkan/menghitung nilai.

Ekspresi aritmatika antara lain sebagai berikut:

1. + : tambah

2. – : kurang

3. / : bagi

4. * : kali

Fungsi Bawaan

Fungsi yaitu subprogram yang dapat menghasilkan suatu nilai

apabila fungsi tersebut dipanggil. Fungsi Agregat yaitu fungsi

yang digunakan untuk melakukan summary, statistik yang

dilakukan pada suatu tabel/query.

 AVG(ekspresi): Digunakan untuk mencari nilai rata-rata dalam

kolom dari tabel.

 COUNT(x): Digunakan untuk menghitung jumlah baris dari

sebuah kolom dari tabel.

 MAX(ekspresi): Digunakan untuk mencari nilai yang paling

besar dari suatu kolom dari tabel.

 MIN(ekspresi): Digunakan untuk mencari nilai yang paling kecil

dari suatu kolom dari tabel.

 SUM(ekspresi): Digunakan untuk menghitung jumlah

keseluruhan pada suatu kolom dari table.

Menggunakan PHP MyAdmin

Phpmyadmin merupakan aplikasi open source yang berfungsi

untuk memudahkan dalam mengelola database MySQL dengan

interface pengelolaan yang lebih mudah.

Gambar 6. Halaman Utama PHP MyAdmin

BAB III

BOOTSTRAP 4

BAB III BOOSTRAP

File Bootstrap

Bootstrap 4 yaitu versi terbaru dari Bootstrap, yang merupakan

kerangka kerja berupa file HTML, CSS, dan JavaScript populer

untuk mengembangkan situs web yang responsif.

File bootstrap terdiri dari satu set direktori HTML, direktori css:

bootstrap.css, direktori js.

Introduction

Bootstrap memberikan file CSS dan Java Script siap pakai. File

tersebut berisi kumpulan baris kode tersusun dengan code script

CSS dan JavaScript. Selain itu di laman utama bootstrap disediakan

juga untuk template bootstrap. Starter template bootstrap tersebut

bisa langsung digunakan untuk memulai pembuatan website.

Gambar 7. Halaman laman bootstrap pada menu

Introduction CSS

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootst

rap.min.css" integrity="sha384-

JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+

VmmDGMN5t9UJ0Z" crossorigin="anonymous">

integrity="sha384-

DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbV

YUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script

src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/poppe

r.min.js" integrity="sha384-

9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6B

Zp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script

src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstra

p.min.js" integrity="sha384-

B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KU

EfYiJOMMV+rV" crossorigin="anonymous"></script>

Starter template

<!doctype html>

<head>

scale=1, shrink-to-fit=no">

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootst

rap.min.css" integrity="sha384-

JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+

VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>Hello, world!</title>

</head>

<body>

<h1>Hello, world!</h1>

integrity="sha384-

DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbV

YUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script

src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/poppe

r.min.js" integrity="sha384-

9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6B

Zp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script

src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstra

p.min.js" integrity="sha384-

B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KU

EfYiJOMMV+rV" crossorigin="anonymous"></script>

</body>

</html>

Download

Pada laman bootstrap juga menyediakan file download berisi

folder CSS dan java Script. File pada menu download bootstrap

tersebut berupa file dalam bentuk ZIP.

Gambar 8. Halaman laman bootstrap pada menu Download

Gambar 9. File Download CSS

Gambar 10. File Download JavaScript

Grid Bootstrap

Grid bootstrap merupakan sistem grid yang memudahkan

pengembang website dalam mengatur layout atau tata letak dengan

mudah dan secara sistematis untuk mengatur tampilan sesuai

dengan ukuran layar dan perangkat yang diinginkan. Bootstrap

memiliki 12 grid. Grid bootstrap digunakan untuk membangun tata

letak dari semua bentuk dan ukuran disesuaikan dengan aturan

pada masing-masing class grid. Class grid tersebut yaitu class

container, class row, dan class col.

Class Container

Class container berfungsi untuk membungkus atau menampung

konten web baik berupa element grid system maupun element grid

lainnya. Ada dua jenis class container pada bootstrap, yaitu

container dan container fluid.

Class container yaitu class pada bootstrap yang memiliki ukuran

tetap atau fix. Ukuran pada kelas container ini sifatnya yaitu tetap.

Ukuran pada class container ini yaitu 1140px untuk maksimal lebar

container.

</div>

Container fluid yaitu class pada bootstrap yang ukuran lebarnya

menyesuaikan dengan perangkat yang akan digunakan.

...

</div>

Berikut ukuran container yang disediakan di bootstrap:

Gambar 11. Ukuran container yang disediakan di bootstrap

Class Row

Class row yaitu class pada bootstrap yang fungsinya untuk

membuat baris.

Class Col

Class col yaitu class pada bootstrap yang fungsinya untuk

membuat kolom.

Gambar 12. Ukuran Sistem Grid Col

Sistem grid col memiliki 5 class antara lain yaitu:

col-xs-* : Merupakan class prefix yang digunakan untuk

mengatur grid dengan membagi baris pada ukuran kurang dari

576px atau extra small. Col-xs-* digunakan untuk device kecil

seperti penggunaan pada perangkat ponsel atau smartphone.

col-sm-* : Merupakan class prefix yang digunakan untuk

mengatur grid dengan membagi baris pada ukuran lebih besar atau

sama dengan 576px atau small. Col-sm-* digunakan untuk device

agak kecil seperti penggunaan pada perangkat tablet.

col-md-* : Merupakan class prefix yang digunakan untuk

mengatur grid dengan membagi baris pada ukuran lebih besar atau

sama dengan 768px atau medium. Col-md-* digunakan untuk

device agak kecil seperti penggunaan pada laptop.

col-lg-* : Merupakan class prefix yang digunakan untuk

mengatur grid dengan membagi baris pada ukuran lebih besar atau

sama dengan 992px atau large. Col-lg-* digunakan untuk device

agak kecil seperti penggunaan pada komputer atau PC.

col-xl-* : Merupakan class prefix yang digunakan untuk

mengatur grid dengan membagi baris pada ukuran lebih besar atau

sama dengan 1200px atau extra large.

BAB IV

DASAR-DASAR PHP

BAB IV DASAR-DASAR PHP

Code Script PHP Dasar

PHP merupakan salah satu bahasa pemrograman yang bisa

didapatkan secara gratis atau open source untuk pengembangan

web. PHP memiliki code script dasar yaitu dengan memulai script

<? Dan di akhiri script ?>.

Berikut code script dasar php:

<?php

echo "Hello World!";

Dari code script tersebut dapat diartikan bahwa:

Code script <?php digunakan untuk pembuka program PHP.

Code script tersebut wajib ada di setiap program PHP yang akan

dibuat.

Code script echo "Hello World!" yaitu code script untuk

menampilkan sebuah statement atau teks pada program PHP.

Code script ?> digunakan untuk pembuka program PHP. Code

script tersebut wajib ada di setiap program PHP yang akan dbuat.

Code script PHP juga dapat ditulis di dalam HTML. Berikut

contoh code script PHP dalam HTML.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<?php

echo "Belajar Bootstrap<br>";

echo "<p>Belajar CRUD PHP dan Bootstrap</p>";

</body>

</html>

Variabel

Variabel PHP di mulai dengan tanda $. Ada beberapa peraturan

terkait pemberian nama variabel dalam PHP, yaitu:

Tabel 4. Variabel PHP

Peraturan Keterangan

diawali tanda $ Setiap nama variabel dalam bahasa

pemrograman PHP didefinisikan dengan tanda

$ lalu diikuti oleh nama variabel itu sendiri

nama diawali

huruf

atau underscor

e (_)

Nama variabel PHP harus diawali huruf, atau

tanda underscore (_).

case sensitive PHP membedakan huruf besar dan kecil dalam

penamaan variabel. Maka

variabel $nama, $naMa dan

juga $Nama dianggap 3 variabel yang berbeda

hanya boleh

huruf dan

angka

nama variabel hanya boleh tersusun dari

huruf [a-z] atau [A-Z], dan juga angka [0-9].

Kita tidak bisa memberi nama variabel

misalkan dengan tanda ^ atau & dan lain

sebagainya. Tidak bisa

menggunakan spasi dalam penamaan variabel

di PHP

inisiasi dengan

tanda =

bisa memberi nilai terhadap suatu variabel

dengan menggunakan operator sama dengan

(=).

Menampilkan Data

PHP memiliki beberapa fungsi untuk menampilkan data atau

mencetak data ke layar yaitu fungsi echo, print dan printf.

Echo

Fungsi echo() digunakan untuk menampilkan text ke layar,

fungsi echo ini menggunakan tanda kurung ataupun tanpa tanda

kurung.

Fungsi print() memiliki fungsi yang sama dengan echo(), yaitu

berfungsi menampilkan atau mencetak text pada layar, fungsi

print() juga dapat digunakan tanpa tanda kurung.

Perbedaan fungsi print() dengan echo() antara lain :

 Fungsi print() proses lebih lambat sedangkan fungsi echo()

proses lebih cepat

 Fungsi print() hanya dapat diberikan satu parameter saja, tetapi

fungsi echo bisa diberikan beberapa parameter

 Fungsi print() akan mengembalikan nilai 1 saat dieksekusi,

sedangkan fungsi echo() tidak mengembalikan nilai apa-apa.

Printf

Fungsi printf() yaitu fungsi untuk memformat teks atau string.

Fungsi ini akan mengembalikan panjang dari teks saat dieksekusi.

Tipe Data

Ada beberapa tipe data yang ada di PHP, yaitu:

Tabel 5. Tipe Data PHP

Tipe Data Keterangan

Integer Berisi bilangan bulat

Float Berisi bilangan desimal

Double Menampung angka yang mengandung

bagian pecahan atau desimal termasuk

angka positif dan negative

Boolean Berisi 2 nilai atau value

saja; true dan false

String Berisi data teks dengan menggunakan

tanda petik "...."

Array Berisi himpunan data atau tipe data

majemuk yang dapat menyimpan

beberapa nilai atau value dari tipe data

yang sama.

Null Jenis variabel khusus yang hanya dapat

menampung satu nilai yaitu, NULL.

BAB V

INSTALASI XAMPP

BAB V INSTALASI XAMPP

enginstal XAMPP dapat dilakukan melalui

beberapa langkah. XAMPP digunakan untuk

menjalankan code script pemrograman PHP secara

localhost tanpa terhubung dengan koneksi internet.

Instalasi XAMPP secara localhost bertujuan untuk pengecekan

proses database sebuah website untuk di akses lebih cepat

dibandingkan dengan proses secara online.

Gambar 13. Logo XAMPP

Instalasi XAMPP

Aplikasi XAMPP ini dibuat oleh Apache Friends. Isi aplikasinya

juga sudah sangat komplet, antara lain: Aplikasi XAMPP berisi:

Apache

MySQL

PHP

phpMyAdmin

FileZilla FTP Server

Tomcat

XAMPP Control Panel

Berikut ini cara install XAMPP di Windows:

1.Mencari aplikasi instalasi XAMPP pada browser dengan

mengetikkan keyword “XAMPP”.

Gambar 14. Hasil Searching XAMPP Pada Browser

2. Klik link atau ketik https://www.apachefriends.org/ di

browser.

Gambar 15. Halaman Utama Apache Friends XAMPP

3.Download aplikasi XAMPP

Gambar 16. Aplikasi Hasil Download XAMPP

4. Instalasi Aplikasi XAMPP. Klik double pada installer

aplikasi XAMPP.

Gambar 17. Proses Awal Instalasi XAMPP

5. Pilih Components Aplikasi XAMPP kemudian klik Next.

Gambar 18. Memilih Components XAMPP

6. Pilih tempat penyimpanan instalasi xampp. Kemudian klik

Next.

Gambar 19. Memilih Tempat Instalasi XAMPP

7. Pilih bahasa kemudian klik Next.

Gambar 20. Memilih Bahasa XAMPP

8. Pilih Next untuk melanjutkan instalasi.

Gambar 21. Proses Lanjut Instalasi XAMPP (1)

Gambar 22. Proses Lanjut Instalasi XAMPP (2)

Gambar 23. Proses Lanjut Instalasi XAMPP (3)

9. Pilih Finish untuk menyelesaikan proses instalasi.

Gambar 24.Proses Finish Instalasi XAMPP

Konfigurasi XAMPP

Sebelum memulai atau menggunakan aplikasi XAMPP untuk

konfigurasi sebuah database, aplikasi XAMPP yang sudah berhasil

diinstal perlu dikonfigurasi agar bisa berjalan sesuai dengan

kebutuhan. Berikut langkah konfigurasi XAMPP:

1. Cari folder xampp pada Local Disk C.

Gambar 25. Folder Xampp Pada Local Disk C

2. Cari file xampp-control.exe. Kemudian klik double untuk

membuka kontrol xampp.

Gambar 26. File Xampp-control.exe Pada Local Disk C

3. Setelah file xampp-control.exe diklik double maka akan

muncul halaman control xampp sesuai dengan versi XAMPP yang

digunakan.

Gambar 27. Halaman Control XAMPP

4. Klik start untuk memulai Apache dan MySql. Setelah klik

start maka indikator warna pada module akan berubah menjadi

warna hijau.

Gambar 28. Module Apache dan MySQL Sudah Aktif

Uji Instalasi XAMPP

Setelah berhasil konfigurasi XAMPP kemudian diuji coba untuk

masuk ke localhost database. Pada uji instalasi ini menggunakan

browser. Buka salah satu browser kemudian ketik localhost.

Berikut uji instalasi XAMPP:

1. Membuka browser kemudian ketik localhost

Gambar 29. Uji Instalasi XAMPP pada Localhost

2. Kemudian masuk ke dalam halaman dashboard XAMPP,

kemudian klik phpMyadmin

Gambar 30. Halaman Dashboard XAMPP

3. Setelah klik phpMyadmin maka akan masuk ke dalam

halaman phpmyadmin. Di halaman ini Anda bisa membuat

database baru dan memulai mengisi sesuai dengan kebutuhan data

isi tabel dari data tersebut.

Gambar 31. Uji instalasi XAMPP

BAB VI

MEMBUAT DATABASE

BAB VI MEMBUAT DATABASE

Membuat Database Baru di My SQL

Setelah MY SQL aktif, selanjutnya Anda dapat melakukan

pembuatan database dengan cara:

1. Klik new pada database My SQL

Gambar 32. Membuat Database Baru

2. Isikan nama database yang diinginkan

Pada langkah ini, Anda bebas membuat nama database sesuai

dengan kebutuhan. Pada gambar di bawah ini nama databasenya yaitu

db_koleksibuku.

Gambar 33. Mengisi Nama Database Baru

3. Setelah Anda mengisi nama database. Klik Create untuk

melanjutkan proses pembuatan database.

Gambar 34. Nama Database Baru

Membuat Tabel

Setelah berhasil membuat database, selanjutnya yaitu membuat

table yang dibutuhkan yang akan disimpan ke dalam database

tersebut. Tabel merupakan sekumpulan data yang berisi kolom dan

baris. Di mana kolom berarti field dan baris berarti record.

Untuk membuat database tersebut caranya yaitu:

1. Klik pada nama database yang dibuat sebelumnya yaitu

db_koleksibuku maka akan muncul halaman Create table

pada database My SQL

Gambar 35. Membuat Table Pada Database

2. Masukkan nama table beserta jumlah kolom yang akan dibuat

kemudian klik menu icon di sebelah kanan .

Gambar 36. Nama Tabel dan Kolom

3. Isikan nama table sesuai dengan kebutuhan berupa Name,

Type, Length/Values, Default, Collation, Attributes, Null,

Index, A_I, Comments, Virtuality, Move column, Media

(MIME) type, Browser display transformation, Input

transformation, Input transformation options.

Gambar 37. Halaman Create Tabel

4. Isikan atribut tabel yang dibutuhkan pada tb_buku

Gambar 38. Memasukkan atribut tabel

5. Setelah memasukkan atribut tabel tekan icon di pojok

kanan bawah. Selanjutnya akan muncul struktur database yang tadi

dibuat.

Gambar 39. Struktur database tb_buku

Memasukkan Data Tabel

Untuk memasukkan data ke dalam database yang sudah dibuat

yaitu dengan cara:

1. Kik menu insert.

2. Kemudian isikan data tabel beruba id_buku, judul buku,

pengarang, tahun terbit, dan kategori. Untuk id_buku bisa

dikosongkan karena diatur dengan auto increment.

Gambar 40. Memasukkan data table pada database

3. Setelah mengisi data klik icon untuk menyimpan data

tersebut.

4. Untuk melihat data hasil input, Anda bisa ke menu browse.

Gambar 41. Hasil input data pada database

BAB VII

MEMBUAT KONEKSI

BAB VII MEMBUAT KONEKSI

Kode Koneksi PHP

Setelah database dibuat, langkah selanjutnya yaitu membuat

koneksi antara database dengan PHP. Untuk membuat koneksi

database caranya sebagai berikut:

1. Buat folder baru di dalam XAMPP / htdocs dengan nama crud

2. Setelah membuat folder kemudian buatlah file php di folder

tersebut dengan nama file-nya koneksi.php

3. Berikut kode file php koneksi

Gambar 42. Kode Koneksi

Kode di atas menunjuka bahwa variabel $conn terkoneksi

dengan mysql dengan:

Host : localhost

User : root

Password : kosong

Nama database : db_koleksibuku

4. Setalah membuat file koneksi.php, kemudian tes koneksi

tersebut dengan cara akses ke browser dan ketikan

http://localhost/crud/koneksi.php. Jika berhasil, tampilan

browser akan menunjukan kondisi koneksi berhasil.

Gambar 43. Koneksi Berhasil

5. Jika halaman koneksi gagal, akan muncul tampilan sebagai

berikut:

Gambar 44. Koneksi Gagal

Menampilkan Data

Setelah koneksi database dengan PHP berhasil kemudian tes

kembali untuk memunculkan data yang sebelumnya dimasukkan di

dalam database My SQL, yaitu dengan cara:

1. Membuat file baru dengan nama viewdata.php.

2. Ketik kode berikut dan save di dalam file tersebut.

Gambar 45. Code View Data

3. Tes koneksi untuk melihat data yang sudah diinputkan ke

dalam database dengan cara akses ke browser dan ketikkan

http://localhost/crud/viewdata.php

4. Jika berhasil, tampilannya sebagai berikut.

Gambar 46. View Data Awal

BAB VIII

MENGGUNAKAN BOOTSTRAP 4

BAB VIII MENGGUNAKAN

BOOSTRAP 4

Cara Menggunakan Bootstrap

Pada langkah menggunakan file CSS Bootstrap 4, kita bisa

menggunakan Starter Template berupa code CSS bootstrap 4 yang

sudah ada di laman dengan

https://getbootstrap.com/docs/4.0/getting-started/introduction/.

Gambar 47. Starter Template Bootstrap 4

Siapkan code editor kemudian copy starter template tersebut

kemudian simpan dengan nama index.php.

Gambar 48. Starter Template Pada Code Editor

Jalankan file index.php tersebut dengan cara akses ke browser

dan ketikkan http://localhost/crud/index.php.

Gambar 49. Halaman Index.php

Membuat Koneksi Halaman Index

Setelah berhasil menjalankan file index bootstrap, langkah

selanjutnya yaitu membuat file index terkoneksi dengan database

yang sebelumnya sudah dibuat. Tambahkan code script file koneksi

pada file index sehingga data yang dimasukkan di dalam database

bisa ditampilkan. Berikut yaitu code script file koneksi database.

<?php

include_once ("koneksi.php");

$query= "SELECT * FROM tb_buku";

$hasil = mysqli_query ($conn, $query);

while($data=mysqli_fetch_array ($hasil)) {

echo $data ['judul_buku'] . "<br/>";

}

Dari code script tersebut, halaman index akan menampilkan data

judul buku yang akan diambil dari database tabel buku. Tambahkan

code script tersebut di atas code script starter template bootstrap.

<?php

include_once ("koneksi.php");

$query= "SELECT * FROM tb_buku";

$hasil = mysqli_query ($conn, $query);

while($data=mysqli_fetch_array ($hasil)) {

echo $data ['judul_buku'] . "<br/>";

}

.<!doctype html>

<head>

width, initial-scale=1, shrink-to-fit=no">

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c

ss/bootstrap.min.css" integrity="sha384-

Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263X

mFcJlSAwiGgFAW/dAiS6JXm"

crossorigin="anonymous">

<title>Hello, world!</title>

</head>

<body>

<h1>Hello, world!</h1>

3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJ

wFDMVNA/GpGFF93hXpG5KkN"

crossorigin="anonymous"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.

9/umd/popper.min.js" integrity="sha384-

ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUib

X39j7fakFPskvXusvfa0b4Q"

crossorigin="anonymous"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/

bootstrap.min.js" integrity="sha384-

JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1

MquVdAyjUar5+76PVCmYl"

crossorigin="anonymous"></script>

</body>

</html>

Setelah itu cek koneksi halaman index dengan database dengan

cara ketikkan http://localhost/crud/index.php. Jika berhasil halaman

index akan tampil sebagai berikut:

Gambar 50. Halaman Koneksi Index

BAB IX

CRUD PHP DAN MYSQL

BAB IX CRUD PHP DAN MYSQL

Membuat Halaman Utama

Setelah boostrap terkoneksi dengan database kemudian kita

membuat halaman utama atau halaman index sesuai dengan

kebutuhan pada desain tampilan yang diinginkan. Halaman utama

dari website yang akan dibuat yaitu website “Data Koleksi Buku

Perpustakaan”. Berikut yaitu code script halaman utama “Data

Koleksi Buku Perpustakaan”.

<?php

include_once ("koneksi.php");

$query= "SELECT * FROM tb_buku";

$hasil= mysqli_query ($conn, $query);

<!DOCTYPE html>

<html>

<head>

<title>Koleksi Buku</title>

width, initial-scale=1, shrink-to-fit=no">

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c

ss/bootstrap.min.css" integrity="sha384-

Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263X

mFcJlSAwiGgFAW/dAiS6JXm"

crossorigin="anonymous">

<title> Koleksi Buku</title>

</head>

<body>

<div class="alert alert-success text-center" role="alert"

> <h2>DATA KOLEKSI BUKU

PERPUSTAKAAN</h2>

</div>

<tr>

<th scope="col">Judul Buku</th>

<th scope="col">Pengarang</th>

<th scope="col">Tahun Terbit</th>

<th scope="col">Kategori</th>

</tr>

</thead>

<tbody>

<?php while ($data=mysqli_fetch_array ($hasil)){ ?>

<tr>

</th>

</tr>

<?php } ?>

</tbody>

</table>

3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJ

wFDMVNA/GpGFF93hXpG5KkN"

crossorigin="anonymous"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.

9/umd/popper.min.js" integrity="sha384-

ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUib

X39j7fakFPskvXusvfa0b4Q"

crossorigin="anonymous"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/

bootstrap.min.js" integrity="sha384-

JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1

MquVdAyjUar5+76PVCmYl"

crossorigin="anonymous"></script>

</body>

</html>

Update file index.php yang sebelumnya dibuat dengan code

script di atas, kemudian akses kembali dengan browser

menggunakan cara klik http://localhost/crud/index.php. Jika

berhasil halaman index akan tampil sebagai berikut:

Gambar 51. Halaman Utama Website

Create (Menambah Data)

Create atau menambah data pada website merupakan bagian dari

CRUD. Semakin banyak fitur konten dalam sebuah website

semakin menarik website tersebut untuk dieksplorasi oleh

penggunanya, salah satunya yaitu pada point create. Pengguna

dapat menambah data sesuai dengan kebutuhan mereka.

Untuk menambahkan data pada database yang kemudian akan

dimunculkan di website, langkah pertama yang dilakukan yaitu

membuat menu baru “Tambah Buku” pada halaman utama website

tersebut. Cantumkan code script berikut pada file index.php:

<a href="tambahbuku.php" class="btn btn-primary

mb-1 mt-1"><i class="fas fa-user-plus mr-

2"></i>Tambah Buku</a>

Code script tersebut digunakan untuk membuat menu baru

Tambah Buku dan menu tersebut ketika diklik nantinya akan ke

halaman Tambah Buku. Berikut code script lengkap pada file

index.php:

<?php

include_once ("koneksi.php");

$query= "SELECT * FROM tb_buku";

$hasil= mysqli_query ($conn, $query);

<!DOCTYPE html>

<html>

<head>

<title>Koleksi Buku</title>

width, initial-scale=1, shrink-to-fit=no">

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c

ss/bootstrap.min.css" integrity="sha384-

Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263X

mFcJlSAwiGgFAW/dAiS6JXm"

crossorigin="anonymous">

<title> Koleksi Buku</title>

</head>

<body>

<div class="alert alert-success text-center" role="alert"

> <h2>DATA KOLEKSI BUKU

PERPUSTAKAAN</h2>

</div>

<a href="tambahbuku.php" class="btn btn-primary mb-1

mt-1"><i class="fas fa-user-plus mr-2"></i>Tambah

Buku</a>

<tr>

<th scope="col">Judul Buku</th>

<th scope="col">Pengarang</th>

<th scope="col">Tahun Terbit</th>

<th scope="col">Kategori</th>

</tr>

</thead>

<tbody>

<?php while ($data=mysqli_fetch_array ($hasil)){ ?>

<tr>

</th>

</tr>

<?php } ?>

</tbody>

</table>

3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJ

wFDMVNA/GpGFF93hXpG5KkN"

crossorigin="anonymous"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.

9/umd/popper.min.js" integrity="sha384-

ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUib

X39j7fakFPskvXusvfa0b4Q"

crossorigin="anonymous"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/

bootstrap.min.js" integrity="sha384-

JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1

MquVdAyjUar5+76PVCmYl"

crossorigin="anonymous"></script>

</body>

</html>

Simpan file index.php tersebut kemudian akses kembali dengan

browser dengan akses ke http://localhost/crud/index.php. Jika

berhasil halaman utama akan tampil sebagai berikut:

Gambar 52. Halaman Utama dengan Menu Tambah Buku

Setelah membuat menu baru “Tambah Buku”, kemudian kita

akan membuat halaman “Tambah Buku” yang akan terkoneksi

dengan database dan halaman utama.

Membuat Halaman Tambah Buku

Buatlah file baru disimpan di folder yang sama dengan file

index.php dengan nama tambahbuku.php dan kemudian masukkan

code script berikut ini:

<!DOCTYPE html>

<html>

<head>

<title>Tambah Buku</title>

width, initial-scale=1, shrink-to-fit=no">

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c

ss/bootstrap.min.css" integrity="sha384-

Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263X

mFcJlSAwiGgFAW/dAiS6JXm"

crossorigin="anonymous">

<title>Tambah Buku</title>

</head>

<body>

<div class="alert alert-success text-center"

role="alert" > <h2>DATA KOLEKSI BUKU

PERPUSTAKAAN</h2>

</div>

<h1 class="ml-5">Tambah Koleksi Buku</h1>

<form method="post"

action="prosestambahbuku.php" class="ml-5">

<label for="judul" class="col-sm-1 col-form-

label">Judul Buku</label>

<input type="text" name="judul" class="form-

control" placeholder="Judul Buku">

</div>

<label for="pengarang" class="col-sm-1 col-form-

label">Pengarang</label>

<input type="text" name="pengarang"

class="form-control" placeholder="Pengarang">

</div>

<label for="tahun_terbit" class="col-sm-1 col-form-

label">Tahun Terbit</label>

<input type="number" name="tahun_terbit"

class="form-control" placeholder="Tahun Terbit">

</div>

<label for="kategori" class="col-sm-1 col-form-

label">Kategori</label>

<input type="text" name="kategori" class="form-

control" placeholder="Kategori">

</div>

<button type="submit" class="btn btn-primary mb-1

mt-1 ml-0 mr-0" >Kirim</button>

<a href="index.php" class="btn btn-primary mb-1 mt-1

ml-0"><i class="fas fa-user-plus mr-0"></i>Koleksi

Buku</a>

</form>

<!-- jQuery first, then Popper.js, then Bootstrap JS --

3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJ

wFDMVNA/GpGFF93hXpG5KkN"

crossorigin="anonymous"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.

9/umd/popper.min.js" integrity="sha384-

ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUib

X39j7fakFPskvXusvfa0b4Q"

crossorigin="anonymous"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/

bootstrap.min.js" integrity="sha384-

JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1

MquVdAyjUar5+76PVCmYl"

crossorigin="anonymous"></script>

</body>

</html>

Setelah file tambahbuku.php dibuat kemudian akses kembali

dengan browser. Akses ke http://localhost/crud/tambahbuku.php.

Jika berhasil halaman tambah buku akan tampil sebagai berikut:

Gambar 53. Halaman Tambah Buku

Membuat Koneksi Tambah Buku

Setelah membuat halaman tambah buku, kemudian kita

membuat file koneksi tambah buku dengan membuat file baru

dengan nama prosestambahbuku.php.

File koneksi ini bertujuan untuk mengkoneksikan antara tambah

buku dengan database sehingga data yang kita inputkan di halaman

tersebut akan muncul di database dan juga di halaman utama.

Cantumkan code script berikut ke dalam file

prosestambahbuku.php sehingga halaman tambah buku terkoneksi

dengan database.

<?php

include_once("koneksi.php");

$judul = $_POST['judul'];

$pengarang= $_POST['pengarang'];

$tahun= $_POST['tahun_terbit'];

$kategori= $_POST['kategori'];

$query="INSERT INTO tb_buku

(judul_buku,pengarang,tahun_terbit,kategori) VALUE

('$judul','$pengarang','$tahun','$kategori')";

$hasil=mysqli_query($conn,$query);

if ($hasil) {

header('location:index.php');

} else {

echo "input data gagal";

}

Setelah berhasil membuat file koneksi prosestambahbuku.php,

kemudian kembali ke halaman Tambah Koleksi Buku untuk

menambahkan data. Isi form Judul Buku, Pengarang, Tahun Terbit

dan Kategori kemudian klik menu kirim. Berikut gambar proses

iput data koleksi buku:

Gambar 54. Input Data Koleksi Buku

Read (Membaca/Menampilkan Data)

Read yaitu suatu proses membaca/menampilkan data dari suatu

database dan dapat dibaca menggunakan bahasa pemrograman.

Sistem akan membaca dan menampilkan data yang sudah

diinputkan dalam sebuah database.

Menampilkan Data

Dari halaman “Tambah Koleksi Buku”, setelah semua form diisi

dan klik kirim maka secara otomatis akan ke halaman utama Data

Koleksi Buku Perpustakaan. Di halaman tersebut akan muncul data

baru yang sebelumnya diinputkan. Berikut gambar data berhasil

diinput pada halaman utama dan database:

Gambar 55. Data Berhasil di Input Pada Halaman Utama

Gambar 56. Data Berhasil di Input Pada Database

Membuat Penomoran Secara Berurutan

Dari hasil koneksi dan proses input, terlihat bahwa penomoran

pada id_buku yaitu nomor 1, nomor 2, dan langsung ke nomor 11.

Untuk membuat penomoran tersebut berurutan maka perlu

perubahan pada code script pada file index.php. Berikut code script

yang harus diubah pada file index.php:

Code script awal pada file index.php

<tbody>

<?php while ($data=mysqli_fetch_array ($hasil)){ ?>

<tr>

</tr>

<?php } ?>

</tbody>

Code script untuk perubahan pada file index.php

<tbody>

<?php $nomor=1;

while ($data=mysqli_fetch_array ($hasil)){

<tr>

</tr>

<?php $nomor++; } ?>

</tbody>

Setelah selesai perubahan code script, simpan dan kemudian cek

kembali pada halaman utama. Jika berhasil data di halaman utama

untuk penomoran akan secara otomatis berurutan. Berikut gambar

halaman utama setelah perubahan code script:

Gambar 57. Halaman Utama dengan Id_buku Berurutan

Update (Mengubah Data)

Update/Edit yaitu suatu proses mengubah data dari data yang

semula ada diubah sesuai dengan kebutuhan. Dalam sebuah

program dibutuhkan sebuah button yang berfungsi untuk mengubah

data gunanya apabila terjadi suatu kesalahan pada proses input kita

tidak perlu menghapus data tersebut cukup diubah sesuai dengan

kebutuhan.

Membuat Button Edit Pada Halaman Utama/Index

Untuk mengubah data maka kita perlu membuat tombol baru

yaitu tombol Edit. Kita akan menambahkan kolom baru yaitu

kolom “Aksi”. Untuk membuat kolom dan tombol tersebut,

tambahkan code script berikut ini di file index.php.

Code Script Kolom

<tr>

<th scope="col">Judul Buku</th>

<th scope="col">Pengarang</th>

<th scope="col">Tahun Terbit</th>

<th scope="col">Kategori</th>

</tr>

Code Script Button/Tombol Edit

<tr>

<td> <a href="ubahbuku.php?id=<?php echo

$data['id_buku'] ?>">Edit</a> </td>

</tr>

Setelah menambahkan code script tersebut, akses kembali

halaman utama/index dengan http://localhost/crud/index.php. Jika

berhasil, di halaman index akan muncul kolom Aksi dan Button

Edit serta akan tampil sebagai berikut:

Gambar 58. Halaman Utama Dengan Button Edit

Membuat Koneksi dan Halaman Edit Buku

Setelah membuat Kolom “Aksi” dan button “Edit”, kemudian

kita membuat halaman untuk edit buku. Untuk membuat koneksi

dan halaman edit buku, buatlah code script berikut dan simpan

dengan nama “ubahbuku.php”.

<?php

include_once("koneksi.php");

$id=$_GET['id'];

$query="SELECT * FROM tb_buku WHERE id_buku=" . $id;

$hasil=mysqli_query($conn,$query);

<!DOCTYPE html>

<html>

<head>

initial-scale=1, shrink-to-fit=no">

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstr

ap.min.css" integrity="sha384-

Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSA

wiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

<h2>DATA KOLEKSI BUKU PERPUSTAKAAN</h2>

</div>

<h1 class="ml-5">Ubah Koleksi Buku</h1>

<form method="post" action="prosesubahbuku.php"

class="ml-5">

<?php while ($data=mysqli_fetch_array($hasil)) { ?>

<label for="judul" class="col-sm-1 col-form-label">Judul

Buku</label>

<input type="text" name="judul" class="form-control"

value="<?php echo $data['judul_buku'] ?>" >

</div>

<label for="pengarang" class="col-sm-1 col-form-

label">Pengarang</label>

<input type="text" name="pengarang" class="form-control"

value="<?php echo $data['pengarang'] ?>" >

</div>

<label for="tahun_terbit" class="col-sm-1 col-form-

label">Tahun Terbit</label>

<input type="number" name="tahun_terbit" class="form-

control" value="<?php echo $data['tahun_terbit'] ?>" >

</div>

<label for="kategori" class="col-sm-1 col-form-

label">Kategori</label>

<input type="text" name="kategori" class="form-control"

value="<?php echo $data['kategori'] ?>">

</div>

<button type="submit" class="btn btn-primary mb-1 mt-1 ml-0

mr-0" >Kirim</button>

<a href="index.php" class="btn btn-primary mb-1 mt-1 ml-

0"><i class="fas fa-user-plus mr-0"></i>Koleksi Buku</a>

</form>

<?php } ?>

integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVN

A/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/po

pper.min.js" integrity="sha384-

ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fak

FPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.

min.js" integrity="sha384-

JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyj

Uar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Setelah membuat file “ubahbuku.php” kemudian kita cek hasil

dari code script tersebut. Berikut halaman edit buku:

Gambar 59. Halaman edit buku

Halaman tersebut belum sepenuhnya bisa digunakan untuk

mengedit. Jika tombol “Kirim” di klik maka ke halaman berikut:

Gambar 60. Halaman Error pada proses edit buku

Untuk mengatasi halaman error tersebut maka kita perlu untuk

membuat file dan code script proses ubah buku. File tersebut

digunakan untuk memproses data yang diubah oleh pengguna

sistem yang kemudian akan berubah juga di halaman database yang

sudah dibuat sebelumnya.

Membuat Proses Edit Buku

Setelah halaman ubah buku dibuat kemudian kita membuat

koneksi edit buku tersebut, sehingga edit buku yang dilakukan bisa

di proses dan tersimpan di dalam database.

Buatlah file prosesubahbuku.php. Kemudian isikan kode script

proses ubah buku.

Berikut code script proses ubah buku:

<?php

include_once("koneksi.php");

$id= $_POST['id'];

$judul = $_POST['judul'];

$pengarang= $_POST['pengarang'];

$tahun= $_POST['tahun_terbit'];

$kategori= $_POST['kategori'];

$query="UPDATE tb_buku SET

judul_buku='$judul',pengarang='$pengarang',tahun_terbit='$tahun',

kategori='$kategori' WHERE id_buku=$id";

$hasil=mysqli_query($conn,$query);

if ($hasil) {

header('location:index.php');

} else {

echo "Update data gagal";

}

Setelah File prosesubahbuku.php dibuat, kemudian kita coba

untuk mengubah data buku. Akses halaman utama kemudian pilih

aksi untuk mengubah data koleksi buku.

Gambar 61. Data Awal Judul Buku

Setelah pilih menu aksi, maka akan masuk ke halaman ubah

buku, edit data buku sesuai dengan kebutuhan. Pada gambar

dibawah ini, mengubah judul buku dari “Pemrograman PHP

menjadi Pemrograman PHP dan MySql”.

Gambar 62. Halaman Edit Buku

Gambar 63. Proses Edit Buku

Gambar 64. Hasil Edit Buku

Delete (Menghapus Data)

Delete yaitu suatu proses menghapus record yang telah kita

tentukan dari dalam tabel. File delete ini keberadaannya sangat fital

karena berfungsi untuk menghapus sebuah kesalahan input data

yang umumnya karena human error.

Membuat Button Delete Pada Halaman Utama/Index

Untuk menghapus data, kita perlu membuat tombol baru yaitu

tombol Delete. Kita akan menambahkan tombol Delete pada

Halaman utama di file index.php.

Code Script Button/Tombol Delete

<tr>

<td> <a href="ubahbuku.php?id=<?php echo

$data['id_buku'] ?>">Edit</a>

| <a href="hapusbuku.php?id=<?php echo $data['id_buku']

?>">Delete</a> </td>

</tr>

Setelah menambahkan code script tersebut, akses kembali

halaman utama/index dengan http://localhost/crud/index.php. Jika

berhasil di halaman index akan muncul kolom Aksi dan Button

Edit serta Delete yang akan tampil sebagai berikut:

Gambar 65. Halaman Utama Dengan Button Edit dan Delete

Menu Delete tersebut belum bisa digunakan karena belum

terkoneksi dengan database. Jika menu tersebut diklik, akan

muncul halaman berikut:

Gambar 66. Halaman Error Pada Proses Delete Buku

Membuat Koneksi Delete Buku

Setelah membuat button “Delete”, langkah selanjutnya kita

membuat koneksi untuk Delete buku. Untuk membuat koneksi,

buatlah code script berikut dan simpan dengan nama

“hapusbuku.php”.

Code Script Koneksi Delete Buku

<?php

include_once ("koneksi.php");

$id=$_GET['id'];

$query="delete from tb_buku where id_buku=$id";

$hasil=mysqli_query($conn,$query);

if ($hasil) {

header('location:index.php');

}else {

echo "Hapus Data Gagal";

}

Setelah koneksi berhasil dibuat, button Delete pada halaman

utama sudah bisa digunakan.

CRUD dengan PHP Mysql

Diposting oleh kromx.blogspot.com

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form

Advertisement

CRUD dengan PHP Mysql

Diposting oleh kromx.blogspot.com

Anda mungkin menyukai postingan ini

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

Social Plugin

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form