Verwandte Themen

JuliMax158
10.08.2022, 14:50
Login verbessern mit AJAX/PHP?

Ich habe ein Login gebaut. Jenen sollen wir nun ausschließlich mit AJAX verbessern. (Wir dürfen dabei nicht sowas wie JQUERY verwenden. Das wissen fehlt uns aber dafür an meisten. Vielleicht kann jemand mir dabei helfen mein Login umzubauen und zu verstehen was ich mache.

Mein Login-Quelltext:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=phptest', 'root', '');

if(isset($_GET['login'])) {
  $email = $_POST['Email'];
  $passwort = $_POST['Passwort'];

  $statement = $pdo->prepare("SELECT * FROM login WHERE Email = :Email");
  $result = $statement->execute(array('Email' => $email));
  $user = $statement->fetch();

  //Überprüfung des Passworts
  if ($user !== false && password_verify($passwort, $user['Passwort'])) {
    $_SESSION['userid'] = $user['ID'];
    die('Login erfolgreich. Weiter zu <a href="index.php?site=Startseite">internen Bereich</a>');
  } else {
    $errorMessage = "E-Mail oder Passwort war ungültig<br>";
  }

}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>

<?php
if(isset($errorMessage)) {
  echo $errorMessage;
}
?>

<form action="Loginseite.php?login=1" method="post">
  E-Mail:<br>
  <input type="email" size="40" maxlength="250" name="Email" required><br><br>

  Dein Passwort:<br>
  <input type="password" size="40" maxlength="250" name="Passwort" required><br>

  <input type="submit" value="Login">
</form>
</body>
</html>
Computer, HTML, programmieren, JavaScript, AJAX, PHP, Webdesign
3 Antworten
Sktzaag
09.06.2022, 07:06
Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>
Computer, Homepage, HTML, IT, Webseite, programmieren, CSS, JavaScript, Webdesign, Webentwicklung
2 Antworten
BenIEbelt
31.01.2022, 13:47
scroll animation mit javascript?
 window.onscroll = function() {scrollFunction()};
                
                function scrollFunction() {
                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("pic").style.marginTop = "0px";
                    document.getElementById("pic").style.marginLeft = "900px";
                    document.getElementById("pic").style.width = "100px";
                    document.getElementById("pic").style.height = "100px";
                    document.getElementById("h1").style.width = "1003px";
                    document.getElementById("h1").style.height = "60px";
                    document.getElementById("h1").style.marginTop = "0px";
                    document.getElementById("h1").style.textAlign = "center";
                  } else {
                    document.getElementById("pic").style.marginTop = "110px";
                    document.getElementById("pic").style.marginLeft = "800px";
                    document.getElementById("pic").style.width = "200px";
                    document.getElementById("pic").style.height = "200px";
                    document.getElementById("h1").style.width = "250px";
                    document.getElementById("h1").style.height = "50px";
                    document.getElementById("h1").style.marginTop = "195px";
                  }

 Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?

..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?

Sry, bin totaler Anfänger =)

Computer, HTML, programmieren, CSS, JavaScript, Webdesign
2 Antworten
Vanilleschnu241
30.01.2022, 16:15
Webdesigner oder Webentwickler werden?

Hallo, momentan bin ich noch Schülerin und so langsam muss ich mich entscheiden welchen Weg ich für meinen beruflichen Werdegang einschlagen will. Mich haben Computer schon immer fasziniert, hauptsächlich in Sachen Software und konnte mich immer freuen, wenn ich Menschen bei allgemeinen PC-Problemen helfen konnte. Aus diesem Grund habe ich mir lange vorgenommen in Richtung IT zu gehen. Am liebsten wäre es mir, wenn ich mich in dem Beruf ein wenig kreativ austoben könnte, da da nunmal, neben Ordnung/Struktur, meine größte Kompetenz liegt. Ich habe da z.B. an Webentwickler und/oder -designer gedacht, allerdings habe ich große Angst, dass mein logisches Denken, was ja ziemlich wichtig in Sachen Programmieren ist, nicht ausreichen wird (war in Mathe immer nur ein dreier-vierer Typ).

Zu Beginn der 10 Klasse im Gymn. hatte ich Informatik als normalen Grundkurs, wo wir viel mit Java gearbeitet haben. Hatte aber echt Probleme damit klarzukommen, weil es viel logischer zuging, wobei das früher mit HTML (vorher auf Realschule) leichter war.

Ich würde aber ganz gerne beides sein, Webentwickler UND Designer. Würdet ihr mir das raten, was ich mir wünsche, oder sollte ich mich aufgrund meiner Kompetenzen, doch nur auf Webdesigner begrenzen? (Wobei mir da die Sorge aufkommt, dass es ein etwas zu 'unsicherer' Job ist, was ja leider oft so mit kreativen Berufen ist)

Beruf, Schule, Informatik, Webdesign, Webentwicklung, Ausbildung und Studium, Beruf und Büro
5 Antworten
crRaphi
20.11.2021, 19:11
Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.

HTML, Programmierer, programmieren, CSS, Programmiersprache, Webdesign, Visual Studio Code
1 Antwort
MrHibo
06.11.2021, 23:15
Mit Bildern
Einzelne Schriften in HTML Bearbeiten?

Hallo,

ich habe vor kurzem begonnen eine Website mit HTML zu programmieren, dazu nutze ich Visual Studio Code, aber ich mache das ganz noch nicht so lange, also kenne ich mich noch nicht so gut aus. Zurzeit versuche ich eine Tabelle mit verschiedenen Raritäten zu erstellen. Dazu soll z.B. "Rare" einen blauen Rahmen bekommen, so ähnlich wie in Bild 1 zusehen.

Ich habe schon versucht es zu schaffen, dennoch habe ich bisher nur hinbekommen um alles einen Rahmen zu kreieren.

Meine Frage ist nun, wie man das individuell anpassen kann. So brauche ich die Rahmen nur bei den Namen der Raritäten und diese sollen jeweils eine eigene Farbe haben (z.B. "Rare" = blau, "Epic" = Violett usw.). Außerdem soll der Rahmen genau passen. So ist es bei mir oben so, dass es für "Uncommon" passt, aber für "Epic" viel zu groß ist. Meine Skills in HTML reichen bisher nur die Rahmen für alle zu machen. Ich habe den Style so gemacht:

CSS:

table tr td
{
  font-size: 1.2em;
  background: #fff;
  color: black;
  border-radius: 20px;
  padding: 4px 10px;
}

Vermutlich nicht besonders gut, aber da hoffe ich auf eure Hilfe 😅 Falls es euch etwas hilft, schreib' ich hier noch ein Beispiel hin, wie ich die Tabelle gemacht habe (das Richtige ist natürlich länger)

HTML:

<table>
  <thead>
    <tr>
      <th>Eyes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td>
      <td>23.99%</td>
      <td>Common</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
Bild zum Beitrag
Computer, HTML, programmieren, CSS, Webdesign, Visual Studio Code
5 Antworten

Meistgelesene Beiträge zum Thema Webdesign
Mehr meistgelesene Fragen zu Webdesign