Creare un motore di ricerca personalizzato, mossa N 2, la trasmissione dati con i form e PHP

web design umbria

web design umbria

Mentre nella prima puntata di questo tutorial ci siamo dedicati a costruire la parte statica, edificando la prima pietra della nostra chiesa con html senza form, indirizzo https://www.farwebdesign.com/noirsearch/1/ , in questo nuovo tutorial procediamo con la MOSSA N 2: ossia quello di rendere dinamica la pagina. Per farlo dobbiamo inserire appunto il TAG <form> in modo da racchiudere la parte di attributi che serviranno per trasferire i dati del modulo o su se stessa o su una pagina di atterraggio. Vediamo dunque la struttura della index.php:

<code>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Noir Search</title>
</head>
<body>




</div>

</body>
</html>
</code>

La pagina search.php che riceve i dati deve estrapolare e stampare a vide e avrà il seguente codice:

<code>
<?php

echo $_GET[“noirterm”];

?>
</code>

Se volessi compiere questa operazione ricorsiva sulla stessa pagina posso lasciare l’attributo action vuoto, in questo modo la pagina di elaborazione sarà completa:

<code>
<!DOCTYPE html>
<?php
echo $_GET[“noirterm”];
?>
<html>
<head>
<title>Welcome to Noir Search</title>
</head>
<body>




</div>

</body>
</html>
</code>

dove l’istruzione echo $_GET[“noirterm”]; non fa altro che stampare una variabile catturata e in transito sulla url della pagina tramite un noto array associativo che é $_GET; Con method=”GET” specifichiamo appunto la modalità di spedizione dei dati, in questo caso possono essere intercettati da tutti in maniera visibile, mentre con method=”POST” i valori viaggiano internamente in maniera nascosta ma comunque vengono recuperati. Ovviamente sia nel caso che io nell’ action scrivo il nome di una pagina che poi risulta inesistente o sia nel caso che non inserisca sulla pagina di atterraggio o di destinazione il codice php per estrapolare i dati di partenza, otterrò due errore diversi, nel primo caso semplicemente mi segnalerà un oggetto mancante (riferito alla pagina) e nel secondo mi darà un errore specifico di elaborazione, in quanto la pagina esiste ma non ha al suo interno il codice per estrapolare i dati con echo $_GET[“noirterm”]; a questo punto non ci resta che dedicarci alla stilizzazione della nostra pagina e lo possiamo fare tenendo conto di 4 situazioni diverse: la struttura della pagina, il bottone, la casella di testo e lo stile del testo nonché gli aggiustamenti che riguardano il logo vero e proprio, che ha bisogno di essere centrato rispetto alla fonte della nostra ispirazione che é google! Nella prossima lezione aggiusteremo proprio lo stile inserendo un file nuovo di nome style.css che andrà a rendere responsiva la pagina con la tecnologia FLEX, aggiustando il reset e tutti gli elementi presenti internamente, quindi font, casella di testo, bottone di invio dati o submit e logo. Per inciso il file esterno da integrare nella nostra pagina verrà agganciato tramite il codice:

<code>

<head>
<title>Welcome to Noir Search</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>

</code>

Gli sviluppatori come convenzione usano anche inserire la cartella css all’ interno di un’ altra cartella denominata assets che tradotto sta per risorse, qui di solito vanno i javascript e tutto quello che necessita come i fogli stile da integrare nelle nostre pagine. Per ora abbiamo ottenuto questo risultato: https://www.farwebdesign.com/noirsearch/2/

web design umbria

Annunci

Rispondi

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

Logo 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...