Tutorial: Mulai menggunakan kerangka kerja web Django di Visual Studio

Django adalah kerangka kerja Python tingkat tinggi yang dirancang untuk pengembangan web yang cepat, aman, dan skalabel. Tutorial ini mengeksplorasi kerangka kerja Django dalam konteks templat proyek. Visual Studio menyediakan templat proyek untuk menyederhanakan pembuatan aplikasi web berbasis Django.

Dalam tutorial ini, Anda akan mempelajari cara:

• Buat proyek Django dasar di repositori Git menggunakan templat "Proyek Web Django Kosong" (langkah 1).
• Buat aplikasi Django dengan satu halaman dan render halaman tersebut menggunakan templat (langkah 2).
• Menyajikan file statis, menambahkan halaman, dan menggunakan pewarisan templat (langkah 3).
• Gunakan templat Proyek Web Django untuk membuat aplikasi dengan beberapa halaman dan desain responsif (langkah 4).
• Mengautentikasi pengguna (langkah 5).

Prasyarat

• Visual Studio 2022 di Windows dengan opsi berikut:
  • Beban kerja pengembangan Python (tab Beban Kerja di alat penginstal). Untuk petunjuk selengkapnya, lihat Menginstal dukungan Python di Visual Studio.
  • Git untuk Windows pada tab Komponen individual di bawah Alat kode.

Templat proyek Django juga menyertakan versi Python Tools yang lebih lama untuk Visual Studio. Detail templat mungkin berbeda dari apa yang dibahas dalam tutorial ini (terutama berbeda dengan versi kerangka kerja Django yang lebih lama).

Pengembangan Python saat ini tidak didukung di Visual Studio untuk Mac. Di Mac dan Linux, gunakan Ekstensi Python di Visual Studio Code.

"Visual Studio proyek" dan "proyek Django"

Dalam terminologi Django, "proyek Django" memiliki beberapa file konfigurasi tingkat situs bersama dengan satu atau beberapa "aplikasi." Untuk membuat aplikasi web lengkap, Anda dapat menyebarkan aplikasi ini ke host web. Proyek Django dapat berisi beberapa aplikasi, dan aplikasi yang sama dapat berada di beberapa proyek Django.

Proyek Visual Studio dapat berisi proyek Django bersama dengan beberapa aplikasi. Setiap kali tutorial ini hanya mengacu pada "proyek", itu mengacu pada proyek Visual Studio. Ketika mengacu pada bagian "proyek Django" dari aplikasi web, itu mengacu pada "proyek Django" secara khusus.

Selama tutorial ini, Anda akan membuat satu solusi Visual Studio yang berisi tiga proyek Django terpisah. Setiap proyek berisi satu aplikasi Django. Anda dapat dengan mudah beralih di antara file yang berbeda untuk perbandingan, dengan menjaga proyek dalam solusi yang sama.

Langkah 1-1: Membuat proyek dan solusi Visual Studio

Saat bekerja dengan Django dari baris perintah, Anda biasanya memulai proyek dengan menjalankan perintah django-admin startproject <project_name>. Dalam Visual Studio, templat "Proyek Web Django Kosong" menyediakan struktur yang sama dalam proyek dan solusi Visual Studio.

1. Di Visual Studio, pilih File>Baru>Proyek, telusuri "Django", dan pilih Proyek Web Django Kosong templat, lalu pilih Berikutnya.

   

2. Masukkan informasi berikut, lalu pilih Buat:

   • Nama Proyek: Atur nama proyek Visual Studio ke BasicProject. Nama ini juga digunakan untuk proyek Django.
   • Lokasi: Tentukan lokasi untuk membuat solusi dan proyek Visual Studio.
   • Solusi: Biarkan kontrol ini diatur ke opsi Buat solusi baru default.
   • Nama solusi: Atur ke LearningDjango, yang sesuai untuk solusi sebagai kontainer untuk beberapa proyek dalam tutorial ini.

Langkah 1-2: Periksa kontrol Git dan terbitkan ke repositori jarak jauh

Dalam langkah ini, Anda akan membiasakan diri dengan kontrol Git Visual Studio dan Team Explorer. Dengan jendela Team Explorer, Anda akan bekerja dengan kontrol sumber.

1. Untuk menerapkan proyek ke kontrol sumber lokal Anda:

   1. Pilih perintah Tambahkan ke Kontrol Sumber di sudut bawah jendela utama Visual Studio.
   2. Kemudian, pilih opsi Git.
   3. Sekarang, Anda dibawa ke jendela Buat repositori Git, tempat Anda dapat membuat dan mendorong repositori baru.

   

2. Setelah membuat repositori, satu set kontrol Git baru muncul di bagian bawah. Dari kiri ke kanan, kontrol ini menunjukkan penerapan yang tidak dipublikasikan, perubahan yang tidak dilakukan, cabang saat ini, dan nama repositori.

   

3. Pilih tombol Git perubahan. Visual Studio kemudian membuka halaman Perubahan Git di Team Explorer. Anda tidak melihat perubahan yang tertunda karena proyek yang baru dibuat sudah diterapkan untuk kontrol sumber secara otomatis.

   

4. Pada bilah status Visual Studio, pilih tombol penerapan yang tidak dipublikasikan (panah atas dengan 2) untuk membuka halaman Sinkronisasi di Team Explorer. Halaman Sinkronisasi menyediakan opsi mudah untuk menerbitkan repositori lokal ke repositori jarak jauh yang berbeda.

   

   Anda dapat memilih layanan apa pun yang Anda inginkan untuk proyek Anda. Tutorial ini menunjukkan penggunaan GitHub, di mana kode sampel yang selesai untuk tutorial dipertahankan dalam repositori Microsoft/python-sample-vs-learning-django.

5. Saat memilih salah satu kontrol Terbitkan, Team Explorer meminta informasi selengkapnya. Misalnya, saat menerbitkan sampel untuk tutorial ini, repositori itu sendiri harus dibuat terlebih dahulu, dalam hal ini, opsi Dorong ke Repositori Jarak Jauh digunakan dengan URL repositori.

   

   Jika Anda tidak memiliki repositori yang sudah ada, opsi Terbitkan ke GitHub dan Dorong ke Azure DevOps memungkinkan Anda membuatnya langsung dari dalam Visual Studio.

6. Saat Anda bekerja melalui tutorial ini, masuk ke kebiasaan secara berkala menggunakan kontrol di Visual Studio untuk menerapkan dan mendorong perubahan. Tutorial ini mengingatkan Anda pada titik yang sesuai.

Tip

Untuk menavigasi dengan cepat dalam Team Explorer, pilih header (yang membaca Perubahan atau Pendorongan pada gambar di atas) untuk melihat menu pop-up halaman yang tersedia.

Pertanyaan: Apa saja keuntungan menggunakan kontrol sumber dari awal proyek?

Jawaban: Kontrol sumber sejak awal, terutama jika Anda juga menggunakan repositori jarak jauh, menyediakan cadangan reguler di luar lokasi proyek Anda. Tidak seperti mempertahankan proyek pada sistem file lokal, kontrol sumber menyediakan riwayat perubahan lengkap dan kemampuan mudah untuk mengembalikan satu file atau seluruh proyek ke keadaan sebelumnya. Riwayat perubahan membantu menentukan penyebab regresi (kegagalan pengujian). Ketika beberapa orang mengerjakan proyek, kontrol sumber mengelola penimpaan dan memberikan resolusi konflik.

Terakhir, kontrol sumber, yang pada dasarnya merupakan bentuk otomatisasi, mengatur Anda untuk mengotomatiskan build, pengujian, dan manajemen rilis. Ini adalah langkah pertama dalam menggunakan DevOps untuk proyek. Benar-benar tidak ada alasan untuk tidak menggunakan kontrol sumber dari awal karena hambatan untuk masuk rendah.

Untuk diskusi lebih lanjut tentang kontrol sumber sebagai otomatisasi, lihat Sumber Kebenaran: Peran Repositori di DevOps, artikel di Majalah MSDN yang ditulis untuk aplikasi seluler yang juga berlaku untuk aplikasi web.

Pertanyaan: Bisakah saya mencegah Visual Studio melakukan autocommiting proyek baru?

Jawaban: Bisa. Untuk menonaktifkan autocommit, buka halaman Pengaturan di Team Explorer. Pilih Pengaturan Git>Global, kosongkan opsi berlabel Terapkan perubahan setelah digabungkan secara default, lalu pilih Perbarui.

Langkah 1-3: Buat lingkungan virtual dan kecualikan dari kontrol sumber

Setelah mengonfigurasi kontrol sumber untuk proyek, Anda dapat membuat lingkungan virtual yang berisi paket Django yang diperlukan untuk proyek. Anda kemudian dapat menggunakan Team Explorer untuk mengecualikan folder lingkungan dari kontrol sumber.

1. Di Penjelajah Solusi, klik kanan node Lingkungan Python dan pilih Tambahkan Lingkungan.

   

2. Pilih Buat untuk menerima default, dalam dialog Tambahkan Lingkungan Virtual. (Anda dapat mengubah nama lingkungan virtual jika mau, yang hanya mengubah nama subfoldernya, tetapi env merupakan konvensi standar.)

   

3. Persetujuan untuk hak istimewa administrator jika diminta, maka tunggu beberapa menit sambil Visual Studio mengunduh dan menginstal paket. Selama waktu ini, ribuan file ditransfer ke banyak subfolder. Anda dapat melihat kemajuannya di jendela Output Visual Studio. Saat Anda menunggu, renungkan bagian Pertanyaan berikut.

4. Pada Visual Studio kontrol Git (pada bilah status), pilih indikator perubahan (yang memperlihatkan 99*) yang membuka halaman Perubahan di Team Explorer.

   Pembuatan lingkungan virtual membawa ribuan perubahan, tetapi Anda tidak perlu menyertakan salah satunya dalam kontrol sumber karena Anda (atau orang lain yang mengkloning proyek) selalu dapat membuat ulang lingkungan dari requirements.txt.

5. Untuk mengecualikan lingkungan virtual, klik kanan folder env dan pilih Abaikan item lokal ini.

   

6. Setelah mengecualikan lingkungan virtual, satu-satunya perubahan yang tersisa adalah pada file proyek dan file .gitignore. File .gitignore berisi entri tambahan untuk folder lingkungan virtual. Anda dapat mengeklik dua kali file untuk melihat diff.

7. Masukkan pesan penerapan dan pilih tombol Terapkan Semua, lalu dorong penerapan ke repositori jarak jauh Anda.

Pertanyaan: Mengapa saya ingin membuat lingkungan virtual?

Jawaban: Lingkungan virtual adalah cara yang bagus untuk mengisolasi dependensi aplikasi Anda yang tepat. Isolasi tersebut menghindari konflik dalam lingkungan Python global, dan membantu pengujian dan kolaborasi. Seiring waktu, saat Anda mengembangkan aplikasi, Anda selalu membawa banyak paket Python yang bermanfaat. Anda dapat dengan mudah memperbarui file requirements.txt proyek dengan menyimpan paket di lingkungan virtual khusus proyek. File requirements.txt menjelaskan lingkungan, yang disertakan dalam kontrol sumber. Ketika proyek disalin ke komputer lain, termasuk server build, server penyebaran, dan komputer pengembangan lainnya, mudah untuk membuat ulang lingkungan hanya menggunakan requirements.txt (itulah sebabnya lingkungan tidak perlu berada dalam kontrol sumber). Untuk informasi selengkapnya, lihat Menggunakan lingkungan virtual.

Pertanyaan: Bagaimana cara menghapus lingkungan virtual yang sudah diterapkan pada kontrol sumber?

Jawaban: Pertama, edit file .gitignore Anda untuk mengecualikan folder. Temukan bagian di akhir dengan komentar # Python Tools for Visual Studio (PTVS) dan tambahkan baris baru untuk folder lingkungan virtual, seperti /BasicProject/env. (Visual Studio tidak menampilkan file di Penjelajah Solusi. Untuk membuka file secara langsung, buka File>Buka>File. Anda juga dapat membuka file dari Team Explorer. Buka halaman Pengaturan dan pilih Repositori Pengaturan. Sekarang, navigasikan ke bagian Abaikan & File Atribut dan pilih tautan Edit di samping .gitignore.)

Kedua, buka jendela perintah, navigasikan ke folder seperti BasicProject. Folder BasicProject berisi folder lingkungan virtual seperti env, dan jalankan git rm -r env. Kemudian terapkan perubahan tersebut dari baris perintah (git commit -m 'Remove venv') atau terapkan dari halaman PerubahanTeam Explorer.

Langkah 1-4: Periksa kode boilerplate

Setelah pembuatan proyek selesai, periksa kode proyek Django boilerplate (yang lagi-lagi sama seperti yang dihasilkan oleh perintah CLI django-admin startproject <project_name>).

1. Akar proyek Anda memiliki manage.py, utilitas administratif baris perintah Django yang Visual Studio secara otomatis ditetapkan sebagai file startup proyek. Anda menjalankan utilitas pada baris perintah menggunakan python manage.py <command> [options]. Untuk tugas Django umum, Visual Studio menyediakan perintah menu yang nyaman. Klik kanan proyek di Penjelajah Solusi dan pilih Python untuk melihat daftar. Anda akan menemukan beberapa perintah ini dalam tutorial ini.

   

2. Dalam proyek Anda, ada folder dengan nama yang sama dengan proyek. Ini berisi file proyek Django dasar:

   • __init.py: File kosong yang memberi tahu Python bahwa folder ini adalah paket Python.
   • settings.py: Berisi pengaturan untuk proyek Django, yang akan Anda ubah selama mengembangkan aplikasi web.
   • urls.py: Berisi daftar isi untuk proyek Django, yang juga akan Anda ubah selama pengembangan.
   • wsgi.py: Titik masuk untuk server web yang kompatibel dengan WSGI untuk melayani proyek Anda. Anda biasanya membiarkan file ini apa adanya, karena menyediakan hook untuk server web produksi.

   

3. Seperti disebutkan sebelumnya, templat Visual Studio juga menambahkan file requirements.txt ke proyek Anda yang menentukan dependensi paket Django. Kehadiran file inilah yang mengundang Anda untuk membuat lingkungan virtual saat pertama kali membuat proyek.

Pertanyaan: Dapatkah Visual Studio menghasilkan file requirements.txt dari lingkungan virtual setelah saya menginstal paket lain?

Jawaban: Bisa. Perluas node Lingkungan Python, klik kanan lingkungan virtual Anda, dan pilih perintah Buat requirements.txt. Ada baiknya untuk menggunakan perintah ini secara berkala saat Anda memodifikasi lingkungan, dan menerapkan perubahan pada requirements.txt ke kontrol sumber bersama dengan perubahan kode lain yang bergantung pada lingkungan tersebut. Jika Anda menyiapkan integrasi berkelanjutan di server build, Anda harus menghasilkan file dan menerapkan perubahan setiap kali Anda memodifikasi lingkungan.

Langkah 1-5: Jalankan proyek Django kosong

1. Di Visual Studio, pilih Debug>Mulai Penelusuran Kesalahan (F5) atau gunakan tombol Server Web pada toolbar (browser yang Anda lihat mungkin bervariasi):

   

2. Menjalankan server berarti menjalankan perintah manage.py runserver <port>, yang memulai server pengembangan bawaan Django. Jika Visual Studio mengatakan Gagal memulai debugger dengan pesan tentang tidak memiliki file startup, klik kanan manage.py di Penjelajah Solusi dan pilih Atur sebagai File Startup.

3. Saat memulai server, Anda akan melihat jendela konsol terbuka yang juga menampilkan log server. Visual Studio secara otomatis membuka browser ke http://localhost:<port>. Karena proyek Django tidak memiliki aplikasi, Django hanya menunjukkan halaman default untuk mengonfirmasi bahwa apa yang Anda miliki sejauh ini berfungsi dengan baik.

   

4. Setelah selesai, hentikan server dengan menutup jendela konsol, atau dengan menggunakan perintah Debug>Hentikan Penelusuran Kesalahan di Visual Studio.

Pertanyaan: Apakah Django adalah server web dan kerangka kerja?

Jawaban: Ya dan tidak. Django memiliki server web bawaan yang digunakan untuk tujuan pengembangan. Server web ini digunakan saat Anda menjalankan aplikasi web secara lokal, seperti saat penelusuran kesalahan di Visual Studio. Namun, ketika Anda menyebarkan ke host web, Django menggunakan server web host sebagai gantinya. Modul wsgi.py dalam proyek Django mengurus pengait ke server produksi.

Pertanyaan: Apa perbedaan antara menggunakan perintah menu Debug dan perintah server pada submenu Python proyek?

Jawaban: Selain perintah menu Debug dan tombol bilah alat, Anda juga dapat meluncurkan server menggunakan Python>Jalankan server atau Python >Jalankan perintah server debug pada menu konteks proyek. Kedua perintah membuka jendela konsol tempat Anda akan melihat URL lokal (localhost:port) untuk server yang sedang berjalan. Namun, Anda harus membuka browser secara manual dengan URL tersebut, dan menjalankan server debug tidak secara otomatis memulai debugger Visual Studio. Jika mau, Anda dapat melampirkan debugger ke proses yang sedang berjalan dengan menggunakan perintah Debug>Lampirkan ke Proses.

Langkah berikutnya

Pada titik ini, proyek dasar Django tidak berisi aplikasi apa pun. Anda akan membuat aplikasi di langkah berikutnya. Karena Anda akan bekerja dengan aplikasi Django lebih dari proyek Django, Anda tidak perlu tahu lebih banyak tentang file boilerplate untuk saat ini.

Membuat aplikasi Django dengan tampilan dan templat halaman

Mempelajari secara lebih mendalam

• Kode proyek Django: Menulis aplikasi Django pertama Anda, bagian 1 (docs.djangoproject.com)
• Utilitas administratif: django-admin dan manage.py (docs.djangoproject.com)
• Kode sumber tutorial tentang GitHub: Microsoft/python-sample-vs-learning-django