The Concept of User Input in Web Development
Think about the actions you perform on the internet every single day:
- When you type your username and password, the server checks those credentials and grants you access. If they are wrong, it returns an error message.
- When you search for a product on Amazon, the website reads your search query and returns only the relevant database results.
- When you try to transfer money, the banking system checks if your input amount is lower than your current balance before approving the transaction.
All of these scenarios rely on a fundamental concept: Client-Server Communication. The Client (your web browser) collects data from the user and sends it to the Server. The Server (running PHP) catches this data, processes it according to your business logic, and sends back a response.
Today, we are going to learn how to build that bridge.
Step 1: Creating the HTML Form
Everything starts on the frontend. To send data to PHP, we need an HTML <form>. The form tag has two crucial attributes you must memorize:
- action: Tells the browser where to send the data (e.g., "process.php").
- method: Tells the browser how to send the data (usually "GET" or "POST").
<!-- The HTML Form -->
<form action="home.php" method="GET">
<label for="username">Enter your name:</label>
<!-- The 'name' attribute is EXTREMELY important. PHP uses it as the key. -->
<input type="text" id="username" name="user_name" required>
<input type="submit" value="Send Data">
</form>
Step 2: Capturing Data with PHP Superglobals
Once the user clicks "Send Data", PHP wakes up. To grab the information, PHP uses built-in variables called Superglobals. These are special Arrays that are always available in all scopes throughout your script.
Because our form used method="GET", PHP will automatically store the typed data inside the $_GET superglobal array. To retrieve it, we use the name attribute we defined in the HTML input (which was user_name).
<?php
// This is how PHP captures the data
$captured_name = $_GET["user_name"];
echo "Welcome to the system, " . $captured_name;
?>
The Complete Working Example
Let's put both the HTML and the PHP in the same file (let's call it home.php). We will also add a critical safety check using the isset() function. This prevents PHP from throwing an error when you visit the page for the first time (before the form is submitted).
<!DOCTYPE html>
<html>
<head>
<title>PHP Form Tutorial</title>
</head>
<body>
<h2>Test out PHP Input!</h2>
<form action="home.php" method="GET">
<label>Type something:</label>
<input type="text" name="my_input">
<input type="submit" value="Send to PHP">
</form>
<hr>
<?php
// Check if the form was actually submitted
if (isset($_GET["my_input"])) {
// It's good practice to sanitize data (prevent XSS hacks)
$safe_data = htmlspecialchars($_GET["my_input"]);
echo "<h3>PHP Received: " . $safe_data . "</h3>";
}
?>
</body>
</html>
Understanding GET vs. POST
You might be wondering: what happens if I change the form method to POST? How does PHP handle it?
- The GET Method: When you use GET, the browser appends the form data directly into the URL (e.g.,
home.php?my_input=Hello). This is fantastic for search bars or filtering products because users can bookmark or share the URL. However, never use GET for passwords, as everyone can see the data in the address bar. - The POST Method: When you use POST, the data is sent invisibly within the HTTP request body. The URL remains clean (e.g.,
home.php). This is mandatory for login forms, credit card checkouts, and sending large amounts of text. To capture it, you simply change your PHP code to use$_POST["my_input"].
🚧 Common Error: "Undefined array key"
If you get a warning saying "Warning: Undefined array key 'my_input'", it means PHP tried to read the data before the user clicked the submit button, OR you made a typo in the HTML name attribute. Always wrap your capturing logic inside an if (isset($_GET['...'])) block to ensure the data actually exists!
Were you able to make PHP repeat your text? Try adding a second input field (like "Age") and printing both values! Drop your code in the comments below.
Next Step: Making Decisions
Now that you can capture user input, we need to teach our application how to make choices based on that data. In the next tutorial, we will dive into PHP IF/ELSE Statements (Conditional Logic) to build our very first login verification system.
Go to the Next Lesson in the Syllabus →
Nenhum comentário:
Postar um comentário