Este es un proyecto práctico básico del Framework de Python Django, en el que crearemos un portafolio básico, que sea fácil de actualizar.
Requerimientos
Para poder desarrollar la aplicación de forma cómoda es recomendable saber lo siguiente:
- Python 3, Es necesario conocer las bases de Python 3 como las variables, funciones, clases y demás conceptos esenciales del lenguaje.
Adicionalmente a esto tambien es recomendable conocer lo siguiente, aunque no es necesario para el ejemplo:
- virtualenv, este es un paquete de python que te permite crear entornos virtuales. en este ejemplo se usa este paquete, pero otros modulos alternativos son pipenv, virtualenvwrapper, conda, etc.
creación de entorno virtual con virtualenv
Primero, creemos nuestra carpeta que contendrá todo el proyecto:
mkdir django-portafolio-simple
ubiquemos la consola en nuestra nueva carpeta:
cd django-portfolio-simple
Luego creemos nuestro entorno virtual con virtualenv, sino lo tienes instalado puedes instalarlo con el comando:
pip install virtualenv
Luego de instalarse, podras ejecutar el comando de virtualenv que te permitirá crear tu entorno virtual:
python -m virtualenv venv
otra forma de ejecutar el comando anterior es de la siguiente forma:
virtualenv venv
para activar el entorno virtual:
Si estas en Windows
activate
si estas en Linux o Mac:
. ./venv/bin/activate
Luego ya podemos instalar Django:
pip install django
Y podemos iniciar nuestro editor de código, en mi caso usaré Visual Studio Code:
code .
Incialicemos un proyecto de Django:
django-admin startproject django-portfolio .
Y finalmente ejecutemos el servidor de Django.
python manage.py runserver
Ahora ya puedes visitar el http://localhost:8000 y ver tu proyecto.
creando apps
esta aplicacion de django estará conformada por 2 apps principalmente, una para el blog y otra para el frontend de nuestro portafolio a la cual llamaremos portfolio.
Para poder crear estas apps, podemos usar el comando startapp de manage.py:
python manage.py startapp blog
python manage.py startapp portfolio
Actualiza Settings.py
Una vez creada tus aplicacioens añadelas a la configuración de tu proyecto, a traves del archivo settings.py
django_portfolio/settings.py
INSTALLED_APPS = [
...
'blog',
'portfolio',
]
Modelo de Proyectos
Un portafolio consta de proyectos, pero no lo vamos a hardcodear, es decir no escribiremos la informacion en código sino que vendra desde una base de datos.
En django la base de datos que viene por defecto es una base de datos SQL bastante ligera, llamada SQLite, no hace falta instalar nada, se crea de forma automatica la primera vez que ejecutamos el servidor de django con el comando python manage.py runserver
ve a portoflio/models.py y actualizalo con lo siguiente:
from django.db import models
from django.db.models.fields import CharField, URLField
from django.db.models.fields.files import ImageField
class Project(models.Model):
title = CharField(max_length=100)
description = CharField(max_length=250)
image = ImageField(upload_to='portfolio/images/')
url = URLField(blank=True)
pip instal pillow
Realiza las migraciones
Una vez este creado el modelo anterior del portafolio veras un mensaje en rojo que menciona algo como esto:
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.
lo que basicamente nos esta diciendo es que debemos realizar algunas migraciones:
python manage.py migrate
pero no todas, si ejecutas esto, veras una mas:
python manage.py makemigrations
vuelve a ejecutar migrate:
python manage.py migrate
esto creara una carpeta con el nombre migrate, no cambias el codigo de esta carpeta manualmente o podrias tener muchos errores.
Admin Dashboard
/admin
python manage.py createsuperuser
para cambiar la contraseña:
python manage.py changepassword
Portafolio de Administrador
Hasta este momento ya hemos creado un modelo, pero ¿como creamos datos para ese modelo?. La respuesta esta en el panel de administrador que trae incluido Django.
para visitar el panel del administrador ve a la siguiente direccion: http://127.0.0.1:8000/admin/
Y veras un login, sin embargo no podras entrar a menos que crees un usuario con el siguiente comando:
python manage.py createsuperuser
Una vez creado el usuario, ya puedes entrar. pero a pesar de esto no podras ver la forma de añadir la informacion de tus proyectos. la razón es que falta decirle a django que use el modelo que acabamos de añadir. para actualizarlo tenemos que actualizar un archivo.
Primero ve al archivo porfolio/admin.py y añade lo siguiente:
from django.contrib import admin
from .models import Project
admin.site.register(Project)
Guarda los cambios, y despues refresca el panel de administrador en http://localhost:8000/admin, y podras ver una nueva opcion para añadir proyectos, llamada Projects.
añade unos cuantos proyectos de ejemplo.
Media root
Si hemos guardado unos cuantos proyectos usando el modelo Projects notaremos que en cuanto a las imágenes no podemos verals, esto es así debido a que no le hemos dicho a django en donde estaran almacenadas las imagenes o los archivos media.
Para poder hacerlo vamos al archivo django_portfolio/settings.py y añadamos esto despues de STATIC_URL = "/static/"
MEDIA_ROOT = BASE_DIR / "media"
esto hará que cada vez que seleccionemos una imagen desde la interfaz y guardemos, esta será subida a una carpeta llamada media en la raiz del proyecto.
Ahora si subimos una imagen para un proyecto, puedes notar que estas estaran en una carpeta media/portfolio/images.
Aunque aun no hemos terminado, porque si vas en la interfaz admin e intentas vistar una url de imagen, notarás que no esta disponible.
porque lo que tenemos que hacer es permitir a Django servir archivos estáticos.
Archivos Estaticos
Los archivos estáticos son todos esos archivos que no necesitan de una logica previa para ser servidor, es decir no son archivos dinámicos, solo necesitan estar en una carpeta, y cuando una aplicación cliente como el navegador la solicita, simplemente el servidor de Django lo devuelve sin más. es decir estos archivos estáticos son archivos publicos que cualquier aplicacion las puede pedir simplemente a través de una URL.
Para configurar los archivos estáticos en Django ve al archivo django_portfolio/settings.py, y antes de la configuracion MEDIA_ROOT = BASE_DIR / "media" añade lo siguiente:
MEDIA_URL = "/public/"
esa sección quedaría mas o menos así:
STATIC_URL = "/static/"
MEDIA_URL = "/public/"
MEDIA_ROOT = BASE_DIR / "media"
luego en django_portoflio/urls.py, cambia a esto:
from django.contrib import admin
from django.urls import path
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
ahora si visitas los mismos enlaces, podrás ver finalmente las imágenes desde el naveagador.
Templates
el panel de administrador esta bien para nosotros que somos los dueños del portafolio, pero para las personas que visiten nuestro sitio deben ver una interfaz, asi que añadamos unas vistas a nuestro proyecto.
Añadamos la vista Home.
ve a portfolio/views.py, y añade lo siguiente:
from django.shortcuts import render
from .models import Project
def home(request):
projects = Project.objects.all()
return render(request, "home.html", {"projects": projects})
ahora en portfolio/templates/home.html:
<h1>portfolio</h1>
{% for project in projects %}
<h2>{{ project.title }}</h2>
<p>{{ project.description }}</p>
<img src="{{project.image.url }}" height="100" />
{% if project.url %}
<a href="{{project.url}}">Link</a>
{% endif %} {% endfor %}
y en django_portfolio/urls:
...
from portfolio import views
urlpatterns = [
...
path('', views.home)
]
...
Actualizando urls
colocar todas las urls en settings.py funciona, pero en un proyecto grande puede que sea muy tedioso colocar todas las urls en este archivo. asi que lo que nos permite hacer Django, es separar las urls por proyectos.
en la carpeta blogs/urls.py:
from django.urls import path
from . import views
ulrpatters = [
path('', views.renderPosts, name='posts'),
]
en blog/views.py
from django.shortcuts import render
def render_posts(request):
return render(request, 'posts.html')
y en blog/template/posts.html
<h1>Posts</h1>
en django_portfolio/urls:
...
from django.urls import path, include
...
urlpatterns = [
...
path("blog/", include("blog.urls")),
]
...
Modelo de las Publicaciones
blog/models.py
from django.db import models
import datetime
class Post(models.Model):
title = models.CharField(max_length=100)
description = models.TextField()
image = models.ImageField(upload_to="blog/images")
date = models.DateField(default=datetime.date.today)
blog/admin.py
from django.contrib import admin
from .models import Post
admin.site.register(Post)
blog/views.py
from django.shortcuts import render
from .models import Post
def render_posts(request):
posts = Post.objects.order_by('-date')[:2]
return render(request, "posts.html", {"posts": posts})
sqlite 3
sqlite viewer y sube tu base de datos, podras navegar entre tus tablas
puededs usar muchas otras bases de datos.
static files
en portfolio/static/porfolio añade imagenes y pdf
añade en home.html
{% load static %}
<img src="{% static 'portfolio/profile.jpg' %}" />
<a href="{% static 'portfolio/cv.pdf' %}">CV</a>
Pipes
- safe
- striptags
- date
- truncatechars
- upper