Tugas 8 - Project Login dan Register pada Laravel

             Membuat Login dan Register pada Laravel

Langkah - Langkah :

1.Install project laravel melalui composer dan taruh di xampp/htdocs

composer create-project --prefer-dist laravel-laravel nama_project

Setelah selesai proses download , ketik command dibawah ini di terminal

php artisan serve

Apabila berhasil instalasi , akan muncul seperti ini :

2. Menyiapkan database

Pada saat instalasi , laravel sudah menyediakan tabel user yang bisa langsung dipakai. Setelah itu edit file .env untuk menghubungkan ke database .

3. Membuat route Login , Register dan Logout

Untuk membuatnya bisa membuka file web.php yang ada dalam direktori routes/web.php

4. Membuat Controller Auth

Untuk membuat controller bisa melalui  terminal 

  php artisan make:controller AuthController  

Kemudian membuka file AuthController.php yang ada pada direktori app/Http/Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;

use Illuminate\Support\Facades\Validator;

use Illuminate\Support\Facades\Hash;

use Illuminate\Support\Facades\Session;

use App\User;

class AuthController extends Controller

{

    //

    public function showFormLogin()

    {

        if (Auth::check()) { // true sekalian session field di users nanti bisa dipanggil via Auth

            //Login Success

            return redirect()->route('/beranda');

        }

        return view('login');

    }

    public function login(Request $request)

    {

        $request->validate([

            'email' => 'required|email',

            'password' => 'required|min:3',

        ]);

        if (Auth::attempt(['email' => $request->email, 'password' => $request->password])) {

            // Authentication passed...

            return redirect()->intended('/beranda');

        } else {

            // Session::flash('errors', ['' => 'Login gagal! Silahkan ulangi beberapa saat lagi']);

            // return redirect()->route('login');

            echo 'gagal login';

        }

    }

    public function showFormRegister()

    {

        return view('register');

    }

    public function register(Request $request)

    {

        $rules = [

            'nama_user'             => 'required|min:3|max:50',

            'username'              => 'required|min:3|max:35',

            'no_handphone'          => 'required|min:12',

            'alamat'                => 'required|min:3|max:100',

            'email'                 => 'required|email|unique:users,email',

            'password'              => 'required|confirmed'

        ];

        $messages = [

            'nama_user.required'         => 'Nama Lengkap wajib diisi',

            'nama_user.min'              => 'Nama lengkap minimal 3 karakter',

            'nama_user.max'              => 'Nama lengkap maksimal 50 karakter',

            'username.required'              => 'Username wajib diisi',

            'username.min'                   => 'Username minimal 3 karakter',

            'username.max'                   => 'handphone maksimal 35 karakter',

            'no_handphone.required'              => 'handphone wajib diisi',

            'no_handphone.min'                   => 'Username minimal 12 karakter',

            'alamat.required'              => 'alamat wajib diisi',

            'alamat.min'                   => 'alamat minimal 3 karakter',

            'alamat.max'                   => 'alamat maksimal 100 karakter',

            'email.required'        => 'Email wajib diisi',

            'email.email'           => 'Email tidak valid',

            'email.unique'          => 'Email sudah terdaftar',

            'password.required'     => 'Password wajib diisi',

            'password.confirmed'    => 'Password tidak sama dengan konfirmasi password'

        ];

        $validator = Validator::make($request->all(), $rules, $messages);

        if ($validator->fails()) {

            return redirect()->back()->withErrors($validator)->withInput($request->all);

        }

        $user = new User;

        $user->nama_user = ucwords(strtolower($request->nama_user));

        $user->username = ucwords(strtolower($request->username));

        $user->no_handphone = ucwords(strtolower($request->no_handphone));

        $user->alamat = ucwords(strtolower($request->alamat));

        $user->email = strtolower($request->email);

        $user->password = Hash::make($request->password);

        // $user->email_verified_at = \Carbon\Carbon::now();

        $simpan = $user->save();

        if ($simpan) {

            Session::flash('success', 'Register berhasil! Silahkan login untuk mengakses data');

            return redirect()->route('login');

        } else {

            Session::flash('errors', ['' => 'Register gagal! Silahkan ulangi beberapa saat lagi']);

            return redirect()->route('register');

        }

    }

    public function logout()

    {

        Auth::logout(); // menghapus session yang aktif

        return redirect()->route('login');

    }

}

Penjelasan :

Laravel menyediakan library yang dapat menghandle Authentication. Kita bisa menggunakan use Illuminate\Support\Facades\Auth untuk dapat memanfaatkan fasilitas tersebut. Selain itu, kita pun menggunakan Library Hash yang sudah disediakan oleh Laravel untuk mengubah password yang kita daftarkan menjadi terenkripsi.

6. Membuat Halaman view Login dan Register

Membuat file baru bernama login.blade.php dan  register.blade.php kemudian simpan didalam direktori resource/views. Disini saya menggunakan template view dari startboostrap.com

Kode untuk view login :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <meta name="description" content="" />

    <meta name="author" content="" />

    <title>Login</title>

    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

    <!-- Font Awesome icons (free version)-->

    <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>

    <!-- Google fonts-->

    <link rel="preconnect" href="https://fonts.gstatic.com" />

    <link href="https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet" />

    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&amp;display=swap" rel="stylesheet" />

    <!-- Core theme CSS (includes Bootstrap)-->

    <link href="css/styles.css" rel="stylesheet" />

</head>

<body>

    <!-- Background Video-->

    <video class="bg-video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">

        <source src="assets/mp4/bg.mp4" type="video/mp4" />

    </video>

    <!-- Masthead-->

    <div class="masthead">

        <div class="masthead-content text-white">

            <div class="container-fluid px-4 px-lg-0">

                <h1 class="fst-italic lh-1 mb-4">Login</h1>

                <p class="mb-5">We're working hard to finish the development of this site. Sign up below to receive updates and to be notified when we launch!</p>

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

                    @csrf

                    @if(session('errors'))

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">

                        Something it's wrong:

                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                            <span aria-hidden="true">×</span>

                        </button>

                        <ul>

                            @foreach ($errors->all() as $error)

                            <li>{{ $error }}</li>

                            @endforeach

                        </ul>

                    </div>

                    @endif

                    @if (Session::has('success'))

                    <div class="alert alert-success">

                        {{ Session::get('success') }}

                    </div>

                    @endif

                    @if (Session::has('error'))

                    <div class="alert alert-danger">

                        {{ Session::get('error') }}

                    </div>

                    @endif

                    <!-- Email address input-->

                    <div class="row input-group-newsletter">

                        <div class="col-10"><input class="form-control" id="email" name="email" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>

                    </div>

                    <div class="row input-group-newsletter">

                        <div class="col-10 mt-3"><input class="form-control" id="password" name="password" type="password" placeholder="Enter password" aria-label="Enter password" data-sb-validations="required" /></div>

                    </div>

                    <div>

                        <div class="col-auto mt-3"><button class="btn btn-primary" id="submitButton" type="submit">Login</button></div>

                        <p class="text mt-5">Belum punya akun? <a href="{{ route('register') }}">Register</a> sekarang!</p>

                    </div>

                    <div class="invalid-feedback mt-2" data-sb-feedback="email:required">An email is required.</div>

                    <div class="invalid-feedback mt-2" data-sb-feedback="email:email">Email is not valid.</div>

                    <div class="d-none" id="submitSuccessMessage">

                        <div class="text-center mb-3 mt-2">

                            <div class="fw-bolder">Form submission successful!</div>

                            To activate this form, sign up at

                            <br />

                            <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>

                        </div>

                    </div>

                    <div class="d-none" id="submitErrorMessage">

                        <div class="text-center text-danger mb-3 mt-2">Error sending message!</div>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <!-- Social Icons-->

    <!-- For more icon options, visit https://fontawesome.com/icons?d=gallery&p=2&s=brands-->

    <div class="social-icons">

        <div class="d-flex flex-row flex-lg-column justify-content-center align-items-center h-100 mt-3 mt-lg-0">

            <a class="btn btn-dark m-3" href="#!"><i class="fab fa-twitter"></i></a>

            <a class="btn btn-dark m-3" href="#!"><i class="fab fa-facebook-f"></i></a>

            <a class="btn btn-dark m-3" href="#!"><i class="fab fa-instagram"></i></a>

        </div>

    </div>

    <!-- Bootstrap core JS-->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Core theme JS-->

    <script src="js/scripts.js"></script>

    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>

</body>

</html>

Kode untuk view Register : 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <meta name="description" content="" />

    <meta name="author" content="" />

    <title>Register</title>

    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

    <!-- Font Awesome icons (free version)-->

    <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>

    <!-- Google fonts-->

    <link rel="preconnect" href="https://fonts.gstatic.com" />

    <link href="https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet" />

    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&amp;display=swap" rel="stylesheet" />

    <!-- Core theme CSS (includes Bootstrap)-->

    <link href="css/styles.css" rel="stylesheet" />

</head>

<body>

    <!-- Background Video-->

    <video class="bg-video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">

        <source src="assets/mp4/bg.mp4" type="video/mp4" />

    </video>

    <!-- Masthead-->

    <div class="masthead">

        <div class="masthead-content text-white">

            <div class="container-fluid px-4 px-lg-0">

                <h1 class="fst-italic lh-1 mb-4 mt-2">Register</h1>

                <!-- <p class="mb-5">We're working hard to finish the development of this site. Sign up below to receive updates and to be notified when we launch!</p> -->

                <form action="{{ route('register') }}" method="post">

                    @csrf

                    @if(session('errors'))

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">

                        Something it's wrong:

                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                            <span aria-hidden="true">×</span>

                        </button>

                        <ul>

                            @foreach ($errors->all() as $error)

                            <li>{{ $error }}</li>

                            @endforeach

                        </ul>

                    </div>

                    @endif

                    <div class="row input-group-newsletter">

                        <div class="col-6"><input class="form-control" id="email" name="nama_user" type="text" placeholder="Nama Lengkap" aria-label="Enter email address..." data-sb-validations="required,email" /></div>

                        <div class="col-6"><input class="form-control" id="email" name="username" type="text" placeholder="Username" aria-label="Enter email address..." data-sb-validations="required,email" /></div>

                    </div>

                    <!-- Email address input-->

                    <div class="row input-group-newsletter">

                        <div class="col-12 mt-3"><input class="form-control" id="email" name="email" type="email" placeholder="Email" aria-label="Email" data-sb-validations="required,email" /></div>

                    </div>

                    <div class="row input-group-newsletter">

                        <div class="col-12 mt-3"><input class="form-control" id="email" name="no_handphone" type="text" placeholder="Handphone" aria-label="Handphone" data-sb-validations="required,email" /></div>

                    </div>

                    <div class="row input-group-newsletter">

                        <div class="col-12 mt-3"><input class="form-control" id="email" name="alamat" type="text" placeholder="Alamat" data-sb-validations="required,email" /></div>

                    </div>

                    <div class="row input-group-newsletter">

                        <div class="col-6 mt-3"><input class="form-control" id="password" name="password" type="password" placeholder="Password" aria-label="Enter password" data-sb-validations="required" /></div>

                        <div class="col-6 mt-3"><input class="form-control" id="password" name="password_confirmation" type="password" placeholder="Konfirmasi password" aria-label="Enter password" data-sb-validations="required" /></div>

                    </div>

                    <div>

                        <div class="col-auto mt-3"><button class="btn btn-primary" id="submitButton" type="submit">Register</button></div>

                        <p class="text mt-5">Sudah punya akun? <a href="{{ route('login') }}">Login</a> sekarang!</p>

                    </div>

                    <div class="invalid-feedback mt-2" data-sb-feedback="email:required">An email is required.</div>

                    <div class="invalid-feedback mt-2" data-sb-feedback="email:email">Email is not valid.</div>

                    <div class="d-none" id="submitSuccessMessage">

                        <div class="text-center mb-3 mt-2">

                            <div class="fw-bolder">Form submission successful!</div>

                            To activate this form, sign up at

                            <br />

                            <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>

                        </div>

                    </div>

                    <div class="d-none" id="submitErrorMessage">

                        <div class="text-center text-danger mb-3 mt-2">Error sending message!</div>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <!-- Social Icons-->

    <!-- For more icon options, visit https://fontawesome.com/icons?d=gallery&p=2&s=brands-->

    <div class="social-icons">

        <div class="d-flex flex-row flex-lg-column justify-content-center align-items-center h-100 mt-3 mt-lg-0">

            <a class="btn btn-dark m-3" href="#!"><i class="fab fa-twitter"></i></a>

            <a class="btn btn-dark m-3" href="#!"><i class="fab fa-facebook-f"></i></a>

            <a class="btn btn-dark m-3" href="#!"><i class="fab fa-instagram"></i></a>

        </div>

    </div>

    <!-- Bootstrap core JS-->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Core theme JS-->

    <script src="js/scripts.js"></script>

    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>

</body>

</html>

Testing program :

Halaman Login

Halaman Register