lunes, 29 de mayo de 2017

Hacer notificaciones de mensajes emergentes en Laravel

   



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.

Hacer notificaciones de mensajes emergentes en Laravel



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>

notificaciones de mensajes emergentes en Laravel
notificaciones de mensajes emergentes en Laravel



Y eso seria todo :)

César GI

About César GI

Lo que me importa es poder enseñar lo poco que se, por que asi como yo aprendo leyendo gracias a las personas que comparten sus conocimiento yo tambien quiero ayudar a la comunidad en español aportando lo poco que he aprendido hasta el momento.