Final Project Report

In class CS220 – Scripting Language , we students, are required to create an e-commerce website for our final project. We managed to make a group consists of three people: Evelyn Kharisma, Fansi Lantana, and Jeremy Nathaniel. The E-Commerce website we create, will contain functions such as: Login, Admin Interface and Settings, Wishlist, Shopping Cart, Purchasing Processes and Confirmation, and several additional general functions that are present in an E-Commerce website.

There are 3 different workloads to be done, which are Front-End, Back-End, and Database. This E-Commerce will be done using PHP and CodeIgniter Framework

The platforms that we use to make this website:

Front end – HTML, CSS, Javascript

Back end – PHP and CodeIgniter

Database – MySQL

 

Features and Screenshots

Front End

Image and video hosting by TinyPic

Image and video hosting by TinyPic

Back End

Image and video hosting by TinyPic

  • Create an Account

If the customer has not registered, he or she can browse through the shop, but in case of purchasing, the user needs to sign up first. This page is used for a new customer to make an account to purchase Batik. The customer need to fill all the form and there is a minimum character for password, 8-16 characters.Image and video hosting by TinyPic

  • Login

If the customer has registered to the website, then he or she can login by entering their ID and password. The website can detect whether the person is a customer or an admin by seeing the ID.

Image and video hosting by TinyPic

  • Inventory

This page will show all products present in the database. The inventory are distributed based on categories.

Image and video hosting by TinyPic

  • Zoom

Customers can zoom on a product to view details when they have clicked on the product

Image and video hosting by TinyPic

  • Shopping Cart

Customers can view the shopping cart

Image and video hosting by TinyPic

  • Administrator

Administrator can modify the products listed in the website

Image and video hosting by TinyPic

Administrator can modify the contents of the website
Image and video hosting by TinyPic

Administrator can view or edit the users registered to the website

Image and video hosting by TinyPic

Administrator can view and change status of orders
Image and video hosting by TinyPic

    • Database

Image and video hosting by TinyPic

Image and video hosting by TinyPic

 

And this is a video to show how the website works

 

Final Project Proposal

In class CS220 – Scripting Language , we students, are required to create an e-commerce website for our final project. We managed to make a group consists of three people: Evelyn Kharisma, Fansi Lantana, and Jeremy Nathaniel. The E-Commerce website we create, will contain functions such as: Login, Admin Interface and Settings, Wishlist, Shopping Cart, Purchasing Processes and Confirmation, and several additional general functions that are present in an E-Commerce website.

There are 3 different workloads to be done, which are Front-End, Back-End, and Database. This E-Commerce will be done using PHP and CodeIgniter Framework

These are the Minimum Requirements for us to work with:

  • Use PHP framework. Suggestion: CodeIgniter
  • Create the primary navigation bar (menu) for the site. It may be implemented as an image map or as a table of images, text or buttons.
  • Create a help and login pages.
  • Use appropriate href and/or  alt (if image) tags for each menu item.
  • Use the title tag to create an appropriate title in every page.
  • Create a user registration form.
  • Create a login/user authorization table in a database.
  • Create administrator page(s).
  • Use a shopping cart.
  • The form should contain space for name, address, phone, email, gender etc (but should be appropriate)
  • Utilize the image object and the onMouseOver event or other event to dynamically change images.
  • Define styles using css and use them to give attributes to some html elements.
  • Use a JavaScript function (at least 2 scripts).
  • Use form elements such as text and selection boxes to gather user input/preferences.
  • Use the date object to write the date from the server (you could put anywhere on your web).
  • Create an inventory table in a database.
  • Display inventory by category upon request from the main page

Interactions

Sign Up, Login & Logout                                                                                         When logging in, there are 2 available outcomes, whether the person logging in is a user(customer) or an admin. If any users want to purchase an item but he/she hasn’t logged in yet, the website will prompt for them to either sign up or login first. Users are able to browse through the items without logging in though. Our database will verify whether the one logging in is a user or an admin

Admin Interfaces and Settings                                                                               Admin Interfaces is the interface that an admin will see after the admin has successfully logged in to the system. In this interface, admin can simply change or edit the products and stocks available.

Wishlist and Shopping Cart                                                                                    Wishlist and  shopping cart can ease users who wants to purchase an item, but they are still thinking about it. Users can delay the process and just put the product into a wishlist or shopping cart.

Purchasing Process and Confirmation                                                                   The website will provide confirmation to the users when they want to purchase something. This will prevent users from buying a wrong product.

View Product

The users are able to browse through the catalog and view the product, may it be the description or the price of each product.

Team:       Evelyn Kharisma                                     1701320825                                            Fansi Lantana                                          1701341741                                              Jeremy Nathaniel Sie                              1701320365
Design:     Anoukv Zanten                                        1901519004