[Web] - Day8 : 방명록 만들기

sue·2024년 1월 12일

📒국비학원 [Web]

목록 보기

10/21

1. 방명록(JSP) 만들기

✏️ Test1.

💻 입력

기본 data

function isValidEmail(email) {
	var format = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/;
    if (email.search(format) != -1)
        return true; //올바른 포맷 형식
    return false;
}

String.prototype.trim = function() {
		var TRIM_PATTERN = /(^\s*)|(\s*$)/g;
		return this.replace(TRIM_PATTERN, "");
};

function sendIt() {

    f = document.myForm;

    str = f.name.value;
    str = str.trim();
    if(!str) {
        alert("이름을 입력하세요 !!!");
        f.name.focus();
        return;
    }
    f.name.value = str;

    str = f.email.value;
    str = str.trim();
    if(str) {
		if(!isValidEmail(str)) {
            alert("E-Mail을 정확히 입력하세요 !!!");
            f.email.focus();
            return;
		}
    }
    f.email.value = str;

    str = f.content.value;
    str = str.trim();
    if(!str) {
        alert("내용을 입력하세요 !!!");
        f.content.focus();
        return;
    }
     f.content.value = str;
    
    f.action="/study/guest/save.jsp";
    f.submit();
}

@CHARSET "UTF-8";

* {
	margin:0px;
	padding:0px;
}

body {
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #666666;
	scrollbar-shadow-color: #666666;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-arrow-color: #666666;
	scrollbar-track-color: #ffffff;
	scrollbar-darkshadow-color: #FFFFFF;
	scrollbar-base-color: #FFFFFF;
	font-size: 9pt;
	font-family:굴림;
}

a {
	cursor: hand;
	color: #000000;
	text-decoration: none;
	font-size: 9pt;
	line-height: 150%;
}

a:hover, a:active {
	font-size: 9pt;
	color: #F28011;
	text-decoration: underline;
}

ul {
	list-style: none;
}

td {font-size: 9pt;}

.btn1 {
	font-size: 9pt; 
	color:rgb(0,0,0); 
	background-color:rgb(245,245,245); 
	line-height:16px;
}

.btn2 {   
	color:#000000;
	font: normal 9pt '굴림','trebuchet ms',helvetica,sans-serif;
	background-color:#E4E4E4;
	border:1px solid;
	border-color: #696 #363 #363 #696;
	line-height:16px;
	filter:progid:DXImageTransform.Microsoft.Gradient   
		(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
	padding:1px 6px 1px 6px;
}

.boxTF { 
	border:1px solid; 
	height:15px; 
	margin-top:7px; 
	padding:2px 2px 2px 2px; 
	border-color:#666666; 
	background-color:#ffffff; 
	font-family:"굴림"; 
	font-size:9pt; 
}

.boxTA { 
	border:1px solid; 
	height:150px; 
	margin-top:7px; 
	padding:2px 2px 2px 2px; 
	border-color:#666666; 
	background-color:#ffffff; 
	font-family:"굴림"; 
	font-size:9pt; 
}

com.guest.java

GuestDTO

guest 폴더

data폴더

guest.js /style.css - sendIt()함수

-> 압축파일 copy

📌 GUEST 테이블 생성

⬇️ ① GuestDTO

package com.guest;

public class GuestDTO {

	private int num;
	private String name;
	private String email;
	private String homepage;
	private String content;
	private String created;
	private String ipAddr;
	
	public int getNum() {
		return num;
	}
	public void setNum(int num) {
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
			this.email = email;
	}
	public String getHomepage() {
		return homepage;
	}

	public void setHomepage(String homepage) {

		if (homepage == null)
			this.homepage = "";
		else if (homepage.contentEquals("http://"))
			this.homepage = "";
		else
			this.homepage = homepage;
	}

	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public String getCreated() {
		return created;
	}
	public void setCreated(String created) {
		this.created = created;
	}
	public String getIpAddr() {
		return ipAddr;
	}
	public void setIpAddr(String ipAddr) {
		this.ipAddr = ipAddr;
	}
	
}

⬇️ ② GuestDAO

메서드: 5개

num 최대값
insert
-select
전체 레코드 개수
delete

데이터 넣는 메서드 - insertData()

전체데이터 가져올때 -List (int start, int end)

여기까지가 JDBC임 (독립적)

  
package com.guest;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class GuestDAO {
	
	private Connection conn = null;
	
	public GuestDAO(Connection conn) {
		this.conn = conn;
	}
	
	//Data insert할 때마다 최대 maxNum값
	public int getMaxNum() {
		
		int maxNum = 0;
	
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;
		
		try {
			
			sql = "select nvl(max(num),0) from guest";
			
			pstmt = conn.prepareStatement(sql);
			
			rs = pstmt.executeQuery();
			
			if(rs.next()) 
				maxNum = rs.getInt(1);
			
			rs.close();
			pstmt.close();
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}
		
		return maxNum;
		
	}
	
	// 데이터 insert
	public int insertData(GuestDTO dto) {

		int result = 0;

		PreparedStatement pstmt = null;
		String sql;

		try {
			sql = "insert into guest (num,name,email,homepage,content,";
			sql += "created,ipAddr) values (?,?,?,?,?,sysdate,?)";

			pstmt = conn.prepareStatement(sql);

			pstmt.setInt(1, dto.getNum());
			pstmt.setString(2, dto.getName());
			pstmt.setString(3, dto.getEmail());
			pstmt.setString(4, dto.getHomepage());
			pstmt.setString(5, dto.getContent());
			pstmt.setString(6, dto.getIpAddr());

			result = pstmt.executeUpdate();

			pstmt.close();

		} catch (Exception e) {
			System.out.println(e.toString());
		}
		return result;
	}

	//전체 데이터 
	public List<GuestDTO> getLists(int start, int end){
		
		List<GuestDTO> lists = new ArrayList<GuestDTO>();
		
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;
		
		try {
			sql = "select * from (";
			sql += "select rownum rnum, data.* from (";
			sql += "select num,name,email,homepage,content,";
			sql += "created,ipAddr from guest ";
			sql += "order by num desc) data) "; //전체 데이터 가져올때 최신순부터
			sql += "where rnum>=? and rnum<=?";
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setInt(1, start);
			pstmt.setInt(2, end);
			
			rs = pstmt.executeQuery();
			
			while(rs.next()) {
				
				GuestDTO dto = new GuestDTO();

				dto.setNum(rs.getInt("num"));
				dto.setName(rs.getString("name"));
				dto.setEmail(rs.getString("email"));
				dto.setHomepage(rs.getString("homepage"));
				dto.setContent(rs.getString("content"));
				dto.setCreated(rs.getString("created"));
				dto.setIpAddr(rs.getString("ipAddr"));

				lists.add(dto);
			}

			rs.close();
			pstmt.close();

		} catch (Exception e) {
			System.out.println(e.toString());
		}
		return lists;
	}
	
	//전체 데이터 개수  = getMaxNum과 비슷
	public int getDataCount() {
		
		int totalCount = 0;
	
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;
		
		try {
			
			sql = "select nvl(count(*),0) from guest";
			
			pstmt = conn.prepareStatement(sql);
			
			rs = pstmt.executeQuery();
			
			if(rs.next()) 
				totalCount = rs.getInt(1);
			
			rs.close();
			pstmt.close();
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}
		
		return totalCount;
		
	}
	
	//삭제
	public int deleteData(int num) {
		
		int result = 0;
		
		PreparedStatement pstmt = null;
		String sql;
		
		try {
			
			sql="delete guest where num = ?";
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setInt(1, num); //public int deleteData(int num) { 여기서 num값 받으므로 
			
			result = pstmt.executeUpdate();
			
			pstmt.close();

		} catch (Exception e) {
			System.out.println(e.toString());
		}
		return result;
	}

}

⬇️ ③ guest.jsp

📌⭐

onclick은 바로 ✔️ 함수 호출

href는✔️ javascript: 함수이름 호출

📌 페이징 작업

<%@page import="com.guest.GuestDTO"%>
<%@page import="java.util.List"%>
<%@page import="com.util.MyUtil"%>
<%@page import="com.guest.GuestDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	Connection conn = DBConn.getConnection();
	GuestDAO dao = new GuestDAO(conn);
	MyUtil myUtil = new MyUtil();
	
	List<GuestDTO> lists = null;

	String pageNum = request.getParameter("pageNum");
	
	int currentPage = 1;
	
	if(pageNum!=null){
		currentPage = Integer.parseInt(pageNum);
	}
	
	//전체데이터 수 
	int dataCount = dao.getDataCount(); 
	
	int numPerPage = 3; //5개씩 띄울거임
	int totalPage = 0;
	
	if(dataCount!=0) //데이터가 있으면
		totalPage = myUtil.getPageCount(numPerPage, dataCount);	
	
	if(currentPage>totalPage){
		currentPage = totalPage;
	}
	
	int start = (currentPage - 1) * numPerPage + 1;
	int end = currentPage * numPerPage;
	
	lists = dao.getLists(start, end);
	
	String urlList = cp + "/guest/guest.jsp";
	String pageIndexList = myUtil.pageIndexList(currentPage, totalPage, urlList);
			
	DBConn.close();		
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>방 명 록</title>

<link rel="stylesheet" type="text/css" href="<%=cp%>/guest/data/style.css">

<script type="text/javascript" src="<%=cp%>/guest/data/guest.js"></script>
<script type="text/javascript">

	function isDelete(num) {
		
		if(confirm('이 자료를 삭제하시겠습니까?')){
			location.href="<%=cp%>/guest/delete.jsp?num=" + num;
		}
		
		
	}

</script>

</head>
<body>

<br/><br/>

<table width="560" border="2" cellpadding="0" cellspacing="0"
	bordercolor="#d6d4a6" style="margin: auto;">
<tr height="40">
	<td style="padding-left: 20px;">
	<b>방 명 록</b>
	</td>
</tr>
</table>
<br/>

<form action="" method="post" name="myForm">
<table width="560" border="0" cellpadding="3" cellspacing="0" style="margin: auto;">

	<tr>
		<td colspan="2" height="3" bgcolor="#dbdbdb" align="center">
		</td>
	</tr>

	<tr>
		<td width="20%" height="30" bgcolor="#eeeeee" style="padding-left: 20px;">작성자</td>
		<td width="80%" style="padding-left: 10px;">
			<input type="text" name="name" size="35" maxlength="20" class="boxTF"/>
		</td>
	</tr>

	<tr>
		<td colspan="2" height="1" bgcolor="#dbdbdb" align="center"></td>
	</tr>

	<tr>
		<td width="20%" height="30" bgcolor="#eeeeee" style="padding-left: 20px;">E-Mail</td>
		<td width="80%" style="padding-left: 10px;">
			<input type="text" name="email" size="35" maxlength="50" class="boxTF"/>
		</td>
	</tr>

	<tr>
		<td colspan="2" height="1" bgcolor="#dbdbdb" align="center"></td>
	</tr>

	<tr>
		<td width="20%" height="30" bgcolor="#eeeeee" style="padding-left: 20px;">홈페이지</td>
		<td width="80%" style="padding-left: 10px;">
			<input type="text" name="homepage" size="35" maxlength="50" class="boxTF" value="http://"/>
		</td>
	</tr>

	<tr>
		<td colspan="2" height="1" bgcolor="#dbdbdb" align="center"></td>
	</tr>

	<tr>
		<td width="20%" height="30" bgcolor="#eeeeee" style="padding-left: 20px;">내&nbsp;&nbsp;&nbsp;&nbsp;용</td>
		<td width="80%" style="padding-left: 10px;">
			<textarea rows="7" cols="60" name="content" class="boxTA" style="resize: none; background-color: #ffffff" ></textarea>
		</td>
	</tr>

	<tr>
		<td colspan="2" height="3" bgcolor="#dbdbdb" align="center"></td>
	</tr>
</table>

<table width="560" border="0" cellpadding="3" cellspacing="0" style="margin: auto;">
	<tr align="center">
		<td height="40">
			<input type="button" value=" 등록하기 " class="btn1" onclick="sendIt()"/>
			<input type="reset" value=" 다시입력 " class="btn1" onclick="document.myForm.name.focus();"/>
		</td>
	</tr>
</table>
</form>

<table width="560" border="0" cellpadding="0" cellspacing="0" style="margin: auto;">
	<tr>
		<td colspan="2" height="3" bgcolor="#dbdbdb" align="center">
		</td>
	</tr>
</table>

<%for(GuestDTO dto : lists){%>

<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee" style="margin: auto;">
	<tr height="20">
		<td width="50%" style="padding: 5px;">
<% if(dto.getEmail()==null) {%>
	<b>No <%=dto.getNum() %>. <%=dto.getName() %></b>
	<%} else {%>
	<b>No <%=dto.getNum() %>. <%=dto.getName() %>
	(<a href="mailto:<%=dto.getEmail()%>"><%=dto.getEmail() %></a>) </b>
<%} %>
</td>

<td align="right" style="padding: 5px;">
<% if(!dto.getHomepage().equals("")){ %>
	홈페이지 : <a href="<%=dto.getHomepage() %>" target="_blank"><%=dto.getHomepage() %></a>
	<%} else {
	out.print("&nbsp;");
} %>
</td>
</tr>

<tr height="20">
	<td style="padding: 5px;">
	작성일 : <%=dto.getCreated() %> (<%=dto.getIpAddr() %>)
	</td>
	<td align="right" style="padding: 5px;">
	<a href="javascript:isDelete('<%=dto.getNum() %>')">삭제</a>
	</td>
</tr>

<tr><td colspan="2" bgcolor="#dbdbdb" height="1"></td></tr>

<tr>
	<td bgcolor="#ffffff" colspan="2" height="20" valign="top" style="padding: 5px;">
	<%=dto.getContent().replaceAll("\n", "<br/>") %>
	</td>
</tr>
<tr><td colspan="2" bgcolor="#dbdbdb" height="3"></td></tr>
	
</table>

<%} %>

<% if(dataCount==0){ %>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee" style="margin: auto;">
	<tr align="center" height="50">
	<td>
		<b>등록된 자료가 없습니다.</b>
		</td>
	</tr>
</table>

<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee" style="margin: auto;">
	<tr>
	<td colspan="2" bgcolor="#dbdbdb" height="3"></td>
	</tr>
</table>
<%}else {%>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="margin: auto;">
	<tr align="center" height="50">
	<td>
		<%=pageIndexList %>
		</td>
	</tr>
</table>
<%} %>



</body>
</html>

save = guest.ok버전이라 아래 그림처럼 데이터 DB에 잘 들어가는거 확인할 수 있음

데이터 잘 들어옴

⬇️ ④save.jsp -db에 저장해서 다시 geust로 돌아옴

<%@page import="com.guest.GuestDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>

<jsp:useBean id="dto" class="com.guest.GuestDTO" scope="page"/>
<jsp:setProperty property="*" name="dto"/>

<%
	Connection conn = DBConn.getConnection();
	GuestDAO dao = new GuestDAO(conn);

	int maxNum = dao.getMaxNum();
	
	dto.setNum(maxNum + 1);
	dto.setIpAddr(request.getRemoteAddr());

	dao.insertData(dto);
	
	DBConn.close();
	
	response.sendRedirect(cp + "/guest/guest.jsp");

%>

함수 ⭐ confirm - 확인/취소

⭐ 데이터 잘 넘어오는지 콘솔에 찍어보는 법

잘 삭제된 걸 볼 수있음

⬇️ ⑤ delete.jsp

<%@page import="com.guest.GuestDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	int num = Integer.parseInt(request.getParameter("num"));
	//System.out.print(num+"-----------------------");
	
	Connection conn = DBConn.getConnection();
	GuestDAO dao = new GuestDAO(conn);
	
	dao.deleteData(num);
	
	DBConn.close();
	
	response.sendRedirect(cp+"/guest/guest.jsp");
%>

2. ⭐ Servlet

✏️ Test2.

💻 입력

- Servlet :

기존 jsp는 보완이 없음 / 그래서 가상주소를 맵핑하는 작업 -> 주소가 2개임

- 기본확장자

JSP : .do
Spring : .action

Servlet 구버전 (1)

Test1.java

package com.svt;

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

import javax.servlet.GenericServlet;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

//Servelt 만드는 법 (1) - 구버전
public class Test1 extends GenericServlet{

	@Override
	public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
	
		response.setContentType("text/html;charset=utf-8"); // 아래 클라이언트한테 보내줄거 입력
		
	try {
			//서블릿 = printwriter의 객체 
			PrintWriter out = response.getWriter();
			
			out.print("<html>");
			out.print("<head>");
			out.print("<title>");
			out.print("서블릿 예제 프로그램");
			out.print("</title>");
			out.print("</head>");
			out.print("<body style='font-size:10pt;'>");
			out.print("화면 디자인은 서블릿보다 JSP가 편합니다");
			out.print("</body>");
			out.print("</html>");
					
			
		} catch (Exception e) {

		}
	
	}
}

⭐ Servlet 신버전 (2)

서블릿으로 만든 프로그램의 공용 변수 : 맨 처음 초기값 설정도 가능
: 해당 class를 벗어나면 다른 class에선 사용할 수 없음

모든 공용변수를 쓰고싶으면?! (바뀌지않는 데이터 = final개념)

(1) Test1.class에서도 쓸 수 있고

(2) Test2.class에서도 쓸 수 있음!!

Override - ✔️ doGet / doPost

근데 우리는 get 방식이므로 ✔️ doGet에 적기!!

(어떻게 아냐? ✔️ post방식음 <form action ="">이 있어야함)

overrride - ✔️ doPost방식으로 따로 안써도 /

✔️get이든 post든 둘다 가능하게 쓰는 메서드 방법!!

📌⭐ 서버에 데이터 넘기는 4가지 방법

jsp파일 -> jsp파일

1) post/get방식 -> getParameter로 넘김

2) Session으로 넘김 -> setAttribute

3) hidden 넘김 -> getParameter로 넘김

java 클래스파일 -> jsp파일

4) forward방식 -> - req.setAttribute("변수", 값);

✔️ (4) forward방식

${변수 } : 📌 EL

변수 따로 받지않고 달러+변수명으로 변수를 받아내는 코딩

위의 변수를 다이렉트로 아래처럼 받음
여러개도 가능

✏️ Servlet을 써야하는 이유!!

코딩은 Class(Servlet) <- JSP안에 포함됨

↓
1) setAttribute로 넘기면서 의존성이 약해져서 서로 각각 이점이 생김 2) updated_ok파일이 없어짐 : 안에 html이 원래 없었기때문에
↓

디자인 : HTML.jsp

EL : ${변수} 사용해보기!!

업로드중..

⬇️ servlet.jsp

sue

이전 포스트

[Web] - Day7 : (JSP)게시판 만들기

다음 포스트

[Web] - Day8 : 방명록 만들기

📒국비학원 [Web]

1. 방명록(JSP) 만들기

📌 GUEST 테이블 생성

데이터 넣는 메서드 - insertData()

전체데이터 가져올때 -List (int start, int end)

📌⭐

📌 페이징 작업

함수 ⭐ `confirm` - 확인/취소

⭐ 데이터 잘 넘어오는지 콘솔에 찍어보는 법

2. ⭐ Servlet

- Servlet :

- 기본확장자

Servlet 구버전 (1)

⭐ Servlet 신버전 (2)

Override - ✔️ doGet / doPost

근데 우리는 get 방식이므로 ✔️ doGet에 적기!!

overrride - ✔️ `doPost`방식으로 따로 안써도 /

✔️get이든 post든 둘다 가능하게 쓰는 메서드 방법!!

📌⭐ 서버에 데이터 넘기는 4가지 방법

✔️ (4) forward방식

`${변수 }` : 📌 EL

✏️ Servlet을 써야하는 이유!!

↓

↓

EL : ${변수} 사용해보기!!

[Web] - Day7 : (JSP)게시판 만들기

[Web] Day9 - Servlet

0개의 댓글

[Web] - Day8 : 방명록 만들기

📒국비학원 [Web]

1. 방명록(JSP) 만들기

📌 GUEST 테이블 생성

데이터 넣는 메서드 - insertData()

전체데이터 가져올때 -List (int start, int end)

📌⭐

📌 페이징 작업

함수 ⭐ confirm - 확인/취소

⭐ 데이터 잘 넘어오는지 콘솔에 찍어보는 법

2. ⭐ Servlet

- Servlet :

- 기본확장자

Servlet 구버전 (1)

⭐ Servlet 신버전 (2)

Override - ✔️ doGet / doPost

근데 우리는 get 방식이므로 ✔️ doGet에 적기!!

overrride - ✔️ doPost방식으로 따로 안써도 /

✔️get이든 post든 둘다 가능하게 쓰는 메서드 방법!!

📌⭐ 서버에 데이터 넘기는 4가지 방법

✔️ (4) forward방식

${변수 } : 📌 EL

✏️ Servlet을 써야하는 이유!!

↓

↓

EL : ${변수} 사용해보기!!

[Web] - Day7 : (JSP)게시판 만들기

[Web] Day9 - Servlet

0개의 댓글

함수 ⭐ `confirm` - 확인/취소

overrride - ✔️ `doPost`방식으로 따로 안써도 /

`${변수 }` : 📌 EL