인프런 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 보고 정리한 내용입니다.
각 앱에서 urls.py가 없다면 만들어주고, 프로젝트 urls.py에서 path를 지정해주어야 사용 가능
1
2
3
4
5
6
7
8
9
10
11
12
#(프로젝트 디렉토리)/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path("admin/", admin.site.urls),
path("blog/", include("blog.urls")),
path("instagram/", include("instagram.urls")),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
함수 기반으로 view를 생성해주는 과정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#(앱 디렉토리)/urls.py (여기서 앱 이름은 instagram)
from django.shortcuts import render
from .models import Post
# Create your views here.
def post_list(request):
qs = Post.objects.all()
q = request.GET.get("q", "") # 두번째 인자는, 첫번째 인자가 없을 때 대신 반환할 값
# request.POST
# request.FILES
if q:
qs = qs.filter(
message__icontains=q
) # 검색어가 포함이 되었는지에 대한 조건이 추가가 되고, 이에 대한 새로운 queryset이 반환됨
# instagram/templates/instagram/post_list.html (templates는 고정이고 그 이후 부분을 아래 두번째 인자에서 지정해준것)
return render(
request,
"instagram/post_list.html",
{ # 2번째 인자로 '앱이름/원하는이름의html' 을 넘김
"post_list": qs, # post_list.html 파일에서 로 참조하게 됨 (공교롭게 지금 함수랑 이름이 같지만, 중요한건 3번째 인자로 들어간 이 이름)
},
)
instagram 디렉토리에 수동으로 templates/instagram/post_list.html을 만들어줌 (위에서 지정한 경로대로)
post_list.html에는 임시로 다음을 참조해서 화면에 보여주도록 함
1
2
3
<!-- post_list.html -->
{{post_list}}
다음과 같이 뜨면 정상 (새로고침해도 해당 url의 template이 없다고 뜬다면 서버를 재시동)
메세지를 추가하고 새로 고침해도 반영된다.
Style이 너무 없다싶으면 아래처럼 table을 추가한다는식으로 추가해준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- post_list.html-->
...
<head>
<meta charset="utf-8" />
<!-- 인코딩 지정 -->
<!-- Get Boostrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Instagram/ Post List</title>
</head>
<body>
<!-- 아래 class에 들어간것은 boostrap class -->
<table class="table table-bordered table-hover">
<tbody>
...
</body>
검색창 구현
1
2
3
4
5
6
7
8
...
<body>
<form action="" method="get">
<input type="text" name="q" />
<input type="submit" value="검색" />
</form>
...
</body>
text type의 input을 q라는 이름(name)으로 받아서 submit하면 action에 넣은 주소로 get 방식으로 보내겠다는 의미
검색이 동작한다.
검색 버튼을 누르고 나면, 원래는 검색창이 refresh되는데 남겨둘려면 다음과 같이 하면 된다.
1
2
3
4
5
6
7
8
9
10
#views.py
...
return render(
request,
"instagram/post_list.html",
{
"post_list": qs,
"q": q, # 이 부분을 추가해줌
},
)
1
2
3
4
5
<form action="" method="get">
<input type="text" name="q" value="" />
<!-- value 부분을 추가 -->
<input type="submit" value="검색" />
</form>