👶 내일배움단/웹개발 종합 개발일지

[스파르타코딩클럽] 웹개발 종합반 - 4주차 개발일지 / 숙제

드디어 1주차 공들인 숙제를 완성할 때가 왔다.

1주차에 완성한 쇼핑몰을 완성해주세요!

쇼핑몰은 두 가지 기능을 수행해야 합니다.

1) 주문하기(POST): 정보 입력 후 '주문하기' 버튼클릭 시 주문목록에 추가

2) 주문내역보기(GET): 페이지 로딩 후 하단 주문 목록이 자동으로 보이기

사실 1주차 글을 보면 알 수 있지만

멘탈 터진 글 내용과 뭘 만들었는지 모를 공백이 가득하다.

이유는 알다시피 1주에 뭘 담을 수 있었을까..

갈 곳을 잃은 마우스와 세상 느린 거북이 타자로 겨우 따라간게 전부였다.

하지만 많은 시도와 실시간 복습을 통해 어느정도 따라왔음을 스스로 느끼게 되었다.

전보다 성장한 자신을 보며 계속 나아가자.

app

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbhomework


## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')


# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    add_receive = request.form['add_give']
    number_receive = request.form['number_give']

    doc = {
        'name': name_receive,
        'count': count_receive,
        'add': add_receive,
        'number': number_receive
    }

    db.myshop.insert_one(doc)

    return jsonify({'msg': '주문이 완료되었습니다!'})


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    customers = list(db.myshop.find({}, {'_id': False}))
    return jsonify({'all_customers':customers})


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

html

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>양초캔들 | 구매 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Pen+Script&display=swap"
          rel="stylesheet">
    <style>
        * {
            font-family: 'Nanum Pen Script', cursive;
        }
        .tablestyle {
            width: 480px;
            margin: 20px auto 30px auto;
        }
        .img_box {
            width: 480px;
            margin: 20px auto 30px auto;
        }
        .mybtn {
            width: 100px;
            margin: auto;
            display: block;
        }
        .dollar {
            color: blue;
        }
    </style>
    <script>
        $(document).ready(function () {
            q1(),
            list()
        });

        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let doller = response[`rate`]

                    let temp_html = `<h3 class="dollar">달러 : 원 / 환율 : ${doller}</h3>`
                    $('#now_doller').append(temp_html)
                }
            })
        }

        function order() {
            let name = $('#post-name').val()
            let count = $('#inputGroupSelect01').val()
            let add = $('#post-add').val()
            let number = $('#post-number').val()

            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give:name, count_give:count, add_give:add, number_give:number},
                success: function (response) { // 성공하면
                    alert(response["msg"]);
                    window.location.reload()
                }
            })
        }

        function list() {
                $.ajax({
                    type: "GET",
                    url: "/order",
                    data: {},
                    success: function (response) {
                        let customers = response['all_customers']
                        for (let i = 0; i < customers.length; i++) {
                            let name = customers[i]['name']
                            let count = customers[i]['count']
                            let add = customers[i]['add']
                            let number = customers[i]['number']

                            let temp_html = `<tr>
                                                <th scope="row">${name}</th>
                                                <td>${count}</td>
                                                <td>${add}</td>
                                                <td>${number}</td>
                                            </tr>`
                            $('#inputGroupSelect-list').append(temp_html)
                        }
                    }
                })
            }
    </script>
</head>

<body>
    <div class="img_box">
        <p>
            <img src="https://t1.daumcdn.net/cfile/tistory/2564EF4E55D681B320"/>
        </p>
        <h1 style="font-size:50px">양초 캔들 판매!! <span style="font-size: 30px">가격:3,000원/개</span></h1>
        <h2 style="font-size: 22px"> 이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자란 뭐든지 이뤄지게 된답니다. 하나 사가세요! 대나무 향이 아주
            좋아요!!
        </h2>

        <h3 id="now_doller"></h3>

        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">주문자 이름</span>
            </div>
            <input id="post-name" type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">주소</span>
            </div>
            <input id="post-add" type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">전화번호</span>
            </div>
            <input id="post-number" type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="mybtn">
            <button onclick="order()" type="button" class="btn btn-primary">주문하기</button>
        </div>
    </div>
    <table class="table tablestyle" id="inputGroupSelect-list">
        <thead>
        <tr>
            <th scope="col">주문자명</th>
            <th scope="col">수량</th>
            <th scope="col">주소</th>
            <th scope="col">전화번호</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

</html>

완성!!

숙제를 하면서 느낀점들

1) 이름을 잘 지어주자.

생각보다 이름이 들어가는 자리가 많다. 근데 이름 하나 제대로 잘 안지어주게 된다면, 내가 헷갈리기 시작한다. 코딩을 하면서 네이밍 센스가 필수사항이라는 것을 알 수 있었다.

2) 겉핥기 식이어도 괜찮아, 일단 따라해봐.

퀴즈나 숙제를 하면서 느낀거지만, 나는 계속 빈 공백에서 시작해야 배웠던걸 잘 써먹을 수 있지 않을까 생각했다. 큰 오산이고 자만이였다. 비전공자 왕초보에겐 그런 기적같은 일은 일어나지 않았고, 이기적인 욕심이였다. 그런 생각을 접고 일단 배웠던거 위주로 수업으로 같이 코딩 했던 것을 보고 따라 쓰고를 반복했다. 당연히 뭘 넣어야하고 들어가야하고 지우고 바꿔야하는지 모르는게 태반이지만, 4주차를 마무리하고 있던 나는 생각보다 그 과정들을 잘 소화하고 있었다. 완벽은 아니지만 옆의 동행자와 발걸음을 맞추며 걸어갈 수 있을 정도였다.

3) 성취감 찾기.

사람에겐 원동력이 필요하돗이 공부하는 사람에겐 보여지는 성취감이 필요하다. 내가 잘 배우고 있는게 맞나, 내가 배운게 잘 써먹어 지는건가, 내가 배우고 잘 사용할 수 있을까 등등. 그런 것들이 정말 직관적으로 보이고 느낄 수 있는게 코딩인 것 같다. 단순한 나에게는 이런 과정은 계속 집요하게 매달리게 만들었고, 결국 짧은 기간동안 4주차까지 달려올 수 있었다.

사회복지를 전공하고 사람을 달래던 사람이 이번엔 컴퓨터를 달래고 있다.

나와 같은 사람은 많을 것이고 아마 잦은 고비를 마주할 것이다.

이것이 내가 좋아하는 일이 되었으면 좋겠고, 지금 하는 일이 무의미하지 않았으면 한다.

잘 따라왔고, 더 붙쫒고 가고 싶다.

다음 번에는 함께 걸어갈 수 있는 사람이 되고 싶다.

'👶 내일배움단 > 웹개발 종합 개발일지' 카테고리의 다른 글

[스파르타코딩클럽] 웹개발 종합반 - 5주차 개발일지 / 숙제 (0)	2022.12.31
[스파르타코딩클럽] 웹개발 종합반 - 3주차 개발일지 / 숙제(실습/풀이) (1)	2022.12.31
3주차_Quiz_웹스크래핑 결과 이용하기 풀이 되새김 (0)	2022.12.31
3주차_Quiz_웹스크래핑(크롤링) 풀이 되새김 (0)	2022.12.31
[스파르타코딩클럽] 웹개발 종합반 - 2주차 개발일지 / 숙제(실습/풀이) (0)	2022.12.31

Contents

새소식

인기 검색어

[스파르타코딩클럽] 웹개발 종합반 - 4주차 개발일지 / 숙제

'👶 내일배움단 > 웹개발 종합 개발일지' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바