Loading Likes...

Создание PHP калькулятора не имеет под собой никакой звездочной сложности. Любой начинающий программист сможет создать обычный калькулятор для собственного сайта.

1. Начало и конец формы

Начнем с HTML базы калькулятора и перво наперво запишем начальный код формы.

 

– Где form является началом и концом формы.

– В кавычках Action указывается адрес той страницы, на которой будет отображаться результат счета. Но мы же хотим, чтобы результат появился на той же странице где производился счет и посему никакого адреса в кавычках не указываем.

Method свидетельствует о методе запроса и в качестве запроса стоит  POST, хотя существует и GET запрос. POST пересылает больше данных, чем GET и к тому же чаще используется веб-разработчиками. Так что POST в нашем калькуляторе будет предпочтительнее.


2. Поля счета в HTML форме

В качестве результата <form> </form> получим следующее ⇓

А тут ничего нет, так как форма создалась и у неё ещё нет никаких видимых данных. Конечно, можно добавить CSS-стили для формы, но это всё равно не решит сути вопроса.

Так что давайте-ка произведем два number поля, в них будем записывать числа для последующего счета. По идее хорошо использовать text в качестве поля, но всё таки лучше поля ещё снабдить стрелочками и посему стоит прибегнуть к number.

 

Input является начальным словом для создания поля, а далее указывается тип поля  (в нашем случае number) и названия полей – первое называем рандомным словом "pervoe", а второе нарекаем "vtoroe".

Остается только добавить внутренний текст при помощи placeholder и наблюдать за фантастическим результатом  🙂

Поля для счета


3. Кнопка действия в HTML форме

Как происходит работа калькулятора? Вводятся числа в поля number и нажимается кнопка счета, но у нас пока нет данной кнопки, так что давайте её произведем при помощи submit.

 

В качестве типа поля указана кнопка (submit), а в качестве названия кнопки фигурирует слово "посчитать"  😎

Таким образом у нас появился начальный калькулятор:

 

br – это тег, который используется для переноса кнопки submit на отдельную строку.

Кнопка submit


4. Производство счета при помощи языка PHP

Теперь нашей форме необходимо дать возможность производить счет и для этого нужно обратить внимание на язык PHP.

1

Первым делом стоит перевести два поля number в ПХП среду.

Начнем с базиса, который заключается в том, что поле <input type="number" name="pervoe"> будет значиться в PHP как $_POST["pervoe"];

 

2

Далее идет знакомство c переменными:

Переменная – это выдуманное рандомное имя с началом в виде доллара $.

К примеру, так выглядит переменная kot:

 

Переменные облегчают работу в PHP – ту же$_POST["pervoe"]; можно сделать переменной, впрочем, мы так и поступим с полями number.

Сделаем PHP поля number в виде переменных:

 

Исходя из вышесказанного получается, что <input type="number" name="pervoe"> является переменной $odin.

4

Если вы никогда не работали с php, то знайте про обязательный стартовый и финишный  код.

  • <?php – это начало.
  • ?> – это конец.

 

Приступим же к делу, а именно сделаем так, чтобы наш калькулятор начал плюсовать числа в полях. И для этого нужно создать третью переменную с названием $suma, эта переменная будет является результатом сложения.

Итог таков:

 

То есть вот как выглядит все на самом деле ⇓

 

5

И дальше идет вывод результата ($suma). За вывод результата отвечает код echo.

 

6

Завершающий код таков:

 

7

А вот и результат счета подоспел ⇓

Счетчик HTML PHP результат


5. Выбор в калькуляторе

Современный калькулятор должен плюсовать, умножать, делить и минусовать числа и чтобы такой выбор провернуть надобно добавить новые поля в HTML форму и заодно познакомиться с тегом label.

Поле выбора производится при помощи слова radio.

Добавим четыре выбора в HTML форму

 

Выбор в ПХП счетчике

Разберем код выбора

name="kopy" – это название поля, оно для всех выборщиков должно быть одинаково. Все поля принадлежат к одному названию и посему невозможно выбрать и плюс, и минус, да и с полями проще оперировать.

value="+" – знак счета будет свидетельствовать о том, какой выбор сделал пользователь. Данный знак пригодится в дальнейшем PHP коде.

id="1" – этот id связывает поле radio со знаком, который отображается между label.

Получается что id=1 присуждается к label for=1 и это дает возможность нажимать по видимому плюсу и тем самым подтверждать свой выбор. Если этого не сделать, то при нажатии на числовой знак ничего происходить не будет.


6. Связка выбора со счетом при помощи PHP

Id полей влияет на label и не актуален в PHP, а посему речь пойдет только про value и name.

Из предыдущего PHP кода удаляется третья переменная $suma и остается только связка полей number с переменными.

 

Сначала все поля-выборщики radio переводятся в PHP среду и делается это всего лишь одним кодовым предложением.

 

А после возникает if и elseif – эти кодовые слова означают “если”.

“если” человек выберет плюс, то

А если минус то

 

Для первого условия создается if, а для последующих elseif

Так как все поля-выборщики содержат одинаковое название kopy, то для идентификации каждого выбора используется индивидуальное значение value.

 

Разберем вышеуказанный код

if($grom == "+") – если поле выбора равно value= “+”, то два поля number начинают сплюсовываться $odin + $dva;

Обратите внимание на знак равенства, он в ПХП указывается как ==

Ну и смотрим на итоговый код и калькулятор

 

Готовый счетчик HTML


7. Вывод числового результата в любом месте сайта

function – это PHP слово, которое вставляет числовой результат в любое место калькулятора.

1

Функция состоит из начального слова function, выдуманного названия и скобочек.

Для примера назовем функцию green.

2

Функцией оборачивается весь PHP код калькулятора.

3

Вывод функции (результата) осуществляется в HTML коде калькулятора.

 


8. CSS оптимизация и конечный вывод калькулятора

В конце наступает CSS оптимизация рабочего калькулятора, который лучше располагать на отдельной странице. Нужна отдельная страница, так как после нажатия на кнопку submit происходит перезагрузка страницы.

На сервере в папке public_html создается папка "new", а после в созданную папку заносится файл index.php с кодом калькулятора. После остается зайти по такому адресу адрес сайта/new и воспользоваться калькулятором.

Нижеуказанный код можно вставить на страницу сайта, чтобы увидеть готовый калькулятор. А результат можно посмотреть, перейдя по этой ссылке – https://zavlekyxa.ru/new/

Счетчик свой сделать для сайта

Производство простого веб-калькулятора не является сложной задачей, так что дерзайте и нажимайте на социальные кнопочки  😀