LAPORAN PRAKTIKUM LATIHAN MODUL

(1)

LAPORAN PRAKTIKUM LATIHAN MODUL

LAILI PUTRI FAJRI 2070231108 A1 REGULER PAGI

FAKULTAS TEKNIK

PROGRAM STUDI TEKNIK INFORMARTIKA

UNIVERSITAS KRISNADWIPAYANA

(2)

Button Choice

<!DOCTYPE html>

<html>

<body>

<h3>Pilih Makanan</h3>

<form>

<br>

</form>

</body>

</html>

Hasil :

(3)

Check Box

<!DOCTYPE html>

<html>

<body>

<h3>Kendaraan Apa Yang Anda Miliki?</h3>

<form>

<input type="checkbox" value="Mobil">Mobil <br>

<input type="checkbox" value="Motor">Motor <br>

<input type="checkbox" value="Sepeda">Sepeda <br>

<input type="checkbox" value="Pesawat">Pesawat <br>

<br>

</form>

</body>

</html>

Hasil:

(4)

Combo Box

<!DOCTYPE html>

<html>

<body>

<h3>Kendaraan Apa Yang Anda Miliki?</h3>

<form>

<option value="pesawat">Pesawat</option>

<option value="mobil">Mobil</option>

<option value="motor">Motor</option>

<option value="sepeda">Sepeda</option>

</select>

</form>

</body>

</html>

Hasil :

(5)

Radio Box

<!DOCTYPE HTML>

<html>

<body>

<b3>Pilih Jenis Kelamin</b3>

<form>

<input type="radio" name="gender" value="perempuan"> Perempuan<br>

<input type="radio" name="gender" value="lainnya"> Lainnya<br>

</form>

</body>

</html>

Hasil :

(6)

LATIHAN MODUL 2

CSS_1

<html>

<head>

type="text/Css"

href="style.css"/>

<title>atribut ID</title>

</head>

<body>

<h1>PANTUN</h1>

Kalau ada jarum yang patah<BR>

Jangan disimpan dalam peti

</h2>

Kalau ada kata yang salah<BR>

Jangan disimpan dalam hati

</h3>

</body>

</html>

Hasil :

(7)

CSS_2

<html>

<head>

<title>Komentar</title>

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="biru">Merah? Nggak Mungkin!</h3>

</body>

</html>

Hasil :

(8)

CSS_3

<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>

Hasil :

(9)

EXTERNAL

<html>

<head>

<title>CSS Pertama</title>

href="style.css">

</head>

<body>

<h1> CSS Pertamaku</h1>

Selamat Mencoba CSS!

</body>

</html>

Hasil :

(10)

LAT_CSS

<html>

<title>CSS Pertama</title>

H1{ font-size: 14pt;

font-style: italic;

color: green;}

</style>

</Head>

<body>

<h1> CSS Pertamaku</h1>

Selamat mencoba css

</body>

</html>

Hasil :

(11)

LINK_TBGANTI

A:link {

color: white;

text-decoration: none;

padding: 0.5em;

margin: 0.5em;

display: block;

}

A:visited {

color: white;

text-decoration: none;

padding: 0.5em;

margin: 0.5em;

display: block;

}

A:active {

color: white;

padding: 0.5em;

margin: 0.5em;

display: block;

text-decoration: underline;

color: red;

}

STYLE

H1 { font-size: 14pt;

font-style: italic;

color: green;}

#tebal { font-weight: bold;

color: blue;}

#miring { font-style: italic;

(12)

color: pink;}

TABLE_MARGIN

<html>

<head>

<title>penganturan margin</title>

table.margin {margin-left: 2cm;}

</style>

</head>

<body>

<p>

Paragraf tidak diberi margin

</p>

<tr>

<td>perataan margin kiri </td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Hasil :

(13)

Coba.php Latihan Modul 3

<html>

<head>

<title>Example</title>

</head>

<body>

<?php

Echo "Hi, i'm a PHP script!";

?>

</body>

</html>

Hasil:

(14)

Ekspresi.php

<html>

<head>

<title>EKSPRESI</title>

</head>

<body>

<?php

Print((4+1*2). "<BR>\n");

Print(((4+1)*2). "<BR>\n");

?>

</body>

</html>

Hasil:

(15)

Keluaran.php

<html>

<head>

<title>Keluarannya</title>

</head>

<body>

<?php

print($nama="Hai <BR> \n");

print($sekolah="memang top");

?>

</body>

</html>

Hasil:

(16)

Kondisi.php

<html>

<head>

<title>Kondisional</title>

</head>

<body>

<?php

$Hari=date("1");

If ($Hari=="Saturday") {

Print("Hari yang menyenangkan");

} else {

print("Hari yang melelahkan");

}

?>

</body>

</html>

Hasil:

(17)

Lok_glo.php

<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";

printklub($NamaKlub);

}

Function persija () {/*Variabel Lokal*/

$NamaKlub="Persija";

}

Function Forever () {/*Variabel Global*/

$NamaKlub="AC milan";

}

(18)

/*Variabel Global*/

$NamaKlub = "AC milan";

Forever();

MitraSby();

persija();

?>

</body>

</html>

Hasil:

(19)

Masukan.php

<html>

<head>

<title>Masukan</title>

</head>

<body>

Nama Anda: <br>

Kuliah di: <br>

</FORM>

</body>

</html>

Hasil:

(20)

Operator.php

<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>

Hasil:

(21)

Tanggal.php

<html>

<head>

<title>Tanggal</title></head>

<body>

Tanggal :

<?php

/*script untuk menuliskan tanggal*/

echo date ("d F Y");

?>

</body>

</html>

Hasil:

(22)

Ulang.php

<?php

$Tanggal=date("d F Y");

?>

<html>

<head>

<title>Pengulangan</title>

</head>

<body>

<?php

/*script pengenalan Pengulangan*/

Print("$Tanggal <br>\n");

For ($count=1; $count<=4; $count++) {

echo("Anda adalah calon webmaster <br>\n");

}

?>

</body>

</html>

Hasil:

(23)

Variabel.php

<html>

<head><title>Variabel</title></head>

<body>

<?php

$Tanggal = date ("d M Y");

$Nama = "Praktikan";

/*script pengenalan variabel*/

/*memanggil variabel Tanggal*/

echo ("$Tanggal, <BR> \n");

/*memanggil variabel Nama*/

echo ("$Nama, selamat datang di dunia webmaster");

?>

</body>

</html>

Hasil:

(24)

Latihan Modul 4 Array.php

<?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>";

?>

Hasil:

(25)

Array string.php

<!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);

(26)

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++;

}

?>

</body>

</html>

Array multidimensi.php

<?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) {

(27)

foreach ($val as $key => $data2) {

echo "$key : $data2 <br>";

} }

echo "<br>";

}

?>

(28)

Do while.php

<!DOCTYPE html>

<html>

<head>

<title>DO WHILE</title>

</head>

<body>

<?php

$i=1;

do {

print("$i<br>");

$i++;

}

while($i<= 7)

?>

</body>

</html>

Hasil:

(29)

For.php

<html>

<body>

<?php

for ($i=3; $i<=7; $i++) {

Print("<font size=$>ERZA</font><br>");

}

?>

</body>

</html>

Hasil:

(30)

If.php

<html>

</head>

<body>

<?php

$X=100;

$Y=50;

If($X > $Y) {

Print("X Lebih besar dari Y");

}

?>

</body>

</html>

Hasil:

(31)

If else.php

<html>

<body>

<?php

$X=100;

$Y=50;

IF($X > $Y) {

Print("X Lebih besar dari Y");

} else

{

Print("X Lebih kecil dari Y");

}

?>

</body>

</html>

Hasil:

(32)

Switch.php

<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;

(33)

default:

$indonesian_day ="Minggu";

}

print("Hari Ini Adalah Hari $indonesian_day");

?>

</body>

</html>

Hasil:

While.php

<html>

<head>

<title>WHILE</title>

</head>

<body>

<?php

(34)

$i=1;

while($i<=7) {

print("$i<br>");

$i++;

}

?>

</body>

</html>

Hasil:

(35)

Tugas Modul 2 Form.html

<!DOCTYPE HTML>

<html>

<head>

<title>Selamat Datang</title>

</head>

<body>

<h1>Login</h1>

<form>

<label>Username</label><br>

<label>Password</label><br>

<p> Belum Punya Akun?

<a href="formie.html">Register di Sini</a>

</p>

</form>

</div>

</body>

</center>

</html>

(36)

Formie.html

<!DOCTYPE HTML>

<html>

<head>

<title>Selamat Datang</title>

</head>

<body>

<h1>Register</h1>

<form>

<label>Username</label>

<br>

<br>

<label>Email</label>

<br>

<br>

<label>Password</label>

<br>

<br>

<button>Register</button>

(37)

<p> Sudah punya akun?

<a href="form.html">Login di sini</a>

</p>

</form>

</div>

</body>

</center>

</html>

Form.css

body{

background-color: bisque;

background-repeat: no-repeat ; background-size: cover;

color: white;

font-family:'Open Sans', sans-serif;

padding-top: 10px;

}

(38)

Hasil:

(39)

Tugas Modul 3 Nomor.1

<html>

<head>

<title>Kondisional</title>

</head>

<body>

<?php

$bulan = "4";

if ($bulan == "1") {

print("Bulan Januari");

}

elseif ($bulan == "2") {

print("Bulan Februari");

}

print("Bulan Maret");

}

print("Bulan April");

}

elseif ($bulan == "5")

(40)

{

print("Bulan Mei");

}

print("Bulan Juni");

}

print("Bulan Juli");

}

print("Bulan Agustus");

}

print("Bulan September");

}

print("Bulan Oktober");

}

print("Bulan November");

}

(41)

print("Bulan Desember");

} else

{

print("Salah Input");

}

?>

</body>

</html>

Hasil:

(42)

Nomor.2

<!DOCTYPE html>

<html>

<head>

<title>Kalkulator</title>

</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;

(43)

} }

?>

<h2 class="judul">KALKULATOR</h2>

<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>

<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{ ?>

<?php } ?>

</div>

</body>

</html>

(44)

Hasil:

Nomor 3.

<!DOCTYPE html>

<head>

<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>

(45)

Your Life Story: <input type="text" name="ylr"><br>

Your Favorite Sport: <input type="text" name="sport"><br>

Language You Choose: <br>

</html>

Hasil:

(46)

Tugas Modul 4

<!DOCTYPE html>

<html>

<head>

<title>Modul 4</title>

</head>

<body>

<h1>Bantuan Pemerintah Untuk Bencana Gempa</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>

(47)

Hasil:

(48)

(49)

(50)

(51)

(52)

(53)

Praktikum Pemrograman Web

Tugas Akhir 1. Tampilan Awal

<!doctype html>

<html lang="en">

<head>

 <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.

css" rel="stylesheet" integrity="sha384-

1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"

crossorigin="anonymous">

<title>Praktikum Pemrograman Web</title>

<link rel="stylesheet" href="index.css">

(54)

<link rel="icon" href="computer.png">

</head>

<body>

<br>

<center><h1>PRAKTIKUM PEMROGRAMAN WEB</h1></center>

</div>

<br>

<center>

<h2>Nama: Laili Putri Fajri</h2><br>

<h2>NIM: 2070231108</h2><br>

<h2>Kelas: Teknik Informatika - A1</h2>

</center>

<br>

<header style="text-align: center;">

<a href="menuu.html">

<button type="button" class="btn btn-outline-dark">See More</button>

</a>

(55)

</header>

<script

src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.

min.js" integrity="sha384-

ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"

crossorigin="anonymous"></script>

<!--

<script

src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.mi n.js" integrity="sha384-

7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"

<script

src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js

" integrity="sha384-

QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"

-->

</body>

</html>

Hasil:

(56)

2. Tampilan Menu

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1">

<link

<title>Praktikum Laili</title>

<link rel="stylesheet" href="menu.css">

(57)

</head>

<body>

<br>

<h1>SELAMAT DATANG DI MENU TUGAS AKHIR PRAKTIKUM SAYA</h1>

</header>

<br>

<a href="biodata.html">

<img src="biodata.png" alt="BIODATA" width="100" height="100"

style="text-align: center;">

</a>

<a href="audio.html">

<img src="music.png" alt="AUDIO" width="100" height="100">

</a>

<a href="tabel.html">

<img src="table.png" alt="TABEL" width="100" height="100">

</a>

<a href="kalender.html">

<img src="calendar.png" alt="KALENDER" width="100" height="100">

(58)

</a>

<a href="bankk.html">

<img src="bank.png" alt="BANK" width="100" height="100">

</a>

<a href="universitas.html">

<img src="campus.png" alt="UNIVERSITAS" width="100"

height="100">

<a href="socmed.html">

<img src="socmed.png" alt="MEDIA SOSIAL" width="100"

height="100">

</a>

</header>

<br>

<a href="index.html">

<button type="button" class="btn btn-outline-

danger">Back</button>

</a>

</header>

</body>

</html>

Hasil:

(59)

3. Tampilan Biodata

<head>

<link

<title>Biodata</title>

<link rel="stylesheet" href="biodata.css">

(60)

</head>

<body>

<br>

<h1>SELAMAT DATANG DI HALAMAN BIODATA SAYA</h1>

</header>

<br>

<h5 align="center">BIODATA DIRI</h5>

<table width="400" border="1" cellpadding="5" align="center">

<tr>

<td><b>Nama</b></td>

<td>Laili Putri Fajri</td>

</tr>

<tr>

<td><b>Tempat Tanggal Lahir</b></td>

<td>Bekasi, 20 April 2002</td>

</tr>

<tr>

<td><b>Jenis Kelamin</b></td>

<td>Perempuan</td>

</tr>

<tr>

<td><b>Agama</b></td>

(61)

<td>Islam</td>

</tr>

<tr>

<td><b>Kewarganegaraan</b></td>

<td>Indonesia</td>

</tr>

<tr>

<td><b>Alamat</b></td>

<td>Jln. Kodau V, Bekasi</td>

</tr>

<tr>

<td><b>Nomor Telepon</b></td>

<td>081213416931</td>

</tr>

<tr>

<td><b>Perguruan Tinggi</b></td>

<td>Universitas Krisnadwipayana</td>

</tr>

<tr>

<td><b>Fakultas</b></td>

<td>Teknik</td>

</tr>

<tr>

<td><b>Jurusan</b></td>

<td>Teknik Informatika</td>

(62)

</tr>

<tr>

<td><b>Hobi</b></td>

<td>Bermain game</td>

</tr>

</table></tr>

<br>

dark">Back</button>

</a>

</header>

</body>

</html>

Hasil:

(63)

(64)

4. Tampilan Audio

<head>

scale=1">

<link

(65)

<title>Audio</title>

<link rel="stylesheet" href="audio.css">

</head>

<body>

<br>

<h1>SELAMAT DATANG DI HALAMAN AUDIO SAYA</h1>

<br>

</header>

<br>

<h6>Rex Orange County - Always</h6>

<audio controls>

<source src="always.mp3" type="audio/mpeg">

</audio>

<br>

<h6>Rex Orange County - Nothing</h6>

<source src="nothing.mp3" type="audio/mpeg">

(66)

</audio>

<br>

<h6>Rex Orange County - Pluto Projector</h6>

<source src="pluto.mp3" type="audio/mpeg">

</audio>

</header>

<br><br>

dark">Back</button>

</a>

</header>

</body>

</html>

Hasil:

(67)

5. Tampilan Tabel

(68)

<head>

<link

<title>Tabel</title>

<link rel="stylesheet" href="tabel.css">

</head>

<body>

<br>

<h2>TABEL JADWAL KULIAH</h2>

<h2>SEMESTER GANJIL TAHUN AKADEMIK 2021-2022</h2>

<h2>PROGRAM STUDI TEKNIK INFORMATIKA</h2>

<h2>KELAS A1</h2>

</header>

<br>

(69)

<table align="center" width="50%" border="2" style="background:white">

<tr>

<td><center><b>No</b></center></td>

<td><center><b>Mata Kuliah</b></center></td>

<td><center><b>Dosen</b></center></td>

<td><center><b>Hari</b></center></td>

<td><center><b>Jam</b></center></td>

<td><center><b>Ruangan</b></center></td>

</tr>

<tr>

<td>1</td>

<td><center>Grafika Komputer</center></td>

<td><center>Suliatianto, MM, Mkom</center></td>

<td><center>Senin</center></td>

<td>08:00 - 10:30</td>

<td><center>301</center></td>

</tr>

<tr>

<td>2</td>

<td><center>Pemrograman Web</center></td>

<td><center>Avip Kurniawan, ST, Mkom</center></td>

<td>Senin</td>

<td>13:00 - 15:30</td>

</tr>

(70)

<tr>

<td>3</td>

<td><center>Bahasa Inggris</center></td>

<td><center>Drs. Anwar Sihombing, MPd</center></td>

<td>Selasa</td>

<td>08:00 - 10:00</td>

</tr>

<tr>

<td>4</td>

<td><center>Basis Data Lanjutan</center></td>

<td><center>Ali Khumaidi,Mkom</center></td>

<td>Selasa</td>

<td>10:00 - 12:30</td>

</tr>

<tr>

<td>5</td>

<td><center>Teori Graf dan Otomata</center></td>

<td><center>Agustina Indarwati, SSI, MSi</center></td>

<td>Rabu</td>

<td>08:00 - 10:30</td>

</tr>

<tr>

(71)

<td>6</td>

<td><center>Komputasi Cerdas</center></td>

<td><center>Ali Khumaidi, Mkom</center></td>

<td>Kamis</td>

<td>08:00 - 10:30</td>

</tr>

<tr>

<td>7</td>

<td><center>Statistika dan Probabilitas</center></td>

<td><center>Tri Hartati, Skom, Mkom</center></td>

<td>Kamis</td>

<td>11:00 - 13:30</td>

</tr>

</table>

<br><br><br>

warning">Back</button>

</a>

</header>

</body>

</html>

(72)

Hasil:

6. Tampilan Kalender

<head>

(73)

scale=1">

<link

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Kalender</title>

<link rel="stylesheet" href="kalender.css">

</head>

<center>

<br><br>

<p><h1>SELAMAT DATANG DI HALAMAN KALENDER</h1></p>

<br><br>

<script language="JavaScript">

/*

Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net) Permission granted to Dynamicdrive.com to include script in archive For this and 100's more DHTML scripts, visit http://dynamicdrive.com

(74)

*/

var ns6=document.getElementById&&!document.all var ie4=document.all

var Selected_Month;

var Selected_Year;

var Current_Date = new Date();

var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();

if (Current_Year < 1000) Current_Year+=1900

var Today = Current_Date.getDate();

function Header(Year, Month) {

if (Month == 1) {

(75)

Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) &&

(Year % 100 !=0))) ? 29 : 28;

}

var Header_String = Month_Label[Month] + ' ' + Year;

return Header_String;

}

function Make_Calendar(Year, Month) {

var First_Date = new Date(Year, Month, 1);

var Heading = Header(Year, Month);

var First_Day = First_Date.getDay() + 1;

if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||

((Days_in_Month[Month] == 30) && (First_Day == 7))) { var Rows = 6;

}

else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) { var Rows = 4;

} else {

var Rows = 5;

}

(76)

var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0"

BORDERCOLORLIGHT="808080">';

HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF"

BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF"

BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF"

BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF"

BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF"

BORDERCOLOR="000000">Wed</th>';

HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF"

BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF"

BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF"

BORDERCOLOR="000000">Sat</th></tr>';

var Day_Counter = 1;

var Loop_Counter = 1;

for (var j = 1; j <= Rows; j++) {

HTML_String += '<tr ALIGN="left" VALIGN="top">';

for (var i = 1; i < 8; i++) {

if ((Loop_Counter >= First_Day) && (Day_Counter <=

Days_in_Month[Month])) {

if ((Day_Counter == Today) && (Year == Current_Year) &&

(Month == Current_Month)) {

HTML_String += '<td BGCOLOR="FFFFFF"

BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';

(77)

} else {

HTML_String += '<td BGCOLOR="FFFFFF"

BORDERCOLOR="000000">' + Day_Counter + '</td>';

}

Day_Counter++;

} else {

HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';

}

Loop_Counter++;

}

HTML_String += '</tr>';

}

HTML_String += '</table></td></tr></table>';

cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar

cross_el.innerHTML = HTML_String;

}

function Check_Nums() {

if ((event.keyCode < 48) || (event.keyCode > 57)) { return false;

} }

(78)

function On_Year() {

var Year = document.when.year.value;

if (Year.length == 4) {

Selected_Month = document.when.month.selectedIndex;

Selected_Year = Year;

Make_Calendar(Selected_Year, Selected_Month);

} }

function On_Month() {

var Year = document.when.year.value;

if (Year.length == 4) {

Selected_Month = document.when.month.selectedIndex;

Selected_Year = Year;

} else {

alert('Please enter a valid year.');

document.when.year.focus();

} }

(79)

function Defaults() { if (!ie4&&!ns6) return

var Mid_Screen = Math.round(document.body.clientWidth / 2);

document.when.month.selectedIndex = Current_Month;

document.when.year.value = Current_Year;

Selected_Month = Current_Month;

Selected_Year = Current_Year;

Make_Calendar(Current_Year, Current_Month);

}

function Skip(Direction) { if (Direction == '+') {

if (Selected_Month == 11) { Selected_Month = 0;

Selected_Year++;

} else {

Selected_Month++;

} } else {

if (Selected_Month == 0) {

(80)

Selected_Month = 11;

Selected_Year--;

} else {

Selected_Month--;

} }

document.when.month.selectedIndex = Selected_Month;

document.when.year.value = Selected_Year;

}

</script>

<body>

<div id=NavBar style="position:relative;width:286px;top:5px;"

align="center">

<form name="when"><table>

<tr>

<td><input type="button" value="<-- Back" onClick="Skip('-

')"></td>

<td> </td>

<td><select name="month" onChange="On_Month()">

<script language="JavaScript1.2">

if (ie4||ns6){

(81)

for (j=0;j<Month_Label.length;j++) {

document.writeln('<option value=' + j + '>' + Month_Label[j]);

} }

</script>

</select>

</td>

<td><input type="text" name="year" size=4 maxlength=4

onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>

<td> </td>

<td><input type="button" value="Next -->"

onClick="Skip('+')"></td>

</tr></table></form></div>

<div id=Calendar style="position:relative;width:238px;top:-

2px;" align="center"></div>

<body onLoad="Defaults()"></body>

</body>

</center>

<br>

<button type="button" class="btn btn-outline-primary">Back</button>

</a>

(82)

</header>

</html>

Hasil:

(83)

(84)

7. Tampilan Bank

<head>

<link

<title>Bank</title>

<link rel="stylesheet" href="bank.css">

</head>

<body>

<br>

(85)

<h1>SELAMAT DATANG DI HALAMAN BANK SAYA</h1>

</header>

<br><br><br><br>

<a href="https://bca.co.id/">

<img src="bca.png" width="300" height="100"/>

</a>

<a href="https://bankmandiri.co.id/">

<img src="mandiri.png" width="300" height="100"/>

</a>

<a href="https://www.bni.co.id/id-id/">

<img src="bni.png" width="300" height="100"/>

</a>

</header>

</body>

<br><br><br><br>

light">Back</button>

</a>

</header>

</body>

</html>

(86)

Hasil:

(87)

8. Tampilan Universitas

<head>

scale=1">

<link

<title>Universitas</title>

<link rel="stylesheet" href="universitas.css">

</head>

(88)

<body>

<br>

<h1>SELAMAT DATANG DI HALAMAN UNIVERSITAS SAYA</h1>

</header>

<br><br>

<a href="https://unkris.ac.id/">

<img src="unkris.png" width="200" height="200"/>

</a>

<a href="https://lspr.edu/">

<img src="lsprr.png" width="220" height="170"/>

</a>

<a href="http://trisakti.ac.id">

<img src="trisakti.png" width="200" height="200"/>

</a>

</header>

<br><br><br>

danger">Back</button>

</a>

(89)

</header>

</body>

</html>

Hasil:

(90)

9. Tampilan Media Sosial

<head>

scale=1">

<link

(91)

<title>Media Sosial</title>

<link rel="stylesheet" href="socmed.css">

</head>

<body>

<br>

<h1>SELAMAT DATANG DI HALAMAN MEDIA SOSIAL SAYA</h1>

</header>

<br><br><br><br><br>

<a href="https://www.instagram.com/sadcrytears">

<img src="instagram.png" width="100" height="100"/>

</a>

<a href="https://www.linkedin.com/in/lailifajri">

<img src="linkedin.png" width="100" height="100"/>

</a>

<a

href="https://www.youtube.com/channel/UC6gp7Y50C4W0Xztx_Q2wEBA/videos">

<img src="youtube.png" width="100" height="100"/>

</a>

</header>

(92)

<br><br><br><br><br>

primary">Back</button>

</a>

</header>

</body>

</html>

Hasil: