Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

Manual of Web Programming

Uploaded by

Meshwa Acharya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Manual of Web Programming

Uploaded by

Meshwa Acharya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

SAL Engineering & Technical Institute

CE, IT, CSE & ICT Department

Web Programming (3160713)

Laboratory Manual
Year: 2024-2025

Prepared By

Prof. Amitkumar J. Patel


Prof. Neil Saxena
INDEX

Sr. Page No.


Experiment Date Marks Sign
No. From To
Design a webpage using an html
1 that contains a time table and form
for Registration Page.
Design a registration form using
2
various HTML tags.
3 Design a table and list using CSS.
Design various tables, lists and
4
buttons using Bootstrap.
Write a program using the basic
5
concepts of JavaScript.
Write a program to validate an
6
HTML form using JavaScript.
Write a program using the basic
7
concept of PHP.
Write a Program that demonstrates
8 Login management with session
and cookies in PHP.
Develop a program in php that
9 demonstrates insert, update &
Delete operation. (CURD)
Create a Basic Program that
10 demonstrates the use of AJAX and
JQuery.
Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 1 DATE: / /

Title: Design a webpage using various HTML tags and create a


College time table

OBJECTIVES: On completion of this experiment students will be able to…


• HTML TAGS
• TABLE TAG, ROWSPAN, COLSPAN, FORM TAGS
• Develop tables and forms in HTML
• Understand action methods (GET & POST)

THEORY:
• HTML stands for Hyper Text Markup Language.
• It is used to design web pages using hypertext and markup language.
• Hypertext defines the link between the web pages and markup language defines the
text document within the tag that define the structure of web pages.
• HTML is used to create the structure of web pages that are displayed on the World
Wide Web (www).
• The basic structure of an HTML page is laid out below. It contains the essential
building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.

HTML TAGS:

• <DOCTYPE! html> – A doctype or document type declaration is an instruction that


tells the web browser about the markup language in which the current page is written.
It is not an element or tag. The doctype declaration is not case-sensitive.

Prof. Amitkumar J. Patel Page No. | 1


Web Programming (3160713) Enrollment No.: 211260131058

• <html> – This tag is used to define the root element of HTML document. This tag
tells the browser that it is an HTML document. It is the second outer container
element that contains all other elements within it.
• <head> – This tag is used to define the head portion of the HTML document that
contains information related to the document. Elements within the head tag are not
visible on the front-end of a webpage.
• <body> – The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front end.
• <b> and <strong> - Both tags are used to make the text bold.
• <i> -This tag is used to make the text italic.
• <sup> and <sub> - The <sup> tag is used to subscript a text whereas <sub> tag is
used to subscript a text.
• <u> - This tag is used to underline a text.
• <mark> - This tag is used to highlight a text.
• <img> - This tag is used to add image inside webpage/website.
• <link> - This tag is used to define a link between a document and an external
resource. The link tag is mainly used to external style sheet.

HTML TABLES:
• <table> - This tag is used to define table.
• <tr> - This tag is used to define a row in a table.
• <th> - This tag is used to define a header cell in a table.
• <td> - This tag is used to define a cell in a table.
• Colspan – Allows a single cell to span the width of more than one cell or column.
• Rowspan – Allows a single table cell to span the height of more than one cell or row.

<!DOCTYPE html>
<html>
<head>
<title> Making a normal table </title>
</head>
<body>
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>

Prof. Amitkumar J. Patel Page No. | 2


Web Programming (3160713) Enrollment No.: 211260131058

</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
</body>

</html>

Example for a normal table in HTML

EXERCISE:

1. Make your college time table using HTML table.

QUIZ:

1. What does HTML stand for?


2. How is document type initialized in HTML5.0?
3. Which HTML tag is used to make a text bold?
4. Which HTML tag is used to make an un-ordered list?
5. Which character indicates closing of a tag?

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 3


Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 2 DATE: / /

TITLE: Designing a registration form using HTML.

OBJECTIVES: On the completion of this experiment students will be able to…


• Design any registration form.

THEORY:

What is a form?
• A form is considered to be a series of questions that use field entries to gather data.
• With that said, there is a wide variety of forms and many functions that each of them
serve.
• Some forms are short and work as a simple means to an end – which is the case with
login or checkout forms.
• Others deal in complex topics and need more questions in order to gather all the
necessary data, such as customer satisfaction surveys or event registration forms.

What is HTML Form:


• HTML Form is a document which stores information of a user on a web server using
interactive controls. A
• A HTML form contains different kind of information such asusername, password,
contact number, email id etc.
• The elements used in an HTML form are check box, input box, radio buttons, submit
buttons etc.
• Using these elements the information of an user is submitted on a web server.

The form tag is used to create an HTML form.

Example of HTML FORM:-

<!DOCTYPE html>
<html>
<head>
<title>A simple login form</title>
</head>
<body>
<form>
Username:<br>
<input type="text" name="username">
<br>
Email id:<br>
<input type="text" name="email_id">
<br><br>

Prof. Amitkumar J. Patel Page No. | 4


Web Programming (3160713) Enrollment No.: 211260131058

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


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

Output:-

Input Element in HTML Forms:


Input Elements are the most common elements which are used in HTML Forms.
Various user input fields can be created such as textfield, check box, password field, radio
button, submit button etc. The most common input elements are listed below:

1. Text Field in HTML Forms: The text field is a one-line input field allowing the user
to input text. Text Field input controls are created using the “input” element with a
type attribute having value as “text”.
2. Password Field in HTML Forms: Password fields are a type of text field in which
the text entered is masked using asterisk or dots for prevention of user identity from
another person who is looking onto the screen. Password Field input controls are
created using the “input” element with a type attribute having value as “password”.
3. Radio Buttons in HTML Form: Radio Buttons are used to let the user select exactly
one option from a list of predefined options. Radio Button input controls are created
using the “input” element with a type attribute having value as “radio”.
4. Checkboxes in HTML Form: Checkboxes are used to let the user select one or more
options from a pre-defined set of options. Checkbox input controls are created using
the “input” element with a type attribute having value as “checkbox”.
5. Select Boxes in HTML Forms: Select boxes are used to allow users to select one or
more than one option from a pull-down list of options. Select boxes are created using
two elements which are “select” and “option”. List items are defined within the
select element.
6. Text area in an HTML Form: Text Area is a multiple line text input control which
allows user to provide a description or text in multiple lines. A Text Area input
control is created using the “textarea” element.
7. Reset and Submit Buttons: The Submit Button allows the user to send the form data
to the web server. The Reset Button is used to "reset" the form data and use the
default values.

Prof. Amitkumar J. Patel Page No. | 5


Web Programming (3160713) Enrollment No.: 211260131058

Attributes Used in HTML Forms: -


1. The Action Attribute: The action to be performed after the submission of the form is
decided by the action attribute. Generally, the form data is sent to a webpage on the
web server after the user clicks on the submit button.
2. The Target Attribute in HTML Forms: The Target attribute is used to specify
whether the submitted result will open in the current window, a new tab or on a new
frame. The default value used is “self” which results in the form submission in the
same window. For making the form result open in a new browser tab, the value
should be set to “blank”.
3. Name Attribute in Html Forms: The name attribute is required for each input field.
If the name attribute is not specified in an input field then the data of that field would
not be sent at all.
4. The Method Attribute: It is used to specify the HTTP method used to send data
while submitting the form. There are two kinds of HTTP Methods, which are GET
and POST.
5. The GET Method: In the GET method, after the submission of the form, the form
values will be visible in the address bar of the new browser tab.
6. The POST Method: In the post method, after the submission of the form, the form
values will not be visible in the address bar of the new browser tab as it was visible in
the GET method.

EXERCISE:
1. Create a Registration form.
2. Create a sign-up form.
3. Create Sign-in form.

QUIZ:
1. How do you add a text area to a form?
2. What attribute do you set to limit the number of letters in a text field?

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 6


Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 3 DATE: / /

TITLE: -Design various HTML tables and forms using CSS.

OBJECTIVE: -After completing this experiment students will be able to understand…


• CSS BASIC

THEORY: -

What is CSS?
• Cascading Style Sheets, fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages presentable.
• CSS allows you to apply styles to web pages.
• More importantly, CSS enables you to do this independent of the HTML that makes
up each web page.
• It describes how a webpage should look: it prescribes colors, fonts, spacing, and much
more.
• CSS lets developers and designers define how it behaves, including how elements are
positioned in the browser.
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files.

CSS BASIC FORMAT: -


h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}

ABSOLUTE LENGTHS OF SCALING MEASUREMENTS CSS: -


px:- pixels (1px = 1/96th of 1in)
vh:- Relative to 1% of the height of the viewport*
vw:- Relative to 1% of the width of the viewport*

Prof. Amitkumar J. Patel Page No. | 7


Web Programming (3160713) Enrollment No.: 211260131058

ch:- Relative to the width of the "0" (zero)

COLORS: -
The color system used when producing colors by light (RGB)
The color system used when printing (CMY)
The color system used by artist and painters (RYB)

BOX MODEL
In CSS, the term "Box Model" is used when talking about design and layout. The CSS box
model is essentially a box that wraps around every HTML element. It consists of: margins,
borders, padding, and the actual content.

BORDER: -
CSS border properties allow us to set the style, color, and width of the border.
Note: Different properties can be set for all the different borders i.e. top border, right border,
bottom border, and left border.
Properties of CSS Borders:

1. Border Style
CSS border-top style Property
border-right-style Property
border-bottom-style Property
border-left-style Property

2. Border Width
border-top-width Property
border-right-width Property
border-bottom-width Property
border-left-width Property

3. Border Color
border-top-color Property
border-right-color Property
border-bottom-color Property
border-left-color Property

4. Border individual sides


The border-style property specifies the type of border. None of the other border properties
will work without setting the border style.

MARGIN: -
The margin property is a shorthand property having the following individual margin
properties:
margin-top: It is used to set the top margin of an element.

Prof. Amitkumar J. Patel Page No. | 8


Web Programming (3160713) Enrollment No.: 211260131058

margin-right: It is used to set the right margin of an element.


margin-bottom: It is used to specify the amount of margin to be used on the bottom of an
element.
margin-left: It is used to set the width of the margin on the left of the desired element.

PADDING:-
The padding CSS shorthand property can be used to specify the padding for each side of an
element in the following order:
padding-top: It is used to set the width of the padding area on the top of an element.
padding-right: It is used to set the width of the padding area on the right of an element.

EXERCISE:
1. Design a webpage for a NEWS site using an HTML tag DIV that includes positioning
margin and padding properties of CSS.
2. Design an HTML+CSS page to understand the concept of pseudo classes.
3. Design a HTML page using CSS that changes the color of the table cells on mouse
hover. It should also change the colors of the link. (Default link/ link on mouse hover
and visited link).

QUIZ:
1. What does CSS stand for?
2. Which HTML tag is used to define an internal style sheet?
3. Which CSS property is used to change the text color of an element?

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 9


Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 4 Date: / /

TITLE:- Design various tables, lists and buttons using Bootstrap

OBJECTIVE: - After completing this experiment student will be able to understand…


• Bootstrap demo

THEORY: -

What is bootstrap?
• Bootstrap is a free front-end framework for faster and easier web development.
• Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins.
• Bootstrap also gives you the ability to easily create responsive designs.
• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops

BOOTSTRAP FORMAT:-

<div class="jumbotron text-center">


<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Loremipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Loremipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Loremipsum dolor..</p>
</div>
</div>
</div>

Prof. Amitkumar J. Patel Page No. | 10


Web Programming (3160713) Enrollment No.: 211260131058

BOOTSTRAP FORM LAYOUTS:


Bootstrap provides three types of form layouts:

• Vertical form (this is default)


• Horizontal form
• Inline form
Standard rules for all three form layouts:

Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
Add class. form-control to all textual <input>, <textarea>, and <select> elements

GRID CLASSES: -

The Bootstrap grid system has four classes:

• xs (for phones - screens less than 768px wide)


• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more dynamic and flexible layouts.

EXERCISE:
1. Create a simple table with Bootstrap.
2. Create a list with Bootstrap.
3. Create buttons with Bootstrap.

QUIZ: -
1. Bootstrap 3 is mobile-first?
2. Which class provides a responsive fixed width container?
3. Which class provides a full width container, spanning the entire width of the
viewport?
4. The Bootstrap grid system is based on how many columns?
5. Which class adds zebra-stripes to a table

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 11


Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 5 Date: / /

TITLE: Write a program using the basic concept of JavaScript.

OBJECTIVES: On the Completion of this experiment students will be able to…


• JavaScript variable and output handling knowledge

THEORY:

What is JAVASCRIPT?
• JavaScript is a cross-platform, object-oriented scripting language used to make
WebPages interactive (e.g. having complex animations, clickable buttons, popup
menus, etc.).
• There are also more advanced server side versions of JavaScript such as Node.Js
which allow you to add more functionality to a website than simply downloading
files (such as real time collaboration between multiple computers).
• Inside a host environment (for example, a web browser), JavaScript can be
connected to the objects of its environment to provide programmatic control over
them.
• JavaScript could be simply written at the head or bodyportion.

Syntax:
<script type=‖text/javascript‖>
</script>
Variable Declaration:
var x = 10;
var y = ‗hello‘;
to print the message : document.write(‗message body‘)

<!DOCTYPE html>
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form) {
varnum=parseInt(form.number.value); if (isNaN(num) || num< 0) {
form.result.value=(form.number.value + " is not a valid number!
Try again!");
}
if (num == 1 || num == 2) { form.result.value=(num + " is
prime!");
}
for (var i=2;i<num;i++) { if (num % i == 0) { var prime="yes";
form.result.value=(num + " is not prime. It is divisible by " +
i + "."); break;
}
if (num % i != 0) var prime="no";
}
if (prime == "no") form.result.value=(num + " is prime!");
}
</SCRIPT>
</head>
<body>

Prof. Amitkumar J. Patel Page No. | 12


Web Programming (3160713) Enrollment No.: 211260131058

<center>
<form name=form>
<h2>Prime Number Calculator</h2><p> Please enter a number:<br>
<input type=text name=number size=7>
<input type=button value="Calculate"
onClick="calculate(this.form)">
<P>
<input type=text name=result size=45 value="">
</form>
</center>
</body>
</html>

EXERCISE:
1. Write a JavaScript program that prints first n Fibonacci numbers. Here n will be inserted
by the user.
2. Write JavaScript code that displays the text “SAL Education Campus” with increasing
font size in interval of 50ms in blue color. When font size reaches to 50px it should stop.
3. Write a JavaScript function to check whether a given value is an valid url or not
4. Write a JavaScript program that work as a trim function (string) using regular
expression.
5. Write a JavaScript function to check whether a given value is IP value or not.

QUIZ:
1. Inside which HTML element do we put the JavaScript?
2. How do you write "Hello World" in an alert box?
3. How do you create a function in JavaScript?
4. How do you round the number 7.25, to the nearest integer?
5. Which operator is used to assign a value to a variable?
6. Is JavaScript case-sensitive?

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 13


Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 6 DATE: / /

TITLE: Write a program to validate an HTML form using JavaScript.

OBJECTIVES: On completion of this experiment students will be able to…


• Understanding the concepts of JavaScript.
• Know about how to validate fields of the form using JavaScript.

THEORY:
• It is important to validate the form submitted by the user because it can have
inappropriate values. So, validation is must to authenticate user.
• JavaScript provides facility to validate the form on the client-side so data processing
will be faster than server-side validation. Most of the web developers prefer
JavaScript form validation.
• Data validation is the process of ensuring that user input is clean, correct, and useful.
• Typical validation tasks are:
o Has the user filled in all required fields?
o Has the user entered a valid date?
o Has the user entered text in a numeric field?
• Validation can be defined by many different methods, and deployed in many different
ways.
• Server-side validation is performed by a web server, after input has been sent to the
server.
• Client-side validation is performed by a web browser, before input is sent to a web
server.

Syntax:

Email Validation:

function check email() {


var x=document.myform.email.value;
varatposition=x.indexOf("@");
vardotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 ||
dotposition+2>=x.length){
alert("Please enter a valid email address \n
atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}

Prof. Amitkumar J. Patel Page No. | 14


Web Programming (3160713) Enrollment No.: 211260131058

Cannot be blank:

Function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out"); return false;
}
}

<form name="myForm" action="/action_page.php" onsubmit="return


validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Password and Retype password must be same:

Prof. Amitkumar J. Patel Page No. | 15


Web Programming (3160713) Enrollment No.: 211260131058

<script type="text/javascript"> function matchpass(){


var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;

if(first password==second password)


{
return true;
}
else
{
alert ("password must be Same!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>

Form validation typically involves two functions:

1. Basic Validation: This warrants that all the mandatory fields are filled. It would require
just a loop through each field in the form and check for data.
2. Data Format Validation: Data validation checks the data for its correctness. Your code
must include appropriate logic to test the accuracy of data.
3. Empty field validation :
<formname="contact_form"method="post"action="/cgi-bin
in/articles/development/javascript/form-validation-with-
javascript/contact_simple.cgi" onsubmit="return validateform();">

We have to create a function that returns whether validation is done or not


?
function validateform()
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
{
alert("Please fill in the 'Your Name' box.");
valid = false;
}

return valid;

Prof. Amitkumar J. Patel Page No. | 16


Web Programming (3160713) Enrollment No.: 211260131058

EXERCISE:
1. Perform complete form validation name, email, phone number, checkbox etc using
JavaScript.

2. Design a login form using HTML & JavaScript with following validations on
• username and password fields.
• Password length must be 6 to 12 characters
• Username should not start with _, @ or number.
• Phone number must be 10 digit start with 6/7/8/9

QUIZ:

1. How to use external JavaScript file?


2. What is the working of timers in JavaScript?
3. How can you convert the string of any data base to an integer in JavaScript?
4. What are the different data types present in JavaScript?
5. Explain Implicit type coercion in JavaScript.

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 17


Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 7 DATE: / /

TITLE: Write a program using the basic concepts of PHP.

OBJECTIVES: On the completion of this experiment students will be able to…


• Know the syntax, variable declaration in PHP
• Loops and decision-making controls
• How to run php code.

THEORY:

PHP: Introduction
• PHP started out as a small open source project that evolved as more and more
people found out how useful it was.
• RasmusLerdorf unleashed the first version of PHP way back in 1994.
• PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
• PHP is a server-side scripting language that is embedded in HTML.
• It is used to manage dynamic content, databases, session tracking, even build
entire e-commerce sites.
• It is integrated with a number of popular databases, including MySQL, PostgreSQL,
Oracle, Sybase, Informix, and Microsoft SQL Server.

SYNTAX:

<?php
//code
?>

Variable declaration:

<?php
$a = “abc”;
$b=123;
echo $a; // Print variable value
echo “second variable:” .$b; // concatenation with .
?>

EXERCISE:
1. Write a PHP program to print alphabet triangles.
A
ABA
ABCBA
ABCDCBA
2. Write a PHP program to print the factorial of a number.
3. Write a PHP program to check Armstrong numbers.
4. Write a PHP program to check palindrome numbers.

Prof. Amitkumar J. Patel Page No. | 18


Web Programming (3160713) Enrollment No.: 211260131058

5. Write a PHP script for login authentication.


6. Design an html form which takes username and password from user and validate
against stored username and password in file.
7. Write a php code to calculate the number of days between to two input dates if the
difference is even number then render background color as blue or red.

QUIZ:

1. All variables in PHP start with which symbol?


2. PHP files have a default extension of ________.

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 19


Web Programming (3160713) Enrollment No.: 211260131058

EXPERIMENT NO: 8 DATE: / /

TITLE: Learning Login management with session and cookies in PHP.

OBJECTIVES: On completion of this experiment students will be able to…


• Understanding the concepts of sessions
• Understanding the concepts of cookies.

THEORY:

What is a Session?
• A session is a global variable stored on the server.
• Each session is assigned a unique id which is used to retrieve stored values.
• Whenever a session is created, a cookie containing the unique session id is stored on
the user’s computer and returned with every request to the server.
• If the client browser does not support cookies, the unique php session id is displayed
in the URL
• Sessions have the capacity to store relatively large data compared to cookies.

CREATING SESSION:
<?php

session_start(); //start the PHP_session function

if(isset($_SESSION['page_count']))
{
$_SESSION['page_count'] += 1;
}
else
{
$_SESSION['page_count'] = 1;
}
echo 'You are visitor number ' . $_SESSION['page_count'];

?>

DESTROYING SESSION:
<?php
session_destroy(); //destroy entire session
?>
<?php
unset($_SESSION['product']); //destroy product session item
?>

Why and when to use Cookies?


• Personalizing the user experience – this is achieved by allowing users to select their
preferences.
• The pages requested that follow is personalized based on the set preferences in the

Prof. Amitkumar J. Patel Page No. | 20


Web Programming (3160713) Enrollment No.: 211260131058

cookies.
• Tracking the pages visited by a user

SET COOKIE:
<?php
setcookie(cookie_name, cookie_value, [expiry_time], [cookie_path],
[domain], [secure], [httponly]);
?>

RETRIVE VALUE:
<?php
print_r($_COOKIE);//output the contents of the cookie array variable
?>

DELETE COOKIE:
<?php
setcookie("user_name", "AIT",time() - 360,'/');
?>

EXERCISE:
1. Perform keep me logged checkbox checked using cookie.
2. Write a php script for setting and retrieving your name and email address using
cookies.
3. Perform login to logout session handling. None logged in users cannot access the
page.
4. Write a php program to greet the user based on time.
5. Write a php code to upload file on server and display file details on the page (ex. file
name, extension, file size)
6. Create a web page which shows the use of Session. (Create, Retrieve, Modify Delete
and Destroy Session Variables)

QUIZ:
1. How do you create a cookie in PHP?
2. What is the purpose of $_SESSION []?
3. What is the default execution time set in set_time_limit()?

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 21


Web Programming (3160713) Enrollment No.: 211260131058

Experiment No: 9 DATE: / /

TITLE: Develop a program in php that demonstrates insert, update &


Delete operation. (CURD)

OBJECTIVES: On completion of this experiment students will be able to…


• PHP CRUD OPERATION
• DATABASE QUERIES

THEORY:
• CRUD is an acronym for Create, Read, Update, and Delete. As the name suggests,
these operations manipulate data in a database that is important to any web
application’s basic functionality. We can create a PHP application coupled with a
MySQL database to perform these operations.

How to Set Up a Database Connection?


• mysqli_connect function, which is used to set up a connection with the MySQL back-
end.
<?php
$connection_obj= mysqli_connect("{MYSQL_HOSTNAME}",
"{MYSQL_USERNAME}", "{MYSQL_PASSWORD}", "{MYSQL_DATABASE}");
?>
How to Select a Database?
• You can use the mysqli_select_db function to select a database to work with.
<?php
mysqli_select_db($connection_obj, "{MYSQL_DATABASE}");
?>

How to run any query ( it could be delete query / select or update )?


<?php
$query = "Select * from table_name";
mysqli_query($connection_obj, $query);
?>
Creating the landing page:-
<!DOCTYPE html>
<html>
<head>
<title>CRUD: Create, Update, Delete PHP MySQL</title>
</head>
<body>
<form method="post" action="server.php" >
<div class="input-group">
<label>Name</label>
<input type="text" name="name" value="">
</div>

Prof. Amitkumar J. Patel Page No. | 22


Web Programming (3160713) Enrollment No.: 211260131058

<div class="input-group">
<label>Address</label>
<input type="text" name="address" value="">
</div>
<div class="input-group">
<button class="btn" type="submit"
name="save">Save</button>
</div>
</form>
</body>
</html>

EXERCISE:
1. Perform complete user registration i.e. signup, display, update and delete in php.
2. Write a php code to check whether the given username is already in the “login_tbl”
table or not and display an appropriate message.
3. Write a PHP Calculator class which will accept two values as arguments, then add
them, subtract them, multiply them together, or divide them on request

QUIZ:
1. Can I run several versions of PHP at the same time?
2. Can echo in php accept more than 1 parameter?
3. What is the actually used PHP version?
4. How do you execute a PHP script from the command line?
5. What is the main difference between require() and require_once()?
6. How is it possible to set an infinite execution time for PHP script?

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 23


Web Programming (3160713) Enrollment No.: 211260131058

EXPERIMENT NO: 10 DATE: / /

TITLE: Create a Basic Program that demonstrates the use of AJAX and
JQuery.
OBJECTIVES: On completion of this experiment students will be able to…
• Understanding the concepts of AJAX and jQuery

THEORY:
What is AJAX?
• AJAX = Asynchronous JavaScript and XML.
• In short, AJAX is about loading data in the background and displaying it on the
webpage, without reloading the whole page.
• Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook
tabs.

What is jQuery?

• jQuery is a lightweight, "write less, do more", JavaScript library.


• The purpose of jQuery is to make it much easier to use JavaScript on your website.
• jQuery takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of code.
• jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX
calls and DOM manipulation.
• The jQuery library contains the following features:
o HTML/DOM manipulation
o CSS manipulation
o HTML event methods
o Effects and animations
o AJAX
o Utilities

What about jQuery and AJAX?


• JQuery provides several methods for AJAX functionality.
• With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a
remote server using both HTTP Get and HTTP Post - And you can load the external
data directly into the selected HTML elements of your web page!

Simple HTML Form Submit

<form action="path/to/server/script" method="post" id="my_form">


<label>Name</label>
<input type="text" name="name" />
<label>Email</label>
<input type="email" name="email" />

Prof. Amitkumar J. Patel Page No. | 24


Web Programming (3160713) Enrollment No.: 211260131058

<label>Website</label>
<input type="url" name="website" />
<input type="submit" name="submit" value="Submit Form" />
<div id="server-results">
<!-- For server results -->
</div>
</form>
• The jQuery snippets below demonstrate different ways to make Ajax requests.

$("#my_form").submit(function(event){
event.preventDefault();
//prevent default action
var post_url = $(this).attr("action");
//get form action url
var request_method = $(this).attr("method");
//get form GET/POST method
var form_data = $(this).serialize();
//Encode form elements for submission

$.ajax({
url :post_url,
type: request_method,data : form_data
}).done(function(response)
{ //
$("#server-results").html(response);
});
});
• The .serialize() method serializes a form input to a query string that could be sent
using Ajax.
• HTML Multipart/form-data Form Submit
$("#my_form").submit(function(event){
event.preventDefault();
//prevent default action
var post_url = $(this).attr("action");
//get form action url
var request_method = $(this).attr("method");
//get form GET/POST method
var form_data = new FormData(this);
//Creates new FormData object

$.ajax({
url :post_url,
type: request_method,
data :form_data,
contentType: false,
cache: false,
processData:false
}).done(function(response){ //
$("#server-results").html(response);
});
});

Prof. Amitkumar J. Patel Page No. | 25


Web Programming (3160713) Enrollment No.: 211260131058

EXERCISE:
1. Create your own jQuery AJAX form having a submit button with validation feature.
2. Write a code to validate user input using jQUERY.
3. Write a code of jQuery AJAXload content of selected element from a file.

QUIZ:
1. Is jQuery a library for client scripting or server scripting?
2. Is it possible to use jQuery together with AJAX?
3. What are the real web applications of AJAX currently running in the market?
4. What are the technologies used by AJAX?
5. What are the features of jQuery?

EVALUATION:
Problem Analysis Understanding Timely Mock Total
& Solution Level Completion
(3) (3) (2) (2) (10)

Signature with date: __________

Prof. Amitkumar J. Patel Page No. | 26

You might also like