Formulir Masuk dan Daftar di Modal Bootstrap Popups – Panel Admin Cepat

Kita semua digunakan untuk default LADAVEL AUTH LOGIN /REGISTER – sebagai URL terpisah /login dan /register. Tetapi kadang -kadang perlu membuatnya sebagai popup modal alih -alih halaman terpisah. Bagaimana cara mengimplementasikannya di Laravel, termasuk menunjukkan kesalahan validasi dalam modal?

Berikut video pendek tentang apa yang akan kami bangun di artikel ini:

---

Jadi, proyek Laravel default khas dengan auth yang dihasilkan, tetapi tautan login/register di kanan atas akan menyebabkan popup modal alih-alih halaman terpisah.

Juga, akan ada dua jenis mengirimkan formulir:

• Formulir login akan mengirimkan ke pos laravel default yang sama /loginredirect kembali jika terjadi kesalahan, dan show otomatis lagi dengan pesan kesalahan
• Formulir Register akan mengirimkan melalui panggilan AJAX ke /daftar dan tunjukkan pesan kesalahan segera, tanpa refresh halaman

---

Langkah 1. Formulir Login: Bootstrap Modal Popup dan Tautan

Pertama, mari kita buat file ini: Sumber Daya/Tampilan/Partials/Login.blade.php

Kami hampir akan menyalin-pasta formulir dari default Sumber Daya/Tampilan/AUTH/LOGIN.BLADE.PHP file ke sana.

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModal">{{ __('Login') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action=" route("login') }}">
                    @csrf

                    <div class="form-group row">
                        <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                        <div class="col-md-6">
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                        <div class="col-md-6">
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-6 offset-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                                <label class="form-check-label" for="remember">
                                    {{ __('Remember Me') }}
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row mb-0">
                        <div class="col-md-8 offset-md-4">
                            <button type="submit" class="btn btn-primary">
                                {{ __('Login') }}
                            </button>

                            @if (Route::has('password.request'))
                                <a class="btn btn-link" href=" route("password.request') }}">
                                    {{ __('Forgot Your Password?') }}
                                </a>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Anda akan mengenali formulir login lama yang baik, tetapi dengan kelas modal Bootstrap.

Bagian terpenting adalah div id = “LoginModal” Identifier, begitulah cara kami mengidentifikasi sembulan.

Jadi sekarang, di Sumber daya/tampilan/tata letak/app.blade.php Kami membuat perubahan ini.

Dari:

<a class="nav-link" href=" route("login') }}">{{ __('Login') }}</a>

Ke:

<a class="nav-link" 
    style="cursor: pointer" 
    data-toggle="modal" 
    data-target="#loginModal">{{ __('Login') }}</a>

Dan kita juga perlu memasukkan ini, bukan? Jadi, di suatu tempat di Sumber daya/tampilan/tata letak/app.blade.phptambahkan ini:

@include('partials.login')

Secara visual, hasilnya adalah ini – ketika kita mengklik login, modal muncul:

---

Langkah 2. Kesalahan Kirim dan Validasi Login

Seperti disebutkan di atas, untuk contoh login kita akan meninggalkan tindakan formulir menjadi posting khas yang sama:

<form method="POST" action=" route("login') }}">

Jadi, jika login berhasil, maka logika default Laravel yang sama akan berlaku – mengalihkan ke beranda setelah login.

Pertanyaannya kemudian menjadi – bagaimana/di mana harus menunjukkan kesalahan validasijika ada?

Kita mungkin perlu menunjukkannya di dalam modal yang sama, bukan? Tapi bagaimana kita menyebutnya untuk muncul lagi?

Berita baiknya adalah kesalahan validasi akan ditampilkan secara default, seperti dalam bentuk login default oleh Laravel. Jadi, pada kenyataannya, memaksa modal untuk muncul adalah milik kita hanya tugas di sini.

Jadi, kami akan menulis blok jQuery untuk ini.

Pertama, di bagian bawah Sumber daya/tampilan/tata letak/app.blade.phpmari tambahkan @menghasilkan direktif:

    ...
    @yield('scripts')
</body>
</html>

Selanjutnya, di Sumber Daya/Tampilan/Partials/Login.Blade Di bagian bawah kami menambahkan ini:

@section('scripts')
@parent

@if($errors->has('email') || $errors->has('password'))
    <script>
    $(function() {
        $('#loginModal').modal({
            show: true
        });
    });
    </script>
@endif
@endsection

Ya, Anda bisa menambahkan @jika Bilah logika di dalam bagian skrip. Dan $ kesalahan Datang secara default dari validasi Laravel Auth, jadi kami tidak perlu melewatinya dari mana saja.

Hasil visual adalah ini:

---

Langkah 3. Formulir Daftar: Bootstrap Modal Popup dan Tautan

Ini akan hampir identik dengan langkah 1, hanya dengan bentuk yang lebih besar – lebih banyak bidang daripada login.

Sumber Daya/Tampilan/Partials/register.blade.php:

<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="registerModal">{{ __('Register') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" id="registerForm">
                    @csrf

                    <div class="form-group row">
                        <label for="nameInput" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

                        <div class="col-md-6">
                            <input id="nameInput" type="text" class="form-control" name="name" value="{{ old('name') }}"  autocomplete="name" autofocus>

                            <span class="invalid-feedback" role="alert" id="nameError">
                                <strong></strong>
                            </span>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="emailInput" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                        <div class="col-md-6">
                            <input id="emailInput" type="email" class="form-control" name="email" value="{{ old('email') }}" required autocomplete="email">

                            <span class="invalid-feedback" role="alert" id="emailError">
                                <strong></strong>
                            </span>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="passwordInput" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                        <div class="col-md-6">
                            <input id="passwordInput" type="password" class="form-control" name="password" required autocomplete="new-password">

                            <span class="invalid-feedback" role="alert" id="passwordError">
                                <strong></strong>
                            </span>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                        <div class="col-md-6">
                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                        </div>
                    </div>

                    <div class="form-group row mb-0">
                        <div class="col-md-6 offset-md-4">
                            <button type="submit" class="btn btn-primary">
                                {{ __('Register') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Lalu, di dalam Sumber daya/tampilan/tata letak/app.blade.php:

<a class="nav-link" 
    style="cursor: pointer"
    data-toggle="modal" 
    data-target="#registerModal">{{ __('Register') }}</a>

...

@include('partials.login')
@include('partials.register')

Secara visual, hasilnya adalah ini:

---

Langkah 4. Daftarkan Kirim AJAX dan kesalahan validasi

Dalam hal ini, berbeda dari formulir login, kami tidak akan mengirimkan formulir pendaftaran ke tindakan yang sama. Yah, kita akan, tetapi hanya melalui Ajax.

Tidak yakin apakah Anda tahu, tetapi Laravel Login/Pengendali Pendaftaran akan mengembalikan kesalahan validasi JSON Anda jika Anda juga memintanya. Ya, dengan kode validasi yang benar yang benar 422.

Jadi, di bagian bawah Sumber Daya/Tampilan/Partials/register.blade.php Kami menambahkan javascript ini:

@section('scripts')
@parent

<script>
$(function () {
    $('#registerForm').submit(function (e) {
        e.preventDefault();
        let formData = $(this).serializeArray();
        $(".invalid-feedback").children("strong").text("");
        $("#registerForm input").removeClass("is-invalid");
        $.ajax({
            method: "POST",
            headers: {
                Accept: "application/json"
            },
            url: " route("register') }}",
            data: formData,
            success: () => window.location.assign(" route("home') }}"),
            error: (response) => {
                if(response.status === 422) {
                    let errors = response.responseJSON.errors;
                    Object.keys(errors).forEach(function (key) {
                        $("#" + key + "Input").addClass("is-invalid");
                        $("#" + key + "Error").children("strong").text(errors[key][0]);
                    });
                } else {
                    window.location.reload();
                }
            }
        })
    });
})
</script>
@endsection

Saya tidak akan menjelaskan javascript ini secara detail, ini cukup mudah dibaca. Bagian terpenting adalah mengirimkan ini: header: {accept: “application/json”}.

Dan hanya itu, kesalahan validasi akan segera datang ke formulir, tanpa menyegarkan halaman:

Dan, itu saja!
Repositori penuh untuk proyek ini: LaravelDaily/Laravel-Login-Register-Modal-Bootstrap