Tổng Quan
Trong bài viết này, chúng ta sẽ cùng nhau khám phá cách xây dựng một ứng dụng rút ngắn URL đơn giản bằng TALL stack, bao gồm TailwindCSS, AlpineJS, Laravel và Livewire. Ứng dụng sẽ cho phép người dùng nhập vào một URL dài và tạo ra một URL ngắn hơn. Giao diện người dùng sẽ bao gồm tên ứng dụng, một ô nhập URL, nút Shorten để tạo ra URL ngắn, và nút Copy để sao chép URL đã rút ngắn.
Tính Năng Của Ứng Dụng
Khi người dùng dán một URL dài vào ô nhập và nhấn nút Shorten, ứng dụng sẽ tạo ra một mã duy nhất và ánh xạ nó với URL gốc trong cơ sở dữ liệu. Sau đó, ứng dụng sẽ tạo ra URL ngắn có định dạng như sau: http://localhost:8000/{mã}, dẫn người dùng đến URL ban đầu khi nhấn vào đó.
Bắt Đầu Dự Án
Khởi Tạo Dự Án Laravel
Để bắt đầu, chúng ta sẽ khởi tạo một dự án mới bằng Laravel:
laravel new shortenTiếp theo, cài đặt các package JavaScript bằng lệnh:
npm installCuối cùng, mở file .env và thay đổi APP_NAME thành Shorten.
Cài Đặt Livewire
Cài đặt Livewire bằng lệnh sau:
composer require livewire/livewireTạo layout cho Livewire:
php artisan livewire:layoutCài Đặt TailwindCSS
Cài đặt TailwindCSS cùng với DaisyUI:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pChỉnh sửa file tailwind.config.js để thêm cấu hình:
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],Thêm vào app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;Cuối cùng, thêm dòng sau vào phần <head> của layout mới tạo:
@vite('resources/css/app.css')Cài đặt DaisyUI:
npm i -D daisyui@latestThêm vào phần plugins trong file tailwind.config.js:
plugins: [
require('daisyui'),
],Cài Đặt AlpineJS
AlpineJS đã được cài sẵn, không cần cài đặt thêm.
Luồng Hoạt Động Của Ứng Dụng
Luồng hoạt động của ứng dụng rất đơn giản. Khi người dùng nhập một URL và nhấn Shorten, ứng dụng sẽ sinh ra một mã duy nhất và lưu trữ nó cùng với URL trong cơ sở dữ liệu SQLite. Nếu người dùng nhấn vào mã này, họ sẽ được chuyển hướng đến URL gốc.
Cấu Trúc Cơ Sở Dữ Liệu
Chúng ta sẽ tạo một bảng tên là urls với các trường sau:
id: unsignedBigIntegercode: varchar(255)url: textcreated_at: datetimeupdated_at: datetime
Thực Hiện Migration
Chạy lệnh sau để tạo migration:
php artisan make:migration create_urls_tableSau đó, chỉnh sửa migration file:
Schema::create('urls', function (Blueprint $table) {
$table->id();
$table->string('code');
$table->text('url');
$table->timestamps();
});Tạo Livewire Component
Chạy lệnh tạo Livewire component:
php artisan make:livewire ShortenUrlChỉnh sửa web.php để định nghĩa route cho component:
Route::get('/', ShortenUrl::class);Xây Dựng Giao Diện Người Dùng
Giao diện sẽ bao gồm các ô và nút như sau:
<div class="flex justify-center flex-wrap flex-col h-screen">
<div class="w-full">
<h1 class="text-center text-6xl font-bold text-indigo-700">Shorten Urls Easily</h1>
</div>
<div class="w-full text-center my-10">
<input type="url" placeholder="Add Url here" class="input input-bordered w-full max-w-md" wire:model="url" />
<p class="text-error">@error('url') {{ $message }} @enderror</p>
</div>
<div class="flex justify-center text-center mx-auto mb-3">
@if ($result)
<div role="alert" class="alert alert-success">
<a target="_blank" class="link link-primary text-white" href="{{ $result }}" id="result">{{ $result }}</a>
</div>
@endif
</div>
<div class="w-full text-center">
<button wire:click="submit" class="btn btn-active btn-accent text-white">Shorten</button>
<button @click.prevent="navigator.clipboard.writeText(document.getElementById('result').innerText) ..." class="btn btn-active btn-accent text-white">Copy</button>
</div>
</div>Chạy Ứng Dụng
Để chạy ứng dụng, sử dụng hai lệnh:
php artisan serve
npm run devVậy là chúng ta đã hoàn thành việc xây dựng một ứng dụng rút ngắn URL đơn giản bằng TALL stack. Hãy thử nghiệm và phát triển thêm tính năng cho ứng dụng của bạn!
source: viblo
