Mencipta TodoList dengan PHP dan Rangka Kerja Lithe: Panduan Lengkap

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

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

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

Mencipta Pandangan

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

    <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>


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

Menjalankan Aplikasi

Untuk memulakan pelayan pembangunan, jalankan:

php line serve

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

Ciri yang Dilaksanakan

TodoList kami mempunyai ciri-ciri berikut:

1. Menyenaraikan tugas dalam susunan kronologi terbalik
2. Menambah tugasan baharu
3. Menandai tugas sebagai selesai/belum selesai
4. Mengalih keluar 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
• Tapis dan cari

Untuk terus belajar tentang Lithe, lawati Linktree, di mana anda boleh mengakses Discord, dokumentasi dan banyak lagi!