[C-1-2] 기본 구성 및 화면 처리

[C-1-2] 기본 구성 및 화면 처리

2020. 1. 20. 01:08ㆍProject C (SBMS)/Project C 파트1

화면 처리에 들어가기 앞서..

대부분 일정문제로 유닛 테스트코드를 작성하지 않은 경우가 많은데 유닛 테스트를 먼저 진행하는 습관을 갖는게 좋다.

반복적으로 입력과 수정, WAS의 재기동 시간을 고려해보면 유닛테스트를 진행하는 편이 더 빠른 개발이 되는 경우가 많다.

지금까지 CRUD 게시판에 대한 기본 처리와 테스트가 완료되었다.

이제부터 하게되는 화면처리에서 발생하는 문제는 대부분 화면(JSP, Javascript, CSS) 쪽에서만 발생하게 되는 것이다.

화면을 개발하기 전에는 반드시 화면의 전체 레이아웃이나 디자인이 반영된 상태에서 개발해야한다.

(*) 화면을 나중에 처리할 생각으로 생각한다면 결과적으로 시간이 훨씬 더 걸리게 되므로 권장하지 않는다.

웹 디자이너없이 프로젝트를 진행하고자 한다면, 부트스트랩을 이용한 무료 디자인들로 진행하는 것도 좋은 선택이다.

필자는 인터넷에서 부트스트랩 테마중 마음에 드는 것으로 선정해서 시작하겠다.

각자 프론트엔드 부분은 디자인하길 바란다.

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.sbms</groupId>
	<artifactId>controller</artifactId>
	<name>SBMS</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<!-- <java-version>1.6</java-version> : 1.8 갱신 -->
		<java-version>1.8</java-version>
		<!-- <org.springframework-version>3.1.1.RELEASE</org.springframework-version> : 5.0.7 갱신-->
		<org.springframework-version>5.0.7.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${org.springframework-version}</version>
			<exclusions>
				<!-- Exclude Commons Logging in favor of SLF4j -->
				<exclusion>
					<groupId>commons-logging</groupId>
					<artifactId>commons-logging</artifactId>
				 </exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		
		<!-- Spring-test 추가 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		
		<!-- Spring-jdbc 추가 -->								
		<dependency>								
			<groupId>org.springframework</groupId>							
			<artifactId>spring-jdbc</artifactId>							
			<version>${org.springframework-version}</version>							
		</dependency>								

		<!-- Spring-tx 추가 -->								
		<dependency>								
			<groupId>org.springframework</groupId>							
			<artifactId>spring-tx</artifactId>			
			<version>${org.springframework-version}</version>							
		</dependency>								

		<!-- Hikari CP 추가 -->								
		<dependency>								
			<groupId>com.zaxxer</groupId>							
			<artifactId>HikariCP</artifactId>							
			<version>2.7.8</version>							
		</dependency>								

		<!-- MyBatis 추가 -->								
		<dependency>								
			<groupId>org.mybatis</groupId>							
			<artifactId>mybatis</artifactId>							
			<version>3.4.6</version>							
		</dependency>								

		<!-- MyBatis-spring 추가 -->								
		<dependency>								
			<groupId>org.mybatis</groupId>							
			<artifactId>mybatis-spring</artifactId>							
			<version>1.3.2</version>							
		</dependency>								

		<!-- Log4jdbc 추가 -->								
		<dependency>								
			<groupId>org.bgee.log4jdbc-log4j2</groupId>							
			<artifactId>log4jdbc-log4j2-jdbc4</artifactId>							
			<version>1.16</version>							
		</dependency>
				
		<!-- AspectJ -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>	
		
		<!-- Logging -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${org.slf4j-version}</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>jcl-over-slf4j</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<!-- Log4j 라이브러리 갱신 -->
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.17</version>
			<!-- <exclusions>
				<exclusion>
					<groupId>javax.mail</groupId>
					<artifactId>mail</artifactId>
				</exclusion>
				<exclusion>
					<groupId>javax.jms</groupId>
					<artifactId>jms</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jdmk</groupId>
					<artifactId>jmxtools</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jmx</groupId>
					<artifactId>jmxri</artifactId>
				</exclusion>
			</exclusions> -->
			<!-- Log4j 컴파일 에러 대책으로 인해 코멘트 처리 -->					
			<!-- <scope>runtime</scope> -->	
		</dependency>

		<!-- @Inject -->
		<dependency>
			<groupId>javax.inject</groupId>
			<artifactId>javax.inject</artifactId>
			<version>1</version>
		</dependency>
				
		<!-- Servlet (servlet-api 버전 갱신) -->								
		<dependency>								
			<groupId>javax.servlet</groupId>							
			<artifactId>javax.servlet-api</artifactId>							
			<version>3.1.0</version>							
			<scope>provided</scope>							
		</dependency>								
		<dependency>		
			<groupId>javax.servlet.jsp</groupId>							
			<artifactId>jsp-api</artifactId>							
			<version>2.1</version>							
			<scope>provided</scope>							
		</dependency>								
		<dependency>								
			<groupId>javax.servlet</groupId>							
			<artifactId>jstl</artifactId>							
			<version>1.2</version>							
		</dependency>
	
		<!-- Junit Test 버전 갱신 -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
			<scope>test</scope>
		</dependency> 
		
		<!-- Lombok 추가 -->								
		<dependency>								
			<groupId>org.projectlombok</groupId>							
			<artifactId>lombok</artifactId>							
			<version>1.18.0</version>							
			<scope>provided</scope>		
		</dependency>
		
		<!-- jackson-databind 추가 -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.9.6</version>
		</dependency>
		
		<!-- jackson-dataformat-xml 추가 -->
		<dependency>
			<groupId>com.fasterxml.jackson.dataformat</groupId>
			<artifactId>jackson-dataformat-xml</artifactId>
			<version>2.9.6</version>
		</dependency>
		
		<!-- gson 추가 -->
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.2</version>
		</dependency>
		
		<!-- spring-security-web 추가  -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-web</artifactId>
			<version>5.0.6.RELEASE</version>
		</dependency>
	
		<!-- spring-security-config 추가 -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-config</artifactId>
			<version>5.0.6.RELEASE</version>
		</dependency>	
		
		<!-- spring-security-core 추가 -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-core</artifactId>
			<version>5.0.6.RELEASE</version>
		</dependency>
		
		<!-- spring-security-taglibs 추가 -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-taglibs</artifactId>
			<version>5.0.6.RELEASE</version>
		</dependency>
		
	</dependencies>
    <build>
        <plugins>
            <plugin>
                <artifactId>maven-eclipse-plugin</artifactId>
                <version>2.9</version>
                <configuration>
                    <additionalProjectnatures>
                        <projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
                    </additionalProjectnatures>
                    <additionalBuildcommands>
                        <buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
                    </additionalBuildcommands>
                    <downloadSources>true</downloadSources>
                    <downloadJavadocs>true</downloadJavadocs>
                </configuration>
            </plugin>
            <plugin>
            	<!-- maven-compiler-plugin java 버전 갱신 -->
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.5.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <compilerArgument>-Xlint:all</compilerArgument>
                    <showWarnings>true</showWarnings>
                    <showDeprecation>true</showDeprecation>
                </configuration>
            </plugin>
            <!-- 메이븐 플러그인 추가 : 자바 기반 스프링 프로젝트용 -->
            <plugin>
            	<groupId>org.apache.maven.plugins</groupId>
            	<artifactId>maven-war-plugin</artifactId>
            	<version>3.2.0</version>
            	<configuration>
            		<failOnMissingWebXml>false</failOnMissingWebXml>
            	</configuration>
            </plugin>
            
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <configuration>
                    <mainClass>org.test.int1.Main</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

XML 기반에서 자바 기반으로 환경 설정하기때문에 XML 기반의 파일들은 삭제합니다.

잘 모르겠으면, 프로젝트 B (SPMS) 참조할 것.

src/main/java

com.sbms.config

RootConfig.java

package com.sbms.config;

import javax.sql.DataSource;

import org.apache.ibatis.session.SqlSessionFactory;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;

import com.zaxxer.hikari.HikariConfig;
import com.zaxxer.hikari.HikariDataSource;

@Configuration
@ComponentScan(basePackages= {"com.sbms.service"})
@MapperScan(basePackages = {"com.sbms.mapper"})

public class RootConfig {
	
	@Bean
	public DataSource dataSource() {
		HikariConfig hikariConfig = new HikariConfig();
		hikariConfig.setDriverClassName("net.sf.log4jdbc.sql.jdbcapi.DriverSpy");
		hikariConfig.setJdbcUrl("jdbc:log4jdbc:oracle:thin:@localhost:1521:{자신의 db명}");
		hikariConfig.setUsername("sbms");
		hikariConfig.setPassword("****");
		HikariDataSource dataSource = new HikariDataSource(hikariConfig);
		return dataSource;
	}
	
	@Bean
	public SqlSessionFactory sqlSessionFactory() throws Exception {
		SqlSessionFactoryBean sqlSessionFactory = new SqlSessionFactoryBean();
		sqlSessionFactory.setDataSource(dataSource());
		return sqlSessionFactory.getObject();
	}
	
}

(*) 환경설정 부분은 본인에 맞게 수정하세요.

src/main/java

com.sbms.config

ServletConfig.java

package com.sbms.config;

import org.springframework.context.annotation.ComponentScan;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewResolverRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

@EnableWebMvc
@ComponentScan(basePackages = {"com.sbms.controller"})
@EnableGlobalMethodSecurity(prePostEnabled=true, securedEnabled=true)
public class ServletConfig implements WebMvcConfigurer {
	
	@Override
	public void configureViewResolvers(ViewResolverRegistry registry) {
		
		InternalResourceViewResolver bean = new InternalResourceViewResolver();
		bean.setViewClass(JstlView.class);
		bean.setPrefix("/WEB-INF/views/");
		bean.setSuffix(".jsp");
		registry.viewResolver(bean);
	}

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
	}
}

src/main/java

com.sbms.config

WebConfig.java

package com.sbms.config;

import javax.servlet.Filter;

import org.springframework.web.filter.CharacterEncodingFilter;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class WebConfig extends AbstractAnnotationConfigDispatcherServletInitializer   {

	@Override
	protected Class<?>[] getRootConfigClasses() {
	    return new Class[] { RootConfig.class };
	}

	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { ServletConfig.class };
	}

	@Override
	protected String[] getServletMappings() {
		return new String[] { "/" };
	}

	@Override
	protected Filter[] getServletFilters() {
		CharacterEncodingFilter characterEncodingFilter = new CharacterEncodingFilter();
		characterEncodingFilter.setEncoding("UTF-8");
		characterEncodingFilter.setForceEncoding(true);
		return new Filter[] { characterEncodingFilter };
	}
}

src/main/resources

log4jdbc.log4j2.properties

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator

src/main/java

com.sbms.controller

BookController.java

package com.sbms.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@Log4j
@RequestMapping("/book/*")
@AllArgsConstructor
public class BookController {
	
	@GetMapping("/list")
	public void list() {
		log.info("리스트");
	}
}

src/main/java

com.sbms.domain

BookVO.java

package com.sbms.domain;

import lombok.Data;

@Data
public class BookVO {
	private Long bookNum;
	private String shelfName;
	private String userId;
	private String bookTitle;
	private String writer;
	private String publisher; 
	private String purchaseDate;
	private int price;
	private String bookReview;
}

서버 기동해서 잘되는지 테스트

http://localhost/

페이지 디자인 예상 결과

왼쪽영역인 개인독서노트 스크롤을 이동해도 항상 고정으로 표시되며, 독서평을 등록하는 영역이다.

오른쪽영역인 내 독서노트는 독서평 등록이 되는 순간, 실시간으로 데이터가 반영되어 표시된다.

또한, 책장별로 검색이 가능하며, 수정 및 삭제가 가능하다.

수정 버튼을 누르면, 수정할 수 있게 왼쪽영역인 개인독서노트 영역에서 수정가능하다.

템플릿 리소스 파일

resources 폴더안에 복사한다.

resources.zip

1.50MB

템플릿 도서관리 페이지 파일

views/book

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Simple Book Manager System</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="/sbms/resources/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/sbms/resources/js/reply.js"></script>
</head>
<body>
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<a class="navbar-brand" href="/sbms/book/list">SBMS</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
	
			<div class="collapse navbar-collapse" id="navbarColor01">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active"><a class="nav-link" href="#">Home
							<span class="sr-only">(current)</span>
					</a></li>
					<li class="nav-item"><a class="nav-link" href="/sbms/book/list">BookManagement</a></li>
					
                        <li class="nav-item">
                        	<a class="nav-link" href="/sbms/customLogout">Logout</a>
                        </li>
                        
                        <li class="nav-item">
                        	<a class="nav-link" href="/sbms/customLogin">Login</a>
                        </li>
					
					<li class="nav-item"><a class="nav-link" href="#">About</a></li>
				</ul>
				<form class="form-inline my-2 my-lg-0">
					<input class="form-control mr-sm-2" type="text" placeholder="Search">
					<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
				</form>
			</div>
		</nav>
		
	<div style="width: 200px;border: 1px solid black; background:#D9E5FF; text-align:center; position: fixed;">
	<form>
		<input id="bookNum" type="hidden"> 
		<h4>개인독서노트</h4>
		
	    <div class="form-group" >
	      <label  class="col-form-label col-form-label-sm" for="exampleSelect1">책장 종류</label>
	      <select class="form-control form-control-sm" id="shelfName" required="required">
					<option value="">책장선택</option>
					<option value="IT">IT</option>
					<option value="외국어">외국어</option>
					<option value="소설">소설</option>
					<option value="교육">교육</option>
	      </select>
	    </div>
	
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">책 이름</label>
		  <input class="form-control form-control-sm" type="text"  placeholder="책 이름을 입력해주세요." id="bookTitle" required="required">
		</div>
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">책 저자</label>
		  <input class="form-control form-control-sm" type="text" placeholder="책 저자 입력해주세요." id="writer" required="required">
		</div>
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">출판사</label>
		  <input class="form-control form-control-sm" type="text" placeholder="출판사를 입력해주세요." id="publisher" required="required">
		</div>
		<div class="form-group">
			<label class="col-form-label col-form-label-sm" for="inputDefault">구매날짜</label> 
			<input type="date" class="form-control form-control-sm" placeholder="구매날짜를 선택해주세요." id="purchaseDate" required="required">
		</div>
		<div class="form-group">
		  <label class="col-form-label col-form-label-sm" for="inputSmall">책 가격</label>
		  <input class="form-control form-control-sm" type="number" placeholder="책 가격을 입력해주세요." id="price" required="required">
		</div>
		<div class="form-group">
			<label class="col-form-label col-form-label-sm" for="inputSmall">독서 평</label>
			<textarea class="form-control form-control-sm" id="bookReview" rows="3" required="required"></textarea>
		</div>
		<div class="form-group">
			<input type="submit" class="btn btn-primary" id="btnReg"  value="독서평 등록"/>
			<button type="button" class="btn btn-danger" id="btnCan" onClick="cancelBookInfo();">취소</button>
		</div>
		
		<br/>
		</form>
	</div>
	<div style="left:201px;  width:1318px; position: absolute; " > 

		<h4>내 독서 노트</h4>
		
		<div align="right">
			<select id="search-shelf" name="type" style="width: 100px;">
				<option value="" selected="selected">전체 책장</option>
				<option value="IT">IT</option>
				<option value="외국어">외국어</option>
				<option value="소설">소설</option>
				<option value="교육">교육</option>
			</select>
			<button type="button" class="btn btn-primary" id="btn-search">검색</button>
		</div>
		
		<table class="table table-hover myBookList" >
			<thead>
			<tr>
		      <th scope="row">책장명</th>
		      <th scope="row">책이름</th>
		      <th scope="row">저자</th>
		      <th scope="row">출판사</th>
		      <th scope="row">구매날짜</th>
		      <th scope="row">책가격</th>
		      <th scope="row">독서평</th>
		      <th scope="row">삭제</th>
		    </tr> 
			</thead>
		  <tbody>
		   <tr>
		      <th scope="row">IT</th>
		      <td>자바 웹 프로그래밍</td>
		      <td>미노쿠마</td>
		      <td>미노북스</td>
		      <td>2020-01-11</td>
		      <td>35000</td>
		      <td>실습할 수 있어서 아주 좋다.</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr> 
		    
 		    <tr class="table-primary">
		      <th scope="row">Primary</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-secondary">
		      <th scope="row">Secondary</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-success">
		      <th scope="row">Success</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-danger">
		      <th scope="row">Danger</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-warning">
		      <th scope="row">Warning</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-info">
		      <th scope="row">Info</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-light">
		      <th scope="row">Light</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr>
		    <tr class="table-dark">
		      <th scope="row">Dark</th>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>Column content</td>
		      <td>
		      	<button type="button" class="btn btn-outline-success">수정</button>
				<button type="button" class="btn btn-outline-info">삭제</button>
			  </td>
		    </tr> 
		  </tbody>
		</table>
	</div>
</html>

템플릿 헤더 파일

views/includes

header.jsp

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

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SBMS PROJECT C : SB Admin 2 - Bootstrap Admin Theme</title>

    <!-- Bootstrap Core CSS -->
    <link href="/resources/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="/resources/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="/resources/vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="/resources/vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/resources/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/resources/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/board/list">SBMS PROJECT C</a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>Read All Messages</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-tasks">
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 1</strong>
                                        <span class="pull-right text-muted">40% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 2</strong>
                                        <span class="pull-right text-muted">20% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                            <span class="sr-only">20% Complete</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 3</strong>
                                        <span class="pull-right text-muted">60% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 4</strong>
                                        <span class="pull-right text-muted">80% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                            <span class="sr-only">80% Complete (danger)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Tasks</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-tasks -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small">12 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-tasks fa-fw"></i> New Task
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Alerts</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        
                        <li>
                        	<a href="/customLogin"><i class="fa fa-sign-out fa-fw"></i> Login</a>
                        </li>
                        
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="#">Flot Charts</a>
                                </li>
                                <li>
                                    <a href="#">Morris.js Charts</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="/board/list"><i class="fa fa-table fa-fw"></i> Tables</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-edit fa-fw"></i> Forms</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="#">Panels and Wells</a>
                                </li>
                                <li>
                                    <a href="#">Buttons</a>
                                </li>
                                <li>
                                    <a href="#">Notifications</a>
                                </li>
                                <li>
                                    <a href="#">Typography</a>
                                </li>
                                <li>
                                    <a href="#"> Icons</a>
                                </li>
                                <li>
                                    <a href="#">Grid</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="#">Second Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Second Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level <span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                    </ul>
                                    <!-- /.nav-third-level -->
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="#">Blank Page</a>
                                </li>
                                <li>
                                    <a href="#">Login Page</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <div id="page-wrapper">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

템플릿 헤더 파일

views/includes

footer.jsp

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

    <!-- jQuery -->
    <!-- <script src="/resources/vendor/jquery/jquery.min.js"></script> -->

    <!-- Bootstrap Core JavaScript -->
    <script src="/resources/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="/resources/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- DataTables JavaScript -->
    <script src="/resources/vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/resources/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="/resources/vendor/datatables-responsive/dataTables.responsive.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="/resources/dist/js/sb-admin-2.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
    	
        $('#dataTables-example').DataTable({
            responsive: true
        });
        
        $(".sidebar-nav")
        	.attr("class","sidebar-nav navbar-collapse collapse")
        	.attr("aria-expanded",'false')
        	.attr("style","height:1px");
    });
    </script>
	
</body>

</html>

도서관리페이지가 잘뜨는지 확인

http://localhost/sbms/book/list

'Project C (SBMS) > Project C 파트1' 카테고리의 다른 글

[C-1-3] 데이터베이스 테이블 및 시퀀스 설계 (0)	2020.01.20
[C-1-1] 오라클 DB 유저 생성 및 테이블 스페이스 생성 (0)	2020.01.20
Project C 개요 (0)	2020.01.19

LIFE CODING OF MINOKUMA

LIFE CODING OF MINOKUMA

태그

최근글

댓글

공지사항

아카이브

'Project C (SBMS) > Project C 파트1' 카테고리의 다른 글

관련글

티스토리툴바