MODUL3 3411191157 Rifqi Pratama Junior DSE-C-dikonversi

LAPORAN
PRAKTIKUM IMPLEMENTASI PERANGKAT LUNAK
MODUL 3
IMPLEMENTASI ANTARMUKA
DISUSUN OLEH :
RIFQI PRATAMA JUNIOR [3411191157]
DSE-C
PROGRAM STUDI INFORMATIKA

FAKULTAS SAINS DAN INFORMATIKA
UNIVERSITAS JENDERAL ACHMAD YANI
2021
DAFTAR ISI
DAFTAR ISI..........................................................................................................i
BAB I PENDAHULUAN......................................................................................1
BAB II HASIL DAN TUGAS PRAKTIKUM......................................................2
I.1 Hasil Praktikum.........................................................................................2
A. Existence Checks.......................................................................................2
B. Data Type Checks.....................................................................................3
C. Domain Checks.........................................................................................4
D. Format Checking.......................................................................................6
I.2 Tugas Praktikum........................................................................................8
A. Tugas Imlementasi Interface.....................................................................8
BAB III KESIMPULAN.....................................................................................14
i
BAB I
PENDAHULUAN
Implementasi antarmuka adalah realisasi dari spesifikasi teknis atau

algoritma sebagai program , komponen perangkat lunak , atau sistem
komputer lainnya melalui pemrograman dan penyebaran komputer. Praktikum
kali ini berisi implementasi antarmuka yang dikhususkan pada pengecekan data
input (validation input) pada interface meliputi Existence, Data-type, Domain, dan
Format checks. Implementasi ini dilakukan dengan Javascript dan Html5. Data
Validation dapat digunakan untuk memberikan batasan dalam input data kedalam
form dengan tujuan utama untuk memenuhi kriteria dalam penginputan data
tersebut. Penggunaan Data Validation ini selain menggunakan untuk memenuhi
syarat juga dapat menghindari kesalahan pada pada saat diinput, karena jika kita
tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya
software dapat menjadi error dan dampak terburuknya software bisa diambil alih
atau di-hack.
1
BAB II
HASIL DAN TUGAS PRAKTIKUM
I.1 Hasil Praktikum
A. Existence Checks
1) Source Code
<!DOCTYPE html>
<html>
<head>
<title>Existence Checks</title>
</head>
<body>
<form name="myForm" action="" onsubmit="return
validateForm()" method="POST">
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function validateForm() {
var user = document.myForm.username.value;
if (user=="") {
alert("Username tidak boleh kosong");
return false;
}
else {
return true;
}
}
</script>
</body>
</html>
2) Screenshoot
3) Analisa
Ini adalah validasi input Existence checks, yaitu validasi untuk mengecek
apakah nilai pada input ada atau tidak. Pengecekan ini sangat penting
dilakukan untuk input data yang mandatory atau tidak boleh kosong. Pada
tampilan ineterface akan muncul form username dan button submit. Lalu
untuk menghasilkan alert nya digunakan script javascript dengan function
yang diberi nama ValidateForm() yang didalamnya terdapat kondisional if
untuk mengecek apakah username kosong, jika kosong akan menampilkan
alert/message “username tidak boleh kosong” jika tidak maka akan
mengembalikan nilai true dan tidak menampilkan alert.
B. Data Type Checks
1) Source Code
<!DOCTYPE html>
<html>
<head>
<title>Data-Type Checks</title>
</head>
<body>
<input type="text" id="telp" name="telp">
</form>
var telp = document.myForm.telp.value;
if (isNaN(telp)) {
alert("Telp harus berupa angka");
return false;
}
else {
return true;
}
}
</script>
</body>
</html>
2) Screenshoot
3) Analisa
Ini adalah validasi input Data-type checks, yakni memvalidasi tipe data
yang sesuai dengan yang diinputkan penggguna. Pada tampilan ineterface
akan muncul form telepon dan button submit. Lalu untuk menghasilkan
alert nya digunakan script javascript dengan function yang diberi nama
ValidateForm() yang didalamnya terdapat kondisional if untuk mengecek
apakah form telepon diisi dengan input bertipe number atau tidak dengan
menyisipkan isNan didalam kondisi if, jika bukan nomor akan
menampilkan alert/message “Telp harus berupa angka” jika tidak maka
akan mengembalikan nilai true dan tidak menampilkan alert.
C. Domain Checks
1) Source Code
<!DOCTYPE html>
<html>
<head>
<title>Domain Checks</title>
</head>
<body>
NIM <input type="text" id="nim" name="nim"> NIM harus 10
digit<br>
Semester <input type="text" id="sem" name="sem"> Semester
tidak boleh kurang dari 1 dan lebih dari 12 <br>
</form>
var nim =
document.myForm.nim.value; var sem
= document.myForm.sem.value; if
(nim.length != 10) {
alert("NIM harus 10
digit"); return false;
}
else if ((sem<1) || (sem>12))
{ alert("Semester harus diisi dari 1-
12"); return false;
}
else{
return true;
}
}
</script>
</body>
</html>
2) Screenshoot
3) Analisa
Ini adalah validasi input Domain checks, yakni validasi untuk memeriksa input
pengguna untuk memenuhi rentang minimum/maksimum. Pada tampilan
ineterface akan muncul form NIM, Semester dan button submit. Lalu untuk
menghasilkan alert nya digunakan script javascript dengan function yang
diberi nama ValidateForm() yang didalamnya terdapat kondisional if untuk
mengecek apakah panjang NIM tidak lebih dari 10 dengan fungsi nim.length !
=10 jika nilai melebihi 10 digit maka akan muncul alert “nim harus 10 digi”t
dan untuk memvalidasi semester digunakan logika or dengan simbol sem<1 ||
sem>12 yang berarti jika semester kurang dari 1 atau lebih dari 12 akan
menampilkan alert “Semester harus diisi oleh 1-12”, jika kedua kondisi nim
dan semester bernilai tidak false maka akan mengembalikan nilai true dan
alert tidak akan muncul.
D. Format Checking
a. Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript form validation - Checking
Email</title>
<style type="text/css">
li {
list-style-type:
none; font-size:
16pt;
}
</style>
</head>
<body>
<h2>Input Email dan Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name'text1' /></li>
<li> </li>
<li class="submit"><input type="submit"
name="submit" value="Submit"
onclick="ValidateEmail(document.form1.text1)" /></li>
</ul>
</form>
</div>
function ValidateEmail(inputText) {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-
]?\w+)*(\.\w{2,3})+$/;
if (inputText.value.match(mailformat)) {
document.form1.text1.focus();
return true;
}
else {
alert("Alamat email tidak
valid!");
document.form1.text1.focus();
return false;
}
}
b. Screenshoot
c. Analisa
Ini adalah validasi input Format checking, yaitu memvalidasi apakah input
tersebut mempunyai format yang sesuai dengan yang dibutuhkan atau
tidak. Pada tampilan interface akan muncul form email. Lalu untuk
validasi digunakan javascript dan untuk tampilan form digunakan css.
Validasi ini berbeda dari contoh sebelumnya, yakni memakai Regex /^\w+
([\.-
]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; untuk mengecek format email.
Didalamnya terdapat kondisional if untuk mengecek apakah panjang input
sesuai format atau tidak, jika iya maka akan muncul alert “Alamat email
tidak valid” jika kondisi bernilai tidak false maka akan mengembalikan
nilai true dan alert tidak akan muncul.
I.2 Tugas Praktikum
A. Tugas Imlementasi Interface
a. Source code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Implementasi Interface</title>
</head>
<body>
<form action="" method="POST" name="formTugas">

<input type="text" name="username" id="uname"
placeholder="Username" required> <br>
<input type="text" name="email" id="email"
placeholder="Email" required><br>
<input type="password" name="password" id="pass"
placeholder="Password" required pattern = "/^[a-zA-Z0- 9!
@#\$%\^\&*_=+-]{8,12}$/g"><br>
<input type="password" name="repeat" id="repeat"
placeholder="Ulangi Password" required> <br>
<textarea id="alamat" style="width: 170px;" name
="alamat" placeholder="Alamat" required></textarea> <br>
<input type="text" name="telp" id="telp"
placeholder="Nomor Telepon" required> <br>
<input type="submit" name="" value="Submit"
onclick="ValidateEmail(document.formTugas.email)" >
</form>
window.onload = function () {
document.getElementById("uname").onchange =
validateUsername;
document.getElementById("pass").onchange =
validatePasswordUlangi;
document.getElementById("pass").onchange =
validatePass;
document.getElementById("repeat").onchange
= validatePasswordUlangi;
document.getElementById("telp").onchange =
validateTelpon;
document.getElementById("email").onchange =
validateEmail;
document.getElementById("alamat").onchange
= validateAlamat;
}
//Username
function validateUsername(){
var
user=document.getElementById("uname").value;
if(user.length <3 || user.length>15)
{ alert("Username diisi dengan 3 -
15
karakter !!");
return false;
}
else{
return true;
}
}
//Password
function validatePass(){
var
userPass=document.getElementById("pass").value;
if(userPass.length <4)
{ alert("Password minimal diisi
4
karakter !!");
return false;
}
else{
return true;
}
}
//Password Ulangi
function validatePasswordUlangi(){
var
pass2=document.getElementById("repeat").value;
var
pass1=document.getElementById("pass").value;
if(pass1!=pass2)
document.getElementById("repeat").setCustomValidity("Pa
sswords Tidak Sama , Ulangi Password!!");
else
document.getElementById("repeat").setCustomValidity('')
;
}
//Email
function ValidateEmail(inputText){
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-
]?\w+)*(\.\w{2,3})+$/;
{
document.formTugas.email.focus();
return true;
}
else
{
alert("Alamat email tidak valid!");
return false;
}
}
//Telepon
function validateTelpon(){
var
telp=document.getElementById("telp").value;
if(isNaN(telp)){
alert("Nomor Telepon harus berupa
angka !!");
return false;
}
else{
if(telp.length <10 ||
telp.length>12){
alert("Nomor Telepon harus 10 -
12 digit !!");
return false;
}
else{
return true;
}
}
}
//Alamat
function validateAlamat(){
var
alamatt=document.getElementById("alamat").value;
if(alamatt ==""){
alert("Alamat tidak boleh kosong");
return false;
}
else{
return true;
}
}
</script>
</body>
</html>
b. Screenshoot
c. Analisa
Ini adalah validasi input pada TugasImpelementasiInterface.html, untuk
pembuatan form atau validasi selain menggunakan html5 juga
menggunakan javascript. Pada kolom username, pengguna harus
menginputkan karakter minimal 3 dan maksimal 15. Pada kolom password
pengguna harus mengisi karakter minimal 4karakter. Lalu pada kolom
ulangi password diharuskan isi sama dengan kolom password sebelumnya.
Pada kolom email harus menginputkan layaknya format email. Di kolom
telepon harus menginputkan angka dan dibatasi hanya 10-12 digit saja.
Yang terakhir ialah kolom alamat yang mandatory yakni tidak boleh
kosong isinya. Jika pengguna menginputkan diluar aturan itu maka
alert/message akan muncul berturut-turut.
BAB III
KESIMPULAN
Dalam praktikum kali ini mengimplementasikan antarmuka (interface) yang

dikhususkan pada input pada interface yakni meliputi:
1) Existence, yaitu validasi untuk mengecek apakah nilai pada input ada atau
tidak. Pengecekan ini sangan penting dilakukan untuk input data yang
mandatory atau tidak boleh kosong
2) Data-type checks, yakni memvalidasi tipe data yang sesuai dengan yang
diinputkan penggguna
3) Domain checks, yakni validasi untuk memeriksa input pengguna
untukmemenuhi rentang minimum/maksimum
4) Format checking, yaitu memvalidasi apakah input tersebut mempunyai
format yang sesuai dengan yang dibutuhkan
Untuk mengimplementasikannya digunakan HTML5 dan Javascript, ada pula
css untuk tampilannya. Data Validation dapat digunakan untuk memberikan
batasan dalam input data kedalam form dengan tujuan utama untuk memenuhi
kriteria dalam penginputan data tersebut. Pada kasus-kasus validasi yang
dilakukan pada praktikum ini jika pengguna menginputkan data yang tidak sesuai
aturan maka akan menampilkan alert/message pada layar.

MODUL3 3411191157 Rifqi Pratama Junior DSE-C-dikonversi

Diunggah oleh

Informasi Dokumen

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

MODUL3 3411191157 Rifqi Pratama Junior DSE-C-dikonversi

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN

PRAKTIKUM IMPLEMENTASI PERANGKAT LUNAK

RIFQI PRATAMA JUNIOR [3411191157]

PROGRAM STUDI INFORMATIKA

Implementasi antarmuka adalah realisasi dari spesifikasi teknis atau

<form action="" method="POST" name="formTugas">

Dalam praktikum kali ini mengimplementasikan antarmuka (interface) yang

Anda mungkin juga menyukai