Modul 10 Basis Data Dan Pemrograman

Praktikum Basis Data
dan Pemrograman
Modul 10
Pembuatan Website dengan fungsi CRUD
LABORATORIUM ICT
FAKULTAS LOGISTIK DAN BISNIS
PROGRAM STUDI S-1 MANAJEMEN LOGISTIK
UNIVERSITAS LOGISTIK DAN BISNIS INTERNASIONAL
2023
Modul 10
Modul 10 : Pembuatan Website Sederhana

Topik :
1. Pembuatan website sederhana
Waktu: 150 menit praktikum
1. Pembuatan website sederhana dengan Visual Code Studio dan PhpMyAdmin

Pembuatan website dengan visual code studio dan phpMyAdmin dapat dilakukan
melalui langkah-langkah sebagai berikut ;
a. Buat folder baru dengan nama “phpcrud” pada hotdocs yang berada didalam
folder xampp, yang biasanya terletak pada drive c atau C:/xampp/htdocs pada
laptop/komputer.
b. Aktifkan xampp seperti biasa:
c. Lalu buka http://localhost/phpmyadmin/ pada browser, lalu setelah

tampilan php my admin muncul buatlah tabel “kontak” yang berisi 5 kolom
dengan ketentuan sebagai berikut :
Modul 10
2. Koneksi PHP dengan Database

Setelah berhasil membuat database “kontak”. Kita akan mencoba untuk
menghubungkan php dengan database menggunakan software/tools Visual Studio Code.
a. Buka software/tools VisualStudioCode pada masing-masing device.
b. Lalu buat file baru, dan simpan tiap file pada folder C:\xampp\htdocs\phpcrud
c. Adapun coding yang harus dibuat adalah sebagai berikut ;
Modul 10
a. Membuat file style.css

File ini digunakan untuk melakukan pengaturan pada css yang akan digunakan.
b. File functions.php
Berisi 3 pengaturan yakni : koneksi ke database, fungsi header dan fungsi footer.
<?php
function pdo_connect_mysql() {
$DATABASE_HOST = ‘localhost’;
$DATABASE_USER = ‘root’;
$DATABASE_PASS = ‘’;
$DATABASE_NAME = ‘phpcrud’;
try {
return new PDO(‘mysql:host=’ . $DATABASE_HOST . ‘;dbname=’ .
$DATABASE_NAME . ‘;charset=utf8’, $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
// If there is an error with the connection, stop the script and
display the error.
Exit(‘Failed to connect to database!’);
}
}
function template_header($title) {
echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>$title</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<link rel=”stylesheet”
href=”https://use.fontawesome.com/releases/v5.7.1/css/all.css”>
</head>
<body>
<nav class=”navtop”>
<div>
<h1>Website Title</h1>
<a href=”index.php”><I class=”fas fa-home”></i>Home</a>
<a href=”read.php”><I class=”fas fa-address-book”></i>Contacts</a>
</div>
</nav>
EOT;
}
function template_footer() {
echo <<<EOT
</body>
Modul 10
</html>
EOT;
}
?>
c. File index.php
Untuk pengaturan pada halaman utama.
<?php
include ‘functions.php’;
// Your PHP code here.
// Home Page template below.

?>
<?=template_header(‘Home’)?>
<div class=”content”>
<h2>Home</h2>
<p>Welcome to the home page!<br>Halaman web ini dibuat untuk kepentingan
bersama tanpa niat untuk mempersulit orang lain.</p>
<br><img src=”mawar merah.jpg” alt=”Contoh_Gambar”
style=”width:200px;height:300px;”>
</div>
<?=template_footer()?>
d. File create.php
Untuk menambahkan data pada database.
<?php
$pdo = pdo_connect_mysql();
$msg = ‘’;
// Check if POST data is not empty
if (!empty($_POST)) {
// Post data not empty insert a new record
// Set-up the variables that are going to be inserted, we must check if
the POST variables exist if not we can default them to blank
$id = isset($_POST[‘id’]) && !empty($_POST[‘id’]) && $_POST[‘id’] !=
‘auto’ ? $_POST[‘id’] : NULL;
// Check if POST variable “name” exists, if not default the value to
blank, basically the same for all variables
$nama = isset($_POST[‘nama’]) ? $_POST[‘nama’] : ‘’;
Modul 10
$email = isset($_POST[‘email’]) ? $_POST[‘email’] : ‘’;

$notelp = isset($_POST[‘notelp’]) ? $_POST[‘notelp’] : ‘’;
$pekerjaan = isset($_POST[‘pekerjaan’]) ? $_POST[‘pekerjaan’] : ‘’;
// Insert new record into the contacts table

$stmt = $pdo->prepare(‘INSERT INTO kontak VALUES (?, ?, ?, ?, ?)’);
$stmt->execute([$id, $nama, $email, $notelp, $pekerjaan]);
// Output message
$msg = ‘Created Successfully!’;
}
?>
<?=template_header(‘Create’)?>
<div class=”content update”>

<h2>Create Contact</h2>
<form action=”create.php” method=”post”>
<label for=”id”>ID</label>
<label for=”nama”>Nama</label>
<input type=”text” name=”id” value=”auto” id=”id”>
<input type=”text” name=”nama” id=”nama”>
<label for=”email”>Email</label>
<label for=”notelp”>No. Telp</label>
<input type=”text” name=”email” id=”email”>
<input type=”text” name=”notelp” id=”notelp”>
<label for=”pekerjaan”>Pekerjaan</label>
<input type=”text” name=”pekerjaan” id=”pekerjaan”>
<input type=”submit” value=”Create”>
</form>
<?php if ($msg): ?>
<p><?=$msg?></p>
<?php endif; ?>
</div>
e. File read.php
Untuk menampilkan data pada website.
<?php
// Connect to MySQL database
Modul 10
// Get the page via GET request (URL param: page), if non exists default the
page to 1
$page = isset($_GET[‘page’]) && is_numeric($_GET[‘page’]) ? (int)$_GET[‘page’]
: 1;
// Number of records to show on each page
$records_per_page = 5;
// Prepare the SQL statement and get records from our contacts table, LIMIT
will determine the page
$stmt = $pdo->prepare(‘SELECT * FROM kontak ORDER BY id LIMIT :current_page,
:record_per_page’);
$stmt->bindValue(‘:current_page’, ($page-1)*$records_per_page,
PDO::PARAM_INT);
$stmt->bindValue(‘:record_per_page’, $records_per_page, PDO::PARAM_INT);
$stmt->execute();
// Fetch the records so we can display them in our template.
$contacts = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Get the total number of contacts, this is so we can determine whether there
should be a next and previous button
$num_contacts = $pdo->query(‘SELECT COUNT(*) FROM kontak’)->fetchColumn();
?>
<?=template_header(‘Read’)?>
<div class=”content read”>

<h2>Read Contacts</h2>
<a href=”create.php” class=”create-contact”>Create Contact</a>
<table>
<thead>
<tr>
<td>#</td>
<td>Nama</td>
<td>Email</td>
<td>No. Telp</td>
<td>Pekerjaan</td>
<td></td>
</tr>
</thead>
<tbody>
<?php foreach ($contacts as $contact): ?>
<tr>
Modul 10
<td><?=$contact[‘id’]?></td>
<td><?=$contact[‘nama’]?></td>
<td><?=$contact[‘email’]?></td>
<td><?=$contact[‘notelp’]?></td>
<td><?=$contact[‘pekerjaan’]?></td>
<td class=”actions”>
<a href=”update.php?id=<?=$contact[‘id’]?>”
class=”edit”><I class=”fas fa-pen fa-xs”></i></a>
<a href=”delete.php?id=<?=$contact[‘id’]?>”
class=”trash”><I class=”fas fa-trash fa-xs”></i></a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class=”pagination”>
<?php if ($page > 1): ?>
<a href=”read.php?page=<?=$page-1?>”><I class=”fas fa-angle-double-
left fa-sm”></i></a>
<?php endif; ?>
<?php if ($page*$records_per_page < $num_contacts): ?>
<a href=”read.php?page=<?=$page+1?>”><I class=”fas fa-angle-double-
right fa-sm”></i></a>
<?php endif; ?>
</div>
</div>
f. File update.php
Untuk memperbarui/memodifikasi data yang telah di masukkan sebelumnya.
<?php
$msg = ‘’;
// Check if the contact id exists, for example update.php?id=1 will get the
contact with the id of 1
if (isset($_GET[‘id’])) {
if (!empty($_POST)) {
// This part is similar to the create.php, but instead we update a
record and not insert
$id = isset($_POST[‘id’]) ? $_POST[‘id’] : NULL;
$nama = isset($_POST[‘nama’]) ? $_POST[‘nama’] : ‘’;
Modul 10
$email = isset($_POST[‘email’]) ? $_POST[‘email’] : ‘’;

$notelp = isset($_POST[‘notelp’]) ? $_POST[‘notelp’] : ‘’;
$pekerjaan = isset($_POST[‘pekerjaan’]) ? $_POST[‘pekerjaan’] : ‘’;
// Update the record

$stmt = $pdo->prepare(‘UPDATE kontak SET id = ?, nama = ?, email = ?,
notelp = ?, pekerjaan = ? WHERE id = ?’);
$stmt->execute([$id, $nama, $email, $notelp, $pekerjaan,
$_GET[‘id’]]);
$msg = ‘Updated Successfully!’;
}
// Get the contact from the contacts table
$stmt = $pdo->prepare(‘SELECT * FROM kontak WHERE id = ?’);
$stmt->execute([$_GET[‘id’]]);
$contact = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$contact) {
exit(‘Contact doesn\’t exist with that ID!’);
}
} else {
exit(‘No ID specified!’);
}
?>
<?=template_header(‘Read’)?>
<div class=”content update”>

<h2>Update Contact #<?=$contact[‘id’]?></h2>
<form action=”update.php?id=<?=$contact[‘id’]?>” method=”post”>
<label for=”id”>ID</label>
<label for=”nama”>Nama</label>
<input type=”text” name=”id” value=”<?=$contact[‘id’]?>” id=”id”>
<input type=”text” name=”nama” value=”<?=$contact[‘nama’]?>”
id=”nama”>
<label for=”email”>Email</label>
<label for=”notelp”>No. Telp</label>
<input type=”text” name=”email” value=”<?=$contact[‘email’]?>”
id=”email”>
<input type=”text” name=”notelp” value=”<?=$contact[‘notelp’]?>”
id=”notelp”>
<label for=”pekerjaan”>Pekerjaan</label>
<input type=”text” name=”pekerjaan” value=”<?=$contact[‘pekerjaan’]?>”
id=”title”>
<input type=”submit” value=”Update”>
Modul 10
</form>
<?php if ($msg): ?>
<p><?=$msg?></p>
<?php endif; ?>
</div>
g. File delete.php
Untuk menghapus data yang ada pada website.
<?php
$msg = ‘’;
// Check that the contact ID exists
if (isset($_GET[‘id’])) {
// Select the record that is going to be deleted
$stmt = $pdo->prepare(‘SELECT * FROM kontak WHERE id = ?’);
$contact = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$contact) {
exit(‘Contact doesn\’t exist with that ID!’);
}
// Make sure the user confirms beore deletion
if (isset($_GET[‘confirm’])) {
if ($_GET[‘confirm’] == ‘yes’) {
// User clicked the “Yes” button, delete record
$stmt = $pdo->prepare(‘DELETE FROM kontak WHERE id = ?’);
$msg = ‘You have deleted the contact!’;
} else {
// User clicked the “No” button, redirect them back to the read
page
header(‘Location: read.php’);
exit;
}
}
} else {
exit(‘No ID specified!’);
}
?>
Modul 10
<?=template_header(‘Delete’)?>
<div class=”content delete”>

<h2>Delete Contact #<?=$contact[‘id’]?></h2>
<?php if ($msg): ?>
<p><?=$msg?></p>
<?php else: ?>
<p>Are you sure you want to delete contact #<?=$contact[‘id’]?>?</p>
<div class=”yesno”>
<a href=”delete.php?id=<?=$contact[‘id’]?>&confirm=yes”>Yes</a>
<a href=”delete.php?id=<?=$contact[‘id’]?>&confirm=no”>No</a>
</div>
<?php endif; ?>
</div>
=Sekian=?

Modul 10 Basis Data Dan Pemrograman

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul 10 Basis Data Dan Pemrograman

Diunggah oleh

Hak Cipta:

Format Tersedia

Praktikum Basis Data

Modul 10 : Pembuatan Website Sederhana

1. Pembuatan website sederhana dengan Visual Code Studio dan PhpMyAdmin

c. Lalu buka http://localhost/phpmyadmin/ pada browser, lalu setelah

2. Koneksi PHP dengan Database

a. Membuat file style.css

// Home Page template below.

$email = isset($_POST[‘email’]) ? $_POST[‘email’] : ‘’;

// Insert new record into the contacts table

<div class=”content update”>

<div class=”content read”>

$email = isset($_POST[‘email’]) ? $_POST[‘email’] : ‘’;

// Update the record

<div class=”content update”>

<div class=”content delete”>

Anda mungkin juga menyukai