Login panel și forget password system realizat de Rațiu Raul

Despre programarea aplicațiilor web și nu numai, cu PHP, baze de date și altele.
Discutiile despre utilizarea si modificarea scripturilor se desfasoara in aria Webmaster.
Discuțiile despre proiectarea și optimizarea bazelor de date se desfășoară în aria Databases.
Deconectat
Avatar utilizator
Ing.Alex
Nivel 1
Nivel 1
Mesaje: 58
Membru din: 29 Sep 2015
Status: Sunt bine mersi ^.^
Mulțumiri acordate: 0
Mulțumiri primite: 3

Login panel și forget password system realizat de Rațiu Raul

Mesajde Ing.Alex » 15 Mar 2016, 13:12

În acest articol am să vă prezint un panou Login și forget system (Sample) realizat de Rațiu Raul.

Prezentare:

login
Imagine
forget

Imagine

Să revenim la codurile utilizate pentru realizarea acestui panou.

index.html

Cod: Selectaţi tot

<html>
<head>
<title>Login by Ratiu Raul</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<meta charset="utf-8" />
</head>

<body>
<div class="container">
<img src="images/login_icon.png" />
<form action="login.php" method="POST">
<div class="login-id">
<input type="text" name="username" placeholder="Username"/>
</div>

<div class="login-pw">
<input type="password" name="password" placeholder="Password"/>
</div>
<input type="submit" name="Login" value="Login" class="btn-login"/>
</form>
<a href="forget.html" class="forget">Forget password?</a><br>
</div>
</body>


Login.php

Cod: Selectaţi tot

<?php
$localhost = "";
$user = "";
$pass = "";
$db = "user";

$select = mysql_connect($localhost, $user, $pass, $db) or die ("Error mysql can't connect".mysql_error());
mysql_select_db($db);
if(isset($_POST["Login"]))
{
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT * FROM user WHERE username='$username' && password='$password'";
$res = mysql_query($sql);
if(mysql_num_rows($res) == 1){
echo "Login succesfuly";
}else{
echo "No, try again.";
}

}

?>


Forget.html

Cod: Selectaţi tot

<html>
<head>
<title>Login by Ratiu Raul</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<meta charset="utf-8" />
</head>

<body>
<div class="container">
<img src="images/login_icon.png" />
<form action="forget.php" method="POST">
<div class="email-id">
<input type="text" name="email" placeholder="Email"/>
</div>
<input type="submit" name="Reset" value="Reset" class="btn-login"/>
</form>
</div>
</body>
</html>

Forget.php

Cod: Selectaţi tot

<?php
$localhost = "";
$user = "";
$pass = "";
$db = "user";

$select = mysql_connect($localhost, $user, $pass, $db) or die ("Error mysql can't connect".mysql_error());
mysql_select_db($db);
if(isset($_POST["Reset"]))
{
$email = $_POST['email'];
$sql = "SELECT * FROM user WHERE email='".$email."'";
$sql1 = mysql_query($sql);
$test = mysql_num_rows($sql1);
if($test != 0)
{
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*_";
$password = substr( str_shuffle( $chars ), 0, 8 );
mysql_query("UPDATE user SET password='$password' WHERE email='$email'");
echo "Your new password is:" .$password;
}else{
echo "Email doesn't exits";
}
}
?>


Partea css vine cu font, "FontAwesome" icon le găsiți la download.

main.css

Cod: Selectaţi tot

body{
margin: 0px auto;
background-image:url(../images/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.container{
width: 40%;
height: 50%;
background-color: rgba(0, 81, 119, 0.4);
text-align:center;
margin: 0px auto;
margin-top:10%;
border-radius: 7px;
}
.container img{
width: 100px;
height:100px;
margin-top:-5%;
}
input{
border:none;
border-radius: 5px;
height:10%;
width:40%;
margin-bottom:20px;
padding-left:5%;
}
input:focus{
box-shadow: 0px 0px 1px 1px rgb(0, 255, 255);
}
.login-id::before{
content: "\f007";
position: absolute;
color: rgba(0, 81, 119, 0.5);
font-family: "FontAwesome";
font-size: 20px;
padding-top:5px;
padding-left:3px;

}
.login-pw::before{
content: "\f023";
position: absolute;
color: rgba(0, 81, 119, 0.5);
font-family: "FontAwesome";
font-size: 20px;
padding-top:5px;
padding-left:3px;

}
.btn-login{
margin-top:10px;
width: 15%;
padding: 5px;
color: #fff;
background-color: rgba(0, 81, 119, 0.5);
border-radius: 5px;
border: none;
border-bottom: 3px solid rgb(0, 81, 119);

}
.forget{
font-family:Georgia, "Times New Roman", Times, serif;
color:#fff;
font-size:14px;
}
.email-id::before{
content: "\f0e0";
position: absolute;
font-family: "FontAwesome";
font-size: 20px;
padding-left: 3px;
padding-top: 5px;
}




Testare panou: Trebuie să fii logat sau înregistrat pentru a vedea acest link.

Vă rugăm să scanaţi întotdeauna fişierele pe care le descărcaţi cu VirusTotal.

Deconectat
Avatar utilizator
K3nnTy
Utilizator interzis !
Utilizator interzis !
Mesaje: 55
Membru din: 19 Mar 2016
Localitate: Sibiu
Status: Ok
Server Metin2: LKWD
Mulțumiri acordate: 7
Mulțumiri primite: 1
Contact:

Re: Login panel și forget password system realizat de Rațiu

Mesajde K3nnTy » 20 Mar 2016, 10:44

Frumos pacat ca e prea simplu
Imagine

Deconectat
Avatar utilizator
Ing.Alex
Nivel 1
Nivel 1
Mesaje: 58
Membru din: 29 Sep 2015
Status: Sunt bine mersi ^.^
Mulțumiri acordate: 0
Mulțumiri primite: 3

Re: Login panel și forget password system realizat de Rațiu

Mesajde Ing.Alex » 20 Mar 2016, 15:07

K3nnTy scrie:Frumos pacat ca e prea simplu

Asta era și ideea să se facă legatura de login la ce doriți DVS, nu e mare lucru.

Deconectat
Avatar utilizator
andreeas12345
Nou Venit
Nou Venit
Mesaje: 36
Membru din: 17 Mar 2016
Localitate: Craiova
Mulțumiri acordate: 0
Mulțumiri primite: 1

Re: Login panel și forget password system realizat de Rațiu

Mesajde andreeas12345 » 24 Mar 2016, 13:26

Frumos


Înapoi la “Tutoriale scripting”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 0 vizitatori