django 기초 - bootstrap을 이용한 사이트 만들기 : 1. 페이지 틀 구성하기

오늘은 부트스트랩을 사용하여 웹페이지를 구성하는 작업을 하였다.

사용한 소스는 현재 수업을 듣고 있는 멀티캠퍼스 데이터 분석 클래스에서 제공받았다.

(따로 소스 파일을 업로드 하진 않을 예정)

bootstrap

 부트스트랩이란 트위터에서 시작한 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 css와 JavaScript로 만들어 놓은 것으로 오픈소스 프론트엔드 프레임워크이다. 트위터에서 사용한 디자인, 기능 요소들을 시작으로 현재에는 다양한 형태가 있다. 무료에서 부터 일부 유료인것도 있는것 같다.

 - https://getbootstrap.com/ 사이트에서 기본 코드들을 통해 연습을 할 수 있다.

 - 나는 html, css, img, jquery와 같은 각종 자원을 공유받아 실습을 진행했다.

0. static 

 - 어제 highchart와 마찬가지로 사용할 자원들을 app의 static 폴더에 저장한다.

 - 그 중 페이지의 전체적인 틀인 header와 footer는 rootweb의 템플릿에 저장한다. 

 - {% load static %} , {% include 'html_name.html' %} {% block content %} {% endblock %}

 

{% load static %} 
<!-- include 하는 html파일에서 load static을 했다면 생략 -->
		
{% include 'header.html' %}
<!-- 공통적으로 사용되는 레이아웃 html 이름을 입력 -->

{% block content %}

<section class="content">
<!-- main content ~~ -->
<!-- 각각의 html 문서 내용 ~~ -->

{% endblock %}
{% include 'footer.html' %}
<!-- 사용하는 html 이름을 입력 (아랫부분) -->

 1. Home 화면 구성

 - templates로 주어진 home html 문서로 화면을 구성한다.

 

# urls
urlpatterns = [
    path('main/', views.index, name='main')
    ]
 
# views
def index(request):
    return render(request, 'bbs/home.html')

 1-1 NoReverseMatch  

 - urls에 정의되지 않은 url을 html문서에서 접근하려고 할때 발생한다.

 - 에러 페이지를 내려보면 "Error during template rendering" 란 문구를 확인할 수 있다.

 - 아래에 어떤 html 문서의 몇째 줄에서 문제가 발생됐는지 확인 가능

 - {% url 'list' %}는 urls에서 name = 'list'로 주어진 주소를 사용한다는 의미이다. 하지만 urls.py에서 해당 이름으로 정의된 주소가 없기 때문에 오류가 발생했다. 

 - 수업으로 들은바로는 django가 url에 대해서 민감하게 반응한다고 한다. html에서 아직 등록안된 url의 경우 템플릿 메서드 보다는 '../list' 형식의 주소를 입력한다. 

 - 일단 일시적으로 header.html의 해당 부분을 #으로 바꿨다.

 

                <li><a href="#"><i class="fa fa-circle-o"></i>게시판</a></li>

 - 새로고침하면 화면이 뜬다. 가끔 서버에 문제가 있으면 서버를 내렸다가 다시 구동한다.

2. 게시판 구성하기

 - 게시판은 홈의 좌측 내비게이션 바를 클릭하여 들어간다.

 - 결국 페이지의 틀은 그대로 유지해서 사용하기 때문에 header.html, footer.html 파일을 include 시켜줘야한다.

 - 위에서 문제가 됐던 게시판을 urls에 등록하여 생성한다.

 - 게시판도 html 코드로 부트스트랩에 포함되어 있었기 때문에 연결만 해주면 된다.

 - 지금까지 해온과정과 같다. urls.py 등록 -> views 함수 작성 -> html 문서에 주소 등록

 

# urls.py
urlpatterns = [
    path('main/', views.index, name='main'),
    path('list/', views.list, name='list'),
]

# views.py
def list(request):
    return render(request, 'bbs/list.html')


# header.html
# <li><a href="../list/"><i class="fa fa-circle-o"></i>게시판</a></li>
# urls에 입력을 했다면 href="{% url 'list' %} 로도 가능하다.