Deploying Python Flask on Apache using mod_wsgi

Follow this link or the  below link to get your python flask app working on apache!

Deploying Python Flask on Apache using mod_wsgi

Advertisements

ConsoleBitly – A thin wrapper around the bit.ly

bit.ly, the web service that offers shortening of long URL’s was something that I was quiet frequently using all the, because it was easy for me to remember some of the long URL’s. So I often used to visit their service, paste in my long URL and get a short URL. So, I just thought of checking out their API methods because I was really bored of visiting their website every time and their API documentation was in fact helpful to me. The API did not just only include shortening of URL’s, but also expanding them, looking up for a bit.ly URL associated for a specific URL and much more.  And, hence I decided to write a class that would wrap around most of the useful methods of the bit.ly API.

I am a beginner to the Python programming language, and I am just loving every bit of Python. So, I decided to write the class in Python, that would display me the results in my Linux terminal.

The below link, consists of all the necessary documentation of using this API.

https://github.com/swaroopsm/Console-Bitly

Display JSON data using jquery/ajax

JSON –  Javascript Object Notation, is one of the beautiful techniques for parsing data. It’s beautiful primarily because it is light weight!

Here, I’m going to demonstrate how to display JSON data using ajax and jquery.

Let’s read some sample json data that is available in a file called json.test.js


[
 {
 "LinuxID":"1","LinuxDist":"Debian","Company":"Debian Project"<br>
 },
 {
 "LinuxID":"2","LinuxDist":"Ubuntu","Company":"Canonical Ltd."<br>
 },
 {
 "LinuxID":"3","LinuxDist":"Fedora","Company":"Fedora Project"<br>
 }
]

Now let’s write the html and javascript to display these results:

We call this file called displayjson.html:

<!DOCTYPE html>
<html>
<head>
<title>Display JSON data</title>
</head>
<body>
<div id="results"></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post("json.test.js",
function(data){
var obj=jQuery.parseJSON(data);
for(var i=0;i<obj.length;i++){
$("#results").append("Linux ID: "+obj[i].LinuxID).hide().fadeIn(500);
$("#results").append("<br>Linux Distribution: "+obj[i].LinuxDist).hide().fadeIn(500);
$("#results").append("<br>Company: "+obj[i].Company).hide().fadeIn(500);
$("#results").append("<br><hr>").hide().fadeIn(500);
}
});
});
</script>
</html>

 

Check out examples at Fun with JSON.
That’s it folks, enjoy!

Web Design made easy – Twitter Bootstrap

Do you really think you are bad at web design, but excellent working with the backend and have sound knowledge web development? Do you always search and spend most of your time designing a web page layout or browse for web templates? Well not to worry! Twitter has introduced Bootstrap that is a css file with excellent styling and layouts where in you can modify the code and ou are free to use. It also includes essential javascripts like popup boxes, tool tips etc that you often use in your website.

You are free to use bootsrap and modify the source.

Image

This is available at http://twitter.com/bootstrap

You can also pull my project code from my github repository designed in twitter bootstrap. You can get it from https://github.com/swaroopsm/cellbay/

Installing LAMP on ubuntu

LAMP – Linux Apache Mysql Php

If you are thinking of web development and you are a free and open source software lover, then LAMP is the ideal tool for you in developing high-ended dynamic web applications…

Here, i’ll show you how to install LAMP on a Linux system that is running the Ubuntu flavor OS…..

So let’s get started…….

  • Install Apache 

We install Apache first – which is the web server.

Open the terminal by: ctrl+alt+t and copy, paste the following command in your terminal:

sudo apt-get install apache2

Enter the password to grant administrative privileges and press enter….

In order to test whether apache is running or not open your web browser and type:

http://localhost/

You will see a default folder, open it and you’ll see the message: It Works!  Continue reading

Creating a simple web page for smart phones using jquery mobile

Android, iPhone, blackberry etc…, these are the things that you often hear when some speaks about phones.. And moreover you spend more time browsing for mails and accessing some web applications on your mobile phones rather than your PC’s… Also as a web developer/designer you always keep the cross-browser constraint in your mind… And when it comes to accessing web applications on your mobile devices it’s a much more pain.. You always think of having something that is more light-weight and is both cross-platform and cross-device…
Well with jquery mobile framework, these constraints are resolved…

jquery mobile is a framework that provides a rich user interface for all popular mobile device platforms and most of all, it is light-weight and flexible.. it also has a rich set of widgets and styling that are easily made available for users… All you have to do is to include the jquery mobile library and a set of stylesheets are available at http://jquerymobile.com/download/… Alternatively you can also specify.,

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</pre>
So that’s what you are required to include in your webpage…. Now let’s get started by creating a simple ui webpage…

Since jquery mobile is an HTML-5 based user interface, much of the traits are derived from HTML-5…

Consider Mr. Swaroop would like to have a small web app on his phone which shows him a summary of his To-Do lists and some of his weekend plans and he wants it in the following format….

Let’s design this using our jquery mobile now….  Continue reading

Insert data into MySQL using php, jquery, Ajax

This is a simple example for inserting data into a mysql database using php as the server-sided programming language.. This uses ajax via jquery for inserting the records… For those of you who do not know what jquery is – jquery is a javascript library with a lot of functions which lets u write less code, which is highly efficient .. You can download this latest version at the jquery.com website… So let’s get started…

  • Construct Database:
We Create a Database called zwaroop. Add a new table myTable with fields: ID as INT, Name as VARCHAR(50),    Email as VARCHAR(50).
For those who are using LAMP, WAMP, XAMPP etc.. this is straight forward… Go ahead to your web browser and navigate to http://localhost/phpmyadmin, which is a GUI that allows you to construct your database as quickly as possible.

So far we have.,

Database Name: zwaroop

Table Name: myTable

Field Names: ID, Name, Email

  • Create home.php file
This is our basic html page that the user will be viewing it…
<html>
<head>
<title>zwaroop's home</title></pre>
<!-- include jquery library file-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<label>ID: </label> <input id="ID" type="text" />
<label>Name: </label> <input id="Name" type="text" />
<label>E-Mail: </label> <input id="Email" type="text" />
<a id="insert" title="Insert Data" href="#">Push into mysql</a>
 <!-- For displaying a message -->

<div id="message"></div>
</body>
</html>
  • Create insert.php file:
Create a page called insert.php, this page include all the server-sided code for inserting data into our mysql database. Assume our front-end html page consists of 3 input boxes that takes the ID, Name and Email… So here we go,