Crear mensajes de notificación emergentes con laravel, toastr, jQuery y bootstrap:
En este tutorial, les enseñare como crear un sencillo formulario de contacto, a validar este formulario de contactos con laravel y después de guardar los datos del formulario, mandar una notificación de éxito con toastr al usuario.Como sabemos, para cualquier propietario de un sitio web, el formulario de contacto es una de las primeras prioridades y que no tiene que faltar en un sitio web, ya que su medio para comunicarse con el dueño del sitio.
Utilizando el formulario de contacto, se puede llevar un registro de los usuarios que desean contactarse con usted y cuando usted tiene los datos de contacto del usuario o posible cliente, fácilmente se puede enviar una notificación a los usuarios a través de sus direcciones de correo electrónico.
Aquí voy a diseñar formulario de contacto de arranque sencilla que tiene 3 campos: nombre, correo electrónico y mensajes.
Primer paso: Instalar Laravel 5.4
Antes de seguir con los siguientes pasos, debe crear su proyecto en su sistema local en primer lugar. Si su proyecto laravel todavía no esta creado, entonces primero creamos el proyecto ejecutando el siguiente comando:composer create-project --prefer-dist laravel/laravel blog
Una vez nuestro proyecto laravel creado correctamente con composer, seguimos con el siguiente paso.
Segundo paso: Creamos el modelo y migración en Laravel 5.4
En este paso creamos nuestro modelo y migracion con un solo comando:php artisan make:model Contacto -m
Nuestra migracion quedara así:
database/migrations/nombre de la migracion
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateContactosTable extends Migration { public function up() { Schema::create('contactos', function (Blueprint $table) { $table->increments('id'); $table->string('nombre'); $table->string('email'); $table->string('mensaje'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('contactos'); } }
Nuestro modelo Contacto:
App/Contacto.php
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Contacto extends Model { public $fillable = ['nombre','email','mensaje']; }
Ejecutamos el siguiente comando para que se cree el modelo de nuestra migración en la base de datos:
php artisan migrate
Tercer paso: Agregar las rutas y crear el controlador
En este paso vamos a crear dos rutas. Primera ruta GET sera para mostrar nuestra vista con el formulario y segunda ruta con el método POST serán enviar los datos para ser guardados y retornar el mesaje.Añadir estas dos rutas en su archivo de rutas, en routes/web.php. Nota en versiones pasadas este archivo se encuentra en esta ruta app/Http/routes.php
Route::get('contacto',array('as'=>'getcontacto','uses'=>'ContactoController@getContacto'));
Route::post('contacto',array('as'=>'postcontacto','uses'=>'ContactoController@postContacto'));
Ahora vamos a crear nuestro controlador ContactoController.php en el directorio de controladores. Puedes crearlo manualmente o con el siguiente comando:
php artisan make:controller ContactoController
app/Http/Controllers/ContactoController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Contacto; class ContactoController extends Controller { public function getContacto() { return view('contacto'); } public function postContacto(Request $request) { $this->validate($request, [ 'nombre' => 'required', 'email' => 'required|email', 'mensaje'=>'required' ]); Contacto::create($request->all()); $notificacion = array( 'message' => 'Gracias! Su mensaje se a enviado con exito.', 'alert-type' => 'success' ); return redirect()->back()->with($notificacion); } }
Ultimo paso: Creamos nuestra vista de contactos en Laravel 5.4
A crear nuestra vista:resources/views/contacto.blade.php
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hacer notificaciones de mensajes emergentes en Laravel con toastr y jquery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" media="all" /> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"> </head> <body> <br><br><br> <div class="container col-md-offset-3 col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3>Hacer notificaciones de mensajes emergentes en Laravel con toastr y jquery</h3> </div> <div class="panel-body"> <form action="{{route('postcontacto')}}" method="POST"> {{csrf_field()}} <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Nombre:</strong> <input type="text" name="nombre" class="form-control"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Email:</strong> <input type="text" name="email" class="form-control"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Mensaje:</strong> <textarea name="mensaje" class="form-control" ></textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 text-center"> <input type="submit" class="btn btn-success"> </div> </form> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script> @if(Session::has('message')) var type = "{{ Session::get('alert-type', 'info') }}"; switch(type){ case 'info': toastr.info("{{ Session::get('message') }}"); break; case 'warning': toastr.warning("{{ Session::get('message') }}"); break; case 'success': toastr.success("{{ Session::get('message') }}"); break; case 'error': toastr.error("{{ Session::get('message') }}"); break; } @endif </script> </body> </html>
Y eso seria todo :)
