JAYARAM

COLLEGE OF ENGINEERING & TECHNOLOGY

KARATAMPATTI - PAGALAVADI, TIRUCHIRAPPALLI 621 014
(Accredited by NAAC ‘B’ Grade)

DEPARTMENT OF INFORMATION TECHNOLOGY

CERTIFICATE

Certified that this is a bonfide record of practical exercises done by

Mr/Ms._____________________________ Register Number ________________________ of V Semester

rd
III Year in IT3511-FULL STACK WEB DEVELOPMENT LABORATORY during the ODD

Semester of 2023 – 2024.

HOD FACULTY IN CHARGE

Submitted for the University Practical Examination held on

EXTERNAL EXAMINER INTERNAL EXAMINER

 JAYARAM
COLLEGE OF ENGINEERING &TECHNOLOG
KARATAMPATTI - PAGALAVADI, TIRUCHIRAPPALLI - 621 014

(Accredited by NAAC ‘B’ Grade)

DEPARTMENT OF INFORMATION TECHNOLOGY

V – SEMESTER / III – YEAR

IT3511-FULL STACK WEB DEVELOPMENT LABORATORY

EX DATE PAGE SIGN
NO NAME OF THE EXPERIMENT NO
1 Develop a portfolio website for yourself which
gives details about yourself for a potential
recruiter
2 Create a web application to manage the TO-
DO list of users, where users can login and
manage their to-do items
3 Create a simple micro blogging application
(like twitter) that allows people to post their
content which can be viewed by people who
follow them.

4 Create a food delivery website where users

can order food from a particular restaurant
listed in the website
5 Develop a classifieds web application to buy
and sell used products

6 Develop a leave management system for an

organization where users can apply different
types of leaves such as casual leave and
medical leave. They also can view the
available number of days

7 Develop a simple dashboard for project

management where the statuses of various
tasks are available. New tasks can be added
and the status of existing tasks can be
changed among Pending, InProgress or
Completed

8 Develop an online survey application where a

collection of questions is available and users
are asked to answer any random 5 questions
 Exp No. 1 Date: ……………

CREATION OF PORTFOLIO WEBSITE FOR RECURITER

AIM:

To create a portfolio website for yourself which gives details about yourself for a potential
recruiter and show its related information.

SOFTARE USED:

 Dreamweaver or Notepad and browser.

DESCRIPTION:

 Step One: Add HTML Skeleton

Type an HTML skeleton code, which is the starting point for your website. It is the structure which
holds the code and ensures that it is properly displayed on the internet.

 Step Two: Add Navigation Bar

The navigation bar is a short representation of the content on the website.

It is one of the first things that a visitor will see.

It helps the visitors to find and navigate through the content on website. It is important to create
well-structured navigation. So that your visitors can find what they are looking for.

 Step Three: Add Hero section

The Hero section, together with the navigation bar, is the first section of your portfolio that people
will see.

It should contain short information about several things such as:

 Who are you?

 What do you offer?
1
  What is your profession?
 Why should people work with you?
 Which actions should you take?

Write in first-person and keep it short and simple.

Additional things preferred in the hero section are:

 Eye-catching graphics, either as a background or side-by-side with the text.

 An action button that leads to content on your portfolio or to the content of another website.

 Step Four: Add About Me section

In this section, you can get creative. This can help you to to stand out.

Here you can personalize the content and write about yourself more in-depth.

The content you can include in this section is:

 Your introduction
 Who are you as a professional
 Your education
 Your skills
 Your work experience (present and/or past)
 Your hobbies
 Your goals and ambitions

In a way, you can consider the "About me" section as a short summary of your CV.

Feel free to write about yourself in first person.

Personalization and making people understand you as a person might bring you more attention.

 Step Five: Add Work Experience section

The work experience section highlights the experience, knowledge, and competence that you have
made along your way.

Here you can add:

 Links to your projects with the project name and/or short description of what the project is about.
 Links to blog posts that you have written with title and/or short description about what it is about.
 Your professional awards or achievements.
 Highlighting your work and your accomplishments is a way to create opportunities for yourself.
 Visual representations such as images or graphics.

2
 Step Six: Add Contact section

The contact section is the section that lets your visitor get in touch with you.

You should always include a way for visitors to contact you, either through a contact form or by writing
down your contact information such as:

 Address
 Email
 Phone number
 E.g. Github profile, LinkedIn profile, Youtube profile and so on.

Step Seven: Add Footer section

The footer can be experienced as a minor section, but it is an important one of every website.

It is about showing critical information based on your website goals and the needs of your visitors.

Often it contains technical information about copyright, but it can hold other information, such as:

 Link to "Privacy policy" page

 Link to "Terms of use" page

 Contact information

 Website navigation links

 Links to social networks

 Link to your shop

ALGORITHM:

1. Define Your Goals: Determine the purpose of your portfolio website. Are you showcasing your
work as a web developer, designer, writer, or any other profession? Clarifying your goals will help
you structure the content and design accordingly.

2. Choose a Platform: Decide on the platform you want to use for building your portfolio website.
Popular options include WordPress, Squarespace, Wix, and custom HTML/CSS/JavaScript.

3. Select a Domain and Hosting: If you want a personalized domain name (e.g.,
www.yourname.com), register it through domain registration services. Choose a reliable web hosting
provider to host your website.

4. Design and Layout: Plan the layout and design of your website. Keep it clean, professional, and
user-friendly. Consider using a responsive design to ensure your website looks good on various
devices.

3
5. Create Necessary Pages:

o Home: The main page of your portfolio.

o About Me: Introduce yourself, your background, and skills.

o Portfolio: Showcase your projects with descriptions and images.

o Contact: Provide a way for visitors to get in touch with you.

6. Gather Content:

o Write a compelling and concise bio that highlights your expertise.

o Collect images and media related to your projects.

o Prepare any additional content you want to display.

7. Develop the Website:

o If you're using a website builder like WordPress or Squarespace, use their templates and drag-and-
drop features to build your website.

o If you're building a custom website, use HTML, CSS, and potentially JavaScript to create the
structure and design.

8. Optimize for SEO: Implement basic Search Engine Optimization (SEO) techniques to improve your
website's visibility in search engines. Use relevant keywords and meta tags.

9. Test and Review: Ensure that all links work correctly, images load properly, and the website is
accessible and user-friendly. Test your website on different browsers and devices.

10. Launch Your Website: Once you're satisfied with the design and content, publish your portfolio
website to your chosen hosting platform.

11. Promote Your Portfolio: Share your portfolio website on social media, professional networking
platforms, and include the link in your resume and job applications.

12. Update Regularly: Keep your portfolio up to date with new projects and skills. Regularly review
and improve your website based on feedback and changing career goals.

4
OUTPUT:

5
RESULT
Thus the portfolio website for yourself which gives details about yourself for a potential recruiter
and relevant information had been displayed.

6
Exp No. 2 Date: ……………

MANAGE AWEB APPLICATION OF TO-DO LIST

AIM:

To create a web application to manage the TO-DO list of users, where users can login and manage their
to-do items.

SOFTARE USED:

Dreamweaver or Notepad and browser.

DESCRIPTION:

Todo Lists are the lists that we generally use to maintain our day-to-day tasks or list of everything that we
have to do, with the most important tasks at the top of the list, and the least important tasks at the bottom.
It is helpful in planning our daily schedules. We can add more tasks at any time and delete a task that is
completed. The four major tasks that we can perform in a TODO list are:

1. Add tasks

2. Update tasks

3. Read tasks

4. Delete tasks

Example:

 index.html: In this file, we will create the basic structure of the project.

 app.js: In this file, we will add the logical section of our project where we will define functions that will
perform the tasks described in the list above.

ALGORITHM:

Algorithm for creating a TO-DO list:

1. Initialize the TO-DO List: Create an empty list to store the tasks.

2. Add a Task: To add a task to the list, prompt the user to enter the task description and any additional
details like due date or priority. Create a task object with the provided information and add it to the
list.

7
3. Display the TO-DO List: Show the user the list of tasks they have added so far. Display the task
descriptions along with any other relevant information like due dates or priorities.

4. Mark a Task as Completed: Allow the user to mark a task as completed. When a task is completed,
update its status in the list.

5. Edit a Task: Give the user the option to edit the details of a task. This could include modifying the
description, due date, priority, or status.

6. Delete a Task: Provide an option for the user to delete a task from the list.

7. Save the TO-DO List: If the TO-DO list application is persistent (i.e., the tasks need to be saved even
after the application is closed), implement a mechanism to save the list to a file or a database.

8. Load the TO-DO List: If the TO-DO list is persistent, implement a mechanism to load the list from
the saved file or database when the application starts.

9. Filter and Sort Tasks (Optional): Optionally, provide the ability to filter tasks based on criteria such
as status, due date, or priority. Also, allow sorting tasks based on different attributes.

10. User Interface: Design and implement a user interface that allows users to interact with the TO-DO
list effectively.

8
OUTPUT:

9
RESULT
Thus the web application to manage the TO-DO list of users, where users can login and
manage their to-do items and relevant information had been displayed.

10
 Exp No. 3 Date: ……………

SIMPLE MICRO BLOGGING APPLICATION

AIM:

To create a simple micro blogging application (like twitter) that allows people to post their content which
can be viewed by people who follow them. and show its related information.

SOFTARE USED:

Dreamweaver or Notepad and browser.

DESCRIPTION:

1. Frontend Interface:

Design a user interface that allows users to:

 Register and log in.

 View their timeline (posts from users they follow).

 Post new content (limited to a certain character limit, like tweets).

 View profiles of other users.

 Follow/unfollow other users.

2. Backend Server:

 Set up a web server (using technologies like Node.js, Python Flask, Ruby on Rails, etc.).

 Handle user registration and login processes using a secure authentication method (e.g., JWT, OAuth).

 Implement API endpoints for handling user actions like posting content, following/unfollowing users, and
fetching timelines.

3. Database:
11
 Choose a database system (e.g., MySQL, PostgreSQL, MongoDB) to store user information, posts, and
follower relationships.Create database tables/collections for users, posts, and followers.

4. User Authentication:

Implement a user authentication system to secure user accounts and access to certain functionalities.

5. Post Creation:

 Allow users to create new posts.

 Store posts in the database, associating them with the respective user.

6. Following Users:

Enable users to follow/unfollow other users.Maintain a table or collection to store follower

relationships.

7. Timeline Generation:

Design a method to generate a user's timeline, including posts from users they follow.Display the timeline
to the user in reverse chronological order (newest posts first).

8.Real-time Updates (optional):

Consider implementing real-time updates for the timeline using WebSockets or a technology like Socket.IO.

9.Deployment:

Deploy your microblogging application to a hosting service or cloud platform (e.g., Heroku, AWS, Azure).

12
 10.Testing and Refinement:

Conduct testing to ensure the application works correctly and handle edge cases.Collect feedback and make
improvements based on user input.

ALGORITHM:

1.User Registration and Login:

 Users can register and log in to the application.

 The application stores user information, including usernames and hashed passwords, securely in the
database.

2.Post Creation:

 When a user creates a new post, the application receives the post content and the user's unique identifier
(user ID).

 The application saves the post in the database, associating it with the user who created it.

 The post should include a timestamp to order the posts chronologically.

3.Following Users:

 Users can choose to follow other users in the application.

 The application updates the user's "following" list in the database, storing the IDs of the users they follow.

4.Timeline Generation:

 To generate a user's timeline, the application retrieves the user's "following" list from the database.

 The application then fetches the latest posts from the users in the "following" list and arranges them in
chronological order (based on the timestamps).

 The timeline displays the aggregated posts from the users the current user follows.

5.Real-time Updates:

 To enable real-time updates for new posts and notifications, the application uses WebSockets or a similar
13
 technology.

 When a user creates a new post, the application pushes the post to the followers' timelines in real time.

 The application also sends notifications to followers whenever someone they follow creates a new post.

6.Character Limit for Posts:

 The application enforces a character limit for posts (e.g., 280 characters) to mimic the Twitter-like
constraint.

 When a user attempts to create a post that exceeds the character limit, the application displays an error
message.

7.User Interaction Handling:

 The application handles user interactions, such as following/unfollowing other users, with appropriate
API endpoints.

 When a user clicks the "follow" button, the application adds the target user to the current user's
"following" list.

 When a user clicks the "unfollow" button, the application removes the target user from the current user's
"following" list.

8.User Profiles:

 The application provides user profiles where users can see their own posts and followers/following counts.

 Other users can also view a user's profile and see their posts.

9.Security Measures:

 The application implements proper security measures to prevent common vulnerabilities like SQL
injection, XSS attacks, and CSRF attacks.

 User authentication and authorization mechanisms are in place to ensure that users can only perform
actions they are allowed to.

14
OUTPUT:

15
RESULT

Thus the Web Page had been created using simple micro blogging application and relevant
information had been displayed.

16
 Exp No. 4 Date: ……………

FOOD DELIVERY WEBSITE

AIM:

To create a food delivery website where users can order food from a particular restaurant listed
in the website and show its related information.

SOFTARE USED:

Dreamweaver or Notepad and browser.

DESCRIPTION:

Responsive webpage for an online food delivery system using HTML and CSS.

Files used:

 index.html

 contact.html

 style.css

Index.html: The following HTML code describes the structure of the webpage. First of all it has an header
tag to display the name of the company which is “Online FoodShop”. The navigation bar contains tabs of
“Home”, “About”, “Menu” and “ContactUs”. The navigation bar also consists of the logo of the company
followed by the background image with some more details of the “Online FoodShop” along with the featured
products.

Contact.html: The following HTML code describes us what contents are present in the “ContactUs” tab in
the navigation bar. We have used input tags to enter the type of “query”, “name”, “email-id”, “phone
number” and “explanation” of the query. We have also used radio buttons to enquire about the customer’s
membership for “online FoodShop “. The form also provides “Submit” and “Reset” buttons.

Style.css: This is the stylesheet block which gives us the proper look of the webpage.

 Header styling: It consists of two “head” tags. We have used font-style “Ubuntu” to style the header
and we also used proper colors to make some text look attractive.

 Navigation bar styling: It basically consists of logo styling and content styling. First of all we have
considered the navigation bar as a flexbox and assigned the flex-direction to “column”. We have
centered the logo image by display:block. We have used the margin:auto property to center the image.
Then we considered the content of the navigation bar as a flexbox and then we have positioned it
properly.

 Background image styling: We used before pseudo selectors to set the respective background images.

17
 ALGORITHM:

Frontend (HTML, CSS, JavaScript):

1.User Interface:

 Design a user-friendly and responsive user interface using HTML and CSS.

 Use JavaScript to handle user interactions and dynamic content updates.

2.Restaurant Listing:

 Display a list of restaurants available for ordering food.

 Show restaurant details like name, cuisine, ratings, and delivery time.

3.Menu Display:

 When a user selects a restaurant, display its menu with food items and prices.

 Allow users to customize their order (e.g., add toppings, choose size).

4.Cart Functionality:

 Implement a shopping cart to hold the selected food items before checkout.

 Allow users to adjust quantities and remove items from the cart.

5.User Authentication:

 Implement user registration and login functionalities using HTML forms and JavaScript for form
validation.

 Use AJAX or Fetch API to send user credentials to the backend for authentication.

18
6.Checkout and Payment:

 Enable users to proceed to checkout after selecting their food items.

 Integrate with a payment gateway (e.g., Stripe) for processing transactions securely.

Backend (Node.js with Express, MongoDB):

1.Web Server:

 Set up a backend server using Node.js and Express to handle API requests.

2.Database (MongoDB):

 Install and configure MongoDB to store restaurant information, menus, user data, and orders.

 Use Mongoose (a MongoDB library for Node.js) to interact with the database.

3.User Authentication:

 Implement user authentication logic on the backend to handle registration, login, and user sessions.

 Use bcrypt to securely hash and store passwords.

4.Restaurant and Menu Management:

 Create API endpoints to manage restaurants and their menus.

 Store and retrieve restaurant and menu data from the MongoDB database.

5.Order Processing:

 Create API endpoints to handle user orders and payment processing.

19
 Store order details and associated user data in the database.

Deployment:

 Deploy your frontend files (HTML, CSS, JavaScript) to a static file hosting service like Netlify or Vercel.

 Deploy your backend (Node.js with Express) and MongoDB to appropriate hosting services like Heroku
and MongoDB Atlas.

20
OUTPUT:

21
22
RESULT

Thus the website had been created using a food delivery, where users can order food from a
particular restaurant listed in the website and relevant information had been displayed.

23
 Exp No. 5 Date: ……………

E-COMMERCE WEBSITE

AIM:

To design a classifieds web application to buy and sell used products and show its related information.

SOFTARE USED:

Dreamweaver or Notepad, Django and browser.

DESCRIPTION:

This project deals with developing a Virtual website ‘E-commerce Website’. It provides the user
with a list of the various products available for purchase in the store. For the convenience of online shopping,
a shopping cart is provided to the user. After the selection of the goods, it is sent for the order confirmation
process. The system is implemented using Python’s web framework Django. To develop an e-commerce
website, it is necessary to study and understand many technologies.

Scope: The scope of the project will be limited to some functions of the e-commerce website. It will display
products, customers can select catalogs and select products, and can remove products from their cart
specifying the quantity of each item. Selected items will be collected in a cart. At checkout, the item on the
card will be presented as an order. Customers can pay for the items in the cart to complete an order. This
project has great future scope. The project also provides security with the use of login ID and passwords, so
that no unauthorized users can access your account. The only authorized person who has the appropriate
access authority can access the software.

ALGORITHM:

1. Create Normal Project: Open the IDE and create a normal project by selecting File -> New Project.

2. Install Django: Next, we will install the Django module from the terminal. We will use PyCharm
integrated terminal to do this task. One can also use cmd on windows to install the module by
running python -m pip install django command

3. Check Installed Django version: To check the installed Django version, you can run the python -m
django -version command as shown below.

4. Create Django Project: When we execute django-admin startproject command, then it will create a
Django project inside the normal project which we already have created here. django-admin
startproject ProjectName.
24
5. Check Python3 version: python3 –version

6. Run Default Django webserver:- Django internally provides a default webserver where we can launch
our applications. python manage.py runserver command in terminal. By default, the server runs on
port 8000. Access the webserver at the highlighted URL.

25
OUTPUT:

26
27
RESULT

Thus the web application had been created using to buy and sell used products and relevant
information had been displayed.
28
 Exp No. 6 Date: ……………

LEAVE MANAGEMENT SYSTEM

AIM:

To create a web page with a leave management system for an organization where users can apply different
types of leaves such as casual leave and medical leave. They also can view the available number of days and
show its related information.

SOFTARE USED:

Dreamweaver or Notepad and browser.

DESCRIPTION:

Frontend (Angular):

1.Set Up Angular Project:

 Install Angular CLI globally on your machine.

 Create a new Angular project: ng new leave-management-system

 Navigate into the project folder: cd leave-management-system

2.Create Components:

 Create components for different parts of the system, such as leave application, leave balance, and leave
history.

 Generate services to handle API calls, such as LeaveService for interacting with the backend.

3.Design User Interface:

29
 Design the user interface using HTML and CSS within the component templates and stylesheets.

 Use Angular directives and data binding to display dynamic content and handle user interactions.

4.Implement Routing:

 Set up routing to navigate between different components using the Angular Router.

 Define routes for each component in the app-routing.module.ts file.

5.User Authentication (Optional):

 If the system requires user authentication, implement user login and authorization functionalities using
AuthService and API calls.

 Secure the routes using Angular guards to prevent unauthorized access to certain pages.

Backend (Node.js with Express and MongoDB):

1.Web Server:

 Set up a backend server using Node.js and Express to handle API requests.

2.Database (MongoDB):

 Install and configure MongoDB to store user data, leave applications, and leave balance information.

 Use Mongoose (a MongoDB library for Node.js) to interact with the database.

3.User Authentication (Optional):

 Implement user authentication logic on the backend to handle registration, login, and user sessions.

 Use bcrypt to securely hash and store passwords.

30
4.Leave Application Management:

 Create API endpoints to handle leave applications, including leave type (casual, medical), start and end
dates, and leave status (pending, approved, rejected).

 Store leave applications in the database and associate them with the respective users.

5.Leave Balance Management:

 Create API endpoints to handle leave balance for each user, including available days for casual and
medical leave.

 Implement logic to calculate the remaining leave days based on approved leave applications.

Deployment:

 Deploy your Angular frontend to a static file hosting service like Netlify or Vercel.

 Deploy your Node.js backend and MongoDB to appropriate hosting services like Heroku and MongoDB
Atlas.

ALGORITHM:

1. Employee Dashboard:

Provide a user-friendly dashboard for employees to view their leave balances, submit leave requests, and
check the status of their pending and approved leaves.

2. Leave Types:

Support different types of leaves, such as annual leave, sick leave, maternity/paternity leave, etc., each with
its own leave entitlements and rules.

3. Leave Request Submission:

Allow employees to submit leave requests through the system.

Include fields for leave type, start and end dates, reason for leave, and any additional notes.

31
4. Leave Approval Workflow:

Implement a workflow for leave approval, where managers can review and approve/reject leave requests.

Allow managers to add comments or notes when approving or rejecting leave applications.

5. Leave Balances:

Keep track of employees' leave balances, updating them automatically after leave approvals.

Consider factors like carried forward leaves, leave encashment, and earned leaves.

6. Calendar View:

Display leave requests and approvals in a calendar view for easy visualization of employee availability and
leave schedules.

7. Leave Cancellation and Modification:

Allow employees to cancel or modify their leave requests if necessary, subject to manager approval.

8. Notifications and Reminders:

Send automated email notifications to employees and managers for leave request submissions, approvals,
and rejections.

Provide reminders to employees about their upcoming leaves and leave balances.

9. Reports and Analytics:

Generate reports on leave usage, leave trends, and employee attendance for HR and management purposes.

10. Role-Based Access Control:

Implement role-based access control to ensure that only authorized personnel can view and manage leave
requests.

11. Integration with HRMS (Human Resource Management System):

Integrate the leave management system with the organization's HRMS to sync employee data and leave
entitlements.
32
12. Security and Data Privacy:

Ensure that the system is secure and complies with data privacy regulations to protect employee information

33
OUTPUT:

34
RESULT

Thus the Web Page had been created using a leave management system for an organization and
relevant information had been displayed.

35
Exp No. 7 Date: ……………

PROJECT MANAGEMENT SYSTEM

AIM:

To create a web page with a simple dashboard for project management where the statuses of various
tasks are available. New tasks can be added and the status of existing tasks can be changed among Pending,
InProgress or Completed and show its related information.

SOFTARE USED:

Dreamweaver or Notepad and browser.

DESCRIPTION:

 To create the Responsive Project Management Dashboard using HTML, CSS & Javascript, along
with understanding its implementation through the illustration.

 Many websites, nowadays, are implementing two modules/interfaces for their sites. One is for
the user and another is for the admin. In this Project , we will see the process of creating a
responsive admin panel using basic HTML, CSS, and Javascript.

 In the admin panel, there are multiple sections for controlling the activities of the website by the
admin. In the admin panel, there is a header and a side navbar will present that will help the admin
to navigate into the multiple modules of the admin panel. in the header section, there will be a
search button that will help the admin to search a module directly. So, see the approach to know
about the creation of the Project Management Dashboard.

ALGORITHM:

36
 Create a project folder and inside it create three files “index.html“(for writing the HTML),
“style.css“(for writing the CSS), and “index.js“(for writing the js). You can also create a separate
file to keep the CSS code for the responsiveness of the page.

 Now, create a header section to keep the header logo and other options like the menu button, Admin
profile picture, and the search bar inside it.

 Then create a search bar using the Input tag and give a style to it using CSS. And make the
header flex to justify and align the content with a perfect space.

 Then create a nav bar and make it positioned relative and place it on the left side of the screen. Add
a javascript function to open and close the nav bar when the menu button will be clicked. Use
“AddEventListner” for it. Then place the content of the navbar one by one.

 Then create the main div to keep the main body of the dashboard. On the upper side of the main div
create four cards that will contain important information like Daily views, Likes, Comments, etc.
Apply flex properties in those boxes to align and justify them in the perfect position on the website
and apply the “flex-wrap: wrap;” properties to make the boxes responsive according to the page size.

 Then below the cards make a square div that will contain the recent Project ’s information. Then the
overflow of the x-axis should be scrollable. So add the CSS properties to this div “overflow-x:
scroll;“. Then add the content of the recent Project and make the place the content in the right
alignment by making the display of the div flex.

 Then make the page responsive, add @media query with different breakpoints, and give the styling
according to the screen size. See the example to understand the responsiveness better.

37
OUTPUT:

38
RESULT

Thus the Web Page had been created using a simple dashboard for project management system
and relevant information had been displayed.

39
Exp No. 8 Date: ……………

ONLINE SURVEY APPLICATION

AIM:

To create a web page with an online survey application where a collection of questions is available and
users are asked to answer any random 5 questions and show its related information.

SOFTARE USED:

Dreamweaver or Notepad and browser.

DESCRIPTION:

 Online survey or internet survey, is one of the most popular data-collection sources, where a set
of survey questions is sent out to a target sample and the members of this sample can respond to the
right questions over the world wide web. Respondents receive surveys via various mediums such as
email, embedded over website, social media etc.

 Organizations implement a survey maker to use the internet in order to gain insights and feedback about
upcoming products or services, change in marketing strategies, enhancement in current features,
opinions about the company etc.

 With the progress made by the internet connection, more and more organizations depend on the data
received and analyzed from online surveys to make integral changes in their functioning. For efficient
data collection, organizations must choose an advanced and efficient online survey platform.

ALGORITHM:

Frontend:

1.HTML and CSS:

Design the user interface with HTML and CSS, including forms for creating and answering surveys, and
40
displays for survey results.

2.JavaScript (React or Angular):

Implement frontend logic using JavaScript frameworks like React or Angular for dynamic interactions and
API calls.

Backend (Node.js with Express and MongoDB):

1.API Endpoints:

Create API endpoints to handle survey creation, answering surveys, and retrieving survey results.

2.Database Schema (MongoDB):

Design the MongoDB schema for storing survey data, questions, and responses.

41
OUTPUT:

42
RESULT

Thus the Web Page had been created using an online survey application and relevant information
had been displayed.

43
 CONTENT BEYOND SYLLABUS
Exp No. 9 Date: ……………

CREATION OF THREE-TIER APPLICATIONS USING JSP AND

DATABASES - For displaying student mark list

AIM
To create a three-tier application using JSP and Databases for displaying the student
mark list.

SOFTWARE REQUIRED

Tomcat Server

DESCRIPTION

Java Server Pages (JSP) is a technology that helps software developers create
dynamically generated web pages based on HTML, XML, or other document types. Released in
1999 by Sun Microsystems, JSP is similar to PHP and ASP, but it uses the Java programming
language.

ALGORITHM

1. Design the HTML page (stud.html) with the following

a. Create a form to get the input (Register Number) from the user.
b. Set the URL of the server (marklist.jsp) as the value of the action attribute. c.
Use submit button to invoke the server and send the form data to the server. 2. Create the
JSP file with the following
a. Read the parameter value (Register Number) from the form by using the
method getParameter().
b. Server retrieves the details from the database table with respect to the form input. c.
Server displays the mark list to the client as the response.

OUTPUT

44
45
RESULT

Thus a simple web application using JSP and Database had been
created displaying student mark list.

46
Exp No. 10 Date: ……………

PROGRAMS USING XML – SCHEMA – XSLT/XSL

AIM

To write a XML scheme to generate CD Collection details.

SOFTWARE REQUIRED

Dreamweaver or Notepad and Browser.

DESCRIPTION
In HTML documents, tags are predefined but in XML documents, tags are
not predefined. World Wide Web Consortium (W3C) developed XSL to understand and
style an XML document, which can act as XML based Stylesheet Language.
An XSL document specifies how a browser should render an XML
document. Main parts of XSL Document
∙ XSLT: It is a language for transforming XML documents into various other types
of documents.
∙ XPath: It is a language for navigating in XML documents.
∙ XQuery: It is a language for querying XML documents.
∙ XSL-FO: It is a language for formatting XML documents.
How XSLT Works?
The XSLT stylesheet is written in XML format. It is used to define the transformation rules
to be applied on the target XML document. The XSLT processor takes the XSLT stylesheet
and applies the transformation rules on the target XML document and then it generates a
formatted document in the form of XML, HTML, or text format. At the end it is used by
XSLT formatter to generate the actual output and displayed on the end-user.

ALGORITHM
Step 1: Start the program
Step 2: Use Xml Style Sheet code to define link
<?xml-stylesheet type="text/xsl" href="yourxsl.xsl"?>
Step 3: Use the catalog tag to define CD collection details.
Step 4: Use the necessary heading for appropriate XML tag.
Step 5: Provide necessary information for CD collection details
Step 6: Stop the program

47
OUTPUT

48
RESULT
Thus an XML application had been created to display CD Catalog using XSL.

49
Exp No. 11 Date: ……………

PHP PROGRAM USING XML INSTEAD OF DATABASE

AIM:
To design an application that verifies user details from an xml using PHP.

SOFTWARE USED:

Dreamweaver or Notepad and browser.

DESCRIPTION
In HTML documents, tags are predefined but in XML documents, tags are not predefined. World
Wide Web Consortium (W3C) developed XSL to understand and style an XML document, which can act
as XML based Stylesheet Language.
An XSL document specifies how a browser should render an XML document.

OUTPUT

50
51
RESULT

Thus the Web page design an application that verifies user details from an xml using PHP
program had been displayed.

52