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

Criando uma TodoList com PHP e o Framework Lithe: Um Guia Completo

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

Salin selepas log masuk

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

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 ? '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'
        ]);
    }
}

Salin selepas log masuk

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

Salin selepas log masuk

Menjalankan Aplikasi

Untuk memulakan pelayan pembangunan, jalankan:

php line serve

Salin selepas log masuk

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

Ciri yang Dilaksanakan

TodoList kami mempunyai ciri-ciri berikut:

Senarai tugasan dalam susunan kronologi terbalik
Tambahan tugas baharu
Menandai tugas sebagai selesai/belum selesai
Penyingkiran 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 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!