0Pricing
PHP Academy · Lekcja

Tworzenie prostej listy zadań

Utwórz podstawową aplikację listy zadań za pomocą PHP i HTML

Tworzenie prostej listy zadań to bezpłatna lekcja PHP Academy na CoddyKit. To lekcja 1 z 2. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej PHP Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs PHP Academy zawiera 2 lekcji w sumie.

Wprowadzenie do projektu listy zadań

Tworzenie prostej listy zadań

Witamy w lekcji poświęconej tworzeniu prostej listy zadań! W tym projekcie dowiedzą się Państwo, jak utworzyć aplikację PHP do dodawania, wyświetlania i usuwania zadań. Zaczynajmy!

Tworzenie prostej listy zadań — ilustracja 1

Konfigurowanie projektu

Konfigurowanie projektu

Przed rozpoczęciem należy przygotować:

  • Serwer internetowy, taki jak XAMPP lub WAMP.
  • Edytor tekstu lub środowisko IDE (np. VS Code).
  • Plik o nazwie todo.php w katalogu projektu.

Najważniejsze: Ten projekt będzie używać sesji PHP do tymczasowego przechowywania zadań.

Tworzenie podstawowej struktury HTML

Tworzenie podstawowej struktury HTML

Zacznij od utworzenia układu HTML aplikacji listy zadań. Przykład:

Wskazówka: Użyj elementu ul do wyświetlania listy zadań.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
</head>
<body>
  <h1>To-Do List</h1>
  <form action="todo.php" method="post">
    <input type="text" name="task" placeholder="Enter a new task" required>
    <button type="submit" name="add">Add Task</button>
  </form>
  <ul>
    <!-- Task list will appear here -->
  </ul>
</body>
</html>

Rozpoczynanie sesji PHP

Rozpoczynanie sesji PHP

Użyj sesji PHP, aby przechowywać zadania między żądaniami. Dodaj ten kod na początku pliku todo.php:

Najważniejsze: Sesje pozwalają zachować dane podczas przechodzenia między stronami.

<?php
  session_start();

  if (!isset($_SESSION['tasks'])) {
    $_SESSION['tasks'] = [];
  }
?>

Dodawanie zadań do listy

Dodawanie zadań do listy

Przetwórz przesłanie formularza, aby dodać nowe zadanie do sesji. Przykład:

Wskazówka: Użyj funkcji trim(), aby usunąć niepotrzebne spacje z danych wprowadzonych przez użytkownika.

<?php
  if (isset($_POST['add'])) {
    $task = trim($_POST['task']);
    if (!empty($task)) {
      $_SESSION['tasks'][] = $task;
    }
  }
?>

Wyświetlanie listy zadań

Wyświetlanie listy zadań

Użyj pętli, aby wyświetlić zadania przechowywane w sesji. Przykład:

Najważniejsza informacja: Każde zadanie zawiera przycisk usuwania, który pozwala usunąć je z listy.

<ul>
  <?php
    if (!empty($_SESSION['tasks'])) {
      foreach ($_SESSION['tasks'] as $key => $task) {
        echo "<li>$task <form style='display:inline;' method='post'><button type='submit' name='delete' value='$key'>Delete</button></form></li>";
      }
    } else {
      echo "<li>No tasks added yet.</li>";
    }
  ?>
</ul>

Usuwanie zadania

Usuwanie zadania

Przetwórz przesłanie formularza za pomocą przycisku usuwania, aby usunąć zadania. Przykład:

Wskazówka: Ponowne indeksowanie gwarantuje spójność indeksów zadań po usunięciu.

<?php
  if (isset($_POST['delete'])) {
    $key = $_POST['delete'];
    unset($_SESSION['tasks'][$key]);
    $_SESSION['tasks'] = array_values($_SESSION['tasks']); // Re-index the array
  }
?>

Rozbudowa aplikacji

Rozbudowa aplikacji

Można dodać następujące ulepszenia:

  • Ostylluj aplikację za pomocą CSS, aby poprawić interfejs użytkownika.
  • Użyj JavaScriptu, aby przed usunięciem zadań wyświetlać okna dialogowe z prośbą o potwierdzenie.
  • Przechowuj zadania w bazie danych, aby zapewnić trwałe przechowywanie danych.

Najważniejsza informacja: Ulepszenia sprawiają, że aplikacja jest bardziej przyjazna dla użytkownika i funkcjonalna.

Świetna robota!

Świetna robota!

Gratulacje! Udało się zbudować prostą aplikację listy zadań za pomocą PHP. Nauczono się używać sesji do przechowywania zadań, przetwarzać dane formularza oraz dynamicznie wyświetlać i usuwać zadania. W następnej lekcji zostanie zbudowany kolejny ciekawy projekt, który pozwoli jeszcze lepiej opanować PHP. Kodujmy dalej!

Tworzenie prostej listy zadań — ilustracja 10

Często zadawane pytania

Czy lekcja „Tworzenie prostej listy zadań” jest bezpłatna?

Tak — pełny tekst „Tworzenie prostej listy zadań” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu PHP Academy, przejdź na CoddyKit PRO. Kurs PHP Academy zawiera 2 lekcji w sumie.

Co nauczysz się w „Tworzenie prostej listy zadań”?

Utwórz podstawową aplikację listy zadań za pomocą PHP i HTML Ćwiczysz PHP Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć PHP Academy?

Nie wymagamy żadnego doświadczenia. PHP Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 2.

Ile czasu zajmuje lekcja „Tworzenie prostej listy zadań”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji PHP Academy?

Tak. Każda lekcja PHP Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tworzenie prostej listy zadań
  2. Tworzenie formularza kontaktowego
← Powrót do PHP Academy