[정글 3일차] - 미니 프로젝트

1. 이미지 업로드

flask 이미지 업로드 gridfs를 이용해서 해보려고 했으나 쉽지 않았다.
기존 방식대로 이미지 url을 입력받아서 하는 걸로 했다!

원래대로라면 이미지 서버를 따로 두고 써야 하는 것 같다. 그런데 그게 잘 되지 않음..ㅜ

-> 네이버 지도 크롤링
iframe을 크롤링해줘야 했음!
이때 selenium을 사용했어야 해서 포기.

-> gridFS로 이미지 url을 서버에 올리기
쉽지 않았음 ㅜㅜ

https://taehyeki.tistory.com/159
https://grapestore.tistory.com/25
https://wiznxt.tistory.com/

from dis import code_info
from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient
from bs4 import BeautifulSoup
from bson.json_util import dumps
import requests
from werkzeug.utils import secure_filename
import os
from flask_pymongo import PyMongo
import gridfs

app = Flask(__name__)

client = MongoClient('mongodb://test:test@54.180.139.22', 27017)  # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbmuckji  # 'dbmuckji'라는 이름의 db를 만들거나 사용합니다.

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

@app.route('/api/addpage')
def addPage():
   return render_template('add.html')

@app.route('/api/addPhoto')
def addPhoto():
   return render_template('addPhoto.html')

@app.route('/api/add', methods=['POST'])
def addMenu():
    # 1. 클라이언트로부터 데이터를 받기
    food_receive = request.form['food_give']
    category_receive = request.form['category_give']
    shop_name_receive= request.form['shop_name_give']
    shop_address_receive= request.form['shop_address_give']
    
    # 3. dbmuckji DB로 보낼 데이터 정리
    food = {
            'food_name': food_receive, 
            'food_category': category_receive, 
            'shop_name': shop_name_receive,
            'shop_address': shop_address_receive,
            'shop_img': 0,
            'like':0,    # like를 0으로 세팅
            'hate':0,    # hate를 0으로 세팅
            'food_code':0, # food_code를 0으로 세팅
            'shop_url':0
            # 'shop_url':url_receive,
            }
    
    # 3. mongoDB에 데이터 넣기
    # insert_one()은 inserted_id 속성을 지닌 object 리턴
    x = db.shop.insert_one(food)
    
    # 4. food_code 업데이트
    # insert가 제대로 되었으면 실행
    if x:
        result = list(db.shop.find().sort('_id',-1).limit(1))
        code = result[0]['_id']
        food_code = dumps(code)[10:18] # String타입으로 형변환 및 timestamp 부분 자르기
        db.shop.update_one({'_id':code},{'$set':{'food_code':food_code}})
        return jsonify({'result': 'success'})
    else:
        return(jsonify({'result': 'insertfail'}))
  
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
     
@app.route('/fileUpload', methods = ['GET', 'POST'])
def fileUpload():
    f = request.files['file']
    f.save('./uploads/' + secure_filename(f.filename))
    files = os.listdir("./uploads")
    
    # client.app.config['MONGO_DBNAME']= 'dbmuckji'
    # client.app.config['MONGO_URI'] = ' mongodb://test:test@54.180.139.22/shop'
    # mongo = PyMongo(client.app)
    
    target = os.path.join(APP_ROOT, './uploads')  #folder path
    
    f = request.files['file']
    filename = secure_filename(f.filename)
    destination = "/".join([target, filename])
    f.save(destination)   
    
    fs = gridfs.GridFS(db)
    file_img_id = fs.put(f)
    # db.img.insert_one({'img2': file_img_id})
    
    # fs.put(f, filename = filename)
    # ## file find ##
    # data = client.grid_file.fs.files.find_one({'filename': filename})
    # print('data값', data)
    # ## file download ##
    # my_id = data['_id']
    # outputdata = fs.get(my_id).read()
    # output = open('./images/'+'back.jpeg', 'wb')
    # output.write(outputdata)
    return jsonify({'msg':'저장에 성공했습니다.'})
    
    # food = {
    #         'food_name': 0, 
    #         'food_category': '한식', 
    #         'shop_name': 0,
    #         'shop_address': 0,
    #         'shop_img': destination,
    #         'like':0,    # like를 0으로 세팅
    #         'hate':0,    # hate를 0으로 세팅
    #         'food_code':0, # food_code를 0으로 세팅
    #         'shop_url':0
    #         # 'shop_url':url_receive,
    #         }
    
    # db.shop.insert_one(food)   #insert into database mongo db

    # return render_template('add.html')
    
@app.route('/login')
def loginPage():
    return render_template('login.html')

# 회원가입 데이터 입력
@app.route('/insert')
def insertPage():
    return render_template('login.html')

@app.route('/insert', methods=['POST'])
def insertInfo():
     # 1. 클라이언트로부터 데이터를 받기
    username_receive = request.form['username_give']  # 클라이언트로부터 username을 받는 부분
    id_receive = request.form['id_give']  # 클라이언트로부터 id를 받는 부분
    password_receive = request.form['password_give']  # 클라이언트로부터 pw를 받는 부분

    userinfo = {
                'username' : username_receive,
                'id' : id_receive,
                'password' : password_receive
            }

    db.users.insert_one(userinfo)

    return jsonify({'result': 'success'})

# 로그인
@app.route('/login', methods=['POST'])
def login():
     # 1. 클라이언트로부터 데이터를 받기
    id_receive = request.form['id_give']  # 클라이언트로부터 id를 받는 부분
    password_receive = request.form['password_give']  # 클라이언트로부터 pw를 받는 부분

    find_target = db.users.find_one({'id':id_receive})

    # 로그인 할 아이디가 없을 경우
    if find_target is None :
        return jsonify({'result': 'not'})

    target_id = find_target['id']
    target_password = find_target['password']

    if(id_receive == target_id and password_receive == target_password):
        return jsonify({'result': 'success'})
    else :
        return jsonify({'result': 'fail'})

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

<!DOCTYPE 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">
    <title>오늘 뭐 먹지?</title>

    <!-- Bulma CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

    <!-- Optional JavaScript -->
    <!-- jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    
    <!-- css 파일 분리 -->
    <!-- <link rel="stylesheet" type="text/css" href = "../static/style.css"> -->
    <link rel="stylesheet" type="text/css" href = "{{url_for('static', filename='style.css')}}" rel="stylesheet">

    <!-- js -->
    <script src ="../static/addjavascript.js"></script>
    <!-- <script src ="{{url_for('static', filename='javascript.js')}}"></script> -->

    <!--img 참고-->
    <!-- <img src="{{ url_for('static', filename='rome.jpg') }}"/> -->
    
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">메뉴 추가하기</h1>
            <p class="lead">추가하고 싶은 메뉴와 식당을 입력해주세요!</p>
            <hr class="my-4">
            <div>
                <div>
                    <div class="form-group">
                        <label for="post-url">추가하고 싶은 메뉴를 입력하세요</label>
                        <input id="food_name" class="form-control" placeholder="메뉴를 입력하세요" required>
                    </div>
                    <div class="form-group">
                        <label for="post-url">메뉴의 카테고리를 선택하세요</label>
                        <div class="field is-grouped">
                            <p class="control">
                              <input type="checkbox" name="category" id="한식">
                              한식
                            </p>
                            <p class="control">
                              <input type="checkbox" name="category" id="중식">
                              중식
                            </p>
                            <p class="control">
                              <input type="checkbox" name="category" id="일식">
                              일식
                            </p>
                            <p class="control">
                                <input type="checkbox" name="category" id="양식">
                                양식
                              </p>
                            <p class="control">
                              <input type="checkbox" name="category" id="기타">
                              기타
                            </p>
                          </div>
                    </div>
                    <!-- <div class="form-group">
                        <label for="post-url">식당의 네이버 지도 url을 입력하세요</label>
                        <input id="shop_url" class="form-control" placeholder="네이버 지도 url을 입력하세요">
                    </div> -->
                    <div class="form-group">
                        <label for="post-url">식당을 추천해주세요</label>
                        <input id="shop_name" class="form-control" placeholder="식당을 입력하세요" required>
                    </div>
                    <div class="form-group">
                        <label for="post-url">식당 위치를 입력해주세요</label>
                        <input id="shop_address" class="form-control" placeholder="식당 위치를 입력하세요" required>
                    </div>
                    <button type="button" class="button" onclick="addMenu()">다음으로</button>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

<!DOCTYPE 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">
    <title>오늘 뭐 먹지?</title>

    <!-- Bulma CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

    <!-- Optional JavaScript -->
    <!-- jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    
    <!-- css 파일 분리 -->
    <!-- <link rel="stylesheet" type="text/css" href = "../static/style.css"> -->
    <link rel="stylesheet" type="text/css" href = "{{url_for('static', filename='style.css')}}" rel="stylesheet">

    <!-- js -->
    <script src ="../static/addjavascript.js"></script>
    <!-- <script src ="{{url_for('static', filename='javascript.js')}}"></script> -->

    <!--img 참고-->
    <!-- <img src="{{ url_for('static', filename='rome.jpg') }}"/> -->
    
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">메뉴 추가하기</h1>
            <p class="lead">추가하고 싶은 메뉴와 식당을 입력해주세요!</p>
            <hr class="my-4">
            <div>
                <div>
                    <div class="form-group">
                        <p>
                            <form action="/fileUpload" method="POST" enctype = "multipart/form-data">
                            <input type = "file" name = "file" id= "shop_img"/>  
                            <input type = "submit" value="이미지 저장"/>
                        </p>
                    </div>
                    
                    <button type="button" class="button" onclick="turnPage()">메뉴 추가하기</button>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

2. 선택자에 변수 넣기
   https://github.com/sooojungee/TIL/blob/master/jQuery/180627.%5BjQuery%5D%20%EC%84%A0%ED%83%9D%EC%9E%90%EC%97%90%20%EB%B3%80%EC%88%98%20%EB%84%A3%EA%B8%B0.md

3. jinja2 플라스크 강좌
   https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mksun8472&logNo=221552606651