En la entrada anterior, os expliqué la planificación que he tenido que hacer para mi aplicación, en esta entrada os mostraré cómo cree el login y el registro que utiliza Kinder.
Lo primero de todo es crear la base de datos basándonos en el esquema mencionado en la entrada anterior:
Y cuando la generemos, la debemos subir a la web o a un servidor, si no tenéis, podéis descargaros Wamp o cualquier otro programa similar para hacer las pruebas necesarias.
Una vez generada la BD, y subida a nuestro servidor, deberemos programar distintos archivos PHP para poder acceder a la base de datos desde nuestra aplicación.
El más importante es el archivo de conexion.php, con el cual le estaremos dando acceso a nuestra base de datos:
<?php
$hostname = '';
$database = '';
$username = '';
$password = '';
$conexion = new mysqli($hostname,$username,$password,$database);
if($conexion->connect_error){
echo "Error";
}
?>(Obviamente por temas de seguridad he omitido los datos)
Registro php
Puede parecer difícil, pero si se piensa bien un registro no es más que el añadido de un nuevo usuario a la base de datos, un INSERT para ser más exactos.
Además, para hacerlo todo más seguro, deberemos encriptar los datos sensibles, cómo la contraseña:
<?php
include 'connexio.php';
$nom=$_POST['nom'];
$ape=$_POST['ape'];
$mail=$_POST['mail'];
$password=$_POST['Contraseña'];
$password= hash('sha512',$password);
$edat=$_POST['edat'];
$genero=$_POST['genero'];
$telefono=$_POST['telefono'];
$sentencia = $conexion->prepare("INSERT INTO usuarios (Nombre,Apellidos,Correo,Contraseña,Edat,Genero,Teléfono) VALUES (?,?,?,?,?,?,?)");
$sentencia->bind_param('sssssss',$nom,$ape,$mail,$password,$edat,$genero,$telefono);
if ($sentencia->execute()) {
echo "creado";
}else{
echo "error";
}
?>Login php
Y para simplificar de nuevo las cosas, un login simplemente es un SELECT dónde miramos si existe un usuario con una contraseña concreta:
<?php
include 'connexio.php';
$correuUsuari=$_POST['Correo'];
$contrasenyaUsuari=$_POST['Contraseña'];
$contrasenyaUsuari= hash('sha512',$contrasenyaUsuari);
$sentencia = $conexion->prepare("SELECT IDUsuario,Nombre,Apellidos,Correo,Edat,Genero FROM usuarios WHERE Correo=? AND Contraseña=?");
$sentencia->bind_param('ss',$correuUsuari,$contrasenyaUsuari);
$sentencia->execute();
$resultado = $sentencia->get_result();
while ($columna = mysqli_fetch_array($resultado)){
echo $columna[0].'#'.$columna[1].'#'.$columna[2].'#'.$columna[3].'#'.$columna[4].'#'.$columna[5].'#';
}
$sentencia->close();
$conexion-> close();
?>
En mi caso, si el SELECT tiene respuesta (es decir, si el usuario y la contraseña son correctos), hago que me la devuelva separada por ‘#’ para poder usarla después.
Estos archivos PHP, los ejecutaremos más tarde desde Android Studio.
Activity del login
Ya en el Android Studio, vamos a definir el Activity de login, yo he utilizado dos LinearLayout para poder ordenar los campos:
Cuyo XML es el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/design_default_color_background">
<LinearLayout
android:layout_width="361dp"
android:layout_height="469dp"
android:layout_above="@id/input_group"
android:layout_alignParentTop="true"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_marginBottom="-1dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView6"
android:layout_width="match_parent"
android:layout_height="469dp"
app:srcCompat="@mipmap/kinder_foreground" />
</LinearLayout>
<LinearLayout
android:id="@+id/input_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_marginBottom="50dp"
android:gravity="center"
android:orientation="vertical">
<EditText
android:id="@+id/et_correo_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="Correo Electrónico"
android:inputType="textPersonName"
android:padding="15dp" />
<EditText
android:id="@+id/et_contra"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="Contraseña"
android:inputType="textPassword"
android:padding="15dp" />
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="@color/purple_200"
android:textSize="17sp" />
<Button
android:id="@+id/btnRegistro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="CambioPantalla"
android:text="Registro" />
</LinearLayout>
<ProgressBar
android:id="@+id/progress_bar_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminate="true"
android:visibility="gone" />
</RelativeLayout>Login Java
En el java, declaramos los botones y EditText necesarios, y ponemos el botón de login en escucha para que cuando sea pulsado, ejecute la función «validarUsuario», cómo parámetro para la función, deberemos añadir una URL que lleve al archivo php de login.
Dicha función, cojera el valor que hayamos escrito en los EditText del usuario y la contraseña, los enviará al archivo «login.php» que hemos definido anteriormente, y cuando tenga respuesta, añadirá los datos de dicha respuesta a una clase estática para así tener los datos del usuario siempre a mano. Una vez añadidos los datos, se abrirá la pantalla para añadir o modificar los filtros.
La función validar usuario es la siguiente:
public void validarUsuario(String URL){
StringRequest stringRequest = new StringRequest(Request.Method.POST, URL, new Response.Listener<String>() {
@Override
public void onResponse(String response) {
if(!response.isEmpty()){ //si l'usuari existeix
String usuarioSplit [] = response.split("#");
Usuario.setIDUsuario(usuarioSplit[0]);
Usuario.setNombre(usuarioSplit[1]);
Usuario.setApellidos(usuarioSplit[2]);
Usuario.setCorreo(usuarioSplit[3]);
Usuario.setCumple(usuarioSplit[4]);
Usuario.setGenero(usuarioSplit[5]);
Intent i = new Intent(getApplicationContext(),Filtros.class);
startActivity(i);
finish();
}else{
Toast.makeText(Login.this,"Usuario o contraseña incorrectos",Toast.LENGTH_SHORT).show();
}
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError volleyError) {
String message = null;
if (volleyError instanceof NetworkError) {
message = "No se puede conectar a Internet... ¡Compruebe su conexión!";
} else if (volleyError instanceof ServerError) {
message = "No se pudo encontrar el servidor. Por favor, inténtalo de nuevo después de un tiempo.";
volleyError.printStackTrace(System.out);
} else if (volleyError instanceof AuthFailureError) {
message = "No se puede conectar a Internet... ¡Compruebe su conexión!";
} else if (volleyError instanceof ParseError) {
message = "¡Error de sintáxis! Por favor, inténtalo de nuevo después de un tiempo.";
} else if (volleyError instanceof NoConnectionError) {
message = "No se puede conectar a Internet... ¡Compruebe su conexión!";
} else if (volleyError instanceof TimeoutError) {
message = "¡El tiempo de conexión expiro! Por favor revise su conexion a internet.";
}
Toast.makeText(Login.this,message,Toast.LENGTH_SHORT).show();
}
}) {
@Override
protected Map<String, String> getParams() throws AuthFailureError {
Map<String,String> parametros = new HashMap<String,String>();
parametros.put("Correo", Correo.getText().toString());
parametros.put("Contraseña",contra.getText().toString());
return parametros;
}
};
equestQueue requestQueue = Volley.newRequestQueue(getApplicationContext());
requestQueue.add(stringRequest);
}Además, añadimos una función para que cuando pulse el botón registro, se cambia la pantalla.
Activity Java
Java Registro
En el java del registro, utilizaremos el mismo tipo de función que en el login: llamamos la función con una URL hacia el archivo de registro.php, le añadimos los parámetros necesarios y esperamos una respuesta.
Antes de ejecutar la función, deberemos comprobar si las dos contraseñas escritas son iguales:
if(Contraseña.getText().toString().equals(Contraseña2.getText().toString())){
valCon = true;
}else{
valCon = false;
}
if(valCon == true){
validarUsuario("https://www.debianlu.com/Kinder/registro.php");
}else{
Toast.makeText(Registro.this,"Las Contraseñas no coinciden",Toast.LENGTH_SHORT).show();
}Y también, para facilitar la entrada de la fecha de cumpleaños, añadiremos un calendario con estás líneas:
@RequiresApi(api = Build.VERSION_CODES.N)
@Override
public void onClick(View view) {
int dia,mes,ano;
if(view == Cumpleaños){
final Calendar c = Calendar.getInstance();
dia = c.get(Calendar.DAY_OF_MONTH);
mes = c.get(Calendar.MONTH);
ano = c.get(Calendar.YEAR);
DatePickerDialog datePickerDialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker datePicker, int any, int mes, int dia) {
if(mes < 12){
mes = mes + 1;
}else if (mes == 12){
mes = 12;
}
Cumpleaños.setText(any+"-"+(mes+1)+"-"+dia);
}
},dia,mes,ano);
datePickerDialog.show();
}
}
