Membuat Form Pendaftaran Mahasiswa dengan HTML menggunakan Bootstrap, CSS, dan JavaScript
Oke di sini ane mau share nih tutorialnya , pertama kita butuh file
bootsrap, css, sama javascriptnya gan, tulis di kolom komentar kalau
agan agan kepingin ya, oh iya jangan lupa buka file xamp di data C buat
mengaktifkan bootsrap sama js nya gan,
Di Sini kita butuh 4 file HTML gan,
1. Index (File Running)
2. Home (Tampilan Depannye)
3. Pendaftaran (untuk bagian isi pendaftarannya)
4. Harga (tabel biaya pendaftarannya)
1. Index
<!DOCTYPE html>
<html>
<head>
<script>
function Login()
{
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
username=username.toLowerCase(); //tulisan bisa capslock bisa tidak
if (username=="admin" && password=="admin")
{
alert ("Selamat anda berhasil login")
window.location.href="pendaftaran.html";
}
else
{
alert ("Username atau Password salah")
}
}
</script>
</head>
<body style="background-color:#00253d;color:white;">
<form name="login">
<table width="255" cellpadding="4" align="center">
<tr height="300"> </tr>
<tr> <td> username </td>
<td> <input type="text" name="username"> </td> </tr>
<tr> <td> password </td>
<td> <input type="password" name="password"> </td> </tr>
<tr> <td colspan="2" align="right">
<input type="button" value="Login" onClick="Login()"> </td> </tr>
</table>
</form>
</body>
</html>
2. Home
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<h1>Slamat datang di LP3i</h1>
<br>
<form action="pendaftaran.html">
<button class="btn btn-warning" onclick=""> Pendaftaran </button>
</form>
<form action="harga.html">
<button class="btn btn-warning" onclick=""> Daftar Harga</button>
</form>
</body>
</html>
3. Pendaftaran
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
<script>
function hitungumur() {
var myForm = document.konten;
var x = document.getElementById("tahun").value
var y = 2018 - x;
document.getElementById("umur").value = y;
}
function angkasaja(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<hr>
<div class="col-md-6">
<form name="konten">
<div>
<h1> Form Pendaftaran Mahasiswa </h1>
<table class="table">
<tr>
<td> NAMA </td>
<td colspan="3"> <input type="text" class="form-control" placeholder="Nama Lengkap" name="nama"> </td>
</tr>
<tr>
<td> TEMPAT LAHIR </td>
<td colspan="3"> <input type="text" class="form-control" placeholder="Tempat Lahir" name="tempat"> </td>
</tr>
<tr>
<td> TGL LAHIR </td>
<td> <select id="tanggal" class="form-control"> <option> --Tanggal-- </option>
<script>
var tgl = 1;
while (tgl <= 31) { document.write("<option>" + tgl + "</option>");
tgl=tgl+1;
}
</script>
</select>
</td>
<td>
<select id="bulan" class="form-control"> <option> --Bulan-- </option>
<script>
var bulan=["Januari","Febuari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
for(i=0;i<=11;i++) {
document.write("<option>" + bulan[i] + "</option>");
}
</script>
</select>
</td>
<td>
<select id="tahun" onchange="hitungumur()" class="form-control"> <option> --Tahun-- </option>
<script>
var tahun=1945;
while(tahun<=2018) { document.write("<option>" + tahun + "</option>");
tahun=tahun+1;
}
</script>
</select>
</td>
</tr>
<tr>
<td> UMUR </td>
<td colspan="3"> <input type="text" id="umur" class="form-control">
</td>
</tr>
<tr>
<td> KONSENTRASI </td>
<td colspan="3"> <select id="kons" class="form-control"> <option> --Konsentrasi-- </option>
<script>
var kons = ["Teknik Informatika","Komputerisasi akuntansi","Hubungan Masyarakat",
"Bisnis Administrasi","Administrasi Perkantoran"];
for (i=0;i<= 4;i++) {
document.write("<option>" + kons[i] + "</option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>No Telpon</td>
<td colspan="3"> <input type="text" class="from-control"
placeholder="no telp" name="ntelp" onkeypress="return angkasaja(event)" maxlength="13"> </td>
</tr>
</table>
<br>
<button class="btn btn-danger" onclick=""> clear </button>
</div>
</form>
</div>
</body>
</html>
4. Harga
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<div class="col-md-12">
<h1> Tabel Harga </h1>
<table class="table table-hover">
<th> Konsentrasi </th>
<th> Biaya /Semester (1-4)</th>
<th> Biaya /Semester (5-6)</th>
<th> Total Biaya</th>
<script>
var kons=["Teknik Informatika","Komputerisasi akuntansi","Hubungan Masyarakat",
"Bisnis Administrasi","Administrasi Perkantoran"];
var biaya1=[8500000,7500000,7350000,8000000,8250000];
var biaya2=[7500000,6500000,6350000,7000000,7250000];
for (i=0;i<= 4;) {
var hasil=[(biaya1[i]*4)+(biaya2[i]*2)];
document.write("<tr><td>" + kons[i] + "</td><td>" + biaya1[i]+ " </td><td>"
+ biaya2[i] + "</td><td>" + hasil + "</td></tr>")
i++;
}
</script>
</table>
</html>
