Complete Django Tutorial for Novices

Posted by

Alfalfa

–


If you are looking to learn how to build web applications using Django, you have come to the right place. In this tutorial, we will cover all the basics of Django and walk you through a full course on how to build web applications from scratch.

What is Django?

Django is a high-level web framework written in Python that allows developers to build web applications quickly and efficiently. It follows the model-view-controller (MVC) architecture pattern, which separates the data layer, the presentation layer, and the business logic layer.

Django comes with a built-in lightweight web server for development purposes, making it easy to get started with building web applications right away. It also includes a powerful ORM (Object-Relational Mapping) system that allows you to interact with databases using Python objects.

Prerequisites:

Before we begin this tutorial, make sure you have Python installed on your machine. You can download Python from the official website (https://www.python.org/downloads/).

Step 1: Setting up a Virtual Environment

The first step in building a Django web application is to create a virtual environment. A virtual environment is a self-contained directory that contains all the dependencies and dependencies needed for your project.

To create a virtual environment, open a terminal window and run the following command:

python -m venv myenv

This will create a virtual environment named myenv in the current directory. To activate the virtual environment, run the following command:

For Windows:

myenvScriptsactivate

For Mac and Linux:

source myenv/bin/activate

Step 2: Installing Django

Once you have activated the virtual environment, you can install Django using pip, the Python package manager. Run the following command in the terminal:

pip install django

This will install the latest version of Django in your virtual environment.

Step 3: Creating a Django Project

Now that you have Django installed, you can create a new Django project by running the following command:

django-admin startproject myproject

This will create a new directory named myproject containing all the files and folders needed for a Django project.

Step 4: Running the Development Server

To run the development server and see the default Django landing page, navigate to the project directory and run the following command:

python manage.py runserver

This will start the development server on http://127.0.0.1:8000/.

Step 5: Creating a Django App

Django projects are made up of multiple apps, each serving a specific purpose. To create a new app, run the following command in the terminal:

python manage.py startapp myapp

This will create a new directory named myapp containing all the files and folders needed for a Django app.

Step 6: Building a Sample Web Application

Now that you have set up the project structure and created an app, you can start building your web application. In the views.py file of your app, write a simple view function that returns a HttpResponse like this:

from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, World!")

Next, create a URL pattern for the view function in the urls.py file of your app:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
]

Finally, include the app’s URL patterns in the project’s urls.py file:

from django.urls import path, include

urlpatterns = [
    path('', include('myapp.urls')),
]

Step 7: Running the Web Application

To see your web application in action, run the development server again and navigate to http://127.0.0.1:8000/ in your web browser. You should see the message "Hello, World!" displayed on the page.

Congratulations! You have successfully created a Django web application from scratch. This tutorial covers the basics of setting up a Django project, creating apps, writing views, and running the development server. There is much more to learn about Django, including working with models, forms, templates, static files, and more.

I hope you found this tutorial helpful and informative. Happy coding!

, , , , , , , , , , , , , , , , , , , ,

Alfalfa

0 0 votes
Article Rating
36 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@adthn
@adthn
3 months ago

so what's the difference between flask and django then?

0
@VishalTiwari94
@VishalTiwari94
3 months ago

Just a thing at 19.12, you told about Microsoft Visual Studio Community but used Visual Studio Code which was already installed in your system, both softwares are different.

0
@rishikeshjadhav4774
@rishikeshjadhav4774
3 months ago

the modified html code , hope this helps
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.theme.default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/animate.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/main_styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/responsive.css' %}">
</head>
<body>

<div class="super_container">

<!– Header –>

<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-start">
<div class="header_content_inner d-flex flex-row align-items-end justify-content-start">
<div class="logo"><a href="index.html">Travello</a></div>
<nav class="main_nav">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="header_phone ml-auto">Call us: 00-56 445 678 33</div>

<!– Hamburger –>

<div class="hamburger ml-auto">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>

</div>
</div>
</div>
</div>
</div>
<div class="header_social d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</header>

<!– Menu –>

<div class="menu">
<div class="menu_header d-flex flex-row align-items-center justify-content-start">
<div class="menu_logo"><a href="index.html">Travello</a></div>
<div class="menu_close_container ml-auto"><div class="menu_close"><div></div><div></div></div></div>
</div>
<div class="menu_content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="menu_social">
<div class="menu_phone ml-auto">Call us: 00-56 445 678 33</div>
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>

<!– Home –>

<div class="home">

<!– Home Slider –>
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">

<!– Slide –>
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>

<!– Slide –>
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>

<!– Slide –>
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="home_page_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li><a href="#" data-scroll-to="#destinations">Offers<span>01</span></a></li>
<li><a href="#" data-scroll-to="#testimonials">Testimonials<span>02</span></a></li>
<li><a href="#" data-scroll-to="#news">Latest<span>03</span></a></li>
</ul>
</div>
</div>
</div>

<!– Search –>

<div class="home_search">
<div class="container">
<div class="row">
<div class="col">
<div class="home_search_container">
<div class="home_search_title">Search for your trip</div>
<div class="home_search_content">
<form action="#" class="home_search_form" id="home_search_form">
<div class="d-flex flex-lg-row flex-column align-items-start justify-content-lg-between justify-content-start">
<input type="text" class="search_input search_input_1" placeholder="City" required="required">
<input type="text" class="search_input search_input_2" placeholder="Departure" required="required">
<input type="text" class="search_input search_input_3" placeholder="Arrival" required="required">
<input type="text" class="search_input search_input_4" placeholder="Budget" required="required">
<button class="home_search_button">search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

</div>

<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'styles/bootstrap4/popper.js' %}"></script>
<script src="{% static 'styles/bootstrap4/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.js' %}"></script>
<script src="{% static 'plugins/easing/easing.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>

0
@anchalsehgal7779
@anchalsehgal7779
3 months ago

please make a video on python full stack project and django framework

0
@Kaviya-d8j
@Kaviya-d8j
3 months ago

For me Why it shows 'mkvirtualenv test' is not recognized as an internal or external command( 9:59)

0
@wizardgaming6498
@wizardgaming6498
3 months ago

Enjoyed total course and done 😊😊😊😊

0
@darma46
@darma46
3 months ago

amazing explanation video

0
@giridharpatro5239
@giridharpatro5239
3 months ago

i am unable to connect postgresql with pgadmin getting error unable to locate lc_storage when trying to create database

0
@priyanka.s6068
@priyanka.s6068
3 months ago

Sir im not getting python manage.py startapp calc
Its showing error as no such file or directory

0
@sick73
@sick73
3 months ago

when downloading the IDE you where on the visual studio, then you are using VS Code… I'm just 20min into vid.. maybe you will address this later? 😀

0
@gouthamgamer8663
@gouthamgamer8663
3 months ago

24:22

0
@shabnameghbal7914
@shabnameghbal7914
3 months ago

Hats off to you Sir

0
@GOHAN_Va
@GOHAN_Va
3 months ago

hi thank you

0
@joafelix7606
@joafelix7606
3 months ago

if we use Pycharm Virtual Environment will be automatically created right???

0
@omkarkanase8038
@omkarkanase8038
3 months ago

hi sir, I am getting, "Page not found (404)'" after submit of form, instead of redirecting to home page. please help me to solve this erroe

0
@omkarkanase8038
@omkarkanase8038
3 months ago

Thanks sir for providing travello temples link

0
@centralcoding
@centralcoding
3 months ago

Hi Navi, i am learned a lot from you thanks,
My question, is there any security problem if i used travello template for business project?

0
@_its_mahesh
@_its_mahesh
3 months ago

File "C:Usersiiuiprojectsnewskillmanage.py", line 11, in main

from django.core.management import execute_from_command_line

ModuleNotFoundError: No module named 'django'…. iam getting the in the way when in run python manage.py startapp
can you plz help me out

0
@khushidhulia1274
@khushidhulia1274
3 months ago

its giving me error of err_name_not_resolved and first time its loading the image of main folder then i open other page and come back to same page it doesn't show images

0

Recent Posts

Categories

Tags

and Angular Angular.js Bottle django Express.js fastapi, flask for Gatsby.js Guides javascript Keras Kivy Next.js node.js PyQt PySimpleGUI python PyTorch react.js scikit-learn TensorFlow Tkinter video vite vite.js vue Vue.js with