Updated the README.md and made changes, so that it can be hosted on a…

…ny domain. Notify me, if there is anything I missed that prevents this.
ImmortalProgrammer · Nov 20, 2023 · 10a6a4e · 10a6a4e
1 parent b8a40fc
commit 10a6a4e
Show file tree

Hide file tree

Showing 19 changed files with 90 additions and 56 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,11 @@
+# Database Information | This should be straightforward to setup
+VUE_APP_DB_HOST=
+VUE_APP_DB_USER=
+VUE_APP_DB_PASS=
+VUE_APP_DB_NAME=
+
+# Get an API key for the PRO edition from openweathermap.org
+VUE_APP_API_KEY=
+
+# Example: https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a
+VUE_APP_WEB_DOMAIN=
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
@@ -1,21 +1,25 @@
 # Directory
 
-### Img Directory
+### backend Directory
+* It is very important that you have the database set up correctly (as mentioned in Instructions)
+* 
+* When you have the 'dist' folder created after using vue to compile the project, it's important to have the backend folder with all the .php files in the same directory.
+
+### img Directory
 
 * Holds all the static images related to the project
 
-### Public Directory
+### public Directory
 
 * This holds index.html, which is self-evident in its function (main html root)
 
-### Src Directory
+### src Directory
 
 * The src directory holds the bulk of the code for the project
 
 * The NavBar Folder holds navbar.vue, which is the main navigation for logged in users
 
-* The components folder in the src directory holds the various folders pertaining to webpages and inside those subfolders holds the vue files (html, css, javascript) for that particular page. 
-
+* The components folder in the src directory holds the various folders pertaining to webpages and inside those subfolders holds the vue files (html, css, javascript) for that particular page.
 
 * App.vue is the root of the program, think of it as a main method, but for vue
 
@@ -28,9 +32,13 @@
 
 * router.js represents every page on the site and how to reach that site, follow the general format of what's in the file and you should be all good!
 
+### uploads Directory
+* The uploads folder is a must have for the outfits recommendations system to work appropriately, ensure it is in the root folder where you upload the dist after compiling the project
+
+
 ### Rest of the files
 
-* Don't touch babel.config.js unless necessary
+* Don't touch babel.config.js unless necessary ||| Backwards Version Compatability
 
 * globals.css is a css file that applies to the entire website
 
@@ -46,10 +54,26 @@
 
 * vue.config.js is a config file that allows the website to run property
 
+* the .env file should be updated with the appropriate info. Example for: VUE_APP_WEB_DOMAIN=https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a
+
 # Instructions
 
 * Ensure that your repository is on node version 12.22.12 and npm version 6.14.6 before building your project:
 
+* For the database, preferably use mySQL. Here's a link to a clone of the empty database with all the settings preconfigured: https://file.io/XNB4dc6vhqGP
+
+* For the backend/security.php file. In the "$allowed_origins" array data structure, make sure you add the website where you're hosting this project into the allowed origins
+
+* Ensure you have an empty uploads folder in the directory of which you put the deployed website 
+
+* Do the same as above, just for the backend directory. 
+
+* Make sure you fill in the environmental variables in .env. I left some comments as guidance
+
+* You will need an API key from openweathermap.org. You will need the PRO edition API key.
+
+
+
 ### To install npm version 6.14.6 for your repository:
 * npm i [email protected]
 
@@ -68,10 +92,15 @@ npm start
 
 Open [http://localhost:8080](http://localhost:8080).
 
+
 ## Build for deploying
 
 Note: 
-* After building, you can the upload `dist` folder to cheshire using scp.
+* After building, you can the upload `dist` folder to the appropriate location
+
+* Make sure you have the backend folder with all the php files in the directory where you put the dist folder
+
+* Also, make sure you have an empty uploads folder with the appropriate permissions to allow for the website to put images into these folders
 
 * If you're trying this on cheshire, make sure you move the files out of the dist folder one directory up, so ../ otherwise it will not work!
 

diff --git a/backend/security.php b/backend/security.php
@@ -2,9 +2,7 @@
 
     function access_control(){
         $allowed_origins = array(
-            'https://www-student.cse.buffalo.edu',
             'http://localhost:8080',
-            'http://localhost:3000'
         );
         if (isset($_SERVER["HTTP_ORIGIN"])) {
             // Decide if the origin in $_SERVER['HTTP_ORIGIN'] is the one that you want to allow

diff --git a/src/components/DesktopAccountSettings/AccountSettings.vue b/src/components/DesktopAccountSettings/AccountSettings.vue
@@ -79,7 +79,7 @@ export default {
     
     async getUserId() {
       try {
-        const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_userid.php", { withCredentials: true });
+        const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_userid.php", { withCredentials: true });
         this.user_id = response.data.userid;
         console.log("User_id: "+response.data.userid);
       } catch (error) {

diff --git a/src/components/DesktopHomepageLoggedIn/WebsiteHomePageLoggedIn.vue b/src/components/DesktopHomepageLoggedIn/WebsiteHomePageLoggedIn.vue
@@ -51,37 +51,37 @@
 
           <div class="outfit-box" v-if="recommendedOutfit.outerwear">
             <h1>Outerwear</h1>
-            <img :src="`https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/uploads/${recommendedOutfit.outerwear.image}`" alt="Outerwear" />
+            <img :src="`${process.env.VUE_APP_WEB_DOMAIN}/uploads/${recommendedOutfit.outerwear.image}`" alt="Outerwear" />
             <p>{{ recommendedOutfit.outerwear.name }}</p>
           </div>
 
           <div class="outfit-box" v-if="recommendedOutfit.middlewear">
             <h1>Middlewear</h1>
-            <img :src="`https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/uploads/${recommendedOutfit.middlewear.image}`" alt="Middlewear" />
+            <img :src="`${process.env.VUE_APP_WEB_DOMAIN}/uploads/${recommendedOutfit.middlewear.image}`" alt="Middlewear" />
             <p>{{ recommendedOutfit.middlewear.name }}</p>
           </div>
 
           <div class="outfit-box" v-if="recommendedOutfit.innerwear">
             <h1>Innerwear</h1>
-            <img :src="`https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/uploads/${recommendedOutfit.innerwear.image}`" alt="Innerwear" />
+            <img :src="`${process.env.VUE_APP_WEB_DOMAIN}/uploads/${recommendedOutfit.innerwear.image}`" alt="Innerwear" />
             <p>{{ recommendedOutfit.innerwear.name }}</p>
           </div>
 
           <div class="outfit-box" v-if="recommendedOutfit.pants">
             <h1>Pants</h1>
-            <img :src="`https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/uploads/${recommendedOutfit.pants.image}`" alt="Pants" />
+            <img :src="`${process.env.VUE_APP_WEB_DOMAIN}/uploads/${recommendedOutfit.pants.image}`" alt="Pants" />
             <p>{{ recommendedOutfit.pants.name }}</p>
           </div>
 
           <div class="outfit-box" v-if="recommendedOutfit.headwear">
             <h1>Headwear</h1>
-            <img :src="`https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/uploads/${recommendedOutfit.headwear.image}`" alt="Headwear" />
+            <img :src="`${process.env.VUE_APP_WEB_DOMAIN}/uploads/${recommendedOutfit.headwear.image}`" alt="Headwear" />
             <p>{{ recommendedOutfit.headwear.name }}</p>
           </div>
 
           <div class="outfit-box" v-if="recommendedOutfit.shoes">
             <h1>Shoes</h1>
-            <img :src="`https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/uploads/${recommendedOutfit.shoes.image}`" alt="Shoes" />
+            <img :src="`${process.env.VUE_APP_WEB_DOMAIN}/uploads/${recommendedOutfit.shoes.image}`" alt="Shoes" />
             <p>{{ recommendedOutfit.shoes.name }}</p>
           </div>
         </div>
@@ -319,7 +319,7 @@ export default {
       this.startTimer();
     },
     logoutUser(){
-      axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/logout.php?action=logout" , null, { withCredentials: true })
+      axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/logout.php?action=logout" , null, { withCredentials: true })
     .then((res) => {
     if (res.data.status === 1 && this.$router && this.$router.currentRoute.path !== '/login') {
       document.cookie = "auth_token=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/CSE442-542/2023-Spring/cse-442a;";
@@ -385,7 +385,7 @@ export default {
     },
     async getUserId() {
       try {
-        const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_userid.php", { withCredentials: true });
+        const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_userid.php", { withCredentials: true });
         this.$data.data.userid = response.data.userid;
         await this.loadLocation();
         await this.loadUnits();
@@ -398,7 +398,7 @@ export default {
     },
     async loadLocation() {
       try {
-        const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/load_location.php", {
+        const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/load_location.php", {
           params: {
             userid: this.$data.data.userid,
           },
@@ -441,7 +441,7 @@ export default {
       }
     },
     async loadUnits() {
-      axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/load_units.php",
+      axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/load_units.php",
           {
             params: {
               userid: this.$data.data.userid,
@@ -459,7 +459,7 @@ export default {
           });
     },
     async loadTempSettings() {
-      axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/load_temperatures.php", 
+      axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/load_temperatures.php",
       {
         params: {
           userid: this.$data.data.userid,
@@ -501,7 +501,7 @@ export default {
     async getAllItems(temp_category) {
       let items = {};
       try {
-        const response = await axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_my_items.php", {
+        const response = await axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_my_items.php", {
           user_id: this.$data.data.userid,
           temp_category: temp_category,
         });
@@ -589,7 +589,7 @@ export default {
       let savedOutfitAlready = false;
 
       try {
-        const response = await axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/saved_items.php", {
+        const response = await axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/saved_items.php", {
           "outerwear": this.recommendedOutfit.outerwear,
           "middlewear": this.recommendedOutfit.middlewear,
           "innerwear": this.recommendedOutfit.innerwear,
@@ -611,7 +611,7 @@ export default {
       return savedOutfitAlready
     },
     saveToMyItems(){
-      axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/saved_items.php", {
+      axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/saved_items.php", {
         "outerwear": this.recommendedOutfit.outerwear,
         "middlewear": this.recommendedOutfit.middlewear,
         "innerwear": this.recommendedOutfit.innerwear,

diff --git a/src/components/DesktopLocationSettings/WebsiteLocationSettings.vue b/src/components/DesktopLocationSettings/WebsiteLocationSettings.vue
@@ -79,7 +79,7 @@ export default {
   methods: {
     async getUserId() {
       try {
-        const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_userid.php", { withCredentials: true });
+        const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_userid.php", { withCredentials: true });
         this.data.userid = response.data.userid;
         console.log("User_id: "+response.data.userid);
         this.loadLocation();
@@ -88,7 +88,7 @@ export default {
       }
     },
     saveLocation() {
-      axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/saved_location.php", 
+      axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/saved_location.php",
       {
         userid: this.data.userid,
         city: this.data.cityName,
@@ -106,7 +106,7 @@ export default {
       });
     },
     loadLocation() {
-      axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/load_location.php",
+      axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/load_location.php",
       {
         params: {
           userid: this.data.userid,

diff --git a/src/components/DesktopMyItems/SavedItem.vue b/src/components/DesktopMyItems/SavedItem.vue
@@ -44,7 +44,7 @@ export default {
     methods: {
         deleteAnItem(){
             console.log("Delete was called")
-            axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/delete_my_items.php", {
+            axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/delete_my_items.php", {
                 userid: this.userid,
                 clothing_name: this.clothing_name,
                 image_name: this.image_name,

diff --git a/src/components/DesktopMyItems/TempItem.vue b/src/components/DesktopMyItems/TempItem.vue
@@ -8,7 +8,7 @@
             v-for="item in items"
             :key = "item.id"
             :clothing_name = "item.clothing_name"
-            :upload_path = '`https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/uploads/${item.upload_path}`'
+            :upload_path = '`${process.env.VUE_APP_WEB_DOMAIN}/uploads/${item.upload_path}`'
             :image_name = "item.upload_path"
             :userid = userid
             :temp_category = temp_category
@@ -64,15 +64,15 @@ export default {
       },
       async getUserId() {
         try {
-          const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_userid.php", { withCredentials: true });
+          const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_userid.php", { withCredentials: true });
           this.userid = response.data.userid;
           console.log("The user id is: " + this.userid)
         } catch (error) {
           console.error("Unsuccessful request in getUserId().", error);
         }
       },
       getAllItems(){
-        axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_my_items.php", 
+        axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_my_items.php",
         {
           user_id: this.userid,
           temp_category: this.temp_category,

diff --git a/src/components/DesktopTemperatureSettings/WebsiteTemperatureSettingsPage.vue b/src/components/DesktopTemperatureSettings/WebsiteTemperatureSettingsPage.vue
@@ -79,15 +79,15 @@ export default {
     },
     async getUserId() {
       try {
-        const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_userid.php", { withCredentials: true });
+        const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_userid.php", { withCredentials: true });
         this.userid = response.data.userid;
         this.loadTempSettings();
       } catch (error) {
         console.error("Unsuccessful request in getUserId().", error);
       }
     },
     loadTempSettings() {
-      axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/load_temperatures.php", 
+      axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/load_temperatures.php",
       {
         params: {
           userid: this.userid,
@@ -105,7 +105,7 @@ export default {
       });
     },
     saveTempSettings() {
-      axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/saved_temperatures.php", 
+      axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/saved_temperatures.php",
       {
         userid: this.userid,
         hot: this.tempValues.hot,

diff --git a/src/components/DesktopUnits/WebsiteUnitsPage.vue b/src/components/DesktopUnits/WebsiteUnitsPage.vue
@@ -84,15 +84,15 @@ export default {
   methods: {
     async getUserId() {
       try {
-        const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_userid.php", { withCredentials: true });
+        const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_userid.php", { withCredentials: true });
         this.userid = response.data.userid;
         this.loadUnits();
       } catch (error) {
         console.error("Unsuccessful request in getUserId().", error);
       }
     },
     saveUnits() {
-      axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/saved_units.php", 
+      axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/saved_units.php",
       {
         userid: this.userid,
         temperature: this.temperature,
@@ -110,7 +110,7 @@ export default {
       });
     },
     loadUnits() {
-      axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/load_units.php",
+      axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/load_units.php",
       {
         params: {
           userid: this.userid,

diff --git a/src/components/LoginPage/WebsiteLoginPage.vue b/src/components/LoginPage/WebsiteLoginPage.vue
@@ -108,7 +108,7 @@
         formData.append("username", this.username);
         formData.append("password", this.password);
         
-        axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/login.php?action=login", formData, { withCredentials: true })
+        axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/login.php?action=login", formData, { withCredentials: true })
         .then((res) => {
             console.log(res)
             console.log(res.data)

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -85,7 +85,7 @@
         },
         async getUserId() {
           try {
-            const response = await axios.get("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/get_userid.php", { withCredentials: true });
+            const response = await axios.get(process.env.VUE_APP_WEB_DOMAIN + "/backend/get_userid.php", { withCredentials: true });
             this.userid = response.data.userid;
             console.log("The user id is: " + this.userid)
           } catch (error) {
@@ -105,9 +105,7 @@
             fd.append("clothing_name", this.clothing_name)
             fd.append('temp_category', this.temp_category)
             fd.append('clothing_category', this.clothing_category)
-            // https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/my_items.php
-            // http://localhost/project_s23-iweatherify/backend/my_items.php
-            axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/my_items.php", fd, {header: {'Content-Type':'multipart/form-data'}}).then(
+            axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/my_items.php", fd, {header: {'Content-Type':'multipart/form-data'}}).then(
               (res) => {
                 if(res.data.status === 1){
                   // console.log("This is the response from the server")

diff --git a/src/components/RegistrationPage/RegisterPage.vue b/src/components/RegistrationPage/RegisterPage.vue
@@ -171,7 +171,7 @@
         formData.append("username", this.username);
         formData.append("password", this.password);
 
-        axios.post("https://www-student.cse.buffalo.edu/CSE442-542/2023-Spring/cse-442a/backend/register.php?action=register", formData)
+        axios.post(process.env.VUE_APP_WEB_DOMAIN + "/backend/register.php?action=register", formData)
         .then((res) => {
             if(res.data.status === "error"){
               console.log("Couldnt send post request")