Приблизительно:
1. Исследование
2. Конструирование
а. Итерация 1 – сайт версия 1.
б. Итерация 2 – сайт версия 2.
с. Итерация 3 – сайт версия 3.
Небольшой сайт может быть разбит итерации на три.
Структура любого сайта обычно состоит из разделов. Иерархия разделов представляется в системе управления сайтом в виде древовидной структуры. Каждый раздел сайта имеет ссылки на страницы , которые вычисляют ряд финансовых операций. В связи с тем, что мы делаем самые первые шаги в освоении новой технологии, не будем сильно усложнять задачу, и начнем с того, что создадим несколько страничек нашего сайта, позволяющих пользователю: - просмотреть меню, главную страницу - просмотреть предлагаемые вычисления; - оставить свое мнение о сайте и просмотреть мнения читателей в гостевой книге.
Исходя из этой структуры можно предположить следующее. Нам необходимо соединение с базой данных.
Главная страница - состоит из трех фрэймов (banner.htm - верхний фрейм, left_M.htm – фрейм с левой стороны, main.htm – фрейм посередине) где представлены меню для выбора. Переходы по ссылкам осуществляются посредством . Ссылки сформированы из набора страниц, из файлов х.htm, x.htm……
Верхний фрейм - страница, где размещаются баннеры по тематике, кроме того, формируются ссылки по тематике.
Левое меню - страница левого раскрывающегося меню, где размещены все ссылки по сайту.
Фрейм по середине - страница, которая открывается по умолчанию, где размещается информация.
Ссылки левого меню – страницы, где производятся расчеты по финансово-экономическим операциям.
2.1.3 Создание дизайна сайта
При создании сайта дизайну уделяется особое внимание. Дизайн сайта — это его лицо, а значит и лицо фирмы в Интернете. Но, кроме приятного впечатления, которое красивый дизайн должен производить на посетителя сайта, дизайн должен быть легким и функциональным. Легким, чтобы не отнимать время у посетителя загрузкой, и функциональным, чтобы помогать ориентироваться в информационном наполнении сайта. Навигация исполняется в виде графических меню, графика с логотипами грамотно делается в графических программах, например в ImageReady.
2.1.4 Верстка страниц сайта и привязка программных модулей
Третий и очень ответственный этап работы. Если сайт планировалось делать статическим, т.е. без использования каких-то программных модулей, генерирующих контент сайта, то этап верстки страниц фактически завершает создание сайта.
Если же сайт должен быть динамическим, то верстают так называемые шаблоны страниц, которые передаются программистам для разработки и «привязки» программных модулей сайта.
Для каждого сайта возможен набор своих программных модулей. Каждый программный модуль дает сайту какую-либо функцию. Это может быть: гостевая книга, каталог товаров, система голосования, форум, чат, автоматический расчет стоимости компьютера в зависимости от выбранной комплектации в интернет-магазине
Разработка программных модулей требуется для больших проектов (Интернет-магазин, портал), но возможно их использование и на простых сайтах. Это может быть форма отправки заказа по электронной почте. Программные модули являются отличным дополнением для улучшения работы сайта.
Заранее нужно подумать об обновлении сайта. Обновление сайта это:
- периодическое изменение информации на страницах сайта - добавление новых страниц сайта - добавление товаров и услуг в каталог, редактирование прайс-листов - удаление старых страниц - поддержания актуальности сайта и интереса к сайту со стороны целевой группы.
2.2 Разработка программного обеспечения
2.2.1 Выбор программного инструментария
Программное обеспечение:
- комлекс программ обеспечивающих обработку или передачу данных;
- предназначенных для многократного использования и применения разными пользователями.
По видам выполняемых функций программное обеспечение подразделяется на системное, прикладное и инструментальное.
Программное обеспечение - совокупность программ системы обработки информации и программных документов, необходимых для их эксплуатации.
2.2.2. Прикладное программное обеспечение
Прикладное программное обеспечение – програмное обеспечение, состоящее из:
- отдельных прикладнвх программ и пакетов прикладных программ, предназначенных для решения различных задач пользователей; и
- автоматизированных систем, созданных на основе этих (пакетов) прикладных программ. Для нормального функционирования системы управления и расширения ее возможностей на предприятии будут использоваться: - прикладные программы для взаимодействия с другими комплексами и подзадачами (экспорт и импорт информации). - системы резервного копирования информации (архиваторы, программы копирования информации на внешние носители данных — ленточные накопители, магнитооптические диски, CD-ROM); - антивирусные программы; - программы, для работы в локальной сети и Интернете; - офисный пакет Microsoft Office 2000, в который входят текстовый редактор Word, табличный процессор Excel , СУБД Access, приложение для создания презентаций PowerPoint.
2.2.3 Системное программное обеспечение
Системное программное обеспечение – совокупность программ и программных комплексов для обеспечения работы компьютера и вычислительных сетей. Системное программное обеспечение ориентировано:
- на создание операционной среды функционирования других программ;
- на обеспечение надежной и эффективной работы самого компьютера и вычислительной сети;
- на диагностику и профилактику аппаратуры компьютера и вычислительных сетей;
- на выполнение вспомогательных технологических процессов: копирование, архивация, восстановление файлов и т.п. вспомогательных программ, осуществляющих:
- защиту, архивацию, восстановление данных;
- всевозможные тесты и т.д.
Для надежной работы необходимо надлежащим образом выбрать операционную систему. Операционная система должна удовлетворять определенным требованиям, таким как надежность, безопасность, возможность расширения в будущем, относительная дешевизна и т.д.
Данным требованиям в полной мере отвечает операционная система WindowsXP, разработанная фирмой Microsoft.
В настоящее время выбор операционной системы, как правило, определяется наличием прикладного ПО для данной ОС и наличием квалифицированного персонала для ее сопровождения.
В качестве системного программного обеспечения была взята операционная система от компании Microsoft - Windows XP.
Для создания Web-страниц использовался язык разметки HTML. Подсистема представляет собой программы на JavaScript и на PHP с базой данных MySQL.
Для функционирования подсистемы необходимо, чтобы он был размещен на Web – сервере. При создании подсистемы
разработка информационной системы в web-технологиях «Учет Финансово-Экономических Операций», представленного в данном дипломном проекте, использовался Web – сервер apache 1.3.23 для WindowsXP.
2.2.4 Информационное обеспечение
Информационное обеспечение – тексты, графика, мультимедиа и иное информационно значимое наполнение информационной системы. Существенными параметрами информационного наполнения являются его объем, актуальность и релевантность.
Разработка данного проекта была ориентированна на размещение и использование в сети. Написанный на языках использующихся в сети, подсистема не имеет своей программной оболочки, а средством его просмотра и использования является Internet Explorer, который входит в пакет Windows и установлен практически на всех компьютерах по умолчанию, а также для полноценной ее работы в интерактивном режиме нужно запустить Web-сервер Apache.
Структура данного сайта делится на два основных пункта: регистрация, расчеты, ссылки на них отображены на начальной странице Web-сайта.
Для того чтобы зайти на страницы расчетов посетитель должен ввести Имя пользователя и Пароль. Если он посетил сайт в первый раз, то должен зарегистрироваться в разделе “Регистрация” с обязательным указанием всех перечисленных форм. Заполнив анкету пользователь должен нажать на кнопку “Зарегистрировать”, в этот момент все данные формы отправляются CGI-сценарию, который обработав их заносит в базу данных.
Рисунок 2.2.4.1 Главная страница
Все данные сохраняются в файле и могут быть выведены на странице администратора. Форму обрабатывает CGI-программа.
Рисунок 2.2.4.2 Обработка запроса
На остальных страницах рассмотрены расчеты разных финансово-экономических операций, где рассмотрены только клиентские сценарии.
Создаваемый проект должен быть ориентирован на стандартное программное и аппаратное обеспечение, в частности, рассчитан на просмотр при разрешении экрана 800 × 600 пикселей.
2.2.5 Разработка программы
Говоря о технологиях Интернет и языках создания Web-сайтов, первое, что возникает - это HTML. Этот язык разметки является фундаментом всего Интернета и является па сегодняшний день основным языком разработки Web-проектов. Основу данного проекта также составляет HTML код.
В HTML 4.0 в отличии от HTML 3.0 вводятся механизмы таблиц стилей, скриптов, кадров, внедрения объектов, улучшенная поддержка разных направлений письма и направления справа налево, таблицы с большим количеством возможностей и новые свойства форм.
Параллельно для создания клиентских Web-проектов используется язык программирования для Web - JavaScript и PHP с базой дыннх MySQL.
HTML код главной страницы дистанционного обучения выглядит следующим образом:
Main Page
9.
src="banner.htm" scrolling=no target="Left_M">
10.
14.
Ниже мы приводим построчное описане кода программы:
Строка 1: данная конструкция указывает, на основании какого описания типа документа построен текущий документ. В нашем случае HTML версии 4.
Строка 2: указывает на начало HTML-документа.
Строки 3 – 7: определение заголовка документа.
Строка 8: Создает фрэйм – окно которое может показывать на одном экране несколько независимо прокручиваемых фрэймов, каждый из которых имеет свой собственный URL. Фреймы могут указывать на различные URL'и и быть ссылкой других URL'ей, все внутри одного экрана.
ROWS="rowHeightList" через запятую указывается набор значений, определяющих высоту фрейма. Можно определить единицу измерения, по умолчанию это пиксели. FrameBorder=0 – задает толщину фрэйма.
Строки 9: данная определяет название, ссылку создающегося фрэйма. SRC=" locationorURL" определяет URL документа, показываемого во фрейме. NAME="frameName" определяет имя, используемое как ссылка для перехода по гиперссылкам.
Строка 10: ссылается на окно, содержащее текущий frameset, а также задает его размеры.
Строка11: ссылка на фрэйм левого меню, который не использует прокрутку фрэйма.
Строка12: данная строка определяет ссылку создающегося фрэйма. SRC="locationorURL" определяет URL документа, показываемого во фрейме. Не использует прокрутку фрэйма
Строка13: закрывается тэг фрэйма.
Строка14: указывает конец тэга HTML.
Код программы верхнего фрейма:
1.
2.
3.
Banner!!!
4.
5.
6.
7.
8.
9.
Строка 1: указывает на начало HTML-документа.
Строки 2 – 4: определение заголовка документа.
Строка 5: открываем тело программы и задаем цвет фона.
Строка: вставляем рисунки (баннеры), с использованием открытия тэга center, которая выравнивает рисунки посередине. После последнего рисунка тэг centre закрывается.
Строка 7: данный тэг черти горизонтальную линию, закрытие тэга необязательно.
Строка 8: закрытие тела жокумента.
Строка 9: указывает конец тэга HTML.
Левый фрейм, раскрывающееся меню.
1.
2.
3.
Simple
4.
14.
15. var stayFolded=false
16 var exImg=new Image(); exImg.src='anons_bullet.gif'
17. var unImg=new Image(); unImg.src='anons_bullet.gif'
18.var n = (document.layers) ? 1:0;
19. var ie = (document.all) ? 1:0;
20. var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
function makeMenu(obj,nest){nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
21. this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
22. this.height=n?this.ref.height:eval(obj+'.offsetHeight')
23. this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)?
24. this.css.top:this.css.pixelTop;
25. this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis;
26. this.moveIt=b_moveIt
27. return this }
28. function b_showIt(){this.css.visibility="visible"}
29. function b_hideIt(){this.css.visibility="hidden"}
30. function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
31. function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
32. function init()
33. {oTop=new Array()
34. oTop[0]=new makeMenu('divTop1','divCont')
35. oTop[1]=new makeMenu('divTop2','divCont')
36. oTop[2]=new makeMenu('divTop3','divCont')
37. oTop[3]=new makeMenu('divTop4','divCont')
38. oTop[4]=new makeMenu('divTop5','divCont')
39. oTop[5]=new makeMenu('divTop6','divCont')
40. oTop[6]=new makeMenu('divTop7','divCont')
41. oSub=new Array()
42. oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
43. oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
44. oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
45. oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
46. oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
47. oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
48. oSub[6]=new makeMenu('divSub7','divCont.document.divTop7')
49. for(i=0;i
50. for(i=1;i
51. function menu(num)
52. {if(browser)
53. {if(!stayFolded)
54. {for(i=0;i
55. {if(i!=num)
56. {oSub[i].hideIt() oTop[i].ref["imgA"+i].src=unImg.src}}
57. for(i=1;i
57. {oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)}}
58. if(oSub[num].vis())
59. {oSub[num].showIt()
60. oTop[num].ref["imgA"+num].src=exImg.src}
61. else
62. {oSub[num].hideIt()
63. oTop[num].ref["imgA"+num].src=unImg.src}
64. for(i=1;i
65. {if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
66. else
67. oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }}}
68. if it's a 4.x+ browser.
69. if(browser) onload=init;
70.
71.
72.
73.
74.
75.
76.
77. border=0>
78.
79.
80.
81. |
82.
83.
84.
85.
86.
87. Меню
88. |
89.
90. Menu |
91.
92.
93.
94.
95.
96.
97.
98.
href="rachet_avto.htm" target=principale>Raschet po stoimosti
99.
100. Depozit
101. Depozit
102. Depozit
103. E-MAIL
104.
105.
106.
onclick="menu(1); return false" href="depozit.htm">
107.
108.
109.
110. depozit
111. depozit
112.
target=principale>
113.
target=principale>
114.
115.
116.
117.
onclick="menu(2); return false" href="for_of.htm" target=_self>
118.
119.
120.
121. for officiant
122. for officiant
123.
124.
125.
onclick="menu(3); return false" href="vklad.htm">
126.
127.
128.
129.
href="vklad.htm" target=principale>Vkladchiku
130.
131.
132.
onclick="menu(4); return false" href="index.php">
133.
134.
135.
136.
href="index.php" target=principale>
137.
href="index.php" target=principale>
138.
139.
140.
141.
142.
143.
144.
href="36.htm" target=principale>
145.
href="37.htm" target=principale>
146.
href="38.htm" target=principale>
147.
148.
149.
onclick="menu(6); return false" href="39.html#">
150.
151.
152.
153.
href="40.htm" target=principale>
154.
href="41.htm" target=principale>
155.
href="42.htm" target=principale>
156.
157.
158.
onclick="menu(7); return false" href="43.html#">
159.
160.
161.
162.
href="43.htm" target=principale>
163. |
164. |
165.
166.
167. |
168.
169.
170.
171.
172. |
173.
174.
175.
176. <Р>Начало отображения страницы со сценарием и функцией.Р> <Р>Конец формирования страницы.
6.
7. var tng_cred = 60000;
8. var usd_cred = 2000;
9. var eur_cred = 2000;
10. var term = 24;
11. var prc = 0.1;
12. var er = 0;
13. var proc = Array();
14. var proc_usd = Array();
15. proc_usd[5] = Array(0, 0.12, 0.125, 0.13, 0.135, 0.14, 0, 0.145);
16. proc_usd[4] = Array(0, 0.125, 0.13, 0.135, 0.14, 0.145, 0, 0.15);
17 . proc_usd[3] = Array(0, 0.13, 0.135, 0.14, 0.145, 0.15, 0, 0.155);
18. proc_usd[2] = Array(0, 0.135, 0.14, 0.14, 0.15, 0.155, 0, 0.16);
19. proc_usd[1] = Array(0, 0.135, 0.14, 0.14, 0.15, 0.155, 0, 0.16);
20. var proc_tng = Array();
21. proc_tng[5] = Array(0, 0.17, 0.175, 0.18, 0.185, 0.19, 0, 0.195);
22. proc_tng[4] = Array(0, 0.175, 0.18, 0.185, 0.19, 0.195, 0, 0.20);
23. proc_tng[3] = Array(0, 0.18, 0.185, 0.19, 0.195, 0.2, 0, 0.205 );
24. proc_tng[2] = Array(0, 0.185, 0.19, 0.195, 0.2, 0.21, 0 , 0.215 );
25. proc_tng[1] = Array(0, 0.185, 0.19, 0.195, 0.2, 0.21, 0 , 0.215 );
26. function empty(){return (document.forms['bzz'].elements.cost.value=='')?1:0;
}
27. function dorecalc()
28. {var els = document.forms['bzz'].elements;
29. els.rfp.value = '';
30. els.rmp.value = '';
31. els.rcs.value = '';
32. els.rfplabel.value = '';
33. els.rmplabel.value = '';
34. els.rcslabel.value = '';
35. var els = document.forms['bzz'].elements;
36 . var cost = parseFloat(els.cost.value);
37. var curr = parseInt(els.currency.value);
38. var sign;
39. var mincred;
40. if(curr==1) {mincred=tng_cred;sign=" тенге"; proc = proc_tng; }
41. else if(curr==2){mincred=usd_cred;sign=" долларов США";proc = proc_usd; }
42. else if(curr==3){mincred=eur_cred;sign=" евро";proc = proc_usd; }
43. if ( cost >= mincred )
44. { var rate = proc[Math.round(prc*10)][(term-18)/6];
45. var ac = cost*(1-prc);
46. var rim = rate/12;
47. els.rfplabel.value = sign;
48. els.rmplabel.value = sign;
49. els.rcslabel.value = sign;
50. els.rfp.value = Math.round(cost*prc);
51. els.rcs.value = Math.round(ac);
52. els.rmp.value = Math.round(ac*Math.pow(1+rim, term)*rim/(Math.pow(1+rim, term)-1));}
53. еlse{if (!er&&!empty())alert("Минимальный размер кредита - " + mincred + sign);
54. er = 1; }
55. return false;}
56.
57.
58.
59.
60.
61.
Достарыңызбен бөлісу: