Jquery qeydiyyat və avtorizasiya formaları. PHP, MySQL və jQuery istifadə edərək əla qeydiyyat sisteminin yaradılması. Siz artıq qeydiyyatdan keçmisiniz

IN Twitter şəbəkələri Səhifənin təmiz və iddiasız dizaynla işini izləyə bilərsiniz. Səhifənin yuxarı sağ tərəfinə baxın, orada sistemə avtorizasiya düyməsini görəcəksiniz, üzərinə klikləməklə məlumatları doldurmaq üçün formaları görəcəksiniz. Bu gün sizə öz veb saytınızda oxşar effekti necə edəcəyinizi söyləyəcəyik. Əslində, çox sadədir. Bundan əlavə, bu, səhifədə yer qənaət etməyə kömək edəcək və ziyarətçilərinizə rahatlıq hissi əlavə edəcəkdir. Bu yazıda biz sizə bütün sistemin necə işlədiyinə dair addımlar atacağıq və bu bələdçi jQuery öyrənmək istəyənlər üçün də faydalı olacaq. İrəli!

HTML kodu

Əvvəlcə HTML kodu ilə başlamalısınız. HTML kodu çox sadədir - o, "fieldset" teqi ilə birlikdə gedən "a" teqini ehtiva edir və bunun sayəsində forma göstərilir.

Sadəcə bunu koda kopyalayın yeni səhifə:

Hesabınız var? daxil olun


İstifadəçi adı və ya E-poçt

parol

məni xatırla

Şifrəni unutmusan?

İstifadəçi adınızı unutmusunuz?

Sizə lazım olacaq CSS istifadəsi avtorizasiya düyməsini və giriş formasını müəyyən etmək üçün. Aşağıdakı kod tam olaraq bu funksiyanı yerinə yetirir.

Sadəcə olaraq bu kodu css faylınıza köçürün və ya stilinizi təyin etdiyiniz HTML kodunuza əlavə edin. Bu kodlar avtorizasiya düyməsini müəyyən edir.

#konteyner (
eni: 780px;
marja: 0 avtomatik;
mövqe: nisbi;
}

#məzmun(
eni: 520px;
minimum hündürlük: 500px;
}
a:link, a:ziyaret edildi (
rəng:#27b;
mətn dekorasiyası:yoxdur;
}
a: sürüşdürün (
mətn dekorasiyası:altını çəkmək;
}
bir img (
sərhəd eni: 0;
}
#topnav(
doldurma:10px 0px 12px;
font ölçüsü: 11px;
xəttin hündürlüyü: 23px;
mətni düzün: sağa;
}
#topnav a.giriş (
fon:#88bbd4;
doldurma:4px 6px 6px;
mətn dekorasiyası:yoxdur;
şrift çəkisi: qalın;
rəng:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
sərhəd radiusu: 4px;
*arxa fon:şəffaf url("şəkillər/signin-nav-bg-ie.png") təkrar olunmur 0 0;
*doldurma:4px 12px 6px;
}
#topnav a.signin:hover (
fon:#59B;
*arxa fon:şəffaf url("şəkillər/signin-nav-bg-hover-ie.png") təkrar olunmur 0 0;
*doldurma:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*fon mövqeyi:0 3px!vacib;
}

a.giriş(
mövqe: qohum;
kənar-sol: 3px;
}
a.giriş aralığı(
background-image:url("şəkillər/toggle_down_light.png");
fon-təkrar:təkrar yoxdur;
fon mövqeyi: 100% 50%;
doldurma:4px 16px 6px 0;
}
#topnav a.menyu-açıq(
fon:#ddeef6!vacib;
rəng:#666!vacib;
kontur: heç biri;
}
#kiçik_qeydiyyat(
ekran:daxili;
üzmək: heç biri;
xəttin hündürlüyü: 23px;
haşiyə: 25px 0 0;
eni: 170px;
}
a.signin.menu-açıq span(
background-image:url("şəkillər/toggle_up_dark.png");
rəng:#789;
}

Və sonra giriş formasının tərifi gəlir:

#giriş_menyu(
-moz-border-radius-topleft:5px;
-moz-border-radius-sol alt:5px;
-moz-border-radius-aşağı sağ:5px;
-webkit-border-yuxarı-sol-radius:5px;
-webkit-border-aşağı-sol-radius:5px;
-webkit-sərhəd-aşağı-sağ-radius:5px;
ekran: heç biri;
fon rəngi:#ddeef6;
mövqe: mütləq;
eni: 210px;
z indeksi: 100;
sərhəd: 1px şəffaf;
mətni düzün: sola;
doldurma: 12px;
yuxarı: 24,5px;
sağ: 0px;
kənar-yuxarı: 5px;
kənar-sağ: 0px;
*sağ kənar: -1px;
rəng:#789;
font ölçüsü: 11px;
}

#giriş_menyu girişi, #giriş_menyu girişi (
ekran: blok;
-moz-border-radius:4px;
-webkit-border-radius:4px;
haşiyə: 1px bərk #ACE;
font ölçüsü: 13px;
kənar: 0 0 5px;
doldurma: 5px;
eni: 203px;
}
#giriş_menyu p(
marja: 0;
}
#giriş_menyu a (
rəng:#6AC;
}
#giriş_menyu etiketi (
font-weight:normal;
}
#giriş_menyu p.xatırla(
doldurma: 10px 0;
}
#giriş_menyu p.unutdum, #giriş_menyu p.tamamlandı (
aydın:hər ikisi;
kənar: 5px 0;
}
#giriş_menyu p a (
rəng:#27B!vacib;
}
#giriş_göndər(
-moz-border-radius:4px;
-webkit-border-radius:4px;
fon:#39d url("şəkillər/bg-btn-blue.png") təkrar-x sürüşdürün 0 0;
haşiyə:1px bərk #39D;
rəng:#fff;
mətn kölgəsi:0 -1px 0 #39d;
doldurma: 4px 10px 5px;
font ölçüsü: 11px;
kənar: 0 5px 0 0;
şrift çəkisi: qalın;
}
#signin_submit::-moz-focus-inner (
doldurma: 0;
sərhəd: 0;
}
#giriş_göndər:göstər, #giriş_göndər:fokus (
fon mövqeyi:0 -5px;
kursor: göstərici;
}

Javascript ilə işləmək vaxtıdır

Deyəsən, HTML kodları və CSS olduqca mürəkkəb və qarışıqdır, lakin javascript-də hər şey çox sadədir. Sadəcə olaraq, giriş düyməsi kliklədikdə formanı göstərəcək və gizlədəcək bu javascript kodunu kopyalayın, hətta klik giriş formasından kənarda olsa belə.

$(sənəd).ready(funksiya() (

$(".giriş").klik(funksiya(e))
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menyu-açıq");
});

$("fieldset#signin_menu").mouseup(funksiya() ()
yalan qaytar
});
$(sənəd).siçan(funksiya(e))
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("menyu-açıq");
$("fieldset#signin_menu").gizlət();
}
});

});

Yuxarıdakı koda görə, ziyarətçi giriş düyməsini kliklədikdə, yeni xüsusiyyət. Əvvəlcə giriş forması göstərilir ("filedset" teqinə bükülmüşdür), sonra ".signin" sinfinə bükülmüş link arxa fon şəklini dəyişən başqa bir "menyu-açıq" sinfi əlavə edir.

Bu koddakı başqa bir hadisə də budur ki, ziyarətçilər giriş formasına deyil, səhifənin hansısa yerinə klik etdikdə, forma özü bağlanır. Başqa sözlə, "menyu-açıq" sinfi ".signin" sinfi ilə əlaqədən çıxarılır və orijinal fon şəklini ona qaytarır.

İpuculara gəlincə?

$(funksiya()(
$("#forgot_username_link").tipsy((ağırlıq: "w"));
});

Biz ümumiyyətlə ipucu jQuery plaginindən istifadə etməyi məsləhət görürük. Alət məsləhətinin məzmunu keçidlə əlaqəli "başlıq" atributunda yazılanlardır. Siz şərq, qərb, cənub və ya şimala nisbətən alət ipucunun yerini dəyişə bilərsiniz. Bu, yuxarıdakı kodda göstərilən "ağırlıq" parametri vasitəsilə həyata keçirilir. Biz sizə bu plaqinə həsr olunmuş sayta keçid təqdim edirik, burada onun imkanlarını daha ətraflı araşdırıb plaqini yükləyə bilərsiniz. …

Nəhayət

Bu məqalədən bütün kodu köçürmüsünüzsə, lütfən, qovluq strukturunu dəyişməyin. Onu dəyişdirsəniz, kod işləməyəcək. Verilmiş kod jQuery ilə açılan giriş formasının yaradılmasına sadəcə bir nümunədir. Təcrübənizdə uğurlar!

Biz Habré-də dərc edilmiş bəzi nümunələrlə əlavə etmək qərarına gəldik ki, siz qeydiyyat və icazə formalarını təkmilləşdirmək üçün bəzi "innovativ üsullar" haqqında məlumat əldə edəsiniz.

Beləliklə, bir neçə hiylə:

• parol girişinin dublikatına ehtiyac yoxdur;

İstifadəçinin həyatını asanlaşdırmaq üçün (bunun nə üçün Google-da yaxşı göstərilib), bir sahə və "maskanı" aradan qaldıracaq bir onay qutusu etmək daha yaxşıdır - bütün bunlar kiçik bir javascript kodundan istifadə etməklə edilir.

// // //

1. jQuery kitabxanası.

2-7. elementin işə salınması.

B. Formanın HTML kodu aşağıdakı kimidir:

Giriş: Şifrə:

5-6. bu sahələrin görünməsi skript tərəfindən qeyd qutusu ilə dəyişdirilir.

B. init.js

$(sənəd).ready(function()( $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", ( mətn: "Xüsusi qeyd qutusu", ad: "showmypass "))))))

G.styles.css

Gövdə (şrift ailəsi: Arial, Helvetica, serif, sans-serif; ) forma ( kənar: 15px 0; doldurma: 15px; fon: #ccc; rəng: #000; haşiyə: 1px bərk #aaa; en: 500px; ) form label.form ( float: sol; en: 120px; display: block; ) form input#testpassword1, form input#testpassword ( float: left; display: block; ) .clear ( təmiz: hər ikisi; ) div.checker ( təmiz : hər ikisi; ekran: blok; haşiyə: 1px nöqtəli #2d2d2d; rəng: #2d2d2d; fon: şəffaf; en: 230px; şrift ölçüsü: 0.8em; kənar: 20px 0 0 0; )

• daxil edilmiş məlumatlar əsasında sahələri avtomatik doldurmaq daha yaxşıdır;

İstifadəçi nə qədər az daxil olsa, bir o qədər yaxşıdır. Bəzi sahələr əvvəlki, artıq daxil edilmiş məlumatlardan başlayaraq doldurula bilər. Məsələn, "poçt kodu" sahəsindən dəyəri oxuyub emal etməklə "şəhər" sahəsini doldura bilərsiniz. Sadə bir ajax sorğusu və işiniz bitdi. AJAX istifadə poçt kodundan şəhər və rayon məlumatlarını əldə etmək.

A. Biz kitabxanaları ‹başlıq›na daxil edirik:

1. jQuery kitabxanası.
2. Əsas ssenari.

B. Formanın HTML kodu aşağıdakı kimidir:

Poçt Kodu Şəhər Ölkə

1. Poçt kodunun daxil edilməli olduğu sahə.

B. zip_city.js:

Funksiya fillcitystate(controlname)( var poçt kodu = trim(controlname.value); // boşluqları kəsin if(zipcode.length!=5)( //uzunluğu yoxlayın false; ) var zipstring = ""; xmlhttp = yeni XMLHttpRequest() ; xmlhttp.open("GET", "php/zip_city.php?zip=" + poçt kodu, doğru); //php-yə sorğu göndərin xmlhttp.onreadystatechange=function()( //nəticə alınarsa (xmlhttp.readyState) = =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Error")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; //set şəhər sahəsi üçün dəyərlər document.getElementById("txtCountry").value = ziparray; //Ölkə sahəsi üçün dəyərlər təyin edin ) ) ) xmlhttp.send(null); ) //Space trim funksiyası trim(s) ( var l) =0; var r=s.uzunluq -1;while(l< s.length && s[l] == " ") { l++; } while(r >l && s[r] == " ") ( r-=1; ) s.substring(l, r+1); )

D. zip_city.php: ajax sorğu işləyicisi.

Require_once("db.php"); $db_table = "zip_city"; //qaytarma dəyəri üçün standart parametr $returnval = "Xəta"; //GET parametrini əldə edin $zipcode = $_GET["zip"]; //öncədən işlənir if (strlen($zipcode)>5)( $zipcode = substr($zipcode, 0, 5); ) if (strlen($zipcode)!=5)( die ($returnval); ) //alılır verilənlər bazasından dəyərlər $query = "SEÇ * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) or die("Sorğu icra etmək mümkün deyil: Sorğu: ".$query."".mysql_error($conn)); $rowcount = mysql_num_rows($nəticə); if ($rowcount==1)( $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))."|" .$row["ölkə"];//əslində uğurlu cavabın formalaşması ) echo $returnval;

E. db.php: verilənlər bazası bağlantısı konfiqurasiyası.

//verilənlər bazasına qoşulma parametrləri $dbhost = "localhost"; $dbusername = "kök"; $dbpass = ""; $db_name = "blog_giriş"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) or die("MySQL verilənlər bazası serverinə qoşulmaq mümkün deyil:".mysql_error()); $db = mysql_select_db($db_name, $conn) or die("Verilənlər bazasını açmaq mümkün deyil:".mysql_error($conn));

F. Verilənlər bazası cədvəlinin yaradılması:

`zip_city` (`id` int(11) NULL DEYİL AUTO_INCREMENT, `zip` varchar(5) NULL DEYİL, `şəhər` varchar(255) NULL DEYİL, `ölkə` varchar(255) NULL DEYİL, İLKİN AÇAR (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921 ;

• giriş sahəsində avtomatik əvəz edə bilərsiniz;

Bəzi sahələr məhdud giriş dəyərlərinin dəstini tələb edir. Məsələn, istifadəçi iki simvol daxil edə, həmin hərflərlə başlayan ölkələrin siyahısına baxa və asanlıqla istədiyini seçə bilər. Bundan əlavə, o, şübhəsiz ki, vətən adına səhvlərə yol verməyəcək. jQuery altında AJAX Avtomatik Tamamlama.

A. ‹başlığa› daxil edin:

1. jQuery kitabxanası.
2. jQuery üçün avtomatik tamamlama skripti.
3. Əsas ssenari.

B. Formanın HTML kodu aşağıdakı kimidir:

Bir ölkə

1. Ölkənin adını daxil etməyə başlamalı olduğunuz sahə.

B. init.js:

Var variantları, a; jQuery(function()( options = ( serviceUrl:"./php/autocomplete.php" ); /*işləyici faylının ünvanını təyin edin*/ a = $("#query").avtomatik tamamlama(seçimlər); /*avtomatik tamamlama obyektini təyin edin id="query"*/ ilə ));

D. autocomplete.php: ajax sorğu işləyicisi

If(isset($_GET["query"]) && (!empty($_GET["query"])))( require_once("db.php"); $db_table = "sistem_ölkələri"; //verilənlər bazası cədvəlinin adı $ query = $_GET["query"]; //forma sahəsindən sorğu $variants = ""; $q = "SEÇ `ad_en` FROM `($db_table)` HARADA `ad_en` REGEXP "^($query)(. *)" GROUP BY `name_en`"; /*daxil edilən ilk simvollar üzrə axtarın*/ $res = mysql_query($q) və ya die("Sorğu icra etmək mümkün deyil: Sorğu: ".$q."".mysql_error($conn ) ); /*sorğu nəticəsini əldə edin*/ if(mysql_num_rows($res)>0)( while($row = mysql_fetch_row($res))( $variants = """.$row."""; /* massiv seçimlərini doldurun*/) $variants = implode(",",$variants); /*vergüllə ayrılmış bütün variantları sətirdə doldurun*/ /*cavab yaradın*/ $request = "( query:"". $query."", təkliflər:[".$variants."] )"; echo $request; ) )

E. Verilənlər bazası cədvəlinin yaradılması:

`sistem_ölkələri' MÖVCUDDURSA CƏDVƏLİ DÜŞÜR; CƏDVƏL YARADIN `sistem_ölkələri` (`id` int(11) NULL DEYİL auto_artırma, `name_en` char(128) NULL DEYİL, `ad_en` char(128) default NULL, `kod` char(2) NULL DEYİL, `_sifariş` int(3) default "0", `müstəqil` tinyint(1) default "1", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

G. styles.css:

Avtomatik tamamlama-w1 ( background:url(/autocomplete/img/shadow.png) təkrar olunmur sağ alt; mövqe: mütləq; yuxarı: 0px; sol: 0px; kənar: 8px 0 0 6px; /* IE6 düzəlişi: */ _background :heç biri; _margin:0; ) .avtomatik tamamlama ( haşiyə:1px bərk #999; fon:#FFF; kursor:default; mətni hizala:sol; maksimum hündürlük:350px; daşqın:avtomatik; kənar:-6px 6px 6px - 6px; /* IE6 spesifik: */ _height:350px; _margin:0; _overflow-x:hidden; ) .autocomplete .selected ( background:#F0F0F0; ) .autocomplete div (padding:2px 5px; white-space:nowrap; ) .avtomatik tamamlama güclü ( şrift çəkisi:normal; rəng:#3399FF; )

• niyə məlumatları iki dəfə daxil edin?

Bir çox onlayn mağaza ödəniş və göndərmə ünvanı sahələri ilə çox addımlı sifariş formalarından istifadə edir. Çox vaxt onların mənaları eynidir. Niyə istifadəçiyə artıq daxil edilmiş sahələrin dəyərlərini bir kliklə təkrarlamağı təklif etmirsiniz? Proqramlı olaraq, texnika sadədir və onu dəyərlərin təkrarlanma ehtimalının nəzərdə tutulduğu müxtəlif hallarda istifadə edə bilərsiniz.

A. ‹başlığa› daxil edin:

1. jQuery kitabxanası.

2.jQuery Plugin seçin

3. əsas skript.

B. Formaların HTML kodu aşağıdakı kimidir:

Ödəniş məlumatları.

14. Kopyalama qutusunu seçin.

B. init.js:

//səhifə yükləndikdə $(sənəd).ready(funksiya() ( //onay qutusu aktiv və ya qeyri-aktiv olduqda $("#copyaddress").click(function() ( // əgər aktivdirsə ($("#) copyaddress") .is(":checked")) ( //hər bir giriş sahəsi üçün $("#göndərmə_sahələrinin girişi", ":görünür", sənəd.body).each(funksiya(i) ( //dəyərləri kopyalayın) ödəniş sahələrindən // müvafiq çatdırılma sahələrinə $(this).val($("#billing_fields input").eq(i).val()); )); //açılan menyularla işləmir, ona görə də istifadə edin plugin funksiyaları var bcountry = $( "#bcountry").val(); $("#scountry").selectOptions(bcountry); ) else ( //əgər qeyd qutusu qeyri-aktivdirsə //hər bir giriş sahəsi üçün $("#) göndərmə_sahələri girişi", ":görünür", sənəd.bədən).each(funksiya(i) ( //göndərmə məlumatı sahələrini təmizləyin $(bu).val(""); )); $("#ölkə").selectOptions (""); ))) ; ));

• Deyəsən insanlar captcha oxumaqdan yorulub :)

Axı siz özünüz captcha-dan oxunmayan simvolları oxumaqdan və sonra onları daxil etməkdən yorulmusunuz. İstifadəçilərə rəhm edək, amma eyni zamanda, botları da əldən verməyək. Bunu etmək üçün bir neçə üsula müraciət edə bilərsiniz, onlardan birini nəzərdən keçirin. Honeypot Captcha yanaşması - biz formada istifadəçiyə görünməyən, lakin bot üçün görünən sahə yaradırıq. Bu dəyəri yoxlamaqla biz Real İnsanlar üçün çətinlik yaratmadan səhlənkar spam göndərənləri tuta biləcəyik. Captcha-nın çevrilmə sürətinə təsiri.

A. Formanın HTML kodu aşağıdakı kimidir:

Ad Soyad E-poçt Gizli sahə. Əgər onu doldurmusunuzsa, deməli siz botsunuz

B. aşağıdakı js əlavə edin:

Function check() ( if(document.form_find.body.value)( console.log("DİQQƏT!!! BOT SƏHİFƏDƏ!!!"); ) )

Avtorizasiya prosesi, obrazlı desək, insanın saytı “salamlaması”dır. Orta əsrlərdə, ləyaqətli evlərdə, onlar təkrar təzim və əyilmələrlə qarşılanırdılar. Amma biz zamanla ayaqlaşacağıq və əmin olacağıq ki, salamlaşma üçün yalnız bir isti əl sıxışması kifayətdir. Sayta girişi sadələşdiririk.

• İstifadəçini daxil olduğu səhifəyə buraxırıq;

Seçmək üçün iki seçim var: açılan forma və modal pəncərə. Açılan forma səhifənin yalnız kiçik bir sahəsini tutur və istifadəsi asan və tezdir.

A. Biz kitabxanaları ‹başlıq›na daxil edirik:

3. Əsas ssenari.

B. Formanın HTML kodu aşağıdakı kimidir:

Giriş Parol Məni yadda saxla Avtorizasiya etmək üçün loqininizi daxil edin: login və parol: parol

4. Formanı açmaq üçün düymə.

7-22. Formanın özü.

19. Çox uzun müddət kukilərin qurulmasını təmin edən onay qutusu.

23. Mesaj üçün yer.

B. jqeasy.dropdown.js:

$(sənəd).ready(funksiya() ( /*əsas funksiya*/ $(".btnsignin").klikləyin(funksiya(e) ( /*giriş düyməsinə kliklədikdə*/ e.preventDefault(); $ ("#frmsignin").toggle("fast",function() ( /*formanın görünməsini dəyişdirin*/ $("#username").focus(); /*giriş kursorunu giriş sahəsinə köçürün* / )); $ (bu).toggleClass("btnsigninon"); /*görünüşü dəyişmək üçün sinfi aktivləşdirin*/ $("#msg").empty(); )); $(".btnsignin"). mouseup(function() ( false qaytarın; )); $(sənəd).mouseup(funksiya(e) ( /*siçan buraxıldıqda*/ if($(e.target).parents("#frmsignin"). uzunluq==0) ( / *forma obyektlərindən birində deyil*/ $(".btnsignin").removeClass("btnsigninon"); /*formanı silin və olduğu kimi qaytarın*/ $("#frmsignin" ).hide("sürətli"); ) ; )); $("#signin").ajaxForm(( əvvəlSubmit: doğrulayın, /*əvvəlcə doğrulayın*/ müvəffəqiyyət: funksiya(data) ( /*verilənlərdən cavab alarkən handler*/ if (data=="OK") ( /*if OK*/ $("#frmsignin").text("Gird!!"); /*mətn bildirişini göndər*/ $("#frmsignin") .delay(800).fadeOut(400); $("#signbtn").html("Çıxış"); /*çıxış düyməsini dəyişdirin*/ ) else ( $("#msg").html(data); $("#username").focus(); ) ) )); ))) funksiyası validate(formData, jqForm, options) ( /*giriş məlumatlarının yoxlanılması proseduru, çıxışda xətanın idarə edilməsini ehtiva edir*/ var form = jqForm; var un = $.trim(form.username.value); var pw = $.trim(forma) .password.value); var unReg = /^(3,20)$/; var pwReg = /^(6,20)$/; var hasError = false; var errmsg = ""; if (!un) ( errmsg = " Girişinizi daxil edin:

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " Giriş 3 - 20 simvol uzunluğunda olmalıdır (a-z, 0-9, _). "; hasError = true; ) if (! pw) ( errmsg += " Şifrəni daxil edin "; hasError = true; ) else if(!pwReg.test(pw)) ( errmsg += " Parol 6 - 20 simvol uzunluğunda olmalıdır (a-z, 0-9, !, @ , #, $, %, &, *, (,), _)."; hasError = true; ) if (!hasError) ( $("#msg").html(" query..."); ) else ( $("#msg").html(errmsg); yalanı qaytar; ) )

D. dropdown.php:

Əgər(($_POST["istifadəçi adı"]=="giriş") && ($_POST["parol"]=="parol"))( "OK" echo; )else( "Yanlış istifadəçi adı və ya parol" əks-sədası; )

D.style.css:

Body( padding:20px; font:12px Verdana, Geneva, sans-serif; color:#333; ) #container (en:700px; /*margin:0 auto;*/ padding:13px 10px; haşiyə:1px bərk #999 ; ) a.btnsignin, a.btnsignout (fon:#999; padding:5px 8px; rəng:#fff; mətn dekorasiyası: heç biri; şrift-ağırlıq: qalın; -webkit-border-radius:4px; -moz-border -radius:4px; border-radius:4px; ) a.btnsignin:hover, a.btnsignout:hover ( background:#666; ) a.btnsigninon ( fon:#ccc!important; color:#666!important; kontur: heç biri; ) #frmsignin (ekran: heç biri; fon rəngi: #ccc; mövqe: mütləq; üst: 89 piksel; en: 215 piksel; doldurma: 12 piksel; * kənar-yuxarı: 5 piksel; şrift ölçüsü: 11 piksel; -moz-sərhəd -radius:5px; -moz-border-radius-topleft:0; -webkit-border-radius:5px; -webkit-border-yuxarı-sol-radius:0; sərhəd-radius:5px; sərhəd-yuxarı-sol- radius:0; z-index:100; ) #frmsignin girişi, #frmsignin girişi ( display:block; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px bərk #666;margin:0 0 5px; doldurma: 5px; eni: 203px; ) #frmsignin p ( margin:0; ) #frmsignin label ( font-weight:normal; ) #submitbtn ( -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background- rəng:#333; haşiyə:1px bərk #fff; rəng:#fff; doldurma:5px 8px; kənar:0 5px 0 0; şrift-ağırlıq:qalın; ) #submitbtn:hover, #submitbtn:fokus ( haşiyə:1px bərk #000; kursor: göstərici; ) .submit ( padding-top:5px; ) #msg ( color:#F00; ) #msg img ( margin-bottom:-3px; ) #msg p ( margin:5px 0; ) # msg p:son uşaq (margin-bottom:0px; ) h1( margin:0 auto; )

Modal pəncərə bütün diqqəti özünə yönəldir və eyni zamanda formada əlavə məlumat və ya təsvir yerləşdirməyə imkan verir.

A. Biz kitabxanaları ‹başlıq›na daxil edirik:

4. Əsas ssenari.

6. Əsas üslublar.

7. Modal pəncərə üçün əsas üslublar.

B. Formanın HTML kodu aşağıdakı kimidir:

Daxil ol | Şəxsi sahə Giriş E-poçt Şifrə Müalicə...

2. Formanı açmaq üçün düymə.

6-27. modal pəncərə.

8-11. Modal pəncərənin adı.

B. init.js:

// Əvvəlcədən yüklə img1 = yeni Şəkil(16, 16); img1.src="./img/spinner.gif"; img2 = yeni Şəkil(220, 19); img2.src="./img/ajax-loader.gif"; // DOM hazır olduqda $(sənəd).ready(funksiya()( // Giriş linki kliklənərsə MODAL BOX-u işə salın $("#login_link").click(function()( $("#login_form").modal () ; )); // Forma təqdim edildikdə $("#status > form").submit(function()( // "Göndər" düyməsini gizlədin $("#submit").hide(); / / Qıvrılan gif-i göstərin $ ("#ajax_loading").show(); // "this" təqdim edilmiş formaya istinad edir var str = $(this).serialize(); // -- AJAX zəngini başladın -- $. ajax((növ: "POST ", url: "php/do-login.php", // Avtorizasiya məlumatı buraya göndərilir data: str, müvəffəqiyyət: function(msg)( $("#status").ajaxComplete(funksiya). (hadisə, sorğu, parametrlər)( // "Göndər" düyməsini göstər $("#submit").show(); // Dönən gif-i gizlət $("#ajax_loading").hide(); if(msg = = "OK") // GİRİŞ OK? ( var login_response = " " + " " + " " + " " + " " + " "+ "Uğurla daxil oldunuz! Yönləndirməni gözləyin... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container ").css("height","120px"); $(this).html(login_response); // "Status"a istinad edir // 3 saniyədən sonra yönləndirmə setTimeout("go_to_private_page()", 3000); ) else // xəta? ( var login_response = msg; $("#login_response").html(login_response); ) )); ) )); // -- AJAX çağırışının sonu -- false qaytarın; )); )); go_to_private_page() funksiyası ( window.location = "php/private.php"; // İstifadəçinin şəxsi səhifəsi )

D. do-login.php: ajax sorğu işləyicisi

D. private.php: yalnız avtorizasiyadan sonra daxil olmaq mümkün olan səhifə.

"config.php" daxil edin;//uyğun kukilər varsa, o zaman istifadəçinin daxil olduğu sessiya qurulur //İstifadəçinin daxil olub-olmadığını yoxlayın if(!isSet($_SESSION["username"])) ( header("Yer: /modal .html"); exit; ) echo "Şəxsi səhifə Salam, "; echo $_SESSION["istifadəçi adı"]." | Çıxın Bu sizin şəxsi səhifənizdir ";

D. config.php:

səhv_hesabat (E_ALL ^ ​​E_BİLDİRİŞ); session_start(); // Sessiya başlığını başlat("Keş-nəzarət: şəxsi"); // IE 6 FIX // həmişə dəyişdirilmiş başlıq("Son Modifikasiya: " . gmdate("D, d M Y H:i:s") . " GMT"); // HTTP/1.1 başlığı("Keş-nəzarət: mağaza yoxdur, keş yoxdur, yenidən təsdiq edilməlidir"); başlıq("Keş-nəzarət: yoxlamadan sonra=0, əvvəlcədən yoxlama=0", yanlış); // HTTP/1.0 başlığı("Praqma: önbellek yoxdur"); // ---------- GİRİŞ MƏLUMATI ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 gün əgər(!$_SESSION["istifadəçi adı"]) (include_once "autologin.php"; )

e.autologin.php:

If(isSet($cookie_name)) ( // Kukinin olub olmadığını yoxlayın if(isSet($_COOKIE[$cookie_name])) ( parse_str($_COOKIE[$cookie_name]); // Doğrulama edin if(($usr =) = $config_username) && ($hash == md5($config_password))) ( // Sessiyanı qeydiyyatdan keçirin $_SESSION["username"] = $config_username; ) ) )

Z.logout.php:

"config.php" daxil edin; if(isSet($_SESSION["username"])) ( unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) ( // "site_auth" kuki setcookie faylını silin ($cookie_name, "", time() - $cookie_time); ) başlıq("Yer: modal.html"); exit; )

K.stylesheet.css:

Html, bədən ( padding: 0; haşiyə: 0px heç biri; font-family: Verdana; font-size: 11px; ) /* Label */ label (en: 80px; padding-left: 20px; kənar: 5px; float: sol ; text-align: left; ) /* Mətni daxil edin */ daxil edin ( kənar: 5px; doldurma: 0px; float: sol; haşiyə: 1px bərk #cdcdcd; fon rəngi: ağ; -moz-border-radius: 2px; ) br ( aydın: sol; ) .textbox ( haşiyə: 1px bərk #999999; haşiyə-yuxarı rəng: #CCCCCC; haşiyə-sol-rəng: #CCCCCC; rəng: #333333; şrift: 90% Verdana, Helvetica, Arial , sans-serif; font-size: 11px; ) h1 (font-size: 17px; ) div ( font-family: Verdana; font-size: 11px; ) /* "Giriş" düyməsi */ #submit ( kənar: 5px) ; padding: 0px; float: sol; en: 50px; fon rəngi: ağ; ) #bildiriş_xətası (rəng: qırmızı; hündürlük: avtomatik; doldurma: 4px; mətni hizalamaq: mərkəzə; ) #login_response (daşmaq: avtomatik; ) #ajax_loading ( ekran: heç biri; şrift ölçüsü: 12px; şrift ailəsi: Tahoma; ) #logged_in ( padding: 5px; margin: 23px 0 100px 43px; padding: 5px; mətni düzün: mərkəz; eni: 400px ) #status (yuxarı kənar: 20px; en: 310px; )

L. basic.css:

/* Overlay */ #simplemodal-overlay (fon rəngi:#aaaaaa; kursor: gözləyin;) /* Konteyner */ #simplemodal-konteyner (hündürlük:180px; en:300px; fon rəngi:#fff; sərhəd:1px bərk #000000; -moz-border-radius: 5px; ) #simplemodal-container a.modalCloseImg (fon:url("img/x.png") təkrar olunmur; en:25px; hündürlük:29px; ekran:daxili; z-index:3200; mövqe: mütləq; yuxarı:-15px; sol:-18px; kursor: göstərici;) #simplemodal-container #basicModalContent (doldurma:8px;)

• Kursoru formanın birinci sahəsinə qoyun.

İstifadəçini mətn daxil etməli olduğunuz sahə axtarışında gözlərini və siçanı ilə səhifənin ətrafında gəzməyə məcbur etməmək üçün kursoru avtomatik olaraq oraya qoya bilərik. Ən əsası isə odur ki, bu, çox sadədir və onlar məmnundurlar.

A. Formanın HTML kodu aşağıdakı kimidir:

İkinci sahə Birinci sahə Üçüncü sahə

4. bu sahə B fokuslanmaq üçün qurulacaq. aşağıdakı js əlavə edin:

setFocus() funksiyası ( /*istənilən sahəyə fokus təyin etmək*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); )

Bizim vəzifəmiz qeydiyyat və avtorizasiya formalarını məsələn, stüardessalar qədər sevimli və xoş etməkdir. Ümid edirəm ki, mənim nümunələrim faydalı olacaq və öz formalaşdırma şah əsərlərinizi yaratmaq üçün əsas olacaqdır.

Hər şey PHP-nin nəzarəti altında baş verir və məlumatlar verilənlər bazasında saxlanılır MySQL məlumatları.

Sistem Web-kreation tərəfindən hazırlanmış əla sürüşmə panelindən istifadə edir.

Əvvəlcə qeydiyyatdan keçmiş istifadəçilər haqqında bütün məlumatları ehtiva edən bir cədvəl yaratmalıyıq. Sorğu kodu mənbə arxivindəki table.sql faylında mövcuddur.

Biz id-i auto_increment seçimi ilə tam ədəd kimi təyin edirik - o, hər bir yeni qeydiyyatdan keçmiş istifadəçi üçün avtomatik təyin olunacaq. Həmçinin, usr unikal açar kimi müəyyən edilir - cədvəldə eyni istifadəçi adı olan iki qeydə icazə verilmir.

Daha sonra, istifadəçi adı daxil edildikdə, qeydiyyat prosesində göstərilən xassələrdən istifadə edəcəyik.

Cədvəl yaratdıqdan sonra serverinizdə kodu işə sala bilmək üçün connect.php faylında verilənlər bazanıza qoşulmaq üçün dəyişənləri doldurmalısınız.

Əvvəlcə səhifəmizə Veb yaratma formasını yerləşdirməliyik.

Demo məlumatları

• Salam !



• 
  
  Paneli bağlayın
  

Kodun bir neçə yerində $_SESSION["usr"] və ya $_SESSION["id"] təyin edilib-edilmədiyini yoxlayan PHP ifadələri var. Onlar yalnız səhifənin ziyarətçisi qeydiyyatdan keçmiş istifadəçi olduqda doğrudur, bu da bizə qeydiyyatdan keçmiş ziyarətçilərə gizli məzmunu göstərməyə imkan verir.

Formadan sonra səhifənin qalan məzmununu yerləşdiririk.

jQuery slide-out paneli
ilə asan qeydiyyat idarə PHP istifadə edərək və jQuery

Bəzi mətn...

Kodda xüsusi bir şey yoxdur.

İndi formanı tam qeydiyyat və giriş sisteminə çevirəcəyik. Tapşırığı həll etmək üçün sizə adi PHP kodundan başqa bir şey lazımdır. Bütün kod iki hissəyə bölünür.

Bir şey əlavə etməyi planlaşdırırsınızsa, hər şeyi bir neçə yerə bölmək yaxşıdır fərdi fayllar və lazım olduqda onları yandırın. Bu yanaşma böyük layihələrin hazırlanmasına və eyni zamanda saytın müxtəlif hissələrində kodun təkrar istifadəsinə kömək edir.

Burada onun necə həyata keçirildiyi göstərilir.

Burada tzRemember kukisi “Məni yadda saxla” qutusunu qeyd etməmiş istifadəçinin sistemdən çıxmalı olduğunu müəyyən etmək üçün nəzarət elementi kimi çıxış edir. Əgər kuki yoxdursa (brauzerin yenidən işə salınmasına görə) və ziyarətçi “məni yadda saxla” seçimini yoxlamayıbsa, sessiyanı silirik.

Sessiyanın özü iki həftə ərzində aktiv qalacaq (session_set_cookie_params bölməsində göstərildiyi kimi).

Və burada demo.php-nin ikinci hissəsidir.

Əks halda($_POST["göndər"]=="Qeydiyyatdan keç")
{
// Əgər sorğu Qeydiyyat formasından göndərilibsə
$err = massiv();
if(strlen($_POST["istifadəçi adı"])32)
{
$err="İstifadəçi adı 3 ilə 32 simvol arasında olmalıdır!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["istifadəçi adı"]))
{
$err="İstifadəçinin adı etibarsız simvollardan ibarətdir!";
}
if(!checkEmail($_POST["e-poçt"]))
{
$err="Sənin e-poçt ünvanı səhv!";
}
if(!count($err))
{
// Heç bir səhv yoxdursa
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1,100000)),0,6);
// Təsadüfi parol yaradın
$_POST["e-poçt"] = mysql_real_escape_string($_POST["e-poçt"]);
$_POST["istifadəçi adı"] = mysql_real_escape_string($_POST["istifadəçi adı"]);
// məlumat hazırlamaq
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
DƏYƏRLƏR(
"".$_POST["istifadəçi adı"]."",
"".md5($pass)."",
"".$_POST["e-poçt"]."",
"".$_SERVER["REMOTE_ADDR"]."",
İNDİ()
)");
əgər(mysql_təsirlənmiş_sətirlər($link)==1)
{
send_mail("demo-test@site",
$_POST["e-poçt"],
"Qeydiyyat sisteminin nümayişi - parolun yaradılması",
"Şifrəniz: ".$pass);
$_SESSION["msg"]["reg-success"]="Biz sizə yeni parolunuzla e-məktub göndərdik!";
}
else $err="Bu istifadəçi adı artıq istifadə olunur!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
başlıq("Yer: demo.php");
çıxış;
}
$script = "";
if($_SESSION["msg"])
{
// Skript yüklənmə səhifəsində slayd çubuğunu göstərir
$script = "

$(funksiya()(
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

Biz bütün müəyyən edilmiş səhvləri sonradan $_SESSION dəyişəninə təyin edilən $err massivində saxlayırıq. Bu yolla, brauzer yönləndirildikdən sonra hələ də ona daxil ola bilərsiniz.

Bəzi saytlar forma təqdim edildikdə və ya növbəti dəfə səhifə yeniləndikdə məlumatların artıq təqdim edildiyi barədə xəbərdarlıq ala bilər. Bu problem ola bilər, çünki bu, dublikat qeydiyyatlara və serverdə əlavə yüklənməyə səbəb olur.

Brauzeri eyni səhifəyə yönləndirərək xətanın qarşısını almaq üçün başlıq funksiyasından istifadə edirik. Bu, brauzer onu forma sorğusu kimi tanımadan səhifənin görünüşünü yeniləyir. Nəticədə səhifə yenilənir və məlumat ötürülmür.

Lakin qarşılaşdığımız bütün səhvləri saxlamaq üçün $_SESSION istifadə etdiyimiz üçün səhv istifadəçiyə göstərilən kimi bütün dəyişənləri sıfırlamağımız çox vacibdir. Əks halda, o, hər səhifə görünüşündə göstəriləcək.

Həmçinin istifadə olunur əlavə skript, mesajın istifadəçiyə görünməsi üçün yükləmə səhifəsində bir bar göstərir.

Sürüşən panel öz stil cədvəlindən istifadə edir. Beləliklə, yalnız səhifəmiz üçün bir stil yaratmalıyıq.

Sürüşən panelin öz jQuery-i var.

Birinci sətirə Google CDN-dən jQuery kitabxanası daxildir. Bunun ardınca şəffaflıq elementləri üçün IE6 PNG üçün yamaq gəlir. Sonra panel skripti daxil edilir

$script dəyişəni lazım olduqda yükləmə səhifəsində paneli göstərir.

Gününüz xeyir dostlar! PHP-də istifadəçi qeydiyyatına nəzər salaq. Əvvəlcə istifadəçi qeydiyyatımız üçün şərtləri müəyyən edək:

• Parol MD5 alqoritmi ilə şifrələnir
• Parol "duz" olacaq
• Giriş məşğul yoxlanış
• İstifadəçinin məktubla aktivləşdirilməsi.
• Məlumatların qeyd edilməsi və saxlanması DBMS MySQL

Bu skripti yazmaq üçün istifadəçi qeydiyyatının nə olduğunu başa düşməliyik. İstifadəçinin qeydiyyatı real istifadəçi məlumatlarının əldə edilməsi, məlumatların işlənməsi və saxlanmasıdır.

izah etsəniz sadə dillə desək onda qeydiyyat bizim vəziyyətimizdə istifadəçiyə icazə verə biləcəyimiz müəyyən məlumatların qeydi və saxlanmasıdır - bu Giriş və Şifrədir.

İcazə - müəyyən bir şəxsə və ya şəxslər qrupuna müəyyən hərəkətləri etmək hüququnun verilməsi, habelə bu hərəkətləri etməyə cəhd edərkən bu hüquqların yoxlanılması prosesi. Sadəcə olaraq, avtorizasiyanın köməyi ilə biz saytımızdakı müəyyən məzmuna girişi məhdudlaşdıra bilərik.

Girişimizi avtorizasiya ilə həyata keçirmək üçün skript kataloqu strukturuna nəzər salaq. Skriptləri məntiqi hissələrə ayırmalıyıq. Biz qeydiyyat və avtorizasiya modullarını ayrıca kataloqda yerləşdirdik. Həmçinin ayrı-ayrı qovluqlarda MySQL verilənlər bazasına, istifadəçi tərəfindən müəyyən edilmiş funksiyaları olan bir fayla, bir fayla keçid yerləşdirəcəyik. css üslubları və bizim html şablonu. Bu struktur skriptlər arasında sürətlə hərəkət etməyə imkan verir. Təsəvvür edin ki, bir dəstə modul və s. olan böyük bir saytınız var. və əgər nizam yoxdursa, belə bir qarışıqlıqda bir şey tapmaq çox çətin olacaq.

Bütün məlumatları MySQL DBMS-də saxlayacağımız üçün yaratmayaq böyük masa burada qeydiyyat məlumatlarını saxlayacağıq.

Əvvəlcə verilənlər bazasında cədvəl yaratmalısınız. Cədvəli bez_reg adlandıraq, burada bez cədvəlin prefiksi, reg isə cədvəlin adıdır.

less/reg/?mode=auth">Daxil olun