student notes / est. for the classroom

HTML, CSS, JavaScript, Python, data science, computer networks — written the way you'd explain it to a classmate, not a compiler.

Top Job & Internship Portals

Handpicked portals for fresher jobs, tech roles, and listings in Hyderabad

GFG

GeeksforGeeks

Tech & Software Roles

Visit →
INT

Internshala

Fresher Jobs & Internships

Visit →
GOOG

Google Careers

Global Google Openings

Visit →
APN

Apna Jobs

Local Jobs in Hyderabad

Visit →
INS

Instahyre

Tech Roles in Hyderabad

Visit →
NAUK

Naukri.com

Fresher Jobs in Hyderabad

Visit →
📢 Updated daily

Internship & Job Alerts

01

Latest notes

November 04, 2022

Web Programming Lab Programs

 LAB 1



 

SCAN this QR code to connect with git hub projects

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&hellip;


<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 Not
function 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.

  1. <?php  
  2. $num = 0;  
  3. $n1 = 0;  
  4. $n2 = 1;  
  5. echo "<h3>Fibonacci series for first 12 numbers: </h3>";  
  6. echo "\n";  
  7. echo $n1.' '.$n2.' ';  
  8. while ($num < 10 )  
  9. {  
  10.     $n3 = $n2 + $n1;  
  11.     echo $n3.' ';  
  12.     $n1 = $n2;  
  13.     $n2 = $n3;  
  14.     $num = $num + 1;  
  15. ?>






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

  1. body{   
  2.     background: #eee;  
  3. }  
  4. #frm{  
  5.     border: solid gray 1px;  
  6.     width:25%;  
  7.     border-radius: 2px;  
  8.     margin: 120px auto;  
  9.     background: white;  
  10.     padding: 50px;  
  11. }  
  12. #btn{  
  13.     color: #fff;  
  14.     background: #337ab7;  
  15.     padding: 7px;  
  16.     margin-left: 70%;  
  17. }  



Save this file as connection.php

  1. <?php      
  2.     $host = "localhost";  
  3.     $user = "root";  
  4.     $password = '';  
  5.     $db_name = "javatpoint";  
  6.       
  7.     $con = mysqli_connect($host, $user, $password, $db_name);  
  8.     if(mysqli_connect_errno()) {  
  9.         die("Failed to connect with MySQL: ". mysqli_connect_error());  
  10.     }  
  11. ?>  



Save this file as authentication.php

  1. <?php      
  2.     include('connection.php');  
  3.     $username = $_POST['user'];  
  4.     $password = $_POST['pass'];  
  5.       
  6.         //to prevent from mysqli injection  
  7.         $username = stripcslashes($username);  
  8.         $password = stripcslashes($password);  
  9.         $username = mysqli_real_escape_string($con, $username);  
  10.         $password = mysqli_real_escape_string($con, $password);  
  11.       
  12.         $sql = "select *from login where username = '$username' and password = '$password'";  
  13.         $result = mysqli_query($con, $sql);  
  14.         $row = mysqli_fetch_array($result, MYSQLI_ASSOC);  
  15.         $count = mysqli_num_rows($result);  
  16.           
  17.         if($count == 1){  
  18.             echo "<h1><center> Login successful </center></h1>";  
  19.         }  
  20.         else{  
  21.             echo "<h1> Login failed. Invalid username or password.</h1>";  
  22.         }     
  23. ?>  





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

02

Capstone resource hub

Codingacharya

Capstone Learning Resources, Notes & Project Hub

TCS NQT Questions
Read Notes
Machine Learning – ACE Theory
Read Notes
Machine Learning PPT
Read Notes
MachienLearning LAB
Read Notes
CSPT LAB programs
Read Notes
Time table and CSPT syllabus
Read Notes
Appreciations
Read Notes
ISTE life memberships
Read Notes
Artificial Intelligence & Analytics
Read Notes
Fullstack Web Dev
Read Notes
MERN Web Dev
Read Notes
Course Structure
Read Notes
Cloud Computing
Read Notes
90 Days ML Challenge
Read Notes
Advanced Analytics & Viz
Read Notes
Advanced Machine Learning
Read Notes
React JS
Read Notes
ML Chaitanya
Read Notes
Important Links
Read Notes
CSS Effects
Read Notes
RESUME
Read Notes
Bootstrap CSS
Read Notes
MongoDB
Read Notes
OWN Python Package
Read Notes
HTML Course
Read Notes
HTML Projects
Read Notes
GitHub Projects
Read Notes
Angular JS
Read Notes
Journals
Read Notes
NLP Notes
Read Notes
Videos
Read Notes
Data Analytics & Viz
Read Notes
Cloud Computing (Archive)
Read Notes
Open CV
Read Notes
jQuery
Read Notes
React JS (Archive)
Read Notes
Node JS
Read Notes
DAV Theory
Read Notes
DAV Lab
Read Notes
Big Data Notes
Read Notes
R-Programming
Read Notes
HADOOP Lab
Read Notes
GATE DA
Read Notes
JAVA Lab
Read Notes
Computer Networks
Read Notes
03

Live projects & profiles