User Registration Form with PHP and MySQL Tutorial

-



Copy the code and getting started with the form

index.html

<link href="//db.onlinewebfonts.com/c/a4e256ed67403c6ad5d43937ed48a77b?family=Core+Sans+N+W01+35+Light" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="form.css" type="text/css">
<div class="body-content">
  <div class="module">
    <h1>Create an account</h1>
    <form class="form" action="form.php" method="post" enctype="multipart/form-data" autocomplete="off">
      <div class="alert alert-error"></div>
      <input type="text" placeholder="User Name" name="username" required />
      <input type="email" placeholder="Email" name="email" required />
      <input type="password" placeholder="Password" name="password" autocomplete="new-password" required />
      <input type="password" placeholder="Confirm Password" name="confirmpassword" autocomplete="new-password" required />
      <div class="avatar"><label>Select your avatar: </label><input type="file" name="avatar" accept="image/*" required /></div>
      <input type="submit" value="Register" name="register" class="btn btn-block btn-primary" />
    </form>
  </div>
</div>

style.css

*{  
  margin:0;
  padding:0;
}

h1 {
  font-size: 2em;
  font-family: "Core Sans N W01 35 Light";
  font-weight: normal;
  margin: .67em 0;
  display: block;
}

#registered {
    margin-top: 50px;
}

#registered img {
    margin-bottom: 0px;
    width: 100px;
    height: 100px;
}

#registered span {
    clear: both;
    display: block;
}

img {
    margin-bottom: 20px;
}

.avatar {
    margin: 10px 0 20px 0;
}

.module{
  position:relative;
  top:10%;    
  height:65%;
  width:450px;
  margin-left:auto;
  margin-right:auto;
}

.user {
    color: #66d8fc;
    font-weight: bold;
}

.userlist {
    float:left;
    padding: 30px;
}

.userlist span {
    color: #0590fc;
}

.welcome{
  position:relative;
  top:30%;    
  height:65%;
  width:900px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 50px;
}

::-moz-selection {
  background: #19547c;
}
::selection {
  background: #19547c;
}
input::-moz-selection {
  background: #037db6;
}
input::selection {
  background: #037db6;
}

body{
  color: #fff;
  background-color:#f0f0f0;
  font-family:helvetica;
  background:url('http://clevertechie.com/img/bnet-bg.jpg') #0f2439 no-repeat center top;
}

.body-content{
  position:relative;
  top:20px;
  height:700px;
  width:800px;
  margin-left:auto;
  margin-right:auto; 
  background: transparent;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"]
{
  height:30px;
  width:100%;;
  display: inline-block;
  vertical-align: middle;
  height: 34px;
  padding: 0 10px;
  margin-top: 3px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 2px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-transition: background-position 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  transition: background-position 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
select:hover,
textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border: 2px solid;
  border-color: #1e5f99;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}
.btn {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 3px 0;
  padding: 6px 20px;
  font-size: 15px;
  line-height: 20px;
  height: 34px;
  background-color: rgba(0, 0, 0, 0.15);
  color: #00aeff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 rgba(0, 0, 0, 0);
  border-radius: 2px;
  -webkit-transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
  transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn.active,
.btn:active {
  padding: 7px 19px 5px 21px;
}
.btn.disabled:active,
.btn[disabled]:active,
.btn.disabled.active,
.btn[disabled].active {
  padding: 6px 20px !important;
}
.btn:hover,
.btn:focus {
  background-color: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 rgba(0, 0, 0, 0);
}
.btn:active,
.btn.active {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.5);
}
.btn-primary {
  background-color: #098cc8;
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 0 rgba(0, 0, 0, 0);
  border-radius: 2px;
  -webkit-transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
  transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
  background-image: -webkit-linear-gradient(top, #0f9ada, #0076ad);
  background-image: linear-gradient(to bottom, #0f9ada, #0076ad);
  border: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #21b0f1;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 0 rgba(0, 0, 0, 0);
}
.btn-primary:active,
.btn-primary.active {
  background-color: #006899;
  color: rgba(255, 255, 255, 0.7);
  border-color: transparent;
  box-shadow: inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.5);
}
.btn-primary:hover,
.btn-primary:focus {
  background-image: -webkit-linear-gradient(top, #37c0ff, #0097dd);
  background-image: linear-gradient(to bottom, #37c0ff, #0097dd);
}
.btn-primary:active,
.btn-primary.active {
  background-image: -webkit-linear-gradient(top, #006ea1, #00608d);
  background-image: linear-gradient(to bottom, #006ea1, #00608d);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
.btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.alert {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 4px 20px 4px 20px;
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 20px;
  text-shadow: none;
  position: relative;
  background-color: #272e3b;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #363d49 inset, 0 5px 10px rgba(0, 0, 0, 0.75);
}
.alert-error {
  color: #f00;
  background-color: #360e10;
  box-shadow: 0 0 0 1px #551e21 inset, 0 5px 10px rgba(0, 0, 0, 0.75);
}
.alert:empty{
    display: none;
}
.alert-success {
  color: #21ec0c;
  background-color: #15360e;
  box-shadow: 0 0 0 1px #2a551e inset, 0 5px 10px rgba(0, 0, 0, 0.75);
}

Click on the form to see the code.


  • Create a database name as 'accounts'
  • Create a table as 'users' then columns: id(int)(auto_increment), username(varchar_100), email(varchar_100), password(varchar_100), avatar(varchar_100)

form.php

<?php
session_start();
$SESSION['message'] = '';

$mysqli = new mysqli('localhost', 'root', '', 'accounts');

if($_SERVER['REQUEST_METHOD'] == 'POST'){

//two passwords are equal to each other
if($_POST['password'] == $_POST['confirmpassword']){

//print_r($_FILES);

$username = $mysqli->real_escape_string($_POST['username']);
$email = $mysqli->real_escape_string($_POST)['email'];
$password = md5($_POST['password']);//md5 hash password security
$avatar_path = $mysqli->real_escape_string('images/'.$_FILES['avatar']['name']);

//make sure file type is image
if(preg_match("!image!", $_FILES['avatar']['type'])){

//copy image to images/ folder
if (copy($_FILES['avatar']['tmp_name'], $avatar_path))
{
$_SESSION['username'] = $username;
$_SESSION['avatar'] = $avatar_path;

$sql = "INSERT INTO users (username, email, password, avatar) VALUES ('$username', '$email', '$password', '$avatar_path')";

//if the query is successful, redirect to welcome.php page, done!
if ($mysqli->query($sql) === true) {
$_SESSION['message'] = "Registration successful! Added $username to the database!";
header("location: welcome.php");
}
else {
$_SESSION['message'] = "User could not be added to the database!";
}
}
else{
$_SESSION['message'] = "File upload failed!";
}
}
else {
$_SESSION['message'] = "Please only upload GIF, JPG, or PNG images!";
}
}
else {
$_SESSION['message'] = "Two Password do not match";
}
}
?>

<link href="//db.onlinewebfonts.com/c/a4e256ed67403c6ad5d43937ed48a77b?family=Core+Sans+N+W01+35+Light" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="form.css" type="text/css">
<div class="body-content">
  <div class="module">
    <h1>Create an account</h1>
    <form class="form" action="form.php" method="post" enctype="multipart/form-data" autocomplete="off">
      <div class="alert alert-error"><?= $_SESSION['message'] ?></div>
      <input type="text" placeholder="User Name" name="username" required />
      <input type="email" placeholder="Email" name="email" required />
      <input type="password" placeholder="Password" name="password" autocomplete="new-password" required />
      <input type="password" placeholder="Confirm Password" name="confirmpassword" autocomplete="new-password" required />
      <div class="avatar"><label>Select your avatar: </label><input type="file" name="avatar" accept="image/*" required /></div>
      <input type="submit" value="Register" name="register" class="btn btn-block btn-primary" />
    </form>
  </div>
</div>

welcome.php

<link rel="stylesheet" href="form.css">

<?php session_start(); ?>
<div class="body content">
<div class="alert alert-success"> <?= $_SESSION['message'] ?></div> 
<span class="user"><img src="<?= $_SESSION['avatar'] ?>"></span>
Welcome <span class="user"><?= $_SESSION['username'] ?></span>

<?php
$con = new mysqli('localhost', 'root','','accounts');
$sql = "SELECT username, avatar FROM users";
$result = $con->query($sql); //$result = mysqli_result object
?>

<div id="registered">
<span>All registered users</span>
<?php
while($row = $result->fetch_assoc()){
/*echo '<prev>';
print_r($row);
echo '</prev>';*/

echo "<div class='userlist'><span>$row[username]</span><br/>";
echo "<img src='$row[avatar]'></div>";
}
?>
</div>

Comments

Post a Comment

Popular posts from this blog

Tang Maphi _ Lyrics_DJ Wanshan ft. Kyntiewlin Mawphniang

-
Image
Song name: 'Tang Maphi' Artist: DJ Wanshan ft. Kyntiewlin Mawphiang Language: Khasi [Verse 1] Naduh Nyngkong Ki sngi  Phi thaba kum jingshai.. ka sngi.. Haba nga peit ia phi.. Mynsiem ka kmen.. Ha phi jingieid nga shem.. [Pre-Chorus] Ngam poi pyrkhat jingieid jong ngi Ka wan rah jingkyrmen Haduh kine ki sngi La bun ki jingeh ngin mad Ha jingiaid.. lynti  Hynrei ki jingkular ki nang skhem bad phi [Chorus] Tang Ha phi.. mynsiem ka kmen Tang maphi ba lah ban ai.. Jingtngen Tang ha phi.. nga shaniah skhem Da lah dohnuh baroh [Verse 2] La ha jynjar shitom Bad phi ngan don ryngkat... Junom Tang bad phi mynsiem ka hun Ym don shuh kum ma phi.. Ha jingim jong nga [Pre-Chorus] Ngam poi pyrkhat jingieid jong ngi Ka wan rah jingkyrmen Haduh kine ki sngi La bun ki jingeh ngin mad Ha jingiaid.. lynti  Hynrei ki jingkular ki nang skhem bad phi [Chorus] Tang Ha phi.. mynsiem ka kmen Tang maphi ba lah ban ai.. Jingtngen Tang ha phi.. nga shaniah skhem Da lah dohnuh baroh Download Lyrics i...
Read more

Khasi Catholic Hymns Lyrics

-
Image
Hello I am glad to take a chance to produce A little to say 'Gospel lyrics In Khasi', Please bear with with me if I make any mistake. I hope my effort will helpful to you. Read Here Let me know in the comment below if there is any correction to be made.
Read more

How to connect HTML Register Form to MySQL Database with PHP (2020)

-
Image
 Youtube Videos How to connect HTML Register Form to MySql Database with PHP form.php <!DOCTYPE html> <html> <head> <title>Register Form</title> </head> <body> <form action="insert.php" method="POST"> <table> <tr> <td>Name: </td>  <td><input type="text" name="username" required></td> </tr> <tr> <td>Password :</td> <td><input type="password" name="password" required></td> </tr> <tr> <td>Gender :</td> <td> <input type="radio" name="gender" value="m" required>Male <input type="radio" name="gender" value="f" required>Female </td> </tr> <tr> <td>Email :</td> <td><input type...
Read more