[Thực hành] Ứng dụng kiểm tra email hợp lệ

Mục tiêu

Luyện tập sử dụng Controller trong Laravel.

Mô tả

Trong phần này, chúng ta sẽ xây dựng một ứng dụng cho phép kiểm tra tính hợp lệ của một email.

Ứng dụng cho phép người dùng nhập vào một email, nhấn nút kiểm tra và sẽ hiển thị thông báo kết quả.

Để hoàn thành bài thực hành, học viên cần:

• Đưa mã nguồn lên GitHub
• Nộp link đến repository vào phần cuối bài

Hướng dẫn

Bước 1: Tạo ứng dụng Laravel có tên “email-validation”

Vào thư mục chúng ta muốn lưu trữ mã nguồn của dự án rồi gõ lệnh:

composer  create-project --prefer-dist laravel/laravel email-validation

Bước 2: Tạo 1 giao diện “form” bằng html

Tạo file “index.blade.php” trong folder “resources/views/”

<div class="main-content">
  <h1>Ứng dụng kiểm tra email hợp lệ</h1>
  <form method="post">
      <label for="email-input">Email:</label>
      <input id="email-input" type="text" placeholder="Nhập email cần kiểm tra" name="email">
      <input type="submit" value="Check">
  </form>
</div>

Chú ý: HTML5 đã hỗ trợ validate email thông qua việc sử dụng input có type=”email”, tuy nhiên chúng ta vẫn cần validate phía Server tránh trường hợp bị khai thác lỗ hổng validate thông qua form html.

Sau khi tạo xong chúng ta thay đổi function Route mặc định nằm trong file “routes/web.php” thành:

Route::get('/', function () {
     return view('index');
});

Bước 3: Chạy ứng dụng và truy cập URL để xem kết quả.

Gõ lệnh:

php artisan serve

Kiểm tra giao diện đã tạo bằng cách truy cập “http://127.0.0.1:8000/”.

Bước 4: Tạo “EmailController” trong thư mục “app/Http/Controllers”

Gõ lệnh:

php artisan make:controller UserController

Bước 5: Viết hàm kiểm tra Email

Viết hàm validationEmail trong “EmailController.php”

function validationEmail(Request $request)
{
  // Lấy dữ liệu Email từ URL
  $email = $request->email;

  $isEmail = true;

  // Kiểm tra validate email theo hàm mặc định thư viện PHP
  if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $isEmail = false;
  }

  return view('index', compact('isEmail'));
}

Bước 6: Tạo route sử lý sự kiện submit kiểm tra email.

Route::post('/check-email', 'UserController@validationEmail')->name('checkEmail');

Bước 7: Thay đổi html trong file “resources/views/index.blade.php” để hiển thị thông báo kết quả kiểm tra

<div class="main-content">
  <h1>Ứng dụng kiểm tra email hợp lệ</h1>
  <form method="post" action="{{ route('checkEmail'}}">
      @csrf
      <label for="email-input">Email:</label>
      <input id="email-input" type="email" placeholder="Nhập email cần kiểm tra" name="email">
      <input type="submit" value="Check">
  </form>
  @if(isset($isEmail))
      Kết quả: {{ $isEmail ? 'Đúng định dạng Email':'Sai định dạng Email' }}
  @endif
</div>

Bước 8: Chạy lại ứng dụng và kiểm tra kết quả

Một số test case

Mã nguồn tham khảo: https://github.com/codegym-vn/laravel-email-validation

Tổng kết

Qua bài tập trên chúng ta đã luyện tập:

• Kỹ năng xử lý Controller
• Sử dụng Request của Laravel để lấy dữ liệu
• Validate Email bằng HTML5