Strona logowania do bazy SQL w HTML

Odpowiedz Nowy wątek
2018-03-12 14:43
0

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

<!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

@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...

Pozostało 580 znaków

2018-03-12 14:51
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 />

Pozostało 580 znaków

2018-03-12 14:54
1

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

Dla example zamiast sample było ponad 4,4 :) - Marcin.Miga 2018-03-12 14:55

Pozostało 580 znaków

2018-03-12 15:18
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ć...

Pozostało 580 znaków

2018-03-12 15:47
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)

That game of life is hard to play, I'm gonna lose it anyway, The losing card I'll someday lay, So this is all I have to say

Pozostało 580 znaków

2018-03-12 16:55
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.

Pozostało 580 znaków

2018-03-12 16:57
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 17:26
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. - kacperek 2018-03-12 17:31
Jak komuś takie funkcje jak mysql_query polecasz to chyba dobrych 5 lat nie programowales w phpie - axelbest 2018-03-12 22:35

Pozostało 580 znaków

2018-03-13 08:19
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:

 
<!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?

Pozostało 580 znaków

2018-03-13 10:01
0

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

$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


That game of life is hard to play, I'm gonna lose it anyway, The losing card I'll someday lay, So this is all I have to say
edytowany 1x, ostatnio: cerrato, 2018-03-13 10:01

Pozostało 580 znaków

2018-03-13 10:16
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ą.

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

Pozostało 580 znaków

2018-03-13 10:26
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ł?


That game of life is hard to play, I'm gonna lose it anyway, The losing card I'll someday lay, So this is all I have to say

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0