Membuat Aplikasi Web dengan Python Django di FreeBSD untuk Aplikasi restoran dan cuaca

Jika berbicara tentang pengembangan situs web back-end, ada banyak program alternatif yang bisa digunakan, mulai dari Java, PHP, GoLang, Ruby, dan C#. Bahasa pemrograman Python juga memiliki banyak pilihan untuk mengimplementasikan layanan aplikasi situs web yang bisa Anda coba. Salah satu framework web yang paling banyak digunakan dalam lingkungan Python adalah Django.

Django menyediakan framework pengembangan situs web modern berfitur lengkap dan memiliki utilitas otomatis untuk pengembangan langsung. Python dan Django menghadirkan stabilitas dalam pembuatan situs web. Bahkan bagi Anda yang baru belajar pengembangan situs web, Django sangat menggoda untuk dicoba dan digunakan.

Dalam artikel ini, kita akan membuat aplikasi web dasar berfitur lengkap menggunakan Python dan Django, dengan fitur-fitur yang paling umum untuk aplikasi situs web apa pun.

Sebelum kita masuk ke inti pembelajaran, penting bagi Anda untuk memahami bahwa saat mengembangkan aplikasi situs web menggunakan Django, Anda harus menguasai struktur proyek situs web Django. Django mengikuti pendekatan konvensi-atas-konfigurasi, yang berarti menerapkan tata letak khusus proyek untuk meningkatkan konsistensi dan kemudahan perawatan.

Dalam penggunaannya, Django menggunakan konsep Proyek dan aplikasi untuk mengelola kode dan menyajikannya dalam format yang dapat dibaca oleh banyak orang. Proyek Django berisi satu atau beberapa aplikasi di dalamnya, yang melakukan pekerjaan secara bersamaan untuk menyediakan alur aplikasi situs web yang lancar.

Kerangka kerja proyek Django didasarkan pada empat komponen utama:

• Models: Digunakan untuk berinteraksi dengan basis data dan mendapatkan informasi yang perlu ditampilkan di browser.
• Views: Akan memproses permintaan dan mengakses model, memberi tahu model informasi apa yang perlu diambil dari basis data.
• Templates: Digunakan untuk menunjukkan dengan cepat dan tepat cara menampilkan informasi yang diterima dari basis data.
• URL Routes: Fungsi ini sangat penting karena akan mengarahkan permintaan HTTP dari browser ke tampilan situs web.

1. Membuat Aplikasi Web Form

Sebelum melanjutkan isi artikel ini, Anda harus terlebih dahulu membaca artikel sebelumnya, tentang "Menyiapkan Kerangka Aplikasi Web Python Django FreeBSD".

Jika Anda tidak membaca artikel ini, akan sulit bagi Anda untuk mempelajari isi artikel ini, karena artikel di atas merupakan dasar untuk menginstal Djnago pada server FreeBSD.

Pada bagian ini kita akan mencoba membuat web form, yaitu metode pengiriman informasi dari browser ke web server Django. Anda akan mempelajari perbedaan antara pengiriman data form dalam permintaan HTTP GET dan mengirimkannya dalam permintaan HTTP POST, serta cara memilih mana yang akan digunakan.

Langkah pertama yang harus Anda lakukan adalah masuk ke lingkungan virtual Python.

root@ns3:~ # cd /tmp/Django/DjangoProject
root@ns3:/tmp/Django/DjangoProject # source bin/activate.csh
(DjangoProject) root@ns3:/tmp/Django/DjangoProject # django-admin startproject FreeBSD_Form
(DjangoProject) root@ns3:/tmp/Django/DjangoProject # cd FreeBSD_Form
(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form #

Perintah di atas digunakan untuk membuat proyek kerja Django bernama "FreeBSD_Form", yang berada di lingkungan virtual Python. Setelah itu, Anda menjalankan perintah pembuatan basis data SQLite3.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form # python manage.py migrate

Buat pengguna dan kata sandi Django.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form # python manage.py createsuperuser

Buat aplikasi form_project.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form # python manage.py startapp form_project

Dalam folder form_project, buat folder baru bernama "templates".

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form # cd form_project
(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form/form_project # mkdir -p templates

Dalam folder "templates", buat berkas bernama "form_project.html".

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form/form_project # cd templates
(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form/form_project/templates # touch project-form.html

Ketik skrip di bawah ini dalam file "/tmp/Django/DjangoProject/FreeBSD_Form/form_project/templates/project-form.html".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeBSD Django Form</title>
</head>
<body>
<h4>Method: {{ method }}</h4>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <p>
        <input type="submit" name="submit_input" value="Submit Input">
    </p>
    <p>
        <button type="submit" name="button_element" value="Button Element">
            Button With <strong>Styled</strong> Text
        </button>
    </p>
</form>
</body>
</html>

Dalam berkas "/tmp/Django/DjangoProject/FreeBSD_Form/form_project/views.py", ketik skrip di bawah ini.

from django.shortcuts import render
from .forms import ExampleForm


def form_project(request):
    if request.method == "POST":
        form = ExampleForm(request.POST)
    else:
        form = ExampleForm()

    if request.method == "POST":
        form = ExampleForm(request.POST)
        if form.is_valid():
            for name, value in form.cleaned_data.items():
                print("{}: ({}) {}".format(name, type(value), value))

    return render(request, "project-form.html", {"method": request.method, "form": form})

Dalam berkas "/tmp/Django/DjangoProject/FreeBSD_Form/form_project/tests.py", ketik skrip di bawah ini.

import re
from unittest import mock

from django import forms
from django.http import HttpRequest, QueryDict
from django.test import Client
from django.test import TestCase

from form_example.forms import ExampleForm, RADIO_CHOICES, BOOK_CHOICES
from form_example.views import form_example


class Exercise5Test(TestCase):
    def test_fields_in_view(self):
        """"
        Test that some fields exist in the rendered template, assume that if all the fields exist on the form class
        (there is a separate test for this) then they will all be rendered. There's no reason why only some would be.
        """
        c = Client()
        response = c.get('/form-example/')

        self.assertIsNotNone(re.search(r'<input type="hidden" name="csrfmiddlewaretoken" value="\w+">',
                                       response.content.decode('ascii')))

        self.assertIn(b'<p><label for="id_text_input">Text input:</label> <input type="text" name="text_input" '
                      b'maxlength="3" required id="id_text_input"></p>', response.content)
        self.assertIn(b'<p><label for="id_password_input">Password input:</label> <input type="password" '
                      b'name="password_input" minlength="8" required id="id_password_input"></p>', response.content)
        self.assertIn(b'<p><label for="id_checkbox_on">Checkbox on:</label> <input type="checkbox" '
                      b'name="checkbox_on" required id="id_checkbox_on"></p>', response.content)

        self.assertIn(b'<input type="submit" name="submit_input" value="Submit Input">', response.content)
        self.assertIn(b'<button type="submit" name="button_element" value="Button Element">', response.content)
        self.assertIn(b'Button With <strong>Styled</strong> Text', response.content)
        self.assertIn(b'</button>', response.content)

    def test_method_in_view(self):
        """Test that the method is included in the HTML output"""
        c = Client()
        response = c.get('/form-example/')
        self.assertIn(b'<h4>Method: GET</h4>', response.content)

        response = c.post('/form-example/')
        self.assertIn(b'<h4>Method: POST</h4>', response.content)

    @mock.patch('form_example.views.print')
    @mock.patch('form_example.views.ExampleForm')
    def test_get_debug_output(self, mock_example_form, mock_print):
        """Mock the print() function to test the debug output with GET request (no output)."""
        mock_request = mock.MagicMock(spec=HttpRequest)
        mock_request.method = 'GET'
        mock_request.POST = QueryDict()
        mock_request.META = {}
        form_example(mock_request)
        mock_example_form.assert_called_with()
        mock_print.assert_not_called()

    @mock.patch('form_example.views.print')
    def test_post_debug_output(self, mock_print):
        """Mock the print() function to test the debug output with posted data."""
        mock_request = mock.MagicMock(spec=HttpRequest)
        mock_request.method = 'POST'
        mock_request.POST = QueryDict(
            b'csrfmiddlewaretoken=9z38afmpT4579d1AWewuQrIppZFYbbjm9szCXQdYDyG4n17PgZWG9VqRpK2CChaB&text_input=tex&'
            b'password_input=password123&checkbox_on=on&radio_input=Value+Two&favorite_book=1&books_you_own=1&'
            b'books_you_own=4&text_area=Text&integer_input=10&float_input=3.4&decimal_input=1.345&'
            b'email_input=user%40example.com&date_input=2019-12-11&hidden_input=Hidden+Value&submit_input=Submit+Input'
        )
        mock_request.META = {}
        form_example(mock_request)
        mock_print.assert_any_call("text_input: (<class 'str'>) tex")
        mock_print.assert_any_call("password_input: (<class 'str'>) password123")
        mock_print.assert_any_call("checkbox_on: (<class 'bool'>) True")
        mock_print.assert_any_call("radio_input: (<class 'str'>) Value Two")
        mock_print.assert_any_call("favorite_book: (<class 'str'>) 1")
        mock_print.assert_any_call("books_you_own: (<class 'list'>) ['1', '4']")
        mock_print.assert_any_call("text_area: (<class 'str'>) Text")
        mock_print.assert_any_call("integer_input: (<class 'int'>) 10")
        mock_print.assert_any_call("float_input: (<class 'float'>) 3.4")
        mock_print.assert_any_call("decimal_input: (<class 'decimal.Decimal'>) 1.345")
        mock_print.assert_any_call("email_input: (<class 'str'>) user@example.com")
        mock_print.assert_any_call("date_input: (<class 'datetime.date'>) 2019-12-11")
        mock_print.assert_any_call("hidden_input: (<class 'str'>) Hidden Value")

    def test_example_form(self):
        """Test that the ExampleForm class exists and has the attributes we expect."""
        form = ExampleForm()
        self.assertIsInstance(form.fields['text_input'], forms.CharField)

        self.assertIsInstance(form.fields['password_input'], forms.CharField)
        self.assertIsInstance(form.fields['password_input'].widget, forms.PasswordInput)

        self.assertIsInstance(form.fields['checkbox_on'], forms.BooleanField)

        self.assertIsInstance(form.fields['radio_input'], forms.ChoiceField)
        self.assertIsInstance(form.fields['radio_input'].widget, forms.RadioSelect)
        self.assertEqual(form.fields['radio_input'].choices, list(RADIO_CHOICES))

        self.assertIsInstance(form.fields['favorite_book'], forms.ChoiceField)
        self.assertEqual(form.fields['favorite_book'].choices, list(BOOK_CHOICES))

        self.assertIsInstance(form.fields['books_you_own'], forms.MultipleChoiceField)
        self.assertEqual(form.fields['books_you_own'].choices, list(BOOK_CHOICES))

        self.assertIsInstance(form.fields['text_area'], forms.CharField)
        self.assertIsInstance(form.fields['text_area'].widget, forms.Textarea)

        self.assertIsInstance(form.fields['integer_input'], forms.IntegerField)

        self.assertIsInstance(form.fields['float_input'], forms.FloatField)

        self.assertIsInstance(form.fields['decimal_input'], forms.DecimalField)
        self.assertEqual(form.fields['decimal_input'].max_digits, 5)

        self.assertIsInstance(form.fields['email_input'], forms.EmailField)

        self.assertIsInstance(form.fields['date_input'], forms.DateField)
        self.assertIsInstance(form.fields['date_input'].widget, forms.DateInput)
        self.assertEqual(form.fields['date_input'].widget.input_type, 'date')

        self.assertIsInstance(form.fields['hidden_input'], forms.CharField)
        self.assertEqual(form.fields['hidden_input'].initial, 'Hidden Value')

Dalam folder "/tmp/Django/DjangoProject/FreeBSD_Form/form_project", buat file bernama "forms.py".

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form/form_project/templates # cd ..
(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form/form_project # touch forms.py

Dalam berkas "/tmp/Django/DjangoProject/FreeBSD_Form/form_project/forms.py", ketik skrip di bawah ini.

from django import forms

RADIO_CHOICES = (
    ("Value One", "Value One Display"),
    ("Value Two", "Text For Value Two"),
    ("Value Three", "Value Three's Display Text")
)

BOOK_CHOICES = (
    (
        "Non-Fiction", (
            ("1", "Deep Learning with Keras"),
            ("2", "Web Development with Django")
        )
    ),
    (
        "Fiction", (
            ("3", "Brave New World"),
            ("4", "The Great Gatsby")
        )
    )
)


class ExampleForm(forms.Form):
    text_input = forms.CharField(max_length=3)
    password_input = forms.CharField(min_length=8, widget=forms.PasswordInput)
    checkbox_on = forms.BooleanField()
    radio_input = forms.ChoiceField(choices=RADIO_CHOICES, widget=forms.RadioSelect)
    favorite_book = forms.ChoiceField(choices=BOOK_CHOICES)
    books_you_own = forms.MultipleChoiceField(required=False, choices=BOOK_CHOICES)
    text_area = forms.CharField(widget=forms.Textarea)
    integer_input = forms.IntegerField(min_value=1, max_value=10)
    float_input = forms.FloatField()
    decimal_input = forms.DecimalField(max_digits=5, decimal_places=3)
    email_input = forms.EmailField()
    date_input = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
    hidden_input = forms.CharField(widget=forms.HiddenInput, initial="Hidden Value")

Dalam berkas "/tmp/Django/DjangoProject/FreeBSD_Form/FreeBSD_Form/urls.py", ketik skrip di bawah ini.

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('project-form/', form_project.views.form_project)
]

Dalam berkas "/tmp/Django/DjangoProject/FreeBSD_Form/FreeBSD_Form/settings.py", Ubah beberapa skrip di bawah ini.

ALLOWED_HOSTS = ['*']


# Application definition

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

Jalankan server Django.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/FreeBSD_Form # python manage.py runserver 192.168.5.2:3000

Setelah tidak ada kesalahan, saat menjalankan perintah di atas, lakukan pengujian. Buka peramban web Google Chrome dan ketik "http://192.168.5.2:3000/project-form/". Anda melihat tampilan di layar monitor Anda, menu formulir akan muncul.

2. Django WebApp 1 Dari Repositori Github

Karena kebanyakan orang, selama proses pembelajaran, mengutak-atik skrip di repositori Github, untuk menambah pengetahuan Anda, kami akan memberikan contoh pembuatan Django WebApp yang berasal dari repositori Github.

Aplikasi WebApp yang akan kami tunjukkan dalam artikel ini adalah aplikasi restoran. Seperti biasa, kami mulai di lingkungan virtual Python, kami berasumsi Anda sudah berada di Python Venv.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject # django-admin startproject UserAuthapp
(DjangoProject) root@ns3:/tmp/Django/DjangoProject # cd UserAuthapp
(DjangoProject) root@ns3:/tmp/Django/DjangoProject/UserAuthapp # python manage.py migrate

Perintah di atas digunakan untuk membuat direktori kerja bernama "UserAuthapp". Setelah itu, Anda melanjutkan dengan membuat direktori restoran yang akan kita beri nama "home".

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/UserAuthapp # python manage.py startapp home

Kloning aplikasi restoran dari repositori Github. Kami akan menempatkan hasil kloning secara terpisah di folder "/var". Kami keluar dari lingkungan virtual Python dengan perintah "deactivate".

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/UserAuthapp # deactivate
root@ns3:/tmp/Django/DjangoProject/UserAuthapp # cd /var
root@ns3:/var # git clone https://github.com/vikaskohli614/Restaurantly-app-in-django-.git
Cloning into 'Restaurantly-app-in-django-'...
remote: Enumerating objects: 180, done.
remote: Counting objects: 100% (180/180), done.
remote: Compressing objects: 100% (140/140), done.
remote: Total 180 (delta 36), reused 180 (delta 36), pack-reused 0
Receiving objects: 100% (180/180), 5.92 MiB | 3.06 MiB/s, done.
Resolving deltas: 100% (36/36), done.
root@ns3:/var #

Salin beberapa file dan folder dari aplikasi restoran yang Anda klon dari Github ke direktori kerja Django.

root@ns3:/var # cd Restaurantly-app-in-django-
root@ns3:/var/Restaurantly-app-in-django- # cp -R static /tmp/Django/DjangoProject/UserAuthapp
root@ns3:/var/Restaurantly-app-in-django- # cp -R templates /tmp/Django/DjangoProject/UserAuthapp

root@ns3:/var/Restaurantly-app-in-django- # cd home
root@ns3:/var/Restaurantly-app-in-django-/home # cp -R views.py urls.py models.py admin.py /tmp/Django/DjangoProject/UserAuthapp/home

Salin "/var/Restaurantly-app-in-django-/UserAuthapp/urls.py" dan "/var/Restaurantly-app-in-django-/UserAuthapp/settings.py", ke direktori kerja Django.

root@ns3:/var/Restaurantly-app-in-django-/home # cp -R /var/Restaurantly-app-in-django-/UserAuthapp/urls.py /tmp/Django/DjangoProject/UserAuthapp/UserAuthapp
root@ns3:/var/Restaurantly-app-in-django-/home # cp -R /var/Restaurantly-app-in-django-/UserAuthapp/settings.py /tmp/Django/DjangoProject/UserAuthapp/UserAuthapp

Setelah itu edit file "/tmp/Django/DjangoProject/UserAuthapp/UserAuthapp/settings.py", ubah hanya beberapa skrip seperti contoh di bawah ini.

ALLOWED_HOSTS = ['*']

Buat pengguna dan kata sandi Django, dengan perintah "python manage.py createsuperuser".

root@ns3:/var/Restaurantly-app-in-django-/home # cd /tmp/Django/DjangoProject
root@ns3:/tmp/Django/DjangoProject # source bin/activate.csh
(DjangoProject) root@ns3:/tmp/Django/DjangoProject # cd UserAuthapp
(DjangoProject) root@ns3:/tmp/Django/DjangoProject/UserAuthapp # python manage.py createsuperuser

Jalankan server Django.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject # python manage.py runserver 192.168.5.2:3000

Untuk melihat hasilnya, buka peramban web Google Chrome, ketik "http://192.168.5.2:3000/".

3. Django WebApp 2 Dari Repositori Github

Pada bagian ini kita akan mendemonstrasikan sebuah aplikasi cuaca. Selain metode di atas, kita akan mencoba metode lain yang lebih cepat dan efisien. Tidak jauh berbeda dengan metode di atas, Anda juga harus menjalankan aplikasi cuaca di lingkungan virtual Python.

Baiklah, mari kita jalankan perintah untuk mengkloning aplikasi dari repositori Github.

root@ns3:~ # cd /tmp/Django/DjangoProject
root@ns3:/tmp/Django/DjangoProject # source bin/activate.csh
(DjangoProject) root@ns3:/tmp/Django/DjangoProject # git clone https://github.com/IamOmaR22/Weather_App-with-Python-Django.git
Cloning into 'Weather_App-with-Python-Django'...
remote: Enumerating objects: 416, done.
remote: Counting objects: 100% (416/416), done.
remote: Compressing objects: 100% (322/322), done.
remote: Total 416 (delta 123), reused 364 (delta 88), pack-reused 0
Receiving objects: 100% (416/416), 6.88 MiB | 5.59 MiB/s, done.
Resolving deltas: 100% (123/123), done.
(DjangoProject) root@ns3:/tmp/Django/DjangoProject #

Setelah Anda berhasil mengkloning aplikasi cuaca dari Github, lanjutkan dengan membuat database SQLite3.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject # cd Weather_App-with-Python-Django
(DjangoProject) root@ns3:/tmp/Django/DjangoProject/Weather_App-with-Python-Django # python manage.py migrate

Jangan lupa menjalankan perintah berikut untuk membuat pengguna dan kata sandi Django.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/Weather_App-with-Python-Django # python manage.py createsuperuser

Instal dependensi.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject # pip install asgiref certifi chardet idna pytz requests sqlparse urllib3

Edit file "/tmp/Django/DjangoProject/Weather_App-with-Python-Django/WeatherBug/settings.py", ubah hanya beberapa skrip seperti contoh di bawah ini.

ALLOWED_HOSTS = ['192.168.5.2']

192.168.5.2 adalah IP lokal server FreeBSD Anda. Selanjutnya, jalankan server Django.

(DjangoProject) root@ns3:/tmp/Django/DjangoProject/Weather_App-with-Python-Django # python manage.py runserver 192.168.5.2:3000

Untuk melihat hasilnya, buka Google Chrome atau Mozilla Firefox, ketik "http://192.168.5.2:3000/".

Dalam artikel ini kami telah menyediakan beberapa contoh penggunaan Python Django untuk membuat aplikasi web. Artikel ini hanyalah bagian dari tutorial Django, Anda dapat terus mengikuti Blogspot kami untuk mendapatkan informasi Django terbaru.