(1) COVER

2022
Modul Praktikum
Pemrograman Web Lanjut

Program Studi S1 Sistem Informasi

Disclaimer Fakultas Ilmu Komputer
Hanya dipergunakan di Lingkungan Internal Universitas AMIKOM Yogyakarta
Universitas AMIKOM Yogyakarta
 1. KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa atas berkah dan karunia-
Nya, sehingga Modul Praktikum Pemrograman Web Lanjut ini dapat diselesaikan. Modul ini
dibuat sebagai pedoman dalam melakukan kegiatan praktikum matakuliah Pemrograman Web
Lanjut yang merupakan salah satu matakuliah pada Jurusan S1 Sistem Informasi Universitas
AMIKOM Yogyakarta. Modul ini diharapkan dapat membantu mahasiswa/i, pengembang, atau
pun rekan pengajar dalam mempersiapkan dan melaksanakan kegiatan praktikum perkuliahan
dengan lebih baik serta menambah wawasan tentang pemrograman web. Pada setiap topik telah
ditetapkan tujuan materi yang disampaikan dan semua tugas yang harus dilakukan oleh
mahasiswa/i serta teori singkat untuk memperdalam pemahaman mahasiswa/i mengenai materi
yang dibahas. Penyusun menyakini bahwa dalam pembuatan modul ini masih jauh dari sempurna.
Oleh karena itu penyusun mengharapkan kritik dan saran yang membangun guna penyempurnaan
modul ini dimasa yang akan datang.

PENGESAHAN

Disusun Oleh Diperiksa & Disetujui oleh

Dikendalikan Oleh

Irma Rofni Wulandari, S.Pd., M.Eng

Lilis Dwi Farida, S.Kom.,M.Eng
Aditya Rizki Yudiantika, S.T., M.Eng
Moch Farid Fauzi, M.Kom
Atik Nurmasani, M.Kom Anggit Dwi Hartanto, M.Kom

Tgl.16 September 2022 Tgl. Tgl.

Modul ini syah dan diberlakukan mulai: Tgl

Hanif Al Fatta, M.Kom
 2. DAFTAR ISI
(1) COVER 1

1. KATA PENGANTAR 2

2. DAFTAR ISI 3

PRAKTIKUM 7 - CREATE, READ, UPDATE, DELETE (Lanjut) 4

1.1. Tujuan Intruksi Khusus 4

1.2. Alat dan Bahan 4

1.3. Dasar Teori 4

1.4. Instruksi Modul 5

1.5. Membuat Tampilan Front End 8

1.6. Sumber Bacaan 12

 PRAKTIKUM 7 - CREATE, READ, UPDATE, DELETE (Lanjut)

1.1. Tujuan Intruksi Khusus

Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Menerapkan CRUD Lanjut pada pengelolaan file
b. Membuat halaman home

1.2. Alat dan Bahan

Alat dan bahan yang diperlukan untuk mengikuti tutorial pada praktikum ini adalah:
a. PC Desktop
b. Windows 8 / 10
c. Sublime. Sumber bahan : link Sublime Text - Text Editing, Done Right
d. XAMPP . Sumber bahan : link Download XAMPP (apachefriends.org)
e. Web Browser
1.3. Dasar Teori
Selain operasi CRUD sederhana yang telah dipelajari pada pertemuan sebelumnya, kita juga
dapat membuat halaman PHP yang dapat digunakan untuk upload dan download berkas. Proses
upload adalah mengirimkan data/berkas dari komputer client/user ke komputer server.
Sedangkan download adalah proses mengunduh data dari computer server ke computer
client/user.

Pada CRUD sebelumnya, proses yang terjadi adalah input data melalui halaman PHP yang
sudah terkoneksi dengan database, kemudian data yang diinputkan akan disimpan di tabel-tabel
yang telah dipersiapkan sebelumnya. Akan tetapi ada sedikit perbedaan untuk proses CRUD
dengan upload/download. Pada proses ini, selain data yang dikirimkan oleh method PHP,
terdapat berkas/file yang dilampirkan dan harus disimpan di server.

Konsep pengiriman data adalah sebagai berikut : Pada Gambar 1, proses input tidak hanya
mengirim dan menyimpan data, tetapi juga menyimpan file yang dilampirkan. Data dan file
tersebut disimpan/dikirim dalam waktu yang bersamaan, kemudian perintah-perintah PHP
memisahkan data tersebut. Sehingga data input dan nama file akan disimpan di database,
sedangkan file fisik yang dilampirkan akan disimpan pada sebuah folder yang telah dipersiapkan
di sever..
1.4. Instruksi Modul
Cobalah CRUD berikut ini :

1. Gunakan database yang telah dibuat sebelumnya, dengan ketentuan sebagai berikut.

2. File index.php, welcome.php, halamanberita.php, dan CRUD berita disimpan didalam

folder Admin.
3. Membuat index.php agar ketika halaman admin diakses, akan menampilkan form login.
a. Buatlah halaman index.php berikut ini

b. Cobalah mengakses admin melalui localhost hingga muncul tampilan login. Pada
contoh menggunakan alamat http://localhost/PC/Berita2019/Admin/
4. Bukalah kembali script welcome.php yang pernah anda buat dan tambahkan
script berikut untuk membuat Link Halaman User dan Halaman Berita.
5. Tampilan setelah ditambahkan Link Halaman Berita dan Halaman User.

6. Buatlah folder uploads. Folder uploads berfungsi sebagai tempat menyimpan file-file gambar
yang telah diupload . Folder uploads terletak di dalam folder Admin.
7. Selanjutnya buatlah perintah CRUD untuk tabel berita, simpan pada folder admin.
a. berita_tambah.php
<?php
session_start(); //memulai session
?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Input Berita</title>
</head>
<body>
<h2>Tambah Berita</h2>
<form method="POST" action="berita_tambah_action.php"
enctype="multipart/form-data">
<table>
<tr>
<td width="150">Judul Berita</td>
<td>:</td>
<td><input type="text" name="judul" size="60"></td>
</tr>
<tr>
<td>Isi Berita</td>
<td>:</td>
<td><textarea name="isi" rows="6"
cols="60"></textarea></td>
</tr>
<tr>
<td>Gambar</td>
<td>:</td>
<td><input type="file" name="gambar"> </td>
</tr>
<tr>
<td>Tanggal</td>
<td>:</td>
<td><input type="date" name="tanggal"> </td>
</tr>
<tr>
<td>Nama User / Admin</td>
<td>:</td>
<td>
<input type="text" name="user_nama" size="60"
value="<?php echo $_SESSION['username'];?>" readonly>
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="simpan" value="simpan">
<input type="reset" value="reset">
</td>
</tr>
</table>
</form>
</body>
</html>

berita_tambah.php berisi script untuk membuat form tambah berita. Method

yang digunakan adalah POST dan actionnya menuju ke halaman
berita_tambah_action.php . Pada bagian input Nama user terdapat script
 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

value="<?php echo $_SESSION['username'];?>"

yang berfungsi untuk menampilkan nilai yang telah tersimpan dalam session.
Sedangkan readonly digunakan untuk menentukan bahwa elemen <input> hanya
dapat dibaca (read only) tanpa bisa diedit.
b. berita_tambah_action.php
<?php
include "config.php";

$judul = $_POST["judul"];
$isiberita = $_POST["isi"];
$tgl_upload = $_POST["tanggal"];
$usernama = $_POST["user_nama"];

//nama file temporary yang akan disimpan di server

$lokasifile = $_FILES['gambar']['tmp_name'];
//membaca nama file yang akan diupload
$namafile = $_FILES['gambar']['name'];

//folder penyimpanan berkas/file

$uploaddir = "uploads/";
//menggabungkan nama folder dan nama file
$uploadfile = $uploaddir.$namafile;

//Jika file berhasil di upload

if(move_uploaded_file($lokasifile, $uploadfile)){
echo "Nama File : <b>$namafile</b> sukses di upload";

//masukkan informasi file ke dalam database

$sql = "INSERT INTO berita(berita_judul, berita_isi,
berita_gambar,berita_tanggal,user_nama)
VALUES('$judul','$isiberita','$uploadfile','$tgl_upload',
'$usernama')";
$hasil = mysqli_query($config, $sql);
header('location:halamanberita.php');
} else {
echo "File gagal disimpan";
}
?>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 1 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

c. halamanberita.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Data Berita</title>
</head>
<body>
<p align="left">Anda Login Sebagai "<?php echo
$_SESSION['username']; ?>" | Klik <a
href="logout.php">disini</a> untuk logout.</p>
<h3>Data Berita</h3>
<p><a href="berita_tambah.php">[+Tambah Berita]</a> </p>
<table width='900' border='1' cellpadding="5" cellspacing="0">
<tr>
<th width='30'>No.</th>
<th width='100'>Judul Berita</th>
<th width='300'>Isi Berita</th>
<th width='200'>Tanggal Upload</th>
<th width='350'>Gambar</th>
<th width="100">Kelola</th>
</tr>
<?php
include "config.php";

$sql="SELECT berita_id, berita_judul, berita_isi,

berita_tanggal, berita_gambar FROM berita ORDER BY berita_id";
$hasil = mysqli_query($config, $sql);

$no=1;
while ($data=mysqli_fetch_array($hasil)){
?>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $data['berita_judul']?></td>
<td><?php echo $data['berita_isi']?></td>
<td><?php echo $data['berita_tanggal']?></td>
<td><img src="<?php echo $data['berita_gambar']?>"
width="100%"></td>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 2 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

<td align="center">
<a href="berita_ubah.php?berita_id=<?php echo
$data['berita_id'];?>">Edit</a> |
<a href="berita_hapus.php?berita_id=<?php echo
$data['berita_id'];?>">Hapus</a>
</td>
</tr>
<?php
$no++;
}
echo "</table>";
?>
</body>
</html>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 3 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

d. berita_ubah.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Edit Berita</title>
</head>
<body>
<?php
include 'config.php';
$berita_id = $_GET['berita_id'];
$sql = "SELECT * FROM berita WHERE berita_id=$berita_id";
$hasil = mysqli_query($config, $sql);
$data = mysqli_fetch_assoc($hasil);
?>
<h2>Edit Berita</h2>
<form method="POST" action="berita_ubah_action.php"
enctype="multipart/form-data">
<table>
<tr>
<td width="100">Judul Berita</td>
<td>:</td>
<td>
<input type="hidden" name="berita_id"
value="<?php echo $data['berita_id']?>">
<input type="text" name="judul" size="50"
value="<?php echo
$data['berita_judul']?>"></td>
</tr>
<tr>
<td>Isi Berita</td>
<td>:</td>
<td><textarea name="isi" rows="6"
cols="45"><?php echo
$data['berita_isi']?></textarea>
</td>
</tr>
<tr>
<td>Tanggal</td>
<td>:</td>
<td><input type="date" name="tanggal"></td>
</tr>
<tr>
<td>Gambar</td>
<td>:</td>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 4 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

<td><input type="file" name="gambar"> </td>

</tr>
<tr>
<td>Nama User</td>
<td>:</td>
<td><input type="text" name="user_nama"
size="50" value="<?php echo
$_SESSION['username'];?>" readonly>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit"
name="simpan" value="simpan">
<input type="reset" value="reset">
</td>
</tr>
</table>
</form>
</body>
</html>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 5 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

e. berita_ubah_action.php
<?php
session_start();
include "config.php";

$berita_id = $_POST["berita_id"];
$judul = $_POST["judul"];
$isiberita = $_POST["isi"];
$tgl_upload = $_POST["tanggal"];
$usernama = $_POST["user_nama"];

$lokasifile = $_FILES['gambar']['tmp_name'];
//nama file temporary yang akan disimpan di server
$namafile = $_FILES['gambar']['name'];
//membaca nama file yang akan diupload

$uploaddir = "uploads/"; //folder penyimpanan berkas/file

$uploadfile = $uploaddir.$namafile;
//menggabungkan nama folder dan nama file

if(!empty($lokasifile)){
$sql = "UPDATE berita SET berita_judul='$judul',
berita_isi='$isiberita', berita_tanggal='$tgl_upload',
berita_gambar='$uploadfile', user_nama='$usernama' WHERE
berita_id='$berita_id'";
$hasil = mysqli_query($config, $sql);
if($hasil){
move_uploaded_file($lokasifile, $uploadfile);
echo "<script> alert('Data berhasil diubah')</script>";
echo "Nama File : <b>$namafile</b> sukses di
upload<br/><br/>";
echo "<a href='halamanberita.php'>kembali</a>";
} else {
echo "Data gagal disimpan";
}
} else {
$sql = "UPDATE berita SET berita_judul='$judul',
berita_isi='$isiberita', user_nama='$usernama' WHERE
berita_id=$berita_id";
$hasil = mysqli_query($config, $sql);
header('location:halamanberita.php');
}
?>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 6 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

f. berita_hapus.php

8. Tampilan Halaman Berita Admin

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 7 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

1.5. Membuat Tampilan Front End

Lanjutkan praktikum dengan membuat tampilan Front End yang dapat diakses oleh User.
Langkah-langkahnya yaitu :
1. Copy folder images dan vendor yang telah disediakan dan simpan di folder anda (Diluar
folder admin, karena kita sedang membuat tampilan untuk user), tambahkan file
config.php

2. Membuat File index.php simpan di folder anda (contoh berita2019) – index ini untuk
tampilan halaman user

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 8 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

<!DOCTYPE html>
<html lang="en">
<head>
<title>BERITA AMIKOM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstr
ap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.mi
n.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/
popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap
.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0;
background: url('images/nature.jpg') center center fixed no-
repeat; background-size: cover;">
<h1>BERITA AMIKOM</h1>
<p>Berita Terkini</p>
</div>

<div class="container" style="margin-top:30px">

<div class="row">
<div class="col-sm-8">
<?php
include "config.php";
$sql="SELECT berita_id, berita_judul, berita_isi,
berita_gambar, user_nama, berita_tanggal FROM berita ORDER BY
berita_id";
$hasil = mysqli_query($config, $sql);
$no=1;
while ($data=mysqli_fetch_array($hasil)){
?>
<h2><?php echo $data['berita_judul']; ?></h2>
<h6><?php echo $data['berita_tanggal'];?></h6>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 9 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

<h6><?php echo $data['user_nama'];?></h6>

<div>
<a class="navbar-brand" href="index.php"><img
src="admin/<?php echo $data['berita_gambar']?>" width=720></a>
</div>
<p><?php echo $data['berita_isi']; ?></p>
<?php
}
?>

</div>
<div class="col-sm-4">
<h3>Topik Populer</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-
action">Ramadan 2018</a>
<a href="#" class="list-group-item list-group-item-
action">LIGA 1 2018</a>
<a href="#" class="list-group-item list-group-item-
action">WAISAK 2018</a>
</div>
<hr class="d-sm-none">
</div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">

<p>Footer</p>
</div>

</body>
</html>

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 10 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

3. Tampilan Halaman Frontend

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 11 dari 20

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi S1 Sistem Informasi

1.6. Sumber Bacaan

Utama :
[1] Arief, M.Rudyanto.(2011). Pemrograman Web Dinamis Menggunakan PHP dan Mysql.
Penerbit Andi : Yogyakarta
Pendukung :
[2] Madcoms Madiun,(2016). Pemrograman PHP dan MySQL untuk Pemula. Penerbit
Andi: Yogyakarta
[3] PHP 5 Online Tutorial - http://www.w3schools.com/php
[4] Arifin, Oki.(2017). Modul Pemrograman Web Lanjut. Yogyakarta : Universitas
AMIKOM Yogyakarta.
[5] Farida, Lilis Dwi. (2017). Modul Pemrograman Web Lanjut . Yogyakarta: Universitas
AMIKOM Yogyakarta.

Modul Praktikum : Pemrograman Web Lanjut [SI118] Hal. 12 dari 20