Creating A Group Chat With Html/javascript/php/mysql For Beginners - Programming

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,207,608 members, 7,999,646 topics. Date: Monday, 11 November 2024 at 11:22 AM

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

Nairaland Forum / Science/Technology / Programming / Creating A Group Chat With Html/javascript/php/mysql For Beginners (14358 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)

Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 1:22pm On Jul 03, 2015

Good afternoon people,
I created a thread earlier titled "How To Build An Android Chat Like Whatsapp For Absolute Beginners" which was meant to be a thread to expose beginners to web and android technologies - but for certain logistic reasons, the thread was a failure. So we are restarting again.

[Course Outline]
Introduction:
- Build A Simple Chat Interface with Web Technologies
- Integrate MySQL database into your project
- Ability to connect to the group chat via different devices

Technologies involved
- PHP, MySQL, Wamp server

You need to have the following installed on your pc:
- Notepad++: https://notepad-plus-plus.org/ (optional but recommended)
- wamp server: http://www.wampserver.com/en/ (xamp, easyphp, zend server, ISS or anything that can run php/mysql is fine)

Disclaimer: please let us observe decency on this thread. If you feel that you can do a better job than me, please click here to signify that or [url=https://www.nairaland.com/search/shut%20up/0/0/0/3]click here if you are still not satisfied[/url].

1 Like 1 Share

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 1:25pm On Jul 03, 2015

.... find out why I'm laughing

*rolls out*

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 1:38pm On Jul 03, 2015

^^^Thank God you are already rolling, just roll out of the thread like that and never come back.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by seunthomas: 1:39pm On Jul 03, 2015

He has started again. Oga dhtml17, you no dey tire

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 1:49pm On Jul 03, 2015

*rolls in*

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nairalander01: 1:54pm On Jul 03, 2015

I just pray this works

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 2:10pm On Jul 03, 2015

Please go ahead and install your wamp server. If you have any issues please let me know.

After installing your wamp server, please open "My Computer" and navigate to "c:\wamp\www" and create a folder called "dhtml"
So we will now have a windows path called "c:\wamp\www\dhtml" and that is where we are going to be running our web stuffs.

We are going to start from a basic html page layout of the chat (beginners fashion):
Now open your Notepad++, copy the below code into it:

<html>
<head>
<title>DHTML Chat</title>
<script>
var user_name='DHTML'; //default username is DHTML

//displays the current logged in user
function display_user() {
document.getElementById('current_user').innerHTML=user_name;
document.getElementById('message').focus(); //puts blinking cursor on the message area
}

function login() {
var v=prompt("What is your name",user_name);
if(v==null || v=='') {return false;} //you clicked cancel or entered empty name

//username is changed
user_name=v;
display_user();
}

window.onload=function() {
display_user();
}
</script>

<style>
body {margin:0;padding:0}
table {width:100%;height:100%;}
textarea {width:100%;overflow:hidden;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
#chat_display_area {background:#ffffff;}
</style>
</head>
<body>

<table border>
<tr><td height=1>
Welcome <span id='current_user'></span>, <a href='javascript:login();'>Change User</a>
</td></tr>
<tr><td id='chat_display_area'>

</td></tr>
<tr><td height="1">
Please type your message below and press enter:
</td></tr>
<tr><td height="3">
<textarea id='message' placeholder="..." rows='3' wrap='off'></textarea>
</td></tr>

</table>

</body>
</html>

and save that as index.php inside our work folder (c:\wamp\www\dhtml)
This means that the html document above will be saved into c:\wamp\www\dhtml\index.php (a screenshot has been attached to give a glimpse into the saving process).

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 2:13pm On Jul 03, 2015

To run the index.php just provided, make sure you start up your wamp server first, then navigate your browser to
"http://localhost/chat/index.php" - this will make wamp server to render the document properly inside your browser.

Once again, a screenshot has been provided below of the process of viewing the first document provided.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 2:19pm On Jul 03, 2015

This index.php document I have just provided is a simple page template comprising: HTML, JavaScript and CSS only in a single document.
It has a limited functionality i.e. It assumes the current user is DHTML, you can click on the "Change User" to change the display name.

However, the changes are only made into the browser, so if you refresh the browser, everything resets again. In a real life situation, we use a database system to save such changes permanently but that is beyond the scope of the discussion at this stage.

The template uses HTML with a simple table layout which is again an attempt to simplify matters because beginners find CSS layouts a bit tasking.
And the resources (stylesheet and javascript) are all inside the same file. Later on we will separate the html and css files into different documents and bring in the jQuery library to simplify our tasks.

I will pause at this point, I shall take questions if ANY before moving on.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 2:33pm On Jul 03, 2015

Let us now stretch it a bit, now we want to display some sample text in the chat area.

Update your index.php to

<html>
<head>
<title>DHTML Chat</title>
<script>
var user_name='DHTML'; //default username is DHTML

//displays the current logged in user
function display_user() {
document.getElementById('current_user').innerHTML=user_name;
document.getElementById('message').focus(); //puts blinking cursor on the message area
}

//scroll chat area to the bottom
function scroll_chat_area() {
var chatDiv = document.getElementById('chat_display_area');
chatDiv.scrollTop = chatDiv.scrollHeight;
}

function login() {
var v=prompt("What is your name",user_name);
if(v==null || v=='') {return false;} //you clicked cancel or entered empty name

//username is changed
user_name=v;
display_user();
}

//run this function when page is just loaded
window.onload=function() {
display_user(); //display current logged in user
scroll_chat_area(); //scroll chat area to bottom
}
</script>

<style>
body {margin:0;padding:0}
table {width:100%;height:100%;}
textarea {width:100%;overflow:hidden;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
#chat_display_area {height:100%;background:#ffffff;vertical-align:bottom;overflow:auto;}
</style>
</head>
<body>

<table border>
<tr><td height=1>
Welcome <span id='current_user'></span>, <a href='javascript:login();'>Change User</a>
</td></tr>
<tr><td>
<div id='chat_display_area'>
<?php
//display text called Chat 1 to 60 as sample data with php
for($i=1;$i<=60;$i++) {
echo 'Chat '.$i.'<br/>';
}
?>
</div>
</td></tr>
<tr><td height="1">
Please type your message below and press enter:
</td></tr>
<tr><td height="3">
<textarea id='message' placeholder="..." rows='3' wrap='off'></textarea>
</td></tr>

</table>

</body>
</html>

You will notice that the chat display area scrolls down automatically to the last message shown in the attached screen

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 2:35pm On Jul 03, 2015

Tip for those of you posting codes on Nairaland - avoid the use of double quotes especially when you follow it by a semi-colon. Nairaland does not like that for strange reasons. But when writing or posting codes on nairaland and you follow this procedure, you code will come out neatly like mine.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 2:51pm On Jul 03, 2015

Now we want to make it such that you can at least chat with yourself:

To do that, simply update your index.php to the following:

<html>
<head>
<title>DHTML Chat</title>
<script>
var user_name='dhtml18'; //default username is DHTML
var chatDiv;

//displays the current logged in user
function display_user() {
document.getElementById('current_user').innerHTML=user_name;
document.getElementById('message').focus(); //puts blinking cursor on the message area
}

//scroll chat area to the bottom
function scroll_chat_area() {
chatDiv.scrollTop = chatDiv.scrollHeight;
}

function login() {
var v=prompt("What is your name",user_name);
if(v==null || v=='') {return false;} //you clicked cancel or entered empty name

//username is changed
user_name=v;
display_user();
}

//send chat to the server
function dispatch_msg(msg) {
nmsg='<b>'+user_name+'</b>: '+msg+'</br>';

chatDiv.innerHTML+=nmsg;

scroll_chat_area();
}

//process message for sending
function send_chat(el) {
var msg=el.value;

if(msg!='') {
dispatch_msg(msg);
}

el.value='';
el.focus();
}

//run this function when page is just loaded
window.onload=function() {
//gets a handle for the chat area
chatDiv = document.getElementById('chat_display_area');

display_user(); //display current logged in user
scroll_chat_area(); //scroll chat area to bottom
}
</script>

<style>
body {margin:0;padding:0}
table {width:100%;height:100%;}
textarea {width:100%;overflow:hidden;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
#chat_display_area {height:100%;background:#ffffff;vertical-align:bottom;overflow:auto;}
</style>
</head>
<body>

<table border>
<tr><td height=1>
Welcome <span id='current_user'></span>, <a href='javascript:login();'>Change User</a>
</td></tr>
<tr><td>
<div id='chat_display_area'>
</div>
</td></tr>
<tr><td height="1">
Please type your message below and press enter:
</td></tr>
<tr><td height="3">
<textarea onkeydown="if(event.keyCode==13) {send_chat(this);return false;}" id='message' placeholder="..." rows='3' wrap='off'></textarea>
</td></tr>

</table>

</body>
</html>

1 Like

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 2:54pm On Jul 03, 2015

Up to the above screen, I have still using ordinary HTML,CSS and JAVAscript, no PHP is being utilized yet (except when I generated random chat data and I have withdrawn the PHP in the latest sample).

So the point where we shall be needing our database is where we want to interconnect different users from different browsers or devices. That is where we shall enter server technologies.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 3:15pm On Jul 03, 2015

Next you need to create a MySQL database:
- make sure your wamp server is started
- navigate your browser to http://localhost/phpmyadmin
and follow the instructions in the pictures below:

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 3:16pm On Jul 03, 2015

If you got all that right, you should land here:

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 3:23pm On Jul 03, 2015

Break time. What we are doing here is a very simple and straight forward chat, we are not adding too much stuffs like dates and times to it. I am keeping it as simple as possible. If you can actually learn to figure out the codes above, and future codes coming. It will serve as a basis for you to actually advance yourself and build something far more better than this.
But if you just copy the codes and keep somewhere, well. . . . .it may help you a bit, but your overall skills will not improve - thus defeating the aim of this thread.

In our next update, we shall be looking at how to save the chats into the database so that if you close your browser and re-open it, you will find the last chats right inside waiting for you.

3 Likes

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by njokuifeanyi30: 4:35pm On Jul 03, 2015

How much do I charge a company for making an app for them

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by JackOfAllTrades: 4:49pm On Jul 03, 2015

Dude you're a comedian

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by OPEYEMIAD(m): 5:33pm On Jul 03, 2015

Broooooooooo

i dey follow you bomber to vender
no starve us oooo

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 7:16pm On Jul 03, 2015

JackOfAllTrades:
Dude you're a comedian

Who is a comedian? Hope is not me!

OPEYEMIAD:
Broooooooooo
i dey follow you bomber to vender
no starve us oooo

Hehehehe, you guys should start contributing money o. . . . .programmer must chop!

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 8:12pm On Jul 03, 2015

Before we move on - here is an upgraded version of the template. This new version actually allows you to signin and signout

<!DOCTYPE html>
<html>
<head>
<title>DHTML Chat</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
var user_name='dhtml18'; //default username is DHTML
var chatDiv;
var init=false;
var tguest;
var tuser;

//displays the current logged in user
function display_user() {
document.getElementById('current_user').innerHTML=user_name;
document.getElementById('message').focus(); //puts blinking cursor on the message area
}

//scroll chat area to the bottom
function scroll_chat_area() {
chatDiv.scrollTop = chatDiv.scrollHeight;
}

function login() {
var v=prompt("What is your name",user_name);
if(v==null || v=='') {return false;} //you clicked cancel or entered empty name

//username is changed
initialize(); //get chat ready for use

user_name=v;
display_user();
}

//send chat to the server
function dispatch_msg(msg) {
nmsg='<b>'+user_name+'</b>: '+msg+'</br>';

chatDiv.innerHTML+=nmsg;

scroll_chat_area();
}

//process message for sending
function send_chat(el) {
var msg=el.value;

if(msg!='') {
dispatch_msg(msg);
}

el.value='';
el.focus();
}

function logout() {
//change for guest to user mode
tguest.style.display='table';
tuser.style.display='none';

init=false;
}

//run this function when page is just loaded
function initialize() {
init=true;
//gets a handle for the chat area
chatDiv = document.getElementById('chat_display_area');
tguest = document.getElementById('tbl_guest');
tuser = document.getElementById('tbl_user');

display_user(); //display current logged in user

//change for guest to user mode
tguest.style.display='none';
tuser.style.display='table';

scroll_chat_area(); //scroll chat area to bottom
}
</script>

<style>
html,body {height:100%;}
body {margin:0;padding:0}
table,tbody {width:100%;height:100%;}
textarea {width:100%;overflow:hidden;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
#chat_display_area {height:100%;background:#ffffff;vertical-align:bottom;overflow:auto;}
#tbl_user {display:none;}

#welcome_message {vertical-align:top;}
</style>
</head>
<body>

<table border id="tbl_guest">
<tr><td height=1>
Welcome Guest, <a href='javascript:login();'>Login</a>
</td></tr>
<tr><td id="welcome_message">
You are welcome to DHTML Chat Demo - HTML Only! You are seeing this because you are not logged in. Please click on login and enter your name.
</td></tr>
</table>


<table border id="tbl_user">
<tr><td height=1>
Welcome <span id='current_user'></span>, <a href='javascript:logout();'>Logout</a>
</td></tr>
<tr><td>
<div id='chat_display_area'>
</div>
</td></tr>
<tr><td height="1">
Please type your message below and press enter:
</td></tr>
<tr><td height="3">
<textarea onkeydown="if(event.keyCode==13) {send_chat(this);return false;}" id='message' placeholder="..." rows='3' wrap='off'></textarea>
</td></tr>

</table>

</body>
</html>

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Slim1978(m): 8:20pm On Jul 03, 2015

dhtml18:
Break time. What we are doing here is a very simple and straight forward chat, we are not adding too much stuffs like dates and times to it. I am keeping it as simple as possible. If you can actually learn to figure out the codes above, and future codes coming. It will serve as a basis for you to actually advance yourself and build something far more better than this.
But if you just copy the codes and keep somewhere, well. . . . .it may help you a bit, but your overall skills will not improve - thus defeating the aim of this thread.

In our next update, we shall be looking at how to save the chats into the database so that if you close your browser and re-open it, you will find the last chats right inside waiting for you.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 8:47pm On Jul 03, 2015

dhtml and dhtml18 were banned for posting codes. . . .tutorials suspended until further notice.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Onyiibazz: 9:03pm On Jul 03, 2015

Following with immediate effect

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 9:06pm On Jul 03, 2015

^^^When OP has been banned!

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Vicben(m): 12:05am On Jul 04, 2015

Following religiously

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 3:28pm On Jul 04, 2015

donjayzi:
dhtml and dhtml18 were banned for posting codes. . . .tutorials suspended until further notice.

You must be joking.....

1 Like

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 6:10pm On Jul 04, 2015

Very true, is what the dude said.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 6:32pm On Jul 04, 2015

donjayzi:
Very true, is what the dude said.

Let me call him.

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 6:58pm On Jul 04, 2015

seun lalasticlala unban this guy na which kind bad belle be this?

Re: Creating A Group Chat With Html/javascript/php/mysql For Beginners by Nobody: 8:46pm On Jul 04, 2015

Okay people, it appears as if I have been unbanned once again. . . . . . .

Attached is an updated copy of the Template file.

Please note that I have moved the styles and scripts into 2 separate files (style.css and chat.js respectively)
and these must be copied into the project folder as well.

What this template does:
- it provides a login / logout interface all written in html, css and javascript
- it allows you to chat with yourself and see the result of your chat

What we are adding next:
- Ability for the chat to be saved into a database so that different users can connect to chat

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

The 3 Types Of Developers You Will Find In Africa. Which 1 Are You? / How Much Programming Knowledge Can I Amass In 3 Months? / Which Programing Language Is Best To Start With

(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. 66
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.