Una semplice applicazione per l'elenco delle cose da fare che prende le attività inviate dall'utente in un modulo e le salva in un database MySQL. Le attività vengono anche recuperate dal database e visualizzate sulla pagina Web con un pulsante Elimina accanto a ciascuna attività. Quando si fa clic sul pulsante Elimina, l'attività viene eliminata dal database.
Questo è ciò che creeremo in questo tutorial.
Come al solito, creiamo il nostro database. Crea un database chiamato cose da fare e in esso, crea una tabella chiamata attività. La tabella delle attività ha solo due campi, vale a dire:
- id - int(10)
- attività - varchar(255)
Ora crea due file:
Aprili in un editor di testo e incolla il seguente codice all'interno del file 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>
Se visualizzi la tua pagina ora nel browser, avrà un aspetto simile a questo:
Aggiungiamo lo stile. Direttamente sotto il tag
, aggiungi questa riga per caricare il file del foglio di stile:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Apri il file style.css che avevamo creato in precedenza e incollaci questo codice di stile:</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>
Se aggiorniamo il nostro browser ora, otteniamo questo:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Ora scriviamo il codice per salvare l'attività inviata nel database. </P> <p>
All'inizio del file index.php, prima della prima riga, aggiungi questo codice:</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>
Ciò che fa è, se l'utente fa clic sul pulsante di invio, l'attività viene salvata nel database. Tuttavia, se nel modulo non è stata compilata alcuna attività, il valore della variabile $errors è impostato su <em>'è necessario compilare l'attività'. </em> Ma questo non viene visualizzato. Mostriamolo.</P> <p>
Incolliamo questo codice all'interno del modulo. Direttamente sotto il tag <form>. In questo modo:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Se proviamo a inviare il modulo con un valore vuoto, otteniamo questo:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Finora la nostra app salva le attività nel database ma non le mostra.</P> <p>
Quello che dobbiamo fare è recuperarli dal database e quindi visualizzarli. </P> <p>
Apri il file index.php e incolla questo codice subito dopo la chiusura del modulo </form> tag:</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>
Se inseriamo un'attività nel modulo e premiamo il pulsante di invio, otteniamo questo:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Bene! </P> <p>
Facciamo funzionare il nostro pulsante Elimina. Nella parte superiore della pagina, dopo il blocco if che salva l'attività nel database, aggiungi questo codice:</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>
È tutto. Se facciamo clic sul piccolo pulsante "x" ora su un'attività, quell'attività viene eliminata nel database.</P> <h3>Conclusione</h3> <p>
Spero che questo ti aiuti. Una funzionalità che ti consiglio di aggiungere a questa app solo per esercitare ulteriormente le tue abilità è aggiungere la funzione di modifica in cui un post può essere aggiornato anche dopo che è stato creato. Suggerimento:segui il mio tutorial su CRUD: Crea, modifica, aggiorna ed elimina post con il database MySQL</P> <p>
Grazie :D</P> <br>
</section>
<div class="youwvbdiv78"></div>
</article>
<div class="divbywoerm32"></div>
<section id="turn-page" class="flexcenter_itre">
<em class="divbeoemowe12"></em>
<div class="page up flexalignitou">
<span class="divbowue45"></span>
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://it.sqldat.com/mks/kil/1004019458.html' >Gestione account utente, ruoli, permessi, autenticazione PHP e MySQL </a>
</div>
<div class="page down flexalignitou">
<a class='LinkNextArticle' href='http://it.sqldat.com/mks/kil/1004019460.html' >Come creare un blog in PHP e database MySQL - Backend </a>
<i class="next"></i>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/2.js'></script>
</div>
<section class="itlist2">
<ul class="it_flexbetween">
<li class="img_itarticle it_flexbetween">
<div class="itibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051310405385_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://it.sqldat.com/mks/trs/1004018666.html">
<p class="row itrow-3">Trascina e rilascia in MS Access e l'ordinamento condizionale </p>
</a>
</section>
</li>
<li class="img_itarticle it_flexbetween">
<div class="itibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051015115290_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://it.sqldat.com/mks/kil/1004000711.html">
<p class="row itrow-3">Virgolette singole, virgolette doppie e backtick nelle query MySQL </p>
</a>
</section>
</li>
<li class="img_itarticle it_flexbetween">
<div class="itibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051018205961_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://it.sqldat.com/mks/kil/1004001578.html">
<p class="row itrow-3">TOP 5 Sintassi di eliminazione di MySQL con suggerimenti per sviluppatori T-SQL </p>
</a>
</section>
</li>
<li class="img_itarticle it_flexbetween">
<div class="itibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051415313644_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://it.sqldat.com/mks/sqr/1004020752.html">
<p class="row itrow-3">Quando SQL Server ordina il riavvolgimento? </p>
</a>
</section>
</li>
</ul>
</section>
</section>
<aside class="right">
<section class="share">
<div class="share_ititle">
<i></i>
<h2>Condividere</h2>
</div>
<ul class="share_ico it_flexstart">
<li><a class="facebook" title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://it.sqldat.com/mks/kil/1004019459.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://it.sqldat.com/mks/kil/1004019459.html&text=Applicazione per la lista delle cose da fare che utilizza PHP e database MySQL:http://it.sqldat.com/mks/kil/1004019459.html"></a></li>
<li><a class="linked-in" title="Share on LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=http://it.sqldat.com/mks/kil/1004019459.html&title=Applicazione per la lista delle cose da fare che utilizza PHP e database MySQL&summary=&source=http://it.sqldat.com/mks/kil/1004019459.html"></a></li>
<li><a class="print" title="Print" target="" href="javascript:window.print && window.print();"></a></li>
</ul>
</section>
<section class="type_irtlist">
<ol>
<li><a class='childclass' href='http://it.sqldat.com/mks/bze/' target="_self">Database</a></li> <li><a class='childclass' href='http://it.sqldat.com/mks/kil/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://it.sqldat.com/mks/hfe/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://it.sqldat.com/mks/sqr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://it.sqldat.com/mks/pnl/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://it.sqldat.com/mks/trs/' target="_self">Access</a></li> <li><a class='childclass' href='http://it.sqldat.com/mks/ece/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://it.sqldat.com/mks/cab/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="itlist1 article1_list">
<ul class="it_flexbetween">
<li>
<section class="flexalignitou">
<div class="itibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051018002878_S.png' width='300' height='220' border='0'>
</div>
<a href="https://it.sqldat.com/mks/sqr/1004001372.html">
<p class="row itrow-3">
Archiviazione e analisi di documenti su file system Windows con ricerca semantica di SQL Server - Parte 2 </p>
</a>
</section>
<ol>
<li class="it_flexstart">
<a href="https://it.sqldat.com/mks/kil/1004002583.html">
<p class="row itrow-2">
Il modo più efficiente per ottenere il conteggio delle righe della tabella </p>
</a>
</li>
<li class="it_flexstart">
<a href="https://it.sqldat.com/mks/kil/1004003830.html">
<p class="row itrow-2">
Errore durante il caricamento del modulo MySQLdb "Hai installato mysqlclient o MySQL-python?" </p>
</a>
</li>
<li class="it_flexstart">
<a href="https://it.sqldat.com/mks/kil/1004000538.html">
<p class="row itrow-2">
Concedi autorizzazioni a un utente MySQL su Linux tramite riga di comando </p>
</a>
</li>
<li class="it_flexstart">
<a href="https://it.sqldat.com/mks/kil/1004003841.html">
<p class="row itrow-2">
'0000-00-00 00:00:00' non può essere rappresentato come errore java.sql.Timestamp </p>
</a>
</li>
<li class="it_flexstart">
<a href="https://it.sqldat.com/mks/kil/1004003751.html">
<p class="row itrow-2">
PDO::PARAM per tipo decimale? </p>
</a>
</li>
<li class="it_flexstart">
<a href="https://it.sqldat.com/mks/kil/1004014257.html">
<p class="row itrow-2">
MySQL REPLACE() – Sostituisci tutte le istanze di una sottostringa con un'altra stringa </p>
</a>
</li>
</ol>
</li>
</ul>
</section>
</aside>
</section>
<footer>
<section class="it_container it_flexbetween itfooter_info flexalignitou">
<a href="https://it.sqldat.com" class="itbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="it_flexstart">
© DIRITTO D'AUTORE
<a href="https://it.sqldat.com">http://it.sqldat.com</a>
TUTTI I DIRITTI RISERVATI
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>