Strona logowania do bazy SQL w HTML

Rejestracja:około 8 lat
Ostatnio:około 2 lata
Postów:43

0

Hej. Obstawiam, że to banał ale potrzebuje wskazówek na start :)
Zrobiłem w HTML strone logowania do bazy
index.html:

Kopiuj

<!DOCTYPE html>
<html lang="pl" >

	<head>
		<meta charset="UTF-8">
		<title>NazwaStrony</title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<div class="login-page">
			<div class="form">
				<form class="login-form">
					<h1 class="tekst-form">NazwaStrony</h1>
					<input type="text" name="login" id="login" placeholder="LOGIN"/>
					<input type="password" name"haslo" id="haslo" placeholder="HASŁO"/>
					<button id="logbtn" >ZALOGUJ</button>
				</form>
			</div>
		</div>
 
	</body>

</html>

style.css

Kopiuj

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  font-family: "Roboto", sans-serif;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 15px 45px 45px 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
  border-radius: 2px;
}
.form tekst{
  font-family: "Roboto", sans-serif;
  outline: 0;
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 2px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #448AFF;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
}
.form button:hover,.form button:active,.form button:focus {
  background: #2962FF;
}
body {
  background: #82B1FF;
}

W bazie mam tabelę "uzytkownicy" składającą się z kolumn id, login, hasło.
po podaniu pasującej pary login-hasło wyświetla się snackbar z informację, że zalogowano do bazy lub gdy wpiszemy zły login/hasło, że nie zalogowano bo zły login/hasło. Standard ;)
I na razie tylko tyle :) Oczywiście bierzemy pod uwagę zabezpieczenie tego skryptu.

teraz pytania :)
Czy da się połączyć tego html z PHP? (myślę, że tak ale nie mam pewności ;) )
Czy po klknięciu buttona da się wyświetlić snackbar-a? (komponent material design lite w javascript https://getmdl.io/components/index.html#snackbar-section )

Jak się za to zabrać? Może znacie jakąś stronę, tutorial... cokolwiek...

kate87

2018-03-12 13:51

kate872018-03-12 13:51

Rejestracja:ponad 15 lat
Ostatnio:ponad 3 lata

0

Poszukaj przykładowego pliku z polaczeniem do bazy w php i tam w head dodajesz namiar na ten plik w znacznikach <?php plik.php />

Marcin.Miga

2018-03-12 13:54

Marcin.Miga2018-03-12 13:54

Rejestracja:prawie 17 lat
Ostatnio:12 dni
Postów:2792

1

Jak wpisałem w google php login database sample dostałem ok. 3,7 MILIONÓW stron

Marcin.Miga 2018-03-12 13:55

Dla example zamiast sample było ponad 4,4 :)

piotr156

2018-03-12 14:18

piotr1562018-03-12 14:18

Rejestracja:około 8 lat
Ostatnio:około 2 lata
Postów:43

0

No nie wpadłem na to żeby wpisać w google i dostać 3,7 mln wyników. Będę szukał.
To może spytam o łączenie HTML, PHP i JavaScript. Da się. Nie da. Da ale nie robić...

cerrato

2018-03-12 14:47

cerrato2018-03-12 14:47

Moderator Kariera

Rejestracja:około 7 lat
Ostatnio:około 3 godziny
Lokalizacja:Poznań
Postów:8805

1

łączenie HTML, PHP i JavaScript. Da się. Nie da. Da ale nie robić...

Jak najbardziej się da i jak najbardziej robić.

W sumie to większość stron, które oglądasz właśnie działa w oparciu o ten zestaw (albo ich "odpowiedniki").

PHP działa po stronie serwera i odpowiada za generowanie strony, którą ogląda użytkownik. Zadaniem PHP jest także (między innymi) komunikacja z serwerem SQL.
HTML odpowiada za prezentowanie treści użytkownikowi. Innymi słowy - PHP z punktu poprzedniego "wypluwa" do przeglądarki HTML - czyli to, co powoduje, że użytkownik widzi to, co widzi
JavaScript odpowiada za interaktywność po stronie przeglądarki. Nie ma on dostępu do danych trzymanych na serwerze (z wyjątkiem sytuacji, w której używasz AJAX'a), operuje tym, co zostało do użytkownika przesłane wcześniej (oraz robi różne inne rzeczy - np. walidacja formularzy przed ich wysłaniem, animowane gwiazdki latające po ekranie, różnego rodzaju działania które mają miejsca po interwencji użytkownika - np. "pojawienie" się treści akapitu po kliknięciu na nagłówku)

kate87

2018-03-12 15:55

kate872018-03-12 15:55

Rejestracja:ponad 15 lat
Ostatnio:ponad 3 lata

1

W kodzie HTML normalnie stosujesz PHP. Javascript musi być otoczony znacznikami <script> </script> Jak chcesz użyć PHP możesz powiedzmy w divie w którym chcesz użyć tego php wpisać tak jak wcześniej napisałam <?php ?> i w środku kawałek kodu który ma działać na podstronie.

krzychu82a

2018-03-12 15:57

krzychu82a2018-03-12 15:57

Rejestracja:ponad 10 lat
Ostatnio:około 5 godzin
Lokalizacja:Małopolska
Postów:646

0

zainteresuj sie najpierw jak stworzyc baze danych

polecam darmowy serwis friko.pl

a pozniej w php trzeba skorzystac z takich funkcji

mysql_connect();

mysql_select_db();

mysql_query();

PS

a najlepiej obsluge bazy_danych robic na WinForms w C#

edytowany 4x, ostatnio: krzychu82a 2018-03-12 16:26

kacperek 2018-03-12 16:31

friko.pl - Zachęcamy aby w okresie wypowiedzenia pobrać z Serwisu potrzebne użytkownikom materiały, gdyż po dniu 31 marca 2018 roku żadne hostowane materiały nie będą dostępne.

axelbest 2018-03-12 21:35

Jak komuś takie funkcje jak mysql_query polecasz to chyba dobrych 5 lat nie programowales w phpie

piotr156

2018-03-13 07:19

piotr1562018-03-13 07:19

Rejestracja:około 8 lat
Ostatnio:około 2 lata
Postów:43

0

Dzięki za zainteresowanie :)
o tym, że mysql_ jest "przeterminowane" zdążyłem się już dowiedzieć ;)

ok, za radą aby szukać w googlach zrobiłem coś takiego:

Kopiuj


<!doctype html>
<html>
  <head>
    <title>NazwaStrony</title>
    <meta charset="utf-8" />
	<link rel="stylesheet" href="style.css">
  </head>
    <form action="index2.php" method="post">
		<div class="login-page">
			<div class="form">
				<form class="login-form">
					<h1 class="tekst-form">NazwaStrony</h1>
					<input type="text" name="login" placeholder="LOGIN"/>
					<input type="password" name="haslo" placeholder="HASŁO"/>
					<button type="submit" name="logowanie" >ZALOGUJ</button>
				</form>
			</div>
		</div>
    </form>
      
  <?php
    if (!isset($_POST['login']) || !isset($_POST['haslo'])) exit;
    $login=trim($_POST['login']);
    $haslo=trim($_POST['haslo']);
    if (empty($login) || empty($haslo)) 
    {
      echo 'Brak loginu lub hasła!';
      exit;
    }
    @ $baza=new mysqli("xxx","xxx","xxx","xxx");
    if (mysqli_connect_errno())
    {
      echo 'Brak połączenia z MySQL!';
      exit;
    }
    $haslo=sha1($haslo);
    $zapytanie="select * from uzytkownicy where login='$login' and haslo='$haslo'";
    $wynik=$baza->query($zapytanie);
    $ile_znaleziono=$wynik->num_rows;
    if ($ile_znaleziono>0) echo 'Jesteś zalogowany'; 
    else echo 'Podałeś błędny login lub hasło!';    
    $wynik->free();
    $baza->close();
  ?>
</html>

Zasadnicze pytanie: czy to jest bezpieczny kod?
Jeśli nie to co należałoby zmienić.

Zastanawiam się czy dane do logowania do bazy nie powinny być w osobnym pliku. Czy może to nie ma znaczenia?

cerrato

2018-03-13 09:01

cerrato2018-03-13 09:01

Moderator Kariera

Rejestracja:około 7 lat
Ostatnio:około 3 godziny
Lokalizacja:Poznań
Postów:8805

0

Ja bym zabezpieczył dane przesyłane w ramach zapytania do bazy.
Zwróć uwagę na ten fragment

Kopiuj

$login=trim($_POST['login']);
$haslo=trim($_POST['haslo']);
"select * from uzytkownicy where login='$login' and haslo='$haslo'"

Funkcja TRIM nie zabezpiecza w żaden sposób przesyłanych danych, a jedynie "obcina" pewne fragmenty z początku oraz końca ciągu. W żaden sposób nie zabezpiecza Cię to przed atakiem typu SQL Injection https://pl.wikipedia.org/wiki/SQL_injection.
W podanym linku masz przykładowe sposoby zabezpieczenia, możesz też poszukać w sieci jak można się zabezpieczyć.

Kolejna sprawa - widzę, że przechowujesz hasło w bazie w czystej postaci. Jest to raczej niepożądane - bo w razie włamania/awarii wyciekną Ci loginy oraz hasła. Lepiej jest hasło przechowywać w formie szyfrowanej, a podczas logowania sprawdzenie hasła polega na tym, że w takim sam sposób szyfrujesz hasło podane przez użytkownika, a następnie sprawdzasz czy podane hasło po "przeróbce" pokrywa się ze wzorcem zapisanym w bazie.

Zastanawiam się czy dane do logowania do bazy nie powinny być w osobnym pliku

Wyjaśnij proszę o co Ci chodzi, bo za bardzo nie rozumiem tego pytania

edytowany 1x, ostatnio: cerrato 2018-03-13 09:01

piotr156

2018-03-13 09:16

piotr1562018-03-13 09:16

Rejestracja:około 8 lat
Ostatnio:około 2 lata
Postów:43

0

Hasło jest kodowane w SHA1.

Chodzi mi o ten fragment gdzie są podane adres bazy, uzytkownik, hasło... niezbędne do połączenia z bazą.

Kopiuj

@ $baza=new mysqli("xxx","xxx","xxx","xxx");

cerrato

2018-03-13 09:26

cerrato2018-03-13 09:26

Moderator Kariera

Rejestracja:około 7 lat
Ostatnio:około 3 godziny
Lokalizacja:Poznań
Postów:8805

0

A czemu ma służyć takie wyłączenie fragmentu z logowaniem?
Owszem - na to sens chociażby z tego powodu, że zapewne z bazą będziesz się łączyć wiele razy, więc zamiast to samo pisać w kilku miejscach - wstawiasz tam ten "wydzielony" fragment i masz temat z głowy.
Ale lepiej napisz, dlaczego Ty chcesz to tak rozwiązać? Skąd ten pomysł?

piotr156

2018-03-13 09:46

piotr1562018-03-13 09:46

Rejestracja:około 8 lat
Ostatnio:około 2 lata
Postów:43

0

Nie wiem :) tak się zastanawiam :)
Z PHP mam do czynienia od kilku dni więc jestem totalnie zielony a gdzieś w jakiś tutorialach widziałem takie rozwiązanie, np tu: https://forum.home.pl/threads/piszemy-mini-cms-kurs.310/

tylko w tym poradniku używa mysql_ a to, jak już ktoś zauważył wcześniej jest nieaktualne ;)

Po zalogowaniu będzie się otwierała strona z formularzem dodającym dane do bazy które potem będą eksportowane do JSON (to już dzięki pomocy na forum umiem ;) ) i uzywane przez apkę na Androida.