Привіт, Гість

dsoft blog

Повний посібник з роботи з моделями Django, використання адміністративної панелі та створення сайту з мапою Folium

Published by ds

У цій статті ми розглянемо детальні інструкції щодо роботи з моделями в Django, використання адміністративної панелі та створення веб-сайту з мапою Folium та маркерами кафе. Ми покажемо вам, як визначити модель даних у Django, налаштувати адміністративну панель для зручного керування даними, а також як використовувати бібліотеку Folium для створення інтерактивної карти

Визначення моделі даних: Почнемо з визначення моделі даних для нашого проекту. Відкрийте файл models.py вашого Django-проекту та додайте наступний код:

from django.db import models

class Shop(models.Model):
    id = models.IntegerField(primary_key=True)
    type = models.CharField(max_length=255)
    address = models.CharField(max_length=255)
    name = models.CharField(max_length=255)
    coor = models.CharField(max_length=255)
    har = models.CharField(max_length=255)

    class Meta:
        db_table = 'shop'

У цьому коді ми визначаємо модель Shop, яка має поля id, type, address, name, coor та har. Використовуючи різні типи полів, ми можемо зберігати різні атрибути кафе, такі як тип, адреса, назва, координати та характеристика. Meta-клас дозволяє налаштувати назву таблиці в базі даних.

  1.  

Цей код дозволяє створити веб-сторінку з мапою Folium, на якій будуть відображені маркери кафе згідно з даними з бази даних. Кожен маркер міститиме спливаюче вікно з інформацією про кафе.

Налаштування Docker для Django-проекту: Переконайтеся, що ви маєте Docker встановлено на вашому комп'ютері. Перейдіть до кореневої папки вашого Django-проекту та відкрийте файл з ім'ям Dockerfile. Відкрийте його у текстовому редакторі та додайте наступний вміст:

# Використовуємо базовий образ Python
FROM python:3.9

# Встановлюємо залежності проекту
COPY requirements.txt /app/requirements.txt
WORKDIR /app
RUN pip install -r requirements.txt

# Копіюємо всі файли проекту у контейнер
COPY . /app

# Виконуємо команду для створення міграцій та запуску сервера Django
CMD python manage.py makemigrations && python manage.py migrate && python manage.py runserver 0.0.0.0:8000

У цьому Dockerfile ми налаштовуємо базовий образ Python, копіюємо файли проекту, встановлюємо залежності та запускаємо команди для створення міграцій та запуску сервера Django.

  1. Налаштування Django для відображення мапи з маркерами кафе: У вашому Django-проекті відкрийте файл views.py та додайте наступний код:

from django.shortcuts import render
import folium
from .models import Shop

def map_cafes(request):
    cafes = Shop.objects.all()

    m = folium.Map(location=[49.8397, 24.0297], zoom_start=12)

    for cafe in cafes:
        popup_text = f"Name: {cafe.name}<br>Type: {cafe.type}<br>Address: {cafe.address}"
        popup = folium.Popup(popup_text, max_width=250)
        folium.Marker([float(cafe.coor.split(',')[0]), float(cafe.coor.split(',')[1])], popup=popup).add_to(m)

    map_html = m.get_root().render()

    return render(request, 'map.html', {'map_html': map_html})
У цьому коді ми отримуємо всі кафе з бази даних за допомогою Shop.objects.all(). Далі створюємо об'єкт Map з використанням Folium та вказуємо початкові координати та рівень масштабування. Для кожного кафе ми створюємо маркер з відповідним текстом, який відображатиметься при кліку на маркер, та додаємо його до мапи. Останнім кроком ми рендеримо мапу у HTML-код за допомогою get_root().render() та передаємо його в шаблон map.html разом з контекстом.

Детальний опис коду:

  1. cafes = Shop.objects.all(): Запит до бази даних Django для отримання всіх записів кафе з моделі Shop.

  2. m = folium.Map(location=[49.8397, 24.0297], zoom_start=12): Створення об'єкту карти Folium з початковими координатами [49.8397, 24.0297] та рівнем масштабування zoom_start=12.

  3. for cafe in cafes:: Цикл для проходження через кожен запис кафе.

  4. popup_text = f"Name: {cafe.name}<br>Type: {cafe.type}<br>Address: {cafe.address}": Формування тексту для спливаючого вікна маркера кафе, який містить назву, тип та адресу кафе.

  5. popup = folium.Popup(popup_text, max_width=250): Створення об'єкту спливаючого вікна маркера з текстом popup_text та максимальною шириною max_width=250.

  6. folium.Marker([float(cafe.coor.split(',')[0]), float(cafe.coor.split(',')[1])], popup=popup).add_to(m): Створення маркера з координатами кафе, які розбиті за допомогою .split(',') та перетворені у числовий формат. Маркер додається до карти m зі спливаючим вікном popup.

  7. map_html = m.get_root().render(): Отримання HTML-коду карти Folium за допомогою .get_root().render().

  8. return render(request, 'map.html', {'map_html': map_html}): Передача HTML-коду карти в шаблон map.html разом з контекстом { 'map_html': map_html } для відображення на сторінці.

Для зручного керування даними моделі Shop ми можемо налаштувати адміністративну панель Django. Відкрийте файл admin.py вашого Django-проекту та додайте наступний код:

from django.contrib import admin from .models import Shop admin.site.register(Shop)

Створення шаблону для відображення мапи: У папці templates вашого Django-проекту створіть файл з ім'ям map.html та додайте наступний код.

<!DOCTYPE html>
<html>
<head>
    <title>Cafes Map</title>
    <meta charset="utf-8">
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map">{{ map_html|safe }}</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Додатковий JavaScript код, якщо необхідно
        });
    </script>
</body>
</html>

Додамо необхідні кроки щодо налаштування urls.py у вашому Django-проекті.

  1. Відкрийте файл urls.py вашого Django-проекту та додайте наступний код:
from django.urls import path
from .views import map_cafes

urlpatterns = [
    path('map/', map_cafes, name='map'),
]

 

У цьому коді ми визначаємо шлях /map/, який буде відповідати функції map_cafes у файлі views.py.

  1. Для побудови та запуску контейнера Docker виконайте наступні команди в командному рядку:
docker build -t my-django-app .
docker run -p 8000:8000 my-django-app

Залишайте коментарі!

Авторизуйтесь, щоб залишити коментар.

Про нас

Деякі корисні статті присвячені розробці веб-додатків та технологіям, які допоможуть вам створити продуктивні та захищені веб-додатки.

Ми в соцемережах

  1. GitHub
  2. Twitter