Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,460 members, 7,808,641 topics. Date: Thursday, 25 April 2024 at 02:41 PM

Creating A Group Chat With Html/javascript/php/mysql For Beginners - Programming (2) - Nairaland

Nairaland Forum / Science/Technology / Programming / Creating A Group Chat With Html/javascript/php/mysql For Beginners (13895 Views)

After 10days Of Coding With Html, Css And Javascript Forum4africa Is Ready / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql / Phpsocket.io-Real-time Chat Engine With HTML & Android Client Support [Updated] (2) (3) (4)

(1) (2) (3) (Reply) (Go Down)

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 9:29pm On Jul 04, 2015
We shall now add 3 brand-new real PHP scripts to our project folder

So our project folder will now look like this:

- index.php
- style.css
- chat.js
- connect.php
- post.php
- dbase.php

The 3 files are attached to this post.

connect.php will initiate a connection to the sql database we created earlier. So that other scripts that require database connectivity (such as post.php and dbase.php) can plug into it.


post.php can be used to send chat information directly into the database. The basic chat interface we have designed can connect to this, and the future android app can also connect directly to this post.php to send information directly into the database.

dbase.php can be used to view all the chat records stored into the database.

[size=16pt]Explanation on How To Use The Attached Scripts:[/size]
After you must have unpacked all the files above into your project folder namely c:\wamp\www\dhtml
If you point your browser to http://localhost/dhtml/connect.php - you should get a blank page if there are no issues.
This means that there are not errors and your database has been created.

if you get errors on your page, it could mean the following:
- Your wamp server is not started
- You did not follow the instructions provided earlier on how to create the database
- Your server is using a different set of credentials instead of root for username and blank for password (which is default for wamp server)

If you do not get this step right, you will not be able to proceed with the chat app because this connect.php is critical to the full app operations.

post.php this is a simple script that allows you to send chat messages directly into the database you already created directly through the browser interface.
You are advised to demonstrate this by pointing your browser to http://localhost/dhtml/post.php?sender=ada&msg=Hi
This will send a message to the server with message containing "Hi" and sender being "ada"
The browser should only print out "success" to indicate that your message was successfully saved. Any other result will mean you did not follow the above instructions.

dbase.php this is a simple PHP script that dumps the contents of the chat database table (previously sent tasks from post.php) directly into the screen. This is just a way of confirming that post.php is working right. You can use this script by pointing your browser to
http://localhost/dhtml/dbase.php

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 9:42pm On Jul 04, 2015
We now need to download jQuery library into our project at this point for the following reasons:
- We need jQuery Ajax to deliver messages typed by various users to post.php discussed earlier for record keeping into database
- We need jQuery Ajax to also update the chat client with the latest messages

You can download from http://jquery.com/download/ - I will recommend 1.11.3 - save it as jquery.min.js into your project. To avoid confusion, I have attached the copy of jQuery I am using to this post. Just download it into your project folder.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 10:23pm On Jul 04, 2015
We Have Successfully Concluded The Tutorial

- post.php was altered to accept POST instead of GET. chats.js posts messages entered directly to this script for storage via the function dispatch_msg() on line 30.

- dbase.php was modified slightly to alter the display of the messages. The result of this post.php is dumped directly into chat_display_area by jQuery via a function called read_chats() inside the chats.js (line 82)


In summary, we now have a web app that does the following:
- Allows users to signin / signout
- Allows users to send chat messages
- Multiple users can chat over the network or via different browsers
- The results are saved, so when you refresh or close the browser and reopen (after signing in, you can see all chat messages previously sent)

The entire project has been attached to this post via a zip file for easy download. However, it should be noted that this is just a demo application to help newbies understand these technologies better. To build a fully functional chat application is way more complex than that, but what the heck - you gotta start from somewhere

1 Like

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 11:04am On Jul 05, 2015
dhtml18. grin
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 11:29am On Jul 05, 2015
^^^Wetin? tutorial don finish. As students no gree comment, wetin i go do?
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by zando64: 3:10pm On Jul 05, 2015
Fire down bro....wat abt if u wnt do am like whatsapp
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by AAinEqGuinea: 3:20pm On Jul 05, 2015
dhtml18:
^^^Wetin? tutorial don finish. As students no gree comment, wetin i go do?

Keep it up cool
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by OPEYEMIAD(m): 3:28pm On Jul 05, 2015
Hmmmm Thanks for the good Job

Please Jquery is confusing, is like a source code when i download it. Do i need jquery in any chart application? can i write jquery code on my own?
thanks
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by OPEYEMIAD(m): 3:49pm On Jul 05, 2015
You never finish o

It work very well for me, i can convert it to mobile app but how do i go about the database i.e how do i link it to database when fully converted to .apk file? Do i need to host it
Hope my database will not full consider the lenght of chart?
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by layrayson(m): 4:17pm On Jul 05, 2015
OPEYEMIAD:
You never finish o

It work very well for me, i can convert it to mobile app but how do i go about the database i.e how do i link it to database when fully converted to .apk file? Do i need to host it
Hope my database will not full consider the lenght of chart?


@opeyemaid javascript has a local storage feature which you can use to store chats locally on d users device(eg phone). and its very easy to use

1 Like

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by layrayson(m): 4:24pm On Jul 05, 2015
OPEYEMIAD:
Hmmmm Thanks for the good Job

Please Jquery is confusing, is like a source code when i download it. Do i need jquery in any chart application? can i write jquery code on my own?
thanks

jquery is a javascript library (makes javascript coding easier). YES u can write jquery codes but u MUST link ur html document to d jquerycode u downloaded cos dats d only way ur own jquery code will work... u ll love jquery wen u eventually master it cos it makes javascript CODING easier ,faster and less confusing.
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Fazzy: 5:16pm On Jul 05, 2015
thanks very much sir, pls after the post link...i got, Cannot insert record into database - Unknown column 'msg' in 'field list'
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 5:38pm On Jul 05, 2015
OPEYEMIAD:
You never finish o

It work very well for me, i can convert it to mobile app but how do i go about the database i.e how do i link it to database when fully converted to .apk file? Do i need to host it
Hope my database will not full consider the lenght of chart?

Funny dude. You need to host the whole setup on a live server before packaging your APK.

Fazzy:
thanks very much sir, pls after the post link...i got, Cannot insert record into database - Unknown column 'msg' in 'field list'
You have already created your database called dhtml i believe? Then create a table called chat inside the database,
and add the fields id, sender,msg into it. (follow the guides in the screenshots here)

I have attached the entire screenshots to this post (which includes how to create the database properly)

zando64:
Fire down bro....wat abt if u wnt do am like whatsapp
That one will be a thread for another day. But it must be tagged EXPERT because there are all sort of things to it. Maybe I shall make a tutorial like that one day sha, it is just hard to carry everyone along.

layrayson:

@opeyemaid javascript has a local storage feature which you can use to store chats locally on d users device(eg phone). and its very easy to use
As a matter of fact, in the real life chat app that i built, i saved the chats into the app locally using SQLite which is an embedded database that works very well with android, ios, even php and several other platforms.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 5:45pm On Jul 05, 2015
continued. . .

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 5:46pm On Jul 05, 2015
and finally. . . .

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by layrayson(m): 6:01pm On Jul 05, 2015
dhtml18:

Funny dude. You need to host the whole setup on a live server before packaging your APK.


You have already created your database called dhtml i believe? Then create a table called chat inside the database,
and add the fields id, sender,msg into it. (follow the guides in the screenshots here)

I have attached the entire screenshots to this post (which includes how to create the database properly)


That one will be a thread for another day. But it must be tagged EXPERT because there are all sort of things to it. Maybe I shall make a tutorial like that one day sha, it is just hard to carry everyone along.


As a matter of fact, in the real life chat app that i built, i saved the chats into the app locally using SQLite which is an embedded database that works very well with android, ios, even php and several other platforms.

wats d name of d chat app
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 6:20pm On Jul 05, 2015
Err, it has not been launched yet. But still I am under agreement not to say I built it. . . . . .you know how all them them corporate companies do now.
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by OPEYEMIAD(m): 7:01pm On Jul 05, 2015
Please i will want you to host it. may be we should contribute for the hosting, am mastering the code now. but please which one should i learn first
Javascript or Php ? I know HTML already and very good in Vb6.0
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 7:02pm On Jul 05, 2015
JavaScript and PHP go into creating web application. I believe you should learn JavaScript first, it is the more difficult of the two.

1 Like

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Drniyi4u(m): 12:35am On Jul 06, 2015
nice thread
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 6:31am On Jul 06, 2015
Thanks, and for the JavaScript rookies - you might want to look at an earlier thread I created which might teach you some JavaScript tricks - https://www.nairaland.com/1809691/creating-simple-calculator-raw-javascript
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Faiziii: 10:34am On Dec 20, 2015
thank you so much sir smiley
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Faiziii: 10:59am On Dec 20, 2015
Faiziii:
thank you so much sir smiley
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Faiziii: 11:01am On Dec 20, 2015
I just don't understand one thing and that is, where have you called the read_chats function> :/ it works fine without even calling or there's something else that makes it work without being called?
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 10:14pm On Dec 20, 2015
beats me, e don tale wey i don write this stuff o.
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by dannierichie: 10:21pm On Mar 26, 2016
hello am Daniel Ibru. live in lag and
ill like to meet with you one on one... please can you drop you mobile contact? thanks
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 8:07am On Mar 27, 2016
^^^You dudes make me feel like I am a superstar sometimes, am just a regular troll. . .
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 10:49am On Mar 27, 2016
dhtml18:
^^^You dudes make me feel like I am a superstar sometimes, am just a regular troll. . .
oYa drop am now!

spamming things back-to-back i tell ya lipsrsealed.

grin
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 7:56pm On Mar 27, 2016
Me drop my contacts on nairaland just like that? doubtful. . . .but i have an effective way of dealing with spammers sha. Most effective and semi-automatic too.
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 8:53pm On Mar 27, 2016
dhtml18:
Me drop my contacts on nairaland just like that? doubtful. . . .but i have an effective way of dealing with spammers sha. Most effective and semi-automatic too.

Lol
Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 9:16pm On Mar 27, 2016
Attached to this post is a fully designed ajax chat system for those that need it.

Thumbs up to the tutorialzine team. Link to installation instructions has been provided too.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by yemoauthentic: 11:56am On Mar 28, 2016
pls guys am trying to use d netbeans 8.0 to design a web page bt i cant find the 'web application' option in the java category

(1) (2) (3) (Reply)

How Much Programming Knowledge Can I Amass In 3 Months? / I Want To Go Into Tech; What Field Should I Choose? / How To Make a DESKTOP Executable Software Using PHP,MYSQL,SQLITE

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 49
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.