(국비교육) 56 - postman 이용하기 + 관리지 페이지 만들기 + XEICON + 파일 업로드

■ postman 다운로드

 

 

postman 다운로드 한다. 

값이 제대로 오는지 확인해주는 프로그램이다. 

 

다운로드 후 이클립스와 postman 껐다가 키면 로그인 없이 사용 가능하다. 

 

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

Download Postman | Get Started for Free

https://memostack.tistory.com/180

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

http://www.incodom.kr/REST

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

 

 

	// log
   implementation 'org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4.1:1.16'

 

 

해당 내용 추가 후 서버 재기동 하면 다음과 같이 콘솔창에 뜰 수 있다. 

 

spring.datasource.driverClassName=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
spring.datasource.url=jdbc:log4jdbc:mariadb://wisejia.iptime.org:3306/c23b_11


# log
log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
log4jdbc.dump.sql.maxlinelength=0

 

 

다음과 같이 제대로 들어간 것 확인 가능하다. 

 

* 요청사항

- log4jdbc 가 무엇인지

- HikariCP 가 무엇인지

: 사용자에게 하나씩 데이터 베이스 접근할 수 있도록 권한을 주고 그것을 다시 회수하고 다른 사람 부여

 

톰캣 관련된 것 : jakarta

 

■ 관리자 페이지 만들기

 

 

전달받은 css와 jsp 코드를 입력하고 get mapping 을 하면

다음과 같이 메인 페이지 열 수 있다.

 

redirect : 아예 컨트롤러를 다시 들려 -> url

forward : / 를 유지하고 jsp 를 admin 으로 보낸다. 

 

 

https://kotlinworld.com/329

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

 

 

 

 

다음과 같이 전체 영역이 회색으로 변경된다.

 

■ XEICON 사용하기

 

 

다음과 같이 이미지 선택하여 사용 가능하다. 

 

 

 

메뉴를 만든 부분을 menu.jsp 로 빼준다. 

 

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

XEIcon, 문자를 그리다

 

 

h1 자체가 영역을 잡는 부분이 있어 margin-top: 0; 을 준다.

 

@charset "UTF-8";

body {
	margin: 0px;
	padding: 0px;
}

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

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

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

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

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

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

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

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

h1 {
	margin-top: 0;
}

.box {
	width: 100px;
	height: 100px;
/* 	padding: 10px;  */	
	text-align: center;
	line-height: 100px;
	border-radius: 50%;
	overflow: hidden;
	transition: 0.3s;
	border: 0px;
	margin: 100px;
	float: left;
}

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

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

 

main 화면도 다음과 같이 꾸며준다. 

 

 

■ 파일 업로드 

 

 

파일 하나가 10mb

파일 여러개가 50mb 까지만 허용된다.

 

 

파일 업로드를 위한 인코딩 타입 지정해준다.

enctype="multipart/form-data 는 파일 업로드를 위해서 쓰여진다. 

 

 

mapper에도 다음과 같이 if 조건을 걸어줄 수 있다. 

m_no 에 , 를 붙이지 않는 이유는 만약 if 조건을 만족하지 않는 경우 , 가 붙으면 안되기 때문이다.

 

파일이 있을 경우 norifile 에 우리가 받은 파라미터를 데이터베이스에 입력시켜준다. 

 

 

파일 이름, 용량, 타입 확인이 가능하다. 

 

 

upload 폴더 static 에 생성해준다.

이제 업로드 파일은 upload 에 저장할 예정이다. 

 

 

파일이 있을 경우에만 실행하도록 설정해준다.

 

파일이 있을 경우 실제 경로를 뽑아준다.