LAPORAN HASIL PRAKTIKUM

PEMROGRAMAN WEB DAN MOBILE I

NAMA : AMELIA STEFANY

NIM : 213010503007
KELAS : D (13.40 – 15.10 WIB)
MODUL : III (PHP MYSQL DATABASE)

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS PALANGKA RAYA
2023
 BAB I
TUJUAN DAN LANDASAN TEORI

1.1. Tujuan
1.1.1. Mahasiswa mampu membuat program yang bisa menyimpan data
dalam jumlah yang banyak.
1.1.2. Mahasiswa mampu membuat program yang bisa mengolah data yang
tersimpan dalam database.
1.2. Landasan Teori
Data dalam database MySQL disimpan dalam tabel-tabel. Sebuah tabel
adalah koleksi dari data yang berelasi dan mengandung kolom dan baris.
Database sangat bermanfaat untuk menyimpan informasi secara kategori.
Contoh yang akan diberikan pada modul praktikum ini adalah tabel yang
mengandung data Employees (Pekerja), Products (Produk), Customers
(Pelanggan) dan Orders (Pesanan).
1.2.1. Membuka Koneksi
Sebelum mengakses data dalam database MySQL, kita harus
terhubung ke server database MySQL. Berikut adalah contoh kode
program agar terhubung dengan server mySQL:

Jika kode diatas tidak berhasil, kemungkinan variabel

$connect_error sudah tidak tersedia pada versi PHP yang kita
gunakan, maka gunakan kode program berikut:
 Ketika selesai menggunakan data dari database, sebaiknya
koneksi atau hubungan ke server ditutup, caranya dengan menggukan
kode program berikut:
mysqli_close($conn);
1.2.2. Membuat Database
Database pada MySQL bisa juga dibuat menggunakan kode
program PHP. Program tersebut akan berisi statement SQL “CREATE
DATABASE”. Berikut adalah contoh program yang digunakan untuk
membuat database “myDB”:
1.2.3. Membuat Tabel
Pembuatan tabel pada bahasa pemrograman PHP juga
menggunakan statement SQL, yaitu statement “CREATE TABLE”.
Contoh yang akan diberikan adalah pembuatan tabel MyGuests.
Statement pembuatan tabel MyGuests adalah sebagai berikut:

Berikut adalah contoh program untuk membuat tabel diatas:

1.2.4. Memasukkan Data ke Database

Untuk memasukkan data kedalam tabel di database, terdapat
beberapa aturan sintaks yang harus diikuti:
1. Query SQL harus diberikan kutip dalam PHP.
2. Nilai string didalam query SQL harus diberikan kutip.
3. Nilai string didalam query SQL harus diberikan kutip.
4. Nilai NULL tidak harus diberikan kutip.
Statement INSERT INTO digunakan untuk menambahkan baris
pada tabel MySQL, query untuk menambahkan data bersebut adalah
sebagai berikut:
INSERT INTO table_name (column1, column2, column3,...)
VALUES (value1, value2, value3,…)
Adapun contoh kode program PHP untuk menambahkan data
tersebut adalah sebagai berikut:

Jika kita melakukan perintah INSERT pada tabel yang

menggunakan field dengan opsi AUTO_INCREMENT, kita bisa
mendapatkan ID dari baris yang terakhir diinputkan. Caranya
menggunakan fungsi mysqli_insert_id($conn); nilai kembalian dari
fungsi ini akan memberikan id dari record atau baris terakhir yang
diinputkan.
 Untuk menambahkan record dengan jumlah yang banyak, kita
bisa menggunakan fungsi mysqli_multi_query($conn, $sql), berikut
adalah contoh program untuk menambahkan record dengan jumlah
yang banyak:

1.2.5. Mengambil Data dari Database

Untuk mengambil data, statement SQL yang digunakan adalah
SELECT nama_kolom() FROM nama_tabel, atau kita bisa
menggunakan karakter * untuk memilih semua kolom yang ada pada
tabel. Pengambilan data dengan kriteria tertentu bisa dilakukan
dengan menggunakan statement WHERE setelah nama_tabel.
Adapun contoh kode program untuk mengambil data dari database
adalah sebagai berikut:
1.2.6. Menghapus Data dari Database
Statement DELETE digunakan untuk menghapus baris data atau
records dari tabel. Clause WHERE digunakan untuk
menspesifikasikan baris yang akan dihapus. Jika statement DELETE
digunakan tanpa menggunakan clausa WHERE, maka semua record
yang ada pada tabel akan dihapus.

Jika kita memiliki data seperti tabel “MyGuest” seperti terlihat

diatas, kemudian kita ingin menghapus data dengan nama depan Julie,
maka kode program untuk menghapus data tersebut adalah sebagai
berikut:
1.2.7. Update Data dalam Database
Untuk melakukan perubahan data di dalam database, statement
UPDATE digunakan, yaitu sebagai berikut:

Jika statement ini digunakan untuk update data ke dua pada tabel
“MyGuest” diatas untuk mengganti nama belakang dari “Moe”
menjadi “Doe”, maka kode program untuk update tersebut adalah
sebagai berikut:
 BAB II
PEMBAHASAN

2.1. Tugas Praktikum

1. Buatlah database pada MySql untuk menyimpan data-data pegawai
beserta relasi tabelnya.
2. Buatlah program untuk menyimpan, menghapus dan mengubah data-data
pegawai tersebut.
2.2. Pembahasan
2.2.1. Membuat Database pada MySQL
Pertama, pada nomor 1 diminta untuk membuat sebuah database
pada MySQL untuk menyimpan data-data pegawai tabelnya. Berikut
adalah query untuk membuat databasenya :
CREATE DATABASE pegawai;

Lalu setelah itu membuat tabel beserta kolom-kolomnya pada

database tersebut, tabel disini terdapat dua tabel yakni tabel pegawai
dan tabel login. Berikut adalah query untuk membuat tabel dan kolom-
kolomnya.

Gambar 2.1. Tabel Pegawai

Gambar 2.2. Tabel Login

 Selanjutnya memasukkan data-data dari pegawai dan dari login
ke dalam tabel dari database tersebut. Berikut adalah query insert data
ke tabel pegawaiku.
INSERT INTO pegawaiku (nama, jabatan, gaji)
VALUES ('John Doe', 'Manajer', 10000000),
('Amel', 'Marketing', 10000000),
('Stefany’, 'IT', 15000000));

Pertama, kita menentukan tabel yang akan di-insert datanya

dengan perintah "INSERT INTO pegawaiku". Selanjutnya, kita
menentukan kolom-kolom mana saja yang akan diisi dengan data
baru, yaitu kolom "nama", "jabatan", dan "gaji".
Lalu, kita masukkan nilai untuk setiap kolom yang akan diisi.
Contoh di atas akan memasukkan data baru dengan nama 'John Doe',
jabatan 'Manajer', dan gaji 10.000.000 ke dalam tabel "pegawaiku".
Nilai kolom id tidak perlu ditentukan karena kolom tersebut
menggunakan AUTO_INCREMENT, sehingga nilai id akan otomatis
di-generate oleh MySQL.
Berikut adalah query insert data ke tabel loginku.
INSERT INTO loginku (username, password)
VALUES ('john_doe', 'password123'),
('Amel', 'password222'),
('Stefany', 'password333');

Pertama, kita menentukan tabel yang akan di-insert datanya

dengan perintah "INSERT INTO loginku". Selanjutnya, kita
menentukan kolom-kolom mana saja yang akan diisi dengan data
baru, yaitu kolom "username" dan "password".
Lalu, kita masukkan nilai untuk setiap kolom yang akan diisi.
Contoh di atas akan memasukkan data baru dengan username
'john_doe' dan password 'password123' ke dalam tabel "loginku".
 Karena kolom id menggunakan AUTO_INCREMENT, nilai id
akan di-generate secara otomatis oleh MySQL ketika data baru di-
insert ke dalam tabel. Oleh karena itu, tidak perlu menyertakan nilai
untuk kolom id pada sintaks INSERT.
2.2.2. Membuat Program untuk Menyimpan, Menghapus dan
Mengubah Data Pegawai
Pada nomor 2 diminta untuk membuat sebuah program untuk
menyimpan menghapus dan juga mengubah data-data pegawai. Disini
terdapat 9 file php, 2 file html, dan 1 file css yang masing-masing
memiliki kegunaan serta fungsinya masing-masing, berikut adalah
penjelasannya.
Connect.php
<?php
// Konfigurasi database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "pegawai";

// Buat connect
$conn = new mysqli($servername, $username, $password,
$dbname);

// Cek connect
if ($conn->connect_error) {
die("connect gagal: " . $conn->connect_error);
}
?>

Program ini adalah sebuah script PHP yang digunakan untuk

melakukan koneksi ke sebuah database MySQL dengan
menggunakan class mysqli. Pertama, program ini mendefinisikan
konfigurasi database seperti servername, username, password, dan
dbname. Kemudian, program ini membuat koneksi ke database
menggunakan mysqli dengan parameter konfigurasi yang sudah
didefinisikan sebelumnya.
 Setelah koneksi berhasil dibuat, program ini melakukan
pengecekan apakah terjadi error saat melakukan koneksi dengan
menggunakan method connect_error. Jika terdapat error, maka
program akan memberikan pesan "connect gagal" beserta keterangan
error yang ditemukan. Namun, jika koneksi berhasil terhubung, maka
program akan melanjutkan ke tahap selanjutnya, seperti melakukan
query ke database atau mengambil data dari tabel-tabel di dalam
database.
Index.php
<?php
session_start();
if(!isset($_SESSION['username'])){
header("location: loginform.html");
exit;
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Data Pegawai</title>
<style>
body {
font-family: sans-serif;
}

h1 {
text-align: center;
margin-top: 50px;
}

table {
border-collapse: collapse;
margin: 0 auto;
}

th, td {
padding: 10px;
text-align: center;
}

th {
background-color: #4CAF50;
 color: white;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

a.button {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin-top: 20px;
}

a.button:hover {
background-color: #3e8e41;
}

a.edit {
background-color: #2196F3;
color: white;
padding: 5px 10px;
text-decoration: none;
border-radius: 5px;
margin-right: 10px;
}

a.edit:hover {
background-color: #0b7dda;
}

a.delete {
background-color: #f44336;
color: white;
padding: 5px 10px;
text-decoration: none;
border-radius: 5px;
}

a.delete:hover {
background-color: #da190b;
}
</style>
</head>
<body>
<h1>Data Pegawai</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Nama</th>
<th>Jabatan</th>
<th>Gaji</th>
<th>Aksi</th>
</tr>
<?php
include 'connect.php';
// Tampilkan semua data pegawai
$sql = "SELECT * FROM pegawaiku";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['nama']; ?></td>
<td><?php echo $row['jabatan']; ?></td>
<td><?php echo $row['gaji']; ?></td>
<td>
<a href="ubah.php?id=<?php echo
$row['id']; ?>" class="edit">Ubah</a>
<a href="hapus.php?id=<?php echo
$row['id']; ?>" class="delete" onclick="return
confirm('Apakah anda yakin ingin menghapus data
ini?')">Hapus</a>
</td>
</tr>
<?php endwhile; ?>
</table>
<div style="text-align: center; margin-top: 10px;">
<a href="tambah.php" class="button">Tambah
Data</a>
<div style="text-align: center; margin-top:
15px;">
<a class="btn btn-danger" href="logout.php"
role="button">Logout</a>
</div>
</body>
</html>

Program ini adalah sebuah halaman web yang menampilkan data

pegawai dari sebuah tabel di dalam database. Program ini
menggunakan session untuk melakukan autentikasi pengguna,
sehingga pengguna harus login terlebih dahulu sebelum bisa
mengakses halaman ini.
Pada awal program, dilakukan pengecekan apakah session
dengan key 'username' sudah ter-set. Jika belum, maka program akan
melakukan redirect ke halaman loginform.html dan keluar dari script.
Selanjutnya, program ini menampilkan tabel dengan informasi
pegawai yang diambil dari tabel "pegawaiku" di database. Untuk
mengakses database, program menggunakan file "connect.php" yang
di-include pada script ini.
Program ini menampilkan data pegawai ke dalam tabel HTML,
dengan setiap baris menunjukkan informasi satu pegawai. Terdapat
kolom untuk ID, Nama, Jabatan, Gaji, dan Aksi. Kolom Aksi berisi
dua tombol, yaitu tombol untuk mengedit dan tombol untuk
menghapus data pegawai tersebut.
Pada bagian bawah tabel, terdapat tombol "Tambah Data" yang
mengarahkan pengguna ke halaman "tambah.php" untuk
menambahkan data pegawai baru. Terdapat juga tombol "Logout"
yang mengarahkan pengguna ke halaman "logout.php" untuk
melakukan logout dan mengakhiri session.

Login.php
<?php
session_start();
include 'connect.php';

// Cek apakah username dan password sesuai dengan data di

database
if(isset($_POST['submit'])){
$username = $_POST['username'];
$password = $_POST['password'];

$query = mysqli_query($conn, "select * from loginku

where username = '$username' and password ='$password'");
$cek = mysqli_num_rows($query);

if ($cek > 0) {
 $data = mysqli_fetch_assoc($query);
$_SESSION['username'] = $data['username'];
$_SESSION['password'] = $data['password'];

if($_SESSION['username']== $data['username'] &&

$_SESSION['password'] == $data['password']){
header("location:index.php");
}
}
else{
echo "<script>alert('Login Gagal');
window.location='loginform.html';</script>";
}
}
?>

Program ini adalah script PHP untuk proses login dengan

menggunakan database. Pertama, dilakukan pemanggilan
session_start() dan include file connect.php yang berisi konfigurasi
koneksi database. Kemudian, dilakukan pengecekan apakah form
login telah di-submit dengan menggunakan isset($_POST['submit']).
Jika form login telah di-submit, maka dilakukan pengambilan
nilai dari form untuk username dan password, dan query untuk
mengambil data dari tabel loginku dengan menggunakan username
dan password yang diinputkan. Hasil query disimpan pada variabel
$query dan kemudian dilakukan pengecekan jumlah baris yang
terdapat pada hasil query dengan menggunakan
mysqli_num_rows($query).
Jika jumlah baris ($cek) lebih dari 0, artinya data login yang
diinputkan sesuai dengan data di database. Data username dan
password dari hasil query disimpan pada variabel $data['username']
dan $data['password']. Kemudian, dilakukan pengecekan apakah
$_SESSION['username'] dan $_SESSION['password'] sama dengan
data username dan password yang ada di database. Jika sama, maka
akan di-redirect ke halaman index.php.
Namun, jika jumlah baris tidak lebih dari 0, artinya data login
yang diinputkan tidak sesuai dengan data di database. Maka akan
muncul alert "Login Gagal" dan halaman akan di-redirect ke halaman
loginform.html.

Register.php
<?php
session_start();
require_once 'connect.php';

if(isset($_POST['username']) &&
isset($_POST['password'])) {
// Ambil data dari form
$username = $_POST['username'];
$password = $_POST['password'];

// Validasi data
if (strlen($username) < 5) {
echo "Username harus terdiri dari minimal lima
karakter";
exit();
}

if (strlen($password) < 8) {
echo "Password harus terdiri dari minimal delapan
karakter";
exit();
}

// Masukkan data login ke dalam database

$sql = "INSERT INTO loginku (username, password)
VALUES ('$username', '$password')";

if ($conn->query($sql) === TRUE) {

echo "Registrasi berhasil. Silakan login <a
href='index.php'>di sini</a>";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}

$conn->close();
?>
 Program di atas merupakan script PHP untuk melakukan
registrasi pengguna baru ke dalam database MySQL. Berikut adalah
penjelasan dari masing-masing bagian script tersebut:
1. Pertama-tama, dilakukan pemanggilan fungsi session_start()
untuk memulai session PHP.
2. Selanjutnya, dilakukan pemanggilan file connect.php yang berisi
script untuk melakukan koneksi ke database MySQL.
3. Kemudian, program melakukan pengecekan apakah ada data
yang dikirimkan dari form dengan menggunakan
isset($_POST['username']) && isset($_POST['password']). Jika
data sudah terkirim, maka program akan melanjutkan eksekusi.
4. Setelah itu, program akan mengambil data username dan
password dari form dengan menggunakan $_POST['username']
dan $_POST['password'].
5. Dilakukan validasi terhadap data username dan password. Jika
username kurang dari lima karakter atau password kurang dari
delapan karakter, maka program akan memberikan pesan error
dan menghentikan eksekusi dengan menggunakan fungsi exit().
6. Jika data sudah valid, maka program akan menambahkan data
username dan password ke dalam tabel loginku di database
dengan menggunakan query INSERT INTO loginku (username,
password) VALUES ('$username', '$password').
7. Jika query berhasil dieksekusi, maka program akan memberikan
pesan bahwa registrasi berhasil dengan memberikan tautan untuk
login. Jika tidak berhasil, maka program akan memberikan pesan
error beserta detail errornya.
8. Terakhir, koneksi ke database ditutup dengan menggunakan
fungsi $conn->close().

Tambah.php
<?php
// Panggil connect database
require_once 'connect.php';
// Jika tombol simpan ditekan
if(isset($_POST['simpan'])) {
$nama = $_POST['nama'];
$jabatan = $_POST['jabatan'];
$gaji = $_POST['gaji'];

// Tambahkan data ke database

$sql = "INSERT INTO pegawaiku (nama, jabatan, gaji)
VALUES ('$nama', '$jabatan', '$gaji')";

if ($conn->query($sql) === TRUE) {

header('Location: index.php');
exit();
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Tambah Data Pegawai</title>
</head>
<body>
<h1 style="font-size: 2rem; font-weight:
bold;">Tambah Data Pegawai</h1>
<form method="post" style="margin-top: 20px;">
<div style="display: flex; flex-direction:
column; align-items: flex-start;">
<label for="nama" style="font-size: 1.2rem;
margin-bottom: 5px;">Nama:</label>
<input type="text" name="nama" id="nama"
style="padding: 5px; font-size: 1.2rem; border-radius:
5px; border: 1px solid #ccc; margin-bottom: 10px;">
<label for="jabatan" style="font-size:
1.2rem; margin-bottom: 5px;">Jabatan:</label>
<input type="text" name="jabatan"
id="jabatan" style="padding: 5px; font-size: 1.2rem;
border-radius: 5px; border: 1px solid #ccc; margin-
bottom: 10px;">
<label for="gaji" style="font-size: 1.2rem;
margin-bottom: 5px;">Gaji:</label>
 <input type="number" name="gaji" id="gaji"
style="padding: 5px; font-size: 1.2rem; border-radius:
5px; border: 1px solid #ccc; margin-bottom: 10px;"><br>
<input type="submit" name="simpan"
value="Simpan" style="background-color: #4CAF50; color:
white; border: none; padding: 10px 20px; border-radius:
5px; font-size: 1.2rem; margin-top: 20px; cursor:
pointer;">
</div>
</form>
</body>
</html>

Program di atas adalah sebuah form untuk menambahkan data

pegawai ke dalam database. Pada bagian atas program terdapat kode
untuk menghubungkan ke database melalui file connect.php.
Kemudian, pada bagian bawah program terdapat form yang berisi
input untuk memasukkan data pegawai, yaitu nama, jabatan, dan gaji.
Form ini menggunakan method POST dan ketika tombol Simpan
ditekan, data akan disimpan ke dalam database menggunakan perintah
SQL INSERT INTO.
Pada program ini, ketika tombol Simpan ditekan, program akan
memeriksa apakah data sudah berhasil disimpan ke dalam database.
Jika berhasil, program akan mengarahkan pengguna ke halaman
index.php. Namun jika gagal, maka program akan menampilkan
pesan error.

Ubah.php
<?php
// Panggil connect database
require_once 'connect.php';

// Jika tombol simpan ditekan

if(isset($_POST['simpan'])) {
$id = $_POST['id'];
$nama = $_POST['nama'];
$jabatan = $_POST['jabatan'];
$gaji = $_POST['gaji'];
 // Ubah data di database
$sql = "UPDATE pegawaiku SET nama='$nama',
jabatan='$jabatan', gaji='$gaji' WHERE id='$id'";

if ($conn->query($sql) === TRUE) {

header('Location: index.php');
exit();
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
} else {
// Ambil data pegawai yang akan diubah
$id = $_GET['id'];
$sql = "SELECT * FROM pegawaiku WHERE id='$id'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Ubah Data Pegawai</title>
</head>
<body>
<h1 style="font-size: 2rem; font-weight: bold;">Ubah
Data Pegawai</h1>
<form method="post" style="margin-top: 20px;">
<div style="display: flex; flex-direction:
column; align-items: flex-start;">
<input type="hidden" name="id" value="<?php
echo $row['id']; ?>">
<label for="nama" style="font-size: 1.2rem;
margin-bottom: 5px;">Nama:</label>
<input type="text" name="nama" id="nama"
value="<?php echo $row['nama']; ?>" style="padding: 5px;
font-size: 1.2rem; border-radius: 5px; border: 1px solid
#ccc; margin-bottom: 10px;">
<label for="jabatan" style="font-size:
1.2rem; margin-bottom: 5px;">Jabatan:</label>
<input type="text" name="jabatan"
id="jabatan" value="<?php echo $row['jabatan']; ?>"
style="padding: 5px; font-size: 1.2rem; border-radius:
5px; border: 1px solid #ccc; margin-bottom: 10px;">
 <label for="gaji" style="font-size: 1.2rem;
margin-bottom: 5px;">Gaji:</label>
<input type="number" name="gaji" id="gaji"
value="<?php echo $row['gaji']; ?>" style="padding: 5px;
font-size: 1.2rem; border-radius: 5px; border: 1px solid
#ccc; margin-bottom: 10px;"><br>
<input type="submit" name="simpan"
value="Simpan" style="background-color: #4CAF50; color:
white; border: none; padding: 10px 20px; border-radius:
5px; font-size: 1.2rem; margin-top: 20px; cursor:
pointer;">
</div>
</form>
</body>
</html>

Program ini adalah sebuah form untuk mengubah data pegawai

pada suatu database. Pertama, program ini memanggil file
"connect.php" yang berfungsi untuk menghubungkan program
dengan database. Kemudian, program ini memeriksa apakah tombol
"simpan" telah ditekan menggunakan pernyataan if. Jika ya, maka
program akan mengambil nilai dari inputan form yang disubmit dan
menyimpannya ke dalam variabel $id, $nama, $jabatan, dan $gaji.
Selanjutnya, program akan mengeksekusi query SQL untuk
mengubah data pegawai yang terdapat pada tabel "pegawaiku" pada
database. Jika query berhasil dijalankan, maka program akan
mengalihkan halaman ke index.php. Namun, jika query gagal
dijalankan, maka program akan menampilkan pesan error.
Jika tombol "simpan" belum ditekan, maka program akan
menampilkan form untuk mengubah data pegawai. Pertama, program
akan mengambil nilai $id dari parameter GET pada URL. Kemudian,
program akan mengeksekusi query SQL untuk mengambil data
pegawai yang memiliki id yang sesuai dengan nilai $id. Data pegawai
tersebut kemudian disimpan ke dalam variabel $row.
Terakhir, program ini menampilkan form yang berisi inputan
untuk mengubah data pegawai. Form tersebut terdiri dari inputan
untuk mengisi nama, jabatan, dan gaji. Ketika form disubmit, program
akan memperbarui data pegawai pada database dengan menggunakan
query UPDATE. Jika query berhasil dijalankan, maka program akan
mengalihkan halaman ke index.php.

Simpan.php
<?php
require_once 'connect.php';

if(isset($_POST['nama']) && isset($_POST['jabatan']) &&

isset($_POST['gaji'])) {
$nama = $_POST['nama'];
$jabatan = $_POST['jabatan'];
$gaji = $_POST['gaji'];

// Validasi data
if (strlen($nama) < 3) {
echo "Nama harus terdiri dari minimal tiga
karakter";
exit();
}

if (strlen($jabatan) < 3) {
echo "Jabatan harus terdiri dari minimal tiga
karakter";
exit();
}

if ($gaji < 1000000) {

echo "Gaji minimal adalah Rp 1.000.000,-";
exit();
}

// Masukkan data pegawai ke dalam database

$sql = "INSERT INTO pegawai (nama, jabatan, gaji)
VALUES ('$nama', '$jabatan', '$gaji')";

if ($conn->query($sql) === TRUE) {

echo "Data berhasil disimpan";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
 Program ini merupakan sebuah script PHP yang berfungsi untuk
memvalidasi dan menyimpan data pegawai ke dalam database.
Pertama-tama, program ini memanggil file connect.php yang berisi
script untuk menghubungkan ke database. Kemudian, program ini
mengecek apakah ada data yang dikirim melalui metode POST dari
form input pada halaman sebelumnya dengan menggunakan fungsi
isset().
Selanjutnya, program ini menyimpan data yang diterima dari
form input ke dalam variabel $nama, $jabatan, dan $gaji. Kemudian,
dilakukan validasi data dengan mengecek panjang karakter nama dan
jabatan, serta nilai gaji agar memenuhi persyaratan. Jika tidak
memenuhi, maka akan ditampilkan pesan error dan program
dihentikan dengan menggunakan fungsi exit().
Jika data sudah valid, program ini akan memasukkan data
pegawai ke dalam database menggunakan perintah SQL INSERT
INTO. Jika data berhasil disimpan, maka akan ditampilkan pesan
sukses. Namun jika terjadi error, maka akan ditampilkan pesan error
beserta pesan error yang dihasilkan oleh database.
Terakhir, program menutup koneksi ke database dengan
menggunakan fungsi $conn->close().

Hapus.php
<?php
// Panggil connect database
require_once 'connect.php';

// Hapus data pegawai dari database

$id = $_GET['id'];
$sql = "DELETE FROM pegawaiku WHERE id='$id'";

if ($conn->query($sql) === TRUE) {

header('Location: index.php');
exit();
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

Program ini merupakan script PHP yang berfungsi untuk

menghapus data pegawai dari sebuah database. Pertama-tama,
program ini memanggil file "connect.php" yang berisi script untuk
melakukan koneksi ke database. Kemudian, program ini mengambil
nilai ID dari pegawai yang akan dihapus dengan menggunakan
metode GET dari URL. Selanjutnya, program ini menghapus data
pegawai dari database dengan menggunakan perintah SQL DELETE
yang diletakkan di dalam variabel $sql. Jika operasi penghapusan data
pegawai berhasil, program akan mengarahkan pengguna kembali ke
halaman index.php dan keluar dari script dengan fungsi exit(). Namun
jika terjadi kesalahan dalam menghapus data, program akan
menampilkan pesan error beserta pesan kesalahan dari database.
Terakhir, koneksi ke database akan ditutup dengan menggunakan
fungsi $conn->close().

Logout.php
<?php
session_start();
session_destroy();

header('location: loginform.html');
exit;
?>

Program ini adalah script PHP untuk melakukan logout dari

sebuah website. Saat user mengakses halaman ini, fungsi
session_start() akan dijalankan untuk memulai session PHP.
Kemudian fungsi session_destroy() akan dipanggil untuk menghapus
semua data session yang tersimpan. Setelah itu, user akan diarahkan
kembali ke halaman login menggunakan fungsi header(), dengan
tujuan untuk memberikan pengalaman yang lebih baik bagi user.
Terakhir, fungsi exit digunakan untuk mengakhiri proses PHP yang
sedang berjalan.

Loginform.html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css"
href="style.css?v=<?php echo time(); ?>">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontaweso
me-free@6.2.1/css/all.min.css">
</head>
<body>
<div class="formbox">
<form action="login.php" method="post">
<h1>Login</h1>
<div class="input-box">
<label>Username:</label>
<input type="text" name="username"
maxlength="7" required>
</div>

<div class="input-box">
<label>Password:</label>
<input type="password" name="password"
required>
<span class="eye" onclick="myfunction()">
<i id="hide1" class="fas fa-eye"></i>
<i id="hide2" class="fas fa-eye-
slash"></i>
</span>
</div>
<button type="submit" name="submit"
class="btn">Login</button>
</form>
<div class="link">
<p style="text-align: center;">Belum punya akun?
<a href="register.html">Daftar sekarang</a></p>
</div>
</div>

<script>
function myfunction(){
 var x = document.getElementById("myinput");
var y = document.getElementById("hide1");
var z = document.getElementById("hide2");
if(x.type === 'password'){
x.type = "text";
y.style.display = "block";
z.style.display = "none";
}
else{
x.type = "password";
y.style.display = "none";
z.style.display = "block";
}
}
</script>
<script
src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></scri
pt>
<script>
var typed = new Typed(".auto",{
strings: ["form", "form me", "my heart"],
typeSpeed: 150,
backSpeed: 100,
loop: true
})
</script>
</body>
</html>

Program di atas adalah sebuah halaman HTML yang

menampilkan form login dengan style CSS dan menggunakan
beberapa fitur JavaScript. Form ini memiliki dua input yaitu untuk
memasukkan username dan password, serta sebuah tombol untuk
mengirimkan data ke server untuk proses login. Beberapa hal yang
terdapat pada halaman ini:
1. Terdapat dua file CSS, yaitu style.css yang dibuat sendiri dan
all.min.css dari Font Awesome. File CSS digunakan untuk
mempercantik tampilan halaman.
2. Terdapat dua file JavaScript, yaitu script yang digunakan untuk
mengubah tampilan password (dalam bentuk karakter biasa atau
 titik-titik) ketika tombol mata di klik, dan typed.js untuk membuat
animasi teks pada elemen dengan kelas "auto".
3. Terdapat sebuah form dengan action "login.php" yang akan
mengirimkan data yang dimasukkan pada form ini ke file
"login.php" untuk proses login.
4. Input username memiliki atribut name "username" dan
membatasi jumlah karakter yang dapat dimasukkan sebanyak 7
karakter dengan atribut maxlength="7".
5. Input password memiliki atribut name "password" dan diatur
menjadi tipe password agar karakter yang dimasukkan tidak
terlihat.
6. Terdapat sebuah span dengan kelas "eye" yang berisi dua ikon
mata. Ketika salah satu ikon tersebut diklik, maka tipe input
password akan berubah sehingga dapat dilihat atau
disembunyikan.
7. Terdapat sebuah tombol submit dengan atribut name "submit"
dan teks "Login".
8. Terdapat sebuah link untuk menuju halaman "register.html" jika
user belum memiliki akun.
9. Terdapat sebuah teks yang ditampilkan pada elemen dengan kelas
"auto" dengan menggunakan library typed.js. Teks yang
ditampilkan akan berubah-ubah dengan animasi ketika
ditampilkan.

Register.html
<!DOCTYPE html>
<html>
<head>
<title>Registrasi Form</title>
<link rel="stylesheet" href="style.css?v=<?php echo
time(); ?>">
</head>
<body>
<div class="formbox">
<form action="register.php" method="post">
 <h1>Registrasi</h1>
<div class="input-box">
<label>Username:</label>
<input type="text" name="username"
maxlength="7" required>
</div>

<div class="input-box">
<label>Password:</label>
<input type="password" name="password"
required>
</div>

<div class="input-box">
<label>Konfirmasi Password:</label>
<input type="password"
name="confirm_password" minlength="6" required>
<span class="eye" onclick="myfunction()">
<i id="hide1" class="fas fa-eye"></i>
<i id="hide2" class="fas fa-eye-
slash"></i>
</span>
</div>

<button type="submit" name="register"

class="btn">Register</button>
</form>
</div>
</body>
</html>

Program ini adalah sebuah halaman web yang menampilkan

formulir untuk melakukan registrasi akun. Halaman ini terdiri dari
beberapa elemen, seperti judul halaman, formulir registrasi, dan
tombol submit.
Formulir registrasi terdiri dari beberapa elemen input seperti
username, password, dan konfirmasi password. Setiap elemen input
ini memiliki label yang jelas dan deskriptif, sehingga pengguna dapat
memahami dengan mudah apa yang harus mereka isi di setiap input.
 Di bagian bawah formulir, terdapat tombol "Register" yang dapat
digunakan pengguna untuk melakukan registrasi akun. Setelah tombol
tersebut ditekan, data yang telah diisi oleh pengguna akan diproses
oleh program register.php.

Style.css
*{
margin: 0;
padding: 0;
}
body{
background-image: url(707027.png);
background-size: cover;
background-position: center;
font-family: 'Courier New';
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.formbox{
width: 500px;
background: rgba(0,0,0,0.8);
margin: 12% auto;
padding: 50px 0;
color: #fff;
box-shadow: 8 0 20px 2px rgba(0,0,0,0.5);
}
h1{
text-align: center;
margin-bottom: 40x ;
}
.input-box{
margin: 31px auto;
width: 80%;
border-bottom: 1px solid #fff;
padding: top 10px;
padding-bottom:5px;
}
.input-box input{
 width:90%;
border: none;
outline: none;
background: transparent;
color: #fff;
}
.formbox form {
display: flex;
flex-direction: column;
align-items: center;
}

.formbox form button[type="submit"] {

margin-top: 20px;
}
.btn{
margin: 40px auto 2px;
width: 80%;
display: block;
outline: none;
padding: 10x 0;
border: 1px solid #fff;
cursor: pointer;
background: transparent;
color: #fff;
font-size: 16px;
}
.btn:hover{
background-color:aqua;
}
.eye{
position: absolute;
}
.link {
color: red;
}
h1 {
color: #333;
text-align: center;
margin-top: 50px;
}

form {
margin: 50px auto;
max-width: 500px;
padding: 20px;
background-color: #FFF;
 border-radius: 10px;
box-shadow: 0 0 10px #CCC;
}

label {
display: block;
margin-bottom: 10px;
color: #333;
font-weight: bold;
}

input[type="text"], input[type="number"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #CCC;
border-radius: 5px;
font-size: 16px;
color: #333;
}

input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #333;
color: #FFF;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #555;
}

Program ini adalah file CSS yang memberikan tampilan styling

pada halaman HTML. Program ini terdiri dari beberapa blok CSS
yang masing-masing menentukan tampilan dan layout elemen yang
berbeda pada halaman HTML.
Pada blok pertama, *{margin:0; padding:0;} digunakan untuk
mengatur margin dan padding elemen di seluruh halaman. Kemudian,
background-image pada body digunakan untuk menambahkan
gambar latar belakang pada halaman, dengan pengaturan cover dan
center.
Blok selanjutnya, .formbox, digunakan untuk mengatur tampilan
kotak form registrasi, seperti ukuran, posisi, padding, dan warna
background. h1, .input-box, dan button mengatur tampilan elemen-
elemen dalam form registrasi, seperti label dan input box, serta tombol
submit.
Blok terakhir pada program ini digunakan untuk mengatur
tampilan form pada halaman yang berbeda dengan tampilan form pada
halaman registrasi. Pada halaman tersebut, tampilan form diberikan
border-radius dan box-shadow untuk memberikan tampilan yang
lebih menarik.

Berikut adalah tampilan dari hasil file-file yang telah dibuat

sebelumnya.

Gambar 2.3. Tampilan Login

 Gambar 2.4. Login

Login username dan password merupakan form untuk

memasukkan informasi akun yang telah terdaftar sebelumnya agar
dapat masuk ke dalam sistem atau aplikasi.
Sedangkan, "Belum punya akun? Daftar sekarang" adalah tombol
atau tautan yang mengarahkan pengguna ke halaman registrasi untuk
membuat akun baru jika belum memiliki akun sebelumnya. Dalam hal
ini, pengguna dapat memasukkan informasi yang dibutuhkan seperti
username, password, dan konfirmasi password untuk membuat akun
baru. Setelah berhasil membuat akun, pengguna dapat menggunakan
informasi login tersebut untuk masuk ke dalam sistem atau aplikasi.
 Gambar 2.5. Halaman Register

Gambar 2.6. Tampilan Register Berhasil

 Gambar 2.6. Tampilan Data Pegawai

Jika berhasil login dan register maka akan langsung masuk ke

halaman data pegawai seperti gamabar di atas.

Gambar 2.7. Tampilan Ubah Data Pegawai

 Gambar 2.8. Tampilan Data Pegawai Setelah Di Ubah

Halaman "Ubah Data Pegawai" adalah sebuah halaman dalam

sebuah aplikasi manajemen data pegawai yang memungkinkan
pengguna untuk mengubah informasi/data yang sudah tersimpan
sebelumnya. Di halaman ini terdapat beberapa field input yang dapat
diubah, yaitu:
1. Nama Pegawai: Field ini memungkinkan pengguna untuk
mengubah nama pegawai yang sudah terdaftar sebelumnya.
2. Jabatan: Field ini memungkinkan pengguna untuk mengubah
jabatan pegawai yang sudah terdaftar sebelumnya.
3. Gaji: Field ini memungkinkan pengguna untuk mengubah gaji
pegawai yang sudah terdaftar sebelumnya.
Selain field input, pada halaman ini juga terdapat tombol
"Simpan" yang bertujuan untuk menyimpan perubahan yang sudah
dilakukan oleh pengguna. Tombol ini akan mengirimkan data
perubahan ke server untuk kemudian diupdate pada database. Setelah
tombol "Simpan" ditekan, pengguna akan diredirect ke halaman
utama aplikasi manajemen data pegawai.
 Gambar 2.9. Tampilan Hapus Data Pegawai

Gambar 2.10. Tampilan Data Pegawai Setelah Di Hapus

Gambar 2.11. Tampilan Tombol Logout

 Gambar 2.12. Tampilan Login

Setelah memencet tombol logout, maka secara otomatis akan

langsung kembali ke halaman login.
 BAB III
KESIMPULAN

MySQL adalah salah satu jenis DBMS yang menggunakan bahasa SQL untuk
mengelola sistem basis data secara terstruktur. Fungsi dari MySQL yang paling
penting adalah memudahkan pengguna dalam mengakses data dalam bentuk String
dan dapat diakses secara personal maupun publik di website. Dengan adanya mysql
serta php membuat pembuatan website yang menggunakan database dapat
dilakukan, penggunaannya yang dapat dilakukan secara sederhana dapat membantu
dalam pembelajaran pembuatan web bagi pemula, sehingga mudah dipahami dan
dipraktekkan.
 DAFTAR PUSTAKA

Ahmad Muhardian. (2017). Tutorial PHP dan MySQL: Membuat Aplikasi CRUD
[Studi Kasus Pendaftaran Siswa Baru].
https://www.petanikode.com/tutorial-php-mysql/.

Dosen Teknik Informatika. (2023). MODUL PRAKTIKUM PEMROGRAMAN

WEB DAN MOBILE I . Palangka Raya: Teknik Informatika, Fakultas
Teknik, Universitas Palangkaraya,.

Hirzi Widyan Putra. (2016). Contoh CRUD PHP 7 MySQLi Terbaru dengan upload
Gambar Part 1. https://gilacoding.com/read/contoh-crud-php-7-mysqli-
terbaru-dengan-upload-gambar-part-1.

Muhammad Robith Adani. (2020). Mengenal MySQL: Pengertian, Fungsi, serta

Kelebihannya. https://www.sekawanmedia.co.id/blog/pengertian-mysql/.

Samhis Setiawan. (2023). Pengertian Database Dan Perangkat Lunak.

https://www.gurupendidikan.co.id/pengertian-database/.
 LAMPIRAN

Gambar 2.1. Tabel Pegawai

Gambar 2.2. Tabel Login

Gambar 2.3. Tampilan Login

 Gambar 2.4. Login

Gambar 2.5. Halaman Register

 Gambar 2.6. Tampilan Register Berhasil

Gambar 2.6. Tampilan Data Pegawai

Gambar 2.7. Tampilan Ubah Data Pegawai

Gambar 2.8. Tampilan Data Pegawai Setelah Di Ubah

Gambar 2.9. Tampilan Hapus Data Pegawai

Gambar 2.10. Tampilan Data Pegawai Setelah Di Hapus

Gambar 2.11. Tampilan Tombol Logout

Gambar 2.12. Tampilan Login