10.21 블로그 내용 올리고 삭제까지

• 커리문을 만들지 않고 왜 class를 통해 데이터를 넣다빼고 할까

->커리문을 잘 모르는 사람들이 잘 사용할 수 있게끔

• 준비
  -데이터베이스와 연결되도록 먼저 sql로 블로그 테이블을 만든다.

파라미터 넘기기

mssql executemany

참고 https://m.blog.naver.com/scyan2011/221963557539

이렇게 데이터를 넣어준다

• 상단바에 '블로그 리스트'넣는다.

• bloglist.html 새파일을 만든다.
• 부트스트랩-테이블 https://getbootstrap.kr/docs/5.2/content/tables/

{%  extends "base.html" %}
{% block title %}블로그 리스트{% endblock %}
{% block content %}
<br>
<div class="container">
    <h1 class="text-center"> 블로그 작성 글 목록</h1>
    <br>
    <table class="table table-hover">
        <thead>
            <tr class="table-primary"> # 색 넣어주기
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Handle</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td colspan="2">Larry the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
      </table>

</div>
{% endblock %}

- 블로그 글쓰기 버튼 만들기

완성본 먼저...

1. 부트스트랩-버튼
   

2. bloglist.html 파일에 추가한다.

{%  extends "base.html" %}
{% block title %}블로그 리스트{% endblock %}
{% block content %}
<br>
<div class="container">
    <h1 class="text-center"> 블로그 작성 글 목록</h1>
    <br>
    <table class="table table-hover">
        <thead>
            <tr class="table-primary">
              <th scope="col">글번호</th>
              <th scope="col">제목</th>
              <th scope="col">글쓴이</th>
              <th scope="col">기타</th>
            </tr>
          </thead>
          <tbody>
            {% for item in data %}
            <tr>
              <th scope="row">{{item[0]}}</th>
              <td>{{item[1]}}</td>
              <td>정윤오</td>
              <td>{{item[3]}}</td>
            </tr>
            {% endfor %}
          </tbody>
      </table>
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li class="page-item disabled">
            <a class="page-link">Previous</a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#">Next</a>
          </li>
        </ul>
      </nav>

</div>
<div class="container"> # '새 blog 작성' 버튼 추가
    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <a href="/blogform">
        <button class="btn btn-outline-primary" type="button">새 blog 작성</button>
        </a>
    </div>
</div>
{% endblock %}

• 새 블로그 작성 버튼을 누르고 글쓰고 저장하기

-> 새 blog작성버튼을 누르면 다음과 같이 나오게 한다!

1. app.py에 blogform추가
   

2. blogform.html만들기 & 파일 업로드 넣기

• 빨간 표시 해놓은 부분과 같이 label for ="____"과 id 를 맞춰줘야 하고 name도 중요하다.

{%  extends "base.html" %}
{% block title %}Index{% endblock %}
{% block content %}
<br>
<h1 class="text-center"> 블로그 작성 글 목록</h1>
<br>
<div class="container">
    <form action="/fileupload" method="post" enctype="multipart/form-data">
    <div class="mb-3">
      <label for="title" class="form-label">블로그 제목</label>
      <input type="text" class="form-control" id="title" name="title" aria-describedby="titleHelp">
      <div id="titleHelp" class="form-text">블로그 제목을 입력하세요</div>
    </div>
    <div class="mb-3">
        <label for="content" class="form-label">Password</label>
        <input type="password" class="form-control" id="content" name="content" aria-describedby="contentHelp">
        <div id="contentHelp" class="form-text"> 내용을 입력하세요</div>
      </div>
    <div class="mb-3">
        <label for="formFile" class="form-label">이미지 선택</label>
        <input class="form-control" type="file" id="formFile" name="formFile" >
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
{% endblock %}

(!) 주의
aria-describedby="contentHelp이라고 "만 빼먹어도.. 이렇게 정렬이 안맞는다.

이제는 블로그 작성 후, 글이 올려진 걸 봐야겠죠?

1. 블로그를 작성한다.
   

2. 제출하면? 리스트에 이렇게 올라갑니다.

3. 과정

- app.py

- blog.content.html

{%  extends "base.html" %}
{% block title %}Index{% endblock %}
{% block content %}
<br>
<div class="container">
    <div class="card mb-3">
        <img src="{{data[3]}}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">{{data[1]}}</h5>
          <p class="card-text">{{data[2]}}</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
      
</div>

{% endblock %}

내가 글쓴거 수정/삭제

1. 버튼을 만든다
   
   <버튼 코드>

<div class="container">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
    <button class="btn btn-outline-success" type="button">수정</button>
    <a href="/blogdelete/{{data[0]}}">
<button class="btn btn-outline-danger" type="button">삭제</button>
    </a>    
  </div>
</div>

-> blog_content.html에 넣어요

{%  extends "base.html" %}
{% block title %}Index{% endblock %}
{% block content %}
<br>
<div class="container">
    <div class="card mb-3">
        <img src="{{data[3]}}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">{{data[1]}}</h5>
          <p class="card-text">{{data[2]}}</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
      
</div>
<div class="container"> # 수정/삭제 버튼
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
    <button class="btn btn-outline-success" type="button">수정</button>
    <a href="/blogdelete/{{data[0]}}">
<button class="btn btn-outline-danger" type="button">삭제</button>
    </a>    
  </div>
</div>
{% endblock %}

• app.py 파일에는 삭제를 누르면 목록으로 가야하니 그렇게 링크를 입력해줍니다.

@app.route('/blogdelete/<int:id>')
def blogdelete(id):
    conn = db.dbconn()
    cursor = conn.cursor()
    sql='''delete blog where id=?'''
    cursor.execute(sql,id)
    conn.commit()
    conn.close()
    return redirect('/bloglist')
      

github에 올리기

<순서대로 하세요>

어디에 저장되어 있는지..경로 설정부터

main으로 들어갔따!

git status를 쳐보면

commit -m " 저장할 이름 쓰기"

마지막
$ git push origin main

치면 올라갑니다.

끝

#ABC부트캠프 #유클리드소프트 #2022청년ESG지원사업 #코딩 #대전부트캠프 #대전청년 #ESG경영 #파이썬 #빅데이터 #대전IT교육 #프로그래밍 #개발자 #진로탐색 #데이터교육 #ESG교육