If you're just starting out with PHP or looking for a practical beginner project to enhance your web development skills, a calculator is a perfect way to apply basic PHP concepts like forms, variables, conditionals, and arithmetic operations. In this post, I’ll walk you through how I built a simple calculator using PHP, HTML, and a little bit of CSS, and explain the key parts of the project.
Project Objective
Create a web-based calculator that can perform basic arithmetic operations:
- Addition
- Subtraction
- Multiplication
- Division
The calculator will take two numbers and an operator as input from the user, then display the result when the form is submitted.
Tools & Technologies Used
- PHP – Backend logic
- HTML – User interface structure
- CSS – Basic styling for a cleaner UI (optional)
- Local Server – XAMPP or similar to run PHP locally
Project Code Breakdown
1. HTML Form
The form collects two numbers and the desired operation from the user.
<form method="post">
<input type="number" name="num1" placeholder="Enter first number" required>
<input type="number" name="num2" placeholder="Enter second number" required>
<select name="operator" required>
<option value="">Select Operation</option>
<option value="add">Add (+)</option>
<option value="subtract">Subtract (-)</option>
<option value="multiply">Multiply (*)</option>
<option value="divide">Divide (/)</option>
</select>
<button type="submit" name="calculate">Calculate</button>
</form>
2. PHP Logic
This PHP block handles the logic when the form is submitted.
<?php
$result = "";
if (isset($_POST['calculate'])) {
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$operator = $_POST['operator'];
switch ($operator) {
case "add":
$result = $num1 + $num2;
break;
case "subtract":
$result = $num1 - $num2;
break;
case "multiply":
$result = $num1 * $num2;
break;
case "divide":
if ($num2 != 0) {
$result = $num1 / $num2;
} else {
$result = "Error: Division by zero";
}
break;
default:
$result = "Invalid operation selected";
}
}
?>
3. Displaying the Result
After form submission, the result is displayed below the form:
<?php if ($result !== ""): ?>
<h3>Result: <?php echo $result; ?></h3>
<?php endif; ?>
Optional Styling (CSS)
To make the interface cleaner:
<style>
form {
margin: 50px auto;
text-align: center;
}
input, select, button {
padding: 10px;
margin: 5px;
font-size: 16px;
}
</style>
What You Learned
- How to use HTML forms to send data to a PHP script
- Basic PHP syntax for handling form input
- Using conditionals and switch-case for logic flow
- How to perform simple error handling (like division by zero)
Possible Improvements
- Add keyboard support
- Add history of calculations using session or local storage
- Improve styling with a modern frontend framework like Bootstrap
- Extend functionality with more operations like exponents, modulus, etc.
Final Thoughts
This simple calculator project was a great way to get hands-on experience with PHP and server-side logic. It’s an ideal project for beginners and can be expanded in many creative ways. If you're learning PHP, I highly recommend trying this project out yourself!
Let me know if you have any questions or want help with your version of the calculator!
Thanks for reading! 👨💻