Корпоративний сайт по переобладнанню автомобілів «GT-auto»
CSS використовується розробниками web-сторінок для задання кольорів, шрифтів, розташування окремих блоків та інших аспектів представлення зовнішнього вигляду цих web-сторінок. Основною метою розробки CSS було розділення опису логічної структури web-сторінки (яке проводиться за допомогою HTML або інших мов розмітки) від опису зовнішнього вигляду цієї web-сторінки (яке тепер проводиться… Читати ще >
Корпоративний сайт по переобладнанню автомобілів «GT-auto» (реферат, курсова, диплом, контрольна)
Анотація веб сайт програмування Анотацію виконують після індивідуального завдання з нової непронумерованої сторінки із заголовком Анотація.
Анотація призначена для ознайомлення з основним напрямком, ідеями та результатами ДП і повинна містити стислу характеристику виконаної роботи. В анотації мають бути коротко описані наступні пункти: відомості про обсяг пояснювальної записки (ПЗ), кількість ілюстрацій, таблиць, додатків, кількість джерел згідно з переліком посилань, об'єкт дослідження або розробки, мета роботи, методи дослідження, результати роботи та їх новизна, основні характеристики та показники, ступінь впровадження, рекомендації щодо використання результатів робити, галузь застосувань, значущість роботи та висновки, прогнозні припущення про розвиток об'єкту дослідження або розробки.
Викладення матеріалу в анотації повинно бути стислим і точним (не більше 500 слів). Належить використовувати синтаксичні конструкції, притаманні мові ділових документів, уникати складних граматичних зворотів. Необхідно використовувати стандартизовану термінологію, уникати маловідомих термінів і символів.
Ключовим словом називається слово або стійке словосполучення із тексту анотації, яке з точки зору інформаційного пошуку несе смислове навантаження.
Ключові слова, що є визначальними для розкриття суті звіту розміщуються після тексту анотації. Перелік ключових слів містить від 5 до 15 слів (словосполучень), надрукованих великими літерами в називному відмінку в рядок через коми.
Приклад оформлення анотації наведено в додатку А.
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ
PHP — Hypertext Preprocessor (гіпертекстовий препроцесор)
My SQL — Structured Query Language (мова структурованих запитів) БД — База даних
HTTP — HyperText Transfer Protocol (протокол передачі даних)
URL — Uniform Resource Locator (загальноприйнятий локатор ресурсу)
XML — Xtensible Markup Language (розширювана мова розмітки)
HTML — HyperText Markup Language (мова розмітки гіпертексту) ПК — Персональний комп’ютер
ПП — Програмний продукт
ВСТУП
Сучасний період розвитку цивілізованого суспільства характеризує процес інформатизації.
Інформатизація суспільства — це глобальний соціальний процес, особливість якого полягає в тому, що домінуючим видом діяльності в сфері суспільного виробництва є збір, накопичення, обробка, зберігання, передача і використання інформації, здійснювані на основі сучасних засобів мікропроцесорної й обчислювальної техніки, а також на базі різноманітних засобів інформаційного обміну. Інформатизація суспільства забезпечує:
— активне використання інтелектуального потенціалу суспільства, сконцентрованого в друкованому фонді, який постійно розширюється, і наукової, виробничої та інших видах діяльності його членів;
— інтеграцію інформаційних технологій з науковими, виробничими, що ініціює розвиток всіх сфер суспільного виробництва, інтелектуалізацію трудової діяльності;
— високий рівень інформаційного обслуговування, доступність будь-якого члена суспільства до джерел достовірної інформації, візуалізації інформації, яка представляється, істотність використовуваних даних.
З появою web-технології комп’ютер починають використовувати різні верстви населення. Можна виділити дві найбільш характерні групи, які були стрімко залучені в нову технологію. З одного боку, це були представники елітних груп суспільства — керівники великих організацій, президенти банків, топ-менеджери, впливові державні чиновники і т.д. З іншого боку, це були представники найширших верств населення — домогосподарки, пенсіонери, діти і т.п. Спектр соціальних груп, що підключаються до мережі Internet і шукають інформацію в WWW, весь час розширюється.
Web-технологія повністю перевернула наші уявлення про роботу з інформацією, та й з комп’ютером взагалі. Виявилося, що традиційні параметри розвитку обчислювальної техніки — продуктивність, пропускна здатність, місткість запам’ятовуючих пристроїв — не враховували головного «вузького місця» системи — інтерфейсу з людиною. Застарілий механізм взаємодії людини з інформаційною системою стримував впровадження нових технологій і зменшував вигоду від їх застосування. І тільки коли інтерфейс між людиною і комп’ютером був спрощений до природності сприйняття звичайною людиною, наслідком став безпрецедентний вибух інтересу до можливостей обчислювальної техніки.
З розвитком технологій гіпертекстової розмітки в Internet стало з’являтися все більше сайтів, тематика яких була абсолютно різною — від сайтів великих компаній, до сайтів маленьких фірм.
Web-сайти дозволяють:
— вивчати потреби користувачів, рівень їх обізнаності;
— формувати спільні цінності та норми поведінки, роз’яснювати політику, що проводиться навчальним закладом, полегшувати спілкування керівництва та персоналу.
Завдання, вирішення яких може сприяти Web-сайт, умовно поділяють на три групи:
— іміджеві та рекламні;
— комерційні;
— організаційного розвитку, мотивації співробітників, освіти команди.
Слід зазначити, що всі ці завдання вирішуються навчальним закладом з використанням багатьох інших засобів: поширення друкованої реклами, підготовки іміджевих публікацій, участі у виставках, видання газет і журналів. Проте електронне середовище володіє цілим рядом безсумнівних переваг і можливостей, серед яких:
— інтерактивний характер комунікації;
— доступність інформації протягом 24 годин користувачам усього світу;
— оперативне оновлення інформації, у тому числі її доповнення з урахуванням питань або пропозицій відвідувачів сайту;
— надання необмеженого обсягу інформації, причому крім текстової та графічної, ще звукової та відеоінформації;
— персоналізація інформації, яка призначена для різних цільових груп;
— багатоаспектний і швидкий пошук необхідних відомостей у великих масивах інформації;
— отримання відомостей про відвідуваність сайту, тобто його результативності як засобу комунікації;
— створення сайтів, присвячених окремим товарам чи послугам, або орієнтованим на різні цільові аудиторії.
Однак перераховані переваги купуються web-сайтами не автоматично, а з’являються лише в результаті обдуманого, обґрунтованого підходу до їх створення.
Розробка веб-сайту для підприємства «GT-auto» відбувається під замовлення, тому даний веб сайт по завершенню буде мати статус on-line. Отримати доступ до сайту зможе кожен користувач, котрий перейде по адресі - http://gt-auto.com.ua.
За допомогою даного веб-сайту, підприємство має можливість викладати на показ свою продукцію одразу на сайт.
РОЗДІЛ 1. ОСНОВНА ЧАСТИНА
1.1 Характеристика підприємства
Приватне підприємство «GT-auto» займається переобладнанням автобусів та мікроавтобусів. Компанія почала свою трудову справу з 1995 року. Назва GT пішла від імені головного директора — Георгій Тікан.
Завдяки багаторічному досвіду, компанія займає місце лідера по країнам СНД у галузі переобладнання автобусів. Всі працівники мають високу кваліфікацію у своєму напрямку, а також мають багаторічний досвід роботи.
Переобладнання автомобілів полягає у: монтажу та демонтажу нерухомих предметів у салоні автобуса, а також у пошитті окремих деталей для салону автомобіля.
Монтаж та демонтаж нерухомих предметів у салоні автобуса виконують спеціальні майстри по перетяжці салону. Котрі мають стаж роботи не менш ніж 5 років. Це є обов’язкова умова для робітників компанії. Пошиттям окремих деталей для салону автомобіля займаються підготовлені швачки, котрі мають стаж роботи у сфері пошиття різних деталей для салону не менш ніж 3 роки.
Для того щоб замовити переобладнання автомобіля, необхідно звернутися до менеджера, та обговорити деталі замовлення. Після обговорення деталей, робітники компанії обов’язково повинні узгодити всі рішення з директором, після чого прийнятися до праці.
По завершенню роботи, робітники звітують менеджеру, після чого вся робота підлягає повної перевірки. По завершенню перевірки, директор компанії повідомляє клієнта про те, що робота завершена. Клієнт перевіряє власноруч, та надає необхідну оплату директору, а потім забирає свій автомобіль.
1.2 Опис середовища програмування
1.2.1 HTML — мова розмітки гіпертексту
HTML (від англ. Hypertext Markup Language — мова розмітки гіпертексту) — це стандартна мова розмітки документів у Всесвітній павутині. Всі веб-сторінки створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузером і відображається у вигляді документа, зручному для людини. HTML є додатком SGML (стандартної узагальненої мови розмітки) і відповідає міжнародному стандарту ISO 8879.
HTML-документ є текстовим файлом розмічений за допомогою спеціальних (текстових) команд. Текстовий формат представлення веб-документів був вибраний виходячи з основних вимог до веб-документу: простота, можливість безпосередньої інтерпретації в будь-якій операційній системі, мінімальний розмір файлу, зручність редагування і інтерпретації.
Мова розмітки гіпертекстових документів HTML дозволяє визначити різні типи елементів (у оригіналі element), що забезпечують функціональність документа: текстові фрагменти із заданими параметрами форматування, списки, таблиці, зображення, гіперпосилання і т.д. Елементи HTML оголошуються за допомогою команд розмітки, званих тегами (від англійського tag — ярлик). Всі HTML-теги, що зустрічаються в тексті документа інтерпретуються браузером при відображенні документа.
— даний тег відповідає за блоки на сайті. Він використовується для розташування елементів на різних частинах веб сторінки. До даного тегу використовуються відповідні стилі, щоб забезпечити точне місце знаходження блоку.
назва посилання — даний тег відповідає за гіперпосилання. У полі href необхідно вказати адресу сторінки, наприклад site.ru/index.html. Після натискання на кнопку «назва посилання» буде автоматично пере направлено на вказану сторінку.
1.2.2 PHP мова програмування
PHP — скриптова мова програмування загального призначення, інтенсивно застосовується для розробки web-додатків. В даний час підтримується переважною більшістю хостинг-провайдерів і є одним з лідерів серед мов програмування, що застосовуються для створення динамічних web-сайтів.
У області програмування для мережі Інтернет PHP — одна з найпопулярніших скриптових мов завдяки своїй простоті, швидкості виконання, багатій функціональності, платформ і розповсюдженню початкових кодів на основі ліцензії PHP.
Популярність у галузі побудови web-сайтів визначається наявністю великого набору вбудованих засобів для розробки web-додатків. Основні з них:
— автоматичний витяг POST і GET-параметрів, а також змінних оточення web-сервера в призначені масиви;
В даний час PHP використовується сотнями тисяч розробників. Згідно з рейтингом корпорації TIOBE, що базується на даних пошукових систем, у грудні 2012 року PHP знаходився на 6 місці серед мов програмування. До найбільших сайтів, які використовують PHP, відносяться Facebook, Wikipedia і ін.
Синтаксис PHP подібний синтаксису мови Сі. Деякі елементи, такі як асоціативні масиви і цикл foreach, запозичені з Perl.
Для роботи програми не потрібно описувати якісь змінні, використовувані модулі і т.п. Будь-яка програма може починатися безпосередньо з оператора PHP. PHP виконує код, що знаходиться всередині обмежувачів, таких як рhp?>. Все, що знаходиться поза обмежувачів, виводиться без змін. В основному це використовується для вставки PHP-коду в HTML-документ.
1.2.3 JavaScript — сценарна мова програмування
JavaScript — прототипно-орієнтована сценарна мова програмування. Є діалектом мови ECMAScript.
JavaScript зазвичай використовується як вбудована мова для програмного доступу до об'єктів додатків. Найбільш широке застосування знаходить в браузерах як мова сценаріїв для додання інтерактивності web-сторінок.
Основні архітектурні риси: динамічна типізація, слабка типізація, автоматичне керування пам’яттю, прототипне програмування, функції як об'єкти першого класу.
На JavaScript вплинули багато мов, при розробці була мета зробити мову схожим на Java, але при цьому легким для використання користувачами. Мовою JavaScript не володіє якась компанія або організація, що відрізняє його від ряду мов програмування, використовуваних у web-розробці.
1.2.4 CSSкаскадні таблиці стилів
CSS — формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки.
Переважно використовується як засіб опису, оформлення зовнішнього вигляду web-сторінок, написаних за допомогою мов розмітки HTML і XHTML.
CSS використовується розробниками web-сторінок для задання кольорів, шрифтів, розташування окремих блоків та інших аспектів представлення зовнішнього вигляду цих web-сторінок. Основною метою розробки CSS було розділення опису логічної структури web-сторінки (яке проводиться за допомогою HTML або інших мов розмітки) від опису зовнішнього вигляду цієї web-сторінки (яке тепер проводиться за допомогою формальної мови CSS). Такий поділ може збільшити доступність документа, надати велику гнучкість і можливість управління його представленням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях, таких як екранне представлення, друковане представлення, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при виводі пристроями, що використовують шрифт Брайля.
1.2.5 Denver домашній сервер
Denver (джентльменський набір Web-розробника) — набір дистрибутивів і програмна оболонка, призначені для створення та налагодження сайтів (web-додатків, іншого динамічного вмісту інтернет-сторінок) на локальному ПК (без необхідності підключення до мережі Інтернет) під управлінням ОС Windows.
Відразу після установки клієнту доступний повністю працюючий web-сервер Apache, що працює на його локальному комп’ютері, на якому може працювати необмежена кількість сайтів, що дуже ефективно для розробки та налагодження сценаріїв PHP без завантаження їх файлів на віддалений сервер. Для запуску практично всіх утиліт «Denver» використовується додаток Run в підкаталозі denwer (або / etc) кореневого каталогу установки Denver. При запуску створюється віртуальний диск (за замовчуванням — Z:), де зберігаються всі файли проектів.
Особливістю, яка відрізняє Denwer від інших WAMP-дистрибутивів, є автоматична правка системного файлу hosts, який є локальним аналогом DNS-сервера, що дозволяє звертатися до локальних сайтів, які працюють під управлінням Denver, по іменах, що збігаються з іменами папок, розташованих в каталозі home Denver.
1.2.6 Macromedia Dreamweaver 8 середовище розробки
Macromedia Dreamweaver 8 — HTML-редактор, розроблений компанією Macromedia. Багатий інструментарій, зручний інтерфейс, відкритість програми для різних налаштувань і інші особливості роблять Dreamweawer одним з найпопулярніших HTML-редакторів у світі.
Можливості Macromedia Dreamweaver 8 значно ширше, ніж можливості звичайних редакторів для створення web-сторінок. Однак разом з цим програма завдяки легкому налаштуванні і простому користувацькому інтерфейсу підходить як для професіоналів, так і початківців-розробників.
Основна увага в даному продукті приділяється на візуалізацію розробки web-сторінки. Робота проходить в режимі WYSIWYG (What You See Is What You Get — що бачиш, те й отримуєш), тобто Dreamweaver об'єднує в собі засіб для візуального розташування елементів, управління їх властивостями на рівні мови HTML і засоби підтримки Dynamic HTML.
Macromedia Dreamweaver забезпечує:
— генерацію вільного від помилок HTML-коду;
— динамічне відображення створюваної сторінки у вибраному браузері;
— збереження розташування для раніше створених документів і документів, створених іншими засобами;
— засоби наочного дизайну таблиць і фреймів;
— генерацію Dynamic HTML для різних браузерів;
— розширену колекцію скриптових програм JavaScript;
— підтримку анімації, схожу з інструментами Macromedia Director.
Крім цього:
— Macromedia Dreamweaver 8 — це розробник дизайну, і редактор коду в одному інструменті;
— Dreamweaver 8 дозволяє з легкістю використовувати нові технології дизайну і кодування;
— за допомогою Dreamweaver 8 і Flash Video помістити відео на сайт не складе ніяких труднощів;
— потужна CSS-панель надає можливість провести зміни, не набираючи код вручну;
Dreamweaver взаємодіє з XML.
1.3 Технічне завдання
Темою дипломного проектування є корпоративний сайт компанії «GT-auto».
Підставою для виконання даної розробки необхідність розробити веб-сайт для компанії «GT-auto», котра займається переобладнанням автобусів.
Терміни розробки:
— початок 23 квітня 2014 року;
— закінчення 20 червня 2014 року.
1.3.1 Характеристика об'єкту, що створюється Корпоративний сайт, що розробляється повинен відображати інформацію про діяльність компанії. До складу об'єкту, що створюється повинно входити:
— програмний комплекс, що розробляється;
— додаткове програмне забезпечення (Denwer);
— документація, щодо використання розроблюваного ПЗ.
До вхідної інформації належить вимоги директора компанії:
— інформація щодо поточної діяльності;
— забезпечення зворотного зв’язку з менеджером та директором;
— статична інформація про компанію.
До вихідної інформації належить сформований корпоративний сайт, який переглядається за допомогою web-браузера:
— виконавець має можливість переглянути інформацію на сторінках;
— виконавець має можливість переглянути як статичну так і динамічну інформації.
1.3.2 Призначення продукції, що створюється Програмний продукт, який розробляється, повинен пришвидшити донесення інформації до користувачів про діяльність відділення програмування, інформувати про головні новини, які відбулися чи відбудуться, забезпечити швидкий зв’язок з адміністрацією відділення.
Основні функції адміністратора сайту:
— додання необхідної інформації для завантаження;
— редагування текстової та графічної інформації.
Функції користувача сайту:
— перегляд інформації;
— отримання необхідних даних про діяльність відділення програмування.
1.3.3 Основні вимоги до програмного комплексу, що створюється Загальні вимоги:
— програмний комплекс працює під будь-якою операційною системою сімейства WINDOWS;
— вимоги до апаратного забезпечення — не передбачаються та можуть встановлюватись розробником програмного продукту;
— програмний продукт повинен володіти зручним та простим у користуванні інтерфейсом;
— для забезпечення роботи необхідний доступ до глобальної мережі Internet.
Додаткові вимоги:
— для коректної роботи програмного комплексу необхідні браузери: Google Chrome, Opera, Mozilla Firefox, Safari;
— програмний комплекс повинен забезпечувати відображення введених даних;
— вимоги до мови програмування не передбачаються.
Вимоги до якості на надійності:
— програмний комплекс повинен надійно працювати;
— розробник обирає технічні характеристики персонального комп’ютера;
— розробник гарантує роботу програмного комплексу протягом 24 годин без збоїв та переналаштувань;
— виконавець гарантує придбання додаткових ресурсів (доменне ім'я, хостинг) за власні кошти.
1.3.4 Техніко-економічні вимоги до програмного продукту Вартість робіт по розробці даного програмного продукту визначається згідно економічних показників. Вартість запропонованих аналогів повинна забезпечити економічну доцільність їх застосування.
1.3.5 Вимоги до матеріалів та комплектуючих В процесі розробки програмного продукту використовуються програмні засоби, які оптимально підходять для розробки web-сторінок.
1.3.6 Етапи розробки ПП Етапи розробки ПП (Таблиця 1.1) можуть уточнюватись згідно календарного плану робіт по узгодженню між замовником та виконавцем.
1.3.7 Прийняття програмного продукту Оцінка результатів розробки і доцільності її продовження здійснюється замовником по представленню наступних матеріалів:
— демонстрація програмного комплексу на ЕОМ замовника;
— перелік файлів на резервному носії;
— стислий опис роботи ПП та опис всіх файлів, які необхідні для роботи ПП;
— перелік документів;
— технічне завдання;
— пояснювальна записка;
— програма та методика тестування;
— керівництво користувача;
— керівництво програміста.
Перелік звітних документів, необхідних для прийняття етапів роботи:
— стислий опис результатів етапу у вигляді анотованого звіту;
— частковий програмний комплекс на ЕОМ згідно календарного плану робіт.
Звітні матеріали подаються у вигляді звітів на папері по ГОСТ 7.32−91.
Тестування виконується відповідно до «Програми та методики тестування», яка розробляється виконавцем та затверджується замовником.
РОЗДІЛ 2. РОЗРОБКА ПРОГРАМНОГО ПРОДУКТУ
2.1 Структура сайту
Структура веб-сайту компанії «GT-auto» складається з чотирьох основних розділів: «Персональний автобус», «Туристичний автобус», «Мікроавтобус до 9-ти місць», а також «Вантажно-пасажирський» автобус. Кожен розділ містить опис автомобіля, а також містить перелік автомобілів даного розділу. Перелік автомобілів відображається у вигляді картинок, котрі мають гіперпосилання на опис самого автомобіля. Структуру сайту детально зображено на рисунку 2.1.
Рисунок 2.1 — Структура сайту «GT-auto»
На вищевказаній схемі, детально зображено структуру сайту, на котрій можна побачити навігацію по сайту для користувача. Завдяки правильному проектуванню інтерфейсу, орієнтуватися на веб сайті не викликає складності навіть у людей доросліших за 50 років. Завдяки чому, можна зберегти дорослу аудиторію сайту.
2.1 Вказівки адміністратору
Для зручного редагування коду, рекомендомано використовувати текстовий редактор NotePad++. Цей редактор автоматично виділяє різними кольорами необхідні теги, що значно прискорює процес розробки. Але для того щоб редагувати файли на сайті, необхідно мати доступ до серверу. На котрому розміщений веб сайт.
Основна структура сайту складається з 4-х блоків (див рис 2.1). Верхній блок — Header, лівий блок — Left_bar, тіло сайту — Body, а також нижня частина — Footer.
Рисунок 2.1 — Структура сайту
Для надання сторінці необхідного вигляду, створено шаблон за допомогою конструкцій CSS, прописати правила до кожного елементу сторінки. Кожне правило відповідає технічним вимогам:
1. Внутрішня організація:
— обнуляємо зовнішні та внутрішні відступи у всіх елементів сторінки;
— колір фону сторінки відповідає шаблону.
2. Характеристики блоку:
— Ширина 1290px, відцентровано по горизонталі;
— блок розташовано по ширині контейнера;
— назва сайту знаходиться в блоці #HEADER;
— шрифт TimesNewRonan, колір #000, поля — 6em.
3. Верхнє меню у блоці #HEADER шириною 700px.
4. Блок основного меню #LEFT_BAR:
— Ширина 240px, з верхнім, правим і нижнім полем 8px і внутрішніми відступами 5px;
— містить 4 зображення, які виконують функції гіперпосилання на категорії сайту;
— для картинок задано стиль для заокруглення кутів 10px.
5. Блок основного меню #BODY:
— Ширині 800px, має відступи від рамок розміром 10px;
— містить слайдер, який кожні 3 секунди змінює значення зображення;
— Задано стиль для заокруглення кутів зображенню — 10px;
— містить текстову інформацію, яка використовує стилі шрифту Arial 14px.
6. Блок основного меню (#FOOTER):
— Ширина 1290px, має відступи від рамок — 10px;
— містить як текстову інформацію, та й інформацію у вигляді зображення;
— містить гіперпосилання на розділ «Магазин запчастин»;
— містить загальну інформацію про компанію;
— містить гіперпосилання на розділ «Користі статті».
Редагування сайту відбувається за допомогою мови візуальної розмітки HTML, а також каскадної таблиці стилів CSS. Для того щоб зробити будь які зміни на сайті, потрібно мати доступ до FTP, та будь-який текстовий редактор.
Головна сторінка сайту index. html — дана сторінка містить в собі декілька блоків, таких як верхній, нижній, та тіло.
Верхня частина сайту починається з відкриваючого тегу