Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

E-SHOP Online Shopping Mall

CTEC3451: Development Project

Firstly, I would like to thank DMU for giving us a good learning platform and providing a good learning atmosphere for me. Secondly, I would like to thank all the teachers at DMU. Their dedication to imparting knowledge to us has helped me to improve my academic level. Secondly, I would like to thank my classmates. They have always offered me some help outside of class time.

Introduction

The Internet has become increasingly popular as technology has evolved. E-commerce has displaced traditional business methods. People are becoming more choosing to shop online, and various e-commerce platforms have emerged. Online shopping malls provide an easy way for people to buy and buy goods. They can better understand the products and provide additional information for buyers to purchase the items they desire through the Internet.

The website designed in this paper first analyses the background and current situation of web development and the existing problems; secondly, it takes the business website development and construction as the main line, introduces the relevant technologies for developing the website, analyses the website requirements, the overall design, and the implementation of the essential functional module design; and eventually, this website utilizes the B/S three-layer structure. To actualize the features of user registration and login, product information, product search, online shopping, and product evaluation, the website, and back-end management side are designed in HTML5, CSS3, and JS technology, as well as PHP technology.

Background

The Internet has entered the Web 2.0 era, with considerable technological shifts and thinking, because of the upgrading of infrastructure and smartphone hardware and software, the rapid expansion of Internet users, and the explosive development of Internet access demands. The focus on users has reached an unparalleled degree at this point. A pleasant customer experience is just as vital as addressing people's desires for diversity and timely information.

To counteract the impact of the.NET platform's birth on the programming market, Microsoft, a well-known software firm, created the HTML5 framework with the help of java development ideas. Due to the platform's defensive nature, Microsoft has limited its availability to the most popular operating systems, such as Windows. Windows is the most widely used operating system in the country, both in the corporate and educational sectors. Simultaneously, the ease of development is acknowledged and employed by technical employees with this Microsoft platform.

NET, as the name implies is a networking framework designed for use on the Internet. This framework has seen the participation of many technical staff from both within and beyond the country, as well as the utilization of its website design and development. We provide a cost-effective solution for the creation of various management systems.

According to the current usage of inadequate, including web development, mobile development, desktop application development, the most used and easiest to manage or web development, the model, web development runs on the browser, plus a database server for administration. Web development has the benefit of being able to be used on any computer in the network, regardless of the environment. With a connection to the internet, it can be administered and operated from any place and at any time.

Purpose and Significance

Through the construction of the business system, enterprises will be integrated into the world economic integration system, and through the formation of the supply chain between such enterprises and many associated enterprises, government departments, and institutions, the business of other associated enterprises in production, sales, procurement, and many other aspects can be driven, resulting in a brand-new trade system with the market as its central axis. It will also accelerate the promotion of foreign trade, national informatization, and internationalization, thereby enhancing the quality of the economy in terms of international competitiveness, and advancement momentum, and achieving a comprehensive upgrade of the economic system and a new level of comprehensive strength.

Technical Analysis

1. HTML5

Since the advent of the web and Internet Explorer, HTML has been improved. This language was developed to fit the framework of Web Browser surfing. This website was originally designed to display static web pages on the Internet, but it has since been upgraded to handle HTML 6.0, XHML, etc. This is the hypertext markup language utilized by the majority of the world's computers.

This project is intended to build and design the layout of a website using Dreamweaver while mixing CSS styles and JavaScript effects to create a high-quality site.

In 2004, a small group formed the Web Hypertext Application Working Group (WHATWG). The W3C began work on a new version of HTML in 2006, and the first draft of HTML5 was published in 2008, while web 2.0 research was stopped the following year.

In the broadest sense, HTML5 also includes support for SVG and plug-ins. One of the Web Application APIs includes some of the most notable and eye-catching HTML5 capabilities.

(1) Server-Sent Events: server-started message events that enable server-side initiated updates in a similar way to the Push method.

(2) Web SQL Database: the client can save data in SQL form to a local database.

(3) Web Sockets: clients can communicate in both directions with the host via the Web Socket protocol, which is more robust, efficient, and traffic-reducing than XML HTTP Requests.

Web Storage (4): contractor local storage capability.

This permits clients to operate in a high-level programming language, such as C++.

Due to the significance of this established format and specification, someone must assume responsibility for HTML5, and the three organizations listed below will meet this challenge.

(1) Web Hypertext Application Working Group (WHATWG): Founded in 2004, it is comprised of technical personnel from Apple, Mozilla, Google, and Opera, among others, as well as other browser vendors. WHATWG concentrates on the creation of HTML and APIs for web applications.

(2) World Wide Web Consortium (W3C): The HTML Working Group of the W3C is in charge of the HTML5 specification.

This workforce is responsible for Internet protocols such as HTTP, and the new Web Socket API protocol defined by HTML5 is primarily the result of the IETF's work.

2. System development model

Due to the immaturity of the initial technology, only simple applications and functions have been able to be created for desktop applications from the best early development of DOS applications, generally used for computing, etc., to the later development of desktop applications before the browser had become popular. Then, as database technology and desktop application development language grew in popularity, C/S architecture software was added to the management. However, with the use of the C/S architecture process, the inconvenience of resource occupation and installation, as well as the real-time requirements for data management, along with the popularity of Internet Explorer and the study of the IE browser, the advantages of the B/S architecture management system in terms of the use of the environment, the efficiency of use, and the occupation of storage, etc. were rapidly promoted and made popular.

3. Viscose

Viscose (Visual Studio Code) has seen tremendous growth over the past many years, becoming an indispensable development tool. As an open-source project, it has attracted many fourth developers and home consumers, making it one of the most prominent open-source projects. It is functional, user-friendly, straightforward, and smooth, with a vast selection of plug-ins.

The benefits of Viscose include the following.

(1) Featherweight

The user experience is improved by the fact that Viscose is a lightweight editor with a small installation package and a quick startup time.

(2) Rich plug-ins

Front-end languages such as HTML, CSS, JS, TS, Vue, and React can be edited, as well as back-end languages such as JAVA and Python.

(3) With code tracking capabilities

Viscose may annotate the code, allowing the user to know which files have been edited and which lines of code have been changed.

4. JAVASCRIPT

JavaScript engines are also sometimes called virtual machines, or VMs for short (Crowder, T. J.. 2020). JavaScript is a scripting language used for special effects production, front-end validation, time selection, and text editing, among other applications. In web development, front-end artists must grasp the scripting language JavaScript. What we think of as “JavaScript” is standardized as “ECMAScript” by Ecma International, 1 a standards organization responsible for multiple computing standards (Crowder, T. J.. 2020).

CSS is used to control how your pages look. For example, you can use CSS to specify that a typeface should be a large, bold Arial typeface or that the background of a page should be a light green (Rob Larsen 2013).

CSS is the style that can unify the site's design style using encapsulated CSS, however, web design must also be employed. It plays a crucial influence on the aesthetics of the website.

CSS's fundamental function in web development is to separate the document's structure (expressed in HTML or other pertinent languages) from the document's appearance (CSS). There are numerous benefits to this separation.

(1) Enhancing the document's readability.

(2) Increased flexibility in the document's structure.

(3) The author and reader influence the document's presentation.

(4) The document's structure is simple and straightforward.

Feasibility analysis

The next phase in requirements analysis is to determine whether these requirements can be met and whether the prerequisites for implementing the requirements have their own needs. This is a prerequisite for a project's library management system design to be complete. The length of project development is likely to be brief, and it is feasible to develop under budget, much less to design in situations when technical requirements aren't met, which is comparable to the ideal. The condition is exceptionally terrible.

It is possible to realize this book management project based on the ideal demand analysis and current conditions.

(1) Financial viability

Any system development incurs costs, including the cost of development time (mostly based on the choice of development tools) and the choice of hardware conditions necessary (network environment and PC), as well as costs associated with post-maintenance and other factors. Initially, the development tool was a web form, a highly effective development tool. Its enclosed plug-in structure and ease of creating code considerably cut development expenses and time. Mysql's visual development tool for table building and design also reduces time expenditures. As the required development for this project is conducted on a PC with the Windows operating system, which is widely used, the hardware input cost is modest and presently meets the project's development needs. Again, because it is designed in website mode, all functional improvements require merely code modifications and Tomcat server deployment. The client is in browser mode. Therefore, there is no need for redeployment or reinstallation, which reduces maintenance expenses. In terms of development time, hardware conditions, and post-maintenance, the cost is minimal. This article's implementation can be fully satisfied.

(2) Technical practicability

Due to the college PHP training program and Mysql database study, mastery, and comprehension of technology, the development of the student project, whether from code writing, web design, database design, etc., already have the prerequisites to realize the project's function. Likewise, the PHP + HTML5 framework is an excellent website creation platform. Its platform is appropriate for the development of modest to medium-sized projects. The circumstances for the implementation of the project's platform technology are functioning. Mysql is once more learning the syntax for insert, update, delete, select, and other operations, in addition to JavaScript, CSS, and other web technologies. This is a complete application of university-learned knowledge. Therefore, all technical requirements have been met.

(3) Operational practicability

In terms of operation, the browser mode has developed how people use computers, and with the rapid diffusion of computer operation information, people are already highly accustomed to using computers. In addition to the specific functional logic developed for the project, the operation is also based on the refinement of people's operating habits, making it highly intuitive for users to work.

As stated previously, we have analyzed the economics from the perspective of development time and development tools, maintainability, the technical feasibility from the perspective of programming language and database, web design, and the operational feasibility from the perspective of Microsoft's operating system and the Internet's popularity. We have determined that the project's development is entirely feasible.

Introduction to website features

Website functions.

(1) Registration page: to achieve user registration, including username, password, address, telephone, and other information.

(2) Login page: to add product information to the shopping cart through user verification login.

(3) News and information page: introduce product and industry information related to products.

(4) Mall page: display product information, users can display product information by category, color, and price, add to cart and buy now and search for products.

(5) Personal center: to manage personal information, order view, evaluation, collection view, etc.

(6) Shopping cart page: users can choose to continue shopping or checkout; checkout requires filling in the order to generate an order.

Backstage management page

(1) Login: to achieve administrator login verification, through then enter the background management interface.

(2) Order management: Manage and maintain the user's order information.

(3) User management: to achieve the management and maintenance of user information.

(4) Operation management: to manage and maintain the system operation information.

(5) Article management: Management and maintenance of news and information.

(6) Mail management: Management and maintenance of mail information.

(7) Advertising management: Management and maintenance of the advertising content of the website.

 

Data flow diagram

Online Shop System Top-Level Data Flow Diagram

 

Online shopping mall system first layer data flow diagram

 

The user information management data flow diagram is shown in the figure

 

Commodity Management Data Flow Diagram

 

Operating procedures

User Function Flow Chart

 

Administrator Function Flowchart

 

Database

Database conceptual design is the planning of database entities to be employed in the system based on the system's analysis and design. The E-R diagram is the principal tool for describing the conceptual model. The following entities are planned precisely for this system based on its analysis: users, products, product categories, administrators, and orders.

 

User database ER diagram

 

Product database ER diagram 

 

Order database ER diagram

UI

The login module enables the user name and password to be validated; if the validation is successful, the product can be purchased; otherwise, it can only be viewed.

 

 

This online shopping mall's homepage features a top-and-bottom layout, with a menu bar at the top and news, new goods, and recommended products at the bottom.

 

The user picks the product, then navigates to the product's information page. The shopping cart is activated when the user clicks the Add to Cart button on the product detail page.

 

The user taps the shopping basket to reveal the product's pricing and quantity details. Additionally, users can examine product details.

 

 

 

System testing

Before the project is put into use, it must be tested. Testing is time-consuming, and many large firms have their testing department. Testing is also feedback on the programmer's code quality. Functional testing is straightforward and typically verifies whether errors are reported, whereas analytical testing focuses on determining the test's functional interconnection. To comprehend testing is to comprehend the entire software development process and to fix the procedure for existing projects. Black-box and white-box testing are examples of more conventional testing approaches. Due to time constraints, the testing for this project focuses primarily on essential functions.

Test Method

There are numerous testing methods. However, they are all adaptable and centered on the test's aim. It is essential not to be rigid but to test all areas of the library management project while adhering to testing principles and to allow users to make pre-evaluations and adjustments to their opinions after the technical testing is complete. Both technical and user are taken into account. Currently, the testing procedure for this project consists of the following stages:

Professional evaluation: Professional testing is performed with the knowledge gained. Functional testing, logic testing, efficiency testing, and data correctness testing are the primary focuses of this procedure. Whether the software process is functioning, whether there are software issues, and whether the software logic aligns with the requirements analysis, this type of testing is predominately comprised of professional testing and inspection, the occurrence of testing problems, and the programmer's participation in resolving the issue promptly. However, this design's testing knowledge could be more professional, as it is limited to the software process of testing, functional testing, and data correctness.

User testing: testing the ease of operation, the flow of operation, and other user concerns about the interface, the testing method to collect timely feedback from user testing to discuss and address these problems.

Final testing phase: this phase is primarily for the first two phases of the testing process, a software development quality assessment and software development process problems encountered. A summary phase so that the following phase can more effectively avoid such problems; without a summary, there is no progress.

(1) Test cases for Users to the home page

 (2) Test cases for visitors to the home page

NO.	OA002
Prototype description	Main page
Aim	Testing the integrity of the home page functionality
Prerequisites	NO
Participants	Visitors
Sub-number	input	Operation steps	Expected results	Actual results	Status
OA002a	No	1. Go to the home page 2. View mall products and other information 3. Search for product information or view product information by category 4. View product information 5. Click to add to the cart	View, search successfully; add to cart failed, "You are not logged in"

After system development, a test strategy and test cases were established per the system requirements. During the testing phase, each functional module implemented in the system was thoroughly examined, including the addition, deletion, and verification of data. Initial testing revealed that there were bugs in the system, but after one revision, all functional enhancements were implemented and retested, and no bugs were detected. In conclusion, the system has met its design objectives and requirements.

Reference list

Crowder, T.J. (2020a). JavaScript : the new toys. Hoboken, Nj: John Wiley & Sons. P.2.

Crowder, T.J. (2020b). JavaScript : the new toys. Hoboken, Nj: John Wiley & Sons, P.2.

Larsen, R. (2013). Beginning HTML and CSS. John Wiley & Sons, p.33.