About Me


Hi! I’m Wern Ancheta. I’m a Web Developer from San Fernando City, La Union, Philippines. I love building things for the web and sharing the things that I’ve learned through writing. When I’m not coding or learning something new, I enjoy watching anime and playing video games.

Services Offered

Here are some of the services that I normally offer:

  • Web Development – mainly PHP and its Frameworks (CodeIgniter, Laravel, Flight).
  • System Analysis and Design – from requirements analysis, database design, to system architecture design.
    Note that this is what I do most of the time. But I also work with JavaScript (NodeJS), Ruby, and WordPress projects from time to time.

If you have an interesting project or an idea that you want to implement please contact me:

  • Email
  • skype name: wernancheta



If you like this blog and you want to say thanks please consider making a donation. I’d really appreciate it.

New Blog

For those who are following my blog I have created a new WordPress blog which will also serve as my portfolio. For this reason I will no longer post any content on this blog. You can visit the new blog in the following address:


I might as well just continued with this blog but the name of this blog isn’t very professional so I thought of creating a new blog.

There’s no need to worry about the content disappearing I have an xml backup of all the contents I have posted in this blog. I can always restore them in case wordpress will delete it because of inactivity.

That’s it guys! See you on my new blog!

Playing with Models in Backbone.js

Yeah finally I got my hands dirty on Backbone.js and this time I’m also going to share to you what I’ve learned about backbone.js models.

Models in backbone.js is pretty much like the models in the MVC in server-side scripting language like PHP. If you aren’t familiar with the Models in the server-side they’re used for representing the data in the database. It’s a place where queries are being written. In simple terms data manipulation and retrieval happens in the Model.

But here were talking about the Models in the client-side particularly the Models used in Backbone.js. As I have said earlier they’re pretty much the same with the Models you used in the server-side in the sense that they also represent or store data temporarily.

If you want to learn the basics of Backbone.js before digging into this tutorial scroll all the way to the bottom and you will find some of the Backbone.js resources that I recommend.



  • jQuery – for dom manipulation and event delegation
  • Underscore.js – hard dependency of Backbone.js
  • Backbone.js – gives structure to JavaScript applications



What we will be working on today is a very simple application that allows us to add people on a table. Feel free to put on some css if you want because this really looks very ugly without the styling.


Of course I’m only going to teach you how to use Models in Backbone.js in this tutorial as you might not know I’m also learning Backbone.js as I write this tutorial so this very simple application is going to evolve in simply making use of Models to using all the basic components of Backbone.js like the Views, Collections, and Routers at the end of this series of tutorials were also going to connect our application to Couch DB a NoSQL Database which uses JSON to store data.



First you need to include the scripts that we need on the head portion.

<script src="jquery171.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>

Note that jQuery isn’t actually required if you have other means of manipulating the DOM, another library that you might be using then use it instead of jQuery.



Next is the markup where we are going to input the name and the age of the person:

<label for="name">Name:</label>
<input type="text" id="name"/>

<label for="age">Age:</label>
<input type="text" id="age"/>

<input type="button" id="btn_save" value="save"/>

Then the container for the table:

<div id="container">



Were not ready to create a new Model which we are going to temporarily store the name and age of the person.

var people = Backbone.Model.extend({


Inside the people Model is the constructor, this isn’t required but we need to be able to see something when a new people object is created. This is also the best place to put listeners. As the name suggests the listeners are simply used to monitor the value of a certain data in the model.

initialize: function(){


Inside the constructor you need to bind the error event. This simply listens to the


Next is the defaults or the default attributes and values that you want to add on your Model. These are simply the fields in a table when were comparing it to a database.

	names 	: [], //stores all the names
	ages	: [], //stores all the ages
	name 	: '', //will store the current value of name
	age	: '' //will store the current value of age

Next is the validate method. As the name suggests this method is where we put the validation logic for our model. This is where we check for required fields, number-only fields, email addresses, etc. If the idea doesn’t excite you then you might as well use happy.js, html5validate or the jQuery Validation plugin.

In the example below we simply check whether the attributes name and age have values on it and return an error if either of them doesn’t have a value. Remember that when you return a value from the validate method it should always be the error that you’re returning. In other words this is not the place where you check for things that have passed the validation.

validate : function(attributes){
	if(attributes.name == '' || attributes.age == ''){
		return attributes.name + " "  + attributes.age;

Lastly instantiate the people model.

var p = new people();



Next is the code for saving values into the people model. Begin with delegating the click event into the save button.



Inside the event get the name and age inputted by the user.

var name 	= $.trim($('#name').val());
var age  = $.trim($('#age').val());

Also get the current names and ages that are on the people model.

var cur_names 	= p.get('names'); //array of names
var cur_ages	= p.get('ages'); //array of ages

Then simply set the name and the age. This saves the value of name and age inputted by the user into the name and age attributes in the people model.

var check = p.set({'name': name, 'age': age});

The set method returns a value of false if the value is not saved into the attribute that you have specified and it returns an object when its successfully saved on the attribute that you’re referring to:


If check is a truthy value then the code inside of it will be executed if not then issue an alert to the user that all fields are required. I recommend that you read this article by James Padolsey on truthy and falsey values if you don’t have an idea on what truthy and falsey values are.

if(check){ }else{

alert(‘all fields are required!’);

$('#name, #age').val('');


If both the name and the age is inputted by the user we perform the following code.

First push the name and age inputted by the user into the current names and ages. Push() is a built-in method in JavaScript that allows us to push a single item at the end of the array.


Set the value of the names attribute to be equal to the current names. Do the same with the ages attribute.

p.set('names', cur_names);
p.set('ages', cur_ages);

Of course you can also do it this way if you’re in a hurry:

p.set({'names' : cur_names, 'ages' : cur_ages});

Lastly, clear the textboxes:

$('#name, #age').val('');



Next we build the table where were going to append the names and ages of the people that were adding.

First select the body.

var body = document.getElementsByTagName('body')[0];

//select the body tag

You can easily do this in jQuery through something like this:

var body = $('body');

But I’m currently practicing my plain js skills so please bear with me if you see some good old JavaScript in the examples.

Check if the there is no table in the page yet.

if($('table').length == 0){ //create the table }else{

//get the tbody


Inside it we create the table headers and table body. (If you have keen eyes you might have noticed that I’ve pretty much forgotten about the thead but it’s not actually required so we’ll be fine)

var tbl = document.createElement('table'); tbl.setAttribute('border' , '1'); //set borders to 1 var tr = document.createElement('tr'); //table row for headers var th_1 = document.createElement('th'); //header for names var th_2 = document.createElement('th'); //header for ages th_1.innerHTML = 'Name'; //header text for header names th_2.innerHTML = 'Age'; //header text for header ages

//append the headers into the table row

tr.appendChild(th_1); tr.appendChild(th_2);

tbl.appendChild(tr); //append the table row into the table var tbody = document.createElement('tbody'); //tbody

If the table is already created we simply select the table and the tbody:

	var tbl =document.getElementsByTagName('table')[0];
	var tbody= document.getElementsByTagName('tbody')[0];

And here’s the code that’s we will be executing everytime a new valid person(with both name and age) is created by the user.

var tr_2 = document.createElement('tr'); //create new table row

var td_1 = document.createElement('td'); //create table definition var td_2 = document.createElement('td'); //set table definition text td_1.innerHTML = name; td_2.innerHTML = age;

//append the table definition into the table row


tr_2.appendChild(td_1); tr_2.appendChild(td_2); tbody.appendChild(tr_2); //append the table row into the tbody tbl.appendChild(tbody); //append the tbody into the table body.appendChild(tbl);



Yeah! I guess that’ pretty much all we have to talk about. Be sure to check out the resources I mentioned below if you want to learn more about Backbone.js since I won’t be mentioning it again on the next parts of this series. In this tutorial we’ve created a very simple application using underscore.js, backbone.js and jQuery. As I have said earlier were going to make this application more awesome as we go through the series.



Playing with Underscore.js

In this tutorial I’m going to introduce to you a JavaScript Library called Underscore.js. It’s a library used to make your life easier as a Javascript developer. It has a bunch of different functions used for grouping, sorting, and mapping objects.

I’m learning underscore.js as I’m writing this so if you don’t understand something just Google it and enlightenment will be yours.

I recommend that you play with underscore.js on the console, it’s the best place to introduce yourself to a JavaScript library since you will immediately see the output of what you’re writing.



This returns the items in an array which exists on the first argument but does not exist on the second argument. Which means that its return value depends upon the order of the arguments.

var ar1 = [1, 2, 3, 4, 5, 6];
var ar2 = [2, 3, 7, 9, 10, 1];

_.difference(ar1, ar2); //returns [7, 9, 10]

This can also work with arrays composed of strings:

var amp1 = {'names' : ['wern', 'paul', 'falk']};
var amp2 = {'names' : ['w', 'fa', 'wern']};

_.difference(amp2.names, amp1.names); //returns ["w", "fa"]



The uniq method removes all the duplicates in an object. I don’t know how many arguments it could take but I managed to get two in the example below:

var names1 = ['paul', 'joseph', 'mark', 'matthew']; var names2 = ['joshua', 'ahab', 'michael', 'mark', 'paul']; _.uniq(names1, names2); //returns: ["paul", "joseph",

"mark", "matthew"]



This is one of my favorites. What his does is to check if all the items in an object meets the criteria that you specify. In the example below we are checking if all the items in the array ar1 is a number:

var ar1 = [1, 2, 3, 4, 5, 6]; _.all(ar1, function(value){ return typeof value == 'number'; });

//returns true

However if we try to put a string and a boolean:

var ar1 = [1, 2, 3, 'im a string', 4, 5, true, 6];

_.all(ar1, function(value){ return typeof value == 'number'; });     //returns false

One possible use case for this method is input validations.



I’m not particularly where can I use this one but it looks pretty cool. What this does is to map values to the items in the object that you specify.

var ar1 = [1, 2, 3, 'im a string', 4, 5, true, 6];

_.map(ar1, function(val){ return val + " awesome"; })

And so the output depends on what you specified in the function body. The code above appends the word awesome to every item in the object ar1.



This works just like the select query in SQL if ever you have worked with databases before. This requires 2 arguments the first one is the object that you want to use as your data source and the second argument is the function which is equivalent to the actual query in SQL. What I did below is to select all the items in the array ar2 that is greater than 1.

var ar2 = [2, 3, 7, 9, 10, 1]; _.select(ar2, function(val){ return val > 1; })

//returns [2, 3, 7, 9, 10]



This allows you to sort the items in your object any way you want. In the example below I sorted the array ar2 randomly.

var ar2 = [2, 3, 7, 9, 10, 1]; _.sortBy(ar2, function(val){ return Math.random(val); });

//returns items in ar2 in a random order



Returns all items in the object except the first one.

var x = [1,2,3,4];

_.rest(x); //returns [2, 3, 4] 



Returns all items in the  object except the last one.

var x = [1,2,3,4];

_.initial(x); //returns [1, 2, 3]



Returns the first item in the object that matches the criteria that you specified.

var x = [1,2,3,4];

_.find(x, function(v){ return v > 3; }); //returns 4



Similar to select, I don’t really know the difference.

var x = [1,2,3,4];

_.filter(x, function(v){ return v > 2;}); //returns [3, 4]



Plucks out the values associated with the key that you specify.

var anime = [{title: 'death note', main_char: 'light yagami'},   {title: 'pokemon', main_char : 'ash'}, {title: 'd-grayman' , main_char : 'allen walker'}]; _.pluck(anime, 'main_char');

//returns [light yagami, ash, allen walker]



Returns the items in an object in a random order.

var x = [1, 2, 3, 4];



As the name suggests, this merges all the items in the objects that you specify as the argument. Duplicates are removed in the process which means that only unique items are returned by the method.

var x = [1, 2, 3, 4];
var y = [4, 88 , 9, 20];
var z = [5, 5, 7, 22, 1, 2];

_.union(x, y, z);  //returns [1, 2, 3, 4, 88, 9, 20, 5, 7, 22]



Returns all the items which exists on all of the objects that you specify.

var x = [1, 2, 3, 4];
var y = [4, 88, 2, 1, 9, 20];
var z = [5, 5, 7, 22, 1, 2];

_.intersection(x, y, z); //returns [1, 2]



Returns an array of numbers that are within the range that you specify. The usage of the arguments depends on the number of arguments that you specify. If you only specify a single argument it is assumed that the initial value will be 0 and the step will be 1. Remember that the array that is returned is always zero-indexed.

_.range(4); //returns [0, 1, 2, 3]

If you specified 2 arguments then it is assumed that the step is 1 and the first argument is the initial value and the second argument is the terminal value.

_.range(2, 10); //returns [2, 3, 4, 5, 6, 7, 8, 9]

If you specified 3 arguments the first argument is the initial value, the second argument is the terminal value, and the third argument is the step. You can make use of this to easily create a multiplication table of any number.

_.range(2, 20, 2); //returns [2, 4, 6, 8, 10, 12, 14, 16, 18]



Binds functions into specific events in an object(elements). It’s like event-delegation in jQuery.

Since were doing things in the console and in an empty page, we first need to create the elements that we will be working on.

var spark = document.createElement('input'); //creates an input element
spark.setAttribute('type', 'button'); //set type to button
spark.setAttribute('value', 'spark'); //set value to spark
spark.setAttribute('id', 'spark'); //set id to spark

var body = document.getElementsByTagName('body')[0]; //select the html body tag
body.appendChild(spark); //inject the button into the dom

After creating the element and injecting it into the DOM we set the properties.

var spark_props = {
   name : 'spark boom',
   onClick : function(){ alert('name is:  ' + this.name); }

Remember that you can add any property any time you want.

spark_props.boom = 'kapow'

Or even modify existing ones.

spark_props.name = 'bam!!!'

Call the bindAll() method to bind all the properties together.


Finally, bind the click event to the button using the onEvent method as its action.

$('#spark').bind('click', spark_props.onClick)



Creates a clone of the function which can only be called once. One use case that I could think of is when submitting forms sometimes users tend to click on the Submit button multiple times.

var save = _.once(function_to_send_data_to_server);



Pretty much like the .each() method in jQuery if you’ve ever used jQuery before. It is used to iterate through the items of the object that you specify.

_.each(['re','mi','fa'], function(va){



Returns an array of functions stored in the object that you specified. The example below returns all the functions associated with Backbone.js, the number of functions returned only shows how lightweight it is.

_.functions(Backbone); returns

["Collection", "History", "Model", "Router",

"View", "noConflict", "setDomLibrary", "sync", "wrapError"]



Takes up two arguments the first one is the number of times you want to execute the given function which is the second argument. You can pretty much use this like the _.each method.

var anime = [{title: 'death note', main_char: 'light yagami'},  

{title: 'pokemon', main_char : 'ash'},

{title: 'd-grayman' , main_char : 'allen walker'}];






light yagami


allen walker



Reminds me of the getters and setters _.result is pretty much like the getter method in every programming language but this time you can either get the value for a particular key or execute a particular function.



That’s it! You’ve learned how to use some of the useful methods in underscore.js that you can use in your projects. If you’re already using jQuery you can use underscore.js as an enhancement since they will work together just fine.



How to install and configure apache, php and mysql

In this post I’m going to show you how to install apache, php, and mysql manually.

If you are doing this for the second time (you have already installed it before and you want to reinstall it because of some problems) you have to do the following before you continue:

  • Delete the MySQL folder located in the Program Files folder or where you installed it before. The uninstaller doesn’t automatically delete this folder (I don’t really know, maybe it does when you restart your computer).
  • Delete the MySQL folder located in the following address when you’re on Windows XP:
C:\Documents and Settings\All Users\Application Data

          And if you’re on Windows Vista or Windows 7 where user_name is the username of the current user.



Here’s the order of installation:

  1. Apache
  2. PHP
  3. MySQL



First we install Apache. Just follow the following screenshots.




Enter the network domain, server name and the administrator’s email address. If the website that you are hosting in the Apache server is just accessible in a local area network then you can use localhost. If not then enter what’s applicable to your configuration, you can use the example given in the installer as a reference.


Select Typical.


By default apache will be stored on the following location:

 c:\program files\apache software foundation

It’s fine if you just use the default but if you want to make it more memorable the use the example below:


Click Install.




Next is PHP.


If you’re bored you can read the EULA. If not then immediately accept it. And yes, you’re free to read the EULA even if you’re not bored.


To make it more memorable change the installation path to the following:


Select Apache 2.2


Now you need to browse the location where the http.conf file is located.


Select the extensions and extras that you wish to install.


Click Install


Click Finish




Lastly we install MySQL.


This EULA is way too long, you might as well skip it and just check on the agreement


Select Typical


Click Install.


Click Next twice. Then click Finish.



MySQL Configuration

At this point in time MySQL has already been installed but not yet configured. Click Next to continue with the configuration.


Select Detailed Configuration then click Next.


You can either choose Server Machine or Dedicated Server Machine. But for the purpose of hosting a site I think it’s better to use Server Machine Configuration. Click Next.


Again this requires you to decide. Just read the description for each type to determine the suitable configuration. You can just use Multifunctional Database if you’re not sure what to choose. If the system that you’re trying to host is a transactional type of system (Point of Sale, Billing System, Tax Collection System etc.) then select transactional database. If it’s just a system for a school project then you can choose non-transactional database.


This is where you choose the location of the mysql data (Data stored in your mysql databases)


This configuration depends on the number of concurrent users of the system. It’s up for you to decide what to choose.


The default port used by MySQL is 3306. You’re free to change it if you think another application is already using it. Check enable strict mode and click Next.


Again this depends upon you. If you think you’re going to store Chinese or Japanese or ASCII characters in your database today or in the near future then just select Best Support For Multilingualism. Click Next.


Just use the defaults. If you don’t want to use the MySQL console in running MySQL commands you might want to check the include bin directory in windows path option. This allows you to run MySQL commands from the Windows Command Line.


Enter your desired password:


Click Execute. This won’t take a minute, if it takes more than a minute maybe you haven’t deleted the folders I was talking about a while ago.



Configuring Apache

To configure Apache you need to open up the httpd.conf file and change the following line.

PHPIniDir ""
LoadModule php5_module "php5apache2_2.dll"

To something like the one below. Just change the location to where you installed php.

PHPIniDir "C:\php"
LoadModule php5_module "C:\php\php5apache2_2.dll"

Next you need to tell Apache to make use of the index files as default files on your server. Because by default index files are being treated like ordinary files. Here’s the default.

<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all

You need to change it to this so that index.php and index.php will be treated as the default files. 

<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
    DirectoryIndex index.php index.html

We’ve done this so that you can avoid the problem wherein all the files in a specific directory are being listed in a nice way (not really nice).


Configuring PHP

To configure PHP open up the php.ini file. In this example the php.ini file is located in the following location:


First you need to change the error_reporting.

error_reporting = E_ALL & ~E_DEPRECATED  //default

error_reporting = E_ALL //change to this

Display errors, html errors and display startup errors is disabled by default.

display_errors = Off //default
display_errors = On //change to this
html_errors = Off //default
html_errors = On //change to this
display_startup_errors = Off //default
display_startup_errors = On //change to this

Only do this if you’re still on the testing phase. You don’t want your users to see any errors.

Next set the defaults for MySQL connection.

mysql.default_port = 3306
mysql.default_socket =
mysql.default_host = localhost
mysql.default_user = root
mysql.default_password = secret

Another one that you might want to look at is the time zone. If you’re setting the time zone in a configuration file you might also get warnings to avoid that all you need to do is to set the timezone in the php.ini file.

date.timezone = UTC //change this to your timezone

If you are a Wampserver user, you might have also noticed that your redirects aren’t working anymore. If you’re getting this kind of error then follow the answers of the people at Stackoverflow. That is if your code is not made up of 99.9% of bad code, modifying it might actually lead to even more bugs. Just do the following and try not to use Wampserver the next time you develop your php application. I’ve also learned my lesson here, Wampserver is actually hiding a lot of errors and warnings because its php.ini file is configured to do so. Just enable output buffering:

output_buffering = On

What this does is to allow you to send headers, cookies, sessions after you have already outputted something on the page. You might have noticed that php doesn’t actually allow you to redirect the page if you’ve already outputted something that is if you’re not using Wampserver. Yes, Wampserver encourages bad coding practice and I’ll admit that I’m also a victim. If you’re reading this as a beginner in the world of web development then I encourage you not to use Wampserver and XAMPP. As you might already know XAMPP also encourages bad coding practice because it’s short open tag directive is enabled by default:

short_open_tag = On //this is in XAMPP, don't do this

And what this means is that it allows you the developer to use shorthand php tags:

//code here

O yeah, you just saved 3 characters there but it’s not actually a good coding practice. Try to avoid this at all cost.


Configuring MySQL

Finally, if you’re like me and you’ve mindlessly checked the Enable Strict Mode a while ago just change the following line in the my.ini file.



Into this line:


Sorry about that, I’ve actually told you to enable strict mode a while ago. So if you didn’t do it. There’s no need for you to do this step.

So why exactly did we disable strict mode? Because it’s to strict. One example of it being strict is that if you don’t pass a value to a field while performing an insert query, the query won’t execute and you’ll get a warning which tells that one of the fields didn’t get any value. If you didn’t quite get the picture here’s an example.

We have a table named TABLE (yeah, very creative way of naming huh):


We performed an insert query:

INSERT INTO TABLE SET name = 'luffy'

As you can see we didn’t set a value for the address since we didn’t even call it in our query we can just go away with it if it’s not strict mode. But if it’s strict mode we have to set up a value for every field in the table. Pretty nasty isn’t it?



That’s it! I’ve written this tutorial while actually figuring out what’s wrong with the configuration. I hope I’ve help someone save some hours by writing this tutorial. The result is actually pretty nasty if you’ve developed your application using WAMP or XAMPP then you suddenly install each of the software manually. So I guess the lesson here is that don’t try to develop in WAMP or in XAMPP if you think you’re gonna be using the manual installation on system deployment.

Things to remember when saving files into the database

In this quick post I’m going to tell you about some of the things that you need to remember when saving files into a database to make it work flawlessly.

Saving files into the database is actually a bad idea, have a quick look at the answers to this question in Stackoverflow:

Storing images in DB – Yea or Nay?

If you’re still on it then continue reading.



There are things that you need to configure in order to make uploading files to database flawless. First is the my.ini file or the mysql configuration. Yes, this post is actually mysql-centric so if you’re using another database then I suggest that you Google some more you’ll eventually find what you’re looking for.
If you’re on XAMPP my.ini is located at:


And if you’re on WAMP:


All you have to do is to look for this line:

max_allowed_packet = 15M

Yeah, I don’t know if it’s 15M by default but what it means is 15Mb. Be sure to change that  to whatever max file size you wish to upload on your database.

Next open up the php.ini file, if you’re on XAMPP its in:


And if you’re on WAMP:


And there’s actually a second php.ini file which is located under:


It’s only in WAMP, the one that is in the Apache folder is the one used for the php that is being run on the browser. And the php.ini in the php folder is for the php that runs on the command-line. Just edit both of them so that you won’t need to worry about anything.

Okay so here’s the line that you need to edit. It’s not actually 50M by default. Just modify it to whatever value you like. Just be sure not to forget the big M after the numeric value.

post_max_size = 50M

Next you also have to change the maximum execution time. It’s 30 seconds in my file but I don’t know if it’s the default, be sure to change it if you think the file that your users are going to upload will take more than 30 seconds to complete.

max_execution_time = 30 

You might also want to consider changing the value for the upload_max_filesize if you’re also planning to upload the files on the filesystem as a form of backup. This is 2Mb by default.

upload_max_filesize = 2M



For the database you might know it already that’s why I decided to place it on the latter part of this post. If you’re storing files into the database you should use the BLOB data type. If you will allow your users to upload videos and other media files use LONGBLOB it’s the safest possible bet.



I guess that’s it for this quick post. Remember that storing files into the database is not actually a good practice, awesome people at Stackoverflow are discouraging it since you’ll lose a lot of performance just by saving and accessing those files from the database.  The file system is actually the best place to be storing files. Another bad thing about saving files into the database is that your database will rapidly grow in size which means that it will consume much more space on your hard drive and it will also take some time just to backup. Lastly, you will have to set the header types on every page where you plan to output your files. The only advantage of storing files into the database is that it’s more secure and it’s really portable. Portability is really useful in cases wherein you need to migrate your system from one operating system to another since you don’t need to take care of the file paths when migrating.  In the end it’s still up to you to decide which path you want to go, is it the file system path or the database path.

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.




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




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.





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.




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.


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.


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.




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.




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.




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.


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




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. 


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.



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.


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.


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.



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.



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.




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.



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.



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.


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.




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!