Майже три місяці пройшло з тих пір, як я виклав сторінки присвячені практиці створення сайту, використовуючи для цього тільки веб – редактор. Зупинились на фоновому зображенні, і створенню горизонтального меню з кнопок.
Власне практичні заняття дали результат, в мене по перше получилось створити досить непоганий сайт з сторінками, без допомоги шаблонів, а також без застосування систем управління контентом, використовуючи тільки коди і каскадні таблиці стилей.
За ці три місяця засвоїлось багато матеріалу по розробці сайту, дізнався як доповнювати сайт різними елементами, по матеріалах які стосуються мови програмування РНР я виклав десять публікацій, з яких пять присвячені такій важливій темі як безпека РНР.
Після того як отримаю більше знань по мові програмування РНР, тоді почну застосовувати отримані знання на практиці, в горизонтальному меню на Zura – Blog коли підвести курсор мишки до кнопки HTML, з випадаючого списку появляться назви сторінок, які стосуються практичних занять, клацнувши на одну з них, ви перейдети за посиланням на одну з сторінок, на яких описані мої практичні заняття.
Взагалі, я вважаю що практика потрібна завжди, завдяки практиці закріплюються ті знання які вдалось отримати в процесі навчання. Тому практика, дуже необхідна. Оскільки на даний момент розробляти комусь сайт поки – що в мене великого бажання якщо чесно не має, тому для своїх практичних занять, я застусовою тестовий сайт, який знаходиться в мене на компютері, на локальному сервері створеному з допомогою пакету програм від Денвер.
Сайт починався створюватись з одної HTML — сторінки, простим способом додаванням кодів, і спочатку навіть не в веб редакторі, а в звичайному текстовому Wordpad, в якому відсутня підсвідка кодів. Тоді ще навіть і не знав, що для веб розробки використовують спеціальні редактори.
По тестовому сайту, я орієнтуючись на Zura–Blog описую і ці практичні заняття.
Саме в перших матеріалах на сторінці з назвою “Створюємо сайт на html (урок 1)” останній розділ був присвячений контактній формі, з різними додатковими елементами, які додаються для контактної форми.
⇑ фото 1
І звичайно як для форми зворотнього звязку, то для того щоб лише відправляти тільки повідомлення, такі елементи як ЧІБОКСИ, РАДІОКНОПКИ, ПАРОЛЬ, і ще деякі інші з подібних елементів, будуть лишні.
Адже для форми яка потрібна для відправки листів, мабуть не потрібні ні чебокси, ні радіокнопки. Потрібні поля для введення “імені”, можна поле для “фамілії” добавити, обовязково текстове поле, це поле для “повідомлення”, і кнопка для відправлення повідомлення, можна ще кнопку для очищення полів в формі.
Але щоб ми могли відправити повідомлення цього замало, тому що хоч і текст повідомлення, і навіть дані ми вкажемо на сторінці контактної форми, але відправити наші дані, і повідомлення не получиться ніяк, бо для цього потрібний скрипт, написаний на мові програмування РНР, або JavaScript.
На Zura – Blog, також присутня і публікація по такому питанню “Створюємо контактну форму на мові програмування РНР”, в якій знаходиться скрипт для відправки даних, і пояснення як додати скрипт до html–сторінки, щоб створити на сайті повністю робочу контактну форму.
В публікації описано як створити РНР–сторінку з формою для відправки, але не вказано як додати таку форму до сайту, щоб вона повністю вписувалась в дизайн сайту, сторінка з формою якщо просто додати і зберегти файл з розширенням рнр, і прописати посилання на неї, буде відображатись в вкладці звичайна біла сторінка з формою для відправки.
Якщо лише додати цей файл з контактною формою, і в кодах тільки поміняти посилання на файл з розширенням рнр, то в вкладці появиться тільки сама форма на білому фоні, на моєму тестовому сайті відображається замість попередньої сторінки “Контакти”, яка була створена раніше, тільки форма відправки, і звичайно що мені потрібно щоб попередня сторінка збереглась, але вже з можливістю відправки листів, форма може бути і ця.
Що для цього потрібно зробити. Бо якщо тільки додати сам файл, звичайно що і прописати посилання на файл, то замість попередньої сторінки “Контакти”, на сайті вже буде відкриватись звичайна біла сторінка, тільки з полями для введення даних для відправки. (рисунок нижче)
⇑буде відкриватись звичайна біла сторінка
Мене такий варіант не дуже влаштовує. Я би хотів щоб при переході на сторінку “Контакти” в мене залишався дизайн сторінки мого сайту, а не відкривалась сторінка тільки з формою по середині, з полями для введення даних для відправки, а залишався той самий дизайн, з раніше вже створеним горизонтальним меню, а також з фоновим зображенням.
На сторінці форма для введення даних має знаходитись не зверху посередині, а в тому місці де мені потрібно, і повністю вписуватись в дизайн сайту, і звичайно зробити роботу форми повноцінною, щоб мати можливість відправляти повідомлення, форма яка описана в тій публікації “Створюємо контактну форму на мові програмування РНР” в принципі цілком підходить.
Отож що потрібно зробити, щоб щоб справитись з таким завданням.
Звичайно що уважно передивитись код. І щоб як на моєму тестовому сайті, так і у вас на сайті відображалась форма в потрібному місці, а не звичайна біла сторінка з формою, потрібно всього навсього блок “div”, з коду перенести в вибране місце на сторінці, в якому ми хочимо щоб контактна форма там відображалась, а сам код скрипта РНР потрібно розмістити в самому верху сторінки.
Коли виходила перша публікація присвячена скрипту для контактної форми, я ще не знав як “впаяти” форму в потрібне місце на сторінці, але на даний почав багато часу приділяти вивченню РНР, і звісно що знайшов як справитись з таким завданням.
Як говориться “Вік живи і вік учися.”
Хоча, на той час я ще не знав яким чином можна додати код для форми, щоб вона поєднювалась з дизайном, тому вирішив пошукати інші способи, саме головне для любого веб майстра це вміти вирішити поставлену задачу, і перше що потрібно навчитись це знаходити потрібну інформацію в пошуковиках, оскільки так як далі мова вже піде про інший код, то звісно що мені вдалось знайти яким чином можна в себе на тестовому сайті додати сторінку з контактною формою, щоб вона вписувалась в дизайн сайту, і надати можливість відправляти повідомлення.
В кінцевому підсумку тепер в мене в наявності два скрипта для відправки форми, посилання на публікацію про попередній скрипт знаходиться тут, на а далі матеріал буде стосуватись вже іншого скрипта для контактної форми.
Чим вони один від одного відрізняються, обидва робочі, в першому є в наявності поле для того щоб вказати телефон, можна видалити, але потрібно буде “попаритись” в кодах, видалити поле для введення телефону в самій формі, і в функції “function complete_mail()"
видалити змінну яка стосується массива [‘tel’], а також рядок який стосується “Контактний телефон”в змінній $mess =.
Поле з телефоном я вважаю лишнє, але заважати воно не буде, оскільки в скрипті не відноситься для обовязкового поля для заповнення, тому і повідомлення можна буде відправити без потреби заповнювати поле для введення телефоного номера.
Наступний скрипт про який дальше піде мова має один нюанс. Це функція eregi(), з виходом нової версії рнр v5.3.0, являється устарівшою. Тому в браузері буде відображатись подібного виду повідомлення, “Deprecated: Function eregi() is deprecated”, воно якраз і буде вказувати що функція устаріла, але скрипт всерівно робочий.
Мова РНР розвивається швидкими темпами, в ній часто щось міняється, тому і можлива поява подібного роду повідомлень, цю функцію в рнр всерівно ніхто ще не відмінив, тому і скрипт буде працювати.
На реальному сервері можливо і не буде відображатись подібна помилка, якщо вона вас дратує, тоді знайдіть файл php.ini відкрийте файл в редакторі, і там знайдіть в коді рядок, “mbstring.func_overload = 0”, поміняйте число “0” на “7”. Число “7” підключить всі старі функції, і повідомлення зникне.
Ну і нагрузив я інформацією, початківець мабуть “махне рукою”, та на що воно мені, паритись, щось міняти, я можливо також би подумав, але вважаю що інформація про устарівші функції колись пригодиться, будети знати, а дальше постараюсь надате просте пояснення, як говориться чим простіше тим краще.
Саме основне правило щоб рнр скрипт працював, це розширення файлу повинно бути рнр.
1— відкриваємо в веб–редакторі файл, в мене “contact.html”, якщо файл відсутній тоді створюємо новий, в самому верху поміщається код скрипта РНР, в самому верху вище всіх даних на сторінці, вище даних які декларують сторінку.
Наприклад візьмемо декларацію:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
ще вище, в самому верху розміщується скрипт.
Якщо розмістити скрипт для контактної форми в самому верху сторінки, тоді не потрібно буде створювани спеціально для контактної форми ще один файл обробник, з розширення рнр, і не потрібно буде зєднювати html – сторінку з цим файлом РНР. І не потрібно буде прописувати на сторінці з контактною формою прописувати шлях на нього, тому що сам скрипт, знаходиться в самому верху, на сторінці.
<?PHP //Якщо форма відправлена if(isset($_POST['submit'])) { //Перевірка поля ІМЯ if(trim($_POST['contactname']) == '') { $hasError = true; } else { $name = trim($_POST['contactname']); } //Перевірка поля ТЕМА if(trim($_POST['subject']) == '') { $hasError = true; } else { $subject = trim($_POST['subject']); } //Перевірка правильності введення EMAIL if(trim($_POST['email']) == '') { $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { $hasError = true; } else { $email = trim($_POST['email']); } //Перевірка присутності ТЕКСТА повідомлення if(trim($_POST['message']) == '') { $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['message'])); } else { $comments = trim($_POST['message']); } } //Якщо помилок не має, тоді відіслати email if(!isset($hasError)) { $emailTo = 'name@yourdomain.com'; //Сюда введіть Ваш email $body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments"; $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>
2 – посилання щоб зєднати сторінку з файлом formdata.php, про який я писав в попередніх публікаціх присвячених практичним заняттям по створенню сайту, в веб редакторі мовою html, мені тепер не потрібне, отож видаляю файл formdata.php.
Хоча можна і залишити, в принципі рядок в коді form action = «formdata.php» method = «post» name= «form1″ > все таки потрібно залишити, і файл formdata.php не видаляти, він ще можливо для чогось і пригодиться.
Адже в принцмпі це тестовий сайт, і працюю я на ньому маючи на меті практикування, файл знаходиться в середині головної папки сайту, місця багато не займає.
Отож можна розмістити цей код рнр – скрипта в файлі, і прописати на файл посилання з самої форми на сторінці, а можна просто додати на сторінку код із тим самим скриптом, і вказати в самій формі, що знаходиться скрипт (обробник) на цій сторінці.
В принципі кому як подобається, можна все втиснути в один файл, а можна розділити рнр – скрипт, і код в CCS на окремі файли, або ще й краще буде створити папки для рнр скриптів, і для каскадних таблиць стилей.
Для таких завдань вам потрібна буде практика, практика для того щоб навчитись прописувати посилання на файли. Прийдеться звісно що трошки попаритись, але все получиться, і форма коли запрацює відчується задоволення, від того що все получилось.
В своїх матеріалах я все таки орієнтуюсь на початківців, як простіше, не скажу, в принципі одинаково потрібно вказати шлях до скрипта рнр на сторінці, і до “CCS”, і потім форму взяти в блок “div”, взагалі то в коді форма вже знаходиться в блоці, просто сам блок “div” потрібно перенести в вибране місце, на сторінці для форми.
Як кому зручніше, хоча в рекомендаціях вказується що бажано не вписувати все один файл, а створювати окремі файли з папками, потім підєднювати між собою прописуючи посилання і правила. Рекомендують, тому що коли ваш код буде передивлятись хтось інший, в коді буде легше розібратись.
3 — Далі попередню форму з чібоксами і кнопками я також вирішив не видаляти, під неї вже самостійно зроблю скрипт для відправки, не скажу зараз скільки часу в мене займе на те щоб самому написати скрипт обробник, а можливо і код цієї форми підійде, звісно що і над ним потрібно попрацювати, модифікувавши його.
Зєднюємось з стилями CCS.
Якщо підєднювати стилі які знаходяться в окремому файлі, тоді рядок коду який підєднює стилі <style type = “text/css”> повинен бути інший, який читайте в публікації “Включення CSS в докумен HTML“.
<style type="text/css"> body { font-family:Arial, Tahoma, sans-serif; } #contact-wrapper { width:430px; border:1px solid #e2e2e2; background:#f1f1f1; padding:20px; } #contact-wrapper div { clear:both; margin:1em 0; } #contact-wrapper label { display:block; float:none; font-size:16px; width:auto; } form#contactform input { border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; padding:5px; font-size:16px; color:#333; } form#contactform textarea { font-family:Arial, Tahoma, Helvetica, sans-serif; font-size:100%; padding:0.6em 0.5em 0.7em; border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; } </style> </head>
Далі вставляємо блок “div” з контактною формою.
<body> <div id="contact-wrapper"> <?php if(isset($hasError)) { //Якщо знайдені помилки ?> <p class="error">Перевірте, чи правильно заповнені всі поля.</p> <?php } ?> <?php if(isset($emailSent) && $emailSent == true) { //Якщо лист відправлений ?> <p><strong>Email успішно відправлено!</strong></p> <p>Дякую <strong><?php echo $name;?></strong> Ваш email був відправлений, найближчим часом отримаєте відповідь.</p> <?php } ?> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform"> <div> <label for="name"><strong>Імя:</strong></label> <input type="text" size="50" name="contactname" id="contactname" value="" class="required" /> </div> <div> <label for="email"><strong>Email:</strong></label> <input type="text" size="50" name="email" id="email" value="" class="required email" /> </div> <div> <label for="subject"><strong>Тема:</strong></label> <input type="text" size="50" name="subject" id="subject" value="" class="required" /> </div> <div> <label for="message"><strong>Повідемлення:</strong></label> <textarea rows="5" cols="50" name="message" id="message" class="required"></textarea> </div> <input type="submit" value="Send Message" name="submit" /> </form> </div> </body>
4 — Міняємо розширення файлу contact.html на contact.php, адже щоб мати можливість перевіри чи працює форма, нам конче потрібне в файлі розширення php, а також щоб перевірити як працює форма, необхідно встановити пакет програм від “Девера”, за допомогою якого ми створемо в себе на компютері локальний сервер.
5 — пісято того як ми виконаємо всі дії, запускаємо браузер і перевіряємо чи все працює.
Нічого складного щоб додати контактну форму, на початку сторінки повинен знаходитись скрипт “рнр”, його ви першим копіюєте, і вствляємо код скрипта в вашу сторінку для контактної форми, потім йдуть правила каскадних таблиць стилей, прописуються між тегами <head> </head>, так само копюєте і вставляєте між тегами “head”, і накінець блок <div id =”contact-wrapper”> </div>, в блоці знаходиться контактна форма, вставляється між тегами <body></body>.
Всього лише три кроки, тільки скопіювати і вставити в потрібне місце, і контактна форма створена.
В цьому відео показано як створити саму простеньку контактну форму, всього лише скопіювати коди і вставити в потрібне місце, і форма створена
В попередніх публікаціях я вже вказував, для того щоб працювати з мовою програмування РНР нам потрібний локальний сервер, потрібно встановити пакет програм від Денвер, запустит Денвер, в папці “home” створити папку, назвати цю папку імям схожим на назву сайту з доменним іменем, наприклад test. ua, а в щойно створеній папці створюємо ще одну папку www, і в цій папці розміщуємо всі наші файли і папки,
Файл contact.php. Для того щоб побачити чи відображається сторінка з контактною формою, до адреси http://test.ua потрібно вказати адресу на цей файл /contact.php
Прописуємо назву в верхній пошуковій панелі браузера адресу, не в панелі призначеній для пошукових систем Google чи Yandex.
Наприклад назва папки сайту test.ua тоді вказуємо таку адресу http://test.ua /contact.php, файл contact.php повинен знаходитись в папці www, а папка www в папці test.ua
Команда “Enter”, після перезапуску має зявитись сторінка з контактною формою.
⇑має зявитись наша сторінка з контактною формою
6 — Вводимо дані, щоб перевірити чи працює форма, заповнюємо нашу форму, натискаємо кнопку “Відправити”, сторінка перезапуститься, далі провіряємо результат, шукаємо відправлений лист, шлях де лист повинен знаходитись.
В віртуальному диску “Z” (створений програмою Денвер), в вас назва диску може бути інша, відкриваємо папку tmp, в папці tmp відкриваємо папку !sendmail, а в папці !sendmail відкриваємо останній файл з допомогою редактора, наприклад Notepad++
⇑Перевірив все працює “Ок”
Перевірив, результат є, все працює “Ок”, мені залишається розмістити файл в коренву папку сайту, і поміняти на всіх сторінках посилання замість contact.html на contact.php.
<a href=”contact.html””#” class=”button “>Контакти</a>
на
<a href=”contact.php””#” class=”button “>Контакти</a>
або залишити обидва посилання додавши “contact.php” і в назві кнопки class=”button “>Контакти додати “1” щоб не путати сторінки.
а сторінку contact.html використати для інших цілей, видалити в рядку коду слово “Контакти” і вставити іншу назву щоб не путатись ” “.
Форма створена, вид сторінки не поганий, збоку я додам ще якусь картинку з прозорим фоном, можна форму помістити в центр сторінки, кому як подобається, можна форму взяти в рамку, не має значення, головне що форма передає дані коректно без каракуль.
Якщо у вас в браузері будуть не правильно відображатись символи, тоді в Notepad++ потрібно поміняти кодування, клацаємо в верхній панелі кнопку “Кодування”, і з випадаючого списку даємо команду “Перетворити в ANSI”
До речі на наступний день я вирішив посидіти зі стилями css щоб прикрасити контактну форму, щоб зробити сам вид контактної форми більш сучаснішим, якщо вид форми на фото вам сподобався, нижче я розмістив код css, який вставляєте в свою сторінку, призначену для котактної форми, перед закриваючим тегом </head>.
Або створіть файл з розширенням css, вставте цей код в створений файл, а на сторінці пропишіть посилання щоб зєднати сторінку з файлом.
<style type="text/css"> body { font-family:Arial, Tahoma, sans-serif; color:#FFFFFF; } #contact-wrapper { width:430px; border:1px solid #e2e2e2; background-image:url(../images/medium.jpg); padding:20px; } #contact-wrapper div { clear:both; margin:1em 0; } #contact-wrapper label { display:block; float:none; font-size:16px; width:auto; } form#contactform input { border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; padding:5px; font-size:16px; color:#333; } form#contactform textarea { font-family:Arial, Tahoma, Helvetica, sans-serif; font-size:100%; padding:0.6em 0.5em 0.7em; border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; }
В самому коді два графічних файли, один з розширенням gif інший з розширенням jpg. Відшукайте рядки в коді і поміняйте на вашу назву графічних файлів, рядок з розширенням jpg знаходиться в стилях css
<div id="contact-wrapper"align="right"> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform"> <div> <img src="images/donald.gif"width="100" height="120" align="left" > <label for="name"><strong>Імя:</strong></label> <input type="text" size="30" name="contactname" id="contactname" value=""class="required" /> </div> <div> <label for="email"><strong>Ваш Email:</strong></label> <input type="text" size="30" name="email" id="email" value=""class="required" /> </div> <div> <label for="subject"><strong>Тема:</strong></label> <input type="text" size="30" name="subject" id="subject" value=""class="required" /> </div> <div> <label for="message"><strong>Повідомлення:</strong></label> <textarea rows="5" cols="50" name="message" id="message"></textarea> </div> <input type="submit" value="Відправити" name="submit" /><input type="reset" name="batton1" value="очистити"/> </form> <p>* Всі поля необхідно заповнити</P> </div>
background-image:url(../images/medium.jpg);
поміняйте назву “medium” або поміняйте назву вашого графічного файлу на “medium“
рядок з розширенням gif знаходиться в блоці div id=”contact-wrapper”
<img src=”images/donald.gif”width=”100″ height=”120″ align=”left” >
поміняте назву “donald” або поміняйте назву вашого графічного файлу на “donald“, розмір gif–анімації 100х120, або просто видаліть рядок.
Якщо колір тексту білий вас не влаштує, поміняйте, він знаходиться на початку коду стилей css. На рахунок контактної форми все, хто має бажання попрактикуйтесь, наприклад візміть форму в рамку як на фото 1, і зверху рамки розмістіть текст “Введення даних”. Практикуйтесь пригодиться.
На наступний день щоб зробити сам вид контактної форми дещо іншим, я вирішив “по сидіти” над кодами сторінки з контактною формою, і додавши два графічні файли з розширенням jpec і gif, зробив вид форми з картинкою і анімацією.
На відео показано як підігнати по розміру цю форму звязку, міняючи числа в кодах.
Сторінки які стосуються створення сайту з звичайного html шаблону на мові гіпертекстової розмітки HTML, застосовуючи тільки редактори, без допомоги спеціальних програм, які призначені для створення сайту.