Hy Guyysss,,,
Ketemu lagi nihhh,, aku akan menjelaskan cara untuk membuat tampilan menu utama pada web menggunakan aplikasi NetBeans IDE 8.1.
Cusss.. Langkah-langkah:
- Persiapan awal/mula2:
- Buka aplikasi Netbeans IDE 8.1
- Buat project baru (File -> New Project/CTRL+Shift+N)
- Pilih Java Web -> Web Application -> Next.
- Beri nama Project Name (misal SIA dan tentukan lokasi penyimpanan. Sama kan lokasi penyimpanan di C:\PVA2\) -> Next.
- Ubah Server ke GlassFish Server 4.1.1 dan Java EE Version ke Java EE 5 -> Finish.
- Siapkan 2 buah folder yaitu config dan image(untuk menyimpan gambar yang akan digunakan) di directory C:\SIA\web
- Klik kanan pada Libraries -> Add Library -> pilih MySQL JDBC Driver -> Add Library
- Membuat Index
<%@page
contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql"
uri="http://java.sun.com/jsp/jstl/sql"%>
<sql:setDataSource
var="dataSource"
driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sia"
user="root"
password="" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Pemograman Visual Akuntansi II </title>
<link rel="stylesheet" type="text/css"
href="config/style.css" media="screen"/>
</head>
<body>
<div id="wrap">
<div id="header">
<img
src="image/Logo-BSI1.png">
<h1><a>Sistem
Informasi Akuntansi</a></h1>
<h2>AMIK BSI
"Bekasi" Kampus D</h2>
<h2>Jl. KH. Ahmad No. 8
Raya Setu Cibitung</h2>
<h3>Programmer by. Yesi
Ratnawati</h3>
</div>
<div id="menu">
<ul>
<li><a
href="index.jsp">Home</a></li>
<li><a
href="">About</a></li>
<li><a
href="">Logout</a></li>
</ul>
</div>
<div id="content">
<div
class="left">
<h2>Master
Data</h2>
<ul>
<li><a
href=" ">Akun</a></li>
<li><a
href=" ">Saldo Awal</a></li>
<li><a
href=" ">User</a></li>
<li><a
href=" ">Periode Akuntansi</a></li>
</ul>
<h2>Transaksi</h2>
<ul>
<li><a
href="">Kas Masuk</a></li>
<li><a
href="">Kas Keluar</a></li>
<li><a
href="">Jurnal Umum</a></li>
</ul>
<h2>Informasi
Data</h2>
<ul>
<li><a
href="">Informasi Akun</a></li>
<li><a
href="">Informasi User</a></li>
<li><a
href="">Informasi Kas Kelaur</a></li>
<li><a
href="">Informasi Kas Masuk</a></li>
<li><a
href="">Data Jurnal Umum</a></li>
</ul>
</div>
<div
class="right">
<table
width="100%">
<tr>
<td
valign="top" width="110%">
<%-- isi dari
content sebelah kanan --%>
</td>
</tr>
</table>
<div
class="footer">
Support by <a
href="http://bsi.ac.id/">Junior Programmer
Mahasiswa Program
Studi Komputerisasi Akuntansi</a>
<br>Thanks to
Layout menu utama menggunakan CSS
</div>
</div>
<div style="clear:
both; "> </div>
</div>
</div>
</body>
</html>
- Membuat CSS
- Klik kanan pada folder config yang sudah dibuat -> New -> Other Pilih Web -> Cascading Style Sheet -> Next.
- Ganti File Name dengan nama style -> Finish
- Masukan coding seperti dibawah ini.
* {
margin: 0;
padding: 0;
}
table tr td{
border-color: #000080 ;
}
body{
background: #6295f4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #222;
margin: 0 auto;
}
a{
text-decoration:none;
color: #75B03C;
}
a:hover{
text-decoration: underline;
color: #111;
}
#wrap{
margin: 0 auto;
width: 965px;
}
#header{
height: 130px;
margin: 0 auto;
width: 965px;
background: #009688;
}
#header h1{
font-size: 28px;
letter-spacing: -1px;
padding: 15px 0 0 20px;
color: #fff;
}
#header h1 a{
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover{
color: activecaption;
}
#header h2{
font-size: 19px;
color: #C1DAD7;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header h3{
font-size: 13px;
color: #C1DAD7;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header img{
width: 115px;
height: 115px;
float: right;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
}
#menu{
height: 30px;
margin: 0 auto;
width: 965px;
line-height: 30px;
background: #c7f9f5;
}
#menu ul{
list-style-type: none;
padding-left: 20px
}
#menu ul li{
display: block;
float: left;
}
#menu ul li a{
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 12px;
color: #228b22;
padding: 8px 10px 7px 10px;
}
#menu ul li a:hover{
color: #222;
text-decoration: none;
}
#content{
background-color: #d3fd9d;
padding: 0 10px;
}
.right{
float: right;
width: 745px;
text-align: justify;
padding-top: 5px;
font-size: 12px;
}
.right h2{
font-size: 18px;
font-weight: 100;
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #619894;
}
.right h2 a{
text-decoration: none;
color: #111;
}
.right h2 a:hover{
color: #111;
}
.left{
float: left;
width: 180px;
padding-top: 5px;
}
.left h2 {
margin: 5px 0 0;
padding-left: 10px;
height: 30px;
background: #c7f9f5;
color: #228b22;
font-size: 13px;
}
.left ul{
padding: 10px 0 15px 20px;
list-style-type: square;
color: #75B03C;
}
.left ul li a{
text-decoration: none; font-weight: 600;
}
.left ul li a:hover{
color: #111;
}
.footer{
text-align: center;
font-size: 11px;
color: #aaa;
margin-top: 40px;
border-top: 1px dotted #aaa;
padding-top: 10px;
}
.footer a{
color: blue;
}
footer a:hover{
color: #111;
}
.isi td{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #ffffff;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 8px;
color: #006400;
}
.head td{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
background: #90ee90;
letter-spacing: 1px;
padding: 4px 2px 4px 10px;
color: #000080;
text-align: center;
font: 13px "Tahoma",Arial,sans-serif;
}
.button{
margin-left: 0;
padding: 4px 4px;
border: none;
background: #E9CF16;
font-size: 12px;
color: #ffffff;
font-family: "Tahoma";
width: 70px;
}
.buttonlap{
margin-left: 0;
padding: 4px 4px;
border: none;
background: #E9CF16;
font-size: 13px;
color: #ffffff;
font-family: "Tahoma";
width: 100px
}
.button a:hover{
background: #90ee90;
}
kk mau nanya cara membuat menu login terlebih dahulu terus tampil ke menu utama itu bagaimana yah kk bisa di jawab di email saya mabru_roh@yahoo.co.id
BalasHapus
BalasHapusprosess login jsp
<%
String users=request.getparametter("users");
String pass=request.getparametter("pass");
if(request.getparameter("login")!=null)
{
ResultSet rs;
Statement st;
rs=st.excutequery("select * from login where users='"+users+"' and pass='"+pass+"");
while(rs.next)
{
response.sendRedirect("MenuUtama.jsp");
}
}
%>
klo untuk jurnal umum gimana yah mba caranya?
BalasHapuskak bisa kirimin ke email untk kodingannya ke idamarissa11@yahoo.com
BalasHapus