Home arrow MySQL arrow Page 4 - A MySQL Driven Chat Script
MYSQL

A MySQL Driven Chat Script


In this article, Tim will show you how to create a quick-n-easy chat script using PHP and a very simple MySQL database. The script will allow visitors to choose a nickname, enter text to send to the chatting window, and view messages from other people... all in real-time! For a bit of fun, the chat application also has buttons to send several emote-icons including smiling and frowning faces.

Author Info:
By: Tim Pabst
Rating: 4 stars4 stars4 stars4 stars4 stars / 280
December 25, 2001
TABLE OF CONTENTS:
  1. · A MySQL Driven Chat Script
  2. · Creating the database
  3. · The chat script explained
  4. · The chat script explained (contd.)
  5. · The chat script explained (contd.)
  6. · Conclusion

print this article
SEARCH DEVARTICLES

A MySQL Driven Chat Script - The chat script explained (contd.)
(Page 4 of 6 )

The GetInput function

This function is responsible for generating the bottom frame of our chat window, and allows the user to enter their message in a text box and send it. If you look at the screen shot shown above, you will also see that the bottom frame contains a “Say” button (to submit the message), a color drop-down list (this lets the visitor choose the color of their message), and several icon-icon buttons.

When we press enter in the text field, or click on the “Say” button, the JavaScript function “doSubmit” is called. This function will make sure that the visitor has actually entered a message. If they have, then the function will get the currently selected color from the drop-down list, and change the value of the text field so that it’s surrounded by <font> and </font> tags. The function will return true, and our form is submitted. If the text field is empty, the browser displays a message box kindly asking the user to enter a message and returns false, stopping the form from being submitted. The code for the “doSubmit” function is shown below:

function doSubmit()

{

if(document.chatform.chat.value == '') {

alert('Please enter some text!');

document.chatform.chat.focus();

return false;

}

document.chatform.chat.value = '<font color="'+document.chatform.col[document.chatform.col.selectedIndex].text+'">'+document.chatform.chat.value+'</font>';

document.chatform.submit();

document.chatform.chat.value = '';

document.chatform.chat.focus();

return true;

}


When one of the icon-icon buttons is pressed, the form will call the sendFace JavaScript function, which will automatically send either “:)”, “:(”, or “:D” to the top frame of our chat window. When the top frame receives either of these, the ShowAddPosts function will automatically display an image corresponding to that icon-icon, instead of the “:)”. So, for example, if we entered “:)” in the text field or clicked on the “:)” button, the top frame would display the appropriate icon-icon image, like this:

Clicking on the smiley face icon-icon button

The images for the icons-icons are included as part of the support material at the end of this article, and should be saved in the same directory as the chat.php script (which is also included as part of the support material).

The code for the entire GetInput function is shown below:

function GetInput() {

global $HTTP_SESSION_VARS;

global $chat;

global $nick;

?>



<form onSubmit="return doSubmit" name="chatform" method="post" action="chat.php" target="posts">

<input type="text" name="chat">

<input type="hidden" name="nick" value="<?php echo $nick; ?>">

<input type="button" onClick="doSubmit()" name="Submit" value="Say">

<select name="col">

<option>Black</option>

<option>Red</option>

<option>Green</option>

<option>Blue</option>

<option>Orange</option>

</select>



<input type="button" name="DoFace1" value=" :) " onClick="sendFace(1)">

<input type="button" name="DoFace2" value=" :( " onClick="sendFace(2)">

<input type="button" name="DoFace3" value=" :D " onClick="sendFace(3)">

<input type="hidden" name="action" value="posts">

</form>

<script language="JavaScript">

function sendFace(faceNum)

{

switch(faceNum)

{

case 1:

document.chatform.chat.value = ':)';

break;

case 2:

document.chatform.chat.value = ':(';

break;

case 3:

document.chatform.chat.value = ':D';

break;

}



document.chatform.submit();

document.chatform.chat.value = '';

}

function doSubmit()

{

if(document.chatform.chat.value == '') {

alert('Please enter some text!');

document.chatform.chat.focus();

return false;

}

document.chatform.chat.value = '<font color="'+document.chatform.col[document.chatform.col.selectedIndex].text+'">'+document.chatform.chat.value+'</font>';

document.chatform.submit();

document.chatform.chat.value = '';

document.chatform.chat.focus();

return true;

}

</script>

<?php

}



blog comments powered by Disqus
MYSQL ARTICLES

- MySQL and BLOBs
- Two Lessons in ASP and MySQL
- Lord Of The Strings Part 2
- Lord Of The Strings Part 1
- Importing Data into MySQL with Navicat
- Building a Sustainable Web Site
- Creating An Online Photo Album with PHP and ...
- Creating An Online Photo Album with PHP and ...
- PhpED 3.2 – More Features Than You Can Poke ...
- Creating An Online Photo Album with PHP and ...
- Creating An Online Photo Album with PHP and ...
- Security and Sessions in PHP
- Setup Your Personal Reminder System Using PHP
- Create a IP-Country Database Using PERL and ...
- Developing a Dynamic Document Search in PHP ...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials