갬미의 성장일기

[Django] 웹페이지 만들기 - 부트스트랩 사용하기 본문

Algorithm/Web(django)

[Django] 웹페이지 만들기 - 부트스트랩 사용하기

갬미 2022. 1. 12. 17:18

<< 교육 들으면서 만든 웹 페이지라 간단한 소스 코드를 제외한 나머지 소스코드는 삭제 했습니다 >>

 

💥 오늘 할 것

  1. 게시글 작성 화면 부트스트랩으로 예쁘게하기
  2. 게시글 작성 후 DB에 추가, 메인화면에 출력하기
  3. 메인화면에 표로 게시글 출력하기
  4. 게시물 수정 및 삭제 기능 만들기

 

1. 게시글 작성 화면 부트스트랩으로 예쁘게 하기

현재 구현된 게시글 작성 화면

부트스트랩 (부트스트랩 시작하기 -> 클릭)

트위터에서 시작된 오픈 소스 프론트엔드 프레임워크로 트위터에서 주로 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 것이다. 웹페이지 디자인, 제작을 쉽게 할수있도록 도와주는 라이브러리이다 

 

기존 게시글 추가 페이지를 다음 소스코드로 수정한다 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>게시물 추가</title>
    <!-- 아래 코드를 삽입하고 body부분을 형식에 맞게 코딩한다 -->
    <link rel="stylesheet" href ='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
</head>
<body>

</body>
</html>

html head 에 bootstrap을 사용할 것이라고 명시한다

부트스트랩 적용 게시글 작성 화면

 

2. 게시글 작성 후 DB에 추가, 메인화면에 출력하기

게시글 작성하고 메인 화면에 다음과 같이 출력할 예정이다 

    제목
    작성자
    작성일시
   ------------------
    제목
    작성자
    작성일시
   ------------------
       .
       .
       .

💥 위 화면에서 게시물 작성 후 버튼 누르면 오류남 -> 작성 후 url 반응 함수를 아직 만들지 않았음!

 

이를 구현하기 위한 단계

  1. views.py에 게시물 작성 버튼 눌렀을때 어떻게 반응할지 함수 작성
  2. urls.py에 추가

1. views.py 함수 추가

from django.shortcuts import redirect

def add_blog(request):
    '''
    DB추가
    '''
    return redirect('/')

💥 render는 템플릿으로 이동하고 redirect는 url로 이동한다

따라서 render는 view 에서 사용하던 파이썬 변수를 html 템플릿으로 넘길 수 있지만 redirect는 url로 이동만 하기 때문에 변수를 넘길수없다

 

2. urls.py 함수 추가

 

게시물 단위로 , 제목, 작성자, 작성 시간 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>전체 게시글 리스트</title>
</head>
<body>
    <h1> 게시판 </h1>
    {% for item in post_list %}
        <p> {{item.title}} </p>
        <p> {{item.writer}} </p>
        <p> {{item.created_at}} </p>
        <p>------------------------------</p>
    {% endfor %}
    <p><a href = 'blog/add_blog_form/'> 게시물 추가 </a></p>
</body>
</html>

부트스트랩 사용하며 게시물을 깔끔하게 나타내기 (최신순으로 정렬)

1. 게시글을 최신순으로 정렬하기 위해서 views.py를 수정한다

def view_blog_list(request):
    # blog_list = Post.objects.all()  ## DB 모든 데이터를 id순서로 
    blog_list = Post.objects.order_by('-created_at') ## DB 데이터를 created-at 최신 순으로
    data = {'post_list': blog_list}
    return render(request, 'blog/view_blog_list.html', data)

2. 메인화면 html 수정

html 표 만들기

tr -> 행 삽입

th -> 제목 셀 생성

td -> 일반 셀 생성

 

💥 템플릿 언어에서는 아래와 같이 for 문을 사용한다.

{% for 변수 in 순회가능객체 %}
    {{ 변수 }}
{% endfor %}
 

[Django Tutorial] Blog 만들기 - 10. 템플릿 언어

이제 ORM 을 통해 데이터베이스의 데이터를 다루는 방법까지 알았으니 이렇게 불러온 데이터를 템플릿에 적용시켜주면 동적으로 템플릿을 생성할 수 있다. 그럼 데이터를 템플릿에 적용하는 방

nachwon.github.io

 

저작자표시

'Algorithm > Web(django)' 카테고리의 다른 글

[세미 프로젝트] django 카카오지도 api 사용하기  (0) 2022.04.17
[Django] 웹페이지 만들기 - 게시글 수정, 삭제  (0) 2022.01.12
[Django] 웹페이지 만들기 - DB 데이터 관리하기  (0) 2022.01.11
[Django] 웹페이지 만들기 - APP 추가하기, HTML 실행하기  (0) 2022.01.10
'Algorithm/Web(django)' Related Articles more
Comments