4. Реалізація проекту Структура:

• Style.css – файл з каскадними таблицями стилів

• Config.php – з’єднання з базою даних

• Index.php – файл з формою для занесення даних в базу

• ok.php – файл з повідомленням про занесення в даних в базу

• jquery.jmessages.js – скрипт для виведення повідомлень на екран

• message.css – стилі повідомлень

• SQL_Dump.sql – дамп SQL БД

<?php

mysql_connect("localhost","root","");

mysql_select_db("krr");

?>

Config.php

В данному файлі відбувається зєднання з базою даних, перевірка логіну, паролю та назви бази до якої приєднуємося.

Далі ми включаємо даний файл в index.php, для того, щоб форма мала доступ до бази даних.

<?php

include ("config.php");

?>

Після чого ми підключаємо файл стилів:

<link href="style.css" rel="stylesheet" type="text/css">

Далі ми створюємо секцію, де буде знаходитися сама форма, після чого в секції створюємо форму де вказуємо всі необхідні параметри, далі обявляємо блок полів, після чого вказуємо легенду(назву).

<section id="addinfo" class="addinfo" >

<form id="oblik" name="oblik" method="post" action="index.php?action=addinfo">

<fieldset>

<legend><h3>Облік транспортний засобів</h3></legend>

…

…

<table>

<tr>

<td>

<label for="transport">Транспортний засіб</label>

</td>

<td>

<input name="trans_zasib" type="text">

</td>

</tr>

…

Далі для розташування полів введення даних, ми створюємо таблицю, де розташовуємо назву поля та саме поле, для певного типу даних.

…

<input type="date" name="tech_look">

…

Щоб створити зручне поле для введення дати тех.огляду використовуємо тип дати для поля введення.

…

<select name="kategory">

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

</select>

…

В даному прикладі показано створення випадаючого списку з вибором відповідного поля.

…

</fieldset>

<tr>

<td colspan=2 align="center">

<input class="btn" type="submit" value="Відправити">

</td>

</tr>

</table>

…

Далі закриваємо блок для полів, і створюємо останній рядок таблиці, де розташовуємо кнопку, яка виконує функцію відправлення даних.

…

<?php

if ($action == 'addinfo'){

$trans_zasib = htmlspecialchars($trans_zasib);

$kategory = htmlspecialchars($kategory);

$tech_look = htmlspecialchars($tech_look);

$owner = htmlspecialchars($owner);

$patrol = htmlspecialchars($patrol);

$model = htmlspecialchars($model);

…

Потім відкриваємо блок для PHP коду, де перевіряємо, яку дію треба виконати, переводимо дані отримані з форми, для подальшого запису їх в базу даних.

if(strlen($trans_zasib) <= 3 || strlen($kategory) == 0 || strlen($tech_look) <= 3 || strlen($name) <= 2 || strlen($surname) <= 2 || strlen($owner) == 0 || strlen($patrol) == 0 || strlen($model) == 0)

{

$error = 1;

}

Перевірка правильності заповнення полів, у випадку помилку змінній «error» буде присвоєно значення «1».

…

if($error == 0)

{

mysql_query(" insert into users (trans_zasib, kategory, tech_look, name, surname, owner, patrol, model, color) values('$trans_zaisb', '$kategory', '$tech_look', '$name', '$surname', '$owner', '$patrol', '$model', '$color')");

print "<META http-equiv=refresh content=0.1;URL=ok.php>";

}

…

Далі створюється SQL запит, який добавляє дані в базу, після чого відбувається переадресація на сторінку з повідомленням про успішне додання даних в базу.

jQuery(function(){

$('#trans_zasib').blur(function(){

$('#trans_zasib').removeClass();

var Lngth = $('#trans_zasib').val().length;

if(Lngth <= 3){

$('#trans_zasib').addClass('notValid');

$.jmessage('Помилка', 'Мінімальна кількість символів <b>3</b>, вами було введено <b>' + Lngth, 3000, 'jm_message_error');

} else {

$('#trans_zasib').addClass('valid');

} }); });

В даному коді відбувається перевірка на наповненість полів форми, у видпадку помилку, буде виведено повідомлення з відповідним змістом і поле змінить рамку.

var timetogo = 7;

var timer = window.setInterval(function()

{

var str = timetogo;

$('#counter').text(str);

if (timetogo <= 0)

{

window.clearInterval(timer);

}

timetogo--;

}, 1000);

Таймер, який показує користувачеві час через який його буде переадресовано на головну сторінку додатку.