Posted Updated pet project4 minutes read (About 602 words)

web-add-clone-board-modify-del

title: Pet-Project-web-수정 및 삭제기능 추가
category: pet project
tags: pet project

date: 2021-06-09 4:55:01

개요

웹에 클론코딩 페이지를 추가하기까지의 정리

현황

게시글 수정 및 게시글 삭제를 추가하였다.

게시글 수정,삭제 버튼

[글쓰기 버튼 추가 및 작성일시 추가]
게시글 수정 화면
[글쓰기 눌렀을 때 화면]

소스 코드 수정 현황

  1. clone_board.py
  2. board_add.html
  3. board_content.html

clone_board.py 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@clone_board_bp.route('/del/<int:board_content_idx>/')
def delContent(board_content_idx):
    db = Database()
    db.execute("""DELETE FROM board_content_table WHERE board_content_idx = %s""" %str(board_content_idx))
    db.commit()
    return redirect(url_for("clone_board.list"))

    
@clone_board_bp.route('/modify/<int:board_content_idx>/',methods=['POST','GET'])
def modify(board_content_idx):
    db = Database()
    data = db.executeAll("""SELECT * FROM board_content_table WHERE board_content_idx = %s""" %str(board_content_idx))

    if request.method == 'POST':
        form = ContentAddForm()
        if form.validate_on_submit():
            db.execute("""UPDATE board_content_table SET write_time='%s',board_content_title='%s',board_content='%s' WHERE board_content_idx = '%s'""" % (datetime.now(),form.content_title.data,form.content_text.data,str(data[0]['board_content_idx']) ))
            db.commit() 
            return redirect(url_for('clone_board.content',board_content_idx=board_content_idx))
    else:
        form = ContentAddForm(content_title=data[0]['board_content_title'],content_text=data[0]['board_content'])
    return render_template('/main/board_add.html',form=form,board_content_idx=board_content_idx)

clone_board.py 설명

  • 일부 생략된 코드임을 유의
  • 삭제 버튼을 누르면 DB에서 삭제
  • 수정 버튼을 누르면 수정창(게시글 작성 재활용)을 띄워줌
  • 수정창에서 등록을 눌렀다면(request = POST인 경우) db에 업데이트 해주고 수정된 내용을 보여줌

board_add.html 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
생략
<div class="container my-3">
            <form method="post" class="post-form">
                {{ form.csrf_token }}
                {% include "checklist_form_errors.html" %}
                Title:&nbsp 
                <input type="content_title" class="form-control" name="content_title" id="content_title" value={{ form.data.content_title or ''}}>
                    
                <form action="{{ url_for('clone_board.list',board_content_idx=board_content_idx) if form.data.content_text else url_for('clone_board.list') }}" method="post">
                    
                    <label for="content_text" style="font-size:16px;">Content:</label>
                    <textarea name="content_text" id="content_text" rows="15">{{form.data.content_text or ''}}</textarea>
                    <input type="submit" style="font-size:16px;" value="등록">
                    
                </form>
            </form>
            
생략

board_add.html 설명

  1. 조건문으로 수정모드일때와 글작성 모드를 forms의 값 유무로 판단하여 버튼을 눌렀을 때 연결할 url을 설정해줌

board_content.html 코드

1
2
3
4
5
6
7
8
9
10
<div class="btns">   
                        <div class="modify">  
                            <a href="{{ url_for('clone_board.modify',board_content_idx=content[0]['board_content_idx'])}}" 
                                class="button">수정</a>
                        </div>
                        <div class="delete">  
                            <a href="{{ url_for('clone_board.delContent',board_content_idx=content[0]['board_content_idx']) }}"
                                class="button"> 삭제 </a>
                        </div>   
</div>

board_content_html 설명

  1. 수정,삭제버튼 추가

향후 목표

  1. 기능 손보기
    1. 부트스트랩 변경(디자인 수정)
  2. 글 수정기능
    1. 패스워드 기능 추가
  3. 글 삭제
    1. 패스워드 기능 추가
  4. 사진 업로드 기능(글쓰기)
  5. 작성자 이름 추가(닉네임)
  6. 글 댓글 기능 추가
    1. 댓글 작성자 이름
    2. 댓글 패스워드
    3. 댓글 수정, 삭제
Posted Updated pet project5 minutes read (About 706 words)

Pet-Project-web-게시글 추가 기능 및 날짜 추가

개요

웹에 클론코딩 페이지를 추가하기까지의 정리

현황

게시글 추가와 게시글에 날짜를 추가하였다.
게시글 화면

[글쓰기 버튼 추가 및 작성일시 추가]
게시글 작성 화면
[글쓰기 눌렀을 때 화면]

소스 코드 수정 현황

  1. clone_board.py
  2. board.html

clone_board.py 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
from threading import main_thread
from flask import Blueprint, request, render_template, flash, redirect, url_for, g,session
from app.module.dbModule import Database
from app.forms.forms import ContentAddForm, UserAddCheck
from datetime import datetime

clone_board_bp = Blueprint('clone_board',__name__,url_prefix='/clone_board')

@clone_board_bp.route('/list',methods=['POST','GET'])
def list():
    db = Database()
    content_list = db.executeAll("SELECT * FROM board_content_table")
    print(content_list)
    return render_template('/main/board.html',content_list=content_list)



@clone_board_bp.route('/add',methods=['POST','GET'])
def add():
    form = ContentAddForm()
    title = form.content_title.data
    text = form.content_text.data
    if request.method == 'POST' and not form.validate_on_submit() and ((title == "") or (text == "")):
        error = "데이터 양식이 맞지 않습니다"
        flash(error)
    elif request.method == 'POST' and not((title == "") or (text == "")):
        db = Database()
        db.execute("""INSERT INTO board_content_table (board_content,board_content_title,write_time) VALUES ('%s','%s','%s')""" % (text, title,datetime.now())) 
        db.commit()
        return redirect(url_for("clone_board.list"))
        
    return render_template('/main/board_add.html',form=form)

clone_board.py 설명

  1. 게시글 리스트를 보여주는 list 페이지와 게시글 추가 버튼을 눌렀을 때의 add 페이지로 분리
  2. 게시글 리스트 페이지에서는 항상 디비로부터 가져온 정보를 모두 출력함(아직 페이징 기능 미구현)
  3. 게시글 추가 페이지에서는 제목과 내용을 입력하면 데이터베이스에 추가함
    • 제목이나 내용을 입력하지 않으면 에러 출력함
  4. 데이터베이스에 제대로 입력됐다면 list 페이지로 재연결해줌

    clone_board.html 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% extends 'main/clone_base.html' %}
{% block content %}

<html>
    <body>
        <div class="container my-3">
            <table class="table">
                <thead>
                <tr class="thead-dark">
                    <th>번호</th>
                    <th>제목</th>
                    <th>작성일시</th>

                </tr>
                </thead>
                <tbody>
                {% if content_list %}
                {% for content in content_list %}
                <tr>
                    <td>{{ content['board_content_idx'] }}</td>
                    <td>
                        {{ content['board_content'] }}
                    </td>
                    <td>{{ content['write_time'] }}</td>

                </tr>

                
            </table>
            <div class="btns">
                <li><a href="/clone_board/add" class="button big">글쓰기</a></li>
            </div>


            이하 생략

clone_board.html 설명

  1. 리스트 페이지의 작성글 인덱스,내용,작성 일시를 출력
  2. 글쓰기 버튼 추가

clone_board_add.html 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
생략
<div class="container my-3">
            <form method="post" class="post-form">
                {{ form.csrf_token }}
                {% include "checklist_form_errors.html" %}
                Title:&nbsp
                <input type="content_title" class="form-control" name="content_title" id="content_title">
                    
                <form action="{{ url_for('clone_board.add') }}" method="post">
                    
                    <label for="content_text" style="font-size:16px;" >Content:</label>
                    <textarea name="content_text" id="content_text" rows="15"></textarea>
                    <input type="submit" style="font-size:16px;" value="등록">

                </form>
            </form>
생략

clone_board_add.html 설명

  1. 에러 출력 관련 처리 위한 코드 추가
  2. 제목과 내용 입력란 추가
  3. 등록 버튼을 누르면 forms 정보와 함께 clone_board add 메소드로 이동

향후 목표

  1. 기능 손보기
    1. 부트스트랩 변경(디자인 수정)
  2. 글 수정기능
    1. 부가적으로 패스워드 필요
  3. 글 삭제
    1. 부가적으로 패스워드 필요
  4. 사진 업로드 기능(글쓰기)
  5. 작성자 이름 추가(닉네임)
Posted Updated pet project2 minutes read (About 245 words)

Pet-Project-web-clone-board-add

개요

웹에 클론코딩 페이지를 추가하기까지의 정리

현황

main
[게시판으로 가는 기능 추가]

current
[게시판 페이지 추가]

추가 내용

main/clone_board.py 추가
template/main/clone_board.html 추가

clone_board.html 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{% extends 'main/clone_base.html' %}
{% block content %}

<html>
    <body>
        <div class="container my-3">
            <table class="table">
                <thead>
                <tr class="thead-dark">
                    <th>번호</th>
                    <th>내용</th>
                    <!--th>작성일시</th!-->
                </tr>
                </thead>
                <tbody>
                {% if content_list %}
                {% for content in content_list %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>
                        {{ content['board_content'] }}
                </tr>

                {% endfor %}
                {% else %}
                <tr>
                    <td colspan="3">너에게 받은만큼 더 행복해질게</td>
                </tr>
                {% endif %}
                </tbody>
            </table>
        </div>

    </body>
</html>


{% endblock %}

clone_board.html 설명

  • clone_board.py 파일에서 데이터베이스에서부터 입력한 내용 (board_content_list)을 가져와
    html에 전달해주고 이를 모두 출력한다.
    (참고 사이트 : https://wikidocs.net/81050)

앞으로 추가할 것

  1. 기능 손보기
    1. 글쓴 시간 추가
    2. 디자인 수정(부트스트랩 변경 예상)
  2. 글쓰기
  3. 수정
  4. 삭제
  5. 사진 업로드 기능
Posted Updated pet projecta few seconds read (About 110 words)

Pet-Project-web-clone-coding

개요

웹에 클론코딩 페이지를 추가하기까지의 정리

하려는 것

  • 커뮤니티 사이트 clone coding
  • 반려동물 기록 사이트 (고려중)

초기 설정

main/clone_main.py 추가
template/main/clone_main.html 추가
template/main/clone_base.html 추가

설명

게시판, 글쓰기(사진업로드 가능) 등 기능을 추가한다.

앞으로 추가할 것

  1. 게시판 기능
  2. 글쓰기 기능
Follow

Categories

Recents

Archives

Tags

CRF3
algorithm72
book_report2
database1
java26
jpa1
pet project12
pet_project1
retrospect1
springboot3
web3
web pet project2
write3

Subscribe for updates

×