Probabilmente penserai che non possiamo fare molto con i dati di esempio che abbiamo aggiunto al nostro database in precedenza, e hai ragione, ma sarà sufficiente apprendere le basi dell'incorporamento del codice PHP e dei risultati delle query su un DB MySQL nelle tue pagine HTML5.
Prima di tutto, dovremo cambiare l'estensione del documento principale della nostra applicazione in .php
invece di html:
# mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php.
Quindi apriamo il progetto in Netbeans e iniziamo a fare alcune modifiche.
1. Aggiungi una cartella al progetto denominato include dove memorizzeremo le applicazioni php di backend.
2. Crea un file chiamato dbconnection.php
dentro include e inserire con il seguente codice:
php $host = "localhost"; $username = "radice"; $password = "MyFancyP4ssw0rd"; $database = "tecmint_db"; //Stabilire una connessione con il server MySQL $mysqli = new mysqli($host, $username, $password,$database); /* Controlla lo stato della connessione. Uscire in caso di errori. */ if (mysqli_connect_errno()) { printf("Connessione fallita: %s\n", mysqli_connect_error()); Uscita(); } $mysqli -> query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'"); $record = array(); $query = "SELEZIONA Titolo, Autore, Data di invio FROM articoli_tbl;"; $risultato = $mysqli->query($query) or die($mysqli->error); $dati = array(); while ( $row = $result->fetch_assoc() ){ $data[] = json_encode($row); } echo json_encode($dati);
come indicato nell'immagine seguente:
Questo file verrà utilizzato per connettersi al server del database, per interrogarlo e per restituire i risultati di quella query in una stringa simile a JSON da consumare dall'applicazione frontend con un leggero modifica.
Nota che in genere utilizzeresti file separati per eseguire ciascuna di queste operazioni, ma abbiamo scelto di includere tutte queste funzionalità in un file per semplicità.
3. Nel index.php
, aggiungi il seguente frammento appena sotto l'apertura corpo etichetta. Questo è il modo jQuery di chiamare un'app PHP esterna quando il web documento è pronto, o in altre parole, ogni volta che carica:
4. Ora aggiungi un ID univoco (come all'interno del ciclo for sopra) a ogni riga nel div con classe riga in fondo a index.php:
TitoliAutoriPubblicato su:
Se ora clicchi Esegui progetto, dovresti vedere questo:
Che è essenzialmente la stessa delle informazioni restituite quando abbiamo eseguito la query dal prompt del nostro client MySQL in precedenza.
Lancio Filezilla dal Trattino menu ed entrare nel IP del server FTP remoto e le tue credenziali. Quindi fare clic su Connessione rapida per connettersi al FTP server:
Navigare verso /home/gabriel/NetBeansProjects/TecmintTest/public_html/, seleziona il suo contenuto, fai clic destro su di essi e seleziona Caricamento.
Questo, ovviamente, presuppone che l'utente remoto indicato in Nome utente dispone dei permessi di scrittura sulla directory remota. Quando il caricamento è completo, punta il tuo browser nella posizione desiderata e dovresti vedere la stessa pagina di prima (nota che noi non hai impostato il database MySQL locale sull'host remoto, ma puoi farlo facilmente seguendo i passaggi dall'inizio di questo tutorial).
In questo articolo abbiamo aggiunto funzionalità dinamiche alla nostra applicazione web utilizzando jQuery e un po' JavaScript. Puoi fare riferimento al funzionario documenti jQuery per ulteriori informazioni, che saranno molto utili se decidi di scrivere applicazioni più complesse. Per concludere, abbiamo anche distribuito la nostra applicazione su un telecomando LAMPADA server utilizzando a FTP cliente.
Siamo entusiasti di sentire la tua opinione su questo articolo: non esitare a contattarci utilizzando il modulo sottostante.