Document

Table of Contents

1. Introduction:

2. Database design:

3. Wireframes: 6

4. Functionality of client and server 10

5. References: 16

1. Introduction:

This e-commerce web application is mainly to provide a platform for users to buy all kinds of goods. Buyers and vendors are the main users , which have different permissions on the system. For example, vendors can add promotions and change the price while buyers can’t modified them. This paper mainly describes the two functions: login and register. If a user haven’t registered yet. He/She can create a account by entering username, password and consistent password. After that, He/She can log in by input them again.
Based on C/S structure, this system uses the html markup language to lay out structures, beautifies pages by JavaScript and applies Flask, MySQL and Python 3 on the server(Vyshnavi and Malik, 2019). Adopting the object-oriented development mode for software development can well meet the needs of practical use, improve the corresponding software erection and program coding.

1. Database design:

ER Design:

(Figure1: Entity Relationship Diagram)

According to the requirement, the nine database tables were designed to face the demand.

One to many relationship

"comment_id" in the table "product" is a foreign key, it refers to "comment_id" in table "Comment", as one product corresponds to many comments.

The "product_id" in the "Product_type" table is a foreign key, it refers to "product_id" in table "Product", as a type corresponds to more than one product .

1.3 The "likes_id" in the "Product" table is a foreign key, it refers to "likes_id" in table "Likes", as a product can have many likes .

1.4 The "buyer_id" in the "Comment" table is a foreign key, it refers to "buyer_id" in table "Buyer", as a buyer corresponds to more than one comments .

1.5 The "product_id" in the "Vendor" table is a foreign key, it refers to "product_id" in table "Product", as a vendor corresponds to more than one products .

1.6 The "promotion_id" in the "Vendor" table is a foreign key, it refers to "promotion_id" in table "Promotion", as a vendor can add more than one promotion.

1.7 The "promotion_id" in the "Product" table is a foreign key, it refers to "promotion_id" in table "Promotion", as a Product corresponds to more than one promotion.

1.8 The "buyer_id" in the "Likes" table is a foreign key, it refers to "buyer_id" in table "Buyer", as a Buyer corresponds to many likes.

1.9 The "buyer_id" in the "Purchase_record" table is a foreign key, it refers to "buyer_id" in table "Buyer", as a buyer can own many records of purchase.

Many to many relationship

2.1 The "product_id" in the "Buyer" table is a foreign key, it refers to "product_id" in table "Product", as a Buyer can buy many products and a product can be bought by many buyers.

2.2 The "product_id" in the "Shopping_cart" table is a foreign key, it refers to "product_id" in table "Product", as a product can be added to many carts and a cart can contain many products.

2.3 The "record_id" in the "Vendor" table is a foreign key, it refers to "record_id" in table "Purchase_record", as a vendor can get many records and a record can include more than one vendor.

3. One to one relationship

3.1 The "product_id" in the "Buyer" table is a foreign key, it refers to "product_id" in table "Product", as a buyer only can own one cart and one cart only belongs to a buyer.

1. Wireframes:
   1. Register

(Figure2.1: Register)

1. 1. Login

(Figure2.2: Login)

1. 1. Home

(Figure2.3: Home)

1. 1. Category

(Figure2.4: Category)

1. 1. Product

(Figure2.5: Product)

1. 1. Cart

(Figure2.6: Cart)

1. 1. Record

(Figure2.7: Record)

1. 1. Management

(Figure2.8: Management)

1. Functionality of client and server
   1. Register

Client: HTML+ CSS+ JavaScript(jQuery)

The most basic input representation is used to read the input on html registration page. The front end then needs to get the data after the user submits the username and password.

The user name and password are then sent (POST submitted) to the daemon using JavaScript binding to the registration button's click callback function and ajax. 

In addition, md5( import a file named md5.min.js from github) is used to encrypt the ciphertext of the user. The database will not save the plaintext of the user password. 

If the data entered in the password and confirm password are inconsistent. The front-end parses error information and displays it to the user.

Get the response body content passed by the back end. Because the response body must be a string, it needs to be converted to an object using JSON.parse.

Otherwise, it’ll turn to the log-in page.

Server: Flask+ MySQL + Python 3

To get the post request data, Node does not have an api to read the request body directly, so it firstly wraps a function. (Because when a client sends a post request to the server to transfer data, it is actually passing it piece by piece, so it cannot get the data directly.

The end uses function to get a string such as **username=1&password=2&repassword=3. And then needs to parse the string according to the desired structure through the split method. After getting the data, the back end carries out simple data verification, and returns the error information to the front end when the error occurs, and the front end interprets and displays it to the user.

If the request contains the username and password parameters, no operation is performed. So the original function user_register() is returned. If one parameter is missing, error message 400 is directly returned. Note that 400 here is not the statusCode status of the http request, but rather a convention between the back end and the front end, just one of the parameters of the returned data. flask.jsonfy() converts the key-value parameter to json format(Miguel, 2018).

Use the mysql database to create a database that stores user data. Next, select this database and then create a data table with two fields: username and password with variable length string of type varchar.

If the user name exists through querying the database, the registration fails. Otherwise, write the user name and password into the database, and return success.

1. 1. Login

Client: HTML+ CSS+ JavaScript (jQuery)

Login function: After entering the user name and password, if the user name and password are correct, the user goes to the home page.

First, create a new login page(log.html) by using html. Second, insert the jump to the login page into the html file on the homepage of the website. Next, bind the script syntax to the login button to enable a click-to-jump operation.

At the same time, the login button for simple design and the input for attributes. Finally, in the login page, JQuery is used to realize data interaction and transmission at the front and back ends.

After clicking the login button, the foreground sends ajaxsubmit request to submit the form data username and password to the background. 

The foreground receives json parameter, login succeeds, jump to the home page. On the contrary, it’ll return an error message.

Server: (Flask+ MySQL + Python 3)

As soon as the background receives the parameter, the controller calls the method of the service layer and sends the parameter to the service layer.

 The service layer determines whether the username exists. If there is no account, return error.Then the service layer continues to determine whether the password is correct. 

If it is correct, a user is returned to controller. Otherwise, a password error is returned. 

After receiving the user, the controller sends it to the foreground by putting the user into session as a key-value pair. The result ajaxresult is responded to the foreground as json.

1. 1. Home

The main functions are page transition and browse all the products.

Client: HTML+ CSS+ JavaScript (jQuery)

create a new home page by using html and css. At the top of home page, there are the three scroll performance of up-date products. The CSS override for the area to scroll is set to hidden, and the width is set to a relatively large value, such as 4000px. Then, every time you click the button of the previous page or the next page, calculate the number of the current page. If you have reached the last page, go back to the first page, scrolling is implemented by the left attribute of control div. You need two divs, with the position of the outer DIV set as retative and the position of the inner div as absolute. 

After that, there are seven buttons for page transition. Also, the following buttons for category can realize the page transition,which can go to the page including all the products about that category. Note that we're not really a <input type="button"/> button here, but a <a/> link. Bind it to a function with the same name behind sketch.py by defining href in "{{url_for(' function name ')}}".

Server: (Flask+ MySQL + Python 3)

To complete the redirect of the web page, two auxiliary functions url_for and redirect are required.

uploadfiles uploads images of the products to the background and returns to the front end to display them after the background processing is complete. When it's time to transfer the back-end to the front-end page presentation, you can put the incoming data into the render_template() function.

Buyers can't access the pages of ‘cart’ and ‘record’ when they are not logged in. Here is the main use of decorator to achieve(Restrict users from accessing some websites when they are not logged in)

When it's time to transfer the back-end to the front-end page presentation, you can put the incoming data into the render_template() function. Specific examples are as follows

1. 1. Category

The main functions are page transition and browse the products of a specific category.

Client: HTML+ CSS+ JavaScript (jQuery)

The page transition for the 6 buttons and the scroll pictures products are the same as “Home” page.

The product list content is realized with ul unordered list to realize the product list.

1. 1. Product

The main functions are browse the information of a product,

add products to cart(choose the count by ‘+’ and ‘-’), send comment on a product, click likes on a product

Client: HTML+ CSS+ JavaScript (jQuery)   

Server: (Flask+ MySQL + Python 3)

Click likes

When the buyer click likes,JQuery is used to realize data interaction and transmission at the front and back ends.

After clicking the login button, the foreground sends ajaxsubmit request to submit the  likes to the background. After getting the data, the back end store the number of likes plus one and return the likes to the front end.

Send comment:

On the product page there are many comments that previous people send.

Input the content on the blank box and click the ‘send’ button, then the buyer can send comment. After clicking the send button, the foreground sends ajaxsubmit request to submit the content of commend and username to the background. After getting the data, the back end store the comment and return them and the current time.

Edit the quantity of goods:

1. The "+" and "-" buttons are bound to the same click event
2. + +1
3. "-" -1
4. Pass the clicked product id goods_id
5. Get the shopping cart array in data to get the item object that needs to be modified
6. Directly change the quantity num of the commodity object
7. Reset the items in the shopping cart back to this.setCart in data

1. 1. Cart

1. First we need to get the shopping cart data in onLoad

2. According to the data of the items in the shopping cart, all items will be checked. checked=true
3. Calculate Select All: When all items in the cart are selected, select all will be selected. As long as one item is not selected, the Select All button will not be selected

Client: HTML+ CSS+ JavaScript (jQuery)

ajax asynchronous + embedded page

Use ajax for asynchronous operations. Asynchronous operations typically return json, so what we're doing here is we're going to return the embedded page and refresh the current page.

To put the embedded page of the shopping cart list into a new html page, the server just needs to go back and refresh the embedded page. Each time the button is clicked, the event checkSku(this) is called, which is on the main page.

Server: (Flask+ MySQL + Python 3)

Modify the shopping cart status of the database
Synchronous cache after database modification

1. 1. Record

Client: HTML+ CSS+ JavaScript (jQuery)

Server: (Flask+ MySQL + Python 3)

Flask is used to build a back-end server, connect to MySQL database, and achieve the API interface of obtaining student scores.

The front-end page is built with Vue, and the API interface of Flask is invoked to obtain products that the buyer bought and displayed on the page.
Display picture, quantity, price of each product, and only nine pieces of information are displayed on each page.
Use paging function to achieve page turning function.
Submit the front - and back-end code to the code base for management and deployment to the server.

1. 1. Management

Client: HTML+ CSS+ JavaScript (jQuery)

Server: (Flask+ MySQL + Python 3)

Server: Create a Web application using the Flask framework that defines a data model for commodity information and creates database tables.

Server: defines the API interface, and provides functions such as adding, deleting and querying preferential products.

Client side: Design the front page, which contains buttons and forms for adding, deleting, querying offers, etc.

Client: uses JavaScript, jQuery and other technologies to interact with the back end, send requests to obtain commodity information and update the front page.

Server: receives the request sent by the client, analyzes the parameters, processes the corresponding business logic, and finally returns the operation result to the client.

Database: Stores the added commodity information into the database and reads the commodity information from the database when needed.

1. References:

1. Vyshnavi, V.R. and Malik, A. (2019) ‘Efficient Way of Web Development Using Python and Flask’, International Journal of Recent Research Aspects, 6(2), pp. 16–19. Available at: https://search.ebscohost.com/login.aspx?direct=true&db=aph&AN=137424660&lang=zh-cn&site=eds-live (Accessed: 31 March 2023).
2. Miguel Grinberg 2018, Flask Web Development : Developing Web Applications with Python, vol Second edition, O’Reilly Media, Sebastopol, CA, viewed 31 March 2023, <https://search.ebscohost.com/login.aspx?direct=true&db=edsebk&AN=1724052&lang=zh-cn&site=eds-live>.