Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Backend Development > PHP Tutorial > Create avatar login window with PHP, jQ and CSS_PHP tutorial

Create avatar login window with PHP, jQ and CSS_PHP tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release： 2016-07-20 10:58:29
Original
1232 people have browsed it

I designed a simple and interesting login box function that contains a Gravatar avatar. The avatar is exported from gravatar.com based on the email id. This article is a very basic level implementation of CSS and a few lines of Jquery and PHP code. I hope this login box design gives some special flavor to your web project. Please upload your avatar on Gravatar before trying this example.

Use PHP, jQuery and CSS to create a gravatar avatar login window

Use PHP, jQuery and CSS to create a gravatar avatar login window

JavaScript

Contains javascript code. $(".user").keyup(function(){}---user is the name of the input tag. We get the input value through $(this).val(). If the email value passes the regular expression, ajax will request avatar.php

<ol class="dp-c">
<li class="alt"><span><span><script type=</span><span class="string">"text/javascript"</span><span> src=</span><span class="string">"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"</span><span>></script>  </span></span></li>
<li><span><script type=</span><span class="string">"text/javascript"</span><span> >  </span></li>
<li class="alt">
<span>$(document).ready(</span><span class="keyword">function</span><span>()  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span>$(</span><span class="string">"#username"</span><span>).focus();  </span>
</li>
<li>
<span>$(</span><span class="string">".user"</span><span>).keyup(</span><span class="keyword">function</span><span>()  </span>
</li>
<li class="alt"><span>{  </span></li>
<li>
<span class="keyword">var</span><span> email=$(</span><span class="keyword">this</span><span>).val();  </span>
</li>
<li class="alt">
<span class="keyword">var</span><span> dataString = </span><span class="string">'email='</span><span>+ email ;  </span>
</li>
<li>
<span class="keyword">var</span><span> ck_email = /^([w-]+(?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i;  </span>
</li>
<li class="alt"><span> </span></li>
<li>
<span class="keyword">if</span><span>(ck_email.test(email))  </span>
</li>
<li class="alt"><span>{  </span></li>
<li><span>$.ajax({  </span></li>
<li class="alt">
<span>type: </span><span class="string">"POST"</span><span>,  </span>
</li>
<li>
<span>url: </span><span class="string">"avatar.php"</span><span>,  </span>
</li>
<li class="alt"><span>data: dataString,  </span></li>
<li>
<span>cache: </span><span class="keyword">false</span><span>,  </span>
</li>
<li class="alt">
<span>success: </span><span class="keyword">function</span><span>(html)  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span>$(</span><span class="string">"#img_box"</span><span>).html(</span><span class="string">"<img src='http://www.gravatar.com/avatar.php?gravatar_id="</span><span>+html+</span><span class="string">"?d=mm' />"</span><span>);  </span>
</li>
<li><span>}  </span></li>
<li class="alt"><span>});  </span></li>
<li><span>}  </span></li>
<li class="alt"><span> </span></li>
<li><span>});  </span></li>
<li class="alt"><span>});  </span></li>
<li><span></script> </span></li>
</ol>
Copy after login

Use PHP, jQuery and CSS to make a gravatar avatar login window

Use PHP, jQuery and CSS to create a gravatar avatar login window

HTML code

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"login_container"</span><span class="tag">></span><span> </span></span></li>
<li>
<span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"login_box"</span><span class="tag">></span><span> </span>
</li>
<li class="alt">
<span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"img_box"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">img</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"http://www.gravatar.com/avatar/?d=mm"</span><span> </span><span class="attribute">alt</span><span>=</span><span class="attribute-value">""</span><span> </span><span class="tag">/></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span>
</li>
<li>
<span class="tag"><</span><span class="tag-name">form</span><span> </span><span class="attribute">action</span><span>=</span><span class="attribute-value">"login.php"</span><span> </span><span class="attribute">method</span><span>=</span><span class="attribute-value">"post"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"username"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"input user"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span> </span><span class="tag">/></span><span> </span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"password"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"input passcode"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"password"</span><span> </span><span class="tag">/></span><span> </span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"btn"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"submit"</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">" Login "</span><span> </span><span class="tag">/></span><span class="tag"></</span><span class="tag-name">form</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span>
</li>
<li class="alt">
<span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span>
</li>
</ol>
Copy after login

avatar.php

This contains very simple code: receive the POST email, perform md5 encryption, and return the encrypted data. 

<ol class="dp-c"><li class="alt"><span><span><?php  </span></span></li><li><span class="keyword">if</span><span>(</span><span class="vars">$_POST</span><span>[</span><span class="string">'email'</span><span>])  </span></li><li class="alt"><span>{  </span></li><li><span class="vars">$email</span><span>=</span><span class="vars">$_POST</span><span>[</span><span class="string">'email'</span><span>];  </span></li><li class="alt"><span class="vars">$lowercase</span><span> = </span><span class="func">strtolower</span><span>(</span><span class="vars">$email</span><span>);  </span></li><li><span class="vars">$image</span><span> = md5(</span><span class="vars">$lowercase</span><span>);  </span></li><li class="alt"><span class="func">echo</span><span> </span><span class="vars">$image</span><span>;  </span></li><li><span>}  </span></li><li class="alt"><span>?> </span></span></li></ol>
Copy after login

CSS

<ol class="dp-css">
<li class="alt"><span><span class="value">#login</span><span>_container  </span></span></li>
<li><span>{  </span></li>
<li class="alt">
<span class="keyword">background</span><span>:</span><span class="value">url</span><span>(</span><span class="value">blue</span><span>.jpg) </span><span class="value">#006699</span><span>;  </span>
</li>
<li>
<span class="keyword">overflow</span><span>: </span><span class="value">auto</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">width</span><span>: </span><span class="value">300px</span><span>;  </span>
</li>
<li><span>}  </span></li>
<li class="alt">
<span class="value">#login</span><span>_box  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span class="keyword">padding</span><span>:</span><span class="value">60px</span><span> </span><span class="value">30px</span><span> </span><span class="value">30px</span><span> </span><span class="value">30px</span><span>;  </span>
</li>
<li>
<span class="keyword">border</span><span>:</span><span class="value">solid</span><span> </span><span class="value">1px</span><span> </span><span class="value">#dedede</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">width</span><span>:</span><span class="value">238px</span><span>;  </span>
</li>
<li>
<span class="keyword">background-color</span><span>:</span><span class="value">#fcfcfc</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">margin-top</span><span>:</span><span class="value">70px</span><span>;  </span>
</li>
<li><span>}  </span></li>
<li class="alt">
<span class="value">#img</span><span>_box  </span>
</li>
<li><span>{  </span></li>
<li class="alt">
<span class="keyword">background-color</span><span>: </span><span class="value">#FFFFFF</span><span>;  </span>
</li>
<li>
<span class="keyword">border</span><span>: </span><span class="value">1px</span><span> </span><span class="value">solid</span><span> </span><span class="value">#DEDEDE</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">margin-left</span><span>: </span><span class="value">77px</span><span>;  </span>
</li>
<li>
<span class="keyword">margin-top</span><span>: </span><span class="value">-108px</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">position</span><span>: </span><span class="value">absolute</span><span>;  </span>
</li>
<li>
<span class="keyword">width</span><span>: </span><span class="value">86px</span><span>;  </span>
</li>
<li class="alt">
<span class="keyword">height</span><span>: </span><span class="value">86px</span><span>;  </span>
</li>
<li><span>} </span></li>
</ol>
Copy after login


www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/445693.htmlTechArticleI designed a simple and interesting login box function containing a Gravatar avatar. The avatar is based on the email id from gravatar.com Exported. This article is about CSS implementation on a very basic level and a few lines...
Related labels：
css gravatar php make Include and avatar I Log in of Simple design
source：php.cn
Previous article：PHP 5.4 Performance Comparison_PHP Tutorial Next article：PHP uses Google Plus Oauth to log in (1)_PHP tutorial
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Hello! Is "PHP Toolbox" developed using PHP? (Prepare to learn PHP)
From 1970-01-01 08:00:00
0
0
0
php data acquisition?
From 1970-01-01 08:00:00
0
0
0
PHP extension intl
From 1970-01-01 08:00:00
0
0
0
How to learn php well
From 1970-01-01 08:00:00
0
0
0
When adding sublime3 to compile system php, use the PHP toolbox, cmd php -v is useless
From 1970-01-01 08:00:00
0
0
0
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template