INSTITUT TEKNOLOGI DEL

FAKULTAS INFORMATIKA DAN TEKNIK ELEKTRO

PROGRAM STUDI SARJANA SISTEM INFORMASI

RENCANA TUGAS MAHASISWA

Nama Pemrograman dan Pengujian Aplikasi Web
Kode 12S3101
MATA KULIAH Kredit 4 sks
Semester V
Pengampu Mario Simaremare (mario@del.ac.id)
Minggu/sesi 4/2
TUGAS Bentuk Tugas terstruktur (individu)
MAHASISWA Waktu 2 x 60 menit terstruktur
Judul External library
SUBCAPAIAN PEMBELAJARAN MATA KULIAH (SubCPMK)
SCPMK03 [C3] Mampu menerapkan konsep code modularity, library, dan external library.
DESKRIPSI TUGAS
TBD
METODE PENGERJAAN TUGAS
Dengan menggunakan text-editor yang mendukung format HTML dan browser yang kompatibel dengan
HTML5.
BENTUK DAN FORMAT LUARAN
1. TBD
INDIKATOR, KRITERIA DAN BOBOT PENILAIAN
Untuk kedua jenis luaran akan dinilai menggunakan kriteria dan bobot sebagai berikut:
1. TBD.
PENGUMPULAN
Tanggal/ waktu 9 Oktober 2019/ 22.00 WIB
Tempat https://ecourse.del.ac.id/mod/assign/view.php?id=8120
LAIN-LAIN
Tidak ada
PUSTAKA
Utama:
[1] Deitel, H., Deitel, P. and Deitel, A. (2012). Internet and World Wide Web How to Program. Pearson.
Pendukung:
[2] PHP Manual https://www.php.net/manual/en/
Teknis Pengumpulan:
Letakkan semua berkas pekerjaan Anda pada sebuah direktori dengan format penamaan
w04t07_NIM. Sebagai contoh, w04t07_12S17003

12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 1 dari 7

Subtugas 1. FruitShop boilerplate
Anda akan mengembangkan sebuah full-featured aplikasi web dengan nama FruitShop.
FruitShop adalah sebuah aplikasi jual-beli online dengan fokus pada komoditas buah-buahan.
Pada subtugas kali ini anda akan mengembangkan sebagian dari fungsionalitas dari FruitShop.
Fungsionalitas lain akan ditambahkan seiring pengembangan.
Silakan untuk mengunduh boilerplate yang berisi 4 halaman html yang telah disediakan, masing-
masing index.php, voting.php, register.php, dan login.php. Anda akan menggunakan sebuah
library berbasis JavaScript yang memberikan efek ketik pada halaman index.php. Library yang
akan digunakan adalah typed.js1. Perlu diperhatikan bahwa untuk saat ini tidak semua halaman
pada menu dapat diakses.

Gambar 1. Homepage FruitShop

Silakan untuk menjalankan built-in server anda dan ujilah setiap halaman pada boilerplate.
Tampilan homepage FruitShop disajikan pada Gambar 1.

Subtugas 2. FruitShop database structure

Anda diizinkan untuk menggunakan MariaDB sebagai alternatif PostgreSQL jika ditemukan
persoalan yang tidak dapat diselesaikan. Disediakan dump untuk PostgreSQL. Credential yang
digunakan adalah username: fsuser dan password: fsuser0000.

Gambar 2. Skema basis data fruitshop_db

1 https://github.com/mattboldt/typed.js/

12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 2 dari 7

Gambar 2 adalah skematik dari basis data fruitshop_db yang digunakan pada aplikasi

Subtugas 3. Installing external library using composer

Composer adalah sebuah package manager yang bekerja pada platform PHP. Pada tugas kali ini
anda akan menggunakan dua buah external library, yaitu Medoo2 dan Twig3. Medoo adalah
sebuah package yang secara khusus memberikan fungsionalitas untuk menangani interaksi
antara aplikasi dan basis data. Medoo memberikan sebuah abstraction layer tambahan yang
memudahkan proses interaksi dengan basis data. Twig adalah package yang menangani web
presentation dalam bentuk template engine.
Instalasi dengan menggunakan Composer relatif mudah. Dalam menginstalasi, Composer akan
membaca konfigurasi composer.json yang berisi package yang ingin dipasang sehingga tersedia
bagi aplikasi. Berikut ini adalah konten dari composer.json yang diperlukan.
{
"require": {
"catfan/medoo": "^1.7",
"twig/twig": "^2.12"
}
}

Untuk memulai proses instalasi, eksekusi perintah berikut pada console.

composer update

Setelah proses instalasi selesai, semua library yang dipasang akan disimpan pada direktori
vendor (Gambar 3). Untuk dapat menggunakan library, silakan import file autoload.php.

Gambar 3. Struktur berkas

Subtugas 4. Building templates

Template engine pada dasarnya adalah mekanisme menstrukturkan halaman web sedemikian
rupa sehingga perubahan terhadap struktur dapat dilakukan semudah mungkin dengan upaya
(effort) sesedikit mungkin. Sebagai contoh, pada boilerplate, terdapat beberapa halaman yang
memiliki bentuk dan isi yang sama. Misalnya navigation menu. Jika aplikasi memiliki puluhan atau
ratusan jenis halaman, maka penambahan menu baru akan sangat menyulitkan dan kemungkinan
terjadinya kesalahan menjadi tinggi. Dengan template engine, diharapkan persoalan seperti ini
dapat dihindari.
Buatlah sebuah direktori dengan nama template. Kemudian tuliskan sebuah berkas (template)
dengan nama navigation.html. Tuliskan kode berikut.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">FruitShop</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">

2 https://medoo.in/doc
3 https://twig.symfony.com/doc/2.x/

12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 3 dari 7

 <a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="shop.php">Shop</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="status.php">Status</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="testimonial.php">Testimonials</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="voting.php">Fruit Voting</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="almanac.php">Fruit Almanac</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="register.php">Register</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="login.php">Login</a>
</li>
</ul>
</nav>

Selanjutnya, untuk setiap halaman anda perlu mengembangkan template-nya. Sebagai contoh,
untuk halaman index.php, anda akan menggunakan template index.html dan navigation.html.
Pindahkan seluruh isi dari index.php ke template index.html. dengan bagian navigation menu
diganti dengan kode berikut.
{{ include("navigation.html") }}

Selanjutnya, tuliskan kode berikut sebagai konten dari index.php.

<?php
include_once("vendor/autoload.php");

$loader = new Twig_Loader_Filesystem("template");

$twig = new Twig_Environment($loader);
$template = $twig->load('index.html');

echo $template->render();

Silakan untuk menjalankan built-in server anda dan menguji halaman index.php yang telah
menggunakan template engine.
Tugas anda berikutnya adalah mengkonversi semua halaman yang ada pada boilerplate sehingga
menjadi template. Setelah anda menyelesaikan bagian ini, anda akan memiliki enam page
templates.

Subtugas 5. Register
Pada bagian ini anda akan menggunakan Medoo untuk berinteraksi dengan basis data. Fitur
pertama yang dikembangkan adalah registrasi penguna baru melalui halaman register.php.
Pada saat melakukan registrasi, password yang diberikan akan melalui proses hashing. Hasil dari

12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 4 dari 7

password hash kemudian disimpan. Aplikasi tidak menyimpan plain password. Algoritma hashing
yang digunakan adalah Argon24.
Implementasi dari password hashing mechanism direalisasikan dalam bentuk sebuah kelas
web/Security. Buatlah sebuah direktori baru dengan nama classes. Kemudian tuliskan sebuah
berkas dengan nama Security.php. Selanjutnya tuliskan kode berikut.
<?php

namespace web;

class Security
{
// to generate a secure random string
public static function random($length = 64)
{
$bytes = random_bytes($length / 2);
return (bin2hex($bytes));
}

// to securely hash password

public static function hashPassword($password)
{
$hash = password_hash($password, PASSWORD_ARGON2I);
return ($hash);
}

// to verify password
public static function verifyPassword($password, $hash)
{
return (password_verify($password, $hash));
}
}

Kelas web\Security harus terlebih dahulu diimpor sebelum digunakan. Berikut ini adalah kode
yang digunakan untuk mengimpor kelas.
include_once('classes/Security.php');
use web\Security;

Formulir registrasi akan ditangani oleh berkas action_register.php. Berikut ini adalah kode dari
action_register.php.
<?php
include_once('vendor/autoload.php');
include_once('classes/Security.php');
include_once('config/database.php');

use web\Security;
use Medoo\Medoo;

// see config/database.php
$database = new Medoo($database_config);

$nextPage = "register.php";
$message = "";

4 https://github.com/P-H-C/phc-winner-argon2

12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 5 dari 7

// get the user inputs.
$account = [
"email" => trim($_POST["email"]),
"full_name" => trim($_POST["full_name"]),
"password" => "",
"description" => $_POST["description"],
"image" => addslashes('images\default.jpg'),
"last_login" => date("Y-m-d H:i:s")
];

// full name is required.

if(!strlen($account["full_name"])){
$message .= "Full name is required.";
}

// email is required.
if(!strlen($message) && !strlen($account["email"])){
$message .= "Email is required.";
}

// check if the email is already in use.

if(!strlen($message) && $database->has("account", ["email" =>
$account["email"]])){
$message .= "Email has been taken.";
}

// password is required.
if(!strlen($message) && !strlen($_POST["password"])){
$message .= "Password is required.";
}

// the password must be repeated.

if(!strlen($message) && $_POST["password"] != $_POST["repassword"]){
$message .= "Password does not match.";
}

// when there is a 'message' there is an error.

if(strlen($message)) {
// removing the password from the array fro security reason.
unset($account["password"]);
// should go back to the registration.php with filled fields.
// could you do such thing?
echo($message);
die;
} else {
// when there is no error message.
// convert the password with a hashed.
$account["password"] = Security::hashPassword($_POST["password"]);

// store the image file.

if ($_FILES["image"]["size"] <= 20480) { // 20KB
$imagePath = "images" . $_FILES["image"]["name"];

$uploaded = move_uploaded_file(
$_FILES["image"]["tmp_name"],
$imagePath
);

12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 6 dari 7

 if($uploaded){
$account["image"] = $imagePath;
}
}

// save the new account.

$database->insert("account", $account);
// send the new user to the login form.
$nextPage = "login.php";
}

// redirect to another page

header("Location: {$nextPage}");
die;

Silakan menjalankan built-in server anda dan coba melakukan registrasi.

Tantangan bagi anda adalah ketika validasi gagal, misalnya password tidak sama atau ada field
yang kosong, maka akan melakukan redirection kembali ke halaman register.php dengan field
telah terisi.
Tantangan berikutnya adalah menyelesaikan mekanisme login sehingga barang siapa telah login
ke dalam sistem tidak dapat lagi membuka halaman register.php.

Subtugas 6. Voting
TBD

Subtugas 7. Status
TBD

-EOF-

12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 7 dari 7