Custom Login form with PHP and Ajax check username and display profile picture

Question

i'm trying to do something "different" with my login page, but i think i'm doing somthing wrong or not understanding the process.

Right now, my users table are like:

user_id, username, password, profile_picture, first_name, last_name

What i want is, when you click in the input text (on focus) you start typing your username, once you click out, the ajax will check this user and return at the top the profile picture for that account.

Here it's an example for this but using gravatars: Example Here

Can someone help me to understand how this request can be done with ajax and php?

Thanks!

What are you currently doing? Please provide your code.

chris85
– chris85

2015-06-29 00:45:53 +00:00
Commented Jun 29, 2015 at 0:45 — chris85
– chris85, Commented Jun 29, 2015 at 0:45

Twisty · Accepted Answer · 2015-06-29 01:00:55Z

1

JQUERY:

$(function(){
    $("#myInput").blur(function(){
        // On exit, Get Image data
        $.get("getUserImage.php", { user: $(this).val() }, function(data){
            if(data != "error"){
                $("#userImage").attr("src", data);
            }
        });
    });
});

PHP (getUserImage.php):

<?php
$user = isset($_GET['user'])?$_GET['user']:"";

if(empty($user)){
    die("error");
}

// connect to MySQL DB w/ MySQLi
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");

if ($stmt = $mysqli->prepare("SELECT userImage FROM table WHERE user=?")) {
    // bind parameters
    $stmt->bind_param("s", $user);
    // execute query 
    $stmt->execute();
    // bind result variables
    $stmt->bind_result($image);
    // fetch value
    $stmt->fetch();
    if(!empty($image)){
        printf("http://www.example.com/%s", $image);
    } else {
        echo "error";
    }
    // close statement
    $stmt->close();
}
// close connection
$mysqli->close();
?>

answered Jun 29, 2015 at 1:00

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

William Xavier Over a year ago

Awesome, i just did it, i was about to paste my code here but you really got what i need here. thank you so much mate. You Rock!

Collectives™ on Stack Overflow

Custom Login form with PHP and Ajax check username and display profile picture

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related