Scribd
Upload
408 views

WT Practical File

This document contains a summary of 3 HTML/JavaScript practical experiments: 1. The first practical creates a registration form in HTML with input fields like name, email, etc. 2. The second practical demonstrates the use of inline, internal, and external CSS styles on HTML paragraphs of text. 3. The third practical uses JavaScript functions and switch case statements to perform basic mathematical operations like addition, subtraction etc. based on user input numbers and operator selected. The results are displayed on the web page.

Uploaded by

virat
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
408 views

WT Practical File

This document contains a summary of 3 HTML/JavaScript practical experiments: 1. The first practical creates a registration form in HTML with input fields like name, email, etc. 2. The second practical demonstrates the use of inline, internal, and external CSS styles on HTML paragraphs of text. 3. The third practical uses JavaScript functions and switch case statements to perform basic mathematical operations like addition, subtraction etc. based on user input numbers and operator selected. The results are displayed on the web page.

Uploaded by

virat
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/ 21

Web Technology (2160708)

INDEX

EXPT. TITLE DATE OF DATE OF PAGE SIGN


NO. EXPERIMEN SUBMISSION NO.
T

Create registration form in


1
HTML.

Write html Page which shows the


2 use of Inline, Internal and
External CSS.

Write code Which shows the Use


of JavaScript, Switch Case and
3 Function for the same.

Create HTML Form which


4 includes validation using
JavaScript.

Write a JavaScript code to show


5
the concept of DOM.

JavaScript with Cookies.


6

Create Student.xml file which


7 shows the details of student.

Write Examples which shows the


8 use of XML DTD and XML
Schema.

9 Design a Form in PHP with


validation.

10 Write php code which shows the


use of MySQL.

11 Open Ended Problem

Name: Neel Shah 1


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL:1
AIM: Create registration form in HTML.

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Registration form Practical 1</title>
    </head>
    <body>
        <h2>Registration form</h2>
        <form action="#" method="post">
            <table>
                <tr>
                    <td>Enrollment No*: </td>
                    <td>
                        <input type="text" name="er_no" required>
                    </td>
                </tr>
                <tr>
                    <td>Name: </td>
                    <td>
                        <input name="name" type="text">
                    </td>
                </tr>
                <tr>
                    <td>Year: </td>
                    <td>
                        <input name="year" type="text" >
                    </td>
                </tr>
                <tr>
                    <td>Branch: </td>
                    <td>
                        <select name="branch" >
                            <option value="it">Information Technology</option>    
                            <option value="cp">Computer Engineering</option>    
                            <option value="me">Mechanical Engineering</option>    
                            <option value="auto">Automobiles</option>    
                            <option value="ec">Electronics And Communication</option>    
                            <option value="ee">Electrical Engineering</option>    
                            <option value="fpt">Food Processing Technology</option>    
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Email*: </td>
                    <td>
                        <input name="email" type="text" >
                    </td>
                </tr>
                <tr>
                    <td>Mobile*: </td>
                    <td>
                        <input name="mobile" type="number">
                    </td>
                </tr>
                <tr>
                    <td>Password: </td>
                    <td>
                        <input name="password" type="password" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br><input name="Submit" type="Submit" value="Submit">
                    </td>

Name: Neel Shah 2


Er_No: 170010116050
Web Technology (2160708)

                </tr>
            </table>
        </form>
    </body>
</html>

Output:

Name: Neel Shah 3


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 2
AIM: Write html Page which shows the use of Inline, Internal and External CSS.

Code:

(HTML)
<!DOCTYPE html>
<html>
    <head>
        <title>Types Of CSS Practical 2</title>
        <style>
            p{
                color:grey;
            }
        </style>
        <link rel="stylesheet" href="styles.css" type="text/css">
    </head>
    <body>
        <p style="color:orange">This is Inline CSS.<br><br></p>
        <p style="color:orange">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Nihil dolorem, quasi saepe error odit labore, fuga eligendi nesciunt voluptatibus reiciendis natus.
            <br>Ut voluptatem fugit, nesciunt itaque totam debitis voluptatibus beatae.
        </p>
        <p><br>This is Internal CSS.<br><br></p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Nihil dolorem, quasi saepe error odit labore, fuga eligendi nesciunt voluptatibus reiciendis natus.
            <br>Ut voluptatem fugit, nesciunt itaque totam debitis voluptatibus beatae.
        </p>
        <p id="ex1"><br>This is External CSS.<br><br></p>
        <p id="ex1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Nihil dolorem, quasi saepe error odit labore, fuga eligendi nesciunt voluptatibus reiciendis natus.
            <br>Ut voluptatem fugit, nesciunt itaque totam debitis voluptatibus beatae.
        </p>
    </body>
</html>

(CSS/Styles.css)
#ex1{
    color:green;
}

Output:

Name: Neel Shah 4


Er_No: 170010116050
Web Technology (2160708)

Name: Neel Shah 5


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 3
AIM: Write code Which shows the Use of Javascript Switch Case and Function for the same.

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Switch & Function Practical 3</title>
    </head>
    <body>
        <div>
            Enter 1<sup>st</sup> No.:  <input type="number" id="num1"><br>
            Enter 2<sup>nd</sup> No.: <input type="number" id="num2"><br>
        </div>
        <p>
            Enter:<br>
            1. for Addition<br>
            2. for Subtraction<br>
            3. for Multiplication<br>
            4. for Division<br>
            5. for Modulo<br>
        </p>
        <div>
            <input type="number" id="op" >
        </div>
        <br><input type="button" value="Calculate" onclick="check()">
        <div id="result">
        </div>

        <script>
            function check(){
                num1 = Number(document.getElementById("num1").value);
                num2 = Number(document.getElementById("num2").value);
                op = document.getElementById("op").value;
                console.log(num1);
                console.log(num2);
                console.log(op);
                switch(op){
                    case '1':
                        sum(num1,num2);
                        break;
                    case '2':
                        sub(num1,num2);
                        break;
                    case '3':
                        mul(num1,num2);
                        break;
                    case '4':
                        division(num1,num2);
                        break;
                    case '5':
                        mod(num1,num2);
                        break;
                    default:
                        msg();
                        break;
                } 
            }

            function sum(x,y){
                z = x+y;
                document.getElementById("result").innerHTML="<br>Addition of " + x + " and " + y + " is: " + z;  
            }

            function sub(x,y){
                z = x-y;
                document.getElementById("result").innerHTML="<br>Subtraction of " + x + " and " + y + " is: " + z;  

Name: Neel Shah 6


Er_No: 170010116050
Web Technology (2160708)

            }

            function mul(x,y){
                z = x*y;
                document.getElementById("result").innerHTML="<br>Multiplication of " + x + " and " + y + " is: " + z; 
            }

            function division(x,y){
                z = x/y;
                document.getElementById("result").innerHTML="<br>Division of " + x + " and " + y + " is: " + z; 
            }

            function mod(x,y){
                z = x%y;
                document.getElementById("result").innerHTML="<br>Modulo of " + x + " and " + y + " is: " + z; 
            }

            function msg(){
                document.getElementById("result").innerHTML="<br>Please Eneter Valid Inputs"; 
            }
        </script>
    </body>
</html>

Output:

Name: Neel Shah 7


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 4
AIM: Create HTML Form which includes validation using JavaScript.

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Form Validation Practical 5</title>
        <script src="mobilejs.js"></script>
    </head>
    <body>
        <h2>Registration form</h2>
        <form method="post" action="form.html">
            <table>
                <tr>
                    <td>Enrollment No*: </td>
                    <td>
                        <input type="text" id="er_no" required>
                    </td>
                </tr>
                <tr>
                    <td>Name: </td>
                    <td>
                        <input id="name" type="text">
                    </td>
                </tr>
                <tr>
                    <td>Email*: </td>
                    <td>
                        <input id="email" type="text" required>
                    </td>
                </tr>
                <tr>
                    <td>Mobile*: </td>
                    <td>
                        <input id="mobile" type="number" required>
                    </td>
                </tr>
                <tr>
                    <td>Password: </td>
                    <td>
                        <input id="password" type="password" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br><input id="Submit" type="Submit" value="Submit" onclick="validate()">
                    </td>
                </tr>
            </table>
        </form>

        <script>
            function validate(){
                var x = document.getElementById("mobile").value;
                var d = /\d/;
                if(x.length<10){
                    alert("Mobile Number Must Be 10 Digits Number!");
                }
                if(!d.test(x)){
                    alert("Please enter numeric value!")
                }
            }
        </script>
    </body>
</html>

Name: Neel Shah 8


Er_No: 170010116050
Web Technology (2160708)

Output:

Name: Neel Shah 9


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 5
AIM: Write a javascript code to show the concept of DOM.

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Concept Of DOM Practical 5</title>
    </head>
    <body>
        <div>
            Name: <input type="text" id="name" onkeyup="printmsg()">
        </div>
        <div id="msg"></div>
        <script>
            function printmsg(){
                name = document.getElementById("name").value;
                document.getElementById("msg").innerHTML = "<br><br>Hey "+ name +"!<br>Nice to meet you!";
            }
        </script>
    </body>
</html>

Output:

Name: Neel Shah 10


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 6
AIM: Javascript with Cookies.

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Cookies Practical 6</title> 
            <script type = "text/javascript">
                  function WriteCookie() {
                     name = document.getElementById("name").value;
                     cookievalue = document.getElementById("no").value + ";";
                     document.cookie = name+"=" + cookievalue;
                     document.getElementById("msg").innerHTML = "Cookies Name: " +name+  " Content= " + cookievalue ;
                  }
            </script>      
         </head>
         
         <body>      
           Enter name: <input type = "text" id="name">
           <br><br>Er_No: <input type="number" id="no">
           <br><br><input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
           <div id="msg"></div>
         </body>
</html>

Output:

Name: Neel Shah 11


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 7
AIM: Create Student.xml file which shows the details of student.

Code:
<?xml version="1.0"?>
<!DOCTYPE Student_Data [
<!ELEMENT Music_Album (Er_No,Name,Dept,Year,Collage,University,Joininng_Year,Passing_Year)>
<!ELEMENT Er_No (Int)>
<!ELEMENT Name (String)>
<!ELEMENT Dept (String)>
<!ELEMENT Year (Int)>
<!ELEMENT Collage (String)>
<!ELEMENT University (String)>
<!ELEMENT Joininng_Year (Int)>
<!ELEMENT Passing_Year (Int)>
]>
<Student_Data>
    <Er_No> 170010116050 </Er_No>
    <Name> Neel Shah </Name>
    <Dept> Information Technology </Dept>
    <Year> 3 </Year>
    <Collage> ADIT </Collage>
    <University> GTU </University>
    <Joininng_Year> 2017 </Joininng_Year>
    <Passing_Year> 2021 </Passing_Year>
</Student_Data>

Output:

Name: Neel Shah 12


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 8
AIM: Write Examples which shows the use of XML DTD and XML Schema.

Code:
(XML DTD)(Student.xml)
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<Student_Data>
    <Er_No> 170010116050 </Er_No>
    <Name> Neel Shah </Name>
    <Dept> Information Technology </Dept>
    <Year> 3 </Year>
    <Collage> ADIT </Collage>
    <University> GTU </University>
    <Joininng_Year> 2017 </Joininng_Year>
    <Passing_Year> 2021 </Passing_Year>
</Student_Data>
(XML DTD)(Note.dtd)
<!DOCTYPE Student_Data [
<!ELEMENT Student_Data (Er_No,Name,Dept,Year,Collage,University,Joininng_Year,Passing_Year)>
<!ELEMENT Er_No (Int)>
<!ELEMENT Name (String)>
<!ELEMENT Dept (String)>
<!ELEMENT Year (Int)>
<!ELEMENT Collage (String)>
<!ELEMENT University (String)>
<!ELEMENT Joininng_Year (Int)>
<!ELEMENT Passing_Year (Int)>
]>

Output:

(XML DTD)(Student_Schema.xml)
<?xml version="1.0"?>

<Student_Data  xmlns="https://www.adit.ac.in" xmlns:xsi="http://www.adit.ac.in" xsi:schemaLocation="schema.xsd ">

    <Er_No> 170010116050 </Er_No>

    <Name> Neel Shah </Name>

    <Dept> Information Technology </Dept>

    <Year> 3 </Year>

Name: Neel Shah 13


Er_No: 170010116050
Web Technology (2160708)

    <Collage> ADIT </Collage>

    <University> GTU </University>

    <Joininng_Year> 2017 </Joininng_Year>

    <Passing_Year> 2021 </Passing_Year>

</Student_Data>

(XML DTD)(schema.xsd)
<?xml version="1.0"?>
<xs:schema  xmlns:xs="http://www.adit.ac.in"
            targetNamespace="https://www.adit.ac.in"
            xmlns="https://www.adit.ac.in"
            elementFormDefault="qualified">
<xs:element name="Student_Data">
<xs:complexType>
  <xs:sequence>
    <xs:element name="Er_No" type="xs:integer"/>
    <xs:element name="Name" type="xs:string"/>
    <xs:element name="Dept" type="xs:string"/>
    <xs:element name="Year" type="xs:integer"/>
    <xs:element name="Collage" type="xs:string"/>
    <xs:element name="University" type="xs:string"/>
    <xs:element name="Joining_Year" type="xs:integer"/>
    <xs:element name="Passing_Year" type="xs:integer"/>
  </xs:sequence>
</xs:complexType>

</xs:element>
</xs:schema>

Output:
(Student_Data_Schema.xml)

(schema.xsd)

Name: Neel Shah 14


Er_No: 170010116050
Web Technology (2160708)

Name: Neel Shah 15


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 09
AIM: Design a Form in PHP with validation.

Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
$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";

Name: Neel Shah 16


Er_No: 170010116050
Web Technology (2160708)

} else {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",
$website)) {
$websiteErr = "Invalid URL";
}
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

<h2>PHP Form Validation/h2>


<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Name: Neel Shah 17


Er_No: 170010116050
Web Technology (2160708)

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>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
?>
</body>
</html>

Name: Neel Shah 18


Er_No: 170010116050
Web Technology (2160708)

Output:

Name: Neel Shah 19


Er_No: 170010116050
Web Technology (2160708)

PRACTICAL: 10
AIM: Write php code which shows the use of MySQL.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<?php
$servername = "localhost";
$username = "kevin";
$password = "";
$dbname = "mydb";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, lastname FROM mytable";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Name</th></tr>";
while($row = $result->fetch_assoc()) {

Name: Neel Shah 20


Er_No: 170010116050
Web Technology (2160708)

echo "<tr><td>" . $row["id"]. "</td><td>" . $row["firstname"]. " " . $row["lastname"]. "</td></tr>";


}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>
</body>
</html>

Output:

Name: Neel Shah 21


Er_No: 170010116050

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy