aleeza/ August 15, 2019/ BOOTSTRAP, HTML & CSS, MYSQL, PHP, PHPMYADMIN/ 0 comments

DEMO: http://aleezadev.com/ichat/signin.php

In this blog I am going to show you how i made my own Chat App using PHP and MySql. I called my chat app- iChat

What we’ll cover:

  • File Structure.
  • Creating iChat pages using PHP, HTML and MySql.
  • Designing Pages using CSS and bootstrap.
  • Setting up Database and tables using PHPMyAdmin.
  • Creating connection for the database and PHP files.

*To download my code from GitHub. Click this link https://github.com/codewithaleeza/iChat

File Structure:

We’ll use this folders & files structure inside our “iChat” folder for our iChat Chat App project.

css folder is for your css files.

Images folder is for images.

Include Folder is for your database connections, gathering data code, and for finding friends function.

Creating HTML/PHP Pages

In this part we will create the Sign in Page. We will put it in a file named as index.php. Below is the html/php codes for the Sign In Page.

signin.php

<!DOCTYPE html>
<html>
<head>
  <title>Log In to your Account</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA Compatible" content="IE=edge">
  <meta name="viewport" content="with=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/signin.css">

</head>
<body>
<div class="signin-form">
    <form action="" method="post">
      <div class="form-header">
        <h2>Sign In</h2>
        <p> Log in to <img src="images/Chat.png" height="20px"> iChat</p>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" name="email" placeholder="someone@ichat.com" autocomplete="off" required>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" name="pass" placeholder="Password" autocomplete="off" required>
      </div>
      <div class="small">Forgot Password? <a href="forgot_pass.php">Click Here</a></div><br>
      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block btn-lg" name="sign_in">Sign In</button>
      </div>
      <div class="text-center small" style="color:#67428B; ">Don't have an account? <a href="signup.php">Create one </a></div>
      </div>


  <?php include("signin_user.php"); ?>
    </form>

</body>
</html>

signin_user.php

<?php
session_start();
include("include/connection.php");

  if(isset($_POST['sign_in'])){
    $email= htmlentities(mysqli_real_escape_string($con,$_POST['email']));
    $pass= htmlentities(mysqli_real_escape_string($con,$_POST['pass']));

    $select_user="select * from users where user_email='$email' AND user_pass='$pass'";
    $query = mysqli_query($con, $select_user);
    $check_user=mysqli_num_rows($query);

    if($check_user==1){
      $_SESSION['user_email']=$email;

      $update_msg=mysqli_query($con, "UPDATE users SET log_in='Online'WHERE user_email='$email'");
      $user= $_SESSION['user_email'];
      $get_user ="select * from users where user_email='$user'";
      $run_user= mysqli_query($con, $get_user);
      $row= mysqli_fetch_array($run_user);

      $user_name=$row['user_name'];

      echo"<script>window.open('home.php?user_name=$user_name','_self')</script>";
    }
    else{
      echo"

      <div class='alert alert-danger'>
        <strong>Check your email and password. </strong>

        </div>
        ";

    }


    }





 ?>

signin.css

body{
  color:#999;
  /* background-image: url(../images/desk.jpg); */
  background: #52c234;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #061700, #52c234);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #061700, #52c234); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: 'Roboto',sans-serif;;
  /* background-size: cover;
  height: 100%;

    /* Center and scale the image nicely */
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
}

.form-control{
  min-height: 41px;
  box-shadow: none;
  border-color: #e1e1e1;

}
.form-control:focus{
  border-color: #00cb82;
}
.form-control, .btn{
  border-radius: 3px;
}
.form-header{
  margin: -30px -30px 20px;
  padding: 30px 30px 10px;
  text-align: center;
  background: green;
  border-bottom: 1px solid #eee;
  color: #fff;
}
.form-header h2{
  font-size: 34px;
  font-weight: bold;
  margin:0 0 10px;
  font-family: 'Pacifico', sans-serif;
}

.form-header p{
  margin:20px 0 15px;
  font-size: 17px;
  line-height: normal;
  font-family: 'Courgette',sans-serif;
}
.signin-form{
  width:400px;
  margin: 0 auto;
  padding: 30px 0;
}
.signin-form form{
  color:#999;
  border-radius: 3px;
  margin-bottom: 15px;
  background: #f0f0f0;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
  padding: 30px;
}
.signin-form label{
  font-weight: normal;
  font-size: 13px;
}
.signin-form .btn{
  font-size: 16px;
  font-weight: bold;
  background: grey;
  border: none;
  min-width: 200px;

}
.signin-form .btn:hover, .signin-form .btn:focus{
  background: green !important;
  outline: none;
}
.signin-form a{
  color: black;
}
.signin-form a:hover{
  text-decoration: underline;
}

This is the code for the forgot password link, as seen in the sign in form.

forgot_pass.php

<!DOCTYPE html>
<html>
<head>
  <title>Log In to your Account</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA Compatible" content="IE=edge">
  <meta name="viewport" content="with=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/signin.css">
</head>
<body>
<div class="signin-form">
    <form action="" method="post">
      <div class="form-header">
        <h2>Forgot Password</h2>
        <p> <img src="images/Chat.png" height="20px"> iChat</p>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" name="email" placeholder="someone@ichat.com" autocomplete="off" required>
      </div>
      <div class="form-group">
        <label>Bestfriend Name</label>
        <input type="text" class="form-control" name="bf" placeholder="Someone" autocomplete="off" required>
      </div>

      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block btn-lg" name="submit">Submit</button>
      </div>
      <div class="text-center small" style="color:#67428B; ">Back to Sign in <a href="signin.php">Click here </a></div>
      </div>
    </form>

<?php
session_start();
include("include/connection.php");

  if(isset($_POST['submit'])){

      $email=htmlentities(mysqli_real_escape_string($con,$_POST['email']));
      $recovery_account=htmlentities(mysqli_real_escape_string($con,$_POST['bf']));

      $select_user= "select * from users where user_email='$email' AND
      forgotten_answer='$recovery_account'";

      $query= mysqli_query($con, $select_user);
      $check_user = mysqli_num_rows($query);

      if($check_user==1){
        $_SESSION['user_email'] = $email;
        echo "<script>window.open('create_password.php','_self')</script>";
      }else{
        echo "<script>alert('Your email or bestfriend name is incorrect. ')</script> ";
        echo "<script>window.open('forgot_pass.php','_self')</script>";

      }


      }



 ?>

</body>
</html>

create_password.php

<!DOCTYPE html>
<html>
<head>
  <title>Log In to your Account</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA Compatible" content="IE=edge">
  <meta name="viewport" content="with=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/signin.css">
</head>
<body>
<div class="signin-form">
    <form action="" method="post">
      <div class="form-header">
        <h2>Create New Password</h2>
        <p>iChat</p>
      </div>

      <div class="form-group">
        <label>Enter Password</label>
        <input type="password" class="form-control" name="pass1" placeholder="Password" autocomplete="off" required>
      </div>
      <div class="form-group">
        <label>Confirm Password</label>
        <input type="password" class="form-control" name="pass2" placeholder="Confirm Password" autocomplete="off" required>
      </div>

      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block btn-lg" name="change">Change Password</button>
      </div>
      <?php
      session_start();
      include("include/connection.php");


        if(isset($_POST['change'])){
            $user = $_SESSION['user_email'];
            $pass1=$_POST['pass1'];
            $pass2=$_POST['pass2'];

            if($pass1 != $pass2){
              echo " <div class='alert alert-danger'>
                    <strong>Your New Password didn't match with Confirm password.</strong>
                      </div>

                  ";
            }

            if($pass1 < 8 AND $pass2 < 8){
            echo " <div class='alert alert-danger'>
                  <strong>Use 8 or more than 8 characters.</strong>
                    </div>

                ";
              }
              if($pass1 == $pass2){
                $update_pass=mysqli_query($con, "UPDATE users SET user_pass='$pass1' WHERE
                user_email='$user'");
                session_destroy();
                echo "<script>alert('Go Ahead and Sign In. ')</script> ";
                echo "<script>window.open('signin.php','_self')</script>";
              }
        }


       ?>
    </form>

</div>

</body>
</html>

Next we are going to make the Sign Up Page. Below are the codes for the Sign up page.

signup.php

<!DOCTYPE html>
<html>
<head>
  <title>Create New Account</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA Compatible" content="IE=edge">
  <meta name="viewport" content="with=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/signup.css">
</head>
<body>
<div class="signup-form">
    <form action="" method="post">
      <div class="form-header">
        <h2>Sign Up</h2>
        <p>Fill out this form and start chatting with your friends.</p>
      </div>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="user_name" placeholder="Example: Michael" autocomplete="off" required>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" name="user_pass" placeholder="Password" autocomplete="off" required>
      </div>
      <div class="form-group">
        <label>Email Address</label>
        <input type="email" class="form-control" name="user_email" placeholder="someone@ichat.com" autocomplete="off" required>
      </div>
      <div class="form-group">
        <label>Country</label>
        <select class="form-control" name="user_country" required>
          <option disabled="">Select a Country </option>
                  <option value="Afghanistan">Afghanistan</option>
                  <option value="Åland Islands">Åland Islands</option>
                  <option value="Albania">Albania</option>
                  <option value="Algeria">Algeria</option>
                  <option value="American Samoa">American Samoa</option>
                  <option value="Andorra">Andorra</option>
                  <option value="Angola">Angola</option>
                  <option value="Anguilla">Anguilla</option>
                  <option value="Antarctica">Antarctica</option>
                  <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                  <option value="Argentina">Argentina</option>
                  <option value="Armenia">Armenia</option>
                  <option value="Aruba">Aruba</option>
                  <option value="Australia">Australia</option>
                  <option value="Austria">Austria</option>
                  <option value="Azerbaijan">Azerbaijan</option>
                  <option value="Bahamas">Bahamas</option>
                  <option value="Bahrain">Bahrain</option>
                  <option value="Bangladesh">Bangladesh</option>
                  <option value="Barbados">Barbados</option>
                  <option value="Belarus">Belarus</option>
                  <option value="Belgium">Belgium</option>
                  <option value="Belize">Belize</option>
                  <option value="Benin">Benin</option>
                  <option value="Bermuda">Bermuda</option>
                  <option value="Bhutan">Bhutan</option>
                  <option value="Bolivia">Bolivia</option>
                  <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                  <option value="Botswana">Botswana</option>
                  <option value="Bouvet Island">Bouvet Island</option>
                  <option value="Brazil">Brazil</option>
                  <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                  <option value="Brunei Darussalam">Brunei Darussalam</option>
                  <option value="Bulgaria">Bulgaria</option>
                  <option value="Burkina Faso">Burkina Faso</option>
                  <option value="Burundi">Burundi</option>
                  <option value="Cambodia">Cambodia</option>
                  <option value="Cameroon">Cameroon</option>
                  <option value="Canada">Canada</option>
                  <option value="Cape Verde">Cape Verde</option>
                  <option value="Cayman Islands">Cayman Islands</option>
                  <option value="Central African Republic">Central African Republic</option>
                  <option value="Chad">Chad</option>
                  <option value="Chile">Chile</option>
                  <option value="China">China</option>
                  <option value="Christmas Island">Christmas Island</option>
                  <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                  <option value="Colombia">Colombia</option>
                  <option value="Comoros">Comoros</option>
                  <option value="Congo">Congo</option>
                  <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
                  <option value="Cook Islands">Cook Islands</option>
                  <option value="Costa Rica">Costa Rica</option>
                  <option value="Cote D'ivoire">Cote D'ivoire</option>
                  <option value="Croatia">Croatia</option>
                  <option value="Cuba">Cuba</option>
                  <option value="Cyprus">Cyprus</option>
                  <option value="Czech Republic">Czech Republic</option>
                  <option value="Denmark">Denmark</option>
                  <option value="Djibouti">Djibouti</option>
                  <option value="Dominica">Dominica</option>
                  <option value="Dominican Republic">Dominican Republic</option>
                  <option value="Ecuador">Ecuador</option>
                  <option value="Egypt">Egypt</option>
                  <option value="El Salvador">El Salvador</option>
                  <option value="Equatorial Guinea">Equatorial Guinea</option>
                  <option value="Eritrea">Eritrea</option>
                  <option value="Estonia">Estonia</option>
                  <option value="Ethiopia">Ethiopia</option>
                  <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
                  <option value="Faroe Islands">Faroe Islands</option>
                  <option value="Fiji">Fiji</option>
                  <option value="Finland">Finland</option>
                  <option value="France">France</option>
                  <option value="French Guiana">French Guiana</option>
                  <option value="French Polynesia">French Polynesia</option>
                  <option value="French Southern Territories">French Southern Territories</option>
                  <option value="Gabon">Gabon</option>
                  <option value="Gambia">Gambia</option>
                  <option value="Georgia">Georgia</option>
                  <option value="Germany">Germany</option>
                  <option value="Ghana">Ghana</option>
                  <option value="Gibraltar">Gibraltar</option>
                  <option value="Greece">Greece</option>
                  <option value="Greenland">Greenland</option>
                  <option value="Grenada">Grenada</option>
                  <option value="Guadeloupe">Guadeloupe</option>
                  <option value="Guam">Guam</option>
                  <option value="Guatemala">Guatemala</option>
                  <option value="Guernsey">Guernsey</option>
                  <option value="Guinea">Guinea</option>
                  <option value="Guinea-bissau">Guinea-bissau</option>
                  <option value="Guyana">Guyana</option>
                  <option value="Haiti">Haiti</option>
                  <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
                  <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
                  <option value="Honduras">Honduras</option>
                  <option value="Hong Kong">Hong Kong</option>
                  <option value="Hungary">Hungary</option>
                  <option value="Iceland">Iceland</option>
                  <option value="India">India</option>
                  <option value="Indonesia">Indonesia</option>
                  <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
                  <option value="Iraq">Iraq</option>
                  <option value="Ireland">Ireland</option>
                  <option value="Isle of Man">Isle of Man</option>
                  <option value="Israel">Israel</option>
                  <option value="Italy">Italy</option>
                  <option value="Jamaica">Jamaica</option>
                  <option value="Japan">Japan</option>
                  <option value="Jersey">Jersey</option>
                  <option value="Jordan">Jordan</option>
                  <option value="Kazakhstan">Kazakhstan</option>
                  <option value="Kenya">Kenya</option>
                  <option value="Kiribati">Kiribati</option>
                  <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
                  <option value="Korea, Republic of">Korea, Republic of</option>
                  <option value="Kuwait">Kuwait</option>
                  <option value="Kyrgyzstan">Kyrgyzstan</option>
                  <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
                  <option value="Latvia">Latvia</option>
                  <option value="Lebanon">Lebanon</option>
                  <option value="Lesotho">Lesotho</option>
                  <option value="Liberia">Liberia</option>
                  <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                  <option value="Liechtenstein">Liechtenstein</option>
                  <option value="Lithuania">Lithuania</option>
                  <option value="Luxembourg">Luxembourg</option>
                  <option value="Macao">Macao</option>
                  <option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
                  <option value="Madagascar">Madagascar</option>
                  <option value="Malawi">Malawi</option>
                  <option value="Malaysia">Malaysia</option>
                  <option value="Maldives">Maldives</option>
                  <option value="Mali">Mali</option>
                  <option value="Malta">Malta</option>
                  <option value="Marshall Islands">Marshall Islands</option>
                  <option value="Martinique">Martinique</option>
                  <option value="Mauritania">Mauritania</option>
                  <option value="Mauritius">Mauritius</option>
                  <option value="Mayotte">Mayotte</option>
                  <option value="Mexico">Mexico</option>
                  <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                  <option value="Moldova, Republic of">Moldova, Republic of</option>
                  <option value="Monaco">Monaco</option>
                  <option value="Mongolia">Mongolia</option>
                  <option value="Montenegro">Montenegro</option>
                  <option value="Montserrat">Montserrat</option>
                  <option value="Morocco">Morocco</option>
                  <option value="Mozambique">Mozambique</option>
                  <option value="Myanmar">Myanmar</option>
                  <option value="Namibia">Namibia</option>
                  <option value="Nauru">Nauru</option>
                  <option value="Nepal">Nepal</option>
                  <option value="Netherlands">Netherlands</option>
                  <option value="Netherlands Antilles">Netherlands Antilles</option>
                  <option value="New Caledonia">New Caledonia</option>
                  <option value="New Zealand">New Zealand</option>
                  <option value="Nicaragua">Nicaragua</option>
                  <option value="Niger">Niger</option>
                  <option value="Nigeria">Nigeria</option>
                  <option value="Niue">Niue</option>
                  <option value="Norfolk Island">Norfolk Island</option>
                  <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                  <option value="Norway">Norway</option>
                  <option value="Oman">Oman</option>
                  <option value="Pakistan">Pakistan</option>
                  <option value="Palau">Palau</option>
                  <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
                  <option value="Panama">Panama</option>
                  <option value="Papua New Guinea">Papua New Guinea</option>
                  <option value="Paraguay">Paraguay</option>
                  <option value="Peru">Peru</option>
                  <option value="Philippines">Philippines</option>
                  <option value="Pitcairn">Pitcairn</option>
                  <option value="Poland">Poland</option>
                  <option value="Portugal">Portugal</option>
                  <option value="Puerto Rico">Puerto Rico</option>
                  <option value="Qatar">Qatar</option>
                  <option value="Reunion">Reunion</option>
                  <option value="Romania">Romania</option>
                  <option value="Russian Federation">Russian Federation</option>
                  <option value="Rwanda">Rwanda</option>
                  <option value="Saint Helena">Saint Helena</option>
                  <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                  <option value="Saint Lucia">Saint Lucia</option>
                  <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
                  <option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
                  <option value="Samoa">Samoa</option>
                  <option value="San Marino">San Marino</option>
                  <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                  <option value="Saudi Arabia">Saudi Arabia</option>
                  <option value="Senegal">Senegal</option>
                  <option value="Serbia">Serbia</option>
                  <option value="Seychelles">Seychelles</option>
                  <option value="Sierra Leone">Sierra Leone</option>
                  <option value="Singapore">Singapore</option>
                  <option value="Slovakia">Slovakia</option>
                  <option value="Slovenia">Slovenia</option>
                  <option value="Solomon Islands">Solomon Islands</option>
                  <option value="Somalia">Somalia</option>
                  <option value="South Africa">South Africa</option>
                  <option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
                  <option value="Spain">Spain</option>
                  <option value="Sri Lanka">Sri Lanka</option>
                  <option value="Sudan">Sudan</option>
                  <option value="Suriname">Suriname</option>
                  <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
                  <option value="Swaziland">Swaziland</option>
                  <option value="Sweden">Sweden</option>
                  <option value="Switzerland">Switzerland</option>
                  <option value="Syrian Arab Republic">Syrian Arab Republic</option>
                  <option value="Taiwan, Province of China">Taiwan, Province of China</option>
                  <option value="Tajikistan">Tajikistan</option>
                  <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
                  <option value="Thailand">Thailand</option>
                  <option value="Timor-leste">Timor-leste</option>
                  <option value="Togo">Togo</option>
                  <option value="Tokelau">Tokelau</option>
                  <option value="Tonga">Tonga</option>
                  <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                  <option value="Tunisia">Tunisia</option>
                  <option value="Turkey">Turkey</option>
                  <option value="Turkmenistan">Turkmenistan</option>
                  <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                  <option value="Tuvalu">Tuvalu</option>
                  <option value="Uganda">Uganda</option>
                  <option value="Ukraine">Ukraine</option>
                  <option value="United Arab Emirates">United Arab Emirates</option>
                  <option value="United Kingdom">United Kingdom</option>
                  <option value="United States">United States</option>
                  <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
                  <option value="Uruguay">Uruguay</option>
                  <option value="Uzbekistan">Uzbekistan</option>
                  <option value="Vanuatu">Vanuatu</option>
                  <option value="Venezuela">Venezuela</option>
                  <option value="Viet Nam">Viet Nam</option>
                  <option value="Virgin Islands, British">Virgin Islands, British</option>
                  <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
                  <option value="Wallis and Futuna">Wallis and Futuna</option>
                  <option value="Western Sahara">Western Sahara</option>
                  <option value="Yemen">Yemen</option>
                  <option value="Zambia">Zambia</option>
                  <option value="Zimbabwe">Zimbabwe</option>
        </select>

        </div>
        <div class="form-group">
          <label>Gender</label>
          <select class="form-control" name="user_gender" required>
            <option disabled="">Select your Gender </option>
            <option>Male</option>
            <option>Female</option>
          </select>
          </div>
          <div class="form-group">
            <label class="checkbox-inline"><input type="checkbox" required>I accept the <a href="#">Terms of Use </a> &
            <a href="#">Privacy Policy </a></label>
            </div>

      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block btn-lg" name="sign_up">Sign Up</button>
      </div>

  <?php include("signup_user.php"); ?>
  <div class="text-center small" style="color:#67428B; ">Already have an account? <a href="signin.php">Sign In </a></div>
  </div>
    </form>


</body>
</html>

signup_user.php

<?php
include("include/connection.php");
  if (isset($_POST['sign_up'])){
      $name= htmlentities(mysqli_real_escape_string($con,$_POST['user_name']));
      $pass= htmlentities(mysqli_real_escape_string($con,$_POST['user_pass']));
      $email= htmlentities(mysqli_real_escape_string($con,$_POST['user_email']));
      $country= htmlentities(mysqli_real_escape_string($con,$_POST['user_country']));
      $gender= htmlentities(mysqli_real_escape_string($con,$_POST['user_gender']));


      if($name==''){
          echo"<script>alert('We cannot verify your name')</script>";
      }
      if(strlen($pass)<8){
          echo"<script>alert('Password should be minimum 8 characters!')</script>";
          exit();
      }
      $check_email="select * from users where user_email='$email'";
      $run_email=mysqli_query($con,$check_email);

      $check=mysqli_num_rows($run_email);

      if($check==1){
        echo"<script>alert('Email already exist, Please try again!')</script>";
        echo"<script>window.open('signup.php')</script>";
        exit();
      }
      if($gender=="Female")
        $profile_pic="images/user1.png";
      else if($gender=="Male")
        $profile_pic="images/user2.png";


    $insert="insert into users (user_name,user_pass,user_email,user_profile,user_country,
    user_gender) values('$name','$pass', '$email', '$profile_pic', '$country', '$gender' )";
    $query=mysqli_query($con,$insert);

    if($query){
      echo"<script>alert('Congratulations $name, your account has been created successfully')</script>";
      echo"<script>window.open('signin.php','_self')</script>";

    }
    else{
      echo"<script>alert('Registration Failed, Try Again!')</script>";
      echo"<script>window.open('signup.php','_self')</script>";
    }


  }

 ?>

signup.css

body{
  color:#999;
  background: #52c234;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #061700, #52c234);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #061700, #52c234); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  font-family: 'Roboto',sans-serif;;
  background-size: cover;
  height: 100%;

}

.form-control{
  min-height: 41px;
  box-shadow: none;
  border-color: #e1e1e1;
}
.form-control:focus{
  border-color: #00cb82;
}
.form-control, .btn{
  border-radius: 3px;
}
.form-header{
  margin: -30px -30px 20px;
  padding: 30px 30px 10px;
  text-align: center;
  background: green;
  border-bottom: 1px solid #eee;
  color: #fff;
}
.form-header h2{
  font-size: 34px;
  font-weight: bold;
  margin:0 0 10px;
  font-family: 'Pacifico', sans-serif;
}

.form-header p{
  margin:20px 0 15px;
  font-size: 17px;
  line-height: normal;
  font-family: 'Courgette',sans-serif;
}
.signup-form{
  width:400px;
  margin: 0 auto;
  padding: 30px 0;
}
.signup-form form{
  color:#999;
  border-radius: 3px;
  margin-bottom: 15px;
  background: #f0f0f0;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
  padding: 30px;
}
.signup-form label{
  font-weight: normal;
  font-size: 13px;
}
.signup-form input[type="checkbox"]{
  margin-top:2px;

}
.signup-form .btn{
  font-size: 16px;
  font-weight: bold;
  background: grey;
  border: none;
  min-width: 200px;

}
.signup-form .btn:hover, .signup-form .btn:focus{
  background: green !important;
  outline: none;
}
.signup-form a{
  color: black;
}
.signup-form a:hover{
  text-decoration: underline;
}

Next we will create is the homepage. This is where the user will be directed when successfully logged in.

HOMEPAGE

These are the code for the Homepage.

home.php

<!DOCTYPE html>
<?php
session_start();
include("include/connection.php");

if(!isset($_SESSION['user_email'])){
  header("location: signin.php");
}
else{

?>

<html>
<head>
  <title>iChat -Home</title>

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  border-bottom: 2px solid #3A3A3A;

}

li.nav {
  float: left;

}

li.nav a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

li.nav a:hover:not(.active) {
  background-color: grey;
}

.active {
  background-color: #4CAF50;
}
</style>
<body>
  <?php
  $user=$_SESSION['user_email'];
  $get_user="select * from users where user_email='$user'";
  $run_user=mysqli_query($con,$get_user);
  $row=mysqli_fetch_array($run_user);

  $user_id=$row['user_id'];
  $user_name=$row['user_name'];


   ?>
  <ul class="nav">
  <li class="nav"><a class="active"href="#home" style="pointer-events:none;"><img src="images/Chat.png" height="20px"><b>iChat</a></li>
  <li class="nav"><a class="" style="pointer-events:none;">Welcome, <?php echo "$user_name"; ?> </a></li>


  <li class="nav"style="float:right; right:4px;top:6px;">
       <form method="post">
         <button name="logout" class="btn btn-danger" style="margin-right:5px;margin-top:5px;">Logout</button>
  </form>
    <?php
       if(isset($_POST['logout'])){
         $update_msg = mysqli_query($con, "UPDATE users SET log_in='Offline'
         WHERE user_name='$user_name'");
         header("Location:logout.php");
         exit();


       }
       ?></li>
  <li class="nav"style="float:right; right:4px;"> <a href="account_settings.php">
<i style="font-size:12px" class="fa"></i> Account Settings </a></b></li>
</ul>

  <div class="container main-section">
    <?php
    $user=$_SESSION['user_email'];
    $get_user="select * from users where user_email='$user'";
    $run_user=mysqli_query($con,$get_user);
    $row=mysqli_fetch_array($run_user);

    $user_id=$row['user_id'];
    $user_name=$row['user_name'];


     ?>
    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-12 left-sidebar">
        <div class="input-group searchbox">
          <div class="input-group-btn">

            <center><a href="include/find_friends.php"><button class="btn btn-default search-icon" name="search_user"
            type="submit">Add New User </button></a></center>
          </div>
        </div>
        <div class="left-chat">
          <ul>
            <?php include("include/get_users_data.php");?>

          </ul>
        </div>
    </div>
    <div class="col-md-9 col-sm-9 col-xs-12 right-sidebar">
      <div class="row">
        <!-- getting the user info who is logged in -->
        <?php
        $user=$_SESSION['user_email'];
        $get_user="select * from users where user_email='$user'";
        $run_user=mysqli_query($con,$get_user);
        $row=mysqli_fetch_array($run_user);

        $user_id=$row['user_id'];
        $user_name=$row['user_name'];


         ?>

         <!-- getting the user data on which user click -->
         <?php
         if(isset($_GET['user_name'])){
           global $con;
           $get_username=$_GET['user_name'];
           $get_user="select * from users where user_name='$get_username'";

           $run_user=mysqli_query($con, $get_user);
           $row_user=mysqli_fetch_array($run_user);

           $username=$row_user['user_name'];
           $user_profile_image=$row_user['user_profile'];

         }

         $total_messages="select * from users_chat where (sender_username='$user_name' AND receiver_username='$username')
         OR (receiver_username='$user_name' AND sender_username='$username')";

         $run_messages=mysqli_query($con, $total_messages);
         $total = mysqli_num_rows($run_messages);

         ?>
         <div class="col-md-12 right-header">
              <div class="right-header-img">
             <img src="<?php echo"$user_profile_image";?>">
              </div>
              <div class="right-header-detail">
             <form method="post">
               <p><?php echo "$username"; ?></p>
               <span><?php echo $total; ?> messages </span>&nbsp &nbsp

             </form>


            </div>
          </div>
        </div>
  <div class="row">
    <div id ="scrolling_to_bottom" class="col-md-12 right-header-contentChat">
      <?php
      $update_msg=mysqli_query($con, "UPDATE users_chat SET msg_status='read'
       WHERE sender_username='$username' AND receiver_username='$user_name'");

      $sel_msg= "select * from users_chat where (sender_username='$user_name' AND receiver_username='$username') OR
      (receiver_username='$user_name' AND sender_username='$username') ORDER by 1 ASC";
      $run_msg = mysqli_query($con, $sel_msg);
      while ($row = mysqli_fetch_array($run_msg)) {
        $sender_username=$row['sender_username'];
        $receiver_username=$row['receiver_username'];
        $msg_content = $row['msg_content'];
        $msg_date=$row['msg_date'];

       ?>
       <ul>
         <?php
         if($user_name == $sender_username AND $username == $receiver_username){
            echo "
            <li>
            <div class='rightside-right-chat'>
            <span>$user_name <small> $msg_date </small></span><br><br>
            <p>$msg_content</p>

            </div>
            </li>

            ";
         }

         else if($user_name == $receiver_username AND $username == $sender_username){
            echo "
            <li>
            <div class='rightside-left-chat'>
            <span>$username <small> $msg_date </small></span><br><br>
            <p>$msg_content</p>

            </div>
            </li>

            ";
         }
         ?>
       </ul>

       <?php
     }

        ?>
  </div>
</div>
<div class="row">
<div class="col-md-12 right-chat-textbox">
  <form method="post">
    <input autocomplete="off" type="text" name="$msg_content" placeholder="Write your message....">
    <button class="btn" name="submit">Send <i class="fa fa-telegram" aria-hidden="true"></i></button>
  </form>
</div>
</div>
</div>
</div>
</div>
<?php
    if(isset($_POST['submit'])){
      $msg = htmlentities($_POST['$msg_content']);

      if($msg == ""){
        echo "
            <div class='alert alert-danger'>
              <strong><center>Message was unable to send </center></strong>
            </div>

        ";
      }
    else if(strlen($msg) > 100){
      echo "
      <div class='alert alert-danger'>
        <strong><center>Message is too long. Use only 100 characters </center></strong>
      </div>
      ";
    }
    else{
      $insert ="insert into users_chat(sender_username,receiver_username,msg_content,msg_status,msg_date)
      values('$user_name','$username','$msg','unread',NOW())";

      $run_insert = mysqli_query($con,$insert);
      echo"<script>window.open('home.php?user_name=$username','_self')</script>";

    }

    }




 ?>
 <script>
 $('#scrolling_to_bottom').animate({
   scrollTop: $('#scrolling_to_bottom').get(0).scrollHeight}, 1000);
</script>
 <script type="text/javascript">
 $(document).ready(function(){
   var height=$(window).height();
   $('.left-chat').css('height',(height - 92) + 'px');
   $('.right-header-contentChat').css('height',(height - 163) + 'px');

 });
 </script>

</body>

</html>
<?php } ?>

home.css

body{
  color:#9da39d;
}
.main-section{
    border:1px solid #000;
    width: 100%;
}
.left-sidebar{
  background-color: #3A3A3A;
  padding:0px;
}
.searchbox{
  width:100%;
  padding:27px 10px;
  border-bottom:2px solid #000;
}
.form-control,.search-icon,.search-icon:hover{
  background-color: #6A6C75;
  border: 1px solid #fff;
  color:#fff;
  box-shadow: none !important;
}
.form-control:focus{
  border:1px solid #fff;
}
.chat-left-img,.chat-left-detail{
  float: left;
  
}
.left-chat{
  overflow-y:scroll;
}
.left-chat ul{
  overflow:hidden;
  padding: 0px;
}
.left-chat ul li{
  list-style: none;
  width: 100%;
  float:left;
  margin:10px 0px 8px 15px;
}
.chat-left-img img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: left;
  float: fixed;
  border: 3px solid #6B6F79;
}
.chat-left-detail{
  margin-left: 10px;
}
.chat-left-detail p{
  margin:0px;
  color:#fff;
  padding: 7px 0px 0px;
}
.chat-left-detail span{
  color: #B8BAC3;
}
.chat-left-detail span i{
  color:#86BB71;
  font-size: 10px;
}
.chat-left-detail .orange{
  color:#E38968;
}
.right-sidebar{
  border-left:2px solid #000;
}
.right-header{
  border-bottom:2px solid #000;
  margin: 0px;
  padding: 0px;
}
.right-header-img img{
  width:50px;
  height: 50px;
  float: left;
  border-radius: 50%;
  border: 3px solid #61BC71;
  margin-right: 10px;
}
.right-header{
  padding: 20px;
  height: 90px;
  background-color: #3A3A3A;
}
.right-header-detail p{
  margin: 0px;
  color: #fff;
  font-weight: bold;
  padding-top:5px;
}
.right-header-detail span{
  color:#9FA5AF;
  font-size: 12px;
}
.rightside-left-chat,.rightside-right-chat{
  float: left;
  width: 80%;
  position: relative;
}
.rightside-right-chat{
  float:right;
  margin-right:35px;
}
.right-header-contentChat{
  overflow-y: scroll;
  background-color: #FFFFFF;
  position: relative;
}
.right-header-contentChat ul li{
  list-style: none;
  margin-top: 20px;
}
.right-header-contentChat .rightside-left-chat p,.right-header-contentChat .rightside-right-chat p{
  background-color: #86BB71;
  padding: 15px;
  border-radius: 8px;
  color: #fff;
}
.right-header-contentChat .rightside-right-chat p{
  background-color: #94C2ED;
}
.right-chat-textbox{
  padding: 15px 30px;
  width: 100%;
  background-color: #3A3A3A;
}
.right-chat-textbox input{
  width:80%;
  height:40px;
  border:2px solid #3d85ca;
  border-radius: 5px;
  padding: 0px 10px;
  border:1px solid #c1c1c1;
}
.right-chat-textbox button{
  height: 40px;
  width:70px;
  margin-left: 20px;
}
.rightside-left-chat span i,.rightside-right-chat span i{
  color:#86BB71;
  font-size: 12px;
}
.rightside-right-chat span i{
  color:#94C2ED;
}
.rightside-right-chat span{
  float:right;
}
.rightside-right-chat span small,.rightside-left-chat span small{
  color:#BDBDC2;
}
.rightside-left-chat:before{
  content:" ";
  position: absolute;
  top: 14px;
  left: 15px;
  bottom: 150px;
  border: 15px solid transparent;
  border-bottom-color: #86BB71;
  z-index: 1;
}
.rightside-right-chat:before{
  content:" ";
  position:absolute;
  top:14px;
  right: 15px;
  bottom: 150px;
  border: 15px solid transparent;
  border-bottom-color: #94C2ED;
}
@media only screen and (max-width:320px){
  .main-section{
    display: none;
  }
}

Create a file called get_users_data.php inside the include folder. This is the php file for gathering all the users data that will be shown in our homepage.

get_users_data.php

<?php
$con=mysqli_connect("localhost","root","","ichat") or die ("Connection was not established");

  $user="select * from users";

  $run_user = mysqli_query($con, $user);

  while($row_user=mysqli_fetch_array($run_user)){
      $user_id = $row_user['user_id'];
      $user_name = $row_user['user_name'];
      $user_profile = $row_user['user_profile'];
      $login = $row_user['log_in'];

      echo"
      <li>
        <div class='chat-left-img'>
        <img src='$user_profile'>
        </div>
        <div class='chat-left-details'>
        <p><a href ='home.php?user_name=$user_name'> $user_name</a></p>";

    if($login=="Online"){
      echo "<span><i class='fa fa-circle' aria hidden='true' style='color: green;'></i> Online</span>";
    }else{
      echo"<span><i class='fa fa-circle-o' aria-hidden='true'></i> Offline</span>";
    }
  echo  "</div>
    </li>
    ";
  }






 ?>

Now we will create the code for Add New User button as seen in our homepage. It will redirect us to Find Friends Page. We will place the files inside our include folder.

find_friends.php

<!DOCTYPE html>
<?php
session_start();
include("find_friends_function.php");

if(!isset($_SESSION['user_email'])){
  header("location: signin.php");
}
else{

?>

<html>
<head>
  <title>iChat -Search for Friends</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- <link rel="stylesheet" type="text/css" href="../css/find_people.css"> -->

  <style>

  button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
  }

  a {
    text-decoration: none;
    color: black;
    font-size: 14px;
  }
  button:hover, a:hover{
    opacity: 0.7;
  }
  form.search_form input[type=text]{
    padding: 10px;
    font-size: 17px;
    border-radius: 4px;
    border: 1px solid #343a40 !important;
    float: left;
    width: 80%;
    color: white;
    background: #343a40 !important;
  }

  form.search_form button{
    float:left;
    width: 20%;
    padding: 10px;
    font-size: 17px;
    border: 1px solid #343a40 !important;
    border-left: none;
    cursor: pointer;
    background-color: #343a40 !important;
  }
  form.search_form button:hover{
    background: #343a40 !important;
  }
  form.search_form::after {
    content: "";
    clear: both;
    display: table;
  }
  .card{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-family: arial;
  }
  .card img{
    height: 200px;
    width:200px;
    text-align:center;
    border-radius: 2px;
    border-width: medium;
    border-color: black;
  }
  .title{
    color:grey;
    font-size: 18px;
  }
ul {
  list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #3A3A3A;
color:black;


}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

li a:hover:not(.active) {
  background-color: grey;
}

.active {
  background-color: #4CAF50;
}
a{
  font-size: 14px;
  color:black;


}
a:hover {
  color: black;
  text-decoration: none;

}
.red{
  background-color: red;

}
  </style>
</head>
<body>

  <ul>
    <li>  <?php
        $user = $_SESSION['user_email'];
        $get_user="select * from users where user_email='$user'";
        $run_user=mysqli_query($con,$get_user);
        $row=mysqli_fetch_array($run_user);

        $user_name = $row['user_name'];
        echo "<b><a class='active' href='../home.php?user_name=$user_name'><img src='../images/Chat.png' height='20px'>iChat</a></li>";
         ?>
  </li>
    <li><a class="" style="pointer-events:none;">Welcome, <?php echo "$user_name"; ?> </a></li>
    <li style="float:right; right:4px;top:6px;" >   <form method="post">
    <button name="logout" class="btn btn-danger" style="margin-right:5px;margin-top:5px;">Logout</button>
  </form>
    <?php
       if(isset($_POST['logout'])){
         $update_msg = mysqli_query($con, "UPDATE users SET log_in='Offline'
         WHERE user_name='$user_name'");
         header("Location:logout.php");
         exit();


       }
       ?></li>
    <li style="float:right"><a  href="../account_settings.php">
  <i style="font-size:12px" class="fa"></i> Account Settings </a></li>
    </b>
  </ul>
<br>
<br>

  <div class="row">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
      <form class="search_form" action="">

        <input type="text" name="search_query" placeholder="Search Friends" autocomplete="off" required>
        <button class="btn btn-primary" type="submit" name="search_btn">Search</button>
      </form>
    </div>
    <div class="col-sm--4">

    </div>
  </div><br><br>
  <?php search_user(); ?>
</body>
</html>
<?php } ?>

find_friends_function.php

<?php
$con=mysqli_connect("localhost","root","","ichat") or die ("Connection was not established");
  function search_user(){
    global $con;

    if (isset($_GET['search_btn'])) {
      $search_query=htmlentities($_GET['search_query']);
      $get_user="select * from users where user_name like '%$search_query%' or user_country
      like '%$search_query%'";

    } else {
      $get_user="select * from users order by user_country, user_name DESC LIMIT 5";
    }

    $run_user = mysqli_query($con, $get_user);

    while ($row_user=mysqli_fetch_array($run_user)){
      $user_name = $row_user['user_name'];
      $user_profile = $row_user['user_profile'];
      $country = $row_user['user_country'];
      $gender = $row_user['user_gender'];

      //Displaying all data at once
      echo "
      <div class='card'>
        <center><img src ='../$user_profile'></center>
        <h1>$user_name</h1>
        <p class='title'>$country</p>
        <p>$gender</p>
        <form method='post'>
          <p><button name='add'>Chat with $user_name </button>  </p>

        </form><br>
      </div><br><br>
      ";

      if(isset($_POST['add'])){
        echo"<script>window.open('../home.php?user_name=$user_name','_self')</script>";

      }
    }




}

 ?>

After that, we will now create our Account Settings Page as shown in our Homepage Navigation Bar.

account_settings.php

<?php
session_start();
include("include/connection.php");
if(!isset($_SESSION['user_email'])){
  header("location: signin.php");
}
else{

?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- <link rel="stylesheet" href="css/style.css"> -->
  <title>iChat-Account Settings</title>
  <style>
ul {
  list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #3A3A3A;
color:black;


}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

li a:hover:not(.active) {
  background-color: grey;
}

.active {
  background-color: #4CAF50;
}
a{
  font-size: 14px;
  color:black;


}
a:hover {
  color: black;
  text-decoration: none;

}
.red{
  background-color: red;

}
</style>
</head>
<body>

<ul>
  <li>  <?php
      $user = $_SESSION['user_email'];
      $get_user="select * from users where user_email='$user'";
      $run_user=mysqli_query($con,$get_user);
      $row=mysqli_fetch_array($run_user);

      $user_name = $row['user_name'];
      echo "<b><a class='active' href='home.php?user_name=$user_name'><img src='images/Chat.png' height='20px'>iChat</a></li>";
       ?>
</li>
  <li><a class="" style="pointer-events:none;">Welcome, <?php echo "$user_name"; ?> </a></li>
  <li style="float:right; right:4px;top:6px;" >   <form method="post">
  <button name="logout" class="btn btn-danger" style="margin-right:5px;margin-top:5px;">Logout</button>
</form>
  <?php
     if(isset($_POST['logout'])){
       $update_msg = mysqli_query($con, "UPDATE users SET log_in='Offline'
       WHERE user_name='$user_name'");
       header("Location:logout.php");
       exit();


     }
     ?></li>
  <li style="float:right"><a  href="account_settings.php">
<i style="font-size:12px" class="fa"></i> Account Settings </a></li>
    <li style="float:right"><a  href="include/find_friends.php">
  <i style="font-size:12px" class="fa">	</i> Add Friends </a></li></b>
</ul>

  <br>
  <br>
  <div class="row">
      <div class="col-sm-2">
      </div>
      <?php
        $user = $_SESSION['user_email'];
        $get_user= "select * from users where user_email='$user'";
        $run_user = mysqli_query($con, $get_user);
        $row= mysqli_fetch_array($run_user);

        $user_name=$row['user_name'];
        $user_pass=$row['user_pass'];
        $user_email=$row['user_email'];
        $user_profile=$row['user_profile'];
        $user_country=$row['user_country'];
        $user_gender=$row['user_gender'];

        ?>
        <div class="col-sm-8">
          <form action="" method="post" enctype="multipart/form-data">
            <table class="table table-bordered table-hover">
              <tr aligh="center">
                <td colspan="6" ><h2>Change Account Settings </h2></td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Username </td>
                <td>
                  <input type="text" name="u_name" class="form-control" required value="<?php echo $user_name;?>"/>
                </td>
              </tr>
              <tr>
                <td></td>
                <td><a class="btn btn-success" style="text-decoration: none; font-size:15px;" href="upload.php">
                  <i class="fa fa-user" aria-hidden="true"></i> Change Profile Picture </a>
                </td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Email </td>
                <td>
                  <input type="email" name="u_email" class="form-control" required value="<?php echo $user_email;?>"/>
                </td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Country </td>
                <td>
                <select class="form-control" name="u_country">
                  <option><?php echo $user_country;?></option>
                  <option></option>
                  <option value="Afghanistan">Afghanistan</option>
                <option value="Åland Islands">Åland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="American Samoa">American Samoa</option>
                <option value="Andorra">Andorra</option>
                <option value="Angola">Angola</option>
                <option value="Anguilla">Anguilla</option>
                <option value="Antarctica">Antarctica</option>
                <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                <option value="Argentina">Argentina</option>
                <option value="Armenia">Armenia</option>
                <option value="Aruba">Aruba</option>
                <option value="Australia">Australia</option>
                <option value="Austria">Austria</option>
                <option value="Azerbaijan">Azerbaijan</option>
                <option value="Bahamas">Bahamas</option>
                <option value="Bahrain">Bahrain</option>
                <option value="Bangladesh">Bangladesh</option>
                <option value="Barbados">Barbados</option>
                <option value="Belarus">Belarus</option>
                <option value="Belgium">Belgium</option>
                <option value="Belize">Belize</option>
                <option value="Benin">Benin</option>
                <option value="Bermuda">Bermuda</option>
                <option value="Bhutan">Bhutan</option>
                <option value="Bolivia">Bolivia</option>
                <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                <option value="Botswana">Botswana</option>
                <option value="Bouvet Island">Bouvet Island</option>
                <option value="Brazil">Brazil</option>
                <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                <option value="Brunei Darussalam">Brunei Darussalam</option>
                <option value="Bulgaria">Bulgaria</option>
                <option value="Burkina Faso">Burkina Faso</option>
                <option value="Burundi">Burundi</option>
                <option value="Cambodia">Cambodia</option>
                <option value="Cameroon">Cameroon</option>
                <option value="Canada">Canada</option>
                <option value="Cape Verde">Cape Verde</option>
                <option value="Cayman Islands">Cayman Islands</option>
                <option value="Central African Republic">Central African Republic</option>
                <option value="Chad">Chad</option>
                <option value="Chile">Chile</option>
                <option value="China">China</option>
                <option value="Christmas Island">Christmas Island</option>
                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                <option value="Colombia">Colombia</option>
                <option value="Comoros">Comoros</option>
                <option value="Congo">Congo</option>
                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
                <option value="Cook Islands">Cook Islands</option>
                <option value="Costa Rica">Costa Rica</option>
                <option value="Cote D'ivoire">Cote D'ivoire</option>
                <option value="Croatia">Croatia</option>
                <option value="Cuba">Cuba</option>
                <option value="Cyprus">Cyprus</option>
                <option value="Czech Republic">Czech Republic</option>
                <option value="Denmark">Denmark</option>
                <option value="Djibouti">Djibouti</option>
                <option value="Dominica">Dominica</option>
                <option value="Dominican Republic">Dominican Republic</option>
                <option value="Ecuador">Ecuador</option>
                <option value="Egypt">Egypt</option>
                <option value="El Salvador">El Salvador</option>
                <option value="Equatorial Guinea">Equatorial Guinea</option>
                <option value="Eritrea">Eritrea</option>
                <option value="Estonia">Estonia</option>
                <option value="Ethiopia">Ethiopia</option>
                <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
                <option value="Faroe Islands">Faroe Islands</option>
                <option value="Fiji">Fiji</option>
                <option value="Finland">Finland</option>
                <option value="France">France</option>
                <option value="French Guiana">French Guiana</option>
                <option value="French Polynesia">French Polynesia</option>
                <option value="French Southern Territories">French Southern Territories</option>
                <option value="Gabon">Gabon</option>
                <option value="Gambia">Gambia</option>
                <option value="Georgia">Georgia</option>
                <option value="Germany">Germany</option>
                <option value="Ghana">Ghana</option>
                <option value="Gibraltar">Gibraltar</option>
                <option value="Greece">Greece</option>
                <option value="Greenland">Greenland</option>
                <option value="Grenada">Grenada</option>
                <option value="Guadeloupe">Guadeloupe</option>
                <option value="Guam">Guam</option>
                <option value="Guatemala">Guatemala</option>
                <option value="Guernsey">Guernsey</option>
                <option value="Guinea">Guinea</option>
                <option value="Guinea-bissau">Guinea-bissau</option>
                <option value="Guyana">Guyana</option>
                <option value="Haiti">Haiti</option>
                <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
                <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
                <option value="Honduras">Honduras</option>
                <option value="Hong Kong">Hong Kong</option>
                <option value="Hungary">Hungary</option>
                <option value="Iceland">Iceland</option>
                <option value="India">India</option>
                <option value="Indonesia">Indonesia</option>
                <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
                <option value="Iraq">Iraq</option>
                <option value="Ireland">Ireland</option>
                <option value="Isle of Man">Isle of Man</option>
                <option value="Israel">Israel</option>
                <option value="Italy">Italy</option>
                <option value="Jamaica">Jamaica</option>
                <option value="Japan">Japan</option>
                <option value="Jersey">Jersey</option>
                <option value="Jordan">Jordan</option>
                <option value="Kazakhstan">Kazakhstan</option>
                <option value="Kenya">Kenya</option>
                <option value="Kiribati">Kiribati</option>
                <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
                <option value="Korea, Republic of">Korea, Republic of</option>
                <option value="Kuwait">Kuwait</option>
                <option value="Kyrgyzstan">Kyrgyzstan</option>
                <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
                <option value="Latvia">Latvia</option>
                <option value="Lebanon">Lebanon</option>
                <option value="Lesotho">Lesotho</option>
                <option value="Liberia">Liberia</option>
                <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                <option value="Liechtenstein">Liechtenstein</option>
                <option value="Lithuania">Lithuania</option>
                <option value="Luxembourg">Luxembourg</option>
                <option value="Macao">Macao</option>
                <option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
                <option value="Madagascar">Madagascar</option>
                <option value="Malawi">Malawi</option>
                <option value="Malaysia">Malaysia</option>
                <option value="Maldives">Maldives</option>
                <option value="Mali">Mali</option>
                <option value="Malta">Malta</option>
                <option value="Marshall Islands">Marshall Islands</option>
                <option value="Martinique">Martinique</option>
                <option value="Mauritania">Mauritania</option>
                <option value="Mauritius">Mauritius</option>
                <option value="Mayotte">Mayotte</option>
                <option value="Mexico">Mexico</option>
                <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                <option value="Moldova, Republic of">Moldova, Republic of</option>
                <option value="Monaco">Monaco</option>
                <option value="Mongolia">Mongolia</option>
                <option value="Montenegro">Montenegro</option>
                <option value="Montserrat">Montserrat</option>
                <option value="Morocco">Morocco</option>
                <option value="Mozambique">Mozambique</option>
                <option value="Myanmar">Myanmar</option>
                <option value="Namibia">Namibia</option>
                <option value="Nauru">Nauru</option>
                <option value="Nepal">Nepal</option>
                <option value="Netherlands">Netherlands</option>
                <option value="Netherlands Antilles">Netherlands Antilles</option>
                <option value="New Caledonia">New Caledonia</option>
                <option value="New Zealand">New Zealand</option>
                <option value="Nicaragua">Nicaragua</option>
                <option value="Niger">Niger</option>
                <option value="Nigeria">Nigeria</option>
                <option value="Niue">Niue</option>
                <option value="Norfolk Island">Norfolk Island</option>
                <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                <option value="Norway">Norway</option>
                <option value="Oman">Oman</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Palau">Palau</option>
                <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
                <option value="Panama">Panama</option>
                <option value="Papua New Guinea">Papua New Guinea</option>
                <option value="Paraguay">Paraguay</option>
                <option value="Peru">Peru</option>
                <option value="Philippines">Philippines</option>
                <option value="Pitcairn">Pitcairn</option>
                <option value="Poland">Poland</option>
                <option value="Portugal">Portugal</option>
                <option value="Puerto Rico">Puerto Rico</option>
                <option value="Qatar">Qatar</option>
                <option value="Reunion">Reunion</option>
                <option value="Romania">Romania</option>
                <option value="Russian Federation">Russian Federation</option>
                <option value="Rwanda">Rwanda</option>
                <option value="Saint Helena">Saint Helena</option>
                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                <option value="Saint Lucia">Saint Lucia</option>
                <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
                <option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
                <option value="Samoa">Samoa</option>
                <option value="San Marino">San Marino</option>
                <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                <option value="Saudi Arabia">Saudi Arabia</option>
                <option value="Senegal">Senegal</option>
                <option value="Serbia">Serbia</option>
                <option value="Seychelles">Seychelles</option>
                <option value="Sierra Leone">Sierra Leone</option>
                <option value="Singapore">Singapore</option>
                <option value="Slovakia">Slovakia</option>
                <option value="Slovenia">Slovenia</option>
                <option value="Solomon Islands">Solomon Islands</option>
                <option value="Somalia">Somalia</option>
                <option value="South Africa">South Africa</option>
                <option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
                <option value="Spain">Spain</option>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="Sudan">Sudan</option>
                <option value="Suriname">Suriname</option>
                <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
                <option value="Swaziland">Swaziland</option>
                <option value="Sweden">Sweden</option>
                <option value="Switzerland">Switzerland</option>
                <option value="Syrian Arab Republic">Syrian Arab Republic</option>
                <option value="Taiwan, Province of China">Taiwan, Province of China</option>
                <option value="Tajikistan">Tajikistan</option>
                <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
                <option value="Thailand">Thailand</option>
                <option value="Timor-leste">Timor-leste</option>
                <option value="Togo">Togo</option>
                <option value="Tokelau">Tokelau</option>
                <option value="Tonga">Tonga</option>
                <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                <option value="Tunisia">Tunisia</option>
                <option value="Turkey">Turkey</option>
                <option value="Turkmenistan">Turkmenistan</option>
                <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                <option value="Tuvalu">Tuvalu</option>
                <option value="Uganda">Uganda</option>
                <option value="Ukraine">Ukraine</option>
                <option value="United Arab Emirates">United Arab Emirates</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
                <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
                <option value="Uruguay">Uruguay</option>
                <option value="Uzbekistan">Uzbekistan</option>
                <option value="Vanuatu">Vanuatu</option>
                <option value="Venezuela">Venezuela</option>
                <option value="Viet Nam">Viet Nam</option>
                <option value="Virgin Islands, British">Virgin Islands, British</option>
                <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
                <option value="Wallis and Futuna">Wallis and Futuna</option>
                <option value="Western Sahara">Western Sahara</option>
                <option value="Yemen">Yemen</option>
                <option value="Zambia">Zambia</option>
                <option value="Zimbabwe">Zimbabwe</option>
                </select>
                </td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Gender </td>
                <td>
                <select class="form-control" name="u_gender">
                  <option><?php echo $user_gender;?></option>
                  <option></option>
                  <option>Male</option>
                  <option>Female</option>
                </select>
                </td>
              </tr>
              <tr>
                <td style="font-weight:bold;"> Forgotten Password </td>
                <td>
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                        Forgotten Password </button>
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                                  <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">
                                            ×</button>
                                        </div>
                                        <div class="modal-body">
                                          <form action="recovery.php?id=<?php echo $user_id;?>" method="post" id="f">
                                            <strong>What is your bestfriend name? </strong>
                                            <textarea class = "form-control" cols="83" rows="4" name="content"
                                            placeholder="Someone"></textarea><br>
                                            <input class="btn btn-success" type="submit" name="sub" value="Submit"
                                            style="width: 100px;"><br><br>
                                            <pre>Answer above question. We will ask you this question if you forgot your <br>Password.</pre>
                                            <br><br>
                                          </form>
                                          <?php
                                          if(isset($_POST['sub'])){
                                            $bfn=htmlentities($_POST['content']);

                                              if($bfn ==''){
                                                echo"<script type='text/javascript'>alert('Please Enter Something.')</script";
                                                echo"<script type='text/javascript'>window.open('account_settings.php','_self')</script>";
                                                exit();
                                              }
                                              else{
                                                $update="update users set forgotten_answer='$bfn' where user_email='$user'";
                                                $run=mysqli_query($con,$update);
                                                  if($run){
                                                    echo"<script type='text/javascript'>alert('Working...');
                                                    window.location='account_settings.php';</script";
                                                    echo"<script type='text/javascript'>window.open('account_settings.php','_self')</script>";

                                                  }else{
                                                    echo"<script type='text/javascript'>alert('Error while updating information.');
                                                    window.location='account_settings.php';</script";
                                                    echo"<script type='text/javascript'>window.open('account_settings.php','_self')</script>";
                                                  }
                                              }

                                          }

                                           ?>
                                        </div>
                                        <div class="modal-footer">
                                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                                        </div>
                                  </div>
                            </div>
                        </div>

                                        </tr>
                                        <tr><td></td><td><a class="btn btn-success" style="text-decoration: none; font-size: 15px;"
                                          href="change_password.php"><i class="fa fa-key fa-fw" aria-hidden="true"></i>Change Password</td>
                                        </tr>



                                        <tr align="center">
                                          <td colspan="6">
                                            <input type="submit" value="Update" name="update" class="btn btn-primary">
                                          </td>
                                        </tr>

                                      </table>
                                    </form>
                                    <?php
                                    if(isset($_POST['update'])){
                                      $user_name=htmlentities($_POST['u_name']);
                                      $u_email=htmlentities($_POST['u_email']);
                                      $u_gender=htmlentities($_POST['u_gender']);
                                      $u_country=htmlentities($_POST['u_country']);

                                      $update="update users set user_name='$user_name', user_email='$u_email',
                                      user_country='$u_country',user_gender='$u_gender' where user_email='$user'";

                                      $run=mysqli_query($con,$update);

                                      if($run){
                                        echo "<script type='text/javascript'>window.open('account_settings.php','_self')</script>";
                                      }
                                    }

                                     ?>
                                  </div>
  </div>



</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</html>
<?php } ?>

We will now create the code for the Change Profile Picture function inside our Account Settings form. It will redirect us into Change Profile picture page.

upload.php

<!DOCTYPE html>
<?php
session_start();
include("include/connection.php");

if(!isset($_SESSION['user_email'])){
  header("location: signin.php");
}
else{

?>

<html>
<head>
  <title>iChat -Change Profile Picture </title>
  <meta charset="utf-8">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
.card{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  max-width: 400px;
  margin: auto;
  text-align: center;
  font-family: arial;
}
.card img{
  height: 200px;
  width:200px;
  text-align:center;
  border-radius: 2px;
  border-width: medium;
  border-color: black;
}
.title{
  color:grey;
  font-size: 18px;
}
button.a{

  display: inline-block;
  padding: 8px;
  color: white;
  background-color: grey;
  text-align: center;
  cursor: pointer;
  width: 50%;
  font-size: 18px;
}
#update_profile{

  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  color: white;
  background-color:grey;
}
label{
  align:center;
  padding: 7px;
  display: table;
  color:#fff;
}
input[type="file"]{
  display: none;
}

ul {
list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  font-size: 14px;
  border-bottom: 2px solid #3A3A3A;
color:black;


}

li {
float: left;
}

li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;

}

li a:hover:not(.active) {
background-color: grey;
}

.active {
background-color: #4CAF50;
}
a{
font-size: 14px;
color:black;


}
a:hover {
color: black;
text-decoration: none;

}
.red{
background-color: red;

}

</style>
<body>

  <ul>
    <li>  <?php
        $user = $_SESSION['user_email'];
        $get_user="select * from users where user_email='$user'";
        $run_user=mysqli_query($con,$get_user);
        $row=mysqli_fetch_array($run_user);

        $user_name = $row['user_name'];
        echo "<b><a class='active' href='home.php?user_name=$user_name'><img src='images/Chat.png' height='20px'>iChat</a></li>";
         ?>
  </li>
    <li><a class="" style="pointer-events:none;">Welcome, <?php echo "$user_name"; ?> </a></li>
    <li style="float:right; right:4px;top:6px;" >   <form method="post">
    <button name="logout" class="btn btn-danger" style="margin-right:5px;margin-top:5px;">Logout</button>
  </form>
    <?php
       if(isset($_POST['logout'])){
         $update_msg = mysqli_query($con, "UPDATE users SET log_in='Offline'
         WHERE user_name='$user_name'");
         header("Location:logout.php");
         exit();


       }
       ?></li>
    <li style="float:right"><a  href="account_settings.php">
  <i style="font-size:12px" class="fa"></i> Account Settings </a></li>
      <li style="float:right"><a  href="include/find_friends.php">
    <i style="font-size:12px" class="fa">	</i> Add Friends </a></li></b>
  </ul>
    <br>
    <br>
  <b>  <h2 align="center">Change Profile Picture </h2></b>
  <?php
  $user = $_SESSION['user_email'];
  $get_user= "select * from users where user_email='$user'";
  $run_user = mysqli_query($con, $get_user);
  $row= mysqli_fetch_array($run_user);

  $user_name=$row['user_name'];
  $user_profile=$row['user_profile'];

  echo "
  <div class='card'>
    <center><img src ='$user_profile' ></center>
    <h1>$user_name</h1>

    <form method='post' enctype='multipart/form-data'><center>
      <label id='update_profile'><i  aria-hidden='true'></i>Select Profile
      <input type='file' name='u_image'size='60px'></label>
      <p>*Please Select Picture and Click update profile.</p>
      <button class='btn btn-primary' id='button_profile' name='update' align='center'><i  aria-hidden='true'>
      </i>Update Profile</button>
      </center>
    </form><br>
  </div><br><br>
  ";

  if(isset($_POST['update'])){

    $u_image=$_FILES['u_image']['name'];
    $image_tmp=$_FILES['u_image']['tmp_name'];
    $random_number= rand(1,100);

    if($u_image==''){
      echo"<script>alert('Please select profile')</script>";
      echo"<script>window.open('upload.php','_self')</script>";
      exit();

    }
    else{
      move_uploaded_file($image_tmp, "images/$u_image.$random_number");
      $update="update users set user_profile='images/$u_image.$random_number'where user_email='$user'";

      $run=mysqli_query($con,$update);
        if($run){
          echo"<script>alert('Your profile image has been updated!')</script>";
          echo"<script>window.open('upload.php','_self')</script>";
        }

    }
  }
  ?>




</body>
</html>
<?php } ?>

After that, we will now create the code for the Change Password function inside our Account Settings form. It will redirect us into Change Password page.

change_password.php

<!DOCTYPE html>
<?php
session_start();
include("include/connection.php");

if(!isset($_SESSION['user_email'])){
  header("location: signin.php");
}
else{

?>

<html>
<head>
  <title>iChat -Change Password </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body{
  overflow-x: hidden;
}
ul {
  list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #3A3A3A;
color:black;


}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

li a:hover:not(.active) {
  background-color: grey;
}

.active {
  background-color: #4CAF50;
}
a{
  font-size: 14px;
  color:black;


}
a:hover {
  color: black;
  text-decoration: none;

}
.red{
  background-color: red;

}
</style>
</head>
<body>

<ul>
  <li>  <?php
      $user = $_SESSION['user_email'];
      $get_user="select * from users where user_email='$user'";
      $run_user=mysqli_query($con,$get_user);
      $row=mysqli_fetch_array($run_user);

      $user_name = $row['user_name'];
      echo "<b><a class='active' href='home.php?user_name=$user_name'><img src='images/Chat.png' height='20px'>iChat</a></li>";
       ?>
</li>
  <li><a class="" style="pointer-events:none;">Welcome, <?php echo "$user_name"; ?> </a></li>
  <li style="float:right; right:4px;top:6px;" >   <form method="post">
  <button name="logout" class="btn btn-danger" style="margin-right:5px;margin-top:5px;">Logout</button>
</form>
  <?php
     if(isset($_POST['logout'])){
       $update_msg = mysqli_query($con, "UPDATE users SET log_in='Offline'
       WHERE user_name='$user_name'");
       header("Location:logout.php");
       exit();


     }
     ?></li>
  <li style="float:right"><a  href="account_settings.php">
<i style="font-size:12px" class="fa"></i> Account Settings </a></li>
    <li style="float:right"><a  href="include/find_friends.php">
  <i style="font-size:12px" class="fa">	</i> Add Friends </a></li></b>
</ul>
    <br>
  <div class="row">
      <div class="col-sm-2">
      </div>

       <div class="col-sm-8">
         <form action="" method="post" enctype="multipart/form-data">
           <table class="table table-bordered table-hover">
             <tr aligh="center">
               <td colspan="6"><h2>Change Password </h2></td>
             </tr>
             <tr>
               <td style="font-weight:bold;">Current Password </td>
               <td>
                 <input type="password" name="current_pass" id="mypass" class="form-control" required
                 placeholder="Current Password" />
               </td>
             </tr>
             <tr>
               <td style="font-weight:bold;">New Password </td>
               <td>
                 <input type="password" name="u_pass1" id="mypass" class="form-control" required
                 placeholder="New Password" />
               </td>
             </tr>
             <tr>
               <td style="font-weight:bold;">Confirm Password </td>
               <td>
                 <input type="password" name="u_pass2"  id="mypass" class="form-control" required
                 placeholder="Confirm Password" />
               </td>
             </tr>
             <tr align="center">
               <td colspan="6">
                 <input type="submit" name="change"  value="Change" class="btn btn-primary" />
               </td>
             </tr>

           </table>
         </form>
         <?php
              if(isset($_POST['change'])){
                $c_pass=$_POST['current_pass'];
                $pass1=$_POST['u_pass1'];
                $pass2=$_POST['u_pass2'];

                $user = $_SESSION['user_email'];
                $get_user="select * from users where user_email='$user'";
                $run_user=mysqli_query($con,$get_user);
                $row=mysqli_fetch_array($run_user);

                $user_pass = $row['user_pass'];
                    if($c_pass != $user_pass){
                      echo "
                            <div class='alert alert-danger'>
                            <strong>Your Old Password didn't match</strong>
                            </div>
                      ";

                    }
                    if($pass1 != $pass2){
                      echo " <div class='alert alert-danger'>
                            <strong>Your New Password didn't match with Confirm password.</strong>
                              </div>

                          ";
                    }

                  if($pass1 < 8 AND $pass2 < 8){
                    echo " <div class='alert alert-danger'>
                          <strong>Use 8 or more than 8 characters.</strong>
                            </div>

                        ";
                  }
                  if($pass1 == $pass2 AND $c_pass == $user_pass){
                    $update_pass=mysqli_query($con, "UPDATE users SET user_pass='$pass1' WHERE
                    user_email='$user'");
                    echo " <div class='alert alert-danger'>
                          <strong>Your Password has been changed.</strong>
                            </div>

                        ";
                  }
              }
         ?>
       </div>

       <div class="col-sm-2">

       </div>


  </div>

</body>
</html>
<?php } ?>

Lastly, We will create the code for our Log Out Button on our navigation bar.

logout.php

<?php
session_start();

session_destroy();
header("Location:signin.php");


 ?>

Setting Up Database and Table Using PHPMyAdmin

Create a database called ichat. Inside the database, create 2 tables and name them as (users & users_chat). Below is the field structure format for each table.

users table

users_chat table

After setting up our database and tables we will now create the connection to make our php codes work.

Creating Connection for Database and PHP files

Last but not the least we will create our connection.php code. All our codes that require database and stuff will not work if we dont have this connection. Our connection.php file will be place inside our include folder.

connection.php

<?php
$con=mysqli_connect("localhost","root","","ichat") or die ("Connection was not established");


 ?>

Now we are finally done. Its time to run it in our localhost and see our very own Chat App that we created using PHP and MySQL.

Thank you!…

Share this Post

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*