Wie eine Online-Datenbank erstellen? (SQL + PHP?)

LencoX2 · 11. Februar 2023

Ich wuerde dem TE vorschlagen die Daten erstmal direkt in einer Javascript Datei im JSON Format zu definieren und diese von einem Service async zurückgeben.
Auf diese Weise kommt er sehr schnell zu vorzeigbaren Ergebnissen.
Sollte es später notwendig werden kann der Service die Daten dann aus einem beliebigen anderen Quelle holen.

Das ist Rapid Prototyping. Auch Separation of Concerns ist beruecksichtigt.
Zudem kann der Ansatz schnell auf moderne Frameworks portiert werden wie React, etc.

McMoneysack91 · 11. Februar 2023

Wow, scheinbar führen alle Wege nach Rom und mit alle meine ich TAUSENDE

Ich weiß gar nicht wo ich anfangen soll. Gleichzeitig verblüfft es mich, dass ein solch banales Vorhaben doch nicht so "mal eben" umzusetzen ist.

Eine Tabelle in HTML anzulegen ist <table></table> und das wars. Aber wenn ich mir auf so manchen Websites die Codes anschaue, eine CSV darzustellen....hunderte Zeilen an Code, Bibliotheken und und und

WENN es für euch nicht zu viel verlangt ist, würde ich euch einfach gezielt um Code bitten. Dabei werde ich versuchen MÖGLICHST genauen Input zu liefern, sodass ihr möglichst wenig Ratearbeit leisten müsst und direkt wisst, was dieser Laie hier überhaupt will.

Schritt 1 - CSV erstellen.

Ich öffne mein LibreOffice Calc. Dort erstelle ich eine Tabelle mit 4 Spalten und 4 Zeilen. Die sieht so aus:

Name, Geschlecht, Nationalität, Augenfarbe
Thorsten, männlich, schwedisch, grün
Sonja, weiblich, deutsch, blau
Franco, männlich, italienisch, blau

Diese Datei speichere ich als "meinetabelle.csv". Ich kann diese Datei mit Calc öffnen und bequem bearbeiten, oder ich öffne sie im Editor und sehe wie oben aufgeführt einfach die Wörter mit Komma (oder Semikolon) getrennt.

Schritt 2 - CSV hochladen

Ich arbeite beispielsweise mit dem kostenlosen Anbieter "Infinityfree". In meinem Account gehe ich in den "File Manager". Hier sehe ich einen leeren ordner, wo eine leere Platzhalter-"Index.html" Datei liegt. Die werden wir ja später erstellen. Nun klicke ich auf "Datei hochladen" und lade die "meinetabelle.csv" hoch.

Schritt 3 - Index.html

JETZT wirds spannend. Zu Testzwecken möchte ich einfach, dass bereits die Startseite schon die Tabelle auswirft. Dabei erhebe ich erstmal KEINEN Anspruch auf Design o.Ä. Sprich wenn CSS hier zu vernachlässigen ist, gerne vernachlässigen.

Wir erstellen also

<!doctype html>
<html>
<body>
--Hier wäre ich für Code dankbar--
</body>
</html>

Zu Testzwecken können wir gerne OHNE externe JavaScript oder CSS Dateien arbeiten. Darf alles gerne hier in die index.html Datei rein. Wenn das Gerüst steht, werde ich die Aufräumarbeiten und das Aufhübschen in Eigenleistung übernehmen.

Das Ziel ist an dieser Stelle hoffentlich schon erreicht.

Schritt 4 - Adaptation und Veränderbarkeit

Je nachdem was für ein Code in Schritt 3 zum Einsatz kam, stelle ich jetzt die Frage, ob er adaptiv ist, oder man IHN AUCH noch ändern muss, wenn die Tabelle sich verändert.

Beispiel: ich habe beschlossen, den Menschen noch ein Attribut zu geben (neue Spalte) und noch eine Person in die Tabelle aufzunehmen (neue Zeile)

Ich öffne auf meinem lokalen Rechner wieder die gespeicherte "meinetabelle.csv" mit Calc und füge eine Spalte und eine Zeile hinzu, sodass die Datei so aussieht:

Name, Geschlecht, Nationalität, Alter, Augenfarbe
Thorsten, männlich, schwedisch, 32, grün
Sonja, weiblich, deutsch, 40, blau
Franco, männlich, italienisch, 27, blau
Henriette, weiblich, französisch, 51, braun

Diese modifizierte Datei speichere ich nun einfach ab, überschreibe also die alte Version. Nun lade ich diese "meinetabelle.csv" wieder auf den Server meines Anbieters in den "File Manager" und ersetze dadurch die alte Version. Nun liegt wieder eine "meinetabelle.csv" Datei im selben Verzeichnis, wie die index.html Datei mit dem Code. Muss an dem Code nun was geändert werden? Oder ist dem egal, was ihm "zum Fraß vorgeworfen" wird und er stellt alles dar? Auch wenn ich nachträglich noch so viele Spalten und Zeilen anfüge oder entferne?

Rossie · 11. Februar 2023

McMoneysack91 schrieb:
Gleichzeitig verblüfft es mich, dass ein solch banales Vorhaben doch nicht so "mal eben" umzusetzen ist.

Deine Idee lässt sich rudimentär in ein paar Minuten umsetzen. Nur würde man das professionell so nicht machen (wollen).

index.html

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
  </head>
  <body>
    <table id="daten"></table>
    <script src="js/papaparse.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

js/main.js

Javascript:

const table = document.querySelector('#daten');
let rows = 0;
let columns = 0;

const createRow = (row, index, columns) => {
  if (row.data.length != columns) {
    console.debug('Row column count does not match header, ignore row', index + 1, row.data);
    return;
  }
  const tr = document.createElement('tr');
  row.data.forEach(cell => {
    const td = document.createElement(index === 0 ? 'th' : 'td');
    td.appendChild(document.createTextNode(cell));
    tr.appendChild(td);
  });
  table.appendChild(tr);
}

const result = Papa.parse('https://meinserver/meinetabelle.csv', {
  delimiter: '\t',
  download: true,
  step: row => {
    const header = rows === 0;
    if (header) {
      // keep track of the field number to be able to verify that each data row conforms
      columns = row.data.length;
    }
    createRow(row, rows, columns);
    rows++;
  },
  complete: () => {
    console.debug(rows, 'rows parsed');
  }
});

McMoneysack91 schrieb:
Je nachdem was für ein Code in Schritt 3 zum Einsatz kam, stelle ich jetzt die Frage, ob er adaptiv ist, oder man IHN AUCH noch ändern muss, wenn die Tabelle sich verändert.

Der Code stellt alle Daten dar, auch wenn sich die Tabelle ändert. Einzige Bedingung ist, dass die Spaltenanzahl überall gleich ist. Wenn der Header 5 Einträge hat, muss auch jede Datenzeile 5 Einträge haben.

McMoneysack91 · 12. Februar 2023

@Rossie ich danke dir vielmals für deinen Beitrag. Nun versuche ich das von dir gepostete zu entschlüsseln.

1. Interpetiere ich "js/main.js" korrekt, dass ich jetzt einen Ordner oder Verzeichnis mit dem Namen "js" anlege und dort die von dir gecodete "main.js" Datei ablege?

2. In dieser "main.js" Datei trage ich in Zeile 19 statt des roten Textes den Pfad zu meiner .csv Datei ein. Bei mir wäre das "../mytest.csv" weil die CSV-Datei sich außerhalb des "js" Ordners befindet, auf der selben Ebene wie die index.html.

3. In deiner "index.html" Datei sehe ich in Zeile 11 die quelle src="js/papaparse.js". Heißt es in dem "js" Ordner müsste jetzt auch eine weitere JavaScript-Datei mit dem Namen "papaparse.js" angelegt werden?

Rossie · 14. Februar 2023

McMoneysack91 schrieb:
1. Interpetiere ich "js/main.js" korrekt, dass ich jetzt einen Ordner oder Verzeichnis mit dem Namen "js" anlege und dort die von dir gecodete "main.js" Datei ablege?

Kein Muss, ich habe es so gemacht.

McMoneysack91 schrieb:
2. Bei mir wäre das "../mytest.csv" weil die CSV-Datei sich außerhalb des "js" Ordners befindet, auf der selben Ebene wie die index.html.

Nein, da gehört der Pfad auf deinem Webserver hin. Der Browser lädt diese Datei (genau wie "index.html" etc.) vom Server.

McMoneysack91 schrieb:
3. Heißt es in dem "js" Ordner müsste jetzt auch eine weitere JavaScript-Datei mit dem Namen "papaparse.js" angelegt werden?

Kopiert. Der Parser ist nicht von mir.

McMoneysack91 · 15. Februar 2023

Danke zunächst für die Erläuterungen.

Nun wird mir die Tabelle natürlich in klassischer CSV Manier mit , getrennt angezeigt. Dabei werden mir sogar die Kommata mit angezeigt. Aber das macht ja nichts, kriegt man noch weg.

Rein faktisch steht jetzt das Konstrukt zu 100% so wie ich es haben wollte. RIESEN DANK an alle!

Nun kommt die nächste Etappe, nämlich das optische Gestalten. Derzeit verhalten sich meine CSS Attribute sehr komisch, wenn ich sie versuche auf diese Tabelle zu projizieren. Dabei ist egal, ob ich den <style> direkt in die HTML Datei lege, oder ausgesondert in eine .css Datei.

Beispiel:

Gebe ich der Tabelle

table {
align: center;
}

so rückt nur die erste Zeile in die Mitte der Seite. Der Rest bleibt am linken Rand.

Alle anderen Parameter haben optisch überhaupt keine Auswirkung auf die Tabelle. Border, Hintergrundfarben, Margins, Paddings, nichts. Muss man ab hier bestimmte Besonderheiten beachten, weil wir ja jetzt eine Tablle via JS generieren, statt klassischen <table>...</table>?

Rossie · 15. Februar 2023

McMoneysack91 schrieb:
Nun wird mir die Tabelle natürlich in klassischer CSV Manier mit , getrennt angezeigt. Dabei werden mir sogar die Kommata mit angezeigt. Aber das macht ja nichts, kriegt man noch weg.

Das ist Absicht, damit du dich mit der Konfiguration beschäftigst.

Der Code ist auch bewusst einfach gehalten und sollte so nicht produktiv gehen. Spielt bei einer kleinen Tabelle aber erst mal keine große Rolle.

Generell gilt weiterhin, dass du dich mit den Grundlagen auseinandersetzen solltest.

https://granneman.com/webdev/coding/css/centertables

McMoneysack91 · 15. Februar 2023

Ich weiß worauf du abzielst. In anderen JavaScript-Beispielen sah ich, dass Leute vorher deklariert haben welche Symbole ,;/ etc als Trennungszeichen gelten und somit nicht visuell mit ausgegeben werden sollen

Suche

Wie eine Online-Datenbank erstellen? (SQL + PHP?)

LencoX2

Commander

McMoneysack91

Gast

Rossie

Rear Admiral

McMoneysack91

Gast

Rossie

Rear Admiral

McMoneysack91

Gast

Rossie

Rear Admiral

McMoneysack91

Gast

Ähnliche Themen