Jquery reģistrācijas un autorizācijas veidlapas. Lieliskas reģistrācijas sistēmas izveide, izmantojot PHP, MySQL un jQuery. Jūs jau esat reģistrēts

IN Twitter tīkli Jūs varat redzēt, ka lapa darbojas ar tīru un vienkāršu dizainu. Apskatiet lapas augšējo labo daļu, tur jūs redzēsiet pogu, lai pieteiktos sistēmā, noklikšķinot uz tās jūs redzēsiet veidlapas datu aizpildīšanai. Šodien mēs jums pateiksim, kā izveidot līdzīgu efektu savā vietnē. Patiesībā tas ir ļoti vienkārši. Turklāt tas palīdzēs ietaupīt vietu lapā un pievienot apmeklētājiem komforta sajūtu. Šajā rakstā mēs soli pa solim pastāstīsim, kā darbojas visa šī sistēma, un šī rokasgrāmata noderēs arī tiem, kas vēlas apgūt jQuery. Uz priekšu!

HTML kods

Vispirms jums jāsāk ar HTML kodu. HTML kods ir ļoti vienkāršs - tajā ir tags “a”, kas iet kopā ar tagu “fieldset”, kura dēļ forma tiek parādīta.

Vienkārši iekopējiet to savā kodā jauna lapa:

Vai jums ir konts? Ielogoties


Lietotājvārds vai e-pastu

Parole

Atceries mani

Aizmirsi savu paroli?

Aizmirsāt savu lietotājvārdu?

Jums būs nepieciešams izmantojot CSS lai definētu autorizācijas pogu un pieteikšanās veidlapu. Zemāk esošais kods veic tieši šo funkciju.

Vienkārši nokopējiet šo kodu savā css failā vai pievienojiet to savam HTML kodam, kurā definējat stilu. Šie kodi nosaka pieteikšanās pogu.

#container (
platums: 780 pikseļi;
margin:0 auto;
pozīcija: relatīvs;
}

#content (
platums: 520 pikseļi;
minimālais augstums: 500 pikseļi;
}
a:link, a:visted (
krāsa:#27b;
teksta noformējums: nav;
}
a:hover (
teksta dekorēšana: pasvītrojums;
}
attēls (
apmales platums: 0;
}
#topnav (
polsterējums: 10 pikseļi 0 pikseļi 12 pikseļi;
fonta izmērs: 11 pikseļi;
līnijas augstums: 23 pikseļi;
text-align:right;
}
#topnav a.signin (
background:#88bbd4;
polsterējums: 4 pikseļi 6 pikseļi 6 pikseļi;
teksta noformējums: nav;
fonta svars: treknrakstā;
krāsa:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
apmales rādiuss: 4 pikseļi;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*polsterējums:4px 12px 6px;
}
#topnav a.signin:hover (
fons:#59B;
*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*polsterējums:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*fona pozīcija:0 3 pikseļi!svarīgi;
}

a.signin(
pozīcija: radinieks;
piemale-kreisais: 3px;
}
a.signin span(
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
fona pozīcija: 100% 50%;
polsterējums: 4 pikseļi 16 pikseļi 6 pikseļi 0;
}
#topnav a.menu-open (
background:#ddeef6!svarīgi;
krāsa:#666!svarīgi;
kontūra: nav;
}
#small_signup (
displejs: iekļauts;
peldēt: nav;
līnijas augstums: 23 pikseļi;
piemale: 25 pikseļi 0 0;
platums: 170 pikseļi;
}
a.signin.menu-open span (
background-image:url("images/toggle_up_dark.png");
krāsa:#789;
}

Un tad nāk pieteikšanās formas definīcija:

#signin_menu (
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
displejs: nav;
fona krāsa:#ddeef6;
pozīcija: absolūts;
platums: 210 pikseļi;
z-indekss:100;
apmale: 1px caurspīdīga;
teksta izlīdzināšana: pa kreisi;
polsterējums: 12 pikseļi;
augšpusē: 24,5 pikseļi;
pa labi: 0 pikseļi;
mala augšdaļa: 5 pikseļi;
mala-labā: 0px;
*mala-labā: -1px;
krāsa:#789;
fonta izmērs: 11 pikseļi;
}

#signin_menu ievade, #signin_menu ievade (
displejs: bloks;
-moz-border-radius:4px;
-webkit-border-radius:4px;
apmale: 1px ciets #ACE;
fonta izmērs: 13 pikseļi;
piemale: 0 0 5 pikseļi;
polsterējums: 5px;
platums: 203 pikseļi;
}
#signin_menu p (
piemale:0;
}
#signin_menu a (
krāsa:#6AC;
}
#signin_menu etiķete (
fonta svars: normāls;
}
#signin_menu p.remember (
polsterējums: 10 pikseļi 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
skaidrs: abi;
piemale: 5 pikseļi 0;
}
#signin_menu p a (
krāsa:#27B!svarīgi;
}
#signin_submit (
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url("images/bg-btn-blue.png") repeat-x scroll 0 0;
apmale: 1px solid #39D;
krāsa:#fff;
text-shadow:0 -1px 0 #39d;
polsterējums: 4 pikseļi 10 pikseļi 5 pikseļi;
fonta izmērs: 11 pikseļi;
piemale: 0 5 pikseļi 0 0;
fonta svars: treknrakstā;
}
#signin_submit::-moz-focus-inner (
polsterējums:0;
robeža:0;
}
#signin_submit:hover, #signin_submit:focus (
fona pozīcija: 0–5 pikseļi;
kursors:rādītājs;
}

Ir pienācis laiks strādāt ar javascript

Šķiet, ka, HTML kodi un CSS ir diezgan sarežģīti un mulsinoši, bet javascript viss ir ļoti vienkārši. Vienkārši nokopējiet šo javascript kodu, kas ļaus jums parādīt un paslēpt veidlapu, noklikšķinot uz pieteikšanās pogas, pat ja klikšķis tiek veikts ārpus pieteikšanās veidlapas.

$(dokuments).ready(function() (

$(.signin").click(function(e) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(.signin").toggleClass("izvēlne-atvērt");
});

$("fieldset#signin_menu").mouseup(function() (
atgriezt nepatiesu
});
$(document).mouseup(function(e) (
if($(e.target).parent("a.signin").length==0) (
$(.signin").removeClass("izvēlne-atvērt");
$("fieldset#signin_menu").hide();
}
});

});

Saskaņā ar iepriekš norādīto kodu, kad apmeklētājs noklikšķina uz pieteikšanās pogas, jauna funkcija. Vispirms tiek parādīta pieteikšanās forma (ievietota tagā “filedset”), pēc tam saite, kas atrodas klasē “.signin”, pievieno vēl vienu “menu-open” klasi, kuras dēļ tiek mainīts fona attēls.

Vēl viens notikums šajā kodā ir tāds, ka apmeklētājiem noklikšķinot nevis uz pieteikšanās veidlapas, bet kaut kur lapā, forma pati aizveras. Citiem vārdiem sakot, klasei "menu-open" tiek noņemta saite ar klasi ".signin" un tiek atgriezta tā sākotnējā fona attēls.

Kas attiecas uz padomiem?

$(funkcija() (
$("#forgot_username_link").tipsy((gravitācija: "w"));
});

Mēs parasti iesakām izmantot jQuery spraudni – tipsy. Rīka padoma saturs ir rakstīts ar saiti saistītajā atribūtā "title". Varat mainīt rīka padoma pozīciju attiecībā pret austrumiem, rietumiem, dienvidiem vai ziemeļiem. Tas tiek īstenots, izmantojot “gravitācijas” parametru, kas norādīts iepriekš minētajā kodā. Mēs piedāvājam jums saiti uz šim spraudnim veltītu vietni, kur varat sīkāk izpētīt tā iespējas un lejupielādēt spraudni. ...

Beidzot

Ja nokopējāt visu kodu no šī raksta, lūdzu, nemainiet mapes struktūru. Ja to mainīsit, kods nedarbosies. Šis kods ir tikai piemērs, kā izveidot pieteikšanās nolaižamo veidlapu, izmantojot jQuery. Veiksmi jūsu praksē!

Mēs nolēmām papildināt ar dažiem piemēriem, kas publicēti vietnē Habré, lai jūs varētu uzzināt par dažiem “novatoriem paņēmieniem” reģistrācijas un autorizācijas veidlapu uzlabošanai.

Tātad, daži triki:

• nav nepieciešams dublēt paroles ievadi;

Lai atvieglotu lietotāja dzīvi (kāpēc tas ir labi parādīts šajā Google lapā), labāk ir izveidot vienu lauku un izvēles rūtiņu, kas noņems “masku” - tas viss tiek darīts, izmantojot nelielu javascript kodu.

// // //

1. jQuery bibliotēka.

2-7. elementa inicializācija.

B. Veidlapas HTML kods ir šāds:

Pieslēgšanās parole:

5-6. Šo lauku redzamību pārslēdz skripts, izmantojot izvēles rūtiņu.

B.init.js

$(document).ready(function())( $("#testpassword1").showPassword(); $("#testpassword").showPassword(.checker", ( teksts: "Pielāgota izvēles rūtiņa", nosaukums: " showmypass " )); ));

G.styles.css

Pamatteksts (fontu saime: Arial, Helvetica, serif, sans-serif; ) forma ( piemale: 15 pikseļi 0; polsterējums: 15 pikseļi; fons: #ccc; krāsa: #000; apmale: 1 px ciets #aaa; platums: 500 pikseļi; ) forma etiķete.veidlapa ( pludiņš: pa kreisi; platums: 120 pikseļi; displejs: bloks; ) form input#testpassword1, form input#testpassword ( float: left; display: block; ) .clear ( clear: both; ) div.checker ( clear : abi; displejs: bloks; apmale: 1px punktēts #2d2d2d; krāsa: #2d2d2d; fons: caurspīdīgs; platums: 230 pikseļi; fonta izmērs: 0,8 em; piemale: 20 pikseļi 0 0 0; )

• Labāk ir automātiski aizpildīt laukus, pamatojoties uz ievadītajiem datiem;

Jo mazāk lietotājam jāievada, jo labāk. Dažus laukus var aizpildīt, pamatojoties uz iepriekšējiem, jau ievadītajiem datiem. Piemēram, varat aizpildīt lauku "pilsēta", nolasot un apstrādājot vērtību no lauka "indekss". Vienkāršs Ajax pieprasījums, un tas ir darīts. Izmantojot AJAX iegūt datus par pilsētu un reģionu no pasta indeksa.

A. Mēs iekļaujam bibliotēkas ‹galvenē›:

1. jQuery bibliotēka.
2. Galvenais skripts.

B. Veidlapas HTML kods ir šāds:

Pasta indekss Pilsēta Valsts

1. Lauks, kurā jāievada pasta indekss.

B. zip_city.js:

Funkcija fillcitystate(controlname)( var zipcode = trim(controlname.value); //izgriezt atstarpes if(zipcode.length!=5)( //pārbaudīt garumu return false; ) var zipstring = ""; xmlhttp = new XMLHttpRequest() ; xmlhttp.open("GET", "php/zip_city.php?zip=" + zipcode, true); //nosūtīt pieprasījumu uz php xmlhttp.onreadystatechange=function())( //saņemot rezultātu if (xmlhttp .readyState= =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Kļūda")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; / /iestata pilsētas lauka vērtības document.getElementById("txtCountry").value = ziparray; //iestata vērtības valsts laukam ) ) ) xmlhttp.send(null); ) //Space apgriešanas funkcija funkcija trim( s) ( var l=0; var r=s.garums -1; while(l< s.length && s[l] == " ") { l++; } while(r >l && s[r] == " ") ( r-=1; ) atgriež s.substring(l, r+1); )

D. zip_city.php: ajax pieprasījumu apstrādātājs.

Require_once("db.php"); $db_table = "zip_city"; //noklusējuma atgriešanas vērtība $returnval = "Kļūda"; //GET parametra iegūšana $zipcode = $_GET["zip"]; //priekšapstrāde if (strlen($zipcode)>5)( $zipcode = substr($pasta indekss, 0, 5); ) if (strlen($zipcode)!=5)( mirst ($returnval); ) //saņemšana vērtības no datu bāzes $query = "SELECT * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) or die("Nevar palaist vaicājumu:Vaicājums: ".$query."".mysql_error($conn)); $rindu skaits = mysql_num_rows($resultval); if ($rindu skaits==1)( $rinda = mysql_fetch_array($resultval); $returnval = $rinda["zip"]."|".ucwords(strtolower($row["pilsēta"]))."|" .$row["valsts"]; //faktiski veiksmīgas atbildes ģenerēšana ) echo $returnval;

D. db.php: datu bāzes savienojuma konfigurācija.

//datu bāzes savienojuma iestatījumi $dbhost = "localhost"; $dbusername = "sakne"; $dbpass = ""; $db_name = "emuāra_pieteikšanās"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) vai die("Nevar izveidot savienojumu ar MySQL datu bāzes serveri:".mysql_error()); $db = mysql_select_db($db_name, $conn) or die("Nevar atvērt datu bāzi:".mysql_error($conn));

E. Datu bāzes tabulas izveide:

IZVEIDOT TABULU, JA NAV `zip_city` (`id` int(11) NOT NULL AUTO_INCREMENT, `zip` varchar(5) NOT NULL, `city` varchar(255) NOT NULL, `country' varchar(255) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921 ;

• ievades laukā varat aizvietot automātiski;

Dažiem laukiem ir nepieciešama ierobežota ievades vērtību kopa. Piemēram, lietotājs var ievadīt divas rakstzīmes, skatīt to valstu sarakstu, kas sākas ar šiem burtiem, un viegli izvēlēties vajadzīgo. Turklāt viņš noteikti nepieļaus kļūdas savas dzimtenes vārdā. AJAX automātiskā pabeigšana, izmantojot jQuery.

A. Savienojiet ‹galvenē›:

1. jQuery bibliotēka.
2. Automātiskās pabeigšanas skripts jQuery.
3. Galvenais skripts.

B. Veidlapas HTML kods ir šāds:

Valsts

1. Lauks, kurā jāsāk ievadīt valsts nosaukumu.

V.init.js:

Var opcijas, a; jQuery(function())( options = ( serviceUrl:"./php/autocomplete.php" ); /*norādiet apdarinātāja faila adresi*/ a = $("#query").autocomplete(options); / *piešķirt automātiskās pabeigšanas objektu ar id="query"*/ ));

D. autocomplete.php: ajax pieprasījumu apstrādātājs

If(isset($_GET["vaicājums"]) && (!empty($_GET["vaicājums"])))( request_once("db.php"); $db_table = "sistēmas_valstis"; //datu bāzes tabulas nosaukums $ query = $_GET["vaicājums"]; //vaicājums no formas lauka $variants = ""; $q = "SELECT `name_en` FROM `($db_table)` WHERE `name_en` REGEXP "^($query)( . *)" GROUP BY `name_en`"; /*meklēt pēc pirmajām ievadītajām rakstzīmēm*/ $res = mysql_query($q) or die("Nevar palaist vaicājumu:Vaicājums: ".$q."".mysql_error($ conn) ); /*iegūt vaicājuma rezultātu*/ if(mysql_num_rows($res)>0)( while($row = mysql_fetch_row($res))($variants = "".$row."""; / *aizpildiet masīva opcijas*/ ) $variants = implode(",",$variants); /*ierakstiet rindā visas opcijas, kas atdalītas ar komatiem*/ /*veidojiet atbildi*/ $request = "( vaicājums:"" .$query."", ieteikumi:[".$variants."] )"; echo $request; ) )

D. Datu bāzes tabulas izveide:

NOMET TABULU, JA IR `sistēmas_valstis`; CREATE TABLE "system_countries" ("id" int(11) NOT NULL auto_increment, "name_en" char(128) NOT NULL, "name_ru" char(128) noklusējuma NULL, "code" char(2) NOT NULL, "_order" int(3) noklusējuma "0", "neatkarīgs" tinyint(1) noklusējuma "1", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

G. styles.css:

Autocomplete-w1 ( background:url(/autocomplete/img/shadow.png) bez atkārtošanas apakšējā labajā stūrī; pozīcija: absolūtais; augšā: 0px; pa kreisi: 0px; margin: 8px 0 0 6px; /* IE6 labojums: */ _background - 6 pikseļi; /* IE6 specifisks: */ _height:350px; _margin:0; _overflow-x:hidden; ) .autocomplete .selected ( fons: #F0F0F0; ) .autocomplete div ( polsterējums: 2px 5px; atstarpes: nowrap; ) .autocomplete strong ( font-weight:normal; color:#3399FF; )

• Kāpēc ievadīt datus divreiz?

Daudzi tiešsaistes veikali izmanto daudzpakāpju pasūtījuma veidlapas ar laukiem maksājuma un piegādes adresēm. Bieži vien to nozīme ir vienāda. Kāpēc gan nepiedāvāt lietotājam ar vienu klikšķi dublēt jau ievadīto lauku vērtības? Programmatiski tehnika ir vienkārša, un to var izmantot dažādos gadījumos, kad tiek domāta vērtību atkārtošanās iespējamība.

A. Savienojiet ‹galvenē›:

1. JQuery bibliotēka.

2. jQuery Select Plugin.

3. galvenais skripts.

B. Veidlapu HTML kods ir šāds:

Maksājumu informācija.

14. Kopēt izvēles rūtiņa.

V.init.js:

//kad lapa ir ielādēta $(document).ready(function() ( //kad izvēles rūtiņa ir aktivizēta vai deaktivizēta $("#copyaddress").click(function() ( // ja aktivizēts if ($(" #copyaddress") .is(":checked")) ( //katram ievades laukam $("#shipping_fields input", ":visible", document.body).each(function(i) ( //vērtību kopēšana ​​no maksājumu laukiem // uz atbilstošajiem piegādes laukiem $(this).val($("#billing_fields input").eq(i.val()); )); //nedarbojas ar nolaižamajām izvēlnēm , tāpēc mēs izmantosim spraudņa funkcijas var bcountry = $( "#bcountry").val(); $("#scountry").selectOptions(bcountry); ) else ( //ja izvēles rūtiņa ir deaktivizēta //katrai ievades lauks $("#shipping_fields ievade", ":redzams", document.body).each(function(i) ( //notīrīt piegādes datu laukus $(this).val(""); )); $(" #scountry").selectOptions(""); ) )) ; ));

• Šķiet, ka cilvēkiem ir apnicis lasīt captcha :)

Jums pašam, iespējams, ir apnicis lasīt nesalasāmas rakstzīmes no captcha un pēc tam tās ievadīt. Apžēlosimies par lietotājiem, bet nelaidīsim cauri robotus. Lai to izdarītu, varat izmantot vairākas metodes, apskatīsim vienu no tām. Honeypot Captcha pieeja – mēs izveidojam veidlapā lauku, kas ir neredzams lietotājam, bet redzams robotam. Pārbaudot šo vērtību, mēs varam noķert neuzmanīgus surogātpasta izplatītājus, neradot grūtības Reāliem cilvēkiem. Captcha ietekme uz reklāmguvumu līmeni.

A. Veidlapas HTML kods ir šāds:

Vārds Uzvārds E-pasts Slēpts lauks. Ja jūs to aizpildījāt, jūs esat bots

B. pievienojiet šādu js:

Funkciju pārbaude() ( if(document.form_find.body.value)( console.log("UZMANĪBU! BOTS LAPĀ!!!"); ) )

Autorizācijas process, tēlaini izsakoties, ir tad, kad persona “sveicina” vietni. Viduslaikos cilvēki pieklājīgos namos sveicināja cilvēkus ar vairākiem lokiem un spārniem. Bet mēs ejam līdzi laikam un gādāsim, lai apsveikumam pietiktu ar vienu siltu rokasspiedienu. Mēs atvieglojam pieteikšanos vietnē.

• Mēs atstājam lietotāju lapā, kurā viņš pieteicās;

Ir divas izvēles iespējas: nolaižamā forma un modālais logs. Nolaižamā veidlapa aizņem tikai nelielu lapas laukumu, tā ir vienkārša un ātra izmantošanas iespēja.

A. Mēs iekļaujam bibliotēkas ‹galvenē›:

3. Galvenais skripts.

B. Veidlapas HTML kods ir šāds:

Pieteikšanās Parole Atcerēties mani Lai autorizētu, ievadiet savu pieteikumvārdu: login un paroli: parole

4. Veidlapas atvēršanas poga.

7-22. Pati forma.

19. Izvēles rūtiņa, kas liek sīkfailus instalēt ļoti ilgu laiku.

23.Vieta ziņai.

V. jqeasy.dropdown.js:

$(document).ready(function() ( /*galvenā funkcija*/ $(.btnsignin").click(function(e) ( /*kad tiek noklikšķināts uz pogas "Pieteikties"*/ e.preventDefault(); $ ("#frmsignin").toggle("fast",function() ( /*pārslēdz veidlapas redzamību*/ $("#lietotājvārds").focus(); /*pārvieto ievades kursoru uz pieteikšanās lauku */ )); $ (this).toggleClass("btnsigninon"); /*pārslēdz klasi uz pogas, lai mainītu skatu*/ $("#msg").empty(); )); $(". btnsignin").mouseup(function() ( return false; )); $(document).mouseup(function(e) ( /*kad pele tiek atbrīvota*/ if($(e.target).parents("# frmsignin").length==0) ( / *nav nevienā no formas objektiem*/ $(".btnsignin").removeClass("btnsigninon"); /*noņemt veidlapu un atgriezt to tādu, kāda tā bija*/ $ ("#frmsignin").hide("ātri"); ) ; )); $("#signin").ajaxForm(( beforeSubmit: valide, /*vispirms pārbaudiet*/ panākumi: function(data) ( /*kad atbildes saņemšana no apdarinātāja*/ if (data=="OK") ( /*ja tā ieradās OK*/ $("#frmsignin").text("Pierakstījies!"); /*sūtīt teksta paziņojumu* / $("#frmsignin").delay(800).fadeOut(400); $("#signbtn").html("Iziet"); /*mainīt izejas pogu*/ ) else ( $("#msg").html(data); $("#lietotājvārds").focus(); ) ) )); )); funkcija valide(formData, jqForm, opcijas) ( /*ievadīto datu validācijas procedūra, satur kļūdu izvades apstrādi*/ var form = jqForm; var un = $.trim(form.lietotājvārds.vērtība); var pw = $.trim( forma .password.value); var unReg = /^(3,20)$/; var pwReg = /^(6,20)$/; var hasError = false; var errmsg = ""; if (!un) ( errmsg = "Ievadiet savu pieteikumvārdu:

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " Pieteikšanās ir jābūt 3 - 20 rakstzīmēm garai (a-z, 0-9, _). "; hasError = true; ) if (! pw) ( errmsg += "Ievadiet savu paroli"; hasError = true; ) else if(!pwReg.test(pw)) ( errmsg += " Parolei jābūt 6–20 rakstzīmes garai (a-z, 0-9, !, @ , #, $, %, &, *, (,), _). "; hasError = true; ) if (!hasError) ( $("#msg").html(" pieprasījums... "); ) else ( $("#msg").html(errmsg); return false; ) )

G. dropdown.php:

If(($_POST["lietotājvārds"]=="pieteikšanās") && ($_POST["parole"]=="parole"))( echo "OK"; )else( echo "Nederīgs pieteikšanās vārds vai parole"; )

D. style.css:

Pamatteksts (polsterējums:20px; fonts:12px Verdana, Geneva, sans-serif; krāsa:#333; ) #container (platums:700px; /*margin:0 auto;*/ polsterējums:13px 10px; border:1px solid #999 ; ) a.btnsignin, a.btnsignout ( fons: #999; polsterējums: 5 pikseļi 8 pikseļi; krāsa: #fff; teksta noformējums: nav; fonta svars: treknraksts; -webkit-border-radius: 4px; -moz-border -radius:4px; border-radius:4px; ) a.btnsignin:hover, a.btnsignout:hover ( fons:#666; ) a.btnsigninon (fons:#ccc!important; color:#666!important; kontūra: neviens -radius:5px; -moz-border-radius-topleft:0; -webkit-border-radius:5px; -webkit-border-top-left-radius:0; border-radius:5px; border-top-left- rādiuss:0; z-index:100; ) #frmsignin ievade, #frmsignin ievade ( displejs: bloks; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #666;margin:0 0 5px; polsterējums: 5px; platums: 203 pikseļi; ) #frmsignin p ( margin:0; ) #frmsignin label ( font-weight:normal; ) #submitbtn ( -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background- krāsa:#333; apmale:1px solid #fff; krāsa:#fff; polsterējums:5px 8px; mala:0 5px 0 0; font-weight:bold; ) #submitbtn:hover, #submitbtn:focus (apmale:1px solid #000; kursors:rādītājs; ) .submit ( padding-top: 5px; ) #msg ( color:#F00; ) #msg img ( margin-bottom:-3px; ) #msg p ( margin:5px 0; ) # ziņa p:pēdējais-bērns ( margin-bottom:0px; ) h1( margin:0 auto; )

Modālais logs koncentrē visu uzmanību uz sevi un tajā pašā laikā ļauj ievietot papildu informāciju vai aprakstu veidlapā.

A. Mēs iekļaujam bibliotēkas ‹galvenē›:

4. Galvenais skripts.

6. Pamatstili.

7. Modālā loga pamatstili.

B. Veidlapas HTML kods ir šāds:

Pieteikties | Personīgā zona Pieteikšanās e-pasta parole Ārstēšana...

2. Veidlapas atvēršanas poga.

6-27. Modāls logs.

8-11. Modālā loga nosaukums.

V.init.js:

// Ielādēt img1 = new Image(16, 16); img1.src="./img/spinner.gif"; img2 = jauns attēls(220, 19); img2.src="./img/ajax-loader.gif"; // Kad DOM ir gatavs $(document).ready(function())( // Palaidiet MODAL BOX, ja tiek noklikšķināts uz pieteikšanās saites $("#login_link").click(function())( $("#login_form ").modal() ; )); // Kad veidlapa ir iesniegta $("#status > forma").submit(function())( // Paslēpt pogu "Iesniegt" $("#submit"). hide(); // Rādīt rotējošu gif $ ("#ajax_loading").show(); // "šis" attiecas uz iesniegto veidlapu var str = $(this).serialize(); // -- Sākt AJAX call -- $.ajax(( tips: "POST ", url: "php/do-login.php", // Autorizācijas informācija tiek nosūtīta šeit dati: str, panākumi: function(msg)( $("#status" ).ajaxComplete(funkcija(notikums, pieprasījums, iestatījumi)( // Parādīt pogu "Iesniegt" $("#iesniegt").show(); // Slēpt griežamo gif $("#ajax_loading").hide() ; if(msg == "OK") // LOGIN OK? ( var login_response = " " + " " + " " + " " + " " + " "+ "Jūs esat veiksmīgi pieteicies! Lūdzu, uzgaidiet novirzīšanu... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container ").css("height","120px"); $(this).html(login_response); // Attiecas uz "status" // Pēc 3 sekundēm novirziet setTimeout("go_to_private_page()", 3000); ) else // error? ( var login_response = msg; $("#login_response").html(login_response); ) )); ) )); // -- AJAX izsaukuma beigas -- return false; )); )) ; function go_to_private_page() ( window.location = "php/private.php"; // Lietotāja personiskā lapa )

G. do-login.php: ajax pieprasījumu apstrādātājs

D. private.php: lapa, kurai var piekļūt tikai pēc autorizācijas.

Iekļauts "config.php";//ja ir atbilstoši sīkfaili, tad tiek izveidota sesija, ka lietotājs ir autorizēts // Pārbauda, ​​vai lietotājs ir autorizēts if(!isSet($_SESSION["lietotājvārds"])) ( header( "Atrašanās vieta: /modal .html"); iziet; ) echo "Personiskā lapa Sveiki, "; echo $_SESSION["lietotājvārds"]." | Iziet Šī ir jūsu personīgā lapa ";

D.config.php:

Error_reporting (E_ALL ^ E_NOTICE); session_start(); // Sākt sesijas galveni("Cache-control: private"); // IE 6 FIX // vienmēr modificēta galvene("Pēdējais modificēts: " . gmdate("D, d M Y H:i:s") . " GMT"); // HTTP/1.1 galvene("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // HTTP/1.0 galvene("Pragma: bez kešatmiņas"); // ---------- LOGIN INFO ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 dienas if(!$_SESSION["lietotājvārds"]) ( include_once "autologin.php"; )

E. autologin.php:

If(isSet($cookie_name)) ( // Pārbaudiet, vai sīkfails eksistē if(isSet($_COOKIE[$cookie_name])) ( parse_str($_COOKIE[$cookie_name]); // Veiciet pārbaudi if(($usr = = $config_username) && ($hash == md5($config_password))) ( // Reģistrēt sesiju $_SESSION["lietotājvārds"] = $config_username; ) ) )

Z. logout.php:

Iekļaut "config.php"; if(isSet($_SESSION["lietotājvārds"])) (unset($_SESSION["lietotājvārds"]); if(isSet($_COOKIE[$cookie_name])) ( // noņemt "site_auth" sīkfailu setcookie ($cookie_name, "", laiks() - $cookie_time); ) header("Atrašanās vieta: modāls.html"); iziet; )

K. stylesheet.css:

Html, pamatteksts ( polsterējums: 0; mala: 0 pikseļi, nav; fontu saime: Verdana; fonta izmērs: 11 pikseļi; ) /* Etiķete */ etiķete ( platums: 80 pikseļi; polsterējums pa kreisi: 20 pikseļi; piemale: 5 pikseļi; peldēšana: pa kreisi ; teksta izlīdzināšana: pa kreisi; ) /* Ievades teksts */ ievade ( piemale: 5 pikseļi; polsterējums: 0 pikseļi; peldēšana: pa kreisi; apmale: 1 pikseļi cieta # cdcdcd; fona krāsa: balta; -moz-border-radius: 2px; ) br ( skaidrs: pa kreisi; ) .textbox ( apmale: 1px solid #999999; apmales-augšējā krāsa: #CCCCCC; apmales-left-color: #CCCCCC; krāsa: #333333; fonts: 90% Verdana, Helvetica, Arial , sans-serif; fonta izmērs: 11 pikseļi; ) h1 ( fonta izmērs: 17 pikseļi; ) div ( fontu saime: Verdana; fonta izmērs: 11 pikseļi; ) /* Poga "Pieteikšanās" */ #iesniegt ( piemale: 5 pikseļi ; polsterējums: 0 pikseļi; pludiņš: pa kreisi; platums: 50 pikseļi; fona krāsa: balts; ) #notification_error ( krāsa: sarkana; augstums: automātiska; polsterējums: 4 pikseļi; teksta līdzināšana: centrā; ) #login_response ( pārpilde: automātiski; ) #ajax_loading ( displejs: nav; fonta izmērs: 12 pikseļi; fontu saime: Tahoma; ) #logged_in ( polsterējums: 5 pikseļi; mala: 23 pikseļi 0 100 pikseļi 43 pikseļi; polsterējums: 5 pikseļi; teksta līdzināšana: centrs; platums: 400 pikseļi; ) #statuss ( mala augšpusē: 20 pikseļi; platums: 310 pikseļi; )

L. basic.css:

/* Overlay */ #simplemodal-overlay (background-color:#aaaaaa; cursor:wait;) /* Container */ #simplemodal-container (augstums: 180 pikseļi; platums: 300 pikseļi; fona krāsa: #fff; apmale: 1px solid #000000; -moz-border-radius: 5px; ) #simplemodal-container a.modalCloseImg (background:url("img/x.png") no-repeat; platums:25px; augstums:29px; displejs:inline; z-indekss: 3200; pozīcija: absolūts; augšā: -15 pikseļi; pa kreisi: -18 pikseļi; kursors: rādītājs;) #vienkāršs modāls-konteiners #basicModalContent (padding:8px;)

• Novietojiet kursoru veidlapas pirmajā laukā.

Lai nepiespiestu lietotāju palaist acis un peli pa lapu, meklējot lauku, kurā jāievada teksts, mēs varam automātiski tur novietot kursoru. Un galvenais, ka tas tiek darīts ļoti vienkārši, un viņiem tas patīk.

A. Veidlapas HTML kods ir šāds:

Otrais lauks Pirmais lauks Trešais lauks

4. Fokuss B tiks iestatīts uz šo lauku. Pievienojiet šādu js:

Funkcija setFocus() ( /*iestatīt fokusu uz vēlamo lauku*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); )

Mūsu mērķis ir padarīt reģistrācijas un pieteikšanās veidlapas tikpat jaukas un patīkamas kā, teiksim, stjuartes. Es ceru, ka mani piemēri būs noderīgi un kļūs par pamatu, veidojot savus formu veidošanas šedevrus.

Viss notiek PHP kontrolē, un dati tiek glabāti datu bāzē MySQL dati.

Sistēma izmanto izcilu bīdāmo paneli, ko izstrādājis Web-kreation.

Vispirms mums ir jāizveido tabula, kurā būs visi dati par reģistrētajiem lietotājiem. Vaicājuma kods ir pieejams avota arhīva failā table.sql.

Mēs definējam id kā veselu skaitli ar opciju auto_increment - tas tiks automātiski piešķirts katram jaunam reģistrētajam lietotājam. Tāpat usr ir definēts kā unikāla atslēga – tabulā nav atļauts eksistēt diviem ierakstiem ar vienu un to pašu lietotājvārdu.

Vēlāk mēs izmantosim norādītos rekvizītus reģistrācijas procesā, kad tiks ievadīts lietotājvārds.

Pēc tabulas izveides failā connect.php ir jāaizpilda mainīgie, lai izveidotu savienojumu ar datu bāzi, lai varētu palaist kodu savā serverī.

Pirmkārt, mūsu lapā ir jāievieto tīmekļa izveides veidlapa.

Demo dati

• Sveiki !



• 
  
  Aizvērt paneli
  

Vairākās koda vietās ir PHP priekšraksti, kas pārbauda, ​​vai ir definēts $_SESSION["usr"] vai $_SESSION["id"]. Tie ir patiesi tikai tad, ja lapas apmeklētājs ir reģistrēts lietotājs, kas ļauj mums parādīt slēpto saturu reģistrētajiem apmeklētājiem.

Pēc formas ievietojam pārējo lapas saturu.

jQuery bīdāmais panelis
Vienkārša reģistrācijas pārvaldība ar izmantojot PHP un jQuery

Kaut kāds teksts...

Kodā nav nekā īpaša.

Tagad mēs pārveidosim veidlapu par pilnīgu reģistrācijas un pieteikšanās sistēmu. Lai atrisinātu problēmu, jums būs nepieciešams kaut kas cits, nevis parasts PHP kods. Viss kods ir sadalīts divās daļās.

Ja plānojat kaut ko pievienot, vislabāk ir sadalīt visu vairākos atsevišķi faili un ieslēdziet tos pēc vajadzības. Šī pieeja palīdz izstrādāt lielus projektus un vienlaikus atkārtoti izmantot kodu dažādās vietnes daļās.

Lūk, kā tas tiek īstenots šeit.

Šeit sīkfails tzRemember darbojas kā vadības elements, lai noteiktu, vai ir jāatsakās no lietotāja, kurš nav atzīmējis izvēles rūtiņu “Atcerēties mani”. Ja sīkfails trūkst (pārlūkprogrammas restartēšanas dēļ) un apmeklētājs nav atzīmējis opciju “atcerēties mani”, mēs dzēšam sesiju.

Pati sesija paliks aktīva divas nedēļas (kā iestatīts parametrā session_set_cookie_params).

Un šeit ir demo.php otrā daļa.

Else if($_POST["iesniegt"]=="Reģistrēties")
{
// Ja pieprasījums ir nosūtīts no Reģistrācijas formas
$err = masīvs();
if(strlen($_POST["lietotājvārds"])32)
{
$err="Lietotājvārdam jābūt no 3 līdz 32 rakstzīmēm garam!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["lietotājvārds"]))
{
$err="Lietotājvārds satur nederīgas rakstzīmes!";
}
if(!checkEmail($_POST["e-pasts"]))
{
$err="Jūsu epasta adrese nepareizi!";
}
if(!count($err))
{
// Ja kļūdu nav
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// Izveidojiet nejaušu paroli
$_POST["e-pasts"] = mysql_real_escape_string($_POST["e-pasts"]);
$_POST["lietotājvārds"] = mysql_real_escape_string($_POST["lietotājvārds"]);
// sagatavojiet datus
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
VĒRTĪBAS(
"".$_POST["lietotājvārds"]."",
".md5($pass).",
"".$_POST["e-pasts"]."",
"".$_SERVER["REMOTE_ADDR"]."",
TAGAD ()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@site",
$_POST["e-pasts"],
"Reģistrācijas sistēmas demonstrēšana - paroles ģenerēšana",
"Jūsu parole: ".$pass);
$_SESSION["msg"]["reg-success"]="Mēs esam nosūtījuši jums e-pastu ar jūsu jauno paroli!";
}
else $err="Šis lietotājvārds jau tiek lietots!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
header("Atrašanās vieta: demo.php");
Izeja;
}
$script = "";
if($_SESSION["ziņa"])
{
// Skripts parāda bīdāmu paneli ielādes lapā
$script = "

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

Visas definētās kļūdas mēs saglabājam masīvā $err, kas vēlāk tiek piešķirts mainīgajam $_SESSION. Tādā veidā piekļuve tai tiek saglabāta pēc pārlūkprogrammas novirzīšanas.

Dažas vietnes var saņemt brīdinājumu, kad tiek iesniegta veidlapa vai nākamreiz, kad lapa tiek atsvaidzināta, ka dati jau ir iesniegti. Tas var radīt problēmas, jo tas izraisa dublikātu reģistrāciju un nevajadzīgu servera slodzi.

Mēs izmantojam galvenes funkciju, lai novērstu kļūdu, novirzot pārlūkprogrammu uz to pašu lapu. Tādējādi tiek atjaunināts lapas skats, pārlūkprogrammai neatpazīstot to kā veidlapas pieprasījumu. Rezultātā lapa tiek atsvaidzināta un dati netiek pārsūtīti.

Bet, tā kā mēs izmantojam $_SESSION, lai saglabātu visas atklātās kļūdas, ir ļoti svarīgi, lai mēs atiestatītu visus mainīgos, tiklīdz kļūda tiek parādīta lietotājam. Pretējā gadījumā tas tiks parādīts katrā lapas skatījumā.

Arī lietots papildu skripts, kas parāda joslu lejupielādes lapā, lai ziņojums būtu redzams lietotājam.

Bīdāmajā panelī tiek izmantots savs stilu fails. Tāpēc mums atliek tikai izveidot mūsu lapas stilu.

Bīdāmajam panelim ir savs jQuery fails.

Pirmajā rindā ir iekļauta jQuery bibliotēka no Google CDN. Nākamais nāk IE6 PNG ielāps caurspīdīguma elementiem. Pēc tam paneļa skripts ir ieslēgts

Mainīgais $script parāda paneli ielādes lapā, ja nepieciešams.

Laba diena, draugi! Apskatīsim lietotāju reģistrāciju PHP. Vispirms definēsim mūsu lietotāja reģistrācijas nosacījumus:

• Parole tiek šifrēta, izmantojot MD5 algoritmu
• Mēs sāls paroli
• Pārbauda, ​​vai jūsu pieteikšanās ir aizņemta
• Lietotāja aktivizēšana ar vēstuli.
• Datu ierakstīšana un glabāšana MySQL DBVS

Lai uzrakstītu šo skriptu, mums ir jāsaprot, kas ir lietotāja reģistrācija. Lietotāja reģistrācija nozīmē reālu lietotāja datu iegūšanu, datu apstrādi un uzglabāšanu.

Ja paskaidrosi vienkāršos vārdos tad reģistrācija ir tikai noteiktu datu ierakstīšana un glabāšana, ar kuriem mēs varam autorizēt lietotāju mūsu gadījumā - tas ir Pieteikšanās un Parole.

Pilnvarojums ir tiesību piešķiršana noteiktai personai vai personu grupai noteiktu darbību veikšanai, kā arī šo tiesību pārbaudes process, mēģinot veikt šīs darbības. Vienkārši sakot, ar autorizācijas palīdzību mēs varam ierobežot piekļuvi noteiktam saturam mūsu vietnē.

Apskatīsim skriptu direktoriju struktūru mūsu reģistrācijas īstenošanai ar autorizāciju. Mums ir jāsadala skripti loģiskos komponentos. Reģistrācijas un autorizācijas moduļus ievietojām atsevišķā direktorijā. Atsevišķos direktorijos izvietosim arī savienojumu ar MySQL datu bāzi, failu ar lietotāja funkcijām, failu CSS stili un mūsējie HTML veidne. Šī struktūra ļauj ātri pārvietoties pa skriptiem. Iedomājieties, ka jums ir liela vietne ar virkni moduļu utt. un ja nebūs kārtības, tad tādā bardakā būs ļoti grūti kaut ko atrast.

Tā kā mēs visus datus glabāsim MySQL DBVS, izveidosim liels galds kurā glabāsim reģistrācijas datus.

Vispirms datu bāzē ir jāizveido tabula. Sauksim tabulu bez_reg, kur bez ir tabulas prefikss, bet reg ir tabulas nosaukums.

less/reg/?mode=auth">Pieteikties