본문 바로가기
Spring

[Spring] 07-3. 활용 코드 예시(Front, .xml 설정파일)

by ssunooo 2024. 10. 11.

 

 

간단한 로그인 / 로그아웃 / 글 작성 / 글 검색 코드(Front, .xml 설정파일)

<index.jsp - 인덱스 페이지>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	response.sendRedirect("login.do");
%>

 

<login.jsp - 로그인 페이지>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
	<style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        table {
            width: 100%;
        }
        td {
            padding: 10px;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<div class="login-container">
    <h2>로그인</h2>
    <form action="login.do" method="POST">
        <table>
            <tr>
                <td>아이디</td>
                <td><input type="text" name="mid" required></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="password" name="password" required></td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="submit" value="로그인">
                </td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>

 

<main.jsp - 메인 페이지(글 목록, 글 검색, 로그아웃)>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
	<style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #ffffff;
        }
        h1 {
            color: #333;
        }
        hr {
            margin: 20px 0;
        }
        form {
            margin-bottom: 20px;
	        display: flex;
	        align-items: center;
	    }
	    select, input[type="text"] {
	        padding: 10px;
	        margin-right: 10px;
	        border: 1px solid #ccc;
	        border-radius: 5px;
	        font-size: 16px;
	    }
	    input[type="submit"], .logout-link, .write-link {
	        background-color: #007BFF;
	        color: white;
	        padding: 10px 15px;
	        border: none;
	        border-radius: 5px;
	        text-decoration: none;
	        font-size: 16px;
	        cursor: pointer;
	        transition: background-color 0.3s;
	    }
	    input[type="submit"]:hover, .logout-link:hover, .write-link:hover {
	        background-color: #0056b3;
	    }
        .board-list {
            list-style-type: none;
            padding: 0;
        }
        .board-item {
            background: #fff;
            margin: 10px 0;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .board-title {
            font-size: 18px;
            font-weight: bold;
        }
        .board-writer {
            color: #555;
            font-size: 14px;
        }
        
    </style>
</head>
<body>

<h1>${userID}님, 안녕하세요! :D</h1>

<hr>

<a href="logout.do" class="logout-link">로그아웃</a>

<hr>
<form action="main.do">
	<select name="condition">
		<option value="SEARCH_WRITER">작성자로 검색</option>
		<option value="SEARCH_CONTENT">글내용으로 검색</option>
	</select>
	<input type="text" name="keyword" placeholder="검색어 입력"/>
	<input type="submit" value="검색"/>
</form>
<hr>

<h3>글 목록</h3>
<ul class="board-list">
	<c:forEach var="data" items="${datas}">
		 <li class="board-item">
            <span class="board-title">${data.content}</span><br>
            <span class="board-writer">작성자: ${data.writer}</span>
        </li>
	</c:forEach>
</ul>

<hr>

<a href="insertBoard.do" class="write-link">글 작성</a>

</body>
</html>

 

<insertBoard.jsp - 글 작성 페이지>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 작성 페이지</title>
	<style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #ffffff; /* 밝은 흰색 배경 */
        }
        h1 {
            color: #333;
            text-align: center; /* 제목 중앙 정렬 */
        }
        form {
            margin: 20px auto; /* 중앙 정렬 */
            max-width: 400px; /* 최대 너비 설정 */
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] {
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }
        input[type="submit"] {
            background-color: #007BFF;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .back-link {
            display: inline-block; /* 블록으로 만들어 여백을 주기 */
            background-color: #007BFF;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            text-align: center;
            text-decoration: none;
            margin-top: 20px; /* 위쪽 여백 */
            transition: background-color 0.3s;
        }
        .back-link:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<h1>글 작성</h1>

<form action="insertBoard.do" method="POST">
    <label for="content">내용</label>
    <input type="text" name="content" id="content" required> 
    <label for="writer">작성자</label>
    <input type="text" name="writer" id="writer" value="${userID}" readonly> 
    <input type="submit" value="글 작성">
</form>

<hr>

<a href="main.do" class="back-link">메인으로 이동</a>

</body>
</html>

 

<info.jsp - 스위트 알럿>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
	Swal.fire({
		title: '${info_title}',
		   text: '${info_text}',
		   icon: '${info_error}'                       
	})
	.then(result => {
   		location.href='${info_path}'
	});
	

</script>


</body>

</html>

 

<web.xml - 서블릿 컨테이너(톰캣)>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="https://jakarta.ee/xml/ns/jakartaee" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd" version="6.0">
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<servlet>
		<servlet-name>ds</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>ds</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>
</web-app>

 

<ds-servlet.xml - 스프링 컨테이너>

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
						http://www.springframework.org/schema/beans/spring-beans.xsd
						http://www.springframework.org/schema/context
						http://www.springframework.org/schema/context/spring-context-4.2.xsd">
	
	<context:component-scan base-package="com.koreait.app.view.board" />
	<context:component-scan base-package="com.koreait.app.view.member" />
		
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="viewResolver">
		<property name="prefix" value="WEB-INF/views/" />
		<property name="suffix" value=".jsp" />
	</bean>	
	
</beans>

 

<applicationContext.xml - 루트 컨테이너>

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
						http://www.springframework.org/schema/beans/spring-beans.xsd
						http://www.springframework.org/schema/context
						http://www.springframework.org/schema/context/spring-context-4.2.xsd">
	
	<context:component-scan base-package="com.koreait.app.biz.board" />
	<context:component-scan base-package="com.koreait.app.biz.member" />
		 
</beans>

 

 

 

2024.10.11

'Spring' 카테고리의 다른 글

[Spring] 07-5. 활용 코드 예시(Service)  (0) 2024.10.11
[Spring] 07-4. 활용 코드 예시(DB)  (0) 2024.10.11
[Spring] 07-2. 어노테이션의 종류(@Repository, @Service)  (1) 2024.10.10
[Spring] 07-1. 어노테이션의 종류(@RequestMapping,@Controller)  (0) 2024.10.10
[Spring] 06. ModelAndView의 정의  (1) 2024.10.08

관련글

티스토리툴바