• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Datenbank oder JSON

C

Christian_01

Mitglied
Einen wunderschönen guten Abend meine Damen und Herren,

ich bin gerade dabei eine Speisekarte zu erstellen. Habe bis jetzt nur die Vorspeisen eingefügt. Der Code sieht wie folgt aus:
Code: 
<!DOCTYPE html>
<html lang="">
<head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title></title>
                <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
                <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
                <link rel="stylesheet" href="css/Speisekarte.css">
</head>

<body id="SpeiseBody">

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftEins">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEins" aria-expanded="true" aria-controls="collapseEins">
          <h5>Salate und Baquettes</h5>
        </a>
      </h4>
    </div>
    <div id="collapseEins" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftEins">
      <div class="panel-body">
          
           <h4>frischer, hausgemachter Salat</h4>

          <table class="table table-hover" id="Salattabelle">
              <tr>
                  <th class="Nummer"><h5>1</h5></th>
                  <th class="Gericht"><h5>Gemischter Salat</h5></th>
                  <th class="Beschreibung"><h6>Gurke, Tomate, Paprika, Salat, Zwiebeln, Mais</h6></th>
                  <th class="Preis"><h5>5,00€</h5></th>
              </tr>

              <tr>
                  <th class="Nummer"><h5>2</h5></th>
                  <th class="Gericht"><h5>Chef-Salat</h5></th>
                  <th class="Beschreibung"><h6>Gurke, Tomate, Paprika, Salat, Zwiebeln, Mais, Kochschinken, Käse, Ei</h6></th>
                  <th class="Preis"><h5>6,00€</h5></th>

              </tr>

              <tr>
                  <th class="Nummer"><h5>3</h5></th>
                  <th class="Gericht"><h5>Thunfischsalat</h5></th>
                  <th class="Beschreibung"><h6>Gurke, Tomate, Paprika, Salat, Zwiebeln, Mais, Kochschinken, Käse, Thunfisch</h6></th>
                  <th class="Preis"><h5>6,00€</h5></th>

              </tr>

              <tr>
                  <th class="Nummer"><h5>4</h5></th>
                  <th class="Gericht"><h5>Bauernsalat</h5></th>
                  <th class="Beschreibung"><h6>Gurke, Tomate, Kraut, Perperoni, Oliven, Zwiebeln, Tzatziki, Feta</h6></th>
                  <th class="Preis"><h5>6,00€</h5></th>

              </tr>

              <tr>
                  <th class="Nummer"><h5>5</h5></th>
                  <th class="Gericht"><h5>Fitness-Salat</h5></th>
                  <th class="Beschreibung"><h6>Salat mit Tomaten, Gurke, Paprika, Mais, Coroutons und gebratener Hähnchenbrutst</h6></th>
                  <th class="Preis"><h5>6,50€</h5></th>

              </tr>

              <tr>
                  <th class="Nummer"><h5>6</h5></th>
                  <th class="Gericht"><h5>Tomatensalat</h5></th>
                  <th class="Beschreibung"><h6>mit Feta und Zwiebeln</h6></th>
                  <th class="Preis"><h5>5,00€</h5></th>

              </tr>

              <tr>
                  <th class="Nummer"><h5>7</h5></th>
                  <th class="Gericht"><h5>100-km-Salat</h5></th>
                  <th class="Beschreibung"><h6>gemischter Salat, Mais, Paprika, Feta, Thunfisch und Gouda</h6></th>
                  <th class="Preis"><h5>6,00€</h5></th>

              </tr>

              <tr>
                  <th class="Nummer" style="border-bottom: 1px solid black;"><h5>8</h5></th>
                  <th class="Gericht" style="border-bottom: 1px solid black;"><h5>Tomaten-Mozarella-Salat</h5></th>
                  <th class="Beschreibung" style="border-bottom: 1px solid black;"><h6></h6></th>
                  <th class="Preis" style="border-bottom: 1px solid black;"><h5>5,00€</h5></th>

              </tr>

              <tr>
                  <th class="Nummer"></th>
                  <th class="Gericht"><h5>Extras für Salat</h5></th>
                  <th class="Beschreibung"><h6>Feta, Ei, Kraut, Gouda</h6></th>
                  <th class="Preis"><h5>0.50€</h5></th>
              </tr>

              <tr>
                        <th class="Nummer"></th>
                        <th class="Gericht"></th>
                        <th class="Beschreibung"><h6>Thunfisch</h6></th>
                        <th class="Preis"><h5>1,00€</h5></th>
              </tr>
          </table>
          
      <h4>Knusprige Baquettes mit knackigen Salat</h4>
    
  <table class="table table-hover" id="Baquettetabelle">

    
      <tr>
          <th class="Nummer"><h5>10</h5></th>
          <th class="Gericht"><h5>Tomaten-Mozzarella</h5></th>
          <th class="Beschreibung"><h6>Dressing und Salat</h6></th>
          <th class="Preis"><h5>5,00€</h5></th>
      </tr>

      <tr>
          <th class="Nummer"><h5>11</h5></th>
          <th class="Gericht"><h5>Baquette Salami</h5></th>
          <th class="Beschreibung"><h6>Tomate, Salami, Käse, Dressing, Salat</h6></th>
          <th class="Preis"><h5>5,00€</h5></th>
      </tr>
      
      <tr>
          <th class="Nummer"><h5>12</h5></th>
          <th class="Gericht"><h5>Baquette Kochschinken</h5></th>
          <th class="Beschreibung"><h6>Tomate, Kochschinken, Käse, Dressing, Salat</h6></th>
          <th class="Preis"><h5>5,00€</h5></th>
      </tr>
      
      <tr>
          <th class="Nummer"><h5>13</h5></th>
          <th class="Gericht"><h5>Baquette Thunfisch</h5></th>
          <th class="Beschreibung"><h6>Zwiebeln, Käse, Dressing, Salat, Thunfisch</h6></th>
          <th class="Preis"><h5>5,00€</h5></th>
      </tr>
      
      <tr>
          <th class="Nummer"><h5>14</h5></th>
          <th class="Gericht"><h5>Baquette Hawaii</h5></th>
          <th class="Beschreibung"><h6>Kochschinken, Ananas, Käse, Dressing, Salat</h6></th>
          <th class="Preis"><h5>5,00€</h5></th>
      </tr>
      
      <tr>
          <th class="Nummer"><h5>15</h5></th>
          <th class="Gericht"><h5>Baquette Special</h5></th>
          <th class="Beschreibung"><h6>Tomate, Salami, Feta, Zwiebeln, Tzatziki, Käse, Salat</h6></th>
          <th class="Preis"><h5>5,50€</h5></th>
      </tr>
      
      <tr>
          <th class="Nummer" style="border-bottom: 1px solid black;"><h5>16</h5></th>
          <th class="Gericht" style="border-bottom: 1px solid black;"><h5>Gyrosbaquette</h5></th>
          <th class="Beschreibung" style="border-bottom: 1px solid black;"><h6>Pfannengyros, Zwiebeln, Tzatziki, Käse</h6></th>
          <th class="Preis" style="border-bottom: 1px solid black;"><h5>6,00€</h5></th>
      </tr>
      
      <tr>
          <th class="Nummer"><h5></h5></th>
          <th class="Gericht"><h5>Extras für Baquette</h5></th>
          <th class="Beschreibung"><h6>mit Kräuterbutter</h6></th>
          <th class="Preis"><h5> 3,00€</h5></th>     
      </tr>
      
        <tr>
          <th class="Nummer"><h5></h5></th>
          <th class="Gericht"><h5></h5></th>
          <th class="Beschreibung"><h6>jedes halbe Baquette</h6></th>
          <th class="Preis"><h5> -2,00€</h5></th>     
      </tr>
    </table>
                    
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

      </div>
      </div>
    </div>
    </div>
    
</body>
</html>

Der Code wird später in die Index.html via .load mit Jquery hereingeladen.
Meine Frage nun, ist es sinnvoller das ganze mit einer JSON-Datei oder über eine Datenbank zu realisieren zugunsten der Performance? Oder habt ihr noch ganz andere Vorschläge?

Ich freue mich jetzt auf eure Antworten.

Gruß Christian
 
Werbung:
JSON ist lediglich ein Datenformat. Insofern lautet die Antwort: Datenbank plus JSON und am besten kein jQuery. In deinem Code stehen bereits rund 180 Zeilen Markup. Wenn du deren Content mit jQuery befüllst, kommt gefühlt fast nochmal so viel zusammen. Verwende lieber ein modernes Framework wie Angular, welches die Daten per For-Schleife im HTML rendern kann. Das benötigt nur einen Bruchteil des Codes.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben