🐷전동준(Jeon DongJun)

Go with the flow

[Django]장고 복습 2

Django 복습 2️⃣


알고가면 좋은 상식들

  • path('경로', views.기능) 은 javascript의 onclick 같은 콜백기능을 수행한다.
    • path에 들어가는 경로는 요청받는 경로다. '' 아무것도 받지 않은 상태는 http://127.0.0.1:8000/를 나타냄.
  • 장고는 프레임워크다. 프레임워크란?
    • 프로그램을 만들 때 공통적인 부분을 미리 만들어 놓고 내가 원하는 부분만 채우면 완성될 수 있도록 만들어 놓은 코드 더미
  • ctrl단축키를 누르고 코드들을 눌러보면 그것들이 어떻게 만들어 졌는지 더 상세하게 볼 수 있다.
  • HttpResponse() : http규약에 맞춰 응답해줘. 라는 뜻
  • 구현할 templates를 먼저 작성하고 -> views.py -> urls.py 순으로 코딩을해도 편하다.(이 포스팅에서는 그 방식을 사용할 것이다.)
  • 경로
    • / : root(나를 품고 있는 제일 상위 위치)
    • ./ : 현재 위치(내가 존재하는)
    • ../ : 내 기준으로 상위 디렉토리
    • 경로 지정할 때 내 기준인지 밑으로 들어가는 건지 잘 생각해야한다.
    • ex)
      • /test : 나와 같은 경로(위치)에 있는 test
      • /test/ : test의 하위에 있는 상태
  • django 공식 홈페이지 Documentation : https://docs.djangoproject.com/en/4.0/

복습 1 게시물 이어서 계속..

  • hello01(App)의 views.py에 내용 추가

    • def test(request):
    return HttpResponse("<h1><a href='/hello01'>return</a></h1>")
    • hello01 앱의 urls.py에서 views.test로 요청받으면 위 내용의 태그들을 반환한다.

  • hello01(App)의 urls.py에 내용 추가

    • path('test/',views.test),
    • localhost/test/ 경로로 요청을 받으면, views.py로 요청을 보낸다.

그렇다면, 127.0.0.1:8000/hello01/my/ 라고 요청했을 때 <h1>자기이름</h1>이 나오게 만들어보자.

  • hello01(App)의 urls.py에 내용 추가

    • path('my/', views.my),

  • hello01(App)의 views.py에 내용 추가

    • def my(request):
    return HttpResponse("<h1>전동준</h1>")

  • 확인

    • image

Templates

  • 이제 요청에 대한 응답을 그려주는 곳인 templates에 대해서 알아보자.

  • django-admin startproject tags 입력해서 tags라는 프로젝트 생성

  • tags(App)에 settings.py로 가보자

  • from pathlib import path를 이용해

  • Path(_ _ file _ _ ) : 현재 파일의 경로를 잡아줌

  • Path(_ _ file _ _ ).resolve().parent.parent

    • settings.py의 상위 상위니깐 tags(Pj) 를 가리킴

  • BASE_DIR에는 프로젝트의 절대경로가 들어가 있다.

  • 밑으로 가서 TEMPLATES를 보자

  • 그 안의 DIRS의 경로를 잡아준다.

  • 'DIRS': [BASE_DIR/'templates'],
    • “그 폴더가 장고에서 사용할 templates 폴더다.”를 설정해준 것

  • 해당 프로젝트 하위에 templates라는 폴더를 만듦

  • tags 프로젝트 하위에 templates 폴더를 생성해준다.

  • image

변수 사용

  • template 폴더 안에 index.html 파일 생성(html5로)

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  
    <h1>Hello, {{ name }} </h1>
  
</body>
</html>

  • {{name}} name이라는 변수가 있어 동적인 파일이다.

  • {{변수}} : https://docs.djangoproject.com/en/4.0/ref/templates/language/

  • 왜냐하면, 변수 값에 따라 값이 바뀌니깐.

  • tags(App) 하위에 views.py 생성 후 내용 작성

    • from django.shortcuts import render
    
def index(request):
    return render(request, 'index.html', {'name': 'dongjun'})
# 요청이 있을 시에 index.html의 name이라는 변수에 donjgun이 나오도록 그려(render)서 전달할 것이다.라는 뜻이다.

  • render 그려주기 호출

    • from django.shortcuts import render

  • tags(App)의 urls.py로 가서 내용 작성

    • from django.contrib import admin
from django.urls import path
from . import views
    
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index),
]

    • 같은 위치에 있는 views를 불러오고(import)

    • 경로의 변화가 없는 요청이라(http://127.0.0.1:8000/)면 views의 index로 처리하게만든다.

  • tags 프로젝트로 경로 잡고, python manage.py runserver 후 확인(서버 실행)

    • image


잠깐 Tip

  • Server Side Rendering(SSR)
    • Backend
    • 요청이 들어오면 서버에서 그려서 응답해주는 방식
  • Client Side Rendering(CSR)
    • Frontend
    • 요청이 들어오면 서버에서 데이터(Restful)를 응답해주고 응답된 데이터를 받아 클라이언트에서 그려지는 방식


리스트 사용

  • tags 프로젝트 밑에 var라는 앱 생성

  • python manage.py startapp var

  • image

  • templates 폴더 밑에 var라는 폴더 생성

  • 그리고 그 var 폴더 안에 index.html 생성

  • image

  • index.html 안에 내용추가

  • <a href="var01/">var01</a>
    <br/>

  • variables01.html 도 생성 후 내용 추가

  • <h1>{{ lst.0 }}</h1>
<p>{{ lst.1 }}</p>
    • lst라는 리스트의 0과1(인덱스) 값을 갖고 올거임

  • var(App)의 views.py로 가서 작성

  • from django.shortcuts import render
  
# Create your views here.
def index(request):
    return render(request, "var/index.html")
# index라는 요청을 받으면 templates/var/index.html을 그려줄 것이다.
  
def variables01(request):
    my_list = ['python', 'django', 'templates']
    return render(request, "var/variables01.html", {"lst": my_list})
# variables01이라는 요청을 받으면 my_list를 lst라는 변수에 보내줄 것

  • var(App) 밑에 urls.py를 생성 후 작성

  • from django.urls import path
from . import views
  
  
urlpatterns = [
    path('', views.index),
    path('var01/', views.variables01),
]

  • 그리고 tags(App)의 urls.py 에 var(App)의 url을 연결해줘야한다.

  • tags(App)의 urls.py로 가서 코드 수정

  • from django.contrib import admin
from django.urls import path, include
from . import views
  
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index),
    path('var/', include('var.urls')),
]

  • templates 폴더 바로 밑의 index.html로 가서 작성

  • <a href="var/"></a>
<br>

  • 서버 실행하고 확인

  • image

  • image

  • image

딕셔너리

  • templates 폴더 밑에 var폴더 밑에 variables02.html을 생성

  • 바디 태그에 <h1>{{dct.class}} 반 {{dct.name}} 님 환영합니다!</h1> 작성

  • var(App)의 views.py로 가서 해당내용 작성

  • def variables02(request):
    my_dict = {'class' : 'multi', 'name': 'hong-gd'}
    return render(request, 'var/variables02.html', {'dct': my_dict})

  • var(App)의 urls.py로 이동 후 작성

  • path('var02/', views.variables02),

  • templates 폴더 하위의 var폴더 하위의 index.html로 가서 작성

  • <a href="var02/">var02</a>
<br>

  • 결과 확인

  • image

  • image

for

  • templates/var 폴더에 forloop.html 생성

  • 바디태그에 내용 작성

  • {% for i in number %}
<p>{{i}}</p>
{% endfor %}
  
# 서버에서 만들어준 것을 가지고 응답해주고 있는 것
# 그래서 동적이다.

  • {% 명령문 %} 사용 시에는 {% end명령문 %}라고 꼭 적어줘야함.

  • var(App)의 views.py로 가서 작성

  • def for_loop(request):
    return render(request, 'var/forloop.html', {"number": range(1, 11)})

  • 장고가 가진 기본 템플릿에서는 파이썬의 for i in range가 안먹히기 때문에 views에서 만들어서 보내줘야함.

  • var(App)의 urls.py로 이동 후 작성

  • path('forloop/', views.for_loop),

  • templates/var 폴더의 index.html 실행 후 작성

  • <a href="forloop">forloop</a>
<br>

  • localhost/var/forloop/ 서버 확인

  • image

if

  • if명령문 해보자

  • templates/var 폴더 안에 if01.html 생성 후 작성

  • {% if user.id %}
<h1>Hello, {{ user.id }}</h1>
{% endif %}

  • var(App)의 views.py로 가서 작성

  • def if01(request):
    return render(request, 'var/if01.html', {"user": {'id': 'kim-sd', 'job': 'student'}})

  • var(App)의 urls.py로 가서 작성

  • path('if01/', views.if01),

  • templates/var 폴더의 index.html에 작성

  • <a href="if01/">if01</a>

  • 서버실행 후 확인

  • image


  • if 한번 더 해보자.

  • templates/var 폴더에 if02.html 생성 후 작성

  •     {% if role == 'admin' %}
    <!-- role이 admin 이라면 -->
    <h1>Admin Page</h1>
    <a href="#">user list</a><br>
    <a href="#">user delete</a>
    {% elif role == 'manager' %}
    <!-- 그게 아니라 role이 manager 라면-->
    <h1>Manage Page</h1>
    <a href="#">user list</a>
    {% else %}
    <!-- 모두 아니라면 -->
    <h1>User Page</h1>
    <a href="#">my</a>
    {% endif %}

  • var(App)의 views.py에 가서 작성

  • def if02(request):
    return render(request, 'var/if02.html', {"role": "manager", "id": "multi"})

  • var(App)의 urls.py에 가서 작성

  • path('if02/', views.if02),

  • templates/var 의 index.html로 가서 작성

  • <a href="if02/">if02</a>

  • 서버 실행 후 확인

  • image

href

  • href기능 사용해보자

  • templates/var 폴더에 href.html을 생성 후 작성

  • <a href="{% url 'index' %}">go index</a>
    • name = ‘index’인 것을 찾아라. 라는 뜻

  • var(App)의 views.py로 가서 작성

  • def href(request):
    return render(request, 'var/href.html')

  • var(App)의 urls.py로 가서 작성

  • path('href/', views.href),

  • 그리고 기존의 index.html로 연결시켜주는 코드에 name=’index’ 추가

  • path('', views.index, name='index'),

  • templates/var 폴더의 index.html로 가서 작성

  • <a href="href/">href</a>

  • 서버 작동 후 확인

  • image

  • image

  • var 앱의 index.html로 보내주는 것을 확인

GET & POST

  • get과 post

  • templates/var 폴더 안에 get.html , post.html 생성

  • get.html에 작성

    • <h1>GET</h1>

  • post.html에 작성

    • <h1>POST</h1>

  • var(App)의 views.py로 이동 후 작성

    • from django.shortcuts import rende, redirect

    • def get_post(request):
    if request.method == 'GET':
        return render(request, 'var/get.html')
    elif request.method == 'POST':
        return render(request, 'var/post.html')
    else:
        return redirect('index')
    • 만약 요청 방식이 겟이면 get.hmtl로, 포스트 방식이면 post.html, 둘다 아니라면 ‘index’로 redirect

  • var(App)의 urls.py로 이동 후 작성

    • path('request/', views.get_post),

  • var(App)의 index.html로 이동 후 작성

    • <form action="request/" method="post">
    <input type="submit" value="post">
</form>

  • 확인해보면 get방식은 잘 되는데 post는 안된다.(403 forbidden 에러)

  • 그래서 index.html의 form 태그 안의 내용 수정

    • <form action="request/" method="post">{% csrf_token %}
    <input type="submit" value="post">
</form>

  • submit버튼(post) 클릭 후 확인

    • image

Statics

CSS

  • tag 프로젝트에 새로운 statics(App) 생성

  • python manage.py startapp statics

  • tag(App)의 setting.py로 가서 static에 대한 설정 작성

  • STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR/'static']
# 스태틱 파일들이 들어갈 경로다.

  • tags 프로젝트 밑에 static 폴더 생성

  • static 폴더 밑에 style.css 생성

  • image

  • style.css에 작성

    • h1{
    color: red;
}

  • templates 폴더 밑에 statics라는 폴더 생성하고 그 안에 index.html 생성

  • image

  • templates/statics 폴더의 index.html에 내용 작성

    • <head>
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
    
    <h1>Django Static</h1>
    
</body>
    • link는 다른 파일과 연결하는 태그

  • statics(App)의 views.py로 이동 후 작성

    • def index(request):
    return render(request, 'statics/index.html')

  • statics(App)에 urls.py 생성 후 작성

    • from django.urls import path
from . import views
    
    
urlpatterns = [
    path('', views.index),
]

  • tag(App)안의 urls.py로 가서 statics(App)의 urls.py과 연결

    • path('statics/', include('statics.urls')),

  • templates 바로 하위의 index.html에 내용 작성

    • <a href="statics/">static files</a>

  • 서버 작동 후 확인해보면 syntax error

    • image

  • 장고 documentation 참고 : https://docs.djangoproject.com/en/4.0/howto/static-files/deployment/

    • 이유를 찾았다.
    • 정적 파일을 구성하려면 django.contrib.staticfiles에 포함 되어있는지 확인해야한다.
    • 아까 설정파일에서 STATIC_URL을 지정해줬다.
    • 그리고 중요한 점은 템플릿에서 static tamplates tag를 사용해서 정적 저장소를 구성해줘야한다는 것이다.
    • image
    • https://docs.djangoproject.com/en/4.0/howto/static-files/

  • templates/statics 폴더의 index.html로 가서 내용을 추가해주자.

    • <head>
     {% load static %} <!--이게 정적 탬플릿 태그-->
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>

  • 서버 가동 후 확인

    • image

javascripts

  • javascript도 적용해보자.

  • tags 프로젝트 하위의 static 폴더에 test.js 생성 후 작성

    • image

    • onload=function(){
    alert("js!");
}

  • templates/statics 폴더 안에 index.html에 내용 작성

    • <head>
    <script src="{% static 'test.js' %}"></script>
</head>

  • 확인

    • image

Database

SQLite

  • 프로젝트 새로 생성
    • django-admin startproject dbtest
  • SQLite : 굉장히 가벼운 데이터베이스
  • 다운로드 : https://www.sqlite.org/download.html
    • 나는 윈도우 유저
    • image
    • 압축을 풀면 파일 3개가 있다.
    • 그 중 sqlite3.exe만 사용할 것
    • 생성한 dbtest 프로젝트 폴더 안에 sqlite3.exe을 이동
  • 프로젝트에 경로 잡고(cd dbtest)
  • python manage.py migrate
    • image
  • sqlite3 db.sqlite3
    • 프로젝트 내에서 sqlite3 실행
  • .table
    • 이 프로젝트 안의 테이블을 보여줌
  • .exit
    • sqlite 종료

  • dbtest 프로젝트 안의 dbtest(App) 밑에 models.py 생성 후 작성

    • from django.db import models
# 장고가 갖고있는 db라는 기능 중 models를 불러옴
    
    
class MyBoard(models.Model):
    myname = models.CharField(max_length=100)
    mytitle = models.CharField(max_length=500)
    mycontent = models.CharField(max_length=2000)
    mydate = models.DateTimeField()

  • dbtest(App)의 settings.py로 이동 후 INSTALLED_APPS 수정

    • INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dbtest',
]
    • dbtest 앱을 추가

  • models.py에 클래스를 만들어 놓았는데, 이 클래스를 django안의 manager가 테이블로 변환시켜 database로 보낸다.

  • python manage.py makemigrations dbtest 명령

    • Migrations for 'dbtest':
  dbtest\migrations\0001_initial.py
    - Create model MyBoard
    • image

  • 0001_initial.py를 확인해보면 id(primary key)가 자동으로 생성되어있음(지정하지 models.py에서 설정하지 않았을 때)

  • python manage.py sqlmigrate dbtest 0001 로 한번 확인해보자.

    • BEGIN;
--
-- Create model MyBoard
--
CREATE TABLE "dbtest_myboard" ("id" integer NOT NULL PRIMARY KEY AUTOINCREMENT, "myname" varchar(100) NOT NULL, "mytitle" varchar(500) NOT NULL, "mycontent" varchar(
2000) NOT NULL, "mydate" datetime NOT NULL);
COMMIT;
    • 테이블을 만들고 컬럼의 속성들을 지정해주는 것을 확인할 수 있음.

  • python manage.py migrate

    • Operations to perform:
  Apply all migrations: admin, auth, contenttypes, dbtest, sessions
Running migrations:
  Applying dbtest.0001_initial... OK

    • dbtest 0001이 실행되었다고 한다.

    • models.py를 통해서 만들어진 Model을 db에 실제로 적용시켜주는 것

  • sqlite3 db.sqlie3

    • sqlite3 실행

  • .table

    • 테이블을 확인하면 dbtest_myboard가 생성된 것을 확인할 수 있다.
    • image

  • python manage.py shell

    • 파이썬 쉘 파일 사용

  • from dbtest.models import MyBoard

  • from django.utils import timezone

  • test = MyBoard(myname='testuser', mycontent='test 1234', mydate=timezone.now())

  • type(test)

    • MyBoard라는 객체가 하나 생성

  • test.save()

  • MyBoard.objects.all()

    • select * from MyBoard 라고 생각하면 된다.

    • <QuerySet [<MyBoard: MyBoard object (1)>]>
    • 하나만 만들었기 때문에 하나만 나옴

  • exit() 종료

  • dbtest/dbtest/templates 폴더 생성 후 그 안에 index.html 생성

  • index.html 안에 내용 작성

    • <body>
    
    <h1>Hello, Django (with sqlite3)</h1>
    
    <table border="1">
        <col width="50" />
        <col width="100" />
        <col width="500" />
        <col width="100" />
        <tr>
            <th>번호</th>
            <th>작성자</th>
            <th>제목</th>
            <th>작성일</th>
        </tr>
        {% if not list %}
        <tr>
            <th colspan="4">--------------작성된 글이 없습니다.-------------</th>
        </tr>
        {% else %}
            {% for data in list %}
                <tr>
                    <td>{{ data.id }}</td>
                    <td>{{ data.myname }}</td>
                    <td><a href="#">{{ data.mytitle }}</a></td>
                    <td>{{ data.mydate }}</td>
                </tr>
            {% endfor %}
        {% endif %}
        <tr>
            <td colspan="4" align="right">
                <input type="button" value="글작성" onclick=""/>
            </td>
        </tr>
    </table>
    
</body>

  • dbtest(App) 폴더에 views.py 생성후 내용 작성

    • image

    • from django.shortcuts import render
from .models import MyBoard
    
def index(request):
    return render(request, 'index.html', {'list' : MyBoard.objects.all()})

  • dbtest(App)의 urls.py 이동 후 내용 작성

    • from django.contrib import admin
from django.urls import path
from . import views
    
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
]

  • 서버 실행해서 확인해보면 이뿌게 나온당헿

    • image

2022

[web]jQuery 복습 3

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

13 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

14 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

5 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

10 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑