GREEN UNIVERSITY OF BANGLADESH (GUB) OnnoRokom.store - Web Based an E-commerce Application For Various Consumer Product Submitted by Md. Moynul Islam (181002197) Md. Abu Rayhan Prince (181002198) A project submitted to the Department of Computer Science & Engineering for the partial fulfillment of the degree of Bachelor of Science in Computer Science & Engineering Supervised by Zeseya Sharmin Lecturer, Department of CSE Department of Computer Science & Engineering Green University of Bangladesh 220/D Begum Rokeya Sarani, Dhaka-1207 February, 2022 Declaration We hereby declare that this project is based on the results found by ourselves. Materials of work found by other researcher are mentioned by reference. This project, neither in whole nor in part, has been previously submitted for any degree. Md. Moynul Islam Md. Abu Rayhan Prince ID: 181002197 ID: 181002198 i Certificate This is to certify that the capstone project entitled OnnoRokom.store - Web Based An E-commerce Application For Various Consumer Product has been prepared and submitted by Md. Moynul Islam and Md. Abu Rayhan Prince in partial fulfillment of the requirement for the degree of Bachelor of Science in Computer Science and Engineering on February 10, 2022. Zeseya Sharmin Prof. Dr. Md. Saiful Azad Supervisor Chairperson, Dept. of CSE Accepted and approved in partial fulfillment of the requirement for the degree Bachelor of Science in Computer Science and Engineering. Humayan Kabir Rana Tanpia Tasnim Chairman Member Md. Atik Ahamed Istiaque Ahmed Member Member (External) ii Acknowledgments First and foremost, we express our gratitude to the almighty ”Allah”, the supreme ruler of the universe, the most gracious, forgiving, best creator, sustainer, and preserver of all the universe for his continual blessings, which have enabled us to pursue our education and successfully complete the capstone project OnnoRokom.store - Web Based An E-commerce Application For Various Consumer Product for the degree of Bachelor of Science under the Department of Computer Science and Engineering, Green University of Bangladesh. We would like to express our heartfelt gratitude, immense indebtedness, sincere appreciation, profound regard, and deep sense of respect to our instructor and honorable supervisor, Zeseya Sharmin, Lecturer, Department of Computer Science and Engineering, Green University of Bangladesh, for her generosity, scholastic guidance and advice, constructive criticism, untiring support, continual encouragement, and continuous supervision from the beginning of the development of the project to the completion of project paper writing. Finally, we express our deepest gratitude, pride, and love to our cherished parents, sisters, and well-wishers, who never stopped to inspire us with their positive vibes, sacrifices, and moral support while we worked toward the completion of this project. iii Abstract In the present circumstances fast-paced business world, it’s decisive to be able to meet consumer’s expectations in the most effective and efficient manner possible. If your consumers would like to see your business online and have access to your products or services straightaway, you need an online shopping store which helps to reach your consumers. Thereat, we proposed the project OnnoRokom.store - a business-to-consumer e-commerce web application to provide consumers with an intuitive virtual shopping experience. Consumers will enjoy the variety of features currently offered on this web store. HTML, CSS, WordPress, PHP, and the MySQL database were used to developed this system. Essentially, it facilitates consumers who wish to purchase necessary products in a timely manner. Consumers can login to their account, choose a product from any category, sign up for an order, and then pay the purchase price using COD or mobile banking. Consumers can make changes to their order list before it has been confirmed. Consumers can request information about products and services as well as place orders at any time and from any location. The current e-commerce site offers a wide range of men’s and women’s wear, as well as other accessories that consumers require on a daily basis. We believe that ”OnnoRokom.store” could be an all-in-one solution for consumers, providing a flexible, secure, and simple-to-use environment while also having an impact on the Bangladesh economy. iv TABLE OF CONTENTS Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i Certificate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii Abstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv List of Figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 2 3 1.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.3 Aims and Objectives . . . . . . . . . . . . . . . . . . . . . . . 2 1.4 Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.5 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . 3 1.6 Social Impact . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.7 Project Outline . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Background Study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2 Related Works . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.3 Scope of The Project . . . . . . . . . . . . . . . . . . . . . . . 8 2.4 Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.5 Proposed System . . . . . . . . . . . . . . . . . . . . . . . . . 10 The System Design methodology and Procedures . . . . . . . . . . . . . 3.1 12 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 v 3.2 Process Flow Diagram . . . . . . . . . . . . . . . . . . . . . . 12 3.3 Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . 14 3.4 Data Flow Diagram (DFD) . . . . . . . . . . . . . . . . . . . 16 3.5 4 3.4.1 Data Flow Diagram Level 0 . . . . . . . . . . . . . 16 3.4.2 Data Flow Diagram Level 1 . . . . . . . . . . . . . 16 3.4.3 Data Flow Diagram Level 2 . . . . . . . . . . . . . 17 Logical Data Model . . . . . . . . . . . . . . . . . . . . . . . 19 Result And Implementation . . . . . . . . . . . . . . . . . . . . . . . . 20 4.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 4.2 Consumer Panel Interface . . . . . . . . . . . . . . . . . . . . 21 4.2.1 Homepage . . . . . . . . . . . . . . . . . . . . . . 21 4.2.2 My Account: User Profile . . . . . . . . . . . . . . 21 4.2.3 Product Categories . . . . . . . . . . . . . . . . . . 22 4.2.4 Product Description . . . . . . . . . . . . . . . . . 23 4.2.5 Wishlist . . . . . . . . . . . . . . . . . . . . . . . . 23 4.2.6 Live Chat . . . . . . . . . . . . . . . . . . . . . . . 25 4.2.7 Cart Page . . . . . . . . . . . . . . . . . . . . . . . 26 4.2.8 Shipping Details and Payment . . . . . . . . . . . . 27 4.2.9 Order Details . . . . . . . . . . . . . . . . . . . . . 27 4.2.10 Product Review and Rating . . . . . . . . . . . . . . 28 4.2.11 About Us . . . . . . . . . . . . . . . . . . . . . . . 28 4.2.12 Contact Us . . . . . . . . . . . . . . . . . . . . . . 29 4.3 4.4 5 Admin Panel Interface . . . . . . . . . . . . . . . . . . . . . . 29 4.3.1 Admin Login . . . . . . . . . . . . . . . . . . . . . 29 4.3.2 Inventory Management Page . . . . . . . . . . . . . 30 Android App Interface . . . . . . . . . . . . . . . . . . . . . . 31 Tools and Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 5.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 5.2 Framework: WordPress . . . . . . . . . . . . . . . . . . . . . 32 vi 5.3 5.4 6 Client Side Technologies . . . . . . . . . . . . . . . . . . . . 33 5.3.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . 33 5.3.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5.3.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . 34 Server Side Technologies . . . . . . . . . . . . . . . . . . . . 34 5.4.1 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . 34 5.4.2 MySQL Database . . . . . . . . . . . . . . . . . . . 35 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.2 Limitation of the project . . . . . . . . . . . . . . . . . . . . . 36 6.3 Practical Implications . . . . . . . . . . . . . . . . . . . . . . 37 6.4 Future Works . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii 38 List of Figures 2.1 Background Study On Bangladesh-Based E-Commerce . . . . . . . . 2.2 Business Model: B2C . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.3 Block Diagram of Proposed System . . . . . . . . . . . . . . . . . . 11 3.1 Process Flow Diagram of ”OnnoRokom.store” . . . . . . . . . . . . . 13 3.2 Use Case Diagram (UML) of ”OnnoRokom.store” . . . . . . . . . . . 15 3.3 Data Flow Diagram Level 0 . . . . . . . . . . . . . . . . . . . . . . . 16 3.4 Data Flow Diagram Level 1 . . . . . . . . . . . . . . . . . . . . . . . 17 3.5 Data Flow Diagram Level 2 . . . . . . . . . . . . . . . . . . . . . . . 18 3.6 Logical Data Model of ”OnnoRokom.store” . . . . . . . . . . . . . . 19 4.1 Homepage of OnnoRokom.store . . . . . . . . . . . . . . . . . . . . 21 4.2 Registration and Login Page of User . . . . . . . . . . . . . . . . . . 21 4.3 User Profile Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . 22 4.4 Category of the Products . . . . . . . . . . . . . . . . . . . . . . . . 22 4.5 Product Description . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.6 Add Product to Wishlist . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.7 Initial View of Wishlist . . . . . . . . . . . . . . . . . . . . . . . . . 24 4.8 Product on Wishlist . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 4.9 Live Chat Before Start . . . . . . . . . . . . . . . . . . . . . . . . . 25 4.10 Live Chat with Admin . . . . . . . . . . . . . . . . . . . . . . . . . . 25 4.11 Product on Cart Before Checkout . . . . . . . . . . . . . . . . . . . . 26 4.12 Change Items List Before Checkout . . . . . . . . . . . . . . . . . . 26 4.13 Shipping Details and Payment Gateway . . . . . . . . . . . . . . . . 27 viii 8 4.14 Consumer Order Confirmation Details . . . . . . . . . . . . . . . . . 27 4.15 Product Review and Rating . . . . . . . . . . . . . . . . . . . . . . . 28 4.16 About Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 4.17 Contact Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.18 Login page for Admin . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.19 Inventory Manage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 4.20 Consumer Orders Manage . . . . . . . . . . . . . . . . . . . . . . . 30 4.21 Mobile Application View of OnnoRokom.store . . . . . . . . . . . . 31 ix Chapter 1 Introduction 1.1 Overview Nowadays, online business platform has become chart-topping phenomenon to reach consumers progressively. Even more businesses are establishing web services that allow consumers to undertake commercial transactions over the internet[1]. The main purpose of this project is to design and developed a fully functional an ecommerce application for our digital business platform where customers may purchase product over online (such as Fashion Wear’s and Accessories). This e-commerce application is meant to make online shopping simple, enjoyable, secure, effective, and time-saving for everyone. Consumers can use this virtual store to browse and select products from a catalog, as well as add items to their cart based on their preferences. The products will be presented in the shopping cart as an order at checkout, and extra information about the billing address and transaction will be required to finalize the order placing[2]. Users can effectively interact and administrators can effectively control the application due to the user-friendly design and functionality. 1.2 Motivation Consumer shopping behavior has evolved dramatically as living standards have improved and the pace of life has quickened. The internet economy’s role in e-commerce 1 is reshaping people’s lifestyles. Consumers are increasingly turning to the internet for their buying needs. On top of that, A couple of years ago, I wanted to buy a product from Amazon, but I couldn’t because I couldn’t pay the price in dollars. And I know so many people in our country want to purchase products from Amazon, but they can’t do this like me because of the dual currency problem. Therefore, Unemployment is one of our country’s key issues. Around 66 percent of graduates, including honors students and postgraduates from public, private, and National Universities, are unemployed. We didn’t want to be among the 66 percent once we graduated. As a result, we sought to determine that starting an internet business, which would minimize costs and risks when compared to launching a physical store, would also solve the dual currency problem, as our site will sell Amazon products. In order to sell and distribute products based on consumer demand, we needed an interactive digital business platform. In addition, we had a plan to develop a virtual store where customers could purchase high-quality products at affordable prices, and the system’s overall functionality would be reliable and user-friendly. 1.3 Aims and Objectives This project ”OnnoRokom.store” aims to simplify virtual shopping system and bring it to market for maximum use, as well as to provide a web-based conduit where consumers can log on to our system and place orders for commodities or items they like, and then pay via the online devices. This project has a number of objectives. These are as follows: ➢ To establish an online business platform where we can sell various consumer products. ➢ To create an interactive and user-friendly interface to render different products. ➢ To give an opportunity to create and account and online payment for consumers. ➢ To make purchasing system convenient, secure, effective as well as time saving. 2 1.4 Features The success of an e-commerce store is determined by a variety of factor, among these, one of the most critical factor is the features website provides to its customer[3]. There are several functionality or feature that may make an e-commerce website more userfriendly for clients while also making it easier to administer for the owners. However, in our proposed system we have some intuitive features that will give better usability and ease to end users. These are as follows: ➢ User friendly navigation and search bar. ➢ Sign-in, Sign-up and Dashboard for User and Admin. ➢ Shopping Cart ➢ Featured and Related Product listing ➢ Wishlist and Live Chat ➢ Product Description and Order Confirmation ➢ Product Review and Rating ➢ Product Filtering and Shorting ➢ Shipping Details and Secure Payment Methods 1.5 Problem Statement At present, the quality of the product is a recurring occurrence with e - shopping. Consumers are hesitant to acquire a guaranty from vendors concerning the quality of their products. Other people’s reviews aren’t always trustworthy, therefore consumers can’t always trust the product’s quality. It is tough for a consumer to inspect the quality of each goods that retailers are offering. Fraudulent retailers frequently deceive customers in order to increase sales and more profits[4][5]. There are many more problems consumers faces among these money and product return policy, privacy policy etc are vital. 3 Sometimes consumer get confused about their product returning policy due to clear information from vendors. It’s really time consuming to get money back of their buying products. As we know online shopping sites store consumers important information’s such as address, personal details, mobile and bank account number etc. If existing virtual store improve their web security this will give consumers a secure and convenient shopping experience which will increase sells and profits of business owners[6]. 1.6 Social Impact Online buying portals are designed to allow users to sell and promote their items as well as purchase any items they require via the internet. Creating an entirely new web based e shop will provide job opportunities for many unemployed individuals. Online retailing allows busy people to save time. They can devote their time to more essential pursuits. There are heavy traffic congestion in our country that lead to wastage of time for individuals, thus digital shopping would save them a lot of time. As a result, people’s will profit monetarily from using this system. 1.7 Project Outline In this section, we have summarized the topic overview, which we will discuss details in the next chapter. This is the short summary of all of the chapters we will discuss later below. ➢ Chapter 1: This chapter is already covered. We have discussed the aims and objectives, motivation, features and social impact of our project. ➢ Chapter 2: In this chapter, we will be discuss about background study, proposed idea and project scope and challenges. ➢ Chapter 3: In third chapter, we will be discuss about system design methodology and procedures of our project. ➢ Chapter 4: Here we write about result and implementation of our project. 4 ➢ Chapter 5: Here We will be broadly discuss about tools and technologies that used to implement this project. ➢ Chapter 6: Here we discussed about conclusion, limitations and future works of our proposed system. 5 Chapter 2 Background Study 2.1 Overview Throughout this chapter we will mainly discuss about previous research activity of different authors in the similar field (such as online shopping) have been conduct before. Also, we will comprehensively discuss about our project scope, it’s challenges and analysis we have been done on different Bangladesh based e-commerce application. 2.2 Related Works The inexorable expansion of the internet and the quick advancement of technology have paved the way for online buying and selling over websites. Web based technology has progressively picked up steam over the last decade, changing the way businesses promote and sell their goods and services. The rise of virtual stores has been the most significant phenomena for marketers[7]. In today’s environment, e-commerce provides customers with a wide range of choices and ease, providing for product, service, and delivery schedule flexibility. This saves money for both the buyer and the seller and opens up opportunities for significant revenues[8]. The importance of e-commerce is highlighted in a study undertaken by researchers at the Georgia Institute of Technology’s GVU (Graphics, Visualization, and Usability) Center. ”E-commerce is taking off both in terms of the number of users purchasing as well as the overall amount peo6 ple are spending via Internet based transactions,” the researchers write in a summary of the findings from the tenth survey[9]. Although security is still the major reason why more consumers aren’t buying products from the internet, the GVA (Gross Value Added) report also demonstrates that confidence in e-commerce security is growing. According to Meskaran (2013), when privacy information is made more salient and accessible, some consumers are willing to pay a premium to purchase from privacy protective websites[10]. As more individuals confide in present encryption technology, more consumers are likely to shop online more regularly. Customer feedback is another key aspect of e-commerce site design. The user-website interaction cycle is not complete until the web site responds to a comment inputted by the consumers. According to Norman, ”feedback sending back to the user information about what action has actually been done, what result has been accomplished is a well known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback”[11]. For greater usability, a competent e-commerce website should display the following characteristics to customers[12]: ➢ knowing exactly whether or not an item was kept in the shopping cart. ➢ After adding an item to the shopping cart, can return to other parts of the website. ➢ Straightforward scanning and choosing items from a list. ➢ Product categorization should be effective. ➢ Seamless navigation from the top of the page to product description and order links. ➢ Shopping icons or buttons that are obvious. ➢ Simple and effective security alerts or notifications. ➢ Product information is presented in a consistent manner. 7 Currently, more organizations in Bangladesh are creating their own websites in order to raise awareness and endorse their services to the user community[5]. According to the e-commerce Association of Bangladesh (e-Cab), there are 700 active e-commerce sites and 8,000 e-commerce pages on Facebook and these e-commerce sites handle ten billion taka in transactions each year. Figure 2.1: Background Study On Bangladesh-Based E-Commerce Above, figure 2.1. shown background study on Bangladesh based e-commerce. On the emergence of Bangladeshi e-commerce businesses, we have been conducted background study on some Bangladesh-based popular e-commerce applications (Such as Daraz[13], Evaly[14], AjkerDeal[15]), focusing on their service type, strengths, drawbacks, and technologies they uses[16]. We also shown our proposed e-commerce system ”OnnoRokom.store”[17] along with above systems. 2.3 Scope of The Project E-commerce has grown in popularity over time and is now one of the fastest growing areas of the internet. However it took a bit of time for end-users to adopt it, we are now at a situation where the majority of consumers prefer to purchase online. People in Bangladesh prefer to shop online rather than go to a physical store these days because 8 of different payment method, hot dealing offers on products and easy delivery etc. Our proposed e-commerce application give facilities to browse product and buy products from online, anytime, anywhere. Consumers can purchase international products through our website with competitive price. Also, we have secure payment gateway system which is trustworthy. We ensure 24/7 support for our valuable customer. Since, our e-commerce application is also available in smartphone so it will be more accessible and effective. 2.4 Challenges The economy has gained new prospects on the Internet in today’s world, as a result of globalization. Economic activity is more efficient and profitable when it is implemented using the most up-to-date information technology. The importance of this topic stems from the emergence of a new sector in the global economy: e-commerce, that is one of the aspects of the ”new economy” and is steadily gaining great implications. However, the digital market place is not solid enough comparison to traditional market. For various reasons, in Bangladesh, there are the following hurdles to e-commerce:: ➢ There seems to be no development in the regulatory and statutory framework, which results in difficulties including intellectual property rights protection for products and services delivered through electronic commerce. As a result, investors and potential consumers are losing faith in the market, and the pace of growth is diminishing[18]. ➢ There’s many flaws with the international concept of e-commerce as a whole. These include, lack of conviction that the partner company and the goods or services it provides reside in other places around the world and discrepancies in corporate rules and norms in these businesses[19]. ➢ The lack of a reliable internet payment method and online fraud is quite prevalent. 9 2.5 Proposed System Our main concept for this project was to create an e-commerce application based on the Business-to-Consumer (B2C) paradigm. To be more explicit, we call this technique ”B2C,” which stands for ”Business-to-Consumer,” when a business organization seeks to reach out directly to its ultimate customer[20]. Bangladeshi shoppers would be able to buy products from prominent online stores such as Amazon[21] and Alibaba[22] ( currently have Amazon.com[21]) in their national currency using our proposed platform. Furthermore, Customers do not need to go outside to acquire things that meet their demands under our suggested solution. Figure 2.2 and 2.3 below showing the business model and block diagram of the proposed system respectively[23]. Figure 2.2: Business Model: B2C 10 Figure 2.3: Block Diagram of Proposed System Consumers may search, add, and purchase products from many categories using our e-shop. The featured product will be displayed in the homepage. Using default shorting, visitors can reduce their search results. Consumers can pay for the items online from any location, and product will be delivered to their doorstep. Consumers can rate and comment on any of the products on the list. Overall, the suggested method is enjoyable, secure, hassle-free, cost-effective, and time-saving. 11 Chapter 3 The System Design methodology and Procedures 3.1 Overview In order to design e-commerce application, a relational database should be created first. The data model and the process model are the two aspects of conceptual design. The data model specifies which and how data should be saved in the database, whereas the process model specifies how the data should be handled and how different actors interact with the system. In this section, we discuss about design methodology and procedures of our project to accomplish our aims and objectives precisely. 3.2 Process Flow Diagram This is the Process Flow Diagram of our e-commerce application. It’s showing separate step of operation in sequential manner. The features of our system mentioned in flow chart diagram. The below figure 3.1 of the flow chart illustrates the methodology used by our system to carry out the process. 12 Figure 3.1: Process Flow Diagram of ”OnnoRokom.store” From the above figure 3.1 , the reader will be able to acquire a better understanding of the proposed online based e-commerce web application. Here, we go over the 13 process of how the system works step by step. All the features are separated into two ensuing panels: Admin and Consumer. Consumers can orders their desire products using account with a legitimate Email address and a secure password. After completing the registration procedure, they will be able to confirm their order. Before checkout, Customers can make several adjustments to their orders in the order cart where admin manages all the operation related to actions occurred by the customers. The Admin is in responsible of keeping track of the items in different categories, as well as registering and modifying them. The admin also controls the customers who have access to the system and keeps track of orders, purchases, payments, and transactions from start to finish, ensuring that they are delivered successfully. 3.3 Use Case Diagram A Use Case Model is often call as Unified Modeling Language which show the graphical demonstration of the processes or functions that the system perform based on activities done by external user (actor such as consumers, admin). The Use Case Diagram depicts the system processes or functionalities as well as flow of data between them. The programmer will get a smart strategy of what should be taken into account while implementing the e-commerce application with the assist of this Use Case Model. Figure 3.2 shows the Use Case Model of our e-shop project. ➢ Manage customer information: Where the system’s administrator manage the customers who have access to the system. ➢ Manage product and category status: Where the admin will keep track of the items in a specific category so that they may be shown as a special offer to consumers . Registering products, updating product status, and tracking orders and delivery to consumers also part of the keep track process. ➢ Manage order and deliveries: This process describes how the info from the customer’s request and orders was handled all the way to delivery. 14 Figure 3.2: Use Case Diagram (UML) of ”OnnoRokom.store” ➢ Manage payment: This process describes how the payment info and request in products purchase will be handled all the way to transaction. ➢ Manage transaction: This process describes how the transaction info of customers on product purchase will be handled by admin all the way to the successful order placement. ➢ Manage customer feedback: This process describes how the customer feedback and rating on different products will be handled by the admin all the way to friendly service. 15 3.4 Data Flow Diagram (DFD) Data Flow Diagram (DFD) is often used as a initial step to create of the e-commerce site without going into great details. Basically, it’s consists of overall application data flow and process which show how data is processed in a system in terms of input and output. A data flow diagram can dipping into great details by using levels (such as Level 0,1,2 etc). Figures 3.3, 3.4, 3.5 are showing data flow diagram of our proposed system. 3.4.1 Data Flow Diagram Level 0 Context Diagram is another name for DFD Level 0. It’s a basic overview of the entire system or process that’s being evaluated or simulated. It’s meant to be a quick peek into the system, displaying it as a solitary process with its connections to external entities. Figure 3.3: Data Flow Diagram Level 0 Here, in figure 3.3 circular shape is a process or system that has two external entities, customer and admin, within a rectangular box connected through arrow signs that show input and output data flow between the customer and the system, system to admin, and vice versa. 3.4.2 Data Flow Diagram Level 1 DFD Level 1 contains a more comprehensive overview of the Context Level Diagram’s entities and process.Here, in figure 3.4, we emphasize the system’s main functions and 16 break down the single high-level process of the Context Diagram into its sub-processes. Figure 3.4: Data Flow Diagram Level 1 For managing the customer info, process 1.1 is responsible. For product, the purchase activities involved are represented by process 1.2, 1.3, 1.4 and process 1.5 is responsible for customers feedback. Admin is the owner of the website. Admin manages all of the process. 3.4.3 Data Flow Diagram Level 2 DFD Level 2 delves even deeper into elements of DFD Level 1. It may be essential to add extra text and bubble to get the required level of disclosure regarding the system’s 17 functionality. Here, in figure 3.5, we depicts the notions of where data inputs flow and arrive into the system. Figure 3.5: Data Flow Diagram Level 2 The displayed level not only illustrates the system’s detailed processes, but also the explicit route of the data that passes through it. And the data input’s ultimate destination is the databases, wherein the system generates the output. 18 3.5 Logical Data Model A Logical Data Model (LDM) is a type of data modeling that includes detailed descriptions of data elements and used to construct graphical representations of data entities, attributes, keys, and relations. We designed a logical data model of our system database which shown in figure 3.6 consisting of 9 tables and relations between them. Figure 3.6: Logical Data Model of ”OnnoRokom.store” 19 Chapter 4 Result And Implementation 4.1 Overview A user interface, sometimes known as a ”UI,” seems to be the design of a webpage or program that is accessible to the users. For e-commerce businesses to provide customers with clear navigation and a pleasant shopping experience, a user-friendly UI is essential[12]. User interface should portray the different aspects of a business on a homepage. It should meet the user requirements and expectations[24]. We endeavored to uphold Jacob Nielsen’s usability guidelines for user interface design in this project in order to provide end users with an intuitive shopping experience[25]. 20 4.2 4.2.1 Consumer Panel Interface Homepage Figure 4.1: Homepage of OnnoRokom.store 4.2.2 My Account: User Profile Figure 4.2: Registration and Login Page of User 21 Figure 4.3: User Profile Dashboard 4.2.3 Product Categories Figure 4.4: Category of the Products 22 4.2.4 Product Description Figure 4.5: Product Description 4.2.5 Wishlist Figure 4.6: Add Product to Wishlist 23 Figure 4.7: Initial View of Wishlist Figure 4.8: Product on Wishlist 24 4.2.6 Live Chat Figure 4.9: Live Chat Before Start Figure 4.10: Live Chat with Admin 25 4.2.7 Cart Page Figure 4.11: Product on Cart Before Checkout Figure 4.12: Change Items List Before Checkout 26 4.2.8 Shipping Details and Payment Figure 4.13: Shipping Details and Payment Gateway 4.2.9 Order Details Figure 4.14: Consumer Order Confirmation Details 27 4.2.10 Product Review and Rating Figure 4.15: Product Review and Rating 4.2.11 About Us Figure 4.16: About Us 28 4.2.12 Contact Us Figure 4.17: Contact Us 4.3 4.3.1 Admin Panel Interface Admin Login Figure 4.18: Login page for Admin 29 4.3.2 Inventory Management Page Figure 4.19: Inventory Manage Figure 4.20: Consumer Orders Manage 30 4.4 Android App Interface Figure 4.21: Mobile Application View of OnnoRokom.store 31 Chapter 5 Tools and Technology 5.1 Overview This project have been developed using the WordPress framework, PHP programming language, and MySQL relational database. Furthermore, the user interface was developed using custom HTML, CSS, and JavaScript scripting programming language, giving our website an interactive and user-friendly appearance. 5.2 Framework: WordPress WordPress is a piece of web software that is being used to construct a stunning website or blog. It all started with a single line of code in 2003 to improve the typography of everyday writing[26]. Since then, it has evolved to become the world’s largest self-hosted blogging service, with millions of websites and tens of millions of daily visitors[27]. In our project, we have been used WordPress framework- most popular and open source content management system (CMS). A content management system (CMS) is a tool that makes easy to manage important aspects of websites such as content[27]. On the cyberspace, over 43% of all websites are powers by WordPress. That mean’s WordPress is used by more than one out of every four websites we visit. There are several reasons to use this popular CMS, but we encountered some most important reasons that forced us to consider into account. 32 ➢ WordPress is an open-source software system and it has huge, friendly community for support. ➢ It’s secure and search engine optimization (SEO) friendly. ➢ Easy maintainability and significantly customizable with plugins ➢ WordPress is responsive and follows accessibility standards. ➢ WordPress makes us possible to scale websites and it’s affordable compared to others solutions. 5.3 5.3.1 Client Side Technologies HTML HTML (Hyper Text Markup Language) is a markup language for formatting content on the web[28]. We wouldn’t be able to arrange text, add images, or videos into website pages without HTML. HTML is the start of all we need to know about making interesting web pages. 5.3.2 CSS CSS (Cascading Style Sheets) is a style sheet language use to describing visual appearance of an HTML document[29]. CSS specifies how elements should appear on a screen. CSS allows us to keep a document’s informative content distinct from the specifics of how it should be displayed. In order for us to: ➢ Duplication should be avoided. ➢ Make maintenance easier. ➢ Use the same content in several styles for various purposes. 33 5.3.3 JavaScript JavaScript is a scripting language that provides interactivity to HTML websites. This is an interpreted language, which means that the scripts don’t need to be compiled beforehand[30]. Before JavaScript, web sites used to simply deliver static content. Developers might leverage JavaScript to give their consumers a more dynamic online experience by adding animations and other interactive components. When we click a button on a website, a side panel appears or a modal appears rapidly, that’s JavaScript in action. However, we use this technology into client side because of it’s adds interactive features to web sites easy manner, enable users to interact with them as well as browser friendly. It may also apply a variety of magical effects to the things in a webpage that gives visitor a better user experience. 5.4 5.4.1 Server Side Technologies PHP PHP stands for ”Hypertext Preprocessor”. PHP is a general purpose open source web programming language widely used for web development and it can be embedded into HTML also[31]. PHP equipped with vigorous tools to make developers more prolific. We used PHP (version 7.4.5) to make our website more dynamic and get connect with database. Therefore, the bulk of the core WordPress software is developed using the PHP scripting language. As a result, we decided that PHP would be an excellent choice for developing and customizing our project. There are many more specific reasons to use this technology. Let us describe it below. ➢ Open source, easy and quick start. ➢ Simple installation and cross platform availability. ➢ Vast community, top notch documentation and numerous resources to get help. ➢ Short Learning curve compared to other languages. 34 ➢ PHP is updated on a regular basis to stay up with the newest technological trends. ➢ PHP has in built support for working with MySQL and its also compatible with others databases. ➢ There is hosting availability, which makes PHP a cost-effective choice. 5.4.2 MySQL Database Currently, MySQL is most widely use relational database management system (RDMS). MySQL is based on the Client-Server Architecture. This paradigm is intended for endusers to use internet services to obtain resources from a server. Clients submit requests using web user interface, and the server responds with the desired result as soon as the instructions match. Performance, reliability, and portability are the three main principles of MySQL[32]. MySQL has become an optimal choice for administrators and developers to configure, implement, and maintain complicated applications during the development of a project. Below, we will look at why we chose MySQL as the database for our project. ➢ Open source and highly compatible. ➢ First and reliable. ➢ High availability which refers to an application’s capacity to cope in the occurrence of system breakdown. ➢ Scalability ➢ It’s ensure high security. ➢ Easy cloud deployment. 35 Chapter 6 Conclusion 6.1 Overview As a matter of fact, consumers, or more specifically, e-shoppers, are motivated to use e-commerce platforms for the following reasons: time and cost concerns, flexibility in order to spend more quality time with their family instead of working, stress avoidance in terms of beggars, mingling with people, and health-related issues. E-commerce offers more variety and options to pick from with less stress, and it allows one to save money by hitting a good deal, which is nearly impossible in a physical market scenario. Nevertheless, In this project we are developing a e-commerce system where we can sell our products and the users can easily get their desired products. Most of the students faces unemployment problem after their graduation and we don’t want that. That’s why we wanted to create our own business platform with doing this project. And we believe that this project will have an impact on the financial system of the country and society, including the elimination of our unemployment problem. 6.2 Limitation of the project We have a minor limitation that is we don’t have product recommendation system. When a user re-browse a website then according to his past searched product recommendation system shows the products that might be he like. It increases selling ratio. 36 So, it’s important for our website but we didn’t add yet. 6.3 Practical Implications The outcomes of e-commerce technology will be beneficial to present management practices such as developing corporate policies and strategies, as well as exchanging information with managers and company leaders. This project can be used by e-commerce website owners who want to boost their websites’ competition in the increasingly competitive online market. 6.4 Future Works At present OnnoRokom.com e-commerce website is a fully self-sufficient. If we want to start our business right now then we can do it. But for getting better position in competitive market we need to add few more things. And we will add in future. For example➢ Android app for our website. We already made an app but we need to make it more professional. ➢ Payment integration with SSL-COMMERZ. Since we do not currently have a trade license, we are now selling products through mobile payments and cash on delivery. We will convert the mobile payment system to SSL-COMMERZ when we create our own trade license. ➢ Product recommendation system. 37 References [1] Kenneth C Laudon and Carol Guercio Traver. E-commerce. Pearson Boston, MA, 2013. [2] Amir Manzoor. E-commerce: an introduction. Amir Manzoor, 2010. [3] Yenny Purwati. Standard features of e-commerce user interface for the web. Researchers World, 2(3):77, 2011. [4] Syed Mahmudur Rahman. Consumer expectation from online retailers in developing e-commerce market: An investigation of generation y in bangladesh. International Business Research, 8(7):121, 2015. [5] Md Mohiuddin. Overview the e-commerce in bangladesh. IOSR Journal of Business and Management, 16(7):01–06, 2014. [6] Brian J Corbitt, Theerasak Thanasankit, and Han Yi. Trust and e-commerce: a study of consumer perceptions. Electronic commerce research and applications, 2(3):203–215, 2003. [7] Md Swaid Sameh et al. The emergence of e-commerce in bangladesh and its growth. International Journal of Science and Business, 5(10):30–40, 2021. [8] Zhijie Zhao, Jiaying Wang, Huadong Sun, Yang Liu, Zhipeng Fan, and Fuhua Xuan. What factors influence online product sales? online reviews, review system curation, online promotional marketing and seller guarantees analysis. IEEE Access, 8:3920–3931, 2019. 38 [9] Colleen Kehoe, Jim Pitkow, Kate Sutton, Gaurav Aggarwal, and Juan D Rogers. Results of gvu’s tenth world wide web user survey. Retrieved April, 3(2003):31, 1999. [10] Fatemeh Meskaran, Zuraini Ismail, and Bharani Shanmugam. Online purchase intention: Effects of trust and security perception. Australian journal of basic and applied sciences, 7(6):307–315, 2013. [11] Donald A Norman. The psychology of everyday things. Basic books, 1988. [12] Jakob Nielsen. Usability engineering. Morgan Kaufmann, 1994. [13] Online shopping in bangladesh: Order now from daraz.com.bd. (n.d.). com.bd. retrieved february 9, 2022, from https://www.daraz.com.bd/. [14] (n.d.). com.bd. retrieved february 9, 2022, from http://www.evaly.com.bd. [15] Online shopping bd - clothing gadget shop. (n.d.). ajkerdeal.com. retrieved february 9, 2022, from https://ajkerdeal.com/. [16] Md Akbor Hossain, Md Akkas Ali, Muhammad Golam Kibria, and Mohammad Nuruzzaman Bhuiyan. A survey of e-commerce of bangladesh. International Journal of Science and Research, 2(2):150–158, 2013. [17] Islam, m. (2017, december 17). home. onnorokom. http://www.onnorokom.store. [18] Mahmudul Hasan and Mohammad Nurul Huda. E-commerce challenges, solutions and effectiveness perspective bangladesh. International Journal of Computer Applications, 70(9), 2013. [19] Jonathan Coppel. E-commerce: impacts and policy challenges. 2000. [20] Chandrasekaran Ranganathan and Shobha Ganapathy. Key dimensions of business-to-consumer web sites. Information & management, 39(6):457–465, 2002. [21] (n.d.-b). amazon.com. retrieved february 9, 2022, from http://www.amazon.com. 39 [22] Find quality manufacturers, suppliers, exporters, importers, buyers, wholesalers, products and trade leads from our award-winning international trade site. import export on alibaba.com. (n.d.). alibaba. retrieved february 9, 2022, from http://www.alibaba.com. [23] Md Shah Azam. Implementation of b2c e-commerce in bangladesh: The effects of buying culture and e-infrastructure. Advances in Global Business Research, 3(1):55–81, 2007. [24] James J Cappel and Zhenyu Huang. A usability analysis of company websites. Journal of Computer Information Systems, 48(1):117–123, 2007. [25] Jakob Nielsen. Ten usability heuristics, 2005. [26] Blog tool, publishing platform, and cms. (n.d.). wordpress.org. retrieved february 15, 2022, from https://wordpress.org/. [27] Vimal Ghorecha and Chirag Bhatt. A guide for selecting content management system for web application development. International Journal, 1(3):1, 2013. [28] Tutorial point. (2020). html tutorial (tutorial point, ed.). independently published. [29] Krause, j. (2016). css: Cascading style sheets. in introducing web development (pp. 65–86). apress. [30] The modern javascript tutorial. (n.d.). javascript.info. retrieved february 15, 2022, from https://javascript.info/. [31] Bakken, s. s., aulbach, a., schmid, e., winstead, j., wilson, l. t., lerdorf, r., suraski, z. (2000). php manual: Volume 2. iuniverse. [32] Mysql. (n.d.). mysql.com. retrieved https://www.mysql.com/. 40 february 15, 2022, from List of Acronyms E-Commerce Electronic Commerce COD Cash On Delivery GVU Graphic, Visualization and Usability GVA Gross Value Added e-Cab E-Commerce Association of Bangladesh B2C Business-to-Consumer UML Unified Modeling Language DFD Data Flow Diagram LDM Logical Data or Database Model UI User Interface CMS Content Management System HTML Hyper Text Markup Language CSS Cascading Style Sheet PHP Hypertext Preprocessor JS JavaScript SQL Structured Query Language RDMS Relational Database Management System SSL Secure Sockets Layer 41