Cara Membuat Aplikasi Web Mobile-Friendly menggunakan Django Framework - Bagian 3
“Artikel ini direvisi dan diperbarui dengan versi terbaru Django – Mei 2016 ”
Di Bagian 1 dari seri ini Anda mempelajari cara menginstal dan mengkonfigurasi Django di lingkungan virtual dan Anda membuat kerangka proyek pertama Anda.
Kemudian di Bagian 2 kita membuat aplikasi dan model untuk objek Posting, yang kemudian kita migrasikan ke database. Terakhir, kami menunjukkan kepada Anda bagaimana mengintegrasikan aplikasi Anda yang baru dibuat ke antarmuka pengguna administrasi Django.
Artikel ini adalah bagian dari seri Django:
Memasang dan Mengonfigurasi Kerangka Web Django dengan Lingkungan Virtual – Bagian 1
Meninjau Dasar-Dasar Python dan Membuat Aplikasi Web Pertama Anda dengan Django – Bagian 2
Dalam panduan terakhir ini kita akan membahas cara mengakses aplikasi menggunakan UI dan cara menjadikannya mobile-friendly untuk semua jenis perangkat. Karena itu, mari kita mulai.
Membuat objek melalui antarmuka admin Django
Untuk membuat objek bertipe Posting (ingat itu adalah model yang kita definisikan di Bagian 2 seri ini), kita akan menggunakan antarmuka admin Django.
Pastikan server web bawaan Django berjalan pada port 8000 (atau port lain yang Anda pilih) dengan menjalankan perintah berikut dari direktori myfirstdjangoproject luar:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Sekarang buka browser web Anda dan arahkan ke http://ip-address:8000/admin, lalu masuk menggunakan kredensial yang Anda siapkan di artikel sebelumnya dan mulailah menulis postingan (yang, sekali lagi, akan membuat objek bertipe Posting dan memasukkan data terkait ke dalam database yang mendasarinya):
Ulangi proses ini 2 atau 3 kali:
Setelah kita membuat beberapa postingan, mari kita lihat apa yang perlu kita lakukan untuk menampilkannya menggunakan browser web kita.
Pandangan awal kami
Tampilan pertama kita (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) akan bertugas memfilter semua objek Posting dan mengembalikan objek yang bernilai saat Dipublikasikan kurang dari atau sama dengan tanggal dan waktu saat ini (whenPublished__lte=timezone.now()) diurutkan dengan whenPublished menurun, yang sama dengan mengatakan “ terbaru dulu”.
Objek-objek ini disimpan ke dalam variabel yang diberi nama posts, dan dikembalikan (diidentifikasi sebagai allposts) untuk disematkan dalam HTML, seperti yang akan kita lihat di bagian berikutnya:
from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
return render(request, 'myblog/posts.html', {'allposts': posts})
Terakhir, garis bawah ganda pada whenPublished__lte di atas digunakan untuk memisahkan kolom database (whenPublished) dari filter atau operasi (lte=kurang dari atau setara).
Setelah kita menentukan tampilan awal, mari bekerja pada template terkait.
Buat Template untuk Proyek pertama kami
Mengikuti arahan dan jalur yang diberikan di bagian sebelumnya, kita akan menyimpan template awal kita di dalam blog saya/template/blog saya. Ini berarti Anda perlu membuat direktori bernama templates dan subdirektori bernama blog saya:
cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog
Kita akan memanggil template posts.html dan memasukkan kode berikut ke dalamnya. Anda akan melihat bahwa kami menambahkan referensi online ke font jQuery, Bootstrap, FontAwesome, dan Google.
Selain itu, kami telah menyertakan kode Python di dalam tanda kurung kurawal di dalam HTML. Harap dicatat bahwa untuk setiap objek bertipe Posting kami akan menampilkan judulnya, tanggal penerbitan dan penulisnya, dan terakhir teksnya. Terakhir, dengan warna merah Anda akan melihat bahwa kami membuat referensi ke objek yang dikembalikan melalui myblog/views.py:
Oke, ini file posts.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<style>
.title {
font-family: 'Indie Flower', serif;
font-size: 30px;
color: #1E90FF;
}
h1 {
font-family: 'Pacifico', serif;
font-size: 45px;
color: #1E90FF;
}
</style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
<div>
<div class="title">{{ post.title }}</div>
<strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</body>
</html>
Dalam template di atas, filter linebreak digunakan untuk mengganti line break dalam teks biasa dengan padanan HTML yang sesuai (
Selanjutnya, kita perlu menyiapkan pemetaan antara URL di aplikasi kita dan tampilan terkait yang mengembalikan data. Untuk melakukannya, buat file bernama urls.py di dalam blog saya dengan konten berikut:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
r'^$' memerlukan penjelasan lebih lanjut. r terdepan menginstruksikan Django untuk memperlakukan string di dalam tanda kutip tunggal sebagai ekspresi reguler.
Secara khusus, r'^$' mewakili string kosong sehingga ketika kita mengarahkan browser kita ke http://ip-address:8000 (dan tidak ada yang lain), data yang dikembalikan oleh variabel posts di dalam views.py (lihat bagian sebelumnya) akan disajikan di beranda kami:
Terakhir, namun tidak kalah pentingnya, kami akan menyertakan file urls.py aplikasi blog kami (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) ke dalam urls.py proyek utama kami (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('myblog.urls')),
]
Lalu mari kita mulai server web:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Sekarang kita seharusnya dapat melihat daftar postingan yang kita buat sebelumnya:
Berkat Bootstrap, Anda tetap dapat memiliki visualisasi luar biasa di perangkat yang lebih kecil:
Menyimpulkan
Sekarang mari kita meninjau kembali konsep-konsep yang telah kita bahas dalam artikel ini dan seluruh seri ini:
1. Setiap model mendefinisikan sebuah objek dan memetakan ke tabel database, yang bidangnya kemudian dipetakan ke properti objek tersebut. Di sisi lain, templat mendefinisikan antarmuka pengguna tempat data yang dikembalikan oleh tampilan akan ditampilkan.
Katakanlah kita ingin memodifikasi model kita dengan menambahkan kolom bernama ringkasan ke objek Postingan, di mana kita akan menyimpan deskripsi singkat opsional dari setiap postingan. Mari tambahkan baris berikut di myblog/models.py:
summary = models.CharField(max_length=350, blank=True, null=True)
Seperti yang kita pelajari di artikel sebelumnya, kita perlu memigrasikan perubahan ke database:
python manage.py makemigrations myblog
python manage.py migrate myblog
Kemudian gunakan antarmuka admin untuk mengedit postingan dan menambahkan ringkasan singkat ke setiap postingan. Terakhir, ganti baris berikut di template (posts.html):
<p>{{ post.text|linebreaks }}</p>
dengan
<p>{{ post.summary }}</p>
Refresh halaman beranda untuk melihat perubahannya:
2. Fungsi view menerima permintaan HTTP dan mengembalikan respons HTTP. Dalam artikel ini, postingan def(permintaan) di views.py melakukan panggilan ke database yang mendasarinya untuk mengambil semua postingan. Jika kita ingin mengambil semua postingan dengan kata ansible di judulnya, kita harus menggantinya.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
dengan
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
Dengan memisahkan antarmuka pengguna dari logika aplikasi dalam aplikasi web, Django memfasilitasi tugas pemeliharaan dan peningkatan aplikasi.
3. Jika Anda mengikuti petunjuk yang diberikan dalam seri ini, struktur proyek Anda akan menjadi seperti berikut:
myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│ ├── admin.py
│ ├── admin.pyc
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ ├── 0001_initial.pyc
│ │ ├── __init__.py
│ │ └── __init__.pyc
│ ├── models.py
│ ├── models.pyc
│ ├── templates
│ │ └── myblog
│ │ └── posts.html
│ ├── tests.py
│ ├── urls.py
│ ├── urls.pyc
│ ├── views.py
│ └── views.pyc
└── myfirstdjangoproject
├── __init__.py
├── __init__.pyc
├── settings.py
├── settings.pyc
├── urls.py
├── urls.pyc
├── wsgi.py
└── wsgi.pyc
Jika daftar di atas tidak ditampilkan dengan benar di browser Anda, berikut adalah tangkapan layar dari keluaran perintah berikut:
tree myfirstdjangoenv/myfirstdjangoproject
Ringkasan
Meskipun semua konsep ini mungkin tampak sedikit mengintimidasi pada awalnya, saya dapat meyakinkan Anda bahwa Django layak untuk semua upaya yang diperlukan untuk mengenalnya.
Saya harap contoh yang kami gunakan dalam seri ini untuk memperkenalkan Anda pada kerangka web yang luar biasa ini akan memotivasi Anda untuk mempelajari lebih lanjut. Jika demikian, dokumentasi resmi Django (yang selalu diperbarui) adalah tempat terbaik untuk memulai.
Saya dapat meyakinkan anda bahwa ada lebih banyak hal pada Django daripada yang dapat kita bahas secara memadai dalam serangkaian artikel, jadi silakan menjelajahinya dan belajar sambil melakukan!
Jangan ragu untuk mengirimkan pesan kepada kami berisi pertanyaan atau saran menggunakan formulir di bawah ini.