Hello.
I started on a project like this a while back.
Let's start with the easy questions first... the text box.
You are right on your assumptions, just a normal text box and a submit button will work fine (see below for discussion on button though). They can either hit the button or press enter to submit the line.
To change the text box colour (I'm from New Zealand, that's how we spell colour) use either a css classs or simply put it in the style attribute ie
<input type="text" name="box" style="background-color: #F00;" />
(for a nice red xhtml complient text box.
Now for the harder stuff - the how.
There are many many different ways of making something like this. Here are some I can think of off the top of my head (for each of these you could use either a mysql table or a flat file to store the actual conversation):
- Fully Javascript:
when you click the submit button, a javascript is run calling a php file to add the new line to the database and the page is not reloaded. A javascript is also used to get any new lines that have been posted by other users since the last check again not requiring the page to be reloaded (or the php script can return the whole conversation, but this would require more processing and most likely cause some dodgy looking effects)
- "Hybrid" javascript for chat window, frame and form submission for the text box or the opposite way round....
- Fully page loads - the chat window frame is reloaded every x seconds reloading the whole chat (and scrolling as necessary) and the text box frame is reloaded every time a new line is submitted
There are many other tweaks and things you can make to these but those are the general ideas. I personally would strongly recommend the fully javascript (with php backbone) option. Below is how I would try and do it (not explaining how you would first get a chat id).
The main page would contain a div region (say id="chat") that the chat would be loaded into and the form which would contain the text box and a submit button. The form would have a onsubmit attribute like onSubmit="do_send(); return false;" to make it post the chat message, but not reload the page.
A javascript which would be run automatically using a window interval would call and receive the output from a php script (using ajax). This output would search a mysql table containing the list of messages sent (something like id (p.key), chat_id, userid, datetime...) that had the same chat_id and a id greater than the id of the last message received from the php (sent through GET method and stored in javascript)
"SELECT * FROM chat WHERE id > $_GET[id] AND chat_id = $_GET[chat_id]"
after javascript had received the new messages it would put them into the chat div and scroll it to the bottom (may need to be an iframe or something like it)
When you submit the do_send() function would again call a php script through ajax send the data through GET.
Using a method like this, you only need 2 mysql commands and the php scripts could probably be... about 20 lines. The javascript... about 40.
Below is an example of a javascript include thing that you could use
var xmlhttp
function loadXMLDoc(url) {
// code for Mozilla, etc.
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
} else if (window.ActiveXObject) { // code for IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp) {
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
}
}
function state_Change()
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
{
// if "OK"
if (xmlhttp.status==200)
{
contactMenuFinish(xmlhttp.responseText);
}
else
{
// contactMenuFinish("Problem retrieving data:" + xmlhttp.statusText);
contactMenuFinish(iframesProblem + " " + xmlhttp.statusText);
}
}
}
This script is used in a dynamic menu - the loadXMLDoc function is called when the user clicks, the state_Change() function is then called once the javascript has received the file etc and that then calls the function to make and then show the menu
Hope this helps on your quest.
You could always try and find a ready made script.... but where is the fun in that! Have Fun!
)