PEMROGRAMAN WEB
Disusun Oleh:
Timotius Theodearson 2070231057
Dosen Pembimbing:
Avip Kurniawan, ST, M.Kom
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS KRISNADWIPAYANA
2021
Laporan Akhir Pemrograman Web 2070231057 2
MODUL 1
Latihan 1: Radio Button Pelatihan Script
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>Plih Jenis Kelamin</h3>
<form>
<input type="radio" name="gender" value="laki-laki"> Laki-laki <br>
<input type="radio" name="gender" value="perempuan"> Perempuan <br>
<input type="radio" name="gender" value="lainnya"> Lainnya <br>
<input type="submit" name="Submit">
</form>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 3 Latihan 2: Button Choice
Script
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>Kendaraan apa yang anda miliki?</h3>
<form>
<input type="button" value="Mobil"><br>
<input type="button" value="Mie Ayam"> <br>
<input type="button" value="Bakso"> <br>
<input type="button" value="Soto Ayam"> <br>
<br>
<input type="submit" value="submit">
</form>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 4 Latihan 3: Check Box
Script
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>Kendaraan apa yang anda miliki?</h3>
<form>
<input type="checkbox" value="Mobil">Mobil <br>
<input type="checkbox" value="Mobil">Motor <br>
<input type="checkbox" value="Mobil">Sepeda <br>
<input type="checkbox" value="Mobil">Pesawat <br>
<br>
<input type="submit" name="Submit">
</form>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 5 Latihan 4: Combo Box
Script
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>Kendaraan apa yang anda miliki?</h3>
<form>
<select>
<option value="Pesawat">Pesawat</option>
<option value="Mobil">Mobil</option>
<option value="Motor">Motor</option>
<option value="Sepeda">Sepeda</option>
</select>
<br><br>
<input type="Submit">
</form>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 6
MODUL 2
Program 2.1 lat_css.html Script
<!DOCTYPE html>
<html>
<head>
<title>CSS Pertama</title>
<style type="text/css">
h1 {
font-size: 14pt;
font-style: italic;
color: green;
} </style>
</head>
<body>
<h1>CSS Pertamaku</h1>
<h3>Selamat Mencoba CSS!</h3>
</body>
</html>
Screenshot Script dan Hasil Input
Program 2.2 CSS external: style.css
Laporan Akhir Pemrograman Web 2070231057 7 Script
h1{
font-size: 14pt;
font-style: italic;
color: green;
}
#Tebal {
font-weight: bold;
color: blue;
}
#Miring {
font-style: italic;
color: pink }
Screenshot Script dan Hasil Input
Program 2.3 CSS external2: external.html Script
<!DOCTYPE html>
<html>
<head>
<title>CSS Pertama</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS Pertamaku</h1>
Selamat Mencoba CSS!
Laporan Akhir Pemrograman Web 2070231057 8
</body>
</html>
Screenshot Script dan Hasil Input
Program 2.4: css1.html Script
<!DOCTYPE html>
<html>
<head>
<title>atribut ID</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Pantun</h1>
<h2 id="Miring">
Kalau ada jarum yang patah <br>
Jangan disimpan di dalam peti </h2>
<h3 id="Tebal">
Kalau ada kata yang salah <br>
Jangan disimpan di dalam hati </h3>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 9 Program 2.5: css2.html
Script
<!DOCTYPE html>
<html>
<head>
<title>Komentar</title>
<!-- <style type="text/css">
h3.merah { color: red;
}
h3.biru {
color: blue;
}
</style> -->
</head>
<body>
<h3 class="biru">Biru? Pasti</h3>
<h3 class="Merah">Merah? Pasti</h3>
<h3 class="Merah">Merah? Nggak Mungkin!</h3>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 10 Program 2.6: css3.html
Script
<!DOCTYPE html>
<html>
<head>
<title>Background-color</title>
</head>
<body>
<h2>
<span style="color: white; background-color: blue;">
White diatas biru <br>
</span>
<span style="color: silver; background-color: black">
Perak diatas hitam <br>
</span>
</h2>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 11 Program 2.7: table_margin.html
Script
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Marhin</title>
<style type="text/css">
table.margin{
margin-left: 2cm;
} </style>
</head>
<body>
<p>Paragraf tidak diberi Margin</p>
<table class="margin" width="50%" border="1">
<tr>
<td>Perataan Margin Kiri</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 12 Program 2.8: link_tbganti.css
Script
A:link{
color: white;
text-decoration: none;
background-image: url("button.gif") 50% 50% no-repeat;
padding: 0.5em;
margin: 0.5em;
display: block }
A:visited {
color: white;
text-decoration: none;
background-image: url("#button.gif");
padding: 0.5em;
margin: 0.5em;
display: block;
}
A:active {
color: white;
background-image: url("#button.gif");
padding: 0.5em;
margin: 0.5em;
display: block;
text-decoration: underline;
Laporan Akhir Pemrograman Web 2070231057 13
color: red;
background-image: url("#button.gif") }
Screenshot Script dan Hasil Input
Program 2.9: fm_btnflat.html Script
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan pada form tombol</title>
<style type="text/css">
input.button { color: #000000;
background: red;
border-color: white;
border-bottom-color: green;
border-top: 2px dotted;
border-bottom: 1px dotted;
border-left: 1px dotted;
border-right: 1px dotted;
font-family: verdana;
font-size: 12px;
} </style>
</head>
<body>
<form name="form1" method="post" action="">
<table bgborder="1">
<tr>
<td width="58">nama</td>
<td width="230">:
<input type="text" name="nama">
</td>
</tr>
<tr>
<td width="58">alamat</td>
<td width="230">:
<input type="text" name="alamat">
</td>
</tr>
<tr>
<td> </td>
Laporan Akhir Pemrograman Web 2070231057 14
<td>
<input class="button" type="submit" name="submit"
value="submit">
<input class="button" type="submit" name="submit"
value="simpan">
</td>
</tr>
</table>
</form>
</body>
</html>
Screenshot Script dan Hasil Input
Laporan Akhir Pemrograman Web 2070231057 15
MODUL 3
Program 3.1 coba.php Script:
<html>
<head>
<title> Example</title>
</head>
<body>
<?php
echo "Hi,i'm a PHP script!";
?>
</body>
</html>
Screenshot Hasil Input:
Program 3.2 tanggal.php Script:
<html>
<head>
<title> Tanggal</title></head>
<body>
Tanggal:
<?php
/* script untuk menuliskan Tanggal */
echo date ("d F Y");
?>
</body>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 16 Program 3.3 variabel.php
Script:
<?php
/* deklarasi variable */
$Tanggal = date ("d m Y");
$Nama = "praktikum";
?>
<html>
<head>
<title>variable</title>
</head>
<body>
<?php
/*scrip pengenalan variable*/
/*memanggil variable Tanggal*/
print("$Tanggal <br>\n");
/*memanggil variable Nama*/
print("$Nama, selamat datang di dunia webmaster");
?>
</body>
Screenshot Hasil Input:
Program 3.4 masukan.php
Laporan Akhir Pemrograman Web 2070231057 17 Script:
<html>
<head>
<title>Masukan</title>
</head>
<body>
<form action="keluaran.php" method="post">
Nama Anda : <br>
<input type="text"name="nama"><br>
Kuliah di:<br>
<input type="text"name="sekolah"><br>
<input type="submit"><input type="reset">
</form>
<body>
Screenshot Hasil Input:
Program 3.5 keluaran.php Script:
<html>
<head>
<title>Keluarannya</title>
</head>
<body>
<?php
echo "Hai, ".$_POST["nama"]."</br>";
echo $_POST ["sekolah"]."memang top";
?>
</body>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 18 Program 3.6 kondisi.php
Script:
<html>
<head>
<title>Kondisional</title>
</head>
<body>
<?php
$Hari=date ("1");
if ($Hari == "Saturday") {
print("Hari yang menyenangkan");
} else
{
print("Hari yang melelahkan");
} ?>
</body>
Screenshot Hasil Input:
Program 3.7 ulang.php Script:
<?php
$Tanggal=date("d F Y");
?>
<html>
<head>
<title>Pengulangan</title>
</head>
<body>
<?php
/*script pengenalan Pengulangan*/
Laporan Akhir Pemrograman Web 2070231057 19
Print("$Tanggal <br>\n");
For ($count=1; $count<=4; $count++) {
echo("Anda adalah calon webmaster <br>\n");
} ?>
</body>
</html>
Screenshot Hasil Input:
Program 3.8 lock_glo.php Script:
<html>
<head>
<title>VARIABEL LOKAL DAN GLOBAL</title>
</head>
<body>
<?php
Function printklub($NamaKlub) {
print("Klub Sepak Bola adalah $NamaKlub <br>
\n");
}
Function MitraSby () {/*Variabel Lokal*/
$NamaKlub="Mitra Surabaya";
Laporan Akhir Pemrograman Web 2070231057 20
printklub($NamaKlub);
}
Function persija () {/*Variabel Lokal*/
$NamaKlub="Persija";
printklub($NamaKlub);
}
Function Forever () {/*Variabel Global*/
$NamaKlub="AC milan";
printklub($NamaKlub);
}
/*Variabel Global*/
$NamaKlub = "AC milan";
Forever();
MitraSby();
persija();
?>
</body>
</html>
Screenshot Hasil Input:
Program 3.9 operator.php Script:
<html>
<head>
<title>Operator</title>
</head>
<body>
<?php
$Harga = 100; $Pengujung = 8;
print("Jumlah pengunjung hari ini $Pengujung <br> \n");
print("Total Pendapatan :"); print($Harga * $Pengujung);
?>
</body>
</html>
Laporan Akhir Pemrograman Web 2070231057 21 Screenshot Hasil Input:
Program 3.10 ekspresi.php Script:
<html>
<head>
<title> EKSPRESI </title>
</head>
<body>
<?php
Print((4+1*2). "<BR>\n");
Print(((4+1)*2). "<BR>\n");
?>
</body>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 22
MODUL 4
Program 4.1 if.php Script:
<html>
<head><title>IF</title>
</head>
<body>
<?php
$X=100;
$Y=50;
If($X > $Y) {
Print("X Lebih besar dari Y");
} ?>
</body>
</html>
Screenshot Hasil Input:
Program 4.2 ifelse.php Script:
<html>
<head><title>IF ELSE</title>
<body>
<?php
$X=100;
$Y=50;
IF($X > $Y) {
Print("X Lebih besar dari Y");
} else {
Print("X Lebih kecil dari Y");
} ?>
</body>
</html>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 23 Program 4.3 switch.php
Script:
<html>
<head><title>SWITCH</title>
<body>
<?php
$indonesian_day = date("|");
switch($indonesian_day)
{
case"Monday":
$indonesian_day ="Senin";
break;
case"Tuesday":
$indonesian_day ="Selasa";
break;
case"Wednesday":
$indonesian_day ="Rabu";
break;
case"Thursday":
$indonesian_day ="Kamis";
break;
case"Friday":
$indonesian_day ="Jumat";
break;
case"Saturday":
$indonesian_day ="Sabtu";
break;
default:
$indonesian_day ="Minggu";
}
print("Hari Ini Adalah Hari $indonesian_day");
?>
</body>
</html>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 24 Program 4.4 for.php
Script:
<html>
<head><title>FOR</title>
<body>
<?php
for ($i=3; $i<=7; $i++) {
Print("<font size=$>ERZA</font><br>");
} ?>
</body>
</html>
Screenshot Hasil Input:
Program 4.5 while.php Script:
<html>
<head>
<title>while</title>
</head>
<body>
<?php $i=1;
while($i<=7) {
print("$i<br>");
$i++;
} ?>
</body>
</html>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 25 Program 4.6 doWhile.php
Script:
<!DOCTYPE html>
<html>
<head>
<title>do while</title>
</head>
<body>
<?php $i=1;
do {
print("$i<br>");
$i++;
}
while($i<= 7) ?>
</body>
</html>
Screenshot Hasil Input:
Program 4.7 array1.php Script:
<?php
$nama_bulan = array("Januari", "Pebruari", "Maret", "April", "Mei",
"Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");
$bulan_ini = $nama_bulan[date("m")-1];
echo "Sekarang Bulan <b>$bulan_ini</b>";
?>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 26 Program 4.8 arrayString.php
Script:
<!DOCTYPE html>
<html>
<head>
<title>Array Urut</title>
</head>
<body>
<?php
$teksl = "Pemrograman Web dengan PHP";
print("Teks Asli $teksl : <br>");
$hasil = explode(" ", $teksl);
print("<b>Setelah explode : </b><br>");
print_r($hasil);
print("<br>");
$gabung1 = implode ("-", $hasil);
$gabung2 = join ("-", $hasil);
print("<b>Setelah implode : </b><br>");
print_r($gabung1);
print("<br>");
print("<b> Setelah implode : </b><br>");
print_r($gabung2);
print ("<br></br>");
$teks2 = "17.7.2005";
$apisah1 = preg_split('[/.-]',$teks2);
print("Teks Ali: $teks2 <br>");
print_r($apisah1);
print("<br><br>");
$teks3 = "Pemrograman PHP";
$apisah2 = preg_split('//',$teks3,-1,preg_split_no_empty);
$banyak = sizeof($apisah2);
print("teks Asli: $teks3 <br>");
print("<b>Setelah preg_split:</b><br>");
$i=0;
while($i<$banyak) {
print($apisah2[$i]." ");
$i++;
Laporan Akhir Pemrograman Web 2070231057 27
} ?>
</body>
</html>
Screenshot Hasil Input:
Program 4.9 array_multidimensi.php Script:
<?php
$data = @array(
$array = array(Judul => "Keamanan Jaringan Internet", Pengarang => "Onno W Purbo",),
$array = array(Judul => "Pengenalan Security", Pengarang => "Sri Wahyuni",),
$array = array(Judul => "Network Security", Pengarang => "Tom Thomas",), );
echo "Array Multdimensi <br><br>";
foreach ($data as $val) {
foreach ($val as $key => $data2) {
echo "$key : $data2 <br>";
} }
echo "<br>";
}
?>
Screenshot Hasil Input:
Laporan Akhir Pemrograman Web 2070231057 28 TUGAS PRAKTIKUM MODUL 2
Source Code #1 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Registrasi</title>
<link rel="stylesheet" type="text/css" href="web_registrasi.css">
</head>
<body>
<h1><b>Selamat Datang</b> </h1>
<h2>Formulir Registrasi</h2>
<div>
<table border="1" align="center">
<td>
<table border="0" align="center">
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text" name="NamaLengkap"></td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><input type="text" name="TempatLahir"></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><input type="date" name="TanggalLahir"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type="radio" name="jenis_kelamin"
value="Pria"> Pria
<input type="radio" name="jenis_kelamin"
value="Perempuan"> Perempuan
</td>
</tr>
<tr>
<td>Kota</td>
<td>:</td>
<td>
Laporan Akhir Pemrograman Web 2070231057 29
<select class="input-control" name="Kota">
<option>--Pilih Kota Tinggal--</option>
<option>Bekasi</option>
<option>Bandung</option>
<option>Bogor</option>
<option>Depok</option>
<option>Jakarta</option>
<option>Tangerang</option>
</select>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>
<textarea name="alamat"></textarea>
</td>
</tr>
<tr>
<td>No. Handphone</td>
<td>:</td>
<td><input type="text" name="no_telp"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button>Kirim</button>
<button>Reset</button>
</td>
</tr>
</table>
</td>
</table>
</div>
</body>
</html>
Source Code #2 CSS
body{
Laporan Akhir Pemrograman Web 2070231057 30
background-image: url(https://img.freepik.com/free-photo/old-wall- background_1149-1295.jpg?size=626&ext=jpg);
background-size: cover;
}
h1{
text-align: center;
font-size: 50px;
} h2 {
text-align: center;
font-size: 30px;
} td {
padding-top: 10px;
padding-bottom: 10px;
}
button {
background-color: darkgreen;
}
Tampilan Output
TUGAS PRAKTIKUM MODUL 3 Nomor 1
<html>
<head>
Laporan Akhir Pemrograman Web 2070231057 31
<title>Kondisional</title>
</head>
<body>
<?php
$bulan = "4";
if ($bulan == "1") {
print("Bulan Januari");
}
elseif ($bulan == "2") {
print("Bulan Februari");
}
elseif ($bulan == "3") {
print("Bulan Maret");
}
elseif ($bulan == "4") {
print("Bulan April");
}
elseif ($bulan == "5") {
print("Bulan Mei");
}
elseif ($bulan == "6") {
print("Bulan Juni");
}
elseif ($bulan == "7") {
print("Bulan Juli");
}
elseif ($bulan == "8") {
print("Bulan Agustus");
}
elseif ($bulan == "9") {
print("Bulan September");
}
elseif ($bulan == "10") {
print("Bulan Oktober");
}
elseif ($bulan == "11") {
print("Bulan November");
Laporan Akhir Pemrograman Web 2070231057 32
}
elseif ($bulan == "12") {
print("Bulan Desember");
} else
{
print("Salah Input");
} ?>
</body>
Nomor 2
Source Code : modul3-2.php
<!DOCTYPE html>
<html>
<head>
<title>Membuat Kalkulator Sederhana Dengan PHP</title>
<link rel="stylesheet" type="text/css" href="style3-2.css">
</head>
<body>
<?php
if(isset($_POST['hitung'])){
$bil1 = $_POST['bil1'];
$bil2 = $_POST['bil2'];
$operasi = $_POST['operasi'];
switch ($operasi) { case 'tambah':
$hasil = $bil1+$bil2;
break;
case 'kurang':
$hasil = $bil1-$bil2;
break;
case 'kali':
$hasil = $bil1*$bil2;
break;
case 'bagi':
$hasil = $bil1/$bil2;
break;
} } ?>
Laporan Akhir Pemrograman Web 2070231057 33
<div class="kalkulator">
<h2 class="judul">KALKULATOR</h2>
<a class="brand"
href="https://theodrsp.github.io/portfolio.html">https://theodrsp.github.io/po rtfolio.html</a>
<form method="post" action="index.php">
<input type="text" name="bil1" class="bil" autocomplete="off"
placeholder="Masukkan Bilangan Pertama">
<input type="text" name="bil2" class="bil" autocomplete="off"
placeholder="Masukkan Bilangan Kedua">
<select class="opt" name="operasi">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">x</option>
<option value="bagi">/</option>
</select>
<input type="submit" name="hitung" value="Hitung"
class="tombol">
</form>
<?php if(isset($_POST['hitung'])){ ?>
<input type="text" value="<?php echo $hasil; ?>" class="bil">
<?php }else{ ?>
<input type="text" value="0" class="bil">
<?php } ?>
</div>
</body>
</html>
Source Code: style3-2.css
body{
background: #F2F2F2;
font-family: sans-serif;
}
.kalkulator{
width: 335px;
background: #2F495A;
margin: 100px auto;
padding: 10px 20px 50px 20px;
border-radius: 5px;
box-shadow: 0px 10px 20px 0px #D1D1D1;
} .bil{
width: 300px;
margin: 5px;
border: none;
Laporan Akhir Pemrograman Web 2070231057 34
font-size: 16pt;
border-radius: 5px;
padding: 10px;
} .opt{
font-size: 16pt;
border: none;
width: 215px;
margin: 5px;
border-radius: 5px;
padding: 10px;
}
.tombol{
background: #EC5159;
border-top: none;
border-right: none;
border-left: none;
border-radius: 5px;
padding: 10px 20px;
color: #eee;
font-size: 15pt;
border-bottom:4px solid #BF3D3D;
}
.brand{
color: #eee;
font-size: 11pt;
float: right;
text-decoration: none;
margin: 12px;
}
.judul{
text-align: center;
color: #eee;
font-weight: normal;
}
Output:
Laporan Akhir Pemrograman Web 2070231057 35 Nomor 3
<!DOCTYPE html>
<br lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
Your Nama: <input type="text" name="nama" required></br>
Your Password: <input type="password" name="pw" required></br>
Your Age:<br>
<input type="radio" name="umur" value="5-15">5-15<br>
<input type="radio" name="umur" value="16-30">16-30<br>
Your Life Story: <input type="text" name="ylr"><br>
Your Favorite Sport: <input type="text" name="sport"><br>
Language You Choose: <br>
<input type="radio" name="bahasa" value="PHP">PHP<br>
<input type="radio" name="bahasa" value="JS">JS<br>
</bJS
</html>
Laporan Akhir Pemrograman Web 2070231057 36 TUGAS PRAKTIKUM MODUL 4
Nomor 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tugas Modul 4</title>
</head>
<body>
<h1>Bantuan Pemerintah Untuk Keluarga Korban Bencana Banjir</h1>
<p>Balita = Rp 10.000</p>
<p>Di atas Balita = Rp 20.000</p>
<?php
$balita = "10000";
$nonBalita = "20000";
?>
<p>Balita per hari = <?php echo $balita ?></p>
<p>NonBalita per hari = <?php echo$nonBalita ?></p>
</body>
</html>
