Table of contents
1. Need analysis
2. Database function analysis and data
3. Outline model design and logical structure design
4. Physical structure design and database implementation
5. Website function design and implementation
6. The design of the problem is implemented using sql
7. Unique functional design
Video demonstration
1. Requirements analysis
As an information distribution center, the company includes the management of many information resources and data. But now there are problems such as irregular information management, difficulty in finding and information redundancy. Therefore, it is urgent to establish a company official website to standardize information management and improve the company's image and user experience.
2. Database function analysis and data
Behind the establishment of a company's official website, a database is needed to support and manage various information, including product information, user shopping cart information, recruitment information, message information, user information and administrator information. The existence and use of the database can effectively support various functions of the official website and provide data storage, retrieval and management capabilities to ensure the normal operation of the company's official website and the orderly management of information.
Product management: This function manages the company's official website products.
Company product management: Manage product numbers, product names, prices, product display pictures, and administrator numbers.
User shopping cart product management: Manage product numbers, product quantities, and user numbers.
Recruitment management: This function manages recruitment talent information on the company's official website.
Recruitment management: Manage talent number, position title, name, mobile phone number, email, educational background, self-evaluation of work experience and expertise, and administrator number.
Message management: This function manages feedback on the company’s official website.
Message management: Manage message numbers, names, email addresses, messages, and administrator numbers.
User management: This function manages users of the company's official website.
Administrator management: Manage the administrator number and administrator password.
User management: Manage user numbers, user passwords, and administrator numbers.
3. Outline model design and logical structure design
3.1 Design of ER diagram
3.2 Relationship model
1）Fjm_admins(adminId, adminPassWord, adminName)
2）Fjm_users(userId, userPassword, userName, adminId)
3）Fjm_job_applications(applicant_Id, job_title, education, email, self_evaluation, work_experience, phone, name, adminId)
4）Fjm_company_contacts(contactId, name, email, message, adminId)
5）Fjm_product(productId, productName, price, pic_url, adminId)
6）Fjm_shopping(shopId, number, productId, userId)
4. Physical structure design and database implementation
4.1 Creation of database
CREATE DATABASE ai_214820303;4.2 Create administrator table
CREATE TABLE Fjm_admins (
adminId INT AUTO_INCREMENT PRIMARY KEY,
adminPassword VARCHAR(255) NOT NULL,
adminName VARCHAR(255) NOT NULL UNIQUE,
);4.3 Create user table
CREATE TABLE Fjm_users (
userId INT AUTO_INCREMENT PRIMARY KEY,
userPassword VARCHAR(255) NOT NULL,
userName VARCHAR(255) NOT NULL UNIQUE,
adminId INT NOT NULL,
FOREIGN KEY (adminId) REFERENCES Fjm_admins(adminId)
);4.4 Create recruitment form
CREATE TABLE Fjm_job_applications (
applicant_Id INT AUTO_INCREMENT PRIMARY KEY,
job_title VARCHAR(255) NOT NULL,
education VARCHAR(255),
email VARCHAR(255) NOT NULL,
self_evaluation VARCHAR(255),
work_experience VARCHAR(255),
phone VARCHAR(255) NOT NULL,
name VARCHAR(255) NOT NULL,
adminId INT NOT NULL,
FOREIGN KEY (adminId) REFERENCES Fjm_admins(adminId)
);4.5 Create message form
CREATE TABLE Fjm_company_contacts (
contactId INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
email VARCHAR(255),
message VARCHAR(255) NOT NULL,
adminId INT NOT NULL,
FOREIGN KEY (adminId) REFERENCES Fjm_admins(adminId)
);4.6 Create product table
CREATE TABLE Fjm_product (
productId INT AUTO_INCREMENT PRIMARY KEY,
productName VARCHAR(255) NOT NULL,
price DECIMAL(10,2) NOT NULL,
pic_url VARCHAR(255) NOT NULL,
adminId INT NOT NULL,
FOREIGN KEY (adminId) REFERENCES Fjm_admins(adminId)
);4.7 Create shopping cart table
CREATE TABLE Fjm_shopping (
shopId INT AUTO_INCREMENT PRIMARY KEY,
number VARCHAR(255) NOT NULL,
productId INT NOT NULL,
userId INT NOT NULL,
FOREIGN KEY (productId) REFERENCES Fjm_product(productId),
FOREIGN KEY (userId) REFERENCES Fjm_users(userId)
);
5. Website function design and implementation
Unless otherwise noted, these pages are displayed and rendered without logging in.
-
5.1 Home page: displays the company image.
The company's homepage displays multiple pictures through a picture carousel, combined with button control and automatic carousel functions, to provide visual appeal and dynamic effects. This design can make the company's official website page more vivid, attract users' attention, and provide a simple navigation and browsing experience.
-
5.2 About us (company introduction, development history, development plan): Give a brief introduction to the company.
This page displays the company's introduction information, including the company's profile, development history and development plan. With appropriate typography and style, information is made clear and readable and the visualization of the page is enhanced.
-
5.3 Product purchase: sell products on the official website.
The product purchase page displays multiple products in a card-like manner. Users can add products to the shopping cart by selecting the quantity and clicking the Add to Cart button. The page design is simple and beautiful, the user experience is good, and it provides intuitive purchasing operations to facilitate users to browse and purchase products.
(Without logging in, users can only browse products and jump to the login interface when clicking Add to Cart)
-
5.4 Shopping Cart: Manage users’ products.
This page provides a shopping cart function, displays product information that the user has selected, and provides operations for product removal and settlement. Users can delete unnecessary items through the remove button, and view the total amount of the shopping cart and product search function at any time. Such a design can facilitate users to manage shopping cart contents, while providing clear shopping cart information and settlement operations to improve user experience.
(When the user is not logged in, after clicking the shopping cart, the user will jump directly to the login interface)
-
5.5 Solutions (Internet of Vehicles, Intelligent Manufacturing): Show the company’s main solution directions.
This page presents an introduction to the Internet of Vehicles information security solution. Through appropriate layout and style, the information is made clear and readable and the visual effect of the page is enhanced. The page provides solutions on network security, data security, physical security, risk assessment, and training and education to protect the security of the Internet of Vehicles system.
-
5.6 Security Research (security technology, please stay tuned): Showcase the technology used by the company.
This page displays content related to research on ECU and CAN network security issues. Through appropriate layout and style, the information is made clear and readable and the visualization of the page is enhanced. The page provides a description of the background and research results on ECU and CAN network security issues, as well as a display of related pictures to convey relevant information and research progress to readers.
-
5.7 Recruitment: Recruit talents for the company.
This page provides the function of talent recruitment, specifically referring to the display of the company's recruitment department and position information and the submission of job applications. The page structure includes an introduction to different departments and job information for each department, as well as a form for job seekers to submit personal information and applications.
-
5.8 Contact us: Implement message management and promptly improve possible problems in the company.
This page provides a simple way for users to communicate with the company, either by filling out a form or by contacting the company directly.
-
5.9 Login: realize the login of users and administrators.
This page provides a login function. Users can authenticate by filling in their username and password, and choose whether to log in as an administrator. The page also provides a registration link to allow users to register new users. (After successful login, use session to record the username of the current user)
After a successful login, the navigation bar displays the username of the logged in person.
Click 
the button again to log out
-
5.10 Registration: Implement user registration.
This page provides the user registration function. Users can fill in the user name, password and confirm password to register the account. The page also provides a login link to allow existing users to log in.
-
5.11 Administrator mode: enables administrators to manage users and products.
When the administrator logs in as an administrator (already logged in!!) , the navigation bar has an additional "Administrator Mode" column compared to the user login navigation bar.
Figure 5-11-1 User mode navigation bar
Figure 5-11-2 Administrator mode navigation bar
5.11.1 User management
User password is not displayed in text
Click the Change Password button to change the password
Click the Show Password button to view your password
Click the Delete User button to delete the user
This page shows the administrator's ability to manage users. It includes the following features:
1. Password change function: When the administrator clicks the "Change Password" button of a user, a prompt box will pop up asking for a new password. Once the new password is entered, the password field is updated with the new password and the new password is sent to the backend via an Ajax request for update.
2. Display password function: When the administrator clicks the "Show Password" button of a user, a prompt box will pop up to display the user's password.
3. Delete user function: When the administrator clicks the "Delete User" button of a user, a confirmation box will pop up asking if the user is sure to be deleted. If the deletion is confirmed, the corresponding user row is deleted from the table and the user is deleted from the backend database via an Ajax request.
4. Add user function: Administrators can enter the new user's ID and password in the form at the bottom of the page and click the "Add User" button. After clicking the button, the new user's information will be sent to the backend via an Ajax request to be added, and a new user row will be added to the table.
5.11.2 Product Management
Original product management list and product list
Modified product management list and product list
This page shows an administrator's capabilities for managing products. It includes the following features:
1. Product list: Through template syntax, the number, price, product name and image address of existing products are displayed in the table, and buttons for update and delete operations are provided for each product.
2. Update product function: When the administrator clicks the "Update" button of a product, the product number, price, product name and image address in the input box of the row will be obtained, and this information will be sent to the backend through an Ajax request. Make an update.
3. Delete product function: When the administrator clicks the "Delete" button of a product, the product number in the input box of the row will be obtained, and the product will be deleted from the back-end database through an Ajax request. After successful deletion, the row will be removed from the table.
4. Add product function: The administrator can enter the number, price, product name and image address of the new product in the form at the bottom of the page, and click the "Add" button. After clicking the button, the new product information will be sent to the backend via Ajax request to be added, and a new product row will be inserted at the end of the table.
6. Design issues and implement them with sql
6.1 Data insertion
Problem: Insert data with userName as ' User-003 ' and userPassword as ' U-003 ' into the Fjm_users table .
Answer:
Data insertion is implemented by the following code, by receiving the ID and password of the new user sent by the client through the POST request, inserting it into the Fjm_users table of the MySQL database, and returning a success or failure message. Implement the function of adding users and persist the user's information into the database.
result:
6.2 Data modification
Problem: Modify the userPassword of userName ' User-001 ' in the Fjm_users table to ' 001 ' .
answer:
The function of this code is to receive the new password and user ID sent by the client through the POST request, update it to the userPassWord column of the corresponding user in the Fjm_users table of the MySQL database, and return a success or failure message. This code implements the function of modifying the user's password, determining the user to be updated through the user ID, and updating the new password to the database.
6.3 Data deletion
Problem: Delete the user whose userName is ' User-004 ' in the Fjm_users table .
answer:
What this code does is find a user in the database by username and delete that user. If the user with the given username does not exist in the database, the delete operation will be performed and 'success' will be returned. Otherwise, an exception message indicating that the delete operation failed will be returned.
result:
6.4 Data query
problem: Query that there is a corresponding product in the Fjm_product table but not in the Fjm_shopping table.
Answer:
The function of this code is to query the database for products that have not been purchased by the user based on the user name entered by the user.
result:
7. Unique functional design
It has the following functional design:
1. User registration and login: Handle user registration and login requests through `/register` and `/login` routes. During the registration process, the username and password provided by the user are stored in a MySQL database. During the login process, the username and password are checked to see if they match the records in the database, and the login status is saved using Flask's session.
2. User logout: Handle user logout request through `/logout` route. During the logout process, the current user's session information will be cleared.
3. Contact form submission: Handle contact form submission through the `/contact` route. Users can fill in their name, email, and message, and these data are stored in the `FJM_company_contacts` table in the MySQL database.
4. Data display and operation: Through different routes, functions such as displaying product information, shopping cart contents, and user lists are realized. For example, the `/production` route is used to display product information, the `/shopCar` route is used to display shopping cart contents, and the `/adminUser` route is used to display the user list.
5. Database operations: Use the pymysql library to interact with the MySQL database, including operations such as querying, inserting and updating data.
6. Permission control: Control user permissions through the `adminId` field. In the database, the `adminId` value of the administrator user is "1", the `adminId` value of the ordinary user is "3", and other values represent different roles.
Overall, our company's official website can meet all the functional design needs of a company's official website.