Share
SMS es una tecnología mundial utilizada por casi todos con un teléfono celular. A pesar de tener un alcance mucho mayor que el mercado de teléfonos inteligentes, la programación de SMS recibe mucho menos tiempo de cobertura y, a menudo, permanece sin capitalizar. En este tutorial de varias partes, le mostraré cómo crear un formulario de registro de sitio web que permita a los usuarios ingresar un número de teléfono móvil. Luego, le mostraré cómo usar PHP para verificar el número de teléfono del lado del servidor para verificar que el número de teléfono móvil que el usuario ha ingresado sea realmente su teléfono móvil. En el camino, usaremos jQuery para realizar la validación del lado del cliente y CodeIgniter como nuestro marco de desarrollo..
Vamos a empezar con una visión general de la solución. El usuario accederá a un formulario de registro, seleccionará un país e ingresará un número de teléfono móvil. Después de enviar el formulario de registro, el usuario deberá ingresar un código de verificación enviado al número de teléfono móvil ingresado para activar la nueva cuenta. Si el usuario cierra la página antes de ingresar el código de verificación y luego vuelve a acceder al formulario de registro, aún se mostrará el formulario del código del teléfono. Ok vamos a empezar!
Descargue CodeIgniter de www.codeigniter.com. A continuación, extraiga la carpeta y cópiela en la raíz web de su servidor web (debe tener acceso a un servidor web que pueda analizar PHP para completar este tutorial). Copiar a su webroot es opcional, pero hacerlo nos ayudará a navegar mejor a través de los archivos de origen.
En el directorio de aplicaciones, navegue al directorio de configuración y abra config.php. Esta es la configuración principal, donde necesitamos establecer algunas de las configuraciones, como en el siguiente código:
$ config ['base_url'] = "http: // localhost / sending_sms /";… $ config ['index_page'] = "index.php";… $ config ['uri_protocol'] = "AUTO";
A continuación, abra database.php en la misma carpeta de configuración y complete las siguientes tareas:
db ['default'] ['hostname'] = "localhost"; $ db ['default'] ['username'] = "root"; $ db ['default'] ['password'] = "__password__"; $ db ['default'] ['database'] = "sms_users";
Finalmente, abra autoload.php en la carpeta de configuración y agreguemos algunas bibliotecas y ayudantes que necesitaremos:
Accentsconagua
$ autoload ['bibliotecas'] = array ('base de datos'); ... $ autoload ['helper'] = array ('url', 'form', 'cookie'); Vamos a crear el controlador de registro. Crear un archivo llamado signup.php en la carpeta de aplicaciones / controladores y comencemos a codificar la funcionalidad de registro principal:
la clase Suscripción extiende el Controlador función Suscripción () padre :: Controlador (); índice de función () $ this-> load-> view ('signup'); He creado la clase de suscripción, notará que tiene el mismo nombre que el archivo y que extiende el controlador. Creé el índice() Función que se encargará de la visualización del formulario de registro. Lo llamamos índice porque esta es la función predeterminada que se llama cuando se accede con la URL predeterminada, sin ningún segmento. También tendremos que configurar el controlador predeterminado (registro) en config / route.php:
$ route ['default_controller'] = "signup";
Si prueba la aplicación ahora, recibirá un error que le indicará 'No se puede cargar el archivo solicitado: signup.php'. Esto es porque no hemos creado la vista de registro. Hagamos esto ahora.
Crea un nuevo archivo signup.php en el aplicaciones / vistas carpeta y escriba el siguiente marcado:
Regístrate '); ?> 'forma')); ?> 'name', 'id' => 'name', 'class' => 'required', 'value' => set_value ('name'))); ?> 'email', 'id' => 'email', 'class' => 'email requerido', 'value' => set_value ('email'))); ?>Formulario de registro
',''prefijo', 'id' => 'prefijo', 'valor' => set_value ('prefijo'))); ?> 'móvil', 'id' => 'móvil', 'clase' => 'dígitos requeridos', 'valor' => set_value ('móvil'))); ?>
Déjame explicarte algo del marcado. He añadido en la cabecera un archivo reset.css con las reglas CSS habituales de meyerweb reset y un archivo design.css, que codificaremos más adelante. He puesto estos dos en una carpeta en la raíz llamada 'css'. yo suelo base_url () para obtener la raíz en el archivo de vista.
Utilicé el ayudante de formulario para crear la apertura del formulario, y al dar el ID del formulario 'form', creé un par de etiquetas y entradas utilizando el mismo ayudante de formulario. Notarás que paso una matriz como segundo parámetro de la form_input () Funciona con id o teclas de clase. Para obtener más información sobre el uso del asistente de formularios, lea la documentación de CodeIgniter. solía form_dropdown () para crear un cuadro de selección, que se pasa una serie de opciones nombradas $ países. Aún no tenemos esta matriz, pero también la haremos un poco más tarde..
Cree el archivo design.css en el directorio css y coloque en el aplicaciones / vistas carpeta e ingrese las siguientes reglas css:
cuerpo fondo-color: #CFCFCF; relleno: 0px; margen: 0px; tamaño de fuente: 12px; Familia tipográfica: Helvética, Verdana, Arial, sans-serif; #wrap ancho: 400px; margen izquierdo: auto; margen derecho: auto; margen superior: 40px; color de fondo: #ECECEC; borde: sólido 1px #FCFCFC; relleno: 10px; h2 margen inferior: 10px; tamaño de fuente: 18px; etiqueta pantalla: bloque; entrada, seleccione ancho: 380px; relleno: 5px; margen inferior: 10px; seleccione ancho: 390px; #prefix width: 50px; margen derecho: 10px; margen inferior: 0px; pantalla: en línea; #mobile ancho: 305px; pantalla: en línea; input.submit background-color: # E0E0E0; borde: sólido 1px # C5C5C5; ancho: 140px; font-weight: negrita; margen superior: 10px; input.error, select.error margin-bottom: 0px; borde: sólido 1px #FFCCCC; div.error relleno: 5px; color de fondo: #ffeeee; borde: sólido 1px #FFCCCC; color: # ff0000; div.ok relleno: 5px; color de fondo: #CCFFCC; borde: sólido 1px # 44CC44; color: # 336633; margen inferior: 10px;
Creé el estilo wrap div, centrándolo estableciendo el margen izquierdo y margen derecho a auto. Luego diseñé las entradas, asegurándome de que fueran consistentes en todos los navegadores y luego creé 3 clases de error: .error, .ok y input.error. Usaremos esto con el complemento de validación de jQuery. También utilicé el relleno de 5px donde me pareció necesario para el peinado..
Si realiza la prueba ahora, recibirá un aviso que dice "países con variables no definidas" y "argumento no válido suministrado para foreach ()". ¿Cómo sumamos los países? Bueno, podríamos incrustarlos directamente en la selección, pero usaremos un archivo de configuración en su lugar. Esto asegura que podamos cambiar cualquier código de país de forma fácil y rápida. Copié la tabla con los códigos de país de countrycode.org en un nuevo archivo y usé un poco de jQuery para procesar todos los contenidos en una sola cadena, y me dio el archivo de configuración final. No voy a entrar en los detalles. Si quieres saberlo, deja un comentario. Crea un nuevo archivo llamado 'countries.php' en el aplicación / config y agregue los países en la matriz #config usando el siguiente modelo:
$ config = array (); $ config ["] ="; $ config ['93 '] =' Afganistán '; $ config ['355'] = 'Albania'; $ config ['213'] = 'Argelia';… $ config ['967'] = 'Yemen'; $ config ['260'] = 'Zambia'; $ config ['263'] = 'Zimbabwe';
Utilicé los códigos de prefijo como claves en la matriz. ¿Cómo accedemos a esto en la vista? Cargaremos este archivo de configuración particular en la función del controlador. índice() creamos anteriormente:
índice de función () $ this-> config-> load ('countries', true); $ datos ['países'] = $ this-> config-> item ('países'); $ this-> load-> view ('registro', $ data); Usé '$ this-> config-> load ()' para cargar la configuración. Notarás que también pasé true como segundo parámetro. Esto hace una entrada separada llamada 'países' en la configuración global. Si no pasamos true, la configuración de configuración (la matriz de la configuración) se agrega a la matriz de configuración global. Después de eso, simplemente asignamos el elemento de configuración a $ data ['países'], que la vista reconoce como $ países. También paso la matriz $ data a la vista como segundo parámetro. Si prueba la página ahora, ¡obtendrá todos los países en el cuadro de selección! Gran derecho?
Es hora de hacer algo de jQuery. Usaremos el complemento de validación jquery para esto. Este complemento ya está en el CDN de Microsoft, por lo que lo obtendremos desde allí, así como jQuery desde el CDN de Google. También necesitamos el complemento de metadatos para escribir las clases directamente en el html:
El complemento de validación funciona al proporcionar un nombre de clase a la entrada: necesario para requerir valores no vacíos, correo electrónico para la validación de una dirección de correo electrónico, dígitos para entradas numéricas, y más que no voy a entrar. Notarás que codifiqué las clases en las entradas, solo mira el html al principio. Si realiza la prueba ahora, verá que aparece un error div después de la entrada con una clase de .error el cual codifiqué en el css. También codifiqué el error de entrada clase, ya que la entrada que no es válida se asigna un .error clase, también. Esto valida el formulario, si el usuario tiene habilitado JavaScript.
Ahora usaremos un evento inteligente para cambiar el valor de la entrada de prefijo cuando el usuario seleccione un país. Esto se hace solo con fines visuales, ya que en el backend obtendremos el prefijo del valor del país, pero esto le mostrará al usuario cómo ingresar su teléfono. Hagamos esto ahora:
Ok, entonces creé una función para el evento de cambio de la selección, y asigné el valor de la opción seleccionada al valor de entrada del prefijo. No es un gran problema, pero hace que nuestro formulario de registro sea realmente fácil.
Esto es todo lo que necesitamos para la vista de registro. Vamos a crear la función de activación y ver.
Esta es la página que el usuario verá después de registrarse con éxito. Habrá un mensaje diciéndole que revise su teléfono móvil, ya que le hemos enviado un código que debe ingresar. En el controlador signup.php, cree una nueva función llamada activar():
función activar () $ datos = matriz (); $ data ['error'] = "; $ this-> load-> view ('activar', $ data); En caso de que la activación sea incorrecta, he definido una variable de error para usar en la vista. Se accederá a esta página después de que ingresemos con éxito los detalles del usuario y enviemos el SMS. También crearemos un nuevo archivo llamado activar.php en el aplicación / vistas carpeta y escriba el siguiente marcado:
Activar Confirmar telefono movil
Tu cuenta ha sido creada. Se ha enviado un sms a tu móvil con un código de activación de 5 dígitos. Por favor ingrese el código para completar el registro:'forma')); ?> 'código', 'id' => 'código', 'clase' => 'dígitos requeridos', 'valor' => set_value ('código'))); ?>
Si no ha recibido el sms, haga clic aquí para enviarlo nuevamente.
El marcado es bastante simple aquí. He incluido el mismo plugin de jQuery y validación. Dentro del evento document.ready, llamé jquery.validate () Como en la primera página. Usaremos validar para validar el código de autorización. También me desvanezco en el mensaje div, para mostrar un mensaje de éxito. También puse un nombre de clase de 'requerido' y 'dígitos' para restringir el campo de entrada a números y valores no vacíos. También hay un mensaje con una opción para que el usuario vuelva a enviar el código de activación, pero no voy a entrar en esta funcionalidad, ya que es bastante similar al registro básico..
Vamos a crear la función que procesará e insertará los datos en la base de datos. También utilizaremos la biblioteca de validación. Es importante tener una validación en el servidor, ya que algunas personas pueden desactivar JavaScript y, por lo tanto, la validación no funcionará. Este es un respaldo que nos asegura que no tendremos ningún dato no válido en la tabla. El proceso de la función es a continuación:
proceso de función () $ this-> load-> library ('form_validation'); if ($ this-> form_validation-> run ()) $ signup = array (); $ registro ['nombre'] = $ esto-> entrada-> publicación ('nombre'); $ registro ['email'] = $ this-> input-> post ('email'); $ registro ['país'] = $ esto-> entrada-> publicación ('país'); $ signup ['mobile'] = $ this-> input-> post ('country'). $ this-> input-> post ('mobile'); // generar el código de activación único mt_rand (); $ registro ['activación'] = rand (11111, 99999); // inserte en db $ this-> db-> insert ('users', $ signup); // enviar auth sms set_cookie ('signed', $ this-> db-> insert_id (), 86500); // redirigir redirigir ('registrarse / activar'); else $ this-> config-> load ('países', verdadero); $ datos ['países'] = $ this-> config-> item ('países'); $ this-> load-> view ('registro', $ data); Bueno, eso es mucho código! Vayamos a través de todas las partes principales:
Primero cargamos la biblioteca de validación de formularios. Después de eso utilizamos la validación de formularios. correr() Función para comprobar los valores correctos. Si todas las entradas pasan, creamos una matriz con todos los datos de publicación usando $ this-> input-> post ('input_name') e inserte los datos en una tabla llamada usuarios, que haremos en un momento. Una cosa a tener en cuenta aquí es que también genero el código de autenticación. yo suelo mt_rand () para sembrar el generador aleatorio y generar un único número de 5 cifras. Hacemos esto corriendo rand () para generar un número entre 11111 y 99999. Esto siempre nos da un número de 5 cyphers de longitud. No utilicé 10000 porque podemos obtener un número que repite sus cifras, como 10002, que no parece demasiado aleatorio. También configuré una cookie llamada "firmada" con el valor del identificador de inserción de la inserción real en la base de datos y luego redirigí al usuario a la función de activación. Si algunos campos no son válidos, cargamos los países nuevamente y cargamos la vista de registro. Si miras la vista de registro desde el principio, verás que uso valor ajustado() para obtener el valor utilizado desde el último registro. Entonces, si hay un campo no válido, el resto de los campos se rellenarán con los últimos datos. Pero hay una línea que necesitamos actualizar en la vista de registro:
He reemplazado el tercer parámetro con $ _POST ['país'], asegurándose de que no muestre un aviso con @. Esto establecerá la opción de selección a la que se seleccionó antes del envío. Si no tenemos un país en los datos de la publicación, no seleccionaremos nada, como es el caso al comienzo del registro..
Bien, apuesto a que preguntarás: ¿cómo sabe el servidor cuál es el formato correcto para la validación del lado del servidor? Bueno, tenemos que crear las reglas para la validación. Afortunadamente, CodeIgniter te permite escribirlos en un archivo de configuración llamado form_validation.php en el aplicación / config carpeta. Cree el archivo si aún no existe e ingrese lo siguiente:
$ config = array (array ('field' => 'name', 'label' => 'Name', 'rules' => 'required'), array ('field' => 'email', 'label' = > 'Email', 'rules' => 'required | valid_email | callback_check_email_exists'), array ('field' => 'country', 'label' => 'Country', 'rules' => 'required'), array ('campo' => 'móvil', 'etiqueta' => 'Teléfono móvil', 'reglas' => 'requerido | numérico')); Utilizo esta matriz multidimensional para establecer las reglas correspondientes para la validación. Por ejemplo, para el campo de nombre, uso la clave 'campo' para establecer las reglas para el campo de nombre, la tecla 'etiqueta' para configurar el nombre del campo en el mensaje de error (si aparece) y las 'reglas' Clave para establecer las reglas. Separé las reglas con un carácter de tubería (es decir, '|'). Para obtener más información sobre las reglas disponibles, consulte la documentación de validación de formularios en la guía del usuario. También creo una devolución de llamada definida por el usuario (callback_check_email_exists) para verificar si el correo electrónico existe. Añadiendo llamar de vuelta_ El nombre de la regla busca una función en el controlador y la llama. Esta función comprobará la existencia de la misma dirección de correo electrónico en la base de datos, y la fuente es:
función check_email_exists ($ email) $ rs = $ this-> db-> where ('email', $ email) -> count_all_results ('usuarios'); $ this-> form_validation-> set_message ('check_email_exists', "Lo sentimos, este correo electrónico ya existe!"); si ($ rs < 1 ) return true; return false; Esta es una función simple que acepta un argumento (el valor que se está verificando) y devuelve verdadero o falso según el formato. Verificamos si hay un resultado con la dirección de correo electrónico en la tabla, y si lo hay, devolvemos false. Tenemos que devolver verdadero si queremos validar y falso para inválido, por lo que el nombre de la función es un poco extraño.
¡Ni siquiera pienses en probar la activación ahora! ¡Obtendrás un error desagradable porque no hemos creado la tabla! Bueno, solo puede descargar el código fuente e importar la tabla de usuarios desde el usuarios.sql Archivo o crearlo con los siguientes comandos:
CREAR TABLA 'usuarios' ('uid' INT SIN SEÑAL NO NULL AUTO_INCREMENT, 'nombre' TEXTO NO NULO, 'correo electrónico' TEXTO NO NULO, 'país NO INT. NULL,' móvil 'TEXTO NO NULO,' activación 'TEXTO NO NULO, 'active' INT NOT NULL, PRIMARY KEY ('uid')); Ejecute este código en phpMyAdmin y tendrá la tabla creada.
Si prueba el código ahora, obtendrá toda la validación correcta. Simplemente puede deshabilitar JavaScript para probar la validación del servidor. ¡No entrarás con datos inválidos! te lo adverti!
Este es el final de la primera parte. La próxima vez, en la segunda parte de esta serie, cubriremos el envío de SMS utilizando un servicio de puerta de enlace SMS de terceros. Espero que hayas disfrutado de mi tutorial y gracias por quedarte para verlo todo!
