Scribd
Upload
29 views23 pages

Exp 1,2

Uploaded by

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

Exp 1,2

Uploaded by

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

Experiments: 01

Title:- Create html pages for website like login, registration and about us pages.

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title> Login Page </title>

<style>

</style>

</head>

<body>

<center>

<center> <h1> Welcome to Login Form </h1><br><br> </center>

<form>

<div class="container">

<label>Username : </label>

<input type="text" placeholder="Enter Username" name="username" required> <br><br><br>

<label>Password : </label>

<input type="password" placeholder="Enter Password" name="password" required> <br><br><br>

<button type="submit">Login</button> <br><br><br>

<input type="checkbox" checked="checked"> Remember me

<button type="button" class="cancelbtn"> Cancel</button>

Forgot <a href="#"> password? </a>

</div>

</form>

</center>

</body>

</html>
Experiments: 02
Title:- Apply and design the created HTML pages using CSS.

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body{

font-family: Calibri, Helvetica, sans-serif;

background-color: pink;

.container {

padding-top: 10px;

padding-right: 50px;

padding-bottom: 50px;

padding-left: 50px;

background-color: lightblue;

input[type=text], input[type=password], textarea {

width: 100%;

padding: 15px;

margin: 5px 0 22px 0;

display: inline-block;

border: none;

background: #f1f1f1;

input[type=text]:focus, input[type=password]:focus {

background-color: orange;

outline: none;

}
div {

padding: 10px 0;

hr {

border: 1px solid #f1f1f1;

margin-bottom: 25px;

.registerbtn {

background-color: #4CAF50;

color: white;

padding: 16px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

opacity: 0.9;

.registerbtn:hover {

opacity: 1;

</style>

</head>

<body>

<form>

<div class="container">

<center> <h1> Student Registeration Form</h1> </center> <hr>

<label> Firstname </label>

<input type="text" name="firstname" placeholder= "Firstname" size="15" required />

<label> Middlename: </label>

<input type="text" name="lastname" placeholder="Lastname" size="15"required />


<div> <label> Course : </label>

<select> <option value="Course">Course</option>

<option value="BCA">BCA</option>

<option value="BBA">BBA</option>

<option value="B.Tech">B.Tech</option>

<option value="MBA">MBA</option>

<option value="MCA">MCA</option>

<option value="M.Tech">M.Tech</option> </select> </div>

<div> <label> Gender : </label> <br>

<input type="radio" value="Male" name="gender" checked > Male

<input type="radio" value="Female" name="gender"> Female

<input type="radio" value="Other" name="gender"> Other </div>

<label> Phone : </label>

<label for="email"><b>Email</b></label>

<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit" class="registerbtn">Register</button>

</form>

</body>

</html>
Experiments: 03
Title:- Write a program demonstrating javascript functions and different validations.
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

font-family: Calibri, Helvetica, sans-serif;

background-color: pink;

.container {

padding-top: 10px;

padding-right: 50px;

padding-bottom: 50px;

padding-left: 50px;

background-color: lightblue;

input[type=text], input[type=password], select {


width: 100%;

padding: 15px;

margin: 5px 0 22px 0;

display: inline-block;

border: none;

background: #f1f1f1;

input[type=text]:focus, input[type=password]:focus {

background-color: orange;

outline: none;

div {

padding: 10px 0;

hr {

border: 1px solid #f1f1f1;

margin-bottom: 25px;

.registerbtn {

background-color: #4CAF50;

color: white;

padding: 16px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

opacity: 0.9;

.registerbtn:hover {

opacity: 1;

.error {

color: red;

</style>
</head>

<body>

<form onsubmit="return validateForm()">

<div class="container">

<center> <h1> Student Registration Form</h1> </center>

<hr>

<label for="first_name"> <b> First Name </b> </label>

<input type="text" id="first_name" name="first_name" placeholder="Firstname" required />

<div id="first_name_error" class="error"></div>

<label for="last_name"> <b> Last Name </b> </label>

<input type="text" id="last_name" name="last_name" placeholder="Lastname" required />

<div id="last_name_error" class="error"></div>

<label>

<b>Course</b>

</label>

<select id="course" required>

<option value="">Select a course</option>

<option value="BCA">BCA</option>

<option value="BBA">BBA</option>

<option value="B.Tech">B.Tech</option>

<option value="MBA">MBA</option>

<option value="MCA">MCA</option>

<option value="M.Tech">M.Tech</option>

</select>

<div id="course_error" class="error"></div>

<label>

<b>Gender</b>

</label>

<input type="radio" value="Male" name="gender" id="gender_male" checked> Male

<input type="radio" value="Female" name="gender" id="gender_female"> Female

<input type="radio" value="Other" name="gender" id="gender_other"> Other

<div id="gender_error" class="error"></div>


<label for="email"><b>Email</b></label>

<input type="text" id="email" placeholder="Enter Email" name="email" required>

<div id="email_error" class="error"></div>

<label for="password"><b>Password</b></label>

<input type="password" id="password" placeholder="Enter Password" name="password" required>

<div id="password_error" class="error"></div>

<button type="submit" class="registerbtn">Register</button>

</form>

<script>

function validateForm() {

const first_name = document.getElementById("first_name").value;

const last_name = document.getElementById("last_name").value;

const course = document.getElementById("course").value;

const gender_male = document.getElementById("gender_male").checked;

const gender_female = document.getElementById("gender_female").checked;

const gender_other = document.getElementById("gender_other").checked;

const email = document.getElementById("email").value;

const password = document.getElementById("password").value;

// Regular expressions for validation

const nameRegex = /^[a-zA-Z ]{2,30}$/;

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;

// Reset error messages

const errorElements = document.getElementsByClassName("error");

for (const errorElement of errorElements) {

errorElement.textContent = "";

let isValid = true;


if (!first_name.match(nameRegex)) {

document.getElementById("first_name_error").textContent = "Please enter a valid first name.";

isValid = false; }

if (!last_name.match(nameRegex)) {

document.getElementById("last_name_error").textContent = "Please enter a valid last name.";

isValid = false; }

if (course === "") {

document.getElementById("course_error").textContent = "Please select a course.";

isValid = false; }

if (!(gender_male || gender_female || gender_other)) {

document.getElementById("gender_error").textContent = "Please select a gender.";

isValid = false; }

if (!email.match(emailRegex)) {

document.getElementById("email_error").textContent = "Please enter a valid email address.";

isValid = false; }

if (!password.match(passwordRegex)) {

document.getElementById("password_error").textContent = "Password must be 6-20 characters


with at least one uppercase letter, one lowercase letter, and one digit.";

isValid = false; }

if (isValid) {

alert("Registration successful!"); }

return isValid; }

</script>

</body>
</html>

Experiments: 04
Title:- Write a program to read and write HTML contents with JQuery.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Read and Write HTML with jQuery</title>

<!-- Include jQuery from a CDN -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>
<div id="content">

<h1>Welcome to DYPCET</h1>

<p>This is a simple example.</p>

</div>

<button id="readButton">Read Content</button>

<button id="writeButton">Write Content</button>

<script>

// Wait for the document to be ready

$(document).ready(function() {

// Read HTML content

$("#readButton").click(function() {

// Get the HTML content of the element with id "content"

var htmlContent = $("#content").html();

alert("HTML Content:\n" + htmlContent);

});

// Write HTML content

$("#writeButton").click(function() {

// Create new HTML content

var newContent = "<h2>New Content</h2><p>This is the updated content:-We are students of BTech
CSE(AIML).</p>";

// Set the HTML content of the element with id "content" to the new content

$("#content").html(newContent);

});

});

</script>

</body>

</html>
Experiments: 05
Title:- Create a simple Testing Angular application.

Angular is a platform and framework for building single-page client applications using
HTML and TypeScript. Angular is written in TypeScript. It implements core and
optional functionality as a set of TypeScript libraries that you import into your
applications.

The architecture of an Angular application relies on certain fundamental concepts. The


basic building blocks of the Angular framework are Angular components that are
organized into NgModules. NgModules collect related code into functional sets; an
Angular application is defined by a set of NgModules. An application always has at
least a root module that enables bootstrapping, and typically has many more feature
modul.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<title>Employment Registration Form</title>

</head>

<body>

<div class="container mt-5">

<h2 class="text-center mb-4">Employment Registration Form</h2>

<form>

<div class="mb-3">

<label for="fullName" class="form-label">Full Name</label>

<input type="text" class="form-control" id="fullName" placeholder="Enter your full name"


required>

</div>

<div class="mb-3">

<label for="email" class="form-label">Email</label>

<input type="email" class="form-control" id="email" placeholder="Enter your email


address" required>

</div>

<div class="mb-3">

<label for="Password" class="form-label">Password</label>

<input type="password" class="form-control" id="Password" placeholder="Enter your


Password" required>

</div>

<div class="mb-3">

<label for="Age" class="form-label">Age</label>

<input type="number" class="form-control" id="Age" placeholder="Enter your Age"


required>

</div>

<div class="mb-3">
<label for="department" class="form-label">Department</label>

<select class="form-select" id="department" required>

<option value="" selected disabled>Select Department</option>

<option value="HR">Human Resources</option>

<option value="IT">Information Technology</option>

<option value="Finance">Finance</option>

<option value="Sales">Sales</option>

</select>

</div>

<div class="d-grid gap-2">

<button type="submit" class="btn btn-success">Register</button>

</div>

</form>

</div>

</body>

</html>
Experiments: 06
Title:- Write a program demonstrating NodeJs application.
Node.js (Node) is an open source, cross-platform runtime environment for executing JavaScript code. Node
is used extensively for server-side programming, making it possible for developers to use JavaScript
for client-side and server-side code without needing to learn an additional language. Node is sometimes
referred to as a programming language or software development framework, but neither is true; it is strictly a
JavaScript runtime.

A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a
set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and
generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the
exception rather than the norm.

When Node.js performs an I/O operation, like reading from the network, accessing a database or the
filesystem, instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the
operations when the response comes back.

This allows Node.js to handle thousands of concurrent connections with a single server without introducing
the burden of managing thread concurrency, which could be a significant source of bugs.

Node.js has a unique advantage because millions of frontend developers that write JavaScript for the
browser are now able to write the server-side code in addition to the client-side code without the need to
learn a completely different language.

var http = require("http");


http.createServer(function (request, response) {
// Send the HTTP header
// HTTP Status: 200 OK
// Content Type: text/html
response.writeHead(200, { 'Content-Type': 'text/html' });
// Send the response body as an HTML page
response.end(` <html>
<head>
<title>Number Manipulation</title>
</head>
<body>
<center>
<div style="padding-top: 50px;">
Number: <input type="number" id="myNumber" /><br /><br />
<button onclick="increment()">Increment</button>
<button onclick="decrement()">Decrement</button>
</div>
</center>
<script>
function increment() {
document.getElementById("myNumber").stepUp(1);
}
function decrement() {
document.getElementById("myNumber").stepDown(1);
}
</script>
</body>
</html>`);
}).listen(8081);
// Console will print the message
console.log('Server running at http://127.0.0.1:8081/');
Experiment No. 7
Title: Create Simple Application using Flask
Thoery:
Flask is a micro web framework for Python designed to be lightweight and easy to use while providing the
essentials needed to build web applications. It was created by Armin Ronacher and is known for its
simplicity and flexibility. Here's some information about Flask:
Micro Framework: Flask is a micro web framework for Python designed to be minimalistic and
lightweight. It provides the essentials for building web applications without imposing a specific structure or
set of tools, giving developers more control over their application's architecture.
Routing and Views: Flask allows developers to define routes, mapping URLs to functions (views) that
handle HTTP requests. This makes it easy to create web pages and RESTful APIs by specifying how
different routes respond to various HTTP methods.
Jinja2 Templating: Flask includes the Jinja2 templating engine, enabling dynamic HTML template
rendering. Developers can create templates with placeholders for data and then inject data dynamically into
those templates in their views.
Extensions and Ecosystem: Flask has a robust ecosystem of extensions that provide additional
functionality, such as database integration (e.g., SQLAlchemy), authentication (e.g., Flask-Login), form
handling (e.g., WTForms), and more. These extensions make it easy to add features to your Flask
application.
Community and Flexibility: Flask has an active and supportive community of developers, and it's known
for its flexibility. Developers have the freedom to structure their projects as they see fit, choosing the
components and libraries that best suit their needs. Flask is a popular choice for small to medium-sized web
applications and RESTful APIs due to its simplicity and ease of use.
Code:
Backend Code:
from flask import Flask, render_template
import plotly
import plotly.graph_objs as go
import json
app = Flask(__name__)
@app.route('/')
def dashboard():
# Create sample data for the bar chart
data = [
{"x": ['Category A', 'Category B', 'Category C'], "y": [10, 7, 5], "type": "bar", "name": "Series 1"}, ]
# Convert the data to JSON to pass to the template
chart_data = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
return render_template('home.html', chart_data=chart_data)
if __name__ == '__main__':
app.run(debug=True)

Frontend code:
<!DOCTYPE html>
<html>
<head>
<title>My Home Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
h1 {
font-size: 36px;
margin: 0;
}
nav {
background-color: #444;
color: #fff;
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
margin-right: 20px;
}
main {
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Home Page</h1>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Us</h2>
<p>Simple Homepage using Flask</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>App Development</li>
<li>SEO</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</section> </main>
</body>
</html>
Output:

You might also like