Поточний час:
Сьогодні 22 листопада, середа 2017 рік

Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.80.169.119

Доброї ночі!
Ви обновили сторінку в 3 : 35

Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Почти три месяца прошло с тех пор, как я выложил статьи посвященные практике создания сайта, с помощью веб редактора и кодов. Остановились мы на фоновом изображении. Собственно, благодаря практике у меня получился довольно неплохой сайт с страницами.

За эти три месяца усвоилось еще больше материала по разработке сайта, и я узнал как дополнять сайт различными элементами, именно по материалам касающихся языка программирования РНР, я изложил уже десять публикаций, а также пять публикаций посвященных безопасности РНР.

Когда я усвою полностью данный материал, тогда начну применять полученные знания на практике, на Zura-Blog, в горизонтальном меню подняв курсор мышки на страницу HTML, можно из выпадающего списка  посмотреть названия страниц касающихся практических занятий, клацнув на название перейти по ссылке на одну из страниц, на которых описаны мои практические занятия.

Вообще, я считаю практика нужна всегда, благодаря практике закрепляются те знания которые удалось получить в процессе обучения. Поэтому практика, очень необходима. Поскольку на данный момент разрабатывать кому сайт пока – что у меня, желание если честно особого не имеется, поэтому для своих практических занятий, я применю свой создан учебный сайт.

По которому я ссылаюсь в етом материале,  на Zura-Blog описывались  практические занятия. Именно на странице “Создаем сайт на html (урок 1)” последний раздел был посвящен контактной форме, с различными дополнительными элементами, которые добавляются для контактной формы. На фото ниже вы можите посмотреть на все  элементы формы отправки, которые я, в процессе усвоения языка HTML  добавил чтобы увидеть результат в тренировочном сайте.

contact_form1

⇑ фото 1

И конечно для того чтобы только отправлять сообщения, такие элементы формы как ЧИБОКСЫ, Радиокнопка, ПАРОЛЬ, и другие из элементов лишние. Ведь для того чтобы создать контактную форму для отправки писем, видимо не нужны чебоксы, и радиокнопки. Нужно поле для ввода “имени”, можно поле с “фамилией” добавить, обязательно текстовое поле для “сообщение”, и кнопка для отправки сообщения

Но это еще не все, потому что хоть код сообщения и данные мы укажем на странице для контактной формы, но отправить сообщение не получиться никак, потому что для этого нужен скрипт написан на языке программирования РНР или JavaScript.

На блоге присутствует в наличии публикация “Создаем контактную форму на языке программирования РНР” в которой присутствует скрипт для отправки, и объяснение как его добавить к своей html-страницы, чтобы получить на сайте контактную форму.

В той публикации описано как создать РНР-страницу с формой для отправки, но страница с той формой будет обычной белой страницей с полем для отправки, и совсем не похожа на  ранее созданной мною в процессе обучения страницы тренировочного сайта, вместо страницы “Контакты” на сайте будет открываться обычная белая страница с полями для ввода данных для отправки. (рисунок ниже)

php2

⇑буде відкриватись звичайна біла сторінка

Меня такая форма не очень устраивала. Я бы хотел, чтобы при переходе на страницу “Контакты” у меня оставалась страница моего сайта, а не открывалась обычная белая страница с полями для ввода данных для отправки, с горизонтальным меню с фоновым изображением, на странице должны оставаться поля для ввода данных и конечно сделать работу формы полноценной, чтобы иметь возможность отправлять сообщения, хотя и форма которая присуствует в публикации “Создаем контактную форму на языке программирования РНР” в принципе тоже подходит для того чтобы справиться с такой задачей.

Но чтобы у вас на сайте появилось только поле с контактной формой а не обычная белая страница, нужно всего навсего  блок div з кода скопировать в нужное место, а код РНР оставить на самом верху страницы. Когда выходила эта публикация я не еще не знал как “впаять” именно ету форму в страницу, но теперь начал много времени уделять изучению РНР и конечно что нашел как справиться с такой задачей.

Как говорится “Век живи и век учись.” Кстати более подробно об етом будет написано в ближайшее время.

Но в то время я еще не знал каким образом вставить тот РНР-код, и поэтому мне пришлось искать другие способы, самое главное для любого веб мастера это уметь решить поставленную задачу, и первое что нужно научиться это находить нужную информацию в поисковиках, поскольку так как далее речь пойдет о другом коде, то конечно что мне удалось найти каким образом можно у себя на тестовом сайте добавить страницу с контактной формой, чтобы она вписывалась в дизайн сайта,  дать возможность отправлять сообщения.

За основу я возьму свой тестовый сайт, если вы создаете контактную форму “с нуля”, тогда некоторые действия вам делать не нужно.

 

Далее шаг за шагом, какие действия нужно сделать, для того чтобы страницу оставить неизменной, и иметь возможность отправить сообщение.

1— открываем в веб редакторе файл “contact”, в самом верху помещаем скрипт РНР, в самом верху выше всех данных, которые декларируют страницу,

Например если взять:<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

тогда еще выше в самом верху размещаем скрипт на странице “contact”, так нам не нужно будет соеденять страницу с файлом РНР. И не нужно будет создавать файл РНР, и на 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 о котором писалось в публикации нам теперь не нужен, так что его удаляем. Как и сам файл formdata.php.

Или можно оставить строку кода form action = “formdata.php» method = “post” name = “form1”> в таком случае нужно оставить и файл formdata.php, он находится у меня в главной папке сайта, и в том файле тогда нужно прописать этот код, тогда мы не прописываем код вверху страницы, и у нас на сайте останется файл formdata.php. Как кому удобнее.

3 — Далее прежнюю форму полностью удаляем, ведь там у нас осталось очень много лишних приложений, а прописываем иной код формы. Вначале присоединяем стили CCS.

 <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;
 background-image:url(../images/tablebg.jpg);
 background-repeat:repeat-x.y;
	border-style:solid;
	border-width:1px;
}
 </style>

Далее вставляем блок контактной формы

<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, и чтобы проверить работает форма установить пакет от “Девера”, с помощью которого мы создадим у себя на компьютере виртуальный сервер. Если вы создаете контактную форму “с нуля”, тогда просто создаете файл с разширением .php

5 — после того как мы  выполним все действия, запускаем браузер и проверяем как работает.

В предыдущих публикациях я уже указывал для того чтобы работать с языком программирования РНР, нам нужно в папке “home”, создать папку и назвать папку именем похожим на название сайта с доменным именем, например test. ua, а в только созданной папке создаем еще одну папку www, и в этой папке размещаем все наши файл, и добавляем файл contact.php.

Прописываем название в верхней поисковой панели, не в панели предназначенной поисковой системе Google или Yandex. Название http: // test. ua /contact.php и у нас должно появиться наша страница с контактной формой.

contact_form2

⇑має зявитись наша сторінка з контактною формою

6 — Вводим даные, точнее заполняем нашу форму, клацаем кнопку “Отправить”, страница перезагрузится, далее заходим в наш виртуальный диск “Z” в вас название диска может быть другая, открываем папку tmp в папке темп открываем папку! sendmail, а в папке! sendmail открываем последний файл с помощью редактора, например Notepad ++

contact_form3

⇑Перевірив все працює “Ок”

Проверил все работает “Ок”, файл должен находится в коренвой папке сайта, если он уже там есть тогда изменить разширения файла с html на php, и на всех страницах ссылки вместо 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

contact_form5

Кстати на следующий день я решил посидеть со стилями 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, и сверху рамки разместите текс “Ввод данных”. Практикуйтесь пригодится.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *