JSP

DB 전까지의 문제

H_eh 2022. 7. 14. 18:12

 

1.     다음을 보고 코드를 구현해라.

(개발 시 유효성 체크를 할 때 보통 자바스크립트 파일로 설정한다.)

param.js 아이디, 나이는 반드시 입력되어야 하고 나이는 수치 데이터만 입력가능하도록 유효성을 체크하는 자바스크립트 파일
param.jsp param.js 파일을 포함시켜 아이디, 나이에 데이터가 잘 입력되었는지 점검하여 서블릿으로 입력된 값을 받아 전송(html 폼 구조)
param.java Html 문서의 입력 양식에 입력한 내용을 처리하는 서블릿 클래스
더보기

 param.js

/**
 * 아이디, 나이는 필수. 나이는 숫자만 입력 가능
 */

function chk(){
	var uid = addPer.uid.value;
	var age = addPer.age.value;
	
	if((uid == null) || (age == null)){
		alert("아이디와 나이는 필수 입력입니다.");
	} 
	else if(isNaN(age)) {
		alert("나이는 숫자만 입력하세요");
	}
	
	//비밀번호 체크
	var pw1 = addPer.pass1.value;
	var pw2 = addPer.pass2.value;
	
	if(pw1 != pw2){
	    alert("비밀번호가 틀렸습니다. ");
	}
	
	//전화번호
	var tel = addPer.tel.value;
	if(tel.indexOf("-") == -1){
		alert("'-'을 포함해서 입력하세요");
		addPer.tel.focus();
	}
}

param.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>param</title>
    <style>
		body {background-color: aliceblue;}
        table {width: 700px;  }
        table tr th{ border-bottom: 1px solid #666; height: 30px;}
        table tr td{ border-bottom: 1px solid #666; height: 30px;}
        .btnSet {
            text-align: right;
            border: none;
        }
    </style>
</head>
<body>

    <h3>회원가입</h3>
	<form action="Param"  method="post" name="addPer">
	<table>	
        <tr>
            <th>아이디</th>
            <td><input type="text" name="uid"></td>
        </tr>
        <tr>
            <th>나이</th>
            <td><input type="text" name="age"></td>
        </tr>
        <tr>
            <th>비밀번호</th>
            <td><input type="password" name="pass1" required></td>
        </tr>
        <tr>
            <th>비밀번호 확인</th>
            <td><input type="password" name="pass2" required></td>
        </tr>
        <tr>
            <th>전화번호</th>
            <td><input type="tel" name="tel"></td>
        </tr>
        <tr>
            <td colspan="2" class="btnSet">
                <input type="submit" value="회원가입" onclick="chk()">
                <input type="reset" value="취소">
            </td>
        </tr>
    </table>
    </form>

	<script src="http://localhost:8080/A0714db/param.js"></script>
</body>
</html>

Param.java

package bean;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Param")
public class Param extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public Param() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		request.setCharacterEncoding("UTF-8");
		
		String uid = request.getParameter("uid");
		String age = request.getParameter("age");
		String pass1 = request.getParameter("pass1");
		String tel = request.getParameter("tel");
		
		//저장 정보 출력하기
		PrintWriter out = response.getWriter();
		out.print("<body>");
		out.print(uid +"님 반갑습니다." + "<br>");
		out.print("나이는 "+ age +"이고 전화번호는 "+ tel + "입니다. <br>");
		out.print("설정한 비밀번호: "+pass1 + "<br>");
		out.print("</body>");
		out.close();
	}

}

 

 

2.     1번에서 준 입력 폼 param.jsp를 사용해 param table을 생성한다.

        나이(Number), 아이디(Varchar2(20)으로 생성하여 입력한 데이터들을 테이블에서 출력한다.

더보기
  • param.js ,  param.jsp 파일은 1번과 동일
  • param.jsp 의 폼 태그만 수정
    • <form action="paramAddDB.jsp"  method="post" name="addPer">

 

  • paramAddDB.jsp
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>paramAddDB</title>
</head>
<body>
<%
	request.setCharacterEncoding("UTF-8");
%>
<jsp:useBean id="pbean" class="bean.ParamAdd">
	<jsp:setProperty property="*" name="pbean"/>
</jsp:useBean>

<%
	String id = "아이디";
	String pw= "비번";
	String url="jdbc:oracle:thin:@localhost:1521/xepdb1";
	
	try {
		
		Class.forName("oracle.jdbc.driver.OracleDriver");
		
		Connection con = DriverManager.getConnection(url, id, pw);
		String sql = "insert into param1 values(?,?,?,?)";
		
		PreparedStatement pstm = con.prepareStatement(sql);
		
		pstm.setString(1, pbean.getUid());
		pstm.setInt(2, pbean.getAge());
		pstm.setString(3, pbean.getPass1());
		pstm.setString(4, pbean.getTel());
		
		pstm.executeQuery();
		con.close();
		
		
	} catch(Exception e) {
		e.printStackTrace();
	}
%>

<h2>등록 완료</h2>

<!-- DB 테이블
	create table param1(
	  u_id VARCHAR2(50),
	  u_age NUMBER(20),
	  u_pass1 VARCHAR2(50),
	  u_tel VARCHAR2(50)
	);
 -->
</body>
</html>
  • ParamAdd - 자바빈
package bean;

public class ParamAdd {
	
	private String uid;
	private int age;
	private String pass1;
	private String tel;
	
	public String getUid() {
		return uid;
	}
	public void setUid(String uid) {
		this.uid = uid;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getPass1() {
		return pass1;
	}
	public void setPass1(String pass1) {
		this.pass1 = pass1;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	
}

 

 

 

3.     jsp파일을 두개 생성(one.jsp, two.jsp)하여 <jsp:forward>태그, <jsp:param>를 사용하여 two.jsp로 페이지를 이동해 “tom의 취미는 tennis이다”라고 출력해라.

더보기

one.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.net.URLEncoder" %>
<body>
<jsp:forward page="two.jsp">
      <jsp:param value="tom" name="name"/>
      <jsp:param value="tennis" name="hobby"/>
</jsp:forward>
</body>

two.jsp

<body>
	<%= request.getParameter("name") %>의 취미는 <%= request.getParameter("hobby") %>이다
</body>

 

 

 

4.     JSP와 Servlet의 차이점

  • servlet은 java 소스에 html 태그가 삽입 되는 구조    :    ("html 태그")
  • JSP는 html 태그에 java 소스가 삽입되는 구조    :    <% java 소스 %>

 

 

 

 

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