연락처 양식으로 간단한 Django 사이트를 만들고 수신된 정보를 데이터베이스에 저장

저는 PyCharm 커뮤니티를 사용할 것입니다. 좋아하는 코드 편집기를 사용할 수 있습니다. 다음 명령을 사용하여 가상 환경을 활성화합니다.
source projectvenv/bin/activate
장고 설치:
pip3 install Django
새 Django 프로젝트는 django-admin startproject 명령으로 생성됩니다(프로젝트 이름을 직접 선택).
django-admin startproject projectsite
애플리케이션은 python3 manage.py startapp 명령으로 생성됩니다(프로젝트 이름을 직접 선택).
python3 manage.py startapp mysite
우리 프로젝트의 구조:



Django 웹 서버를 시작합시다:
python3 manage.py runserver


새로 생성된 어플리케이션을 프로젝트에 등록해 봅시다. 구성 패키지에서 settings.py 파일을 찾아 텍스트 편집기에서 열고 다음 코드 스니펫을 찾으십시오.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mysite', #new app
]

이제 모델을 만들어 봅시다. models.py 파일을 열고 다음 코드를 추가해 보겠습니다.

from django.db import models


class Task(models.Model):
    title = models.CharField(max_length=50)
    task = models.TextField()

    def __str__(self):
        return self.title


class Note(models.Model):
    title = models.CharField(max_length=50)
    task = models.TextField()

    def __str__(self):
        return self.title


class About(models.Model):
    title = models.CharField(max_length=50)
    task = models.TextField()

    def __str__(self):
        return self.title


class Contact(models.Model):
    email = models.EmailField()
    subject = models.CharField(max_length=255)
    message = models.TextField()

    def __str__(self):
        return self.email

CharField - 작은 크기에서 큰 크기의 문자열에 대한 문자열 필드입니다.
TextField - 큰 텍스트 필드입니다. 이 필드의 기본 양식 위젯은 Textarea입니다.
EmailField - EmailValidator를 사용하여 값이 유효한 이메일 주소인지 확인하는 CharField입니다.

다음으로 다음 명령을 사용하여 마이그레이션을 생성하고 실행합니다.
python3 manage.py makemigrations

python3 manage.py migrate


이제 관리자 패널을 사용할 수 있습니다. 그러나 이를 위해서는 사용자가 필요합니다. 다음과 같이 생성할 수 있습니다: python manage.py createsuperuser. 그런 다음 서버를 시작하고 http://127.0.0.1:8000/admin/ . 당신은 볼 수 있습니다:



그런 다음 mysite 앱의 admin.py 파일을 열고 다음 코드를 추가해 보겠습니다.

from django.contrib import admin
from .models import Task, Note, About, Contact

admin.site.register(Task)
admin.site.register(Note)
admin.site.register(About)
admin.site.register(Contact)

결과는 다음과 같습니다.



mysite 애플리케이션 디렉토리에 forms.py를 생성해 보겠습니다.

from django.forms import ModelForm
from .models import Contact


class ContactForm(ModelForm):
    class Meta:
        model = Contact
        fields = '__all__'

mysite 앱의 views.py를 열고 다음 코드를 추가해 보겠습니다.

from django.shortcuts import render
from .models import Task, Note, About
from .forms import ContactForm


def index(request):
    tasks = Task.objects.all()
    return render(request, 'index.html', {'tasks': tasks})


def about(request):
    self = About.objects.all()
    return render(request, 'about.html', {'self': self})


def blog(request):
    notes = Note.objects.all()
    return render(request, 'blog.html', {'notes': notes})

def contact_view(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()
            return render(request, 'success.html')
    form = ContactForm()
    context = {'form': form}
    return render(request, 'contacts.html', context)

mysite 애플리케이션 디렉토리에 urls.py를 생성해 보겠습니다.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='home'),
    path('about', views.about, name='about'),
    path('blog', views.blog, name='blog'),
    path('contact', views.contact_view, name='contacts'),
]

projectsite 디렉토리의 urls.py를 열고 다음 코드를 추가해 보겠습니다.

from django.contrib import admin
from django.urls import path, include
from mysite import views as contact_views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('mysite.urls')),
    path('contacts/', contact_views.contact_view, name='contacts'),
]

settings.py를 열고 다음 코드를 추가해 보겠습니다.

import os
...
STATICFILES_DIRS = [
   os.path.join(BASE_DIR, "static"),
]

정적 디렉토리를 생성하고 그 안에 contact.css 파일을 생성해 보겠습니다.

input[type=text], input[type=email], textarea {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
}

템플릿 폴더를 만들고 거기에 다음을 만듭니다.

base.html

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link href="{% static "/contact.css" %}" rel="stylesheet">
    <title>MySite{% block title %}{% endblock title %}</title>
</head>
<body>
    <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
        <span class="fs-4">MySite</span>
      </a>

      <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
        <a class="me-3 py-2 text-dark text-decoration-none" href="/">Home</a>
        <a class="me-3 py-2 text-dark text-decoration-none" href="/blog">Blog</a>
        <a class="me-3 py-2 text-dark text-decoration-none" href="/about">About</a>
        <a class="me-3 py-2 text-dark text-decoration-none" href="/contacts">Contact</a>
      </nav>
    </div>

        <div class="container">
        {% block content %}

        {% endblock content %}
        </div>

</body>
</html>

index.html

{% extends 'base.html' %}
{% block content %}
    {% for el in tasks %}
        <div class="container">
        <h3>{{ el.title }}</h3>
        <p>{{ el.task }}</p>
        </div>
    {% endfor %}

{% endblock content %}

블로그.html

{% extends 'base.html' %}
{% block content %}

    {% for el in notes %}
        <div class="container">
        <h3>{{ el.title }}</h3>
        <p>{{ el.task }}</p>
        </div>
    {% endfor %}

{% endblock content %}

연락처.html
(여기서는 csrf_token을 사용하는데, cross-site 요청 위조 방지를 위해 필요하며 각 내부 폼에서 사용해야 함)

{% extends 'base.html' %}
{% block content %}

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

{% endblock content %}

about.html

{% extends 'base.html' %}
{% block content %}
    {% for el in self %}
        <div class="container">
        <h3>{{ el.title }}</h3>
        <p>{{ el.task }}</p>
        </div>
    {% endfor %}
{% endblock content %}

성공.html

<h1>We have received your letter</h1>
<p>We will consider it and we will answer you.</p>

Django 서버를 시작하고 사이트의 관리자 패널로 이동한 다음 작업 섹션으로 이동합니다. 필드를 채우고 저장합니다.



우리의 항목은 홈 섹션의 웹사이트에 표시됩니다.



연락처 섹션을 열고 다음을 입력합니다.



전송 후 화면에 다음 메시지가 나타납니다.



사이트의 관리 패널로 이동한 다음 연락처 섹션으로 이동하면 메시지를 볼 수 있습니다.





이것으로 튜토리얼 프로젝트가 끝났습니다.