Página para el detalle del blogpost

Clase 61 de 65 • Introducción a PHP-2017

Resumen

Página de Detalle del Blogpost

En este desafío te invito a crear una nueva página de vista para los blogposts. El objetivo es que cada título sea un link y te lleve a una nueva sección en donde ser verán los posts.

Carlos Govea

student•

En index.twig:

<h2><a href="{{ 'detail/' | url }}{{ blogPost.id }}">{{ blogPost.title }}</a></h2>

En index.php:

$router -> controller('/detail', App\Controllers\DetailController::class);

En DetailController.php:

public function getIndex($id) {        
        $blogPosts = BlogPost::where('id', $id) -> get();        
        return $this -> render('detail.twig', [
            'blogPosts' => $blogPosts
        ]);    
}

Y luego solo es crear: detail.twig.

Ezequiel Rodriguez Esparza

student•

Solo falto la parte de Details.twig aqui lo dejo

{% extends 'Layout.twig' %}
{% block content %}
    <div class="blog-post">
        <p>
            <a class="btn btn-default" href="{{ '/' | url }}">Back</a>
        </p>
        {% for blogPost in blogPosts %}
        <h2>{{ blogPost.title }}</h2>
        <p>Jan 1,2020 by <a href="">Alex</a></p>
        {% if blogPost.img_url %}
            <div class="blog-post-image">
                <img src="{{ blogPost.img_url }}" width="450px" height="150px">
            </div>
        {% endif %}
        <div class="blog-post-content">
            {{ blogPost.content }}
        </div>
        {% endfor %}
    </div>
{% endblock %}

Ivan Cardozo

student•

Use tu codigo pero la imagen los estilos que le agregué a la hora de imprimirse tiene un mejor tamaño.

{% extends 'Layout.twig' %}
{% block content %}
    <div class="blog-post">
        <p>
            <a class="btn btn-default"href="{{ '/' | url }}">Back</a>
        </p>
        {% for blogPost in blogPosts %}
        <h2>{{ blogPost.title }}</h2>
        <p>Jan 1,2020 by <a href="">Alex</a></p>
        {% if blogPost.img_url %}
            <div class="blog-post-image" >
                <img src="{{ blogPost.img_url }}" style="width: 55vw; height: 60vh; background: gray;">
            </div>
        {% endif %}
        <div class="blog-post-content">
            {{ blogPost.content }}
        </div>
        {% endfor %}
    </div>
{% endblock %}

Jonathan Macalupu Reyes

student•

Gracias por sus aportes. Estuve haciendo pero modifiqué algunas cosas para que se vea mejor. Les mando los pasos y el código de cada archivo:

Paso 1: Modificar el index.twig al h2 la siguiente línea de código:

{% extends "layout.twig" %}
{% block content %}
		{% for blogPosts in blogPosts %}
	<div class= "blog-post">
		<h2 ><a href="{{ 'template/' | url }}{{ blogPosts.id }}">{{ blogPosts.title }}</a></h2>
		<p>Apr 20, 2018 <a href="">Alex</a></p>
		
			{% if blogPosts.img_url %}
				<div class="blog-post-image">
				<img src="{{blogPosts.img_url}}" alt="">
				</div>
			{% endif %}
		<div class="blog-post-content">
			{{blogPosts.content}}
		</div>
	</div>
	{% endfor %}
{% endblock %}

Paso 2: ruteamos el link “template” donde tendremos el TemplateController. Eso se realiza en index.php de la carpeta public:

$router->controller('/template', App\Controllers\TemplateController::class);

Paso 3: Creamos un archivo TemplateController.php en nuestra carpeta controllers donde colocaremos el código:

<?php 
namespace App\Controllers;
use App\Models\BlogPost;
use App\Controllers\BaseController;
class TemplateController extends BaseController {
	public function getIndex($id) {
		$blogPosts = BlogPost::where('id', $id) -> get();
		return $this->render('template.twig', ['blogPosts' => $blogPosts]);
	}
}
?>

Paso 4: Creamos el archivo template.twig con el siguiente código:

{% extends "layout.twig" %}
{% block content %}
			{% for blogPosts in blogPosts %}
	<div class= "blog-post">
		<a href="{{'' | url }}">Back</a>
		<h2 >{{ blogPosts.title }}</h2>
		<p>Apr 20, 2018 <a href="">Alex</a></p>
		
			{% if blogPosts.img_url %}
				<div class="blog-post-image">
				<img src="{{blogPosts.img_url}}">
				</div>
			{% endif %}
		<div class="blog-post-content">
			{{ blogPosts.content }}
		</div>
	</div>
	{% endfor %}
{% endblock %}

Jonathan Macalupu Reyes

student•

Adicionalmente subí el reto en un branch en mi github: https://github.com/jmacalupur/blogInPhp/tree/retoPaginacion

Angel

student•

Podrían subir el tutorial de como hacer esto?

Hector Benitez

teacher•

Hola 😃, podemos tratar de dividir este problema en varios pasos.

Cambiemos el twig de la pagina principal y los titulos en lugar de que sean: <h2>Titulo</h2> cambiemos por <h2><a href="/posts/1" >Titulo</a></h2>, en este ejemplo 1 es el id del blog post.
Creemos una ruta /posts/1 con su vista y su accion, pueden probar simplemente que la ruta funcione e imprimir el valor del parametro, esta prueba se haria simplemente para validar que todo esta funcionando
Creemos el contenido de esta pagina leyendo de la base de datos el post correspondiente al id que obtenemos de la ruta
Denle un poco de estilo 😉

Como extra, recuerden agregar una pagina de error en caso de que el post no sea encontrado

Rodolfo Miquilarena

student•

Disculpa como se pueden generar automaticamente esas vistas?

Brayan Murcia Sanchez

student•

una duda, quisiera agregar comentarios a cada uno de los posts, pero tengo una duda, coo seria la relación de las tablas? en sus llaves foráneas para los comentarios de los comentarios?, seria una buena practica relacionar una tabla consigomisma?,

William Arevalo

student•

De que forma puedo enviar el parametro title, a mi clase del controller? Si fuera tan amables de complementar el codigo seria de mucha ayuda.

$router->controller('/page/{title}', App\Controllers\PageController::class);

<?php  

namespace App\Controllers;
use App\Models\BlogPost;

class PageController extends BaseController{
	public function getIndex() {		
		
		$title = 
		$blogPost = BlogPost::where('title', ??);
		return $this->render('page.twig', ['blogPost' => $blogPost]);
	}
}


?>

Juan Carlos Graziani

student•

mas que enviar el título como parámetro, debes utilizar el id, ya que el título podría repetirse, mientras que el id es único

Iván Darío Sánchez Jiménez

student•

Sería precisa esa solución de consultar por título si solo si el campo title en la base de datos fuera de tipo UNIQUE

Kevin Lozoya Giner

student•

Aquí mi versión, lo he echo con URL amigable para buscadores, es decir, sería por ejemplo http://localhost/blog/public/post/2/post-with-img

Front Controller:

$router->controller('/post', \App\Controllers\PostController::class);

Controller:

namespace App\Controllers;

use App\Models\Post;
use App\Controllers\BaseController;

class PostController extends BaseController {
  
  public function getIndex($id, $title) {
    $post = Post::where('id', $id)->first();

    if ($post) {
      return $this->render('post.twig', ['post' => $post]);
    }

    header('Location: '.BASE_URL);
  }

}

Template:

{% extends 'layout.twig' %}

{% block content %}
<h2>{{ post.title }}</h2>
<p>Jan 1, 2020 by <a href="#">Alex</a></p>
{% if post.img_url %}
<div class="blog-post-image">
  <img class="img-fluid" src="{{ post.img_url }}" alt="">
</div>
{% endif %}
<div class="blog-post-content">
  {{ post.content }}
</div>
{% endblock %}

Kevin Lozoya Giner

student•

y la página principal:

{% extends 'layout.twig' %}

{% block content %}
  {% for post in posts %}
    <div class="blog-post">
      <a href="{{ 'post' | url }}/{{post.id}}/{{ post.title | replace({' ': '-'}) }}">
        <h2>{{ post.title }}</h2>
      </a>
      <p>Jan 1, 2020 by <a href="#">Alex</a></p>
      {% if post.img_url %}
      <div class="blog-post-image">
        <img class="img-fluid" src="{{ post.img_url }}" alt="">
      </div>
      {% endif %}
      <div class="blog-post-content">
        {{ post.content }}
      </div>
    </div>  
  {% endfor %}
{% endblock %}

Diego Forero

Team Platzi•

Puedes recibir directamente el title (slug) y hacer la búsqueda por esto, con eso en tu ruta no tienes que tener el id y luego el slug.

Kevin Lozoya Giner

student•

Una duda, a ver si alguien sabe hacerlo, plis

He hecho el controlador de post que envia un id

$router->controller('/post', \App\Controllers\PostController::class);

public function getIndex($id) {
    echo $id;
  }

Así que ahora si paso lo URL: http://localhost/blog/public/post/1
Me imprimirá el id, en este caso ‘1’.
Peeero si solo paso http://localhost/blog/public/post, entonces peta

Fatal error: Uncaught Phroute\Phroute\Exception\HttpRouteNotFoundException: Route post does not exist

¿Cómo podría tener en cuenta esa posibilidad y controlarla?
Muchas a todo, de antemano. ^-^

Diego Forero

Team Platzi•

Tienes que tener una función getIndex que no reciba parámetros para que puedas listar todos los posts, como tu getIndex espera un parámetro por esto es que falla.

Iván Darío Sánchez Jiménez

student•

o inicializar por default la variable el $id = ‘’ y tener una opción de respuesta para este valor

Daniel Hernandez

student•

No entiendo porque se me rompe el css en la nueva ruta que cree para la vista de los posts. Estoy importando bien el archivo css a el Layout, el index.twig funciona bien, pero el nuevo archivo para ver cada uno de los posts, se le rompe el css

Diego Forero

Team Platzi•

Revisa en la consola que este cargando correctamente el archivo css o si esta dando un error de archivo no encontrado o algo similar.

Daniel Hernandez

student•

Me lanza esto:

<br />
<b>Fatal error</b>:  Uncaught Phroute\Phroute\Exception\HttpRouteNotFoundException: Route detail/css/app.css does not exist in /Applications/MAMP/htdocs/Blog/vendor/phroute/phroute/src/Phroute/Dispatcher.php:218
Stack trace:
#0 /Applications/MAMP/htdocs/Blog/vendor/phroute/phroute/src/Phroute/Dispatcher.php(123): Phroute\Phroute\Dispatcher-&gt;dispatchVariableRoute('GET', 'detail/css/app....')
#1 /Applications/MAMP/htdocs/Blog/vendor/phroute/phroute/src/Phroute/Dispatcher.php(47): Phroute\Phroute\Dispatcher-&gt;dispatchRoute('GET', 'detail/css/app....')
#2 /Applications/MAMP/htdocs/Blog/public/index.php(64): Phroute\Phroute\Dispatcher-&gt;dispatch('GET', 'detail/css/app....')
#3 {main}
  thrown in <b>/Applications/MAMP/htdocs/Blog/vendor/phroute/phroute/src/Phroute/Dispatcher.php</b> on line <b>218</b><br />

pero no entiendo porque no detecta la ruta si está en la misma posición de Index.Twig, y este funciona bien.

Página para el detalle del blogpost

Estamos renovando el Curso de Introducción a PHP

¡Renovamos este curso!

Introducción

Presentación, contenidos y proyecto

Características de PHP

Antes de comenzar y Sintáxis

Introducción a PHP

Manejo de Variables y Tipos de Datos en PHP

Utilización de Cadenas de Caractéres en PHP

Arreglos

Operadores

Operadores - Aritméticos

Asignación

Comparación

Arrays

Incremento

Lógicos

Null

Funciones

Funciones en PHP

Estructuras Condicionales

Estructuras de Ciclos

Cargas de Archivos Externos

Manejo de Sesiones

Manejo de Cookies

Funciones Anónimas

Programación Orientada a Objetos

Introducción a Programación Orientada a Objetos

Constructor y Destructor

Herencia

Namespaces

Static

Abstract y Polimorfismo

Interface

Excepciones

Traits

PDO y SQL

Introducción a bases de datos SQL con PHP

Conexión desde PHP a una base de datos SQL

Insertar datos en nuestra de base de datos

Listar nuestros usuarios de la base de datos

Actualizar un Usuario en Nuestra Base de Datos

Borrar un usuario de nuestra base de datos

Cómo proteger nuestra base de datos ante ataques de SQL Injection

Construyento Nuestro Propio Blog

Creando la vista principal del Blog usando Bootstrap

Administrando los artículos del blog

Guardando los blogposts en la base de datos

Composer y carga automática de archivos

Creando la Organización de Nuestro Blog

Introducción a Front Controller

Introducción a Router

Renderizando las vistas desde un método

Agregando el resto de las rutas a nuestro Router

MVC y Templates en Nuestro Blog

El patrón de diseño Model-View-Controller en PHP

¿Por qué usar un motor de templates en PHP?

Instalación y configuración de Twig

Templates de vistas con Twig

Extendiendo layouts con Twig

Modelos con Eloquent

Configuración de variables de entorno

Validaciones de formularios en PHP

Usuarios

Agregando un modelo para los usuarios del blog

Crear usuarios para el blog

Autenticación de usuarios en PHP

Logout de usuarios

Detalles Finales

Protege ciertas rutas con middlewares y filtros

Subir archivos al servidor

Guardando un log de errores en el servidor

Página para el detalle del blogpost

Paginación

Editar y borrar blogposts

Agregar validación del lado del cliente

Cierre del Curso