Prosta aplikacja z listą rzeczy do zrobienia, która pobiera zadania przesłane przez użytkownika w formularzu i zapisuje je w bazie danych MySQL. Zadania są również pobierane z bazy danych i wyświetlane na stronie internetowej z przyciskiem usuwania obok każdego zadania. Po kliknięciu przycisku usuwania zadanie jest usuwane z bazy danych.
Właśnie to będziemy budować w tym samouczku.
Jak zwykle stwórzmy naszą bazę danych. Utwórz bazę danych o nazwie do zrobienia i w nim utwórz tabelę o nazwie zadania. Tabela zadań ma tylko dwa pola, a mianowicie:
- id - int(10)
- zadanie - varchar(255)
Teraz utwórz dwa pliki:
Otwórz je w edytorze tekstu i wklej następujący kod do pliku index.php:
<!DOCTYPE html>
<html>
<head>
<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
<div class="heading">
<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
</div>
<form method="post" action="index.php" class="input_form">
<input type="text" name="task" class="task_input">
<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
</form>
</body>
</html>
Jeśli teraz przeglądasz swoją stronę w przeglądarce, wygląda to mniej więcej tak:
Dodajmy stylizację. Bezpośrednio pod tagiem
dodaj ten wiersz, aby załadować plik arkusza stylów:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Otwórz plik style.css, który utworzyliśmy wcześniej i wklej do niego ten kod stylizacji:</P> <pre><code>.heading{
width: 50%;
margin: 30px auto;
text-align: center;
color: #6B8E23;
background: #FFF8DC;
border: 2px solid #6B8E23;
border-radius: 20px;
}
form {
width: 50%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: #FFF8DC;
border: 1px solid #6B8E23;
}
form p {
color: red;
margin: 0px;
}
.task_input {
width: 75%;
height: 15px;
padding: 10px;
border: 2px solid #6B8E23;
}
.add_btn {
height: 39px;
background: #FFF8DC;
color: #6B8E23;
border: 2px solid #6B8E23;
border-radius: 5px;
padding: 5px 20px;
}
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th {
font-size: 19px;
color: #6B8E23;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #E9E9E9;
}
.task {
text-align: left;
}
.delete{
text-align: center;
}
.delete a{
color: white;
background: #a52a2a;
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
}
</code></pre> <p>
</P> <p>
</P> <p>
</P> <p>
Jeśli odświeżymy teraz naszą przeglądarkę, otrzymamy to:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Teraz piszemy kod, który zapisze przesłane zadanie do bazy danych. </P> <p>
Na samej górze pliku index.php, przed pierwszym wierszem, dodaj ten kod:</P> <pre><code><?php
// initialize errors variable
$errors = "";
// connect to database
$db = mysqli_connect("localhost", "root", "", "todo");
// insert a quote if submit button is clicked
if (isset($_POST['submit'])) {
if (empty($_POST['task'])) {
$errors = "You must fill in the task";
}else{
$task = $_POST['task'];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
mysqli_query($db, $sql);
header('location: index.php');
}
}
// ...</code></pre> <p>
Powoduje to, że jeśli użytkownik kliknie przycisk Prześlij, zadanie zostanie zapisane w bazie danych. Jeśli jednak w formularzu nie wypełniono żadnego zadania, wartość zmiennej $errors jest ustawiona na <em>„musisz wypełnić zadanie”. </em> Ale to się nie wyświetla. Pokażmy to.</P> <p>
Wklejmy ten kod w formularzu. Bezpośrednio pod tagiem <form>. Tak:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Jeśli spróbujemy przesłać formularz z pustą wartością, otrzymamy to:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Jak dotąd nasza aplikacja zapisuje zadania w bazie danych, ale ich nie wyświetla.</P> <p>
To, co musimy zrobić, to pobrać je z bazy danych, a następnie wyświetlić. </P> <p>
Otwórz plik index.php i wklej ten kod natychmiast po zamykającym formularzu tagu </form>:</P> <pre><code>//...
// </form>
<table>
<thead>
<tr>
<th>N</th>
<th>Tasks</th>
<th style="width: 60px;">Action</th>
</tr>
</thead>
<tbody>
<?php
// select all tasks if page is visited or refreshed
$tasks = mysqli_query($db, "SELECT * FROM tasks");
$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
<tr>
<td> <?php echo $i; ?> </td>
<td class="task"> <?php echo $row['task']; ?> </td>
<td class="delete">
<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a>
</td>
</tr>
<?php $i++; } ?>
</tbody>
</table></code></pre> <p>
Jeśli wprowadzimy zadanie w formularzu i klikniemy przycisk przesyłania, otrzymamy to:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Dobry! </P> <p>
Sprawmy, aby nasz przycisk usuwania działał. Na górze strony, po bloku if, który zapisuje zadanie w bazie danych, dodaj ten kod:</P> <pre><code>
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?></code></pre> <p>
To wszystko. Jeśli klikniemy teraz mały przycisk „x” przy zadaniu, to zadanie zostanie usunięte z bazy danych.</P> <h3>Wniosek</h3> <p>
Mam nadzieję, że ci to pomoże. Jedną z funkcji, którą polecam dodać do tej aplikacji, aby dalej ćwiczyć swoje umiejętności, jest dodanie funkcji edycji, w której można aktualizować post nawet po utworzeniu. Wskazówka:postępuj zgodnie z moim samouczkiem na temat CRUD: Twórz, edytuj, aktualizuj i usuwaj posty za pomocą bazy danych MySQL</P> <p>
Dzięki :D</P> <br>
</section>
</article>
<section id="turn-page" class="rplflexcenter">
<div class="page up rplflexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://pl.sqldat.com/bzs/gel/1015019458.html' >Zarządzanie kontami użytkowników, role, uprawnienia, uwierzytelnianie PHP i MySQL </a>
</div>
<div class="page down rplflexalign">
<a class='LinkNextArticle' href='http://pl.sqldat.com/bzs/gel/1015019460.html' >Jak stworzyć bloga w PHP i bazie danych MySQL - Backend </a>
<i class="next"></i>
<span class="wnwyfwe9">
<em class="bgiwlaew54"></em>
</span>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/8.js'></script>
</div>
</section>
</section>
<section class="bottom rplcontainer rplflexbetween">
<section class="pletype_list right">
<ol>
<li><a class='childclass' href='http://pl.sqldat.com/bzs/ige/' target="_self">Database</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/gel/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/qoe/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/usr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/sql/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/dbs/' target="_self">Access</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/aye/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://pl.sqldat.com/bzs/xvb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="left">
<ol class="plarticle_list">
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015000606.html">
<p class="pltextover" title="Jak zarządzać bazą danych za pomocą Adminera ">Jak zarządzać bazą danych za pomocą Adminera </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015002713.html">
<p class="pltextover" title="Ustawianie hasła użytkownika root MySQL w systemie OS X ">Ustawianie hasła użytkownika root MySQL w systemie OS X </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015001931.html">
<p class="pltextover" title="com.mysql.jdbc.exceptions.jdbc4.CommunicationsException:awaria łącza komunikacyjnego ">com.mysql.jdbc.exceptions.jdbc4.CommunicationsException:awaria łącza komunikacyjnego </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015003865.html">
<p class="pltextover" title="Najlepsza praktyka:Importuj plik mySQL w PHP; podzielone zapytania ">Najlepsza praktyka:Importuj plik mySQL w PHP; podzielone zapytania </p>
</a>
</li>
<li class="rplflexstart">
<i></i>
<a href="https://pl.sqldat.com/bzs/gel/1015002077.html">
<p class="pltextover" title="Porządkowanie według kolejności wartości w klauzuli SQL IN() ">Porządkowanie według kolejności wartości w klauzuli SQL IN() </p>
</a>
</li>
</ol>
</section>
</section>
<section class="plclist1 plarticle1_list plbottom2 rplflexbetween rplcontainer">
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051018210632_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/usr/1015001579.html">
<p class="row plcirow-3">
Dynamiczne wykonywanie SQL w SQL Server </p>
</a>
</section>
</li>
</ul>
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051113564101_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/usr/1015004888.html">
<p class="row plcirow-3">
Używanie Excel VBA do uruchamiania zapytania SQL </p>
</a>
</section>
</li>
</ul>
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051213572432_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/xvb/1015016504.html">
<p class="row plcirow-3">
Jak w bezpieczny sposób przeprowadzać zmiany schematu w MySQL i MariaDB? </p>
</a>
</section>
</li>
</ul>
<ul class="rplflexbetween">
<li>
<section class="rplflexalign">
<div class="plcibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051113493460_S.png' width='300' height='220' border='0'>
</div>
<a href="https://pl.sqldat.com/bzs/usr/1015004089.html">
<p class="row plcirow-3">
Jakie jest znaczenie 1/1/1753 w SQL Server? </p>
</a>
</section>
</li>
</ul>
</section>
<footer>
<section class="rplcontainer rplflexbetween plfooter_info rplflexalign">
<a href="https://pl.sqldat.com" class="plbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="rplflexstart">
© PRAWA AUTORSKIE
<a href="https://pl.sqldat.com">http://pl.sqldat.com</a>
WSZELKIE PRAWA ZASTRZEŻONE
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>