Django Visual Studio Code | Frequently Asked Questions

Django Tutorial in Visual Studio Code

Django is a high-level Python framework designed for rapid, secure, and scalable web development. Django includes rich support for URL routing, page templates, and working with data.

In this Django tutorial, you create a simple Django app with three pages that use a common base template. You create this app in the context of Visual Studio Code in order to understand how to work with Django in the VS Code terminal, editor, and debugger. This tutorial does not explore various details about Django itself, such as working with data models and creating an administrative interface. For guidance on those aspects, refer to the Django documentation links at the end of this tutorial.

The completed code project from this Django tutorial can be found on GitHub: python-sample-vscode-django-tutorial.

If you have any problems, you can search for answers or ask a question on the Python extension Discussions Q&A.

Debugging Django Applications In VS Code

Debugging is a crucial aspect of the development process, and Visual Studio Code offers robust tools for debugging Django applications. Utilizing VS Code’s debugging features can help you identify and resolve issues more efficiently, enhancing the quality of your applications.

Configuring Debug Settings

To start debugging, you first need to configure the debug settings in VS Code. Open the

.vscode

folder in your project directory and create or edit the

launch.json

file with the following configuration:


// Configuring debug settings for Django // This JSON configuration is tailored for debugging Django applications in VS Code { "version": "0.2.0", "configurations": [ { "name": "Django", "type": "python", "request": "launch", "program": "${workspaceFolder}/manage.py", "args": [ "runserver", "--noreload", "--nothreading" ], "django": true } ] }


Setting Breakpoints

With the debug settings configured, you can set breakpoints in your code. Breakpoints are markers that pause the execution of your application at a specific line of code, allowing you to inspect the program’s state.


# Setting a breakpoint # Click on the left margin next to the line number where you want to set a breakpoint print("Breakpoint is set")


Starting The Debugging Session

Once the breakpoints are set, start the debugging session by clicking on the Run icon in the Activity Bar on the side of the window, then selecting

Run and Debug

. Choose

Django

from the configuration dropdown.


# Starting the debugging session # The execution will pause at the breakpoints, allowing you to inspect the application print("Debugging session has started")


Inspecting Variables And Watching Expressions

While debugging, use the Variables and Watch panels to inspect the values of variables and evaluate expressions. Adding expressions to the Watch panel allows you to monitor their values as you step through the code.


# Inspecting variables and watching expressions # Use the Variables and Watch panels to evaluate the state of your application variable_value = "Inspect me" print(variable_value)


Viewing Debugging Output And Logs

Lastly, check the Debug Console and Terminal panels to view the debugging output and logs. These panels display valuable information and error messages that can aid in troubleshooting.


# Viewing debugging output and logs # The Debug Console and Terminal panels display important information for debugging print("Debugging output is available")


Leveraging the debugging tools in Visual Studio Code will streamline the process of identifying and resolving issues in your Django applications, leading to more stable and reliable software.

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Khóa học

Lập trình web với Python bằng Django

Lập trình web với Python bằng Django

Đánh giá

Bình luận

C:\Users\Admin\Documents>py -m django startproject Pythonweb

chào,admin và mọi người cho mình hỏi nếu project có nhiều app có chức năng giống nhau ,thí dụ tạo nhiều app giống app polls ,thế thì urls của project thì ghi

path(‘poll1/’, include(‘poll1.urls’)),

path(‘poll2/’, include(‘poll2.urls’)),

path(‘poll3/’, include(‘poll3.urls’)), làm thế sai 0

chào,admin và mọi người cho mình hỏi nếu project có nhiều app có chức năng giống nhau ,thí dụ tạo nhiều app giống app polls ,thế thì urls của project thì ghi

path(‘poll1/’, include(‘poll1.urls’)),

path(‘poll2/’, include(‘poll2.urls’)),

path(‘poll3/’, include(‘poll3.urls’)),

ghi thế đúng không các bạn

python -m django startproject tên_file

Các bạn có thể dùng câu lệnh này để tạo file nhé

lỗi ‘django-admin’ is not recognized as an internal or external command, operable program or batch file. ạ, ai có teamview hay ultraviewer không sửa giúp tớ với

Tutorial: Get started with the Django web framework in Visual Studio

Django is a high-level Python framework designed for rapid, secure, and scalable web development. This tutorial explores the Django framework in the context of the project templates. Visual Studio provides the project templates to streamline the creation of Django-based web apps.

In this tutorial, you learn how to:

• Create a basic Django project in a Git repository using the “Blank Django Web Project” template (step 1).
• Create a Django app with one page and render that page using a template (step 2).
• Serve static files, add pages, and use template inheritance (step 3).
• Use the Django Web Project template to create an app with multiple pages and responsive design (step 4).
• Authenticate users (step 5).

Tricks

Gettext and internationalization

Dealing with

django.po

files?
Consider installing the Gettext extension by MrOrz.

Emmet

Add the following item to the Emmet: Include Languages settings:

Step 1-3: Create the virtual environment and exclude it from source control

Now that you’ve configured source control for your project, you can create the virtual environment that contains the necessary Django packages for the project. You can then use Team Explorer to exclude the environment’s folder from source control.

1. In Solution Explorer, right-click the Python Environments node and select Add Virtual Environment.

2. An Add Virtual Environment dialog appears, with a message saying We found a requirements.txt file. This message indicates that Visual Studio uses that file to configure the virtual environment.

3. Select Create to accept the defaults. (You can change the name of the virtual environment if you want, which just changes the name of its subfolder, but

   
env

   is a standard convention.)

4. Consent to administrator privileges if prompted, then be patient for a few minutes while Visual Studio downloads and installs packages, which for Django means expanding several thousand files in about as many subfolders! You can see progress in the Visual Studio Output window. While you’re waiting, ponder the Question sections that follow.

5. On the Visual Studio Git controls (on the status bar), select the changes indicator (that shows 99*) which opens the Changes page in Team Explorer.

   Creating the virtual environment brought in thousands of changes, but you don’t need to include any of them in source control because you (or anyone else cloning the project) can always recreate the environment from requirements.txt.

   To exclude the virtual environment, right-click the env folder and select Ignore these local items.

6. After excluding the virtual environment, the only remaining changes are to the project file and .gitignore. The .gitignore file contains an added entry for the virtual environment folder. You can double-click the file to see a diff.

7. Enter a commit message and select the Commit All button, then push the commits to your remote repository.

1. In Solution Explorer, right-click the Python Environments node and select Add Environment.

2. Select Create to accept the defaults, in Add Virtual Environment dialog. (You can change the name of the virtual environment if you want, which just changes the name of its subfolder, but

   
env

   is a standard convention.)

3. Consent to administrator privileges if prompted, then wait a few minutes while Visual Studio downloads and installs packages. During this time, thousands of files are transferred to many subfolders. You can see the progress in the Visual Studio Output window. While you’re waiting, ponder the Question sections that follow.

4. On the Visual Studio Git controls (on the status bar), select the changes indicator (that shows 99*) which opens the Changes page in Team Explorer.

   Creation of the virtual environment brought in thousands of changes, but you don’t need to include any of them in source control because you (or anyone else cloning the project) can always recreate the environment from requirements.txt.

5. To exclude the virtual environment, right-click the env folder and select Ignore these local items.

6. After excluding the virtual environment, the only remaining changes are to the project file and .gitignore file. The .gitignore file contains an added entry for the virtual environment folder. You can double-click the file to see a diff.

7. Enter a commit message and select the Commit All button, then push the commits to your remote repository.

Question: Why do I want to create a virtual environment?

Answer: A virtual environment is a great way to isolate your app’s exact dependencies. Such isolation avoids conflicts within a global Python environment, and aids both testing and collaboration. Over time, as you develop an app, you invariably bring in many helpful Python packages. You can easily update the project’s requirements.txt file by keeping packages in a project-specific virtual environment. The requirements.txt file describes the environment, which is included in the source control. When the project is copied to any other computers, including build servers, deployment servers, and other development computers, it’s easy to recreate the environment using only requirements.txt (which is why the environment doesn’t need to be in source control). For more information, see Use virtual environments.

Question: How do I remove a virtual environment that’s already committed to source control?

Answer: First, edit your .gitignore file to exclude the folder. Find the section at the end with the comment

# Python Tools for Visual Studio (PTVS)

and add a new line for the virtual environment folder, such as

/BasicProject/env

. (Visual Studio doesn’t show the file in Solution Explorer. To open the file directly, go to File > Open > File. You can also open the file from Team Explorer. Go to the Settings page and select Repository Settings. Now, navigate to the Ignore & Attributes Files section and select the Edit link next to .gitignore.)

Second, open a command window, navigate to a folder such as BasicProject. The BasicProject folder contains the virtual environment folder such as env, and run

git rm -r env

. Then commit those changes from the command line (

git commit -m 'Remove venv'

) or commit from the Changes page of Team Explorer.

Step 1-4: Examine the boilerplate code

Once project creation completes, examine the boilerplate Django project code (which is again the same as generated by the CLI command

django-admin startproject

).

1. The root of your project has manage.py, the Django command-line administrative utility that Visual Studio automatically sets as the project startup file. You run the utility on the command line using

   
python manage.py [options]

   . For common Django tasks, Visual Studio provides convenient menu commands. Right-click the project in Solution Explorer and select Python to see the list. You’ll come across some of these commands in the course of this tutorial.

2. In your project, there’s a folder with the same name as the project. It contains the basic Django project files:

   • __init.py: An empty file that tells Python that this folder is a Python package.
   • settings.py: Contains settings for Django project, which you’ll modify in the course of developing a web app.
   • urls.py: Contains a table of contents for the Django project, which you’ll also modify in the course of development.
   • wsgi.py: An entry point for WSGI-compatible web servers to serve your project. You usually leave this file as-is, as it provides the hooks for production web servers.

3. As noted earlier, the Visual Studio template also adds a requirements.txt file to your project specifying the Django package dependency. The presence of this file is what invites you to create a virtual environment when first creating the project.

Answer: Yes. Expand the Python Environments node, right-click your virtual environment, and select the Generate requirements.txt command. It’s good to use this command periodically as you modify the environment, and commit changes to requirements.txt to source control along with any other code changes that depend on that environment. If you set up continuous integration on a build server, you should generate the file and commit changes whenever you modify the environment.

Creating A Django Project

With the environment configured, you’re ready to create a new Django project. A Django project is the collection of settings and configurations for a specific website, including database configurations, Django-specific options, and application-specific settings.

Creating The Project Structure

Initiate the creation of a new Django project by running the following command in the VS Code terminal. Replace

myproject

with the desired name for your project.


# Creating a new Django project # Replace 'myproject' with your preferred project name django-admin startproject myproject


Navigate into this directory to manage your project.

Understanding The Project Files

Within the newly created project directory, you’ll find several project files and a subdirectory with the same name as the project. These files are essential for the functioning of your Django project.


# Understanding the project files # These files are automatically generated and essential for the project print("manage.py, myproject/__init__.py, myproject/settings.py, myproject/urls.py, myproject/asgi.py, myproject/wsgi.py")


Each file has a specific purpose, detailed in the Django documentation.

Configuring The Database

Django comes with a built-in SQLite database, which is sufficient for development purposes. To configure it, navigate to the

settings.py

file and ensure the

DATABASES

setting is correctly configured.


# Configuring the SQLite database # This configuration is suitable for development purposes DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / "db.sqlite3", } }


Running The Initial Migrations

After configuring the database, run the initial migrations to set up the database schema. Migrations are Django’s way of propagating changes made to models into the database schema.


# Running the initial migrations # This command sets up the database schema python manage.py migrate


It’s a vital step to ensure the database is ready for your application.

Starting the Development Server

Finally, start the Django development server to see your project in action. The development server is a lightweight web server provided by Django for development and testing.


# Starting the development server # This command runs the server on the default port 8000 python manage.py runserver



http://127.0.0.1:8000/in your web browser.


With the project created and the development server running, you are now ready to start building your Django applications and exploring the features and functionalities that Django has to offer.

Cách tạo 1 Project Django thông qua CMD

Như ở bài SƠ LƯỢC VỀ PYTHON DJANGO, Kteam đã hướng dẫn cho các bạn tải thư viện Django về. Bây giờ, thông qua thư viện đó, chúng ta sẽ tạo 1 Project như sau:

• Bước 1: Vào một thư mục mình muốn lưu Project, mở CMD tại đó lên. Ta có thể gõ cmd tại đường dẫn phía trên để mở CMD của Window

Lúc đó CMD sẽ hiện ra

• Bước 2: Ta sẽ dùng cú pháp sau để tạo ra 1 Project Web

django-admin startproject

Lưu ý: Không nên đặt tên là Django hay là Test. Ở đây, mình đặt tên project là PythonWeb

Bây giờ ngay chỗ folder sẽ xuất hiện Project mình vừa tạo

Work with data, data models, and migrations

Many web apps work with information stored in a database, and Django makes it easy to represent the objects in that database using models. In Django, a model is a Python class, derived from

django.db.models.Model

, that represents a specific database object, typically a table. You place these classes in an app’s

models.py

file.

With Django, you work with your database almost exclusively through the models you define in code. Django’s “migrations” then handle all the details of the underlying database automatically as you evolve the models over time. The general workflow is as follows:

1. Make changes to the models in your
   
models.py

   file.
2. Run
   
python manage.py makemigrations

   to generate scripts in the
   
migrations

   folder that migrate the database from its current state to the new state.
3. Run
   
python manage.py migrate

   to apply the scripts to the actual database.

The migration scripts effectively record all the incremental changes you make to your data models over time. By applying the migrations, Django updates the database to match your models. Because each incremental change has its own script, Django can automatically migrate any previous version of a database (including a new database) to the current version. As a result, you need concern yourself only with your models in

models.py

, never with the underlying database schema or the migration scripts. You let Django do that part!

In code, too, you work exclusively with your model classes to store and retrieve data; Django handles the underlying details. The one exception is that you can write data into your database using the Django administrative utility loaddata command. This utility is often used to initialize a data set after the

migrate

command has initialized the schema.

When using the

db.sqlite3

file, you can also work directly with the database using a tool like the SQLite browser. It’s fine to add or delete records in tables using such a tool, but avoid making changes to the database schema because the database will then be out of sync with your app’s models. Instead, change the models, run

makemigrations

, then run

migrate

.

Types of databases

By default, Django includes a

db.sqlite3

file for an app’s database that’s suitable for development work. As described on When to use SQLite (sqlite.org), SQLite works fine for low to medium traffic sites with fewer than 100 K hits/day, but is not recommended for higher volumes. It’s also limited to a single computer, so it cannot be used in any multi-server scenario such as load-balancing and geo-replication.

For these reasons, consider using a production-level data store such as PostgreSQL, MySQL, and SQL Server. For information on Django’s support for other databases, see Database setup. You can also use the Azure SDK for Python to work with Azure storage services like tables and blobs.

Define models

A Django model is again a Python class derived from

django.db.model.Models

, which you place in the app’s

models.py

file. In the database, each model is automatically given a unique ID field named

id

. All other fields are defined as properties of the class using types from

django.db.models

such as

CharField

(limited text),

TextField

(unlimited text),

EmailField

,

URLField

,

IntegerField

,

DecimalField

,

BooleanField

.

DateTimeField

,

ForeignKey

, and

ManyToMany

, among others. (See the Model field reference in the Django documentation for details.)

Each field takes some attributes, like

max_length

. The

blank=True

attribute means the field is optional;

null=true

means that a value is optional. There is also a

choices

attribute that limits values to values in an array of data value/display value tuples.

For example, add the following class in

models.py

to define a data model that represents dated entries in a simple message log:


from django.db import models from django.utils import timezone class LogMessage(models.Model): message = models.CharField(max_length=300) log_date = models.DateTimeField("date logged") def __str__(self): """Returns a string representation of a message.""" date = timezone.localtime(self.log_date) return f"'{self.message}' logged on {date.strftime('%A, %d %B, %Y at %X')}"


A model class can include methods that return values computed from other class properties. Models typically include a

__str__

method that returns a string representation of the instance.

Migrate the database

Because you changed your data models by editing

models.py

, you need to update the database itself. In VS Code, open a Terminal with your virtual environment activated (use the Terminal: Create New Terminal command, ⌃⇧` (Windows, Linux Ctrl+Shift+`))), navigate to the project folder, and run the following commands:


python manage.py makemigrations python manage.py migrate


Take a look in the

migrations

folder to see the scripts that

makemigrations

generates. You can also look at the database itself to see that the schema is updated.

If you see errors when running the commands, make sure you’re not using a debugging terminal that’s left over from previous steps, as they may not have the virtual environment activated.

Use the database through the models

With your models in place and the database migrated, you can store and retrieve data using only your models. In this section, you add a form page to the app through which you can log a message. You then modify the home page to display those messages. Because you modify many code files here, be mindful of the details.

1. In the

   
hello

   folder (where you have
   
views.py

   ), create a new file named
   
forms.py

   with the following code, which defines a Django form that contains a field drawn from the data model,
   
LogMessage

   :
   
from django import forms from hello.models import LogMessage class LogMessageForm(forms.ModelForm): class Meta: model = LogMessage fields = ("message",) # NOTE: the trailing comma is required


2. In the

   
templates/hello

   folder, create a new template named
   
log_message.html

   with the following contents, which assumes that the template is given a variable named
   
form

   to define the body of the form. It then adds a submit button with the label “Log”.
   
{% extends "hello/layout.html" %} {% block title %} Log a message {% endblock %} {% block content %}

   {% csrf_token %} {{ form.as_p }}
   
   Log
   
   

   {% endblock %}


   Note: Django’s

   
{% csrf_token %}

   tag provides protection from cross-site request forgeries. See Cross Site Request Forgery protection in the Django documentation for details.

3. In the app’s

   
static/hello/site.css

   file, add a rule to make the input form wider:
   
input[name=message] { width: 80%; }


4. In the app’s

   
urls.py

   file, add a route for the new page:
   
path("log/", views.log_message, name="log"),


5. In

   
views.py

   , define the view named
   
log_message

   (as referred to by the URL route). This view handles both HTTP GET and POST cases. In the GET case (the
   
else:

   section), it just displays the form that you defined in the previous steps. In the POST case, it retrieves the data from the form into a data object (
   
message

   ), sets the timestamp, then saves that object at which point it’s written to the database:
   
# Add these to existing imports at the top of the file: from django.shortcuts import redirect from hello.forms import LogMessageForm from hello.models import LogMessage # Add this code elsewhere in the file: def log_message(request): form = LogMessageForm(request.POST or None) if request.method == "POST": if form.is_valid(): message = form.save(commit=False) message.log_date = datetime.now() message.save() return redirect("home") else: return render(request, "hello/log_message.html", {"form": form})


6. One more step before you’re ready to try everything out! In

   
templates/hello/layout.html

   , add a link in the “navbar” div for the message logging page:
   


Log Message



7. Run the app and open a browser to the home page. Select the Log Message link on the nav bar, which should display the message logging page:

8. Enter a message, select Log, and you should be taken back to the home page. The home page doesn’t yet show any of the logged messages yet (which you remedy in a moment). Feel free to log a few more messages as well. If you want, peek in the database using a tool like SQLite Browser to see that records have been created. Open the database as read-only, or otherwise remember to close the database before using the app, otherwise the app will fail because the database is locked.

9. Stop the app when you’re done.

10. Now modify the home page to display the logged messages. Start by replacing the contents of app’s

    
templates/hello/home.html

    file with the markup below. This template expects a context variable named
    
message_list

    . If it receives one (checked with the
    
{% if message_list %}

    tag), it then iterates over that list (the
    
{% for message in message_list %}

    tag) to generate table rows for each message. Otherwise the page indicates that no messages have yet been logged.
    
{% extends "hello/layout.html" %} {% block title %} Home {% endblock %} {% block content %}

    Use the debugger with page templates
    

    As shown in the previous section, page templates can contain procedural directives like
    
{% for message in message_list %}

    and
    
{% if message_list %}

    , rather than only passive, declarative elements like
    
{% url %}

    and
    
{% block %}

    . As a result, you can have programming errors inside templates as with any other procedural code.

    Fortunately, the Python Extension for VS Code provides template debugging when you have
    
"django": true

    in the debugging configuration (as you do already). The following steps demonstrate this capability:

    1. In

       
templates/hello/home.html

       , set breakpoints on both the
       
{% if message_list %}

       and
       
{% for message in message_list %}

       lines, as indicated by the yellow arrows in the image below:

    2. Run the app in the debugger and open a browser to the home page. (If you're already running the debugger, you don't have to restart the app after setting breakpoints; just refresh the page.) Observe that VS Code breaks into the debugger in the template on the

       
{% if %}

       statement and shows all the context variables in the Variables pane:

    3. Use the Step Over (F10) command to step through the template code. Observe that the debugger steps over all declarative statements and pauses at any procedural code. For example, stepping through the

       
{% for message in message_list %}

       loops lets you examine each value in
       
message

       and lets you step to lines like
       

       {{ message.log_date | date:'d M Y' }}

       
       .

    4. You can also work with variables in the Debug Console panel. (Django filters like

       
date

       , however, are not presently available in the console.)

    5. When you're ready, select Continue (F5) to finish running the app and view the rendered page in the browser. Stop the debugger when you're done.

    

    Step 1-2: Examine the Git controls and publish to a remote repository
    

    Because you selected the Create new Git repository in the New Project dialog, the project is already committed to local source control as the creation process completes. In this step, you familiarize yourself with Visual Studio's Git controls and the Team Explorer window in which you work with source control.

    1. Examine the Git controls on the bottom corner of the Visual Studio main window. From left to right, these controls show unpushed commits, uncommitted changes, the name of the repository, and the current branch:

       Note

       If you don't select the Create new Git repository in the New Project dialog, the Git controls show only an Add to source control command that creates a local repository.

    2. Select the changes button, and Visual Studio opens its Team Explorer window on the Changes page. Because the newly created project is already committed to source control automatically, you don't see any pending changes.

    3. On the Visual Studio status bar, select the unpushed commits button (the up arrow with 2) to open the Synchronization page in Team Explorer. Because you have only a local repository, the page provides easy options to publish the repository to different remote repositories.

       You can choose whichever service you want for your own projects. This tutorial shows the use of GitHub, where the completed sample code for the tutorial is maintained in the Microsoft/python-sample-vs-learning-django repository.

    4. When selecting any of the Publish controls, Team Explorer prompts you for more information. For example, when publishing the sample for this tutorial, the repository itself had to be created first, in which case, the Push to Remote Repository option was used with the repository's URL.

       If you don't have an existing repository, the Publish to GitHub and Push to Azure DevOps options let you create one directly from within Visual Studio.

    5. As you work through this tutorial, get into the habit of periodically using the controls in Visual Studio to commit and push changes. This tutorial reminds you at appropriate points.

    Tip

    To quickly navigate within Team Explorer, select the header (that reads Changes or Push in the images above) to see a pop-up menu of the available pages.

    In this step, you'll familiarize yourself with Visual Studio's Git controls and Team Explorer. With the Team Explorer window, you'll work with the source control.

    1. To commit the project to your local source control:

       1. Select Add to Source Control command at the bottom corner of the Visual Studio main window.
       2. Then, select the Git option.
       3. Now, you're taken to the Create Git repository window, where you can create and push a new repository.

    2. After creating a repository, a set of new Git controls appears at the bottom. From left to right, these controls show unpushed commits, uncommitted changes, the current branch, and the name of the repository.

    3. Select the Git changes button. Visual Studio then opens the Git Changes page in Team Explorer. You don't see any pending changes as the newly created project is already committed to source control automatically.

    4. On the Visual Studio status bar, select the unpushed commits button (the up arrow with 2) to open the Synchronization page in Team Explorer. The Synchronization page provides easy options to publish the local repository to different remote repositories.

       You can choose any service you want for your projects. This tutorial shows the use of GitHub, where the completed sample code for the tutorial is maintained in the Microsoft/python-sample-vs-learning-django repository.

    5. When selecting any of the Publish controls, Team Explorer prompts you for more information. For example, when publishing the sample for this tutorial, the repository itself has to be created first, in which case, the Push to Remote Repository option was used with the repository's URL.

       If you don't have an existing repository, the Publish to GitHub and Push to Azure DevOps options let you create one directly from within Visual Studio.

    6. As you work through this tutorial, get into the habit of periodically using the controls in Visual Studio to commit and push changes. This tutorial reminds you at appropriate points.

    Tip

    To quickly navigate within Team Explorer, select the header (that reads Changes or Push in the images above) to see a pop-up menu of the available pages.

    Question: What are some advantages of using source control from the beginning of a project?
    

    Answer: Source control from the start, especially if you also use a remote repository, provides a regular offsite backup of your project. Unlike maintaining a project on a local file system, source control provides a complete change history and the easy ability to revert a single file or the whole project to its previous state. The change history helps determine the cause of regressions (test failures). When multiple people are working on a project, the source control manages the overwrite and provides conflict resolution.

    Lastly, source control, which is fundamentally a form of automation, sets you up for automating builds, testing, and release management. It's the first step in using DevOps for a project. There's really no reason to not use source control from the beginning as the barriers to entry are low.

    For further discussion on source control as automation, see The Source of Truth: The Role of Repositories in DevOps, an article in MSDN Magazine written for mobile apps that also applies to web apps.

    Question: Can I prevent Visual Studio from autocommitting a new project?
    

    Answer: Yes. To disable autocommit, go to the Settings page in Team Explorer. Select Git > Global settings, clear the option labeled Commit changes after merge by default, and then select Update.

    Create multiple templates that extend a base template
    

    Because most web apps have more than one page, and because those pages typically share many common elements, developers separate those common elements into a base page template that other page templates then extend. (This is also called template inheritance, meaning the extended pages inherit elements from the base page.)

    Also, because you'll likely create many pages that extend the same template, it's helpful to create a code snippet in VS Code with which you can quickly initialize new page templates. A snippet helps you avoid tedious and error-prone copy-paste operations.

    The following sections walk through different parts of this process.

    Create a base page template and styles
    

    A base page template in Django contains all the shared parts of a set of pages, including references to CSS files, script files, and so forth. Base templates also define one or more block tags with content that extended templates are expected to override. A block tag is delineated by
    
{% block

%}


    and
    
{% endblock %}

    in both the base template and extended templates.

    The following steps demonstrate creating a base template.

    1. In the

       
templates/hello

       folder, create a file named
       
layout.html

       with the contents below, which contains blocks named "title" and "content". As you can see, the markup defines a simple nav bar structure with links to Home, About, and Contact pages, which you create in a later section. Notice the use of Django's
       
{% url %}

       tag to refer to other pages through the names of the corresponding URL patterns rather than by relative path.
       


       
       {% load static %}
       
       
       Home
       
       
       About
       
       
       Contact
       
       {% block content %} {% endblock %}

       



    2. Add the following styles to

       
static/hello/site.css

       below the existing "message" style, and save the file. (This walkthrough doesn't attempt to demonstrate responsive design; these styles simply generate a reasonably interesting result.)
       
.navbar { background-color: lightslategray; font-size: 1em; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; color: white; padding: 8px 5px 8px 5px; } .navbar a { text-decoration: none; color: inherit; } .navbar-brand { font-size: 1.2em; font-weight: 600; } .navbar-item { font-variant: small-caps; margin-left: 30px; } .body-content { padding: 5px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }


    You can run the app at this point, but because you haven't made use of the base template anywhere and haven't changed any code files, the result is the same as the previous step. Complete the remaining sections to see the final effect.

    Create a code snippet
    

    Because the three pages you create in the next section extend
    
layout.html

    , it saves time to create a code snippet to initialize a new template file with the appropriate reference to the base template. A code snippet provides a consistent piece of code from a single source, which avoids errors that can creep in when using copy-paste from existing code.

    1. In VS Code, select the File (Windows/Linux) or Code (macOS), menu, then select Preferences > User snippets.

    2. In the list that appears, select html. (The option may appear as "html.json" in the Existing Snippets section of the list if you've created snippets previously.)

    3. After VS code opens

       
html.json

       , add the code below within the existing curly braces. (The explanatory comments, not shown here, describe details such as how the
       
$0

       line indicates where VS Code places the cursor after inserting a snippet):
       
"Django Tutorial: template extending layout.html": { "prefix": "djextlayout", "body": [ "{% extends \"hello/layout.html\" %}", "{% block title %}", "$0", "{% endblock %}", "{% block content %}", "{% endblock %}" ], "description": "Boilerplate template that extends layout.html" },


    4. Save the

       
html.json

       file (⌘S (Windows, Linux Ctrl+S)).

    5. Now, whenever you start typing the snippet's prefix, such as

       
djext

       , VS Code provides the snippet as an autocomplete option, as shown in the next section. You can also use the Insert Snippet command to choose a snippet from a menu.

    For more information on code snippets in general, refer to Creating snippets.

    Use the code snippet to add pages
    

    With the code snippet in place, you can quickly create templates for the Home, About, and Contact pages.

    1. In the

       
templates/hello

       folder, create a new file named
       
home.html

       , Then start typing
       
djext

       to see the snippet appear as a completion:

       When you select the completion, the snippet's code appears with the cursor on the snippet's insertion point:

    2. At the insertion point in the "title" block, write

       
Home

       , and in the "content" block, write
       

       Home page for the Visual Studio Code Django tutorial.

       
       , then save the file. These lines are the only unique parts of the extended page template:

    3. In the

       
templates/hello

       folder, create
       
about.html

       , use the snippet to insert the boilerplate markup, insert
       
About us

       and
       

       About page for the Visual Studio Code Django tutorial.

       
       in the "title" and "content" blocks, respectively, then save the file.

    4. Repeat the previous step to create

       
templates/hello/contact.html

       using
       
Contact us

       and
       

       Contact page for the Visual Studio Code Django tutorial.

       
       .

    5. In the app's

       
urls.py

       , add routes for the /about and /contact pages. Be mindful that the
       
name

       argument to the
       
path

       function defines the name with which you refer to the page in the
       
{% url %}

       tags in the templates.
       
path("about/", views.about, name="about"), path("contact/", views.contact, name="contact"),


    6. In

       
views.py

       , add functions for the /about and /contact routes that refer to their respective page templates. Also modify the
       
home

       function to use the
       
home.html

       template.
       
# Replace the existing home function with the one below def home(request): return render(request, "hello/home.html") def about(request): return render(request, "hello/about.html") def contact(request): return render(request, "hello/contact.html")


    Run the app
    

    With all the page templates in place, save
    
views.py

    , run the app, and open a browser to the home page to see the results. Navigate between the pages to verify that the page templates are properly extending the base template.