Commit cef3d433 authored by s9_kristo_e's avatar s9_kristo_e
Browse files

Finished todo app

parents
Pipeline #2402 failed with stages
in 0 seconds
To-Do List - easy to use and basic todo list
Author: Eduards Klāvs Kristons
How to run:
1. Add all attached files on a server. I used XAMPP;
2. Create a new MySQL database and import the attached table (to-do-list.sql);
3. Open `db.php`, enter database details and run the application
\ No newline at end of file
<?php
if(isset($_POST['title'])) {
require '../db.php';
$title = $_POST['title'];
echo $title;
if(empty($title)) {
header("Location: ../index.php?mess=error");
}else {
$statement = $connection->prepare("INSERT INTO tabletodo(title) VALUE(?)");
$result = $statement->execute([$title]);
if($result) {
header("Location: ../index.php?mess=done");
}else {
header("Location: ../index.php");
}
$connection = null;
exit();
}
}else {
header("Location: ../index.php?mess=error");
}
\ No newline at end of file
<?php
if(isset($_POST['id'])) { //if post has a field 'id'
require '../db.php';
$id = $_POST['id']; //new variable id is post parameter id
if(empty($id)) {
echo 'error';
}else {
$tabletodo = $connection->prepare("SELECT id, checked FROM tabletodo WHERE id=?");
$tabletodo->execute([$id]); //id value is set in '?' in previous prepare statement
$todo = $tabletodo->fetch(); //todo has the result from database
$newId = $todo['id'];
$checked = $todo['checked'];
$newChecked = $checked ? 0 : 1;
$result = $connection->query("UPDATE tabletodo SET checked=$newChecked WHERE id=$newId"); //changes checked boolean value
if($result) {
echo $checked;
}else {
echo "error";
}
$connection = null;
exit();
}
}else {
header("Location: ../index.php?mess=error");
}
\ No newline at end of file
<?php
if(isset($_POST['id'])) {
require '../db.php';
$id = $_POST['id'];
echo $id;
if(empty($id)) {
echo 0;
}else {
$statement = $connection->prepare("DELETE FROM tabletodo WHERE id=?");
$result = $statement->execute([$id]);
if($result) {
header("Location: ../index.php?mess=done");
}else {
echo 0;
}
$connection = null;
exit();
}
}else {
header("Location: ../index.php?mess=error");
}
\ No newline at end of file
.container {
max-width: 400px;
}
.card-title.checked {
color: rgb(202, 199, 199);
text-decoration: line-through;
}
\ No newline at end of file
This diff is collapsed.
<?php
$sName="localhost";
$uName="root";
$pass="";
$db_name="to-do-list";
try {
$connection=new PDO("mysql:host=$sName;dbname=$db_name", $uName, $pass);
$connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
echo "Connection failed: ". $e->getMessage();
}
<?php
require 'db.php';
?>
<!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>To-Do List</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css"
</head>
<body>
<div class="container">
<div class="row mb-3 mt-5">
<div class="col">
<h3 class="mb-3"><img src="assets/img/istockphoto-1157114836-612x612.jpg" width="40px" />To-Do List</h3>
<form action="app/add.php" method="POST" autocomplete="off">
<div class="input-group mb-3">
<?php if(isset($_GET['mess']) && $_GET['mess'] == 'error'){ //if checks if meesage is set and is error then returns different placeholder message ?>
<input type="text"
name="title"
placeholder="Please enter a task!"
id="inputTask"
class="form-control" />
<?php }else{ //else shows default placeholder message ?>
<input type="text"
name="title"
placeholder="Save a task..."
id="inputTask"
class="form-control" />
<?php } ?>
<button type="submit" class="btn btn-secondary">Add Task</button>
</div>
</form>
</div>
</div>
<?php
$tabletodo = $connection->query("SELECT * FROM tabletodo ORDER BY id DESC"); // tabletodo variable gets query result from tabletodo in database in descending order
?>
<div class="row">
<div class="col">
<div class="todo-item">
<div class="empty mb-4">
<img src="assets/img/istockphoto-1157114836-612x612.jpg" width="30px" /><img src="assets/img/istockphoto-1157114836-612x612.jpg" width="30px" /><img src="assets/img/istockphoto-1157114836-612x612.jpg" width="30px" />
</div>
</div>
</div>
</div>
<?php while($todo = $tabletodo->fetch(PDO::FETCH_ASSOC)) { ?>
<?php //while there is something to fetch, fetching from tabletodo ?>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<?php if($todo['checked']) { ?>
<h3 class="card-title checked">
<input type="checkbox"
class="check-box"
todoid="<?php echo $todo['id']; ?>"
checked />
<?php }else { ?>
<h3 class="card-title">
<input type="checkbox"
todoid="<?php echo $todo['id']; ?>"
class="check-box"/>
<?php } ?>
<?php echo $todo['title']; ?></h3>
<button type="submit" class="delete-to-do btn btn-danger mb-3 mt-3 btn-sm" id="<?php echo $todo['id'];?>">Delete</button>
<br>
<small>Added: <?php echo $todo['date_time'] ?></small>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.delete-to-do').click(function() {
const id = $(this).attr('id');
$.post("app/delete.php", {
id: id
},
(data) => {
if(data) {
$(this).parent().parent().hide(600);
}
}
);
});
$(".check-box").click(function(e) {
const id = $(this).attr('todoid');
$.post('app/checkbox.php', {
id: id
},
(data) => {
if(data != 'error') {
const h5 = $(this).parent();
if(data === '1') {
h5.removeClass('checked');
}else {
h5.addClass('checked');
}
}
}
);
});
});
</script>
</body>
</html>
\ No newline at end of file
-- phpMyAdmin SQL Dump
-- version 5.1.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 08, 2021 at 12:53 PM
-- Server version: 10.4.19-MariaDB
-- PHP Version: 8.0.6
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `to-do-list`
--
-- --------------------------------------------------------
--
-- Table structure for table `tabletodo`
--
CREATE TABLE `tabletodo` (
`id` int(11) NOT NULL,
`title` text NOT NULL,
`date_time` datetime NOT NULL DEFAULT current_timestamp(),
`checked` tinyint(1) NOT NULL DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `tabletodo`
--
INSERT INTO `tabletodo` (`id`, `title`, `date_time`, `checked`) VALUES
(19, 'Apply for Printful\'s Developer School', '2021-06-08 13:46:21', 0),
(20, 'Learn php', '2021-06-08 13:47:51', 0),
(21, 'Learn Bootstrap', '2021-06-08 13:47:58', 0),
(22, 'Learn js', '2021-06-08 13:48:40', 0);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tabletodo`
--
ALTER TABLE `tabletodo`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tabletodo`
--
ALTER TABLE `tabletodo`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment