Учебное пособие по Django 3 и пример CRUD с MySQL и Bootstrap

Django 3 выпущен с полной поддержкой асинхронного режима! В этом руководстве мы увидим на примере, как создать приложение CRUD с нуля и шаг за шагом. Мы увидим, как настроить базу данных MySQL, включить интерфейс администратора и создать представления django.

Мы будем использовать Bootstrap 4 для стилизации.

Вы узнаете, как:

• Реализовать операции CRUD
• Настроить и получить доступ к базе данных MySQL
• Создать представления, шаблоны и URL-адреса django
• Стилизовать пользовательский интерфейс с помощью Bootstrap 4

Возможности Django 3

Django 3 имеет множество новых функций, таких как:

• Поддержка MariaDB: Django теперь официально поддерживает MariaDB 10.1+. Вы можете использовать MariaDB через серверную часть MySQL
• Поддержка ASGI для асинхронного программирования
• Django 3.0 обеспечивает поддержку работы в качестве приложения ASGI, что делает Django полностью асинхронным
• Ограничения исключения в PostgreSQL: Django 3.0 добавляет новый класс ExclusionConstraint, который добавляет ограничения исключения в PostgreSQL и т.д.

Предпосылки

Начнем с предварительных условий для этого урока. Чтобы шаг за шагом следовать руководству, вам потребуется несколько требований, например:

• Базовые знания Python
• Знание Django (django-admin.py и manage.py)
• Последняя версия Python 3, установленная в вашей системе (последняя версия - 3.7)
• База данных MySQL установлена в вашей системе.

Мы будем использовать pip и venv, которые входят в состав последних версий Python как модули, поэтому вам не нужно их устанавливать, если вы не работаете со старыми версиями.

Если вы готовы, приступим!

Учебное пособие по Django 3, шаг 1 - Создание базы данных MySQL

На этом этапе мы создадим базу данных mysql для хранения данных нашего приложения.

Откройте новый интерфейс командной строки и запустите клиент mysql следующим образом:

$ mysql -u root -p

Вам будет предложено ввести пароль MySQL, введите его и нажмите Enter.

Затем создайте базу данных, используя следующий оператор SQL:

mysql> create database mydb;

Теперь у нас есть пустая база данных mysql!

Учебное пособие по Django 3, шаг 2 - Инициализация новой виртуальной среды

На этом шаге мы инициализируем новую виртуальную среду для установки наших пакетов проекта отдельно от общесистемных пакетов.

Вернитесь в интерфейс командной строки и выполните следующую команду:

$ python3 -m venv .env

Затем активируйте свою виртуальную среду, используя следующую команду:

$ source .env/bin/activate

На этом этапе нашего руководства у нас есть база данных mysql для хранения данных и создана виртуальная среда для установки пакетов проекта.

Учебное пособие по Django 3, шаг 3 - Установка Django и клиента MySQL

На этом этапе мы установим клиент django и mysql из PyPI с помощью pip в нашей активированной виртуальной среде.

Вернитесь в интерфейс командной строки и выполните следующую команду, чтобы установить пакет django:

$ pip install django

На момент написания этого руководства django-3.0.2 установлен.

Вам также потребуется установить клиент mysql для Python с помощью pip:

$ pip install mysqlclient

Учебное пособие по Django 3, шаг 4 - Инициализация нового проекта

На этом этапе мы инициализируем новый проект django с помощью django-admin.

Вернитесь в интерфейс командной строки и выполните следующую команду:

$ django-admin startproject djangoCrudExample

Затем откройте файл settings.py и обновите параметры базы данных, чтобы настроить базу данных mydb:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql', 
        'NAME': 'mydb',
        'USER': 'root',
        'PASSWORD': '<YOUR_DB_PASSWORD>',
        'HOST': 'localhost',   
        'PORT': '3306',
    }    
}

Затем перенесите базу данных с помощью следующих команд:

$ cd djangoCrudExample
$ python3 manage.py migrate

Вы получите аналогичный результат:

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying sessions.0001_initial... OK

Это просто применяет набор встроенных миграций django для создания некоторых необходимых таблиц базы данных или работы django.

Учебное пособие по Django 3, шаг 5 - Установка django-widget-tweaks

На этом этапе мы установим django-widget-tweaks в нашу виртуальную среду. Вернитесь в интерфейс командной строки и выполните следующую команду:

$ pip insll django-widget-tweaks

Затем откройте файл settings.py и добавьте приложение в установленные приложения:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'widget_tweaks'
]

Учебное пособие по Django 3, шаг 6 - Создание пользователя-администратора

На этом этапе мы создадим пользователя с правами администратора, который позволит нам получить доступ к интерфейсу админки нашего приложения с помощью следующей команды:

$ python manage.py createsuperuser

При появлении запроса укажите желаемое имя пользователя, адрес электронной почты и пароль:

Username (leave blank to use 'ahmed'): 
Email address: ahmed@gmail.com
Password: 
Password (again): 
Superuser created successfully.

Учебное пособие по Django 3, шаг 7 - Создание приложения Django

На этом этапе мы создадим приложение django.

Вернитесь в интерфейс командной строки и выполните следующую команду:

$ python manage.py startapp crudapp

Далее вам нужно добавить его в файл settings.py следующим образом:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'widget_tweaks',
    'crudapp'
]

Учебное пособие по Django 3, шаг 8 - Создание модели (моделей)

На этом этапе мы создадим модель базы данных для хранения контактов.

Откройте файл crudapp/models.py и добавьте следующий код:

from django.db import models


class Contact(models.Model):
    firstName = models.CharField("First name", max_length=255, blank = True, null = True)
    lastName = models.CharField("Last name", max_length=255, blank = True, null = True)
    email = models.EmailField()
    phone = models.CharField(max_length=20, blank = True, null = True)
    address = models.TextField(blank=True, null=True)
    description = models.TextField(blank=True, null=True)
    createdAt = models.DateTimeField("Created At", auto_now_add=True)

    def __str__(self):
        return self.firstName

После создания этой модели вам необходимо создать миграции с помощью следующей команды:

$ python manage.py makemigrations

У вас должен получиться аналогичный результат:

  crudapp/migrations/0001_initial.py
    - Create model Contact

Затем вам необходимо перенести базу данных с помощью следующей команды:

$ python manage.py migrate

У вас должен получиться аналогичный результат:

  Applying crudapp.0001_initial... OK

Учебник по Django 3, шаг 9 - Создание формы

На этом этапе мы создадим форму для создания контакта.

В папке crudapp создайте файл forms.py и добавьте следующий код:

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = "__all__"

Импортируем модель контакта из файла models.py. Мы создали класс под названием ContactForm, унаследовав от Django ModelForms из пакета django.forms и указав модель, которую мы хотим использовать. Мы также указали, что будем использовать все поля в модели контакта. Это позволит нам отображать эти поля в наших шаблонах.

Учебное пособие по Django 3, шаг 10 - Создание представлений

На этом этапе мы создадим представления для выполнения операций CRUD.

Откройте файл crudapp/views.py и добавьте:

from django.shortcuts import render, redirect, get_object_or_404
from .models import Contact
from .forms import ContactForm
from django.views.generic import ListView, DetailView

Затем добавьте:

class IndexView(ListView):
    template_name = 'crudapp/index.html'
    context_object_name = 'contact_list'

    def get_queryset(self):
        return Contact.objects.all()

class ContactDetailView(DetailView):
    model = Contact
    template_name = 'crudapp/contact-detail.html'

Затем добавьте:

def create(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('index')
    form = ContactForm()

    return render(request,'crudapp/create.html',{'form': form})

def edit(request, pk, template_name='crudapp/edit.html'):
    contact = get_object_or_404(Contact, pk=pk)
    form = ContactForm(request.POST or None, instance=post)
    if form.is_valid():
        form.save()
        return redirect('index')
    return render(request, template_name, {'form':form})

def delete(request, pk, template_name='crudapp/confirm_delete.html'):
    contact = get_object_or_404(Contact, pk=pk)
    if request.method=='POST':
        contact.delete()
        return redirect('index')
    return render(request, template_name, {'object':contact})

Учебное пособие по Django 3, шаг 11 - Создание шаблонов

Откройте файл settings.py и добавьте os.path.join(BASE_DIR, 'templates') в массив TEMPLATES:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Это укажет django искать шаблоны в папке шаблонов.

Затем внутри папки crudapp создайте папку шаблонов:

$ mkdir templates

Далее внутри папки шаблонов создайте следующие файлы:

• base.html
• confirm_delete.html
• edit.html
• index.html
• create.html
• contact-detail.html

Запустив следующие команды из корня вашего проекта:

$ mkdir templates
$ cd templates
$ mkdir crudapp
$ touch crudapp/base.html
$ touch crudapp/confirm_delete.html
$ touch crudapp/edit.html
$ touch crudapp/index.html
$ touch crudapp/create.html
$ touch crudapp/contact-detail.html

Откройте файл crudapp/templates/base.html и добавьте:

<!DOCTYPE html>
<html>
<head>
 <title>Django 3 CRUD Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>

Затем откройте файл crudapp/templates/index.html и добавьте:

{% extends 'crudapp/base.html' %}
{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1 col-xs-1 col-sm-1"></div>
        <div class="col-md-10 col-xs-10 col-sm-10">
            <h3 class="round3" style="text-align:center;">Contacts</h3>
        </div>
        <div class="col-md-1 col-xs-1 col-sm-1"></div>
    </div>
    <div class="row">
        <div class="col-md-10 col-xs-10 col-sm-10"></div>
        <div class="col-md-2 col-xs-1 col-sm-1">
            <br />
            <a href="{% url 'create' %}">
                <button type="button" class="btn btn-success">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </a>
        </div>
    </div>
    <br />
    {% for contact in contact_list %}
    <div class="row">
        <div class="col-md-1 col-xs-1 col-sm-1"></div>
        <div class="col-md-7 col-xs-7 col-sm-7">
            <ul class="list-group">

                <li class="list-group-item ">
                    <a href="{% url 'detail' contact.pk %}"> {{ contact.firstName }} {{contact.lastName}} </a> <span class="badge"></span>
                </li>
            </ul>
            <br>
        </div>
        <div class="col-md-1 col-xs-1 col-sm-1">
            <a href="{% url 'detail' contact.pk %}">
                <button type="button" class="btn btn-info">
                    <span class="glyphicon glyphicon-open"></span>
                </button>
            </a>
        </div>
        <div class="col-md-1">
            <a href="{% url 'edit' contact.pk %}">
                <button type="button" class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>
            </a>
        </div>
        <div class="col-md-1">
            <a href="{% url 'delete' contact.pk %}">
                <button type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </a>
        </div>
        <div class="col-md-1 col-xs-1 col-sm-1"></div>
    </div>
    {% endfor %}
</div>
{% endblock %}

Затем откройте файл crudapp/templates/create.html и добавьте:

{% load widget_tweaks %}
<!DOCTYPE html>
<html>

<head>
    <title>Posts</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
        <style>
    </style>
    </style>

</head>

<body>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1 col-xs-1 col-sm-1"></div>

            <div class="col-md-10 col-xs-10 col-sm-10 ">
                <br />
                <h6 style="text-align:center;">
                    <font color="red"> All fields are required</font>
                </h6>
            </div>
            <div class="col-md-1 col-xs-1 col-sm-1">
            </div>
        </div>
        <div class="row">
            <div class="col-md-1 col-xs-1 col-sm-1"></div>
            <div class="col-md-10 col-xs-10 col-sm-10">
                <form method="post" novalidate>
                    {% csrf_token %}
                    {% for hidden_field in form.hidden_fields %}
                    {{ hidden_field }}
                    {% endfor %}
                    {% for field in form.visible_fields %}
                    <div class="form-group">
                        {{ field.label_tag }}
                        {% render_field field class="form-control" %}
                        {% if field.help_text %}
                        <small class="form-text text-muted">{{ field.help_text }}</small>
                        {% endif %}
                    </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary">post</button>
                </form>
                <br>
            </div>
            <div class="col-md-1 col-xs-1 col-sm-1"></div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>

</html>

Затем откройте файл crudapp/templates/edit.html и добавьте:

{% load widget_tweaks %}
<!DOCTYPE html>
<html>

<head>
    <title>Edit Contact</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
        <style>
    </style>
    </style>

</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1 col-xs-1 col-sm-1"></div>
        <div class="col-md-10 col-xs-10 col-sm-10 ">
            <br />
            <h6 style="text-align:center;">
                <font color="red"> All fields are required</font>
            </h6>
        </div>
        <div class="col-md-1 col-xs-1 col-sm-1">
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-1 col-sm-1"></div>
        <div class="col-md-10 col-xs-10 col-sm-10">
            <form method="post" novalidate>
                {% csrf_token %}
                {% for hidden_field in form.hidden_fields %}
                {{ hidden_field }}
                {% endfor %}
                {% for field in form.visible_fields %}
                <div class="form-group">
                    {{ field.label_tag }}
                    {% render_field field class="form-control" %}
                    {% if field.help_text %}
                    <small class="form-text text-muted">{{ field.help_text }}</small>
                    {% endif %}
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary">submit</button>
            </form>
            <br>
        </div>
        <div class="col-md-1 col-xs-1 col-sm-1"></div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Затем откройте файл crudapp/templates/confirm_delete.html и добавьте:

{% extends 'crudapp/base.html' %}
{% block content %}
<div class="container">
    <div class="row"></div>
    <br />
    <div class="row">
        <div class="col-md-2 col-xs-2 col-sm-2"></div>
        <div class="col-md-10 col-xs-10 col-sm-10">
            <form method="post">
                {% csrf_token %}
                <div class="form-row">
                    <div class="alert alert-warning">
                        Are you sure you want to delete {{ object }}?
                    </div>
                </div>
                <button type="submit" class="btn btn-danger">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

Учебное пособие по Django 3, шаг 12 - Создание URL-адресов

На этом этапе мы создадим URL-адреса для доступа к нашим представлениям CRUD.

Перейдите в файл urls.py и обновите его следующим образом:

from django.contrib import admin
from django.urls import path
from crudapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('contacts/', views.IndexView.as_view(), name='index'),
    path('contacts/<int:pk>/', views.ContactDetailView.as_view(), name='detail'),
    path('contacts/edit/<int:pk>/', views.edit, name='edit'),
    path('contacts/create/', views.create, name='create'),
    path('contacts/delete/<int:pk>/', views.delete, name='delete'),
]

Учебное пособие по Django 3, последний шаг - запуск локального сервера разработки

На этом этапе мы запустим локальный сервер разработки для игры с нашим приложением без его развертывания в Интернете.

Вернитесь в интерфейс командной строки и выполните следующую команду:

$ python manage.py runserver

Затем перейдите по адресу http://localhost:8000/ в веб-браузере.

Заключение

В этом руководстве по django 3 мы инициализировали новый проект django, создали и перенесли базу данных MySQL и построили простой интерфейс CRUD.

https://www.techiediaries.com/django/django-3-tutorial-and-crud-example-with-mysql-and-bootstrap/

Вернуться на верх