1차 프로젝트 

 

login

 

jsp

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>로그인</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">

</head>
<body>

<div class="login-box">
<form action="login.do" method="post">
<c:if test="${errors.idOrPwNotMatch}">
<h5>아이디와 암호가 일치하지 않습니다.</h5>
</c:if>
<div class="user-box">
<p>
	<label>아이디:</label><br/>
	<c:if test="${errors.id}"><h5>ID를 입력하세요.</h5></c:if>
	<input type="text" name="id" value="${param.id}">
	
</p>
</div>

<div class="user-box">
<p>
	<label>암호:</label><br/>
	<c:if test="${errors.password}"><h5>암호를 입력하세요.</h5></c:if>
	<input type="password" name="password">
	
</p>
</div>
    <div style="display: flex; justify-content: center;">
    <button class="buttonS">로그인
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </button>
	
	
	</div>
</form>

</div>

</body>
</html>

 

 

changePwd

JSP

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>암호 변경</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/js.js"></script>

</head>
<body>

<div class="login-box">
<form action="changePwd.do" method="post">
<div class="user-box">
<p>
	<label>현재 암호:</label><br/><input type="password" name="curPwd">
	<c:if test="${errors.curPwd}">현재 암호를 입력하세요.</c:if>
	<c:if test="${errors.badCurPwd}"><h5>현재 암호가 일치하지 않습니다.</h5></c:if>
</p>
</div>

<div class="user-box">

<p>
	<label>새 암호:</label><br/><input type="password" name="newPwd">
	<c:if test="${errors.newPwd}">새 암호를 입력하세요.</c:if>
</p>


</div>

    <div style="display: flex; justify-content: center;">
    <button class="buttonS" id="changePw">암호변경
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </button>
	
	
	</div>
</form>
</div>

</body>
</html>

 

list 게시판

jsp

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<title>게시글 목록</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">

</head>
<body>
<div class="login-box">

<table class= "tables">

	<tr>
		<td>번호</td>
		<td>제목</td>
		<td>작성자</td>
		<td>작성일자</td>
		<td>조회수</td>
	</tr>
	
<c:if test="${articlePage.hasNoArticles()}">
	<tr>
		<td colspan="4">게시글이 없습니다.</td>
	</tr>
</c:if>
<c:forEach var="article" items="${articlePage.content}">
	<tr>
		<td>${article.number}</td>
		
		<td>
		<a href="read.do?no=${article.number}&pageNo=${articlePage.currentPage}">
		<c:out value="${article.title}"/>
		
		</a>
		</td>
		
		
		<td>${article.writer.name}</td>
		<td>${article.regDate}</td>
		<td>${article.readCount}</td>
	</tr>
</c:forEach>
	
	<tr>
		<td colspan="4">
		<div class="buttons">
		<a href="write.do">[게시글쓰기]
		
		</a>
		</div>
		</td>
	</tr>

<div class= "pages" >
<c:if test="${articlePage.hasArticles()}">
	<tr>
		<td colspan="4">
			<c:if test="${articlePage.startPage > 5}">
			<a href="list.do?pageNo=${articlePage.startPage - 5}">[이전]</a>
			</c:if>
			<c:forEach var="pNo" 
					   begin="${articlePage.startPage}" 
					   end="${articlePage.endPage}">
			<a href="list.do?pageNo=${pNo}">[${pNo}]</a>
			</c:forEach>
			<c:if test="${articlePage.endPage < articlePage.totalPages}">
			<a href="list.do?pageNo=${articlePage.startPage + 5}">[다음]</a>
			</c:if>
		</td>
	</tr>
</c:if>
</div>

</table>
</div>

</body>
</html>

 

modify 게시판

jsp

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>게시글 수정</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css?ver=1.3">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/js.js"></script>

</head>
<body>

<div class="login-box">
<form action="modify.do" method="post">
<input type="hidden" name="no" value="${modReq.articleNumber}">
<p>
	<label>번호:</label><br/>${modReq.articleNumber}
</p>
<p>
	<label>제목:</label><br/><input type="text" name="title" value="${modReq.title}">
	<c:if test="${errors.title}">제목을 입력하세요.</c:if>
</p>
<p>
	<label>내용:</label><br/>
	<textarea name="content" rows="5" cols="30">${modReq.content}</textarea>
</p>


    <button class="buttonS" id="modify">글 수정
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </button>


</form>
</div>

</body>
</html>

js  ( ajax 수정 후 알럿 띄우고 list.do로 이동 ) 

$(document).ready(function() {
    $("#modify").click(function(event) {
        event.preventDefault(); // 기본 동작 중단

        // 입력값 확인
        var title = $("input[name='title']").val();
        var content = $("textarea[name='content']").val(); // textarea 입력값 가져오기
        
        if (title === "" || content === "") {
            alert("빈 칸을 모두 입력하세요.");
            return;
        }

        // 회원가입 데이터를 서버로 전송
        $.ajax({
            type: "POST",
            url: "modify.do",
            data: $("form").serialize(),
            success: function(response) {
               
                alert("수정이 완료되었습니다.");
                
                window.location.href = "list.do"; 
            },
            error: function(xhr, status, error) {
                alert("회원가입 중 오류가 발생했습니다. 다시 시도해주세요.");
            }
        });
    });
});

 

 

read 게시판 

jsp ( 게시글삭제 클릭 시 사용자에게 삭제 여부 확인 후 ajax로 이동해서 삭제 알럿 띄우고 list.do로 이동 )  

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<head>
<title>게시글 읽기</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/js.js"></script>

</head>
<body>
<div class="login-box">
<table class= "tables">

<tr>
	<td>번호</td>
	<td>작성자</td>
	<td>제목</td>
	<td>내용</td>
	
</tr>

<tr>
	<td>${articleData.article.number}</td>
	<td>${articleData.article.writer.name}</td>
	<td><c:out value='${articleData.article.title}' /></td>
	<td><u:pre value='${articleData.content}'/></td>

</tr>


<tr>
	<td colspan="2">
		<c:set var="pageNo" value="${empty param.pageNo ? '1' : param.pageNo}" />
		<a href="list.do?pageNo=${pageNo}">[목록]</a>
		<c:if test="${authUser.id == articleData.article.writer.id}">
		<a href="modify.do?no=${articleData.article.number}">[게시글수정]</a>
		<a class="delete-link" data-article-no="${articleData.article.number}">[게시글삭제]</a>
		</c:if>
	</td>
</tr>


</table>
</div>

</body>
</html>

js ( delete ) 

$(document).ready(function() {
    $(".delete-link").click(function(event) {
        event.preventDefault();
        var articleNo = $(this).data("article-no");
        var con = confirm("정말로 이 글을 삭제하시겠습니까?");
        
        if (con) {
            $.ajax({
                type: "GET",
                url: "delete.do",
                data: { no: articleNo },
                success: function(response) {
                    alert("글이 삭제되었습니다.");
                     window.location.href = "list.do";
                    // 삭제된 게시글을 목록에서 제거하거나 다시 불러오는 등의 처리
                    // 예를 들어, 아래와 같이 삭제된 행을 제거할 수 있습니다.
                    // $("#article-" + articleNo).remove();
                },
                error: function(xhr, textStatus, errorThrown) {
                    alert("글 삭제 실패: " + textStatus);
                }
            });
        }
    });
});

 

 

write 게시물 작성

jsp 

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>게시글 쓰기</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css?ver=1.3">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/js.js"></script>

</head>
<body>
<div class="login-box">
<form action="write.do" method="post">

<p>
	<label>제목:</label><br/><input type="text" name="title" value="${param.title}">
	<c:if test="${errors.title}">제목을 입력하세요.</c:if>
</p>
<p>
	<label>내용:</label><br/>
	<textarea name="content" rows="5" cols="30">${param.title}</textarea>
	
</p>


    <button class="buttonS" id="writes">등록
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </button>

</form>
</div>
</body>
</html>

js ( 게시물 작성완료되면 알럿 띄우고 list.do로 이동 )

/*게시물 작성*/
$(document).ready(function() {
    $("#writes").click(function(event) {
        event.preventDefault();
        
        var title = $("input[name='title']").val();
        var content = $("textarea[name='content']").val();
        
        
             if (title === "") {
            alert("제목을 입력하세요.");
            return;
        }
              if (content === "") {
            alert("내용을 입력하세요.");
            return;
        }
        
           if (title === "" || content === "") {
            alert("빈 칸 모두 입력하세요.");
            return;
        }
        
        $.ajax({
            type: "POST",
            url: "write.do",
            data: { title: title, content: content },
            
            
            success: function(response) {
			console.log(response);
   
                    alert("게시글이 등록되었습니다.");
                    // 성공적으로 등록되었으면 페이지 이동
                    window.location.href = "list.do";
                
            },
            
        });
    });
});
저작자표시 (새창열림)

'프로젝트 기반 자바(JAVA) 응용 SW개발자 취업과정' 카테고리의 다른 글

2023-08-21 65일차  (0) 2023.08.21
2023-08-18 64일차  (0) 2023.08.20
2023-08-16 62일차  (0) 2023.08.16
2023-08-11 61일차  (0) 2023.08.11
2023-08-10 60일차  (0) 2023.08.10

+ Recent posts

티스토리툴바