Hướng dẫn php profile page

Question

In the previous article, we learned about “Creating a simple login form using PHP and Mysql” and “Creating a simple registration form using PHP and Mysql“. In this article, we are going to learn how to create a user profile page. User will need to input basic details to register himself and after that same credentials can be used to login. So let us proceed with the below steps.

Nội dung chính Show

1. Creating main page
2. Giving style to the page
3. Connect to database
4. Creating a user table
5. Processing registration form
6. Processing login form.
7. Create user session.
8. Creating welcome/profile page.
9. Process “Sign out” and “Delete Account” button.
How can I see user details in PHP?
How can I see my welcome username in PHP?
What is $row in PHP?
What is a PHP profile?

Nội dung chính

1. Creating main page
2. Giving style to the page
3. Connect to database
4. Creating a user table
5. Processing registration form
6. Processing login form.
7. Create user session.
8. Creating welcome/profile page.
9. Process “Sign out” and “Delete Account” button.
How can I see user details in PHP?
How can I see my welcome username in PHP?
What is $row in PHP?
What is a PHP profile?

Creating main page.
Giving style to the page.
Connect to database.
Creating a user table.
Processing registration form.
Processing login form.
Create user session.
Creating welcome/profile page.
Process “Sign out” and “Delete Account” button.

1. Creating main page

Now firstly we need the main page(index.php). We will create two forms i.e ‘Registration Form’ and ‘Login Form’. You can see the script to be used for the main page given below.

index.php

<?php include "logincheck.php"; ?>
<!DOCTYPE html>
<html>
<head>
 <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <title>7topics - Login Demo</title>
</head>
<body>
<header>
 <nav>
  <ul>
   <li><a href="https://7topics.com">7topics</a></li>
   <li><a href="https://7topics.com/creating-user-profile-page-using-php-and-mysql.html">Tutorial</a></li>
  </ul>
 </nav>
</header>
<div id="center">
<div id="center-set"> -written by Rahul Ranjan 
<div id="signup">
<div id="signup-st">
<div align="center">
<?php
$remarks = isset($_GET['remarks']) ? $_GET['remarks'] : '';
if ($remarks==null and $remarks=="") {
echo ' <div id="reg-head" class="headrg">Register Here</div> ';
}
if ($remarks=='success') {
echo ' <div id="reg-head" class="headrg">Registration Success</div> ';
}
if ($remarks=='failed') {
echo ' <div id="reg-head-fail" class="headrg">Registration Failed!, Username exists</div> ';
}
if ($remarks=='error') {
echo ' <div id="reg-head-fail" class="headrg">Registration Failed! <br> Error: '.$_GET['value'].' </div> ';
}
?>
</div>
<form name="reg" action="execute.php" onsubmit="return validateForm()" method="post" id="reg">
<table border="0" align="center" cellpadding="2" cellspacing="0">
<tr>
<td class="t-1">
<div align="left" id="tb-name">First&nbsp;Name:</div>
</td>
<td width="171">
<input type="text" name="fname" id="tb-box"/>
</td>
</tr>
<tr>
<td class="t-1"><div align="left" id="tb-name">Last&nbsp;Name:</div></td>
<td><input type="text" name="lname" id="tb-box"/></td>
</tr>
<tr>
<td class="t-1"><div align="left" id="tb-name">Email:</div></td>
<td><input type="text" id="tb-box" name="address" /></td>
</tr>
<tr>
<td class="t-1"><div align="left" id="tb-name">Username:</div></td>
<td><input type="text" id="tb-box" name="username" /></td>
</tr>
<tr>
<td class="t-1"><div align="left" id="tb-name">Password:</div></td>
<td><input id="tb-box" type="password" name="password" /></td>
</tr>
</table>
<div id="st"><input name="submit" type="submit" value="Submit" id="st-btn"/></div>
</form>
<div id="reg-bottom" class="btmrg">Copyright &copy; 2015 7topics.com</div>
</div>
</div>
<div id="login">
<div id="login-st">
<form action="" method="POST" id="signin" id="reg">
<?php
$remarks = isset($_GET['remark_login']) ? $_GET['remark_login'] : '';
if ($remarks==null and $remarks=="") {
echo ' <div id="reg-head" class="headrg">Login Here</div> ';
}
if ($remarks=='failed') {
echo ' <div id="reg-head-fail" class="headrg">Login Failed!, Invalid Credentials</div> ';
}
?>
<table border="0" align="center" cellpadding="2" cellspacing="0">
<tr id="lg-1">
<td class="tl-1"><div align="left" id="tb-name">Username:</div></td>
<td><input type="text" id="tb-box" name="username" /></td>
</tr>
<tr id="lg-1">
<td class="tl-1"><div align="left" id="tb-name">Password:</div></td>
<td><input id="tb-box" type="password" name="password" /></td>
</tr>
</table>
<div id="st"><input name="submit" type="submit" value="Login" id="st-btn"/></div>
</form>
<div id="reg-bottom" class="btmrg">Copyright &copy; 2015 7topics.com</div>
</div>
</div>
</div>
</div>
<div id="footer"><p> Copyright &copy; 2014-2020 7topics.com </p></div>
</body>
</html>

2. Giving style to the page

Now we will add up some styles to our form, to give it better look by using external stylesheet ‘style.css‘.

style.css

body,li,ul{
 margin:0px auto;
}
body{
 background-color:#3498DB;
 width:100%;
 font-family:sans-serif;
}
header{
 background-color:#fff;
 width:100%;
 height:55px;
 margin:0px;
}
nav{
 width:100%;
 border-top:5px solid #3498DB;
}
nav ul{
 float:left;
 border-left:6px solid #BDC3C7;
 height:50px;
}
nav a{
 text-decoration:none;
 color:#3498DB;
 padding:10px;
 width:auto;
 font-size:30px;
 font-weight:bold;
 border-right:1px solid #BDC3C7;
 font-family:Gabriola;
 height:50px;
}
nav a:hover{
 color:#fff;
 background-color:#3498DB;
 transition:1s;
}
nav li{
 margin:0;
 padding:0;
 list-style:none;
 float:left;
}

#center{
 margin:0px auto;
 width:95%;
}
#center-set{
 float:left;
 width:100%;
 padding-top:1%;
 padding-bottom:0.5%;
 background-color:#A2DED0;
 border-top:5px solid #3498DB;
}
#signup{
 float:left;
 width:50%;
}
#signup-st,#login-st{
 background-color:#22313F;
 margin:50px;
 border-radius:20px;
 -webkit-box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.85);
}
#reg{
 padding-top:10px;
}
#reg-head,#reg-bottom,#reg-head-fail{
 width:100%;
 text-align:center;
 background-color:#fff;
 font-weight:bold;
}
.headrg{
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 padding-top:12px;
 padding-bottom:12px;
 font-size:22px;
 color:#6C7A89;
}
.btmrg{
 padding-top:5px;
 padding-bottom:5px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
 font-size:18px;
 color:#22313F;
}
#reg-head-fail{
 color:#D35400;
}
#reg-head:hover{
 color:#3498DB;
 transition:1s;
}
#tb-name{
 float:right;
 font-size:20px;
}
#tb-box{
 height:22px;
 width:200px;
}
#st{
 width:100%;
 text-align:center;
 padding-top:30px;
 padding-bottom:10px;
}
#st-btn{
 text-align:center;
 padding:10px 21px 10px 21px;
 background-color:#3498DB;
 border:none;
 color:#fff;
 cursor:pointer;
 font-size:20px;
 font-weight:bold;
}
#st-btn:hover{
 color:#3498DB;
 background:#fff;
 transition:1s;
}
td.t-1{
 float:left;
 width:44%;
 text-align:right;
 color:#C5EFF7;
}
td.t-2{
 float:right;
 width:55%;
}
#lg-1{
 padding:10px;
 float:left;
 width:95%;
}
.tl-1{
 float:left;
 width:40%;
 padding-right:5%;
 text-align:center;
 color:#C5EFF7;
}
.tl-4{
 font-size:17px;
 font-weight:bold;
 text-align:center;
 color:#FDE3A7;
}
#login{
 float:right;
 width:50%;
}
#login-sg{
 margin-top:20%;
}
#footer{
 background-color:#fff;
 width:100%;
 height:50px;
 margin:0px;
 float:left;
 border-top:5px solid #3498DB;
}
#footer p{
 text-align:center;
 font-size:18px;
 font-weight:bold;
 color:#3498DB;
}

3. Connect to database

As we are working with the data submission process, we need to make the connection to the database. create a new file named db.php.

db.php

<?php 
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$con = mysqli_connect($mysql_hostname, $mysql_user, $mysql_password, $mysql_database);
?>

4. Creating a user table

Now we need a table to store user data. You can create table manually or copy and import sql file given below:

member.sql

CREATE TABLE IF NOT EXISTS `member` (
  `mem_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
  `fname` varchar(30) NOT NULL,
  `lname` varchar(30) NOT NULL,
  `address` varchar(100) NOT NULL,
   PRIMARY KEY (`mem_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

5. Processing registration form

In the registration form of the main page, we added an action file(execute.php). This file will be used to process user input and store it in the database.

execute.php

<?php 
session_start();
include('db.php');
$username=$_POST['username'];
$result = mysqli_query($con,"SELECT * FROM member WHERE username='$username'");
$num_rows = mysqli_num_rows($result);
if ($num_rows) {
 header("location: index.php?remarks=failed"); 
}else {
 $fname=$_POST['fname'];
 $lname=$_POST['lname'];
 $address=$_POST['address'];
 $username=$_POST['username'];
 $password=$_POST['password'];
 if(mysqli_query($con,"INSERT INTO member(fname, lname, address,username, password)VALUES('$fname', '$lname','$address', '$username', '$password')")){ 
 header("location: index.php?remarks=success");
 }else{
  $e=mysqli_error($con);
 header("location: index.php?remarks=error&value=$e");  
 }
}
?>

Now we need to match username and password from the data stored in our database using a file ‘logincheck.php‘ .

logincheck.php

<?php
include("db.php");
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST") {
 $username=mysqli_real_escape_string($con,$_POST['username']);
 $password=mysqli_real_escape_string($con,$_POST['password']);
 $result = mysqli_query($con,"SELECT * FROM member");
 $c_rows = mysqli_num_rows($result);
 if ($c_rows!=$username) {
  header("location: index.php?remark_login=failed");
 }
 $sql="SELECT mem_id FROM member WHERE username='$username' and password='$password'";
 $result=mysqli_query($con,$sql);
 $row=mysqli_fetch_array($result);
 $active=$row['active'];
 $count=mysqli_num_rows($result);
 if($count==1) {
  $_SESSION['login_user']=$username;
  header("location: welcome.php");
 }
}
?>

7. Create user session.

We have to create a file named as ‘session.php’ to maintain and check user session to check access rights.

session.php

<?php
include('db.php');
session_start();
$user_check=$_SESSION['login_user'];
$ses_sql=mysqli_query($con,"select username,mem_id from member where username='$user_check'");
$row=mysqli_fetch_array($ses_sql,MYSQLI_ASSOC);
$loggedin_session=$row['username'];
$loggedin_id=$row['mem_id'];
if(!isset($loggedin_session) || $loggedin_session==NULL) {
 echo "Go back";
 header("Location: index.php");
}
?>

8. Creating welcome/profile page.

Now after login we need to send user to welcome page. so let us create a profile page named as ‘welcome.php’.

welcome.php

<?php
 include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
 <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <title>7topics - Login Demo</title>
</head>
<body>
<header>
 <nav>
  <ul>
   <li><a href="https://7topics.com">7topics</a></li>
   <li><a href="https://7topics.com/creating-user-profile-page-using-php-and-mysql.html">Tutorial</a></li>
  </ul>
 </nav>
</header>
<div id="center">
<div id="center-set"> -written by Rahul Ranjan
<h2 align='center'>Welcome <?php echo $loggedin_session; ?>,</h2>
You are now logged in. you can logout by clicking on signout link given below.
<div id="contentbox">
<?php
$sql="SELECT * FROM member where mem_id=$loggedin_id";
$result=mysqli_query($con,$sql);
?>
<?php
while($rows=mysqli_fetch_array($result)){
?>
<div id="signup">
<div id="signup-st">
<form action="" method="POST" id="signin" id="reg">
<div id="reg-head" class="headrg">Your Profile</div>
<table border="0" align="center" cellpadding="2" cellspacing="0">
<tr id="lg-1">
<td class="tl-1"> <div align="left" id="tb-name">Reg id:</div> </td>
<td class="tl-4"><?php echo $rows['mem_id']; ?></td>
</tr>
<tr id="lg-1">
<td class="tl-1"><div align="left" id="tb-name">Username:</div></td>
<td class="tl-4"><?php echo $rows['username']; ?></td>
</tr>
<tr id="lg-1">
<td class="tl-1"><div align="left" id="tb-name">Name:</div></td>
<td class="tl-4"><?php echo $rows['fname']; ?> <?php echo $rows['lname']; ?></td>
</tr>
<tr id="lg-1">
<td class="tl-1"><div align="left" id="tb-name">Email id:</div></td>
<td class="tl-4"><?php echo $rows['address']; ?></td>
</tr>
</table>
<div id="reg-bottom" class="btmrg">Copyright &copy; 2015 7topics.com</div>
</form>
</div>
</div>
<div id="login">
<div id="login-sg">
<div id="st"><a href="logout.php" id="st-btn">Sign Out</a></div>
<div id="st"><a href="deleteac.php" id="st-btn">Delete Account</a></div>
</div>
</div>
<?php 
// close while loop 
}
?>
</div>
</div>
</div>
</br>
<div id="footer"><p> Copyright &copy; 2014-2015 7topics.com </p></div>
</body>
</html>

9. Process “Sign out” and “Delete Account” button.

In profile page we have added two buttons ‘Sign Out‘ and ‘Delete Account‘. Now in order to make it work out. we will add two new pages ‘logout.php‘ and ‘deleteac.php‘. You can see the script displayed below:

logout.php

<?php
session_start();
if(session_destroy()) {
 header("Location: index.php");
}
?>

deleteac.php

<?php
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="contentbox" >
<script type="text/javascript">
function countdown() {
 var i = document.getElementById('timecount');
 if (parseInt(i.innerHTML)<=1) {
  location.href = 'index.php';
 }
 i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
</script>
<?php
$id=$loggedin_id;
$sql="DELETE FROM member WHERE mem_id='$id'";
$result=mysqli_query($con,$sql);
if($result){
 echo " <div align='center'>";
 echo "Account Deleted Sucessfully.";
 echo " <a href='index.php' >Click here</a> to go back. ";
 echo "</div> ";
} elseif(!isset($loggedin_session) || $loggedin_session==NULL) {
 header("Location: index.php");
} else {
 echo "Unable to delete Your Account";
}
?>
</div>
</body>
</html>
</div>

You can check out demo of this tutorial by clicking button below:

View Demo Download Zip

This tutorial was all about creating simple user profile page. The above given Code will display user information after registration and will also allow you to delete user account. Thankyou for reading my tutorial. Give your important feedback below in comment box.

How can I see user details in PHP?

The register. php page asks for the desired username, email, and password of the user, and then sends the entered data into the database, once the submit button is clicked. After this, the user is redirected to the index. php page where a welcome message and the username of the logged-in user is displayed.

How can I see my welcome username in PHP?

You should change this to: $_SESSION['username'] = $myusername; $_SESSION['password'] = $mypassword; Because $myusername and $mypassword refer to the username and password sent to the script from the form data.

What is $row in PHP?

Return Value: Returns an array of strings that corresponds to the fetched row. NULL if there are no more rows in result set. PHP Version: 5+

What is a PHP profile?

PHP Code Performance Profiling A profiler is a tool that measures how some code consumes resources at run-time. It enables to find performance bottlenecks and understand the code's behavior. Blackfire Profiler for PHP enables to profile applications during development, test, staging, and production environments.

programming php Php profile page