• Home
  • Read Data aus mehreren Quellen

Read Data aus mehreren Quellen
ChronoConnectivity

Für ein Projekt möchte ich mit ChronoConnectivity Daten aus mehreren Tabellen in einer Liste zusammenführen. Es handelt sich hierbei um so genannte "Left Joins". Die ChronoConnectivity Anleitungen (Demos) beinhalten ein kleines Beispiel hierzu. Dieses werden wir als Grundlage für unsere Tabelle nutzen.
An dieser Stelle vielen Dank an die SAFV für die Bereitstellung der Daten.

1. Die Tabellen

Zunächst möchte ich euch die Stars des heutigen Abends vorstellen, unsere Tabellen! Hier eine kleine Overview:

1.1 Die Matches Tabelle

Unsere Matches Tabelle nutzen wir als Basis, hier haben wir eine Aufstellung aller Spiele, eine Zeile entspricht einem Match - für den Moment wichtig sind die Spalten:
id; date; category; home; visitor; pts_home; pts_visitor; year.
 
  • id beinhaltet eine automatisch generierte ID (Auto increment) als Index & Primary Key.
  • date beherbergt das Datum des jeweiligen Spiels als String.
  • Die beiden Spalten home & visitor finden wir nicht den jeweiligen Teamnamen sondern die ID des jeweiligen Teams
  • pts_homepts_visitor beinhalten die erspielten Punkte der jeweiligen Mannschaft
  • year werden wir am Ende wieder antreffen, da in meinem Beispiel die Tabelle relativ gross ist werden wir unsere Abfrage noch filtern

1.2 Die Teams Tabelle

Unsere Team Tabelle ist momentan relativ simpel aufgebaut. Wir haben Spalten für id; name; webseite; farbe; logo; Für den Moment benutzen wir aber lediglich die Spalten id & name. Was für was ist ergibt sich vermutlich aus dem Zusammenhang ;-)

1.3 Die SeasonS Tabelle

Die Season Tabelle ist ähnlich einfach gestrikt wie unsere Team-Tabelle, eigentlich noch simpler, zwei Spalten: id; season_name; und fertig.
Der Inhalt dieser Tabelle ist eine Aufstellung aller Seasons: Unsere Mannschaften spielen das Jahr hindurch Matches in verschiedenen Seasons: Regular Season, Play Off's und Swiss Bowl...
Also für unseren Statistik Corner legen wir uns zunächst eine einfache Tabellenansicht an (diese wird mir später noch gute Dienste erweisen wenn es darum geht die Ergebnisse der kommenden Abfragen gegen zu checken).

1.4 Zusammenfassung

  1. Drei Tabellen (safsc_matches, safsc_teams, safsc_season)
    • safsc_matches mit den Daten der Spiele und weiteren Inhalten gekennzeichnet durch ID's (Team A / Team B / Winner Team / Season)
    • safsc_teams mit Informationen zu den Teams
    • safsc_seasons mit Informationen zu den Seasons
  2. Alle Tabellen jeweils mit Unique ID's pro Eintrag (wichtig)
  3. Alle Tabelle sind in der Joomla! Datenbank abgelegt (nicht extern gehosted)
 
Legen wir los mit ChronoConnectivity!

2. ChronoConnectivity

2.1 Erste Abfrage einrichten

In ChronoConnectivity legen wir uns zunächst eine neue Connection an, ich nenne meine Connection SAFSC. Als erstes erstellen wir uns dann eine erste Function des Typs "Read Data" (zu finden unter Database). Danach nennen wir die Funktion nicht einfach platt nur "read_data" sondern geben dieser den Namen "read_results". Das Haupt-Model (ich sag dem Ding einfach so - es ist einfach das erste Model der Abfrage) benenne ich im feld "Model name" mit "Match" als Database table wähle ich die Matches Tabelle auf dem Server aus. Kein Filter und auch sonst kein Schnick Schnank.
 
Functions
 
Als nächstes wechseln wir ins Tab Views - hier angekommen fügen wir via Lists --> Table eine Tabelle hinzu. Diese erscheint nun links in der Liste ver Views. Nachdem wir diese ausgewählt haben sehen wir rechts im Tab General die Grundeinstellungen. Hier setzen wir den Name auf table_results und den Data provider auf {var:read_results}. (An dieser Stelle ein Hinweis: Solltest du die Funktion zuvor anders genannt haben musst du als Data provider den entsprechenden Namen eintragen. Soll heissen wenn du deiner Function den Namen read_SomethingElse gegeben hast musst du an dieser Stelle deinen Data provider entsprechend anpassen, also {var:read_SomethingElse}). Die Columns list lassen wir mal leer und aktivieren die Checkbox darunter "Include all the provier fields".
 
View
 
Zu guter letzt gehen wir im Events Tab unter index in den Bereich Content. Hier notieren wir {fn:read_results} (Hust! Ist der Name deiner Funktion ein anderer?), in der zweiten Zeile {view:table_results} sowie darunter {debug:} (achtet auf den Doppelpunk nach debug).
einmal Save Button geklickt können wir danach auf Open (auf der Conneciton Übersicht) oder auf Preview (wenn die Connection gewählt wurde und du die Bearbeitungsmaske vor dir hast) klicken und wir sollten eine, zugegeben nicht all zu hübsche, Tabelle mit dem kompletten Datenbanktabelleninhalt sehen.
In meinem Beispiel sieht das ganze in etwa so aus:
 
Result

2.2 Die View optimieren

Unsere Spaltentitel sehen noch nicht all zu hübsch aus, darum werden wir unsere View noch etwas anpassen. Durch konfiguration der View können wir die anzuzeigenden Inhalte für die Ansicht optimieren. Im Tab View erstellen wir hierfür im Bereich Columns list folgende Einträge:
 
Match.id:ID
Match.date:Datum
 
Weiter deaktivieren wir die zuvor aktivierte Option Include all the provider fields. Diese Option überschreibt die Konfiguration der Columns list, sorgt dafür das alle Spalten dargestellt werden und wird jetzt nocht mehr benötigt. Das Ergebnis sieht wie folgt aus:
 
Einfache Liste ein Anfang
 
Die Liste macht noch nicht viel her, bitte beachtet wenn Ihr in eurem Beispiel Das Model in der Function anders benannt habt müsst ihr hier auch die Daten gem. eurer Benennung anpsrechen. In der View / der Columns list werden nach dem folgenden Schema Daten ausgegeben:
"Model Name"."Spalten Name":"Gewünschter Spaltentitel"
 
 Ich erweitere mein Beispiel nun und Stelle nun die folgenden Spalten dar:
 
Match.id:ID
Match.date:Datum
Match.home:Heimmannschaft
Match.visitor:Gastmannschaft
Match.pts_home:Punkte Heim
Match.pts_visitor:Punkte Gast
Match.year:Saison
 
Das ganze sieht nun schon etwas besser aus:
Einfache Liste mit allen Feldern
Im nächsten Schritt ersetzen wir die ID's der Teams durch den entsprechenden Wert in unserer Teams Tabelle, aber keine Angst, das machen wir mit Links ;-)
 

2.3 Left Join in ChronoConnectivity

Damit wir mit den Team Daten in der View arbeiten können müssen wir als erstes unsere Function um ein weiteres Model erweitern. Hierzu wechseln wir in den Tab Functions und wählen links unsere Read Data Function. In der rechten hälfte des Screens haben wir oben die Möglichkeit ein neues Model hinzuzufügen. Hier notieren wir den Namen TeamHome und klicken auf Apply. Wenn wir nun erneut unsere Function aufrufen haben wir die Möglichkeit das zweite Model einzurichten. Hier nutze ich die Folgenden Informationen:
 
  • Database Table Die Tabelle welche unsere Team Namen enthält
  • Related to Der Name unseres Haupt Models (Match)
  • Relation Art der Verbindung (One matching record, foreign key at the related table, was soviel heisst wie "Nimm die den Wert der Spalte home und suche nach einem Eintrag mit dieser ID in der Tabelle der Teams")
  • foreign key Der Name der Spalte welche den Schlüssel / den Indikator für die Verknüpfung enthält
Hier noch ein Screenshot meiner Konfiguration:
Zweites Model einrichten

2.4 Die View erweitern

Fast fertig, im nächsten Schritt erweitern wir die View dahingehend das sie die Informationen aus unserem TeamHome Model verwendet. Hierzu wechseln wir ins Tab View und notieren im Bereich Columns Views die folgende Zeile:
 
Match.home:{var:table_results.row.TeamHome.name}
 
Den Eintrag noch kurz erklärt:
 
Die Spalte Match.home geben wir ja gem. Columns list bereits aus (dritte Spalte), danach folgt der Doppelpunkt, also eine Anweisung für die Spalte Match.home. Die Anweisung folgt dann in geschweiften Klammern {}. Die Variable (var:) der View table_results (Name unserer View) der entsprechenden Zeile (row) ist zu finden im Model TeamHome, hole von dort den Wert der Spalte name.
Die Struktur lautet also: Hauptmodel.Spaltenname:{var:NameDerView.row.HilfsModel.Spaltenname}
Das ist das Resultat:
Liste nach left Join
 

2.5 Dasselbe in grün

Für die Spalten visitor und category erstellen wir nun ebenfalls via Functions Tab ein Model. Zunächst das Model für das Gast Team:
 
  • Modelname: TeamVisitor
  • Related to: Match
  • Foreign key: visitor
  • Database table: safsc_teams
  • Relation: One matching record,foreign key at related table
(Der foreign key, also die Team ID, befindet sich in unserer Match Tabelle in der Spalte visitor)
 
 
Anschliessend können wir im Tab View die Spalte für das Gast-Team ebenfalls etwas aufhübschen. Hier steht in der Columns view nun:
 
Match.home:{var:table_results.row.TeamHome.name}
Match.visitor:{var:table_results.row.TeamVisitor.name}
 
In den Spalten Heimmannschaft und Gastmannschaft befinden sich nun die Namen des jeweiligen Teams anstelle der ID's.

2.6 Season ausgeben

Da habe ich doch direkt etwas vergessen. Die Tabelle soll auch die Season ausgeben. Hierfür müssen wir wieder ein Hilfs-Model generieren. Also schnell nochmal in den Functions Tab und ein Hilfs-Model mit dem Namen Season erstellt.
  • Modelname: Season
  • Related to: Match
  • Foreign key: category
  • Database table: safsc_seasons
  • Relation: One matching record,foreign key at related table
Das Vorgehen ist, wie ihr sehen könnt, immer dasselbe - auch wenn wir noch eine dritte Tabelle (wie gerade geschehen hinzuziehen. So sieht meine Function nun aus:
 

Die View zu Season

Da ich, wie bereits erwähnt die Season komplett vergessen habe müssen wir in der View Tab nun zwei Stellen bearbeiten. Zum einen trage ich in der Columns list noch die Spalte für die Category ein:
 
Match.category:Season
 
Und zum anderen setzen wir gleich noch den Eintrag für das überschreiben der category ID mit dem Namen der Season (identisch zum ersetzen der Team ID's durch die Team Namen). Hierfür trage ich im Bereich Columns views noch die folgende Zeile ein:
 
Match.category:{var:table_results.row.Season.season_name}
 
Wir erinnern uns:
MainModelName.Spaltenname:{var:NameDerView.row.HilfsModel.Spaltenname}
 
  • Match.category definiert das Was
  • table_results definiert das Wo
  • Season.season_name das womit
Das Resultat nun:
 
Endbild 1 leftJoined
 
 
 

3. Bonus

3.1 Wir bearbeiten die Ergebnisspalte für die Ausgabe

Aktuell haben wir die ezielten Punkte pro Team in verschiedenen Spalten (Punkte Heim / Punkte Gast). Für eine Frontend Ausgabe nicht so hübsch. Im View Tab mit Hilfe der Bereiche Columns list und Columns views können wir noch etwas zaubern. Zunächst ist es wichtig das ihr euch im klaren seit das ihr völlige Freiheit habt was die Erstellung der Spalten / die Darstellung der Inhalte habt.
 
Das bedeutet wir können einfach so eine zusätzliche Spalte in unserer View erstellen hierzu fügen wir die Zeile an beliebiger Position im ereich Colums list ein:
 
My.resultat:Resultat
 
Was vor, resp. hinter dem Doppelpunkt steht ist in diesem Szenario unwichtig. Ich habe mir angewöhnt das ich View-Spalten, welche sich nicht direkt auf Tabellenspalten in der DB beziehen die Bennenung "My" voranstelle. Dies dient jedoch nur der Übersichtlichkeit.
 
Im Bereich Columns views füge ich eine Renderanweisung für die Spalte hinzu, diese sieht so aus:
 
My.resultat:{var:table_results.row.Match.pts_home}:{var:table_results.row.Match.pts_visitor}
 
Kurz aufgeschlüsselt:
Nimm die Spalte My.resultat lade hier aus der view table_results die Daten der Spalte Match.pts.home, setze einen Doppelpunkt als Trennzeichen und lade auch die Daten der Spalte Match.pts_visitor.
Im Ergebnis sehen wir dann etwas in dieser Art:
safsc My.resultat spalte
 
Zum Schluss entfernen wir nun noch die Spalten "Punkte Heim" sowie "Punkte Gast" - diese Informationen haben wir nun ja in der Spalte Resultat. Hierfür entfernen wir im Views Tab unter Columns list diese beiden Zeilen:
 
Match.pts_home:Punkte Heim
Match.pts_visitor:Punkte Gast
 

3.2 DB Abfrage filtern

Aktuell laden wir alles alles alles aus den DB-Tabellen. In meinem Beispiel hat die DB allerdings alle Spiele seit 1986 gelistet, einige zu viel. Die Abfrage können wir im Tab Functions im Model Match einschränken. Entweder setzen wir im Feld Page Limit einen Wert von 10 (z.B.), das Paging for multiple results lassen wir auf Disabled, so werden nur die ersten 10 Zeilen der Matches Tabelle verarbeitet. Alternativ (oder zusätzlich) können wir die Abfrage auch noch gezielter Steuern.
Mit Hilfe des Feldes Where conditions im Bereich Filtering Settings (im Model Match) können wir die anzuzueigenden Elemente eingrenzen.
 
year/>:2009
 
Diese Zeile bewirkt das ChronoConnectivity uns nur die Spiele aus der DB ausliest bei welchen in der Spalte year ein grösserer Wert als 2009 steht.
 

3.3 Order by

Als letztes noch die Sortierreihenfolge. Die Reihenfolge der Spiele ist aktuell eigentlich in Ordnung (alt nach neu gemäss ID, das Funktioniert und ist gut so da unsere DB Tabelle (Matches) bereits so aufgebaut wurde. Um eine Sortierreihenfolge festzulegen muss man sich zunächst entscheiden nach welcher Spalte die Einträge sortiert werden sollen. In meinem Beispiel habe ich hierfür zur Sicherheit extra das Datum in die drei Spalten "year,month,day" aufgesplittet. Nun kann ich im Feld Order fields schalten und walten wie ich möchte:
 
year/asc
month/desc
day/asc
 
Die oben gezeigte Anweisung macht zwar nicht viel Sinn aber verdeutlicht die Möglichkeiten. Zunächst wird nach der Spalte year in aufsteigender Reihenfolge sortiert, innerhalb eines Jahres wird absteigend nach dem Monat sortiert, innerhalb eines Monats dann wieder aufsteigend nach Tag. Ja, wie gesagt, macht nicht viel Sinn aber veranschaulicht die Order by Funktion. Eine Zeile im Feld Order fields stellt jeweils eine Anweisung dar.
 

Das Styling

 
Wer noch etwas am Styling schrauben möchte kann sich hier inspirieren lassen: https://semantic-ui.com/collections/table.html ChronoConnectivity nutzt für die Visualisierung das semantic ui Framework.
Meine Finale Version sieht so aus:
 
Zum Styling werden wir in einem weiteren Artikel mehr erfahren. Der Kaffee ist leer - für heute reichts...
 
 
Monday, 13 August 2018

Leave a comment

You are commenting as guest.

Kontakt

Marco Rensch
Glashüttenweg 30
8887 Mels
This email address is being protected from spambots. You need JavaScript enabled to view it.

Technik

Webseite basierend auf Joomla!
Template erstellt mit uikit
Symbolbilder von unsplash.com