Zenoir Online Classroom

Zenoir Online Classroom is a personal project by yours truly. It’s actually just a modern version of the Manhattan Virtual Classroom with some additional features. Some of the useful features like the visual indication that a post is still not opened by the current user is still present. Unread post are indicated by a red star at the end of the title of a message and once its opened the star goes off.

image

 

User

Users can edit information such as the photo that they will use for their account and password.

image

 

Groups

Groups can also be created by any user. Groups can be used for grouping people in a specific class. Groups can be created by the teacher or the student and only the creator of the group can add or remove members from the group. This is similar to the groupings created by the teacher in a real-world classroom.

image

image

 

Dashboard

The dashboard is the landing page of the students and the teachers whenever they log in with their accounts. Classes in which the student or teacher belongs are all listed in this page. Unread post from every class, notifications, people, and the previous classes attended to are also listed. Previous classes can be accessed as long as it wasn’t explicitly locked by the teacher.

image

 

Messages

The messages module is where the users can send private messages to one or more users who also belong to the classroom where the user is currently logged in. image

Users can also reply to a specific message where they have the option to attach files.

image

There is also a conversation history feature. This allows for viewing the past messages that has been sent as a reply to an original message. Entries that are listed here are ordered by the date and time it was sent, the recent messages are on the top portion. If the original message is a group message all the replies of the people who received the message can also be seen by other people in the conversation history.

image

Original messages are created using the create new message link. The main difference between an original message and a reply message is that the original message can be sent to many people while reply messages can only be sent to a single person.

image

 

Quizzes

There is also a quizzes module that allows the teacher to create quizzes such as the one below. The scores of the students in a particular quiz is stored in the database so that the teacher can view it at a later time to monitor the performance of students.

image

 

Handouts

Handouts can also be created by the teacher to give the students reading materials in e-format such as pdf files and word files. The attached files can be downloaded by the students. It can also be viewed as long as the browser that is used by the student supports viewing of that specific kind of file.

image

 

Assignments

Assignments can also be created by the teacher. In the screenshot below a student is trying to reply to an assignment. The body of the assignment reply is automatically filled up with the body of the assignment that is selected by the student, this eliminates the need to open another browser window or tab to see the contents of the assignment. The student can just delete it later once the reply to that particular assignment has been written.

image

Replies to a particular assignment can also be viewed by the teacher.

image

 

Sessions

Sessions can also be created by both students and teachers. There are 3 kinds of sessions one is the class session which can only be created by the teacher. In a class session all the students in the class are automatically a part of the session which means that every student in the class can enter the session as long as it is still valid. Another kind of session is the masked session which is similar to the class session as all students in the class are automatically members, the only difference is that there is a choice for the session members to use an alias. The alias is used to conceal the identity of the student. This feature is useful for the students to share their thoughts on something without revealing their identity. The third kind of session is the team session where a student can choose who will join the session. Session members can either be composed of a single group or multiple groups to which the student belongs. 

image

Here is what a masked session looks like as I have mentioned earlier the members of this session can actually choose an alias to use. A session is really just a traditional chat box where the students and teachers can discuss about things related to their class. I used Node.js and Socket.io to ensure optimum performance.

image

 

Class Settings

There’s also a separate module where the teacher can enable or disable specific modules in the class. Disabling a module will cause it to be inaccessible by both the teacher and the student. This feature is useful for the teacher to control which modules can be used by the students this also saves space in the database because modules that aren’t necessary to the class is disabled therefore the students cannot post anything which consumes space on the database.

image

Student accounts created by the administrator can also be invited by the teacher as long as they’re not already a member of the class. Only students which aren’t a member of the current class is listed.

image

Once invited there will be a new entry listed on the invites panel where the student has the option to accept it or leave it be. I’m also planning to have a decline button in there just in case the student was added by teacher by accident.

image

 

Existing students can also be removed from the class. This is useful in cases wherein the teacher accidentally invited a student into the class and the student also confirmed the invite even if he is not formally a member of the class.

image

 

Classroom data can also be exported by the teacher to other classes that he handles. At the time of writing of this post only students and handouts can be exported to another class. Some of the obvious limitations is that it’s only good for bulk export, the teacher cannot select what specific data to export to another class. And that only one export at a time is allowed.

image

 

Reports

There’s also a reports module which allows the teacher to view the student activity log. This module is still under development. I’m planning to add reports that will answer questions like: who are the students who aren’t submitting their assignments, who are the students who has not viewed their handouts, who are the students that always gets low on quizzes, who are the students who doesn’t participate in class sessions and other reports that might be useful to the teacher.

image

 

User Visibility

To ensure the visibility of a user to another user I’m also planning to add a feature wherein every user who is currently logged into the system can set if they are online or offline. This gives the user an option if he wants to declare that he’s currently using the system or not. Just like what has done by Facebook on their chat box.

 

Admin

Here is what the class looks like when an administrator is looking at it. There’s an additional module accessible to the administrator which allows him to change the settings in the class.

image

The administrator can access any classroom and view its contents. But it’s only for viewing. The administrator cannot be involved in any class activity like posting assignments and handouts. The administrator module is still under development so I’m still thinking of the possibility for the administrator to be an automatic member of every class that he creates.

The administrator is the only one who can create new classes so the teachers has to approach the administrator if they want to create a class. Every class has only one teacher. A class has also a start and lock date, once a class has reached its lock date a notification on the teachers dashboard will show up prompting the teacher to lock the classroom if the teacher wants the classroom to be continually accessible to the students then he can just ignore the notice. But once the teacher has chosen to lock the classroom it will no longer be accessible to both the teacher and the students. But the admin can still unlock it if the teacher requests for it.

image

 

Conclusion

As you can see Zenoir Online Classroom is still incomplete, there are still features which are not incorporated in the system and there are still some bugs because I haven’t done a thorough testing of it yet. If you want to contribute to this project feel free to visit it’s page on Github and either download, clone or fork it.

Zenoir Online Classroom

If you have any questions or suggestions regarding this project feel free to throw them in the comments! Thanks!

Twitter accounts every web developer should follow

Twitter is not just for following celebrities and sharing what’s on your mind. There are some very good use cases for Twitter and one of that is for following awesome people on the field of your interest. In this post I’m going to share a list of the people and entities that you should follow on twitter as a web developer.

 

Jeffrey Way

The editor of the popular web development blog Nettuts+. I wouldn’t give links to where you can find this awesome guy because everything is already in his site. That includes his youtube account, twitter, google plus, interviews, books, and tutorials.

 

Kevin Liew

Curator of queness web design and development blog.

 

Chris Coyier

Curator of css-tricks and host on Shoptalkshow a podcast on front end web design, development and UX.

 

Peter Cooper

The awesome guy behind JavaScript Weekly, HTML5 Weekly, Ruby Weekly, and Dart Weekly. Very very useful I hope he continues what he’s doing for free.

 

Rebecca Murphey

She has written a book on the fundamentals of jQuery. You can also follow her on GitHub or read her blog. And yes, yayQuery.

 

David Walsh

MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover. He usually post about HTML5, CSS3, and JavaScript. You can also read his blog.

 

Paul Andrew

The curator of Speckyboy Web Design blog. Most of his post are link to articles from the blog but he also post links to useful articles on web design.

 

Elijah Manor

Well-known on twitter for his awesome link sharing abilities. He posts very useful links on JavaScript, HTML5, CoffeeScript, ASP.Net and jQuery.

 

Echo JS

A social news site dedicated to JavaScript and related topics. You will mostly see JavaScript projects hosted on Github, Node.js, WebGL, HTML5, and links to some useful articles on JavaScript. Very useful if you’re into front-end web development.

 

Paul Irish

Not really very active on twitter but he usually post some useful updates or some talks on twitter. I suggest that you follow him on Github if you want to see some of the projects that he’s involved with.

 

JS Daily

JavaScript awesomeness delivered straight to your twitter feed daily.

 

Christian Heilmann

A perfect example of an account which doesn’t concentrate on only one stuff. His twitter can be compared to his diary. He occasionally post some awesome stuff on HTML5, JavaScript Performance. So if you only want useful stuff just go to his blog or visit hacks.mozilla.org.

 

Kendo UI

Kendo UI is a HTML5, jQuery-based framework for building modern HTML apps. But they also have a blog and a twitter account which makes it very interesting since they’re not only blogging about their product but also some useful JavaScript stuff. And while you’re at it why not try their framework, I assure that you would say that it’s awesome.

 

.Net Magazine

No this isn’t actually about Microsoft .Net magazine is the world’s best-selling magazine for web designers and developers not the framework from Microsoft.

 

Badass JavaScript

Occasional JavaScript goodness. You can also check out their blog.

 

Smashing Magazine

If I had to choose just one twitter account this is the one that I would follow. It’s almost like they have access to every awesome web development stuff on the internet and they post it on their twitter. In case you don’t know Smashing Magazine is actually a web development and design blog founded on 2006 they also have written a ton of books. I can’t imagine how much they’ve done for the web development community, just their blog alone contains an enormous amount of useful stuff.

 

Alessandro Maruccia

Regularly posts links on jQuery, JavaScript, responsive design. I also found some PHP, HTML5, and css stuff on his feed. Very useful.

 

John Resig

The creator of jQuery. He’s not really very active on twitter but you can follow him on GitHub if you want to see some action.

 

Remy Sharp

He’s claiming that he invented sleep patterns, I believe him because he’s awesome.  Yes you can follow him on twitter but you can find useful stuff on his personal blog and a collaboration blog that he created with Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson and Tom Leadbetter.

 

Conclusion

Knowing what the leaders in the web development industry are up to is very important. It will give you an idea on what you will be doing 2 or 5 years from now and some of the resources that they shared. If you know of any other people that web developers should follow don’t hesitate to share them on the comments.

Rendering files from MySQL Database into the browser

Howdy! I haven’t posted anything on this blog for more than 3 weeks now. I’m really sorry especially to those who are subscribed to this blog via email. I was just too busy with my projects and school that’s why I wasn’t able to post anything new.

Okay enough with my life story. Let’s proceed to the main topic. In this tutorial I’m going to show you how you can read files that are saved on the database and then render it into the browser.

I’m going to make this quick because I’m really super sleepy now.

 

Rendering Images

Rendering images is really simple, you just have to use the traditional image tags in html:

<img src="renderer.php?id=2"/>

But wait, why are we linking to a php file? Good question. Images, audio files, video files, documents are actually stored in the database in a gibberish form. Don’t believe me? Here’s a screenshot taken from Heidi Sql when opening a file that is saved on the database.

image

That is binary data, you cannot really make sense out of it unless you have a brain of a computer.

Okay so what does this renderer.php contain?

As you have seen a few seconds ago we supplied an id on the url and that’ what were going to use as a basis for what were going to fetch from the database. This is actually an approach for the naïve and lazy, I don’t recommend using $_GET and strings from the url as a basis for your database queries. It’s dangerous because people are getting smarter and smarter everyday there’s almost always a security hole on almost every application.

First include the database configuration, then assign the query to a variable called $id then perform the query for fetching the file in the database.

require_once('zenoir_config.php'); //database config $id = $_GET['id']; //don’t do this in real life, for example only $file = $db->get_row("SELECT * FROM tbl_files

WHERE file_id='$id'"); //fetch data

Now we got all the values that we need:

$filename = $file->filename;
$data = $file->file_data; //binary gibberish
$mime = get_mime_type($filename); //mime type of the file

The first two variables are self-explanatory we need the data and the filename. But what is this mime type thingy? If I am to describe it on my own, mime types are like instructions to the browser on what type of data it’s going to render. If the browser can’t render that specific data then the default action taken by the browser is to store it on the local machine or the computer of the user that is accessing the website. Here’s an extensive explanation from Wikipedia about mime types:

MIME

Here’s the code for getting the mime type of a specific file. I actually got this piece of code from someone at php.net in the comments section. Yep! comments section is really a gold mine.

function get_mime_type($filename, $mimePath = 'yeah'){ 
   $fileext = substr(strrchr($filename, '.'), 1); 
   if (empty($fileext)) return (false); 
   $regex = "/^([\w\+\-\.\/]+)\s+(\w+\s)*($fileext\s)/i"; 
   $lines = file("$mimePath/mime.types"); 
   foreach($lines as $line) { 
      if (substr($line, 0, 1) == '#') continue; // skip comments 
      $line = rtrim($line) . " "; 
      if (!preg_match($regex, $line, $matches)) continue; // no match to the extension 
      return ($matches[1]); 
   } 
   return (false); // no match at all 
} 

The function above uses a file called mime.types, which can be found on the following location if you’re on Wamp:

D:\wamp\bin\apache\Apache2.2.17\conf

But if you’re on Xampp it’s in:

C:\xampp\apache\conf

Never mind the Drive letters, its dependent on where you installed the Xampp or Wamp.

In the example I placed the mime.types file on the yeah folder:

image

Oh yes, I still haven’t told the story of this get_mime_types function. What it does is just to get the file extension of the file which is determined from the filename. This isn’t actually an accurate method of determining the true mime type of a file. What if someone naughty changed the extension of a php script to .jpg. The function will actually label the php script as an image and not a script which can do nasty stuff on the server. A good practice for this is when you plan to upload files on the file system of the server be sure to upload the files on a non-web accessible folder so that the naughty guys will not be able to execute it. 

After determining the mime type all you have to do now is to include the header information and then output the actual data.

header('Content-Type: ' . $mime); 
header('Content-Disposition: attachment; filename='.$filename);

echo $data;

In the case of an image this data will be rendered as an ordinary image in the browser such as this one:

image

 

Rendering Other Files

Rendering other file types is still a problem at the time of writing of this article. How I wish the following tags were already existing:

<document src="msword.doc"/> <!—doc files—>
<spreadsheet src="worksheet.xlsx"/> <!—spreadsheets—>
<presentation src="awesome.ppt"/> <!—powerpoint—>
<code src="php.js"/> <!—for rendering source code with highlighting etc.—>

Don’t copy and past those code, those are just my dream. I hope it would be possible to render just about any type of file that makes sense in the browser.

Good news is you can actually store mp3, ogg, mp4, and webm files on the database and render them using either the html5 video or audio tags. But remember that not every browser supports this awesomeness (IE I’m looking at you).

 

Conclusion

That’s it for this tutorial. Rendering image files that are stored in the database is actually easy, but other file types are not.