Monthly Archives: December 2014

AJAX registration form using jQuery

I have created this simple registration form which makes user registration using asynchronous requests in the background, checking if a duplicate username or email exists, and presenting the user with status of registration on the same page without have to reload the page even once.

It is simple, but with some prerequisites for my particular example. They are

  1. MySQL database for saving registrations
  2. PHP registration page for connecting to database
  3. Some basic javascript knowledge

So having set up the above stuff, we shall get started. If you don’t want to code all yourself, use my code from Github.

First of all, create for yourself a nice form. It doesn’t take much right? Just make sure you attach an ‘id’ attribute to each input field for convenience later. Here is my version.

If you see, after the form I have left an empty div. It is for displaying the response we get from our ajax request. You can, of course, add nice styling to this div. Having our form set, we can concentrate on the jQuery part.

Start with making sure our DOM is loaded with $(document).ready() function. Grab hold of the click event of the form submit button. Then we get the values in the username, email and password fields.

Here, we can have some basic checks to make sure form is filled up. We could have used the required attribute to make sure all fields are filled, but that does not give us full control, so use Javascript or jQuery and display some custom messages. I clubbed them together in a single if.

Next, using the simple $.ajax() function, make a request and get the response code. My action page is register.php, and I have make simple error codes to detect what response the backend gave. Here are the codes, for some reference.

// Code returns 101 for "username already exists"
// Code returns 102 for "email already exists"
// Code returns 104 for "internal server error"
// Code returns 202 for "user created successfully"

Refer register.php for complete code.

If the query succeeds, we capture the response in responseText variable. We can then do any response based manipulation we need for our specific needs. Just make sure to return false at the end to prevent default submit behavior. Here is my final jQuery snippet.

Finally, the entire HTML code has nothing more, just the standard doctype and stuff. Here is what to expect, or similar. LOL I was trying some CSS so ignore all that 😉

Also, I wanted to tell you, I switched from the classy syntax highlighter to this new (for me!) gist. It is cool, only a little more effort. Loved it. If you own a blog and post code frequently, give it a try. Thank you for reading.

On why PHP removed magic quotes – Nice explanation

I am a newbie in PHP, or at least not as good to call myself mature. Recently, PHP announced deprecation for magic_quotes in version 5.3 and complete removal in version 5.4. So there are official docs on why it was removed, but this is what I found written by a contributor and it was perfectly explained. Do check out.
Here goes the comment: –>
The very reason magic quotes are deprecated is that a one-size-fits-all approach to escaping/quoting is wrongheaded and downright dangerous.  Different types of content have different special chars and different ways of escaping them, and what works in one tends to have side effects elsewhere.  Any sample code, here or anywhere else, that pretends to work like magic quotes –or does a similar conversion for HTML, SQL, or anything else for that matter — is similarly wrongheaded and similarly dangerous.
Magic quotes are not for security.  They never have been.  It’s a convenience thing — they exist so a PHP noob can fumble along and eventually write some mysql queries that kinda work, without having to learn about escaping/quoting data properly.  They prevent a few accidental syntax errors, as is their job.  But they won’t stop a malicious and semi-knowledgeable attacker from trashing the PHP noob’s database.  And that poor noob may never even know how or why his database is now gone, because magic quotes (or his spiffy “i’m gonna escape everything” function) gave him a false sense of security.  He never had to learn how to really handle untrusted input.
Data should be escaped where you need it escaped, and for the domain in which it will be used.  (mysql_real_escape_string — NOT addslashes! — for MySQL (and that’s only unless you have a clue and use prepared statements), htmlentities or htmlspecialchars for HTML, etc.)  Anything else is doomed to failure.

Creating an autocomplete field | Setting up frontend | Part 2

In the first part of this article, we had set up the backend MySQL database. Now we can write the code necessary to get information from the server and convert it to a format we can parse, JSON in my case here. So lets begin.

Step 4 – Writing script to get data from MySQL database

As always, we can write it in any language we are comfortable with. PHP happens to be mine. The script is straight forward, accept the pincode via a GET request, ‘pincode’ parameter. Query the database for its existence, add it to an array and using json_encode() function in PHP, display the output. If value does not exist, it will return null, and it is not our concern here about what happens after that, as it will be taken care by the application using this API.
Code: retrieve.php
<?php
$pincode = $_GET['pincode'];
$conn = mysql_connect("localhost", "root", "password");
mysql_select_db("turnouts") or die();

$pincode = (string)mysql_real_escape_string($pincode);

$sql = "SELECT taluka, district, state FROM pincode WHERE pincode = '$pincode'";
$data = mysql_query($sql);
if(!$data) {
die(mysql_error());
}
$row = mysql_fetch_row($data);
$taluka = $row[0];
$district = $row[1];
$state = $row[2];
$state = str_replace("\r\n", "", $state);
$taluka = strtolower($taluka);
$district = strtolower($district);
$state = strtolower($state);
header('Content-type: application/json');
$array = array('taluka'=>$taluka, 'district'=>$district, 'state'=>$state);
echo json_encode($array);
?> 

The URL will follow the pattern, /retrieve.php?pincode=000000 and return data. As an example, the following image,

If you have come successfully to this step, then bingo! We now have a working API.

Step 5 – Writing an AJAX form using jQuery

 We will now write a simple form with 4 fields in HTML. Include jQuery in that page, and then write the script at the bottom which will query our API asynchronously.
Code: pincodes.html
<html>
<head>
<title>Pincodes</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="form">
<label for="pincode">Pincode:</label>
<input type="text" name="pincode" id="pincode" required /><br />

<label for="taluka">Taluka:</label>
<input type="text" name="taluka" id="taluka" /><br />
<label for="district">District: </label>
<input type="text" name="district" id="district"><br />
<label for="state">State:</label>
<input type="text" name="state" id="state"><br />
</div>
<script>
$(document).ready(function() {
$('#pincode').keyup(function(e) {
var pincode = $(this).val();

if(pincode.length == 6 && $.isNumeric(pincode)) {
var req = 'retrive.php?pincode=' + pincode;
$.getJSON(req, null, function(data) {
                 
$('#taluka').val(data.taluka);
$('#district').val(data.district);
$('#state').val(data.state);
});
};
});
</script>
</body>
</html>

Some explanation goes here.
The .keyup() event fires when a key is pressed in that field. We could have use onFocus() or onBlur() in javascript but that only fires when a field is focused or blurred, so this is much better. Since we have pincodes of length 6 digits here in India, to prevent script from querying for the first five digits, we have added a if(pincode.length == 6) to our code.

As I said, the even fires as soon as one enters the 6th digit and populates the remaining three fields with the data it retrieves.

It is hard to show it in a still image, but having just entered the pin, rest of the fields get populated.

Finally

So this was it. I hope you enjoyed it. Any corrections or suggesting, mail them to me or just comment down below. Thank you for reading.

Creating an autocomplete field | Setting up the backend | Part 1

Hello folks, so my exams are over and its time to roll. LOL pretty excited here. I am creating this series of two articles in which we will download all the pincodes (or zipcodes), add them to a MySQL database, write an API in PHP to retrieve the data in JSON, and finally we will write our form, in which, when we enter a pincode, we automatically get the ‘taluka’, ‘district’ and ‘state’ fields filled. So lets begin.
(and if you are from outside India, a ‘taluka‘ is a small region, like a city)

Step 1 – Getting the Pincode list

This was my biggest concern. Where do I get a list of all the pincodes in India. I could write a script and iterate through all the possible pincodes from 100000 to 999999, but, of course, there had to be a better way (and by the way, I would have got banned by the site if I sent around a million requests in a short period of time).
Fortunately, after some googling, I found a list here, at data.gov.in, to directly download the list, click here. The data is in .csv format, which is essentially a text document with some proper ordering (LOL).

Step 2 – Setting up MySQL database

We will now add the values to a database with will serve as our source to retrieve data in the form. I am selecting MySQL because, well, that is the only SQL I currently know (wink!). I assume you know the basics of how to create a database, and even if you don’t, you can do it easily by using the  phpmyadmin. It is graphical, and will get the work done.

The columns available for inserting data are:
officename,pincode,officeType,Deliverystatus,divisionname,regionname,circlename,Taluk,Districtname,statename

I will be using only ‘pincode’, ‘Taluk’, ‘Districtname’, ‘Statename’ here to avoid any unnecessary cluttering.

Create a database: ‘turnouts’
Create a table: ‘pincode’
Create 4 columns: ‘pincode’, ‘taluka’, ‘district’, ‘state’
Needless to say, these are just names and you can have what you want, but just don’t go insane over them. This is how it should look, or similar.
Having done that, move to step 3.

Step 3 – Writing the PHP script to enumerate database

So now we need to fill those database fields with data. If you take a look, the .csv file that we downloaded has around 152,000 lines. We can insert them manually, but that would take two and a half month, so we are better off writing a script. Language is on you. Python would work, but I preferred PHP, no good reason, I just choose it.
Basically we read a line in the file, select the data that we are concerned about, generate a MySQL query dynamically in a loop, and execute the query. Then move to the next line till feof or end of file.
Here is the php code.
<?php
$file = fopen("pincodes.csv", "r") or die("Open file");
$server = "localhost";
$username = "root";
$password = "password";
$db = "turnouts";
$conn = mysql_connect($server, $username, $password);
mysql_select_db("turnouts") or die();
if(!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
while(!feof($file)) {
$line = fgets($file);
$words = explode(",", $line);
$pincode = $words[1];
$taluka = $words[7];
$district = $words[8];
$state = $words[9];
$sql = "INSERT INTO pincode (pincode, taluka, district, state) VALUES ('$pincode', '$taluka', '$district', '$state')";
mysql_query($sql, $conn);
mysql_error($conn);
}
fclose($file);
mysql_close($conn);
?>

This code will take some time to execute. On my low end box, it took 90 minutes approx. After having executed, you should have a database with some real data. Here’s the row count, a whooping 154,797.

Now that we have our database setup, we are all set to write the front end. To make it easy to follow, I will write it in the second part of this series.

Edit: Here is the Part 2 Enjoy!

Simple group messenger/chat in Python

Aaaaannd here is another post of mine on sockets, client/server models and stuff. I suppose you have started to get bored by the same stuff everyday right? Seems like I just can’t get enough of this thing. But trust me, I had no intention of doing this today, a friend of mine instigated me write a messenger for a project we were working on, and it turned out, writing this simple messaging program was more interesting than I thought.

So, instead of creating a straight forward chat program that was ‘actually’ required by my friend, I created this ‘one-server-multiple-clients’ program, which is more like the real world chat apps we use everyday.

To run the program, execute the ‘server.py’ (after changing the bind() address to the address of the server on which it is supposed to run). Then, execute the ‘client.py’ (guess what? same thing here. But you will have to add the server address in the connect() function here). Of course, you can have all of them running on the same system, but there ain’t any fun in it, right?

Last but not the least, I have commented as much as I could, unlike my last article, so I expect everyone reading this, with a bit of programming knowledge, will understand this straight forward code.

server.py

# Import the necessary libraries
import socket
import sys
import select
# Take message from an host and send it to all others
def shout(sock, message):
  for socket in LIST:
    try:
      # Don't send it back to server and yourself!
      if socket != serv and socket != sock:
        socket.send(message)
    except:
      # Assume client has got disconnected and remove it.
      socket.close
      LIST.remove(socket)
# Declare variables required later.
# To store list of sockets of clients as well as server itself.
LIST = []
# Common buffer for all purposes
buff = 1024
# Declaration of Server socket.
serv = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
serv.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
serv.bind(("192.168.1.10", 1356))
# Listen for upto 6 clients. Increase if you need more.
serv.listen(6)
# Add server socket to the LIST
LIST.append(serv)
while 1:
  # Moniter clients all simultaneously
  reads, writes, err = select.select(LIST, [], [])
  for sock in reads:
    # A new client connected?
    if sock == serv:
      sockfd, addr = serv.accept()
      LIST.append(sockfd)
    # Naah, just a new message!
    else:
      try:
        # Get his shitty message.
        data = sock.recv(buff)
        if data:
          # If he wrote something, send it to shout() function for broadcast.
          shout(sock, data)
      except:
        # Shit just got real. Client kicked by server :3
        sock.close()
        LIST.remove(sock)
        # Do this till the end of time.
        continue
serv.close()

client.py

# Import the nessary libraries
import socket
import string
import select
import sys

# Socket variable declaration
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.settimeout(2)

# Connect to server. Change this for remote servers.
s.connect(("192.168.1.10", 1356))

# A prompt asking client to enter something.
sys.stdout.write(">")
sys.stdout.flush()

while 1:
  # These are the possible events.
  # sys.stdin --> Client has typed something through keyboard.
  # s --> Server has send a new message by some other client you.
  streams = [sys.stdin, s]

  # Moniter both the streams simultaneously for inputs.
  readable, writable, err = select.select(streams, [], [])

  # If server has sent something, readable will fill up.
  for sock in readable:
    if sock == s:

      # Receive data in our variable. Check if it is empty.
      data = sock.recv(1024)
      if not data:
        sys.exit()
      else:

        # Write data to stdout and give client prompt back.
        sys.stdout.write(data)
        sys.stdout.write(">")
        sys.stdout.flush()

    # No, its not the server. Our client has typed something in.
    else:

      # Read message. Send it to server. Give prompt back to client.
      msg = sys.stdin.readline()
      s.send(msg)
      sys.stdout.write(">")
      sys.stdout.flush()

So that was the code. Here is a glimpse of the output. The server is running off my ‘raspberrypi’ and all clients are running on my computer. Looks cool right?

If you look closely, one of the clients missed a message sent by another client, LOL, so that is normal. Any suggestions or edits or corrections, drop them in the comments below. 🙂

Python vs C – How simple is it to write a pair of communicating sockets?

Lately I have been reading a lot of articles online written to compare Python to other languages. It is not a secret to anyone that the Python community is growing, and along with it, is the number of people who promote/recommend this language, of course.

Let me not add up to the already large mass of those articles by boasting about Python’s usability, speed and practicality, but rather, I will compare the two languages by writing a small socket client/server pair in each of those languages.

But first, let me give you some of my personal opinions about both the languages since I know them well enough. C is very dear to me, not only because it was the first language I had ever learnt, but also because it runs most of the GNU, and GNU is well, very dear to me! C also happens to be my only second language of choice, after Python (although I know bits of Java, I prefer not to use it, not sure why, but I hate it). I have been programming in Python only from the last couple of months and I was really impressed. I solve HackerEarth and CodeChef problems as a pass time. Although I could do all of the problems I have done in C, doing them in Python took like 1/10th of the time (literally!) and 1/10th the typing effort. I would admit, C is much more fun to write than Python, simply because you ‘feel’ the code is yours, and I love to code C whenever I am free, will I use it in an environment where time is the priority? Probably not. Maybe when C is the only way out, but most of the time, I am better off writing it in Python.

That being said, the popularity of C doesn’t get any less, and it is going to stay that way as long as, maybe the Internet. Here’s something I found.

https://www.tiobe.com/index.php/content/paperinfo/tpci/index.html
You see the thing on top there? Yes, it is there for a reason. To make it short, C is powerful, very powerful. C gives you access to things you can not really imagine in other languages. On the other hand, Python is practical, flexible, and easy to learn. Web apps, sockets, Raspberry Pi, Arduino, Android or anything else you can imagine, there has to be a library made for it by someone, somewhere.

The code part.

I am giving the client and server code in both the languages here as is. No explanation and stuff, because that’s not the topic here. Note that all the source codes are tested running OK on Kali 1.0.6, gcc and all stock stuff, so it should be not much trouble to get it running. Windows guy, search for gcc directory and run it over the command prompt. It won’t run from any IDE.

Python

Writing a pair of communicating TCP sockets require around 30 minutes along with the understanding part, if you have got some background in networking. Python does most of the stuff for you, and you just create a socket variable, supply host and port and that’s it. Rest is left to your imagination (or not, I got too carried away!). Here comes the code:
client.py

import socket
s = socket.socket()
host = socket.gethostname()
port = 1356 
s.connect((host, port))
shit = s.recv(1024)
print shit
s.close()
server.py

s = socket.socket()
host = socket.gethostname()
s.bind((host, 1356))
s.listen(5)
while True:
    c, addr = s.accept()
    c.send("Message from server")
    c.close()

And that is it. Even if it looks lame (which it is), it is the maybe the simplest thing that qualifies to be called a server/client.

C

Now lets write the same in C. This is around 4 times the size of Python code, and much of the stuff are done by hand (nothing new for C, I suppose). This code is the shortest I could cut it to, and just does one simple task. Sends the “Client talking loud!\n” message to server over port 1356 on localhost. The parameters can be edited as per convenience to suit any inter network testing, but that’s the most this code will do. Nevertheless, this is a TCP client/server model.
client.c

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <sys/types.h>
#include <sys/socket.h>
#include <netinet/in.h>
#include <netdb.h>
#include <unistd.h>

int main(int argc, char **argv) {
int sock, port, n;
struct sockaddr_in serv_addr;
struct hostent *server;
char buffer[256];
port = atoi("1356");
sock = socket(AF_INET, SOCK_STREAM, 0);
server = gethostbyname("127.0.0.1");
bzero((char *)&serv_addr, sizeof(serv_addr));
serv_addr.sin_family = AF_INET;
bcopy((char *)server->h_addr, (char *)&serv_addr.sin_addr.s_addr, server->h_length);
serv_addr.sin_port = htons(port);
connect(sock, (struct sockaddr *)&serv_addr, sizeof(serv_addr));
bzero(buffer, 256);
strcpy(buffer, "Client talking loud!\n");
write(sock, buffer, strlen(buffer));
close(sock);
}

server.c

#include <stdio.h> 
#include <strings.h>
#include <stdlib.h>
#include <sys/types.h>
#include <sys/socket.h>
#include <netinet/in.h>


int main(int argc, char **argv) {
int sock, nsock, port;
socklen_t clilen;
char buffer[256];
struct sockaddr_in serv_addr, cli_addr;
sock = socket(AF_INET, SOCK_STREAM, 0);
bzero((char*)&serv_addr, sizeof(serv_addr));
port = atoi("1356");
serv_addr.sin_family = AF_INET;
serv_addr.sin_addr.s_addr = INADDR_ANY;
serv_addr.sin_port = htons(port);
bind(sock, (struct sockaddr *)&serv_addr, sizeof(serv_addr));
listen(sock, 2);
clilen = sizeof(cli_addr);
nsock = accept(sock, (struct sockaddr *)&cli_addr, &clilen);
bzero(buffer, 256);
read(nsock, buffer, 255);
printf("%s\n", buffer);
close(sock);
close(nsock);
}

Here is the expected output:

Sorry, there is no commenting in the above code, and it really needs some explanation. I would’ve written them, but then, the code would have grown three folds (LOL)! It will need another nice article to explain all the stuff from that client.c and server.c code. I will conclude here. Thank you for reading 🙂

Update: If you happen to run any of the above code, make sure you run server first!

Top reasons why you should start using Mozilla Firefox right now

If you have visited my blog a couple of times, it must be clear to you by now that I am a Mozillian. I love their way and goals and in this world dominated by corporate giants, they are like a candle in the darkness. I promote Mozilla everywhere, at college and in my friends’ circle. See that little banner at the right hand bottom corner, yes, its an affiliate banner from Mozilla, the only affiliated thing on my blog.

I am sure most of you have heard or even used Firefox, the browser by Mozilla Foundation. The 1.0 version was released just more than 10 years from now (In fact, they just celebrated their 10th birthday) and they are getting better with each release.

But then, you might ask, why do you have to care about all this? All you wanted to do was browse websites. That’s it. Why care about the company which creates it and all those mess. Why try to be a hero by downloading another browser, when it is just a piece of software, right? No. Not so much. Talking, not from the point of view of a Mozillian, but someone who stopped using IE and Chrome way back and has been using Firefox on all his devices from atleast 3 years, I will try to focus on the most significant reasons to drop your existing browser and start with Firefox.

Add-ons

Does anybody remembers that there was a time when people used to use browsers just for the sake of browsing, and nothing else was even expected from a browser. That all changed with Firefox. You had this thing called add-on and plugins that can be easily downloaded to do little tasks to make your browsing experience better. They have one for all your needs (or most of them, if you question that!) plus you get to install third party add-ons too.

To be honest, Chrome has a market place of their own. Their add-ons (or extensions, as they are called) are generally considered more secure than their Firefox counterparts. Also, Chrome has more extensions than Firefox. But then, no third-party installs, sandboxing makes them so. In turn you don’t get powerful add-ons in Chrome, for example No-Script and AdBlock. In short, Firefox’s add-ons are much more capable to do a particular task, than any of its competitors’.

Customization

Most of the browsers available right now are too closed to get any close to Firefox in terms of customization. Chrome looks clean and feels fast and responsive. Opera is great too, but you don’t get stuff like about:config in any browser. With some days of experience, you can literally make the browser work for you. Everything’s under your control. It feels good to have control, trust me.

If core customization was not enough for you, then themes will do the rest. Free and open, feel free to give the browser your own look and feel. Don’t like an icon at a place? Move it. No, seriously move that icon to a place you are comfortable with.

Every installation of Firefox is different, users make it. Each one is using his or her version of Firefox.

NPAPI Depreciated? We use Firefox

NPAPI is the interface developers use to develop plugins for our browsers (the Java, Flash and Adobe Reader types) and Google has decided to remove them completely, unless it approved by Google. Now why should you care about this? Yeah, actually you should not. You will still be able to watch Youtube videos and read ebooks online, but it would be like, someone giving you all the comforts of life, at the cost of your individual freedom and preference. Are you okay with it? I’m not. Thank you.

Privacy

Now who won’t agree. Companies have started to revise their privacy policies to match their personal gains. Almost all the browsers collect information about the sites you visit, sell them to other corporates to give you targeted ads. No, I’m not saying this. It’s written there, right in their privacy policy. Now-a-days most of the popular browser have a DO NOT TRACK feature to prevent sites to give you your ‘tailored ads’. No one likes random sites, that you are visiting for the first time, know as much about you as, say your mail provider knows. Not me atleast. An important thing to know here is that Google Chrome has still NOT implemented the DO NOT TRACK policy, as of the time of writing this article. So now you know it is time to switch, right?

Sync

So, it is really convenient to have all our bookmarks and stuff from our mobiles to computer and vice versa. Firefox now makes it possible, securely. For power users, who work on the web all day, this comes as a great addon. Although some other browsers have had this feature before Firefox, we know well whom to trust with our information, looking at their individual policies.

Security

Out of the box, maybe Firefox is just second in security to Chrome, thanks to Chrome’s sandboxing techniques that Firefox has not implemented yet. That said, a little customization with use of proper addons (No Scripts and Adblock, mentioned earlier make a good example here), can make Firefox way more secure than Chrome, let alone other browsers.

Speed

Apparently Firefox appears to be a bit sluggish, especially on Windows. But here is a thing I noticed. That speed is constant, regardless of the number of tabs you have open. Compared to this, I have used other browsers that seem faster and more responsive at first, but just cannot take the load of heavy use (like I have my Iceweasel running for about 15hours at a stretch, with an average of 10 tabs open at all the times, and it runs flawlessly. Crash? Yes, sometimes, but I certainly get my session back each and every single time). Next time some friend of yours shows you the quickness of any browser, ask him to try the same with 15 tabs of heavy multimedia filled sites open and see how they perform (and yes, horizontal tab scrolling! Tabs on Firefox don’t shrink in size as you add them ;).

Final words

You see, I tried my best to keep this article going into another ‘Firefox vs Chrome’ battle, but it slowly slipped into it. The reason being the competition between these two browser. Technically, Internet Explorer comes in second most widely used browser, but had Microsoft not shipped it (forcefully!) with every MS operating system, I doubt the fact had been the same. Chrome is taking the lead, head on, and others are falling back. I got no personal problem with it, of course, but I hate monoculture. There was a time when 95% browser share was of IE, and Mozilla brought us out of it, made us see the web the way it was meant to be, not the way some corporations wanted us to see. I will promote Mozilla till they stand with what they say, ‘power in the hands of user’ and I will promote them or anyone else who stands up to make the web better, give power to the individual users who actually run the web and let them take control of what they want the world to see, and what not.

Although the title suggests that this was an article about ‘Mozilla Firefox’ as a browser, it clearly isn’t limited to it. It looks at a much bigger picture of the web. Tell me, what you feel about it, even if you are cool with handing over your data to companies. I would really like to know.