CTU-SAN FRANCISCO CAMPUS

San Francisco, Cebu

CompTech 224 – Programming
Online Activity No.6
SIMPLE WEB ESSENTIAL FORMS ACTIVITY
Directions: Before we begin scripting, it is important to understand what XAMPP is and why it plays a crucial role
in creating this activity.

Overview
XAMPP is a tool that lets you turn your own computer into a mini web server. Instead of uploading your website to
the internet right away, you can build and test it locally first.
It comes with everything you need in one package:
• A server (Apache) to display your web pages
• A database (MariaDB) to store data
• A scripting language (PHP) to handle form actions

Why it’s important for web application forms?

When you create a web form (like a login or registration form), it’s not just about the design. You also need
something that can:
• Receive the data the user enters
• Process it (check if it’s correct or valid)
• Save it in a database

This is where XAMPP helps.

Think of it like a practice environment. Instead of needing a real website or internet connection, you can:
• Run your project on your own computer
• Test if your form is working correctly
• Fix errors easily without affecting a live site

In simple terms, XAMPP is important because it gives you a complete setup to build, test, and understand how
web forms actually work behind the scenes.

XAMPP Installation Guide

1. Download and Install
• Download: Visit the official: [Link] and download the installer for
your operating system (Windows, Linux, or macOS).

• Run the Installer: Open the .exe or .dmg file. You may see a warning about User Account Control (UAC) on
Windows; just click OK to proceed.
• Select Components: You will see a list of components (MySQL, FileZilla, Mercury, etc.). For a standard
PHP class, ensure Apache, MySQL, PHP, and phpMyAdmin are checked.
• Choose Folder: Select a directory (usually C:\xampp). Avoid installing it in Program Files to prevent
permission issues.
• Finish: Click through the remaining prompts and click Finish to launch the Control Panel.
2. Starting the Services
To run PHP files, you need to turn on the server and,
eventually, the database.
1. Open the XAMPP Control Panel.
2. Click the Start button next to Apache. The label
should turn green and show a Port number (usually 80
or 443).
3. Click the Start button next to MySQL if you plan on
using databases later.

3. Creating Your First PHP File

XAMPP looks for files in a specific folder called htdocs.
1. Navigate to your installation folder (e.g., C:\xampp\htdocs).
2. Create a new folder for your class (e.g., php_class).
3. Inside that folder, create a new text file named [Link].
4. Open [Link] in a text editor (like VS Code or Notepad++) and paste this code:
<?php
echo "<h1>Localhost is working!</h1>";
phpinfo();
?>

4. Testing in the Browser

Once your services are running and your file is saved, open your web browser and type:
[Link]
If everything is set up correctly, you will see a page displaying your message and the detailed PHP configuration
information.

ACTIVITY CREATION GUIDE

PART 1: Creating the Database (XAMPP – phpMyAdmin)
Step 1: Start XAMPP
1. Open XAMPP Control Panel
2. Start:
o Apache
o MySQL
Step 2: Open phpMyAdmin
1. Open browser
2. Go to: [Link]
Step 3: Create a Database
1. Click New
2. Database name:
3. Click Create

Create Tables (with Relationship)

We will create 2 tables:
• users (main table)
• contacts (child table with foreign key)

Table 1: users
Steps:
1. Click webapp_db
2. Click Create Table
3. Table name: users
4. Number of columns: 4
Columns:
Name Type Extra

id INT AUTO_INCREMENT
username VARCHAR(50)

password VARCHAR(255)

email VARCHAR(100)

Set id as PRIMARY KEY

Table 2: contacts
Steps:
1. Click Create Table
2. Table name: contacts
3. Columns: 5

Columns:
Name Type Extra

id INT AUTO_INCREMENT

user_id INT

name VARCHAR(100)
message TEXT

created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

Set:
• id as PRIMARY KEY
• user_id as FOREIGN KEY
Add Foreign Key Relationship

1. Go to Structure → Relation View

2. Set:
o Column: user_id
o References: users(id)
SCRIPTING
• Go to C: xampp
• Create a folder name webapp
• Inside the folder copy this script.

[Link]
[Link]
[Link]

session_start();
• Starts a session, which allows the website to remember the user after logging in.
• Example: Once logged in, the system remembers who you are without logging in again.
$conn = new mysqli("localhost", "root", "", "webapp_db");
• Connects PHP to a MySQL database.
• "localhost" → server
• "root" → username
• "" → password (empty)
• "webapp_db" → database name
if ($_SERVER["REQUEST_METHOD"] == "POST") {
• Checks if the login form was submitted.
• POST means data came from a form (like username/password input).
$username = $_POST['username'];
$password = $_POST['password'];
• Gets the values entered by the user in the form.
• $_POST is used to collect form data.
$sql = "SELECT * FROM users WHERE username='$username'";
$result = $conn->query($sql);
• Searches the database for a user with the given username.
• If found, it returns the user’s data.
if ($result->num_rows > 0) {
• Checks if at least one record was found.
• If true → user exists
• If false → user not found
$row = $result->fetch_assoc();
• Gets the user data as an associative array.
• Example:
$row['username']
$row['password']
if (password_verify($password, $row['password'])) {
• Compares the entered password with the hashed password stored in the database.
• Important: Passwords are not stored as plain text.
$_SESSION['user_id'] = $row['id'];
$_SESSION['username'] = $row['username'];
• Saves user information in the session.
• This allows access to user data on other pages (like dashboard).
header("Location: [Link]");
exit();
• Redirects the user to another page after login.
• exit() stops the script immediately.
echo "Invalid password";
• Shown if password is incorrect.
echo "User not found";
• Shown if username does not exist.

[Link]
$conn = new mysqli("localhost", "root", "", "webapp_db");
• Connects PHP to the MySQL database.
• $conn is the connection object used to run queries.
• If this fails, no data can be retrieved.

$sql = "SELECT contacts.*, [Link]

FROM contacts
JOIN users ON contacts.user_id = [Link]";

What this does:

• Gets all data from the contacts table
• Also gets the username from the users table

Important concept: JOIN

• Combines two tables:
o contacts
o users
• Matching condition:
contacts.user_id = [Link]

Meaning:
• Each contact is linked to a user
• Instead of showing just user_id, we show the actual username
$result = $conn->query($sql);
• Runs the SQL query.
• $result now contains all matching records.
while($row = $result->fetch_assoc()){
What happens here:
• Loops through each row from the database.
• $row is an associative array.
• The loop runs once per record.
<?php echo $row['id']; ?>
• Prints the value from the database.
<a href="[Link]?id=<?php echo $row['id']; ?>">Edit</a>
<a href="[Link]?id=<?php echo $row['id']; ?>">Delete</a>

What this does:

• Sends the ID of the record to another page.
• This allows:
o [Link] → to edit that specific record
o [Link] → to delete that specific record
[Link]

$conn = new mysqli("localhost", "root", "", "webapp_db");

• Connects PHP to the MySQL database.
• $conn is used to execute queries.
• Without this, the system cannot save user data.
if($_SERVER["REQUEST_METHOD"] == "POST"){
• Checks if the form was submitted.
• Runs only when the user clicks the Register button.
• Prevents the code from running when the page is just opened.
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
• Gets the data entered in the form.
• Uses $_POST to collect input values.
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
• Converts the password into a hashed (encrypted) version.
• This is important for security.
$sql = "INSERT INTO users (username, email, password)
VALUES ('$username','$email','$password')";
• Prepares a query to save data into the database.
• Inserts:
o username
o email
o hashed password
if($conn->query($sql)){
echo "Registered!";
}
• Runs the query.
• If successful:
o Displays "Registered!"
• If failed:
o Nothing is shown (you may improve this later).
[Link]

$conn = new mysqli("localhost", "root", "", "webapp_db");

• Connects PHP to the database.
• $conn will be used to run SQL queries.
if($_SERVER["REQUEST_METHOD"] == "POST"){
• Runs the code only when the form is submitted.
• Prevents automatic execution when the page loads.
$user_id = $_POST['user_id'];
$name = $_POST['name'];
$message = $_POST['message'];
• Retrieves values entered by the user:
o $user_id → identifies which user sent the message
o $name → sender’s name
o $message → the actual message
$sql = "INSERT INTO contacts (user_id, name, message)
VALUES ('$user_id','$name','$message')";
• Prepares a query to insert data into the contact’s table.
• Stores:
o user ID
o name
o message
if($conn->query($sql)){
echo "Message Sent!";
}
• Runs the query.
• If successful:
o Displays "Message Sent!"
• If it fails:
o No message is shown (can be improved later).
[Link]

$conn = new mysqli("localhost", "root", "", "webapp_db");

• Connects PHP to the database.
• $conn will be used to run queries.
$id = $_GET['id'];
• Gets the id value from the URL.
Meaning:
• This tells the program which record to edit.
$result = $conn->query("SELECT * FROM contacts WHERE id=$id");
$row = $result->fetch_assoc();
What happens:
• Retrieves the current data of the selected record.
• $row stores the data.
Purpose:
• To display existing data in the form so the user can edit it.
if(isset($_POST['update'])){
• Checks if the Update button was pressed.
• name="update" in the button triggers this.
$name = $_POST['name'];
$message = $_POST['message'];
• Gets the new values entered by the user.
$conn->query("UPDATE contacts
SET name='$name', message='$message'
WHERE id=$id");
What this does:
• Updates the selected record in the database.
Breakdown:
• UPDATE contacts → table to update
• SET → new values
• WHERE id=$id → ensures only one record is updated
header("Location: [Link]");
• Redirects the user after updating.
• Sends them back to the dashboard.
[Link]

$conn = new mysqli("localhost", "root", "", "webapp_db");

• Connects PHP to the database.
• $conn is used to execute SQL commands.
$id = $_GET['id'];
• Gets the id value from the URL.
Meaning:
• This tells the program which record to delete.
$conn->query("DELETE FROM contacts WHERE id=$id");
What this does:
• Deletes a record from the contacts table.
Breakdown:
• DELETE FROM contacts → table where data will be removed
• WHERE id=$id → ensures only the selected record is deleted
Important:
• Without WHERE, all records would be deleted.
header("Location: [Link]");
• Redirects the user back to the dashboard after deletion.
• Prevents the user from staying on the delete page.

EXPECTED WEB OUTPUT:

localhost/webapp/[Link]

[Link]

[Link]
To test and be able to use the login, first register a default user

Username: admin123
Password: password123

[Link]

The flow of the program

• User must first visit: localhost/webapp/[Link]
• Login using the default credential user you just added
• If you enter the correct credentials, you will be directed to [Link]
• There you can visit other pages, registration, and contact
• Go to contact and add a message
 Note:
When adding a message, you must use a valid user_id from your database. Since the ID is set to
AUTO_INCREMENT, the first user you register will be ID 1, the second will be 2, and so forth. If you use
an ID that hasn't been created yet, the database will reject the entry.

• Check in the [Link]

o You can edit or delete the newly added message.

Note: Please do not copy & paste this activity; you may improve the design of each
page, as long as it does not affect the functionality and operation.

Please submit this to the shared Google Drive folder