본문 바로가기
Spring

[Spring][Project: 쇼핑몰 웹사이트][1.1] 회원가입/ 로그인 페이지 구현

imakara 2023. 5. 18. 10:41

쇼핑몰 웹사이트를 구현해보고자 한다. 공부 목적으로 남기는 POST 이므로 오류가 있을 수 있음 주의!

 

목차

1. 메인 페이지

2. 로그인 페이지

3. 회원가입 페이지

4. DB 테이블 및 VO 생성

5. Mapper

 

1~3.까지 페이지는 틀과 css 작업이므로 다른 블로그를 참고해서 빠르게 넘어가봤다.

1. 메인 페이지

[main.jsp]

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kitsch :)</title>
<link rel="stylesheet" href="resources/css/main.css">
</head>
<body>
	<div class="wrapper">
		<div class="wrap">
			<div class="top_gnb_area">
				<h1>gnb area</h1>
			</div>
			<div class="top_area">
				<div class="logo_area">
					<h1>logo area</h1>
				</div>
				<div class="search_area">
					<h1>Search area</h1>
				</div>
				<div class="login_area">
					<div class="login_button"><a href="/member/login">LOGIN</a></div>
					<span><a href="/member/join">JOIN US</a></span>
				</div>
				<div class="clearfix"></div>			
			</div>
			<div class="navi_bar_area">
				<h1>navi area</h1>
			</div>
			<div class="content_area">
				<h1>content area</h1>
			</div>
		</div>
	</div>
</body>
</html>

[main.css]

더보기 
@charset "UTF-8";
*{
	margin: 0;
	padding:0;
}
/* 화면 전체 렙 */
.wrapper{
	width: 1900px;
}
/* content 랩 */
.wrap{
	width : 1080px;
	margin: auto;
}
/* 홈페이지 기능 네비 */ 
.top_gnb_area{
	width: 100%;
    height: 50px;
    background-color: #a2a2ea;
}
/* 로고, 검색, 로그인 */
.top_area{
	width: 100%;
    height: 150px;
    /* background-color: #f7f0b9; */
}
/* 로고 영역 */
.logo_area{
	width: 25%;
	height: 100%;
	background-color: red;
	float:left;
}
/* 검색 박스 영역 */
.search_area{
	width: 50%;
	height: 100%;
	background-color: yellow;
	float:left;	
}
/* 로그인 버튼 영역 */
.login_area{
	width: 25%;
	height: 100%;
	display: inline-block;	
	text-align: center;		
}
.login_button{
	height: 50%;
    background-color: #D4DFE6;
    margin-top: 30px;
    line-height: 77px;
    font-size: 40px;
    font-weight: 900;
    border-radius: 10px;
    cursor: pointer;	
}
.login_area>span{
	margin-top: 10px;
    font-weight: 900;
    display: inline-block;
}
.login_button{
	height : 50%;
	background-color: #D4DFE6;
	margin-top:30px;
}

/* 제품 목록 네비 */
.navi_bar_area{
	width: 100%;
    height: 70px;
    background-color: #7696fd;
}

/* 홈페이지 메인 제품 목록  */
.content_area{
	width: 100%;
    background-color: #97ef97;
    height: 1000px;
}

/* float 속성 해제 */
.clearfix{
	clear: both;
}

참고: Kim VamPa 블로그

2. 로그인 페이지

[login.jsp]

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
<link rel="stylesheet" href="/resources/css/member/login.css">
</head>
<body>
	<div class="wrapper">
		
		<div class="wrap">
			<div class="logo_wrap">
				<span>kitsch:) Shopping Mall</span>
			</div>
			<div class="login_wrap"> 
				<div class="id_wrap">
						<div class="id_input_box">
						<input class="id_input">
					</div>
				</div>
				<div class="pw_wrap">
					<div class="pw_input_box">
						<input class="pw_iput">
					</div>
				</div>
				<div class="login_button_wrap">
					<input type="button" class="login_button" value="Login">
				</div>			
			</div>
			
			
		</div>
	
	</div>
</body>
</html>

[login.css]

더보기 
@charset "UTF-8";
*{
	margin: 0;
	padding:0;
}

/* 화면 전체 렙 */
.wrapper{
	width: 1900px;	
}

/* content 랩 */
.wrap{
	width : 800px;
	margin: auto;
}

/* 페이지 로고 */
.logo_wrap{
	text-align: center;	
	margin: 150px 0;	
}
.logo_wrap>span{
	font-size : 50px;
	font-weight: 900;
}


/* 로그인 area */
.id_input_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	display: block;
	width : 80%;
	margin : auto;	
}
.id_input{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}


.pw_wrap{
	margin-top: 40px;
}
.pw_input_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	display: block;
	width : 80%;
	margin : auto;	
}
.pw_iput{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}


.login_button_wrap{
	margin-top: 40px;
	text-align: center;
}
.login_button{
	width: 84%;
    height: 80px;
    background-color: #6AAFE6;
    font-size: 40px;
    font-weight: 900;
    color: white;
    margin : auto;
}

/* float 속성 해제 */
.clearfix{
	clear: both;
}

참고: Kim VamPa 블로그

 

3. 회원가입 페이지

[join.jsp]

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Us</title>
<link rel="stylesheet" href="/resources/css/member/join.css">
</head>
<body>
	<div class="wrapper">
		<form action="">
		<div class="wrap">
				<div class="subjecet">
					<span>Join Us</span>
				</div>
				<div class="id_wrap">
					<div class="id_name">ID</div>
					<div class="id_input_box">
						<input class="id_input">
					</div>
					<span class="id_input_can">You can use this account.</span>
					<span class="id_input_cannot">This account already exists.</span>
				</div>
				<div class="pw_wrap">
					<div class="pw_name">Password</div>
					<div class="pw_input_box">
						<input class="pw_input">
					</div>
				</div>
				<div class="pwck_wrap">
					<div class="pwck_name">Password Check</div>
					<div class="pwck_input_box">
						<input class="pwck_input">
					</div>
				</div>
				<div class="user_wrap">
					<div class="user_name">Name</div>
					<div class="user_input_box">
						<input class="user_input">
					</div>
				</div>
				<div class="mail_wrap">
					<div class="mail_name">Email</div> 
					<div class="mail_input_box">
						<input class="mail_input">
					</div>
					<div class="mail_check_wrap">
						<div class="mail_check_input_box">
							<input class="mail_check_input">
						</div>
						<div class="mail_check_button">
							<span>Send a Code</span>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="address_wrap">
					<div class="address_name">Address</div>
					<div class="address_input_1_wrap">
						<div class="address_input_1_box">
							<input class="address_input_1">
						</div>
						<div class="address_button">
							<span>Find an address</span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class ="address_input_2_wrap">
						<div class="address_input_2_box">
							<input class="address_input_2">
						</div>
					</div>
					<div class ="address_input_3_wrap">
						<div class="address_input_3_box">
							<input class="address_input_3">
						</div>
					</div>
				</div>
				<div class="join_button_wrap">
					<input type="button" class="join_button" value="JOIN">
				</div>
			</div>
		</form>
	</div>
	
</body>
</html>

[join.css]

더보기 
@charset "UTF-8";
*{
	margin: 0;
	padding:0;
}

/* 화면 전체 렙 */
.wrapper{
	width: 1900px;	
}

/* content 랩 */
.wrap{
	width : 800px;
	margin: auto;
}
/* 페이지 제목 */
.subjecet{
	width: 100%;
    height: 120px;
    background-color: #8EC0E4;
}
.subjecet span{
	margin-left: 31px;
    font-size: 80px;
    font-weight: 900;
    color: white;
}

/* 아이디 영역 */
.id_wrap{
	width: 100%;
    margin-top: 20px;
}
.id_name{
	font-size: 25px;
    font-weight: bold;
}
.id_input_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	
}
.id_input{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}

/* 비밀번호 영역 */
.pw_wrap{
	width: 100%;
    margin-top: 20px;
}
.pw_name{
	font-size: 25px;
    font-weight: bold;
}
.pw_input_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	
}
.pw_input{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}

/* 비밀번호 확인 영역 */
.pwck_wrap{
	width: 100%;
    margin-top: 20px;
}
.pwck_name{
	font-size: 25px;
    font-weight: bold;
}
.pwck_input_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	
}
.pwck_input{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}

/* 이름 영역 */
.user_wrap{
	width: 100%;
    margin-top: 20px;
}
.user_name{
	font-size: 25px;
    font-weight: bold;
}
.user_input_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	
}
.user_input{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}

/* 메일 영역 */
.mail_wrap{
	width: 100%;
    margin-top: 20px;
}
.mail_name{
	font-size: 25px;
    font-weight: bold;
}
.mail_input_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	
}
.mail_input{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}
.mail_check_wrap{
	margin-top: 20px;	
}
.mail_check_input_box{
	border: 1px solid black;
    height: 31px;
    padding: 10px 14px;
    width: 61%;
    float: left;
}
.mail_check_input{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}
.mail_check_button{
    border: 1px solid black;
    height: 51px;
    width: 30%;
    float: right;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    background-color: #ececf7;
    cursor: pointer;
}

/* 주소 영역 */
.address_wrap{
	width: 100%;
    margin-top: 20px;
}
.address_name{
	font-size: 25px;
    font-weight: bold;
}
.address_input_1_box{
	border: 1px solid black;
    height: 31px;
    padding: 10px 14px;
    width: 61%;
    float: left;	
}
.address_input_1{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;	
}
.address_button{
    border: 1px solid black;
    height: 51px;
    width: 30%;
    float: right;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    background-color: #ececf7;
    cursor: pointer;	
}
.address_input_2_wrap{
	margin-top: 20px;
}
.address_input_2_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	
}
.address_input_2{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}

.address_input_3_wrap{
	margin-top: 20px;
}
.address_input_3_box{
	border: 1px solid black;
	height:31px;
	padding: 10px 14px;	
	
}
.address_input_3{
	width:100%;
	height:100%;
	border:none;
	font-size:28px;
}

/* 가입하기 버튼 */
.join_button_wrap{
	margin-top: 40px;
	text-align: center;
}
.join_button{
	width: 100%;
    height: 80px;
    background-color: #6AAFE6;
    font-size: 40px;
    font-weight: 900;
    color: white;
}

/* float 속성 해제 */
.clearfix{
	clear: both;
}

참고: Kim VamPa 블로그

4. DB 테이블 및 VO 생성

4-1. DB 테이블 생성 (MySQL)

위 그림에서 root-context.xml 파일에서 설정해놓은 DB명을 찾아서 거기에 Table을 생성해 줄건데,

comamnd 창에서 'show databases;'로 현재 DB명들을 확인할 수 있다.

위 그림과 같이 'use 내DB명;'을 선언하고, 그 다음에 'Create table...'을 한다.

CREATE TABLE FASHION_MEMBER(
  memberId VARCHAR(50),
  memberPw VARCHAR(100) NOT NULL,
  memberName VARCHAR(30) NOT NULL,
  memberMail VARCHAR(100) NOT NULL,
  memberAddr1 VARCHAR(100) NOT NULL,
  memberAddr2 VARCHAR(100) NOT NULL,
  memberAddr3 VARCHAR(100) NOT NULL,
  adminCk int NOT NULL,
  regDate DATE NOT NULL,
  money int NOT NULL,
  point int NOT NULL,
  PRIMARY KEY(memberId)
);

 

테스트로 관리자계정을 하나 만들어 보자

insert into fashion_member values('admin', 'admin', 'admin', 'admin', 'admin', 'admin', 'admin', 1, sysdate(), 1000000, 1000000);

정보가 정확히 등록되었는지 확인하려면, select * from fashion_member; 하면 아래와 같이 나온다.

 

4-2. VO 생성

[src/main/java] > [com.sample.model] > 'MemberVO.java'

java파일을 생성하고 변수명들을 적은다음에 getter, setter, toString 기능을 사용해서 마무리한다.

Top MenuBar:[Source] > [Generate Getters and Setters...] / [Generate toString()...]

Getter / Setter
toString()

[MemberVO.java]

더보기 
package com.sample.model;

public class MemberVO {
	//회원 id
	private String memberId;
	
	//회원 비밀번호
	private String memberPw;
	
	//회원 이름
	private String memberName;
	
	//회원 이메일
	private String memberMail;
	
	//회원 우편번호
	private String memberAddr1;
	
	//회원 주소
	private String memberAddr2;
	
	//회원 상세주소
	private String memberAddr3;
	
	// 관리자 구분(0:일반사용자, 1:관리자)
	private int adminCk;
	
	//등록일자
	private int regDate;
	
	//회원 돈
	private int money;
	
	//회원 포인트
	private int point;

	public String getMemberId() {
		return memberId;
	}

	public void setMemberId(String memberId) {
		this.memberId = memberId;
	}

	public String getMemberPw() {
		return memberPw;
	}

	public void setMemberPw(String memberPw) {
		this.memberPw = memberPw;
	}

	public String getMemberName() {
		return memberName;
	}

	public void setMemberName(String memberName) {
		this.memberName = memberName;
	}

	public String getMemberMail() {
		return memberMail;
	}

	public void setMemberMail(String memberMail) {
		this.memberMail = memberMail;
	}

	public String getMemberAddr1() {
		return memberAddr1;
	}

	public void setMemberAddr1(String memberAddr1) {
		this.memberAddr1 = memberAddr1;
	}

	public String getMemberAddr2() {
		return memberAddr2;
	}

	public void setMemberAddr2(String memberAddr2) {
		this.memberAddr2 = memberAddr2;
	}

	public String getMemberAddr3() {
		return memberAddr3;
	}

	public void setMemberAddr3(String memberAddr3) {
		this.memberAddr3 = memberAddr3;
	}

	public int getAdminCk() {
		return adminCk;
	}

	public void setAdminCk(int adminCk) {
		this.adminCk = adminCk;
	}

	public int getRegDate() {
		return regDate;
	}

	public void setRegDate(int regDate) {
		this.regDate = regDate;
	}

	public int getMoney() {
		return money;
	}

	public void setMoney(int money) {
		this.money = money;
	}

	public int getPoint() {
		return point;
	}

	public void setPoint(int point) {
		this.point = point;
	}

	@Override
	public String toString() {
		return "MemberVO [memberId=" + memberId + ", memberPw=" + memberPw + ", memberName=" + memberName
				+ ", memberMail=" + memberMail + ", memberAddr1=" + memberAddr1 + ", memberAddr2=" + memberAddr2
				+ ", memberAddr3=" + memberAddr3 + ", adminCk=" + adminCk + ", regDate=" + regDate + ", money=" + money
				+ ", point=" + point + "]";
	}
	
	
}

5. Mapper

5-1. folders 생성

  • [src/main/resources] > [com]
  • [com] > [sample]
  • [sample] > [mapper]

[src/main/resources]안에 [com]생성 -> 그 안에 [sample] 생성 -> 그 안에 [mapper]생성, 총 3개 폴더를 생성한다.

이때 폴더 이름은 [src/main/java]안에 만들었던 [com.sample.mapper]명과 같게 생성한다.

5-2. mapper.xml 생성

5-1에서 만든 [mapper]폴더 안에 'MemberMapper.xml' 파일을 만든다.

파일 <mapper>태그 안에 <insert>태그를 추가할건데, 그 안에는 [4-1]에서 테스트한다고 넣었던 insert 쿼리 명령문 형태를 넣어줄 것이다. 이때 values 뒤에 들어오는 데이터들을 ${VO에 저장된 변수 이름} 으로 교체해주면 된다.

([4-2] MemberVO.java 변수명 참고)

[MemberMapper.xml]

더보기 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sample.mapper.MemberMapper">
  	<insert id="memberJoin">
  		insert into book_member values(#{memberId}, #{memberPw}, #{memberName}, #{memberMail}, #{memberAddr1}, #{memberAddr2}, #{memberAddr3}, 0, sysdate(), 100000, 5000 )
  	</insert>
</mapper>

5-3. MemberMapper.java 인터페이스 생성

[src/main/java] > [com.sample.mapper] > 'MemberMapper.java'

 

회원등록 insert쿼리를 실행시켜 줄 메서드를 작성한다.

[MemberMapper.java]

더보기 
package com.sample.mapper;

import com.sample.model.MemberVO;

public interface MemberMapper {
	
	//JoinUs
	public void memberJoin(MemberVO member);
}

5-4. Mapper 테스트

[src/test.java] > 패키지 [com.sample.mapper] 생성 > 'MemberMapperTest.java' 생성

[MemberMapperTest.java]

더보기 
package com.sample.mapper;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import com.sample.model.MemberVO;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
public class MemberMapperTest {

	@Autowired
	private MemberMapper membermapper;			//MemberMapper.java 인터페이스 의존성 주입
	
	//회원가입 쿼리 테스트 메서드
	@Test
	public void memberJoin() throws Exception{
		MemberVO member = new MemberVO();
		
		member.setMemberId("test");			//회원 id
		member.setMemberPw("test");			//회원 비밀번호
		member.setMemberName("test");		//회원 이름
		member.setMemberMail("test");		//회원 메일
		member.setMemberAddr1("test");		//회원 우편번호
		member.setMemberAddr2("test");		//회원 주소
		member.setMemberAddr3("test");		//회원 상세주소
		
		membermapper.memberJoin(member);			//쿼리 메서드 실행
		
	}
	
}

jUnit으로 테스트해보면,

확인해보면 위 그림과 같이 데이터가 잘 들어간 것을 확인할 수 있다.

다음 POST에서,, 콘티뉴,,!

[Spring][Project: 쇼핑몰 웹사이트][1.2] 회원가입/ 로그인 페이지 구현

 

안뇽~~~ :)

'Spring' 카테고리의 다른 글

[Spring][Project: 쇼핑몰 웹사이트][2.0] 프로젝트 흐름 / MVC 흐름 잡고가기  (0) 2023.05.19
[Spring][Project: 쇼핑몰 웹사이트][1.2] 회원가입/ 로그인 페이지 구현  (0) 2023.05.18
[Spring / MVC project] MVC 프로젝트 추가 설정  (0) 2023.05.17
[Spring / eclipse] 한글깨짐 UTF-8 설정  (0) 2023.05.17
[Spring / MVC project] STS3설치 + MySQL + MyBatis 연동  (0) 2023.05.16

'Spring' Related Articles

티스토리툴바