'게시판 만들기'에 해당되는 글 2건

반응형

이클립스를 실행 하시고 new - project 를 하셔서 spring을 검색하셔서 Spring Legacy Project로 만듭니다.

Next를 하고 저는 프로젝트의 이름은 basicBoard로 하고 템플릿은 Spring MVC Project를 하였습니다.

Next

패키지 명은 com.board.controller로 하였습니다.

그 후에 finish를 해줍니다.

 

상단 메뉴에서 Window에 preferences를 클릭하고

general목록에서 workspace를 확인해 줍니다.

이후에는

상단의 Project에서 properties에서 

Text file encoding을 확인해 줍니다.

이제 project facets 로 들어가서 JAVA의 버전을 1.8로 바꿔주고 APPLY를 하겠습니다.

아래와 같이 web.xml에 문자 인코딩을 해주겠습니다.

<!-- 문자 인코딩 시작 -->
	
	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>
			org.springframework.web.filter.CharacterEncodingFilter
		</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

이제 아래의 views에 home.jsp 에 페이지 인코딩을 해주겠습니다.

현재 페이지의 인코딩을 UTF-8로 변경하는 코드입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

이제 pom.xml을 열고 pom.xml에서 Java의 버전이 1.6이고 프레임 워크의 버전이 3.1.1. 로 되어 있습니다.

Java의 버전을 1.8로 바꾸고 Spring Framework의 버전을 4.3.8 버전으로 변경 하겠습니다.

그 후에 프로젝트를 실행해 보면 

아래와 같은 화면이 나타나게 됩니다.

 

반응형
블로그 이미지

꽃꽂이하는개발자

,
반응형

1. bootstrap 3.7.7 을 사용하겠습니다.

https://getbootstrap.com/docs/3.3/getting-started/

 

Getting started · Bootstrap

Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations. jQuery required Please note that all JavaScript plugins require j

getbootstrap.com

 

 

2. dynamic web project를 만들어 주겠습니다.

WebContent아래에 다운받은 Bootstrap 3종을 넣어줍니다. 그리고 우리가 따로 꾸밀 custom.css 파일을 하나 만들어 줍니다.

  메인 페이지를 구성할 index.jsp도 만들어 주겠습니다.

 

3. index.jsp에 메인 화면의 header부분을 만들어 주겠습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<title>JSP Ajax fxProbest</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
	
	<% //userID를 초기화 해주고 session에서 userID값을 가져옵니다. 만약에 null이 아니라면 userID에 가져온 userID값을 넣어줍니다.
		String userID = null;
	if(session.getAttribute("userID") != null){
		userID = (String) session.getAttribute("userID");
	}
	%>
	<!-- 부트스트랩을 이용하여 메뉴를 만들어 주도록 하겠씁니다. -->
	<nav class="navbar navbar-default">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
			data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.jsp">ProbestSoft members chat</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="index.jsp">메인</a>
			</ul>
			<% // userID가 null 이면 로그인이 되지 않은 경우
				if(userID == null){
			%>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="buton" aria-haspopup="true"
					aria-expand="false">접속하기<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="login.jsp">로그인</a>
						<li><a href="join.jsp">회원가입</a>
					</ul>
				</li>
			</ul>
			<%
				// userID가 null이 아닐 경우 로그인이 되었다는 것.
				} else {
			%>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expand="false">회원관리<span class="caret"></span></a>
				</li>
			</ul>
			<%
				}
			%>
			
		</div>
	</nav>
</body>
</html>

 

출처: 안경잡이 개발자 나 동 빈 

반응형
블로그 이미지

꽃꽂이하는개발자

,