Practical 5
Practical Title:
To understand the structure of a basic web application and its role in a DevOps
pipeline
Theory:
1. What is a Web Application?
A web application is a software program that runs on a web server and is accessed through
a browser.
Examples include forms, dashboards, and websites.
2. Components of a Web Application:
Frontend: The user interface (UI) that users interact with
Technologies: HTML, CSS, JavaScript
Backend: Handles logic, processing, and server-side operations
Technologies: Python, Java, [Link]
Database:
Stores and manages data
Examples: MySQL, SQLite
3. What is DevOps Pipeline?
A DevOps pipeline is a set of automated steps that allow developers to build, test, and
deploy applications quickly and efficiently.
It includes:
• Code → Build → Test → Deploy → Monitor
Procedure:
Step 1: Create a Basic Web Page (HTML)
Step 2: Add Styling using CSS
Step 3: Add Simple JavaScript Functionality
Step 4: Run the Web Page in Browser
Step 5: (Optional) Upload the Web App to GitHub
Activity / Task:
Task 1:
Create a simple web application (e.g., Student Form or Feedback Form)
Description: A simple web application named "Student Feedback Form" was created using
HTML, CSS, and JavaScript. The application allows users to enter their name, email, and
feedback. When the user submits the form, a confirmation message is displayed using
JavaScript, enhancing user interaction.
__________________________________________
Task 2:
Explain how this application can be used in a DevOps pipeline.
This application can be integrated into a DevOps pipeline by using version control systems
like GitHub to manage code changes. Continuous Integration (CI) tools such as Jenkins can
automatically build and test the application whenever changes are pushed. Continuous
Deployment (CD) can then be used to deploy the updated application to a server, ensuring
fast and reliable delivery.
__________________________________________
Task 3:
List steps to deploy this application on a server.
1. Create the web application files (HTML, CSS, JavaScript).
2. Upload the project to a GitHub repository.
3. Set up a web server such as Apache or Nginx.
4. Clone the repository on the server using git clone.
5. Place the files in the server’s root directory (e.g., htdocs or www).
6. Start the server and ensure it is running.
7. Access the application through a web browser using the server’s IP address or
domain.
__________________________________________
Advantages:
1. Easy updates
2. Scalable
3. Supports automation
4. Easy to build and deploy
5. Platform independent
Challenges:
1. Browser compatibility
2. Requires server setup
3. Security issues