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

Main Page of the website, the designer was creating in simple by add just one button “explore” inside the picture.


• Batik Lasem Page

Brief Explanation about Batik Lasem

• Culture Page

Explanation of Indonesia’s Batik Culture, Lasem Geographical Place, and Lasem’s Culture

• Motive Page

Detail page of Batik Lasem Motive including several example of each motive.

• About Us Page

Brief explanation of Pusaka Beruang store

• Contact Us Page

How to contact the Store

• Login Page

Login –> For those user who is already registered their email to this site.
Sign Up –> Register new user to the site.


• Account Page

Edit general data of user


• Product Page

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






• Cart Page

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”


• Bill Page

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.

Welcome people!

First of all let me introduce myself, my name is Raymond Haryanto and I’m currently taking Scripting Language class. The purpose of this class is creating an e-commerce website using PHP and code igniter as the framework. Currently, my teammates are Anthony Prasetyo and Rahadian Adinugroho. In our, final project me and the other 2 persons would work as a programmer and the design of the website is designed by the design student named Brian from batch 2018.

In this project, we would like to create e-commerce that sell a batik cloth with several variety of Batik Lasem. Besides, this e-commerce is not only about sell batik, it also could educate people by giving them some information about the batik itself, culture and origin of Lasem.

As an user, they could browse freely through the website, however once they want to order the batik they need to sign in as a member or sign up for a new user. Below, there is list of user’s interaction in the website.
– User can read an educational information about culture and origin of Lasem.
– User can search Batik based on type, price range, and color.
– User can review about the products that are listed.
– User can gather all the things that they buy into the cart.
– User can only pay through ATM transfer.

As an admin, we provide them capability to add, remove, and edit items that is being sold in the website. Besides, the list of ordered item could be seen and access by the admin (change the status of paid or not paid by seeing user’s transfer receipt). Last, admin could check all the basic info of all users.