[S GALLERY] 데이03

사진과 글을 저장하는 페이지를 만들기.

전체적인 틀은 처음부터 직접 만들려고 했더니 모양이 이쁘지 않았다.
그래서 Boot strap을 이용했다.

<form>
            <div class="container">
                <div class="row">
                    <div class="col-25">
                        <label for="title">제목</label>
                    </div>
                    <div class="col-75">
                        <input type="text" id="title" name="title" placeholder="20자 이내">
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="ncity">나라/도시</label>
                    </div>
                    <div class="col-75">
                        <select id="ncity" name="ncity">
                            <option value="Newyork">Newyork</option>
                            <option value="LosAngeles">Los Angeles</option>
                            <option value="Seattle">Seattle</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="story">스토리</label>
                    </div>
                    <div class="col-75">
                        <textarea id="story" name="story" placeholder="100자 이내" style="height:200px"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="addrs">주소</label>
                    </div>
                    <div class="col-75">
                        <input type="text" id="address" name="address">
                    </div>
                </div>

                <form method="POST">
                    <div class="filebox">
                        <div class="input-group mb-3">
                            <input type="file" class="form-control" value="Choose file" accept=".gif, .jpg, .png, .jpeg"
                                id="img">
                            <label class="input-group-text" for="img">Upload</label>
                        </div>
                    </div>

                </form>

                <div class="row text-center" style="width: 100%">
                    <div style="width: 30%; float:none; margin:0 auto">
                        <button onclick="savepic()" type="button" class="btn btn-outline-secondary">Save</button>
                    </div>

                </div>
            </div>

        </form>



    </div>

여기서 각 종 버튼과 input 박스들의 크기와 위치를 조정하기 위해
CSS 부분을 조정했다.
포스트 페이지는 하나이므로 각 나라/도시를 선택할 수 있게끔 코드를 넣었다.

<div class="col-75">
    <select id="ncity" name="ncity">
         <option value="Newyork">Newyork</option>
         <option value="LosAngeles">Los Angeles</option>
         <option value="Seattle">Seattle</option>
     </select>
 </div>

이렇게 표시가 된다.

사진과 글을 저장하고 올라가게 하는 것이 이 프로젝트의 최종 목표이기 때문에
이 부분은 java script, ajax를 통해 input 박스에 입력하는 내용들을 DB에 저장하는 부분까지 추가해야한다.

마지막에 보면 save 버튼에 누르면 DB에 저장되게끔
button onclick="savepic()"
을 주었다.

파이참에서 "savepic" 코드를 줄 예정이다.

각 나라/도시 별 사진을 카드 템플릿에 담기.

앞서 포스트 페이지를 완성했으니 이번엔 포스트하면 그 내용들이 사진과 제목이 카드 형식으로 보여지는 페이지를 만들어보려 한다.
일단 나는 Newyork, Los Angeles, Seattle 이렇게 세 곳으로 만들려고 한다.
이 또한 좀 더 이쁜 모양을 위해 Boot strap 을 이용했다.

<div class="card">
   <a target="_blank" href="" class="card-title">
     <img class="card-img-top"src=""alt="Card image cap">
     <div class="card-body">
        <p>title</p>                                        
        </div>
   </a>
</div>`

카드 타이틀에 a 태그를 썼는데 </a태그> 를 사진이 나오는 부분 뒤로 쓰면
사진을 선택해도, 제목을 선택해도 링크 이동이 가능하게 된다.
p 태그에는 타이틀이라고 일단 적어놓았는데 포스트 페이지에서 입력되는 거에 따라 달라지기 때문에 추후에 변수를 줄 예정이다.

하나의 모양은 이렇게 만들었으니 ajax에서 for 문으로 계속 여러개 생성이 되게끔 설정해주면 된다.

DB를 저장하기-준비.

html 페이지를 작성하고 css부분까지 조정을 해보았다.
전체적인 틀은 잡아놓았다. 이제는 제일 중요한 DB 저장 후 출력이다.
나는 mongoDB 를 통해 저장이 잘 되는지를 확인해 볼 예정이다.

새로운 파일을 만든 후 그 밑으로 아직 만들어놓지 않은 폴더들을 만들어

이렇게 구성을 해 놓는다.
static 안에는 추후에 내가 올리는 사진들이 저장이 되어질 것이고, templates 안에는 나의 html 들이 들어가있다.

그 밖으로 나는 view.py 라는 파이썬 파일을 하나 만들었다.
바로 이 곳에서 나의 html 페이지들이 포스팅 역할을 온전히 다 해서 나의 갤러리가 되어지게 만들어 주는 공간이다.

from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient

app = Flask(__name__)

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

기본 적인 틀을 먼저 작성해준다.
mongoDB에는 "sgalls"라는 곳을 만들어 저장하기로 했다.

그리고 이 파일을 실행했을 때 서버주소로 들어갔을때 먼저 뜨는 페이지를 입력한다.
추후에 수정할 예정이므로 보다 빠른 post 페이지 db 작업을 위해 'SGpost.html'이 제일 먼저 나오게끔 작성해본다.
return render_template 에 나왔으면 하는 페이지를 입력하면 된다.

@app.route('/')
def main():
    return render_template('SGpost.html')