사진과 글을 저장하는 페이지를 만들기.
전체적인 틀은 처음부터 직접 만들려고 했더니 모양이 이쁘지 않았다.
그래서 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
을 주었다.
파이참에서 "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')