6 Июнь 2016

4673

Как создать калькулятор для сайта


Приветствуем!
По вашим многочисленным просьбам мы решили записать обзорное видео по сервису CalcCreator (оно находится в самом конце этой статьи).

Отличия новой версии конструктора от старой


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

Итак, для начала зарегистрируемся.

Регистрация

После регистрации вы попадаете в личный кабинет. Здесь вы можете увидеть новое меню.

Главное меню

Если промотаем страницу вниз, то оно немного изменяется. Появляется кнопочка "Консультация по скайпу". Здесь вы можете нажать ее и сразу позвонить мне в скайп. Пока эта функция бесплатная.
Если вы хотите просто получить полную консультацию по скайпу, то заполняете форму, мы вам отвечаем и связываемся в удобное для вас время по скайпу, обсуждаем все вопросы.
Если вы хотите, чтобы мы сделали за вас калькулятор, то заполняете другую форму у и нажимаете "Создать калькулятор под ключ". Опять же, наш сотрудник получит ваш запрос, обработает его и с вами свяжутся.

Констультации

Рекомендую добавляться в сообщество в Вконтакте, потому что здесь постоянно обновляется информация о проекте, и мы отвечаем на многие вопросы.

Сообщества

Здесь есть раздел "Вопросы, замечания, предложения", активно идет обсуждение, мы периодически публикуем новости, отвечаем на интересующие вас вопросы.

Вопросы

Новый редактор


Перейдем к обзору редактора.

Как видите, у нас есть область редактирования. Серенькая область и есть область самого калькулятора. Ее можно перетаскивать, на ней можно кликать левой клавишей мыши, и тогда происходит выделение.
При выделении объекта у него появляется ряд свойств.

Область редактирования

Раньше это была всплывающая панелька слева. Сейчас все свойства у всех элементов будут возникать справа в редакторе: шрифт, дизайн и так далее.

Старая версия

Для того чтобы настроить отправку почты, нужно будет нажимать кнопочку "Настройка E-mail".

Настройка Email

Для того чтобы изменить ширину или высоту, нужно выбирать соответствующее свойство, задавать его либо в пикселях, либо в процентах, и оно будет тоже меняться.
Слева располагается панель элементов. Некоторые элементы были удалены, те, которые использовались в старой версии, такие как Переменная, Массивы. Некоторые элементы были добавлены. Как видите, есть календарь промежутков. Этого раньше не хватало.

Все элементы добавляются примерно одинаковым способом. Мы нажимаем на элемент либо перетягиваем его, и он отображается. Для того чтобы у элемента появились свойства, мы нажимаем на него левой клавишей мыши либо на руку, либо, если это панель, - просто по панели.
Панель - это аналог div-a в HTML. Давайте выделим текст и посмотрим, какие у него есть свойства.

Свойства

Важным свойством является расположение, обтекание сверху, снизу. Если мы нажимаем «Обтекание слева» - «По левому краю», то следующий элемент за текстом приклеивается к нему справа. Если же мы выбираем «Обтекание - по правому краю», то первый элемент перемещается вправо, а второй элемент приклеивается к нему слева. Это аналог "float: left;" и "float: right;".

Пример калькулятора


Теперь мы создадим простейший калькулятор.
Выделим левой клавишей область редактирования, перейдем на свойство «Данные» и назовем калькулятор "Сложение двух чисел".
Зададим так же описание калькулятора, нажав на кнопочку "Описание калькулятора".
В этом окошке внизу есть описание калькулятора, где мы и напишем его название "Сложение двух чисел". Для применения - нажимаем красную галочку, она становится серой. Закрываем окошко.

Название калькулятора

Создадим заголовок нашего калькулятора. Добавим текст, выделим его и расположим сразу по центру. Изменим текст. Назовем его «Калькулятор "Сложение двух чисел"».
Перейдем на вкладку «Дизайн» и зададим ему ширину побольше 80px, а также на свойстве «Шрифт» сделаем позицию «По центру» и сделаем его жирным (600).

Настройки свойств

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

Для того чтобы расположить элементы друг за другом, нужно выделить элемент и нажать «Обтекание» - «По левому краю». Ширину текста сделаем 50%, выберем позицию «По центру», шрифт Verdana. Лучше выбирать рубленые шрифты: они хорошо читаются. Сделаем его пожирнее.

Связь и выравнивание

Выделим горизонтальный слайдер и зададим ему максимальное и минимальное значение. Минимальное будет 100, максимальное - 1000. Шаг сделаем 100.
Перейдём на свойство «Поведение». Наведём мышь на текст, возле логотипа появляется название поля «Label2». Выберем его в доступных элементах для горизонтального слайдера.

Расположим панель (на которой находится слайдер) по центру и создадим ещё одну панель. Выделяем область редактирования и нажимаем «Панель».
В эту панель мы добавим текст и ввод чисел. Параметры зададим так: «Текст», «Расположение», «Обтекание по левому краю», «Ширина» 50%. И в поле для ввода мы тоже зададим ширину 50 %.
Теперь мы сделаем текст. Берем свойство «Данные» и пишем вместо значения по умолчанию текст Второе число.

Панели перемещаются, нажимаешь на панель и перетягиваешь ее.
В эту панель нам надо еще добавить текст. Он будет у нас в заголовке, поэтому делаем ему 100%. Шрифт - позиция по центру, и напишем Первое число. Теперь выделим этот элемент и перетащим его повыше нашего горизонтального слайда.

Так, первое число понятно, второе число будет записано здесь. Делаем выравнивание справа и зададим еще внутренний отступ справа, чтобы наш тест не приклеивался к вводу чисел. Нажмем на ввод чисел и зададим ему значение по умолчанию 1. Минимальное значение пусть будет 0 и максимальное – 100. Шаг изменения пускай будет 1.

Здесь вернемся и доработаем текст.

В качестве текста напишем значение по умолчанию для нашего горизонтального слайдера. Оно у нас 0. Мы сделаем его 200, и текст тоже мы сделаем 200: «Данные» - «Значение» -200.

Добавим еще одну панель, в которую мы выведем наш результат. Сделаем опять же расположение сверху по центру, добавим сюда текст и ещё один текст.

Здесь напишем результат, выставим ширину 50 % и добавим выравнивание: «Расположение» - «Обтекание» - «По левому краю».

Текст опять же делаем 50 %. Пускай он занимает всю оставшуюся область панели. Разукрасим саму панель, чтобы не потеряться.

Результат мы выведем так: «Выравнивание» - «Позиция справа». Сделаем большой внутренний отступ справа.
Этот текст мы выровняем по… В принципе, выравнивание мне его нравится. Единственное, зададим значение по умолчанию 0 рублей. Рубли мы будем приплюсовывать не здесь, а постфиксом «Пробел Руб.».
Это нужно, когда отработает скрипт, который почитает значение нашего калькулятора.  Наведем Лейбл 6, к нему добавится автоматически постфикс «рубли».

Бывает, впереди нужно вывести значение «доллары». Тогда нужно дописать префикс, и он выведет значение впереди.

Добавим еще одну панель, которая будет отвечать за кнопочку отправки данных пользователю и заказчику на почту.

Расположим ее по центру и добавим сюда кнопку. Кнопку мы делаем по центру. Сделаем у нее внешний отступ, например, сверху 5px и добавим ширину другую, например, 70px, а здесь напишем текст. «Данные» – «Текст». Текст напишем «Связаться со мной». Так, уменьшим высоту панели, 35.

Как добавить скрипт


Добавим скрипт, который будет все это считать.

// Подсчёт результата
label6 = hSlider1 + number1;

Выделяем скрипт. Переходим на свойство «Текст». Меняем его название scriptResult. Чтобы название активировалось, нажимаем кнопочку "Применить".

Редактор скриптов

Теперь идем на свойство «Поведение», нажимаем «Редактировать скрипт». Появляется мини-редактор. В старой версии такого не было. В этой он есть, и есть даже подсветка синтаксиса и проверка вашего кода. Если что-то будет написано неправильно, то будет выводиться информация слева.  При изменении будет загораться красненьким кнопочка «Применить».

Этот скрипт будет суммировать первое число, второе число и выводить результат.
Результат у нас label6, значит, так и пишем. Добавим комментарии «Подсчет результата». Удобно наводить мышку: окно не пропадает, просто навели на наш результат, куда будем выводить этот "label6, и пишем дальше = первое число (это значение нашего слайдера, поэтому будем указывать имя слайдера), "hSlider1 +" и добавляем второе число плюс number1.

В итоге нажимаем «Применить». Закрываем это окошко, нажимаем «Запустить скрипт при старте». В результате должен быть 201 рубль.
101, верно, потому что мы задали 100. Вернемся, посмотрим, 100. Да, значение по умолчанию 0, а мы хотели, чтобы было 200. Ну, вот оно 200.

Иногда бывает, что мы 200 уже где-то написали, и он не воспринимает его, поэтому можно что-то дописать в конце и удалить. Эта ошибка и в старой версии была, и в новой тоже. Вот, мы значение по умолчанию 200 задали.
Посмотрим сейчас что получится.
201 рубль, все верно.

Для того чтобы скрипты активировались, нам нужно для каждого элемента в свойствах «Поведения» выбрать scriptResult в доступных скриптах. Видно, что он становится красным.

Что надо сделать для того, чтобы кнопка «С взяться со мной» заработала и отправила мне на почту эти расчеты?

Я выделяю кнопку, иду на вкладку «Поведение» и нажимаю галочку «Отправлять e-mail» при нажатии.

Кнопка для оправки письма

Теперь выделяем форму нашего калькулятора главную. Есть кнопочка «Настройка e-mail».

Формирование письма

Здесь уже появилась возможность использовать наш SMTP. Не нужно мучиться с прописыванием своих настроек. Для почты я укажу свою почту для проверки. Тему письма можно указать Тестовое письмо. Здесь тожее поменялся немного формат, как там должно передаваться. То есть я могу здесь писать первое число, двоеточие и в квадратных двойных скобочках я пишу сюда параметр ашслайдер, например. Дальше пишу второе число : двойные [] и второе число у нас будет number1. Так, последним параметром выведем результат в письме label6.
На этом в принципе всё.

Первое число: [[hSlider]]
Второе число: [[number1]]
Результат: [[label6]]

На этом хочу попросить вас оставить свои комментарии ниже, там, где вы смотрите это видео. И поделиться, полезно, не полезно, может быть, что-то улучшить, что-то было непонятно. Все прочитаем, на все ответим. На этом все, пока-пока!