Chat Web Application using PHP with MySQL & JavaScript Ajax

138

Realtime Chat Application using PHP with MySQL & JavaScript Ajax

Hey friends, today in this blog you’ll learn how to create a Chat Web Application using PHP with MySQL & JavaScript Ajax. Earlier I have shared a blog on how to create a Simple Chatbot using PHP with MySQL & jQuery Ajax. Our maximum viewers have requested me to create a Chat App so I decided to create one.

In this chat application, when you open it first on your browser, there is shown a signup form where you have to signup with your details like name, email, password, and image. Email and image field is fully validated which means you’ve to enter a valid email and an image file only. Once you signed up successfully, you’ll be redirected to the user’s page where you can see your full name, image, status, and logout button to the top, and users, like you, appear on the bottom if someone has signed up.

On this page, you can see their image, name, status, and the last message if they sent to you. You have to click on the particular user or you can also search any existing user with their name then you’ll be redirected to the chat page and there you can see the image, name, status of that user who is going to chat.


Once you send a message to another user then immediately that message appears in your chat box and another user chatbox too which you’ve sent the message. On the message receiver chatbox, this user received the message with the sender image. Remember chatbox will be automatically scrolled to the bottom once the chatbox starts scrolling. You can log out from the chat application at any time and once you log out, immediately all other users will know that you’ve been log out or offline.

Once you log out, you can again login and with your email and password that you used to when signing up for the form. If you entered the correct credentials then you’ll be redirected to the user’s page and all other users will immediately know that you’ve logged on and now active.

Video Tutorial of Chat Application in PHP and MySQL

 
In the video, you’ve seen the demo of the chat application in PHP and MySQL and the codes or concepts behind creating a chat app. As I already told you I used PHP with MySQL and pure JavaScript Ajax to create this chat app so you don’t need to reload the page to see changes in the chat app. I know if you’re a beginner and you don’t have enough knowledge about PHP then definitely you’ve to difficult to understand the codes.


But I tried to explain each JavaScript and PHP line with comments, subtitles, etc. But don’t worry I have provided the source code files of this chat app so you can easily download from the given download button and try analyzing, practicing the codes to understand better. And I know, there are many other features that are missed on this chat app but for now, I think it is more than enough for practice.

You might like this:

Chat Web Application using PHP [Source Codes]

How to download source code files and what to do after downloading them?

Steps: – To download files, just click on the given download button then a 60 seconds timer will start, just wait for the timer. Once the timer completed then a zip file will be downloaded automatically. Once it downloaded, just extract the zip file then you’ll see the folder name with ChatApp. Copy this folder and paste it inside htdocs folder of your XAMPP then start your apache and MySQL from the XAMMP control panel.

After completing these steps, go to your browser and open this URL localhost/phpmyadmin then create a new database name with a chatapp. After creating the database, there you can see an import option, just click on that and import the SQL file which is in the ChatApp folder. Everything is done now, just open this URL localhost/chatapp that’s it. Your chat application is ready to chat.

If you want to upload this chat application to an online server for free and don’t know how? Then please watch this video How to upload Chat Application to an Online Server for Free?

 


Previous articleResponsive Dropdown Menu Bar with Search Field using HTML & CSS
Next articleText Typing Animation using only HTML & CSS
CodingNepal is a blog where we post blogs related to HTML CSS JavaScript & PHP along with creative coding stuff and free source code files.

138 COMMENTS

  1. Giving a Eror massage when giving image

    Warning: move_uploaded_file(images/1613574012IMG-5f8954caa02539.76436861.jpg): failed to open stream: No such file or directory in G:aiman studyhtdocsnew teamregisterChatAppphpsignup.php on line 27

    Warning: move_uploaded_file(): Unable to move 'G:aiman studytmpphpBCBB.tmp' to 'images/1613574012IMG-5f8954caa02539.76436861.jpg' in G:aiman studyhtdocsnew teamregisterChatAppphpsignup.php on line 27

  2. Giving error' message When open file chat.php?user_id=….

    ⏬⏬⏬⏬⏬⏬⏬

    Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in /storage/emulated/0/htdocs/chatapp/chatapp/php/get-chat.php on line 12

  3. Notice: Undefined index: incoming_id in C:xampphtdocsChatAppphpget-chat.php on line 6

    Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, bool given in C:xampphtdocsChatAppphpget-chat.php on line 12
    No messages are available. Once you send message they will appear here.

  4. Notice: Undefined index: incoming_id in C:xampphtdocsChatAppphpget-chat.php on line 6

    Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, bool given in C:xampphtdocsChatAppphpget-chat.php on line 12
    No messages are available. Once you send message they will appear here.

  5. Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in C:xampphtdocsChatAppphpsignup.php on line 11
    Something went wrong. Please try again!

  6. Warning: Trying to access array offset on value of type null in C:xampphtdocsChatAppphpdata.php on line 14

    Warning: Trying to access array offset on value of type null in C:xampphtdocsChatAppphpdata.php on line 14

    Warning: Trying to access array offset on value of type null in C:xampphtdocsChatAppphpdata.php on line 14

    Warning: Trying to access array offset on value of type null in C:xampphtdocsChatAppphpdata.php on line 14

    Warning: Trying to access array offset on value of type null in C:xampphtdocsChatAppphpdata.php on line 14

    Its showing this i wanted the reference code but its not working idk why its showing this i ve downloaded it today 2 / 22 /2021 ( can you help me please )

  7. Brother, I have a problem! All details are perfect, but the connection was not a success.

    The Error: "Warning:mysqli_connect(): (HY000/1045): ProxySQL Error: Access denied for user 'id16130301_tawfik'@'2a02:4780:bad:f00d::3' (using password: YES)"

    Please help me. How can I solve this?

  8. This error you faced because you've written dbname or dbpass or dbuser name incorrectly in config.php. But if you were written all things correctly then delete the current database and create another one because this is a free hosting and sometimes you get an error even if you did everything perfectly.

  9. if you find this error again just replace line 14 in data.php file with ($outgoing_id == isset($row2['outgoing_msg_id'])) ? $you = "You: " : $you = "";
    BTW CodingNepal your work is amazing.

  10. Hello there;
    I downloaded the source codes. I edited the config.php file with my own information. But do you know the reason I got this error? Note: I get an error like this when a second user is online. The online user does not appear. You can reach for a reply at [email protected]. Thx

    Fatal error: Uncaught TypeError: mysqli_fetch_assoc(): Argument #1 ($result) must be of type mysqli_result, bool given in C:xampphtdocschatphpdata.php:7 Stack trace: #0 C:xampphtdocschatphpdata.php(7): mysqli_fetch_assoc(false) #1 C:xampphtdocschatphpusers.php(11): include_once('C:\xampp\htdocs…') #2 {main} thrown in C:xampphtdocschatphpdata.php on line 7

  11. Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in /storage/ssd4/625/16245625/public_html/php/signup.php on line 11
    Something went wrong. Please try again!

  12. I have successfully installed your chatapp.
    Except when I want to create a user or log in. It gives me no error, but no page loads. However, to verify the connection to the database, I created a user from the database, and when I want to create an account, it tells me "Email already exists". I therefore conclude that the connection to the database is successful.However, I don't know where the error came from.

  13. You have a error when render user image account who send a message. receiver user show samself image but not sender. You need a change SQL query on file get-chat.php from … users.unique_id = messages.outgoing_msg_id … to … users.unique_id = messages.incoming_msg_id …

  14. hi, thanks for script.I install the script, everything ok. but not registering.when open the console this alert seen,[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq) input type="password" name="password" placeholder="Enter new password" required=""

  15. Hello Coding Nepal, thanks for the code, it is really useful.

    I have a problem to register, it does not show what the error is, but I believe the problem is in the image upload.

    Because I put the image in the images folder, and entered the data manually in the database and it worked.

    Do you know what the possible error is?

  16. i want to show user list according to the last received or outgoing message (like fb) and also i want seen or unseen msg tab (read or unread also okay )
    i am waiting forr the update, can you plz tell when exactly we get next update ? this is cool

  17. I am getting this error

    Warning: move_uploaded_file(images/1618997904lesson.jpg): failed to open stream: Permission denied in /Applications/XAMPP/xamppfiles/htdocs/ffyypp/ChatApp – CodingNepal/php/signup.php on line 28

    Warning: move_uploaded_file(): Unable to move '/Applications/XAMPP/xamppfiles/temp/phpmTMVIx' to 'images/1618997904lesson.jpg' in /Applications/XAMPP/xamppfiles/htdocs/ffyypp/ChatApp – CodingNepal/php/signup.php on line 28

  18. bro!…below warning is shown while i am trying to open in my webbrowser after entering url localhost/chatapp…please help

    Object not found!
    The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.

    If you think this is a server error, please contact the webmaster.

    Error 404
    localhost
    Apache/2.4.41 (Win64) OpenSSL/1.1.1c PHP/7.3.9

  19. I just completed the chat app by patiently typing in the code from the video tutorial. I could not download the source code because the site was down for maintenance when I went there. Anyway, I finished the video, and, after dealing with the errors due to my own mistakes in typing, I finally was able to make it work.
    One observation that I would like to share with you all, if you are not aware of it yet is that..
    after I completed the logout section, the following happens..
    Situationer:
    1) one user logs in (no errors). userlist is populated as it should be..
    2) another user, using a different browser tab, logs in.(no errors).. but the second user who logged in is removed from the userlist of the first user’s box who logged in earlier. The first user, though, appears on the user list of the second user who just logged in. (The list in the first user’s box changes to whatever list the second user has.)
    3) if either one of the two users logs out…. an error appears on the other user’s chatbox. No error appears on the chat box of the user that logged out.

    I hope I explained it clearly enough ..

    Anyways, my assumption is that the errors occur probably because the session variables are unset and destroyed when a user logs out. The errors are about ‘undefined’ variables.

    Nonetheless, a huge THANK YOU to CodingNepal for its generosity in posting tutorial videos, especially this real-time chatapp.I am eternally grateful!

    Update:
    I commented out the session_unset and session_destroy statements just to see what happens, and the errors disappeared. Of course, those must not be removed.
    The userl ist though is still the same for the two users.

    With this being the case, only one user can log in

    • Hi, first of all, big thanks to you for doing this project without depending on source files. When I was making this chat app I didn’t find or notice these problems or errors. So please download the source files from the given download button and check again because you may have did mistakes in coding.

  20. Hi both sources related to the chat are died. I have no idea why google drive don’t allow to download it. Why don’t you try to make a Github account to put the projects there and share it. I can’t deny that sometimes is hard to get happy to everybody but this kind of projects can be so useful for the leaning process of many visitors of your website. Keep working hard on it.

    • If I will put my source files on GitHub then why my viewers will come to my site? Instead of coming to my site, they will go to my GitHub account to get the source codes. I can share with you another link of files if you have problems downloading from the drive.

  21. Thank you for the quick answer, don’t get me wrong with the comment. I can understand your point of view, Github just allow you to be able to share the solution of any problem or maybe update the source.

  22. Hi bro thanks for the project I tried the project and ran all the files as you described in video the chat system is running but only one message able to send and i tried to send another message it is neither displaying in the chat-area nor storing database please help me to sort the issue.

  23. Is there a way we can add settings to change your profile picture and get sound alerts when a new message comes in?

  24. The description read that you will have to wait 30 sec and the download will start. In reality I
    had to wait 50 sec and the download never happened.

  25. Dear Coding Nepal, I Got This Error When Trying To Signup With An Account. I Did All The Steps For Uploading The Site And I Got This Error!

    Warning: move_uploaded_file(images/16230201755_0.png): failed to open stream: No such file or directory in /storage/ssd2/539/16989539/public_html/php/signup.php on line 28 Warning: move_uploaded_file(): Unable to move ‘/storage/ssd2/539/16989539/tmp/php8cen6w’ to ‘images/16230201755_0.png’ in /storage/ssd2/539/16989539/public_html/php/signup.php on line 28

    Please Help Me Fix It!

    • I think you did some changes to codes or you’ve changed folders name. If you don’t know about it please don’t do anything except what is mentioned in the blog.

    • Yes, it is possible and the steps are the same as shown in this video but this chat app is not secure and anyone with basic knowledge of PHP can attack this chat app. When I was making this chat app, my purpose is to teach how to make a simple chat app only not to how to secure it. If you can modify codes and make them secure then you can upload it otherwise do it at your own risk.

LEAVE A REPLY

Please enter your comment!
Please enter your name here