Formulario de Edición de Artículos con Laravel

Clase 24 de 37 • Curso de Introducción a Laravel 6

Resumen

¿Cómo trabajar con formularios de edición en Laravel?

¡Bienvenido a una nueva clase llena de aprendizaje! Hoy exploraremos cómo crear y configurar un formulario de edición en Laravel. Esto te ayudará a reforzar lo aprendido al crear formularios de creación. Reconstruiremos juntos el proceso de edición de un post en nuestra aplicación.

Comenzaremos por entender cómo llevar una página en blanco al retorno efectivo de un formulario de edición al hacer clic en el botón "Editar", integrando código de Laravel y PHP para potenciar nuestra aplicación.

¿Cómo configurar el controlador para una ruta de edición?

Primero necesitamos asegurarnos de que nuestro controlador devuelva la vista del formulario de edición. Para ello, configuraremos la ruta de manera adecuada:

Eliminar el método show en caso de que no se esté utilizando.
Retornar la vista "edit" dentro de la carpeta posts, de la siguiente manera:
```
return view('posts.edit', compact('post'));
```
Crear la vista edit.blade.php en la carpeta correspondiente.

¿Cómo iniciar la configuración del formulario?

El siguiente paso implica la creación y configuración del formulario de edición en Laravel:

Crear la estructura básica del formulario:
- Usa Form::open para indicar la ruta y método del formulario.
- Utiliza POST con un campo oculto para indicar el método PUT.
- Añadir el enctype para permitir la carga de archivos.
```
{!! Form::open(['route' => ['posts.update', $post->id], 'method' => 'PUT', 'files' => true]) !!}
```

Configurar los inputs necesarios:

Campo de texto para el título (obligatorio y recuperando el valor).

{!! Form::text('title', old('title', $post->title), ['class' => 'form-control', 'required' => true]) !!}

Campo de archivo para la imagen (no obligatorio).

Área de texto para el contenido (obligatoria):

{!! Form::textarea('body', old('body', $post->body), ['class' => 'form-control', 'rows' => 6, 'required' => true]) !!}

Agregar el botón de envío:
- Botón de tipo submit con los estilos adecuados:
```
{!! Form::submit('Actualizar', ['class' => 'btn btn-primary']) !!}
```

¿Cómo asegurar la funcionalidad del formulario de edición?

Para asegurarnos de que el formulario funcione correctamente en Laravel debemos:

Pasar la variable $post desde el controlador a la vista utilizando el método compact.
Verificar que la ruta y método cumplen con el uso correcto de PUT para actualizaciones.

¿Qué métodos utiliza Laravel para el manejo de rutas y formularios?

Laravel ofrece configuraciones automáticas para rutas tipo resource, abarcando CRUD completo:

GET para mostrar formularios de creación y edición.
POST y PUT para crear y actualizar respectivamente.
DELETE para eliminar registros.

Un comando útil en Laravel para revisar las rutas configuradas es:

php artisan route:list

Este comando te mostrará claramente qué rutas están configuradas y bajo qué método HTTP operan, garantizándote claridad y orden en tus procesos de desarrollo.

¡Sigue explorando y experimentando con el poder de Laravel para desarrollar aplicaciones robustas y dinámicas! El siguiente paso será actualizar los datos en nuestra base de datos. ¡Adelante, tu futuro en el desarrollo está cada vez más cerca!

KEVIN BRAYAN LUNA FIGUEROA

student•

Que helper me puede ayudar a poder mostrar mi imagen, en la carpeta storage? En la carpeta public podemos utilizar

asset();

Fernando Mejia

student•

para mostrar imagenes en un archivo blade si estan guardadas en storage, debemos de usar el comando:

php artisan storage:link

Este comando creara un link simbolico desde la carpeta storage/public de tu app en Laravel a public/storage con esto tendras acceso a mostrar tus imagenes de forma publica

{{ url('storage/app/images/'.$article-&gt;image) }}

ahora si ves tu carpeta public cuentas con una carpeta storage que es un link (reflejo) de la carpeta storage, asi que ahora puedes usar el helper url() para obtener la imagen de la carpeta storage DEL FOLDER PUBLIC, no a la ruta del sistema storage de tu app:

{{url(‘storage/posts/’.$post-&gt;image)}}

es imporante esta diferencia porque normalmente en produccion solo a tu carpeta public se puede y se debe acceder, no deberias dar permisos para que visualizen carpetas internas del app

Alessandro Staiano

student•

Fernando, tu aporte me parecio genia, personalmente tuve que cambiar unas cosas para que me funcionase, las dejo aqui por si alguien tambien las necesita.

Lo primero en este codigo las comillas que estan crean conflicto, hay que poner unas simples.

{{url(‘storage/posts/’. $post->image)}}

Yo lo puse asi, y ademas como la imagen ya se guarda como posts/jhbiub8493874rh78.jpj lo que hice fue retirarlo de la ruta ya que creaba conflicto:

{{url('storage/'. $post->image)}}

Con esto me funciono perfecto y la verdad que es una gran truco gracias

David Antonio Garcia Saaib

student•

Amigos no olviden escribir en la linea del form despues de la ruta el dato que se recibe desde el controlador, hasta la proxima amigos.

Italo Morales Fantone

teacher•

Genial

Tomas Goldenberg

student•

Funcion de editar posts

A)RUTAS B)Controllers C) views


A) EN LA VISTA INDEX EN EL BOTON DE EDITAR ESTA ENLAZADO CON LA RUTA POSTS.EDIT


B) En el controller creamos el method edit
    public function edit(Post $post)
    {
                return view("posts.edit", compact('post'));

    }

C) resources/views/posts/edit.php
            <div class="card">
                <div class="card-header">Editar Articulo</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                   <form action="{{ route('posts.update', $post) }}" 
                         method="POST"
                         enctype="multipart/form-data"
                    >
                            <div class="form-group">
                                <label >Titulo *</label>                                            //<!--aparece lo que ya estaba escrito -->
                                <input type="text" name="title" class="form-control" required value="{{ old('title', $post->title) }}  ">
                            </div>

                            <div class="form-group">
                                <label >Imagen</label>                                            
                                <input type="file" name="file">
                            </div>


                            <div class="form-group">
                                <label >Contenido *</label>                                            //<!--aparece lo que ya estaba escrito -->
                                <textarea name="body" rows="6" class="form-control" required>{{ old('body', $post->body) }}</textarea>
                            </div>

                            <div class="form-group">
                                <label >Contenido embebido</label>                                            //<!--aparece lo que ya estaba escrito -->
                                <textarea name="iframe" class="form-control" required>{{ old('iframe', $post->iframe) }}</textarea>
                            </div>


                            <div class="form-group text-center">
                                @csrf
                                @method('PUT')
                                <input type="submit" value="Actualizar" class="btn btn-lg btn-outline-success">
                            </div>
                    </form>
                </div>
            </div>

Alessandro Staiano

student•

https://prnt.sc/tpe3hm

Mi resultado del formulario de editar.

Para el que quiera os dejo por aqui mi rep de github que voy actualizando a diario segun continuo el curso, si tienes cualquier problema o error puedes consultarme sin problema.

https://github.com/alessandrostfr/Platzipress

Paúl Terán

student•

Para los amantes de las validaciones!

@if (!empty($post->image))
                          <div class="col-12">
                            <label>Imagen</label>
                          </div>
                          <div class="center">
                            <img 
                              src="{{ url('storage/'. old('image', $post->image)) }}" 
                              style="width: 60%; height: 80%"  
                              class="rounded mx-auto d-block"
                              alt="image"
                            >
                          </div> 
                        @else
                          <div class="alert alert-secondary" role="alert">
                            Este post no contiene imagen de portada!
                          </div>  
                        @endif

Añaqui Apolinar Morales

student•

Alguien ya lo ha hecho con laravel 8 ? Tengo el problema de que en la ruta de edit no manda el parametro que señalo, use un dd para ver que es lo que envia pero no manda nadaMe pueden ayudar ?

Jhon Fabio Cardona Martinez

student•

Yo estoy realizando el curso con la versión de Laravel 8, este es el método desde el controlador

# PostController.php
public function edit(Post $post)
{
    return view('posts.edit', compact('post'));
}

Formulario desde el archivo de la vista edit.blade.php de la carpeta o directorio de posts.

<form action="{{ route('post.update', $post) }}" method="post" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="form-group">
        <label for="titulo">Título *</label>
        <input id="titulo" class="form-control" type="text" name="title" value="{{old('title', $post->title)}}" required>
    </div>

    <div class="form-group">
        <label for="file">Image</label>
        <input id="file" class="form-control-file" type="file" name="file">
    </div>

    <div class="form-group">
        <label for="body">Contenido *</label>
        <textarea id="body" class="form-control" name="body" rows="2" required>
            {{old('body',$post->body)}}
        </textarea>
    </div>

    <div class="form-group">
        <label for="iframe">Contenido embebido</label>
        <textarea id="iframe" class="form-control" name="iframe" rows="2">
            {{old('iframe',$post->iframe)}}
        </textarea>
    </div>

    <div class="form-group">
        <input type="submit" value="Actualizar" class="btn btn-sm btn-primary">
    </div>

</form>

Espero que te sirva.

Daniela Alarcón Gamboa

student•

Pueden crear un archivo ** form.blade.php** y agregar el siguiente código:

<div class="form-group mt-2">
    <input type="text" name="title" placeholder="Title*" value="{{ $post->title ?? old('title') }}" class="form-control" required>
</div>
<div class="form-group mt-2">
    <input type="file" name="image" class="form-control">
</div>
<div class="form-group mt-2">
    <textarea name="body" placeholder="Body*" rows="6" class="form-control" required>{{ $post->body ?? old('body') }}</textarea>
</div>
<div class="form-group mt-2">
    <textarea name="iframe" placeholder="Embed code" class="form-control">{{ $post->iframe ?? old('iframe') }}</textarea>
</div>
<div class="form-group mt-2">
    <input type="submit" value="Send" class="btn btn-sm btn-primary">
</div>

Y en sus forms dentro de create.blade.php y edit.blade.php hacer lo siguiente:

<form action="{{ route('post.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @include('admin.form')
</form>

<form action="{{ route('post.update', $post) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        @include('admin.form')
</form>

Kenneth Angulo L

student•

Gracias, es una buena manera de reutilizar codigo.

Carlos Eduardo Gomez García

teacher•

Basicamente recreamos la vista del create, pero usando el helper old(), claro, no esta de más dar el repaso:D!

Juan José del Aguila López

student•

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Editar Artículo</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <form action="{{ route('posts.update', $post) }}" method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>Título *</label>
                            <input type="text" name="title" class="form-control" required value="{{ old('titulo',$post->title) }}">
                        </div>
                        <div class="form-group">
                            <label>Imagen</label>
                            <input type="file" name="file">
                        </div>
                        <div class="form-group">
                            <label>Contenido *</label>
                            <textarea name="body" rows="6" class="form-control" required>{{ old('body',$post->body) }}</textarea>
                        </div>
                        <div class="form-group">
                            <label>Contenido embebido</label>
                            <textarea name="iframe" class="form-control">{{ old('iframe',$post->iframe) }}</textarea>
                        </div>
                        <div class="form-group">
                            @csrf
                            @method('PUT')
                            <input type="submit" value="Actualizar" class="btn btn-sm btn-primary">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Ricardo Cortés Hurtado

student•

como podria hacer, si solo quiero actualizar una columna? por ejemplo: tengo una tabal con una columna llamada estado, donde activo es 1 e inactivo es 0 , quiero poder cambiar a uno o 0 cuando se a posible, como lo implementaria?

Kenneth Angulo L

student•

Deberas mandar la informacion mediante un formulario POST que implemente el metodo PATCH. (similar a como el profesor creo el boton de delete)

asi:

<form method="POST" action="{{ route('ruta.update', $post) }}">
    @csrf
    @method('PATCH')

	(aqui deberias tener el elemento html con (name="estado") que sirva para que el humano modifique el estado, ejemplo un check list o un radio button)

</form>

Y en el update del controlador (o la accion que hallas destinado para tal fin), hacer una actualziacion del registro buscandolo por id, pero solamente acctualizando el campo que necesitas asi:

	/**
	 * Update the specified resource in storage.
	 *
	 * @param  App\Http\Requests\PostRequest  $request
	 * @param  \App\Models\Post  $post
	 * @return \Illuminate\Http\Response
	 */
	public function update(PostRequest $request, Post $post)
	{
		Post::where('id', $post->id)
      		->update(['estado' => $request->estado ]);
	}

Cristian Henao

student•

¿Alguien sabe a que se debe esa línea en blanco inicial del contenido?

                        <div class = "form-group">
                            <label> Contenido *</label>
                            <textarea name="body" rows="6" class = "form-control" required>
                                {{old('body', $post->body)}}
                            </textarea>
                        </div>

Manuel Andrés Buriticá Yepes

student•

La etiqueta textarea debe cerrarse en la misma línea de código para que no te genere ese espacio, debería funcionarte así:

<div class="form-group">
	<label>Contenido *</label>
	<textarea name="body" rows="6" class="form-control" required>{{old('body', $post->body)}}</textarea>
</div>

Fabian Gutiérrez

student•

Para ahorrar tiempo y código, ¿estaría bien hecho reutilizar la vista de create.blade.php y hacer un if que si la url es edit, diga: Editar Articulo y si es create que diga: Crear articulo y utilizar el operador ternario para condicionar que si existe la variable $post se coloque el contenido como titulo o body y si no existe esté vacío? o estaría mal hecho? espero me haya explicado correctamente

Héctor Tello

student•

Sí, sería lo mejor. En cuanto al if, lo que yo haría sería agregarle un parámetro a la vista, una variable llamada $titulo, o algo parecido, para que al momento de mandar a llamar a la vista, me mandes el texto que quieres que se muestre.

En cuanto al operador ternario, está bien.

Erasmo Andrés Martínez Rodríguez

student•

Buenas noches bro.

Tienes ese código para ver como lo realizaste?

Eduardo Venegas Rivera

student•

¿Cómo puedo evitar que un usuario pueda editar posts que no le corresponden?

Para mostrar los posts del usuario que se ha autenticado en el archivo PostController edite la función index:

 public function index()
    {
        $user = auth()->user();
        $posts = $user->post;

        return view('posts.index', compact('posts'));
    }

pero si yo manualmente cambio la url por el id de un post que no es del usuario también lo puede editar, como se evita eso?

Francisco Javier Saavedra Alcala

student•

Primer deberias poner un where donde solo te traigas los post de autoria del usuario logueado, y segundo agregar una condicion en el método update qué si el post le pertenece lo puede editar y si no le pertenece pues no. En los blogs se manejan diferentes usuarios tipo lo que se hace en wordpress, creo que seria una buena mejora para este proyecto pero si llevaría su tiempo jaja. Espero haberte ayudado… #NuncaParesDeAprender

Eduardo Venegas Rivera

student•

Gracias por tu respuesta, ya estoy implementando el paquete laravel-permission para manejar roles y permisos en el proyecto. Saludos xD.

Paul Cortes

student•

Excelente clase de actualizacion

Earvin Saúl Pérez Ramos

student•

Disculpen, podrán recordarme la razón de usar la función compact para enviar los datos a la vista del editar?

Juan Carlos Graziani

student•

Es otra manera de enviar el array que se ha estado usando

Jimmy Buriticá Londoño

student•

Vamos bien, hacer un post es un buen ejemplo.

Jose Rosado

student•

Gracias

Oscar Stevens Cuartas Bejarano

student•

momento, momento momenticoooooooo... mostro como poner la carga de los campos en el formualrio de editar con {{ old('tales') }}........... y la imagen que??' como se precarga??