본문 바로가기
JSP

Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(3) - 부트스트랩을 이용한 웹 폼 만들기

by 김마리님 2020. 5. 29.

웹페이지를 만들다보면 CSS 덕분에 시간이 다 가는 경우가 있다. 우리는.. 일단 프론트엔드가 위주가 아니므로 편리한 부트스트랩을 이용하고자 한다. 부트스트랩은 트위터가 만든 프론트엔드 오픈소스이며 부트스트랩을 이용하면 시멘틱 코드를 걱정할 필요도 없고, 필요로 한다면 확장도 가능하다.

 

부트스트랩에 대한 간단한 코드를 보려면 여기를 가보자(필자도 여기 코드 이용함)

https://www.w3schools.com/bootstrap4/default.asp

 

가장 처음 만들 것은 네비게이션 바, 통칭 navbar이다. 웹페이지의 이 부분을 말한다(github 홈페이지).

이 부분은 시멘틱 코드의 header 부분인데, 이 부분도 부트스트랩을 이용하면 빠르게 만들 수 있다.

w3school의 메뉴 중에 navbar 메뉴가 있다.

 

메뉴를 들어가면 원하는 다양한 형태의 navbar 형태가 있는데(쓰고 싶은 형태 골라 쓰면 된다), 필자는 collspan을 이용했다(화면이 클 때는 늘어났다가, 화면이 작아지면 버튼 형태로 변하는 반응형 브라우저식 네비게이션 바)

 

여기 있는 버튼을 눌러야만! jQuery를 깔지 않아도 라이브러리를 호스팅 하는 cdn 코드가 나오니까, 이걸 꼭 눌러서 복사하기를 바란다.

 

그런데, 네비게이션 바는 홈페이지의 어떤 부분으로 가더라도 떠있어야만 하는 부분이다. 이 부분을 홈페이지마다 일일히 붙이고 있을 순 없으므로 네비게이션 바만 똑 떼어 다른 파일로 만들어둔다.

 

-nav.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mary Blog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="index.jsp">Mary Blog</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/blog/user?cmd=login">로그인</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/blog/user?cmd=join">회원가입</a>
      </li>  
    </ul>
  </div>  
</nav>
<br>

 

우리는 홈으로 들어왔을 때, 내가 쓴 다양한 글을 간단히 볼 수 있는 홈을 구현하고자 한다.

이를 이용하기 위해서 부트스트랩에 있는 카드 기능을 이용할 것이다. 아까 하듯이 w3school에서 카드를 찾는다.

카드의 링크를 찾아 들어가면 블로그 글의 전문을 볼 수 있는 블로그 레이아웃을 원하므로, 링크 기능이 있는 부트스트랩의 코드를 가져오자.

 

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

<%@ include file="include/nav.jsp" %>

<div class="container">

	<div class="card m-2" style="width:100%">
	  <div class="card-body">
	    <h4 class="card-title">제목이 들어가는 자리</h4>
	    <p class="card-text">본문 미리 보기...</p>
	    <a href="#" class="btn btn-primary">상세보기</a>
	  </div>
	</div>
	
	<div class="card m-2" style="width:100%">
	  <div class="card-body">
	    <h4 class="card-title">제목이 들어가는 자리</h4>
	    <p class="card-text">본문 미리 보기...</p>
	    <a href="#" class="btn btn-primary">상세보기</a>
	  </div>
	</div>
	
	<div class="card m-2" style="width:100%">
	  <div class="card-body">
	    <h4 class="card-title">제목이 들어가는 자리</h4>
	    <p class="card-text">본문 미리 보기...</p>
	    <a href="#" class="btn btn-primary">상세보기</a>
	  </div>
	</div>
</div>

 

먼저, 떼어 만들어둔 네비게이션 바를 불러오기 위해 include 코드를 이용한다. (네번째 줄)

이 때, jsp 파일을 불러올 시 주의할 점이 있다. 불러오는 방법이 두 가지라는 점이다.

 

1. include jsp = "파일 경로"

이 방법의 경우 컴파일을 하지 않고 가져오기 때문에, 만일 변수를 출력하지 않고 가져온다면 변수자리에 null을 띄우게 된다.

 

2. include file = "파일 경로"

이 방법의 경우 가져온 이후에 컴파일을 하기 때문에 변수를 출력하지 않고 가져오더라도 가져온 후에 컴파일을 해서 변수값을 유지할 수 있다.

 

이 두 가지를 숙지해서 사용해야만 한다. 이렇게 include를 이용하면, 내부에 있는 코드를 그대로 복사해서 붙여주듯 붙여주게 된다. (그래서 head와 body 여는 태그를 nav가 가지고 있다.)

 

div card 앞에 m-2는 카드 사이에 있는 간격을 가리키는 명령어이다.

 

일단 출력물을 보자.

 

 

이렇게 결과물이 세로 한줄로 주루룩 출력되는데, 이 것이 싫을수도 있다. 이것을 해결하는 방법은 다음과 같다.

다음 그림을 보자.

 

출처 : w3school

 

부트스트랩의 경우 화면을 이렇게 12분할을 하여 사용한다. 만약에 내가 한 칸에 세 개의 카드를 두고 싶다면 추가적인 명령어를 이용하면 된다.

<div class="card m-2 sm-4" style="inline-block">

의 코드를 이용하면 가로로 출력이 가능하다.

 

 

시멘틱 코드의 header이 있다면 footer도 있다. footer역시 사이트 어느 쪽으로 이동하든 존재하므로 footer 역시 코드를 따로 분리한다.

footer은 코드가 따로 w3school에서 제공하지는 않고, bootstrap 4 tamplet에 있다. 

Demo에서 footer 위에 오른쪽 마우스 -> 검사를 누르면 코드가 등장한다. 이 코드를 복사해서 붙여넣으면 footer 코드가 완성된다.

 

-footer.jsp

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

<br/><br/>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Create by Mary 2020-05-29</p>
  <p>🏴 부산진구 중앙대로 708</p>
  <p>📞 010-2222-8888</p>
</div>
</body>
</html>

 

※footer속 이모지를 이용하는 방법

작업 표시줄을 누르고 -> 화상 키보드를 띄운 후 모바일에서 하듯 이모지 버튼을 누르면 된다. UTF-8에서도 적용됩니다~

 

이제 footer 코드를 붙인 메인 화면과 나타나는 모습을 보자.

 

-home.jsp

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

<%@ include file="include/nav.jsp" %>

<div class="container">

	<div class="card m-2" style="width:100%">
	  <div class="card-body">
	    <h4 class="card-title">제목이 들어가는 자리</h4>
	    <p class="card-text">본문 미리 보기...</p>
	    <a href="#" class="btn btn-primary">상세보기</a>
	  </div>
	</div>
	
	<div class="card m-2" style="width:100%">
	  <div class="card-body">
	    <h4 class="card-title">제목이 들어가는 자리</h4>
	    <p class="card-text">본문 미리 보기...</p>
	    <a href="#" class="btn btn-primary">상세보기</a>
	  </div>
	</div>
	
	<div class="card m-2" style="width:100%">
	  <div class="card-body">
	    <h4 class="card-title">제목이 들어가는 자리</h4>
	    <p class="card-text">본문 미리 보기...</p>
	    <a href="#" class="btn btn-primary">상세보기</a>
	  </div>
	</div>
</div>

<%@ include file="include/footer.jsp" %>

다음과 같이 두 개가 나타난 것을 볼 수 있다.

 

다음은 회원가입 / 로그인 페이지를 만들어보자.

당연히 부트스트랩에 form 형태가 있다.

로그인이나 회원가입을 할 때, 폼이 비어있거나 입력 형태가 잘못되면 잘못 입력되었다고 경고를 띄우는 것을 볼 수 있을 것이다. 이것을 유효성 검사라고 한다. 이것을 validation 이라고 하는데, 폼 중에서도 validation을 선택할 것이다.

 

이번에는 Try it yourself가 아니라, 그 코드를 그대로 가져올 것이다. 이전에 nav 코드 내부에 cdn 코드가 다 존재하기 때문이다! 이것만 가져오자.

 

- login.jsp

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

<%@ include file="../include/nav.jsp" %>

<div class="container">
	<form action="/blog/user?cmd=loginProc" method="post" class="was-validated">
	  <div class="form-group">
	    <label for="username">Username:</label>
	    <input type="text" class="form-control" id="username" placeholder="Enter username" name="username" required>
	    <div class="valid-feedback">Valid.</div>
	    <div class="invalid-feedback">Please fill out this field.</div>
	  </div>
	  
	  <div class="form-group">
	    <label for="password">Password:</label>
	    <input type="password" class="form-control" id="password" placeholder="Enter password" name="password" required>
	    <div class="valid-feedback">Valid.</div>
	    <div class="invalid-feedback">Please fill out this field.</div>
	  </div>
	
	  <div class="form-group form-check">
	    <label class="form-check-label">
	      <input class="form-check-input" type="checkbox" name="remember" required> 아이디 기억하기.
	      <div class="valid-feedback">Valid.</div>
	      <div class="invalid-feedback">Check this checkbox to continue.</div>
	    </label>
	  </div>
	 
	  <button type="submit" class="btn btn-primary">로그인</button>
	</form>
</div>

<%@ include file="../include/footer.jsp" %>

 

회원가입도 마찬가지다. 다만, 회원가입은 아이디와 비밀번호만 치는 것이 아니라, 주소와 이메일 등의 개인정보도 함께 입력하게 되므로 그것을 입력할 폼도 추가로 생성한다. (프로필 사진은 처음부터 추가하지 않는다.)

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

<%@ include file="../include/nav.jsp" %>

<div class="container">
	<form action="/blog/user?cmd=joinProc" method="POST" class="was-validated">
	  
	  <div class="form-group">
	    <label for="username">Username:</label>
	    <input type="text" class="form-control" id="username" placeholder="Enter username" name="username" required>
	    <div class="valid-feedback">Valid.</div>
	    <div class="invalid-feedback">Please fill out this field.</div>
	  </div>
	  
	  <div class="form-group">
	    <label for="pwd">Password:</label>
	    <input type="password" class="form-control" id="password" placeholder="Enter password" name="password" required>
	    <div class="valid-feedback">Valid.</div>
	    <div class="invalid-feedback">Please fill out this field.</div>
	  </div>
	  
	  <div class="form-group">
	    <label for="email">Email:</label>
	    <input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" required>
	    <div class="valid-feedback">Valid.</div>
	    <div class="invalid-feedback">Please fill out this field.</div>
	  </div>
	  
	  <div class="form-group">
	    <label for="address">Address:</label>
	    <input type="text" class="form-control" id="address" placeholder="Enter Address" name="address" required>
	    <div class="valid-feedback">Valid.</div>
	    <div class="invalid-feedback">Please fill out this field.</div>
	  </div>

	  <button type="submit" class="btn btn-primary">회원가입 완료</button>
	</form>
</div>

<%@ include file="../include/footer.jsp" %>

이 때, 필자가 생성한 파일의 구조를 보면,

다음과 같이 만들어져있다. home같은 경우는 include의 상위에 있기 때문에 바로 찾아가도 되지만, login과 join은 상위폴더로 나와서, 다시 찾아가야 하기 때문에 ../를 함께 입력했다.

action을 설정해주어야 한다. login 폼에 입력한 데이터는 loginProc로 전달되어 데이터베이스랑 연결될 것이고, 마찬가지로 join 폼에 입력한 데이터는 joinProc로 전달되어 데이터베이스로 이동할 것이다. 그렇기 때문에 form이 누구와 연결될 것인지 결정하는 action 속성을 결정해주는 것도 잊지 않도록 하자.

 

부트스트랩을 이용해 웹폼까지 만든 형태는 다음과 같다.

 

 

 

다음 포스팅에서는 폼과 데이터베이스를 연결해서 값을 집어넣고, 로그인을 할 것이다.

반응형

'JSP' 카테고리의 다른 글

Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(5) - 세션과 로그아웃  (0) 2020.06.01
Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(4) - 로그인 하기  (0) 2020.05.29
Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(2) - 웹에서 데이터베이스로 값 넣기  (0) 2020.05.28
Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(1) - 기본 세팅하기  (0) 2020.05.28
1. JSP지시어  (0) 2020.05.27

관련글

티스토리툴바