https://github.com/alejandrosuero/todo-app-php
A To Do web app made with PHP (with Smarty) and MySQL. Apache as server provider.
https://github.com/alejandrosuero/todo-app-php
apache2 css mysql php8 smarty-template-engine todo-app todo-app-php todoapp
Last synced: 2 months ago
JSON representation
A To Do web app made with PHP (with Smarty) and MySQL. Apache as server provider.
- Host: GitHub
- URL: https://github.com/alejandrosuero/todo-app-php
- Owner: AlejandroSuero
- License: gpl-3.0
- Created: 2022-07-29T20:44:15.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T12:07:31.000Z (over 2 years ago)
- Last Synced: 2025-03-28T16:55:10.016Z (2 months ago)
- Topics: apache2, css, mysql, php8, smarty-template-engine, todo-app, todo-app-php, todoapp
- Language: PHP
- Homepage:
- Size: 505 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ToDo Application
A web application made with **[PHP](https://www.php.net/)** and **[Smarty](https://www.smarty.net/)** as template engine, **[MySQL](https://www.mysql.com/)** for the database and **[Apache](https://www.apache.org/)** as the server.
Index:
1. [Backend](#backend)
- [Structure](#structure)
- [Handler](#handler)
- [Routing](#routing)
2. [Frontend](#frontend)
- [Templates](#templates)
- [Styles](#styles)
The application classes for the MVC pattern are:
```tree
├─📂 classes
- 🐘 ToDoModel.class.php
- 🐘 ToDoView.class.php
- 🐘 ToDoController.class.php
```
There are also some classes for the error handling and the configuration:
See more at [**classes**](public/classes/).
## Backend
I used **[MySQL](https://www.mysql.com/)**.
### Structure
| **Field** | **Type** | **Null** | **Key** | **Default** | **Extra** |
|------------------|--------------|-------------|-----------|---------------|----------------|
| task_id | int(11) | NO | PRIMARY | NULL | auto_increment |
| task_title | varchar(30) | NO | | NULL | |
| task_description | varchar(200) | YES | | NULL | |
| task_done | tinyint(4) | NO | | 0 | |
### Handler
The handler is a class that handles the database connection and the queries.
Using the **[PDO](https://www.php.net/manual/en/class.pdo.php)** class, the handler is able to execute queries and fetch the results.
```php
public static function get_connection(): PDO {
$dbh = new Dbh();
$dsn = "mysql:host=" . $dbh->DB_HOST . ";dbname=" . $dbh->DB_NAME;
$options = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
);
try {
$db = new PDO($dsn, $dbh->DB_USER, $dbh->DB_PASS, $options);
} catch (\PDOException $e) {
$error = new ToDoError($e->getMessage(), (int) $e->getCode(), $e);
$error->show_error();
throw new \ToDoError($e->getMessage(), (int) $e->getCode());
}
return $db;
}
```
See more in the **[Dbh class](public/classes/Dbh.class.php)** file.
### Routing
I used **[.htaccess](public/.htaccess)** to redirect the requests to the **[route.php](public/route.php)** file.
```apache
# Rewrite rules for the application
# Turns on the RewriteEngine
RewriteEngine On
# If the request is for a file, ignores it
# If the request is for a directory, ignores it
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -l
RewriteRule ^[css|img|js|json].*$ - [L]
# Ignores hidden files
# Reroutes all requests to route.php with an action
RewriteRule ^(.*)$ route.php?action=$1 [QSA,L]
```
In the **[route.php](public/route.php)** file, I used an url parser to redirect the requests to the correct controller and method.
```php
function url_parse(string $url): array {
$url_data = explode('/', $url);
$data_array[ConfigApp::$ACTION] = $url_data[0];
$data_array[ConfigApp::$PARAMS] = isset($url_data[1]) ? array_slice($url_data, 1) : null;
return $data_array;
}
```
See more in the **[route.php](public/route.php)** file.
## Frontend
I went for a desing using **[Bootstrap 5](https://getbootstrap.com/)** as a framework and a little touch of my own colorscheme [styles.css](public/css/styles.css).
I also used **[Smarty](https://www.smarty.net/)** as template engine.
### Templates
```tree
├───📂 templates
- 📝 delete_modal.tpl
- 📝 edit_task.tpl
- 📝 error.tpl
- 📝 footer.tpl
- 📝 header.tpl
- 📝 task.tpl
- 📝 task_list.tpl
```
### Styles
Colorscheme for a dark theme purple style.
```css
html {
--bg-red: #c64646 !important;
--bg-red-darker: #b43737 !important;
--bg-purple: #a551c9 !important;
--bg-purple-darker: #9046b0 !important;
--bs-body-font-family: 'Roboto', sans-serif !important;
}
.dark {
background-color: #130c16;
color: #fff;
}
```
See more in the **[styles.css](public/css/styles.css)** file.