Pages

December 16, 2013

Membuat Aplikasi web berbasis JSP Sederhana


Berikut dibawah ini adalah Salah satu Tugas Siswa didalam mengirimkan Tugas Membuat Form Biodata dan Laporan  menggunakan JSP dengan Variable Sementara dan perpaduan Tampilan menggunakan CSS agar Tampil lebih Indah.
1.  Output Program Penginputan Data














2. Output Program Laporan Data setelah "Proses"














3. Coding Program :

<html>
 <head>
  <title>Input Biodata</title>
  <style type='text/css' >
 
  #button1 {
  padding-left:20px;
  text-align:left;
  }
  #button2 {
  padding-right:20px;
  text-align:right;
  }
 
  #kepala {
  font-family:algerian,snap itc;
  font-size:25px;
  height:50px;
  }
  #kaki {
  height:30px;
  }
  #tabel1 {
  background-color:dodgerblue;
  width:410;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 20px 20px 20px;
  }
  #tabel2 {
  background-color:dodgerblue;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 0px 20px 0px;
  }
  #tabel1_isi {
  background-color:black;
  color:white;
  width:400; height:200;
  padding:5px;
  }
  </style>
  <body bgcolor='cornflowerblue'>
   <br/>
    <form action='index.jsp' method='get'>
   <table id='tabel1' align='center' border='0' >
    <tr id='kepala'>
     <th colspan='2' id='kepala'>BIODATA SISWA</th>
    </tr>
    <tr>
     <td colspan='2'>
        <table align='center' id='tabel1_isi' border='0'>
            <tr>
            <td id='kolom1'>NIS :</td>
            <td><input type='text' name='nis' size='10' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Nama :</td>
            <td><input type='text' name='nama' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Alamat :</td>
            <td><input type='text' name='alamat' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>No. Telp :</td>
            <td><input type='text' name='no_telp' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Hobi :</td>
            <td><input type='text' name='hobi' size='hobi0' required></td>
            </tr>
        </table>
     </td>
    </tr>
    <tr id='kaki'>
     <td id='button1'>
     <input type='submit' value='proses'/>
     </td>
     <td id='buttonhobi'>
     <input type='reset' value='clear'/>
     </td>
    </tr>
    </div>
   </table>
  
   <br/>
  
   <table id='tabel2' align='center'>
    <%
    String nis = request.getParameter("nis");
    String nama = request.getParameter("nama");
    String alamat = request.getParameter("alamat");
    String no_telp = request.getParameter("no_telp");
    String hobi = request.getParameter("hobi");
    %>
    <tr bgcolor='black' style='color:white'>
     <th width='30'>No</th>
     <th width='50'>Nis</th>
     <th width='150'>Nama</th>
     <th width='200'>Alamat</th>
     <th width='120'>No. Telp</th>
     <th width='100'>Hobi</th>
    </tr>
    <tr>
     <td>1</td>
     <td><% out.println(nis); %></td>
     <td><% out.println(nama); %></td>
     <td><% out.println(alamat); %></td>
     <td><% out.println(no_telp); %></td>
     <td><% out.println(hobi); %></td>
    </form>
  </body>
</html>

Comments
0 Comments

0 komentar:

Post a Comment