# Portfolio Website with Django Documentation

This is the documentation about my individual final project in Net Development 2024.
You can see my source code and the website demo in here:
- source code, klick [here](https://github.com/sandyxd18/Django-Web-Portfolio)
- demo, klick [here](https://sandyxd18.pythonanywhere.com)

In making this website, I created 1 project and 1 app, and the folder structure can be seen below.

Django-Web-Portfolio/
├─ individu (venv)/
├─ myportfolio (project)/
├─ media_root (image_dir)/
│  ├─ portfolio/
├─ sandy (app)/
├─ static/
├─ db.sqlite3
├─ manage.py
├─ requirements.txt

**Chapter 1 : Project Setup**
-
**1. Create a new directory and virtual environment**
Create a special directory and create a virtual environment by running the command as below.

$ mkdir project1 && cd project1
$ python -m venv venv

**2. Activate the virtual environment**
In the same direcotry, run the following command.

$ source venv/bin/activate

**note**: This is a command for Linux and MacOS, for Windows you can see [here](https://docs.python.org/3/library/venv.html)

**3. Install django**
Run the following command to install django, this web is using django 3.1.14 version.

$ pip install django==3.1.14

**4. Create a new django project**
Run the following command to create a new django project.

$ django-admin startproject myportfolio .

The meaning of the dot (.) is that we will place the project folder in our current location.

**5. Create a new app**
After create a new project, we have 1 directory and 1 file to manage our project. Run the following command to create a new app.

$ python manage.py startapp sandy

The meaning sandy here is the name of the application that we will create, you can adjust this according to your needs.

**6. Edit settings.py**
Open your favourite text editor to edit this file, you can open the project directory and klick settings.py file. Make sure your file is contains like this.

from pathlib import Path
import os

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sandy (app_name)',
]

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root/')
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root/')

STATICFILES_DIRS= [BASE_DIR / "static",]

**7. Edit urls.py**
After that, open urls.py file in project directory. Make sure your file is contains 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('', include('sandy.urls')),
]

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

**note:** You have to pay attention when writing the app name, here I use the name sandy.

**Chapter 2 : App Modification**
-
**1. Edit models.py**
Here, we want to make sure about the content in our website is possible to modified by django. Maybe we can modified the image, text, etc. In app directory, open models.py file and make sure your file is contains like this.

from django.db import models

# Create your models here.
  
class Home(models.Model):
    first_name = models.CharField(max_length=50, default='')
    last_name = models.CharField(max_length=50, default='')
    heading = models.CharField(max_length=50, default='')
    description = models.TextField(blank=False, default='')
    updated = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.first_name
    
class Service(models.Model):
    networking = models.TextField(blank=False)
    sysadmin = models.TextField(blank=False)
    server_infrastructure = models.TextField(blank=False)
    updated = models.DateTimeField(auto_now=True)

class Portfolio(models.Model):
    image_1 = models.ImageField(upload_to='portfolio/')
    image_2 = models.ImageField(upload_to='portfolio/', default='')
    image_3 = models.ImageField(upload_to='portfolio/', default='')
    project_1 = models.CharField(max_length=50, default='')
    project_2 = models.CharField(max_length=50, default='')
    project_3 = models.CharField(max_length=50, default='')
    description_1 = models.TextField(blank=False, default='')
    description_2 = models.TextField(blank=False, default='')
    description_3 = models.TextField(blank=False, default='')
    updated = models.DateTimeField(auto_now=True)
    
class Education(models.Model):
    institution_1 = models.CharField(max_length=50)
    major_1 = models.TextField(max_length=60)
    start_1 = models.CharField(max_length=10, default='')
    end_1 = models.CharField(max_length=10, default='')
    institution_2 = models.CharField(max_length=50, default='')
    major_2 = models.TextField(max_length=60, default='')
    start_2 = models.CharField(max_length=10, default='')
    end_2 = models.CharField(max_length=10, default='')
    skills_desc = models.TextField(blank=False, default='')
    updated = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.institution_1

The configuration above allows us to connect application content to the database. After that we have to install pillow package for image database and then we have to migrate our model to database.

$ pip install pillow
$ python manage.py makemigrations
$ python manage.py migrate

For accessing django admin, you have to create a super user.

$ python manage.py createsuperuser

You can following wizard, and access to http://YOUR_LOCAL_ADDRESS:8000/admin

**2. Edit admin.py**
After we determine the database model that the website will use. We'll register our model to admin page, so that we can update dan delete (CRUD) the data in database. Open models.py file and make sure your file is contains like this.

from django.contrib import admin
from .models import Home, Service, Portfolio, Education
# Register your models here.

admin.site.register(Home)

admin.site.register(Service)

admin.site.register(Portfolio)

admin.site.register(Education)

**3. Edit views.py**
After we determine the database model that the website will use, then we direct it to which template will be displayed with the files in the database. Open views.py file and make sure your file is contains like this.

from django.shortcuts import render
from .models import Home, Service, Portfolio, Education

# Create your views here.
def index(request):
    home = Home.objects.latest('updated')
    service = Service.objects.latest('updated')
    portfolio = Portfolio.objects.latest('updated')
    education = Education.objects.latest('updated')
    
    context = { 'home': home, 'service': service, 'portfolio': portfolio, 'education': education }

    return render(request, 'index.html', context)

**4. Create a template**
Next step, we have to create a new directory named "templates", and inside that directory there's a template file with html format.

$ mkdir templates && cd templates
$ touch index.html

For content of index.html you can see [my source code](https://github.com/sandyxd18/Django-Web-Portfolio) or you can make it yourself using references on the internet.

**5. Create and edit urls.py**
Run the following command inside app project to make a new file.

$ touch urls.py

Open urls.py file and make sure your file is contains like this.

from django.urls import path
from . import views

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

**6. Create a Static Directory**
The Static directory functions for supporting files such as images, CSS, and also JavaScript files. To determine static files, you can follow my source code or you can make it yourself. Make sure you are in the main directory, not in the app directory or project directory.

$ mkdir static
$ touch static/images static/js static/css

**Chapter 3 : Run the Website**
-
**1. Run on local computer**
To run a website on a local computer, you can simply run the following command.

$ python manage.py runserver YOUR_LOCAL_ADDRESS:8000

Basically, django server run on 8000 port, but you can customize that port.

**2. Run in Docker Environment**
To run a website in Docker Environment, you have to make a list package. To make that list file, you can run the following command.

$ pip freeze > requirements.txt

After that, you have to create a Dockerfile.

$ touch Dockerfile

Make sure your file is contains like this.

FROM python:3.10.12-slim

WORKDIR /app

COPY requirements.txt requirements.txt

RUN pip3 install -r requirements.txt

COPY . .

CMD [ "python3", "manage.py", "runserver", "0.0.0.0:8000"]

Build and run the image from Dockerfile by the following command.

$ docker build -t image-name .
$ docker run -d -p 8000:8000 --restart always --name web-porto porto-img