ВКР (1195834), страница 6
Текст из файла (страница 6)
<td id="razmimpole"><a href="<?php echo "$im";?>" rel="Bookmark" ><img id="imsiz" src="<?php echo "$im";?>"></a></td>
<td><?php echo str_replace("\n", '<br />', $Text['TextOb']);?></td>
</tr>
</table>
</div>
</div>
<?}?>
Возможность такого внедрения является одним из важнейших преимуществ PHP перед другими языками веб-программирования [24].
Еще одним используемым в данной работе языком программирования является JavaScript. Причем он используется в сочеании с библиотекой JQuery, позволяя программировать поведение некоторых элементов или даже переписывать их значения.
Например, при загрузке файла, идет проверка на соответствие допустимым форматам, и если файл не соответствует, то происходит перезапись загрузки файла, обнуляя уже загруженный файл, а также перезаписывается значение контейнера с id="filename" и выводится туда сообщение о неферном формате файла:
document.getElementById('userfile').outerHTML = '<input type="file" name="newfile" id="userfile" accept="image/*, image/jpeg,image/png,image/jpg,image/gif" onChange="chng()">';
document.getElementById ('filename').innerHTML = ' Неверный фал, пожалуйста выберите другой';
Полный код функции обрабатывающий загрузку файла можно посмотреть в приложении А.
Таким образом, JavaScript позволяет не только реализовывать необычное поведение элементов, но и контролировать действия пользователя, уберегая его от случайных ошибок [18].
JavaScript позволяет реализовывать нестандартное поведение объектов, что может быть не только полезным, но и красивым, однако основа графического представления приложения реализуется в первую очередь с помошью HTML и CSS, в особенности через CSS.
CSS практически полностью задает положение всех элементов, отображаемых на страницах, позволяя подключением необходимого стиля к странице менять подобные элементы сразу на нескольких страницах [20].
В данной работе была написано несколько файлов с таблицами стилей, а также применялись несколько CSS файлов Bootstrap, однако все применяемые стили всё равно были изменены и настроены специально под разрабатываемое приложение [21].
4 Технико-экономическое обоснование
Технико-экономическое обоснование (ТЭО) – это расчет экономической целесообразности осуществления проекта, основанный на сравнительной оценке затрат и результатов, эффективности использования, срока окупаемости вложений.
При разработке веб-приложения для ООО «Двадцать семь» использовались технологии, находящиеся в свободном доступе, в связи с этим отсутствуют затраты на приобретение специализированного программного обеспечения.
Затраты на обслуживание веб-приложения сводятся к аренде виртуального пространства – места расположения в сети интернет. В качестве такого пространства для расположения был выбран виртуальный хостинг majordomo.ru. Аренда такого хостинга обходится в 200 рублей в месяц.
Выбор виртуального хостинга наиболее актуален, так как аренда полноценного сервера выходит дороже и его стоимость в среднем от 1400 рублей в месяц, что в 7 раза дороже по сравнению с выбранным нами вариантом. В полноценном сервере нет необходимости, поскольку виртуальный хостинг на данный момент полностью справляется со своими задачами и клиентским траффиком.
В будущем возможно будет рассмотреть вариант переезда на сервер, но только в связи с увеличением нагрузки на канал связи клиентами, так как для бесперебойной, нормальной работы самого веб-приложения достаточно любого виртуального хостинга.
Для предприятия ООО «Двадцать семь» сумма в 200 рублей в месяц является незначительной, тем более само веб-приложение направлено на развитие предприятия, что приносит новых клиентов, а соответственно и выручку предприятию.
Так же необходим человек для сопровождения и обслуживания сайта. Это может быть сторонний человек или же сами сотрудники ООО «Двадцать семь».
Так как стороннему человеку за обслуживание и сопровождение необходимо платить заработную плату, в среднем ориентировочно 30 тысяч рублей, то данной работой займется уже имеющийся сотрудник предприятия, что позволит сэкономить.
Разработка информационного веб-приложения для предприятия ООО «Двадцать семь» является высоко целесообразной, так как решение поставленной задачи эффективно и быстро окупаемо.
Заключение
Целью, данной выпускной квалификационной работы была разработка информационного веб-приложения, для расширения сферы деятельности предприятия, улучшения качества предоставления услуг за счет возможности общения напрямую заказчика с сотрудниками предприятия, а также формирования базы данных для предоставления новых услуг.
В ходе выполнения работе было разработано веб-приложение для ООО «Двадцать семь».
Задачи, поставленные в соответствии с указанной целью были успешно выполнены, а именно:
– определены основные функции разрабатываемого веб-приложения;
– выбраны технологии реализации;
– спроектирован дизайн приложения;
– создана база данных, на основе которой работает приложение;
– выполнен процесс построения функциональных инструментов для наполнения и обработки базы данных.
В работе описаны теоретические основы и методы разработки веб-приложения, рассмотрены задачи, поставленные предприятием, а также определена актуальность создания приложения. Рассмотрены уровни разработки и основные принципы веб-дизайна, описан дизайн создаваемого приложения, программная реализация. Проведено технико-экономическое обоснование работы.
Разработанное информационное веб-приложение полностью готово, работоспособно и передано предприятию ООО «Двадцать семь».
Список использованных источников
1 Гопкало, В.Н. Выпускная квалификационная работа. Общие требования и правила оформления: методическое пособие. / В.Н. Гопкало, О.А. Графский – Хабаровск: изд-во ДВГУПС, 2014. – 44 с.
2 Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок. – СПб.: БХВ-Петербург, 2010. – 912 с.
3 Концепция разработки web-приложений [Электронный ресурс] – Режим доступа: https://thewalrus.ru/koncepciya-razrabotki-web-prilozheniy-id35.html (Дата обращения: 02.03.2017)
4 Основные этапы разработки web-приложений [Электронный ресурс] – Режим доступа: http://www.rusnauka.com/16_ADEN_2011/Informatica/3_8538 9.doc.htm (Дата обращения: 17.04.2017)
5 Архитектура клиент/сервер [Электронный ресурс] – Режим доступа: http://brtrg.by/blog/post/139 (Дата обращения: 24.03.2017)
6 Этапы создания сайта [Электронный ресурс] – Режим доступа: http://www.melius.ru/web/stages/ (Дата обращения: 06.05.2017)
7 Сайт с нуля на фреймворке [Электронный ресурс] – Режим доступа: http://hinex.ru/sait-s-nula-na-frameworke.php (Дата обращения: 03.03.2017)
8 Bootstrap [Электронный ресурс] – Режим доступа: https://webref.ru/ layout/bootstrap (Дата обращения: 03.01.2017)
9 Интернет технологии [Электронный ресурс] – Режим доступа: http://webseo.su/tehnsite.php (Дата обращения: 07.02.2017)
10 Макнейл П. Веб-дизайн. Идеи, секреты, советы. – СПб.: Питер, 2012. – 272 с.
11 Нильсен Я. Веб-дизайн: книга Якоба Нильсена – Пер. с англ. – СПб: Символ-Плюс, 2003 – 512 с.
12 Гарретт Дж. Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия. – Пер. с англ. – СПб.: Символ-Плюс, 2008. – 192 с.
13 Макфарланд, Дэвид. JavaScript и jQuery: исчерпывающее руководство / Дэвид Макфарланд; пер. с англ. М. А. Райтмана – 3-е издание. – Москва: Эксмо, 2015. – 880 с.
14 Sublime Text [Электронный ресурс] – Режим доступа: https://www. sublimetext.com/ (Дата обращения: 19.05.2017)
15 Снайдер, Леса. Photoshop CC 2014: Исчерпывающее руководство / Леса Снайдер. – Москва: Эксмо, 2015. – 1040 с.
16 Иттен И. Искусство цвета; Пер.: Монахова Людмила – М.: Д. Аронов, 2004. – 95 с.
17 Сергеев С.Ф. Инженерная психология и эргономика: Учебное пособие. М.: НИИ школьных технологий, 2008. – 176 с.
18 Перепелица Ф.А. Разработка интерактивных сайтов с использованием jQuery. – СПб: Университет ИТМО, 2015.– 142 с.
19 Хеник Б. HTML и CSS: путь к совершенству. – СПб.: Питер, 2011. – 336 с.
20 Шмитт К. CSS. Рецепты программирования. 3-е изд.: Пер. с англ. – М.: Издательство «Русская редакция»; СПб.: «БХВ-Петербург», 2011. – 672 с.
21 Перепелица Ф.А. Эффективная разработка веб‐сайтов. Bootstrap. – СПб: Университет ИТМО, 2015. – 71 с.
22 Цветовой круг [Электронный ресурс] – Режим доступа: https://color scheme.ru/ (Дата обращения: 22.06.2017)
23 Роб П., Коронел К. Системы баз данных: проектирование, реализация и управление. – 5-е изд., перераб. и доп.: Пер. с англ. – СПб.: БХВ-Петербург, 2004. – 1040 c.
24 Robin Nixon Learning PHP, MySQL, JavaScript, CSS & HTML5, Third Edition, 2014. – 701 с.
25 Улучшенный модуль MySQL (MySQL Improved) [Электронный ресурс] – Режим доступа: http://php.net/manual/ru/book.mysqli.php#book.mysqli (Дата обращения: 14.11.2016)
26 Управление сессиями [Электронный ресурс] – Режим доступа: http://php.net/manual/ru/book.session.php (Дата обращения: 10.12.2016)
27 Пьюривал С. Основы разработки веб-приложений. – СПб.: Питер, 2015. – 272 с.
28 ДакетД. HTML и CSS. Разработка и дизайн веб-сайтов /Джон Дакет; пер. с англ. М. А. Райтмана – М.: Эксмо, 2013. – 480 с.
29 Справочник по CSS [Электронный ресурс] – Режим доступа: http://htmlbook.ru/css (Дата обращения: 20.06.2017)
30 Справочник по HTML [Электронный ресурс] – Режим доступа: http://htmlbook.ru/html (Дата обращения: 15.06.2017)
Приложение А
(рекомендуемое)
Обработка загружаемого файла на JavaScript
function chng()
{if(userfile.value.substring(userfile.value.lastIndexOf('.')+1,userfile.value.length).toLowerCase()!='gif')
{if(userfile.value.substring(userfile.value.lastIndexOf('.')+1,userfile.value.length).toLowerCase()!='jpeg')
{if(userfile.value.substring(userfile.value.lastIndexOf('.')+1,userfile.value.length).toLowerCase()!='jpg')
{if(userfile.value.substring(userfile.value.lastIndexOf('.')+1,userfile.value.length).toLowerCase()!='png')
{alert('Неверный формат файла. Пожалуйста, выберите другой фал.');
document.getElementById('userfile').outerHTML = '<input type="file" name="newfile" id="userfile" accept="image/*, image/jpeg,image/png,image/jpg,image/gif" onChange="chng()">';
var i=0;
document.getElementById ('filename').innerHTML = ' Неверный фал, пожалуйста выберите другой';} } } }
if(i==0)
{document.getElementById ('filename').innerHTML = ' Неверный фал, пожалуйста выберите другой';}
else
{var file = document.getElementById('userfile').value.replace (/.*\\/, "");
document.getElementById ('filename').innerHTML = ' Имя файла: ' + file;};};
Приложение Б
(рекомендуемое)
Фрагмент CSS кода
html
{position: relative;
min-height: 100%;
}
body
{height: 100%;
background-image: url(../bckimg.png);
background-size: 100%;
background-attachment: fixed;
}
.nav
{border: 0px solid ;
height: px;
}
.logo
{
position: absolute;
left: 65px;
top: 30px;
}
p#m0,p#m1,p#m2,p#m3,p#m4,p#m5,p#m6
{margin: 0pt 0em;
width: 241px;
padding-bottom: 3px;
padding-top: 3px;
}
aside
{float: left;
width: 400px;
position: relative;
}
#knopki
{width: px;
margin-top: -px;
z-index: 1;
}
#kategoriya
{z-index: 2;
}
.ug1 > .btn:first-child:not(:last-child) {
border-top-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.ug2 > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#ruru,#ruru1
{text-align: center;
padding-left: 20px;
}
#gsInformerID-B8v6g015UnL1tK
{float: right;
}
#ObTex
{width: 100%;}
form p
{font-size: 14pt;
}
#DrBtn
{padding: 4.5px 6px;
}
footer
{position: absolute;
left:0;
bottom: 0;
width: 100%;
height: 150px ;
background-image: url(../linefooter.png);
}
header,footer
{background-color: rgba(255, 255, 255, 0.79);
}
#le
{position: relative;
margin-left:15;
top: 15px;
}
#VerCen
{margin-top: 40;
top: 45px;
}
#svyaz
{position: absolute;
right: 0px;
top: 53px;
}
#otstup
{margin-right:20;
}
#proc
{padding-bottom: ;
}
.linblock
{display: inline-block;
vertical-align: middle;
}
#chtoto
{width: 20%;
text-align:right;
vertical-align: bottom;border: px solid ;}