onsdag 17. mai 2017

Simple LTI service made with PHP

I used the steps below to create a simple LTI service that embeds a H5P.org interactive video. I based it on 

In a shell on a PHP web server: 

git clone https://github.com/Harvard-ATG/workshop-lti-basic.git

Example:
php55-shell:~/lti> git clone https://github.com/Harvard-ATG/workshop-lti-basic.git
Cloning into 'workshop-lti-basic'...
remote: Counting objects: 2336, done.
remote: Total 2336 (delta 0), reused 0 (delta 0), pack-reused 2336
Receiving objects: 100% (2336/2336), 65.25 MiB | 966 KiB/s, done.
Resolving deltas: 100% (361/361), done.
Checking out files: 100% (1953/1953), done.
php55-shell:~/lti> ls
workshop-lti-basic
php55-shell:~/lti> cd workshop-lti-basic/
php55-shell:~/lti/workshop-lti-basic> ls
LICENSE  README.md  demo  presentation
php55-shell:~/lti/workshop-lti-basic> ls demo
Vagrantfile  html  puphpet
php55-shell:~/lti/workshop-lti-basic> cd demo
php55-shell:~/lti/workshop-lti-basic/demo> ls html
css  images  ims-blti  index.html  info.php  lms.php  misc.php tool-helloworld.php

Edit tool-helloworld.php

I edited the file tool-helloworld.php such that it became:

error_reporting(E_ALL & ~E_NOTICE);
ini_set("display_errors", 1);
require_once 'ims-blti/blti.php';
$lti = new BLTI("secret", false, false);
session_start();
    if ($lti->valid) {
        $return_url_1 = $_POST['launch_presentation_return_url'];
        $return_url_2 = $return_url_1 . "?return_type=iframe&url=https%3A%2F%2Fh5p.org%2Fh5p%2Fembed%2F617&width=1090&height=674";
        header("Location: ". $return_url_2);
    } 
    else 
    {
    header('Content-Type: text/html; charset=utf-8');  

     $stuff = <<
This was not a valid LTI launch

    Error message: $lti->message
 
EOT;
      echo $stuff;
    }
?>

Note the code I have put in bold. If you look at https://canvas.instructure.com/doc/api/file.editor_button_tools.html this is the code to use when we want to return an iframe. In my case I return the iframe you get when you click on the embed link on https://h5p.org/interactive-video.

Create tool-helloworld.xml configuration file

I went to https://www.edu-apps.org/build_xml.html and filled in the fields as displayed below. I obtained the parameters by accessing the php file installed above, in my case:


I found a 16x16 icon on this site:





I copied the output from the "Generate XML" button to a new tool-helloworld.xml file residing in the same directory as the .php file:

php55-shell:~/lti/workshop-lti-basic/demo/html> ls
css  images  ims-blti  index.html  info.php  lms.php  misc.php tool-helloworld.php  tool-helloworld.xml

    xmlns:blti = "http://www.imsglobal.org/xsd/imsbasiclti_v1p0"
    xmlns:lticm ="http://www.imsglobal.org/xsd/imslticm_v1p0"
    xmlns:lticp ="http://www.imsglobal.org/xsd/imslticp_v1p0"
    xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation = "http://www.imsglobal.org/xsd/imslticc_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticc_v1p0.xsd
    http://www.imsglobal.org/xsd/imsbasiclti_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imsbasiclti_v1p0.xsd
    http://www.imsglobal.org/xsd/imslticm_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticm_v1p0.xsd
    http://www.imsglobal.org/xsd/imslticp_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticp_v1p0.xsd">
    Erlend1
    First LTI example
    https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Play-music.png
    https://www-erlendthune-com.secure.domeneshop.no/lti/workshop-lti-basic/demo/html/tool-helloworld.php
   
      com.erlendthune.erlend1
      anonymous
      www-erlendthune-com.secure.domeneshop.no
     
        https://www-erlendthune-com.secure.domeneshop.no/lti/workshop-lti-basic/demo/html/tool-helloworld.php
        https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Play-music.png
        Erlend1
        500
        500
        true
     

   
   
   



Configure Canvas

In a course, select settings, apps, +app

Select to create the app from URL, specify a name, and use the key and secret you get from the same php file as in the previous step, in my case:


Use the link to the xml file you created in the previous step as configuration file:


When you submit the app, it will appear in the list like this:

Create content

Select to edit a page, notice that the icon you chose for your app now appear as a choice in the menu line:
When you press this icon, a dialog box will appear for a short while, and then your editor will receive the iframe we chose to return in the php script. Saving the page will make it appear like this:

Next steps

What I really want to do is to present a list of H5P content available from our H5P server. To do that however, I would need some way of presenting a list of the content in the dialog box. Then, when the user selects some content and press a submit button, that's when the redirect PHP code should be executed.