Introduction

As one of the requirements of completing course CS220 – Scripting Languages, we are to set up an e-commerce website. This project was managed by Evelyn Kharisma, Fansi Lantana and Jeremy Nathaniel Sie. The front-end of the website had been designed by Anoukv Zanten previously. For the purpose of supporting the additional function that our team implements into the e-commerce website, we modified the front-end. This e-commerce website was created to support Batik Tulis Pusaka Beruang Lasem.

This e-commerce website will be built using: – Back-End: PHP programming language and CodeIgniter framework – Front-End: HTML, CSS, Javascript – Database: MySQL

mysql-php HTML5_CSS_JavaScript

********************************************************************************

Features and Screenshot – Minimum Requirements

Navigation (Front-end)

Navigation (Back-end)

Help Page

Login Page

Title Tag

User Registration Form

User Database

Administrator Page

Shopping Cart

onMouseOver Event

JavaScript Function

tinymce rich text editor

Play or pause video on button click

Zoom image onMouseOver

Date Object

Inventory Table in Database

Inventory by Category

********************************************************************************

Features Details

Navigation In the Batik Tulis Pusaka Beruang Lasem e-Commerce website, we provide navigation in all of the pages. In the front-end there are navigation in the header and footer. In the back-end there is navigation in the header. This navigation is to ease user in navigating around the website.
- Front-end Header:
  - Home – View home page
  - Product – View all products
    - Gunung_Ringgit – View product based on category (Gunung_Ringgit)
    - Kricak
    - Latohan
    - Sekarjagad
    - Tiga_Negeri
  - About – View about us
    - Geography – View information
    - Lasem Culture
    - History
    - Batik Lasem
    - Motif
  - My Account If login
    - Order History
    - Profile
    - Logout
  - My Account If not login
    - Register
    - Login
- Front-end Footer: About Us, Privacy Policy, Term & Condition, Site Map, Help, Delivery Information.
- Back-end Header:
  - Pages – Edit page content using tinymce
    - About
    - Geography
    - Lasem Culture
    - History
    - Batik Lasem
    - Motif
    - Help
  - Products
    - New Products
    - Products
    - New Categories
    - Categories
  - Orders – View all orders
  - Users – View all users
  - Logout
Create New Account There will be a form that user need to fill in to registered as new customer. Purchasing can only be done after login. All field should be filled. Password minimal 8 characters and maximal 16 characters. Password and Confirm Password field should be identical. Drop-down is used to choose country and city. Textarea is used for address.
Login and Logout This login system will validate customer and admin account. New customer should sign up to purchase. Based on the email and password, system will determine whether it’s customer or admin, then system will redirect them to specific interface that they are allowed to access. Only admin will be able to access admin interface.
Home, About Us, Help, Sitemap, Delivery Information and other pages. These page will contains Batik Tulis Pusaka Beruang Lasem basic information and help in navigating and using the e-commerce website.
Product The e-commerce will let customer browse and search product sell by Batik Tulis Pusaka Beruang Lasem. Customer can view products based on category. Customer can also see the product details and view the detail of image through onMouseOver magnifier. In the home page user can also view new product and sales product.
Admin Interfaces and Settings Once admin login into the system, they will be able to change the content of the website easily using the back-end services provided. The admin features includes:
- Edit the content of pages easily using the rich text editor tinymce
- Add, edit, delete products
- Add, edit, delete categories
- view, change status of orders
- Add, edit, delete users
- Edit payment deadline The admin page of this website also let admin change the number of day(s) before the payment deadline.
Shopping Cart User can add product that they want to buy into the shopping cart which will provide convenience in choosing and purchasing product through the website.
Purchasing Process and Confirmation The website purchasing step will consist of several confirmation step to ensure that customer purchase the product they choose correctly.
Order History User can view the details of their order history, they can also confirm they payment in this page. If the payment passed the due date then the status of order will be “Expired”. There are 7 order status such as, pending, verifying, shipping, sent, delivered, cancelled, expired.
Payment Confirmation The e-commerce website will also provide convenience for the admin by providing the mean for customer to upload their payment receipt.