Laravel Project
In this Laravel project tutorial we will create a form to create a new todo task.
Create a new file form-new-todo.blade.php inside the resources/views/layouts directory and write the following code.
form-new-todo.blade.php
resources/views/layouts
<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">×</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.
New
Inside the body of the modal we have a form which will allow us to create a new todo task.
csrf_field()
Note! We are using {{ csrf_field() }} in the form.
{{ csrf_field() }}
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.
If user clicks on the Submit button then the data of the form will be submitted to /todo URL via POST request.
/todo
POST
We will discuss about form handling in the next tutorial.
Open app.blade.php file inside the resources/views/layouts directory and include the form-new-todo file after the navigation.
app.blade.php
form-new-todo
<!-- 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.
@include('layouts.form-new-todo')
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.