Table of Contents
- Introduction
- Prerequisites
- Setup
- Creating a Django Project
- Creating the Portfolio App
- Creating the Portfolio Model
- Creating the Portfolio Views
- Creating the Portfolio Templates
- Configuring URL Routing
- Testing the Portfolio Website
- Conclusion
Introduction
In this tutorial, we will walk through the process of building a portfolio website using Django, a powerful and popular Python web framework. By the end of this tutorial, you will have a functional and visually appealing portfolio website ready to showcase your projects and skills.
Prerequisites
Before starting this tutorial, you should have a basic understanding of Python programming language and some familiarity with web development concepts. It is also assumed that you have Python installed on your system.
Setup
First, let’s make sure Django is installed. Open your terminal or command prompt and type the following command:
pip install django
Once Django is installed, we are ready to create a new Django project.
Creating a Django Project
To create a new Django project, run the following command:
django-admin startproject portfolio
This will create a new directory named “portfolio” with the basic project structure. Navigate into the project directory:
cd portfolio
Now, let’s start the development server to make sure our Django project is set up correctly:
python manage.py runserver
If everything goes well, you should see a message like this:
Starting development server at http://127.0.0.1:8000/
Open your web browser and visit the provided URL to confirm that the server is running.
Creating the Portfolio App
A Django project can contain multiple apps. We will create a new app called “portfolio” to handle the portfolio functionality.
To create a new app, run the following command:
python manage.py startapp portfolio
This will create a new directory named “portfolio” inside your project directory.
Creating the Portfolio Model
In Django, models define the structure of your database tables. We will create a model for the portfolio items.
Open the portfolio/models.py file and define the following model:
```
from django.db import models
class PortfolioItem(models.Model):
title = models.CharField(max_length=100)
description = models.TextField()
image = models.ImageField(upload_to='portfolio/images/')
def __str__(self):
return self.title
``` Here, we define a model called `PortfolioItem` with three fields: `title`, `description`, and `image`.
The __str__ method is used to display a meaningful representation of the model instance.
Creating the Portfolio Views
Views in Django handle the logic for processing user requests and rendering responses. We will create views to display the portfolio items.
Open the portfolio/views.py file and define the following views:
```
from django.shortcuts import render
from .models import PortfolioItem
def portfolio_list(request):
items = PortfolioItem.objects.all()
return render(request, 'portfolio/portfolio_list.html', {'items': items})
``` In this code, we import the `render` function and the `PortfolioItem` model from our `models.py` file. The `portfolio_list` view retrieves all portfolio items from the database and passes them to the `portfolio_list.html` template.
Creating the Portfolio Templates
Templates in Django define the structure and layout of your web pages. We will create a template to display the portfolio items.
Create a new directory named “templates” inside the “portfolio” directory.
Inside the “templates” directory, create a new directory named “portfolio”.
Create a new file inside the “portfolio” directory and name it “portfolio_list.html”.
Open the “portfolio_list.html” file and add the following code: ```html
``` This template iterates over the `items` variable received from the view and displays the title, description, and image for each portfolio item.
Configuring URL Routing
URL routing in Django maps URL patterns to views. We need to configure the URLs for our portfolio app.
Open the portfolio/urls.py file and add the following code:
```python
from django.urls import path
from .views import portfolio_list
app_name = 'portfolio'
urlpatterns = [
path('', portfolio_list, name='portfolio_list'),
]
``` This code imports the `path` function and the `portfolio_list` view from our `views.py` file. It also sets the `app_name` variable to 'portfolio' for namespacing purposes.
Testing the Portfolio Website
To test the portfolio website, start the development server:
python manage.py runserver
Visit http://127.0.0.1:8000/portfolio/ in your web browser, and you should see the list of portfolio items with their titles, descriptions, and images.
Congratulations! You have successfully built a portfolio website using Django.
Conclusion
In this tutorial, we have learned the basics of building a portfolio website using Django. We covered the process of creating a Django project, creating an app, defining models, views, and templates, and configuring URL routing. By following this tutorial, you should now have a solid foundation to continue exploring Django and building more complex web applications.