Build an e commerce website using php and mysql

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILD AN E-COMMERCE WEBSITE USING PHP INSTRUCTOR: M.Sc NGUYEN TRAN THI VAN STUDENT: VU TUAN ANH PHAM VU THIEN S K L0 Ho Chi Minh City, August, 2021 UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING INFORMATION TECHNOLOGY DEPARTMENT FHQ VU TUAN ANH - 17110004 PHAM VU THIEN - 17110075 Project: BUILD AN E-COMMERCE WEBSITE USING PHP CAPSTONE PROJECT FOR SOFTWARE ENGINEERING LECTURER: M.Sc Nguyen Tran Thi Van COURSE 2017 - 2021 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY TRAINING HIGH QUALITY SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness ********* ********* MISSIONS ON CAPSTONE PROJECT Student Name: Vu Tuan Anh _ ID: 17110004 Student Name: Pham Vu Thien _ ID: 17110075 Specialization: Software Engineering Thesis name: Building an E-commerce website using PHP and MySQL Implementation Content Theory: - Research and learn PHP - Research and learn MySQL Practice: - Build an E-commerce Website: o For user: register, login/out, purchase, add products to cart, chat and feedback o For admin: login/out, manage products, manage users, and manage sales Processing time: 15 weeks (Starting from 1/04/2021 to 14/7/2021) Student's signature: _ Student's signature: _ HCMC, March, 14th,2021 Program Chair (sign and write full name) Instructor (signed and write full name) Page | HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION SOCIALIST REPUBLIC OF VIETNAM FACULTY TRAINING HIGH QUALITY Independence – Freedom - Happiness ********* ********* INSTRUCTOR COMMENTARY Student Name: Vu Tuan Anh ID: 17110004 Student Name: Pham Vu Thien ID: 17110075 Major: Information Technology Project name: Build an E-commerce website using PHP and MySQL Instructor: M.Sc Nguyen Tran Thi Van COMMENTARY About the topic content and workload: Advantages: Disadvantages: Recommend for protection or not? Page | Type rating: Grade: (Text: ) HCMC, Date ……Month …… Year … … Instructor (Sign & write full name) M.Sc Nguyen Tran Thi Van Page | HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY TRAINING HIGH QUALITY SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness ********* ********* REVIEWER COMMENTARY Student Name: Vu Tuan Anh ID: 17110004 Student Name: Pham Vu Thien ID: 17110075 Major: Information Technology Project name: Building an E-commerce website using PHP and MySQL Reviewer: Ph.D Le Van Vinh COMMENTARY About the topic content and workload: Advantages: Disadvantages: Recommend for protection or not? Page | Type rating: Grade: … .(Text: ) HCMC, Date ……Month …… Year …… Reviewer (Sign & write full name) Ph.D Le Van Vinh Page | ACKNOWLEDGMENTS In the first words of this end-to-end “Capstone Project” report, we would like to give our sincere thanks and gratitude to all those who have supported and provided us with knowledge and spirituality during project implementation We would like to express our thanks to M.Sc Nguyen Tran Thi Van, lecturer at HCMC University of Technology and Education Since knowledge is unlimited but our acknowledgement is limited, this program might contain unexpected out-coming We would like to receive feedback from you in order that we would have more experience to implement our project in a better way Best regards! Ho Chi Minh City, July, 2021 Vu Tuan Anh & Pham Vu Thien Page | CONTENTS MISSIONS ON CAPSTONE PROJECT INSTRUCTOR COMMENTARY REVIEWER COMMENTARY ACKNOWLEDGMENTS LIST OF FIGURES 10 LIST OF TABLES 12 Chapter OVERVIEW 14 1.1 The reason for choosing the topic 14 1.2 Objectives 14 1.3 Methodology 15 1.4 Scope 15 Chapter THEORETICAL BASIS 16 2.1 Overview of PHP 16 2.2 MySQL 18 2.3 Perl 18 2.4 XAMPP 19 2.5 Architectural design 19 2.5.1 Model-View-Controller Model 19 2.5.2 Architectural design of business layer (back-end) 20 2.5.3 Architectural design of the data presentation layer (front-end) 20 2.6 Object-oriented programming 21 2.6.1 Object-oriented design 21 2.6.2 Choose a design template 21 Chapter ANALYSIS & DESIGN 23 3.1 Current status survey 23 3.1.1 Lazada.vn website 23 3.1.2 Tiki.vn website 24 3.1.3 Shopee website 25 Page | 3.1.4 3.2 Inference 25 System description 26 3.2.1 Customer Module 26 3.2.2 Admin Module 26 3.3 Requirement capturing and modeling 26 3.3.1 Business functional requirements (user application) 26 3.3.2 System functional requirements (user application) 27 3.3.3 Non-functional requirements (user application) 27 3.3.4 Business functional requirements (admin application) 27 3.3.5 System functional requirements (admin application) 28 3.3.6 Non-functional requirements 28 3.4 Requirement modeling 29 3.4.1 Use case diagram design 29 3.4.2 Use case specifications 30 3.4.3 Sequence diagram 64 3.5 Database design 84 3.5.1 Details for Sales 85 3.5.2 Details for Products 85 3.5.3 Details for Cart 86 3.5.4 Details for Details 86 3.5.5 Details for Category 86 3.5.6 Details for Users 87 3.6 Class diagram 87 3.7 UI Design for the website 88 3.7.1 Admin interface design 88 3.7.2 User interface design 97 Chapter IMPLEMENTATION & TESTING 106 4.1 Frontend 106 4.1.1 Development environment settings 106 4.1.2 Create an PHP and XAMPP application 106 4.1.3 Application structure 106 Page | Chapter IMPLEMENTATION & TESTING Index.PHP Load Homepage http://onlineshop24h.live/ecommerce/ /index.PHP Login.PHP Login http://onlineshop24h.live/ecommerce/ /login.PHP Logout.PHP Logout http://onlineshop24h.live/ecommerce/ /logout.PHP Signup.PHP Sign Up http://onlineshop24h.live/ecommerce/ /signup.PHP Password_for Forget Password get.PHP Profile.PHP http://onlineshop24h.live/ecommerce/ /password_forget.PHP Load Profile http://onlineshop24h.live/ecommerce/ /profile.PHP Edit Profile http://onlineshop24h.live/ecommerce/ /profile-edit.PHP Product.PHP Load Product http://onlineshop24h.live/ecommerce/ /product.PHP Category.PH Load category P Contact.PHP http://onlineshop24h.live/ecommerce/ /category.PHP Load Contact http://onlineshop24h.live/ecommerce/ /contact.PHP Aboutus.PHP Load About Us http://onlineshop24h.live/ecommerce/ /aboutus.PHP Cart.PHP Load Cart http://onlineshop24h.live/ecommerce/ /cart-view.PHP Add Cart http://onlineshop24h.live/ecommerce/ /cart-add.PHP Update Cart http://onlineshop24h.live/ecommerce/ /cart-update.PHP Page | 111 Chapter IMPLEMENTATION & TESTING Delete Cart http://onlineshop24h.live/ecommerce/ /cart-delete.PHP Load Cart Details http://onlineshop24h.live/ecommerce/ /cart-details.PHP Load Cart Total http://onlineshop24h.live/ecommerce/ /cart-total.PHP Transaction.P Make transaction http://onlineshop24h.live/ecommerce/ HP /transaction.PHP Table 63 User Tokens and Services 4.4 Test plan In this project Black-box Testing Method is applied to test main functions of the application One of the biggest advantages of using Black-box Testing is that it is quite adaptable for testing a large amount of code or main functions of this system There are two functions tested in this Testing Process: • Customer: Sign in, Sign up • Admin: Add new product 4.5 Test scenarios No Actor Customer Customer Admin Admin Function Sign in Description Test the application’s response when a user fills in sign in form and click “sign in” button Sign up Test the application’s response when a user fills in sign up form and click “sign up” button Add a product Test the application’s response when admin fills in “Add New Product Form” and click “Submit” Print sale bill Test the application’s response when the admin clicks “print” button in sales page Table 64 Test scenarios 4.6 Test results Page | 112 Chapter IMPLEMENTATION & TESTING 4.6.1 Test result of Customer Sign In function ID Description Test steps Test data Expected result TC_SI_01 Test response Enter Email: User is logged of application email test2@gmail.com in the when the Enter Password application customer password password and navigate enters correct Click to index authentication “Continue” screen which information account is login in TC_SI_02 Test response Enter Email: An error of application email test2@gmail.com message when the Enter Password appears and customer password 12345678 says enters Click “Incorrect incorrect “Continue” Password” authentication information TC_SI_03 Test response Click An error of application “Continue” message when the user appears and leaves all says “Please inputs empty fill out this and click field” “Sign in” button Table 65 Test result of Customer Sign In function Actual Status result As Pass expected As Pass expected As Password expected Page | 113 Chapter IMPLEMENTATION & TESTING Figure 60 TC_SI_01 Figure 61 TC_SI_02 Page | 114 Chapter IMPLEMENTATION & TESTING Figure 62 TC_SI_03 4.6.2 Test result of Customer Sign up function ID Description Test steps TC_SU_01 Test Enter all response of of the application related when the data user signs up a new account Test data Expected result First name: Vu Add Last name: Tuan Anh product Email: completely, test2@gmail.com the data is Password: 1234578 saved into Retype password: database, 12345678 and waiting screen is displayed Enter all First name: Vu An error of the Last name: Tuan Anh message related Email: appears and data with test3@gmail.com says wrong Password: 1234578 “Please fill retype Retype password: out this password 12345600 field” TC_SU_02 Test response of application when the user signs up a new account without enter name TC_SU_03 Test Not enter First name: response of any data Last name: application Email: Actual Status result As Pass expected As Pass expected An error As Pass message expected appears and Page | 115 Chapter IMPLEMENTATION & TESTING when the Password: says user signs Retype password: “Passwords up a new did not account match” without enter anything Table 66 Test scenarios of of Customer Sign up function Figure 63 TC_SU_01 Figure 64 TC_SU_02 Page | 116 Chapter IMPLEMENTATION & TESTING Figure 65 TC_SU_03 4.6.3 Test result of Admin Add a Product function ID Description Test steps TC_AP_01 Test Enter response of all of application the when the related admin data enters a new product correctly TC_AP_02 Test Enter response of all of application the when the related admin data enters a new without product name without its name TC_AP_03 Test Not response of enter Test data Expected result Name: Galaxy Note 20 Add Ultra product Category: Phones completely, Price: 1299 and the Photo: data is galaxy_note_20_ultra.png saved into Description: This is database description Name: An error Category: Phones message Price: 1299 appears and Photo: says galaxy_note_20_ultra.png “Please fill Description: This is out this description field” Actual Status result As Pass expected As Pass expected An error As Pass message expected Page | 117 Chapter IMPLEMENTATION & TESTING application any appears and when the data says admin “Please fill enters a new out this product field” without enter anything Table 67 Test scenarios of Admin Add a Product function Figure 66 TC_AP_01 Figure 67 TC_AP_02 Page | 118 Chapter IMPLEMENTATION & TESTING Figure 68 TC_AP_03 4.6.4 Test result of Admin Add a Product function ID Description Test steps Test data Expected result TC_PSB_01 Test return Enter Set date from: System open correct of email 1/6/2021 – print application Enter 1/7/2021 application when the password and user can admin enters Click see the date correct date “Sales” is correct time Click and data is information “Print” displayed button correctly TC_ PSB Test return Enter Set date from: System open _02 wrong of email 1/7/2022 – print application Enter 2/7/2023 application when the password and user can admin enters Click see the date wrong date “Sales” is correct time Click and data is information “Print” displayed in button empty Table 68 Test scenarios of Admin Print sale bill Actual Status result As Pass expected As Pass expected Page | 119 Chapter IMPLEMENTATION & TESTING Figure 69 TC_PSB_01 Figure 70 TC_PSB_02 Figure 71 TC_PSB_03 Page | 120 Chapter IMPLEMENTATION & TESTING Figure 72 TC_PSB_04 Page | 121 Chapter SUMMARY Chapter SUMMARY 5.1 Achievements Knowledge: • How to design the UX/UI of a website • Learn about the latest technologies, such as PHP and Perl Skills: • How to work as a group, and contribute to a successful teamwork • Use Microsoft Project, Draw.io and Enterprise Architect to make the whole team process • Apply some WFH tools to work effectively during the Covid-19 pandemic Product: • Admin module allows the shop owner to manage categories, manage products, users, manage orders and conduct various statistics • User module allows the user to view, search products, manage shopping carts, perform other online checkout, and view their own order history 5.2 Strengths There are a lot of advantages in the process of building this website • The website supplies users with basic features of the business process • UI/UX is user-friendly • Users can log in with a Google account • The website integrates Paypal e-wallet • Our website goes online on the real host 5.3 Drawbacks On the other hand, out system still has some drawbacks: Page | 122 Chapter SUMMARY • The website still does not support promotion campaigns • The performance of the website is not fully evaluated 5.4 Difficulties in the process There are main things that we have to solve: • The time for the project is limited • The technologies are quite new to us, so we had to spend a lot of time learning and fixing some bugs • Due to the fact that we not understand enough about the DevOps process, we cannot configure the Server to use the email function 5.5 Improvement & Future Developments These are some things which we can improve in the near future: • In the future, we think it is more important to connect with customers Hence, we may use some tools, such as SEO, Backlinks, Artificial Intelligence (AI), to improve the traffic of customers and can help us make profit from this website • UI & UX is quite important in terms of attracting customers when they visit the website Therefore, we think it is necessary to improve the template and design of the website • Due to the development of e-wallets, we might need to include more e-wallets to enable users to shop more easily and conveniently Page | 123 REFERENCES REFERENCES [1] https://vi.wikipedia.org/wiki/T%E1%BA%ADp_tin:PHP-logo.svg.(Viewed on 15/6/2021) [2] https://www.php.net/manual/en/history.php.php (Viewed on 15/6/2021) [3] https://kinsta.com/blog/is-php-dead/ (Viewed on 15/6/2021) [4]https://websolutions.com.vn/perl-la-gi-gioi-thieu-ve-ngon-ngu-lap-trinh-perl/ (Viewed on 15/6/2021) [5] https://vi.wikipedia.org/wiki/T%E1%BA%ADp_tin:Xampp_logo.svg (Viewed on 15/6/2021) [6] https://bootstrapious.com/p/obaju-e-commerce-template (Viewed on 15/6/2021) [7] https://www.lazada.vn/ (Viewed on 25/12/2021) [8] https://tiki.vn/ (Viewed on 25/12/2021) [9] https://fontawesome.com/v4.7.0/ (Viewed on 15/4/2021) [10] https://www.PHPmyadmin.net/docs/ (Viewed on 13/3/2021) [11] https://www.perl.org/ (Viewed on 13/5/2021) [12] https://www.PHP.net/ (Viewed on 14/5/2021) [13] https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chatplugin/ (Viewed on 15/6/2021) [14] https://www.tutorialspoint.com/PHP/PHP_sending_emails.htm#:~:text=PHP%20makes% 20use%20of%20mail,%2C%20message%2C%20headers%2C%20parameters%20)%3B\ (Viewed on 15/6/2021) [15] https://www.PHPweb.org/website-templates/e-commerce-and-shopping.html# (Viewed on 15/6/2021) LINK OF OUR SOURCE CODE Project: https://github.com/VuThien3010/final_project Demo: http://onlineshop24h.live/ecommerce/ (Viewed on 15/7/2021) Page | 124