Webtechnologyies Final
Uploaded by
g.suryaprakashyadavWebtechnologyies Final
Uploaded by
g.suryaprakashyadavGovernment Polytechnic
Proddatur
Prescribed For FOURTH SEMESTER
Department of Computer Engineering
Web Technologies
LABORATORY Manual
406-WEB TECHNOLOGIES LAB RECORD
Experiments Index:-
1.Exercise on Basic HTML Tags
2. Exercise on HTML Page Using Suitable Table Tags and Attributes.
3.Exercise on HTML Page using Form containing various controls.
4.Exercise on creating a HTML page using Frames.
5.Exercise on CSS.
7.Exercise on Javascript Functions.
8.Exercise on Javascript Arrays.
9.Exercise on mouse events using jquery.
10.Exercise on effects of jquery.
11.Exercise on changing the background color using .css() function in JQuery.
12.Exercise on ResponsiveSlides JQuery Plug-in.
13.Installation of XAMPP.
14.Exercise on PHP arrays.
15.Design a form and access the elements of form using PHP.
16.Various operations on a database table functions.
17.Write a PHP program to set a cookie.
1.Exercise on Basic HTML Tags
Aim:Exercise on basic HTML tags
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
<html> Tag : This element tells a browser that this is an HTML document.
<body> Tag: The body element defines the document’s body.
It contains all the contents of the document (like text, images, colors, graphics, etc.).
<head> Tag:
1.The head element contains general information, also called meta-information,
about a document.
2.You can say that meta-data means information about data, or meta-information
means information about information.
<title> Tag: Title Tag defines the title of the document.
Syntax:
<html>
<head>
<title> ……</title>
</head>
<body>
...
...
</body>
</html>
The header tags <h1> to <h6>:
● HTML headings are defined with the <h1> to <h6> tags.
● <h1> defines the most important heading. <h6> defines the least important heading.
Example:-
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h1> headings should be used for main headings, followed by <h2> headings,then the less
important <h3>, and so on.
Physical formatting tags:
Bold Text:
Anything that appears within <b>...</b> element, is displayed in bold.
Syntax:-<b>.....</b>
Italic Text:
Anything that appears within <i>...</i> element is displayed in italicized.
Syntax:-<i>.....</i>
Underlined Text:
Anything that appears within <u>...</u> element, is displayed with underline.
Syntax:-<u>......</u>
Strike Text:
Anything that appears within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text.
syntax:-<strike>.......</strike>
Subscript Text:
The content of a <sub>...</sub> element is written in subscript; the font size
used is the same as the characters surrounding it, but is displayed half a character's
height beneath the other characters.Subscript text can be used for chemical formulas, like
H2O.
Superscript Text:
The content of a <sup>...</sup> element is written in superscript; the font
size used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.Superscript text can be used for maths
formulas , like X+Y2-Z3.
Larger Text:
The content of the <big>...</big> element is displayed one font size larger than the
rest of the text surrounding.
Smaller Text:
The content of the <small>...</small> element is displayed one font size smaller
than the rest of the text surrounding it .
Monospaced Font:
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts
are known as variable-width fonts because different letters are of different widths (for ex, the
letter 'm' is wider than the letter 'i'). In a monospaced font, each letter has the same width.
Logical formatting tags:
<q> tag:
to add a double quote within a sentence.
<strong> tag:
Anything that appears within <strong>...</strong> element is displayed as important text.
<cite> tag:
The text in the <cite>...</cite> element usually renders in italic.
<ins> tag:
Anything that appears within <ins>...</ins> element is displayed as inserted text.
<del> tag:
Anything that appears within <del>...</del> element, is displayed as deleted text
<em> tag:
Anything that appears within <em>...</em> element is displayed as emphasized text.
Marquee Tag:
Allow you to have formatted text running(Scrolling) across the screen over a color
background. One can display many different pieces of information all on one line.
Attributes of marquee tag:
1. Behavior:
○ Specifies the scrolling behavior.
○ Values:
■ scroll (default): Scrolls the content continuously.
■ slide: Content scrolls in and stops at the edge.
■ alternate: Content bounces back and forth.
2. Direction:
○ Specifies the direction of scrolling.
○ Values:
■ left (default): Scrolls from right to left.
■ right: Scrolls from left to right.
■ up: Scrolls from bottom to top.
■ down: Scrolls from top to bottom.
3. Scrollamount:
○ Specifies the speed of the scrolling content in pixels.
○ Example: <marquee scrollamount="10">.
4. Scrolldelay:
○ Specifies the delay (in milliseconds) between each scroll movement.
○ Example: <marquee scrolldelay="100">.
5. Loop:
○ Specifies the number of times the content will scroll.
○ Values:
■ A number (e.g., 3).
■ -1 (default): Scrolls indefinitely.
6. Width:
○ Specifies the width of the marquee (in pixels or percentage).
○ Example: <marquee width="50%">.
7. Height:
○ Specifies the height of the marquee (in pixels or percentage).
○ Example: <marquee height="100px">.
8. Bgcolor:
○ Specifies the background color of the marquee.
○ Example: <marquee bgcolor="yellow">.
9. Hspace:
○ Specifies the horizontal space (in pixels) around the marquee.
○ Example: <marquee hspace="20">.
10. Vspace:
○ Specifies the vertical space (in pixels) around the marquee.
○ Example: <marquee vspace="20">.
List Tags:-
1. <ul> (Unordered List):
○ Used to create lists with bullet points.
○ Attributes:
■ type: Specifies bullet style (disc, circle, square, none).
■ id: Assigns a unique identifier.
■ style: Adds inline CSS styling.
■ class: Links the list to a CSS class for styling.
2. <ol> (Ordered List):
○ Used to create numbered or lettered lists.
○ Attributes:
■ type: Specifies numbering style (1, a, A, i, I).
■ start: Sets the starting number/letter for the list.
■ reversed: Displays the list in descending order.
■ id: Assigns a unique identifier.
■ style: Adds inline CSS styling.
■ class: Links the list to a CSS class for styling.
3. <li> (List Item):
○ Defines individual items in <ul>, <ol>, or <menu> lists.
○ Attributes:
■ type: Specifies marker style when used within lists.
■ value: Sets the numeric value for a specific item in an <ol> list.
4.<menu> (Menu List):
○ Used for context menus or command lists.
○ Attributes:
■ type: Specifies the menu type (list, context, toolbar).
■ label: Provides a label for the menu.
5.<dl>
The <dl> tag in HTML is used to create a description list (previously called a
definition list). It organizes content into paired items, such as terms and their
corresponding descriptions.
Attributes
1. <dl>: Wraps the entire list.
2. <dt>: Represents the term.
3. <dd>: Represents the description or definition of the term.
Program:-
<html>
<head>
<title>Tags Demo</title>
</head>
<body>
This is a HTML program for all tags Demo
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Physical formatting tags<br>
<b>This is in bold</b><br>
<u>This text is underlined</u><br>
<i>This is in italic</i><br>
<strike>strike through</strike><br>
H<sub>2</sub>o<br>
a<sup>2</sup>b<br>
Amit is in <big>Spain</big><br>
I think it is <small>wrong</small><br>
<tt>This word is a monospaced typeface</tt><br>
logical formatting tags<br>
<q>Amit is in Spain</q><br>
<strong>Good Morning Mam </strong><br>
<cite>Good morning</cite><br>
I want to drink<del>wine</del><ins>Maaja</ins><br>
Hi <em>friends</em>
Marquee tab<br>
<marquee bgcolor="green" loop="5" scrolldelay="15" width="1000">Hi
friends</marquee><br>
<marquee bgcolor="yellow" direction="right" Behaviour="alternate" Scrollamount="25"
height="25">Good morning</marquee><br>
<img src="C:\Users\gsury\OneDrive\Pictures\Saved Pictures\krishna.jpeg" hspace="1000"
vspace="1500"><br>
An ordered list<br>
<ol type="i">
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ol>
An unordered list<br>
<ul type="square">
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ul>
Description tag.<br>
<dl>
<dt>Cookie</dt>
<dd>a small piece of information stored on a client computer</dd>
<dt>CSS</dt>
<dd>Cascading style sheets in a simple mechanism for adding style.</dd>
<dt>HTML</dt>
<dd>Hyper Text markup Language.</dd>
</dl>
<p>This is a paragraph tool,at last good morning to everyone and see you later to all good
bye and thank you for giving this opportunity and once again thank you and sorry for any
mistakes if I have done in future.</p>
</body>
</html>
Output:-
Result:- The exercises on the basic HTML tags are performed successfully.
2.EXERCISE ON HTML PAGE To display Time Table USING SUITABLE TABLE TAGS
AND ATTRIBUTES
Aim:Exercise on basic HTML tags.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
Table Tags and Attributes
1. <table> (Table)
● Defines a table to organize data.
● Common Attributes:
○ align: Aligns the table relative to the surrounding text (left, center, right).
○ bgcolor: Sets the background color of the table using color names, RGB
values, or hex codes.
○ border: Specifies the border width of the table.
○ cellpadding: Sets the space between the cell content and its walls (in pixels).
○ cellspacing: Sets the space between adjacent cells (in pixels).
2. <tr> (Table Row)
● Used to define a row in a table.
● Common Attributes:
○ align: Aligns the content horizontally within the row (left, right, center, justify,
char).
○ bgcolor: Sets the background color of the row.
○ valign: Aligns the content vertically (top, middle, bottom, baseline).
○ cellpadding and cellspacing: Same functionality as in <table>; can be
overridden for specific rows.
3. <th> (Table Header Cell)
● Defines a header cell in the table. By default:
○ Content is bold and centered.
● Shared Attributes with <td>:
○ colspan: Merges the cell across multiple columns.
○ rowspan: Merges the cell across multiple rows.
○ height: Sets the height of the cell.
○ width: Sets the width of the cell.
4. <td> (Table Data Cell)
● Defines a regular data cell in the table.
● Attributes:
○ Same as <th>, including colspan, rowspan, height, and width.
Program:-
<html>
<head>
<title>Time Table</title>
</head>
<body>
<table border="5" cellpadding="10">
<caption><h1><u><i>4<sup>th</sup>Semester time table</i></u></u></h1></caption>
<tr bgcolor="yellow">
<th><b>Branch</b></th>
<th><b>Day</b></th>
<th><b>1(9:30AM-10:20AM)</b></th>
<th><b>2(10:20AM-11:10AM)</b></th>
<th><b>3(11:20AM-12:10PM)</b></th>
<th><b>4(12:10 PM-01:00PM)</b></th>
<th><b>(01:00 PM-02:00 PM)</b></th>
<th><b>4(02:00 PM-02:50 PM)</b></th>
<th><b>4(02:50 PM-03:40 PM)</b></th>
<th><b>4(03:40 PM-04:30 PM)</b></th>
</tr>
<tr align="center" border="4">
<td rowspan=10 bgcolor="green"><h1>Computer Engineering</h1></td>
<td bgcolor="red"><h3>Monday</h3></td>
<td colspan="2"><b>CM-405(CN)</b></td>
<td colspan="2"><b>CM-402(Web Technology)</b></td>
<td rowspan="6" bgcolor="blue" valign=”middle”><h2><b>Lunch Break</b></h2></td>
<td colspan="3"><b>CM-408(Communication Lab)</b></td>
</tr>
<tr align="center" border="4">
<td bgcolor="red"><h3>Tuesday</h3></td>
<td colspan="2"><b>CM-401(SE)</b></td>
<td><b>CM-404(Java)</b></td>
<td><b>CM-407(Java Lab)</b></td>
<td colspan="3"><b>CM-407(Java Lab)</b></td>
</tr>
<tr align="center" border="4">
<td bgcolor="red"><h3>Wednesday</h3></td>
<td colspan="2"><b>CM-403(CO&M)</b></td>
<td colspan="2"><b>CM-402(Web Technology)</b></td>
<td><b>CM-401(SE)</b></td>
<td colspan="2"><b>CM-404(Java)</b></td>
</tr>
<tr align="center" border="4">
<td bgcolor="red"><h3>Thursday</h3></td>
<td colspan="2"><b>CM-405(CN)</b></td>
<td colspan="2"><b>CM-404(Java)</b></td>
<td colspan="3"><b>CM-409(CN Lab)</b></td>
</tr>
<tr align="center" border="4">
<td bgcolor="red"><h3>Friday</h3></td>
<td colspan="4"><b>CM-406(Web Technology Lab)</b></td>
<td colspan="2"><b>CM-403(CO&M)</b></td>
<td><b>CM-401(SE)</b></td>
</tr>
<tr align="center" border="4">
<td bgcolor="red"><h3>Saturday</h3></td>
<td><b>CM-405(CN)</b></td>
<td><b>CM-402(Web Technology)</b></td>
<td><b>CM-401(SE)</b></td>
<td><b>CM-403(CO&M)</b></td>
<td colspan="3"><b>Activities</b></td>
</tr>
</table>
</body>
</html>
Output:-
Result:-The above HTML program on HTML page using the suitable table tags and its
attributes are verified successfully.
3.Exercise on creating a HTML page with a form containing various controls
Aim:To create a HTml page with a form containing various controls.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
1. <form> Tag
The <form> tag is used to create an HTML form for user input. It acts as a container
for various input elements like text fields, checkboxes, buttons, etc.
Attributes of <form>:
1. action: Specifies the URL where form data will be sent.
○ Example: <form action="submit.php">
2. method: Defines the HTTP method used to send form data.
○ Common values:
■ GET: Appends form data to the URL.
■ POST: Sends form data as HTTP request body (secure for sensitive
data).
○ Example: <form method="post">
3. enctype: Specifies how form data should be encoded when submitted.
○ Common values:
■ application/x-www-form-urlencoded (default).
■ multipart/form-data (used for file uploads).
○ Example: <form enctype="multipart/form-data">
4. name: Assigns a name to the form, which can be used for scripting.
○ Example: <form name="userForm">
5. target: Specifies where to display the response after submitting the form.
○ Values: _self, _blank, _parent, _top.
○ Example: <form target="_blank">
6. novalidate: Prevents form validation when submitting.
○ Example: <form novalidate>
2. <input> Tag
The <input> tag is used to create interactive form fields. It is a self-closing tag.
Attributes of <input>:
1. type: Defines the type of input.
○ Common values: text, password, email, number, checkbox, radio, submit, etc.
○ Example: <input type="text">
2. name: Assigns a name to the input field (used for form submission).
○ Example: <input name="username">
3. id: Unique identifier for the input (used for styling or scripting).
○ Example: <input id="email">
4. value: Specifies the initial value of the input field.
○ Example: <input value="default">
5. placeholder: Displays a hint inside the input field.
○ Example: <input placeholder="Enter your name">
6. required: Makes the field mandatory to fill.
○ Example: <input required>
7. readonly: Makes the field non-editable.
○ Example: <input readonly>
8. disabled: Disables the field (uneditable and unclickable).
○ Example: <input disabled>
9. maxlength: Specifies the maximum number of characters allowed.
○ Example: <input maxlength="50">
10. size: Defines the width of the input (in characters).
○ Example: <input size="20">
3. <label> Tag
The <label> tag provides a description or label for an input element.
Attributes of <label>:
1. for: Links the label to an input element using its id.
4. <textarea> Tag
The <textarea> tag is used for multi-line text input.
Attributes of <textarea>:
1. name: Assigns a name to the textarea (used for form submission).
○ Example: <textarea name="comments">
2. id: Unique identifier for the textarea.
○ Example: <textarea id="message">
3. rows: Defines the number of visible text lines.
○ Example: <textarea rows="5">
4. cols: Defines the width of the textarea (in characters).
○ Example: <textarea cols="30">
5. placeholder: Displays a hint inside the textarea.
○ Example: <textarea placeholder="Enter your message">
6. required: Makes the textarea mandatory to fill.
○ Example: <textarea required></textarea>
5. <button> Tag
The <button> tag creates a clickable button.
Attributes of <button>:
1. type: Defines the button type.
○ Values:
■ submit: Submits the form.
■ reset: Resets form fields.
■ button: General button with no default behavior.
○ Example: <button type="submit">Submit</button>
2. disabled: Disables the button.
○ Example: <button disabled>Disabled</button>
3. name: Assigns a name to the button.
○ Example: <button name="actionButton">
4. value: Specifies the value associated with the button (used during submission).
○ Example: <button value="send">
6. <select> and <option> Tags
The <select> tag creates a dropdown menu, and <option> tags define the options
within it.
Attributes of <select>:
1. name: Assigns a name to the dropdown (used for form submission).
○ Example: <select name="country">
2. id: Unique identifier for the dropdown.
○ Example: <select id="city">
3. multiple: Allows multiple selections.
○ Example: <select multiple>
4. size: Defines the number of visible options.
○ Example: <select size="3">
Attributes of <option>:
1. value: Specifies the value associated with the option.
○ Example: <option value="us">United States</option>
2. selected: Pre-selects the option.
○ Example: <option selected>India</option>
3. disabled: Disables the option.
○ Example: <option disabled>Unavailable</option>
7. <fieldset> and <legend> Tags
The <fieldset> tag groups related elements, and the <legend> tag provides a caption
for the group.
Attributes of <fieldset>:
1. disabled: Disables all form elements inside the fieldset.
○ Example: <fieldset disabled>
2. name: Assigns a name to the fieldset (less commonly used).
○ Example: <fieldset name="group1">
Source Code:
<html>
<head>
<title>Employment Application</title>
</head>
<body>
<form>
<h1>Employment Application</h1>
<table>
<th bgcolor="blue" align="center" colspan="4">Personal Details</th>
<tr>
<td>Full Name:</td>
<td><input type="text" name="First Name" placeholder="First Name"></td>
<td><input type="text" name="Middle Name" placeholder="Middle Name"></td>
<td><input type="text" name="Last Name" placeholder="Last Name"></td>
</tr>
<tr>
<td>City/State/Zip Code:</td>
<td><input type="text" name="city" placeholder="city"></td>
<td><input type="text" name="State" placeholder="State"></td>
<td><input type="text" name="Zip code" placeholder="Zip code"></td>
</tr>
<tr>
<td>Phone Number/Email/TelephoneNo:</td>
<td><input type="number" name="phonenumber" placeholder="Phone Number"></td>
<td><input type="email" name="email" placeholder="email"></td>
<td><input type="tel" name="telephone no" placeholder="Telephone"></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" id="male" name="gender" value="male"><label
for="male">Male</label></td>
<td><input type="radio" id="female" name="gender" value="female"><label
for="female">Female</label></td>
<td><input type="radio" id="other" name="gender" value="other"><label
for="other">Other</label></td>
</tr>
<tr>
<td>Hobbies:</td>
<td><input type="checkbox" id="cricket" name="hobbies" value="cricket"><label
for="cricket">Cricket</label></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" id="badminton" name="hobbies" value="badminton"><label
for="badminton">Badminton</label>
</tr>
<tr>
<td></td>
<td><input type="checkbox" id="kabaddi" name="hobbies" value="kabaddi"><label
for="kabaddi">Kabaddi</label></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" id="football" name="hobbies" value="football"><label
for="football">Football</label></td>
</tr>
</table>
<table>
<th bgcolor="blue" align="center" width="46.5%" colspan="3">Employment Eligibility</th>
<tr>
<td>Are You a Indian Citizen?</td>
<td><input type="radio" id="citizen-yes" name="citizen" value="yes"><label for="citizen-
yes">Yes</label></td>
<td><input type="radio" id="citizen-no" name="citizen" value="no"><label for="citizen-
no">No</label></td>
</tr>
<tr>
<td>If no, Are You Allowed to work in India?</td>
<td><input type="radio" id="work-in-india-yes" name="work-in-india" value="yes"><label
for="work-in-india-yes">Yes</label></td>
<td><input type="radio" id="work-in-india-no" name="work-in-india" value="no"><label
for="work-in-india-no">No</label></td>
</tr>
</table>
<table>
<th bgcolor="blue" align="center" colspan="5">Education Details</th>
<tr>
<th></th>
<th>Name</th>
<th>Location</th>
<th>Degree</th>
<th>Result</th>
</tr>
<tr>
<td>High School:</td>
<td><input type="text" name="name" placeholder="School Name"></td>
<td><select>
<option value="select">select</option>
<option value="Proddatur">Proddatur</option>
<option value="Kurnool">Kurnool</option>
<option value="Nandyal">Nandyal</option>
<option value="Kadapa">Kadapa</option>
</select></td>
<td><input type="text" name="degree" placeholder="Degree"></td>
<td><input type="text" name="result" placeholder="Result"></td>
</tr>
<tr>
<td>College or University:</td>
<td><input type="text" name="name" placeholder="College Name"></td>
<td><select>
<option value="select">select</option>
<option value="Proddatur">Proddatur</option>
<option value="Kurnool">Kurnool</option>
<option value="Nandyal">Nandyal</option>
<option value="Kadapa">Kadapa</option>
</select></td>
<td><input type="text" name="degree" placeholder="Degree"></td>
<td><input type="text" name="result" placeholder="Result"></td>
</tr>
<tr>
<td>Any specified Training:</td>
<td><input type="text" name="name" placeholder="Name of Training"></td>
<td><select>
<option value="select">select</option>
<option value="Proddatur">Proddatur</option>
<option value="Kurnool">Kurnool</option>
<option value="Nandyal">Nandyal</option>
<option value="Kadapa">Kadapa</option>
</select></td>
<td><input type="text" name="degree" placeholder="Degree"></td>
<td><input type="text" name="result" placeholder="Result"></td>
</tr>
<tr>
<td>Other Education:</td>
<td><input type="text" name="name" placeholder="Other"></td>
<td><select>
<option value="select">select</option>
<option value="Proddatur">Proddatur</option>
<option value="Kurnool">Kurnool</option>
<option value="Nandyal">Nandyal</option>
<option value="Kadapa">Kadapa</option>
</select></td>
<td><input type="text" name="degree" placeholder="Degree"></td>
<td><input type="text" name="result" placeholder="Result"></td>
</tr>
<tr>
<td colspan="2">Skills You Have:</td>
<td colspan="3"><input type="text" name="skills" placeholder="skills" size="60"></td>
</tr>
<tr>
<td colspan="2">Programming Language You Are Familiar With:</td>
<td colspan="3"><input type="text" name="programming language"
placeholder="Programming Language" size="60"></td>
</tr>
</table>
<table>
<th bgcolor="blue" align="center" width="72%" colspan="4">Education Details</th>
<tr>
<td>Name of the Company:</td>
<td><input type="text" name="companyname" placeholder="Companyname"></td>
</tr>
<tr>
<td>Position You Are Applying for:</td>
<td><input type="text" name="position" placeholder="position"></td>
</tr>
<tr>
<td>Desired Salary:</td>
<td><input type="text" name="salary-expecting" placeholder="Salary Expecting"></td>
</tr>
<tr>
<td>Time:</td>
<td><input type="radio" id="part-time" name="time" placeholder="part-time"><label
for="part-time">Part-Time</label></td>
<td><input type="radio" id="full-time" name="time" placeholder="full-time"><label
for="full-time">Full-time</label></td>
<td><input type="radio" id="temporary" name="time" placeholder="temporary"><label
for="temporary">Temporary</label></td>
</tr>
</table>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>
Output:
Result:
The above HTML program on the HTML page using Form containing various controls are
verified successfully.
4.Exercise on creating a HTML page using Frames
Aim:To create a HTML page using frames.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
Frameset Tag (<frameset>)
The <frameset> tag is used to divide the browser window into multiple sections called
frames, where each frame can load a separate HTML document.
Attributes:
● cols: Specifies the number and size of columns in the frameset.
Example: cols="100, 500, 100" creates three vertical frames with widths of 100px,
500px, and 100px.
Percentages: cols="10%, 80%, 10%"
Remainder: cols="10%, 80%, *"
● rows: Specifies the number and size of rows in the frameset.
Example: rows="100, 500, 100" creates three horizontal frames with heights
of 100px, 500px, and 100px.
Percentages: rows="10%, 80%, 10%"
Remainder: rows="10%, 80%, *"
● border: Specifies the width of the border between frames in pixels.
Example: border="5" sets a 5-pixel border.
border="0" removes the border.
● frameborder: Determines whether a 3D border appears around frames.
Values: 1 (yes), 0 (no)
Example: frameborder="0"
● framespacing: Sets the space between frames within a frameset.
Frame Tag (<frame>)
The <frame> tag defines individual frames in a <frameset>.
Attributes:
● src: Specifies the URL of the page to display in the frame.
Example: <frame src="page.html">
● name: Assigns a name to the frame for targeting links or scripts.
Example: <frame name="frame1">
NoFrames Tag (<noframes>)
The <noframes> tag provides alternative content for browsers that do not support
frames.
Iframe Tag (<iframe>)
The <iframe> tag embeds an HTML document within the current page.
Attributes:
● src: Specifies the URL of the document to embed.
Example: <iframe src="example.html"></iframe>
● height: Sets the height of the iframe in pixels.
Default: 150 pixels
Example: height="300"
● width: Sets the width of the iframe in pixels.
Default: 300 pixels
Example: width="100%"
● name: Assigns a name to the iframe for targeting links or scripts.
Example: <iframe name="iframe"></iframe>.
Program:
FRAME1.HTML:
<html >
<head>
<title>YouTube Mockup</title>
</head>
<body>
<form >
<img src="youtubelogo.jpg" height="25" width="100"><label for="search">Search</label>
<input type="text" id="search" name="search">
<button type="submit">Search</button>
|<a href="#">Browse</a>|
<a href="#">Upload</a>
<a href="#">Create Account</a>|
<a href="#">Sign In</a>
</form>
</body>
</html>
FRAME2 P1.html
<!doctype html>
<html>
<head>
<title>video </title>
</head>
<body>
<h1>Urime Manase from Ninnu kori movie </h1>
<video controls width="100%" height="400">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1735230616/
Krishnarjuna_Yuddham_Video_songs__Urime_Manase_Video_Song___Nani_Anupama_R
ukshar___Hiphop_Tamizha_mnt6sa.mp4" type="video/mp4">
</video>
</body>
</html>
FRAME2 P2.html
<html>
<head>
</head>
<body>
<br>Urime Manase from Ninnu Kori movie Full video song HD(1080p)
<p>Uploaded by <a href="#">surya </a> on feb 22,2022</p>
<p><strong>135,135 views</strong></p> <button>Like</button> <button>Add to</button>
<button>Share</button> <button>download</button>
<h5><u><strong> DESCRIPTION</strong></u></h2><p>For more videos follow our
channel<br></p>
<br> <b>Comments </b><input type="text" placeholder=" add a comment">
<small>
<p>SPY:Very good song</p>
<p>Man:one of my favorite</p>
</small>
<br><br>
<iframe src="add.html" length="300" width="400">
</iframe>
</body>
</html>
FRAME3.HTML
<html>
<head></head>
<body>
<h1> Suggestions </h1> <br>
<video controls width="200" height="125">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1735231265/
Who_Are_You_-
_4K_Video_Song___1Nenokkadine___Mahesh_Babu_Kriti_Sanon___DSP___Sukumar___
Chandra_Bose_kr0pq4.mp4" type="video/mp4"></video>
Who are you ||DSP||MAHESH<br>
<video controls width="200" height="125">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1744721573/
Full_Video_Ee_Raathale_Song_Radhe_Shyam_Prabhas_PoojaHegde_Justin_Prabhakaran
_Krishna_K_dm50e3.mp4" type="video/mp4"></video>
Ninnele || PRABHAS's Radhe shyam<br>
<video controls width="200" height="125">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1744721555/
HIT_3_Telugu_Trailer_Nani_Sailesh_Kolanu_Srinidhi_Shetty_In_Cinemas_May_1st_w6p8v
8.mp4" type="video/mp4"></video>
HIT-3 Trailer<br>
<video controls width="200" height="125">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1744721581/
The_Life_Of_Ram_Video_Song_Telugu_Jaanu_Video_Songs_Sharwanand_Samantha_Go
vind_Vasantha_svsdrf.mp4" type="video/mp4"></video>
Life of ram song<br>
<video controls width="200" height="125">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1744721587/
Arya_2_Movie_Songs_-_My_Love_Is_Gone_-
_Allu_Arjun_Kajal_Agarwal_Navadeep_g3du69.mp4" type="video/mp4"></video>
My love is gone!<br>
<video controls width="200" height="125">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1744721588/
Oh_Sita_Hey_Rama_Video_Song_-
_Sita_Ramam_Telugu_Dulquer_Vishal_Hanu_Raghavapudi_gvpyt9.mp4"
type="video/mp4"></video>
Oo sita Hey rama !!!<br>
<video controls width="200" height="125">
<source src="https://res.cloudinary.com/degpbxpd2/video/upload/v1744721689/
Full_Video_Odiyamma_Song_Hi_Nanna_Nani_Shruti_Haasan_Dhruv_Shouryuv_Hesham_
Abdul_Wahab_nqhhmk.mp4" type="video/mp4"></video>
Oodiyamma<br>
</body>
</html>
main lab.html:
<html>
<head>
<title>You Tube clone</title>
</head>
<frameset rows="2.5%,50%">
<frame src="FRAME1.HTML">
<frameset cols="65%,35%">
<frameset rows="55%,*">
<frame src="FRAME2 P1.HTML"></frame>
<frame src="FRAME2 P2.HTML"></frame>
</frameset>
<frame src="FRAME3.HTML">
</frameset>
</frameset>
<noframes>
<p>This browser does not support frames.</p>
</noframes>
</html>
Output:
Result:The above HTML program using frames has been executed successfully.
5.Exercise on CSS
Aim:To create a HTML page using CSS styles.
Required software and hardware:
Personal computer with VScode or notepad with browser.
Theory:
There are three ways to inserting a style sheet:
1. Inline style sheet
2. Internal style sheet
3. External style sheet
Inline style sheets:
These are three ways to insert a style sheet.
Inline style sheet: It is a style to single element to use inline styles used to apply unique add
style attribute to relevant dement - The style attribute contains any CSS property.
Internal style sheet:
An internal style sheet may be used if one single HTML page has a unique style. It is defined
inside the <style> element inside the head section.
External style sheet:
By using an external sheet you can change the look of an entire website by changing just
one file. Each HTML Page must include a reference to an external style sheet file inside the
<link> element, inside head section.
CSS syntax:
hi {
color: blue;
font-size:12px;
}
Selectors:
1. Element selector: This selector selects HTML elements directly based on element name.
Syntax:
element {
/* css properties */
}
2. ID selector: This selector selects HTML elements using id attribute.
Syntax:
#element ID {
/* css - Properties */
}
3. Grouping selector: This selector selects HTML Page elements in a Group.
Syntax:
element1, element2 {
/* css - Properties */
}
4. Class selector: This selector selects HTML elements using .class attribute.
Syntax:
.class {
/* css-properties */
}
5. Universal selector: This selector selects all the HTML elements in a page.
Syntax:
*{
/* css-properties */
}
Color Properties:
Attributes:
- color: Sets foreground color of text of an HTML element.
- background-color: Sets background color of an HTML element.
- Value: auto / cover / contain.
- background-attachment: Controls scrolling of background image.
Syntax: background-attachment: value;
Values: scroll / fixed
- background: Combines all background properties in one declaration.
Syntax: background: color image repeat attachment Position(size).
Borders Properties:
Attributes:
- border-style: Sets type of border is displayed.
Syntax: border-style: value;
Values: dotted / dashed / Solid / double / none.
- border-width: Sets the width of four borders.
Syntax: border-width: value;
Values: thin / medium / thick.
- border-color: Sets color in four borders.
Syntax: border-color: value;
- border: Sets all properties at once.
Background Properties:
Attributes:
- background-color: Element's background color.
- background-image: Sets an image as the background.
- background-repeat: Repeats the background image.
Values: repeat-X / repeat-y / repeat(default) / no-repeat.
- background-size: Defines the size of the background image.
- background-position: Position of the background image.
Values: Left / Right / Center / Top / Bottom.
Padding Properties:
- padding-top: Gives space between content and its top border.
- padding-bottom: Gives space between content and its bottom border.
- padding-right: Gives space between its right border and content.
- padding-left: Gives space between content and its left border.
- padding: Gives space between content and borders of four sides.
Margin Properties:
- margin-top: Gives space between element and its top side surrounding content.
- margin-bottom: Gives space between element and its bottom side surrounding content.
- margin-right: Gives space between element and its right side surrounding content.
- margin-left: Gives space between element and its left side surrounding content.
- margin: Gives space between elements and all its surrounding content.
Position Property:
Position Property is used to define the position of HTML elements in a webpage.
Syntax: Position: value;
Values:static/ relative/ absolute/ fixed/ sticky
Source code:
//CSS Code:-
p
{
font-size: larger;
font-style:oblique;
background-color:rgb(61, 222, 211);
}
//HTML Code:-
<!DOCTYPE html>
<html>
<head>
<title>experiment:5</title>
<link rel="stylesheet" type="text/css" href="external.css">
<style>
p,h1
{
text-align: center;
font-size: 40px;
font-variant:small-caps;
font-style:normal;
position: sticky;
}
h1.one
{
border-top: double;
border-left:dotted;
border-right: dotted;
border-bottom:solid ;
border-color: rgb(42, 165, 91);
position:sticky;
}
h1.two
{
border-top:solid ;
border-left:dotted ;
border-right:double ;
border-bottom: solid;
border-radius: 10px;
position: sticky;
}
h1.three
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-color: blue;
position:static;
}
#para1
{
font-size: 70px;
color: blue;
position: sticky;
border-style: dotted;
border-radius:100px;
padding: 10px 10px;
margin: 25px;
border:100px solid green;
}
body{
background-image:url("https://media.istockphoto.com/id/1068830604/photo/abstract-blurred-
beautiful-interior-of-lobby-reception-condominium-background-with-bokeh.jpg?
s=612x612&w=0&k=20&c=_vjkk1TfLTlLstBH_Sug_saKem2wz3u6fSigYNAzWAo=");
background-repeat: repeat-y;
background-position: right top;
background-size:contain;
background-attachment:fixed ;
}
h1.four{
margin:10px 20px 30px 40px;
padding: 80px;
border: 1px solid black;
}
.parent{
position:relative;
width:1000px;
height:500px;
border:2px solid black;
font-size:80px;
border-color: brown;
}
.child{
position:absolute ;
top:200px;
left:250px;
width:300px;
height:200px;
border:2px dashed YELLOW;
font-size: 35px;
border-color: RED;
}
h3{
position: sticky;
top: 0;
TEXT-align:CENTER;
}
</style>
</head>
<body>
<p id="para1" STYLE="POSITION:FIXED;">cascading style sheets</p>
<h3>cascading style sheets</h3>
<h2> GOVERNMENT POLYTECHNIC COLLEGE, PRODDATUR.</h2>
<h1 class="one" STYLE="background-color:"BLUE";">Inline Style</h1>
<p STYLE="FONT-SIZE:20PX;background-color:"YELLOW";"><h2> The CSS that is
applied directly within an html element using <b>style</b> attribute is called INLINE
CASCADING STYLE SHEETS
.It is suitable to give unique styles to a single html element.</h2></p><br>
<h1 class="two">Internal Style</h1>
<p><h2>An internal/embedded style sheet is a stylesheet where css styles are applied to
html elements using a style tag which is placed under the head section of the html
document.</h2></p>
<h1 class="three" >External Style</h1>
<p><h2>An external/global cascading style sheet is a style sheet document written
separately from an html document and is linked to the html document using link
tag.</h2></p><br>
<h1 class="four">GOOD MORNING</h1>
<div class="parent">RESPECTED TEACHERS AND MY DEAR FRIENDS
<div class="child">THANK YOU EVERYONE</div>
</div>
</body>
</html>
OUTPUT:-
Result:The above HTML program using css has been executed successfully.
5.Exercise on Designing an XML document.
Aim:To create a HTML on designing an XML document.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
Extensible Markup Language (XML) is a markup language designed for storing and
transporting data. It is both human-readable and machine-readable, making it ideal for data
interchange between different systems.
Key Features:
- *Self-descriptive*: XML uses custom tags to describe data, making it easy to understand.
- *Extensible*: Users can create their own tags, allowing flexibility for various applications.
- *Well-formed and Valid*: XML documents must follow specific syntax rules to be
considered well-formed and can conform to a schema for validation.
Applications:
- *Data Interchange*: Facilitates communication between different software systems.
- *Document Storage*: Organizes and stores information in a structured format.
- *Configuration Files*: Used by applications to define settings and preferences.
Sample Program:
<!DOCTYPE college SYSTEM "College.dtd">
<college>
<student>
<pin>23022-CM-013</pin>
<name>G.Prashanth Kumar</name>
<age>17</age>
<gender>Male</gender>
<marks>948</marks>
</student>
<student>
<pin>23022-CM-020</pin>
<name>K.Chaithanya Pavan Kumar</name>
<age>16</age>
<gender>Male</gender>
<marks>895</marks>
</student>
<student>
<pin>23022-CM-014</pin>
<name>G.Roshini</name>
<age>17</age>
<gender>Female</gender>
<marks>744</marks>
</student>
<student>
<pin>23022-CM-057</pin>
<name>Shaik Haji Baba</name>
<age>18</age>
<gender>Male</gender>
<marks>784</marks>
</student>
<student>
<pin>23022-CM-011</pin>
<name>G.Surya Prakash</name>
<age>17</age>
<gender>Male</gender>
<marks>786</marks>
</student>
<student>
<pin>23022-CM-018</pin>
<name>J.Chaithanya</name>
<age>16</age>
<gender>Female</gender>
<marks>913</marks>
</student>
<student>
<pin>23022-CM-048</pin>
<name>P.Manoj Kumar</name>
<age>17</age>
<gender>Male</gender>
<marks>653</marks>
</student>
<student>
<pin>23022-CM-008</pin>
<name>C.V.Nikitha</name>
<age>16</age>
<gender>Female</gender>
<marks>723</marks>
</student>
<student>
<pin>23022-CM-007</pin>
<name>C.Shyamala Devi</name>
<age>18</age>
<gender>Female</gender>
<marks>757</marks>
</student>
<student>
<pin>23022-CM-050</pin>
<name>R.Dileep Kumar</name>
<age>17</age>
<gender>Male</gender>
<marks>803</marks>
</student>
</college>
Program 2:College.dtd
<!DOCTYPE College
[
<!ELEMENT College(Student)>
<!ELEMENT Student (pin,name,age,gender,marks)>
<!ELEMENT pin (#PCDATA)>
<!ELEMENT name (#CDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT gender (#CDATA)>
<!ELEMENT marks (#PCDATA)>
]>
Output:
Result:
The above XML program has been executed successfully.
7.Exercise on Javascript Functions
Aim:To create a HTML webpage to perform arithmetic operations using functions.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
Function:-
In JavaScript, a function is a block of code that performs a task. It's defined using the
function keyword, a name, and parentheses for parameters. The parameters (inputs) are
specified within the parentheses, and the function body is enclosed in curly braces.
Functions can be defined both in the <head> and in the <body> section of a
document. However, to assure that the function is read/loaded by the browser before it is
called,it could be wise to put it in the <head> section.
Creating Functions:
• Functions contain blocks of code that need to be executed repeatedly.
• Functions can take zero or more arguments, and can optionally return a value.
• Functions can be created in a variety of way 25.
syntax:
function functionname(var1,var2,...,varX)
{
some code
}
● var1, var2, etc are variables or values passed into the function. The { and the }
defines the start and end of the function.
Program:
<html>
<head>
<title>Calculator</title>
<style>
.a{
height:180px;
width:179px;
}
</style>
</head>
<body>
<div class="calculator">
<table border="1" align="center">
<tr align="center">
<td><input type="text" id="display"> <br></td>
</tr>
</table>
<table border="1" align="center" height="300" width="300" class="a">
<tr align="center" >
<td><button onclick="appendNumber('1')" size="40">1</button></td>
<td><button onclick="appendNumber('2')">2</button></td>
<td><button onclick="appendNumber('3')">3</button></td>
<td><button onclick="appendOperator('+')">+</button> <br> </td>
</tr>
<tr align="center" cellspacing="1">
<td><button onclick="appendNumber('4')">4</button></td>
<td><button onclick="appendNumber('5')">5</button></td>
<td><button onclick="appendNumber('6')">6</button></td>
<td><button onclick="appendOperator('-')">-</button> <br></td>
</tr>
<tr align="center">
<td><button onclick="appendNumber('7')">7</button> </td>
<td><button onclick="appendNumber('8')">8</button> </td>
<td><button onclick="appendNumber('9')">9</button> </td>
<td><button onclick="appendOperator('')"></button> <br></td>
</tr align="center">
<tr align="center">
<td><button onclick="appendNumber('0')">0</button> </td>
<td><button onclick="clearDisplay()">C</button> </td>
<td><button onclick="calculateResult()">=</button></td>
<td><button onclick="appendOperator('/')">/</button></td>
</tr>
</table>
</div>
<script>
function appendNumber(number)
{
document.getElementById('display').value += number;
}
function appendOperator(operator)
{
document.getElementById('display').value += ' ' + operator + ' ';
}
function clearDisplay()
{
document.getElementById('display').value = '';
}
function calculateResult()
{
let expression = document.getElementById('display').value;
try
{
let result = eval(expression);
document.getElementById('display').value = result;
}
catch (error)
{
document.getElementById('display').value = 'Error';
}
}
</script>
</body>
</html>
Output:
1.Giving input
2.Output
For live Demonstration click here:click here
Result:The calculator designed using javascript functions is functioning successfully.
8.Exercise on Javascript Arrays
Aim:To create a HTML webpage to demonstrate javascript arrays.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
1. Definition:
An array is a data structure used to store multiple values in a single variable.
It is an ordered collection where each element has a numeric index starting from 0.
2. Characteristics:
○ Indexed Collection: Elements are accessed using their index.
○ Dynamic Size: Arrays can grow or shrink dynamically.
○ Heterogeneous: Arrays can store different data types.
○ Sparse Arrays: Arrays can have missing indices or "holes."
3. Common Operations:
○ Accessing/Modifying: Access elements via their index using square brackets.
○ Adding/Removing: Use methods like push(), pop(), unshift(), and shift().
4. Built-in Methods:
○ Combining: concat() to merge arrays.
○ Extracting: slice() to extract elements.
○ Finding: indexOf() to find an element’s index, and includes() to check
existence.
○ Transforming: map() and filter() to modify or filter arrays.
○ Sorting/Reversing: Use sort() and reverse() to reorder elements.
○ Reducing: reduce() to combine elements into a single value.
5. Iteration:
Arrays can be iterated using for loops, for...of, and forEach().
6. Properties:
○ length: Returns the number of elements in the array.
○ Array.isArray(): Checks if a variable is an array.
7. Multi-Dimensional Arrays:
Arrays can store other arrays, forming grids or matrices.
Source code:
<html>
<head>
<style>
#dis{
color:rgb(38, 47, 145);
}
body{
background-color:rgb(243, 205, 231) ;
}
</style>
</head>
<body>
<h1 align="center"> ARRAYS SORTING</h1>
Enter a array Element:
<input type="number" id="value">
<button onclick="push()">ADD</button><br>
<p id="dis"></p>
<button onclick="sortArray()">Alphabetic SORT(ASC) </button>
<button onclick="sortdesc()">Alphabetic SORT(DESC)</button>
<button onclick="nacc()">Numeric SORT(ASC)</button>
<button onclick="ndec()">Numeric SORT(DESC)</button>
<p id="demo"></p>
<p id="des"></p>
<script>
let array=[ ];
function push(){
array.push(document.getElementById("value").value);
document.getElementById("value").value="";
document.getElementById("dis").innerHTML=" Entered array is :" +array;
}
function sortdesc(){
array.sort().reverse();
alert(array);
let var2="Sorting in aphabetic descending order:";
let var1=array;
document.getElementById("demo").innerHTML=var2+array;
}
function sortArray(){
array.sort();
alert(array);
let var2="Sorting in Alphabetic ascending order:";
let var1=array;
document.getElementById("demo").innerHTML=var2+array;
}
function nacc(){
array.sort(function (a,b){return(a-b)});
let var2="Sorting in numeric ascending order:";
let var1=array;
document.getElementById("demo").innerHTML=var2+var1;
alert(array);
}
function ndec(){
array.sort(function (a,b){return(b-a)});
let var2="Sorting in numeric descending order:";
let var1=array;
document.getElementById("demo").innerHTML=var2+array;
alert(array);
}
</script>
</body>
</html>
Output:
1.Alphabetic Ascending Sort function:
2.Sorting in alphabetic descending order:
3.Numeric sorting in ascending order:
4.Numeric sorting in Descending order:
Result:The above program has been executed successfully.
9.Mouse Events using JQuery
Aim:To create a HTML webpage to demonstrate mouse events using jquery.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:-
jQuery
● jQuery is a feature rich JavaScript Library that simplifies JavaScript programming.
● It is easy to learn and provides powerful functionalities.
jQuery Syntax
The jQuery syntax is designed for selecting HTML elements and performing actions
on them.
Basic Syntax:
● $(selector).action()
● $ → Defines/accesses jQuery.
● selector → Finds/selects HTML elements.
● action() → Performs an action on the selected elements.
jQuery Mouse Event Methods
The following methods handle mouse-related events in jQuery:
● click()
● dblclick()
● mouseenter()
● mouseleave()
● mousedown()
● mouseup()
Commonly Used jQuery Event Methods
1. $(document).ready()
● Executes a function when the document is fully loaded.
2. click()
● Attaches an event handler function to an element.Executes when the user
clicks on the element.
3. dblclick()
● Triggers when the user double-clicks on the element.
4. mouseenter()
● Executes when the mouse pointer enters the element.
5. mouseleave()
● Executes when the mouse pointer leaves the element.
6. mousedown()
● Executes when any mouse button is pressed down while over the element.
7. mouseup()
● Executes when any mouse button is released while over the element.
8. mouseover()
● Triggers when the mouse pointer is over the selected element.
9. mousemove()
● Triggers when the mouse pointer moves within the selected element.
Source Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Mouse events</title>
<style>
div {
padding:1px;
text-align:center;
background-color:pink;
border:solid 2px red;
margin:100px;
}
</style>
</head>
<body>
<div><h1><p id="key">Original Text</p></h1></div>
<script>
$(document).ready(function()
{
$("div").mouseenter(function(){
$("#key").text("Mouse Entered");
});
$("div").mouseleave(function(){
$("#key").text("Mouse Leave");
});
$("#key").mouseup(function(){
$("#key").text("Mouse Up");
});
$("#key").mousedown(function(){
$("#key").text("Mouse Down");
});
$("#key").mouseover(function(){
$("#key").text("Mouse Over");
});
$("#key").mouseout(function(){
$("#key").text("Mouse Out");
});
$("#key").dblclick(function(){
$("#key").text(" Mouse Double Clicked");
});
$("#key").click(function(){
$("#key").text("Mouse Clicked");
})
});
</script>
</body>
</html>
Output:
When mouse entered into component
When mouse leaved the component
When mouse is clicked
When mouse is double clicked
When the mouse pointer is over the component
When the mouse pointer is out of the component
When the mouse button is pressed down
When the mouse button is released
Result:The above program has been executed successfully.
10.Effects of JQuery
Aim:To create a HTML webpage to apply the effects of Jquery.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:
1. Show/Hide Methods
These methods control the visibility of elements.
hide():Hides the selected element.
Syntax:hide(speed, callback)
● The speed parameter can be "slow", "fast", or a number in milliseconds.
● The callback is optional and executes after hiding is complete.
show():Displays the hidden element with an optional animation speed and callback
function.
Syntax:show(speed, callback)
toggle().Toggles the visibility of the selected elements.
Syntax:toggle(speed, callback)
● If the element is visible, it hides; if hidden, it shows.
2. Fade Methods
These methods change the opacity of elements gradually.
fadeIn():Changes the opacity of selected elements from hidden to visible.
Syntax:fadeIn(speed, callback)
fadeOut():Gradually reduces the opacity of selected elements to 0 and then sets
display: none.
Syntax:fadeOut(speed, callback)
fadeTo():Adjusts the opacity of the selected element to a specific value between 0
and 1.
Syntax:fadeTo(speed, opacity, callback)
3. Slide Methods
These methods create smooth sliding animations.
slideDown():Reveals the hidden element by sliding it down.
Syntax:slideDown(speed, callback)
slideUp(speed, callback):Hides the element by sliding it up.
Syntax:slideUp(speed, callback)
slideToggle():Toggles between slideDown() and slideUp().
Syntax:slideToggle(speed, callback)
Source Code:
<html>
<head>
<title>JQuery Effects</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
div{
border:5px solid lightgrey;
padding:5px;
background-color:pink;
}
.button{
border:none;
color:white;
padding:15px 32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size: 16px;
margin:4px 2px;
cursor:pointer;
}
.button1{background-color: #04aa6d;}
.button2{background-color: #008cba;}
</style>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#p1").hide(1000);
});
$("#show").click(function(){
$("#p1").show(1000);
});
$("#toggle").click(function(){
$("#p1").toggle(1000);
});
$("#fadeout").click(function(){
$("#p2").fadeOut();
});
$("#fadein").click(function(){
$("#p2").fadeIn(1000);
});
$("#fadetol").click(function(){
$("#p2").fadeTo("slow",0.2);
});
$("#fadetoh").click(function(){
$("#p2").fadeTo("slow",1);
});
$("#slidedown").click(function(){
$("#p3").slideDown();
});
$("#slideup").click(function(){
$("#p3").slideUp();
});
$("#slidetoggle").click(function(){
$("#p3").slideToggle();
});
});
</script>
</head>
<body>
<h1><br/><div id="p1" align="center">jQuery Effects - Hide, Show</div></h1>
<button class="button button1" id="hide">Hide</button>
<button class="button button1" id="show">Show</button>
<button class="button button1" id="toggle">Toggle</button>
<h1><br/><br/><div id="p2" align="center" style="">jQuery Effects - Fade</div></h1>
<button class="button button2" id="fadeout">Fade Out</button>
<button class="button button2" id="fadein">Fade In</button>
<button class="button button2" id="fadetol">Fade to 0.2</button>
<button class="button button2" id="fadetoh">Fade to 1.0</button>
<h1><br/><br/><div id="p3" align="center">jQuery Effects - Slideup,
Slidedown,Toggle</div></h1>
<button class="button button1" id="slideup">Slide Up</button>
<button class="button button1" id="slidedown">Slide Down</button>
<button class="button button1" id="slidetoggle">Slide Toggle</button>
</body>
<html>
Output:1.Show,Fade In,Slide Down
2..Hide,Fade Out,Slide up:
3.Fade to 0.2:
Result:The above program has been executed successfully.
11. CHANGING CSS PROPERTIES IN JQUERY
Aim:Creating an HTML Webpage to Demonstrate Dynamic CSS Property Changes Using
jQuery
Required software and hardware:
Personal computer with any VS code or notepad with browser.
Theory:
jQuery Class and CSS Manipulation Methods:
1️.addClass(className)
● The .addClass() method adds one or more CSS classes to the selected elements.
● It does not remove existing classes but appends new ones.
Syntax:
$(selector).addClass("className");
2️.removeClass(className)
● The .removeClass() method removes one or more classes from the selected
elements.
● If no class name is provided, all classes will be removed.
Syntax:
$(selector).removeClass("className");
3️.toggleClass(className, state)
● The .toggleClass() method adds the class if it is not present and removes it if it is
present.
● An optional state parameter can be provided to forcefully add (true) or remove (false)
the class.
Syntax:
$(selector).toggleClass("className");
$(selector).toggleClass("className", state);
4️.css(property, value)
● The .css() method sets or retrieves the CSS properties of selected elements.
Syntax (Set a single property):
$(selector).css("property", "value");
● selector: Specifies the elements whose CSS will be modified.
● property: The CSS property to be changed.
● value: The value to assign to the property.
Syntax (Set multiple properties):
$(selector).css({
"property1": "value1",
"property2": "value2"
});
● Multiple CSS properties can be defined within an object.
Source code:-
<html>
<head>
<title>JQuery Effects</title>
<style type="text/css">
#div{
border:5px solid lightgrey;
padding:5px;
background-color:pink;
text-align:center;
}
.button{
border:2px solid grey;
color:white;
padding:15px 32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size: 16px;
margin:4px 2px;
cursor:pointer;
}
.button1{background-color: #04AA6D;}
.button2{background-color: #008CBA;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#btnBorder").click(function()
{
$("#div1").css("border","2px solid tomato");
});
$("#btnColor").click(function()
{
$("#div1").css("color","blue");
});
$("#btnBColor").click(function()
{
$("#div1").css("background-color","lightpink");
});
$("#btnFont").click(function()
{
$("#div1").css("font","18px arial");
});
});
</script>
</head>
<body>
<h1><div id="div1">Demonstration on Changing border,font,backgroungcolor,etc using
CSS properties in jQuery</div></h1>
<br><input class="button button1" id="btnBorder" type="button" value="change border"/>
<input class="button button2" id="btnColor" type="button" value="change font color"/>
<input class="button button1" id="btnFont" type="button" value="click to change font"/>
<input class="button button2" id="btnBColor" type="button" value="change background
color"/>
</body>
</html>
Output:-
Before clicking any of the buttons:
After clicking all the buttons:
Result:-The above program executed successfully.
12.Write a JavaScript program using ResponsiveSlides JQuery plugin (download from
responsiveslides.com)
Aim: Creating an HTML webpage to demonstrate the use of the ResponsiveSlides jQuery
plugin for implementing a responsive image slider.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:-
ResponsiveSlides.js is a lightweight jQuery plugin that helps you create responsive
and automatic image slideshows. It adjusts the layout of images and captions based on the
screen size, ensuring that your slideshow looks good on both desktop and mobile devices.
Key Features of ResponsiveSlides.js:
● Responsive Design: The plugin automatically adjusts the slideshow layout for
various screen sizes, ensuring a smooth user experience across devices.
● Auto Play: You can set the slides to automatically transition from one to the next.
● Manual Navigation: You can enable navigation controls like previous/next arrows or
pager dots for user control.
● Customizable Speed: You can customize the speed of transitions between slides.
How to Use ResponsiveSlides.js:
1. HTML Structure:
Create an unordered list (<ul>) with an ID or class for the slideshow.Each list item
(<li>) represents a slide containing an image.
2. jQuery Initialization:
The plugin is initialized by selecting the target element (usually the ul element) and
applying the .responsiveSlides() function.
Inside the function, options are passed to customize the behavior of the slideshow.
3. Options:
auto: Defines whether the slideshow will automatically transition between slides.
pager: Controls the visibility of pagination dots (usually displayed at the bottom of the
slideshow).
nav: Determines if navigation arrows (previous/next) are visible for manual control of
the slideshow.
speed: Specifies the transition speed (in milliseconds) between slides.
namespace: Adds a custom prefix to CSS class names for styling.
maxwidth: Sets the maximum width for the slideshow.
4. CSS Styling:
You can apply custom CSS to style the slideshow, images, navigation arrows, and
pagination.The plugin uses specific class names (e.g., .rslides, .callbacks_nav) that you can
target with your custom styles.
In summary, ResponsiveSlides.js is a simple, lightweight plugin for creating
responsive, automatic image slideshows with customizable options for navigation,
transitions, and layout.
Source code:-
//HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Slide Show using jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="responsiveslides.css">
<link rel="stylesheet" href="style.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 300,
namespace: "slider-callback",
maxwidth: "550px"
});
});
</script>
</head>
<body>
<h2>Famous places in india </h2>
<div id="wrapper">
<div class="responsive-slider">
<ul class="rslides" id="slider">
<li>
<img
src="https://res.cloudinary.com/degpbxpd2/image/upload/v1739516769/32ddb97d-a424-
4374-9681-3b10d3f08227.png" alt="">
<p class="caption">lepakshi</p>
</li>
<li>
<img src="https://res.cloudinary.com/degpbxpd2/image/upload/v1739516599/
ddb6e472-441b-4a57-8162-4ec0511ae6b6.png" alt="">
<p class="caption">charminar</p>
</li>
<li>
<img src="https://res.cloudinary.com/degpbxpd2/image/upload/v1739516430/
eed80a6d-d2bf-4c29-b324-b3c5f1b87a5d.png" alt="">
<p class="caption">gandikota</p>
</li>
<li>
<img
src="https://res.cloudinary.com/degpbxpd2/image/upload/v1739516336/9b231997-1e17-
418f-98cf-845532f6ede7.png" alt="">
<p class="caption">Taj mahal</p>
</li>
<li>
<img
src="https://res.cloudinary.com/degpbxpd2/image/upload/v1739516314/08a5be76-5225-
49cb-823e-e87139145306.png" alt="">
<p class="caption">Red fort</p>
</li>
</ul>
</div>
</div>
</body>
</html>
//CSS code:-
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
}
.rslides img {
display: block;
height: 50%;
float: left;
width: 100%;
border: 0;
}
.next {
margin-left: 450px;
}
Output:
Result:-The above program executed successfully.
13. INSTALLATION OF APACHE +PHP+MY SQL
AIM:-To install the following on local machine
● Apache Web Server
● My SQL
● PHP and configure it to work with Apache Webserver and MySQL.
Required software and hardware:
Personal computer with any VS code or notepad with browser.
Theory:-
PHP: Hypertext Preprocessor
PHP (Hypertext Preprocessor) is a widely-used, open-source scripting language
designed for server-side web development. It is embedded within HTML and executed on
the server, making it suitable for dynamic web pages and applications.
Key Features of PHP
● Server-Side Scripting – Executes on the server and sends HTML to the browser.
● Open-Source & Cross-Platform – Runs on Windows, Linux, and macOS.
● Embedded in HTML – PHP code is mixed with HTML for dynamic content
generation.
● Database Support – Works with MySQL, PostgreSQL, MongoDB, and more.
● Easy to Learn – Syntax is simple and similar to C, JavaScript, and Perl.
● Secure & Scalable – Provides encryption, session handling, and scalability for large
applications.
Apache Web Server
● Purpose: Handles HTTP requests and serves web pages.
● Key Features: Open-source, supports multiple languages (PHP, Python), modular,
and cross-platform.
● Usage: Hosts websites, handles dynamic content processing.
MySQL (Database Management System)
● Purpose: Stores and manages structured data using SQL.
● Key Features: Fast, scalable, secure, and widely used in web applications.
● Usage: Works with PHP for dynamic content (e.g., user authentication, e-
commerce).
XAMPP (Local Server Environment)
● Purpose: Provides an easy way to develop and test web applications locally.
● Components:
o Apache (Web Server)
o MySQL (Database)
o PHP (Scripting Language)
o phpMyAdmin (Database GUI)
● Why Use?: Pre-configured, cross-platform, and ideal for beginners.
Procedure:-
XAMPP is the most popular PHP development environment.
XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP,
and Perl. The XAMPP open source package has been set up to be incredibly easy to install
and to use.
1. Go to the official XAMPP website
2. Click on the appropriate OS of yours and now the XAMPP installer file will start
downloading in 5 seconds.
3. Run .exe file
When you download the software package, you can start the XAMPP installation.
Double-click on the file ending with the .exe file.
4.Click Next to start the procedure.
5. Select all components and then click Next.
6. Select the folder to install XAMPP and click Next. It is recommended to install the
software into the default folder.
7.Untick the Learn more about Bitnami for XAMPP checkbox and click Next.
8.Click Next to launch installation.
9.Wait until the process is finished.
10.Check that the Do you want to start the Control Panel now? checkbox is ticked and
click Finish.
11.Now open the XAMPP software.
12.Now start the required modules(we started apache and MySQL below) Green
background around Apache and MySQL marks that these modules work correctly.
13.In the browser address line enter localhost. If you see the Welcome to XAMPP for
Windows! notification, the environment is set up and ready for work.
Result:-The XAMPP with Apache,MariaDB,PHP,Perl is installed successfully.
14.PHP arrays
Aim: To create a php program to demonstrate the different types of arrays in php.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:-
Types of Arrays in PHP
● Arrays in PHP are used to store multiple values in a single variable.
● The elements of an array may have different data types.
PHP provides three main types of arrays:
1. Indexed Arrays:
Indexed arrays store elements with a numeric index, which starts from 0. These are
used when you need to store a simple list of values. The elements can be accessed using
their index numbers.
Syntax:
$array = array(value1, value2, value3);
echo $array[index];
2. Associative Arrays:
Associative arrays use named keys instead of numeric indexes. These are useful
when data needs to be stored with specific keys for better readability and access. The keys
act as identifiers for the values.
Syntax:
$array = array("key1" => value1, "key2" => value2);
echo $array["key"];
3. Multidimensional Arrays:
Multidimensional arrays contain other arrays as their elements. These are used to
represent complex data structures, like tables or matrices. They can have multiple levels
(nested arrays), allowing data to be organized hierarchically.
Syntax:
$array = array(
array(value1, value2),
array(value3, value4)
);
echo $array[row][column];
Some other important functions
count() Function
The count() function returns the number of elements in an array or properties in an
object. It can count recursively using COUNT_RECURSIVE for multidimensional arrays.
var_dump() Function
The var_dump() function outputs detailed information about a variable, including its
type and value. It is mainly used for debugging complex data structures.
Program:-
<!DOCTYPE html>
<html>
<body>
<?php
//associative arrays
$a=array("a"=>"red","b"=>"green","c"=>"blue");
$temp="red";
echo "Associative Array : ";
var_dump($a);
echo "<br>";
$c=in_array($temp, $a);
echo "Red exists in the associative array? " . ($c ? "Yes" : "No") . "<br>";
echo "Key of red is: ".array_search("red",haystack: $a)."<br><br>";
//multidimensional arrays
$b=array(
array(5,7,8,9,2,3,1),
array(2,9,8,5,0,2,6),
array(8,2,3,4,8,6,7));
echo "Multi Dimensional Array :".'($b)'."<br>";
$smallest =$b[0][0];
foreach ($b as $subArray) {
foreach ($subArray as $value) {
echo "$value ";
if ($value < $smallest) {
}
}
echo"<br>";
}
for ($t = 0; $t < count($b); $t++) {
for ($j = 0; $j < count($b[$t]); $j++) {
if ($b[$t][$j] < $smallest) {
$smallest = $b[$t][$j];
$index=[$t,$j];
}
}
}
echo "<br>The smallest number in the multidimensional array is: ".$smallest;
echo "<br>The index of smallest number '$smallest' ".'in array $b is ';
echo '['.$index[0].']['.$index[1].']';
?>
</body>
</html>
Output:-
Result:-The above php program for types of arrays is executed successfully.
15.Accessing HTML Form Elements Using PHP
Aim: To design a form and access the elements of form and access the elements of the
form using PHP.
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:-
PHP Form Handling
PHP form handling is a crucial aspect of web development, enabling interaction
between users and a web server. When a user submits a form, the data is sent to the server
for processing. PHP uses superglobal variables such as $_GET and $_POST to collect
form data, depending on the request method used.
GET Method
The GET method sends form data as a part of the URL in query parameters. It is
commonly used for retrieving information, such as search queries or filtering options.
Characteristics of GET:
● Data is appended to the URL, making it visible in the browser’s address bar.
● Has a character limit (~2048 characters).
● Can be bookmarked and stored in browser history.
● Less secure, as data remains in the browser cache and can be seen in logs.
● Used when sensitive data is NOT involved.
Example Use Case:
● Search forms (search?q=php+tutorial)
● Filtering products on an e-commerce website
POST Method
The POST method sends data within the HTTP request body, making it invisible in
the URL. It is used when transmitting sensitive or large amounts of data.
Characteristics of POST:
● Data is not exposed in the URL, making it more secure than GET.
● No character limit, allowing large form submissions.
● Cannot be bookmarked or stored in browser history.
● Supports file uploads and complex form submissions.
● Used when handling sensitive information.
Example Use Case:
● Login forms (username & password)
● Contact forms
● File uploads
PHP Superglobals for Form Handling
PHP provides superglobal arrays to handle form submissions:
1. $_GET → An associative array containing data sent using the GET method.
2. $_POST → An associative array containing data sent using the POST
method.
Superglobals are available in any part of the script, making form data easy to
access.
Program 1:(getpostfinal.php):-
<?php
$resultp = "";
$resultg = "";
// Handle POST request
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["calculate"])) {
if (isset($_POST["num1"]) && isset($_POST["num2"]) && isset($_POST["operation"])) {
$num1 = $_POST["num1"];
$num2 = $_POST["num2"];
$operation = $_POST["operation"];
switch ($operation) {
case "add":
$resultp =" $num1 + $num2 = ".($num1+$num2);
break;
case "subtract":
$resultp =" $num1 - $num2 = ".($num1-$num2);
break;
case "multiply":
$resultp =" $num1 * $num2 = ".($num1*$num2);
break;
case "divide":
if ($num2 != 0) {
$resultp =" $num1 / $num2 = ".($num1/$num2);
} else {
$resultp = "Cannot divide by zero!";
}
break;
default:
$resultp = "Invalid operation";
}
}
echo "The form elements are accessed using<b> POST </b> method<br>The result of
$resultp";
}
// Handle GET request
if ($_SERVER["REQUEST_METHOD"] == "GET" && isset($_GET["calculate"])) {
if (isset($_GET["num1"]) && isset($_GET["num2"]) && isset($_GET["operation"])) {
$num1 = $_GET["num1"];
$num2 = $_GET["num2"];
$operation = $_GET["operation"];
switch ($operation) {
case "add":
$resultg =" $num1 + $num2 = ".($num1+$num2);
break;
case "subtract":
$resultg =" $num1 - $num2 = ".($num1-$num2);
break;
case "multiply":
$resultg =" $num1 * $num2 = ".($num1*$num2);
break;
case "divide":
if ($num2 != 0) {
$resultg =" $num1 / $num2 = ".($num1/$num2);
} else {
$resultg = "Cannot divide by zero!";
}
break;
default:
$resultg = "Invalid operation";
}
echo "The form elements are accessed using <b>GET</b> method<br>The result of
$resultg";
}
}
?>
Program 2:(getpostfinal.html):-
<html>
<head>
<title>PHP Calculator</title>
</head>
<body>
<h2>PHP Calculator using POST</h2>
<form method="post" action="getpostfinal.php">
Enter first number: <input type="number" name="num1" required><br>
Enter second number: <input type="number" name="num2" required><br>
Select operation:
<select name="operation">
<option value="add">Addition (+)</option>
<option value="subtract">Subtraction (-)</option>
<option value="multiply">Multiplication (*)</option>
<option value="divide">Division (/)</option>
</select><br>
<input type="submit" name="calculate" value="Calculate">
</form>
<h2>PHP Calculator using GET</h2>
<form action=getpostfinal.php method="get">
Enter first number: <input type="number" name="num1" required><br>
Enter second number: <input type="number" name="num2" required><br>
Select operation:
<select name="operation">
<option value="add">Addition (+)</option>
<option value="subtract">Subtraction (-)</option>
<option value="multiply">Multiplication (*)</option>
<option value="divide">Division (/)</option>
</select><br>
<input type="submit" name="calculate" value="Calculate">
</form>
</body>
</html>
Output:-(getpostfinal.html)
After clicking the calculate button of form with POST method:
After clicking the calculate button of form with GET method:
Result:-The form elements accessing using the PHP are successfully executed.
16.Exercise on database table using functions
Aim: To perform CRUD operations on database table using database functions in PHP
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:-
● PHP provides built-in functions to connect, manipulate, and manage MySQL
databases efficiently. MySQL is one of the most popular database management
systems used alongside PHP.
● In MySQL, data is stored in tables, which consist of rows (records) and columns
(fields). PHP interacts with MySQL using the MySQLi (MySQL Improved)
extension.
Connecting PHP to MySQL
● Before performing any database operations, we must establish a connection to the
MySQL server. PHP provides the mysqli_connect() function to achieve this.
PHP MySQL Procedural Methods
1. Connecting to MySQL
$connection = mysqli_connect(servername, username, password, dbname);
if (!$connection) {
die("Connection failed: " . mysqli_connect_error());
}
2. Closing the Connection
mysqli_close($connection);
3. Handling Connection Errors
mysqli_connect_error();
4. Executing a Single Query
mysqli_query(connection, query);
5. Executing Multiple Queries
mysqli_multi_query(connection, query);
6. Creating a Database
$query = "CREATE DATABASE dbname";
mysqli_query($connection, $query);
7. Creating a Table
$query = "CREATE TABLE table_name (column1 datatype, column2 datatype, ...)";
mysqli_query($connection, $query);
8. Inserting Data
$query = "INSERT INTO table_name (column1, column2, ...) VALUES (value1, value2, ...)";
mysqli_query($connection, $query);
9. Retrieving Data
$query = "SELECT column_name(s) FROM table_name";
$result = mysqli_query($connection, $query);
10. Fetching Data from Result
$row = mysqli_fetch_assoc(result);
11. Updating Data
$query = "UPDATE table_name SET column1 = value1 WHERE condition";
mysqli_query($connection, $query);
12. Deleting Data
$query = "DELETE FROM table_name WHERE condition";
mysqli_query($connection, $query);
Program:-
<html>
<head><title>PHP</title></head>
<body>
<?php
$servername="localhost";
$username="prashanth";
$password="abc";
$conn=mysqli_connect($servername,$username,$password);
if(!$conn){
die("connection failed:".mysqli_connect_error());
}
else{
echo "Connection established successfully<br>";
}
$sql="CREATE DATABASE sample";
$database="sample";
if(mysqli_query($conn,$sql))
{
echo "DataBase '".$database."' Created Successfully<br>";
}else{
echo "Error in database creation:".mysqli_error($conn);
}
$conn=mysqli_connect($servername,$username,$password,$database);
$table="CREATE TABLE student(
pin INT(10) PRIMARY KEY,
s_name VARCHAR(50) NOT NULL,
age INT(2) NOT NULL,
phone_no BIGINT(15)
)";
if(mysqli_query($conn,$table)){
echo "Table 'Student' created Successfully<br><br>";
}
else{
echo "error in table creation:".mysqli_error($conn);
}
$ins1="INSERT INTO student VALUES(13,'Kumar',18,9014581033)";
if(mysqli_query($conn,$ins1)){
echo "In 'student' table one row inserted <br>";
}else{
echo "error in data insertion:".mysqli_error($conn);
}
echo "Table data is<br>";
$sel=mysqli_query($conn,"SELECT *FROM student");
if(mysqli_num_rows($sel)>0){
while($row = mysqli_fetch_array($sel)){
echo "PIN:".$row["pin"]."--Name:".$row["s_name"]."--Age:".$row["age"]."--Phone
no:".$row["phone_no"]."<br>";
}
}
else {
echo "0 results<br>";
}
$ins1 = "INSERT INTO student (pin, s_name, age, phone_no) VALUES
(20, 'Chaithanya', 17, 7867685989),
(11, 'Surya', 18, 6554654652),
(48, 'Manoj', 17, 5678766589),
(57, 'Haji', 18, 5866956634)";
if(mysqli_query($conn,$ins1)){
echo "<br>'Student' table after inserting Multiple rows successfully";
}else{
echo "Error in data insertions:".mysqli_error($conn)."<br>";
}
echo"<br>Table data is:"."<br>";
$sel=mysqli_query($conn,"SELECT *FROM student");
if(mysqli_num_rows($sel)>0){
while($row = mysqli_fetch_array($sel)){
echo "PIN:".$row["pin"]."--Name:".$row["s_name"]."--Age:".$row["age"]."--Phone
no:".$row["phone_no"]."<br>";
}
}
else {
echo "0 results<br>";
}
$del="DELETE FROM student WHERE pin=48";
if(mysqli_query($conn,$del)){
echo "<br>Deleted row where pin no = 48. (Query = ".$del.")<br>";
}else{
echo "Error in deletion operation:".mysqli_error($conn)."<br>";
}
echo"Table data after deletion is:"."<br>";
$sel=mysqli_query($conn,"SELECT *FROM student");
if(mysqli_num_rows($sel)>0){
while($row = mysqli_fetch_array($sel)){
echo "PIN:".$row["pin"]."--Name:".$row["s_name"]."--Age:".$row["age"]."--Phone
no:".$row["phone_no"]."<br>";
}
}
else {
echo "0 results<br>";
}
$up="UPDATE student SET phone_no=9441935316 WHERE pin=57";
if(mysqli_query($conn,$up)){
echo "<br>Row where pin = 57 updated Successfully(Update query = $up ).<br>";
}else{
echo "<br>error in updation of record".mysqli_error($conn)."<br>";
}
$sel=mysqli_query($conn,"SELECT *FROM student");
echo"Table data after updation is:"."<br>";
if(mysqli_num_rows($sel)>0){
while($row = mysqli_fetch_array($sel)){
echo "PIN:".$row["pin"]."--Name:".$row["s_name"]."--Age:".$row["age"]."--Phone
no:".$row["phone_no"]."<br>";
}
}
else {
echo "0 results";
}
mysqli_close($conn);
?>
</body>
</html>
Output:-
Result:-The various database functions are explained and CRUD operations performed on
database tables successfully.
17.Cookie
Aim: To create and destroy a cookie in PHP
Required software and hardware:
Personal computer with VS code or notepad with browser.
Theory:-
PHP Cookies:-
A cookie is often used to identify a user. A cookie is a small file that the server
embeds on the user's computer. Each time the same computer requests a page with a
browser, it will send the cookie too. With PHP, you can both create and retrieve cookie
values.
Create Cookies With PHP:-
A cookie is created with the setcookie() function.
Syntax:- setcookie(name, value, expire, path, domain, secure, httponly);
Note:
● The setcookie() function must appear BEFORE the <html> tag.
● The value of the cookie is automatically URLencoded when sending the cookie, and
automatically decoded when received (to prevent URLencoding, use setrawcookie()
instead).
Modify a Cookie Value:-
To modify a cookie, just set (again) the cookie using the setcookie() function:
Delete a Cookie:-
To delete a cookie, use the setcookie() function with an expiration date in the past:
Check if Cookies are Enabled:-
The following example creates a small script that checks whether cookies are
enabled. First, try to create a test cookie with the setcookie() function, then count the
$_COOKIE array variable.
Program:-
<?php
$cookie_name="";
$cookie_value="";
if($_SERVER["REQUEST_METHOD"] == "POST"){
if(!empty($_POST["cname"]) && !empty($_POST["cvalue"])){
$cookie_name=$_POST["cname"];
$cookie_value=$_POST["cvalue"];
//creation of cookie
setcookie($cookie_name,$cookie_value,time()+(86400*30),"/");
header("Location: " . $_SERVER['PHP_SELF']);
exit();
}
}
if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["destroy"]) &&
isset($_POST["cdname"]) && !empty($_POST["cdname"]))
{
setcookie($_POST["cdname"],"",time()-36000,"/");
header("Location: " . $_SERVER['PHP_SELF']);
exit();
}
?>
<html>
<head><title>PHP Cookies</title>
</head>
<body>
<h3>Creating a cookie</h3>
<form method="POST">
Enter the name for the cookie<input type="text" name="cname"><br>
Enter the value for the cookie<input type="text" name="cvalue"><br>
<input type="submit">
</form>
<form method="POST"><br>
<h3> Destroying a Cookie:</h3><br>
Enter the name for the cookie<input type="text" name="cdname" required><br>
Click to destroy cookie<button name="destroy">Click to destroy</button>
</form>
<?php
if(!empty($_COOKIE))
{
echo "Existing cookies : <br>";
foreach ($_COOKIE as $key => $value) {
echo "Cookie Name: '" . $key . "' is set.<br>";
echo "Its Value is: " .$value . "<br><br>";
}
} else {
echo "No cookies are set.";
}
?>
</body>
</html>
Output:-
Result:-The cookies are created and destroyed successfully.
You might also like
- Method of Testing To Determine Flow Resistance of HVAC Ducts and Fittings100% (1)Method of Testing To Determine Flow Resistance of HVAC Ducts and Fittings6 pages
- Practical File OF Web Development: Submitted To:-Submitted ByNo ratings yetPractical File OF Web Development: Submitted To:-Submitted By19 pages
- Tag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" ElementNo ratings yetTag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" Element4 pages
- Web Application and Development: Lab ManualNo ratings yetWeb Application and Development: Lab Manual52 pages
- Satish Mulgi Satishkumarmulgi@dypvp - Edu.inNo ratings yetSatish Mulgi Satishkumarmulgi@dypvp - Edu.in28 pages
- HTML 2. TAG or Element: Syntax:: Tools: 1. 2No ratings yetHTML 2. TAG or Element: Syntax:: Tools: 1. 29 pages
- Summary of Intensive Quenching Processes Theory and Applications 17pNo ratings yetSummary of Intensive Quenching Processes Theory and Applications 17p17 pages
- Bahan Ajar Dvb-t2 Utk Dikalt TX Digital 2013No ratings yetBahan Ajar Dvb-t2 Utk Dikalt TX Digital 201356 pages
- Practice Questions For Test and Exam PreparationNo ratings yetPractice Questions For Test and Exam Preparation3 pages
- Further Properties of Splines and B-SplinesNo ratings yetFurther Properties of Splines and B-Splines17 pages
- Design of Fuzzy Logic Controller For A Cross Flow Shell and Tube Heat-ExchangerNo ratings yetDesign of Fuzzy Logic Controller For A Cross Flow Shell and Tube Heat-Exchanger3 pages
- Complete Mechanics o Level Notes 2023-24 SyllabusNo ratings yetComplete Mechanics o Level Notes 2023-24 Syllabus19 pages
- Handbook of Production Economics Subhash C. Ray (Editor)100% (1)Handbook of Production Economics Subhash C. Ray (Editor)72 pages
- 中三數學三角學的應用 (Applications of Trigonometry) 附件測驗卷 (4份,附答案) .No ratings yet中三數學三角學的應用 (Applications of Trigonometry) 附件測驗卷 (4份,附答案) .65 pages
- Chapter #1 Concepts of Computer ProgrammingNo ratings yetChapter #1 Concepts of Computer Programming35 pages
- @vtucode - in 21CS643 Module 4 2021 SchemeNo ratings yet@vtucode - in 21CS643 Module 4 2021 Scheme189 pages
