• Tiempo: 2h
• Fecha: Lunes, 4-Marzo-2019
• Objetivos de la sesión:
  • Crear nuestra "APP" de Django
  • Aprender a meter recursos estáticos: css, js, imágenes
  • Aprender a manejar el modelo de datos, y la base de datos
  • Continuar con la práctica 2

• Actividades guiadas
  • Creando "APPs" en Django
  • Añadiendo nuestra App en settings.py
  • Fichero urls.py de nuestra App
  • Fichero views.py de nuestra App
  • Carpeta templates de nuestra app
  • Carpeta static con los elementos estáticos
  • Añadiendo un fichero Javascript
  • Modelo de datos
    • Creando la base de datos
    • Introduciendo productos en la base de datos
    • Leyendo los productos de la base de datos
  • Vista para mostrar los productos
• Actividades NO guiadas
• Autores
• Licencia
• Enlaces

Actividades guiadas por el profesor. Haremos lo siguiente:

Un proyecto web creado con Django en realidad es la suma de muchas aplicaciones. Podemos tener la tienda, un blog, una encuesta... de forma que sean modulares y las podamos integrar fácilmente en otros proyectos. Hasta ahora hemos trabajado con Djando sin tener en cuenta esta modularidad

Vamos a crear un proyecto nuevo, desde cero, que llamaremos mi_proyectoweb. Nos vamos a la carpeta donde estén nuestros proyectos de prueba y escribimos:

django-admin startproject mi_proyectoweb

Esto ya lo conocemos. Se nos ha creado el directorio mi_proyectoweb, y dentro tenemos el fichero manage.py y otro directorio que se llama igual: mi_proyectoweb

La estructura de directorios que tenemos hasta ahora es la mostrada en esta imagen:

Ahora creamos nuestra aplicación: la tienda. La llamaremos mi_tienda. Para crearla, entramos en el directorio mi_proyectoweb, donde se encuentra el fichero manage.py y ejecutamos el siguiente comando:

python manage.py startapp mi_tienda

Nos aparecerá una nueva carpeta, al mismo nivel que manage.py, llamada mi_tienda

Y esta es la nueva estructura de los directorios:

Lanzamos el servidor, como ya sabemos, para comprobar que todo está funcionando bien. Ejecutamos el comando:

python manage.py runserver

Y desde el navegador comprobamos que tenemos acceso a través de la URL: http://127.0.0.1:8000/

Veremos también que nos ha aparecido un fichero nuevo: db.sqlite3. Es el que contendrá la base de datos de nuestra tienda

Para integrar la App en nuestro proyecto hay que añadirla en el fichero settings.py, en la lista que pone INSTALLED_APPS. Añadimos la cadena 'mi_tienda' al final

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mi_tienda',
]

Los puntos de entrada (URLS) de nuestra tienda los añadiremos dentro de la propia app, para que sea todo más modular. Primero tenemos que configurar el fichero mi_proyectoweb/mi_proyectoweb/urls.py para indicarle que añada los puntos de entrada que definiremos en la app:

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'', include('mi_tienda.urls') ),
]

Y ahora creamos el fichero mi_proyectoweb/mi_tienda/urls.py con los puntos de entrada. De momento crearemos sólo el punto de entrada principal

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.home_view),
]

Cada vez que se acceda a la página principal: http://127.0.0.1:8000/ se llamará a la función home_view() del fichero views.py de nuestra App

Crearemos la vista de nuestra página principal, que de momento será un "Hola mundo". Editamos el fichero mi_proyectoweb/mi_tienda/views.py y añadimos:

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def home_view (request):
    html = "Bienvenido a mi tienda!!"
    return HttpResponse(html)

Lanzamos el servidor y lo probamos. En el navegador nos debe aparecer esto:

La estructura de los directorios hasta el momento es la siguiente:

Creamos la carpeta templates dentro de mi_proyectoweb/mi_tienda y colocamos este fichero HTML, que llamaremos index.html

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MI TIENDA</title>
  </head>
  <body>
    <p>BIENVENIDO A MI TIENDA!!</p>
    <p>Esto es un fichero HTML (template)</p>
  </body>
</html>

Ahora modificamos la vista (mi_tienda/views.py) para que lea este fichero html:

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def home_view (request):
    return render(request, "index.html", {})

Y en el navegador veremos que se ha renderizado la nueva página:

Así queda la estructura de directorios:

Los elementos estáticos: estilo, imágenes y ficheros javascripts se almacenan en la carpeta mi_tienda/static. Para hacer un prueba creamos un fichero de estilo y lo guardamos en static/mi-css.css

body {
  background-color: lightblue;
}

Simplemente cambia el fondo a azul claro, para comprobar que funciona. Además, añadimos esta imagen: logo-urjc.png

Modificamos el index.html para incluir la imagen y el fichero de estilo

{% load staticfiles %}

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MI TIENDA</title>
    <link rel="stylesheet" href="{% static 'mi-css.css'%}">
  </head>
  <body>
    <p>BIENVENIDO A MI TIENDA con estilo</p>
    <img src="/static/logo-urjc.png" alt="NOPE">
  </body>
</html>

Observa que hemos añadido el siguiente comando para tener acceso a los archivos estáticos:

{% load staticfiles %}

Ahora si recargamos la página del navegador, veremos lo siguiente:

La estructura de directorios ha quedado así:

Los ficheros Javascript son también recursos estáticos, así que los situamos en el directorio static. Modificaremos el ejemplo anterior para añadir un botón que nos permita mostrar/ocultar el logo. El HTML es el siguiente:

{% load staticfiles %}

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MI TIENDA</title>
    <link rel="stylesheet" href="{% static 'mi-css.css'%}">
     <script src="{% static 'mi-js.js' %}"></script>
  </head>
  <body onload="main();">
    <p>BIENVENIDO A MI TIENDA con estilo y js</p>
    <img src="/static/logo-urjc.png" alt="NOPE" id="logo">
    <br>
    <button type="button" id="boton">Click me</button>
  </body>
</html>

Observa que hemos añadido la siguiente línea en la cabeza, para cargar el fichero mi-js.js:

<script src="{% static 'mi-js.js' %}"></script>

El fichero javascript está en static/mi-js.js

function main()
{
  console.log("Holaaaaaaaaaa")

  var boton = document.getElementById('boton')
  var img = document.getElementById('logo')

  var img_on = true;

  boton.onclick= () => {
    if (img_on) {
      img.style.display="None"
      img_on = false
    }
    else {
      img.style.display = "inline"
      img_on = true
    }
  }
}

Al recargar la página, nos aparece lo siguiente en el navegador:

Al apretar el botón el logo desaparece. Y al volver a pulsarlo aparece de nuevo. En esta animación lo vemos en acción. En la consola se imprime también una cadena, al arrancar el programa

En nuestra tienda tendremos productos, con sus nombres, descripciones, precios, descuentos, etc... es decir, que tenemos que modelar los datos que vamos a usar, y que se guardan en una base de datos a la que accederán nuestros programas en python

Los datos los definimos en el fichero mi_tienda/models.py. Vamos a hacer un ejemplo en el que trabajaremos con productos con los siguientes datos: Nombre, precio y el stock disponible

Creamos la clase Product y dentro de ella definimos estos tres campos, de la siguiente manera:

from __future__ import unicode_literals

from django.db import models

# Create your models here.
class Product (models.Model):
    name = models.CharField(max_length=200)
    stock = models.IntegerField()
    price = models.FloatField()

Para crear la estructura de la base de datos, y que se integre en el fichero, ejecutamos el siguiente comando:

python manage.py makemigrations

Luego ejecutamos este otro comando:

 python manage.py migrate

Si todo ha ido bien, en la consola nos aparece algo como esto:

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, mi_tienda, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying mi_tienda.0001_initial... OK
  Applying sessions.0001_initial... OK

Para que funcione nuestra tienda tenemos que introducir algunos artículos de prueba en la base de datos. Lo haremos directamente desde una consola Python. Ejecutamos el siguiente comando:

python manage.py shell

Esto nos abre una consola de python con todas las bibliotecas de django ya accesibles. Lo primero que hacemos es importar nuestra clase Product:

from mi_tienda.models import Product

Y ahora introducimos nuestro primer artículo invocando al constructor de la clase Product. En este ejemplo estoy haciendo una tienda de "chips". Uno de ellos es una FPGA, de las que hay 3 en stock y su precio es de 6.3€

In [3]: p1 = Product(name="fpga", stock=3, price=6.3)
Out[4]: <Product: Product object>

Esto nos ha creado el objeto p1, que es nuestro artículo. Podemos acceder a su información escribiendo su nombre seguido de un punto y el nombre de los campos creados:

In [5]: p1.name
Out[5]: 'fpga'

In [6]: p1.stock
Out[6]: 3

In [7]: p1.price
Out[7]: 6.3

Para grabar el artículo en la base de datos ejecutamos el metodo save():

In [8]: p1.save()

Introducimos dos artículos más, y los grabamos:

p2 = Product(name="risc-v", stock=10, price=5.8)
p3 = Product(name="7400", stock=5, price=0.30)
p2.save()
p2.save()

Salimos de la consola con el comando exit()

La lectura de la base de datos la podemos hacer desde la propia consola, para comprobar que está todo OK. Luego integraremos el código en nuestra propia vista de Django. Arrancamos una consola

python manage.py shell

• Cargamos nuestro modelo de datos:

from mi_tienda.models import Product

• Para leer todos los productos que tenemos guardados, usamos el siguiente comando:

productos = Product.objects.all()

Esto nos devuelve una lista de objetos. Al ser una lista, podemos utilizar la función len() para saber el número de artículos que tenemos:

In [3]: len(productos)
Out[3]: 3

Vamos a ver cuál es el primer producto, y su precio:

In [4]: productos[0].name
Out[4]: u'fpga'

In [5]: productos[0].price
Out[5]: 6.3

Vamos a crear una URL nueva que nos permite mostrar todos los productos que hay en la base de datos. La llamaremos /list. Primero creamos la nueva URL en el fichero mi_tienda/urls.py

from django.conf.urls import url
from . import views


urlpatterns = [
    url(r'^$', views.home_view),
    url(r'^list/', views.list)
]

Y ahora implementamos la vista en mi_tienda/views.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from django.http import HttpResponse

from mi_tienda.models import Product

# Create your views here.
def home_view (request):
    return render(request, "index.html", {})

def list(request):
    objects = Product.objects.all()
    html = "<p>Listado de articulos</p>"
    for elt in objects:
        print(elt.name)
        html += '<p>'+ elt.name + ' ' + str(elt.price) + '<p>'
    return HttpResponse(html)

Cuando se accede al punto de entrada /list, se invoca a la función list(). Primero se leen todos los productos de la base de datos. En la variable html se coloca el código html de salida. Se utiliza un bucle para recorrer todos los productos y añadirlos a la cadena html como párrafos

En el navegador veremos esto:

Efectivamente, ahí aparecen los tres artículos que hemos metido antes. En esta animación lo vemos en funcionamiento:

La estructura de directorios final es la siguiente:

Ya tenemos TODOS los ingredientes para desarrollar nuestra tienda. ¡A por ella!

• Continúa trabajando en tu tienda
• Esta es la última sesión dedicada a Django. En la próxima empezamos con la Práctica 3

• Jose María Cañas
• Juan González-Gómez (Obijuan)

• Universidad Rey Juan Carlos de Madrid
• Escuela Técnica Superior de Ingeniería de Telecomunicaciones (URJC)