MOBILE COMPUTING GROUP

PROJECT(MCPA201)

6-M TRADING WEBSITE

Student No. Surname, Initials Group (App Task Completed Signature

Dev)

1. 22160712 Mthethwa Sboniso 6-M Created JavaScript validations,

TRADING product page, payment page
html and CSS.

2. 22024141 Nzama Lusanda 6-M Created Home page html and

TRADING CSS

3. 22163911 Ngxokile Amanda 6-M Created Login and password

TRADING html and CSS.

4. 22058272 Cumbane 6-M Created Signup page html and

Sbusisiwe TRADING CSS.

5. 22055757 Mbutho Siyabonga 6-M Created About us html.css

TRADING

6. 22134026 Sibiya Sandile 6-M Created Contact Us page html

TRADING and CSS
 HOME PAGE

Logged-in
username.

Hyper links

Business Logo Brief description of our

business.
Business Slogan
 This is the home page with the Logo of our company where a brief description
about the business is displayed even the slogan. The small icon near business logo
can be used to logout if the user is already logged in.
 On the footer we have a copy write text.

LOGIN SCREEN

Validation message
for mobile number.

Textbox for mobile

number input.

Button to continue to next

Button takes you to Button takes you to sign
page.
home page. up page.
 SIGNUP PAGE

Textbox for mobile

number input

Textbox for email id input

Button for continue to

Button takes you to
next page.
previous page.

 First sign- up form in this form there’s validation message for validation of phone
number on the first sign-up.
 If you enter numbers less or more than 10 you will get an error message to fix your
mistake before continuing.

 In this form there’s validation message for validation of email if for an example, you
forget to include .com in your email input the error message will pop up. This part
specifies regex format of the email before you continue.
 This is the second sign-up form where the user must put all their details, then create
and confirm the password they will use each time they want to login.

 In this form we get validation whenever the user enters their details and there’s a field
that is left empty an error message will pop before continuing to the next page.
 In this form we get the ID validation as per id number of SA citizens must be 13
characters if you put less or greater than that, the error message will pop up “saying It
is too short or too long”.

 In form there’s validation of password if the password you created is not the same as
when you confirm it the error message will pop up.
 This is the third sign-up where the user must confirm the OTP if the OTP matches
then registration process is done.

 In this form if you correctly entered the right OTP the message will pop up saying
“Account successfully created” then you are done with registration.

ENTER LOGIN PASSWORD PAGE

 After registration you go back to login page enter your registered phone number then
come back to this form and enter your password before continuing to next page.

 This is a logout screen you first need to confirm if you really want to logout.
 The small arrow can be used to go back to the previous page.
 HOME PAGE

 After logging out automatically you get to home page.

ABOUT US

 This is “About” page where you get to see everyone that is involved in this business
there’s everything about them and their positions in this company.
 CONTACT US

 This is the contact us page where the user can find every social media handles of the
business and the physical address in case, they want to visit the offices.
 You can also leave us a message and we’ll get back to you.
 PRODUCT PAGE

 This is the product page where you get use the discount code to get 50% off when
there’s special offers this usually happens when it is during the year or end year.
  This page is where there are every parts you need if you need engine related part you
click to engine then you will see every engine part(s). There are also prices of the
products you need and add them to cart.

If you want car parts like wheels you can tap the exterior button which will display the
exterior car parts only.
 In this form if the user will receive a coupon that gives them discount, if they
incorrectly put the coupon the error message will pop up saying “invalid coupon” they
will need to enter correct one to redeem the coupon. If the correct one is entered the
message saying “coupon successfully reddened will pop up “.

PAYMENT
 This is the payment page after selecting the item(s) that you need then you will
proceed to this page you will enter your debit or credit card details to proceed.

 In this form there’s card information validation if the card number characters are too
long the error message will pop up.
 In this form there’s CVC number validation it must be 3 characters if you enter less or
more than that there will be error message popping up.

 If every card information is correct, then the user proceeds to confirm their OTP this
is the security measure to ensure that the person making payment is really the
registered user.
 In this form there’s OTP validation if the incorrect OTP is entered the error message will pop up
restricting the user from continuing to next process.
 After correctly putting all the needed information in this page the payment will be
successful then your product will be shipped to you.