Методичні рекомендації до індивідуальних робіт з курсу Web-програмування, НУДПСУ
« Назад
ІНДИВІДУАЛЬНА РОБОТАІндивідуальна робота передбачає роботу з набутих знань за індивідуальним завданням. Студенти повинні створити Web-сайт і розташувати в інтернеті. Вимоги до виконання індивідуального завданняСтворення повноцінного сайту Створення головної сторінки Створення сторінок розділів Створення сторінки автора Створення наскрізної навігації Дотримання вимог до сайту
Приклад створення сайтуPHP: ПРОСТИЙ ІНТЕРНЕТ-МАГАЗИН За допомогою РНР можна легко зробити інтернет-магазин -т. е. встановити на сайт форму замовлення, яка вирушатиме вам по електронній пошті. При цьому поштова програма відвідувача використовуватися не буде - йому навіть необов'язково взагалі її мати. Наприклад, такий "магазин" зроблений на сторінці http://www.harchikov.ru/cass.php (рис). У цій главі розповідається про його пристрій. ЗАВДАННЯ Що, власне, повинен робити інтернет-магазин? Мабуть, наступне:
Крім того, вельми бажано надати відвідувачеві щось начеб "міні-калькулятора", який би автоматично підраховував суму замовлення і відображував би її на web-странице, - щоб відвідувач міг розраховувати замовлення, виходячи зі своїх фінансових можливостей. Власне, на перших порах цього і досить. ПРОЕКТ З яких же компонентів web-магазин має бути зроблений? Відображувати асортимент з пари десятків товарів можна на одній web-странице. На ній же можна розмістити "калькулятор" і форму введення контактних даних. Розділ сторінки, що відноситься до одного товару, має бути забезпечений чимось, що могло б дозволити відвідувачеві абияк цей товар відзначити. Для останнього краще всього використовувати випадний список (рис. - на зразок того, в якому встановлюється розмір шрифту в Word): він заразом дає відвідувачеві можливість вибрати і кількість товару для замовлення. На HTML для відображення такого списку необхідно використовувати елемент <select паmе="імя цього елементу форми" >, усередині якого розміщені теги <ор-tion. . . >, у яких і вказані ті значення, що в меню відображуються. При відправці форми сторінці-обробникові сценарію на ній передається змінна з ім'ям, рівним імені елементу <select...> і значенням, рівним числу з параметра value того тега <option...>, який був відвідувачем вибраний. Скажімо, список на ріс.5.2 може відображуватися, наприклад, кодом <select name=spis> <option value=45>пepвим</option> <option value=81>bторой</option> <option value=31>tpетій</option> </select> Залежно від того, який пункт списку буде вибраний відвідувачем, сценарію-обробникові передасться як значення змінної $spis (і елементу масиву $HTTP_POST_VARS [ ' spis ' ]) те число, яке знаходилося в параметрі value тега <option>, що відображує вибраний пункт. Для введення відвідувачем контактних даних можна використовувати елемент <textarea. . . >, що дозволяє поміщати в себе досить довгі фрагменти тексту на декількох рядках (наприклад, поштова адреса), а для введення адреси електронної пошти - елемент типа text (він відображує однорядкове поле для введення тексту), рис. Форма, до якої відвідувач внесе відомості про своє замовлення і свої контактні дані, має бути відправлена власникові сайту. Для цього на сторінці, вказаній в заголовку форми як її обробник; потрібно розмістити сценарій, що збирає значення всіх елементів форми в єдиний текстовий рядок і відправляє цей рядок на e-mail власника сайту. Останнє зробити можна командою PHP mai 1 (). Отже, весь інтернет-магазин складатиметься з двох файлів: вітрини і обробника замовлення. Проте практично всі можливості для торгівлі будуть: і список товарів, і можливість вказівки вигляду і кількості товару, що замовляється. "Калькулятор", про бажаність якого згадувалося на попередньому кроці проектування, можна зробити на Javascript. Програма повинна відстежувати зміни у випадних списках, звірятися із списком цін і відповідно до даних цього списку виводити відвідувачеві повідомлення про вартість його замовлення. Виведення повідомлення краще всього зробити за допомогою засобів Dynamic HTML, динамічно змінюючи вміст сторінки.
ВІТРИНАОтже, ось основне, що має бути на першій сторінці інтернету-магазина. Весь дизайн, все оформлення залишається на ваш власний розсуд - поважно лише, щоб на сторінці були присутні перераховані нижче елементи. На початку сторінки, після тега <body>, але до яких-небудь описів товарів, повинен знаходитися заголовок форми: <FORM Method="post" Action="zakaz.php" Name="mainform"> Допустимо, що PHP-программа, оброблювальна форму, знаходиться у файлі zakaz.php (і саме на цю сторінку станеться перехід після натиснення кнопки типа submit у формі). Не забудьте вказати параметр паті в заголовку форми - він потім згодиться для використання в коді калькулятора вартості замовлення. (До речі, звернете увагу, що оскільки для передачі даних форми використовується метод POST, а не GET, то при цьому в адресному рядку дані полий форми відображуватися не будуть.) Ну а усередині форми слід розташувати коди випадних списків - поодинці на кожен товар (рис). Як значення параметрів паті найзручніше використовувати невеликі букводрукувальні - коди товарів: <select name="tov1"> <option value=0>0</option> <option value=1>1</option> <option value=2>2</option> ... <option value=10>10</option> </select> Звернете увагу, що першим по рахунку у випадному списку повинне стояти значення 0 - саме воно відображуватиметься за умовчанням. Також у формі мають бути присутніми поля введення контактної інформації - див. на ріс.5.1. Скажімо, текстовий рядок типа text з ім'ям e-mail - для адреси електронної пошти і поле введення тексту textarea з ім'ям contact - для введення контактних даних (що визнає потрібним покупець - ім'я, телефон, домашня адреса). <input name="email" type="text"> <textarea name="contact" cols="30" rows="5" wrap="virtual"> </textarea> (У параметрі cols тега textarea вказується кількість символів, яка повинна поміщатися в один рядок в полі введення тексту, в параметрі rows - кількість рядків тексту, які можна буде вписати в поле введення до появи смуг прокрутки. Параметр wrap="virtual" вирішує автоматичне перенесення тексту на наступні рядки в полі введення.) Зрозуміло, у формі має бути кнопка її відправки <input type=submit> і закриваючий тег форми </form>
ВІДПРАВКА ЗАМОВЛЕННЯПісля оформлення замовлення і натиснення відвідувачем кнопки відправки форми станеться перехід на сторінку, вказану в заголовку цієї форми (у даному сценарії - zakaz.php). Саме у цьому файлі міститься програма відправки замовлення. При передачі форми сценарію на РНР вміст кожного елементу переданої форми (для поля введення тексту - введений текст, для елементу <select. . .> - значення параметра value вибраного пункту <орtion>) поміщається в змінну, ім'я якої дорівнює значенню параметра паті даного елементу (Так відбувається, якщо у файлі pkp.mi встановлений в on параметр register_globals). Крім того, всі ці значення поміщаються в однойменних відповідним значенням параметрів паті елементи масиву $HTTP_POST_VARS (якщо форма передана методом POST) або $HTTP_GET_VARS (якщо форма передана методом GET) (Так відбувається, якщо у файлі php.ini встановлений в on параметр track_vars), а в РНР версії 4.1 і вище - ще і в масиви $_POST і $_GET відповідно. Наприклад, значення елементу <Select name="tov1"> буде доступне сценаріям на сторінці-обробнику в змінній $TOV1 і в елементі масиву $HTTP_POST_VARS [ "tov1' ] (а в РНР версії 4.1 і старше - ще і в елементі масиву $_POST [ ' T0v1' ]. Проте особливістю використання цих масивів зокрема є те, що для приєднання значення будь-якого їх елементу до якої-небудь строкової змінної не можна просто помістити їх всередину тексту рядка - потрібно використовувати оператора складання рядків: крапку. Скажімо, написати $zak="$zak $HTTP_POST_VARS['Tov1']"; не можна - треба використовувати формат $zak="$zak "$http_post_vars['Tov1']; Відправка листа здійснюється командою mail, як ви пам'ятаєте, що має формат тай ("Кому", "Тема", "Текст повідомлення", "Дополнітельниєзаголовки"); При виконанні даної команди на сервері формується електронний лист відповідно до вказаних параметрів і вирушає за допомогою встановленої на web-сервере поштової програми (Ви можете встановити таку програму і на своєму комп'ютері - використовуйте, наприклад, Office Mail Server Юрія Кучури (доступний з http://eu3eu.chat.ru) або Courier Mail Server Романа Ругаленко (доступний з http.V/courierms. narod. ru)). Як параметр "Кому" може виступати набір адрес, розділених комами. "Додаткові заголовки" можуть бути будь-які з допустимих поштовими протоколами, розділятися вони повинні комбінацією символів /п, яка в РНР означає переведення рядка. Якщо серед "Додаткових заголовків" не вказано поле From, то воно заповнюється по умолчаніюпочтової програмою, встановленою на web-сервере, наприклад, ім'ям "Unprivileged User". Для відправки листа із замовленням необхідно приготувати його текст. Можна, звичайно, просто включити в лист значення всіх змінних з іменами, рівними кодам товару (тобто отримані з елементів <select...>), і в кінець додати контактні дані відвідувача. Але куди як краще, щоб власник web-сайта отримував не набір код, які він ще повинен за своїми даними перевести в назви, а вже готовий список замовлених відвідувачем товарів (рис). Для цього в текст сценарію включимо блок визначення повної назви товару за його кодом. Отже, в будь-якому місці файлу-обробника форми, але краще всього на початку, слід помістити наступний сценарій: <?php $zak=""; (У цю змінну послідовно збиратимемо назви замовлених товарів.) if ($TOV1>0){$zak="$zak Назва товару 1 -$TOV1 шт.\n"; } if ($TOV2>0){$zak="$zak Назва товару 2 -$TOV2 шт.\n"; } ... І такі ж строчки - для кожного товару. Як ім'я змінної в умовній частині блоку if ($ . . . >0) вказується значення параметра паті відповідного тега <select. . .>, а в подальших фігурних дужках - назва того товару, до якого цей тег відносився на сторінці-вітрині. В результаті в тому випадку, якщо відвідувач змінив значення якого-небудь випадного списку на число, відмінне від нуля, то в змінну Szak, яка згодом стане текстом листа, що відправляється, включається назва товару, відповідного цьому випадному списку, і зведення про кількість його замовлених одиниць - та величина, яка врешті-решт і виявилася значенням цього випадного списку. Тепер завершимо складання тексту листа: $zak="C адреси $email від замовника з контактними даними $contact прийшла заявка на придбання товару: \n$zak"; і відправимо лист-заявку: mail ("електронна адреса власника сайту", "Замовлення на товар" $zak, "From: $email\nReply-To: $email\nContent-Type: text/plain; charset=windows-12 51");?> В результаті виконання цієї команди той, хто обробляє замовлення, отримає акуратний список замовлених товарів і зведення про замовника (див. рис). Причому якщо відвідувач правильно ввів свій е-mail, то для зв'язку з ним після одержання листа досить натискувати кнопку "Відповісти" або їй подібну в поштовому клієнтові - цей e-mail підставляється в заголовок листа From:. Лист буде відправлений через поштову програму, що знаходиться на сервері, - програми на комп'ютері відвідувача ніяк не торкнуться. Сам же файл, в якому розміщений код відправки листа, може містити, скажімо, вдячність відвідувачеві за замовлення - ріс.5.6 або відомості про те, куди звертатися за інформацією про етап його виконання. HTML-код сторінки просто поміщається услід за закінченням сценарію на РНР і виводиться в браузер після закінчення роботи сценарію. У приведеному сценарії замість однойменних елементів форми змінних можна використовувати і відповідні елементи масивів $HTTP_POST_VARS і (у РНР версії старіше 4.1) SPOST. Наприклад, рядок додавання в текст замовлення нового товару виглядатиме як if ($HTTP_POST_VARS['Tov1']>0){$zak="$zak Назва товару 1 - ".$HTTP_POST_VARS['Tov1']." шт.\n"; } рядок генерації листа - як $zak="C адреси ".$HTTP_POST_VARS['email']. " від замовника з контактними даними ".$HTTP_POST_VARS['contact']." прийшла заявка на придбання товара:\n$zak"; і команда відправки листа - змінена за тим же принципом.
КАЛЬКУЛЯТОРКалькулятор для відображення на сторінці вітрини інформації про суму замовлення зроблений на Javascript. Його текст приводиться нижче. Але, оскільки книга присвячена РНР, а не Javascript, до його команд дани лише мінімально необхідні коментарі. Просто помістите код сценарію в тексті web-страницы, набравши його з клавіатури або відсканувавши сторінки книги. У розділ <head> сторінки з вітриною слід помістити сценарій: <SCRIPT Language="javascript"> function calc() { У наступній строчці виробляється завдання масиву код товарів, що зустрічаються на web-странице і підлягають обліку. У ній мають бути перераховані коди товарів, що все зустрічаються на сторінці. Порядок перерахування код товарів не важливий і не залежить від їх порядку дотримання елементів <select, що містять їх...> на самій сторінці. tov=new Array("Tov1", "Tov2", "Tov3", "T0v4"); У іншій такій же строчці перераховуються ціни на ці товари точно в тому порядку, в якому перераховувалися коди товарів - на одних і тих же порядкових місцях повинні стояти код і ціна, що належать одному і тому ж товару. prc=new Array (100, 200, З00, 400); Сценарій продовжується... var kolvo=0; var stoim=0; for (n=0; n<tov.length; n++) { if (document.mainform(tov[n])!=null) { kolvo=kolvo+l*document.mainform(tov[n]).value; stoim=prc[n]*document.mainform(tov[n]).value+stoim; mess.innerНТМL="Количество замовлених товарів -"+kolvo+"<br>"+"CTOИMOCTb замовлених товарів -"+stoim; document.mainform("stoim").value=stoim; document.mainform("kolvo").value=kolvo; } </script> Коротко можна сказати, що цей сценарій при своєму запуску переглядає значення всіх елементів форм на web-странице, що мають перераховані в масиві tov імена (а, як ви пам'ятаєте, в цьому масиві перераховані коди товарів: тобто елементи з цими іменами - це відповідні цим товарам випадні списки <select...>), і обчислює суму цих значень (загальне число замовлених товарів) і суму творів цих значень на відповідне кожному коду число з масиву ргс - списку цін (тобто рахує загальну суму покупки). Набутих значень поміщаються в елементи web-страницы з ім'ям mess (текстове повідомлення), stoim (вартість замовлення), kolvo (кількість замовлених одиниць товару) (рис.). У кожен тег <select...>, присутній на сторінці і призначений для замовлення товару, додайте команду, приписуючу браузеру виконувати сценарій calc при кожній зміні значення елементу, що відображується цим тегом: <select name=tov1l onchange=calc ()> <option value=0>0 ... </select> У тому місці сторінки, де ви бажаєте відображувати відвідувачеві зведення про замовлення, помістите строчку з елементом <р> або <div>, що має ідентифікатор mess, - той же, що згадувався в сценарії (тут треба використовувати саме параметр id, а не nаmе): <р align=center id=mess> Інформація про замовлення з'явиться здесь</р> Де-небудь у формі також поставте два приховані поля: <input type=hidden name=stoim value=0> <input type=hidden name=kolvo value=0> За допомогою цих полів в сценарій-обробник будуть переданий значення вартості замовлення і кількості замовленого товару. В результаті власник сайту отримає в листі ще і ці відомості. Щоб останнє сталося, команду, складову текст листа в сценарії на сторінці-обробнику форми, зміните так, щоб вона включала в цей текст і значення змінних з прихованих полів: $zak="C адреси $email від замовника з контактними даними $contact прийшла заявка на придбання товару: \n$zак\пКоличество замовлених товарів -$kolvo\n О6щая вартість замовлення - $stoim"; ДОДАВАННЯ ТОВАРУДля додавання в магазин нового товару необхідно: - вставити на сторінку його опис і тег <select...> з кодом цього товару; - додати в сценарій-калькулятор нові елементи масивів код і цін товарів - можна просто в кінець; - додати в сценарії-обробнику строчку, що вставляє в текст листа назву товару згідно з його кодом.
ПЕРСПЕКТИВИОсь так, дуже просто, ви можете зробити елементарний інтернет-магазин. Звичайно, невеликий - всього на одній сторінці. Але замовити представлений на цій сторінці товар і відправити замовлення власникові відвідувач зможе. При роботі з таким інтернетом-магазином відвідувачеві навіть не потрібно бути постійно підключеним до Інтернету під час оформлення замовлення - він спокійно може завантажити сторінку з переліком товарів, відключитися від Мережі, вибрати потрібні пропозиції і заповнити поля форми замовлення, а потім, підключившись знову, це замовлення відправити. Та і саму сторінку із списком йому необов'язково отримувати саме з Мережі - ви можете відправити її кому-небудь поштою або помістити на компакт-диски, що роздаються друзям або колегам (лише не забудьте в цьому випадку вказати в заголовку форми повну адресу сторінки з обробником замовлення, а не лише її ім'я).
Завдання для створення сайтуНомер завдання відповідає номеру студента у журналі
З повагою ІЦ “KURSOVIKS”! |