mappers 에서
주석이 select 안으로 들어가지 않게 주의
타입 & 변수명 맞춰주는거 중요 (String & bno)
오늘은 상단 메뉴바 넣고
글쓰기 버튼 만들예정
맘에드는 웹사이트 하나 정해서 카피하는 연습하기
datail.jsp 에서 게시판 형태 만들고
detail.css 파일생성해서 꾸며보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/detail.css">
</head>
<body>
<div class= "detail-content">
<div class="title">${dto.bno }. ${dto.btitle }</div>
<div class="name">${dto.bwrite }</div>
<div class="content">${dto.bcontent }</div>
<div class="under-bar">
<div class="date">${dto.bdate }</div>
<div class="like">${dto.blike }</div>
</div>
<div class="ip">아직없음</div>
</div>
</body>
</html>@charset "UTF-8";
.detail-content{
margin: 0 auto;
width: 800px;
height: auto;
background-color: #FDF5E6;
padding: 10px;
border-radius: 20px;
box-sizing: border-box;
}
.title{
width: 100%;
height: 50px;
line-height:50px;
font-size: large;
background-color: #FDCD8C;
border-radius: 20px;
padding: 0 20px 0 20px;
box-sizing:border-box;
}
.under-bar{
width: 100%;
border: 1px solid #D7A35D;
background-color: #FFEFD5;
height: 80px;
padding: 20px;
border-radius: 20px;
box-sizing: border-box;
}
.name, .like{
text-align: right;
font-weight: bold;
padding-top: 10px 10px 0 0;
}
.like, .date{
width: 50%;
height:20px;
float: left;
}
.ip{
text-align: center;
padding: 10px 0 10px 0;
font-weight: lighter;
}
.content{
width:100%;
min-height:500px;
height: auto;
padding: 20px;
box-sizing:border-box;
}
난 프론트는 못하겠다
상단메뉴바만들자
manu.jsp 생성
index 컨트롤러에 임시로 메뉴컨트롤러 생성할거
연결됨
* 시멘틱코드 *
div 로 만들어 놓으면 뭐가 들어가는지 모르니까 시멘틱 코드 사용해서 어떤 박스인지 표기
[Html] 시맨틱 태그(Semeantic Tag)란 무엇인가? (tistory.com)
[Html] 시맨틱 태그(Semeantic Tag)란 무엇인가?
시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해
coding-factory.tistory.com
<nav> 태그 : 내비게이션 표현을 위한 태그, 동일한 사이트 내로 연결되는 링크들의 모음
여기에 스타일 지정 해보자
<style type="text/css">
nav{
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: beige;
}
</style>position: fixed; => 스크롤 내려도 고정시켜줌
top: 0; => 맨위에 고정하겠다
padding & margin을 0으로 주면 여백없이 붙어버림 (li 앞에 땡땡이도 사라짐)
li 앞에 땡땡이 없애려면 list-style: none; 적용.
nav li{
list-style: none; /* li앞에 원을 없애줍니다. */
float: left;
width: 100px;
}* float 은 원래 아래로 차례차례 나열되는 요소들에 대해서 옆으로 나열되게 만들어주는 스타일
* 넓이 지정해주면 li 하나하나가 100px만큼의 넓이를 차지하게 됨
각각의 메뉴(li)에 hover 적용 (마우스 올리면 배경색 & 글씨색 변경)
(최종)
<style type="text/css">
body{
margin: 0;
padding: 0;
}
nav{
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #FFDAB9;
border-bottom: 1px solid #D2691E;
}
nav ul{
margin: 0;
padding: 0;
}
nav li{
list-style: none; /* li앞에 원을 없애줍니다. */
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
}
nav li:hover{
background-color: #FFB400;
color: white;
font-weight: bold;
}
</style>
nav 파트를 잘라내서 다른곳에 임포트 시켜줄거임
메뉴 집어넣자
[ detail.jsp ]
가려지는건 스타일에서 fixed 때문
> 주석처리
소스코드 보면 html 중복코드 있음 (detail용 menu용)
manu.jsp 에서 쓸모없는 코드 날려버리기
아래쪽 닫는 태그들도 지워주기 </head>, </html>
다시 소스코드 확인해보면 중복되는 태그들 없어짐 <body></body> 지워도됨
<style type ~ > 이랑 <nav> 태그만 남기고 다 지워
이제 요거를 다른 페이지들에 넣어주면 됨 (index.jsp / board.jsp / detail.jsp )
<%@ include file = "menu.jsp" %>
모든 페이지 상단에 메뉴바 생김
menu.jsp 에서 nav 하단에 div 추가해서 스타일 지정해주면
div 크기만큼 (메뉴바 크기만큼) 공간생성됨
<nav>
<ul>
<li><img class="mimg" src="./img/main.png" alt="집">메인</li>
<li><img class="bimg" src="./img/board.png">게시판</li>
<li><img class="bimg" src="./img/board.png">게시판2</li>
<li><img class="qimg" src="./img/ask.png">문의사항<img class="qimg" src="./img/ask.png"></li>
<li><img class="nimg" src="./img/notice.png">공지</li>
</ul>
</nav>
<style>
.....
.mimg, .bimg, .qimg, .nimg {
height: 38%;
margin-right: 5px;
}
.qimg {
height: 38%;
margin: 0 5px 0 5px;
}
</style>
이제 메뉴바의 각 메뉴들 클릭하면 이동할 수 있게 만들어버리자
이동 주소 간결하게 써주기 위해서 <script> 태그 내부에 function link() 함수 생성
요 함수를 이용해서 공통되는 부분인 ./ 는 한꺼번에 넣어주기
브라우저에서 메인을 누르면 첫페이지(' / ')로 이동
마찬가지로 게시판 누르면 board 페이지로 이동
이제 index랑 board 왔다갔다 하는 a링크는 삭제해도됨 _ 메뉴바로 이동가능하니까~
menu.css 파일을 생성해서
menu.jsp에 있던 스타일들을 css파일에 옮겨주기
<link rel="stylesheet" href="./css/menu.css">
요만큼은 menu.jsp 에만 넣어주거나 요기에 넣지 않으려면
다른 모든 jsp 파일들에 넣어주면 됨 (중복은 문제되지는 않음)
css 미디어쿼리 _ 사용하는 기기에 화면이 맞춰서 보이게 가능
(임시로 만들었던 menu는 지움)
컨드롤러에서 메뉴바 게시판2, 문의, 공지 눌렀을 때 연결되도록 생성
각 메뉴에 해당하는 넘어갈 페이지(jsp 파일) 생성
글쓰기 버튼 생성
write 페이지 연결
write.jsp 만들자
만들고 메뉴바 뜨게 연결
input 창, textarea, button 생성 & name 지정
스타일지정 위해 css파일과 연결
* submit : 눌러서 제출용도
* button : 단순히 버튼 생성
write.css 파일 만들자
게시판 스타일 지정
요기에 스마트 에디터 넣어보기
네이버 스마트에디터 (SmartEditor2)를 이용한 글쓰기 기능 구현 (tistory.com)
네이버 스마트에디터 (SmartEditor2)를 이용한 글쓰기 기능 구현
네이버 스마트에디터를 이용한 글쓰기 기능 구현 오늘은 무료 웹에디터 툴인 스마트에디터(SmartEditor)를 적용하는 방법에 대해 포스팅하고자 한다. 스마트에디터는 네이버에서 배포한 무료 오픈
wanna-b.tistory.com
Getting started (summernote.org)
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
위에서 아래 코드 가져오고 id = "summernote" 추가
$(document) .ready ( ** )
이 jsp 파일(문서가) 다 읽어졌다면(모두 로딩되었다면)
** 기능을 실행하세요
** function() { $('#summernote').summernote(); }
id가 summernote 인 애한테 (textarea에) 서머노트를 실행해라
언제 btn이 btn2 가 되었을까
버튼 가운데정렬 했당
.summernote ({ height: 400 })
textarea 에서 지정해준 높이가 적용이 안되는데 왜일까
암튼 그래서 위에다가 높이 지정해줌
input ~ button까지 form 태그로 감싸주기 (form action으로 write 페이지로 넘겨줄거)
글쓰기 버튼 눌러보면 405오류
처음으로 post 방식 써볼예정
보드컨트롤러에
> @PostMapping 선언
> write() 메소드 만들건데 중복이니까 매개변수 넣어줘야함 (오버로딩)
* 글쓰기 누르면 쓴 글은 데이터베이스에 저장되고 페이지는 다시 board로 돌아가야함
=> 다시 컨트롤러 지나서 board로 가야하기 때문에 redirect 사용해야함***
[Java]오버로딩 & 오버라이딩(Overloading & Overriding) (tistory.com)
(리다이렉트 & 포워드)
리다이렉트(Redirect)와 포워드(Forward)의 차이는 무엇인가?
리다이렉트와 포워드 특정 URL 접속 시 리다이렉트 또는 포워드가 일어나게 되면 작업 중인 페이지가 전환된다. 리다이렉트와 포워드는 페이지가 전환된다는 점에서 비슷한 역할을 한다. 하지만
kotlinworld.com
1. 사용자가 입력한 데이터 변수에 담기
내가 입력한 값들을 하나하나 dto에 담아서 db로 보낼거
게시판에서 제목 & 본문 입력하고 글쓰기 버튼 누르면
=> 콘솔창에 출력 (근데 한글은 깨짐)
한글깨지는거 잡자
web.xml 에 filter 코드 입력 (체크부분 ctrl + space 눌렀을때 연결되면 성공)
fiilter랑 연결(mapping)
모든 /요청에 대해 위의 encoding-filter로 보내 UTF-8 처리
출력되는거 확인했으니 이제 dto에 담아서 db로 보내자
이제 dto를(내가 쓴 글) 서비스한테 던져_ write() 메소드로
그리고 보드를 다시 읽을거야 (redirect:board)
이제 서비스에서 다시 DAO로 던짐 _ write() 메소드로
여기는 void라서 return 이 아니라 DAO 로 값을 바로 던짐. 위의 서비스에서도 dto값을 던지기만 했음
값을 보내고 되돌아오는 값이 있으면 return인데 (SELECT 계열들)
다시 돌아오는 값이 없을 때는 필요없음. 값을 보내기만 하면됨
이제 DAO에서 dto를 받아서 insert() 를 통해 보냄
insert() 메소드
매개변수 하나짜리는 => sql문을 찾아가라고만 하고 값을 안돌려줌
매개변수 두개짜리는 => sql문을 실행하고 , (콤마) 뒤의 값들을 같이 가지고가 (즉, 실행시킬때 필요한 값들임)
필요한 값들을 dto에서 가져가라고 알려주는 역할
여기까지 일단 java의 영역은 끝!
board-mappers 로 가서
insert로 명령어 입력해줄거 (insert는 result가 없음 _ resultType이 없음) => parameterType만!
이제 게시판에 글쓰기 하면
저장이 된당 (db로 잘 보내짐)
요렇게!
*번외*
[ 파비콘 만들어 넣기 ]
Favicon & App Icon Generator (favicon-generator.org)
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
요기에서 사진파일 (웬만하면 작은걸로) 넣고
' Generate only 16x16 favicon.ico ' 선택 => Create Favicon
생성된 파비콘 파일 다운받아서 img폴더에 넣어주고
만들어진 링크는 jsp 파일 <head>태그 안에 넣어주면 연결됨!! (경로설정주의_ img폴더 추가*)
짠 마자용
'국비과정 > Spring' 카테고리의 다른 글
| 20230720 _[34일차]_01. Spring 게시판 수정기능 + 로그인페이지 (0) | 2023.07.20 |
|---|---|
| 20230719 _[33일차]_01. Spring 게시판 수정 & 삭제 버튼 생성 (0) | 2023.07.19 |
| 20230717 _[31일차]_01. Spring 게시판 생성 + DB연결 (0) | 2023.07.18 |
| 20230714 _[30일차]_01. Spring 맛보기3 (0) | 2023.07.14 |
| 20230713 _[29일차]_01. Spring 맛보기2 (0) | 2023.07.13 |
