Web Technologies

Practical 1 : Create a static web page using basic HTML tags.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Example</title>
  <style>
    body {
      background-color: powderblue;
    }
    h1, h2, h3, h4, h5, h6 {
      margin: 0.5em 0;
    }
  </style>
</head>
<body>
 
  <center>
    <h1>This is my web page</h1>
    <h2>This is my web page</h2>
    <h3>This is my web page</h3>
    <h4>This is my web page</h4>
    <h5>This is my web page</h5>
    <h6>This is my web page</h6>
 
    <img src="https://pbs.twimg.com/profile_images/1371391005891563527/rip-cwgt_400x400.jpg" alt="Profile Image">
 
    <article>
      <p>Basically, the log is: log<sub>10</sub><sup>100</sup></p>
      <aside>Log is used more nowadays</aside>
    </article>
 
    <small>Using small</small>
    <big>Using big</big>
 
    <br>
    <b>Bold</b>
    <br>
    <i>Italics</i>
    <br>
    <u>Underline</u>
    <br>
 
    <a href="https://in.bookmyshow.com/">CLICK HERE</a>
  </center>
 
</body>
</html>

Practical 2 : To create webpage using HTML 5 tags.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Tags Example</title>
  <style>
    body {
      background-color: lightgrey;
    }
    h2, h3 {
      text-align: center;
    }
    .center-content {
      text-align: center;
    }
  </style>
</head>
<body>
 
  <div class="center-content">
    <img src="C:\Users\91982\Downloads\your-name\image" width="400" height="100" alt="Swiggy Logo">
    <h2>SWIGGY</h2>
  </div>
 
  <article>
    <h3>Delivering happiness at your doorstep</h3>
  </article>
 
  <audio controls>
    <source src="C:\Users\91982\Downloads\neighing-of-a-horse-154724.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
 
  <marquee><h2><b>Think food, think Swiggy</b></h2></marquee>
 
  <details>
    <summary>25% off on your first order above 299</summary>
  </details>
 
  <video width="200" height="200" controls>
    <source src="C:\Users\91982\Downloads\SampleVideo_1280x720_2mb.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
 
  <div class="center-content">
    <a href="https://www.swiggy.com/">CLICK HERE</a>
  </div>
 
  <h3>About Us</h3>
  <p>Swiggy is an Indian online food ordering and delivery platform. Founded in 2014, Swiggy is headquartered in Bangalore and operates in more than 580 Indian cities, as of July 2023. Besides food delivery, the platform also provides on-demand grocery deliveries under the name Instamart and a same-day package delivery service called Swiggy Genie.</p>
 
</body>
</html>

Practical 3 : To create a registration form using form tag.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amazon Form</title>
  <style>
    body {
      background-color: lightgrey;
      font-family: Arial, sans-serif;
    }
    h1, h3 {
      text-align: center;
    }
    .center-content {
      text-align: center;
    }
    form {
      width: 80%;
      margin: 0 auto;
    }
    fieldset {
      margin-bottom: 1em;
      padding: 1em;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    label, input, select, textarea {
      display: block;
      width: 100%;
      margin-top: 0.5em;
    }
    input[type="submit"] {
      width: auto;
      padding: 0.5em 1em;
      margin-top: 1em;
      display: block;
    }
  </style>
</head>
<body>
 
  <div class="center-content">
    <img src="C:\Users\91982\Downloads\your-name\Amazon_logo.svg" width="400" height="100" alt="Amazon Logo">
  </div>
 
  <header>
    <h1>Amazon</h1>
  </header>
  <hr>
 
  <form>
    <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Enter your name:</label>
      <input type="text" id="name" name="name" required>
 
      <label for="password">Enter your password:</label>
      <input type="password" id="password" name="password" required>
 
      <label for="email">Enter your email ID:</label>
      <input type="email" id="email" name="email" required>
 
      <label for="phone">Enter your phone number:</label>
      <input type="tel" id="phone" name="phone">
    </fieldset>
 
    <fieldset>
      <legend>Message</legend>
      <label for="message">Your Message:</label>
      <textarea id="message" name="message" rows="4" cols="50" required></textarea>
    </fieldset>
 
    <fieldset>
      <legend>Select an Option</legend>
      <label for="options">Choose an option:</label>
      <select id="options" name="options">
        <optgroup label="Group 1">
          <option value="option1">Baby Products</option>
          <option value="option2">Bags, Wallets, and Luggage</option>
          <option value="option3">Home Accessories</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="option4">Beauty and Personal Care</option>
          <option value="option5">Electronics</option>
        </optgroup>
      </select>
    </fieldset>
 
    <input type="submit" value="Submit">
  </form>
 
  <h3>About Us</h3>
  <p>Amazon is guided by four principles: customer obsession rather than competitor focus, passion for invention, commitment to operational excellence, and long-term thinking. Amazon strives to be Earth’s most customer-centric company, Earth’s best employer, and Earth’s safest place to work. Customer reviews, 1-Click shopping, personalized recommendations, Prime, Fulfillment by Amazon, AWS, Kindle Direct Publishing, Kindle, Career Choice, Fire tablets, Fire TV, Amazon Echo, Alexa, Just Walk Out technology, Amazon Studios, and The Climate Pledge are some of the things pioneered by Amazon.</p>
 
</body>
</html>

Practical 4 : To create a resume using table tag.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resume</title>
  <style>
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }
    table {
      width: 60%;
      margin: auto;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: lightgrey;
      color: blue;
    }
    td {
      font-size: 20px;
    }
    .header-title {
      font-size: 32px;
    }
    .profile-img {
      width: 100px;
      height: 100px;
    }
    .nested-table {
      width: 100%;
      border: 1px solid #000;
    }
    .nested-table th, .nested-table td {
      text-align: center;
      padding: 8px;
    }
    .achievements {
      list-style-type: none;
      padding: 0;
    }
    .achievements li {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
 
<table>
  <tr>
    <th class="header-title">Resume</th>
    <th><img src="https://cdn.vectorstock.com/i/500p/46/78/person-gray-photo-placeholder-girl-material-design-vector-23804678.jpg" class="profile-img" alt="Profile Picture"></th>
  </tr>
  
  <tr>
    <td><b>Personal Info:</b></td>
    <td><b>Email ID:</b> your-name@gmail.com</td>
  </tr>
  
  <tr>
    <td><b>Name:</b></td>
    <td>your-name</td>
  </tr>
  
  <tr>
    <td><b>Enrollment No:</b></td>
    <td>IU2241050047</td>
  </tr>
  
  <tr>
    <td><b>Educational Qualifications:</b></td>
    <td>
      <table class="nested-table" border="1">
        <tr>
          <th>Degree</th>
          <th>Passing Year</th>
        </tr>
        <tr>
          <td>10th</td>
          <td>2020</td>
        </tr>
        <tr>
          <td>12th</td>
          <td>2022</td>
        </tr>
        <tr>
          <td>B-TECH</td>
          <td>2022 - Present</td>
        </tr>
      </table>
    </td>
  </tr>
  
  <tr>
    <td><b>Extra Achievements:</b></td>
    <td>
      <ul class="achievements">
        <li>Upskilling Internship</li>
        <li>AI Internship</li>
        <li>Python Certification Course</li>
      </ul>
    </td>
  </tr>
 
</table>
 
</body>
</html>

Practical 5 : To create a design using div and external CSS.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Div inside Div</title>
  <style>
    body {
      margin: 0;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
 
    #div1 {
      width: 700px;
      height: 700px;
      border: 4.5px double black;
      background-color: #FF09A0;
      position: relative;
    }
 
    #div2 {
      width: 600px;
      height: 600px;
      border: 3.5px solid black;
      background-color: #FF3F83;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 
    #div3 {
      width: 500px;
      height: 500px;
      border: 2.5px dashed black;
      background-color: #ff6d6a;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 
    #div4 {
      width: 400px;
      height: 400px;
      border: 1.5px dotted black;
      background-color: #ff965b;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 
    #div5 {
      width: 300px;
      height: 300px;
      border: 1px groove black;
      background-color: #ffbd5a;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 
    #div6 {
      width: 200px;
      height: 200px;
      border: 0.5px ridge black;
      background-color: #ffdf6a;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 
    #div7 {
      width: 100px;
      height: 100px;
      border: 0.25px dashed black;
      background-color: #ffff8b;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 
    #div8 {
      width: 50px;
      height: 50px;
      border: 0.1px outset black;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 
    #div8 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
 
  <div id="div1">
    <div id="div2">
      <div id="div3">
        <div id="div4">
          <div id="div5">
            <div id="div6">
              <div id="div7">
                <div id="div8">
                  <img src="C:/Users/91982/Downloads/your-name/image_lab5" alt="Inner Image">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
</body>
</html>

Practical 6 : To create a day night animation using CSS and HTML.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <style>
    body {
      background-color: lightblue;
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      animation: bodyChange 9s linear forwards;
    }
 
    .sun, .moon {
      width: 100px;
      height: 100px;
      position: absolute;
    }
 
    .sun {
      top: 100%;
      animation: sunRise 5s linear forwards;
    }
 
    .moon {
      top: -100%;
      animation: moonRise 5s linear forwards;
      animation-delay: 3.5s;
    }
 
    /* SVG Colors */
    .sun svg circle {
      fill: var(--sun-color, #eeaf61);
    }
    .moon svg circle {
      fill: var(--moon-color, white);
    }
 
    /* Sun and Moon Animations */
    @keyframes sunRise {
      0% { top: 0px; --sun-color: #eeaf61; }
      50% { top: 300px; --sun-color: #fb9062; }
      100% { top: 700px; --sun-color: #ee5d6c; }
    }
 
    @keyframes moonRise {
      0% { top: 800px; --moon-color: white; }
      100% { top: -200px; --moon-color: lightgray; }
    }
 
    /* Background Transition */
    @keyframes bodyChange {
      0% { background-color: #87ceeb; }
      100% { background-color: black; }
    }
 
    /* Building Background */
    #building {
      position: absolute;
      bottom: 10px;
      height: 250px;
      width: 100%;
      background-image: url('https://img.freepik.com/free-vector/city-skyscraper-buildings-white-background_1308-109892.jpg');
      background-size: cover;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
 
  <div class="sun">
    <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
      <circle r="45" cx="50" cy="50" />
    </svg>
  </div>
 
  <div class="moon">
    <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
      <circle r="45" cx="50" cy="50" />
    </svg>
  </div>
 
  <div id="building"></div>
 
</body>
</html>

OR


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Day Night Animation</title>
    <style>
        /* Body style and background transition */
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            background-color: #87CEEB; /* Daytime color */
            overflow: hidden;
            animation: backgroundChange 6s infinite alternate;
        }
 
        /* Sun/Moon style */
        .sun-moon {
            position: absolute;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: #FFD700; /* Sun color */
            animation: moveAcross 6s infinite alternate;
        }
 
        /* Background color change for day and night */
        @keyframes backgroundChange {
            0% { background-color: #87CEEB; } /* Day */
            100% { background-color: #2C3E50; } /* Night */
        }
 
        /* Move the sun across the screen and change to moon */
        @keyframes moveAcross {
            0% { left: 100%; background-color: #FFD700; } /* Sun on right */
            100% { left: 0%; background-color: #FFF; } /* Moon on left */
        }
    </style>
</head>
<body>
    <div class="sun-moon"></div>
</body>
</html>

Practical 7 : To create a registration form with JavaScript.

HTML


<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <link rel="stylesheet" href="C:/Users/91982/Downloads/your-name/styles.css">
</head>
 
<body>
    <div class="container">
        <h2>Registration Form</h2>
        <form id="registration-form">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            
            <label for="confirm-password">Confirm Password:</label>
            <input type="password" id="confirm-password" name="confirm-password" required>
            
            <button type="submit">Register</button>
        </form>
    </div>
 
    <div id="popup-box" class="popup-box" style="display: none;">
        <span id="close-popup" class="close-popup">&times;</span>
        <p id="popup-message"></p>
    </div>
 
    <script src="C:/Users/91982/Downloads/your-name/script.js"></script>
</body>
</html>

CSS


/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}
 
.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}
 
h2 {
    text-align: center;
    margin-bottom: 20px;
}
 
form {
    display: flex;
    flex-direction: column;
}
 
label {
    margin-bottom: 5px;
}
 
input {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 4px;
}
 
button {
    padding: 10px;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
 
button:hover {
    background-color: #218838;
}
 
.popup-box {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
.close-popup {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
    color: red;
}

JavaScript


// script.js
document.getElementById("registration-form").addEventListener("submit", function(event) {
    event.preventDefault();
 
    const username = document.getElementById("username").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirm-password").value;
 
    // Validate email
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailRegex.test(email)) {
        alert("Invalid email address");
        return;
    }
 
    // Validate email extension
    const validExtensions = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com", "aol.com"];
    const emailExtension = email.split("@")[1].toLowerCase();
    if (!validExtensions.includes(emailExtension)) {
        alert("Invalid email extension. Only " + validExtensions.join(", ") + " are allowed.");
        return;
    }
 
    // Validate password match
    if (password !== confirmPassword) {
        alert("Passwords do not match");
        return;
    }
 
    // Check password strength
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
    if (!passwordRegex.test(password)) {
        alert("Password must be at least 8 characters long, contain at least one uppercase letter, one lowercase letter, and one digit");
        return;
    }
 
    // Display registration details in popup
    const registrationDetails = `Username: ${username}\nEmail: ${email}\nPassword: ${password}`;
    const popupBox = document.getElementById("popup-box");
    const popupMessage = document.getElementById("popup-message");
    popupMessage.textContent = registrationDetails;
    popupBox.style.display = "block";
});
 
// Close popup box on click
document.getElementById("close-popup").addEventListener("click", function() {
    document.getElementById("popup-box").style.display = "none";
});

Practical 8.1 : Develop AngularJS program that allows user to input their first name and last name and display their full name.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS Full Name</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
 
<body>
 
    <p>AngularJS to display full name</p>
 
    <div ng-app="myApp" ng-controller="myCtrl">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" ng-model="firstName"><br><br>
 
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" ng-model="lastName"><br><br>
 
        <strong>Full Name:</strong> {{firstName + " " + lastName}}
    </div>
 
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstName = "your";
            $scope.lastName = "name";
        });
    </script>
 
</body>
</html>

Practical 8.2 : Develop AngularJS application that displays a list of shopping item. Allow user to add and remove items from the list using directives and controllers


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Items Application</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.shoppingItems = ['Apple', 'Mango', 'Banana', 'Grapes'];
      $scope.newItem = '';
      $scope.selectItem = '';
 
      $scope.addItem = function() {
        if ($scope.newItem && $scope.shoppingItems.indexOf($scope.newItem) === -1) {
          $scope.shoppingItems.push($scope.newItem);
          $scope.newItem = '';
        } else {
          alert($scope.newItem ? "This item is already in the shopping list" : "Please enter an item to add");
        }
      };
 
      $scope.removeItem = function() {
        if ($scope.selectItem) {
          const index = $scope.shoppingItems.indexOf($scope.selectItem);
          if (index > -1) $scope.shoppingItems.splice(index, 1);
          $scope.selectItem = '';
        } else {
          alert("Please select an item to remove");
        }
      };
    });
  </script>
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <h2>Shopping Application</h2>
    
    <h4>Shopping List</h4>
    <ul>
      <li ng-repeat="item in shoppingItems">{{ item }}</li>
    </ul>
 
    <div>
      <label for="addItemInput">Enter an item to add:</label>
      <input type="text" id="addItemInput" ng-model="newItem" placeholder="New item">
      <button ng-click="addItem()">Add Item</button>
    </div>
 
    <div>
      <label for="removeItemSelect">Select an item to remove:</label>
      <select id="removeItemSelect" ng-model="selectItem" ng-options="item for item in shoppingItems"></select>
      <button ng-click="removeItem()">Remove Item</button>
    </div>
  </div>
</body>
</html>

Practical 9.1 : Write a PHP program to make the sum of first 100 odd numbers.


<?php
$sum = 0;
$count = 0;
$num = 1;
 
while ($count < 100) {
    if ($num % 2 != 0) {
        $sum += $num;
        $count++;
    }
    $num++;
}
 
echo "The sum of the first 100 odd numbers is: $sum";
?>

Practical 9.2 : Aim: Write a PHP program that receives the value of N using HTML form and displays the first N Fibonacci numbers as HTML list.

HTML


<html>
<head>
    <title>9.2</title>
</head>
<body>
    <form action="fibonacci.php" method="post">
        <label for="n">Enter the value of N:</label>
        <input type="number" id="n" name="n" required>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

PHP


<?php
if (isset($_POST['n'])) {
    $n = $_POST['n'];
    $fibonacciNumbers = array(0, 1);
    $i = 2;
 
    while (count($fibonacciNumbers) < $n) {
        $fibonacciNumbers[] = $fibonacciNumbers[$i - 1] + $fibonacciNumbers[$i - 2];
        $i++;
    }
 
    echo "<h2>The first $n Fibonacci numbers are:</h2>";
    echo "<ul>";
    foreach ($fibonacciNumbers as $number) {
        echo "<li>$number</li>";
    }
    echo "</ul>";
} else {
    echo "Please enter a value for N.";
}
?>

Practical 9.3 : Create HTML form to enter one number. Write PHP code to display the message about number is odd or even.

HTML


<html>
<head>
    <title>9.3</title>
</head>
<body>
    <form action="process.php" method="post">
        <label for="number">Enter a number:</label>
        <input type="number" id="number" name="number"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

PHP


<?php
$number = $_POST['number'];
 
if ($number % 2 == 0) {
    echo "<p>The number $number is even.</p>";
} else {
    echo "<p>The number $number is odd.</p>";
}
?>

Practical 9.4 : Write PHP code to create database state, create table city(cityname, area,population) and insert data from table.


<?php
// Database configuration
$servername = "localhost"; // Change if your MySQL server is on a different host
$username = "root"; // Your MySQL username
$password = ""; // Your MySQL password
$dbname = "state"; // Database name
 
// Create connection
$conn = new mysqli($servername, $username, $password);
 
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
// Create database
$sql = "CREATE DATABASE IF NOT EXISTS $dbname";
if ($conn->query($sql) === TRUE) {
    echo "Database created successfully\n";
} else {
    echo "Error creating database: " . $conn->error . "\n";
}
 
// Select the database
$conn->select_db($dbname);
 
// Create table
$sql = "CREATE TABLE IF NOT EXISTS city (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    cityname VARCHAR(100) NOT NULL,
    area FLOAT NOT NULL,
    population INT NOT NULL
)";
if ($conn->query($sql) === TRUE) {
    echo "Table city created successfully\n";
} else {
    echo "Error creating table: " . $conn->error . "\n";
}
 
// Insert data into the table
$sql = "INSERT INTO city (cityname, area, population) VALUES
    ('New York', 468.9, 8419600),
    ('Los Angeles', 503, 3980400),
    ('Chicago', 227.3, 2716000),
    ('Houston', 637.4, 2328000),
    ('Phoenix', 517.6, 1663000)";
if ($conn->query($sql) === TRUE) {
    echo "Data inserted successfully\n";
} else {
    echo "Error inserting data: " . $conn->error . "\n";
}
 
// Close connection
$conn->close();
?>

Practical 10.1 : Write a PHP program to store user registration (user-name, address, Date of Birth,age, pan card, gender) with mysql database.


<?php
$host = "localhost";
$username = "root";
$password = "";
$dbname = "your_database_name"; // Don't forget to set your database name
 
$conn = new mysqli($host, $username, $password, $dbname);
 
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $user_name = $conn->real_escape_string($_POST['user_name']);
    $address = $conn->real_escape_string($_POST['address']);
    $date_of_birth = $conn->real_escape_string($_POST['date_of_birth']);
    $age = (int)$_POST['age'];
    $pan_card = $conn->real_escape_string($_POST['pan_card']);
    $gender = $conn->real_escape_string($_POST['gender']);
 
    $sql = "INSERT INTO users (user_name, address, date_of_birth, age, pan_card, gender)
            VALUES ('$user_name', '$address', '$date_of_birth', $age, '$pan_card', '$gender')";
 
    if ($conn->query($sql) === TRUE) {
        echo "User registered successfully!";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}
 
$conn->close();
?>
<!DOCTYPE html>
<html>
<head>
    <title>User Registration</title>
</head>
<body>
    <h2>User Registration Form</h2>
    <form method="POST" action="prc10a.php">
        <label for="user_name">User Name:</label>
        <input type="text" name="user_name" required><br><br>
        
        <label for="address">Address:</label>
        <input type="text" name="address"><br><br>
        
        <label for="date_of_birth">Date of Birth:</label>
        <input type="date" name="date_of_birth"><br><br>
        
        <label for="age">Age:</label>
        <input type="number" name="age" required><br><br>
        
        <label for="pan_card">PAN Card:</label>
        <input type="text" name="pan_card" required><br><br>
        
        <label for="gender">Gender:</label>
        <input type="radio" name="gender" value="M"> Male
        <input type="radio" name="gender" value="F"> Female<br><br>
        
        <input type="submit" value="Register">
    </form>
</body>
</html>

Practical 10.2 : Write PHP code to read from a file and display it in browser.


<?php
$filename = 'demo.txt'; // Added semicolon
 
if (file_exists($filename)) {
    $file = fopen($filename, 'r');
 
    $file_content = fread($file, filesize($filename));
 
    fclose($file);
    echo "<pre>$file_content</pre>"; // Corrected variable name
} else {
    echo "The file does not exist.";
}
?>

Practical 10.3 : Write HTML and PHP program to read and store student information such as enrollment no, name, semester and percentage from database table and Output the data to a webpage in tabular format.


<?php
$host = "localhost";
$dbname = "test";
$username = "root";
$password = "";
 
$conn = new mysqli($host, $username, $password, $dbname);
 
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $enrollment_no = $conn->real_escape_string($_POST['enrollment_no']);
    $name = $conn->real_escape_string($_POST['name']);
    $semester = (int)$_POST['semester'];
    $percentage = (float)$_POST['percentage'];
 
    $sql_insert = "INSERT INTO students (enrollment_no, name, semester, percentage)
                   VALUES ('$enrollment_no', '$name', $semester, $percentage)";
 
    if ($conn->query($sql_insert) === TRUE) {
        echo "New student registered successfully!";
    } else {
        echo "Error: " . $sql_insert . "<br>" . $conn->error;
    }
}
 
$sql = "SELECT enrollment_no, name, semester, percentage FROM students";
$result = $conn->query($sql);
?>
 
<!DOCTYPE html>
<html>
<head>
    <title>Student Registration and Information</title>
</head>
<body>
    <h2>Student Registration Form</h2>
    <form method="POST" action="prc10c.php">
        <label for="enrollment_no">Enrollment No:</label><br>
        <input type="text" id="enrollment_no" name="enrollment_no" required><br>
 
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br>
 
        <label for="semester">Semester:</label><br>
        <input type="number" id="semester" name="semester" required><br>
 
        <label for="percentage">Percentage:</label><br>
        <input type="number" id="percentage" name="percentage" step="0.01" required><br><br>
 
        <input type="submit" value="Register Student">
    </form>
 
    <h2>Student Information Table</h2>
    <table border="1">
        <thead>
            <tr>
                <th>Enrollment No</th>
                <th>Name</th>
                <th>Semester</th>
                <th>Percentage</th>
            </tr>
        </thead>
        <tbody>
        <?php
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo "<tr>";
                echo "<td>" . $row['enrollment_no'] . "</td>";
                echo "<td>" . $row['name'] . "</td>";
                echo "<td>" . $row['semester'] . "</td>";
                echo "<td>" . $row['percentage'] . "%</td>";
                echo "</tr>";
            }
        } else {
            echo "<tr><td colspan='4'>No records found</td></tr>";
        }
        ?>
        </tbody>
    </table>
</body>
</html>
 
<?php
$conn->close();
?>