반응형
1. 메인화면
메인화면에 들어가자마자 제품들이 보이게 구성하였다. 사용자는 메인화면에서 바로 물건을 확인하고 장바구니에 넣고 결제까지 할 수 있다.
상단바에는 다양한 제품을 볼 수 있도록 항목을 추가했지만 시간 문제로 모든 페이지를 구현하지는 못했다.
판매항목 옆에는 회원관리와 장바구니를 관리할 수 있도록 링크가 걸려있다.
2. 반응형 웹
쇼핑몰 과제에 반응형 웹을 적용시키고 싶어 구현해 보았다. 창의 크기가 작아지면 상단바의 항목이 사라지고 옆면의 토글버튼이 나타난다. 토글버튼을 누르면 항목들을 리스트 형태로 볼 수 있다.
< UserMain.jsp > ---유저 메인(관리자 메인은 따로 구현)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="UserTop.jsp" %>
<%
String[] img ={"ozing.jpeg", "banana.jpeg", "gaesoo.jpeg", "poka.jpeg", "eyejelly.jpeg", "whitehime.jpeg", "milkys.jpeg", "minit.jpg", "ggobuk.jpeg"};
String[] name = {"오징어집", "바나나킥", "헛개수", "포카칩", "눈알젤리", "화이트하임", "밀키스", "미닛메이드", "꼬북칩"};
String[] price = {"1,500", "1,500", "1,700", "1,300", "1,350", "1,400", "500", "1,000", "1,100"};
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SnackMall</title>
<script type="text/javascript">
function fnCart(name, price) {
//alert("Name : " + name + "\nPrice : " + price);
if(confirm("장바구니에 담으시겠습니까?")) {
location.href = "contents/pro/CartPro.jsp?name=" + name + "&price=" + price;
}
}
function fnView() {
if(confirm("장바구니를 보시겠습니까?")){
location.href = "contents/view/CartView.jsp";
}
}
</script>
</head>
<body>
<div align="center">
<h3>[오늘의 특가]</h3>
<table border="1">
<tr align="right">
<td colspan="3">
<input type="button" value="장바구니 보기" onclick="fnView()" />
</td>
</tr>
<%
for(int i = 0; i < img.length; i++) {
if(i % 3 == 0) {
out.println("<tr align='center'>");
}
out.println("<td>");
out.println("<table>");
out.println("<tr align='center'>");
out.println("<td>");
out.println("<img src = 'img/" + img[i] + "' width='150' height='150' />");
out.println("</td>");
out.println("</tr>");
out.println("<tr align='center'>");
out.println("<td>");
out.println("<b>" + name[i] + "</b>");
out.println("</td>");
out.println("</tr>");
out.println("<tr align='center'>");
out.println("<td>");
out.println("<b>￦" + price[i] + "원</b>");
out.println("</td>");
out.println("</tr>");
out.println("<tr align='center'>");
out.println("<td>");
//한 줄로 쓰기
//out.println("<input type='button' value='장바구니 담기' onclick='fnCart(\"" + name[i] + "\", \"" + price[i] + "\")' />");
//두 줄로 쓰기, 닫는 큰 따옴표와 괄호 옆의 띄어쓰기 필수
out.println("<input type='button' value='장바구니 담기' ");
out.println("onclick='fnCart(\"" + name[i] + "\", \"" + price[i] + "\")' />");
out.println("</td>");
out.println("</tr>");
out.println("</table>");
out.println("</td>");
if(i % 3 == 2) {
out.println("</tr>");
}
}
%>
</table>
</div>
</body>
</html>
< UserTop.jsp > --- 상단바. 반응형 웹 구현
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/TopNav.css">
<script src="https://kit.fontawesome.com/8351000410.js" crossorigin="anonymous"></script>
<title>SnackMall</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<i class="fas fa-cookie-bite"></i>
<a href="UserMain">SnackMall</a>
</div>
<ul class="navbar_menu">
<li><a href="">오늘의 특가</a></li>
<li><a href="">인기상품</a></li>
<li><a href="">과자</a></li>
<li><a href="">초콜릿/사탕/껌</a></li>
<li><a href="">음료</a></li>
<li><a href="">수입과자</a></li>
</ul>
<ul class="navbar_usermenu">
<%
// 현재 로그인된 아이디가 없다면 (= session에 저장된 id가 없다면)
String id = (String) session.getAttribute("ID");
if(id == null) {
%>
<li><a href="contents/view/JoinForm.jsp">회원가입</a></li>
<li><a href="contents/view/LoginForm.jsp">로그인</a></li>
<li><a href="contents/view/CartView.jsp">장바구니</a></li>
<%
}
// 현재 로그인된 아이디가 있다면 (= session에 저장된 id가 있다면)
else {
%>
<li><a href="contents/pro/LogoutPro.jsp">로그아웃</a></li>
<li><a href="contents/view/CartView.jsp">장바구니</a></li>
<li><a href="">마이페이지</a></li>
<%
}
%>
</ul>
<ul class="navbar_icons">
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
<a href="#" class="navbar_toggleBtn">
<i class="fas fa-bars"></i>
</a>
</nav>
<script> //윈도우 창의 사이즈를 줄였을 시 나오는 햄버거 모양 토글바
const toggleBtn = document.querySelector('.navbar_toggleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
toggleBtn.addEventListener('click',()=>{
menu.classList.toggle('active');
icons.classList.toggle('active');
});
</script>
</body>
</html>반응형 웹 구현 시 참고 영상
드림코딩 by 엘리 님 [웹사이트 따라만들기, 반응형 헤더편]: https://youtu.be/X91jsJyZofw
3. 로그인 화면
상단의 로그인 버튼을 누르면 로그인 페이지로 이동한다. (아쉽게도 파일의 경로가 달라지면 css가 적용되지 않는 오류 때문에 css를 따로 적용시키지 못했다.) 사용자는 이 페이지에서 로그인을 할 수도 있고, 회원가입이 되지 않았다면 회원가입을 할 수도 있다. UserType으로 사용자와 관리자를 구분하여 두 사용자가 로그인 할 시 각기 다른 메인 화면(관리자용 메인 / 소비자용 메인)을 보여주는 것도 로그인 항목에 구현하였다.
(구현 기능 시뮬레이션)
1. 로그인 화면에 회원가입이 되지 않은 아이디와 비밀번호를 임의로 입력했다.
2. 아이디를 확인해 달라는 문구와 함께 alert 창이 뜬다. 아이디가 일치하지 않는 경우는 이렇게 팝업창이 뜨고 로그인 세션을 부여하지 않는다. 아이디는 데이터베이스에 저장되어 있지만 비밀번호가 다른 경우는 아래와 같이 비밀번호 확인 문구가 뜨며 로그인이 되지 않는다.
< LoginForm.jsp > --- 로그인 화면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<%
request.setCharacterEncoding("UTF-8");
%>
<script src="https://kit.fontawesome.com/8351000410.js" crossorigin="anonymous"></script>
<title>로그인 페이지</title>
<style>
#wrap{
width:270px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
table{
border:3px solid #d49466
}
td{
border:1px solid #d49466
}
#title{
background-color:#d49466
}
</style>
<script>
function checkValue() {
inputForm = eval("document.loginInfo");
if(!inputForm.ID.value) {
alert("아이디를 입력하세요");
inputForm.ID.focus();
return false;
}
if(!inputForm.PWD.value) {
alert("비밀번호를 입력하세요");
inputForm.PWD.focus();
return false;
}
}
// 회원가입 버튼 클릭시 회원가입 화면으로 이동
function goJoinForm() {
location.href="JoinForm.jsp";
}
function goAdminLoginPro() {
location.href="../admin/AdminLoginPro()";
}
</script>
</head>
<body>
<div id="wrap">
<b><font size="6" color="gray"> <i class="fas fa-sign-in-alt"></i> 로그인</font></b>
<br><br><br>
<form name="loginInfo" method="post" onsubmit="return checkValue()" action="../pro/LoginPro.jsp">
<!-- 이미지 추가 -->
<img src="../../img/welcome.jpg">
<br><br>
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="ID" maxlength="100"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="PWD" maxlength="100"></td>
</tr>
</table>
<br>
<input type="submit" value=" 로그인 ">
<input type="button" value=" 회원가입 " onClick="goJoinForm()">
<br><br>
<input type="button" value=" 아이디 / 비밀번호 찾기 ">
</form>
</div>
</body>
</html>
< User.java> ---user 데이터를 데이터베이스에 세팅하거나 가져오게 해주는 파일
package UserController;
public class User {
public String UserType;
public String ID;
public String PW;
public String UserName;
public String Email;
public String Contact;
public String Address;
public String getUserType() {
return UserType;
}
public void setUserType(String userType) {
UserType = userType;
}
public String getID() {
return ID;
}
public void setID(String iD) {
ID = iD;
}
public String getPW() {
return PW;
}
public void setPW(String pW) {
PW = pW;
}
public String getUserName() {
return UserName;
}
public void setUserName(String userName) {
UserName = userName;
}
public String getEmail() {
return Email;
}
public void setEmail(String email) {
Email = email;
}
public String getContact() {
return Contact;
}
public void setContact(String contact) {
Contact = contact;
}
public String getAddress() {
return Address;
}
public void setAddress(String address) {
Address = address;
}
}
< UserDAO.java > --- DAO: Data Access Object,데이터베이스에 접속하게 해준다
package UserController;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class UserDAO {
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
public UserDAO() { //try catch 문을 통해 예외 처리
try {
String DB_URL = "jdbc:mysql://localhost:3306/snackmall?characterEncoding=UTF-8&serverTimezone=UTC";
String userName = "root";
String password = "23er";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(DB_URL,userName,password);
}
catch(Exception e) {
e.printStackTrace();
}
}
public int LoginCheck(String ID, String PWD) {
String sql = "SELECT PWD FROM login_db WHERE ID=?";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, ID); // sql 문에서 ?에 해당하는 값에 userID를 집어넣음 첫번째 물음표일 경우 1 두번째 물음표이면 2이런식으로
rs = pstmt.executeQuery(); // sql 수행결과를 rs에 저장(Boolean) 존재시 true 존재x = false
if(rs.next()) {
if(rs.getString(1).contentEquals(PWD)) { // ?로 사용자에게 받은 ID와 비밀번호가 일치하는 경우
return 1; //로그인 성공
}
else
return 0; //Password오류
} //만약 존재할 시
return -1; //ID오류
} catch(Exception e) {
e.printStackTrace();
}
return -2; //db오류
}
}
< LoginPro.jsp > ---로그인 처리
<!-- /* LoginPro.jsp */-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*" %>
<%
request.setCharacterEncoding("UTF-8");
%>
<%
try {
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver");
String DB_URL = "jdbc:mysql://localhost:3306/snackmall?characterEncoding=UTF-8&serverTimezone=UTC";
String userName="root";
String password="23er";
con = DriverManager.getConnection(DB_URL, userName, password);
// 로그인 화면에 입력된 아이디와 비밀번호를 가져온다
String id= request.getParameter("ID");
String pw = request.getParameter("PWD");
String admin = "Admin";
String iuser = "costomer";
//id에 해당하는 passwd 가져오기
String sql = "SELECT PWD, UserType FROM login_db WHERE ID=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
//실행 rs에 저장
rs = pstmt.executeQuery();
//rs에 데이터(행)가 있으면 아이디 있음
//패스워드비교 맞으면 로그인 인증(세션값 생성 "ID")
//패스워드비교 틀리면 "패스워드틀림" 로그인페이지로 이동
//rs에 데이터(행)가 없으면 "아이디없음" 로그인페이지로 이동
if (rs.next()) { // 아이디있음
if (pw.equals(rs.getString("PWD"))) {
session.setAttribute("ID", id);
if(admin.equals(rs.getString("UserType"))){ //관리자
response.sendRedirect("../../AdminMain.jsp");
} else if (iuser.equals(rs.getString("UserType"))) { //일반 고객
response.sendRedirect("../../UserMain.jsp");
}
} else {
%>
<script>
alert("비밀번호를 확인해주세요.");
history.back();
</script>
<%
}
} else {
// 아이디없음
%>
<script>
alert("아이디를 확인해주세요.");
//location.href = "loginForm.jsp"; // 서버가 요청을 받는다.
history.back(); // history.go(-1); // 서버에 요청없이 브라우저에서 자체적으로 처리
</script>
<%
}
pstmt.executeUpdate(); // sql문 실행
pstmt.close();
con.close();
}
catch(ClassNotFoundException e) {
out.println(e);
}
catch(SQLException e) {
out.println(e);
}
%>
4. 회원가입
< JoinForm.jsp > --- 회원가입 화면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>회원가입 페이지</title>
<style>
#wrap{
width:530px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
table{
border:3px solid red
}
td{
border:1px solid pink
}
#title{
background-color:pink
}
</style>
<script type="text/javascript">
// 필수 입력정보인 아이디, 비밀번호가 입력되었는지 확인하는 함수
function checkValue() {
if(!document.userInfo.ID.value){
alert("아이디를 입력하세요.");
return false;
}
if(!document.userInfo.PWD.value){
alert("비밀번호를 입력하세요.");
return false;
}
// 비밀번호와 비밀번호 확인에 입력된 값이 동일한지 확인
if(document.userInfo.PWD.value != document.userInfo.PWD_RE.value ){
alert("비밀번호를 동일하게 입력하세요.");
return false;
}
if(!document.userInfo.UserName.value){
alert("이름을 입력하세요.");
return false;
}
if(!document.userInfo.Email.value){
alert("이메일을 입력하세요.");
return false;
}
if(!document.userInfo.Contact.value){
alert("연락처를 입력하세요.");
return false;
}
if(!document.userInfo.Address.value){
alert("주소를 입력하세요.");
return false;
}
}
// 취소 버튼 클릭시 로그인 화면으로 이동
function goLoginForm() {
location.href="LoginForm.jsp";
}
</script>
</head>
<body>
<!-- div 왼쪽, 오른쪽 바깥여백을 auto로 주면 중앙정렬된다. -->
<div id="wrap">
<br><br>
<b><font size="6" color="gray">회원가입</font></b>
<br><br><br>
<!-- 입력한 값을 전송하기 위해 form 태그를 사용한다 -->
<!-- 값(파라미터) 전송은 POST 방식, 전송할 페이지는 JoinPro.jsp -->
<form method="post" action="../pro/JoinPro.jsp" name="userInfo"
onsubmit="return checkValue()">
<table>
<tr>
<td id="title">아이디</td>
<td>
<input type="text" name="ID" maxlength="20">
<input type="button" value=" 중복확인 ">
</td>
</tr>
<tr>
<td id="title">비밀번호</td>
<td>
<input type="password" name="PWD" maxlength="15">
</td>
</tr>
<tr>
<td id="title">비밀번호 확인</td>
<td>
<input type="password" name="PWD_RE" maxlength="15">
</td>
</tr>
<tr>
<td id="title">이름</td>
<td>
<input type="text" name="UserName" maxlength="40">
</td>
</tr>
<tr>
<td id="title">이메일</td>
<td>
<input type="text" name="Email" maxlength="80">
</td>
</tr>
<tr>
<td id="title">연락처</td>
<td>
<input type="text" name="Contact">
</td>
</tr>
<tr>
<td id="title">주소</td>
<td>
<input type="text" size="60" name="Address">
</td>
</tr>
</table>
<br>
<input type="submit" value=" 가 입 "> <input type="button" value=" 취 소 " onclick="goLoginForm()">
</form>
</div>
</body>
</html>
< JoinPro.jsp > ---회원가입 처리, mysql 연동
<!-- /* JoinPro.jsp */-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*" %>
<%
request.setCharacterEncoding("UTF-8");
%>
<%
String ID = request.getParameter("ID"); // JoinForm.jsp에서 입력받은 값들을 받아옵니다.
String PWD = request.getParameter("PWD");
String UserName = request.getParameter("UserName");
String Email = request.getParameter("Email");
String Contact = request.getParameter("Contact");
String Address = request.getParameter("Address");
try {
Class.forName("com.mysql.jdbc.Driver");
String DB_URL = "jdbc:mysql://localhost:3306/snackmall?characterEncoding=UTF-8&serverTimezone=UTC";
//기본: "jdbc:mysql://localhost:3306/web01"
//"jdbc:mysql://localhost:3306/web01?user=user&password=password&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC";
//?characterEncoding=UTF-8&serverTimezone=UTC
//?useUnicode=true&characterEncoding=utf8
String userName="root";
String password="23er";
Connection con = DriverManager.getConnection(DB_URL, userName, password);
String sql = "INSERT INTO login_db(ID, PWD, UserName, Email, Contact, Address) VALUES (?,?,?,?,?,?)"; // sql문 작성(입력받은 값들을 보내기 위한 작업)
PreparedStatement pstmt = con.prepareStatement(sql);
pstmt.setString(1, ID); // values에 들어갈 각각의 ID, PWD, UserName, Email, Contact, Address 설정
pstmt.setString(2, PWD);
pstmt.setString(3, UserName);
pstmt.setString(4, Email);
pstmt.setString(5, Contact);
pstmt.setString(6, Address);
pstmt.executeUpdate();
pstmt.close();
con.close();
}
catch(ClassNotFoundException e) {
out.println(e);
}
catch(SQLException e) {
out.println(e);
}
%>
<script>
alert("회원가입을 축하합니다!");
location.href='../../UserMain.jsp';
</script>DB url 작성 시 오류가 많이 나서, 인터넷에 검색해 본 뒤 가능한 모든 방법을 찾아내 적용해 보았다.
(구현 기능 시뮬레이션)
1. 비밀번호 오류시: 비밀번호를 다르게 입력하고 가입을 누르면 위와 같은 팝업창이 뜬다.
2. not null, 입력하지 않은 항목이 있으면 경고 문구창이 뜨며 회원가입이 진행되지 않는다.
3. 모든 항목을 입력하면 회원가입이 완료되며 팝업창이 뜬다.
4. mysql Workbench에 들어가 보면 마지막 항목에 입력한 내용이 추가된 것을 볼 수 있다. (UserType의 디폴트값은 costomer이다)
환영인사가 뜬 alert창의 확인을 누르면 바로 메인화면으로 이동하고 입력했던 결과를 넣어 로그인해 보면
5. 기존 상단바의 로그인이 로그아웃으로 변한 것을 볼 수 있다.
전체 소스 링크
https://github.com/Yoonyesol/Snack-Mall.git
GitHub - Yoonyesol/Snack-Mall
Contribute to Yoonyesol/Snack-Mall development by creating an account on GitHub.
github.com
반응형
'웹 프로그래밍 > 🥨스낵몰' 카테고리의 다른 글
| [자바/mysql/javascript] 웹쇼핑몰 만들기-2.구현2(장바구니, 로그아웃, 관리자 페이지) (0) | 2021.07.27 |
|---|---|
| [자바/mysql/javascript] 웹쇼핑몰 만들기-1.페이지 및 데이터 베이스 설계 (0) | 2021.07.26 |
