Звіт з виробничої практики в ТОВ ”НРП”

Кожна сторінка веб-сайта  також має свій Internet адрес, який складається  з адреси сайту і імені файлу, відповідного даній сторінці. Таким  чином, веб-сайт – це інформаційний  ресурс, що складається із зв'язаних між собою гіпертекстових документів (веб-сторінок), розміщений на веб-сервері і такий, що має індивідуальну адресу. Подивитися веб-сайт може будь-яка людина, що має комп'ютер, підключений до Internet.

Створення і розробка сайтів включає:

1.   Затвердження первинного технічного завдання на розробку сайта.

2. Визначення структурної  схеми сайту - розташування розділів, контента і навігації.

3. Веб-дизайн - створення  графічних елементів макету сайту,  стилів і елементів навігації.

4. Розробка програмного  коду, модулів, бази даних і інших елементів сайту необхідних в проекті.

5. Тестування і розміщення  сайту в мережі Інтернет.

 

6.1 Затвердження первинного технічного завдання на розробку сайта.

Перед мною було поставлено перше завдання: розробити структурну схему проекту веб – сайту для використання в середовищі Internet. На думку керівника практики, веб-сайт, що розробляється, повинен володіти наступними особливостями:

• гнучкістю, зручною для адміністраторів системою управління структурою;
• веб-сайт повинен підтримувати використання графічних вставок, анімації, які повинні підсилювати емоційно-ціннісний компонент змісту, формувати мотивацію;
• для користувачів повинна бути також реалізована можливість роздрукувати будь-яку сторінку веб-сайта.

Проте головним завданням  проектування було створення системи управління вмістом, яка б дозволяла вносити зміни веб – сайта для людей, які не мають навичок в розробці веб-сайтів.

 

6.2 Визначення структурної схеми сайту.

Рис. 7 – Структурна схема сайта

На Рис. 7 представлена структурна схема сайта, яка враховує всю специфіку веб-сайта, що розробляється.

На головній сторінці відображається основна інформація про магазин, голосування, авторизація клієнта та додаткове меню.

Сторінка «Книги» містить категорії товарів, які є в магазині.

Сторінка «Новинки»  містить ті товари, які недавно  поступили до продажу.

Сторінка «Топ-100» містить цікаві публікації, які дають певну інформацію про товари та шопінг.

Сторінка «Доставка и оплата» містить всю необхідну покупцям інформацію про оплату товара та її доставку.

При відкритті сторінки «Контакты» користувач потрапляє на сторінку з контактами. Там він  може знаю всю контактну інформацію щодо магазину

На сторінці «Пошуку» відвідувачі можуть знайти будь-яку  інформацію, яка міститься на сайті.

 

6.3 Веб-дизайн

Відповідно до розробленої  структури була спроектована головна сторінка сайту (Рис. 8). Вона містить всі основні структурні елементи, перехід по яких здійснюється за допомогою гіперпосилань.

Рис. 8 – Головна сторінка сайту

Як і планувалося  на етапі постановки завдання, сайт містить всі необхідні структурні і навігаційні елементи: форму пошуку, навігаційне меню (у вигляді текстових посилань у супроводі відповідних зображень).

При натисненні на посиланні  «Книги» виводиться інформація про  категорії, які існують в магазині. Це набагато спрощує пошук книг для клієнтів. (рис. 9).

Рис. 9 – Книги

Вид реєстраційної форми  для нового користувача показаний на рис. 10.

Рис. 10 – Реєстраційна форма

Для того щоб авторизуватися старим користувачам, їм потрібно вказати  логін і пароль в формі авторизації. Вид авторизаційної форми для старих користувачів показаний на (рис. 11).

Рис. 11 – Авторизаційна форма

 

6.4 Розробка сайту на основі CMS.

6.4.1 Опис встановлення на сервер CMS Joomla

Для доступу до адміністративної панелі управління Joomla використовував адресу веб-сайту (або повний шлях до теки, в яку встановлена Joomla) з додаванням в кінці шляху "/administrator". Наприклад, якщо адреса веб-сайта www.myweb.ua, то доступ до панелі управління можливий за адресою www.myweb.ua/administrator. Після правильного введення адреси, відкриється сторінка авторизації (рис. 12)

Рис. 12 - Сторінка входу в панель управління Joomla

Рис. 13 - Головна сторінка панелі управління Joomla

При правильному введенні імені користувача і пароля відкриється  головна сторінка адміністрування системою, тобто буде відкрита панель управління Joomla (Рис. 13), яка надасть управління всіма функціями і можливостями Joomla.  

 

6.4.2 Створення розділів сайта

Розділ – це головний (верхній) об'єкт в основі ієрархії структури вмісту. Пізніше в Розділ будуть додані Категорії.

Для роботи з розділами  необхідно перейти на сторінку "Разделы". Можна натиснути на головній сторінці панелі кнопку "Разделы" або в основному меню вибрати "Материалы", потім пункт "Менеджер разделов" (Рис. 14).

Рис. 14 - Доступ на сторінку "Управління розділами" (Section Manager), або далі на сторінку "Менеджер категорий" (Category Manager)

 

Буде відкрита сторінка "Менеджер разделов".

Для створення нового розділу натисніть кнопку "Создать". Буде відкрита сторінка редагування розділу (Рис. 15).

Рис. 15 - Сторінка редагування розділу

На сторінці редагування  розділу потрібно:

У полі "Псевдоним" ввести коротке ім'я розділу, яке  використовуватиметься в меню або  у випадних списках панелі управління.

У полі "Заголовок" ввести довге ім'я розділу, яке використовуватиметься при відображенні вмісту розділу на сайті, показуючи заголовок розділу.

У полі "Зображення" вибрати зображення, яке використовуватиметься  при відображенні розділу в меню.

У полі "Порядок отображения" після застосування (збереження) змін можна змінити порядок відображення розділу в списку на сторінці "Менеджер разделов".

Рис. 16 - Візуальний редактор "TINYMCE"

У полі «Описание»використовується спеціальний редактор HTML, тобто не Joomla, а її розширення - мамбот. Дане розширення, мамбот, називається HTML-редактором Joomla. У системі можна використовувати будь-який з безлічі різних візуальних HTML-редакторов, але рекомендується використовувати "TINYMCE" (Рис. 16).

Якщо HTML-редактор не з'явився у Вашій системі, то Ви повинні  встановити його і (або) включити редактор. У локалізованій збірці Joomla 1.5 редактор "TINYMCE" вже встановлений і включений. Зовнішній вигляд Вашого візуального редактора може сильно відрізнятися від того, що використовувався для написання цього керівництва.

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

 

6.4.3 Створення категорій сайта

Категорія - це другий (після  розділу) об'єкт в ієрархії структури  вмісту. Створення категорії схоже на створення розділу.

Для роботи з категоріями  необхідно перейти на сторінку «Менеджер  категорий».

Є два способи перейти  на сторінку «Менеджер категорий».

Перший спосіб: можна  натиснути на головній сторінці панелі кнопку «Менеджер категорий», або  в основному меню виберіть "Вміст", потім пункт «Менеджер разделов». Буде відкрита сторінка «Менеджер категорий».

Другий спосіб: у основному  меню вибрати "Содержимое", потім "Содеожимое по разделам" і далі потрібний вам розділ. І у випадному продовженні меню пункт "Добавить/изменить категории в вибранном вами разделе". Буде відкрита сторінка «Менеджер категорий» (Рис. 17).

Рис. 17 - Сторінка «Менеджер категорий»

При відкритті сторінки «Менеджер категорий» першим способом буде доступне фільтрація категорії  по розділах. При створенні нової  категорії можна буде вибрати розділ, до якого повинна увійти нова категорія. Опція фільтрації на сторінці доступна справа під панеллю інструментів.

При відкритті сторінки «Менеджер категорий» другим способом опція фільтрації буде "жорстко" прив'язана до вибраного Вами розділу. При створенні нової категорії ім'я розділу, до якого увійде нова категорії буде "жорстко" прив'язана до вибраного вами розділу.

Примітка: Щоб вибрати  інший розділ, потрібно буде знову  повторити спосіб другою або перший, для доступу на сторінку «Менеджер категорий». 

 

6.4.4 Створення об'єкту вмісту

Об'єкт вмісту – це основний вміст сайту і нижній об'єкт в ієрархії структури вмісту. Іншими словами об'єкт вмісту – це ваша стаття, яка повинна міститися в одній з ваших категорій (відповідно і розділу).

Для роботи з об'єктами вмісту необхідно перейти на сторінку "Менеджер материалов".

Потрібно натиснути  на головній сторінці панелі кнопку "Менеджер материалов" або в основному  меню виберіть "Материалы", потім  пункт "Менеджер материалов". Буде відкрита сторінка "Менеджер материалов", при відкритті сторінки буде доступна фільтрація об'єктів по наступних критеріях:

по розділах

по категоріях

по авторові

по заголовку, значення указується в полі "Фильтр".

 

Рис. 18 - Доступ до сторінки "Менеджер материалов"

Далі доступні два  вікна HTML редактора, що дозволяють розбити  зміст статті на дві частини: введення і весь вміст статті. Розділення вмісту статей дозволяє представити їх у вигляді так званого "Блога" або "Журналу", тобто списку короткого опису статей, з кнопками "Подробнее" на весь вміст статей.

Рис. 19 - Сторінка редагування «Материал»

Блог – популярний і зручний спосіб представити  інформацію або статті, які оновлюються (додаються) регулярно, наприклад новини або прес-релізи. Замість простого списку посилань до різних статей, виведення статей як "блог" дає можливість показати назву і введення, що дозволяють перейти до всього змісту статті. Таким чином, введення може бути першим параграфом всієї статті або коротким описом (резюме) статті.

Справа, після збереження, доступні додаткові параметри управління об'єктом вмісту. Остання вкладка "Связь с меню" може настроюватися при створенні меню.

Якщо необхідно помістити  зображення в змісті, то потрібно використовувати  спеціальну можливість вставки зображень. Натисніть кнопку "Вставити зображення" (кнопка розташована внизу зліва вікна HTML редактора), після цього у вміст буде доданий текст {mosimage }; при обробці цього тексту для відображення система (Joomla) визначить, що необхідно вставляти зображення, список яких розміщений на вкладці "параметри изображения". Щоб побачити зображення в тексті, натисніть кнопку "Просмотр" на панелі інструментів.

Використовувати можливість { mosimage }можна багато раз, зображення відображаються в порядку, вказаному в списку; порядок можна міняти, використовуючи кнопки "Вгору" і "Вниз".

Використання{ mosimage } це приклад використання розширення Joomla – мамбота (mosimage).

Значення багатьох параметрів на вкладці "Параметры-Расширенные", можна задати за умовчанням, для того, щоб використовувалися "глобальні настройки". Задати значення "Глобальних настройок" можна в пункті меню "Менеджер материалов" меню "Материалы", у вкладці "Параметры". Дані значення можна індивідуально змінити для кожного об'єкту вмісту.

На даній вкладці  можна ввести опис об'єкту і ключові  слова.

Якщо використовувати  кнопку "Додати (Розділ, Категорія, Заголовок)", то будуть додані в полі "Ключовые слова" назви розділу, категорії і заголовок об'єкту. 

 

6.4.5 Створення меню on-line магазина

Після створення структури  вмісту, необхідно створити меню для  користувачів веб-сайту. Меню – це набір кнопок, які приведуть на конкретні об'єкти, наприклад, об'єкт вмісту, список категорій, компонент і так далі.

Використовуючи розширення Joomla легко створити меню для відображення на сайті. У даному керівництві розглядається  меню, побудоване на стандартному модулі (встановленому за умовчанням) mod_mainmenu. Даний модуль є за умовчанням головним для створення меню. Місце виведення меню на сайті визначається в шаблоні сайту. Встановлюючи додаткові розширення, можна розширити можливості відображення стандартного меню або відобразити його в іншому вигляді, наприклад у вигляді випадного каскадного меню з підміню (часто необхідно, щоб з боку користувача була включена підтримка Javascript в браузері).

Найпростіший варіант (але обмежений в можливостях) пов'язати об'єкт вмісту з пунктом меню, це використовувати на сторінці редагування об'єкту вмісту у вікні додаткових параметрів вкладку "связь с меню". У вкладці даного вікна необхідно:

1. Вибрати меню, в яке  буде доданий пункт (посилання).