Hallo,
ich muss in meinem Studium eine Website erstellen.
Es muss einen wirtschaftlichen Hintergrund haben und daher habe ich mich dazu entschieden eine Webseite zu gestalten, auf der man Getränke bestellen kann. Das ist zumindest der Hintergrundgedanke.
Ich habe mit node.js bzw. VisualStudio einen Expressserver eingerichtet. Dort existieren gewisse Routen die es ermöglichen, dass die Seite nur geladen wird, wenn der Server läuft. So beuge ich Bestellungen vor, die abgesetzt werden wenn der Laden normalerweise zu hätte. Die Seite holt sich via JS alle bestellbaren Inhalte und die zugehörigen Preise.
Kommen wir zum eigentlichen Problem:
Was ehrlichgesagt nicht nur ein Problem, sondern gleich mehrere sind.
Problemchen numero 1:
Ich sende dem Server (node.js Express) die Tischnummer und die Bestellung zu.
und erhalte folgenden Output:
Nun muss aber eigentlich bevor die Bestellung an den Server geht bezahlt werden.
-> Ich muss also die Infos von meiner Bestellseite zu meiner Bezahlseite bekommen.
Entweder ich gebe die Infos im Browser mit oder ich
-> Ich muss die Möglichkeit implementieren mit PayPal zu zahlen
Scheinbar ist da mehr dahinter als einfach nur ein paar PayPal Buttons einzubinden.
-> Ich muss eine Art #Code generieren. Anhand dieser Nummer kann man verifizieren wer was bestellt hat, und wer was bezahlt hat!
Diese Infos müssen an Client und Server. Und hier liegt sozusagen der Hase begraben. Ich weiss, wie man in Node Routes erstellt und diese über JavaScript ansprechen kann. POST und GET sind mir Begrifflichkeiten mit denen ich umgehen kann.
Trotzdem fehlt mir das Wissen wie ich auf dem Server Infos schieben kann.
Praktisch von einer Route zur nächsten.
Hier mein Code:
Node:
//JavaScript:
Ich denke am besten wäre es für mich wenn man mir einfach sagt wo ich Beispiele zu meinen Problematiken finde.
PayPal habe ich schon rauf und runter gesucht. Dabei stoße ich immer wieder auf Sackgassen oder irgendetwas funktioniert doch nicht so wie ich es mir gedacht habe.
Jeder Fortgeschrittene Programmierer der sich den Code durchliest, könnte auffallen, dass ich ein Anfänger bin. Manchmal sind Lösungen kompliziert und man muss das dann so hinnehmen. Ich hoffe auf möglichst leicht begreifliche Lösungsansätze bzw. Tipps.
Außerdem bin ich für wirklich jeden Kommentar dankbar.
LG
T.
ich muss in meinem Studium eine Website erstellen.
Es muss einen wirtschaftlichen Hintergrund haben und daher habe ich mich dazu entschieden eine Webseite zu gestalten, auf der man Getränke bestellen kann. Das ist zumindest der Hintergrundgedanke.
Ich habe mit node.js bzw. VisualStudio einen Expressserver eingerichtet. Dort existieren gewisse Routen die es ermöglichen, dass die Seite nur geladen wird, wenn der Server läuft. So beuge ich Bestellungen vor, die abgesetzt werden wenn der Laden normalerweise zu hätte. Die Seite holt sich via JS alle bestellbaren Inhalte und die zugehörigen Preise.
Kommen wir zum eigentlichen Problem:
Was ehrlichgesagt nicht nur ein Problem, sondern gleich mehrere sind.
Problemchen numero 1:
Ich sende dem Server (node.js Express) die Tischnummer und die Bestellung zu.
und erhalte folgenden Output:
Nun muss aber eigentlich bevor die Bestellung an den Server geht bezahlt werden.
-> Ich muss also die Infos von meiner Bestellseite zu meiner Bezahlseite bekommen.
Entweder ich gebe die Infos im Browser mit oder ich
-> Ich muss die Möglichkeit implementieren mit PayPal zu zahlen
Scheinbar ist da mehr dahinter als einfach nur ein paar PayPal Buttons einzubinden.
-> Ich muss eine Art #Code generieren. Anhand dieser Nummer kann man verifizieren wer was bestellt hat, und wer was bezahlt hat!
Diese Infos müssen an Client und Server. Und hier liegt sozusagen der Hase begraben. Ich weiss, wie man in Node Routes erstellt und diese über JavaScript ansprechen kann. POST und GET sind mir Begrifflichkeiten mit denen ich umgehen kann.
Trotzdem fehlt mir das Wissen wie ich auf dem Server Infos schieben kann.
Praktisch von einer Route zur nächsten.
Hier mein Code:
Node:
Code:
'use strict';
var express = require('express');
var router = express.Router();
const { body, validationResult } = require('express-validator');
const parseJson = require('parse-json');
const liste =
[
{ name: "CubaLibre", preis: "6.80" },
{ name: "AprilShower", preis: "7.80" },
{ name: "BermudaRose", preis: "7.20" },
{ name: "Caipirinha", preis: "6.90" },
{ name: "Cosmopolitan", preis: "8.80" },
{ name: "Daiquiri", preis: "9.80" },
{ name: "Test", preis: "1.00" }
];
/* GET users listing. */
router.get('/', function (req, res)
{
res.send(liste) //Sendet die Liste an die Website
});
// POST
router.post('/', function (req, res) {//erhält die bestellung
//var bestellung = JSON.parse(req.body.testkey);
var bestellung = req.body;
var validations = [];
var validation = false;
var legit = false;
console.log(bestellung);
//neu
var listenMap = liste.map(function (listenelement) {
if (listenelement.preis > 0) {
var info = {
"name": listenelement.name,
"preis": listenelement.preis
}
return info;
}
});
// console.log("map:");
//console.log(listenMap);
//schleife
//namen abgleichen
//preis der Namen abgleichen
//entscheiden ob gut oder schlecht
for (var i = 0; i < bestellung.length; i++) {
for (var j = 0; j < listenMap.length; j++) {
if (bestellung[i].name == listenMap[j].name) {
if (bestellung[i].preis == listenMap[j].preis) {
validation = true;
validations.push(validation);
}
else {
validation = false;
validations.push(validation);
}
}
}
}
//sobald ein boolean Wert aus dem Array false ist, wird eine Fehlermeldung zurückgesendet.
for (var k = 0; k < validations.length; k++) {
if (validations[k] == false) {
legit = false;
}
else {
legit = true;
}
}
res.send(legit);
});
module.exports = router;//JavaScript:
HTML:
let help=false;
let anzeige=false;
let bestellMap=new Map();
function setup()
{
//Fragebutton
let button=document.getElementById("fragebutton");
button.addEventListener("click", openExplainBox);
//bestellbutton
let bestellButton=document.getElementById("bestellbutton");
bestellButton.addEventListener("click", abschicken);
getListFromServer2();
getTischeFromServer();
}
function openExplainBox()
{
if(help===false)
{
let divbox=document.getElementById("Anleitung");
let newArticle=document.createElement("article");
let articleText=document.createTextNode("Tippe auf den Namen des Cocktails um mehr über die Zutaten oder den Preis zu erfahren!");
let articleText2=document.createTextNode(" Der Gesamtpreis wird dir am unteren Bowserrand angezeigt");
let articleText3=document.createTextNode(" Um die Bestellung einzusehen drücke auf den weissen Pfeil über dem Bestellen Button...");
newArticle.appendChild(articleText);
newArticle.appendChild(articleText2);
newArticle.appendChild(articleText3);
divbox.appendChild(newArticle);
newArticle.setAttribute("id","helpArticle");
divbox.setAttribute("visibility","visible");
help=true;
}
else {
let article=document.getElementById("helpArticle");
article.parentNode.removeChild(article);
help=false;
}
}
function calcPrice(element)
{
let gesamtpreis=0.00;
let betrag=0.00;
let drinkname="";
let drinknameArray=[];
let drinkpreisArray=[];
let stepper;
let listenElement;
let p,txt,span,div;
//keine doppelten Werte in der Liste;
bestellMap.clear();
//markierten Checkoxen druchlaufen
for(let i=0; i<document.liste.length;i++)
{
if(document.liste.elements[i].checked)//wenn eine checkbox markiert ist:
{
listenElement = document.liste.getElementsByTagName('li')[i];
betrag=document.liste.elements[i].value;
drinkname=document.liste.elements[i].name;
//AnzahlElement erstellen:
checkbox=document.liste.elements[i];
//jeder Drink der gecheckt ist wird in die Map eingefügt
bestellMap.set(drinkname, betrag); //bestelldrink in die Map einfügen
Number(betrag).toFixed(2); //Zahl und Nachkommastellen gerundet
gesamtpreis=parseFloat(gesamtpreis).toFixed(2);
gesamtpreis=parseFloat(gesamtpreis) + parseFloat(betrag);//berechnung für das Gesamtausgabefeld
//muss überarbeitet werden!
gesamtpreis=gesamtpreis.toFixed(2); //runden
}
}
//ausgabe gesamtPreis zur kontrollle
//Zuweisung der allg. Ausgabe
let flexpeis=document.getElementById("flexpreis");
let ausgabe=document.getElementById("gesamtpreis");
flexpreis.innerHTML=gesamtpreis + " €";
ausgabe.innerHTML=gesamtpreis+ " €";
}
function ausklappen()//klappt den Infoteil aus welcher die Seite erklärt
{
var p, txt,title,
div = document.getElementById("bestellteDrinks");
if(anzeige==false)
{
div.replaceChildren("");
//Elemente erzeugen
for(var [key, value] of bestellMap.entries())
{
p=document.createElement("p");
txt= document.createTextNode(key + "----------------"+ value);
p.appendChild(txt);
p.setAttribute("class","bestellungsListe")
div.appendChild(p);
div.setAttribute("border-color","white");
anzeige=true;
}
}
else {
div.replaceChildren("");
anzeige=false;
}
}
//wenn bestellen gedrückt wird
function abschicken()//sobald der User den Button bestellen drückt
{
// neueSeite();
let bestJSON,resonseJSON;
let jsonObject = {};
let jsonArray=[];
for (let [key, value] of bestellMap) {
jsonObject={name: key, preis: value};
jsonArray.push(jsonObject);
}
console.log("Liste des Clients:")
console.log(jsonArray);
responseJSON=postData(url='http://localhost:1337/drinklist',jsonArray); //Verbindung mit Server aufbauen und die drinkliste speichern
responseJSON.then(function(response) { //.then chaining um promise zu verarbeiten / neue FUnktion weil asynchron
return response.text();
}).then(function(data) { //.then chaining
console.log(data); //um einen String zu erhalten
if(data=='true')
{
neueSeite();
}
else {
console.log("Manipulation liegt vor");
}
});
var tischnummer=document.getElementById("tisch");
var tobject = {tischnummer: tischnummer.value};
postData(url='http://localhost:1337/tische', tobject);
/*
//neuer Code
fetch("http://localhost:1337/drinklist", {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
//make sure to serialize your JSON body
body: JSON.stringify({
name: myName,
password: myPassword
})
})
.then( (response) => {
//do something awesome that makes the world a better place
});
*/
}
async function postData(url, data)//postFunktion
{
const response= await fetch(url, {
method: 'POST',
headers: { "Content-type": "application/json" },
body: JSON.stringify(data)
});
return response;
//was erhalte ich zurück?
//wo GENAU muss das festgelegt werden
}
function strMapToJson(strMap) {
return JSON.stringify(strMap);
}
function neueSeite()
{
var body,div,ul,li,txt,gesamtpreis=0.00;
var form,input1,input2,input3,img,formende,alleStrings;
var ppb=document.getElementById("paypal-bezahlen");
body=document.getElementById("body");
body.replaceChildren("");
body.setAttribute("background-color","black");
div=document.createElement("div");
div.setAttribute("class","BestellungNewPage");
body.appendChild(div);
ul=document.createElement("ul");
ul.setAttribute("list-style-type","none");
div.appendChild(ul);
li=document.createElement("li");
txt=document.createTextNode("Ihre Bestellung")
li.appendChild(txt);
li.setAttribute("id","bestellkopf");
ul.appendChild(li);
ppb.style.visibility="visible";
for(var [key, value] of bestellMap.entries())
{
li=document.createElement("li");
txt=document.createTextNode(key + " : " + value +" €");
li.appendChild(txt);
ul.appendChild(li);
value=parseFloat(value);
gesamtpreis=parseFloat(gesamtpreis);
gesamtpreis=parseFloat(gesamtpreis) + parseFloat(value);
//muss überarbeitet werden!
gesamtpreis=gesamtpreis.toFixed(2);
}
txt=document.createTextNode("Endpreis: " + gesamtpreis +" €");
li=document.createElement("li");
li.appendChild(txt);
ul.appendChild(li);
li.setAttribute("id","endsumme");
document.getElementById("endsumme");
}
function getTischeFromServer()
{
fetch ("http://localhost:1337/tische").then (function (response) {
return response.json();
}).then (function (data) {
appendData (data.anzahl);
}).catch (function (error) {
console.log ("error: " + error);
});
function appendData(data)
{
var select=document.getElementById("tisch");
for(var i=1;i<data;i++)
{
var option=document.createElement("option");
option.innerHTML=i;
select.appendChild(option);
}
}
}
function getListFromServer2() {
fetch ("http://localhost:1337/drinklist").then (function (response) {
return response.json();
}).then (function (data) {
appendData (data);
}).catch (function (error) {
console.log ("error: " + error);
});
function appendData (data) {
let liste, checkbox, txtNde,ul;
for (let i=0; i<data.length; i++)
{
liste=document.createElement("li");
checkbox=document.createElement("input");
txtNde=document.createTextNode(data[i].name);
ul=document.getElementById("getraenkeliste");
liste.setAttribute("class","Listenpunkt");
checkbox.setAttribute("name",data[i].name);
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("value",data[i].preis);
checkbox.setAttribute("onclick","calcPrice(this)");
checkbox.setAttribute("class","getraenk");
liste.appendChild(txtNde);
liste.appendChild(checkbox);
ul.appendChild(liste);
/* <li class="Listenpunkt">Cuba Libre <input type="checkbox" name="CubaLibre" id="getraenk1" value="6.80" onclick="calcPrice(this)" class="getraenk"> </li>*/
console.log(data[i].name + " : " + data[i].preis);
}
}
}
window.addEventListener("load", setup);Ich denke am besten wäre es für mich wenn man mir einfach sagt wo ich Beispiele zu meinen Problematiken finde.
PayPal habe ich schon rauf und runter gesucht. Dabei stoße ich immer wieder auf Sackgassen oder irgendetwas funktioniert doch nicht so wie ich es mir gedacht habe.
Jeder Fortgeschrittene Programmierer der sich den Code durchliest, könnte auffallen, dass ich ein Anfänger bin. Manchmal sind Lösungen kompliziert und man muss das dann so hinnehmen. Ich hoffe auf möglichst leicht begreifliche Lösungsansätze bzw. Tipps.
Außerdem bin ich für wirklich jeden Kommentar dankbar.
LG
T.
Zuletzt bearbeitet von einem Moderator:
