Questo sito web utilizza i cookie

Utilizziamo i cookie per personalizzare la tua esperienza utente e per studiare come viene utilizzato il nostro sito web.
Acconsenti ai nostri cookie se continui ad utilizzare questo sito web, se vuoi saperne di più clicca su più informazioni

Guide e tutorial pratici per joomla e le sue estensioni
Guide e tutorial pratici per joomla e le sue estensioni

Nei precedenti tutorial relativi a chronoconnectivity abbiamo visto come realizzare una piccola applicazione per la gestione di una semplice rubrica, oggi vedremo come aggiungere un filtro per la ricerca e una ricerca semplice.

Ricerca: filtrare dei dati con chronoconnectivity

La seguente guida è il proseguimento naturale di chronoconnectivity e chronoforms parte 1, chronoconnectivity e chronoforms parte 2, chronoconnectivity e chronoforms parte 3 e chronoconnectivity e chronoforms parte 4

Realizzeremo adesso un piccolo form dove verranno filtrati i dati di 2 campi, "Cognome" e "Città", questa funzione, ad esempio, ci aiuterà a ricercare tutte le persone che hanno lo stesso cognome e che vivono nella stessa città.

Potrete testare il form per la ricerca in questa pagina

Portiamoci in "Front list">>"Setting" box "Filters" ed inseriamo i nomi dei campi su cui desideriamo filtrare i dati, questi devono essere nel formato model.campo, quindi inseriamo

gestione.cognome
gestione.citta

Adesso in "Front list">>"List Display">>"Table">>"Header Code", inseriamo il codice necessario per generare un form in linea con 2 textbox ed un pulsante:

<input type="text" name="fltr[gestione][cognome]" />
<br />
<input type="text" name="fltr[gestione][citta]" />
<br />
<input type="submit" name="submit" value="cerca" />

Il codice andrà inserito fin dalla prima della toolbar.

Questo codice crea i due campi dove inserire i parametri ed un pulsante per avviare la ricerca, però purtroppo non è in linea. Testiamo se il filtro funziona e "abbelliamolo" con un pò di classi Bootstrap.

Utiliziamo le classi Bootstrap per realizzare un form orizzontale

Eliminate il codice appena inserito e sostituitelo con il seguente:

 
<div class="form-group" id="form-row-multi-2">
	<div class="gcore-subinput-container" id="fitem-citta">
		<div class="gcore-input gcore-sub-input gcore-display-table" id="fin-citta">
			<input name="fltr[gestione][citta]" id="citta" value="" placeholder="" class="form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /><span class="help-block">città</span></div>
	</div>
	<div class="gcore-subinput-container" id="fitem-cognome">
		<div class="gcore-input gcore-sub-input gcore-display-table" id="fin-cognome">
			<input name="fltr[gestione][cognome]" id="cognome" value="" placeholder="" class="form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /><span class="help-block">cognome</span></div>
	</div>
	<div class="gcore-subinput-container" id="fitem-cerca">
		<div class="gcore-input gcore-sub-input gcore-display-table" id="fin-cerca">
			<input name="cerca" id="cerca" type="submit" value="cerca" class="btn btn-info" style="" data-load-state="" />
		</div>
	</div>

	<div class="clearfix"></div>
</div>


Adesso abbiamo un form in linea dall'aspetto professionale!

Inserire un campo di ricerca semplice nella nostra applicazione realizzata con chronoconnectivity V5

In chronoconnectivity è possibile avere un campo di ricerca semplice, dove inserendo il nostro parametro, la ricerca ci mostrerà cosa avrà trovato nella nostra tabella che corrisponde al parametro.

Portiamoci in "Front list">>"Setting" box "Searchable", ed inseriamo (sempre nel formato model.campo) i campi dove vogliamo applicare la nostra ricerca semplice, quindi inseriamo:

gestione.nome:nome
gestione.cognome:cognome
gestione.citta:città
gestione.numero_cellulare: nr cellulare

Inseriamo poi in "Front list">>"List Display">>"Table">>"Header Code", subito dopo la chiusura dell'ultimo div del codice inserito sopra:

<input type="text" name="srch" placeholder="ricerca...." class="form-control A" />
<br>
<input type="submit" class="btn btn-info" name="submit" value="Cerca" /> 

Adesso nella nostra lista sarà presente una casella di ricerca libera, dove inserendo una parola o parte di essa, verranno restituiti i record contenenti quella parola. Attenzione, la ricerca sarà effettuata solo sui campi inseriti nel box "Searchable".

Lascio a voi la personalizzazione del secondo form, aggiungendo solo che se desideraste il pulsante per il reset della ricerca libera, questo sarà il codice da inserire

<a class="btn btn-warning" href="http://www.icagenda.it/connessione-rubrica.html?&srch=" role="button">Reset</a>

Spero che questa guida vi sia stata di aiuto, e se ritenete di potermi ringraziare offrendomi un caffè cliccate pure nel pulsante sottostante, oppure cliccate su uno dei banner pubblicitari.

offrimi un caffè

Commenti   

0 # Riccardo Fantoni 2016-07-21 14:45
Buongiorno,
grazie molte per le indicazioni chiare e precise.
Ho un richiesta: io non vorrei mostrare la lista prima di utilizzare il campo di ricerca. E' possibile? In quale maniera?
Una soluzione (ripiego) che funzionava con CC4: inserire un numero massimo di righe visualizzate (es:10) e lasciare le prime 10 righe della tabella vuote. Ma non saprei dove indicare il numero massimo di righe in CC5.
Grazie molte per l'attenzione e per l'eventuale risposta.
Rispondi | Rispondi con citazione | Citazione
0 # giusebos 2016-07-21 14:59
Molto più corretto copiare la connessione ed eliminare i campi visualizzabili
Rispondi | Rispondi con citazione | Citazione
0 # Francesco Cartei 2016-08-31 15:44
Salve,
è possibile filtrare i risultati per utente?
Ad esempio: se si logga il signor Rossi, vedrà solamente i suoi inserimenti e non quelli del signor Verdi.
Grazie anticipatamente :)
Rispondi | Rispondi con citazione | Citazione
0 # giusebos 2016-08-31 16:38
solo se chi inserisce è registrato/loggato e la struttura e stata creata in modo da registrare user_id.
Rispondi | Rispondi con citazione | Citazione
0 # Tonino_t 2016-09-17 19:10
come posso reindizzare il campo reset alla lista della mia tabella? lavoro da backend su adminlist
Rispondi | Rispondi con citazione | Citazione
0 # giusebos 2016-09-17 19:24
Citazione Tonino_t:
come posso reindizzare il campo reset alla lista della mia tabella? lavoro da backend su adminlist

Scusa che intendi, il campo reset si aggiunge come indicato alla fine della guida
Rispondi | Rispondi con citazione | Citazione

Aggiungi commento

Attenzione, per risposte ai commenti non cliccare su reply nella email che riceverete perchè nessuno la leggerà. per continuare a commentare usate solo il form sottostante.


Codice di sicurezza
Aggiorna