INTP의 멋대로 개발 세상

[📚상품 구매 사이트 3단계] 구매자 서버 만들기 - 1. 테이블, 더미데이터, view 생성&연결 본문

KDT 풀스택 국비 과정/파이널 프로젝트(미니)

[📚상품 구매 사이트 3단계] 구매자 서버 만들기 - 1. 테이블, 더미데이터, view 생성&연결

인팁구름 2023. 4. 12. 21:13

 

쇼핑몰 구매자 서버

 

🏆 목표 🏆

구매자 입장에서 회원가입, 로그인, 상품구매, 구매취소 기능을 구현

 

 

데이터는 MySQL에 연동되어 있기 때문에 테이블이나 더미데이터는 MySQL에 작성함

 

[연습📚상품 구매 사이트] 스프링부트 ↔ MyBatis ↔ MySQL 연동하기

오늘 오전 내내 한참 헤메었던 DB 연결하는 방법을 공유합니다!!!! 어렵지 않아요😊😉 상품 구매 사이트 만들기 3단계에서는 2개의 서버가 하나의 DB를 공유하도록 만드는 것이 핵심(?) 목표입니

whiteclouds-dev.tistory.com

 

 

 

📃 시나리오 📃

 

✅  localhost 주소 입력하면 바로 로그인 페이지로 가기
  🔹  로그인 창 밑에 회원가입 문구(a 태그) 만들기

✅ 로그인 하면 상품리스트 목록 페이지로 이동

✅ 상품 리스트에 있는 상품 이름 클릭하면 상세 페이지로 이동하기
  🔹  상세 페이지 구매하기 버튼 만들기
  🔹 구매하면 재고 수량이 차감되는 기능

✅ 구매 목록 페이지
  🔹  주문 취소 버튼 만들기

 

 

 

📺 화면 설계📺

(기능 구현 먼저 하기 위해 화면은 쓰던 거 가져오고 나중에 다시 꾸미기로)

(데이터 바인딩 되지 않은 "화면"만 있음!)

 

 

메인페이지 (로그인 페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%@ include file="../layout/header.jsp"%>

<div class="container">
    <form method="post" name="form">
        <div class="mb-3 mt-3">
            <input
                type="text"
                class="form-control"
                placeholder="아이디"
                name="username"
            />
        </div>
        <div class="mb-3">
            <input
                type="password"
                class="form-control"
                placeholder="비밀번호"
                name="password"
            />
        </div>
        <button
            type="submit"
            class="btn btn-warning"
            onclick="javascript: form.action='/admin/login';"
        >
            관리자 로그인
        </button>
        <button
            type="submit"
            class="btn btn-primary"
            onclick="javascript: form.action='/member/login';"
        >
            구매자 로그인
        </button>
    </form>
</div>

<%@ include file="../layout/footer.jsp"%>

 

 

회원가입 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%@ include file="../layout/header.jsp"%>

<div class="container">
    <form method="post" name="form" contenttyp>
        <div class="mb-3 mt-3">
            <input
                type="text"
                class="form-control"
                placeholder="아이디"
                name="username"
            />
        </div>
        <div class="mb-3">
            <input
                type="password"
                class="form-control"
                placeholder="비밀번호"
                name="password"
            />
        </div>

        <button
            type="submit"
            class="btn btn-warning"
            onclick="javascript: form.action='/admin/join';"
        >
            관리자 회원가입
        </button>
        <button
            type="submit"
            class="btn btn-primary"
            onclick="javascript: form.action='/member/join';"
        >
            구매자 회원가입
        </button>
    </form>
</div>

<%@ include file="../layout/footer.jsp"%>

 

 

 

상품목록 페이지 (로그인 하면 나옴)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ include file="../layout/header.jsp" %>

        <div class="container">
            <table class="table table-striped mt-4">
                <thead>
                    <tr>
                        <th>상품 번호</th>
                        <th>상품 이름</th>
                        <th>상품 가격</th>
                        <th>상품 재고</th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td>1</td>
                            <td><a href="#">바나나</a></td>
                            <td>1000원</td>
                            <td>50개</td>
                        </tr>
                </tbody>
            </table>
        </div>

    <%@ include file="../layout/footer.jsp" %>

 

 

상품 상세 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ include file="../layout/header.jsp" %>

        <div class="center">
            <div style="margin: 20px;">
                <table border="1" style="width: 500px; height: 200px; text-align: center;">
                    <tr style="border: 1px solid">
                        <th style="background-color: rgb(185, 185, 185)">상품명</th>
                        <th>바나나</th>
                    </tr>
                    <tr style="border: 1px solid">
                        <th style="background-color: rgb(185, 185, 185)">상품명</th>
                        <td>1000원</td>
                    </tr>
                    <tr style="border: 1px solid">
                        <th style="background-color: rgb(185, 185, 185)">상품명</th>
                        <td>50개</td>
                    </tr>
                </table>
                <div class="center" style="margin-top: 20px; text-align: center;">
                    <form type="submit" action="/order" method="get">
                        <button
                            style="width: 240px; height: 50px; margin-right: 20px; background-color: rgb(255, 210, 199);">구매하기</button>
                    </form>
                </div>
            </div>
        </div>

        <%@ include file="../layout/footer.jsp" %>

 

 

 

구매목록 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%@ include file="../layout/header.jsp"%>
<h1>구매목록 페이지</h1>
<div class="container">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>상품번호</th>
                <th>상품명</th>
                <th>상품가격</th>
                <th>구매수량</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>1</td>
                    <td>바나나</td>
                    <td>1000원</td>
                    <td>1개</td>
                </tr>
        </tbody>
    </table>
</div>

<%@ include file="../layout/footer.jsp"%>

 

 

헤더

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <title>Product</title>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
            <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet" />
            <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
        </head>
        <style>
            .gitlink {
                text-decoration-line: none;
                color: rgb(255, 105, 138);
                font-weight: bolder;
                background-color: rgb(255, 228, 154);
            }

            .center {
                display: flex;
                justify-content: center;
            }
        </style>

        <body>
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <div class="container-fluid">
                    <h3 style="color: white;">🤍쇼핑몰🛒</h3>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="/product">상품목록</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/order">주문확인</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">로그아웃</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </body>

        </html>

 

 

푸터

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <br />
    <hr />
    <div class="jumbotron text-center" style="margin-bottom: 0">
        <p>👾 Created by <a class="gitlink"
                href="https://github.com/JungminK1m/Springboot-Product-Study-Buyer">JungminK1m</a></p>
        <p>📞 010-1234-5678</p>
        <p>🏴 부산 부산진구 XX동</p>
    </div>
    </body>

    </html>

 

 

 

🧱 테이블 설계 🧱

 

user

CREATE TABLE user(
	user_id INT PRIMARY KEY auto_increment,
	user_name VARCHAR(20) NOT null,
	user_password VARCHAR(20) NOT null,
	user_email VARCHAR(20) NOT null,
	created_at TIMESTAMP NOT null
);

product

CREATE TABLE product(
	product_id INT PRIMARY KEY auto_increment,
	product_name VARCHAR(20) NOT null,
	product_price INT NOT null,
	product_qty INT NOT null,
	created_at TIMESTAMP NOT null
);

order

create table orders(
    orders_id int primary KEY auto_increment,
    orders_name varchar(20) NOT null,
    orders_price int NOT null,
    orders_qty int NOT null,
    product_id int NOT null,
    user_id int NOT null,
    created_at TIMESTAMP
);

 

 

 

🧺 더미 데이터 🧺

 

user

INSERT INTO user(user_name, user_password, user_email, created_at) VALUES ('ssar', '1234', 'ssar@nate.com', NOW());
INSERT INTO user(user_name, user_password, user_email, created_at) VALUES ('kaka', '2345', 'kaka@nate.com', NOW());

product

INSERT INTO product(product_name, product_price, product_qty, created_at) VALUES('바나나', 3000, 98, NOW());
INSERT INTO product(product_name, product_price, product_qty, created_at) VALUES('딸기', 2000, 100, NOW());

order

INSERT INTO orders(orders_name, orders_price, orders_qty, product_id, user_id, created_at) VALUES ('바나나', 3000, 2, 1, 1, NOW());
INSERT INTO orders(orders_name, orders_price, orders_qty, product_id, user_id, created_at)  VALUES ('딸기', 2000, 5, 2, 2, NOW());

 

 

 

🔧 View - Controller 연결 🔧

 

UserController

package shop.mtcoding.productapp_buyer.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    // 메인페이지가 로그인 페이지
    @GetMapping("/")
    public String loginForm() {
        return "user/loginForm";
    }

    @GetMapping("/joinForm")
    public String joinForm() {
        return "user/joinForm";
    }
}

ProductController

package shop.mtcoding.productapp_buyer.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ProductController {

    @GetMapping("/product")
    public String productList() {
        return "product/productList";
    }

    @GetMapping("/product/1")
    public String productDetail() {
        return "product/productDetail";
    }

}

OrderController

package shop.mtcoding.productapp_buyer.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class OrderController {

    @GetMapping("/order")
    public String orderListForm() {
        return "order/orderListForm";
    }

}

 

저작자표시

'KDT 풀스택 국비 과정 > 파이널 프로젝트(미니)' 카테고리의 다른 글

[📚상품 구매 사이트 3단계] 구매자 서버 만들기 - 3. header, footer, 로그인/로그아웃 구현  (0) 2023.04.17
[📚상품 구매 사이트 3단계] 구매자 서버 만들기 - 2. 모델링 (model, Repository, xml 생성)  (0) 2023.04.17
[📚상품 구매 사이트 3단계] 스프링부트 ↔ MyBatis ↔ MySQL 연동하기  (1) 2023.04.12
[📚상품 구매 사이트 2단계] 상품명 중복체크, 이벤트 처리 Ajax 수정  (0) 2023.04.11
[📚상품 구매 사이트] 웹 연습을 위한 상품 구매 홈페이지 만들기  (0) 2023.04.10
'KDT 풀스택 국비 과정/파이널 프로젝트(미니)' Related Articles more
Comments