LAPORAN JOBSHEET PEMROGRAMAN BASIS DATA

Nama : Wahyu Widhi Astuti

Kelas : IK2C

NIM : 3.3.4.20.2.25

Politeknik Negeri Semarang 2021 / 2022

 Bab 12
Membuat Aplikasi Web Berbasis PHP MySQL Bagian 1

Kompetensi Dasar
Setelah mempelajari bab ini mahasiswa dapat memiliki pengetahuan dan ketrampilan sebagai
berikut :
1. Mahasiswa dapat mendesain tabel yang digunakan untuk membangun aplikasi web
2. Mahasiswa dapat menjelaskan fungsi dari MySQLi
3. Mahasiswa dapat mengkoneksikan bahasa pemrograman PHP dengan MySQL
4. Mahasiswa dapat menerapkan query SQL untuk menampilkan data pada browser
5. Mahasiswa dapat menerapkan query SQL untuk menambah data baru dengan form PHP

12.1. Membuat Database dan Desain Tabel

Setelah mempelajari query-query SQL yang disajikan pada bab-bab sebelumnya. Sekarang
kita akan mengimplementasikan query SQL tersebut untuk membuat sebuah sistem informasi
kepegawaian. Pertama kita buat database nya terlebih dahulu. Buat database baru dengan nama
“PBD”. Setelah itu kita buat sebuah tabel bernama “karyawan” dengan struktur tabel seperti
ditunjukan Tabel 12.1.
Tabel 12.1. Struktur Tabel Karyawan

No Field Tipe Data Keterangan

1 Id int(3) Primary Key (auto increment)

2 Nama varchar(30) -

3 Alamat text -

4 Umur int(3) -

5 Jenis_kelamin varchar(10) -
Setelah berhasil membuat tabel karyawan, langkah selanjutnya kita isikan satu data pada tabel
karyawan. Data ini merupakan data dummy yang digunakan untuk keperluan belajar. Isikan data
tersebut dengan query SQL berikut.

INSERT INTO karyawan VALUES (

'Afandi Nat',
'Semarang',
'30',
'Laki-Laki',
);

12.2. Mengenal MySQLi

Mysqli merupakan kependekan dari MySQL Improved Extension. Seperti yang terlihat
dari namanya, extension ini merupakan versi perbaikan dan penambahan dari extension mysql
sebelumnya yang umum digunakan. Extension mysqli dibuat untuk mendukung fitur-fitur
terbaru dari MySQL Server versi 4.1 keatas. Secara garis besar, tidak ada perbedaan mencolok
antara mysql extension dengan mysqli extension. Sebagai contoh, untuk membuat koneksi
dengan MySQL Server, di dalam mysql kita menggunakan fungsi mysql_connect(), sedangkan
di dalam mysqli, kita menggunakan mysqli_connect(). Begitu juga dengan fungsi lain seperti
mysql_query() menjadi mysqli_query().
Selain menambah huruf “i” di dalam nama fungsi, argumen-argumen yang dibutuhkan juga
hampir mirip. Perbedaannya, jika di dalam extension mysql umumnya kita meletakkan argumen
resources di akhir fungsi, maka di dalam mysqli, argumen ini diteletakkan di awal. Peran
dari function MySQLi adalah sebagai jembatan komunikasi antara PHP dan mesin MySQL, PHP
sudah memudahkan sekali untuk kita mengoperasikan MySQL pada sintaks- sintaks PHP. Lebih
lengkap mengenai function-function mysqli yang dipakai pada bahasa PHP, silahkan akses pada
halaman berikut https://www.w3schools.com/php/php_ref_mysqli.asp.
 Gambar 12.1. Fungsi-Fungsi Pada MySQLi

12.3. Mengkoneksikan PHP dengan MySQL

Sistem informasi kepegawaian dibangun menggunakan bahasa pemrograman PHP. Untuk
menghubungkan kode PHP dengan database MySQL, kita buat dahulu sebuah file bernama
connection.php. Kemudian kita tambahkan fungsi MySQLi yaitu mysqli_connect untuk koneksi
dengan database MySQL. Berikut adalah kode lengkap dari kode PHP untuk koneksi ke
database.

1. <?php
2. $connect = mysqli_connect('localhost', 'root', '', 'latihan');
3.
4. if($connect)
5. echo "Berhasil";
6. else
7. echo "Gagal";
8.
9. ?>

Pada skip diatas, terdapat percabangan menggunakan if statement. Apabila berhasil terhubung ke
database, maka akan muncul tampilan seperti pada Gambar 12.2. Namun apabila gagal maka
akan muncul tulisan “Gagal” pada layar browser.
 Gambar 12.2. Program Berhasil Terhubung ke Database

Dikarenakan sistem sudah berhasil terhubung ke database, maka kita tidak perlu menampilkan
tulisan “Berhasil”. Hapus if statement yang sebelumnya ditulis, kemudian ubah kode file
connection.php menjadi seperti berikut.

1. <?php
2. $connect = mysqli_connect('localhost', 'root', '', 'latihan');
3.
4. if(!$connect)
5. exit("Gagal Koneksi Database");
6.
7. ?>

12.4. Menampilkan Data Tabel dengan PHP

Setelah PHP berhasil terhubung ke database, selanjutnya kita buat skip yang berfungsi untuk
menampilkan data. Buat file baru bernama list.php, kemudian tambahkan kode PHP sebagai
berikut.

1. <?php
 2. include('connection.php');
3.
4. $query = mysqli_query($connect, "SELECT * FROM karyawan");
5. $results = mysqli_fetch_all($query, MYSQLI_ASSOC);
6.
7. print_r($results);
8. ?>

Baris ke-2 pada kode diatas berfungsi untuk memanggil file connection.php agar dapat tetap
terhubung ke database. Kemudian baris ke-4 merupakan skrip untuk mengeksekusi query select
yang digunakan untuk menampilkan data pada tabel. Baris ke-5 digunakan untuk mengambil
data dan menampilkan dalam bentuk array. Terakhir baris ke-6 digunakan untuk menampilkan
hasil. Apabila tidak terdapat error maka tampilan program ditunjukan seperti pada Gambar 12.2.

Gambar 12.3. Tampilan Data Karyawan dalam Bentuk Array

Pada Gambar 12.3 menunjukan bahwa program telah dapat mengambil data dari tabel dan
menampilkannya dalam bentuk array. Supaya lebih mudah untuk mengerti oleh user, maka kita
perlu menyajikan datanya ke dalam bentuk tabel. Caranya adalah dengan menambahkan kode
PHP sebagai berikut.
1. <?php
2. include('connection.php');
3.
4. $query = mysqli_query($connect, "SELECT * FROM karyawan");
5. $results = mysqli_fetch_all($query, MYSQLI_ASSOC);
6.
7. ?>
8.
9. <html>
10. <body>
11. <table border="1">
12. <tr>
13. <th>Nama</th>
14. <th>Alamat</th>
15. <th>Umur</th>
16. <th>Jenis Kelamin</th>
17. </tr>
18.
19. <?php foreach($results as $result) :?>
20. <tr>
21. <td><?php echo $result['nama'] ?></td>
22. <td><?php echo $result['alamat'] ?></td>
23. <td><?php echo $result['umur'] ?></td>
24. <td><?php echo $result['jenis_kelamin'] ?></td>
25. </tr>
26.
27. <?php endforeach; ?>
28. </table>
29. </body>
30. </html>
Terdapat penambahan kode pada baris ke-9 sampai baris ke-30. Disini kita tambahkan skip
HTML untuk menampilkan tabel. Sedangkan skip PHP digunakan untuk menampilkan data.
Baris 12 sampai 17 digunakan untuk membuat kolom tabel, sedangkan baris 19 sampai baris 27
digunakan untuk mengambil data dari database.Apabila tidak terdapat error, maka tampilan dari
program list.php ditunjukan seperti pada Gambar 12.4.

Gambar 12.4. Tampilan Tabel Karyawan dalam Program List.php

Tampilan pada Gambar 12.4 menunjukan bahwa program sudah berhasil menampilkan tabel
karyawan. Hal ini ditandai dengan munculnya dua data karyawan didalam tabel.

12.5. Melakukan Insert Data

Setelah berhasil menampilkan data tabel karyawan, selanjutnya kita tambahkan fitur untuk dapat
menambah data (insert). Pertama-tama kita tambahkan tombol “Tambah Data” dibagian atas
tabel sebagai berikut.

1. <?php
2. include('connection.php');
3.
4. $query = mysqli_query($connect, "SELECT * FROM karyawan");
5. $results = mysqli_fetch_all($query, MYSQLI_ASSOC);
6.
7. ?>
8.
9. <html>
10. <body>
11. <a href="add.php">Tambah Data</a>
12. <br/><br/>
13. <table border="1">
14. .....
15. .....
16. </table>
17. </body>
18. </html>
Kode pada baris ke-11 digunakan untuk menambahkan hyperlink agar tulisan “Tambah Data”
dapat diklik. Sehingga tampilan dari program list.php berubah seperti ditunjukan pada Gambar
12.5.

Gambar 12.5. Penambahan Label “Tambah Data”

Ketika tombol “Tambah Data” diklik maka akan muncul halam baru yang berisi form tambah
karyawan. Untuk membuat halaman baru yang berfungsi untuk insert data, maka kita perlu
membuat sebuah file PHP baru bernama add.php yang berfungsi untuk menampilkan form
tambah data. Adapun isi dari file add.php adalah sebagai berikut.
1. <html>
2. <form action="insert.php" method="post">
3. <label>Nama</label><br/>
4. <input type="text" name="nama" />
5. <br/><br/>
6. <label>Alamat</label><br/>
7. <textarea name="alamat" cols="30" rows="10"></textarea>
8. <br/><br/>
9.
10. <label>Umur</label><br/>
11. <input type="text" name="umur" />
12. <br/><br/>
13.
14. <label>Jenis Kelamin</label><br/>
15. <select name="jenis_kelamin">
16. <option value="Pria">Pria</option>
17. <option value="Wanita">Wanita</option>
18. </select>
19. <br/><br/>
20. <button type="submit">Tambah</button>
21. </form>
22. </html>

Apabila tidak terdapat error, maka tampilan dari form tambah data ditunjukan seperti pada
Gambar 12.6.
 Gambar 12.6. Tampilan Form Tambah Data

Form tambah dari pada Gambar 12.6 belum dapat digunakan untuk menambahkan data baru dari
tabel karyawan. Hal ini dikarenakan kita belum menambahkan query untuk menambah data.
Oleh karena itu, seperti ditunjukan pada kode program add.php pada baris ke-2 kita tambahkan
file insert.php. Pada file insert.php kita tambahkan query insert untuk menambahkan data di tabel
karyawan. Adapun kode dari insert.php adalah sebagai berikut.
1. <?php
2. include('connection.php');
3.
4. $nama = $_POST['nama'];
5. $alamat = $_POST['alamat'];
6. $umur = $_POST['umur'];
7. $jenis_kelamin = $_POST['jenis_kelamin'];
8.
9. $insert=mysqli_query($connect,"INSERT INTO karyawan SET nama='$nama', alamat='$al
amat', umur='$umur', jenis_kelamin='$jenis_kelamin'");
10.
11. if($insert)
12. header('Location: list.php');
13. else
14. echo 'Input data gagal';
15. ?>
Setelah menambahkan kode pada insert.php, sekarang mari kita coba untuk menambah data baru.
Kita klik “Tambah Data”, lalu isi form secara lengkap. Apabila tidak terdapat error maka
program akan langsung mengarahkan ke file list.php. Namun jika terdapat error maka akan
muncul pesan “Input data gagal”. Lebih jelasnya kita coba untuk menambahkan data baru
dengan nama “Thohari”, asal Yogyakarta, umur 31 tahun, dan Jenis Kelamin Pria, seperti
ditunjukan Gambar 12.7.

Gambar 12.7. Simulasi Tambah Data Baru Pada Tabel Karyawan

Evaluasi
Setelah mempelajari mengenai koneksi database, menampilkan tabel dan juga insert data.
Sekarang mari kita implementasikan yang telah kita pelajari dengan membuat form login dan
form register. Data dari form login dan register berasal dari database pbd yang telah di buat
sebelumnya. Namun untuk tabelnya tidak menggunakan tabel karyawan, kita buat tabel baru
dengan nama authentikasi. Adapun struktur dari tabel authentikasi adalah sebagai berikut.
Tabel 12.2. Authentikasi
No Field Tipe Data Keterangan

1 id_auth int(3) Primary Key (auto increment)

2 username varchar(30) -

3 Email varchar(50) -
 4 Password varchar(255) -

Jawab :
 Untuk membuat database baru, maka yang perlu kita lakukan mengaktifkan mysql pada
xampp, lalu kita create database baru dan buat tabelnya

Setelah tabel authentikasi berhasil dibuat, silahkan buat tampilan Register / Sign Up Form
menggunakan PHP & HTML. Sehingga tampilan dari Register Form sebagaimana ditunjukan
pada Gambar 12.8.
 Gambar 12.8. Tampilan Form Register
Ketika menekan rombol register, maka secara otomatis akan menambah data pada Tabel
authentikasi. Data ini lah yang nanti akan digunakan pada form login. Apabila data sesuai
dengan yang terisi di tabel maka akan masuk ke tampilan tabel karyawan. Adapun tampilan dari
form login ditunjukan pada Gambar 12.9.

Gambar 12.9. Tampilan Form Login

Pertanyaan : Buatlah tampilan form register dan login seperti pada Gambar 12.8 dan Gambar
12.9. Tambahkan pula fungsionalitas pada kedua form tersebut menggunakan bahasa PHP.
Jawab :

 Setelah membuat database dan juga table, langkah selanjutnya yang harus kita lakukan
adalah membuat kode program untuk menghubungkan database dan table. File tersebut
akan kita simpan pada direktory htdocs dengan nama file index.php
 Jika sudah kita cek apakah koneksinya sudah dapat berjalan atau belum, dengan
membuka file index ini pada browser

 Kemudian kita lanjut ke tahap berikutnya

 Untuk membuat tampilan seperti pada gambar diatas terlebih dahulu kita buat kode
programnya dan kita simpan sebagai file .php
 Untuk filenya kita simpan pada direktori htdocs.
 Jika nanti kita buka file tersebut dalam phpmyadmin maka akan muncul seperti gambar
dibawah. Setelah itu jangan lupa isikan data lalu klik daftar

 Setelah kita klik daftar maka nanti akan muncul tampilan bahwa anda sudah terdaftar
 Setelah itu kita buat kode program untuk bagian login. Untuk filenya kita simpan pada
direktory htdocs dengan format file .php

 Jika sudah jika kita buka pada phpmyadmin akan muncul seperti gambar dibawah ini.
 Ketika akan login kita diharuskan untuk mengisi data username dan juga password
 Jika proses login berhasil maka akan muncul tampilan seperti gambar dibawah ini

 Hal yang perlu diperhatikan adalah ketika kita membuat form daftar dan login adalah kita
juga perlu menghubungkan antara file daftar dan login ke file index.php. karena file
index inilah akan menghubungkan dengan database yang telah dibuat
 Jika sudah maka nanti data akan tertambah pada tabel yang telah kita buat