Okpappa E-commerce Management System
Okpappa E-commerce Management System
Used Technologies:
Client Side Technologies:
Server Side Technologies:
Angular 4
Laravel 5.4
Typescript
PHP
Bootstrap
MySQL
DataTable
Okpappa is an e-commerce management system which does the following operations:
-
Manage Category (add, list, update): parent child relationship is maintained.
Manage Brands (add, list, update): can manage the brands for the products
Manage Products (add, list, update): products will be under a certain category
Manage Orders: can view list of recent orders, filter the orders
Manage Offer: token generate, set expiry for tokens, attach token to customers
Manage Banner( add, list, update): banners for home page of the website
Manage Tags (add, list, update): these tags are associated with the product
Manage SEO: managing SEO for different page in the front facing website
Manage POST: basic pages like about us, contact us, history, terms & conditions can be managed
Manage Reports: generate reports for contacts, newsletter and customers
Each section will be discussed in the upcoming sections. Metronic admin panel template from
themeforest template is used in this project.
In the server side technologies, Laravel and MySQL are used. The tables are created using the migrations
in Laravel. Some dummy users (admin and customers) are created using seeder and faker library.
Categories, brands, tags are also created using the faker library. Some dummy images are created for
start the initial process. All the validations are done both in server side and client side. Results are
returned in JSON format along with the appropriate response code. Whenever there are some
validations errors in server side, they are handled in the client side.
System starts with the login page. Type the username and password to login as admin. This username
and password is set by Laravel seeder. Whenever, user enters correct username and password, it will
take him to the dashboard page. Router guard will be used to protect the routes and for the
authentication in the server side Passport is configured. For solving the CORS problem, barryvdh/laravelcors (https://github.com/barryvdh/laravel-cors) is used as the middleware.
Once the user is logged in, he will be taken to the dashboard page. As this is a Single Page Application
(SPA), router-outlet is used in the app.component.html. From the left sidebar, user can navigate to
different pages. Appropriate component will be loaded based on the value of the route. As, all the pages
except the login page includes a class in the body attribute, in the app.component.ts file a class named
login is manually added using the following two lines:
let body = document.getElementsByTagName('body')[0];
body.classList.add("login");
In the top image, a list of categories is seen. When the page loads, an API is called to get all the
categories from the server. The picture shows categories along with the images (if any). For the sorting,
searching and filtering, jquery datatable is used. From this page, user can navigate to the page for
adding new category or the page for updating a category.
This image shows the results of “searching”. Here the search term is “app” and the row with title “Apple” is shown.
This is an image showing page for adding new category. All the client side validations are done here
using the errors, dirty and touched property for required attribute. All the required attribute is shown *
symbol after the label. The checkbox for status is kept cheked at load using the two way data binding
syntax:
private status: boolean = true; in the ts file
[(ngModel)]="status" in the attribute of the input type checkbox field
Sort Order value is used to sort the categories according to need. One can change the order of the
categories that will be shown in the website menu.
This is an image of the page while user will go for updating a category. Once user clicks on UPDATE
button, if no validation errors occurred, then the user will be shown an update successful notification
message. User can change and update all the field accordingly.
Similar functionality as Category Listing page
Similar functionality as Category Add page
Similar functionality as Category Update page
Similar functionality as Category Listing page
Similar functionality as Category Add page. Tags, categories will be populated on the constructor
method of the class. Based on the values of categories and tags, the dropdowns will be populated. All
the client side and server side validations are done here.
Similar functionality as Category Update page.
This is a preview for order module. In this module, PURCHASE ORDER is shown. All the client side
validation can be seen from the preview. ng2-datepicker is used for the “Select date” portion. Whenever
any product will be purchased, this form is filled up to update the stock quantity. Suppliers list is fixed
now, but later it will be handled dynamically.
This is an image showing SALES ORDER. Whenever, a customer buy products physically from the store,
this form is filled up by the shop user. When the user clicks on the ADD button, it first checks whether
it’s already in the list of cart of the customer. If not, then it will be added to the cart. Otherwise, the
quantity and sub-total will be updated.
This is an image showing list of recent orders. There is also an option to filter the orders
according to the status.
This is the filtered result with the selected status as “ORDERED”. In the image, it can be seen that only
the orders with the status “ORDERED” is showing.
This is an image showing TOKEN GENERATE module. Here user will specify the number of tokens to be
generated and the discount in percentage.
This is the results after generating specified number of tokens. These tokens will be assigned to different
customers.
This is the module to attach token to a customer. Here the validity of the token will be specified. User
can use the token till that date.
Whenever token is attached to a customer, a notification message will be shown.
This is the report showing all the recent contacts. As the message can be large, so if the user clicks
on the VIEW, it will show a modal and the full message can be seen.
This is the report for the newsletter subscription.
This is the report showing all the customers.
The above image shows tags list. Same functionality as “Category List”.
The above image shows tags list. Same functionality as “Category Add”.
The above image shows Tag Update. Same functionality as “Category Update”.
This image shows SEO list. Whenever user creates any category or product or post, it will
automatically create a row for SEO. It will be used in the specific category or product page.
Image showing POST for the website contents like “About Us”, “Terms & Conditions”, “Privacy Policy”
etc.