Ergebnis 1 bis 2 von 2
  1. #1
    triceps ist offline Grünschnabel
    registriert
    01-02-2021
    Beiträge
    1

    Angry Verständnisproblem , Kommunikation zwischen Webseiten/Routing/Server

    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:

    { name: 'AprilShower', preis: '7.80' },
    { name: 'BermudaRose', preis: '7.20' }
    ]
    POST /drinklist 200 24.129 ms - 4
    5
    5 //Tischnummer
    POST /tische 200 2.121 ms - 23
    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-Code:
    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.
    Drinklist.PNG
    Geändert von mikdoe (02-02-2021 um 10:45 Uhr) Grund: Code Tags

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Verständnisproblem , Kommunikation zwischen Webseiten/Routing/Server

    Hi!
    Ein sehr umfangreiches Posting. Ich habe das mal ein bisschen strukturiert und in das richtige Unterforum verschoben. Es ist node.js im Spiel wenn ich das richtig gesehen habe.
    Vorab: Paypal als Händler geht m. W. nur indem du dich bei denen als Händler anmeldest: https://www.paypal.com/de/webapps/mpp/merchant-fees
    Da gibt es keinen Opensource like Standard Code für ein paar Buttons. Die wollen ja auch Geld verdienen und zu den reichsten 5 Personen der Erde gehören...

    Zu deinem Projekt an sich: du schreibst oben von Problemen und zeigst meterlange Code Ausschnitte. Um dir zu helfen müsste das jemand lesen, die fehlenden Teile dazu improvisieren und entweder im Kopf ablaufen lassen oder bei sich nachbauen. Das geht auch bei geübten Codern nicht anders. Man muss es ja erst lesen, um es zu interpretieren.
    Ich kenne niemanden, der dafür die Zeit hat. Dies ist ein kostenfreies Forum.

    Die Chance auf Antworten erhöht sich raketenartig, wenn du konkrete Einzelfragen stellst.
    Und bei Code Sachen sollte der Code soweit eingedampft werden, dass der Fehler noch nachzustellen ist. Man stellt dann optimalerweise ein jsfiddle ein und verlinkt das hier. Dann kann da jeder ein bisschen rumtüddeln bis es gelöst ist.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

Ähnliche Themen

  1. Antworten: 14
    Letzter Beitrag: 24-01-2013, 23:03
  2. Hilfe bei Kommunikation zwischen Client und Apache Server
    Von thesteven2705 im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 14-08-2012, 16:53
  3. Antworten: 1
    Letzter Beitrag: 12-02-2012, 11:36
  4. Kommunikation zwischen zwei Popups
    Von ColaLight im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 22-03-2011, 11:12
  5. Kommunikation zwischen verschiedenen Fenstern
    Von ray_ray im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 20-10-2006, 12:35

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •