Размещено на http://www.allbest.ru/

Содержание

Введение

1. Обзор технологий для создания веб-приложения

1.1 PHP

1.2 Python

1.3 JavaScript

1.4 Ruby

1.5 AJAX

1.6 CSS

1.7 HTML

2. Техническое задание

2.1 Общее положение

2.2 Требование к дизайну веб-приложения

2.3 Требования к структуре веб-приложения

2.4 Требования к представлению веб-приложения

2.5 Требования к языкам программирования

3. Техническое описание веб-приложения

3.1 Архитектура веб-приложения

3.2 Особенности использованных веб-технологий

3.3 Описание интерфейса веб-приложения

3.4 Технические требования

Заключение

Список использованных источников

Приложения

Введение

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

В данной курсовой работе для написания серверной части будет использован язык программирования PHP, для создания клиентской части будут использованы HTML и CSS, база данных будет основана на MySQL.

Цель курсовой работы: разработка и размещение на хостинге веб-приложения.

Курсовая работа включает следующие задания:

- разработка технического задания;

- разработка веб-приложения;

- размещение веб-приложения на хостинге.

1. Обзор технологий для создания веб-приложения

1.1 PHP

PHP - Скриптовый язык, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

В 1994 году датский программист Расмус Лердорф создал набор скриптов на Perl/CGI для вывода и учёта посетителей его онлайн-резюме, обрабатывающий шаблоны HTML-документов. Лердорф назвал набор Personal Home Page (Личная Домашняя Страница). Вскоре функциональности и быстроты Perl - интерпретатора скриптов - перестало хватать, и Лердорф разработал с использованием языка C новый интерпретатор шаблонов PHP/FI. 8 июня 1995 года, вышел Personal Home Page (PHP Tools) version 1.0 - первый публичный релиз.

В 1997 году после длительного бета-тестирования вышла вторая версия обработчика, написанного на C - PHP/FI 2.0. Её использовали около 1 % (приблизительно 50 тысяч) всех интернет-доменов мира.

Версия PHP 3.0 подверглась значительной переработке, определившей современный облик и стиль языка программирования. В 1997 году два израильских программиста, Энди Гутманс и Зеев Сураски, полностью переписали код интерпретатора. PHP 3.0 был официально выпущен в июне 1998 года.

В 2014 году было проведено голосование, по результатам которого новая версия получила название PHP 7. Выход новой версии планировался в середине октября 2015 года. В марте 2015 года разработчики представили инфографику, в которой описаны основные нововведения PHP 7. 3 декабря 2015 года было объявлено о выходе PHP версии 7.0.0.

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

Популярность в области построения веб-сайтов определяется наличием большого набора встроенных средств для разработки веб-приложений. Основные из них: автоматическое извлечение POST и GET-параметров, взаимодействие с большим количеством различных систем управления базами данных, автоматизированная отправка HTTP-заголовков, работа с HTTP-авторизацией, работа с cookies и сессиями, работа с локальными и удалёнными файлами.

Синтаксис PHP подобен синтаксису языка Си. Для работы программы не требуется описывать какие-либо переменные, используемые модули и т. п.

1.2 Python

Высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода. Синтаксис ядра Python минималистичен. В то же время стандартная библиотека включает большой объём полезных функций.

Разработка языка Python была начата в конце 1980-х годов сотрудником голландского института CWI Гвидо ван Россумом. Для распределённой ОС Amoeba требовался расширяемый скриптовый язык, и Гвидо начал писать Python на досуге, позаимствовав некоторые наработки для языка ABC. В феврале 1991 года Гвидо опубликовал исходный текст в группе новостей. С самого начала Python проектировался как объектно-ориентированный язык.

Наличие дружелюбного, отзывчивого сообщества пользователей считается наряду с дизайнерской интуицией Гвидо одним из факторов успеха Python. Развитие языка происходит согласно чётко регламентированному процессу создания, обсуждения, отбора и реализации документов PEP - предложений по развитию Python.

Python поддерживает несколько парадигм программирования, в том числе структурное, объектно-ориентированное, функциональное, императивное и аспектно-ориентированное. Основные архитектурные черты - динамическая типизация, автоматическое управление памятью, полная интроспекция, механизм обработки исключений, поддержка многопоточных вычислений и удобные высокоуровневые структуры данных. Код в Python организовывается в функции и классы, которые могут объединяться в модули (они в свою очередь могут быть объединены в пакеты).

Количество прикладных библиотек для Python в самых разных областях без преувеличения огромно (веб, базы данных, обработка изображений, обработка текста, численные методы, приложения операционной системы и т. д.). Для Python написано много ORM (SQLObject, SQLAlchemy, Dejavu, Django), выполнены программные каркасы для разработки веб-приложений (Django, Pylons, Pyramid).

1.3 JavaScript

Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.

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

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам - функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания - что придаёт языку дополнительную гибкость.

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

- объекты с возможностью интроспекции;

- функции как объекты первого класса;

- автоматическое приведение типов;

- автоматическая сборка мусора;

- анонимные функции.

В языке отсутствуют такие полезные вещи, как:

- стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода-вывода, базовых типов для бинарных данных;

- стандартные интерфейсы к веб-серверам и базам данных;

- система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.

JavaScript используется в клиентской части веб-приложений: клиент-серверных программ, в котором клиентом является браузер, а сервером - веб-сервер, имеющих распределённую между сервером и клиентом логику. Обмен информацией в веб-приложениях происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются кроссплатформенными сервисами.

1.4 Ruby

Динамический, рефлективный, интерпретируемый высокоуровневый язык программирования. Язык обладает независимой от операционной системы реализацией многопоточности, сильной динамической типизацией, сборщиком мусора и многими другими возможностями. По особенностям синтаксиса он близок к языкам Perl l, по объектно-ориентированному подходу. Кроссплатформенная реализация интерпретатора языка является полностью свободной.

Ruby начал разрабатываться 23 февраля 1993 года и вышел в свет в 1995 году. Целью разработки было создание "настоящего объектно-ориентированного", лёгкого в разработке, интерпретируемого языка программирования.

В Японии Ruby стал популярным с момента появления первой общедоступной версии в 1995 году, однако наличие документации только на японском языке сдерживало его дальнейшее распространение. Лишь в 1997 году появилось описание Ruby на английском языке, а в 1998 году открылся форум "ruby-talk". Это положило начало росту известности языка в остальном мире. Издано несколько книг на различных языках, в том числе на русском. Сейчас Ruby входит в большинство дистрибутивов ОС Linux, поставляется вместе с Mac OS X, доступен пользователям других операционных систем.

Мацумото мечтал о языке, более мощном, чем Perl, и более объектно-ориентированном, чем Python. Основное назначение Ruby - создание простых и в то же время понятных программ, где важна не скорость работы программы, а малое время разработки, понятность и простота синтаксиса.

1.5 AJAX

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

Принцип работы AJAX:

- пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент;

- скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы;

- браузер отправляет соответствующий запрос на сервер;

- сервер возвращает только ту часть документа, на которую пришёл запрос;

- скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).

AJAX - не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:

- использование технологии динамического обращения к серверу "на лету", без перезагрузки всей страницы полностью, например с использованием XMLHttpRequest (основной объект);

- использование DHTML для динамического изменения содержания страницы;

Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS, обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных. CSS, DOM и JavaScript - составляют DHTML (англ. Dynamic HTML).

В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML.

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта "Новый подход к веб-приложениям". Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе "Remote Scripting", предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

1.6 CSS

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

CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web". В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, и стандарт CSS.

В начале 1990-х различные браузеры имели свои стили для отображения веб-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.

Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML

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

Правила CSS пишутся на формальном языке CSS. Правила могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих формат CSS. Формат CSS - это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS объявленные для элементов-предков, почти всегда, наследуются элементами-потомками.

Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.

1.7 HTML

Стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986--1991 годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов - дескрипторов. Дескрипторы также часто называют "тегами". С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

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

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы.

2. Техническое задание

2.1 Общее положение

Разработать веб-приложение для вывода краткой сводки новостей и возможностью добавления комментариев зарегистрированными пользователями. Сайт должен быть на русском языке, должен быть адаптирован под основные браузеры и устройства. В веб-приложении должны быть реализованы три вида пользователей: незарегистрированный пользователь, зарегистрированный пользователь, администратор.

2.2 Требование к дизайну веб-приложения

Дизайн сайта должен быть неброским, минималистичным, в нейтральных тонах, должны использоваться тени. Сайт должен корректно отображаться в браузерах Google Chrome, Microsoft Internet Explorer, Microsoft Edge, Mozilla Firefox современных версий.

Мокап страницы авторизации представлен на рисунке 1.

Рисунок 1 - Мокап страницы авторизации

Мокап главной страницы представлен на рисунке 2.

Рисунок 2 - Мокап главной страницы

2.3 Требования к структуре веб-приложения

Веб-приложение должно состоять из трёх компонентов:

- клиентская часть HTML и CSS);

- серверная часть (PHP);

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

Структура сайта представлена на рисунке 3.

Рисунок 3 - Структура сайта

2.4 Требования к представлению веб-приложения

На сайте должны быть реализованы четыре страницы:

- главная страница должна содержать блоки с новостями и комментариями к этим новостям, должна быть реализована функция оставления комментариев;

- на странице авторизации должны присутствовать 2 поля ввода (логин и пароль);

- на странице регистрации должны присутствовать 3 поля ввода (логин, пароль, повтор пароля). Логин должен являться индивидуальным для каждого пользователя;

- панель администратора должна иметь функции добавления, удаления и редактирования новостей.

2.5 Требования к языкам программирования

Для реализации серверной части рассматриваемого веб-приложения должен быть использован язык программирования PHP. С помощью PHP должны быть написаны все функции получения и передачи информации из базы данных.

Для реализации клиентской части должны быть использованы HTML и CSS.

3. Техническое описание веб-приложения

3.1 Архитектура веб-приложения

Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию "клиент-сервер".

Клиентская часть реализует пользовательский интерфейс (с помощью HTML и CSS), формирует запросы к серверу и выводит ответы от него.

Серверная часть (реализована на PHP) получает запрос от клиента, выполняет необходимые вычисления, используя базу данных (MySQL) и передаёт данные клиентской части для вывода.

3.2 Особенности использованных веб-технологий

Для облегчения авторизации пользователя были использованы cookie. При авторизации в первый раз данные сохраняются в cookie на месяц. Если пользователь решит выйти, но cookie удаляются.

if(isset($_POST['inputButton'])) {

$login = $_POST['login'];

$user = $mysqli->query("SELECT * FROM `users` WHERE `login` = '$login'");

$user = $user->fetch_assoc();

if ($user != NULL) {

if ($user['password'] == md5($_POST['password'])) {

setcookie("login", $_POST['login'], time()+60*60*24*30);

setcookie("password", md5($_POST['password']), time()+60*60*24*30);

header('Location: https://app-1539175628.000webhostapp.com');

} else {

$errorTrue = 1;

}

} else {

$errorTrue = 1;

}

}

if(isset($_POST['outButton'])) {

$userTrue = 0;

$adminTrue = 0;

setcookie("login", FALSE);

setcookie("password", FALSE);

setcookie("admin", FALSE);

$numberOfFirstNews = $_POST['numberOfFirstNews'];

}

Код авторизации приведёт далее.

if(isset($_POST['inputButton'])) {

$login = $_POST['login'];

$user = $mysqli->query("SELECT * FROM `users` WHERE `login` = '$login'");

$user = $user->fetch_assoc();

if ($user != NULL) {

if ($user['password'] == md5($_POST['password'])) {

setcookie("login", $_POST['login'], time()+60*60*24*30);

setcookie("password", md5($_POST['password']), time()+60*60*24*30);

header('Location: https://app-1539175628.000webhostapp.com');

} else {

$errorTrue = 1;

}

} else {

$errorTrue = 1;

}

}

Форма авторизации приведена на рисунке 4.

Рисунок 4 - Форма авторизации

Регистрация пользователя происходит путём внесения данный в базу MySQL. В таблицу с пользователями входят поля id, логин и пароль. Данные, отправленные со станицы пользователем, проверяются на уникальность логина и совпадение паролей. Если данные не проходят проверку, то выводится сообщение об ошибке. Код регистрации представлен далее.

$errorTrue = "";

if(isset($_POST['registationButton'])){

$login = $_POST['login'];

$user = $mysqli->query("SELECT * FROM `users` WHERE `login` = '$login'");

$user = $user->fetch_assoc();

if ($user != NULL) {

$errorTrue = "login";

} elseif ($_POST['password1'] != $_POST['password2']) {

$errorTrue = "password";

} else {

$login = $_POST['login'];

$password = md5($_POST['password1']);

$mysqli->query("INSERT INTO `users` (`login`, `password`, `admin`) VALUES ('$login', '$password', 0);");

header('Location: https://app-1539175628.000webhostapp.com/input.php');

exit;

}

}

if($errorTrue == "login"){

echo '<div class="inputReport">Логин уже используется</div>';

} elseif ($errorTrue == "password") {

echo '<div class="inputReport">Пароли не совпадают</div>';

}

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

$i = 1;

$news = $mysqli->query("SELECT * FROM `news` ORDER BY `id` DESC LIMIT $numberOfFirstNews, $newsCount");

while (($row = $news->fetch_assoc()) != false) {

echo '<div class="newsBlock">';

echo '<img src="image/'.$row['img_link'].'" alt="Картинка новости">';

echo '<div class="information">';

echo '<h2>'.$row['title'].'</h2>';

echo '<p>'.$row['information'].'</p>';

echo '</div>';

echo '<input class="check" type="radio" id="check'.$i.'" name="checkButton">';

echo '<div class="openCommentsButton">';

echo '<label class="labelForCheck" for="check'.$i.'">Комметарии<br><img src="SyteImg/commentButton.png" alt="\/"></label>';

echo '</div>';

echo '<div class="comments">';

$newsCountInBase = $mysqli->query("SELECT COUNT(*) FROM `news`");

$newsCountInBase = $newsCountInBase->fetch_assoc()['COUNT(*)'];

if ($numberOfFirstNews + 10 < $newsCountInBase) {

echo '<div class="nextNews">';

echo '<form method="POST">';

echo '<input type="submit" name="nextNews" value="Ещё новости">';

echo '<input type="hidden" name="numberOfFirstNews" value="'.$numberOfFirstNews.'">';

echo '</form>';

echo '</div>';

}

?>

if(isset($_POST['messageButton'])) {

if ($_POST['message'] == "" || preg_match('/^[ ]+$/ui', $_POST['message'])){

} else {

$message = $_POST['message'];

$newsId = $_POST['newsId'];

$user = $_COOKIE['login'];

$mysqli->query("INSERT INTO `comments` (`newsID`, `user`, `comment`) VALUES ('$newsId', '$user', '$message');");

$numberOfFirstNews = $_POST['numberOfFirstNews'];

}

}

Так же в блок с новостями выводятся комментарии, если они есть, и блок отправки комментариев. Если пользователь имеет статус администратора, то имеется возможность удалять комментарии. Блок комментариев представлен на рисунке 5. Код используется для работы с комментариями старице приведён далее.

$comments = $mysqli->query("SELECT * FROM `comments`");

while (($commentsRow = $comments->fetch_assoc()) != false) {

if ($commentsRow['newsID'] == $row['id']) {

echo '<div class="commentsList">';

$comments = $mysqli->query("SELECT * FROM `comments`");

while (($commentsRow = $comments->fetch_assoc()) != false) {

if($commentsRow['newsID'] == $row['id']) {

echo '<h4>'.$commentsRow['user'].'</h4>';

echo '<p>'.$commentsRow['comment'].'</p>';

if ($adminTrue == 1) {

echo '<form method="POST">';

echo '<input class="deleteButton" type="submit" value="X" name="deleteButton">';

echo '<input type="hidden" name="idOfBadComment" value="'.$commentsRow['id'].'">';

echo '<input type="hidden" name="numberOfFirstNews" value="'.$numberOfFirstNews.'">';

echo '</form>';

}

echo '<hr>';

}

}

echo '</div>';

}

}

if ($userTrue == 1) {

echo '<div class="message">';

echo '<form method="POST">';

echo '<textarea name="message"></textarea>';

echo '<input type="submit" name="messageButton" value="Отправить">';

echo '<input type="hidden" name="newsId" value="'.$row['id'].'">';

echo '<input type="hidden" name="numberOfFirstNews" value="'.$numberOfFirstNews.'">';

echo '</form>';

echo '</div>';

} else {

echo '<div class="commentsError"><a href="input.php">Войдите</a> или <a href="registration.php">зарегистрируйтесь</a> или войдите, чтобы оставлять комментарии</div>';

}

echo '</div>';

echo '</div>';

$i++;

}

if(isset($_POST['messageButton'])) {

if ($_POST['message'] == "" || preg_match('/^[ ]+$/ui', $_POST['message'])){

} else {

$message = $_POST['message'];

$newsId = $_POST['newsId'];

$user = $_COOKIE['login'];

$mysqli->query("INSERT INTO `comments` (`newsID`, `user`, `comment`) VALUES ('$newsId', '$user', '$message');");

$numberOfFirstNews = $_POST['numberOfFirstNews'];

}

}



Рисунок 5 - Блок комментариев

При нажатии на кнопку "комментарии" происходит открытие блока комментариев данной новости и закрытие другого, если он открыт. Это осуществлено при помощи тегов input типа radio и label и CSS правил. Изначально блок с комментариями скрыт, но при нажатии на radio используется CSS правило, которое говорит о том, что, если radio отпечен как cheсked, то блок с комментариями меняет свои свойства и открывается. CSS код приведён далее

.comments {

margin-top: 10px;

width: 640px;

left: -9999px;

position: absolute;

top: -9999px;

opacity: 0;

}

#check1:checked ~ .comments,

#check2:checked ~ .comments,

#check3:checked ~ .comments,

#check4:checked ~ .comments,

#check5:checked ~ .comments,

#check6:checked ~ .comments,

#check7:checked ~ .comments,

#check8:checked ~ .comments,

#check9:checked ~ .comments,

#check10:checked ~ .comments{

left: 0;

opacity: 1;

position: relative;

top: 0px;

}

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

if(isset($_POST["addButton"])) {

$title = $_POST["title"];

$imgLink = $_POST["imgLink"];

$information = $_POST["information"];

$mysqli->query("INSERT INTO `news` (`title`, `img_link`, `information`) VALUES ('$title', '$imgLink', '$information');");

}

if(isset($_POST["changeButton"])) {

$selectedID = $_POST['selectedIdForNews'];

$title = $_POST["title"];

$imgLink = $_POST["imgLink"];

$information = $_POST["information"];

$mysqli->query("UPDATE `news` SET `title` = '$title', `img_link` = '$imgLink', `information` = '$information' WHERE `news`.`id` = $selectedID;");

header('Location: admin.php');

}

if(isset($_POST["deleteButton"])) {

$selectedID = $_POST['selectedIdForNews'];

$mysqli->query("DELETE FROM `news` WHERE `id` = $selectedID");

$news = $mysqli->query("SELECT * FROM `news`");

$mysqli->query("DELETE FROM `comments` WHERE `newsID` = $selectedID");

}

Все страницы веб-приложения прошли проверку на соблюдение стандартов HTML на сайте validator.w3.org. Результат проверки одной из страниц представлен на рисунке 6.

Рисунок 6 - Результат проверки на стандарты HTML

Также все страницы прошли проверку на соблюдение стандартов CSS на сайте jigsaw.w3.org/css-validator. Результат проверки одной из страниц представлен на рисунке 7.

Рисунок 7 - Результат проверки на стандарты CSS

3.3 Описание интерфейса веб-приложения

На главной странице сайта пользователю предоставлены возможности ознакомления с новостями и перехода на страницу входа. Если пользователь авторизован, то имеется возможность оставлять комментарии. Для администраторов отображается ссылка на панель администратора. Главная страница представлена на рисунке

На страницах авторизации и регистрации имеются поля ввода данных и кнопка для передачи этих данных на сервер. Страницы представлены на рисунках

Страница администратора содержит две кладка:

- вкладка "Добавить" служит для добавления новостей (рисунок 8);

Рисунок 8 - Вкладка "Добавить" на панели администратора

- вкладка "Изменить удалить" предназначена для удаления новостей и их редактирования (рисунок 9).



Рисунок 9 - Вкладка "Изменить/Удалить" на панели администратора

3.4 Технические требования

Веб-приложение аналогично (за исключением некоторых незначительных деталей) отображается в современных версиях браузеров Google Chrome, Microsoft Internet Explorer, Edge, Mozilla Firefox. Отображения сайта в браузерах представлены на рисунках

Главная страница сайта имеет два варианта отображения:

- для дисплеев шире 850 пикселей. Рисунок представлен далее;

Рисунок 10 - Главная страница при ширине более 850px

- для дисплеев уже 850 пикселей. Рисунок представлен далее.

Рисунок 11 - Главная страница при ширине менее 850px

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

Рисунок 12 - Старица регистрации

Созданное веб-приложение выложено на бесплатный хостинг 000webhost. Адрес веб-приложения: app-1539175628.000webhostapp.com

Заключение

В данной курсовой работе было разработано веб-приложение для вывода краткой сводки новостей. Во время реализации сайта были изучены и использованы следующие языки и технологии: HTML, CSS, PHP, MySQL.

Выбор пал на PHP и MySQL из-за их доступности и лёгкости освоения. На стороне клиента использованы HTML и CSS.

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

Список использованных источников

1. Выпускная квалификационная работа. Общие требования и правила оформления: метод. пособие. / В.Н. Гопкало, О.А. Графский. - Хабаровск: Изд-во ДВГУПС, 2014. - 44 с.: ил.

2. Учебник по PHP [электронный ресурс]. - php.net

3. Роббинс Д. Web-дизайн. Справочник. - КУДИЦ-ПРЕСС: 2009. - 816 с.

4. Учебник по HTML [электронный ресурс]. - htmlbook.net

5. Курсы по HTML [электронный ресурс]. - htmladacemy.ru

6. Смирнова И.Е. Начала web-дизайна. -Петербург: 2010. - 491 с.

7. Учебник по CSS [электронный ресурс]. - htmlbook.net/css

8. Учебник по MySQL [электронный ресурс]. - webmasterwiki.ru/mysql

9. Хенник Б. HTML и CSS Путь к совершенству. - СПБ.: Питер, 2011 -336 с.

10. Самоучитель по PHP [электронный ресурс]. - php-s.ru

Приложение А.

(обязательное)

HTML и PHP код главной страницы

<?php

$mysqli = new mysqli ("localhost", "root", "1596321", "news_police");

$mysqli->query("SET NAMES 'utf8'");

$userTrue = 0;

$adminTrue = 0;

if (isset($_COOKIE['login']) && isset($_COOKIE['password'])) {

$login = $_COOKIE['login'];

$user = $mysqli->query("SELECT * FROM `users` WHERE `login` = '$login'");

$user = $user->fetch_assoc();

if ($user != NULL) {

if ($user['password'] == $_COOKIE['password']) {

$userTrue = 1;

if ($user['admin'] == 1) {

$adminTrue = 1;

}

}

}

}

$numberOfFirstNews = 0;

$newsCount = 10;

if(isset($_POST['nextNews'])) {

$numberOfFirstNews = $_POST['numberOfFirstNews'] + 10;

}

if (isset($_POST['deleteButton'])) {

$idOfBadComment = $_POST['idOfBadComment'];

$mysqli->query("DELETE FROM `comments` WHERE `id` = $idOfBadComment");

$numberOfFirstNews = $_POST['numberOfFirstNews'];

}

if(isset($_POST['outButton'])) {

$userTrue = 0;

$adminTrue = 0;

setcookie("login", FALSE);

setcookie("password", FALSE);

setcookie("admin", FALSE);

$numberOfFirstNews = $_POST['numberOfFirstNews'];

}

if(isset($_POST['messageButton'])) {

if ($_POST['message'] == "" || preg_match('/^[ ]+$/ui', $_POST['message'])){

} else {

$message = $_POST['message'];

$newsId = $_POST['newsId'];

$user = $_COOKIE['login'];

$mysqli->query("INSERT INTO `comments` (`newsID`, `user`, `comment`) VALUES ('$newsId', '$user', '$message');");

$numberOfFirstNews = $_POST['numberOfFirstNews'];

}

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Main page</title>

<link rel="stylesheet" href="Style/input.css">

<link rel="stylesheet" href="Style/index.css">

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

</head>

<body>

<div class="header">

<div class="logo">

<a href=""><img src="SyteImg/logo.png" alt="Лого"></a>

</div>

<?php

$users = $mysqli->query("SELECT * FROM `users`");

if ($userTrue == 1) {

if ($adminTrue == 1) {

echo '<a href="admin.php">Панель администратора</a>';

}

echo '<div class="userInfoBlock">';

echo '<h3>'.$_COOKIE['login'].'</h3>';

echo '<form method="post">';

echo '<input name="outButton" type="submit" value="Выйти">';

echo '<input type="hidden" name="numberOfFirstNews" value="'.$numberOfFirstNews.'">';

echo '</form>';

echo '</div>';

} else {

echo '<div class="userInfoBlock">';

echo '<a href="input.php">Вход</a>';

echo '</div>';

}

?>

</div>

<div class="news">

<?php

$i = 1;

$news = $mysqli->query("SELECT * FROM `news` ORDER BY `id` DESC LIMIT $numberOfFirstNews, $newsCount");

while (($row = $news->fetch_assoc()) != false) {

echo '<div class="newsBlock">';

echo '<img src="image/'.$row['img_link'].'" alt="Картинка новости">';

echo '<div class="information">';

echo '<h2>'.$row['title'].'</h2>';

echo '<p>'.$row['information'].'</p>';

echo '</div>';

echo '<input class="check" type="radio" id="check'.$i.'" name="checkButton">';

echo '<div class="openCommentsButton">';

echo '<label class="labelForCheck" for="check'.$i.'">Комметарии<br><img src="SyteImg/commentButton.png" alt="\/"></label>';

echo '</div>';

echo '<div class="comments">';

$comments = $mysqli->query("SELECT * FROM `comments`");

while (($commentsRow = $comments->fetch_assoc()) != false) {

if ($commentsRow['newsID'] == $row['id']) {

echo '<div class="commentsList">';

$comments = $mysqli->query("SELECT * FROM `comments`");

while (($commentsRow = $comments->fetch_assoc()) != false) {

if($commentsRow['newsID'] == $row['id']) {

echo '<h4>'.$commentsRow['user'].'</h4>';

echo '<p>'.$commentsRow['comment'].'</p>';

if ($adminTrue == 1) {

echo '<form method="POST">';

echo '<input class="deleteButton" type="submit" value="X" name="deleteButton">';

echo '<input type="hidden" name="idOfBadComment" value="'.$commentsRow['id'].'">';

echo '<input type="hidden" name="numberOfFirstNews" value="'.$numberOfFirstNews.'">';

echo '</form>';

}

echo '<hr>';

}

}

echo '</div>';

}

}

if ($userTrue == 1) {

echo '<div class="message">';

echo '<form method="POST">';

echo '<textarea name="message"></textarea>';

echo '<input type="submit" name="messageButton" value="Отправить">';

echo '<input type="hidden" name="newsId" value="'.$row['id'].'">';

echo '<input type="hidden" name="numberOfFirstNews" value="'.$numberOfFirstNews.'">';

echo '</form>';

echo '</div>';

} else {

echo '<div class="commentsError"><a href="input.php">Войдите</a> или <a href="registration.php">зарегистрируйтесь</a> или войдите, чтобы оставлять комментарии</div>';

}

echo '</div>';

echo '</div>';

$i++;

}

$newsCountInBase = $mysqli->query("SELECT COUNT(*) FROM `news`");

$newsCountInBase = $newsCountInBase->fetch_assoc()['COUNT(*)'];

if ($numberOfFirstNews + 10 < $newsCountInBase) {

echo '<div class="nextNews">';

echo '<form method="POST">';

echo '<input type="submit" name="nextNews" value="Ещё новости">';

echo '<input type="hidden" name="numberOfFirstNews" value="'.$numberOfFirstNews.'">';

echo '</form>';

echo '</div>';

}

?>

</div>

<div class="footer">

</div>

</body>

</html>

Приложение Б.

(обязательное)

HTML и PHP код страницы авторизации

<?php

$mysqli = new mysqli ("localhost", "root", "1596321", "news_police");

$mysqli->query("SET NAMES 'utf8'");

$errorTrue = 0;

if(isset($_POST['inputButton'])) {

$login = $_POST['login'];

$user = $mysqli->query("SELECT * FROM `users` WHERE `login` = '$login'");

$user = $user->fetch_assoc();

if ($user != NULL) {

if ($user['password'] == md5($_POST['password'])) {

setcookie("login", $_POST['login'], time()+60*60*24*30);

setcookie("password", md5($_POST['password']), time()+60*60*24*30);

header('Location: https://app-1539175628.000webhostapp.com');

} else {

$errorTrue = 1;

}

} else {

$errorTrue = 1;

}

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset="UTF-8">

<title>Вход</title>

<link rel="stylesheet" href="Style/input.css">

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

</head>

<body>

<div class="logoForInput">

<div class="logo">

<a href="https://app-1539175628.000webhostapp.com"><img src="SyteImg/logo.png" alt="Лого"></a>

</div>

</div>

<h1>Вход</h1>

<form method="POST">

<input class="inputField" type="text" name="login" placeholder="Логин"><br>

<input class="inputField" type="password" name="password" placeholder="Пароль"><br>

<input class="inputButton" type="submit" name="inputButton" value="Войти"><br>

</form>

<p>У вас нет аккаунта? <a href="registration.php">Зарегистрируйтесь</a>.</p>

<?php

if($errorTrue == 1) {

echo '<div class="inputReport">Логин или пароль не соответствуют</div>';

}

?>

</body>

</html>

Приложение В.

(обязательное)

HTML и PHP код страницы администратора

<?php

$mysqli = new mysqli ("localhost", "root", "1596321", "news_police");

$mysqli->query("SET NAMES 'utf8'");

if (isset($_COOKIE['login']) && isset($_COOKIE['password'])) {

$login = $_COOKIE['login'];

$user = $mysqli->query("SELECT * FROM `users` WHERE `login` = '$login'");

$user = $user->fetch_assoc();

if ($user != NULL) {

if ($user['password'] == $_COOKIE['password'] && $user['admin'] == 1) {

} else {

header('Location: https://app-1539175628.000webhostapp.com');

exit();

}

} else {

header('Location: https://app-1539175628.000webhostapp.com');

exit();

}

} else {

header('Location: https://app-1539175628.000webhostapp.com');

exit();

}

$news = $mysqli->query("SELECT * FROM `news`");

$selectedNews = $mysqli->query("SELECT * FROM `news` WHERE `id` = (SELECT MIN(`id`) FROM `news`)");

$selectedNews = $selectedNews->fetch_assoc();

if(isset($_POST["addButton"])) {

$title = $_POST["title"];

$imgLink = $_POST["imgLink"];

$information = $_POST["information"];

$mysqli->query("INSERT INTO `news` (`title`, `img_link`, `information`) VALUES ('$title', '$imgLink', '$information');");

}

if(isset($_POST["changeButton"])) {

$selectedID = $_POST['selectedIdForNews'];

$title = $_POST["title"];

$imgLink = $_POST["imgLink"];

$information = $_POST["information"];

$mysqli->query("UPDATE `news` SET `title` = '$title', `img_link` = '$imgLink', `information` = '$information' WHERE `news`.`id` = $selectedID;");

header('Location: admin.php');

}

if(isset($_POST["deleteButton"])) {

$selectedID = $_POST['selectedIdForNews'];

$mysqli->query("DELETE FROM `news` WHERE `id` = $selectedID");

$news = $mysqli->query("SELECT * FROM `news`");

$mysqli->query("DELETE FROM `comments` WHERE `newsID` = $selectedID");

}

if (isset($_POST['selectButton'])) {

$selectedID = $_POST['selectedIdForNews'];

$selectedNews = $mysqli->query("SELECT * FROM `news` WHERE `id` = $selectedID");

$selectedNews = $selectedNews->fetch_assoc();

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Admin</title>

<link rel="stylesheet" href="Style/admin.css">

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

</head>

<body>

<div class="logo">

<a href="https://app-1539175628.000webhostapp.com"><img src="SyteImg/logo.png" alt="Лого"></a>

</div>

<div class="tabbed">

<input type="radio" id="tabLabel1" name="radiobutton"/>

<label for="tabLabel1">Добавить</label>

<input type="radio" id="tabLabel2" name="radiobutton" checked/>

<label for="tabLabel2">Изменить/Удалить</label>

<div class="tabs">

<div>

<form method="post">

<input type="text" name="title" placeholder="Заголовок"><br>

<input type="text" name="imgLink" placeholder="Адрес файла"><br>

<textarea name="information" placeholder="Информация" rows="10" cols="50"></textarea><br>

<input type="submit" name="addButton" value="Добавить">

</form>

</div>

<div>

<form action="" method="post">

<?php

echo '<select name="selectedIdForNews">';

while (($row = $news->fetch_assoc()) != false) {

echo '<option value="'.$row["id"].'"';

if ($row['title'] == $selectedNews['title']) {

echo ' selected>';

} else {

echo '>';

}

echo $row["title"].'</option>';

}

echo '</select>';

echo '<input type="submit" name="selectButton" value="Выбрать"><br>';

echo'<input type="text" name="title" value="'.$selectedNews['title'].'"><br>';

echo'<input type="text" name="imgLink" value="'.$selectedNews['img_link'].'"><br>';

echo'<textarea name="information" rows="10" cols="50">'.$selectedNews['information'].'</textarea>';

?>

<br>

<input type="submit" name="changeButton" value="Изменить">

<input type="submit" name="deleteButton" value="Удалить">

</form>

</div>

</div>

</div>

</body>

</html>

Размещено на Allbest.ru