Đang tải... (xem toàn văn)
The exercise scores a distinction in web programming. This exercise presents a report on a specific sales website selling clothes, fullstack decentralizing admin user rights using the Laravel framework.
GROUP PROJECT FRONT SHEET Qualification BTEC Level HND Diploma in Computing Unit number and title WEBG301 - Project Web Submission date 24/08/2023 Re-submission Date Date Received 1st submission 24/08/2023 Date Received 2nd submission Student Name Tran Duc Long Student ID Class GCH1106 Assessor name GCH210562 Pham Duc Tho Student declaration I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism I understand that making a false declaration is a form of malpractice Student’s signature Grade ❒ Summative Feedback: Grade: Signature & Date: ❒ Resubmission Feedback: Assessor Signature: Date: Table of Contents A Introduction B User Requirement User stories template Use case diagram C 2.1 Admin use-case diagram 2.2 Customer use-case diagram System Design Site map 10 Entity Relationship Diagram 11 D Implementation 13 Sample Source code 13 Website screenshots 20 f GitHub repository with evidence 28 E Conclusion 29 Advantages of website 29 Disadvantages of website 30 Lesson learnt 30 Future improvements 30 Table of Figure Figure 1: Admin use-case diagram Figure 2: Customer use-case diagram Figure 3: Site map of interface admin 10 Figure 4: Site map of interface customers 11 Figure 5: ER diagram of my website 12 Figure 6: Model MVC of my project 14 Figure 7: Sample CRUD in my project 14 Figure 8: Sample about Search function 15 Figure 9: Function format time and Results before and after application 15 Figure 10: Middleware CheckPermission and add path in kernel.php 16 Figure 11: Constructor to decentralization function 16 Figure 12: Add path in config/app.php 16 Figure 13: Funtion export bill 17 Figure 14: Function Api uploadFile and method Ajax to push data to the server 17 Figure 15: Config env to implement payment online feature 18 Figure 16: Function stripePost to pay by credit card 18 Figure 17: Config env and edit function toMail in notification 19 Figure 18: Function send email 19 Figure 19: Config service google cloud 20 Figure 20: Function login with google 20 Figure 21: Login and Register page 21 Figure 22: Dashboard page 21 Figure 23: Category management page 22 Figure 24: Add Product and Show Product page 22 Figure 25: Show order and Detail order page 23 Figure 26: Show feedback and send email page 23 Figure 27: Home page 24 Figure 28: Profile page 24 Figure 29: Product page 25 Figure 30: Cart page 26 Figure 31: Order page 26 Figure 32: Contact page 27 Figure 33: Footer in interface customer 27 Figure 34: Github 28 Figure 35: Commits on GitHub 28 A Introduction We live in a modern society where everything is modern and innovative Every day, there is a lot of innovation, especially in technology When it comes to technology, we must admit that it has permeated every aspect of our lives, from simple devices such as phones and computers to complex programming applications Currently, digital transformation technology is gaining popular in a variety of disciplines, particularly e-commerce system While offline stores are progressively becoming outdated, online shops are an excellent solution for developing this model In this assignment, I will demonstrate the design and process of building a fullstack clothing store website, specifically how I design and apply the MVC pattern in PHP's Laravel framework, using the api for the project along with accompanying supporting technologies such as boostrap, ajax and jquery to build a complete website for users My website has two main interfaces, admin and customers, and I have authorized for them so that customers can go to the website to purchase and the administrator can receive data about orders as well as perform other tasks, functions like add, edit, delete, send email, download or login with google, etc B User Requirement Based on early 2023 statistics, there is a resurgence in the market following the pandemic Recent data indicates a rise in the number of consumers, particularly in the fashion industry Recognizing this trend, I conceptualized and formulated an online venture centered around fashion This e-commerce initiative involves a clothing and product retail platform, with a primary emphasis on offering authentic items sourced from well-known brands The name of the website is L-StyleTrend, driven by the aspiration to replicate this business approach and provide top-quality products to the market's consumers User stories template As an admininstrator • • • • • • • • • • • I want to add/edit/delete products for categories to my website so that customers have more choices I want to access customer account information so that shop can track order history I want to create an account for customers so that I help them login to the purchase homepage I want to correct the information for the customer so that I can help them verify the information for each order I want to delete the account information of customers who have not been on the website for a long time I want to see the customer's order details so that facilitate delivery I want to invoice the order placed to the customer I want to delete orders that have been canceled or have been shipped for a long time I want to see customer feedback on the product so that shop keep in mind during the upcoming import process I want to send email to reply customers' feedback about the product or website so that the store can note in the upcoming import process I want to see the website's statistics to know the store's sales As a customer • • I want to register an account to buy goods on the website I want to login so that I can use the full utility on the website • • • • • • • • • • • • I want to update my personal information in my account to correct purchase information I want to see a detailed list of product categories so that helping me choose my order I want to know how much so that I can pay for a product in the cart for checkout I want to order online so that I don't have to go to the store I want to delete the selected products in the cart I want to send feedback for each purchased product to rate them for quality I want to contact website to rate them for quality website I want to search for products so that it is easy to choose the product of my choice I want to pay for my order by credit card when placing an order I want to pay for my order in cash upon delivery I want to see the orders I have placed or canceled so far I want to remove the canceled order from my account Use case diagram Each interface will have a separate login account to access the website You can sign up for a normal account or log in with google depending on the user's preference The customer account cannot access the admin page 2.1 Admin use-case diagram Figure 1: Admin use-case diagram In my website, admin can add, delete, update products and categories on the website, in addition, censoring customer information is also very necessary Administrators can also add/edit user accounts and delete accounts and users that violate the terms Administrators can read customer feedback on products, email them to customers or delete them once read Admins can also approve and export orders as pdfs, view order details, or delete canceled or long-delivered orders 2.2 Customer use-case diagram Figure 2: Customer use-case diagram When accessing the website, customers can view products as well as search for products they want to buy Customers will not be able to access the shopping cart page if they not have an account in the system Therefore, customers can register, log in to use the website, update their personal information, view information about items on the website and place an order, and can also delete products added to the cart Customers have forms of payment: cash or credit card After placing an order, customers can view the orders they have purchased as well as their shipping process and can send feedback to the shop to evaluate the quality of the items C System Design Site map I applied the F-shaped pattern reading to design user-guided sitemaps My sitemap follows the function from top to bottom and from left to right following as: Figure 3: Site map of interface admin The user must have an admin account to access the admin page If customers intentionally visit this page, they will be redirected to the login page here Without an administrator account will not be able to access the site When administrators visit the website, they can manage user accounts such as adding, editing and deleting user accounts The administrator account cannot be deleted In addition, they will manage the product catalog and products to which they can add, edit, and remove items for the site to display on the front-end page They can manage orders by approving, invoicing customers and viewing order details for delivery to customers Finally, they can read customer reviews about the website's products and can send emails to reply to that customer Figure 10: Middleware CheckPermission and add path in kernel.php After creating the middleware and the path, I will add the constructor to the admin related controllers to perform the decentralization function Figure 11: Constructor to decentralization function d Export bill to PDF I use laravel's dompdf library to make order export function to pdf I run the command "composer require barryvdh/laravel-dompdf" Then I put the dompdf's path in the config/app.php file and finally wrote the print_pdf function in the controller to download the invoice Figure 12: Add path in config/app.php Figure 13: Funtion export bill e Use API to upload file image I use ajax to push data to the server, the server will return a json url and append that url with the src attribute in the img tag to display the image without reloading the page Figure 14: Function Api uploadFile and method Ajax to push data to the server f Credit card payment feature I used laravel's package stripe to make payment by credit card when ordering I modified the configuration in the env file and created a stripePost function in the controller to handle this checkout Figure 15: Config env to implement payment online feature Figure 16: Function stripePost to pay by credit card g Send email reply customer’s feedback Notification in laravel is a powerful way to send notification to user or system through multiple channels like email, SMS, browser notifications First I configure mail in env Then I create notification folder to send mail by entering command "php artisan make:notification name" Then modify the toMail function in the newly created file And finally, write the send_email_user function in the controller to handle this mail sending process Figure 17: Config env and edit function toMail in notification Figure 18: Function send email h Login with google function I use Socialite, an extension for the Laravel framework that makes it easy to integrate social authentication into a web application that allows users to login or register with a social network account like Google In order for doing to touch this function, I have to edit the configuration in the env and config/service files and then handle the controller Figure 19: Config service google cloud Figure 20: Function login with google Website screenshots