IT 공부/JSP

html -> jsp

toraa 2022. 7. 25. 17:08

html 1

<!DOCTYPE html>
<!-- 
   html(입력) --------------- > .java ---- > .class(객체, 서블릿)
   
   html(입력) ---- > JSP ---- > .java ---- > .class(객체, 서블릿)

 -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type="text/css" href="css/css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
	.container-md{
		background-color: 	#FAF0E6;
		border: 1px solid #FFA07A;
		box-shadow: 1px 2px 3px gray; 
	}
</style>
<script type="text/javascript">

	function chk() {
		
		if(frm.name.value==""){
			alert("이름을 입력해주세요!");
			frm.name.focus();
			return false;
		}
		if(!frm.age.value){	//값이 있으면 true, 없으면 flase
			alert("나이는 필수입력사항입니당");
			frm.age.focus();
			return false;
		}
		if(isNaN(frm.age.value)){
			alert("나이는 숫자이어야 합니다");
			frm.age.focus();
			frm.age.value="";
			return false;
		}
		
		let ch == false;
		for(i=0; i<=1; i++){
			if(frm.gender[i].checked){
				ch = true;
				break;
			}
		}
		if(ch==false){
			alert("성별을 체크하지 않으셨습니다.ㅇㅅㅇ");
			return false;
		}	
		
		/* 메일수신은 하나이상은 체크되어야 한다 */
		
		let mail_ch = false;
		for(i=0; i<frm.mail.length; i++){
			if(frm.mail[i].checked){
				mail_ch = true;
				break;
			}
		}
		if (mail_ch=false){
			alert("수신메일 항목은 하나이상 선택해야 합니당");
			return false;
		}
		
		/* 취미는 3개이상 선택하면 초과로 처리한다 */
		let n=0;
		for(i=0;i<5;i++){
			if(frm.hobby[i].selected){
				n++;
			}
		}
		if(n>3){
			alert(n+"개를 선택하여 초과되었습니다. 다시선택해주세용");
			return false;
		}
				
		return true;
		
	}
	
</script>
</head>
<body>

   <div class = "container-md mt-5 p-5">
   
      <h2>회원가입</h2>
      <form action="jsp1.jsp" method="post" name="frm" onsubmit="return chk()">
         
    <!--  text  -->  
         이름 :   <input type = "text" name="name"><p>
         나이 :   <input type = "text" name="age"><p>
    <!--  radio -->
         성별 :   <label for = "g1">남자</label>
                  <input type = "radio" id = "g1" name = "gender" value = "남자">
                <label for = "g2">여자</label>
                  <input type = "radio" id = "g2" name = "gender" value = "여자">
     <!-- check box -->          
         수신메일 : <label for = "m1">공지사항</label>
                  <input type = "checkbox" id = "m1" name = "mail" value = "공지" checked>
               <label>광고</label>
                  <input type = "checkbox" id = "m2" name = "mail" value = "광고">
               <label for = "m3">배송</label>
                  <input type = "checkbox" id = "m3" name = "mail" value = "배송">
               <label>스팸</label>
                  <input type = "checkbox" id = "m4" name = "mail" value="스팸"><p>
     <!-- select  -->            
         취미 : <br><select name = "hobby" size = "4" multiple="multiple">
               <option>운동하기</option>
               <option>공부하기</option>
               <option>게임하기</option>
               <option>잠자기</option>
               <option>요리하기</option>
            </select><br>
            
            <input type = "submit" value = "확인">
			
      </form>
   </div>
</body>
</html>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

jsp1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.Enumeration, java.util.Map"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<%
		request.setCharacterEncoding("utf-8");	//요청메세지에 대한 한글인코딩 처리
		
		//폼태그에 있는 name:value 읽어오기
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		String gender = request.getParameter("gender");
		String[] mail = request.getParameterValues("mail");                                                                                                                                                                                                                                                                                                        
		String[] hobby = request.getParameterValues("hobby");
		
		//폼태그의 전체내역조회
		Enumeration<String> names = request.getParameterNames(); //html의 name들만 모아서 enumeration객체로 반환
		Map<String,String[]> m = request.getParameterMap();
	%>
	
	<h2><%=name %>님 환영합니다.</h2>
	<hr>
	<%
		while(names.hasMoreElements()){
			//name
			String n = names.nextElement();
			out.print(n+",");
			//values
			String[]v = m.get(n); //n- name, age, hobby, mail, gender
			for(String str: v){
				out.print(str+",");
			}
		}
	%>
	<br><br>
	나이 : <%=age %><p>
	성별 : <%=gender %><p>
	수신메일 : <%
		
		if(mail != null){
			for(int i=0; i<mail.length; i++){
				if(i==mail.length-1){
					out.print(mail[i]);
				}
				else{
				out.print(mail[i]+",");
				}
			}
		}
	
	%><p>
	
	취미 : <%
		
		if(hobby != null){
			for(int i=0; i<hobby.length; i++){
				if(i==hobby.length-1){			
				out.print(hobby[i]);
			}				
			else{
				out.print(hobby[i]+",");
				}
			}
		}		
		
	%>
	
</body>
</html>

html2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경색상 선택하기</title>
<link rel = "stylesheet" type="text/css" href="css/css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
	.container-md{
		background-color: #FAF0E6;
		border: 1px solid #FFA07A;
		box-shadow: 1px 2px 3px gray; 
	}
</style>
<script type="text/javascript">

	function chk() {
		let ch == false;
	}
	for(i=0; i<=1; i++){
		if(frm.color[i].checked){
			ch = true;
			break;
		}
	}
	if(ch==false){
		alert("색상을 선택하지 않으셨습니다.ㅇㅅㅇ");
		return false;
	}	
		
</script>
</head>
<body>

   <div class = "container-md mt-5 p-5">
   
      <h2>배경색상 선택</h2>
      <form action="jsp2.jsp" method="post" name="frm" onsubmit="return chk()">

	배경색 : 
		<br><select name = "color" size = "5">
               <option>#FFE4E1</option>
               <option>#98FB98</option>
               <option>#AFEEEE</option>
               <option>#FFFFF0</option>
               <option>#E6E6FA</option>
            </select><br>
            
            <input type = "submit" value = "확인">
      </form>
   </div>
</body>
</html>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

jsp2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<% 	request.setCharacterEncoding("utf-8");
		String color = request.getParameter("color"); %>
</head>
<body style="background-color:<%=color %>">
	
	현재 배경 색상 : <%=color %>
	
</body>
</html>

html3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 선택하기</title>
<link rel = "stylesheet" type="text/css" href="css/css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
	.container-md{
		background-color: 	#FAF0E6;
		border: 1px solid #FFA07A;
		box-shadow: 1px 2px 3px gray; 
	}
</style>

</head>
<body>
	<div class = "#">
   
      <h2>구구단을 선택해주세요ㅇㅅㅇ</h2>
      <hr>
      <form action="jsp3.jsp" method="get" name="frm">
		
		<label for="m1">1단</label>
			<input type="radio" id="m1" name="num" value="1"><br>
		<label for="m1">2단</label>
			<input type="radio" id="m2" name="num" value="2"><br>
		<label for="m1">3단</label>
			<input type="radio" id="m3" name="num" value="3"><br>
		<label for="m1">4단</label>
			<input type="radio" id="m4" name="num" value="4"><br>
		<label for="m1">5단</label>	                                                                  
			<input type="radio" id="m5" name="num" value="5"><br>
		<label for="m1">6단</label>	
			<input type="radio" id="m6" name="num" value="6"><br>
		<label for="m1">7단</label>
			<input type="radio" id="m7" name="num" value="7"><br>
		<label for="m1">8단</label>
			<input type="radio" id="m8" name="num" value="8"><br>
		<label for="m1">9단</label>
			<input type="radio" id="m9" name="num" value="9"><br>
			
		
            <input type = "submit" value = "확인">
      </form>
   </div>
</body>
</html>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

jsp3

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 <%	//요청
 	request.setCharacterEncoding("utf-8");
	String num = request.getParameter("num"); 
 %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 결과</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>
<body>
	<h3>구구단 <%= num %>단을 출력합니당</h3>
	<hr>
	<% 
		//응답
		response.setContentType("text/html;charset=utf-8");
		int dan = Integer.parseInt(num);
		for(int su=1; su<=9;su++){
	%>
		<%=num %>*<%= su %> = <%=dan*su %><br>
	<%
		}
	%>

</body>
</html>

html4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 값이 없거나, 숫자가 아닌경우 -->
<style type="text/css">

	#tb{
		border: 1px solid lightgray;
		border-collapse: collapse;
		background-image: url("images/rol5.jpg");
		background-repeat: repeat;
		
		width: 900px;
		height: 350px;
	}
</style>

<script type="text/javascript">

	function chk() {
		
		if(frm.num.value==""){
			alert("숫자를 입력해주세요!");
			frm.num.focus();
			return false;
		}

		if(isNaN(frm.num.value)){
			alert("숫자만 입력해야 합니다");
			frm.num.focus();
			frm.num.value="";
			return false;
		}

</script>
</head>
<body>
	<h1>1부터 더하고 싶은 수를 입력해 주세용</h1>
	<hr>
	<form action="jsp4.jsp" method="post" name="frm" onsubmit="return chk()">
		<table id="tb">
			<tr>
				<td align="center"><input type="number" name="num">까지 더해주세요!</td>
			</tr>
			<tr align="center">
				<td><input type="submit" value="확인"></td>
			</tr>
		</table>
	</form>
</body>
</html>

jsp4

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		request.setCharacterEncoding("utf-8");
		int num = Integer.parseInt(request.getParameter("num"));
		
	%>
	<h3><%=num %>까지 합산한 결과입니당</h3>
	<%
		int sum = 0;
	for(int i=1; i<=num; i++){
		sum += i;
	}
	%>
	<h3>1부터 <%=num %>까지의 합산한 결과는 <%=sum %>입니다.</h3>

</body>
</html>

jsp5 (jsp 하나로 만들기)

<%@page import="java.text.DecimalFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	form{
		background: #FFF5EE;
		width: 400px;
		height: 200px;
		padding-top: 50px;
		text-align: center;
		box-whadow: 2px 2px 3px pink;
	}
</style>
</head>
<body>
<h3>1부터 누적하고 싶은 숫자를 입력해 주세용</h3>
	<hr>
	<form action="jsp5.jsp" name="frm" method="get">
		숫자: <input type="text" name="num"><p>
			<input type="submit" value="확인">
	</form>
	
	<hr>
	<%
		/* 예외처리를 포함하여 구현 */
		int num = 0;
		int sum = 0;
		try{
			num = Integer.parseInt(request.getParameter("num"));
			for(int i=1; i<=num; i++){
				sum += i;
			}
		}catch(Exception e)
		{	out.print("0을 입력하셨습니다.");
		}
		
		DecimalFormat f = new DecimalFormat("#,###.#");	//자릿수 콤마 출력폼 지정	
	%>
	<h2> 1부터 <%=num %>까지의 합산한 결과는 <span><%=f.format(sum) %></span>입니다.</h2>
	
</body>
</html>

'IT 공부 > JSP' 카테고리의 다른 글

내장객체  (0) 2022.07.28
Response(응답)  (0) 2022.07.28
JSP  (0) 2022.07.27
기본 처리 이론  (1) 2022.07.27
로그인 폼  (1) 2022.07.26