Brauch Hilfe bei Web App Anwendung

pierre Gast #5866710
Lesenswert?
• ▲
▼ 
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
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
DPA Gast #5866830
Lesenswert?
• ▲
▼ 
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
);
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Joachim S. #5866851
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Freiberufler Gast #5866857
Lesenswert?
• ▲
▼ 
> 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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
pierre Gast #5866880
Lesenswert?
• ▲
▼ 
>
> 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!
Antwort Zitieren Bearbeiten Löschen Beitrag melden
pierre Gast #5866893
Lesenswert?
• ▲
▼ 
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?
Antwort Zitieren Bearbeiten Löschen Beitrag melden
A. F. Persönliche Seite #5866936
Lesenswert?
• ▲
▼ 
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
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
pierre Gast #5866955
Lesenswert?
• ▲
▼ 
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
Antwort Zitieren Bearbeiten Löschen Beitrag melden
DPA Gast #5866966
Lesenswert?
• ▲
▼ 
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?
Antwort Zitieren Bearbeiten Löschen Beitrag melden
pierre Gast #5866978
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Horst Gast #5867085
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
pierre Gast #5867112
Lesenswert?
• ▲
▼ 
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
Antwort Zitieren Bearbeiten Löschen Beitrag melden
pierre Gast #5871842
Lesenswert?
• ▲
▼ 
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>
Antwort Zitieren Bearbeiten Löschen Beitrag melden
der eine oder der andere Gast #5873039
Lesenswert?
• ▲
▼ 
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...
Antwort Zitieren Bearbeiten Löschen Beitrag melden
DPA Gast #5873070
Lesenswert?
• ▲
▼ 
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
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren