Membuat Aplikasi Bangun Ruang Dengan Pemrograman Java Server Pages 2013 Rio Andrianto, S.Kom SMK Bakti Nusantara 666 1/1/2013
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Membuat Aplikasi Bangun Ruang Dengan Pemrograman Java Server Pages
2013
Rio Andrianto, S.Kom SMK Bakti Nusantara 666
1/1/2013
MEMBUAT APLIKASI BANGUN RUANG
Tampilan Utama Aplikasi Bangun Ruang (index.jsp)
Tampilan Halaman Segitiga
(segitiga_home.jsp)
Tampilan Hasil Perhitungan Segitiga
SOURCE CODE Index.jsp <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Aplikasi Bangun Datar</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> <ul id="nav"> <li><a href="index.jsp" class="selected">Home</a></li> <li><a href="segitiga_home.jsp">Segitiga</a></li> <li><a href="persegi_home.jsp">Persegi Panjang</a></li> <li><a href="jajaran_home.jsp">Jajaran Genjang</a></li> </ul> <div id="header"> <img src="images/header.png"> </div> <div id="body"> <div id="main"> <p><%@include file="sisipan.jsp" %></p> </div> <div id="side"> <h2>Bangun Datar</h2><br> <a href="index.jsp"><h6>Home</h6></a> <a href="segitiga_home.jsp"><h6>Segitiga</h6></a> <a href="persegi_home.jsp"><h6>Persegi Panjang</h6></a> <a href="jajaran_home.jsp"><h6>Jajaran Genjang</h6></a> <br><br> </div> </div> <div id="foot"> <p>SMK Bakti Nusantara 666 - Teknologi Web</p> </div> </div> </body> </html>
Sisipan.jsp <h2>Selamat Datang</h2> <p>Jenis bangun datar bermacam-macam, antara lain persegi, persegi panjang, segitiga, jajar genjang, trapesium, layang-layang, belah ketupat, dan lingkaran.</p> <p>Nama-nama Bangun Datar<p> <ol> <li> Persegi Panjang, yaitu bangun datar yang mempunyai sisi berhadapan yang sama panjang, dan memiliki empat buah titik sudut siku-siku. Persegi, yaitu persegi panjang yang semua sisinya sama panjang. </li> <li> Segitiga, yaitu bangun datar yang terbentuk oleh tiga buah titik yang tidak segaris.. macam macamnya: segitiga sama sisi, segitiga sama kaki, segitiga siku-siku, segitiga sembarang </li> <li> Jajar Genjang, yaitu segi empat yang sisinya sepasang-sepasang sama panjang dan sejajar. </li> <li> Trapesium, yaitu segi empat yang memiliki tepat sepasang sisi yang sejajar. </li> <li> Layang-layang, yaitu segi empat yang salah satu diagonalnya memotong tegak lurus sumbu diagonal lainnya. </li> <li> Belah Ketupat, yaitu segi empat yang semua sisinya sama panjang dan kedua diagonalnya saling berpotongan tegak lurus. </li> <li> Lingkaran, yaitu bangun datar yang terbentuk dari himpunan semua titik persekitaran yang mengelilingi suatu titik asal dengan jarak yang sama. jarak tersebut biasanya dinamakan r, atau radius, atau jari-jari. </li> </ol>
segitiga_home.jsp <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bangun Datar :: Persegi Panjang</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> <!--<h1 id="title">Bangun Datar</h1>--> <ul id="nav"> <li><a href="index.jsp">Home</a></li> <li><a href="segitiga_home.jsp">Segitiga</a></li> <li><a href="persegi_home.jsp" class="selected">Persegi Panjang</a></li> <li><a href="jajaran_home.jsp">Jajaran Genjang</a></li> </ul> <div id="header"> <img src="images/header.png"> </div> <div id="body"> <div id="main"> <p><%@include file="persegi_isi.jsp" %></p> </div> <div id="side"> <h2>Sidebar</h2><br> <a href="index.jsp"><h6>Home</h6></a> <a href="segitiga_home.jsp"><h6>Segitiga</h6></a> <a href="persegi_home.jsp"><h6>Persegi Panjang</h6></a> <a href="jajaran_home.jsp"><h6>Jajaran Genjang</h6></a> <br><br> </div> </div> <div id="foot"> <p>SMK Bakti Nusantara 666 - Teknologi Web</p> </div> </div> </body> </html>
segitiga_isi.jsp <h2>Segitiga</h2> <image src="images/segitiga.jpg"/> <p>Segitiga atau segi tiga adalah nama suatu bentuk yang dibuat dari tiga sisi yang berupa garis lurus dan tiga sudut. Matematikawan Euclid yang hidup sekitar tahun 300 SM menemukan bahwa jumlah ketiga sudut di suatu segi tiga pada bidang datar adalah 180 derajat.</p> <p>Menurut Panjang Sisinya Segitiga dikelompokan menjadi beberapa jenis yaitu:</p> <ol> <li>Segitiga sama sisi adalah segitiga yang ketiga sisinya sama panjang. Sebagai akibatnya semua sudutnya juga sama besar, yaitu 60°.</li> <li>Segitiga sama kaki adalah segitiga yang dua dari tiga sisinya sama panjang. Segitiga ini memiliki dua sudut yang sama besar.</li> <li>Segitiga sembarang adalah segitiga yang ketiga sisinya berbeda panjangnya. Besar semua sudutnya juga berbeda.</li> </ol> <p>Menurut besar sudut terbesarnya:</p> <ol> <li>Segitiga siku-siku adalah segitiga yang salah satu besar sudutnya sama dengan 90°. Sisi di depan sudut 90° disebut hipotenusa atau sisi miring.</li> <li>Segitiga lancip adalah segitiga yang besar semua sudut < 90°</li> <li>Segitiga tumpul adalah segitiga yang besar salah satu sudutnya > 90°</li> </ol> <p>Isi Form Dibawah ini untuk Menghitung Luas dan Keliling Segitiga</p> <table> <form action="" method="post" name="segitiga_f"> <tr> <td>Panjang Alas</td> <td>:</td> <td><input type="text" name="panjang"> Cm</td> </tr> <tr> <td>Tinggi Segitiga</td> <td>:</td> <td><input type="text" name="tinggi"> Cm</td> </tr> <tr> <td></td> <td></td> <td><input type="submit" value="Hitung"><input type="reset" value="Reset"></td> </tr> </form> </table> <%@include file="segitiga_hitung.jsp" %>
segitiga_hitung.jsp <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <% String xp=request.getParameter("panjang"); String xt=request.getParameter("tinggi"); if ((xp != null)&&(xt != null)) { Integer luas=0; Integer keliling=0; Integer xpi=Integer.parseInt(xp); Integer xti=Integer.parseInt(xt); luas=(xpi*xti)*1/2; out.println("<hr>"); out.println("<h4>Hasil Perhitungan Luas Segitiga</h4><br>"); out.println("<table>"); out.println("<tr>"); out.println("<td>"); out.println("Panjang Segitiga"); out.println("</td>"); out.println("<td>"); out.println(":"); out.println("</td>"); out.println("<td>"); out.println(xp+" Cm"); out.println("</td>"); out.println("</tr>"); out.println("<tr>"); out.println("<td>"); out.println("Tinggi Segitiga"); out.println("</td>"); out.println("<td>"); out.println(":"); out.println("</td>"); out.println("<td>"); out.println(xt+" Cm"); out.println("</td>"); out.println("</tr>"); out.println("<tr>"); out.println("<td>");
out.println("Luas Segitiga"); out.println("</td>"); out.println("<td>"); out.println(":"); out.println("</td>"); out.println("<td>"); out.println(luas+" Cm²"); out.println("</td>"); out.println("</tr>"); out.println("</table>"); } %>
style.css body {background: #EDE1F2; font-family: 'Open Sans', 'Droid Sans', Arial, sans-serif; font-size: 13px;} #box {margin: 20px auto; padding: 20px; width: 800px; background: white; border: 1px solid #D8C1E3; box-shadow: 0px 0px 10px #CCC; -moz-box-shadow: 0px 0px 10px #CCC; -webkit-box-shadow: 0px 0px 10px #CCC;} p {color: #222; text-align: justify;} h1, h2, h3, h4, h5, h6 {margin: 0;} h1 {font-size: 30px; letter-spacing: -2px; padding: 0;} h2 {font-size: 25px;} h3 {font-size: 23px;} h4 {font-size: 20px; text-transform: uppercase; letter-spacing: 1px;} h5 {font-size: 20px; text-transform: uppercase; letter-spacing: 1px; color: #555;} h6 {font-size: 20px; color: #555;} a {color: purple; text-decoration: underline;} a:hover {color: black; text-decoration: none;} a:active {color: purple; text-decoration: none;} a:visited {color: purple; text-decoration: underline;} ul li {margin-bottom: 10px;} #title {float: left; margin-bottom: 15px;} #nav {float: right; padding: 0; margin: 10px 0 0 0;} #nav li {display: inline; line-height: 34px;} #nav li a {background: #8C2EB8; color: white; font-size: 14px; font-family: 'Open Sans'; font-weight: bold; text-transform: uppercase; padding: 7px 10px 8px 10px; text-decoration: none;} #nav li a:hover {background: #6E2191;} #nav li a:active {background: #581975;} #nav li a.selected {background: #581975;} #nav li a.selected:hover {background: #44115C;} #nav li a.selected:active {background: #581975;} #header {clear: both;} #body {margin-top: 20px;} #main {float: left; width: 575px; margin: 0;} #side {float: right; width: 200px; padding: 0;} #side a {text-decoration: none;} #side h2 {color: gray; text-align: right; letter-spacing: 2px; margin: 0; text-transform: uppercase;} #side h6 {color: #555; text-align: right; float: right; width: 175px; padding: 10px; font-weight: normal; font-size: 15px; background: #F3EBF7; margin: 0 0 5px 0; border: 1px solid #E0CAEB;} #side h6:hover {color: #222; background: #EADAF2; border: 1px solid #D8C1E3;} #foot {clear: both; color: black; background: #EADAF2; padding: 10px 20px;} #foot p {margin: 0; text-align: right;}
TUGAS ANDA 1. Buatlah Image header yang bertemakan bangun ruang dengan ukuran 800x200 pixel sehingga terbentuk
tampilan seperti dihalaman sebelummnya. 2. Berdasarkan contoh script diatas, lengkapi perhitungan yang terdalam menu yaitu:
a. Persegi panjang b. Jajaran genjang c. Lingkaran d. Trapesium
Related Documents
