How do I implement PHP to work with hype projects?


(Markus Bjerre) #1

Hey guys! I’ve asked this question in the old forums but this time I’ll try to be more specific.
In the original document I tried to send mail from a local machine (at a museum with internet connection) that will send the results of a quiz that the user has been playing to his/her own email adress. What you get once the quiz is done is a result screen and a function which allows you to type in your email adress and click on a submit/send button.

However, since I have no idea on how php works I’m curious to see if anyone has done this and could give me some advice.

I have been trying the phpmailer on github. I copy pasted the example code from the readme and ended up in two php-files. I also tried to follow the instructions at this link which has a preset of the guys’ email, but when I export the hype document and open up the html-file and click submit I get the php file in a text version instead of a “wrong email adress” or w/e.

If anyone of you gently souls could spare a minute or two and explain what I need to do to get it working would be very much appreciated!

Here is the hypefile: phpmailer_test.hype.zip (23.3 KB)


AJAX/PHP DB Query within Hype
(Andrew) #2

Create a php file, and just add this:

$email = $_POST['email'];
$subject = $_POST['subject'];
$message =  $_POST['message'];

$to = $email; // who to send it too
$from = "contact@website.me";
$subject =  $subject;
// To send the HTML mail we need to set the Content-type header.
$headers = "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
$headers .= "From: $from\n";
//options to send to cc+bcc
    //$headers .= "Cc: [email]maa@p-i-s.cXom[/email]";
    //$headers .= "Bcc: [email]email@maaking.cXom[/email]";

// now lets send the email.
echo mail($to, $subject, $message, $headers);

Now, you just need an ajax request from within Hype to send the info collected in the above `$_POST’ statement.

 $.ajax({
    url: 'email.php',
    type: 'POST',
    dataType: 'JSON',
    data: {
          email: email,
          subject: about,
          message: message
          },
     success: function (res) {

            }
});

Hope it helps :smile:


(Markus Bjerre) #3

Awesome MrAddy! Will look into it and see if I can make it work. Just a quick question: How do I do to add my gmail account so that all the mails that you are sending will be sent from it, or did you mean that I keep all the attached php files in the document and add another (third) php file?

How it should work:

  • Person has finished the quiz
  • Person is typing his email adress
  • Person is clicking on submit
  • An email has been sent from my email (gmail) to his/her with an attached .png file
  • Everyone is happy

  • (Andrew) #4

    You would put your email under the $from part of the php script:

    $from = "contact@gmail.com";
    

    As for the latter part, not sure I understand, the php needs to be help on the same sever as the Hype Docs, and you would reference it within the $.ajax request like:

    url: 'path/from.root/to/email.php',
    

    If you was to put it outside the hype folder, so your DIR would look like:

    index.html
    email.php
    quiz.hyperesoruces

    Then the ajax would look like this:

    url: './email.php',
    

    The ./ is telling the $.ajax url to look outside one folder for the email.php file, based on where the file is calling the ajax, which is within the

    quiz.hyperesorces/HYPE..min.js file

    Hope that helps :smile:


    (Markus Bjerre) #5

    Well the thing is that I don’t have a “server”, it’s all being run from the desktop where I have a folder which includes the html and resources. So, to get the email function working I should need a password and smtp-info right? That’s why I was wondering if I only needed your code and not anything else.

    I’m unsure on how to add the ajax since I’ve never used that either. I guess it’s easy by adding it to a function (javascript) inside hype, and then trigger it with the submit button?

    I’m probably asking for too much Addy but is it possible for you to add the working code to the hype project that I linked in the first comment?

    You’re awesome for taking the time <3


    (Andrew) #6

    Yes, leave it with me for a few hours. The local server, has it the latest PHP server installed upon it ?

    Any my code does not need any SMPT info, the PHP server deals with it all :smile:


    (Andrew) #7

    Okay, here is the working app folder:

    emailTest.zip (167.2 KB)

    Here you can see it working upon a live server:

    http://www.puppetonmuppets.com/emailTest/

    Remember servers queue mail requests, so it may not be instant, but within 2 mins.

    EmailTest Project Files:

    emailTestProject Files.zip (100.6 KB)


    (Markus Bjerre) #8

    Wow, thanks Andrew!
    It worked perfect from the website that you were hosting it on! However, I’m not sure how to set up a local server. I had no clue until you told me that I needed it, should be obvious I guess since it’s php (which I’m not used to work with though… excuses :stuck_out_tongue: ).

    I managed to install XAMPP on my mac computer and added the files to the correct path which is under “htdocs”. I’ve tried some phpinfo and hello codes and they are working as they should do. I’m not sure why your example isn’t. I’m not getting a result in the resultbox. Maybe that’s a clue?

    I’ve followed these manuals, with a little bit of modifying obviously:
    https://blog.udemy.com/xampp-tutorial/
    http://codedog.net/2013/12/03/mavericks-xampp-and-sendmail-oh-my/

    Note: Some codes are missing, like in the last link where the main.cf is nowhere to be found.


    (Andrew) #9

    Do we have access to the server, via IP, to the page in question ?


    (Markus Bjerre) #10

    Sorry but I’m not sure if I can do that since it’s not hosted on any domain.
    Here is what I get in the javascript console on chrome, when I click on the send button:
    [context: document, selector: “#email”, jquery: “2.1.3”, constructor: function, toArray: function…]


    (Markus Bjerre) #11

    And this is what I get with firebug, no errors in any browser:


    (Nick ) #12

    You can also install MAMP to simulate a server on your Mac. I use this for wordpress development all the time.

    https://www.mamp.info/en/

    You only need the free version then you can run your php scripts right on the desktop


    (Andrew) #13

    If you are running a server, it will tell you the IP of the server, if the server is connected to a router, you will get an internal IP, like, 192.168... From within the route, you can port forward :8080 to the servers local address. Then the IP on your router you just provide, and we, on the outside, just need to put that ip, with port 8080, example

    45.322.213.21:8080/index.html

    This is the best way, and I cannot see why this would not work. That said, what is on the post tab ?


    (Markus Bjerre) #14

    Hi again MrAddy and nick! Thank you so much for your help! I managed to create a server that is working on a PC using the link you provided me nick (WAMP in this case)! Also, I managed to send an email with phpMailer so the send email is working as it should.

    Today I have been trying to implement the new php-code into your hype project MrAddy, as well as adding a virtual keyboard for the touch monitor that will display the site.

    Since I am quite unsure on how php is coded I am in need of your help again. What I need is the “send-email.php” file to collect the information from the #emailbox just like yours did. I’ve been trying many ways but I can’t find out how to do it, but I guess it has to do with the $email that has been replaced with $mail.

    A little note: I will also be in need to collect data from an image in the scene, just like how the $subject works. Any idea on this one?

    Thanks again for all the help!
    emailproject2.0.zip (610.8 KB)


    (Markus Bjerre) #15

    I forgot to tell you that I have modified the email adress and password before the upload here but I guess that is pretty obvious :slight_smile:


    #16

    Based on this awesome thread does someone want to put together a quick tutorial for integrating content generated via PHP or a quick howto for email forms made within Hype?


    (Markus Bjerre) #17

    Hi Daniel! As soon as I get this working correctly I will post a tutorial on how I solved it.
    The problem right now is that I need to collect the data from the text input inside hype and change the addAddress in my send-email.php to the email that has been typed inside the text input. I have no idea how to do this :confused:

    UPDATE::: I fixed it! Borrowed some of Andrews code and implemented it in the new php file that I created. Thanks for all the awesome help! Will get back this weekend/next week and make a tutorial for anyone else who’s having trouble getting it up and running!


    (Nick ) #18

    All:

    I created a Hype site that uses php to generate a QR code using the public QR code library from Denso Wave technology.
    I use an HTML iframe that displays my php code.
    Take a look.

    http://gressle.com/QRCode.html


    Php enabled Hype QR code creation site
    (Markus Bjerre) #19

    Awesome Nick! Great job! A little note: Add a placeholder text in your input instead so the user don’t have to remove the text before typing :smile:


    (Nick ) #20

    Thanks for that. I put the “Your Data or URL” in the form field as the prompt.
    Several of my testers asked for it to be put in the field :wink:

    But I agree with you I want to remove it in a future update.