 yesterday I was talking to a friend of mine who was a teacher and I was very happy to hear how he's pushing for technology in the classroom and his school will be going into a bring your own device in the near future and he was talking to me about some ideas he had that he thought maybe I could help with and that was a pretty good idea what he had what he thought you know he wants to basically issue each of his students a little card maybe like an ID card with a QR code on it that has their information in this case what I wrote here is basically it's just their name it's a QR code that has their name and when he comes around to collect homework or tests basically the kid would lay their their homework out drop their ID on top of the paper and he can take a picture with his tablet or cell phone and upload it to a server and then it would read the QR code and organize the paperwork according to the QR code I thought was pretty good idea and in my mind I started working through it and you know uploading files to a server very simple we have I've done tutorials in the past on QR code generators and also what we're using in this tutorial or this video is Z bar tools in this particular case Z bar image that will read the QR code and then just organize it so really easy but at the same time if I was just to make it from scratch it probably be pretty ugly so I quickly went to GitHub and checked I just did you know you know JavaScript PHP file upload and this is one of the first ones that came up was this one we're looking at here which very nicely look it uses Twitter bootstrap which most of you if you've done any web development are familiar with it's very commonly used also free and open source made by the people over at Twitter and it's like I said commonly used if you surf the internet you are utilizing it many times every day also jQuery which is also probably even more commonly used than bootstrap and great great tool that I've done tutorials on and I love so that's all part of this jQuery file upload and this is the demo I download the files really it's it's you can consider it overkill for what we're doing because it's got multiple different interfaces it already has the code for the server side it has PHP code Python code and and well right here PHP Python Ruby on Rails Java Node.js so it already has all that set up PHP is the default which is great because that's what I like to use so basically I got that and then once the files are uploaded wants make it look nice and be able to search through the files so if you watched my video from a few tutorials back a week or so ago I did a video on h5a which gives you a nice little file browser for your server in your web browser so obviously doing all this I mean if I just wanted to write a basic bash script could have done it in a couple of lines wanted to make it a nice interface make it easy to use on both desktops and mobile devices and luckily I didn't have to design anything because thanks to the open source community there was already free and open source code out there for me to use that I had to just modify slightly so basically I took his demo code downloaded it from his website and even though I said this seems like overkill the file is still or at least zipped up a little over a hundred kilobytes so even though it's overkill it has a lot of features we're not going to use their features you could implement later on and it still is minimal so all you need is a web a web server and that runs PHP so Apache with PHP anyone could take this and that has any basic knowledge of computing and basically set it up in half an hour tops I would say if you're not that experienced with it shouldn't take much longer because basically in this case I've already packaged it up into a package file and once you have Apache and PHP installed you download uncompressed the file to a folder on your server and you should be ready to go in theory but let's look at what I've modified so this is their demo and like I said it has different interfaces and I just went with their basic plus UI and I removed I just went in and deleted all the code I don't need all the all the the toolbar up here the demo notes down here the toolbar there and I just let the basics okay so I've already taken I drew up some papers put QR codes on them took some pictures with them with a camera put them on my computer so let's go ahead well first off let me click on I added this button here view docs which will bring you to the folder using the five H5 AI and you can see this folder is empty there's nothing in there now so I'll go back a page I'll click add files here I'm in a folder called student work where I have was it five or six six different papers that I've taken pictures of that have QR codes on them and I'll click open it immediately gives you thumbnails here and I can upload them one at a time I'm just gonna click start upload and these images I have are about two megabytes each it'll take a second here for them to get going but if you're taking a picture with your cell phone camera I'm pretty sure and we'll do that here in this demonstration momentarily it isn't gonna be that big so give it a second here I do know that this takes a second there we go to them they're all uploaded gives you all thumbnail shots you do have a delete button here but in reality most of these files don't exist anymore because these screenshots these little thumbnails are from basically their PHP code from this project the jQuery file upload demo project puts all the files in one folder well then what I just I just added one line of code into the PHP code that runs a bash script of mine which I'll show you here in a moment that basically reads through if it finds a QR code then it organizes it so actually if I flip over here this is the bash code I wrote very very simple looks like maybe 10 lines of code 13 if you count the blank lines so yeah pretty much 10 lines of code basically what it does is it moves into the files folder which is the temporary folder right now and it searches all the files in there then it uses Z bar code or Z bar image again which I've done tutorials on in the past and checks the image for a bar code if it is successful if it finds a bar code it is going to rescan that image and put the text from the bar code from the QR code into a variable called name then it'll make a directory if it doesn't already exist inside our permanent files directory based on that name and then it will move the image there so a lot of these images don't exist if I refresh the page you'll see there'll be one left and the reason for that is that the image just it was kind of blurry it couldn't read the bar code it's going to happen occasionally so I purposely did that one in there so you can see I have made no way for you to manually move it other than logging into the server yourself which if you have access to the server should be easy you can delete it at this point if you'd like but all the other the five other images if we click on view docs brings this folder that used to be empty and now has folders based on those children's names that we got from the QR code so I can click on Sally here and we have Sally's images and I click here and there's her paperwork and remember it renamed this folder based on that QR code and there's the same one this is her homework I can close that and go up and go into Tom's file and I can do the same thing up there's is my story we added stuff to a story or even more stuff to a story okay so very easy and again if you watch my tutorial on this h5 ai code which is again free open source available for you to use and makes life very easy if you had a long list of children's names here you can use this filter and I can start typing Sally and you can see it filtered down Sally again there's only two names in here it's not a big deal but you can type the first name last name whatever and it will search through and narrow down the files for you again you can also change the size of the images you can go a grid view and icon view all these different views here for you so that's the that's that's how the code works again you can come in here there's no way that's I've set up for you to delete the files through the web interface but you could sit down on a computer and log into the server and delete it now let's have a look at that same program the same interfaces with a mobile device and the camera on your mobile device okay I've got my Android phone here I've got one of the paperwork someone's test paper here with the QR code up in the corner I printed the QR codes on the paper but it'd be the same as throwing down a ID badge with the QR code in it I'm gonna put the paper down here on my seat and now as you can see the interface looks pretty much the same on here as it does on the screen just everything's more compact and when I click the add files button it gives me options here I have options for my camera sound recorder voice recorder select music check obviously those don't apply to this program but we have camera gallery Google Drive photos and file manager so if you already have the files stored on your phone or some place at your Google Drive you can upload them from there and have the script automatically organize them I'm just gonna choose camera which brings up my default camera app I'm going to point down paper make sure it focuses and I will take a snapshot at least with this camera application and ask if I'm done or if I want to retake it if it's blurry you can say retake and just point and shoot again and then when you're done you can click done and you'll see it just like on the computer it automatically adds a little thumbnail there and it waits for you to click either the start upload button up there which uploads all the images you have so you can take a picture a bunch and then upload them all at once or it might as well just click the blue button next to that particular image and it will upload it to the server once it's done uploading which my camera seems to take pictures about 875 kilobytes so a little less than half the size of the ones I had with the other camera and at this point I can click view docs and just like on the computer I have a nice little file manager interface here that I can click on and go to also taking pictures with your phone automatically names them at least with my phone with a date stamp so when you're uploading from whatever device on the server the file is going to be called the same as it was on your device so in this particular case they will all be time stamped so as you can see this interface works great on a full desktop screen a large screen or even a small screen like a cell phone device now I also want to point out that all together looking for the code I wanted to use and getting it all set up took maybe an hour to an hour and a half from beginning to end to do all this it was very simple to do thanks to the free and open source software community to do with this on my own would have taken a lot longer but thanks to the people over at jQuery Twitter bootstrap and the developers who worked on the HT I'm sorry H5 AI and the jQuery file uploader made my life a lot easier and that's one of the main reasons that we live in a free and open source community and try to avoid proprietary software that doesn't really help us at all now some thoughts I want to bring up about things that other things that could be done with this software other thoughts I have one is maybe putting two QR codes so the student could have an ID with a QR code on it that is their name but then when the teacher prints out like tests or assignments that they're going to write on at the bottom they can print a QR code that has the name of that assignment and then you can rewrite this code adding basically one or two lines of code to find students name and if there's a second QR code to take that and name the file based on that so that all your files are named based on the project and then with the H5 AI you can use that filter button to search through a student's folder for a particular file other thoughts I've had is obviously this is a great idea that my friend had for particular instances but if you're going to be going to a bring your own device to the school I would personally recommend as much as possible have all the work assignments be on that device understanding that he is an elementary school teacher so they probably want the students doing a lot of writing to work on their handwriting I know my handwriting is horrible I probably should have done some more writing when I was younger but I would recommend whenever possible you know tests and assignments questionnaires that you give to the students all be done on the tablet so you don't have to take a picture because it is going to take time to go around take a picture upload take a picture upload or even take a picture take a picture take a picture and upload all at once so I would recommend that I understand all depends on the particular project and doing that is is really relatively simple people with no computer skills at all could easily create a test or a set of questions in Google Docs make a form and when students submit it goes right into a spreadsheet for the teacher to look at but if you have any computer skills I recommend making your own forms making HTML forms is relatively simple there are free and open source projects out there that do quiz style applications and this will just avoid having paper and having to take pictures because the student just does it on their tablet or phone or whatever device and submits it and a teacher gets it and the teacher doesn't have to walk around and collect it so that's something to think about again I think it's great they're doing this bring your own device I don't like when schools assign children devices because now you're forcing them to use a certain platform and as you know I hate Apple products I think it's wrong one of the reasons I'm homeschooling my kid is because I don't want them exposed to teachers who will force them to use certain software whether it be Microsoft or Apple or any type of proprietary software because we don't use that in my house I want to teach that to my kid and so I plan on homeschooling for multiple reasons that's one because I would have lots of fights with teachers who would try to force proprietary software on my child which I think is just wrong on many levels but to bring your own device is a great thing because children has a chance to choose they can choose an iPhone or iPad if they really want they can choose an Android device a Firefox OS or Tenzin or one of many other operating systems out there even a tablet that runs something like Debian it's up to the child to make that decision or the parents of the child and nowadays I mean I was at best by a few months ago and they had a little tablets for $50 and larger tablets for $75 my tablet is a $70 tablet before shipping yes it's not the best for gaming and stuff but to fill out basic forms for school and complete assignments that way is great as long as the teachers are assigning software that is compatible with all platforms which they should be I would hate to see schools say you have to download this proprietary program and install it on your device to pass the class because that's just wrong again on many levels and so I hope that teachers educate themselves on free and open-source software and it just make the world a better place but make life a lot easier on all of us so I thank you all for watching if I remember sometimes I forget I will put a link in the description to a compressed file with all this and and again I threw this together real quick working great on my system and it should be easy to install I'm not saying there aren't going to be bugs but I tested you know different scenarios file names with spaces and special characters and so far I think I've wrote my portion of the script to work properly so feel free to use it but again that's your own risk and I appreciate comments and feedback and I as always I hope you visit my site filmsbychris.com that's Chris with the K there should be a link in the description and I hope that you have a great day other videos to watch be sure to click on them enjoy them some of them are stuff that we built on today and they are more tutorials where this was more just a demonstration also another thought that I didn't mention in my final part there about other capabilities you could add to this would be obviously not only organizing folders you can also send out email notifications or even send the actual file in an email depending on the student's name to certain email addresses I mean again the possibilities are endless when you're in control of the source code and you can manipulate it and do whatever you want there are no limitations that you would normally have with proprietary software you can do whatever you want so just thought I'd mention that whatever you can think of can be done just have to figure out how sure to watch some of the videos below thank you for watching and again I hope that you have a great day