Notes
Notes - notes.io |
CREATING USER PROFILE PAGE USING PHP AND MYSQL
5th Jan, 2020 Rahul Ranjan 0 Comment
Creating user profile Page using PHP and Mysql
In previous article, we learnt 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 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 below steps.
Creating main page.
Giving style to 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 a main page(index.php). We will create two forms i.e 'Registration Form' and 'Login Form'. You can see script to be used for 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 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 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 © 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 © 2015 7topics.com</div>
</div>
</div>
</div>
</div>
<div id="footer"><p> Copyright © 2014-2020 7topics.com </p></div>
</body>
</html>
2. Giving style to 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 data submission process, we need to make connection to database. create a new file named as 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 registration form of main page, we added an action file(execute.php). This file will be used to process user input and store it in 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");
}
}
?>
6. Processing login form.
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
<h1 align='center'>Welcome <?php echo $loggedin_session; ?>,</h1>
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 © 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 © 2014-2015 7topics.com </p></div>
</body>
</html>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
