HTML5 Validation with CodeIgniter Form Helper

Setting up validation in HTML5 is a nifty task. In this post I'll show you how to set HTML5 validation using Codeigniter Form Helper.

$this->load->helper('form');
echo form_open('');
$data = array(
   'name' => 'search',
   'id' => 'search',
   'maxlength' => 100,
   'placeholder' => 'Search',
   'pattern' => '.{3,}',
   'oninvalid' => "setCustomValidity('Minimum 3 characters.')",
   'oninput' => "setCustomValidity('')",
   'required' => 'required'
);
echo form_input($data);
echo form_close();

So, what this will generate is a input search field with custom HTML5 validation that will only accept minimum of three characters. The only thing to remember is  that we only write 'required' in HTML5 input field but for Codeigniter to understand we need to set required => 'required' (line 11) in the data array. 

The above code will produce the following html:

If you don't understand the HTML5 attributes used above: refer to the HTML5 Reference. Cheers!

Hackathon on Violence Against Women(VAW) - Team Young

Well, me and my friends attended this Hackathon on VAW some months back. I thought to write about it back then but I didn't had time. So, now let's talk about it. Hackathon is basically a collaboration of computer programmers, designers to make some applications, web portals or any useful software within a defined time. In our case the time was about 8 hours (a day). This hackathon was based on gender violence and mostly focused on violence against women. The first thing to do was to register our team and to pitch an idea on what problem are we looking into and how will we try to make a solution for it.

We pitched a simple idea that we had thought of a day ago which was to map all the NGOs working for the Women Sector in different districts of Nepal. After pitching our idea, me and my group (Team Young) began to work swiftly. The first thing was to get the data to map. The data was put on Social Welfare Council, Nepal as a pdf file. After some work the PDF was converted to open data format CSV which could be easily imported to a database. After doing this I began to work on the mapping. My other team members were working on the design and SMS based service for the portal as many people in Nepal don't have access to the internet but do have a mobile phone. The SMS API was provided free that day by Sparrow SMS - leading company for VAS services in Nepal. After some hours of serious collaboration and teamwork we were able to finish our work in time. The mapping was completed and the SMS based service was working fine too. The front-end was done using Foundation. Whereas, the back-end was done with PHP and MySQL. For mapping, JavaScript library leaflet.js was used.

Dynamic Dropdown with CodeIgniter and Ajax

In this post I will show you a simple way to create a dynamic dropdown in CodeIgniter with some Ajax ofcourse. So, you have a dropdown menu and depending upon the choice made by the user in that one, another dropdown gets triggered with appropriate choice.

So, what will we do is:

1. Create a dropdown menu with a list of table names.
2. As the user selects any one of the table names - we will auto-populate the second dropdown with a year dropdown corresponding to the table from our database. 

You probably didn't understand the above points? No worries, you'll know something at the very end of this post and what it is all about.

geoJSON for Nepal - Districts and Development Regions

I was planing to visualize some data over the map of Nepal. After some time spent on Google, I came across some good JavaScript libraries that could do this. They were Kartograph, Google Maps API. Then, I came across Leaflet, it is a simple open-source JavaScript library for interactive maps. It is a lightweight JavaScript library with plenty of interactive and visual features. It also is one of the many libraries supporting geoJSON.

GeoJSON is a format for encoding a variety of geographic structures. So, if you are looking for an accurate geoJSON for Nepal - I have posted it in my github repository which is compatible with leaflet.js: https://github.com/mesaugat/geoJSON-Nepal

The repo contains two geoJSON files:

• nepal-development-region.geojson (For Development Regions)
• nepal-district.geojson (For Districts)

Both of these are valid and accurate geoJSON you'll find for Nepal. These geoJSON contain different properties which can be removed by using QGIS if you don't want it. The QGIS tool can also generate geoJSON from KML. KML is the native format for Google Maps and Google Earth. There is also a library available to convert KML to geoJSON written by Mac Wright available on github: https://github.com/tmcw/togeojson

If you want to make your own geoJSON then this website: http://macwright.org/edit-geojson/ will help you do so, also made by Mac Wright.

Enjoy !

Comparison of Communication Status in South Asia and Nepal

Well, it's been quite a while that I've not written some stuff or shared something. Recently, I went to "Open Nepal Hackathon 2013" where developers and designers sit for some hours to create a useful product at the end of the day. The basic idea of the program was to use open-data to build something useful.

Open-data is the data that is free(open) to everyone so that they can use it, know about it and let others know about it. It is kind of a open-source concept. Open-data is available in open formats such as CSV, JSON or XML. If the required data is available through a website or a PDF or a DOC then it can be scraped to make it open format so that anyone can use it. Open-data is basically required by data journalists, developers to manipulate and make use of it to make different visualizations, services or even applications. Example of some open data could be census, GDP, etc. 

Electronic Payment and Challenges !

Recently I did a case study on "E-payment Systems and It's Challenges". For those of you wanting to know about E-payment you can take a look at my report and feel free to redistribute it. Only a brief compilation of the system and challenges that needs to be faced. 

Download this pdf.

Cheers !!!