David Nasrulloh Latihan 4

Latihan 4
Tugas Mata Kuliah Pemrograman Berbasis Web
Nama : David Nasrulloh

NIM : 190441100060
Kelas : Pemrograman Berbasis Web D
Prodi : Sistem Informasi
Fakultas : Teknik
Tanggal : 22 Maret 2021
Untuk hasil run (Screenshotnya) ada di halaman terakhir setelah source code
program dibawah ini
Source Code
Menu
<!DOCTYPE html>
<html 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">
<link rel="stylesheet" href="css/david.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>David Nasruloh | 190441100060 </title>
</head>
<body>
<div class="atasan">
<header>
<h1>David Office Website</h1>
<h3>Selamat Datang di Prototype Website David Nasrulloh</h3>
</header>
<nav class="nav justify-content-center">
<a class="cek nav-link active" href="home.html">Beranda</a>
<a class="cek nav-link" href="support.html">Support</a>
<a class="cek nav-link" href="" onclick = "return confirm ('Buka APP deksto
p ?');">Open in App</a>
<a class="nav-link show2" id="btn-sidebar" href="#">Show or Close Side Ba
r</a>
</nav>
</div>
<div style="display: flex;">
<aside style="display: block;">
<ul class="sidebar">
<li><a href="index.html">Menu</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="bukutamu.html">Buku Tamu</a></li>
<li><a href="berita.html">Berita</a></li>
<li><a href="pengguna.html">Pengguna</a></li>
<li><a href="setting.html">Setting</a></li>
</ul>
<h3>Klik <span style="color: yellow;">show</span> sideBar pada navigasi d
iatas </h3>
</aside>
<main class="containerku" style="display: block;">
<h1>silahkan pilih menu dibawah ini</h1><br>
<ul class="menuku">
<li>Music</li>
<li>Film</li>
<li>Coding</li>
<li>Vektor</li>
<li>Matematika</li>
<li>Fisika</li>
</ul>
</main>
</div>
<footer>
Copyright © 2021 | David Nasrulloh | 190441100060
</footer>
<script src="js/david.js"></script>
</body>
</html>
Profile
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
</header>
r</a>
</nav>
</div>
</ul>
iatas </h3>
</aside>
<main>
<div class="scroll">
<div style="text-align: center;">
<br><br>
<img src="gambar/d.png" width="200" height="200" style="border-
radius: 50%;"/>
<h1>David Nasrulloh</h1>
<p><b>(Graphic Designer)</b></p>
<p>190441100060</p>
<p>Pemrograman Berbasis Web 4D</p>
</div>
<article style="text-align: center;">
<h2>My Dashboard</h2>
<p>
Ini adalah profil website sederhana yang saya buat, jadi isinya adalah
hanya sebatas konten belaka
</p>
</article>
<div style="max-width: 600px; margin: 3em auto">
<table width="100%" class="table table-bordered">
<thead class="table-dark">
<tr>
<th>Skill</th>
<th>Riwayat Pendidikan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>HTML (Intermediate)</li>
<li>CSS (Beginner)</li>
<li>Javascript (Beginner)</li>
<li>PHP (Beginner)</li>
<li>Python (Intermediate)</li>
<li>Java (Beginner)</li>
</ul>
</td>
<td>
<ol>
<li>Universitas Trunojoyo Madura (2019-Sekarang)</li>
<li>SMA Negeri 1 Jombang (2016-2019)</li>
<li>SMP Negeri 3 Mojoagung (2013-2016)</li>
<li>MI Ainul Ulum 02 (2007-2013)</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>

<hr>
</div>
</main>
</div>
<footer>
</footer>
</body>
</html>
Buku Tamu
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
</header>
r</a>
</nav>
</div>
</ul>
iatas </h3>
</aside>
<main>
<form action="">
<div class="gas">
<h3 style="color: white; text-align: center; font-weight: bold;">Form Bu
ku Tamu</h3>
<div class="dalam">
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="nama">Nama Lengka
p</label>
<div class="col-sm-10">
<input style="text-align: center;" placeholder="Tulis nama lengk
ap anda disini" class="form-control-plaintext" id="nama" type="text"><br>
</div>
</div>

<label class="col-sm-2 col-form-label" for="email">Email</label>
<input style="text-align: center;" placeholder="Tulis email anda
disini" class="form-control-plaintext" id="email" type="email"><br>
</div>
</div>

<label class="col-sm-2 col-form-label" for="jk">Jenis Kelami
n</label>
<select style="color: blue;" name="tgl" id="tgl" style="width: 18
2px;">
<option value="laki-laki">Laki-laki</option>
<option value="perempuan">Perempuan</option>
</select><br><br>
</div>
</div>

<label class="col-sm-2 col-form-label" for="pesan">Pesan</label>
<textarea placeholder="Tulis pesan anda disini" style="text-
align: center;" name="pesan" id="pesan" cols="23" rows="2"></textarea><br>
</div>
</div><br>
<div class="tombol">
<button class="btn btn-primary">Kirim</button>
<button class="btn btn-primary">Reset</button>
</div>
</div>
</div>
</form>
</main>
</div>
<footer>
</footer>
</body>
</html>
Beranda
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="david.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<header>
</header>
<div id="closed"></div>
r</a>
</nav>
</div>
</ul>

</aside>
<main>
<div class="isi">
<img src="gambar/d.png" alt="" class="gambarku"><br><br>
<h1>Ini adalah halaman beranda</h1>
<h2>Hai.. :) Apa kabar.? Selamat datang di website ku yang sederhana ini<
/h2>
</div>
</main>
<aside>

</aside>
</div>
<footer>
</footer>
</body>
</html>
Support
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="david.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<header>
</header>
<div id="closed"></div>
r</a>
</nav>
</div>
</ul>

</aside>
<main>
<div class="isisupp">
<img src="gambar/k.jpg" alt="" class="supp">
<img src="gambar/v.jpg" class="supp" alt="">
<h2>Supported by : hehe :)</h2>
<div class="dibagi">
<div>Kantin Koding adalah sebuah akun yang didirikan untuk memberik
an informasi2 menarik mengenai teknologi tapi sayangnya belum jalan hehe</div>
<div>Davektor adalah tempat dimana isinya adalah mengenai segala des
ain2 yang berupa vektor ataupun yang lainnya</div>
</div>
</div>
</main>
</div>
<footer>
</footer>
</body>
</html>
Source code JS
David.js
const tombolSidebar = document.querySelector("#btn-sidebar");
const sidebar = document.querySelector(".sidebar");
tombolSidebar.addEventListener("click", () => {
sidebar.classList.toggle("sidebar-open");
});
Source code CSS

David.css
.atasan {
background: url(../gambar/g.jpg) center fixed;
}
header {
width: 100%;
height: 150px;
/* background-color: navy; */
/* display: flex; */
text-align: center;
padding: 20px;
/* justify-content: center; */
/* margin: 20px; */
/* position: fixed; */
}
header h1,
h3 {
color: white;
}
aside h3 {
color: white;
padding: 100px;
text-align: center;
}
nav {
background-color: cornflowerblue;
/* opacity: 0.2; */
}
nav a {
color: white;
}
.cek {
border-right: 1px solid white;
}
nav a:hover {
background: #ddd;
color: black;
}
aside {
width: 25%;
/* height: 420px; */
display: flex;
justify-content: center;
align-items: center;
}
aside a {
color: white;
text-decoration: none;
}
main {
width: 75%;
height: 385px;
background: white;
/* justify-content: center;
align-items: center; */
}
.scroll {
height: 385px;
width: 100%;
overflow: scroll;
}
footer {
background: black;
color: white;
width: 100%;
height: 60px;
display: flex;
font-size: 16px;
}
.sidebar {
height: 385px;
width: 300px;
padding: 10px;
list-style: none;
background: cornflowerblue;
/* background-color: #3097af; */
position: absolute;
left: -300px;
transition: 0.5s;
}
.sidebar-open {
left: 0;
}
.sidebar li a {
display: block;
padding: 15px;
margin-left: 20px;
/* margin-right: 30px; */
color: white;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid white;
transition: background-color 0.5s;
}
.sidebar li a:hover {
background-color: #ddd;
color: black;
}
.containerku {
padding: 20px;
text-align: center;
background: honeydew;
/* opacity: 0.3; */
}
.menuku li:hover {
background: blanchedalmond;
color: blue;
border: 2px blue solid;
padding: 0;
margin: 0;
}
.menuku li {
list-style: none;
display: inline-block;
/* display: grid; */
margin: 10px;
height: 100px;
color: white;
/* text-align: center; */
width: 200px;
border-radius: 40px;
padding: 35px;
font-size: 20px;
font-weight: bold;
background: violet;
}
.gas {
padding: 20px;
/* margin: 20px; */
/* text-align: center; */
background: lightgreen;
height: 385px;
overflow: scroll;
}
.gas table {
text-align: left;
padding: 20px;
margin: 20px;
}
.gas input,
textarea,
select {
width: 90%;
height: 40px;
padding: 5px 0;
border: none;
background-color: white;
font-size: 18px;
color: black;
}
.dalam {
margin: 20px;
padding-left: 50px;
}
.tombol {
text-align: center;
}
.dalam label {
font-weight: bold;
}
.show2 {
font-weight: bold;
color: yellow;
background: black;
}
Home.css
.atasan {
background: url(../gambar/g.jpg) center fixed;
}
header {
width: 100%;
height: 150px;
/* background-color: navy; */
text-align: center;
padding: 20px;
/* justify-content: center; */
/* margin: 20px; */
/* position: fixed; */
}
header h1,
h3 {
color: white;
}
aside h3 {
color: white;
padding: 100px;
text-align: center;
}
nav {
/* opacity: 0.2; */
}
nav a {
color: white;
}
.cek {
border-right: 1px solid white;
}
nav a:hover {
background: #ddd;
color: black;
}
aside {
width: 25%;
/* background-color: cornflowerblue; */
/* height: 420px; */
display: flex;
}
aside a {
color: white;
}
main {
width: 50%;
height: 385px;
background: white;
display: flex;
}
footer {
background: black;
color: white;
width: 100%;
height: 60px;
display: flex;
font-size: 16px;
}
.sidebar {
height: 385px;
width: 300px;
padding: 10px;
list-style: none;
background: cornflowerblue;
/* background-color: #3097af; */
position: absolute;
left: -300px;
transition: 0.5s;
}
.sidebar-open {
left: 0;
}
.sidebar li a {
display: block;
padding: 15px;
margin-left: 20px;
margin-right: 30px;
color: white;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid white;
transition: background-color 0.5s;
}
.sidebar li a:hover {
background-color: #ddd;
color: black;
}
.isi {
display: block;
text-align: center;
}
.gambarku {
/* padding: 10px; */
width: 100px;
height: 100px;
}
.supp {
width: 100px;
height: 100px;
margin: 20px;
.isisupp {
display: block;
text-align: center;
}
main h3 {
color: black;
}
.dibagi div {
display: inline-block;
background: grey;
color: white;
margin-top: 10px;
font-weight: bold;
padding: 15px;
text-align: center;
}
.show2 {
font-weight: bold;
color: yellow;
background: black;
}
Hasil
Menu :
Profile :
Buku Tamu :
Beranda :
Support :
Open in app (hanya notifikasi) :

David Nasrulloh Latihan 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

David Nasrulloh Latihan 4

Uploaded by

Copyright:

Available Formats

Latihan 4

Tugas Mata Kuliah Pemrograman Berbasis Web

Nama : David Nasrulloh

Source code CSS

You might also like