Django: creación de un sitio web de varias páginas

Django es un marco de código abierto basado en Python que se utiliza para el desarrollo web. Django permite el uso del patrón arquitectónico MTV (Model-Templates-View) para la creación y despliegue de un sitio web funcional. 

Este artículo tiene como objetivo crear un sitio web de perfil personal de varias páginas utilizando Django para explicar todos los conceptos y aspectos principales del marco de trabajo de Django. 

Nota: Los códigos HTML y CSS del siguiente artículo son rudimentarios.

Implementación:

Comience creando un nuevo proyecto en cualquier IDE que admita Python.

• Abra la terminal y comience instalando Django con el siguiente comando:

pip install django

•  Cree un proyecto Django (Llamémoslo perfil ) con el siguiente comando:

django-admin startproject Profile

• Una vez que el proyecto se haya creado por completo, navegue hasta el archivo del proyecto:

cd Profile

• Cree una aplicación (llamémosla base) dentro del proyecto (esto es útil para sitios web grandes de múltiples aspectos):

django-admin startapp base

Navegue hasta el archivo settings.py en el directorio profile/profile y busque un nombre de lista INSTALLED_APPS 

• Agregue el siguiente elemento al final de la lista: (Esto es necesario para que el proyecto sea la aplicación base para vincularse al proyecto Perfil)

'base.apps.BaseConfig',

Desplácese hacia abajo hasta una lista llamada TEMPLATED en el archivo settings.py

• Agregue el siguiente elemento a la lista ‘DIRS’: (Esto es necesario para agregar el código HTML)

BASE_DIR / 'templates',

Desplácese hacia abajo y encontrará una variable llamada STATIC_URL.

• Agregue la siguiente lista en la línea después de la variable STATIC_URL

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

Así es como debería verse tu settings.py :

"""
Django settings for Profile project.
  
Generated by 'django-admin startproject' using Django 4.0.2.
  
For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/
  
For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""
  
from pathlib import Path
  
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
  
  
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/
  
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-%y9#-d_f74fdq6t6qal(51b4-j1v7f)g+c&7cb1g_wuz_94xq%'
  
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
  
ALLOWED_HOSTS = []
  
  
# Application definition
  
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'base.apps.BaseConfig',
]
  
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
  
ROOT_URLCONF = 'Profile.urls'
  
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates',
        ],
        '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',
            ],
        },
    },
]
  
WSGI_APPLICATION = 'Profile.wsgi.application'
  
  
# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
  
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}
  
  
# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators
  
AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]
  
  
# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/
  
LANGUAGE_CODE = 'en-us'
  
TIME_ZONE = 'UTC'
  
USE_I18N = True
  
USE_TZ = True
  
  
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
  
STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static'
]
  
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
  
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

Ahora, navegue hasta el archivo urls.py en el directorio Perfil/Perfil.

• Importe una función adicional al archivo:

from django.urls import include

• Agregue un elemento adicional a la lista de patrones de URL :

path('', include('base.urls')),

Este es el aspecto que debería tener su archivo urls.py:

"""Profile URL Configuration
  
The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls import include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('base.urls')),
]

Ahora, navegue hasta el archivo views.py en el directorio Profile/base:

Aquí creamos las distintas páginas y asignamos los respectivos archivos HTML (que crearemos más adelante).

• Pegue el siguiente código en el archivo views.py :

from django.shortcuts import render
  
def home(request):
    return render(request, "home.html")
  
def projects(request):
    return render(request, "projects.html")
  
def contact(request):
    return render(request, "contact.html")

Cree un nuevo archivo llamado urls.py DENTRO DEL DIRECTORIO Profile\base

Este archivo crea direcciones URL a las respectivas direcciones web mencionadas en el archivo views.py

• Agregue el siguiente código al archivo base/urls.py :

from django.urls import path
from . import views
  
urlpatterns = [
    path("", views.home, name="home"),
    path("projects/", views.projects, name="projects"),
    path("contact/", views.contact, name="contact"),
]

Ahora, para el archivo estático (el archivo que contiene archivos e imágenes .css).

Cree un nuevo directorio en el archivo principal del proyecto de perfil llamado estático. El archivo estático debe estar en el mismo nivel jerárquico que el archivo manage.py.

Dentro de este archivo, cree 2 directorios más llamados estilos e Imágenes.

• Agregue un archivo style.css en el directorio de estilos y agregue el siguiente código al archivo style.css:

    navbar {
      width: 100%;
      margin:0px 0;
    }
        navbar ul{
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  
    navbar ul li{
      width: 33%;
      float: left;
    }
        navbar ul li a{
      text-decoration: none;
      color: rgb(0, 0, 0);
      text-align: center;
      padding: 20px 0;
      display: block;
      width: 100%;
      background-color: rgb(160, 236, 145);
    }
  
    navbar ul li a:hover {
      background-color: rgb(11, 221, 29);
    }
  
  .home{
    margin-right: 5%;
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 5px;
    padding-bottom: 15px;
    border-radius: 10px;
    box-shadow: 15px 15px 15px black;
    text-align: justify;
    color: white;
    background-image: linear-gradient(rgb(129, 196, 235), rgb(5, 44, 151));
  }
  
  .project-area {
  
    background-repeat: no-repeat;
    background-position: left;
    box-sizing: border-box;
  }
  
  .project-item {
    width: 75%;
    margin-top:5px;
    margin-bottom:15px;
    margin-left: 5%;
    margin-right: 5%;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 40px gray;
    text-align: justify;
    color: white;
    background-color: black;
  }
  
  #project {
    border-left: 15px solid;
    border-image: linear-gradient(purple, tomato);
    border-image-slice: 1;
  }
  
  
#contact .contact-item {
  background-color: aquamarine;
  float: left;
    width: 20%;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
    margin: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 15px 15px 15px black;
}

Agrega una imagen tuya al directorio Imágenes y cámbiale el nombre a ‘Profile_img’.

Para los archivos HTML, cree un nuevo directorio en el archivo de proyecto de perfil principal llamado plantillas. El archivo de plantillas debe estar en el mismo nivel jerárquico que el archivo manage.py.

• Cree un archivo llamado navbar.html para la barra de navegación y agréguele el siguiente código:

{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<navbar>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/projects">Projects</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
</navbar>
<hr>

Las dos primeras líneas del código anterior son necesarias para cargar el código CSS desde el directorio estático y para vincular el código del archivo CSS al archivo HTML.

• Cree un archivo llamado home.html y agréguele el siguiente código:

{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Home</title>
<section class="home">
        <center>
            <font size="6">
                  
<p>ABOUT ME </p>
  
            </font>
            <img src="{% static 'images/Profile_img.png' %}" width="200" height="200">
            <font size="4">
                  
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  
            </font>
        </center>
</section>

La primera línea del código anterior se usa para agregar directamente la barra de navegación a la página actual.

• Cree un archivo llamado projects.html y agréguele el siguiente código:

{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Projects</title>
        <section class="project-area">
            <center>
            <font size="6">
                  
<p>PROJECTS</p>
  
            </font>
                <div id="project" class="project-item">
                    <h2>PROJECT 1 NAME</h2>
                      
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Vestibulum dignissim, sapien et efficitur vulputate,
                         felis blandit metus, vitae eleifend nisl justo sed nunc.
                         Sed ut nunc malesuada, scelerisque mauris sed, hendrerit neque.
                         Morbi eget nisl non tellus posuere iaculis.
                         Nunc ut tincidunt est, a tempus tortor. Mauris lobortis felis elit,
                         quis euismod urna lacinia vitae. Morbi interdum diam in faucibus finibus.
                         Sed pellentesque sem a diam rhoncus, eu semper neque efficitur. </p>
  
                </div>
                <div id="project" class="project-item">
                    <h2>PROJECT 2 NAME </h2>
                      
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Vestibulum dignissim, sapien et efficitur vulputate,
                         felis blandit metus, vitae eleifend nisl justo sed nunc.
                         Sed ut nunc malesuada, scelerisque mauris sed, hendrerit neque.
                         Morbi eget nisl non tellus posuere iaculis.
                         Nunc ut tincidunt est, a tempus tortor. Mauris lobortis felis elit,
                         quis euismod urna lacinia vitae. Morbi interdum diam in faucibus finibus.
                         Sed pellentesque sem a diam rhoncus, eu semper neque efficitur. </p>
  
                </div>
            </div>
            </center>
        </section>

• Cree un archivo llamado contact.html y agréguele el siguiente código:

{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Contact</title>
  <section id="contact">
    <center>
      <font size="6">
            
<p>CONTACT INFO</p>
  
      </font>
        <div class="contact-item">
            <h1>Phone Number</h1>
            <h2>+xx-xxxxxxxxxx</h2>
          </div>
        </div>
        <div class="contact-item">
            <h1>Email</h1>
            <h2>xyz@example.com</h2>
          </div>
        </div>
        <div class="contact-item">
            <h1>Address</h1>
            <h2>City, State, Country</h2>
          </div>
        </div>
      </div>
    </div>
    </center>
  </section>

Ahora, para el paso final, abra una nueva terminal y ejecute los siguientes comandos:

cd profile
python manage.py runserver

Producción: