Django Guia Rapida III - Pagina de inicio
Esta entrada es continuación de: Django Guia Rapida II - App y CRUD en Admin
En las dos entradas previas creamos un proyecto y apps en django, nuestro proyecto es para crear la web de una muebleria y hasta el momento solo tenemos la parte del area del administrador. Si corren el server de Django y tratan de entrar a la pagina de inicio normal (no el area del administración) es decir: http://localhost:8000 veran que sale un error, error 404.
Y es lógico ya que hasta ahora nunca hemos creado una pagina de inicio, hagamoslo ahora.
Para crear paginas normales del lado publico se necesita al menos un modulo con una vista, las vista se crean usando templates, Django tiene un lenguaje de definicion de templates.
Paso 1-
Para crear vistas primero se crea una carpeta llamada templates, creamos este directorio en la carpeta de nuestro proyecto, asi:
/muebleria/muebleria/templates
Ahi se iran poniendo todas las vistas, las vistas a su vez pertenecen a un app. Cada vista es en forma basica un html, pero como dije Django tiene un lenguaje de definición de plantillas con el cual ademas de html se usa algo de codigo para establecer ciertas cosas.
Paso 2-
Ahora creemos nuestra primera vista que sera la vista principal, o mejor dicho la vista base, le llamaremos: index.html y se guarda en la carpeta templates
/muebleria/muebleria/templates/index.html
Esto lo haremos muy basico, el contenido de index.html queda asi:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title> Muebleria Sansivar</title>
</head>
<body>
<header>
<h1>Bienvenido a Sansivar muebles y decoracion</h1>
</header>
<nav class="menu">
Catalogo
</nav>
<section id="contenido">
{% block content %}
{% endblock %}
</section>
<footer id="piepag">
Pie de pagina
</footer>
</body>
</html>
<head>
<meta charset="utf-8">
<title> Muebleria Sansivar</title>
</head>
<body>
<header>
<h1>Bienvenido a Sansivar muebles y decoracion</h1>
</header>
<nav class="menu">
Catalogo
</nav>
<section id="contenido">
{% block content %}
{% endblock %}
</section>
<footer id="piepag">
Pie de pagina
</footer>
</body>
</html>
Como ven es html simple excepto la siguiente porcion:
{% block content %}
{% endblock %}
{% endblock %}
Eso es parte del lenguaje de plantillas de Django, recomiendo que vean la documentación: The Django template language En particular lo anterior nos va a servir para que dentro de ese bloque, llamado content, se carge contenido dinamico, por eso hace un par de parrafos le llame vista base, significa que esta vista es la base de las demas, como si fuera un objeto y las demas vistas heredasen de ella, de hecho es asi literalmente, es algo que nos permite hacer Django, como podran imaginar de ese modo se aprovechan elementos como el header y footer para todas las vistas y solo va variando dinamicamente el contenido.
Bueno aunque ya tenemos una vista aun no se puede ver en el navegador, primero hay que crear un modulo con una vista (otra vista diferente de index) y registrarla, vamos a ello:
Paso 3-
Hay que crear una nueva app con una vista, ¿recuerdan como crear apps? cremos una app llamada home:
> python manage.py startapp home
Paso 4-
La vista de esta app, como todas las vistas, la creamos dentro del directorio templates, pero no directamente sino que creamos un directorio que se llame igual a la app y dentro de ese directorio la vista (o vistas si fuera mas de una), llamaremos la vista mainpage.html (puede ser cualquier nombre), la ruta debe quedar asi:
/muebleria/muebleria/templates/home/mainpage.html
Ahora ponemos el contenido de la vista, como cualquier vista puede tener html o el lenguaje de plantillas de Django, en nuestro caso queda asi:
{% extends 'index.html' %}
{% block content %}
<p>Bienvenidos a la muebleria Sansivar, donde encontrara la mejor opcion para amueblar y decorar su hogar</p>
{% endblock %}
{% block content %}
<p>Bienvenidos a la muebleria Sansivar, donde encontrara la mejor opcion para amueblar y decorar su hogar</p>
{% endblock %}
Es importante notar lo siguiente:
- La primera linea, esa linea hace lo que mencione antes, hace que nuestra vista herede de la vista base (index.html)
- El codigo block content indica el contenido, y al definirlo asi hara que cuando se carge esta vista ese contenido salga en el espacio del block en la vista base, mientras que lo demas de la vista base (elementos head, header, footer, etc) saldra igual
Paso 5-
Hay que crear un archivo llamado urls.py en el directorio de nuestra app:
/muebleria/home/urls.py
Lo editamos y le ponemos el siguiente contenido:
from django.conf.urls.defaults import patterns, url
urlpatterns = patterns('home.views',
url(r'^$','vista_principal',name='la_vista_principal'),
)
urlpatterns = patterns('home.views',
url(r'^$','vista_principal',name='la_vista_principal'),
)
Importante:
- En patterns primero va el nombre de la app como un objeto y llamando su propiedad views, asi: home.views
- Luego va la definición de las urls (dentro de urlpatterns), en este caso es una pues es solo una vista pero podrian ser N
- En el registro de urls, van tres parametros:
- En el primero se pone una ruta en forma de expresión regular, en nuestro caso va vacía por que sera la vista inicial y no necesita una ruta especifica pero mas delante (en otra entrada) veremos el caso
- El 2do es el nombre de la vista para usar como referencia
- El 3ro es un nombre descriptivo de la vista
Paso 6-
Ahora hay que registrar la vista en nuestra app, abrimos el archivo views.py:
/muebleria/home/views.py
Le ponemos lo siguiente:
from django.core.context_processors import csrf
from django.template import RequestContext
from django.shortcuts import render_to_response
def vista_principal(request):
return render_to_response('home/mainpage.html', context_instance=RequestContext(request))
from django.template import RequestContext
from django.shortcuts import render_to_response
def vista_principal(request):
return render_to_response('home/mainpage.html', context_instance=RequestContext(request))
Importante:
- Despues de los import, viene la definicion de vistas, pueden ser N vistas
- En la definicion de la vista, noten que se pone el nombre de la vista, es el mismo que mencione (notas de archivo urls.py) que se usaría como referencia
- Noten en el return, en render_to_response, como se forma el primer parametro, es el nombre_de_app + / + nombre_archivo_vista
Las notas anteriores sirven para este caso, mas adelante (otra entrada) veremos casos donde la definición lleva mas elementos para pasarle objetos a la vista que se esta definiendo, digamos que este caso es lo más basico.
Paso 7-
Ahora lo que hay que hacer es registrar las urls de nuestra app en las urls del proyecto, editamos el archivo:
/muebleria/muebleria/settings.py
Al inicio del archivo agregamos:
import os
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
Ahora buscamos el arreglo TEMPLATE_DIRS y le agregamos esto os.path.join(PROJECT_ROOT, 'templates' esa parte se vera asi:
TEMPLATE_DIRS = (
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
os.path.join(PROJECT_ROOT, 'templates'),
)
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
os.path.join(PROJECT_ROOT, 'templates'),
)
Lo anterior para que nos tome de forma correcta la ruta del directorio templates.
Paso 8-
Ahora abrimos el archivo de urls del proyecto para registrar las urls de la app, el archivo esta en la ruta:
/muebleria/muebleria/urls.py
Este es el tipo de cosas que mencione en la primer entrada de guias de django que al inicio me confundian y hacian que mis proyectos de prueba no funcionasen, no confundir /nombre_proyecto/urls.py con /nombre_proyecto/nombre_app/urls.py en especial cuando los nombres del proyecto y de alguna app se parecen y tampoco confundir cuando se tienen muchas apps :)
Ok, en el archivo de urls del proyecto agregamos una linea al inicio con esto: import settings para que tome los cambios hechos en settings.py, luego dentro del arreglo urlpatterns agregamos url(r'^',include('nome.urls')), al final se vera asi el contenido del archivo:
import settings
from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url (r'^',include('home.urls')),
)
from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url (r'^',include('home.urls')),
)
Esta listo! si ejecutamos el server podemos ver nuestra pagina con la vista como contenido principal, podemos repetir los pasos a partir del paso 3 (excepto paso 7) para crear otra app con otra vista o podemos repetir desde el paso 4 para crear mas vistas en la misma app solo que en los pasos 5 y 6 habria que agregar solo el contenido relativo de las nuevas vistas dejando el que ya tienen los archivos, y habria que ignorar pasos 7 y 8.
Nota importante si creamos mas vistas en el paso 5 al definir la url de nuestra vista url(r'^$', 'nombre_referencia_vista', name='el_nombre_vista'), en la expresion regular tendriamos que usar una ruta a la que queremos que responda nuestra visita, por ejemplo, si creamos una vista de contacto que queremos que se abra con la url misitio.com/contacto, la url quedaria asi: url(r'^contacto/$',
'nombre_referencia_vista', name='el_nombre_vista'), Y con eso termina esta entrada, en la siguiente veremos de mejorar un poco visualmente la vista que acabamos de crear.
Comentarios
Publicar un comentario