Generar avatar con inicial de nombre usando PHP. Un avatar es una representación gráfica de la identidad de un usuario mediante el uso de iconos o imágenes en miniatura de perfil. En este artículo, te acompañaré para crear código PHP que generará una imagen de Avatar usando la inicial de nombre de usuario dinámicamente.
Las imágenes son parte integrante de las páginas Web. Ayuda a transmitir un significado, contexto fácilmente. Dependiendo del escenario, las imágenes se crean dinámicamente para representar elementos gráficos.
Generar avatar con inicial de nombre usando PHP
A continuación, veremos una serie de preguntas y características del sistema.
Ventajas de generar un avatar dinámico desde el nombre de usuario.
Un avatar con la inicial de tu nombre tiene las siguientes ventajas.
- Proporciona una buena experiencia de usuario generando avatares automáticamente en lugar de obligarlos a elegir una foto de perfil.
- Prevenir el anonimato entre los usuarios del sistema. Por lo tanto, con esta opción se impedirá generando un avatar inicial con el nombre del usuario.
- Las iniciales de nombre son los iconos más utilizados para la identidad de la persona en un sistema. Así que este concepto se adapta perfectamente a este ejemplo.
- Una de las formas más sencillas para personalizar la página de perfil del usuario.
¿Cómo funciona el sistema de Avatar a partir de inicial de nombre?
Simplificando, en el momento de registro se ejecutara el código para crear un avatar inicial a partir del nombre de usuario. Sin embargo, una imagen se genera dinámicamente usando las funciones de la biblioteca PHP GD. A continuación, se pasa la letra inicial del nombre de usuario para representar en la imagen.
El Avatar generado con inicial de nombre se guardará en una carpeta de destino y la ruta se almacenara en la base de datos, junto al registro del usuario.
Si el usuario ha iniciado sesión en el sistema con las credenciales válidas, el panel mostrará el Avatar inicial generado dinámicamente extrayendo la ruta de la base de datos y la imagen de la carpeta almacenada.
En internet existen script de código/bibliotecas disponibles en línea de forma gratuita para generar Avatar inicial. Las siguientes son dos mejores bibliotecas disponibles en internet, veamos a continuación.
La Biblioteca PHP GD
Las biblioteca de PHP GD ayudan a crear dinámicamente tipos de archivos de imagen en diferentes formatos como ser: PNG, JPG y GIF.
Estas funciones integradas de GD se utilizan para manipular imágenes mediante el redimensionamiento, recorte, compresión y más acciones. Por lo tanto, sin estas funciones básicas, estos procesos consumen mucho tiempo.
Ahora, la biblioteca GD viene junto con el código de núcleo de PHP y se habilitará de forma predeterminada. Sin embargo, es menester nuestro corroborar que este activo en nuestro servidor y en la configuración de PHP y cerciorarte de que el GD está habilitado. Podemos corroborar esta inquietud imprimiendo la función predeterminada del PHP llamado «phpinfo()«.
ESTRUCTURA Y CONTENIDO DEL SISTEMA
Componentes y ficheros de nuestro sistema de avatar.
EL nombre de la base de datos y su tabla.
Este es el script de base de datos que contiene tbl_registration instrucción CREATE de la tabla. Al importar esta tabla de base de datos, puede ejecutar este ejemplo y hacer que funcione en su entorno para probar el registro y generar el Avatar inicial.
CREATE TABLE `tbl_registration` ( `id` int(11) NOT NULL, `first_name` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL, `last_name` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL, `email_id` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL, `contact_number` varchar(12) COLLATE utf8mb4_unicode_ci NOT NULL, `password` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL, `avatar_path` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL, `update_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; INSERT INTO `tbl_registration` (`id`, `first_name`, `last_name`, `email_id`, `contact_number`, `password`, `avatar_path`, `update_date`) VALUES (1, 'Baulphp', 'PHP', 'registro@www.baulphp.com', '0953858395', '21232f297a57a5a743894a0e4a801fc3', 'images/B.png', '2019-02-20 19:55:53'); ALTER TABLE `tbl_registration` ADD PRIMARY KEY (`id`); ALTER TABLE `tbl_registration` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
Ventana modal jQueryUI
En anteriores artículos hemos visto un sistema de registro de inicio de sesión con la ventana de diálogo de jQueryUI. Por lo tanto, mostraba el formulario de inicio de sesión o registro para obtener la entrada del usuario.
Ahora, usaremos esos cuadros de dialogo para este ejemplo. Sin embargo, le hemos agregado botones de acción como ser: ACEPTAR, CANCELAR y CERRAR mediante devoluciones de llamada.
<script>
$(function () {
var login_window = $("#login-dialog").dialog({autoOpen: false,
height: 280,
width: 520,
modal: true,
closeText: '',
close: function () {
register_window.dialog("close");
}
});
$("#login-div").button().on("click", function () {
login_window.dialog("open");
});
var register_window = $("#register-dialog").dialog({
autoOpen: false,
height: 530,
width: 520,
modal: true,
closeText: '',
close: function () {
register_window.dialog("close");
}
});
$("#register-div").button().on("click", function () {
register_window.dialog("open");
});
});
</script> Aterrizaje de HTML con opciones de registro y de inicio de sesión
La página principal contendrá los botones de acción, una de registro y otra para iniciar sesión. Sin embargo, lo que diferencia es el evento clic de este botón y se asigna con la devolución de llamada de jQuery para mostrar la ventana modal.
Durante el inicio de sesión, el Avatar inicial del usuario guardado y otros detalles se recuperan y se muestran en un panel.
<div class="container"> <div class="inner-container"> <div id="button-container"> <div class="login-box"> <input type="button" class="btn-submit" value="Login" id="login-div"> </div> <div class="register-box"> <input type="button" class="btn-submit" value="Register" id="register-div"> </div> </div> <div class="thank-you-registration"> </div> <div class="form-container"> <div id="login-dialog" title="Login Dialog Form" style="display:none;"> <form id="login-form" action="" method="post" role="form" > <div class="input-row"> <span id="email-info"></span> <input type="email" name="login-email-id" id="login-email-id" class="input-field" placeholder="Email ID"> </div> <div class="input-row"> <span id="password-info"></span> <input type="password" name="login-password" id="login-password" class="input-field" placeholder="Password"> </div> <div class="submit-button"> <input type="button" class="btn-submit" value="Log In" onclick="ajaxLogin()"> </div> </form> <div class="success-message" id="login-success-message" style="display:none"></div> <div class="error-message" id="login-error-message" style="display:none"></div> <div id="ajaxloader" style="display:none"> <img src="LoaderIcon.gif" id="loaderId" /> </div> </div> <div id="register-dialog" class="register-class" title="Registration Dialog Form" style="display:none;"> <form id="register-form" action="" method="post" role="form"> <div class="input-row"> <span id="first-name-info"></span> <input type="text" name="first-name" id="first-name" class="input-field" placeholder="First Name" value=""> </div> <div class="input-row"> <span id="last-name-info"></span> <input type="text" name="last-name" id="last-name" class="input-field" placeholder="Last Name" value=""> </div> <div class="input-row"> <span id="register-email-info"></span> <input type="email" name="register-email-id" id="register-email-id" class="input-field" placeholder="Email ID" value=""> </div> <div class="input-row"> <span id="contact-no-info"></span> <input type="text" name="contact-number" id="contact-number" maxlength="10" class="input-field" placeholder="Contact Number"> </div> <div class="input-row"> <span id="register-passwd-info"></span> <input type="password" name="register-password" id="register-password" class="input-field" placeholder="Password"> </div> <div class="input-row"> <span id="confirm-passwd-info"></span> <input type="password" name="confirm-password" id="confirm-password" class="input-field" placeholder="Confirm Password"> </div> <div class="submit-button"> <input type="button" class="btn-submit" value="Register" onclick="ajaxRegistration()"> </div> </form> <div class="success-message" id="register-success-message" style="display:none"></div> <div class="error-message" id="register-error-message" style="display:none"></div> </div><!-- End register dialog form --> </div> <!-- form container --> </div> <!-- inner container --> </div> <!-- container -->
Script PHP para crear imagen (Avatar) usando funciones PHP GD
Nos centraremos en una función PHP para crear el Avatar inicial del nombre. El siguiente código muestra la función «createAvatarImage()» que se utiliza para generar el avatar y almacenarlo en un destino especificado.
A continuación, la ruta de acceso de destino será devuelta por la función createAvatarImage para guardarla en la base de datos.
function createAvatarImage($string)
{
$imageFilePath = "images/".$string . ".png";
//base avatar image that we use to center our text string on top of it.
$avatar = imagecreatetruecolor(60,60);
$bg_color = imagecolorallocate($avatar, 211, 211, 211);
imagefill($avatar,0,0,$bg_color);
$avatar_text_color = imagecolorallocate($avatar, 0, 0, 0);
// Load the gd font and write
$font = imageloadfont('gd-files/gd-font.gdf');
imagestring($avatar, $font, 10, 10, $string, $avatar_text_color);
imagepng($avatar, $imageFilePath);
imagedestroy($avatar);
return $imageFilePath;
} Registro de usuarios y generación de avatares
En el siguiente código PHP, se importa el Create-Avatar.php que contiene la función para generar el Avatar inicial a partir del nombre.
Este código contiene la consulta de inserción de MySQL utilizada para almacenar los datos de Perfil de usuario y la ruta de acceso inicial del Avatar a la base.
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
require_once ('db.php');
require_once ('create-avatar.php');
// function for form validation
function validateData($data)
{
$resultData = htmlspecialchars(stripslashes(trim($data)));
return $resultData;
}
if (isset($_POST['action']) && $_POST['action'] == 'registration') {
$first_name = validateData($_POST['firstName']);
$last_name = validateData($_POST['lastName']);
$email_id = validateData($_POST['emailId']);
$contact_number = validateData($_POST['contactNumber']);
$password = validateData($_POST['password']);
$confirm_password = validateData($_POST['confirmPassword']);
$nameFirstChar = $first_name[0];
$target_path = createAvatarImage($nameFirstChar);
$error_message = '';
$checkEmailQuery = $conn->prepare("select * from tbl_registration where email_id = ?");
$checkEmailQuery->bind_param("s", $email_id);
$checkEmailQuery->execute();
$result = $checkEmailQuery->get_result();
if ($result->num_rows > 0) {
$error_message = "Email ID already exists !";
echo $error_message;
} // Insert data into MySQL db
else {
$insertQuery = $conn->prepare("insert into tbl_registration(first_name,last_name,email_id,contact_number,password,avatar_path) values(?,?,?,?,?,?)");
$password = md5($password);
$insertQuery->bind_param("ssssss", $first_name, $last_name, $email_id, $contact_number, $password, $target_path);
if ($insertQuery->execute()) {
$success_message = "Thankyou for registering with us.You can login.";
echo $success_message;
exit();
} else {
$error_message = "Problem in Inserting New Record!";
}
$insertQuery->close();
$conn->close();
echo $error_message;
}
}
// login procees
if (isset($_POST['action']) && $_POST['action'] == 'login') {
$emailId = validateData($_POST['emailId']);
$password = validateData($_POST['password']);
$password = md5($password);
$error_message = '';
$selectQuery = $conn->prepare("select * from tbl_registration where email_id = ? and password = ?");
$selectQuery->bind_param("ss", $emailId, $password);
$selectQuery->execute();
$result = $selectQuery->get_result();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$_SESSION['userId'] = $row['id'];
$success_message = "success";
echo $success_message;
} // endwhile
} // endif
else {
$error_message = "Invalid email Id or password !";
} // endElse
$conn->close();
echo $error_message;
}
// logout
if (isset($_POST['action']) && $_POST['action'] == 'logout') {
unset($_SESSION['email_id']);
session_destroy();
echo "success";
}
?> Mostrar el panel con el Avatar inicial del usuario después de iniciar sesión
Este código muestra el código de autenticación de inicio de sesión para validar las credenciales enviadas por el usuario a través del formulario de inicio de sesión.
Una vez validado el usuario, la página se redirigirá al panel. En el panel, el nombre, el correo electrónico y también el Avatar inicial del usuario se muestran con un botón de cierre de sesión.
Estructura de archivos
La siguiente captura de pantalla muestra la estructura de archivo de este ejemplo de trabajo para generar el Avatar inicial.
Panel con salida de Avatar inicial del usuario
La siguiente captura de pantalla muestra el panel con el Avatar inicial del usuario. Podemos ver en la captura de pantalla que el Avatar inicial del usuario se genera a partir del nombre del usuario.
CONCLUSIÓN DEL SISTEMA CREACIÓN DE AVATAR
El avatar es una representación gráfica de la identidad de los usuarios. Estas imágenes de Avatar se utilizan para personificar la aplicación al usuario mientras se muestran páginas de perfil.
Ahora, el avatar del perfil se utiliza en varios aspectos, como ser:
- En el encabezado del sitio cuando el usuario esta en sesión.
- La vista del perfil o la edición.
- Lugares basados en la aplicación Web.
Podemos ver esto en muchos sitios web popularmente reconocidos como Facebook, Google y más. Además, en la aplicación de comercio electrónico.
[sociallocker id=5099] Descargar Código Fuente [/sociallocker]
