Curso de Extensión: Introducción a Django

Clase 1: Primera aplicación y configuración

Clase #1 Parte 2

Agregaremos Bootstrap a nuestra primera aplicación

Vamos con los pasos!

• Crear un archivo base.html en templates
Acá indicaremos todas las etiquetas necesarias para agregar Boostrap al proyecto

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO
" crossorigin="anonymous">

{% block page_content %}{% endblock %}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>

• Modificar el archivo hello.html para que incluya Bootstrap (a través de base.html)

{% extends "base.html" %}
{% block page_content %}

<h1>Hola a todos! Vamos Django!</h1>

{% endblock %}

• En la entrada DIRS de settings.py del Proyecto, agregar la ruta templates de la aplicación

TEMPLATES = [
{
# ..
'DIRS': ['hello/templates/'],
#...
},
]

• Probar!
Curso de Extensión: Introducción a Django
Clase 1: Primera aplicación y configuración

Segunda Aplicación Django: Crearemos un portfolio

Primero, creamos una nueva aplicación dentro del proyecto actual.

Luego, agregamos la aplicación en INSTALLED_APPS dentro de settings.
Después, vamos a crear un Modelo. Básicamente, nuestro portfolio se formará de Proyectos (de desarrollo).
Cada uno de ellos, tendrá atributos como título, descripción, tecnologías, link e imagen alusiva.
Para que nuestra aplicación pueda visualizar datos de los proyectos, cargaremos data de cada uno de ellos.
En concreto, tendremos dos páginas. La primera o index, tendrá data resumida de cada proyecto. Y la segunda,
con más detalle. Estos 2 templates, serán invocados por 2 funciones implementadas en views. Además que las
mismas deberán ser accesibles al usuario final a través de urls.

Vamos con los pasos!

• Creamos la aplicación
python manage.py startapp portfolio

• Agregamos la aplicación en settings.py (comentar la anterior para evitar problemas de ejecución)

INSTALLED_APPS = [
#….
'portfolio',
]

• En models.py de la nueva aplicación, vamos a crear el modelo Proyecto

class Proyecto(models.Model):
titulo = models.CharField(max_length=100)
descripcion=models.TextField()
tecnologias = models.CharField(max_length=200)
link= models.CharField(max_length=150)
imagen = models.FilePathField(path='/img')

• Creamos una migración. Esto se hace para comenzar a crear tablas en la BD. Por ahora, será con
SQLite.
python manage.py makemigrations portfolio
#crea el modelo
python manage.py migrate portfolio

• Cargamos data de cada proyecto

python manage.py shell

>>> from portfolio.models import Proyecto
>>> p1=Proyecto(titulo='SGI de Pozos Petroleros',
descripcion='Plataforma web para la gestion de datos de pozos
petroleros de estacion Caimancito', tecnologias='SQL Server, ASP,
Codecharge', link='https://www.lanacion.com',
imagen='img/pozos.png')
>>> p1.save()
>> p4=Proyecto(titulo="SGI Toners y Reciclados",
descripcion="Aplicacion de escritorio para la gestion de reciclados
de toner de ECIN", tecnologias="VB SQL",
link="https://www.ecinsoluciones.com", imagen="img/ecin.png")
>>> p4.save()
Curso de Extensión: Introducción a Django
Clase 1: Primera aplicación y configuración

• Creamos las vistas en views.py para el index y el detalle

from portfolio.models import Proyecto

def projectIndex(request):
proyectos = Proyecto.objects.all()

context = {
'proyectos': proyectos
}

return render(request, 'projectIndex.html', context)

def projectDetail(request,pk):
proyecto = Proyecto.objects.get(pk=pk)

context = {
'proyecto': proyecto
}

return render(request, 'projectDetail.html', context)

• Vamos a crear 2 templates en portfolio/templates. Uno para el index projectIndex.html y el otro para el
detalle projectDetail.html. E invocaremos a Bootstrap.

{% extends "base.html" %}
{% load static %}
{% block page_content %}

<h1>Portfolio</h1>
<div class="row">

{% for proyecto in proyectos %}

<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{% static proyecto.imagen
%}">

<div class="card-body">

<h5 class="card-title">{{ proyecto.titulo }}</h5>

<p class="card-text">{{ proyecto.descripcion }}</p>

<a href="{% url 'projectDetail' proyecto.pk %}"

class="btn btn-primary">
Leer mas
</a>
</div>
</div>
</div>

{% endfor %}

</div>

{% endblock %}
Curso de Extensión: Introducción a Django
Clase 1: Primera aplicación y configuración

{% extends "base.html" %}
{% load static %}

{% block page_content %}
<h1>{{ proyecto.titulo }}</h1>
<div class="row">
<div class="col-md-8">
<img src="{% static proyecto.imagen %}" alt="" width="100%">
</div>
<div class="col-md-4">
<h5>Sobre el Proyecto:</h5>
<p>{{ proyecto.descripcion }}</p>
<br>
<h5>Tecnologias usadas:</h5>
<p>{{ proyecto.tecnologias }}</p>
</div>
</div>
{% endblock %}

• Haremos accesibles las 2 vistas para el usuario final. Primero agregaremos una entrada en urls del
Proyecto Django y luego dentro de la aplicación.

urlpatterns = [
# ...
path('portfolio/', include('portfolio.urls')),
]

from django.urls import path

from portfolio import views

urlpatterns = [
path('', views.projectIndex, name='projectIndex'),
path('<int:pk>/', views.projectDetail, name='projectDetail'),
]

• Probar! 127.0.0.1:8000/portfolio
Curso de Extensión: Introducción a Django
Clase 1: Primera aplicación y configuración

Links
https://www.linuxcloudvps.com/blog/how-to-install-django-on-ubuntu-20-04/
https://www.scaleway.com/en/docs/tutorials/django-ubuntu-focal-fossa/