added php functionality

api/connect.php

@@ -0,0 +1,19 @@
+<?php
+     define('DB_DSN','mysql:host=localhost;dbname=serverside;charset=utf8');
+     define('DB_USER','serveruser');
+     define('DB_PASS','gorgonzola7!');     
+
+    //  PDO is PHP Data Objects
+    //  mysqli <-- BAD. 
+    //  PDO <-- GOOD.
+     try {
+         // Try creating new PDO connection to MySQL.
+         $db = new PDO(DB_DSN, DB_USER, DB_PASS);
+         //,array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)
+     } catch (PDOException $e) {
+         print "Error: " . $e->getMessage();
+         die(); // Force execution to stop on errors.
+         // When deploying to production you should handle this
+         // situation more gracefully. ¯\_(ツ)_/¯
+     }
+ ?>

api/index.php

@@ -0,0 +1,36 @@
+<?php
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Headers: *");
+
+require('connect.php');
+
+$method = $_SERVER['REQUEST_METHOD'];
+print_r($method);
+switch ($method) {
+    case "POST":
+        $listing = json_decode(file_get_contents('php://input'));
+        $query = "INSERT INTO pokemon(id, :name, :type, :rarity, :price, :stock, :image, :created_at, :updated_at) VALUES(null, :name, :type, :rarity, :price, :stock, :image, :created_at, :updated_at)";
+        $stmt = $db->prepare($query);
+
+        $created_at = date('Y-m-d');
+        $stmt->bindParam('name', $listing->name);
+        $stmt->bindParam('type', $listing->type);
+        $stmt->bindParam('rarity', $listing->rarity);
+        $stmt->bindParam('price', $listing->price);
+        $stmt->bindParam('stock', $listing->stock);
+        $stmt->bindParam('image', $listing->image);
+        $stmt->bindParam('created_at', $created_at);
+        $stmt->bindParam('updated_at', $created_at);
+
+        if ($stmt->execute()) {
+            $response = ['status' => 1, 'message' => 'listing created'];
+        } else {
+            $response = ['status' => 0, 'message' => 'failed to create listing'];
+        }
+        echo json_encode($response);
+        break;
+}
+
+?>

src/components/CreateListing.js

@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Input } from "@chakra-ui/react";
+import { FormControl, FormLabel, Input, Button } from "@chakra-ui/react";
 import axios from "axios";
 import { useState } from "react";
 
@@ -13,12 +13,14 @@ export default function CreateListing() {
 
     const handleSubmit = (e) => {
         e.preventDefault();
-        axios.post('https://localhost:31337/api/', inputs);
+        axios.post('http://localhost:31337/api/listings/save', inputs);
+        console.log(inputs);
     }
 
     return (
         <div>
-            <FormControl onSubmit={handleSubmit}>
+            <form onSubmit={handleSubmit}>
+            <FormControl>
                 <FormLabel>Name</FormLabel>
                 <Input type="text" name="name" onChange={handleChange}/>
                 <FormLabel>Type</FormLabel>
@@ -30,8 +32,10 @@ export default function CreateListing() {
                 <FormLabel>Stock</FormLabel>
                 <Input type="number" name="stock" onChange={handleChange}/>
                 <FormLabel>Image</FormLabel>
-                <Input type="image" name="image" onChange={handleChange}/>
+                <Input type="file" name="image" onChange={handleChange}/>
+                <Button type="submit">Create Listing</Button>
             </FormControl>
+            </form>
         </div>
     )
 }

src/pages/Shop.js

@@ -1,5 +1,9 @@
+import CreateListing from "../components/CreateListing";
+
 export default function Shop(){
     return(
-        <div>shop</div>
+        <div>shop
+            <CreateListing/>
+        </div>
     )
 }