Introduction
The Final Project of CS220 – Scripting Language Course, we were given a project to establish a e-commerce website. The team was consist of 3 people, they are Anthony Prasetyo, Rahadian Adinugroho, Raymond Haryanto. The job description are:
- Anthony Prasetyo: Research the e-commerce 101, create database, and listing all the functionalities
- Rahadian Adinugroho: Create the CMS for the website including create the navigation for the admin, implement all the function, and connect the front-end with the back-end
- Raymond Haryanto: Create the front end of the website(CSS and javascript), setting up all the jquery function for each button and form and send it variable that are needed by the back-end developer
The project was built using:
- Back-End: PHP programming language, CodeIgniter framework, bootstrap, javascript
- Front-End: HTML 5, Bootstrap, Font-awesome, Javascript, Jquery,
- Database: MySQL
Youtube Link –> Check this out
Individual Report
Currently, I’m working as the front end developer which has the duty to manage the user view for Batik Lasem Pusaka Beruang. Actually the design of the front end has been already created by the design student, however because it is created by a particular web design emulator so the structure of the code is a bit in a mess. So, I redesigned all the code and structure but using the same design and also I attach the e-commerce user view because the design that is given has not implemented the e-commerce view. Besides, setting all the html and css, I also design the javascript and jquery (ajax) for each button, page, and form.Next, I send all the variable that are needed by my back-end programmer then receive it again and display it to the front end. For detail information of Batik Lasem Pusaka Beruang check the link below.
Front End Features
-
Home Page
-
Batik Lasem Page
-
Culture Page
-
Motive Page
-
About Us Page
-
Contact Us Page
-
Login Page
-
Account Page
-
Product Page
-
Cart Page
-
Bill Page
Main Page of the website, the designer was creating in simple by add just one button “explore” inside the picture.
Brief Explanation about Batik Lasem
Explanation of Indonesia’s Batik Culture, Lasem Geographical Place, and Lasem’s Culture
Detail page of Batik Lasem Motive including several example of each motive.
Brief explanation of Pusaka Beruang store
How to contact the Store
-
Login –> For those user who is already registered their email to this site.
Sign Up –> Register new user to the site.
Edit general data of user
The workflow of this a page is “all in one page”, the image and data would be called through ajax when the correlated category is called ( all the categories are being loaded when the page is loaded). Once user click “buy” button, it would request the correlated details of the product through ajax including the review of each product. Once, user set the amount of the item you could add them to cart. Below, I provide several screenshot of the workflow
This page contain all of the items that user gonna buy including see the shipping price .Once, you are sure with those items you could click “checkout”
In this page user would see all the orders either it is paid / not paid / cancelled. If user already paid via Bank transfer you could validate it by filling the form that is provided. Later, the admin would verified the payment and change the payment status then ship the items.
