Proyecto

Backend con Python > Sesión 01 > Reto 3

Agregar la página de servicios a la aplicación web

OBJETIVOS

• Agregar páginas ya maquetadas por medio de las plantillas con Django.
• Configurar y agregar los archivos estáticos en una aplicación web con Django.
• Contar con la página de perfil de usuario del proyecto Bedutravels disponible con Django.

REQUISITOS

1. Actualizar repositorio

2. Usar la carpeta de trabajo Sesion-03/Proyecto/Bedutravels/

3. Activar el entorno

4. Página de servicios maquetada del proyecto

   

DESARROLLO

1. Ejecutar el proyecto Banco con:

   python3 manage.py runserver   

   ---

2. Haciendo uso de las plantillas de Django integrar la página de inicio maquetada que se encuentra en public_html/servicios.html.

   Crear las carpetas Banco/servicios/templates/servicios :

   $ mkdir servicios/templates
   $ mkdir servicios/templates/servicios

   Copiar el archivo public_html/servicios.html dentro de la carpeta Banco/servicios/templates/servicios/:

   cp ../../public_html/servicios.html servicios/templates/servicios

   Modificar la función index() en el archivo servicios/views.py para hacer uso de las plantillas (templates)

   from django.shortcuts import render
   
   # Create your views here.
   def index(request):
       """ Vista para atender la petición de la url / """
       return render(request, "tarjeta/index.html")

   Por omisión, Django busca los archivos html en la carpeta proyecto/aplicacion/templates/aplicacion/

   El resultado en el navegador debería de ser el siguiente:

   

   Hasta aquí ya podemos ver el html, pero ¿y los estilos y las imágenes?

   Como son archivos estáticos aún no hemos autorizado a que se puedan ver, así que continuemos.

   ---

3. Agregando acceso a los archivos estáticos (ruta y vista)

   Crear la carpeta Banco/servicios/static/servicios/:

   mkdir servicios/static
   mkdir servicios/static/servicios

   Copiar las carpetas de los archivos estáticos (css y img):

   Finalmente hay que modificar la ruta en el archivo servicios.html para que usen el sistema de Django

   Todas las url relativas o absolutas ahora tienen que ser absolutas e iniciar con /static/servicios/, un ejemplos se muestra a continuación:

   <!-- Animate.css -->
   <link rel="stylesheet" href="/static/servicios/css/index.css">

   Remplazar todas las coincidencias.

   Actualizar el navegador y entonces se debería de ver la página mostrada al inicio

   Si no funciona:

   • Recargar la página forzado actualizar el cache del navegador con Control+Shift+R.
   • En la ventana donde se está ejecutando el proyecto, deternlo y volver a iniciarlo.
   • Usar una ventana de incógnito.
   • Pedir ayuda a un experto (que no lo vas a encontrar en clase!)

   Si si funciona entonces:

   • Misión cumplida!