[ 1. 스프링 legacy project로 웹 프로젝트 작성 : 화면 꾸미기 ]

1. 스프링 툴 슈트(STS) 플러그인이 설치된 이클립스에서 File>New>Other>Spring>Spring legacy project> … Spring MVC project 를 생성한다

2. https://startbootstrap.com/ 같은 사이트를 참조하여 마음에 드는 부트스트랩 화면을 고른 뒤 소스를 다운 받는다

3. 내 프로젝트의 webapp 디렉토리 밑에 화면 소스를 붙여 넣는다

4. web.xml에서 `<url-pattern>*.pcm</url-pattern>` 이와 같은 식의 url을 설정한다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>
	
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
		
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>*.pcm</url-pattern>
	</servlet-mapping>

</web-app>

5. HomeController.java는 다음과 같은 형태로 수정한다

package com.ssafy.web;

import org.springframework.stereotype.Controller;

@Controller
public class HomeController {
	
}

6. 이 프로젝트를 가동하여 index.html이 보이는지 확인한다

7. 적당한 이미지를 추가해 화면을 꾸며본다 (이미지:버거킹 홈페이지 참조했음)

8. 다음을 참조하여 회원가입 링크를 만들어 본다

index.html에 nav 부분에 다음과 같은 코드를 삽입한다.

<li class="nav-item"><a class="nav-link" href="#" onclick="window.open('html/memberInsertForm.html', '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=500,width=400,height=750');">회원가입</a></li>

9. webapp/html/memberInsertForm.html을 다음을 참조하여 작성한다.

다음과 같은 위치에 아래 코드를 삽입합니다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/my.js"></script>

</head>
<body>
	<article class="container">
            <div class="page-header">
                <div class="col-md-6 col-md-offset-3">
                <h3>회원가입 Form</h3>
                </div>
            </div>
            <div class="col-sm-6 col-md-offset-3">
                <form role="form">
                    <div class="form-group">
                        <label for="inputName">성명</label>
                        <input type="text" class="form-control" id="name" placeholder="이름을 입력해 주세요">
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">ID</label>
                        <input type="text" class="form-control" id="id" placeholder="ID를 입력해주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputPassword">비밀번호</label>
                        <input type="password" class="form-control" id="pw" placeholder="비밀번호를 입력해주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordCheck">비밀번호 확인</label>
                        <input type="password" class="form-control" id="inputPasswordCheck" placeholder="비밀번호 확인을 위해 다시한번 입력 해 주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputMobile">휴대폰 번호</label>
                        <input type="tel" class="form-control" id="inputMobile" placeholder="휴대폰번호를 입력해 주세요">
                    </div>
                    <div class="form-group">
                        <label for="inputtelNO">사무실 번호</label>
                        <input type="tel" class="form-control" id="inputtelNO" placeholder="사무실번호를 입력해 주세요">
                    </div>

                    <div class="form-group">
                    <label>약관 동의</label>
                    <div data-toggle="buttons">
                    <label class="btn btn-primary active">
                    <span class="fa fa-check"></span>
                    <input id="agree" type="checkbox" autocomplete="off" checked>
                    </label>
                    <a href="#">이용약관</a>에 동의합니다.
                    </div>
                    </div>

                    <div class="form-group text-center">
                        <input type="button" id="memberInsertBtn" class="btn btn-primary"
                        value="회원가입">
                        <button type="submit" class="btn btn-warning">
                            가입취소<i class="fa fa-times spaceLeft"></i>
                        </button>
                    </div>
                </form>
            </div>

        </article>
</body>
</html>

10. 여기까지 확인

다음으로는 회원가입 처리를 한다.

Author And Source

이 문제에 관하여([ 1. 스프링 legacy project로 웹 프로젝트 작성 : 화면 꾸미기 ]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@fe26min/1.-스프링-legacy-project로-웹-프로젝트-작성-화면-꾸미기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)