mikrocontroller.net

Forum: PC-Programmierung Brauch Hilfe bei Web App Anwendung


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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

Autor: Freiberufler (Gast)
Datum:

Bewertung
-1 lesenswert
nicht lesenswert
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

Autor: Freiberufler (Gast)
Datum:

Bewertung
-1 lesenswert
nicht lesenswert
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.

Autor: DPA (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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
<?php
  $red   = +isset($_POST["button"]["red"]);
  $green = +isset($_POST["button"]["green"]);
  $blue  = +isset($_POST["button"]["blue"]);

  $db = new PDO(
    'mysql:host=hostname;dbname=db',
    'username',
    'password'
  );

  if(($red || $green || $blue) && @$_POST['name'] && @$_POST['date']){
    $sth = $dbh->prepare("INSERT INTO button_counter (name, datum, red, green, blue) VALUES (?,?,?,?,?)");
    $sth->execute([$_POST['name'],$_POST['date'],$red,$green,$blue]);
  }

  $counts = $db->execute("SELECT name, count(red), count(green), count(blue) FROM button_counter GROUP BY name");
?>
<html><head><title>Beispiel</title></head>
<body>

<?php print_r($counts); ?>

<form method="post">
  <label>
    Datum: <br/>
    <input name="date" type="date" placeholder="Datum"/>
  </label>
  <label>
    Name: <br/>
    <input name="name" type="text" placeholder="Name"/>
  </label>
  <input type="submit" name="button[red]" value="rot" />
  <input type="submit" name="button[green]" value="gruen" />
  <input type="submit" name="button[blue]" value="blau" />
</form>

</body></html>

schema.sql
CREATE TABLE button_counter (
  id INTEGER PRIMARY KEY,
  name VARCHAR(64) NOT NULL,
  datum DATE NOT NULL,
  savedate TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  red BIT NOT NULL DEFAULT 0,
  green BIT NOT NULL DEFAULT 0,
  blue BIT NOT NULL DEFAULT 0,
);

Autor: Joachim S. (oyo)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: Freiberufler (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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!

Autor: Freiberufler (Gast)
Datum:

Bewertung
-1 lesenswert
nicht lesenswert
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

Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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?

Autor: A. F. (artur-f) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht 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.
<form method="post" action="#" onsubmit="return DoSubmit()">
  <label>
    Datum: <br/>
    <input name="date" type="date" placeholder="Datum"/>
  </label>
  <label>
    Name: <br/>
    <input name="name" type="text" placeholder="Name"/>
  </label>
  <input type="submit" name="button[red]" value="rot" />
  <input type="submit" name="button[green]" value="gruen" />
  <input type="submit" name="button[blue]" value="blau" />
</form>

function DoSubmit(){
    var name = document.forms.form.elements.name.value;

    requestObject.open('get', 'FORMCONTROLS', true);
    requestObject.send(null);
}




Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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

Autor: DPA (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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:
<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?

Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
> Was genau zählen die Buttons. Alle klicks beliebiger personen? Alle von
> momentanem name? Alle von name an datum?

Alle von momentanen Name

Autor: Horst (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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

Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Keiner Ideen mehr?

Autor: Der Kommentar aus dem Braukeller (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
pierre schrieb:
> Keiner Ideen mehr?
Doch aber was hast du bisher gemacht?

Autor: pierre (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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>

Autor: der eine oder der andere (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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...

Autor: DPA (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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 schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.