Panduan untuk Membangun Aplikasi Penyingkat URL dengan Django

Cara terbaik untuk mempelajari Django, atau keterampilan apa pun, adalah dengan menerapkan pengetahuan yang Anda miliki dengan membuat proyek fungsional.

Django adalah kerangka kerja pengembangan web Python yang paling banyak digunakan. Fitur bawaannya dan jumlah paket pihak ketiga yang ekstensif telah menjadikannya salah satu kerangka kerja web yang paling dicintai di seluruh dunia.

Ini cepat, andal, dan memiliki banyak fitur bawaan. Misalnya, sistem autentikasi lubang, yang memungkinkan Anda fokus pada fitur utama aplikasi Anda. Juga, Anda dapat menginstal paket eksternal untuk menyelesaikan tugas yang bahkan lebih kompleks, seperti Django-allauth , yang memungkinkan Anda untuk mendaftarkan pengguna dengan akun sosial mereka.

Tapi mari kita ungkap beberapa fakta. Django adalah kerangka kerja yang sangat besar yang terkadang menantang untuk memulainya.

Jadi hari ini Anda akan membangun dari awal aplikasi Django yang benar-benar berfungsi.

Pada akhir tutorial ini, Anda akan:

• Telah menulis aplikasi penyingkat URL
• Memahami pola Django MVT
• Telah mempelajari alur kerja pembuatan proyek

Pra-persyaratan

Semua persyaratan berikut ini opsional dan akan membantu Anda mengikuti tutorial. Tetapi jika Anda tidak memiliki pengalaman dengan semua ini, jangan khawatir. Langkah yang paling penting adalah yang pertama.

• Pemahaman dasar tentang perintah UNIX (ls, cd, rm, touch)
• Pemahaman dasar tentang kelas dan fungsi Python
• Python diinstal di komputer Anda (Mungkin jelas tetapi saya harus memasukkannya)
• Akan sangat bagus jika Anda telah membangun sesuatu dengan Django

Semua kode kerja akan tersedia di repo Github ini.

Sekarang setelah Anda memahami konsep sebelumnya dengan jelas, mari masuk ke masalah ini.

Pernyataan proyek

Dalam tutorial ini, Anda akan membuat penyingkat URL. Pada dasarnya, pemendek URL adalah layanan yang mengambil URL panjang dan mengubahnya menjadi satu yang ringkas.

Misalnya, jika Anda ingin membagikan tweet dan ingin menyertakan tautan ke situs web Anda, tetapi Anda menghadapi batasan karakter, Anda dapat menggunakan penyingkat URL.

Mari kita lihat dengan grafik.

Seperti yang Anda lihat, penyingkat URL mendapatkan URL yang panjang dan mengembalikan yang pendek. Itulah tepatnya yang akan Anda bangun hari ini.

Dengan proyek ini, Anda akan mempraktikkan penggunaan pola MVT, mempelajari dasar-dasar desain basis data dengan model Django, dan mempelajari cara menampilkan informasi kepada pengguna melalui tampilan, URL, dan templat.

Struktur proyek Django

Pada dasarnya, situs web Django dibangun di atas satu proyek dan beberapa aplikasi terpisah . Masing-masing aplikasi ini memiliki fungsi khusus dan dapat bekerja dengan sendirinya.

Mari kita bayangkan aplikasi web yang kompleks seperti Stackoverflow. Fungsionalitasnya didasarkan pada dua aspek utama.

• Manajemen pengguna: Masuk, Keluar, Reputasi, Izin
• Forum: Pertanyaan, jawaban, tag, Filter

Jadi mengikuti struktur situs web Django, proyek akan diberi nama StackOverflow yang memiliki dua aplikasi utama. Aplikasi pengguna dan aplikasi forum .

Masing-masing aplikasi ini memiliki fungsionalitas mandiri. Itu berarti keduanya berisi semua kode yang mereka butuhkan untuk bekerja dengan baik.

Itu termasuk model (struktur database), tampilan (permintaan dan tanggapan), pola URL tertentu, dan tentu saja, template dan file statis (gambar, CSS, JavaScript). Ini berarti bahwa aplikasi Django apa pun dapat digunakan kembali karena mereka dapat bekerja sendiri.

Menyingkat, sebuah proyek mengacu pada satu set konfigurasi dan aplikasi yang dimaksudkan untuk membangun Aplikasi Web. Di sisi lain, aplikasi Django adalah bagian dari proyek, yang mandiri (memiliki semua yang dibutuhkan untuk bekerja), dan tujuannya adalah untuk melakukan operasi tertentu.

Siapkan proyek Django

Di bagian ini, Anda akan menyiapkan proyek Django. Untuk tujuan itu, Anda akan menggunakan alat yang berbeda seperti lingkungan Virtual untuk mengatur dependensi Python dan skrip Django yang paling penting. Django-admin dan manage.py

Lingkungan virtual

Saya selalu merekomendasikan bekerja dengan lingkungan virtual saat membangun aplikasi dengan Django. Ini adalah cara paling efisien untuk mempertahankan serangkaian dependensi tertentu. Tetapi tujuan utamanya adalah untuk mengisolasi paket pengembangan dari paket global.

Jadi mari kita buat lingkungan virtual dengan python perintah formulir bawaan.

Catatan: Metode ini membutuhkan Python 3.6 atau versi yang lebih baru untuk berfungsi.

 python -m venv .venv

Perintah ini menggunakan perintah python -m atau python –mod . Pada dasarnya itu menjalankan modul atau perpustakaan, sebagai skrip. Menurut arti dari perintah ini, venv adalah perpustakaan yang kita jalankan, dan .venv mengacu pada nama lingkungan virtual yang ingin kita buat.

Jadi dalam bahasa sederhana, perintah ini berarti.

Hai Python, jalankan sebagai skrip venv perpustakaan bawaan dan buat nama virtualenv .venv

Sekarang, saatnya untuk mengaktifkan lingkungan virtual yang baru saja kita buat, dengan perintah berikut.

 source .venv/bin/activate

Untuk menegaskan bahwa Anda memiliki nol paket yang diinstal di venv baru, Anda menjalankan.

 pip freeze

Jika Anda mengaktifkan lingkungan virtual dengan benar, Anda tidak akan mendapatkan output apa pun. Itu karena kami belum menginstal apa pun.

Mari masuk ke Django

Untuk membuat aplikasi pemendek URL kita, kita akan memulai dengan menginstal paket Django. Django adalah paket pihak ketiga, oleh karena itu kita perlu menginstalnya dengan Pip (Pip Installs Packages).

 $ pip install django Collecting django Downloading Django-3.2.1-py3-none-any.whl (7.9 MB) |████████████████████████████████| 7.9 MB 344 kB/s Collecting asgiref<4,>=3.3.2 Using cached asgiref-3.3.4-py3-none-any.whl (22 kB) Collecting sqlparse>=0.2.2 Using cached sqlparse-0.4.1-py3-none-any.whl (42 kB) Collecting pytz Using cached pytz-2021.1-py2.py3-none-any.whl (510 kB) Installing collected packages: asgiref, sqlparse, pytz, django Successfully installed asgiref-3.3.4 django-3.2.1 pytz-2021.1 sqlparse-0.4.1

Catatan: Ingatlah bahwa $ tidak lain adalah simbol shell Anda.

Untuk memeriksa apakah instalasi berjalan dengan benar, kami memeriksa kembali paket yang diinstal dari venv.

 $ pip freeze asgiref==3.3.4 Django==3.2.1 pytz==2021.1 sqlparse==0.4.1

Jangan khawatir jika versi yang Anda dapatkan berbeda dengan versi saya. Jika Django masih pada versi 3.x Anda dapat melanjutkan tanpa masalah.

Memulai proyek Django

Setelah Anda menginstal Django, saatnya membuat struktur situs web penyingkat URL. Apakah Anda ingat apa itu proyek Django? Mari kita buat dengan menjalankan perintah berikut.

 django-admin startproject config

Menjelaskan semua tentang perintah ini, django-admin adalah utilitas baris perintah yang melakukan semua tugas yang diperlukan untuk membuat proyek Django. Bagian "startproject" adalah perintah yang dijalankan oleh utilitas Django-admin, dan config adalah nama proyek yang akan kita buat.

Penting untuk ditekankan bahwa konfigurasi dapat berupa nama apa pun yang Anda inginkan. Alasan saya menggunakan config sebagai nama proyek ini hanya karena kenyamanan. Sangat menyenangkan untuk beralih antar proyek dan masih memiliki konvensi penamaan yang sama. Jadi jangan takut menggunakan nama proyek lain kapan pun Anda mau.

Seperti yang mungkin Anda perhatikan sekarang Anda memiliki folder config/ dan di dalamnya, ada banyak file. Nanti kita akan melihat struktur file dari proyek tersebut. Untuk saat ini, mari masuk ke direktori proyek dan jalankan server lokal.

 cd config/

File terpenting yang akan Anda gunakan adalah skrip manage.py . Ia memiliki fungsi yang sama seperti Django-admin , tetapi keuntungan utama dari menggunakannya adalah memungkinkan Anda mengatur pengaturan saat menjalankan proyek.

Sekarang mari kita lihat apakah semuanya bekerja dengan benar.

 python manage.py runserver

Membuat aplikasi pemendek Url

Saatnya membuat aplikasi utama proyek. Anda akan menggunakan file manage.py untuk menyelesaikan tugas ini.

 python manage.py startapp urlshortener

Ini membuat aplikasi Django, dengan nama urlshortener . Jika Anda menjalankan perintah pohon, Anda akan mendapatkan sesuatu seperti ini.

 . ├── config │ ├── asgi.py │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── manage.py └── urlshortener ├── admin.py ├── apps.py ├── __init__.py ├── migrations │ └── __init__.py ├── models.py ├── tests.py └── views.py

Mari kita perjelas berbagai file yang dibuat hingga saat ini. "config" adalah nama proyek kami dan dinamai seperti itu hanya untuk konvensi. Di dalam config, Anda mendapatkan settings.py , ini adalah file tempat Anda mengatur semua pengaturan proyek Anda. urls.py adalah konfigurasi keseluruhan URL di dalam proyek. Ini mendefinisikan jalur URL dari semua aplikasi di dalam proyek.

Jangan terlalu khawatir tentang file asgi.py dan wsgi.py Ini adalah file yang memungkinkan Anda mengonfigurasi aplikasi Anda dalam penerapan.

manage.py adalah skrip python yang memungkinkan Anda menjalankan semua perintah Django-admin yang tersedia.

Melihat ke dalam urlshortener yang merupakan nama aplikasi yang baru saja Anda buat, Anda mungkin melihat ada folder aneh yang disebut "migrasi/" dan beberapa file lain yang penting untuk logika aplikasi apa pun.

apps.py adalah tempat tinggal konfigurasi aplikasi. Biasanya, Anda tidak main-main dengan itu, kecuali Anda melakukan hal-hal yang cukup maju.

admin.py adalah tempat Anda mendaftarkan model Anda untuk membuatnya terlihat di dalam panel admin Django.

models.py adalah yang paling penting. Di dalam modul ini, Anda harus mendefinisikan model, yang (tidak jelas) adalah cara data disimpan. Anda akan mendengar lebih banyak tentang model nanti.

migrations/ adalah folder tempat migrasi Django disimpan. Kami akan melihat lebih dalam nanti.

tests.py adalah file tempat tes disimpan. Kami tidak akan membahas pengujian dalam tutorial ini.

views.py adalah file yang menyimpan tampilan. Pada dasarnya, ini mendefinisikan bagaimana pengguna akan berinteraksi dengan semua aspek aplikasi Anda.

Memasang aplikasi Django

Sebelum melanjutkan, buka file settings.py dan ubah variabel INSTALLED_APPS dengan menambahkan aplikasi urlshortener.

 # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # Custom apps 'urlshortener', ]

Ini adalah proses rutin saat Anda membuat aplikasi. Jadi setiap kali melakukannya, jangan lupa untuk menginstalnya di pengaturan proyek.

Memahami pola MVT

Pola Model, View, Template adalah pola desain perangkat lunak yang digunakan pengembang Django untuk membuat aplikasi web.

Ini didasarkan pada 3 konsep utama. Model (data), View (Interaksi pengguna dengan data), Template (Bagaimana pengguna melihat data).

Model adalah kelas Python, yang mendefinisikan semua bidang dan perilaku data yang ingin Anda simpan. Biasanya setiap model mengacu pada tabel unik di database

Tampilan dalam ekspresinya yang paling sederhana, adalah callable yang menerima permintaan dari pengguna dan menghasilkan respons. Di antara proses itu terjadi logika bisnis. Saya tahu bahwa "logika bisnis" adalah konsep yang cukup kabur, jadi izinkan saya menjelaskan dengan tepat apa itu. Logika bisnis adalah cara data dibuat, disimpan, dan dihapus, itu saja.

Terakhir, template adalah dokumen teks (Biasanya Html) yang ditampilkan kepada pengguna. Tujuannya adalah untuk menyajikan data sebersih mungkin. Django menggabungkan bahasa mini yang disebut Django template language (DTL) yang memungkinkan Anda menggabungkan beberapa kekuatan python dalam dokumen teks.

Buat model Shortener

Setelah Anda memiliki pemahaman cepat tentang pola MVT, mari masuk ke dalam pembuatan pemendek URL Django dari awal.

Pertama-tama, mari kita definisikan model pemendek di dalam file models.py .

 ''' Url shortener model ''' from django.db import models # Create your models here. class Shortener(models.Model): ''' Creates a short url based on the long one created -> Hour and date a shortener was created times_followed -> Times the shortened link has been followed long_url -> The original link short_url -> shortened link https://domain/(short_url) ''' created = models.DateTimeField(auto_now_add=True) times_followed = models.PositiveIntegerField(default=0) long_url = models.URLField() short_url = models.CharField(max_length=15, unique=True, blank=True) class Meta: ordering = ["-created"] def __str__(self): return f'{self.long_url} to {self.short_url}'

Aku tahu. Ini adalah kelas yang cukup besar, dengan banyak hal aneh terjadi, tapi jangan putus asa. Aku akan pergi langkah demi langkah pada setiap hal penting.

Penjelasan model

Pertama-tama, kita mengimpor modul models . Modul ini berisi semua fungsionalitas yang kita butuhkan untuk membuat model Django.

Mengambil melihat model “Shortener”, hal pertama yang harus diperhatikan adalah bahwa itu meluas models.Model . Faktanya, model apapun dalam aplikasi Django apapun harus menjadi subkelas dari kelas model.Model.

Kemudian kami mendefinisikan semua bidang yang akan dimiliki model di database. Bidang "dibuat" adalah tanggal dan waktu tautan yang dipersingkat dibuat, oleh karena itu kami menggunakan DateTimeField untuk membuat fungsi semacam ini. Kami menggunakan argumen auto_now_add=True karena kami ingin bidang hanya diubah saat instance dibuat.

Bidang kedua times_followed mengacu pada waktu URL yang dipersingkat telah digunakan. Ini adalah PositiveIntegerField dan kami menetapkan default nol. Itu berarti bahwa setiap kali sebuah instans telah membuat bidang times_followed , Django akan mengisi bidang itu dengan 0.

Di sisi lain, long_url mengacu pada URL yang long_url pengguna. Ini adalah URLField , karena kami hanya ingin pengguna memasukkan karakter dalam bentuk: http://yoursite.com .

Bidang terakhir adalah short_url , dan memiliki detail yang menarik. Kita tentukan panjangnya hanya boleh 15 karakter, harus unik, artinya tidak boleh ada pengulangan elemen pada field tersebut. Akhirnya, kami menunjukkan bahwa itu dapat dibiarkan kosong, yang berarti bahwa ketika bekerja dengan formulir, pengguna tidak perlu menulis kode pendek mereka sendiri.

Kelas dalam Meta, beri tahu kami bagaimana kelas harus berperilaku, dan kami menetapkan bahwa pemesanan (memanggil Shortener.objects.all() ) dari objek pemendek akan didiskriminasikan oleh yang terbaru.

Metode __str__ memberitahu bagaimana model harus dicetak. Jadi jika kita memiliki objek dengan long_url = “https://geekflare.com/” dan bagian yang dipersingkat “123456”, dan kita mencetaknya.

 https://geekflare.com/ to 123456

Sekarang saatnya mencari cara untuk menyimpan tautan pendek secara acak.

Membuat fungsi pemendekan

Kita akan membuat 2 fungsi kustom. Yang pertama akan menghasilkan kode acak dan yang kedua akan mencegah pengulangan kode acak dari model Shortener. Untuk melakukan ini, buat file utils.py di dalam aplikasi "urlshortener".

 touch utils.py

Di dalam file ini, kita akan menggunakan fungsi pilih dari modul bawaan acak. Ini memfasilitasi tugas memilih karakter acak untuk membuat kode.

 ''' Utilities for Shortener ''' from django.conf import settings from random import choice from string import ascii_letters, digits # Try to get the value from the settings module SIZE = getattr(settings, "MAXIMUM_URL_CHARS", 7) AVAIABLE_CHARS = ascii_letters + digits def create_random_code(chars=AVAIABLE_CHARS): """ Creates a random string with the predetermined size """ return "".join( [choice(chars) for _ in range(SIZE)] )

Seperti yang Anda lihat, fungsi ini mengembalikan string acak dengan panjang yang ditentukan pada file pengaturan atau 7 secara default. Anda menggunakan fungsi getattr untuk mendapatkan variabel dari modul pengaturan, tetapi tanpa membuat kesalahan jika variabel tidak ditentukan.

Mari kita lakukan beberapa matematika. Jika kita memiliki 7 tempat di mana bisa ada hingga 62 karakter yang tersedia untuk setiap tempat, permutasi yang mungkin adalah:

Jadi berdasarkan perhitungan cepat ini, bagian yang dipersingkat dapat diisi hingga 2,5 triliun kode yang berbeda. Jadi kita bisa melupakan tentang keluar dari URL singkat yang acak.

Meskipun ada begitu banyak permutasi, ada kemungkinan kecil untuk mendapatkan bagian yang dipersingkat berulang. Ini adalah masalah karena kami menyiapkan bidang shortened_url menjadi unik. Itu sebabnya fungsi berikut ini sangat berguna.

 def create_shortened_url(model_instance): random_code = create_random_code() # Gets the model class model_class = model_instance.__class__ if model_class.objects.filter(short_url=random_code).exists(): # Run the function again return create_shortened_url(model_instance) return random_code

Mari kita lihat apa yang terjadi di sini. Fungsi mengambil sebagai argumen contoh model "Penyingkat". Pertama, fungsi menghasilkan kode acak menggunakan create_random_code . Kemudian ia mendapatkan kelas model dan memeriksa apakah ada objek lain yang memiliki short_url sama. Jika berhasil, ia berjalan sendiri sekali lagi, tetapi jika semuanya baik-baik saja, ia mengembalikan random_code.

Nanti Anda akan berinteraksi dengan shell, untuk melihat fungsi ini dari dekat.

Setelah membuat fungsi utilitas, mari kita gunakan untuk membuat kode acak dalam model pemendek.

Memodifikasi metode penyimpanan

Di akhir kelas "Shortener", Anda akan memodifikasi metode penyimpanan model. Metode save dipanggil setiap kali sebuah objek disimpan ke database, jadi kita akan melihat bagaimana menggunakannya di sini.

 # Import the function used to create random codes from .utils import create_shortened_url # At the end of the Shortener model def save(self, *args, **kwargs): # If the short url wasn't specified if not self.short_url: # We pass the model instance that is being saved self.short_url = create_shortened_url(self) super().save(*args, **kwargs)

Metode simpan sedang ditimpa, yang berarti Anda memperkenalkan fungsionalitas baru ke metode induk yang sudah ada sebelumnya. Ini pada dasarnya memberitahu Django bahwa setiap kali objek "Shortener" disimpan dan short_url tidak ditentukan, itu harus diisi dengan kode acak.

Menjalankan migrasi

Sekarang saatnya membuat dan menjalankan migrasi model Shortener. Untuk melakukan itu, jalankan perintah berikut di folder proyek root.

 $ python manage.py makemigrations Migrations for 'urlshortener': urlshortener/migrations/0001_initial.py - Create model Shortener $ python manage.py migrate Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions, urlshortener Running migrations: ...... # Apply the URL shortener migrations Applying urlshortener.0001_initial... OK

Untuk saat ini, Anda tidak perlu khawatir tentang apa itu migrasi. Hanya perlu diingat bahwa ketika menjalankan dua perintah ini Django membuat file database db.sqlite, berdasarkan model yang telah Anda tetapkan.

Mari membuat beberapa objek dengan cangkang Django.

 $ python manage.py shell >>> from urlshortener.models import Shortener >>> s = Shortener(long_url="https://geekflare.com") >>> s.short_url '' >>> s.save() >>> s.short_url 'kdWFVIc' >>> s.long_url 'https://geekflare.com' >>> print(s) https://geekflare.com to kdWFVIc

Begitulah cara kerja semua objek pemendek.

Menulis tampilan

Seperti yang saya katakan sebelumnya, tampilan adalah fungsi sederhana yang menerima permintaan dan mengembalikan respons. Jadi mari kita lihat cara membuat tampilan halo dunia.

Respon template dasar

Di dalam file “urlshortener/views.py” buat fungsi home_view . A A

 ''' Shortener views ''' from django.shortcuts import render, get_object_or_404 # We will use it later from django.http import HttpResponse # Create your views here. def home_view(request): return HttpResponse("Hello world")

Ini mengembalikan pesan sederhana "Halo dunia". Nanti Anda akan melihat tampilannya di browser. Sekarang buat "urls.py", di sana akan berdiri semua pola URL aplikasi.

touch urls.py


Tambahkan kode berikut.

 ''' Urls for shortener app urlshortener/urls.py ''' from django.urls import path # Import the home view from .views import home_view appname = "shortener" urlpatterns = [ # Home view path("", home_view, name="home") ]

Variabel appname mendeklarasikan (seperti namanya) namespace dari aplikasi urlshortener.

Dengan cepat menjelaskan bahwa kami mengimpor fungsi jalur, yang mengembalikan elemen untuk disertakan dalam pola url aplikasi. Atribut name adalah namespace dari path, yang dapat dipanggil di dalam template jika perlu.

Sekarang, mari kita ubah URL proyek secara keseluruhan.

 # config/urls.py from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), # Shortener Urls path('', include('urlshortener.urls')) ]

Sekarang mari kita jalankan server lagi.

 python manage.py runserver

Jika Anda menjalankan server, Anda akan mendapatkan pesan sederhana "Halo dunia". Ini karena Anda memasukkan pola url dari aplikasi penyingkat URL, ke dalam keseluruhan proyek.

Ini hanya titik awal. Sekarang saatnya membuat formulir untuk memungkinkan pengguna membuat URL Singkat sendiri.

Membuat formulir

Di Django, formulir adalah kelas sederhana yang memungkinkan mendapatkan masukan dari Pengguna.

Anda akan membuat file form.py. Ini adalah konvensi untuk menyimpan semua bentuk aplikasi dalam file itu.

 cd urlshortener/ touch forms.py

Di dalam file itu Anda akan membuat kelas "ShortenerForm" yang memanjang dari "ModelForm".

 ''' Shortener Forms urlshortener/forms.py ''' from django import forms from .models import Shortener class ShortenerForm(forms.ModelForm): long_url = forms.URLField(widget=forms.URLInput( attrs={"class": "form-control form-control-lg", "placeholder": "Your URL to shorten"})) class Meta: model = Shortener fields = ('long_url',)

Ini adalah bentuk model karena tujuannya adalah untuk membuat objek model dari input pengguna. Kami juga menggunakan argumen widget, yang memungkinkan kami menentukan atribut "kelas" (kelas dalam CSS, bukan python). Ini karena kita akan menyesuaikan mode aplikasi dengan bootstrap nanti.

Menyelesaikan tampilan

Setelah membangun formulir, saatnya membuat logika bisnis akhir dari aplikasi.

Navigasikan ke file views.py di dalam aplikasi pemendek, dan ubah tampilan home_view . Anda dapat memeriksa repo Github saat ini untuk mendapatkan gambaran tentang bagaimana struktur proyek terlihat.

Ada dua tampilan untuk aplikasi penyingkat URL:

1. Tampilan Beranda: Ini menunjukkan formulir pemendek, dan URL baru jika formulir telah dikirimkan.
2. Redirect view: Ini mengalihkan ke URL panjang dan menambahkan 1 ke waktu yang diikuti.

Mari kita mulai dengan tampilan rumah yang paling kompleks. Anda perlu mengimpor model dan formulir Shortener. Anda masih menggunakan fungsi karena saya ingin Anda memahami semua aliran data tampilan. Juga, Anda akan menggunakan jalur untuk templat (Yang belum dibuat).

Tampilan rumah

 ''' Shortener views ''' from django.shortcuts import render # We will use it later from django.http import HttpResponse, Http404, HttpResponseRedirect # Model from .models import Shortener # Custom form from .forms import ShortenerForm # Create your views here. def home_view(request): template = 'urlshortener/home.html' context = {} # Empty form context['form'] = ShortenerForm() if request.method == 'GET': return render(request, template, context) elif request.method == 'POST': used_form = ShortenerForm(request.POST) if used_form.is_valid(): shortened_object = used_form.save() new_url = request.build_absolute_uri('/') + shortened_object.short_url long_url = shortened_object.long_url context['new_url'] = new_url context['long_url'] = long_url return render(request, template, context) context['errors'] = used_form.errors return render(request, template, context)

Pandangan ini didasarkan pada dua kondisi:

1. Ketika metode HTTP sama dengan GET: Kami hanya meneruskan sebagai konteks, formulir Shortener digunakan untuk membuat objek Shortener.
2. Ketika metode HTTP sama dengan POST: Kami masih meneruskan formulir dalam konteks karena kami ingin pengguna dapat memasukkan URL lain. Tapi kami meneruskan permintaan Posting ke formulir lain yang disebut used_form.

Cara rumit untuk mendapatkan URL situs lengkap secara dinamis adalah dengan menggunakan metode objek permintaan build_absolute_uri .

 >>> print(request.build_absolute_uri('/')) 'https://localhost:8080/'

Sebagai cara aman untuk memproses permintaan yang salah (Pengguna tidak memasukkan URL yang valid), kami mendapatkan kesalahan formulir, meneruskannya sebagai konteks, dan merender template seperti biasa. Nanti Anda akan melihat bagaimana menerapkan tampilan kesalahan pada template.

Arahkan ulang tampilan

redirect_url_view , sedikit lebih sederhana. Ini adalah tampilan detail yang berarti, tampilan hanya berfungsi dengan objek.

Fungsi ini mengambil sebagai parameter, permintaan pengguna, dan bagian URL yang dipersingkat . Tidak perlu menegaskan jenis permintaan yang kami dapatkan, karena kami tidak bekerja dengan formulir dalam tampilan ini.

 def redirect_url_view(request, shortened_part): try: shortener = Shortener.objects.get(short_url=shortened_part) shortener.times_followed += 1 shortener.save() return HttpResponseRedirect(shortener.long_url) except: raise Http404('Sorry this link is broken :(')

Kami melindungi tampilan dengan pernyataan coba/kecuali , jika bagian yang dipersingkat tidak ditemukan dalam database. Jika objek ditemukan, ia menambahkan 1 ke bidang times_followed dan mengalihkan dengan fungsi HttpResponseRedirect ke URL situs yang sesuai dengan kode acak.

Memperbarui URL

Setelah Anda membuat dua tampilan aplikasi, saatnya membuat pola URL final dengan menyertakan jalur ke redirect_url_view .

Seperti biasa, Anda mulai dengan mengimpor tampilan, lalu membuat fungsi jalur dan meneruskan sebagai argumen:

• Rute URL
• Pemandangan menunjuk ke jalan setapak
• Nama jalannya

 ''' Urls for shortener app urlshortener/urls.py ''' from django.urls import path # Import the home view from .views import home_view, redirect_url_view appname = "shortener" urlpatterns = [ # Home view path('', home_view, name='home'), path('<str:shortened_part>', redirect_url_view, name='redirect'), ]

Dengan penyiapan URL ini, perutean aplikasi terlihat seperti ini.

• localhost:8000/ : Tampilan beranda
• localhost:8000/URL-code : Pengalihan ke URL yang panjang

Membuat template

Anda hampir sampai. Satu-satunya hal yang membedakan Anda dari membangun aplikasi ini adalah antarmuka pengguna. Untuk itu, kami menggunakan template Django.

Template digunakan untuk membuat antarmuka yang bersih ke pengguna aplikasi. File-file ini dibuat di dalam aplikasi dalam struktur folder ganda dalam bentuk: "templat/nama aplikasi"

 # urlshortener directory mkdir -p templates/urlshortener/

Catatan: Struktur folder ganda dan bahasa Template Django berada di luar cakupan tutorial ini tetapi Anda dapat membacanya di dokumentasi resmi.

Templat dasar

Django mengizinkan pewarisan templat. Ini berarti bahwa kita dapat memiliki template dasar dan memperluasnya dengan tujuan mengikuti prinsip KERING (Jangan ulangi diri sendiri).

 cd templates/urlshortener touch base.html

File base.html adalah konvensi dan berarti bahwa setiap template lain di aplikasi, harus merupakan ekstensi dari yang satu ini.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Django Url shortener</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> </head> <body> {% block body %} {% endblock body %} <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous" ></script> </body> </html>

Kita akan menggunakan CDN bootstrap, untuk membuat antarmuka yang cepat dan cantik tanpa memerlukan file CSS atau javascript.

Jika Anda ingin mempelajari lebih dalam tentang tag DTL, Anda dapat melakukannya dengan dokumen resmi.

Templat rumah

Template rumah, bawaan dari file base.html. Itu berarti bahwa template ini menyertakan semua HTML dari file induk.

 {% extends 'urlshortener/base.html' %} {% block body %} <div class="container"> <div class="card mt-5"> <div class="card-header text-center py-3"> <h1>URL Shortner Application <i class="fas fa-link px-2"></i></h1> </div> <div class="px-3 py-4"> <form action="" method="POST"> {% csrf_token %} <div class="row g-1"> <div class="col-10">{{form.long_url}}</div> <div class="col-2"> <button class="btn btn-success btn-lg w-100" type="submit"> Shorten </button> </div> </div> </form> </div> </div> {% if errors %} <div class="alert alert-danger mt-4" role="alert"> <p>{{errors}}</p> </div> {% endif %} {% if new_url %} <div class="mx-auto text-center mt-5"> <h2 class="text-danger">Your shortened Url</h2> <p>You can copy the Link below and share it with your friends</p> <p class="">{{new_url}}</p> <p><span class="text-danger">Previous URL:</span> {{long_url}}</p> </div> {% endif %} </div> {% endblock body %}

Saya akan segera menjelaskan aliran data dari template ini:

• Formulir Shortener ditampilkan. Di dalam, token crsf disetel (Alasan keamanan), dan hanya bidang URL panjang dari formulir yang ditampilkan. Ingat bahwa bidang ini memiliki kelas CSS, “form-control form-control-lg”, karena kita mengaturnya di form.
• Jika ada kesalahan yang ditemukan, tunjukkan
• Jika operasi POST berhasil, URL baru akan ditampilkan.

Aplikasi akhir

Selamat! . Anda telah membangun aplikasi pemendek URL fungsional lengkap dengan Django.

Berikut adalah beberapa tangkapan layar tentang bagaimana tampilan aplikasi.

Dapatkan hanya:

Kesalahan memperpendek URL:

URL singkat yang berhasil:

URL dialihkan:

Apa pendapat Anda tentang mengekspos demo aplikasi penyingkat URL ini kepada seseorang? Periksa bagaimana mengekspos aplikasi Demo Django ke internet.

Tantangan

Jika Anda merasa nyaman dengan keterampilan Django Anda, mengapa tidak berlatih dengan tantangan?.

Kloning kode aplikasi ini dan buat sistem otentikasi, di mana hanya pengguna terdaftar yang dapat mempersingkat URL mereka.

Setelah selesai, kirim permintaan tarik dan ping saya di Twitter untuk menunjukkan pencapaian Anda.

Membungkus

Anda telah mencapai akhir tutorial ini. Percaya atau tidak, Anda baru saja meninjau semua aspek utama dari pembuatan proyek Django. Saya harap Anda menemukannya sangat berguna.

Dalam tutorial ini Anda:

• Mempelajari tentang alur kerja pembuatan aplikasi Django.
• Membangun proyek resume
• Memahami perbedaan dan struktur proyek Django dan aplikasi Django.
• Menemukan pola MVT.
• Tampilan dasar Fungsi yang dibuat
• Menggunakan Django ORM (Object Relational Mapper) untuk membuat model sederhana

Itu saja, ada banyak hal yang harus dibahas dengan kerangka kerja web Django, jadi tetaplah berhubungan untuk tutorial yang lebih menakjubkan.