ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 게시판 작동 원리
    JSP 2023. 3. 23. 15:28

    목록에서 게시글로 이동할 때

    게시판 목록창에서 사용자가 게시글을 클릭하면 특정 페이지로 이동할 수 있게 a태그를 이용한다.

    이 때 primary key로 등록된 no 요소를 URL 뒤쪽에 붙여서 넘겨주는 것이 좋다.

     


    게시글에서 데이터 불러오기

    a 태그에 입력된 페이지에서는 파라메터를 받아서 저장하고( number ) , 데이터베이스에 연결해서 해당 자료를 받아온다

     * 이 때 파라메터에 저장된 값의 타입에 주의해야한다.

     

     - 명령문에 데이터를 넣을 때 위와 같은 형태면 불편하다.

    그래서 prepareStatement를 이용할 수 있다.

    prepareStatement사용방법 (교재 P. 401)

    1. Connection.prepareStatement() 메서드를 사용해서 PreparedStatement 생성

    2. preparedStatement의 set 메서드를 사용해서 필요한 값 지정

    3. PreparedStatement의 executeQuery() 또는 executeUpdate() 메서드를 사용해 쿼리 실행

    4. finally 블록에서 사용한 PreparedStatement 닫기

     

    pstmt.setType( 1, number ) -> 첫 번째 ? 에 number 입력

     

     


    글쓰기 방식 ( form 태그 )

     - form 태그에 action을 설정하면 submit 했을 때 해당 URL로 이동하면서 파라미터를 만든다. 

     - 내용을 기입하고 글쓰기 버튼을 누르면

     - 다음과 같이 input에 입력된 데이터가 파라미터에 담겨서 action에 적은 URL 로 이동한다.

    파라미터의 이름은 input 태그의 name 속성으로 적용된다.

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ page import="java.sql.*" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <%	// request한 데이터가 한글일 때 깨지는 현상 방지 ( post 방식으로 보낼 경우 필요함 )
    	request.setCharacterEncoding("utf-8");
    	
    	// input에서 받아온 데이터를 저장
    	String title = request.getParameter("title");
    	String content = request.getParameter("content");
    	
    	Class.forName("com.mysql.jdbc.Driver");
    	Connection conn = null;
    	ResultSet rs = null;
    	PreparedStatement pstmt = null;
    
    try {
    	
    	String jdbcDriver = "jdbc:mysql://localhost:3306/sample?serverTimezone=Asia/Seoul";
    	String dbUser = "root";
    	String dbPass = "1234";
    	
    	conn = DriverManager.getConnection(jdbcDriver,dbUser,dbPass);
    	
    	String query = "insert into board(title,content) values(?,?)";
    	
    	// query 문장을 prepareStatement로 연결해서 시작.
    	pstmt = conn.prepareStatement(query);
    	pstmt.setString(1,title);
    	pstmt.setString(2,content);
    	
    	pstmt.executeUpdate(); // insert를 실행시킴
    	
    	response.sendRedirect("board_form.jsp"); // 데이터베이스에 저장 후 페이지 이동
    
    } catch(SQLException ex){
    	out.println(ex);
    	out.println("DB 연결 실패");
    	
    } finally {
    	if(conn != null){
    		conn.close();
    	}
    }
    
    %>
    </body>
    </html>

     - prepareStatement가 쓰기 더 편한 구문이므로, 사용 방법을 숙지하자

     

     


    게시글에서 수정 및 삭제 등 여러가지 기능

    글쓰기 뿐만 아니라, 수정 및 삭제 버튼을 만들고 싶다면,

    한개의 form 안에 여러개의 button을 제작하는 방법을 알아야한다.

    https://kutar37.tistory.com/entry/%ED%95%9C%EA%B0%9C%EC%9D%98-Form%EC%97%90%EC%84%9C-%EC%97%AC%EB%9F%AC%EA%B0%9C-Submit-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

     

    한개의 Form에서 여러개 Submit 사용하기

    Multiple submit in Single Form한개의 태그에서 에서 여러개의 submit 버튼을 사용할 경우가 있습니다.무엇이 가장 우아한 방법일까요?onclick - 1아마 아래와 같은 코드를 많이 보셨을 겁니다. $("#update").clic

    kutar37.tistory.com

     - 주의 할 점은 action을 공백으로 둬야할 때가 있다.

    <form action="">
    	<table>
    		<tr>
    			<td colspan="2">
    				<%-- 번호 : <input type="text" name="no" value="<%= rs.getInt("no") %>" readonly> --%>
    				번호 : <%= rs.getInt("no") %><input type="hidden" name="no" value="<%= rs.getInt("no") %>">
    				조회수 : <%= rs.getInt("count") %>
    				좋아요 : <%= rs.getInt("good") %>
    			</td>
    		</tr>
    		<tr>
    			<td>제목</td>
    			<td>
    				<input type="text" name="title" value="<%= rs.getString("title") %>">
    			</td>
    		</tr>
    		<tr>
    			<td>내용</td>
    			<td>
    				<textarea name="content" rows="10" cols="30"><%= rs.getString("content") %>"></textarea>
    			</td>
    		</tr>
    		
    		<tr>
    			<td colspan="2">
    				<input type="submit" value="수정" formaction="modifyBoard.jsp">
    				<input type="submit" value="삭제" formaction="removeBoard.jsp">
    			</td>
    		</tr>
    	</table>
    </form>

     - 번호가 새롭게 수정되게 만들기 위해서 input에 2가지 방법이 있다.

     - no 는 다음 행동을 할 때 꼭 보내줘야 테이블의 행을 구분할 수 있기 때문에,

    input에 넣어줘야한다. 다만 보일 필요가 없거나 수정되지 않아야한다면

    위의 2가지 경우를 사용할 수 있다.

     


    삭제

     - 게시글의 no만 받아와서 delete명령을 주면 되기 때문에 비교적 간단하다.

     


    회원가입

     

    양식

    <%@ 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>
    <form action="insertMemberServer.jsp" method="post">
    <table>
     <tr><td>아이디</td></tr>
     <tr><td><input type="text" name="id"></td></tr>
     <tr><td>비밀번호</td></tr>
     <tr><td><input type="password" name="password"></td></tr>
     <tr><td>이름</td></tr>
     <tr><td><input type="text" name="name"></td></tr>
     <tr><td>생년월일</td></tr>
     <tr>
      <td>
       <input type="text" placeholder="년4자" name="year">
       <select name="month">
        <option value="">월</option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
       </select>
       <input type="text" placeholder="일" name="day">
      </td>
     </tr>
     <tr><td>성별</td></tr>
     <tr>
      <td>
       <select name="gender">
        <option value="">성별</option>
        <option value="m">남</option>
        <option value="f">녀</option>
        <option value="n">선택안함</option>
       </select>
      </td>
     </tr>
     <tr><td>이메일</td></tr>
     <tr><td><input type="text" name="email"></td></tr>
     <tr><td>연락처</td></tr>
     <tr><td><input type="text" name="phone"></td></tr>
     <tr><td><button>가입하기</button></td></tr>
    </table>
    </form>
    </body>
    </html>

     - 전달하고자 하는 데이터에 name을 붙여서 submit 해야 server와 연결하는 파일에서 해당 데이터들을 불러올 수 있다.

     

    서버에 연결

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ page import="java.sql.*" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <%	// request한 데이터가 한글일 때 깨지는 현상 방지 ( post 방식으로 보낼 경우 필요함 )
    	request.setCharacterEncoding("utf-8");
    
    	// 사용자가 입력한 값들
    	String id = request.getParameter("id");
    	String password = request.getParameter("password");
    	String name = request.getParameter("name");
    	String birthday = request.getParameter("year")+request.getParameter("month")+request.getParameter("day");
    	String gender = request.getParameter("gender");
    	String email = request.getParameter("email");
    	String phone = request.getParameter("phone");
    	
    	Class.forName("com.mysql.jdbc.Driver");
    	Connection conn = null;
    	ResultSet rs = null;
    	PreparedStatement pstmt = null;
    
    try {
    	
    	String jdbcDriver = "jdbc:mysql://localhost:3306/sample?serverTimezone=Asia/Seoul";
    	String dbUser = "root";
    	String dbPass = "1234";
    	
    	conn = DriverManager.getConnection(jdbcDriver,dbUser,dbPass);
    	
    	String query = "insert into member values(?,?,?,?,?,?,?)";
    	
    	pstmt = conn.prepareStatement(query);
    	pstmt.setString(1,id);
    	pstmt.setString(2,password);
    	pstmt.setString(3,name);
    	pstmt.setString(4,birthday);
    	pstmt.setString(5,gender);
    	pstmt.setString(6,email);
    	pstmt.setString(7,phone);
    	
    	pstmt.executeUpdate();
    	
    	response.sendRedirect("member.jsp");
    
    } catch(SQLException ex){
    	out.println(ex);
    	out.println("DB 연결 실패");
    	
    } finally {
    	if(conn != null){
    		conn.close();
    	}
    }
    
    %>
    </body>
    </html>

     - 회원가입 페이지에서 보낸 데이터를 받아서 저장하고 query 문장으로 만들어서 실행시킨다.

     - 입력한 데이터가 저장된 모습

     


    로그인

    로그인 폼

    <%@ 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>
    
    <form action="LoginServer.jsp">
    <table>
     <tr>
      <td>아이디</td>
      <td><input type="text" name="id"></td>
     </tr>
     <tr>
      <td>비밀번호</td>
      <td><input type="password" name="password"></td>
     </tr>
     <tr>
      <td colspan="2"><button>로그인</button></td>
     </tr>
    </table>
    </form>
    
    </body>
    </html>

     

    로그인 서버

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ page import="java.sql.*" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <%	// request한 데이터가 한글일 때 깨지는 현상 방지 ( post 방식으로 보낼 경우 필요함 )
    	request.setCharacterEncoding("utf-8");
    
    	// 사용자가 입력한 값들
    	String id = request.getParameter("id");
    	String password = request.getParameter("password");
    	
    	Class.forName("com.mysql.jdbc.Driver");
    	Connection conn = null;
    	ResultSet rs = null;
    	PreparedStatement pstmt = null;
    
    try {
    	
    	String jdbcDriver = "jdbc:mysql://localhost:3306/sample?serverTimezone=Asia/Seoul";
    	String dbUser = "root";
    	String dbPass = "1234";
    	
    	conn = DriverManager.getConnection(jdbcDriver,dbUser,dbPass);
    	
    	String query = "select * from member where id = ? and password = ?";
    	
    	pstmt = conn.prepareStatement(query);
    	pstmt.setString(1,id);
    	pstmt.setString(2,password);
    	
    	rs = pstmt.executeQuery();
    
    	if (rs.next()){	// select 결과가 있으면 true
    		// session 영역의 user_id 변수에 id 값 저장.
    		session.setAttribute("user_id" , id);
    		// 메인페이지로 이동
    		response.sendRedirect("LoginForm.jsp");
    	} else {
    		// 회원가입 페이지로 이동
    		response.sendRedirect("memberForm.jsp");
    	}
    
    } catch(SQLException ex){
    	out.println(ex);
    	out.println("DB 연결 실패");
    	
    } finally {
    	if(conn != null){
    		conn.close();
    	}
    }
    
    %>

     ** 로그인에 성공했다면, session에 값을 추가해줘야한다. 그래야 이후에 사용자가 로그아웃 하기 전 까지 로그인이 유지된다.

     

     - 로그인에 성공하면 session에 id 값을 저장 할 수 있다.

     - 다음과 같이 session의 값을 가져올 수도 있다.


    로그인 했을 때만 권한을 주고싶을 때

     - 원래의 글쓰기 페이지

     - 로그인 했을 때만 글을 쓸 수 있는 조건을 줘보자

     - 로그인한 상태가 아니라면 해당 행이 나타나지 않는다.


    로그아웃

     : session.invalidate(); 를 실행시킨다 ( 세션 초기화 )

    'JSP' 카테고리의 다른 글

    커넥션 풀  (0) 2023.03.27
    mysql에서 데이터 가져오기  (0) 2023.03.23
    프론트엔드와 백엔드 / JDBC 세팅  (0) 2023.03.23
    c: 코어태그 와 fmt: 국제화 태그  (0) 2023.03.23
    세션 (session)  (0) 2023.03.22
Designed by Tistory.