Hallo Zusammen, ich möchte eine einfache Web App programmieren die folgendes können soll : - Datum eingabe - Name Eingeben - 3 Klick-Button die angeklickt werden können und die jeweilligen Klicks auf die Buttons mitzählen (zb Grüner Button wurde 3 mal betätigt, Roter Button 5 mal usw) Die eingegebenen Daten und die Anzahl der Klicks soll in eine Datenbank gespeichert werden. Dies soll sowohl online als auch offline funktionieren. Ich habe gedacht die App mit Html5, Javascript und Css zu programmieren, da sie auf einem Smartphone/Tablett und Laptop funktionieren soll. Hat jemand sowas schon mal gemacht? Wie kann ich die Daten auf eine Datenbank speichern und einer Verbindung zum Server herstellen? Welche SPrache eignet sich da? Myqsl? Ich würde mich sehr übe eure Antwort freuen! :) Vielen Dank
Mit den richtigen Tools (Visual Studio 2017 oder 2019) und den richtigen Tutorials ist das kinderleicht. https://docs.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-2.2
asp.net core mit dem Entity-Framework funktioniert mit dem "Code first approach". https://www.entityframeworktutorial.net/code-first/what-is-code-first.aspx D.h. du brauchst Dich um die DB gar nicht zu kümmern: Du legst einfach Deine Modelle/Klassen an, und die Migration in die Datenbank erledigt VS 2017 voll-automatisch.
Am einfachsten wäre das wohl in HTML+PHP. Als Datenbank würde ich MySQL nehmen, aber jede Datenbank sollte gehen. Irgend sowas (alles ungetestet): index.php
1 | <?php
|
2 | $red = +isset($_POST["button"]["red"]); |
3 | $green = +isset($_POST["button"]["green"]); |
4 | $blue = +isset($_POST["button"]["blue"]); |
5 | |
6 | $db = new PDO( |
7 | 'mysql:host=hostname;dbname=db', |
8 | 'username', |
9 | 'password'
|
10 | );
|
11 | |
12 | if(($red || $green || $blue) && @$_POST['name'] && @$_POST['date']){ |
13 | $sth = $dbh->prepare("INSERT INTO button_counter (name, datum, red, green, blue) VALUES (?,?,?,?,?)"); |
14 | $sth->execute([$_POST['name'],$_POST['date'],$red,$green,$blue]); |
15 | }
|
16 | |
17 | $counts = $db->execute("SELECT name, count(red), count(green), count(blue) FROM button_counter GROUP BY name"); |
18 | ?>
|
19 | <html><head><title>Beispiel</title></head> |
20 | <body>
|
21 | |
22 | <?php print_r($counts); ?> |
23 | |
24 | <form method="post"> |
25 | <label>
|
26 | Datum: <br/>
|
27 | <input name="date" type="date" placeholder="Datum"/> |
28 | </label>
|
29 | <label>
|
30 | Name: <br/>
|
31 | <input name="name" type="text" placeholder="Name"/> |
32 | </label>
|
33 | <input type="submit" name="button[red]" value="rot" /> |
34 | <input type="submit" name="button[green]" value="gruen" /> |
35 | <input type="submit" name="button[blue]" value="blau" /> |
36 | </form>
|
37 | |
38 | </body></html>
|
schema.sql
1 | CREATE TABLE button_counter ( |
2 | id INTEGER PRIMARY KEY, |
3 | name VARCHAR(64) NOT NULL, |
4 | datum DATE NOT NULL, |
5 | savedate TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, |
6 | red BIT NOT NULL DEFAULT 0, |
7 | green BIT NOT NULL DEFAULT 0, |
8 | blue BIT NOT NULL DEFAULT 0, |
9 | ); |
Die Daten (Datum, Name, Anzahl Klicks Button 1, Anzahl Klicks Button 2, Anzahl Klicks Button 3) schickst Du einfach als HTTP POST Request an Deinen HTTP-Server. z.B. durch ein gewöhnliches HTML-Formular mit 5 entsprechenden Feldern. Auf Deinem Server nimmt dann irgendein (PHP/whatever) Script die per HTTP-Request gesendeten Daten entgegen und speichert sie ab. Üblicherweise (aber nicht notwendigerweise) in einer SQL-Datenbank. Wie genau Du das machst, hängt natürlich davon ab, was Du für Möglichkeiten auf Deinem HTTP-Server hast etc. Falls Du ein einfaches Webhosting-Angeboten nutzt, dann steht Dir möglicherweise eh nur PHP zur Verfügung. Ich hingegen nehme für so etwas üblicherweise das in Python geschriebene, Open Source-Web Framework "django": https://www.djangoproject.com/ Was ich nicht 100%ig verstanden habe, ist das hier: "Die eingegebenen Daten und die Anzahl der Klicks soll in eine Datenbank gespeichert werden. Dies soll sowohl online als auch offline funktionieren." Was genau meinst Du damit, dass es "offline funktionieren" soll? Die Daten kannst Du ja logischerweise nur dann in die Datenbank auf dem Server speichern, wenn Smartphone/Tablet/Laptop mit dem Server kommunizieren kann, also gerade online ist.
> Die Daten kannst Du ja logischerweise nur dann in die Datenbank auf dem > Server speichern, wenn Smartphone/Tablet/Laptop mit dem Server > kommunizieren kann, also gerade online ist." Ich habe das so verstanden, dass im Offline - Betrieb die eingegebenen Daten lokal gespeichert werden, und bei Netzwiederherstellung die lokale Datenbank mit der online-Datenbank synchronisiert wird.
> > Ich habe das so verstanden, dass im Offline - Betrieb die eingegebenen > Daten lokal gespeichert werden, und bei Netzwiederherstellung die lokale > Datenbank mit der online-Datenbank synchronisiert wird. Ja genau so habe ich mir das vorgestellt!
Wenn man das mit low-level-php selber entwickeln will, wird das sehr umfangreich. Gute Frameworks bieten aber schon fertige Lösungen an, z.B. https://docs.microsoft.com/en-us/sql/relational-databases/track-changes/track-data-changes-sql-server?view=sql-server-2017
DPA schrieb: > Am einfachsten wäre das wohl in HTML+PHP. Als Datenbank würde ich > MySQL > nehmen, aber jede Datenbank sollte gehen. Irgend sowas (alles > ungetestet): > > index.php<?php > $red = +isset($_POST["button"]["red"]); > $green = +isset($_POST["button"]["green"]); > $blue = +isset($_POST["button"]["blue"]); > >... Vielen Dank das ist schon sehr gut, jedoch wird in diesem Beispiel bei jedem Klick auf einen der Button (zb Rot) das Datum gelöscht bzw es muss neu eingegeben werden. Wie kann man es machen, das zb für das jeweilige Datum alle Klicks auf die Buttons gespeichert / mitgezählt werden und das Datum nur geändert wird, wenn der Name geändert wird?
pierre schrieb: > Wie kann man es machen, das zb für das jeweilige Datum alle Klicks auf > die Buttons gespeichert / mitgezählt werden und das Datum nur geändert > wird, wenn der Name geändert wird? Geht mit Ajax.
1 | <form method="post" action="#" onsubmit="return DoSubmit()"> |
2 | <label> |
3 | Datum: <br/> |
4 | <input name="date" type="date" placeholder="Datum"/> |
5 | </label> |
6 | <label> |
7 | Name: <br/> |
8 | <input name="name" type="text" placeholder="Name"/> |
9 | </label> |
10 | <input type="submit" name="button[red]" value="rot" /> |
11 | <input type="submit" name="button[green]" value="gruen" /> |
12 | <input type="submit" name="button[blue]" value="blau" /> |
13 | </form> |
14 | |
15 | function DoSubmit(){
|
16 | var name = document.forms.form.elements.name.value; |
17 | |
18 | requestObject.open('get', 'FORMCONTROLS', true);
|
19 | requestObject.send(null); |
20 | } |
A. F. schrieb: > pierre schrieb: >> Wie kann man es machen, das zb für das jeweilige Datum alle Klicks auf >> die Buttons gespeichert / mitgezählt werden und das Datum nur geändert >> wird, wenn der Name geändert wird? > > Geht mit Ajax. > <form method="post" action="#" onsubmit="return DoSubmit()"> > <label> > Ich habe es so gemacht das ich "type=submit" zu "type=button" geändert habe
pierre schrieb: > Vielen Dank das ist schon sehr gut, jedoch wird in diesem Beispiel bei > jedem Klick auf einen der Button (zb Rot) das Datum gelöscht bzw es muss > neu eingegeben werden. Normalerweise würde ich das die $_POST Daten wieder ausgeben:
1 | <input name="date" type="date" placeholder="Datum" value="<?php echo htmlentities($_POST['date']); ?>"/> |
Gleiches bei name. Da name und datum hier aber eventuell länger gebraucht werden, könnte man es eventuell noch in $_SESSION oder $_COOKIE zwischenspeichern. Da werte aber auch offline zwischen gespeichert werden sollte, ist es eventuell besser, das Laden und Senden der Daten vom/zum Server statdessen gleich mit JS & fetch zu machen, und php nur in einer separaten Datei zum Speichern und Zurückgeben der Daten vom Server zu verwenden, mit einer art REST interface. Dann kann man, wenn das Speichern wegen z.B. fehlender Internetverbindung nicht klappt, das erstmal lokal speichern. localStorage ist dafür recht nützlich, aber auch andere dinge, wie z.B. IndexedDB sind möglich. Um eine Webseite offline verfügbar zu machen, gibt es dann mehrere Methoden. Man könnte ServiceWorker verwenden, oder einen applicationcache. Mit entsprechenden manifesten kann man das auch optimieren für das Speichern als App-Artigen Shortcut auf dem Home Screen von Handies usw. Alternativ kann man mit z.B. Cordova auch eine lokale App aus einer Webseite machen. pierre schrieb: > Ich habe es so gemacht das ich "type=submit" zu "type=button" geändert > habe Dann sendet es aber auch nichts mehr zum Server... pierre schrieb: > Wie kann man es machen, das zb für das jeweilige Datum alle Klicks auf > die Buttons gespeichert / mitgezählt werden Was genau zählen die Buttons. Alle klicks beliebiger personen? Alle von momentanem name? Alle von name an datum?
DPA schrieb: > Was genau zählen die Buttons. Alle klicks beliebiger personen? Alle von > momentanem name? Alle von name an datum? Jeder Button steht für eine gewisse Aktion bei einem Brettspiel, wurde zb ein Punkt gemacht, wird ein Button geklickt. Wenn 5 Punkte erzielt worden sind, wird der Button 5 mal betätigt. Wird zb ein Foul gemacht, dann wird ein anderer Button begtätigt, fouls werden gezählt.
> Was genau zählen die Buttons. Alle klicks beliebiger personen? Alle von > momentanem name? Alle von name an datum? Alle von momentanen Name
Freiberufler schrieb: > Mit den richtigen Tools (Visual Studio 2017 oder 2019) und den richtigen > Tutorials ist das kinderleicht. Freiberufler schrieb: > Gute Frameworks bieten aber schon fertige Lösungen an, z.B. > > https://docs.microsoft.com/en-us/sql/relational-databases/track-changes/track-data-changes-sql-server?view=sql-server-2017 Ist ja gut du MS-Fanboy. Hier gehts um richtige Programmierung und nicht um schrottigen Pfusch.
Horst schrieb: > Freiberufler schrieb: >> Mit den richtigen Tools (Visual Studio 2017 oder 2019) und den richtigen >> Tutorials ist das kinderleicht. > > Freiberufler schrieb: >> Gute Frameworks bieten aber schon fertige Lösungen an, z.B. >> >> > https://docs.microsoft.com/en-us/sql/relational-databases/track-changes/track-data-changes-sql-server?view=sql-server-2017 > > Ist ja gut du MS-Fanboy. Hier gehts um richtige Programmierung und nicht > um schrottigen Pfusch. :D
Also ich habe die Benutzeroberfläche bereits geschrieben, jetzt möchte
ich die eingegebenen Daten (Datum, Optionen, Auswahl) in einer Datenbank
speichern.
Die Daten sollen auch offline gespeichert werden, sodass die
eingegebenen Daten bei Netzverbindung synchronisiert werden.
Leider habe ich jedoch keine Kenntnisse wie man die Daten aus meiner
Webapp an die Datenbank/Server übermitteln kann.
Ich freue mich über eure Hilfe!
Vielen Dank im Voraus
Code :
<html><head><title>Test Software</title></head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<body>
<form method="post">
<label>
Datum: <br/>
<input name="date" type="date" placeholder="Datum"/>
</label>
<label>
<p> <form action="#"> </p>
<label>Station:<br>
<select name="top5">
<option>Auswahl1 </option>
<option>Auswahl 2 </option>
<option>Auswahl 3 </option>
<option>Auswahl 4 </option>
<option>Auswahl 5 </option>
</select>
</label>
</form>
</main>
<br/><br/><br/>
<input type="button" name="button[Option 1]" value="Option 1" />
<input type="button" name="button[Option 2]" value="Option 2" />
<input type="button" name="button[Option 3]" value="Option 3" />
<input type="button" name="button[Option 4]" value="Option 4" />
<input type="button" name="button[Option 5]" value="Option 5" />
</form>
</body></html>
pierre schrieb: > Also ich habe die Benutzeroberfläche bereits geschrieben, pierre schrieb: > <html><head> > [...] > </body></html> also eine web-oberfläche pierre schrieb: > Die Daten sollen auch offline gespeichert werden, sodass die > eingegebenen Daten bei Netzverbindung synchronisiert werden. und wie soll die oberfläche offline auf dein gerät kommen? bzw. wie wir der self-post verarbeitet? mir scheint, irgendwas an dem konzept hinkt noch ein bisschen...
der eine oder der andere schrieb: > pierre schrieb: >> Die Daten sollen auch offline gespeichert werden, sodass die >> eingegebenen Daten bei Netzverbindung synchronisiert werden. > > und wie soll die oberfläche offline auf dein gerät kommen? > bzw. wie wir der self-post verarbeitet? Das ist doch gar kein Problem: DPA schrieb: > Um eine Webseite offline verfügbar zu machen, gibt es dann mehrere > Methoden. Man könnte ServiceWorker verwenden, oder einen > applicationcache. Mit entsprechenden manifesten kann man das auch > optimieren für das Speichern als App-Artigen Shortcut auf dem Home > Screen von Handies usw. Alternativ kann man mit z.B. Cordova auch eine > lokale App aus einer Webseite machen. Also 3 Möglichkeiten: 1) ServiceWorker: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API 2) application cache: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache 3) Cordova: https://cordova.apache.org/ Und noch die Manifest/App sache für normale Webseiten: https://developer.mozilla.org/en-US/docs/Web/Manifest
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.