Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python

Membangun Ribbit di Django

by
Read Time:23 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Setelah menerapkan Twitter-clone kami, Ribbit, dalam PHP dan Rails biasa, inilah saatnya memperkenalkan walk-through berikutnya: Python! Dalam tutorial ini, kita akan membangun kembali Ribbit menggunakan Django. Tanpa penundaan lebih lanjut, mari kita mulai!

Home Page

Langkah 0 - Bootstrapping

Pada saat penulisan ini, Django 1.4 mendukung Python 2.5 hingga 2.7.3. Sebelum melanjutkan, pastikan Anda memiliki versi apt dengan menjalankan python-v di terminal. Perhatikan bahwa Python 2.7.3 lebih disukai. Di seluruh tutorial ini, kita akan menggunakan pip sebagai manajer paket dan virtualenv untuk mengatur Lingkungan Virtual. Untuk menginstal ini, jalankan terminal dan jalankan perintah berikut sebagai root

Untuk mengatur lingkungan pengembangan Django, kita akan memulai dengan menciptakan Lingkungan Virtual. Jalankan perintah berikut di terminal (lebih disukai di dalam direktori pengembangan Anda)

Dengan Lingkungan Virtual, mengatur dan mengaktifkan (command prompt Anda harus diubah untuk mencerminkan nama lingkungan), mari kita lanjutkan dengan menginstal dependensi untuk proyek. Selain Django, kita akan menggunakan South untuk menangani migrasi basis data. Kita akan menggunakan pip untuk menginstal keduanya dengan mengeksekusi. Perhatikan bahwa mulai sekarang, kita akan melakukan segala sesuatu di dalam virtualenv. Karena itu, pastikan bahwa itu diaktifkan sebelum melanjutkan.

Dengan semua pengaturan dependensi, kita siap untuk melanjutkan pembuatan Proyek Django baru.


Langkah 1 - Membuat Proyek dan Aplikasi Ribbit

Kita akan mulai dengan membuat proyek Django baru dan aplikasi. cd ke direktori pilihan Anda dan jalankan:

Selanjutnya, kita akan menginisialisasi repositori git kita dan membuat file .gitignore di dalam proyek Ribbit yang baru kita buat. Untuk melakukannya, jalankan:

Mari kita lanjutkan ke pengeditan ribbit/settings.py dan konfigurasi proyek. Pertama, kita akan mendefinisikan beberapa konstanta. Tambahkan yang berikut ini ke bagian atas file:

PROJECT_PATH akan menyimpan lokasi direktori tempat settings.py disimpan. Ini akan memungkinkan kita untuk menggunakan jalur relatif untuk konstanta masa depan. LOGIN_URL, sesuai namanya, menunjukkan bahwa akar situs kita adalah URL untuk Login.

Lanjut, mari konfigurasi database. Untuk lingkungan pengembangan, sqlite3 adalah pilihan ideal. Untuk melakukannya, edit konstanta DATABASES dengan nilai-nilai berikut:

Django menemukan file statis dari direktori yang disebutkan di STATIC_ROOT konstan dan rute permintaan ke file ke jalur yang ditentukan dalam STATIC_URL. Konfigurasikan mereka sehingga mencerminkan hal-hal berikut:

Perhatikan penggunaan os.path.join(). Fungsi ini memungkinkan kita untuk secara relatif menentukan jalur menggunakan konstanta PROJECT_PATH yang telah kita definisikan sebelumnya.

Selanjutnya, kita perlu menentukan lokasi yang perlu dilihat Django untuk menemukan file template. Kita akan mengedit konstanta TEMPLATE_DIRS untuk menentukan jalur.

Terakhir, mari tambahkan South dan ribbit_app ke daftar INSTALLED_APPS.

Selanjutnya, mari kita buat direktori yang ditentukan dalam pengaturan dan membuat database:

Perintah syncdb akan membuat tabel yang diperlukan dan membuat akun superuser. Karena menggunakan South untuk migrasi, kita membuat migrasi awal untuk aplikasi menggunakan sintaksis schemamigration<app_name> --initial dan menerapkannya dengan phyton manage.py migrate ribbit_app

Mari kita mulai server pengembangan untuk memastikan semuanya berfungsi dengan benar.

Jika semuanya memang bagus, Anda harus disambut dengan halaman berikut ketika Anda mengunjungi http://localhost:8000

Landing Page

Selanjutnya, pohon proyek akan terlihat seperti:

Sebelum beralih ke langkah berikutnya, mari lakukan perubahan pada repo.


Langkah 2 - Template Dasar dan File Statis

Mengikuti dari tutorial antarmuka, unduh aset dan letakkan di dalam direktori ribbit_app/statis. Kita perlu melakukan beberapa pengeditan untuk style.less untuk tutorial ini. Mari mulai dengan menambahkan beberapa gaya untuk flash.

Selanjutnya, mari kita perbarui lebar elemen input dan tambahkan kelas kesalahan untuk hal yang sama. Perhatikan bahwa kode di bawah ini hanya berisi gaya yang perlu ditambahkan atau diperbarui. Kode yang tersisa tetap tak tersentuh.

Kita juga perlu menambah tinggi #content.wrapper.panel.right.

Terakhir, mari tambahkan margin kanan ke gambar footer.

Sebelum berpindah, mari lakukan perubahan:

Selanjutnya, mari buat template dasar, yang akan diwarisi oleh semua template lain. Django menggunakan mesin templatingnya sendiri (seperti ERB atau Jade). Tentukan template dalam ribbit/templates/base.html dengan konten berikut:

Pada markup di atas, {{ STATIC_URL }} mencetak lintasan untuk url statis yang ditentukan di settings.py. Fitur lainnya adalah penggunaan blok. Semua konten blok diwariskan ke sub-kelas dari template dasar, dan tidak akan ditimpa kecuali blok secara eksplisit didefinisikan ulang di dalamnya. Ini memberi kita fleksibilitas untuk menempatkan tautan navigasi di tajuk dan menggantinya dengan formulir masuk jika pengguna tidak masuk. Kita juga menggunakan blok dengan kondisi if untuk memeriksa apakah salah satu variabel flash tidak kosong dan merender pesan dengan tepat.

Baiklah! Saatnya membuat komitmen lain:


Langkah 3 - Membuat Model

Salah satu hal terbaik tentang Django adalah bahwa ia menyertakan beberapa model dan bentuk, yang dapat dikesampingkan untuk memenuhi berbagai tujuan. Untuk aplikasi, kita akan menggunakan model User dan menambahkan beberapa properti ke dalamnya dengan membuat Model UserProfile. Lebih lanjut, untuk mengelola pita, kita juga akan membuat Model Ribbit. Model User yang disediakan oleh Django mencakup bidang untuk menyimpan nama pengguna, kata sandi, nama depan dan belakang dan alamat email (dengan validasi) bersama dengan banyak lainnya. Saya menyarankan Anda untuk melihat API untuk mengetahui tentang semua bidang yang didukung secara default. Tambahkan kode berikut untuk model di ribbit_app/models.py.

Mari kita mulai dengan Model Ribbit. Atribut termasuk CharField dengan panjang maksimum 140 karakter untuk menyimpan konten, model ForeignKey to User (sehingga kita memiliki hubungan antara dua model) dan DateTimeField yang secara otomatis diisi dengan waktu ketika instance dari model disimpan.

Pindah ke Model UserProfile, kita memiliki bidang OneToOne yang mendefinisikan hubungan Satu ke Satu dengan Model User dan bidang ManyToMany untuk menerapkan hubungan follows/followed_by. Parameter related_name memungkinkan kita untuk menggunakan relasi mundur menggunakan nama pilihan kita. Kita juga telah menetapkan symmetrical ke False untuk memastikan bahwa jika Pengguna A mengikuti B maka Pengguna B tidak secara otomatis mengikuti A. Kita juga telah mendefinisikan fungsi untuk mendapatkan tautan ke gambar gravatar berdasarkan url pengguna dan properti untuk dapatkan (jika UserProfile ada untuk pengguna) atau buat satu saat kita menggunakan sintaks <user_object>.profile. Ini memungkinkan kita untuk mengambil properti UserProfile dengan mudah. Berikut ini contoh bagaimana Anda dapat menggunakan ORM untuk mendapatkan pengguna bahwa User yang diberikan mengikuti dan diikuti oleh:

Sekarang setelah model kita ditentukan, mari hasilkan migrasi dan terapkan:

Sebelum melanjutkan, mari lakukan perubahan


Langkah 4 - Membuat Formulir

Django memungkinkan kita untuk membuat formulir sehingga kita dapat dengan mudah memvalidasi data yang diterima oleh pengguna untuk ketidakberesan. Kita akan membuat formulir kustom untuk Model Ribbit dan membuat formulir yang mewarisi UserCreationForm yang disediakan secara default untuk mengelola pendaftaran. Untuk mengelola otentikasi, kita akan memperluas AuthenticationForm yang disediakan secara default di Django. Mari buat file baru ribbit_app/forms.py dan tambahkan impor.

Mari kita mulai dengan membuat formulir pendaftaran. Kita akan menamakannya UserCreateForm dan kode itu diberikan di bawah ini:

Dalam formulir di atas, kita telah secara eksplisit mengatur beberapa bidang sebagai wajib dengan meneruskan required=True. Selanjutnya, saya telah menambahkan atribut placeholder ke berbagai widget yang digunakan oleh formulir. Kelas bernama error juga ditambahkan ke bidang yang berisi kesalahan. Ini dilakukan dalam fungsi is_valid(). Akhirnya, di kelas Meta, kita dapat menentukan urutan di mana kita ingin bidang formulir kita untuk membuat dan mengatur model terhadap mana formulir harus divalidasi.

Selanjutnya, mari tulis formulir untuk autentikasi:

Seperti pada UserCreateForm, AuthenticateForm menambahkan beberapa placeholder dan kelas error.

Akhirnya, mari kita selesaikan formulir, untuk menerima Ribbit baru.

Opsi pengecualian di kelas Meta di atas mencegah bidang pengguna dirender. Kita tidak membutuhkannya karena pengguna Ribbit akan diputuskan dengan menggunakan sesi.

Mari lakukan perubahan yang telah kita buat sejauh ini


Langkah 5 - Menerapkan Pendaftaran dan Login

Django menawarkan fleksibilitas yang hebat dalam hal routing. Mari kita mulai dengan menentukan beberapa rute di ribbit/urls.py.

Selanjutnya, mari kita menggunakan model dan formulir yang baru saja kita buat dan tulis tampilan yang terkait untuk setiap rute yang baru saja kita tetapkan.. Mari kita mulai dengan menambahkan impor di ribbit_app/views.py.

Diikuti oleh tampilan indeks:

Untuk tampilan indeks, pertama-tama periksa apakah pengguna masuk atau tidak dan render templatnya. Querysets ribbits_self dan ribbits_buddies digabungkan dengan | operator dalam kode di atas. Juga, kita memeriksa apakah instance dari formulir telah diteruskan ke metode (dalam definisi fungsi) dan jika tidak kita buat yang baru. Ini memungkinkan kita untuk mengirimkan instance formulir ke template yang sesuai dan merender kesalahan.

Mari lanjutkan dengan mengedit 'home.html' template yang akan digunakan untuk menampilkan halaman indeks untuk pengguna anonim. Dalam file ribbit/templates/home.html, tambahkan kode berikut.

Dalam template, kita mewarisi template dasar yang didefinisikan sebelumnya, merender otentikasi dan mendaftar formulir dengan mengganti blok login. Suatu hal yang rapi tentang Django adalah bahwa itu membuat CSRF Protection cukup mudah! Yang perlu Anda lakukan adalah menambahkan csrf_token di setiap formulir yang Anda gunakan dalam template.

Mari kita lanjutkan ke template buddies.html, yang akan menampilkan halaman Ribbit Sobat. Edit ribbit/templates/buddies.html dan tambahkan kode berikut:

Dalam template ini, kita menyediakan template induk yaitu base.html dengan nilai nama pengguna sehingga tautan navigasi untuk yang tercatat dalam profil User dirender dengan benar. Kita juga menggunakan turunan RibbitForm untuk menerima Ribbits baru dan mengulanginya dan menunjukkan pita saat ini oleh teman-teman.

Dengan templat selesai, mari kita lanjutkan dan menulis kode untuk masuk/keluar pengguna. Tambahkan kode berikut ke ribbit_app/views.py

Pandangan untuk login mengharapkan permintaan HTTP POST untuk login (karena metode form adalah POST). Ini memvalidasi formulir dan, jika berhasil, login pengguna menggunakan login() metode yang memulai sesi dan kemudian mengarahkan ke url root. Jika validasi gagal, kita meneruskan instance dari auth_form yang diterima dari pengguna ke fungsi indeks dan daftar kesalahan, sedangkan, jika permintaan tidak POST maka pengguna diarahkan ke url root.

Tampilan logout relatif lebih sederhana. Ini memanfaatkan fungsi logout() di Django yang menghapus sesi dan log pengguna keluar diikuti dengan mengarahkan ke url root.

Kita sekarang perlu menulis tampilan untuk mendaftar dan mendaftarkan pengguna. Tambahkan kode berikut ke ribbit_app/views.py.

Mirip dengan tampilan login, tampilan pendaftaran mengharapkan permintaan POST juga dan mengarahkan ke url root jika cek gagal. Jika formulir Sign Up valid, pengguna disimpan ke database, dikonfirmasi, masuk dan kemudian dialihkan ke halaman beranda. Jika tidak, kita memanggil fungsi indeks dan meneruskan instance dari user_form yang dikirimkan oleh pengguna untuk daftar kesalahan.

Mari kita periksa kemajuan kami dengan memulai server dan menguji pandangan yang telah kami tulis sejauh ini secara manual.

Mari kunjungi Server Pengembangan kita dan coba daftarkan pengguna baru. Jika semua berjalan dengan baik, Anda harus disajikan dengan halaman 'Ribbits Teman'. Kita dapat keluar dan mengautentikasi ulang pengguna yang baru dibuat untuk memeriksa apakah fungsi masuk berfungsi seperti yang diharapkan.

Buddies

Saatnya melakukan perubahan!


Langkah 6 - Menerima Ribbits baru dan Cantumkan Ribbits Publik

Dalam template buddies.html yang dibuat sebelumnya, ribbit_form telah dikirim ke /submit. Mari kita edit ribbit/urls.py dan tambahkan rute untuk formulir dan halaman untuk mencantumkan semua ribbits publik.

Mari menulis pandangan untuk memvalidasi dan menyimpan pita yang dikirim. Buka ribbit_app/views.py dan tambahkan kode berikut:

Tampilan menggunakan dekorator @login_required, yang hanya menjalankan fungsi jika pengguna diautentikasi; lain, pengguna dialihkan ke jalur yang ditentukan dalam LOGIN_URL konstan dalam pengaturan. Jika validasi form berhasil, kita secara manual mengatur pengguna ke yang ada dalam sesi dan kemudian menyimpan catatan. Setelah database komit, pengguna diarahkan ke jalur yang ditentukan dalam bidang next_url yang merupakan bidang formulir tersembunyi yang secara manual dimasukkan dalam template untuk tujuan ini. Nilai next_url diteruskan dalam tampilan yang merender Form Ribbit.

Pindah, mari kita menulis pandangan ke daftar 10 Ribbit Publik terakhir. Tambahkan hal berikut di ribbit_app/views.py

Di tampilan publik, kita meminta database untuk 10 ribbits terakhir dengan mengiris queryset ke 10 elemen terakhir. Bentuk bersama dengan ribbits kemudian diberikan ke template. Mari buat ribbit/templates/public.html untuk tampilan ini

Saat mengulang objek ribbit, template menggunakan tag template timesince untuk secara otomatis menentukan perbedaan waktu antara tanggal pembuatan rusuk dan waktu saat ini, dan mencetaknya dengan cara seperti Twitter.

Memastikan bahwa server pengembangan sedang berjalan, buatlah sebuah ribbit baru dan lihatlah halaman Public Ribbits untuk memastikan semuanya baik-baik saja.

First Ribbit

Mari lakukan perubahan sebelum melanjutkan:


Langkah 7 - User Profiles dan Following Users

Sebuah klon twitter, User Profiles dan Following Users berjalan beriringan. Mari tulis rute untuk menerapkan fungsi ini. Perbarui ribbit/urls.py dengan kode berikut:

Rute yang menarik di atas adalah yang mengarahkan ke profil pengguna tertentu. <?P<username> menangkap nama pengguna yang ditanyakan melalui GET, dan \w{0,30} menegaskan bahwa panjang maksimum untuk nama pengguna adalah 30 karakter:

Selanjutnya, kita akan melanjutkan dengan menulis tampilan untuk membuat User Profiles. Tambahkan hal berikut di `ribbit_app/views.py '.

Pandangan ini mungkin yang paling menarik dari semua yang telah dibahas sejauh ini. Kita mulai dengan memastikan bahwa hanya pengguna yang masuk yang dapat melihat profil. Di rute yang kita tentukan di ribbit/urls.py, kita menulis satu untuk menangkap nama pengguna. Parameter yang ditangkap ini secara otomatis dipanggil bersama dengan objek permintaan dalam tampilan pengguna. Kita menemukan dua opsi untuk tampilan ini:

  • Nama pengguna diteruskan ke url untuk merender profil pengguna tertentu
  • Tidak ada nama pengguna yang disahkan yang berarti pengguna ingin melihat semua profil

Kita mulai dengan memeriksa apakah nama pengguna dilewatkan dan tidak kosong. Kemudian, kita mencoba mengambil objek User untuk nama pengguna yang sesuai. Perhatikan penggunaan blok tangkap percobaan dalam kode di atas. Kita hanya menaikkan pengecualian Http404 yang disediakan oleh Django untuk mengarahkan ke default 404 template. Selanjutnya, kita perlu memeriksa apakah profil yang diminta adalah pengguna yang masuk atau salah satu temannya. Jika demikian, kita tidak perlu membuat tautan mengikuti di profil karena relasi sudah ditetapkan. Jika tidak, kita meneruskan parameter follow berikut dalam tampilan untuk mencetak tautan Follow.

Pindah ke poin kedua, jika tidak ada nama pengguna yang diberikan dalam url, kita mengambil daftar semua pengguna dan menggunakan fungsi annotate() untuk menambahkan atribut ribbit_count ke semua objek, yang menyimpan jumlah Ribbits yang dibuat oleh setiap pengguna dalam kueri. Ini memungkinkan kita untuk menggunakan sesuatu di sepanjang baris <user_object>.ribbit_count untuk mengambil Ribbit Count dari pengguna.

Mendapatkan Ribbit terbaru oleh setiap pengguna agak sedikit rumit. Kita menggunakan Python yang dibangun di map() berfungsi untuk ini dan memanggil get_latest() ke semua elemen kueri pengguna. Fungsi get_latest() didefinisikan dalam kode di atas dan memanfaatkan relasi balik pada relasi User <--> Ribbit. Misalnya user.ribbit_set.all() akan mengembalikan semua ribbits oleh pengguna. Kita memesan ribbits dengan id dalam urutan menurun dan memotong elemen pertama. Kode ini diapit dalam blok try catch untuk menangkap pengecualian jika tidak ada ribbits yang dibuat oleh pengguna. Kita kemudian memanfaatkan fungsi Python zip() untuk menghubungkan setiap elemen dari kedua iterator (pengguna dan pita) sehingga kita memiliki tuple dengan Obyek Pengguna dan pasangan Ribbit Terbaru. Kita kemudian meneruskan objek zip ini bersama dengan formulir ke templat. Mari tulis tampilan terakhir yang akan menerima permintaan untuk mengikuti pengguna

Pada tampilan di atas, kita mendapatkan nilai follow parameter, dilewatkan oleh POST. Jika id diset, kita memeriksa apakah ada pengguna dan menambahkan relasinya, yang lain, kita menangkap pengecualian ObjectDoesNotExist dan mengalihkan pengguna ke halaman yang mencantumkan semua Profil Pengguna.

Kita sudah selesai dengan pandangan di sini. Mari tulis dua templat yang tersisa yang diperlukan untuk merender profil pengguna. Buka editor teks Anda dan edit ribbit/templates/profiles.html.

Untuk membuat daftar pengguna bersama dengan ribbit terakhirnya, kita menggunakan konstruksi python umum untuk mengulang daftar tuple: for user, ribbit in obj. Di dalam loop kita mencetak informasi tentang pengguna bersama dengan statistik ribbit-nya. Perhatikan penggunaan relasi backward di {{user.profile.followed_by.count}}. following_by adalah nama terkait yang kita tetapkan saat mendefinisikan atribut ManyToManyField untuk Model UserProfile.

Akhirnya, mari tulis template untuk mencantumkan profil pengguna tertentu. Tuliskan kode berikut dalam ribbit/templates/user.html.

Seperti di template buddies.html, kita meneruskan nama pengguna dari template yang sudah masuk ke template induk menggunakan konstruksi {% with%}. Selanjutnya, kita menampilkan profil pengguna dan menampilkan tautan berikut hanya jika variabel follow disetel ke True. Setelah itu, kita daftar semua ribbits yang dibuat oleh pengguna dengan iterasi atas variabel ribbits.

Kita akhirnya selesai dengan semua tampilan dan templat. Jelajahi semua tautan dan coba pengguna dummy berikut dan jelajahi klon Twitter yang baru saja Anda buat.

Mari lakukan perubahan:


Langkah 8 - Deployment ke Heroku

Saya lebih suka menjaga cabang pengembangan dan produksi saya terpisah; git membuat percabangan menjadi mudah. Jalankan terminal dan laksanakan yang berikut:

Ini akan membuat cabang produksi dan segera beralih ke sana. Mari perbarui file .gitignore dan tambahkan database ke dalamnya. Isinya seharusnya

Mari instal beberapa paket ke virtualenv yang diperlukan untuk penyebaran.

Kita juga akan membuat file dengan semua dependensi proyek sehingga mereka diambil oleh Heroku.

Selanjutnya, mari kita edit ribbit/settings.py. Pengaturan basis data harus diubah seperti.

Di akhir file, tambahkan yang berikut ini sehingga Heroku dapat mengetahui pengaturan basis data.

Mari buat Procfile untuk memulai proses di server Heroku. Tempatkan yang berikut ini dalam sebuah file, bernama Procfile.

Selain itu, jika aplikasi Anda tidak berskala besar, Anda dapat melewati layanan penyimpanan dengan menambahkan rute untuk file statis di dalam ribbit/urls.py

Kita sudah siap! Mari lakukan perubahan ini:

Akhirnya, kita akan membuat aplikasi Heroku dan mendorong repo ke repositori jarak jauh:

Setelah file ditransfer, jalankan syncdb dan terapkan migrasi ke database.

Terakhir, buka aplikasi yang diterapkan dengan:


Kesimpulan

Kita akhirnya selesai dengan Ribbit di Django! Tutorial ini cukup panjang, memang, dan aplikasi masih memiliki lebih banyak potensi yang dapat diimplementasikan. Saya harap, jika Anda baru mengenal Django, artikel ini telah mendorong Anda untuk menggali lebih dalam.

Jangan ragu untuk bermain bersama dengan penyebaran saya di Heroku. Jika Anda memiliki pertanyaan, saya akan senang menjawab dan semua pertanyaan.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.