Creating custom URLs for online classes

hazel1919 · January 5, 2016

Background

I am relatively proficient in HTML/CSS and the Joomla! Content Management System. Until yesterday I am ashamed to say I had tried my best to avoid learning any PHP code. That being said, I am currently going through the introductory course on PHP with Codecademy in the hope that that will shed some light on my next step...

What I am trying to do...

Integrate an online classroom on our website for our teachers and students to use on a one to one basis (a single teacher to be paired up with a single student).

I am using classroom software from a company called Groupworld (here is their API documentation: https://www.groupworld.net/api.shtml).

Our Groupworld subscription allows for up to 10 simultaneous users, so for us that would be 5 teachers and 5 students at any one time.

Their instructions are to configure the classroom as you want to display it and then go into the source code and simply copy the HTML onto your own hosting server.

We have copied the classroom code to five different folders (one classroom per teacher) each under a master folder called classrooms. So the folder structure looks like this...

classrooms

----room-1

--------index.html

----room-2

--------index.html

----room-3

--------index.html

etc...

Here is the classroom sourcecode for each of those pages...

<!DOCTYPE html>
<html>
<head>
<title>Groupworld HTML5 Conference Room</title>

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/bkpfcahabbgcjikdomdcamdlcipolkcf">
<link rel="stylesheet" href="//www.groupworld.net/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="//www.groupworld.net/js/dialog.css">
<script type="text/javascript" src="//www.groupworld.net/js/aes-enc.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/aes-dec.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/aes-test.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/sha1.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/newbase64.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/dialog.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/tunnel.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/gsm610.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/groupworld.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/deskshare.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/polls.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/jscolor/jscolor.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/new_conference.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/new_whiteboard.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/new_videostrip.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/chat.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/jspdf.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/jspdf.plugin.addimage.min.js"></script>
<script type="text/javascript" src="//www.groupworld.net/js/FileSaver.min.js"></script>
<script type="text/javascript">
function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(';');
    for (i=0;i<ARRcookies.length;i++)
    {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf('='));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf('=')+1);
        x=x.replace(/^\s+|\\s+$/g,'');
        if (x==c_name)
        {
            return unescape(y);
        }
    }
}
function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? '' : '; expires='+exdate.toUTCString());
    document.cookie=c_name + '=' + c_value + ';path=/';
}

var agt=navigator.userAgent.toLowerCase();
var is_ipad = (agt.indexOf('ipad') != -1);
var is_android = ((agt.indexOf('ventana') != -1) || (agt.indexOf('android') != -1));

var app_url = 'groupworld://www.groupworld.net?instance=room_1&object=new_conference&installation_id=1630';
if (is_ipad || is_android)
{
    var appstore_url = 'http://itunes.apple.com/us/app/groupworld/id474262955?ls=1&mt=8';
    if (is_android)
    {
        appstore_url = 'https://market.android.com/details?id=com.grouptechnologies.groupworld';
    }
    var has_app = getCookie('has_groupworld_app');
    var msg = 'In order to connect to Groupworld you must use';
    if (is_android)
    {
        msg = 'For the best experience, we recommend that you use';
    }
    if (has_app)
    {
        if (confirm(msg+' the Groupworld App. Launch the Groupworld App Now?'))
        {
            window.location = app_url;
        }
    }
    else
    {
        if (confirm(msg+' the Groupworld App. Install the Groupworld App Now?'))
        {
            setCookie('has_groupworld_app', 'true', 20000);
            window.location = appstore_url;
        }
    }
}

if ('1630' == '')
{
    document.write("inst_id parameter missing. Please check the url.");
}
if ('1630' == '1049')
{
    window.location = 'https://www.groupworld.net/mp/parse.cgi?filename=compmathtutor_js.html&instance=room_1&width=100%&height=100%&show_room_name=&show_timer=true&inst_id=1630&username=&password=';
}

function start()
{
    // Optional username and password. If not specified here, a popup dialog
    // box will appear.
    var username = '';
    var password = '';

    // The Groupworld server to connect to. You can optionally specify the
    // port number (using the format "server:port").
    var base = 'www.groupworld.net:9175:1630';

    // The object to load and instance name. To create a different "session",
    // just copy the html page and change the instance name.
    var object = 'new_conference:room_1';

    // Flags: not currently used.
    var flags = 0;
    groupworld.startup(username, password, base, object, flags);
}

</script>
<style>
/* Bug in Chrome: if you draw on the whiteboard and move off the top,
   Chrome will select a bunch of stuff which will then be dragged the next
   time you click on the whiteboard. To fix, we just turn off selection for
   all elements. */
* { 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
} 

/* Setting webkit-user-select to none screws up inputs on Safari.
 */
input {
    -webkit-user-select: auto;
}

/* For IE we need to disable touch behaviours (pan/zoom) on the canvas elements,
   so that the events are sent to the application instead. */
canvas {
    touch-action: none;
}

body { padding: 0; margin: 0; }
p { padding-left: 8px; }
</style>
</head>
<body 
onLoad="REDIPS.dialog.init(); start();">
<script src="//www.groupworld.net/js/strings.js"></script>
<script type="text/javascript">

var start_time;
function timer()
{
    if (null == start_time)
    {
        return;
    }
    var cur_time = new Date();
    var time_diff = (cur_time.getTime() - start_time.getTime())/1000;
    var hours = parseInt(time_diff/3600);
    var mins = parseInt((time_diff-hours*3600)/60);
    var secs = parseInt(time_diff - hours*3600 - mins*60);
    var t = document.getElementById("t");
    t.innerHTML = hours+":"+mins+":"+secs;
    setTimeout("timer();", 1000);
}

</script>

<h1>Time: <span id="t">0:0:0</span><script type="text/javascript">start_time = new Date(); setTimeout("timer();", 1000);</script></h1>
<table border=0 cellspacing=0 width="100%" height="100%">

<tr><td>

<script type="text/javascript">
// Generate the actual Groupworld object. Parameters: width and height of
// object

groupworld.htmlgen('100%','100%');

</script>
</td></tr>
</table>

</body>
</html>

The problem...s

As it stands ANYONE off the street can enter ANY of the rooms so long as they have the link to that room. Not good!

So as an example... if a teacher is teaching a student in "room-1" and a previous student decides to log-in using the same "room-1" link then we have a problem.

We need our classroom url to be uniquely generated each time a "teacher" logs in.

Now the url for each classroom is generated as follows:

https://www.groupworld.net/mp/parse.cgi?filename=ncjs&show_timer=true&hide_playback=true&hide_help=true&inst_id=1630&instance=room-1&width=100%&height=100%

The interesting part is that the &instance=room_1 can be changed to any string and the Groupworld software will then create a new classroom on the fly!

The problem now is that I do not want my teachers to have to manually change the &instance="xxxx" and then somehow copy the new url, this will not work.

My closest guess as to how we can do this is as follows, apologies if this is as clear as mud, I simply do not know where to begin coding this!

----

When you enter the classroom called room-1...

1 - A popup appears that asks for a username (this is already coded into the system)

2 - If you enter the correct teacher name then... (this is already coded into the system)

2,a - another popup appears to name the class as $className

2,b - else you cant access the class (this is already coded into the system)

3 – In the class name you name the class e.g. "bobs-class" (no breaking spaces allowed)

4 – Now we want the string "bobs-class" to be added to the Instance ID so that the url instance is now

5 – &instance=room-1-bobs-class

6 – Once the class name is entered then another popup appears that says "share this link" from which the teacher can copy the private link to give to the student.

----

I can't think of another way to do this, I was assured by the people at Groupworld that this would be easily done and only require a few lines of code... however I am almost ready to have a nervouse breakdown!

Thanks in advance for your kind help (or just reading thus far!), I'm heading back to learn more PHP...

Jethro.

Edited January 5, 2016 by hazel1919

hazel1919 · January 5, 2016

And just incase it might help.. this is the response I got from the people at groupworld when I asked them about this...

You can easily do this on your own website. You basically just have some
php/mysql (or whatever) code to check which room the user should be in,
and then direct the user to the Groupworld html page. This is what most
of our enterprise customers do (e.g. mytutorweb.co.uk). You can also do
it with the hosted version.

David

> Hi there,
>
> We are very interested in your virtual classroom software.
>
> At the moment we have created HTML Iframe classrooms with separate IDs
> inside folders on our hosting account. The folders are structured as
> follows...
>
> *mysite index*
>
> *classrooms *
>
> * room-1*
>
> * room-2*
>
> * room-3*
>
>
> So for example classroom 1 can be accessed by anyone simply by going to
> http://www.mysite.com/classrooms/room-1
>
> Then all that person has to do is enter a screen name and they are in the
> classroom.
>
> *We are wondering if there is a way to only invite one user and one teacher
> into the classroom at a time*.
>
> We want our teachers to be able to create a classroom and then simply
> invite a student by linking to the classroom via email.
>
> We want to restrict students to only be able to access the classroom that
> is linked to in their invitation email. After the class is over that link
> would then be redundant...
>
> Is it possible to set this up?
>
>
> Thanks in advance,

mac_gyver · January 5, 2016

each page request must actively enforce access security for the page. the "classroom sourcecode" would only be output, using php code, to a visitor if that visitor is logged in and has permission to access one instance of that content. you would only have one 'classroom' .php page.

you would need a database table that holds the students that have been assigned to an instance of a classroom. for historical data reasons, you should keep any past records in the table and have a 'status' column that you can use to mark records with an 'active' status. if the limit is 5 students, you would need to insure that there are only 5 students listed as being active at one time.

if it is the teacher(s) that assign a student to a classroom, a logged in teacher would need a way of picking from all the unassigned students and if there is an available instance of a classroom, can add a record to the database table with an active status, with the selected student's id. the table would also have a column with the teacher's id, used both to list the teacher and to limit who 'owns' the record and can alter the status column.

one would assume that the same teacher (or an administrator) would have permission to remove a student from a classroom, by changing the status from active to some other value. this would free up one of the available classrooms.

if a student is logged in and has a record in the database table with his id and an active status, when he visits the one single .php 'classroom' page, he will be able to view the content. any one who isn't logged in or doesn't have a record with an active status, would not be able to view the content. you would either just output a message or redirect them somewhere else.

Edited January 5, 2016 by mac_gyver

hazel1919 · January 22, 2016

Hi there mac_gyver, thanks for your considered reply...

the "classroom sourcecode" would only be output, using php code, to a visitor if that visitor is logged in and has permission to access one instance of that content. you would only have one 'classroom' .php page.

That means I would have to have a database of every student and also a way of managing/adding/removing them. This is too complex at this stage. I would rather have no student accounts, just a teacher account.

I just want to create a random URL link when the teacher logs into the room so that only the teacher can share that link with the student... someone suggested using the md5(time()) function to generate a random URL instance so for example...

site.com/classes/room_1?instance=wskcub6729sjcd9f0so3

Trouble is I don't know how to implement the function...

Do I need to change my index.html to index.php and then add the php to the top?

QuickOldCar · January 23, 2016

I also agree with mac_gyver, it's best to control the users who can access it.

Your idea would allow students to share the link or someone could even possibly run a script or guess it.

Yes need the file extensions as .php to parse php code or the server set up so .html can parse it as well.

Url structures such as this would work

site.com/classes/room/?instance=wskcub6729sjcd9f0so3

site.com/classes/room/index.php?instance=wskcub6729sjcd9f0so3

site.com/classes/room.php?instance=wskcub6729sjcd9f0so3

Even your method said should have a script with a form where teachers can create and delete the new rooms and stored in a database

Something as simple as md5 of the time not that great, add a salt/word at minimum or some other value before md5 creation to make them harder to guess.

hazel1919 · January 24, 2016

I also agree with mac_gyver, it's best to control the users who can access it.

Your idea would allow students to share the link or someone could even possibly run a script or guess it.

Yes need the file extensions as .php to parse php code or the server set up so .html can parse it as well.

Url structures such as this would work

site.com/classes/room/?instance=wskcub6729sjcd9f0so3

site.com/classes/room/index.php?instance=wskcub6729sjcd9f0so3

site.com/classes/room.php?instance=wskcub6729sjcd9f0so3

Even your method said should have a script with a form where teachers can create and delete the new rooms and stored in a database

Something as simple as md5 of the time not that great, add a salt/word at minimum or some other value before md5 creation to make them harder to guess.

Great! I wish I could fully express my gratitude Re: how helpful this is...

I have drawn a simple pic of how I would like the user flow to work.

I don't mind if the student shares his course link, the student agrees to the terms and conditions before receiving his classes so that would be considered a misconduct on the part of the student and would be dealt with... as for running scripts this should be a matter of making the md5 hash more secure?

I would of course need to password protect the classroom creation page and also create a database of teachers who can create classes.

That way when a teacher logs into the classroom with his credentials a unique URL and classroom instance is generated and the teacher is redirected to that unique URL and classroom instance. He can then share that unique link with his student via email and they can go ahead with the class.

The problem I am having is that I need to generate the unique instance on my site using PHP... e.g.

http://www.mysite.com/classes/room-1.php?instance=1i2un3lnj12xas

But I also need to somehow tell the classroom providers (Groupworld) that I am instantiating a new instance of the classroom.

The classroom providers (Groupworld) don't tell me much on their API page so I am a bit stuck: https://www.groupworld.net/api.shtml

Instance: The Groupworld room to use. Each room can have a separate group of users connected. Rooms are automatically created on-the-fly as soon as anyone connects to that room.REQUIRED

So how do I get my server talking to their server?

QuickOldCar · January 25, 2016

Don't you now do specific rooms or do you have to create each room from the groupworld panel and then copy an html embed code for it?

Let's say at groupworld you do have to create them in a panel first, then make yourself 10 rooms as they allow... 1-10

Now your urls can look like this

site.com/classes/room/?number=3&instance=wskcub6729sjcd9f0so3

Use the $_GET['instance'] value and compare it the same as the code created by a teacher and see if allowed.

If allowed use your $_GET['number'] value and echo it inside the groupworld chat embed code.

If not allowed do not embed the chat and give a message.

We aren't really here to help with 3rd party code, if they won't help you will need to hire someone that will know how to code this for you.

hazel1919 · January 26, 2016

Phew! I didn't realise going into this how addictive and fun coding could be... can't believe I have muddled along for so long just using HTML/CSS when there was the wider world of PHP to explore!

Before continuing I want to make clear that I would never expect you or this community to do my dirty work, or what a paid developer would do and the help I have gotten thus far has has been more than I expected and very helpful.

The key is in the classroom embed code here...

// The object to load and instance name. To create a different "session",

// just copy the html page and change the instance name.

var object = 'new_conference:jethro';

So I need to change the 'var object' in the Javascript from 'jethro' (which is what I named the classroom) to a random string each time a teacher creates a classroom. That random string should be held in a PHP variable which I'll call '$instance'...

I think that is what you mean by the following:

"If allowed use your $_GET['number'] value and echo it inside the groupworld chat embed code."

So I have created an index.php login page with a temporary database. Here is the link on the live site: http://toucan-talk.com/classes

The temporary database has the following credentials

username: jethro
password: password

Here is the index.php code with comments by me...

<?php 
session_start();

if ($_POST['username']) {
	
        // Temporary database
	$dbUsname = "jethro";
	$dbPaswd = "password";
	$uid = "1";
	
	$usname = strip_tags($_POST['username']);
	$paswd = strip_tags($_POST['password']);
	
	if ($usname == $dbUsname && $paswd == $dbPaswd) {
		// Set session variables
		$_SESSION['username'] = $usname;
		$_SESSION['id'] = $uid;
		// To generate the random string from a word
		$str = "Hello"; // word to hash
		$instance = md5($str); // hash stored in variable
		header('Location: classroom.php?instance='.$instance);// Hash is concatenated onto the login redirect page
	} else {
		echo "<p>Oops! That username or password combination is incorrect. Please try again.</p>";
	}
}

?>



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Toucan-Talk Tutor Login</title>
</head>

<body>
	<div id="wrapper">
		<center>
			<img style="width: 250px;" alt="" src="http://www.toucan-talk.com/images/logos/footer-logo.png">
		</center>
		<h1>Enter Classroom</h1>
		<form id="form" action="index.php" method="post" enctype="multipart/form-data">
		Username: <input type="text" name="username"/><br>
		Password: <input type="password" name="password" /><br>
		<br>
		<center>
			<input class="button" type="submit" value="Enter" name="Submit" />
		</center>
		</form>
</body>
</html>

So I have concatenated that md5 hash onto the header page redirect so that I now get a url that looks like this: http://toucan-talk.com/classes/classroom.php?instance=8b1a9953c4611296a827abf8c47804d7

I have made another file called classroom.php which the header redirects to. Inside there I have the classroom embed code. Here is just the PHP inside that file

<?php 
session_start();

// Variable with the md5() hash code
$instance =  $_GET['instance']; 

if (isset($_SESSION['id'])) {
	$uid = $_SESSION['id'];
	$usname = "Test variables: <br> Username: ".$usname. "<br> Id: ".$uid;
} else {
	echo 'Please login';
	die();
}

?>

As you can see I have defined the variable '$instance' again as $instance = $_GET['instance']; (I am not quite sure what this does still but it doesn't work without it!)

So I know $_GET['instance'] = $instance = 8b1a9953c4611296a827abf8c47804d7

Now I simply replace the Javascript 'var object' with the variable $instance in PHP tags to generate the classroom on the fly on the Groupworlds servers!

// The object to load and instance name. To create a different "session",
// just copy the html page and change the instance name.
var object = 'new_conference:<?php echo $instance ?>';

Now when I look at the classroom sourcecode the instance is the md5() hash!

This seems to do the trick and a link generated by a teacher on my site, which looks like this...

http://toucan-talk.com/classes/classroom.php?instance=8b1a9953c4611296a827abf8c47804d7

Is the same as that hash instance generated on the groupworld servers...

https://www.groupworld.net/mp/parse.cgi?filename=ncjs&inst_id=1639&instance=8b1a9953c4611296a827abf8c47804d7&width=100%&height=100%

And in fact both of those links lead to the SAME classroom.

Does this seem like a reasonable way to solve this coding problem? I am excited to improve upon this to get something workable.

Many thanks for you guys help this far!

Jethro.

Edited January 26, 2016 by hazel1919

QuickOldCar · January 27, 2016

Happy to see you got something to work.

Consider the users login and rights for future though, be much better.

Sign In

Creating custom URLs for online classes

Recommended Posts

hazel1919

Link to comment

Share on other sites

hazel1919

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

hazel1919

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

hazel1919

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

hazel1919

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information