Creating a personal portfolio website is an excellent way to show off projects you have already done. Thus, whether you are a data scientist, a software developer, or a web developer, having a personal portfolio website is a compulsory requirement to increase your chances of getting a job.
As a web developer, this should be our foremost project because it’s part of what we are learning, that is, to design complex websites and applications. It will not make sense that we are learning to design a website, yet, we don’t have one to call our own.
In this tutorial series, we will learn to design a personal portfolio website that employers or others can visit to see all the projects we have done:
- The first part focuses on creating Django models and an admin panel.
- The second part focuses on creating a view function and having our website displayed to users.
- In the third and final part, we will learn how to deploy our website to a production server.
In upcoming tutorials, we will learn to create a blog application where we can share what we have learned as a web programmer.
This is probably the first time we are working with models as far as my Django project tutorials are concerned. It will be nice to learn how to work with a database. Therefore, you must have a basic knowledge of Python and Django to derive maximum benefit from this tutorial.
We have already set up Django Projects several times we have been learning Django. For the sake of the new ones in our midst, herein lies the steps involved in setting up Django in your Ubuntu terminal:
- Create and change into a new directory called
- Install Django in a new environment.
- Create a new project called
- Create a new app called
- Register the app in
The Projects should be created in the current directory using a dot after the project name.
Creating the Models
We create a database to store data displayed on a website. Knowing Structured Query Language (SQL) is a compulsory requirement to manage the database. The problem is that not everyone understands the language.
Django comes to the rescue with its built-in Object Relational Mapper (ORM). So, instead of writing SQL, you can simply create classes using the Python Language you understand, and ORM will turn them into database tables.
The classes are called models, and in all Django projects, it is created in the
models.py file. Our model will have five fields:
- The title for the name of the Projects
- The image for uploading images
- The description for a brief explanation of the project done
- The technology used to carry out the project.
- The date the project was done (optional).
models.py file, and add the following in our fields:
from django.db import models from datetime import datetime # Create your models here. class Projects(models.Model): title = models.CharField(max_length=300) image = models.ImageField(upload_to='images/') description = models.TextField(blank=True) technology = models.CharField(max_length=30) date_pub = models.DateTimeField(default=datetime.now, blank=True)
The above script demands an explanation since it is our first time using database models. We import the Django
model class. The name of our model is called
Projects. It has four built-in model fields.
CharField is used to write short words, while the
TextField which has no length specification is used to write long words. The image received by
ImageField will be uploaded to a specific file path.
Notice that our model inherits the
models.Model class. This is how models created with Django should be done.
It’s now time to create the database. To do this, we have to create a migration file. Run the following in your terminal to create a migration file:
python3 manage.py makemigrations portfolio
Did you see the
SystemCheckError, 'cannot use ImageField because Pillow is not installed'? The
ImageField cannot function without the Pillow module.
So, install the module in your virtual environment, and run the command once again to create a migration file. You will see something similar to this:
Migrations for 'portfolio': portfolio/migrations/0001_initial.py - Create model Projects
The migration file tells Django what changes to make in the database. Notice the name of the app following the command. This tells Django to apply the migration to the specified app. You do well to make it a habit of specifying the app when running the
Doing so may not be completely obvious in a single app but it becomes necessary when your Django Project has several apps to avoid surprises.
Next is to apply the migrations using the
python3 manage.py migrate
You will notice the database file,
db.sqlite3 has been created. The Django ORM creates databases with Python’s SQLite module. In a production server, you may have to use other databases such as PostgresSQL or MySQL.
This is the URL we will use in template files to refer to the media files.
This is the path to the directory where our media files will be stored. Django by convention, uses the name,
media. So, we have to create a folder called
media in the project-level folder.
Notice that, as seen in the Projects model, we set the path to store our uploaded images in the
images folder. So, we have to create the folder inside the
mkdir -p media/images
We have to configure these two new features in the
settings.py file. Add these to the file.
MEDIA_URL = 'media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
With this configuration, we can now upload image files, and Django will have them stored in the
images folder. Make sure you import the
The admin panel allows you to create, update, or delete Projects (all instances of the
model class). To access it, we have to create a superuser. Add yourself as a superuser by running the following commands in your terminal:
python3 manage.py createsuperuser
Follow the instructions to create a superuser account. Note that as you type the password, it is not displayed for security reasons. Afterward, start the local server.
python3 manage.py runserver
http://127.0.0.1:8000/admin to see the admin interface. We can’t locate our Projects model. That’s because we haven’t registered it in the
Open the file and add the following:
from django.contrib import admin from .models import Projects # Register your models here. admin.site.register(Projects)
With that, we register our model. As simple as that. Refresh the page. You will see the
Projects model. Click add and you will see something similar to the image below:
Add several sample projects you can display on your portfolio website. You will see that the image files you uploaded will automatically go to the
So far in this project tutorial, we have learned how to create Django models, turn the model classes into database tables using the migration files, set up an admin panel and upload sample projects we can display on the website. You are to be commended for staying with me all through the end of this first series. The code is available on my GitHub page.
In the second part of this series, we will create a view function using the sample projects we uploaded, and display them to users on a web page. Stay tuned!
Jonathan Okah is a professional freelance Python developer whose primary goal is to solve a perceived problem with the use of technology, thus making life easy for you.
Jonathan has a flair for writing and has written several blog articles for clients. He is constantly learning to improve his skills. Currently, he is studying software engineering, hoping to become a full-stack web developer.
In his leisure time, Jonathan enjoys playing games and watching the English Premier League. You can contact him for your freelance projects at Upwork.