Beiträge von Sempervivum

Sempervivum

Das habe ich noch nicht richtig verstanden. Was ist mit den verschiedenen Variante für Max?

Sempervivum

Zitat

Meine Frage ist nun ist mein Denkansatz überhaupt richtig und macht man das so?

Definitiv nein. Stell dir nur mal vor, Du willst alle Mitarbeiter auslesen, die älter als 50 sind. Oder in xyz wohnen. Sind alle Mitarbeiter in einer Tabelle ist das SQL ein Einzeiler. Aber wenn es für jeden Mitarbeiter eine getrennte Tabelle gibt?

Sempervivum

Lokal geht, auf dem Server geht nicht - trivialer Fehler mit Groß-/Kleinschreibung? Datei hochgeladen?

Sempervivum

Dieses funktioniert im groben:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
</head>

<body>
    <input id="vname" type="number" name="vname">
    <input id="sendebtn" type="submit" value="senden">
    <!-- In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
    durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript -->
    <div id="app">
        <h1>Statistik</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Wert</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jobs</td>
                    <td>{{stats.jobs}}</td>
                </tr>
                <tr>
                    <td>Economy</td>
                    <td>{{stats.economy}}</td>
                </tr>
                <tr>
                    <td>Damage</td>
                    <td>{{stats.damage}}</td>
                </tr>
                <tr>
                    <td>Odometer</td>
                    <td>{{stats.odometer}}</td>
                </tr>
                <tr>
                    <td>Fuel</td>
                    <td>{{stats.fuel}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // Eventlistener fuer Klick auf Button registrieren
        // Wird der Button geklickt, wird die Funktion getData() aufgerufen
        document.getElementById('sendebtn').addEventListener('click', getData);

        // Code für das Holen der Daten von der API in eine Funktion legen:
        function getData() {
            // Name aus dem Eingabefeld auslesen:
            const name = document.getElementById('vname').value.trim();

            url = 'https://api.vtlog.net/v1/users/' + name + '?idType=vtlog';
            new Vue({
                // Hier wird angegeben, in welchem Container die Daten
                // eingetragen werden sollen:
                el: '#app',
                data() {
                    return {
                        stats: null
                    }
                },
                mounted() {
                    axios
                        .get(url)
                        // das folgende ist eine Kurzschreibweise für eine Funktion
                        // response ist der Eingangsparameter, in diesem Fall
                        // die Antwort vom Server
                        .then(response => (
                            // das was hier unter this.stats eingetragen wird,
                            // ist oben im HTML unter stats verfuegbar
                            this.stats = response.data.response.stats
                        ));
                }
            });
        }
    </script>
</body>

</html>

Alles anzeigen

Unschön ist noch dass beim Laden der Seite die Tabelle mit den Platzhaltern angezeigt wird. Entweder die Tabelle verbergen oder gleich die Abfrage für eine Default-ID ausführen.

Sempervivum

Genau, sieh dir den Code unter "Anwendungsbeispiel" an, den kannst Du relativ leicht auf unseren Fall übertragen:

https://wiki.selfhtml.org/wiki/JavaScrip…endungsbeispiel

Sempervivum

Hier noch zwei Erklärungen, wie das funktioniert:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
    // In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
    // durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript
    <div id="app">
        <h1>Statistik</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Wert</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jobs</td>
                    <td>{{stats.jobs}}</td>
                </tr>
                <tr>
                    <td>Economy</td>
                    <td>{{stats.economy}}</td>
                </tr>
                <tr>
                    <td>Damage</td>
                    <td>{{stats.damage}}</td>
                </tr>
                <tr>
                    <td>Odometer</td>
                    <td>{{stats.odometer}}</td>
                </tr>
                <tr>
                    <td>Fuel</td>
                    <td>{{stats.fuel}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        const userID = 8;
        url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
        new Vue({
            // Hier wird angegeben, in welchem Container die Daten
            // eingetragen werden sollen:
            el: '#app',
            data() {
                return {
                    stats: null
                }
            },
            mounted() {
                axios
                    .get(url)
                    // das folgende ist eine Kurzschreibweise für eine Funktion
                    // response ist der Eingangsparameter, in diesem Fall
                    // die Antwort vom Server
                    .then(response => (
                        // das was hier unter this.stats eingetragen wird,
                        // ist oben im HTML unter stats verfuegbar
                        this.stats = response.data.response.stats
                    ));
            }
        });
    </script>
</body>
</html>

Alles anzeigen

Sempervivum

Zitat

Ok Schade, du hast ja nun die id schon angegeben eigentlich wollte ich dass man diese in einem feld eintragen kann und dann die Statistiken angezeigt werden. Kannst du ja ber später noch erklären

eigentlich hatte ich mir vorgestellt, dass Du das in Eigeniniative selbst hinzu fügen kannst. Informiere dich am besten über Eventlistener und Eingabefelder (input):

https://wiki.selfhtml.org/wiki/JavaScrip…ddEventListener

https://wiki.selfhtml.org/wiki/HTML/Formulare/input

Sempervivum

OK, ich habe es zunächst mal einfach gemacht und nur die stats angezeigt:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
</head>

<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>

    <div id="app">
        <h1>Statistik</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Wert</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jobs</td>
                    <td>{{stats.jobs}}</td>
                </tr>
                <tr>
                    <td>Economy</td>
                    <td>{{stats.economy}}</td>
                </tr>
                <tr>
                    <td>Damage</td>
                    <td>{{stats.damage}}</td>
                </tr>
                <tr>
                    <td>Odometer</td>
                    <td>{{stats.odometer}}</td>
                </tr>
                <tr>
                    <td>Fuel</td>
                    <td>{{stats.fuel}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        const userID = 8;
        url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
        new Vue({
            el: '#app',
            data() {
                return {
                    stats: null
                }
            },
            mounted() {
                axios
                    .get(url)
                    .then(response => (
                        this.stats = response.data.response.stats
                    ));
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Leider habe ich keine Zeit mehr, um Erklärungen zu schreiben. Vielleicht später.

Sempervivum

Die userID kannst Du dynamisch aus einer Variablen in die URL einbauen, z. B. so:

Code

const userID = 8;
url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';

Sempervivum

So etwas kann man auch sehr gut mit Templating bzw. Vorlagen machen. Ich habe da vor einiger Zeit eine Demo mit Vue gemacht:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
</head>

<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>

    <div id="app">
        <h1>Bitcoin Price Index</h1>
        <div v-for="currency in info" class="currency">
            {{ currency.description }}:
            <span class="lighten">
                <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
            </span>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    info: null
                }
            },
            mounted() {
                axios
                    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(response => (this.info = response.data.bpi));
            },
            filters: {
                currencydecimal(value) {
                    return value.toFixed(2)
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Das dürfte kein Problem sein, aber man muss dazu das HTML und CSS sehen, bitte poste es. Und benutze dabei Codetags, das </> in der Werkzeugleiste oben.

Sempervivum

Einfach das PHP-Skript außerhalb des application-Ordners legen?

Sempervivum

Zitat

Ich habe das Gefühl, dass das JavaScript dauerhaft dieses Abfrage macht und nicht stoppt, sofern eine Auswahl getroffen wurde.

Genau das tut es: Du hast bei dem img einen Eventhandler für load registriert. Triggert dieser, weist Du dem Bild das src-Attribut zu und das Bild wird geladen. Ist es fertig geladen, triggert wieder der Eventhandler und weist das src-Attribut zu. Bild wird erneut geladen. Ist es fertig geladen, triggert ...

Wenn ich das richtig sehe, brauchst Du gar keinen Eventhandler sondern musst nur einmal das src-Attribut zuweisen. Dann wird das Bild geladen und alles ist gut.

Sempervivum

Auch kein Problem:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Demo Flexlayout</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            font-family: arial;
        }

        body>*:not(.scroll) {
            flex-shrink: 0;
        }

        .scroll {
            overflow-y: scroll;
            flex: 1;
        }

        header,
        footer {
            font-size: 1.5em;
            align-self: center;
        }

        main {
            text-align: justify;
            display: flex;
            flex-direction: column;
        }

        main>section {
            flex: 1;
        }

        /* Nav */

        nav input {
            display: none;
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-direction: row;
        }

        nav #nav-icon-open,
        nav #nav-icon-close {
            display: none;
        }

        @media screen and (max-width: 600px) {
            header {
                align-self: flex-start;
            }

            nav {
                display: flex;
                align-items: flex-start;
            }

            nav ul {
                display: none;
            }

            nav input:checked~ul {
                display: flex;
                flex-direction: column;
            }

            nav #nav-icon-open {
                display: inline-block;
            }

            nav #nav-icon-close {
                display: none;
            }

            nav input:checked~label #nav-icon-open {
                display: none;
            }

            nav input:checked~label #nav-icon-close {
                display: inline-block;
            }

        }
    </style>
</head>

<body>
    <header>
        <nav>
            <input type="checkbox" id="cbnav">
            <label for="cbnav">
                <i id="nav-icon-open" class="fa fa-bars" aria-hidden="true"></i>
                <i id="nav-icon-close" class="fa fa-times" aria-hidden="true"></i>
            </label>
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="page1.html">Page 1</a>
                </li>
                <li>
                    <a href="page1.html">Page 2</a>
                </li>
                <li>
                    <a href="page1.html">Page 3</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="scroll" id="content">
        <section>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
            tempor invidunt ut labore et dolore magna
            tempor 
            ... gekürzt
        </section>
        <footer>This is the footer</footer>
    </main>
</body>

</html>

Alles anzeigen

Bei wenig Content hängt der Footer am unteren Ende. Bei viel Content verschwindet er nach unten und wird erst beim Scrollen sichtbar.

Sempervivum

Diese Aufgabe tritt häufig auf, ebenso solche Probleme mit der althergebrachten Lösung mit position: fixed;. Statt dessen möchte ich diese Alternative vorstellen:

https://webentwicklung.ulrichbangert.de/flex-scrollable-nav.html

Vorteil: Kein Gefummel mit margin oder padding und das Layout passt sich automatisch an, wenn sich die Höhe der Navigation ändert.

Sempervivum

Glücklicher Weise brauchst Du dieses CSS nicht von Hand umzuschreiben, sondern es gibt Compiler dafür, die das automatisch tun. Einfacher als solch einen Compiler zu installieren, ist für dich wahrscheinlich, einfach Codepen zu verwenden: CSS im CSS-Fenster eintragen, links beim Zahnradsymbol den Präprozessor auswählen, in diesem Fall offenbar LESS, rechts unter dem Pfeil nach unten "View compiled CSS" auswählen, dann wird das CSS kompiliert und heraus kommt dieses:

Code

.glitch {
  font-size: 130px;
  line-height: 1;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: #fff;
}
.glitch:before,
.glitch:after {
  display: block;
  content: "17";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
}
.glitch:after {
  color: #f0f;
  z-index: -2;
}
.glitch:before {
  color: #0ff;
  z-index: -1;
}
.glitch:hover:before {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
@keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
    transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

Alles anzeigen

Sempervivum

Das ist ein bekanntes Problem und lässt sich durch eine Reloadsperre verhindern. Wird z. B. bei Selfhtml beschrieben:

https://wiki.selfhtml.org/wiki/PHP/Tutorials/Reloadsperre

Sempervivum

Hast Du dem Submit-Button auch den Namen gegeben?

Schalte mal die Fehleranzeige ein:

Code

ini_set('display_errors', '1');
error_reporting(E_ALL);

Sempervivum

Und was hat jetzt das Problem gelöst?

Sempervivum

ja, aller Anfang ist schwer und ein Formular, das Daten in die Datenbank einträgt, ist schon eine etwas anspruchsvollere Aufgabe.

Beiträge von Sempervivum

zwei Fragen Formular und GET/POST

zwei Fragen Formular und GET/POST

Babylon-Datei wird auf Webserver nicht gefunden

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zum Logo

Verzeichnisschutz

Webpage lädt dauerhaft nach implementierung von JS

Sticky header und Footer

Sticky header und Footer

Umschreiben von SASS / SCSS in CSS Code

zwei Fragen Formular und GET/POST

zwei Fragen Formular und GET/POST

Aufzählungspunkte Tabulator

zwei Fragen Formular und GET/POST