1. index.html 코드 보완
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href=' https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js'></script>
</head>
<body>
<!--
container, container-fluid
p 1~5단게가 있음 (padding)
ex) p-1 : 4방향에 1단계 padding을 준다
p+t, r, b, l
ex) pt-5 : top 5단계 padding
p+x, y
ex) py-3 : top, bottom 3단계 padding
m(margin)도 똑같이 있음
-->
<header class="container-fluid bg-warning">
<div class="container">
<div class="pt-3">
<a href="#" class="text-decoration-none">
<h1><span class="fs-2">더조은 아카데미</span> <span class="fs-6">AWS 클라우드 기반 자바&스프링&리액트 풀스택 개발자 양성</span></h1>
</a>
</div>
<nav class="navbar navbar-expand-sm">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">게시판</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">갤러리</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container bg-success p-3 pb-5 text-white">
<!-- row를 꼭 만들어야함 -다음 숫자는 최대 12 -->
<div class="row">
<section class="col-lg-9 bg-danger">
<h3>본문 시작 구간</h3>
<article>공간1</article>
<article>공간2</article>
<article>공간3</article>
<article>공간4</article>
</section>
<aside class="col bg-primary">
<div class="bg-white p-3 d-grid">
<p class="text-muted small">사이트를 더 안전하고 편리하게 이용하세요</p>
<button class="btn btn-success btn-block mb-3"><span class="fs-3">TJ</span> <span class="ml-3">로그인</span></button>
<div>
<a href="#" class="text-decoration-none small">아이디</a>
<a href="#" class="text-decoration-none small">비밀번호 찾기</a>
<a href="#" class="text-decoration-none small float-end">회원가입</a>
</div>
</div>
</aside>
</div>
</main>
<footer class="container-fluid bg-warning p-5 text-center">
<address>copyright @ TJ academy</address>
</footer>
</body>
</html>jsp파일의 선언문을 html파일 최상단행에 적고 index.jsp파일 생성 후 복붙
src/main/java 폴더에 도메인을 거꾸로 쓴 controller 폴더 생성 후 index.java 생성
package com.chanyongyang.jsp.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/index")
public class Index extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getRequestDispatcher("WEB-INF/jsp/index.jsp").forward(req, resp);
}
}service 구현
WEB-INF 폴더에 jsp폴더 생성, 하위폴더인 common 폴더 생성
common 폴더에 footer, head, header.jsp 파일 생성
index.jsp 파일을 jsp폴더로 옮김
index.jsp 파일의 head, header, footer 분할
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file="common/head.jsp" %>
</head>
<body>
<%@ include file="common/header.jsp" %>
<main class="container bg-success p-3 pb-5 text-white">
<div class="row">
<section class="col-lg-9 bg-danger">
<h3>본문 시작 구간</h3>
<article>공간1</article>
<article>공간2</article>
<article>공간3</article>
<article>공간4</article>
</section>
<aside class="col bg-primary">
<div class="bg-white p-3 d-grid">
<p class="text-muted small">사이트를 더 안전하고 편리하게 이용하세요</p>
<button class="btn btn-success btn-block mb-3"><span class="fs-3">TJ</span> <span class="ml-3">로그인</span></button>
<div>
<a href="#" class="text-decoration-none small">아이디</a>
<a href="#" class="text-decoration-none small">비밀번호 찾기</a>
<a href="#" class="text-decoration-none small float-end">회원가입</a>
</div>
</div>
</aside>
</div>
</main>
<%@ include file="common/footer.jsp" %>
</body>
</html>
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<footer class="container-fluid bg-warning p-5 text-center">
<address>copyright @ TJ academy</address>
</footer>head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href=' https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js'></script>header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<header class="container-fluid bg-warning">
<div class="container">
<div class="pt-3">
<a href="#" class="text-decoration-none">
<h1><span class="fs-2">더조은 아카데미</span> <span class="fs-6">AWS 클라우드 기반 자바&스프링&리액트 풀스택 개발자 양성</span></h1>
</a>
</div>
<nav class="navbar navbar-expand-sm">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">게시판</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">갤러리</a>
</li>
</ul>
</nav>
</div>
</header>
web.xml 수정
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>member_board</display-name>
<welcome-file-list>
<welcome-file>index</welcome-file>
</welcome-file-list>
</web-app>
※ login 만들기
1. vscode login.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href=' https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js'></script>
</head>
<body>
<!--
container, container-fluid
p 1~5단게가 있음 (padding)
ex) p-1 : 4방향에 1단계 padding을 준다
p+t, r, b, l
ex) pt-5 : top 5단계 padding
p+x, y
ex) py-3 : top, bottom 3단계 padding
m(margin)도 똑같이 있음
-->
<header class="container-fluid bg-warning">
<div class="container">
<div class="pt-3">
<a href="#" class="text-decoration-none">
<h1><span class="fs-2">더조은 아카데미</span> <span class="fs-6">AWS 클라우드 기반 자바&스프링&리액트 풀스택 개발자 양성</span></h1>
</a>
</div>
<nav class="navbar navbar-expand-sm">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">게시판</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">갤러리</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container p-3 pb-5">
<div class="card">
<div class="card-header p-5">
<h2>LOGIN</h2>
</div>
<div class="card-body">
<form method="post">
<div class="mb-3 mt-3">
<label for="id" class="form-label">ID</label>
<input type="text" class="form-control" id="id" placeholder="Enter id" name="id">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pw">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</main>
<footer class="container-fluid bg-warning p-5 text-center">
<address>copyright @ TJ academy</address>
</footer>
</body>
</html>
2. jsp폴더에 하위폴더인 member 폴더 생성
3. index.jsp를 복사하여 member폴더에 붙여넣고 이름을 login.jsp로 변경
4. login.jsp의 main부분을 전부 지우고 login.html의 main부분을 복사하여 붙여넣기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file="../common/head.jsp" %>
</head>
<body>
<%@ include file="../common/header.jsp" %>
<main class="container p-3 pb-5">
<div class="card">
<div class="card-header p-5">
<h2>LOGIN</h2>
</div>
<div class="card-body">
<form method="post">
<div class="mb-3 mt-3">
<label for="id" class="form-label">ID</label>
<input type="text" class="form-control" id="id" placeholder="Enter id" name="id">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pw">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</main>
<%@ include file="../common/footer.jsp" %>
</body>
</html>5. src폴더에 하위폴더인 도메인역순.member.controller 생성
6. Login.java 파일 생성 후 전에 만들었던 Login.java파일을 복붙
package com.chanyongyang.jsp.member.controller;
import java.io.IOException;
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 javax.servlet.http.HttpSession;
//import dao.MemberDao;
//import vo.MemberVo;
@WebServlet("/member/login")
public class Login extends HttpServlet {
// private MemberDao dao = new MemberDao();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getRequestDispatcher("/WEB-INF/jsp/member/login.jsp").forward(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// req.setCharacterEncoding("utf-8");
// String id = req.getParameter("id");
// String pw = req.getParameter("pw");
// MemberVo vo = dao.selectOne(id);
// if(vo == null) {
// // 아이디 없음
// System.out.println("아이디 없음");
// }
// else if(!vo.getPw().equals(pw)) {
// // 비밀번호 틀림
// System.out.println("비밀번호 틀림");
// }
// else {
// // 로그인 성공
// HttpSession session = req.getSession();
// session.setAttribute("member", vo);
// }
// resp.sendRedirect("login");
}
}7. 처음에 x가 열심히 나오는데 주로 경로문제이니 경로를 열심히 바꿔주고, 필요없는부분을 우선 주석해준다.
8. 고럼 예쁜 로그인 페이지가 서버에서 구동된당
9. <폴더 및 파일 위치 확인>
* 서버가 터졌거나 알 수 없는 오류들이 게속 나올때 빠른해결책
1. 다이나믹 웹 프로젝트를 하나 더 만든다.
2. 내가 작업한 작업물들을 열심히 옮긴다.
3. 새로만든곳에서 index.java 파일을 실행해본다.
4. 파일들을 하나씩 인식하는지 못하는지 먼저 체크해야한다. (Servlet 부터 시작)
1. lib 파일에 롬복, 마리아디비 복붙
2. dao, filter, util, vo 복붙 후 이름 변경
3. controller의 login.java 파일 주석해제 및 import
package com.chanyongyang.jsp.member.controller;
import java.io.IOException;
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 javax.servlet.http.HttpSession;
import com.chanyongyang.jsp.dao.MemberDao;
import com.chanyongyang.jsp.vo.MemberVo;
//import dao.MemberDao;
//import vo.MemberVo;
@WebServlet("/member/login")
public class Login extends HttpServlet {
private MemberDao dao = new MemberDao();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getRequestDispatcher("/WEB-INF/jsp/member/login.jsp").forward(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String id = req.getParameter("id");
String pw = req.getParameter("pw");
MemberVo vo = dao.selectOne(id);
if(vo == null) {
// 아이디 없음
System.out.println("아이디 없음");
}
else if(!vo.getPw().equals(pw)) {
// 비밀번호 틀림
System.out.println("비밀번호 틀림");
}
else {
// 로그인 성공
HttpSession session = req.getSession();
session.setAttribute("member", vo);
}
resp.sendRedirect(req.getContextPath());
}
}
'Servlet, JSP' 카테고리의 다른 글
| 23-03-06 (2) bootstrap (0) | 2023.03.06 |
|---|