Hello there, aspiring web developers and creative minds! Are you looking for a fantastic way to showcase your projects, skills, and unique style to the world? A personal portfolio website is your answer! It’s an essential tool for anyone in tech, design, or any creative field to present their work professionally.

In this guide, we’re going to embark on an exciting journey to build a simple portfolio website using Django. Don’t worry if you’re new to web development or Django; we’ll break down every step into easy-to-understand pieces.

Why a Portfolio Website?

Think of a portfolio website as your digital resume and gallery rolled into one. It allows potential employers, clients, or collaborators to see your actual work, understand your capabilities, and get a feel for your style. It’s a powerful way to stand out from the crowd!

Why Django?

You might be wondering, “Why Django?” Good question!

• Django: Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It’s built by experienced developers, takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel.
• Python: Django is written in Python, a very popular, easy-to-learn, and powerful programming language. If you’re familiar with Python, you’ll feel right at home.
• “Batteries Included”: Django comes with many features built-in, like an admin panel (a ready-to-use interface to manage your website’s content), an ORM (Object-Relational Mapper, which helps you interact with databases using Python code instead of raw SQL), and much more. This means less setup for you!
• MVT Architecture: Django follows the Model-View-Template (MVT) architectural pattern, which helps organize your code logically.
  • Model: This is where you define the structure of your data (like your project titles, descriptions, images).
  • View: This handles the logic – what data to fetch from the Model and how to process it.
  • Template: This is where you define how your data is displayed to the user (usually HTML, CSS, and some Django template language).

Ready to dive in? Let’s get started!

Prerequisites

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

• Python 3: Django is a Python framework, so you’ll need Python installed on your computer. You can download it from the official Python website (python.org).
• Basic Command Line Knowledge: We’ll be using your computer’s terminal or command prompt to run commands. Don’t worry, we’ll guide you through each one!

Step 1: Setting Up Your Environment

A crucial first step in any Python project is setting up a virtual environment.

• Virtual Environment: Think of a virtual environment as an isolated box or a clean workspace for your project. It keeps your project’s dependencies (like Django) separate from other Python projects you might have on your computer. This prevents conflicts and keeps your project tidy.

Let’s create and activate one:

1. Create a project directory:
   bash
mkdir my_portfolio
cd my_portfolio

   • mkdir: This command creates a new directory (folder).
   • cd: This command changes your current directory.

2. Create a virtual environment:
   bash
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 we’re giving to our virtual environment folder. You can name it anything you like, but venv is a common convention.

3. Activate the virtual environment:

   • On macOS/Linux:
     bash
source venv/bin/activate
   • On Windows (Command Prompt):
     bash
venv\Scripts\activate.bat
   • On Windows (PowerShell):
     bash
venv\Scripts\Activate.ps1
     You’ll know it’s active when you see (venv) at the beginning of your command line prompt.

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

   • pip: This is Python’s package installer, used to install libraries.
   • Django: Our web framework.
   • Pillow: This is a Python imaging library that Django often uses for handling image uploads. We’ll need it if we want to add images to our projects.

Step 2: Starting a New Django Project

With Django installed, we can now create our main project.

1. Start the Django project:
   bash
django-admin startproject portfolio_project .

   • django-admin: This is Django’s command-line utility.
   • startproject: This command creates the basic structure for a Django project.
   • portfolio_project: This is the name of our main project.
   • .: The dot tells Django to create the project in the current directory (my_portfolio) rather than creating another nested folder.

   After running this, your my_portfolio directory will look something like this:
   my_portfolio/
├── venv/
├── portfolio_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 (running the server, managing the database, etc.).
   * portfolio_project/settings.py: This file holds all your project’s configuration.
   * portfolio_project/urls.py: This file defines how URLs map to your website’s content.

Step 3: Creating an App for Your Portfolio

In Django, projects are often composed of several “apps.” 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 portfolio app). This modular design makes your code organized and reusable.

1. Create the portfolio app:
   bash
python manage.py startapp projects

   • python manage.py: We use manage.py to run Django-specific commands.
   • startapp: This command creates the basic structure for a Django app.
   • projects: This is the name of our app. We’ll use it to manage our portfolio projects.

   Now your my_portfolio directory will look like this:
   my_portfolio/
├── venv/
├── portfolio_project/
│ └── ...
├── projects/
│ ├── migrations/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
└── manage.py

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

   “`python

   portfolio_project/settings.py

   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!
   ]
   “`

Step 4: Defining Your Portfolio Data (Models)

Now, let’s define what information each of your portfolio projects will have. This is done using Django models.

• Models: In Django, models are Python classes that define the structure of your database. Each class represents a table in the database, and each attribute in the class represents a column in that table. Django’s ORM (Object-Relational Mapper) helps you interact with your database using Python objects instead of writing raw SQL queries.

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

from django.db import models

class Project(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    technology = models.CharField(max_length=20)
    image = models.ImageField(upload_to='images/') # Requires Pillow to be installed
    link = models.URLField(max_length=200, blank=True) # Optional link

    def __str__(self):
        return self.title

• models.CharField: A field for short text strings (like titles or technologies). max_length is required.
• models.TextField: A field for longer text (like descriptions).
• models.ImageField: A field for uploading image files. upload_to='images/' tells Django to store uploaded images in a subdirectory named images inside your MEDIA_ROOT.
• models.URLField: A field for storing URLs. blank=True means this field is optional.
• __str__(self): This special method tells Django how to represent a Project object as a string. It’s useful for the admin panel.

After defining your model, you need to tell Django to create the corresponding database tables.

1. Make migrations:
   bash
python manage.py makemigrations
   This command creates migration files, which are instructions for Django on how to change your database schema to match your models.

2. Apply migrations:
   bash
python manage.py migrate
   This command executes those instructions, creating the actual tables in your database. Django uses a default SQLite database, which is perfect for development.

Step 5: Making It Visible in the Admin Panel

Django comes with a powerful, ready-to-use admin panel. Let’s make our Project model accessible there so we can easily add and manage our portfolio items.

1. Create a superuser: This will be your login for the admin panel.
   bash
python manage.py createsuperuser
   Follow the prompts to create a username, email (optional), and password.

2. Register your model: Open projects/admin.py and add the following:

   “`python

   projects/admin.py

   from django.contrib import admin
   from .models import Project

   admin.site.register(Project)
   “`

Now, let’s start the development server to see our admin panel.

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 “Projects” listed under your PROJECTS app. Click on “Projects” to add new portfolio items! Add a few sample projects.

Step 6: Displaying Your Projects (Views and Templates)

Now that we have data in our database, let’s display it on a webpage. This involves creating a view to fetch the data and a template to render it.

• Views: In Django, a view is a Python function (or class) that takes a web request and returns a web response. It’s where your application’s logic resides, deciding what data to show and how to process user input.

• Templates: Templates are special HTML files that Django uses to display dynamic information. They combine static HTML with Django’s template language to inject data from your views.

• Create a view: Open projects/views.py and add a simple view to fetch all projects:

  “`python

  projects/views.py

  from django.shortcuts import render
  from .models import Project

  def all_projects(request):
  projects = Project.objects.all() # Fetch all Project objects from the database
  return render(request, ‘projects/all_projects.html’, {‘projects’: projects})
  ``
*render(request, template_name, context): This function takes therequest, the path to your template, and a dictionary (context`) of data you want to pass to the template.

• Create a templates directory: Inside your projects app folder, create a new folder named templates, and inside that, another folder named projects. This naming convention (app_name/template_name.html) helps keep your templates organized and prevents naming conflicts.

  projects/
├── templates/
│ └── projects/
│ └── all_projects.html
└── ...

• Create your HTML template: Open projects/templates/projects/all_projects.html and add some basic HTML to display your projects:

  “`html
  <!DOCTYPE html>
  
  
  
  
  

  
  

  My Awesome Portfolio

  {% for project in projects %}
      <div class="project-card">
          {% if project.image %}
              <img src="{{ project.image.url }}" alt="{{ project.title }} image">
          {% endif %}
          <h2>{{ project.title }}</h2>
          <p><strong>Technology:</strong> {{ project.technology }}</p>
          <p>{{ project.description }}</p>
          {% if project.link %}
              <a href="{{ project.link }}" target="_blank">View Project</a>
          {% endif %}
      </div>
  {% empty %}
      <p>No projects to display yet. Go to the admin panel to add some!</p>
  {% endfor %}
  

  
  
  ``
*{% for project in projects %}: This is a Django template tag that loops through eachprojectin theprojectslist (which we passed from our view).
*{{ project.title }}: This is a Django template variable that displays thetitleattribute of the currentprojectobject.
*{% if project.image %}: This checks if an image exists for the project.
*{{ project.image.url }}: This provides the URL to the uploaded image.
*{% empty %}: This block runs if theprojects` list is empty.

• Configure Media Root (for images): For Django to serve uploaded files (like images), you need to tell it where to store them and how to serve them during development.
  Open portfolio_project/settings.py and add these lines at the very bottom:

  “`python

  portfolio_project/settings.py

  import os

  … (other settings) …

  MEDIA_URL = ‘/media/’
  MEDIA_ROOT = os.path.join(BASE_DIR, ‘media’)
  ``
*MEDIA_URL: The URL prefix that will be used to serve media files (e.g.,/media/my_image.jpg).
*MEDIA_ROOT: The absolute path to the directory where uploaded files will be stored on your server.BASE_DIR` is a variable that points to your main project directory.

Step 7: Connecting URLs

Finally, we need to connect our view to a URL so that when someone visits a specific address in their browser, our view is executed and the template is displayed.

1. Create urls.py in your app: Inside the projects directory, create a new file named urls.py:

   “`python

   projects/urls.py

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

   urlpatterns = [
   path(”, views.all_projects, name=’all_projects’), # Map the root URL of this app to our view
   ]
   ``
*path(”, …): An empty string means this URL configuration handles the root of whatever path it's included under.
*views.all_projects: This tells Django to call theall_projectsfunction fromprojects/views.py.
*name=’all_projects’`: Gives a name to this URL pattern, which is useful for referring to it in templates or other parts of your code.

2. Include app URLs in the project’s urls.py: Now, we need to link our app’s urls.py into the main project’s urls.py. Open portfolio_project/urls.py:

   “`python

   portfolio_project/urls.py

   from django.contrib import admin
   from django.urls import path, include # Add include
   from django.conf import settings # Needed for media files
   from django.conf.urls.static import static # Needed for media files

   urlpatterns = [
   path(‘admin/’, admin.site.urls),
   path(”, include(‘projects.urls’)), # Include your projects app’s URLs here
   ]

   This is only for development! In production, web servers like Nginx handle media files.

   if settings.DEBUG:
   urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
   ``
*path(”, include(‘projects.urls’)): This tells Django that any request to the root URL of your website (http://127.0.0.1:8000/) should be directed to theurls.pyfile within yourprojectsapp.
* Thestatic` configuration is crucial for serving media files (like your project images) during development. Remember, this setup is only for development! For a live production website, you’d configure a web server like Nginx or Apache to serve your static and media files.

Step 8: Running Your Development Server

If you stopped your development server earlier, start it again:

python manage.py runserver

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

Voilà! You should now see your “My Awesome Portfolio” page with the projects you added through the admin panel, complete with titles, descriptions, technologies, and images!

Conclusion

Congratulations! You’ve successfully built a basic portfolio website using Django. You’ve learned how to:

• Set up a Django project and app.
• Define data models for your projects.
• Use the Django admin panel to manage content.
• Create views to fetch data.
• Design templates to display information.
• Connect URLs to bring it all together.

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

• Adding CSS and JavaScript: To make your site visually stunning and interactive.
• Creating a detail page: For each project, showing more information.
• Implementing more features: Like an “About Me” page, a contact form, or blog posts.
• Deployment: Learning how to put your website online for the world to see!

Keep experimenting, keep learning, and happy coding!

Hey there, aspiring web developers and entrepreneurs! Have you ever dreamt of having your own online store, selling products to the world? It might sound complicated, but with the right tools, it’s more accessible than you think. Today, we’re going to dive into building a simple e-commerce site using Django, a powerful and popular web framework.

This guide is designed for absolute beginners. We’ll break down each step, explain technical terms, and get you started on your journey to creating a functional online shop.

What is an E-commerce Site?

An e-commerce site is essentially an online store where people can browse products, add them to a virtual shopping cart, and complete purchases using electronic payment methods. Think of popular sites like Amazon or Etsy – those are prime examples! For our simple site, we’ll focus on displaying products, which is the foundational first step.

Why Django for E-commerce?

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It’s often referred to as “batteries included” because it comes with many built-in features that are common in web applications, such as an object-relational mapper (ORM), an admin panel, and a templating engine.

• Web Framework: A set of tools and components that helps you build web applications faster and more efficiently. Instead of writing everything from scratch, a framework provides a structure and common functionalities.
• Python: A widely used, general-purpose programming language known for its readability and simplicity.
• Object-Relational Mapper (ORM): A technique that lets you interact with your database using Python code instead of writing raw SQL queries. This makes database operations much easier.
• Admin Panel: A ready-to-use interface that allows you to manage your site’s content (like adding or editing products) without writing any front-end code. This is a huge time-saver!

Django’s robust nature, security features, and a large, helpful community make it an excellent choice for everything from small projects to large-scale applications, including e-commerce platforms.

Setting Up Your Development Environment

Before we write any Django code, we need to set up our computer to work with Python and Django.

1. Install Python

Django is built with Python, so you’ll need Python installed on your system.
* Visit the official Python website (python.org) and download the latest stable version for your operating system.
* Follow the installation instructions. Make sure to check the box that says “Add Python X.X to PATH” during installation on Windows, as this makes it easier to use Python from your command line.

2. Create a Virtual Environment

A virtual environment is a isolated space for your Python projects. It allows you to manage dependencies (libraries and packages) for each project separately, preventing conflicts.

Open your command line or terminal and navigate to where you want to store your project. Then, run these commands:

mkdir my_ecommerce_site
cd my_ecommerce_site

python -m venv venv

.\venv\Scripts\activate
source venv/bin/activate

You’ll know it’s activated when you see (venv) at the beginning of your command line prompt.

3. Install Django

With your virtual environment activated, install Django using pip, Python’s package installer.

pip install Django

• pip: Python’s package installer, used to install and manage software packages written in Python.

Starting Your Django Project

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

django-admin startproject store_project .

• django-admin: This is Django’s command-line utility for administrative tasks.
• startproject: A command to create a new Django project.
• store_project: This is the name we’re giving to our main project.
• .: This tells Django to create the project in the current directory, avoiding an extra nested folder.

This command creates a few files and folders:

my_ecommerce_site/
├── venv/
└── store_project/
    ├── manage.py
    └── store_project/
        ├── __init__.py
        ├── asgi.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py

• manage.py: A command-line utility for interacting with your Django project. You’ll use this a lot!
• store_project/settings.py: This file contains all your project’s configuration, like database settings, installed apps, and static file locations.
• store_project/urls.py: This is where you define URL patterns for your entire project, telling Django which view function to call for a given URL address.

1. Running Migrations

Django projects come with some default database tables (for users, sessions, etc.). We need to create these in our database.

python manage.py migrate

• Migrations: Django’s way of managing changes to your database schema (the structure of your database). migrate applies these changes.

2. Starting the Development Server

You can see your project in action by starting Django’s development server:

python manage.py runserver

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!

Creating an App for Products

In Django, projects are typically divided into smaller, self-contained applications (apps). This makes your code more organized and reusable. Let’s create an app specifically for our products.

python manage.py startapp products

This creates a new products folder within your project.

1. Register Your New App

Django needs to know about your new app. Open store_project/settings.py and add 'products' 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',
    'products', # <-- Add your new app here
]

2. Defining Models (The Blueprint for Your Products)

Models are Python classes that define the structure of the data you want to store in your database. Think of them as blueprints for your products.

Open products/models.py and define a Product model:

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    image = models.ImageField(upload_to='products/', blank=True, null=True)
    available = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

Let’s break down these fields:
* models.CharField: For short strings of text (like the product’s name). max_length is required.
* models.TextField: For longer text (like a product description).
* models.DecimalField: For numbers with decimal places (like prices). max_digits is the total number of digits allowed, and decimal_places is the number of digits after the decimal point.
* models.ImageField: For uploading image files. upload_to='products/' specifies a sub-directory within your media folder where images will be stored. blank=True, null=True means the image is optional.
* models.BooleanField: For true/false values (like whether a product is available).
* models.DateTimeField: For date and time stamps. auto_now_add=True sets the date/time automatically when the object is first created. auto_now=True updates the date/time every time the object is saved.
* def __str__(self):: This method tells Django how to represent a Product object as a string, which is helpful in the admin panel.

3. Making and Applying Migrations

Whenever you change your models, you need to tell Django to create new database migrations and then apply them.

python manage.py makemigrations products
python manage.py migrate

• makemigrations products: This command inspects your products app’s models and creates migration files that describe how to change your database to match your new models.
• migrate: This command executes the changes described in the migration files on your actual database.

4. Registering Models in the Admin Panel

Django comes with an amazing built-in admin panel that makes managing content incredibly easy. Let’s register our Product model so we can add products through the admin interface.

First, create a superuser (an admin account):

python manage.py createsuperuser

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

Now, open products/admin.py and add the following:

from django.contrib import admin
from .models import Product

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    list_display = ['name', 'price', 'available', 'created', 'updated']
    list_filter = ['available', 'created', 'updated']
    list_editable = ['price', 'available']
    prepopulated_fields = {'name': ('name',)} # Optional, for slug generation later

Restart your development server (python manage.py runserver). Go to http://127.0.0.1:8000/admin/, log in with your superuser credentials, and you should see “Products” under the “PRODUCTS” section. Click on “Products” and then “Add product” to start adding some items to your store!

• list_display: Defines which fields are displayed on the list page in the admin.
• list_filter: Adds a sidebar filter for these fields.
• list_editable: Allows you to edit these fields directly from the list page.

Creating Views to Display Products

A view is a Python function (or class) that takes a web request and returns a web response, typically an HTML page. Our first view will fetch all products from the database and display them.

Open products/views.py and add this code:

from django.shortcuts import render
from .models import Product

def product_list(request):
    products = Product.objects.filter(available=True)
    return render(request, 'products/product_list.html', {'products': products})

• render: A Django shortcut function that takes the request object, a template path, and a dictionary of data to “render” (combine the template with the data) into an HTML response.
• Product.objects.filter(available=True): This uses Django’s ORM to query the database and retrieve all Product objects where the available field is True.

Setting Up URLs

Now, we need to tell Django which URL pattern should trigger our product_list view. This involves two steps:

1. Create products/urls.py

Inside your products app directory, create a new file named urls.py:

from django.urls import path
from . import views

app_name = 'products' # This helps Django distinguish URLs from different apps

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

• path('', views.product_list, name='product_list'): This defines a URL pattern.
  • '': An empty string means this URL pattern will match the base URL for this app (e.g., /products/ if we set it up that way in the project’s urls.py).
  • views.product_list: The view function to call when this URL is accessed.
  • name='product_list': A name for this URL pattern, which makes it easier to refer to it in templates and other parts of your code.

2. Include App URLs in Project urls.py

Open your main store_project/urls.py file and include the products app’s URLs:

from django.contrib import admin
from django.urls import path, include # <-- Import include
from django.conf import settings # For media files
from django.conf.urls.static import static # For media files

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

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

We added path('', include('products.urls')). This means that any request to the root of our website (/) will be handled by the URL patterns defined in products/urls.py.

We also added configuration for MEDIA_URL and MEDIA_ROOT which are essential for displaying uploaded product images. Let’s define them in settings.py:

import os # <-- Add this at the top if not already there

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

• MEDIA_URL: The base URL from which media files (like uploaded images) will be served.
• MEDIA_ROOT: The absolute path to the directory where uploaded media files will be stored on your file system.

Designing Templates (The Look of Your Pages)

Templates are HTML files that define the structure and layout of your web pages. Django’s templating engine allows you to embed Python-like logic to display dynamic data.

First, create a templates directory inside your products app, and then another products directory inside that (this is a common Django convention to prevent template name collisions):

my_ecommerce_site/
└── products/
    ├── templates/
    │   └── products/
    │       └── product_list.html # <-- We'll create this file
    └── ...

Now, create product_list.html inside products/templates/products/:

<!-- products/templates/products/product_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 Store</title>
    <style>
        body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; }
        h1 { color: #333; text-align: center; }
        .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
        .product-item { background-color: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .product-item img { max-width: 100%; height: 200px; object-fit: cover; border-radius: 4px; margin-bottom: 10px; }
        .product-item h2 { font-size: 1.2em; margin-bottom: 5px; color: #007bff; }
        .product-item p { font-size: 0.9em; color: #666; margin-bottom: 10px; }
        .product-item .price { font-weight: bold; color: #28a745; font-size: 1.1em; }
    </style>
</head>
<body>
    <h1>Welcome to My Simple Online Store!</h1>

    <div class="product-list">
        {% for product in products %}
            <div class="product-item">
                {% if product.image %}
                    <img src="{{ product.image.url }}" alt="{{ product.name }}">
                {% else %}
                    <img src="https://via.placeholder.com/200x200?text=No+Image" alt="No image available">
                {% endif %}
                <h2>{{ product.name }}</h2>
                <p>{{ product.description|truncatechars:100 }}</p>
                <p class="price">${{ product.price }}</p>
            </div>
        {% empty %}
            <p>No products available yet. Check back soon!</p>
        {% endfor %}
    </div>
</body>
</html>

• {% for product in products %}: This is a Django template tag that loops through each product in the products list passed from our view.
• {{ product.name }}: This is a Django template variable that displays the name attribute of the current product object.
• {{ product.image.url }}: This gets the URL for the product’s image.
• |truncatechars:100: A Django template filter that truncates (shortens) the description to 100 characters.
• {% empty %}: An optional tag within a for loop that displays its content if the list is empty.

Now, restart your server (python manage.py runserver) and visit http://127.0.0.1:8000/. You should see a list of the products you added through the admin panel, complete with their names, descriptions, prices, and images!

What’s Next? Expanding Your E-commerce Site

Congratulations! You’ve built the foundation of a simple e-commerce site. This is just the beginning, of course. Here are some ideas for how you could expand your site:

• Product Detail Pages: Create a separate page for each product with more details, using a path('<int:id>/', views.product_detail, name='product_detail') URL pattern.
• Shopping Cart: Implement functionality for users to add products to a shopping cart, view their cart, and update quantities.
• User Authentication: Allow users to register, log in, and manage their orders. Django has a built-in authentication system to help with this.
• Checkout Process: Develop a multi-step checkout process.
• Payment Integration: Connect with payment gateways like Stripe or PayPal to handle actual transactions.
• Search and Filters: Add features for users to search for products or filter them by category, price, etc.
• Deployment: Learn how to deploy your Django project to a live server so others can access it.

Conclusion

Building an e-commerce site can seem daunting, but by breaking it down into smaller, manageable steps, and leveraging powerful frameworks like Django, you can achieve a lot. We’ve covered setting up your environment, creating a Django project and app, defining models, populating data through the admin panel, and displaying products using views and templates.

Keep learning, keep building, and don’t be afraid to experiment! The world of web development is vast and rewarding. Happy coding!

Welcome, aspiring web developers! Have you ever wanted to create your own corner on the internet, maybe a personal blog to share your thoughts or projects? Building a website might seem intimidating at first, but with the right tools and a step-by-step guide, it’s more accessible than you think. Today, we’re going to dive into Django, a powerful and popular web framework, to build a simple blog from scratch.

What is Django?

Let’s start with the basics. Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. What does “high-level” mean? It means Django handles a lot of the complex details of web development for you, allowing you to focus on your application’s unique features. It follows the “Don’t Repeat Yourself” (DRY) principle and comes with many features “out of the box,” such as an admin panel, authentication, and database management, making it incredibly efficient for building robust web applications quickly.

Think of it like building a house: instead of needing to mill your own lumber, forge your own nails, and mix your own concrete, Django provides you with pre-fabricated walls, a ready-made roof, and even a blueprint, so you can assemble your house much faster.

Setting Up Your Environment

Before we write any Django code, we need to prepare our workspace. This involves installing Python and setting up a virtual environment.

1. Install Python

Django is a Python framework, so you’ll need Python installed on your computer. If you don’t have it yet, 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 if you’re on Windows, as this makes it easier to run Python commands from your terminal.

2. Create a Virtual Environment

A virtual environment is a isolated space on your computer where you can install Python packages (like Django) for a specific project without interfering with other projects or your system’s global Python installation. It’s considered a best practice for Python development.

First, open your terminal or command prompt. Navigate to where you want to store your project. Then, run these commands:

mkdir myblogproject
cd myblogproject

python -m venv venv

Now, activate your virtual environment:

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

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

3. Install Django

With your virtual environment active, you can now install Django:

pip install django

This command uses pip (Python’s package installer) to download and install the Django framework into your virtual environment.

Starting Your Django Project

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

django-admin startproject myblogproject .

Let’s break this down:
* django-admin: This is a command-line utility that comes with Django for administrative tasks.
* startproject myblogproject: This tells Django to create a new project named myblogproject.
* .: This is important! It tells Django to create the project files in the current directory (myblogproject), rather than creating another nested myblogproject folder.

After running this command, your project directory will look something like this:

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

• manage.py: A command-line utility for interacting with your Django project. You’ll use this a lot!
• myblogproject/: This inner directory is the actual Python package for your project.
  • settings.py: Contains your project’s configuration, like database settings, installed apps, and static file paths.
  • urls.py: Defines URL patterns for your entire project. This is where you map web addresses to specific views in your application.
  • The other files (__init__.py, asgi.py, wsgi.py) are for advanced deployment scenarios and can be mostly ignored for now.

Let’s run our development server to see if everything is set up correctly:

python manage.py runserver

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! Press Ctrl+C in your terminal to stop the server.

Creating Your First Django App

In Django, a “project” is a collection of “apps.” An “app” is a web application that does something specific, like a blog, a forum, or a poll. It’s a good practice to keep your code organized into reusable apps. For our blog, we’ll create a blog app.

python manage.py startapp blog

This creates a blog directory inside your myblogproject folder:

myblogproject/
├── blog/
│   ├── migrations/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── myblogproject/
    ├── ... (your project files)

Next, we need to tell our Django project that our new blog app exists. Open myblogproject/settings.py and add 'blog' 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',
    'blog',  # Our new blog app!
]

Designing Your Blog’s Data (Models)

Now, let’s think about what information a blog post needs. We’ll typically want a title, the actual content, a publication date, and perhaps an author. In Django, we define this structure using “models.” Models are Python classes that define the fields and behaviors of the data you’re storing. Each model maps to a table in your database.

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

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

class Post(models.Model):
    title = models.CharField(max_length=200) # A short text field for the title
    content = models.TextField() # A large text field for the blog post's body
    pub_date = models.DateTimeField(default=timezone.now) # Automatically set when published
    author = models.ForeignKey(User, on_delete=models.CASCADE) # Link to a User model

    def __str__(self):
        return self.title

• models.Model: This tells Django that Post is a Django model.
• CharField, TextField, DateTimeField, ForeignKey: These are Django field types that define the kind of data each attribute will hold.
• max_length: Required for CharField to specify the maximum length.
• default=timezone.now: Sets the default value for pub_date to the current time.
• ForeignKey(User, on_delete=models.CASCADE): This creates a relationship where each Post is linked to a User. If a User is deleted, all their Posts will also be deleted (CASCADE).
• __str__(self): This special method tells Python how to display a Post object (e.g., in the admin interface).

After defining your model, you need to tell Django to create the corresponding database table. This is done through a two-step process called “migrations.”

1. Make Migrations: Django creates migration files, which are instructions on how to change your database schema.
   bash
python manage.py makemigrations blog
   You should see output indicating a new migration file was created (e.g., 0001_initial.py).

2. Apply Migrations: Django executes these instructions to actually create the tables in your database.
   bash
python manage.py migrate
   This command applies all pending migrations, including those for Django’s built-in apps (like auth for user management).

Making Your Blog Visible (Views and URLs)

Now that we have our data structure, let’s create a “view” to display our blog posts and define a “URL” to access it.

1. Create a View

A “view” is a Python function (or class) that takes a web request and returns a web response. It’s where you put the logic to fetch data from your models and prepare it for display.

Open blog/views.py and add the following:

from django.shortcuts import render
from .models import Post # Import our Post model

def post_list(request):
    # Fetch all blog posts from the database, ordered by publication date (newest first)
    posts = Post.objects.order_by('-pub_date')
    # Pass the posts to the 'blog/post_list.html' template
    return render(request, 'blog/post_list.html', {'posts': posts})

• render(request, template_name, context): This is a Django shortcut function that takes the request object, the name of a template file, and a dictionary of data (context) to pass to the template. It then combines the template with the data and returns an HttpResponse.

2. Define URLs

URLs are how users navigate your website. We need to tell Django which URL pattern should trigger our post_list view. This involves two steps: defining URLs within our blog app, and then including those app URLs into our main project’s urls.py.

First, create a new file inside your blog directory called urls.py:

myblogproject/
├── blog/
│   ├── ...
│   └── urls.py  <-- NEW FILE
└── myblogproject/
    ├── ...

Open blog/urls.py and add this code:

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

app_name = 'blog' # This helps Django distinguish URLs from different apps

urlpatterns = [
    path('', views.post_list, name='post_list'), # An empty path '' means the root of this app
]

• path('', views.post_list, name='post_list'): This means that if someone visits the root URL of our blog app (e.g., /blog/), Django should call the post_list function in views.py. name='post_list' gives this URL a recognizable name, which is useful for referring to it in templates and other parts of your code.

Now, open your project’s main myblogproject/urls.py and include the blog app’s URLs:

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 our blog app's URLs
]

• path('blog/', include('blog.urls')): This tells Django that any URL starting with blog/ should be handled by the blog app’s urls.py file. So, http://127.0.0.1:8000/blog/ will now map to our post_list view.

Displaying Your Blog Posts (Templates)

We have data and a view to fetch it, but how do we show it to the user? That’s where “templates” come in. Templates are HTML files that contain placeholders for data, allowing Django to dynamically generate web pages.

Inside your blog directory, create a new directory named templates, and inside templates, create another directory named blog. This structure (app_name/templates/app_name/) is a Django convention that helps keep your templates organized and avoids naming conflicts between different apps.

myblogproject/
├── blog/
│   ├── templates/
│   │   └── blog/
│   │       └── post_list.html  <-- NEW FILE
│   └── ...
└── myblogproject/
    ├── ...

Open blog/templates/blog/post_list.html and add this simple 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>
</head>
<body>
    <h1>Welcome to My Blog!</h1>

    {% for post in posts %} {# Start of a Django template loop #}
        <h2>{{ post.title }}</h2> {# Display the post's title #}
        <p>Published on: {{ post.pub_date }} by {{ post.author.username }}</p> {# Display date and author #}
        <p>{{ post.content|linebreaksbr }}</p> {# Display content, converting newlines to <br> tags #}
        <hr>
    {% empty %} {# This block runs if 'posts' is empty #}
        <p>No blog posts yet. Stay tuned!</p>
    {% endfor %} {# End of the loop #}
</body>
</html>

• {% ... %}: These are Django template tags for logic (like loops or if statements).
• {{ ... }}: These are Django template variables for displaying data.
• |linebreaksbr: This is a “filter” that transforms the output of post.content by converting newlines into HTML <br> tags, making multiline text display correctly.

Now, run your server again:

python manage.py runserver

Go to http://127.0.0.1:8000/blog/. You’ll likely see “No blog posts yet. Stay tuned!” because we haven’t created any posts. Let’s do that next using the admin interface!

Admin Interface (A Quick Bonus)

Django comes with a powerful, production-ready admin interface right out of the box. This allows you to manage your site’s data without writing a lot of backend code.

1. Create a Superuser

First, create an admin user (superuser) for your site:

python manage.py createsuperuser

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

2. Register Your Model

To make our Post model visible in the admin, open blog/admin.py and register it:

from django.contrib import admin
from .models import Post # Import our Post model

admin.site.register(Post) # Register the Post model with the admin site

Now, run your server (python manage.py runserver) and go to http://127.00.1:8000/admin/. Log in with the superuser credentials you just created. You should now see “Posts” under the “BLOG” section. Click on “Add” next to “Posts” to create your first blog post! Fill in a title, some content, select your superuser as the author, and click “Save.”

After creating a post or two, navigate back to http://127.0.0.1:8000/blog/. Voila! You should now see your blog posts displayed.

Conclusion

Congratulations! You’ve successfully built a simple blog using Django. You’ve learned how to:
* Set up your development environment and install Django.
* Create a Django project and app.
* Define data structures using models.
* Perform database migrations.
* Create views to fetch and process data.
* Map URLs to your views.
* Display data using templates.
* Use Django’s powerful admin interface.

This is just the beginning of your Django journey. From here, you can expand your blog with features like individual post detail pages, comments, user authentication for authors, and much more. Keep experimenting, keep building, and happy coding!

Have you ever dreamed of creating your own online shop, but felt intimidated by the complex world of web development? Well, you’re in luck! Building an e-commerce store from scratch might seem daunting, but with the right tools, it’s much more approachable than you think. Today, we’re going to dive into Django, a powerful web framework for Python, and learn how to lay the groundwork for a simple online store.

This guide is perfect for beginners who want to understand the basics of building web applications with Django, specifically tailored for an e-commerce context. We’ll keep things simple and explain technical terms along the way.

What is Django?

Imagine you’re building a house. You could mill your own lumber, forge your own nails, and mix your own concrete from raw materials. Or, you could use a pre-assembled kit that provides you with sturdy walls, a roof, and plumbing connections ready to go.

Django is like that pre-assembled kit for building websites. It’s a “web framework” for the Python programming language.
* Web Framework: A collection of tools and components that simplifies the development of web applications. Instead of starting from zero, it gives you a structure and common functions (like handling databases, user authentication, or managing website URLs) already built in.

Django helps you create robust, scalable, and secure web applications quickly. It follows the “Don’t Repeat Yourself” (DRY) principle, meaning it encourages you to write code once and reuse it efficiently.

Why Django for E-commerce?

Django is an excellent choice for e-commerce platforms for several reasons:

• Security: E-commerce sites deal with sensitive user data and transactions. Django is built with security in mind, providing features that help protect against common web vulnerabilities like SQL injection and cross-site scripting (XSS).
• Scalability: As your store grows, Django can handle an increasing number of users and products without major overhauls.
• Rapid Development: With its “batteries-included” philosophy, Django comes with many components already integrated, allowing you to build features faster.
• Admin Panel: Django includes a fantastic, automatically generated administrative interface. This allows you to manage your products, orders, and users with ease, without writing extra code for an admin dashboard.
• Python Power: Python is a widely loved and beginner-friendly language, known for its readability and versatility. This means a large community and lots of resources are available to help you.

Setting Up Your Development Environment

Before we start coding, we need to set up our workspace.

1. Install Python

Django runs on Python. If you don’t have Python installed, head over to the official Python website and download the latest stable version. Make sure to check the “Add Python to PATH” option during installation.

2. Create a Virtual Environment

It’s good practice to create a “virtual environment” for each Django project.
* Virtual Environment: This creates an isolated space for your project’s Python packages. This prevents conflicts between different projects that might need different versions of the same package.

Open your terminal or command prompt and navigate to where you want to store your project. Then, run these commands:

python -m venv myenv

source myenv/bin/activate
myenv\Scripts\activate

You’ll notice (myenv) appearing before your command prompt, indicating that your virtual environment is active.

3. Install Django

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

pip install Django Pillow

• Pillow is a library we’ll use later to handle image uploads for our products.

Starting Your First Django Project

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

1. Create a Django Project

A Django project is the entire website. Let’s call our project mystore. The . at the end tells Django to create the project files in the current directory.

django-admin startproject mystore .

This command creates a few files and folders:
* mystore/: The main configuration for your project (settings, URLs, etc.).
* manage.py: A command-line utility for interacting with your Django project (running the server, migrations, etc.).

2. Create a Django App

A Django project is made up of one or more “apps.” An app is a self-contained module that does one specific thing (e.g., a “products” app, a “users” app, a “cart” app). For our store, we’ll start with a products app.

python manage.py startapp products

This creates a products folder with its own set of files.

3. Register Your App

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

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

4. Run Migrations

Django uses a database to store all its information. When you first set up a project, or when you make changes to your models (which define your data structure), you need to “migrate” these changes to the database.

python manage.py migrate

This command sets up the initial database tables required by Django’s built-in features (like user authentication).

5. Start the Development Server

To see if everything is working, let’s run the development server:

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/. You should see a “The install worked successfully! Congratulations!” page. If you do, great job! You have a running Django project.

Core Concepts for an E-commerce Store (MVC/MVT)

Django follows a pattern often called MVT (Model-View-Template), which is similar to MVC (Model-View-Controller). Let’s break down these core concepts for our store:

• Models: Think of models as the blueprint for your data. For an e-commerce store, you’ll need a Product model to define what information each product has (like its name, price, description, and image). Models are Python classes that describe the structure of your database tables.

• Views: Views are the logic behind what your users see. When someone visits your website’s /products/ page, a view function or class is responsible for fetching all the product data from your models, processing it, and preparing it for display.

• Templates: Templates are like the front-end design of your website. They are HTML files that contain special Django code to display dynamic data (like product names and prices) that comes from your views. They define how your products look on the web page.

• URLs: URLs are the web addresses that users type into their browser. In Django, you define URL patterns that map specific web addresses (e.g., /products/) to particular views. This tells Django which view should handle which request.

Building Basic E-commerce Features: The Product

Let’s start by defining our Product model and displaying a list of products.

1. Define the Product Model

Open products/models.py and define your Product model.

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    image = models.ImageField(upload_to='products/', blank=True, null=True) # Optional image

    def __str__(self):
        return self.name

• models.Model: All Django models inherit from this base class.
• CharField: For short text, like the product’s name.
• TextField: For longer text, like a product description.
• DecimalField: For numbers with decimal places, suitable for prices. max_digits is the total number of digits, and decimal_places is the number of digits after the decimal point.
• ImageField: For uploading images. upload_to='products/' tells Django to save images in a ‘products’ subfolder within your media directory. blank=True, null=True means the image is optional.
• __str__(self): This method tells Django how to represent an object of this class as a string, which is very helpful in the admin panel.

After changing your models, you need to tell Django about these changes:

python manage.py makemigrations products
python manage.py migrate

• makemigrations: Creates a migration file that records your model changes.
• migrate: Applies those changes to your database.

2. Set Up Media Files for Images

For ImageField to work, Django needs to know where to store uploaded files and how to serve them during development.

Open mystore/settings.py and add these lines at the end:

import os # Make sure this is at the top of settings.py or added if missing

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

• MEDIA_URL: The public URL that browsers use to access your media files.
• MEDIA_ROOT: The absolute path on your server where user-uploaded files will be stored.

Next, open mystore/urls.py and add the necessary configuration to serve media files in development:

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

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('products/', include('products.urls')), # We'll add this 'products.urls' later
]

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

3. Utilize the Django Admin Interface

Django’s admin panel is a powerful tool to manage your data. Let’s register our Product model so we can add products easily.

First, create a superuser (an admin account) for yourself:

python manage.py createsuperuser

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

Now, open products/admin.py and add your Product model:

from django.contrib import admin
from .models import Product

admin.site.register(Product)

Restart your development server (python manage.py runserver). Go to http://127.0.0.1:8000/admin/ and log in with your superuser credentials. You should now see “Products” under the “Products” section. Click on “Add” next to Products and start adding a few sample products with names, descriptions, prices, and even upload an image!

4. Create a Product Listing View

Now, let’s create a view that fetches all products and prepares them for display.

Open products/views.py:

from django.shortcuts import render
from .models import Product

def product_list(request):
    products = Product.objects.all() # Get all products from the database
    context = {'products': products} # Package them into a dictionary
    return render(request, 'products/product_list.html', context) # Send to template

• Product.objects.all(): This is how you query the database to get all instances of your Product model.
• render(request, 'template_name', context): This is a shortcut function that loads a template, fills it with data from the context dictionary, and returns an HttpResponse object.

5. Define URLs for the Product Listing

We need to tell Django which URL should trigger our product_list view.

First, create a new file products/urls.py:

from django.urls import path
from . import views

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

• path('', views.product_list, name='product_list'): This maps the empty path (meaning the root of the app’s URL) to our product_list view. name='product_list' gives this URL a unique identifier, useful for referencing it later.

Next, we need to include these product URLs into our main project’s urls.py. Open mystore/urls.py again and modify it like this:

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

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('products/', include('products.urls')), # <--- Add this line!
]

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

• path('products/', include('products.urls')): This tells Django that any URL starting with /products/ should be handled by the urls.py file inside our products app. So, http://127.0.0.1:8000/products/ will now lead to our product_list view.

6. Create the Product Listing Template

Finally, let’s create the HTML template to display our products. Django looks for templates in a templates folder inside your app.

Create the folder structure products/templates/products/. Inside the last products folder, create a file named product_list.html.

<!-- products/templates/products/product_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Simple Store</title>
    <style> /* Simple CSS for readability */
        body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; }
        .product-container { display: flex; flex-wrap: wrap; justify-content: space-around; }
        .product-card { background-color: white; border: 1px solid #ddd; border-radius: 8px; margin: 15px; padding: 20px; width: 300px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .product-card h2 { color: #333; margin-top: 0; }
        .product-card p { color: #666; font-size: 0.9em; }
        .product-card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; }
        .price { font-size: 1.2em; color: #007bff; font-weight: bold; }
    </style>
</head>
<body>
    <h1>Welcome to Our Simple Online Store!</h1>

    <div class="product-container">
        {% for product in products %}
            <div class="product-card">
                {% if product.image %}
                    <img src="{{ product.image.url }}" alt="{{ product.name }}">
                {% endif %}
                <h2>{{ product.name }}</h2>
                <p>{{ product.description }}</p>
                <p class="price">Price: ${{ product.price }}</p>
                <!-- In a real store, you'd add an "Add to Cart" button here -->
            </div>
        {% empty %}
            <p>No products are available right now. Please check back later!</p>
        {% endfor %}
    </div>
</body>
</html>

• {% for product in products %}: This is Django’s template language. It loops through each product in the products list that we passed from our product_list view.
• {{ product.name }}: This displays the name attribute of the current product object.
• {% if product.image %}: Checks if a product has an image.
• {{ product.image.url }}: Provides the URL to the product’s image.
• {% empty %}: This block is executed if the products list is empty.

See Your Store in Action!

Make sure your development server is still running (python manage.py runserver). If not, start it again.
Now, open your web browser and navigate to http://127.0.0.1:8000/products/.

You should see your “Welcome to Our Simple Online Store!” heading and a list of all the products you added through the admin panel! Each product will display its name, description, price, and image (if you uploaded one).

What’s Next?

Congratulations! You’ve successfully built the foundation of a simple e-commerce store with Django. This includes setting up your environment, defining a product, managing it via the admin panel, and displaying it on a webpage.

From here, the possibilities are endless. You could explore adding:

• Product Detail Pages: A page for each individual product with more details.
• Shopping Cart: A way for users to add products and manage their selections.
• User Accounts: Allow users to register, log in, and save their preferences or past orders.
• Checkout Process: Steps for users to finalize their purchase.
• Payment Integration: Connecting with services like Stripe or PayPal to handle transactions.

Django provides robust tools for all these features, making it a fantastic framework to grow your e-commerce dream. Keep experimenting, keep learning, and have fun building!

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!