Scribd
Upload
3 views

Php

This document is a PHP web application that manages tasks, requiring user authentication. It includes a form for adding tasks, displaying existing tasks, and functionality for editing and deleting tasks via AJAX calls to a backend API. The page is structured with Bootstrap for styling and includes JavaScript for dynamic interactions and form validation.

Uploaded by

Sohaib Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

Php

This document is a PHP web application that manages tasks, requiring user authentication. It includes a form for adding tasks, displaying existing tasks, and functionality for editing and deleting tasks via AJAX calls to a backend API. The page is structured with Bootstrap for styling and includes JavaScript for dynamic interactions and form validation.

Uploaded by

Sohaib Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<?

php
session_start();
if (!isset($_SESSION['user'])) {
header('location: ./');
}
?>
<!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, shrink-to-
fit=no">

<link rel="preconnect" href="https://fonts.gstatic.com">


<link rel="shortcut icon" href="./assets/img/icons/icon-48x48.png" />

<link rel="canonical" href="https://demo-basic.adminkit.io/pages-blank.html" />

<title>Tasks</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<link href="./assets/css/app.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
</head>

<body>
<div class="wrapper">
<?php require_once './partials/sidebar.php' ?>

<div class="main">
<?php require_once './partials/topbar.php' ?>

<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Tasks</h1>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="text-center">Add Task</h3>
<div id="alert"></div>
<form id="add-form">
<div class="row">
<div class="col-md">
<input type="text" class="form-
control" name="task-input" id="task-input" placeholder="Please enter the task!">
</div>
<div class="col-md-auto">
<input type="submit" value="Add"
class="btn btn-primary">
</div>
</div>
</form>
</div>

<div class="card-body">
<h5>Tasks</h5>
<div id="tasks">
<!-- <div class="row mb-2">
<div class="col-md">
<input type="text" class="form-
control" id="task-" value="Database Value" placeholder="Please enter the task!"
readonly>
</div>
<div class="col-md-auto">
<button class="btn btn-info"
id="edit-" onclick="editTask(${task.id})">Edit</button>
</div>
<div class="col-md-auto">
<button class="btn btn-danger"
id="delete-" onclick="editTask(1)">Delete</button>
</div>
</div> -->
<!-- <div class="alert alert-info m-0">No
record found!</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</main>

<?php require_once './partials/footer.php' ?>


</div>
</div>

<script src="./assets/js/app.js"></script>
<script>
showTasks();

const addFormElement = document.querySelector("#add-form");


const alertElement = document.querySelector("#alert");

addFormElement.addEventListener("submit", function(e) {
e.preventDefault();

const taskInputElement = document.querySelector("#task-input");

let taskInputValue = taskInputElement.value;

if (taskInputValue == "") {
taskInputElement.classList.add("is-invalid");
alertElement.innerHTML = alert("danger", "Enter the task!");
} else {
taskInputElement.classList.remove("is-invalid");
alertElement.innerHTML = "";

const data = {
body: taskInputValue,
submit: 1,
};

fetch("./api/add-task.php", {
method: "POST",
body: JSON.stringify(data),
headers: {
'Content-Type': 'application.json'
}
})
.then(function(response) {
return response.json();
})
.then(function(result) {
if (result.bodyError) {
taskInputElement.classList.add("is-invalid");
alertElement.innerHTML = alert("danger",
result.bodyError);
} else if (result.success) {
alertElement.innerHTML = alert("success",
result.success);
taskInputElement.value = "";
showTasks();
} else if (result.failure) {
alertElement.innerHTML = alert("danger",
result.failure);
} else {
alertElement.innerHTML = alert("danger", "Something
went wrong!");
}
})
}
});

function showTasks() {
const tasksElement = document.querySelector("#tasks");

fetch("./api/show-tasks.php")
.then(function(response) {
return response.json();
})
.then(function(result) {
let tasksListElement = "";
if (result.length !== 0) {
result.forEach(function(task) {
tasksListElement += `<div class="row mb-2">
<div class="col-md">
<input type="text" class="form-
control" id="task-${task.id}" value="${task.body}" placeholder="Please enter the
task!" readonly>
</div>
<div class="col-md-auto">
<button class="btn btn-info"
id="edit-${task.id}" onclick="editTask(${task.id})">Edit</button>
</div>
<div class="col-md-auto">
<button class="btn btn-danger"
id="delete-${task.id}" onclick="deleteTask(${task.id})">Delete</button>
</div>
</div>`;
});

tasksElement.innerHTML = tasksListElement;
} else {
tasksElement.innerHTML = <div class="alert alert-info m-
0">No record found!</div>;
}
})
}

function editTask(taskId) {
const taskInputElement = document.getElementById(task-${taskId});
const editButtonElement = document.getElementById(edit-${taskId});

taskInputElement.removeAttribute("readonly");
editButtonElement.innerText = "Save";

taskInputElement.setSelectionRange(taskInputElement.value.length,taskInputElement.v
alue.length);
taskInputElement.focus();
editButtonElement.onclick = function() {
saveTask(taskId);

};
}

function saveTask(taskId) {
const taskInputElement = document.getElementById(task-${taskId});
const editButtonElement = document.getElementById(edit-${taskId});

const editedTask = taskInputElement.value;


editButtonElement.innerText = "Edit";
editButtonElement.onclick = function() {
editTask(taskId);
};

const data = {
taskId: taskId,
editedTask: editedTask,
save: 1,
};

fetch("./api/edit-task.php", {
method: "POST",
body: JSON.stringify(data),
headers: {
'Content-Type': 'application.json'
}
})
.then(function(response) {
return response.json();
})
.then(function(result) {
if (result.success) {
alertElement.innerHTML = alert("success", result.success);
} else if (result.failure) {
alertElement.innerHTML = alert("danger", result.failure);
} else {
alertElement.innerHTML = alert("danger", "Something went wrong!");
}
});
}

function alert(cls, msg) {


return <div class="alert alert-${cls} alert-dismissible fade show"
role="alert">${msg}<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button></div>;
}
</script>

</body>

</html>

You might also like