Mensaje de alerta en input usando Vue.js y PHP

por anthon Publicado en

febrero 7, 2019

1804

Las siguientes líneas de código son para visualizar un mensaje de alerta en inputs haciendo uso de Vue.js y PHP

Tabla de contenidos

Base de datos

Antes debes ejecutar el siguiente script de la base de datos:

CREATE TABLE `members` (
  `memid` INT(11) NOT NULL AUTO_INCREMENT,
  `email` VARCHAR(60) NOT NULL,
  `password` VARCHAR(50) NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

style.css

El archivo style.css es solo para personalizar el proyecto.

.topcorner{
	position:absolute;
	top:5px;
	right:5px;
}
.alert_danger {
    padding: 15px;
    background-color: #f44336;
    color: white;
}
 
.alert_success {
    padding: 15px;
    background-color: #4CAF50;
    color: white;
}
 
.closebutton {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
 
.closebutton:hover {
    color: black}

index.php

Aquí se encuentra la interfaz principal del proyecto donde visualiza la tabla y el mensaje de alerta, estoy haciendo uso del CDN de Bootstrap, si quieres puedes enlazar con tus archivos de Bootstrap.

<!DOCTYPE html>
<html>
<head>
	<title>Validación de input con Vue.js y PHP</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>

</head>
<body>
<div id="alert">
	<div class="topcorner alert_danger" v-if="isError">
		<span class="closebutton" @click="clearMessage();">×</span>
		<span class="glyphicon glyphicon-alert"></span> {{ responseMessage }}
	</div>
	<div class="topcorner alert_success" v-if="isSuccess">
		<span class="closebutton" @click="clearMessage();">×</span>
		<span class="glyphicon glyphicon-check-square-o"></span> {{ responseMessage }}
	</div>
	<div class="container">
		<h1 class="page-header text-center">Mensajes de Alerta con Vue y PHP</h1>
		<div class="col-md-12">
			<div class="form-group">
				<label>Email:</label>
				<input type="text" class="form-control" v-model="newMember.email" v-on:keyup="keymonitor">
			</div>
			<div class="form-group">
				<label>Contraseña:</label>
				<input type="text" class="form-control" v-model="newMember.password" v-on:keyup="keymonitor">
			</div>
			<button class="btn btn-success" @click="insertMember();"><span class="glyphicon glyphicon-floppy-disk"></span> Guardar</button> <button class="btn btn-danger" @click="clearForm();"><span class="glyphicon glyphicon-refresh"></span> Limpiar</button>
		</div> <br>

		<div class="col-md-12">
			<table class="table table-bordered table-striped">
				<thead>
					<th>ID</th>
					<th>Email</th>
					<th>Contraseña</th>
				</thead>
				<tbody>
					<tr v-for="member in members">
						<td>{{ member.memid }}</td>
						<td>{{ member.email }}</td>
						<td>{{ member.password }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script src="app.js"></script>
</body>
</html>

app.js

Aquí se encuentra el código vue.js que realiza todo el trabajo

var app = new Vue({
	el: '#alert',
	data:{
		newMember: {email: '', password: ''},
		alertMessage: false,
		isSuccess: false,
		isError: false,
		responseMessage: "",
		members: []
	},
 
	mounted: function(){
		this.fetchMembers();
	},
 
	methods:{
		keymonitor: function(event) {
       		if(event.key == "Enter"){
         		app.insertMember();
        	}
       	},
 
       	fetchMembers: function(){
			axios.post('action.php')
				.then(function(response){
					app.members = response.data.members;
				});
       	},
 
		insertMember: function(){
			var memberForm = app.toFormData(app.newMember);
			axios.post('action.php?action=add', memberForm)
				.then(function(response){
					console.log(response);
					if(response.data.error){
						app.alertMessage = true;
						app.isError = true;
						app.isSuccess = false;
						app.responseMessage = response.data.message;
						setTimeout(function(){
							app.clearMessage();
						},3000);
					}
					else{
						app.isSuccess = true;
						app.isError = false;
						app.alertMessage = true;
						app.responseMessage = response.data.message;
						app.newMember = {email: '', password:''};
						app.fetchMembers();
						setTimeout(function(){
							app.clearMessage();
						},3000);
					}
				});
		},
 
		toFormData: function(obj){
			var form_data = new FormData();
			for(var key in obj){
				form_data.append(key, obj[key]);
			}
			return form_data;
		},
 
		clearMessage: function(){
			app.isError = false;
			app.isSuccess = false;
		},
 
		clearForm: function(){
			app.newMember=app.newMember = {email: '', password:''};
		}
 
 
 
	}
});

action.php

Para finalizar se debe validar los mensajes de alerta.

<?php
$conn = new mysqli("localhost", "root", "", "vuealert");

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$out = array('error' => false);

$action="show";

if(isset($_GET['action'])){
	$action=$_GET['action'];
}

if($action=='show'){
	$sql = "select * from members";
	$query = $conn->query($sql);
	$members = array();

	while($row = $query->fetch_array()){
		array_push($members, $row);
	}

	$out['members'] = $members;
}

if($action=='add'){
	$email=$_POST['email'];
	$password=$_POST['password'];

	if($email==''){
		$out['error']=true;
		$out['message']='Añadir miembro. Nombre de usuario vacío.';
	}
	elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
		$out['error']=true;
		$out['message']='Añadir miembro. Formato de correo inválido';
	}
	elseif($password==''){
		$out['error']=true;
		$out['message']='Añadir miembro fallido. Contraseña vacía';
	}
	elseif(!preg_match("/^[a-zA-Z_1-9]*$/",$password)){
		$out['error']=true;
		$out['message']='Subrayado y caracteres especiales no permitidos en la contraseña';
	}
	else{
		$sql="insert into members (email, password) values ('$email', '$password')";
		$query=$conn->query($sql);

		if($query){
			$out['message']='Miembro agregado correctamente';
		}
		else{
			$out['error']=true;
			$out['message']='Error al agregar';
		}
		
	}
}




$conn->close();

header("Content-type: application/json");
echo json_encode($out);
die();

?>

Descargar