PHP form and Hype WebApp

Hi Guys,
i’dlike to share my experience for Web Programming.
My “problem” was i wanted to insert my Hype Animation into a XML Database / PHP Website as a frontend for reading results of Querying.
So here is the Architecture:
XML CORE DB ENGINE -> PHP -> APACHE -> JavaScript FrontEnd.

== How could i allow communication between PHP results / SESSION variables and my Hype FrontEnd. ==

Here is what i did (there is perhaps other ways, tips and tricks are welcome :smile: :

First:

Build a form within a div with unique Id.

<form id="myForm" action="my.php" method="POST">
<input type="text" name="myVariable" id="myVariable"/>
</form> 

Code a CSS style

#mydiv {display:none;} 

in order to have a blank Web Page

Now, get into Hype and “edit Sources” of a new Javascript. Insert a new Rectangle (or whatever elements you want) with a unique Id (#myHypeRectID):

var t = document.getElementById('myDiv').innerHTML;
    document.getElementById('myHypeRectID').innerHTML = t;

Go to “Scene Tab” in Hype Editor, “Run on Load Scene”, insert “Run Javascript” and link to your new JavaScript Ressource.

Save as folder, upload to your Website and navigate your Website: you should see your rectangle showing you input.

Get back to Hype.

Insert a Button into your scene.

Insert “new JavaScript ressource”

document.getElementById('myVariable').value=''; document.forms['myForm'].submit();

Turn Back to Hype Editor. Select your button -> onClick -> Run Javascript -> YoutScript

Save as folder, upload to your site, navigate: you should see your rectangle, a button, etc…

So this is cool for inserting a PHP form Validation module. How could i receive datas into my WebApp ?

Well, it’ s easy now:

define a div with unique id, CSS display: none, something like:

<div id="myPhpId" style="display:none;"><? echo $_POST['myVar']; ?></div>

Turn Back to Hype Editor. Load your Scene, add a Rectangle or whatever element you want (Id=“myRect”).
Go To JavaScript Editor, new one:

document.getElementById('myRect').innerHTML = document.getElementById('myPhpId').innerHTML

Go to Scene Menu in Hype Editor, onLoad -> Run JavaScript -> your javaScript.

Save as folder, upload, navigate … that’s all folk.

4 Likes