<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b> </b>

<b>BTEC FPT INTERNATIONAL COLLEGE </b>

<b>INFORMATION TECHNOLOGY ASSIGNMENT 1 </b>

<b>UNIT: SEMI - PROJECT </b>

STUDENT : NGUYEN THI TUYET NHUNG CLASS : IT16101

STUDENT ID : BDAF200008

SUPERVISOR : NGUYEN HOANG ANH VU

<b>DaNang, June 2022 </b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b> ASSIGNMENT 1 FRONT SHEET </b>

<b>Qualification BTEC Level 4 HND Diploma in Business </b>

<b>Unit number and title Unit: Semi-project </b>

<b>Submission date 26/06/2022 ^{Date received (1st}submission) </b>

<b>Re-submission date^{Date received (2nd}submission) </b>

<b>Student name ^{Nguyen Thi Tuyet}</b>

<b>Student declaration </b>

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.

<b>Student’s signature: TUYETNHUNG </b>

<b>Grading grid </b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

i

<b>Summative Feedbacks: Resubmission Feedbacks:</b>

<b>Internal V</b>erifier’s<b> Comments:</b>

<b>Signature & Date:</b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

1.10 Product details page ... 16

Detailed explanation of the interface ... 24

Source code ... 27

<b>CONCLUSION ... 44</b>

<b>CRITICAL EVALUATION ... 45</b>

<b>REFERENCES ... 46</b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

iii

<b>LIST OF TABLES AND FIGURES </b>

Figure 1: Home page ... 4

Figure 2: Shop page ... 6

Figure 3: Register page ... 7

Figure 4: Login page ... 8

Figure 5: Blog page ... 10

Figure 6: Blog-details page ... 12

Figure 7: Shopping cart page ... 13

Figure 8: Checkout page ... 15

Figure 9: Contact page ... 16

Figure 10: Organic Sweet Corn ... 18

Figure 11: Phu Quoc Cobia ... 19

Figure 12: L'amant - Organic Roasted Coffee ... 21

Figure 13: Beef ... 22

Figure 14: Markal Organic Soybeans ... 23

Figure 15: Logo ... 24

Figure 16: Banner ... 24

Figure 17: Product pictures and prices ... 24

Figure 18: Search button ... 25

Figure 19: Login & Register button ... 25

Figure 20: Shopping cart button ... 25

Figure 21: A few more buttons ... 25

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

iv

<b>LIST OF ACRONYM </b>

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>INTRODUCTION </b>

First of all, I would like to thank my family for their enthusiastic encouragement and unconditional support so that I can complete this task well. Next, I would like to sincerely thank the subject teachers who guided me and helped me achieve good academic results. Also, thank you to all my friends who have exchanged and supported me.

As we all know, nowadays, in the busy life of people, taking time out to shop is a luxury. That's why people prefer to shop online. With online shopping, they do not need to worry about weather conditions, traffic safety, etc. Many consumers are gradually turning to online shopping to save time. Most stores have their own online sales website.

This course helps us to design a custom website, a sales website with full basic pages such as login, registration, homepage, products, shopping cart, etc. And there are some features like add to cart, checkout,...

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>About the site </b>

Eco Green is the name of my website - an online sales website. The main store of this website is located on 888 Le Duan street, Da Nang city, Vietnam. The store specializes in 100% organic foods such as Fresh Meat, Seafood, Vegetable, Organic Drinks, Organic Fruits, Butter - Milk, Fastfood, Pure Honey, Papayaya & Crisps, Dry Food.

Eco Green sells both directly at the store and online on the website. If people are busy and do not have time to visit the store, then just open the store's website, select the product, then fill in the necessary information and press order, the store will deliver the product to the place you want. Online shopping allows you to shop whenever you want. Plus, when you shop online, you'll also get more perks, like some discount codes and free shipping on orders over $100.

After the design board, I use website technologies combined with design principles to build a website with many different pages that meet the needs of users. Use programming languages and tools like HTML, CSS, and JS.

Some website interfaces of Eco Green stores are:

<b>1.1 Home page </b>

Below is our website homepage. Here, you can freely select products as well as access many websites such as shop page, about page, contact page, shopping cart page, etc.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Figure 1. Home page

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>1.2 Shop page </b>

On this page you can see all the products in the shop. After visiting, you can choose the type of product you like and click on that product, immediately all information about products, reviews, prices, similar products will be displayed. If you want to buy that product just click add to cart.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

Figure 2. Shop page

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>1.3 Register page </b>

On the registration page, users who do not have an account can register a new account with information such as username, email, password and re-enter the password. Then click the Submit button to be able to create a new account. If you already have an account, you can skip this step.

Figure 3. Register page

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

Figure 5. Blog page

<b>1.6 Blog-details page </b>

Here are some tips to cook as delicious and simple as possible. In addition, you can open some other related news and links that you want.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Figure 6. Blog-details page

<b>1.7 Shopping cart page </b>

On this page you can see your product quantity and total amount. If you want to pay for the product, you just need to click the "Proceed to checkout" button, then the website will lead you to the Payment page immediately.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

Figure 7. Shopping cart page

<b>1.8 Checkout page </b>

On this page, you need to fill in all the information to proceed with the payment.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Figure 8. Checkout page

<b>1.9 Contact page </b>

On this page, you can send requests or information you need support to the shop. In addition, this page also has some shop information so you can contact the shop.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

Figure 9. Contact page

<b>1.10 Product details page </b>

Product details page is a page with full information of each product. You can browse the store and select the product you want, then click on that product and it will bring up detailed information related to that product. You can refer to the information then proceed to purchase.

<b>1.10.1 Organic Sweet Corn </b>

This is the detail page for the product "Organic Sweet Corn".

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>Figure 10. Organic Sweet Corn 1.10.2 Phu Quoc Cobia </b>

This is the detail page for the product "Phu Quoc Cobia".

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>Figure 11. Phu Quoc Cobia </b>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>1.10.3 L'amant - Organic Roasted Coffee </b>

This is the detail page for the product " L'amant - Organic Roasted Coffee".

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>Figure 12. L'amant - Organic Roasted Coffee 1.10.4 Beef </b>

This is the detail page for the product " Beef".

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>Figure 13. Beef 1.10.5 Markal Organic Soybeans </b>

This is the detail page for the product "Markal Organic Soybeans".

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

<b>Figure 14. Markal Organic Soybeans </b>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>Detailed explanation of the interface </b>

This is the homepage of my website, the homepage shows the products in the store and the products are sorted by separate categories like Fresh Meat, Seafood, Vegetable, Organic Drinks, Organic Fruits, Butter - Milk, Fastfood, Pure Honey, Papayaya & Crisps, Dry Food. The homepage also includes product images, product prices, slides, banners, shop logos, and various buttons.

Figure 15. Logo

Figure 16. Banner

Figure 17. Product pictures and prices

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

The home page has the following command buttons:

Search: helps you find the products and categories you want faster.

Figure 18. Search button

Login and Register: helps you log in to the website or register an account (if you don't have an account). After clicking "Login" it will lead you to the login page and the same for Register.

Figure 19. Login & Register button

Shopping cart: displays the order value and the number of products in the cart. On clicking that it will take us to the shopping cart page.

Figure 20. Shopping cart button

A few more buttons: Shop button helps you to see all the products of the store, clicking on it will lead you to the Shop page. In Pages it will have some buttons like Shopping cart, checkout and blog details. If you click on the Shopping cart button, it will take you to the shopping cart page and the same goes for the other two buttons. The blog button makes it possible to view relevant articles, news and links about the store. The Contact button gives you more contact information about the store.

Figure 21. A few more buttons

The store has many different items, so to make it easy for customers to find the products they want to buy, we have arranged the items in separate categories. Customers just need to click on the category related to the product they want to buy, then browse for

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

the product and make a purchase. For example, if you want to buy seafood, you just need to click on the Seafood category.

Figure 22. Category

Here are the buttons that will help you to see the most featured products in the store, the new products, the top rated products,... After clicking these buttons, the related products by category corresponding will appear. You will choose the product you want.

Figure 23. Command buttons

In addition, the homepage also displays a number of articles, news, and prominent links related to the store.

Figure 24. Blog

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

At the bottom of the home page, it helps you to find shop contact information and help features, etc.

Figure 25. The bottom of home page

<b>Source code </b>

Home page

<metacharset="UTF-8">

<metaname="description"content="Ogani Template">

<metaname="keywords"content="Ogani, unica, creative, html">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>Eco Green</title>

<!-- Google Font -->

<link

<!-- Css Styles -->

<linkrel="stylesheet"href="css/bootstrap.min.css"type="text/css">

<linkrel="stylesheet"href="css/font-awesome.min.css"type="text/css">

<linkrel="stylesheet"href="css/elegant-icons.css"type="text/css">

<linkrel="stylesheet"href="css/nice-select.css"type="text/css">

<linkrel="stylesheet"href="css/jquery-ui.min.css"type="text/css">

<linkrel="stylesheet"href="css/owl.carousel.min.css"type="text/css">

<linkrel="stylesheet"href="css/slicknav.min.css"type="text/css">

<linkrel="stylesheet"href="css/style.css"type="text/css"></head>

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

<divclass="humberger__menu__overlay"></div>

<divclass="humberger__menu__wrapper">

<divclass="humberger__menu__logo">

<ahref="#"><imgsrc="img/logo12png.png"height="100"width="200"

</div>

<divclass="humberger__menu__cart">

<ul>

< ><ahref="#"><iclass="fa fa-heart"></ > <i span> </1 span></ ></a li

< ><ahref="shoping-cart.html"><iclass="fa fa-shopping-bag"></i><span>3</span></ ></ >a li

</ul>

<divclass="header__cart__price">item: <span>$150.00</span></div>

</div>

<divclass="humberger__menu__widget">

<divclass="header__top__right__language">

<imgsrc="img/language.png"alt="">

<div>English</div>

<spanclass="arrow_carrot-down"></span>

<divclass="header__top__right__auth">

<ahref="login.html"><iclass="fa fa-user"></i>Login</a>

</div>

<divclass="header__top__right__auth">

<ahref="register.html"><iclass="fa fa-arrow-right"></ >iRegister</a>

</div>

</div>

<navclass="humberger__menu__nav mobile-menu">

<ul>

< class="active"><ahref="./index.html">Home</ ></a li

< ><ahref="./shop-grid.html">Shop</ ></a li

< ><ahref="#">Pages</a>

<ulclass="header__menu__dropdown">

< ><li ahref="./shop-details.html">Shop Details</a></ >li

< ><li ahref="./shoping-cart.html">Shoping Cart</a></ >li

< ><li ahref="./checkout.html">Check Out</ ></a li

< ><li ahref="./blog-details.html">Blog Details</a></ >li

</ >ul

</li

< ><ahref="./blog.html">Blog</a></ >li

< ><ahref="./contact.html">Contact</ ></a li

</ul>

</nav>

<divid="mobile-menu-wrap"></div>

<divclass="header__top__right__social">

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

<ahref="#"><iclass="fa fa-facebook"></ ></i a>

<ahref="#"><iclass="fa fa-twitter"></ ></i a>

<ahref="#"><iclass="fa fa-linkedin"></ ></i a>

<ahref="#"><iclass="fa fa-pinterest-p"></ ></i a>

</div>

<divclass="humberger__menu__contact">

<ul>

< ><iclass="fa fa-envelope"></ ></li

< >Free shipping on orders from $100</li

</ul>

</div>

</div>

<!-- Humberger End -->

<!-- Header Section Begin -->

<headerclass="header">

<divclass="header__top">

<divclass="container">

<divclass="row">

<divclass="col-lg-6 col-md-6">

<divclass="header__top__left">

<ul>

<><iclass="fa fa-envelope"></i></li

<>Free shipping on orders from $100</li

</ul>

</div>

</div>

<divclass="col-lg-6 col-md-6">

<divclass="header__top__right">

<divclass="header__top__right__social">

<ahref="#"><iclass="fa fa-facebook"></ ></i a>

<ahref="#"><iclass="fa fa-twitter"></i></a>

<ahref="#"><iclass="fa fa-linkedin"></ ></i a>

<ahref="#"><iclass="fa fa-pinterest-p"></ ></i a>

</div>

<divclass="header__top__right__language">

<imgsrc="img/language.png"alt="">

<div>English</div>

<spanclass="arrow_carrot-down"></span>

<divclass="header__top__right__auth">

<ahref="login.html"><iclass="fa fa-user"></i>Login</a>

</div>

<divclass="header__top__right__auth">

<ahref="register.html"><iclass="fa fa-arrow-right"></ >iRegister</a>

</div>

</div>