JSP) Forward /Include action tags - Web page templates

2022. 8. 30. 12:02

<Template1>

main.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>

<jsp:forward page="templateTest.jsp" >
  <jsp:param name="CONTENTPAGE" value="content.jsp"/>
</jsp:forward>

top.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>

Top Menu:
<a href="#">About us</a>
<a href="#">Our products</a>

left.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>

Left Menu: <br>
<a href="#">About us</a><br>
<a href="#">Our products</a>

bottom.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>

Bottom Menu : Location | Privacy policy | Help | Contact

templateTest.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>

<%
   String contentPage = request.getParameter("CONTENTPAGE");
%>

<html>
	<head><title>Template Page</title></head>

	<body>

	<table width="600" border="1" cellpadding="2" cellspacing="0" align=center>
		<tr height=80>
			<td colspan="2">
                <!-- Top -->
				<jsp:include page="top.jsp" flush="false" />

			</td>
		</tr>
		<tr height=300>
			<td width="150" valign="top">
				<!-- Left -->
				<jsp:include page="left.jsp" flush="false" />

			</td>
			<td width="350" valign="top">
				<!-- Body -->
				<jsp:include page="<%= contentPage %>" flush="false" />

			</td>
		</tr>
		<tr height=80>
			<td colspan="2">
				<!-- Bottom -->
				<jsp:include page="bottom.jsp" flush="false" />

		    </td>
		</tr>
	</body>
</html>

To load the menus in the content area, we need to set a link. To load, you need to make 2 more files, one to load the link, the other one, to bring the value.

top.jsp (Edited)

<%@ page contentType = "text/html; charset=euc-kr" %>

Top Menu:
<a href="main.jsp">HOME</a>
<a href="comp_forward.jsp">About us</a>
<a href="goods_forward.jsp">Our products</a>

comp_forward.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>

<jsp:forward page="templateTest.jsp" >
  <jsp:param name="CONTENTPAGE" value="comp.jsp"/>
</jsp:forward>

comp.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>About us</title>
</head>
<body>
About us page
</body>
</html>

goods_forward.jsp

<%@ page contentType = "text/html; charset=euc-kr" %>

<jsp:forward page="templateTest.jsp" >
  <jsp:param name="CONTENTPAGE" value="goods.jsp"/>
</jsp:forward>

goods.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Products</title>
</head>
<body>
Products Page
</body>
</html>

Output

<Template2>

template.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>

<%
	String pagefile = request.getParameter("page");
if (pagefile == null) {
	pagefile = "bestitem";
}
%>

<html>
<head>
<title>Template Test</title>
</head>
<body>
	<table width=960 height=500 border=1 color=gray align=center>
		<tr>
			<td height=43 colspan=3 align=left><jsp:include page="top.jsp" />
			</td>
		</tr>
		<tr>
			<td width=15% align=right valign=top><jsp:include
					page="left.jsp" /></td>
			<td colspan=2 align=center><jsp:include
					page='<%=pagefile + ".jsp"%>' /></td>
		</tr>
		<tr>
			<td width=100% height=40 colspan=3><jsp:include
					page="bottom.jsp" /></td>
		</tr>
	</table>
</body>
</html>

top.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<a href="template.jsp?page=login">Login</a>
<a href="template.jsp?page=join">Join</a>

left.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<center>
<a href="template.jsp?page=newitem">New</a><br><br>
<a href="template.jsp?page=bestitem">Best seller</a><br><br>
</center>

bottom.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<center>Since 2018</center>

join.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<html>
	<head><title>Sign up</title>
	<script>
	 function idcheck(){
		if(document.myform.id.value == ""){
			alert("Insert your ID");
			document.myform.id.focus();
			return false;
		}else{
			window.open("http://www.naver.com", "check", 
				"width=100, height=150, menubar=yes");
		}
	 }

	 function postcode(){
		window.open("http://www.daum.net","win1",
						"width=100,height=150");
	 }

	 function move(){
		if(document.myform.jumin1.value.length == 6)
			document.myform.jumin2.focus();
	 }

	 function check(){
		if(document.myform.id.value == ""){
			alert("Insert your ID.");
			document.myform.id.focus();
			return false;
		}
		if(document.myform.irum.value == ""){
			alert("Insert your name.");
			document.myform.irum.focus();
			return false;
		}
		if(document.myform.pass.value == ""){
			alert("Insert your password.");
			document.myform.pass.focus();
			return false;
		}
		if(document.myform.jumin1.value == ""){
			alert("Insert your ID number1.");
			document.myform.jumin1.focus();
			return false;
		}
		if(document.myform.jumin1.value.length != 6){
			alert("Invalid ID number1.");
			document.myform.jumin1.value="";
			document.myform.jumin1.focus();
			return false;
		}
		if(document.myform.jumin2.value == ""){
			alert("Insert your ID number2.");
			document.myform.jumin2.focus();
			return false;
		}
		if(document.myform.jumin2.value.length != 7){
			alert("Invalid ID number2.");
			document.myform.jumin2.value="";
			document.myform.jumin2.focus();
			return false;
		}
		if(!juminCheck(myform.jumin1.value +										myform.jumin2.value)) {
			alert("Invalid ID number.");
			document.myform.jumin1.value="";
			document.myform.jumin2.value="";
			myform.jumin1.focus();
			return false;
		}	
		if(document.myform.post1.value == ""){
			alert("Insert your postcode1.");
			document.myform.post1.focus();
			return false;
		}
		if(document.myform.post2.value == ""){
			alert("Insert your postcode2.");
			document.myform.post2.focus();
			return false;
		}
		if(document.myform.address.value == ""){
			alert("Insert your address.");
			document.myform.address.focus();
			return false;
		}
		if(document.myform.gender[0].checked ==  false &&
		   document.myform.gender[1].checked ==  false){
			alert("Select your sex.");
			return false;
		}
	
		cnt=0;
		n1 = myform.hobby.length; 
		for(i=0; i<n1; i++){
			if(myform.hobby[i].checked == true)
				cnt++;
		}
		if(cnt < 2){
			alert("Choose more than one hobby.");
			return false;
		}
		if(document.myform.intro.value == ""){
			alert("Fill out about me session");
			document.myform.intro.focus();
			return false;
		}		
		if(myform.job.options[1].selected == false &&
		   myform.job.options[2].selected == false &&
		   myform.job.options[3].selected == false ){	  
			alert("Select your profession.");
			return false;
		}
	 }// check() end

// ID check
function juminCheck(jumin) { //jumin ="8001011234567";
    var total = 0;
    var total2;
    total += parseInt(jumin.substr(0,1)) * 2;
    total += parseInt(jumin.substr(1,1)) * 3;
    total += parseInt(jumin.substr(2,1)) * 4;
    total += parseInt(jumin.substr(3,1)) * 5;
    total += parseInt(jumin.substr(4,1)) * 6;
    total += parseInt(jumin.substr(5,1)) * 7;
    total += parseInt(jumin.substr(6,1)) * 8;
    total += parseInt(jumin.substr(7,1)) * 9;
    total += parseInt(jumin.substr(8,1)) * 2;
    total += parseInt(jumin.substr(9,1)) * 3;
    total += parseInt(jumin.substr(10,1)) * 4;
    total += parseInt(jumin.substr(11,1)) * 5;

    total %= 11;// total = total % 11;
    total2 = 11 - total;
    if(total2 > 9)
        total2 = total2 % 10;

    if(total2 != parseInt(jumin.substr(12,1))) {
        return (false);
    }else{
        return (true);
	}
}
	</script>
	</head>
	<body onLoad="document.myform.id.focus()">
	<form name=myform method=get action=send.jsp 
		  onSubmit="return check()">
	ID : <input type=text size=15 name=id>
		 <input type=button value="IDcheck" onclick="idcheck()"><br>
	Name : <input type=text name=irum><br>
	Password : <input type=password name=pass><br>
	ID No. : <input type=text size=6 maxlength=6						      name=jumin1	onKeyup="move()">-
			   <input type=text size=7 maxlength=7		            name=jumin2><br>
	Postcode : <input type=text size=3 maxlength=3							  name=post1>-
			   <input type=text size=3 maxlength=3                  name=post2>
			   <input type=button value="Search"
					   onClick="postcode()"><br>
	Address : <input type=text size=50 name=address> <br>	
	Sex : <input type=radio name=gender value=m>Male
		   <input type=radio name=gender value=f>Female <br>
	Hobby : <input type=checkbox name=hobby value="Studying"> Studying
		   <input type=checkbox name=hobby value="Reading"> Reading
		   <input type=checkbox name=hobby value="Hiking"> Hiking
		   <input type=checkbox name=hobby value="Fishing"> Fishing <br>
	About me :<textarea rows=10 cols=30 name=intro>Please write about you.</textarea> <br>
	Profession : <select name=job>
				<option>--Select--</option>
				<option value="Professor">Professor</option>
				<option value="Student">Student</option>
				<option value="Programmer">Programmer</option>
		   </select> <br>
	Attach File : <input type=file name=myfile> <br>	
	
	<input type=submit value="Join">
	<input type=reset value="Cancel">
	</form>

	</body>
</html>

login.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<html>
	<head><title>Log in</title>
	<script>
	function check(){
		if(document.myform.id.value == ""){
			alert("Insert your ID.");
			document.myform.id.focus();
			return false;
		}
		if(document.myform.pass.value == ""){
			alert("Insert your password.");
			document.myform.pass.focus();
			return false;
		}		
	}	
	</script>
	</head>
	<body>
	<form onSubmit="return check()" name=myform 
			action=send.jsp method=post>
		<table border=1 width=300 align=center>
			<tr><td>ID</td>
				<td><input type=text name=id></td>
			</tr>
			<tr><td>Password</td>
				<td><input type=text name=pass></td>
			</tr>
			<tr><td colspan=2 align=center>
					<input type=submit value="Log in">
					<input type=reset value="Cancel">
				</td>
			</tr>
		</table>
	</form>
	</body>	
</html>

bestitem.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<b>Best seller list</b>

newitem.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<b>New products</b>

저작자표시 비영리 변경금지

'Codes & Projects' 카테고리의 다른 글

JSP/ Oracle) Members list (0)	2022.08.31
JSP / CSS ) Sign up - JavaBean, Action tags (0)	2022.08.31
JSP) Log in / Shopping cart (0)	2022.08.29
HTML / Javascript / JSP ) Sign up Form2 (0)	2022.08.28
HTML / Javascript /JSP ) Bulletin Board (0)	2022.08.28

agilemeadow Devlog

JSP) Forward /Include action tags - Web page templates

'Codes & Projects' 카테고리의 다른 글

+ Recent posts

티스토리툴바