Hng 6.0 Task 1: Tutorial On How A Login Page Was Created By The A - Team

Published on Sep 20th, 2019 09:14 AM

Github url:

Link our Login Page

The first task assigned to us in HNG 6.0 was to create a login page with HTML, CSS and create a basic authentication for the page. To make sure everyone participate in the tasks and also learn,we were told to form a team of 10 persons.


The team consists of 3 front-end developers, 5 back-end developers and 2 UI/UX designer.

The front-end developers include @ woody (team-lead), @sambalicious, @elijahleke and they are well skilled using HTML, CSS and Javascript .

The back-end developers include @ nado, @jovial, @Ayomikun, @hic and @angerDooshima and they specialize in server-side using PHP.

The UI designer @KomeA and @anikriz(also a good front-end developer) created a design using Figma giving the team an overview of what the login page will look like.


The creation of the login page started with the UI/UX design team,then the front-end developers acted on the result the designer came up with after which the back-end developers make their own input.


  • The design was done using Figma as this have enough tools to make a good design


  • The login page was created using HTML, CSS, Bootstrap, Javascript and Jquery.
  • We made the page responsive by using the bootstrap framework,also the bootstrap framework was sued for the page layout.
  • We implemented the hide/show password feature on the registration page using HTML, CSS and Javascript.
  • The validation of the page was done through the use of HTML5 form attribute "required" and other elements like the input type. This is to make sure users enter the correct details in the input fields.
  • Then we hosted all the images on the page on cloudinary, as this would help in reducing the workload on our servers.


  • Firstly, we created a database using localhost/phpmyadmin and it was named "users", in the database a table with named "client" was created with six rows. Each row represented: ID, F_name, L_name, Client_email and passowrd. The row with the ID was set to AUTO-INCREMENT which means that at every data inserted in the database, the rows keeps adding starting from 1
  • Then we exported the database from the phpmyadmin and the sql (users.sql) was generated. Users.sql was imported in the MySQL on the production environment.
  • Then we created a SQL script that automatically validate users to the database and redirects them to the login page for proper login and further authentication. Ensuring that validated users end up in the database
  • The sign up and login authentication was done with OOP (Object Oriented Programming). We created a separate php file that handles the data from the form fields, the script will communicate with the database inserting or affirming the presence of a required data in our MySQL database. The files are RegSan.php and Authent.php.
  • RegSan.php handles data from the registration/sign up form while Authent.php handles data from login form field. We included Authent.php and database.php were included in our login.php file while regSan.php and database.php were included in register.php file.