Nel vino c’è la saggezza, nella birra c’è la forza, nell’acqua ci sono i batteri: come completare il progetto wikibeer e vivere felici

Completiamo il training iniziato con gli articoli:

https://umbriawayinfo.wordpress.com/
https://umbriawaydeveloper.wordpress.com/
https://umbriawaydesign.wordpress.com/
https://umbriawaycultura.wordpress.com/

dove a una difficoltà crescente si evince che la nostra WEB è CRESCIUTA. Ma adesso serve il tocco finale, bisogna rifinire e limare magari implementare qualche nuova funzionalità di sviluppo come quella che ci vede restituire delle informazioni o suggerimenti una volta digitata una LETTERA nel motore di ricerca. Un HINT suggeritore da implementare. Poi dobbiamo migliorare la grafica e volendo potremmo anche inserire una serie di aneddoti random che girano sulla pagina, naturalmente idea per un successivo articolo. Nel frattempo completiamo il tutto anche se non abbiamo curato ne il database che sarebbe dovuto partire con caratteristiche diverse, nè il contenuto (solo cemento raffazzonato per verificare le funzionalità dell’ applicativo) .

Ok quindi la pria cosa da fare é rispetto all’ articolo presente in https://umbriawaycultura.wordpress.com/ sistemare l’immagine di sfondo in modo più efficiente. Dopo aver smanettato con PHOTOSHOP con i CSS abbiamo dato un tocco di classe alle immagini arrotondando i BORDI e sistemato varie dimensioni con i CSS in linea /padding, margin etc) dopodichè ci siamo dati anche una organizzazione logica con delle cartelle di progetto in cui abbiamo messo in piedi ASSETS per le risorse esterne, in modo anche da gestire JS e CSS. Risolte tutte le magagne grafiche che non sono poche (abbiamo anche dovuto inserire un DIV dove andremo a raccogliere i dati partiti dalla prima lettera suggerita sul campo testo che funziona grazie a una funzione AJAX) abbiamo anche la grossa questione della SICUREZZA del FORM e ci siamo preoccupati di SANIFICARE il campo testo. Per fare questa operazione abbiamo creato un file di supporto esterno chiamato function.php dove all’ interno abbiamo scritto una funzione di validazione dati:

function validation ($data) {
$data=trim($data);
$data=stripcslashes($data);
$data=htmlspecialchars($data);
return $data;
}

che grazie all’ include sulla pagina principale ha permesso di catturare il valore del campo e pulirlo con l’istruzione:

validation($get_value = $_GET[‘nomecampotestopresentenelform’]);

dopodiché abbiamo implementato il meccanismo di suggerimento a un livello grezzo senza decorazioni barocche che comunque sarebbero necessarie. Per fare questa operazione abbiamo creato una CLASSE DATABASE agganciata alla index page con il consueto INCLUDE o REQUIRE ONCE e abbiamo creato la pagina di elaborazione dati in PHP che riceverà i dati da una funzione AJAX che é la seguente:

function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("results").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "hint.php?q=" + str, true);
xmlhttp.send();
}
}

AJAX funziona come FLASH l’eroe Marvel che appena ha iniziato a fare una cosa ha già finito, nel senso che permette al server anche di fare altro senza apsettare il rendering della pagina. In questo caso ci sono dei punti critici come document.getElementById(“txtHint”).innerHTML = “”; che identificano il segmento di pagina caratterizzato da ID txtHint che catturà il valore di una stringa Q che viene spedita alla pagina di elaborazione dati in php a cui si accenava prima e che permetterà l’attivazione del DB grazie all’ accensione della classe con:

<?php
// get the q parameter from URL
$q = ($_REQUEST["q"]);

$hint = "";

$db = new Database();
$query= "SELECT * FROM tuonometabella WHERE nomecampo LIKE '$q%' ";
$get = $db->select($query);


if ($get) {

while ($row = $get->fetch_assoc()) {

?>

<div class="post">
<span id="results"><strong><h4 class="title"><?php echo $row['titolo']; ?></h4></strong>

    <?php } } else { ?>

<?php } ?>

da notare l’importanza del $db = new Database(); che istanzia la classe che é presente in testa alla pagina grazie all’ inclusione

<?php include 'conf/db.php'; ?>

A questo punto il grosso del lavoro é fatto anche se ci sarebbe ancora molto da fare, ma al momento abbiamo una struttura di base tirata su oltre al cinquanta per cento offerto dal suo potenziale. Andrebbero fatte delle valutazioni per il mysql_real_escape_string e su come migliorare la parte di programmazione sulla stringa di testo con messaggi di errore personalizzati. Ma al momento non resta che allietare le nostre risorse idriche con una bella birra da sorseggiare!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...