Skip to content

Commit

Permalink
primera versión funcional Sistema de Eliminación Masiva en PHP y MySQL
Browse files Browse the repository at this point in the history
  • Loading branch information
@configuroweb
configuroweb committed Nov 15, 2022
0 parents commit 31c93a2
Show file tree
Hide file tree
Showing 6 changed files with 277 additions and 0 deletions.
103 changes: 103 additions & 0 deletions app.js
@@ -0,0 +1,103 @@
var confirmModal = $('#confrimModal')
var checked_ids = []
var total_checks = $('input[name="post_id[]"]').length;
var total_checks_checked = checked_ids.length
var post_to_delete_list = $('#post_to_delete_list')
$(document).ready(function(){
/**
* Store Checked Post ID
*/

$('input[name="post_id[]"]').change(function(){
var id = $(this).val()
if($(this).is(':checked') === true){
if(($.inArray(id, checked_ids)) < 0)
checked_ids.push(id)
}else{
checked_ids = checked_ids.filter(e => e != id)
}
total_checks_checked = checked_ids.length
if(total_checks_checked == total_checks){
$('#selectAll').prop('checked',true)
}else{
$('#selectAll').prop('checked',false)
}
if(total_checks_checked > 0){
$("#delete_btn").removeClass('d-none')
}else{
$("#delete_btn").addClass('d-none')
}
})

/**
* Select All Function
*/

$('#selectAll').change(function(e){
e.preventDefault()
var _this = $(this)
if(_this.is(':checked') === true){
$('input[name="post_id[]"]').prop('checked', true).trigger('change')
}else{
$('input[name="post_id[]"]').prop('checked', false).trigger('change')
}
})

/**
* Delete Confirmation Function
*/
$('#delete_btn').click(function(){
var to_delete = '';
checked_ids.map(id => {
var parent = $(`input[name="post_id[]"][value="${id}"]`).closest('tr')
console.log(`input[name="post_id[]"][value="${id}"]`)
var post_title = parent.find('td:nth-child(2)').text()
to_delete += `<li>${post_title}</li>`;
})
post_to_delete_list.html(to_delete)
confirmModal.modal('show')
})

/**
* Reset Selected List in Confirm Modal
*/

confirmModal.on('hide.bs.modal', function(e){
post_to_delete_list.html('')
})

/**
* Delete Confirmed Action
*/

$('#confirm-deletion').click(function(e){
e.preventDefault()
var _this = $(this)
_this.attr('disabled', true)
$.ajax({
url:'delete_posts.php',
method:'POST',
data:{ids: checked_ids},
dataType:'json',
error:(err)=>{
console.error(err)
alert("An error occurred while deleting the post(s) data.")
},
success:function(resp){
if(!!resp.status){
if(resp.status == 'success'){
alert("Selected Post(s) Data has been deleted successfully.")
location.reload()
}else if(!!resp.error){
alert(resp.error)
}else{
alert("An error occurred while deleting the post(s) data.")
}
}else{
alert("An error occurred while deleting the post(s) data.")
}
}
})
})

})
4 changes: 4 additions & 0 deletions custom.css
@@ -0,0 +1,4 @@
html, body{
min-height:100%;
width:100%;
}
10 changes: 10 additions & 0 deletions db-connect.php
@@ -0,0 +1,10 @@
<?php
$host = "localhost";
$username = "root";
$pw = "";
$db_name = "eliminacion-masiva";

$conn = new mysqli($host, $username, $pw, $db_name);
if(!$conn){
die('Database connection failed');
}
25 changes: 25 additions & 0 deletions delete_posts.php
@@ -0,0 +1,25 @@
<?php
require_once('db-connect.php');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$ids = isset($_POST['ids']) ? $_POST['ids'] : [];
if(count($ids) > 0){
$sql = "DELETE FROM `posts` where `id` IN (".(implode(",", $ids)).")";
$delete = $conn->query($sql);
if($delete){
$resp['status'] = 'success';
}else{
$resp['status'] = 'failed';
$resp['error'] = $conn->error;
}
}else{
$resp['status'] = 'failed';
$resp['error'] = 'No Post ID(s) Data sent to delete.';
}
}else{
$resp['status'] = 'failed';
$resp['error'] = 'No Post Data sent to this current request.';
}

echo json_encode($resp);

$conn->close();
11 changes: 11 additions & 0 deletions get_posts.php
@@ -0,0 +1,11 @@
<?php
require_once('db-connect.php');

function get_posts(){
global $conn;

$sql = "SELECT * FROM `posts` order by abs(unix_timestamp(`created_at`)) desc";
$query = $conn->query($sql);
return $query->fetch_all(MYSQLI_ASSOC);
}

124 changes: 124 additions & 0 deletions index.php
@@ -0,0 +1,124 @@
<?php
require_once('get_posts.php');
$posts = get_posts();
?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Eliminación Masiva de Datos en PHP y MySQL</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="custom.css">

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>

</style>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-danger bg-gradient">
<div class="container">
<a class="navbar-brand" href="./">Eliminación Masiva</a>
<div>
<a href="https://www.configuroweb.com/46-aplicaciones-gratuitas-en-php-python-y-javascript/#Aplicaciones-gratuitas-en-PHP,-Python-y-Javascript" class="text-light fw-bolder h6 text-decoration-none" target="_blank">Para más desarrollos ConfiguroWeb</a>
</div>
</div>
</nav>
<div class="container px-5 my-3">
<h2 class="text-center">Sistema de Eliminación Masiva de Datos en PHP y MySQL</h2>
<div class="row">
<!-- Page Content Container -->
<div class="col-lg-12 col-md-12 col-sm-12 mt-4 pt-4 mx-auto">
<div class="container-fluid">
<div class="card rounded-0 shadow">
<div class="card-header">
<div class="d-flex justify-content-between">
<div class="card-title col-auto flex-shrink-1 flex-grow-1">Selecciona los checks en específico que deseas eliminar</div>
<div class="col-atuo">
<button class="btn btn-danger btn-sm btn-flat d-none" id="delete_btn">Eliminar los Post Selecciionados</button>
</div>
</div>
</div>
<div class="card-body">
<div class="container-fluid">
<table class="table table-stripped table-bordered">
<colgroup>
<col width="5%">
<col width="20%">
<col width="20%">
<col width="55%">
</colgroup>
<thead>
<tr>
<th class="text-center">
<input class="form-check-input" type="checkbox" id="selectAll">

</th>
<th class="text-center">Título</th>
<th class="text-center">Autor</th>
<th class="text-center">Contenido</th>
</tr>
</thead>
<tbody>
<?php foreach ($posts as $post) : ?>
<tr>
<td class="text-center">
<input class="form-check-input" type="checkbox" name="post_id[]" value="<?= $post['id'] ?>">
</td>
<td><?= $post['title'] ?></td>
<td><?= $post['author'] ?></td>
<td>
<div class="" style=""><?= $post['content'] ?></div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- End of Page Content Container -->
</div>
</div>
<!-- Confirmation Modal -->
<div class="modal fade" id="confrimModal" data-bs-backdrop="static" aria-labelledby="confrimModal" aria-hidden="true" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0">
<div class="modal-content rounded-0">
<div class="modal-header rounded-0">
<h1 class="modal-title fs-5">Confirmation</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body rounded-0">
<div class="container-fluid">
<p>Are you sure to delete to following post(s)? This action cannot be undone.</p>
<ul id="post_to_delete_list"></ul>
</div>
</div>
<div class="modal-footer">
<button type="button" id="confirm-deletion" class="btn btn-danger btn-sm rounded-0">Confirm Deletion</button>
<button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Confirmation Modal -->

<script src="app.js"></script>

</body>

</html>

0 comments on commit 31c93a2

Please sign in to comment.