Skip to content

Lesson 1: Embedding PHP in HTML

Objective:

The primary objective of this lesson is to teach learners how to embed PHP code within HTML to create dynamic web pages. By the end of this lesson, participants should be able to:

  • Understand the integration of PHP with HTML.
  • Use PHP to create dynamic content within HTML pages.
  • Apply PHP to make web pages responsive and interactive.

Description:

1.1 Introduction to Embedding PHP in HTML

1.1.1 Overview

Understand the purpose of embedding PHP code in HTML and how it enhances the functionality of web pages.

1.1.2 Benefits of Dynamic Web Pages

Explore the advantages of creating dynamic web pages using PHP within HTML.

1.2 Basic Embedding of PHP in HTML

1.2.1 Simple Variable Display

Learn how to embed PHP variables within HTML to display dynamic content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Page</title>
</head>
<body>

    <h1>Welcome, <?php echo "John"; ?>!</h1>

</body>
</html>

1.2.2 Conditionals and Loops

Integrate PHP conditionals and loops directly into HTML for dynamic content generation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Page</title>
</head>
<body>

    <?php
        $userRole = "admin";

        if ($userRole === "admin") {
            echo "<h2>Welcome, Administrator!</h2>";
        } else {
            echo "<h2>Welcome, Guest!</h2>";
        }

        for ($i = 1; $i <= 5; $i++) {
            echo "<p>Paragraph $i</p>";
        }
    ?>

</body>
</html>

1.3 Creating Dynamic Forms

1.3.1 Form Handling with PHP

Integrate PHP code with HTML forms to process user input and create dynamic form submissions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form</title>
</head>
<body>

    <?php
        if ($_SERVER["REQUEST_METHOD"] === "POST") {
            $username = $_POST["username"];
            echo "<p>Thank you, $username, for submitting the form!</p>";
        }
    ?>

    <form method="POST" action="">
        <label for="username">Enter your name:</label>
        <input type="text" name="username" required>
        <input type="submit" value="Submit">
    </form>

</body>
</html>

1.4 Practice Exercise

Apply your knowledge by creating a PHP script that embeds PHP within HTML to create a dynamic webpage. Use variables, conditionals, loops, and form handling to make the page interactive.

Let’s extend the practice exercise by creating a dynamic webpage that displays a personalized greeting and allows users to input their age. Based on their age, we’ll dynamically adjust the message.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Greeting Page</title>
</head>
<body>

    <?php
        // Your PHP code here

        // Example: Dynamic greeting based on age
        $userAge = 25;

        if ($userAge < 18) {
            $greeting = "Hello, Young One!";
        } else {
            $greeting = "Welcome, Wise Visitor!";
        }
    ?>

    <h1><?php echo $greeting; ?></h1>

    <!-- Form for users to input their age -->
    <form method="POST" action="">
        <label for="age">Enter your age:</label>
        <input type="number" name="age" required>
        <input type="submit" value="Submit">
    </form>

    <?php
        // Additional PHP code for handling form submission
        if ($_SERVER["REQUEST_METHOD"] === "POST") {
            $userAge = $_POST["age"];

            // Modify the greeting based on the submitted age
            if ($userAge < 18) {
                $greeting = "Hello, Young One!";
            } else {
                $greeting = "Welcome, Wise Visitor!";
            }

            // Display the modified greeting
            echo "<h2>$greeting</h2>";
        }
    ?>

</body>
</html>

In this extended exercise:

  • We use PHP to dynamically generate a greeting based on the user’s age.
  • The webpage initially displays a greeting, and a form allows users to submit their age.
  • Upon form submission, the greeting is updated based on the submitted age.

Let’s explore the creation of dynamic web pages using a combination of PHP and HTML. In this example, we’ll build a simple webpage that dynamically displays information based on the current time of day.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Time Greeting</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>

    <?php
        // Your PHP code here

        // Example: Dynamic greeting based on the current time
        $currentTime = date("H");

        if ($currentTime < 12) {
            $greeting = "Good morning!";
        } elseif ($currentTime < 18) {
            $greeting = "Good afternoon!";
        } else {
            $greeting = "Good evening!";
        }
    ?>

    <h1><?php echo $greeting; ?></h1>

    <p>Welcome to our dynamic webpage. This page adjusts its greeting based on the time of day.</p>

</body>
</html>

In this example:

  • PHP is used to dynamically generate a greeting based on the current time.
  • The date("H") function retrieves the current hour in a 24-hour format.
  • The webpage then displays a greeting message accordingly.

Copy and paste this code into a PHP file, run it, and observe how the greeting changes based on the time of day. This is a simple illustration, but you can expand and customize dynamic content based on various factors, such as user input, external data, or real-time events.