Welcome, aspiring web developers! Have you ever wanted to build your own corner of the internet to showcase your skills, projects, or just tell your story? A portfolio website is a fantastic way to do that. And what if I told you that you could build a powerful, professional-grade portfolio using Python, a language many of you might already know?

In this guide, we’re going to dive into the world of Django – a high-level Python web framework – and build a simple portfolio application from scratch. Don’t worry if you’re new to web development or Django; we’ll break down every step with clear explanations and simple language.

What is Django?

Django is a powerful and popular “web framework” built with Python. Think of a web framework as a toolkit that provides all the necessary components and structure to build a website quickly and efficiently. It handles many of the complex parts of web development for you, allowing you to focus on your website’s unique features. Django is known for its “Don’t Repeat Yourself” (DRY) philosophy and robust features, making it a great choice for everything from small personal projects to large-scale, complex applications.

Why Django for a Portfolio?

• Pythonic: If you know Python, you’ll feel right at home.
• Fast Development: Django’s conventions help you get up and running quickly.
• Scalable: Your portfolio can grow with you, easily adding new features.
• Secure: Django takes security seriously, handling many common vulnerabilities for you.

Let’s get started!

Setting Up Your Development Environment

Before we can code, we need to set up our workspace.

1. Install Python

First things first, you need Python installed on your computer. Django requires Python. You can download the latest version from the official Python website (python.org). Make sure to check the box that says “Add Python to PATH” during installation.

2. Create a Virtual Environment

A “virtual environment” is like a clean, isolated space on your computer for your project’s Python packages. This prevents conflicts between different projects that might use different versions of the same package. It’s a best practice in Python development.

Open your terminal or command prompt and navigate to where you want to store your project (e.g., cd Documents/WebProjects). Then, run these commands:

python -m venv env

• python -m venv env: This command creates a new virtual environment named env in your current directory. venv is Python’s built-in module for creating virtual environments.

Now, activate your virtual environment:

• On macOS/Linux:
  bash
source env/bin/activate
• On Windows:
  bash
.\env\Scripts\activate
  You’ll notice (env) appearing at the beginning of your terminal prompt, indicating that the virtual environment is active.

3. Install Django

With your virtual environment active, install Django using pip, Python’s package installer:

pip install django

This command downloads and installs the latest stable version of Django into your virtual environment.

Creating Your First Django Project

In Django, a “project” is the entire web application, including its settings and configuration. An “app” is a smaller, self-contained module within a project that handles a specific feature (like a blog app, a user authentication app, or our portfolio app).

Let’s create our project:

django-admin startproject myportfolio .

• django-admin: This is Django’s command-line utility.
• startproject myportfolio: This tells django-admin to create a new project named myportfolio.
• .: The dot at the end tells Django to create the project files in the current directory, rather than creating an extra myportfolio subfolder.

Now, your project structure should look something like this:

myportfolio/
├── manage.py
└── myportfolio/
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

• manage.py: A command-line utility for interacting with your Django project (e.g., running the development server, creating apps).
• myportfolio/settings.py: Contains all the configuration for your Django project.
• myportfolio/urls.py: Where you define the “URL routes” for your entire project (which web address goes to which part of your code).
• myportfolio/wsgi.py and asgi.py: Files used for deploying your application to a production web server.

Running the Development Server

Django comes with a lightweight “development server” that allows you to run and test your website on your local machine without needing a full-blown web server setup.

From your project’s root directory (where manage.py is located), run:

python manage.py runserver

You should see output similar to this:

Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
September 25, 2023 - 10:00:00
Django version 4.2.5, using settings 'myportfolio.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Open your web browser and go to http://127.0.0.1:8000/. You should see a celebratory Django welcome page!

• 127.0.0.1: This is a special IP address that always refers to your own computer (also known as localhost).
• 8000: This is the “port number” that the server is listening on.

To stop the server, go back to your terminal and press CONTROL-C.

Creating Your Portfolio App

Remember the difference between a project and an app? Let’s create our first app, which will specifically handle our portfolio’s pages.

python manage.py startapp portfolio

This creates a new directory named portfolio with its own set of files:

portfolio/
├── migrations/
├── __init__.py
├── admin.py
├── apps.py
├── models.py
├── tests.py
└── views.py

1. Register the App

For Django to know about your new app, you need to “register” it in your project’s settings.py file.

Open myportfolio/settings.py and find the INSTALLED_APPS list. Add 'portfolio' to it:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'portfolio', # Add your app here
]

Defining URLs for Your App

Now we need to tell Django which “URLs” (web addresses) should lead to the pages within our portfolio app. This is done in urls.py files.

1. Project-level URLs

First, we’ll configure the main myportfolio/urls.py to include URLs from our portfolio app.

Open myportfolio/urls.py and modify it like this:

from django.contrib import admin
from django.urls import path, include # Import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('portfolio.urls')), # Include portfolio app's URLs
]

• path('', include('portfolio.urls')): This line tells Django that any request to the root URL (e.g., http://127.0.0.1:8000/) should be handled by the URL patterns defined in our portfolio app’s urls.py file.

2. App-level URLs

Now, create a new file inside your portfolio directory named urls.py:

portfolio/
├── migrations/
├── ...
└── urls.py  <-- Create this file

Add the following content to portfolio/urls.py:

from django.urls import path
from . import views

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

• from . import views: This imports the views.py file from the current directory (our portfolio app).
• path('', views.home, name='home'): This defines a URL pattern. When someone visits the root of our portfolio app (which we linked to the project’s root '' earlier), Django will call a function named home in our views.py file. name='home' gives this URL a convenient name for referencing it later.

Creating Views

A “view” in Django is a Python function (or class) that takes a web request and returns a web response, typically rendering an HTML page.

Open portfolio/views.py and add the home function:

from django.shortcuts import render

def home(request):
    """
    This view renders the homepage of our portfolio.
    """
    context = {
        'name': 'Your Name',
        'tagline': 'A Passionate Developer & Creator',
    }
    return render(request, 'portfolio/home.html', context)

• render(request, 'portfolio/home.html', context): This is a shortcut function that takes the request object, the path to an HTML “template” file, and an optional dictionary of context data. It then combines the template with the data and returns an HttpResponse containing the rendered HTML.

Creating Templates

“Templates” are HTML files that serve as the structure for your web pages. They can contain special Django syntax to display dynamic content passed from your views.

First, we need to tell Django where to find our app’s templates.

1. Configure Template Directories

Open myportfolio/settings.py again. Find the TEMPLATES section and modify the DIRS list within OPTIONS:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'], # Add this line
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

• BASE_DIR / 'templates': This line tells Django to look for project-wide templates in a directory named templates directly under your project’s root. While we are using APP_DIRS: True for app-specific templates, it’s good practice to set this up for future project-level templates.

Now, create a templates directory inside your portfolio app, and then another portfolio directory inside that templates directory. This pattern (app_name/templates/app_name/) helps prevent template name conflicts if you have multiple apps.

portfolio/
├── migrations/
├── templates/
│   └── portfolio/  <-- Create this directory
│       └── home.html <-- Create this file
├── ...
└── urls.py
└── views.py

2. Create home.html

Now, put some basic HTML in portfolio/templates/portfolio/home.html:

<!-- portfolio/templates/portfolio/home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio - {{ name }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background: #f4f4f4;
            color: #333;
            text-align: center;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            padding: 20px 0;
        }
        header {
            background: #333;
            color: #fff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #77aaff 3px solid;
        }
        header h1 {
            margin: 0;
            font-size: 2.5em;
        }
        header p {
            font-size: 1.2em;
        }
        section {
            padding: 40px 0;
            margin-bottom: 20px;
            background: #fff;
            border-bottom: 1px solid #ddd;
        }
        footer {
            padding: 20px;
            margin-top: 20px;
            color: #fff;
            background-color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>{{ name }}</h1>
            <p>{{ tagline }}</p>
        </div>
    </header>

    <section id="about">
        <div class="container">
            <h2>About Me</h2>
            <p>Hello! I'm {{ name }}, a passionate individual enthusiastic about technology and creation. This is my simple portfolio where I'll share my journey and projects.</p>
            <p>Stay tuned for more updates!</p>
        </div>
    </section>

    <footer>
        <p>&copy; 2023 {{ name }}. All rights reserved.</p>
    </footer>
</body>
</html>

Notice the {{ name }} and {{ tagline }}? These are “template variables” that Django replaces with the data from the context dictionary we passed from our views.py file.

Let’s See It Work!

Make sure your development server is running:

python manage.py runserver

Now, open your browser and visit http://127.0.0.1:8000/. You should see your simple portfolio homepage, displaying “Your Name” and “A Passionate Developer & Creator”!

Conclusion

Congratulations! You’ve successfully built your very first Django application: a simple portfolio website. You’ve learned how to:

• Set up a Python virtual environment.
• Install Django.
• Create a Django project and app.
• Understand project and app structure.
• Run the Django development server.
• Define URL patterns.
• Create Django views to handle requests.
• Render HTML templates with dynamic data.

This is just the beginning! From here, you can expand your portfolio by:
* Adding more pages (e.g., “Projects”, “Contact”).
* Creating “models” to store data in a database (like details about your projects).
* Adding CSS and JavaScript (called “static files” in Django).
* Implementing forms for user interaction.

Keep exploring, keep building, and have fun with Django!

Welcome, aspiring web developers! Today, we’re going to embark on a fun and practical journey into the world of web development using Django. We’ll be building a simple URL shortener, a project that’s both useful and a fantastic way to learn core Django concepts. Think of services like Bitly or tinyurl.com – that’s what we’re aiming to create, albeit in a simplified form.

What is a URL Shortener?

Before we dive into the code, let’s clarify what a URL shortener does. Its primary purpose is to take a long, often cumbersome web address (URL) and transform it into a much shorter, more manageable one. When someone clicks on the shortened URL, they are seamlessly redirected to the original long URL. This is incredibly useful for sharing links on social media, in text messages, or anywhere space is limited.

Why Django?

Django is a powerful, high-level Python web framework that encourages rapid development and clean, pragmatic design. It’s built with the philosophy of “Don’t Repeat Yourself” (DRY), meaning it provides many built-in features and tools to help you build robust web applications efficiently. For beginners, Django offers a structured way to learn web development, handling many of the complexities of building web services for you.

Project Setup: Getting Started

First things first, we need to set up our Django project. If you don’t have Python and Django installed, I recommend doing so first. You can find excellent installation guides on the official Python and Django websites.

Once you have them installed, open your terminal or command prompt and let’s create a new Django project:

django-admin startproject url_shortener_project
cd url_shortener_project

This command creates a directory named url_shortener_project with the basic structure of a Django project. The cd url_shortener_project command moves us into that directory.

Now, let’s create a Django app within our project. An app is a self-contained module that performs a specific function. We’ll call our app shortener:

python manage.py startapp shortener

This creates a shortener directory containing files like models.py (for database structure), views.py (for handling requests), and urls.py (for URL routing).

We also need to tell our project about this new app. Open url_shortener_project/settings.py and add 'shortener', to the INSTALLED_APPS list:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'shortener',  # Add this line
]

Designing Our Data Model

Every URL shortener needs to store information about the original long URLs and their corresponding short codes. Django’s Object-Relational Mapper (ORM) makes this incredibly easy. We’ll define a model in shortener/models.py:

from django.db import models

class Url(models.Model):
    long_url = models.URLField(max_length=1000)  # Stores the original, long URL
    short_code = models.CharField(max_length=10, unique=True) # Stores the unique short code

    def __str__(self):
        return f"{self.short_code} -> {self.long_url}"

Explanation of Terms:

• models.Model: This is the base class for all Django model classes. It tells Django that this class represents a database table.
• long_url = models.URLField(max_length=1000): This defines a field named long_url. models.URLField is a special type of field designed to store URLs. max_length=1000 specifies the maximum number of characters this field can hold.
• short_code = models.CharField(max_length=10, unique=True): This defines a field named short_code. models.CharField is for storing text strings. max_length=10 means the short code will be at most 10 characters long. unique=True is crucial – it ensures that no two Url objects can have the same short_code, which is essential for our shortener to work without conflicts.
• def __str__(self): This is a special Python method that defines how an object of this class should be represented as a string. When you see a Url object in the Django admin or in a print statement, this is what will be displayed.

Now, we need to create the database table based on this model. First, we create migration files, which are instructions for Django to update the database:

python manage.py makemigrations

Then, we apply these migrations to our database:

python manage.py migrate

If you’re using Django’s default SQLite database, this will create the necessary tables.

Creating Views: The Logic

Our views will handle the core functionality: taking a long URL and creating a short one, and then redirecting from a short URL to its original. Let’s create these in shortener/views.py.

First, we need a way to generate short codes. For simplicity, we’ll use Python’s random module.

import random
import string
from django.shortcuts import render, redirect
from django.http import HttpResponseRedirect
from .models import Url

def home(request):
    if request.method == 'POST':
        long_url = request.POST['long_url']
        # Generate a random short code
        short_code = ''.join(random.choices(string.ascii_letters + string.digits, k=6))

        # Ensure the short code is unique
        while Url.objects.filter(short_code=short_code).exists():
            short_code = ''.join(random.choices(string.ascii_letters + string.digits, k=6))

        # Save the URL and its short code to the database
        new_url = Url.objects.create(long_url=long_url, short_code=short_code)

        # Construct the shortened URL
        short_url = request.build_absolute_uri('/') + short_code 

        return render(request, 'home.html', {'short_url': short_url})

    return render(request, 'home.html')

def redirect_url(request, short_code):
    try:
        # Find the URL object by its short code
        url_entry = Url.objects.get(short_code=short_code)
        # Redirect to the original long URL
        return HttpResponseRedirect(url_entry.long_url)
    except Url.DoesNotExist:
        # If the short code is not found, render a 404 page or an error message
        return render(request, '404.html', {'error_message': 'Short URL not found'})

Explanation of Terms:

• render(request, template_name, context): This is a Django shortcut function. It loads a specified template, fills it with the data provided in the context dictionary, and returns an HttpResponse object.
• redirect(to): Another shortcut, which redirects the user’s browser to a different URL.
• request.method == 'POST': When a form is submitted, the request method is usually ‘POST’. This checks if the request was a form submission.
• request.POST['long_url']: This retrieves the value of the form field named long_url from the submitted POST data.
• random.choices(string.ascii_letters + string.digits, k=6): This generates a list of 6 random characters, chosen from all uppercase letters (string.ascii_letters), lowercase letters (string.ascii_letters), and digits (string.digits).
• ''.join(...): This takes the list of characters generated above and joins them together into a single string.
• Url.objects.filter(short_code=short_code).exists(): This is how we query our database. Url.objects is the manager for the Url model. filter() selects objects that match the criteria (in this case, where short_code is equal to our generated short_code). .exists() returns True if any matching objects are found, False otherwise. This is our check for uniqueness.
• Url.objects.create(long_url=long_url, short_code=short_code): This creates a new Url record in the database with the provided long_url and short_code.
• request.build_absolute_uri('/'): This creates the full URL for the current site, including the scheme (http/https) and domain. Appending the short_code gives us the complete shortened URL.
• HttpResponseRedirect(url_entry.long_url): This explicitly creates an HTTP redirect response, telling the browser to go to the long_url.
• Url.objects.get(short_code=short_code): This attempts to retrieve a single Url object where the short_code matches. If no such object exists, it raises a Url.DoesNotExist exception.
• try...except Url.DoesNotExist:: This is standard Python error handling. If the Url.DoesNotExist exception occurs (meaning the short code wasn’t found), the code inside the except block is executed.

Designing the User Interface (HTML Templates)

We need a simple HTML page for users to input their long URLs and see their generated short URLs. Create a templates directory inside your shortener app. Then, inside templates, create a home.html file. Also, create a 404.html file for when a short URL is not found.

shortener/templates/home.html:

<!DOCTYPE html>
<html>
<head>
    <title>URL Shortener</title>
</head>
<body>
    <h1>URL Shortener</h1>
    <form method="post">
        {% csrf_token %}
        <label for="long_url">Enter long URL:</label><br>
        <input type="url" id="long_url" name="long_url" required size="50"><br><br>
        <button type="submit">Shorten</button>
    </form>

    {% if short_url %}
        <p>Your shortened URL is: <a href="{{ short_url }}">{{ short_url }}</a></p>
    {% endif %}
</body>
</html>

shortener/templates/404.html:

<!DOCTYPE html>
<html>
<head>
    <title>Not Found</title>
</head>
<body>
    <h1>Oops!</h1>
    <p>{{ error_message }}</p>
    <p><a href="/">Go back to the homepage</a></p>
</body>
</html>

Explanation of Terms:

• {% csrf_token %}: This is a Django template tag that is essential for security. It generates a hidden input field that helps protect your website from Cross-Site Request Forgery (CSRF) attacks.
• method="post": This attribute in the <form> tag tells the browser to send the form data using the HTTP POST method.
• name="long_url": This is important because it’s how we’ll access the input’s value in our Django view (request.POST['long_url']).
• required: This HTML5 attribute makes the input field mandatory. The browser will prevent form submission if this field is empty.
• {% if short_url %} … {% endif %}: This is a Django template tag that checks if a variable named short_url exists and has a value. If it does, the content within the if block is displayed.
• {{ short_url }}: This is how you display the value of a variable in a Django template.

Mapping URLs to Views

We need to tell Django which URL should trigger which view. We do this by creating urls.py files.

First, in your project directory (url_shortener_project), create a urls.py file if one doesn’t exist (Django usually generates one). Then, include your shortener app’s URLs:

url_shortener_project/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('shortener.urls')), # Include our app's URLs
]

Now, create a urls.py file inside your shortener app directory:

shortener/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'), # Maps the root URL to the home view
    path('<str:short_code>/', views.redirect_url, name='redirect_url'), # Maps short codes to the redirect_url view
]

Explanation of Terms:

• path('route', view_function, name='url_name'): This is the core of Django’s URL routing.
  • 'route': This is the URL pattern. For example, '' matches the root of the site, and '<str:short_code>/' matches any string followed by a slash, capturing that string into a variable named short_code.
  • view_function: This is the Python function (from your views.py) that will be called when this route is matched.
  • name='url_name': This is an optional but highly recommended argument. It gives a unique name to this URL pattern, making it easier to reference in your code and templates.
• include('app_name.urls'): This tells Django to look for URL patterns defined in the specified app’s urls.py file.

Testing Our URL Shortener

It’s time for the moment of truth! Save all your files, and run the Django development server:

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/. You should see a simple form. Enter a long URL (e.g., https://www.djangoproject.com/), and click “Shorten.” You should then see your newly generated short URL.

Now, copy that short URL and paste it into your browser’s address bar. You should be automatically redirected to the original long URL!

If you try to access a non-existent short URL (e.g., http://127.0.0.1:8000/nonexistentcode/), you should see the “Oops! Short URL not found” message from our 404.html template.

Next Steps and Enhancements

This is a basic implementation, but you can expand it in many ways:

• Custom Short Codes: Allow users to choose their own short codes.
• Analytics: Track how many times each short URL is clicked.
• User Accounts: Allow users to manage their shortened URLs.
• Error Handling: Add more robust error handling and user feedback.
• Styling: Make the website look nicer with CSS.
• Deployment: Learn how to deploy your Django application to a live server.

Conclusion

Congratulations! You’ve successfully built a functional URL shortener using Django. This project has introduced you to fundamental Django concepts like models, views, templates, and URL routing. Keep experimenting and building – the world of web development is vast and exciting!

Hello, budding web developers! Have you ever wanted to create your own corner on the internet, perhaps a personal blog, but felt overwhelmed by all the technical jargon? You’re in luck! Today, we’re going to dive into Django, a powerful yet beginner-friendly web framework, and build a simple blog application from scratch.

Don’t worry if you’re new to web development or Django. We’ll take it step by step, explaining every concept and command along the way. By the end of this guide, you’ll have a basic blog running and a solid understanding of Django’s core components.

What is Django?

Imagine you want to build a house. You could start by making every brick, mixing all the cement, and cutting all the wood yourself. Or, you could use pre-built tools, designs, and materials that make the process much faster and more organized.

Django is like that set of pre-built tools and designs for building websites. It’s a web framework for Python.
* Web Framework: A collection of pre-written code and tools that helps developers build web applications quickly and efficiently. Instead of writing everything from scratch, you use the framework’s structure and components.
* Python: A popular, easy-to-read programming language that Django is built with.

Django helps you create robust, scalable, and secure web applications by taking care of many common web development tasks, allowing you to focus on the unique features of your project.

Why Django for a Blog?

Django is a fantastic choice for a blog because:
* It handles the database part easily.
* It comes with a powerful built-in admin interface, making it simple to add, edit, and delete blog posts without writing much code.
* It encourages clean, organized code with its “Don’t Repeat Yourself” (DRY) principle.

Let’s get started!

1. Setting Up Your Environment

Before we jump into Django, we need to prepare our workspace.

Install Python and pip

First, make sure you have Python installed on your computer. You can download it from python.org. When you install Python, pip usually comes along with it.

• pip (Python Package Installer): A tool that allows you to install and manage additional software packages (libraries) written in Python.

To check if you have Python and pip, open your command prompt or terminal and type:

python --version
pip --version

You should see version numbers for both. If not, follow the installation instructions on the Python website.

Create a Virtual Environment

It’s good practice to create a virtual environment for each Django project.

• Virtual Environment: An isolated environment for Python projects. It allows you to manage dependencies (libraries) for different projects separately, preventing conflicts. Think of it as a separate toolbox for each project, so tools for one project don’t interfere with another.

• Create a new folder for your project and navigate into it using your terminal:

  bash
mkdir myblog_project
cd myblog_project

• Create a virtual environment inside this folder:

  bash
python -m venv venv

  This creates a folder named venv inside myblog_project that contains your isolated Python environment.

• Activate the virtual environment:

  • On Windows:
    bash
venv\Scripts\activate
  • On macOS/Linux:
    bash
source venv/bin/activate

  You’ll notice (venv) appearing at the start of your terminal prompt, indicating that the virtual environment is active.

Install Django

Now that our environment is ready, let’s install Django!

pip install django

This command uses pip to download and install the latest version of Django into your active virtual environment.

2. Starting a New Django Project

Django organizes code into “projects” and “apps.”

• Project: The entire web application, including its configurations, settings, and one or more “apps.”
• App: A self-contained module that does one specific thing, like a blog, a user management system, or a comment section. A Django project can have multiple apps.

Let’s create our blog project:

django-admin startproject myblog .

• django-admin: A command-line utility for administrative tasks in Django.
• startproject myblog: This tells Django to create a new project named myblog.
• .: The dot at the end is important! It tells Django to create the project files in the current directory, rather than creating an extra myblog folder inside myblog_project.

After this, your project folder structure will look something like this:

myblog_project/
├── venv/
├── myblog/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Let’s quickly understand these files:
* manage.py: A command-line utility that interacts with your Django project. You’ll use this a lot for running the server, creating apps, and managing the database.
* myblog/settings.py: This file holds all the configuration for your Django project, like database settings, installed apps, and static file locations.
* myblog/urls.py: This is where you define the URL routes for your entire project. It tells Django which function (view) to call when a specific URL is visited.

3. Creating Our Blog App

Now that we have the project, let’s create a specific app for our blog functionalities.

python manage.py startapp blog

This creates a new folder named blog inside your myblog_project directory, with several files inside it:

myblog_project/
├── venv/
├── blog/
│   ├── migrations/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── myblog/
│   ├── ...
└── manage.py

Register the App

Django needs to know about this new app. Open myblog/settings.py and find the INSTALLED_APPS list. Add 'blog' to it:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog', # Our new app!
]

4. Defining Our Blog Post Model (Database Structure)

A blog needs posts! We need to tell Django how our blog posts will be structured in the database. This is done using models.

• Model: A Python class that defines the structure of data in your database. Each model maps to a table in the database, and each attribute of the model represents a column in that table. Django uses an ORM (Object-Relational Mapper), which means you interact with your database using Python code instead of raw SQL.

Open blog/models.py and define a Post model:

from django.db import models
from django.contrib.auth.models import User # To link posts to users

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

Let’s break down the Post model:
* models.Model: This tells Django that our Post class is a Django model, and it will have a corresponding table in the database.
* title = models.CharField(max_length=200): A field for the post’s title, limited to 200 characters. CharField is for short strings.
* content = models.TextField(): A field for the main body of the post. TextField is for longer text.
* author = models.ForeignKey(User, on_delete=models.CASCADE): This links each Post to a User (the person who wrote it). ForeignKey creates a relationship between two models. on_delete=models.CASCADE means if a user is deleted, all their posts will also be deleted.
* created_at = models.DateTimeField(auto_now_add=True): Automatically sets the date and time when the post is first created.
* updated_at = models.DateTimeField(auto_now=True): Automatically updates the date and time whenever the post is saved (modified).
* def __str__(self): return self.title: This special method tells Django how to represent a Post object as a string (e.g., in the admin interface). It will show the post’s title.

Make and Apply Migrations

After defining our model, we need to tell Django to create the corresponding tables in our database. This is done using migrations.

• Migrations: Django’s way of propagating changes you make to your models (like adding a field or changing its type) into your database schema.

• Create migration files: This inspects your models and creates Python files that describe the changes needed for your database.

  bash
python manage.py makemigrations

  You’ll see output like: Migrations for 'blog': blog/migrations/0001_initial.py.

• Apply migrations: This actually runs those migration files against your database to create the tables.

  bash
python manage.py migrate

  This will apply migrations for Django’s built-in apps (like auth and admin) as well as our blog app.

5. Setting Up the Admin Interface

Django comes with an amazing, ready-to-use admin interface. This is a dashboard where you can easily manage your website’s data (like adding new blog posts, users, etc.) without writing a separate backend.

Create a Superuser

To access the admin interface, you need an admin account (a superuser).

python manage.py createsuperuser

Follow the prompts to create a username, email (optional), and password. Make sure to remember your username and password!

Register Your Model with the Admin

For our Post model to appear in the admin interface, we need to register it. Open blog/admin.py:

from django.contrib import admin
from .models import Post

admin.site.register(Post)

Now, let’s run the server and check it out!

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/admin/. Log in with the superuser credentials you just created. You should see “Posts” under the “BLOG” section. Click on it, and you can start adding new blog posts!

6. Creating Views (Logic)

Now that we can add posts, let’s display them on a web page. This is handled by views.

• View: A function or class that takes a web request, interacts with the database (using models) to get or save data, and then returns a web response (usually by rendering an HTML template).

Open blog/views.py and add a simple view to list all posts:

from django.shortcuts import render
from .models import Post

def post_list(request):
    posts = Post.objects.all().order_by('-created_at') # Get all posts, newest first
    return render(request, 'blog/post_list.html', {'posts': posts})

Let’s break this down:
* from django.shortcuts import render: render is a shortcut function that takes an HTTP request, a template name, and a dictionary of data, then combines them to return an HttpResponse (an HTML page).
* posts = Post.objects.all().order_by('-created_at'): This is where Django’s ORM comes in handy. Post.objects.all() fetches all Post objects from the database. .order_by('-created_at') sorts them so the newest posts appear first (the - means descending order).
* return render(request, 'blog/post_list.html', {'posts': posts}): This tells Django to render an HTML file named post_list.html (which we’ll create next) and pass the posts data to it under the name posts.

7. Creating Templates (HTML Structure)

The view needs an HTML file to display the data. These are called templates.

• Template: An HTML file that contains placeholders for dynamic content. Django’s template language allows you to insert data from your views, loop through lists, and apply basic logic directly within your HTML.

Inside your blog app folder, create a new folder named templates, and inside templates, create another folder named blog. Inside blog, create a file named post_list.html.

Your structure should look like: myblog_project/blog/templates/blog/post_list.html

<!-- blog/templates/blog/post_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Django Blog</title>
    <style> /* Basic styling for readability */
        body { font-family: sans-serif; margin: 2em; line-height: 1.6; background-color: #f4f4f4; color: #333; }
        .container { max-width: 800px; margin: auto; background: white; padding: 2em; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { color: #0056b3; text-align: center; margin-bottom: 1em; }
        .post { border-bottom: 1px solid #eee; padding-bottom: 1.5em; margin-bottom: 1.5em; }
        .post:last-child { border-bottom: none; }
        h2 { color: #333; margin-bottom: 0.5em; }
        p.author-date { font-size: 0.9em; color: #666; margin-bottom: 1em; }
        p.content { margin-top: 1em; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to My Simple Blog!</h1>

        {% for post in posts %}
            <div class="post">
                <h2>{{ post.title }}</h2>
                <p class="author-date">By {{ post.author.username }} on {{ post.created_at|date:"F j, Y" }}</p>
                <p class="content">{{ post.content|linebreaksbr }}</p>
            </div>
        {% empty %}
            <p>No blog posts found yet. Check back soon!</p>
        {% endfor %}
    </div>
</body>
</html>

In this template:
* {% for post in posts %} and {% endfor %}: This is Django’s template tag for looping. It goes through each post in the posts list that we passed from the view.
* {{ post.title }}: This is a Django template variable. It displays the title attribute of the current post object.
* {{ post.author.username }}: Accesses the username of the author linked to the post.
* {{ post.created_at|date:"F j, Y" }}: Displays the created_at timestamp in a nicely formatted way. |date:"F j, Y" is a template filter that formats the date.
* {{ post.content|linebreaksbr }}: Displays the content, converting newlines into <br> tags for proper display.
* {% empty %}: If the posts list is empty, this block will be displayed instead of the loop.

8. URL Routing

Finally, we need to tell Django which URL should trigger our post_list view. This is handled by urls.py files. We’ll have two urls.py files: one at the project level and one at the app level.

Project-level urls.py

First, open myblog/urls.py (the one in your myblog project folder) and link to your blog app’s URLs:

from django.contrib import admin
from django.urls import path, include # Import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')), # This tells Django to look for URLs in blog/urls.py
]

• path('', include('blog.urls')): This means that if the URL path is empty (i.e., the root of your website, http://127.0.0.1:8000/), Django should “include” the URLs defined in your blog app’s urls.py file.

App-level urls.py

Now, create a new file named urls.py inside your blog app folder (myblog_project/blog/urls.py).

from django.urls import path
from . import views # Import the views from the current app

urlpatterns = [
    path('', views.post_list, name='post_list'), # Our blog home page
]

• path('', views.post_list, name='post_list'): This defines a URL pattern.
  • The first '' means this pattern matches an empty string (so combined with the project include, it means http://127.0.0.1:8000/).
  • views.post_list is the function (our view) that Django should call when this URL is visited.
  • name='post_list' gives this URL a unique name, which is useful for referencing it elsewhere in your project (e.g., in templates or other views).

9. Run the Server and See Your Blog!

You’re done with the basic setup! Make sure your virtual environment is active and run the development server:

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/.

You should now see your blog posts displayed! If you don’t have any posts yet, go to http://127.0.0.1:8000/admin/, log in, and add a few posts under the “Posts” section. Refresh your blog page, and they will appear!

Conclusion

Congratulations! You’ve successfully built a basic blog application using Django. You’ve learned about:

• Setting up a Django project and app.
• Defining database structures with models.
• Managing data with Django’s built-in admin.
• Handling requests and responses with views.
• Displaying dynamic content using templates.
• Routing URLs to the correct views.

This is just the beginning of your Django journey. From here, you can expand your blog by adding features like:
* Detailed post views.
* Comments section.
* User registration and authentication.
* Styling with CSS frameworks like Bootstrap.

Keep experimenting, keep learning, and happy coding!

Welcome, aspiring web developers! If you’re looking to dive into the world of web development with a powerful and elegant framework, Django is an excellent choice. It’s built by experienced developers, takes care of a lot of the heavy lifting, and encourages good design practices.

In this beginner-friendly guide, we’ll walk through creating a simple “To-Do List” application using Django. This app will demonstrate the core principles of web development known as CRUD operations: Create, Read, Update, and Delete. By the end, you’ll have a foundational understanding of how Django works and how to build basic interactive web applications.

What is Django?

Django is a high-level Python web framework that enables rapid development of secure and maintainable websites. It follows the “Don’t Repeat Yourself” (DRY) principle, meaning you write less code, and it provides many features out-of-the-box, saving you time and effort. Think of it as a complete toolbox for building websites, offering tools for handling databases, URLs, user authentication, and much more.

What is CRUD?

CRUD is a fundamental concept in database-driven applications. It stands for:
* Create: Adding new data (e.g., adding a new To-Do item).
* Read: Viewing existing data (e.g., seeing your list of To-Do items).
* Update: Modifying existing data (e.g., changing a To-Do item’s description).
* Delete: Removing data (e.g., deleting a completed To-Do item).

Almost every web application you use today relies on these four basic operations.

Setting Up Your Environment

Before we start coding, let’s set up our development environment.

Prerequisites

You’ll need Python and pip (Python’s package installer) installed on your system. Most modern operating systems come with Python pre-installed. You can check by opening your terminal or command prompt and typing:

python --version
pip --version

If you don’t have them, please refer to the official Python website for installation instructions.

Virtual Environment Magic

It’s a best practice to use a virtual environment for every Django project.
* Supplementary Explanation: Virtual Environment
A virtual environment creates an isolated space for your project’s Python packages. This prevents conflicts between different projects that might require different versions of the same package. It keeps your project dependencies clean and manageable.

To create and activate a virtual environment:

1. Navigate to where you want to store your project (e.g., Documents/DjangoProjects).
2. Create a new directory for your project:
   bash
mkdir mycrudproject
cd mycrudproject
3. Create the virtual environment (we’ll name it .venv):
   bash
python -m venv .venv
4. Activate the virtual environment:
   • On macOS/Linux:
     bash
source .venv/bin/activate
   • On Windows:
     bash
.\.venv\Scripts\activate
     You’ll know it’s active when you see (.venv) at the beginning of your terminal prompt.

Installing Django

Now that your virtual environment is active, install Django:

pip install django

Starting Your Django Project

Django projects are structured into a “project” and one or more “apps.” A project is the entire website, while an app is a self-contained module that does one thing (e.g., a blog app, a user authentication app, or in our case, a To-Do app).

Creating the Project

From inside your mycrudproject directory (where your virtual environment is):

django-admin startproject myproject .

The . at the end tells Django to create the project files in the current directory, rather than creating an extra myproject folder.

This command creates a few important files:
* manage.py: A command-line utility for interacting with your Django project.
* myproject/: This directory contains your project’s settings, URL configurations, and more.

Creating Your First App

Let’s create our To-Do app:

python manage.py startapp todo_app

This creates a new todo_app directory with its own set of files, including models.py, views.py, admin.py, etc.

Registering Your App

Django needs to know about the new app. Open myproject/settings.py and add 'todo_app' to the INSTALLED_APPS list:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo_app',  # Our new app!
]

Building the To-Do Model (Create & Read Foundation)

The model is where you define the structure of your data. In our To-Do app, each To-Do item will have a title and a description.

Defining Your Data Structure (models.py)

Open todo_app/models.py and add the following code:

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True, null=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

• Supplementary Explanation: Model
  In Django, a “model” is a Python class that defines the structure of data that will be stored in your database. Each attribute (like title, description) in the class represents a column in a database table. Django’s powerful Object-Relational Mapper (ORM) allows you to interact with your database using Python code instead of raw SQL.

Here’s what these fields mean:
* title: A short text field for the To-Do’s title. max_length is required for CharField.
* description: A longer text field. blank=True means it’s optional in forms, and null=True means it can be empty in the database.
* completed: A true/false field, defaulting to False.
* created_at: Automatically stores the date and time when the To-Do is created.
* __str__(self): This method tells Django how to represent a Todo object as a string, which is helpful in the admin panel.

Making and Applying Migrations

Whenever you change your models, you need to tell Django to update your database schema.

• Supplementary Explanation: Migrations
  “Migrations” are Django’s way of propagating changes you make to your models (like adding a new field or a new model) into your database schema. Django generates Python files that describe these changes, and you apply them to your database.

• Make migrations: This command creates the migration files based on your models.py changes.
  bash
python manage.py makemigrations

• Apply migrations: This command executes the migration files, creating the Todo table in your database.
  bash
python manage.py migrate
  This also applies migrations for Django’s built-in apps (like user authentication).

Accessing Your Data via Admin Panel

Django provides an incredible built-in admin interface that lets you manage your database data easily.

1. Create a superuser: This user will have full access to the admin panel.
   bash
python manage.py createsuperuser
   Follow the prompts to create a username, email, and password.

2. Register your model: For your Todo model to appear in the admin panel, you need to register it. Open todo_app/admin.py and add:
   “`python
   # todo_app/admin.py

   from django.contrib import admin
   from .models import Todo

   admin.site.register(Todo)
   “`

3. Run the development server:
   bash
python manage.py runserver
   Open your web browser and go to http://127.0.0.1:8000/admin/. Log in with the superuser credentials you just created. You should now see “Todos” under the “TODO_APP” section. Click on “Todos” and then “Add Todo” to create a few sample To-Do items.

Creating Your Views, Templates, and URLs (Read, Create, Update, Delete)

Now, let’s build the user-facing parts of our application.

• Supplementary Explanation: View
  A “view” in Django is a Python function or class that receives a web request (like someone visiting a URL) and returns a web response (like an HTML page). It’s where your application’s logic resides, deciding what data to fetch and what template to render.

• Supplementary Explanation: Template
  A “template” is a file (usually HTML) that defines the structure and layout of the web page. Django templates allow you to embed Python variables and logic directly into your HTML, making them dynamic.

• Supplementary Explanation: URL
  A “URL” (Uniform Resource Locator) is the web address that users type into their browser. In Django, you map specific URLs to specific views, telling Django which view function to run when a certain address is visited.

Creating Forms for Data Input

Django has a powerful forms system. We’ll use a ModelForm which automatically creates a form from our Todo model.

Create a new file todo_app/forms.py:

from django import forms
from .models import Todo

class TodoForm(forms.ModelForm):
    class Meta:
        model = Todo
        fields = ['title', 'description', 'completed']

Defining Your Views (todo_app/views.py)

Open todo_app/views.py and replace its content with the following:

from django.shortcuts import render, redirect, get_object_or_404
from .models import Todo
from .forms import TodoForm

def todo_list(request):
    """
    Displays a list of all To-Do items. (Read operation)
    """
    todos = Todo.objects.all().order_by('-created_at')
    return render(request, 'todo_app/todo_list.html', {'todos': todos})

def todo_create(request):
    """
    Handles creating a new To-Do item. (Create operation)
    """
    if request.method == 'POST':
        form = TodoForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('todo_list')
    else:
        form = TodoForm()
    return render(request, 'todo_app/todo_form.html', {'form': form, 'page_title': 'Add New To-Do'})

def todo_update(request, pk):
    """
    Handles updating an existing To-Do item. (Update operation)
    """
    todo = get_object_or_404(Todo, pk=pk)
    if request.method == 'POST':
        form = TodoForm(request.POST, instance=todo)
        if form.is_valid():
            form.save()
            return redirect('todo_list')
    else:
        form = TodoForm(instance=todo) # Pre-fill form with existing data
    return render(request, 'todo_app/todo_form.html', {'form': form, 'page_title': 'Edit To-Do'})

def todo_delete(request, pk):
    """
    Handles deleting a To-Do item. (Delete operation)
    """
    todo = get_object_or_404(Todo, pk=pk)
    if request.method == 'POST':
        todo.delete()
        return redirect('todo_list')
    # For simplicity, we'll just confirm deletion on a POST request
    # In a real app, you might render a confirmation page first
    return render(request, 'todo_app/todo_confirm_delete.html', {'todo': todo})

Designing Your Templates

First, tell Django where to find your app’s templates. Create a new directory structure todo_app/templates/todo_app/.
* mycrudproject/todo_app/templates/todo_app/

Now, create the HTML files inside todo_app/templates/todo_app/:

todo_list.html (for viewing To-Dos)

<!-- mycrudproject/todo_app/templates/todo_app/todo_list.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My To-Do List</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .todo-item { border: 1px solid #eee; padding: 10px; margin-bottom: 10px; }
        .todo-item h3 { margin-top: 0; }
        .actions a { margin-right: 10px; text-decoration: none; color: blue; }
        .actions a:hover { text-decoration: underline; }
        .completed { text-decoration: line-through; color: gray; }
        .add-link { display: block; margin-bottom: 20px; text-decoration: none; color: green; font-weight: bold;}
        .add-link:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>My To-Do List</h1>
    <a href="{% url 'todo_create' %}" class="add-link">Add New To-Do</a>

    {% if todos %}
        {% for todo in todos %}
            <div class="todo-item {% if todo.completed %}completed{% endif %}">
                <h3>{{ todo.title }}</h3>
                {% if todo.description %}
                    <p>{{ todo.description }}</p>
                {% endif %}
                <p><small>Created: {{ todo.created_at|date:"M d, Y P" }}</small></p>
                <div class="actions">
                    <a href="{% url 'todo_update' pk=todo.pk %}">Edit</a>
                    <a href="{% url 'todo_delete' pk=todo.pk %}">Delete</a>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <p>No To-Do items yet. Why not add one?</p>
    {% endif %}
</body>
</html>

• Supplementary Explanation: {% ... %} and {{ ... }} in Templates
  {% ... %} are “template tags” that execute logic (like if statements or for loops).
  {{ ... }} are “template variables” that display data passed from your Django views.

todo_form.html (for creating/updating To-Dos)

<!-- mycrudproject/todo_app/templates/todo_app/todo_form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ page_title }}</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        form div { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], textarea { width: 300px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        input[type="checkbox"] { margin-right: 5px; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
        .back-link { display: block; margin-top: 20px; text-decoration: none; color: blue; }
        .back-link:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>{{ page_title }}</h1>
    <form method="post">
        {% csrf_token %} {# Django requires this for security when submitting forms #}
        {{ form.as_p }} {# Renders each form field inside a <p> tag #}
        <button type="submit">Save To-Do</button>
    </form>
    <a href="{% url 'todo_list' %}" class="back-link">Back to List</a>
</body>
</html>

todo_confirm_delete.html (for deleting To-Dos)

<!-- mycrudproject/todo_app/templates/todo_app/todo_confirm_delete.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirm Delete</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .delete-btn { background-color: #dc3545; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; }
        .delete-btn:hover { background-color: #c82333; }
        .cancel-link { margin-left: 15px; text-decoration: none; color: blue; }
        .cancel-link:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>Confirm Deletion</h1>
    <p>Are you sure you want to delete the To-Do: "<strong>{{ todo.title }}</strong>"?</p>
    <form method="post">
        {% csrf_token %}
        <button type="submit" class="delete-btn">Yes, delete it</button>
        <a href="{% url 'todo_list' %}" class="cancel-link">Cancel</a>
    </form>
</body>
</html>

Mapping URLs

We need to create URL patterns for our views.

1. Create todo_app/urls.py: This file doesn’t exist by default in the app. Create it:
   “`python
   # todo_app/urls.py

   from django.urls import path
   from . import views

   urlpatterns = [
   path(”, views.todo_list, name=’todo_list’),
   path(‘create/’, views.todo_create, name=’todo_create’),
   path(‘update//’, views.todo_update, name=’todo_update’),
   path(‘delete//’, views.todo_delete, name=’todo_delete’),
   ]
   ``
* **Supplementary Explanation:pkin URLs**pkstands for "primary key," which is a unique identifier for each record in a database table.tells Django to expect an integer value in this part of the URL and pass it as an argument namedpk` to the view function.

2. Include app URLs in project URLs: Open myproject/urls.py and add an include statement:

   “`python

   myproject/urls.py

   from django.contrib import admin
   from django.urls import path, include # Import include

   urlpatterns = [
   path(‘admin/’, admin.site.urls),
   path(‘todos/’, include(‘todo_app.urls’)), # Include our app’s URLs
   ]
   ``
Now, any URL starting with/todos/will be handed over totodo_app/urls.py` to be matched.

Running Your App!

You’ve built a full CRUD application! Let’s see it in action.

Make sure your virtual environment is active and run the development server:

python manage.py runserver

Open your browser and navigate to http://127.0.0.1:8000/todos/.

You should see your To-Do list!
* Click “Add New To-Do” to create new items.
* Click “Edit” next to an item to update its details.
* Click “Delete” to remove an item.

Conclusion

Congratulations! You’ve successfully built your first simple CRUD application using Django. You’ve learned how to:
* Set up a Django project and app.
* Define data models and use migrations.
* Interact with the Django admin panel.
* Create views to handle web requests.
* Design HTML templates to display data and forms.
* Map URLs to connect everything together.

This is just the beginning of your Django journey. From here, you can explore adding user authentication, more complex models, advanced forms, styling with CSS, and much more. Keep experimenting, and happy coding!

Welcome, budding web developers! Have you ever thought about creating your own website, maybe a place to share your thoughts, photos, or even coding adventures? Building a blog is a fantastic way to start, and today, we’re going to embark on this exciting journey using Django, a powerful and popular web framework. Don’t worry if you’re new to this; we’ll take it one step at a time, explaining everything along the way.

What is Django?

Imagine you want to build a house. You could start by making every brick, mixing your own cement, and forging your own nails. Or, you could use a pre-built kit that provides you with sturdy walls, a roof structure, and clear instructions. Django is like that pre-built kit for websites.

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. This means it provides many ready-made components and tools that handle common web development tasks, allowing you to focus on the unique parts of your website without reinventing the wheel. It’s known for being “batteries included,” which means it comes with a lot of features built-in, like an administrative panel, an Object-Relational Mapper (ORM) for databases, and a templating engine.

• Python Web Framework: A collection of modules and tools written in Python that helps you build websites.
• Rapid Development: Lets you build things quickly because many common functionalities are already handled.
• Pragmatic Design: Focuses on practical solutions that work well in real-world applications.

Getting Started: Prerequisites

Before we dive into Django, you’ll need a couple of things installed on your computer:

• Python: Django is built with Python, so you need Python installed. If you don’t have it, download the latest stable version from python.org.
• pip: This is Python’s package installer, which comes with Python. We’ll use pip to install Django and other libraries.

You can check if Python and pip are installed by opening your terminal or command prompt and typing:

python --version
pip --version

If you see version numbers, you’re good to go!

Setting Up Your Development Environment

It’s a good practice to create a virtual environment for each of your Python projects. Think of a virtual environment as a clean, isolated space for your project’s dependencies. This prevents conflicts between different projects that might require different versions of the same library.

1. Create a Project Folder:
   Let’s start by making a new folder for our blog project.

   bash
mkdir myblog
cd myblog

2. Create a Virtual Environment:
   Inside your myblog folder, run this command:

   bash
python -m venv venv
   This creates a folder named venv (you can name it anything) that contains your isolated environment.

3. Activate the Virtual Environment:
   You need to “activate” this environment so that any packages you install are put into it.

   • On macOS/Linux:
     bash
source venv/bin/activate
   • On Windows (Command Prompt):
     bash
venv\Scripts\activate.bat
   • On Windows (PowerShell):
     powershell
.\venv\Scripts\Activate.ps1

   You’ll know it’s active when you see (venv) at the beginning of your terminal prompt.

4. Install Django:
   Now that your virtual environment is active, let’s install Django!

   bash
pip install django

   This command tells pip to download and install the Django framework into your active virtual environment.

Creating Your First Django Project

A Django project is like the entire house blueprint, containing all the settings, configurations, and applications that make up your website.

1. Start a New Django Project:
   While still in your myblog directory and with your virtual environment active, run:

   bash
django-admin startproject blog_project .

   • django-admin: The command-line utility for Django.
   • startproject: A django-admin command to create a new project.
   • blog_project: This is the name of our project’s main configuration folder.
   • .: The dot at the end is important! It tells Django to create the project files in the current directory, rather than creating an additional blog_project subfolder.

   After running this, your myblog directory should look something like this:

   myblog/
├── venv/
├── blog_project/
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py

   • manage.py: A command-line utility for interacting with your Django project. You’ll use this a lot!
   • blog_project/settings.py: This file holds all your project’s configurations, like database settings, installed apps, and static file locations.
   • blog_project/urls.py: This is where you define the URL patterns for your entire project, telling Django which function to call when a specific URL is visited.

2. Run the Development Server:
   Let’s make sure everything is working.

   bash
python manage.py runserver

   You should see output similar to this:

   “`
   Watching for file changes with StatReloader
   Performing system checks…

   System check identified no issues (0 silenced).

   You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
   Run ‘python manage.py migrate’ to apply them.
   August 16, 2023 – 14:30:00
   Django version 4.2.4, using settings ‘blog_project.settings’
   Starting development server at http://127.0.0.1:8000/
   Quit the server with CONTROL-C.
   “`

   Open your web browser and go to http://127.0.0.1:8000/. You should see a success page with a rocket taking off! Congratulations, your Django project is up and running!

   To stop the server, press Ctrl+C in your terminal.

Creating Your Blog Application

In Django, an application (or “app”) is a modular, self-contained unit that does one thing. For our blog, we’ll create a blog app to handle all the blog-specific functionalities like displaying posts. A Django project can have multiple apps.

1. Create a New App:
   Make sure you are in the myblog directory (the one containing manage.py) and your virtual environment is active.

   bash
python manage.py startapp blog

   This creates a new folder named blog inside your myblog directory, with its own set of files:

   myblog/
├── venv/
├── blog_project/
│ └── ...
├── blog/
│ ├── migrations/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
└── manage.py

2. Register Your New App:
   Django needs to know about the new blog app. Open blog_project/settings.py and find the INSTALLED_APPS list. Add 'blog' to it.

   “`python

   blog_project/settings.py

   INSTALLED_APPS = [
   ‘django.contrib.admin’,
   ‘django.contrib.auth’,
   ‘django.contrib.contenttypes’,
   ‘django.contrib.sessions’,
   ‘django.contrib.messages’,
   ‘django.contrib.staticfiles’,
   ‘blog’, # <– Add your new app here
   ]
   “`

Designing Your Blog’s Data Structure (Models)

Now, let’s define what a blog post looks like. In Django, you describe your data using models. A model is a Python class that represents a table in your database. Each attribute in the class represents a column in that table.

Open blog/models.py and define a Post model:

from django.db import models
from django.utils import timezone # Import timezone for default date
from django.contrib.auth.models import User # Import User model

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now) # Automatically set when post is created
    author = models.ForeignKey(User, on_delete=models.CASCADE) # Link to a User

    def __str__(self):
        return self.title

• models.Model: All Django models inherit from this base class.
• title (CharField): A short text field for the post’s title, with a maximum length of 200 characters.
• content (TextField): A large text field for the main body of the blog post.
• date_posted (DateTimeField): Stores the date and time the post was published. default=timezone.now automatically sets the current time.
• author (ForeignKey): This creates a relationship between Post and Django’s built-in User model. models.CASCADE means if a user is deleted, all their posts will also be deleted.
• __str__(self): This special method tells Django what to display when it needs to represent a Post object as a string (e.g., in the admin panel). We want it to show the post’s title.

Applying Migrations

After creating or changing your models, you need to tell Django to update your database schema. This is done with migrations.

1. Make Migrations:
   This command creates migration files based on the changes you made to your models.py.

   bash
python manage.py makemigrations blog
   You should see output indicating that a migration file (e.g., 0001_initial.py) was created for your blog app.

2. Apply Migrations:
   This command applies the changes defined in the migration files to your database. It will also apply Django’s built-in migrations for things like user authentication.

   bash
python manage.py migrate
   You’ll see many Applying ... OK messages, including for your blog app. This creates the actual Post table in your database.

Making Your Blog Posts Manageable: The Admin Interface

Django comes with a powerful, production-ready administrative interface out of the box. We can register our Post model here to easily add, edit, and delete blog posts without writing any custom code.

1. Register the Model:
   Open blog/admin.py and add the following:

   “`python

   blog/admin.py

   from django.contrib import admin
   from .models import Post

   admin.site.register(Post)
   ``
This line simply tells the Django admin site to include ourPost` model.

2. Create a Superuser:
   To access the admin panel, you need an administrator account.

   bash
python manage.py createsuperuser
   Follow the prompts to create a username, email (optional), and password. Make sure to remember them!

3. Access the Admin:
   Run your development server again:

   bash
python manage.py runserver
   Go to http://127.0.0.1:8000/admin/ in your browser. Log in with the superuser credentials you just created. You should now see “Posts” listed under “BLOG”. Click on “Posts” and then “Add Post” to create your first blog entry!

Displaying Your Blog Posts: Views and URLs

Now that we can create posts, let’s display them on a web page. This involves two main components: Views and URLs.

• Views: Python functions (or classes) that receive a web request and return a web response. They contain the logic to fetch data, process it, and prepare it for display.

• URLs: Patterns that map a specific web address to a view.

• Define a View:
  Open blog/views.py and add a simple view to fetch all blog posts:

  “`python

  blog/views.py

  from django.shortcuts import render
  from .models import Post

  def post_list(request):
  posts = Post.objects.all().order_by(‘-date_posted’) # Get all posts, newest first
  context = {
  ‘posts’: posts
  }
  return render(request, ‘blog/post_list.html’, context)
  “`

  • Post.objects.all(): Fetches all Post objects from the database.
  • .order_by('-date_posted'): Sorts them by date_posted in descending order (newest first).
  • context: A dictionary that we pass to our template, containing the data it needs.
  • render(): A shortcut function that takes the request, a template name, and context data, then returns an HttpResponse with the rendered HTML.

• Map URLs for the App:
  Inside your blog app folder, create a new file called urls.py. This file will handle the URL patterns specific to your blog app.

  “`python

  blog/urls.py

  from django.urls import path
  from . import views

  urlpatterns = [
  path(”, views.post_list, name=’post_list’),
  ]
  “`

  • path('', ...): This means an empty string, so http://127.0.0.1:8000/blog/ will map to this pattern.
  • views.post_list: Calls the post_list function from blog/views.py.
  • name='post_list': Gives this URL pattern a name, which is useful for referencing it later in templates or other parts of your code.

• Include App URLs in Project URLs:
  Now, we need to tell the main project’s urls.py to include the URL patterns from our blog app. Open blog_project/urls.py:

  “`python

  blog_project/urls.py

  from django.contrib import admin
  from django.urls import path, include # Import include

  urlpatterns = [
  path(‘admin/’, admin.site.urls),
  path(‘blog/’, include(‘blog.urls’)), # Include your blog app’s URLs
  ]
  “`

  • path('blog/', include('blog.urls')): This means any URL starting with blog/ will be handled by the urls.py file within our blog app. So, http://127.0.0.1:8000/blog/ will resolve to the post_list view.

Bringing It All Together with Templates

Templates are HTML files that Django uses to render the web page. They contain static parts of the HTML along with special Django template tags to insert dynamic data from your views.

1. Create a Templates Directory:
   Inside your blog app folder, create a new directory named templates, and inside that, another directory named blog. This structure (app_name/templates/app_name/) is a best practice in Django to prevent template name collisions if you have multiple apps.

   myblog/
└── blog/
└── templates/
└── blog/
└── post_list.html

2. Create the post_list.html Template:
   Open blog/templates/blog/post_list.html and add the following HTML:

   html
<!-- blog/templates/blog/post_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Blog</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
.container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h1 { color: #333; text-align: center; }
.post { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
.post:last-child { border-bottom: none; }
h2 { color: #0056b3; }
.post-meta { font-size: 0.9em; color: #666; margin-bottom: 5px; }
.post-content { line-height: 1.6; }
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Awesome Blog!</h1>
{% for post in posts %}
<div class="post">
<h2>{{ post.title }}</h2>
<p class="post-meta">By {{ post.author.username }} on {{ post.date_posted|date:"F d, Y" }}</p>
<p class="post-content">{{ post.content|linebreaksbr }}</p>
</div>
{% empty %}
<p>No posts yet. Start writing!</p>
{% endfor %}
</div>
</body>
</html>

   • {% for post in posts %}: This is a Django template tag that loops through each post in the posts list (which we passed from our view).
   • {{ post.title }}: This is another template tag that displays the title attribute of the current post object.
   • {{ post.author.username }}: Accesses the username of the author linked to the post.
   • {{ post.date_posted|date:"F d, Y" }}: Displays the date_posted and formats it nicely. |date:"F d, Y" is a template filter.
   • {{ post.content|linebreaksbr }}: Displays the content and replaces newlines with <br> tags to preserve line breaks from the database.
   • {% empty %}: If the posts list is empty, this block will be executed instead of the for loop.

Running Your Django Server

With all these pieces in place, let’s see our blog in action!

Make sure your virtual environment is active and you are in the myblog directory (where manage.py resides).

python manage.py runserver

Now, open your browser and navigate to http://127.0.0.1:8000/blog/. You should see a simple page listing the blog posts you created through the admin interface!

Conclusion

Congratulations! You’ve just built a foundational blog using Django. You’ve learned how to:

• Set up a Django project and app.
• Define data models.
• Manage your database with migrations.
• Use Django’s built-in admin panel.
• Create views to fetch data.
• Map URLs to views.
• Display dynamic content using templates.

This is just the beginning. From here, you can expand your blog by adding features like individual post detail pages, comments, user authentication beyond the admin, styling with CSS, and much more. Keep experimenting, keep building, and happy coding!

Have you ever wanted a place online to showcase your awesome projects, skills, or creative work? A portfolio website is the perfect solution! It’s your personal corner of the internet where you can impress potential employers, clients, or collaborators.

In this guide, we’re going to build a simple portfolio website using Django. Django is a powerful and popular web framework for Python. Think of a web framework as a complete toolkit that helps you build websites much faster and more efficiently than starting from scratch. Django is known for its “batteries-included” philosophy, meaning it comes with many features built-in, like an admin panel and database management, which are super helpful, especially for beginners.

By the end of this tutorial, you’ll have a functional website that can display a list of your projects, complete with titles, descriptions, and even images!

Why Django for a Portfolio?

Django offers several benefits that make it a great choice for your portfolio:

• Python-based: If you already know or are learning Python, Django will feel familiar.
• Fast Development: Django helps you get features up and running quickly thanks to its conventions and built-in tools.
• Scalable: While we’re starting small, Django can handle websites with millions of users, so your portfolio can grow with you.
• Secure: Django takes security seriously, helping to protect your website from common vulnerabilities.
• Rich Ecosystem: A large community means lots of resources, libraries, and support are available.

Let’s dive in and start building!

Prerequisites

Before we begin, make sure you have the following installed on your computer:

• Python 3: Django requires Python. You can download it from the official Python website.
• pip: This is Python’s package installer, usually included with Python 3. We’ll use it to install Django.
• A Text Editor or IDE: Something like VS Code, Sublime Text, or Atom will be perfect for writing your code.
• Basic Terminal/Command Prompt Knowledge: We’ll be running commands to set up our project.

Setting Up Your Development Environment

It’s good practice to create a virtual environment for each of your Python projects. Think of a virtual environment as a secluded bubble where you install project-specific Python packages (like Django). This prevents conflicts between different projects that might require different versions of the same package.

1. Create a Project Directory

First, create a folder for your project and navigate into it using your terminal.

mkdir my_portfolio
cd my_portfolio

2. Create a Virtual Environment

Inside your my_portfolio directory, run the following command to create a virtual environment named venv (you can name it anything, but venv is common):

python -m venv venv

• python -m venv: This command uses Python’s built-in venv module to create a virtual environment.
• venv: This is the name of the folder that will contain your virtual environment files.

3. Activate the Virtual Environment

Now, activate your virtual environment. The command depends on your operating system:

On macOS/Linux:

source venv/bin/activate

On Windows (Command Prompt):

venv\Scripts\activate.bat

On Windows (PowerShell):

venv\Scripts\Activate.ps1

You’ll know it’s active when you see (venv) at the beginning of your terminal prompt.

4. Install Django

With your virtual environment activated, install Django using pip:

pip install django Pillow

• pip install django: This installs the Django web framework.
• Pillow: This is a library Django uses to handle image uploads. We’ll need it because our portfolio projects will have images.

Creating Your Django Project

Now that Django is installed, let’s create our main project.

1. Start the Project

In your my_portfolio directory (where manage.py will live), run:

django-admin startproject portfolio_project .

• django-admin: This is Django’s command-line utility.
• startproject portfolio_project: This tells Django to create a new project named portfolio_project.
• . (the dot): This crucial dot tells Django to create the project files in the current directory, rather than creating another nested folder.

After running this, your my_portfolio directory should look something like this:

my_portfolio/
├── venv/
├── manage.py
└── portfolio_project/
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

• manage.py: A command-line utility that interacts with your Django project. You’ll use this a lot!
• portfolio_project/: This is the main configuration folder for your entire website.
  • settings.py: Contains all your project’s settings and configurations.
  • urls.py: Defines the “map” of your website, telling Django which functions to run when a specific URL is visited.

2. Run Initial Migrations

Django uses a database to store information. The migrate command sets up the initial database tables that Django needs to function (like user accounts, sessions, etc.).

python manage.py migrate

This will create a db.sqlite3 file in your my_portfolio directory. This is a simple, file-based database perfect for development.

3. Test Your Server

Let’s make sure everything is working by starting Django’s development server:

python manage.py runserver

You should see output similar to this:

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
August 24, 2023 - 14:30:00
Django version 4.2.4, using settings 'portfolio_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Open your web browser and go to http://127.0.0.1:8000/. You should see a “The install worked successfully! Congratulations!” page. This means your Django project is up and running!

You can stop the server at any time by pressing CTRL+C in your terminal.

Creating Your First Django App: projects

A Django project can contain multiple apps. Think of a project as the entire car, and apps as different components like the engine, the dashboard, or the wheels. Each app is a self-contained module that does one thing well. For our portfolio, we’ll create an app called projects to manage our portfolio items.

1. Start the App

Make sure you are in the my_portfolio directory (where manage.py is located) and your virtual environment is active. Then run:

python manage.py startapp projects

This creates a new projects directory inside your my_portfolio folder, with its own set of files:

my_portfolio/
├── venv/
├── manage.py
├── portfolio_project/
└── projects/
    ├── migrations/
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── models.py
    ├── tests.py
    └── views.py

2. Register the App

Django needs to know about your new app. Open portfolio_project/settings.py and find the INSTALLED_APPS list. Add 'projects' to it:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'projects', # Add your new app here
]

Defining Your Portfolio Content (Models)

Models are how Django interacts with your database. Each model is essentially a Python class that defines the structure of a table in your database. For our portfolio, we’ll create a Project model to store information about each of your portfolio items.

1. Create the Project Model

Open projects/models.py and add the following code:

from django.db import models

class Project(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    image = models.ImageField(upload_to='project_images/')
    project_url = models.URLField(blank=True, null=True)

    def __str__(self):
        return self.title

Let’s break down what we added:

• class Project(models.Model):: We define a class named Project that inherits from models.Model. This tells Django it’s a model.
• title = models.CharField(max_length=200): This creates a field for the project’s title. CharField is for short text, and max_length is required to specify its maximum length.
• description = models.TextField(): This creates a field for a longer block of text for the project’s description.
• image = models.ImageField(upload_to='project_images/'): This field is for uploading image files. upload_to specifies a subdirectory within our MEDIA_ROOT where uploaded images will be stored.
• project_url = models.URLField(blank=True, null=True): This field stores a URL for the project (e.g., a link to the live demo or GitHub repository). blank=True means the field isn’t mandatory in forms, and null=True means the database can store NULL values for this field if it’s empty.
• def __str__(self):: This special method defines how an object of this class will be represented as a string. It’s helpful for readability in the Django admin panel.

2. Configure Media Files

Since we’re uploading images, Django needs to know where to store them and how to access them. Open portfolio_project/settings.py and add these lines at the bottom:

import os # Add this line at the very top of the file if not already present


MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

• MEDIA_URL: This is the URL prefix that will be used to serve media files. For example, http://127.0.0.1:8000/media/project_images/my_project.jpg.
• MEDIA_ROOT: This is the absolute path to the directory where user-uploaded media files will be stored on your server. os.path.join(BASE_DIR, 'media') creates a media folder right inside your main project directory.

3. Create and Apply Migrations

Whenever you make changes to your models (models.py), you need to do two things:

1. Make migrations: Tell Django to create the necessary instructions to change your database schema based on your model changes.
2. Apply migrations: Execute those instructions to actually update your database.

Run these commands in your terminal:

python manage.py makemigrations projects
python manage.py migrate

• makemigrations projects: This tells Django to look at the projects app and create a new migration file (e.g., 0001_initial.py) inside projects/migrations/. This file describes how to create the Project table in your database.
• migrate: This command applies all pending migrations to your database, creating the Project table.

Making Your Data Accessible (Django Admin)

Django comes with a powerful, ready-to-use administrative interface. It’s fantastic for managing content (like your portfolio projects) without writing custom code.

1. Create a Superuser

To access the admin panel, you need an administrator account (a “superuser”).

python manage.py createsuperuser

Follow the prompts to create a username, email, and password. Make sure to remember them!

2. Register Your Model with the Admin

Open projects/admin.py and tell Django to make your Project model visible and editable in the admin interface:

from django.contrib import admin
from .models import Project

admin.site.register(Project)

3. Explore the Admin Panel

Start your development server again:

python manage.py runserver

Go to http://127.0.0.1:8000/admin/ in your browser. Log in with the superuser credentials you just created.

You should now see “Projects” listed under the “PROJECTS” section. Click on “Projects” and then “Add project” to add a few sample projects. Upload some images for them too!

Displaying Your Portfolio (Views and URLs)

Now that we have data in our database, we need a way to display it on our website. This involves views (Python functions that handle web requests) and URLs (the web addresses that trigger those views).

1. Create a View to List Projects

Open projects/views.py and add the following code:

from django.shortcuts import render
from .models import Project

def project_list(request):
    # Fetch all Project objects from the database
    projects = Project.objects.all()

    # Create a dictionary to pass data to the template
    context = {'projects': projects}

    # Render the 'project_list.html' template, passing the context
    return render(request, 'projects/project_list.html', context)

• from django.shortcuts import render: render is a shortcut function to load a template, fill it with data, and return an HttpResponse.
• from .models import Project: We import our Project model so we can interact with it.
• def project_list(request):: This is our view function. It takes a request object (which contains information about the user’s web request) as an argument.
• projects = Project.objects.all(): This is a powerful command! Project.objects is Django’s Object-Relational Mapper (ORM). It allows us to interact with our database using Python objects instead of writing raw SQL. all() fetches every Project record from the database.
• context = {'projects': projects}: We create a dictionary called context. The keys of this dictionary (here, 'projects') will be the variable names we can use in our template.
• return render(request, 'projects/project_list.html', context): This tells Django to load the HTML file located at projects/project_list.html, insert the projects data into it, and send the resulting HTML back to the user’s browser.

2. Map URLs to Your View

We need to tell Django which URL should trigger our project_list view. This is done in urls.py files.

First, create a new urls.py file inside your projects app directory: projects/urls.py.

from django.urls import path
from . import views # Import the views from the current app

urlpatterns = [
    path('', views.project_list, name='project_list'), # Map the root URL of this app to our view
]

• path('', views.project_list, name='project_list'): This line defines a URL pattern.
  • '': This means an empty string, which represents the root URL of this particular app.
  • views.project_list: This is the view function we want to call when this URL is accessed.
  • name='project_list': This gives a name to our URL pattern. It’s useful for referring to this URL dynamically in templates and other parts of our code, rather than hardcoding the URL itself.

Next, we need to include our projects app’s URLs in the main project’s urls.py file. Open portfolio_project/urls.py and modify it:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings # Import settings
from django.conf.urls.static import static # Import static function

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('projects.urls')), # Include URLs from our 'projects' app
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• from django.urls import path, include: We import include to pull in URL patterns from other urls.py files.
• path('', include('projects.urls')): This tells Django that any request to the root URL of our entire project (/) should be handled by the urls.py file inside our projects app.
• if settings.DEBUG: urlpatterns += static(...): This block is crucial for making our uploaded images (media files) accessible in development. static() is a helper function that tells Django where to find and serve files located in MEDIA_ROOT when requested via MEDIA_URL. Remember: This setup is only for development and should not be used in a production environment.

Making It Pretty (Templates)

Templates are essentially HTML files with special Django template tags and variables that allow you to display dynamic data from your views.

1. Create a Template Directory

Django looks for templates in a specific structure. Inside your projects app, create a templates folder, and inside that, another projects folder. This is a common convention to prevent template name conflicts between different apps.

my_portfolio/
├── ...
└── projects/
    ├── ...
    └── templates/
        └── projects/
            └── project_list.html

2. Create the project_list.html Template

Now, open projects/templates/projects/project_list.html and add this basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Portfolio</title>
    <style>
        /* A little inline CSS to make it look decent for now */
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; background-color: #f4f4f4; color: #333; }
        h1 { color: #0056b3; text-align: center; margin-bottom: 40px; }
        .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
        .project-card { background-color: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; }
        .project-card img { width: 100%; height: 200px; object-fit: cover; }
        .project-content { padding: 20px; }
        .project-content h2 { margin-top: 0; color: #007bff; }
        .project-content p { font-size: 0.9em; color: #555; }
        .project-content a { display: inline-block; background-color: #007bff; color: white; padding: 8px 15px; border-radius: 5px; text-decoration: none; margin-top: 10px; }
        .project-content a:hover { background-color: #0056b3; }
        .no-projects { text-align: center; color: #777; margin-top: 50px; }
    </style>
</head>
<body>
    <h1>My Awesome Portfolio</h1>

    <div class="portfolio-grid">
        <!-- Django template tag: {% for %} loop to iterate over projects -->
        {% for project in projects %}
            <div class="project-card">
                {% if project.image %}
                    <!-- Display project image if available -->
                    <img src="{{ project.image.url }}" alt="{{ project.title }}">
                {% endif %}
                <div class="project-content">
                    <h2>{{ project.title }}</h2>
                    <p>{{ project.description }}</p>
                    {% if project.project_url %}
                        <!-- Display project URL if available -->
                        <a href="{{ project.project_url }}" target="_blank">View Project</a>
                    {% endif %}
                </div>
            </div>
        {% empty %}
            <!-- This block runs if 'projects' list is empty -->
            <p class="no-projects">No projects added yet!</p>
        {% endfor %}
    </div>
</body>
</html>

Here’s what’s happening with the Django template language:

• {% for project in projects %}: This is a for loop that iterates over the projects list that we passed from our project_list view in the context dictionary. In each iteration, the current project object is assigned to the project variable.
• {{ project.title }}, {{ project.description }}, etc.: These are template variables. Django replaces them with the actual values from the project object (e.g., the title, description, or URL of the current project).
• {% if project.image %}: This is an if statement. It checks if project.image exists (i.e., if an image was uploaded for that project).
• {{ project.image.url }}: This specifically gets the URL of the uploaded image file.
• {% empty %}: This is a special part of the for loop that displays its content if the projects list is empty.
• The inline CSS (<style>...</style>) is just there to give your portfolio a basic, readable look without needing to set up static files for CSS yet.

Running Your Website

Now, let’s see your beautiful portfolio come to life!

Make sure your virtual environment is active and you are in the my_portfolio directory (where manage.py is).

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/. You should now see the “My Awesome Portfolio” page displaying the projects you added through the admin panel! If you don’t see any projects, go back to the admin (/admin/) and add some.

What’s Next?

Congratulations! You’ve successfully built a basic portfolio website using Django. This is just the beginning. Here are some ideas for what you can do next:

• Enhance Styling: Replace the inline CSS with proper static files (CSS, JavaScript) to make your site look much better. You might even explore CSS frameworks like Bootstrap or Tailwind CSS.
• Add a Contact Page: Create another app or view for a contact form so visitors can get in touch with you.
• Detail Pages: Create individual pages for each project with more detailed information.
• About Page: Add an “About Me” page to introduce yourself.
• Deployment: Learn how to deploy your Django website to a live server so others can see it on the internet. Services like Heroku, Vercel, or DigitalOcean are popular choices.
• Version Control: Learn Git and GitHub to track your code changes and collaborate with others.

Django is a vast and rewarding framework to learn. Keep experimenting, building, and exploring its capabilities!

Welcome, aspiring web developers! Building interactive web applications often means you need to know who your users are. Whether it’s for personalizing content, restricting access, or enabling user-specific actions, knowing “who’s who” is crucial. This is where authentication comes into play.

What is Authentication?

Imagine you’re entering a secure building. You need to show your ID to prove who you are. In the world of web applications, authentication is exactly that: it’s the process of verifying a user’s identity. Typically, this involves a username and password, but it can also include things like fingerprint scans or security codes.

Once a user is authenticated, the system knows who they are. The next step is authorization, which determines what that user is allowed to do. For example, an authenticated user might be allowed to view their profile, but only an administrator might be authorized to delete other users’ accounts.

Why Django’s Authentication System is a Game Changer

Django, a high-level Python web framework, comes with a powerful and comprehensive authentication system built right in. This is fantastic because:

• Saves time: You don’t have to build complex login, logout, and user management features from scratch.
• Security: It’s designed with security best practices in mind, helping protect your users’ data.
• Flexibility: While it’s great out-of-the-box, you can also customize it to fit your specific needs.

This guide will walk you through the essentials of using Django’s authentication system, making it easy to understand even if you’re just starting out.

Getting Started: Setting Up Django Authentication

Django’s authentication system lives within a built-in application called django.contrib.auth. To use it, you just need to make sure it’s included in your project.

1. Check Your INSTALLED_APPS

Open your project’s settings.py file. You should find django.contrib.auth and django.contrib.contenttypes already listed under INSTALLED_APPS. If not, add them:

INSTALLED_APPS = [
    # ... other apps
    'django.contrib.admin',
    'django.contrib.auth',          # This handles authentication
    'django.contrib.contenttypes',  # This helps track models in your project
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # ... your own apps
]

• django.contrib.auth: This is the core authentication application. It provides user models, authentication views, and more.
• django.contrib.contenttypes: This application helps Django track all the models (your data structures) in your project, which is essential for the authentication system to manage permissions correctly.

2. Run Database Migrations

Django needs to set up some tables in your database to store user information, permissions, and sessions. You do this by running migrations.

Open your terminal or command prompt, navigate to your project’s root directory (where manage.py is located), and run:

python manage.py migrate

• Migrations: Think of migrations as instructions for your database. When you run migrate, Django looks at all the changes required by your apps (including auth) and applies them to your database, creating necessary tables.

You’ll see a lot of output as Django creates tables for auth, contenttypes, and other built-in apps.

3. Create a Superuser

A superuser is essentially an administrator account. It has all permissions and can manage other users through Django’s admin interface. It’s a great way to test your authentication setup.

python manage.py createsuperuser

You’ll be prompted to enter a username, email address, and password. Remember these credentials!

Now, you can access the Django admin panel at http://127.0.0.1:8000/admin/ (if your server is running) and log in with your superuser credentials. You’ll see “Users” and “Groups” sections, allowing you to manage user accounts.

Understanding Django’s User Model

At the heart of the authentication system is the User model. Django provides a robust default User model, but it also gives you options to customize it if needed.

The Default User Model

The default User model is built to handle common user information like:

• username
• password (hashed for security)
• email
• first_name
• last_name
• is_active (can the user log in?)
• is_staff (can the user access the admin site?)
• is_superuser (does the user have all permissions?)
• date_joined
• last_login

For many projects, this default model is perfectly sufficient.

When to Use a Custom User Model

Sometimes, you might need extra fields for your users, like a phone_number, profile_picture, or date_of_birth. If you anticipate needing custom fields before you run your first migrations, it’s a good idea to create a custom user model from the start.

Django offers two base classes for custom user models:

• AbstractUser: This is the recommended choice for most cases. It provides all the fields and functionality of the default User model, allowing you to easily add your own fields.
• AbstractBaseUser: This is for highly customized scenarios where you want to build the user model almost entirely from scratch, defining even basic fields like username and email. This requires more work and is less common for beginners.

For simplicity, let’s assume the default User model is fine for now. If you need a custom model, the process involves defining a new model that inherits from AbstractUser and telling Django to use it in your settings.py.

Built-in Authentication Views and URLs

Django conveniently provides a set of pre-built views for common authentication tasks, such as logging in, logging out, changing passwords, and resetting passwords. You just need to connect them to URLs in your project.

Connecting Authentication Views to URLs

In your project’s urls.py file (the one in your main project folder, e.g., myproject/urls.py), you can include Django’s authentication URLs.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('django.contrib.auth.urls')), # This line adds authentication URLs
    # ... your other app URLs
]

• path('accounts/', include('django.contrib.auth.urls')): This line tells Django to “include” all the URL patterns defined by django.contrib.auth.urls under the base path /accounts/.

Once you add this, you’ll automatically have URLs like:

• /accounts/login/
• /accounts/logout/
• /accounts/password_change/
• /accounts/password_change/done/
• /accounts/password_reset/
• /accounts/password_reset/done/
• /accounts/reset/<uidb64>/<token>/
• /accounts/reset/done/

Providing Templates for Authentication Views

While Django provides the logic for these views, it doesn’t automatically provide the HTML templates for them. You’ll need to create these templates yourself.

Django’s authentication views look for templates in specific locations by default. For example, the LoginView looks for a template named registration/login.html.

You should create a templates directory in your project’s root, and then inside that, a registration directory.

myproject/
├── myproject/
│   ├── settings.py
│   └── urls.py
├── myapp/
├── templates/                 # <-- New directory
│   └── registration/          # <-- New directory
│       ├── login.html         # <-- Create this file
│       └── logged_out.html    # <-- Create this file (for logout success)
│       └── password_change_form.html
│       └── password_change_done.html
│       └── password_reset_form.html
│       └── password_reset_done.html
│       └── password_reset_confirm.html
│       └── password_reset_complete.html
└── manage.py

Make sure your settings.py knows where to find your templates:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # Add this line
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Let’s create a very basic login.html for demonstration:

<!-- myproject/templates/registration/login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <h2>Login</h2>
    <form method="post">
        {% csrf_token %} {# A security token to protect against cross-site request forgery #}
        {{ form.as_p }} {# Renders form fields as paragraphs #}
        <button type="submit">Login</button>
    </form>
    <p>Don't have an account? <a href="/accounts/signup/">Sign Up</a> (You'd need to implement signup yourself)</p>
    <p><a href="/accounts/password_reset/">Forgot password?</a></p>
</body>
</html>

And a logged_out.html (for when a user successfully logs out):

<!-- myproject/templates/registration/logged_out.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logged Out</title>
</head>
<body>
    <h2>You have been logged out.</h2>
    <p><a href="/accounts/login/">Login again</a></p>
</body>
</html>

Protecting Views with Decorators

Once users can log in, you’ll want to restrict access to certain pages. Django makes this incredibly easy using decorators. A decorator is a special kind of function in Python that can add extra functionality to another function or a class method.

@login_required

This is the most common decorator. It ensures that a user must be logged in to access a particular view. If an unauthenticated user tries to access a view protected by @login_required, they will be redirected to the login page.

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

def welcome_view(request):
    return render(request, 'myapp/welcome.html')

@login_required
def protected_view(request):
    # This view can only be accessed by logged-in users
    return render(request, 'myapp/protected.html')

You can configure where unauthenticated users are redirected by setting LOGIN_URL in settings.py:

LOGIN_URL = '/accounts/login/' # Or '/login/' if you set up your URLs differently

Other Useful Decorators

• @permission_required('myapp.can_do_something'): Requires the user to have a specific permission (e.g., myapp.add_book).
• @staff_member_required: Requires the user to have is_staff = True (meaning they can access the admin site).
• @superuser_required: Requires the user to have is_superuser = True.

Authentication in Templates

You’ll often want to display different content in your templates based on whether a user is logged in or not, or to show their username. Django provides a special request.user object in your templates that makes this simple.

Checking Login Status

<!-- myapp/base.html (or any template) -->

<nav>
    {% if user.is_authenticated %} {# Checks if the current user is logged in #}
        Hello, {{ user.username }}!
        <a href="{% url 'logout' %}">Logout</a> {# Links to the logout URL configured in urls.py #}
    {% else %}
        <a href="{% url 'login' %}">Login</a>
        <a href="/accounts/signup/">Sign Up</a> {# You would need to create a signup view #}
    {% endif %}
</nav>

• user.is_authenticated: This is a boolean (True/False) value that tells you if the current user is logged in.
• user.username: If the user is authenticated, you can access their username and other attributes of the User model.
• {% url 'login' %} and {% url 'logout' %}: These are Django template tags that dynamically generate URLs based on the names given in your urls.py. By default, django.contrib.auth.urls names its login view login and logout view logout.

A Simple Example Walkthrough

Let’s put it all together with a minimal app.

1. Create a new app (if you haven’t already):
   bash
python manage.py startapp myapp

2. Add myapp to INSTALLED_APPS in settings.py.

3. Create myapp/urls.py:
   “`python
   # myapp/urls.py

   from django.urls import path
   from . import views

   urlpatterns = [
   path(”, views.home, name=’home’),
   path(‘secret/’, views.secret_page, name=’secret_page’),
   ]
   “`

4. Include myapp.urls in your project’s urls.py:
   “`python
   # myproject/urls.py

   from django.contrib import admin
   from django.urls import path, include

   urlpatterns = [
   path(‘admin/’, admin.site.urls),
   path(‘accounts/’, include(‘django.contrib.auth.urls’)),
   path(”, include(‘myapp.urls’)), # Include your app’s URLs
   ]
   “`

5. Create myapp/views.py:
   “`python
   # myapp/views.py

   from django.shortcuts import render
   from django.contrib.auth.decorators import login_required

   def home(request):
   return render(request, ‘myapp/home.html’)

   @login_required
   def secret_page(request):
   return render(request, ‘myapp/secret_page.html’)
   “`

6. Create templates inside myproject/templates/myapp/:

   • myproject/templates/myapp/home.html:
     html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>Welcome to Our Site!</h1>
<nav>
{% if user.is_authenticated %}
<p>Hello, {{ user.username }}!</p>
<p><a href="{% url 'secret_page' %}">Go to Secret Page</a></p>
<p><a href="{% url 'logout' %}">Logout</a></p>
{% else %}
<p>You are not logged in.</p>
<p><a href="{% url 'login' %}">Login Here</a></p>
<p>No account? Sign up (implement yourself)!</p>
{% endif %}
</nav>
</body>
</html>
   • myproject/templates/myapp/secret_page.html:
     html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Page</title>
</head>
<body>
<h1>This is a Secret Page! Shhh!</h1>
<p>Only logged-in users can see this.</p>
<p><a href="{% url 'home' %}">Go Home</a></p>
<p><a href="{% url 'logout' %}">Logout</a></p>
</body>
</html>

Now, run your development server: python manage.py runserver.

• Navigate to http://127.0.0.1:8000/. You’ll see the home page.
• Try to go to http://127.0.0.1:8000/secret/. You’ll be redirected to the login page (/accounts/login/).
• Log in with your superuser credentials.
• You’ll be redirected to the /accounts/profile/ by default after login. To change this, set LOGIN_REDIRECT_URL in settings.py:
  python
# myproject/settings.py
LOGIN_REDIRECT_URL = '/' # Redirect to home page after login
• After logging in (and setting LOGIN_REDIRECT_URL = '/'), you should now be able to access http://127.0.0.1:8000/secret/.
• Click “Logout” to log out and observe the logged_out.html template.

Conclusion

Django’s built-in authentication system is a powerful and secure tool that significantly simplifies adding user management to your web applications. By understanding its core components—the User model, built-in views, URL configuration, and decorators—you can quickly implement robust authentication.

This guide covered the fundamental steps: setting up the auth app, running migrations, creating a superuser, integrating authentication URLs and templates, and protecting views. With this knowledge, you’re well-equipped to start building secure and user-friendly Django applications!

Welcome, aspiring web developers! Have you ever wanted to build your own website or web application but felt overwhelmed by all the complex terms and tools? You’re in luck! Today, we’re going to dive into Django, a powerful yet beginner-friendly web framework, to create a simple recipe application. By the end of this guide, you’ll have a basic web app up and running, and a solid foundation for your Django journey.

What is Django?

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Created by experienced developers, 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. It’s often referred to as a “batteries-included” framework because it comes with many built-in features, like an admin panel, an Object-Relational Mapper (ORM), and a templating system.

• Web Framework: A collection of modules, libraries, and tools that provide a structure for building web applications. Think of it as a toolkit that helps you build a house (your app) faster and more efficiently.
• Python: A popular, easy-to-read programming language that Django is built with.
• Object-Relational Mapper (ORM): A system that lets you interact with your database using Python code instead of writing raw SQL queries. This makes working with databases much simpler.
• Templating System: A way to generate dynamic HTML content by mixing static HTML with Python variables and logic.

Our goal is to build a basic recipe app where you can list recipes, view their ingredients, and see their instructions. Simple, right? Let’s get started!

Prerequisites

Before we begin, please make sure you have the following installed:

• Python 3: Django runs on Python. You can download it from the official Python website (python.org).
• Basic understanding of the command line/terminal: We’ll be using commands to set up our project.

1. Setting Up Your Environment

It’s good practice to work within a virtual environment. This isolates your project’s dependencies from other Python projects you might have, preventing conflicts.

Create a Virtual Environment

Open your terminal or command prompt and navigate to where you want to store your project.

mkdir recipe_app
cd recipe_app
python -m venv venv

• mkdir recipe_app: Creates a new folder named recipe_app.
• cd recipe_app: Changes your current directory into this new folder.
• python -m venv venv: Creates a virtual environment named venv inside your project folder.

Activate Your Virtual Environment

You’ll need to activate the virtual environment every time you start working on your project.

On macOS/Linux:

source venv/bin/activate

On Windows:

venv\Scripts\activate

You’ll notice (venv) appearing at the beginning of your command prompt, indicating that the virtual environment is active.

Install Django

Now that your virtual environment is active, install Django:

pip install django

• pip: Python’s package installer. It’s like an app store for Python libraries.
• install django: Tells pip to download and install the Django framework.

2. Creating Your First Django Project

A Django “project” is the entire web application, consisting of one or more “apps.”

django-admin startproject recipe_project .

• django-admin: The command-line utility for Django.
• startproject recipe_project: Creates a new Django project named recipe_project.
• .: This tells Django to create the project files in the current directory, avoiding an extra nested folder.

Your folder structure should now look something like this:

recipe_app/
├── venv/
└── recipe_project/
    ├── manage.py
    └── recipe_project/
        ├── __init__.py
        ├── asgi.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py

• manage.py: A command-line utility that lets you interact with your Django project (e.g., run the server, create apps).
• recipe_project/settings.py: Contains your project’s configuration (database settings, installed apps, etc.).
• recipe_project/urls.py: Defines URL patterns for your entire project.

Run the Development Server

Let’s see if everything is working!

python manage.py runserver

You should see output similar to this:

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
November 17, 2023 - 14:30:00
Django version 4.2.7, using settings 'recipe_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Open your web browser and go to http://127.0.0.1:8000/. You should see a “The install worked successfully! Congratulations!” page. Press CTRL+C in your terminal to stop the server.

The message about “unapplied migrations” is normal. We’ll address that soon.

3. Creating a Django App

In Django, an “app” is a self-contained module that does one thing. Your project can have multiple apps (e.g., a “users” app, a “recipes” app, a “comments” app). Let’s create our recipes app.

python manage.py startapp recipes

Your folder structure now includes the recipes app:

recipe_app/
├── venv/
└── recipe_project/
    ├── manage.py
    ├── recipe_project/
    └── recipes/
        ├── migrations/
        ├── __init__.py
        ├── admin.py
        ├── apps.py
        ├── models.py
        ├── tests.py
        └── views.py

Register Your App

Django needs to know about the new recipes app. Open recipe_project/settings.py and add 'recipes' to the INSTALLED_APPS list.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'recipes', # Add your new app here
]

4. Defining Your Recipe Model

Models are how Django interacts with your database. Each model is a Python class that represents a table in your database, and each attribute of the class represents a column in that table.

Open recipes/models.py and define your Recipe model:

from django.db import models

class Recipe(models.Model):
    title = models.CharField(max_length=200)
    ingredients = models.TextField()
    instructions = models.TextField()
    cooking_time = models.IntegerField(help_text="in minutes", default=0)

    def __str__(self):
        return self.title

• models.Model: All Django models inherit from this base class.
• title = models.CharField(max_length=200): A field for the recipe’s title, limited to 200 characters.
• ingredients = models.TextField(): A field for longer text, like a list of ingredients.
• instructions = models.TextField(): Another text field for the cooking instructions.
• cooking_time = models.IntegerField(...): A field for whole numbers, representing cooking time. help_text provides a hint in the admin interface, and default sets a default value.
• def __str__(self):: This special method defines what to show when Django needs a string representation of a Recipe object (e.g., in the admin panel).

Make and Apply Migrations

Now that you’ve defined your model, you need to tell Django to create the corresponding table in your database.

python manage.py makemigrations recipes

This command tells Django to detect changes in your models (we just created Recipe) and create migration files. These files are like a set of instructions for modifying your database schema.

Next, apply these migrations:

python manage.py migrate

This command executes all pending migrations, including Django’s built-in ones (remember the “unapplied migrations” message?) and your new Recipe model. Django uses a default SQLite database, which is perfect for development.

5. The Django Admin Interface

Django comes with a built-in administrative interface that lets you manage your site’s content. It’s incredibly powerful and saves a lot of development time.

Create a Superuser

To access the admin interface, you need an administrator account.

python manage.py createsuperuser

Follow the prompts to create a username, email (optional), and password.

Register Your Model

Open recipes/admin.py and register your Recipe model so it appears in the admin interface:

from django.contrib import admin
from .models import Recipe

admin.site.register(Recipe)

Access the Admin Panel

Start your development server again:

python manage.py runserver

Go to http://127.0.0.1:8000/admin/ in your browser. Log in with the superuser credentials you just created.

You should now see “Recipes” under “Recipes” (the name of your app). Click on “Recipes” and then “Add recipe” to create your first recipe! Fill in the details and click “Save.”

Congratulations, you’ve just added data to your database through a custom Django model and the admin panel!

6. Creating Views and URLs

Now that we have data, let’s display it to users. This involves views and URLs.

• Views: Python functions or classes that receive web requests and return web responses (like an HTML page).
• URLs: Web addresses that users type into their browser. Django uses a urls.py file to map URLs to specific views.

Define a View

Open recipes/views.py and create a simple view to list all recipes:

from django.shortcuts import render
from .models import Recipe

def recipe_list(request):
    recipes = Recipe.objects.all() # Get all Recipe objects from the database
    context = {'recipes': recipes} # Package them into a dictionary
    return render(request, 'recipes/recipe_list.html', context)

• from django.shortcuts import render: A helper function to load a template and pass it a context.
• recipes = Recipe.objects.all(): This uses Django’s ORM to fetch all Recipe objects from the database.
• context = {'recipes': recipes}: A dictionary that holds the data we want to send to our template.
• return render(...): Renders the recipes/recipe_list.html template, passing the context data to it.

Define URLs for Your App

First, create a urls.py file inside your recipes app folder:

touch recipes/urls.py

Then, open recipes/urls.py and add the following:

from django.urls import path
from . import views

app_name = 'recipes' # This helps Django distinguish URLs if you have multiple apps

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

• from django.urls import path: Imports the path function to define URL patterns.
• path('', views.recipe_list, name='recipe_list'): Maps the root URL of this app (the empty string '') to our recipe_list view. name='recipe_list' provides a convenient way to refer to this URL in templates and other parts of Django.

Include App URLs in the Project URLs

Finally, we need to tell the main recipe_project/urls.py file to include the URLs from our recipes app.

Open recipe_project/urls.py:

from django.contrib import admin
from django.urls import path, include # Import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('recipes/', include('recipes.urls')), # Include your app's URLs
]

• path('recipes/', include('recipes.urls')): This means any URL starting with recipes/ will be handled by the urls.py file within our recipes app. So, http://127.0.0.1:8000/recipes/ will map to the recipe_list view.

7. Creating Basic Templates

Templates are HTML files with special Django syntax that allow you to display dynamic data from your views.

Create a Templates Folder

Inside your recipes app, create a templates folder, and inside that, another recipes folder. This is a common convention to prevent template name collisions if you have multiple apps.

recipes/
└── templates/
    └── recipes/
        └── recipe_list.html

Create Your Template File

Open recipes/templates/recipes/recipe_list.html and add the following HTML:

<!-- recipes/templates/recipes/recipe_list.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Our Recipes</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        h1 { color: #333; }
        .recipe-card { border: 1px solid #eee; padding: 15px; margin-bottom: 10px; border-radius: 5px; }
        .recipe-card h2 { margin-top: 0; color: #007bff; }
        ul { list-style-type: none; padding: 0; }
        li { margin-bottom: 5px; }
    </style>
</head>
<body>
    <h1>Our Delicious Recipes</h1>

    {% if recipes %}
        {% for recipe in recipes %}
            <div class="recipe-card">
                <h2>{{ recipe.title }}</h2>
                <p><strong>Cooking Time:</strong> {{ recipe.cooking_time }} minutes</p>
                <h3>Ingredients:</h3>
                <ul>
                    {% for ingredient in recipe.ingredients.splitlines %}
                        <li>{{ ingredient }}</li>
                    {% endfor %}
                </ul>
                <h3>Instructions:</h3>
                <p>{{ recipe.instructions }}</p>
            </div>
        {% endfor %}
    {% else %}
        <p>No recipes found yet. Time to add some!</p>
    {% endif %}

</body>
</html>

• {% if recipes %} / {% else %} / {% endif %}: Django template tags for conditional logic.
• {% for recipe in recipes %} / {% endfor %}: Loops through the recipes list passed from the view.
• {{ recipe.title }}: Double curly braces {{ }} are used to display the value of a variable.
• {{ recipe.ingredients.splitlines }}: We’re assuming ingredients might be entered as new lines in the admin, so we use splitlines to turn them into a list for easier display.
• A little inline CSS is added for basic styling, keeping it simple for now!

View Your Recipes!

Make sure your development server is running (python manage.py runserver).

Now, open your browser and go to http://127.0.0.1:8000/recipes/.

You should see a list of all the recipes you added through the Django admin!

Conclusion

Congratulations! You’ve successfully built a simple recipe application using Django. You’ve learned how to:

• Set up a Django project and app.
• Define database models.
• Use Django’s powerful admin interface.
• Create views to fetch data.
• Map URLs to your views.
• Display dynamic data using Django templates.

This is just the beginning! From here, you can expand your app by:

• Adding more fields to your Recipe model (e.g., an image, a category).
• Creating a detail page for each recipe.
• Adding user authentication so users can submit their own recipes.
• Styling your app with a proper CSS framework like Bootstrap.
• Building forms for adding/editing recipes directly from the frontend.

Keep exploring, keep building, and don’t be afraid to experiment. Happy coding!