Projekt: Einkaufszettel (Fr/2, Kr)

Name & Praktikumstermin: Lars Köhler, 5211085 (Fr/2, Kr)

Inhaltsverzeichnis

• Projekt: Einkaufszettel (Fr/2, Kr)
  • Inhaltsverzeichnis
  • Kurzbeschreibung inkl. Screenshot
  • Beschreibung des Projektaufbaus
  • Abgabedateien (LOC)
  • Testdateien (TST)
  • Aufbau der Anwendung
  • Dokumentation des implementierten WebAPIs
    • 1. Allgemein
    • 2. Laden des Einkaufszettels (listhtml)
      • Request
      • Response
    • 3. Artikel zu dem Einkaufszettel hinzufügen
      • Request
      • Response
    • 4. Artikel von einem Einkaufszettel entfernen
      • Request
      • Response
    • 5. Einkaufszettel schließen ohne zu speichern
      • Request
      • Response
    • 6. Einkaufszettel schließen mit speichern
      • Request
      • Response
    • 7. Einen gespeicherten Einkaufszettel öffnen
      • Request
      • Response
  • Technischer Anspruch (TA) und Umsetzung der Features
    • Bootstrap
    • Session Handling
  • Quellennachweis
    • 1. Quellen

Kurzbeschreibung inkl. Screenshot

Mittels des Programms kann der Nutzer einen bzw. mehrere digitale Einkaufszettel erstellen. Jedem dieser Einkaufszettel kann man frei einen Namen zuweisen. Auserdem kann man jedem Einkaufszettel beliebig viele Artikel zuweisen und nach Belieben auch wieder entfernen, sollte man diesen Artikel erworben haben. Einkaufszettel kann man speichern und nachträglich erneut öffnen und die dazugehörigen Artikel bearbeiten. Sollte man alle Einkäufe von einem Einkaufszettel erledigt haben, kann man diesen dann auch wieder komplett entfernen.

---

Beschreibung des Projektaufbaus

Abgabedateien (LOC)

Verlinkter Dateiname	Dateiart	LOC
App.java	Java	43
ListManager.java	Java	65
HTMLGenerator.java	Java	59
Session.java	Java	21
connection.js	JavaScript	3
main.js	JavaScript	82
index.html	HTML	37
all.css	CSS	2
main.css	CSS	58
variables.css	CSS	9
		= 379

Testdateien (TST)

Verlinkter Dateiname	Testart	Anzahl der Tests
ListTest.java	Asserts

Die Tests werden wie folgt ausgeführt: Im Terminal wird auf der Ebene der ListTest.java (src/main/java/shopping/list) die Eingabe jshell -R-ea ListTest.java getätigt.

Aufbau der Anwendung

Datei	Inhalt
App.java
ListManager.java
HTMLGenerator.java
Session.java
connection.js
main.js
index.html
all.css
main.css
variables.css

Der Ordner resources beinhaltet den Code für das GUI (.html und .css) und die beiden JavaScript Dateien zum Senden von HTTP-Requests und Verarbeiten der HTTP-Responses des Servers.

Dokumentation des implementierten WebAPIs

1. Allgemein

Für die implementierten WebAPIs wurde zum einen JavaScript für die Request und Javascript für die Response genommen. Die Funktion für die Javascript Request findet man somit in der connection.js die dann in der main.js verwendet werden. Für die Request wurde die Methode POST verwendet.

In Java werden die Request über Javalin app.post angesprochen.

Über die connection.js wird ein Request wie folgt definiert:

function sendToServer(target, query = '') {
    return fetch(target, {body: query, method : "POST"}).then(response => response).catch(console.error);
}

2. Laden des Einkaufszettels (listhtml)

In der main.js wird in der Zeile 37 über die Funktion sendToServer ein Request mit dem Namen "listhtml" gestellt welcher den Namen des Zettels an den Server App.java übergibt und als Response von dem Server das HTML von dem Einkaufszettel erwartet.

Request

sendToServer('/listhtml', "name=" + listName).then((response) => {
    response.text().then(function(responseText) {
        document.getElementById("emotion").insertAdjacentHTML('beforeend', responseText);
        registerEvents();
    })
});

Response

app.post("/listhtml", ctx -> {
    ctx.result(ListManager.addList(ctx.formParam("name")));
});

3. Artikel zu dem Einkaufszettel hinzufügen

Request

me = this;
sendToServer('/article', "name="+ this.previousSibling.value +"&id=" + this.parentElement.id ).then((response) => {
    response.text().then(function(responseText) {
        document.getElementById(me.parentElement.id).insertAdjacentHTML('beforeend', responseText);
        registerEvents();
    })
});

Response

app.post("/article", ctx -> {
    int id = ListManager.splitId(ctx.formParam("id"));
    String name = ctx.formParam("name");
    ctx.result(ListManager.addArticle(id, name));
});

4. Artikel von einem Einkaufszettel entfernen

Request

me = this;
sendToServer('/remove', "id=" + this.parentElement.parentElement.id + "&name=" + this.previousSibling.firstChild.data).then((response) => {
    me.parentElement.remove();
})

Response

app.post("/remove", ctx -> {
    ListManager.removeArticle(ListManager.splitId(ctx.formParam("id")), ctx.formParam("name"));
});

5. Einkaufszettel schließen ohne zu speichern

Request

sendToServer('/close', "id=" + this.parentElement.id);
document.getElementById(this.parentElement.id).remove();

Response

app.post("/close", ctx -> {
    int id = ListManager.splitId(ctx.formParam("id"));
    ListManager.removeList(id);
});

6. Einkaufszettel schließen mit speichern

Request

me = this;
sendToServer('/save', "id=" + this.parentElement.id + "&name=" + this.parentElement.children[1].value).then((response) => {
    response.text().then(function(responseText) {
        me.parentElement.parentElement.insertAdjacentHTML('afterbegin', responseText);
        me.parentElement.remove();
        registerEvents();
    })
})

Response

app.post("/save", ctx -> {
    int id = ListManager.splitId(ctx.formParam("id"));
    ctx.result(HTMLGenerator.getListOpenHTML(id, ctx.formParam("name")));
    ctx.sessionAttribute("list", ListManager.getArticlesById(id));
    ctx.sessionAttribute("id", id);
    ctx.sessionAttribute("name", ctx.formParam("name"));
});

7. Einen gespeicherten Einkaufszettel öffnen

Request

me = this;
sendToServer('/open', "id=" + this.id + "&name=" + this.innerHTML).then((response) => {
    response.text().then(function(responseText) {
        document.getElementById("emotion").insertAdjacentHTML('beforeend', responseText);
        me.remove();
        registerEvents();
    })
})

Response

app.post("/open", ctx -> {
    ctx.result(HTMLGenerator.getListHTMLbyId(Integer.parseInt(ctx.formParam("id")), ctx.formParam("name")));
});

Technischer Anspruch (TA) und Umsetzung der Features

Ich habe folgende Features verwendet. Die verlinkte Datei zeigt beispielhaft den Einsatz dieses Features in den angegebenen Zeilen im Quellcode.

1. Bootstrap. index.html (13-41)
2. Session Handling Session.java

Quellennachweis

Quellen

https://www.w3schools.com/
https://stackoverflow.com/

https://git.thm.de/dhzb87/JbX
https://javalin.io/documentation
https://javalin.io/tutorials/

https://moodle.thm.de/course/view.php?id=4223
http://openbook.rheinwerk-verlag.de/javainsel/
Session.java https://javalin.io/tutorials/jetty-session-handling-java