Web Systems Reporting Script

Web Systems Reporting Script
Anthony: Good Morning Everyone, My name is Anthony Palaganas and

today our group will be reporting our website. We call our website
ESport Merch, it is an ecommerce website exclusively for selling different
merchandise from your favorite ESport teams, like SKT T1, Blacklist
International and many more. I will now start explaining the login and
register functionality of our website (The login page is shown in the
screen) . As you can see, we have a functioning login page. Assuming
you don’t have an account yet, you can click the “Register Here” link
below (Anthony Clicks the “Register Here” link). It will redirect you to this
page where you have to fill in some information. (Anthony fills in the
textfields, the password is 12345 and an error will display). If you fill the
password with less than 6 characters, it will have an error like this
therefore you have to fill the information fields again. (Fill the
information fields correctly, password is 123456). When you successfully
fill out the correct information, it will redirect you to the account page.
There is a log-out option to log you out of your account (Click the
log-out). Once you click it, it will redirect you to the log-in page. To test if
the log-in is functioning I will log-in to my account. (Input your email and
password to login). And there, as you can see, the account was
successfully logged in. In the right, you can see there is an option to
change your password. This is also functioning and it will update your
password in the database(demonstrate by changing password to
qwertyu). To test if it was successful, I will now logout my account and
login again (Logout and login again using the changed password). And
as you can see the password was successfully changed. I will now be
passing the floor to Jan Vincent to explain the homepage.
(Jan takes the floor, Click the Home option on the top)
Jan Vincent: This is the homepage of our website, as seen on the screen,
there is a navigation panel.(Scroll down the page slowly) If we scroll
down, it stays fixed. We have the different team div shown here, we also
have the featured products div, and we also have an interesting design
here where the picture stays in place as we scroll down the screen. This
is done in CSS. (Keep Scrolling). We also have the clothes panel, and
different teams merch. At the very bottom of the website, we can see a
footer that shows the contacts, some links, and also some icons. Our
designs are very well organized thanks to Bootstrap and Font Awesome.
The Font Awesome is an extension you can use for the icons shown here
(Hover over the icons, fb, insta etc..) On the other hand, Bootstrap is
responsible for making our website responsive. (Minimize the window
and scroll up and down) If you can observe, the header becomes this
three line window here if we minimize the window and if you click it, it
will show the top options. (Maximize the window). That is all for the
home page, I will now be passing the floor to Mark Dominic for the Shop,
Contact us, and Account page.
(Mark takes the floor, click the shop page)
Mark: I will now be explaining our shop page. This part is still under
development and we will update it sooner. As seen on the screen, there
are some pictures of the products. In later updates we will have more
pictures shown here.(Scroll to the bottom) If you scroll down, on the
bottom left, there is an option which shows the pages available in the
shop. This is called the pagination and it is still under development for
future updates. Let us now move on to the contact page(Click the
contact page). It is a very simple contact page which shows the
websites contact information like the phone number and email address.
By the way, the blog option is also still under development. Let us also
click the account icon.(Click the account icon) If you can observe, the
account page shows the information of the current user of the website.
As explained earlier by Anthony, we can see the change password
functionality on the right side and the user information on the left side. I
will now be passing the floor to Roldan Day-ong to explain the cart
functionality of our website.
(Roldan takes the floor, click back to the home page)
Roldan: I will now be explaining the cart functionality of our website.

Let’s focus on the featured div first. (Focus Screen on Featured
Products ) If you click the “Buy Now” button of one of these products, it
will redirect you to this single product page. (Click the Buy Now button
for the FIRST product). Here, you can see the details of the product, like
the name, description, price, and even some different pictures of the
product. If you click one of any of these pictures, it will change the large
panel to that picture. (Click the pictures below the large picture). This
was done using javascript. As you can see, there is an option “Add To
Cart” which will add the product to the cart. (Click add to cart). The
product is now added to the cart. You can remove the product, edit
the number of the product you will buy, and also checkout. (Change
the number and click edit). As you can observe, when you edit the
number of products, it will also calculate and update the total price.
We can add more products to the cart. (Go Back to the homepage
and add the 4 products into the cart). The cart has now 4 products and
it also calculates the total amount to be payed. You can remove the
products by simply clicking the remove button here.(Remove 1 item) I
will now be passing the floor to Maron to explain the checkout as well
as the backend of our website.
(Maron takes the floor)

Maron: I will now explain the checkout functionality of our website as
well as a little bit in the backend of our website. Once you want to order
the items in the cart, you can click on the checkout page. It will then
ask you to fill out necessary information, like the name, email, Phone,
city, and address. (Fill out the necessary information). After filling out the
fields, you can now place your order. If the order was placed
successfully, it will show this window and a button that says pay now.
This is still under development and will be worked on in future updates.
Let us now move on to the backend.(Go to the database). The
database shows the orders made in the website. (Click orders table)
The bottom row shows the order we just made today. It also has a
user_id which is related to the user table therefore we can identify
which account ordered the product. The database also shows the users
where all the accounts made are stored. (Go to the users table) If you
can observe, the password is a cryptic word, this is because there is a
piece of code that hides the password of the user to the admin for extra
security. (Click the order_items table) In the order_items table, you can
see all the products ordered with a user_id and order_id. The user_id is
used to identify which user ordered the product and the order_id
identifies which order will it be sent. In the products table, we can see
the different product information, such as the images, name and etc.
We can also add our products using this table. That is all for our report.
Thank you for listening.

Web Systems Reporting Script

Uploaded by

Copyright:

Available Formats

Web Systems Reporting Script

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Systems Reporting Script

Uploaded by

Copyright:

Available Formats

Web Systems Reporting Script

Anthony: Good Morning Everyone, My name is Anthony Palaganas and

(Mark takes the floor, click the shop page)

(Roldan takes the floor, click back to the home page)

Roldan: I will now be explaining the cart functionality of our website.

(Maron takes the floor)

You might also like