Отчет практики 1с

Оглавление
Введение ........................................................................................................................... 3
1 Современные тенденции развития веб-технологий ................................................. 4
2 Разработка информационных систем с использованием веб-технологий ............. 9
2.1 Проектирование и разработка веб-интерфейса (klient-side) с использованием
HTML и CSS в соответствии с техническим заданием ............................................ 9
2.2 Проектирование и разработка серверной части управления контентом
(server-side) с использованием PHP и MySQL ........................................................ 24
3 Тестирование разработанных приложений ............................................................. 34
Заключение .................................................................................................................... 39
Литература ..................................................................................................................... 40
Изм. Лист
УП.09.02.04.161б.02
№ Документа
Разработа Бажитова К.С.
Рамазанова
л
Проверил
Ю.А.
Подпись
Дат
а
Лит.
ОТЧЕТ
ПО УЧЕБНОЙ ПРАКТИКЕ
Лист
2
Листов
ГАПОУ АПТ
40
Введение
Учебная практика является составляющей частью профессионального
модуля ПМ.02 «Участие в разработке информационных систем», реализуется
образовательным учреждением концентрированно в течение одной недели на
третьем курсе.
Целями учебной практики являются:

закрепление теоретических знаний, полученных при изучении
базовых дисциплин;

развитие и накопление специальных навыков, изучение и участие в
разработке организационно-методических и нормативных документов для
решения отдельных задачах по месту прохождения практики;

усвоение приемов, методов, способов обработки и представления
информации;

приобретение практических навыков в будущей профессиональной
деятельности или в отдельных ее разделах.
Задачи учебной практики:

закрепить знания и умения, приобретаемые в результате освоения
теоретических курсов;

выработать практические навыки и способствовать комплексному
формированию общих и профессиональных компетенций обучающихся в рамках
профессионального модуля ПМ.02 «Участие в разработке информационных
систем».
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
3
1 Современные тенденции развития веб-технологий
Как
известно,
разработка
любого
Интернет-проекта
начинается
с
проработки пользовательского интерфейса – что и как должно быть представлено
на экране, должны ли присутствовать аудио-видео или просто анимационные
эффекты, какие технологии применить.
Системы дистанционного обучения, а особенно Web-ориентированные
системы (WBTS, Web-Based Training System), все больше и больше привлекают
внимание как коммерческих компаний, вузов, так и рядовых разработчиков.
Однако до сих пор существует только несколько систем (их можно буквально
посчитать на пальцах), в основу которых легли современные технологии
разработки веб-сайтов.
Ошибочно говорить, что начинать разработку WBTS надо начинать с
HTML. Да, это было допустимо в 1995-1998 гг., но не сейчас. Дело в том, что
начиная с 1999 года, компания по Интернет-стандартизации W3C (www.w3c.org)
приняла новый стандарт хранения и структуризации информации – XML.
Технология XML, главным образом, предназначена для обмена информацией
между неоднородными компьютерными системами, а также может быть
использована для создания открытых баз данных.
В том же году была также принята на вооружение технология XSL, которая
позволяет трансформировать XML-документы в другие типы через шаблонные
описания. Итак, благодаря XSL можно, например, вытащить какие-то данные из
XML-базы данных и трансформировать в HTML-поток для пользовательского
браузера, в WML – для WAP-устройств, в PDF-документы и т.п.
Таким
образом,
наиболее
гибких
вариантом
разработки
шаблонов
представления информации будет создание шаблонов на языке XSL, а не на
HTML. Кроме того, XSL в отличие от HTML позволяет разделить данные и
функциональный скелет. Изменяя данные, исчезает вероятность нарушить
работоспособность системы в целом.
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
4
На веб-сайте W3C также можно найти информацию о такой весьма
полезной технологии, как RDF (Resource Description Framework). В кратце, RDF –
это оболочка описания ресурсов, хранящихся на веб-сайте. Ее цель заключается в
способствовании обмену машиночитаемой информацией между Web-системами.
Стандарт RDF предназначен в основном для автоматизированных систем поиска
информации. Дело в том, что существующие поисковые системы, как правило,
ориентируются на полнотекстовый поиск, а также на так называемые
неинтеллектуальные агенты (unintelligent agents). Находя RDF-файл на целевом
ресурсе, “поисковик” извлекает информацию о нем из предопределенных полей
этого метафайла (“заголовок”, “автор”, “описание”, “издательство” и т.п.). Всего в
RDF-набор, так называемое Дублинское ядро (Dublin Metadata Core Element Set),
входит 13 элементов: Title, Subject, Author, Publisher, OtherAgent, Date,
ObjectType, Form, Identifier, Relation, Source, Language и Coverage.
Что касается графической стороны вопроса, то в настоящее время
укоренилась технология Flash для разработки оригинальных графических
пользовательских интерфейсов с элементами анимации, видео и звука. На Flash
можно
создавать
полноценные
игровые
приложения
и,
соответственно,
относительно просто учебные материалы для СДО. В это средство разработки
встроена поддержка языка ActionScript, который по своему синтаксису сильно
напоминает JavaScript, а кроме того он поддерживает работу с XML. Однако для
большинства пользователей российской части Интернет Flash-ролики пока
остаются головной болью при ожидании их загрузки.
На сайте консорциума W3C имеется информация о технологии SVG
(Scaleable Vector Graphics), над которой работают несколько крупных всемирно
известных компаний (Adobe, Corel, IBM, Microsoft и др.). Данная технология
обещает быть открытой, и она предназначена для отображения векторной
графики. Это весьма интересный проект, поскольку данные, на основе которых в
браузере пользователя строится некоторый графический объект, представляются в
формате XML. Во Flash для генерации роликов применяется механизм Flash
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
5
Generator, который является весьма дорогим и, кроме того, медленным ПО. XMLфайлы для SVG-проигрывателя (он, как и Flash-проигрыватель, поставляется как
подключаемый модуль, plug-in, для браузеров) довольно быстро по сравнению с
Flash можно загружать из Интернет. Кроме того, на SVG можно реализовать
многие графические Flash-эффекты. Однако в SVG отсутствует возможность
встраивать звук и воспроизводить его синхронно с проигрыванием какой-то
определенной графической анимационной композиции.
Системы программирования для реализации проекта могут отбираться по
весьма разным критериям. Это может быть и бюджет компании-разработчика, и
опыт работы программистов с тем или иным средством разработки, да и просто
корпоративная политика в отношении средств разработки проектов. Однако
лучше и правильнее было бы использовать какие-то определенные языки в
зависимости от поставленных задач, целей проекта, его бюджета и опыта
реального применения того или иного средства разработки программистами.
Например, если требуется, чтобы система работала на разнородных
платформах, как Unix, Windows, Macintosh, OS/2, то необходимо применить
какой-то кросс-платформенный язык программирования, как C++, Java, Perl, PHP
или Python. Если времени на кросс-платформенный проект недостаточно,
разработчики компании имеют малый опыт программирования на C++ и Java, но
имели опыт программирования на JavaScript или Perl, то можно обратиться за
помощью к PHP (именно в такую ситуацию попала наша компания при
разработке web-проекта Sundown).
Как уже было сказано выше: “Правильные средства разработки – для
правильных задач!” Таким образом, с появлением XML обычные базы данных
никто не отменяет. Однако что делать, если необходимо синхронизировать
данные нескольких гетерогенных баз данных? В данном случае поможет создание
XML-представления данных, которое будет общим для всех источников данных,
будь то MSSQL, Informix, InterBase или MySQL с Postgres. На W3C также
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
6
появилась спецификация на новый язык запросов – XQL (eXtended Query
Language) – XML-аналог SQL.
В последние несколько лет никаких кардинальных изменений на рынке вебсерверов не случилось. В Интернет продолжают доминировать коммерческий
Microsoft Internet Information Server и свободно распространяемый Apache. С
появлением X-технологий (XML, XSL/XSLT, XQL) разработчики веб-серверов
стали стараться встраивать их поддержку в свои продукты (msxml, msxsl). Кроме
того, сторонние разработчики также предлагают свои решения для обработки
XML-файлов (XSL – это тоже XML-файл), которые можно подключать к
существующим веб-серверам. Наиболее популярными на данный момент
являются такие процессоры, как Xalan, Saxon, Cocoone. Их разработчики
стараются наиболее полно поддерживать стандарты обрабатываемых ресурсов.
Тенденция разработки сайтов с плоским дизайном была актуальна ранее и
продолжает такой оставаться. Основная причина использования плоского дизайна
с точки зрения разработчиков: легкость и простота использования сайта. Плоский
дизайн помогает веб-разработчикам уделить больше внимания цветовой гамме,
содержанию
и
использованию
свободного
пространства.
Эта
тенденция
прослеживается на многих популярных веб-ресурсах.
Популярность стандартизации в дизайне сайтов привела к тому, что многие
ресурсы мало чем отличаются друг от друга. Реализация на сайте уникального
пользовательского опыта позволяет ресурсу стать более привлекательным и
запоминающимся для аудитории.
Длинный скроллинг — это появление отдельных элементов страниц только
по требованию. Популярность связана с ростом посещаемости сайтов с
мобильных устройств.
Но несмотря на популярность она не всегда удобна в использовании.
Иногда отсутствует синхронность между скролом мыши и изменением контента,
что вызывает неудобства для пользователя.
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
7
Тенденция не новая, но весьма важная. Пользователь не готов бесконечно
ждать пока загрузится страница Вашего сайта, особенно если речь идет о
просмотре ресурса на мобильном устройстве. Многие разработчики в погоне за
уменьшением веса страниц уже начали использовать все возможности CSS3
вместо более тяжелого JavaScript.
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
8
2
Разработка
информационных
систем
с
использованием
веб-
технологий
2.1 Проектирование и разработка веб-интерфейса (klient-side) с
использованием HTML и CSS в соответствии с техническим заданием
Эволюционирование в сфере веб-разработок происходит очень быстро в
сравнении с другими научно-техническими отраслями. Всего за несколько лет
примитивные
статичные
веб-странички,
написанные
на
"голом"
html,
превратились в сложнейшие, многофункциональные, интегрированные с другими
приложениями веб-системы. У компаний появилась возможность "переместить" в
интернет-среду множество бизнес-процессов. Современные компании создают
уже не один, а множество сайтов, направленных на решение различных задач.
В последнее время все больше компаний стали осознавать, что сайт - это не
просто электронная визитка или онлайн-каталог, а удобный и очень эффективный
бизнес-инструмент.
Но,
эффективным,
сайт
становится
лишь
в
случае
качественной разработки и грамотного продвижения.
А между тем, несмотря на то, что дизайн и структура сайта очень важны,
существуют и другие важные критерии оценки сайта.
Качественный сайт - должен не только отвечать всем современным
техническим требованиям и пожеланиям целевой аудитории, но и учитывать
внутренние и внешние факторы ранжирования (критерии качества сайта с точки
зрения поисковых систем).
Основные критерии оценки качества современного сайта.
Для того, чтобы создать качественный, современный и эффективный сайт
необходимо:
1. Разработать эффективный и привлекательный дизайн, соответствующий
всем ожиданиям целевой аудитории и выдержанный в фирменном стиле
компании. Если сайт выглядит хорошо, то посетители считают, что и компания
должна хорошо работать;
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
9
2. Тщательно продумать "юзабилити" (структура, удобство пользования
сайтом). Красивого дизайна недостаточно! Нужно, чтобы каждая страница сайта
максимально соответствовала пожеланиям посетителя сайта, чтобы все элементы
страницы были расположены в самых удобных местах, чтобы информация на
сайте читалась легко, а навигация по сайту и поиск - были интуитивно понятными
и простыми. Посетитель за минимальное количество времени должен получать то,
что он хотел получить от сайта. В идеале, он должен сразу делать заказ на сайте
или другое необходимое целевое действие;
3. Использовать современные методы разработки сайта. В настоящее время
разработку сайта необходимо вести в среде HTML5, с использованием CSS3, и
современных платных (1C-Битрикс, UMI) или бесплатных (MODx Revo, DRUPAL
7.x, WORDPRESS 3.5) систем управления контентом (CMS);
4. Настроить автоматическую трансформацию (адаптивность) сайта под
любые мобильные устройства (телефоны, смартфоны, планшеты и пр.). Эта
процедура, с недавнего времени, из разряда желательных - переходит в разряд
обязательных. В 2012 году в России доля мобильного трафика составила более
20% (по данным Liveinternet.ru), т.е. пятую часть всей аудитории интернета! И
число "мобильных" интернет-пользователей будет очень быстро расти в
ближайшие годы.
В данном проекте сделаны многие моменты для улучшения качества работы
сайта и доступности пользователям.
Сделана шапка сайта:
<div class="panel panel-group panel-default">
<div class="panel-body">
<h2>Сервис записи на сеанс в кинотеатре.</h2>
</div>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav ">
<li><a href="film.php">Все сеансы</a></li>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
10
<li><a href="appointment.php">Бронирование</a></li>
<li><a href="main.php">Мои сеансы</a></li>
</ul>
</nav>
</div>
Рисунок 2.1 – Шапка сайта
Она содержит в себе все необходимые ссылки для навигации пользователя.
Сделаны предупреждения об ошибок ввода, при авторизации:
<?php
ini_set('display_errors','On');
error_reporting('E_ALL');
require 'script/getAjax.php';
if(isset($_POST['inSystem'])){
if(count(querySql("SELECT * From users WHERE login='".$_POST['login']."'
and password='".$_POST['pass']."'"))!=null){
if($_POST['login'] ="admin"){
header('Refresh: 1; admin.php');
exit();}
header('Refresh: 1; main.php');
exit();
}else{
echo "<div class='warning'><h6>Вы ввели неверный логин или пароль.<br>
Пожалуйста, проверьте ещё раз введенные данные</h6></div>";
}
}
?>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
11
Рисунок 2.2 – Ошибка при авторизации
В файле style.css описаны стили для формы регистрации и авторизации с
классом authDiv, шапки с классом header, блока с ошибкой с классом warn,
подвала с классом footer, так же для каждого элемента ввода input присвоены
классы text и send. Все объекты на страницы заключены внутри блока с классом
container:
input
{
width:120px;
border:1px solid #e4e4e4;
margin:15px 0 0 12px;
}
.text
{
width:150px;
height:30px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#3f3f3f;
float:left;
padding-top:30px;
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
12
padding-left:10px
}
.text1
{
width:250px;
height:30px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#3f3f3f;
float:right;
padding-top:30px;
padding-left:200px
}
#container {
background-color:#FFFFFF;
color:#303030;
margin:0;
padding-left:20px;
padding-top:20px;
text-align:left;
width:480px;
}
#mainmenu {
float:left;
margin-bottom:25px;
}
#mainmenu ul {
font-size:16px;
margin:0;
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
13
padding:0;
}
#mainmenu li {
float:left;
height:60px;
list-style:none;
margin:0;
padding:0;
}
#mainmenu a {
color:#606060;
display:block;
font-size:20px;
padding:50px 20px 10px;
width:65px;
text-align:center
}
#mainmenu a:hover {
background:#f0f0f0;
color:#505050;
text-decoration:none;
}
#mainmenu a.current {
background:#f0f0f0;
color:#505050;
text-decoration:none;
}
.leftmenu
{
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
14
margin:0px;
padding:0px;
}
.leftmenu ul
{
margin:0px;
padding:0px;
}
.leftmenu ul li
{
width:180px;
height:25px;
float:left;
list-style-type:none;
margin-top:5px
}
.leftmenu ul li a
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:blue;
text-decoration:none;
vertical-align:top;
width:170px;
line-height:25px;
padding-left:15px;
float:center;
display:block;
}
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
15
.leftmenu ul li a:hover
{
background-color:#999999;
width:150px;
color:#000000
}
.footerlinks
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
color:#000;
}
#bg {
background: url('images/bg.jpg') top left repeat-x;
}
#inline {
margin-left: 30px;
margin: 0 auto;
background: #fff;
padding: 5px 20px;
}
.txt {
display: inline-block;
color: #676767;
width: 750px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px 9px;
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
16
font-size: 15px!important;
line-height: 1.4em;
}
.txtarea {
display: inline-block;
color: #676767;
width:750px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px 9px;
font-size: 15px!important;
line-height: 1.4em;
height: 80px;
}
.txt:focus, .txtarea:focus {
border-style: solid;
border-color: #bababa;
color: #444;
}
input.error, textarea.error {
border-color: #973d3d;
border-style: solid;
background: #f0bebe;
color: #a35959;
}
input.error:focus, textarea.error:focus {
border-color: #973d3d;
color: #a35959;
}
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
17
#send {
color: #FFFFFF;
display: block;
cursor: pointer;
padding: 5px 11px;
font-size: 1.2em;
border: solid 1px #F9F9F9;
border-radius: 2px;
background: #70C6B9;
width: 210px;
margin-bottom: 20px;
}
#send:hover {
background: #979797;
}
#form {
border: 1px solid grey;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
position: relative;
}
label {
display: inline-block;
margin-left: 20px;
margin-bottom: 7px;
font-size: 14px;
font-weight: bold;
position: relative;
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
18
width: 100px;
}
.regbutton {
width:auto;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}
.regbutton:hover{
background:#358DE5;
}
.regbutton:focus{
outline:none;
}
#number {
position: relative;
top: -20px;
}
.menu, .picinput {
width: 150px;
}
.menu:invalid + span:after {
content: '\2718';
color: red;
margin-left: 7px;
}
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
19
.menu:valid + span:after {
content: '\2714';
color: green;
margin-left: 7px;
}
.button {
width: 100%;
text-align: center;
background: lightgrey;
border-radius: 5px;
padding: 10px 0;
}
.qwe {
border: 1px solid green;
width: 180px;
border-radius: 50px;
background: linear-gradient(to bottom, green, lightgreen, green);
line-height: 2em;
margin: 0;
font-weight: normal;
}
#button {
display: none;
}
#form label:nth-of-type(3n) {
margin-bottom: 30px;
}
Реализованы все предупреждения при регистрации:
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
20
<?php
ini_set('display_errors','On');
error_reporting('E_ALL');
require 'script/connect.php';
if (isset($_POST['reg'])){
$surname = trim($_POST['firstname']);
$name = trim($_POST['name']);
$fathername = trim($_POST['lastname']);
$email = trim($_POST['email']);
$login = trim($_POST['login']);
$password = trim($_POST['pass']);
$rpassword = trim($_POST['repass']);
$res=mysqli_query($link,"SELECT
*
From
users
WHERE
login='".$_POST['login']."'");
$row =mysqli_fetch_array($res);
if(empty($row['id'])){
if($password==$rpassword){
mysqli_query($link,
"INSERT
INTO
(firstname,name,lastname,email,login,password)
users
VALUES
('$surname','$name','$fathername', '$email', '$login','$password')");
$message = "Поздравляем с успешной регистрацией!";
}
else{
$message = "Пароли не совпадают.<br> Попробуйте еще раз.";
}
}else{
$message = "Данный логин уже зарегистрирован.<br> Попробуйте еще
раз.</div>";
}}
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
21
?>
<div id="authDiv" class="panel panel-default container">
<div class="panel-body">
<h2 class="text-center" >Регистрация</h2>
<h4 class="text-center" style="color:red;"><?php echo $message; ?></h4>
<form method="post" autocomplete="on">
<div class="form-group">
<label for="firstname">Введите фамилию:</label><br>
<input type="text" class="form-control" name="firstname" id="firstname"
pattern="[а-яА-ЯёЁ]+"
required
title="Можно
использовать
только
кириллицу"><br>
</div>
<div class="form-group">
<label for="name">Введите имя:</label><br>
<input type="text" class="form-control" name="name" id="name" pattern="[аяА-ЯёЁ]+" required title="Можно использовать только кириллицу"><br>
</div>
<div class="form-group">
<label for="lastname">Введите отчество:</label><br>
<input type="text"
pattern="[а-яА-ЯёЁ]+"
class="form-control" name="lastname" id="lastname"
required
title="Можно
использовать
только
кириллицу"><br>
</div>
<div class="form-group">
<label for="email">Введите e-mail:</label><br>
<input
type="email"
class="form-control"
name="email"
id="email"
required><br>
</div>
<div class="form-group">
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
22
<label for="login">Придумайте логин:</label><br>
<input type="text" class="form-control" name="login" id="login" required><br>
</div>
<div class="form-group">
<label for="pass">Придумайте пароль:</label><br>
<input
type="password"
class="form-control"
name="pass"
id="pass"
required><br>
</div>
<div class="form-group">
<label for="repass">Повторите пароль:</label><br>
<input type="password"
class="form-control" name="repass" id="repass"
required><br>
</div>
<input
name="reg"
type="submit"
class="btn
btn-primary"
value="Зарегистрироваться">
<a href="index.php"> <input name="inSystem" type="button" class="btn btnprimary" value="Войти"></a>
</form>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
23
Рисунок 2.3 – Предупреждение при регистрации
2.2 Проектирование и разработка серверной части управления
контентом (server-side) с использованием PHP и MySQL
Рисунок 2.4 – Схема данных
В базе данных существуют 4 таблицы users, zapis, film, seans.
Таблица users сделан для хранения информации о пользователях, имеет 8
полей: id – код пользователя, тип данных int(10), firstname – фамилия
пользователя, тип данных varchar(50), name – имя пользователя, тип данных
varchar(50), lastname – отчество пользователя, тип данных тип данных varchar(50),
email – email пользователя, тип данных тип данных varchar(50), login – логин
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
24
пользователя, тип данных тип данных varchar(50), password – пароль
пользователя, тип данных тип данных varchar(50), role – роль пользователя, тип
данных тип данных varchar(50).
Таблица film сделан для хранения информации о фильмах, имеет 5 полей: id
– код фильма, тип данных int(10), nsmr – Название фильма, тип данных
varchar(150), id_ seans – код сеанса, тип данных int(10), t_start – начало сеанса, тип
данных тип данных varchar(50), t_end – конец сеанса, тип данных тип данных
time.
Таблица seans сделан для хранения информации о сеансах, имеет 2 поля: id
– код сеанса, тип данных int(10), name– название сеанса, тип данных varchar(50).
Таблица zapis сделан для хранения информации о сеансах, имеет 4 поля: id –
код записи, тип данных int(10), id_user– код пользователя, тип данных int(10),
id_film– код фильма, тип данных int(10), time– время записи, тип данных time.
Скрипт авторизации на сайте выглядит следующим образом:
<?php
ini_set('display_errors','On');
error_reporting('E_ALL');
require 'script/getAjax.php';
if(isset($_POST['inSystem'])){
if(count(querySql("SELECT * From users WHERE login='".$_POST['login']."'
and password='".$_POST['pass']."'"))!=null){
header('Refresh: 1; main.php');
exit();
}else{
echo "<div class='warning'><h6>Вы ввели неверный логин или пароль.<br>
Пожалуйста, проверьте ещё раз введенные данные</h6></div>";
}}?>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
25
Рисунок 2.5 – Форма авторизации
От пользователя требуется ввести логин и пароль, после чего происходит
сравнение введенных данных с данными с бд, если находится совпадение
пользователи с ролью user входят на сайт, а администратор с ролью admin
попадает на панель администратора.
Запись данных в базу ведется следующим образом:
<?php…
$surname = trim($_POST['firstname']);
$name = trim($_POST['name']);
$fathername = trim($_POST['lastname']);
$email = trim($_POST['email']);
$login = trim($_POST['login']);
$password = trim($_POST['pass']);
$rpassword = trim($_POST['repass']);
mysqli_query($link,
"INSERT
INTO
(firstname,name,lastname,email,login,password)
users
VALUES
('$surname','$name','$fathername', '$email', '$login','$password')");…?>
Все введенные пользователем данные присваиваются переменным, после
чего пишется строка подключения к бд, и при помощи запроса sql данные
отправляются в базу данных.
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
26
Вывод информации о фильмах, их сеансах и времени.
Запрос на MySQL:
SELECT * FROM seans, films WHERE films.id_ seans =seans.id
Код вывода на HTML и PHP:
<table class="table table-bordered" id="allOrder">
<thead>
<tr>
<th>Фильм</th>
<th>Описание</th>
<th>Время сеанса</th>
</tr>
</thead>
<tbody>
<?php
require 'script/connect.php';
$query="SELECT * FROM seans, film WHERE film.id_ seans =seans.id";
$res = mysqli_query($link,$query);
while($row=mysqli_fetch_assoc($res)){
echo "<tr>";
echo "<td>{$row['name']}</td>";
echo "<td>{$row[opis]}</td>";
echo "<td>{$row['t_start']} - {$row['t_end']}</td>";
echo "</tr>";
}
mysqli_close($link);
?>
</tbody></table>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
27
Рисунок 2.6 – Результат запроса
Вывод записей пользователей.
Запрос на MySQL:
SELECT seans.name, film. opis, zapis.time, users.name as me FROM
seans, film, zapis, users WHERE film.id_ seans =seans.id AND zapis.id_film=film.id
AND zapis.id_user=users.id
Код вывода на HTML и PHP:
<table class="table table-bordered" id="allOrder">
<thead>
<tr>
<th>Фильм</th>
<th>Описание</th>
<th>Время сеанса</th>
</tr>
</thead>
<tbody>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
28
<?php
require 'script/connect.php';
$query="SELECT seans.name, film. opis, zapis.time, users.name as me FROM
seans, film, zapis, users WHERE film.id_ seans = seans.id AND zapis.id_ film = film.id
AND zapis.id_user=users.id";
$res = mysqli_query($link,$query);
while($row=mysqli_fetch_assoc($res)){
echo "<tr>";
echo "<td>{$row['name']}</td>";
echo "<td>{$row[seans]}</td>";
echo "<td>{$row['time']}</td>";
echo "</tr>";
}
mysqli_close($link);
?>
</tbody>
</table>
Рисунок 2.7 – Результат запроса
Вывод записей фильмов.
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
29
Запрос на MySQL:
SELECT seans.name, film.opis, zapis.time, users.name as me FROM
seans, film, zapis, users WHERE film.id_ seans =seans.id AND zapis.id_ film =seans.id
Код вывода на HTML и PHP:
<table class="table table-bordered" id="allOrder">
<thead>
<tr>
<th>Сеанс</th>
<th>Фильм</th>
<th>Время</th>
</tr>
</thead>
<tbody>
<?php
require 'script/connect.php';
mysqli_query($link,
('
DELETE
FROM
zapis
WHERE
zapis.id
=
"'.$_GET['id'].'" ')) //Удаление записи
or die( mysqli_error());
$query="SELECT zapis.id as idz, seans.name, film.opis, zapis.time, users.name
as me FROM seans, film, zapis, users WHERE film.id_ seans =seans.id AND zapis.id_
film =seans.id AND zapis.id_user=users.id";
$res = mysqli_query($link,$query);
while($row=mysqli_fetch_assoc($res)){
echo "<tr>";
echo "<td>{$row['name']}</td>";
echo "<td>{$row[opis]}</td>";
echo "<td>{$row['time']}</td>";
echo "<td><a href='admin.php?id={$row['idz']}'>Удалить</a></td>";
echo "</tr>";
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
30
}
mysqli_close($link);
?>
</tbody>
</table>
Рисунок 2.8 – Результат запроса
Удаление записи сеансов.
Запрос на MySQL:
DELETE FROM zapis WHERE zapis.id=GET[‘id’].
Код запроса на PHP:
<?php
//Удаление пользователя
mysqli_query($query, (' DELETE FROM users WHERE id = "'.$_GET['id'].'"
'));
?>
Добавление сеанса.
Запрос на MySQL:
INSERT
INTO
seans
(seans,id_sc,t_start,t_end)
VALUES
('$seaans,'$id_sc,'$start, '$end).
Код запроса на PHP:
<?php
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
31
require 'script/connect.php';
if(isset($_POST['save'])){
$ opis О= trim($_POST[opis]);
$id_seans = trim($_POST[seans]);
$t_start = trim($_POST['t_start']);
$t_end = trim($_POST['t_end']);
$reg=mysqli_query($link, "INSERT INTO seans (seans, id_ seans, t_start, t_end)
VALUES ('$seans,'$id_sc','$t_start', '$t_end')");
}?>
<div class="panel panel-group panel-default">
<div class="panel-body">
<form method = "post"><p style = "text-align: right">
<table border = "2" width = "100%">
<td>
<label for="first_name">Описание:</label><br>
<input type="text"
class="form-control" name=" opis " id="first_name"
required><br>
<label for="service">Фильм:</label><br>
<?php
$sql = 'SELECT * FROM film;
$res = mysqli_query($link,$sql);
echo "<select width = 100% class='form-control' name = seans >";
while($row=mysqli_fetch_assoc($res)){
echo "<option value = $row[id]> $row[name] </option>";
}
echo "</select>";
?> <br>
<label for="first_name">Начало сеанса:</label><br>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
32
<input type="time"
class="form-control" name="t_start" id="t_start" value =
required><br>
<label for="first_name">Конец сеанса:</label><br>
<input
type="time"
class="form-control"
name="t_end"
id="t_end"
required><br>
</td>
</table>
<input align = "right" type="submit" name ="save" id="save" class="btn btnsuccess" value="Добавить" >
</form>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
33
3 Тестирование разработанных приложений
Тестирование, как завершающий этап разработки веб-сайта, играет
жизненно важную роль в процессе создания качественного программного
обеспечения. Чем сложнее сайт, тем больше времени требуется на его проверку и
отладку.
Для организации тестирования веб-сайта предусмотрена специально
разработанная методика, согласно которой и осуществляется проверка.
Функциональное
тестирование —
наиболее
продолжительный
этап
проверки ресурса. Суть этого процесса заключается в проверке всего описанного
функционала:
 Проверки работы всех обязательных функций сайта;
 Тестирования работоспособности пользовательских форм на сайте;
 Проверки гиперссылок, поиск нерабочих ссылок;
 Просмотр на соответствие содержимого страниц сайта исходному
контенту.
Тестирования верстки — при проверке верстки первым делом проверяется
расположения элементов, соответствие их позиций предоставленным макетам, а
так же проверяет оптимизацию изображений и графики. Далее осуществляется
проверка валидности кода. В процессе вёрстки важно соблюдать корректную
иерархию объектов, и важно удостовериться в её валидности по факту
завершения
работ.
Завершив
проверку
на
валидность,
проверяется
кроссбраузерность, т.е. проверяется работоспособность сайта в различных
браузерах, а так же при различных параметрах настройки экрана.
Usability тестирование — проводится для оценки удобства продукта в
использовании,
основанный
на
привлечении
пользователей в
качестве
тестировщиков и анализ полученных результатов.
Тестирование безопасности — На данной стадии тестирования проверяется
— нет ли у пользователей доступа к служебным/закрытым страницам а так же
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
34
проводит проверку защиты всех критически важных страниц от внешнего
воздействия.
Тестирование
производительности
сайта —
проводится
с
целью
определения быстродействия сайта или его части под определённой нагрузкой.
Тестирование производительности включает в себя такие виды тестирования:
Нагрузочное
тестирование — простейшая
форма
тестирования
производительности. Нагрузочное тестирование обычно проводится для того,
чтобы оценить поведение сайта под заданной ожидаемой нагрузкой. Этой
нагрузкой
может
быть,
например,
ожидаемое
количество
одновременно
работающих пользователей на сайте, совершающих заданное число транзакций за
интервал времени. Такой тип тестирования обычно позволяет получить время
отклика всех самых важных бизнес-функций.
Тестирование быстродействия — проверка скорости загрузки сайта для
определения скорости отработки скриптов, загрузки изображений и контента.
Этот тест проводится с целью оптимизации процесса загрузки сайта, а так же
определения оптимальности настроек сервера.
Качество готового сайта во многом зависит от небольших деталей и потому,
к примеру, соответствию верстки кода сайта определенным стандартам уделяется
значительное внимание. А если учесть, что поисковые системы оценивают
правильность верстки сайта как один из достаточно важных факторов
ранжирования, то становится ясно, что такая процедура, как проверка на
валидность кода - это для любого сайта не роскошь, а необходимость.
Современные браузеры хорошо умеют «сглаживать» незначительные
ошибки верстки и поэтому могут отображать сайты пользователям правильно
даже в том случае, если где-то код сайта окажется невалидным, т. е. не
соответствующим общепринятым стандартам. Однако это не значит, что к
возможным ошибкам или неточностям в коде можно отнестись небрежно: рано
или поздно они все равно могут привести к возникновению проблем, когда, к
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
35
примеру, в каком-нибудь из старых браузеров посетители увидят на сайте
некорректную верстку или когда сайт слишком долго будет загружаться.
Проверка кода на валидность — это отличный способ профилактики
возможных проблем в работе сайта. Такую проверку можно производить
вручную, а можно — в режиме онлайн, с помощью соответствующих сервисов.
Ручная проверка занимает много времени и очень утомительна, а вот онлайнпроверка валидности кода сайта — как раз то, что нужно. При этом удобнее всего
проверить код сайта на валидность при помощи бесплатного онлайн-сервиса от
Консорциума Всемирной паутины (World Wide Web Consortium, W3C) —
организации, которая, собственно, и разработала технологические стандарты для
интернета.
W3C основал сэр Тимоти Джон Бернес-Ли, известный как изобретатель
URI, URL, HTTP, HTML, а также самой Всемирной паутины. Сегодня W3C
разрабатывает единые принципы и стандарты для интернета, благодаря чему
достигается высокая совместимость между продуктами совершенно не связанных
между собой компаний, а Всемирная паутина в итоге становится более
универсальной и удобной.
В перечень стандартов, утвержденных W3C, входят, в частности HTML и
CSS, а потому неудивительно, что проверку валидности соответствующих кодов
сайта имеет смысл проводить именно с помощью предложенного W3C онлайнинструментария. Пользоваться онлайн-валидаторами от W3C очень просто.
Например, чтобы проверить валидность HTML, необходимо применить Markup
Validation Service (validator.w3.org). В этом сервисе доступна проверка для уже
опубликованных в интернете страниц сайтов, для файлов с локального ПК или же
для непосредственно вставленного в окно валидатора кода.
При проверке с использованием W3C-валидатора можно получить отчет, в
котором будет указано, обнаружены ли ошибки. При этом для ошибок валидатор
укажет точное место их нахождения, а также предложит правильный синтаксис.
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
36
Стоит отметить, что если валидатор обнаружит в проверяемом коде не грубые
ошибки, а неточности, то в отчете пользователю он отобразит предупреждения.
Markup Validation Service от W3C позволяет производить проверку
валидности HTML и XHTML, а вот если нужно проверить на валидность CSS-код
сайта, то в этом случае W3C предлагает свой CSS Validation Service
(jigsaw.w3.org/css-validator). Проверка в данном сервисе выполняется аналогично
проверке HTML-кода: в поле валидатора вставляется ссылка на проверяемую
страницу сайта или же на файл CSS, после чего сервис отображает найденные
ошибки или неточности. Как и в Markup Validation Service, при проверке CSS
можно загрузить исследуемый код с ПК или же вставить код прямо в окно
валидатора.
Проверка сайта на валидность в последнее время становится особенно
актуальной, ведь в конце 2014 года планируется окончательное утверждение
HTML5 в статусе рекомендации W3C, что влечет за собой необходимость
внесения некоторых изменений в привычную верстку сайтов. К примеру,
некоторые теги и атрибуты, поддерживаемые в HTML4, в HTML5 считаются
устаревшими и применять их при верстке стандарт не рекомендует. В частности,
в разряд устаревших в HTML5 относят теги font и center, ранее активно
использовавшиеся для форматирования текстов при верстке.
Разработка сайтов с учетом валидности верстки важна и проверка кода
сайта на валидность всегда остается актуальной. Такую проверку рекомендуется
проводить как на этапе непосредственного создания сайта, так и при внесении
каких-либо изменений в дизайн или структуру сайта, т. е. при выполнении
редизайна.
Проверка на валидность:
<div class="panel panel-group panel-default">
<div class="panel-body">
<h2>Кинотеатр.</h2>
</div>
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
37
<nav class="navbar navbar-default">
<ul class="nav navbar-nav ">
<li><a href="film.php">Фильмы</a></li>
<li><a href="appointment.php">Бронирование</a></li>
<li><a href="main.php">Мои сеансы</a></li>
</ul>
</nav>
</div>
Рисунок 2.9 – Проверка на валидность
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
38
Заключение
В период прохождения учебной практики мною были выполнены
следующие виды работ:
 закрепление теоретических знаний, полученных при изучении
базовых дисциплин;
 развитие и накопление специальных навыков, изучение и участие в
разработке организационно-методических и нормативных документов
для решения отдельных задачах по месту прохождения практики;
 усвоение приемов, методов, способов обработки и представления
информации;
 приобретение практических навыков в будущей профессиональной
деятельности или в отдельных ее разделах. Разработан Web-сайт
«Сервис по записи на сеанс в кинотеатре.»
За
время
прохождения
учебной
практики
УП.02.02
«Веб-
программирование» я был ознакомлен с принципами разметки гипертекстовых
документов средствами HTML и CSS, и основами программирование серверной
части web-приложений при помощи php и js. Для создания сайта применены в
основном теги html, head, title, body, div, img, a, p, br, h1, input и тд.
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
39
Литература
Государственные стандарты
1 ГОСТ 2.106-96 ЕСКД. Текстовые документы.
2 ГОСТ 2.104-2006 ЕСКД. Основные надписи.
3 ГОСТ 28388-89. Система обработки информации. Документы по
носителям данных. Порядок выполнения и обращения.
Нормативная
4 Инструкция №2.100 по охране труда при работе в компьютерных
кабинетах
Учебная
5 Информатика и ИКТ. Задачник – практикум: Л. А. Залогова, М.А.
Пласкин, С.В. Русаков, 2014
6 Компьютерная графика: Учебное пособие / В.Ю. Микрюков. – Ростов
н/Д.: Феникс, 2006
7 Савельев А.О. HTML 5. Основы клиентской разработки [Электронный
ресурс]/А.О. Савельев, А.А. Алексеев. - Электрон. текстовые данные. - М.:
Интернет-Университет Информационных Технологий (ИНТУИТ), 2016. - 286 c. 2227-8397. - Режим доступа: http://www.iprbookshop.ru/57369.html
8 HTML5, CSS3 и JavaScript. Исчерпывающее руководство/Дженнифер
Роббинс; [пер. с англ. М. А. Райтман]. - 4-е издание. - М.: Эксмо, 2016. - 528 с.
9 HTML5. Разработка приложений для мобильных устройств. - СПб.:
Питер, 2015. - 480 с.: ил.
10 HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. СПб.: Питер, 2016. - 304 с.: ил.
11 Информационные системы предприятия : учеб. пособие / А.О.
Варфоломеева, А.В. Коряковский, В.П. Романов. — 2-е изд., перераб. и доп. — М.
: ИНФРА-М, 2019. — 330 с. — (Среднее профессиональное образование). - Режим
доступа: http://znanium.com/bookread2.php?book=1002068
Лист
Изм.
Лист № Документа
Подпись Дата
УП.09.02.04.161б.02
_
40