LAB 1
Design web pages for your college containing a description of the courses, departments, faculties, library etc, use href, list tags
HTML CODE:
<html>
<head>
<center>ALL STYLE SHEETS</center>
<title>USE of INTERNAL and EXTERNAL STYLESHEETS
</title>
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css">
.vid{font-family:verdana;font-style:italic;color:red;text-align:center}
.ani{font-family:tahoma;font-style:italic;font-size:20;text-align:center;}
font{font-family:georgia;color:blue;font-size:20}
ul{list-style-type:circle}
</style>
</head>
<body>
<ol style="list-style-type:lower-alpha">
<b>A. GROUP OF COLLEGES</b><br><br><br>
<li>Raj Engineering College
<li>Dr University and Research Institute
<li>Raj College of Engineering,Bangalore
<li>Tamilnadu College of Arts and Science
</ol>
<p style="font-size:20pt;color:purple">A.C.S GROUP OF COLLEGES</p>
<p class="ani">CSS Group of colleges is owned by XXX.<br>It is approved
by
International Council
It is affliated to CDU University.<br></p>
<h2 class="vid">Chaitanya College of Engg</h2>
<br>
<font>It is an ISO certified Institution</font><br>
<br>
<font>
List of Courses offered
<ul>
<li>Computer Science and Engineering</li>
<li>Ece</li>
<li>mech</li>
<li>eee</li>
</ul>
</font>
Results of cse students
<table width="100%" cellspacing="2" cellpadding="2" border="5">
<tr>
<th>S.NAME</th>
<th>MARKS</th>
<th>RESULT</th>
</tr>
<tr>
<td align="center">Dinesh</td>
<td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Bala</td>
<td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Gopi</td>
<td align="center">98</td>
<td align="center">pass</td>
</tr>
</table>
</body>
</html>
For stylesheet use this code.
Save this file as XYZ.css
XYZ.CSS:
h3{font-family:arial;font-size:20;color:cyan}
table{border-color:green}
td{font-size:20pt;color:magenta}
LAB 2
Create your class timetable using table tag.
<html><body> <h1>TIME TABLE</h1> <table border="5" cellspacing="0" align="center"> <!--<caption>Timetable</caption>--> <tr> <td align="center" height="50" width="100"><br> <b>Day/Period</b></br> </td> <td align="center" height="50" width="100"> <b>I<br>9:30-10:20</b> </td> <td align="center" height="50" width="100"> <b>II<br>10:20-11:10</b> </td> <td align="center" height="50" width="100"> <b>III<br>11:10-12:00</b> </td> <td align="center" height="50" width="100"> <b>12:00-12:40</b> </td> <td align="center" height="50" width="100"> <b>IV<br>12:40-1:30</b> </td> <td align="center" height="50" width="100"> <b>V<br>1:30-2:20</b> </td> <td align="center" height="50" width="100"> <b>VI<br>2:20-3:10</b> </td> <td align="center" height="50" width="100"> <b>VII<br>3:10-4:00</b> </td> </tr> <tr> <td align="center" height="50"> <b>Monday</b></td> <td align="center" height="50">Eng</td> <td align="center" height="50">Mat</td> <td align="center" height="50">Che</td> <td rowspan="6" align="center" height="50"> <h2>L<br>U<br>N<br>C<br>H</h2> </td> <td colspan="3" align="center" height="50">LAB</td> <td align="center" height="50">Phy</td> </tr> <tr> <td align="center" height="50"> <b>Tuesday</b> </td> <td colspan="3" align="center" height="50">LAB </td> <td align="center" height="50">Eng</td> <td align="center" height="50">Che</td> <td align="center" height="50">Mat</td> <td align="center" height="50">SPORTS</td> </tr> <tr> <td align="center" height="50"> <b>Wednesday</b> </td> <td align="center" height="50">Mat</td> <td align="center" height="50">phy</td> <td align="center" height="50">Eng</td> <td align="center" height="50">Che</td> <td colspan="3" align="center" height="50">LIBRARY </td> </tr> <tr> <td align="center" height="50"> <b>Thursday</b> </td> <td align="center" height="50">Phy</td> <td align="center" height="50">Eng</td> <td align="center" height="50">Che</td> <td colspan="3" align="center" height="50">LAB </td> <td align="center" height="50">Mat</td> </tr> <tr> <td align="center" height="50"> <b>Friday</b> </td> <td colspan="3" align="center" height="50">LAB </td> <td align="center" height="50">Mat</td> <td align="center" height="50">Che</td> <td align="center" height="50">Eng</td> <td align="center" height="50">Phy</td> </tr> <tr> <td align="center" height="50"> <b>Saturday</b> </td> <td align="center" height="50">Eng</td> <td align="center" height="50">Che</td> <td align="center" height="50">Mat</td> <td colspan="3" align="center" height="50">SEMINAR </td> <td align="center" height="50">SPORTS</td> </tr> </table></body></html>
LAB 3
Create user Student feedback form using textbox, text area , checkbox, radio button, select box etc.
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
LAB 4
Create a web page using frame. Divide the page into two parts with Navigation links on left hand side of
page (width=20%) and content page on right hand side of page (width = 80%). On clicking the navigation
Links corresponding content must be shown on the right hand side.
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
LAB 5
Write html code to develop a webpage having two frames that divide the webpage into two equal rows
and then divide the row into equal columns fill each frame with a different background color.
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="a.html"></frame>
<frame src="b.html"></frame>
</frameset>
<frame src="c.html"></frame>
</frameset>
LAB 6
Create your resume using HTML tags also experiment with colors, text , link ,size and also other tags you
studied
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
<body class="w3-light-grey">
<!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width:1400px;">
<!-- The Grid -->
<div class="w3-row-padding">
<!-- Left Column -->
<div class="w3-third">
<div class="w3-white w3-text-grey w3-card-4">
<div class="w3-display-container">
<img src="/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar">
<div class="w3-display-bottomleft w3-container w3-text-black">
<h2>Jane Doe</h2>
</div>
</div>
<div class="w3-container">
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>ex@mail.com</p>
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>
<hr>
<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>
<p>Adobe Photoshop</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>
</div>
<p>Photography</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">
<div class="w3-center w3-text-white">80%</div>
</div>
</div>
<p>Illustrator</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>
</div>
<p>Media</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
</div>
<br>
<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
<p>English</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:100%"></div>
</div>
<p>Spanish</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:55%"></div>
</div>
<p>German</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:25%"></div>
</div>
<br>
</div>
</div><br>
<!-- End Left Column -->
</div>
<!-- Right Column -->
<div class="w3-twothird">
<div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>
<div class="w3-container">
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span class="w3-tag w3-teal w3-round">Current</span></h6>
<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014</h6>
<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar 2012</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>
</div>
</div>
<div class="w3-container w3-card w3-white">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
<div class="w3-container">
<h5 class="w3-opacity"><b>W3Schools.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>
<p>Web Development! All I need to know in one place</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>London Business School</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
<p>Master Degree</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>School of Coding</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
<p>Bachelor Degree</p><br>
</div>
</div>
<!-- End Right Column -->
</div>
<!-- End Grid -->
</div>
<!-- End Page Container -->
</div>
<footer class="w3-container w3-teal w3-center w3-margin-top">
<p>Find me on social media.</p>
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>
</body>
</html>
LAB 7
Design a web page of your home town with an attractive background color, text color, an Image, font etc.
(use internal CSS).
<html>
<head>
<title>My first styled page</title>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
by myself.</address>
</body>
</html>
LAB 8
Develop a JavaScript to display today’s date
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p id="demo"></p>
<script>
const d = new Date("2022-03-25");
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
LAB 9
Develop simple calculator for addition, subtraction, multiplication and division operation using
JavaScript
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
LAB 10
Create HTML Page with JavaScript which takes Integer number as input and tells whether the number is
ODD or EVEN
<html>
<body>
<script>
var num=6;
if(num%2==0)
document.write(num + " is an Even Number");
else
document.write(num + " is an Odd Number");
</script>
</body>
</html>
LAB 11
Write a PHP program to display today’s date in dd-mm-yyyy format.
<html>
<body>
<?php
echo "Today is " . date("Y/m/d") . "<br>";
echo "Today is " . date("Y.m.d") . "<br>";
echo "Today is " . date("Y-m-d") . "<br>";
echo "Today is " . date("l");
?>
</body>
</html>
LAB 12
Write a PHP program to check if number is prime or not.
<?php// PHP code to check whether a number is prime or Not// function to check the number is Prime or Notfunction primeCheck($number){ if ($number == 1) return 0; for ($i = 2; $i <= $number/2; $i++){ if ($number % $i == 0) return 0; } return 1;} // Driver Code$number = 31;$flag = primeCheck($number);if ($flag == 1) echo "Prime";else echo "Not Prime"
?>
LAB 13
Write a PHP program to print first 10 Fibonacci Numbers.
- <?php
- $num = 0;
- $n1 = 0;
- $n2 = 1;
- echo "<h3>Fibonacci series for first 12 numbers: </h3>";
- echo "\n";
- echo $n1.' '.$n2.' ';
- while ($num < 10 )
- {
- $n3 = $n2 + $n1;
- echo $n3.' ';
- $n1 = $n2;
- $n2 = $n3;
- $num = $num + 1;
- ?>
LAB 14
Create HTML page that contain textbox, submit / reset button. Write PHP program to display this
information and also store into text file
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid (this regular expression also allows dashes in the URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo $name;?>">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
<br><br>
Gender:
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="other") echo "checked";?> value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>
LAB 15
Write a PHP Script for login authentication. Design an html form which takes username and password
from user and validate against stored username and password in file.
Save this file as index1.html
<html>
<head>
<title>PHP login system</title>
// insert style.css file inside index.html
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<div id = "frm">
<h1>Login</h1>
<form name="f1" action = "authentication.php" onsubmit = "return validation()" method = "POST">
<p>
<label> UserName: </label>
<input type = "text" id ="user" name = "user" />
</p>
<p>
<label> Password: </label>
<input type = "password" id ="pass" name = "pass" />
</p>
<p>
<input type = "submit" id = "btn" value = "Login" />
</p>
</form>
</div>
// validation for empty field
<script>
function validation()
{
var id=document.f1.user.value;
var ps=document.f1.pass.value;
if(id.length=="" && ps.length=="") {
alert("User Name and Password fields are empty");
return false;
}
else
{
if(id.length=="") {
alert("User Name is empty");
return false;
}
if (ps.length=="") {
alert("Password field is empty");
return false;
}
}
}
</script>
</body>
</html>
Save this file as style1.css
- body{
- background: #eee;
- }
- #frm{
- border: solid gray 1px;
- width:25%;
- border-radius: 2px;
- margin: 120px auto;
- background: white;
- padding: 50px;
- }
- #btn{
- color: #fff;
- background: #337ab7;
- padding: 7px;
- margin-left: 70%;
- }
Save this file as connection.php
- <?php
- $host = "localhost";
- $user = "root";
- $password = '';
- $db_name = "javatpoint";
-
- $con = mysqli_connect($host, $user, $password, $db_name);
- if(mysqli_connect_errno()) {
- die("Failed to connect with MySQL: ". mysqli_connect_error());
- }
- ?>
Save this file as authentication.php
- <?php
- include('connection.php');
- $username = $_POST['user'];
- $password = $_POST['pass'];
-
- //to prevent from mysqli injection
- $username = stripcslashes($username);
- $password = stripcslashes($password);
- $username = mysqli_real_escape_string($con, $username);
- $password = mysqli_real_escape_string($con, $password);
-
- $sql = "select *from login where username = '$username' and password = '$password'";
- $result = mysqli_query($con, $sql);
- $row = mysqli_fetch_array($result, MYSQLI_ASSOC);
- $count = mysqli_num_rows($result);
-
- if($count == 1){
- echo "<h1><center> Login successful </center></h1>";
- }
- else{
- echo "<h1> Login failed. Invalid username or password.</h1>";
- }
- ?>
LAB 16
Write PHP Script for storing and retrieving user information from MySql table.
a. Design A HTML page which takes Name, Address, Email and Mobile No. from user.
b. Store this data in MySql database / text file.
c. Next page display all user in html table using PHP.
Step 1
Use this code to insert the data into Database
Save this file as search.php
<html>
<head>
<title>Insert into page</title>
</head>
<body>
<center>
<?php
// servername => localhost
// username => root1
// password => root
// database name => staff
$conn = mysqli_connect("localhost", "peter", "abc123", "ajax_demo");
// Check connection
if($conn === false){
die("ERROR: Could not connect. "
. mysqli_connect_error());
}
// Taking all 5 values from the form data(input)
$id = $_REQUEST['id'];
$FirstName = $_REQUEST['FirstName'];
$LastName = $_REQUEST['LastName'];
$Age = $_REQUEST['Age'];
$Hometown = $_REQUEST['Hometown'];
$Job = $_REQUEST['Job'];
// Performing insert query execution
// here our table name is college
$sql = "INSERT INTO user VALUES ('$id','$FirstName',
'$LastName','$Age','$Hometown','$Job')";
if(mysqli_query($conn, $sql)){
echo "<h3>data stored in a database successfully."
. " Please browse your localhost php my admin"
. " to view the updated data</h3>";
echo nl2br("\n$id\n$FirstName\n $LastName\n "
. "$Age\n $Hometown\n $Job");
} else{
echo "ERROR: Hush! Sorry $sql. "
. mysqli_error($conn);
}
// Close connection
mysqli_close($conn);
?>
</center>
</body>
</html>
Step-2
Use this code to display the html page front view
Save this file as db.php
<html lang="en">
<head>
<title>GFG- Store Data</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
</style>
</head>
<body>
<center>
<h1>Storing Form data in Database</h1>
<form action="search.php" method="post">
<p>
<label for="id">id</label>
<input type="text" name="id" id="id">
</p>
<p>
<label for="firstName">FirstName:</label>
<input type="text" name="FirstName" id="FirstName">
</p>
<p>
<label for="lastName">LastName:</label>
<input type="text" name="LastName" id="LastName">
</p>
<p>
<label for="Gender">Age</label>
<input type="text" name="Age" id="Age">
</p>
<p>
<label for="Address">Hometown</label>
<input type="text" name="Hometown" id="Hometown">
</p>
<p>
<label for="emailAddress">Job</label>
<input type="text" name="Job" id="Job">
</p>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
Step-3
Use this code to retrieve data from Database
Save this file as getuser1.php
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Step-4
Html & javascript code to search data from Database & to display data
Save this file as user.html
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser1.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
LAB 17
Jquery code for animation
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
LAB 18
Node js code for Helloworld
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World!');
}).listen(8080);
LAB 19
React js code for helloworld
import React from 'react';
import './App.css';
function App() {
return (
<h1> Hello World! </h1>
);
}
export default App;
Lab 20
XML Dom code
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">This is a Heading</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me!
</button>
</body>
</html>
Thank you

No comments:
Post a Comment