Mencipta TodoList dengan PHP dan Rangka Kerja Lithe: Panduan Lengkap

Dalam tutorial ini, kami akan mencipta aplikasi TodoList yang berfungsi menggunakan Lithe. Anda akan belajar cara menstruktur projek anda, mencipta paparan interaktif dan melaksanakan API RESTful untuk mengurus tugas anda. Projek ini akan menjadi contoh terbaik tentang cara membina aplikasi web moden dengan PHP.

Prasyarat

• PHP 7.4 atau lebih tinggi
• Komposer dipasang
• MySQL
• Pengetahuan asas PHP dan JavaScript

Struktur Projek

Mula-mula, mari buat projek Lithe baharu:

composer create-project lithephp/lithephp todo-app
cd todo-app

Mengkonfigurasi Pangkalan Data

Edit fail .env dalam akar projek dengan tetapan berikut:

DB_CONNECTION_METHOD=mysqli
DB_CONNECTION=mysql
DB_HOST=localhost
DB_NAME=lithe_todos
DB_USERNAME=root
DB_PASSWORD=
DB_SHOULD_INITIATE=true

Mencipta migrasi

Jalankan arahan untuk mencipta migrasi baharu:

php line make:migration CreateTodosTable

Edit fail migrasi yang dihasilkan dalam src/database/migrations/:

return new class
{
    public function up(mysqli $db): void
    {
        $query = "
            CREATE TABLE IF NOT EXISTS todos (
                id INT(11) AUTO_INCREMENT PRIMARY KEY,
                title VARCHAR(255) NOT NULL,
                completed BOOLEAN DEFAULT FALSE,
                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
            )
        ";
        $db->query($query);
    }

    public function down(mysqli $db): void
    {
        $query = "DROP TABLE IF EXISTS todos";
        $db->query($query);
    }
};

Jalankan migrasi:

php line migrate

Melaksanakan Model

Jana model baharu:

php line make:model Todo

Edit fail src/models/Todo.php:

namespace App\Models;

use Lithe\Database\Manager as DB;

class Todo
{
    public static function all(): array
    {
        return DB::connection()
            ->query("SELECT * FROM todos ORDER BY created_at DESC")
            ->fetch_all(MYSQLI_ASSOC);
    }

    public static function create(array $data): ?array
    {
        $stmt = DB::connection()->prepare(
            "INSERT INTO todos (title, completed) VALUES (?, ?)"
        );
        $completed = false;
        $stmt->bind_param('si', $data['title'], $completed);
        $success = $stmt->execute();

        if ($success) {
            $id = $stmt->insert_id;
            return [
                'id' => $id,
                'title' => $data['title'],
                'completed' => $completed
            ];
        }

        return null;
    }

    public static function update(int $id, array $data): bool
    {
        $stmt = DB::connection()->prepare(
            "UPDATE todos SET completed = ? WHERE id = ?"
        );
        $stmt->bind_param('ii', $data['completed'], $id);
        return $stmt->execute();
    }

    public static function delete(int $id): bool
    {
        $stmt = DB::connection()->prepare("DELETE FROM todos WHERE id = ?");
        $stmt->bind_param('i', $id);
        return $stmt->execute();
    }
}

Mencipta Pengawal

Jana pengawal baharu:

php line make:controller TodoController

Edit fail src/http/controllers/TodoController.php:

namespace App\Http\Controllers;

use App\Models\Todo;
use Lithe\Http\Request;
use Lithe\Http\Response;

class TodoController
{
    public static function index(Request $req, Response $res)
    {
        return $res->view('todo.index');
    }

    public static function list(Request $req, Response $res)
    {
        $todos = Todo::all();
        return $res->json($todos);
    }

    public static function store(Request $req, Response $res)
    {
        $data = (array) $req->body();
        $todo = Todo::create($data);
        $success = $todo ? true : false;

        return $res->json([
            'success' => $success,
            'message' => $success ? 'Tarefa criada com sucesso' : 'Falha ao criar tarefa',
            'todo' => $todo
        ]);
    }

    public static function update(Request $req, Response $res)
    {
        $id = $req->param('id');
        $data = (array) $req->body();
        $success = Todo::update($id, $data);

        return $res->json([
            'success' => $success,
            'message' => $success ? 'Tarefa atualizada com sucesso' : 'Falha ao atualizar tarefa'
        ]);
    }

    public static function delete(Request $req, Response $res)
    {
        $id = $req->param('id');
        $success = Todo::delete($id);

        return $res->json([
            'success' => $success,
            'message' => $success ? 'Tarefa removida com sucesso' : 'Falha ao remover tarefa'
        ]);
    }
}

Mencipta Pandangan

Buat direktori src/views/todo dan tambah fail index.php:

<!DOCTYPE html>
<html>
<head>
    <title>TodoList com Lithe</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        body {
            min-height: 100vh;
            background-color: #ffffff;
            padding: 20px;
        }

        .container {
            max-width: 680px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        h1 {
            color: #1d1d1f;
            font-size: 34px;
            font-weight: 700;
            margin-bottom: 30px;
        }

        .todo-form {
            display: flex;
            gap: 12px;
            margin-bottom: 30px;
            border-bottom: 1px solid #e5e5e7;
            padding-bottom: 30px;
        }

        .todo-input {
            flex: 1;
            padding: 12px 16px;
            font-size: 17px;
            border: 1px solid #e5e5e7;
            border-radius: 10px;
            background-color: #f5f5f7;
            transition: all 0.2s;
        }

        .todo-input:focus {
            outline: none;
            background-color: #ffffff;
            border-color: #0071e3;
        }

        .add-button {
            padding: 12px 20px;
            background: #0071e3;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .add-button:hover {
            background: #0077ED;
        }

        .todo-list {
            list-style: none;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-radius: 10px;
            margin-bottom: 8px;
            transition: background-color 0.2s;
        }

        .todo-item:hover {
            background-color: #f5f5f7;
        }

        .todo-checkbox {
            width: 22px;
            height: 22px;
            margin-right: 15px;
            cursor: pointer;
        }

        .todo-text {
            flex: 1;
            font-size: 17px;
            color: #1d1d1f;
        }

        .completed {
            color: #86868b;
            text-decoration: line-through;
        }

        .delete-button {
            padding: 8px 12px;
            background: none;
            color: #86868b;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s;
        }

        .todo-item:hover .delete-button {
            opacity: 1;
        }

        .delete-button:hover {
            background: #f5f5f7;
            color: #ff3b30;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #86868b;
        }

        .error {
            color: #ff3b30;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>



<h2>
  
  
  Configurando as Rotas
</h2>

<p>Atualize o arquivo src/App.php para incluir as rotas da TodoList:<br>
</p>

<pre class="brush:php;toolbar:false">use App\Http\Controllers\TodoController;

$app = new \Lithe\App;

// Rota para a página principal
$app->get('/', [TodoController::class, 'index']);

// Rotas da API
$app->get('/todos/list', [TodoController::class, 'list']);
$app->post('/todos', [TodoController::class, 'store']);
$app->put('/todos/:id', [TodoController::class, 'update']);
$app->delete('/todos/:id', [TodoController::class, 'delete']);

$app->listen();

Menjalankan Aplikasi

Untuk memulakan pelayan pembangunan, jalankan:

php line serve

Pergi ke http://localhost:8000 dalam penyemak imbas anda untuk melihat aplikasi sedang beroperasi.

Ciri yang Dilaksanakan

TodoList kami mempunyai ciri-ciri berikut:

1. Senarai tugasan dalam susunan kronologi terbalik
2. Tambahan tugas baharu
3. Menandai tugas sebagai selesai/belum selesai
4. Penyingkiran tugas
5. Antara muka responsif dan mesra pengguna
6. Maklum balas visual untuk semua tindakan
7. Ralat pengendalian

Kesimpulan

Anda kini mempunyai aplikasi TodoList berfungsi sepenuhnya yang dibina dengan Lithe. Contoh ini menunjukkan cara membuat aplikasi web moden dengan PHP, termasuk:

• Struktur kod MVC yang betul
• Pelaksanaan API RESTful
• Antara muka pengguna interaktif
• Penyepaduan pangkalan data
• Ralat pengendalian
• Maklum balas pengguna

Dari sini, anda boleh mengembangkan aplikasi dengan menambah ciri baharu seperti:

• Pengesahan pengguna
• Pengkategorian tugas
• Tarikh tamat tempoh
• Tapis dan cari

Untuk terus belajar tentang Lithe, pergi ke Linktree, tempat anda boleh mengakses Discord, dokumentasi dan banyak lagi!

Atas ialah kandungan terperinci Mencipta TodoList dengan PHP dan Rangka Kerja Lithe: Panduan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!