You are on page 1of 39

INDRAPRASTHA COLLEGE FOR WOMEN

UNIVERSITY OF DELHI

INTERNET
TECHNOLOGIES

PRACTICAL FILE
2022-23

Submitted by: Submitted to:


Nagadi Leela Rao Ms. Diksha Jain
College Roll No: 21/CS/28
Course: B.Sc.(H) Computer Science
Semester/Year: V/3 (Paper code- 32341501)
ACKNOWLEDGEMENT

I hereby would like to acknowledge the help and guidance


provided by Ms. Diksha Jain, my Internet Technologies
lecturer, in completing this practical file.

I would also like to thank my family for their constant


support and my friends and classmates who helped me
traverse through any problems that I faced in the process of
completing this file.

Nagadi Leela Rao


INDEX

S. No. Practical question Pg Nos


1 ipconfig 1
2 Ping, tracert, netstat 2-3
3 About You HTML page 4-7
4 Multiplication table 8-9
5 Paragraph formatting buttons 10-14
6 Pet details form 15-18
7 Displaying all pets’ details from JSON file 19-21
8 Course Details HTML page with button for formatting 22-27
9 Image gallery using BOOTSTRAP 28-30
10 Creating an HTTP server with node.js 31
11 Sign In/Sign Up 32-36
Q1. Display your system's IP Address, Subnet mask using ipconfig, and find out the
network address and the maximum number of systems possible on your network
and range of IP addresses available to these systems.

System’s IP address : 192.168.165.58

Subnet mask : 255.255.255.0 (Class C)

Network address : 192.168.165.0

Maximum possible number of systems : 28-2=256-2=254

Range of IP addresses available : 192.168.165.1 to 192.168.165.254

1|Page
Q2. With help of ping, check if you are connected to other systems of your network
and find the route to connect to that system using tracert. List all the processes
which are using ports for TCP protocol.

Ping command-

Tracert command-

2|Page
Netstat command-

3|Page
Q3. Create an HTML page that shows information about you, your course, hobbies,
address, and your plans. Use CSS for styling of HTML page so that looks nice.

Source Code:

ITques3.html-
<!DOCTYPE html>
<html>
<div class="main_div">
<head>
<link rel="stylesheet" type="text/css" href="ITques1.css">
<h1>Nagadi Leela Rao</h1>
</head>
</div>

<body>
<div>
<h2>Basic Information</h2>
<table>
<tr>
<td><b>DOB: </b>20th March 2003</td>
<td><b>Age: </b>20 years </td>
<td><b>Gender: </b>Female (She/her)</td>
</tr>
</table>
</div>

<div>
<h2>Course</h2>
<p>B.Sc.(H) Computer Science</p>
</div>

<div>
<h2>Hobbies</h2>
<table>
<tr>
<td>Dancing</td>
<td>Listening to music</td>
<td>Singing</td>
<td>Art and craft</td>
<td>Reading webtoons</td>
<td>Cleaning</td>
</tr>
</table>
</div>

<div>
<h2>Address</h2>

4|Page
<p>106/1-D, Kishangarh, Vasant Kunj, New Delhi- 110070</p>
</div>

<div>
<h2>My Plans</h2>
<p>I plan to pursue MCA but haven't yet decided what I want to
specialise in. <br>
I'm interested in the fields of Data Science and Cyber Security.
<br>
After finishing MCA I'll apply and look for placements.</p>
</div>
</body>
</html>

ITques3.css-
.main_div{
margin-top: 30px;
width: 95%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(232, 39, 148);
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

h1{
color: antiquewhite;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:xx-large;
}

div{
background-color: beige;
width: 95%;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
padding: center;
margin-bottom: 40px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 12px 12px 0 rgba(0, 0, 0, 0.2);
}

h2{
padding: 15px;
color:rgb(255, 255, 255);
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans
Unicode', Geneva, Verdana, sans-serif;

5|Page
background-color: rgb(49, 146, 112);
}

body{
background-image: url("C:/xampp/htdocs/Website_design.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}

p{
font-family: Verdana;
color:black;
padding-left: 20px;
padding-bottom: 20px;
text-align: center;
line-height: 2;
}

table{
width: 90%;
display: flex;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
font-family: Verdana;
color:black;
justify-content: center;
align-items: center;
border-spacing: 15px;
}

td{
padding: 10px 20px;
background-color: rgb(255, 238, 141);
border-radius: 20px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}

6|Page
Output:

7|Page
Q4. Create an HTML page with the sole purpose to show multiplication tables of 2
to 10 (row-wise) created by JavaScript. Initially, the page is blank. With help of
setInterval function print a row every 5 seconds in different colors and increasing
font size.

Source Code:
<!DOCTYPE html>
<html>
<head>
<center>
<h1>
Multiplication Tables (2 to 10)
</h1>
</center>
</head>

<body>
<center>
<div id="multiply"></div>

<script lang="javascript">
var mul_tab= document.createElement('table');
var num=2;
var col= new
Array("red","blue","green","orange","pink","brown","purple","gray","teal","lightgree
n");
document.getElementById('multiply').append(mul_tab);
var play= setInterval(()=>{
var row= document.createElement('tr');
row.style.textAlign='center'
for(num1=1; num1<=10; num1++)
{
row.innerHTML+= `<td>${num}x${num1}=${num*num1}&emsp;</td>`;
let c= Array.from(row.children);
c.forEach(element
=>{element.style.fontSize=`${num+15}px`;});
}
row.style.color=col[num-1];
mul_tab.append(row);
num++;
if(num==11) clearInterval(play);}, 5000);
</script>
</center>
</body>
</html>

8|Page
Output:

9|Page
Q5. Create an HTML page with a paragraph written on it and under which 9 buttons
are placed in a 3X3 grid. The first row is for buttons labelled with colours names
Red, Green, and Blue, the second row with numbers 10, 20, and 30, and the third
row with different font names. Click event of each of the buttons should make the
appropriate change in the style of the paragraph.

Source Code:
<!DOCTYPE html>

<style>
p{
text-align: justify;
width: 60%;
}

button{
text-align: center;
width: 80px;
height: 40px;
}
</style>

<html>
<head>
<h1><center>Recipe for mini choco lava cake</center></h1>

<script>
function chngCol(color)
{ document.getElementById('para').style.color=color; }

function chngSize(fontSize)
{ document.getElementById('para').style.fontSize=fontSize; }

function chngFont(font)
{ document.getElementById('para').style.fontFamily=font; }
</script>
</head>

<body>
<center>
<p id="para">
Ingredients <br>
1/3 cup castor sugar, 2 tbsp melted butter, 1/2 cup warm milk,
3/4 cup all purpose flour, 1/4 cup cocoa powder, 1/2 tsp baking
powder,
10-12 chocolate pieces <br><br>
Process <br>

10 | P a g e
1. Take sugar and melted butter in a bowl and whisk well <br>
2. When incorporated well, add in the warm milk and mix again <br>
3. Then add all your dry ingredients that is flour, cocoa powder and
baking powder <br>
4. Mix everything together and transfer the batter into a piping bag
<br>
5. To make the mini cakes, heat an appe/paniyaram pan and grease it
lightly <br>
6. Carefully fill 1/2 the cavities with cake batter and then add in
chocolate piece in the center <br>
7. Cover the top of the chocolate piece with some more cake batter
and cook nicely from both sides <br>
8. Dust with some icing sugar and serve warm <br>
</p>
</center>

<center>
<table>
<tr>
<td><button onclick="chngCol('red')" style="color:
red;">Red</button></td>
<td><button onclick="chngCol('green')" style="color:
green;">Green</button></td>
<td><button onclick="chngCol('blue')" style="color:
blue;">Blue</button></td>
</tr>
<tr>
<td><button onclick="chngSize('10px')" style="font-size:
10px;">10</button></td>
<td><button onclick="chngSize('20px')" style="font-size:
20px;">20</button></td>
<td><button onclick="chngSize('30px')" style="font-size:
30px;">30</button></td>
</tr>
<tr>
<td><button onclick="chngFont('Arial')" style="font-family:
Arial;">Arial</button></td>
<td><button onclick="chngFont('Calibri')" style="font-family:
Calibri;">Calibri</button></td>
<td><button onclick="chngFont('Verdana')" style="font-family:
Verdana;">Verdana</button></td>
</tr>
</table>
</center>
</body>
</html>

11 | P a g e
Output:

Different colors-

12 | P a g e
Different font sizes-

13 | P a g e
Different fonts-

14 | P a g e
Q6. Create a form that takes data about a pet. The form must be well designed and
should accept the pet’s name, age, weight, type, and what it likes most. At the
submission of this form create a Pet object in JavaScript filled with these values and
log that object and equivalent JSON on the console.

Source Code:

ITques6.html-
<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="ITques6.css">

<html>
<head>
<h2><center>Pet Info</center></h2>
</head>

<body>
<center> <br>
<form id="form" action="">
<table>
<tr>
<td><b>Name</b></td>
<td><input type="text" id="name"></td>
</tr>

<tr>
<td><b>Age (in yrs)</b></td>
<td><input type="number" id="age" step="0.1"></td>
</tr>

<tr>
<td><b>Weight (in kg)</b></td>
<td><input type="number" id="weight" step="0.1"></td>
</tr>

<tr>
<td><b>Type</b></td>
<td><input type="text" id="type"></td>
</tr>

<tr>
<td><b>Favourites</b></td>
<td><input type="text" id="fav"></td>
</tr>
</table> <br> <br>
<button id="submit"><b>Submit</b></button>
</form>

15 | P a g e
</center>
</body>

<script src="ITques6.js"></script>
</html>

ITques6.css-
body{
background-image: url("C:/xampp/htdocs/pets.jpg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}

table{
color: brown;
font-family: Cambria;
background-color: rgb(255, 243, 228);
border-spacing: 20px;
border-style: dotted;
border-color: rgb(255, 214, 165);
border-radius: 5%;
padding: 20px;
}

input{
border-style: hidden;
height: 20px;
width: 200px;
}

button{
background-color: rgb(174, 253, 207);
color: rgb(16, 111, 79);
border-style: hidden;
padding: 10px 20px;
border-radius: 5%;
font-size: larger;
}

ITques6.js-

document.getElementById("form").addEventListener('submit', function(event){
event.preventDefault();
var Pet = {
name: document.getElementById('name').value,
age: document.getElementById('age').value,
weight: document.getElementById('weight').value,

16 | P a g e
type: document.getElementById('type').value,
fav: document.getElementById('fav').value,
};
console.log('The pet object')
console.log(Pet);
console.log('JSON:')
console.log(JSON.stringify(Pet))
window.alert('Form submitted');
document.getElementById('form').reset();
});

Output:

17 | P a g e
Console output-

18 | P a g e
Q7. Store JSON data of few pets that you created in previous practical in a JSON file
(copy from console output of previous program to a .json file). Using AJAX, load
data from the file and display it in a presentable way using HTML and CSS.

Source Code:

ITques7.html-
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="ITques7.css" />
<head>
<title>PETS INFO</title>
</head>
<body>
<table id="pets">
<tr>
<th>Name</th>
<th>Age</th>
<th>Weight</th>
<th>Type</th>
<th>Favourites</th>
</tr>
</table>

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


<script src="ITques7.js"></script>
</body>
</html>

ITques7.css-

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url("pets.jpg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
h1 {
text-align: center;
color: #ff8080;
margin-top: 20px; }

#pets {
width: 70%;
margin: 20px auto;

19 | P a g e
border-collapse: collapse;
border-color: #683605;
}

#pets th, #pets td {


border: 1px solid #683605;
padding: 8px;
text-align: left;
}

#pets th {
background-color: rgb(245, 240, 202);
font-weight: bold;
color: #683605;

ITques7.js-

var xhr = new XMLHttpRequest();


xhr.onload = function(){
responseObject = JSON.parse(xhr.responseText);
var allpets = responseObject.pets;
var $table = $('#pets');

for(var i = 0; i < allpets.length; i++)


{
var pet = allpets[i];
var $new_row = $("<tr>");
var $new_cell = $("<td>");
$new_row.append($new_cell.clone().text(pet.name));
$new_row.append($new_cell.clone().text(pet.age));
$new_row.append($new_cell.clone().text(pet.weight));
$new_row.append($new_cell.clone().text(pet.type));
$new_row.append($new_cell.clone().text(pet.fav));
$table.append($new_row);
}
};

xhr.open("GET",'ITques7.json',true);
xhr.send(null);

20 | P a g e
ITques7.json-

{"pets":[
{"name":"Foxy","age":"5","weight":"12","type":"Dog","fav":"Pedigree, fetch"},
{"name":"Millie","age":"5","weight":"4","type":"Cat","fav":"Tuna, Eggs"},
{"name":"Chikoo","age":"1","weight":"3.5","type":"Cat","fav":"Petting, playing,
cat food"},
{"name":"Sheru","age":"7.5","weight":"25.3","type":"Dog","fav":"Pedigree"}
]}

Output:

21 | P a g e
Q8. Create a plain HTML page for B.Sc. Hons CS course, mentioning details like fee,
eligibility criteria, papers with names and credits, and future possibilities after the
course. A button for styling should be there at bottom of the page. On clicking on
this button JavaScript should redesign the complete page using jQuery in a nice
presentable way.

Source Code:

ITques8.html-
<!DOCTYPE html>
<html>
<head>
<title>BSc(H) CS</title>
<h1>B.Sc.(H) Computer Science</h1>
</head>

<body>
<div id="Fees">
<h4>Fee structure:</h4>
<table>
<tr><td>Year I</td><td>56800</td></tr>
<tr><td>Year II</td><td>42900</td></tr>
<tr><td>Year III</td><td>38600</td></tr>
</table>
</div>

<div id="Eligibility">
<h4>Eligibility:</h4>
<p>Merit will be calculated based on “Best Four” of Mathematics,
one language and two other subjects listed as academic/elective
subjects,
as specified in List A and List B above, as per the following:</p>
<ul>
<li>60% or more marks required in Mathematics</li>
<li>60% or more marks in aggregate of four subjects including
Mathematics,
one language and any two of Physics, Chemistry and Computer
Science/
Informatics Practices.</li>
<li>Applicants from other streams (with Mathematics in Class XII),
will
have a disadvantage of 2% in aggregate of the required four
subjects.</li>
</ul>
</div>

<div id="Papers">

22 | P a g e
<h4>Semester wise distribution of papers:</h4>
<table>
<tr> <th>Semester</th> <th>Paper</th> <th>Category</th>
<th>Credits</th> </tr>

<tr> <td rowspan="4">I</td> <td>Programming fundamentals using


C++</td> <td>CORE</td> <td>6</td> </tr>
<tr> <td>Computer System Architecture</td> <td>CORE</td> <td>6</td>
</tr>
<tr> <td>English Communication</td> <td>AECC-I</td> <td>4</td> </tr>
<tr> <td>Generic Elective I</td> <td>GE-I</td> <td>6</td> </tr>

<tr> <td rowspan="4">II</td> <td>Programming in Java</td>


<td>CORE</td> <td>6</td> </tr>
<tr> <td>Data Structures</td> <td>CORE</td> <td>6</td> </tr>
<tr> <td>Environmental Science</td> <td>AECC-II</td> <td>4</td>
</tr>
<tr> <td>Generic Elective II</td> <td>GE-II</td> <td>6</td> </tr>

<tr> <td rowspan="5">III</td> <td>Data Structures</td> <td>CORE</td>


<td>6</td> </tr>
<tr> <td>Operating System</td> <td>CORE</td> <td>6</td> </tr>
<tr> <td>Computer Networks</td> <td>CORE</td> <td>6</td> </tr>
<tr> <td>Web Design and Development/Python Programming</td> <td>SEC-
I</td> <td>4</td> </tr>
<tr> <td>Generic Elective III</td> <td>GE-III</td> <td>6</td> </tr>

<tr> <td rowspan="5">IV</td> <td>Design and Analysis of


Algorithms</td> <td>CORE</td> <td>6</td> </tr>
<tr> <td>Software Engineering</td> <td>CORE</td> <td>6</td> </tr>
<tr> <td>Database Management Systems</td> <td>CORE</td> <td>6</td>
</tr>
<tr> <td>Android Programming/R Programming</td> <td>SEC-II</td>
<td>4</td> </tr>
<tr> <td>Generic Elective IV</td> <td>GE-IV</td> <td>6</td> </tr>

<tr> <td rowspan="4">V</td> <td>Theory Of Computation</td>


<td>CORE</td> <td>6</td> </tr>
<tr> <td>Internet Technologies</td> <td>CORE</td> <td>6</td> </tr>
<tr> <td>Data Analysis and Visualization/System
Programming/Combinatorial Optimization</td> <td>DSE-I</td> <td>6</td> </tr>
<tr> <td>Digital Image Processing/Microprocessors</td> <td>DSE-
II</td> <td>6</td> </tr>

<tr> <td rowspan="4">V</td> <td>Artificial Intelligence</td>


<td>CORE</td> <td>6</td> </tr>
<tr> <td>Computer Graphics</td> <td>CORE</td> <td>6</td> </tr>

23 | P a g e
<tr> <td>Information Security/Data Mining/Advanced Algorithms</td>
<td>DSE-III</td> <td>6</td> </tr>
<tr> <td>Machine Learning/Deep Learning/Unix Network
Programming/Project Work/Dissertation</td> <td>DSE-IV</td> <td>6</td> </tr>
</table>
</div>

<div id="Future">
<h4>Future Scope:</h4>
<p>
Computer Science provides various career options to the students.
Students have always been on a look out for a course in computers;
be it a full-fledged degree in the subject or a short-term course.
If you are also among such students and wish to pursue a career
in this subject, you can go for a B. Sc(H) in Computer Science .The
course covers all aspects, right from the fundamentals to
advanced courses such as Microprocessors, Network Programming,
Graphics and so on .This way the course prepares anyone for higher
education.<br>
As of now, there are many further options available for the students
after completing this course. They take up the placements
offered to them through campus placements. They enroll for
M.Sc.(CS)/MCA course after completing B.Sc.(H) Computer Science.
M.Sc. Computer Sc. and MCA courses of DU have 50 percent seats
reserved for the students who have a B.Sc. (H) degree in Computer
Science. Many of our students also enroll for MBA course after
graduating from this course.
</p>
</div>

<button id="style">Style the page!</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="ITques8.js"></script>
</body>
</html>

ITques8.js-

$(function(){
var style= $('#style');
style.css({
'background':'white'
});

style.on('click', function(){

$('body').css('background', '#1a9997');

24 | P a g e
$('h1').css({
'color':'white',
'text-align': 'center'
});

$('div').css({
'background':'white',
'color': '#165c5a',
'font-family': 'helvetica',
'border-radius': '20px',
'box-sizing': 'border-box',
'padding': '20px',
'margin': '20px'
});

$('table').css({
'width': '90%',
'border': '2px solid black',
'border-collapse': 'collapse',
'margin': '0 auto'
});

$('th, td').css({
'border': '1px solid black',
'padding': '5px'
});

document.body.scrollTop = 0; // For Safari


document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and
Opera
style.hide();
});
});

25 | P a g e
Output:

26 | P a g e
After clicking on the button to style the page-

27 | P a g e
Q9. Create an HTML page for an image gallery which shows the use of BOOTSTRAP
to rearrange and resize its contents on resizing the browser.

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Gallery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style>
.container{
margin-top: 20px;
}

.gallery img{
width: 90%;
height: 220px;
transition: transform 0.3s;
}

.gallery img:hover{
transform: scale(1.1);
}
</style>
</head>

<body background="oldback.jpeg">
<h1 class="text-center" style="font-family: Roboto; color: rgb(98, 44,
8);">Indian Art Forms</h1>
<div class="container">
<div class="row gallery">
<div class="col-md-3" ><figure><img src="kalamkari.jpg"
alt="kalamkari"><figcaption><b>Kalamkari</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="pattachitra.webp"
alt="pattachitra"><figcaption><b>Pattachitra</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="madhubani.jpg"
alt="madhubani"><figcaption><b>Madhubani</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="kalighat.jpg"
alt="kalighat"><figcaption><b>Kalighat</b></figcaption></figure></div>

28 | P a g e
</div>
<br><br>
<div class="row gallery">
<div class="col-md-3" ><figure><img src="tanjore.webp"
alt="tanjore"><figcaption><b>Tanjore</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="mysore.jpeg"
alt="mysore"><figcaption><b>Mysore</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="warli.webp"
alt="warli"><figcaption><b>Warli</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="sohrai.jpeg"
alt="sohrai"><figcaption><b>Sohrai</b></figcaption></figure></div>
</div>
</div>
</body>
</html>

Output:

29 | P a g e
On a different screen sizes-

30 | P a g e
Q10. Create an HTTP server using Node.js which handles requests on port 10000 or
a free port beyond 10000. Modify the server in such a way that opening
localhost:10000 will display “Hello world, This is my Node.js server” on browser.

Source Code:

const http= require('http')


const hostname= '127.0.0.1'
const port= 10000

function sayHello(req, res)


{
res.statusCode=200
res.setHeader('Content-Type', 'text/plain')
res.write('Hello world, This is my Node.js server')
res.end()
}

const server= http.createServer(sayHello)

server.listen(port, hostname, ()=>


console.log('Server running at http://${hostname}:${port}/'))

Output:
Running node command-

31 | P a g e
Q11. Create index.html file containing two forms for SignIn and SignUp. Submitting
SignIn form should search for credentials in mysql database using server created in
previous practical. On successful signin, a welcome page should be displayed.
Submitting SignUp form should insert new entry for credentials in mysql database
using server created in previous practical. On successful signup, user should be
returned back to index.html.

Source Code:
index.html-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<h1><center>Sign In/Sign Up</center></h1>
</head>

<body>
<center>
<h2>Sign In</h2>
<form action="\dosignin" method="post">
Username: <input type="text" name="user"><br><br>
Password: <input type="password" name="pwd"><br><br>
<button type="submit">Sign In</button>
</form> <br><br>
</center>

<center>
<br><h2>Sign Up!</h2><form action="\dosignup" method="post">
Username: <input type="text" name="user"><br><br>
Password: <input type="password" name="pwd"><br><br>
<button type="submit">Sign Up!</button>
</form>
</center>
</body>
</html>

server.js-

const http = require('http');


const express = require('express');
const app = express();
const fs = require('fs');
const mysql= require('mysql2');

32 | P a g e
var con = mysql.createConnection({
host: "localhost",
user: "root",
password: "krishna106",
database: "IT"
});

con.connect(function (err) {
if (err) {
console.error('Error connecting to MySQL:', err);
return;
}
console.log('Connected to MySQL database');
})

// Use the built-in middleware to parse urlencoded data


app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {


res.sendFile(__dirname + "/index.html");
});

app.post('/dosignin', (req, res) => {


const username = req.body.user;
const passwd = req.body.pwd;

console.log('Username: ' + username);


console.log('Password: ' + passwd);

con.query("SELECT * FROM users where username=? and password=?", [username,


passwd], function (err, result, fields) {
if (err) {
console.error('Error executing MySQL query:', err);
res.status(500).send('Internal Server Error');
return;
}
console.log(result);
if (result.length == 1) {
res.write("<h1>Sign-In Successful</h1>")
res.end()
} else {
res.write("<h1>Sign-in Failed</h1>")
res.end()
}
});
});

app.post('/dosignup', (req, res) => {

33 | P a g e
const username = req.body.user;
const passwd = req.body.pwd;

console.log('Username: ' + username);


console.log('Password: ' + passwd);

con.query("INSERT INTO users (username, password) VALUES(?, ?)", [username,


passwd], function (err, result, fields) {
if (err) {
console.error('Error executing MySQL query:', err);
res.status(500).send('Internal Server Error');
return;
}
console.log(result);
console.log('New record inserted');
res.redirect("/");
});
});

const server = http.createServer(app);

const port = 10000;


server.listen(port, () =>
console.log('Server running at http://localhost:' + port)
);

Output:
Starting the server and connecting to mysql-

34 | P a g e
Signin/Signup page-

Invalid credentials in signin-

Signing up-

35 | P a g e
Valid Signin-

Command Prompt output throughout-

Database(IT), table(users)-

36 | P a g e

You might also like