Blog con Django en 5 sencillos pasos.

Publicado el 17/04/2023 12:04:00 en Programación Web.
Author: [x][x] M20191 | Total de votos: 5   Vote



Temario
- Entender MVT
- Instalación
- Configuraciones iniciales
- Crear modelos
- Crear vistas/urls/templates

MVT Django


El patrón MVT (Modelo-Vista-Template) es un patrón de diseño que se utiliza en el framework web de Django para separar las responsabilidades en una aplicación web.

El modelo representa los datos y las reglas de negocio de la aplicación. Es decir, es la capa encargada de la interacción con la base de datos y de realizar validaciones en los datos ingresados por el usuario.

La vista es la capa que se encarga de procesar la petición del usuario y de devolver una respuesta adecuada. Aquí es donde se realiza la lógica de negocio de la aplicación. Por ejemplo, si el usuario solicita una página web, la vista se encarga de generar la respuesta HTML adecuada.

Por último, el template es la capa encargada de la presentación de los datos al usuario. Es decir, aquí es donde se define cómo se verán los datos en la página web. Django utiliza el lenguaje de plantillas para definir los templates.

En resumen, el patrón MVT de Django nos ayuda a estructurar nuestra aplicación de forma clara y ordenada, separando las responsabilidades en distintas capas para facilitar el desarrollo y el mantenimiento de nuestra aplicación.

Instalación


Creamos entorno virtual


python -m venv .env

De esta manera nos aseguramos que los paquetes estén aislados entre sí.

Descargamos django


Activamos entorno virtual
cd .env
cd Scripts
activate
pip install django

Si se presenta algun error puedes hacer un ls y ejecutar un script de activación diferente correspondiente a tu terminal.

Creamos un proyecto


django-admin startproject core .

core es la nomenclatura correcta que se le debe dar al archivo raíz de configuración en nuestro proyecto, el "." al final es para crearlo en el directorio actual.

Creamos app


py manage.py startapp blog


NOTA: Debemos registrar la app dentro de core/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'blog' # Registramos la app
]


Configuraciones iniciales


Manejo de imágenes
Al final de core/settings.py debemos implementar las siguientes líneas de código

STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

NOTA: Debemos haber importando os, y tener las carpetas "media" y "static" creadas en el directorio raíz (afuera del core)

Creamos los modelos


Nos dirigimos al archivo (blog/models.py).

El archivo debe verse así:
from django.db import models
# Create your models here.

Debemos crear el modelo de Post, y de las imágenes del Post

Quedaría algo como:
from django.db import models
# Create your models here.
from django.db import models
# Create your models here.
class Post(models.Model):
    titulo = models.CharField("Titulo Post", max_length=50)
    contenido = models.TextField("Contenido")
    created_at = models.DateTimeField(auto_now_add=True) 
    images = models.ManyToManyField('PostImages')
    
    def __str__(self):
        return self.titulo

class PostImages(models.Model):
    image = models.ImageField(upload_to='media/imagenes', verbose_name='Imagenes')
    description = models.CharField(max_length=100, blank=True, verbose_name='Descripción')

Te explico brevemente:
- CharField -> Campo de texto corto (input text)
- TextField -> Campo de texto largo (textarea)
- DateTimeField -> Campo de fecha y tiempo
- ManyToManyField -> Establece una relacion con las imagenes a subir


Migrando modelos a la DB


Django por defecto nos ofrece un ORM predeterminado y una base de datos Sqlite3
Para migrar nuestras tablas y columnas a la base datos debemos realizar los siguientes comandos:
py manage.py makemigrations
py manage.py migrate

NOTA: Si utilizamos imagenes debemos tener instalado Pillow en nuestros entorno virtual pip install Pillow

Registramos el modelo en el admin


En blog/admin.py debemos registrar nuestro modelo, para eso lo importamos y escribimos admin.site.register(MiModelo)
from django.contrib import admin
from .models import Post
# Register your models here.
admin.site.register(Post)
admin.site.register(PostImages)


Creamos un super usuario


py manage.py createsuperuser

De esta manera creamos el super usuario para acceder al /admin

Iniciamos la app


py manage.py runserver


Interfaz admin



Adentro del admin puedes jugar con lo que quieras... suerte!

Crear vistas/urls


Bueno, ya tenemos la forma de crear/modificar/eliminar dentro del admin en un entorno totalmente seguro.
Ahora es el turno de cargar las vistas y los templates.

Vistas


Usaremos BCV es decir Vistas Basadas en Clases (Por sus siglas en ingles), ya que nos ahorra mucho código y es mucho más facil de manejar a futuro.

En el archivo blog/views.py creamos las vistas encargadas
from django.views.generic import ListView, DetailView
from .models import Post

# Vista encargada de listar los articulos
class BlogListView(ListView):
    template_name = 'blog/blog_list.html'
    model = Post

# Vista encargada del detalle del articulo
class BlogDetailView(DetailView):
    template_name = 'blog/blog_detail.html'
    model = Post


Url


Configurar urls, para esto django nos facilita la posibilidad de escribir paths los cuales son literalmente los paths que se van a ver.

En core/urls.py debemos incluir las urls de blog/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

# Incluimos que todas las urls que tengan blog/algo sean del urls.py de blogs
urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/',include('blog.urls',namespace='blog')) # Incluimos aquí
]

# Nos asegura que las imágenes carguen
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)


En blog/urls.py debemos escribir las urls con sus respectivas funciones de vista
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from .views import BlogDetailView, BlogListView

app_name = 'blog'

urlpatterns = [
    path('', BlogListView.as_view(), name='blog-list'), # Path para listar
    path('detail/<int:pk>', BlogDetailView.as_view(), name='blog-detail') # Path del detalle
]

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



Templates


No mencione anteriormente pero en core/settings.py debemos implementar esta porción de código adentro de la variable TEMPLATE
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')] # Esto de acá

... (Sigue mucho codigo)


Los templates deben ir en una carpeta nombrada templates en el directorio raíz.
Para mejor orden en mi caso puse los templates en:
- templates/blog/list_view.html
- templates/blog/detail_view.html

Contenido de los templates


ListView
<h1>Articles</h1>
<ul>
    {% for article in object_list %}
    <li><a href="{% url 'blog:blog-detail' article.id %}">{{ article.titulo }}</a> </li>
    {% empty %}
    <li>No articles yet.</li>
    {% endfor %}
</ul>

https://docs.djangoproject.com/en/4.1/ref/class-based-views/generic-display/#listview

Detail View
<span>{{created_at}}</span>
<h1>{{ object.titulo }}</h1>
<p>{{ object.contenido }}</p>

<h2>Imágenes</h2>
{% if post.images.all %}
    {% for image in post.images.all %}
        <img src="{{ image.image.url }}" alt="{{ image.description }}" class="img-fluid">
    {% if image.description %}
        <p>{{ image.description }}</p>
{% endif %}

{% endfor %}
{% else %}
    <p>No hay imágenes asociadas a este post.</p>
{% endif %}

https://docs.djangoproject.com/en/4.1/ref/class-based-views/generic-display/#detailview

Fin


Así de fácil puedes crear un blog simple con Django 4.1, si no entendiste nada pero te has motivado a seguir aprendiendo toma las riendas y hazlo, no te vas a arrepentir nunca!

Hasta luego!

Comments:


[x]
[x][x] n4ch0m4n (1 m) : muy bueno che! me recuerda a Pelican (python también, luego chusmealo, es un generador de sitios estaticos, sin DB`s ni nada)


[x]
[x][x] MuldeR (1 m) : Está bueno, es impresionante lo fácil que resulta. Pero me quedé con ganas de usar ver algunas screens más, cómo del del blog funcionando y los files.


[x]
[x][x] gbrlz (1 m) : Me gustó este post! Django y MVT los sacaba de nombre xD... En lo personal, veo que MVT es una buena elección para aplicaciones web simples y rápidas, es fácil de implenentar y entender, mas que el MVC aunque MVC para aplicaciones mas grandes podría ser una mejor opción ya que es mas clara la separacion de componentes y tiene mayor flexibilidad con las interacciones del usuario y al actualizar el model y la view. Los dos son utiles dependiendo de los contextos y situaciones, como todo en esta life....


[x]
[x][x] hielasangre (1 m) : cheto :D
<a href=jav%26%23x61%3bscript:alert()>


[x]
[x][x] M20191 (30 d) : XD hielasangre lo hizo otra vez