WDL experiment 2-6

                   <!-----------------------------Experiment 2----------------------------->

<!--------------------------------------Create Simple html webpage---------------------------------->


<!DOCTYPE html>
<html>
<head>
    <title>Sample Web Page</title>
    <style>
        h1{
            padding-top: 50px;
            color: rgba(255,255,255,0.9);
        }

        img{
            padding-top: 30px;
        }

        p{
            padding: 40px 60px;
            text-align: justify;
            color: rgba(255,255,255,0.9);
            font-family: sans-serif;
            font-weight: bold;
            font-size: 18px;
        }


    </style>
</head>
<body>
    <div align="center">
        <h1>Player Unknown's: BattleGrounds(PUBG)</h1>
        <img src="pubg.jpg">
<!------download any image from google and save it with the name pubg.jpg n the same folder where the cod is saved--->
        <p>PlayerUnknown's Battlegrounds (PUBG) is an online multiplayer battle royale game developed and published by PUBG Corporation, a subsidiary of South Korean video game company Bluehole. The game is based on previous mods that were created by Brendan "PlayerUnknown" Greene for other games using the film Battle Royale for inspiration, and expanded into a standalone game under Greene's creative direction. In the game, up to one hundred players parachute onto an island and scavenge for weapons and equipment to kill others while avoiding getting killed themselves. The available safe area of the game's map decreases in size over time, directing surviving players into tighter areas to force encounters. The last player or team standing wins the round.</p>
    </div>
</body>
</html>


    <!-----------------------------Experiment 3----------------------------->

<!--------------------------------------Create Simple html and css webpage------------------------------->

<!DOCTYPE html>
<html>
<head>
    <title>Sample Web Page</title>
    <style>
        body{
            background-color: yellow;
        }
        a{
            font-size: 40px;
            color: blue;
            text-decoration: none;
        }
        a:hover{
            color: red;
        }

        img{
            padding-top: 30px;
        }

        p{
            padding: 40px 60px;
            text-align: justify;
            color: black;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 18px;
        }


        table,tr,th,td{
            border: 1px solid black;
            border-collapse: collapse;

        }
        tr,th,td{
            padding: 10px;
            font-size: 15px;
        }
        th,td{
            background-color: white;
            opacity: 0.4;
        }
        td:hover{
            opacity: 1;
        }
        img:hover{
            opacity: 0.8;
        }


    </style>
</head>
<body>
    <div align="center">
        <a href="https://www.pubgmobile.com/" target="_blank">Player Unknown's: BattleGrounds(PUBG)</a>
        <br>
        <img src="pubg.jpg">
<!------download any image from google and save it with the name pubg.jpg n the same folder where the cod is saved--->
        <p>PlayerUnknown's Battlegrounds (PUBG) is an online multiplayer battle royale game developed and published by PUBG Corporation, a subsidiary of South Korean video game company Bluehole. The game is based on previous mods that were created by Brendan "PlayerUnknown" Greene for other games using the film Battle Royale for inspiration, and expanded into a standalone game under Greene's creative direction. In the game, up to one hundred players parachute onto an island and scavenge for weapons and equipment to kill others while avoiding getting killed themselves. The available safe area of the game's map decreases in size over time, directing surviving players into tighter areas to force encounters. The last player or team standing wins the round.</p>

        <table>
            <tr>
                <th>Player</th>
                <th>Medal</th>
                <th>Rank</th>
            </tr>
            <tr>
                <td>DungeonMaster</td>
                <td>Platinum II</td>
                <td>33</td>
            </tr>
            <tr>
                <td>Nicolas</td>
                <td>Diamond II</td>
                <td>38</td>
            </tr>
            <tr>
                <td>BishuTheSlayer</td>
                <td>Crown V</td>
                <td>43</td>
            </tr>
        </table>
    </div>

</body>
</html>


<!--------------------Experiment 4------------------------>
<!-------------------javascript form validation----------->
<!DOCTYPE html>
<html>
<head>
    <title>Registration Form</title>

    <!----------------Style/CSS code--------------------->
    <style>
        body{
            padding: 0;
            margin: 0;
            background-color: yellow;
        }

        form{
            position: absolute;
            top: 60px;
            left: 500px;
            font-size: 18px;
            border: 1px solid black;
            background-color: gold;
            padding: 25px;
        }

        input{
            width: auto;
            height: 20px;

        }

        h2{
            margin-top: 0px;
            text-align: center;
            font-weight: bold;
        }


        input[type="submit"]{

            margin-top: 30px;
            height: 30px;
            width: 300px;
        }

    </style>


    <!-------------javascript code--------------->
    <script>
    function validateForm(){
        var fname= document.forms["Registration"]["Fname"];
        var lname= document.forms["Registration"]["Lname"];
        var address= document.forms["Registration"]["Address"];
        var email= document.forms["Registration"]["Email"];
        var phoneno= document.forms["Registration"]["Phoneno"];
        var gender= document.forms["Registration"]["gender"];
        if(fname.value == ""){
            alert("Enter the First Name");
            return false;
        }
        if(lname.value == ""){
            alert("Enter the Last Name");
            return false;
        }
        if(address.value == ""){
            alert("Enter the Address");
            return false;
        }
        if(email.value == ""){
            alert("Enter the Email");
            return false;
        }
        if(phoneno.value == ""){
            alert("Enter the Phone Number");
            return false;
        }
        if(gender.value == ""){
            alert("Select the Gender");
            return false;
        }
        return true;

    }
    </script>
</head>

<body>
    <div class="Regester">
        <form name="Registration" action="Website/index.html" onsubmit="return validateForm()" method="post">

            <h2>Registration form</h2>
            <br><br>

                First Name: <input type="text" name="Fname" >
            <br><br>
                Last Name: <input type="text" name="Lname">

            <br><br>
                Address: <input type="text" name="Address">
            <br><br>
                Email: <input type="email" name="Email">
            <br><br>
                Phone Number: <input type="number" name="Phoneno">
            <br><br>
                Gender:
                    <input type="radio" name="gender">Male

                    <input type="radio" name="gender">Female
            <br><br>
                Course:
                    <select>
                        <option>Computer</option>
                        <option>Mechancial</option>
                        <option>Civil</option>
                    </select>
            <br><br>
                <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>


<!-------------------------experiment 5----------------------->
<!------------------------php--------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title>My first PHP code</title>
</head>
<body>

 <h1>PHP PAGE!!</h1>
 <?php
    echo "Hello Nigga";
 ?>

</body>
</html>


<!------------------------------experiment 6-------------------------------------->
<!---------------------------php and data connectivity-------------------------->


<!---------------make signin.php and paste this code ad do save in c:xampp:htdocs---------------------->

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: yellow;
text-align:center;
}
</style>
<body>
<h1>LOGIN PAGE</h1>
<form action="login.php"method="POST">
username:
<input type="text"name="username"><br>
password:
<input type="password"name="password"><br><br>
<input type="submit"value="submit">
</form>
</body>
</html>

        <!-----------------make login.php and save in same location and make database name db and table name abc in mysql---                ------------------------------->


<?php
// get values from form in login.php file
   $username = $_POST['username'];

   $password = $_POST['password'];

 // to presvent mysql injection

     $username=stripcslashes($username);
     $password=stripcslashes($password);
     $username=mysql_real_escape_string($username);
     $password=mysql_real_escape_string($password);
// connect to the server and select databse

    mysql_connect("localhost", "root", "");
    mysql_select_db("db");
// query the database for user

    $result=mysql_query("select * from abc where username ='$username'

and password ='$password'")
    or die("failed to query database " .mysql_error());
    $row= mysql_fetch_array($result);
    if($row['username'] == $username && $row['password'] == $password)
    {
        echo "login success !" ;
    }
    else
    {
        echo "failed to login ";

    }
?>