SCRIPTS - dbSearch - Database in JS con dati in CSV

<-- Indietro

Come utilizzare lo script di ricerca

1) si basa su un file di testo formattato cme un file CSV con i campi separati da puntoevirgola. La prima riga devono essere le intestazioni (senza usare caratteri strani e/o spazi):

	nome;cognome;citta
	Max;Kiusso;Mira
	Aaa;Bbb;Test

Il sistema è dinamico, nel senso che decidi tu quanti e quali sono i campi che vuoi usare, esempio:

	nome;cognome;indirizzo;citta;provincia

oppure

	nome;cognome;indirizzo;citta;telefono;cellulare;email

(nota che l'ultimo campo non ha il ; )
devi stare attento che le righe di dati abbiano gli stessi "spazi", ovvero se manca un parametro metti comunque il puntoevirgola:

	mario;rossi;;milano;

in questo caso non hai ne indirizzo ne provincia

2) il file di testo da importare va messo nel server e lo configuri aprendo il file database.js dentro la directory js:

	FILE : "./database.txt",

dove metti il percorso e il nome del file CSV che vuoi usare.

3) la ricerca degli elementi avviene nella modalità che preferisci, ovvero puoi inserire tutti i campi che vuoi nel form:

<form id='ricerca'>
Nome <input type='text' name='nome'>
Cognome <input type='text' name='cognome'>
<input type='button' value='Cerca' onclick="myFunc.Widget.Database.ricerca('ricerca', 'risultato')">
</form>

il name= di ogni campo che inserisci deve corrispondere esattamente al nome che hai usato nella intestazione del file che importi, quindi se prendiamo l'esempio:

	nome;cognome;indirizzo;citta;telefono;cellulare;email

e vuoi ricercare per numero di cellulare, il campo del form sarà:

	<input type='text' name='cellulare'>

per quello ti dicevo che devono essere senza cartteri strani e/o spazi.

Il risultato della ricerca viene stampato in una tabella che hai preventivamente creato e che contiene solo le intestazioni:

	<table cellspacing=10 cellpadding=0 id='risultato'>
	<tr>
	<th>Nome</th>
	<th>Cognome</th>
	<th>Città</th>
	</tr>
	</table>

Le intestazioni della tabella () devono corrispondere ai campi del database, ma puoi metterci il nome che vuoi.

4) La ricerca avviene premendo il pulsante "Cerca" che contiene un evento onclick che richiama lo script:

	onclick="myFunc.Widget.Database.ricerca('id_del_form', 'id_della_tabella_risultato')"

dove dovrai sostituire le parti in grasseto con gli ID reali che hai usato per il form e la tabella.

Configurazioni e utilizzo della versione 1.2

1) Modalità classica "table"

Come potrete vedere dal file HTML incluso nel file ZIP che scaricherete, sono cambiate un po' di cose nella configurazione, restando comunque molto semplici da capire ed implementare. In primis è cambiata la modalità di richiamo della funzione di ricerca:

	myFunc.Widget.Database.ricerca({
		  formid:'if form ricerca'
		, resultid:'id oggetto stampa risultato'
		, headers:vedi sotto, tbAttr:vedi sotto
		, typeDat:'modalità risultato'
	})

Come è facile intuire, nelle parti in grassetto vanno inseriti dei parametri personali che servono al programma di estrazione dei dati per sapere come deve comportarsi. In dettaglio i singoli elementi:

- formid => va inserito l'id del form (racchiuso tra apici) che utilizziamo per la ricerca. Ogni elemento che inseriamo nel form di ricerca deve avere un name impostato altrimenti non viene preso in considerazione ai fini della ricerca

- resultid => va inserito l'id dell'oggetto (racchiuso tra apici) in cui verrà stampato il risultato. Nell'esempio lo spazio dedicato al risultato è un DIV

- typeDat => va inserito il tipo di estrazione (racchiuso tra apici) che vogliamo ottenere. Nella modalità classica va lasciato table

- headers => va inserito il nome (senza apici) del nostro oggetto che contiene le instestazioni. Per maggiori dettagli guardate più sotto.

- tbAttr => va inserito il nome (senza apici) del nostro oggetto che contiene i parametri per la tabella. Per maggiori dettagli guardate più sotto.

Headers

Come potrete vedere facilmente dal file HTML di esempio, ci sono dei parametri di configurazione che vengono inseriti nell'head della nostra pagina HTML. La parte riguardante le intestazioni della tabella è:

    // intestazioni e campi della tabella
    var intestazione = {
          nome           : { label:"Nome",       thClass:"test", tdClass:"test" }
        , cognome        : { label:"Cognome",    thClass:"test", tdClass:"test" }
        , eta            : { label:"Età", thClass:"test", tdClass:"test1" }
    };

Il nome dell'oggetto var intestazione è un nome generico e potete usare quello che volete. Una volta deciso il nome, il nostro parametro iniziale sarà headers:intestazione o al posto di intestazione il nome che avrete scelto voi.
L'oggetto è composto da ulteriori oggetti che contengono i parametri necessari alla configurazione completa:

	nome_campo : {
		  label:"Etichetta"
		, thClass:"classe per il TH"
		, tdClass:"classe per il TD"
	}

Ogni elemento può essere impostato oppure lasciato vuoto, esempio non vogliamo inserire nessuna classe TH e TD, il tutto diventerà:

	nome_campo : { label:"Etichetta", thClass:"", tdClass:"" }

- nome_campo => il nome del campo (in database)
- label => quello che viene visualizzato nel titolo della colonna (TH)

Ogni campo inserito in questo oggetto verrà stampato a video, quelli non impostati (anche se presenti in database) non verranno stampati.

tbAttr

Come per gli headers anche per la tabella è possibile impostare degli attributi:

    var attributiTabella = {
          cellspacing    : 0
        , cellpadding    : 0
    };

La sintassi è molto semplice nome_attributo : valore_attributo. Per i numeri non servono gli apici, mentre se dovete usare del testo è obbligatorio usare gli apici!

2) Modalità "fields"

Il funzionamento di questa modalità è simile a quella tabellare, cambia il modo in cui vengono stampati i risultati.
La modalità di richiamo è:

	myFunc.Widget.Database.ricerca({
		  formid:'ricerca'
		, resultid:'risultato'
		, typeDat:'fields'
	})

Come potete notare mancano i parametri di configurazione poichè non sono necessari in quanto il form che conterrà il risultato deve essere già esistente:

	<div id='risultato'>
	    <form>
	        Nome <input type='text' name='nome'>
	        Cognome <input type='text' name='cognome'>
	        Età <input type='text' name='eta'>
	    </form>
	</div>

I parametri formid e resultid funzionano come per la modalità "table", varia solo che il form risultato deve trovarsi all'interno dell'oggetto impostato in resultid.
I name dei vari campi devono essere gli stessi nomi usati per i rispettivi campi nel database.

I campi dei form attualmente supportati nel risultato sono: INPUT TEXT, TEXTAREA e SELECT. Gli altri campi INPUT mancanti, ovvero RADIO e CHECKBOX verranno implementati nella prossima release.

3) Modalità "object"

Questa modalità è riservata a chi ha esperienza in JS e vuole usare i risultato della ricerca per i propri scopi.
Questa modalità viene richiamata:

	myFunc.Widget.Database.ricerca({
		  formid:'ricerca'
		, typeDat:'object'
	})

dove è necessario solo impostare l'id del form di ricerca.

Oltre alle configurazioni illustrato sepra, esiste un'altra configurazione che riguarda gli errori e che può essere personalizzata con i testi che volete:

    // errori di sistema
    var error = {
          nofound       : "Nessun record trovato"
        , config        : "Attenzione!\n\nParametri di configurazione non corretti"
        , connect       : "Errore di connessione numero"
    }

Ricordatevi di non modificare le label dell'oggetto (nofound, config, connect).

Se avete difficoltà ad utilizzare questo script, potete sempre cercare aiuto nel nostro forum all'indirizzo http://www.ilmioforum.com, sezione JavaScript.
Sarò lieto di rispondere ai vostri quesiti.


Versioni rilasciate

• 2008.02.08 - v1.2
  - ricostruita la logica di stampa dei risultati
  - aggiunta personalizzazione della tabella dei risultati
  - aggiunta la possibilità di scelta di layout:
  1) table => tabella classica
  2) fields => riempimento di un form preimpostato
  3) object => ritorna un oggetto con il risultato
  - aggiunta la possibilità di usare tutti gli elementi di un form: INPUT, TEXTAREA, SELECT, RADIO, CHECKBOX in ricerca
  - lasciato libero l'ordinamento dei risultati e quali estrarre
  
• 2007.10.25 - v1.1
  - inserita modalità di ricerca avviene con la logica AND
  - migliorato l'inserimento dei record in tabella che in alcuni browser tagliava l'intestazione
  
• 2007.10.20 - v1.0
  Prima release dello script

<-- Indietro