otp 인증방식을 활용한 블록체인 모니터링...

- 1 -

팀 명 : 사이다

지도교수 : 양환석 교수님

팀 장 : 박진아

팀 원 : 강신선

박지성

이지현

OTP 인증방식을 활용한

블록체인 모니터링 시스템

2018. 11.

중부대학교 정보보호학과

- 2 -

목 차

1. 서론 ----------------------------------------------------- 1

2. 관련연구

2.1 OTP 종류 --------------------------------------- 1

2.2 OTP 전달방식 ---------------------------------- 2

2.3 SHA256 ----------------------------------------- 3

2.4 MySQL ------------------------------------------ 3

2.5 Hyperledger Fabric ----------------------------- 3

2.6 Swagger ----------------------------------------- 4

3. 본론

3-1 사용자 회원가입 ------------------------------- 4

3-2 사용자 로그인 ---------------------------------- 5

3-3 회원수정 ---------------------------------------- 9

3-4 블록체인 네트워크 구축 --------------------- 10

3-5 모니터링 시스템 ------------------------------ 12

4. 결론 --------------------------------------------------- 14

5. 첨부

5-1 프로그램 소스 -------------------------------- 14

5-2 발표 자료 ------------------------------------- 56

- 3 -

1. 서론

최근 인터넷 관련 범죄가 늘어나고 범죄 방법 역시 날이 갈수록 고도화되고 있으며 범죄

방법이 고도화 될수록 본인인증 강화를 위한 연구들이 여러 방면에서 진행되고 있다.

보안기법 중의 하나인 OTP(One Time Password)는 고정 된 Password는 해킹을 당할 위험

이 크기 때문에 이를 보완하기 위한 인증수단인 보안카드가 있지만 여전히 고정된 숫자라는

한계가 있으며 유출에 대한 보안취약성을 지니기 때문에 보다 보안을 강화하기 위해

OTP(One Time Password)를 개발하게 되었고 사용하게 되었으며 이는 온라인상의 강력한

인증 수단중 하나이다.

OTP(One Time Password)는 무작위의 난수를 사용하여 생성하는 일회용 비밀번호로써 매

번 새로운 번호를 발급 및 검증을 하여 사용자의 Password 및 OTP(One Time Password)가

해킹 및 예기치 못한 이유로 노출되더라도 일정시간이 지나거나 새로운 이벤트가 일어나면

OTP(One Time Password)가 유효하지 않고 폐기되므로 높은 보안성을 지닌다.

또한 블록체인 기술은 4차 산업혁명 시대가 도래 하면서 전 세계적으로 가장 주목받는 기

술로 자리매김 하였다. 블록체인 기술은 크게 퍼블릭 블록체인과 프라이빗 블록체인으로 구

분할 수 있다. 퍼블릭 블록체인의 핵심은 기존의 중앙집권화 체제를 탈피하여 네트워크에

분산하여 저장하는 분장 원장 기술이다. 즉, 거래 정보와 같은 자산을 하나의 관리자가 관리

하는 것이 아니라 네트워크에 있는 모든 사용자가 모든 거래 내역을 투명하게 볼 수 있다.

반면 프라이빗 블록체인은 하나의 감독기관을 통해 별도의 인증 절차를 거치기 때문에 아무

나 참여 할 수 없다.

두 블록체인은 각각 장단점이 확실하여 현재도 전 세계적으로 지속적인 연구와 개발이 진

행되고 있다. Cider는 프라이빗 블록체인 기술을 적용하기 위해 OTP 인증을 통과한 인가된

사용자를 관리자 역할을 수행하도록 설정하고 실시간으로 트랜잭션을 확인할 수 있는 블록

체인 모니터링 시스템을 구현했다.

2. 관련연구

2-1. OTP 종류 OTP(One Time Password)는 사용자 인증 기법이며 세부 종류로는 이벤트 동기화 방식, 질

의응답 방식, 시간 동기화 방식 등이 있으며 설명은 아래와 같다.

2-1-1 시간 동기화 방식

입력 시간을 이용하여 OTP(One Time Password)를 생성하는 방법으로 클라이언트는 현재

시간을 이용하여 OTP(One Time Password)를 생성해 입력을 하게 되면 서버에서는 같은 방

식으로 현재시간을 이용하여 OTP(One Time Password)를 생성해 입력된 값의 유효성을 검

사하는 방식이다. 입력 값이 매번 랜덤하게 생성됨은 물론 서버와 클라이언트가 서로 통신

을 하지 않아도 사용할 수 있으므로 피싱 등 해킹의 위험성이 현저히 줄어들게 된다. 다만

서버와 클라이언트의 시간이 일치하지 않으면 인증에 실패하게 되는 단점이 있으며 이를 보

완하기 위해 일정시간을 OTP(One Time Password)생성간격으로 맞춰둔다.

- 4 -

2-1-2 이벤트 동기화 방식

서버와 클라이언트가 임의의 같은 카운트 값을 가지게 하여 OTP(One Time Password)를

요청 시 해당 카운트 값을 이용하여 임의의 난수를 생성 해 인증번호를 발급하는 방식이다.

인증번호 발급 이후에는 서버와 클라이언트의 카운트 값이 동일하게 증가하게 된다. 다만

클라이언트에서 OTP(One Time Password)를 생성하기만 하고 실제로 서버에 인증을 사용하

지 않으면 서버와 클라이언트의 카운트 값이 불일치되는 문제점이 발생할 수 있다.

이런 문제점을 보완하기 위해 실제로는 일정한 오차범위 이내의 인증번호는 허용하는 방법

이나 서버와 클라이언트의 카운트가 동일하지 않다 판단될 때 연속된 OTP(One Time

Password)를 입력받아 유효성을 판별하는 방법 등이 사용된다.

2-1-3 질의응답 방식

서버에서 임의의 난수를 사용해 OTP(One Time Password)를 생성하고 이 값을 클라이언

트에 전송해 클라이언트가 OTP(One Time Password)를 응답하는 방식이다. 입력 값이 매번

랜덤하게 생성되지만 서버에서 클라이언트로 전송을 하는 과정에서 값이 노출될 경우 보안

성에서 매우 취약 해 질 수 있다는 단점이 있고, 서버와 클라이언트간의 통신을 유지해야하

는 번거로움이 있다.

2-2. OTP 전달 방식 OTP(One Time Password)는 사용자 인증에 사용되므로, 기본적으로 서버와 클라이언트 사

이에 통신 및 전달 수단이 필요하다. 이러한 수단으로는, 아래와 같은 것들이 있다.

2-2-1 OTP 토큰

OTP 토큰이라 불리는 별도의 하드웨어를 클라이언트로 사용하는 방식이다. 기기 자체에

서 해킹이 이루어지기는 힘들지만, 토큰을 구입해야 하므로 추가 비용이 필요하며 휴대하기

에 불편하다는 단점이 있다.

2-2-2 카드형 OTP 토큰

기존의 토큰의 불편한 휴대성을 개선하기 위해, 얇은 두께로 휴대하기에 편리한 카드형

토큰도 출시된 바 있다. 일반 카드에 비해 별로 두껍지 않아 지갑에도 휴대가 가능하지만,

처리 속도가 느려 OTP 생성에 시간이 더 걸리고 수명이 짧으며 가격도 비싸다는 단점이 있

다.

2-2-3 스마트폰 앱

별도의 하드웨어 장비를 필요로 하지 않아서 추가 비용 없이도 OTP 서비스를 이용할 수

있는 방식이다. 해당 스마트폰에 맞게 제공되는 앱을 설치함으로써 이용할 수 있다. 물론 서

버 측에서 이 방식을 지원하지 않으면 이용할 수 없으며, 스마트폰 OS에 따라 이용이 제한

될 수 있다는 단점이 있다. 또한 스마트폰 환경인만큼 해킹의 위험성이 비교적 높다.

2-2-4 SMS

SMS로 OTP를 전달하는 방식이다. 스마트폰이 아닌 어떤 종류의 휴대전화만 있어도 이용

가능하다는 장점이 있지만, SMS 자체의 해킹 위험성에 의해 현재는 거의 않는다.

- 5 -

2-3. SHA-256 SHA알고리즘은 미국 국가 안보국(NSA)에서 고안한 일련의 암호화 해시 함수인데 해시 값

의 비교로 데이터의 무결성을 판단할 수 있어 여러 암호화 분야에서 사용되고 있다.

SHA알고리즘에 한 종류인 SHA-256알고리즘은 비밀키를 메시지 데이터와 혼합하여 그 결

과를 해시 함수로 해시한 다음 해시 값을 다시 비밀키와 혼합한 후 해시 함수를 한 번 더

적용하는데 이 과정에서 길이가 256비트인 해시 시퀀스를 생성하게 된다.

이를 TOTP(Time-based One Time Password) 생성 시 시간 값과 비밀키 값을 사용해 8자

리의 숫자 난수를 생성하게 하였다. 따라서 OTP(One Time Password)생성에 필요한 난수

생성시 보안을 위한 암호화를 위해 SHA-256 알고리즘을 사용하였다.

2-4. MySQL MySQL은 전 세계적으로 가장 널리 사용되고 있는 오픈 소스 데이터베이스이며, MySQL

AB사가 개발하여 배포/판매하고 있는 데이터베이스이다. 표준 데이터베이스 질의 언어

SQL(Structured Query Language)을 사용하는 개방 소스의 관계형 데이터베이스 관리 시스

템(RDBMS)이며, 매우 빠르고 유연하며 사용하기 쉬운 특징이 있다.

다중사용자, 다중 스레드를 지원하고, C, C++, Eiffel, Java, Perl, PHP, Python 스크립트 등

을 위한 응용프로그램 인터페이스를 제공한다. 또한 유닉스나 리눅스, Windows 운영체제

등에서 사용할 수 있다.

또한 MySQL은 리눅스 운영체제와 Apache 서버 프로그램, MySQL, PHP 스크립트 언어 구

성은 상호 연동이 잘 되면서도 오픈소스로 개발되는 무료 프로그램이어서 홈페이지나 쇼핑

몰 등 일반적인 웹 개발에 널리 사용된다.

2-5. Hyperledger Fabric앞서 이야기했듯 블록체인은 크게 퍼블릭 블록체인과 프라이빗 블록체인으로 구분 할 수 있

다. 퍼블릭 블록체인은 비트코인, 이더리움으로 대표되며 누구나 블록체인 네트워크에 참여

할 수 있고 모든 내역을 볼 수 있으며 트랜잭션 내역을 검증할 수 있다. 현재 거래소에서

거래되는 일종의 “화폐” 개념을 가진 블록체인은 대다수 퍼블릭 블록체인이다. 반면 프라이

빗 블록체인은 참여자가 제한된 블록체인으로 내부 망을 구축하거나 별도의 인증 방식을 통

해 참여가 제한된 블록체인을 말한다.

퍼블릭 블록체인과 프라이빗 블록체인은 서비스가 다르고 운영환경이 다르기 때문에 요구

사항도 다르다. 현재 퍼블릭 블록체인은 읽기, 트랜잭션 생성을 누구나 할 수 있습니다. 즉,

모든 사용자들이 모든 데이터를 확인할 수 있다. 그러나 기관 간 블록체인의 경우 애플리케

이션에 따라 개인의 금융정보가 담긴 데이터가 네트워크상으로 오고 갈 수 있기 때문에 모

두에게 데이터가 공개되면 안되고 법적으로 책임질 수 있는 기관만 트랜잭션을 생성해야 한

다. 누구나 트랜잭션을 생성할 수 있다면 금융사고가 일어났을 때 책임 주체에 대한 문제가

발생하기 때문이다. 이러한 문제로 인해 금융권이나 기업들은 프라이빗 블록체인 개발에 박

차를 가하고 있다.

Hyperledger란 Linux Foundation에서 전 세계적으로 비즈니스 거래가 수행되는 방식을 변

혁할 수 있는 분산 원장에 대한 산업 표준에 중요한 기능들을 확인하고 적용해 블록체인을

발전시키는 협력 프로젝트다. (150개 회원사가 참여)

- 6 -

2-6. Swagger swagger는 간단한 설정으로 프로젝트에서 지정한 URL들을 HTML화면으로 확인할 수 있게

해주는 프로젝트이다. Swagger는 formal specification으로 나열되고, 한 에코시스템으로 통

합된 거대한 도구들의 모음집이라고 할 수 있다. 도구들은 코딩 라이브러리, commercial

API management frameworks, user interface solutions을 포함한다. 또한 사람이 읽을 수 있

고 기계가 읽을 수 있는 REST APIs에 대한 독립적인 인터페이스를 가진 언어를 제공한다.

완전한 오픈소스 API 프레임워크로 swagger는 세밀한 Restful APIs를 지원하고 고객측면의

SDK를 만들어낸다. 이러한 상호 보완적인 문서는 swagger를 더욱 개발자에게 쉽게 접근할

수 있게 도와준다.

3. 본문

3-1. 사용자 회원가입

사용자는 회원가입을 통하여 홈페이지에 대한 완전한 기능을 사용 할 수 있다.

회원가입 방법은 다음과 같다.

3-1-1 메인페이지에서 회원가입 클릭

[그림1]

- 7 -

3-1-2 내용 입력 후 회원가입

[그림2]

3-2. 사용자 로그인

사용자는 3-1 에서 만들어둔 아이디와 비밀번호 및 OTP발급번호를 토대로 홈페이지에 로

그인을 할 수 있다.

로그인 방법은 다음과 같다.

3-2-1 메인페이지에서 로그인 클릭

[그림3]

- 8 -

3-2-2 이메일, 비밀번호 입력

[그림4]

3-2-3 OTP발급을 위한 OTP발급번호 입력

[그림5]

3-2-4 E-mail 확인 및 발송

[그림6]

- 9 -

3-2-5 E-mail 확인 및 번호확인

[그림7]

3-2-6 발급받은 OTP번호 입력 및 확인

[그림8]

- 10 -

3-2-6-1 성공 시 확인

[그림9]

3-2-6-2 실패 시 다시시도 [3-2-4로 이동]

[그림10]

3-2-7-1 로그인 성공 – 관리자

[그림11]

- 11 -

3-2-7-2 로그인 성공 – 사용자

[그림12]

3-3. 회원수정

사용자는 비밀번호 변경 및 OTP발급번호 변경 또한, 휴대폰번호를 변경 시에 자신의 정보

를 수정할 수 있다.

수정 방법은 다음과 같다.

3-3-1 회원 수정

[그림13]

3-3-2 변경 내용 입력

[그림14]

- 12 -

3-4. 블록체인 네트워크 구축

블록체인 네트워크 환경을 구성하기 위해 docker 이미지를 다운로드 한다.

[그림 15] docker 이미지 다운

블록체인 네트워크 환경을 구성한 후, 블록체인 네트워크를 생성하기 위하여 블록체인 네

트워크 아티팩트를 생성한다. 아티팩트에는 Cryptogen tool, Genesis block, channel, 조직1

에 대한 신원관리 및 인증하는 규칙 (Org1MSP) 그리고, 조직2에 대한 신원관리 및 인증하

는 규칙 (Org2MSP)이 포함된다.

[그림16] 블록체인 네트워크 아티팩트 생성

- 13 -

이 과정에서 조직1과 조직2에 대한 인증서를 확인할 수 있다.

[그림17] 조직1에 대한 인증서

블록체인 네트워크 아티팩트를 생성했다면 생성된 아티팩트를 가지고 블록체인 네트워크를

구축/시작한다. 이 명령으로 피어노드, 주문노드, 인증 기관 및 CLI 컨테이너를 시작하고 채

널을 만들어 피어를 채널에 연결한다.

[그림18] 블록체인 네트워크 구축

docker-compose-cli.yaml 스크립트를 활용하여 네트워크를 시작하고 생성된 채널 정보를 확

인 할 수 있다.

- 14 -

[그림19] 블록체인 네트워크 시작

3-5 모니터링 시스템

아래 그림은 블록체인 모니터링 시스템 페이지를 구축한 것이다. 트랜잭션의 발생과 블록

이 실시간으로 쌓이는 정보와 통계 등을 보여준다.

[그림20] 블록체인 모니터링 시스템 페이지

- 15 -

아래 그림은 블록에 대한 상세정보를 표현한다. 특정 거래에 대한 정보를 찾을 수 있으며

거래 번호, 거래 유형, 거래 시간, 계약 이름, 채널, 소속에 관한 정보를 제공한다.

[그림21] 블록에 대한 상세 정보 출력

[그림22] 블록에 대한 상세 정보 출력

- 16 -

4. 결론

보안의 위협이 날로 증가하고 해킹의 기술이 고도화되면서 안전성 확보를 위한 다양한 인

증기술들이 연구 및 개발 중이다. 그 중에도 OTP(One Time Password) 인증기술은 1회성으

로 안전성과 사용자의 편의성을 토대로 다양한 서비스에서 활용이 가능할 것으로 기대된다.

OTP 인증을 통해 사용자의 정보를 블록체인 네트워크에서 안전하게 공유하고 모니터링 시

스템을 통해 사용자들의 트랜잭션과 그에 따른 블록의 변화를 실시간으로 확인함으로써 시

스템의 성능을 검증할 수 있다.

5. 첨부5-1. 프로그램 소스<index.jsp>

<%@ include file="/page/frame/header.jsp"%><%@ include file="/page/main/introduce.jsp"%><%@ include file="/page/main/menu.jsp"%><%@ include file="/page/frame/footer.jsp"%>

<header.jsp>

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

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%@ page import="java.sql.*"%><%@ page import="java.util.*"%><%@ page import="java.lang.*"%><%@ page import="com.google.gson.*"%>

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

<!DOCTYPE html><html lang="kr"><head><title>CoffeeKing | Cider</title><meta charset="utf-8"><meta name="viewport"

content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge"><link rel="stylesheet"href="//fonts.googleapis.com/css?family=Montserrat%3A300%2C400%2C500%2C600%2C700%2C900%7COpen+Sans%3A300%2C400%2C500%2C600%2C700%2C800%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/bootstrap/bootstrap.min.

- 17 -

css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/icon-awesome/css/font-awesome.min.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/icon-line/css/simple-line-icons.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/icon-hs/style.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/icon-line-pro/style.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/hamburgers/hamburgers.min.css"><link rel="stylesheet"

href="<%=request.getContextPath()%>/resources/assets/vendor/animate.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/master-slider/source/assets/css/masterslider.main.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/cubeportfolio-full/cubeportfolio/css/cubeportfolio.min.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/slick-carousel/slick/slick.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/vendor/chosen/chosen.css"><link rel="stylesheet"href="<%=request.getContextPath()%>/resources/assets/css/styles.op-restaurant.css"><link rel="stylesheet"

href="<%=request.getContextPath()%>/resources/css/custom.css">

<script>function logout(){

$.ajax({ type:"GET",

url:"<%=request.getContextPath()%>/controller/logout.jsp", success : function(data) { if(data.trim() === 'success'){ alert("로그아웃 성공"); location.href =

"<%=request.getContextPath()%>";

}}

});}

</script>

- 18 -

</head><body class="g-overflow-x-hidden">

<main class="g-pt-105" id="mainContainer"> <headerid="js-header"class="u-header u-header--sticky-top

u-header--change-appearance g-z-index-9999"data-header-fix-moment="100"><div class="u-header__section g-bg-white g-transition-0_3

g-py-16"data-header-fix-moment-exclude="g-py-16"data-header-fix-moment-classes="u-shadow-v27

g-py-6"><nav class="navbar navbar-expand-lg g-py-0">

<div class="container g-pos-rel"><div

class="collapse navbar-collapse align-items-center flex-sm-row"

id="navBar"><ul id="js-scroll-nav"

style="margin: 0 auto;"class="navbar-nav

text-uppercase g-font-weight-700 g-font-size-12 g-pt-20 g-pt-0--lg ml-auto">

<li class="nav-item g-mr-10--lg g-mb-7 g-mb-0--lg active"><ahref="<%=request.getContextPath()%>" class="nav-link p-0">

커피킹 <span class="sr-only">(current)</span>

</a></li><li class="nav-item

g-mx-10--lg g-mb-7 g-mb-0--lg"><ahref="<%=request.getContextPath()%>/#introduce"

class="nav-link p-0"> 매장소개 </a></li>

<li class="nav-item g-mx-10--lg g-mb-7 g-mb-0--lg"><ahref="<%=request.getContextPath()%>/#menu" class="nav-link p-0">

메뉴 </a></li>

<c:if test="${userSession ne null}">

<li class="nav-item g-mx-10--lg g-mb-7 g-mb-0--lg"><ahref="<%=request.getContextPath()%>/page/order/onlineOrder.jsp?menu=COFFEE&pageIndex=1"class="nav-link p-0"> 온라인주문 </a></li>

</c:if></ul><div>

<ul class="navbar-nav g-font-weight-700 g-font-size-12">

<li class="nav-item g-mx-10--lg g-mb-7 g-mb-0--lg"><c:iftest="${usersession eq null}">

- 19 -

<a href="<%=request.getContextPath()%>/page/myInfo/login.jsp"

class="nav-link p-0"> 로그인 </a></c:if> <c:if

test="${usersession ne null}"><a

onclick="logout()" style="cursor: pointer"class="nav-link p-0"> 로그아웃 </a>

</c:if><li class="nav-item

g-mx-10--lg g-mb-7 g-mb-0--lg"><c:iftest="${usersession eq null}">

<a href="<%=request.getContextPath()%>/page/myInfo/join.jsp"

class="nav-link p-0"> 회원가입 </a></c:if> <c:if

test="${usersession ne null}"><a

href="<%=request.getContextPath()%>/page/myInfo/mypage.jsp"class="nav-link p-0"> 마이페이지 </a>

</c:if></li><c:if

test="${userSession ne null && userSession.rank ne 'admin'}"><li

class="nav-item g-mx-10--lg g-mb-7 g-mb-0--lg"><ahref="<%=request.getContextPath()%>/page/order/orderList.jsp"class="nav-link p-0"> 주문내역 </a></li>

</c:if><c:if

test="${userSession.rank eq 'admin'}"><li

class="nav-item g-mx-10--lg g-mb-7 g-mb-0--lg"><ahref="<%=request.getContextPath()%>/page/order/userOrder.jsp"class="nav-link p-0"> 고객 주문내역 </a></li>

</c:if></ul>

</div></div><button

class="navbar-toggler btn g-line-height-1 g-brd-none g-pa-0 g-pos-abs g-top-30 g-right-0"

type="button" aria-label="Toggle navigation" aria-expanded="false"

aria-controls="navBar" data-toggle="collapse"

data-target="#navBar"><span class="hamburger

hamburger--slider"> <spanclass="hamburger-box">

<span class="hamburger-inner"></span></span>

- 20 -

</span></button>

</div></nav>

</div></header>

<footer.jsp>

<footer><div class="container-fluid text-center g-color-gray-dark-v5 g-py-40">

<p class="mb-0">2018 All right reserved. <a class="g-color-primary"

href="<%=request.getContextPath()%>">coffeeKing</a> . Development by<a class="g-color-primary">Cider</a>

</p></div>

</footer><a class="js-go-to u-go-to-v1" href="#!" data-type="fixed"

data-position='{ "bottom": 15, "right": 15 }' data-offset-top="400"data-compensation="#js-header" data-show-effect="zoomIn"> <iclass="hs-icon hs-icon-arrow-top"></i>

</a></main><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/jquery/jquery.min.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/jquery-migrate/jquery-migrate.min.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/popper.min.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/bootstrap/bootstrap.min.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/master-slider/source/assets/js/masterslider.min.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/cubeportfolio-full/cubeportfolio/js/jquery.cubeportfolio.min.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/slick-carousel/slick/slick.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/vendor/chosen/chosen.jquery.js"></script><script

- 21 -

src="<%=request.getContextPath()%>/resources/assets/js/hs.core.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/hs.header.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/helpers/hs.hamburgers.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/hs.scroll-nav.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/hs.tabs.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/hs.carousel.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/hs.cubeportfolio.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/gmap/hs.map.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/hs.go-to.js"></script><scriptsrc="<%=request.getContextPath()%>/resources/assets/js/components/hs.select.js"></script><script>

// initialization of master slidervar promoSlider = new MasterSlider();promoSlider.setup('masterslider', {

width : 1400,height : 1800,speed : 70,layout : 'fullscreen',loop : true,preload : 0,autoplay : false,layersMode : 'center'

});promoSlider.control('lightbox');promoSlider.control('thumblist', {

autohide : false,dir : 'h',align : 'top',width : 550,height : 50,margin : 0,space : 0,hideUnder : 500,

- 22 -

type : 'tabs',inset : true

});$(document).on('ready', function() {

$.HSCore.components.HSCarousel.init('.js-carousel');$.HSCore.components.HSHeader.init($('#js-header'));$.HSCore.helpers.HSHamburgers.init('.hamburger');$.HSCore.components.HSTabs.init('[role="tablist"]');$.HSCore.components.HSGoTo.init('.js-go-to');$('#ourFood [role="tablist"] .nav-link').on('click', function() {

setTimeout(function() {$('#ourFoodTabs .js-carousel').slick('setPosition');

}, 200);});$.HSCore.components.HSSelect.init('.js-custom-select');

});$(window).on('load', function() {

$.HSCore.components.HSScrollNav.init($('#js-scroll-nav'), {duration : 700

});$.HSCore.components.HSCubeportfolio.init('.cbp');

});$(window).on('resize', function() {

setTimeout(function() {$.HSCore.components.HSTabs.init('[role="tablist"]');

}, 200);});

</script></body></html>

<login.jsp>

<%@ include file="/page/frame/header.jsp"%><script>

function login(){var queryString = $("form[id=loginForm]").serialize(); $.ajax({

type:"POST", url:"<%=request.getContextPath()%>/controller/login.jsp", data: queryString, success : function(data) { if(data.trim() === 'error'){ alert("아이디나 비밀번호를 확인해주세요"); }else{ $('#loginForm').submit(); window.location.href =

"http://localhost:8181/coffeeKing/page/myInfo/otpissue.jsp"; } },error : function(xhr, status, error) { }

- 23 -

});}

</script><style>.menu { -webkit-animation: blink 1s linear infinite;} @-webkit-keyframes blink { 0% { color: red; } 33% { color: yellow; } 66% { color: green; } 100% { color: blue; }\/* from { background-color: red;} to {background-color: green;} */}</style><style>#menu-login {font-size: 150%;}#menu {font-size: 150%;}#menu-issue {font-size: 120%;}#menu-num {font-size: 120%;}#menu-chk {font-size: 120%;}</style><section class="container g-pt-100 g-pb-20">

<div class="row"><div class="col-lg-12 order-lg-2 g-mb-80">

<section class="container g-py-100"><ul class="list-inline g-brd-bottom--sm

g-brd-gray-light-v3 mb-5"><li class="list-inline-item g-pb-10

g-px-10 g-mb-20 g-mb-0--sm"><a id="menu-login"

class="g-brd-bottom g-brd-2 g-brd-primary g-color-main g-color-black g-font-weight-600 g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/login.jsp">로그인</a>

</li><li class="list-inline-item">

<a style="color:rgb(0, 0, 0);" class="menu g-font-weight-600 g-text-underline--none--hover "

id="menu"> ▷ </a></li><li class="list-inline-item g-pb-10

g-px-10 g-mb-20 g-mb-0--sm"><a id="menu-issue"

class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/otpissue.jsp">OTP발급</a>

</li><li class="list-inline-item g-pb-10

g-pr-10 g-mb-20 g-mb-0--sm"><a id="menu-num"

class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/otpnumber.jsp">OTP번호입력</a>

</li><li class="list-inline-item g-pb-10

- 24 -

g-pr-10 g-mb-20 g-mb-0--sm"><a id="menu-chk"

class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/controller/otpchk2.jsp">OTP검증</a>

</li></ul><c:if test="${usersession eq null}"><header class="text-center mb-4">

<h1 class="h4 g-color-black g-font-weight-400">로그인</h1>

</header><form class="g-py-15" id="loginForm"

method="post" action="<%=request.getContextPath()%>"> <div class="g-mb-20"> <input class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="email" type="text" placeholder="이메일">

</div> <div class="g-mb-20"> <input class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="password" type="password" placeholder="비밀번호">

</div> <button class="btn btn-block u-btn-primary g-font-size-12

text-uppercase g-py-12 g-px-25" onclick="login()" type="button" >로그인</button>

</form></c:if> </section>

</div></div>

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

<join.jsp>


function join(){var pwd1 = $('input[name=password]')[0].value;var pwd2 = $('input[name=passwordChk]')[0].value;if(pwd1 === pwd2){

$('#joinForm').submit();}else{

alert('비밀번호가 서로 틀립니다.');}

}</script><section class="container g-pt-100 g-pb-20">


<div class="g-brd-around g-brd-gray-light-v3 g-bg-white rounded g-px-30 g-py-50 mb-4">

<header class="text-center mb-4"><h1 class="h4 g-color-black

g-font-weight-400">회원가입</h1></header>

- 25 -

<form class="g-py-15" id="joinForm" method="post" action="<%=request.getContextPath()%>/controller/join.jsp">

<div class="row"> <div class="col g-mb-20"> <input name="name" class="form-control

g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" type="text" placeholder="이름">

</div> <div class="col g-mb-20"> <input name="tel" class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" type="text" placeholder="전화번호 (ex)010-0000-0000)">

</div> </div> <div class="form-group g-mb-20"> <select name="gender" class="js-custom-select

u-select-v1 g-brd-gray-light-v3 g-color-gray-dark-v5 rounded g-py-12" style="width: 100%;"

data-placeholder="성별" data-open-icon="fa fa-angle-down" data-close-icon="fa fa-angle-up">

<option></option> <option value="male">남성</option> <option value="female">여성</option> </select>

</div> <div class="row"> <div class="col-sm-6 col-md-12 col-lg-6

g-mb-20"> <select name="year" class="js-custom-select

u-select-v1 g-brd-gray-light-v3 g-color-gray-dark-v5 rounded g-py-12" style="width: 100%;"

data-placeholder="출생년도" data-open-icon="fa fa-angle-down" data-close-icon="fa fa-angle-up">

<option></option> <c:forEach var="i" begin="1990"

end="2018"><option

value="${i}">${i}년</option> </c:forEach>

</select> </div> <div class="col g-mb-20"> <input class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="month" type="text" placeholder="월">

</div> <div class="col g-mb-20"> <input class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="day" type="text" placeholder="일">

</div> </div> <div class="g-mb-20"> <input class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15"

- 26 -

name="email" type="text" placeholder="이메일"> </div> <div class="g-mb-20"> <input class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="idCardNum" type="text" placeholder="주민번호 (앞 6자리)">


g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="password" type="password" placeholder="비밀번호">


g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="passwordChk" type="password" placeholder="비밀번호 확인">


g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="OTPPIN" type="text" placeholder="OTP발급비밀번호">


text-uppercase g-py-12 g-px-25" onclick="location.href='http://localhost:8181/TESTTEST'; join()" type="button">회원가입</button>

</form></div>

</div></div>


<login.jsp>

<%@ page import = "java.sql.*" %> <%@ page import = "java.util.Map" %> <%@ page import = "java.util.HashMap" %> <%@ include file="/jdbcDB.jsp" %><%

request.setCharacterEncoding("UTF-8");String email = request.getParameter("email");String password = request.getParameter("password");Map<String, String> User = new HashMap<String, String>();out.clear();try {

stmt = conn.createStatement();String sql = String.format("SELECT * from user WHERE email =

'%s' AND password = '%s'", email, password);ResultSet rs = stmt.executeQuery(sql);

- 27 -

int count = 0;while (rs.next()) {

count++;User.put("name", rs.getString("name"));User.put("year", rs.getString("year"));User.put("month", rs.getString("month"));User.put("day", rs.getString("day"));User.put("birthDay", rs.getString("birthDay"));User.put("gender", rs.getString("gender"));User.put("idCardNumber", rs.getString("idCardNumber"));User.put("email", rs.getString("email"));User.put("tel", rs.getString("tel"));User.put("password", rs.getString("password"));User.put("rank", rs.getString("rank"));User.put("OTPPIN", rs.getString("OTPPIN"));

}if(count == 0){

out.println("error");}if(User.size() == 0){

User = null;}session.setAttribute("usersession", User);

}catch(Exception ex){ex.printStackTrace();

}finally {if (stmt != null) { stmt.close(); }if (conn != null) { conn.close(); }

}%>

<join.jsp>

<%@ page import = "java.sql.*" %> <%@ include file="/jdbcDB.jsp" %><%

request.setCharacterEncoding("UTF-8");String name = request.getParameter("name");String tel = request.getParameter("tel");String gender = request.getParameter("gender");String year = request.getParameter("year");String month = request.getParameter("month");String day = request.getParameter("day");String email = request.getParameter("email");String idCardNum = request.getParameter("idCardNum");String password = request.getParameter("password");String OTPPIN = request.getParameter("OTPPIN");String sql = "insert into user (name, year, month, day, birthDay, gender,

idCardNumber, email, tel, password, OTPPIN) values(?,?,?,?,?,?,?,?,?,?,?)";

- 28 -

try{pstmt = conn.prepareStatement(sql);pstmt.setString(1, name);pstmt.setString(2, year);pstmt.setString(3, month);pstmt.setString(4, day);pstmt.setString(5, year + "-" + month + "-" + day);pstmt.setString(6, gender);pstmt.setString(7, idCardNum);pstmt.setString(8, email);pstmt.setString(9, tel);pstmt.setString(10, password);pstmt.setString(11, OTPPIN);pstmt.executeUpdate(); response.sendRedirect(request.getContextPath());


}finally {if (pstmt != null) { pstmt.close(); }if (conn != null) { conn.close(); }

}%>

<mypage.jsp>


function edit(){var pwdCur = $('input[name=passwordCur]')[0].value;var pwd1 = $('input[name=password]')[0].value;var pwd2 = $('input[name=passwordChk]')[0].value;if(pwdCur === '${usersession.password}' && pwdCur !== ''){

if(pwd1 === pwd2 && pwd1 !== ''){$('#editForm').submit();

}else{alert('변경 비밀번호가 서로 틀립니다.');

}}else{

alert('현재 비밀번호가 틀립니다.');}



<div class="g-brd-around g-brd-gray-light-v3 g-bg-white rounded g-px-30 g-py-50 mb-4">

<header class="text-center mb-4"><h1 class="h4 g-color-black

g-font-weight-400">회원정보수정</h1></header><form class="g-py-15" id="editForm"

method="post" action="<%=request.getContextPath()%>/controller/edit.jsp"> <div class="row">

- 29 -

<div class="col g-mb-20"> <input name="name" class="form-control

g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15"

value="${usersession.name}" type="text" placeholder="이름">

</div><input type="hidden" name="email"

value="${usersession.email }"/> <div class="col g-mb-20"> <input name="tel" class="form-control g-color-black

g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" type="text"

value="${usersession.tel}" placeholder="전화번호">

</div> </div> <div class="form-group g-mb-20"> <select id="gender" name="gender"

class="js-custom-select u-select-v1 g-brd-gray-light-v3 g-color-gray-dark-v5 rounded g-py-12" style="width: 100%;"

data-placeholder="성별" data-open-icon="fa fa-angle-down" data-close-icon="fa fa-angle-up">

<script>console.log('${userSession.gender}')</script> <c:if test="${usersession.gender eq 'male'}"> <option value="male"

selected="selected">남성</option> <option

value="female">여성</option> </c:if> <c:if test="${usersession.gender eq

'female'}"> <option value="female"

selected="selected">여성</option> <option value="male">남성</option> </c:if>

</select> </div> <div class="row"> <div class="col-sm-6 col-md-12 col-lg-6

g-mb-20"> <select value="${usersession.year}" name="year"

class="js-custom-select u-select-v1 g-brd-gray-light-v3 g-color-gray-dark-v5 rounded g-py-12" style="width: 100%;"

data-placeholder="출생년도" data-open-icon="fa fa-angle-down" data-close-icon="fa fa-angle-up">

<option></option>

<c:forEach var="i" begin="1990" end="2018">

<c:if test="${usersession.year eq i}"><option value="${i}" selected="selected">${i}년</option></c:if>

<c:if test="${usersession.year ne i}"><option value="${i}">${i}년</option></c:if>

</c:forEach> </select> </div>

- 30 -

<div class="col g-mb-20"> <input value="${usersession.month}"

class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="month" type="text" placeholder="월">

</div> <div class="col g-mb-20"> <input value="${usersession.day}"

class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="day" type="text" placeholder="일">

</div> </div> <div class="g-mb-20"> <input value="${usersession.idCardNumber}"

class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="idCardNum" type="text" placeholder="주민번호">


g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="passwordCur" type="text" placeholder="현재 비밀번호">

</div> <div class="g-mb-20">

<input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="password" type="text" placeholder="변경 비밀번호">


g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="passwordChk" type="text" placeholder="비밀번호 확인">

</div> <div class="g-mb-20"> <input value="${usersession.OTPPIN}"

class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 rounded g-py-15 g-px-15" name="OTPPIN" type="text" placeholder="OTP발급비밀번호(필수)">


text-uppercase g-py-12 g-px-25" onclick="edit()" type="button">수정하기</button>

</form></div>

</div></div>


<edit.jsp>

<%@ page import = "java.sql.*" %> <%@ include file="/jdbcDB.jsp" %>

- 31 -

<%request.setCharacterEncoding("UTF-8");String email = request.getParameter("email");String name = request.getParameter("name");String tel = request.getParameter("tel");String gender = request.getParameter("gender");String year = request.getParameter("year");String month = request.getParameter("month");String day = request.getParameter("day");String idCardNum = request.getParameter("idCardNum");String password = request.getParameter("password");String OTPPIN = request.getParameter("OTPPIN");String sql = "update user set name=?, year=?, month=?, day=?, birthDay=?,

gender=?, idCardNumber=?, tel=?, password=?, OTPPIN=? where email=?";try{

pstmt = conn.prepareStatement(sql);pstmt.setString(1, name);pstmt.setString(2, year);pstmt.setString(3, month);pstmt.setString(4, day);pstmt.setString(5, year + "-" + month + "-" + day);pstmt.setString(6, gender);pstmt.setString(7, idCardNum);pstmt.setString(8, tel);pstmt.setString(9, password);pstmt.setString(10, OTPPIN);pstmt.setString(11, email);pstmt.executeUpdate(); session.invalidate();response.sendRedirect(request.getContextPath());



}%>

<logout.jsp>

<%session.invalidate();out.clear();out.println("success");

%><addCart.jsp>


request.setCharacterEncoding("UTF-8");

- 32 -

int menuIdx = Integer.parseInt(request.getParameter("idx"));String userEmail = request.getParameter("email");String sql = "insert into orderlist (menuIdx, userEmail) values(?,?)";try{

pstmt = conn.prepareStatement(sql);pstmt.setInt(1, menuIdx);pstmt.setString(2, userEmail);pstmt.executeUpdate(); out.clear();out.println("success");



}%><addOther.jsp>

<%@page import="com.google.gson.stream.JsonReader"%><%@page import="java.io.StringReader"%><%@ page import="java.sql.*"%><%@ page import="java.util.*"%><%@ page import="com.google.gson.Gson"%><%@ page import="com.google.gson.reflect.TypeToken"%><%@ page import="java.lang.reflect.Type"%><%@include file="/jdbcDB.jsp"%><%

request.setCharacterEncoding("UTF-8");String menuList = request.getParameter("menuList");String userEmail = request.getParameter("email");String userName = request.getParameter("name");int pkNumber = 0;Type listType = new TypeToken<List<Map<String,String>>>(){}.getType();List<Map<String,String>> jsonMenuList = new Gson().fromJson(menuList,

listType);String sql = "insert into orderCheck (userEmail, userName) values (?, ?)";try{

pstmt = conn.prepareStatement(sql, Statement.RETURN_GENERATED_KEYS);

pstmt.setString(1, userEmail);pstmt.setString(2, userName);pstmt.executeUpdate(); try (ResultSet generatedKeys = pstmt.getGeneratedKeys()) {

if (generatedKeys.next()) { pkNumber = generatedKeys.getInt(1); } }catch(Exception ex){

- 33 -

ex.printStackTrace(); }finally {

if (pstmt != null) { pstmt.close(); }}

for (Map<String, String> menuElement : jsonMenuList){

String sql2 = "insert into orderedMenu (orderIdx, name, price, category, url_150x150) values (?,?,?,?,?)";

try{pstmt = conn.prepareStatement(sql2);pstmt.setInt(1, pkNumber);pstmt.setString(2, menuElement.get("name"));pstmt.setString(3, menuElement.get("price"));pstmt.setString(4, menuElement.get("category"));pstmt.setString(5, menuElement.get("url_150x150"));

pstmt.executeUpdate(); }catch(Exception ex){

ex.printStackTrace(); }

}}catch(Exception ex){

ex.printStackTrace();}finally {

if (pstmt != null) { pstmt.close(); }if (conn != null) { conn.close(); }

}%><removeCart.jsp>


int menuIdx = Integer.parseInt(request.getParameter("idx"));String sql = "delete from orderlist WHERE IDX = ?";try{

pstmt = conn.prepareStatement(sql);pstmt.setInt(1, menuIdx);pstmt.executeUpdate(); out.clear();out.println("success");


- 34 -


}%><removeOther.jsp>


int menuIdx = Integer.parseInt(request.getParameter("idx"));String sql = "delete from ordercheck WHERE IDX = ?";try{




}%><removeUser.jsp>


int menuIdx = Integer.parseInt(request.getParameter("idx"));String sql = "delete from user WHERE IDX = ?";try{




}%>

- 35 -

<menu.jsp><%@ include file="/getData/allMenu.jsp"%><section id="menu" class="g-py-100">

<div class="container g-max-width-780 text-center g-mb-20 g-mb-60--md"><div class="text-center text-uppercase u-heading-v5-3

u-heading-v5-color-primary u-heading-v5-rounded-50x g-mb-20"><h4 class="g-font-weight-700 g-font-size-12 g-color-primary

g-mb-15">menu

</h4><h2 class="u-heading-v5__title g-line-height-1_2

g-font-weight-700 g-font-size-32 g-font-size-40--md g-bg-primary--before g-pb-40">

메뉴</h2>

</div></div><div class="container g-width-560">

<ul class="nav justify-content-center text-uppercase u-nav-v5-3 u-nav-primary g-line-height-1_4 g-font-weight-700 g-font-size-default g-brd-bottom--md g-brd-gray-light-v4 g-mb-80--md" role="tablist"

data-target="days" data-tabs-mobile-type="slide-up-down" data-btn-classes="btn btn-md btn-block text-uppercase g-font-weight-700 u-btn-outline-primary">

<li class="nav-item g-mx-10--md"><a class="nav-link g-theme-color-gray-dark-v1

g-color-primary--hover g-pb-25--md active" data-toggle="tab" href="#COFFEE" role="tab">

COFFEE</a>

</li><li class="nav-item g-mx-10--md">

<a class="nav-link g-theme-color-gray-dark-v1 g-color-primary--hover g-pb-25--md" data-toggle="tab" href="#JUICE" role="tab">

JUICE</a>


<a class="nav-link g-theme-color-gray-dark-v1 g-color-primary--hover g-pb-25--md" data-toggle="tab" href="#SMOOTHIE" role="tab">

SMOOTHIE</a>


<a class="nav-link g-theme-color-gray-dark-v1 g-color-primary--hover g-pb-25--md" data-toggle="tab" href="#TEA" role="tab">

TEA</a>


<a class="nav-link g-theme-color-gray-dark-v1 g-color-primary--hover g-pb-25--md" data-toggle="tab" href="#ADE" role="tab">

ADE</a>

</li></ul>

- 36 -

</div><div class="container">

<div id="days" class="tab-content g-pt-20"><div class="tab-pane fade show active" id="COFFEE"

role="tabpanel"><c:forEach var="item" items="${coffeeList}"

varStatus="status"><c:if test="${status.index mod 2 == 0}"> <div

class="row"> </c:if><div class="col-md-6 g-mb-50">

<article class="media"><a

class="g-width-100" href="#!"> <img

class="img-fluid g-rounded-50x" src="<%=request.getContextPath()%>/resources/img/480x700/${item.category}/${item.url_500x500}">

</a><div

class="media-body align-self-center g-pl-10"><div

class="d-flex justify-content-between u-heading-v1-4 g-bg-main g-theme-brd-gray-light-v1 g-mb-8">

<h3 class="align-self-center u-heading-v1__title g-color-black g-font-weight-700 g-font-size-13 text-uppercase mb-0">${item.name }</h3>

<div class="align-self-center g-pos-rel g-bg-main g-pl-15">

<strong class="g-font-weight-700 g-font-size-13 g-color-white g-bg-primary g-rounded-3 g-py-4 g-px-12">₩${item.price }</strong></div>

</div><p

class="mb-0">${item.description }</p></div>

</article></div>

<c:if test="${status.index mod 2 == 1}"> </div> </c:if>

</c:forEach></div><div class="tab-pane fade" id="JUICE" role="tabpanel">

<c:forEach var="item" items="${juiceList}" varStatus="status">

<c:if test="${status.index mod 2 == 0}"> <div class="row"> </c:if>

<div class="col-md-6 g-mb-50"><article class="media">

<a class="g-width-100" href="#!">

<img class="img-fluid g-rounded-50x" src="<%=request.getContextPath()%>/resources/img/480x700/${item.category}/${item.url_500x500}">

</a><div



<h3

- 37 -

class="align-self-center u-heading-v1__title g-color-black g-font-weight-700 g-font-size-13 text-uppercase mb-0">${item.name }</h3>



</div><p


</article></div>


</c:forEach></div><div class="tab-pane fade" id="SMOOTHIE" role="tabpanel">

<c:forEach var="item" items="${smoothieList}" varStatus="status">





</a><div






</div><p


</article></div>


</c:forEach></div></div><div class="tab-pane fade" id="TEA" role="tabpanel">

<c:forEach var="item" items="${teaList}" varStatus="status">

<c:if test="${status.index mod 2 == 0}"> <div

- 38 -

class="row"> </c:if><div class="col-md-6 g-mb-50">

<article class="media"><a

class="g-width-100" href="#!"> <img

class="img-fluid g-rounded-50x" src="<%=request.getContextPath()%>/resources/img/480x700/${item.category}/${item.url_500x500}">

</a><div






</div><p


</article></div>


</c:forEach></div><div class="tab-pane fade" id="ADE" role="tabpanel">

<c:forEach var="item" items="${adeList}" varStatus="status">





</a><div






- 39 -

</div><p


</article></div>


</c:forEach></div>

</div></div>

</section><otpgo.jsp>

<%@ include file="/page/frame/header.jsp"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><style>.menu { -webkit-animation: blink 1s linear infinite;} @-webkit-keyframes blink { 0% { color: red; } 33% { color: yellow; } 66% { color: green; } 100% { color: blue; }\/* from { background-color: red;} to {background-color: green;} */}#menu-login {font-size: 120%;}#menu {font-size: 120%;}#menu-issue {font-size: 120%;}#menu-go {font-size: 150%;}#menu-num {font-size: 120%;}#menu-chk {font-size: 120%;}</style><section class="container g-pt-100 g-pb-20">



g-brd-gray-light-v3 mb-5"><li class="list-inline-item g-pb-10 g-px-10

g-mb-20 g-mb-0--sm"><a id="menu-login"

class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/login.jsp">로그인</a>

</li><li class="list-inline-item g-pb-10 g-px-10

g-mb-20 g-mb-0--sm"><a id="menu-issue"

class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/otpissue.jsp">OTP비밀번호</a>

</li><li class="list-inline-item g-pb-10 g-pr-10

g-mb-20 g-mb-0--sm">

- 40 -

<a id="menu-go" class="g-brd-bottom g-brd-2 g-brd-primary g-color-main g-color-black g-font-weight-600 g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/otpgo.jsp">OTP발송</a>

</li><li class="list-inline-item">

<a style="color:rgb(0, 0, 0);" class="menu g-font-weight-600 g-text-underline--none--hover "

id="menu"> ▷ </a></li><li class="list-inline-item g-pb-10 g-pr-10

g-mb-20 g-mb-0--sm"><a id="menu-num"

class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/otpnumber.jsp">OTP번호입력</a>

</li><li class="list-inline-item g-pb-10 g-pr-10

g-mb-20 g-mb-0--sm"><a id="menu-chk"

class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/controller/otpchk2.jsp">OTP검증</a>

</li></ul><c:if test="${usersession ne null && userssession ne

null}"><br><h5 class="text-center mb-4">

NAVER 메일로 OTP 번호가 발송됩니다.<br> 본인의 메일과 다를 경우 OTP번호 발송이 어려울 수

있습니다.<br> <h6 class="text-center mb-4">맞을경우 확인 다를경우

관리자에게 문의해주세요.</h6></h5><br><%@ include file="/getData/otpnumber.jsp" %></c:if>

</section></div></div> </section>

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

<%@ include file="/page/frame/header.jsp"%><%@ include file="/getData/selectUserList.jsp"%><script>

function removeUser(idx){if(confirm("회원을 탈퇴시키시겠습니까 ?")){

$.ajax({ type:"POST",

url:"<%=request.getContextPath()%>/controller/removeUser.jsp", data: { idx : idx }, success : function(data) { if(data.trim() !== 'error'){ alert('회원을 탈퇴시켰습니다.'); location.reload(); }

- 41 -

} });

}}

</script><section class="container g-pt-100 g-pb-20">

<div class="row"><div class="col-lg-12 g-mb-50">


g-brd-gray-light-v3 mb-5"><li class="list-inline-item g-pb-10 g-pr-10

g-mb-20 g-mb-0--sm"><a class="g-brd-bottom g-brd-2

g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/userOrder.jsp">Orders</a>



g-brd-primary g-color-main g-color-black g-font-weight-600 g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/myInfo/userList.jsp">Users</a>

</li></ul><div class="text-center mx-auto g-max-width-600

g-mb-50"><h2 class="g-color-black

mb-4">회원관리</h2></div><div class="row g-mx-minus-10 g-mb-50"

style="color:black; text-align:center"><div class="table-responsive"> <table class="table table-hover"> <thead> <tr>

<th>이름</th> <th>생일</th> <th>성별</th> <th>주민번호</th> <th>이메일</th> <th>전화번호</th> <th>비밀번호</th> <th>가입일</th> <th>탈퇴</th> </tr>

</thead> <tbody>

<c:forEach var="item"

items="${dataList}" varStatus="status"><tr>

<td>${item.name}</td>

<td>${item.birthDay}</td>

- 42 -

<td>${item.gender}</td>

<td>${item.idCardNumber}</td>

<td>${item.email}</td>

<td>${item.tel}</td>

<td>${item.password}</td>

<td>${item.regDate}</td> <td>

<span onclick="removeUser('${item.idx}')" style="cursor:pointer" class="u-label u-label-danger g-color-white">

Remove

</span>

</td> </tr></c:forEach>

</tbody> </table></div>

</div></section>

</div></div>

</section><%@ include file="/page/frame/footer.jsp"%><myOther.jsp>

<%@ include file="/page/frame/header.jsp"%><%@ include file="/getData/selectOrderMyCheck.jsp"%><section class="container g-pt-100 g-pb-20">


<div class="row justify-content-end g-mb-20 g-mb-0--md"><div class="col-md-7 g-mb-30">

<form class="input-group g-pos-rel"><span class="g-pos-abs g-top-0

g-left-0 g-z-index-3 g-px-13 g-py-10"><i

class="g-color-gray-dark-v4 g-font-size-12 icon-education-045 u-line-icon-pro"></i>

</span> <input class="form-control

u-form-control g-brd-around g-brd-gray-light-v3 g-brd-primary--focus g-font-size-13 g-rounded-3 g-pl-35 g-pa-0"

type="search" placeholder="Search all orders">

<div class="input-group-addon g-brd-none g-py-0">

<button class="btn u-btn-black g-font-size-12 text-uppercase g-py-12 g-px-25" type="submit">Search Orders</button>

</div></form>

- 43 -

</div></div><ul class="list-inline g-brd-bottom--sm g-brd-gray-light-v3

mb-5"><li class="list-inline-item g-pb-10 g-pr-10 g-mb-20

g-mb-0--sm"><a class="g-brd-bottom g-brd-2

g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/orderList.jsp">장바구니</a>

</li><li class="list-inline-item g-pb-10 g-px-10 g-mb-20


g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/checkOrder.jsp">결제하기</a>

</li><li class="list-inline-item g-pb-10 g-px-10 g-mb-20


g-brd-primary g-color-main g-color-black g-font-weight-600 g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/myOrder.jsp">주문내역</a>

</li></ul><c:forEach var="item" items="${userList}" varStatus="status">

<div class="g-brd-around g-brd-gray-light-v4 rounded g-mb-30">

<header class="g-bg-gray-light-v5 g-pa-20"><div class="row">

<div class="col-sm-3 col-md-2 g-mb-20 g-mb-0--sm">

<h4 class="g-color-gray-dark-v4 g-font-weight-400 g-font-size-12 text-uppercase g-mb-2">

주문일자</h4><span

class="g-color-black g-font-weight-300 g-font-size-13">${item.regDate}

</span></div><div class="col-sm-3

col-md-2 g-mb-20 g-mb-0--sm"><h4

class="g-color-gray-dark-v4 g-font-weight-400 g-font-size-12 text-uppercase g-mb-2">Total</h4>

<span class="g-color-black g-font-weight-300 g-font-size-13">₩${item.totalPrice }</span>

</div><div class="col-sm-3

col-md-2 g-mb-20 g-mb-0--sm"><h4

class="g-color-gray-dark-v4 g-font-weight-400 g-font-size-12 text-uppercase g-mb-2">

- 44 -

주문자</h4><span

class="g-color-black g-font-weight-300 g-font-size-13">${item.userName}

</span></div><div class="col-sm-3

col-md-4 ml-auto text-sm-right"><h4

class="g-color-gray-dark-v4 g-font-weight-400 g-font-size-12 text-uppercase g-mb-2">

주문번호 # ${item.idx}

</h4><a

class="g-font-weight-300 g-font-size-13" href="#!"></a></div>

</div></header>

<div class="rounded g-brd-around g-brd-gray-light-v4 g-overflow-x-scroll g-overflow-x-visible--lg g-pa-30">

<table class="text-center w-100"><thead class="h6

g-brd-bottom g-brd-gray-light-v4 g-color-black text-uppercase"><tr>

<th class="g-font-weight-500 text-left g-pb-20">제품</th>

<th class="g-font-weight-500 g-width-130 g-pb-20">가격</th>

<th></th></tr>

</thead><tbody>

<c:forEach var="menu" items="${menuList[item.idx]}" varStatus="status">

<tr class="g-brd-bottom g-brd-gray-light-v4">

<td class="text-left g-py-25">

<img class="d-inline-block g-width-100 mr-4" src="<%=request.getContextPath()%>/resources/img/150/${menu.category}/${menu.url_150x150}">

<div class="d-inline-block align-middle"><h4 class="h6 g-color-black">${menu.name}</h4><ul class="list-unstyled g-color-gray-dark-v4 g-font-size-12

g-line-height-1_6 mb-0"><li>설명: ${menu.name }</li>

</ul></div>

</td>

- 45 -

<td class="g-color-gray-dark-v2 g-font-size-13">₩${menu.price}</td>

</tr></c:forEach>

</tbody></table>

</div></div>

</c:forEach></div>

</div></section><%@ include file="/page/frame/footer.jsp"%><otherList.jsp>

<%@ include file="/page/frame/header.jsp"%><%@ include file="/getData/selectOrderList.jsp"%><%@ include file="/getData/selectMenuToIdx.jsp"%><script>

function removeCart(idx){$.ajax({

type:"POST", url:"<%=request.getContextPath()%>/controller/removeCart.jsp", data: { idx : idx }, success : function(data) { if(data.trim() !== 'error'){ alert('장바구니에서 삭제했습니다.'); location.reload(); } } });}

</script><section class="container g-pt-100 g-pb-20">



g-brd-gray-light-v3 mb-5"><li class="list-inline-item g-pb-10 g-pr-10


g-brd-primary g-color-main g-color-black g-font-weight-600 g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/orderList.jsp">장바구니</a>



g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/checkOrder.jsp">결제하기</a>

</li>

- 46 -

<li class="list-inline-item g-pb-10 g-px-10 g-mb-20 g-mb-0--sm">

<a class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/myOrder.jsp">주문내역</a>



mb-4">장바구니</h2><p class="lead" style="color:rgba(35, 12, 12,

0.6)">총 주문 금액: ₩${totalCount}

</p></div><div class="row g-mx-minus-10 g-mb-50">

<c:forEach var="item" items="${totalList}" varStatus="status">

<div class="col-md-6 col-lg-4 g-px-10">

<article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">

<div class="g-max-width-100 g-mr-15">

<img class="d-flex w-100" src="<%=request.getContextPath()%>/resources/img/150/${item.category}/${item.url_150x150}">

</div><div

class="media-body align-self-center"><h4

class="h5 g-mb-7"><a

class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#!">${item.name}</a>

</h4><a

class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#!">${item.regDate}</a>

<footer class="d-flex justify-content-between g-font-size-16"><span class="g-color-black g-line-height-1">₩${item.price}</span>

<ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">

<li class="list-inline-item align-middle"><a class="g-color-gray-dark-v5 g-color-primary--hover

g-text-underline--none--hover" href="#!" title="Remove to Cart" data-toggle="tooltip"

data-placement="top"> <i onclick="removeCart('${item.idx}')" class="mt-auto fa

fa-trash"></i>

- 47 -

</a></li>

</ul></footer>

</div></article>

</div></c:forEach>

</div><div class="text-center">

<a class="btn u-btn-primary g-font-size-12 text-uppercase g-py-12 g-px-25" href="<%=request.getContextPath()%>/page/order/checkOrder.jsp">주문하기</a>

</div></section>

</div></div>

</section><%@ include file="/page/frame/footer.jsp"%><checkOther.jsp>

<%@ include file="/page/frame/header.jsp"%><%@ include file="/getData/selectOrderList.jsp"%><%@ include file="/getData/selectMenuToIdx.jsp"%><script>

function pay(){if(confirm("${totalCount}원 결제를 진행하시겠습니까 ?")){

$.ajax({ type:"POST", url:"<%=request.getContextPath()%>/controller/addOrder.jsp", data: { menuList : '${JsonTotalList}', email : '${userSession.email}', name : '${userSession.name}' }, success : function(data) {

if(confirm("주문 완료. 주문 내역을 확인하시겠습니까 ? ")){

location.href = '<%=request.getContextPath()%>/page/order/myOrder.jsp';

}else{ location.href =

'<%=request.getContextPath()%>';}

} });}else{

alert('결제가 취소되었습니다.');}


<div class="row">

- 48 -

<div class="col-lg-12 g-mb-50"><section class="container g-py-100">

<ul class="list-inline g-brd-bottom--sm g-brd-gray-light-v3 mb-5">

<li class="list-inline-item g-pb-10 g-pr-10 g-mb-20 g-mb-0--sm">

<a class="g-brd-bottom g-brd-2 g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/orderList.jsp">장바구니</a>



g-brd-primary g-color-main g-color-black g-font-weight-600 g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/checkOrder.jsp">결제하기</a>



g-brd-transparent g-color-main g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover g-px-10 g-pb-13"href="<%=request.getContextPath()%>/page/order/myOrder.jsp">주문내역</a>



mb-4">결제하기</h2><p class="lead" style="color:rgba(35, 12, 12,

0.6)">총 주문 금액: ₩${totalCount}

</p></div><div class="rounded g-brd-around

g-brd-gray-light-v4 g-overflow-x-scroll g-overflow-x-visible--lg g-pa-30"><table class="text-center w-100">

<thead class="h6 g-brd-bottom g-brd-gray-light-v4 g-color-black text-uppercase">

<tr><th

class="g-font-weight-500 text-left g-pb-20">제품</th><th

class="g-font-weight-500 g-width-130 g-pb-20">가격</th><th></th>

</tr></thead><tbody>

<c:forEach var="item" items="${totalList}" varStatus="status">

<tr class="g-brd-bottom g-brd-gray-light-v4">

<td class="text-left g-py-25">

<img class="d-inline-block g-width-100 mr-4" src="<%=request.getContextPath()%>/resources/img/150/${item.category}/${item.url_150x150}"">

- 49 -

<div class="d-inline-block align-middle">

<h4 class="h6 g-color-black">${item.name }</h4><ul class="list-unstyled g-color-gray-dark-v4 g-font-size-12

g-line-height-1_6 mb-0"><li>설명: ${item.description }</li>

</ul></div>

</td><td

class="g-color-gray-dark-v2 g-font-size-13">₩${item.price}</td></tr>

</c:forEach></tbody>

</table></div><div class="text-center" style="margin-top:40px">

<a class="btn u-btn-primary g-font-size-12 text-uppercase g-py-12 g-px-25" href="#" onclick="pay()">결제하기</a>

</div></section>

</div></div>

</section><%@ include file="/page/frame/footer.jsp"%><demo.html>

<!doctype html><html class="no-js"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>demo</title> <meta name="description" content="demo"> <meta name="keywords" content="demo"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp,no-store" /> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> <link rel="icon" type="image/png" href="../dist/i/favicon.png"> <link rel="apple-touch-icon-precomposed" href="../dist/i/[email protected]"> <meta name="apple-mobile-web-app-title" content="demo" /> <link rel="stylesheet" href="../dist/amazeui.min.css"/> <link rel="stylesheet" href="demo.css"/></head>

<body> <header class="am-topbar am-header"> <div class="am-topbar-brand"> <strong>Hyperledger Explorer</strong> <small> 1.1</small> </div>

<div data-module="topbarcollapse" class="am-collapse am-topbar-collapse"> <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right">

- 50 -

<li><a data-type="fisrt" href="javascript:void(0);"><span class="am-icon-asterisk"></span>Monitor</a></li> <li><a data-type="second" href="javascript:void(0);"><span class="am-icon-history"></span>Details</a></li> </ul> </div> </header>

<div class="am-content"> <div data-module="firstlevel" class="am-animation-slide-left"> <div class="am-cf am-padding"> <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">Monitor</strong></div>

</div>

 <div class="am-g"> <div class="am-u-md-6"> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{ target: '#base'}"> 실시간 거래 tps </h4> </div> <div id="base" class="am-panel-collapse am-collapse am-in"> <div class="am-panel-bd"> <div id="basic-main-content" render="true" ></div> </div> </div> </div> </div>

<div class="am-u-md-6"> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{ target: '#type'}"> 블록 높이 </h4> </div> <div id="type" class="am-panel-collapse am-collapse am-in"> <div class="am-panel-bd"> <div id="block-main-content" render="true" ></div> </div> </div> </div> </div> </div>

<div class="am-g"> <div class="am-u-md-6"> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{ target: '#statistics'}"> 통계 </h4> </div> <div id="statistics" class="am-panel-collapse am-collapse am-in"> <div class="am-panel-bd"> <div id="statistics-main-content" render="true" ></div> </div> </div>

- 51 -

</div> </div>

<div class="am-u-md-6"> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{ target: '#expend'}"> 확장 </h4> </div> <div id="expend" class="am-panel-collapse am-collapse am-in"> <div class="am-panel-bd"> <div id="expend-main-content" render="true" ></div> </div> </div> </div> </div> </div> <hr/>

 <div data-module="secondlevel" class="am-animation-slide-right am-hide"> <div class="am-cf am-padding"> <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">상세내용 - </strong><small>트랜잭션</small></div> </div> <div class="am-g"> <div class="am-u-md-12"> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{ target: '#detail'}"> 세부 정보 </h4> </div> <div id="detail" class="am-panel-collapse am-collapse am-in"> <div class="am-panel-bd"> <div render="true"> <table id="detail-main-blocks" class="display"></table> </div> <hr /> <div render="true" > <table id="detail-main-trans" class="display"></table> </div> </div> </div> </div> </div> </div> </div> </div>

<script src="../dist/jquery.min.js"></script> <script src="../dist/amazeui.min.js"></script> <script src="../dist/echarts.min.js"></script> <script src="../dist/t3.min.js"></script> <link rel="stylesheet" type="text/css" href="../dist/DataTables-1.10.13/media/css/jquery.dataTables.css">

<script src="../dist/DataTables-1.10.13/media/js/jquery.dataTables.js"></script> <script src="demo.min.js"></script> <script type="text/javascript">

Box.Application.init();

</script>

- 52 -

</body></html>

<demo.min.js>

var $jscomp = { scope: {}, findInternal: function(a, b, c) { a instanceof String && (a = String(a)); for (var d = a.length, e = 0; e < d; e++) { var f = a[e]; if (b.call(c, f, e, a)) return { i: e, v: f } }a return { i: -1, v: void 0 } }};$jscomp.defineProperty = "function" == typeof Object.defineProperties ? Object.defineProperty : function(a, b, c) { if (c.get || c.set) throw new TypeError("ES3 does not support getters and setters."); a != Array.prototype && a != Object.prototype && (a[b] = c.value)};$jscomp.getGlobal = function(a) { return "undefined" != typeof window && window === a ? a : "undefined" != typeof global ? global : a};$jscomp.global = $jscomp.getGlobal(this);$jscomp.polyfill = function(a, b, c, d) { if (b) { c = $jscomp.global; a = a.split("."); for (d = 0; d < a.length - 1; d++) { var e = a[d]; e in c || (c[e] = {}); c = c[e] } a = a[a.length - 1]; d = c[a]; b = b(d); b != d && null != b && $jscomp.defineProperty(c, a, { configurable: !0, writable: !0, value: b }) }};$jscomp.polyfill("Array.prototype.find", function(a) { return a ? a : function(a, c) { return $jscomp.findInternal(this, a, c).v }}, "es6-impl", "es3");var Demo = function() { this.basic = new Basic("basic-main-content"); this.expend = new Expend("expend-main-content"); this.statistics = new Statistics("statistics-main-content"); this.block = new Block("block-main-content"); this.combo = new Combo("combo-main-content", "combo-main-echarts"); this.init = function() { this.basic.render();

- 53 -

this.block.render(); this.expend.render(); this.statistics.render(); this.combo.render(); return this } }, Basic = function(a) { this.elem = a; this.data = function() { var op = {tooltip:{formatter:"{a} <br/>{b} : {c}"},toolbox:{feature:{restore:{},saveAsImage:{}}},series:[{name:'트랜잭션tps',type:'gauge',detail:{formatter:"{value}",width:"90",height:"60"},center:["50%","70%"],radius:"120%",min:0,max:2000,startAngle:180,endAngle:0,data:[{value:100,name:'트랜잭션tps(트랜잭션 수/시간)'}]}]} return op }; this.render = function() { $("#" + this.elem).height(400); var op = this.data() //option and chart retrived for be used in setInterval

this.chart = echarts.init(document.getElementById(a)); this.chart.setOption(op)

var chart = this.chart $.get("http://127.0.0.1:10010/trans_last_hour",function(data,status){ console.log(data) // op.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; op.series[0].data[0].value = data chart.setOption(op, true); });

} }, Block = function(a) { this.elem = a; this.data = function() { var op = {title:{text:'블록높이'},legend:{data:['원래높이','성장높이']},dataZoom:[{type:'slider',start:0,end:100},{type:'inside',}],toolbox:{feature:{restore:{},saveAsImage:{}}},tooltip:{trigger:'axis',axisPointer:{type:'line'}},tooltip:{},xAxis:{data:[]},yAxis:{}}; return op }; this.render = function() { $("#" + this.elem).height(400); var chart = echarts.init(document.getElementById(a)); chart.setOption(this.data())

$.get("http://127.0.0.1:10010/daily_blocks_height",function(data,status){ var a = data.split('|') var categories = [] var seriesdata = []

for(var j =0; j<a.length; j++){ var tmp = a[j].split(',') categories.push(tmp[0]) seriesdata.push(Number(tmp[1]).toFixed(0)) }

var orgindata = [] //이중데이터 세로 막대형 차트，기본 데이터 var incredata = [] //성장 데이터 for(var j=0 ; j< seriesdata.length; j++){ if(j==0){ orgindata[j] = 0 incredata[j] = seriesdata[j]

- 54 -

}else{ orgindata[j] = seriesdata[j-1] incredata[j] = seriesdata[j] - seriesdata[j-1] } }

op = { xAxis: { data: categories }, series: [{ name: '원래 높이', type: 'bar', stack: '총 금액', color: ['#3398DB'], label: { normal: { show: true, position: 'insideRight' } }, data: orgindata }, { name: '성장 높이', type: 'bar', stack: '총 금액', label: { normal: { show: true, position: 'insideRight' } }, data: incredata }] }; chart.setOption(op) }) } },}; this.render = function() { $("#" + this.elem).height(600); var a = this.data(); $("#" + this.content).append(a.tables); this.chart = echarts.init(document.getElementById(b)); this.chart.setOption(JSON.parse(a.options)) } }, Details = function(a, b) { this.blocktable = a; this.transtable = b;

this.render = function() { //blocktable blocktable = this.blocktable $.get("http://127.0.0.1:10010/blocks", function(datab, status) { dataSetb = datab.split('|') for (j = 0; j < dataSetb.length; j++) { dataSetb[j] = dataSetb[j].split(',') } console.log(dataSetb[0]) $("#" + blocktable).DataTable({ data: dataSetb,

- 55 -

columns: [{ title: "블록 높이" }, { title: "이전 해시" }, { title: "데이터 해시" }] }); })

//transaction table transtable = this.transtable $.get("http://127.0.0.1:10010/transactions", function(datat, status) { dataSett = datat.split('|') for (j = 0; j < dataSett.length; j++) { dataSett[j] = dataSett[j].split(',') }

$('#' + transtable).DataTable({ data: dataSett, columns: [{ title: "거래 번호" }, { title: "거래 유형" }, { title: "거래 시간" }, { title: "스마트 계약 이름" }, { title: "채널 이름" }, { title: "블록 소속" }] }); }) } };

Box.Application.addModule("topbarcollapse", function(a) { function b() { $(c).find("li a").removeClass("am-active") } var c; return { init: function() { c = a.getElement() }, destroy: function() { c = null }, onclick: function(c, e, f) { switch (f) { case "fisrt": b(); $(e).addClass("am-active"); a.broadcast("firstOpen"); a.broadcast("secondClose"); break; case "second": b(); $(e).addClass("am-active"); a.broadcast("firstClose"); a.broadcast("secondOpen") } }

- 56 -

}});Box.Application.addModule("firstlevel", function(a) { var b; return { init: function() { b = a.getElement(); (new Demo).init() }, destroy: function() { b = null }, onclick: function(a, b, e) {}, onchange: function(a, b, e) {}, onmessage: { firstOpen: function() { $(b).hasClass("am-hide") && $(b).removeClass("am-hide") }, firstClose: function() { $(b).hasClass("am-hide") || $(b).addClass("am-hide") } } }});Box.Application.addModule("secondlevel", function(a) { var b, c, d = -1; return { init: function() { b = a.getElement(); c = new Details("detail-main-blocks", "detail-main-trans") }, destroy: function() { b = c = null }, onclick: function(a, b, c) {}, onchange: function(a, b, c) {}, onmessage: { secondOpen: function() { $(b).hasClass("am-hide") && ($(b).removeClass("am-hide"), -1 == d && c.render(), d++) }, secondClose: function() { $(b).hasClass("am-hide") || $(b).addClass("am-hide") } } }});

<demo.sql>

-- MySQL dump 10.14 Distrib 5.5.52-MariaDB, for Linux (x86_64)---- Host: localhost Database: test-- -------------------------------------------------------- Server version5.5.52-MariaDB/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;/*!40101 SET NAMES utf8 */;/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;/*!40103 SET TIME_ZONE='+00:00' */;/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS,

- 57 -

FOREIGN_KEY_CHECKS=0 */;/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;DROP TABLE IF EXISTS `blocks`;CREATE TABLE `blocks` ( `number` bigint(20) unsigned NOT NULL, `previous_hash` varchar(255) NOT NULL DEFAULT '', `data_hash` varchar(255) NOT NULL DEFAULT '', PRIMARY KEY (`number`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;LOCK TABLES `blocks` WRITE;UNLOCK TABLES;DROP TABLE IF EXISTS `channels`;CREATE TABLE `channels` ( `channel_name` varchar(255) NOT NULL, `height` bigint(20) unsigned NOT NULL DEFAULT '0', `current_block_hash` varchar(255) NOT NULL DEFAULT '', `previous_block_hash` varchar(255) NOT NULL DEFAULT '', PRIMARY KEY (`channel_name`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;

LOCK TABLES `channels` WRITE;UNLOCK TABLES;DROP TABLE IF EXISTS `transactions`;CREATE TABLE `transactions` ( `tx_i_d` varchar(255) NOT NULL, `type` int(11) NOT NULL DEFAULT '0', `timestamp` varchar(255) NOT NULL DEFAULT '', `chaincode_name` varchar(255) NOT NULL DEFAULT '', `channel_name` varchar(255) NOT NULL DEFAULT '', `number` bigint(20) unsigned NOT NULL DEFAULT '0', PRIMARY KEY (`tx_i_d`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;/*!40101 SET character_set_client = @saved_cs_client */;

LOCK TABLES `transactions` WRITE;ALTER TABLE `transactions` ENABLE KEYS */;UNLOCK TABLES;/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

- 58 -

5-2. 발표자료

- 59 -

- 60 -

- 61 -

- 62 -

- 63 -

- 64 -

- 65 -

- 66 -

- 67 -

- 68 -

- 69 -

- 70 -

- 71 -

otp 인증방식을 활용한 블록체인 모니터링...

Documents