├── .gitignore
├── .nfs.2005102e.6c0c
├── README.md
├── assets
    ├── css
    │   ├── employee.css
    │   ├── login.css
    │   ├── main.css
    │   └── normalize.css
    ├── demo
    │   ├── demo-creating.gif
    │   ├── demo-deleting.gif
    │   └── demo-login.gif
    ├── html
    │   ├── footer.html
    │   └── header.html
    ├── img
    │   └── 3669361_delete_ic_icon.png
    └── js
    │   └── index.js
├── 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
        └── sessionHelper.php


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


--------------------------------------------------------------------------------
/.nfs.2005102e.6c0c:
--------------------------------------------------------------------------------
 1 | `#php` `#CRUD` `#master-in-software-engineering`
 2 | 
 3 | # PHP Employee manager application
 4 | 
 5 | ## About this project
 6 | 
 7 | In this project we demonstrate CRUD operation with PHP JSON and JS. The main goal was to learn how to make a fetch request from the client side using JS, receiving the request in PHP and CRUDing over the JSON file, sending it back to the front-end. 
 8 | 
 9 | 
10 | ## Getting Started
11 | 
12 | There's not too much to it, just make sure your machine is supporting a php development environment, if not you can download any of your favourite integrated development environment software such as [XAMPP](https://www.apachefriends.org/index.html) or [WAMP](https://www.wampserver.com/en/) if you are using Windows OS.
13 | 
14 | 
15 | ### Installing
16 | 
17 | After cloning make sure you copy all the files into htdocs in your local machine so you can see the output in your browser.
18 | Run your localhost with the cloned folder.
19 | 
20 | 
21 | ### Log in
22 | 
23 | In order to log in, use the following fake details:
24 | 
25 | ```
26 | Email: admin@assemblerschool.com
27 | Password: 123456
28 | ```
29 | 
30 | 
31 | ## Technologies and Libraries 
32 | 
33 | * PHP
34 | * JavaScript
35 | * HTML
36 | * CSS
37 | * [Sweet Alert 2](https://sweetalert2.github.io/)
38 | 
39 | 
40 | ## Demo
41 | 
42 | ![demo](https://user-images.githubusercontent.com/67965039/172650485-fc9c2150-f7c2-463c-9f37-c67bc905ed5e.gif)
43 | ![demo](https://user-images.githubusercontent.com/67965039/172650532-70f82347-73de-4aa5-a13d-c859dea4bc93.gif)
44 | ![demo](https://user-images.githubusercontent.com/67965039/172650498-c7511504-8fbb-46c1-a93f-642de4955097.gif)
45 | 
46 | ## Authors
47 | 
48 | [Sefi Cohen](https://github.com/seficohen1)
49 | 
50 | [Julio Macias](https://github.com/juliomc23)
51 | 
52 | 
53 | ## License
54 | 
55 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
56 | 
57 | ## Acknowledgments
58 | 
59 | <a href="https://gitmoji.dev">
60 |   <img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square" alt="Gitmoji">
61 | </a>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | `#php` `#CRUD` `#master-in-software-engineering`
 2 | 
 3 | # PHP Employee manager application
 4 | 
 5 | ## About this project
 6 | 
 7 | In this project we demonstrate CRUD operation with PHP JSON and JS. The main goal was to learn how to make a fetch request from the client side using JS, receiving the request in PHP and CRUDing over the JSON file, sending it back to the front-end. 
 8 | 
 9 | 
10 | ## Getting Started
11 | 
12 | There's not too much to it, just make sure your machine is supporting a php development environment, if not you can download any of your favourite integrated development environment software such as [XAMPP](https://www.apachefriends.org/index.html) or [WAMP](https://www.wampserver.com/en/) if you are using Windows OS.
13 | 
14 | 
15 | ### Installing
16 | 
17 | After cloning make sure you copy all the files into htdocs in your local machine so you can see the output in your browser.
18 | Run your localhost with the cloned folder.
19 | 
20 | 
21 | ### Log in
22 | 
23 | In order to log in, use the following fake details:
24 | 
25 | ```
26 | Email: admin@assemblerschool.com
27 | Password: 123456
28 | ```
29 | 
30 | 
31 | ## Technologies and Libraries 
32 | 
33 | * PHP
34 | * JavaScript
35 | * HTML
36 | * CSS
37 | * [Sweet Alert 2](https://sweetalert2.github.io/)
38 | 
39 | 
40 | ## Demo
41 | 
42 | ![demo](https://user-images.githubusercontent.com/67965039/172650485-fc9c2150-f7c2-463c-9f37-c67bc905ed5e.gif)
43 | ![demo](https://user-images.githubusercontent.com/67965039/172650532-70f82347-73de-4aa5-a13d-c859dea4bc93.gif)
44 | ![demo](https://user-images.githubusercontent.com/67965039/172650498-c7511504-8fbb-46c1-a93f-642de4955097.gif)
45 | 
46 | ## Authors
47 | 
48 | [Sefi Cohen](https://github.com/seficohen1)
49 | 
50 | [Julio Macias](https://github.com/juliomc23)
51 | 
52 | 
53 | ## License
54 | 
55 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
56 | 
57 | ## Acknowledgments
58 | 
59 | <a href="https://gitmoji.dev">
60 |   <img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square" alt="Gitmoji">
61 | </a>


--------------------------------------------------------------------------------
/assets/css/employee.css:
--------------------------------------------------------------------------------
 1 | @import url(./normalize.css);
 2 | @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400&display=swap');
 3 | 
 4 | :root {
 5 |   --primary: #143F6B;
 6 |   --secondary: #F55353;
 7 |   --terciary: #FEB139;
 8 |   --cuaternary: #F6F54D;
 9 | }
10 | 
11 | .main__content{
12 |     height: 100vh;
13 |     width: 100%;
14 |     display: flex;
15 |     justify-content: center;
16 |     align-items: center;
17 |     background-color: var(--primary);
18 |     font-family: 'Mulish', sans-serif;
19 | }
20 | 
21 | .formEl__edit{
22 |     width: 75%;
23 |     height: 75%;
24 |     display: flex;
25 |     flex-wrap: wrap;
26 |     justify-content: space-around;
27 |     align-items: center;
28 |     background-color: var(--terciary);
29 |     border-radius: 0.5rem;
30 | }
31 | 
32 | input{
33 |     height: 2rem;
34 |     background-color: white;
35 |     border: none;
36 |     font-weight: bold;
37 |     text-align: left;
38 |     letter-spacing: 0.1rem;
39 |     text-align: center;
40 |     border-radius: 0.5rem;
41 |     outline: none;
42 |     font-size: 1.3rem;
43 |     width: 15rem;
44 | }
45 | 
46 | .div__inputLabel{
47 |     width: 30%;
48 |     height: 5rem;
49 |     display: flex;
50 |     flex-direction: column;
51 |     justify-content: space-around;
52 |     align-items: center;
53 | }
54 | 
55 | label{
56 |     cursor: pointer;
57 |     font-weight: bold;
58 |     letter-spacing: 0.1rem;
59 | }
60 | 
61 | .button__change{
62 |     border: none;
63 |     background-color: var(--primary);
64 |     color: white;
65 |     font-weight: bold;
66 |     height: 2.2rem;
67 |     width: 5rem;
68 |     border-radius: 1rem;
69 |     cursor: pointer;
70 |     transition: all 300ms;
71 | }
72 | 
73 | .button__change:hover{
74 |     transform: scale(1.1);
75 |     background-color: #17538f;
76 | }


--------------------------------------------------------------------------------
/assets/css/login.css:
--------------------------------------------------------------------------------
 1 | @import url(./normalize.css);
 2 | @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400&display=swap');
 3 | 
 4 | :root{
 5 |     --primary: #143F6B;
 6 |     --secondary: #F55353;
 7 |     --terciary: #FEB139;
 8 |     --cuaternary: #F6F54D;
 9 | }
10 | 
11 | 
12 | .main__section{
13 |     height: 100vh;
14 |     display: flex;
15 |     flex-direction: column;
16 |     justify-content: center;
17 |     align-items: center;
18 |     background-color: var(--primary);
19 |     font-family: 'Mulish', sans-serif;
20 | }
21 | 
22 | .main__form{
23 |     border: 1px solid black;
24 |     height: 10rem;
25 |     width: 30rem;
26 |     display: flex;
27 |     flex-direction: column;
28 |     justify-content: center;
29 |     align-items: center;
30 |     background-color: var(--secondary);
31 |     border-radius: 1rem;
32 | }
33 | 
34 | .name__input{
35 |     width: 75%;
36 |     height: 25%;
37 |     padding-left: 1rem;
38 |     border: none;
39 |     border-bottom: 0.5px solid #ccc;
40 |     border-top-left-radius: 1rem;
41 |     border-top-right-radius: 1rem;
42 |     outline: none;
43 | }
44 | 
45 | .pass__input{
46 |     width: 75%;
47 |     height: 25%;
48 |     padding-left: 1rem;
49 |     border: none;
50 |     border-top: none;
51 |     border-bottom-left-radius: 1rem;
52 |     border-bottom-right-radius: 1rem;
53 |     outline: none;
54 | }
55 | 
56 | .login__input{
57 |     margin-top: 1rem;
58 |     height: 2rem;
59 |     width: 5rem;
60 |     background-color: var(--terciary);
61 |     font-weight: bold;
62 |     transition: all 300ms;
63 |     border-radius: 1rem;
64 | }
65 | 
66 | .login__input:hover{
67 |     cursor: pointer;
68 |     transform: scale(1.1);
69 | }
70 | 
71 | .alert__span{
72 |     margin-top: 2rem;
73 |     color: white;
74 |     text-transform: uppercase;
75 |     letter-spacing: 0.2rem;
76 |     font-weight: bold;
77 | }


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
  1 | @import url(./normalize.css);
  2 | @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400&display=swap');
  3 | 
  4 | :root {
  5 |   --primary: #143F6B;
  6 |   --secondary: #F55353;
  7 |   --terciary: #FEB139;
  8 |   --cuaternary: #F6F54D;
  9 | }
 10 | 
 11 | 
 12 | .toggle {
 13 |   display: none;
 14 | }
 15 | 
 16 | 
 17 | .fade-out {
 18 |   -webkit-animation: fade-out 1s ease-out 1.5s both;
 19 |   animation: fade-out 1s ease-out 1.5s both;
 20 | }
 21 | 
 22 | @-webkit-keyframes fade-out {
 23 |   0% {
 24 |     opacity: 1;
 25 |   }
 26 | 
 27 |   100% {
 28 |     opacity: 0;
 29 |   }
 30 | }
 31 | 
 32 | @keyframes fade-out {
 33 |   0% {
 34 |     opacity: 1;
 35 |   }
 36 | 
 37 |   100% {
 38 |     opacity: 0;
 39 |   }
 40 | }
 41 | 
 42 | .main__container {
 43 |   height: 100vh;
 44 |   font-family: 'Mulish', sans-serif;
 45 | }
 46 | 
 47 | .employee_table {
 48 |   width: 100%;
 49 |   height: 100%;
 50 |   text-align: center;
 51 | }
 52 | 
 53 | .thead__table{
 54 |   width: 100%;
 55 |   color: var(--primary);
 56 |   height: 4rem;
 57 | }
 58 | 
 59 | .trow__tableHead{
 60 |   width: 100%;
 61 | }
 62 | 
 63 | .thead__col{
 64 |   width: 12%;
 65 |   font-weight: bold;
 66 |   font-size: 1.1rem;
 67 | }
 68 | 
 69 | .addEmp__button{
 70 |   height: 2rem;
 71 |   width: 2rem;
 72 |   display: flex;
 73 |   justify-content: center;
 74 |   align-items: center;
 75 |   font-size: 2rem;
 76 |   padding-bottom: 0.35rem;
 77 |   font-weight: bold;
 78 |   background-color: transparent;
 79 |   background-color: green;
 80 |   color: white;
 81 |   border: none;
 82 |   border-radius: 10rem;
 83 |   cursor: pointer;
 84 | }
 85 | 
 86 | .delete__Button{
 87 |   background-color: transparent;
 88 |   color: var(--secondary);
 89 |   border: none;
 90 |   cursor: pointer;
 91 | }
 92 | 
 93 | .edit__button{
 94 |   color: var(--primary);
 95 |   text-decoration: none;
 96 |   margin-right: 1.2rem;
 97 | }
 98 | 
 99 | .createEmp__button{
100 |   background-color: transparent;
101 |   border: none;
102 |   cursor: pointer;
103 | }
104 | 
105 | .delete__Button{
106 |   background-image: url('../img/3669361_delete_ic_icon.png');
107 |   height: 24px;
108 |   width: 24px;
109 |   background-color: transparent;
110 |   color: var(--secondary);
111 |   border: none;
112 |   cursor: pointer;
113 | }
114 | 
115 | .fa-check{
116 |   color: green;
117 |   font-size: 2rem;
118 |   transition: all 300ms;
119 | }
120 | 
121 | 
122 | .fa-check:hover{
123 |   color: rgb(1, 202, 1);
124 |   font-size: 2rem;
125 | }
126 | 
127 | input{
128 |   padding-left: 0.3rem;
129 |   /* text-transform: capitalize; */
130 |   outline: none;
131 |   border: 1px solid black;
132 | }
133 | 
134 | 
135 | 
136 | .fa-pen-to-square {
137 |     width: 24px;
138 |     height: 24px;
139 | }


--------------------------------------------------------------------------------
/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 { /* 1 */
178 |   overflow: visible;
179 | }
180 | 
181 | /**
182 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 |  * 1. Remove the inheritance of text transform in Firefox.
184 |  */
185 | 
186 | button,
187 | select { /* 1 */
188 |   text-transform: none;
189 | }
190 | 
191 | /**
192 |  * Correct the inability to style clickable types in iOS and Safari.
193 |  */
194 | 
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 |   -webkit-appearance: button;
200 | }
201 | 
202 | /**
203 |  * Remove the inner border and padding in Firefox.
204 |  */
205 | 
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 |   border-style: none;
211 |   padding: 0;
212 | }
213 | 
214 | /**
215 |  * Restore the focus styles unset by the previous rule.
216 |  */
217 | 
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 |   outline: 1px dotted ButtonText;
223 | }
224 | 
225 | /**
226 |  * Correct the padding in Firefox.
227 |  */
228 | 
229 | fieldset {
230 |   padding: 0.35em 0.75em 0.625em;
231 | }
232 | 
233 | /**
234 |  * 1. Correct the text wrapping in Edge and IE.
235 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
236 |  * 3. Remove the padding so developers are not caught out when they zero out
237 |  *    `fieldset` elements in all browsers.
238 |  */
239 | 
240 | legend {
241 |   box-sizing: border-box; /* 1 */
242 |   color: inherit; /* 2 */
243 |   display: table; /* 1 */
244 |   max-width: 100%; /* 1 */
245 |   padding: 0; /* 3 */
246 |   white-space: normal; /* 1 */
247 | }
248 | 
249 | /**
250 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 |  */
252 | 
253 | progress {
254 |   vertical-align: baseline;
255 | }
256 | 
257 | /**
258 |  * Remove the default vertical scrollbar in IE 10+.
259 |  */
260 | 
261 | textarea {
262 |   overflow: auto;
263 | }
264 | 
265 | /**
266 |  * 1. Add the correct box sizing in IE 10.
267 |  * 2. Remove the padding in IE 10.
268 |  */
269 | 
270 | [type="checkbox"],
271 | [type="radio"] {
272 |   box-sizing: border-box; /* 1 */
273 |   padding: 0; /* 2 */
274 | }
275 | 
276 | /**
277 |  * Correct the cursor style of increment and decrement buttons in Chrome.
278 |  */
279 | 
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 |   height: auto;
283 | }
284 | 
285 | /**
286 |  * 1. Correct the odd appearance in Chrome and Safari.
287 |  * 2. Correct the outline style in Safari.
288 |  */
289 | 
290 | [type="search"] {
291 |   -webkit-appearance: textfield; /* 1 */
292 |   outline-offset: -2px; /* 2 */
293 | }
294 | 
295 | /**
296 |  * Remove the inner padding in Chrome and Safari on macOS.
297 |  */
298 | 
299 | [type="search"]::-webkit-search-decoration {
300 |   -webkit-appearance: none;
301 | }
302 | 
303 | /**
304 |  * 1. Correct the inability to style clickable types in iOS and Safari.
305 |  * 2. Change font properties to `inherit` in Safari.
306 |  */
307 | 
308 | ::-webkit-file-upload-button {
309 |   -webkit-appearance: button; /* 1 */
310 |   font: inherit; /* 2 */
311 | }
312 | 
313 | /* Interactive
314 |    ========================================================================== */
315 | 
316 | /*
317 |  * Add the correct display in Edge, IE 10+, and Firefox.
318 |  */
319 | 
320 | details {
321 |   display: block;
322 | }
323 | 
324 | /*
325 |  * Add the correct display in all browsers.
326 |  */
327 | 
328 | summary {
329 |   display: list-item;
330 | }
331 | 
332 | /* Misc
333 |    ========================================================================== */
334 | 
335 | /**
336 |  * Add the correct display in IE 10+.
337 |  */
338 | 
339 | template {
340 |   display: none;
341 | }
342 | 
343 | /**
344 |  * Add the correct display in IE 10.
345 |  */
346 | 
347 | [hidden] {
348 |   display: none;
349 | }
350 | 


--------------------------------------------------------------------------------
/assets/demo/demo-creating.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliomc23/php-employee-management-v1/f317c9bf5968397c91d4cb573ff88430227109b2/assets/demo/demo-creating.gif


--------------------------------------------------------------------------------
/assets/demo/demo-deleting.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliomc23/php-employee-management-v1/f317c9bf5968397c91d4cb573ff88430227109b2/assets/demo/demo-deleting.gif


--------------------------------------------------------------------------------
/assets/demo/demo-login.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliomc23/php-employee-management-v1/f317c9bf5968397c91d4cb573ff88430227109b2/assets/demo/demo-login.gif


--------------------------------------------------------------------------------
/assets/html/footer.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliomc23/php-employee-management-v1/f317c9bf5968397c91d4cb573ff88430227109b2/assets/html/footer.html


--------------------------------------------------------------------------------
/assets/html/header.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliomc23/php-employee-management-v1/f317c9bf5968397c91d4cb573ff88430227109b2/assets/html/header.html


--------------------------------------------------------------------------------
/assets/img/3669361_delete_ic_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliomc23/php-employee-management-v1/f317c9bf5968397c91d4cb573ff88430227109b2/assets/img/3669361_delete_ic_icon.png


--------------------------------------------------------------------------------
/assets/js/index.js:
--------------------------------------------------------------------------------
  1 | // GLOBAL VARIABLES
  2 | const tableBodyEl = document.getElementById('table-body');
  3 | const table = document.getElementById('table');
  4 | const addNewEmpBtnEl = document.getElementById('addNewEmp');
  5 | const createEmpButton = document.getElementById('createEmpButton');
  6 | const empFormInputs = document.querySelectorAll('[form-emp]');
  7 | 
  8 | 
  9 | // Functions
 10 | 
 11 | 
 12 | 
 13 | const getEmps = async () => {
 14 |     const res = await fetch('.././src/library/employeeController.php');
 15 |     const data = await res.json()
 16 |   
 17 |     return data;
 18 |   }
 19 | const deleteEmpId = (e) => {
 20 | 
 21 |     const btnId = e.currentTarget.getAttribute('data');
 22 | 
 23 |     Swal.fire({
 24 |         title: 'Are you sure?',
 25 |         text: "You won't be able to revert this!",
 26 |         icon: 'warning',
 27 |         showCancelButton: true,
 28 |         confirmButtonColor: '#3085d6',
 29 |         cancelButtonColor: '#d33',
 30 |         confirmButtonText: 'Yes, delete it!'
 31 |     }).then((result) => {
 32 |         if (result.isConfirmed) {
 33 |             const sendReq = async () => {
 34 |                 const req = await fetch(`.././src/library/employeeController.php`, {
 35 |                     method: 'DELETE',
 36 |                     body: JSON.stringify(+btnId)
 37 |                 });
 38 |                 const res = await req.json()
 39 |             }
 40 |             sendReq();
 41 |             clearRow(e);
 42 |             Swal.fire(
 43 |                 'Deleted!',
 44 |                 'Your file has been deleted.',
 45 |                 'success'
 46 |             )
 47 | 
 48 | 
 49 |         }
 50 |     })
 51 | 
 52 | }
 53 |   
 54 | // Toggeling add button 
 55 | const addEmpFormHandler = () => {
 56 | 
 57 |     const addEmployeeForm = document.getElementById('addEmployeeForm');
 58 |     addEmployeeForm.classList.toggle('toggle');
 59 | 
 60 |     if (addEmployeeForm.classList == 'toggle') {
 61 |         addNewEmpBtnEl.textContent = '+'
 62 |         addNewEmpBtnEl.style.background = "green";
 63 |     } else {
 64 |         addNewEmpBtnEl.textContent = 'x';
 65 |         addNewEmpBtnEl.style.background = "#F55353";
 66 |     }
 67 | 
 68 | }
 69 | const createNewEmp = async (e) => {
 70 |     e.preventDefault();
 71 |     const validation = await validateForm();
 72 |     const newEmp = getEmpFormValues();
 73 |     if(!validation){
 74 |         Swal.fire({
 75 |             icon: 'error',
 76 |             title: 'Oops...',
 77 |             text: 'Please verify all details are correct and that your email does not exsit already',
 78 |           })
 79 |     }else{
 80 |         const req = await fetch(`.././src/library/employeeController.php`, {
 81 |             method: 'POST',
 82 |             body: JSON.stringify(newEmp),
 83 |             headers: {
 84 |                 'Content-Type': 'application/json'
 85 |             }
 86 |         });
 87 |         clearTable()
 88 |         clearForm();
 89 |         Swal.fire(
 90 |             'Success!',
 91 |             'Employee was added correctly',
 92 |             'success'
 93 |           )
 94 |         showEmp();
 95 |     }
 96 |   }
 97 | 
 98 | function createTableRowWihtEmp(id, name, email, age, streetAddress, city, state, postalCode, phoneNumber) {
 99 |     const trEl = document.createElement('tr')
100 | 
101 |     const nameData = document.createElement('td');
102 |     nameData.textContent = name;
103 | 
104 |     const emailData = document.createElement('td');
105 |     emailData.textContent = email;
106 | 
107 |     const ageData = document.createElement('td');
108 |     ageData.textContent = age;
109 | 
110 |     const street_nData = document.createElement('td');
111 |     street_nData.textContent = streetAddress;
112 | 
113 |     const cityData = document.createElement('td');
114 |     cityData.textContent = city;
115 | 
116 |     const stateData = document.createElement('td');
117 |     stateData.textContent = state;
118 | 
119 |     const postalData = document.createElement('td');
120 |     postalData.textContent = postalCode;
121 | 
122 | 
123 |     const phoneData = document.createElement('td');
124 |     phoneData.textContent = phoneNumber;
125 | 
126 | 
127 |     const deleteBtnEl = document.createElement('td');
128 |     const btn = document.createElement('button');
129 |     btn.setAttribute('data', id)
130 |     btn.setAttribute('class', 'delete__Button')
131 | 
132 |     deleteBtnEl.appendChild(btn);
133 | 
134 |     const editBtnEl = document.createElement('td');
135 |     const editBtn = document.createElement('a')
136 |     const iconEditEl = document.createElement('i');
137 |     editBtn.setAttribute('href', `.././src/library/employeeController.php?id=${id}`)
138 |     editBtn.setAttribute('class', 'edit__button')
139 |     iconEditEl.setAttribute('class', 'fa-solid fa-pen-to-square')
140 | 
141 |     editBtn.append(iconEditEl)
142 |     editBtnEl.appendChild(editBtn);
143 | 
144 | 
145 |     trEl.appendChild(nameData);
146 |     trEl.appendChild(emailData);
147 |     trEl.appendChild(ageData);
148 |     trEl.appendChild(street_nData);
149 |     trEl.appendChild(cityData);
150 |     trEl.appendChild(stateData);
151 |     trEl.appendChild(postalData);
152 |     trEl.appendChild(phoneData);
153 |     trEl.appendChild(deleteBtnEl);
154 |     trEl.appendChild(editBtnEl);
155 | 
156 | 
157 |     return trEl;
158 | }
159 | 
160 | 
161 | const showEmp = async () => {
162 |     const emps = await getEmps();
163 |     
164 |     emps.map(emp => {
165 |         const { id, name, email, age, streetAddress, city, state, postalCode, phoneNumber, gender, lastName } = emp;
166 |         const empRow = createTableRowWihtEmp(id, name, email, age, streetAddress, city, state, postalCode, phoneNumber, gender, lastName);
167 |         tableBodyEl.appendChild(empRow);
168 |     })
169 |     const btnsdelete = document.querySelectorAll('[data]')
170 |     btnsdelete.forEach(btn => btn.addEventListener('click', deleteEmpId));
171 | 
172 | }
173 | 
174 | const clearForm = () => {
175 |     const newEmpFormEl = document.getElementById('addEmployeeForm');
176 |     Array.from(newEmpFormEl.children).map(el => {
177 |         Array.from(el.children).forEach(el => el.value = '')
178 |     })
179 |     newEmpFormEl.classList.toggle('toggle');
180 |     addNewEmpBtnEl.textContent = '+';
181 | }
182 | 
183 | 
184 | const clearRow = (e) => {
185 | 
186 |     if (table.hasChildNodes()) {
187 |         tableBodyEl.removeChild(e.target.parentElement.parentElement)
188 |     }
189 | }
190 | 
191 | const clearTable = () => {
192 |     Array.from(tableBodyEl.children).map(el => {
193 |         if(!el.hasAttribute('id')) {
194 |             tableBodyEl.removeChild(el)
195 |         }
196 |     })
197 | }
198 | 
199 | 
200 | const getEmpFormValues = () => {
201 | 
202 |     const id = document.getElementById('id').value = '';
203 |     const name = document.getElementById('name').value;
204 |     const lastName = document.getElementById('lastName').value = '';
205 |     const gender = document.getElementById('gender').value = '';
206 |     const email = document.getElementById('email').value;
207 |     const age = document.getElementById('age').value;
208 |     const streetAddress = document.getElementById('streetAddress').value;
209 |     const city = document.getElementById('city').value;
210 |     const state = document.getElementById('state').value;
211 |     const postalCode = document.getElementById('postalCode').value;
212 |     const phoneNumber = document.getElementById('phoneNumber').value;
213 | 
214 |     const data = {
215 |         id, name, lastName, email, age, gender, streetAddress, city, state, postalCode, phoneNumber
216 |     }
217 | 
218 |     return data;
219 | }
220 | 
221 | // Validation helpers
222 | 
223 | const validateForm = async () => {
224 |     const validationArr = new Array()
225 | 
226 |     const name = empFormInputs[0]
227 |     const email = empFormInputs[1]
228 |     const age = empFormInputs[2]
229 |     const streetAddress = empFormInputs[3]
230 |     const city = empFormInputs[4]
231 |     const state = empFormInputs[5]
232 |     const postalCode = empFormInputs[6]
233 |     const phoneNumber = empFormInputs[7]
234 | 
235 |     const regex = {
236 |         emailReg: /^\w+([\.-\_]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, //checking for correct address
237 |         firstNameReg: /^[a-zA-ZÀ-ÿ\s]{1,20}$/, // not allwoing numbers
238 |         ageReg: /^(1[89]|[2-9]\d)$/, // age from 18 - 99
239 |         phoneNumberReg: /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/, // allowing coutnry code and (-)
240 |         addressReg: /[A-Za-z0-9'\.\-\s\,]/, // eliminates symbols which are not part of an address
241 |         cityReg: /^[a-zA-Z\u0080-\u024F\s\/\-\)\(\`\.\"\']+$/, // allowing cities with special carachters
242 |         stateReg: /^[a-zA-Z\u0080-\u024F\s\/\-\)\(\`\.\"\']+$/, // allowing states with special carachters
243 |     }
244 |     
245 |     const { emailReg, firstNameReg, ageReg, addressReg, cityReg, stateReg, phoneNumberReg } = regex;
246 |     if(firstNameReg.test(name.value)){
247 |         validationArr.push(true)
248 |     }
249 |     if(emailReg.test(email.value)){
250 |         const isEmailDuplicated = await checkEmail(email.value)
251 |         if(isEmailDuplicated) {
252 |             validationArr.push(true)
253 |         }
254 |        
255 |     }
256 |     if(ageReg.test(age.value)) {
257 |         validationArr.push(true)
258 |     }
259 |     if(addressReg.test(streetAddress.value)) {
260 |         validationArr.push(true)
261 |     }
262 |     if(cityReg.test(city.value)) {
263 |         validationArr.push(true)
264 |     }
265 |     if(stateReg.test(state.value)) {
266 |         validationArr.push(true)
267 |     }
268 |     if(phoneNumberReg.test(phoneNumber.value)) {
269 |         validationArr.push(true)
270 |     }
271 |     if(postalCode.value.length != 0) {
272 |         validationArr.push(true)
273 |     }
274 | 
275 |     return validationArr.length == 8 ? true : false;
276 | }
277 | 
278 | const checkEmail = async (email) => {
279 |     let isEmailOK = false;
280 |     const emps = await getEmps();
281 |     emps.forEach(emp => {
282 |         const {email: dbEmail} = emp
283 |         const comparedEmail = email.trim()
284 |         if(dbEmail === comparedEmail) {
285 |             isEmailOK = false
286 |         } else {
287 |             isEmailOK = true
288 |         }
289 |     })
290 |     return isEmailOK;
291 | }
292 | 
293 | 
294 | 
295 | // events
296 | 
297 | 
298 | 
299 | addNewEmpBtnEl.addEventListener('click', addEmpFormHandler);
300 | 
301 | createEmpButton.addEventListener('click', createNewEmp)
302 | 
303 | 
304 | 
305 | //  on load
306 | showEmp();
307 | 
308 | 
309 | 
310 | 
311 | 
312 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <!-- TODO Application entry point. Login view -->
 2 | <?php
 3 | session_start();
 4 | 
 5 | $msg;
 6 | if (isset($_GET['login'])) {
 7 |     $msg = 'Your login was not correct';
 8 | } else {
 9 |     $msg = '';
10 | }
11 | 
12 | if (isset($_SESSION['name'])) {
13 |     header('location: ./src/dashboard.php');
14 | }
15 | ?>
16 | <!DOCTYPE html>
17 | <html lang="en">
18 | 
19 | <head>
20 |     <meta charset="UTF-8">
21 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
22 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
23 |     <title>Document</title>
24 |     <link href="./assets/css/login.css" rel="stylesheet">
25 |     <script src="./assets/js/index.js" type="module"></script>
26 | </head>
27 | 
28 | <body>
29 |     <main class="main__section">
30 |         <form action="./src/library/loginController.php" method="POST" class="main__form">
31 |             <input type="email" name="email" placeholder="Email" class="name__input">
32 |             <input type="password" name="password" placeholder="Password" class="pass__input">
33 |             <input type="submit" value="Login" class="login__input">
34 |         </form>
35 |         <span class="alert__span"><?= $msg ?></span>
36 |     </main>
37 | </body>
38 | 
39 | </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": "^4.5.0",
 13 |         "bootstrap-icons": "^1.0.0-alpha4",
 14 |         "jquery": "^3.5.1",
 15 |         "jsgrid": "^1.5.3",
 16 |         "sweetalert2": "^11.4.17"
 17 |       }
 18 |     },
 19 |     "node_modules/bootstrap": {
 20 |       "version": "4.6.1",
 21 |       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
 22 |       "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
 23 |       "funding": {
 24 |         "type": "opencollective",
 25 |         "url": "https://opencollective.com/bootstrap"
 26 |       },
 27 |       "peerDependencies": {
 28 |         "jquery": "1.9.1 - 3",
 29 |         "popper.js": "^1.16.1"
 30 |       }
 31 |     },
 32 |     "node_modules/bootstrap-icons": {
 33 |       "version": "1.8.3",
 34 |       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.3.tgz",
 35 |       "integrity": "sha512-s5kmttnbq4BXbx3Bwnj39y+t7Vc3blTtyD77W3aYQ1LlNoS3lNbbGvSYhIbg26Im8KmjScyFpHEevlPOBcIDdA=="
 36 |     },
 37 |     "node_modules/jquery": {
 38 |       "version": "3.6.0",
 39 |       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
 40 |       "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
 41 |     },
 42 |     "node_modules/jsgrid": {
 43 |       "version": "1.5.3",
 44 |       "resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
 45 |       "integrity": "sha512-/BJgQp7gZe8o/VgNelwXc21jHc9HN+l7WPOkBhC9b9jPXFtOrU9ftNLPVBmKYCNlIulAbGTW8SDJI0mpw7uWxQ=="
 46 |     },
 47 |     "node_modules/popper.js": {
 48 |       "version": "1.16.1",
 49 |       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
 50 |       "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
 51 |       "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
 52 |       "peer": true,
 53 |       "funding": {
 54 |         "type": "opencollective",
 55 |         "url": "https://opencollective.com/popperjs"
 56 |       }
 57 |     },
 58 |     "node_modules/sweetalert2": {
 59 |       "version": "11.4.17",
 60 |       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.17.tgz",
 61 |       "integrity": "sha512-z0iQW5fDdvtoDNle3iHTKunsuNWgPaMifVu0GPtdguR0uVPrvg9gg9bnSQeJ4tx3C7FwJOEnRshxrs6fFItRvw==",
 62 |       "funding": {
 63 |         "type": "individual",
 64 |         "url": "https://sweetalert2.github.io/#donations"
 65 |       }
 66 |     }
 67 |   },
 68 |   "dependencies": {
 69 |     "bootstrap": {
 70 |       "version": "4.6.1",
 71 |       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
 72 |       "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
 73 |       "requires": {}
 74 |     },
 75 |     "bootstrap-icons": {
 76 |       "version": "1.8.3",
 77 |       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.3.tgz",
 78 |       "integrity": "sha512-s5kmttnbq4BXbx3Bwnj39y+t7Vc3blTtyD77W3aYQ1LlNoS3lNbbGvSYhIbg26Im8KmjScyFpHEevlPOBcIDdA=="
 79 |     },
 80 |     "jquery": {
 81 |       "version": "3.6.0",
 82 |       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
 83 |       "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
 84 |     },
 85 |     "jsgrid": {
 86 |       "version": "1.5.3",
 87 |       "resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
 88 |       "integrity": "sha512-/BJgQp7gZe8o/VgNelwXc21jHc9HN+l7WPOkBhC9b9jPXFtOrU9ftNLPVBmKYCNlIulAbGTW8SDJI0mpw7uWxQ=="
 89 |     },
 90 |     "popper.js": {
 91 |       "version": "1.16.1",
 92 |       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
 93 |       "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
 94 |       "peer": true
 95 |     },
 96 |     "sweetalert2": {
 97 |       "version": "11.4.17",
 98 |       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.17.tgz",
 99 |       "integrity": "sha512-z0iQW5fDdvtoDNle3iHTKunsuNWgPaMifVu0GPtdguR0uVPrvg9gg9bnSQeJ4tx3C7FwJOEnRshxrs6fFItRvw=="
100 |     }
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/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": "^4.5.0",
13 |     "bootstrap-icons": "^1.0.0-alpha4",
14 |     "jquery": "^3.5.1",
15 |     "jsgrid": "^1.5.3",
16 |     "sweetalert2": "^11.4.17"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/resources/employees.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "id": 4,
 4 |         "name": "Richard",
 5 |         "lastName": "Desmond",
 6 |         "email": "dismond@foo.com",
 7 |         "gender": "man",
 8 |         "age": 30,
 9 |         "streetAddress": "90",
10 |         "city": "Salt lake city",
11 |         "state": "UT",
12 |         "postalCode": "457320",
13 |         "phoneNumber": "90876987654"
14 |     },
15 |     {
16 |         "id": 5,
17 |         "name": "Susan",
18 |         "lastName": "Smith",
19 |         "email": "susanmith@baz.com",
20 |         "gender": "woman",
21 |         "age": 28,
22 |         "streetAddress": "43",
23 |         "city": "Louisville",
24 |         "state": "KNT",
25 |         "postalCode": "445321",
26 |         "phoneNumber": "224355488976"
27 |     },
28 |     {
29 |         "id": 1735063706210515,
30 |         "name": "Josephi",
31 |         "lastName": "Cohen",
32 |         "email": "rackjackson@gmail.com",
33 |         "age": 22,
34 |         "gender": "male",
35 |         "streetAddress": "asasas",
36 |         "city": "sas",
37 |         "state": "Madrid",
38 |         "postalCode": "s",
39 |         "phoneNumber": "asasas"
40 |     },
41 |     {
42 |         "id": 8,
43 |         "name": "Robert",
44 |         "lastName": "Thomson",
45 |         "email": "jackon@network.com",
46 |         "gender": "man",
47 |         "age": 24,
48 |         "streetAddress": "126",
49 |         "city": "New Orleans",
50 |         "state": "LU",
51 |         "postalCode": "63281",
52 |         "phoneNumber": "91232876454"
53 |     }
54 | ]


--------------------------------------------------------------------------------
/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 |     {
 3 |       "userId": 1,
 4 |       "name": "admin",
 5 |       "password": "$2y$10$nuh1LEwFt7Q2/wz9/CmTJO91stTBS4cRjiJYBY3sVCARnllI.wzBC",
 6 |       "email": "admin@assemblerschool.com"
 7 |     }
 8 | ]
 9 | 
10 | 


--------------------------------------------------------------------------------
/src/dashboard.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | 
 4 | 
 5 | require '../src/library/sessionHelper.php';
 6 | 
 7 | if (!isset($_SESSION['name'])) {
 8 |   header('location: .././index.php');
 9 | }
10 | 
11 | if(isset($_SESSION['name'])) {
12 |   $timeOut = 600;
13 |   ini_set('session.gc_maxlifetime', $timeOut);
14 |   if (isset($_SESSION['start']) && (time() - $_SESSION['start'] > $timeOut)) {
15 |    closeSession();
16 |    
17 | }
18 | 
19 | }
20 | 
21 |     
22 | ?>
23 | 
24 | <!DOCTYPE html>
25 | <html lang="en">
26 | 
27 | <head>
28 |   <meta charset="UTF-8">
29 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
30 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
31 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
32 |   <script src="../assets/js/index.js" type="module" defer></script>
33 |   <link href="../assets/css/main.css" rel="stylesheet">
34 |   <script src="https://kit.fontawesome.com/ae63adffc0.js" crossorigin="anonymous" defer></script>
35 |   <!-- <script src="//cdn.jsdelivr.net/npm/sweetalert2@11" type="module"></script> -->
36 |   <title>Document</title>
37 | </head>
38 | 
39 | <body>
40 |   <?php
41 |   //   if (isset($_GET['updated'])) {
42 |   //     echo "<div class='alert alert-success fade-out' role='alert'>
43 |   //   The employee has been update
44 |   // </div>";
45 |   //   }
46 | 
47 |   ?>
48 |   <div class="main__container">
49 |     <table class="employee_table" id="table">
50 |       <thead class="thead__table">
51 |         <tr class="trow__tableHead">
52 |           <th class="thead__col">Name</th>
53 |           <th class="thead__col">Email</th>
54 |           <th class="thead__col">Age</th>
55 |           <th class="thead__col">Street No</th>
56 |           <th class="thead__col">City</th>
57 |           <th class="thead__col">State</th>
58 |           <th class="thead__col">Postal Code</th>
59 |           <th class="thead__col">Phone Number</th>
60 |           <th class="thead__col">
61 |             <button id='addNewEmp' class="addEmp__button">+</button>
62 |           </th>
63 |         </tr>
64 |       </thead>
65 |       <tbody id='table-body' class="tbody__table">
66 |         <tr id="addEmployeeForm" class="toggle">
67 |           <!-- <form action="./library/employeeController.php" method="POST" enctype="multipart/form-data"> -->
68 |           <form id="addEmpForm" method="POST" enctype="multipart/form-data" class="newEmpForm__table">
69 |             <input type="hidden" name="id" id="id" value="" placeholder="">
70 |             <td><input type="text" name="name" id="name" class="name__input" value="" placeholder="name" form-emp require></td>
71 |             <input type="hidden" name="lastName" id="lastName" value="" placeholder="lastname">
72 |             <input type="hidden" name="gender" id="gender" value="" placeholder="gender">
73 |             <td><input type="email" name="email" id="email" class="email__input" value="" placeholder="email" form-emp require></td>
74 |             <td><input type="text" name="age" id="age" value="" class="age__input" placeholder="Age" form-emp require></td>
75 |             <td><input type="text" name="streetAddress" id="streetAddress" class="address__input" value="" form-emp placeholder="Street Address" require></td>
76 |             <td><input type="text" name="city" id="city" value="" class="city__input" placeholder="city" form-emp require></td>
77 |             <td><input type="text" name="state" id="state" value="" class="state__input" placeholder="State" form-emp require></td>
78 |             <td><input type="text" name="postalCode" id="postalCode" value="" class="postalCode__input" form-emp placeholder="Postal Code" require></td>
79 |             <td><input type="text" name="phoneNumber" id="phoneNumber" value="" class="nphone__input" form-emp placeholder="Phone Number" require></td>
80 |             <td><button type="submit" id="createEmpButton" class="createEmp__button"><i class="fa-solid fa-check"></i></button></td>
81 |           </form>
82 |         </tr>
83 |       </tbody>
84 |     </table>
85 |   </div>
86 |   <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
87 |   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
88 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> -->
89 | 
90 |   <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
91 | </body>
92 | 
93 | </html>


--------------------------------------------------------------------------------
/src/employee.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if (isset($_GET['id'])) {
 3 |     $id = $_GET['id'];
 4 | 
 5 |     require('./library/employeeManager.php');
 6 | 
 7 |     $db = getEmployee($id);
 8 | 
 9 |     $name = $db['name'];
10 |     $lastName = $db['lastName'];
11 |     $email = $db['email'];
12 |     $age = $db['age'];
13 |     $gender = $db['gender'];
14 |     $streetAddress = $db['streetAddress'];
15 |     $city = $db['city'];
16 |     $state = $db['state'];
17 |     $postalCode = $db['postalCode'];
18 |     $phoneNumber = $db['phoneNumber'];
19 | }
20 | ?>
21 | 
22 | 
23 | <!DOCTYPE html>
24 | <html lang="en">
25 | 
26 | <head>
27 |     <meta charset="UTF-8">
28 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
29 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
30 |     <link href="../assets/css/employee.css" rel="stylesheet">
31 |     <title>Document</title>
32 | </head>
33 | 
34 | <body>
35 |     <main class="main__content">
36 |         <form action="../src/library/employeeController.php" method="POST" enctype="multipart/form-data" class="formEl__edit">
37 |             <!-- dynamic id here -->
38 |             <input type="hidden" name="id" id="" value="<?= $id ?>" placeholder="">
39 | 
40 |             <div class="div__inputLabel">
41 |                 <label for="name">Name</label>
42 |                 <input type="text" name="name" id="name" value="<?= $name ?>" placeholder="name">
43 |             </div>
44 | 
45 |             <div class="div__inputLabel">
46 |                 <label for="lastName">Lastname</label>
47 |                 <input type="text" name="lastName" id="lastName" value="<?= $lastName ?>" placeholder="Last Name">
48 |             </div>
49 | 
50 |             <div class="div__inputLabel">
51 |                 <label for="email">Email</label>
52 |                 <input type="email" name="email" id="email" value="<?= $email ?>" placeholder="email">
53 |             </div>
54 | 
55 |             <div class="div__inputLabel">
56 |                 <label for="gender">Gender</label>
57 |                 <input type="text" name="gender" id="gender" value="<?= $gender ?>" placeholder="gender">
58 |             </div>
59 | 
60 |             <div class="div__inputLabel">
61 |                 <label for="city">City</label>
62 |                 <input type="text" name="city" id="city" value="<?= $city ?>" placeholder="city">
63 |             </div>
64 | 
65 |             <div class="div__inputLabel">
66 |                 <label for="streetAddress">Street Address</label>
67 |                 <input type="text" name="streetAddress" id="streetAddress" value="<?= $streetAddress ?>" placeholder="Street Address">
68 |             </div>
69 | 
70 |             <div class="div__inputLabel">
71 |                 <label for="state">State</label>
72 |                 <input type="text" name="state" id="state" value="<?= $state ?>" placeholder="State">
73 |             </div>
74 | 
75 |             <div class="div__inputLabel">
76 |                 <label for="age">Age</label>
77 |                 <input type="text" name="age" id="age" value="<?= $age ?>" placeholder="Age">
78 |             </div>
79 | 
80 |             <div class="div__inputLabel">
81 |                 <label for="postalCode">Postal Code</label>
82 |                 <input type="text" name="postalCode" id="postalCode" value="<?= $postalCode ?>" placeholder="Postal Code">
83 |             </div>
84 | 
85 |             <div class="div__inputLabel">
86 |                 <label for="phoneNumber">Phone Number</label>
87 |                 <input type="text" name="phoneNumber" id="phoneNumber" value="<?= $phoneNumber ?>" placeholder="Phone Number">
88 |             </div>
89 | 
90 | 
91 |             <button type="submit" id="updateEmployeeButton" class="button__change">Change</button>
92 |         </form>
93 |     </main>
94 | 
95 |     <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
96 | 
97 | </body>
98 | 
99 | </html>


--------------------------------------------------------------------------------
/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/juliomc23/php-employee-management-v1/f317c9bf5968397c91d4cb573ff88430227109b2/src/library/avatarsApi.php


--------------------------------------------------------------------------------
/src/library/employeeController.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | require('./employeeManager.php');
 3 | 
 4 | $req = $_SERVER['REQUEST_METHOD'];
 5 | 
 6 |     $db = getQueryStringParameters(); 
 7 |     echo json_encode($db);
 8 | 
 9 | switch ($req) {
10 |     case $req == 'DELETE': 
11 |         $inputdata = file_get_contents("php://input");
12 |         $data = json_decode($inputdata);
13 |     
14 |         deleteEmployee($data);
15 |         break;
16 |     case $req == 'POST': 
17 | 
18 |         $inputdata = file_get_contents("php://input");
19 |         $data = json_decode($inputdata, true);
20 | 
21 |         var_dump($data);
22 | 
23 |         if(isset($data['id'])){
24 |             addEmployee($data);
25 |             break;
26 |         }
27 | 
28 |         if($_POST['id'] != ''){
29 |             updateEmployee($_POST);
30 |             header('location: .././dashboard.php');
31 |         }
32 | 
33 |     case $req == 'GET':
34 |         if(isset($_GET['id'])){
35 |             header('Location: .././employee.php?id='.$_GET['id'].'');
36 |         }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/library/employeeManager.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /**
  4 |  * EMPLOYEE FUNCTIONS LIBRARY
  5 |  *
  6 |  * @author: Jose Manuel Orts
  7 |  * @date: 11/06/2020
  8 |  */
  9 | 
 10 | function addEmployee(array $newEmployee)
 11 | {
 12 |     $newEmployee['id'] = hexdec(uniqid());
 13 | 
 14 | 
 15 |     $db = getQueryStringParameters();
 16 |     array_push($db, $newEmployee);
 17 |     $db = json_encode($db);
 18 |     file_put_contents('../.././resources/employees.json', $db);
 19 | }
 20 | 
 21 | 
 22 | 
 23 | function deleteEmployee($id)
 24 | {
 25 |     $db = getQueryStringParameters();
 26 |     $modifiedDb = array();
 27 |     foreach ($db as $key => $value) {
 28 |         if ($value['id'] === $id) {
 29 |             unset($db[$key]);
 30 |         }
 31 |     }
 32 |     $modifiedDb = array_values($db);
 33 |     $modifiedDb = json_encode($modifiedDb, JSON_PRETTY_PRINT);
 34 |     file_put_contents('../.././resources/employees.json', $modifiedDb);
 35 |     return $modifiedDb;
 36 | }
 37 | 
 38 | 
 39 | 
 40 | function updateEmployee(array $updateEmployeeId)
 41 | {
 42 |     // TODO implement it
 43 |     $db = getQueryStringParameters();
 44 | 
 45 |     foreach ($db as $key => $value) {
 46 | 
 47 |         if ($value['id'] === intval($updateEmployeeId['id'])) {
 48 |             
 49 |             $db[$key]['name'] = $updateEmployeeId['name'];
 50 |             $db[$key]['lastName'] = $updateEmployeeId['lastName'];
 51 |             $db[$key]['email'] = $updateEmployeeId['email'];
 52 |             $db[$key]['gender'] = $updateEmployeeId['gender'];
 53 |             $db[$key]['city'] = $updateEmployeeId['city'];
 54 |             $db[$key]['streetAddress'] = $updateEmployeeId['streetAddress'];
 55 | 
 56 |             $db[$key]['state'] = $updateEmployeeId['state'];
 57 |             $db[$key]['age'] = intval($updateEmployeeId['age']);
 58 |             $db[$key]['postalCode'] = $updateEmployeeId['postalCode'];
 59 |             $db[$key]['phoneNumber'] = $updateEmployeeId['phoneNumber'];
 60 |         }
 61 |     }
 62 | 
 63 |     file_put_contents('../.././resources/employees.json', json_encode($db, JSON_PRETTY_PRINT));
 64 |     return $db;
 65 | }
 66 | 
 67 | 
 68 | function getEmployee(string $id)
 69 | {
 70 |     // TODO implement it
 71 |     $json = file_get_contents('.././resources/employees.json');
 72 |     $data = json_decode($json, true);
 73 |     
 74 |     foreach($data as $key => $value){
 75 |         
 76 |         if(intval($id) === $value['id']){
 77 |             return $value;
 78 |         }
 79 |     }
 80 | }
 81 | 
 82 | 
 83 | // function removeAvatar($id)
 84 | // {
 85 | // // TODO implement it
 86 | // }
 87 | 
 88 | 
 89 | function getQueryStringParameters(): array
 90 | {
 91 |     $json = file_get_contents('../.././resources/employees.json');
 92 |     $data = json_decode($json, true);
 93 |     return $data;
 94 | }
 95 | 
 96 | // function getNextIdentifier(array $employeesCollection): int
 97 | // {
 98 | // // TODO implement it
 99 | // }
100 | 


--------------------------------------------------------------------------------
/src/library/loginController.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | require('./loginManager.php');
4 | 
5 | $req = $_SERVER['REQUEST_METHOD'];
6 | 
7 | if($req == 'POST'){
8 |     login();
9 | }


--------------------------------------------------------------------------------
/src/library/loginManager.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | function login()
 4 | {
 5 | 
 6 |     $data = getUser();
 7 | 
 8 |     $email = $_POST['email'];
 9 |     $password = $_POST['password'];
10 | 
11 |     foreach ($data as $key => $value) {
12 |         if ($value['email'] === $email && password_verify($password, $value['password'])) {
13 |             session_start();
14 |             $_SESSION['name'] = $value['name'];
15 |             $_SESSION['start'] = time();
16 |             header('location: .././dashboard.php');
17 |         } else {
18 |             header('location: ../.././index.php?login=false');
19 |         }
20 |     }
21 | }
22 | 
23 | 
24 | function getUser()
25 | {
26 | 
27 |     $file = file_get_contents('../.././resources/users.json');
28 |     $data = json_decode($file, true);
29 | 
30 |     return $data;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/library/sessionHelper.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | 
 4 | function closeSession() {
 5 | 
 6 |     session_start();
 7 |     unset($_SESSION);
 8 |     if (ini_get("session.use_cookies")) {
 9 |         $params = session_get_cookie_params();
10 |         setcookie(
11 |             session_name(),
12 |             '',
13 |             time() - 42000,
14 |             $params["path"],
15 |             $params["domain"],
16 |             $params["secure"],
17 |             $params["httponly"]
18 |         );
19 |     }
20 |     session_destroy();
21 |   }
22 | 
23 | 
24 | 
25 | 


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