Rabu, 06 Juni 2018

WEB DESIGN PERTEMUAN 13-14 Membuat Login dan Home,Form Pendaftaran,FormTabel Harga

Published : 17.30 Author :
WEB DESIGN PERTEMUAN 13-14 Membuat Login dan Home,Form Pendaftaran,Form Tabel Harga

1. Membuat index dengan login

Berikut Code nya :

<html>
    <script>
        function Login(){

        
        var username=document.login.username.value;
        username=username.toLowerCase();

        var password=document.login.password.value;
        password=password.toLowerCase();
        
            if (username=="admin" && password=="admin"){
            alert("Selamat anda berhasil login");
window.location.href="home.html";
            }
            else{
            alert("User name dan password anda salah!");
            }
        }
        
        </script>
        
<body style="background-color:#00253d;color:white;">
        <form name="login" >
            <table width="225" cellpadding="4" align="center">
<tr height="300px"> </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>
</body>

</html>

2. membuat Home


Berikut Codenya : 


<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.js"></script>
<title> Form Pendaftaran Mahasiswa </title>
<script>
function hitung(){
var myForm = document.konten;
var x=document.getElementById("tahun").value
var y=document.getElementById("bulan").value
var z = 2018 - x;
document.getElementById("umur").value = z;
}
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 class="active"><a href="home.html">Home</a></li>
 <li><a href="pendaftaran.html">Pendaftaran</a></li>
 <li><a href="tabelharga.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">
<label> Selamat datang  silahkan memilih menu  ini :</label>
<form action="pendaftaran.html">
<button class="btn btn-success">Pendafaran</button>
</form>
<form action="tabelharga.html">
<button class="btn btn-info">Daftar Harga</button>
</form>
</div>
</div>
</body>
</html>
3. Membuat Form pendaftaran

Berikut Codenya : 

<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.js"></script>
<title> Form Pendaftaran Mahasiswa </title>
<script>
function hitung(){
var x=document.getElementById("tahun").value
var y=document.getElementById("bulan").value
var z = 2018 - x;
document.getElementById("umur").value = z;
}
function AngkaSaja(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;
return true;
}

function resetForm(){
document.konten.reset();
}
</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="tabelharga.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-6">
<form name="konten">
<h1> Pendaftaran Mahasiswa Baru </h1>
<table class="table" >
<tr>
<td>Nama </td>
<td colspan="3"> <input type="text" placeholder="nama lengkap" id="nama" class="form-control"> </td>
</tr>
<tr>
<td>Tempat Lahir </td>
<td colspan="3"> <input type="text" placeholder="tempat lahir" id="tl" class="form-control">
</tr>
<tr>
<td>Tanggal Lahir </td>
<td>
<select id="tanggal" class="form-control" > <option>-Tanggal-</option>
<script>
var i = 1;
while(i<=31){
document.write("<option>" + i + "</option>");
i=i+1;
}
</script>
</select>
</td>
<td>
<select id="bulan" class="form-control"> <option>-Bulan-</option>
<script>
var bulan = ["Januari", "Februari", "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" class="form-control" onchange="hitung()"> <option>-Tahun-</option>
<script>
var tahun = 1945;
for(i=2018;i>=tahun;i--){
document.write("<option value="+i+">" + i + "</option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>Umur </td>
<td colspan="3"><input type="text" id="umur"  class="form-control" disabled>  </td>
</tr>
<tr>
<td>Konsentrasi </td>
<td colspan="3">
<select id="bulan" class="form-control" > <option>-Konsentrasi-</option>
<script>
var kons = ["Teknik Informatika", "Administrasi Bisnis", "Administrasi Perkantoran", "Komputerisasi Akuntansi", "Hubungan Masyarakat"];
for(i=0;i<=4;i++){
document.write("<option>" + kons[i] + "</option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>No Telepon </td>
<td colspan="3"><input type="text" id="telp" value="" maxlength="13" onkeypress="return AngkaSaja(event)" class="form-control">  </td>
</tr>
</table>
<br>
<button class="btn btn-danger" onClick="tampilkan()">Clear</button>
</form>
</div>
<div class="col-md-6">
</div>
</div>
</body>
</html>

4. Membuat Form Tabel Harga 

Berikut Codenya :

<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.js"></script>
<title> Form Pendaftaran Mahasiswa </title>
<script>
function hitung(){
var myForm = document.konten;
var x=document.getElementById("tahun").value
var y=document.getElementById("bulan").value
var z = 2018 - x;
document.getElementById("umur").value = z;
}
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><a href="pendaftaran.html">Pendaftaran</a></li>
 <li class="active"><a href="tabelharga.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", "Administrasi Bisnis", "Administrasi Perkantoran", "Komputerisasi Akuntansi", "Hubungan Masyarakat"];
var bs14 = [8500000, 7500000, 7350000, 8000000, 8250000];
var bs56 = [7500000,6500000, 6350000, 7000000, 7250000];
for(i=0;i<=4;){
var hasil = (bs14[i] * 4) + (bs56[i] * 2);
document.write("<tr><td>" + kons[i] + "</td><td> Rp." + bs14[i] + "</td><td> Rp." + bs56[i] + "</td><td> Rp." +hasil+"</td></tr>");
i++;
}
</script>
</table>
</div>
</div>
</body>
</html>




Read More ->>
| 0 komentar

Pertemuan 12 membuat Login dan Index

Published : 17.18 Author :



Pertemuan 12 membuat Login dan Index





Berikut Code yang harus anda isi pada notepad++ agar bisa menampilkan seperti gambar yang di atas

Code Untuk Login :
<!DOCTYPE html>
<html>
<head>
<script>
function Login(){
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="imam" && password=="ganteng"){
alert ("BERHASIL LOGIN GUYS");
window.location.href-"index.html";
}else {
alert ("Maaf Anda Jelek")
}
}
</script>
</head>
<body style="background-color:#00253d;color:grey;">
<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>

Code Untuk Index :
<!DOCTYPE html>
<html>
<head>
<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;
}
</script>
</head>
<body>
<form name="header">
<ul>
<li> <a href="#">Home </a></li>
<li> <a href="#">Regist </a></li>
</ul>
</form>
<hr>
<form name="konten">
<div>
<h1> Form Pendaftaran Mahasiswa </h1>
<table>
<tr>
<td>Nama</td>
<td> <input type="text" placeholder="Nama Lengkap" name="nama"> </td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td> <input type="text" placeholder="Tempat Lahir" name="tl"> </td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td> 
<select id="tanggal"> <option> --Tanggal-- </option>
<script>
var tgl = 1;
while (tgl <= 31) { 
document.write("<option>" + tgl + "</option>");
tgl=tgl+1;
}
</script>
</select>
<select id="bulan"> <option> --Bulan-- </option>
<script>
var bulan = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
for(i=0;i<=11;i++){
document.write("<option>" + bulan[i] + "</option>");
}
</script>
</select>
<select id="tahun" onchange="hitungumur()"> <option> --Tahun-- </option>
<script>
var tahun = 1945;
for(i=2018;i>=tahun;i--){
document.write("<option>" + i + "</option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>Umur</td>
<td> <input type="text" id="umur"> </td>
</tr>
</table>
</div>
</form>
</body>
</html>


Read More ->>
| 0 komentar

Pertemuan 9 WEB design Membuat Tampilan Index menggunakan Css

Published : 17.11 Author :
Pertemuan 9 WEB design Membuat Tampilan Index menggunakan Css


Berikut Code yang harus di isi pada notepad++ agar bisa menampilkan gambar di atas:
<!DOCTYPE html>
<html lang="id"><!menggunakan bahasa Indonesia>
<head>
<meta charset="utf-8" />
<title>PLJ</title>
<script>
var txt="Politeknik LP3I Jakarta ";
var kecepatan=100;
var segarkan=null;
function bergerak() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak ()",kecepatan);}bergerak();
</script>

<link href="style.css" style type="text/css" rel="stylesheet">
</head>

<body>
<div class="wrapper">      
<header>
</header>

<nav>
<ul>
<li><a href="" class="current">Beranda</a></li>
<li><a href="">Visi & Misi</a></li>
<li><a href="">Program Studi</a></li>
<li><a href="">Konsentrasi</a></li>
<li><a href="">Kontak</a></li>
</ul>
</nav>

<section class="courses">
<h2></h2>
<article>
<video controls>
<source src="testimoni.mp4" type="video/mp4">
</video>
<figure>
<img src="gedung.JPG" width="290" alt="foto" />
<figcaption>Gedung PLJ Kampus Bekasi</figcaption>
</figure>

<h2>Politeknik LP3I Jakarta</h2>
<h3>Kampus Bekasi </h3>

<p>Alamat : Jl. Jendral Sudirman A1-A2 Grandmall Bekasi</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Kampus Lainnya :</h2>
<a href="">PLJ Kampus Kramat</a>
<a href="">PLJ Kampus Jakarta Utara</a>
<a href="">PLJ Kampus Sudirman</a>
<a href="">PLJ Kampus Cikarang</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Telp. (021) 88954722/23<br>
Email. bekasi@plj.ac.id
</section>
</aside>
<footer>
&copy; 2018 Politeknik LP3I Jakarta Kampus Bekasi
</footer>
</div>
</body>
</html>
Read More ->>
| 0 komentar

Pertemuan 11 Membuat Login Pada Web Design

Published : 17.06 Author :
Membuat Login Pada Web Design


Berikut Code Yang harus di isi untuk bisa mencoba login
<!DOCTYPE html>
<html>
<head>
<script>
function Login(){
var username=document.login.username.value;
username=username.toLowerCase();

var password=document.login.password.value;
password=password.toLowerCase();
if (username=="imam" && password=="ganteng"){
alert ("BERHASIL LOGIN GUYS");
window.location.href-"index.html";
}else {
alert ("Maaf Anda Jelek")
}
}
</script>
</head>

<body style="background-color:#00253d;color:grey;">
<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>
Read More ->>
| 0 komentar

Jumat, 01 Juni 2018

Published : 10.18 Author :
WEB DESIGN PERTEMUAN 6 PENGENALAN CSS












<html>
<head>
<title> Pertemuan 6 </title>
<!-- Bagian CSS-->
<link href="style.css" style type="text/css" rel="stylesheet">
</head>

<body>
<h1 class="judul"> Pengenalan CSS </h1>

<table class="nav1" align="center">
<tr>
<td>
<a href="#"> Home </a>
</td>
<td>
<a href="#"> Galery </a>
</td>
</tr>
</table>
<br>

<div class="box1">
<h1> PENGENALAN CSS </h1>
<pre>
Ini adalah contoh
halaman menggunakan                                           CSS
</pre>
</div>
<br>
<div class="box2" align="center">
<table class="table1">
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
</tr>
<tr>
<td> Row 2</td>
<td> Row 2</td>
</tr>
<tr>
<td> Row 3</td>
<td> Row 3</td>
</tr>
</table>
</div>
<br>
<div class="box2">
<img class="img1" src="gambar1.jpg"> &nbsp <img class="img2" src="gambar1.jpg">
</div>
</body>
</html>





Read More ->>
| 0 komentar
Published : 10.07 Author :
WEB DESIGN PERTEMUAN 5 BIODATA


1. Index
<html>
<head>
<title> Pertemuan 5</title>
</head>
<body background="DESAIN LAB Aaa.jpg">
<form name="biodata" method="post">
<div>
<h1 align="center"> BIODATA MAHASISWA </h1>
<p>
<label>NIM : </label><br>
<input type="text" name="nim" disabled><!--Membuat input text -->
</p>
<p>
<label>Nama Mahasiswa : </label> <br>
<input type="text" name="nama" placeholder="Masukan nama">
</p>
<p>
<label>Password : </label> <br>
<input type="password" name="password maxlength="14">
<!--Membuat inputan password-->
</p>
<p>
<label>Jenis Kelamin : </label><br>
<input type="radio" name="jk" value="laki-laki" checked> Laki-Laki
<input type="radio" name="jk" value="Perempuan"> Perempuan
<!--Membuat pilihan radio button-->
</p>
<p>
<label>Tempat / Tanggal Lahir </label><br>
<input type="text" name="tempat">
<input type="date" name="tanggal" min="1990-01-02" max="2000-01-02">
<!--Membuat inputan tanggal-->
</p>
<p>
<label>UKM</label><br>
<input type="checkbox" name="LCC" value="LCC"checked> LCC
<input type="checkbox" name="LAC" value="LAC"> LAC
<input type="checkbox" name="SEAL" value="SEAL"> SEAL
<input type="checkbox" name="RE" value="RE"> RE
</p>
<p>
<label> Konsenstrasi </label><br>
<select name="konsentrasi">
<option value="AB"> AB </option>
<option value="AB"> AP </option>
<option value="AB"> TI </option>
<option value="AB"> HM </option>
<option value="AB"> KA </option>
</select>
</p>
<p>
<label>Alamat : </label><br>
<textarea name="alamat" cols="50" rows="5"></textarea>
</p>
<p>
<input type="submit" value="hapus" name="tombol">
</p>
</div>
</form>
</body>
</html>
Read More ->>
| 0 komentar

WEB DESIGN PERTEMUAN 1

Published : 09.36 Author :
WEB DESIGN PERTEMUAN 1


<html>
<head>
<meta name="Author" contents="LP3I">
<link rel="shortcut icon" href="logo.png">
<title> Web Design Pertemuan 1 </title>
</head>
<body bgcolor="#f0befd">

<font face="Calibri" color="Blue" align="center">
<h1>Web Design</h1>
</font>
<h3>Pengertian HTML</h3>
<p>
<img border="0" height="300" width="300" src="html.png" align="right" usemap="#Map" >
<map name="Map">
<area shape="rect"
coords="50,50,100,100"
href="hello.html"
alt="Link gambar">
HTML (<font color="Red"><i><a href="hello.html">Hypertext Markup Language </a></i></font>) merupakan standart bahasa yang digunakan untuk
menampilkan document web.
<br>
yang bisa dilakukan dengan HTML antaralain :
<ol type="square">
<li>Mengontrol tampilan dari Web page dan contentnya.</li>
<li>Mempublikasikan document secara online sehingga dapat diakses secara global.</li>
<li>Membuat online form yang dapat di gunakan untuk transaksi secara online. </li>
</ol>
Bahasa HTML dapat dijalankan disemua Web Browser antaralain :
<ul>
<li>Internet Explorer</li>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
<a href="mailto:susanto.septiawan@gmail.com"> Kirim Feedback </a>
</p>
</body>
</html>
Read More ->>
| 0 komentar
Langganan: Postingan (Atom)