Scribd
Upload
7 views

IWPT

Uploaded by

Suvedha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

IWPT

Uploaded by

Suvedha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

PAGE .

NO:

EX.NO:01(a) BASIC HTML TAGS


DATE :

AIM:
To write basic HTML tags.
HTML:
Markup language for web pages.
HTML-hyper text markup language.
HTML TAG:
<HTML> element is root element of html page
<HTML>- start tag
:
</HTML>-end tag
HEAD TAG:
The <head> element contains meta information about the html page .
TITLE TAG:
The <title> element specifies a title for html page
BODY TAG:
The <body> element defines documents”s body and is a container for all
visible contents such as heading, paragraphs, images etc.
HTML HEADING:
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>

HTML PARAGRAPH TAG:


HTML paragraph are defined with <p> tag
PAGE .NO:

EXAMPLE: <p> Food Order </p>


HTML LINKS:
HTML links are hyperlinks. The HTML <a> tag defines a hyperlink.
SYNTAX:
<a href="url">link text</a>
EXAMPLE:
<a href =”Food-order.php”> Food Order<a>

HTML IMAGE TAG:


The HTML <img> tag is used to embed an image in a web page.
SYNTAX:
<img src="url" alt="alternatetext">
 Img : The <img> tag creates a holding space for the referenced image.
 Src: specifies the path to the image.
 Alt: Specifies an alternate text for an image
EXAMPLE: <img src =”pizza.jpg” alt=”Pizza”
<BR> TAG:
The <br> tag create empty space and move to the new line.
SYNTAX:<br>

<TABLE> TAG:
A table in HTML consists of table cells inside rows and columns.
SYNTAX:
<TABLE>
.
.
</TABLE>
TABLE CELLS:
Each table cell is defined by a <td> and a </td> tag.
SYNTAX:
<table>
<td> Data Text</td>
PAGE .NO:

</table>
EXAMPLE:
<table>
<tr>
<td>Food Name</td>
<td>Price</td>
</tr>
</table>
TABLE ROW TAG:
Each Table row starts with a <tr>
And end with a </tr> tag.
SYNTAX:
<table>
<tr>
:
:
</tr>
EXAMPLE:
<table>
<tr>
<td>Food Name</td>
<td>Price</td>
</tr>
</table>
TABLE HEADERS TAG:
Sometimes you want your cells to be table headers cells. In those cases use the <th>
tag instead of the <td> tag.
SYNTAX:
<table>
<tr>
<th> Heading Text </th>
</tr>
PAGE .NO:

</table>
EXAMPLE:
<table>
<tr>
<th>S.No </th>
<th>Username</th>
<th>Action</th>
</tr>
</table>
HTML HORIZONTAL RULES:
The <hr> tag defines a thematic break in an HTML page, and is most often displayed
as a horizontal rule.
SYNTAX: <hr>
EXAMPLE:
<p> Pizza</p>
<hr>
HTML LIST TAG:

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

<DIV> ELEMENT:
The <div> element is often used to group sections of a web page together.
SYNTAX:
<div>
:
PAGE .NO:

:
</div>

HTML FORMS :
An HTML form is used to collect user input.
An HTML form is used to collect user input.
SYNTAX:
<form>
:
:
</form>
<INPUT> ELEMENT:
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
SYNTAX: <input type="text">
<LABEL> ELEMENT:
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users
SYNTAX:<label for="text name">HTML</label>
TEXT FIELDS:
The <input type="text"> defines a single-line input field for text input.
SUBMIT BUTTON:
The <input type="submit"> defines a button for submitting the form data to a form-
handler.
EXAMPLE: <input type=”submit” value=”submit”>

RESULT:
The basic html tags are studied thoroughly.
PAGE .NO:

EX.NO:01(b) CREATING RESUME USING HTML


DATE :

AIM:
To create a resume using basic html tags.
CODING:
<html>
<head>
<title>Resume</title>
</head>
<body>
<div class="container">
<h1><B><Fontcolor="Black"><center><b>RESUME</b></center></Font></B></h1>
<!--Personal Details-->
<h2 style ="background-color: dimgrey;"><b>Personal Details</b></style></h2>
<hr>
<img src="C:\Users\sivas\OneDrive\Pictures\Suvedha.jpg" align="right"
height="250"width="200" >
<p><b>Name:</b>Suvedha S</p>
<p><b>Email:</b><a href="#">[email protected]</a></p>
<p><b>GitHub:</b><a href="#">webdesignstudio27</a></p>
<p><b>Instagram:</b><a href="#">webdesign_studio_</a></p>
<p><b>Phone:</b>9790969480</p>
<p><b>Location:</b>15,Madha Kovil st, Melaiyule, Thurumalairayanpattinam,
Karaikal - 609606</p>

<!--Profile Details-->
<h2 style ="background-color: dimgrey;"></h3style><b>Profile</b></h2>
<hr>
<p>I am a Bachelor of Computer Applications graduate with experience working as a
Junior Full Stack Web Developer.
My skills include front-end and back-end development, database management,
various programming languages, problem solving techniques and web design.
I am passionate about creating innovate and user-friendly websites that meet the
needs of clients.
I am dedicated to continuously expanding my skillset and staying up-to-date with
latest technologies in the field of web development.
</p>

<!--Education Details-->
<h2 style ="background-color: dimgrey;"<b>Education</b></h2>
<hr>
<table border="1" cellspacing="1" bordercolor="Black">
<tr>
<th>Course</th>
<th>Name of Insitute</th>
<th>Specification</th>
<th>Percentage/CGPA</th>
PAGE .NO:

<th>Year of Passing</th>
</tr>
<tr>
<td>SSLC</td>
<td>Govt. Girls High School, Thirumalairayanpattinam</td>
<td>Genaral</td>
<td>2018</td>
<td>76%</td>
</tr>
<tr>
<td>HSC</td>
<td>Govt. Higher Secondary School, Thirumalairayanpattinam</td>
<td>Computer Science, Mathematicatis</td>
<td>2020</td>
<td>63.83%</td>
</tr>
<tr>
<td>Undergraduate</td>
<td>Indira Gandhi College of Arts and Science, Puducherry</td>
<td>Computer Science</td>
<td>2023</td>
<td>76%</td>
</tr>
<tr>
<td>Postgraduate</td>
<td>Puducherry Technological University, Puducherry</td>
<td>Computer Science</td>
<td>2025</td>
<td>Nill</td>
</tr>
</table>

<!--Skills-->
<h2 style ="background-color: dimgrey;"><b>skills</b></h2>
<hr>
<ul>*Front-End & Back-End Development</ul>
<ul>*Microsoft Office</ul>
<ul>*Database Management</ul>
<ul>*Programming Languages</ul>
<ul>*Problem Solving Technics</ul>
<ul>*Relaionship Bulinding</ul>
<ul>*Team Work And Collaboration</ul>
<ul>*Time Management</ul>
<ul>*Documentation And Reporting</ul>
<ul>*Creative Ability</ul>
<ul>*Logical Approach</ul>
<ul>*Attention To Details</ul>
<ul>*Communication</ul>

<!--Programming Language-->
PAGE .NO:

<h2 style ="background-color: dimgrey;"><b>Programming Language</b></h2>


<hr>
<ul>*C</ul>
<ul>*C++</ul>
<ul>*C#</ul>
<ul>*Java</ul>
<ul>*JavaScript</ul>
<ul>*HTML/CSS</ul>
<ul>*PHP</ul>
<ul>*MySQL</ul>
<ul>*Bootstrap</ul>
<ul>*AJAX</ul>
<ul>*UI/UX Design</ul>

<!--Course-->
<h2 style ="background-color: dimgrey;"><b>Course</b></h2>
<hr>
<ul>* Full Stack Web Development Nov 2022</ul>
<ul>* Google UI/UX Design Sep 2022</ul>

<!--Internship-->
<h2 style ="background-color: dimgrey;"><b>Internship</b></h2>
<hr>
<h3>JUNIOR FULL STACK WEB DEVELOPMENT Jan 2023 – Jul 2023</h3>
<h5>CENTAC OFFICE, Govt. of PUDUCHERRY</h5>
<p>This is real time project. I working this project at my bachelor’s degree.
This project is based on <b>FULL_STACK WEB DEVELOPMENT</b>. It’s used
for undergraduate student’s merit list selection process.
This project at I performed role in <b>Team Leader, Database administrator, Back-
End Developer.</b>
</p>

<!--Experience-->
<h2 style ="background-color: dimgrey;"><b>Experience</b></h2>
<hr>

<h3><li>JUNIOR FULL STACK WEB DEVELOPMENT Jan 2023 – Jul


2023</li></h3>
<p>CENTAC OFFICE, Govt. of PUDUCHERRY</p>
<p>This is real time project. I working this project at my bachelor’s degree.
This project is based on <b>FULL_STACK WEB DEVELOPMENT</b>. It’s
used for undergraduate student’s merit list selection process.
This project at I performed role in <b>Team Leader, Database administrator,
Back-End Developer.</b>
</p>
<h3><li>FULL STACK WEB DEVELOPMENT May 2024 - Present</li></h3>
<P>SELF, PUDUCHERRY<p>
<p>I start Self-Learning in Full Stack Web Development. I developed some
E-Commerce projects and I post projects on my Instagram page.
PAGE .NO:

</p>
<!--Certificate-->
<h2 style ="background-color: dimgrey;"><b>Certificate</b></h2>
<hr>
<ul>• Bachelor Of Computer Application - Aug 2023</ul>
<ul>• Full Stack Web Development - Nov 2022</ul>
<ul>• Google UI/UX Designing - Sep 2022</ul>
<ul>• NCC B Certificate - May 2022</ul>
<ul>• State Sports Competitions(Table Tennis) - 2015-2020</ul>
<ul>• The Bhart Scout and Guide - 2015-2019</ul>

<!--Language-->
<h2 style ="background-color: dimgrey;"><b>Language</b></h2>
<hr>
<ul>* English</ul>
<ul>* Tamil</ul>

<!--Achievements-->
<h2 style ="background-color: dimgrey;"><b>Achievements</b></h2>
<hr>
<ul> Under Graduated</ul>
<ul> Developing Technical Skills</ul>
<ul> Leading Team</ul>
<ul> Communicate to People</ul>
<ul> Developing Projects</ul>
<ul> Developing Websites</ul>
<ul> Winning State Sports Competitions</ul>

<!--Hobies-->
<h2 style ="background-color: dimgrey;"><b>Hobies</b></h2>
<hr>
<ul>• Travelling </ul>
<ul>• Playing </ul>
<ul>• Photograpy </ul>
<ul>• Watching Movies </ul>
<!--Declaration-->
<h2 style ="background-color: dimgrey;"><b>Declaration</b></h2>
<hr>
<p>I consent to the processing of my personal data for the purpose of requirements for
the position to which I am applying.</p>
<img src="C:\Users\sivas\OneDrive\Documents\SUVEDHA\IMG-20230909-
WA0011[1]-min.jpg" align="right" height="100"width="120" >
<br>
<p><b>Place:</b>Puducherry</p>
<p><b>Date:</b>05/09/2024</p>
<p align="right">Suvedha S</p>
<p align="right"><b>Signature</b></p>
</div>
</body>
</html>
PAGE .NO:

OUTPUT:
PAGE .NO:
PAGE .NO:

RESULT:
Thus, the preparation of resume using basic HTML tags has been done
successfully.
PAGE .NO:

EX.NO:02 FOOD ORDER WEBSITE


DATE :

AIM:
To design a shopping website for the project Food Order website.

PROJECT DESCRIPTION:
The Food Order Website project allows users to browse menus, place orders, and make
payments online. It includes features such as user registration, restaurant listings, dynamic
menu options, real-time order tracking, and secure payment integration. Administrators
manage restaurant profiles, menu items, and order processing. Users can search for specific
cuisines, view order history, and rate their experiences. The seamless interface is designed to
provide a user-friendly experience, ensuring a smooth and convenient food ordering system.

1.HOME:
The Home page provides an overview of the website, showcasing popular restaurants,
featured dishes, and special promotions. Users can easily navigate to various sections like the
menu, restaurant listings, and order history. It acts as the central hub for discovering food
options and starting the ordering process. The homepage is designed to be visually appealing
and interactive. Users can log in or register from the home page to personalize their
experience.

2.RESTAURANT:
The Restaurant section allows users to explore a variety of available restaurants. Each
restaurant has its own page showcasing its menu. Users can filter restaurants by cuisine,
ratings, and price range.

3.CHAT:
The Chat feature allows users to interact with customer support or restaurant staff in
real-time for inquiries and issue resolution. Users can ask questions about menu items,
delivery status, or any other service-related concerns. The chat interface is simple and
intuitive, ensuring quick response times. The chat system also helps in resolving problems
like order mistakes or refunds. Users can receive instant support for a better overall
experience.

Attributes: msg_id, u_id, msg, sender_type, timestamp.

Functions: Send message().

4.MY ORDERS:
The My Orders section displays a history of all the orders a user has placed, with detailed
information such as order status, delivery time, and payment details. Users can track the
status of ongoing orders in real-time. This section also allows users to reorder previous meals
PAGE .NO:

with a single click, making the process convenient. The history feature helps users keep track
of their favourite dishes and restaurants. Users can easily manage cancellations or complaints
related to any order.

Attributes: o_id, u_id, title, quantity, price, tot_qty, tot_price, status, date.

Functions: Add Order(), Update Order(), Delete Order().

5.PAYMENT :
The Payment Model for the Food Order website offers three options: Cash on Delivery
(COD), QR Code, and Credit Card. Cash on Delivery allows users to pay in cash when the
food is delivered. QR Code payment generates a scannable code for users to complete
transactions via mobile wallets. Credit Card payment enables users to securely enter card
details for instant payment processing. These options ensure flexibility and convenience for
customers while maintaining secure and reliable transactions.

Attributes: cod, debit, debit_no, cvv, date, qr.

Functions: Add Payment().

6.BILL GENERATION:
The Bill Generation Model calculates the total cost of an order, including applicable
taxes, and generates an invoice for the user. The bill includes details such as item names,
quantities, prices, subtotal, tax percentage, tax amount, and the final total. Taxes are
calculated based on predefined rates, such as GST or sales tax, and applied to the subtotal.
The generated bill is presented to the user at checkout and can be printed for reference.

7.LOGIN/REGISTRATION:
The Login/Registration model provides users with secure access to their accounts.
New users can register by providing their personal details, while returning users can simply
log in using their credentials. Once logged in, users gain access to personalized features such
as order history, saved addresses, and preferred payment methods. The model also includes
password recovery and account management features. Users can manage their profile and
settings directly from this section.

Attributes: u_id, username, f_name, l_name, email, phone, password, address, status, date.

Functions: Add User().

8.DASHBOARD:
The Dashboard is the central hub for administrators, providing a comprehensive
PAGE .NO:

overview of the website's activity. It displays key metrics such as order volume, revenue,
customer feedback, and active users. The dashboard includes visual representations like
graphs and charts for easy analysis. Admins can track restaurant performance, customer
satisfaction, and sales trends. It serves as a quick-access point to manage all aspects of the
platform.

9.MANAGE USERS:
The Manage Users section allows admins to view and control user accounts. They can
add, edit, or deactivate user accounts as necessary. Admins can view detailed user profiles,
including order history and payment information. The system also provides tools to resolve
user complaints and handle account-related issues. This feature ensures that user data is
properly managed, promoting a secure environment for all platform users.

Attributes: u_id, username, f_name, l_name, email, phone, password, address, status, date.

Functions: Add User(), Update User(), Delete User().

10.MANAGE CATEGORY:

The Manage Category Model allows administrators to organize and maintain food
categories for better user experience. Admins can add, edit, or delete categories such as
beverages, appetizers, main courses, and desserts. Each category is linked to specific menu
items, ensuring a structured and navigable menu. Categories can be updated dynamically to
reflect seasonal items, promotions, or special events. This model enhances user convenience
by enabling easy filtering and selection of desired food types.

Attributes: c_id, c_name, date.

Function: Add Category(), Update Category(), Delete Category().

11.MANAGE RESTAURANT:
In the Manage Restaurant model, admins can oversee restaurant profiles, including
menu items, operating hours and closing hours. They can add new restaurants, edit existing
ones, or remove restaurants from the platform. This section allows admins to maintain quality
and consistency across the listings. Admins can also monitor restaurant performance based on
customer reviews and order statistics. It ensures that only reliable and efficient restaurants are
part of the platform.

Attributes: rs_id,c_id,title,email,phone,url,o_hr,c_hr,o_days,address,image,date.

Function: add restaurant(), update restaurant(), delete restaurant().


PAGE .NO:

12.MANAGE ORDERS:
The Manage Orders section provides admins with the ability to monitor all incoming
orders across restaurants. Admins can view order details, statuses, and any issues related to
delivery or payments. They can intervene in the order process if necessary, such as
processing refunds or cancellations. This model helps maintain smooth operations by
ensuring that all orders are completed on time. Admins also have the ability to track customer
complaints and resolve them efficiently.

Attributes: o_id, u_id, title, quantity, price, tot_qty, tot_price, status, date.

Functions: Add Order(), Update Order(), Delete Order().

13.MANAGE FOOD MENUS:


In the Manage Food Menus section, admins can update and organize the food menus of
different restaurants. This includes adding new dishes, adjusting prices, and categorizing
menu items. Admins ensure that the menus remain up to date and aligned with restaurant
offerings. They can also promote special items or deals directly on the platform. The section
is designed to help keep menus fresh and engaging for customers, improving the overall
ordering experience.

Attributes: d_id, rs_id, title, slogan, price, img.

Functions: Add Menu(), Update Menu(), Delete Menu().

14.CUSTOMER SUPPORT:

The Customer Support model on the admin side helps manage user inquiries and
resolve issues related to orders, payments, and services. Admins can view customer
complaints, track the status of issues, and respond promptly to ensure customer satisfaction.
They can communicate with users through chat or email to address concerns such as delayed
deliveries, incorrect orders, or refunds. The system allows for efficient ticket management,
ensuring no query is overlooked. This feature is vital for maintaining a high level of customer
service and fostering trust in the platform.

Attributes: id, u_id, reply, timestamp.

Function: Reply Message().

RESULT:
Thus, the website has been designed for the project Food Order Website.
PAGE .NO:

EX.NO:02(a) JAVASCRIPT OBJECT


DATE :

AIM:
To create an object using JavaScript in the project Food Order Website.

DESCRIPTION:
A JavaScript object is an entity having state and behaviour (properties and
method). JavaScript is an Object based language. In JavaScript, an object is astandalone entity,
with properties and type. Everything is an object in JavaScript.
Here, we don’t create a class to get the object. We directly create objects.
1. BY OBJECT LITERAL
Object = {property1:value1,......property n:value n};
2. BY CREATING INSTANCE OF OBJECT
var objectname = new Object();
3. BY USING AN OBJECT CONSTRUCTOR
Here, you need to create a function with arguments. Each argument value can
be assigned in the current object by using this keyword.

OBJECTS IMPLEMENTATION IN THE PROJECT SAMPLE CODE:


var user=[
{
username:"Suvedha"
password:"Suvedha@27"
}
PAGE .NO:

OUTPUT:

RESULT
Thus, the JavaScript objects for the project Food Order Website are implemented
successfully and the output is verified.
PAGE .NO:

EX.NO:02(b) JAVASCRIPT ARRAY


DATE :

AIM:
To create an arrays using JavaScript in the project Food Order Website.

DESCRIPTION:
JavaScript array is an object that represents a collection of similar type of
elements. JavaScript arrays are used to store multiple values in a single variable.
There are 3 ways to construct array in JavaScript:
CONSTRUCTING ARRAYS:
1. BY ARRAY LITERAL
var arrayname = [value1, value2,...valueN];
2. BY CREATING INSTANCE OF ARRAY
var arrayName = new Array();
3. BY USING AN ARRAY CONSTRUCTOR
Here, you need to create instance of array by passing arguments in constructor
so that we don’t have to provide value explicitly. var arrayName = new Array(“”, “”);
ACCESSING ELEMENTS OF ARRAY:
We can access an array element by referring to the index number. Var name =
arrayName[index];
CHANGING AN ARRAY ELEMENT:
We can change the array value by assigning new value to the array element referring
to the index number. arrayName[index] = “newvalue”;
ACCESSING THE FULL ARRAY:
document.getElementById(“demo”).innerHTML = arrayName;

ARRAYS IMPLEMENTATION IN THE PROJECT SAMPLE CODE:

[
{
username:"Suvedha"
password:"Suvedha@27"
},

{
username:"priya"
password:"Priya@01"
},
{
username:"shalini"
password:"Shalini@01"
},
]
let username = document.getElementById("username").value
let password = document.getElementById("password").value
PAGE .NO:

OUTPUT:

RESULT:
Thus, the JavaScript arrays for the project Food Order Website are implemented
successfully and the output is verified.
PAGE .NO:

EX.NO:02(c) JAVASCRIPT FUNCTION


DATE :

AIM:
To create functions using JavaScript for the project Food Order Website.
DESCRIPTION:
A JavaScript function is a block of code designed to perform a particular task. The two
main advantages of using JavaScript functions are code reusability and less coding. A function
can zero or more arguments. Arguments are the values passed to the function with which the
function does some operation.

Syntax
function functionname(arg1, arg2,.....,arg n)
{
//code to be executed
}

FUNCTION INVOCATION:
The code inside the function will execute when “something” invokes (calls) the function
● When an event occurs (button click)
● When it is invoked from JS code
● Automatically (self invoked)

FUNCTION IMPLEMENTATION IN THE PROJECT SAMPLE CODE:


function validateForm() {
const firstname = document.getElementById('firstname').value.trim();
const lastname = document.getElementById('lastname').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const password = document.getElementById('password').value.trim();
const cpassword = document.getElementById('cpassword').value.trim();
const username = document.getElementById('username').value.trim();
const address = document.getElementById('address').value.trim();

// Check if any field is empty


if (!firstname || !lastname || !email || !phone || !password || !cpassword || !username || !address)
{
alert('All fields must be filled out!');
return false;
}

// Check if passwords match


if (password !== cpassword) {
alert('Passwords do not match!');
return false;
}
PAGE .NO:

// Password validation: Minimum 8 characters, at least one uppercase, one lowercase, one
digit, and one special character
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-
z\d@$!%*?&#]{8,}$/;
if (!passwordRegex.test(password)) {
alert('Password must be at least 8 characters long and include at least one uppercase letter,
one lowercase letter, one number, and one special character!');
return false;
}

// Phone number validation


if (phone.length < 10 || isNaN(phone)) {
alert('Invalid phone number!');
return false;
}

// Email validation
if (!/\S+@\S+\.\S+/.test(email)) {
alert('Invalid email address. Please enter a valid email!');
return false;
}

return true;
}

OUTPUT:

RESULT:
Thus, the JavaScript functions for the project Food Order Website are implemented
successfully and the output is verified.
PAGE .NO:

EX.NO:02(d) JAVASCRIPT CONTROL STATEMENTS


DATE :

AIM:
To implement the control statements for the project Food Order Website.
DESCRIPTION:
Control Structure is the essential part of any programming language which
is required to control the logic of our program. The control structures within
JavaScript allow the program flow to change within a unit of code or function.
These statements can determine whether or not given statements are executed -
and provide the basis for the repeated execution of a block of code. Commonly
used control statements are:
● if
● while
● do-while
● for
● switch
● break
● continue
SELECTION STATEMENTS:
1. if Syntax:
if (condition)
Statement if the condition is true
2. if...else Syntax:
if (condition)
Statement if the condition is true
else
Statement if the condition is false
3. if....else if Syntax:
if (condition)
Statement if the condition is true
else if (condition)
Statement if another condition is true
else
Statement if the condition is false

LOOPING STATEMENTS:
While:
while statement helps us in implementing the iterative logic of the program.
Syntax:
while( terminating condition)
{
Statement;
}
Do_while:
The do..while loop executes at least once because the condition is checked at the end.
Syntax:
do {
.........
PAGE .NO:

}while(condition);
For loop:
This is the most commonly used programming construct. It consists of initialization part,
condition part and increment/ decrement part.
Syntax:
for (initialization; condition; increment/decrement)
{
Statements
}
CONTROL STATEMENTS IMPLEMENTATION IN THE PROJECT
SAMPLE CODE
function validateForm() {
const firstname = document.getElementById('firstname').value.trim();
const lastname = document.getElementById('lastname').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const password = document.getElementById('password').value.trim();
const cpassword = document.getElementById('cpassword').value.trim();
const username = document.getElementById('username').value.trim();
const address = document.getElementById('address').value.trim();

// Check if any field is empty


if (!firstname || !lastname || !email || !phone || !password || !cpassword || !username || !address)
{
alert('All fields must be filled out!');
return false;
}

// Check if passwords match


if (password !== cpassword) {
alert('Passwords do not match!');
return false;
}

// Password validation: Minimum 8 characters, at least one uppercase, one lowercase, one
digit, and one special character
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-
z\d@$!%*?&#]{8,}$/;
if (!passwordRegex.test(password)) {
alert('Password must be at least 8 characters long and include at least one uppercase letter,
one lowercase letter, one number, and one special character!');
return false;
}

// Phone number validation


if (phone.length < 10 || isNaN(phone)) {
alert('Invalid phone number!');
return false;
}
PAGE .NO:

// Email validation
if (!/\S+@\S+\.\S+/.test(email)) {
alert('Invalid email address. Please enter a valid email!');
return false;
}

return true;
}

OUTPUT:

RESULT:
Thus, the Control Statements for the project Food Order Website are implemented
successfully and the output is verified.
PAGE .NO:

EX.NO:03 JQUERY EFFECTS


DATE :

AIM:
To implement Jquery in the project Food Order Website.
DESCRIPTION:
jQuery is a lightweight, &quot;write less, do more&quot;, 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:
1. HTML/DOM manipulation
2. CSS manipulation
3. HTML event methods
4. Effects and animations
5. AJAX
6. Utilities
jQuery Syntax:
The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery
 A (selector) to &quot;query (or find)&quot; HTML elements
 A jQuery action() to be performed on the element(s)

JQUERY IMPLEMENTATION IN PROJECT SAMPLE CODE:


EFFECT 1:
$(document).ready(function () {
$('.row').hover(
function () {
$(this).addClass('bounce-effect');
},
function () {
$(this).removeClass('bounce-effect');
}
);

EFFECT 2:
$('.icons i, .icons a').hover(
function() {
$(this).css({
'color': '#fff',
'background': 'var(--green)',
'transform': 'rotate(360deg)'
});
}, function() {
$(this).css({
'color': 'var(--black)',
PAGE .NO:

'background': '#eee',
'transform': 'rotate(0deg)'
});
}
);

EFFECT 3:
$('a[href^="#"]').on('click', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
EFFECT 4:
$('.btn-primary').hover(
function() {
$(this).css('background-color', '#27ae60');
}, function() {
$(this).css('background-color', '#666');
}
);
EFFECT 5:
$(function() {
$(".preloader").fadeOut();
}),
jQuery(document).on("click", ".mega-dropdown", function(i) {
i.stopPropagation();
});

OUTPUT:
EFFECT 1:
PAGE .NO:

EFFECT 2:

EFFECT 3:
PAGE .NO:

EFFECT 4:

EFFECT 5:

RESULT:
Thus, the jquery effects for the project Food Order Website are implemented
successfully and the output is verified.
PAGE .NO:

EX.NO:04 PHP
DATE :

AIM:
To implement PHP in the project Food Order Website.
DESCRIPTION:
PHP is a server side scripting language. that is used to develop Static websites or Dynamic
websites or Web applications. PHP stands for Hypertext Pre-processor, that earlier stood for
Personal Home Pages. A PHP file contains PHP tags and ends with the extension ".php".

PHP SYNTAX:
<?php
echo”hello “;
?>
A PHP file can also contain tags such as HTML and client side scripts such as
JavaScript.
● HTML is an added advantage when learning PHP Language. You can
even learn PHP without knowing HTML but it’s recommended you at least
know the basics of HTML.
● Database management systems DBMS for database powered
applications.
● For more advanced topics such as interactive applications and web
services, you will need JavaScript and XML.

PHP IMPLEMENTATION IN THE PROJECT SAMPLE CODE:


<?php
session_start();
error_reporting(0);
include("connection/connect.php");
PAGE .NO:

if(isset($_POST['submit'] )) {
if(empty($_POST['firstname']) ||
empty($_POST['lastname'])||
empty($_POST['email']) ||
empty($_POST['phone'])||
empty($_POST['password'])||
empty($_POST['cpassword']) ||
empty($_POST['cpassword'])) {
$message = "All fields must be Required!";
} else {
$check_username = mysqli_query($db, "SELECT username FROM users where
username = '".$_POST['username']."' ");
$check_email = mysqli_query($db, "SELECT email FROM users where email =
'".$_POST['email']."' ");
$check_phone = mysqli_query($db, "SELECT phone FROM users where phone
= '".$_POST['phone']."' ");

if($_POST['password'] != $_POST['cpassword']) {
echo "<script>alert('Password not match');</script>";
}
elseif(strlen($_POST['password']) < 6) {
echo "<script>alert('Password Must be >=6');</script>";
}
elseif(strlen($_POST['phone']) < 10) {
echo "<script>alert('Invalid phone number!');</script>";
}
elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
echo "<script>alert('Invalid email address please type a valid email!');</script>";
}
elseif(mysqli_num_rows($check_username) > 0) {
echo "<script>alert('Username Already exists!');</script>";
}
elseif(mysqli_num_rows($check_email) > 0) {
echo "<script>alert('Email Already exists!');</script>";
}
elseif(mysqli_num_rows($check_phone) > 0) {
echo "<script>alert('Phone number already exists!');</script>";
} else {
$mql = "INSERT INTO
users(username,f_name,l_name,email,phone,password,address)
VALUES('".$_POST['username']."','".$_POST['firstname']."','".$_POST['
lastname']."','".$_POST['email']."','".$_POST['phone']."','".($_POST['password'])."','".
$_POST['address']."')";
mysqli_query($db, $mql);
header("refresh:0.1;url=login.php");
}
}
}
?>
PAGE .NO:

OUTPUT:

RESULT:
Thus, PHP was implemented in the project Food Order Website and executed
successfully.
PAGE .NO:

EX.NO:05 SESSION TRACKING IN PHP


DATE :

AIM:
To implement session tracking in PHP for the project Food Order Website.
DESCRIPTION:
Session simply means a particular interval of time. Session Tracking is a
way to maintain state (data) of an user. It is also known as session management
in servlet. Http protocol is a stateless so we need to maintain state using session
tracking techniques. Each time user requests to the server, server treats the
request as the new request. So we need to maintain the state of an user to
recognize to particular user. HTTP is stateless that means each request is
considered as the new request.

SESSION TRACKING TECHNIQUES:


There are four techniques used in Session tracking
1. Cookies
2. Hidden Form Field
3. URL Rewriting
4. HttpSession

SESSION TRACKING IMPLEMENTATION IN THE PROJECT


SAMPLE CODE:
<?php
include("../connection/connect.php");
session_start();

// Check if user is logged in


if (!isset($_SESSION['user_id'])) {
header("Location: login.php"); // Redirect to login page
exit();
}

// Optional: Track user activity (e.g., last login)


$user_id = $_SESSION['user_id'];
$last_login_query = "UPDATE users SET last_login = NOW() WHERE u_id = '$user_id'";
PAGE .NO:

mysqli_query($db, $last_login_query);

// Get the logged-in user's data if needed


$user_query = "SELECT username FROM users WHERE u_id = '$user_id'";
$user_result = mysqli_query($db, $user_query);
$user_data = mysqli_fetch_assoc($user_result);
$username = $user_data['username'];
?>

OUTPUT:

RESULT:
Thus, the implementation of session tracking in PHP for the project Food Order
Website has been done successfully.
PAGE .NO:

EX.NO:06 COOKIES IN PHP


DATE :

AIM:
To create cookies in order to display the user’s information for the project
Food Order Website.

DESCRIPTION:
A cookie is a text file that a Web browser stores on a user’s machine. Cookies are a way
for Web applications to maintain application state. They are used by websites for
authentication, storing website information/preferences, other browsing information and
anything else that can help the Web browser while accessing Web servers. HTTP cookies are
known by many different names, including browser cookies, Web cookies or HTTP cookies.
A cookie contains specific information that is encrypted for security purposes. Normally, a
cookie is attached with an HTTP header from the HTTP server to a Web browser in response
to a user request. This stored cookie is sent to the HTTP server whenever access to a specific
website is required. Cookies are managed in two patterns: with expiry date and without expiry
date. Cookies without expiry dates are automatically stored in users’ machines and remain
inside the system’s memory until the user’s browsing terminates. Cookies with an
expiry date expire when that date is surpassed.

The following are the types/variations of cookies:


 Session Cookies:
Created for a specific session, these expire upon the
termination of the user’s browser session.
 Persistent Cookies:
Normally known as tracking cookies, these cookies have a
specific time period before they expire.
 Secure Cookies:
When a user is accessing the server through HTTPS, secure cookies are
used to provide maximum security to user data through encryption.
 Zombie Cookies:
These cookies are automatically recreated after a user has deleted them.

COOKIES IMPLEMENTATION IN PROJECT SAMPLE CODE:


<?php
include("connection/connect.php");
error_reporting(0);
session_start();

// Set timezone to India Standard Time


date_default_timezone_set('Asia/Kolkata');

if (isset($_POST['submit'])) {
$username = $_POST['username'];
$password = $_POST['password'];

if (!empty($username) && !empty($password)) {


// Secure query with prepared statements
PAGE .NO:

$stmt = $db->prepare("SELECT * FROM users WHERE username=? AND


password=?");
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_assoc();

if ($row) {
$_SESSION["user_id"] = $row['u_id']; // Start user session

// Set a cookie for the username (optional, based on your use case)
setcookie("user_id", $row['u_id'], time() + (7 * 24 * 60 * 60), "/"); // Cookie valid for
7 days
setcookie("username", $row['username'], time() + (7 * 24 * 60 * 60), "/"); // Cookie
valid for 7 days

// Update last login date and time


$current_date_time = date('Y-m-d H:i:s'); // Now in IST
$updateStmt = $db->prepare("UPDATE users SET date=? WHERE u_id=?");
$updateStmt->bind_param("si", $current_date_time, $row['u_id']);
$updateStmt->execute();

header("refresh:1;url=index.php");
} else {
$message = "Invalid Username or Password!";
}
} else {
$message = "Please fill in all fields.";
}
}
?>
PAGE .NO:

OUTPUT:

RESULT:
Thus, the cookies has been created in order to display the user’s information for the
project Food Order Website.
PAGE .NO:

EX.NO:07 DATABASE CONNECTIVITY IN PHP


DATE :

AIM:
To establish a database connectivity in the project Food Order Website by
using PHP.

DESCRIPTION:
Database in a collection of inter-related data which helps in efficient retrieval insertion
And deletion of data from database and organises the data in the form of tables, views Schemes,
reports. PHP combined with MYSQL are cross-platform can develop in Windows and serve on
a Unix platform.
The basic steps to create MYSQL database using PHP are:
● Establish a connection to MYSQL serve from your PHP script
● If the connection is successful, write a SQL query to create a database
● Execute the query.

QUERIES:
CREATE DATABASE:
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} // Create database
$sql = "CREATE DATABASE myDB";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully";
}
else {
echo "Error creating database: " . $conn->error; }
$conn->close();
?>
INSERT INTO DATABASE:

INSERT INTO table_name (column1, column2, column3,...)VALUES (value1,


value2, value3,...)
<?php
$servername = "localhost";
$username = "username";

$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
PAGE .NO:

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error); }
$sql = "INSERT INTO MyGuests (firstname, lastname, email) VALUES ('John',
'Doe', '[email protected]')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully"; }
else {
echo "Error: " . $sql . "" . $conn->error;
}
$conn->close();
?>

DELETE FROM DATABASE:

DELETE FROM table_name WHERE some_column = some_value


<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// sql to delete a record
$sql = "DELETE FROM MyGuests WHERE id=3";
if ($conn->query($sql) === TRUE)
{
echo "Record deleted successfully"; }
else { echo "Error deleting record: " . $conn->error; }
$conn->close();
?>

UPDATE IN DATABASE:

UPDATE table_name SET column1=value, column2=value2,...WHERE


some_column=some_value
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);


// Check connection
if ($conn->connect_error)
PAGE .NO:

{
die("Connection failed: " . $conn->connect_error);
}
$sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";
if ($conn->query($sql) === TRUE)
{
echo "Record updated successfully";
}
else {
echo "Error updating record: " . $conn->error; }
$conn->close();
?>
SELECT FROM DATABSE:

SELECT column_name(s) FROM table_name OR SELECT * FROM table_name


<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, lastname FROM MyGuests"; $result =
$conn->query($sql);
if ($result->num_rows > 0)
{ // output data of each row
while($row = $result->fetch_assoc())
{
echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "
"; }
}
else
{
echo "0 results";
}
$conn->close();
?>

PHP DATABASE IMPLEMENTATION IN THE PROJECT SAMPLE


CODE:
<?php
$sql = "SELECT * FROM restaurant ORDER BY rs_id DESC";
$query = mysqli_query($db, $sql);

if (!mysqli_num_rows($query) > 0) {
PAGE .NO:

echo '<td colspan="11"><center>No Restaurants</center></td>';


} else {
while ($rows = mysqli_fetch_array($query)) {

// Fetching the restaurant category


$mql = "SELECT * FROM res_category WHERE c_id='" . $rows['c_id'] . "'";
$res = mysqli_query($db, $mql);
$row = mysqli_fetch_array($res);

echo '<tr>
<td>' . $row['c_name'] . '</td>
<td>' . $rows['title'] . '</td>
<td>' . $rows['email'] . '</td>
<td>' . $rows['phone'] . '</td>
<td>' . $rows['url'] . '</td>
<td>' . $rows['o_hr'] . '</td>
<td>' . $rows['c_hr'] . '</td>
<td>' . $rows['o_days'] . '</td>
<td>' . $rows['address'] . '</td>
<td>
<div class="col-md-3 col-lg-8 m-b-10">
<center>
<img src="Res_img/' . $rows['image'] . '"
class="img-responsive radius"
style="min-width:150px; min-height:100px;" />
</center>
</div>
</td>
<td>' . $rows['date'] . '</td>
<td>
<a href="delete_restaurant.php?res_del=' . $rows['rs_id'] . '"
class="btn btn-danger btn-flat btn-addon btn-xs m-b-10">
<i class="fa fa-trash-o" style="font-size:16px"></i>
</a>
<a href="update_restaurant.php?res_upd=' . $rows['rs_id'] . '"
class="btn btn-info btn-flat btn-addon btn-sm m-b-10 m-l-5">
<i class="fa fa-edit"></i>
</a>
</td>
</tr>';
}
}
?>
PAGE .NO:

OUTPUT:

RESULT:
Thus, the database connectivity has been established in the project Food Order Website
by using PHP successfully.
PAGE .NO:

EX.NO:08 AJAX
DATE :

AIM:
To implement Ajax for the project Food Order Website.

DESCRIPTION:
Ajax (Asynchronous JavaScript and XML) is a method of building interactive
applications for the Web that process user requests immediately. Ajax combines several
programming tools including JavaScript, dynamic HTML (DHTML), Extensible Markup
Language (XML), cascading style sheets (CSS), the Document Object Model (DOM), and the
Microsoft object, XMLHttpRequest. Ajax allows content on Web pages to update immediately
when a user performs an action, unlike an HTTP request, during which users must wait for a
whole new page to load. AJAX communicates with the server using XMLHttpRequest object.

XMLHttpRequest object plays a important role


1. User sends a request from the UI and a javascript call goes to
XMLHttpRequest object.
2. HTTP Request is sent to the server by XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the XMLHttpRequest callback
function.
6. HTML and CSS data is displayed on the browser.
PAGE .NO:

AJAX IMPLEMENTATION IN THE PROJECT

SAMPLE CODE 1:

<?php
session_start();
include("connection/connect.php");

if (!isset($_SESSION['user_id'])) {
http_response_code(401);
echo json_encode(['error' => 'Unauthorized']);
exit();
}

$action = $_GET['action'] ?? '';

if ($action === 'fetch') {


$u_id = $_SESSION['user_id'];

$query = "SELECT
'user' AS sender,
um.message AS content,
um.timestamp AS msg_time
FROM user_messages um
WHERE um.u_id = ?
UNION ALL
SELECT
'admin' AS sender,
ar.reply AS content,
ar.timestamp AS msg_time
FROM admin_replies ar
WHERE ar.u_id = ?
ORDER BY msg_time ASC";

$stmt = $pdo->prepare($query);
$stmt->execute([$u_id, $u_id]);
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($messages);
} elseif ($action === 'send') {
$data = json_decode(file_get_contents('php://input'), true);
$message = $data['message'] ?? '';

if ($message) {
$u_id = $_SESSION['user_id'];
$stmt = $pdo->prepare("INSERT INTO user_messages (u_id, message) VALUES (?, ?)");
$stmt->execute([$u_id, $message]);

echo json_encode(['success' => true]);


} else {
PAGE .NO:

http_response_code(400);
echo json_encode(['error' => 'Invalid message']);
}
} else {
http_response_code(400);
echo json_encode(['error' => 'Invalid action']);
}

SAMPLE CODE 2:

$('#send-reply').on('click', function () {
const reply = $('#reply').val();
const u_id = $('#u_id').val();

if (reply.trim() === '') {


alert('Reply cannot be empty!');
return;
}

$.ajax({
url: 'submit_reply.php', // PHP script to handle reply submission
type: 'POST',
data: { reply: reply, u_id: u_id },
success: function (response) {
if (response.success) {
// Append the new reply to the chat box
const timestamp = new Date().toISOString().slice(0, 19).replace('T', ' ');
$('#chat-box').append(`
<div class="message">
<div class="admin-reply">${reply}</div>
<div class="timestamp admin-timestamp">${timestamp}</div>
</div>
`);
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight); // Scroll to the bottom
$('#reply').val(''); // Clear the reply input field
} else {
alert(response.error || 'Failed to send reply.');
}
},
error: function () {
alert('An error occurred while sending the reply.');
}
});
});
PAGE .NO:

OUTPUT:

RESULT:
Thus, the implementation of Ajax in the project Food Order Website has been
done successfully.

You might also like