본문 바로가기
개발일지/Django

Django - 기본사이클 - 모델과 웹사이트1

by 다니엘의 개발 이야기 2022. 9. 30.
320x100

어... django 사이클을 가급적이면 하나의 포스팅으로 끝내보려고 했는데

설명은 둘째치더라도 너무너무 길어서 2개, 3개로 쪼개서 포스팅을 해야겠다.

# Django 사이클

# 모델과 웹 사이트

 

#1

 

vscode를 열고,

vscode에 내장되어있는 터미널을 열고

해당 터미널을 통해서 작업을하고자 하는 폴더로 이동한다.

#2

 

터미널에 명령을 입력한다.

 

django-admin startproject 내가원하는프로젝트명

 

예시

django-admin startproject my_car_site

 

그러면 내가 작업하려고 들어온 폴더안에 프로젝트 폴더 뭉탱이가 생긴다.

#3

 

터미널을 통해서 2번에서 만든 프로젝트 폴더로 이동한다.

 

예시

cd my_car_site

#4

 

마음에 드는 이름으로 어플리케이션 폴더를 생성한다.

 

예시

python manage.py startapp cars

#5

 

2번을 통해서 생성한 프로젝트 폴더 안에

templates

라는 이름의 폴더를 만들어준다.

#6

 

5번에서 만든 templates 폴더 안에

base.html 파일을 생성한다.

탬플릿 상속을 위해서 만드는 것라고 한다.

#7

 

4번에서 생성한 어플리케이션 안에

templates

라는 폴더를 만든다.

#8

 

7번에서 만든 templates 폴더 안에

cars라는 폴더를 만든다.

#9

 

8번에서 만든 cars라는 폴더 안에

 

list.html

delete.html

add.html

 

이렇게 각각의 3개의 파일을 만들어 넣는다.

#10

 

4번에서 생성했던 어플리케이션 폴더 안에 있는

views.py

라는 파일을 통해서 

뷰와 URL 경로를 연결해주는 시작을 할것이다.

 

# Create your views here.

라고 표시된 영역 아래에 함수를 만들어 주자

 

def list(request):
    return render(request, 'cars/list.html')

def add(request):
    return render(request, 'cars/add.html')

def delete(request):
    return render(request, 'cars/delete.html')

#11

 

4번에서 만들었던 어플리케이션 폴더 안에

urls.py라는 파일을 만들어주자.

 

그리고 그 파일안에 코드를 심어주자

 

from django.urls import path
from . import views

app_name = 'cars'

# domain.com/cars/delete

urlpatterns = [

    path('list/', views.list, name='list'),
    path('add/', views.add, name='add'),
    path('delete/', views.delete, name='delete')

]

 

여기까지가 URL 패턴을 사용할 준비가 된 것이다.

#12

 

10번의 views 파일은 단순히 그 안에 정의된 3개의 html을 랜더링 해주는 역할을 한다.

#13

 

2번에서 만들어줬던 프로젝트 파일 뭉텅이 속에 프로젝트명과 동일한 이름의 폴더가 또 하나 더 있을 것이다.

그 폴더 안에는 urls.py라는 파일이 있는데 그걸 열어주자.

 

나의 경우에 경로는

 

my_car_site > my_car_site > urls.py

였다.

 

 

그리고 약간 만져줬다.

 

"""my_car_site URL Configuration



The `urlpatterns` list routes URLs to views. For more information please see:

    https://docs.djangoproject.com/en/4.1/topics/http/urls/

Examples:

Function views

    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')

Class-based views

    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')

Including another URLconf

    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))

"""

from django.contrib import admin
from django.urls import path, include

urlpatterns = [

    path("admin/", admin.site.urls),
    path('cars/', include('cars.urls'))

]

#14

 

4번에서 만든 어플리케이션 폴더 안에있는 apps.py 라는 파일을 열어준다.

그리고 안에 정의되어 있는 class의 이름을 확인하고 복사해준다.

 

나의 경우에는

 

class CarsConfig(AppConfig):
    default_auto_field = "django.db.models.BigAutoField"
    name = "cars"

이렇게 되어있었으며 (import 생략)

이 경우, class의 이름은 class 옆에 있는

CarsConfig

가 된다.

#15

 

1)

13번의 urls.py가 있던 동일한 폴더경로 안에 있는

settings.py 를 열어주자.

2)

INSTALLED_APPS 영역에 있어서 맨 위에 14번에서 가져온 class이름을 함께

어플리케이션이름.apps.클래스이름

이런구조로 코드수정을 해주자.

 

INSTALLED_APPS = [

    'cars.apps.CarsConfig’,
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

]

3)

TEMPLATES

영역이 있다.

여기서 APP_DIRS가 True로 되어있으면

4번과 같이 생성된 어플리케이션 안의 templates폴더에 대해서는

추가 등록을 수행하지 않아도 된다.

4)

3)을 도와줄 기능으로써 ‘이 폴더에서 템플릿을 찾으면 됩니다’

라는 의미의 최상위 디렉토리를 설정해야한다.

이를위해

import 영역에

 

import os

를 추가

 

그리고 다시 3)의 TEMPLATES 영역에 가면

DIRS라는 부분이 있다.

그 부분만

"DIRS": [os.path.join(BASE_DIR, 'templates')],

 

이렇게 수정해준다.

#16

 

1)

base.html에 부트스트랩 네이게이션 바를 설정해야한다.

https://getbootstrap.com/

이동 후 메인페이지에 있는 css, js 기본 API를 가져와서 head 영역의 title위에 붙여준다.

 

base.html은 비어있는 상태이므로

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

코드를 넣고 이것에 css, js API를 넣은 최종 형태는

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    <title>base.html</title>
</head>
<body>
    
</body>
</html>

 

이렇게 된다.

하지만 부트스트랩의 업데이트 등에 따라 이 코드를 고대로 배껴서 하면 작동이 안될 수 있으니

유의.

2)

부트스트랩 홈페이지의

docs - Components - Navbar에 있는 템플릿 중에 한개를 가져온다.

 

최종형태로는

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    <title>base.html</title>
</head>
<body>
    
    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'cars:list' %}">LIST</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'cars:add' %}">ADD</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'cars:delete' %}">DELETE</a>
              </li>
              <li class="nav-item">
              </li>
            </ul>
          </div>
        </div>
      </nav>
{%block content%}
{% endblock %}
</body>
</html>

이런식으로 되었다.

 

위에서도 잠시 말했지만 부트스트랩 코드는 업데이트때마다 변동이 되는게 흔하니

주의 바람.

#17

 

my_car_site > cars > templates > cars

경로에 있는

 

add.html

list.html

delete.html

 

이렇게 3개를 동일한 구조로 만들어줘야한다.

{% extends 'base.html' %}

{% block content  %}

<h1>ADD</h1>
{% endblock  %}

이거를 응용해서 h1 안에 있는 내용만 각각의 html파일에 맞게 변경해주자.

#18

 

터미널에 python manage.py migrate

입력

 

그 후에 python manage.py rumserver

실행으로 중간점검

 

이렇게 열였을때

 

Page not found (404)

가 나와야 정상이라고 한다.

아직 메인페이지를 만든것이 아니기에.

 

정상이라면 

http://127.0.0.1:8000/cars/list/

http://127.0.0.1:8000/cars/add/

http://127.0.0.1:8000/cars/delete/

 

이렇게 3개가 작동하면 된다.

 

- 다음편에 계속

300x250
저작자표시

'개발일지 > Django' 카테고리의 다른 글

Django - admin superuser생성 및 기본 다루기  (0) 2022.10.01
Django - 기본사이클 - 모델과 웹사이트2  (1) 2022.09.30
Django - 데이터베이스 모델 연결하기  (1) 2022.09.30
Django - 동의어, 엔트리 삭제시 메모리값  (1) 2022.09.30
Django - get, filter, Q, lookup, order_by  (1) 2022.09.30

관련글

티스토리툴바