Todo Laravel Project

Todo Laravel Project - Getting StartedTodo Laravel Project - Migration - Creating todos tableTodo Laravel Project - Model - Working with todos tableTodo Laravel Project - Laravel TinkerTodo Laravel Project - RoutesTodo Laravel Project - Routes - Home page routeTodo Laravel Project - Routes - Active, Done, Deleted page routesTodo Laravel Project - Blade Template - The master layoutTodo Laravel Project - Home page viewTodo Laravel Project - Navigation barTodo Laravel Project - Views for Active, Done and Deleted pagesTodo Laravel Project - Form to create new todo tasksTodo Laravel Project - Handle form submission - Create new todo taskTodo Laravel Project - Show todo task detailTodo Laravel Project - Controller - Creating the TodoControllerTodo Laravel Project - Form to edit todo tasksTodo Laravel Project - Edit action button for the todo tasksTodo Laravel Project - Handling update requestTodo Laravel Project - Delete action button for the todo tasksTodo Laravel Project - Handling delete request

Todo Laravel Project - Form to create new todo tasks

Laravel Project

← PrevNext →

In this Laravel project tutorial we will create a form to create a new todo task.

Form to create new todo task

Create a new file form-new-todo.blade.php inside the resources/views/layouts directory and write the following code.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3 my-3">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">New</button>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Todo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

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

          <!-- Todo title -->
          <div class="form-group">
            <label for="todo-title" class="control-label">Title</label>
            <input type="text" name="todo-title" id="todo-title" class="form-control" required>
          </div>

          <!-- Todo description -->
          <div class="form-group">
            <label for="todo-description" class="control-label">Description</label>
            <textarea name="todo-description" id="todo-description" class="form-control" rows="3" required></textarea> 
          </div>

          <!-- button -->
          <div class="float-right">
            <button type="reset" class="btn btn-secondary">Reset</button>
            <button type="submit" class="btn btn-primary">Create</button>
          </div>
        </form>
        
      </div>
    </div>
  </div>
</div>

In the above code we are creating a New button. When the user will click that button then a Bootstrap Modal will be displayed.

Inside the body of the modal we have a form which will allow us to create a new todo task.

The csrf_field()

Note! We are using {{ csrf_field() }} in the form.

It will create a hidden field in the form which the Laravel application will use to prevent CSRF (Cross-site request forgery) attack.

Now we will include this form-new-todo.blade.php file inside the master layout.

Form submit

If user clicks on the Submit button then the data of the form will be submitted to /todo URL via POST request.

We will discuss about form handling in the next tutorial.

Adding the new todo form in master layout

Open app.blade.php file inside the resources/views/layouts directory and include the form-new-todo file after the navigation.

<!-- navigation bar ends here -->

@include('layouts.form-new-todo')

@yield('content')

Note! The line @include('layouts.form-new-todo') tells Laravel to include form-new-todo.blade.php file which is inside the resources/views/layouts directory.

If we open the home page in the browser we will get the following output.

On clicking the New button we will get the form.

Alright, our form is ready. In the next tutorial we will handle the form submission.

See you there. Have fun coding.

← PrevNext →