Waszym zadaniem jest stworzyć system logowania do witryny. Witryna ma składać się minimum z dwóch stron: witaj.html oraz loguj.php
Musicie utworzyć bazę danych o nazwie LOGOWANIE z jedną tabelą UŻYTKOWNICY, w której znajdą się następujące pola: id, imie, login, password.
Wypełnić tabelę danymi (minimum 5 rekordów), wśród których musi się znaleźć rekord: id - 1, imie - Jan, login - janek, password - 123abc.
Strona witaj.html musi posiadać formularz wysyłający treści do dokumentu loguj.php metodą niejawną z polami: tekstowym LOGIN, hasłowym HASŁO oraz do wysyłania ZALOGUJ.
Na stronie loguj.php należy wykonać połączenie z bazą danych z parametrami: serwer - localhost, użytkownik - root, hasło - bez hasła, baza danych - LOGOWANIE. Wysłać do bazy zapytanie wybierające z tabeli UŻYTKOWNICY imie, login i password. Pobrać do tablicy wartości zwrócone przez zapytanie. Na końcu skryptu ma nastąpić zamknięcie połączenia z bazą danych.
Jeżeli dane wpisane w formularzu będą zgadzały się z danymi pobranymi z bazy, ma się pojawić pod formularzem napis w kolorze niebieskim: Witaj imie! Jesteś zalogowany :)
Jeżeli dane wpisane w formularzu nie będą zgadzały się z danymi pobranymi z bazy, ma się pojawić pod formularzem napis w kolorze czerwonym: Podałeś błędny login lub hasło :(
Całe formatowanie treści ma być zrealizowane w arkuszu styl-log.css.
Wygląd strony i ewentualne dodatkowe strony pozostawiam Wam do własnej inwencji!
---
Po wykonaniu powyższego zadania proszę wykonać prezentację multimedialną omawiającą wszystkie sposoby pobierania danych z bazy danych do dokumentu PHP włączając w to połączenie z bazą, jej zamknięcie, a także wysłanie zapytania do bazy.
Prezentacja ma posiadać wyjaśnienia i omówienia wszystkich metod wstawiania poleceń PHP zobrazowanych zrzutami z wykonanego wcześniej zadania logowania - możecie tam próbkowo zastosować każdą z metod pobierania danych z bazy.
Musicie utworzyć bazę danych o nazwie LOGOWANIE z jedną tabelą UŻYTKOWNICY, w której znajdą się następujące pola: id, imie, login, password.
Wypełnić tabelę danymi (minimum 5 rekordów), wśród których musi się znaleźć rekord: id - 1, imie - Jan, login - janek, password - 123abc.
Strona witaj.html musi posiadać formularz wysyłający treści do dokumentu loguj.php metodą niejawną z polami: tekstowym LOGIN, hasłowym HASŁO oraz do wysyłania ZALOGUJ.
Na stronie loguj.php należy wykonać połączenie z bazą danych z parametrami: serwer - localhost, użytkownik - root, hasło - bez hasła, baza danych - LOGOWANIE. Wysłać do bazy zapytanie wybierające z tabeli UŻYTKOWNICY imie, login i password. Pobrać do tablicy wartości zwrócone przez zapytanie. Na końcu skryptu ma nastąpić zamknięcie połączenia z bazą danych.
Jeżeli dane wpisane w formularzu będą zgadzały się z danymi pobranymi z bazy, ma się pojawić pod formularzem napis w kolorze niebieskim: Witaj imie! Jesteś zalogowany :)
Jeżeli dane wpisane w formularzu nie będą zgadzały się z danymi pobranymi z bazy, ma się pojawić pod formularzem napis w kolorze czerwonym: Podałeś błędny login lub hasło :(
Całe formatowanie treści ma być zrealizowane w arkuszu styl-log.css.
Wygląd strony i ewentualne dodatkowe strony pozostawiam Wam do własnej inwencji!
---
Po wykonaniu powyższego zadania proszę wykonać prezentację multimedialną omawiającą wszystkie sposoby pobierania danych z bazy danych do dokumentu PHP włączając w to połączenie z bazą, jej zamknięcie, a także wysłanie zapytania do bazy.
Prezentacja ma posiadać wyjaśnienia i omówienia wszystkich metod wstawiania poleceń PHP zobrazowanych zrzutami z wykonanego wcześniej zadania logowania - możecie tam próbkowo zastosować każdą z metod pobierania danych z bazy.
1)Stwórz plik o nazwie login z rozszerzeniem php, a następnie wklej tam poniższy kod:
<?php
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
$conn = mysqli_connect("localhost", "root", "", "LOGOWANIE");
if($conn->connect_errno) {
die('Nie można połączyć się z bazą danych: '.$conn->connect_error);
}
$query = "SELECT * FROM użytkownicy WHERE login = ? AND password = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows === 1) {
$row = $result->fetch_assoc();
$imie = $row['imie'];
session_start();
$_SESSION['username'] = $username;
$_SESSION['imie'] = $imie;
echo '<h1 style="color:blue;">Witaj, '. $imie.' '.'jesteś zalogowany!</h1>';
exit();
} else {
echo '<h1 style="color:red;">Podałeś błędny login lub hasło :(</h1>';
}
$stmt->close();
mysqli_close($conn);
?>
2)Stwórz plik o nazwie witaj z rozszerzeniem .html, a następnie wklej tam poniższy kod
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styl.css">
<title>Logowanie html</title>
</head>
<body>
<div class="box">
<h1>Zarejestruj się</h1>
<form action="login.php" method="post">
<label for="login">LOGIN</label>
<input type="text" name="username" class="text" required>
<br>
<label for="pass">HASŁO</label>
<input type="password" name="password" class="text" required>
<input type="submit" value="Wyślij">
</form>
</div>
</body>
</html>
3)Stwórz plik o nazwie styl z rozszerzeniem css i wklej tam poniższy kod
body {
background-color: rgb(41, 41, 41);
height: 100vh;
}
.box {
background-color: grey;
width: 60%;
height: 60%;
margin-top: 20%;
margin-left: 20%;
text-transform: uppercase;
color: white;
border: 5px white solid;
border-radius: 3%;
}
.box h1 {
text-align: center;
font-size: 500%;
}
label {
margin-left: 30%;
margin-top: 30%;
font-size: 200%;
font-family: Source Sans Pro;
margin-left: 45%;
}
input[type='submit'] {
font-family: 'Ubuntu', sans-serif;
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
width: 170px;
height: 40px;
line-height: 1;
font-size: 18px;
font-weight: bold;
letter-spacing: 1px;
border: 3px solid #8c82fc;
background: #fff;
color: #8c82fc;
border-radius: 40px;
cursor: pointer;
overflow: hidden;
transition: all 0.35s;
}
.text {
display: block;
width: 360px;
margin: 0 auto;
padding: 10px 5px;
border: 1px solid silver;
outline: 5px solid #ebebeb;
font-size: 22px;
}