From edd20a8cd4b474b3756983171da065e2386eec4b Mon Sep 17 00:00:00 2001 From: Certified-fortnite-sweat <525080@vistacollege.nl> Date: Thu, 20 Mar 2025 11:53:57 +0100 Subject: [PATCH] jbhjbh --- school-pokedex/admin-script.js | 114 --------------------- school-pokedex/admin.html | 29 ------ school-pokedex/api.php | 155 ----------------------------- school-pokedex/create_database.sql | 33 ------ school-pokedex/images/favicon.ico | Bin 16958 -> 0 bytes school-pokedex/index.html | 15 --- school-pokedex/pokedex | 1 + school-pokedex/script.js | 33 ------ school-pokedex/server.js | 42 -------- school-pokedex/styles.css | 32 ------ school-pokedex/tutorial.md | 61 ------------ 11 files changed, 1 insertion(+), 514 deletions(-) delete mode 100644 school-pokedex/admin-script.js delete mode 100644 school-pokedex/admin.html delete mode 100644 school-pokedex/api.php delete mode 100644 school-pokedex/create_database.sql delete mode 100644 school-pokedex/images/favicon.ico delete mode 100644 school-pokedex/index.html create mode 160000 school-pokedex/pokedex delete mode 100644 school-pokedex/script.js delete mode 100644 school-pokedex/server.js delete mode 100644 school-pokedex/styles.css delete mode 100644 school-pokedex/tutorial.md diff --git a/school-pokedex/admin-script.js b/school-pokedex/admin-script.js deleted file mode 100644 index 11a9710..0000000 --- a/school-pokedex/admin-script.js +++ /dev/null @@ -1,114 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - const form = document.getElementById('pokemon-form'); - const pokemonList = document.getElementById('admin-pokemon-list'); - - const fetchPokemons = () => { - fetch('/school-pokedex/school-pokedex/api.php') - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.text().then(text => { - try { - return JSON.parse(text); - } catch (error) { - console.error('JSON parse error:', error, text); - throw error; - } - }); - }) - .then(pokemons => { - pokemonList.innerHTML = ''; - pokemons.forEach(pokemon => { - const card = document.createElement('div'); - card.className = 'pokemon-card'; - card.innerHTML = ` - ${pokemon.name} -

${pokemon.name}

-

Type: ${pokemon.type}

-

Stats: ${JSON.stringify(pokemon.stats)}

-

Info: ${pokemon.info}

- - - `; - pokemonList.appendChild(card); - }); - }) - .catch(error => console.error('Fetch error:', error)); - }; - - form.addEventListener('submit', (e) => { - e.preventDefault(); - const id = document.getElementById('pokemon-id').value; - const name = document.getElementById('name').value; - const type = document.getElementById('type').value; - const image = document.getElementById('image').value; - const stats = JSON.parse(document.getElementById('stats').value); - const info = document.getElementById('info').value; - - const method = id ? 'PUT' : 'POST'; - const url = id ? `/school-pokedex/school-pokedex/api.php/${id}` : '/school-pokedex/school-pokedex/api.php'; - - fetch(url, { - method: method, - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ name, type, image, stats, info }) - }).then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.text().then(text => { - try { - return JSON.parse(text); - } catch (error) { - console.error('JSON parse error:', error, text); - throw error; - } - }); - }).then(() => { - form.reset(); - fetchPokemons(); - }).catch(error => console.error('Fetch error:', error)); - }); - - window.editPokemon = (id) => { - fetch(`/school-pokedex/school-pokedex/api.php/${id}`) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.text().then(text => { - try { - return JSON.parse(text); - } catch (error) { - console.error('JSON parse error:', error, text); - throw error; - } - }); - }) - .then(pokemon => { - document.getElementById('pokemon-id').value = pokemon.id; - document.getElementById('name').value = pokemon.name; - document.getElementById('type').value = pokemon.type; - document.getElementById('image').value = pokemon.image; - document.getElementById('stats').value = JSON.stringify(pokemon.stats); - document.getElementById('info').value = pokemon.info; - }) - .catch(error => console.error('Fetch error:', error)); - }; - - window.deletePokemon = (id) => { - fetch(`/school-pokedex/school-pokedex/api.php/${id}`, { method: 'DELETE' }) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - fetchPokemons(); - }) - .catch(error => console.error('Fetch error:', error)); - }; - - fetchPokemons(); -}); diff --git a/school-pokedex/admin.html b/school-pokedex/admin.html deleted file mode 100644 index ccff0a5..0000000 --- a/school-pokedex/admin.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - Admin - Pokédex - - - - -

Admin - Pokédex

-
- - - - - - - - - - - - -
-
- - - diff --git a/school-pokedex/api.php b/school-pokedex/api.php deleted file mode 100644 index 4f5548a..0000000 --- a/school-pokedex/api.php +++ /dev/null @@ -1,155 +0,0 @@ -connect_error) { - error_log("Connection failed: " . $conn->connect_error); - die(json_encode(['error' => "Connection failed: " . $conn->connect_error])); -} - -header('Content-Type: application/json'); - -// Ensure the request is using JSON -if ($_SERVER['CONTENT_TYPE'] !== 'application/json') { - echo json_encode(['error' => 'Content-Type must be application/json']); - exit; -} - -$method = $_SERVER['REQUEST_METHOD']; -$request = explode('/', trim($_SERVER['PATH_INFO'], '/')); - -switch ($method) { - case 'GET': - if (isset($request[0]) && is_numeric($request[0])) { - $id = $request[0]; - $stmt = $conn->prepare("SELECT * FROM pokemons WHERE id = ?"); - $stmt->bind_param("i", $id); - $stmt->execute(); - $result = $stmt->get_result(); - if ($result->num_rows > 0) { - echo json_encode($result->fetch_assoc()); - } else { - echo json_encode(['error' => 'No record found']); - } - $stmt->close(); - } else { - $sql = "SELECT * FROM pokemons"; - $result = $conn->query($sql); - $pokemons = []; - while ($row = $result->fetch_assoc()) { - $pokemons[] = $row; - } - echo json_encode($pokemons); - } - break; - - case 'POST': - $data = json_decode(file_get_contents('php://input'), true); - if (!isset($data['name'], $data['type'], $data['image'], $data['stats'], $data['info'])) { - echo json_encode(['error' => 'Missing required fields']); - exit; - } - - $name = $data['name']; - $type = $data['type']; - $image = $data['image']; - $stats = json_encode($data['stats']); - $info = $data['info']; - - // Prepared statement to prevent SQL injection - $stmt = $conn->prepare("INSERT INTO pokemons (name, type, image, stats, info) VALUES (?, ?, ?, ?, ?)"); - $stmt->bind_param("sssss", $name, $type, $image, $stats, $info); - - if ($stmt->execute()) { - echo json_encode([ - 'id' => $conn->insert_id, - 'name' => $name, - 'type' => $type, - 'image' => $image, - 'stats' => $stats, - 'info' => $info - ]); - } else { - error_log("Insert error: " . $conn->error); - echo json_encode(['error' => 'Failed to insert record']); - } - - $stmt->close(); - break; - - case 'PUT': - if (!isset($request[0]) || !is_numeric($request[0])) { - echo json_encode(['error' => 'ID is required']); - exit; - } - - $id = $request[0]; - $data = json_decode(file_get_contents('php://input'), true); - - if (!isset($data['name'], $data['type'], $data['image'], $data['stats'], $data['info'])) { - echo json_encode(['error' => 'Missing required fields']); - exit; - } - - $name = $data['name']; - $type = $data['type']; - $image = $data['image']; - $stats = json_encode($data['stats']); - $info = $data['info']; - - // Prepared statement to prevent SQL injection - $stmt = $conn->prepare("UPDATE pokemons SET name=?, type=?, image=?, stats=?, info=? WHERE id=?"); - $stmt->bind_param("sssssi", $name, $type, $image, $stats, $info, $id); - - if ($stmt->execute()) { - echo json_encode([ - 'id' => $id, - 'name' => $name, - 'type' => $type, - 'image' => $image, - 'stats' => $stats, - 'info' => $info - ]); - } else { - error_log("Update error: " . $conn->error); - echo json_encode(['error' => 'Failed to update record']); - } - - $stmt->close(); - break; - - case 'DELETE': - if (!isset($request[0]) || !is_numeric($request[0])) { - echo json_encode(['error' => 'ID is required']); - exit; - } - - $id = $request[0]; - - // Prepared statement to prevent SQL injection - $stmt = $conn->prepare("DELETE FROM pokemons WHERE id = ?"); - $stmt->bind_param("i", $id); - - if ($stmt->execute()) { - echo json_encode(['id' => $id]); - } else { - error_log("Delete error: " . $conn->error); - echo json_encode(['error' => 'Failed to delete record']); - } - - $stmt->close(); - break; - - default: - echo json_encode(['error' => 'Invalid request method']); - break; -} - -$conn->close(); -?> diff --git a/school-pokedex/create_database.sql b/school-pokedex/create_database.sql deleted file mode 100644 index 2b1dd37..0000000 --- a/school-pokedex/create_database.sql +++ /dev/null @@ -1,33 +0,0 @@ -CREATE DATABASE IF NOT EXISTS pokedex; - -USE pokedex; - -CREATE TABLE IF NOT EXISTS pokemons ( - id INT AUTO_INCREMENT PRIMARY KEY, - name VARCHAR(255) NOT NULL, - type VARCHAR(255) NOT NULL, - image VARCHAR(255) NOT NULL, - stats JSON NOT NULL, - info TEXT NOT NULL -); - -CREATE TABLE IF NOT EXISTS abilities ( - id INT AUTO_INCREMENT PRIMARY KEY, - pokemon_id INT NOT NULL, - ability VARCHAR(255) NOT NULL, - FOREIGN KEY (pokemon_id) REFERENCES pokemons(id) ON DELETE CASCADE -); - -CREATE TABLE IF NOT EXISTS moves ( - id INT AUTO_INCREMENT PRIMARY KEY, - pokemon_id INT NOT NULL, - move VARCHAR(255) NOT NULL, - FOREIGN KEY (pokemon_id) REFERENCES pokemons(id) ON DELETE CASCADE -); - -CREATE TABLE IF NOT EXISTS evolutions ( - id INT AUTO_INCREMENT PRIMARY KEY, - pokemon_id INT NOT NULL, - evolves_to VARCHAR(255) NOT NULL, - FOREIGN KEY (pokemon_id) REFERENCES pokemons(id) ON DELETE CASCADE -); diff --git a/school-pokedex/images/favicon.ico b/school-pokedex/images/favicon.ico deleted file mode 100644 index 06a7a43d39c4ac22db1dbc9eedb6f24f18d6bd5c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16958 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 S)wDsOcpdH7mFtOA_xV3!C#mHC diff --git a/school-pokedex/index.html b/school-pokedex/index.html deleted file mode 100644 index 3d705c2..0000000 --- a/school-pokedex/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - Pokédex - - - - -

Pokédex

-
- - - diff --git a/school-pokedex/pokedex b/school-pokedex/pokedex new file mode 160000 index 0000000..2e3d0fb --- /dev/null +++ b/school-pokedex/pokedex @@ -0,0 +1 @@ +Subproject commit 2e3d0fbb96264c60df09939876f2201b8ac1a9b4 diff --git a/school-pokedex/script.js b/school-pokedex/script.js deleted file mode 100644 index 9cd1121..0000000 --- a/school-pokedex/script.js +++ /dev/null @@ -1,33 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - fetch('/school-pokedex/school-pokedex/api.php') - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.text().then(text => { - try { - return JSON.parse(text); - } catch (error) { - console.error('JSON parse error:', error, text); - throw error; - } - }); - }) - .then(pokemons => { - const pokemonList = document.getElementById('pokemon-list'); - pokemonList.innerHTML = ''; - pokemons.forEach(pokemon => { - const card = document.createElement('div'); - card.className = 'pokemon-card'; - card.innerHTML = ` - ${pokemon.name} -

${pokemon.name}

-

Type: ${pokemon.type}

-

Stats: ${JSON.stringify(pokemon.stats)}

-

Info: ${pokemon.info}

- `; - pokemonList.appendChild(card); - }); - }) - .catch(error => console.error('Fetch error:', error)); -}); diff --git a/school-pokedex/server.js b/school-pokedex/server.js deleted file mode 100644 index c3ace1e..0000000 --- a/school-pokedex/server.js +++ /dev/null @@ -1,42 +0,0 @@ -const express = require('express'); -const bodyParser = require('body-parser'); -const app = express(); -const port = 3000; - -let pokemons = [ - { id: 1, name: 'Bulbasaur', type: 'Grass/Poison', image: 'https://img.pokemondb.net/artwork/bulbasaur.jpg' }, - // ...add more initial Pokémon data here... -]; - -app.use(bodyParser.json()); -app.use(express.static('school-pokedex')); - -app.get('/api/pokemons', (req, res) => { - res.json(pokemons); -}); - -app.get('/api/pokemons/:id', (req, res) => { - const pokemon = pokemons.find(p => p.id == req.params.id); - res.json(pokemon); -}); - -app.post('/api/pokemons', (req, res) => { - const newPokemon = { id: Date.now(), ...req.body }; - pokemons.push(newPokemon); - res.status(201).json(newPokemon); -}); - -app.put('/api/pokemons/:id', (req, res) => { - const index = pokemons.findIndex(p => p.id == req.params.id); - pokemons[index] = { id: parseInt(req.params.id), ...req.body }; - res.json(pokemons[index]); -}); - -app.delete('/api/pokemons/:id', (req, res) => { - pokemons = pokemons.filter(p => p.id != req.params.id); - res.status(204).end(); -}); - -app.listen(port, () => { - console.log(`Server running at http://localhost:${port}`); -}); diff --git a/school-pokedex/styles.css b/school-pokedex/styles.css deleted file mode 100644 index 25b6f39..0000000 --- a/school-pokedex/styles.css +++ /dev/null @@ -1,32 +0,0 @@ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 20px; - background-color: #f0f0f0; -} - -h1 { - text-align: center; -} - -#pokemon-list, #admin-pokemon-list { - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -.pokemon-card { - background-color: white; - border: 1px solid #ccc; - border-radius: 8px; - margin: 10px; - padding: 10px; - width: 200px; - text-align: center; -} - -.pokemon-card img { - max-width: 100%; - height: auto; - border-radius: 8px; -} diff --git a/school-pokedex/tutorial.md b/school-pokedex/tutorial.md deleted file mode 100644 index 8b648c7..0000000 --- a/school-pokedex/tutorial.md +++ /dev/null @@ -1,61 +0,0 @@ -# Pokémon Website Setup Tutorial - -Deze tutorial begeleidt je bij het opzetten en uitvoeren van de Pokémon-website en database. - -## Stap 1: Stel de MySQL-database in - -1. **Installeer XAMPP:** - - Download en installeer XAMPP van de officiële website: https://www.apachefriends.org/index.html - - Volg de installatie-instructies. - -2. **Start MySQL:** - - Open het XAMPP Configuratiescherm. - - Start de MySQL-module door op de knop "Start" naast MySQL te klikken. - -3. **Maak de database en tabellen aan:** - - Open phpMyAdmin door op de knop "Admin" naast MySQL in het XAMPP Configuratiescherm te klikken. - - Klik in phpMyAdmin op het tabblad "SQL". - - Voer het SQL-script uit om de database en tabellen aan te maken. - -## Stap 2: Stel de PHP-backend in - -1. **Installeer PHP (indien niet al geïnstalleerd met XAMPP):** - - PHP is inbegrepen bij XAMPP, dus je hoeft het niet apart te installeren. - -2. **Maak het PHP API-bestand:** - - Maak een bestand genaamd `api.php` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`. - - Voeg de benodigde code toe om de API te maken die communiceert met de MySQL-database. - -## Stap 3: Stel de frontend in - -1. **Maak de HTML-bestanden:** - - Maak `index.html` en `admin.html` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`. - - Voeg de benodigde HTML-code toe om de hoofdpagina en de beheerderspagina te maken. - -2. **Maak het CSS-bestand:** - - Maak een bestand genaamd `styles.css` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`. - - Voeg de benodigde CSS-code toe om de pagina's op te maken. - -3. **Maak de JavaScript-bestanden:** - - Maak `script.js` en `admin-script.js` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`. - - Voeg de benodigde JavaScript-code toe om de frontend te verbinden met de backend API. - -## Stap 4: Start de PHP-server - -1. **Start de ingebouwde PHP-server:** - - Open een terminal of opdrachtprompt. - - Navigeer naar de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`. - - Voer het volgende commando uit om de ingebouwde PHP-server te starten: - ```sh - php -S localhost:8000 - ``` - -## Stap 5: Open de website - -1. **Open de hoofdpagina:** - - Open een webbrowser en ga naar `http://localhost:8000/index.html` om de hoofdpagina van de Pokédex te bekijken. - -2. **Open de beheerderspagina:** - - Open een webbrowser en ga naar `http://localhost:8000/admin.html` om de Pokémon te beheren. - -Je kunt nu Pokémon bekijken en beheren met de opgegeven frontend- en backend-setup. \ No newline at end of file