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 

http://blogs.harvard.edu/acts/2014/07/11/basic-lti-workshop-using-php/2/

https://community.canvaslms.com/groups/canvas-developers/blog/2016/09/13/net-lti-project-part-1

https://www.edu-apps.org/build_xml.html

https://canvas.instructure.com/doc/api/file.editor_button_tools.html

https://h5p.org/interactive-video

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:

https://www-erlendthune-com.secure.domeneshop.no/lti/workshop-lti-basic/demo/html/lms.php

I found a 16x16 icon on this site:

https://www.iconfinder.com/icons/132768/new_icon#size=16

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:

https://www-erlendthune-com.secure.domeneshop.no/lti/workshop-lti-basic/demo/html/lms.php

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.