Implementasi Halaman Web untuk Pengunjung

BAB II LANDASAN TEORI

IMPLEMENTASI SISTEM

IV.4 Implementasi Halaman Web e-Commerce Motor Honda

IV.4.1 Implementasi Halaman Web untuk Pengunjung

1. HalamanHome

Gambar 4.4Implementasi HalamanHome

Halaman home adalah halaman awal yang akan dijumpai oleh pengunjung apabila pada halaman index memilih tombol “Enter Now”. Halaman ini berisi ucapan selamat datang kepada pengunjung. Halaman ini juga menampilkan index berita terkini dan tipe-tipe motor yang terbaru. Pengunjung yang sudah pernah melakukan pemesanan motor Honda dapat melihat status pemesanannya dengan mengisi kolom email dan sandi yang disediakan pada halaman home, apabila terjadi kesalahan dalam pengecekan status pemesanan maka pesan kesalahan akan ditampilkan

juga pada halaman home ini, yaitu tepat dibawah form pengecekan status pemesanan.

Dibutuhkan dua dokumen JSP sebagai program untuk menangani form pengecekan status pada halaman home, yaitu dokumen cek_status.jsp dan lihat_status.jsp. Listing kedua dokumen tersebut adalah sebagai berikut :

<%@ page import="java.sql.*" %> <%@ include file="server_db.jsp" %> <%!

public boolean cek(String mail, String sandi) {

if (mail == null || sandi == null) return(false); if (mail.equals("") || mail.equals(""))return(false); boolean salah = false; boolean sandi_benar = false; try {

Class.forName("org.gjt.mm.mysql.Driver"); }

catch (Exception ex) { salah = true; } if (!salah) { Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); }

catch (Exception ex) { salah = true; }

if (!salah) {

ResultSet query = null; try {

Statement my = connect.createStatement(); query = my.executeQuery(

"SELECT sandi FROM pemesan WHERE email = '" + mail + "'"); }

catch (Exception ex) { salah = true; } if (!salah) { String sand = ""; try { if (query.next()) } sand = query.getString("sandi");

catch (Exception ex) { salah = true; } if (!salah) if (sandi.equals(sand)) sandi_benar = true; } } } } %> return(sandi_benar);

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.util.*" import="java.sql.*" errorPage="" %>

<%@ include file="cek_status.jsp" %>

String imel = empty(request.getParameter("mail")); String sandi = empty(request.getParameter("sandi"));

if (! cek(imel, sandi)) {

String mess = "data yang anda masukkan masih salah"; response.sendRedirect("home.JSP?mess=" + mess +

"&mail=" + imel);

} else {

boolean salah = false;

try {

}

Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

}

if (!salah) {

Connection connect = null; try {

connect =

DriverManager.getConnection(database, user, pass); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; }

if (!salah) {

ResultSet query = null; try {

Statement my = connect.createStatement();

query = my.executeQuery(

"SELECT pemesan.nama,pesan.status FROM pemesan,pesan WHERE "+

"pemesan.no_pemesan =

pesan.no_pemesan AND pemesan.sandi =\"" + sandi + "\""); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; } if (!salah) { try { while (query.next()) { String nama = query.getString("nama"); String status = query.getString("status"); String dstatus =""; if(status.equals("pesan")) {

dstatus="masih proses pesan"; }

else if(status.equals("bayar")) {

dstatus="Motor telah dibayar"; }

else

dstatus="Motor telah dikirim"; %>

<table>

<tr><td>Nama Lengkap : <%=nama%></td></tr> <tr><td>Status Pemesanan Anda :

<%=dstatus%></td></tr> </table> <% } } catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; } } } } } %>

2. Halaman menu “New Release”

Gambar 4.5Implementasi Halaman Menu “New Release” Halaman ini menampilkan semua daftar tipe motor Honda yang terbaru.

Pengunjung dapat melihat lebih detail lagi tentang tipe motor yang terbaru dengan meng-klik menu “lihat detail”.

Berikut adalah potongan script untuk menampilkan daftar tipe motor terbaru :

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" import="java.io.File" errorPage="" %>

<%@ include file="server_db.jsp" %>

boolean salah = false;

try {

Class.forName("org.gjt.mm.mysql.Driver"); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; } if (!salah) {Connection connect = null;

try { connect = DriverManager.getConnection(database, user, pass); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; }

if (!salah) {

ResultSet query = null; try { Statement my = connect.createStatement(); query = my.executeQuery( "SELECT kategori.*,spek_motor.*,tipe_baru.no,tipe_baru.kd_kat FROM kategori,spek_motor,tipe_baru " + "WHERE kategori.kd_kat =

tipe_baru.kd_kat AND kategori.kd_kat = motor.kd_kat ORDER BY tipe_baru.no");

}

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

} if (!salah) {

try {

while (query.next()) {

String kd_kat = query.getString("kd_kat"); String kat = query.getString("kategori"); String info =query.getString("info"); String nama = query.getString("nm_motor"); int harga =query.getInt("harga");

%><table width="500" style="border:#993300 1px solid "><tr> <td width="200" height="69" class="tblRow1"><%

String berkasFoto =

getServletContext().getRealPath("/")+

"/ahm_yogya/"+"/"+"/img/" + kd_kat.toLowerCase() +".jpg";

File berkas = new File(berkasFoto);

if (berkas.exists())out.println("<IMG SRC = " + erkasFoto + ">"); %>

<br>Harga (per unit) : <%=harga%></td>

<td width="250" height="69" class="tblRow2">TIPE MOTOR : <%=kat%><br><%=info%><br><a

href='<%=response.encodeURL("lihat_det_kat.jsp?kate="+kat)%>' >lihat detail</a></td></tr></table><%

} }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; } } } } if (salah) { } %>

String mess = "Ada kesalahan dalam mengakses database"; response.sendRedirect("mess.jsp?mess=" + mess);

3. Halaman menu “All Type”

Halaman ini menampilkan semua kategori motor Honda. Pengunjung dapat melihat detail kategori dan pilihan motor apa saja yang termasuk dalam kategori ini dengan meng-klik nama kategori motor Honda.

Berikut adalah potongan scriptuntuk menampilkan semua kategori motor Honda :

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" import="java.io.File" errorPage="" %>

<%@ include file="server_db.jsp" %>

boolean salah = false; try {

Class.forName("org.gjt.mm.mysql.Driver"); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

}

if (!salah) {

Connection connect = null;

try {connect = DriverManager.getConnection(database, user, pass); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; }

if (!salah) {

ResultSet query = null; try {

Statement my = connect.createStatement(); query = my.executeQuery(

"SELECT * FROM kategori order by kategori"); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

if (!salah){ try {

while (query.next()) {

String kd_kat = query.getString("kd_kat"); String kat =query.getString("kategori"); String info =query.getString("info"); %>

<tr><td width="20" valign="top"><img src="img/a3.gif" width="25" height="25"></td><td width="150" class="tblRow1"> <a href='<%=response.encodeURL ("lihat_det_kat.jsp?kate="+kat)%>'><%=kat%></a><br></td> <td width="360" class="tblRow2"><%=info%><br></td> </tr> <% } } catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; } } } } if (salah) { } %>

String mess = "Ada kesalahan dalam mengakses database"; response.sendRedirect("mess.JSP?mess=" + mess);

4. Halaman menu “Lihat Detail” Kategori Motor

Halaman ini menampilkan fitur utama yang dimiliki oleh tipe motor yang dipilih. Juga menampilkan pilihan motor apa saja yang termasuk dalam tipe motor/kategori yang dipilih.

Gambar 4.7 Implementasi Halaman Menu “Lihat Detail” Kategori Motor Berikut adalah potongan script untuk menampilkan detail kategori motor Honda

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" import="java.io.File" errorPage="" %>

<%@ include file="server_db.jsp" %>

String kat = empty(request.getParameter("kate")); if (kat == "") {

String mess = "Tidak ada nilai kategori yang diberikan"; response.sendRedirect("mess.jsp?mess=" + mess); }

kat = kat.toUpperCase();

boolean salah = false;

try {

}

Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true; }

if (!salah) {

Connection connect = null; try {

connect =

DriverManager.getConnection(database, user, pass); }

catch (Exception e){

out.println("Kesalahan pada: " + e); salah = true; } %>  <% if (!salah) {

ResultSet query = null; try

{

Statement my = connect.createStatement(); query = my.executeQuery (

"SELECT kategori.*, fitur.* FROM kategori, fitur" + " WHERE kategori.kd_kat = fitur.kd_kat AND

kategori.kategori = \"" + kat + "\""); }

catch (Exception e) {

out.println("Kesalahan ada pada : " + e); salah = true; } if (!salah) { try { while (query.next()) {

String kode =query.getString("kd_kat"); kat =query.getString("kategori");

String kd_fitur =query.getString("kd_fitur"); String fitur =query.getString("fitur"); %>

<tr><td width="97" height="22" style="border: #993300 1px solid"><div align="center"><%

String berkasFoto =getServletContext().getRealPath("/")+ "/ahm_yogya/"+"/"+"/img/" + kd_fitur.toLowerCase() + ".jpg"; File berkas = new File(berkasFoto);

if (berkas.exists())

out.println("<img src = " + berkasFoto + " height=80 width=80>");

</div></td><td width="10"></td> <td width="295">

<font face="verdana" size="-2"><%=fitur%></font></div> </td> </tr> <% } } catch (Exception e) {

out.println("Kesalahan pada : " + e); salah = true;

} } } %>  <%

if (!salah) { ResultSet query = null; try

{

Statement my = connect.createStatement(); query = my.executeQuery (

"SELECT kategori.*, spek_motor.*, real_motor.* FROM kategori, spek_motor, real_motor" +

" WHERE kategori.kd_kat = motor.kd_kat AND

spek_motor.kd_spek_motor=real_motor.kd_spek_motor AND"+ " kategori.kategori = \"" + kat + "\"");

}

catch (Exception e) {

out.println("Kesalahan ada pada : " + e); salah = true; } if (!salah) { try { while (query.next()) {

String nama =query.getString("nm_motor"); String kode_real =query.getString("kd_motor");

String warna =query.getString("warna"); int harga =query.getInt("harga"); int stok = query.getInt("stok"); %>

<td width="157" height="82" ><div

align="center"><br><%=nama%><br><%=warna%><br></div></td> <td width="139" ><div align="left">

Harga : Rp <%=harga%>

<br>Stok Tersedia : <%=stok%> unit <br><a href='<%=response.encodeURL("lihat_det_mtr.jsp?kd="+kode_real)% >'>lihat detail</a></div></td></tr> <% } } catch (Exception e) {

out.println("Kesalahan pada : " + e); salah = true; } } } %> </table> <% } %>

5. Halaman menu “Lihat Detail” Motor Honda

Gambar 4.8 Implementasi Halaman Menu “Lihat Detail” Kategori Motor Pada halaman ini pengunjung bisa memilih menu “Beli Sekarang” untuk memesan motor yang sedang ditampilkan.

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" import="java.io.File" errorPage="" %>

<%@ include file="server_db.jsp" %>

String kode_real = empty(request.getParameter("kd")); if (kode_real == "") {

String mess = "Tidak ada kode real yang diberikan"; response.sendRedirect("mess.jsp?mess=" + mess); }

boolean salah = false;

try {

}

Class.forName("org.gjt.mm.mysql.Driver");

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

}

if (!salah) {

Connection connect = null; try {

pass);^{connect = DriverManager.getConnection(database, user,} }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

}

if (!salah) {

ResultSet query = null; try

{

Statement my = connect.createStatement(); query = my.executeQuery(

"SELECT real_motor.*,spek_motor.*,kategori.* FROM real_motor,spek_motor,kategori" +

" WHERE real_motor.kd_spek_motor = motor.kd_spek_motor AND motor.kd_kat = kategori.kd_kat AND"+

" real_motor.kd_motor = \"" + kode_real + "\""); }

catch (Exception e) {

out.println("Kesalahan ada pada : " + e); salah = true; } if (!salah) { try { while (query.next()) { kode_real =query.getString("kode");

String warna = query.getString("warna"); String nama =query.getString("nm_motor"); String tahun =query.getString("tahun"); String plt =query.getString("plt"); String berat =query.getString("berat"); String rangka =query.getString("rangka"); String mesin =query.getString("tipe_mesin"); String daya = query.getString("daya"); String pelumas =query.getString("pelumas"); String kp_bb =query.getString("kap_bb"); String volum =query.getString("volume");

String jarak_roda =query.getString("jarak_roda"); String ban_dpn = query.getString("ban_dpn"); String ban_blkng =query.getString("ban_blkng"); String rem_dpn =query.getString("rem_dpn"); String rem_blkng =query.getString("rem_blkng"); String sus_dpn =query.getString("sus_dpn"); String sus_blkng =query.getString("sus_blkng"); String kopling = query.getString("kopling"); String pola_gigi = query.getString("pola_gigi"); String starter = query.getString("starter"); String velg = query.getString("velg"); String aki = query.getString("aki"); String busi = query.getString("busi");

String sis_api = query.getString("sistem_pengapian"); String torsi = query.getString("torsi");

String garansi = query.getString("garansi"); int harga = query.getInt("harga");%>

<table width="200" height="200"> <tr> <td>Harga/unit : <%=harga%> </td> </tr> <tr> <td height="128"> <% String berkasFoto = getServletContext().getRealPath("/")+ "/ahm_yogya/"+"/"+"/img/" + kode_real.toLowerCase() + ".jpg"; File berkas = new

File(berkasFoto); if (berkas.exists())

out.println("<img src = " + berkasFoto + " height=200 width=250>");

</td></tr></table> <p class="judul"><a

href='<%=response.encodeURL("pesanan.jsp?kd="+kode_real)%>'>Bel i Sekarang</a></p><table width="509" align="center"

style="border:#993300 1px solid "><tr>

<td width="180" class="tblRow1">Warna motor</td> <td width="317" class="tblRow1"><%=warna%></td></tr> <tr><td class="tblRow2">Tahun Produksi</td> <td class="tblRow2"><%=tahun%></td></tr> <tr><td class="tblRow1">Panjang*Lebar*Tinggi</td> <td class="tblRow1"><%=plt%></td></tr> <tr><td class="tblRow2">Berat Kosong</td> <td class="tblRow2"><%=berat%></td></tr> <tr><td class="tblRow1">jarak sumbu roda</td> <td class="tblRow1"><%=jarak_roda%></td></tr>

<tr><td class="tblRow2">ukuran ban depan</td> <td class="tblRow2"><%=ban_dpn%></td></tr> <tr><td class="tblRow1">ukuran ban belakang</td> <td class="tblRow1"><%=ban_blkng%></td></tr> <tr><td class="tblRow2">tipe suspensi depan</td> <td class="tblRow2"><%=sus_dpn%></td></tr>

<tr><td class="tblRow1">tipe suspensi belakang</td> <td class="tblRow1"><%=sus_blkng%></td></tr> <tr><td class="tblRow2">rem depan</td> <td class="tblRow2"><%=rem_dpn%></td></tr> <tr><td class="tblRow1">rem belakang</td> <td class="tblRow1"><%=rem_blkng%></td></tr> <tr><td class="tblRow2">tipe rangka</td> <td class="tblRow2"><%=rangka%></td></tr>

<tr><td class="tblRow1">kapasitas bahan bakar</td> <td class="tblRow1"><%=kp_bb%></td></tr> <tr><td class="tblRow2">tipe mesin</td> <td class="tblRow2"><%=mesin%></td></tr> <tr><td class="tblRow1">volume langkah</td> <td class="tblRow1"><%=volum%></td></tr> <tr><td class="tblRow2">daya maksimum</td> <td class="tblRow2"><%=daya%></td></tr> <tr><td class="tblRow1">torsi maksimum</td> <td class="tblRow1"><%=torsi%></td></tr>

<tr><td class="tblRow2">kapasitas minyak pelumas mesin</td>

<td class="tblRow2"><%=pelumas%></td></tr> <tr><td class="tblRow1">kopling</td> <td class="tblRow1"><%=kopling%></td></tr>

<tr><td class="tblRow2">pola pengoperan gigi</td> <td class="tblRow2"><%=pola_gigi%></td></tr> <tr><td class="tblRow1">Sistem pengapian</td> <td class="tblRow1"><%=sis_api%></td></tr> <tr><td class="tblRow2">starter</td> <td class="tblRow2"><%=starter%></td></tr> <tr><td class="tblRow1">Velg</td> <td class="tblRow1"><%=velg%></td></tr> <tr><td class="tblRow1">aki</td> <td class="tblRow1"><%=aki%></td></tr> <tr><td class="tblRow2">garansi</td> <td class="tblRow2"><%=garansi%></td></tr> <% } } catch (Exception e) {

out.println("Kesalahan pada : " + e); salah = true; } } } } %>

6. Halaman data pesanan

Halaman ini akan ditampilkan apabila pengunjung melakukan pemesanan motor dengan meng-klik menu “Beli Sekarang” pada halaman detail motor. Pada halaman ini juga disediakan form untuk memasukkan data-data pemesan.

Gambar 4.9Implementasi Halaman Data Pesanan danForm Input Data Pemesan

Berikut adalah potongan script untuk menampilkan detail data pesanan motor danform input data pemesan :

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" import="java.io.File" errorPage="" %>

<%@ include file="server_db.jsp" %>

String kode = empty(request.getParameter("kd")); if (kode == "") {

String mess = "Tidak ada kode yang diberikan"; response.sendRedirect("mess.jsp?mess=" + mess); }

boolean salah = false;

try {

Class.forName("org.gjt.mm.mysql.Driver"); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

}

if (!salah) {

Connection connect = null; try {

connect = DriverManager.getConnection(database, user, pass); }

catch (Exception e) {

out.println("Kesalahan pada: " + e); salah = true;

}

if (!salah) {

ResultSet query = null; float tot = 0;

try{

Statement my = connect.createStatement(); query = my.executeQuery(

"SELECT real_motor.*,spek_motor.* FROM

real_motor,spek_motor WHERE real_motor.kd_spek_motor = motor.kd_spek_motor AND"+

" real_motor.kd_motor = \"" + kode + "\""); }

catch (Exception e) {

out.println("Kesalahan ada pada : " + e); salah = true; } if (!salah) { try { while (query.next()) { kode =query.getString("kd_motor");

String nama =query.getString("nm_motor"); String warna =query.getString("warna"); int harga =query.getInt("harga"); int pot =query.getInt("pot_harga");

<td width="169" height="39" valign="middle"><div align="center">Tipe Motor </div></td>

<td width="147" valign="middle"><div align="center">Warna</div></td>

<td width="120" valign="middle"><div align="center">Harga</div></td>

</tr>

<input type="hidden" name="stk" id="stk" value="<%=stok %>"> </tr> </table> </div> </td> <td rowspan="6"> </td> <td rowspan="6"> </td> </tr> <tr> <td height="21"><div align="right">Sub-total : Rp_ </div></td>

<td height="21"> <input name="sub" type="text" id="sub" value="<%=harga %>" readonly=""></td>

</tr> <tr>

<td height="30" valign="middle"><div align="right">Potongan Harga : Rp_ </div></td>

<td height="30" valign="middle"><input name="pot_hrg" type="text" id="pot_hrg" value="<%=pot %>" readonly=""></td>

</tr> <tr>

<td height="42" valign="top"><div align="right">Total : Rp_ </div></td>

Dalam dokumen E-COMMERCE MOTOR HONDA MENGGUNAKAN TEKNOLOGI JSP DAN MySQL( Studi kasus : Astra Honda Motor cabang Yogyakarta) (Halaman 114-141)