Basi di Dati

GRID PER LE OPERAZIONI CRUD

Per creare la nostra applicazione web possiamo usare uno dei tanti strumenti liberi già a

disposizione, che ci consentono la creazione di siti e applicazioni, come Bootstrap. Questo

contiene modelli di progettazione basati su HTML e CSS, sia per la tipografia, che per le varie

componenti dell’interfaccia, come moduli, pulsanti e navigazione, cosı̀ come alcune estensioni

opzionali di JavaScript. Una caratteristica molto importante di Bootstrap è il fatto che sia

responsivo con tutti i tipi di dispositivi, inoltre include le grid table, che sono molto utilizzate.

Per il nostro progetto:

• creiamo il progetto PHP utilizzando uno tra Eclipse, NetBeans, PhpStorm ecc. e lo

chiamiamo MYCRUD;

• scarichiamo Bootstrap ver 3.3.7 dal sito ufficiale:

http://getbootstrap.com/gettingstarted/#download;

• creiamo 4 pagine PHP, ognuna per un’operazione CRUD che lasceremo per il momento

{create.php,

vuote: read.php, update.php, delete.php};

• creiamo un file database.php per la connessione al database;

• creiamo il file index.php che contiene la griglia Bootstrap;

• copiamo le cartelle css, fonts e js presenti nel Bootstrap scaricato, nel nostro progetto.

Figura 2.101: Configurazione file/cartelle di Bootstrap per il nostro progetto

È importante che il progetto si trovi nella cartella htdocs di xampp

Scriviamo index.php: 152

Figura 2.102: Configurazione file/cartelle di Bootstrap per il nostro progetto

Contiene un titolo e la grid di Bootstrap che per adesso è vuota. Ricordiamo di inserire il

tag per l’aggiunta dei fogli di stile (css) e il link per il js.

Figura 2.103: TAG per CSS ed il JS

Il body avrà un container al cui interno è presente il codice php che effettua la connessione

al db, la query per leggere le informazioni dalla tabella Person e la chiusura della connessione.

Il risultato sarà, per il momento, una tabella vuota perché ancora non è popolata.

153

Figura 2.104: MyPHP CRUD

Aggiungiamo il bottone Create in index.php, con il quale potremmo iniziare a popolare

la tabella Person. Figura 2.105: Aggiunta bottone Create

Figura 2.106: MyPHP CRUD - Pulsante CREATE

E tutti gli altri bottoni, Read, Update e Delete che effettueranno le altre operazioni

CRUD. Figura 2.107: Aggiunta altri bottoni (C)RUD

I bottoni inseriti Create, Read, Update, Delete, fanno riferimento alle quattro pagine php,

rispettivamente create.php, read.php, update.php e delete.php. Pertanto per effettuare

le operazioni CRUD dobbiamo definire in ciascuno di essi le chiamate da effettuare sul database

e quindi le rispettive queries che interrogheranno il database.

154

• create.php: Figura 2.108: create.php

155

Figura 2.109: create.php - Continuazione

• update.php: 156

Figura 2.110: update.php

157

Figura 2.111: update.php - Continuazione

• read.php: 158

Figura 2.112: read.php

Figura 2.113: read.php - Continuazione

• delete.php: 159

Figura 2.114: delete.php

Ora per creare un nuovo utente e accedere con le sue credenziali, in PhPMyAdmin:

• → →

clienteacquistaprodotto Privilegi aggiungi account utente;

• inserire nome utente, il localhost e la password;

• selezionare “Garantisci tutti i privilegi per il database ”clienteacquistaprodotto””;

• selezionare “privilegi globali”; 160

Figura 2.115: phpmyAdmin - Aggiunta nuovo Account

Per vedere gli utenti associati al database, in PhpMyAdmin:

• →

server:127.0.0.1 account utenti.

Figura 2.116: phpmyAdmin - Riepilogo Utenti

In “modifica privilegi” o (“Edit privileges”) si possono assegnare o togliere alcuni pri-

vilegi ad un utente o aggiungere anche altri database su cui l’utente ha quei privilegi, cambiare

la password e avere informazioni sul login. 161

Figura 2.117: phpmyAdmin - Modifica privilegi Utente

Nel file database.php modificare la UserPassword e lo Username con quelli dell’utente

appena creato, per connetterci a database con quelle credenziali e avere i privilegi associati a

tale utente.

Se le operazioni CRUD non funzionano bisogna rendere l’attributo id (della tabella Person)

autoincrementante, in quanto con l’importazione statica da excel si è posto l’id solo come chiave

primaria, ma non incrementante. In PhpMyAdmin:

• → →

Database cliccare su “struttura” sulla riga relativa alla tabella Person

→

cliccare su “change” relativo all’id spuntare “A I”

Figura 2.118: phpmyAdmin - Rendere autoincrementante un indice

A questo punto le operazioni CRUD sul database funzionano correttamente:

• Per creare un utente e popolare la tabella Person:

162

Figura 2.119: PHP CRUD - Creare nuova Persona

• Per modificare un utente

Figura 2.120: PHP CRUD - Modificare una Persona

• Per leggere le informazioni relative di un utente:

163

Figura 2.121: PHP CRUD - Leggere informazioni su una Persona

• Per cancellare un utente:

Figura 2.122: PHP CRUD - Cancellare una Persona Andrea Cuna

Giuseppe Levantaci

03/11/2016

164

2.10 CRUD cycle Figura 2.123: Architettura tipica

• Tipicamente i dati sono memorizzati in un DB MySQL;

• PHP è il linguaggio server-side che manipola le tabelle MySQL per consentire all’utente

nel front-end di eseguire azioni (CRUD) sui dati.

Figura 2.124: Entità Persona

1 CREATE TABLE ‘ Person ‘ (

2 ‘ ID ‘ INT NOT NULL AUTO INCREMENT PRIMARY KEY ,

3 ‘Name ‘ VARCHAR( 4 5 ) NOT NULL ,

4 ‘ Surname ‘ VARCHAR( 4 5 ) NOT NULL ,

5 ‘ City ‘ VARCHAR( 4 5 ) NOT NULL,

6 ‘ B i r t h d a t e ‘DATE,

7 ) ENGINE = INNODB;

Classe PHP per la connessione al DB:

{

1 <?php c l a s s Database $dbName=

2 p r i v a t e s t a t i c ’ C l i e n t e A c q u i s t a P r o d o t t o ’ ;

$dbHost=

3 p r i v a t e s t a t i c ’ l o c a l h o s t ’ ;

$dbUsername

4 p r i v a t e s t a t i c = ’ r o o t ’ ;

$dbUserPassword

5 p r i v a t e s t a t i c = ’ r o o t ’ ;

$

6 p r i v a t e s t a t i c c o n t= n u l l ;

7 {

construct ()

8 public function

9 die ( ’ I n i t f u n c t i o n i s n o t a l l o w e d ’ ) ;

165

}

10

11 {

12 public s t a t i c function connect ( )

$ {

13 i f ( n u l l == s e l f : : c o n t )

$

{

14 t r y s e l f : : c o n t= newPDO( ” mysql : h o s t=” . s e l f : :

$dbHost $dbName

. ” ; ” . ”dbname=” . s e l f : : , self ::

$dbUsername $dbUserPassword

, s e l f : : ) ;

}

15 $e {

16 c a t c h ( PDOException )

$e−>getMessage

17 die ( ( ) ) ;

}

18 }

19 $

20 return s e l f : : cont ;

}

21

22 {

23 public s t a t i c function disconnect ()

$

24 s e l f : : c o n t= n u l l ;

}

25 }

26

27 ?>

2.10.1 PDO (PhpData Objects)

• PDO è un’estensione (introdotta nell’implementazione della versione 5 di PHP) che defi-

nisce un’interfaccia unica, leggera e consistente per accedere alle basi di dati e che offre

allo sviluppatore una classe in grado di fornire metodi utilizzabili indipendentemente dal

DBMS di riferimento;

• PDO fornisce un data-access abstraction layer, cioè un livello di astrazione per l’accesso ai

dati; si tratta infatti di una classe, definita forse impropriamente anche come ”libreria”, che

mette a disposizione un insieme di sotto-classi derivate che agiscono in modo trasparente

rispetto all’utente

• Se PDO non è abilitato: aprire il file di configurazione php.ini e decommentare:

Figura 2.125: Estensione PDO per PHP

• Decommentare poi le righe relative alle DLL di supporto per i DBMS che si desidera

utilizzare: Figura 2.126: Estensioni PDO per PHP

166

• {

1 p u b l i c f u n c t i o n construct ()

2 die ( ’ I n i t f u n c t i o n i s not a l l o w e d ’ ) ;

}

3 Costruttore della classe Database Essendo una classe statica, l’inizializzazione della classe

non è consentita. Per impedire l’abuso della classe, inseriamo un die() per ricordarlo

all’utente;

• {

1 p u b l i c s t a t i c f u n c t i o n c o n n e c t ( )

$ {

2 i f ( n u l l == s e l f : : c o n t )

{

3 try $

4 s e l f : : c o n t= newPDO( ” mysql : h o s t=” . s e l f : :

$dbHost $dbName

. ” ; ” . ”dbname=” . s e l f : : , self

$dbUsername $dbUserPassword

: : , s e l f : : ) ;

}

5 $e {

6 c a t c h ( PDOException )

$e−>getMessage

7 die ( ( ) ) ;

}

8 }

9 $

10 return s e l f : : cont ;

}

11 Funzione principale della classe. Usa il pattern Singleton per assicurarsi che esista una

sola connessione PDO per l’intera applicazione;

• {

1 p u b l i c s t a t i c f u n c t i o n d i s c o n n e c t ( )

$

2 s e l f : : c o n t= n u l l ;

}

3

2.10.2 Grid per le operazioni CRUD

Figura 2.127: Bootstrap from Twitter

• Bootstrap: una raccolta di strumenti liberi per la creazione di siti e applicazioni per il

Web; 167

• Contiene modelli di progettazione basati su HTML e CSS, sia per la tipografia, che per le

varie componenti dell’interfaccia, come moduli, pulsanti e navigazione, cosı̀ come alcune

estensioni opzionali di JavaScript;

• È compatibile con le ultime versioni di tutti i principali browser;

• Dalla versione 2.0 supporta anche il responsive web design: il layout delle pagine web

si regola dinamicamente, tenendo conto delle caratteristiche del dispositivo utilizzato,sia

esso desktop, tablet o smartphone;

• A partire dalla versione 3.0, Bootstrap ha adottato il responsive design come impo-

stazione predefinita, sottolineando il suo essere nata come libreria multi dispositivo e

multipiattaforma.

Bootstrap

Scarichiamo Bootstrap dalsito ufficiale:

http://getbootstrap.com/getting-started/#download

Figura 2.128: Bootstrap - Link ufficiale di download

Nuovo progetto PHP: Figura 2.129: Nuovo progetto PHP

168

Oltre ai file di Bootstrap necessitiamo di:

• 4 file php per le operazioni CRUD (create.php, read.php, update.php, delete.php);

• 1 classe database.php per la connessione al database (classe Database vista prima);

• 1 file index.php che contiene la griglia Bootstrap.

Listiamo l’index.php:

1 <!DOCTYPE html>

2 <h t m l l a n g=” en ”>

3 <head> −8”>

4 <meta c h a r s e t=” u t f

5 <l i n k h r e f=” c s s / b o o t s t r a p . min . c s s ” r e l=” s t y l e s h e e t ”>

6 < s c r i p t s r c=” j s / b o o t s t r a p . min . j s ”&