Laura's Binusian Blog

Hi there, Readers!
As usual, there is a final project for nearly every class we attended in University.
This time, my post will be about my Scripting Language Final Project~

==============================================================
INTRODUCTION
E-commerce Website
==============================================================
My final project will be done by a group consists of three person; Jennie (1701320932), Santi (1701320421), and me -Laura- (1701341823).
The theme of the project is E-commerce website, which has the main product of BATIK.
BATIK is an Indonesian original design. It is a design technique of producing colored designs on textiles by wax-resist dyeing applied to whole clothes.
The content of the website, as well as the website front-end, is already provided by Vanessa Lois (1801436215), a design student, and we, as a computer science student, are required to make the back-end of the website.
However, we are allowed to make a modification to the front-end to match our actual project requirement.

==============================================================
CONTENT OF THE WEBSITE
Pusaka Beruang Company
==============================================================
This project is intended for PUSAKA BERUANG SME -our client-
All of the assets were provided by the client. Then, the website design was made by design students before it was given to us to be programmed.

The Logo of Pusaka Beruang BATIK

This is the logo of PUSAKA BERUANG, the brand name of our product.
I like this logo for its simplicity and monochrome color use of black & white colors.
The products are also nice and has some beauty batik patterns.

Kembang Kecil Kuning Kricak Putih

==============================================================
TEAM
Roles of each team member
==============================================================
◆ PROGRAMMER
Back-end: Jennie (1701320932)
Front-end: Laura (1701341823)
Front-end: Santi (1701320421)

◆ DESIGNER
Visual Concept and Design: Vanessa Lois (1801436215)

==============================================================
PROJECT REQUIREMENTS
Several requirements that need to be met
==============================================================
– PHP Framework
Code Igniter will be used as our PHP framework.
– Navigation bar
Our plan is to put the primary navigation bar on the left side of the page and use text or buttons.
– Help and Login page
For login page, a database of admins and users are created beforehand.
The database is created for verifying the user account and password every time they log in.
Website usability will be our second priority, hence help page will be served as additional page to support users.
– User registration form
As usual, form is used for user registration.
Since this website is an e-commerce, form is served to create new user in order to track their address, phone numbers, and payment method.
– Admin page
Administrator is needed for managing the page; such as: adding new product, editing product price, etc.
– Shopping cart
Like any other e-commerce, this website utilizes the use of shopping cart.
The shopping cart variable will not be put into database, instead it will use session.
So it will be easier to manage the data if the customer cancel the order.
– Inventory table
Inventory table is one of the main table in our database.
It contains all the product details; such as product ID, product name, product price, product description, etc.
– Javascript Functions (at least 2)
Our plan is to apply javascript for beautify the website. For instance, slideshow image, and onMouseOver image event.

==============================================================
FUNCTIONS
USER: Customer and Administrator
==============================================================
◆ CUSTOMER
1. Sign Up / Register New Customer
New user is able to join by filling registration form
2. Login and Logout
Customer are able to login and logout from their account
3. Browse All Products
Users are able to browse all products that are sold by the company
4. Browse Products by Category
Users are able to browse desired products that are sorted by the provided category
5. Search Products
Users are able to search desired products by inputing product’s name
6. View Products Details
Users are able to view each of the available product details
7. Add Products to Shopping Cart
Users are able to add desired products to their shopping cart
8. View Shopping Cart
Users are able to view what’s on their shopping cart
9.Remove Products from Shopping Cart
Users are able to remove their added products from their shopping cart
10. Checkout Shopping Cart
Logged in users are able to proceed their shopping cart by checking out in which it will be placed as an order request
11. View List of Order History
Logged in users are able to view list of order history, which contains order details and order status
12. Upload Payment Receipt for Each Order
Logged in users are able to upload payment receipt for their order as the proof of payment
13. Edit User Profile
Logged in users are able to change their profile data
14. View Contact Us page
Users are able to view Contact Us page
15. View About Us page
Users are able to view About Us page
16. View Help page
Users are able to view Help page

◆ ADMINISTRATOR
1. Login and Logout
Users are able to login and logout as an admin in order to access admin page by using admin account
2. View List of All Users
Users are able to view list of all user account; both of admin account and customer account
3. Add, Edit, Delete User Account
Users are able to add, edit, and delete user account, whose role is lower than the current logged in user. Deleting user account option is unavailable for the current logged in user.
4. View List of Roles
Users are able to view list of role used in the system
5. Add, Edit, Delete Custom Roles
Users are able to add custom roles (e.g. Data Auditor), edit, and delete them. These options are unavailable for predefined roles (owner, admin, user)
6. Specify User Privilege for Role
Users are able to specify particular privileges for some roles
7. View list of products
Users are able to view list of product stored in the system database along with its details
8. Add, Edit, Delete Product Data
Users are able to add, edit, and delete product data
9. View inventory list
Users are able to view remaining stock for each product
10. View and Add Product Mutation List
Users are able to view all mutation list and add quantity for a specific product
11. View Order List
Users are able to view all order list that has been submitted by customers
12. Process Orders
Users are able to process an order after verifying and validating the uploaded payment receipt by the customer
13. Reject Orders
Users are able to reject an order request after confirming its invalidation
14. Edit General Info
Users are able to edit general info details such as bank account number, contact number, and address

==============================================================
TECHNICAL
Programming language, IDE, and Software used
==============================================================
◆ BACK-END
Language: PHP
Framework: Code Igniter
IDE: PHP Storm

◆ FRONT-END
Language: CSS, HTML, Javascript, jQuery
Software: Adobe Dreamweaver
Note: We will not use the provided front-end code for the reason that they use Muse, which we are not quite familiar with.

==============================================================
DEMO
Screenshots and Video
==============================================================
Since we didn’t use website template, we outsource jquery and use bootstrap. I mostly worked on making the front-end dynamic page and coded by using HTML, CSS, Javascript, and jQuery.

1. First, me and my other friend who also creating Front-end, made our own style.css.
2. After I’ve done creating the page, I put them into localhost (xampp/htdocs). Then, I changed some code to PHP code together with the partial back-end code (no functionality regarding products, shopping cart, transaction, etc.) in order to run it nicely.
3. Afterwards, me and my other friend combined our front-end and fixed some code that worked incorrectly due to the some same name CSS style.
4. After it was run nicely, the back-end programmer add the back-end code to add the functionality.
5. The code was given back to me to be fixed due to some error when putting back-end code.
6. Finally, after fixing it, I recorded it for video demo and edited it.

Home
By using wowslider application, I created the slider and inserted it on the home page.
For the product, I used popup jQuery called fancybox, to direct to product details page.

Product List
This page was created by using bootstrap only and some javasricpt function onmouseover.

Product Details
‘Hover to zoom’ on the product image was created by using magicZoom jQuery.

Shopping Cart
This page was created by using bootstrap only.

Order (List, Details, Upload Receipt, and View Receipt)
The most difficult part of this page is to change the input style of type file, since HTML and CSS didn’t provide the tools to change it. Hence, I used javascript and somehow it could be changed.

Click here to see the video demo!
Click here to see the video commercial!