Contact us...Newsletter
dzosoft.com - How to do it ?
dzosoft- order by asc dzosoft- order by desc



Buy Autodesk Products Today!

Audio Software - Download Today & Save 10-50%

Auto Europe vous offre des promotions sur les autos, les vols, et les hôtels.

 
 
 

How to create a chat application with PHP and HTML in just few steps

 
In this article I will try to explain in a simpler way the implementation part of our
chat application that I had shown on the youtube channel.
You could download the whole project here   Download this project
Our application consists of 3 part :
  • Mysql database.
  • Backend part in php.
  • Client part in html, javascript and css.
  •  
    How to create a chat application with PHP and HTML in just few steps
     
     

    Step - 1 -

    Let's start with the database, let's assume that our database name is chat.
    We need to four tables
    • user
    • images
    • sendedMessage
    • session
    • See the structure of the tables in the following figure
       
      How to create a chat application with PHP and HTML in just few steps
       
      Let's assume that XAMPP has been installed, if not download it and see how to install it
      here   
       
      How to create a chat application with PHP and HTML in just few steps
       
      Open the browser and type https://localhost/dashboard/
       
      How to create a chat application with PHP and HTML in just few steps
       
      And then click on phpmyadmin, we will see our tables created in the database chat
      To create the tables you need to the following sql script
       

      User table

       
      CREATE TABLE `user` (
        `iduser` int(11) NOT NULL,
        `nickname` varchar(30) NOT NULL,
        `email` varchar(50) NOT NULL,
        `password` text NOT NULL,
        `idimage` int(11) DEFAULT NULL,
        `state` int(11) NOT NULL DEFAULT 0,
        `insertdate` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
        `updatedate` timestamp NOT NULL DEFAULT current_timestamp()
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
      
      ALTER TABLE `user`
        ADD PRIMARY KEY (`iduser`);
      
      ALTER TABLE `user`
        MODIFY `iduser` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=37;
      
      

       

      Images table

       
      CREATE TABLE `images` (
        `id` int(11) NOT NULL,
        `name` varchar(100) NOT NULL,
        `content` blob NOT NULL,
        `type` varchar(20) NOT NULL,
        `size` int(11) NOT NULL
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
      
      ALTER TABLE `images`
        ADD PRIMARY KEY (`id`);
        
      ALTER TABLE `images`
        MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=158;
      
      

       

      sendedmessage table

       
      CREATE TABLE `sendedmessage` (
        `idsender` int(11) NOT NULL,
        `idreceiver` int(11) NOT NULL,
        `message` varchar(500) NOT NULL,
        `message_read` int(11) NOT NULL DEFAULT 1,
        `sound` int(11) NOT NULL DEFAULT 1,
        `insertdate` timestamp NOT NULL DEFAULT current_timestamp()
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
      

       

      session table

       
      CREATE TABLE `session` (
        `iduser` int(11) NOT NULL,
        `ip` varchar(30) NOT NULL,
        `insertdate` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
      

       

      Step - 2 -

      Now let's move on to the PHP Backend part
      In all the application files I used the class 'DBClass' declared in the file db.dzo.class.php
      <?php
      
      class DBClass {
      
      	private $conn;// The database connection variable
      	
      	public function __construct($con) 
      	{
      		$this->conn =$con;
      	}
      	public function DBClass() 
      	{
      	}
      		// the methods which I will show later	
      		....
      		....
      		....	
      }
      ?>
      

      In this class I have grouped all the methods that I need like insertion into the database
      First to connect the user with nickname and password we need to the method ConnectUser
      <?php
      
      function connectUser($nickname,$password){
      	
      	$this->conn->query("SET NAMES UTF8"); 
      	$this->conn->query('SET CHARACTER SET utf8');
      	$query = "select iduser,password from user where nickname='".$nickname."'";
      	$result = $this->conn->query ( $query );
      	$iduser=0;
      	if ($result){
      		if (mysqli_num_rows ( $result ) > 0)
      		{
      			$row = @mysqli_fetch_row ( $result );
      			$iduser=$rowΎ];
      			
      			if (!password_verify($password, $rowΏ])) 
      			{
      				return  "Wrong password";
      			}
      			else 
      			{
      				$msgerr= $this->updSessionTable($iduser);
      				if(!empty($msgerr))
      				{
      					return $msgerr;
      				}
      			}
      		}
      		else 
      		{
      			return  "User not found !";
      		}
      	}
      	else
      	{
      		
      		return mysqli_error();
      	}
      		
      	return "id".$iduser;
      }
      //get the user email from the user ID
      function GetUserFromId($iduser) // return the user email
      {
      	$email="";
      	$query = 'select email  from user where iduser='.$iduser;
      	$result = $this->conn->query ( $query );
      	if ($result){
      		if (mysqli_num_rows ( $result ) > 0){
      
      			$row = @mysqli_fetch_row ( $result );
      			$email=$rowΎ];
      		}
      	}
      	return $email;
      }
      //delete the user session from the database
      function DeleteSessionTable($email)// When the user logout , we delete his session from the database 
      {
      
      	$query = "delete from session where iduser in ";
      	$query.= "(select iduser from user where email='".$email."')";
      	$result = $this->conn->query ( $query );
      	if (! $result)
      	{
      		return mysqli_error ();
      	}
      	
          
      	return "";
      }
      //create a user session
      function UpdSessionTable($iduser)
      {
       	$query = "";
      
      	$email=$this->GetUserFromId($iduser);
      	$msgerr=$this->DeleteSessionTable($email);
      	if(!empty($msgerr)) return $msgerr;
      	
      	$query = "INSERT INTO session (`iduser`,`ip`,`insertdate`) VALUES
      				 ($iduser,'".$this->getIp()."',now())";
      		
      	$result = $this->conn->query ( $query );
      	
      	if (! $result)
      	{
      		return mysqli_error ();
      	}
      	$_SESSION[$email]=$email;
      	// Update the user state (online state) when connected.
      	$this->UpdUserState($iduser,1); 
      	return "";
      }
      
      ?>
      
      

      To add the avatar, we need to this method AddAvatar to add the image in the database
      <?php
      
      function AddAvatar($fileName, $fileSize, $fileType, $content) 
      {
      	$query = "INSERT INTO images (name, size, type, content) ";
      	$query.= "VALUES ('$fileName', '$fileSize', '$fileType', '$content')";
      	$retval = $this->conn->query ( $query );
      	if (! $retval)
      	{
      		return mysqli_error ();
      	}
         return '';
      }
      
      ?>
      

      Instead the following method remove the avatar from the database
      <?php
      
      function RemoveAvatar($id)
      {
      	if ($id) 
      	{
      		if($id==0) return; // don't remove the defualt picture
      		$query = "DELETE FROM images  WHERE id = $id";
      		$result = $this->conn->query ( $query );
      		if (! $result)
      		{
      			return mysqli_error ();
      		}
      		return "The avatar is deleted ";
      	} 
      	 return "Unexpected error";
      	}	
      	
      ?>
      

      To view the avatar, use this function which returns the html code to the client
      The css class photoprofileonline,photoprofileaway are defined in the css file,
      the first allows you to show the user state online and the second show the user state away
      from the keyboard.
      <?php
      
      function ShowAvatar($id,$state,$count) 
      {
      	$html = '';
      	if($id==null) //When id is null the default avatar is shown.
      	{
      	  $id=0;
      	}
      	$query = "SELECT * FROM images where id =" . $id;
      	$result = $this->conn->query ( $query );
      	$class_state="photoprofileoffline";
      	$row = null;
      	while ( $row = @mysqli_fetch_array ( $result ) ) 
      	{
      		$img = $row ['content'];
      		$type = $row ['type'];
      		if($state==1)
      		{
      			$class_state="photoprofileonline"; 
      		}
      		else{
      			if($state==0)
      			{
      				$class_state="photoprofileaway";
      			}
      		}
      		if($count==0)
      		{
      			$count="";
      		}
      		$html ='<img class="'.$class_state.'" id="Photo" src="data:' . $type . ';base64,' 
      		$html.='base64_encode( $img ).'" style="widtht:100px; height:100px" ><div class="centered">';
      		$html.='<b><font size="5" color="red">'.$count.'</font></b></div>';
      	}
      	return $html;
      }
      
      ?>
      
      

      The method ShowProfile with the two parameters allows you to view the entire profile
      The first parameter is the image ID, the second is the user ID.
      This method returns the html code to the client
      <?php
      
      function ShowProfile($id,$iduser)
       {
      	$html = "";
      	if($id==null || empty($iduser)) //We take the default avatar
      	{
      	  $id=0;
      	}
      	$query = "SELECT * FROM images where id =" . $id;
      	$result = $this->conn->query ( $query );
      	$class_state="photoprofileoffline";
      	$row = null;
      	while ( $row = @mysqli_fetch_array ( $result ) ) {
      		
      		$img = $row ['content'];
      		$type = $row ['type'];
      		if(empty($iduser))
      		{
      			$html= '<br/><table  style="width:100%;height:150px;" ><tr><';
      			$html.='td align="center">';
      			$html.= '<img class="photoprofileoffline" id="PhotoUser" src="data:' . $type;
      			$html.=';base64,' . base64_encode ( $img ) . '" style="width:140px; height:140px" >';
      			$html.= '</td></tr></table>';
      		}else
      		{
      			$html = '<br/><table style="width:100%;height:150px;" ';
      			$html.='cellspacing="0px" cellpadding="0px">';
      			$html.='<tr><td align="center">';
      			$html.= '<div id="profileonline"><img class="'.$class_state.'"';
      			$html.='id="PhotoExit" src="data:' . $type;
      			$html.=';base64,' . base64_encode ( $img ) . '" style="width:100px; height:100px" ></div>';
      			$html.='</td></tr>';
      			$html.='<tr><td style="text-align:center;height:10px;"  class="titleProfile widthbtnprof"><br/>';
      			$html.='ucfirst($this->GetNickNameFromId($iduser)).'</td></tr>';
      			$html.='<tr><td>';
      			$html.=' ';
      			$html.='</td></tr>';
      			$html.='<tr><td>';
      			$html.='<button id="btnupdprofile"  onclick=';
      			$html.='"update_user(' .$iduser.'); return false;">';
      			$html.=' Profile</button>';
      			$html.='</td></tr>';
      			$html.='<tr><td>';
      			$html.='<button id="btnlogout"  onclick="exitChat();return false;';
      			$html.='"> Logout</button>';
      			$html.='</table>';
      			
      		}
      		$html .= '<input type="hidden" id="idimage" value="'.$id.'">';
      		$html .= '<input type="hidden" id="sender" value="'.$iduser.'">';
      		$html .= '<input type="hidden" id="reciever" value="">';
      	}
      
      	return $html;
      }
      
      ?>
      

      To get or change the user state we need to these methods
      <?php
      function getState($iduser) 
      {
      	$query = "select state  from user where iduser=".$iduser;
      	$result = $this->conn->query ( $query );
      	$row = mysqli_fetch_row($result);
      	return $rowΎ];
      }
      
      function updUserState($iduser,$state)
      {
      	$query = "update user set state=".$state." where iduser=".$iduser;
      	$result = $this->conn->query ( $query );
      }
      
      ?>
      
      

      To add a new user or to update an existant user we need to these methods:
      The first method shows the dialog box at the client level that allows the user to input his data,
      instead the second, add the user data in the database.
      <?php
      
      function ShowUserDialog($id,$password) 
      {
      	$this->conn->query("SET NAMES UTF8"); 
      	$this->conn->query('SET CHARACTER SET utf8');
      	$found=0;
      	$query = "select nickname, email,idimage from user where iduser =" . $id;
      	$result = $this->conn->query ( $query );
      	$row = null;
      	for($i=0;$i<10;$i++)
      	{
      		$row[$i] = "";
      	}
      	if ($result)
      	{
      		if (mysqli_num_rows ( $result ) > 0)
      		{
      			$row = @mysqli_fetch_row ( $result );
      		}
      	} 	
      	$html = '<table style="width:100%;border-spacing:2px;padding:2px;">';
      	$html .= '<tr><td width="60%"><td align="right">';
      	$html .= '<img  src="image/close16.jpg"  style="cursor: pointer;" onclick="closedlguser();" />';
      	$html .= '</td></tr>';
      	$html .= '<tr><td width="50%">';
      	$html .= '<table style="width:100%;border-spacing:2px;padding:2px;"><tr>';
      	$html .= '<td class="tdlabel" >Email<font color="red"> *</font></td><td >';
      	$html .= '<input type="text" size="30" id="email" maxlength="50" value="'.$row Ώ].'"></td></tr>';
      	$html .= '<td class="tdlabel">Nickname<font color="red"> *</font></td><td >';
      	$html .= '<input type="text" size="30" id="nickname" maxlength="30" value="'.$rowΎ].'"></td></tr>';
      	$html .= '<td class="tdlabel">Password<font color="red"> *</font></td><td>';
      	$html .= '<input type="password" size="10" id="password" maxlength="10" value="'.$password.'"></td></tr>';
      	$html .= '</table>';
      	$html .= '</td><td style="width:50%;vertical-align:top;"> ';
      	$html .= '<form method="post" id="formimage" name="formimage" enctype="multipart/form-data">';
      	$html .= '<table style="width:100%;border-spacing:1px;padding:1px;" class="box">';
      	$html .= '<tr>';
      	$html .= '<td>';
      	$html .= '<input type="hidden" name="paramimage">';
      	$html .= '<input type="hidden" name="MAX_FILE_SIZE" value="2000000">';
      	$html .= '<input type="file" id="userfileUser" style="display: none" ';
      	$html .= 'onChange="HandlechangeUser();"/>';
      	$html .= '</td>';
      	$html .= '</tr>';
      	$html .= '<tr>';
      	$html .= '<td style="text-align:center;">';
      	$html .= '<a class="action-button" onclick="HandleBrowseClickUser();">Avatar</a>';
      	$html .= '</td>';
      	$html .= '<td style="text-align:center;">';
      	$html .= '<a class="action-button" onclick="transfererImage(' . $id . ');">Load</a>';
      	$html .= '</td>';
      	$html .= '<td style="text-align:center;">';
      	$html .= '<a class="action-button" onclick="elimphotoprofile(' . $id . ');">Delete</a></td>';
      	$html .= '</tr>';
      	$html .= '</table>';
      	$html .= '<table style="width:100%;border-spacing:5px;padding:5px;">';
      	$html .= '<tr>';
      	$html .= '<td style="text-align:center;">';
      	$html .= '<input type="text" id="filenameUser" readonly="true" style="display: none"/>';
      	$html .= '<div id="divimaprofile">';
      	$html .= $this->ShowAvatar($row ΐ],0,"");
      	$html .= '</div>';
      	$html .= '</form>';
      	$html .= '</td></tr></table><br/>';
      	$html .= '<table style="width:100%;"><tr><td style="text-align:right;"><div id="err"></div>';
      	$html .= '</td></tr>';
      	$html .= '<tr><td style="text-align:right;"><button id="saveuserid" class="action-button" ';
              $html .= 'onclick="saveuser(' . $id .'); return false;">Save</button>';
      	$html .= '</td></tr></table>';
      	echo $html;
      }
      
      function AddUser($iduser,$nickname, $email,$password, $idimage) 
      {
      	$this->conn->query("SET NAMES UTF8"); 
      	$this->conn->query('SET CHARACTER SET utf8');
      	$query = "";
      	$hash=password_hash($password, PASSWORD_DEFAULT);
      	$nickname=str_replace("'","''",$nickname);
      
      	if ($iduser == 0) 
      	{
      		$query = "INSERT INTO user ( `nickname`, `email`, `password`, `idimage`, `state`, `insertdate`) 
      		VALUES ('$nickname','$email','$hash',$idimage,1,now())";
      	}
      	else 
      	{
      		$query = "UPDATE user SET nickname='$nickname',password='$hash', idimage=$idimage,
      		updatedate=now() where email='$email'";
      	}
      
      	$result = $this->conn->query ( $query );
      	if (!$result)
      	{
      		return mysqli_error ();
      	}
      
      	return "";
      }
      ?>
      

      To send message from user to other, we need to the method sendmessage
      We need also to the method RefreshMessage that allows to display the message at the client level
      <?php
      
      function SendMessage($iduser_from,$iduser_to,$message)
      {
      	$query = "INSERT INTO `messages` (message,iduser_from,iduser_to,inserdate,state) VALUES ";
      	$query.=('$message',$iduser_from,$iduser_to, now(),0)";
      		
      	$result = $this->conn->query ( $query );
      	if (! $retval)
      	{
      		return mysqli_error ();
      	}
      	return $message;
      }
      
      function RefreshMessage($from,$to)
      {
      	$html= '<table border="0" width="100%" height="90%">';
      	$sql="SELECT idsender,idreceiver ,message FROM sendedmessage where (idsender=$from and idreceiver=$to)";
      	$sql="or (idsender=$to and idreceiver=$from) order by insertdate asc";
      	$result = $this->conn->query ( $sql );
      	if ($result)
      	{
      		while($row = @mysqli_fetch_row ( $result ))
      		{
      			if($rowΎ]==$to)
      			{
      			 $html .= '<tr><td style="text-align:right;" ><div class="containerChatFrom">'.$rowΐ].'</td></tr>';
      			}
      			else
      			{
      			 $html .= '<tr><td style="text-align:left;"><div class="containerChatTo">'.$rowΐ].'</td></tr>';
      			}
      		}			
      	}	
          $html .= '</table>';
         
         return $html;
      }
      
      ?>
      
      

      To view all the registered users, we need to the following method:
      You can notice that we also manage the beep at every new arrived message
      the value of the variable 'sound' is 1 when the message is sended, if the reciever open the message
      sound is set to 0.
      We will see how play the sound at the client level with Javascript

      To stop the sound we need to the following method
      <?php
      
      function StopSound($iduser)
      {
      	$sql="update sendedmessage set sound=0 where idreceiver=$iduser";
      	$this->conn->query( $sql );
      }
      ?>
      
      

      We need also to the following php files where we call all the methods defined in our class DBClass
       

      1- chatUser.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();// Initialize the MySQL database connection 
      	if (!$con)
      	{
      		die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	// Connect to the database chat
      	{
      		die("Connect Error: " . mysqli_connect_error());
      	}
      
      	$dbconnect = new DBClass($con);// get the instance of DBClass 
      	$to = $_REQUEST['to']; // read the parameter 'to' from the request where to is the user ID
      	$from= $_REQUEST['from']; // read the parameter 'from' from the request where from is the user ID
      	$html=$dbconnect->RefreshChat($from,$to,"");// call the RefreshChat method
      	echo $html; // Write the html code returned by the method 
      	?>
      
      

       

      2- sendMessage.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      		die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      		die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$from = $_REQUEST['from'];
      	$to= $_REQUEST['to'];
      	$message= $_REQUEST['message'];
      	$html="";    
      	$query="INSERT INTO `sendedmessage`(`idsender`, `idreceiver`, `message`) VALUES ($from,$to,'$message')";
      	$con->query ( $query );
      	$html=$dbconnect->RefreshChat($from,$to,"");
      	echo $html;			
      	?>
      

       

      3- refreshChat.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      		die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      		die("Connect Error: " . mysqli_connect_error());
      	}
      
      	$dbconnect = new DBClass($con);
      	$from= $_REQUEST['from'];
      	$to = $_REQUEST['to'];
      	$inputText = $_REQUEST['inputText'];
      	$html=$dbconnect->RefreshChat($from,$to,$inputText);
      	echo $html;
      	?>
      
      

       

      4- stopSound.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      	die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      	die("Connect Error: " . mysqli_connect_error());
      	}
      
      	$dbconnect = new DBClass($con);
      	$iduser = $_REQUEST['iduser'];
      	echo $dbconnect->StopSound($iduser);
      	?>
      

       

      5- updUser.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      	die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      	die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$nickname = $_REQUEST['nickname'];
      	$email = $_REQUEST['email'];
      	$password = $_REQUEST['password'];
      	$idimage = $_REQUEST['idimage'];
      	$iduser = $_REQUEST['iduser'];
      	$msgerr="";
      	$msgerr=$dbconnect->CheckMailIfExist($email,$iduser);
      	if(empty($msgerr))
      	{
      		$msgerr=$dbconnect->CheckNicknameIfExist($nickname,$iduser);
      
      		if(empty($msgerr))
      		{
      			$msgerr=$dbconnect->AddUser($iduser,$nickname, $email,$password, $idimage);
      		}
      	}
      	else
      	{
      		echo $msgerr;
      	}
      	if(!empty($msgerr))
      	{
      		echo $msgerr;
      		
      	}
      	else
      	{
      		echo 'OK';
      	}
      	?>
      
      

       

      6- addAvatar.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      	die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      	die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$iduser="";
      	$html ="";
      	if(isset($_REQUEST['iduser']))
      	{
      		$iduser=$_REQUEST['iduser'];
      	}
      	$fileName = "";
      	$tmpName  = "";
      	$fileSize = "";
      	$fileType = "";
      	$colore='&#35;D13921';
      	if(isset($_FILES['userfile'])){
      	$fileName = $_FILES['userfile']['name'];
      	$tmpName  = $_FILES['userfile']['tmp_name'];
      	$fileSize = $_FILES['userfile']['size'];
      	$fileType = $_FILES['userfile']['type'];
      	}
      	else
      	{
      		if(isset($_FILES['userfileUser'])){
      			$fileName = $_FILES['userfileUser']['name'];
      			$tmpName  = $_FILES['userfileUser']['tmp_name'];
      			$fileSize = $_FILES['userfileUser']['size'];
      			$fileType = $_FILES['userfileUser']['type'];
      		}else
      		$msgerr="Overflow";
      	}
      	$msgerr="";
      	if($fileSize==0)
      	$msgerr= "No Image";
      	elseif ($fileSize>0)
      	{
      		if($fileSize>6400000)
      			{
      			 $msgerr= "File !!";
      			}
      			else{
      			$fp      = fopen($tmpName, 'r');
      			$content = fread($fp, filesize($tmpName));
      			$content = addslashes($content);
      			fclose($fp);
      			$fileName = addslashes($fileName);
      			$msgerr.=$dbconnect->AddAvatar($fileName,$fileSize,$fileType,$content);
      			if(empty($msgerr))
      			{
      				$query = "select * from images order by id desc limit 1";
      				$result = $con->query( $query );
      				$row=@mysqli_fetch_array ( $result );
      				$classon="photoprofileoffline";
      				$img = $row ['content'];
      				$type = $row ['type'];
      				$html ='<img class="'.$classon.'" id="Photo" src="data:' . $type . ';base64,' . base64_encode ( $img ) . ';
      				$html.=" style="width:100px; height:100px" >';
      				$html .='<input type="hidden" id="vidimage" value="'.$rowΎ].'"/>';
      			}
      			else
      			{
      			 $html = $msgerr;
      			}
      		}
      		echo $html;
      
      	}
      	?>
      

       

      7- getUser.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      		die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      		die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$idUser = $_REQUEST['iduser'];
      	$password="";
      	if(isset($_COOKIE["password"]) && !empty($_COOKIE["password"]))
      	{
      		$password=$_COOKIE["password"];
      	}
      	$dbconnect->ShowUserDialog($idUser, $password);
      
      	?>
      
      
      

       

      8- updStateUser.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      		die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      		die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$iduser	   = $_REQUEST['iduser'];
      	$state     = $_REQUEST['state'];
      	$idimage   = $_REQUEST['idimage'];
      
      	if($dbconnect->getState($iduser)!=3)
      	{
      		$dbconnect->updUserState($iduser,$state);
      	}
      	$query="select state from user where iduser=$iduser";
      	$result = $con->query ( $query );
      	if ($result)
      	{
      		 $row = @mysqli_fetch_row ( $result ); 
      	}
      	$html = "";
      	if($idimage==null || empty($iduser)) $idimage=0;
      	$query = "SELECT * FROM images where id =" . $idimage;
      	$result = $con->query ( $query );
      	$class_state="photoprofileoffline";
      	if($state==1)
      	{
      		$class_state="photoprofileonline";
      		
      	}else
      	{
      		if($state==0)
      		{
      			$class_state="photoprofileaway";
      		}
      	}
      	if ( $row = @mysqli_fetch_array ( $result ) ) 
      	{
      		$img = $row ['content'];
      		$type = $row ['type'];
      		$html ='<img class="'.$class_state.'" id="Photo" src="data:' . $type . ';base64,' . base64_encode ( $img )';
      		$html.='" style="width:100px; height:100px" >';
      			
      	}
      	echo $html;		
      	?>
      

       

      9- refreshUsers.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      		die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      	die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$from= $_REQUEST['from'];
      	$html=$dbconnect->ShowUsers($from);
      	echo $html;
      	?>
      

       

      10- connectTosite.php

       
      	<?php
      	session_start();
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      	die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      	die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$nickname = $_REQUEST['nickname'];
      	$password = $_REQUEST['password'];
      	$msgerr=$dbconnect->connectUser($nickname,$password);
      	if(!empty($msgerr) && substr($msgerr,0,2)!="id")
      	{
      		echo $msgerr;
      	}
      	else
      	{   
      		$iduser=intval(substr($msgerr,2));
      		setcookie('iduser', $iduser, time()+3600*24);
      		setcookie('password', $password ,time()+3600*24);
      		echo "CONNECTED";
      	}
      		 
      	?>
      
      

       

      11- logout.php

       
      	<?php
      	require "db.dzo.class.php";
      	$con=mysqli_init();
      	if (!$con)
      	{
      	die("mysqli_init failed");
      	}
      	if(!mysqli_real_connect($con,"127.0.0.1","root","","chat"))	
      	{
      	die("Connect Error: " . mysqli_connect_error());
      	}
      	$dbconnect = new DBClass($con);
      	$iduser="";
      
      	if(isset($_COOKIE["iduser"]))
      	 $iduser=$_COOKIE["iduser"];
      	else
      	{
      	 $iduser=  $dbconnect->CheckUserLogged();
      	}
      	$dbconnect->updUserState($iduser,3);
      	$email = $dbconnect->getUserFromId($iduser);
      	$dbconnect->deleteSessiontable($email);
      	setcookie("iduser", "", time()-3600);
      	?>
      

      Now let's move on to the client part
      I used AJAX which is a developer's dream, because you can:
      .Read data from a web server - after the page has loaded
      .Update a web page without reloading the page
      .Send data to a web server - in the background
       
      How to create a chat application with PHP and HTML in just few steps
       
       

      The javascript file chat.js

       
      The most important function is sendData, has as parameters
      data : of FormData type
      action : the php file which contains the action
      header : 1 to set the header Content-Type
      divinnerHtml: the html code returned after the execution of the action (php file)
       

      Example:

      This javascript code allows us to send a message from sender to reciever, the data to send are:
      the user ID of the sender, the user ID of the reciever and the message
      the action is sendMessage.php that we have seen before, and the result (divinnerHtml) will be returned in the div
      having the id 'users'.
      function sendMessageTo()
      {
      	var from=document.getElementById("sender").value;
      	var to=document.getElementById("reciever").value;
      	document.getElementById("message").value.trim();
      	if(document.getElementById("message").value!="")
      	{
      		var data = new FormData();  
      		data.append("from", from);
      		data.append("to", to);
      		data.append("message", document.getElementById("message").value);
      		sendData(data,"sendMessage.php",0,"users");
      	}
      }
      

      function sendData(data,action,header,divinnerHtml)  
      {
      
      var location = window.location;
      var xhr;  
      
      if (window.XMLHttpRequest) { // Mozilla, Safari, ...  
          xhr = new XMLHttpRequest();  
      } else if (window.ActiveXObject) { // IE 8 and older  
          xhr = new ActiveXObject("Microsoft.XMLHTTP");  
      }
      if (xhr)
      {
      	xhr.open("POST", action, true);  
      
      	if(header==1)
      	{
      		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;text/html; charset=utf-8");	
      	}
      		
      	xhr.send(data);  
      	xhr.onreadystatechange = display_data;  
      }
      else
      {
      	alert('Sorry, your browser does not support this.;');
      }
      
      function display_data() {  
       if (xhr.readyState == 4) {  
        if (xhr.status == 200) {  
      
      	  endProgress();	
      	  if(divinnerHtml=="head"){
      		document.getElementById(divinnerHtml).innerHTML = 
      		document.getElementById(divinnerHtml).innerHTML+ xhr.responseText;
      		return;
      	  }
      	  else
      	  {
      		if(divinnerHtml=="disconnect")
      		{
      			window.location = "http://localhost/CHAT/";
      		}
      		else
      		{
      		if(divinnerHtml!="sound")
      		{				  
      			document.getElementById(divinnerHtml).innerHTML = xhr.responseText;   
      		}
      		}
      	   }
      	   if(action=="updUser.php")
      	   {
      		  
      		 var t=xhr.responseText.trim();
      		 var j='OK';
      		 if(t==j)
      		 {
      			goToHome();
      		 }
      		 else
      		 {
      			document.getElementById(divinnerHtml).style.display="block";
      		 }
      	   }
      	  else
      	  {
      		   if (divinnerHtml=="dlguser") // to create new user or update user data
      		   {
      				document.getElementById(divinnerHtml).style.display="block";
      		   }
      		   if(action=="sendMessage.php" || action=="chatUser.php" || action=="refreshChat.php")
      		   {
      			   var objDiv = document.getElementById("divChat");
      			   objDiv.scrollTop = objDiv.scrollHeight;
      			   if(action=="sendMessage.php")
      			   {
      				  document.getElementById("message").focus();//set focus on input text message
      			   }
      				
      		   }
      		   if(action=="refreshUsers.php")
      			{
      				var iduser=document.getElementById("sender").value;
      				var elm=document.getElementById("sound_mess");
      				
      				if(elm)
      				{
      					if(elm.value=="1")
      					{
      						var snd = new Audio("audio/notify.mp3"); //sound
      						snd.play();		
      						var data = new FormData();
      						data.append("iduser", iduser);
      						sendData(data,"stopSound.php",0,"sound");
      					}
      				}
      			}
      	  }
        }
       }  
       
      }  
      return;
      }
      
      

      	function OverUser(user,indice) //On Mouse Over the user avatar
      	{
      		document.getElementById("selectedUser"+indice).innerHTML
      			="<font color=\"blue\"><span><b>"+user+"</b></span></font>";
      	}
      	function LeaveUser(user,indice) // On Mouse Leave user avatar 
      	{
      		document.getElementById("selectedUser"+indice).innerHTML
      		="<font color=\"black\"><span><b>"+user+"</b></span></font>";
      	}
      

      	//Reload the page
      	function goToHome() 
      	{
      		location.reload();
      	}
      
      	function sendMessageToKeydown() //Send message with 'return' key
      	{
      		if(event.keyCode==13)
      		{
      			sendMessageTo();
      		}
      		
      	}
      
      	function sendMessageTo()
      	{
      		var from=document.getElementById("sender").value;
      		var to=document.getElementById("reciever").value;
      		document.getElementById("message").value.trim();
      		if(document.getElementById("message").value!="")
      		{
      			var data = new FormData();
      			data.append("from", from);
      			data.append("to", to);
      			data.append("message", document.getElementById("message").value);
      			sendData(data,"sendMessage.php",0,"users");
      		}
      	}
      

      	function StartChat(from,to)  / Start the chat with other user
      	{
      		startProgress();
      		document.getElementById("reciever").value=to;
      		var data = new FormData();
      		data.append("from", from);
      		data.append("to", to);
      		sendData(data,"chatUser.php",0,"users");
      	}
      
      	function exitChat() // End chat 
      	{
      	   startProgress();
      	   sendData(null,"logout.php",0,"disconnect");	
      	}
      
      	function New_User() // Create new user
      	{  
      		startProgress();
      		var data = new FormData();
      		data.append("iduser", 0);
      		sendData(data,"getUser.php",0,"dlguser");
      	}
      
      
      	function transfererImage(iduser) // Upload the picture on server to store it in the database 
      	{
      
      		startProgress();	
      		var fichier= document.getElementById("userfileUser").filesΎ];
      		var formdata = new FormData();
      		formdata.append("iduser", iduser);
      		formdata.append("userfile", fichier);
      		sendData(formdata,"addAvatar.php",0,"divimaprofile");
      	}
      
      	function closedlguser()
      	{
      		document.getElementById("dlguser").style.display="none";
      		
      	}
      	//--------------------------------------------------
      	function closediv(ediv){
      		document.getElementById(ediv).style.display="none";
      	}
      
      	function elimphotoprofile(id){
      		 
      		 var formdata = new FormData();
      		 formdata.append("id", id);
      		 sendData(formdata,"delPhoto.php",0,"divimaprofile");
      		
      	}
      
      	function HandleBrowseClickUser()  //To load user avatar
      	{
      		var fileinput = document.getElementById("userfileUser");
      		fileinput.click();
      	}
      
      	function HandlechangeUserHandlechangeUser()
      	{
      		var fileinput = document.getElementById("userfileUser");
      		var textinput = document.getElementById("filenameUser");
      		textinput.value = fileinput.value;
      	}
      
      	function saveuser(id)  // Save user data
      	{
      		if(document.getElementById("email").value=="")
      		{
      			document.getElementById("err").innerHTML='<font color="red">Email required</font>';
      			return;
      		}
      		if(document.getElementById("nickname").value=="")
      		{
      			document.getElementById("err").innerHTML='<font color="red">Nickname required</font>';
      			return;
      		}
      		if(document.getElementById("password").value=="")
      		{
      			document.getElementById("err").innerHTML='<font color="red">Password required</font>';
      			return;
      		}
      		startProgress();	
      		var fdata=new FormData();
      		fdata.append("email",document.getElementById("email").value);
      		fdata.append("nickname",document.getElementById("nickname").value);
      		fdata.append("password",document.getElementById("password").value);
      		if(!document.getElementById("vidimage"))
      		{
      			fdata.append("idimage",document.getElementById("idimage").value);// Avatar id 
      		}
      		else
      		{
      		   fdata.append("idimage",document.getElementById("vidimage").value);	
      		}
      		
      		fdata.append("iduser",id);
      		sendData( fdata,"updUser.php",0,"err");
      		
      	}
      
      	//--------------------------------------
      	function update_user(iduser){ // Show the user dialog 
      		startProgress();
      		var data = new FormData();
      		data.append("iduser", iduser);
      		sendData(data,"getUser.php",0,"dlguser");
      	}
      
      
      
      	function login()// Connect
      	{
      		var formdata = new FormData();
      		formdata.append("nickname", document.getElementById("nicknameLogin").value);
      		formdata.append("password", document.getElementById("passwordLogin").value);
      		startProgress();	
      		var xhr;  
      		if (window.XMLHttpRequest) 
      		{ // Mozilla, Safari, ...  
      			xhr = new XMLHttpRequest();  
      		} else if (window.ActiveXObject) { // IE 8 and older  
      			xhr = new ActiveXObject("Microsoft.XMLHTTP");  
      		}
      		xhr.open("POST", "connectTosite.php", true);  
      		xhr.send(formdata);  
      		xhr.onreadystatechange = display_data;  
      		function display_data() {  
      		 if (xhr.readyState == 4) 
      		 {  
      			  if (xhr.status == 200) 
      			  {  
      				 endProgress();
      				 var t=xhr.responseText.trim();
      				 var j="CONNECTED";
      				 if(t==j)
      				  {
      					  location.reload();
      					  return;
      				  }
      				  else
      				  {
      					  document.getElementById("errlogin").innerHTML=xhr.responseText;
      					  return;
      				  }
      			  }
      		  }  
      		return;
      	}
      	}
      		
      	function startProgress()// Show then Progress gif animated
      	{
      		document.body.style.cursor="progress";
      		document.getElementById("idprogress").style.display="block";
      	}
      
      	function endProgress(){ // Hide the progress gif animated
      		document.body.style.cursor="auto";
      		document.getElementById("idprogress").style.display="none";
      		document.body.scrollTop = 0;
      		document.documentElement.scrollTop = 0;
      	}
      

      chat.css file
      	html,body {
      		padding: 5px;
      		margin: 5px;
      		font-family:sans-serif; 
      		font-size:14px;
      		background-color: &#35;FFFFFF; 
      		color: &#35;000000; 
      		margin-top: 1px;
      		margin-left:1px;
      		height: 100%; 
      		overflow-y: scroll;
      	} 
      	
      	input[type="text"]
      	{
      		font-size:14px;
      	}
      	span
      	{
      		font-size: 14px;
      	}
      
      	.action-button
      	{
      		position: relative;
      		padding: 3px 5px;
      		margin: 0px 5px 5px 0px;
      		border-radius: 5px;
      		color: &#35;000;
      		width:100px;
      		text-decoration: none;	
      		border: 1px solid &#35;3498db;
      		background-image: linear-gradient(to bottom, &#35;fff,&#35;fff);
      		font-family: arial,verdana,helvetica,sans-serif; 
      		font-size:12px;
      		cursor: pointer;
      	}
      	.email 
      	{ 
      		background: &#35;1C1C1C url('../image/email2.png') no-repeat 2px; 
      	 }
      	.nickname 
      	{ 
      		background: &#35;1C1C1C url('../image/user_red.png') no-repeat 2px; 
      	 }
      	.password 
      	{
      		background: &#35;1C1C1C url('../image/pass.png') no-repeat 2px; 
      	}
      
      	.action-button:active
      	{
      		transform: translate(0px,5px);
      		-webkit-transform: translate(0px,5px);
      		border:none;
      		background-image: linear-gradient(to bottom, &#35;3498db, &#35;3498db);
      	}
      
      	.action-button:hover
      	{
      		color:&#35;fff;
      		background-image: linear-gradient(to bottom, &#35;3498db, &#35;3498db);
      		-webkit-box-shadow:3px 3px 2px &#35;c0c0c0;
      		box-shadow:2px 2px 2px &#35;c0c0c0;
      	}
      
      	.hdiv
      	{
      		display: none;
      	}
      
      	.vdiv
      	{
      		display: block;
      	}
      
      	.img-rounded 
      	{
      		border-radius: 6px;
      	}
      
      	.center 
      	{
      		left: 20%;
      		top: 20%;
      		border-radius: 20px;
      		background-color: &#35;fff;
      		border-left: 1px solid gray;
      		border-right: 1px solid gray;
      		border-top: 1px solid gray;
      		border-bottom: 1px solid gray;
      		border-color: &#35;5D6961 &#35;5D6961 &#35;5D6961 &#35;5D6961;
      		padding:10px; 
      		font-size:100%;
      		opacity: 1;
      		filter: alpha(opacity=100); /* For IE8 and earlier */
      		overflow:auto;
      	}
      
      	.centerprogress{
      		position:absolute;
      		left: 35%;
      		top: 35%;
      		width: 50px;
      		height: 50px;
      		z-index: 999;
      	}
      	.zindexdiv{
      		z-index:20;
      		width: 20%;
      		position: absolute;
      	}
      
      	.photoprofileaway{
      	  -moz-box-shadow:5px 5px 2px &#35;FC932A;
      	  -webkit-box-shadow:5px 5px 2px &#35;FC932A;
      	   box-shadow:8px 8px 4px &#35;FC932A;
      	   border-radius: 80px;
      	}
      	.photoprofileonline{
      	  -moz-box-shadow:5px 5px 2px &#35;0ABC16;
      	  -webkit-box-shadow:5px 5px 2px &#35;0ABC16;
      	   box-shadow:8px 8px 4px &#35;0ABC16;
      	   border-radius: 80px;
      	}
      
      	.photoprofileoffline{
      	  -moz-box-shadow:5px 5px 2px &#35;8D948D;
      	  -webkit-box-shadow:5px 5px 2px &#35;8D948D;
      	   box-shadow:8px 8px 4px &#35;8D948D;
      	   border-radius: 80px;
      	}
      
      	.divuser
      	{
      		left: 50%;
      		top: 50%;
      		height: 150px;
      		width: 100px;
      		z-index: 12;
      		position: absolute;
      		overflow-x:hidden;
      	}
      	.users{
      		top: 0%;
      		left: 0%;
      		height: 600px;
      		width: 350px;
      		z-index: 11;
      		padding: 25px;
      		overflow-x:hidden;
      		overflow-y:auto;
      		position: relative;
      		border-radius: 20px;
      		background-color: &#35;fff;
      		border-left: 1px solid gray;
      		border-right: 1px solid gray;
      		border-top: 1px solid gray;
      		border-bottom: 1px solid gray;
      		border-color: &#35;5D6961 &#35;5D6961 &#35;5D6961 &#35;5D6961;
      		padding:10px; 
      		font-size:100%;
      		opacity: 1;
      		filter: alpha(opacity=100); /* For IE8 and earlier */
      	}
      
      	.divChat{
      		height: 300px;
      		width: 350px;
      		overflow-x:hidden;
      		overflow-y:auto;
      	}
      	.userChat{
      		top: 10%;
      		left: 15%;
      		height: 100px;
      		width: 350px;
      		z-index: 11;
      		padding: 25px;
      		overflow: auto;
      		overflow-x:hidden;
      		position: absolute;
      		border-radius: 20px;
      		background-color: &#35;fff;
      		border-left: 1px solid gray;
      		border-right: 1px solid gray;
      		border-top: 1px solid gray;
      		border-bottom: 1px solid gray;
      		border-color: &#35;5D6961 &#35;5D6961 &#35;5D6961 &#35;5D6961;
      		padding:10px; 
      		font-size:100%;
      		opacity: 1;
      		filter: alpha(opacity=100); /* For IE8 and earlier */
      		overflow:auto;
      	}
      
      	.containerChatFrom {
      		
      	  border: 2px solid &#35;dedede;
      	  background-color: &#35;f1f1f1;
      	  border-radius: 5px;
      	  padding: 10px;
      	  margin: 10px 0;
      	  display: inline-block;
      	}
      	.containerChatTo {
      	  border: 2px solid &#35;dedede;
      	  background-color: &#35;808080;
      	  border-radius: 5px;
      	  padding: 10px;
      	  margin: 10px 0;
      	  display: inline-block;
      	}
      
      
      	.chatmess {
      	  margin: auto;
      	  width: 60%;
      	  border: 3px solid &#35;73AD21;
      	  padding: 10px;
      	}
      	.heightdiuserinfo{
      	 
      		left: 0%;
      		top:0%;
      		border-color: &#35;fff &#35;fff &#35;fff &#35;fff;
      		padding:0px; 
      		font-size:100%;
      		height: 250px;
      		width: 150px;
      		z-index: 11;
      		padding: 10px;
      		overflow: hidden;
      		position: relative;
      		
      	}
      	.heightdivuser{
      	 
      		 height: 300px;
      		 width: 650px;
      		 z-index: 11;
      		 padding: 25px;
      		 overflow: hidden;
      		 position: absolute;
      		
      	}
      
      	.heightdivuserlogin{
      	 
      		 height: 270px;
      		 width: 400px;
      		 z-index: 11;
      		 padding: 25px;
      		 overflow: hidden;
      		 position: relative;
      		
      	}
      
      	.messageErr{
      
      	z-index:999;
      	color: &#35;df0000;
      
      	}
      
      	&#35;btnNewUser,
      	&#35;btnForgotPass,
      	&#35;btnupdprofile,
      	&#35;btnlogout
      	{
      		 font-family: Verdana, sans-serif;
      		 float: left;
      		 background:none!important;
      		 border:none; 
      		 padding:0!important;
      		 color:&#35;3498db; 
      		 font-size:14px;
      		 cursor: hand;
      		 cursor: pointer;
      		 text-decoration:none;
      		 
      	}
      
      	label, input, textarea { 
      	color: &#35;000; 
      	float: left; 
      	font-family: Verdana, sans-serif; 
      	margin: 15px 0; 
      	}
      	label { 
      	display: block; 
      	line-height: 10px;
      	width: 150px; 
      	}
      	input, textarea { 
      	background: &#35;1C1C1C; 
      	border: 1px solid &#35;323232;
      	color: &#35;fff; 
      	height: 30px; 
      	line-height: 20px;
      	width: 300px; 
      	padding: 0 10px; 
      	}
      	input { padding-left: 30px;
      	textarea { 
      	background: &#35;1C1C1C url('images/social_balloon.png') no-repeat 235px 95px; 
      	font-size: 12px;
      	height: 200px;
      	width: 320px;
      	overflow: hidden;
      	}
      	input { padding-left: 30px; }
      
      	/* The container */
      	.container {
      	  display: block;
      	  position: relative;
      	  padding-left: 35px;
      	  margin-bottom: 12px;
      	  cursor: pointer;
      	  font-size: 22px;
      	  -webkit-user-select: none;
      	  -moz-user-select: none;
      	  -ms-user-select: none;
      	  user-select: none;
      	}
      
      	/* Hide the browser's default checkbox */
      	.container input {
      	  position: absolute;
      	  opacity: 0;
      	  cursor: pointer;
      	  height: 0;
      	  width: 0;
      	}
      
      	.containerCount {
      	  font-size: 22px;
      	  position: relative;
      	  text-align: center;
      	  color: red;
      	}
      
      	.centered {
      	  position: absolute;
      	  top: 50%;
      	  left: 50%;
      	  transform: translate(-50%, -50%);
      	}
      

      dzosoft
      Audio Software - Download Today & Save 10-50%
      Auto Europe Car Rentals
      Reviews of dzosoft.com   Copyright © 2022  -  dzosoft.com  All rights reserved.  
      dzosoft- How to do it ?
      What they are cookies
      Like most websites, we use data file small
      dimensions that are saved on your computer, tablet, mobile phone or other device
      Mobile (collectively referred to as 'device') to record certain data whenever
      login or interact with our sites, services, apps, messaging systems
      and strumenti.I names and specific types of cookies used can change over time.
      To help you better understand the rules and \ 'use of such technology, the following are
      some terms and their definitions:
      Cookies: small text files (usually formed by letters and numbers) that are saved
      in memory of the browser or the device when you visit a website or display a message.
      Cookies enable a website to recognize a particular device or browser. There
      different types of cookies:
      Session cookies expire at the end of the browser session and allow us to
      connect your actions during that specific session.
      Persistent cookies are instead stored in your device even after the end
      the browser session and let you remember your preferences or actions at multiple sites.
      First-party cookies are set by the site you're visiting.
      The third-party cookies are set by a third party site than the site you are visiting.
      Cookies can be disabled or removed using the tools available in most
      browsers. The cookie preferences must be set separately
      for each browser used, because each offers features and specific options.
      dzosoft.com - How to do it ?
      Licenza Creative Commons
      How to do it ?    - download & install software     is licensed under license Creative Commons Attribution - Non-commercial - Share alike 4.0 International.