# 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 shorten ``` Tiếp theo, cài đặt các package JavaScript bằng lệnh: ``` npm install ``` Cuố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/livewire ``` Tạo layout cho Livewire: ``` php artisan livewire:layout ``` ### Cài Đặt TailwindCSS Cài đặt TailwindCSS cùng với DaisyUI: ``` npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Chỉ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 `` của layout mới tạo: ``` @vite('resources/css/app.css') ``` Cài đặt DaisyUI: ``` npm i -D daisyui@latest ``` Thê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`: unsignedBigInteger - `code`: varchar(255) - `url`: text - `created_at`: datetime - `updated_at`: datetime ## Thực Hiện Migration Chạy lệnh sau để tạo migration: ``` php artisan make:migration create_urls_table ``` Sau đó, 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 ShortenUrl ``` Chỉ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: ```

Shorten Urls Easily

@error('url') {{ $message }} @enderror

@if ($result)

@endif

``` ## Chạy Ứng Dụng Để chạy ứng dụng, sử dụng hai lệnh: ``` php artisan serve npm run dev ``` Vậ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

Bài viết về chủ đềAlpinejs

Tổng hợp các bài viết về Alpinejs

Hướng Dẫn Viết Ứng Dụng Rút Ngắn URL Bằng TALL StackphpLaravelAlpinejsurl shorteningLivewire

Chủ đề phổ biến

Hướng Dẫn Viết Ứng Dụng Rút Ngắn URL Bằng TALL Stack