Tugas Pertemuan 1

1. buat sebuah file dengan nama login.
htm dan tulislah script berikut ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-
alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j
6gD" crossorigin="anonymous">
<style>
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
}
.form-signin {
width: 100%;
max-width: 620px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<form class="form-signin">
<h4>Login Form</h4>
<hr>
<div class="alert alert-primary" role="alert"> Silahkan masukan email dan
password untuk login </div>
<div class="mb-3"><label for="exampleInputEmail1" class="form-
label">Email address</label><input type="email" class="form-control"
id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with
anyone else.</div>
</div>
<div class="mb-3"><label for="exampleInputPassword1" class="form-
label">Password</label><input type="password" class="form-control"
id="exampleInputPassword1"></div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input"
id="exampleCheck1"><label class="form-check-label"
for="exampleCheck1">Ingat Saya</label></div>
<button type="submit" class="btn btn-primary">Masuk
Sistem</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-
alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTk
F7CXvN" crossorigin="anonymous"></script>
</body>
</html>
Hasilnya akan menjadi seperti ini :
2. modifikasi script index.html yang kita praktekan pada pertemuan ke 1

menjadi seperti ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-
alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j
6gD" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<a class="nav-link" href="#">Data Mahasiswa</a>
</li>
<a class="nav-link" href="#">Data Jurusan</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success"
type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container" style="margin-top: 50px;">

<h4>Data Mahasiswa</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>NIM</th>
<th>Nama</th>
<th>Email</th>
<th>Nomor HP</th>
<th>Jurusan</th>
<th width="200">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>TI102133</td>
<td>nuris akbar</td>
<td>nuris.akbar@gmail.com</td>
<td>089699935552</td>
<td>Teknik Informatika</td>
<td>
<a href="#" class="btn btn-danger">Edit</a>
<a href="#" class="btn btn-warning">Delete</a>
</td>
</tr>
<tr>
<th>2</th>
<td>TI102133</td>
<td>Agus Rahmanto</td>
<td>agus22r@gmail.com</td>
<td>08531021043</td>
<td>
</td>
</tr>
<tr>
<th>3</th>
<td>TI102135</td>
<td>Rini Purwaningsih</td>
<td>rpurwaningsih@gmail.com</td>
<td>081209123430</td>
<td>
</td>
</tr>
</tbody>
</table>
<hr>
<h4>Input Data Mahasiswa</h4>
<table class="table table-borderd">
<tr>
<td>NIM</td>
<td><input type="text" placeholder="NIM" class="form-
control"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" placeholder="Nama Lengkap" class="form-
control"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" placeholder="email" class="form-
control"></td>
</tr>
<tr>
<td>Nomor HP</td>
<td><input type="text" placeholder="Nomor HP" class="form-
control"></td>
</tr>
<tr>
<td>Jurusan</td>
<td><select class="form-control">
<option>Teknik Informatika</option>
<option>Teknik Mesin</option>
</select></td>
</tr>
<tr>
<td></td>
<td>
<button type="submit" class="btn btn-success">Simpan
Data</button>
<a href="" class="btn btn-primary">Kembali</a>
</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-
alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTk
F7CXvN" crossorigin="anonymous"></script>
</body>
</html>
Nanti hasil akhirnya akan menjadi seperi ini :
silahkan rekam proses pembuatan tugas akhir dengan aplikasi screen

recorder seperti camtasia studio atau aplikasi lain nya.
setelah itu upload video rekaman anda ke youtube dan kirim linknya sebagai
bukti praktek dan kelengkapan absensi.
batas akhir pengumpulan adalah sebelum pertemuan ke 2.
Terima kasih

Tugas Pertemuan 1

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

Tugas Pertemuan 1

Diunggah oleh

Hak Cipta:

Format Tersedia

1. buat sebuah file dengan nama login.

htm dan tulislah script berikut ini :

Hasilnya akan menjadi seperti ini :

2. modifikasi script index.html yang kita praktekan pada pertemuan ke 1

<div class="container" style="margin-top: 50px;">

silahkan rekam proses pembuatan tugas akhir dengan aplikasi screen

batas akhir pengumpulan adalah sebelum pertemuan ke 2.

Anda mungkin juga menyukai