BAB IV IMPLEMENTASI DAN ANALISIS HASIL
4.1 Antar Muka Pengguna Sistem
Berikut adalah tampilan hasil implementasi rancangan untuk proses login, ditunjukan pada Gambar 4.1 berikut ;
Gambar 4.1 Login
Dibawah ini adalah potongan listing untuk koneksi ke database , disajikan dalam listing 4.1 berikut :
Listing 4.1 DatabaseConnection public class DatabaseConnection {
String url = "jdbc:oracle:thin:@localhost:1521:XE"; String user = "skripsi";
String password = "skripsi";
public Statement st; Connection conn; public DatabaseConnection() { try { Class.forName("oracle.jdbc.driver.OracleDriver"); } catch (ClassNotFoundException ex) {
Logger.getLogger(DatabaseConnection.class.getName()).log(Level.SEVERE,
null, ex); } try {
conn = (Connection) DriverManager.getConnection(url, user,
password);
System.out.println("Your Connection Ready....^.^ \n"); st = conn.createStatement();
} catch (SQLException ex) {
Logger.getLogger(DatabaseConnection.class.getName()).log(Level.SEVERE,
null, ex); } }
public Statement getSt(){ return st;
}
public int updateData(String sql) throws SQLException{ int i=0;
i=st.executeUpdate(sql); return i;
}
public void closeConnection() throws SQLException{ if(conn!=null){
conn.close();
System.out.println("Connection was close"); }
}
public Connection openConnection() throws SQLException{ conn= DriverManager.getConnection(url, user, password); return conn;
}
public ResultSet lihatData(String sql) throws SQLException{ ResultSet rset=null;
rset=st.executeQuery(sql); return rset;
}
Pada listing 4.1 diatas merupakan koneksi ke database, dengan user skripsi dan password skripsi. Untuk port yang dipakai adalah 1521.
Gambar 4.1 merupakan tampilan untuk proses login. Untuk dapat mengakses sistem sampai ke tahap pemesanan maka user harus melakukan proses login terlebih dahulu. User diminta untuk memasukkan username dan password ,maka sistem akan melakukan pengecekan apakah username dan password yang dimasukkan valid atau tidak. Jika tidak, maka user diminta untuk mengulang proses login, dan menampilkan pesan “login GAGAL
Gambar 4.2 Login Gagal
Tetapi jika valid maka user akan mendapatkan tampilan halaman Home sesuai dengan hak akses yang dimiliki. Berikut adalah potongan listing program untuk proses login, disajikan dalam listing 4.2 berikut :
Listing 4.2 ServletLoginController.jsp HttpSession session = request.getSession(true);
session.setMaxInactiveInterval(‐1);
response.setContentType("text/html;charset=UTF‐8"); PrintWriter out = response.getWriter();
String send = request.getParameter("send"); else if (send.equals("login")) {
try {
String user_Name = request.getParameter("username"); String password = request.getParameter("password");
Login_Aksi log = new Login_Aksi();
String level = log.getLevel(user_Name, password); boolean hasil = log.login(user_Name, password); if (hasil = true) {
if (level.equals("admin")) {
session.setAttribute("admin", "administratornya"); RequestDispatcher rd = request.getRequestDispatcher("./Admin_Home.jsp"); rd.forward(request, response); } else if (level.equals("user")) { session.setAttribute("user", "usernya"); RequestDispatcher rd = request.getRequestDispatcher("./User_Home.jsp"); rd.forward(request, response); } else { System.out.println("Login salah"); response.sendRedirect("index.jsp?error=yes"); } } else { System.out.println("salah"); response.sendRedirect("index.jsp?error=yes"); } Penjelasan Listing 4.2
Proses penerimaan variabel yang dimasukkan user dalam halaman login, terjadi pada baris berikut :
String user_Name = request.getParameter("username"); String password = request.getParameter("password");
Untuk penanganan mengenai login selanjutnya menggunakan class Login_Aksi, ditunjukan pada baris berikut :
Login_Aksi log = new Login_Aksi();
Untuk pengecekan user dan mendapatkan hak akses menggunakan method getLevel, dan method login. Terjadi pada baris berikut :
String level = log.getLevel(user_Name, password); boolean hasil = log.login(user_Name, password);
Jika hasil pengecekan valid maka kemudian akan ditampilkan halaman yang sesuai dengan hak akses yang dimiliki, sebagai admin atau user biasa. Proses ini ditunjukan pada baris berikut :
if (hasil = true) { if (level.equals("admin")) { session.setAttribute("admin", level); RequestDispatcher rd = request.getRequestDispatcher("./Admin_Home.jsp"); rd.forward(request, response); } else if (level.equals("user")) { session.setAttribute("user", level); RequestDispatcher rd = request.getRequestDispatcher("./User_Home.jsp"); rd.forward(request, response); }
Jika pada proses di atas data tidak ditemukan, maka terjadi kesalahan dan proses login harus diulang. Proses ini terjadi pada baris berikut :
} else {
response.sendRedirect("index.jsp?error=yes")
4.1.2 Halaman Home Admin
Gambar 4.3 Halaman Home Admin
Gambar 4.3 merupakan halaman tampilan awal ketika proses login berhasil dan hak akses yang dimiliki adalah sebagai admin.Pada halaman ini terdapat beberapa menu yaitu menu Home, Pesan Kursi, Update, Lihat Order dan Menu Sisa Kursi. Pada halaman ini juga ditampilkan form Cari Jalur dengan 4 inputan, yaitu ; Tanggal Berangkat, Stasiun asal, Stasiun tujuan dan Jumlah Kursi. Form ini mendukung admin untuk bisa melakukan pencarian jalur alternatif. Untuk melakukan pencarian, admin diminta untuk memasukan inputan Tanggal Berangkat, Stasiun asal, Stasiun tujuan dan Jumlah Kursi yang tersedia. Kemudian menekan tombol cari. Secara otomatis sistem akan melakukan pencarian. Pada halaman ini juga terdapat tombol untuk melakukan logout, yang terdapat di sebelah kanan atas. Ketika admin ingin keluar dari aplikasi tinggal menekan tombol logout.
4.1.3 Halaman Hasil Pencarian
Gambar 4.4 Halaman Hasil Pencarian
Gambar 4.4 menunjukan halaman hasil pencarian jalur kereta. Halaman ini akan muncul setelah user memasukan semua inputan yaitu ; Tanggal Berangkat, Stasiun asal, Stasiun tujuan dan Jumlah Kursi dan menekan tombol cari. Halaman ini juga mnampilkan informasi keberangkanya pada hari Jumat, 3 Januari 2012 dengan tujuan yaitu GAMBIR-YOGYAKARTA untuk 1 kursi. Sebelah kanan dari tabel hasil pencarian ini terdapat form Cari Jalur, jika ingin melakukan pencarian lagi tinggal melakukan langkah yang sama seperti pada halaman Home. Listing 4.3 di bawah merupakan potongan program untuk melakukan pencarian jalur.
Listing 4.3 Tampil_Jalur.jsp
java.sql.ResultSet result = Aksi.Cari_Aksi.Cari2(tanggal, asal, tujuan, jumlah); out.println("BERANGKAT : " + tgl + " _ _ _ ");
jumlah); while (result.next()) { out.println("<tr class=\"gradeA\" >"); out.println("<td align=\"center\"> </td>"); out.println("<td>" + result.getString("nomor_kereta") + "</td>"); out.println("<td>" + result.getString("nama_kereta") + "</td>"); %>
<td align="center" class="style20"><div ><a
onclick="editkereta(<%= result.getString("nomor_kereta")%>)"
href="Pesan.jsp?ns=<%= result.getString("nomor_kereta")%>‐<%=tanggal%>‐
<%=asal%>‐<%=tujuan%>‐<%=jumlah%>" class="ubahguru" rel="iframe width:740
height:300 modal:true" title="Pesan Kursi...">Pesan</a></div></td> <%
out.print("<form id='deleteform' method='post'
action='servletStasiunController'>");
out.print("<input type='hidden' name='nostasion'>");
out.print("<input type='hidden' name='Job' value='deletestasiun'>");
out.print("</form>");
%>
<td align="center" class ="style20"><div ><a
onclick="deletekeretalihat(<%=result.getString("Nomor_Kereta")%>);" href="#" id="<%=result.getString("Nomor_Kereta")%>">Alternatif</a></div></td> <% out.println("</tr>"); } Penjelasan Listing 4.3
Untuk melakukan pencarian dilakukan dengan memanggil kelas method Cari2, pada kelas Cari Aksi, yang ditunjukan pada baris berikut :
java.sql.ResultSet result = Aksi.Cari_Aksi.Cari2(tanggal, asal, tujuan, jumlah);
Method Cari2 mendapatkan empat input yaitu; tanggal, asal, tujuan, dan jumlah. Listing 4.4 berikut merupakan potongan program method Cari2 :
Listing 4.4 Method Cari2
public static ResultSet Cari2(String tgl, String stasiunA, String stasiunB, String
jumlah) throws SQLException {
DatabaseConnection connection = new DatabaseConnection(); ResultSet rs = null;
String sql = "select k1.nomor_kereta, k1.nama_kereta, k2.nomor_template
from kereta k1,(select t2.nomor_kereta,t2.nomor_template from kereta_template
t2,(select nomor_berangkat as kereta from kursi_temp where
tanggal_berangkat='" + tgl + "' and stasiun<='" + stasiunA + "' and stasiun='" +
stasiunB + "'and flag is null group by nomor_berangkat having
count(nomor_kursi)>='"+jumlah+"')t1 where t2.NOMOR_TEMPLATE=t1.kereta
order by nomor_kereta)k2 where k1.NOMOR_KERETA=k2.nomor_kereta and
k1.arah=1"; rs = (ResultSet) connection.lihatData(sql); return rs; } Penjelasan Listing 4.4
Method Cari2 pada listing 4.4 di atas menunjukan bahwa method ini bertipe ResultSet dan memiliki 4 input bertipe String , ditunjukan pada baris berikut :
public static ResultSet Cari2(String tgl, String stasiunA, String stasiunB, String
jumlah)
Pada baris program berikut menunjukan method Cari2 melakukan koneksi ke database.
DatabaseConnection connection = new DatabaseConnection();
Untuk mendapatkan data yang dicari digunakan perintah perintah query yang ditunjukan pada baris berikut :
String sql = "select k1.nomor_kereta, k1.nama_kereta, k2.nomor_template from
kereta k1,(select t2.nomor_kereta,t2.nomor_template from kereta_template
t2,(select nomor_berangkat as kereta from kursi_temp where tanggal_berangkat='"
+ tgl + "' and stasiun<='" + stasiunA + "' and stasiun='" + stasiunB + "'and flag is null
group by nomor_berangkat having count(nomor_kursi)>='"+jumlah+"')t1 where
t2.NOMOR_TEMPLATE=t1.kereta order by nomor_kereta)k2 where
k1.NOMOR_KERETA=k2.nomor_kereta and k1.arah=1";
Perintah query ini memiliki 4 paramaeter input yaitu tgl, StasiunA, StasiunB dan jumlah .Perintah ini dimulai dengan perintah select untuk memilih atau mengambil data yang kemudian diikuti baris yang dipilih yaitu nomor_kereta, nama_kereta dan nomor_template. Sedangkan k1 dan k2 untuk menandakan bahwa data ini berasal dari tabel yang berbeda. Kemudian diikuti tabel yang dipilih dimulai dengan perintah from. Dan diakhiri dengan perintah where. Nah pada perintah where ini dimasukkan parameter inputnya.Query ini
dikirimkan ke database untuk diproses menggunakan perintah yang ditunjukan pada baris berikut;
rs = (ResultSet) connection.lihatData(sql);
Untuk mengembailkan nilai menggunakan perintah berikut; return rs;
Setelah melakukan pemanggilan method Cari2 program menampilkan hasil pencarian, ditunjukan pada baris berikut ;
while (result.next()) { out.println("<tr class=\"gradeA\" >"); out.println("<td align=\"center\"> </td>"); out.println("<td>" + result.getString("nomor_kereta") + "</td>"); out.println("<td>" + result.getString("nama_kereta") + "</td>");
Tombol pesan pada hasil pencarian, ditampilkan pada baris program berikut ; %>
<td align="center" class="style20"><div ><a onclick="editkereta(<%=
result.getString("nomor_kereta")%>)" href="Pesan.jsp?ns=<%=
result.getString("nomor_kereta")%>‐<%=tanggal%>‐<%=asal%>‐<%=tujuan%>‐
<%=jumlah%>" class="ubahguru" rel="iframe width:740 height:300 modal:true"
title="Pesan Kursi...">Pesan</a></div></td>
<% out.print("<form id='deleteform'
method='post' action='servletStasiunController'>");
out.print("<input type='hidden'
out.print("<input type='hidden' name='Job'
value='deletestasiun'>");
out.print("</form>");%>
<td align="center" class ="style20"><div ><a
onclick="deletekeretalihat(<%=result.getString("Nomor_Kereta")%>);" href="#"
id="<%=result.getString("Nomor_Kereta")%>">Alternatif</a></div></td>
<%
Gambar 4.5 Form Pesan
Gambar 4.5 di atas menampilkan sebuah form pemesanan. Form ini akan muncul jika tombol pesan pada gambar 4.4 ditekan. Form ini menampilkan detail pemesanan. Sebelum form ini dikirimkan untuk melanjutkan proses pemesanan, maka pengguna harus mengisikan data pemesan yang berupa nama dan nomor identitas yang digunakan. Kemudian klik tombol pesan jika setuju untuk memesan, jika tidak maka bisa menekan tombol batal untuk kembali ke menu sebelumnya. Setelah kursi berhasil
dipesan maka akan ditampilkan pesan bahwa pemesanan telah berhasil, dengan ditunjukan pada gambar 4.6 di berikut :
Gambar 4.6 Pemesanan Berhasil. 4.1.4 Halaman Update
Gambar 4.7 Halaman Update
Gambar halaman update di atas adalah halaman update data untuk admin. Halaman ini memiliki empat (5) submenu, yaitu Update Kereta, Update Stasiun, Update Template , Update User dan Insert. Semuanya
memiliki struktur program yang sama, yaitu melakukan query ke dalam database berdasarkan tabel yang akan diubah. Listing potongan program untuk update data stasiun ditampilkan pada listing 4.5 berikut :
Listing 4.5 Update Stasiun <%
java.sql.Statement statement = connectionku.openConnection().createStatement();
%>
<td width="600" align="left" valign="top"><div id="container"
align="center">
<div id="demo">
<form id="form" method="POST" >
<table width="107%" cellpadding="0" cellspacing="0"
class="display" id="tabelSoal">
<thead style="background‐color:inherit" > <tr >
<th style="width:7%" >No urut</th>
<th style="width:20%" >Nomor Stasiun</th> <th style="width:70%" >Nama Stasiun</th> <th style="width:0%" ></th> <th style="width:0%" ></th> <th style="width:0%" ></th> <th style="width:10%" >Ubah</th> <th style="width:10%" >Hapus</th> </tr> </thead> <tbody > <%
while (result.next()) { out.println("<tr class=\"gradeA\" >"); out.println("<td align=\"center\"> </td>"); out.println("<td>" + result.getString("Nomor_Stasiun") + "</td>"); out.println("<td>" + result.getString("Nama_Stasiun") + "</td>"); out.println("<td></td>"); out.println("<td></td>"); out.println("<td></td>"); %>
<td align="center" class="style20"><div ><a
onclick="editgurulihat(<%= result.getString("Nomor_Stasiun")%>)"
href="ubahStasiun.jsp?ns=<%= result.getString("Nomor_Stasiun")%>" class="ubahguru"
rel="iframe width:740 height:300 modal:true" title="Mengubah Data
Guru...">Ubah</a></div></td>
<% out.print("<form id='deleteform' method='post'
action='servletStasiunController'>");
out.print("<input type='hidden'
name='nostasion'>");
out.print("<input type='hidden' name='Job'
value='deletestasiun'>");
out.print("</form>");%>
<td align="center" class ="style20"><div ><a
onclick="deletegurulihat(<%=result.getString("Nomor_Stasiun")%>);" href="#" id="<%=result.getString("Nomor_Stasiun")%>">Hapus</a></div></td> <% out.println("</tr>"); }
statement.close();
Penjelasan Listing 4.5 Update Stasiun
Untuk menampilkan data dari database perlu koneksi, ditunjukan pada baris berikut;
java.sql.Statement statement = connectionku.openConnection().createStatement();
Tabel untuk menempatkan data menggunakan script program sebagai berikut ;
<table width="107%" cellpadding="0" cellspacing="0" class="display"
id="tabelSoal">
<thead style="background‐color:inherit" > <tr >
<th style="width:7%" >No urut</th>
<th style="width:20%" >Nomor Stasiun</th> <th style="width:70%" >Nama Stasiun</th> <th style="width:0%" ></th> <th style="width:0%" ></th> <th style="width:0%" ></th> <th style="width:10%" >Ubah</th> <th style="width:10%" >Hapus</th> </tr>
Untuk mengisi data pada tabel menggunakan method lihatDataStasiun, ditunjukan pada baris berikut ;
java.sql.ResultSet result = entity.stasiun.lihatDataStasiun(); while (result.next()) {
out.println("<tr class=\"gradeA\" >"); out.println("<td align=\"center\"> </td>"); out.println("<td>" + result.getString("Nomor_Stasiun") + "</td>"); out.println("<td>" + result.getString("Nama_Stasiun") + "</td>"); out.println("<td></td>"); out.println("<td></td>"); out.println("<td></td>");
Isi method lihatDataStasiun ditujukan dalam listing 4.6 berikut; Listing 4.6 Method lihatDataStasiun
public static ResultSet lihatDataStasiun() throws SQLException { DatabaseConnection konek = new DatabaseConnection(); ResultSet rs;
String sql = "select * from stasiun"; rs = (ResultSet) konek.lihatData(sql); return rs;
}
Penjelasan Method lihatDataStasiun
Method ini melakukan koneksi ke database, ditunjukan pada baris berikut;
DatabaseConnection konek = new DatabaseConnection();
Method ini melakukan perintah query dan disimpan dalam variabel rs yang bertipe ResultSet, ditunjukan dalam baris berikut;
ResultSet rs;
rs = (ResultSet) konek.lihatData(sql);
Mengembalikan nilai rs, ditunjukan pada baris berikut ;
return rs;
Bersamaan pengisian data pada tabel, juga disisipkan link untuk update atau delete data, ditunjukan pada baris program berikut;
%>
<td align="center" class="style20"><div ><a onclick="editgurulihat(<%=
result.getString("Nomor_Stasiun")%>)" href="ubahStasiun.jsp?ns=<%=
result.getString("Nomor_Stasiun")%>" class="ubahguru" rel="iframe width:740
height:300 modal:true" title="Mengubah Data Guru...">Ubah</a></div></td> <%
out.print("<form id='deleteform' method='post' action='servletStasiunController'>"); out.print("<input type='hidden' name='nostasion'>");
out.print("<input type='hidden' name='Job' value='deletestasiun'>"); out.print("</form>");
%>
<td align="center" class ="style20"><div ><a
onclick="deletegurulihat(<%=result.getString("Nomor_Stasiun")%>);" href="#"
id="<%=result.getString("Nomor_Stasiun")%>">Hapus</a></div></td>
<%
Jika link update di tekan maka akan muncul tampilan yang ditunjukan gambar 4.6 berikut;
Gambar 4.8 Ubah Data Stasiun
Pada tampilan ini muncul data yang akan diubah, dan dua buah tombol yaitu; Batal dan Simpan. Cara untuk melakukan update adalah dengan mengubah inputan yang ada misalnya untuk nama kereta diubah menjadi ARGO JATI kemudian tekan tombol Simpan, maka data akan terupdate.Potongan listing untuk program tampilan di atas ditunjukan dalam listing 4.7 berikut :
Listing 4.7 Ubah Data Stasiun
<%
tool.DatabaseConnection conn = new tool.DatabaseConnection(); try {
String noStasiunnya = request.getParameter("ns"); java.sql.Statement statement = conn.openConnection().createStatement(); java.sql.ResultSet result = entity.stasiun.lihatDataStasiun2(noStasiunnya); while (result.next()) { %>
<input type='hidden' name='Job' value='editStasiun' /> <div >
<table width="610" border="0"> <tr>
<td class="label"> </td>
<td class="label"><label >No Stasiun</label></td> <td colspan="2" class="field"><input onKeyPress="return
checkItsiswa(event)" style="width: 200px; height: 25px" id="nama"
name="NoStasiunnya" type="text" value="<%=result.getString("nomor_stasiun")%>"
maxlength="100" /></td> </tr> <tr>
<td class="label"> </td>
<td class="label"><label >Nama Stasiun</label></td>
<td colspan="2" class="field"><input style="width: 200px; height: 25px"
id="username" name="NamaStasiunnya" type="text"
value="<%=result.getString("nama_stasiun")%>" maxlength="50" /></td> </tr>
<tr>
<td height="47" class="label"> </td>
<td align="right" class="label"><label ></label></td>
<td width="92" align="left" class="field"><input name="Simpan2"
type="submit" class="cee_close" value="Batal"
onClick="parent.$.fn.ceebox.closebox();"/></td>
<td width="374" align="left" class="field"><input name="Simpan"
type="submit" class="cee_close" value="Simpan" /></td> </tr>
</table>
Penjelasan potongan Listing 4.7 Ubah Data Stasiun
Untuk menampilkan data yang akan diubah sistem melakukan pemanggilan method lihatDataStasiun yang ditunjukan pada baris berikut ;
java.sql.ResultSet result entity.stasiun.lihatDataStasiun2(noStasiunnya);
Method ini memerlukan sebuah input, yaitu nomor kereta, sedangkan untuk isi method lihatDataStasiun ditampilkan pada Listing 4.8 berikut;
Listing 4.8 Method lihatDataStasiun2
public static ResultSet lihatDataStasiun2(String noStasiun) throws
SQLException {
DatabaseConnection konek = new DatabaseConnection(); ResultSet rs;
String sql = "select * from stasiun where nomor_stasiun like '" +
noStasiun + "'";
rs = (ResultSet) konek.lihatData(sql); return rs;
}
4.1.5 Halaman Lihat Order
4.1.6 Halaman Sisa Kursi
Gambar 4.10 Halaman Sisa Kursi
Halaman pada Gambar 4.10 di atas untuk menampilkan sisa kursi yang masih kosong untuk tiap kereta. Kursi yang masih kosong ini diambil dengan melihat kursi yang belum terisi sama sekali pada semua setasiun yang dilewati. Untuk menampilkan sisa kursi ini menggunakan baris program sebagai berikut ;
Listing 4.8 Kursi Kosong <div id="bg_clouds"> <div id="main"> <!‐‐ header begins ‐‐> <div id="header"> <div id="logo"> </div> <div id="buttons">
<a href="Admin_Home.jsp" class="but but_t"
title="">Home</a>
<a href="Admin_Update.jsp" class="but" title="">Update</a> <a href="Admin_Lihat_Order.jsp" class="but" title="">Lihat
Order</a>
<a href="Tampil_Kosong.jsp" class="but" title="">Sisa
</div> </div>
<!‐‐ header ends ‐‐>
<div style="height:25px"></div>
<a class="logout" href="Halaman_Logout.jsp" >logout</a> <div style="height:25px"></div> <!‐‐ content begins ‐‐> <div class="cont_top"></div> <div id="content"> <div class="razd_lr"> <div id="right1"> <div style="height:15px"></div> </div> <div id="left_home_template"> <div id="content"> <div style="height:5px"></div> <h3><center>Kursi Kosong</center></h3> <div style="height:5px"></div>
<table width="610" border="0"> <%
tool.DatabaseConnection conn = new
tool.DatabaseConnection(); java.sql.Statement statement = conn.openConnection().createStatement(); java.sql.ResultSet result = entity.cari.cariKosong("9"); while (result.next()) { %> <tr>
<td class="label"> </td>
<td class="label"><label >Argo Lawu </label></td> <td colspan="3" class="field"><input readonly
style="width: 200px; height: 25px; " id="namaKereta"
name="Nama_Keretanya" type="text" value="<%=result.getString("tole")%>" maxlength="50" /></td> <% } java.sql.ResultSet result1 = entity.cari.cariKosong("7"); while (result1.next()) { %> </tr> <tr> <td class="label"> </td> <td class="label"><label >Argo Dwipangga</label></td>
<td colspan="2" class="field"><input readonly
onKeyPress="return checkItsiswa(event)" style="width: 200px; height:
25px" id="nomorKereta"
name="No_Keretanya"
type="text" value="<%=result1.getString("tole")%>" maxlength="100"
/></td> </tr><% } java.sql.ResultSetresult2=entity.cari.cariKosong("1"); while (result2.next()) { %><tr> <td class="label"> </td>
<td class="label"><label >Argo Bromo Anggrek
<td colspan="3" class="field"><input readonly
style="width: 200px; height: 25px; " id="namaKereta"