Information Technology Assignment 1 Unit Semi - Project.pdf

BTEC FPT INTERNATIONAL COLLEGE

INFORMATION TECHNOLOGY ASSIGNMENT 1

UNIT: SEMI - PROJECT

STUDENT : NGUYEN THI TUYET NHUNG CLASS : IT16101

STUDENT ID : BDAF200008

SUPERVISOR : NGUYEN HOANG ANH VU

DaNang, June 2022

ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 4 HND Diploma in Business

Unit number and title Unit: Semi-project

Submission date 26/06/2022 Date received (1st submission)

Re-submission dateDate received (2nd submission)

Student name Nguyen Thi Tuyet

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: TUYETNHUNG

Grading grid

i

Summative Feedbacks: Resubmission Feedbacks:

Internal Verifier’s Comments:

Signature & Date:

1.10 Product details page 16

Detailed explanation of the interface 24

Source code 27

CONCLUSION 44

CRITICAL EVALUATION 45

REFERENCES 46

iii

LIST OF TABLES AND FIGURES

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

iv

LIST OF ACRONYM

INTRODUCTION

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,

About the site

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:

1.1 Home page

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

Figure 1 Home page

1.2 Shop page

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

Figure 2 Shop page

1.3 Register page

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

Figure 5 Blog page

1.6 Blog-details page

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

Figure 6 Blog-details page

1.7 Shopping cart page

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

Figure 7 Shopping cart page

1.8 Checkout page

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

Figure 8 Checkout page

1.9 Contact page

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

Figure 9 Contact page

1.10 Product details page

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

1.10.1 Organic Sweet Corn

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

Figure 10 Organic Sweet Corn 1.10.2 Phu Quoc Cobia

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

Figure 11 Phu Quoc Cobia

1.10.3 L'amant - Organic Roasted Coffee

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

Figure 12 L'amant - Organic Roasted Coffee 1.10.4 Beef

This is the detail page for the product " Beef"

Figure 13 Beef 1.10.5 Markal Organic Soybeans

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

Figure 14 Markal Organic Soybeans

Detailed explanation of the interface

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

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

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

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

Source code

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>

<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">

<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"></ >iecogreen@gmail.com</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>ecogreen@gmail.com</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>