From 59ff9298a95165872c2856b73fab2c71df681fe1 Mon Sep 17 00:00:00 2001 From: Carlos LAGOS Date: Wed, 5 Mar 2025 07:32:03 -0500 Subject: [PATCH 1/3] Addition of JS Logic This commit adds the four different files related to each one of the endpoints of the API to query each of them and give a response to the user once they fill the form --- API.REST.PHP/js/create-client/script.js | 29 +++++++++++++++ API.REST.PHP/js/delete-client/script.js | 25 +++++++++++++ API.REST.PHP/js/get-all-client/script.js | 45 ++++++++++++++++++++++++ API.REST.PHP/js/update-client/script.js | 34 ++++++++++++++++++ 4 files changed, 133 insertions(+) create mode 100644 API.REST.PHP/js/create-client/script.js create mode 100644 API.REST.PHP/js/delete-client/script.js create mode 100644 API.REST.PHP/js/get-all-client/script.js create mode 100644 API.REST.PHP/js/update-client/script.js diff --git a/API.REST.PHP/js/create-client/script.js b/API.REST.PHP/js/create-client/script.js new file mode 100644 index 0000000..f0c31b6 --- /dev/null +++ b/API.REST.PHP/js/create-client/script.js @@ -0,0 +1,29 @@ +document.getElementById('clientForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const formData = new FormData(event.target); + + const params = new URLSearchParams(formData); + + fetch('../api-rest/create_client.php?' + params.toString(), { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: params.toString() + }) + .then(response => { + if (response.status === 201) { + alert('Cliente creado correctamente'); + event.target.reset(); + } else if (response.status === 404) { + alert('Error: Cliente no se ha creado correctamente'); + } else { + alert('Error desconocido'); + } + }) + .catch(error => { + console.error('Error:', error); + alert('Error de red. Por favor, inténtalo de nuevo más tarde.'); + }); +}); diff --git a/API.REST.PHP/js/delete-client/script.js b/API.REST.PHP/js/delete-client/script.js new file mode 100644 index 0000000..34e0d02 --- /dev/null +++ b/API.REST.PHP/js/delete-client/script.js @@ -0,0 +1,25 @@ +function deleteClient() { + const clientId = document.getElementById('clientId').value; + const message = document.getElementById('message'); + + fetch(`../api-rest/delete_client.php?id=${clientId}`, { + method: 'DELETE', + }) + .then(response => { + if (response.status === 201) { + message.textContent = 'Cliente borrado correctamente'; + message.style.color = 'green'; + } else if (response.status === 404) { + message.textContent = 'Error: Cliente no se ha podido borrar correctamente'; + message.style.color = 'red'; + } else { + message.textContent = 'Error desconocido'; + message.style.color = 'red'; + } + }) + .catch(error => { + console.error('Error:', error); + message.textContent = 'Error de red. Por favor, inténtalo de nuevo más tarde.'; + message.style.color = 'red'; + }); +} \ No newline at end of file diff --git a/API.REST.PHP/js/get-all-client/script.js b/API.REST.PHP/js/get-all-client/script.js new file mode 100644 index 0000000..ec40534 --- /dev/null +++ b/API.REST.PHP/js/get-all-client/script.js @@ -0,0 +1,45 @@ +function fetchClients() { + const message = document.getElementById('message'); + const tbody = document.querySelector('#clientTable tbody'); + tbody.innerHTML = ''; + + fetch('../api-rest/get_all_client.php') + .then(response => { + console.log(response); + if (response.status === 200) { + return response.json(); + } else if (response.status === 404) { + message.textContent = 'Error: No se ha podido consultar los clientes'; + message.style.color = 'red'; + return Promise.reject('Client fetch failed'); + } else { + message.textContent = 'Error desconocido'; + message.style.color = 'red'; + return Promise.reject('Unknown error'); + } + }) + .then(data => { + if (data.error) { + message.textContent = `Error: ${data.error}`; + message.style.color = 'red'; + } else { + data.forEach(client => { + const row = document.createElement('tr'); + row.innerHTML = ` + ${client.id} + ${client.email} + ${client.name} + ${client.city} + ${client.telephone} + `; + tbody.appendChild(row); + }); + message.textContent = ''; + } + }) + .catch(error => { + console.error('Error:', error); + message.textContent = 'Error de red. Por favor, inténtalo de nuevo más tarde.'; + message.style.color = 'red'; + }); +} diff --git a/API.REST.PHP/js/update-client/script.js b/API.REST.PHP/js/update-client/script.js new file mode 100644 index 0000000..5a5af81 --- /dev/null +++ b/API.REST.PHP/js/update-client/script.js @@ -0,0 +1,34 @@ +document.getElementById('updateClientForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const formData = new FormData(event.target); + + const params = new URLSearchParams(formData); + + // Make an AJAX request to the PHP API + fetch(`../api-rest/update_client.php?${params.toString()}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: params.toString() + }) + .then(response => { + if (response.status === 201) { + document.getElementById('message').textContent = 'Cliente actualizado correctamente'; + document.getElementById('message').style.color = 'green'; + event.target.reset(); + } else if (response.status === 404) { + document.getElementById('message').textContent = 'Error: Cliente no se ha podido actualizar correctamente'; + document.getElementById('message').style.color = 'red'; + } else { + document.getElementById('message').textContent = 'Error desconocido'; + document.getElementById('message').style.color = 'red'; + } + }) + .catch(error => { + console.error('Error:', error); + document.getElementById('message').textContent = 'Error de red. Por favor, inténtalo de nuevo más tarde.'; + document.getElementById('message').style.color = 'red'; + }); +}); From 93544a849d09bee14a2f68dc60c0fdde6432fda6 Mon Sep 17 00:00:00 2001 From: Carlos LAGOS Date: Wed, 5 Mar 2025 07:34:33 -0500 Subject: [PATCH 2/3] API Method changes This commit modifies some methods of the API to ensure the correct functioning and error handling scenarios --- API.REST.PHP/api-rest/create_client.php | 4 ++-- API.REST.PHP/api-rest/get_all_client.php | 12 +++++++----- API.REST.PHP/includes/Client.class.php | 9 ++++++--- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/API.REST.PHP/api-rest/create_client.php b/API.REST.PHP/api-rest/create_client.php index 8d0dbe4..25c1469 100644 --- a/API.REST.PHP/api-rest/create_client.php +++ b/API.REST.PHP/api-rest/create_client.php @@ -2,8 +2,8 @@ require_once('../includes/Client.class.php'); if($_SERVER['REQUEST_METHOD'] == 'POST' - && isset($_GET['email']) && isset($_GET['name']) && isset($_GET['city']) && isset($_GET['telephone'])){ - Client::create_client($_GET['email'], $_GET['name'], $_GET['city'], $_GET['telephone']); + && isset($_POST['email']) && isset($_POST['name']) && isset($_POST['city']) && isset($_POST['telephone'])){ + Client::create_client($_POST['email'], $_POST['name'], $_POST['city'], $_POST['telephone']); } ?> \ No newline at end of file diff --git a/API.REST.PHP/api-rest/get_all_client.php b/API.REST.PHP/api-rest/get_all_client.php index b4eb3db..6bcb686 100644 --- a/API.REST.PHP/api-rest/get_all_client.php +++ b/API.REST.PHP/api-rest/get_all_client.php @@ -1,8 +1,10 @@ \ No newline at end of file diff --git a/API.REST.PHP/includes/Client.class.php b/API.REST.PHP/includes/Client.class.php index 17301dd..c6d59c2 100644 --- a/API.REST.PHP/includes/Client.class.php +++ b/API.REST.PHP/includes/Client.class.php @@ -38,13 +38,16 @@ public static function get_all_clients(){ $conn = $database->getConnection(); $stmt = $conn->prepare('SELECT * FROM listado_clientes'); if($stmt->execute()){ - $result = $stmt->fetchAll(); + $result = $stmt->fetchAll(PDO::FETCH_ASSOC); + header('Content-Type: application/json'); echo json_encode($result); - header('HTTP/1.1 201 OK'); + header('HTTP/1.1 200 OK'); } else { header('HTTP/1.1 404 No se ha podido consultar los clientes'); + echo json_encode(['error' => 'No se ha podido consultar los clientes']); } - } + exit(); + } public static function update_client($id, $email, $name, $city, $telephone){ $database = new Database(); From 9813175bbd765dc041dfcc1719b80c7d0316d256 Mon Sep 17 00:00:00 2001 From: Carlos LAGOS Date: Wed, 5 Mar 2025 07:36:15 -0500 Subject: [PATCH 3/3] Introduction of HTML and CSS files This commit introduces the HTML and CSS files related to each one of the endpoints of the API, to correctly display a frontend to the user. --- API.REST.PHP/css/styles.css | 70 ++++++++++++++++++++++++++++++++++ API.REST.PHP/html/clients.html | 30 +++++++++++++++ API.REST.PHP/html/create.html | 30 +++++++++++++++ API.REST.PHP/html/delete.html | 18 +++++++++ API.REST.PHP/html/update.html | 34 +++++++++++++++++ 5 files changed, 182 insertions(+) create mode 100644 API.REST.PHP/css/styles.css create mode 100644 API.REST.PHP/html/clients.html create mode 100644 API.REST.PHP/html/create.html create mode 100644 API.REST.PHP/html/delete.html create mode 100644 API.REST.PHP/html/update.html diff --git a/API.REST.PHP/css/styles.css b/API.REST.PHP/css/styles.css new file mode 100644 index 0000000..e881c55 --- /dev/null +++ b/API.REST.PHP/css/styles.css @@ -0,0 +1,70 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h2 { + margin-bottom: 20px; +} + +form { + display: flex; + flex-direction: column; +} + +label { + margin-bottom: 5px; +} + +input { + margin-bottom: 15px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + padding: 10px; + background-color: #007BFF; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; +} + +th { + background-color: #f2f2f2; +} + +#message { + margin-top: 20px; + font-size: 1.2em; +} \ No newline at end of file diff --git a/API.REST.PHP/html/clients.html b/API.REST.PHP/html/clients.html new file mode 100644 index 0000000..5e11b2b --- /dev/null +++ b/API.REST.PHP/html/clients.html @@ -0,0 +1,30 @@ + + + + + + Client List + + + +
+

Client List

+ + + + + + + + + + + + + +
IDEmailNameCityTelephone
+

+
+ + + \ No newline at end of file diff --git a/API.REST.PHP/html/create.html b/API.REST.PHP/html/create.html new file mode 100644 index 0000000..7f1372d --- /dev/null +++ b/API.REST.PHP/html/create.html @@ -0,0 +1,30 @@ + + + + + + Create Client + + + +
+

Create New Client

+
+ + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/API.REST.PHP/html/delete.html b/API.REST.PHP/html/delete.html new file mode 100644 index 0000000..23702f5 --- /dev/null +++ b/API.REST.PHP/html/delete.html @@ -0,0 +1,18 @@ + + + + + + Delete Client + + + +
+

Delete Client

+ + +

+
+ + + \ No newline at end of file diff --git a/API.REST.PHP/html/update.html b/API.REST.PHP/html/update.html new file mode 100644 index 0000000..fd7637c --- /dev/null +++ b/API.REST.PHP/html/update.html @@ -0,0 +1,34 @@ + + + + + + Update Client + + + +
+

Update Client

+
+ + + + + + + + + + + + + + + + +
+

+
+ + +