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
- 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
7topics - Login Demo
-written by Rahul Ranjan
First Name:
Last Name:
Email:
Username:
Password:
Copyright © 2015 7topics.com
Username:
Password:
Copyright © 2015 7topics.com
Copyright © 2014-2020 7topics.com
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
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
Chủ Đề