Our final project of e-commerce website is built using the CodeIginiter framework. The website is built using the MVC (model-view-controller) pattern. For the data storage, MySQL is used as the database. The website consists of two parts, the admin pages and the front user pages. The admin pages will have functionality as a content management system (CMS) where the admin can input some entities to the whole system. There are 5 entities that can be inputted by the admin, users, products, product categories, images, and about pages content. Meanwhile, there are 3 entities that can be entered by the user, users, orders, and messages.
In this report, I will some information regarding the MVC component on the system and overview of the whole website system.
CodeIgniter component:
On the available CodeIgniter folder, there are already predefined folder to put the controller, model, and view. Before that, some configuration should be made. On the application/config/autoload.php file, we should defined the used libraries and helpers. Both libraries and helpers are predefined framework. For this system, these are the libraries and helper that are used.
On the application/config/config.php file, change the base_url. This base_url will be accessed when we want to go the main page.
Next, we edited application/config/database.php file to specify the database. In this project, the name of the database is ‘batiklasem’.
The last .php file that we edited is the routes.php. In this file, we should stated the default-controller which is ‘main’.
MVC
The MVC on CodeIgniter is easily separated on each folder. The framework allow us to automate the process of connecting between the MVC components. The first thing I will show is the model since it is the base of MVC. Model is used to define the operations of the entity. In the system there are 10 models as we can see here:
The next part is the controller. Controller allow us to define functionality of the system. Each function on the controller may use the operations in the model. For this system, the controller for admin and front-end user’s website will be separated since the admin and user will has different routing and function
The last component is the View. View is the front face of the website. In the view, we used HTML and CSS along with some jQuery and javascripts. The view will only display the object that is passed from the controller. Same as the controller, admin and user view are separated.
After focusing on the MVC part, we move to see the website.Here is the overview of the website content:
Admin pages:
The main pages shows the numbers of the entities. On the top right, there is a date object.
The side menubar consists of several sub menus.
On the tables menu, it will shows all the entities that are stored in the database and shows the database tables in a table format. In this tables, we used the DataTables jquery to shows the data in an interactive tables with sort and search feature. On the tables, there will be some options for example edit, delete which are represented using the symbol (symbol explanation is available on help pages).
For the input menu, the admin can input some entities to the database.
The input form is build using the CodeIgniter form helper. With form helper, we can manage the input rules better.
The other menu is the pages menu which allow admin to edit page content on the front-end website. For the pages editor, we used the tinyMCE rich text editor that is implemented into the html page.
The last component of admin pages is help pages.
Front-end website:
The front-end website actually consist of four main menu which are the product, about batik, about us (Pusaka Beruang), and contact pages. There are some features also such as the cart menu, edit account menu, shop history, and simple help page.
On product menu all the products will be displayed. On the right side there will be a product category table that can be picked to filter the products.
When the user put the product on the shopping cart, the cart menu will show the products on the cart. The cart itself is built using the CodeIgniter cart libraries. The cart menu has several options. Clear is used to destroy the cart, update to change the quantity, and place order is to proceed the transaction to the billing pages.
The about batik pages will show the informative content about batik. There are some different pages that can be navigated through the navigasi menu on the right side. The pages content can be managed using the admin pages.
The about us menu also provides informative text regarding Pusaka Beruang. The content can also be edited in the admin pages.
The last main menu is the contact menu. On the contact menu, the registered user can put the messages by providing the e-mail address. On the admin pages, the recorded message will be shown along with the e-mail address so that the admin can reply to that e-mail.
The last part is I would briefly explained the date object. The date object is presented in both admin and front website. The object creation is build in the controller and passed to the view. Here is the code of the date object format:
This way the format will be Day xth of Month Year.
That is the report of the Scripting Language final project.
Team member:
Design Student:
- Christian HL (Binus 2016)
Video: