# Django for Beginners and Beyond: A Complete Learning Path
## Step 1. What is Django?
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel.
Django is a full-featured web framework that follows the Model-View-Controller (MVC) architectural pattern. It provides a set of tools and libraries for building web applications, including an ORM, a templating engine, and a built-in admin interface.
## Step 2. Django Setup
To get started with Django, you’ll need to install it on your computer. You can do this by running the following command in your terminal, after setting up a virtual environment:
```bash
python -m venv .venv # Command to setup virtual environment
# for macOS and linux
# python3 -m venv .venv
```
Now to activate the virtual environment we use the following command:
```bash
.venv\Scripts\activate # To activate the virtual environment
# for macOS and linux
# source .venv/bin/activate
```
## Step 3. **Django Project**
A Django project is a collection of settings and configurations that define the structure and behavior of a web application. It includes the code for the application, as well as the templates, static files, and other resources that make up the application.
To create a new Django project, you can use the following command:
```bash
django-admin startproject demoproject
cd demoproject
```
This will create a new directory called `demoproject` with the basic structure of a Django project.
## Step 4. **Start a Django Server**
To start the Django server, you can use the following command:
```bash
python manage.py runserver
```
This will start the server and make it accessible at [**http://localhost:8000**](http://localhost:8000).
Ignore the unapplied migrations warning. This is a common issue when starting a new Django project. We will address this in a later section.
## Step 5. **Creating our first views**
Create a new file called `views.py` in the `demoproject` directory. In this file, we will define a few views that are simple functions that return a response. We want to have home page, about page, and contact page. Each of these pages will return html content.
```python
from django.http import HttpResponse
def home(request):
return HttpResponse("
Welcome to Chai's Django Project: Home page
")
def about(request):
return HttpResponse("
Welcome to Chai's Django Project: About page
")
def contact(request):
return HttpResponse("
Welcome to Chai's Django Project: Contact page
")
```
Now, let’s create a new file called `urls.py` in the `demoproject` directory. In this file, we will define the URL patterns for our application. If the file is already there, you can just add the following code to the end of the file:
```python
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
path('about/', views.about, name='about'),
path('contact/', views.contact, name='contact'),
]
```
Now, let’s run the server again and visit the following URLs:
* [**http://localhost:8000/**](http://localhost:8000/)
* [**http://localhost:8000/about/**](http://localhost:8000/about/)
* [**http://localhost:8000/contact/**](http://localhost:8000/contact/)
You should see the following output in the above routes:
```plaintext
Welcome to Chai's Django Project: Home page
Welcome to Chai's Django Project: About page
Welcome to Chai's Django Project: Contact page
```
## Step 6. Adding **Templates App in Django**
In Django, templates are used to generate HTML pages. They are used to display data and perform logic in a web application. To create a template, you can create a new file called `templates/layout.html` in the root directory. Make sure that template folder is at same level as `manage.py` file.
```xml
Welcome to Chai's Django Project
Welcome to Chai's Django Project
```
Now if you need to view this template in the [**http://localhost:8000/**](http://localhost:8000/) you need to make some changes in the `views.py` and `settings.py` file:
```python
# Python : settings.py
'DIRS': ['templates'], # add the name of the templates directory inside this array
```
```python
from django.http import HttpResponse
from django.shortcuts import render
def home(request):
# return HttpResponse("
")
```
## Step 7. **Adding CSS and JavaScript**
To add CSS and JavaScript to your Django project, you can create a new file called `static/css/style.css` in the root of the `demoproject` directory. In this file, you can write CSS code that will be used to style the HTML page. You can also create a new file called `static/js/script.js` in the same directory. In this file, you can write JavaScript code that will be used to add interactivity to the HTML page.
To add these static files go to `settings.py` and add the following line:
```python
import os # import this at the top of settings.py file
STATIC_URL = '/static/' # below this add the following line
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
```
In the index.html file, at the top of the file add the following line:
```xml
{% load static %}
```
Now, let’s run the server again and visit the [**http://localhost:8000/**](http://localhost:8000/) URL. You should see the output.
## Step 8. Adding Jinja2 Templates to Django Project
Jinja2 templates are written in a simple text format called HTML. The syntax is very similar to HTML, but with some additional features. You need to inject variables into the template using the `{{ variable }}` syntax. For example, if you want to display a name, you can use the following code:
```python
Hello {{ name }}!
```
Jinja2 is a template engine for Python. It is a very powerful template engine that can be used to render HTML, XML, and other formats. It is also used to render templates for the Django admin interface. If you are in Django, you don’t need to install Jinja2 separately. It is already installed with Django. Django also comes with a built-in template configurations that allows you to use Jinja2 templates.
For more details on how to implement Jinja Templates in Django refer the article: [Getting Started with Jinja Templates in Django](https://blogs.lnbg.in/getting-started-with-jinja-templates-in-django)
## Step 9. **Install Tailwind CSS and Flowbite to your Django project**
Tailwind CSS is a CSS framework that allows you to build custom styles for your web pages. It provides a set of pre-built classes that you can use to style your HTML elements, whereas Flowbite is an open-source library of UI components based on the Tailwind CSS featuring all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, but also some more advanced interactive elements such as datepickers. For step-by-step installation refer this article [how-to-add-tailwind-css-and-flowbite-to-your-django-project](https://blogs.lnbg.in/how-to-add-tailwind-css-and-flowbite-to-your-django-project)
## Step 10. Adding **Apps in Django**
The most common way to organize your Django project is to use apps. An app is a self-contained module that contains models, views, templates, and other components of your project. Apps allow you to organize your code into logical units and make it easier to manage and maintain your project.
You can create it manually or use the `startapp` command to create a new app for you. To create an app, navigate to the directory where you want to create the app and run the following command:
```bash
python manage.py startapp demoapp
```
This will create a new directory called `demoapp` with the necessary files and directories for an app.
To add an app to your project, you need to add it to the `INSTALLED_APPS` setting in your project’s `settings.py` file. You can do this by adding the app’s name to the list of installed apps:
```xml
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'demoapp',
]
```
In Django, templates are organized into apps. Each app can have its own templates directory, which contains the templates for that app. Create a new directory called `templates` in your app’s directory. Inside the demoapp directory, create a `templates` directory and add a `my_app.html` file to it.
Add your basic html code to the `my_app.html` file.
To serve this file, we need a view and a url. Create a new file called `views.py` in your app’s directory. Add the following code to the file:
```xml
from django.shortcuts import render
def all_chai(request):
return render(request, 'my_app.html')
```
This view will render the `my_app.html` template when it is called.
Create a new file called `urls.py` in your app’s directory. Add the following code to the file:
```xml
from django.urls import path
from . import views
urlpatterns = [
path('', views.my_app, name='my_app'),
]
```
This urlpattern will map the root URL of the app to the `my_app` view.
Now, we need to make aware of this new urlpattern in our project’s `urls.py` file. Add the following code to the project’s `urls.py` file:
```xml
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('demoapp/', include('chai.urls')),
]
```
Now, we can access the `my_app` view by going to [http://localhost:8000/demoapp](http://127.0.0.1:8000/demoapp/)