Well, first, what you have shown is mostly Javascript. This is used to manipulate data and items already in a browser. So, that has little to do with forms and using data in a database.
Have you ever worked with forms? Do you know how to save data from a form into a database table?
Here is basically how it would all be handled. (Just in general terms, not detailed for your use.)
First, you have to have a plain HTML page that lays out a form. A form would have the fields that would be text input fields where the user could type in their message. There would either be a button that allows them to submit the text they wrote or you can use the enter key to do this, but, it is trickier to do that way. Usually, there is a small “submit” or “send” button. The button would submit the form to either the same page or a second page that contains the code for saving the text to the database.
Next, there would be the PHP code which would accept the posted text-input field and add it to the message database tables with the user’s ID code.
And, another form would be created that pulls out the saved messages and displays them using PHP to query the database and pull out the needed data.
So, that is basically the three main steps that need to be used for your project. To accomplish this, you already have all the PHP code. You have the database to store and retrieve the data. (In this case, the messages.) You also have a lot of Javascript code that manipulates the data on the page. But, you need to decide how this is going to be used. Then, create the page that displays it.
To decide the use of it, you need to first decide how it is displayed. So, in FaceBook’s page, you see messages listed one after another. But, if someone enters a message at the same time you are viewing your page, you do NOT see the other person’s message. You need to refresh your page to see messages entered after you viewed your page. Hope that makes sense. So, there are ways to refresh the page or part of the part using Javascript, but, we can talk about that later on.
My suggestion would be to not make it “dynamic” for now, but, to just get it to show the entries and worry about tricky code later on.
So, now we have a game plan. First, make a simple HTML page with a form on it. some field or fields, a submit button etc… If you need help on that, here is a simple tutorial on forms:
http://www.w3schools.com/php/php_form_complete.asp
On that page, you can use the links on the left side or the PREVIOUS/NEXT chapters to view other form info…
Once you create the form and layout of the messages, you have names for the text field to enter messages in and the submit button name. Then, you can use your PHP save-to-database code that you got from the samples and change the names to match your field names.
Next, you need to test this part and make sure it is saving the messages into the database. You would have to log into your MySQL-manager page and view the live data in the database table to make sure you are saving the data in it.
Once you have the data saving to the database, then, we can work on getting the messages back out and displayed into the page above the line that lets you submit new messages.
Hope all that makes sense. First design your plan for layout of the page, then create the forms and lastly connect the PHP code to the form page. Good luck…