tobiloba Chelsea - Lucid
Team Enigma - Tutorial On The Sign Up And Log In Page (Task)

Introduction: Hello Everyone! We present to you a complete tutorial on the construction of the team’s SIGN UP as well as LOGIN page. For this tutorial team Enigma will be sharing with you how we created a simple SIGN UP as well as LOGIN page by utilizing various software such as Html, CSS, and Figma etc...

Team Enigma - Tutorial On The Sign Up And Log In Page (Task)

Introduction: Hello Everyone! We present to you a complete tutorial on the construction of the team’s SIGN UP as well as LOGIN page. For this tutorial team Enigma will be sharing with you how we created a simple SIGN UP as well as LOGIN page by utilizing various software such as Html, CSS, and Figma etc...

Team Enigma - Tutorial on the Sign Up and Log In page (Task)

Hello Everyone! We present to you a complete tutorial on the construction of the team’s SIGN UP as well as LOGIN page. For this tutorial team Enigma will be sharing with you how we created a simple SIGN UP as well as LOGIN page by utilizing various software such as Html, CSS, and Figma etc. **Aim/Objective of task:** The aim of the task is to construct a team of 10 members, comprising of the Front-end, back-end developers and design track, after which each member in a team would collaborate to design a login page, code the login page making use of necessary software alongside multiple languages (JavaScript and PHP) to generate a basic authentication for the login page. **Task Approach:** Working as a team have never been a strong suit of many, but seeing as we, in team Enigma has been paired, necessitated by the need to bring a project to life, we have tried and succeeded to make it work, even amidst disagreement and moots on what the final product should look like. Everyone in the team has surely found him/herself useful in various capacities in trying to bring the project to fruition. In all the sweat, back and forth, we have put together something exceptional that as a team, we can call our own, and the details of this project will be limned in the following paragraph: **DESIGNER PROTOTYPE (BY DESIGN TEAM)** The first objective of our task was to design a prototype that would be used for the proposed website. The team was involved in designing a prototype for the login and sign up page. The login and sign up page was designed by 6 of our best designers (that is, from the back-end and front-end in collaboration with our design team) came up with a unique design for the sign up and login page (team work), by making use of the Figma App, which is a prototyping design and code-generation tool, possessing robust features to support team working on phases of design process.  ![](https://lh6.googleusercontent.com/6TIeohK00F7elMTPL8QLEmojH_Ep2RcHnH_oiYbqe-q9t2KLXkp_EKLDXeOlvfWmdX0HjiGJLy0JsCSWQBT1n7rvQmmV83sifqeXBMiEreiAmxZ46WuDSnZSiP7rOvYmZFMkW_nF4WtvOi-jMw) **Figure 1: The Power of Figma** After deliberating/voting on the most appropriate design to utilize we proceeded to the next phase of the task. The images below represents the two (2) designs which were created and finalized by the design team. Our concentration for this prototype is to utilize the current coding systems to bring the design to life and ensure proper functionality as we proceed. **SIGN UP PAGE DESIGN ** **![](https://lh3.googleusercontent.com/ooZajcZY5Qgyj1gWWv9xkpkIl2_M8hSnLFem1K7w78CUWLesb86PcYuUwz8sTHizJLhR71duZbWzftMMZ-WUqRhx4-Gx4YgTHFU4mTfmHUgWWMm_G1G96F7W9cGGD7G83No9ApEjgZ36_PEG9A)** **PROTOTYPE OF LOGIN PAGE ** ![](https://lh4.googleusercontent.com/TAsDySnSauDZxln1aEiIS3aQ1WD-Y89f96Y7uzLL6Whqv3JHb1j3RUE8lv6shI9NXgKUntctKcNxjun6_0szjB45xRfgWC44tL24vHV2RsySGKmcYVmrUkC5hmwISeTrbnaQHGUcI9hU8z3Wkw) ### ### **FRONT END PHASE (BY THE** **FRONT END** **DEVELOPERS)** The front-end was developed utilizing HTML5 (Hypertext Markup Language), a software solution stack that defines the properties and behaviors of the web page content by implementing a markup based pattern to it, as well as CSS (Cascading Style Sheet), this was responsible for describing how the HTML elements are to be displayed on the screen. Attached below are the steps taken to develop the front end phase of the task. **  STEP ONE: Replication Using HTML** * Team Enigma Figma design prototype was replicated using HTML, by running on our choice of text editor in this case we used Visual studio Code and Sublime. With the design at hand we created an HTML code to define the properties and behavior of the web page content.  * The HTML was used to create the form tag, which is used to collect information that will be saved by using PHP/JavaScript **STEP TWO: CSS (Cascading Style Sheet)** The Front-end team proceeded to coding the structure of the LOGIN PAGE and SIGN UP page to be displayed in a web browser; we made use of the CSS to make the site more responsive and beautiful. Next, we created our CSS file, which was further linked to our login.html file. ![](https://lh5.googleusercontent.com/1ou0hUDfB0L3rww5AbSm_q9VuWQL4hsygHqisQTZPx8CFWEu5rihVHeiig6mIwraa_dencAO9hNvuOGGt9z3GAGN_fbzHJ-YPsU366DAuoUFbtjNwgOw4EId6gxmUIH2PisUoTTTK8EX3-bClg) **STEP THREE: Front -End validation of Login form** Team Enigma front-end validation, was carried out in order to prevent the user from submitting blank login/sign up details. **![](https://lh4.googleusercontent.com/RA6AVvOBdYUIXzsaZ3rKy7ila0qomxuwowR5KXhmUhmNKDY-oXqhjfAVLJAiu1i0gVmv6hQkFkm50HMg_w30YOr2u2T3fTO83eb8EiUxuNUrJxuMvjJRVxwwVljtUtc3i916hoBX)** ### **BACK END PHASE (BY THE** **BACK-END** **DEVELOPERS)** The back end developers were responsible for building and maintaining the technical aspect that is needed to power up the components and make them responsive, which allow the user-facing side of the web to exist. Our Back-end developers were responsible for creating, maintaining, debugging and testing the entire back end. This phase of the task was carried out using the PHP programming language. **Below Is a Systematic Instruction On How The Back-End Team Created The** **Back-end** **Using PHP.** 1. Firstly, the back-end team used a conditional statement to check if user actually submitted the form containing their registration username and password. 2. Then the back-end team assigned a variable to store user registration username and password. 3. Followed by loading the file to store user registration username and password. 4. However, before the user registration username and password was added into the database text file, it was important that we checked to see if user is trying to register with a username that already exists in the database, if true then user gets an error message. If false then user registration username and password is been added to our database. 5. Because user registration username and password is stored in a text file, we then decided to give users extra protection by converting their password to a secured hash. So when someone visits the database file they will see usernames of registered members but will not be able to read the password of registered members. 6. Once the user completes the registration, they will be redirected to the login page with a message informing them that registration was successful. ![](https://lh5.googleusercontent.com/K89KWAaFWZCORc_rfBmT11glDguU-H_loNF3dji_rQ6JQwA7uODFweqtKa6Ya75xcaM_s-dnKXTwckrDGedB5X5uy7nUYWOZhm6PdY78B9uUET_I3wcEbGTa3xo5YoaQ4A3BA8WMqaz-bjmA5A) 7.On the login page, a few conditional statements was also used to check if user entered their password and username correctly. If any of the two is wrong then an error message is displayed warning them about the cause. 8.But if the user enters the correct username and password then they will be redirected to the index/main page, a cookie is also created to store the username so we can use it to welcome them to the index/main page. 9.In addition, because of what the project is created for we decided to set cookie expiration time to 1 hour, which means user will be automatically logged out after 1 hour. 10.That is a quick summary of what happened in the back-end of the project. There were not any difficulties faced when coding the back-end, the only difficulty faced was trying to balance rigorous daily activities with coding, which lead to the extension of project completion.  **CHALLENGES FACED BY DEVELOPERS** **Problem Faced:** 1\. Understanding and interpreting the design.                      2\. Debugging.                                                                         3\. Poor planning of code.         4\. Communication.               5\. Working with another person’s code. 6\. Keeping up with the various technologies. **Solutions:** **1. Understanding and interpreting the design:** It is often difficult for new programmers to understand what the design entails especially the colors, fonts and layout uses by the designers. It was important for the front-end developers to understand the design in details before interpreting the design in code. It is best practice if the front-end developer structure the code in easy and readable format for future references. **2\. Debugging:** The good news is that bugs are common in programming. In fact, even the best-written code can have them, and they can be fixed. As a programmer, incorporating debugging strategies can help you, too. The best way to easily debug your codes are a good debugging strategy, Reproduce the error and getting help when possible. **3. Poor planning of code:** Time spent on unplanned code is time wasted. To avoid such a scenario, put ideas on paper rather than carrying them around in your head. Before a code is written, the developer should know the purpose of the code and its application in real life situation  **4. Communication:** Poor communication is a problem that most developers face at some point. In addition, the worst part is that it can cause conflicts in the workplace. The best way to solve this is to be proactive and get accustomed to the workplace culture faster. **5. Working with another person’s code:** It might be difficult reading and understanding someone’s code. Fixing this issue means changing your attitude towards the code and realise that it is your code now. Spend some time understanding how the other developer worked, both their approach and style. You will have an easier time adapting to the code once you have done that. **6\. Keeping up with the various technologies:** As technology continues to grow and expand, developers need to keep up. Frameworks, tools, and libraries become outdated quickly. The best way is Keep up with the latest trends and taking some time to learn new systems. **CONCLUSION** Despite the fact that we faced quite a lot of challenges, from time management, communication, PHCN interference etc.because of teamwork we were able to synergize together to produce a unique design/work.  For Team Enigma, working as a team has enabled us to learn from each other’s mistakes, this will enable us to avoid future errors/mistakes, gain more insight from various perspectives, and also learn new concepts from experienced interns. This task has also helped us improve our communication skills, workplace synergy and innovative capacity to problems. With this and more Team Enigma were able to collaborate effectively, promote a more efficient work output and also complete tasks faster to produce a down-to-earth piece of work. **THANK YOU!**

Team Enigma - Tutorial on the Sign Up and Log In page (Task)

Hello Everyone! We present to you a complete tutorial on the construction of the team’s SIGN UP as well as LOGIN page. For this tutorial team Enigma will be sharing with you how we created a simple SIGN UP as well as LOGIN page by utilizing various software such as Html, CSS, and Figma etc. **Aim/Objective of task:** The aim of the task is to construct a team of 10 members, comprising of the Front-end, back-end developers and design track, after which each member in a team would collaborate to design a login page, code the login page making use of necessary software alongside multiple languages (JavaScript and PHP) to generate a basic authentication for the login page. **Task Approach:** Working as a team have never been a strong suit of many, but seeing as we, in team Enigma has been paired, necessitated by the need to bring a project to life, we have tried and succeeded to make it work, even amidst disagreement and moots on what the final product should look like. Everyone in the team has surely found him/herself useful in various capacities in trying to bring the project to fruition. In all the sweat, back and forth, we have put together something exceptional that as a team, we can call our own, and the details of this project will be limned in the following paragraph: **DESIGNER PROTOTYPE (BY DESIGN TEAM)** The first objective of our task was to design a prototype that would be used for the proposed website. The team was involved in designing a prototype for the login and sign up page. The login and sign up page was designed by 6 of our best designers (that is, from the back-end and front-end in collaboration with our design team) came up with a unique design for the sign up and login page (team work), by making use of the Figma App, which is a prototyping design and code-generation tool, possessing robust features to support team working on phases of design process.  ![](https://lh6.googleusercontent.com/6TIeohK00F7elMTPL8QLEmojH_Ep2RcHnH_oiYbqe-q9t2KLXkp_EKLDXeOlvfWmdX0HjiGJLy0JsCSWQBT1n7rvQmmV83sifqeXBMiEreiAmxZ46WuDSnZSiP7rOvYmZFMkW_nF4WtvOi-jMw) **Figure 1: The Power of Figma** After deliberating/voting on the most appropriate design to utilize we proceeded to the next phase of the task. The images below represents the two (2) designs which were created and finalized by the design team. Our concentration for this prototype is to utilize the current coding systems to bring the design to life and ensure proper functionality as we proceed. **SIGN UP PAGE DESIGN ** **![](https://lh3.googleusercontent.com/ooZajcZY5Qgyj1gWWv9xkpkIl2_M8hSnLFem1K7w78CUWLesb86PcYuUwz8sTHizJLhR71duZbWzftMMZ-WUqRhx4-Gx4YgTHFU4mTfmHUgWWMm_G1G96F7W9cGGD7G83No9ApEjgZ36_PEG9A)** **PROTOTYPE OF LOGIN PAGE ** ![](https://lh4.googleusercontent.com/TAsDySnSauDZxln1aEiIS3aQ1WD-Y89f96Y7uzLL6Whqv3JHb1j3RUE8lv6shI9NXgKUntctKcNxjun6_0szjB45xRfgWC44tL24vHV2RsySGKmcYVmrUkC5hmwISeTrbnaQHGUcI9hU8z3Wkw) ### ### **FRONT END PHASE (BY THE** **FRONT END** **DEVELOPERS)** The front-end was developed utilizing HTML5 (Hypertext Markup Language), a software solution stack that defines the properties and behaviors of the web page content by implementing a markup based pattern to it, as well as CSS (Cascading Style Sheet), this was responsible for describing how the HTML elements are to be displayed on the screen. Attached below are the steps taken to develop the front end phase of the task. **  STEP ONE: Replication Using HTML** * Team Enigma Figma design prototype was replicated using HTML, by running on our choice of text editor in this case we used Visual studio Code and Sublime. With the design at hand we created an HTML code to define the properties and behavior of the web page content.  * The HTML was used to create the form tag, which is used to collect information that will be saved by using PHP/JavaScript **STEP TWO: CSS (Cascading Style Sheet)** The Front-end team proceeded to coding the structure of the LOGIN PAGE and SIGN UP page to be displayed in a web browser; we made use of the CSS to make the site more responsive and beautiful. Next, we created our CSS file, which was further linked to our login.html file. ![](https://lh5.googleusercontent.com/1ou0hUDfB0L3rww5AbSm_q9VuWQL4hsygHqisQTZPx8CFWEu5rihVHeiig6mIwraa_dencAO9hNvuOGGt9z3GAGN_fbzHJ-YPsU366DAuoUFbtjNwgOw4EId6gxmUIH2PisUoTTTK8EX3-bClg) **STEP THREE: Front -End validation of Login form** Team Enigma front-end validation, was carried out in order to prevent the user from submitting blank login/sign up details. **![](https://lh4.googleusercontent.com/RA6AVvOBdYUIXzsaZ3rKy7ila0qomxuwowR5KXhmUhmNKDY-oXqhjfAVLJAiu1i0gVmv6hQkFkm50HMg_w30YOr2u2T3fTO83eb8EiUxuNUrJxuMvjJRVxwwVljtUtc3i916hoBX)** ### **BACK END PHASE (BY THE** **BACK-END** **DEVELOPERS)** The back end developers were responsible for building and maintaining the technical aspect that is needed to power up the components and make them responsive, which allow the user-facing side of the web to exist. Our Back-end developers were responsible for creating, maintaining, debugging and testing the entire back end. This phase of the task was carried out using the PHP programming language. **Below Is a Systematic Instruction On How The Back-End Team Created The** **Back-end** **Using PHP.** 1. Firstly, the back-end team used a conditional statement to check if user actually submitted the form containing their registration username and password. 2. Then the back-end team assigned a variable to store user registration username and password. 3. Followed by loading the file to store user registration username and password. 4. However, before the user registration username and password was added into the database text file, it was important that we checked to see if user is trying to register with a username that already exists in the database, if true then user gets an error message. If false then user registration username and password is been added to our database. 5. Because user registration username and password is stored in a text file, we then decided to give users extra protection by converting their password to a secured hash. So when someone visits the database file they will see usernames of registered members but will not be able to read the password of registered members. 6. Once the user completes the registration, they will be redirected to the login page with a message informing them that registration was successful. ![](https://lh5.googleusercontent.com/K89KWAaFWZCORc_rfBmT11glDguU-H_loNF3dji_rQ6JQwA7uODFweqtKa6Ya75xcaM_s-dnKXTwckrDGedB5X5uy7nUYWOZhm6PdY78B9uUET_I3wcEbGTa3xo5YoaQ4A3BA8WMqaz-bjmA5A) 7.On the login page, a few conditional statements was also used to check if user entered their password and username correctly. If any of the two is wrong then an error message is displayed warning them about the cause. 8.But if the user enters the correct username and password then they will be redirected to the index/main page, a cookie is also created to store the username so we can use it to welcome them to the index/main page. 9.In addition, because of what the project is created for we decided to set cookie expiration time to 1 hour, which means user will be automatically logged out after 1 hour. 10.That is a quick summary of what happened in the back-end of the project. There were not any difficulties faced when coding the back-end, the only difficulty faced was trying to balance rigorous daily activities with coding, which lead to the extension of project completion.  **CHALLENGES FACED BY DEVELOPERS** **Problem Faced:** 1\. Understanding and interpreting the design.                      2\. Debugging.                                                                         3\. Poor planning of code.         4\. Communication.               5\. Working with another person’s code. 6\. Keeping up with the various technologies. **Solutions:** **1. Understanding and interpreting the design:** It is often difficult for new programmers to understand what the design entails especially the colors, fonts and layout uses by the designers. It was important for the front-end developers to understand the design in details before interpreting the design in code. It is best practice if the front-end developer structure the code in easy and readable format for future references. **2\. Debugging:** The good news is that bugs are common in programming. In fact, even the best-written code can have them, and they can be fixed. As a programmer, incorporating debugging strategies can help you, too. The best way to easily debug your codes are a good debugging strategy, Reproduce the error and getting help when possible. **3. Poor planning of code:** Time spent on unplanned code is time wasted. To avoid such a scenario, put ideas on paper rather than carrying them around in your head. Before a code is written, the developer should know the purpose of the code and its application in real life situation  **4. Communication:** Poor communication is a problem that most developers face at some point. In addition, the worst part is that it can cause conflicts in the workplace. The best way to solve this is to be proactive and get accustomed to the workplace culture faster. **5. Working with another person’s code:** It might be difficult reading and understanding someone’s code. Fixing this issue means changing your attitude towards the code and realise that it is your code now. Spend some time understanding how the other developer worked, both their approach and style. You will have an easier time adapting to the code once you have done that. **6\. Keeping up with the various technologies:** As technology continues to grow and expand, developers need to keep up. Frameworks, tools, and libraries become outdated quickly. The best way is Keep up with the latest trends and taking some time to learn new systems. **CONCLUSION** Despite the fact that we faced quite a lot of challenges, from time management, communication, PHCN interference etc.because of teamwork we were able to synergize together to produce a unique design/work.  For Team Enigma, working as a team has enabled us to learn from each other’s mistakes, this will enable us to avoid future errors/mistakes, gain more insight from various perspectives, and also learn new concepts from experienced interns. This task has also helped us improve our communication skills, workplace synergy and innovative capacity to problems. With this and more Team Enigma were able to collaborate effectively, promote a more efficient work output and also complete tasks faster to produce a down-to-earth piece of work. **THANK YOU!**

Startng preInternship

Being part of this internship has really been dauntinv and stretching at the same time.first is getting used to a new workspace (slack) and getting used to having plenty persons in one channel looking for answers...