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.
Erstellen wir zunächst ein neues Lithe-Projekt:
composer create-project lithephp/lithephp todo-app cd todo-app
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
Führen Sie den Befehl aus, um eine neue Migration zu erstellen:
php line make:migration CreateTodosTable
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);
}
};
Führen Sie die Migration aus:
php line migrate
Neues Modell generieren:
php line make:model Todo
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();
}
}
Neuen Controller erstellen:
php line make:controller TodoController
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'
]);
}
}
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();
Um den Entwicklungsserver zu starten, führen Sie Folgendes aus:
php line serve
Gehen Sie in Ihrem Browser zu http://localhost:8000, um die Anwendung in Betrieb zu sehen.
Unsere TodoList verfügt über die folgenden Funktionen:
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:
Von hier aus können Sie die Anwendung erweitern, indem Sie neue Funktionen hinzufügen, wie zum Beispiel:
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!
So nehmen Sie den Gasverbrauch nach der Zahlung wieder auf
So definieren Sie ein Array
Einführung in Screenshot-Tastenkombinationen in Win8
Verwendung der Löschanweisung
Neueste Nachrichten zu BTC-Münzen
So beheben Sie den HTTP-Request-415-Fehler
Hat die Inflationsrate einen Einfluss auf digitale Währungen?
Was soll ich tun, wenn der Docker-Container nicht auf das externe Netzwerk zugreifen kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
