Create a multi language(lingual) website with Unicode

In this article you will get to know how to create a multi language(lingual) website with Unicode

What is Unicode :
According to unicode.org, Fundamentally, computers just deal with numbers. They store letters and other characters by assigning a number for each one. Before Unicode was invented, there were hundreds of different systems, called character encodings, for assigning these numbers. These early character encodings were limited and could not contain enough characters to cover all the world's languages. Even for a single language like English no single encoding was adequate for all the letters, punctuation, and technical symbols in common use. Early character encodings also conflicted with one another. That is, two encodings could use the same number for two different characters, or use different numbers for the same character. Any given computer (especially servers) would need to support many different encodings. However, when data is passed through different computers or between different encodings, that data runs the risk of corruption.

How Unicode changed the situation:
The Unicode Standard provides a unique number for every character, no matter what platform, device, application or language. It has been adopted by all modern software providers and now allows data to be transported through many different platforms, devices and applications without corruption. Support of Unicode forms the foundation for the representation of languages and symbols in all major operating systems, search engines, browsers, laptops, and smart phones—plus the Internet and World Wide Web (URLs, HTML, XML, CSS, JSON, etc.). Supporting Unicode is the best way to implement ISO/IEC 10646. The emergence of the Unicode Standard and the availability of tools supporting it are among the most significant recent global software technology trends.

Let's get started:

• Create a main dir named 'multi_lingual_form'. In the main dir create dir named 'common' an create a file named 'commons.php' and write the script below:

  <?php
  require_once(__DIR__.'/../controllers/UserController.php');
  ?>
  <?php
      if($_SERVER['REQUEST_METHOD'] === "POST"){
          //echo json_encode($_POST);
          switch($_POST['ActionToCall']){
  
              case "user_register" :
                  $new_user = new UserController();
                  echo $new_user->user_register($_POST);
              break;
  
              case "user_login" :
                  $new_user = new UserController();
                  echo $new_user->user_login($_POST);
              break;
  
              case "user_update" :
                  $new_user = new UserController();
                  echo $new_user->user_update($_POST);
              break;
  
              case "get_cities" :
                  $ret_arr = [];
                  $con = mysqli_connect("localhost","root","","multi_lingual_base");
                  $qry = "select * from all_cities where state_id=".$_POST['state_id']." order by city_name";
                  $result = mysqli_query($con,$qry);
                  while($res = mysqli_fetch_assoc($result)){
                      $ret_arr[] = $res;
                  }
                  mysqli_close($con);
                  echo json_encode($ret_arr);
              break;
  
          }
      }
      
  ?>
  
  <?php
      function getStatesList(){
          $ret_arr = [];
          $con = mysqli_connect("localhost","root","","multi_lingual_base");
          $qry = "select * from state_list order by id asc";
          $result = mysqli_query($con,$qry);
          while($res = mysqli_fetch_assoc($result)){
              $ret_arr[] = $res;
          }
          mysqli_close($con);
          return $ret_arr;
      }
  
      function getDistrictsList(){
          $ret_arr = [];
          $con = mysqli_connect("localhost","root","","multi_lingual_base");
          $qry = "select * from all_cities order by city_name asc";
          $result = mysqli_query($con,$qry);
          while($res = mysqli_fetch_assoc($result)){
              $ret_arr[] = $res;
          }
          mysqli_close($con);
          return $ret_arr;
      }
  
      function getUserDetails($user_id){
          $ret_arr = [];
          $con = mysqli_connect("localhost","root","","multi_lingual_base");
          $qry = "select * from mlf_users where user_id=".$user_id;
          $result = mysqli_query($con,$qry);
          while($res = mysqli_fetch_assoc($result)){
              $ret_arr[] = $res;
          }
          mysqli_close($con);
          return $ret_arr;
      }
  ?>

   




• Now create another dir and name it 'controllers' and create a file int it and name it 'UserController.php' and write script below:

  <?php
  class UserController {
      private $table_name = "mlf_users";
      private $host = "localhost";
      private $user = "root";
      private $pass = "";
      private $dbs = "multi_lingual_base";
      private $con = null;
  
      private function connect_to_dbs(){
          $this->con = mysqli_connect(
              $this->host,
              $this->user,
              $this->pass,
              $this->dbs
          );
      }
  
      private function close_con(){
          mysqli_close($this->con);
      }
  
      public function user_register($req_data){
          $id = 0;
          $sur_name = $req_data['sur_name'];
          $first_name = $req_data['first_name'];
          $f_h_name = $req_data['f_h_name'];
          $adhar_no = $req_data['adhar_no'];
          $address = $req_data['address'];
          $village = $req_data['village'];
          $taluka = $req_data['taluka'];
          $state = $req_data['state'];
          $district = $req_data['district'];
          $country = $req_data['country'];
          $pincode = $req_data['pincode'];
          $phone_no = $req_data['phone_no'];
          $mob_no = $req_data['mob_no'];
          $whatsapp_no = $req_data['whatsapp_no'];
          $telegtam_no = $req_data['telegram_no'];
          $email = $req_data['email'];
          $str = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
          $password = substr(str_shuffle($str),0,8);
          $this->connect_to_dbs();
          $qry = "insert into mlf_users values(".$id.",'".$sur_name."','".$first_name."','".$f_h_name."','".$adhar_no."','".$address."','".$village."','".$taluka."','".$state."','".$district."','".$country."','".$pincode."','".$phone_no."','".$mob_no."','".$whatsapp_no."','".$telegtam_no."','".$email."','".$password."')";
          $result = mysqli_query($this->con,$qry);
          if($result){
              $ret_arr = array(
                  "status"=>true,
                  "msg"=>"success",
                  "pass"=>$password
              );
          }
          else{
              $ret_arr = array(
                  "status"=>false,
                  "msg"=>"Error. Try again later"
              );
          }
          $this->close_con();
          return json_encode($ret_arr);
      }
  
      public function user_login($req_data){
          $email = $req_data['email'];
          $password = $req_data['password'];
  
          $qry = "select * from mlf_users where email='".$email."' and password='".$password."'";
          $this->connect_to_dbs();
          $result = mysqli_query($this->con,$qry);
          $res = mysqli_fetch_assoc($result);
          if(!empty($res)){
              session_start();
              $_SESSION['user_details'] = $res;
              $ret_arr = array(
                  "status"=>true,
                  "msg"=>"success"
              );
          }
          else{
              $ret_arr = array(
                  "status"=>false,
                  "msg"=>"No data found. Please register first."
              );
          }
          $this->close_con();
          return json_encode($ret_arr);
      }
  
      public function user_update($req_data){
          $id = $req_data['user_id'];
          $sur_name = $req_data['sur_name'];
          $first_name = $req_data['first_name'];
          $f_h_name = $req_data['f_h_name'];
          $adhar_no = $req_data['adhar_no'];
          $address = $req_data['address'];
          $village = $req_data['village'];
          $taluka = $req_data['taluka'];
          $state = $req_data['state'];
          $district = $req_data['district'];
          $country = $req_data['country'];
          $pincode = $req_data['pincode'];
          $phone_no = $req_data['phone_no'];
          $mob_no = $req_data['mob_no'];
          $whatsapp_no = $req_data['whatsapp_no'];
          $telegtam_no = $req_data['telegram_no'];
          $this->connect_to_dbs();
          $qry = "update mlf_users set sur_name='".$sur_name."',first_name='".$first_name."',f_h_name='".$f_h_name."',adhar_no='".$adhar_no."',address='".$address."',village='".$village."',taluka='".$taluka."',state='".$state."',district='".$district."',country='".$country."',pincode='".$pincode."',phone_no='".$phone_no."',mob_no='".$mob_no."',whatsapp_no='".$whatsapp_no."',telegram_no='".$telegtam_no."' where user_id=".$id;
          $result = mysqli_query($this->con,$qry);
          if($result){
              $ret_arr = array(
                  "status"=>true,
                  "msg"=>"successfully updated"
              );
          }
          else{
              $ret_arr = array(
                  "status"=>false,
                  "msg"=>"Error. Try again later"
              );
          }
          $this->close_con();
          return json_encode($ret_arr);
      }
  }
  ?>

   




• Create dir named 'css' and create a file in it and name it 'app.css' and write script below:

  .nav_bar{
      padding: 10px;
      margin: 0;
      background-color:goldenrod;
  }
  .nav_bar li{
      display: inline;
      color:white;
      margin-right: 10px;
  }
  .nav_bar li a{
      color:white;
      font-size: 20px;
      text-decoration: none;
  }
  
  .right_items{
      float:right;
  }

   




• Create dir named 'js' and create a file in it and name it 'app.js' and write script below:

  var url_to_request = window.location.origin+"/multi_lingual_form/common/commons.php";
  
  if(document.getElementById('user_register_frm') == null){}
  else{
      document.getElementById('user_register_frm').addEventListener('submit',function(e){
          e.preventDefault();
          
          $.ajax({
              url:url_to_request,
              type:'POST',
              data        : new FormData(this), // our data object
              dataType    : 'json', // what type of data do we expect back from the server
              encode      : true,
              contentType: false,
              cache: false,
              processData:false,
              success:function(r){
                  console.log(r);
                  if(r.status == true){
                      $("#user_register_frm #success_msg_alert").html("Successfully registered. "+r.pass+" is your password. Use this password and the email you typed to login. Go to <a href='login.php'>Login</a>");
                      $("#user_register_frm #success_msg_alert").fadeIn();
                      
                  }
                  else{
                      $("#user_register_frm #error_msg_alert").html("Error. Try again later");
                      $("#user_register_frm #error_msg_alert").fadeIn();
                      setTimeout(function(){
                          $("#user_register_frm #error_msg_alert").fadeOut();
                      },1300);
                  }
              },
              error:function(err){ 
                  console.error(err);               
                  $("#user_register_frm #warning_msg_alert").html("Server internal error.");
                  $("#user_register_frm #warning_msg_alert").fadeIn();
                  setTimeout(function(){
                      $("#user_register_frm #warning_msg_alert").fadeOut();
                  },1300);
              }
          });
      });
  }
  
  if(document.getElementById('user_login_frm') == null){}
  else{
      document.getElementById('user_login_frm').addEventListener('submit',function(e){
          e.preventDefault();
          
          $.ajax({
              url:url_to_request,
              type:'POST',
              data        : new FormData(this), // our data object
              dataType    : 'json', // what type of data do we expect back from the server
              encode      : true,
              contentType: false,
              cache: false,
              processData:false,
              success:function(r){
                  //console.log(r);
                  if(r.status == true){
                      $("#user_login_frm #success_msg_alert").html("Successfully logged in.");
                      $("#user_login_frm #success_msg_alert").fadeIn();
                      window.location.href = window.location.origin+"/multi_lingual_form/profile.php"
                      
                  }
                  else{
                      $("#user_login_frm #error_msg_alert").html(r.msg);
                      $("#user_login_frm #error_msg_alert").fadeIn();
                      setTimeout(function(){
                          $("#user_login_frm #error_msg_alert").fadeOut();
                      },1300);
                  }
              },
              error:function(err){ 
                  //console.error(err);               
                  $("#user_login_frm #warning_msg_alert").html("Server internal error.");
                  $("#user_login_frm #warning_msg_alert").fadeIn();
                  setTimeout(function(){
                      $("#user_login_frm #warning_msg_alert").fadeOut();
                  },1300);
              }
          });
      });
  }
  
  if(document.getElementById('user_update_frm') == null){}
  else{
      document.getElementById('user_update_frm').addEventListener('submit',function(e){
          e.preventDefault();
          
          $.ajax({
              url:url_to_request,
              type:'POST',
              data        : new FormData(this), // our data object
              dataType    : 'json', // what type of data do we expect back from the server
              encode      : true,
              contentType: false,
              cache: false,
              processData:false,
              success:function(r){
                  console.log(r);
                  if(r.status == true){
                      $("#user_update_frm #success_msg_alert").html(r.msg);
                      $("#user_update_frm #success_msg_alert").fadeIn();
                      setTimeout(function(){
                          window.location.reload();
                      },1500);
                      
                  }
                  else{
                      $("#user_update_frm #error_msg_alert").html(r.msg);
                      $("#user_update_frm #error_msg_alert").fadeIn();
                      setTimeout(function(){
                          $("#user_update_frm #error_msg_alert").fadeOut();
                      },1300);
                  }
              },
              error:function(err){ 
                  console.error(err);               
                  $("#user_update_frm #warning_msg_alert").html("Server internal error.");
                  $("#user_update_frm #warning_msg_alert").fadeIn();
                  setTimeout(function(){
                      $("#user_update_frm #warning_msg_alert").fadeOut();
                  },1300);
              }
          });
      });
  }
  
  
  
  
  
  //state_dd onchange event
  if(document.getElementById('state_dd') == null){}
  else{
      state_dd = document.getElementById('state_dd');
  
  
      state_dd.addEventListener('change',function(e){
          $("#loader").modal({
              backdrop:false,
              keyboard:false
          });
          var sel_state = (this.value);
          var data_to_send = {
              ActionToCall : "get_cities",
              state_id : sel_state
          };
          $("#city_dd").empty();
          $("#city_dd").append("<option value=''>Select</option>");
          $.ajax({
              url:url_to_request,
              type:'POST',
              data:data_to_send, // our data object
              dataType    : 'json', // what type of data do we expect back from the server
              encode      : false,
              success:function(r){
                  for(var i=0;i<r.length;i++){
                      $("#city_dd").append("<option value='"+r[i].city_id+"'>"+r[i].city_name+"</option>"); 
                  }     
                  $("#loader").modal('hide');       
              },
              error:function(err){ 
                  console.error(err);
              }
          });
      });
      
  }

   




• Create a file in main dir and name it 'index.php' and write script below:

  <?php
  include_once(__DIR__.'/common/commons.php');
  if($_SERVER['REQUEST_METHOD'] === "POST"){
      if((!isset($_REQUEST['language'])) || ((isset($_REQUEST['language'])) && $_REQUEST['language'] === "en")|| ((isset($_REQUEST['language'])) && $_REQUEST['language'] === "")){
          echo "<script>alert('Your form was submitted with English details.')</script>";
      }
      else{
          echo "<script>alert('Your form was submitted with Hindi details.')</script>";
      }
  }
  ?>
  
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./css/app.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <title>Multi lingual form</title>
  </head>
  <body>
  <?php include_once(__DIR__.'/navbar.php'); ?>
  <div class="container" style="margin-top:20px;margin-bottom:120px;">
          <div class="jumbotron jumbotron-fluid">
              <div class="container">
                  <h1 class="display-4">
  <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
  Register
                      <?php }else {?>
                      प्रपत्र
                      <?php } ?>
                  </h1>
              </div>
          </div>
  
          <form action="" method="post" id="user_register_frm">
          <input type="hidden" name="ActionToCall" value="user_register" />
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <div class="alert alert-success" id="success_msg_alert" style="display:none;"></div>
                      <div class="alert alert-danger" id="error_msg_alert" style="display:none;"></div>
                      <div class="alert alert-warning" id="warning_msg_alert" style="display:none;"></div>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                          <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Surname
                          <?php }else {?>
                          उपनाम
                          <?php } ?>
                      </label>
                      <input type="text" name="sur_name" class="form-control" required>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                          <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Name
                          <?php }else {?>
                          नाम
                          <?php } ?>
                      </label>
                      <input type="text" name="first_name" class="form-control" required>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Father/Husband Name
                          <?php }else {?>
                          पिता/पति का नाम
                          <?php } ?>
                      </label>
                      <input type="text" name="f_h_name" class="form-control" required>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Adhar No
                          <?php }else {?>
                          आधार नं.
                          <?php } ?>
                      </label>
                      <input type="text" name="adhar_no" class="form-control" required>
                  </div>
              </div>
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Address (Society/Street/House No)
                          <?php }else {?>
                          पता (सोसायटी/स्ट्रीट/हाउस नं)
                          <?php } ?>
                      </label>
                      <textarea required rows="5" cols="10" style="width:100%;" type="text" name="address" class="form-control"></textarea>
                  </div>
              </div>
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Village
                          <?php }else {?>
                          गांव
                          <?php } ?>
                      </label>
                      <input type="text" required name="village" class="form-control"></textarea>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Taluka
                          <?php }else {?>
                          तालुका
                          <?php } ?>
                      </label>
                      <input type="text" required name="taluka" class="form-control"></textarea>
                  </div>
              </div>
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          State
                          <?php }else {?>
                          राज्य
                          <?php } ?>
                      </label>
                      <select id="state_dd" name="state" class="form-control" required>
                          <option value="">
                              <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              Select
                              <?php }else {?>
                              चुनें
                              <?php } ?>
                          </option>
                          <?php 
                          $s_list = getStatesList();
                          foreach($s_list as $state){
                              if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              <option value="<?php echo $state['id']; ?>"><?php echo $state['state']; ?></option>
                          <?php }
                          else{?>
                              <option value="<?php echo $state['id']; ?>"><?php echo $state['state_hindi']; ?></option>
                          <?php }
                          } 
                          ?>
                      </select>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          District
                          <?php }else {?>
                          जिला
                          <?php } ?>
                      </label>
                      <select id="city_dd" name="district" class="form-control" required>
                          <option value="">
                              <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              Select
                              <?php }else {?>
                              चुनें
                              <?php } ?>
                          </option>
                          <?php 
                          $s_list = getDistrictsList();
                          foreach($s_list as $state){
                              if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              <option value="<?php echo $state['city_id']; ?>"><?php echo $state['city_name']; ?></option>
                          <?php }
                          else{?>
                              <option value="<?php echo $state['city_id']; ?>"><?php echo $state['city_name']; ?></option>
                          <?php }
                          } 
                          ?>
                      </select>
                  </div>
              </div>
  
  
              
          </div>
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Country
                          <?php }else {?>
                          देश
                          <?php } ?>
                      </label>
                      <input type="text" required name="country" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Pincode
                          <?php }else {?>
                          पिनकोड
                          <?php } ?>
                      </label>                    
                      <input type="text" required name="pincode" class="form-control" />
                  </div>
              </div>
              
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Phone No.
                          <?php }else {?>
                          फोन नं.
                          <?php } ?>
                      </label>
                      <input type="text" required name="phone_no" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Mob No.
                          <?php }else {?>
                          मोबाइल नं. 
                          <?php } ?>
                      </label>                    
                      <input type="text" required name="mob_no" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Whatsapp No.
                          <?php }else {?>
                          व्हाट्सएप नं.
                          <?php } ?>
                      </label>                    
                      <input type="text" required name="whatsapp_no" class="form-control" />
                  </div>
              </div>
              
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Telegram No.
                          <?php }else {?>
                          टेलीग्राम नं.
                          <?php } ?>
                      </label>
                      <input type="text" required name="telegram_no" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Email
                          <?php }else {?>
                          ईमेल
                          <?php } ?>
                      </label>                    
                      <input type="email" required name="email" class="form-control" />
                  </div>
              </div>
              
          </div>
  
  
          <div class="row">
              <div class="col-sm">
                  <input type="submit" class="btn btn-primary" value="<?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>Submit<?php } else {?>जमा करें<?php } ?>">
              </div>
          </div>
          </form>
  
          
      </div>
  
      <!-- Modal -->
      <div class="modal" id="loader" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Loading districts...</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                  </button>
              </div>
              <div class="modal-body">
                  <img src="./loader.gif"/>
              </div>
              <div class="modal-footer">
              </div>
              </div>
          </div>
      </div>
  
      
  
      
  
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
      <script>
          var choose_lang_dd = document.getElementById('choose_lang_dd');
          choose_lang_dd.addEventListener('change',function(e){
              var value = this.value;
              var urlToBrowse = window.location.origin+''+window.location.pathname+'?language='+value;
              if(value === ""){
                  window.location.href = window.location.origin+''+window.location.pathname+'?language=';
              }
              else{
                  window.location.href = window.location.origin+''+window.location.pathname+'?language='+value;
              }
              console.log(window.location.origin+''+window.location.pathname);
              //var text = e.options[e.selectedIndex].text;
              
          });
      </script>
  
      <script src="./js/app.js"></script>
  </body>
  </html>

   




• Create a file in main dir and name it 'login.php' and write script below:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./css/app.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <title>Login - Multi lingual form</title>
  </head>
  <body>
  <?php include_once(__DIR__.'/navbar.php'); ?>
  
      <div class="container" style="margin-top:20px;margin-bottom:120px;">
          <div class="jumbotron jumbotron-fluid">
              <div class="container">
                  <h1 class="display-4">
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                      Login
                      <?php }else {?>
                      लॉगिन
                      <?php } ?>
                  </h1>
              </div>
          </div>
  
          <form action="" method="post" id="user_login_frm">
          <input type="hidden" name="ActionToCall" value="user_login" />
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <div class="alert alert-success" id="success_msg_alert" style="display:none;"></div>
                      <div class="alert alert-danger" id="error_msg_alert" style="display:none;"></div>
                      <div class="alert alert-warning" id="warning_msg_alert" style="display:none;"></div>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                          <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Email
                          <?php }else {?>
                          ईमेल
                          <?php } ?>
                      </label>
                      <input type="email" name="email" class="form-control" required>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                          <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Password
                          <?php }else {?>
                          पासवर्ड
                          <?php } ?>
                      </label>
                      <input type="password" name="password" class="form-control" required>
                  </div>
              </div>
          </div>
          
          
          <div class="row">
              <div class="col-sm">
                  <input type="submit" class="btn btn-primary" value="<?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>Login<?php } else {?>लॉगिन<?php } ?>">
              </div>
          </div>
          </form>
  
          
      </div>
  
      
  
      
  
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
      <script>
          var choose_lang_dd = document.getElementById('choose_lang_dd');
          choose_lang_dd.addEventListener('change',function(e){
              var value = this.value;
              var urlToBrowse = window.location.origin+''+window.location.pathname+'?language='+value;
              if(value === ""){
                  window.location.href = window.location.origin+''+window.location.pathname+'?language=';
              }
              else{
                  window.location.href = window.location.origin+''+window.location.pathname+'?language='+value;
              }
              console.log(window.location.origin+''+window.location.pathname);
              //var text = e.options[e.selectedIndex].text;
              
          });
      </script>
  
      <script src="./js/app.js"></script>
  </body>
  </html>

   




• Create a file in main dir and name it 'logout.php' and write script below:

  <?php
  session_start();
  session_destroy();
  header('location:/multi_lingual_form/login.php');
  ?>

   




• Create a file in main dir and name it 'navbar.php' and write script below:

  <ul class="nav_bar container">
      <?php if(empty($_SESSION)){?>
          <li><a href="./login.php?language=<?php echo isset($_REQUEST['language'])?$_REQUEST['language']:"en"; ?>"><?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>Login<?php } else {?>लॉगिन<?php } ?></a></li>
          <li><a href="./?language=<?php echo isset($_REQUEST['language'])?$_REQUEST['language']:"en"; ?>"><?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>Register<?php } else {?>पंजीकृत करें<?php } ?></a></li>
      <?php }else{ ?>        
          <li><a><?php echo $user['first_name']; ?></a></li>
          <li><a href="./logout.php"><?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>Logout<?php } else {?>लॉगआउट<?php } ?></a></li>
      <?php } ?>
      
      
      <li class="right_items">
          <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>Select language<?php } else {?>भाषा चुनें<?php } ?>
          <select name="language" id="choose_lang_dd">
              <option value="" <?php if((!isset($_REQUEST['language']))||$_REQUEST['language']===""){echo 'selected';}else{echo '';} ?>>Select</option>
              <option value="en" <?php if((isset($_REQUEST['language']))&&$_REQUEST['language']==="en"){echo 'selected';}else{echo '';} ?>>English</option>
              <option value="hin" <?php if((isset($_REQUEST['language']))&&$_REQUEST['language']==="hin"){echo 'selected';}else{echo '';} ?>>Hindi</option>
          </select>
      </li>
  </ul>

   




• Create a file in main dir and name it 'profile.php' and write script below:

  <?php
  include_once(__DIR__.'/common/commons.php');
  session_start();
  if(empty($_SESSION)){
      header('location:/multi_lingual_form/login.php');
  }
  else{
      $user_id = $_SESSION['user_details']['user_id'];
      $user = getUserDetails($user_id);
      $user = $user[0];
  }
  ?>
  
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./css/app.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <title><?php echo $user['first_name']; ?></title>
  </head>
  <body>
      <?php include_once(__DIR__.'/navbar.php'); ?>
  
      <div class="container" style="margin-top:20px;margin-bottom:120px;">
          <div class="jumbotron jumbotron-fluid">
              <div class="container">
                  <h3>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          <?php echo $user['first_name'].' '.$user['sur_name']; ?> - Update Details
                      <?php }else {?>
                          <?php echo $user['first_name'].' '.$user['sur_name']; ?> - डेटा अपडेट करें
                      <?php } ?>
                  </h3>
              </div>
          </div>
  
          <form action="" method="post" id="user_update_frm">
          <input type="hidden" name="ActionToCall" value="user_update" />
          <input type="hidden" name="user_id" value="<?php echo $user['user_id']; ?>" />
          
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                          <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Surname
                          <?php }else {?>
                          उपनाम
                          <?php } ?>
                      </label>
                      <input type="text" name="sur_name" value="<?php echo (isset($user['sur_name']))?$user['sur_name']:''; ?>" class="form-control" required>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                          <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Name
                          <?php }else {?>
                          नाम
                          <?php } ?>
                      </label>
                      <input type="text" name="first_name" class="form-control" value="<?php echo (isset($user['first_name']))?$user['first_name']:''; ?>" required>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Father/Husband Name
                          <?php }else {?>
                          पिता/पति का नाम
                          <?php } ?>
                      </label>
                      <input type="text" name="f_h_name" value="<?php echo (isset($user['f_h_name']))?$user['f_h_name']:''; ?>" class="form-control" required>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Adhar No
                          <?php }else {?>
                          आधार नं.
                          <?php } ?>
                      </label>
                      <input type="text" name="adhar_no" value="<?php echo (isset($user['adhar_no']))?$user['adhar_no']:''; ?>" class="form-control" required>
                  </div>
              </div>
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Address (Society/Street/House No)
                          <?php }else {?>
                          पता (सोसायटी/स्ट्रीट/हाउस नं)
                          <?php } ?>
                      </label>
                      <textarea required rows="5" cols="10" style="width:100%;" type="text" name="address" class="form-control"><?php echo (isset($user['address']))?$user['address']:''; ?></textarea>
                  </div>
              </div>
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Village
                          <?php }else {?>
                          गांव
                          <?php } ?>
                      </label>
                      <input type="text" required name="village" value="<?php echo (isset($user['village']))?$user['village']:''; ?>" class="form-control"></textarea>
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Taluka
                          <?php }else {?>
                          तालुका
                          <?php } ?>
                      </label>
                      <input type="text" required name="taluka" value="<?php echo (isset($user['taluka']))?$user['taluka']:''; ?>" class="form-control"></textarea>
                  </div>
              </div>
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          State
                          <?php }else {?>
                          राज्य
                          <?php } ?>
                      </label>
                      <select id="state_dd" name="state" class="form-control" required>
                          <option value="" <?php echo (isset($user['state']))?:'selected'; ?>>
                              <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              Select
                              <?php }else {?>
                              चुनें
                              <?php } ?>
                          </option>
                          <?php 
                          $s_list = getStatesList();
                          foreach($s_list as $state){
                              if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              <option <?php echo ($user['state'] === $state['id'])?'selected':''; ?> value="<?php echo $state['id']; ?>"><?php echo $state['state']; ?></option>
                          <?php }
                          else{?>
                              <option <?php echo ($user['state'] === $state['id'])?'selected':''; ?> value="<?php echo $state['id']; ?>"><?php echo $state['state_hindi']; ?></option>
                          <?php }
                          } 
                          ?>
                      </select>
                  </div>
              </div>
              
              
  
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          District
                          <?php }else {?>
                          जिला
                          <?php } ?>
                      </label>
                      <select id="city_dd" name="district" class="form-control" required>
                          <option value="">
                              <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              Select
                              <?php }else {?>
                              चुनें
                              <?php } ?>
                          </option>
                          <?php 
                          $s_list = getDistrictsList();
                          foreach($s_list as $city){
                              if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                              <option <?php echo ($user['district'] === $city['city_id'])?'selected':''; ?> value="<?php echo $city['city_id']; ?>"><?php echo $city['city_name']; ?></option>
                          <?php }
                          else{?>
                              <option <?php echo ($user['district'] === $city['city_id'])?'selected':''; ?> value="<?php echo $city['city_id']; ?>"><?php echo $city['city_name']; ?></option>
                          <?php }
                          } 
                          ?>
                      </select>
                  </div>
              </div>
  
  
              
          </div>
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Country
                          <?php }else {?>
                          देश
                          <?php } ?>
                      </label>
                      <input type="text" value="<?php echo (isset($user['country']))?$user['country']:''; ?>" required name="country" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Pincode
                          <?php }else {?>
                          पिनकोड
                          <?php } ?>
                      </label>                    
                      <input type="text" value="<?php echo (isset($user['pincode']))?$user['pincode']:''; ?>" required name="pincode" class="form-control" />
                  </div>
              </div>
              
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Phone No.
                          <?php }else {?>
                          फोन नं.
                          <?php } ?>
                      </label>
                      <input type="text" value="<?php echo (isset($user['phone_no']))?$user['phone_no']:''; ?>" required name="phone_no" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Mob No.
                          <?php }else {?>
                          मोबाइल नं. 
                          <?php } ?>
                      </label>                    
                      <input type="text" value="<?php echo (isset($user['mob_no']))?$user['mob_no']:''; ?>" required name="mob_no" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Whatsapp No.
                          <?php }else {?>
                          व्हाट्सएप नं.
                          <?php } ?>
                      </label>                    
                      <input type="text" value="<?php echo (isset($user['whatsapp_no']))?$user['whatsapp_no']:''; ?>" required name="whatsapp_no" class="form-control" />
                  </div>
              </div>
              
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Telegram No.
                          <?php }else {?>
                          टेलीग्राम नं.
                          <?php } ?>
                      </label>
                      <input type="text" value="<?php echo (isset($user['telegram_no']))?$user['telegram_no']:''; ?>" required name="telegram_no" class="form-control" />
                  </div>
              </div>
              <div class="col-sm">
                  <div class="form-group">
                      <label>
                      <?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>
                          Email
                          <?php }else {?>
                          ईमेल
                          <?php } ?>
                      </label>                    
                      <input type="email" value="<?php echo (isset($user['email']))?$user['email']:''; ?>" readonly name="email" class="form-control" />
                  </div>
              </div>
              
          </div>
  
          <div class="row">
              <div class="col-sm">
                  <div class="form-group">
                      <div class="alert alert-success" id="success_msg_alert" style="display:none;"></div>
                      <div class="alert alert-danger" id="error_msg_alert" style="display:none;"></div>
                      <div class="alert alert-warning" id="warning_msg_alert" style="display:none;"></div>
                  </div>
              </div>
          </div>
  
  
          <div class="row">
              <div class="col-sm">
                  <input type="submit" class="btn btn-primary" value="<?php if((!isset($_REQUEST['language']))||$_REQUEST['language'] === "en" || $_REQUEST['language'] === ""){?>Update<?php } else {?>अपडेट<?php } ?>">
              </div>
          </div>
          </form>
  
          
      </div>
  
  
  
      <!-- Modal -->
      <div class="modal" id="loader" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Loading districts...</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                  </button>
              </div>
              <div class="modal-body">
                  <img src="./loader.gif"/>
              </div>
              <div class="modal-footer">
              </div>
              </div>
          </div>
      </div>
  
      
  
      
  
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
      <script>
          var choose_lang_dd = document.getElementById('choose_lang_dd');
          choose_lang_dd.addEventListener('change',function(e){
              var value = this.value;
              var urlToBrowse = window.location.origin+''+window.location.pathname+'?language='+value;
              if(value === ""){
                  window.location.href = window.location.origin+''+window.location.pathname+'?language=';
              }
              else{
                  window.location.href = window.location.origin+''+window.location.pathname+'?language='+value;
              }
              console.log(window.location.origin+''+window.location.pathname);
              //var text = e.options[e.selectedIndex].text;
              
          });
      </script>
  
      <script src="./js/app.js"></script>
  </body>
  </html>

   

Done
For further reference, please check repository at https://github.com/progssp/multi_lingual_website

Sign in for comment. Sign in