blues_log
Published 2023. 5. 8. 17:19
[내일배움캠프] 사전캠프 팀과제 (최종 결과물 포함) 내일배움캠프/미니프로젝트

팀과제 소개

서비스명 : 나의 위시리스트

 

서비스 소개 : 나의 위시리스트를 카테고리별로 정리할 수 있는 서비스

팀 소개 및 역할 분담

팀명 : A2

팀 인원 : 주*준, 박*성, 서*민, 신*민, 심*철

 

역할 분담

글쓰기 : 신*민
읽기 : 박*성
더미데이터 : 심*철, 서*민
코드종합 및 배포 : 주*준

팀 과제에 대한 컨셉

자신의 위시리스트를 적고, 위시리스트를 적는 칸에 내용을 적은 뒤 클릭하면 위시리스트 내용이 밑에 영역에 기록됨

 

추후에 카테고리 별로 위시리스트를 작성할 수 있는 기능을 추가할 예정

 

 

와이어프레임

 

최종 완성 페이지

다음 사진은 최종 완성된 홈페이지이다.

완성된 홈페이지

 

여기서 위의 박스에 다음 사진과 같이 위시리스트를 등록하면 

정보등록

다음 사진과 같이 목록에 자신의 위시리스트가 추가되는 것을 볼 수 있다.

위시리스트가 추가되었다.

주요 기능 및 파일 링크

새로고침 기능

주요 기능으로는 등록 후에 홈페이지를 자동적으로 새로고침하게 해주는 기능이다.

새로고침 기능으로 더욱 편리하게 홈페이지에 자신의 위시리스트를 작성할 수 있다.

js를 입력하는 코드 마지막 부분에 다음 코드를 입력하면 된다.

window.location.reload(); //자동으로 페이지 새로고침해주는 기능

 

가격을 1000원 단위로 자동적으로 끊어주는 기능 (js)

가격에 숫자만 입력하면 10000원 단위로 가격을 끊어주는 기능을 추가하였다.

코드는 다음과 같다. forEach문 안에 사용하며 temp_html에 변수를 삽입하면 된다.

let price = a['price']
let won_price = price.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");   //자동으로 가격을 1000원 단위로 끊어주는 기능

 

코드 및 파일 링크

파일 링크는 여기를 클릭 !

 

html과 py 코드는 다음과 같다.

 

1. html 코드

더보기 
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />
    <title>위시리스트</title>
    <style>
        * {
            font-family: "Gowun Dodum", sans-serif;
        }

        .mypic {
            width: 100%;
            height: 200px;
            background-image: linear-gradient(0deg,
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
            background-position: center;
            background-size: cover;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypic>h1 {
            font-size: 30px;

        }

        .mybox {   
            width: 95%;
            max-width: 700px;
            padding: 20px;
            box-shadow: 0px 0px 10px 0px lightblue;
            margin: 20px auto;
        }

        .mybucket {     
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin: 10px auto 0px auto;
        }


        .mybucket>input {  
            width: 65%;
        }

        .mybucket>select {     
            width: 65%;
        }

        .mybox>li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            min-height: 48px;
        }

        #grid {
            width: 100%; 
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
        }

        #register_btn{
            margin-top : 10px;
            text-align: center;
        }

        #div2 {
            font-size: 20px;
            text-align: center;
        }

        #div3 {
            text-align: right;
        }
        .input-group-text {
            width: 15%;
        }

    </style>
    <script>
        $(document).ready(function () {
            show_wish();
        });
        function show_wish() {
            fetch('/wish').then(res => res.json()).then(data => {
                let rows = data['result']
                $('#wish-list').empty() //더미데이터 제거 기능
                rows.forEach((a)=>{
                    let category = a['category']
                    let name = a['name']
                    let price = a['price']
                    let won_price = price.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");   //자동으로 가격을 1000원 단위로 끊어주는 기능

                    let temp_html = `<li>
                                        <div id="grid">
                                            <div id="div1">${category}</div>
                                            <div id="div2"><strong>${name}</strong></div>
                                            <div id="div3"><strong class="price-value">${won_price} 원</strong></div>
                                        </div>    
                                    </li>`
                    $('#wish-list').append(temp_html)
                })
            })
        }
        function save_wish() {
            let category = $('#category').val()
            let name = $('#name').val()
            let price = $('#price').val()

            let formData = new FormData();
            formData.append("category_give", category);
            formData.append("name_give", name);
            formData.append("price_give", price);

            fetch('/wish', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload(); //자동으로 페이지 새로고침해주는 기능
            });
        }
    </script>
</head>

<body>
    <div class="mypic">
        <h1>위시리스트</h1>
    </div>
    <div class="mybox">
        <div class="mybucket">
            <label class="input-group-text" for="category">카테고리</label>
            <select class="form-select" id="category">
                <option selected>-- 선택하기 --</option>
                <option value="패션/의류">패션/의류</option>
                <option value="식품">식품</option>
                <option value="인테리어">인테리어</option>
                <option value="스포츠/레저">스포츠/레저</option>
                <option value="도서/음반/DVD">도서/음반/DVD</option>
                <option value="가전디지털">가전디지털</option>
                <option value="완구/취미">완구/취미</option>
                <option value="헬스/건강">헬스/건강</option>
            </select>
        </div>
        <div class="mybucket">
            <label class="input-group-text" for="category">상품명</label>
            <input id="name" class="form-control" type="text" placeholder="상품명을 입력하세요." />
        </div>
        <div class="mybucket">
            <label class="input-group-text" for="category">가격</label>
            <input id="price" class="form-control" type="text" placeholder="가격을 입력하세요.(숫자만 입력하세요.)" />
        </div>
        <div id="register_btn">
            <button onclick="save_wish()" type="button" class="btn btn-outline-primary">등록 하기</button>
        </div>
        
    </div>
    <div class="mybox" id="wish-list">
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>곰곰 GAP 당도선별 제주 카라향, 2kg, 1박스</strong></div>
                <div id="div3"><strong class="price-value">22,100원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>모산김치 갓담근 아삭 오이소박이, 1.5kg, 1개</strong></div>
                <div id="div3"><strong class="price-value">15,750원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>양반 현미밥, 130g, 24개</strong></div>
                <div id="div3"><strong class="price-value">19,840원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>담터 호두 아몬드 율무차 스틱형, 2700g, 1개</strong></div>
                <div id="div3"><strong class="price-value">27,990원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>앱솔루트 명작 2FL 분유 2단계, 800g, 3개</strong></div>
                <div id="div3"><strong class="price-value">48,300원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>자가비 짭짤한 맛, 50g, 12개</strong></div>
                <div id="div3"><strong class="price-value">17,280원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>종가 맛김치, 1.7kg, 1봉</strong></div>
                <div id="div3"><strong class="price-value">20,180원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>루솔이 만든 진한 배도라지즙 선물세트, 100ml, 20개</strong></div>
                <div id="div3"><strong class="price-value">24,610원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">헬스/건강</div>
                <div id="div2"><strong>종근당건강 락토핏 골드, 160g, 1개</strong></div>
                <div id="div3"><strong class="price-value">17,880원</strong></div>
            </div>
        </li>
        <li>
            <div id="grid">
                <div id="div1">식품</div>
                <div id="div2"><strong>한양식품 꽃보다오징어 오리지날, 260g, 2개</strong></div>
                <div id="div3"><strong class="price-value">34,690원</strong></div>
            </div>
        </li>
    </div>
</body>

</html>

 

2. python 코드

더보기 
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ue8jxhg.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

import requests
from bs4 import BeautifulSoup

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/wish", methods=["POST"])
def wish_post():
    category_receive = request.form['category_give']
    name_receive = request.form['name_give']
    price_receive = request.form['price_give']
    
    doc = {
        'category':category_receive,
        'name': name_receive,
        'price': price_receive
    }
    db.wishlists.insert_one(doc)

    return jsonify({'msg':'저장완료!'})

@app.route("/wish", methods=["GET"])
def wish_get():
    all_wish = list(db.wishlists.find({},{'_id':False}))
    return jsonify({'result': all_wish})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

 

저작자표시 (새창열림)

'내일배움캠프 > 미니프로젝트' 카테고리의 다른 글

[내일배움캠프] 미니프로젝트(230515 - 230519)  (0) 2023.05.19

티스토리툴바