20230821 _[54일차]_01. admin-main페이지 및 파일업로드

[ Postman ]

https://www.postman.com/downloads/

Download Postman | Get Started for Free

Get 방식 / Post 방식 맞춰줘야 한다.

안그러면 아래처럼  error가 뜬다.

detail 가져올때 post 방식으로 bno를 가져왔으니 맞춰주면 

아래처럼 데이터를 잘 불러오는지 확인할 수 있다.

아래에서 내가 post 방식으로 가져와서  jsp에 띄웠던 데이터 확인가능

---

REST API와 GET, POST, PUT, DELETE 통신에 대해 (tistory.com)

REST API와 GET, POST, PUT, DELETE 통신에 대해

 

REST - 인코덤, 생물정보 전문위키 (incodom.kr)

생물정보 전문위키, 인코덤

---

 

gradle 수정했으면 아래꺼 꼭 해주기

멀티보드를 클릭하면 아래처럼 콘솔창에 글이 다 뜬다

---

 dependency 안에 넣어준것들은 다 왼쪽 저기에 들어가있다.

 

스프링에 기본으로 들어가있는건데 뭔지 찾아보기

HikariCP : 데이터베이스 연결(Connection)을 관리해 주는 도구(라이브러리)

---

 관리자 페이지에서 로그인을 해보면 (등급이 5이상만 로그인 가능하게 설정해뒀다.)

이제 콘솔창에서 확인가능

 

이제 로그인 했을 때 넘어갈 main.jsp 페이지를 만들자 (admin폴더 내부에*)

 

컨트롤러에서도 리턴값에 admin폴더 아래의 jsp파일이라고 명시해줘야 한다.  admin/main 

리다이렉트대신 포워드로 해도 작동은 똑같이 한다.

 

---

리다이렉트(Redirect)와 포워드(Forward)의 차이는 무엇인가? — 조세영의 Kotlin World

리다이렉트(Redirect)와 포워드(Forward)의 차이는 무엇인가?

페이지 전환의 주체가 다르다. (리다이렉트 -  클라이언트 / 포워드 - 서버)

 

---

화면 구성은 아래처럼 만들예정

 

<link rel="stylesheet" href="../css/admin.css">

=> 최상위 폴더 내부의 css폴더에 있는 admin.css 를 적용하겠다.

css에서 container 에 배경색 적용

아래처럼 body에 margin / padding 을 0으로 설정해줘야 빈공간없이 초록색으로 적용된다.

 

이렇게 해줬더니 main인 div가 아래로 넘어간다.

div가 block요소여서 그런듯. 

사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨 {width: 100%; height: auto;} 

 

float으로 각각 왼/오 설정해줬더니 

 

---

http://xpressengine.github.io/XEIcon/

XEIcon, 문자를 그리다

 

---

 

아이콘 사용을 위해 링크를 jsp파일에 넣어준다.

LIBRARY 2.3.3 에서 

원하는 키워드 검색하면 관련 아이콘들이 뜬다.

사용방법은 EXAMPLES 탭에 나와있다.

원하는 아이콘의 이름 복사해서 위처럼 i class = "" 에 이름을 넣어주면 된다.

 

크기 및 넓이 조절방법도 나와있으니 가져와서 쓰면 된다.

 

 

menu div박스에 공지사항에 아이콘을 적용시켰다.

원하는 아이콘들로 메뉴들 만들어줬다.

 

메꾸~ 메뉴바꾸미기 ~

메꾸메꾸

*  vertical-align :  수직정렬

높이도 맞춰준다.

* overflow : hidden   =>  영역 밖으로 튀어나오는 부분이 숨겨진다.

메꾸

---

메뉴바가 숨겨져 있다가(아이콘만 보이다가) 

마우스를 올리면 메뉴글이 보이도록 만들자.

 

너비를 50으로 줄이고 이 이상으로 옆으로 튀어나오는 부분은 hidden으로 숨겨준다.

 

마우스를 올리면 너비가 200이 되어서 나타나도록 해준다.

 

transition 설정으로 마우스 올리면 0.5초동안 천천히 너비가 넓어진다. (메뉴바 천천히 등장)

 

이제 메뉴바가 닫혀있는동안 비어있는 요 공간도 활용하자.

menu부분에 아래처럼 설정해주고

position : absolute;

main에서 50px만큼(아이콘너비)만 빼고 넓이를 쓰도록 해준다

 

메뉴바에 마우스를 올리면 (호버가 적용되면)

메인의 공간을 사용한다.

 

이제 이렇게 위아래양옆에 공간을 남기고 가운데만 사용할 수 있도록 해줄거다.

 

가운데공간인 article div박스를 만들어준다.

 

 

 

아래처럼 해주면 위아래양옆이 10px씩 공간이 생긴다.

근데 일단 아래 캡쳐에서는 h1의 margin때문에 10px + ?  된듯하다.

복잡하게 말고 아래처럼 설정해줘도 똑같다.

h1의 margin까지 정리해주면

전부 공평하게 적용이 된다.

 

보드관리 div박스를 만들어주고

div박스꾸미기

마우스를 올리면 호버 작동 => 보드를 관리합니다 문구 등장

 

아래처럼 border-radius 적용

이걸 복사해서 여러개를 만들어줄거다.

@charset "UTF-8";

body{
	margin: 0;
	padding: 0;
}

.container{
	width: 100%;
	height: 100vh;
}

.menu{
	position: absolute;
	margin: 0;
	padding: 0;
	width: 50px;
	height: 100vh;
	background-color: gray;
	float: left;
	overflow: hidden;
}

.menu:hover{
	width: 200px;	
	transition: 0.5s;
}

.menu-item{
	width: 190px;
	margin: 5px;
	background-color: black;
	color: orange;
	box-sizing: border-box;
	line-height: 50px;
	padding-left: 5px;
	overflow: hidden;
}

.menu-item i{
	margin-top: -5px;
	margin-right: 10px;
	vertical-align: middle;
}

.menu-item:hover{
	width: 190px;
	height: 50px;
	margin: 5px;
	background-color: orange;
	color: black;
	box-sizing: border-box;
	border-radius: 10px;
}

.main{
	margin-left: 50px;
	width: calc(100% - 50px);
	height: 100vh;
	background-color: beige;
	float: right;
}

.article{
	width: calc(100% - 20px);
	min-height: calc(100vh - 20px);
	height: auto;
	margin: 10px;
	box-sizing: border-box;
}

h1{
	margin-top: 0;
}

.box{
	width: 80px;
	height: 80px;
	padding: 10px;
	margin: 120px;
	text-align: center;
	line-height: 100px;
	border-radius: 50%;
	overflow: hidden; 
	transition: 0.5s;
	border: 0px;
	background-color: yellow;
	float:left;
	font-size: small;
	font-weight: bold;
}

.box:hover{
	font-size: large;
	font-weight: bolder;
	margin: 0px;
	width: 160px;
	height: 160px;
	line-height: 100px;
	transition: 0.4s;
	border-radius: 20px;
	margin: 80px;
}

#comment{
	width: 100%;
	height: 100px;
	padding: 5px;
	line-height: 30px;
	overflow: visible;
	animation: fadeInUp 1s;
}

---

이제 각각의 메뉴들을 클릭하면 이동하는 함수를 만들어주자.

onclick 적용시켜주고 url 설정해준다.

 

근데 나도모르게 게시글 관리가 생겨서 추가해줬다

여기에도 게시글관리 동그라미 추가

---

이제 main.jsp에 만들었던 메뉴바를 모든 관리자 페이지에 적용시킬예정

admin 폴더안에 menu.jsp 파일 만들어서 여기에 메뉴바 부분을 넣어준다.

그리고나서 menu.jsp 를 모든 jsp파일에 적용시켜줄거다.

 menu.jsp 에 메뉴바 넣기

 

main.jsp 에서 menu.jsp랑 연결해준다.

그럼 이렇게 메뉴바가 main에도 뜬다.

---

이제 컨트롤러에서 로직 만들자.

/notice 요청에 대해 admin/notice 페이지로 이동.

admin 폴더 내부에 notice.jsp 페이지를 만들어준다.

메뉴바의 notice 를 클릭하면 아래 로직에 따라서 admin/notice 주소로 이동.

 

---

이제 db에 저장되어있는 공지글을 불러와보자

Map으로 불러와 list에 담고 model에 붙여서 jsp로 리턴할 예정.

쿼리문작성 _ nno의 역순으로 notice 테이블의 데이터를 다 불러온다.

불러온 데이터들을 jsp에서 테이블을 이용해 게시판 형태로 꺼내준다.

 

jsp에 띄워보면 공지글이 뜬다.

ndel 에 조건문 걸어준다. (ndel은 기본값이 1로 설정되어 있다.)

ndel, norifile 을 나타낼 아이콘을 넣어주고

norifile 에 대해서도 조건문 넣어준다. (파일이 null이 아니라면 나타나도록)

---

이제 공지글 쓰는 창을 만들어줄거다.

 

input창을 넣어줄건데 type이 file인 경우 아래캡쳐의 체크부분을 클릭하면 

파일 불러오기 창이 뜬다.

 

form으로 묶어서 noticewrite 페이지로 post 방식으로 제출한다.

 form에 스타일 적용하면

jsp에서 내용칸의 name 지정을 안해줘서 다시 해줌

그럼 이제 글을 쓰고 

title, content, upFile 세개를 map으로 가져와서 콘솔창에 출력해보면 아래처럼 값을 잘 가져온다.

 

이제 이걸 db에 넣어주는 로직을 만든다.

map을 매개변수로 서비스에 noticeWrite() 메소드를 실행.

서비스에서도 map을 매개변수로 DAO에 noticeWrite() 메소드를 실행.

DAO에서도 noticeWrite() 메소드 실행

mapper에서는 쿼리문 작성해줄건데 

(m_no는 jsp가 아닌 다른곳에서 가져올예정)

변수명 주의 ***

 

upFile 에 대해서는 파일이 있는 경우에만 불러오도록 조건문 걸어준다.

#{ } _ 이 표기는 빼도 된다고 한다..

공지글을 써보면

mno는 일단 컨트롤러에서 직접 넣어준다.

글이 들어간다. 근데 업로드한 파일이 없는데 있을때 떠야하는 아이콘으로 뜬다. 

왜인지는 모르겠지만 나중에는 잘 적용이 됐다.

파일업로드를 해보면

db까지 일단 파일이름이 잘 전달된다.

---

이제 정말 파일업로드를 해보자.

application.properties에 아래처럼 추가

한 번 파일 올릴때 하나의 파일은 10MB 까지, 총 50MB 까지만 가능하도록 설정해줬다.

 

 

notice.jsp에 가서 form에 인코딩타입 추가

 

 

(책 p. 488 참고 _ 파일업로드 방식1. form태그 이용 2. Ajax 이용)

방식1. form태그를 이용할 예정~

컨트롤러에서도 파일을 가져가기 위해 추가적으로 필요한게 있다.

 

* multipartFile 

> MultipartResolver 빈이 설정되어 있어야 사용 => 스프링부트에서 자동으로 설정해줌

> form 에서 enctype="multipart/form-data" 으로 지정.

 

매개변수에 map도 추가해줬다.

---

[ multipartFile의 주요 메소드 ]

 

.getOriginalFilename() : 업로드한 파일의 이름을 반환 _ String

.getSize() : 업로드한 파일의 크기를 반환 _ long

.getBytes() : 업로드한 파일의 데이터를 반환 _ byte[]

.transforTo(File) : 업로드한 파일의 데이터를 저장 _ void

 

---

파일이름, 크기 타입 출력해서 확인해보자

png 이미지 파일넣어서 글을써보면

아래처럼 출력된다.

파일없이 글을 써보면

아래처럼 출력된다.

 

이제 진짜 파일을 넣어보자. 

파일이 있을때만 진행되도록 조건문 걸어준다.

조건을 파일유무로 잡아줘도 된다. 

.isEmpty() : true / false로 반환

일단 업로드할 파일이 있다면 경로먼저 뽑아줄거다 엄청길다.

HttpServletRequest request = 
         ((ServletRequestAttributes)RequestContextHolder.currentRequestAttributes()).getRequest();

 path라는 변수에 경로 뽑아서 담아주고

콘솔창에 출력되는걸 확인해보면

if조건문에 ! (부정)이 빠져있어서 이미지 파일 값이 안찍혔었다.!!!!!!!!!!!!!!!!!

다시 파일을 넣은채로 글을 써보면 

경로는 upload 폴더로

파일이름, 크기, 타입은 콘솔창에 잘 출력된다.

이 upload 폴더는 언제 만들었는지 모르겠지만 예전에 만들었단다

나도 다시 만들어줬다.