Mencipta TodoList dengan PHP dan Rangka Kerja Lithe: Panduan Lengkap-tutorial php-php.cn

Creating a TodoList with PHP and the Lithe Framework: A Complete Guide

Dalam tutorial ini, kami akan mencipta aplikasi TodoList 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

Salin selepas log masuk

Menyediakan Pangkalan Data

Edit fail .env dalam akar projek dengan konfigurasi berikut:

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

Salin selepas log masuk

Mencipta Migrasi

Jalankan arahan untuk mencipta migrasi baharu:

php line make:migration CreateTodosTable

Salin selepas log masuk

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);
    }
};

Salin selepas log masuk

Jalankan migrasi:

php line migrate

Salin selepas log masuk

Melaksanakan Model

Jana model baharu:

php line make:model Todo

Salin selepas log masuk

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();
    }
}

Salin selepas log masuk

Mencipta Pengawal

Jana pengawal baharu:

php line make:controller TodoController

Salin selepas log masuk

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 ? 'Task created successfully' : 'Failed to create task',
            '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 ? 'Task updated successfully' : 'Failed to update task'
        ]);
    }

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

        return $res->json([
            'success' => $success,
            'message' => $success ? 'Task removed successfully' : 'Failed to remove task'
        ]);
    }
}

Salin selepas log masuk

Mencipta Pandangan

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

<!DOCTYPE html>
<html>
<head>
    <title>TodoList with 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>



<p>Aqui está a tradução para o inglês:</p>


<hr>

<h2>
  
  
  Setting Up the Routes
</h2>

<p>Update the src/App.php file to include the TodoList routes:<br>
</p>

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

$app = new \Lithe\App;

// Route for the main page
$app->get('/', [TodoController::class, 'index']);

// API routes
$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();

Salin selepas log masuk

Menjalankan Aplikasi

Untuk memulakan pelayan pembangunan, jalankan:

php line serve

Salin selepas log masuk

Akses http://localhost:8000 dalam penyemak imbas anda untuk melihat aplikasi sedang beraksi.

Ciri yang Dilaksanakan

TodoList kami mempunyai ciri-ciri berikut:

Menyenaraikan tugas dalam susunan kronologi terbalik
Menambah tugasan baharu
Menandai tugas sebagai selesai/belum selesai
Mengalih keluar tugas
Antara muka responsif dan mesra pengguna
Maklum balas visual untuk semua tindakan
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
Tapis dan cari

Untuk terus belajar tentang Lithe, lawati Linktree, di mana 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!