Untitled

<html>
<head>
	<title>Haloo....</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
	<div class="row">

		<div class="col-md-2"></div>
		<div class="col-md-8">


			<div class="panel panel-default">
			  <div class="panel-body" align="center">
			  	<h1>Lomba Aplikasi Web</h1>
			    <img src="img/presiden_jokowi.jpg" class="img-responsive img-circle" alt="Responsive image">
				<br>

				<div class="panel panel-default">
				  <div class="panel-body">
				  	<form>
					  <div class="form-group">
					    <label for="exampleInputEmail1">Username</label>
					    <input type="text" class="form-control" id="username" placeholder="Username">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputPassword1">Password</label>
					    <input type="password" class="form-control" id="password" placeholder="Password">
					  </div>
					  <button id="login" class="btn btn-default">Login</button>
					</form>
				  </div>
				</div>

				<div class="panel panel-default">
				  <div class="panel-body">
				  	<form>
				  	  <h3>Menghitung Luas Persegi</h3>
					  <div class="form-group">
					    <label for="exampleInputEmail1">Panjang</label>
					    <input type="text" class="form-control" id="panjang" placeholder="Panjang">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputPassword1">Lebar</label>
					    <input type="text" class="form-control" id="lebar" placeholder="Lebar">
					  </div>
					  <button id="hitung" class="btn btn-default">Hitung</button>
					</form>
				  </div>
				</div>


			  </div>
			</div>

		</div>
		<div class="col-md-2"></div>

	</div>


	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>

	<script type="text/javascript">

		var username_asli = "ariaseta";
		var password_asli = "aria123";

		$('#login').click(function(){

				var username = $('#username').val();
				var password = $('#password').val();

				if ((username==username_asli) && (password==password_asli)) {
					alert("Login Berhasil");
				} else {
					alert("Login Gagal");
				}

		});

		$('#hitung').click(function(){

				var satu = parseInt($('#panjang').val());
				var dua = parseInt($('#lebar').val());

				alert(satu*dua);

		});


	</script>


</body>

</html>