ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [FLASK] 수정(Update)
    FLASK 2022. 11. 13. 18:20

     

     

     

    현재 코드 ▼

    from flask import Flask, request, redirect
    
    app = Flask(__name__)
    
    nextId = 4
    topics = [
        {'id':1, 'title': 'html', 'body': 'html is ...'},
        {'id':2, 'title': 'css', 'body': 'css is ...'},
        {'id':3, 'title': 'javascript', 'body': 'javascript is ...'}
    ]
    
    def template(contents, content):
        return f'''<!doctype html>
        <html>
            <body>
                <h1><a href="/">WEB</a></h1>
                </ol>
                    {contents}
                </ol>
                {content}
                <ul>
                    <li><a href="/create/">create</a></li>
                </ul>
            </body>
        </html>
        '''
    
    def getContents():
        liTags = ''
        for topic in topics:
            liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
        return liTags
    
    
    @app.route('/')
    def index():
        return template(getContents(), '<h2>Welcome</h2>Hello, WEB')
    
    
    @app.route('/create/', methods=['GET', 'POST'])
    def create():
        if request.method == 'GET':
            content = '''
                <form action="/create/" method="POST">
                    <p><input type="text" name="title" placeholder="title"></p>
                    <p><textarea name="body" placeholder="body"></textarea></p>
                    <p><input type="submit" value="create"></p>
                </form>
            '''
            return template(getContents(), content)
        elif request.method == 'POST':
            global nextId
            title = request.form['title']
            body = request.form['body']
            newTopic = {'id': nextId, 'title': title, 'body': body}
            topics.append(newTopic)
            url = '/read/'+str(nextId)+'/'
            nextId = nextId + 1
            return redirect(url)
    
    
    @app.route('/read/<int:id>/')
    def read(id):
        title = ''
        body = ''
        for topic in topics:
            if id  == topic['id']:
                title = topic['title']
                body = topic['body']
                break
        return template(getContents(), f'<h2>{title}</h2>{body}')
    
    app.run(debug=True)

     

     

     

    이번엔 create 아래에 update 링크를 만들고

    수정 기능을 구현해보도록 하겠습니다 !

     

    목록을 클릭해서 읽기모드(read)로 들어갔을 때

    수정기능이 생성되고

    수정 버튼을 클릭하였을 때

    url이 '/update/id값'이 오도록 만들어 주겠습니다.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    그럴려면~

    id값을 공급받아야 합니다!

    read()의 return값에 id값을 추가해 줍니다.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    위와 같이 template()을 수정합니다.

     

    현재 선택한 id값을 전달하면 topic안에서 받습니다.

    이 때 read()에서는 id값을 전달받을 수 있지만

    welcome페이지(index()) 같은 경우에는

    id값이 주어지지 않으므로id = None이라는 기본값을 줍니다.

     

    contextUI라는 변수를 만들고

    만약 id값이 None이 아니라면( =id값이 있다면 )

    update 버튼이 생성되고

    클릭시 해당하는 수정페이지(/update/id/)로 이동합니다.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    이제 update 기능을 구체적으로 구현해 보도록 하겠습니다!

    update(수정)기능은 create(쓰기)랑 거의 비슷하며

    여기에 플러스로 read(읽기)기능이 필요합니다.

     

     

    create()부분을 복사하여 아래와 같이 수정 후 실행해 보겠습니다.

     

     

    read 기능을 만들었을 때 처럼

     update도 id값을 들고 오기 때문에

    수신받을 주소의 id값을 정수(<int:id>)화 해주고

    파라미터로 id값을 넣어줍니다.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    목록을 누르고 update버튼을 클릭하면

    수정 페이지로 잘 이동하는것을 확인할 수 있습니다 !

     

    title과 body값이 비어있습니다.

    수정할 때에는

    title과 body의 기본값이 들어가 있어야(원본 글)

    수정하기가 훨씬 편하겠지요?

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    topics에서 검색해 title과 body값을 가져오던

    read 기능을 가져오면 됩니다~!

     

    request.method가 GET일 때

    title과 body값을 검색한 다음

    검색된 결과를 value값으로 전달합니다.

     

    제출버튼도 update로 변경하고 실행해보면 !

     

     

     

    기존 글의 제목과 본문이 보이고

    update버튼이 생성되었습니다 !

     

     

     

     

     

     

     

     

     

     

     

     

     

    불러오기를 완성했으니(=GET일 때)

    이제 서버쪽으로 데이터를 전송하는 것을 만들어볼까요?(=POST일 때)

     

     

    action 속성의 경로를 update 경로로 수정해 줍니다.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    elif 부분도 위와 같이 수정해 줍니다.

     

    request.method가 POST일 경우!

    id값과 topic의 id값이 같다면~

    title과 body를 수정된 title과 body로 지정해주고

    url의 id값은 nextID가 아닌 기존 id값을 사용합니다.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    수정페이지에서 위와 같이 글을 수정한 다음 update 버튼을 누르면...!

     

     

     

     

    글의 제목과 본문이

    우리가 수정한 내용으로 바뀐 것을 확인할 수 있습니다!

     

     

     

     

     

     

     

     

     

     

     

    수정(Update) 완성!

    @app.route('/update/<int:id>/', methods=['GET', 'POST'])
    def update(id):
        if request.method == 'GET':
            title = ''
            body = ''
            for topic in topics:
                if id  == topic['id']:
                    title = topic['title']
                    body = topic['body']
                    break
    
            content = f'''
                <form action="/update/{id}/" method="POST">
                    <p><input type="text" name="title" placeholder="title" value="{title}"></p>
                    <p><textarea name="body" placeholder="body">{body}</textarea></p>
                    <p><input type="submit" value="update"></p>
                </form>
            '''
            return template(getContents(), content)
    
        elif request.method == 'POST':
            title = request.form['title']
            body = request.form['body']
            for topic in topics:
                if id == topic['id']:
                    topic['title'] = title
                    topic['body'] = body
                    break
            url = '/read/'+str(id)+'/'
            return redirect(url)

     

     

     

     

     

     

     

     

     

    출처

    'FLASK' 카테고리의 다른 글

    [FLASK] 삭제(Delete)  (0) 2022.11.14
    [FLASK] 쓰기(Create)_2  (0) 2022.11.12
    [FLASK] 쓰기(Create)_1  (0) 2022.11.12
    [FLASK] 읽기(Read)  (0) 2022.11.11
    [FLASK] 홈페이지 구현  (0) 2022.11.11
Designed by Tistory.