วิธีการสร้าง Login Email or Username ด้วย Laravel Framework

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

psp_petch
PHP Jr. Member
PHP Jr. Member
โพสต์: 28
ลงทะเบียนเมื่อ: 14/06/2021 9:54 am

วิธีการสร้าง Login Email or Username ด้วย Laravel Framework

โพสต์ที่ยังไม่ได้อ่าน โดย psp_petch »

Laravel Framework เป็นเครื่องมือชนิดหนึ่งที่ช่วยในการออกแบบพัฒนา Web Application ซึ่งมีคำสั่ง cmd ที่ช่วยในการสร้างหน้า Login ให้สำเร็จรูปอยู่แล้วซึ่งหน้าที่สร้างออกมานั้นจะสามารถ Login ผ่าน Email ได้อย่างเดียวแต่ในบทความนี้จะมาบอกวิธีที่จะทำให้การ Login นี้สามารถ Login ผ่านได้ทั้ง Email และ Username ซึ่งวิธีการนั้นไม่ยากเลยครับ


ขั้นตอนที่ 1.
ทำการแก้ไขฐานข้อมูลโดยเพิ่มฟิลด์ username ที่ตาราง users ในฐานข้อมูล
ภาพผลลัพธ์การเพิ่มฟิลด์ username
ภาพผลลัพธ์การเพิ่มฟิลด์ username
Capture7.JPG (23.4 KiB) Viewed 3161 times

ขั้นตอนที่ 2.
ไปที่ไฟล์ app/Models/User.php แล้วเพิ่มคอลัม username ลงในฟังก์ชัน Fillable
คอลัม username ที่ถูกเพิ่มลงไป
คอลัม username ที่ถูกเพิ่มลงไป
Capture.JPG (15.84 KiB) Viewed 3176 times

ขั้นตอนที่ 3.
ไปที่ไฟล์ resources/views/auth/register.blade.php แล้วเพิ่มโค้ดนี้ลงไปในบรรทัดต่อจากช่องกรอกข้อมูลของ name

โค้ด: เลือกทั้งหมด

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

    <div class="col-md-6">
        <input id="username" type="text" class="form-control{{ $errors->has('username') ? ' is-invalid' : '' }}" name="username" value="{{ old('username') }}" required autofocus>
        @if ($errors->has('username'))
            <span class="help-block">
                <strong>{{ $errors->first('username') }}</strong>
            </span>
        @endif
    </div>
</div>
ภาพผลลัพธ์ที่ได้จากการเพิ่มโค้ด
ภาพผลลัพธ์ที่ได้จากการเพิ่มโค้ด
Capture5.JPG (37.2 KiB) Viewed 3159 times

ขั้นตอนที่ 4.
ไปที่ไฟล์ resources/views/auth/login.blade.php แล้วนำโค้ดไปแทนที่โค้ดช่องสำหรับกรอก Email สำหรับการ Login อันเก่าได้เลย

โค้ด: เลือกทั้งหมด

<div class="form-group row">
    <label for="login" class="col-md-4 col-form-label text-md-right">Username Or Email</label>
    <div class="col-md-6">
          <input id="login" type="text" class="form-control
             {{ $errors->has('username') || $errors->has('email') ? ' is-invalid' : '' }}" name="login" value="{{ old('username') ?: old('email') }}" autofocus>

               @if ($errors->has('username') || $errors->has('email'))
                <span class="invalid-feedback">
                         <strong>{{ $errors->first('username') ?: $errors->first('email') }}</strong>
                 </span>
                 @endif
    </div>
</div>
ภาพผลลัพธ์ที่ได้จากการแก้ไขโค้ด
ภาพผลลัพธ์ที่ได้จากการแก้ไขโค้ด
Capture6.JPG (20.7 KiB) Viewed 3159 times

ขั้นตอนที่ 5.
ไปที่ไฟล์ app/Http/Controller/Auth/RegisterController.php
เขียนคำสั่งลงภายในกรอบสีแดงดังภาพ ตามลำดับ
เขียนคำสั่งลงภายในกรอบสีแดงดังภาพ ตามลำดับ
Capture.JPG (74.67 KiB) Viewed 3176 times
5.1. ทำการเขียนคำสั่งเพื่อตรวจสอบว่าข้อมูล username ที่กรอกเข้ามาถูกต้องหรือไม่
5.2. ทำการเขียนคำสั่งเพื่อเพิ่มข้อมูล username ที่กรอกเข้ามาลงในฐานข้อมูล


ขั้นตอนที่ 6.
ไปที่ไฟล์ app/Http/Controller/Auth/LoginController.php แล้วทำการใส่โค้ดตามนี้ได้เลย

โค้ด: เลือกทั้งหมด

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;

    protected $username;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');

        $this->username = $this->findusername();
    }

    public function findusername()
{
     $login = request()->input('login');

     $field = filter_var($login, FILTER_VALIDATE_EMAIL) ? 'email' : 'username';
     request()->merge([$field => $login]);

     return $field;
}
    public function username()
    {
        return $this->username;
    }
}
ภาพผลลัพธ์ที่ได้หลังจากทำการ Login ด้วย Username และ Email
ภาพผลลัพธ์ที่ได้หลังจากทำการ Login ด้วย Username และ Email
Capture8.JPG (18.47 KiB) Viewed 3159 times


เพียงเท่านี้ก็สามารถทำการ Login ได้ทั้ง Email และ Username ได้แล้วครับหากท่านต้องการที่จะปรับแต่งหน้าต่างให้มีความสวยงามกว่านี้ก็ให้นำ Bootstrab หรือ CSS เข้ามาใช้เพื่อช่วยทำให้หน้าต่างสวยงามมากยิ่งขึ้น

อ้างอิง
https://codebriefly.com/laravel-authentication-with-username-or-email/
https://hdtuto.com/article/login-with-username-or-email-in-laravel-6
https://dev.to/pramanadiputra/laravel-how-to-let-user-login-with-email-or-username-j2h
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 79