Đào tạo Tin học trực tuyến

Laravel 5.6: Thiết kế trang đăng nhập hệ thống quản trị Login


Trong nội dung này, chúng ta sẽ thiết kế một trang đăng nhập hệ thống quản trị website bắt đầu từ Route, cách tạo Controller, thiết kế view Login cho hệ thống. Ở đây, chúng ta cũng thêm đường link URL cho Layout Master để liên kết đến trang Login trên toàn trang. Xem chi tiết ở liên kết dưới đây:

Click vào đây hoặc ảnh trên để xem chi tiết

Phần thực hành

Route:

Route::get('login', 'LoginController@login');
Route::post('login', 'LoginController@postLogin');

LoginController:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class LoginController extends Controller
{
    public function login(){
    	return view('home.login');
    }
    public function postLogin(Request $request){
    	return dd($request);
    }
}

View Login:

@extends('layout.master')
@section('content')
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">Đăng nhập hệ thống quản trị</h3>
		</div>
		<div class="panel-body">
			<div class="col-md-7 col-md-offset-2">
				<form action="login" method="POST">
					@csrf()
				
					<div class="form-group">
						<label for="Email">Email</label>
						<input type="email" class="form-control" name="email" placeholder="Nhập Email">
					</div>

					<div class="form-group">
						<label for="Password">Password</label>
						<input type="password" class="form-control" name="password" placeholder="Nhập Password">
					</div>

					<div class="checkbox">
						<label>
							<input type="checkbox" value="remember">
							Ghi nhớ đăng nhập
						</label>
					</div>	

					<button type="submit" class="btn btn-default pull-right">Đăng nhập</button>
				</form>
			</div>
		</div>
	</div>
@endsection

 


Xem thêm

   Có gì khác biệt giữa HTML và HTML5?

   5 yếu tố quan trọng của định hướng thị giác trong thiết kế web

   Một số thẻ và Type quan trọng với HTML5 cần chú ý trong quá trình thiết kế website

   Xử lý text với Typography trong Bootstrap 4 CSS FrameWork

   Bootstrap 4.0: Bài 2. Thiết lập hệ thống lưới Grid System

   Bootstrap 4.0: Bài 1. Giới thiệu và các thiết lập cơ bản về công cụ, css, javascript

   Laravel 5.6: Thiết kế trang đăng ký người dùng

   Laravel 5.6: Bổ sung thêm cơ sở dữ liệu cho website

   Màu nền và màu chữ trong Bootstrap 4 CSS Framework

   Laravel 5.6: Validated, xử lý hệ thống đăng nhập, đăng xuất, ghi nhớ đăng nhập

   Laravel 5.6 : Xây dựng hệ thống Models

   Hướng dẫn cài đặt Opencart - CMS hệ thống bán hàng trực tuyến

   Laravel 5.6: Xây dựng cơ sở dữ liệu mẫu với Seeding