Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pemrograman Web Enterprise - Form Input Dengan HTML & JSP

    Diunggah oleh

    Yan Fi
    444 tayangan10 halaman

    Judul Asli

    Pemrograman Web Enterprise - Form Input dengan HTML & JSP

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Tandai sebagai konten tidak pantas
    444 tayangan10 halaman

    Pemrograman Web Enterprise - Form Input Dengan HTML & JSP

    Diunggah oleh

    Yan Fi

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Tandai sebagai konten tidak pantas
    dari 10

    Nama NIM Mata Kuliah Dosen

    : YanFi : 41508120094 : Pemrograman Web Enterprise : Sukma Wardhana

    Hari / Tanggal Kumpul : Sabtu / 20 Oktober 2012

    Tugas II Soal: Buat Project seperti diatas untuk menampilkan: a. NPM b. Nama Lengkap c. Nama Panggilan d. Tempat Lahir e. Tanggal Lahir f. Alamat Rumah g. No Telp h. Alamat Email Yang nilainya berdasarkan Form Input.

    Jawaban: Source code yang terdiri dari: FormInput.html hasilinput.jsp

    Hasil Eksekusi berdasarkan source code yang ditampilkan dalam bentuk print screen.

    Source Code FormInput.html:


    <html> <head> <title>Form Input Biodata</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    </head> <style type="text/css"> #bg {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:fixed;margin-left: 200px;} </style>

    <body> <div id="bg"><img src="./tes.jpg;" width="100%" height="100%" ></div> <script language = "javascript"> <!-function cek(frm) { var npm = frm.txtnpm.value; var namaleng = frm.txtnames.value; var namapang = frm.txtname.value; var tempat = frm.txt_tempat.value; var alamat = frm.txtalamat.value; var no = frm.telp.value; var email =frm.txtemail.value; var regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([AZa-z]{2,4})$/; // -> check format email if (npm=="") { alert("Silahkan periksa Nomor Mahasiswa"); frm.txtnpm.focus(); return false; } else if (namaleng=="") { alert("Silahkan periksa kembali Nama Lengkap"); frm.txtnames.focus(); return false; } else if (namapang=="") { alert("Silahkan periksa kembali Nama Panggilan"); frm.txtname.focus(); return false; } else if (tempat=="")

    { alert("Silahkan periksa kembali Tempat Lahir"); frm.txt_tempat.focus(); return false; } else if (alamat=="") { alert("Silahkan periksa kembali Alamat Rumah"); frm.txtalamat.focus(); return false; } else if (no==""|| no.length < 9 || no.length > 12 ) { alert("Silahkan periksa kembali No. Telp"); frm.telp.focus(); return false; } else if ( email=="" || regex.test(email)==false) { alert("Silahkan periksa kembali Email"); frm.txtemail.focus(); return false; } else { frm.submit(); } } //--> </script> <div id="content"> <p><br><font color="#f5a91f" size="20"><b>Silahkan Isi Form di bawah ini:</b></font></br></p> <form action="hasilinput.jsp" method="post"> <table border = 0 bgcolor="#cdf0f6"> <tr ><td ><font color="#68a9bd">NPM (No. Mhs)</font></td> <td><font color="#68a9bd">:</font></td> <td><input type="text" name="txtnpm" size="17" placeholder="Isi No. Mahasiswa"/></td> </tr> <tr> <td><font color="#68a9bd">Nama Lengkap</font></td> <td><font color="#68a9bd">:</font></td> <td><input type="text" name="txtnames" size="50" Placeholder="Isi Nama Lengkap"/></td> </tr> <tr> <td><font color="#68a9bd">Nama Panggilan</font></td>

    <td><font color="#68a9bd">:</font></td> <td><input type="text" name="txtname" size="17" placeholder="Isi Nama Panggilan"/></td> </tr> <tr> <td><font color="#68a9bd">Tempat Lahir</font></td> <td><font color="#68a9bd">:</font></td> <td><input type="text" name="txt_tempat" size="17" placeholder="Isi Tempat Lahir"/></td> </tr> <tr> <td><font color="#68a9bd">Tanggal Lahir</font></td> <td><font color="#68a9bd">:</font></td> <td><SELECT NAME="txt_tgl"> <OPTION value="1">1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> <OPTION value="6">6</OPTION> <OPTION value="7">7</OPTION> <OPTION value="8">8</OPTION> <OPTION value="9">9</OPTION> <OPTION value="10">10</OPTION> <OPTION value="11">11</OPTION> <OPTION value="12">12</OPTION> <OPTION value="13">13</OPTION> <OPTION value="14">14</OPTION> <OPTION value="15">15</OPTION> <OPTION value="16">16</OPTION> <OPTION value="17">17</OPTION> <OPTION value="18">18</OPTION> <OPTION value="19">19</OPTION> <OPTION value="20">20</OPTION> <OPTION value="21">21</OPTION> <OPTION value="22">22</OPTION> <OPTION value="23">23</OPTION> <OPTION value="24">24</OPTION> <OPTION value="25">25</OPTION> <OPTION value="26">26</OPTION> <OPTION value="27">27</OPTION> <OPTION value="28">28</OPTION> <OPTION value="29">29</OPTION> <OPTION value="30">30</OPTION> <OPTION value="31">31</OPTION> </SELECT> <select name="bln_lahir"> <OPTION value="Januari">Januari</OPTION> <OPTION value="Februari">Februari</OPTION> <OPTION value="Maret">Maret</OPTION>

    <OPTION value="April">April</OPTION> <OPTION value="Mei">Mei</OPTION> <OPTION value="Juni">Juni</OPTION> <OPTION value ="Juli">Juli</OPTION> <OPTION value="Agustus">Agustus</OPTION> <OPTION value="September">September</OPTION> <OPTION value="Oktober">Oktober</OPTION> <OPTION value="November">November</OPTION> <OPTION value="Desember">Desember</OPTION> </select> <SELECT NAME="thn_lahir"> <option value="1970">1970</option> <OPTION value="1971">1971</OPTION> <OPTION value="1972">1972</OPTION> <OPTION value="1973">1973</OPTION> <OPTION value="1974">1974</OPTION> <OPTION value="1975">1975</OPTION> <OPTION value="1976">1976</OPTION> <OPTION value="1977">1977</OPTION> <OPTION value="1978">1978</OPTION> <OPTION value="1979">1979</OPTION> <OPTION value="1980">1980</OPTION> <OPTION value="1981">1981</OPTION> <OPTION value="1982">1982</OPTION> <OPTION value="1983">1983</OPTION> <OPTION value="1984">1984</OPTION> <OPTION value="1985">1985</OPTION> <OPTION value="1986">1986</OPTION> <OPTION value="1987">1987</OPTION> <OPTION value="1988">1988</OPTION> <OPTION value="1989">1989</OPTION> <OPTION value="1990">1990</OPTION> <OPTION value="1991">1991</OPTION> <OPTION value="1992">1992</OPTION> <OPTION value="1993">1993</OPTION> <OPTION value="1994">1994</OPTION> <OPTION value="1995">1995</OPTION> <OPTION value="1996">1996</OPTION> <OPTION value="1997">1997</OPTION> <OPTION value="1998">1998</OPTION> <OPTION value="1999">1999</OPTION> <OPTION value="2000">2000</OPTION> </SELECT></td> </tr> <tr> <td><font color="#68a9bd">Alamat Rumah</font></td> <td><font color="#68a9bd">:</font></td> <td><input type="text" name="txtalamat" size="17" placeholder="Isi Alamat Rumah"/></td>

    </tr> <tr> <td><font color="#68a9bd">No. Telp</font></td> <td><font color="#68a9bd">:</font></td> <td><input type="tel" name="telp" size="17" placeholder="Isi No. Telp"/></td> </tr> <tr> <td><font color="#68a9bd">Email</font></td> <td><font color="#68a9bd">:</font></td> <td ><input type="email" name="txtemail" size="30" placeholder="username@email.com" /></td> </tr> <tr> <td colspan="3"><input type=button value=Submit onClick="cek(this.form);" /> <input type=reset value=Reset /></td></tr> </table> </form> <p><b>Created by:</b> <br>YanFi - 41508120094</br> Pemrograman Web Enterprise </p> </div> </body> </html>

    Source Code hasilinput.jsp


    <%@page import="java.util.*" import= "java.io.*" %> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <style type="text/css"> html {height:100%;} body {height:100%; margin:0; padding:0;} #bg {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:fixed;margin-left: 400px; margin-top: 100px;} </style> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hasil Form</title> </head>
    <body><div id="bg"><img src="./tes3.jpg;" width="100%" height="100%" ></div>

    <div id="content"> <p><font size="6">Welcome:&nbsp; <%=request.getParameter("txtname")%> </font> </p> <table border = 0> <tr><td>NPM (No. Mhs)</td> <td>:</td> <td><%=request.getParameter("txtnpm")%></td> </tr> <tr> <td>Nama Lengkap</td> <td>:</td> <td><%=request.getParameter("txtnames")%></td> </tr> <tr> <td>Nama Panggilan</td> <td>:</td> <td><%=request.getParameter("txtname")%></td> </tr> <tr> <td>Tempat</td> <td>:</td> <td><%=request.getParameter("txt_tempat")%></td> </tr> <tr> <td>Tanggal Lahir</td> <td>:</td> <td><%=request.getParameter ("txt_tgl") +" "+request.getParameter ("bln_lahir") +" "+request.getParameter ("thn_lahir") %></td> </tr> <tr> <td>Alamat Rumah</td> <td>:</td> <td><%=request.getParameter("txtalamat")%></td> </tr> <tr> <td>No. Telp</td> <td>:</td> <td><%=request.getParameter("telp")%></td> </tr> <tr> <td>Email</td> <td>:</td> <td><%=request.getParameter("txtemail")%></td> </tr> </table> </div> </body> </html>

    Hasil Eksekusi: 1. Tampilan FormInput.html pada saat program dijalankan seperti di bawah ini:

    2. Tampilan di bawah ini menunjukkan pengguna sedang mengisi form pendaftaran:

    3. Tampilan apabila terdapat pengisian yang masih kosong:

    4. Tampilan setelah terisi lengkap:

    5. Tampilan hasil input berdasarkan pengisian di halaman formInput.html:

    Anda mungkin juga menyukai