Improving outputs

Table des matières

Our Todos’s application is now up and running (we can add new items and display all of them). We can now improve the look&feel of the interface.

1. Update the controller

Edit /app/Http/Controllers/TodoController.php and replace the index function with the one below.

Every record of the Todo table will be retrieved and pass to the todos view (will be created below) a variable called $data.

public function index()
{
    $data = Todo::all();

    return view('todos', compact('data'));
}

2. Create a todos view

Create /resources/views/todos.blade.php for displaying all todos.

Use the Blade language for checking if there are todos to show and if it’s the case, loop and display every title.

Add a link below the list to add new items.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Some stupid Todos application</title>
    <link media="screen" rel="stylesheet" type="text/css" href="/css/app.css" />
</head>
<body>
    <main role="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Some stupid Todos application</h1>
          <p>A simple Laravel application</p>
        </div>
      </div>
    </main>
    <div class="container">
        @isset($data)
            <ol>
                @foreach($data as $todo)
                    <li>{{ $todo->title }}</li>
                @endforeach
            </ol>
        @endisset
        <hr/>
        <a href="/todo" >Add new item</a>
    </div>

</body>
</html>

Show index

3. Edit the todo_ok view

Improve the look and feel of /resources/views/todo_ok.blade.php, replace the view’s content by:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Some stupid Todos application</title>
    <link media="screen" rel="stylesheet" type="text/css" href="/css/app.css" />
</head>
<body>
    <main role="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Some stupid Todos application</h1>
          <p>A simple Laravel application</p>
        </div>
      </div>
    </main>
    <div class="container">
        <div class="panel-body">
        Successfully stored in the database
        </div>
        <hr/>
        <a href="/todo" >Add new item</a> - <a href="/todos">Show all</a>
    </div>

</body>
</html>

Successfully stored in the database

4. Improve the fom

Improve the look and feel of the input form by setting a new content in /resources/views/form.blade.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Some stupid Todos application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link media="screen" rel="stylesheet" type="text/css" href="/css/app.css" />
</head>
<body>
  <main role="main">
    <div class="jumbotron">
      <div class="container">
        <h1 class="display-3">Some stupid Todos application</h1>
        <p>A simple Laravel application</p>
      </div>
    </div>
  </main>
  <div class="container">
    <div class="panel-heading">Add a new Todo</div>
    <div class="panel-body">
      {!! Form::open(['route' => 'storeTodo']) !!}
        <div class="form-group {!! $errors->has('todo') ? 'has-error' : '' !!}">
          {!! $errors->first('title', '<small class="help-block">:message</small>') !!}
          {!! Form::text('title', null, array('size' => '100', 'class' => 'form-control', 'placeholder' => 'Enter Todo\'s title')) !!}
        </div>
        <div class="form-group ">
          {!! Form::checkbox('completed', 1, 0)  !!}
          {!! Form::label('completed', 'Completed'); !!}
        </div>
        {!! Form::submit('Submit !') !!}
      {!! Form::close() !!}
    </div>
    <hr/>
    <a href="/todos">Show all</a>
  </div>
</body>
</html>

Get Todo

5. Test the application

Go to http://127.0.0.1:8000/todo and

The list of todos is accessible at http://127.0.0.1:8000/todos, click on the Add new item link for getting the input form.

By submitting a new todo, the feedback screen will display the two hyperlinks: Add new item and Show all

The application is working with a basic Bootstrap theme.