ChatRo–Instant Messaging Application

I always create tutorials for this blog. This time I want to break the ice and share something else, and I guess I’m going to continue writing these types of post whenever I have a personal project or maybe a formal project if the product owner allows me to write something about it.

In this post I’m going to share about ChatRo, a web application that allows for team collaboration through instant messaging, file sharing, and file management.

 

Login

Everybody knows about this one. No need to trouble you from reading.

image

 

Registration

This is where users invited via email can register. After registering the user will automatically be added into the group as long as the link on the email is the one that is used to get into the application.

image

 

Instant Messaging

This is where users that belong to the same group can interact with each other through a chat box. Documents, pictures, audio and video files can also be shared to the users currently on the session through this form. Any user who are on the current session can end the session, not just the user who created the session. Every user can only participate in one session at a time.

image

Creating a new session is done by clicking on create session link and specifying the group and session name. The group name is an auto-suggest field which fetches all of the groups to which the current user belongs.

image

 

Group Management

This is where users can create new groups or manage existing groups.

image

 

Group Invite

Anyone can be invited into a group via email.

image

Existing members of other groups can also be invited. This is an auto-suggest text field that fetches all the users of the chatRo.

image

The invited user isn’t automatically added to the group. He has to accept or decline the request. Either way, the notification will stay on the home tab until the user decides to decline or accept the invite.

image

New groups can also be created.

image

 

 File Sharing

This can be used to share files to the other members of a session. In the screenshot below I’m uploading an Ebook from Makeuseof.

image

After the file has finished uploading, a message will automatically be created pointing out to the file that has been uploaded.

image

Clicking on the magnifying glass icon will preview the file. As of the time of writing of this article there’s still no preview for the front page of a pdf file, its just a link that the user can click to view the pdf file on the browsers built-in reader. But if there’s no built-in reader, it will just download the file into the local disk.

image

If the uploaded file is images it will be previewed with a download link on top of the image preview.

image

There’s also a preview for excel files.

image

Audio files can also be played as well, brought to you by html5 <audio> tag.

image

Lastly, video files can also be viewed brought to you by html5 <video> tag.

image

Yes it’s good that were able to play mp3, mp4 and other html5 compatible files but this magic still doesn’t work on some browsers. As of the time of writing of this article, I only managed to make it work for Chrome.

 

Archive

Once a session is ended it goes into the archives. This is simply a box where you can view the conversations in previous sessions. It’s only used for viewing previous sessions so there isn’t actually a link for the files that are mentioned in the conversation. These files can be viewed in the files tab.

image

 

Files

There’s also a separate tab for viewing all of the files that were uploaded. This disregards the session to which the file was uploaded. It is simply a box wherein you can search for previously uploaded files of the people that are in your group.

image

 

Conclusion

I guess that’s it, if you want to test, contribute, fork this software then you could visit its GitHub page. All the files that you need are already in there, you could also go through the README file if you want to learn more about this application.

ChatRo

There’s still a lot of bugs and a lot of room for improvement and additional features, I’d really appreciate it if someone could contribute to this project. If you have some questions regarding this project feel free to ask them on the comments section. Thanks for reading!

How to read excel files in php

In this tutorial I’m going to show you how you can use the php library called PHP Excel Reader to read excel files using php. Yes, things like excel readers for php has already been written by smart people in the past so I’m not going to show you how to build an excel reader from scratch. It’s not quite my level yet, I still consider myself a beginner. Anyway, let’s get to the main topic.

 

Requirements

 

Sample Spreadsheet

First you need to have a sample spreadsheet that you could  work on. Just make it simple, preferably a 2-column sheet with a  few data on it.

 

Setup Working Directory

If you haven’t already downloaded the php excel reader library go ahead and download it and then setup your working directory. Also put your sample excel file on that directory for easy access.

 

Modifying the Library

The php excel reader is a pretty old library. You need to open up the excel_reader2.php file and modify line 916. From this:

$this->_ole =& new OLERead();

To this:

$this->_ole = new OLERead();

You’ll get an error that assigning the return value of new by reference is deprecated especially if you’re using PHP Version 5.3 and above.

 

Main Story

Okay so let’s get to the main story. The documentation for this library is actually pretty useful so if you want to do some tinkering then you might as well read the official documentation. Almost all of the methods that I’ll be talking about is based on the documentation and the example that comes with the library. I recommend that you check out the example first before continue reading. If you can’t figure something out or if you want to do something that isn’t mentioned in the documentation then come back here. I cannot promise that I have the answers but I can assure you that I will cover the basic stuff that you may want to know on reading excel files.

php excel reader documentation

The example.php file is a good place to start, go ahead and make a backup of it so that you can safely modify your copy.

First, this line tells us that this file is going to use the php excel reader library:

require_once 'excel_reader2.php';

It then creates a new object of the php excel reader class:

$data = new Spreadsheet_Excel_Reader("Book1.xls");

You need to specify the file name as the argument. If the php file is in the same directory with the excel file that you’re trying to read then the example above is going to work fine.

Lastly, you need to turn off error reporting for notices. Try to remove this line and you’ll see some orange stuff in your page.

error_reporting(E_ALL ^ E_NOTICE);

Now that you’re done importing the needed files in your php file. It’s now time to show you some of the methods that you can use.

  • val() – This method requires 2 arguments and 1 optional argument. The first argument is the row number. The row number starts with the number 1. Row number 1 in most cases is the custom header name(Eg. student name, course, school, etc.) so the starting index for the row number is 2. The second argument is the column name. It is standard in excel (Eg. A, B, C, etc.), this is really useful because we can just put the column names in the php code. The third is the optional argument sheet index.  Sheet is zero-indexed. First sheet is 0, second index is 1 and so on.
$data->val(row_number, column_name, sheet_index);
  • dump() – This method is a beast. What it does is just to dump the whole content of the first sheet if you don’t specify the third argument. The first argument requires a boolean data type, true if you want to output the row numbers(1, 2, 3, etc.) and false if you don’t want it. The second argument is whether to display the column letters, just set it to true if you want it to be displayed. The third argument is the sheet index, by default it’s 0 and you don’t even need to specify it explicitly.
$data->dump(row_numbers, column_letters, sheet_index);
  • rowcount() – This method returns the total number of rows of the sheet.
$data->rowcount();
  • colcount() – This method returns the total number of columns of the sheet.
$data->colcount();

 

Now that you know the methods that you can use, you might as well try to experiment a bit.
Dumping the whole excel sheet is pretty useful but what if you want to do something with the data that’s in it? For that we could use a while loop to loop though all of the data in the current sheet.

First you need to know the total row count. I added 1 because the row is not zero-indexed, if I do not add 1, the loop that we will be creating later is just going to read up to the second to the last record:

$num_row = $data->rowcount() + 1;

Specify the index that were going to start with, as I have said earlier the row count starts with 2.

$index = 2;

Then the table heading, since the first row in our spreadsheet is the header we will just have to use it as the header for our table:

<table>
<tr>    <th><?php echo $data->val(1, 'A'); ?></th>    <th><?php echo $data->val(1, 'B'); ?></th>
</tr>

After that, use a while loop to repeat the table row as long as the index is not equal to the total row count.

<?php while($index != $num_row){ ?>
   //table rows
<?php } ?>

And for the table rows the only thing that’s changing is the index. If you want to do something with the data later on, this is the perfect time to be storing them in an array which you could loop through later on. If you’re going to save them into the database, you can also execute the query here.

<tr>
   <td><?php echo $data->val($index, 'A'); ?></td>
   <td><?php echo $data->val($index, 'B'); ?></td>
</tr>

Finally, increment the index after creating the table row:

$index++;

 

Output

Here’s the sample output. The one on the top is the output for the dump, and the one below is the output for the while loop that we created:

image

 

Conclusion

I guess that’s it for this tutorial. In this tutorial you’ve learned how to use the php excel reader library to read excel files in php. Making use of this library will make life easier for you if you need to do some operations to the data in the excel file like saving them into the database our outputting them in a customized fashion. If you have questions, suggestions for this tutorial, or if there are other details that you think I have missed please feel free to use the comments section below thanks for reading!

Podcasts every Web Developer should listen to

As web developers we need to constantly update ourselves with the latest in our field, and one way to catch up with the latest news in web development and to know what our fellow developers have to share is by listening to their podcasts. In this post I’m going to share to you some of the podcasts that you should be listening to. But before you continue reading, here are some of the similar articles that might also interest you.

 

I can see that you’re still here so let’s get going. Note that this list isn’t ordered by level of podcasts awesomeness, they’re ordered randomly.

 

Herding Code

Herding Code is a podcast hosted by K. Scott Allen, Kevin Dete, Scott Koon, and Jon Galloway. They mostly talk about JavaScript technologies, and some Microsoft web technologies like ASP.Net and Silverlight. They also have a guest developer talk about a specific technology or a book that they have written. This isn’t a weekly podcast though, I’ll call it irregular weekly basing on their archives. Sometimes they do 5 shows in a month, sometimes there’s 3, and sometimes there’s only 2.

image

 

JavaScript Show

A JavaScript news and discussion podcast hosted by Jason Seifer and Peter Cooper. They mainly talk about some of the cool links on JavaScript Frameworks, jQuery plugins, articles, tutorials, and the latest news on JavaScript.

image

 

YayQuery

A JavaScript and jQuery podcast hosted by Paul Irish, Rebecca Murphey, Adam Sontag, and Alex Sexton. Definitely listen to this podcast if you like to laugh while learning. This is one of the podcast that has been discontinued at the time of writing of this article but they still have the site for everyone to visit. Definitely download their shows because it might disappear soon.

image

 

ShopTalkShow

A podcast hosted by Chris Coyier and Dave Rupert. They talk about web design and development,  they also talk with a special guest for every show.

image

 

JavaScript Jabber

This podcast might be only of interest for seasoned JavaScript Developers since most of the topics that they discussed are really intermediate JavaScript stuff, I can tell because I don’t really understand most of the things that they’re talking about since I’m only a beginner in JavaScript. So if you think you’re already a seasoned JavaScript developer then definitely listen to this podcast.

image

 

jQuery Podcast

I consider this one of the best podcasts on JavaScript and jQuery. They had a total of 46 episodes before they decided to stop doing the podcast. In every episode they have an awesome guest JavaScript developer who talks about a particular JavaScript technology, a JavaScript event that they’ are organizing, or the things that they do in their company such as development practices, the tools that they’re using, etc. Definitely listen to this I’ll assure that you’ll learn a lot.

image

 

FaceOff Show

Faceoff is your face-to-face web technology podcast. In this podcast Jade Robbins and Mark Sanborn talk about various aspects of web technology such as web development, social media, and web entrepreneurship. Yes! I just pulled it from their site, but what can I say? All I can say is that this podcast is awesome, check it out if you don’t believe me.

image

 

WebDev Radio

As the name of this podcast suggests, this podcast is all about general web development. If you’re looking for some news, views and issues in the field of web development then this is the podcast that you should be listening to. 

image

 

Deepfriedbytes

image

 

A Minute with Brendan

image

 

Minute with Node.js

image

 

Minute with Mobile

image

 

Minute with CouchDB

image

 

Minute with Riak

image

 

 Expression Engine

image

 

the Changelog

image

 

Conclusion

Podcasts are great to listen to if you’re not in front of your computer but still want to keep yourself updated with what’s latest and what your fellow developers have to share in the field of web development.

Using HTML5 local storage to retain data after closing the browser

In this tutorial I’m going to show you how to use HTML5 local storage.
HTML5 local storage is used to store data on the clients machine and is pretty much the same with jQuery cookies which I previously wrote about.

Remember inputted data using jQuery cookies

If you want to learn more about HTML5 local storage you can read the awesome book by Mark Pilgrim on HTML5.

Local Storage for Web Applications

Now you don’t have to use a jQuery plugin in order to persist data even after closing the browser as long as the browser supports local storage. You can check if your browser supports local storage on the link below.

Local Storage Support

Here are a few blog post about localStorage performance that you might want to read before you try to implement it in your projects. As a summary, localStorage performs better than cookies, localStorage doesn’t have the same storage space for different browsers and lastly, localStorage isn’t fast. If you want to know more of the details then read the blog posts below.

 

Mini Project

So that I won’t end up repeating what has already been written about local storage I decided to hit two birds with one stone by showing you how to build a simple application that uses local storage. In this tutorial were going to build a component of a point of sale system which is the adding of stocks.
We are going to use local storage to retain whatever it is that the user has inputted.
This is useful in cases when there is a power interruption while there is a transaction that is currently in progress. Not having to input the data over again will save the user some time in repeating the transaction all over again.

 

Fetching

Let’s start by fetching all the items from our database. We also need a button for reloading the inputted data into the text fields for adding stocks, clicking this button will fetch the data in the local storage and load it into the text fields. We also need a clear button which will be used to clear the local storage, clicking this button deletes every data that is on the local storage. Finally we need to have a button for committing the changes in the quantity of the products into the database.

<p>
<h3>ADD STOCKS</h3>
</p>
<?php 
$products = $db->get_results("SELECT * FROM products"); 
if(!empty($products)){
?>
<p>
<input type="button" id="btn_refill" value="Local Storage"/>
<input type="button" id="btn_clear" value="Clear"/>
</p>
	<table border="1">
	<tr>
		<th>product</th>
		<th>quantity</th>
		<th>add qty</th>
	</tr>
	<?php foreach($products as $k=>$v){ ?>
	<tr>
		<td><?php echo $v->product_name; ?></td>
		<td data-id="<?php echo $v->product_id; ?>"><?php echo $v->quantity; ?></td>
		<td><input type="text" name="add_qty[]" data-qty="<?php echo $v->quantity; ?>" id="<?php echo $v->product_id; ?>"/></td>
	</tr>
	<?php } ?>
	</table>
	<input type="button" id="btn_addstocks" value="Commit Changes"/>
<?php } ?>

 

Set Item

Next we need to set the items that we are going to save in the local storage every time the text field for entering the additional stocks loses its focus. This means that every time the user makes changes to the additional stocks the local storage also changes.

$('input[type=text]').blur(function(){ var product_id_r = []; //array for storing product id var product_qty_r = []; //array for storing product qty var old_qty_r = []; //array for storing addl qty var index = 0;

 

//loop through each additional qty $('input[type=text]').each(function(){ if($.trim($(this).val()) != ''){ var qty = $(this).attr('data-qty'); var add_qty = $.trim($(this).val()); var new_qty = parseInt(qty) + parseInt(add_qty); product_id_r[index] = $.trim($(this).attr('id')); old_qty_r[index] = add_qty; product_qty_r[index] = new_qty; index++; } }); //save the products ids, additional qty, and

//updated qty into the local storage localStorage['product_id'] = product_id_r; localStorage['old_qty'] = old_qty_r; localStorage['product_qty'] = product_qty_r; });

As you can see from the code above, we are actually storing the product id, additional quantities and updated quantities(quantity before the update + additional quantity) in a separate array and then assign that array into a local storage item. This is done by looping through all the text fields for additional quantity that is not empty.

 

Refill

Next we write the code for refilling the text fields for additional quantity. First we check if the product_id item on the local storage exists. The double exclamation point forces the result to boolean data type so if the product_id item exist then the has_local variable will have a value of true if not then it will have false stored in it. Remember that local storage can only store key-value pairs which means that it can only store data of type string, but that’s not a reason not to use it since we can use the split() function in JavaScript to do the dirty work for us. Earlier we assigned an array to a local storage item, which means that our local storage item has stored a string similar to the one below.

"2,1,4,24,2,6,4,5,5"

We just need to use the split() function and supply comma(,) as the separator and voila! instant array that we could loop through. If you have read the code for fetching the items you might have noticed that I used the product id as the id attribute for each of the items we will just have to use that id to pinpoint where we are going to place the additional quantity. For that we will need to loop through all the product ids, note that the product ids that was stored in our local storage are the product ids of items that has additional quantities, the rest that are untouched is not included. To further elaborate what I just said here’s a screenshot. What I have been talking about is that only the product id for guava and apple will be stored in the local storage since they are the only ones that has additional quantities.

image

Here’s the code.

$('#btn_refill').click(function(){
	var has_local = !!localStorage['product_id'];
	if(has_local == true){
		var product_id_r = localStorage['product_id'].split(',');
		var product_qty_r = localStorage['old_qty'].split(',');
			
		for(var x in product_id_r){
			var qty = product_qty_r[x];
			$('#'+product_id_r[x]).val(qty);
		}
	}else{
		alert('No Data present on local Storage');
	}
});

 

Clearing

If you want to clear the local storage you can do so by calling the clear() method for local storage. Note that this will delete all the data on the local storage. I don’t know of a way to clear individual items so if you know then please share it in the comments.

$('#btn_clear').click(function(){
	$('input[type=text]').val('');
	localStorage.clear();
});

 

Add Stocks – Front-End

Next is the code for adding stocks. This is similar to what we did when filling the text fields with data that is on the local storage. But since jQuery is awesome we don’t have to loop through all the product ids and call the add_stocks.php a million times. All we have to do is to pass in an array to add_stocks.php and add_stocks.php will take care of the looping for us.
We supplied an array so why do I still see a for loop in the code below? Good question!, the for loop is actually used for updating the quantity that is being shown to the user and we did all that without refreshing the page.

$('#btn_addstocks').click(function(){ var product_id_r = localStorage['product_id'].split(','); var product_qty_r = localStorage['product_qty'].split(','); $.post('add_stocks.php',

{'id_r' : product_id_r, 'qty_r' : product_qty_r}, function(){

//update the quantity on the table

//without page refresh for(var x in product_id_r){ var product_id = product_id_r[x]; var product_qty = product_qty_r[x]; $("td[data-id="+ product_id +"]").text(product_qty); } } ); $('input[type=text]').val(''); localStorage.clear(); });

 

Add Stocks – Back-End

Here’s the code for updating the stocks in the database.

$product_id_r = $_POST['id_r']; //product id array $product_qty_r = $_POST['qty_r'];//new product qty array //loop through all the update product ids foreach($product_id_r as $k=>$v){ $product_id = clean($v); $product_qty = clean($product_qty_r[$k]); $db->query("UPDATE products SET quantity='$product_qty'

WHERE product_id='$product_id'"); } //escape quotes and other malicious characters function clean($str){ return mysql_real_escape_string($str); }

 

Conclusion

That’s it! HTML5 Local Storage is actually pretty useful for transactional systems, as I have said earlier, repeating a particular transaction if there is a sudden power interruption is not that efficient especially if the user is catering to hundreds of people in a day. Being able to restore everything that has been inputted will save some time in the part of the user.

Email Newsletters every web developer should subscribe to

Web developers all need to keep up with what’s latest in their field. And email newsletters is one way to keep up with the latest news and technologies in the field of web design and development. Here are some of the email newsletters that you should subscribe to.

 

JavaScript Weekly

First on the list is JavaScript Weekly. A free, once-weekly email round-up of JavaScript news and articles. Most of the stuff that they’re linking to are cool and awesome. You can checkout their archive and see for yourself.

image

 

HTML5 Weekly

This weekly newsletter is also from the same guy that brought us JavaScript Weekly, Peter Cooper. As the name suggests HTML5 Weekly is a newsletter linking to the latest news, articles, and other cool and new stuff on html5.

image

 

Ruby Weekly

Yep, if you still haven’t notice stuff from Cooper Press is dominating this post. For all the Rubyist out there this is one newsletter you shouldn’t miss. Keeping up with the latest awesome stuff in Ruby has never been much easier.

image

 

Dart Weekly

If you want to keep up with Google’s new Dart Programming Language, essentially designed to replace JavaScript? Then subscribing to this newsletter is the perfect way to do so.

image

 

Coder Weekly

This newsletter is not specifically intended for Web Developers and Designers. As the name suggests, this newsletter is for programmers. The stuff that they link to are not necessarily the latest and greatest stuff in programming, they mostly link to programming articles.

image

 

JS Mag Blog

Yup I just said in the title that this article is supposed to be newsletters only. But what is a blog doing here? Well its awesome JavaScript stuff so I decided to include it. Plus its also a weekly round-up, its like a newsletter without the email.

image

 

StatusCode

Status Code is a language agnostic roundup of the latest ideas, releases, trends, events and must-read articles from the field of software development.

image

 

Web Design Weekly

Web Design Weekly is essentially a mix of HTML5 Weekly and JavaScript Weekly. It mostly links to CSS3, HTML5, and JavaScript stuff. And yes, they also have an archive where you can check out some of the cool stuff that were posted before you subscribed.

image

 

Laura Carlson Web Development Newsletter

This newsletter has been running for a while now, I know because it has also been linked to on a 3-year old Smashing Magazine article. Its old but it never fails to link to some of the latest news and articles in Web Development.

 

SitePoint Newsletter

This is actually a collection of newsletters from the SitePoint websites. They mostly link to CSS3, HTML5, and PHP stuff.

image

 

Daily JS

If you’re the kind of guy who wants to keep up with some JavaScript news daily then you should subscribe to the Daily JS Newsletter. They mostly link to awesome JavaScript projects on GitHub.

image

 

JavaScript Monkey

A new kid on the block at the time of writing of this article. Only a few weeks old basing from their available archives of JavaScript awesomeness.

image

 

Conclusion

That’s it! Subscribing to newsletters is one of the good ways you can keep up with the latest in the Web Development and Web Design Industry.
If you know of some cool newsletters that wasn’t mentioned on this article then please share them on the comments.