[Tutorial] Creating a basic user control panel
#1

Introduction

Hi all,
After one-two week if finshed my UCP, most of it learn from phpAcademy (On *******, visit the!)
and I decide to make tutorial on this forum because I see a lot of people need it! It's pretty easy, just a few steps...
Let's start!


Features
  • Login form
  • Showing user stats
  • Logout form
Starting our user control panel

First of all, be sure that you have XAMPP (Or WAMP, I use XAMPP) and create in htdocs folder called eq. ucp
In that folder we will creat our files!



Page Name: config.php
Use: Connecting to MySQL server and selecting the database
Language: PHP

PHP код:
<?php
    $connect 
mysql_connect("localhost""root""") or die("I can't connect to the server!"); //connecting to mysql, change setting if you have to
    
mysql_select_db("sa:mp") or die ("I can't find the database!"); //selecting database, change name to your database name!
    
    
function sanitize($string//function for sanitize from xss and mysql and csrf... Thanks to XFlawless
    

        
$string strip_tags($string); 
        
$string mysql_real_escape_string($string); 
        return 
$string
    }
?>
Page Name: login.php you can also call it index.php if you want just login and showing stats in your ucp...
Use: Creating form for loging user
Language: PHP

PHP код:
<?php
include("config.php"); //including our config.php where is connecting to mysql...
session_start(); //starting session for profile.php (Dunno how to explain better) look little down
error_reporting(0); //without this we will always get some stupid notice that variable isn't defined....
$submit $_POST['submit']; //variable for submit button, in this variable we save button that player press in <input type='submit' name="submit" value='Login' />....
$username sanitize($_POST['username']); //variable for username, in this variable we save text that user type in <input type="text" name="username"....
$password sanitize($_POST['password']); //variable for password, in this variable we save text that user type in <input type="password" name="password"....
if($submit//if he press submit button
{    
    if(
$username && $password//if he type both of username and password not just one of them
    
{
        
$query mysql_query("SELECT username, password FROM users WHERE username = '$username'"); //selecting user name and password, change it to your field names,  chage users to your table name, $username means username that he type...
        
if(mysql_num_rows($query) == 1//if user exists
        
{
            while(
$row mysql_fetch_assoc($query)) //loop thought table that we select in mysql_query
            
{
                
$dbusername $row['username']; //setting dbusername as variable from table, change 'username' to your field!
                
$dbpassword $row['password']; //setting dbpassword as variable from table, change 'password' to your field!
            
}
            if(
$username == $dbusername && $password == $dbpassword//if username is same as one from table and if password is the same as one from table...
            
{
                
$_SESSION['username'] = $dbusername//setting session username to one from table, this is useful if you login, that restart your browser and than you go in url where is your profile.php... Anyway this is useful :D
                
echo header('location: profile.php'); //redirecting user to his profile page (profile.php)
            
}
            else echo 
"Wrong password!"//else if user type wrong password he will get this...
        
}
        else echo 
"Username doesn't exist!"//if username doesn't exist in table user will get this
    
}
    else echo 
"Type name and password!"//else if user doesn't type all fields he will get this...
}
?>
Put this in bottom of login.php!
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic UCP</title>
//here you can add your design (Remove this line)
<form action='login.php' method='POST'> 
<input type="text" name="username" value='<?php echo $username?>'/> 
<input type="password" name="password"/> 
<input type='submit' name="submit" value='Login' /> 
</form>
</head>
</html>
Page Name: logout.php
Use: Logout user
Language: PHP

PHP код:
<?php
include("config.php"); //including our config.php
session_start(); //starting session
session_destroy(); //destroying it
header('location: login.php'); //redirecting user to login.php
?>
Page Name: profile.php
Use: Showing users stats...
Language: PHP

PHP код:
<?php
include("config.php"); //including our config.php
session_start(); //starting session
error_reporting(0);
if(isset(
$_SESSION['username'])) //if session is set, so if user is logged in...
{
    
$username $_SESSION['username']; //setting variable username as one from session
    
$query mysql_query("SELECT * FROM users WHERE username = '$username'");  //selecting all from table users where username is name that your is loged in
    
echo "Welcome ".$_SESSION['username']; //saying welcome to user!
    
while($row mysql_fetch_assoc($query)) //looping thousgt table to get informations
    
{
        
$name $row['username']; //selecting user name, change 'username' to your field name
        
$money $row['money']; //selecting user money, change 'money' to your field name
        
$score $row['score']; //selecting user score, change 'score' to your field name
        
$kills $row['kills']; //selecting user kills, change 'kills' to your field name
        
$deaths $row['deaths']; //selecting user deaths, change 'deaths' to your field name
    
}
    echo 
"<br><br>Name: ".$name."<br> Money: ".$money."<br> Score: ".$score."<br> Kills: ".$kills."<br> Deaths: ".$deaths;
}
else 
header('location: login.php'); //if user isn't loged in it will redirect him on login.php
?>
Put this in bottom of profile.php!
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic UCP</title>
</head>
</html>
Pictures

Ok, here are some pictures of my user control panel...

Login
Profile
Reply
#2

mind if someone tries a sql injection on this?
Reply
#3

Quote:
Originally Posted by Lorenc_
Посмотреть сообщение
mind if someone tries a sql injection on this?
Exactly, use mysql_real_escape_string(); for data you use to run queries with at the very least.
Good tutorial though!
Reply
#4

To be honest, I don't know what it is, so I don't care about that xD
Reply
#5

Quote:
Originally Posted by System64
Посмотреть сообщение
To be honest, I don't know what it is, so I don't care about that xD
You'll care about it if someone erases your entire database, or makes himself admin. I agree it doesn't have to be included in a tutorial but it wouldn't hurt to mention it.

http://en.wikipedia.org/wiki/SQL_injection
Reply
#6

@Sinner:
You mean soemthing liek this
PHP код:
mysql_real_escape_string($username) = $_POST['username']; //variable for username, in this variable we save text that user type in <input type="text" name="username".... 
Reply
#7

Quote:
Originally Posted by System64
View Post
@Sinner:
You mean soemthing liek this
PHP Code:
mysql_real_escape_string($username) = $_POST['username']; //variable for username, in this variable we save text that user type in <input type="text" name="username".... 
Also add htmlentities to avoid XSS injections.
Reply
#8

@TK:
Than it should be:
PHP Code:
htmlentities(mysql_real_escape_string($username)) = $_POST['username']; //variable for username, in this variable we save text that user type in <input type="text" name="username"... 
Reply
#9

Quote:
Originally Posted by System64
Посмотреть сообщение
To be honest, I don't know what it is, so I don't care about that xD
Then you don't care about the community's security and therefore a tutorial like this isn't recommended. Go and look at TheKillers php part in his mysql thread.
Reply
#10

Quote:
Originally Posted by Lorenc_
Посмотреть сообщение
Then you don't care about the community's security and therefore a tutorial like this isn't recommended. Go and look at TheKillers php part in his mysql thread.
I will ask my friend about SQL Injection so I will fix it, thanks for reporting guys
Reply
#11

Very usefull, thank you very much!
Reply
#12

Quote:
Originally Posted by Haxby
Посмотреть сообщение
Very usefull, thank you very much!
Thank you
Tomorrow I'll fix SQL Injection however...
Reply
#13

PHP Code:
$username Sanitize($_POST['username']); 
I have to do that just for username or for password too?

Edit: I've add it, look at the script now, did i do something wrong?
Reply
#14

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic UCP</title>
//here you can add your design (Remove this line)
<form action='login.php' method='POST'>
<input type="text" name="username" value='<?php echo $username?>'/>
<input type="password" name="password"/>
<input type='submit' name="submit" value='Login' />
</form>
</body>
</html>

check the body....
Oh and what about the head?
Reply
#15

Quote:
Originally Posted by timothyinthehouse
View Post
check the body....
Oh and what about the head?
my bad I forgot to close tags... fixed
Reply
#16

PHP Code:
<input type='submit' name="submit" value='Login' /> 
$submit $_POST['submit']; //variable for submit button, in this variable we save button that player press in <input type='submit' name="submit" value='Login' />.... 
Why in the world do you need a submit variable it doesn't store any result

PHP Code:
if($submit//if he press submit button 
{     
    if(
$username && $password//if he type both of username and password not just one of them 
    

        
$query mysql_query("SELECT username, password FROM users WHERE username = '$username'"); //selecting user name and password, change it to your field names,  chage users to your table name, $username means username that he type... 
        
if(mysql_num_rows($query) == 1//if user exists 
        

            while(
$row mysql_fetch_assoc($query)) //loop thought table that we select in mysql_query 
            

                
$dbusername $row['username']; //setting dbusername as variable from table, change 'username' to your field! 
                
$dbpassword $row['password']; //setting dbpassword as variable from table, change 'password' to your field! 
            

            if(
$username == $dbusername && $password == $dbpassword//if username is same as one from table and if password is the same as one from table... 
            

                
$_SESSION['username'] = $dbusername//setting session username to one from table, this is useful if you login, that restart your browser and than you go in url where is your profile.php... Anyway this is useful :D 
                
echo header('location: profile.php'); //redirecting user to his profile page (profile.php) 
            

            else echo 
"Wrong password!"//else if user type wrong password he will get this... 
        

        else echo 
"Username doesn't exist!"//if username doesn't exist in table user will get this 
    

    else echo 
"Type name and password!"//else if user doesn't type all fields he will get this... 

You are doing it the messed way, "SELECT username, password from users WHERE username = {$username} AND password = {$password}" would do it.

PHP Code:
if($username == $dbusername && $password == $dbpassword

       
session_regenerate_id();// create another session id to prevent from session fixation.
       
$_SESSION['username'] = $dbusername// From here it's vulnerable to session fixation.
       
header('location: profile.php'); 

Use Jquery plugins like Flowtools form validator, they are easy to explain and validate form.
Reply
#17

@XFawless - submit because it will always show tyoe name and password

2. Why complicating?
Reply
#18

Quote:
Originally Posted by System64
View Post
@XFawless - submit because it will always show type name and password
Submit attribute in html will forward the input content to form action. There's no need for it. If you are not aware of it better go take some tutorials about it.
Reply
#19

Quote:
Originally Posted by XFlawless
View Post
Submit attribute in html will forward the input content to form action. There's no need for it. If you are not aware of it better go take some tutorials about it.
When I move if submit... It always show type username and password.... when I put it, it doesn't
Reply
#20

This is create on computer or ?

I create on computer and how to upload on web page, where?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)