15.- Reubicación de todos los archivos de una aplicación dentro de la misma. Aplicación SERVICIOS.

En capítulos anteriores habíamos creado una aplicación nueva llamada servicios y en este tema, vamos a ubicar sus elementos correctamente. Esto es porque, por ejemplo, el "template" de servicios lo tenemos ubicado dentro de la aplicación Proyecto_web_app y esto no tiene mucho sentido, ya que el objetivo de crear una aplicación es poder utilizarla en el futuro y reescalarla. Si tenemos los archivos de esta aplicación en diferentes sitios esto no se puede hacer.

Por ello, vamos a empezar creando una nueva carpeta dentro del "Servicio" donde ubicar los templates. Lo suyo sería crear dentro de la aplicación "Servicios" una nueva llamada, lógicamente, "templates". Dentro de esta carpeta también conviene tener subcarpetas por si queremos más adelante  insertar más templates. Así en el directorio del Servicio creamos una nueva carpeta "templates", un subdirectorio llamado "Servicios" y movemos dentro el archivo "servicios.html" desde la carpeta en donde lo teníamos a esta nueva que hemos creado.

Se vería de la siguiente forma:

Al hacer esto acabamos de destrozar todas las URLs que apuntan a esta plantilla o template. Si vamos al navegador e intentamos entrar en la página de servicios no funcionaria. Para arreglarlo tenemos que hacer varias cosas. Empezaremos arreglando las vistas. Dentro de "Proyecto_web_app/views.py" es donde teníamos configuradas las vistas. Por tanto debemos llevarnos el código que define la vista de este template al views de la aplicación "Servicios" así como la línea de importación del modelo. Así que cortamos y pegamos y dejamos el archivos de vista de "Servicios" de la siguiente forma:

PracticaDjango/Servicios/views.py: 

from Servicios.models import Servicio
from django.shortcuts import render

# Create your views here.
def servicios(request):
    datos = Servicio.objects.all()
    # Anteriormente era:
    # return render(request, 'Proyecto_web_app/servicios.html', {'servicios': datos})
    # Pero al moverlo hay que cambiar el directorio que contiene a la plantilla.
    return render(request, 'Servicios/servicios.html', {'servicios': servicios})

Además tenemos que modificar el directorio donde se encuentra la plantilla de servicios que ahora esta en el directorio template de la aplicación 'Servicios' y aprovechamos también para cambiar el nombre del contexto que le pasamos a la plantilla para que sea más coherente.

Siguiente Paso. Debemos ir al archivo URLs de la aplicación "Proyecto_web_app". Si recordáis en este archivo tenemos la url apuntando al  path de servicios. Pero ahora esto ya no apunta aquí porque al cortar lo hemos quitado. Lo que debemos hacer es crear dentro de la App "Servicios" nuestro archivo "urls.py" y dentro de el ubicar este "path". 

Para situarnos un poco más. Este es el estado actual del archivo de vistas de la aplicación "Proyecto_web_app"

PracticaDjango/Proyecto_web_app/urls.py: 

from django.urls import path
# load views of these applications.
from Proyecto_web_app import views

urlpatterns = [
    path('', views.home, name='Home'),
    path('servicios/', views.servicios, name='Servicios'),
    path('tienda/', views.tienda, name='Tienda'),
    path('blog/', views.blog, name='Blog'),
    path('contacto/', views.contacto, name='Contacto'),
]

Lo que está en amarillo tenemos que borrarlo porque lo vamos a desplazar a la nueva ubicación.

Creamos dentro de la aplicación "Servicios" el archivo "urls.py" y lo dejamos de la siguiente forma:

PracticaDjango/Servicios/urls.py: 

from django.urls import path
# load views of these applications.
from . import views

app_name = 'Servicios'

urlpatterns = [
    path('', views.servicios, name='Servicios'),
]

El usar "from . import views' es porque estamos usando las views.py de los servicios y no de la aplicación principal. 

Ahora tenemos que ir al urls de la aplicación principal y registrar esta aplicación. Ahora mismo tenemos registrado lo siguiente:

PracticaDjango/PracticaDjango/urls.py: 

from django.contrib import admin
from django.urls import path, include
# Para registrar los archivos de las imagenes y poder verlas
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('Proyecto_web_app.urls')),
]
urlpatterns+=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Pero tenemos que registrar también la app Servicios para que se pueda ir a esa URL. El procedimiento es el mismo que con las otras rutas:

PracticaDjango/PracticaDjango/urls.py: 

PracticaDjango/PracticaDjango/urls.py: 

from django.contrib import admin
from django.urls import path, include
# Para registrar los archivos de las imagenes y poder verlas
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('servicios/', include('Servicios.urls')),
    path('', include('Proyecto_web_app.urls')),
]
urlpatterns+=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Nos queda arreglar algunas cosas en la plantilla.

La primera de ellas es que la barra de navegación apunta a un enlace que ya no existe por lo que debe apuntar a su nueva ubicación, lo que es muy fácil de cambiar.

Proyecto_web_app/templates/Proyecto_web_app/nav.html: 

...
    <li class="nav-item px-lg-4">
        {% url 'Proyecto_web_app:home' as home_url %}
        <a class="nav-link text-uppercase fw-bold text-expanded {% if request.path == home_url %}
        text-black{% endif %}" href="{{ home_url }}">Inicio</a>
    </li>

    <li class="nav-item px-lg-4">
        {% url 'Servicios:servicios' as servicios_url %}
        <a class="nav-link text-uppercase fw-bold text-expanded {% if request.path == servicios_url %}
        text-black{% endif %}" href="{{ servicios_url }}">Servicios</a>
    </li>

    <li class="nav-item px-lg-4">
        {% url 'Proyecto_web_app:blog' as blog_url %}
        <a class="nav-link text-uppercase fw-bold text-expanded {% if request.path == blog_url %}
        text-black{% endif %}" href="{{ blog_url }}">Blog</a>
    </li>
...

y como hemos cambiado el contexto que enviamos a la plantilla hay que cambiar donde se pusimos 'datos' por 'servicios' que es como se llama el contexto que le pasamos:

Servicios/templates/Servicios/servicios.html: 

<!--Cargamos la plantilla base-->
{% extends "Proyecto_web_app/base.html" %}

<!-- Establecemos el titulo de la página -->
{% block title %}Servicios{% endblock %}

<!-- Definimos su contenido -->
{% block content %}

<h2>Esta es la página de Servicios.</h2>
<!--Para recorrer los servicios que vayamos creando-->
{% for servicio in servicios %}
<div>
    <p>
    <h2>{{servicio.titulo}}</h2>
    <p>{{servicio.contenido}}</p>
    <p>
        <img src="{{servicio.imagen.url}}">
    </p>
    </p>
</div>
{% endfor %}

{% endblock %}

Código de este capítulo en GitHub