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
0

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)

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

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

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