Tutorial JSTL

Last Update : 1 October 2011 19:00
TUTORIAL JSTL
Erick Costanio
Agenda
A.
B.
C. D. E.
Select All Select with parameter Insert Update Delete
Requirement
Netbeans 7 Web Server : Tomcat 7 Database Management System : Java DB Library : JSTL 1.1 derbyclient.jar, terdapat di
C:\Program Files\glassfish-3.1.1\javadb\lib\
Prepare Database (1)
Jalankan Netbeans Pilih Tab Service Klik kanan JavaDB Create Database
Masukkan :
Database Name : moviedb User Name : root Password : root Confirm Password : root
Klik Ok
Expand Java DB Klik kanan moviedb Pilih Connect
Klik kanan pada jdbc:derby://localhost:1527/moviedb [root on

ROOT]
Execute Command

1.
Buat table movie
create table movie ( kode char(4) primary key, judul varchar(50), genre varchar(100), tahun integer, stok integer );
2.
Isi data table movie
insert into movie values('0001','Rambo','action',2005,4); insert into movie values('0002','Indiana Jones','comedy',2003,2); insert into movie values('0003','Wanted horror','horror',2008,10); insert into movie values('0004','Scanners','horror',2009,0); insert into movie values('0005','Jumper','adventure',2008,7);
Paste script 1 dan 2 yang ada di Slide 8 ke tab SQL Command 1 Klik Run SQL
Test : Menampilkan data yang sudah dimasukkan kedalam Table Movie
Create New Web Project (1)
Pilih tab Project File New Project
Pilih Jawa Web Web Application
Klik Next
Isi Project Name dengan Movie Application
Klik Next, Pilih Server Apache Tomcat 7.0.14.0
Klik Next, Klik Finish
Struktur Web Project MovieApplication
Cara run project : F6
Add Library
Klik kanan Library Add Library
Pilih JSTL 1.1 Klik Add Library
Add JAR/Folder
Klik kanan Library Add JAR/Folder
Browse ke C:\Program
3.1.1\javadb\lib\
Files\glassfish-
Pilih derbyclient.jar Klik Open
A. Select All (1)
Ganti isi index.jsp menjadi seperti berikut :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Movie Application</title> </head> <body> </body> </html>
NOTE : Jika Kode Program berwarna hitam semua seperti diatas copy paste semua
A. Select All (2)
Tambahkan taglib jstl (core dan sql)
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Movie Application</title> </head> <body> </body> </html>
NOTE : Jika Kode Program terdapat warna merah seperti diatas, copy kode yang warna merah saja
A. Select All (3)
Tambahkan DataSource untuk koneksi ke MySQL
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <sql:setDataSource driver="org.apache.derby.jdbc.ClientDriver" url="jdbc:derby://localhost:1527/moviedb" user="root" password="root" var="movieds" scope="application" /> <html> <head> ..
A. Select All (4)
Buat query untuk mengambil data dari tabel movie
<title>Movie Application</title> </head> <body> <sql:query var="resultmovie" dataSource="${movieds}"> SELECT kode, judul, genre, tahun, stok from movie </sql:query> ..........
A. Select All (5)
Buat <tabel> untuk menampilkan data dihal web
<sql:query var="resultmovie" dataSource="${movieds}"> SELECT kode, judul, genre, tahun, stok from movie </sql:query> <table border="1"> <tr> <th>KODE</th> <th>JUDUL</th> <th>GENRE</th> <th>TAHUN</th> <th>STOK</th> </tr> <c:forEach items="${resultmovie.rows}" var="row"> <tr> <td><c:out value="${row.kode}"/></td> <td><c:out value="${row.judul}"/></td> <td><c:out value="${row.genre}"/></td> <td><c:out value="${row.tahun}"/></td> <td><c:out value="${row.stok}"/></td> </tr> </c:forEach> </table> <a href="insert.html">Add New Movie</a>  ..
A. Select All (6)
Output :
B. Select with parameter (1)
Tambahkan sebuah form untuk pencarian judul Movie
<title>Movie Application</title> </head> <body> <sql:query var="resultmovie" dataSource="${movieds}"> SELECT kode, judul, genre, tahun, stok from movie </sql:query> <form name="cari" method="post" action="index.jsp"> JUDUL : <input type="text" name="keyword" size="25"/> <input type="submit" value="search"> </form> ..........
Tambahan keyword where pada query untuk pencarian berdasarkan JUDUL
<title>Movie Application</title> </head> <body> <sql:query var="resultmovie" dataSource="${movieds}"> SELECT kode, judul, genre, tahun, stok from movie where judul LIKE '%${param.keyword}%' </sql:query> ..........
Output :
C. Insert (0)
Buat sebuah file bernama insert.html Klik kanan Web Pages New HTML
Masukkan HTML File Name insert klik Finish
C. Insert (1)
Masukkan kode berikut kedalam tag<body> <form method="post" action="resultInsert.jsp"> insert.html <table border="0">
<tr> <td>Kode</td> <td> : </td> <td colspan="2"><input type="text" name="kode" size="4"></td> </tr> <tr> <td>Judul</td> <td> : </td> <td colspan="2"><input type="text" name="judul" size="20"></td> </tr> <tr> <td>Genre</td> <td> : </td> <td><input type="radio" name="genre" value="horor">horor<br/> <input type="radio" name="genre" value="action">action<br/> <input type="radio" name="genre" value="comedy">comedy<br/> <input type="radio" name="genre" value="drama">drama<br/> </td> <td> <input type="radio" name="genre" value="sci-fi">sci-fi<br/> <input type="radio" name="genre" value="family">family<br/> <input type="radio" name="genre" value="adventure">adventure<br/> <input type="radio" name="genre" value="animation">animation<br/> </td> </tr>
Continue..
C. Insert (2)
<tr>
<td>Tahun</td> <td> : </td> <td colspan="2"> <select name="tahun"> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> </select> </td> </tr> <tr> <td>Stok</td> <td> : </td> <td colspan="2"><input type="text" name="stok" size="2" maxlength="2"></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td><input type="reset" name="reset" value="RESET"> <input type="submit" name="add" value="ADD"></td> </tr> </table> </form>
Isinya adalah form untuk menambahkan movie baru
C. Insert (3)
Buat sebuah file jsp bernama resultInsert.jsp <jsp:forward> untuk direct kehalaman tertentu
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Movie Application</title> </head> <body> <sql:update var="tambah" dataSource="${movieds}"> insert into MOVIE values(?,?,?,?,?) <sql:param value="${param.kode}"/> <sql:param value="${param.judul}"/> <sql:param value="${param.genre}"/> <sql:param value="${param.tahun}"/> <sql:param value="${param.stok}"/> </sql:update> <jsp:forward page="index.jsp"/> </body> </html>
C. Insert (4)
Output :
D. Update (1)
Buat script internal css didalam index.jsp
.. <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Movie Application</title> <style type="text/css"> .orange { font-family: Verdana; color: #ffffff; background-color: #FF6600; font-weight: bold; font-size: 10px; } </style> </head> <body> ............
D. Update (2)
Tambahkan kolom Action [update] di . index.jsp <th>GENRE</th>

<th>TAHUN</th> <th>STOK</th> <th>ACTION</th> </tr> <c:forEach items="${resultmovie.rows}" var="row"> <tr> <td><c:out value="${row.kode}"/></td> <td><c:out value="${row.judul}"/></td> <td><c:out value="${row.genre}"/></td> <td><c:out value="${row.tahun}"/></td> <td><c:out value="${row.stok}"/></td> <td><a href="update.jsp?kode=${row.kode}"> <span class='orange'>[update]</span></a> </td> </tr> </c:forEach> </table> <a href="insert.html">Add New Movie</a> ..
D. Update (3)
Buat sebuah file jsp bernama update.jsp Buat query untuk mengambil movie berdasarkan kode
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Movie Application</title> </head> <body> <sql:query var="select" dataSource="${movieds}"> select kode, judul, genre, stok from movie where kode = ? Query untuk mengambil movie <sql:param value="${param.kode}"/> berdasarkan kode </sql:query> <h3>Update Movie: ${select.rows[0].judul}</h3> </body> </html>
D. Update (4)
Tambahkan <form> untuk update dibawah kode <h3>Update Movie: ${select.rows[0].judul}</h3>
<form method="post" action="resultUpdate.jsp"> <table border="0"> <tr> <td>Kode</td> <td> : </td> <td colspan="2"><input type="text" name="kode" size="4" value="${select.rows[0].kode}"></td> </tr> <tr> <td>Judul</td> <td> : </td> <td colspan="2"><input type="text" name="judul" size="20" value="${select.rows[0].judul}"></td> </tr> <tr> <td>Genre</td> <td> : </td> <td> <c:forTokens varStatus="vks" var="vk" delims="," items="horror,action,comedy,drama"> <input type="radio" name="genre" value="${vk}" <c:if test="${vk == select.rows[0].genre}"> <c:out value="checked ='checked'"/> </c:if> />${vk}<br/> </c:forTokens> Continue.. </td>
D. Update (5)
<c:forTokens> digunakan untuk mencacah kalimat select diambil dari var <sql:query>
<td> <c:forTokens varStatus="vks2" var="vk2" delims="," items="sci-fi,family,adventure,animation"> <input type="radio" name="genre" value="${vk2}" <c:if test="${vk2 == select.rows[0].genre}"> <c:out value="checked ='checked'"/> </c:if> />${vk2}<br/> </c:forTokens> </td> </tr> <tr> <td>Stok</td> <td> : </td> <td colspan="2"><input type="text" name="stok" size="2" maxlength="2" value="${select.rows[0].stok}"></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td><input type="submit" name="update" value="UPDATE"></td> </tr> </table> </form>
D. Update (6)
Buat sebuah file jsp bernama resultUpdate.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Movie Application</title> </head> <body> <sql:update var="tambah" dataSource="${movieds}"> UPDATE movie SET judul=?, genre=?, stok=? WHERE kode=? <sql:param value="${param.judul}"/> <sql:param value="${param.genre}"/> <sql:param value="${param.stok}"/> <sql:param value="${param.kode}"/> </sql:update> <jsp:forward page="index.jsp"/> </body> </html>
D. Update (7)
Output :
E. Delete (1)
Tambahkan kolom Action [delete] di index.jsp
. <c:forEach items="${resultmovie.rows}" var="row"> <tr> <td><c:out value="${row.kode}"/></td> <td><c:out value="${row.judul}"/></td> <td><c:out value="${row.genre}"/></td> <td><c:out value="${row.tahun}"/></td> <td><c:out value="${row.stok}"/></td> <td><a href="update.jsp?kode=${row.kode}"> <span class='orange'>[update]</span></a> | <a onclick="return confirm('Are you sure to delete?');" href="delete.jsp?kode=${row.kode}"> <span class='orange'>[delete]</span></a> </td> </tr> </c:forEach> </table> <a href="insert.html">Add New Movie</a> ..
E. Delete (2)
Buat sebuah file jsp bernama delete.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Movie Application</title> </head> <body> <sql:update var="deleteMovie" dataSource="${movieds}"> DELETE from movie WHERE kode = ? <sql:param value="${param.kode}"/> </sql:update> <jsp:forward page="index.jsp"/> </body> </html>
E. Delete (3)
Output :

Tutorial JSTL

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tutorial JSTL

Caricato da

Copyright:

Formati disponibili

Last Update : 1 October 2011 19:00

Select All Select with parameter Insert Update Delete

Prepare Database (1)

Prepare Database (2)

Prepare Database (3)

Expand Java DB Klik kanan moviedb Pilih Connect

Prepare Database (3)

Klik kanan pada jdbc:derby://localhost:1527/moviedb [root on

Prepare Database (4)

Buat table movie

Isi data table movie

Prepare Database (5)

Prepare Database (6)

Test : Menampilkan data yang sudah dimasukkan kedalam Table Movie

Create New Web Project (1)

Pilih tab Project File New Project

Pilih Jawa Web Web Application

Create New Web Project (2)

Isi Project Name dengan Movie Application

Klik Next, Pilih Server Apache Tomcat 7.0.14.0

Klik Next, Klik Finish

Create New Web Project (3)

Struktur Web Project MovieApplication

Cara run project : F6

Klik kanan Library Add Library

Pilih JSTL 1.1 Klik Add Library

Klik kanan Library Add JAR/Folder

Pilih derbyclient.jar Klik Open

A. Select All (1)

Ganti isi index.jsp menjadi seperti berikut :

A. Select All (2)

Tambahkan taglib jstl (core dan sql)

A. Select All (3)

Tambahkan DataSource untuk koneksi ke MySQL

A. Select All (4)

Buat query untuk mengambil data dari tabel movie

A. Select All (5)

Buat <tabel> untuk menampilkan data dihal web

A. Select All (6)

B. Select with parameter (1)

Tambahkan sebuah form untuk pencarian judul Movie

B. Select with parameter (2)

Tambahan keyword where pada query untuk pencarian berdasarkan JUDUL

B. Select with parameter (3)

Masukkan HTML File Name insert klik Finish

Isinya adalah form untuk menambahkan movie baru

Buat script internal css didalam index.jsp

Tambahkan kolom Action [update] di . index.jsp <th>GENRE</th>

Tambahkan <form> untuk update dibawah kode <h3>Update Movie: ${select.rows[0].judul}</h3>

Buat sebuah file jsp bernama resultUpdate.jsp

Tambahkan kolom Action [delete] di index.jsp

Buat sebuah file jsp bernama delete.jsp

Potrebbero piacerti anche