kali ini saya akan membagian tugas jsp dengan cuma-cuma atas dasar bahan pembeljaran bagi pembaca.
1. Buat tampilan Index.jsp dengan kodingan sebagai berikut
Tampilan Index
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="STYLESHEET" href="style.css"/>
<title>Website sederhana</title>
</head>
<body>
<br><br><br>
<div id="wrap">
<div id="header">
<img src="foto/1.png">
<h1><a>Sistem Informasi Akuntansi</a></h1>
<h2>AMIK BSI "Bogor" Kampus A</h2>
<h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
</div>
<div id="menu">
<ul>
<li><a href="index.jsp">Home</a></li>
<li><a href="about.jsp">About</a></li>
<li><a href="exit.jsp">Logout</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h2>Menu Samping</h2>
<ul>
<li><a href="input_nilai.jsp">Latihan Form Processing</a></li>
</ul>
</div>
<div class="right">
<table width="100%">
<tr>
<td valign="top" width="110%">
<center>Muhamad Dandi Nursidik
<br><br>
<img width="300" height="200" src="foto/dandi.JPG"><br>
</center>
<h2>Selamat Datang..</h2>
</center></td>
</tr>
</table>
<div class="footer">
© Panggil saja AA . All Rights Reserved.
</div>
</div>
<div style="clear: both; "> </div>
</div>
</div>
</body>
</html>
2. Selanjutnya buat style.css dengan kodingan sebagai berikut
* {
margin: 0;
padding: 0;
}
table tr td{
border-color: #663ff ;
}
body{
background: #0f3030;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #fff;
margin: 0 auto;
}
a{
text-decoration:none;
color: #00b689;
}
a:hover{
text-decoration: underline;
color: #ff00ff;
}
#wrap{
margin: 0 auto;
width: 965px;
}
#header{
height: 130px;
margin: 0 auto;
width: 965px;
background-color: #63636e;
border-radius: 10px 10px 10px 10px;
}
#header h1{
font-size: 28px;
letter-spacing: -1px;
padding: 15px 0 0 20px;
color: white;
}
#header h1 a{
color: white;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover{
color: activecaption;
}
#header h2{
font-size: 19px;
color: white;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header h3{
font-size: 13px;
color: #C1DAD7;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header img{
width: 115px;
height: 115px;
float: right;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
}
#menu{
height: 30px;
margin: 0 auto;
width: 965px;
line-height: 30px;
background: #fff;
border-radius: 10px 10px 10px 10px;
}
#menu ul{
list-style-type: none;
padding-left: 20px
}
#menu ul li{
display: block;
float: left;
}
#menu ul li a{
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 12px;
color: #228b22;
padding: 8px 10px 7px 10px;
}
#menu ul li a:hover{
color: #222;
text-decoration: none;
}
#content{
background-color: #6c233a;
padding: 0 10px;
border-radius: 10px 10px 10px 10px;
}
.right{
float: right;
width: 728px;
text-align: justify;
padding-top: 5px;
font-size: 12px;
}
.right h2{
font-size: 18px;
font-weight: 100;
padding-left: 285px;
height: 30px;
line-height: 30px;
background: #99fff;
}
.right h2 a{
text-decoration: none;
color: #66000;
}
.right h2 a:hover{
color: #33ffcc;
}
.left{
float: left;
width: 206;
padding-top: 5px;
}
.left h2 {
margin: 5px 0 0;
padding-left: 10px;
height: 30px;
background: #353535;
color: #fffff;
font-size: 13px;
}
.left ul{
padding: 10px 0 15px 20px;
list-style-type: square;
color: #fff;
}
.left ul li a{
text-decoration: none; font-weight: 600;
}
.left ul li a:hover{
color: #ccffcc;
}
.footer{
text-align: center;
font-size: 11px;
color: #fff;
margin-top: 40px;
border-top: 1px dotted #aaa;
padding-top: 10px;
}
.footer a{
color: red;
}
footer a:hover{
color: #ccffcc;
}
.isi td{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #ffffff;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 8px;
color: #006400;
}
.head td{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
background: #90ee90;
letter-spacing: 1px;
padding: 4px 2px 4px 10px;
color: #000080;
text-align: center;
font: 13px "Tahoma",Arial,sans-serif;
}
.button{
margin-left: 0;
padding: 4px 4px;
border: none;
background: #E9CF16;
font-size: 12px;
color: #ffffff;
font-family: "Tahoma";
width: 70px;
}
.buttonlap{
margin-left: 0;
padding: 4px 4px;
border: none;
background: #E9CF16;
font-size: 13px;
color: #ffffff;
font-family: "Tahoma";
width: 100px
}
.button a:hover{
background: #90ee90;
}
3.setelah itu buat about.jsp dengan kodingan sebagai berikut
Tampilan About
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="STYLESHEET" href="style.css"/>
<title>Website sederhana</title>
</head>
<body>
<br><br><br>
<div id="wrap">
<div id="header">
<img src="foto/1.png">
<h1><a>Sistem Informasi Akuntansi</a></h1>
<h2>AMIK BSI "Bogor" Kampus A</h2>
<h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
</div>
<div id="menu">
<ul>
<li><a href="index.jsp">Home</a></li>
<li><a href="about.jsp">About</a></li>
<li><a href="exit.jsp">Logout</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h2>Menu Samping</h2>
<ul>
<li><a href="input_nilai.jsp">Latihan Form Processing</a></li>
</ul>
</div>
<div class="right">
<table width="100%">
<tr>
<td valign="top" width="110%">
<center>
Klik Jika Ingin menghubungi
<br><br>
<img src="foto/fb.png">
<img src="foto/gmail.png">
<img src ="foto/google.png">
</center>
</td>
</tr>
</table>
<div class="footer">
© Panggil saja AA . All Rights Reserved.
</div>
</div>
<div style="clear: both; "> </div>
</div>
</div>
</body>
</html>
4. langkah selanjutnya buat input_nilai.jsp
Tampilan input nilai
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="STYLESHEET" href="style.css"/>
<title>Website sederhana</title>
</head>
<body>
<br><br><br>
<div id="wrap">
<div id="header">
<img src="foto/1.png">
<h1><a>Sistem Informasi Akuntansi</a></h1>
<h2>AMIK BSI "Bogor" Kampus A</h2>
<h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
</div>
<div id="menu">
<ul>
<li><a href="index.jsp">Home</a></li>
<li><a href="about.jsp">About</a></li>
<li><a href="exit.jsp">Logout</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h2>Menu Samping</h2>
<ul>
<li><a href="input_nilai.jsp">Latihan Form Processing</a></li>
</ul>
</div>
<div class="right">
<table width="100%">
<tr>
<td valign="top" width="110%">
<form action="tampil_nilai.jsp">
<h1><center>Silahkan Lengkapi Form dengan Benar</center></h1><br>
<hr size="5" color="black">
</center>
<pre>
<form method="get">
Nama Siswa : <input type="text" name="nama" /><br>
Kota Lahir : <input type="text" name="kota" /><br>
Tanggal Lahir : <input type="text" name="tgl" value="hh/bb/tttt" /><br>
Alamat :
<textarea name="alamat" rows="5" cols="30">
</textarea> <br>
Hobi : <input type="checkbox" name="hobi" value="Olahraga"> Olahraga
<input type="checkbox" name="hobi" value="Membaca"> Membaca
<input type="checkbox" name="hobi" value="Tidur"> Tidur
<br>
<input type="submit" value="Submit"><input type="reset" value="Ulang">
</pre>
</form>
</td>
</tr>
</table>
<div class="footer">
© Panggil Saja AA. All Rights Reserved.
</div>
</div>
<div style="clear: both; "> </div>
</div>
</div>
</body>
</html>
5. langkah kelima buat Tampilannyaa untuk memanggil inputan processing yang telah di buat tadi dengan nama tampilan_nilai.jsp
image tampilan nilai
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="STYLESHEET" href="style.css"/>
<title>Website sederhana</title>
</head>
<body>
<br><br><br>
<div id="wrap">
<div id="header">
<img src="foto/1.png">
<h1><a>Sistem Informasi Akuntansi</a></h1>
<h2>AMIK BSI "Bogor" Kampus A</h2>
<h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
</div>
<div id="menu">
<ul>
<li><a href="index.jsp">Home</a></li>
<li><a href="about.jsp">About</a></li>
<li><a href="exit.jsp">Logout</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h2>Menu Samping</h2>
<ul>
<li><a href="input_nilai.jsp">Latihan Form Processing</a></li>
</ul>
</div>
<div class="right">
<table width="100%">
<tr>
<td valign="top" width="110%">
<%
String tNama = request.getParameter("nama");
String tKota = request.getParameter("kota");
String tTgl = request.getParameter("tgl");
String tAlamat = request.getParameter("alamat");
%>
<br>
<center>
<h3>Hasil Yang Telah Anda input </h3>
<br>
<table border="1">
<tr>
<td width="200px">Nama Siswa</td>
<td width="10px">-></td>
<td width="200px"> <% out.println(tNama); %> </td>
</tr>
<tr>
<td>Kota Lahir</td>
<td>-></td>
<td> <% out.println(tKota); %></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>-></td>
<td> <% out.println(tTgl); %></td>
</tr>
<tr>
<td>Alamat</td>
<td>-></td>
<td> <% out.println(tAlamat); %></td>
</tr>
<tr>
<td>Hobi</td>
<td>-></td>
<td> <%
String[] authors = request.getParameterValues("hobi");
if (authors != null) {
%>
<%
for (int i=0 ; i< authors.length; ++i)
{
%>
<br>
<%= authors[i]%></br>
<% } %>
<% } %> </td>
</tr>
</table><br>
<h3>Kembali Input?</h3><a href= "input_nilai.jsp">Klik</a>
</td>
</tr>
</table>
<div class="footer">
© Panggil Saja AA 2017. All Rights Reserved.
</div>
</div>
<div style="clear: both; "> </div>
</div>
</div>
</body>
</html>
6. terakhir buat exit.jsp
tampilan exit
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="STYLESHEET" href="style.css"/>
<title>Website sederhana</title>
</head>
<body>
<br><br><br>
<div id="wrap">
<div id="header">
<img src="foto/1.png">
<h1><a>Sistem Informasi Akuntansi</a></h1>
<h2>AMIK BSI "Bogor" Kampus A</h2>
<h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
</div>
<div id="menu">
<ul>
<li><a href="index.jsp">Login</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h2>Informasi</h2>
<ul>
Anak Stm kebacok..<br>
Seorang cabuli kambing..<br>
</ul>
</div>
<div class="right">
<center>Terimakasih telah mengunjungi, silahkan login..</center>
<div class="footer">
© Panggil Saja AA 2017. All Rights Reserved.
</div>
</div>
<div style="clear: both; "> </div>
</div>
</div>
</body></html>
Sekian Terimaksih
Tinggalkan komentar anda
Salam AA
Dapatkan Penghasilan Tambahan Dengan Bermain Poker Online di www , SmsQQ , com
BalasHapusKeunggulan dari smsqq adalah
*Permainan 100% Fair Player vs Player - Terbukti!!!
*Proses Depo dan WD hanya 1-3 Menit Jika Bank Tidak Gangguan
*Minimal Deposit Hanya Rp 10.000
*Bonus Setiap Hari Dibagikan
*Bonus Turn Over 0,3% + 0,2%
*Bonus referral 10% + 10%
*Dilayani Customer Service yang Ramah dan Sopan 24 Jam NONSTOP
*Berkerja sama dengan 4 bank lokal antara lain : ( BCA-MANDIRI-BNI-BRI )
Jenis Permainan yang Disediakan ada 8 jenis :
Poker - BandarQ - DominoQQ - Capsa Susun - AduQ - Sakong - Bandar Poker - Bandar 66
Untuk Info Lebih Lanjut Dapat menghubungi Kami Di :
BBM: 2AD05265
WA: +855968010699
Skype: smsqqcom@gmail.com
bosku minat daftar langsung aja bosku^^