random Bytes: Exercises

Showing posts with label Exercises. Show all posts

Saturday, 22 October 2011

AJAX & Web.py : how to load a data from a server by using jQuery.get() method.

We have already discussed some basic ideas about ajax and web.py in the previous post ,so now we are going to discuss some more functions that you can perform with ajax.

The Jquery.get() method is used to perform AJAX HTTP GET request.This is an easy way to send a simple GET request to a server.It allows a single callback function to be specified,that will be executed when the request is completed.

Syntax : jQuery.get ( url , [data] , [callback] , [type] )

url : The corresponding URL to load.
data : key/value pair that will be send to the sever (*optional).
callback : (Function) A function to be executed whenever the data is loaded successfully (*optional).
type : Type of data to be returned to callback function "xml","html","script","json" etc (*optional).

Now lets look at the working of JQuery.get() method here with the help of an example.

Qn: create a web.py URL that should return a random number between 1 & 1000,and create another URL it should display a text box and a button,when you hit the button,random numbers should be displayed inside the text box.

Before we are going to start You have to create a directory named static in the same folder where you are going to create this application.The HTML template will put in this directory.
First of all you all know that you have to map the URL's to the corresponding classes,here the root URL will map to 'rand_num' class and the second URL ('/random') will map to the 'return_num' class.

If we are using any HTML templates you have to define it by using the line 'render=web.template.render('template/'),then only it can fetch the code from the template directory,that why we already created a directory called template.

our web.py program displayed below.

program name : random.py

import web
import random

urls = (
    '/', 'rand_num',
    '/random','return_num')

app = web.application(urls, globals(), True)
render = web.template.render('templates/')


class rand_num:
    def GET(self):
      return render.random()

class return_num:
    def GET(self):
      return  random.randint(1,1000)

if __name__ == "__main__":
    app.run()

Then we have to define the class('/rand_num') for the root URL. the root URL should have to display a text box and a button,so that you have to call the corresponding HTML template ,here the method render.random() will returns a rendering of the HTML template 'random'.you have to specify the exact name of the html template that located in the templates directory here to fetch it from the directory when the code runs.

After that we have to define the class ('return_num') for the random number generation i.e when the browser get form this URL,it should return a random number between 1 - 1000 .We have a module in python called random ,by importing this module we can call random.randint() method to get random numbers between certain ranges,here we can use random.randint(1,1000) to get the random numbers between 1-1000.

Now lets look at the html template 'random.html' located in the templates directory.

<html>
        <head>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
        
        <script type="text/javascript">
        jQuery(document).ready(function(){
        jQuery("button").click(function(){
          jQuery.get("/random",function(result){
             jQuery("#text1").val(result);
          });
        });});
        </script>
        </head>

        <body>

        <input type = "text" id = "text1" />

        <h2>Hit the button to view random numbers</h2>

        <button>Click</button>

        </body>
</html>

Here the url ("/random") specified in the jQuery.get() method specifies the corresponding url to load.and then the callback function specified here will execute when the data is loaded successfully.

Here when we press the button the jQuery.get() method will invoke and it will load the url "/random'.we have already defined the "return_num" class for the "/random" url that ,it returns only a random number between 1-1000.So when the data i.e (random number) is loaded successfully,then the callback function will execute and variable name "result" will contain the returned value.Then finally we just displayed it inside the text box.

Tuesday, 26 July 2011

AJAX & web.py : some quick reference

This post will give you some basic ideas about how to use AJAX with web.py.

You all know that web.py is a simple web framework for python,the main thing i liked about web.py is that it is very simple to use and more effective too.web.py frame work can run its own basic web server .

About AJAX(Asynchronous Java script and XML) you all know that it is very helpful to create interactive web applications.With Ajax, web applications can send data to, and retrieve data from, a server asynchronously , i.e you can updates the parts of web page without reloading the whole page.

So here i would like to describe some examples that we can experiment with AJAX & web.py.

The Ajax application that we are going to discuss here contain one "div" section and a button. The "div" section will be used to display the contents return form the server.

<html>
<body>
          
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

</body>
</html>

With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.And you can load remote data directly into selected HTML elements of your web page!

Next, add a <script> tag to the page's head section. The script section contains the AJAX load function.The jQuery load() method is a simple AJAX function. It has the following syntax:

$(selector).load(url,data,callback)

Next we are adding the <script> tag under <head> section,This section contains jQuery load method.

<head>
      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery 1.4.2.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        $("button").click(function(){
           $("div").load("http://127.0.0.1:8080/static/test.txt");    
        });
      });
      </script>
 </head>

Here the load function will load desired contents from the specified URL.(What this URL actually functions is described in the below section,you will get exact picture after you read the whole thing)

Next we are going to implement this code with web.py.

Before we move on to web.py,We have to create a folder named "static" in the same folder that your program resides,and put your text file (here the file is "test.txt" ) inside the "static" folder.Then check that you are able to access the file by typing the URL (" http://127.0.0.1:8080/static/test.txt ") in your browser search bar.If the browser displays the contents properly then you can implement this on aJax load function.

The whole program described below.

Program name -- Code.py

import web

  urls = (
    '/', 'main')


  app = web.application(urls, globals(),True)


  class main:
      def GET(self):
          return'''
          <html>
          <head>
          <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
          <script type="text/javascript">
          $(document).ready(function(){
            $("button").click(function(){
              $("div").load("http://127.0.0.1:8080/static/test.txt");
            });
          });

          </script>
          </head>
          <body>
            
          <div><h2>Let AJAX change this text</h2></div>
          <button>Change Content</button>

          </body>
          </html>'''


  if __name__ == "__main__":
      app.run()

How to run the program:

Web.py comes with a built-in web server that you all know. We have created our program file called " code.py ",just save the file and run the following command in terminal to start your application.

sreehari@sreehari-desktop:~/web.py$ python code.py
  http://0.0.0.0:8080/

Then goto your browser and type " http://127.0.0.1:8080/ " in your search bar , you will get a web page with a text " Let AJAX change this text " and it also contains a button,when you hit the button the text will change and new text from the text file will be loaded and displayed in your browser.

Monday, 18 July 2011

A simple exercise in web.py

This is just a simple exercise that will help you to understand the basics of web.py.

Qn: Create a webpage that should contain a text box,so that you can input your names,the page should also provide a submit button to submit the details that you entered in a text box.when you submit it the names should be saved in a text file and whole the names that we entered should be displayed in another URL.

1st step: Import the module Web.py,to use the tools provided by web.py. Map the first URL (" / ") to a class named "main".and map the second URL ("/Details") to a class named "details".

import web

  urls = (
    '/','main',
    '/Details','details')

  app = web.application(urls, globals(), True)

2nd step: Next we have to define the class named "main".The function GET() is actually displays the content in your browser when you opens a webpage.When you opens the first page it should displays a form,so thats why ,we are writing the HTML code to create a form under GET() function.Here we are specifying the method attribute of form as POST to invoke the POST request .

class main:
    def GET(self):
    return'''
    <html>
    <head>
    <title>web.py</title>
    </head>

    <body>

    <h1>A simple exercise in web.py</h1>

    <form name="form" method = "POST">

    Name: <input type="text" name="user"/>

    <input type="submit" value="Submit" />

    </form>
    </body>
    </html>'''

3rd step: The GET() function that we introduced above will only serve the pages ,but here we have to update the values to another webpage.Thats why we are using a POST function.The line "form = web.input()" creates a storage objects that contains all variables passed into it.Then we open a file named "file.txt" in append mode,then write the input values into the file by using " f.write(form.user) ". Then Web.redirect('/Details') will redirect the user to a new URL(" /Details ") ,i.e when we submit the form it will guide you to the next page that contain all the details that you entered before.

def POST(self):

   form =  web.input()
   f=open("file.txt",'a')
   f.write(form.user)
   f.write("\n")
   f.close()

   raise web.redirect('/Details')

4th step: We have to define the class for the URL("/Define").Here we are using GET() function to display the contents.so to displays the contents in the text file we just simply opens the file in read mode.and then read the values by using "f.read()" function and then assigned it to a variable named data,when we return the variable it will displays all the values that we read from the text file in the next URL.

class details:

  def GET(self):

    f=open("file.txt",'r')
    data=f.read()
    return data
    f.close()

Complete code:

Program name: Code.py

import web

urls = (
  '/','main',
  '/Details','details')

app = web.application(urls, globals(), True)

class main:
   def GET(self):
    return'''
    <html>
    <head>
    <title>web.py</title>
    </head>

    <body>

    <h1>A simple exercise in web.py</h1>

    <form name="form" method = "POST">

    Name: <input type="text" name="user"/>

    <input type="submit" value="Submit" />

    </form>
    </body>
    </html>'''

    def POST(self):
 
      form =  web.input()
      f=open("file.txt",'a')
      f.write(form.user)
      f.write("\n")
      f.close()

    
      raise web.redirect('/Details')
    
class details:
    
    def GET(self):

      f=open("file.txt",'r')
      data=f.read()
      return data
      f.close()

if __name__ == "__main__":
    app.run()

Pages