JavaScript для бизнес логики

Реализованный пример

Порой пользователю на сайте необходимо рассчитать стоимость какой-либо услуги. На помощь разработчику сайта, для того, чтобы удовлетворить желание посетителя приходит JavaScript.
Здесь разберем момент расчета стоимости услуги на примере кружка робототехники.

[html]

<form role="form" action=» method=’POST’ >

<div>Направление</div>

<select onchange = "sayMya();" name="direction" class="nameOrg" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
<option value="Робототехника" selected="selected">Робототехника</option>
<option value="Шахматы8" >Шахматы 8 занятий</option>
<option value="Шахматы4" >Шахматы 4 занятия</option>
</select>

<div> Площадка</div>

<select name="place" onchange = "sayMya();" class="Place" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
<option value="Беловежская" selected="selected">Беловежская</option>
<option value="Строгино" >Строгино</option>
<option value="Жулебино" >Жулебино</option>
<option value="Свиблово" >Свиблово</option>
<option value="Звенигород" >Звенигород</option>
<option value="Можайск" >Можайск</option>
</select>

<div>Количество оплачиваемых месяцев (скидки при оплате нескольких месяцев сразу)</div>

<select onchange = "sayMya();" name="nummonth" class="Price" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
<option value="Одно занятие" >Одно занятие</option>
<option value="1" >1 месяц</option>
<option value="2" >2 месяца</option>
<option value="3 — 10% скидка" selected="selected">3 месяца — 10% скидка</option>
<option value="4 — 10% скидка" >4 месяца — 10% скидка</option>
<option value="5 — 10% скидка" >5 месяцев — 10% скидка</option>
</select>

<div> Сумма оплаты</div>

<input onchange="changeSum();" type="text" name="amountpay" class="t-input js-tilda-rule newSum" value="" placeholder="3000" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
</form>

[/html]

[javascript]
// При загрузке страницы инициализируем окно суммы
window.onload = function(){
var newSum = undefined;
sayMya(newSum);
}
// Главная функция ("СкажиМяу")
function sayMya(newSum)
{
cursorPrice = $(‘.Price :selected’).val(); // Получает значение из селектора с классом Price
cursorOrg = $(‘.nameOrg :selected’).val();// Получает значение из селектора с классом nameOrg
cursorPlace = $(‘.Place :selected’).val(); // Получает значение из селектора с классом Place

var isMonth = false; // булева переменная, определяет выбрал пользователь оплату по месяцам или по дням
var discount = 1; // Расчет скидки (0..1)
var months = 1; // Кол-во оплаченных месяцев
var price = 1000; // Цена за курс

// Смотрим данные селектора с классом Price и определяем скидку и параметр isMonth
switch(cursorPrice)
{
case (‘Одно занятие’) :
isMonth = false;
discount = 1;
break;

case (‘1’):
case (‘2’):
isMonth = true;
discount = 1;
break;

case (‘3 — 10% скидка’) :
case (‘4 — 10% скидка’) :
case (‘5 — 10% скидка’) :
isMonth = true;
discount = 0.9;
break;

default :
break;
}

// Смотрим данные селектора с классом Price и кол-во месяцев (только месяцев!!!)
switch(cursorPrice)
{
case (‘1’) : months = 1; break;
case (‘2’) : months = 2; break;
case (‘3 — 10% скидка’) : months = 3; break;
case (‘4 — 10% скидка’) : months = 4; break;
case (‘5 — 10% скидка’) : months = 5; break;
}
// Смотрим данные селектора с классом Place и определяем цену за месяц/день
// в зависимости от локации индивида
switch(cursorPlace)
{
case (‘Беловежская’) :
switch(cursorOrg)
{
case (‘Робототехника’) : price = isMonth ? 3000 : 1000; break;
case (‘Шахматы8’) : price = isMonth ? 3200 : 700; break;
case (‘Шахматы4’) : price = isMonth ? 2000 : 700; break;
default : break;
}
break;
case (‘Строгино’) :
switch(cursorOrg)
{
case (‘Робототехника’) : price = isMonth ? 3000 : 1000; break;
case (‘Шахматы8’) : price = 0; break;
case (‘Шахматы4’) : price = 0; break;
default : break;
}
break;
case (‘Свиблово’) :
switch(cursorOrg)
{
case (‘Робототехника’) : price = isMonth ? 3000 : 1000; break;
case (‘Шахматы8’) : price = 0; break;
case (‘Шахматы4’) : price = 0; break;
default : break;
}
break;
case (‘Жулебино’) :
switch(cursorOrg)
{
case (‘Робототехника’) : price = isMonth ? 3000 : 1000; break;
case (‘Шахматы8’) : price = 0; break;
case (‘Шахматы4’) : price = 0; break;
default : break;
}
break;

case (‘Звенигород’) :
switch(cursorOrg)
{
case (‘Робототехника’) : price = isMonth ? 3000 : 1000; break;
case (‘Шахматы8’) : price = isMonth ? 3200 : 700; break;
case (‘Шахматы4’) : price = isMonth ? 2000 : 700; break;
default : break;
}
break;
case (‘Можайск’) :
switch(cursorOrg)
{
case (‘Робототехника’) : price = isMonth ? 2500 : 850; break;
case (‘Шахматы8’) : price = 0; break;
case (‘Шахматы4’) : price = 0; break;
default : break;
}
break;
default : break;
}
// Расчитываем сумму (если параметром newSum не передается значение), если передается — count = newSum
var count = newSum === undefined ? price * months * discount : newSum;

// Создаем переменную согласно требований Тильды
var value = ‘#order:’ + cursorOrg + ‘,’ + cursorPlace + ‘,’ + cursorPrice + ‘=’ + count;

// Полученное значение вставляем в качестве ссылки
//document.getElementById(‘abc’).href = value;

// Сумму исходя из бизнес-логики вставляем в поле "Сумма к оплате"
document.getElementsByName(‘amountpay’)[0].value = count;
}

// Функция, выполняющаяся при изменении значения в поле "Сумма к оплате"
function changeSum(){
var url = document.getElementById(‘abc’).href;
var newSum = document.getElementsByName(‘amountpay’)[0].value;
sayMya(newSum);
// alert(newSum);
}
[/javascript]

Делаем регистрацию на сайте.

Предыстория- у нас есть студенческий форум, и мы должны идентифицировать всех людей, посещающих сайт(делаем это по-старинке…без подключения Вконтакте).

Должны узнать имя, фамилию, группу, телефон, номер студенческого билета,e-mail.

Осуществляется это следующим путем.

  • входим в phpmyadmin. Для этого переходим по директории мойсайт.ru/phpmyadmin/ (если он у вас находится в этой папке)ВНИМАНИЕ! Учитывайте регистр букв
  • вводим пароль и логин (он в дальнейшем нам понадобится при работе с кодом), входим в систему
  • с левой стороны у нас находятся базы данных
  • выбираем одну из существующих или создаем новую…для этого жмем на кнопку SQL и прописываем

[php]create database nikellanjilo;[/php]

  • мы создали базу данных
  • теперь нам нужно создать в базе taste(просто так…можно в любой) таблицу nikellanjilo — для этого переходим в test внизу пишем в окне nikellanjilo вводим необходимое число столбцов и кликаем «ОК». Заполняем таблички(как Excel)-это самый нудный и самый простой способ для начинающих… можно сделать просто запрос, который создаст табличку сам(об этом далее)

Теперь, после того как БД готова- приступаем к написанию кода.
Создаем файл с расширением .php и пишем следующее:
[php]
<form action=»registr.php» method=»post»>
<table>
<tbody>
<tr>
<td>Name</td>
<td><input type=»text» name=»Name» size=»30″ maxlength=»12″ /></td>
</tr>
<tr>
<td>Surname</td>
<td><input type=»text» name=»Surname» size=»30″ maxlength=»20″ /></td>
</tr>
<tr>
<td>Group</td>
<td><input type=»text» name=»Group» size=»30″ maxlength=»12″ /></td>
</tr>
<tr>
<td>Telephone</td>
<td><input type=»text» name=»Telephone» size=»30″ maxlength=»12″ /></td>
</tr>
<tr>
<td>Bilet</td>
<td><input type=»text» name=»Bilet» size=»30″ maxlength=»12″ /></td>
</tr>
<tr>
<td>Password</td>
<td><input type=»password» name=»pass» size=»30″ maxlength=»12″ /></td>
</tr>
<tr>
<td>Password</td>
<td><input type=»password» name=»pass1″ size=»30″ maxlength=»12″ /></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type=»text» name=»add» size=»30″ maxlength=»40″ /></td>
</tr>
<tr>
<td></td>
<td><input type=»submit» value=»Input» /></td>
</tr>
</tbody>
</table>
</form>
[/php]
Получаем подобную табличку-

Name
Surname
Group
Telephone
Bilet
Password
Password
E-mail

 

Создаем обработчик — registr.php
в нем пишем:
[php]
@ $db= mysqli_connect(‘localhost’,’ваше_логин,что при входе’,’пароль’,’test’);
if (mysqli_connect_errno()){
echo ‘Error’;
exit;
}
$name=$_POST[‘Name’];
$surname=$_POST[‘Surname’];
$group=$_POST[‘Group’];
$telephone=$_POST[‘Telephone’];
$bilet=$_POST[‘Bilet’];
$pas=$_POST[‘pass’];
$pas1=$_POST[‘pass1′];
$ad=$_POST[‘add’];
$query=»insert into nikellanjilo values
(‘».$name.»‘,’».$surname.»‘,’».$group.»‘,’».$telephone.»‘,’».$bilet.»‘,’».$pas.»‘,’».$ad.»‘)»;
if ($pas<>$pas1 and ($name || $surname||$pas||$ad||$telephone)){
echo («Ваши пароли не совпали, пожалуйста, вернитесь и повторите регистрацию снова»);
}
else{
$result=$db->query($query);
if ($result){
echo «Спасибо, Ваши данные внесены в базу данных.».».Теперь можно вернуться на главную страницу«;
}

}
?>
[/php]

Первое знакомство с html,php, jQuery. Что для чего нужно и какие роли играют.

Данная статья для тех людей, кто решил завести свой личной сайт на просторах интернета(сложный ли, простой ли, одностраничный или целый блог, статичный или динамичный).
Начиная с этого введения мы будем брать для разбора интернет-магазин на примере сайта рыбкоф.рф, который был проектом N-Network и будем делать его прототип.
Благодаря урокам мы научимся делать:

  • статические страницы
  • динамичные страницы
  • интернет-магазин
  • всякого рода подключения-rss, YouTube, подключение API VK.COM
  • подключение баз данных к сайту

Теперь о том, для чего нам нужен HTML, CSS,JavaScript и PHP, СУБД MySQL.
Сайты представляют из себя некоторое подобие программного кода, но ни как не страничка, сделанная в Word’е и вставленная как-то в Интернет(как думают многие начинающие веб-программисты — самоучки).
Допустим, для создания ссылки нам необходимо писать целый код(и это самое простое что есть):

< a href=http://nikellanjilo.ru>Ссылка на мой сайт< a/>

Будет это выглядеть примерно так:
Ссылка на мой сайт

Перед тем,как начать веб-разработку, т.е. создание своего личного сайта нужно иметь:

  • Редактор Notepad++, который можно будет скачать тут(если Вы решили создать простой проект)
  • Также, если Вы решили создать свой собственный крупный проект и следить за уроками далее, то я могу Вам посоветовать Aptana Studio, которую я уже давно использую и которую можно скачать здесь
  • Большой справочник по html- здесь, где нам нужно будет смотреть некоторые Теги, их свойства и некоторые примеры, дополняющие наши уроки
  • Для создания баз данных, начальной проверки нам локалке на понадобится EasyPHP, который качаем отсюда.
  • FTP-клиент(FileZilla)-скачать нужен для передачи данных на сервер

Теперь для чего что нужно:

  • html-для верстки страниц, является «каркасом» сайта
  • css- оформление и визуализация
  • php- основной функционал сайта. В основном все веб-проекты строятся именно на этом языке — Вы часто пользуетесь регистрацией, интернет-магазинами, блогами, которые основаны на нем.
  • JavaScript- для создания виджетов; как библиотеку можно использовать упрощенную jQuery,а для того,чтобы не расписывать функции на JS, мы используем готовые методы
  • MySQL- для ведения базы данных пользователей, для хранения информации.

Теперь о том, как мы можем разместить информацию в Сети. У нас есть сайт, который мы старательно писали и тестировали,
и мы хотим его выложить на суд общественности- для этого мы регистрируем свой собственный бесплатный хостинг(услугу для размещения информации на сервере, находящимся в Сети). Бесплатный потому что мы еще неопытны и не хотим тратить деньги на платные хостинги,которые предоставляют больше услуг, но за деньги.

Для начала зарегистрируемся на http://ayola.net/, который качественно выполняет свою работу.

Но есть одно НО, которое есть у бесплатных хостингов. У нас будет привязка к доменному имени, т.е. к тому имени, которое мы придумали для нашего сайта. Например: nikellanjilo.xe0.ru . Т.к. я покупал доменное имя, то у меня просто-nikellanjilo.ru
После того,как мы зарегистрировались нам дают логины и пароли для нашего сайта.
Самые главные — пароль и логин от FTP и от СУБД.
По FTP(File Transfer Protocol) мы будем скидывать свой сайт на сервер, т.е. именно те файлы, в которых написана наша кодировка, а в СУБД хранятся все данные, занесенные Вами или пользователями сайта.
Google