¿No te funcionó Bootstrap? ¡Prueba esto! Te dejo el link de un tutorial para integrar Bootstrap 4 a Django de manera sumamente sencilla 😃
👉🏼👉🏼 https://blog.nubecolectiva.com/como-integrar-django-y-bootstrap-4/ 👈🏼👈🏼
Introducción
Qué aprenderás sobre Django
Historia de web development
Preparación del entorno de trabajo en Mac
Preparación del entorno de trabajo en Windows y Linux
Creación del proyecto Platzigram / Tu primer Hola, mundo! en Django
Vistas
El objeto Request
Solución al reto - Pasando argumentos en la URL
Creación de la primera app
Introducción al template system
Patrones de diseño y Django
Models
La M en el MTV
El ORM de Django
Glosario
Extendiendo el modelo de usuario
Implementación del modelo de usuarios de Platzigram
Explorando el dashboard de administración
Dashboard de Administración
Creación del modelo de posts
Templates, auth y middlewares
Templates y archivos estáticos
Login
Logout
Signup
Middlewares
Forms
Formularios en Django
Mostrando el form en el template
Model forms
Validación de formularios
Class-based views
Class-based views
Protegiendo la vista de perfil, Detail View y List View
CreateView, FormView y UpdateView
Generic auth views
Deployment
Arquirectura / Conceptos / Componentes
¿Cómo conectar Django a una base de datos?
Configurar el servidor
Preparación del VPS (en AWS)
Conclusiones del curso
Bonus
¿Cómo usar los templates en Django?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Introducción al template system
9/37Recursos
Template system de Django es una manera de presentar los datos usando HTML, está inspirado en Jinja2 y su sintaxis, por lo cual comparte muchas similitudes. Permite incluir alguna lógica de programación.
Aportes 85
Preguntas 25
Ordenar por:
Si se sienten un poco perdidos y necesitan un tutorial más para noobs antes de éste , les recomiendo https://tutorial.djangogirls.org/es/
¿Y listo? Tío, tu vas muy ,muy rápido y la peña se lía y no le sale y no sabe lo que hace. Es un curso de Django no un contrarreloj!
Archivo views.py de posts
from django.shortcuts import render
from datetime import datetime
posts = [
{
'title': 'Mont Blanc',
'user': {
'name': 'Yésica Cortés',
'picture': 'https://picsum.photos/60/60/?image=1027'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/800/600?image=1036',
},
{
'title': 'Via Láctea',
'user': {
'name': 'Christian Van der Henst',
'picture': 'https://picsum.photos/60/60/?image=1005'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/800/800/?image=903',
},
{
'title': 'Nuevo auditorio',
'user': {
'name': 'Uriel (thespianartist)',
'picture': 'https://picsum.photos/60/60/?image=883'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/500/700/?image=1076',
}
]
def list_posts(request):
# """list existing posts"""
# content=[]
# for post in posts:
# content.append("""
# <p><strong>{name}</strong></p>
# <p><small>{user} - <i>{timestamp}</i></small></p>
# <figure><img src="{picture}"/></figure>
# """.format(**post))
# return HttpResponse('<br>'.join(content))
return render(request,'feed.html', {'posts':posts})
LLeven primero el curso de flask y esto se les hara mas facil
Les dejo el archivo feed.html hecho con Materialize:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<!-- Compiled and minified CSS -->
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
<title>Platzigram</title>
</head>
<body>
<div class=“container”>
<div class=“row”>
{% for post in posts%}
<div class=“col s6 offset-s3”>
<ul class=“collection”>
<li class=“collection-item avatar”>
<img src="{{post.user.picture}}" alt="{{post.user.name}}" class=“circle”>
<span>{{post.title}}</span>
<p>{{post.user.name}} <br>
{{post.timestamp}}
</p>
</div>
<div class=“row”>
<div class=“col s6 offset-s3”>
<div class=“card”>
<div class=“card-image”>
<img src="{{post.photo}}" height=“300px” alt="{{post.title}}">
<span class=“card-title”>{{post.title}}</span>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
el diseño me sale un poco diferente
Debería pasarme por un curso de JavaScript o html primero antes de continuar con Django?
mi proyecto viene por otro lado 🤗
Es normal que le consiga vastantes similitudes a este framework con laravel???
digo porque python y PHP son MUY distintos, asi que quisiera saber si no solo soy yo
Para los que bien de javascript es muy similar a usar express y handlebars 😎
Excelente el curso realmente!! Se me ocurre que estaria bueno que el profesor no escriba tan abajo porque se complica ver lo que va ingresando a la pantalla.
archivo feed.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Platzigram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="container">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 offset-lg-4">
<div class="media">
<img class="mr-3 rounded-circle" src="{{ post.user.picture }}" alt="{{ post.user.name }}">
<div class="media-body">
<h5 class="mt-0">{{ post.user.name }}</h5>
{{ post.timestamp }}
</div>
</div>
<img class="img-fluid mt-3 border rounded" src="{{ post.photo }}" alt="{{ post.title }}">
<h6 class="ml-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
Es interesante la forma en que Django encuentra las template solo con dale el nombre. Un 10 para Django!
Django 😍
tengo un problema, cunado le envío los parámetro a la función render(),
le envío el request y el nombre del templete que busco, pero me marca un error el navegador diciendo que el templete no existe.
Si alguien sabe sobre este error lo agradecería!!!
Mis apuntes, por favor ayúdenme a mejorarlos. Gracias.
tenemos que acabar nuestras sentencias, como endfor o endif, con la misma estructura mencionada antes.
Umm… me esperaba más de este curso 😕
Si usan visual studio code les recomiendo mucho la extensión de Django, viene con snippets para la sintaxis de templates
Repasando:
URL: Encargadas de encontrar el recurso.
Views: Encargada de la lógica de traer los datos
Templates: Encargada de presentar los datos en la UI
Les dejo la estructura basica del feed.html 🤝:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Platzigram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
</body>
</html>
Si se desea crear una aplicación con frontend y backend, recomiendan usar todo desde django, o mejor usar por ejemplo: React en el front y django en el back.
Me va gustando cada vez viendo lo que se avecina en una clase tras otra
Mi aporte bootstrap 5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Platzigram</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<br>
<br>
<div class="container">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 offset-lg-4">
<div class="media d-flex">
<img class="mr-3 rounded-circle me-4" src="{{ post.user.picture }}" alt="{{ post.user.name }}">
<div class="media-body ">
<h5 class="mt-0">{{ post.user.name }}</h5>
{{ post.timestamp }}
</div>
</div>
<img class="img-fluid mt-3 border rounded" src="{{ post.picture }}" alt="{{ post.title }}">
<h6 class="ml-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
sería muy bueno el uso de microservicios
Para los que usan bootstrap 5 y les quede lo mas parecido al del curso.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Platzigram</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<br>
<br>
<div class="container">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 offset-lg-4">
<div class="media d-flex">
<img class="mr-3 rounded-circle me-4" src="{{ post.user.picture }}" alt="{{ post.user.name }}">
<div class="media-body ">
<h5 class="mt-0">{{ post.user.name }}</h5>
{{ post.timestamp }}
</div>
</div>
<img class="img-fluid mt-3 border rounded" src="{{ post.photo }}" alt="{{ post.title }}">
<h6 class="ml-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
Esto es un laravel versión python, no me vengan a engañar a mi 🤯 jajaja me esta encantado Django 😄
El profesor va a toda, no facilita los datos que usa ni explica bootstrap ni el resto de herramientas que usa.
Es básicamente un video donde vemos a alguien hablar consigo mismo mientras hace un ejercicio pero no se molesta en ayudar a los estudiantes a llevar el curso.
Por favor, más seriedad.
Nos muestra como organizar mejor el codigo en una vista de django con bootstrap
EL profe prepara sus scripts, pero no los deja en ningún lado, aparte de su rep de github (y no avisa) -_-
Sustituyan el código Bootstrap por este en caso de que no les funcione
<!-- CSS only -->
<link href=“https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3” crossorigin=“anonymous”>
Entonces al usar render en views, el archivo que mencionemos en render usa el valor que le pasemos
No me encuentra el Template posts, puede ser porque se raye con el virtualenvironment? ya que lo tengo una carpeta que se llama igual que el programa platzi acabada en -env y creo que se va a buscar allí los templates. Para forzar que coja el template de posts/posts/feed.html, tendría que poner en ‘urls.py’ dentro del programa principal path(‘posts/posts/’ , posts_views.list_posts) no?
Muchas gracias, la velocidad de explicación es perfecta para mí!
Saludos
Dos recomendaciones para los que recién llegan:
- Hagan primero el curso de flask.
- Vean el video en velocidad 0.85x
Estoy empezando a amar Django
Una buena práctica es crear una carpeta con el mismo nombre de nuestra app en la carpeta templates por cada app que tengamos, así en el momento de llamar a la función render(request, 'posts/feed.html') modularizamos nuestros templates y agregamos un namespace, evitando duplicación de nombres en los templates.
posts/
└── templates/
└── posts/
└── feed.html
Desde nuestro template, también podemos acceder a objetos de la base de datos.
Para introducir programación dentro de nuestro templante, solo tenemos que poner nuestro script dentro de brackets y comenzando y terminando con %
en HTML,solo necesitamos usar doble brackets, para mostrar el valor de una llave de un map.
En render, el contexto le pasa los datos al template.
No necesitamos especificar, la ruta de nuestro template, dentro de render, debido a que habíamos especificado en TEMPLATES, que APPS_DIR : True, por lo que automáticamente, se buscará en todas las carpetas de las aplicaciones para encontrar el template.
Importamos render, el cuál es una función que toma un request, el nombre del template y un ctx (contexto), para entregarnos el template
De hecho, los settings, se definen en settings.py en la constante TEMPLATES, en ella podemos configurar cosas como: Los recursos de dónde salen los diferentes backends. Context processors, etc.
Para tener encuenta: las urls, son las encargadas de encontrar el recurso, yendo por todo el set de url, trantando de encontrar un match con la petición, y entregar la vista que responde a esa petición. Luego la vista, es la encarga de procesar los datos, y es el template, lo que muestra de manera lógica estos datos.
El template system de Django, está inspirado en Jinja2 y su sintaxis.
Lo que hace nuestro template system, es representar los datos a través del HTML, incluyendo un poco de lógica de programación.
Lo que se hace con CGI, es solo escribir el html plano dentro del script.
Complementa con el Curso de Bootstrap de Platzi.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lougram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="container">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 offset-lg-4">
<div class="media">
<img class="mr-3 rounded-circle" src="{{post.author.photo }}" alt="{{ post.author.name }}">
<div class="media-body">
<h5 class="mt-0">{{ post.author.name }}</h5>
{{ post.timestamp }}
</div>
</div>
<img class="img-fluid mt-3 border rounded" src="{{ post.image}}" alt="{{ post.title }}">
<h6 class="ml-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
Template maneja la lógica de presentación y la vista trae los datos.
Tenemos que importar de shorcouts, render.
El template system en Django es una forma de representar los datos en HTML.
Template system de Django es una manera de presentar los datos usando HTML, está inspirado en Jinja2 y su sintaxis, por lo cual comparte muchas similitudes. Permite incluir alguna lógica de programación.
Aporto mi template, espero les guste 😄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Platzigram | Posts</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3">
<div class="row justify-content-center">
{% for post in posts %}
<div class="col-sm-7">
<div class="card">
<img src="{{ post.photo }}" class="card-img-top">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<div class="media">
<img src="{{ post.user.picture }}" alt="..." class="mr-3">
<div class="media-body">
<p class="mt-0">{{ post.user.name }}</p>
<footer class="blockquote-footer"><cite>{{ post.timestamp }}</cite></footer>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
Solo para casos de prueba, para no generar uno por uno cada post en el list POSTS, pueden unicamente agregar un post al listado y en el context multiplicarlo por la cantidad deseada, por ejemplo, 10.
def post_list(request):
template_name = 'posts/list.html'
context = {
'posts': POSTS * 10
}
return render(request, template_name, context)
Esta clase si estuvo increíble
me sale el siguiente error:
Unclosed tag on line 1: 'for'. Looking for one of: empty, endfor.
1 {% for post in posts %}
2 <p> {{post.title}} </p>
3 {% endfor % }
A que se debe?
Realice la parte del template, pero al ejecutar el servidor no me detecta el archivo feed.html… me aparece el siguiente error:
File "C:\Users\user\Desktop\platzi\django\platzigram\lib\site-packages\django\template\loader.py", line 19, in get_template
raise TemplateDoesNotExist(template_name, chain=chain)
django.template.exceptions.TemplateDoesNotExist: feed.html
[04/Nov/2018 11:42:15] "GET /posts/ HTTP/1.1" 500 83363
´´´
Hice todos los pasos que realizo el profesor.Hola!, cómo hace el profe para que el código python se le maque como tal en sublime, mientras escribe en un archivo html?
Gracias!.
Django encuentra el template por la configuración en settings -
TEMPLATES - APP_DIRS: True. Esto indica que dentro de cada aplicación existe un directorio de templates.
Ya lo corregí la carpeta que cree se llamaba posts en vez de templates. Saludos
Cuando se crea la clase User, no entiendo donde está Models desde la que heredamos. Alguien me puede ayudar a responder esa duda?
class User(models.Model):```
me parece mejor usar regex para la urls.
Buenisima clase
Simplemente genial los render 😎
Cómo puedo configurar el Sublime Text cómo el del profesor?
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posts</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="container">
<div class="row">
{%for post in posts %}
<div class="col-lg-4 offset-lg-4">
<div class="media">
<img class="mr-3 rounded-circle" src="{{ post.user.picture }}" alt="{{ post.user.name}}">
<div class="media-body">
<h5 class="mt-0">
{{ post.timestamp }}
</h5>
</div>
</div>
<img class="img-fluid mt-3 border rounded" src="{{ post.photo }}" alt="{{ post.title }}">
<h6 class="mk-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor %}
</div>
</div>
</body>
</html>```
**Vista:**
from django.http import HttpResponse
from django.shortcuts import render
from datetime import datetime
POSTS = [
{
‘title’: ‘Mont Blanc’,
‘user’: {
‘name’: ‘Yésica Cortés’,
‘picture’: ‘https://picsum.photos/60/60/?image=1027’
},
‘timestamp’: datetime.now().strftime(’%b %dth, %Y - %H:%M hrs’),
‘photo’: ‘https://picsum.photos/800/600?image=1036’,
},
{
‘title’: ‘Via Láctea’,
‘user’: {
‘name’: ‘Christian Van der Henst’,
‘picture’: ‘https://picsum.photos/60/60/?image=1005’
},
‘timestamp’: datetime.now().strftime(’%b %dth, %Y - %H:%M hrs’),
‘photo’: ‘https://picsum.photos/800/800/?image=903’,
},
{
‘title’: ‘Nuevo auditorio’,
‘user’: {
‘name’: ‘Uriel (thespianartist)’,
‘picture’: ‘https://picsum.photos/60/60/?image=883’
},
‘timestamp’: datetime.now().strftime(’%b %dth, %Y - %H:%M hrs’),
‘photo’: ‘https://picsum.photos/500/700/?image=1076’,
}
]
def list_posts(request):
return render(request, ‘feed.html’, {‘posts’: POSTS})```
si hasta el momento muy facil y me ha funcionado todo, vamos a ver como usar mvc en django-python
posts/templates/feed.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Platzigram</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="container">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 offset-lg-4">
<div class="media">
<img class="mr-3 rounded-circle"src="{{ post.user.picture }}" alt="{{ post.user.name }}"/>
<div class="media-body">
<h5 class="mt-0">{{ post.user.name }}</h5>
{{ post.timestamp }}
</div>
</div>
<img class="img-fluid mt-3 border rounded"src="{{ post.photo }}" alt="{{ post.title }}"/>
<h6 class="ml-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
posts/views.py
from django.shortcuts import render
from datetime import datetime
POSTS = [
{
'title': 'Mont Blanc',
'user': {
'name': 'Yésica Cortés',
'picture': 'https://picsum.photos/60/60/?image=1027'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/800/600?image=1036',
},
{
'title': 'Via Láctea',
'user': {
'name': 'Christian Van der Henst',
'picture': 'https://picsum.photos/60/60/?image=1005'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/800/800/?image=903',
},
{
'title': 'Nuevo auditorio',
'user': {
'name': 'Uriel(thespianartist)',
'picture': 'https://picsum.photos/60/60/?image=883'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/500/700/?image=1076',
}
]
def list_posts(request):
content = []
return render(request, 'feed.html', {'posts': POSTS})
Cuando voy a ver la página, solo aparece esto:
Feed.html:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Platzigram</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<br><br>
<divclass="container">
<divclass="row">
{% for post in posts %}
<divclass="col-lg-4 offset-lg-4">
<divclass="media">
<imgclass="mr-3 rounded-circle"src="{{ post.user.picture }}" alt="{{ post.user.name }}"/>
<divclass="media-body">
<h5class="mt-0">{{ post.user.name }}</h5>
{{ post.timestamp }}
</div>
</div>
<imgclass="img-fluid mt-3 border rounded"src="{{ post.photo }}" alt="{{ post.title }}"/>
<h6class="ml-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor %}
</div>
</div>
</body>
</html>```
Views.py:
#Django
from django.http import HttpResponse
from django.shortcuts import render
#Utilities
from datetime import datetime
posts = [
{
‘title’: ‘Mont Blanc’,
‘user’: {
‘name’: ‘Yésica Cortés’,
‘picture’: ‘https://picsum.photos/60/60/?image=1027’
},
‘timestamp’: datetime.now().strftime(’%b %dth, %Y - %H:%M hrs’),
‘photo’: ‘https://picsum.photos/800/600?image=1036’,
},
{
‘title’: ‘Via Láctea’,
‘user’: {
‘name’: ‘Christian Van der Henst’,
‘picture’: ‘https://picsum.photos/60/60/?image=1005’
},
‘timestamp’: datetime.now().strftime(’%b %dth, %Y - %H:%M hrs’),
‘photo’: ‘https://picsum.photos/800/800/?image=903’,
},
{
‘title’: ‘Nuevo auditorio’,
‘user’: {
‘name’: ‘Uriel (thespianartist)’,
‘picture’: ‘https://picsum.photos/60/60/?image=883’
},
‘timestamp’: datetime.now().strftime(’%b %dth, %Y - %H:%M hrs’),
‘photo’: ‘https://picsum.photos/500/700/?image=1076’,
}
]#
def list_posts(request):
""“Lista los posts existentes”""
return render(request, ‘feed.html’, {‘posts’: posts})```
Resumen:
MVC (Model view Controller) y MTV (Model Template View)
son los patrones de diseño de Django.
Le podemos dar como contexto, un diccionario.
Configuramos en settings, en la constante TEMPLATES, en la que especificamos que va a encontrar los templates en los folder internos de las aplicaciones.
render es una función, a la que damos un request, luego el nombre del template y un ctx o contexto.
repasando: url, son las encargadas de encontrar el recurso. tratando de encontrar cuál url es la solicitada, y devolviendo una vista configurada para ello.
Algun curso o recomendacion para aplicar esos comandos de bootstrap realmente entendi todo menos esa parte
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
Buenos dias:
porque me aparece este error:
SyntaxError: ‘return’ outside function
Este es mi codigo:
Create your views here.
def list_posts(request):
""“List existing posts.”"“
content = []
for post in posts:
content.append(”""
<p><strong>{name}</strong></p>
<p><small>{user} - <i>{timestamp}</i></small></p>
<figure><img src="{picture}"/></figure>
""".format(**post))
return HttpResponse(’<br>’.join(content))
![Francisco Garcia [C6]](https://static.platzi.com/media/avatars/avatars/garciafran_c845c2fe-2ea4-42db-a305-a7f4ef13b0fd.jpeg)
Codigo de feed
<!DOCTYPE html>
<html>
<head>
<title>Platzigram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="container">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 offset-lg-4">
<div class="media">
<img class="mr-3 rounded-circle" src="{{ post.user.picture }}" alt="{{ post.user.name }}">
<div class="media-body">
<h5 class="mt-0">{{ post.user.name}}</h5>
{{ post.timestamp }}
</div>
</div>
<img class="img-fluid mt-3 border rounded" src="{{ post.photo }}" alt="{{ post.title }}"
<h6 class="ml-1 mt-1">{{ post.title }}</h6>
</div>
{% endfor%}
</div>
</div>
</body>
</html>
Codigo de View
"""Posts views."""
# Django
from django.shortcuts import render
# Utilities
from datetime import datetime
posts = [
{
'title': 'Mont Blanc',
'user': {
'name': 'Yésica Cortés',
'picture': 'https://picsum.photos/60/60/?image=1027'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/800/600?image=1036',
},
{
'title': 'Via Láctea',
'user': {
'name': 'Christian Van der Henst',
'picture': 'https://picsum.photos/60/60/?image=1005'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/800/800/?image=903',
},
{
'title': 'Nuevo auditorio',
'user': {
'name': 'Uriel (thespianartist)',
'picture': 'https://picsum.photos/60/60/?image=883'
},
'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
'photo': 'https://picsum.photos/500/700/?image=1076',
}
]
# Create your views here.
def list_posts(request):
"""List existing posts"""
return render(request, 'feed.html', {'posts': posts})
Plantilla inplementada usando PugJS, se las recomiendo:
!!!5
html(lang='en')
head
// Required meta tags
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
// Bootstrap CSS
link(
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
)
title='PlatziGram'
body
.conainer: .row.w-100.m-0
for post in posts
.col-lg-4.offset-lg-4.text-center.p-0
.media.text-left
- var titlePost = post.title
- var user = post.user.name
- var user_img = post.user.picture
- var pic_url = post.picture_url
- var timestamp = post.timestamp
img.mr-3.rounded-circle(src=user_img alt=user)
.media-body
h5.mt-0= user
| #{timestamp|date:'M d'}th, #{post.timestamp|date:'Y - H:i'} hrs.
img.img-fluid.mt-3.border.rounded(src=pic_url alt=titlePost)
h6.ml-1.mt-1= titlePost
Nota: revisar tamaños de imágenes, en la inserción de código del 4:12 se cambia el tamaño de user.picture, estos deberían estar a 60/60, en “archivos y enlaces” está el código.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.