Tgs15 ADPL Hilman Fauzi (05202140040) Informatika R1

Analisis dan desain perangkat lunak
Nama:Hilman Fauzi
NPM :05202140040
Prodi :Informatika R1
Soal:
Secara fisik antarmuka pemakai yang dirancang adalah tampilan layar (form,
halaman web). Jenisnya
dapat berupa:
 Menu pilihan
 Form isian (entry)
 Penyajian informasi (report, query)
 Kotak dialog, jika diperlukan
 Fasilitas bantuan (Help), jika diperlukan
Buatlah 5 contoh jenis lainnya
Jawaban:
1. Menu Pilihan
Input:
<!DOCTYPE html>
<html>
<head>
<title>Menu Pilihan</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #000;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Menu:</h1>
<ul id="menu">
<li><a href="#">Tentang kami </a></li>
<li><a href="#">Portofolio/Proyek</a></li>
<li><a href="#">Layanan/Kompetensi</a></li>
<li><a href="#">Portofolio/Proyek</a></li>
<li><a href="#">Kebijakan Privasi</a></li>
<li><a href="#">Exit</a></li>
</ul>
<script>
var menuItems = document.querySelectorAll('#menu li');
menuItems.forEach(function(item) {
item.addEventListener('click', function() {
var text = this.innerText;
alert('Anda memilih ' + text);
// Tambahkan logika dan tindakan yang sesuai untuk setiap pilihan di sini
});
});
</script>
</body>
</html>
Output:
2. Form isian(entry)
Input:
<!DOCTYPE html>
<html>
<head>
<title>Form Isian dengan Menu Pilihan</title>
<style>
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 200px;
padding: 5px;
}
input[type="submit"] {
margin-top: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #333;
}
a:hover {
color: #000;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Form Isian dengan Menu Pilihan</h1>
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<label for="menu">Menu:</label>
<select id="menu" name="menu">
<option value="pilihan1">Pilihan 1</option>
</select>
<input type="submit" value="Kirim">
</form>
<script>
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var nama = document.getElementById('nama').value;
var email = document.getElementById('email').value;
var menu = document.getElementById('menu').value;
alert('Nama: ' + nama + '\nEmail: ' + email + '\nMenu: ' + menu);
// Tambahkan logika dan tindakan yang sesuai untuk setiap pilihan di sini
// Bersihkan form
this.reset();
});
</script>
</body>
</html>
Output:
3.Penyajian informasi (report, query)
Input:
<!DOCTYPE html>
<html>
<head>
<title>Penyajian Informasi</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>Penyajian Informasi</h1>
<table>
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Malik</td>
<td>malik20@gmail.com</td>
<td>25</td>
</tr>
<tr>
<td>Fauzi</td>
<td>zifau@gmail.com</td>
<td>30</td>
</tr>
<tr>
<td>Ismail</td>
<td>mail@gmail.com</td>
<td>35</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
4. Kotak Dialog
Input:
<!DOCTYPE html>
<html>
<head>
<title>Kotak Dialog</title>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Kotak Dialog</h1>
<button onclick="openModal()">Buka Kotak Dialog</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h2>Konten Kotak Dialog</h2>
<p>Ini adalah konten dalam kotak dialog.</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
function openModal() {
modal.style.display = "block";
}
function closeModal() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
closeModal();
}
}
</script>
</body>
</html>
Output:
5. Fasilitas Bantuan
Input:
<!DOCTYPE html>
<html>
<head>
<title>Fasilitas Bantuan (Help)</title>
<style>
.help-icon {
display: inline-block;
width: 20px;
height: 20px;
background-color: #ddd;
color: #333;
text-align: center;
line-height: 20px;
border-radius: 50%;
cursor: pointer;
}
.help-content {
display: none;
margin-top: 10px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>Fasilitas Bantuan (Help)</h1>
<p>Jika Anda membutuhkan bantuan, klik ikon bantuan di sebelah kanan:</p>
<div class="help-icon" onclick="toggleHelp()">?</div>
<div id="helpContent" class="help-content">
<h2>Pertanyaan Umum</h2>
<p>Ini adalah konten bantuan yang menjawab pertanyaan umum dari pengguna.</p>
</div>
<script>
function toggleHelp() {
var helpContent = document.getElementById('helpContent');
if (helpContent.style.display === 'none') {
helpContent.style.display = 'block';
} else {
helpContent.style.display = 'none';
}
}
</script>
</body>
</html>
Output:

Tgs15 ADPL Hilman Fauzi (05202140040) Informatika R1

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Tgs15 ADPL Hilman Fauzi (05202140040) Informatika R1

Diunggah oleh

Hak Cipta:

Format Tersedia

Analisis dan desain perangkat lunak

Anda mungkin juga menyukai