Welcome Developers!

in

Welcome!

in

How to post to your external web space from the profile or home surface. (For starters)

Last post 08-20-2009 2:24 AM by Deepika. 7 replies.
Page 1 of 1 (8 items)
Sort Posts: Previous Next
  • 10-01-2008 4:40 PM

    • David
    • Not Ranked
    • Joined on 09-18-2008
    • Posts 2

    How to post to your external web space from the profile or home surface. (For starters)

    Hi, I was reading the forums and information websites about myspace developing this week. As a staring developer you have need on easy to understand information and tutorials.

    I noticed lots of starting developers have problems with posting forms to external applications. This is why I decided to make a step by step, and well explained tutorial about this subject. The application described here, will handle the posting from the profile or the home surface. But the forms are made and handled from the external PHP on your domain. English is not my native tong so excuse me for my bad English! I walk you thru the source code step by step explaining every part in dept.

    Creating the application

    You are reading this tutorial, so recon you already have a developers account with MySpace, and you already know how to create your application! This information you can find on so many places, so it's out of scope of this tutorial.

    The only thing you need for this tutorial, you find on the “Edit App information” tab of your application. Look for “OAuth Settings”, make a copy of both your customer key and customer secret, you will need those later in the PHP script.

    OK now its time to make our hands dirty!

    The script on myspace

    The code we describe here is the script you will use on the myspace developers page of the application. I wrote it for the home surface, but it's tested on all the surfaces provided. The code I use here is a how to, so all the rest is not really important and clean!

     

    <div id="AppBody" ></div>

    <script type="text/javascript">

     

    All code on the myspace developer’s page is HTML, so we need to do some HTML work like you know. The div I create here, is to provide my script with a way to write the output to. I will make a write function to write my HTML in it, so it will show. The next thing I do, is opening the script. In fact this is the only HTML I do on the developers page!

     

    // Global variables needed for the application

    var url="http://yoursomain/tutorial.php";

     

    When I do a javascript I mostly start with my global variables. It is good practice because that way they are easy to find. Here I only need 1, the url to the external php script.

     

    function init()

    {

    var params = {};

    params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;

    params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;

    gadgets.io.makeRequest(url, response, params);

    }

     

    The init function is used to do the first request to the external application. This time we don’t need to post anything to the site, we only need the initial HTML to start with.

    The first we do in our function, is making a object variable for our parameters, I named it params. This time we only need the method we use, what is the POST method. We also need to sign our request! One thing I noticed reading the forums, was the fact most people get into a 401 error, and this is the reason why. So the next we set in our parameters is the AuthorisationType, and we choose signed.

    The last we do in the init routine is making the request. And we use the global url variable for the address. The name of our response function, what I called response and last but not least the parameters we just made.

     

    function WriteBody(html)

    {

    document.getElementById("AppBody").innerHTML = html;

    }

     

    This is an ugly function I use to write the result to the div. I don’t go into this function, when you don’t understand it, a good book about javascript will do wonders.

    The next function is more complex, but also very easy to understand.

     

    function doMRPost()

    {

    var params = {};

    var postdata = {};

    for(a=0; a<document.ApForm.elements.length; a++)

    {

    postdata[document.ApFormAngel.name] = document.ApFormAngel.value;

    }

     

    params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;

    params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postdata);

    params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;

    gadgets.io.makeRequest(url, response, params);

    }

     

    This is the function we will use to do the posting of a form. In my application I use a constant name for all my forms "ApForm", so I did build my doMRPost function especially for this technique. First we make 2 object variables. The first is just like in the init function and is used for the parameters. The next one we use to collect the POST data.

    We don’t know what fields we have to post from our form, this is different for every form. Because of this we need to collect the fieldnames and values to use them in the postdata. This we do in the for loop!

    We use document.ApForm.elements.length to get the amount of fields in the form. While we run throe the fields, we make an entry with the fieldname in our postdata variable, and we give it the value of the corresponding field.

    After the for loop we set the parameters for the request, but this time we also add a parameter for the posted data. Don’t forget to sign your request like in the init function! After all of this work we make the request.

     

    function response(mrResponse) {

    WriteBody(mrResponse.text);

    }

     

    init();

     

    Here you see the function we already used 2 times. It’s also a very easy one, it only writes the information to the div we created for our application output.

    After this function we make a call to the init function to start the application. All we need to do now is close the script.

     

    </script>

     

    The PHP script

    Now that we have our application in place at myspace, we only need to make the script we want to use. Here is a easy example, I made up for the tutorial. It is something really simple and useless. All it will do is show a picture of the owner, and place a Title and text.  You post title and text from the form. When it starts the title and text are empty.

    Before you start coding, download the PHP myspace library and install it on your website. The myspace classes use HTTP_Request, so make sure it is installed on your hosting. If it is not installed, now is the time to do it! When you don’t have that access, ask the system administrator. After this is done, we can start the programming.

     

    <?php

    require_once('myspace/MySpaceAPI.php');

     

    At the start we use the require_once function to let our script know we will use the MySpaceAPI library.

     

    $key = 'http://www.myspace.com/yourApiNumber';

    $secret = 'your secred';

    $myspace = new MySpaceAPI($key,$secret);

     

    Next we make a few variables, we will use these as constants in the program. At the start of the tutorial I told you where to get your key and secret. This is the place to use them. The last line is where we make an occurrence of the MySpaceAPI class.

     

    $owner = $_GET["opensocial_owner_id"];

    $result = $myspace->get_user($owner);

    $html = "<img src='".$result["largeimageuri"]."' width='200 px'><br>";

    $html .= "<h1>".$_POST["titel"]."</h1><br>";

    $html .= $_POST["text"]."<br><br>";

    Like told I want a picture of the owner on the application. To do this we first load a variable $owner with the owner ID. This variable we use to get the user from the myspace class and put it in result. The get_user method returns a array with all the information we need. This array we load in our result variable.

    After this I start building the HTML. I use the $html variable to do this. You see how I put the picture in the variable, and the last 2 lines add the title and text we take from the $_POST global variable. The first time there is nothing posted so that time it stays empty.

    Now we need to add the form to the $html variable.

     

    $html .= "<form name='ApForm'>";

    $html .= "The title <input id='text' type='text' name='titel' /><br>";

    $html .= "text <input id='text' type='text' name='text' /><br>";

    $html .= "<input class='But' type='button' name='but' value='Submit' onclick='doMRPost();' />";

    $html .= "</form>";

    echo($html);

    ?>

    We all know HTML, so it is easy to follow this part of the script. Just notice we set the name of the form to ApForm, this is also what we use in our post routine at the MySpace developers page. Also notice we use a name for all our fields, we need that to fill the postdata in the script at MySpace.

    Take a close look at the button we make. Specially the onclick is important, like you can see it calls to the function we made for posting on the MySpace developers page!

    At the end we use echo to send the $html variable to the script. That's is all we need to do. It is an easy to use technique, you can use it for all your needs. I really hope this tutorial will help all the starting application developers.

    David

  • 11-28-2008 8:24 PM In reply to

    Re: How to post to your external web space from the profile or home surface. (For starters)


  • 12-08-2008 10:30 AM In reply to

    Re: How to post to your external web space from the profile or home surface. (For starters)

     I cant thank you better, thanks for this little tutorial it works perfectly for me, i spent days trying to find something that does exactly this but all in vain.

    THANK YOU!!!!!!!!

  • 12-12-2008 3:14 PM In reply to

    Re: How to post to your external web space from the profile or home surface. (For starters)

    Now its stopped getting the user id and i dont know whySad

    The code below doesnt echo user id anymore. It did before. Anyone having similar problem?

     

      require_once('/usr/myusrname/php/myspace/MySpaceAPI.php');
      $key = 'YOURKEY';
      $secret = 'YOURSECRET';
      $myspace = new MySpaceAPI($key,$secret);

    //THIS GETS THE ID OF THE VIEWER  

      $user = $_GET["opensocial_viewer_id"];

  • 01-29-2009 3:18 AM In reply to

    Re: How to post to your external web space from the profile or home surface. (For starters)

    Hi,

        Thanks for the explanation of the code. Could u please help me .I am getting a error that the following javascript code does not exists

                            doMRPost();

    I hav the above function on the home surface of my application 

     

    Filed under:
  • 03-16-2009 6:17 PM In reply to

    • Nate
    • Not Ranked
    • Joined on 09-21-2008
    • Posts 11

    Re: How to post to your external web space from the profile or home surface. (For starters)

     Firstly, I want to say Thankyou! There needs to be more people like you on myspace.

     

    But also, this example works great in Internet Explorer, but does not seem to be working in Mozilla Firefox.

    Has anyone else experienced this?

  • 03-22-2009 11:57 AM In reply to

    • Nate
    • Not Ranked
    • Joined on 09-21-2008
    • Posts 11

    Re: How to post to your external web space from the profile or home surface. (For starters)

     If somebodu would reply, that would just be great. Also, ivenoticed that gadgets.io.makeRequest() sometimes fails to make the request at all and sends 'null' to the response() method.

    Filed under: ,
  • 08-20-2009 2:24 AM In reply to

    Re: How to post to your external web space from the profile or home surface. (For starters)

     ur explanation verygood and useful for beginners.

    But wat about who is doesn't use php.

    pls reply me for this 

Page 1 of 1 (8 items)