Создаем простой калькулятор на php, используя процедурный подход.

Прототип калькулятора

Скачать архив файлов с кодом можно по ссылке: Calculate.zip

Функции:

Представленный калькулятор на PHP выполняет основные операции: сложение, вычитание, деление, умножение.
Осуществляется проверка на корректность введенных пользователями данных. Проверяем:
- все ли поля заполнены;
- не оказался ли пользователь шутником и не пытается ли к 5 прибавить слово «котлеты»;
- не пытается ли пользователь нарушить математические законы и поделить на ноль;
При отсутствии ошибок на экран выводится ответ — результат вычислений.
Если выявлена ошибка, то выводится сообщение об ошибке.

Процесс приготовления калькулятора:

Ну что — засучим рукава, достанем из своих умных голов необходимые ингредиенты и испечем вкусный калькулятор?!

Для начала создадим файл calculator.php.
В файле calculator.php создим html-форму с полями для ввода операндов и выпадающим списком для выбора оператора:




		
		
			
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
				
						<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset = "UTF-8">
</head>
<body>
    <h1>Прототип калькулятора</h1>
    <!-- а вот и наша форма -->
    <form action="" method="post" class="calculate-form">
        <input type="text" name="number1" class="numbers" placeholder="Первое число"> <!-- поле для ввода первого числа -->
	<select class="operations" name="operation"> <!-- список с операндами -->
	    <option value='plus'>+ </option>
	    <option value='minus'>- </option>
	    <option value="multiply">* </option>
	    <option value="divide">/ </option>
	</select>
	<input type="text" name="number2" class="numbers" placeholder="Второе число"> <!-- поле для ввода второго числа -->
		
	<input class="submit_form" type="submit" name="submit" value="Получить ответ"> <!-- кнопка -->
	</form>
</body>
</html>

О небольшом антураже в виде заголовка и метатегов для интерпретации нашей формы браузером я умолчу, так как это не совсем по делу.. Что, уже проболталась? Ну тогда двигаемся дальше!

При создании формы используем post метод для передачи данных. Так как мы используем процедурный подход и предполагаем размещать основной скрипт в том же файле, то оставляем action – атрибут формы пустым.

Форма с кнопкой создана. Но что это за кнопка, после нажатия на которую ничего не происходит? Исправим ситуацию — вдохнем жизнь в кнопку:

Для начала проверим, были ли нажата кнопка submit и переданы данные формы методом post. Если передача данных осуществлена успешно, то инициализируем переменные: $number1, $number2 и $operation и передадим в качестве значений post-данные первого введенного операнда $_POST[‘number1’], второго введенного операнда $_POST[‘number1’] и оператора $_POST[‘operation’] соответственно.




		
		
			
			
				
					
				
					1
2
3
4
5
6
				
						<?php
if(isset($_POST['submit'])){
// инициализация
    $number1 = $_POST['number1'];
    $number2 = $_POST['number2'];
    $operation = $_POST['operation'];

Проверяем, все ли поля формы заполнены, если нет, то инициализируем переменную $error_result, в которую передаем сообщение об ошибке:




		
		
			
			
				
					
				
					1
2
3
4
				
						// Валидация
if(!$operation || (!$number1 && $number1 != '0') || (!$number2 && $number2 != '0')) {
    $error_result = 'Не все поля заполнены';
}

Если на этом этапе ошибка не найдена и все поля формы заполнены, проверяем являются ли операнды числами. Если все в порядке, то используя конструкцию switch находим выбранный пользователем оператор и производим соответствующее оператору вычисление — сложение, вычитание, умножение или деление. Здесь все просто. Кстати, в случае, если пользователь решит повеселиться и выберет оператор деления, а в качестве второго операнда введет ноль, то мы предусмотрительно выведем ему напоминание о том, что на ноль делить нельзя. А все почему? Потому что добавим проверку деления на ноль, в том случае, если case: ‘divide’:




		
		
			
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						// если все поля формы заполнены, проверяем, являются ли числами введенные пользователем значения
else { 
    if(!is_numeric($number1) || !is_numeric($number2)) { //если операнды — не являются числами
        $error_result = "Операнды должны быть числами"; // инициализируем переменную с ошибкой
    }
    else //  если ошибок не найдено
        switch($operation){ // проверяем какой оператор был выбран
	    case 'plus': // если выбран оператор сложения, то вычисляем сумму
	        $result = $number1 + $number2; 
	        break;
	    case 'minus': // если выбран оператор вычитания, то вычисляем разность
	        $result = $number1 - $number2;  
	        break;
	    case 'multiply': // если выбран оператор умножения, то вычисляем произведение
	        $result = $number1 * $number2;
	        break;
	    case 'divide': // если выбран оператор сложения
	        if( $number2 == '0') // проверям не является ли второй делитель нулевым
		    $error_result = "На ноль делить нельзя!"; 
	        else 
	            $result = $number1 / $number2; // если второй делитель не ноль, выполняем деление
	            break;    
        }
}

Заключительный этап — вывод результата на экран. Если переменная $error_result инициализирована, то выводим ее на экран, если нет — выводим на экран результат вычислений, записанный в переменной $result:




		
		
			
			
				
					
				
					1
2
3
4
5
6
				
						if(isset($error_result)) {
    echo "Ошибка: $error_result";
 }	
else {
    echo "Ответ: $result";
}

Вишенка на на нашем торте не влияет на функциональность калькулятора, но повышает аппетит пользователя. И называется она – css-стили! Чтобы приступить к украшательству калькулятора, создадим файл со стилями «styles.css» и укажем его в header файла calculator.php:
```
		
		
			
			
				
					
				
					1
2
3
4
				
						<head>
	<meta charset = "UTF-8">
	<link rel="stylesheet" href="styles.css"> 
</head>
					
				
			
		
```
Осталось только сотворить во вновь созданном файле красоту и прописать стили для элементов. Моя вишенка выглядит так:

h1{padding-left:67px; margin-top:60px; font-size:27px; color:#464748; text-transform:uppercase;} 
.calculate-form{width:460px; height:100px; padding:0px 60px 40px 60px;} 
input.numbers{height:42px; width:120px; float:left; display:inline-block; margin:20px 0px; padding:10px 20px; border:1px solid #2d598066; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; font-weight:300;} 
select.operations{width:66px; height:64px; float:left; margin:20px 5px; padding:5px 0 0 10px; background-color:#1ca7a2; border:1px solid #1ca7a2; font-size:36px; color:#fff;} 
input.submit_form{height:62px; width:400px; display:inline-block; padding-top:5px; background-color:#f7994f; border:1px solid #f6994f; border-radius:4px; font-size:17px; font-weight:600; text-transform:uppercase; color:#ffffff; box-shadow:1px 5px 10px 5px rgb(247, 136, 48) inset;} 
div.answer-text,div.error-text{margin-top:50px; padding-left:65px; font-size:28px;} 
div.answer-text{color:#2e2e2f;}
div.error-text{color:red;}

На этом калькулятор можно считать полноценным и завершенным!

Скачать архив файлов с кодом можно по ссылке: Calculate.zip

Вкусные сайты по лучшим рецептам

Создаем простой калькулятор на php.

Создаем простой калькулятор на php, используя процедурный подход.

Прототип калькулятора

Функции:

Процесс приготовления калькулятора:

Добавить комментарий Отменить ответ

Метки

Создаем простой калькулятор на php.

Создаем простой калькулятор на php, используя процедурный подход.

Прототип калькулятора

Функции:

Процесс приготовления калькулятора:

Добавить комментарий Отменить ответ