Creating A Todo App With SMS Alerts In Laravel 5

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

SMS Alerts In Laravel!

Today I am going to show you how easy it is to create a todo app with  SMS alerts in Laravel. Everything needed in including in the Laravel installation. I am using Laravel Homestead as my development machine image.
 

What Will We Be Building?

A canonical example to learn building web apps is creating a todo list app. I wanted to take the concept a step further. Wouldn’t it be nice to also receive a text message with the todo item? We will build exactly that. Building an SMS server is actually quite easy. It is as simple as sending an email to phonenumber@gateway.com a more comprehensive tutorial can be found here.  This example will also serve as an excellent use case for Laravel’s Event system. Let’s get started!
 

Steps

First thing is first, cd into an empty directory and start a new Laravel installation:

laravel new Todo

cd into your new application and lets create a new migration. We only need one model right now, a Todo model, run this command next.

php artisan make:model Todo --migration

This command not only creates our Model class for us, it also creates the db migration file too! Open your migration file @ database/migrations/MIGRATION.php and replace the old up() function with the following code.

public function up()
{
Schema::create('todos', function (Blueprint $table) {
$table->increments('id');
$table->string('content');
$table->timestamps();
});
}

Our model is extremely simple all we want to do is store a string containing our todo.
Next we are going to create a controller for our Todo model, in your terminal type in this command:
php artisan make:controller TodoController
Now open up the newly created controller file and copy this code in your store() method

//create Todo Model and
$todo = new Todo;
$todo->content = $request->content;
//$todo->save();
//launch event
event(new TodoCreatedEvent($todo));
return view('welcome');

Be sure to add

use AppTodo; and use AppEventsTodoCreatedEvent;

at the top of the page. Right now this function will break because we have not yet defined TodoCreatedEvent class, let’s create that and the TodoCreatedListener. Open up

App/Providers/EventServiceProvider.php and replace the protected $listen variable with this
protected $listen = [
'AppEventsTodoCreatedEvent' => [
'AppListenersTodoCreatedListener',
],
];

Laravel is pretty awesome about its CLI, head over to the terminal and cd into your project root and run this command

php artisan event:generate

This command will create all the events and listeners defined in the array above and scaffolds the code for you AWESOMESAUCE. Now head over to the newly created event class located at

App/Events/TodoCreatedEvent.php.

This event will do one thing, inject an Eloquent model, then pass to the listener. Laravel’s event system does an excellent job at decoupling tasks, all our our event logic will be contained in the TodoCreatedListener class. Replace the contents of your event with this:

<?php
namespace AppEvents;
use AppTodo;
use AppEventsEvent;
use IlluminateQueueSerializesModels;
use IlluminateContractsBroadcastingShouldBroadcast;

class TodoCreatedEvent extends Event
{
use SerializesModels;

public $todo;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Todo $todo)
{
//set variables
$this->todo = $todo;
}

/**
* Get the channels the event should be broadcast on.
*
* @return array
*/
public function broadcastOn()
{
return [];
}
}

See? Simple! Now let’s get into the meat over at

App/Listeners/TodoCreatedListener.php

. In this file we are only concerned with the handle() method which you can see injects an instance of our event for us! Here we are going to send an email to our cell phones (FREE TEXTS). Change your handle method to look like this:

<?php
namespace AppListeners;
use Mail;
.
.
.
.
public function handle(TodoCreatedEvent $event)
{
//set todo
$text = $event->todo->content;
Mail::raw($text, function ($message) {
$message->from(env('MAIL_USERNAME','john.smith@email.com'));
$message->to(env('PHONE','123-456-7890@gateway.com'));
});
}.

A couple things left on the backend, first off head over  to your routes file located at App/Http/routes.php add this route:

Route::post('addTodo','TodoController@store');.

Last thing to do now is edit your .env file and add all the necessary details about mail providers, as well as a phone variable to hold your number. That’s it for the backend!
All we have to do now is create a form to create the todos! Open up resources/views/welcome.blade.php and replace the contents with this:

<!DOCTYPE html>
<html>
<head>
<title>Todo SMS</title>

<link href="/css?family=Lato:100" rel="stylesheet" type="text/css">

<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: table;
font-weight: 100;
font-family: 'Lato';
}

.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}

.content {
text-align: center;
display: inline-block;
}

.title {
font-size: 96px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">

<form method="POST" action="/addTodo">
{!! csrf_field() !!}

<div>
Content
<input type="text" name="content" value="{{ old('content') }}">
</div>

<div>
<button type="submit">Add Todo </button>
</div>
</form>
</div>
</div>
</body>
</html>

Test it out and try for yourself! Enjoy guys! You can see the full repo here! You can view the live app here!