Esistono gli arbitri venduti? C’è un listino prezzi ed esiste un gestionale per contattarli? Certo, da oggi puoi usufruire di venduto crud versione 1.0 di Umbriaway Consulting!

web developer umbriaCome fare quando un arbitro serve per veicolare una partita decisiva per la classifica? Chi sono quelli maggiormente corruttibili? Come li contattiamo? Ora essendo l’argomento delicatissimo ci siamo astenuti dall’ inserire nella tabella di base che abbiamo ribattezzato product in quanto seppure umanamente tangibili i venduti sono solo equiparabili alle logiche bce della globalizzazione a pozzanghere liquide, qui dati sensibili come numero di telefono, indirizzo e mail a corredo che abbiamo occultato per evitare diffamazioni. Ovviamente l’esercizio é finalizzato a sviscerare meglio il potenziale offerto da PHP come tecnologia. Quindi poche banfate e molti fatti, utilizzeremo PHP, MYSQL, CSS , HTML5 per mettere in piedi il nostro potentissimo applicativo che avrà i seguenti file a corredo:

  • index.php che é la lista di default visibile dal nostro applicativo
  • add.php che serve per aggiungere dati
  • edit.php (o se volete anche update.php) che ci servirà a modificare i dati
  • una cartella conn che al suo interno conterrà il connect.php responsabile del collegamento al DB
  • una cartella css che conterrà al suo interno tre file, ciascuno dei quali formatterà il bottone aggiungi arbitro, la tabella di base nella index o lista di nomi e i form che ci serviranno per aggiornare a aggiungere i dati.

Quello che vedi é quello che ottieni per cui iniziamo a costruire prima di tutto il nostro database che basterà importare direttamente nel nostro DB, a scelta in locale o sull’ ambiente di produzione se l’applicativo ci serve davvero! Per fare questa operazione selezioniamo il DB di interesse all’ interno di phpMyAdmin http://localhost/phpmyadmin/ e importiamo la seguente struttura della tabella product con dei dati di esempio che poi modellerempo a nostro piacimento, creando un DB demo per esempio e andando sull’ apposita linguetta SQL messa a disposizione dallo strumento:

/*

— phpMyAdmin SQL Dump
— version 4.1.14
— http://www.phpmyadmin.net

— Host: 127.0.0.1
— Generation Time: Apr 30, 2015 at 09:23 PM
— Server version: 5.6.17
— PHP Version: 5.5.12

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;


— Database: `demo`

— ——————————————————–


— Table structure for table `product`

CREATE TABLE IF NOT EXISTS `product` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
`price` decimal(10,0) NOT NULL,
`quantity` int(11) NOT NULL,
`description` text COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;


— Dumping data for table `product`

INSERT INTO `product` (`id`, `name`, `price`, `quantity`, `description`) VALUES
(1, ‘Name 1’, ‘1000’, 2, ‘good’),
(2, ‘Name 2’, ‘2000’, 3, ‘good’),
(3, ‘Name 3’, ‘3000’, 4, ‘good’);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

*/

fatta questa operazione, eseguendo il tutto con l’IMPORT, andremo a creare all’ interno della cartella conn (potete chiamarla come volete, anche connessione, l’idea é quella di usare nomi congruenti identificativi che spiegano da sole il contenuto solo leggendole) un file che chiameremo connect,php che conterrà al suo interno il seguente codice PHP:

/*
<?php
$con = mysqli_connect(‘localhost’, ”, ”, ‘demo’);
?>
*/

web developer umbriadove demo é il nostro DB che ospita la tabella e tutta la stringa non fa altro che sfruttare con un semplice cavo (se vogliamo usare metafore visuali) il collegamento con il core del nostro gestionale tramite la funzione mysqli_connect che accetta come si può osservare quattro parametri o argomenti tra le parentesi per cui abbiamo la macchina server dove puntare, negli ambienti di produzione si utilizzano gli indirizzi IP, il nome utente e la pwd e il nome del DB. In genere in locale spesso il nome utente e la pwd sono in bianco, come nel caso sopra indicato. A questo punto prima di passare ai file diamo un occhiata alla cartella CSS che conterrà come detto tre file, form.css, table.css, button.css che parlano da soli come funzionalità, in pratica ci serviranno per abbellire il nostro applicativo e rendere responsive anche la nostra tabella. Quindi diamo un occhiata a table.css che andrà copiato integralmente senza i /* e */ nel file vuoto menzionato e che qui servono solo ad ingannare wordpress:

/*
table {

border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
*/

Tralasciamo per ora spiegazioni approfondite su questo codice in quanto il CSS esula al momento dall’ obiettivo che ci siamo posti, ossia mettere in piedi il nostro applicativo. A questo punto vediamo il contenuto del button.css. per farlo abbiamo utilizzato uno dei tanti tools presenti in rete digitando css button tools e nello specifico: https://toolset.mrwebmaster.it/css/button-generator.html che ha generato il seguente codice da incollare dentro il file vuoto menzionato, sempre senza i riferimenti ai commenti:

/*
.btn-toolset {
display: inline-block;
text-align: center;
white-space: nowrap;
color: #FFFFFF;
text-decoration: none;
line-height: 1.2;
font-weight: normal;

font-size: 18px;
background-color: #007BFF;
border-radius: 16px;
padding: 6px 20px;
border: 1px solid #004996;
cursor: pointer;
}
.btn-toolset:hover {
background-color: #0063CC;
border-color: #0056B3;
}
.btn-toolset > strong {
font-size: 24px;
}
*/

ricordiamoci che .btn-toolset come classe dovrà essere aggiunto al nostro bottone che ci consentirà di aggiungere un nuovo arbitro. A questo punto diamo un occhiata anche alla stilizzazione del file form.css:

/*

* {
box-sizing: border-box;
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

label {
padding: 12px 12px 12px 0;
display: inline-block;
}

input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}

input[type=submit]:hover {
background-color: #45a049;
}

.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}

.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}

/* Responsive layout – when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}

*/

dopo aver mostrato il contenuto delle due cartelle css e conn nonc i resta che costruire i tre file menzionati, con index.php come priorità, collegando tutti i file esterni appena creati, compresa la stringa di connessione e gli stili, cosa che possiamo osservare nelle prime quattro righe di testo:

/*
<link rel=”stylesheet” href=”css/table.css”>
<link rel=”stylesheet” href=”css/button.css”>
<?php
require ‘conn/connect.php’;

if(isset($_GET[‘action’])){
$id = $_GET[‘id’];
mysqli_query($con, ‘delete from product where id=’.$id);
}
?>
<a href=”add.php” class=”btn-toolset”>Add arbitro</a>
<br>
In questa tabella sono presenti i nominativi degli arbitri che si offrono per prestazioni varie alle squadre più vincenti d’Italia. Non potendo più usufruire di vetture per il loro rientro a casa si limitano solo a richieste ufficiose sul codice IBAN.
<table cellpadding=”2″ cellspacing=”2″ border=”1″>
<tr>
<th>Id</th>
<th>Name</th>
<th>description</th>
<th>quantity</th>
<th>Price</th>
<th>Option</th>
</tr>
<?php
$result = mysqli_query($con, ‘select * from product’);
while($product = mysqli_fetch_object($result)){
?>
<tr>
<td><?php echo $product->id; ?></td>
<td><?php echo $product->name; ?></td>
<td><?php echo $product->description; ?></td>
<td><?php echo $product->quantity; ?></td>
<td><?php echo $product->price; ?></td>
<td align=”center”><a
href=”index.php?id=<?php echo $product->id; ?>&action=delete”
onclick=”return confirm(‘Are you sure?’)”>Delete</a> |
<a href=”edit.php?id=<?php echo $product->id; ?>”>Edit</a>
</td>
</tr>
<?php } ?>
</table>
*/

In questa pagina ci sono molte cose interessanti dal punto di vista didattico da spiegare, ma per ora limitiamoci a riportare il codice per ogni singolo file, a questo punto possiamo creare il nostro add.php che non sarà altro che un semplice form con la query insert:

/*
<link rel=”stylesheet” href=”css/form.css”>
<?php
require ‘conn/connect.php’;
if(isset($_POST[‘submitSave’])){
$name = $_POST[‘name’];
$price = $_POST[‘price’];
$quantity = $_POST[‘quantity’];
$description = $_POST[‘description’];
mysqli_query($con, ‘insert into product(name, price, quantity, description) values(“‘.$name.'”,’.$price.’,’.$quantity.’,”‘.$description.'”)’);
header(‘Location: index.php’);
}
?>
<form method=”post”>
<table cellpadding=”2″ cellspacing=”2″>
<tr>
<td>Name</td>
<td><input type=”text” name=”name”></td>
</tr>
<tr>
<td>Price</td>
<td><input type=”text” name=”price”></td>
</tr>
<tr>
<td>Quantity</td>
<td><input type=”text” name=”quantity”></td>
</tr>
<tr>
<td>Description</td>
<td><textarea rows=”5″ cols=”20″ name=”description”></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”submit” name=”submitSave” value=”Save”></td>
</tr>
</table>
</form>
*/

mentre per la pagina di aggiornamento che contiene la query update, ossia edit.php avremo:

/*
<link rel=”stylesheet” href=”css/form.css”>
<?php
require ‘conn/connect.php’;
if(isset($_GET[‘id’])){
$result = mysqli_query($con, ‘select * from product where id=’.$_GET[‘id’]);
$product = mysqli_fetch_object($result);
}
if(isset($_POST[‘submitSave’])){
$id = $_POST[‘id’];
$name = $_POST[‘name’];
$price = $_POST[‘price’];
$quantity = $_POST[‘quantity’];
$description = $_POST[‘description’];
mysqli_query($con, ‘update product set name=”‘.$name.'”, price=’.$price.’, quantity=’.$quantity.’, description=”‘.$description.'” where id=’.$id);
header(‘Location: index.php’);
}
?>
<form method=”post”>
<table cellpadding=”2″ cellspacing=”2″>
<tr>
<td>Id</td>
<td><?php echo $product->id; ?> <input type=”hidden” name=”id”
value=”<?php echo $product->id; ?>”></td>
</tr>
<tr>
<td>Name</td>
<td><input type=”text” name=”name”
value=”<?php echo $product->name; ?>”></td>
</tr>
<tr>
<td>Price</td>
<td><input type=”text” name=”price”
value=”<?php echo $product->price; ?>”></td>
</tr>
<tr>
<td>Quantity</td>
<td><input type=”text” name=”quantity”
value=”<?php echo $product->quantity; ?>”></td>
</tr>
<tr>
<td>Description</td>
<td><textarea rows=”5″ cols=”20″ name=”description”><?php echo $product->description; ?></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”submit” name=”submitSave” value=”Save”></td>
</tr>
</table>
</form>
*/

A questo punto non ci resta che modellare i nostri dati nel DB per avere il nostro DB pronto all’ uso e aiutare qualche squadra blasonata a caccia del triplete per migliorare la sua classifica. Ma prima dobbiamo soffermarci su tutta una serie di istruzioni base presente in questo potentissimo applicativo:

  • la presenza dell’ istruzione require ‘conn/connect.php’; tra tag dedicati indica alla pagina di andarsi a connettere con i dati presenti nel file connect.php
  • i link <link rel=”stylesheet” href=”css/form.css”> vanno a vestire in modo stiloso le nostre parti grezze HTML

Analisi del meccanismo di cancellazione, se diamo un occhiata a questo codice della index:

/*
<?php
if(isset($_GET[‘action’])){
$id = $_GET[‘id’];
mysqli_query($con, ‘delete from product where id=’.$id);
}
?>

e la successiva parte finale della sezione option del link di cancellazione:

<td align=”center”>
<a href=”index.php?id=<?php echo $product->id; ?>&action=delete”
onclick=”return confirm(‘Are you sure?’)”>Delete</a> |
<a href=”edit.php?id=<?php echo $product->id; ?>”>Edit</a>
</td>

/*

ci accorgiamo che schiacciando il link verrà inviata una richiesta GET a inizio pagina che catturerà il parametro ID del record da cancellare più l’azione fisica dell’ eliminazione che passa tramite un metodo java script con loggetto CONFIRM che aprirà una finestra diu dialogo che ci chiederà di pensarci bene prima di continuare, in quanto stiamo per togliere un record. Come sappiamo CRUD in PHP sta per create, read, update, delete quindi non ci resta che dare un occhiata alla query che nella index ci fa fare la letura READ:

/*
<?php
$result = mysqli_query($con, ‘select * from product’);
while($product = mysqli_fetch_object($result)){
?>
*/

Per aggiungere e creare tramite add.php abbiamo la seguente query:

/*
<?php
require ‘conn/connect.php’;
if(isset($_POST[‘submitSave’])){
$name = $_POST[‘name’];
$price = $_POST[‘price’];
$quantity = $_POST[‘quantity’];
$description = $_POST[‘description’];
mysqli_query($con, ‘insert into product(name, price, quantity, description) values(“‘.$name.'”,’.$price.’,’.$quantity.’,”‘.$description.'”)’);
header(‘Location: index.php’);
}
?>
*/

mentre per il nostro aggiornamento dati UPDATE la pagina edit.php conterrà:

/*
<?php
if(isset($_POST[‘submitSave’])){
$id = $_POST[‘id’];
$name = $_POST[‘name’];
$price = $_POST[‘price’];
$quantity = $_POST[‘quantity’];
$description = $_POST[‘description’];
mysqli_query($con, ‘update product set name=”‘.$name.'”, price=’.$price.’, quantity=’.$quantity.’, description=”‘.$description.'” where id=’.$id);
header(‘Location: index.php’);
}
?>
*/

web developer umbriaA questo punto abbiamo ottenuto qualcosa che già funziona, e che potremmo abbellire in seguito magari usando bootstrap, per esempio inserendo una barra superiore con dei menù, ma per ora abbiamo centrato l’obiettivo: se qualche squadra zebrata avrà bisogno di una direzione di gioco molto flessibile per non dire altro, potrà consultare il database e aggiornarlo e anche cancellare quei nominativi che nel frattempo dopo un lungo periodo di psicoanalisi sono tornati sulla retta via e non potranno prendere decisioni discutibili durante la partita! Al prossimo applicativo con il codice spiegato passo passo con Umbriaway Consulting! Importante: essendo alcuni campi settati per ospitare numeri interi, non potranno funzionare nell’ inserimento o nell’ aggiornamento dei dati se abbiamo la pessima idea di inserire delle stringhe! Da notare che avendo insrito nella struttura del DB anche la codifica dei caratteri UTF-8 anche gli apostrofi che in genere creano problemi con PHP sono permessi. Per girare in locale il gestionale arbitri venduti avrà bisogno di un applicativo come XAMPP da scaricare dalla rete. See you later con il prossimo applicativo