- 사용 기술 : Java, JSP, Oracle, Bootstrap, CSS, HTML
- 오늘의 기술 : JSP, Bootstrap
- 사용 툴 : Eclipse
안녕하세요 하모예입니다.
지난번 세상에서 가장 간단한 로그인 시리즈에서는 말그대로 "세상에서 가장 간단한 로그인"을 보여드림으로써 JDBC를 처음 접하신분들께 도움이 되었으면 하는 마음에서 회원가입없이 DB에 데이터를 삽입해서 제대로 구현이 되었는지 확인했고, 이로 인해 아쉬움이 많이 남았었습니다.
따라서 이번 시리즈, 세상에서 두번째로 쉬운 로그인에서는 실제로 회원가입 로직을 구현하여, 회원가입을 통해 아이디를 생성하고, 로그인을 하는 방향으로 구성을 하려 합니다.
또한 로그인과 회원가입 모두 데이터베이스에 접속해야하기 때문에 이 과정에서 두 로직에 모두 공통적으로 사용되는 공통 메소드들을 모아놓은 JDBCTemplate 클래스를 만들어서 좀 더 쉽게 JDBC에 접근할 수 있도록 하겠습니다.
우선, Eclipse를 설치하고, 기본적인 설정을 하는 방법은 아래 게시물에 가시면 자세히 나와있습니다.
아래 게시물을 보시고, utf-8설정, dynamic web project만드는 방법을 익히신 후 오늘의 포스팅을 봐주시면 더 쉽게 접근하실 수 있습니다.
1-1.Eclipse에 JSP로 시작화면 만들기
(이 글은 기본적으로 Eclipse, Sql Developer 설치가 완료된 상태를 가정하고 작성되었습니다.) 사용 기술 : Java, JSP, Oracle, Bootstrap, CSS, HTML 오늘의 기술 : JSP 사용 툴 : Eclipse 안녕하세요 하모예입..
hamoye.tistory.com
상단의 포스팅을 모두 따라하셨다는 가정하에 본격적으로 설명을 시작하겠습니다.
지난 프로젝트보다 조금 더 발전된 프로젝트인만큼 오늘은 index.jsp에 상단 메뉴바를 만들어서
메뉴바에서 로그인, 회원가입에 접근할 수 있도록 만들어보겠습니다.
먼저 web폴더 밑에 index.jsp를 만들어 줍니다.
web폴더에서 우클릭을 하시고 [New] - [JSP File]을 선택하신 후 file name을 index.jsp로 하시면 됩니다.
시작화면의 파일명을 index외에 다른 것으로 하고 싶으시다면 WEB-INF 아래에 있는 web.xml 파일에 가셔서
<welcome-file>파일명.확장자</welcome-file>를 추가하시면 됩니다.
이제 index.jsp에 메뉴바를 만들어 보겠습니다.
오늘 제가 활용할 bootstrap의 출처는 w3schools입니다.
www.w3schools.com/bootstrap4/bootstrap_navbar.asp
Bootstrap 4 Navigation Bar
Bootstrap 4 Navigation Bar Navigation Bars A navigation bar is a navigation header that is placed at the top of the page: Logo Link Link Disabled Basic Navbar With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard
www.w3schools.com
이 중에서도 저는 화면 사이즈가 줄어들었을때 메뉴들이 햄버거 메뉴로 정리되는 메뉴바를 선택했습니다.
navbar 코드를 보여드리기 전에 JSP File을 생성했을때 보여지는 기본코드에 대한 간략한 설명을 해드리겠습니다.
처음 JSP File을 생성하시고, 다른 설정을 하시지 않는다면 기본 코드는 아래와 같습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html><%@로 시작하는 부분의 이름은 페이지 디렉티브로,
여기에 JSP 페이지에 대한 정보를 여러 속성들을 사용해서 정의합니다.
JSP 페이지의 스크립트 요소에서 사용할 언어는 java이며, JSP가 생성할 문서의 타입은 text로 된 html,
인코딩은 utf-8로 한다는 의미가 들어가 있습니다.
본래 JSP는 html의 똑똑한 자식중에 하나기때문에 html 문서의 시작과 끝을 알리는 html태그로 시작하며,
그 안에 html문서에 관한 기본 정보들을 포함하는 head태그와
실제로 화면에 나타나는 내용을 기술하는 body태그로 나눠집니다.
그렇기 때문에 보통, <link>, <style>, <meta>, <title>처럼 화면 외적인 요소들은 <head>태그 안에
<div>, <button>,<form>, <ul>,<li>,<a>와 같이 직접적으로 화면을 구성하는 요소들은 <body>태그 안에 적습니다.
따라서 w3schools에 있는 코드를 참조해서 작성할때는 boostrap을 불러올 수 있는 cdn 태그들은 <head>안에,
그리고 <nav>태그로 시작되는 화면 구성 태그들은 <body>안에 넣으시면 됩니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시작화면</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">HAMOYE</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">회원가입</a>
</li>
</ul>
</div>
</nav>
</body>
</html>화면 사이즈가 작아질때 햄버거 메뉴바가 나오는 navbar(메뉴바)를 만들기 위해서 핵심이 되는 속성은
data-toggle과 data-darget입니다.
큰 <nav>태그 안에 navbar-toggler 클래스 속성으 가지는 <button>을 만들고 data-toggle="collapse"를 붙여준 다음,
data-target을 nav-item들어있는 div의 아이디와 동일하게 해주면 간단하게 만들 수 있습니다.
코드를 모두 작성하셨으면 index.jsp로 가서 Ctrl+F11을 눌러주시면~
아래와 같은 화면을 보실 수 있습니다.
여기서 화면의 사이즈를 줄여주면~~
이렇게 햄버거 메뉴버튼이 생기면서 로그인, 회원가입 메뉴가 안으로 쏙 들어갑니다.
다시한번 Bootstrap의 존재에 경외를 표하게 되는 순간입니다.
다음시간에는 로그인 버튼을 누르면 로그인 창이 뜨게 해보겠습니다.
끝까지 읽어주셔서 감사합니다.
'개발 > 세상에서 두번째로 쉬운 로그인' 카테고리의 다른 글
| 1-3. 부트스트랩 Form Validation 사용하기 (0) | 2020.11.02 |
|---|---|
| 1-2.로그인 모달(modal)창 만들기 (0) | 2020.11.01 |
댓글