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.
Avatar utilizator
Ing.Alex
Nivel 1

Nivel 1
Mesaje: 54
Membru din: 29 Sep 2015, 19:37
Aprecieri: 0
Mulţumiri: 3  
Medalii

Î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: http://www.ratiuraul.ro/proiecte/login
Avatar utilizator
K3nnTy
Mister Just4Metin

Mister Just4Metin
Mesaje: 52
Membru din: 19 Mar 2016, 18:41
Server: LKWD
Aprecieri: 3  
Mulţumiri: 1  
 Contact:
Medalii

Frumos pacat ca e prea simplu
Imagine
Afișează semnătura
Avatar utilizator
Ing.Alex
Nivel 1

Nivel 1
Mesaje: 54
Membru din: 29 Sep 2015, 19:37
Aprecieri: 0
Mulţumiri: 3  
Medalii

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.
Răspunde
Răspunsuri
5
Vizualizări
2002
Răspunsuri
1
Vizualizări
982
Răspunsuri
12
Vizualizări
2891

Înapoi la “Tutoriale scripting”

  • Informaţie
  • Cine este conectat

    Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator