LAPORAN PRAKTIKUM
“PEMROGRAMAN WEB”
ABDURRAHMAN RASYID 2070231077
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS KRISNADWIPAYANA
2021
MODUL 1
Latihan 1: Radio Button
Latihan 2: Button Choice
Latihan 3: Check Box
Latihan 4: Combo Box
MODUL 2 Program 2.1 : lat_css.html
<HTML>
<TITLE> CSS Pertamaku</TITLE>
<STYLE TYPE "text/CSS">
H1 { font-size:14pt;
font-style: italic;
color: green; }
</STYLE
</HEAD>
<BODY
<H1>CSS Pertamaku</H3>
Selamat mencoba CSS!
</BODY>
</HTML>
Program 2.2 css external : style.css
H1 { font-size:14pt;
font-style:italic;
color: green; }
#Tebal { font-weight : bold;
color : blue; }
#Miring { font-style : italic;
color : pink;}
Program 2.3 css external2 : external.html
<HTML><HEAD>
<TITLE>CSS Pertamaku</TITLE>
<link rel ="stylesheet" type="text/css" href="style.css"/>
</HEAD <BODY>
<H1>CSS Pertamaku</H1>
Selamat mencoba CSS!
</BODY>
</HTML
Program 2.4 : css1.html
<HTML>
<HEAD><link rel="stylesheet" type="text/css" href="style.css"/>
<TITLE>atribut ID</TITLE>
</HEAD>
<BODY>
<H1>PANTUN</H1>
<H2 ID "Miring">
Kalau ada jarum yang patah<BR>
Jangan disimpan dalam peti
</H2>
<H3 ID ="TEBAL">
Kalau ada kata yang salah<BR>
Jangan disimpan dalam hati
</H3>
</BODY>
</HTML>
Program 2.5 : css2.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 = "biru">Merah? Nggak mungkin!</H3>
</BODY>
</HTML>
Program 2.6 : css3.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 di atas hitam<BR>
</SPAN>
</h2>
</body>
</html>
Program 2.7: tabel_margin.html
<html>
<head>
<title>pengaturan margin</title>
<style type="text/css">
table.margin {margin-left:2cm}
</style>
</head>
<body>
<p>
paragraf tidak di beri margin
</p>
<table class="margin" width="50%" border="1">
<tr>
<td>perataan margin kiri</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Program 2.8 : link_tbganti.css
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;
color: red;
background-image: url("#button.gif");
}
Program 2.9 : fm_btnflat.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 bordercolor="1">
<tr>
<td width="58"> nama</td>
<td width="230">:
<input type="text" name="nama">
</td>
</tr>
<td width="58"> alamat</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>
<td>
<input class="button" type="submit" name="submit" value="submit">
<input class="button" type="submit" name="submit2" value="simpan"”>
</td>
</tr>
</table>
</form>
</body>
</html>
TUGAS MODUL 2
1. PROGRAM LINK
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
a:link { color: white;
background-image: url("Background_1.jpg");
background-repeat: no-repeat;
text-decoration: none;
padding: 0.5em;
margin: 0.5em;
display: block;
}
a:visited {
color : white;
text-decoration: none ;
background-image : url("Background_1.jpg");
padding: 0.5em;
margin: 0.5em;
display: block;
}
a:active { color : white;
background-image : url("Background_1.jpg");
padding: 0.5em;
margin: 0.5em;
display: block;
text-decoration: underline;
color: blue;
background-image : url("Background_1.jpg");
}
</style>
</head>
<a href="https://unkris.ac.id/">unkris</a>
</body>
</html>
2. FORM REGISTER
<!DOCTYPE html>
<html>
<head>
<title>Tugas 2 Praktikum</title>
</head>
<body>
<h1>WELCOME</h1>
<h2>Formulir Registrasi</h2>
<table>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><input type="Date"></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>Alamat</td>
<td>:</td>
<td><textarea cols="22" rows="3" ></textarea></td>
</tr>
<tr>
<td>Kota</td>
<td>:</td>
<td><select>
<option>**Pilih Kota**</option>
<option>Bogor</option>
<option>Jakarta</option>
<option>Bekasi</option>
<option>Depok</option>
<option>Tanggerang</option>
</select></td>
</tr>
<tr>
<td>No Hp</td>
<td>:</td>
<td><input type="number"></td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td><input type="email"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="submit" value="simpan"/><input type="reset" value="Batal"/></td>
</tr>
<le>
</table>
<link rel="stylesheet" type="text/css" href="Style.css">
</body>
</html>
MODUL 3
Program 3.1 : coba.php
Program 3.2 : tanggal.php
Program 3.3 variabel.php
Program 3.4 : masukan.php
Program 3.5 : keluaran.php
Program 3.6 : kondisi.php
Program 3.7 : ulang.php
Program 3.8 : lok_glo.php
Program 3.9 : operator.php
Program 3.10 : ekspresi.php
TUGAS MODUL 3
1.
2.
3.
MODUL 4
If.php
Ifelse.php
For.php
While.php
Array1.php
Arraysting.php
Array_multidimensi.php
TUGAS MODUL 4
TUGAS AKHIR
TampilanAwal.html
<!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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" crossorigin="anonymous">
<title>Index</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>PRAKTIKUM PEMROGRAMAN WEB</h1>
<P>Nama : Abdurrahman Rasyid <br> NIM : 2070231077 <br> Kelas : A2 FT.
INFORMATIKA</P>
<br><br><br><br>
<header>
<center><a href="menu.html">
<button type="button" class="btn btn-outline-primary"width="180"
height="180" title="Halaman Berikutnya">See More</button>
</a></center>
</header>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min .js" crossorigin="anonymous"></script>
</body>
</html>
Audio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio</title>
<link rel="stylesheet" href="audio.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<br>
<header style="text-align: center;">
<h1> SELAMAT DATANG DI HALAMAN AUDIO SAYA </h1>
</header>
<br>
<h2>Faime - Feels Like You</h2>
<audio controls>
<source src="Faime - Feels Like You (Lyrics).mp3" type="audio/mpeg">
Browsermu tidak mendukung tag audio, upgrade donk!
</audio>
<h2>Valley - Like 1999</h2>
<audio controls>
<source src="Valley - Like 1999 (Lyric Video).mp3"
type="audio/mpeg">
</audio>
<h2>Alec Benjamin - Older</h2>
<audio controls>
<source src="Alec Benjamin - Older (Lyric Video).mp3"
type="audio/mpeg">
</audio>
<br>
<br>
<a class="" href="menu.html" role="button">
<img src="arrow_left_29361.png" alt="kiri" width="50" height="50"
title="Halaman Sebelumnya"/>
</a>
</div>
</body>
</html>
Universitas.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sosial Media</title>
<link rel="stylesheet" href="univ.css">
</head>
<body>
<header style="text-align: center;">
<h1>SELAMAT DATANG DI HALAMAN UNIVERSITAS SAYA</h1>
</header>
<br><br><br><br>
<header style="text-align: center;">
<a href="https://www.unj.ac.id/">
<img src="Logo-unj.png" width="150" height="150"
title="Universitas Negeri Jakarta"/>
</a>
<a href="https://unkris.ac.id/">
<img src="logo unkris.png" style="display: block; margin: auto;"
width="150" height="150" title="Universitas Krisnadwipayana"/>
</a>
<a href="https://www.unpad.ac.id/">
<img src="logo-unpad1.png" width="200" height="150"
title="Universitas Padjadjaran"/>
</a>
</header>
<br><br>
<header style="text-align: center;">
<a href="menu.html">
<img src="arrow_left_29361.png" width="50" height="50"
title="Halaman Sebelumnya"/>
</a>
</header>
</body>
</html>
Bank.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank</title>
<link rel="stylesheet" href="bank.css">
</head>
<body>
<header style="text-align: center;">
<h1>SELAMAT DATANG DI HALAMAN BANK SAYA</h1>
</header>
<br><br>
<header>
<a target="_self" href="https://WWW.bca.co.id">
<img src="bca.png" alt="BCA" width="300" height="100">
</a>
</header>
<header>
<a target="_self" href="https://WWW.bni.co.id">
<img src="bni.png" alt="BNI" width="300" height="100">
</a>
</header>
<header>
<a target="_self" href="https://WWW.cimbniaga.co.id">
<img src="cimbniaga.png" alt="CIMB NIAGA" width="300"
height="100">
</a>
</header>
<header>
<a href="menu.html">
<img src="arrow_left_29361.png" width="50" height="50"
title="Halaman Sebelumnya"/>
</a>
</header>
</body>
</html>
Sosmed.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sosial Media</title>
<link rel="stylesheet" href="sosmed.css">
</head>
<body>
<br>
<header style="text-align: center;">
<h1>SELAMAT DATANG DI HALAMAN MEDIA SOSIAL SAYA</h1>
</header>
<br><br><br><br><br><br><br><br>
<header style="text-align: center;">
<a href="https://www.facebook.com/Paksi.Aryo.12/">
<img src="Logo Facebook.png" width="200" height="150"
title="Facebook"/>
</a>
<a href="https://www.instagram.com/paksiaryoo/">
<img src="Logo Instagram.png" width="150" height="150"
title="Instagram"/>
</a>
<a href="https://www.youtube.com/channel/UCVIoqyLryrdx0uM0XB3OFjw">
<img src="Logo Youtube.png" width="200" height="150"
title="Youtube"/>
</a>
</header>
<br><br><br><br>
<header style="text-align: center;">
<a href="menu.html">
<img src="arrow_left_29361.png" width="50" height="50"
title="Halaman Sebelumnya"/>
</a>
</header>
</body>
</html>
Kalender.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalender</title>
<link href="Kalender_2" rel="stylesheet">
<link rel="stylesheet" href="Kalender_2">
</head>
<body>
<br><br>
<header style="text-align: center;">
<h1>SELAMAT DATANG DI HALAMAN KALENDER SAYA</h1>
</header>
<br><br><br>
<div class="calendar">
<div class="header">
<a data-action="prev-month" href="javascript:void(0)" title="Previous Month"><i></i></a>
<div class="text" data-render="month-year"></div>
<a data-action="next-month" href="javascript:void(0)" title="Next Month"><i></i></a>
</div>
<div class="months" data-flow="left">
<div class="month month-a">
<div class="render render-a"></div>
</div>
<div class="month month-b">
<div class="render render-b"></div>
</div>
</div>
</div>
<script src="Kalender_3">
</script>
<br><br>
<header style="text-align: center;">
<a href="menu.html">
<img src="arrow_left_29361.png" width="50" height="50"
title="Halaman Sebelumnya"/>
</a>
</header>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: 0;
font-family: 'Courier New', Courier, monospace;
}
body {
background-image: url("wallhaven-q2oyll.jpg");
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
font: 300 18px/18px Roboto, sans-serif;
transition: background 0.4s ease-in-out 0s;
} h1{
color: white;
} *, :after, :before {
box-sizing: border-box;
}
.pull-left { float: left;
}
.pull-right { float: right;
}
.clearfix:after, .clearfix:before { content: '';
display: table;
}
.clearfix:after { clear: both;
display: block;
}
.calendar { width: 300px;
font-size: 100%;
margin: 50px auto 0;
perspective: 1000px;
cursor: default;
position: relative;
}
.calendar .header { height: 100px;
position: relative;
color: #fff;
}
.calendar .header .text { position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #308ff0;
padding: 15px;
transform: rotateX(90deg);
transform-origin: bottom;
backface-visibility: hidden;
transition: 0.4s ease-in-out 0s;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
opacity: 0;
}
.calendar .header .text > span { text-align: center;
padding: 26px;
display: block;
}
.calendar .header.active .text { transform: rotateX(0deg);
opacity: 1;
}
.months { width: 100%;
height: 280px;
position: relative;
}
.months .hr { height: 1px;
margin: 15px 0;
background: #ccc;
}
.month {
padding: 15px;
width: inherit;
height: inherit;
background: #fff;
position: absolute;
backface-visibility: hidden;
transition: all 0.4s ease-in-out 0s;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.months[data-flow='left'] .month { transform: rotateY(-180deg);
}
.months[data-flow='right'] .month { transform: rotateY(180deg);
}
.table {
width: 100%;
font-size: 10px;
font-weight: 400;
display: table;
}
.table .row {
display: table-row;
}
.table .row.head { color: #308ff0;
text-transform: uppercase;
}
.table .row .cell { width: 14.28%;
padding: 5px;
text-align: center;
display: table-cell;
}
.table .row .cell.disable { color: #ccc;
}
.table .row .cell span { display: block;
width: 28px;
height: 28px;
line-height: 28px;
transition: color, background 0.4s ease-in-out 0s;
}
.table .row .cell.active span { color: #fff;
background-color: #308ff0;
}
.months .month[data-active='true'] { transform: rotateY(0);
}
.header [data-action] { color: inherit;
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
z-index: 1;
opacity: 0;
transition: all 0.4s ease-in-out 0s;
}
.header [data-action] > i { width: 20px;
height: 20px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -10px;
}
.header [data-action] > i:before, .header [data-action] > i:after { top: 50%;
margin-top: -1px;
content: '';
position: absolute;
height: 2px;
width: 20px;
border-top: 2px solid;
border-radius: 2px;
}
.header [data-action*='prev'] { left: 15px;
}
.header [data-action*='next'] { right: 15px;
}
.header [data-action*='prev'] > i:before, .header [data-action*='prev'] > i:after { left: 0;
}
.header [data-action*='prev'] > i:before { top: 3px;
transform: rotate(-45deg);
}
.header [data-action*='prev'] > i:after { top: auto;
bottom: 3px;
transform: rotate(45deg);
}
.header [data-action*='next'] > i:before, .header [data-action*='next'] > i:after { right: 0;
}
.header [data-action*='next'] > i:before { top: auto;
bottom: 3px;
transform: rotate(-45deg);
}
.header [data-action*='next'] > i:after { top: 3px;
transform: rotate(45deg);
}
.header.active [data-action] { opacity: 1;
}
[data-theme='jan'] {
background-color: #90caf9;
}
[data-theme='jan'] .row.head { color: #1e88e5;
}
[data-theme='jan'] .header .text,
[data-theme='jan'] .table .row .cell.active span { background-color: #1e88e5;
}
[data-theme='feb'] {
background-color: #81d4fa;
}
[data-theme='feb'] .row.head { color: #039be5;
}
[data-theme='feb'] .header .text,
[data-theme='feb'] .table .row .cell.active span { background-color: #039be5;
}
[data-theme='mar'] {
background-color: #80cbc4;
}
[data-theme='mar'] .row.head { color: #00897b;
}
[data-theme='mar'] .header .text,
[data-theme='mar'] .table .row .cell.active span { background-color: #00897b;
}
[data-theme='apr'] {
background-color: #c5e1a5;
}
[data-theme='apr'] .row.head { color: #7cb342;
}
[data-theme='apr'] .header .text,
[data-theme='apr'] .table .row .cell.active span { background-color: #7cb342;
}
[data-theme='may'] {
background-color: #ffe082;
}
[data-theme='may'] .row.head { color: #ffb300;
}
[data-theme='may'] .header .text,
[data-theme='may'] .table .row .cell.active span { background-color: #ffb300;
}
[data-theme='jun'] {
background-color: #ffab91;
}
[data-theme='jun'] .row.head { color: #f4511e;
}
[data-theme='jun'] .header .text,
[data-theme='jun'] .table .row .cell.active span { background-color: #f4511e;
}
[data-theme='jul'] {
background-color: #ce93d8;
}
[data-theme='jul'] .row.head { color: #8e24aa;
}
[data-theme='jul'] .header .text,
[data-theme='jul'] .table .row .cell.active span { background-color: #8e24aa;
}
[data-theme='aug'] {
background-color: #b39ddb;
}
[data-theme='aug'] .row.head { color: #5e35b1;
}
[data-theme='aug'] .header .text,
[data-theme='aug'] .table .row .cell.active span { background-color: #5e35b1;
}
[data-theme='sep'] {
background-color: #ef9a9a;
}
[data-theme='sep'] .row.head { color: #e53935;
}
[data-theme='sep'] .header .text,
[data-theme='sep'] .table .row .cell.active span { background-color: #e53935;
}
[data-theme='oct'] {
background-color: #ce93d8;
}
[data-theme='oct'] .row.head { color: #8e24aa;
}
[data-theme='oct'] .header .text,
[data-theme='oct'] .table .row .cell.active span { background-color: #8e24aa;
}
[data-theme='nov'] {
background-color: #bcaaa4;
}
[data-theme='nov'] .row.head { color: #6d4c41;
}
[data-theme='nov'] .header .text,
[data-theme='nov'] .table .row .cell.active span { background-color: #6d4c41;
}
[data-theme='dec'] {
background-color: #b0bec5;
}
[data-theme='dec'] .row.head { color: #546e7a;
}
[data-theme='dec'] .header .text,
[data-theme='dec'] .table .row .cell.active span { background-color: #546e7a;
}
var Calendar = function (t) {
(this.divId = t.RenderID ? t.RenderID : '[data-render="calendar"]'), (this.DaysOfWeek = t.DaysOfWeek ? t.DaysOfWeek : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']),
(this.Months = t.Months ? t.Months : ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']);
var e = new Date();
(this.CurrentMonth = e.getMonth()), (this.CurrentYear = e.getFullYear());
var r = t.Format;
this.f = 'string' == typeof r ? r.charAt(0).toUpperCase() : 'M';
};
(Calendar.prototype.nextMonth = function () {
11 == this.CurrentMonth ? ((this.CurrentMonth = 0), (this.CurrentYear = this.CurrentYear + 1)) : (this.CurrentMonth = this.CurrentMonth + 1),
(this.divId = '[data-active="false"] .render'), this.showCurrent();
}),
(Calendar.prototype.prevMonth = function () {
0 == this.CurrentMonth ? ((this.CurrentMonth = 11), (this.CurrentYear = this.CurrentYear - 1)) : (this.CurrentMonth = this.CurrentMonth - 1),
(this.divId = '[data-active="false"] .render'), this.showCurrent();
}),
(Calendar.prototype.previousYear = function () {
(this.CurrentYear = this.CurrentYear - 1), this.showCurrent();
}),
(Calendar.prototype.nextYear = function () {
(this.CurrentYear = this.CurrentYear + 1), this.showCurrent();
}),
(Calendar.prototype.showCurrent = function () {
this.Calendar(this.CurrentYear, this.CurrentMonth);
}),
(Calendar.prototype.checkActive = function () { 1 ==
document.querySelector('.months').getAttribute('class').includes('active') ? document.querySelector('.months').setAttribute('class', 'months') :
document.querySelector('.months').setAttribute('class', 'months active'), 'true' == document.querySelector('.month-a').getAttribute('data- active')
? (document.querySelector('.month-a').setAttribute('data-active',
!1), document.querySelector('.month-b').setAttribute('data-active', !0)) : (document.querySelector('.month-a').setAttribute('data-active',
!0), document.querySelector('.month-b').setAttribute('data-active', !1)), setTimeout(function () {
document.querySelector('.calendar .header').setAttribute('class', 'header active');
}, 200),
document.querySelector('body').setAttribute('data-theme', this.Months[document.querySelector('[data-active="true"]
.render').getAttribute('data-month')].toLowerCase());
}),
(Calendar.prototype.Calendar = function (t, e) {
'number' == typeof t && (this.CurrentYear = t), 'number' == typeof t &&
(this.CurrentMonth = e);
var r = new Date().getDate(), n = new Date().getMonth(), a = new Date().getFullYear(), o = new Date(t, e, 1).getDay(), i = new Date(t, e + 1, 0).getDate(),
u = 0 == e ? new Date(t - 1, 11, 0).getDate() : new Date(t, e, 0).getDate(),
s = '<span>' + this.Months[e] + ' ' + t + '</span>', d = '<div class="table">';
d += '<div class="row head">';
for (var c = 0; c < 7; c++) d += '<div class="cell">' + this.DaysOfWeek[c] + '</div>';
d += '</div>';
for (var h, l = (dm = 'M' == this.f ? 1 : 0 == o ? -5 : 2), v = ((c = 0), 0); v < 6; v++) {
d += '<div class="row">';
for (var m = 0; m < 7; m++) {
if ((h = c + dm - o) < 1) d += '<div class="cell disable">' + (u - o + l++) + '</div>';
else if (h > i) d += '<div class="cell disable">' + l++ + '</div>';
else {
(d += '<div class="cell' + (r == h && this.CurrentMonth == n &&
this.CurrentYear == a ? ' active' : '') + '"><span>' + h + '</span></div>'), (l = 1);
}
c % 7 == 6 && h >= i && (v = 10), c++;
}
d += '</div>';
}
(d += '</div>'),
(document.querySelector('[data-render="month-year"]').innerHTML = s), (document.querySelector(this.divId).innerHTML = d),
document.querySelector(this.divId).setAttribute('data-date', this.Months[e] + ' - ' + t),
document.querySelector(this.divId).setAttribute('data-month', e);
}),
(window.onload = function () { var t = new Calendar({
RenderID: '.render-a', Format: 'M',
});
t.showCurrent(), t.checkActive();
var e = document.querySelectorAll('.header [data-action]');
for (i = 0; i < e.length; i++) e[i].onclick = function () {
if ((document.querySelector('.calendar .header').setAttribute('class', 'header'), 'true' ==
document.querySelector('.months').getAttribute('data-loading'))) return document.querySelector('.calendar
.header').setAttribute('class', 'header active'), !1;
var e;
document.querySelector('.months').setAttribute('data-loading', 'true'),
this.getAttribute('data-action').includes('prev') ? (t.prevMonth(), (e = 'left')) : (t.nextMonth(), (e = 'right')),
t.checkActive(),
document.querySelector('.months').setAttribute('data-flow', e), document.querySelector('.month[data-
active="true"]').addEventListener('webkitTransitionEnd', function () { document.querySelector('.months').removeAttribute('data- loading');
}),
document.querySelector('.month[data-
active="true"]').addEventListener('transitionend', function () { document.querySelector('.months').removeAttribute('data- loading');
});
};
});
Jadwal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jadwal Pelajaran</title>
<link rel="stylesheet" href="jadwal.css">
</head>
<body>
<header style="text-align: center;">
<h2>TABEL JADWAL KULIAH</h2>
<h2>SEMESTER GANJIL TAHUN AKADEMIK 2021-2022</h2>
<h2>PROGRAM STUDI TEKNIK INFORMATIKA</h2>
<h2>KELAS A2</h2>
<br><br><br>
</header>
<table align="center" width="50%" border="10" style="background:rgb(255, 255, 255)">
<tr>
<td><center>NO</center></td>
<td><center>MATA KULIAH</center></td>
<td><center>NAMA DOSEN</center></td>
<td><center>HARI</center></td>
<td><center>JAM</center></td>
<td><center>RUANGAN</center></td>
</tr>
<tr>
<td>1</td>
<td>Grafika Komputer</td>
<td>Suliatianto, MM, M.Kom</td>
<td><center>Senin</center></td>
<td><center>08:00 - 10:30</center></td>
<td><center>356</center></td>
</tr>
<tr>
<td>2</td>
<td>Pemrograman Web</td>
<td>Avip Kurniawan, ST, M.Kom</td>
<td><center>Senin</center></td>
<td><center>13:00 - 15:30</center></td>
<td><center>245</center></td>
</tr>
<tr>
<td>3</td>
<td>Bahasa Inggris 2</td>
<td>Drs.Anwar Sihombing, M.Pd</td>
<td><center>Selasa</center></td>
<td><center>08:00 - 10:00</center></td>
<td><center>456</center></td>
</tr>
<tr>
<td>4</td>
<td>Basis Data Lanjutan</td>
<td>Ali Khumaidi, M.Kom</td>
<td><center>Selasa</center></td>
<td><center>10:00 - 12:30</center></td>
<td><center>466</center></td>
</tr>
<tr>
<td>5</td>
<td>Teori Graf dan Otomata</td>
<td>Agustina Indarwati, S.Si, M.Si</td>
<td><center>Rabu</center></td>
<td><center>08:00 - 10:30</center></td>
<td><center>367</center></td>
</tr>
<tr>
<td>6</td>
<td>Praktikum Pemrograman Web</td>
<td>Lab Komputer</td>
<td><center>Rabu</center></td>
<td><center>13:00 - 15:00</center></td>
<td><center>302</center></td>
</tr>
<tr>
<td>7</td>
<td>Komputasi Cerdas</td>
<td>Ali Khumaidi, M.Kom</td>
<td><center>Kamis</center></td>
<td><center>08:00 - 10:30</center></td>
<td><center>345</center></td>
</tr>
<tr>
<td>8</td>
<td>Statistika dan Probabilitas</td>
<td>Tri Hartati, S.Kom, M.Kom</td>
<td><center>Kamis</center></td>
<td><center>11:00 - 13:30</center></td>
<td><center>525</center></td>
</tr>
</table>
<br><br><br>
<header style="text-align: center;">
<a href="menu.html">
<img src="arrow_left_29361.png" width="50" height="50"
title="Halaman Sebelumnya"/>
</a>
</header>
</header>
</body>
</html>
