Kuwait University

Information Technology Solutions

College of Computing Sciences and Engineering
Department of Information Science

Lab Manual

ISC 440 (Web Programming 2)

Prepared by: Eng. Altaf Alfarhan

December 2015
 CONTENTS

Laboratory Hardware, Software / Tools Requirements ...........................................................................................3

Laboratory Schedule ...................................................................................................................................................4

Laboratory Policy ........................................................................................................................................................5

Lab Evaluation............................................................................................................................................................. 6

Laboratory # 1 HTML5 Canvas (Part 1) ...................................................................................................................7

Laboratory # 2 HTML5 Canvas (Part 2) ................................................................................................................. 10

Laboratory # 3 HTML5 Canvas (Part 3) ................................................................................................................. 12

Laboratory # 4 Introduction to PHP ...................................................................................................................... 14

Laboratory # 5 PHP Forms and Files Management ............................................................................................ 16

Laboratory # 6 PHP Sessions and MySQL Database Management ...................................................................... 20

Laboratory # 7 Ajax-Enabled Rich Applications with PHP and mySQL ............................................................ 24

Laboratory # 8 PHP User Management System ..................................................................................................... 29

Laboratory # 9 JavaScript Object Notation (JSON) .............................................................................................. 33

Laboratory # 10 HOW to Create an Application Using Flickr API ...................................................................... 37

Appendix “A” .............................................................................................................................................................. 43

Rules to fallow by Computer Lab Users................................................................................................................... 43

Appendix “B” .............................................................................................................................................................. 44

Certification......................................................................................................................................................................... 44
Kuwait University College of Computing Sciences & Engineering

LABORATORY HARDWARE, SOFTWARE / TOOLS

REQUIREMENTS

 NetBeans IDE
 WampServer

3|Page
Kuwait University College of Computing Sciences & Engineering

LABORATORY SCHEDULE

# Lab Title Lab activity

1 HTML5 Canvas (Part 1)
2 HTML5 Canvas (Part 2)
3 HTML5 Canvas (Part 3)
4 PHP Introduction Quiz 1
5 PHP Forms and Files Management
6 PHP Sessions and Databases
7 Ajax-Enabled Rich Applications with PHP and mySQL Quiz 2
8 PHP User Management System
9 JavaScript Object Notation (JSON)
10 How to Create a Web Application using Flickr API Quiz 3

4|Page
Kuwait University College of Computing Sciences & Engineering

LABORATORY POLICY

 Fallow the laboratory rules listed in appendix “A”

 To pass this course, the student must pass the lab-component of the course.
 Cheating in whatever form will result in F grade.
 Attendance will be checked at the beginning of each Lab.
 Absence for three (03) or more unexcused labs will result in a F grade in the Course.
An official excuse must be shown in one week following return to classes.
 Every unexcused absence leads to a loss of 0.5 % marks.
 Cheating in Lab Work or Lab Final Exam will result F grade in Lab.
 Late Submission of Lab Work will not be accepted.
 There will be no make-up for any Quiz/Exam/Lab.
 Hard work and dedication are necessary ingredients for success in this course.

5|Page
Kuwait University College of Computing Sciences & Engineering

LAB EVALUATION

Activity Weight

Lab Work (10) 5%

Lab Quizzes (3) 10%

Lab Final Exam 10%

Total 25%

6|Page
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 1 HTML5 CANVAS (PART 1)

Laboratory Objective:
 To be able to use HTML5 canvas with JavaScript to draw lines, rectangles,
arcs, and circles.
 To be able to use HTML5 canvas with JavaScript to draw gradients and
shadows.

Lab #1 – HTML5 Canvas (Part 1)

1. Laboratory Objective:

 To be able to use HTML5 canvas with JavaScript to draw lines, rectangles, arcs,
and circles.
 To be able to use HTML5 canvas with JavaScript to draw gradients and shadows.

2. Laboratory Learning Outcomes:

 State and apply syntaxes of HTML.
 Practice and use web development tools in order to gain web programming
skills.

3. Laboratory Problem Description

Part A:
Write the required HTML5 and JavaScript code to generate the lines shown
below:

7|Page
Kuwait University College of Computing Sciences & Engineering

Part B:
Write the required HTML5 and JavaScript code to generate the arc shown below:

Part C:
Write the required HTML5 and JavaScript code to generate the circle shown
below:

Part D:
Write the required HTML5 and JavaScript code to generate the rectangles shown
below:

8|Page
Kuwait University College of Computing Sciences & Engineering

Part E:
Write the required HTML5 and JavaScript code to generate the four rectangles
shown below:

You can create a gradient by specifying a color stop with an RGBa() color value
which includes degrees of transparency. The following example draws four
rectangles, each with a gradient going in a different direction, all going from red
to 50% transparent blue.

9|Page
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 2 HTML5 CANVAS (PART 2)

Laboratory Objective:
 To be able to use HTML5 canvas paths to draw custom shapes.
 To be able to use HTML5 canvas to draw text.
 To be able to use HTML5 canvas to rotate, scale, and transform.

Lab #2 – HTML5 Canvas (Part 2)

1. Laboratory Objective:

 To be able to use HTML5 canvas paths to draw custom shapes.

 To be able to use HTML5 canvas to draw text.
 To be able to use HTML5 canvas to rotate, scale, and transform.

2. Laboratory Learning Outcomes:

 State and apply syntaxes of HTML.
 Practice and use web development tools in order to gain web programming
skills.

3. Laboratory Problem Description

Part A: Draw Triangle

Write the required HTML5 and JavaScript code to generate the triangle shown
below:

Part B: Draw Text

Draw your name twice using both fillText and strokeText. Remember that the
first method draws the text shape, filled using the current fillStyle, while the
latter draws the text outline/border using the current strokeStyle. Use a linear
gradient to fill your text. Specify font size and type of your choice.

10 | P a g e
Kuwait University College of Computing Sciences & Engineering

Part C: Canvas Translation

Use the translate(x,y) method to creates two similar squares at (0,0) origin and
(50,50) origin as shown below:

Part D: Canvas Scaling

Write the required HTML5 and JavaScript code to draw a circle. Then double its
size using canvas scaling.

Part E: Canvas Rotation

Write the required HTML5 and JavaScript code to draw a rectangle before and
after 30 degrees rotation as shown below:

11 | P a g e
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 3 HTML5 CANVAS (PART 3)

Laboratory Objective:
 To be able to use HTML5 canvas to draw animations.

Lab #3 – HTML5 Canvas (Part 3)

1. Laboratory Objective:

 To be able to use HTML5 canvas to draw animations.

2. Laboratory Learning Outcomes:

 State and apply syntaxes of HTML.
 Practice and use web development tools in order to gain web programming
skills.

3. Laboratory Problem Description

Create an animation that moves a single rectangle horizontally across the canvas. Here is
a sample output:

12 | P a g e
Kuwait University College of Computing Sciences & Engineering

13 | P a g e
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 4 INTRODUCTION TO PHP

Laboratory Objective:
 To be able to write PHP code to output text on the browser
 To be able to declare PHP variables
 To be able to use PHP functions
 To be able to use PHP arrays
 To able to use PHP control statements and loops

Lab #4 – Introduction to PHP

1. Laboratory Objective:

 To be able to write PHP code to output text on the browser

 To be able to declare PHP variables
 To be able to use PHP functions
 To be able to use PHP arrays
 To able to use PHP control statements and loops

2. Laboratory Learning Outcomes:

 State and apply syntaxes of PHP.
 Practice and use web development tools in order to gain web programming
skills.

3. Laboratory Problem Description

Part A:

In one PHP page do the following:

a) Write your first name repeated five times using a while loop.
b) Write your last name in increasing heading size starting with h1 till h6. Use a
for loop this time.
c) Write a function that sums the values of three numbers.
d) Use control statements to check the season of the year given the month as a

14 | P a g e
Kuwait University College of Computing Sciences & Engineering

number.
 Spring months  3, 4, 5
 Summer months  6, 7, 8
 Autumn months  9, 10, 11
 Winter months  12, 1, 2
e) Create an array of three employee names. Create another array that
associates employee names with their salary values. Print both arrays using
foreach loop.

Part B:

Write PHP code to declare an associative array of six elements that has supermarket
item names associated with their price. Use a function to calculate the total price of all
items purchased. Print the array using foreach loop followed by the total cost of items.

The program should output the following text on the browser screen:

Array ( [cereal] => 5.00 [coffee beans] => 2.50 [bananas] => 3.50 [onion] => 1.00
[lettuce] => 2.40 [tomato] => 1.00 )

Cereal costs $5.00

Coffee beans costs $2.50

Bananas costs $3.50

Onion costs $1.00

Lettuce costs $2.40

The total price of your items is $14.4

15 | P a g e
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 5 PHP FORMS AND FILES MANAGEMENT

Laboratory Objective:
 To able to use PHP to handle and process forms data on the server.
 To understand the difference between get and post methods used when passing
form parameters.
 To be able to use PHP super global variables $_POST and $_GET to collect
forms data.
 To be able to manage file operations in PHP.

Lab #5 – PHP Forms and Files Management

1. Laboratory Objective:

 To able to use PHP to handle and process forms data on the server.
 To understand the difference between get and post methods used when passing form
parameters.
 To be able to use PHP super global variables $_POST and $_GET to collect forms
data.
 To be able to manage file operations in PHP.

2. Laboratory Learning Outcomes:

 State and apply syntaxes of PHP.
 Practice and use web development tools in order to gain web programming
skills.

16 | P a g e
Kuwait University College of Computing Sciences & Engineering

3. Laboratory Problem Description

PART A: Requesting form data with PHP post method:

1. Create an html file with the following form:
<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="handler.php">
<p>What is your name:</p>
<input type="text" name="username"></p>
<p>What is your favorite color:
<input type="radio" name="favoritecolor" value="r" /> Red
<input type="radio" name="favoritecolor" value="g" /> Green
<input type="radio" name="favoritecolor" value="b" /> Blue
</p>
<input type="submit" value="Submit" />
</form>

</body>
</html>

2. Write PHP code to change the background color of the page and display a
welcome message including the given name submitted in the html form.

<?php

$strUsername = $_POST["username"];

if ($strUsername != "") {
$strHeading = "<h1>Hello " . $_POST["username"] . "</h1>";
}
else {
$strHeading = "<h1>Hello stranger!</h1> ";
}

switch ($_POST["favoritecolor"]) {
case "r":
$strBackgroundColor = "rgb(255,0,0)";
break;
case "g";

17 | P a g e
Kuwait University College of Computing Sciences & Engineering

$strBackgroundColor = "rgb(0,255,0)";
break;
case "b":
$strBackgroundColor = "rgb(0,0,255)";
break;
default:
$strBackgroundColor = "rgb(255,255,255)";
break;
}

?>

<html>
<head>
<title>Form</title>
</head>
<body style="background: <?php echo $strBackgroundColor; ?>;">
<? echo $strHeading; ?>
</body>
</html>

PART B: Passing variables in a URL with PHP get method:

1. Modify the previous form by changing the method to "get" instead of post and
perform any other necessary changes.
2. Notice the URL of the PHP page and compare with part A.
3. Modify the form by adding a check box group to ask the user about her
favorite courses. Include the following options:
 Visual Basic .NET
 Microsoft Word
 Microsoft Excel
 Web Design
 PHP for beginners
4. Use an associative array to pass the user choices then print the result on the
browser screen.

18 | P a g e
Kuwait University College of Computing Sciences & Engineering

PART C: PHP File Management:

You are required to read the contents of the file studentsInfo.txt line by line
and display it to the browser window. Further, write the file contents back to a new
file call it yourName.txt. Here is part of the code given:

<?PHP

$file_handle = fopen("studentsInfo.txt", "r") or die("File cannot be

opened!");

while (!feof($file_handle)) {

$line_of_text = fgets($file_handle);
print $line_of_text . "<BR>";

fclose($file_handle);

?>

19 | P a g e
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 6 PHP SESSIONS AND MYSQL DATABASE

MANAGEMENT

Laboratory Objective:
 To able to use and set the values of PHP session variables.
 To be able to use and configure PhpMyAdmin to manage mySQL databases.
 To be able to use PHP to connect to mySQL databases and perform basic
database operations.
 To be able to retrieve and display data from mySQL database tables using
PHP.

Lab #6 – PHP Sessions and MySQL Database Management

1. Laboratory Objective:

 To able to use and set the values of PHP session variables.

 To be able to use and configure PhpMyAdmin to manage mySQL databases.
 To be able to use PHP to connect to mySQL databases and perform basic database
operations.
 To be able to retrieve and display data from mySQL database tables using PHP.

2. Laboratory Learning Outcomes:

 State and apply syntaxes of PHP.
 Practice and use web development tools in order to gain web programming
skills.

20 | P a g e
Kuwait University College of Computing Sciences & Engineering

3. Laboratory Problem Description

PART A: PHP Sessions –Illustrated with a simple login system

1. The first thing we need is a form where people can enter their username and
password. It could look like this:
<html>
<head>
<title>Login</title>

</head>
<body>
<form method="post" action="login.php">
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="text" name="password" /></p>
<p><input type="submit" value="Let me in" /></p>

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

2. Then we create the file: login.php. In this file, we check whether it is the correct
username and password that has been entered. If that is the case, we set a session
that says that this user is logged in with the correct username and password.

<html>
<head>
<title>Login</title>
</head>
<body>

<?php

// Check if username and password are correct

if ($_POST["username"] == "php" && $_POST["password"] == "php") {

// If correct, we set the session to YES

session_start();
$_SESSION["Login"] = "YES";
echo "<h1>You are now logged correctly in</h1>";
echo "<p><a href='document.php'>Link to protected file</a><p/>";

}
else {

// If not correct, we set the session to NO

session_start();
$_SESSION["Login"] = "NO";
echo "<h1>You are NOT logged correctly in </h1>";
echo "<p><a href='document.php'>Link to protected file</a></p>";
}
?>

</body>
</html>

21 | P a g e
Kuwait University College of Computing Sciences & Engineering

3. In the protected files, we want to check whether the user is logged in properly. If
this is not the case, the user is sent back to the login form. This is how the
protection is made:
<?php
// Start up your PHP Session

session_start();

// If the user is not logged in send him/her to the login form

if ($_SESSION["Login"] != "YES") {
header("Location: form.php");
}

?>

<html>
<head>
<title>Login</title>
</head>

<body>
<h1>This document is protected</h1>

<p>You can only see it if you are logged in.</p>

</body>
</html>

PART B: Using PhpMyAdmin for mySQL database administration

1. Click on the Wamp Server icon in the notification area of windows task bar. A
short list of relevant commands will appear as follows:

2. Make sure that the Wamp Server is online then click on "phpMyAdmin". It will

22 | P a g e
Kuwait University College of Computing Sciences & Engineering

open a browser window for you showing a screen similar to one below:

3. PhpMyAdmin provides a graphical user interface to manage mySQL database

easily. You can create databases, tables, insert, delete, update data and perform all
sort of relevant database operations.

PART C: Database manipulation using PHP

1. Create people database then create a table to store persons' information.

$con = mysqli_connect("localhost", "root", "");

// Check connection

if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

mysqli_query($con, "CREATE DATABASE people");

mysqli_close($con);

$conn = mysqli_connect("localhost", "root", "", "people");

// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

mysqli_query($conn, "CREATE TABLE MyTable (

id INT AUTO_INCREMENT,
FirstName VARCHAR (255),
LastName VARCHAR (255),
Phone INT,
BirthDate DATE,
PRIMARY KEY(id))");

23 | P a g e
Kuwait University College of Computing Sciences & Engineering

$strSQL = "INSERT INTO people.MyTable(FirstName,LastName,Phone,BirthDate)

VALUES('Gus','Goose','99887766 ','1964-04-20')";

mysqli_query($conn, $strSQL);

mysqli_close($conn);

2. Create a form to insert data into the table then print the contents of the table in
another page.

LABORATORY # 7 AJAX-ENABLED RICH APPLICATIONS

WITH PHP AND MYSQL

24 | P a g e
Kuwait University College of Computing Sciences & Engineering

Laboratory Objective:
 To learn what Ajax is and why it's important for building Rich Internet
Applications.
 To be able to use asynchronous requests to give web applications the feel of
desktop applications.
 To be able to use XMLHttpRequest object to manage asynchronous requests to
servers and to receive asynchronous responses.
 To be able to use Ajax along with PHP to fetch data from MySQL database.

Lab #7 – Ajax-Enabled Rich Applications with PHP and

mySQL

1. Laboratory Objective:

 To learn what Ajax is and why it's important for building Rich Internet Applications.
 To be able to use asynchronous requests to give web applications the feel of desktop
applications.
 To be able to use XMLHttpRequest object to manage asynchronous requests to servers and to
receive asynchronous responses.
 To be able to use Ajax along with PHP to fetch data from MySQL database.

2. Laboratory Learning Outcomes:

 State and apply syntaxes of PHP.
 Practice and use web development tools in order to gain web programming
skills.

3. Laboratory Problem Description

PART A: Introduction to Ajax

Create a text input field, where users may enter any of the words: PHP,
MySQL, SQL, HTML, CSS, HTML5, CSS3, or JSON. Once you start typing the
input field guides you. When finished typing, press enter and press a tab, you may see
some text associated is displayed below. This text is stored in a PHP file. Remember
that all that happens without reloading the page.

25 | P a g e
Kuwait University College of Computing Sciences & Engineering

PART B: Using Ajax with PHP and mySQL database

Create a small Ajax-enabled rich application. The application has an input text
field. When the user types an alphabet in the given input field, a request goes to the
PHP file via Ajax, a query is made to the MySQL table, it returns some results and
then those results are fetched by Ajax and displayed.
Run the SQL script available at BB in phpMyAdmin. This will create the
required database table and inserts data to it.

26 | P a g e
Kuwait University College of Computing Sciences & Engineering

27 | P a g e
Kuwait University College of Computing Sciences & Engineering

28 | P a g e
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 8 PHP USER MANAGEMENT SYSTEM

Laboratory Objective:
 To be able to use PHP, with MySQL database to store user information including
usernames and their encrypted passwords.
 To learn how to use PHP sessions for login and logout operations.
 To use the skills gained from this lab to produce a membership system that suits
your own course project needs.

Lab #8 – PHP User Management System

1. Laboratory Objective:

 To be able to use PHP, with MySQL database to store user information including usernames
and their encrypted passwords.
 To learn how to use PHP sessions for login and logout operations.
 To use the skills gained from this lab to produce a membership system that suits your own
course project needs.

2. Laboratory Learning Outcomes:

 State and apply syntaxes of PHP.
 Practice and use web development tools in order to gain web programming
skills.

3. Laboratory Problem Description

1. Setting up the database

The table that we need will store our user information; for our purposes we will use a simple
table, but it would be easy to store more information in extra columns if that is what you
need. In our system we need the following four columns:

 UserID (Primary Key)

 Username
 Password
 EmailAddress

29 | P a g e
The SQL query to create our table is included below, and will usually be run in the 'SQL' tab of
phpMyAdmin.

2. Creating a Base File

In order to simplify the creation of our project, we are going to make a base file that we can include in
each of the files we create. This file will contain the database connection information, along with certain
configuration variables that will help us out along the way.

3. Begin the HTML Page

The first thing that we are going to do for our frontend is to create a page where users can enter their
details to login, or if they are already logged in a page where they can choose what they wish to do.

ISC-440 P a g e | 30
Kuwait University College of Computing Sciences & Engineering

4. Let the People Signup

So, here we are adding the user to our database. We need to make a login form.

ISC-440 P a g e | 31
Kuwait University College of Computing Sciences & Engineering

5. Make Sure That They Can Logout

This is done by destroying the session.

ISC-440 P a g e | 32
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 9 JAVASCRIPT OBJECT NOTATION (JSON)

Laboratory Objective:
 To learn the syntax of JSON is an easier-to-use alternative to XML.
 To be able to create an array of object in JavaScript using JSON.
 To learn how to use JavaScript function JSON.parse(text) which converts a JSON text
into a JavaScript object.
 To be able to use JSON to read data from a web server, and display it in a web page using
XMLHttp.

Lab #9 – JavaScript Object Notation (JSON)

1. Laboratory Objective:

 To learn the syntax of JSON is an easier-to-use alternative to XML.

 To be able to create an array of object in JavaScript using JSON.
 To learn how to use JavaScript function JSON.parse(text) which converts a JSON text into a JavaScript
object.
 To be able to use JSON to read data from a web server, and display it in a web page using XMLHttp.

2. Laboratory Learning Outcomes:

 Practice and use web development tools in order to gain web programming skills.

ISC-440 P a g e | 33
Kuwait University College of Computing Sciences & Engineering

3. Laboratory Problem Description

PART A: Web Programming Book Store Using JSON with JavaScript code all in one html file:
3. Create an html file with the following code:

<html>

<head>

<title>JSON Lab</title>

<script language="javascript" >

document.writeln("<h2>Welcome to Web Programming Book Store</h2>");

// Write here JSON code

///////////////////////

// Displaying Data on the browser

var i = 0

document.writeln("<table border='2'><tr>");

for(i=0;i<books.length;i++)
{
document.writeln("<td>");
document.writeln("<table border='1' width=100 >");
document.writeln("<tr><td><b>Title</b></td><td width=50 height=70>"
+ books[i].title+"</td></tr>");

document.writeln("<tr><td><b>Cover</b></td><td width=50><img src="+

books[i].imageUrl +" height = 100 width = 80></td></tr>");

document.writeln("<tr><td><b>Price</b></td><td width=50>"
+ books[i].Price +"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");

document.writeln("</tr></table>");

</script>

</head>

ISC-440 P a g e | 34
Kuwait University College of Computing Sciences & Engineering

<body>

</body>

</html>

4. Fill in appropriate JSON code to match the array used to display the content.
5. The Output should look like the following:

PART B: Web Programming Book Store using JSON to read data stored in the text file
“booksInfo.txt” using XMLHttp:
1. Create an html file that would read JSON data from the server similar to the example
discussed in the course slides.
2. The Output should look like the following:

ISC-440 P a g e | 35
Kuwait University College of Computing Sciences & Engineering

ISC-440 P a g e | 36
Kuwait University College of Computing Sciences & Engineering

LABORATORY # 10 HOW TO CREATE AN APPLICATION USING

FLICKR API

Laboratory Objective:
 To learn how how to get started with Flickr API.
 To be able to create simple application using Flickr API.

Lab #10 – How to Create an Application Using Flickr API

1. Laboratory Objective:

 To learn how how to get started with Flickr API.

 To be able to create simple application using Flickr API.

2. Laboratory Learning Outcomes:

 Practice and use web development tools in order to gain web programming skills.

3. Laboratory Problem Description

In this app we will fetch hundred recent photos from Flickr and then filter them according to the size (in
pixels) supplied by user. Flcikr offers several sizes of a photo and users can choose accordingly. The
application will look as follows:

ISC-440 P a g e | 37
Kuwait University College of Computing Sciences & Engineering

Lab Procedure:

1. Get a Flickr API key

Your API key is your own unique series of numbers and letters which grant you access to Flickr's
services. Go here: http://www.flickr.com/services/apps/create/apply/
Here you must decide if you are going to use Flickr for commercial or non-commercial purposes. Flickr
provide good explanations as to which you should choose, chances are you'll need a non-commercial API
key, which is what I am choosing for this lab.

ISC-440 P a g e | 38
Kuwait University College of Computing Sciences & Engineering

Follow the steps and fill in all your details. You should then be presented with your unique key which
will appear as a series of random numbers and letters like so:

2. Programming and Representing Data

ISC-440 P a g e | 39
Kuwait University College of Computing Sciences & Engineering

As you have a URL which may return data of your demand, in JSON format here, you have to use a
programming language to decode that JSON data and present that to the user.
'https://www.flickr.com/services/api/' page provides you with a list of programming language usage under
'API Kits' section. For this application we will use Jquery to decode the JSON data returned and then
append that to the HTML page. We will also collect the size of the photos user wants those to be
displayed.
So, we have three steps to go. First we have to decode JSON data returned by 'flickr.photos.getRecent'
method. Second we have to collect data from browser supplied by user to filter the available photos
according to the size user want to see and then display only photos with that size. The code for the job is
given below. Just make sure to use your own API key.

<html>
<head><title>Creating your first app with Flickr API</title>
<link rel="stylesheet" type="text/css"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
#sq,#lg-sq,#thumb,#small,#mid,#ori {
width: 100% }
<link rel="stylesheet" type="text/css"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var apiurl,myresult,apiurl_size,selected_size;
apiurl =
"https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=YOUR_KEY&per_page=10&forma
t=json&nojsoncallback=1";
$(document).ready(function(){
$("#sq").click(function(){
selected_size=75;
})
});
$(document).ready(function(){
$("#lg-sq").click(function(){
selected_size=150;
})
});
$(document).ready(function(){
$("#thumb").click(function(){
selected_size=100;
})
});
$(document).ready(function(){
$("#small").click(function(){
selected_size=240;
})

ISC-440 P a g e | 40
Kuwait University College of Computing Sciences & Engineering

});
$(document).ready(function(){
$("#mid").click(function(){
selected_size=500;
})
});
$(document).ready(function(){
$("#ori").click(function(){
selected_size=640;
})
});
$(document).ready(function(){
$('#button').click(function(){
$.getJSON(apiurl,function(json){
$.each(json.photos.photo,function(i,myresult){
apiurl_size = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key= YOUR_KEY
&photo_id="+myresult.id+"&format=json&nojsoncallback=1";
$.getJSON(apiurl_size,function(size){
$.each(size.sizes.size,function(i,myresult_size){
if(myresult_size.width==selected_size){
$("#results").append('<p><a href="'+myresult_size.url+'" target="_blank"><img
src="'+myresult_size.source+'"/></a></p>');
}
})
})
});
});
});
});
</script>
</head>
<body>
<div class="container"><div class="row"><div class="col-md-12">
<h2>Select size of photos (in pixels) you want them to be displayed</h2></div></div>
<div class="row"><div class="col-md-2">
<button type="button" class="btn btn-primary" id="sq">Square [75X75]</button></div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="lg-sq">Large Square [150X150]</button></div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="thumb">Thumbnail</button></div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="small">Small</button></div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="mid">Medium</button></div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="ori">Original</button></div></div>
<div class="row"><div class="col-md-12"><h2>Hit This button to fetch photos</h2>
<button type="button" class="btn btn-success" id="button">Fetch Recent Photos</button>
<hr></div></div>

ISC-440 P a g e | 41
Kuwait University College of Computing Sciences & Engineering

<div class="row"><div class="col-md-12"><div id="results"></div></div></div></div>

</body>
</html>

ISC-440 P a g e | 42
Kuwait University College of Computing Sciences & Engineering

APPENDIX “A”

RULES TO FALLOW BY COMPUTER LAB USERS

 The loud conversations / discussion that disturbing the other users is prohibited.
 Audio CDs or applications with audio output may only be used with headphones with minimum
volume that it should not be disturb other users.
 All cell phones are to be turned off or set to silent while in the lab. If you receive a phone call,
you should exit the lab before answering your cell phone.
 Do not bring food or beverages inside the lab.
 Any file saved on the computer hard drive will be deleted without notice. Students should save
their work onto an external storage device such as USB drive or CD.
 Changing hardware and software configurations in the computer labs is prohibited. This
includes modifications of the settings, modification of system software, unplugging equipment,
etc.
 Open labs are reserved for academic use only. Use of lab computers for other purposes, such as
personal email, non-academic printing, instant messaging, playing games, and listening to music
is not permitted.
 Please leave the computer bench ready for the next patron. Leave the monitor on the login
screen, and do not forget to take goods related to you. While leaving computer bench please
push the chair inside the computer bench.
 Users are responsible for their own personal belongings and equipment. Do not leave anything
in the Computer Lab unattended for any length of time. The Computer Labs staffs are not
responsible for lost or stolen items.
 Users are not allowed to clear paper jams in the printer by themselves.
 Operate the lab equipments with care.
 After using white-board the user must clean for other user.

Thanks for your cooperation.

Information Science Department

ISC-440 P a g e | 43
Kuwait University College of Computing Sciences & Engineering

APPENDIX “B”

CERTIFICATION

LABORARTORY MANUAL FOR COURSE ISC 440 (Web

Programming 2)

# Instructor name Remarks Signature Date

1 Dr. Abdullah Al Mutairi

ISC-440 P a g e | 44