20240216 스프링4일차(util, error,modal)
2024. 2. 16. 10:29ㆍ2023.11.21-2024.05.31
Util.java
package org.mask.util;
import org.springframework.stereotype.Component;
//2024.02.16
@Component
public class Util {
public int str2Int(String str) {
try {
return Integer.parseInt(str);// 123A
} catch (Exception e) {
return 0;
}
}
}
BoardController.java
//2024-02-15 psd 0216.no잡기
@GetMapping("/detail")
public String detail(HttpServletRequest request) {
//오는 no잡기
String no = request.getParameter("no");
System.out.println(util.str2Int(no));//숫자면 자신의 숫자, 문자면 0
if(util.str2Int(no) != 0) {
//0이 아니야 = 정상 : DB에 물어보기 / 값 가져오기 / 붙이기 / 이동하기
return "detail";
} else {
//0이야 = 비정상 : 에러로 페이지 이동하기
// return "error/error";//에러 폴더 error.jsp
return "redirect:/error";//controller에 있는 error매핑을 실행해
}
}
에러 페이지에 error로 들어가면 된다.
ErrorController.java 만들고 안에 채워주기.
package org.mask.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ErrorController {
//error
@GetMapping("/error")
public String error() {
return "error/error"; // /WEB-INF/views/error/error.jsp
}
}
DB에 물어보기 / 값 가져오기 / 붙이기 / 이동하기
붙이기는 모델을 가져와서 붙이기 할거다.
//2024-02-15 psd 0216.no잡기
@GetMapping("/detail")
public String detail(HttpServletRequest request) {
//오는 no잡기
String no = request.getParameter("no");
System.out.println(util.str2Int(no));//숫자면 자신의 숫자, 문자면 0
if(util.str2Int(no) != 0) {
//0이 아니야 = 정상 : DB에 물어보기 / 값 가져오기 / 붙이기 / 이동하기
BoardDTO detail = boardService.detail(no);//날라오는게 어떤 모양이냐
return "detail";
} else {
//0이야 = 비정상 : 에러로 페이지 이동하기
// return "error/error";//에러 폴더 error.jsp
return "redirect:/error";//controller에 있는 error매핑을 실행해
}BoardDTO detail = boardService.detail(no);
이렇게도 할 수 있다. 스프링이 알아서 변환해주는거다. 문자들어오면 깨진다.
//2024-02-15 psd 0216.no잡기
@GetMapping("/detail")
public String detail(@Param("no") int no) {
//오는 no잡기
//String no = request.getParameter("no");
//System.out.println(util.str2Int(no));//숫자면 자신의 숫자, 문자면 0
if(no != 0) {
//0이 아니야 = 정상 : DB에 물어보기 / 값 가져오기 / 붙이기 / 이동하기
//BoardDTO detail = boardService.detail(no);//날라오는게 어떤 모양이냐
return "detail";
} else {
//0이야 = 비정상 : 에러로 페이지 이동하기
// return "error/error";//에러 폴더 error.jsp
return "redirect:/error";//controller에 있는 error매핑을 실행해
}
}
아래처럼 하면 404에러로 넘어가지 않는다
//2024-02-15 psd 0216.no잡기
@GetMapping("/detail")
public String detail(@Param("no") String no) {
//오는 no잡기
//String no = request.getParameter("no");
//System.out.println(util.str2Int(no));//숫자면 자신의 숫자, 문자면 0
if(util.str2Int(no) != 0) {
//0이 아니야 = 정상 : DB에 물어보기 / 값 가져오기 / 붙이기 / 이동하기
//BoardDTO detail = boardService.detail(no);//날라오는게 어떤 모양이냐
return "detail";
} else {
//0이야 = 비정상 : 에러로 페이지 이동하기
// return "error/error";//에러 폴더 error.jsp
return "redirect:/error";//controller에 있는 error매핑을 실행해
}
}
BoardService >detail 만들기
package org.mask.service;
import java.util.List;
import org.mask.dao.BoardDAO;
import org.mask.dto.BoardDTO;
import org.mask.util.Util;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class BoardService {
//2024.02.16
@Autowired
private BoardDAO boardDAO;
@Autowired
private Util util;
public List<BoardDTO> boardList() {
return boardDAO.boardList();
}
//2024.02.16
public BoardDTO detail(String no) {
//문자? util에 숫자로 변경해주는 메소드 만들기
int boardNo = util.str2Int(no);
return boardDAO.detail(boardNo);
}
}
이렇게 추가하는 방법이 있고,
BoardController.java
//2024-02-15 psd 0216.no잡기
@GetMapping("/detail")
public String detail(@Param("no") String no) {
//오는 no잡기
//String no = request.getParameter("no");
//System.out.println(util.str2Int(no));//숫자면 자신의 숫자, 문자면 0
int reNo = util.str2Int(no); //여기 데이터 타입을 봐라
if(reNo != 0) {
//0이 아니야 = 정상 : DB에 물어보기 / 값 가져오기 / 붙이기 / 이동하기
BoardDTO detail = boardService.detail(reNo);//날라오는게 어떤 모양이냐
return "detail";
} else {
//0이야 = 비정상 : 에러로 페이지 이동하기
// return "error/error";//에러 폴더 error.jsp
return "redirect:/error";//controller에 있는 error매핑을 실행해
}
}
BoardService.java
package org.mask.service;
import java.util.List;
import org.mask.dao.BoardDAO;
import org.mask.dto.BoardDTO;
import org.mask.util.Util;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class BoardService {
//2024.02.16
@Autowired
private BoardDAO boardDAO;
public List<BoardDTO> boardList() {
return boardDAO.boardList();
}
//2024.02.16
public BoardDTO detail(int no) { //파라미터에 따라 아래 값이 달라지니까 보드컨트롤러에서
reNo를 써도 여기서 no로 쓰면 된다.
//문자? util에 숫자로 변경해주는 메소드 만들기
return boardDAO.detail(no);
}
}변수명을 보지 말고 데이터 타입이 맞으면 실행된다.
BoardDAO.java 추가
public BoardDTO detail(int no) {
return sqlSession.selectOne("board.detail", no);
}
}
board-mapper.xml 추가
<select id="detail" resultType="boardDTO" parameterType="Integer">
SELECT board_no, board_title, board_content, mno, board_date, board_ip, board_del
FROM board
WHERE board_no=#{no}
</select>resultType 나갈 파라미터 타입
parameterType 들어올 파라미터 타입
mapper에서 쿼리문 쓸 때도 띄워쓰기 잘해도 되지 않지만 잘하자. 정석으로 하자
boardDTO가 진짜 있는지 확인해보자 알리아스..?
mybatis-config.xml에 typeAlias 확인>난 있네
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<typeAliases>
<typeAlias type="java.lang.Integer" alias="integer"/>
<typeAlias type="org.mask.dto.BoardDTO" alias="boardDTO"/>
</typeAliases>
</configuration>
BoardController.java >매개변수에 Model model 적어주기.
//2024-02-15 psd 0216.no잡기
@GetMapping("/detail")
public String detail(@Param("no") String no, Model model) {
//오는 no잡기
//String no = request.getParameter("no");
//System.out.println(util.str2Int(no));//숫자면 자신의 숫자, 문자면 0
int reNo = util.str2Int(no); //여기 데이터 타입
if(reNo != 0) {
//0이 아니야 = 정상 : DB에 물어보기 / 값 가져오기 / 붙이기 / 이동하기
BoardDTO detail = boardService.detail(reNo);//날라오는게 어떤 모양이냐
model.addAttribute("detail" , detail);
return "detail";
} else {
//0이야 = 비정상 : 에러로 페이지 이동하기
// return "error/error";//에러 폴더 error.jsp
return "redirect:/error";//controller에 있는 error매핑을 실행해
}
}
model.addAttribute("detail" , detail); 추가
detail.jap만들기
<%@ 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 lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>상세보기</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57"
href="assets/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60"
href="assets/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72"
href="assets/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76"
href="assets/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114"
href="assets/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120"
href="assets/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144"
href="assets/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152"
href="assets/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180"
href="assets/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"
href="assets/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32"
href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96"
href="assets/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16"
href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js"
crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link href="css/board.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<c:import url="menu.jsp" />
<!-- 게시판 -->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">게시판</h2>
</div>
<div class="card mb-4">
${detail.board_no } / ${detail.board_title }/
${detail.board_write } / ${detail.board_date }
${detail.board_count }
</div>
</div>
</section>
<!-- Bootstrap core JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
board-mapper.xml 변경
<select id="detail" resultType="boardDTO" parameterType="Integer">
SELECT b.board_no, b.board_title, b.board_content, m.mname as board_write, b.board_date, b.board_ip, b.board_del
FROM board b JOIN member m ON b.mno=m.mno WHERE board_no=#{no} AND board_del ='1'
</select>
게시판으로 버튼 만들기
<button onclick="history.back()">게시판으로</button>
<button onclick="location.href='./board'">게시판으로</button>
<button onclick="history.go(-1)">게시판으로</button>
<button class="btn btn-warning" onclick="history.back()">게시판으로</button> >css
board.jsp >모달만들기
<!-- 20240216 글쓰기 -->
<button type="button" class="btn btn-warning" data-bs-toffle="modal" data-bs-target="#write">글쓰기</button>
<!-- 20240216 글쓰기 모달 만들기 -->
<div class="modal" id="write">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">글쓰기 창 입니다.</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mt-2">
<form action="./write" method="post">
<input type="text" name="title" class="form-control mb-2" placeholder="제목을 입력하세요">
<textarea name="content" class="form-control mb-2 vh-500"></textarea>
<button type="submit" class="btn btn-info">글쓰기</button>
</form>
</div>
</div>
</div>
</div>
</div>
방법1
방법2 dto 만들기
WriteDTO 만들기
package org.mask.dto;
import lombok.Getter;
import lombok.Setter;
//글쓰기할때 사용할 DTO
@Getter
@Setter
public class WriteDTO {
private String title, content;
}
BoardController.java에 write 추가해주기
//글쓰기 2024-02-16
@PostMapping("/write")//내용+제목 받아요 -> db에 저장 -> 보드로 돌아간댜
public String write(WriteDTO dto) {
System.out.println(dto.getTitle());
System.out.println(dto.getContent());
return "redirect:/board";
}콘솔에 나와야한다
BoardService > public int write(WriteDTO dto) 만들어주기
public int write(WriteDTO dto) {
return boardDAO.write(dto);
}
BoardDAO.java > public int write(WriteDTO dto) { 만들어주기
public int write(WriteDTO dto) {
return sqlSession.insert("board.write", dto);
}
board-mapper.xml 1.타입 적기 2.INSERT 문장 적기
1.mybatis-config.xml > typeAlias 적기 WriteDTO 추가
<configuration>
<typeAliases>
<typeAlias type="java.lang.Integer" alias="integer"/>
<typeAlias type="org.mask.dto.BoardDTO" alias="boardDTO"/>
<typeAlias type="org.mask.dto.WriteDTO" alias=writeDTO"/>
</typeAliases>
</configuration>
2.board-mapper.xml > insert문 적기
<insert id="write" parameterType="writeDTO">
<!-- 1.타입 적기 2.INSERT 문장 적기 -->
INSERT INTO board (board_title, board_content, mno)
VALUES (#{title}, #{content},(SELECT mno FROM member WHERE mid=#{mid}));
<selectKey resultType="Integer" keyProperty="board_no" order="AFTER">
SELECT LAST_INSERT_ID()
</selectKey>
</insert>키뽑아내는거, 나올 번호, 해당 쿼리문
BoardService.java 수정하기> member에 있는 id 써주기
public int write(WriteDTO dto) {
dto.setMid("mask");
return boardDAO.write(dto);
}
BoardController.java 수정 > return "redirect:/board";> return "redirect:/detail?no="+dto.getBoard_no(); 수정
//글쓰기 2024-02-16
@PostMapping("/write")//내용+제목 받아요 -> db에 저장 -> 보드로 돌아간댜
public String write(WriteDTO dto) {
System.out.println(dto.getTitle());
System.out.println(dto.getContent());
int result = boardService.write(dto);//영향받은 행
System.out.println("결과는: " + result);//0,1 결과
return "redirect:/detail?no="+dto.getBoard_no();
}
WriteDTO 변경> private int board_no; 추가
package org.mask.dto;
import lombok.Data;
//글쓰기할때 사용할 DTO
@Data
public class WriteDTO {
private int board_no;
private String title, content, mid;
}
BoardController.java 수정 >0,1 결과
//글쓰기 2024-02-16
@PostMapping("/write")//내용+제목 받아요 -> db에 저장 -> 보드로 돌아간댜
public String write(WriteDTO dto) {
System.out.println(dto.getTitle());
System.out.println(dto.getContent());
int result = boardService.write(dto);//영향받은 행
//추후 세션관련 작업을 더 해야 합니다.
//0,1 결과
if(result == 1) {
return "redirect:/detail?no="+dto.getBoard_no();
} else
return "redirect:/error";
}
board.jsp >required 추가: 글쓰기에 필수입력으로 바꾸는 것 추가
<form action="./write" method="post">
<input type="text" name="title" class="form-control mb-2" required="required" placeholder="제목을 입력하세요">
<textarea name="content" class="form-control mb-2 vh-500" required="required"></textarea>
<button type="submit" class="btn btn-info">글쓰기</button>
</form>
onsubmit="return writeCheck()" 추가
<form action="./write" method="post" onsubmit="return writeCheck()" name="frm">
</head> 위에 <script type="text/javascript"> 추가
<script type="text/javascript">
function writeCheck(){
alert("글쓰기 버튼을 눌렀습니다.");
return false;
}
</script>
let 추가 후 아래 textarea 에 id 추가
<script type="text/javascript">
function writeCheck(){
//alert("글쓰기 버튼을 눌렀습니다.");
let title = document.querySelector("#title");
let content = document.querySelector("#content");
return false;
}
</script>
<textarea id="content" name="content" class="form-control mb-2 vh-500" required="required"></textarea>
alert("title : " + title.value+ "/ content : " + content.value); 추가하면 글쓰기 할때
<script type="text/javascript">
function writeCheck(){
//alert("글쓰기 버튼을 눌렀습니다.");
let title = document.querySelector("#title");
let content = document.querySelector("#content");
alert("title : " + title.value+ "/ content : " + content.value);
return false;
}
</script>
이렇게 나와야 하는데..나느 왜 안나오고 글이 써질까...ㅎ
이제 이렇게 추가해 주면
<script type="text/javascript">
function writeCheck(){
//alert("글쓰기 버튼을 눌렀습니다.");
let title = document.querySelector("#title");
let content = document.querySelector("#content");
//alert("title : " + title.value + "/ content : " + content.value);
if(title.value.length < 4){
alert("제목은 다섯글자 이상이어야 합니다. ");
title.focus();
return false;
}
if(content.value.length < 10){
alert("본문 내용은 열 글자 이상이어야 합니다. ");
content.focus();
return false;
}
}
왜 나는 글이 써져버리냐....
왜냐하면 <input type="text" id="title" name="title" >id를 안썼기 때문이지
<input type="text" id="title" name="title" class="form-control mb-2" required="required" placeholder="제목을 입력하세요">
<textarea id="content" name="content" class="form-control mb-2 vh-500" required="required"></textarea>
<button type="submit" class="btn btn-info">글쓰기</button>
오예
오늘은 여기까지
'2023.11.21-2024.05.31' 카테고리의 다른 글
| 240220 스프링(댓글창, 댓글 출력, 페이징) (0) | 2024.02.20 |
|---|---|
| 20240219 스프링(웹표준 기술 - 모달 풋터,상세보기 모달,swal, 댓글창 만들기, 댓글 출력하기) (0) | 2024.02.19 |
| 20230215 스프링3일차() (0) | 2024.02.15 |
| 20240214 스프링2일차(어제복습) (0) | 2024.02.14 |
| 20240213 스프링1일차(설치, 파일 위치, 의존성 주입) (1) | 2024.02.13 |