'Solution'

Author: 700software

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# added by Bryan
+/.idea

README.md

@@ -1,68 +1,39 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Bryan's first React webapp with PHP endpoints
+=============================================
 
-## Available Scripts
+Installation to run in production
+---------------------------------
 
-In the project directory, you can run:
+1. Extract contents
 
-### `npm start`
+2. Install `npm` modules automatically based on `package.json`
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+       cd helloreact
+       npm install
+       
+3. Build the React client-side
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+       npm run build
+       
+4. Copy the contents of `helloreact/build` directly into the `htdocs` of your XAMPP or other PHP server-side environment.
 
-### `npm test`
+5. Create the MySQL database `helloreact` and user account, with matching password as found in the source code of the `build/endpoints` PHP endpoints.
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+       create database helloreact;
+       grant all on helloreact.* to helloreact@localhost identified by 'EoJe0jJWXsAe';
+       
+All necessary tables will be automatically created when creating your first article in the webapp.
 
-### `npm run build`
+Installation for development purposes
+-------------------------------------
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+For real-time development of the React client-side without having to re-run `npm run build` on every change you will need to segregate the PHP server-side so that you can use the out-of-the-box React server-side for development of the client-side.
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+1. Copy the `public/endpoints` directory to your XAMPP or other PHP server-side environment.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+2. Edit the PHP files on your PHP server-side copy and uncomment the `Access-Control-Allow-Origin` line in each. This will allow requests from the origin of your temporary/development React server-side to gain access to the PHP server-side endpoints.
 
-### `npm run eject`
+3. Within `src/App.js`, uncomment the second `var phpEndpoints` line and specify the alternative origin of the PHP endpoints.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+4. `npm run start` will start the React client-side and, if all goes according to plan, it links right up to the origin of your PHP server-side.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `npm run build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.1"
   },
   "scripts": {

package.json

@@ -0,0 +1,5 @@
+Options +FollowSymLinks
+RewriteEngine on
+RewriteRule ^add$ index.html [L]
+RewriteRule ^\d+$ index.html [L]
+RewriteRule ^\d+/edit$ index.html [L]

public/.htaccess

@@ -0,0 +1,44 @@
+<?php 
+
+//header('Access-Control-Allow-Origin: http://localhost:3000'); // for development purposes only
+
+header('Cache-Control: no-cache');
+
+$servername = "localhost";
+$username = "helloreact";
+$password = "EoJe0jJWXsAe";
+$dbname = "helloreact";
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+// Check connection
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+$stmt = $conn->prepare("SELECT id, title from article");
+header('Content-Type: application/json');
+if ($stmt) {
+  $stmt->execute();
+  $result = $stmt->get_result();
+  
+  // output data of each row
+  $inc = 0;
+  echo "{";
+  while($row = $result->fetch_assoc()) {
+    if ($inc++) { echo ","; }
+    echo '"' . $row['id'] . '":';
+    echo "{";
+    echo  '"id":' . $row['id'];
+    echo  ',"title":' . json_encode($row["title"]);
+    echo "}";
+  }
+  echo "}";
+} else {
+  if ($conn->errno != 1146) { die; } // expect table doesn't exists
+  echo "{}";
+}
+
+$conn->close();
+
+
+?>

public/endpoints/fetch-list.php

@@ -0,0 +1,49 @@
+<?php 
+
+//header('Access-Control-Allow-Origin: http://localhost:3000'); // for development purposes only
+
+header('Cache-Control: no-cache');
+
+$servername = "localhost";
+$username = "helloreact";
+$password = "EoJe0jJWXsAe";
+$dbname = "helloreact";
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+// Check connection
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+$stmt = $conn->prepare("SELECT id, title, content from article where id=?");
+if ($stmt) {
+  $id = substr($_SERVER['PATH_INFO'], 1);
+  $stmt->bind_param("s", $id);
+  $stmt->execute();
+  $result = $stmt->get_result();
+  
+  // output data of each row
+  $inc = 0;
+  if($row = $result->fetch_assoc()) {
+    header('Content-Type: application/json');
+    echo "{";
+    echo  '"id":' . $row['id'];
+    echo  ',"title":' . json_encode($row["title"]);
+    echo  ',"content":' . json_encode($row["content"]);
+    echo "}";
+  } else {
+    http_response_code(410);
+    header('Content-Type: text/plain');
+    echo "This article does not exist.";
+  }
+} else {
+  if ($conn->errno != 1146) { die; } // expect table doesn't exists
+  http_response_code(410);
+  header('Content-Type: text/plain');
+  echo "No articles have been created yet.";
+}
+
+$conn->close();
+
+
+?>