프로젝트를 만든다.
dbutil은 db정보임..
회원과 방명록(글번호, 아이디, 제목, 내용, 작성시간)이 있다...
table.sql에 db정보를 써놓았다...!!
방명록은 게시판과는 다르게 목록에 내용까지 쫙 다 보인다!!(게시판은 제목만 보이고 클릭하면 상세나오는거고)
보통 도메인만 치고 엔터를 치면 기본적으로 was는 index 페이지를 찾는다.
그렇기 때문에 index.html을 만든다.
근데 context-root이름을 바꿔주어야한다. 지정을 안하면 프로젝트 이름이랑 같은게 컨텍스트루트이다.
//write.html 파일
//여기서는 유효성 체크를 해주고 전송(submit)을 해준다.
//서버쪽에다 글쓰기좀 해줘라고 요청하는것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSAFY - 글작성</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
mark.sky {
background: linear-gradient(to top, #54fff9 20%, transparent 30%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#registerBtn").click(function () {//등록 버튼을 누른다면!
if (!$("#userid").val()) {//근데 아이디가 없으면
alert("아이디 입력!!!!");
return;
} else if (!$("#subject").val()) {//제목이 없다면
alert("제목 입력!!!!");
return;
} else if (!$("#content").val()) {//이름이 없다면
alert("내용 입력!!!!");
return;
} else {
//writeform안에 입력한 모든 데이터 들을 서버에 전송하겠다!
//어디로? action="~이 안에 url 작성~" action속에 입력한 곳으로 (근데 이걸 attr로 관리할수있다)
//그러면 articlewrite이라는 서블릿(글등록하는 서버) 작성해야한다!
$("#writeform").attr("action", "/guestbook1_servlet/articlewrite").submit();
}
});
});
</script>
</head>
<body>
<div class="container text-center mt-3">
<div class="col-lg-8 mx-auto">
<h2 class="p-3 mb-3 shadow bg-light"><mark class="sky">글쓰기</mark></h2>
<form id="writeform" class="text-left mb-3" method="post" action="">
<div class="form-group">
<label for="userid">작성자ID:</label>
<input type="text" class="form-control" id="userid" name="userid" placeholder="작성자ID...">
</div>
<div class="form-group">
<label for="subject">제목:</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="제목...">
</div>
<div class="form-group">
<label for="content">내용:</label>
<textarea class="form-control" rows="15" id="content" name="content"></textarea>
</div>
<div class="text-center">
<button type="button" id="registerBtn" class="btn btn-outline-primary">글작성</button>
<button type="reset" class="btn btn-outline-danger">초기화</button>
</div>
</form>
</div>
</div>
</body>
</html>
//guestbookwrite.java
//서버쪽에서 처리하는 거임
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ssafy.util.DBUtil;
//만약 404면 오타나서 나는 오류
//500이면 서버쪽 오류
//404에러뜨면 웹서블릿이름 확인해보기
@WebServlet("/articlewrite")
public class GuestBookWrite extends HttpServlet {
private static final long serialVersionUID = 1L;
private DBUtil util = DBUtil.getInstance();//db객체 얻어옴
//index에서 클릭하고 작성페이지에서 post방식으로 폼을 작성하기 때문에
//제목 내용이 길기 때문에 post방식으로 작성했음
//그렇기 때문에 doPost방식을 사용한다.
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. data get
//클라이언트가 입력해서 파라미터로 보낸것(request)을 가져온다!!
//무조건 string으로만 받을 수 있다.
//html에서 <input type="text" name="userid"> <<이 name으로 구분!!!
//보낼때도 font가 깨지지만 받을때도 깨진다.
request.setCharacterEncoding("utf-8"); // post에서만..get에서는 하면 안된다!!
String id= request.getParameter("userid");
String subject = request.getParameter("subject");
String content = request.getParameter("content");
System.out.println(subject);//콘솔창에 찍어본다...
// 2. logic
//db에 집어넣으려면 jdbc 필요
//insert하려면 connection과 preparedstatement 필요
Connection conn = null;
PreparedStatement pstmt = null;
int cnt = 0; //insert가 되었는지 안되었는지 판단하기 위한 변수
try {
conn = util.getConnection();//db 연결
String sql = "insert into guestbook (userid, subject, content) \n";
sql += "values (?, ?, ?)";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, id);
pstmt.setString(2, subject);
pstmt.setString(3, content);
cnt = pstmt.executeUpdate();//insert의 개수를 return 해준다. 정상적으로 insert되었으면 1리턴, 안되었으면 0리턴
} catch (SQLException e) {
e.printStackTrace();
} finally {
util.close(pstmt, conn); //둘다 닫아버림
}
// 3. response page(응답페이지) >> 성공 또는 실패를 출력한다.
//"같은거는 \"로 모두 바꿔주어야한다!!!!!
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println(" <meta charset=\"UTF-8\">");
out.println(" <title>SSAFY - 글목록</title>");
out.println(" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
out.println(" <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\">");
out.println(" <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>");
out.println(" <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js\"></script>");
out.println(" <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js\"></script>");
out.println(" <script type=\"text/javascript\">");
out.println(" $(document).ready(function () {");
out.println(" $(\"#mvListBtn\").click(function () {");
out.println(" location.href = \"/guestbook1_servlet/listarticle\";");
out.println(" });");
out.println(" $(\"#mvRegisterBtn\").click(function () {");
out.println(" location.href = \"/guestbook1_servlet/guestbook/write.html\";");
out.println(" });");
out.println(" });");
out.println(" </script>");
out.println("</head>");
out.println("<body>");
out.println(" <div class=\"container text-center mt-3\">");
out.println(" <div class=\"col-lg-8 mx-auto\">");
if(cnt != 0) {
out.println(" <div class=\"jumbotron\">");
out.println(" <h1 class=\"text-primary\">글작성 성공 ^^</h1>");
out.println(" <p class=\"mt-4\"><button type=\"button\" id=\"mvListBtn\" class=\"btn btn-outline-dark\">글목록 페이지로 이동</button>");
out.println(" </p>");
out.println(" </div>");
} else {
out.println(" <div class=\"jumbotron\">");
out.println(" <h1 class=\"text-danger\">글작성 실패 T.T</h1>");
out.println(" <p class=\"mt-4\"><button type=\"button\" id=\"mvRegisterBtn\" class=\"btn btn-outline-dark\">글쓰기 페이지로 이동</button>");
out.println(" </p>");
out.println(" </div>");
}
out.println(" </div>");
out.println(" </div>");
out.println("</body>");
out.println("</html>");
}
}
'BackEnd > 백엔드' 카테고리의 다른 글
| 1007 - 백엔드 실습 (0) | 2021.10.10 |
|---|---|
| 1007 백엔드 개념, 절대경로,상대경로 (0) | 2021.10.10 |
| 1007 서블릿 프로젝트1(helloservlet을 웹에 출력해보기) (0) | 2021.10.09 |
| 1007 서블릿(Servlet) 파일 생성하기 + 기본예제 (0) | 2021.10.09 |
| 1007 웹 아키텍쳐 (0) | 2021.10.09 |