PEMROGRAMAN WEB II

GRACE SINURAT
192406099
KOM B 19

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2020
 KATA PENGANTAR

Puji dan syukur saya panjatkan kepada Tuhan Yang Maha Esa karena dengan
berkatnya saya dapat menyelesaikan penyusunan modul ini dengan judul materi
“Pemrograman Web II”.
Terima kasih saya sampaikan kepada pihak yang sudah mendukung saya
dalam penyusunan modul ini. Terkhusus saya sampaikan terimakasih kepada asisten
laboratorium yaitu Alfredo Patricius Tarigan yang telah membimbing saya untuk
menyelesaikan modul ini. Adapun pembahasan dalam modul ini adalah mengenai
implementasi penggunaan database beserta dengan komponen-komponen lainnya.
Saya menyadari bahwa modul saya ini masih jauh dari kata sempurna. Oleh
karena itu jika terdapat kritik/saran yang dapat membangun kelancaran modul ini
saya berterimakasih dan saya akan merevisi kembali pembuatan modul ini di tugas
lainnya dan di waktu berikutnya.

Medan, April 2021

Penulis
 DAFTAR ISI

Halaman
KATA PENGANTAR i

DAFTAR ISI ii

BAB 1 PENDAHULUAN
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Tujuan 2
BAB 2 PENGENALAN PHP
2.1 Pengertian PHP 3
2.2 Keunggulan Bahasa PHP 3
2.3 Penggunaan PHP 4
BAB 3 PHP BOOTSTRAP 5
3.1 Pengertian Bootstrap 5 5
3.2 Penggunaan Bootstrap 5
BAB 4 GET AND POST
4.1 Get and Post 9
4.2 Penggunaan Get dan Post 9
BAB 5 CRUD
5.1 Pengertian CRUD 13
5.2 Membuat CRUD 14
BAB 6 AUTENTIKASI
6.1 Membuat Sistem Register 19
6.2 Membuat Sistem Login 23
6.3 Membuat Script Logout 26
BAB 7 PROJEK
7.1 Input Projek 27
7.2 Ouput Projek 33
BAB 8 PENUTUP
8.1 Kesimpulan 36
8.2 Saran 36
DAFTAR PUSTAKA
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Di era kemajuan teknologi seperti sekarang ini, Website menjadi hal yang
sudah tidak asing lagi terdengar pada telinga kita, kususnya dalam dunia internet.
Meskipun sudah banyak orang mempunyai homepage di internet baik yang
menggunakan ISP maupun server web gratis, tetapi pada umumnya homepage
tersebut bersifat statis dan tidak dapat berinteraksi dengan pengunjung web.
Kebanyakan orang pada umumnya hanya berperan sebagai pengguna dan sebagian
kecil saja yang mengetahui proses dibaliknya dikarenakan tidak menguasai
pemrograman web. Pada dasar pembuatanya, sebuah homepage yang dapat
berinteraksi dengan pengunjung website
homepage dinamis tidak diperlukan kemampuan pemrograman yang tinggi.
PHP adalah sebuah bahasa pemrograman yang didesain agar dapat disisipkan
dengan mudah ke halaman HTML. PHP memberikan solusi sangat murah (karena
gratis digunakan) dan dapat berjalan di berbagai jenis platform. Pada awalnya
memang PHP berjalan di sistwm UNIX dan variannya, namun kini dapat berjalan
dengan lancar di lingkungan system operasi windows. Suatu nilai tambah yang luar
biasa karena proses pengembangan program berbasis web dapat dilakukan lintas
system operasi. Dengan luasnya cakupan system operasi yang mampu menjalankan
PHP dan ditambah begitu lengkapnya function yang dimilikinya (tersedia lebih dari
400 function di PHP yang sangat berguna) tidak heran jika PHP semakin menjadi tren
di kalangan programmer web.
Penemu bahasa pemrograman ini adalah Rasmus Lerdorf, yang bermula dari
keinginan sederhana Ledorf untuk mempunyai alat bantu dalam memonitor
pengunjung yang melihat situs web pribadinya. Inilah sebabnya pada awal
pengembangannya, PHP merupakan singkatan dari Personal Home Page tools,
 2

sebelum akhirnya menjadi Hypertext Prepocessor. Antusias komunitas internet

terhadap bahasa PHP ini begitu besar, sehingga Rasmus Ledorf akhirnya
menyerahkan pengembangan PHP ini kepada sebuah tim pemrograman dalam rangka
gerakan open source. Tim ini membangun kembali PHP dari awal dengan menulis
ulang program parser PHP. Hasilnya adalah PHP 3.0 yang memiliki dukungan lebih
luas terhadap database. PHP 4.0 sebagai versi lanjutan dari PHP 3.0 dirilis. Setelah
itu, dengan menggunakan mesin scripting Zend untuk memberikan kinerja yang lebih
capet dan lebih baik. Versi ini telah mampu mendukung server web selain Apache
dan secara built-in telah mampu menangani menajemen session. Untuk dapat
menjalankan script-script PHP, sebuah system harus mempunyai Apache Web server,
PHP 4/PHP 5, dan database MySQL. Ketiganya adalah program open source yang
tersedia secara gratis di internet dan dapat berjalan di berbagai platform (windows
maupun UNIX/Linux).

1.2 Rumusan Masalah

1. Apa yang dimaksud dengan bahasa pemrograman PHP?
2. Jelaskan cara penggunaan bootsrap 5 pada PHP?
3. Bagaimana penggunaan get dan post pada sebuah website?
4. Jelaskan cara memasukkan database pada sebuah website?
5. Apa yang dimaksud dengan CRUD dan cara penggunaannya?
6. Bagaimana cara mengauntentikasikan sebuah website?

1.3 Tujuan
Adapun tujuan dari penulisan modul ini adalah sebagai berikut.
1. Memberikan ilmu tambahan untuk memperdalam pengetahuan lebih tentang
bahasa pemrograman PHP
2. Menambah wawasan lebih dalam mengenai tentang bagaimana penggunaan PHP
dalam membuat sebuah website
 3

3. Untuk memberikan kemudahan dalam membuat sebuah website atau e-commerce

sehingga webiste yang dibuat lebih responsive.
 BAB 2
PENGENALAN PHP

2.1 Pengertian PHP

PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang
digunakan untuk mengembangkan situs web statis atau situs web dinamis atau
aplikasi Web. PHP singkatan dari Hypertext Pre-processor, yang sebelumnya disebut
Personal Home Pages. Karena php merupakan scripting server-side maka jenis
bahasa pemrograman ini nantinya script/program tersebut akan dijalankan/diproses
oleh server. Berbeda dengan javascript yang client-side. PHP adalah bahasa
pemrograman umum yang berarti php dapat disematkan ke dalam kode HTML, atau
dapat digunakan dalam kombinasi dengan berbagai sistem templat web, sistem
manajemen konten web, dan kerangka kerja web.
Fungsi PHP adalah membuat atau mengembangkan situs web statis atau situs
web dinamis atau aplikasi Web. Walaupun sebenarnya bukan hanya PHP bahasa
pemrograman yang bisa digunakan untuk memuat website. PHP digunakan karena
untuk membuat website dinamis bisa digunakan untuk menyimpan data ke dalam
database, membuat halaman yang dapat berubah-ubah sesuai dengan input user,
memproses form, dll. Dalam membuat file PHP dapat digabung menggunakan tag
html, dan ketika tanpa menggunakan tag html apa pun disebut file PHP Murni. Server
menginterpretasikan kode PHP dan mengeluarkan hasilnya sebagai kode HTML ke
browser web.

2.2 Keunggulan Bahasa PHP

1. PHP adalah merupakan bahasa yang bersifat open source dan gratis.
2. Proses belajar pemrograman PHP yang lebih singkat dibandingkan dengan bahasa
lain seperti JSP, ASP dll.
3. Karena Bahasa pemrograman terpopuler, Maka komunitas banyak dokumentasi
lebih besar
 4

4. Sebagian besar server web hosting mendukung PHP secara default tidak seperti
bahasa lain seperti ASP yang membutuhkan IIS. Ini menjadikan PHP pilihan yang
hemat biaya.
5. PHP diperbarui secara teratur untuk mengikuti tren teknologi terbaru.

2.3 Penggunaan PHP

Sebagai contoh penggunaan PHP adalah berikut ini source codenya.

<!DOCTYPE html>
<html>
<head>
<title>Contoh list dengan PHP</title>
</head>
<body>
<h2>Daftar Absensi Mahasiswa</h2>
<ol>
<?php
for ($i= 1; $i <= 1000; $i++)
{
echo "<li>Nama Mahasiswa ke-$i</li>";
}
?>
</ol
</body>
</html>

Dari source code di atas akan dihasilkan output seperti berikut.

Gambar 2.1 Output

 BAB 3
PHP BOOTSTRAP 5

3.1 Pengertian Bootstrap 5

Bootstrap merupakan sebuah library framework CSS yang telah dibuat khusus
uintuk mengembangkan front end sebuah website. Bootstrap juga dikenal sebagai
salah satu framework CSS, HTML, Javascript yang begitu populer di kalangan
website developer atau pengembang website. Banyak fungsi bootstrap yang bisa
dipakai untuk sebuah website, berikut ini adalah fungsimya.
1. Bisa mempercepat waktu untuk memproses pembuatan front end sebuah website
2. Menampilkan sisi website yang lebih modern dan juga khas anak jaman sekarang
3. Tampilan dari bootstrap sendiri sudah sangat responsive sehingga sangat
mendukung untuk segala jenis resolusi, entah itu tablet, smartphone ataupun juga
PC dan laptop.
4. Website yang menggunakan bootstrap umumnya lebih ringan karena lebih
terstuktur.

3.2 Penggunaan Bootstrap

1. Membuat tabel dengan bootstrap, dimana dalam file ini sudah terdapat beberapa
class yang didesain untuk kebutuhan pembuatan tabel. Contohnya adalah sebagai
berikut.
a. “.table”: class yang digunakan untuk membuat dan mendefinisikan tabel
biasa/standar. Class ini hanya menambahkan lapisan yang kecil dan pembatas
secara horizontal. Class ini menggunakan baris kode <table class=”table”>.
b. “.table-stripped”: class yang digunakan untuk membuat table dengan gaya yang
zebra. Jadi warna setiap baris berselang seling. Class ini menggunakan baris kode
<table class=”table table-sripped”>.
 6

c. “.table-bordered”: merupakan class yang digunakan untuk menampilkan border di

dalam table. Jadi keseluruhan table akan dipasang sebuah border. Class ini
menggunakan baris kode <table class=”table table-bordered”>.
d. “.table-hover”: dapat Anda manfaatkan untuk memberikan efek hover pada
sebuah row. Efek ini akan berjalan ketika Anda meletakkan mouse di row yang
diberikan class ini. Class ini menggunakan baris kode <table class=”table table-
hover”>.

2. Mengatur tampilan gambar dengan bootstrap dimana jika menggunakan ini maka
gambarnya akan lebih responsive, berikut ini adalah beberapa desainnya.
a. “.img-responsive”: class ini memungkinkan Anda membuat gambar yang dapat
dibuka di berbagai macam resolusi layar. Class .img-responsive membuka ukuran
gambar dapat menyesuaikan dengan ukuran elemen inti. Anda dapat melihat
efeknya ketika melakukan resize pada browser.

<img src=”kantor-niagahoster.png” class=”img-responsive”

alt=”Logo Niagahoster”>

b. “.img-rounded”: ketika Anda ingin membuat gambar dengan sisi melengkung,

gunakan class ini, maka Anda akan memiliki gambar yang melengkung di bagian
sisinya.

<img src=”kantor-niagahoster.png” class=”rounded” alt=”Logo

Niagahoster”>

c. ”.img-circle”: terkadang ingin gambar yang berbentuk lingkaran, gunakan class

ini dan gambar akan tampil dengan bentuk yang melingkar.

<img src=”kantor-niagahoster.png” class=”rounded-circle”

alt=”Logo Niagahoster”>
 7

d. ”.img-thumbnail”: class ini digunakan untuk membuat gambar thumbnail dengan

Bootstrap.

<img src=”kantor-niagahoster.png” class=”img-thumbnail” alt=”Logo

Niagahoster”>

3. Membuat pesan peringatan (Alert) dengan bootstrap dimana contohnya adalah

sebagai berikut.
a. .alert-info: Class alert box ini dapat mengindikasikan informasi yang netral

<div class=”alert alert-info”>.

b. .alert-warning: Class alert box ini dapat untuk mengindikasikan pesan warning
dan mungkin butuh perbaikan.
 <div class=”alert alert-warning”>.

c. .alert-danger: Class alert box ini dapat mengindikasikan pesan penting dan
kemungkinan efek buruk.

<div class=”alert alert-danger”>.

4. Membuat tombol dengan bootstrap dimana penjelasan penggunaanya adalah

sebagai berikut.
a. .btn: Class ini untuk membuat tombol standar warna abu kehitaman.
b. .btn-default: Class ini untuk membuat tombol default berwarna abu.
c. .btn-primary: Class ini digunakan untuk membuat tombol warna biru. Biasanya
digunakan untuk tombol login dan masuk ke dalam menu tertentu.
d. .btn-success: Class ini digunakan untuk membuat tombol ketika berhasil
menginputkan sesuatu atau memproses suatu program.
e. .btn-info: Class ini digunakan untuk membuat tombol warna biru muda.
 8

f. .btn-warning: Class ini digunakan untuk membuat tombol warning dengan warna
kuning.
g. .btn-danger: Class ini digunakan untuk membuat tombol warning warna merah
tua.
h. .btn-link: Selain tombol persegi, Bootstrap juga menyediakan tombol untuk link.
Anda bisa menggunakan class ini.
9
 BAB 4
GET AND POST

4.1 Get and Post

Metode Get adalah metode pengiriman data menggunakan query string, jadi
seluruh nilai pada form akan di kirim ke sisi server/file dan nilai dari form anda akan
tampil pada barus URL/ Address bar. Pada metode Get terdapat beberapa ciri khas.
a. Variabel telihat pada URL, data setiap variabel dipisahkan dengan &. Contoh
http://url/page.php?get1=nilai2&get2=nilai2
b. Dibatasi oleh panjang string sebanyak 2047 karakter
c. Memungkinkan pengunjung langsung memasukkan nilai variable pada form
proses.
d. Variabel diambil dengan $_REQUEST[“nama”] atau $_GET[“nama”]
Metode Post adalah metode pengirian yang tidak akan terlihat oleh user yang
mengakases, dikarenakan informasi yang dikirim akan tidak ditampilkan di Address
Bar Web Browser. Selain $_POST juga tidak memiliki batasan pada jumlah
informasi yang dikirim. Pada metode get terdapat beberapa ciri khas.
a. Nilai variabel tersembunyi untuk pengunjung
b. Lebih aman karena lebih susah untuk dimainkan pengunjung melalui pergantian
nama variable
c. Tidak dibatasi oleh panjang string
d. Variabel diambil dengan $_REQUEST[“nama”] atau $_POST[“nama”].

4.2 Penggunaan Get dan Post

Dimana dalam pembuatan get memerlukan dua file dengan nama yaitu
form.php an get.php. Dimana source dari form.php tersebut adalah sebagai berikut.

<!DOCTYPE html>
<html>
<head>
<title>GET</title>
 10

</head>
<body>
<form action="get.php" method="get">
<center>
<h1>Ayo ngoding get</h1>
<p><input type="text" name="nama" placeholder="inputkan nama"></p>
<p><input type="submit" name="" value="Simpan"></p>
</center>
</form>
</body>
</html>

Sedangkan untuk soource code dari get.phpnya adalah sebagai berikut.

<?php
echo "<h1>Hasil input GET</h1><br>";
echo $_GET['nama'];
?>

Maka output yang akan dihasilkan dari dua file kode diatas adalah sebagai
berikut.

Gambar 4.1 Ouput form.php

 11

Gambar 4.2 Output get.php

Untuk contoh penggunaan post memerlukan 2 file yaitu form.php dan

post.php, dimana source code untuk form.phpnya adalah sebagai berikut.

<!DOCTYPE html>
<html>
<head>
<title>POST</title>
</head>
<body>
<form action="post.php" method="post">
<center>
<h1>Ayo ngoding post</h1>
<p><input type="text" name="nama" placeholder="inputkan nama"></p>
<p><input type="submit" name="" value="Simpan"></p>
</center>
</form>
</body>
</html>
Untuk source code post.phpnya adalah sebagai berikut.

<?php
echo "<h1>Hasil input POST</h1><br>";
echo $_POST['nama'];
?>
 12

Berikut ini adalah output dari 2 source code diatas.

Gambar 4.3 Output form.php

Gambar 4.4 Output post.php

 BAB 5
CRUD

5.1 Pengertian CRUD

CRUD adalah singkatan dari Create, Read, Update, dan Delete. Proses ini
sangat berkaitan dengan pengambilan atau transaksi data dari atau ke database. Hal
ini menjadi krusial apabila berhubungan dengan sistem informasi perusahaan karena
data yang diproses biasanya merupakan data transaksi. Bagi PHP Developer, operasi
CRUD biasanya menjadi pillar untuk mempelajari proses pengelolaan data
menggunakan PHP dan tentu saja MySQL database. Nah CRUD ini bisa diibaratkan
sebagai jalur atau koneksi yang menghubungkan antara bahasa pemrograman PHP
dengan MySQL. Berikut ini adalah penjelasan mengenai CRUD.
1. Create (C) merupakan proses pembuatan data baru. Proses ini biasanya dilakukan
ketika mendaftar pada sebuah halaman website. Data yang dimasukkan akan
disimpan di dalam database menggunakan operasi Create.
2. Read (R) merupakan proses pengambilan data dari database. Proses ini biasanya
terjadi ketika ingin melakukan proses login di halaman website tertentu. Saat
tombol “Login” dikilik maka website akan menjalankan proses “Read” untuk
melakukan verifikasi akun yang digunakan. Contoh operasi yang lebih sederhana
yaitu ketika mengakses sebuah halaman website, saat itu pula proses Read
berjalan. Hasil dari operasi ini adalah tampilan halaman website yang dilihat di
browser.
3. Update (U) adalah proses mengubah data yang berada di dalam database. Contoh
proses ini ketika ingin mengubah profil di dalam akun sosial media. Saat menekan
tombol “Ubah”, website akan mengirimkan proses Update ke dalam database.
Kemudian database meresponnya dengan mengubah data lama menjadi data baru
yang ditambahkan melalui halaman profil.
 14

4. Delete (D) adalah proses untuk menghapus data yang ada di database. Proses ini
mirip dengan Update, bedanya, proses Delete akan mengubah data yang ada di
database menjadi ‘tidak ada’.
5.2 Membuat CRUD

1. Membuat tabel database, dimana untuk melakukan operasi CRUD tentu saja
memerlukan data. Untuk membuat database, berikut ini adalah cara pembuatan
atau source code yang digunakan.

/* Create Database and Table */

create database crud_db;

use crud_db;

CREATE TABLE `users` (

`id` int(11) NOT NULL auto_increment,
`name` varchar(100),
`email` varchar(100),
`mobile` varchar(15),
PRIMARY KEY (`id`)
);

Setelah kita membuat database.sql-nya, selanjutnya adlah mengimpor file

tersebit kedalam database menggunakan PHPMyAdmin.
2. Membuat file config.php dimana berfungsi untuk menyimpan informasi tentang
database host, username dan password. Untuk menghubungkan PHP dengan
MySQL makan digunakan fungsi mysqli_connect() dengan alamat server sebagai
parameter utama, user database sebagai parameter kedua, password user sebagai
parameter ketiga, dan nama database sebagai parameter keempat. Berikut ini
adalah source code yang bisa digunakan.

<?php
/**
* using mysqli_connect for database connection
*/

$databaseHost = 'localhost';
$databaseName = 'crud_db';
$databaseUsername = 'root';
$databasePassword = '';
 15

$mysqli = mysqli_connect($databaseHost, $databaseUsername,

$databasePassword, $databaseName);

?>

3. Membuat file index.php dimana ini merupakan file utama yang menyertakan file
konfigurasi untuk koneksi database. Kemudian menampilkan semua daftar
pengguna menggunakan MySQL Select Query. Berikut ini adalah source code
yang digunakan.

<?php
// Create database connection using config file
include_once("config.php");

// Fetch all users data from database

$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id
DESC");
?>

<html>
<head>
<title>Homepage</title>
</head>

<body>
<a href="add.php">Add New User</a><br/><br/>

<table width='80%' border=1>

<tr>
<th>Name</th> <th>Mobile</th> <th>Email</th>
<th>Update</th>
</tr>
<?php
while($user_data = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$user_data['name']."</td>";
echo "<td>".$user_data['mobile']."</td>";
echo "<td>".$user_data['email']."</td>";
echo "<td><a href='edit.php?id=$user_data[id]'>Edit</a> |
<a href='delete.php?id=$user_data[id]'>Delete</a></td></tr>";
}
?>
</table>
</body>
</html>
 16

4. Membuat file add.php dimana berfungsi untuk menambahkan pengguna baru.

Formulir HTML digunakan untuk menerima masukan data pengguna. Setelah
data pengguna diserahka, MySQL INSERT Query digunakan untuk memasukkan
data pengguna ke dalam database. Berikut ini adalah source code yang digunakan.

<html>
<head>
<title>Add Users</title>
</head>

<body>
<a href="index.php">Go to Home</a>
<br/><br/>

<form action="add.php" method="post" name="form1">

<table width="25%" border="0">
<tr>
<td>Name</td>
<td><input type="text"
name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text"
name="email"></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text"
name="mobile"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit"
value="Add"></td>
</tr>
</table>
</form>

<?php

// Check If form submitted, insert form data into users

table.
if(isset($_POST['Submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];

// include database connection file

include_once("config.php");
 17

// Insert user data into table

$result = mysqli_query($mysqli, "INSERT INTO
users(name,email,mobile) VALUES('$name','$email','$mobile')");

// Show message when user added

echo "User added successfully. <a
href='index.php'>View Users</a>";
}
?>
</body>
</html>

5. Membuat file edit.php dimana digunakan untuk mengedit data pengguna serta
bisa mengubah data pengguna dan memperbaharuinya. File ini akan mengarahkan
pengguna kembali ke hompage, setelah update sukses. Berikut ini adalah source
code yang digunakan.

<?php
// include database connection file
include_once("config.php");

// Check if form is submitted for user update, then redirect to

homepage after update
if(isset($_POST['update']))
{
$id = $_POST['id'];

$name=$_POST['name'];
$mobile=$_POST['mobile'];
$email=$_POST['email'];

// update user data

$result = mysqli_query($mysqli, "UPDATE users SET
name='$name',email='$email',mobile='$mobile' WHERE id=$id");

// Redirect to homepage to display updated user in list

header("Location: index.php");
}
?>
<?php
// Display selected user data based on id
// Getting id from url
$id = $_GET['id'];

// Fetech user data based on id

$result = mysqli_query($mysqli, "SELECT * FROM users WHERE
id=$id");
 18

while($user_data = mysqli_fetch_array($result))
{
$name = $user_data['name'];
$email = $user_data['email'];
$mobile = $user_data['mobile'];
}
?>
<html>
<head>
<title>Edit User Data</title>
</head>

<body>
<a href="index.php">Home</a>
<br/><br/>

<form name="update_user" method="post" action="edit.php">

<table border="0">
<tr>
<td>Name</td>
<td><input type="text" name="name"
value=<?php echo $name;?>></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"
value=<?php echo $email;?>></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" name="mobile"
value=<?php echo $mobile;?>></td>
</tr>
<tr>
<td><input type="hidden" name="id"
value=<?php echo $_GET['id'];?>></td>
<td><input type="submit" name="update"
value="Update"></td>
</tr>
</table>
</form>
</body>
</html>

6. Membuat file delete.php diaman hanya dipanggil saat kita klik link ‘Delete’ untuk
pengguna maupun yang dipilih. Berikut ini adalah source codenya.

<?php
// include database connection file
include_once("config.php");

// Get id from URL to delete that user

 19

$id = $_GET['id'];

// Delete user row from table based on given id

$result = mysqli_query($mysqli, "DELETE FROM users WHERE
id=$id");

// After delete redirect to Home, so that latest user list will

be displayed.
header("Location:index.php");?>
 BAB 6
AUTENTIKASI

6.1 Membuat Sistem Registrasi

1. Membuat tabel database dimana tabel yang dibuat adalah hanyalah tabel yang
perlu saja. Berikut ini adalah source code yang digunakan.

CREATE TABLE users (

id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

2. Membuat file config dimana ini berfungsi untuk menghubungkan PHP ddengan
MySQLnya. Berikut ini adalah source code yang digunakan.

<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'password');
define('DB_NAME', 'niagahoster');

/* Attempt to connect to MySQL database */

$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD,
DB_NAME);

// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

3. Membuat form registrasi dimana terlebih dahulu untuk membuat file dengan
nama register,php kemudian tambahkan source code yang digunakan di bawah
ini.

<?php
// Include config file
 20

require_once "config.php";

// Define variables and initialize with empty values

$username = $password = $confirm_password = "";
$username_err = $password_err = $confirm_password_err = "";

// Processing form data when form is submitted

if($_SERVER["REQUEST_METHOD"] == "POST"){

// Validate username
if(empty(trim($_POST["username"]))){
$username_err = "Please enter a username.";
} else{
// Prepare a select statement
$sql = "SELECT id FROM users WHERE username = ?";

if($stmt = mysqli_prepare($link, $sql)){

// Bind variables to the prepared statement as
parameters
mysqli_stmt_bind_param($stmt, "s", $param_username);

// Set parameters
$param_username = trim($_POST["username"]);

// Attempt to execute the prepared statement

if(mysqli_stmt_execute($stmt)){
/* store result */
mysqli_stmt_store_result($stmt);

if(mysqli_stmt_num_rows($stmt) == 1){
$username_err = "This username is already
taken.";
} else{
$username = trim($_POST["username"]);
}
} else{
echo "Oops! Something went wrong. Please try
again later.";
}
}

// Close statement
mysqli_stmt_close($stmt);
}

// Validate password
if(empty(trim($_POST["password"]))){
$password_err = "Please enter a password.";
} elseif(strlen(trim($_POST["password"])) < 6){
$password_err = "Password must have atleast 6
characters.";
} else{
$password = trim($_POST["password"]);
}
 21

// Validate confirm password

if(empty(trim($_POST["confirm_password"]))){
$confirm_password_err = "Please confirm password.";
} else{
$confirm_password = trim($_POST["confirm_password"]);
if(empty($password_err) && ($password !=
$confirm_password)){
$confirm_password_err = "Password did not match.";
}
}

// Check input errors before inserting in database

if(empty($username_err) && empty($password_err) &&
empty($confirm_password_err)){

// Prepare an insert statement

$sql = "INSERT INTO users (username, password) VALUES (?,
?)";

if($stmt = mysqli_prepare($link, $sql)){

// Bind variables to the prepared statement as
parameters
mysqli_stmt_bind_param($stmt, "ss", $param_username,
$param_password);

// Set parameters
$param_username = $username;
$param_password = password_hash($password,
PASSWORD_DEFAULT); // Creates a password hash

// Attempt to execute the prepared statement

if(mysqli_stmt_execute($stmt)){
// Redirect to login page
header("location: login.php");
} else{
echo "Something went wrong. Please try again
later.";
}
}

// Close statement
mysqli_stmt_close($stmt);
}

// Close connection
mysqli_close($link);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 22

<title>Sign Up</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr
ap.css">
<style type="text/css">
body{ font: 14px sans-serif; }
.wrapper{ width: 350px; padding: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<form action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!
empty($username_err)) ? 'has-error' : ''; ?>">
<label>Username</label>
<input type="text" name="username" class="form-
control" value="<?php echo $username; ?>">
<span class="help-block"><?php echo
$username_err; ?></span>
</div>
<div class="form-group <?php echo (!
empty($password_err)) ? 'has-error' : ''; ?>">
<label>Password</label>
<input type="password" name="password"
class="form-control" value="<?php echo $password; ?>">
<span class="help-block"><?php echo
$password_err; ?></span>
</div>
<div class="form-group <?php echo (!
empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<label>Confirm Password</label>
<input type="password" name="confirm_password"
class="form-control" value="<?php echo $confirm_password; ?>">
<span class="help-block"><?php echo
$confirm_password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary"
value="Submit">
<input type="reset" class="btn btn-default"
value="Reset">
</div>
<p>Already have an account? <a href="login.php">Login
here</a>.</p>
</form>
</div>
</body>
</html>
 23

6.2 Membuat Sistem Login

1. Membuat form login dimana pertama membuat file dengan nama login.php dan

masukkan source code yang ada di bawah ini.

<?php
// Initialize the session
session_start();

// Check if the user is already logged in, if yes then redirect

him to welcome page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] ===
true){
header("location: welcome.php");
exit;
}

// Include config file

require_once "config.php";

// Define variables and initialize with empty values

$username = $password = "";
$username_err = $password_err = "";

// Processing form data when form is submitted

if($_SERVER["REQUEST_METHOD"] == "POST"){

// Check if username is empty

if(empty(trim($_POST["username"]))){
$username_err = "Please enter username.";
} else{
$username = trim($_POST["username"]);
}

// Check if password is empty

if(empty(trim($_POST["password"]))){
$password_err = "Please enter your password.";
} else{
$password = trim($_POST["password"]);
}

// Validate credentials
if(empty($username_err) && empty($password_err)){
// Prepare a select statement
$sql = "SELECT id, username, password FROM users WHERE
username = ?";

if($stmt = mysqli_prepare($link, $sql)){

// Bind variables to the prepared statement as
parameters
 24

mysqli_stmt_bind_param($stmt, "s", $param_username);

// Set parameters
$param_username = $username;

// Attempt to execute the prepared statement

if(mysqli_stmt_execute($stmt)){
// Store result
mysqli_stmt_store_result($stmt);

// Check if username exists, if yes then verify

password
if(mysqli_stmt_num_rows($stmt) == 1){
// Bind result variables
mysqli_stmt_bind_result($stmt, $id,
$username, $hashed_password);
if(mysqli_stmt_fetch($stmt)){
if(password_verify($password,
$hashed_password)){
// Password is correct, so start a
new session
session_start();

// Store data in session variables

$_SESSION["loggedin"] = true;
$_SESSION["id"] = $id;
$_SESSION["username"] = $username;

// Redirect user to welcome page

header("location: welcome.php");
} else{
// Display an error message if
password is not valid
$password_err = "The password you
entered was not valid.";
}
}
} else{
// Display an error message if username
doesn't exist
$username_err = "No account found with that
username.";
}
} else{
echo "Oops! Something went wrong. Please try
again later.";
}
}

// Close statement
mysqli_stmt_close($stmt);
}

// Close connection
 25

mysqli_close($link);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr
ap.css">
<style type="text/css">
body{ font: 14px sans-serif; }
.wrapper{ width: 350px; padding: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!
empty($username_err)) ? 'has-error' : ''; ?>">
<label>Username</label>
<input type="text" name="username" class="form-
control" value="<?php echo $username; ?>">
<span class="help-block"><?php echo
$username_err; ?></span>
</div>
<div class="form-group <?php echo (!
empty($password_err)) ? 'has-error' : ''; ?>">
<label>Password</label>
<input type="password" name="password"
class="form-control">
<span class="help-block"><?php echo
$password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary"
value="Login">
</div>
<p>Don't have an account? <a href="register.php">Sign
up now</a>.</p>
</form>
</div>
</body>
</html>
 26

6.3 Membuat Script Logout

Berikut ini adalah source code yang digunakan untuk membuat script
logoutnya.

<?php
// Initialize the session
session_start();

// Unset all of the session variables

$_SESSION = array();

// Destroy the session.

session_destroy();

// Redirect to login page

header("location: login.php");
exit;
?>
 BAB 7
PROJEK

7.1 Input Projek

Berikut ini adalah index.php dari website.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-7">
    <meta name="viewport" content="width=device-width, initial-
scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]
beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384
-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" c
rossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-
bundle.min.css" />
    <link rel="stylesheet" href="./public/assets/css/styles.css">
    <title>JOB VACANCY</title>
    <link rel="stylesheet" href="style.css">
  </head>
<body>

  <!-- Nav goes here -->
  <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
  <div class="container-fluid mt-3">
<a class="navbar-brand" href="http://localhost/Studi Kasus/index.php
">JOB VACANCIES INFORMATION</a>
    <button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-
controls="navbarNavAltMarkup" aria-expanded="false" aria-
label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="http://
localhost/Projek/pages/home.php">Home</a>
        <a class="nav-link" href="pages/contact.php" >Contact</a>
        <a class="nav-link" href="pages/about.php">About</a>
        <a class="nav-link" href="auth/login.php">Login</a></li>
        <a class="nav-link" href="auth/register.php">Register</a></l
i>
 28

      </div>
    </div>
  </div>
  </nav>
<!-- End of Nav -->

<div class="container pt-5">
            <div class="row justify-content-between align-items-
center">
            <div class="col-lg-5 col-md-6 col-sm-12">
                    <img src="public/Img/picture2.jpg" alt="XYZ" cla
ss="img-fluid">
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12 mb-3 mb-lg-0 
mb-md-0">
                    <div class="fs-2 text-white fw-bold mt-5">YOU NE
ED A JOB?</div>
                    <p class="leading-relaxed  gray-purple">
                       <h3>Welcome to our website !</h3>
                       Here you can find information about the job v
acancies of your dreams
                    </p>

                    <nav class="navbar navbar-light">
                        <div class="container-fluid">
                          <form class="d-flex">
                            <input class="form-control me-2" type="s
earch" placeholder="Find your Job" aria-label="Search">
                            <button class="btn btn-outline-
secondary" type="submit">Search </button>
                          </form>
                        </div>
                    </nav>
                </div>
        </div>
    </div>
    <!-- Carousel -->
    <!-- Slider main container -->
    <div class="bg-second mt-5">
        <div class="text-center mb-4">
            <p class="purple-dark fs-4 fw-bold pt-5">Latest Job Vaca
ncies</p>
            <p class="leading-relaxed purple-dark">You can find Job 
Vacancies Information here</p>
        </div>
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide card">
                    <div class="text-center">
                        <img src="public/Img/nurse.jpg" width="100">
                    </div>
                    <div class="card-body text-center">
 29

                        <h5 class="card-title ">Nurse</h5>
                        <p class="card-text ">Dewi Sri Hospital</p>
                        <a href="enquirement/enquirement1.php" class
="btn btn-outline-secondary">Enquirement</a>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="text-center">
                        <img src="public/Img/engineer.jpg"  width="1
00">
                    </div>
                    <div class="card-body text-center">
                        <h5 class="card-title ">Engineering</h5>
                        <p class="card-text ">Pertamina</p>
                        <a href="enquirement/enquirement2.php" class
="btn btn-outline-secondary">Enquirement</a>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="text-center">
                        <img src="public/Img/officer2.png"  width="1
40">
                    </div>
                    <div class="card-body text-center">
                        <h5 class="card-title ">Community Officer</h
5>
                        <p class="card-text ">Syariah BTPN</p>
                        <a href="enquirement/enquirement3.php" class
="btn btn-outline-secondary">Enquirement</a>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="text-center">
                        <img src="public/Img/apoteker.png" width="14
0">
                    </div>
                    <div class="card-body text-center">
                        <h5 class="card-title ">Apoteker</h5>
                        <p class="card-text ">Kimia Farma</p>
                        <a href="enquirement/enquirement4.php" class
="btn btn-outline-secondary">Enquirement</a>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="text-center">
                        <img src="public/Img/hrd.jpg" width="210">
                    </div>
                    <div class="card-body text-center">
                        <h5 class="card-title ">Staff HRD</h5>
                        <p class="card-text ">PT.Eka Sari Lorena Tra
nsport</p>
                        <a href="enquirement/enquirement5.php" class
="btn btn-outline-secondary">Enquirement</a>
                    </div>
 30

                </div>
            </div>

            <!----Recommendation ---->
                <div class="bg-second mt-5">
                <div class="text-center mb-4">
                    <p class="purple-dark fs-5 fw-bold pt-5">Our Rec
ommendation Company</p>
                </div>
    
                <div class="row mt-5">
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
                        <div class="card-body text-center">
                            <img src="public/Img/logo1.jpg" width="1
50">
                            <br><h7>PT Pertamina</h7>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
                        <div class="card-body text-center">
                            <img src="public/Img/logo2.jpg" width="5
0" >
                            <br><h7>PT Jasaraharja Putera</h7>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
                        <div class="card-body text-center">
                           <img src="public/Img/logo3.png" width="11
0">
                           <br><h7>PT Elang Mahkota Teknologi</h7>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
                        <div class="card-body text-center">
                            <img src="public/Img/logo4.png" width="6
2">
                            <br><h7>PT Bank Mega, Tbk</h7>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
 31

                        <div class="card-body text-center">
                           <img src="public/Img/logo5.png" width="15
0">
                           <br><h7>Kimia Farma</h7>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
                        <div class="card-body text-center">
                           <img src="public/Img/logo6.png" width="10
5">
                           <br><h7>PT SCTV</h7>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
                        <div class="card-body text-center">
                            <img src="public/Img/logo7.png" width="3
2">
                            <br><h7>PT Warung Pintar Sekali</h7>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-dark mb-3" style="ma
x-width: 18rem;">
                        <div class="card-body text-center">
                            <img src="public/Img/logo8.png" width="1
70">
                            <br><h7>OTO Group</h7>
                        </div>
                        </div>
                    </div>
                </div>

            <!----End Reccomd ---->

            <!-- If we need navigation buttons -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- End Carousel -->

           

        <div class="pt-5">
            <div class="d-flex  align-items-center  mt-5">
            <div class="col-lg-5 col-md-6 col-sm-12 mb-3 mb-lg-0 mb-
md-0">
 32

                    <div class="fs-2 text-dark fw-bold mt-5">Post yo
ur ad here!</div>
                    <p class="leading-relaxed  gray-dark">
                       Now you can post your ad with many advantages
                    </p>
        </div>
                <div class="card bg-transparent border-3 border-hot 
mx-4" style="width: 18rem; height: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Best Package</h5>
                        <hr>
                        <div class="fs-3 fw-bold">IDR 300.000</div>
                        <p>Per month / Paid Anually</p>
                        <a href="#" class="btn btn-outline-secondary 
text-dark">Check Here</a>
                        <p class="mt-3"></p>
                    </div>
                </div>
                <div class="card bg-transparent border-3 border-hot" 
style="width: 18rem; height: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Simple Package</h5>
                        <hr>
                        <div class="fs-3 fw-bold">IDR 150.000</div>
                        <p>Per month / Paid Anually</p>
                        <a href="#" class="btn text-dark btn-
outline-secondary">Check Here</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
            
    
    <script src="./public/assets/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/swiper/swiper-
bundle.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 2,
            slidesPerColumn: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                320: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 2,
                    slidesPerColumn: 1,
 33

                }
            }
        });
    </script>
</div>
<hr>
<div class="judul1 text-danger text-center" >
  <p>Copyright 2021 -Kelompok 3</p></div>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]
beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-
b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" cr
ossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/d
ist/umd/popper.min.js" integrity="sha384-
KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" cr
ossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]
beta2/dist/js/bootstrap.min.js" integrity="sha384-
nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" cr
ossorigin="anonymous"></script>
    -->

   

  </body>
</html>

7.2 Output Projek

34
35
 BAB 8
PENUTUP

8.1 Kesimpulan
Berdasarkan modul diatas dapat disimpulkan bahwa pemrograman web
merupakan salah satu hal yang penting di era sekarang ini. Apalagi jika kita ingin
membangun sebuah website. Kita bisa menggunakan bahasa pemrograman PHP
dimana cara penggunaannya sudah dijelaskan pada modul ini. Dan dengan bantuan
bootstrap yang memudahkan kita untuk mendesain website kita menjadi lebih
responsive dan lebih indah untuk dilihat. Pada bootstrap terdapat banyak desain-
desain yang sangat membantu jika ingin membuat sebuah website

8.2 Saran
Penulis menyadari bahwa pembuatan modul ini jauh dari kata sempurna. Oleh
karena itu penulis meminta kritik ataupun saran yang dapat membangun agar dalam
penulisan modul selanjutnya penulis bisa memberikan yang lebih baik dari
sebelumnya.
 DAFTAR PUSTAKA

Dewiek.2010. Teknik-teknik dasar pada pemrograman PHP

https://dewiek05.wordpress.com/2010/01/13/makalah-pemrograman-php/
[Diakses 29 Maret 2021]
Beo.2019. Pengertian PHP : Fungsi, Syntax, dan Alasan Menggunakan PHP
https://www.jagoanhosting.com/blog/pengertian-php/ [Diakses 29 Maret
2021]
Alan.2018. Pengertian dan Fungsi Pemrograman PHP
https://alan.co.id/pengertian-dan-fungsi-pemrograman-php/ [Diakses 29 Maret
2021]
Yasin.2019. Cara Menggunakan Bootstrap Untuk Membuat Website
https://www.niagahoster.co.id/blog/cara-menggunakan-bootstrap/ [Diakses 29
Maret 2021]
Ayu.2012. Pengertian dari metode Get dan Post
http://ayunovitaa.blogspot.com/2012/11/pengertian-dari-metode-get-dan-
post.html [Diakses 30 Maret 2021]
Dwi.2018. Perbedaan Post dan Get
https://www.ayongoding.net/perbedaan-post-dan-get/ [Diakses 30 Maret
2021]
Yasin.2019. Cara Membuat CRUD Dengan PHP Dan MySQL
https://www.niagahoster.co.id/blog/cara-membuat-crud-dengan-php-dan-
mysql/ [Diakses 03 April 2021]
Yuni97.2019. Tutorial Membuat CRUD Dengan MySQL
https://www.codepolitan.com/tutorial-membuat-crud-php-dengan-mysql-
59897c72d8470 [Diakses 03 April 2021]