XVIII Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
СОЗДАНИЕ WEB-САЙТА КЛАССА КАК ОБРАЗОВАТЕЛЬНОЙ И ИНФОРМАЦИОННОЙ ПЛАТФОРМЫ
Автор работы награжден дипломом победителя III степени
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
Введение
Сегодня Интернет является неотъемлемой частью нашей жизни, так как в течение дня мы обращаемся к большому количеству сайтов для общения и учебы. При этом важное значение имеет «жизнь» самого класса, как сообщества учеников, которое имеет свои информационные и образовательные потребности. Данные потребности можно удовлетворить посредством создания персонального сайта класса.
По нашему мнению, создание персонального сайта для класса является важной практически значимой задачей. Поскольку сайт класса создает уникальный контент, который будет представлять информацию актуальную именно для нашего класса и создавать его памятную историю. Это определяет актуальность проведенного исследования.
Целью исследования является создание Web-сайта класса, который можно использовать для образовательных задач, общения, размещения актуальной информации, новостей и фотографий с защищенным контентом.
Мы хотели создать сайт, который позволит обмениваться информацией внутри нашего класса быстро и легко.
Для достижения цели исследования необходимо решить следующие задачи:
изучить языки программирования и базы данных, выбрать те программные инструменты, которые позволят создать сайт класса;
разработать структуру сайта, определить его учебный и информационный контент;
написать программный код сайта, разместить сайт в Интернете;
протестировать сайт класса и его функции.
Гипотеза исследования заключалась в следующем: изучение языков программирования HTML, CSS, PHP, JavaScript позволяет создать сайт класса.
Предмет исследования – различные языки программирования и базы данных, позволяющие создать индивидуальный Web-сайт класса.
Объект исследования – Web-сайт класса.
Методы исследование включали изучение информационных источников по теме исследования, в том числе видео уроков по созданию сайтов, сравнение различных инструментов Web-программирования, моделирование структуры сайта, конструирование сайта класса на основе языков программирования HTML, CSS, PHP, JavaScript. Информационной базой исследования также выступала литература по программированию.
Работа состоит из введения, двух глав, разделенных на параграфы, в которых представлена краткая характеристика языков программирования и баз данных, представлен сайт класса, его структура и функции, заключения и списка литературы.
Глава 1. Инструменты создания сайта
1.1. Изучение языков программирования и баз данных для создания сайта
В начале реализации проекта мы занялись изучением языков программирования для создания сайтов. Большой интерес в этой области вызвали у нас книги И. Воронина, В. Ворониной и Д. Кристиана [1; 2]. Нами были выбраны следующие наиболее распространенные языки программирования: HTML, CSS, PHP, JavaScript [9].
В ходе исследования было установлено, что для создания сайта класса потребуется применить все эти языки программирования, поскольку каждый из них отвечает за разные функции сайта и представление сайта в сети Интернет.
Например, форма регистрации и авторизации написана на трех языках HTML, CSS И PHP.
Допустим, если использовать только один HTML, то форма регистрации не будет обрабатывать информацию от пользователя и выглядеть красиво, поскольку за стили на странице отвечает CSS.
Изучив языки программирования, мы приступили к написанию самого кода.
Коротко представим содержание проведенной работы на основе данных языков программирования.
HTML – это главный язык всего сайта [4].
Это язык гипертекстовой разметки (аббревиатура HTML расшифровывается как HyperText Markup Language).
Разметка HTML страницы представлена на рисунке 1.
Рис. 1. Разметка HTML страницы сайта
По сути, разметка HTML отвечает за все, что мы видим в определенной последовательности на странице сайта.
Далее применялся язык стилей CSS.
Стили на странице – это некая цветовая гамма, соблюдаемая на странице сайта. Сама аббревиатура расшифровывается как Cascading Style Sheets.
Переводится как каскадные таблицы стилей.
Пример кода CSS с главной страницы нашего сайта представлен на рисунке 2.
Рис. 2. Код CSS с главной страницы сайта класса
Далее мы использовали серверный язык сайта, который позволяет связать клиента и базу данных. Это PHP. Расшифровывается как Hypertext Preprocessor или Препроцессор гипертекста [5].
Например, когда мы вводим данные в форму входа и регистрации на сайте происходит обработка информации через PHP код.
Пример кода PHP, который выводит на экран фразу «Привет, мир!», представлен на рисунке 3.
Рис. 3. Пример кодаPHP
Популярным языком у программистов является JavaScript, сокращенно JS [6]. Он используется почти на всех современных сайтах в роли визуальной части, в том числе и на нашем.
Так, на сайте нашего класса JS код можно увидеть в слайдере, который мы разместили на главной странице сайта (рис. 4).
Рис. 4. Слайдер на главной странице сайта: пример реализации кода JavaScript
Для создания сайта класса также потребовалось обращение к базам данных. В своей работе мы использовали SQL - язык команд для базы данных [7].
Данный язык применялся для выборки, записи, поиска определённой информации в базе данных и определённой таблице.
Например, форма авторизации [8]. При введении данных в форму проверяется, есть ли такая запись в определённой базе данных и таблице. Форма авторизации на сайте класса показана на рисунке 5.
Рис. 5. Форма авторизации на сайте класса
Для хранения информации об авторизации на сайте применялась база данных MySQL, принадлежащая компании Oracle.
Пример SQL команды:
SELECT * FROM `НАЗВАНИЕ ТАБЛИЦЫ`.
ИЛИ
INSERT INTO `НАЗВАНИЕ ТАБЛИЦЫ`(`ПОЛЕ`) VALUES ('ИНФОРМАЦИЯ, ВВОДИМАЯ В ПОЛЕ')
Применяя данные языки программирования и базы данных, мы подготовили основу для будущего сайта класса.
1.2. Фрейморки и их роль в Web-разработке
Для того чтобы Web-сайт класса представлял собой не просто набор отдельных веб-страниц, которые связаны между собой ссылками, но и обладал единым оформлением мы использовали фреймворк Bootstrap 3 [3].
Фреймворк – это набор инструментов для разработки веб-продуктов. Изначально Bootstrap начал разрабатываться как внутренняя библиотека компании Twitter.
Bootstrap известен как свободный набор инструментов для создания сайтов и Web-приложений. Он включает в себя HTML- и CSS шаблоны оформления для различных компонентов Web-интерфейса, включая JavaScript расширения.
Сегодня основными инструментами Bootstrap являются:
Сетки – заранее заданные размеры колонок, которые можно сразу использовать в CSS-описании документа;
Шаблоны документов;
Типографика – описания шрифтов;
Медиа – управление изображениями и видео;
Таблицы – средства оформления таблиц на сайте;
Формы – классы для оформления форм и некоторых событий;
Навигация – классы оформления для панелей, вкладок, перехода по страницам, меню и панели инструментов;
Алерты – оформление диалоговых окон, подсказок и всплывающих окон.
Для сайта нашего класса мы использовали 3-ю версию Bootstrap, которая позволяет создать мобильную версию сайта. В мобильной версии сайт класса выглядит следующим образом (рис. 6):
Рис. 6. Страница мобильной версии сайта класса
Проведенное изучение языков программирования, баз данных и инструментов разработки Web-сайтов позволило создать сайт класса и разместить его в сети Интернет по адресу http://nashclass.ru/
Далее охарактеризуем его структуру и основные функции.
Глава 2. Структура и основные функции сайта класса
Сайт нашего класса размещен в сети Интернет на странице http://nashclass.ru/ и имеет следующую структуру:
О нас;
Новости;
Контакты;
Развлечения.
Основными функциями сайта класса на данный момент являются:
Авторизация пользователей;
Публикация новостей;
AdminPanel (для администраторов);
Чат (для одноклассников);
Математический тренажёр;
Развлечение (генератор пожеланий).
Так, для публикации новостей и фотографий на сайте сделана AdminPanel.
Поскольку не все, кто размещает картинки и новости на страницы сайта, знают язык HTML, необходимо было создать Админ Панель, используя специальные функции которой, можно создавать и удалять новости, добавлять картинки и применять стили.
Фотография Админ Панели размещена на рисунке 7.
Рис. 7. Админ Панель сайта класса
Обратимся к чату, который является очень удобной функцией сайта, поскольку когда решаешь школьные вопросы, можно отказаться от разных мессенджеров.
Чат имеет возможность отображать аватары, изменять ник в чате, обмениваться ссылками и в будущем голосовыми сообщениями.
Учебные функции на сайте класса пока выполняет только математический тренажёр, позволяющий зарегистрированному пользователю сайта накапливать SemyonDollar.
Решение одного примера обеспечивает получение одного SemyonDollar. При этом один SemyonCoin равен ста SemyonDollar. На что же можно его потратить SemyonCoin?
Например, накопив один SemyonCoin, можно разблокировать поля или сменить ник в чате.
Математический тренажер приведен на рисунке 8.
Рис. 8. Математический тренажер сайта класса
В качестве развлечений на сайте также создан генератор Пожеланий.
В заключение необходимо упомянуть о безопасности сайта. Наш сайт защищён от разного рода взлома. Если используемый пользователь браузер говорит, что сайт не защищён, это не критично, поскольку на сайте используются фильтры, защищающие его от SQL инъекций.
В перспективе мы планируем оформить сертификат безопасности, который не является бесплатным, а также совершенствовать сайт и его мобильную версию.
Заключение
Исследование посвящено созданию Web-сайта класса как образовательной и информационной платформы.
В настоящее время многие образовательные учреждения (детские сады, школы, университеты) имеют собственные Web-сайты, которые знакомят пользователей Интернета с их деятельностью, выполняют различные образовательные и информационные функции. Однако персональные сайты внутри образовательных сообществ не получили широкого распространения, поскольку создание сайта – это трудоемкий и сложный процесс.
Как мы выяснили из опроса одноклассников, персональный сайт класса был бы полезен школьному сообществу для представления актуальной информации, создания памятной истории класса, развития математических и творческих способностей учащихся. Поэтому мы решили создать сайт, который позволит обмениваться информацией внутри нашего класса быстро и легко.
Как показало проведенное исследование для создания сайта класса потребовалось изучить языки программирования html, css, php, JavaScript, язык команд для создания базы данных SQL, а также применить базу данных MySQL и фреймворк Bootstrap 3. Данные инструменты использовались для написания программного кода сайта.
Сайт был размещен в сети Интернет на странице http://nashclass.ru/
Его структура включает: Главная страница 4 В класса; О нас; Новости; Контакты; Развлечения.
В данный момент сайт класса выполняет следующие основные функции: 1) авторизация пользователей; 2) Публикация новостей; 3) AdminPanel (для администраторов); 4) Чат (для одноклассников); 5) Математический тренажёр; 6) Развлечение (генератор пожеланий).
Для обеспечения безопасности нашего сайта мы использовали встроенные фильтры, которые защищают его от SQL инъекций.
Полученные результаты свидетельствуют о достижении цели исследования.
Список использованных источников и литературы
Воронин И., Воронина В. программирование для детей. От основ к созданию роботов. СПб.: Питер, 2018 – 192 с.
Кристиан Д. Думай как программист. М.: РОСМЭН, 2019 – 144 с.
Bootstrap. Официальный сайт. URL: https://bootstrap-ru.com/303/getting-started/
HTMLBOOK. Официальный сайт. URL: http://htmlbook.ru/
PHP. Официальный сайт. URL: https://www.php.net/
SLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. Подключение и настройка слайдера. URL: https://www.youtube.com/watch?v=rXNfDfqtM3M
STACKOVERFLOW. Официальный сайт. URL: https://stackoverflow.com/
Авторизация и регистрация с сессией на чистом PHP. Видео лекция. URL: https://www.youtube.com/watch?v=eCItZh6uMVc
Онлайн-школа IT профессий. Официальный сайт. URL: https://itproger.com/