Tinggalkan komentar

Membuat Tree Menu dengan JSP

Kali ini saya akan memberikan tutorial tentang bagaimana cara membuat tree menu yang saya buat menggunakan source yang sudah ada hanya saja saya memberikan cara bagaimana menggunakan source tree tersebut, anda mungkin ada yang sudah tau atau belum tentang

Apa itu Tree Menu ?  

Sesuai dengan namanya jika kita terjemahkan dalam bahasa indonesia Tree itu pohon pohon itu mempunyai cabang dan cabangnya bisa lebih dari satu dari cabang-cabang itu akan tumbuh daun dan yang akan kita buat nanti daun itu adalah menu yang nanti punya link masing-masing, dan tree menu ini pastinya sudah familiar untuk para pengguna komputer, jika di komputer tree menu terdapat di explorer, dengan cara klik kanan pada tombol start dan klik explorer maka akan tampil halaman explore yang di samping sebelah kiri terdapat menu tree itu.

Membuat Database Tree Menu

Untuk membuat Tree Menu ini pertama kita membuat databasenya terlebih dahulu, karena Tree Menu yang kita buat ini bersifat dynamic yang bisa kita tambah dan hapus kapan saja tanpa membuka source code, disini saya menggunakan Mysql di xampp. buat database dengan nama db_tree seperti gambar berikut

setelah database di buat, buat table dengan nama tree

kemudian buat field-field nya

jika tidak jelas gambarnya, klik disini  Setelah table dibuat isikan dengan table dengan data berikut

database dan tabel telah kita buat sekarang kita buat programnya dengan menggunakan eclipse

Membuat Program Java & JSP Tree Menu

Buat file dengan mengklik File > New > Dynamic Web Project

Setelah project dibuat buat pakage baru dengan nama com.connections.dbconection dan buat class koneksi dengan nama dbconnection.java dan buat koneksi mysql sepeti pada koneksi tutorial Membuat koneksi java ke Mysql

dan buat pakage satu lagi dengan nama com.handler dan buat class di pakage tersebut dengan nama TreeQuery.java dan masukan source berikut

package com.handler;
import java.sql.*;

public class TreeQuery {

   public String queryTree() {
String fill = “”;
fill = “select * from tree”;
    return fill;
}

}

class ini digunakan untuk memanggil query untuk menampilkan data dari database yang akan di jadikan menu.  selanjutnya kita buat 4 folder untuk menyimpan class jsp dan yang lainya dengan nama  images dan Tree kemudian download file-filenya disini kemudian extract file yang hasilnya akan ada file seperti ini

Copy ketiga folder tersebut dalam workspace project anda, misalnya nama project MyProject maka buka folder itu kemudian cari folder dengan nama WebContent copykan folder css dan script disitu sedangkan folder img copykan di dalam folder images setelah semua di copykan kembali pada eclipse lalu klik kanan pada project anda dan klik refresh maka folder itu akan tampil dalam project anda. lalu sekarang kita buat file JSP nya, klik kanan pada folder WebContent lalu pilih New > Folder lalu beri  nama Tree, kemudian buat jsp dengan nama TreeMenu.jsp  dan masukan kode berikut

<%@ page language=“java” contentType=“text/html; charset=ISO-8859-1”

import=“com.connections.dbconnection.*,java.sql.*,com.heandler.*”
pageEncoding=“ISO-8859-1” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;
<html>
<head>
<meta http-equiv=“Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>JavaScript Tree Menu</title>
<% Connection con = dbconnection.buildConnection();
Statement  st  = con.createStatement();
String   query = new TreeQuery().queryTree();
ResultSet  rs  = st.executeQuery(query);
int no = 0;
%>
<meta http-equiv= “Content-Type” content= “text/html; charset=ISO-8859-1”>

<link rel= “StyleSheet” href= “../css/tree.css” type= “text/css”>

// mengambil css dari file yang telah di download dan di copykan tadi
<script type= “text/javascript” src= “../script/tree.js”></script>

// mengambil tree.js dari file yang telah di download dan di copykan tadi
<script type= “text/javascript”>

// Membuat variabel javascript untung menampung data dari java

var no   = null;
var nodeId = “”;
var parentNodeId = “”;
var nodeName  = “”;
var nodeUrl   = “”;

// Membuat array untuk menampung seluruh baris data yang di ambil
var Tree = new Array;

// Proses looping pengambilan data dari database

<%   while(rs.next()) {
no = no+1;
String nocode    = rs.getString(“node_code”)== null?“”:rs.getString(“node_code”)+”-“;
String noid      = rs.getString(“node_id”);
String noparent  = rs.getString(“node_parent”)== null?“1”:rs.getString(“node_parent”);
String noname    = rs.getString(“node_name”);
String nourl     = rs.getString(“node_url”)== null?“#”:rs.getString(“node_url”);

%>

// Memasukan data dari java ke variabel javascript
no      = <%= no %>;
nodeId  = “<%=noid %>“;
parentNodeId = “<%=noparent%>”;
nodeName = “<%=noname%>”;
nodeUrl  = “<%=nourl%>”;

<%
if(noparent.equals(“0”) && noid.equals(“1”)) {
no = no-1;

%>
Tree[0]  = nodeId+“|”+parentNodeId+“|”+nodeName+“|”+nodeUrl;
//  alert(“Tree[0] = “+nodeId+”|”+parentNodeId+”|”+nodeName+”|”+nodeUrl);
<% } else {%>
// alert(“Tree[“+no+”] = “+nodeId+”|”+parentNodeId+”|”+nodeName+”|”+nodeUrl);
Tree[no]  = nodeId+“|”+parentNodeId+“|”+nodeName+“|”+nodeUrl;

<% } %>
<%
no = no-1;
no++;
} %>

</script>
</head>
<body>
<div class=“tree”>
<script type=“text/javascript”>
<!–

// Membuat menu dengan pemanggilan array Tree yang tadi di buat
createTree(Tree);
//–>
</script>
</div>
</body>
</html>

Jika sudah selesai simpan dan clean Project dengan cara klik Project > Clean tunggu sampai proses clean selesai, jika tidak ada error klik kanan pada file TreeMenu.jsp pilih Run As > Run on Server maka hasilnya akan seperti ini

Sekian Tutorial untuk Membuat Tree menu, untuk inputan menunya nanti di buat di tutorial selanjutnya. 🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: