كيفية إنشاء آلة حاسبة بلغة PHP
محتويات
كيفية إنشاء آلة حاسبة بلغة PHP
تعد البرمجة بلغة PHP واحدة من أهم المهارات التي يمكن تعلمها لإنشاء تطبيقات ويب تفاعلية. في هذا المقال، سنستعرض كيفية إنشاء آلة حاسبة بسيطة باستخدام لغة PHP. سنتناول الخطوات الأساسية لتصميم وبناء هذه الآلة الحاسبة، بالإضافة إلى توضيح الأكواد والشرح التفصيلي لكل خطوة.
الخطوة 1: إعداد بيئة العمل
قبل البدء في كتابة الأكواد، تأكد من أنك قد أعددت بيئة العمل المناسبة. ستحتاج إلى خادم محلي مثل XAMPP أو WAMP لتشغيل ملفات PHP على جهازك.
الخطوة 2: إنشاء ملف HTML لواجهة المستخدم
أولاً، سنقوم بإنشاء ملف HTML يحتوي على نموذج لواجهة المستخدم للآلة الحاسبة. احفظ الملف باسم index.html:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>آلة حاسبة بسيطة</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
border: 1px solid #ddd;
padding: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.calculator input[type="text"],
.calculator input[type="button"] {
font-size: 18px;
margin: 5px;
padding: 10px;
}
.calculator input[type="button"] {
width: 50px;
}
</style>
</head>
<body>
<div class="calculator">
<form action="calculator.php" method="post">
<input type="text" name="display" id="display" value="<?php echo isset($_POST['display']) ? $_POST['display'] : ''; ?>" readonly>
<br>
<input type="button" value="7" onclick="appendToDisplay('7')">
<input type="button" value="8" onclick="appendToDisplay('8')">
<input type="button" value="9" onclick="appendToDisplay('9')">
<input type="button" value="/" onclick="appendToDisplay('/')">
<br>
<input type="button" value="4" onclick="appendToDisplay('4')">
<input type="button" value="5" onclick="appendToDisplay('5')">
<input type="button" value="6" onclick="appendToDisplay('6')">
<input type="button" value="*" onclick="appendToDisplay('*')">
<br>
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="2" onclick="appendToDisplay('2')">
<input type="button" value="3" onclick="appendToDisplay('3')">
<input type="button" value="-" onclick="appendToDisplay('-')">
<br>
<input type="button" value="0" onclick="appendToDisplay('0')">
<input type="button" value="." onclick="appendToDisplay('.')">
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="+" onclick="appendToDisplay('+')">
<br>
<input type="submit" value="=">
</form>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
</script>
</body>
</html>
الخطوة 3: إنشاء ملف PHP لمعالجة الحسابات
الآن، سنقوم بإنشاء ملف PHP الذي سيتولى معالجة الحسابات وإظهار النتائج. احفظ الملف باسم calculator.php:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$display = $_POST['display'];
if (!empty($display)) {
// استخدم دالة eval لحساب التعبير الرياضي
$result = eval('return ' . $display . ';');
} else {
$result = '';
}
}
?><!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>آلة حاسبة بسيطة</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
border: 1px solid #ddd;
padding: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.calculator input[type="text"],
.calculator input[type="button"] {
font-size: 18px;
margin: 5px;
padding: 10px;
}
.calculator input[type="button"] {
width: 50px;
}
</style>
</head>
<body>
<div class="calculator">
<form action="calculator.php" method="post">
<input type="text" name="display" id="display" value="<?php echo isset($_POST['display']) ? $_POST['display'] : ''; ?>" readonly>
<br>
<input type="button" value="7" onclick="appendToDisplay('7')">
<input type="button" value="8" onclick="appendToDisplay('8')">
<input type="button" value="9" onclick="appendToDisplay('9')">
<input type="button" value="/" onclick="appendToDisplay('/')">
<br>
<input type="button" value="4" onclick="appendToDisplay('4')">
<input type="button" value="5" onclick="appendToDisplay('5')">
<input type="button" value="6" onclick="appendToDisplay('6')">
<input type="button" value="*" onclick="appendToDisplay('*')">
<br>
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="2" onclick="appendToDisplay('2')">
<input type="button" value="3" onclick="appendToDisplay('3')">
<input type="button" value="-" onclick="appendToDisplay('-')">
<br>
<input type="button" value="0" onclick="appendToDisplay('0')">
<input type="button" value="." onclick="appendToDisplay('.')">
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="+" onclick="appendToDisplay('+')">
<br>
<input type="submit" value="=">
</form>
<div>
<p>النتيجة: <?php echo isset($result) ? $result : ''; ?></p>
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
</script>
</body>
</html>
الخطوة 4: تشغيل الآلة الحاسبة
- قم بنقل ملفات index.html و calculator.php إلى مجلد htdocs إذا كنت تستخدم XAMPP.
- افتح متصفح الويب وأدخل العنوان http://localhost/index.html لعرض واجهة المستخدم الخاصة بالآلة الحاسبة.
؟.jpg)
.png)
