Administración de Modelos en Django: Configuración y Uso de Django Admin

Resumen

Explorar la funcionalidad del Django Admin es esencial para aprovechar al máximo el potencial de Django en la gestión de aplicaciones web.

¿Qué es el Django Admin?

Django Admin es una herramienta integrada en Django que permite administrar modelos y objetos a través de una interfaz web intuitiva y fácil de configurar.

¿Cómo accedemos al Django Admin?

Primero, asegúrate de que el proyecto de Django esté corriendo. Luego, accede a la URL “/admin”. Aparecerá una página de inicio de sesión con el título “Django Administration”.

¿Cómo creamos un superusuario?

Para acceder al admin, necesitas un superusuario. Detén el servidor y ejecuta el comando createsuperuser. Proporciona un nombre de usuario, correo electrónico y contraseña. Reinicia el servidor y usa estas credenciales para iniciar sesión en el admin.

¿Cómo registramos un modelo en el Django Admin?

Abre el archivo admin.py dentro de tu aplicación.
Crea una nueva clase que herede de admin.ModelAdmin.
Importa tu modelo con from .models import Product.
Registra el modelo usando admin.site.register(Product, ProductAdmin).

¿Cómo personalizamos la vista de lista en el Django Admin?

Puedes añadir campos a la lista de visualización usando list_display:

class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price')

Esto muestra los campos name y price en la lista de productos.

¿Cómo agregamos funcionalidad de búsqueda?

Añade el atributo search_fields en la clase del administrador:

class ProductAdmin(admin.ModelAdmin):
    search_fields = ('name',)

Esto permite buscar productos por nombre.

¿Cómo editamos y guardamos productos?

Desde la lista de productos, haz clic en un producto para abrir el formulario de edición. Realiza los cambios necesarios y selecciona una de las opciones de guardado.

¿Cómo añadimos imágenes a los productos?

Asegúrate de tener un campo de imagen en tu modelo.
Sube una imagen a través del formulario de edición.
Configura las URLs para servir archivos estáticos agregando la configuración en urls.py:

from django.conf.urls.static import static
from django.conf import settings

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

¿Cómo administramos múltiples productos?

Selecciona varios productos usando los checkboxes y aplica acciones en masa, como eliminar.

¿Cómo configuramos la visualización de imágenes en la lista de productos?

Configura las URLs de los archivos estáticos y media para que Django sepa dónde encontrarlas. Asegúrate de importar y utilizar correctamente static y settings en tu archivo urls.py.

¿Cómo agregamos un nuevo campo al modelo?

Para agregar un nuevo campo, como la fecha de creación, modifica el modelo y actualiza la clase del administrador para mostrarlo en la lista:

class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price', 'created_at')

Enrique Alejandro Terrazas Huamaní

student•

Gente para limitar el tamaño de la imagen utilizando TailwindCSS solo hay que hacer un cambio en el archivo list_product.html.

En el atributo class dentro de la etiqueta img cambiar la palabrita "full" por "64" y listo.

Michael Aguillón

student•

Excelente aporte mi brother

Ernesto Torres Pineda

student•

excelente !! gracias

Juan Rendon

student•

En mi caso la carga de la imagen funcionó muy bien desde la pagina de administración de Django. Pero desde el formulario que se creo para la aplicación no cargaba.

Para solucionarlo agregue el atributo enctype="multipart/form-data" a el tag form en el archivo add_product.html.

{% extends "base.html" %}

{% block content %}
<h1 class="text-3xl font-bold underline">Agregar Producto</h2>


<form action="{% url "add_product" %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{form.as_p}}
    <button type="submit">Agregar</button>
</fom>
{% endblock content %}
```{% extends "base.html" %}



{% block content %}

\<h1 class="text-3xl font-bold underline">Agregar Producto\</h2>





\<form action="{% url "add\_product" %}" method="post" enctype="multipart/form-data">

&#x20;   {% csrf\_token %}

&#x20;   {{form.as\_p}}

&#x20;   \<button type="submit">Agregar\</button>

\</fom>

{% endblock content %}

Christian Kevin Rojas Rojas

student•

Para los que no les sale la imagen, probablemente tengan el error de poner el static en el url de la aplicacion (products.urls), no debería ser ahí, la función static debe ir en el url del proyecto (coffee_shop.urls)

jesus manuel vergara arias

student•

esta quedando muy bien:

Carlos Palacios

student•

Personalmente no me gusto este metodo de obtener imagenes, ya que altera el historico de GIT y eso puede llegar a ser molesto en un entorno productivo, en local no afectara tanto, pero siento que hace falta saber como al momento de cargar esas imagenes subirlo a otro sitio como un bucket S3 y poder cargar las imagenes por medio de urls

Frandy De La Cruz

student•

Entiendo que es asi porque el foco del curso no es hacerlo con otra tecnologia, ya esa implementación debes hacerla tu, con los conocimientos adquiridos aqui, pero es asi como dices...

Roger Carlos Ariel Alba

student•

Otra forma de hacer el registro en el admin es con un decorador:

from .models import Product @admin.register(Product) class ProductAdmin(admin.ModelAdmin): pass

Luis Martinez

teacher•

El uso de decoradores es algo mágico en Python, qué bueno que lo compartes. Acá puedes ver que otros decoradores tiene Django https://docs.djangoproject.com/en/5.0/topics/http/decorators/

Carlos Molina

student•

No pude hacer q funciona la carga de imagenes.. revise el video 1000 de veces y sigo igual

Ivan Castano - Perez

student•

Hola Carlos.

A mi me está funcionando correctamente para lo cual lo que tuve que hacer fue lo siguiente:

Ir al archivo settings .py y crear las variables MEDIA_URL y MEDIA_ROOT de la siguiente manera (Esto hace que todas las imágenes que se carguen se almacenen en la carpeta /media/) tu le puedes poner otro nombre si quieres: # Base url to serve media files ``MEDIA_URL = '/media/' ``# Path where media is stored ``MEDIA_ROOT = os.path.``join``(BASE_DIR, "media")
En el archivo models.py eliminé el campo de upload_to y lo dejé de la siguiente forma: photo = models.``ImageField``(``null``=True, ``blank``=True, ``verbose_name``="foto" ) Esto lo hice porque si dejaba el upload_to = "/logos", todas las fotos se iban a subir a /media/logos/ y pues no tengo necesidad de tener esta subcarpeta
Actualicé el URLs.py del proyecto (no el de la aplicación), según lo explicado por el profe en esta clase. Inicialmente cometí el error de realizar la actualización del URLs.py de la aplicación y tampoco me funcionaba, pero cuando me di cuenta del error y lo puse en el URL.py del proyecto (más lo que te comenté anteriormente) todo funcionó sin problema.

Josmer Hernández

student•

Hola Carlos, ha pasado algo de tiempo desde tu pregunta, pero apenas la veo.

Hay tres factores importantes que debes tomar en cuenta: - Tener instalado pillow en tu entorno. - Verificar las configuraciones de MEDIA_URL y MEDIA_ROOT como dice Ivan. - Agregar el " .url " a la etiqueta de variable en el template, ya que django guarda la ruta de donde se encuentra la imagen en la base de datos y ese " .url " traera la ruta correcta segun la configuracion ya sea que user almacenamiento local o algun CDN.

Ejemplo: <img src="{{ product.imagefile.url }}" alt="{{product.title}}">

Saludos.

Janice Naydelin Flores Garcia

student•

Luis Martinez

teacher•

Buen progreso! ya los estilos se ven muy cool!

Kevin Coronado

student•

Así quedó mi projecto al finalizar la clase, saludos.

Luis Martinez

teacher•

Qué buenas imagénes. Qué tal si te animas a poner un filtro? Creo que con las clases que llevas ya serias capaz.

Andres Ricardo Martinez Diaz

student•

Así va quedando mi página de cafetería, lo ajuste para que fuera responsive, fue muy facil solo colocar al contenedor los estilos para que cambie segun el tipo de pantalla

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-stretch">

Miguel Angel Reyes Moreno

student•

Reto sencillo:

en models.py


import djangofrom django.db import models

class Product(models.Model):    name = models.TextField(max\_length=200, verbose\_name="nombre")    description = models.TextField(max\_length=300, verbose\_name="descripción")    price = models.DecimalField(max\_digits=10, decimal\_places=2, verbose\_name="precio")    available = models.BooleanField(default=True, verbose\_name="disponible")    photo = models.ImageField(        upload\_to="logos", null=True, blank=True, verbose\_name="foto"    )    created\_at = models.DateField(verbose\_name="fecha\_creación", default=django.utils.timezone.now)
&#x20;   def \_\_str\_\_(self):        return self.name

y en admin.py:


from django.contrib import adminfrom .models import Product

class ProductAdmin(admin.ModelAdmin):    model = Product    list\_display = \['name', 'price', 'created\_at']    search\_fields = \['name']

admin.site.register(Product, ProductAdmin)

Andres Montes

student•

reto de la claseclass Product(models.Model): name = models.TextField(max_length=200, verbose_name="nombre") description = models.TextField(max_length=300, verbose_name="descripcion") price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="precio", default=0) available = models.BooleanField(default=True, verbose_name='disponible') photo = models.ImageField(upload_to='logos', null=True, blank=True, verbose_name='foto') created_at = models.DateField(auto_now_add=True)```python class Product(models.Model): name = models.TextField(max_length=200, verbose_name="nombre") description = models.TextField(max_length=300, verbose_name="descripcion") price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="precio", default=0) available = models.BooleanField(default=True, verbose_name='disponible') photo = models.ImageField(upload_to='logos', null=True, blank=True, verbose_name='foto') created_at = models.DateField(auto_now_add=True)




```python
@admin.register(Product)
class admin_product(admin.ModelAdmin):
    list_display = ('name', 'price', 'created_at')
    search_fields = ('name', 'created_at')
    list_filter = ['created_at']
```@admin.register(Product)class admin\_product(admin.ModelAdmin):    list\_display = ('name', 'price', 'created\_at')    search\_fields = ('name', 'created\_at')    list\_filter = \['created\_at']

Julio Bastidas

student•

que diferencia tiene registrarlo de la forma explicada en la clase, a registrar solo el modelo de la siguiente forma?

admin.site.register(Product)

Melvin Canté

student•

Me parece que de la forma que se explica en el video hay más opciones de personalizar el Admin o la vista para visualizar la información en la web del Admin.

Luis Martinez

teacher•

Son dos maneras de hacerlo, con ambas puedes lograr lo mismo.

Prefiero hacerlo así para tener todos los registros de todos los modelos en la parte de abajo.

Pero acá es una cuestión de gustos.

Christian Velázquez

student•

Recuerden esto: En "/static", pueden subir sus archivos estáticos (imágenes para su Landing Page....). En "/media", para archivos dinámicos que subirán sus usuarios o desde admin.

Joel Pulla

student•

reto cumplido, ademas agregue una atributo de imagen por url en el caso de no tiene del producto si en el caso de que no hay la foto local muestra una url

Adrián Ramos Medina

student•

En mi caso particular, para conseguir que las tarjetas tuvieran un tamaño adecuado, cree un grid. Simplemente crea lo siguiente:

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"> Contenido copiado de hyperui.dev

</div>

javier nicolas nieto

student•

Luis Kennedy Saavedra Fuentes

student•

Comparto mi admin, tomando en cuenta el decorador para registrar la app en el admin, entonces colocamos solo el decorador arriba de la clase admin de cada modelo."""Products admin.""" # Djangofrom django.contrib import admin # Modelsfrom products.models import Product # Register your models here.

@admin.register(Product) # Decorador para no utlizar admin.site.register(Product, ProductAdmin)class ProductAdmin(admin.ModelAdmin): """Product admin class.""" list_display = ('name', 'description', 'available',) # Para el Listado de products list_filter = ('description', 'available',) # Filtrar con un panel desde el lado derecho search_fields = ('name', 'description', 'price',) # Filtra con un buscador readonly_fields = ('created_at',) # Muestra un campo y no lo permite editar list_editable = ('available',) # Permite editar el campo desde el listado, debe estar en lista_diplay y no debe ser FK ordering = ('description', 'name') # Ordena el listado list_per_page = 5 # Paginación en el listado date_hierarchy = ('created_at') # Muestra una busqueda por fecha desde listado

Y agregue otros campos al admin para personalizacion del django-admin:

"""Products admin."""

# Django
from django.contrib import admin

# Models
from products.models import Product

# Register your models here.


@admin.register(Product) # Decorador para no utlizar admin.site.register(Product, ProductAdmin)
class ProductAdmin(admin.ModelAdmin):
    """Product admin class."""
    list_display = ('name', 'description', 'available',) # Para el Listado de products 
    list_filter = ('description', 'available',) # Filtrar con un panel desde el lado derecho
    search_fields = ('name', 'description', 'price',) # Filtra con un buscador
    readonly_fields = ('created_at',) # Muestra un campo y no lo permite editar
    list_editable = ('available',) # Permite editar el campo desde el listado, debe estar en lista_diplay y no debe ser FK
    ordering = ('description', 'name') # Ordena el listado
    list_per_page = 5 # Paginación en el listado
    date_hierarchy = ('created_at') # Muestra una busqueda por fecha desde listado

Michael Aguillón

student•

Agregar campo de fecha y hora para cada registro, el campo no se llenará en el formulario, la fecha y hora se asignarán automaticamente una vez creado el producto

date = <u>models</u>.<u>DateTimeField</u>(auto_now_add=True, null=True, blank=True, verbose_name='Fecha de Creación')

Procedemos ha hacer la migraciones y a probar, si ya tenía registros, va que la fecha y hora en la que hiciste las migraciones

Michael Aguillón

student•

date = <u>models</u>.<u>DateTimeField</u>(auto_now_add=True, null=True, blank=True, verbose_name='Fecha de Creación')

Juan Camilo Jaramillo Tascón

student•

Profe una pregunta, por qué me aparece tan grande mis resultados? Cómo puedo hacer para dejarlo con el tamaño que aparece en su ejemplo?

Ragknos Demian Fernandez Agraz Rodriguez

student•

Es fácil hacer las imágenes más pequeñas, solo tienes que usar estilos css para adaptar el tamaño.