Obrazci za registracijo in avtorizacijo Jquery. Izdelava odličnega registracijskega sistema z uporabo PHP, MySQL in jQuery. Si že registriran

IN Twitter omrežja Vidite lahko, da stran deluje s čistim in preprostim dizajnom. Poglejte zgornji desni del strani, tam boste videli gumb za prijavo v sistem, s klikom nanj se vam prikažejo obrazci za izpolnjevanje podatkov. Danes vam bomo povedali, kako ustvariti podoben učinek na svojem spletnem mestu. Pravzaprav je zelo preprosto. Poleg tega vam bo to pomagalo prihraniti prostor na strani in obiskovalcem dodati občutek udobja. V tem članku vam bomo korak za korakom povedali, kako deluje celoten sistem, ta vodnik pa bo koristen tudi za tiste, ki se želijo naučiti jQuery. Naprej!

HTML koda

Najprej morate začeti s kodo HTML. HTML koda je zelo enostavna - vsebuje oznako “a”, ki gre skupaj z oznako “fieldset”, zaradi katere se izpiše obrazec.

Samo kopirajte to v svojo kodo nova stran:

Imate račun? Prijava


Uporabnisko ime ali e-posta

Geslo

Zapomni si me

Ste pozabili geslo?

Ste pozabili uporabniško ime?

Boste potrebovali z uporabo CSS za določitev avtorizacijskega gumba in obrazca za prijavo. Spodnja koda opravlja točno to funkcijo.

Preprosto kopirajte to kodo v datoteko css ali jo dodajte svoji kodi HTML, kjer določite slog. Te kode določajo gumb za prijavo.

#posoda (
širina:780px;
margin:0 auto;
položaj: relativni;
}

#vsebina (
širina:520px;
min-height:500px;
}
a:povezava, a:obiskano (
barva:#27b;
text-decoration:none;
}
a:hover (
tekst-okras:podčrtaj;
}
slika (
širina obrobe:0;
}
#topnav (
oblazinjenje:10px 0px 12px;
velikost-pisave:11px;
line-height:23px;
poravnava besedila: desno;
}
#topnav a.signin (
ozadje:#88bbd4;
oblazinjenje:4px 6px 6px;
text-decoration:none;
teža pisave: krepko;
barva: #fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
obrobni radij:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*oblazinjenje:4px 12px 6px;
}
#topnav a.signin:hover (
ozadje:#59B;
*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*oblazinjenje:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*background-position:0 3px!pomembno;
}

a.signin(
položaj:relativni;
margin-left:3px;
}
a.signin span(
background-image:url("images/toggle_down_light.png");
ponavljanje v ozadju: brez ponavljanja;
položaj ozadja: 100 % 50 %;
oblazinjenje:4px 16px 6px 0;
}
#topnav a.menu-open (
ozadje:#ddeef6!pomembno;
barva:#666!pomembno;
oris:brez;
}
#majhna_prijava (
prikaz: v vrstici;
float:none;
line-height:23px;
margin:25px 0 0;
širina:170px;
}
a.signin.menu-open span (
background-image:url("images/toggle_up_dark.png");
barva:#789;
}

In potem pride definicija obrazca za prijavo:

#prijavni_meni (
-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;
prikaz:ni;
barva ozadja:#ddeef6;
položaj: absolutno;
širina:210px;
z-indeks:100;
obroba:1px prozorna;
poravnava besedila:levo;
oblazinjenje:12px;
zgoraj: 24,5 slikovnih pik;
desno: 0px;
margin-top:5px;
desni rob: 0px;
*desni rob: -1px;
barva:#789;
velikost-pisave:11px;
}

#signin_menu input, #signin_menu input (
zaslon: blok;
-moz-border-radius:4px;
-webkit-border-radius:4px;
obroba:1px polna #ACE;
velikost-pisave:13px;
margin:0 0 5px;
oblazinjenje:5px;
širina:203px;
}
#prijavni_meni p (
rob:0;
}
#prijavni_meni a (
barva:#6AC;
}
#oznaka menija za prijavo (
teža-pisave:normalna;
}
#prijavni_meni p.zapomni si (
oblazinjenje:10px 0;
}
#signin_menu p.pozabljen, #signin_menu p.complete (
jasno: oboje;
margin:5px 0;
}
#prijava_menu p a (
barva:#27B!pomembno;
}
#signin_submit (
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url("images/bg-btn-blue.png") repeat-x drsenje 0 0;
obroba:1px polna #39D;
barva: #fff;
text-shadow:0 -1px 0 #39d;
oblazinjenje:4px 10px 5px;
velikost-pisave:11px;
margin:0 5px 0 0;
teža pisave: krepko;
}
#signin_submit::-moz-focus-inner (
oblazinjenje:0;
meja:0;
}
#signin_submit:hover, #signin_submit:focus (
položaj ozadja:0 -5px;
kazalec: kazalec;
}

Čas je za delo z javascriptom

Zdelo bi se, HTML kode in CSS sta precej zapletena in zmedena, v javascriptu pa je vse zelo preprosto. Preprosto kopirajte to kodo javascript, ki vam bo omogočila prikaz in skrivanje obrazca, ko kliknete gumb za prijavo, tudi če je klik opravljen zunaj obrazca za prijavo.

$(dokument).pripravljen(funkcija() (

$(".signin").click(function(e) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(function() (
vrni false
});
$(dokument).mouseup(funkcija(e) (
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});

V skladu z zgoraj predstavljeno kodo, ko obiskovalec klikne gumb za prijavo, se nova funkcija. Najprej se prikaže obrazec za prijavo (obdan v oznaki “filedset”), nato povezava, zaprta v razredu “.signin”, doda še en razred “menu-open”, zaradi katerega se spremeni slika ozadja.

Drugi dogodek v tej kodi je, da ko obiskovalci ne kliknejo obrazca za prijavo, ampak nekje na strani, se obrazec sam zapre. Z drugimi besedami, razred »menu-open« je odstranjen iz povezave z razredom ».signin« in ga vrne v prvotno sliko ozadja.

Kar se tiče nasvetov?

$(funkcija() (
$("#pozabljena_username_link").tipsy((gravitacija: "w"));
});

Običajno priporočamo uporabo vtičnika jQuery – tipsy. Vsebina namiga je tisto, kar je zapisano v atributu "naslov", ki je povezan s povezavo. Položaj opisa orodja lahko spremenite glede na vzhod, zahod, jug ali sever. To se izvaja s parametrom "gravitacija", določenim v zgornji kodi. Nudimo vam povezavo do spletnega mesta, namenjenega temu vtičniku, kjer lahko podrobneje preučite njegove zmogljivosti in prenesete vtičnik. ...

Končno

Če ste kopirali vso kodo iz tega članka, ne spreminjajte strukture map. Če jo spremenite, koda ne bo delovala. Ta koda je le primer ustvarjanja spustnega obrazca za prijavo z uporabo jQuery. Vso srečo pri praksi!

Odločili smo se dopolniti z nekaterimi primeri, objavljenimi na Habréju, da boste lahko spoznali nekaj »inovativnih tehnik« za izboljšanje obrazcev za registracijo in avtorizacijo.

Torej, nekaj trikov:

• ni potrebe po podvajanju vnosa gesla;

Da bi uporabniku olajšali življenje (zakaj je to dobro prikazano v Googlu), je bolje narediti eno polje in potrditveno polje, ki bo odstranilo "masko" - vse to se naredi z majhno kodo javascript.

// // //

1. Knjižnica jQuery.

2-7. inicializacija elementa.

B. Koda HTML obrazca je naslednja:

Prijava: Geslo:

5-6. Vidnost teh polj preklaplja skript s potrditvenim poljem.

B.init.js

$(document).ready(function())( $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", ( besedilo: "Potrditveno polje po meri", ime: " showmypass " )); ));

G.styles.css

Telo (družina pisav: Arial, Helvetica, serif, sans-serif;) oblika (rob: 15px 0; oblazinjenje: 15px; ozadje: #ccc; barva: #000; obroba: 1px polna #aaa; širina: 500px; ) form label.form ( float: levo; širina: 120px; display: block; ) form input#testpassword1, form input#testpassword ( float: left; display: block; ) .clear ( clear: both; ) div.checker ( clear : oboje; obroba: 1px pikčasto #2d2d2d; velikost pisave: 0,8 em;

• Bolje je samodejno izpolnjevanje polj glede na vnesene podatke;

Manj kot mora uporabnik vnesti, tem bolje. Nekatera polja lahko izpolnite na podlagi predhodnih, že vnesenih podatkov. Polje »mesto« lahko na primer izpolnite tako, da preberete in obdelate vrednost iz polja »indeks«. Enostavna zahteva Ajax in je narejena. Uporaba AJAX za pridobitev podatkov o mestu in regiji iz poštne številke.

A. Knjižnice vključimo v ‹header›:

1. Knjižnica jQuery.
2. Glavni scenarij.

B. Koda HTML obrazca je naslednja:

Poštna številka Mesto Država

1.Polje v katerega vpišemo poštno številko.

B. zip_city.js:

Funkcija fillcitystate(controlname)( var zipcode = trim(controlname.value); //trim presledke if(zipcode.length!=5)( //preveri dolžino return false; ) var zipstring = ""; xmlhttp = new XMLHttpRequest() ; xmlhttp.open("GET", "php/zip_city.php?zip=" + zipcode, true); .readyState= =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Napaka")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; / /nastavi vrednosti za polje mesta document.getElementById("txtCountry").value = ziparray; //nastavi vrednosti za polje države ) ) xmlhttp.send(null); //funkcija obrezovanja prostora trim( s) ( var l=0; var r=s.length -1; while(l< s.length && s[l] == " ") { l++; } while(r >l && s[r] == " ") ( r-=1; ) vrni s.substring(l, r+1); )

D. zip_city.php: obdelava zahtev ajax.

Require_once("db.php"); $db_table = "zip_city"; //privzeta vrnjena vrednost $returnval = "Napaka"; //pridobivanje parametra GET $zipcode = $_GET["zip"]; //predhodna obdelava if (strlen($zipcode)>5)( $zipcode = substr($zipcode, 0, 5); ) if (strlen($zipcode)!=5)( die ($returnval); ) //prejemanje vrednosti iz baze podatkov $query = "SELECT * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) ali die("Ne morem zagnati poizvedbe:Query: ".$query."".mysql_error($conn)); $rowcount = mysql_num_rows($resultval); if ($rowcount==1)( $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))."|" .$row["country"]; //pravzaprav generiranje uspešnega odgovora ) echo $returnval;

D. db.php: konfiguracija povezave z bazo podatkov.

//nastavitve povezave z bazo podatkov $dbhost = "localhost"; $dbusername = "root"; $dbpass = ""; $db_name = "prijava v blog"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) ali die("Ni mogoče vzpostaviti povezave s strežnikom baze podatkov MySQL:".mysql_error()); $db = mysql_select_db($db_name, $conn) ali die("Baze podatkov ni mogoče odpreti:".mysql_error($conn));

E. Ustvarjanje tabele baze podatkov:

USTVARI TABELO, ČE NE OBSTAJA `zip_city` (`id` int(11) NOT NULL AUTO_INCREMENT, `zip` varchar(5) NI NULL, `mesto` varchar(255) NI NULL, `country` varchar(255) NI NULL, PRIMARNI KLJUČ (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=41921 ;

• lahko samodejno zamenjate v vnosno polje;

Nekatera polja zahtevajo omejen nabor vnosnih vrednosti. Uporabnik lahko na primer vnese dva znaka, si ogleda seznam držav, ki se začnejo s tema črkama, in enostavno izbere tisto, ki jo potrebuje. Poleg tega se zagotovo ne bo zmotil v imenu svoje domovine. Samodokončanje AJAX pod jQuery.

A. Poveži v ‹header›:

1. Knjižnica jQuery.
2. Skript za samodokončanje za jQuery.
3. Glavni scenarij.

B. Koda HTML obrazca je naslednja:

Država

1. Polje, v katerem morate začeti vnašati ime države.

V.init.js:

Var možnosti, a; jQuery(function())( options = ( serviceUrl:"./php/autocomplete.php"); /*določite naslov datoteke za obravnavo*/ a = $("#query").autocomplete(options); / *dodelite objekt samodokončanja z id="query"*/ ));

D. autocomplete.php: obdelava zahtev ajax

If(isset($_GET["query"]) && (!empty($_GET["query"])))( require_once("db.php"); $db_table = "system_countries"; //ime tabele baze podatkov $ query = $_GET["query"]; //poizvedba iz polja obrazca $variants = ""; $q = "SELECT `name_en` FROM `($db_table)` WHERE `name_en` REGEXP "^($query)( . *)" GROUP BY `name_en`"; /*iskanje po prvih vnesenih znakih*/ $res = mysql_query($q) ali die("Ne morem zagnati query:Query: ".$q."".mysql_error($) conn) ); /*pridobi rezultat poizvedbe*/ if(mysql_num_rows($res)>0)( while($row = mysql_fetch_row($res))( $variants = """.$row."""; / *izpolnite možnosti polja*/ ) $variants = implode(",",$variants v vrstico*/ /*oblikujte odgovor*/ $request = "( poizvedba:"); .$query."", predlogi:[".$variants."] )"; echo $request; ) )

D. Ustvarjanje tabele zbirke podatkov:

DROP TABLE IF EXISTS `system_countries`; CREATE TABLE `system_countries` (`id` int(11) NOT NULL auto_increment, `name_en` char(128) NOT NULL, `name_ru` char(128) default NULL, `code` char(2) NOT NULL, `_order` int(3) privzeto "0", `neodvisno` tinyint(1) privzeto "1", PRIMARNI KLJUČ (`id`)) ENGINE=MyISAM PRIVZETI ZNAKOVI =utf8;

G. styles.css:

Autocomplete-w1 (ozadje:url(/autocomplete/img/shadow.png) brez ponavljanja spodaj desno; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background :none; _margin:0; .autocomplete ( border:1px solid #999; background:default; text-align:left; max-height:350px; margin:-6px 6px 6px - 6px; /* Specifično za IE6: */ _overflow-x:hidden .autocomplete .selected (background:#F0F0F0;) .autocomplete div (padding:2px 5px; white-space:nowrap;) .autocomplete strong ( font-weight:normal; barva:#3399FF;

• Zakaj dvakrat vnašati podatke?

Veliko spletnih trgovin uporablja večstopenjske naročilnice s polji za naslove za plačilo in dostavo. Njihov pomen je pogosto enak. Zakaj ne bi uporabniku ponudili podvojitev vrednosti že vnesenih polj z enim klikom? Programsko je tehnika preprosta in jo lahko uporabite v različnih primerih, kjer je implicirana verjetnost ponovitve vrednosti.

A. Poveži v ‹header›:

1.Knjižnica JQuery.

2. jQuery Izberite vtičnik.

3. glavni scenarij.

B. Koda HTML obrazcev je naslednja:

Podatki o plačilu.

14. Potrditveno polje Kopiraj.

V.init.js:

//ko se stran naloži $(document).ready(function() ( //ko je potrditveno polje aktivirano ali deaktivirano $("#copyaddress").click(function() ( // če je aktivirano if ($(" #copyaddress") .is(":checked")) ( //za vsako vnosno polje $("#shipping_fields input", ":visible", document.body).each(function(i) ( //kopiranje vrednosti​ iz polj za plačilo // v ustrezna polja za dostavo $(this).val($("#billing_fields input").eq(i).val()); //ne deluje s spustnimi meniji, zato mi bo uporabil funkcije vtičnika var bcountry = $( "#bcountry").val(); selectOptions(bcountry); else ( //če je potrditveno polje onemogočeno //za vsako vnosno polje $( "#shipping_fields input", ":visible", document.body).each(function(i) ( //počisti polja s podatki o dostavi $(this).val(""); )); $("#scountry" ).selectOptions("" )) ;

• Zdi se, da so ljudje utrujeni od branja captcha :)

Verjetno ste tudi sami utrujeni od branja nečitljivih znakov iz captcha in njihovega vnašanja. Usmilimo se uporabnikov, a ne spustimo botov skozi. Če želite to narediti, se lahko zatečete k več tehnikam, razmislimo o eni od njih. Pristop Honeypot Captcha - na obrazcu ustvarimo polje, ki je uporabniku nevidno, botu pa vidno. Če preverimo to vrednost, lahko ujamemo neprevidne pošiljatelje neželene pošte, ne da bi povzročali težave resničnim ljudem. Vpliv captcha na stopnjo konverzije.

A. Koda HTML za obrazec je naslednja:

Ime Priimek E-pošta Skrito polje. Če ste ga izpolnili, potem ste bot

B. dodajte naslednje js:

Function check() ( if(document.form_find.body.value)( console.log("POZOR!!! BOT NA STRANI!!!"); ) )

Proces avtorizacije je, figurativno rečeno, ko oseba "pozdravi" spletno mesto. V srednjem veku so ljudje v spodobnih hišah ljudi pozdravljali z večkratnimi prikloni in prikloni. A mi bomo šli v korak s časom in poskrbeli, da bo za pozdrav dovolj le en topel stisk roke. Poenostavljamo prijavo na stran.

• Uporabnika pustimo na strani, kjer se je prijavil;

Izbirate lahko med dvema možnostma: spustnim obrazcem in modalnim oknom. Spustni obrazec zavzame le majhen del strani, enostavna in hitra možnost za uporabo.

A. Knjižnice vključimo v ‹header›:

3. Glavni scenarij.

B. Koda HTML obrazca je naslednja:

Prijava Geslo Zapomni si me Za avtorizacijo vnesite svojo prijavo: prijavo in geslo: geslo

4. Gumb za odpiranje obrazca.

7-22. Oblika sama.

19. Potrditveno polje, ki vsiljuje namestitev piškotkov za zelo dolgo časa.

23. Mesto za sporočilo.

V. jqeasy.dropdown.js:

$(document).ready(function() ( /*glavna funkcija*/ $(".btnsignin").click(function(e) ( /*ko kliknete gumb "Prijava"*/ e.preventDefault(); $ ("#frmsignin").toggle("fast",function() ( /*preklopi vidnost obrazca*/ $("#username").focus(); /*premakne vnosni kazalec v polje za prijavo */ )); (toggleClass("btnsigninon"); /*preklopi razred za spremembo pogleda*/ $("#msg").empty(); )); ); $(document).mouseup(function(e) ( /*ko je miška izpuščena*/ if($(e.target).parents("#frmsignin").length==0) ( / *not on eden od obrazcev*/ $(".btnsignin").removeClass("btnsignin"); )); ( /*če je prispelo OK*/ $("#frmsignin").text("Signed in!"); /*pošlji besedilno obvestilo*/ $("#frmsignin").delay(800). fadeOut (400); $("#signbtn").html("Izhod"); /*spremeni gumb za izhod*/ ) else ( $("#msg").html(data); $("#username").focus(); ) ) )); )); funkcija validate(formData, jqForm, options) ( /*potrditveni postopek za vnesene podatke, vsebuje obdelavo izpisa napak*/ var form = jqForm; var un = $.trim(form.username.value); var pw = $.trim( form .password.value); var unReg = /^(3,20)$/; var hasError = false;

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " Prijava mora vsebovati 3–20 znakov (a-z, 0-9, _). "; hasError = true; ) if (! pw) ( errmsg += "Vnesite svoje geslo"; hasError = true; ) else if(!pwReg.test(pw)) ( errmsg += " Geslo mora biti dolgo od 6 do 20 znakov (a-z, 0-9, !, @ , #, $, %, &, *, (,), _). "; hasError = true; ) if (!hasError) ( $("#msg").html(" request... "); ) else ( $("#msg").html(errmsg); return false; ) )

G. dropdown.php:

If(($_POST["uporabniško ime"]=="prijava") && ($_POST["geslo"]=="geslo"))( echo "OK"; )else( echo "Neveljavna prijava ali geslo"; )

D. style.css:

Telo (padding:20px; font:12px Verdana, Geneva, sans-serif; color:#333; ) #container ( width:700px; /*margin:0 auto;*/ padding:13px 10px; border:1px solid #999 ; ) a.btnsignin, a.btnsignout (background:#999; padding:5px 8px; color:#fff; text-decoration:none; font-weight:bold; -webkit-border-radius:4px; -moz-border -radius:4px; border-radius:4px; ) a.btnsignin:hover, a.btnsignout:hover (background:#666;) a.btnsigninon (background:#ccc!important; color:#666!important; oris: none; ) #frmsignin ( display:none; background-color:#ccc; position:absolute; top: 89px; width:215px; padding:12px; *margin-top: 5px; font-size:11px; -moz-border -radius:5px; -moz-border-radius:5px; z-index: vhod #frmsignin (display:block; -moz -border-radius:4px; -border-radius:4px; roba:1px; oblazinjenje:5px; širina:203px; ) #frmsignin p ( margin:0; ) #frmsignin label ( font-weight:normal; ) #submitbtn ( -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background- barva: #fff; font-weight: pointer; .submit (padding-top: 5px;) #msg img ( margin-bottom:-3px; ) #msg p ( margin:5px 0; ) # msg p:last-child ( margin-bottom:0px; ) h1( margin:0 auto; )

Modalno okno osredotoči vso pozornost nase in hkrati omogoča, da na obrazec postavite dodatne informacije ali opis.

A. Knjižnice vključimo v ‹header›:

4. Glavni scenarij.

6. Osnovni slogi.

7. Osnovni slogi za modalno okno.

B. Koda HTML obrazca je naslednja:

Prijava | Osebni prostor E-pošta za prijavo Geslo Zdravljenje...

2. Gumb za odpiranje obrazca.

6-27. Modalno okno.

8-11. Naslov modalnega okna.

V.init.js:

// Prednaloži img1 = nova slika (16, 16); img1.src="./img/spinner.gif"; img2 = nova slika (220, 19); img2.src="./img/ajax-loader.gif"; // Ko je DOM pripravljen $(document).ready(function())( // Zaženi MODAL BOX, če je kliknjena povezava za prijavo $("#login_link").click(function())( $("#login_form ").modal() ; )); // Ko je obrazec oddan $("#status > obrazec").submit(function())( // Skrij gumb "Pošlji" $("#submit"). hide(); // Pokaži vrteči se gif $ ("#ajax_loading").show(); // "this" se nanaša na potrjeno obliko var str = $(this).serialize(); // -- Zaženite Klic AJAX -- $.ajax(( tip: "POST" ", url: "php/do-login.php", // Podatki o avtorizaciji so poslani tukaj data: str, uspeh: funkcija(msg)( $("# status").ajaxComplete(function(event, request, settings)( // Pokaži gumb "Pošlji" $("#submit").show(); // Skrij vrteči se gif $("#ajax_loading").hide (); if(msg == "OK") // PRIJAVA OK ( var login_response = " " + " " + " " + " " + " " + " "+ "Uspešno ste se prijavili! Počakajte na preusmeritev ... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container ").css("height","120px"); $(this).html(login_response); // Nanaša se na "status" // Po 3 sekundah preusmeri setTimeout("go_to_private_page()", 3000); ) else // napaka? ( var login_response = msg; html(login_response); )); // Konec klica AJAX - vrnitev false )); php/private.php"; // Uporabnikova osebna stran )

G. do-login.php: obdelava zahtev ajax

D. private.php: stran, do katere lahko dostopate samo po avtorizaciji.

Vključi "config.php";//če obstajajo ustrezni piškotki, se vzpostavi seja, da je uporabnik pooblaščen // Preverjanje, ali je uporabnik pooblaščen if(!isSet($_SESSION["uporabniško ime"])) ( header( "Lokacija: /modal .html"); echo $_SESSION["uporabniško ime"]." | Izhod To je vaša osebna stran ";

D.config.php:

Error_reporting(E_ALL ^ ​​​​E_NOTICE); session_start(); // Zagon glave seje ("Cache-control: private"); // POPRAVEK IE 6 // vedno spremenjena glava ("Zadnja sprememba: " . gmdate ("D, d M Y H:i:s") . " GMT"); // HTTP/1.1 header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // HTTP/1.0 glava ("Pragma: brez predpomnilnika"); // ---------- PODATKI ZA PRIJAVO ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 dni if(!$_SESSION["uporabniško ime"]) ( include_once "autologin.php"; )

E. autologin.php:

If(isSet($cookie_name)) ( // Preverite, ali piškotek obstaja if(isSet($_COOKIE[$cookie_name])) ( parse_str($_COOKIE[$cookie_name]); // Izvedite preverjanje if(($usr = = $config_username) && ($hash == md5($config_password))) ( // Registrirajte sejo $_SESSION["username"] = $config_username; ) ) )

Z. odjava.php:

Vključite "config.php"; if(isSet($_SESSION["username"])) ( unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) ( // odstrani piškotek "site_auth" setcookie ($cookie_name, "", time() - $cookie_time header("Lokacija: modal.html");

K. stylesheet.css:

Html, body (padding: 0; border: 0px none; font-family: Verdana; font-size: 11px; ) /* Oznaka */ label ( width: 80px; padding-left: 20px; rob: 5px; float: levo ; text-align: left; ) /* Vnos besedila */ input ( margin: 5px; padding: 0px; float: solid #cdcdcd; background-color: white; -moz-border-radius: 2px; ) br ( jasno: levo; ) .textbox ( obroba: 1px polna #999999; barva zgornjega roba: #CCCCCC; barva leve obrobe: #CCCCCC; barva: #333333; pisava: 90 % Verdana, Helvetica, Arial , sans-serif; font-size: 11px; ) div (font-family: Verdana; font-size: 11px; ) /* Gumb "Prijava" */ #submit (rob: 5px) ; padding: 0px; ozadje: bela; #notification_error (color: auto; padding: 4px; text-align: center;) #ajax_loading (display). : nobena; velikost pisave: font-family: Tahoma; oblazinjenje: 5px; rob: 23px 43px; poravnava besedila: sredina; širina: 400px; ) #status ( margin-top: 20px; width: 310px; )

L. osnovni.css:

/* Prekrivanje */ #simplemodal-overlay (background-color:#aaaaaa; cursor:wait;) /* Vsebnik */ #simplemodal-container (height:180px; width:300px; background-color:#fff; border:1px solid #000000; -moz-border-radius: 5px; #simplemodal-container a.modalCloseImg (background:url("img/x.png") no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute;-15px; cursor:pointer;) #simplemodal-container (padding:8px;)

• Kazalec postavite v prvo polje obrazca.

Da ne bi uporabnika silili v beganje z očmi in miško po strani v iskanju polja, kamor mora vpisati besedilo, lahko kurzor samodejno postavimo tja. In glavna stvar je, da se to naredi zelo preprosto in v tem uživajo.

A. Koda HTML za obrazec je naslednja:

Drugo polje Prvo polje Tretje polje

4. Fokus B bo nastavljen na to polje. Dodajte naslednje js:

Funkcija setFocus() ( /*nastavi fokus na želeno polje*/ document.form_find.find_fio.select(); document.form_find.find_fio.focus(); )

Naš cilj je narediti obrazce za registracijo in prijavo tako lepe in prijetne kot recimo stevardese. Upam, da bodo moji primeri koristni in bodo postali osnova za ustvarjanje lastnih mojstrovin gradnje oblik.

Vse se dogaja pod PHP nadzorom, podatki pa so shranjeni v podatkovni bazi Podatki MySQL.

Sistem uporablja odlično drsno ploščo, ki jo je razvilo podjetje Web-kreation.

Najprej moramo izdelati tabelo, ki bo vsebovala vse podatke o registriranih uporabnikih. Koda poizvedbe je na voljo v datoteki table.sql v izvornem arhivu.

Id definiramo kot celo število z možnostjo auto_increment - samodejno bo dodeljen vsakemu novemu registriranemu uporabniku. Prav tako je usr definiran kot edinstven ključ - dva zapisa z istim uporabniškim imenom ne smeta obstajati v tabeli.

Kasneje bomo navedene lastnosti uporabili med postopkom registracije, ko bo vneseno uporabniško ime.

Ko ustvarite tabelo, morate v datoteki connect.php izpolniti spremenljivke za povezavo z vašo bazo podatkov, da boste lahko izvajali kodo na vašem strežniku.

Najprej moramo v našo stran vdelati obrazec za spletno ustvarjanje.

Demo podatki

• Zdravo !



• 
  
  Zapri ploščo
  

Na več mestih v kodi so izjave PHP, ki preverjajo, ali je definiran $_SESSION["usr"] ali $_SESSION["id"]. Resnične so le, če je obiskovalec strani registriran uporabnik, kar nam omogoča prikaz skrite vsebine za registrirane obiskovalce.

Za obrazcem postavimo ostalo vsebino strani.

jQuery drsna plošča
Enostavno upravljanje registracije z z uporabo PHP in jQuery

Nekaj ​​besedila...

V kodi ni nič posebnega.

Zdaj bomo obrazec pretvorili v popoln sistem registracije in prijave. Da bi rešili težavo, boste potrebovali nekaj drugega kot običajno kodo PHP. Celotna koda je razdeljena na dva dela.

Če nameravate nekaj dodati, je najbolje, da vse razdelite na več ločene datoteke in jih po potrebi vključite. Ta pristop pomaga razvijati velike projekte in hkrati ponovno uporabiti kodo v različnih delih spletnega mesta.

Tukaj je opisano, kako se izvaja.

Tukaj piškotek tzRemember deluje kot nadzorni element, ki določa, ali naj se odjavi uporabnik, ki ni označil potrditvenega polja »Zapomni si me«. Če piškotek manjka (zaradi ponovnega zagona brskalnika) in obiskovalec ni označil možnosti »zapomni si me«, sejo izbrišemo.

Sama seja bo ostala aktivna dva tedna (kot je nastavljeno v parametru session_set_cookie_params).

In tukaj je drugi del demo.php.

Else if($_POST["submit"]=="Registracija")
{
// Če je zahteva poslana iz obrazca za registracijo
$napaka = polje();
if(strlen($_POST["uporabniško ime"])32)
{
$err="Uporabniško ime mora biti dolgo med 3 in 32 znaki!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["uporabniško ime"]))
{
$err="Uporabniško ime vsebuje neveljavne znake!";
}
if(!checkEmail($_POST["email"]))
{
$err="Vaš email naslov narobe!";
}
če(!štetje($napaka))
{
// Če ni napak
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// Ustvari naključno geslo
$_POST["email"] = mysql_real_escape_string($_POST["email"]);
$_POST["uporabniško ime"] = mysql_real_escape_string($_POST["uporabniško ime"]);
// pripravi podatke
mysql_query(" VSTAVI V tz_members(usr,pass,email,regIP,dt)
VREDNOTE(
"".$_POST["uporabniško ime"]."",
"".md5($pass).",
"".$_POST["e-pošta"]."",
"".$_SERVER["REMOTE_ADDR"]."",
ZDAJ()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@site",
$_POST["e-pošta"],
"Demonstracija registracijskega sistema - generiranje gesla",
"Vaše geslo: ".$pass);
$_SESSION["msg"]["reg-success"]="Poslali smo vam e-pošto z vašim novim geslom!";
}
else $err="To uporabniško ime je že v uporabi!";
}
če(štetje($napaka))
{
$_SESSION["msg"]["reg-err"] = implode("
",$napaka);
}
header("Lokacija: demo.php");
izhod;
}
$script = "";
if($_SESSION["msg"])
{
// Skript prikazuje drsno ploščo na strani za nalaganje
$script = "

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

Vse definirane napake shranimo v matriko $err, ki je kasneje dodeljena spremenljivki $_SESSION. Tako se ohrani dostop do njega tudi po preusmeritvi brskalnika.

Nekatera spletna mesta lahko ob oddaji obrazca ali ob naslednji osvežitvi strani prejmejo opozorilo, da so bili podatki že oddani. To je lahko težava, saj vodi do podvojenih registracij in nepotrebne obremenitve strežnika.

Funkcijo glave uporabljamo za preprečevanje napake s preusmeritvijo brskalnika na isto stran. To posodobi pogled strani, ne da bi ga brskalnik prepoznal kot zahtevo obrazca. Posledično se stran osveži in podatki se ne prenesejo.

Ker pa uporabljamo $_SESSION za shranjevanje vseh odkritih napak, je zelo pomembno, da ponastavimo vse spremenljivke takoj, ko je napaka prikazana uporabniku. V nasprotnem primeru bo prikazan na vsakem ogledu strani.

Tudi rabljeno dodatni skript, ki prikazuje vrstico na strani za prenos, tako da je sporočilo vidno uporabniku.

Drsna plošča uporablja lastno datoteko slogov. Vse, kar moramo storiti, je ustvariti slog za našo stran.

Drsna plošča ima lastno datoteko jQuery.

Prva vrstica vključuje knjižnico jQuery iz Googlovega CDN. Sledi popravek IE6 PNG za elemente prosojnosti. Nato se vklopi skript plošče

Spremenljivka $script po potrebi prikaže ploščo na strani za nalaganje.

Dober dan, prijatelji! Poglejmo si registracijo uporabnikov v PHP. Najprej določimo pogoje za registracijo našega uporabnika:

• Geslo je šifrirano z algoritmom MD5
• Geslo bomo zasolili
• Preverjanje, ali je vaša prijava zasedena
• Aktivacija uporabnika s pismom.
• Snemanje in shranjevanje podatkov v MySQL DBMS

Za pisanje tega skripta moramo razumeti, kaj je registracija uporabnika. Registracija uporabnika pomeni pridobivanje resničnih uporabniških podatkov, obdelavo in shranjevanje podatkov.

Če razložiš s preprostimi besedami potem je registracija samo beleženje in shranjevanje določenih podatkov, s katerimi lahko avtoriziramo uporabnika v našem primeru - to sta Prijava in Geslo.

Pooblastilo je podelitev pravic določeni osebi ali skupini oseb za opravljanje določenih dejanj, pa tudi postopek preverjanja teh pravic pri poskusu izvajanja teh dejanj. Preprosto povedano, s pomočjo avtorizacije lahko omejimo dostop do določenih vsebin na naši spletni strani.

Oglejmo si strukturo imenikov skriptov za izvajanje naše registracije z avtorizacijo. Skripte moramo razdeliti na logične komponente. Modula za registracijo in avtorizacijo smo postavili v ločen imenik. V ločene direktorije bomo postavili tudi povezavo do baze MySQL, datoteko z uporabniškimi funkcijami, datoteko slogi CSS in naše Predloga HTML. Ta struktura vam omogoča hitro krmarjenje po skriptih. Predstavljajte si, da imate veliko spletno stran s kupom modulov itd. in če reda ni, bo v taki zmešnjavi zelo težko kaj najti.

Ker bomo vse podatke shranjevali v MySQL DBMS, ustvarjajmo velika miza v kateri bomo hranili registracijske podatke.

Najprej morate ustvariti tabelo v bazi podatkov. Poimenujmo tabelo bez_reg, kjer je bez predpona tabele, reg pa ime tabele.

less/reg/?mode=auth">Prijava