How can i show a modal through a route and a controller in laravel?

Question

So, i want to make a login form using modal. i have been searching a solution of this, and i still confusing(because all the solutions in english and i'm not really good in english). and didn't know how the code of solution works. So, maybe someone can help me by fix some line of my code and explain me how it works? please?

This is my file that contain the modal

<!-- Modal Login-->
    <div class="modal fade" id="loginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <!--Content-->
            <div class="modal-content form-elegant">
                <!--Header-->
                <div class="text-center">
                    <h3 class="modal-title w-100 dark-grey-text font-weight-bold mt-5" id="myModalLabel"><strong>Login</strong></h3>
                </div>
                <!--Body-->
                <div class="modal-body mx-4">
                    <!--Body-->
                    <form class="form" method="POST" action="#">
                        {{ csrf_field() }}
                        <div class="md-form">
                            <input type="email" name="email" id="inputEmail" placeholder="Email" required="@" autofocus>
                        </div>

                        <div class="md-form">
                            <input type="password" name="pass" id="inputPass" placeholder="Password" required>
                        </div>

                        <input type="submit" class="logbtn" value="Login">
                        <input type="button" data-dismiss="modal" class="cancelbtn" value="Cancel">
                    </form>
                </div>
                <!--Footer-->
                <div class="modal-footer mx-5 pt-3 mb-1">
                    <p class="font-small grey-text d-flex justify-content-end">
                        Don't have an account? <a href="#" class="blue-text ml-1" data-dismiss="modal" data-toggle="modal" data-target="#registerForm">Sign Up</a>
                    </p>
                </div>
            </div>
        <!--/.Content-->
        </div>
    </div>
    <!-- Modal Login-->

    <!-- Modal Register-->
    <div class="modal fade" id="registerForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <!--Content-->
            <div class="modal-content form-elegant">
                <!--Header-->
                <div class="text-center">
                    <h3 class="modal-title w-100 dark-grey-text font-weight-bold mt-5" id="myModalLabel"><strong>Register</strong></h3>
                </div>
                <!--Body-->
                <div class="modal-body mx-4">
                    <!--Body-->
                    <form class="form" method="POST" action="#">
                        {{ csrf_field() }}
                        <div class="md-form">
                            <input type="text" name="name" id="inputName" placeholder="Name" required autofocus>
                        </div>

                        <div class="md-form">
                            <input type="email" name="email" id="inputEmail" placeholder="Email" required="@">
                        </div>

                        <div class="md-form">
                            <input type="password" name="pass" id="inputPass" placeholder="Password" required>
                        </div>

                        <div class="md-form">
                            <input type="password" name="pass_conf" id="inputPassConf" placeholder="Password Confirmation" required>
                        </div>

                        <input type="submit" class="logbtn" value="Register">
                        <input type="button" data-dismiss="modal" class="cancelbtn" value="Cancel">
                    </form>
                </div>
                <!--Footer-->
                <div class="modal-footer mx-5 pt-3 mb-1">
                    <p class="font-small grey-text d-flex justify-content-end">
                        Already have an account? <a href="#" class="blue-text ml-1" data-dismiss="modal" data-toggle="modal" data-target="#loginForm">Login</a>
                    </p>
                </div>
            </div>
        <!--/.Content-->
        </div>
    </div>
    <!-- Modal Register-->

This is my controller (i don't know what i have to do)

class AuthController extends Controller
{
    public function login() {
        //
    }

    public function postLogin(Request $request) {
        //
    }

    public function postRegister(Request $request) {
        //
    }
}

and this is my route (this route is still wrong)

Route::get('/login' , 'AuthController@login');
Route::post('/', 'AuthController@postLogin');
Route::post('/', 'AuthController@postRegister');

Thanks for your time!!

score 1 · Answer 1 · answered Dec 26 '19 at 14:49

1

You could use Laravel's built-in authentication system

In Laraval 5.8:

php artisan make:auth

With 6.0 see https://stackoverflow.com/a/57790856/10558454

answered Dec 26 '19 at 14:49

sicreep

68
8

Wouldn't that make the login form in the new index? i want to make the login form in modal. btw, thanks for your time – Maghel Heans Gultom Dec 26 '19 at 15:31
It doesn't matter where the login form is located. Important is that the 'backend' (LoginController, PasswordResetController, ...) is ready to customize. But yes, Laravel's forms are in additional views. – sicreep Dec 27 '19 at 13:10

score 0 · Answer 2 · answered Dec 26 '19 at 15:06

You need to investigate Blade.

Start by creating your front-end html in a file in your views folder. Perhaps login.blade.php

In this file you can have your login page, perhaps with a modal, if you want this modal to launch on page load, take a look here: Launch Bootstrap Modal on page load

Then, to display this blade file from your route, in your controller use:

return view(“login”)

This will display your login.blade.php file.

Further from this, you can use blade to do templating and streamline your front-end design immensely.

A very good boilerplate for a login system is Laravel’s built in auth system, to implement this system on a new project, run from your project folder:

php artisan make:auth

Investigate the code and change to your liking, once you understand how it works, you can tap into it through your own front-end.

Good luck

How can i show a modal through a route and a controller in laravel?

2 Answers2