[수업] 망고 플레이트 구현(로그인 유무에 따른 변화, 로그인, 카테고리 출력)

output/JSP

[수업] 망고 플레이트 구현(로그인 유무에 따른 변화, 로그인, 카테고리 출력)

hs_developer 2022. 7. 21. 18:12

망고 플레이트 구현

- 로그인 유무에 따른 헤더 변화

- 로그인

- 맛집 카테고리 출력

필요 데이터

food_location.sql

5.25MB

CREATE TABLE jspMember(
    id VARCHAR2(20) PRIMARY KEY,
    pwd VARCHAR2(10) NOT NULL,
    name VARCHAR2(34) NOT NULL
);

INSERT INTO jspMember VALUES('admin', '1234', '홍길동');
INSERT INTO jspMember VALUES('shim', '1234', '심청이');
INSERT INTO jspMember VALUES('park', '1234', '박문수');
commit;

로그인을 위한 회원 테이블 만들기

회원 데이터 삽입

vo

CategoryBean.java

package com.sist.vo;

public class CategoryBean {

	private int cno;
	private String title, subject, poster;
	
	public int getCno() {
		return cno;
	}
	public void setCno(int cno) {
		this.cno = cno;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getSubject() {
		return subject;
	}
	public void setSubject(String subject) {
		this.subject = subject;
	}
	public String getPoster() {
		return poster;
	}
	public void setPoster(String poster) {
		this.poster = poster;
	}
	
}

DAO

FoodDAO.java

package com.sist.dao;

import java.sql.*;
import java.util.*;
import com.sist.vo.*;
import com.sist.conn.*;

public class FoodDAO {

	private Connection conn;
	private PreparedStatement ps;
	private DBConnection dbconn= DBConnection.newInstance();
	
	
	public List<CategoryBean> categoryListData()
	{
		List<CategoryBean> list= new ArrayList<CategoryBean>();
		
		try
		{
			conn= dbconn.getConnection();
			
			String sql= "SELECT cno, title, poster "
						+ "FROM food_category ORDER BY cno ASC";
			ps= conn.prepareStatement(sql);
			ResultSet rs= ps.executeQuery();
			
			while(rs.next())
			{
				CategoryBean vo= new CategoryBean();
				
				vo.setCno(rs.getInt(1));
				vo.setTitle(rs.getString(2));
				vo.setPoster(rs.getString(3));
				
				list.add(vo);
			}
			rs.close();
		}
		catch(Exception ex)
		{
			ex.printStackTrace();
		}
		finally
		{
			dbconn.disConnection(ps);
		}
		return list;
	}
}

MemberDAO.java

package com.sist.dao;

import java.util.*;
import java.sql.*;
import com.sist.conn.DBConnection;

public class MemberDAO {

	private Connection conn;
	private PreparedStatement ps;
	private DBConnection dbconn= DBConnection.newInstance();
	
	public String isLogin(String id, String pwd)
	{
		// 결과 값 -> 경우 3개 (ID 없음, 비밀번호 틀림, 로그인 성공)
		String result= "";
		
		try
		{
			conn= dbconn.getConnection();
			
			// 1. ID가 있는지 체크
			String sql= "SELECT COUNT(*) FROM jspMember WHERE id = ?"; // id 개수가 몇 개냐
			
			ps= conn.prepareStatement(sql);
			ps.setString(1, id);
			
			ResultSet rs= ps.executeQuery();
			rs.next();
			
			int count= rs.getInt(1);
			rs.close();
			
			if(count == 0) // id가 없는 경우
			{
				result= "NOID";
			}
			else // id가 있는 경우
			{
				// pwd 찾는다
				sql= "SELECT pwd, name FROM jspMember WHERE id = ?";
				
				ps= conn.prepareStatement(sql);
				ps.setString(1, id);
				
				rs=ps.executeQuery();
				rs.next();
				
				String db_pwd= rs.getString(1);
				String name= rs.getString(2);
				rs.close();
				
				if(db_pwd.equals(pwd)) // 로그인 된 상태
				{
					result= name;
				}
				else // 비밀번호 틀린 상태
				{
					result= "NOPWD";
				}
			}
			
			
		}
		catch(Exception ex)
		{
			ex.printStackTrace();
		}
		finally
		{
			dbconn.disConnection(ps);
		}
		return result;
		
	}
}

Food

category.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import= "java.util.*, com.sist.dao.*, com.sist.vo.*"%>
<jsp:useBean id="dao" class="com.sist.dao.FoodDAO" />
<% 
	List<CategoryBean> list= dao.categoryListData();
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>믿고 보는 맛집 리스트</h3>
	<hr>
	<div class="row">
		<% 
			for(int i=0; i<12; i++)
			{
				CategoryBean vo= list.get(i);
			
		%>
			<div class="col-md-3"> <!-- 12개 출력 -> 3이면 한 줄에 4개씩 -->
			    <div class="thumbnail">
			      <a href="#">
			        <img src="<%=vo.getPoster() %>" alt="Lights" style="width:100%">
			        <div class="caption">
			          <p><%= vo.getTitle() %></p>
			        </div>
			      </a>
			    </div>
		  	</div>
		
		<% 
			}
		%>
	</div>
	
	<h3>지역별 맛집 리스트</h3>
	<hr>
	<div class="row">
		<% 
			for(int i=12; i<18; i++)
			{
				CategoryBean vo= list.get(i);
			
		%>
			<div class="col-md-4">
			    <div class="thumbnail">
			      <a href="#">
			        <img src="<%=vo.getPoster() %>" alt="Lights" style="width:100%">
			        <div class="caption">
			          <p><%= vo.getTitle() %></p>
			        </div>
			      </a>
			    </div>
		  	</div>
		
		<% 
			}
		%>
	</div>
	
	<h3>메뉴별 인기 맛집</h3>
	<hr>
	<div class="row">
		<% 
			for(int i=18; i<30; i++)
			{
				CategoryBean vo= list.get(i);
			
		%>
			<div class="col-md-3">
			    <div class="thumbnail">
			      <a href="#">
			        <img src="<%=vo.getPoster() %>" alt="Lights" style="width:100%">
			        <div class="caption">
			          <p><%= vo.getTitle() %></p>
			        </div>
			      </a>
			    </div>
		  	</div>
		
		<% 
			}
		%>
	</div>
</body>
</html>

food_detail.jsp (미구현)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
		<h1>맛집 상세 보기</h1>
	</center>
</body>
</html>

food_list.jsp (미구현)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
		<h1>맛집 카테고리별 목록</h1>
	</center>
</body>
</html>

main

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<% 
	String id= (String)session.getAttribute("id");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">JSP site</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="../main/main.jsp">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">회원<span class="caret"></span></a>
        <% /* 로그인이 될 때만 보여준다 */ 
        	if(id == null) {
        %> 
        <ul class="dropdown-menu">
          <li><a href="#">회원가입</a></li>
          <li><a href="#">아이디 찾기</a></li>
          <li><a href="#">비밀번호 찾기</a></li>
        </ul>
        <%
	       	}
	       	else
	       	{
        %>
        <ul class="dropdown-menu">
          <li><a href="#">회원 수정</a></li>
          <li><a href="#">회원 탈퇴</a></li>
        </ul>
        <% 
       		}
        %>
        
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">맛집<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">지역별 맛집</a></li>
          
          <% 
          	if(id != null){
          %>
          
          <li><a href="#">맛집 추천</a></li>
          <li><a href="#">맛집 예약</a></li>
          
          <% 
          	}
          %>
          
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">레시피<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">레시피 목록</a></li>
          <li><a href="#">쉐프</a></li>
          
          <% 
          	if(id != null) {
          %>
          <li><a href="#">레시피 만들기</a></li>
          <% 
          	}
          %>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">서울 여행<span class="caret"></span></a>
        <ul class="dropdown-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>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">커뮤니티 사이트<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">공지사항</a></li>
          <li><a href="#">묻고 답하기</a></li>
          
          <% 
          	if(id != null) {
          %>
          <li><a href="#">자유게시판</a></li>
          <% 
          	}
          %>
        </ul>
      </li>
      <% 
      	if(id != null){
      %>
      <li><a href="#">맛집 빠른 예약</a></li>
      <% 
      	}
      %>
      <li><a href="#">레시피 쇼핑몰</a></li>
      <% 
      	if(id!=null)
      	{
      		if(id.equals("admin"))
      		{
      %>
	      		<li><a href="#">예약 현황</a></li>
	      		<li><a href="#">구매 현황</a></li>
      <%
      		}
      		else
      		{
      %>
      		<li><a href="#">마이페이지</a></li>
      <% 
      		}
      	}
      %>
    </ul>
  </div>
</nav>

</body>
</html>

로그인 안 됐을 때

로그인 됐을 때

main.jsp

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

<% 
	String id= (String)session.getAttribute("id");

	String log_jsp= "";
	
	if(id==null)
	{
		log_jsp= "../member/login.jsp";
	}
	else
	{
		log_jsp="../member/logout.jsp";
	}
	
	String[] jsp_list= {
			
			"",
			"../food/category.jsp",
			"../food/food_list.jsp",
			"../food/food_detail.jsp"
	};
	
	// 사용자가 요청 -> 화면에 띄운다
	String mode= request.getParameter("mode");
	
	if(mode == null)
		mode= "1"; // 1 -> category jsp / 2 -> food_list.jsp / 3 -> food_detail.jsp
	int index= Integer.parseInt(mode);
	String jsp= jsp_list[index];
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">

.container{
	margin-top: 20px;
	width: 1200px;
}

</style>
</head>
<body>
	<jsp:include page="header.jsp"></jsp:include>

	<div class="container"> <!-- 출력하는 위치 잡기 -->
		<div class="col-sm-3">
			<jsp:include page="<%= log_jsp %>"></jsp:include>
		</div>
		<div class="col-sm-9">
			<jsp:include page="<%= jsp %>"></jsp:include>
		</div>
	</div>
	
	
</body>
</html>

member

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="row">
		<form method=post action="../member/login_ok.jsp">
		<table class="table">
			<tr>
				<th class="text-right" width="30%">ID</th>
				<td width=70%>
					<input type=text name=id size=15 class="input-sm" required>
				</td>
			</tr>
			<tr>
				<th class="text-right" width="30%">PW</th>
				<td width=70%>
					<input type=password name=pwd size=15 class="input-sm" required>
				</td>
			</tr>
			<tr>
				<td colspan="2" class="text-center">
					<button class="btn btn-sm btn-danger">로그인</button>
				</td>
			</tr>
		</table>
		</form>
	</div>
</body>
</html>

login_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="com.sist.dao.*"%>
<jsp:useBean id="dao" class="com.sist.dao.MemberDAO" />


<%
	// login.jsp -> id, pwd 받는다
	// 1. 사용자가 보낸 요청 데이터 받기
	// 2. 데이터베이스 연동 -> 요청 처리에 필요한 데이터 읽기
	String id= request.getParameter("id");	
	String pwd= request.getParameter("pwd");	
	String result= dao.isLogin(id, pwd);
	
	if(result.equals("NOID")) // ID가 없는 상태
	{
%>
		<script>
		alert("아이디가 존재하지 않습니다!")
		history.back();
		</script>
<%		
	}
	else if(result.equals("NOPWD")) // 비밀번호 틀린 상태
	{
%>
		<script>
		alert("비밀번호가 틀립니다!")
		history.back();
		</script>
<%		
	}
	else // 로그인 성공
	{
		session.setAttribute("id", id);
		session.setAttribute("name", result);
		
		// 로그인 후 main.jsp로 이동
		response.sendRedirect("../main/main.jsp");
		
	}
	
	
%>

logout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="row">
		<form method=post action="../member/logout_ok.jsp">
		<table class="table">
			<tr>
				<td width=70%>
					<%= session.getAttribute("name") %>
				</td>
			</tr>
			<tr>
				<td width=70%>
					메일: 2 &nbsp; 쪽지: 2
				</td>
			</tr>
			<tr>
				<td class="text-center">
					<button class="btn btn-sm btn-danger">로그아웃</button>
				</td>
			</tr>
		</table>
		</form>
	</div>
</body>
</html>

logout_ok.jsp

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

<%
	session.invalidate();

	// 다시 main으로 이동
	response.sendRedirect("../main/main.jsp");
%>

저작자표시

'output > JSP' 카테고리의 다른 글

[수업] JSTL 응용 (명소, 자연) (0)	2022.07.25
[수업] 망고플레이트(카테고리, 상세보기) 구현 (0)	2022.07.18
[수업] DB 데이터 웹에 출력하기 (0)	2022.07.17
웹 사이트 만들기 4강 프레임워크로 디자인 틀 잡기 (0)	2022.07.11
[FINAL]게시판 만들기 14강 게시판 메인 페이지 제작 (0)	2022.07.10

현재글[수업] 망고 플레이트 구현(로그인 유무에 따른 변화, 로그인, 카테고리 출력)

hs

[수업] 망고 플레이트 구현(로그인 유무에 따른 변화, 로그인, 카테고리 출력)

망고 플레이트 구현

- 로그인 유무에 따른 헤더 변화

- 로그인

- 맛집 카테고리 출력

vo

DAO

Food

main

member

'output > JSP' 카테고리의 다른 글

'output/JSP'의 다른글

티스토리툴바

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

[수업] 망고 플레이트 구현(로그인 유무에 따른 변화, 로그인, 카테고리 출력)

망고 플레이트 구현

- 로그인 유무에 따른 헤더 변화

- 로그인

- 맛집 카테고리 출력

vo

DAO

Food

main

member

'output > JSP' 카테고리의 다른 글

'output/JSP'의 다른글

관련글

티스토리툴바