On this page you will learn to use the GPChat and FormGen gadgets together. And at the end of this tutorial, you should be in measure to realize your own chat on your Google Page Creator site! If you want your own chat room as here, read this tutorial.

Please forgive my poor level in the language of Shakespeare and try to understand what I try (too!) to explain...


1- Required things.

You need to have a database and a server with PHP installed on it. If you have only Google Page Creator as web site account, you can read the tutorial on How to add a database to GPC ?. The following have been done with my AwardSpace account (that I have openen for the tutorial on the database).

2- Download the PHP file.

Download the PHP file here : GPChat_PUBLIC.php.

Open this file with Notepad or equivalent.

Edit the parameters of connection to your database (host, user,...).

The parameters for the connection to your database should be found on the site of your provider when you are log in. It could be obtain in a section as "Database Manager" on AwardSpace.


Save your modifications and breath. The first step is done! You can go to the website who will interprete this PHP file. This site must be the same for the database and the PHP. And it is not Google Page Creator!

Don't upload the PHP file modified on Google Page Creator. Anyone could download this file and see your parameters of connection!


3- Upload this file on internet.

When the GPChat_PUBLIC.php file have been correctly modified, you can upload it on the site with the database. For my part, this site is AwardSpace, so I will upload my GPChat_PUBLIC.php modified on this site.

Log in the site.

Click on the link "Website Manager" on the top of the screen.

Click on the link "File Manager" of the new screen.

Now you should see a sort of FTP page where you can see each file and folder (sniff for GPC...) of your site. In AwardSpace, as you can manage more than one subdomain, you have to click on the subdomain you want to upload the file.

For me, it is the second. Note that if you click on blougou.awardspace.com, then your site must be at the address http://blougou.awardspace.com/. You can test it now if you want to be sure. The main file should be an index.html file full of advertisements...

You can understand this notion by watching the bottom of the last image. Current folder is /home/www/, on the AwardSpace server, /home is the root of the server (as C:/ on your hard drive), and the files of the subdomains are in the folder /www/ (for Word Wide Web).

At this step, I want to upload my GPChat_PUBLIC.php modified file, not on the root of my site but in a folder named "Gadgets". So create and click one more time on the folder you want to select as container.

At the bottom of the screen, you should see a panel named "File Upload". Click on the first "Browse" button for select the GPChat_PUBLIC.php file you want to upload.

When you have clicked on the "Open" button of your browse window, you can click on the "Upload File(s)" in the "File Upload" panel.

If the upload is done succesfully, you should see this kind of message (in green for success... the choice is not too hard!).

And more important, your GPChat_PUBLIC.php file should be visible on the tree of your files on the top of the screen.

If you are reading this line and you have under your eyes the same kind of screen as me... you can continue to the next step. Your file has been correctly modified (I hope...) and is now on your site with the database and PHP.

If you are completely lost, try to read a second time this paragraph and understand where you have lost the coach... sorry, it is a litteral traduction of a french expression.


4- Google Page Creator for the best!

Now you can sign in your account under Google Page Creator and attack the most important and funny phase of this tutorial. So let's go to Google Page Creator!

I think that you have already seen the screen on the right side of the page. If it is not the case... why are you reading this tutorial?!

Anyway, after having filled the "Email" and "Password" fields, you can click on the "Sign in" button.

You are now under the main page of Google Page Creator and we will create a page which will contain two different gadgets. The first will be, naturally, GPChat and the second will be able to manage the pseudos and passwords of your visitors. As you have a database, why don't use it?

First of all, create a new page by clicking on the link "Create a new page" on the top left corner of the page.

Fill the new field with the name that you want, but for this tutorial I wanted to be extremely original! That is why I named my new page... myGPChat.

You can now click on the "Create and Edit" button. As you may not have the same home page than me (different look and different layout) you may see some difference for the following images. But Google Page Creator stay Google Page Creator and the principles are the sames.

So, now you should see a new page completely empty. As you can see on the left side, you have the title with by default the name of your page (here myGPChat) and nothing else.

But this page will have a interactive content soon! It is just a question of minutes now. We will add our first gadget to this page. For this, click on the link "add gadget" on the right bottom corner of the screen. If you don't see this link, please read the tutorial on How to add a Gadget into GPC ?. If you have this link, just click on it.

In the new screen, click on the link "add an URL" for adding a gadget which is not in the Directory of Google. This gadget GPChat can simply be call by his own URL.

After having clicked on the link, a gray box appear in which you will enter the URL of the gadget GPChat. This URL is :

http://gilles.rasigade.googlepages.com/GPChatv5_p4.xml

Just copy this URL and paste it into the field for the URL. Note that a gadget is an XML file, so don't try to add another file than a XML file, it won't work.

You can now click on the "Add" button on the right side of the input field for going to the parameters screen. If the URL of the gadget you have entered is correct, you should see a setup screen for the gadget GPChat.

On this screen you have the ability to modify all the appearance of the gadget, to choose the number of entries you want for your gadget,... But here, we are just interested by the third field : "URL GPChat.php", "Messages Table" and "Users Table".

In the first field "URL GPChat.php" enter the URL of the file GPChat_PUBLIC.php you have upload on the third step of this tutorial. I remember that if you have upload this file in the folder "/home/www/blougou.awardspace.com/Gadgets/", the URL for the file will be "http://blougou.awardspace.com/Gadgets/GPChat_PUBLIC.php". If you are using another provider, this can be quite different.

In the second field "Messages Table", enter the name of the table you want to use for the messages. The name must be as simple as possible and you just need to remember it for some minutes. Write this name on a paper if you think that you will forget it before the end of this tutorial (I have noted it on a paper, this is for why I say this...). By example, for my gadget I used the name, one more time extremely original, of "messages".

In the third field "Users Table", enter the name of the table you want for the store of the users. Same comment as before, write this name on a paper, you will need it in few minutes!

When these three fields have been modified, you can click on the "OK" button. Now you should see if you have correctly understood the case of the URL... If you don't see the next screen exactly, you may have done a mistake in the URL of the GPChat_PUBLIC.php file.

You have add a gadget into Google Page Creator but its dimensions are not really the correct. Just resize your gadget with the red triangles on the bottom of the gray box and place your gadget where you want on your new page.

By example, I had this screen under the Google Page Creator editor page.

You can now publish your page and view it in live. Click for this on the "Publish" button on the left top corner of the page.

Wait a few seconds and click on the link "View live".

On the new page, you should see the gadget in its real appearance with a Welcome message and some different input fields.

If you see this image on your page, you are really close to the end!

The gadget ask you now if you want to automatically create the needed tables in the database. For realize this task, you need to fill all the fields. In particular, you can notice that four of them are exactly the field you have to modify on the GPChat_PUBLIC.php file in the second step of this tutorial. They must have the same parameters that you have enter in the GPChat_PUBLIC.php. They are here for the security of your parameters of connection.

The two last fields must be filled by the name of the tables you have choosen for the "messages" and for the "users" on the setup screen of the gadget.

When all these fields are filled, you can click on the "create" button.

Now, if your parameters of connection you have entered here and your rights for the database are correct, you should read the answer of the GPChat_PUBLIC.php :

After 3 seconds, the gadget is reloaded and nothing else that the fields for the password, pseudo and message can be viewed.

Now, you would like to have a best appearance for your gadget. The three fields should be on the same line... You have absolutely reason. We are going to change the layout of the page. For that, click on the link "Change Layout" on the right top corner.

Apply the layout you want. Personnaly I prefer the largest of all. This is the best for the gadget I think.

5- And Users you will manage.

Now, we are going to add the second gadget to this page, FormGen. This one will be able to add the users to your the database. This gadget is completely generic so I use it for this kind of thing but a lot of differenet forms can be done with it.

Add the gadget as explain previously and in the setup screen of the gadget, fill the fields as explain now.

The first input field must have the url of your GPChat_PUBLIC.php file. One more time, it is this PHP file that will interpret the data that the visitors will send.

The three fields "Question", "Required" and "Types" are coupled together. In a sentence like A|B|C, A refer to the first question, B to the second and C to the last question. With this sort of arrangement, the first element of each line must refer to the hidden input and will give the name of the table for the users to the PHP file.

The fields continue with the question for the pseudo (question=Pseudo :,required=true,type=text) and for the password (question=Password :,required=true,type=password).

When these four fields are correctly filled, you should see the same form than on the last picture. If it is the case, you can click on the "OK" button. Dispose this gadget on your page where you want, publish the page and view it in live.

Your form is now on your page and you can insert your first user... you! One more time enter a value for the pseudo and the password and click on the "submit" button.

If the URL and the fields of this gadget are correct you should have a Welcome message from the GPChat_PUBLIC.php file. The answer indicate if the pseudo has been successfuly added to your database or if this pseudo is already used.

You can now use the GPChat gadget and let your first message on it.

Enter what you want and click on the right arrow or enter for validate your message. The gadget will check if you are known (pseudo and password) and write your message for the gadget.

The result will be :

If you have the same kind of picture on your computer... the gadget works! Congratulation. If not, done another time the steps of this tutorial and if you have always a problem, just let a message on the Google Page Creator Group.

Before leaving this page, don't forget to rate it!

For viewing the page of the example : myGPChat.

Thank you very much,