수요일!
오늘은 Django로 게시판을 만든다.
1. 루트 디텍터리 바로 밑에 템플릿을 모아 저장할 디텍터리를 만들고,
settings.py 파일에서 os 모듈(경로와 파일명을 합침)을 import 한 후에 템플릿 디텍터리를 연결함
os.path.join(경로, '파일명') → C:/python-django/LectureSampleProject_0216/template 파일들
2. Static files(CSS, JS, images)은 client의 request URL에서 나오는 형태이므로,
루트 디렉터리 바로 밑에 static 디렉터리를 만들고 settings.py 파일에서 static 디텍터리를 연결함
루트 디렉터리 바로 밑에 media 디렉터리를 만들고 Media 파일(client가 server에 보여주는)도 경로를 설정해줌
3. static 디렉터리 안에 css · js · img 디렉터리를 만들고, img 디렉터리에 아무 이미지나 넣어 server에서 열어보기
4. bbs(게시판) app에 들어갈 DB Table을 설계하고(모델링), bbs 폴더의 models.py 파일 안에 class로 DB Table 명세를 설정함
from django.db import models
class Board(models.Model):
b_title = models.CharField(max_length=50) # 글 제목
b_author = models.CharField(max_length=20) # 글 작성자
b_content = models.CharField(max_length=200) # 글 내용
b_date = models.DateTimeField(auto_now=True) # 글 작성시간. auto_now=True는 현재 시간이 자동으로 삽입됨
b_comment_count = models.IntegerField(default=0) # 댓글 개수
b_like_count = models.IntegerField(default=0) # 좋아요 개수
def __str__(self):
return self.b_title
class Comment(models.Model):
c_author = models.CharField(max_length=20) # 댓글 작성자
c_content = models.CharField(max_length=100) # 댓글 내용
board = models.ForeignKey(Board, on_delete=models.CASCADE) # FK 설정
def __str__(self):
return self.c_content5. 서버 어드민 페이지에서 DB Table을 보려면 PyCharm으로 admin.py에 만들어둔 Model의 class를 등록해야 함
from django.contrib import admin
from bbs.models import Board, Comment
admin.site.register(Board)
admin.site.register(Comment)6. 특정 명세서 기반이 아닌 작성한 class를 기반으로 Table을 만들기 위해 python manage.py makemigrations 사용 후 migrate 명령어 써야 함. MySQL에서 만들어진 DB Table들 확인
(LectureSampleProject_0216) C:\python-django\LectureSampleProject_0216>python manage.py makemigrations
(LectureSampleProject_0216) C:\python-django\LectureSampleProject_0216>python manage.py migrate7. lecture 폴더 안의 urls.py(Root URLConf)에 Django의 TemplateView 모듈을 불러와서,
메인 페이지에 대한 URLConf의 경로를 설정하고 루트 디텍터리/템플릿 디텍터리 안에 index.html 생성함
from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html'), name='home'), # Main Page
path('admin/', admin.site.urls), # Admin Page
]8. Bootstrap의 예제들 중 Cover를 골라 페이지 소스 보기로 HTML을 index.html에 복붙 하고, 내용을 수정함
Bootstrap 홈에서 Bootstrap CDN 가져오고, 예제 페이지에서 관리자 모드로 cover.css 가져와 static/css 폴더에 넣고 경로 지정해주기
https://getbootstrap.kr/docs/5.1/examples/cover/
2022.02.10 - [멀티캠퍼스 프로젝트형 AI 서비스 개발 5회차/WEB] - 2/10 목
<!doctype html>
<html lang="ko" class="h-100">
<head>
<meta charset="utf-8">
<title>LectureSampleProject</title>
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template, cover.css -->
<link href="/static/css/cover.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Sample Project</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
</nav>
</div>
</header>
<main class="px-3">
<p class="lead">Django Framework</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Enter BBS!!</a>
</p>
</main>
<img src="/static/img/aurora.jpg"> <!-- 하단에 이미지 하나 넣어주기 -->
<footer class="mt-auto text-white-50">
</footer>
</div>
</body>
</html>
9. urls.py(Root URLConf)에 bbs App에 대한 URLConf의 경로를 설정하고
# Root URLConf(http://127.0.0.1:8000/)
from django.contrib import admin
from django.urls import path, include
from django.views.generic.base import TemplateView
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html'), name='home'), # Main Page
path('admin/', admin.site.urls), # Admin Page
path('bbs/', include('bbs.urls'))
]urls.py(Root URLConf) 파일을 복사해서 bbs App 폴더에 붙여 넣고, 해당 URLConf(게시판 목록)의 경로를 설정해야 함
# bbs App의 URLConf(http://127.0.0.1:8000/bbs/)
from django.urls import path
from bbs import views
app_name = 'bbs'
urlpatterns = [
path('list/', views.b_list, name='b_list') # http://127.0.0.1:8000/bbs/list/
]10. bbs/list에 해당되는 URL로 진입(request)하면 view로 b_list 함수가 호출되므로 views.py 안에 이를 정의해야 함
bbs/templates/bbs 디렉터리 안에 list.html 생성하고,
메인 페이지에서 앵커를 누르면 bbs/list/로 이동할 수 있도록, index.html 안 앵커 엘리먼트의 link 속성을 입력함
11. Admin Page에서 Board Table에 직접 글을 추가함
12. views.py 파일에서 b_list 함수 다시 정의하여 Board의 모든 객체(글 목록)를 id 역순으로 가져오게 함
↓bbs_views.py↓
from django.shortcuts import render
from bbs.models import Board
def b_list(request):
posts = Board.objects.all().order_by('-id')
context = {
"posts": posts
}
return render(request, 'bbs/list.html', context)템플릿 태그와 for문으로 글 제목을 출력함
↓bbs/templates/bbs/list.html↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% for post in posts %}
<li>{{ post.b_title }}</li>
{% endfor %}
</body>
</html>
13. Server list page를 게시판처럼 보이게 해야 함
Root_templates 폴더 안에 base.html을 생성하고, jQuery와 Bootstrap CDN을 넣고 템플릿 태그로 block을 잡아줌
list.html로 돌아와서 내용을 지우고 {% extends 'base.html' %} 입력해서 base.html 안의 템플릿 태그 내용과 연결함
{% extends 'base.html' %}
{% block html_header %}
{% endblock %}
{% block html_body %}
<div class="container">
<h1>Bulletin Board System(BBS)</h1>
<button type="button" class="btn btn-primary">새글 작성</button>
<div class="m-1"></div>
<table class="table table-hover">
<thead class="thread-dark">
<tr>
<th scope="col">#</th>
<th scope="col">글 제목</th>
<th scope="col">글 작성자</th>
<th scope="col">글 작성일</th>
<th scope="col">댓글 개수</th>
<th scope="col">좋아요 개수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목</td>
<td>작성자</td>
<td>날짜</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
{% endblock %}
14. tbody 엘리먼트를 템플릿 태그와 for문을 이용해서 게시판 글들을 가져와야 함
↓list.html↓
<tbody>
{% for post in posts %}
<tr>
<td>{{ post.id }}</td>
<td>{{ post.b_title }}</td>
<td>{{ post.b_author }}</td>
<td>{{ post.b_date }}</td>
<td>{{ post.b_comment_count }}</td>
<td>{{ post.b_like_count }}</td>
</tr>
{% endfor %}
</tbody>15. 새 글 작성 버튼을 클릭하면 경고창이 뜨게 만들기
static/js 폴더 안에 menu_btn.js을 생성하고, list.html의 html 블록에 해당 파일의 경로를 잡고, 새글 작성 버튼에 대한 event handler(new_post())를 넣음
↓list.html↓
{% block html_header %}
<script src="/static/js/menu_btn.js"></script>
{% endblock %}
{% block html_body %}
<div class="container">
<h1>Bulletin Board System(BBS)</h1>
<button type="button"
class="btn btn-primary"
onclick="new_post()">새글 작성</button>
<div class="m-1"></div>↓menu_btn.js↓
function new_post() {
alert('버튼이 클릭되었어요!')
}16. 이제는 위에서처럼 새 글 작성 버튼을 클릭하면 경고창이 뜨게 만드는 것이 아니라,
새 글 작성 페이지로 이동할 수 있도록 menu_btn.js 변경함
↓menu_btn.js↓
function new_post() {
document.location.href = '/bbs/create/'
}17. urls.py(Root URLConf)로 와서 해당 URLConf(새글 작성)의 경로를 설정하고
↓Root URLConf↓
# bbs App의 URLConf(http://127.0.0.1:8000/bbs/)
from django.urls import path
from bbs import views
app_name = 'bbs'
urlpatterns = [
path('list/', views.b_list, name='b_list'), # http://localhost::8000/bbs/list/
path('create/', views.b_create, name='b_create'), # http://localhost::8000/bbs/create/
]views.py 파일에서 b_create 함수 정의함
↓views.py↓
from django.shortcuts import render
from bbs.models import Board
def b_list(request):
posts = Board.objects.all().order_by('-id')
context = {
"posts": posts
}
return render(request, 'bbs/list.html', context)
def b_create(request):
return render(request, 'bbs/create.html')bbs/templates/bbs 디렉터리 안에 create.html 생성하고, list.html 내용을 복붙 한 뒤 button과 table 엘리먼트를 지우고 내용을 수정함
↓create.html↓
{% extends 'base.html' %}
{% block html_header %}
<script src="/static/js/menu_btn.js"></script>
{% endblock %}
{% block html_body %}
<div class="container">
<h1>새글 작성</h1>
</div>
{% endblock %}
| 1. 1/17 월 | 2. 1/18 화 | 3. 1/19 수 | 4. 1/20 목 | 5. 1/21 금 |
| 취업 특강 | 파이썬 환경 설정 (파이참, 아나콘다, 주피터 노트북) |
파이썬 데이터 타입 (list, tuple) |
파이썬 데이터 타입 (range, string, dictionary, set, bool) |
파이썬 사용자 정의 함수, 객체지향, 사용자 정의 클래스 |
| 6. 1/24 월 | 7. 1/25 화 | 8. 1/26 수 | 9. 1/27 목 | 10. 1/28 금 |
| 파이썬 사용자 정의 클래스, 사용자 정의 모듈 |
DB(MySQL) DBMS, MySQL 환경 설정, DB/테이블 생성, DB 입력·활용, Index |
DB(MySQL) View, 백업과 복원, DB 모델링, 관계(PK, FK), DML(CRUD), 데이터 타입 |
DB(MySQL) DML(CRUD), WHERE 조건, 패턴 매칭, SubQuery, 정렬, 그룹핑, 집계 함수, 트랜잭션(ACID 특성) |
DB(MySQL) JOIN, UNION, NOT IN, WEB |
| 11. 2/3 목 | 12. 2/4 금 | 13. 2/7 월 | 14. 2/8 화 | 15. 2/9 수 |
| WEB WebStorm 환경 설정, HTML, CSS, JavaScript, jQuery CDN |
WEB jQuery 문법, Selector, Method |
WEB jQuery Method, Event, AJAX |
GitHub 특강 소스코드 관리, Fork, Clone, Branch, Commit, Push, Pull-Request, Rebase |
GitHub 특강 프로젝트 관리, Fetch, Rebase, Merge, Conflict |
| 16. 2/10 목 | 17. 2/11 금 | 18. 2/14 월 | 19. 2/15 화 | 20. 2/16 수 |
| WEB jQuery AJAX, Bootstrap, Open API |
Django WSGI, MVC, MVT, ORM, 투표 시스템 |
Django MVT, ORM |
Django MVT, ORM, Redirect |
Django 게시판 |
* 기본과 응용!
