김은옥씨가 지은 은노기의 JSP2.3 웹프로그래밍에 나오는 shoppingmall 프로그램을 돌려보기 위한 참고사항을 적어본다.

소스코드는 아래에 첨부한다.

shoppingmall.zip
3.43MB

이 프로그램은 데이터베이스로 MySQL을 사용하였다. 나는 v8.0.13을 사용하였다.

위 소스코드 중 WebContent/WEB-INF/sql/database.sql 파일을 참조한다.

다음과 같이 데이터베이스 및 사용자를 생성하고 권한을 부여해준다. (root 권한으로 실행한다.)

-- 은노기 shoppingmall 프로젝트
create database jsptest;
create user 'jspid'@'localhost' identified by 'jsppass';
create user 'jspid'@'%' identified by 'jsppass';
grant all privileges on jsptest.* to 'jspid'@'localhost';
grant all privileges on jsptest.* to 'jspid'@'%';
commit;

다음과 같이 테이블과 사용자 데이터를 추가한다.

create table member(
  id varchar(50) not null primary key,
  passwd varchar(16) not null,
  name varchar(10) not null,
  reg_date datetime not null
);

alter table member
     add (address varchar(100) not null,
          tel varchar(20) not null);
          
desc member;

insert into member(id, passwd, name, reg_date, address, tel) 
values('kingdora@dragon.com','1234','김개동', now(), '서울시', '010-1111-1111');

insert into member(id, passwd, name, reg_date, address, tel) 
values('hongkd@aaa.com','1111','홍길동', now(), '경기도', '010-2222-2222');

select * from member;

alter table member modify passwd varchar(60) not null;

create table board(
  num int not null primary key auto_increment,
  writer varchar(50) not null,
  subject varchar(50) not null,
  content text not null,
  passwd varchar(60) not null,
  reg_date datetime not null,
  ip varchar(30) not null,
  readcount int default 0,
  ref int not null,
  re_step smallint not null,
  re_level smallint not null
);

desc board;

--쇼핑몰

create table manager(
 managerId varchar(50) not null primary key,
 managerPasswd varchar(60) not null
);

insert into manager(managerId,managerPasswd)
values('bookmaster@shop.com','123456');

insert into manager(managerId,managerPasswd)
values('ksseo63@naver.com','ekffksxm0');

create table book(
  book_id int not null primary key auto_increment,
  book_kind varchar(3) not null,
  book_title varchar(100) not null,
  book_price int not null,
  book_count smallint not null,
  author varchar(40) not null,
  publishing_com varchar(30) not null,
  publishing_date varchar(15) not null,
  book_image varchar(16) default 'nothing.jpg',
  book_content text not null,
  discount_rate tinyint default 10,
  reg_date datetime not null
);

create table qna(
  qna_id int not null primary key auto_increment,
  book_id int not null,
  book_title varchar(100) not null,
  qna_writer varchar(50) not null,
  qna_content text not null,
  group_id int not null,
  qora tinyint not null,
  reply tinyint default 0,
  reg_date datetime not null
);

create table bank(
  account varchar(30) not null,
  bank varchar(10) not null,
  name varchar(10) not null
);

insert into bank(account, bank, name)
values('11111-111-11111','내일은행','오내일');

create table cart(
  cart_id int not null primary key auto_increment,
  buyer varchar(50) not null,
  book_id int not null,
  book_title varchar(100) not null,
  buy_price int not null,
  buy_count tinyint not null,
  book_image varchar(16) default 'nothing.jpg'
);

create table buy(
  buy_id bigint not null,
  buyer varchar(50) not null,
  book_id varchar(12) not null,
  book_title varchar(100) not null,
  buy_price int not null,
  buy_count tinyint not null,
  book_image varchar(16) default 'nothing.jpg',
  buy_date datetime not null,
  account varchar(50) not null,
  deliveryName varchar(10) not null,
  deliveryTel varchar(20) not null,
  deliveryAddress varchar(100) not null,
  sanction varchar(10) default '상품준비중'
);

데이터베이스 연동을 위한 설정은 WebContent/META-INF/context.xml을 참조한다.

<?xml version="1.0" encoding="UTF-8"?>
<Context>
	<Resource auth="Container" driverClassName="com.mysql.jdbc.Driver" maxWait="5000" name="jdbc/eun" password="jsppass" type="javax.sql.DataSource" url="jdbc:mysql://localhost:3306/jsptest?useSSL=false" username="jspid"/>
</Context>

또한 MySQL JDBC Connector 파일도 자신이 사용하는 MySQL Server 버전에 맞추어 변경해 주어야 한다. 이것은 studyjsp와 shoppingmall 프로젝트의 WebContent/WEB-INF/lib 폴더 밑에 있는 JDBC Connecctor 라이브러리에 대하여 맞추어 주어야 한다. 나는 v8.0.13을 사용하므로 mysql-connector-java-8.0.13.jar로 변경해 주었다. (기존에는 5.x.x 버전을 사용)

사용자에 대한 암호를 암호화하기 위해서는 9장에 있는 cryptProcess.jsp를 구동해 주어야 한다. (http://localhost:8080/shoppingmall/ch09/cryptProcess.jsp)

이는 studyjsp 프로젝트 폴더에 있는 소스코드를 shoppingmall 프로젝트 폴더로 복사하여 사용하였다.

은노기의 JSP2.3 웹프로그래밍 9장 375p에 자세한 설명이 되어 있다.

다음은 ch09/cryptProcess.jsp 파일에 대한 내용이다.

<%@page import="ch09.update.UpdateDBBean"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.util.List" %>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css"/>

<h3>암호화 전 내용</h3>
<jsp:include page="cryptProcessList.jsp" flush="false"/>

<%
  UpdateDBBean dbPro = UpdateDBBean.getInstance();
  dbPro.updateMember();
%>

<h3>암호화가 적용된 후 내용</h3>
<jsp:include page="cryptProcessList.jsp" flush="false"/>

또한 관리자 계정의 비밀번호도 암호화를 수행하여야 하며, 브라우저에서http://localhost:8080/shoppingmall/enc/cryptProcess.jsp를 수행하면 된다.

cryptProcess.jsp에 대한 소스 코드는 아래와 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.util.List" %>
<%@ page import = "mngr.enc.PassCrypt" %>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

<%
  PassCrypt dbPro = PassCrypt.getInstance();
  dbPro.cryptProcess();
  out.println("암호화 성공! 꼭 한번만 수행");
%>
 

소스코드에 대한 동작을 확인하기 위해서는 관리자로 로그인하여 책에 대한 상품등록을 카테고리별로 3권씩 등록을 해주면 좋을 것 같다. (인터파크 등을 참고하면 쉽게 할 수 있음)

Posted by 세상을 살아가는 사람
,

이전 게시글에서는 커스텀 로그인 폼을 적용하여 로그인을 수행하였다. Authentication Provider를 사용하여 회원정보 테이블을 사용하여 UserDetailsService를 사용하여 사용자 프로파일을 세션에 저장하여 시큐리티에서 사용하도록 하였다.

여기서는 시큐리티 적용에 따른 세션 principal 정보를 이용하여 로그인 여부에 따른 메뉴를 다르게 보여주도록 하고, 로그아웃 처리를 하고자 한다.

현재 오른쪽 위에 있는 Dropdown 메뉴는 아래 그림과 같이 임의의 메뉴를 배치하여 자리만 확보하고 있는 상태이다. 이것을 로그인 여부에 따라 메뉴를 달리하도록 수정한다.

로그인 여부에 따라 메뉴를 다르게 하기 위하여 시큐리티에서 로그인 여부를 나타내는 sec:authorize="isAuthenticated()"나 sec:authorize="isAnonymous()"를 사용하여 메뉴를 달리한다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="setContent(content)">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<title>Talanton 스프링 부트 홈 페이지</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" th:href="@{/assets/favicon.ico}" />
<!-- Core theme CSS (includes Bootstrap)-->
<link th:href="@{/css/styles.css}" rel="stylesheet" />
<!-- Bootstrap core JS-->
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/scripts.js}"></script>
</head>
<body>
<div class="d-flex" id="wrapper">
	<!-- Sidebar-->
	<div class="border-end bg-white" id="sidebar-wrapper">
		<div class="sidebar-heading border-bottom bg-light">Start
			Bootstrap</div>
		<div class="list-group list-group-flush">
			<a class="list-group-item list-group-item-action list-group-item-light p-3"
				href="#!">Dashboard</a>
			<a class="list-group-item list-group-item-action list-group-item-light p-3"
				href="#!">Shortcuts</a>
			<a class="list-group-item list-group-item-action list-group-item-light p-3"
				href="#!">Overview</a>
			<a class="list-group-item list-group-item-action list-group-item-light p-3"
				href="#!">Events</a>
			<a class="list-group-item list-group-item-action list-group-item-light p-3"
				href="#!">Profile</a>
			<a class="list-group-item list-group-item-action list-group-item-light p-3"
				href="#!">Status</a>
		</div>
	</div>
	<!-- Page content wrapper-->
	<div id="page-content-wrapper">
		<!-- Top navigation-->
		<nav
			class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
			<div class="container-fluid">
				<button class="btn btn-primary" id="sidebarToggle">Toggle
					Menu</button>
				<button class="navbar-toggler" type="button"
					data-bs-toggle="collapse"
					data-bs-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent" aria-expanded="false"
					aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
						<li class="nav-item active"><a class="nav-link" href="#!">Home</a></li>
						<li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
						<li class="nav-item dropdown"><a
							class="nav-link dropdown-toggle" id="navbarDropdown" href="#"
							role="button" data-bs-toggle="dropdown" aria-haspopup="true"
							aria-expanded="false">Dropdown</a>
							<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
								<a sec:authorize="isAuthenticated()" class="dropdown-item logoutBtn" href="#">Logout</a>
                            	<a sec:authorize="isAuthenticated()" class="dropdown-item" th:href="@{/member/profile(email=${#authentication.principal.member.email})}">MyPage</a>
                            	<a sec:authorize="isAnonymous()" class="dropdown-item" href="/member/login">Login</a>
                            	<a sec:authorize="isAnonymous()" class="dropdown-item" href="/member/join">Join</a>
                            	<a sec:authorize="isAnonymous()" class="dropdown-item" href="#">아이디 찾기</a>
                            	<a sec:authorize="isAnonymous()" class="dropdown-item" href="#">비밀번호 찾기</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- Page content-->
		<div class="container-fluid">
			<th:block th:replace = "${content}"></th:block>
		</div>
	</div>
</div>
<script>
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

// 사이드바 메뉴 토글
$("#sidebarToggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

// 로그아웃 처리
$(".logoutBtn").click(function(e) {
	e.preventDefault();
	$.ajax({
		url: '/member/logout',
		type: 'post',
		// CSRF 토큰 값을 헤더로 전송
		beforeSend: function(xhr) {
		    xhr.setRequestHeader(header, token);
		},
		success: function(data) {
			alert("로그아웃 되었습니다.");
			location.href = "/member/login";
		}
	});
});
</script>
</body>
</th:block>
</html>

로그인이 되지 않은 경우 아래와 같은 메뉴가 보여진다.

Login 메뉴를 클릭한 후 로그인을 거치면 다음과 같이 메뉴가 표시됨을 알 수 있다.

이전에 구현한 것이지만 Toggle Menu 버튼을 누르면 왼쪽의 sidebar 메뉴가 토글되는 것을 역시 확인할 수 있다. 이 부분은 basic.html의 하단부에 있는 자바스크립트에서 메뉴에 대하여 이벤트를 등록하고 이벤트가 발생하면 sidebar 메뉴를 토글시켜줌으로써 동작시킬 수 있다.

<script>
$("#sidebarToggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>

로그아웃 처리는 오른쪽 위의 Dropdown 메뉴를 누르면 Logout 메뉴가 나타나는데, 그것을 누르면 basic.html 하단에서 자바스크립트에서 이벤트로 처리를 한다

<!-- head 영역에 저장 -->
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

<!-- 자바스크립트 영역 -->
<script>
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

// 사이드바 메뉴 토글
$("#sidebarToggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

// 로그아웃 처리
$(".logoutBtn").click(function(e) {
	e.preventDefault();
	$.ajax({
		url: '/member/logout',
		type: 'post',
		// CSRF 토큰 값을 헤더로 전송
		beforeSend: function(xhr) {
		    xhr.setRequestHeader(header, token);
		},
		success: function(data) {
			alert("로그아웃 되었습니다.");
			location.href = "/member/login";
		}
	});
});
</script>

.basic.html의 <head> 영역에서 <meta> 태그를 사용하여 "_csrf"와 "_csrf_header"에 대하여 값을 저장한 후 자바스크립트에서 $("meta[name='_csrf']".attr("content")를 사용하여 값을 가져와 사용한다.

CSRF가 활성화 되어 있는 경우 로그아웃을 POST 방식으로 처리를 하여야 하며, Ajax를 사용하여 처리를 한다. 또한 CSRF 값을 전송하여야 하므로 시큐리티에서 제공하는 "_csrf"와 "_csrf_header" 값을 사용한다.

기본적으로 security에서 로그아웃 처리를 지원하므로 다음과 같이 SecurityConfig에서 설정하면 동작한다. 아래와 같이 http.logout().logoutUrl("/member/logout"); 로그아웃 url을 추가해 준다.

package com.example.sboot.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;

import com.example.sboot.security.service.CustomUserDetailsService;

import lombok.extern.log4j.Log4j2;

@Configuration
@Log4j2
@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
	@Autowired
    private CustomUserDetailsService userDetailsService;
	
	@Bean
    PasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }
	
	@Override
	protected void configure(HttpSecurity http) throws Exception {
		http.formLogin().loginPage("/member/login");
		http.userDetailsService(userDetailsService);
		http.logout().logoutUrl("/member/logout");
	}
}

Dropdown 메뉴에서 Logout 버튼을 클릭하면 아래 그림과 같이 로그아웃이 처리되었다고 경고창이 뜨고, 다시 로그인 창으로 이동함을 알 수 있다.

Dropdown 메뉴도 로그인 이전의 메뉴가 표시됨을 알 수 있다.

소스코드는 아래와 같다.

sboot.zip
0.23MB

Posted by 세상을 살아가는 사람
,

오늘은 이클립스를 사용하여 프로젝트를 하면서 github를 이용하여 소스코드를 관리하고 싶다는 요청이 있어서 github에 소스코드를 등록하는 방법을 알아본다.


1. 우선 Eclipse에서 Window>Show View>Other>Git>Git Repositories를 선택한다.

  - 그러면 Git Repositories 창이 생성되고 git에 대한 익스플로러가 보인다.

  - 아마 이때 Git를 위한 local(PC내) 저장소의 위치를 지정하도록 요구한다.

  - 적당한 디렉토리를 지정해 준다. 아마 github 서버에 저장하기 전에 자신의 PC내에 우선 저장해 둔다고 생각하면 이해가 되겠다.

  - 이후 정말 github에 저장하려면 별도의 동작을 한다.

2. 처음으로 github를 이용하는 사람은 github에 접속하여 계정을 만든다.

  - Username, 계정 id와 비밀번호를 잘 저장해 둔다. (잊지 않도록)

3. github에서 새로운 Repository를 생성한다. 프로젝트를 github에 저장하기 위한 방이라 생각하면 된다.

  - Repository에 대한 URL이 생성된다. 그것을 알아둔다.

    (예, https://github.com/Username/Repository.git)

4. Eclipse에서 github에 저장할 프로젝트를 선택한 후 

  - 우측 마우스를 클릭한 후

  - 나타나는 메뉴에서 Team>Add to Index를 선택한다.

5. Eclipse에서 프로젝트를 선택 후

  - 우측 마우스를 클릭한 후

  - Team>Commit를 선택한다.

  - 적당한 Commit Message를 입력하고

  - Author와 Committer에 자신의 Username < email 게정을 입력하고 "Commit and Push" 버튼을 누른다.

  - 이때 "There are no staged files"란 창이 뜨면, 앞에서 수행했던 "Add to Index" 동작을 빠트렸거나 변경된 내용이 없는 경우이다.

  - 아까 github 서버에서 만든 Repository의 주소를 정확하게 mapping을 해주어야, 그 Repository로 소스가 upload 된다.


아마 지금까지 작성한 것에서 오류가 있을 수 있는데, 처음 시도 하면서 적어야 하는데, 완료가 된 후 다시 복고를 하면서 적으려니 정확함이 떨어질 수 있다.

Posted by 세상을 살아가는 사람
,