Panafrikan PHP

An educational initiative by EColSi

Discover EColSi
Choose your language
Explore the course

B01 | PHP from zero: create your first dynamic page

Basic level · Lesson B01 · 60–90 minutes

PHP from scratch: create your first dynamic page

Learn how PHP generates HTML on the server and builds a page that changes when its data is modified.

PHP lesson cover from scratch

Result: create a page whose content changes when modifying data in PHP, without rewriting its HTML structure.

The problem: a page that can change

A page written solely with HTML displays fixed content. If we want to personalize a greeting, present different information, or respond to received data, we need to generate part of the HTML on the server. PHP allows you to do that work before sending the page to the browser.

In this first post we will build a simple page with a name and course title stored as data. By changing them, the visible content will be updated without modifying the structure of the page.

This entry starts the route

Before starting, review the basic-level introduction. You only need to recognize basic HTML tags. In the next lesson we will explore variables and data types.

Essential concepts

PHP runs on the server

The browser requests a file .php. The server interprets the PHP instructions, typically generates an HTML response, and sends it. The browser displays the result; You should not receive the original PHP code.

Flow of a PHP request from the browser to the resulting HTML
The browser receives the generated result, not the PHP instructions.

PHP blocks

The instructions are written between <?php and ?>. Here we will combine PHP and HTML to distinguish the function of each language.

echo

echo send text to the response. Each statement ends with a semicolon.

<?php echo "Hola desde PHP"; ?>

Variables

A variable preserves data for reuse. In PHP it starts with $.

<?php
$studentName = "Amina";
?>

Decision: separate data and presentation

We will define the data at the beginning and display it within the HTML. The data will be able to change without forcing us to duplicate the visual structure.

Guided exercise

1. Prepare the environment

You need an editor, a browser and a local server with PHP. Save the file to the configured public folder and open it using a local server address.

2. Create index.php

<?php
$studentName = "Amina";
$course = "Panafrikan PHP";
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi primera página PHP</title>
</head>
<body>
  <h1>Hola, <?php echo $studentName; ?>.</h1>
  <p>Bienvenida al curso <?php echo $course; ?>.</p>
  <p>Esta página fue generada por PHP.</p>
</body>
</html>

3. Run and watch

Open the corresponding local URL. You should see the greeting and the course, but not the PHP tags.

4. Change the data

Replaces Amina by another name and refresh the browser. Then it changes $course. The HTML structure remains the same while the content changes.

Check the result

  • The file is called index.php.
  • You open it through the local server.
  • The browser does not display raw PHP code.
  • The name and course appear.
  • Changing a variable and updating changes the result.

Check what you have learned

  1. Where does PHP run?
  2. What does the browser normally receive?
  3. How do you recognize a variable in PHP?
  4. What advantage did we get by saving the name in a variable?

Challenge 01: dynamic student profile

Create a page with dummy data that includes:

  • Four variables: name, country, objective and available hours per week.
  • A title and at least three paragraphs or a list.
  • An HTML structure that does not change when trying another profile.
  • Two tests with different data sets.
  • HTML readable and correctly closed.

Do not include telephone numbers, documents, addresses, passwords or other sensitive data.

What should you deliver?

  1. The file index.php.
  2. A screenshot of the page working.
  3. An explanation of three to five sentences.
  4. The two changes tested and what was observed.
  5. A specific question for the Virtual Tutor.
Called to complete and send challenge 01 to the Virtual Tutor

Build your dynamic profile, test it with two data sets and submit your solution to the Panafrikan PHP Virtual Tutor.

Provisional channel: Share in the comments a summary of your solution, the two tests performed and your question. Keep the file index.php to send it when we enable the Virtual Tutor.

SHARE MY RESULT

Continue learning

Next post: B02 — Variables and data types. The link will be activated when the lesson is published.

Comments

Popular posts from this blog

Bem-vindo ao Panafrikan PHP: aprenda, construa e compartilhe

Bienvenue sur Panafrikan PHP : apprenez, créez et partagez