PHP Chat application (Complete Project) [+SOURCE CODE]

this is a real-time chat application  created using pure php and mysql   i didn't use any front-end or back-end framework  except jquery which i think it's a library   just to reduce the javascript syntax so  the project is frameworkless if you want   so along with php and mysql i used ajax for  sending requests and perform actions without   refreshing the page and some other techniques like  long polling which is used to simulate the real   time between users when they exchanging messages  the application contains too many features   including exchanging messages between users and  asynchronously in form of organized components   a real time notifier when used as chatting reply  to certain message add friends accept friendship   requests follow a friend to be able to see his  pose and have conversation with him sharing posts   in different forms including textual posts posted  one image or more and video posts as well and too   many features like like a posts comments sharing  etc when you have friends or follow people you're   going to be able to fetch their posts either  by checking your timeline or to navigate for   certain user to see his posts the user can also  like posts comments and share a particular post   there's a profile page where the user  could change his personal information   and see his own posts or there is a setting page  where the user can change everything in there   including the password username cover etc shouting  section is implemented using long polling method   where the user sends a request to the server and  tell the server to not close the connection until   he gets some new data to that user when the server  get data from another user to that particular user   it will automatically send it back to that  user and close the connection when that client   get the data or response from the server by  automatically seeing it in the screen the   connection will be closed and this user will send  a new long polling request again to the server   to wait for some new data and this process will  be repeated until the user closed the shot section   or when the user closed the application if  you're using a framework you may use websockets   which is better than long polling but  because i'm not using any framework here   i use long pawning method to create this real  time channel between users to exchange messages   basically we're gonna go through everything in a  bit but first i want to mention some quick notes   so first this is one of my site projects that i  written to apply everything i've learned in php   and also to challenge myself by creating a shot  application without any framework because i like   to know how things happen behind the scenes you  may find some misuses or mistakes like in the   way how i implemented the api the restful api or  in the way how i structured the project but as i   said this project is created just for learning and  testing stuff so you may pick up something useful   and i will very happy to see your feedback or  any idea that makes the project much cleaner and   useful the code will be available to anyone and i  will let the link to the code in the description   so if you want to collaborate the code is  available in github so you can make changes and so   and the last notes that i want to mention is  that if you're using a framework like larval   or symphony you can grab the project and  try to convert it to a framework project   and that will be a challenge that  makes you understand framework concepts   much better now let's have a look at the project all right so the first step you're going to go  through is to download the project so the link of   the project will be in the description now you can  do so by either download the zip file or if you   have get installed in your machine you can grab  this link here and open your htdocs folder and   um open git bash here and run the get clone  command and let's give it um the link and it's   very very important to name your project charts  because we use this name in our config files so   make sure to name your project like this  now let's uh sorry let's climb the project   and now as you can see we have the project here  cloned now let's wait for the cloning process all right so once this project is cloned let's  open it in our text editor i used visual code   here so let's open the project let's go to c  lamp htdocs and let's open this folder here now our project is opened here now the  second step is to create the database   so to do so let's first open this database  folder and open this shot dot sql file   now this file right here contains all the  instructions needed to create all the tables all   the keys and so on so before running this script  right here let's create a database by going to   phpmyadmin let's open sql section  and let's create a database   create database chat so here also you need to  name your database shot because we use this   shot in our connection and in the config file  and configurations so it's important to name your   uh your database shots so let's run this query  and then let's open this database and go to sql   and then let's grab all these um file let's  copy this and paste it right here and then   let's um run all this file all these queries so  this process could take some time so let's wait all right so our database is created successfully   now just to make sure all the tables  are created let's go and refresh this   and um you should have 15 tables so this is  all the tables that we used in our project   some of these tables have some default rows  as you can see here like post place table and   post visibility have three records now um  basically our database is ready to be used   now so we have the project here we created  the database now we have some dependencies   and if you open composer.json we have some  dependencies here basically just one or two   packages we use mailgun api to send emails so uh  in the case um of password recovery we use mail   gun to send the confirmation code so we use mail  gun for this purpose now let's install all these   dependencies let's open the terminal and we use  composer install and this command will install all   the dependencies into inside composite.json now  we have our dependencies installed successfully   cool now we are ready to use this project  so let's render the project into the browser and there it is so this is basically the   authentication section uh if  you if you noticed if we try to if we try to to access the index page the application automatically redirect this user  to the login page and this basically happened   inside index because we have this condition here  so we check if this user is not   is not logged in with the direct this user to the  login page so you may wondering from where from   where we take this user this user is created  inside the init file so this init file will be   included into every web page so this init file is  here in core in it we have some um configuration credentials and right here we have this user now  this um condition here is for remember me future   we're going to talk about this later but for  now just um you have to know that we use a hash   so the user when when the user check  this remember me here we generate a hash   and store it into the database table which  is this table here here's a session let's   open this table and as you can see we have three  columns here which is the id the user id which is   the user who um checked this remember me and this  is the hash so we generate a hash and store it   into the database and at the same time we store it  as a cookie into the user machine so the next time   if this user tried to log in into our application  we take this cookie inside the user machine   and compare it with um with our record into the  database so if they match um we basically um we basically fetch the user here if   the cookies are matched so basically we check  uh if they match by you by running this query   so we select everything from user  where hash which is this column here   where this hash is equal to this variable and this  variable is basically the hash stored in the user   so we fetch the user remember me and we compare it  with our database if they match which is we have   more than one column we fetch the user and  we log in with the username and password   so basically if this is logged in is true we  update that so we're gonna talk about all of   these later but for now just make sure that this  if statement is for remember me now we create the   user now inside our index we check if this user  is currently logged in that's why when we try to   access an index page the application automatically  redirect the user to the login page because the   user is not currently logged in and that makes  sense because we don't have any account any   authentication now this page um contain  the cine in the scene up and the scene in   forms now let's create an account um and basically  we have some validations here so if we try to   register with this blank input we're gonna have  um this error right here which is username field   which means the first name and last name are  optional now let's um enter some data here   this is my name let's use some username and let's  uh let's use um an email here and um some proto   and the password as you may guessed um  it should be the same if by accident have   different passwords as you can see we have this  password should be the same embedded password now   let's register and as you can see we  have this account created successfully   now let's use this account to login but before  login we talked about remember me future but we   have this link here which is used to recover your  password basically we used mail gun api to fetch   or to restore our password now to access this page  we go to login and password recover now we track   the send button which is the send button when the  user click the send button what happens is that   first we check for a csrf token so if um basically  this csrf token is recited here as a hidden input   so it takes a value of a hash so  this hash is stored in the database   basically this is the same concept uh like to  remember me we store this token in our session   and we display it here so when the users submit  the form we take this input from the form   and we compare it with a session into our server  with this name reset password so if they match we   enter here so we have a validation class here to  validate the email so we have some rules and some   values here so if this validate passes we're  gonna talk about this later but for now if we um   if the user provide a valid email we check  if this email is exist in our database first   if it is this is the code that send the message or  send the confirmation code to recover the password   so as i said before we use mail gun here so you  you have to go to mailgun website and create   an account to get this key and domain and to  configure this by putting your email or something   so basically what happened here is we generate  a hash right using this hash class which which   use this function unique to get um a unique hash  or unique id let's go to hash and as you can see   we have this self make which make a hash using a  unique id so we use this unique id as a string and   we hash it using sha256 we use a salt but as you  can see we don't pass it here so it will take the   default which is an empty string so this unique  will not use salt it just has this unique id   now we generate this hash and we take only 16 um  character so we begin from 16 to 16 which means   we take only 16 right because um the hash  length is i think is 32 so we take 16 characters   we sent this um extracted hash as a confirmation  code and we check it here in site confirmation   so we're going to go through this later now  just to demonstrate this you can restore your   password by sending this email right here now  let's go back and use this account to log in   now we use the username and the password here  and let's click login now we have this index page   now the first um thing i want to talk about  is this message this is a flash message right   which means it's um appear to the user only  once right so if we refresh the page well   we're not gonna see this message again so we  want this message to be displayed into the user   only one time so if we refresh  we don't see this message anymore   now the user can also log out by clicking on this  button right here and clicking on log out button   and now we are in the login page as you can see  now if we try to access the index page as you   can see we can't right so uh just a quick note we  have this remember me option um checked by default   so let's see if the user unchecked  this right here and try to login   now if this user closes the browser and next  time um he tries to access the application let's   close the browser and see what will happen  now let's close this let's open it again now let's access the application let's ask  the index page as you can see the application   um automatically redirect this user to the  login page because this user um did not check   this remember me now let's check this and try it  again let's login with the remember me option now   let's um close the browser and we'll open we'll  open it again now let's access the application   and as you can see now we are able to reach our  index page because we use remember me option   now this is the index page we have this header  right here which is a fixed header just to   demonstrate this let's go to the profile page and  as you can see this head right here is fixed right   and because it's fixed we shift the  mean section which include all of these   content of this page we add a margin top which is  55 pixel just to demonstrate this let's go back to   our um profile page let's remove this header right  here and basically this header as you can see   um has this is here so has a 55 pixel now let's  remove all this heat right here and as you can see   uh this mean section right here this mean section  has a margin top of 55 pixel which is the height   of the header because the header is fixed and  because of this we need to add a margin top to   the mean just to make some place to the header now  let's refresh and let's go back to our index page   now this here contains some this is the logo  of our application this is the search field and   search button is used to search for uh friends  and so on now we're gonna cover this later   now we have also some buttons here and  this is uh pointing to the profile page   now we have these friendship requests so if  someone send um a friendship request to this user   we're gonna see this right here and this is the  message which is the same thing with the messages   and we have this more button this is pointing to  the profile page as well so this and this has the   same functionality we have the seating page which  we can change um the user informations and so on   and of course we have this logout button this  activity log is not working yet but this is   basically just to track the user activities now if  the user shared a post or like a post or something   just like that we need to log this information  into some specific file which could be a text   file or something like that now this is all about  this header right here and this here basically is   included into every page as you can see right  so and we have this left panel right here   so this panel includes some buttons as you can  see this is the sitting page you see this is   the shot section as you can see this is the  search which is used to search for people and   we have some buttons right here this is  pointing to the profile page this is home   and this right here um is just um component that  is used to demonstrate um just a few information   about the current contact and here this contact  will include all the friends and followed people   later when we add friends and follow friends  we're gonna see some components right here   now let's begin with sharing posts this component  right here is included also into um the profile   page as you can see here so we can share post  from here from the index page or we can go to our   basically profile and share post from here now  let's share um a textual post but before that   let's open our php my admin just to see the  posts created now let's go to our database   and as you can see we don't have any posts right  now so this is zero now let's create a post   now let's say this um this is my first post  and as you can see um if we have this empty   text box we don't have this post button right  here but when we change this to something um to   basically a string right here we see this post  right here and this is also happen when we upload   an image now when we upload image as you can  see we have this post right here so this post   basically is appear when this text box is not  empty or when this um file um array because we   have a file array that store all the uploaded  images so if we have these um two or one of two   of these inputs are not empty we appear this  button right here now let's create this post   and as you can see we have this appended  post right here now let's go back to our   database and let's go to post to refresh and  as you can see we have a new record right here   basically this is our post right here because  this is my first post which is the same as this   now let's create another post and just to  make sure this post is created let's go to our   profile page and as you can see we have this post  right here so this post component contains all   the information about the post which is um the  post owner which is this which in this case i'm   the current user right here and we have the  dates where on this user um share this post   and we have the post place which is public as  you can see we can share a post um using this   public option or we can only share on this post  with friends or just make it private now let's   um see how to share images now we can share  images like this so this is so basically you can   include a text right here or just publish it  without any text let's add a text so this is   my first pitch post now let's click on this post  and as you can see the post let's refresh here   and we have now a new record which contains  all the information about the post now as you   can see this post is appended automatically but  what happened is that when we click on this post button right here there is a csrf token that is  go with um all the information included in this uh   post creator and when um the request is  successful and the post is saved in our database   we get response from the server which is  generated post right here so we use this   information that is received from the server  to create this component right here right   so you can see all of this process inside  the javascript file that is responsible   for these actions inside the public folder and go  to javascript and post now let's go to our share basically share post now let's go and see  what will happen here now the first thing   when we click on this um share button when we  click on this share button right here we want   to disable this uh button because we don't  want the user to click twice on this button   right here so we disable it here by attaching  this disabled attribute to this share post   button and then we change the value to posting  just to show to show the user that the post is   um in the process of posting and then um create  post so this is basically this line is just to   maintain on the new lines when  we have a post like this this is   a post with new lines now when we go to our um  database if we just share the post like this   um basically next time when we want to fetch this  post we gonna face just like fetch it like this   but we don't want to do that because we want to  preserve these new lines that's why we replace   every new line with a br tag because next time  when we fetch these posts from the database   we fetch it in a form of html now just to replace  these new lines with the br tag that's why that's   how this line work now uh we append or we um  overwrite the value of this text area with the   new replaced value right here and then we get all  the form data by using this form data and then we   get all the images because um we need to append  these images and we're gonna see why we do that   right because um we can upload more than one  image as you can see if we do the following this   let's upload these three files as you can  see we can upload more than one file now   we append all the images and all the videos  because we can also share videos now that's now that's the important part of the application  now we use this ajax and the reason why we use   ajax because we want when the user click on  this button we don't want to refresh the page   right so we send a request to the api post  and the post verb now let's go to api posts   and posts that's the file that is responsible to  share or to save the post into the database now uh   we can't go into every detail because um we're  gonna have um a very very long video so just to um   have some heat lines if we will we just save the  posts without refreshing the page as you can see   right here we send a request to this endpoint  right here which is the api post post   the method is post and the data is on a form which  is used this type because we use an input file   now we have these informations about the  requests and data is the form data now   um as you can see we have this form  data that is an instance of this class   so we get the data from this form so this form  basically is right here let's go into the code and   as you can see we have this form which is create  post form which is the same as this now we   by doing that by uh creating an object of  this form data we got we get all the data   all the inputs inside this form right and we  append the images manually using this append   function and we get these upload posts assets  we get the name and we get assets from this   this inputs button now um we get another  request and now this is the request that   we are talking about now in the case of  success uh we remove the disabled because we   um already share this post and we get the old  value for this button right here and as you   can see we generate the last post that that's  why we see this generated post automatically now we handle the post assets because uh when  we generate this uh this um these components   some events are not attached with these  components so we need to do that manually   by calling these functions so each of these  functions handle some portions of functions now   let's say this handle post buttons action which  is these buttons right here which is like button   as you can see and comment and share button now  let's have a look at this post right here let's   post this and as you can see we preserve all the  new lines along with all these images right here   now we have this button right here to see  the image each image writes right here   and if you want to see all the  images and the likes you can   click here and you go to this post view  page which you can navigate on the images um   so um basically we have this bug right  here so we're gonna fix this uh as soon as   as i can so let's go back now we have this post  right here now basically we can share posts   we can share um videos let's have a try  i have a video in my desktop right here   let's share this video right  here so this is the video post as you can see we have this video appended  automatically now you can play this video   as you can see and you can like  and comment so this is comments   now you can um do a lot of things as  you can see so you can share this post   basically add refresh as you can see this post  is shared and this is the original post now   you can edit the posts as you can see so edit and  let's refresh as you can see we have this saved or   edited post now we can hide this post as you can  see or restore it and of course we can delete   this post now when we delete this post what will  happen to this shared post let's see now we have   this post deleted so the owner of this post is  either delete that post or make it private now we   can delete posts so we can like um and comments  now when we refresh we preserve these comments   as you can see now we can edit the comments delete  comments hide comments now these actions are just   available to our comments so if someone else  comment on this image we can't do for example   edit or delete right so we're gonna see that  when we add friends and create another account   now we can like comment share and  create posts of different types now   let's see how to change um the user  informations now let's go here so we have two   places where we can change um the user  informations either by clicking on this   edit profile to change the first name last  name biography or make the account private   so we either change the information from  here or we can go to this setting page   right so let's go back to see how this work now  let's this is basically the default image let's   change this image and let's go to images and  let's choose this and let's change the cover   let's say let's say this right now we have  this cover image and we have this profile   um profile avatar or image now  let's um this is my new account   and let's click save and as you can see we have  this image right here now if we click on it   we get this image and this button right here  now if we click this we can basically click   um on this image right here or if we click outside  of this image we just close this viewer right here   um we can also edit this to  something else so let's say john   as you can see it's changed here now we can also  change all this information from the seating page   now let's go to the setting and as you can  see this is the username so there is a lot of   overhead by um changing this username because  when we create an account what will happen   is that there is a folder here called data right  so this data let's reveal in file explorer this   data basically store all the information  about the users including um images and   covers and posts and so on now media covers and  as you can see we have these covers right here   and pictures right so we have this picture  right here if we change the picture   let's let's say we change let's say we we want  to change the picture from here let's choose let's choose this and let's save now as you can  see this is appended right here right so basically   these data include all the users informations  including images and posts and so on now   um if we change this username right here  you need to change um all this folder   so along with the database record  um because we want to change this   so we go to the user info and we have a username  portion right here now if we change this to   something else what we need to do is to change  this um folder as well right so let's do that   let's go to our application and let's change this  to let's say um let's add proto new now let's save   the changes now we have this new um username our  new account let's go to our database and refresh   and as you can see we have this new username  let's go back here and as you can see we have this   new um new folder right here and basically we  need to delete this i think yeah so we delete   all of its content and paste it right here as you  can see we have all the data um kept here right so let's go back and basically we  have some box right here because   i don't know the reason why but i think we need to  change this as well in the paths right so you can   manage this in your application and if you have  or if you solve this problem you can um sense the   changes in the repo so the repo is available to  anyone you can check out on the description now   i think the last part of this application is the  shot section now let's go to the shot section and   see how this work now basically to um get back  this image let's go to our setting and let's try   with um the older one let's save the change and  as you can see we get our data back alright so   for shouting or for messages we need to add  people or to add friends now to do that we need   another account and for that reason let's  um let's open another browser let's open now let's create a new account now let's  create um let's say codename hitman hitman and let's provide some password here let's  create it and um so hitman um right so hitman and let's provide the password now we  have this um account created now let's   search for um this user here and let's see how  this works basically now let's go back to the   index page and let's go here and search for this  that's how the search work so we search based on   our first name last name or username so this query  based um we search for this um input here inside   the first name last name or the username so if  this is like um the username or first name or last   name we show these records right here now let's  go back here and as you can see you can follow   this now we have zero followers as you can see  now if we follow this guy right here and refresh   as you can see we have one followers now this guy  has one follower now basically we want to add this   one now let's send a friend request and let's go  back to this and refresh and as you can see we   have a new friendship request which is hitman  sends you a friend request now you can either   accept or delete on the friendship request from  here or you can click on this record and go to his   profile and accept from here now let's accept  from here and now we have a new friend so we have   these two um accounts are friends now  let's refresh to make sure now we have   um friends now of course you can unfriend or  unfollow from here without refreshing the page   now uh because we are friends now let's go to  see how shouting works let's go to messages   and as you can see we have this uh record right  here and let's open it from here as well let's   go to messages and as you can see we have this  now this is very very important so how we can   know that this guy is connected basically this  is done using this um column right here which is   last active update now if we go to our um code or  console you may notice that on every i think two   seconds we send a request let's um show xhr and  basically um later we will see a request which is   located here let's go to our public and javascript  and i think yeah in global now let's go to um um basically basically basically now  updates no it's not global in config i think config yeah in the config now as you  can see we have function here which is   update activepresence now as long as  the user is inside the application   we um call this function as you can see every  this amount of time now this function basically   tell the server that the current user is  basically connected right so we do that every   i think this is two minutes or three minutes  or something like that and this file basically   um updates the current date inside this um inside  this column right here so let's go to this file   this file is inside the server let's go to server  and update active presence now this file called   this user update active let's go to models let's  go to the user and let's go to update presence um basically updates yeah so this is update  now as you can see we update the user   the current user and we update this last active  update which is this column right here and what   will what we will um insert is the current date  as you can see here right we add this capital a   to mention whether we are using am or  pm right now how do we know that this   user is active now we get um the current date  and we can pair it with this column right here   this column if the difference between now  and this state is less than two minutes   that's an indicator that this user is connected  now every two minutes we send a request to the   server to update discount right here and  now if this user for example this user   close the browser and five minutes passes  as an example we don't have two minutes   difference between now and the last active date  and let's have this in action let's close this   and as you can see we need to wait for this  i think two minutes or something now just   um because we are waiting there is this profile  component we can edit the profile just directly by   clicking on this edit as you can see and this is  opened automatically we can edit stuff from here   now let's go back to our chats and messages and  it's still connected now basically this is um   this is how this work now we just um active or  update this column instantly every i think this   is the number of milliseconds yeah so this is i  think two minutes or something and we call this   function every two minutes and this is basically  uh interval that is executed every two minutes to   update the user active presence let's see if this  is still connected and yeah it's still connected   now basically that's how this work now we just we just want to see how the shot  section works and let's update and he's still connected and we see it's here  as well now just not to waste time let's go back   and um connect again now let's  see how the shot section work   we open this and we open shots here now let's send   messages and see how this work now let's go  here and as you can see just notice here we have   um this indicator that this user is currently  writing now if we clear on this input this is gone   right and we're gonna see how this work now let's  send a message as you can see we have this message   with um all the information about message  let's send a longer message hey this is cool   and you get this message now if we refresh on the  page we have on this the last message here right   so and let's open this again and we have  this discussion discussions of course   right this is just basically  the same as the message   we fetch on the last message of each user  and this is basically an end um the dates   or the lifetime of this message now this button  is used to refresh this time as you can see and   yeah so that's it that's how it works now let's  go back here and let's send a message from here now we receive it here right so  let's go here um this is works   and i don't know and the reason why i fetch  two messages here but um if i refresh here   as you can see i don't know  what the hell is going on but   let's say um we want to reply to certain message  let's say this this is a reply right so we get   this reply as the following right here now let's  send a lot of messages just to show you something right so let's reply to certain message let's  reply to this this is reply now we get it here now if we want to reach this message we just  need to click on this message here and we go   to this message right so as you can see we go  smoothly to this message now of course we can   delete the message we can delete this as well  and um let's delete this hi the first message   now let's refresh let's select this  and as you can see we have some errors   i don't know the reason why we have this try to  get message of no objects basically that's because   we delete a message and we try to access um a  property of this message but as i said um you can   use this code and fix you know there is some  bugs in this code but you can try your best and   um fix all the message all the errors and  so on now this is how the shot section works   we have this search which is dynamic so we  search for um the current users so if this   um name matches the username or first  name or last name we keep this users here   alright so we have this and  basically uh what we can do is   now let's follow this this front right  here let's go back here and let's create   this is a textual post let's post this and as you  can see if you go here and refresh now we are able   to fetch this user posts right now let's um post  some images let's go and post an image right here   now let's go to the desktop and images let's  post this money as you can see we have this   image right here let's go back here and refresh  and as you can see we have this image right here   right now we can also um there is a future we can  also um share more than four images and that's how   we gonna um see this now as you can see we have  five images right here five images let's post   these images right here and as you can see we  have these four images and plus one which means   we have more than four if um if we post just four  images let's go and post just four and post them   we get these four images like this now we have  five right now because we have this plus one let's   check this now we have all these images as you  can see right now we can also like and comment so   comments and of course we can share this post  now to make sure we do all of these processes   we can go to our profile page and this is the  shared post and this is the original posts and as   you can see this is the insert and comments this  is the like and this is the share which is this   right so you can share um post with one image  or two or three or as you can see we have   five here and we can also have videos as you may  notice here so let's go here and share this video   with your posts and of course all  these posts all these posts from here   can be reached by this username but by this user  let's go to our index and as you can see we have   all these posts right here now there is another  thing to mention that whenever we refresh this   page we get different posts as you can see  right and that's because inside our index page   we have this um shuffle function which is used to  get a random placement of an array or a collection   now we get all the posts so we fetch the journal  posts of a card user so we take a user and fetch   all his friends as well as his followed friends  and we fetch all their posts and we get them   inside these journal posts and we shuffle this  array right so let's have a debug point here let's   start debugging and let's go to our index and  let's say what are we well what we will get here   now as you can see we have two posts right  now now basically let's go to this one   let's go to this one right here let's stop this  for now and we have all these posts now let's go   to and start a debugging now let's um do this now  we have ah we have all these posts as you can see   now we have this post right here this  is my first post now remember this is   the first post that we are created right  but this is not what we will get because   we shuffle as you can see now when we shuffle  and let's go here and to all of these processes   and let's go here this is my first pass now  as you can see we use this shuffle right here because we don't fetch the same post in   each iteration now as you can see  we have different posts right now right so that's how this  project works now uh we can   um search for posts now let's have a try now  this is followed we can unfollow this from here   or how we use the c-more because if we have  more than four users we just display four and um   to display all the users we need  to click on this c-more right here i just remember to uh mention some notes  now if the user wants to change his password   we need to go here to setting and we go to this  account now we have an additional informations   like metadata so if we add something  here let's say um hobby and let's say um   reading something and we have uh five other  possibilities to add um these informations here   now if we change this and we go to our profile as  you can see we have this information right here   right this is basically just additional  information this is the biography which is um   edited here so if we have now this is  new biography info if we save this and   go here and we can see this saved biography now  let's see if the user wants to change his password   we can go here to account and we need  to provide the same email of on this   current user and this is the current password  and this is the new passwords right so this is   in case the user wants to change the password  if the user forget the password we need to log out and we use this functionalities here now  as we mentioned before this is used mailcan api so   if you want this future to be working you can go  to mailgun website and register and get the key   and the credentials now let's see how the user can  change the password let's um login let's go here   to sitting and let's go to the account and as  you can see we need to provide the card password   now let's have new password new password  let's say for example by accident we   have mistake here now the application should  track this or should um notice that this is   the wrong password and if we click change we have  this embedded password validation now we need to   provide the same password now this is new password  new password now before save these changes   i just want to mention something um if we go to  the user info along with stored password which   is a hashed password we have this salt and this  is basically just used to add some extra layer   of security to the password because we use um  hashing system sometimes um there is some hashes   like md5 that generate the same hash for identical  strings so if we have the same password if there   is um two users with the same password and we hash  their passwords we we're gonna have the same hash   so if for example on a hacker or an attacker  you know guess this hash of this user   it could use this password for this user  as well so we need to um make sure that   the hash system should not provide the same hash  now as we mentioned before if we go to our class   folder and go to the hash we use sha256  now if we go and check if this hyphen   right here generates the same hash for  identical passwords this um is sha 256 produce   same password for item or the same hash  for identical string something like that   and um so i already visit this now  let's open this and as you can see now so the answer is yes so if you hash the  same input with the same function you will   always get the same results now to overcome  this situation we use the salt here so we hash   the string along with a salt right here right so  how do we generate this uh this salt we use this   function right so we use this random bytes which  is a php function that generate random bytes of   string now let's go to setting and see how this  work now this is the setting page now let's go   to save change now if they use a save change  of course we need to make sure the csrf token   matches on the csrf that is exist in our server  session with this name now if this is work what   we need to do is um this is safe change for full  name so we don't need all of these we we want to   go to on the password now this is the  username let's go to the password and   uh what is the password ah this is in  sitting account so because this setting   is for on this page right here now let's go to  the account and let's see how this works so this   is the same process we validate the csrf token  we have this validation to validate the email   and passwords and of course the password should be  the same using these matches so matches will take   um the input name for this to match now if this  passed now what we need to do so we have a hashed   password in our database so how do we know that  this current password match this hash to do that   what we need to do is take the value that the  user enter and hash it using this salt right here   so when we use this salt to hash this  password we're gonna have this hash right here   right so for that reason as you can  notice we fetch the salt from this user   which is this and we fetch the user by  email now we fetch the salt and we have this   password now what we need to do is use the current  password that the user provide here and use the   salt that is um fetch from the database to  hash the card password now we have this um   password hashed and we fetch the stored password  from the database which is this one right here now   we need to compare these two passwords so  we need to compare this hash password with   the password that is exist in our database so  if they match right so we change the password   if there is some wrong password provided  we use this save failure message which is   invalid password and that's why we get um this  error right here as you can see invalid password   now let's say if the user provide invalid  email as you can see we have this here   now fetch user we use this email if this  email is not exist we have this invalid email   right now let's say the user provide the  current password which is correct like this   and this is the new password new password now if  we click save change the passwords will matches   and what we need to do is we need  to have the new password from   this which is new password as you can see if  we go here let's see the name of these inputs   and new password which is used to fetch this from  the post now this um value right here go posted um   using the name new password now we fetch this  new password and we assign a new value to this   new password by hashing this password with  the sort now here we use um just the old sort   but you can use a new salt right here so you  can change this salt right here right now we   will make uh we hash this password and basically  we update the user with this new password   and we display these changes saved successfully  which is a success message let's have a try let's   go back here and save changes and as you can  see we have these changes saved successfully   now if we refresh the database we're going to have  the same salt but a different hash as you can see   now we have the same salt but different hash  you can also change the salt from here but   it's your choice it's up to you to to change  this sauce right here now that's it that's   how the user can change his password and you know  there is a lot of things that i didn't mention but   i think if i see some interest on how  these functionalities works like um how to   upload files and that is very very important point  here to mention and that is when we upload files   inside the front end we use files in javascript  which is read-only file so how do we post these   edited files because right now i have only one  image here but inside files in javascript we   have three files so how do we know that we delete  this now we create a separate array to store all   these images first and then when we delete some  of these images we search in this array and we   delete all of this manually because files used in  javascript is read only so that's all about this   project for now maybe maybe i will create some  new videos explaining each um each feature here   especially these messages right here and as you  can see we have this now disconnected because   this user is not connected and if we refresh as  you can see we have this um gray color image now   if we log in as you can notice here let's  login now this is the user now let's refresh and as you can see now we have  this green which is connected   now i think we will see this let's go to  the console or uh the castle here let's   refresh now and get the car to use now we don't  see this um update active presence but we'll   see this in a few moments so that's all about um  the project so if i see some interests if you uh   like the project please send me a feedback  or if you want to understand something   uh in this project just write it  down in the comments and i'll try to   um you know respond as soon as i can so  that's all about it so thank you for watching

Channel: MOUAD NASSRI

Views: 10,492

Keywords: PHP, PHP Project, PHP Chat, PHP Sockets, PHP Advanced, PHP and MySQL, PHP Long polling, Long polling, PHP without framework, php frameworkless, php messaging, php notifiers, php real time, realtime chat php, php send messages, long polling, polling, php sockets, php websockets, php asynchronous, PHP side project

Id: uKFAwfnZOg8

Length: 74min 49sec (4489 seconds)

Published: Fri Mar 19 2021