Erstellen einer TodoList mit PHP und dem Lithe Framework: Eine vollständige Anleitung-PHP-Tutorial-php.cn

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

In diesem Tutorial erstellen wir eine funktionierende TodoList-Anwendung mit Lithe. Sie erfahren, wie Sie Ihr Projekt strukturieren, interaktive Ansichten erstellen und eine RESTful-API zur Verwaltung Ihrer Aufgaben implementieren. Dieses Projekt wird als hervorragendes Beispiel dafür dienen, wie man moderne Webanwendungen mit PHP erstellt.

Voraussetzungen

PHP 7.4 oder höher
Composer installiert
MySQL
Grundkenntnisse in PHP und JavaScript

Projektstruktur

Erstellen wir zunächst ein neues Lithe-Projekt:

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

Nach dem Login kopieren

Konfigurieren der Datenbank

Bearbeiten Sie die .env-Datei im Projektstammverzeichnis mit den folgenden Einstellungen:

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

Nach dem Login kopieren

Erstellen der Migration

Führen Sie den Befehl aus, um eine neue Migration zu erstellen:

php line make:migration CreateTodosTable

Nach dem Login kopieren

Bearbeiten Sie die generierte Migrationsdatei in 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);
    }
};

Nach dem Login kopieren

Führen Sie die Migration aus:

php line migrate

Nach dem Login kopieren

Implementierung des Modells

Neues Modell generieren:

php line make:model Todo

Nach dem Login kopieren

Bearbeiten Sie die Datei 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();
    }
}

Nach dem Login kopieren

Erstellen des Controllers

Neuen Controller erstellen:

php line make:controller TodoController

Nach dem Login kopieren

Bearbeiten Sie die Datei 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'
        ]);
    }
}

Nach dem Login kopieren

Erstellen der Ansichten

Erstellen Sie das Verzeichnis src/views/todo und fügen Sie die Datei index.php hinzu:

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

Nach dem Login kopieren

Ausführen der Anwendung

Um den Entwicklungsserver zu starten, führen Sie Folgendes aus:

php line serve

Nach dem Login kopieren

Gehen Sie in Ihrem Browser zu http://localhost:8000, um die Anwendung in Betrieb zu sehen.

Implementierte Funktionen

Unsere TodoList verfügt über die folgenden Funktionen:

To-Do-Liste in umgekehrter chronologischer Reihenfolge
Hinzufügen neuer Aufgaben
Aufgaben als erledigt/ausstehend markieren
Aufgabenentfernung
Responsive und benutzerfreundliche Oberfläche
Visuelles Feedback für alle Aktionen
Fehlerbehandlung

Abschluss

Sie verfügen jetzt über eine voll funktionsfähige TodoList-Anwendung, die mit Lithe erstellt wurde. Dieses Beispiel zeigt, wie Sie eine moderne Webanwendung mit PHP erstellen, einschließlich:

Richtige MVC-Codestruktur
RESTful API-Implementierung
Interaktive Benutzeroberfläche
Datenbankintegration
Fehlerbehandlung
Benutzerfeedback

Von hier aus können Sie die Anwendung erweitern, indem Sie neue Funktionen hinzufügen, wie zum Beispiel:

Benutzerauthentifizierung
Aufgabenkategorisierung
Ablaufdaten
Filter und Suche

Um mehr über Lithe zu erfahren, gehen Sie zu Linktree, wo Sie auf Discord, Dokumentation und mehr zugreifen können!

Das obige ist der detaillierte Inhalt vonErstellen einer TodoList mit PHP und dem Lithe Framework: Eine vollständige Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!