Building a Todo web app using PHP, Laravel and Bootstrap

Ricardo Sanchez

Ricardo Sanchez

— 3 min read

I want to learn more about web frameworks that I am not too familiar with. My plan is to write simple web and mobile apps using different frameworks and technology stacks that I don’t have much experience with. While this is not going to make me an expert on any of these technology stacks or frameworks, it will give me the right amount of knowledge to decide if I like it by learning how to set up my environment, the tooling and the basic syntax of each. The first one of these apps is a to-do list which I wrote using PHP and bootstrap. Since I want to try new (to me) web frameworks I also used Laravel which is a PHP web framework that has everything you need to build a web application.

If you are learning PHP I want to recommend you give Laravel a try.

Setting up your environment

I recommend using Composer to install Laravel, Composer is a package management for PHP, just like Nuget for .NET, Maven for Java, RubyGems for Ruby, or npm for Node.js – you get the idea…

To install Composer you can do one of the following:

curl -sS https://getcomposer.org/installer | php
php -r "readfile('https://getcomposer.org/installer');" | php

Or using the Windows installer. The installer will download composer for you and set up your PATH environment variable so you can simply call composer from any directory.

Download and run Composer-Setup.exe – it will install the latest composer version whenever it is executed.

Once you have composer in your system, use it like this:

composer create-project laravel/laravel your-project-name --prefer-dist

This command will download and install a fresh copy of Laravel in a new your-project-name folder within your current directory. Next run the composer install command in the root of your manually created project directory. This command will download and install the framework’s dependencies.

Serving your web app

You can use a web server such as Apache or Nginx to serve your Laravel applications. Also, if you are in a Windows environment and have Webmatrix installed, you can use this to serve and also write your Laravel applications as well.

However, for this example I used PHP’s built-in development server, it is great for use while developing a Laravel application.

You will need to have PHP 5.4+ installed in your system to use it.To start PHP’s built-in development server and launch your application type the following command

php artisan serve

By the way, artisan is the name of the command line interface (CLI) included in Lavarel, you can read more about it here.

After executing the above command, you should see the following message:

Laravel development server started on http://localhost:8000

This development server automatically uses port 8000 to serve web applications, you can change the port number if necessary by specifying it as --port=some-port-number

php artisan serve --port=8080

 Setting up Routing

Setting up routes using Laravel is quite easy. See example below:

Route::get('hello', function()
{
      return 'Hello World';
});

The above route will return “Hello World” when you browse to http://localhost:8000/hello.

In my web application example I have the following routes:

Route::get('todos', function()
{
	$todos = Todo::all();

    return View::make('todos')->with('todos', $todos);
});

Route::post('todos', 'HomeController@savetodo');

The first route basically returns http://localhost:8000/todo with a list of all todo items stored in the database. The second route posts to the HomeController, and used the function saveTodo to save a new todo item. Before we can use the above routes, we have to setup our views, model and database.

Setting up Views

Views live in the app/views directory and contain the HTML of the application. We’re going to place two new views in this directory: layout.blade.php and todo.blade.php. First, let’s create our layout.blade.php file which you can find in its entirety here, but this is the one important line that needs to be included in the view:

@yield('content')

The code above is the entire layout.blade.php view which acts as a template for your web application. The rest of the views use this template, they are rendered by calling @yield(‘content’).

In order for the rest of your views to use this template you have to add the following to the top of your views:

@extends('layout')
@extends('content')

I am excluding the rest of the content in the view todos.blade.php for brevity but you can download the entire project here.

That is all for this PHP ToDo web app built using the Laravel framework and Bootstrap. Hope it is useful for some and please feel free to download it, use it, change it and please let me know any thoughts you might have about it. Cheers!

I am currently available for freelance – contact me if you need help with a software project.

Read more