Зразок веб-проекту "Конкурс дитячих малюнків"

BestWebIt.biz.ua
Технічне завдання
Виконання елементів




Проект №1. Виконання елементів кодування веб-проекту
"Конкурс дитячих малюнків"

Переглянути шаблон веб-проекту
Переглянути технічне завдання веб-проекту




Проект складається з таких основних елементів:

1. Реєстрація.
2. Сортування за віковими групами.
3. Посилання на деталі конкурсу.
4. Сортування за типом графіки або стилем виконання.
5. Організація голосування представлених робіт.
6. Організувати написання відгуків.
6.1. Створення інформативного блоку на головній сторінці про останні відгуки.
7. Сторінка адмінування веб-проекту.




    1. Реєстрація учасника конкурсу

1. Створити форму для внесення даних учасника.
    (Прізвище*, Імя*, Місто, Клас*, Дата народження*, Позашкільний навчальний заклад Гурток, Керівник, Вибір файлу малюнка для конкурсу)
    Веб-сторінка Реєстрація учасника конкурсу

2. Створення php-обробника форми.
2.1. Виконати перевірку на коректність введених даних.
   (Обовязково мають бути заповнені поля позначені зірочкою. Особлива увага має бути надана для поля форми, що завантажує малюнок,- перевірка завантаження відповідного типу зображення, обєму, довжини імені та іншого)
2.2. За виконання умови коректності введених даних завантажити зображення на сервер.
2.3. Занести дані до Бази Даних.

Окремо розглянуто особливості завантаження зображення на сервер

Згідно завдання конкурсу малюнків, учасник повинен зареєструватись, залишити особисті дані (Імя, Прізвище, Ел.пошта, Клас , Рік народження) та звичайно дані, щодо малюнка (Назва малюнка, Категорія малюнка,...).
    Відповідно логічно було б створити відповідні взаємозвязані таблиці, в даному практичному застосуванні можуть бути:
Перша, "Konkurs", утримує дані по конкурсам малюнків; дані вносить адміністрація проекту з адмін-сторінки
Друга, "User_Competition" описує зареєстрованих учасників,
Третя, "User_pictures" утримує дані щодо малюнків.


Таблиця "Konkurs" з даними учасників може мати вигляд:
konkurs_id konkurs_theme start_date final_date winner_1 winner_2 winner_3
1 Моє літо 01-09-2015 10-10-2015 Міша К. Леся Т. Настя О.
2 --- --- --- --- --- ---

де, konkurs_id - номер конкурсу,
konkurs_theme - тема конкурсу,
start_date,final_date - початок, кінець конкурсу,
winner_1, winner_2, winner_3 - переможці конкурсу 1, 2, 3 місце.

Таблиця "User_Competition" з даними учасників може мати вигляд:

user_id surname name city klass bith_day
1 Петрушко Настя Ужгород 5-Б 12-10-2000
2 --- --- --- --- ---

де, user_id - номер учасника конкурсу,
surname - прізвище учасника,
name - імя учасника,
city - місто учасника,
klass - клас,
bith_day - деньнародження,
e_mail - ел. пошта учасника,
image_id - номер малюнка учасника конкурсу,...

Таблиця "User_pictures" з даними учасників може мати вигляд:

image_id user_id concurs_id img_title image_url count_voice
1 2 1 Моя бабуся .../pictures/d3/7bc863acc50ad3b747c51c2f85b431.jpg 54
2 --- --- --- --- ---

де, image_id - номер малюнка учасника конкурсу,
user_id - номер відповідного учасника,
concurs_id - номер конкурсу,
img_title - назва малюнка,
image_url - адреса малюнка на сервері,
count_voice - кількість голосів, що набрав даний малюнок...




    6. Організувати написання відгуків

    Сторінка відгуків, це звичайний коментар, який залишає відвідувач веб-сайту.
    Тому для організації необхідно:
1. Створити форму внесення відгуків. Форма має поле: "Ім'я" та "Відгук"
2. Варто перевірити форму на коректність введення даних на стороні клієнту, використовуючи javascript.
3. Перевірити дані форми на стороні серверу застосовуючи PHP-кодування.
4. При умові, що дані "Ім'я" та "Відгук" введені коректно вносимо їх в таблицю "Pictures_Coment" Бази Даних (рис.1).
5. Вивести повідомлення коментарів з таблиці "Pictures_Coment" Бази Даних.

Приклад створення сторінки з коментарями розглянуто на сторінці Створення сторінки з коментарями


    Результат виконання вищевказаних пунктів є Сторінка відгуків


Рис.1.


    6.1. Створення інформативного блоку на головній сторінці про останні відгуки

    Вважаю досить зручним елементом на головній сторінці вебсайту є наявність короткої аннотації відгуків відвідувачів. Скажімо нехай це буде 150 символів допису останніх 5-и респондентів.

Реалізація цього елементу відбувається слідуючим чином:
1. З'єднуємось з Базою Даних,
2. Вибираємо повідомлення з таблиці "Pictures_Coment",
3. За допомогою циклу виводимо масив повідомлень, єдине необхідно враховувати що ми виводимо лише 5 повідомлень,
4. За допомогою php-функції substr() залишаємо лише 150 символів повідомлення дописувача.

Приклад php-кодування інформативного блоку на головній сторінці про останні відгуки
1
2 <?php
3 $mysqli =new mysqli("localhost","my_user","my_password","my_db");
4 // Встановлюємо кодування даних - utf8
5 $mysqli->set_charset("utf8");
6
7 // Отримаємо дані з таблиці "Pictures_Coment" Бази Даних
8 $result = $mysqli->query("SELECT `My_Date`,`Name`, `Koment` FROM `Pictures_Coment` ");
9
10 // Виводимо останні 5 повідомлень
11 for ($row_no = $result->num_rows - 1; $row_no >= $result->num_rows - 5; $row_no--)
12 {
13 $result->data_seek($row_no);
14 $row = $result->fetch_assoc();
15 echo '<p><strong>'.$row['My_Date'].'   ' . $row['Name'] .': </strong><em> - ' . substr($row['Koment'],0,150) . '....</em> </p>';
16 }
17
18 $mysqli->close();
19
20 ? >
21



Результатом роботи цієї частини кодування буде щось на зразок таких повідомлень... зразок інформативного блоку відгуків


    7. Сторінка адмінування веб-проекту.

        Cторінка для адміна проекту:
1. Визначає дату проведення конкурсу.
2. Вказує централізовано всі дані по конкурсу.

P.S. Напевно є сенс, якщо це адмін-сторінка, обмежити доступ до даних цієї сторінки.


    По першому пункту Адмін проекту просто вказує дату кінцевого терміну конкурсу, а php-скрипт вираховує різницю між сьогоднішньою датою та кінцевим терміном конкурсу, та результат виводить на сторінку.

    По другому пункту: просто виводиться на веб-сторінку дані з таблиць Бази Даних про конкурсантів.

Приклад Адмін-сторінки


Структура організації адмінування проекту в частині визначення кількості днів до завершення конкурсу.
    Визначення терміну проведення конкурсу може визначатись слідуючим алгоритмом:
1. Визначаємо Дату кінцевого терміну конкурсу.
1.1. Вибір дати буде мати більш ергономічний вид, якщо застосувати javascript, що представляє календарик з якого зручно вибирати кінцеву дату конкурсу.

2. Значення кінцевого терміну вносимо в таблицю "Project_pictures_final_count" Бази Даних.
    Це дасть змогу зберігати значення з яким буде порівнюватись кожен новий день
3. Визначаємо сьогоднішній день, застосував php-функцію DateTime();
4. Визначаємо різницю між кінцевим та сьогоднішнім днем, застосував функцію DateTime::diff
5. Перетворюємо дату в строкові дані за допомогою функції DateTime::format
6. Виводимо отриману різницю дат на сторінку сайту.


так в частині php кодування буде мати вигляд:

1
2 <?php
3 echo "Сьогодні: " . date("Y-m-d") . "<br>";
4 $con = new mysqli("localhost","my_user","my_password","my_db");
5 $result = $con->query("SELECT final_date FROM project_pictures_final_count WHERE Id_date=1");
6 $row = $result->fetch_assoc();
7 $date_limit = date_create($row["final_date"]);
8 printf ("Кінцева дата: %s \n", $row["final_date"]);
9 $datetime = new DateTime();
10
11 $interval = $datetime->diff($date_limit);
12 echo $interval->format('%a');
13 $con->close();
14 ? >
15