Membuat aplikasi chat dengan php dan mysql

<?php

include('../config/database_connection.php');

include_once'../../template/header.php';

//session_start();

if(!isset($_SESSION['user_id']))

{

header("location:login.php");

}

?>

   <h5>KONSUL ONLINE</h5>

<ahref="../../dashboard.php"class="btn btn-light"><span class="fa fa-arrow-left"></span>Balik</a>

<div class="alert alert-warning"role="alert">

"selamat datang di halaman konsul online megatim1, kamu bisa berkomunikasi dengan pengguna yang sama disini"

</div>

   <div class="row">

    <div class="col-md-3 col-sm-3">

     <input type="hidden"id="is_active_group_chat_window"value="no"/>

     <button type="button" name="group_chat"id="group_chat"class="btn btn-primary">Butuh Jawaban Cepat?</button>

    </div>

    <div class="col-md-3 col-sm-3">

     <palign="right"><?phpecho$_SESSION['username'];?>-<ahref="logout.php">Logout</a></p>

    </div>

   </div>

   <div class="table table-responsive-sm ">

    <div id="user_details"></div>

    <div id="user_model_details"></div>

   </div>

  </div>

    </body>  

</html>

<style>

.chat_message_area

{

position:relative;

width:100%;

height:auto;

background-color:#FFF;

    border:1px solid#CCC;

    border-radius:3px;

}

#group_chat_message

{

width:100%;

height:auto;

min-height:80px;

overflow:auto;

padding:6px24px6px12px;

}

.image_upload

{

position:absolute;

top:3px;

right:3px;

}

.image_upload > form > input

{

    display: none;

}

.image_upload img

{

    width:24px;

    cursor:pointer;

}

</style>  

<div id="group_chat_dialog"title="Terhubung dengan nfChat ">

<div id="group_chat_history"style="height:400px; border:1px solid #ccc; overflow-y: scroll; margin-bottom:24px; padding:16px;">

</div>

<div class="form-group">

  <!--<textarea name="group_chat_message"id="group_chat_message"class="form-control"></textarea>!-->

  <div class="chat_message_area">

   <div id="group_chat_message"contenteditable>

   </div>

   <div class="image_upload">

    <form id="uploadImage" method="post"action="upload.php">

     <label for="uploadFile"><img src="img/upload.png"/></label>

     <input type="file"name="uploadFile"id="uploadFile"accept=".jpg, .png"/>

    </form>

   </div>

  </div>

</div>

<div class="form-group"align="right">

  <button type="button"name="send_group_chat"id="send_group_chat"class="btn btn-info btn-sm"><span class="fa fa-paper-plane"></span>Kirim</button>

</div>

</div>

<script>  

$(document).ready(function(){

fetch_user();

setInterval(function(){

  update_last_activity();

  fetch_user();

  update_chat_history_data();

  fetch_group_chat_history();

},5000);

function fetch_user()

{

  $.ajax({

   url:"fetch_user.php",

   method:"POST",

   success:function(data){

    $('#user_details').html(data);

   }

  })

}

function update_last_activity()

{

  $.ajax({

   url:"update_last_activity.php",

   success:function()

   {

   }

  })

}

function make_chat_dialog_box(to_user_id,to_user_name)

{

  var modal_content='<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="Terhubung dengan : '+to_user_name+'">';

  modal_content +='<div style="height:400px;border:1px solid #ccc;overflow-y:scroll;margin-bottom:24px;padding:16px;" class="chat_history" data-touserid="'+to_user_id+'" id="chat_history_'+to_user_id+'">';

  modal_content+=fetch_user_chat_history(to_user_id);

  modal_content +='</div>';

  modal_content+='<div class="form-group">';

  modal_content+='<textarea name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" class="form-control chat_message" placeholder="Tulis pesan kamu"></textarea>';

  modal_content+='</div><div class="form-group" align="right">';

  modal_content+='<button type="button" name="send_chat" id="'+to_user_id+'" class="btn btn-info send_chat"><span class="fa fa-paper-plane"></span> Kirim</button></div></div>';

  $('#user_model_details').html(modal_content);

}

$(document).on('click','.start_chat',function(){

  var to_user_id=$(this).data('touserid');

  var to_user_name= $(this).data('tousername');

  make_chat_dialog_box(to_user_id,to_user_name);

  $("#user_dialog_"+to_user_id).dialog({

   autoOpen:false,

   width:400

  });

  $('#user_dialog_'+to_user_id).dialog('open');

  $('#chat_message_'+to_user_id).emojioneArea({

   pickerPosition:"top",

   toneStyle:"bullet"

  });

});

$(document).on('click','.send_chat', function(){

  var to_user_id=$(this).attr('id');

  var chat_message=$('#chat_message_'+to_user_id).val();

  $.ajax({

   url:"insert_chat.php",

   method:"POST",

   data:{to_user_id:to_user_id,chat_message:chat_message},

   success:function(data)

   {

    //$('#chat_message_'+to_user_id).val('');

    var element=$('#chat_message_'+to_user_id).emojioneArea();

    element[0].emojioneArea.setText('');

    $('#chat_history_'+to_user_id).html(data);

   }

  })

});

function fetch_user_chat_history(to_user_id)

{

  $.ajax({

   url:"fetch_user_chat_history.php",

   method:"POST",

   data:{to_user_id:to_user_id},

   success:function(data){

    $('#chat_history_'+to_user_id).html(data);

   }

  })

}

function update_chat_history_data()

{

  $('.chat_history').each(function(){

   var to_user_id=$(this).data('touserid');

   fetch_user_chat_history(to_user_id);

  });

}

$(document).on('click','.ui-button-icon',function(){

  $('.user_dialog').dialog('destroy').remove();

  $('#is_active_group_chat_window').val('no');

});

$(document).on('focus','.chat_message',function(){

  var is_type='yes';

  $.ajax({

   url:"update_is_type_status.php",

   method:"POST",

   data:{is_type:is_type},

   success:function()

   {

   }

  })

});

$(document).on('blur','.chat_message',function(){

  var is_type='no';

  $.ajax({

   url:"update_is_type_status.php",

   method:"POST",

   data:{is_type:is_type},

   success:function()

   {

   }

  })

});

$('#group_chat_dialog').dialog({

  autoOpen:false,

  width:400

});

$('#group_chat').click(function(){

  $('#group_chat_dialog').dialog('open');

  $('#is_active_group_chat_window').val('yes');

  fetch_group_chat_history();

});

$('#send_group_chat').click(function(){

  var chat_message=$('#group_chat_message').html();

  var action='insert_data';

  if(chat_message!='')

  {

   $.ajax({

    url:"group_chat.php",

    method:"POST",

    data:{chat_message:chat_message,action:action},

    success:function(data){

     $('#group_chat_message').html('');

     $('#group_chat_history').html(data);

    }

   })

  }

});

function fetch_group_chat_history()

{

  var group_chat_dialog_active=$('#is_active_group_chat_window').val();

  var action="fetch_data";

  if(group_chat_dialog_active=='yes')

  {

   $.ajax({

    url:"group_chat.php",

    method:"POST",

    data:{action:action},

    success:function(data)

    {

     $('#group_chat_history').html(data);

    }

   })

  }

}

$('#uploadFile').on('change',function(){

  $('#uploadImage').ajaxSubmit({

   target:"#group_chat_message",

   resetForm:true

  });

});

$(document).on('click','.remove_chat',function(){

  var chat_message_id=$(this).attr('id');

  if(confirm("Apa kamu yakin akan menghapus chat ini?"))

  {

   $.ajax({

    url:"remove_chat.php",

    method:"POST",

    data:{chat_message_id:chat_message_id},

    success:function(data)

    {

     update_chat_history_data();

    }

   })

  }

});

});  

</script>

<?php

include_once'../../template/footer.php';

?>