Le basi. Creare un elenco

Transcript

1 Le basi Creare un elenco Fabrik Tables New dare un titolo (che apparirà) alla tabella su label in Intoduction sarà visualizzato un testo che apparirà sopra la tabella nella scheda Publishing: Published: Yes nella scheda Access definire gli accessi Scheda Dati. Su Connection selezioniamo la connessione del database che vogliamo usare Create a new table. Dare un nome (senza spazi) alla tabella Save Nel momento in cui creiamo una tabella, Fabrik ha creato automaticamente un form (che possiamo vedere nell elenco dei forms) e un gruppo (che vediamo nell elenco dei gruppi) nell elenco degli elementi troviamo due elementi creati automaticamente. Quando gli elementi saranno tanti, possiamo filtrarli selezionando il gruppo che ci interessa Aggiungere alcuni elementi al nuovo form Fabrik Elements New Name è un nome da dare senza spazi label è il nome dell elemento che potrà essere letto da tutti in Hover text è possibile dare un suggerimento che apparirà in popup scegliere il tipo di elemento (per esempio field) Published: Yes Show in table: Yes se vogliamo aggiungere una validation allora andiamo su Validations; Aggiungi; selezionare il tipo di validazione Scrivere il messaggio di errore in caso di mancanza di riempimento del campo Save possiamo creare nuovi elementi cliccando su New diamo un nome e un label; scegliamo il tipo di elemento (per esempio text area) - possiamo definire l altezza dell elemento e indicare un numero massimo di caratteri per l elemento Text area in Show max limit Published: Yes Show in table: Yes eventualmente definire una Validation e quindi un messaggio in caso di mancato riempimento Save nel caso di file upload definiamo la dimensione massima dell allegato; definire i tipi di estensione permessi; in Upload directory inserire un indirizzo in cui vogliamo siano salvati i files caricati (per esempio: images/stories/); in Allow sub folder selection: Hide in modo da evitare all utente di scegliere il file da caricare da un menu a cascata; Link to file: Yes in modo da permettere agli utenti di cliccare su una ventuale foto caricata e vederla a dimensione intera; Incremental file uploads: Yes Show media in table: Yes in modo da vedere il file caricato anche all interno della tabella oltre che sul form impostiamo altezza e larghezza (per esempio 800 e 800) del file da mostrare; su Thumbnail mettiamo Yes; specifichiamo la directory Save Test Tables View data della tabella creata per aggiungere alcuni dati (da backend) cliccare su Add (dopo aver cliccato sul nome della tabella) inseriamo i dati e carichiamo anche un file Save (i dati inseriti) vediamo i records inseriti nella tabella Form Fabrik form cliccare sul nome del form che vogliamo modificare Introduction è un testo che appare in alto prima del form Error message è un messaggio di errore che appare in caso di mancato riempimento di in campo (è un messaggio che appare oltre il messaggio dell errore specifico impostato in Validation per il campo mancante. Un esempio potrebbe essere: Alcune parti del form che hai compilato non sono complete) nella scheda Groups possiamo definire quali gruppi avranno accesso al form su Options possiamo usare Usa opzioni globali su Template usiamo label above su Submission plugin possiamo

2 inviare una mail, scrivere un messaggio di ringraziamento, reindirizzare a un altra pagina. Se selezioniamo redirect possiamo scrivere un messaggio di ringraziamento per il form riempito oppure indicare la URL di una pagina. Dobbiamo specificare anche dove vogliamo far apparire il messaggio (se su front end, back end o su entrambi) e anche se vogliamo farlo apparire soltanto per la creazione di un nuovo form, per la sua modifica o per entrambi i casi Save Il front end Menus User menu New selezionare Fabrik Form come tipo di menu dare un titolo al menu diamo un livello di accesso per il menu su Parameters selezioniamo il nome del form che vogliamo collegare al menu Save per dare un menu alla tabella andiamo su menus New Fabrik Table dare un titolo e stabilire i livelli di accesso Save su Preview vediamo i menus per evitare di mostrare su front end i link di importazione ed esportazione delle tabelle csv andiamo dentro la tabella (da back end per modificarla) CSV options: selezioniamo Super Administrator se clicchiamo su Preview possiamo vedere i cambiamenti fatti Tidying up Fabrik Table Elements qui possiamo nascondere I campi che non vogliamo far vedere sulla tabella nel front end per togliere i link che appaiono in genere alla destra di una tabella andiamo su Link to details (dentro Table settings) e mettiamo Yes (in questo modo gli elementi di una colonna della tabella diventeranno un link su cui è possibile cliccare) save Digging deeper Unire alcuni dati Creare una nuova tabella (chiamata Tutorial Categories) con un elemento field per inserire la categoria in Elements filtriamo gli elementi della nuova tabella (Tutorial Categories) nascondiamo quelli che non vogliamo fare apparire torniamo sulla prima tabella (Tutorials) in modo da aggiungere un nuovo elemento che unisca il contenuto di una colonna alle categorie quindi clicchiamo su New diamo come nome e label: category tipo elemento: database join costruiamo un elenco di menu a cascata che mostri i nomi delle categorie. Quindi andiamo su Render join as: Dropdownlist Join type: Simple Connection: site database Table: selezioniamo il nome dell ultima tabella che abbiamo creato (Tutorial Categories) label: selezioniamo Category. Category è uno dei due elementi che abbiamo creato dentro la tabella selezionata. Quindi Fabrik carica gli elementi della tabella che selezioniamo (Tutorial categories) in modo da poterne selezionare uno Published: yes Show in table: yes se vogliamo essere sicuri che una nuova categoria sia selezionata dall interno del menu a cascata, allora andiamo su: Value of please select option: digitiamo 0 Validations Add selezioniamo: Is not nel campo Is not che appare digitiamo 0 in modo che l utente che seleziona un valore dal menu a cascata, non selezioni 0 Save Aggiungiamo un paio di categorie alla nostra tabella (Tutorial categories), quindi clicchiamo su Tables cerchiamo la tabella (Tutorial categories)

3 e clicchiamo su View data clicchiamo su Add per aggiungere alcuni nomi di categorie; quindi digitiamo i nomi e clicchiamo su Save per ogni nuova categoria creata il prossimo passo è modificare la tabella precedente (Tutorials) così andiamo su Tables; View data della relativa tabella (Tutorials) dobbiamo aggiungere delle categorie così clicchiamo sul nome e selezioniamo il nome di una categoria dal menu a cascata con le categorie che abbiamo inserito prima Save abbiniamo una categoria per ciascuno dei record presenti nella tabella vogliamo che questa colonna (Category) appaia a sinistra della tabella. Per fare questo cambiamo l ordine; quindi clicchiamo le freccette della colonna Order per cambiare l ordine delle colonne oppure cambiamo l ordine digitando il numero ordinale della colonna in cui vogliamo che appaia salviamo l ordine cliccando sul floppy disk. Impostiamo il nuovo elemento Category in alto in modo da farlo apparire come un filtro di una tabella. Quindi selezioniamo l elemento Category; all interno di Table settings su Filter type selezioniamo Field in modo da renderlo come un menu dropdown Save. Raggruppamento di tabelle Come raggruppare e ordinare i dati in una tabella. In precedenza abbiamo abbinato una categoria per ogni tutorial in modo da poter raggruppare i nostri tutorials dentro le categorie. Poiché vogliamo raggruppare i nostri dati per categoria, allora andiamo sulla scheda Data in Order by (all interno di Data) e selezioniamo: Categoria Group by: Category Poiché vogliamo ordinare per nome di tutorial all interno di ogni raggruppamento per categoria, allora andiamo su Order by (all interno di Group by) e selezioniamo Tutorial name Save se controlliamo il front end vediamo i vari records ordinati per categoria e all interno di ciascuna categoria ordinati per nome di tutorial se non vogliamo la paginazione (quindi vogliamo tutti i tutorials in una sola pagina perché non ci sono molti tutorial da mostrare), allora andiamo sulla Tabella tutorials Show navigation: no andiamo su Rows per page e lasciamo in bianco o impostiamo a 0. In questo modo una pagina mostrerà tutte le righe per vedere ciò che è cambiato nel front end forse conviene uscire dal browser e rientrare anziché aggiornare semplicemente la pagina Per avere un titolo all inizio di ogni raggruppamento, allora andiamo su Data; Template (all interno di Group by) scriviamo il nome della categoria nel nostro titolo usando: {tablename elementname} nel nostro caso questo diventerebbe scrivendolo all interno di Template: Category: {fab_tutorials category} ci sono 3 _ tra i 2 se vediamo il front end vediamo che abbiamo un titolo che corrisponde al nome della categoria per ogni raggruppamento ora che abbiamo il titolo della categoria, possiamo togliere la visualizzazione della colonna categoria. Quindi andiamo sull elenco degli Elementi e relativamente a Category togliamo show in table Per lasciare un po più di spazio tra una categoria e l altra e rendere il titolo della categoria un po più grande: clicchiamo sul nome della tabella (all interno dell elenco delle tabelle) per modificarla su Template digitiamo: <br /><h2>category: {fab_tutorials category} </h2> - aggiorniamo la pagina e vediamo i cambiamenti nel front end Per togliere il pulsante Go sotto il filtro (e quindi filtrare la tabella senza il pulsante, ma al solo slezionare della categoria scelta che si vuole vedere) entriamo all interno della tabella e clicchiamo su Filter Trigger: selezioniamo on change Apply se vediamo il front end vediamo i cambiamenti Gruppi di ripetizione Parleremo di come aggiungere dati che si ripetono. In Fabrik non è possibile aggiungere elementi che si ripetono a meno che non si trovino dentro gruppi diversi. Possono esistere gruppi che si ripetono.

4 Groups New Dare un nome Repeat group button: show Save ora che abbiamo creato un gruppo mettiamo un leemento in esso. Quindi andiamo in Elements New dare un nome, un label e selezionare il tpo di elemento. Selezioniamo Link come tipo di elemento scrivere 50 su Options in Width selezionare Yes su Smart Link se vogliamo collegare dei video o musica Published: Yes Save ora che abbiamo creato un gruppo che si ripete e abbiamo aggiunto un elemento in esso, dobbiamo inserire il gruppo nel nostro form. Quindi andiamo su Forms entriamo nel nostro form nella scheda Groups selezioniamo il gruppo che abbiamo creato Add ora possiamo spostare in alto o in basso in modo da avere l ordine che vogliamo dei gruppi che abbiamo inserito nel form Save Testiamo ciò che abbiamo fatto. Iniziamo a scegliere una riga dalla tabella e aggiungiamo alcune righe a essa. Quindi clicchiamo su Tables View data della tabella interessata apriamo il gruppo che abbiamo creato possiamo specificare un label (è il nome su cui clicchiamo che apre il collegamento) e un indirizzo URL (nello scrivere la URL possiamo anche non specificare perché Fabrik lo aggiungerà automaticamente qualora manca possiamo aggiungere un nuovo gruppo cliccando su Add group scriviamo un nuovo label e URL e impostiamo il Gruppo di accesso (per esempio a Registered) Save (in basso) I gruppi ripetuti non creano nessun tipo di riga multipla. Ogni entrata di elemento è memorizzato nello stesso campo nella stessa riga Filtro delle tabelle Il tipo di elemento Access ci permette di applicare i permessi dei gruppi di accesso ai nostri contenuti. Nella scheda Publishing possiamo selezionare i gruppi cui permettiamo l accesso in sola lettura e in lettura e scrttura (accesso pieno). Save dopo aver creato l elemento di accesso, ora vogliamo creare un filtro alla tabella. Quindi andiamo su Tables Dati in relazione Creiamo 2 tabelle: scuole e studenti. Ogni studente appartiene a una scuola. Le tabelle delle scuole avranno un link che permette alle scuole di vedere gli studenti che frequentano la propria scuola Creiamo la tabella scuola. Andiamo su Tables New diamo un nome alla tabella sulla scheda Data selezioniamo il database su Connection e diamo un nome alla tabella su Create new table Save creiamo un elemento; quindi andiamo su Elements New diamo un nome e un label lo assegniamo al gruppo scuole Save creiamo la nuova tabella Studenti; quindi andiamo su Tables New Published: Yes nella scheda dati selezioniamo un database su Connection e diamo un nome alla tabella su Create new table Save ora creiamo un elemento; Elements New assegniamo un gruppo all elemento creato. Assegniamo in questo caso il gruppo Studenti selezioniamo il tipo di elemento: database join che è necessario per il nostro scopo Render join as: drop down list su Table selezioniamo la tabella della scuola (che è la tabella che vogliamo collegare) il prossimo passo è aggiungere alcuni dati alla tabella scuola e a quella studenti Entriamo dentro la tabella scuola nella scheda dati abbiamo la parte Related data con alcune opzioni. Queste opzioni possono essere viste perché abbiamo creato un elemento join database dentro la tabella studenti (che punta alla tabella scuola) Link to table: Yes nel campo label possiamo specificare l intestazione della colonna per il collegamento dei dati relazionati Link to form: Yes. Questo aggiungerà una colonna alla tabella che permette agli utenti di inserire records di studenti alla scuola su label scrivere l intestazione della colonna aggiunta (per esempio Aggiungi studenti) Save ora se vediamo la tabella scuola vediamo due links: Vedi studenti e Aggiungi studenti. Vedi studenti riporta una vista filtrata degli studenti della scuola corrente. Aggiungi studenti aprirà il form Aggiungi studente con un elemento database join che collega al database della scuola corrente.

5 User ajax Creiamo due tabelle: la prima contenente l elemento display text. Quello che vogliamo è che ogni volta che cambiamo le informazioni extra contenute nella prima tabella, il contenuto della seconda tabella si aggiorni. Quindi andiamo su Table New Edit Published: yes nella scheda Access definiamo i livelli di accesso nella scheda Dati selezioniamo la connessione del database e il nome della tabella Save Elements New Relazioni One to many Creiamo due tabelle: classi e studenti Tables New diamo un label Published: yes definiamo i livelli di accesso diamo u nome alla tabella del database in Data Save seguendo la stessa procedura creiamo la seconda tabella aggiungiamo degli elementi. Alla tabella classi aggiungiamo l elemento label all interno del gruppo Classi come elemento field volendo possiamo definire l ampiezza, ma dobbiamo sicuramente selezionare Yes in Show in table Save ora creiamo un join element alla tabella classe selezioniamo la tabella Classi selezioniamo label nel menu a cascata label Show in table: yes l elemento database join memorizza i riferimenti da registrare in altre tabelle (quindi è bene distinguere i nomi di qualsiasi database join per esempio con: _id) creiamo quindi un elemento di tipo database join che chiamiamo class_id e lo mettiamo dentro il gruppo studenti Render joinas: drop down list - selezioniamo la tabella Classi selezioniamo label dal menu a cascata label Show in table: yes Save Ora aggiungiamo qualche dato alle due tabelle. Andiamo su Tables View data Add inseriamo alcuni dati in label e selezioniamo la relativa class e salviamo per ogni dato inserito Ora vogliamo unire la tabella classi e studenti insieme in modo che possiamo aggiungere classi e studenti dallo stesso form. Modifichiamo quindi la tabella classe andando su Tables entriamo dentro la tabella Classi selezioniamo la scheda Data all interno della sezione Join clicchiamo Add selezioniamo Left join in Join type nel menu a cascata from poiché non abbiamo creato un join, allora selezioniamo la tabella del database principale, quindi selezioniamo la tabella classe nel menu a cascata To selezioniamo la tabella studenti poiché noi vogliamo unire dalla tabella classi alla tabella studenti la From column contiene un elenco degli elementi trovati nella tabella selezionata in From. Quasi sempre all interno di From column selezioniamo Fabrik internal id in To column selezioniamo lo stesso elemento che si trova in ciò che abbiamo selzionato in From column. Nel nostro caso selezioniamo class_id dentro To column Save come possiamo vedere se andiamo su Groups vediamo che il creare un join ha creato automaticamente un nuovo gruppo con il suo set di elementi come vediamo in Elements se volessimo modificare l elemento classi d dovremmo cliccare sul link blu che appare nella pagina seguente al clic sull elemento. Una volta che lo abbiamo scollegato possiamo modificare l elemento come normale. Ogni cosa cambiata qui non sarà cambiata in automatico anche negli elementi genitori - ora diamo uno sguardo alla tabella della classe. Quindi andiamo su Tables View data se vogliamo vedere come sembra il form allora clicchiamo sul numero id per il momento possiamo soltanto impostare che uno studente appartenga a una classe. Così modifichiamo il suo gruppo e aggiustiamolo. Quindi andiamo su Groups apriamo il gruppo interessato Repeat group button: Show Save Tables View data da qui possiamo inserire un pulsante per aggiungere gruppi. Poiché l gruppo è stato creato attraverso la tabella join ogni gruppo ripetuto sarà memorizzato nella tabella degli studenti. Se il gruppo non fosse creato attraverso una join allora registrerebbe ogni dato dei gruppi ripetuti nella stessa colonna (in una colonna soltanto) ogni volta che aggiungiamo uno studente nel form, non vogliamo selezionare anche la classe perché è implicita nella modifica. Quindi aggiustiamo questo. Entriamo dentro l elemento class_id se scolleghiamo l elemento class_id modidifichiamo soltanto l elemento senza toccare

6 gli elementi genitori. Quindi scolleghiamo l elemento. Possiamo impostare questo elemento in modo da farlo diventare un campo oppure in modo da nasconderlo. Noi lo nascondiamo. Quindi flagghiamo Hidden Save Tables View front end clicchiamo sul numero dell id come ci aspettavamo vediamo ce l elemento della classe è nascosto. Vediamo che gli gli studenti che aggiungiamo vengo indirizzati alla stessa classe Siccome ci sono un sacco di dati duplicati, allora useremo il raggruppamento. Il raggruppamento divide la tabella in gruppi di tabelle, raggruppati per un valore dato. Quindi andiamo su Tables entriamo nella tabella selezioniamo la scheda Data e in group by selezioniamo class_id per elencare gli studenti in ordine alfabetico all interno di ogni classe selezioniamo il campo nome all interno di Order by ciò che scriviamo all interno del campo Template apparirà sopra ogni raggruppamento di dati. Noi scriviamo il placeholder: {tablename elementname} Save diamo un occhiata ai dati. Quindi andiamo su Tables View data per rimuovere dalla vista della tabella la colonna ID, entriamo dentro l eelmento clas id e lo rimuoviamo dall elenco lo scolleghiamo per modificare e all interno di Table settings; Link to details: yes Save selezioniamo il gruppo Classi e tutti gli elementi contenuti al suo interno Remove from tables view vediamo i risultati: Tables View data Per riuscire a mostrare tutti i records all interno del raggruppamento, andiamo su Layout e in Template: selezioniamo default_grouped salviamo la tabella creiamo un articolo di menu. Menu Menu principale New in tipo di menu selezioniamo Fabrik; Table diamo un titolo al link su Parameters Basic selezioniamo la tabella Classi Save. Relazioni many to many Creiamo due tabelle: bnds e venues. Creiamo anche una tabella linkabile che mostra tutte bands che suonano in quali venues. Possono esserci una band che suona in più venues e una venues che mostra più bande. Questo è il motivo per il quale questa relazione è chiamata Many to many. Creiamo le tabelle. Quindi diamo un label, definiamo i livelli di accesso, il nome della Connection e della tabella, Published: yes creiamo gli elementi alle due tabelle Creiamo un campo di tipo field per memorizzare i nomi delle bande definiamo l ampiezza e Show in the table: yes aggiungiamo un elemento field anche per il nome delle venues Aggiungiamo alcuni record sia nella tabella bande che venues. Quindi Tables View data Add inseriamo i nomi Save ora aggiungiamo una tabella linkabile che mostrerà quali bande suonano in quali venues. Quindi Table New diamo un label, definiamo i livelli di accesso e tutto il resto Save aggiungiamo due elementi database join alla tabella venues_bands. Questi creeranno dei link alle tabelle bands e venues. Quindi: Elements New tipo di elemento: database join Render join as: drop down list label: name aggiungiamo delle relazioni tra le due tabelle andando su Tables View data e aggiungiamo dei dati Creeremo una tabella join dalla tabella venues alla tabella bands. Quando questo accade un nuovo gruppo è creato che contiene una copia degli elementi venue_band ed è assegnato alla tabella / form venues. Per fare questo entriamo dentro la tabella venues - selezioniamo la scheda Data e all interno di Joins premiamo il pulsante Add from: Venues To: venues_bands from column: fabrik internal id To column: venue id Save Table- View data entriamo nel gruppo venue bands Repeat group button: Show Save Tables View data in seguito all ultima variazione dei repeat group button, ora nel front end appariranno i pulsanti Add e Remove che aggiungono ed eliminano i gruppi; quando creiamo un gruppo creiamo anche gli elementi ad esso associati; quando eliminiamo un gruppo eliminiamo anche gli elementi ad esso associati non è bello avere i campi venues ripetuti ogni volta così li nascondiamo. Ora il form sembra più pulito con i campi venues nascosti ora duplichiamo alcuni dati di cui non abbiamo bisogno e accendiamo i gruppi venues entriamo nel gruppo venue e in Group by selezioniamo id Possiamo vedere che con la caratteristica Group by accesa, il front end mostra ciascuna categoria dentro la propria tabella Ora selezioniamo il templatate groupedby e le cose cominceranno a sembrare un po più pulite.

7 Creazione di un form di ricerca Creiamo un nuovo form Forms New Copiamo alcuni elementi della tabella dentro il nuovo form di ricerca selezioniamo alcuni elementi dal gruppo tasks (che deriva dalla tabella tasks precedentemente creata) quindi selezioniamo gli elementi che vogliamo copiare Copy ora entriamo dentro la copia dell elemento e lo modifichiamo lo assegniamo al form di ricerca, quindi selezioniamo Group: form di ricerca Apply Rinominiamo il label del form di ricerca. Deve avere lo stesso label della tabella task altrimenti i valori inseriti nel form di ricerca non saranno filtrati creiamo un menu per il nostro form di ricerca ora vogliamo che il form di ricerca ridirezioni alla tabella task e imposti i suoi dati per essere usati per prefiltare i dati della tabella task Fabrik form form di ricerca Submission plug-ins Add selezioniamo redirect dobiamo inserire la url della tabella nella pagina da reindirizzare. Il modo più sicuro per fare questo è copiare la url dal sito vero (andiamo sul nostro sito e clicchiamo sulla voce di menu che porta alla tabella cui vogliamo reindirizzare (quindi copiamo la url che appare nella barra degli indirizzi oppure tasto destro: Copia l indirizzo del link) a fianco a redirect possiamo selezionare frontend e new Use as search data: yes Save mysql View come fonte di dati per l unione di database Components Banners Category usiamo phpmyadmin per creare una query SQL che costruisca la nostra view structure dalla colonna table selezioniamo quella che vogliamo e clicchiamo su Browse User Profile Creare un profilo Come costruire un profilo utente cioè una tabella in cui qualsiasi utente ha soltanto un form associato con il suo user id quando si è loggato. Components Fabrik Tables New accesso agli utenti registrati e riempire le altre parti e salvare Elementi filtriamo gli elementi del gruppo New per creare un nuovo elemento. Ne creiamo un paio ora creiamo un elemento nascosto user che registrerà automaticamente l user ID dell utente, così sappiamo quale riga appartiene a chi. Quindi: New diamo come nome per esempio userid e come label User tipo elemento: user flagghiamo hidden Published: yes Update on edit: no aggiungiamolo al menu. Tipo menu: Fabrik form. Diamo un titolo al menu e selezioniamo il livello di accesso: registrato in Parameters in Row id digitiamo: -1 key name: dare il lo stesso identico nome dato all elemento user (il nome non il label) Save cliccando su Preview possiamo vedere il nostro nuovo form Per sapere quale riga appartiene a quale utente andiamo sull elemento user e modifichiamo User data. Selezioniamo name invece di ID Show in table: yes Save se andiamo su Tables e View front end della tabella user vedremo che al posto dell ID numerico ci sarà il nome Map element Aggiungeremo l elemento mappa al nostro profilo. L elemento map usa Google maps API per inserire una mappa dinamica e permettere la postazione del pin sulla mappa. Iniziamo ad aggiungere l elemento. Elements New diamo come nome per esempio: dove ti trovi (o anche dove sei) - tipo elemento: Google map l elemento Google map si può scaricare dalla sezione plugins Google map key: per conoscere cosa scrivere dobbiamo avere un login su Google e dobbiamo incollare la URL del nostro sito all interno

8 dell apposito spazio e cliccare Generate API key per conoscere il codice da scrivere in Google map key Map type: Normal Control: Small zoom control da scale control sino a use static map selezionare tutti Yes per mostrare la mappa nella tabella Use static map: yes all interno della sezione Table settings larghezza e altezza: 75 - Published: yes Show in table: yes Save Visualizzazione della mappa Una visualizzazione è un modo per visualizzare un insieme di dati da una tabella. Quindi creeeremo una mappa che raccoglie tutti i punti in cui si trovano tutti gli utenti. Visualizzazioni New diamo un nome (label) e selezioniamo Google map come plugin Tabella: selezioniamo la nostra tabella profilo Google map key: inserire lo stesso cosice usato prima Center map on: Last marker da scale control sino a overview control tutti yes la sezione Clustering ha il compito di visualizzare localizzazioni multiple in un singolo pin icon: use default Save aggiungiamo un articolo di menu per la visualizzazione. Tipo di menu: Fabrik - Visualizzazione dare un titolo e definire il livello di accesso In Parameter e precisamente tipo di visualizzazione: selezionare google map Select instance: Locations Save Controllo di accesso Come permettere agli utenti registrati di modificare soltanto il proprio profilo e non anche quello degli altri utenti registrati. Entriamo nella tabella Profile nella scheda Access impostiamo Edit Records e selezioniamo Administrator in modo da permettere la modifica soltanto agli amministratori ma vogliamo anche che gli utenti siano in grado di modificare il proprio profilo. Facciamo questo impostando Or use field. Selezioniamo l elemento user che abbiamo creato. In questo modo gli amministratori saranno in grado di modificare tutti i profili, invece gli utenti registrati saranno in grado di modificare soltanto i propri records - Save Tabelle esistenti Prima di vedere come creare un doppio menu a cascata (come per stati e città per esempio), dobbiamo creare il contenuto dei due menu a cascata. Se importiamo le tabelle da un database esterno, allora usiamo navicat 8 oppure phpmyadmin. Una volta importata la tabella sul proprio database, andiamo su Tables New diamo un label e all interno della scheda Data in Link to table, selezioniamo la tabella che abbiamo importato Apply in Order by scegliamo in base a cosa vogliamo ordinare Save New. Ora introduciamo la tabella delle città in fabrik diamo un label (per esempio Città), nella scheda Data selezioniamo la tabella che vogliamo collegare Apply se andiamo su Elements vediamo che è stato creato un gruppo e un form con lo stesso label della tabella importata. Vediamo anche che per ogni colonna della tabella importata è stato creato il relativo elemento Cascading Dropdowns Nella precedente lezione abbiamo creato due tabelle (per città e stati). Ora possiamo aggiungere due nuovi dropdowns al nostro form Profilo. Come al solito all interno di Elements filtriamo il gruppo cui vogliamo aggiungere l elemento New stiamo creando l elemento dal cui click cambia il contenuto del secondo menu a cascata. Nel nostro caso diamo il label Stati tipo elemento: database join selezioniamo la tabella key: selezioniamo la chiave

9 (colonna) condivisa tra le due tabelle (Stati e città). Nel nostro caso scegliamo la colonna Stati label: selezioniamo la colonna che vogliamo vedere. Nel nostro caso selezioniamo la colonna name perché vogliamo visualizzare il nome intero dello stato Published: yes Save Ora creiamo la parte delle città. New tipo elemento: cascading dropdown (questo tipo di elemento si scarica dal sito Fabrik perché non è incluso nella versione FREE) Published: yes Save nella sezione Opzioni delle elemento troviamo: la tabella che vogliamo connettere, il valore che vogliamo memorizzare nella tabella e il testo label che vogliamo usare sul dropdown la sezione Watch element è ciò che collega alla prima tabella. Quindi noi scegliamo Stati Foreign key: selezioniamo la colonna condivisa con la prima tabella. Nel nostro caso Stati Save Possiamo collegare tante tabelle quante vogliamo. L importante è che la prima sia un elemento database join oppure un semplice elemento dropdown. Tutti gli altri elementi a partire dal secondo devono essere sempre cascading dropdown Visualizzazioni L elemento time_date è un elemento che registra la data e l ora in cui le registrazioni avvengono. %Y mostrerà soltanto l anno di registrazione. %Y-%m-%d mostrerà la data intera di registrazione. Possiamo scegliere il formato data sia per il form che per la tabella. Vediamo che time_date è un elemento di tipo data. Per applicare la caratteristica di conta dei record, dobbiamo selezionare Yes in Count records Split on: time_date Se la tabella è stata imostata per mostrare soltanto l anno, allora verranno contati i records inseriti in ogni anno Save Ora creiamo un grafico di visualizzazioni, quind andiamo su Visualizzazioni New diamo un label Published: yes Plugin: chart Larghezza e altezza 300 e 300 Element: Count: time_date se selezioniamo show legend: yes allora dobbiamo dare anche un label alla leggenda L opzione sul colore esprime in quale colore mostrare il grafico di dati Se usiamo un elemento di calcolo allora non dobbiamo specificare nessun Axis label - Save assegniamo una voce di menu. Il tipo menu: Fabrik Visualization In parameters il tipo di visualizzazione è: chart select instance: chart data Apply Aggiungiamo alcuni dati alla tabella per popolare i calcoli. Tables View data Add inserriamo i dati Save Possiamo ridurre l altezza del grafico e rimuovere gli spazi bianche tra il grafico e il titolo. Possiamo sostituire i label dell asse del grafico. Entriamo dentro la visualizzazione e impostiamo come larghezza e altezza 300 e 150 px Save se entriamo dentro l elemento time_date creato e modifichiamo heading label, possiamo mostrare il label che vogliamo sull asse del grafico Save Auto fill Installare un plugin Componenti Fabrik Plugin

10 Il plugin di auto riempimento automaticamente riempe una serie di campi da una scelta iniziale. Creiamo due tabelle: bands ed events. Tables New - Assegnare alcuni campi alla tabella bands. Nella tabella concerts aggiungiamo un elemento band come database join element. Dopo useremo questo elemento per il plugin di auto completamento. Questo campo sarà un campo da osservare per lanciare la funzione di auto riempimento. Elements New diamo un label e un nome element type: database join Tabel: bands key: id label: name Published: yes Show in table: yes Ora aggiungiamo alcuni campi per essere popolati con la funzione dell autoriempimento. Useremo per l autoriempimento lo stesso tipo di elementi usato per i campi sorgente. Abbiamo appena aggiunto i campi che possiamo inserire con l autoriempimento nel form concerts. Andiamo nel form concerts scheda submission plugin Do: Autofill In: Both on: Both field to observe: selezioniamo l elemento che quando I suoi dati vengono cambiati, lancerà l autoriempimento La funzione incrocerà alcuni dati nella tabella specificata sotto Trigger: se lasciamo in bianco allora l autoriempimento verrà lanciato non appena il database join element viene selezionato il nostro auto riempimento proviene dalla tabella band, così la selezioniamo in Table Il campo Map data accetta JSON stringhe che sono una serie di coppie key/values dentro parentesi graffe Nel nostro caso la key è l elemento bands website Save Aggiungiamo un campo al form Concerts per testarne il funzionamento. Forms View data Add inserire un dato Save Tables View data Add Twitter Per impostare tweets su Twitter è necessario impostare un applicazione twitter su premiamo sul 2 per registrare la nostra applicazione Application website non deve essere il sito web da dove svolgiamo il form in cui stiamo svolgendo l applicazione twitter applicatio type: browser Callback URL: è l URL che lancerà il plugin twitter, cioè l URL da cui attualmente parte il tweet. Nel video è presente un esempio di callback url. Default access type: siccome noi vogliamo scrivere su twitter, allora dobbiamo selezionare Read & Write Dobbiamo installare il plugin di twitter e creare un form per esso Components Fabrik Plugins dopo aver installato il plugin, creiamo il form. Forms New diamo nome twitter e nella scheda submission plugin; Add; selezioniamo Twitter In: Both On: Both dall applicazione twitter dobbiamo conoscere il consumer key e il secret consumer key e inserire questi codici negli appositi campi Save se vogliamo inviare tweets sempre allo stesso conto Twitter, lo impostiamo da: Sign in with Twitter per fare questo devo essere registrato a Twitter Twitter ci ha inviato un set di informazioni che possiamo inserire nelle impostazioni di questo plugin una volta creato il form, vogliamo creare un elemento messaggio che sarà postato su Twitter Elements diamo un nomee un label tipo elemento: text area Dobbiamo dire che vogliamo inviare il messaggio su Twitter: Forms Twitter submission plugin slezioniamo il nome dell elemento text area che abbiamo creato in Message Element Save creiamo un menu per vedere il nostro form. Quindi come tipo menu: scegliamo Fabrik form Come far postare l utente sul proprio conto e come usare un template specifico Fabrik forms entriamo nel nostro form - submission plugin il message element deve essere deselezionato per far funzionare il template per impostare il template possiamo usare i placeholder

11 Per abilitare l utente a postare col proprio conto twitter i dettagli del conto associato. Quindi clicchiamo su: or clear credentials Save - Webservices Last.fm ha un sorprendente ammontare di dati disponibili. Last.fm Apply for an API account l API key e l altro codice ci serviranno Download all interno di Params c è una serie di filtri che possiamo applicare Per prima cosa facciamo un lista che memorizzerà i dati di Last.fm. Lists New diamo un label ew il nome della tabella Save Add (sotto la colonna Elements per aggiungere elementi) diamo nome last fm_id Plugin: field Hidden: yes Save & New creiamo un altro elemento con plugin field Show in list: yes Save & new creiamo un altro elemento con plugin image Show media in list: yes Show in list: yes branch master webservice plugins fabrik list web service webservice.php com_fabrik modules web service.php web service (forse) rest.php (forse) scarichiamo e installiamo il plugin web services Lists Last events scheda Plugins web service il pulsante label contiene il testo che è mostrato a fianco l elenco Il Submit message appare dopo che la sincronizzazione è stata eseguita Driver: rest join L end point è la URL che il web service interrogherà. Dovremmo ottenere questa url da last.fm. Prenderemo la parte della url incollata che contiene il filtro e le credenziali che inseriremo successivamente nel sito last.fm clicchiamo Overview copiare il codice sotto JSON Responses lo incolliamo nella parte finale dell End point copiamo il codice API key (dal nostro account API) e lo incolliamo in: dopo aver premuto Select di Credentials incolliamo il codice Filter Select digitiamo key e value e inseriamo type: text (da qui conviene guardare il video) Il Foreign key permette di aggiornare i records memorizzati in Fabrik. Selezionare: last fm id Update existing rows: se lezioniamo yes allora le righe si aggiorneranno anche quando il plugin è in svolgimento. Se clicchiamo no allora soltanto i nuovi dati saranno aggiunti all elenco Fabrik Data map abilita i campi web service nei loro elementi corrispondenti in Fabrik Data map Select (conviene guardare il video) Come creare un elemento plugin (corso per sviluppatori)