PHP form and Hype WebApp


(Salvador) #1

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.


How to add an email contact form?
How to send me the score users get in my quizzes?
How to send me the score users get in my quizzes?