Download Assignment WEBG301 - Grade D and more Assignments Web Design and Development in PDF only on Docsity!
GROUP PROJECT FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing Unit number and title WEBG301 - Project Web Submission date 24/08/2023 Date Received 1st submission 24/08/ Re-submission Date Date Received 2nd submission Student Name Tran Duc Long Student ID GCH Class GCH1106 Assessor name 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: ❒ Resubmission Feedback:
Grade: Assessor Signature: Date: Signature & Date:
- A. Introduction
- B. User Requirement
- User stories template.......................................................................................................................................................................
- Use case diagram
- 2.1. Admin use-case diagram
- 2.2. Customer use-case diagram
- C. System Design......................................................................................................................................................................................
- Site map
- Entity Relationship Diagram
- D. Implementation
- Sample Source code
- Website screenshots
- f. GitHub repository with evidence
- E. Conclusion
- Advantages of website
- Disadvantages of website
- Lesson learnt
- Future improvements
- Figure 1: Admin use-case diagram Table of Figure
- Figure 2: Customer use-case diagram
- Figure 3: Site map of interface admin
- Figure 4: Site map of interface customers
- Figure 5: ER diagram of my website
- Figure 6: Model MVC of my project..........................................................................................................................................................
- Figure 7: Sample CRUD in my project
- Figure 8: Sample about Search function
- Figure 9: Function format time and Results before and after application
- Figure 10: Middleware CheckPermission and add path in kernel.php
- Figure 11: Constructor to decentralization function
- Figure 12: Add path in config/app.php
- Figure 13: Funtion export bill....................................................................................................................................................................
- Figure 14: Function Api uploadFile and method Ajax to push data to the server....................................................................................
- Figure 15: Config env to implement payment online feature
- Figure 16: Function stripePost to pay by credit card
- Figure 17: Config env and edit function toMail in notification
- Figure 18: Function send email
- Figure 19: Config service google cloud
- Figure 20: Function login with google.......................................................................................................................................................
- Figure 21: Login and Register page
- Figure 22: Dashboard page
- Figure 23: Category management page....................................................................................................................................................
- Figure 24: Add Product and Show Product page
- Figure 25: Show order and Detail order page
- Figure 26: Show feedback and send email page
- Figure 27: Home page
- Figure 28: Profile page
- Figure 29: Product page
- Figure 30: Cart page
- Figure 31: Order page
- Figure 32: Contact page
- Figure 33: Footer in interface customer
- Figure 34: Github
- Figure 35: Commits on GitHub..................................................................................................................................................................
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.
1. 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. 2. 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
- 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 4 : Site map of interface customers Initially, customers will look through the homepage interface of the website, where they can find information about the items for sale. Promotions and advertisements will be displayed by product on the main page, allowing consumers to select and check product details. Users cannot place orders unless they create an account and log in first. After login, User can edit their profile to facilitate purchase. Users will be able to use all website functions, including placing orders. After completing the shopping, the user will be able to go to the cart page by clicking on the cart icon. If the user doesn't want to buy anymore, they can remove the previously selected items from their shopping cart. After viewing the cart, the customer can pay for the order by cash or credit card. After making a purchase, users can go to the order page to see the shipping order process. Users can go to the contact section on the navigation bar to go to the contact page to send feedback to the store. Users can also rate each product on that product detail page.
- Entity Relationship Diagram
- Role and Users :(1 - m) 1 role can have multiple user but those users can only be had by 1 role.
- User and Comment:(1-m) 1 user can have multiple comment but those comment can only be had by 1 user.
- User and Replies:(1-m) 1 user can have multiple reply but those reply can only be had by 1 user.
- Comments and Replies:(1-m) 1 comment can have multiple replies but those replies can only be had by 1 comments.
- Products and Comments:(1-m) 1 product can have multiple comments but those comments can only be commented by 1 product.
- User and Reply:(1-m) 1 user can have multiple reply but those reply can only be had by 1 user.
- User and Orders (1 - m): 1 user can place multiple orders but those orders can only be ordered by 1 user.
- Orders and Order_Details: (1 - m): 1 order can have multiple items to more than 1 items of order detail if the orders contains more than 1 products, but each items in the order detail is only related to one order.
- Product and Order_Details: (1-m): 1 product can have multiple order detail but those order detail can only be selected by 1 product.
- Categories and Product(1-m): 1 category can have multiple products but those products can only be had by 1 category. The ERD diagram, I provided consists of my 9 tables which all satisfy the condition Each table has a primary key. All non-key columns are completely dependent on the entire primary key. The tables are linked by primary and foreign keys and don't have any transitive attributes so my wensite's ERD is 3NF compliant.
D. Implementation
1. Sample Source code
My website has been predominantly crafted using the PHP Laravel framework. It's constructed using the foundational elements of Laravel Components, which carry out the execution of code following the MVC architecture. This architecture divides functionality into three tiers: Model, View, and Controller. The following are images depicting examples of what is implemented in the source code that I have developed.
Figure 6 : Model MVC of my project
1.1. Sample source code – CRUD
Following is an example of CRUD of product in my project including functions: show_product() to display data on the page, view_product() to go to the page to add or edit products, add_product() to perform the process of adding or editing products, delete_product() to remove the product from the system. Figure 7 : Sample CRUD in my project
1.2. Sample about some advanced functions in my project
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
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
