linkedin facebook linkedin facebook nod32

Php, css va jqure da forma shakl

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2017-02-09

Php, css va jqure da forma shakl yaratish usuli

PHP, CSS va jQuery dan xabar qoldirish formasini yaratishda foydalanamizi. formValidator plaginlarni qayta ishlash sohalarida va shakli tugmalari uchun kiritilgan ma'lumotlarni va JQTransform tekshirish uchun ishlatiladi. Barcha xabarlarni jo'natish uchun PHPMailer sinfidan foydalaniladi.
<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="formValidator/jquery.validationEngine.js"></script>

JavaScript o'chirilgan bilan yaxshi ishlaydi, chunki forma shakli yaxshi.

Qadam 1. – XHTML-forma quyidagicha tashkil qilinadi.

<div id="main-container"> <!—Asosiy forma -->
<div id="form-container"> <!—kontener forma -->
<h1>Xabar qoldirish formasi </h1> <!-- matn-->
<h2>Xabar qoldirishda barcha forma shakllarni to`ldiring</h2>
<form id="contact-form" name="contact-form" method="post" action="submit.php"> <!-- submit.php faylga post usuli yuboradi -->
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="18%"><label for="name">Ismingiz</label></td> <!-- Text label for the input field -->
<td width="45%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<!—shu erga xatolik xaqidagi xabarni yozadi-->
<td width="37%" id="errOffset">&nbsp;</td>
</tr>
<tr>
<td><label for="email">E-mail pochta</label></td>
<td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td>&nbsp;</td>
</tr>
<tr>

<td><label for="subject">Subject</label></td>
<!—select shakli jqtransorm plugini uchun tanlshni amalga oshiradi -->
<td><select name="subject" id="subject">
<option value="" selected="selected"> - Tanlang-</option>
<option value="Question">Php</option>
<option value="Business proposal">Css</option>
<option value="Advertisement">JavaScript</option>
<option value="Complaint">Jqure</option>
</select> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td valign="top"><label for="message">Matn qoldirish</label></td>
<td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<!—xabarni tasdiqlash uchun captcha qushish xabarida -->
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<!—Farmadagi xabarni yuborish uchun tasdiqlash-->
<td colspan="2"><input type="submit" name="button" id="button" value="Yuborish" />
<!—Farmadagi xabarni tozalash uchun tasdiqlash-->
<input type="reset" name="button2" id="button2" value="Tozalash" />

<?=$str?>
<!-- $str Js agar forma shaklini to`ldirishda xato bo`lsa shu erga ma`lumotni chiqaradi -->
<img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" />
<!—bu erda rasm animatsiyasi xarakati sodir bo`ladi-->

</td></tr>
</table>
</form>
<?=$success?>
<!-- $success agar xabar tug`ri tasdiqlansa js yakullanadi -->
</div>
</div> <!—forma kontenerni yopish-->

$ _SESSION-ma’lumotni formada ushlab turish uchun ishlatiladi. Formada sonlarning rasm ko`rinishida vaqtincha chiqarishni amalga oshiradi.
class=”validate[required,custom[onlyLetter]]- xabar qoldirish shaklarni bog`lashda muhim ro`l o`ynaydi. har bir shakl maydoni tekshirish uchun tekshirish qoidalarini amalga oshiradi.
Bizning forma shakli quyidagi kabi paydo bo'ladi:

Qadam 2. – jQuery index.php faylga quyidagi fayllarni bog`lang

<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<?=$css?> <!—PHP yordamida ccs bog`lash -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="formValidator/jquery.validationEngine.js"></script>
<script type="text/javascript" src="script.js"></script>

script.js kod quyidagi ko`rinishda bo`ladi

$(document).ready(function(){
/* Sahifa yuklanishi */
$('#contact-form').jqTransform();
/* jqtransform formaning ishlatilishi */
$("button").click(function(){
$(".formError").hide();
/* Xatolar xaqida xabar berish*/
});
var use_ajax=true;
$.validationEngine.settings={};
/* formValidation-forma shaklni to`g`irlash */
$("#contact-form").validationEngine({ /* ma’lumotni to`g`ri kiritilishini tekshirish */
inlineValidation: false,
promptPosition: "centerRight",
success : function(){use_ajax=true}, /* tasdiqlangandan so`ng ajax ishlashi */
failure : function(){use_ajax=false} /* agar xatolik bo`lsa AJAX ishlatilishi */
})
$("#contact-form").submit(function(e){
if(!$('#subject').val().length)
{

$.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error")

return false;
}
if(use_ajax)
{
$('#loading').css('visibility','visible');

$.post('submit.php',$(this).serialize()+'&ajax=1',
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error");

else
{
$("#contact-form").hide('slow').after('<h1>Raxmat xabar qabul qilindi!</h1>');
}
$('#loading').css('visibility','hidden');
});
}
e.preventDefault();
})
});

Qadam 3 – CSS kodi quyidagi ko`rinishda bo`ladi.
demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}
body{
color:#555555;
font-size:13px;
background: url(img/dark_wood_texture.jpg) #282828;
font-family:Arial, Helvetica, sans-serif;

}
.clear{
clear:both;
}
#main-container{
width:400px;
margin:30px auto;
}
#form-container{
background-color:#f5f5f5;
padding:15px;
-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}
td{

white-space:nowrap;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
h1{
color:#777777;
font-size:22px;
font-weight:normal;

text-transform:uppercase;
margin-bottom:5px;
}
h2{
font-weight:normal;
font-size:10px;
text-transform:uppercase;
color:#aaaaaa;
margin-bottom:15px;
border-bottom:1px solid #eeeeee;
margin-bottom:15px;
padding-bottom:10px;
}
label{
text-transform:uppercase;
font-size:10px;
font-family:Tahoma,Arial,Sans-serif;
}
textarea{
color:#404040;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
td > button{

/* CSS kod-IE6 brovzer uchun */
text-indent:8px;
}
.error{
background-color:#AB0000;
color:white;
font-size:10px;
font-weight:bold;
margin-top:10px;
padding:10px;
text-transform:uppercase;
width:250px;
}
#loading{
/* gif faylni yuklanish css */
position:relative;
bottom:9px;
visibility:hidden;
}
.tutorial-info{
color:white;
text-align:center;

padding:10px;
margin-top:10px;
}

Agar xatolik ro`y bersa xabar quyidagi ko`rinishga ega.

Qadam 4 – PHP index.php quyidagi ko`rinishga ega

<?php

session_name("fancyform");
session_start();
$_SESSION['n1'] = rand(1,15);
$_SESSION['n2'] = rand(1,15);
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];

$str='';
if($_SESSION['errStr'])
{
$str='<div class="error">'.$_SESSION['errStr'].'</div>';
unset($_SESSION['errStr']);
}

$success='';
if($_SESSION['sent'])
{
$success='<h1>Raxmat xabar qabul qilindi!</h1>';

$css='<style type="text/css">#contact-form{display:none;}</style>';

unset($_SESSION['sent']);
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xabar qoldirish forma shakli php,css,jqure da</title>

<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />

<?=$css?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="formValidator/jquery.validationEngine.js"></script>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="main-container"> <!—Asosiy forma -->
<div id="form-container"> <!—kontener forma -->
<h1>Xabar qoldirish formasi </h1> <!-- matn-->
<h2>Xabar qoldirishda barcha forma shakllarni to`ldiring</h2>
<form id="contact-form" name="contact-form" method="post" action="submit.php"> <!-- submit.php faylga post usuli yuboradi -->
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="18%"><label for="name">Ismingiz</label></td> <!-- Text label for the input field -->
<td width="45%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<!—shu erga xatolik xaqidagi xabarni yozadi-->
<td width="37%" id="errOffset">&nbsp;</td>
</tr>
<tr>
<td><label for="email">E-mail pochta</label></td>
<td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td>&nbsp;</td>
</tr>
<tr>

<td><label for="subject">Subject</label></td>
<!—select shakli jqtransorm plugini uchun tanlshni amalga oshiradi -->
<td><select name="subject" id="subject">
<option value="" selected="selected"> - Tanlang-</option>
<option value="Question">Php</option>
<option value="Business proposal">Css</option>
<option value="Advertisement">JavaScript</option>
<option value="Complaint">Jqure</option>
</select> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td valign="top"><label for="message">Matn qoldirish</label></td>
<td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<!—xabarni tasdiqlash uchun captcha qushish xabarida -->
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<!—Farmadagi xabarni yuborish uchun tasdiqlash-->
<td colspan="2"><input type="submit" name="button" id="button" value="Yuborish" />
<!—Farmadagi xabarni tozalash uchun tasdiqlash-->
<input type="reset" name="button2" id="button2" value="Tozalash" />

<?=$str?> <img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
</tr>
</table>
</form>
<?=$success?>
</div>
<div class="tutorial-info">
Qushimcha demo variyantni <a href="http://tami.uz/">oling</a> </div>

</div>

</body>
</html>

Qadam 5. submit.php fayli quyidagi ko`rinishga ega

<?php

/* configuradsiya boshlash */

$emailAddress = '';

/* configuradsiyani tugatish */

require "phpmailer/class.phpmailer.php";

session_name("fancyform");
session_start();

foreach($_POST as $k=>$v)
{
if(ini_get('magic_quotes_gpc'))
$_POST[$k]=stripslashes($_POST[$k]);

$_POST[$k]=htmlspecialchars(strip_tags($_POST[$k]));
}

$err = array();

if(!checkLen('name'))
$err[]='ismingizni kiriting!';

if(!checkLen('email'))
$err[]='e-mail pochtani kiriting!';
else if(!checkEmail($_POST['email']))
$err[]='e-mail pochtani xato kiritdingiz!';

if(!checkLen('subject'))
$err[]='tanlash bo`limini tanlamadingiz!';

if(!checkLen('message'))
$err[]='ma`lumot to`ldiring!';

if((int)$_POST['captcha'] != $_SESSION['expect'])
$err[]='captcha coda qo`shishda xato kiritdingiz!';

if(count($err))
{
if($_POST['ajax'])
{
echo '-1';
}

else if($_SERVER['HTTP_REFERER'])
{
$_SESSION['errStr'] = implode('<br />',$err);
$_SESSION['post']=$_POST;

header('Location: '.$_SERVER['HTTP_REFERER']);
}

exit;
}

$msg=
'Name: '.$_POST['name'].'<br />
Email: '.$_POST['email'].'<br />
IP: '.$_SERVER['REMOTE_ADDR'].'<br /><br />

Xabar:<br /><br />

'.nl2br($_POST['message']).'

';

 

$mail = new PHPMailer();
$mail->IsMail();

$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->AddAddress($emailAddress);
$mail->SetFrom($_POST['email'], $_POST['name']);
$mail->Subject = "A new ".mb_strtolower($_POST['subject'])." from ".$_POST['name']." | contact form feedback";

$mail->MsgHTML($msg);

$mail->Send();

unset($_SESSION['post']);

if($_POST['ajax'])
{
echo '1';
}
else
{
$_SESSION['sent']=1;

if($_SERVER['HTTP_REFERER'])
header('Location: '.$_SERVER['HTTP_REFERER']);

exit;
}

function checkLen($str,$len=2)
{
return isset($_POST[$str]) && mb_strlen(strip_tags($_POST[$str]),"utf-8") > $len;
}

function checkEmail($str)
{
return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str);
}

?>

Forma shaklni yuklab olish 112 kbayt

1380 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений