나의 개발일지 TIL(Today I learned) - 미니프로젝트 (4일)

Today I learned

• 페이지네이션
• 이미지업로드

 

페이지네이션

페이지네이션이란 Paginatio = page + navigation으로 페이징하는 것을 말한다

페이지네이션을 하려면 필요한 것들이 있다 총 데이터의 개수, 한 페이지에 뽑아줄 데이터의 개수, 마지막 페이지

페이지 버튼 블럭의 사이즈, 총 블럭의 개수 조금 복잡하다

# 페이지 값 (디폴트값 = 1)
page = request.args.get("page", 1, type=int)

# 한 페이지 당 몇 개의 게시물을 출력할 것인가
limit = 8

db = pymysql.connect(host='localhost', user='root', db='yogurt', password='0000', charset='utf8')
curs = db.cursor()

# 데이터 총 개수 세기
curs.execute("SELECT COUNT(*) FROM board;")
all_count = curs.fetchall()[0][0]

if all_count == 0:
    response = {'boards': {}, 'page': page, 'total_page': all_count}
    return jsonify({'response': response})

curs.execute("SELECT * FROM board ORDER BY `date` DESC LIMIT %s OFFSET %s;", (limit, (page - 1) * limit))
data_list = curs.fetchall()

# 마지막 페이지의 수 구하기
last_page_num = math.ceil(all_count / limit)  # 반드시 올림을 해줘야함

# 페이지 블럭을 5개씩 표기
block_size = 5
# 현재 블럭의 위치 (첫 번째 블럭이라면, block_num = 0)
block_num = int((page - 1) / block_size)
# 현재 블럭의 맨 처음 페이지 넘버 (첫 번째 블럭이라면, block_start = 1, 두 번째 블럭이라면, block_start = 6)
block_start = (block_size * block_num) + 1
# 현재 블럭의 맨 끝 페이지 넘버 (첫 번째 블럭이라면, block_end = 5)
block_end = block_start + (block_size - 1)

우리는 flask에서 제공하는 패키지를 이용해서 조금 더 쉽게 만들어 봤다

per_page = 8
page, _, offset = get_page_args(per_page=per_page)

db = pymysql.connect(host='localhost', user='root', db='yogurt', password='0000', charset='utf8')
curs = db.cursor()

curs.execute("SELECT COUNT(*) FROM board;")

all_count = curs.fetchall()[0][0]

curs.execute("SELECT * FROM board ORDER BY `date` DESC LIMIT %s OFFSET %s;", (per_page, offset))
data_list = curs.fetchall()

db.commit()
db.close()

pagination = Pagination(page=page, per_page=per_page, total=all_count, record_name='board', css_framework='foundation', bs_version=5)
if "id" not in session:
    id = None;
    name = None;
    return render_template('main.html', data_lists=data_list, pagination=pagination, id=id, name=name)

return render_template('main.html', data_lists=data_list, pagination=pagination, id=session["id"], name=session["name"], css_framework='foundation', bs_version=5)

flask-pagenate를 사용하면 get_page_args()를 이용해서 현재 페이지와 시작점을 쉽게 얻을 수 있어 데이터의 총 개수만 잘 구해주면 쉽게 구현할 수 있다

 

이미지업로드

이미지 파일을 선택하면 미리보기를 보여주고 확인을 누르면 이미지가 static안에 img폴더에 저장이 진행되고

DB에는 이미지 이름이 저장이 된다

$("input[type=file]").change(function (event) {
        let tmpPath = URL.createObjectURL(event.target.files[0]);

        $("#user_image").attr("src", tmpPath);
        console.log(tmpPath)
    });

    $(".upload").click(function () {

        const imageInput = $("#imageInput")[0];
        const name = $("#name").val();
        console.log("imageInput: ", imageInput.files)

        if (imageInput.files.length === 0) {
            alert("파일은 선택해주세요");
            return;
        }

        const formData = new FormData();
        // <input type="file" name="file" value="선택한 파일">
        formData.append("file", imageInput.files[0]);
        formData.append("name", name)

        $.ajax({
            type: "POST",
            url: "/upload",
            processData: false,
            contentType: false,
            data: formData,
            success: function (rtn) {
            }
        })
    })

UPLOAD_FOLDER = 'static/img'
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 생략 

if 'file' not in request.files:
    flash('No file part')
    return redirect(request.url)
file = request.files['file']
print(file.filename)
# if user does not select file, browser also
# submit an empty part without filename
if file.filename == '':
    flash('No selected file')
    return redirect(request.url)
if file and allowed_file(file.filename):
    filename = secure_filename(file.filename)
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    return redirect("/")

return jsonify({"msg": "good"})

 

느낀 점

페이지네이션을 하면서 SQL에서 ORDER BY, DESC, LMIT, OFFSET등을 학습할 수 있었다

SQL을 잘 사용한다면 데이터를 관리하기 더 편할 거 같다