├── .gitignore
├── README.md
├── assets
    ├── css
    │   ├── contact.css
    │   ├── dashboardStyle.css
    │   ├── employeeStyle.css
    │   ├── loginStyle.css
    │   ├── main.css
    │   └── normalize.css
    ├── html
    │   ├── footer.html
    │   └── header.html
    ├── img
    │   ├── asse.webp
    │   ├── b.png
    │   ├── c.png
    │   ├── v_50.png
    │   └── worker.gif
    └── js
    │   ├── contactScript.js
    │   ├── faceApi.js
    │   └── index.js
├── contact.php
├── index.php
├── package-lock.json
├── package.json
├── resources
    ├── employees.json
    ├── images_mock.json
    └── users.json
└── src
    ├── dashboard.php
    ├── employee.php
    ├── imageGallery.php
    └── library
        ├── avatarsApi.php
        ├── employeeController.php
        ├── employeeManager.php
        ├── loginController.php
        ├── loginManager.php
        ├── logout.php
        ├── registerEmployee.php
        └── sessionHelper.php


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # PHP BASIC APPLICATION TO MANAGE AN EMPLOYEES LIST
  2 | 
  3 | ## Application main points
  4 | 
  5 | 1. Login and logout with a json file as user storage
  6 | 2. Controlled user session set to 10 minutes
  7 | 3. Show data from a JSON in a JS Grid
  8 | 4. Pagination of the data configured by the grid
  9 | 5. Employees CRUD Create Read Delete and Update with a json file as employees storage
 10 | 6. Employee page with employee detail
 11 | 7. External web service to get employees images
 12 | 8. Employee avatar through web service images
 13 | 
 14 | ### File structure
 15 | 
 16 | This file structure has a specific purpose. So you have to implement all the required over it. Later when we get to OPP and MySQL we will refactor the project to get it more sophisticated, modern and cleaner. Please take care of it!!
 17 | 
 18 | ```
 19 | assets/
 20 | resources/
 21 | src/
 22 |  /library
 23 | ```
 24 | 
 25 | - Assets contains html, css, js & images
 26 | - Css just css files.
 27 | - Resources folder contains users.json and employees.json
 28 | - Src folder contains PHP files which contain HTML or JS
 29 | - Src/library folder contains PHP files that contain just PHP
 30 | 
 31 | **We left to you the project files in their folders to give you a structure which we want you to work with in order to later refactor it.**
 32 | 
 33 | We use some naming conventions when create code files. For instance a file which handles HTTP request we name it as `Controller`.
 34 | 
 35 | In the other hand we have also the concept of `Manager` which typically implements an abstraction layer over a storage system, in this case as we are going to work with json files for a while (bear on mind later we refactor it to MySQL and then we will also have a `Model` file) we would need to create on it all functions we need to access the json file.
 36 | 
 37 | A file called `Model` implements a database layer is a file which interacts directly with a Database. **On future projects we will refactor this project to add Models and much more!!**
 38 | 
 39 | We also added the concept of `Helper` which is a class which its finality is to help `Controllers` and `Managers` to be lighter and to keep single responsibility.
 40 | 
 41 | ```
 42 | index.php // which is the entry point of the application. The login view
 43 | employeeController.php // file which has JUST the php code to handle employees request
 44 | employeeManager.php // In this file we left you a list of named mehtods to implement and use.
 45 | 
 46 | loginController.php // here you need to handle all HTTP request of login things
 47 | loginManager.php // same thing here you need to write things as login validation logout etc..
 48 | 
 49 | sessionHelper.php // here you can add the code to check if the user session has expired.
 50 | ```
 51 | 
 52 | The sessionHelper file need to be added to each page we visit in order to check if the user session has expired and if so to call the methods of the loginManager to logout the admin user.
 53 | 
 54 | ### Including or importing code files to current file
 55 | 
 56 | As you have seen in JS there are sentences to import code from other files to the current file we are working. In PHP happens the same thing. And as we want to encapsulate code by concepts( the login page request are managed by a loginController and so on) it is required to import files.
 57 | 
 58 | So for instance a dashboard.php page can look like this at the beginning of the file:
 59 | 
 60 | ```
 61 |  <?php
 62 | include "./library/sessionHelper.php";  // we added the code of the helper to check session
 63 | 
 64 | include "../assets/html/header.html"; // the header file that we also include it on every page
 65 | ?>
 66 | <div id="alert" class="alert alert-danger w-25 mx-auto text-center" data-dismiss="alert" aria-label="Close" role="alert"></div>
 67 | <div id="employeesGrid" class="ml-5"></div>
 68 | <script>
 69 | ..............
 70 | ```
 71 | 
 72 | So when the server returns the processed file, PHP has changed all `include` sentences by the code that is on that files.
 73 | Let's make it clearer. Let's say that we have a sessionHelper which has this code.
 74 | 
 75 | ```
 76 | session_start();
 77 | if(isset($_SESSION['userId'])) {
 78 |     if(time() - $_SESSION['time'] > $_SESSION['lifeTime']) {
 79 |         logout();
 80 | 		....
 81 |   }
 82 | } else {
 83 | 	.....
 84 | }
 85 | ```
 86 | 
 87 | And we want to include it on every page user visits in order to check if his session is still valid. We just need to do this to include it for instance on `dashboard.php` file.
 88 | 
 89 | ```
 90 | <?php include "./library/sessionHelper.php";?>
 91 | 
 92 | <div id="alert" class="alert alert-danger w-25 mx-auto text-center" data-dismiss="alert" aria-label="Close" role="alert"></div>
 93 | ..............
 94 | ```
 95 | 
 96 | So what we have done is to include literally that `if else` of the helper at the top of the `dashboard.php` file. We can do this with all files we need.
 97 | 
 98 | ### Project key points
 99 | 
100 | The user is stored in `resouces/users.json` file there you have an admin user work with it.
101 | 
102 | The employees are stored `resouces/employees.json` file you have to make a CRUD over this file
103 | 
104 | You should follow with coherence the project structure we give you and when you add files or functions make them self-descriptive. As you could see in the methodology we left on the project.
105 | 
106 | ```
107 | $data = getAllData($id); // get employee data
108 | $employee = getEmployee($id);// just reading we know that gets employee by id, cool! and clean!
109 | ```
110 | 
111 | The functions you create have to be coherent, the naming is a serious affair. You can write in such a way that everything describes itself.
112 | 
113 | Same thing for variables, it is really important to give proper names.
114 | 
115 | ```
116 | $data = "John";
117 | $name = 'John;// no words needed
118 | ```
119 | 
120 | And yeah! also same thing for every file you create give sense and coherence to it.
121 | 
122 | [About naming](https://dzone.com/articles/naming-conventions-from-uncle-bobs-clean-code-phil)
123 | 
124 | ## External libraries
125 | 
126 | All them must be installed with the npm here you have a package.json take a look please.
127 | 
128 | - [Bootstrap](https://getbootstrap.com/)
129 | - [Bootstrap icons](https://icons.getbootstrap.com/)
130 | - [JSGrid](http://js-grid.com/)
131 | 
132 | ## Images Web Service for the extra feature
133 | 
134 | As we explained in the pdf document of this project we will use [this images api](https://uifaces.co/)
135 | 
136 | This web service in the version free that is which we are going to use has limitations. Five request per minute or thirty in an hour.  
137 | So if you want to develop this extra feature it would be cool to have a mocked response to develop at ease. So for this purpose we left in `resources/` folder a file called images_mock which can be used to the implementation of the extra feature once you have your code running well you need to remove this mock and to connect directly with the web service.
138 | 
139 | [Read the doc!](https://uifaces.co/api-docs)
140 | 
141 | ## Curl
142 | 
143 | In php we interact with HTTP web services through cUrl or client URL.  
144 | This is also a command in Unix systems. We are going to give you an over view in order to familiarise with it and then use it in the application for the extra feature.
145 | 
146 | To play a little with it, You can create a script in the root folder of your web server and with these request we have here to try make GET, POST. PUT and DELETE request against this super cool service which ables to developer to post and get data from what we call a request bin.  
147 | [ReqBin ](https://reqbin.com/curl)
148 | 
149 | #### Basic knowledge
150 | 
151 | ```
152 | <?php
153 | curl_init();      // initializes a session
154 | curl_setopt();    // changes the session behavior setting options
155 | curl_exec();      // executes the started session
156 | curl_close();     // closes the session and deletes data made by curl_init();
157 | ```
158 | 
159 | #### Adding headers to request
160 | 
161 | ```
162 | curl_setopt($curlHandler, CURLOPT_HTTPHEADER, array(
163 |  'Header-Key: Header-Value', 'X-API-KEY: 5d17e5de89a3e35d3902c4d667534'));
164 | ```
165 | 
166 | #### Getting error messages from cUrl
167 | 
168 | ```
169 | $curlHandler = curl_init('https://hostname.com/resource/');
170 | curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);
171 | 
172 | if(curl_exec($curlHandler) === false)
173 | {
174 |  echo 'Curl error: ' . curl_error($curlHandler); //gets last cUrl error as a string
175 | }
176 | ```
177 | 
178 | #### Get Request
179 | 
180 | ```
181 | <?php
182 | 
183 | $curlHandler = curl_init();
184 | 
185 | curl_setopt($curlHandler, CURLOPT_URL, 'https://hostname.com/resource');
186 | curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);
187 | 
188 | $apiResponse = curl_exec($curlHandler);
189 | curl_close($curlHandler);
190 | 
191 | $decodedResponse = json_decode($apiResponse);
192 | 
193 | ```
194 | 
195 | #### Post Request
196 | 
197 | ```
198 | <?php
199 | 
200 | $postData = [
201 |  'parameter1' => 'foo', 'parameter2' => 'bar'];
202 | 
203 | $curlHandler = curl_init('http://hostname.com/api/resource');
204 | curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);
205 | curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call
206 | 
207 | $apiResponse = curl_exec($curlHandler);
208 | curl_close($curlHandler);
209 | 
210 | $decodedResponse = json_decode($apiResponse);
211 | 
212 | ```
213 | 
214 | #### Post Request
215 | 
216 | ```
217 | <?php
218 | 
219 | $postData = [
220 |  'parameter1' => 'foo', 'parameter2' => 'bar'];
221 | 
222 | $curlHandler = curl_init('http://hostname.com/api/resource');
223 | curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);
224 | curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call
225 | 
226 | $apiResponse = curl_exec($curlHandler);
227 | curl_close($curlHandler);
228 | 
229 | $decodedResponse = json_decode($apiResponse);
230 | 
231 | ```
232 | 
233 | #### Delete Request
234 | 
235 | ```
236 | $curlHandler = curl_init('http://hostname.com/api/resource');
237 | curl_setopt($curlHandler, CURLOPT_CUSTOMREQUEST, 'DELETE');// Setting HTTP verb that will by used for the request
238 | 
239 | $apiResponse = curl_exec($curlHandler);
240 | $httpCode = curl_getinfo($curlHandler, CURLINFO_HTTP_CODE);// Getting http response code
241 | curl_close($curlHandler);
242 | 
243 | $decodedResponse = json_decode($apiResponse);
244 | ```
245 | 
246 | #### All together
247 | 
248 | ```
249 | $postData = [
250 |  'parameter1' => 'foo', 'parameter2' => 'bar'];
251 | 
252 | $curlHandler = curl_init('http://hostname.com/api/resource');
253 | curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);
254 | curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call
255 | 
256 | $apiResponse = curl_exec($curlHandler);
257 | if (curl_errno($curlHandler)) {
258 |  $errorMessage = curl_error($curlHandler);
259 |  //throw error}
260 | curl_close($curlHandler);
261 | 
262 | $decodedResponse = json_decode($apiResponse);
263 | ```
264 | 


--------------------------------------------------------------------------------
/assets/css/contact.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  2 | 
  3 | :root {
  4 |   --primary-color: #010712;
  5 |   --secondary-color: #818386;
  6 |   --bg-color: #fcfdfd;
  7 |   --button-color: #3b3636;
  8 |   --h1-color: #3f444c;
  9 | }
 10 | 
 11 | * {
 12 |   margin: 0;
 13 |   box-sizing: border-box;
 14 |   transition: all 0.3s ease-in-out;
 15 | }
 16 | 
 17 | .contact-container {
 18 |   display: flex;
 19 |   background-color: #38C0BE;
 20 |   width: 100vw;
 21 |   height: 100vh;
 22 | }
 23 | 
 24 | .left-col {
 25 |   width: 45vw;
 26 |   height: 100%;
 27 |   background-image: url("https://www.guidingtech.com/wp-content/uploads/Best-Star-Wars-HD-and-4K-Wallpapers-for-Phone-and-PC-6_4d470f76dc99e18ad75087b1b8410ea9.jpg");
 28 |   background-size: cover;
 29 |   background-repeat: no-repeat;
 30 |   background-color: #38C0BE;
 31 | }
 32 | 
 33 | .logo {
 34 |   width: 20rem;
 35 |   padding: 1.5rem;
 36 | }
 37 | 
 38 | .right-col {
 39 |   background-color: #38C0BE;
 40 |   width: 50vw;
 41 |   height: 100vh;
 42 |   padding: 5rem 3.5rem;
 43 | }
 44 | 
 45 | h1,
 46 | label,
 47 | button,
 48 | .description {
 49 |   font-family: "Jost", sans-serif;
 50 |   font-weight: 400;
 51 |   letter-spacing: 0.1rem;
 52 | }
 53 | 
 54 | h1 {
 55 |   text-transform: uppercase;
 56 |   font-size: 2.5rem;
 57 |   letter-spacing: 0.5rem;
 58 |   font-weight: 300;
 59 | }
 60 | .contact-title{
 61 |   color: #97161D;
 62 |   font-family: 'Montserrat', sans-serif;
 63 | }
 64 | p {
 65 |   color:#010712;
 66 |   font-size: 0.9rem;
 67 |   letter-spacing: 0.01rem;
 68 |   margin: 0.25rem 0;
 69 | }
 70 | 
 71 | label,
 72 | .description {
 73 |   color: var(--secondary-color);
 74 |   text-transform: uppercase;
 75 |   font-size: 0.625rem;
 76 | }
 77 | 
 78 | form {
 79 |   width: 31.25rem;
 80 |   position: relative;
 81 |   margin-top: 2rem;
 82 |   padding: 1rem 0;
 83 | }
 84 | 
 85 | 
 86 | textarea,
 87 | label {
 88 |   width: 40vw;
 89 |   display: block;
 90 | }
 91 | 
 92 | p,
 93 | placeholder,
 94 | input,
 95 | textarea {
 96 |   font-family: "Helvetica Neue", sans-serif;
 97 | }
 98 | 
 99 | input::placeholder,
100 | textarea::placeholder {
101 |   color: var(--primary-color);
102 | }
103 | 
104 | input,
105 | textarea {
106 |   color: var(--primary-color);
107 |   font-weight: 500;
108 |   background: var(--bg-color);
109 |   border: none;
110 |   border-bottom: 1px solid var(--secondary-color);
111 |   padding: 0.5rem 0;
112 |   margin-bottom: 1rem;
113 |   outline: none;
114 | }
115 | 
116 | textarea {
117 |   resize: none;
118 | }
119 | 
120 | button {
121 |   text-transform: uppercase;
122 |   font-weight: 300;
123 |   background: var(--button-color);
124 |   color: var(--bg-color);
125 |   width: 10rem;
126 |   height: 2.25rem;
127 |   border: none;
128 |   border-radius: 2px;
129 |   outline: none;
130 |   cursor: pointer;
131 | }
132 | 
133 | input:hover,
134 | textarea:hover,
135 | button:hover {
136 |   opacity: 0.5;
137 | }
138 | 
139 | button:active {
140 |   opacity: 0.8;
141 | }
142 | 
143 | /* Toggle Switch */
144 | 
145 | .theme-switch-wrapper {
146 |   display: flex;
147 |   align-items: center;
148 |   text-align: center;
149 |   width: 160px;
150 |   position: absolute;
151 |   top: 0.5rem;
152 |   right: 0;
153 | }
154 | 
155 | .description {
156 |   margin-left: 1.25rem;
157 | }
158 | 
159 | .theme-switch {
160 |   display: inline-block;
161 |   height: 34px;
162 |   position: relative;
163 |   width: 60px;
164 | }
165 | 
166 | .theme-switch input {
167 |   display: none;
168 | }
169 | 
170 | .slider {
171 |   background-color: #ccc;
172 |   bottom: 0;
173 |   cursor: pointer;
174 |   left: 0;
175 |   position: absolute;
176 |   right: 0;
177 |   top: 0;
178 |   transition: 0.4s;
179 | }
180 | 
181 | .slider:before {
182 |   background-color: #fff;
183 |   bottom: 0.25rem;
184 |   content: "";
185 |   width: 26px;
186 |   height: 26px;
187 |   left: 0.25rem;
188 |   position: absolute;
189 |   transition: 0.4s;
190 | }
191 | 
192 | input:checked + .slider {
193 |   background-color: var(--button-color);
194 | }
195 | 
196 | input:checked + .slider:before {
197 |   transform: translateX(26px);
198 | }
199 | 
200 | .slider.round {
201 |   border-radius: 34px;
202 | }
203 | 
204 | .slider.round:before {
205 |   border-radius: 50%;
206 | }
207 | 
208 | #error,
209 | #success-msg {
210 |   width: 40vw;
211 |   margin: 0.125rem 0;
212 |   font-size: 0.75rem;
213 |   text-transform: uppercase;
214 |   font-family: "Jost";
215 |   color: var(--secondary-color);
216 | }
217 | 
218 | #success-msg {
219 |   transition-delay: 3s;
220 | }
221 | 
222 | @media only screen and (max-width: 950px) {
223 |   .logo {
224 |     width: 8rem;
225 |   }
226 |   h1 {
227 |     font-size: 1.75rem;
228 |   }
229 |   p {
230 |     font-size: 0.7rem;
231 |   }
232 |   input,
233 |   textarea,
234 |   button {
235 |     font-size: 0.65rem;
236 |   }
237 |   .description {
238 |     font-size: 0.3rem;
239 |     margin-left: 0.4rem;
240 |   }
241 |   button {
242 |     width: 7rem;
243 |   }
244 |   .theme-switch-wrapper {
245 |     width: 120px;
246 |   }
247 |   .theme-switch {
248 |     height: 28px;
249 |     width: 50px;
250 |   }
251 | 
252 |   .theme-switch input {
253 |     display: none;
254 |   }
255 | 
256 |   .slider:before {
257 |     background-color: #fff;
258 |     bottom: 0.25rem;
259 |     content: "";
260 |     width: 20px;
261 |     height: 20px;
262 |     left: 0.25rem;
263 |     position: absolute;
264 |     transition: 0.4s;
265 |   }
266 |   input:checked + .slider:before {
267 |     transform: translateX(16px);
268 |   }
269 | 
270 |   .slider.round {
271 |     border-radius: 15px;
272 |   }
273 | 
274 |   .slider.round:before {
275 |     border-radius: 50%;
276 |   }
277 | }
278 | 
279 | 


--------------------------------------------------------------------------------
/assets/css/dashboardStyle.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | 
 8 |   .navbar {
 9 |     display: flex;
10 |   }
11 | 
12 |   .navlinks{
13 |     width: 100px;
14 |     border-radius: 30px;
15 |     outline: none;
16 |     border: none;
17 |     box-shadow: inset 2px 2px 5px #a5a5a5, inset -5px -5px 10px #fff;
18 |     padding: 18px;
19 |     position: relative;
20 |     z-index: 1;
21 |     transition: 0.3s all;
22 |     font-size: 70%;
23 |     text-shadow: 1px 1px 1px #cdb2a1;
24 |     color: #6d6d6d;
25 |     letter-spacing: 0.5px;
26 |     color: #983F40;
27 |   }
28 | 
29 |   .employeeSelector{
30 |     padding: 18px;
31 |     position: relative;
32 |     z-index: 1;
33 |     transition: 0.3s all;
34 |     font-size: 70%;
35 |     text-shadow: 1px 1px 1px #cdb2a1;
36 |     color: #6d6d6d;
37 |     letter-spacing: 0.5px;
38 |     color: #983F40;
39 |   }


--------------------------------------------------------------------------------
/assets/css/employeeStyle.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | .container {
 8 |   height: 100vh;
 9 |   width: 100%;
10 |   display: flex;
11 |   align-items: center;
12 |   justify-content: center;
13 |   font-family: 'arial';
14 |   font-size: 20px;
15 |   font-weight: 300;
16 | }
17 | .employeeForm {
18 |   text-align: center;
19 |   font-weight: 300;
20 |   color: #983F40;
21 |   font-size: 100%;
22 |   text-shadow: 1px 1px 1px #fff;
23 |   font-family: 'Times New Roman', Times, serif;
24 | }
25 | .footer-text{
26 |   text-align: center;
27 |   font-weight: 500;
28 |   color: #983F40;
29 |   font-size: 70%;
30 |   text-shadow: 1px 1px 1px #fff;
31 |   font-family: 'Times New Roman', Times, serif;
32 | }
33 | 
34 | 
35 | form {
36 |   padding: 20px;
37 |   border-radius: 10%;
38 |   display: flex;
39 |   gap: 20px;
40 |   flex-direction: column;
41 |   background: #FFFFFF;
42 |   position: relative;
43 |   box-shadow: -12px 2px 31px -7px rgba(151,62,63,1);
44 | }
45 | 
46 | button {
47 |   width: 100%;
48 |   height: 45px;
49 |   border-radius: 30px;
50 |   border: none;
51 |   box-shadow: 0px 5px 8px #b5b5b5, 0px -5px 8px #fff;
52 |   font-weight: 900;
53 |   font-size: 85%;
54 |   color: #f6f6f5;
55 |   text-shadow: 1px 1px 1px #fff;
56 |   cursor: pointer;
57 |   background: #983F40;
58 |   transition: 0.3s;
59 | }
60 | 
61 | button:hover {
62 |   box-shadow: 0px 3px 3px #983F40, 0px -3px 3px #fff;
63 | }
64 | 
65 | button:focus {
66 |   box-shadow: inset 2px 2px 2px #983F40, inset -2px -2px 2px #fff;
67 | }
68 | 
69 | 
70 | 
71 | 
72 | .is-checked {
73 |   color: #555;
74 | }
75 | 
76 | .is-not-checked {
77 |   color: transparent;
78 | }
79 | 
80 | ::placeholder {
81 |   text-shadow: 1px 1px 1px #fff;
82 |   color: #6d6d6d;
83 |   letter-spacing: 0.5px;
84 |   font-size: 100%;
85 |   transition: 0.3s all;
86 | }
87 | 


--------------------------------------------------------------------------------
/assets/css/loginStyle.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | .onepunch{
  8 |   border-radius: 50%;
  9 |   -webkit-box-shadow: -12px 2px 31px -7px rgba(151,62,63,1);
 10 |   -moz-box-shadow: -12px 2px 31px -7px rgba(151,62,63,1);
 11 |   box-shadow: -12px 2px 31px -7px rgba(151,62,63,1);
 12 | }
 13 | 
 14 | .container {
 15 |   height: 100vh;
 16 |   width: 100%;
 17 |   display: flex;
 18 |   align-items: center;
 19 |   justify-content: center;
 20 |   font-family: 'arial';
 21 |   font-size: 20px;
 22 |   font-weight: 300;
 23 | }
 24 | .footer-text{
 25 |   font-weight: 500;
 26 |   color: #983F40;
 27 |   font-size: 70%;
 28 |   text-shadow: 1px 1px 1px #fff;
 29 |   font-family: 'Times New Roman', Times, serif;
 30 | }
 31 | 
 32 | form {
 33 |   padding: 20px;
 34 |   border-radius: 10%;
 35 |   display: flex;
 36 |   gap: 20px;
 37 |   flex-direction: column;
 38 |   background: #FFFFFF;
 39 |   position: relative;
 40 |   box-shadow: -12px 2px 31px -7px rgba(151,62,63,1);
 41 | }
 42 | 
 43 | .input-container-flex {
 44 |   display: flex;
 45 |   flex-direction: row-reverse;
 46 |   justify-content: flex-end;
 47 |   align-items: center;
 48 |   gap: 15px;
 49 |   padding-left: 20px;
 50 |   margin-top: -15px;
 51 |   margin-bottom: -15px;
 52 |   font-size: 70%;
 53 |   text-shadow: 1px 1px 1px #fff;
 54 |   color: #6d6d6d;
 55 |   letter-spacing: 0.5px;
 56 | }
 57 | 
 58 | .log-in{
 59 |   text-align: center;
 60 |   font-weight: 900;
 61 |   color: #983F40;
 62 |   font-size: 170%;
 63 |   text-shadow: 1px 1px 1px #fff;
 64 |   font-family: 'Times New Roman', Times, serif;
 65 | }
 66 | .login-btn{
 67 |   background: #983F40;
 68 |   color: #fff;
 69 |   border: none;
 70 |   border-radius: 20px;
 71 |   padding: 10px;
 72 |   font-size: 100%;
 73 |   font-weight: 900;
 74 |   text-shadow: 1px 1px 1px #fff;
 75 |   font-family: 'Times New Roman', Times, serif;
 76 | }
 77 | 
 78 | button {
 79 |   
 80 |   width: 100%;
 81 |   height: 45px;
 82 |   border-radius: 30px;
 83 |   border: none;
 84 |   box-shadow: 0px 5px 8px #b5b5b5, 0px -5px 8px #fff;
 85 |   font-weight: 900;
 86 |   font-size: 85%;
 87 |   color: #ffffff;
 88 |   text-shadow: 1px 1px 1px #fff;
 89 |   cursor: pointer;
 90 |   background: #4C436C;
 91 |   transition: 0.3s;
 92 | }
 93 | 
 94 | button:hover {
 95 |   box-shadow: 0px 3px 3px #b5b5b5, 0px -3px 3px #fff;;
 96 | }
 97 | 
 98 | button:focus {
 99 |   box-shadow: inset 2px 2px 2px #a5a5a5, inset -2px -2px 2px #fff;
100 | }
101 | 
102 | input[type="text"],
103 | input[type="password"] {
104 |   width: 300px;
105 |   border-radius: 30px;
106 |   outline: none;
107 |   border: none;
108 |   background: transparent;
109 |   box-shadow: inset 2px 2px 5px #a5a5a5, inset -5px -5px 10px #fff;
110 |   padding: 18px;
111 |   position: relative;
112 |   z-index: 1;
113 |   transition: 0.3s all;
114 |   font-size: 75%;
115 |   text-shadow: 1px 1px 1px #CDB2A1;
116 |   color: #6d6d6d;
117 |   letter-spacing: 0.5px;
118 | }
119 | 
120 | input[type="text"]:focus,
121 | input[type="password"]:focus {
122 |   box-shadow: inset 2px 2px 2px #a5a5a5, inset -2px -2px 2px #fff;
123 | }
124 | 
125 | input[type="button"] {
126 |   border: none;
127 |   box-shadow: inset 2px 2px 2px #a5a5a5, inset -2px -2px 2px #fff;
128 |   border-radius: 3px;
129 |   padding: 6px 8px;
130 |   cursor: pointer;
131 |   transition: 0.3s all;
132 | }
133 | 
134 | input[type="button"]:hover {
135 |   box-shadow: inset 1px 1px 1px #a5a5a5, inset -1px -1px 1px #fff;
136 | }
137 | 
138 | .is-checked {
139 |   color: #555;
140 | }
141 | 
142 | .is-not-checked {
143 |   color: transparent;
144 | }
145 | 
146 | ::placeholder {
147 |   text-shadow: 1px 1px 1px #fff;
148 |   color: #6d6d6d;
149 |   letter-spacing: 0.5px;
150 |   font-size: 100%;
151 |   transition: 0.3s all;
152 | }
153 | 
154 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogSoulDev/php-employee-management-v1/214d582cdebf4d43e0f35957bd3af8e156104a6f/assets/css/main.css


--------------------------------------------------------------------------------
/assets/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |      ========================================================================== */
 18 | 
 19 | /**
 20 |    * Remove the margin in all browsers.
 21 |    */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |    * Render the `main` element consistently in IE.
 29 |    */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |    * Correct the font size and margin on `h1` elements within `section` and
 37 |    * `article` contexts in Chrome, Firefox, and Safari.
 38 |    */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |      ========================================================================== */
 47 | 
 48 | /**
 49 |    * 1. Add the correct box sizing in Firefox.
 50 |    * 2. Show the overflow in Edge and IE.
 51 |    */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |    * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |    * 2. Correct the odd `em` font sizing in all browsers.
 62 |    */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |      ========================================================================== */
 71 | 
 72 | /**
 73 |    * Remove the gray background on active links in IE 10.
 74 |    */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |    * 1. Remove the bottom border in Chrome 57-
 82 |    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |    */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |    * Add the correct font weight in Chrome, Edge, and Safari.
 93 |    */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |    * 1. Correct the inheritance and scaling of font size in all browsers.
102 |    * 2. Correct the odd `em` font sizing in all browsers.
103 |    */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |    * Add the correct font size in all browsers.
114 |    */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |    * Prevent `sub` and `sup` elements from affecting the line height in
122 |    * all browsers.
123 |    */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |      ========================================================================== */
143 | 
144 | /**
145 |    * Remove the border on images inside links in IE 10.
146 |    */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |      ========================================================================== */
154 | 
155 | /**
156 |    * 1. Change the font styles in all browsers.
157 |    * 2. Remove the margin in Firefox and Safari.
158 |    */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |    * Show the overflow in IE.
173 |    * 1. Show the overflow in Edge.
174 |    */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |    * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |    * 1. Remove the inheritance of text transform in Firefox.
185 |    */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |    * Correct the inability to style clickable types in iOS and Safari.
195 |    */
196 | 
197 | button,
198 | [type="button"],
199 | [type="reset"],
200 | [type="submit"] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |    * Remove the inner border and padding in Firefox.
206 |    */
207 | 
208 | button::-moz-focus-inner,
209 | [type="button"]::-moz-focus-inner,
210 | [type="reset"]::-moz-focus-inner,
211 | [type="submit"]::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |    * Restore the focus styles unset by the previous rule.
218 |    */
219 | 
220 | button:-moz-focusring,
221 | [type="button"]:-moz-focusring,
222 | [type="reset"]:-moz-focusring,
223 | [type="submit"]:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |    * Correct the padding in Firefox.
229 |    */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |    * 1. Correct the text wrapping in Edge and IE.
237 |    * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |    * 3. Remove the padding so developers are not caught out when they zero out
239 |    *    `fieldset` elements in all browsers.
240 |    */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |    * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |    */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |    * Remove the default vertical scrollbar in IE 10+.
261 |    */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |    * 1. Add the correct box sizing in IE 10.
269 |    * 2. Remove the padding in IE 10.
270 |    */
271 | 
272 | [type="checkbox"],
273 | [type="radio"] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |    * Correct the cursor style of increment and decrement buttons in Chrome.
280 |    */
281 | 
282 | [type="number"]::-webkit-inner-spin-button,
283 | [type="number"]::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |    * 1. Correct the odd appearance in Chrome and Safari.
289 |    * 2. Correct the outline style in Safari.
290 |    */
291 | 
292 | [type="search"] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |    * Remove the inner padding in Chrome and Safari on macOS.
299 |    */
300 | 
301 | [type="search"]::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |    * 1. Correct the inability to style clickable types in iOS and Safari.
307 |    * 2. Change font properties to `inherit` in Safari.
308 |    */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |      ========================================================================== */
317 | 
318 | /*
319 |    * Add the correct display in Edge, IE 10+, and Firefox.
320 |    */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |    * Add the correct display in all browsers.
328 |    */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |      ========================================================================== */
336 | 
337 | /**
338 |    * Add the correct display in IE 10+.
339 |    */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |    * Add the correct display in IE 10.
347 |    */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/assets/html/footer.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <<<<<<< HEAD
 5 |   <!DOCTYPE html>
 6 |   <html lang="en">
 7 |   <head>
 8 |       <meta charset="UTF-8">
 9 |       <meta http-equiv="X-UA-Compatible" content="IE=edge">
10 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
11 |       <title>Document</title>
12 |   </head>
13 |   <body>
14 |       
15 | 
16 |   <footer>
17 |         <div><a href="https://github.com/jose-cuevas">Jose Cuevas</a> &amp; <a href="https://github.com/DogSoulDev">Javier Fernández</a></div>
18 |         
19 |         <div id="pro"></div>
20 |     </footer>
21 | 
22 | </body>
23 | =======
24 | <head>
25 |     <meta charset="UTF-8">
26 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
27 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
28 |     <title>Document</title>
29 | </head>
30 | 
31 | <body>
32 |     
33 |     <p class="copy">&copy;Assembler Institute Barcelona all rights reserved 2022</p>
34 |                     <a href="https://github.com/jose-cuevas">Jose Cuevas</a> &amp; <a
35 |                         href="https://github.com/DogSoulDev">Javier Fernández</a>
36 | </body>
37 | 
38 | >>>>>>> develop
39 | </html>


--------------------------------------------------------------------------------
/assets/html/header.html:
--------------------------------------------------------------------------------
 1 | <<<<<<< HEAD
 2 | 
 3 |   <!DOCTYPE html>
 4 |   <html lang="en">
 5 |   <head>
 6 |       <meta charset="UTF-8">
 7 |       <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |       <title>Document</title>
10 |   </head>
11 |   <body>
12 |       
13 | 
14 | 
15 | </body>
16 | =======
17 | <!DOCTYPE html>
18 | <html lang="en">
19 | 
20 | <head>
21 |     <meta charset="UTF-8">
22 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
23 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
24 |     <title>Document</title>
25 | </head>
26 | 
27 | <body>
28 | 
29 |     <button type="submit" class="login-btn" >Log out</button>
30 | </body>
31 | 
32 | >>>>>>> develop
33 | </html>


--------------------------------------------------------------------------------
/assets/img/asse.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogSoulDev/php-employee-management-v1/214d582cdebf4d43e0f35957bd3af8e156104a6f/assets/img/asse.webp


--------------------------------------------------------------------------------
/assets/img/b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogSoulDev/php-employee-management-v1/214d582cdebf4d43e0f35957bd3af8e156104a6f/assets/img/b.png


--------------------------------------------------------------------------------
/assets/img/c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogSoulDev/php-employee-management-v1/214d582cdebf4d43e0f35957bd3af8e156104a6f/assets/img/c.png


--------------------------------------------------------------------------------
/assets/img/v_50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogSoulDev/php-employee-management-v1/214d582cdebf4d43e0f35957bd3af8e156104a6f/assets/img/v_50.png


--------------------------------------------------------------------------------
/assets/img/worker.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogSoulDev/php-employee-management-v1/214d582cdebf4d43e0f35957bd3af8e156104a6f/assets/img/worker.gif


--------------------------------------------------------------------------------
/assets/js/contactScript.js:
--------------------------------------------------------------------------------
 1 | const name = document.getElementById("name");
 2 | const email = document.getElementById("email");
 3 | const message = document.getElementById("message");
 4 | const contactForm = document.getElementById("contact-form");
 5 | const errorElement = document.getElementById("error");
 6 | const successMsg = document.getElementById("success-msg");
 7 | const submitBtn = document.getElementById("submit");
 8 | 
 9 | const validate = (e) => {
10 |   e.preventDefault();
11 | 
12 |   if (name.value.length < 3) {
13 |     errorElement.innerHTML = "Your name should be at least 3 characters long.";
14 |     return false;
15 |   }
16 | 
17 |   if (!(email.value.includes(".") && email.value.includes("@"))) {
18 |     errorElement.innerHTML = "Please enter a valid email address.";
19 |     return false;
20 |   }
21 | 
22 |   if (!emailIsValid(email.value)) {
23 |     errorElement.innerHTML = "Please enter a valid email address.";
24 |     return false;
25 |   }
26 | 
27 |   if (message.value.length < 15) {
28 |     errorElement.innerHTML = "Please write a longer message.";
29 |     return false;
30 |   }
31 | 
32 |   errorElement.innerHTML = "";
33 |   successMsg.innerHTML =
34 |     "Thank you! I will get back to you as soon as possible.";
35 | 
36 |   e.preventDefault();
37 |   setTimeout(function () {
38 |     successMsg.innerHTML = "";
39 |     document.getElementById("contact-form").reset();
40 |   }, 6000);
41 | 
42 |   return true;
43 | };
44 | 
45 | const emailIsValid = (email) => {
46 |   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
47 | };
48 | 
49 | submitBtn.addEventListener("click", validate);
50 | 
51 | 


--------------------------------------------------------------------------------
/assets/js/faceApi.js:
--------------------------------------------------------------------------------
 1 | const getAPI = async () => {
 2 |     const res = await fetch('https://randomuser.me/api/?format=csv');
 3 | 
 4 |     if (res.ok) {
 5 |         const data = await res.json();
 6 | 
 7 |         console.log(data);
 8 |     }
 9 | };
10 | 
11 | getAPI();


--------------------------------------------------------------------------------
/assets/js/index.js:
--------------------------------------------------------------------------------
  1 | "user strict";
  2 | 
  3 | const usersContainer = document.getElementById("usersContainer");
  4 | const addEmployee = document.getElementById('addEmployee');
  5 | const employeeControlerUrl = "../src/library/employeeController.php?all_data";
  6 | const employeeControllerUrlGet = "../src/library/employeeController.php?id=";
  7 | 
  8 | // * Without async / await
  9 | window.addEventListener('load', ()=>{
 10 |      fetch(employeeControlerUrl)
 11 |     .then(response=> response.json())
 12 |     .then (data=> {
 13 |         console.log(data);        
 14 |         console.log(Object.values(data)); 
 15 |         updateTable(data);        
 16 |         addEventListenerToDeleteBtn(data);
 17 |     });
 18 | });
 19 | 
 20 | const deleteChildNodes = (parent) => {
 21 |   while (parent.firstChild) {
 22 |     parent.removeChild(parent.lastChild);
 23 |   }
 24 | };
 25 | 
 26 | function updateTable(data) {
 27 |     deleteChildNodes(usersContainer);
 28 |     data.forEach(user=>{
 29 |         const tableRow = document.createElement('tr');
 30 |         tableRow.innerHTML = `
 31 |         <tr>        
 32 |             <td>${user.id}</td>
 33 |             <td>${user.name}</td>
 34 |             <td>${user.email}</td>
 35 |             <td>${user.age}</td>
 36 |             <td>${user.streetAddress}</td>
 37 |             <td>${user.city}</td>
 38 |             <td>${user.state}</td>
 39 |             <td>${user.postalCode}</td>
 40 |             <td>${user.phoneNumber}</td>
 41 |             <td>&nbsp;<a href="#" class='user-data' id="${user.id}" data-user="${user.id}" ><i class="fas fa-trash-alt" ></i></a></td>
 42 |         <tr>
 43 |         `;
 44 |         usersContainer.append(tableRow);
 45 |         
 46 |           
 47 |                
 48 |     });
 49 | }
 50 | 
 51 | 
 52 | function addEventListenerToDeleteBtn(){
 53 |     const userId = document.querySelectorAll("[data-user]");
 54 |     userId.forEach(user=>{
 55 |         user.addEventListener('click', (e)=>{
 56 |             const aElement = e.target.parentElement; 
 57 |             console.log(aElement);   
 58 |             const id = aElement.getAttribute('data-user');
 59 |             console.log(id);
 60 |             deleteEmployee(id);                        
 61 |         })
 62 |     })
 63 | }
 64 | 
 65 | 
 66 | async function deleteEmployee(id){
 67 |     const response =  await fetch(`${employeeControllerUrlGet}${id}`, {
 68 |         method: 'DELETE',
 69 |         headers: {
 70 |             "content-type": "application/json",
 71 |         }
 72 |     });
 73 |     const data = await response.json();    
 74 |     updateTable(data);
 75 |     addEventListenerToDeleteBtn();
 76 |     console.log(data);
 77 | }
 78 | 
 79 | // deleteEmployee(1);
 80 | 
 81 | async function getEmployeeId(id) {
 82 |   const response = await fetch(`${employeeControllerUrlGet}${id}`, {
 83 |     method: "GET",
 84 |     headers: {
 85 |       "content-type": "application/json",
 86 |     },
 87 |   });
 88 |   const data = await response.json();
 89 |   return data;
 90 | }
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | // getEmployeeId (4);
100 | 


--------------------------------------------------------------------------------
/contact.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | 
 4 | ?>
 5 | <!DOCTYPE html>
 6 | <html lang="en">
 7 | 
 8 | <head>
 9 |     <meta charset="UTF-8">
10 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
13 |         integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
14 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
15 |         integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
16 |     </script>
17 |     <script type="text/javascript" src="./assets/js/index.js" defer></script>
18 |     
19 |     <link rel="stylesheet" href="./assets/css/login.css">
20 |     <link rel="stylesheet" href="./assets/css/main.css">
21 |     <link rel="stylesheet" href="./assets/css/normalize.css">
22 |     <link rel="stylesheet" href="./assets/css/contact.css">
23 |     <title>Contact</title>
24 | 
25 | </head>
26 | 
27 | <div class="contact-container">
28 |     <div class="left-col">
29 |         <img class="logo" src="./assets/img/asse.webp" />
30 |     </div>
31 |     <div class="right-col">
32 |         <div class="theme-switch-wrapper">
33 |             <label class="theme-switch" for="checkbox">
34 |                 <input type="checkbox" id="checkbox" />
35 |             </label>
36 |         </div>
37 | 
38 |         <h1 class="contact-title">Contact us</h1>
39 |         <p>If you have questions or any problems with our program, please contact us, we will attend to you as soon as
40 |             possible. Dev Team .</p>
41 | 
42 |         <form id="contact-form" method="post">
43 |             <label for="name">Full name</label>
44 |             <input type="text" id="name" name="name" placeholder="Your Full Name" required>
45 |             <label for="email">Email Address</label>
46 |             <input type="email" id="email" name="email" placeholder="Your Email Address" required>
47 |             <label for="message">Message</label>
48 |             <textarea rows="6" placeholder="Your Message" id="message" name="message" required></textarea>
49 |             <button class="sendBtn" type="submit" id="submit" name="submit">Send</button>
50 |             <!--</a>-->
51 |         </form>
52 |         <div class="footer-text">
53 |                     <p class="copy">&copy;Assembler Institute Barcelona all rights reserved 2022.</p>
54 |                     <a href="https://github.com/jose-cuevas">Jose Cuevas</a> &amp; <a
55 |                         href="https://github.com/DogSoulDev">Javier Fernández</a>
56 |                 </div>
57 |         <div id="error"></div>
58 |         <div id="success-msg"></div>
59 |     </div>
60 | </div>
61 | 
62 | </main>
63 | </body>
64 | 
65 | </html>


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | require('./src/library/loginManager.php');
 3 | 
 4 | checkUrl($_GET);
 5 | ?>
 6 | 
 7 | <!DOCTYPE html>
 8 | <html lang="en">
 9 | 
10 | <head>
11 |     <meta charset="UTF-8">
12 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
13 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
14 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
15 |         integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
16 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
17 |         integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
18 |     </script>
19 |     <script type="text/javascript" src="./assets/js/index.js" defer></script>
20 |     <script type="text/javascript" src="./assets/js/contactScript.js" def></script>
21 |     <link rel="stylesheet" href="./assets/css/loginStyle.css">
22 |     <link rel="stylesheet" href="./assets/css/main.css">
23 |     <link rel="stylesheet" href="./assets/css/normalize.css">
24 |     <link rel="stylesheet" href="./assets/css/contact.css">
25 |     <title>Employee management</title>
26 | </head>
27 | 
28 | <body class="text-center">
29 |     <main class="form-signin form__container">
30 |         <div class="container">
31 |             <img class="onepunch" src="./assets/img/v_50.png">
32 |             <section>
33 |                 <form action="./src/library/loginController.php" method="POST">
34 |                 <p class="log-in">Employee Management</p>
35 |                     <div class="input-container">
36 |                         <input name="username" type="text" placeholder="Username" maxlength="10" required></div>
37 |                     <div class="input-container">
38 |                         <input name="password" type="password" placeholder="Password" required>
39 |                     </div>
40 |                     <div class="input-container">
41 |                         <p> Create new account. <a href="./src/library/registerEmployee.php">Employee Account</a></p>
42 |                     </div>
43 |                     <div class="input-container">
44 |                         <button type="submit" class="login-btn">Log in</button>
45 |                     </div>
46 |                 </form>
47 |             </section>
48 |         </div>
49 |         <div class="footer-text">
50 |                     <p class="copy">&copy;Assembler Institute Barcelona all rights reserved 2022.</p>
51 |                     <a href="https://github.com/jose-cuevas">Jose Cuevas</a>  &amp; 
52 |                     <a href="https://github.com/DogSoulDev">Javier Fernández</a>
53 |                     <div>
54 |                     <a href="./contact.php">Contact</a>
55 |                     </div>
56 |                 </div>
57 | 
58 |             </form>
59 | 
60 |             <?php
61 | 
62 | ?>
63 |     </main>
64 |     <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
65 | </body>
66 | 
67 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "assemblerschool",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 2,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "name": "assemblerschool",
  9 |       "version": "1.0.0",
 10 |       "license": "ISC",
 11 |       "dependencies": {
 12 |         "bootstrap": "^5.2.0-beta1",
 13 |         "bootstrap-icons": "1.0.0-alpha4",
 14 |         "jquery": "3.5.1",
 15 |         "jsgrid": "1.5.3",
 16 |         "normalize.css": "^8.0.1"
 17 |       }
 18 |     },
 19 |     "node_modules/@popperjs/core": {
 20 |       "version": "2.11.5",
 21 |       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
 22 |       "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
 23 |       "peer": true,
 24 |       "funding": {
 25 |         "type": "opencollective",
 26 |         "url": "https://opencollective.com/popperjs"
 27 |       }
 28 |     },
 29 |     "node_modules/bootstrap": {
 30 |       "version": "5.2.0-beta1",
 31 |       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0-beta1.tgz",
 32 |       "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA==",
 33 |       "funding": [
 34 |         {
 35 |           "type": "github",
 36 |           "url": "https://github.com/sponsors/twbs"
 37 |         },
 38 |         {
 39 |           "type": "opencollective",
 40 |           "url": "https://opencollective.com/bootstrap"
 41 |         }
 42 |       ],
 43 |       "peerDependencies": {
 44 |         "@popperjs/core": "^2.11.5"
 45 |       }
 46 |     },
 47 |     "node_modules/bootstrap-icons": {
 48 |       "version": "1.0.0-alpha4",
 49 |       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0-alpha4.tgz",
 50 |       "integrity": "sha512-UcpSUPsvUiW7ueBQfXZSgknJv/rj060dglhWIRPjkLjUWa32jMWqsLXO8tXY2od4Ew6cuh0BJ3f8VOhQPVY4mA==",
 51 |       "engines": {
 52 |         "node": ">=10"
 53 |       }
 54 |     },
 55 |     "node_modules/jquery": {
 56 |       "version": "3.5.1",
 57 |       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
 58 |       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
 59 |     },
 60 |     "node_modules/jsgrid": {
 61 |       "version": "1.5.3",
 62 |       "resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
 63 |       "integrity": "sha512-/BJgQp7gZe8o/VgNelwXc21jHc9HN+l7WPOkBhC9b9jPXFtOrU9ftNLPVBmKYCNlIulAbGTW8SDJI0mpw7uWxQ=="
 64 |     },
 65 |     "node_modules/normalize.css": {
 66 |       "version": "8.0.1",
 67 |       "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
 68 |       "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
 69 |     }
 70 |   },
 71 |   "dependencies": {
 72 |     "@popperjs/core": {
 73 |       "version": "2.11.5",
 74 |       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
 75 |       "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
 76 |       "peer": true
 77 |     },
 78 |     "bootstrap": {
 79 |       "version": "5.2.0-beta1",
 80 |       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0-beta1.tgz",
 81 |       "integrity": "sha512-6qbgs177WZEFY4SLQUq3tEHayYG80nfDmyTpdKi0MJqRMdS+HAoq24+YKfx6wf+nHY0rx8zrh477J1lFu4WzOA==",
 82 |       "requires": {}
 83 |     },
 84 |     "bootstrap-icons": {
 85 |       "version": "1.0.0-alpha4",
 86 |       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0-alpha4.tgz",
 87 |       "integrity": "sha512-UcpSUPsvUiW7ueBQfXZSgknJv/rj060dglhWIRPjkLjUWa32jMWqsLXO8tXY2od4Ew6cuh0BJ3f8VOhQPVY4mA=="
 88 |     },
 89 |     "jquery": {
 90 |       "version": "3.5.1",
 91 |       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
 92 |       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
 93 |     },
 94 |     "jsgrid": {
 95 |       "version": "1.5.3",
 96 |       "resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
 97 |       "integrity": "sha512-/BJgQp7gZe8o/VgNelwXc21jHc9HN+l7WPOkBhC9b9jPXFtOrU9ftNLPVBmKYCNlIulAbGTW8SDJI0mpw7uWxQ=="
 98 |     },
 99 |     "normalize.css": {
100 |       "version": "8.0.1",
101 |       "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
102 |       "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
103 |     }
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "assemblerschool",
 3 |   "version": "1.0.0",
 4 |   "description": "Part of basic web application project for Assembler School students",
 5 |   "main": "index.php",
 6 |   "scripts": {
 7 |     "test": "jest"
 8 |   },
 9 |   "author": "Jose Manuel Orts",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "bootstrap": "^5.2.0-beta1",
13 |     "bootstrap-icons": "1.0.0-alpha4",
14 |     "jquery": "3.5.1",
15 |     "jsgrid": "1.5.3",
16 |     "normalize.css": "^8.0.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/resources/employees.json:
--------------------------------------------------------------------------------
1 | [{"id":1,"name":"Rack","lastName":"Lei","email":"jackon@network.com","gender":"man","city":"San Jone","streetAddress":"126","state":"CA","age":"24","postalCode":"394221","phoneNumber":"7383627627"},{"id":"2","name":"John","lastName":"Doe","email":"jhondoe@foo.com","gender":"man","city":"New York","streetAddress":"89","state":"WA","age":"34","postalCode":"09889","phoneNumber":"1283645645"},{"id":3,"name":"Leila","lastName":"Mills","email":"mills@leila.com","gender":"woman","city":"San Diego","streetAddress":"55","state":"CA","age":"29","postalCode":"098765","phoneNumber":"9983632461"},{"id":6,"name":"Brad","lastName":"Simpson","email":"brad@foo.com","gender":"man","age":40,"streetAddress":"128","city":"Atlanta","state":"GEO","postalCode":"394221","phoneNumber":"6854634522"},{"id":7,"name":"Neil","lastName":"Walker","email":"walkerneil@baz.com","gender":"man","age":42,"streetAddress":"1","city":"Nashville","state":"TN","postalCode":90143,"phoneNumber":"45372788192"},{"id":9,"name":"eeeeererererer","lastName":"erererererer","email":"erere@gmail.com","gender":"man","city":"Gij\u00f3n","street":"123","state":"Asturias Province","age":"23","postalCode":"33202","phoneNumber":"666666666"},{"id":7,"name":"javier","lastName":"fernandez","email":"jfernandez@gmaail.com","gender":"man","city":"Galicia","street":"12345","state":"GA","age":"23","postalCode":"33324","phoneNumber":"6768989898"}]


--------------------------------------------------------------------------------
/resources/images_mock.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "name": "Yvonne Strahovski",
 4 |     "email": "yvonne.strahovski@gmail.com",
 5 |     "position": "Software Engineer",
 6 |     "photo": "https://m.media-amazon.com/images/M/MV5BMzI5NDIzNTQ1Nl5BMl5BanBnXkFtZTgwMjQ0Mzc1MTE@._V1_UY256_CR4,0,172,256_AL_.jpg"
 7 |   },
 8 |   {
 9 |     "name": "Mario Palmer",
10 |     "email": "mario.palmer@gmail.com",
11 |     "position": "Senior Developer",
12 |     "photo": "https://randomuser.me/api/portraits/men/33.jpg"
13 |   },
14 |   {
15 |     "name": "Ali Anari",
16 |     "email": "ali.anari@gmail.com",
17 |     "position": "Customer Service",
18 |     "photo": "https://pbs.twimg.com/profile_images/647526574120529920/T5rm0m7W.jpg"
19 |   },
20 |   {
21 |     "name": "Ariyanna Hicks",
22 |     "email": "ariyanna.hicks@gmail.com",
23 |     "position": "Product Designer",
24 |     "photo": "https://i.imgur.com/Qz5CrD0.jpg"
25 |   },
26 |   {
27 |     "name": "Jonathan Hung",
28 |     "email": "jonathan.hung@gmail.com",
29 |     "position": "Call Center Representative",
30 |     "photo": "https://pbs.twimg.com/profile_images/869994638110736385/CVYUarcq.jpg"
31 |   },
32 |   {
33 |     "name": "Andr\u00c3\u00a9 B\u00c3\u00a1rtolo",
34 |     "email": "andr\u00c3\u00a9.b\u00c3\u00a1rtolo@gmail.com",
35 |     "position": "Clerical",
36 |     "photo": "https://pbs.twimg.com/profile_images/1094979667143069696/QrD0ovrh.jpg"
37 |   },
38 |   {
39 |     "name": "Jennifer Aniston",
40 |     "email": "jennifer.aniston@gmail.com",
41 |     "position": "Customer Service",
42 |     "photo": "https://images-na.ssl-images-amazon.com/images/M/MV5BNjk1MjIxNjUxNF5BMl5BanBnXkFtZTcwODk2NzM4Mg@@._V1_UY256_CR3,0,172,256_AL_.jpg"
43 |   },
44 |   {
45 |     "name": "Temperance Norwood",
46 |     "email": "temperance.norwood@gmail.com",
47 |     "position": "Software Engineer",
48 |     "photo": "https://images.generated.photos/eL-OqIIteJK_ORyTXpJ96fDVgV_vY5PCvb0CfFGXMxs/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zLzAx/Njk3NTcuanBn.jpg"
49 |   },
50 |   {
51 |     "name": "",
52 |     "email": "@gmail.com",
53 |     "position": "Manager",
54 |     "photo": "https://images.pexels.com/photos/38554/girl-people-landscape-sun-38554.jpeg?auto=compress&cs=tinysrgb&h=350"
55 |   },
56 |   {
57 |     "name": "Jessica Barden",
58 |     "email": "jessica.barden@gmail.com",
59 |     "position": "Software Engineer",
60 |     "photo": "https://images-na.ssl-images-amazon.com/images/M/MV5BNzUwMjgxNTMyOF5BMl5BanBnXkFtZTcwMTIwNzU0NA@@._V1_UX172_CR0,0,172,256_AL_.jpg"
61 |   }
62 | ]
63 | 


--------------------------------------------------------------------------------
/resources/users.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "users": [
 3 |     {
 4 |       "userId": 1,
 5 |       "name": "admin",
 6 |       "password": "$2y$10$nuh1LEwFt7Q2/wz9/CmTJO91stTBS4cRjiJYBY3sVCARnllI.wzBC",
 7 |       "email": "admin@assemblerschool.com"
 8 |     }
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/dashboard.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | session_start()
 3 | ?>
 4 | 
 5 | 
 6 | <!DOCTYPE html>
 7 | <html lang="en">
 8 | <head>
 9 |     <meta charset="UTF-8">
10 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
12 |     <!-- Bootstrap CSS -->
13 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
14 | 
15 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
16 |     <link rel="stylesheet" href="../assets/css/main.css">
17 |     <link rel="stylesheet" href="../assets/css/dashboardStyle.css">
18 | 
19 | 
20 |     <script src="../assets/js/index.js" defer></script>
21 | 
22 |     <title>Dashboard</title>
23 | </head>
24 | 
25 | <body>
26 |     <nav class="navbar navbar-expand bg-light navbar__container">
27 |         <div class="container-fluid">
28 |             <a href="../assets/img/b.png" class="employeeSelector">10min to hit the Dark Side</a>
29 |             <div class="navbar">
30 |                 <a class="navlinks" aria-current="page"
31 |                     href="http://127.0.0.1/php-employee-management-v1/src/dashboard.php" >Dashboard</a>
32 |                 <a class="navlinks"
33 |                     href="http://127.0.0.1/php-employee-management-v1/src/employee.php">Employees</a>
34 |                 <a type="button" class="navlinks" id="logoutBtn" href="http://127.0.0.1/php-employee-management-v1/src/library/logout.php">LogOut</a>
35 |                 
36 |             </div>
37 |         </div>
38 |     </nav>
39 |     <main>
40 |         <table class="main__table">
41 |             <thead>
42 |                 <tr>
43 |                     <th  scope="col">Id</th>
44 |                     <th  scope="col">Name</th>
45 |                     <th  scope="col">Email</th>
46 |                     <th  scope="col">Age</th>
47 |                     <th  scope="col">Street</th>
48 |                     <th  scope="col">City</th>
49 |                     <th  scope="col">State</th>
50 |                     <th  scope="col">Postal Code</th>
51 |                     <th  scope="col">Phone Number</th>
52 |                     <th scope="col" id="addEmployee">&nbsp;<i class="fas fa-plus"></i></th>  
53 |                 </tr>
54 |             </thead>
55 |             <tbody id="usersContainer"></tbody>
56 |             <input type="hidden" name="action" value="listUsers">
57 |             
58 |         </table>
59 |     </main>
60 | 
61 | 
62 | </script>
63 | 
64 | 
65 | </body>
66 | 
67 | </html>


--------------------------------------------------------------------------------
/src/employee.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <script type="text/javascript" src="../assets/js/employeeForm.js" def></script>
 9 |     <script type="text/javascript" src="../assets/js/index.js" defer></script>
10 |     <link rel="stylesheet" href="../assets/css/login.css">
11 |     <link rel="stylesheet" href="../assets/css/main.css">
12 |     <link rel="stylesheet" href="../assets/css/normalize.css">
13 |     <link rel="stylesheet" href="../assets/css/contact.css">
14 |     <link rel="stylesheet" href="../assets/css/employeeStyle.css">
15 |     <title>Employee Form</title>
16 | 
17 | </head>
18 | 
19 | <body>
20 |     <div class="container">
21 |         <div class="row">
22 |             <div class="neworker">
23 |             <img src="../assets/img/worker.gif" alt="">
24 |             </div>
25 |             <div class="col-md-12">
26 |                 <h1 class="employeeForm">Employee Form</h1>
27 |                 <a href="http://127.0.0.1/php-employee-management-v1/src/dashboard.php">Back to Dashboard</a>
28 |             </div>
29 |         </div>
30 |         <div class="row">
31 |             <div class="col-md-12">
32 |                 <form id="employeeForm" action="../src/library/employeeController.php" method="POST">
33 |                     <div class="form-group">
34 |                         <label for="name">Name</label>
35 |                         <input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required>
36 |                     </div>
37 |                     <div class="form-group">
38 |                         <label for="lastName">Surname</label>
39 |                         <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Enter surname" required>
40 |                     </div>
41 |                     <div class="form-group">
42 |                         <label for="email">Email</label>
43 |                         <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
44 |                     </div>                   
45 |                     <div class="form-group">
46 |                         <label for="gender">Gender</label>
47 |                         <select name="gender" id="gender" class="form-control">
48 |                             <option value="man">Man</option>
49 |                             <option value="woman">Woman</option>
50 |                         </select>
51 |                     </div>
52 |                     <div class="form-group">
53 |                         <label for="city">City</label>
54 |                         <input type="text" class="form-control" id="city" name="city" placeholder="Enter address"  required>
55 |                     </div>
56 |                     <div class="form-group">
57 |                         <label for="street">Street Address</label>
58 |                         <input type="text" class="form-control" id="street" name="street" placeholder="Enter street address"  required>
59 |                     </div>
60 |                     <div class="form-group">
61 |                         <label for="state">State</label>
62 |                         <input type="text" class="form-control" id="state" name="state" placeholder="Enter state"  required>
63 |                     </div>
64 | 
65 |                     <div class="form-group">
66 |                         <label for="age">Age</label>
67 |                         <input type="text" class="form-control" id="age" name="age" placeholder="Enter age"  required>
68 |                     </div>
69 |                     <div class="form-group">
70 |                         <label for="postalCode">Postal Code</label>
71 |                         <input type="text" class="form-control" id="postalCode" name="postalCode" placeholder="Enter postal code"  required>
72 |                     </div>
73 |                     <div class="form-group">
74 |                         <label for="phoneNumber">Phone number</label>
75 |                         <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Enter phone number"  required>
76 |                     </div>
77 |                     <div class="form-group">
78 |                         <button class="sendBtn" type="submit" id="submit" name="submit">Create</button>
79 |                     </div>
80 |                     
81 |                 </form>
82 |             </div>
83 |         </div>
84 |     </div>
85 | 
86 | 
87 | </body>
88 | </html>
89 | 
90 | 
91 | 


--------------------------------------------------------------------------------
/src/imageGallery.php:
--------------------------------------------------------------------------------
1 | <!-- TODO If you are going to add the extra feature implement here the image selection as a gallery or whatever you like -->
2 | 


--------------------------------------------------------------------------------
/src/library/avatarsApi.php:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogSoulDev/php-employee-management-v1/214d582cdebf4d43e0f35957bd3af8e156104a6f/src/library/avatarsApi.php


--------------------------------------------------------------------------------
/src/library/employeeController.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 
 3 | require ('employeeManager.php');
 4 | 
 5 | $method = $_SERVER['REQUEST_METHOD'];
 6 | 
 7 | // echo "<pre>";
 8 | // print_r($_SERVER);
 9 | // echo "</pre>";
10 | 
11 | 
12 | if ($method === 'GET' && $_SERVER['QUERY_STRING'] === 'all_data'){
13 |    displayAllEmployees();
14 | }else if($method === 'GET' && isset($_GET['id'])){
15 |    $employeeId_array = getEmployee($_GET['id']);
16 |    $object = json_encode($employeeId_array);  
17 |    echo $object;
18 | }
19 | else if($method === 'DELETE'){
20 |    // echo "esto viene de controller {$_GET['id']}";
21 |    $employeeId_array = deleteEmployee($_GET['id']);
22 |    // $object = json_encode($employeeId_array);  
23 |    echo $employeeId_array;
24 | 
25 | } 
26 | 
27 | else if ($method === 'POST'){   
28 |    $newUser = array (
29 |       "id"=> getNextIdentifier(),
30 |       "name"=> $_POST['name'],
31 |       "lastName"=> $_POST['lastName'],
32 |       "email"=> $_POST['email'],
33 |       "gender"=> $_POST['gender'],
34 |       "city"=> $_POST['city'],
35 |       "street"=> $_POST['street'],
36 |       "state"=> $_POST['state'],
37 |       "age"=> $_POST['age'],
38 |       "postalCode"=> $_POST['postalCode'],
39 |       "phoneNumber"=> $_POST['phoneNumber']
40 |    );    
41 | 
42 |    addEmployee($newUser);   
43 |    phpAlert("Employee Successfully Saved!");
44 |    header("Location:../dashboard.php");   
45 | }
46 | 
47 | 
48 | 
49 | 
50 | // // $_GET['id'] = 1;
51 | // if ($method === 'GET' && isset($_GET['id'])){   
52 | //    $employeeId_array = getEmployee($_GET['id']);
53 | //    $object = json_encode($employeeId_array);  
54 | //    echo $object;
55 | 
56 | //    // print_r ($employeeId_array);
57 | //    // var_dump ($object);   
58 | // }
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | // $array = array("name" => "jose", "surname" => "Cuevas");
70 | // print_r ($array);
71 | 
72 | // $object = json_decode(json_encode($array));
73 | 
74 | // var_dump ($object);
75 | 
76 | 
77 | 
78 | //VOLHA EXAMPLE
79 | /* require_once('employeeManager.php');
80 | 
81 | if (isset ($_GET ['action']) && $_GET ['action'] == 'getAll') {
82 |      //echo "{'id':1}";
83 |     $data = getAllData();
84 |    echo (json_encode($data));
85 | }
86 |  */
87 | 
88 | 
89 | 
90 | ?>
91 | 


--------------------------------------------------------------------------------
/src/library/employeeManager.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | 
  4 | 
  5 | 
  6 | function addEmployee(array $newEmployee)
  7 | {
  8 |     // TODO implement it
  9 |     $json = file_get_contents("../../resources/employees.json");    
 10 |     $users_array = json_decode($json, true);
 11 | 
 12 |     
 13 |     array_push($users_array, $newEmployee);
 14 |     print_r($users_array);
 15 | 
 16 |     $json_string_modified = json_encode($users_array); 
 17 |     file_put_contents("../../resources/employees.json", $json_string_modified);
 18 | 
 19 |     
 20 |     
 21 |     return $json_string_modified;
 22 | 
 23 |     
 24 |     
 25 | 
 26 | }
 27 | 
 28 | // $newUser = array (
 29 | //     "id" => getNextIdentifier(),
 30 | //     "name" => "Jose",
 31 | //     "lastName"=> "Cuevas",
 32 | //     "email"=> "cuevas@network.com",
 33 | //     "gender"=> "man",
 34 | //     "city"=> "----",
 35 | //     "streetAddress"=> "126111",
 36 | //     "state"=> "AS",
 37 | //     "age"=> "234",
 38 | //     "postalCode"=> "11",
 39 | //     "phoneNumber"=> "22312237"
 40 | // );
 41 | 
 42 | // addEmployee($newUser);
 43 | 
 44 | 
 45 | function deleteEmployee(string $id)
 46 | {    
 47 |     $json = file_get_contents("../../resources/employees.json");    
 48 |     $users_array = json_decode($json, true);  
 49 | 
 50 |     foreach ($users_array as $user => $data){      
 51 | 
 52 |         // print_r ($users_array);        
 53 |         if ($data['id'] == $id){
 54 |             array_splice($users_array, $user, 1);
 55 |             // unset($users_array[$user]);
 56 |         }
 57 |     }
 58 |     $json_string_modified = json_encode($users_array); 
 59 |     file_put_contents("../../resources/employees.json", $json_string_modified);
 60 |     
 61 |     return $json_string_modified;
 62 | }
 63 | 
 64 | 
 65 | // deleteEmployee(2);
 66 | 
 67 | 
 68 | function updateEmployee(array $updateEmployee)
 69 | {
 70 | // TODO implement it
 71 | }
 72 | 
 73 | function getEmployee(string $id)
 74 | {
 75 | // TODO implement it
 76 |     $json = file_get_contents("../../resources/employees.json");
 77 |     $user_array = json_decode($json, true);  
 78 | 
 79 |     $employeeData = '';
 80 |     foreach($user_array as $user) {
 81 |         if($user['id'] == $id) {
 82 |             // print_r ($user);
 83 |             $employeeData = $user;            
 84 |         }
 85 |     }
 86 |         return $employeeData;
 87 | }
 88 | 
 89 | // getEmployee(45);
 90 | 
 91 | 
 92 | 
 93 | function removeAvatar($id)
 94 | {
 95 | // TODO implement it
 96 | }
 97 | 
 98 | 
 99 | function getQueryStringParameters(){
100 | // TODO implement it
101 | }
102 | 
103 | function getNextIdentifier(){
104 |     $json = file_get_contents("../../resources/employees.json");    
105 |     $users_array = json_decode($json, true);  
106 | 
107 |     $lastArrayKey = array_key_last($users_array);   
108 |     $nextId = $lastArrayKey + 2;
109 |     // print_r($nextId);
110 |     return $nextId;
111 | }
112 | 
113 | // Our functions
114 | function displayAllEmployees(){
115 |     $json = file_get_contents("../../resources/employees.json");
116 |     print_r ($json);
117 | }
118 | 
119 | function phpAlert(string $msg){
120 |     echo '<script type="text/javascript">alert("' . $msg . '")</script>';
121 | }
122 | ?>


--------------------------------------------------------------------------------
/src/library/loginController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | require './loginManager.php';
 3 | 
 4 | // checkLogin($_POST['username'], $_POST['password']);
 5 | 
 6 | echo "<pre>";
 7 | print_r($_SERVER);
 8 | echo "</pre>";
 9 | 
10 | 
11 | if($_SERVER['REQUEST_METHOD'] == "POST") {
12 |     checkLogin($_POST['username'], $_POST['password']);
13 | }else if($_SERVER['QUERY_STRING'] == "logout"){
14 |     // logout();
15 |     unset($_SESSION);
16 |     header("location: ../../index.php");
17 | }
18 | 
19 | 
20 | 
21 | 
22 | ?>


--------------------------------------------------------------------------------
/src/library/loginManager.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | 
 4 | function checkLogin($username, $password) {
 5 | $userData=json_decode(file_get_contents("../../resources/users.json"), true);
 6 | 
 7 | $userDataName =$userData['users'][0]['name'];
 8 | $userDataPassword =$userData['users'][0]['password'];
 9 | if ($username === $userDataName && password_verify($password, $userDataPassword)){
10 |     $_SESSION['username'];
11 |     header ("location: ../dashboard.php");
12 | } else {
13 |     header ("location: ../../index.php?error");
14 | }
15 | // echo "<pre>";
16 | // var_dump($userDataName, $userDataPassword);
17 | // echo "</pre>";
18 | }
19 | 
20 | function checkUrl ($get){
21 |     if(isset($get['error'])){
22 |         echo "<script>alert('Please try again later ');</script>";
23 |     }
24 | }
25 | 
26 | 
27 | ?>


--------------------------------------------------------------------------------
/src/library/logout.php:
--------------------------------------------------------------------------------
1 | <?php
2 | session_start();
3 | session_destroy();
4 | header("Location: http://127.0.0.1/php-employee-management-v1/index.php");
5 | exit;
6 | ?>


--------------------------------------------------------------------------------
/src/library/registerEmployee.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=, initial-scale=1.0">
 8 |     <script type="text/javascript" src="./assets/js/contactScript.js" def></script>
 9 |     <link rel="stylesheet" href="../../assets/css/login.css">
10 |     <link rel="stylesheet" href="../../assets/css/main.css">
11 |     <link rel="stylesheet" href="../../assets/css/normalize.css">
12 |     <link rel="stylesheet" href="../../assets/css/contact.css">
13 |     <link rel="stylesheet" href="../../assets/css/employeeStyle.css">
14 |     <title>Register Account</title>
15 | </head>
16 | 
17 | <body>
18 |     <main>
19 |         <section class="container">
20 |         <img class="onepunch" src="../../assets/img/c.png">
21 |         <form action="./loginController.php" method="POST">
22 |         <p class="register-in">Register  Employee Account</p>
23 |             <div class="input-container">
24 |                 <input type="email" id="email" name="email" placeholder="Email"
25 |                     pattern="^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$" maxlength="100" required>
26 |             </div>
27 |             <div class="input-container">
28 |                 <input type="password" id="password" name="password" placeholder="Password" required>
29 |                 <input type="password" id="confirmPassword" name="password" placeholder="Confirm password" required>
30 |             </div>
31 |             <script type="text/javascript" src="./assets/js/index.js" defer></script>
32 |             <button type="submit" class="register-btn">Register</button>
33 |             <p><a href="../../index.php">I already have an account.</a></p>
34 |         </form>
35 |         </section>
36 |                 <div class="footer-text">
37 |                     <p class="copy">&copy;Assembler Institute Barcelona all rights reserved 2022.</p>
38 |                     <a href="https://github.com/jose-cuevas">Jose Cuevas</a> &amp;<a
39 |                         href="https://github.com/DogSoulDev">Javier Fernández</a>
40 |                 </div>
41 |     </main>
42 |     <script src="/assets/js/index.js"></script>
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/src/library/sessionHelper.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if(time() - $_SESSION['timestamp'] > 10) { //subtract new timestamp from the old one
 3 |     echo"<script>alert('15 Minutes over!');</script>";
 4 |     unset($_SESSION['username'], $_SESSION['password'], $_SESSION['timestamp']);
 5 |     $_SESSION['logged_in'] = false;
 6 |     header("Location: http://127.0.0.1/php-employee-management-v1/src/library/logout.php/");//redirect to index.php
 7 |     exit;
 8 | } else {
 9 |     $_SESSION['timestamp'] = time(); //set new timestamp
10 | }
11 | ?>


--------------------------------------------------------------------------------