card store the project is based on the online postcard sales project in the early stages of modernization the website is to be developed according to the mvc

Vietnam General Confederation of Labor TON DUC THANG UNIVERSITY FACULTY OF INFORMATION TECHNOLOGYCARD STOREInstructor: Mr... Vietnam General Confederation of Labor TON DUC THANG UNIVERSI

Vietnam General Confederation of Labor TON DUC THANG UNIVERSITY

FACULTY OF INFORMATION TECHNOLOGY

CARD STORE

Instructor: Mr NGUYEN NGOC PHIENStudent: Do Minh Quan – 521H290

Ho Huu An – 521H0489Nguyen Hoang Phuc – 521H0509

Class : 21H50301Year : 25

HO CHI MINH CITY, 2023

Vietnam General Confederation of Labor

TON DUC THANG UNIVERSITY

FACULTY OF INFORMATION TECHNOLOGY

CARD STORE

Instructor: Mr NGUYEN NGOC PHIENStudent: Do Minh Quan – 521H0390

Ho Huu An – 521H0489Nguyen Hoang Phuc – 521H0509

Class : 21H50301Year : 25

HO CHI MINH CITY, 2023

The first sincere thanks we want to give to Mr Nguyen Ngoc Phien,who enthusiastically taught and worked tirelessly to give us enoughtools and skills to complete this report He played an important rolein improving our Web Programming and Applications The secondthanks I would like to give to the teachers of the Department ofInformation Technology of Ton Duc Thang University for giving us theopportunity to do this report.

Because the lack of time is too great, our report will have someerrors, we are very open to receiving feedback from teachers so thatwe can improve my report writing skills.

Finally, we wish you good health and success in your noble career.

Ho Chi Minh city, 13th March, 2023Author

(Sign and write full name)

Do Minh Quan

Ho Huu An

Nguyen Hoang Phuc

THIS PROJECT WAS COMPLETED AT TON DUC THANG UNIVERSIY

We fully declare that this is our own project and is guided by Mr.Nguyen Ngoc Phien; The research contents and results in this topicare honest and have not been published in any form before The datain the tables for analysis, comments and evaluation are collected bythe author himself from different sources, clearly stated in thereference section.

Besides that, the project also uses a number of comments,assessments as well as data from other authors, other agencies andorganizations, with citations and source annotations

Should any frauds were found, we will take full responsibility forthe content of our report Ton Duc Thang University is not related tocopyright and copyright violations caused by us during theimplementation process (if any).

Ho Chi Minh city, 13th March, 2023Author

(Sign and write full name)

Do Minh Quan

Ho Huu An

Nguyen Hoang Phuc

CONFIRMATION AND ASSESSMENT SECTIONInstructor confirmation section

Ho Chi Minh March, 2023(Sign and write full name)

Evaluation section for grading instructor

Ho Chi Minh March, 2023(Sign and write full name)

This is a report on Web Programming and Applications byFaculty of Information Technology of Ton Duc Thang University By thehelp of Mr Nguyen Ngoc Phien This report was finish on 13 March,th2023 If it weren’t for Mr Nguyen Ngoc Phien lessons, we could notperfectly finish this report Sometimes this article of us has manyerrors, we are very open to receive the constructive contributions ofteachers and will use it as a lesson for the final articles.

4.1.2 Login (Login account information ) 14

4.1.3 Oderform (Information order) 14

4.1.4 OderformDetail ( Order details ) 15

4.1.5 Product (Product details) 15

4.1.6 ListProduct (List all existing and existing products) 15

4.1.7 Customer (Personal information about customers) 16

5.4.1 Home 23

5.4.2 Forms 23

5.4.2.1 Add product 23

5.4.2.2 Add product portfolio 24

5.4.2.3 Update product portfolio 24

CHAPTER 1 – INFORMATION ABOUT THE PROJECT1.1 Brief introduction

The project is based on the online postcard sales project in theearly stages of modernization The website is to be developedaccording to the MVC (Moder-View-Controller) by using HTML5, CSS3,JavaScript, JSON, PHP, Google Map Api, Laravel Framework The siteshould work well in all leading browsers including Chrome, IE, Firefox,Brave, Microsoft Edge, etc With a focus toward small and mediumsize companies with global scope we have decided that our first maintarget will still become'micro' We'll consider more than 15 productsworldwide at this time! In addition it has been discussed between usabout making mobile app development application for every majordevice as much like iOS or Android apps are being created nownowadays which means there's only so many applications you canmake available through any one platform & version yet unfortunatelyeven these aren't ready right away no matter how fast modern webgoes your ability to develop them would change drastically soonenough.

The website provides some basic features for users such asregistration, login, view products, add to cart, place orders On the adminpage, have the right to add, edit, update, product information, managecustomer data, products, products and product details and more The sitealso allows you share your shopping experience in various ways onFacebook and Instagram This is an online store where customers canpurchase items from other sellers through their social media accounts orthird party shops but it does not include sales by vendors at retail outletslike Walmart We do allow all content that has been shared via our platform

so we might just be too small of a market compared with Amazon Primewhich gets 90 percent of its traffic from these areas It seems much lessdeveloped (and harder) than any rival company! : In addition there isanother offering - OnlineBazaar These guys focus solely purely aroundgoods.

1.2 The rationale for selecting the topic

These are some of the reasons why we chose the OnlineShopping Cart theme The layout is not as intuitive as a webcheckout, but it comes with features which make shopping easier andfaster for all users:

First of all, this is a very popular topic and can be found in manyplaces, because it has a very high practical application An e-commerce site in the 4.0 era is the first essential for an e-commerceplatform to succeed on both technical terms as well—in particulardesign engineering (EPD) You need ESD with your website strategyright from day one if you want to achieve even small success at anylevel of sales or marketing activity.

Second, Online Shopping Cart contains basic functions thatalmost any website must have Examples on the buyer side are login,registration, add to cart, order, add favorites As for the manager,there is the function of adding, editing, updating products, managingthe list of products, orders, and customers This page helps youunderstand which information about each product we provide alongwith detailed descriptions.

+ Boostrap+ Javascript+ Google Map APIBackend:

+ PHP (Laravel)+ MySQLSoftware:

+ Visual Studio Code+ Xampp

3 Various sections such as Birthday, Anniversary, Friendship,New Year, Mother’s Day etc should be provided with listing of Cards and other Gift-Items.

4 Top Selling section should be provided with most selling items listed into it.

5 On Clicking on any Card or Gift-Item should open a pop-upwindow.

6 A brief summary about individual product should be displayed on the Popup window along with the price.7 Filter should be provided to user to select product, brand

1.8 Source code

Link source code:https://github.com/lasaooo/CardStore_Laravel.git

CHAPTER 2 – WEBSITE AND ACCOUNT LINK2.1 Website Information

Link website: https://quan2k3.minhviet.tk/

2.2 Login accounts for test

2.2.1 User Account

This is the user account when logging into the system Userscan register as a member to be able to add their favorite products orshopping plans to their shopping cart.

Users may not need to register as a member to still be able tobuy products, but the products that users buy will not be added tothe shopping cart.

2.2.2 Admin account

Username: Admin@gmail.comPassword: Admin

The admin account is the account used to manage thewebsite's items such as users, products, employees, news, ordermanagement, product sales statistics as well as revenue.

CHAPTER 3 – INTRODUCTION MVC PATTERN

MVC (MVC Design Pattern) stands for Model - View - Controller.It's an architectural pattern, a common programming pattern used tostructure many advanced websites and applications.

3.1 What is MVC ?

What is MVC? Surely this is a frequently asked question bypeople who are learning about the information technology industry.MVC is a design model in the Smalltalk-76 programming languagepresented by Dr Trygve Reenskaug in 1970 at the Xerox Palo AltoResearch Center (PARC).

MVC is an acronym compounded from 3 components of themodel: Model - View - Controller Each component will have aseparate activity and when combined will form a complete designmodel.

3.2 Components in the MVC pattern

3.2.1 Model

Model contains a data structure that stores all the datainformation of an application In the MVC model, the Model acts as aconnection for the View and Controller components.

With Model set up as a database or simplified as a regular XMLfile When setting up the model component, the programmer needsto ensure database operations such as viewing, retrieving, orprocessing data in the application In other words, the Model part ofthe MVC architecture is the main component and it only containsbusiness logic, data processing methods, data retrieval from thedatabase and sending to views

In short, Model is independent of the user interface.

3.2.2 View

View is a component related to the interface of the applicationas the user experiences it Through MVC's data, users will performsearches and use information on websites and applications.

The View component is used a lot in the web developmentprocess and this is also where the HTML components are created.Another function of this View component is the ability to record userbehavior to interact with the Controller The View section helps usersto see the information of the website and application visually.

In conclusion, View is the part you see on the Web page.

3.2.3 Controller

Controller is the part that will handle requests when the usermanipulates the application through the view component At thispoint, the Controller will execute the query and output the data inaccordance with the user's request And to do that, the controlleralso needs to be able to connect to the model to get the data.

Briefly, the function of the Controller is to control, navigaterequests / requests from users and specify this method, that methodin the Model will handle.

3.3 How to work in MVC

When the user performs an operation on the application orwebsite, the client will send a request to the server (server) At thispoint, the controller will proceed to receive and process the request.Some cases need to access data, the controller will connect to theModel to support the database.

After the Controller finishes processing the request, the resultwill be returned to the View At this point, the View will proceed togenerate HTML codes to return the resulting browser interfaceaccording to the user's request.

3.4 Advantage

Easy testing: Independent components make it easy for

programmers to control and fix problems and errors before finalizingthe product to users.

Control function: When combined with common programming

languages such as CSS<HTML, Javascript, the MVC model is thesupport to play the optimal control role on the platform of theprogramming language.

View and size: MVC helps to optimize the bandwidth when

used to avoid the case when many requests are made at the sametime, creating many large files that directly affect the networkconnection.

Soc function (Separation of Concern): Allows classifying

into Model, View, Database, for easier management and control.

Coherence: Programmers can combine the MVC model on

many different website / application platforms to make it moreconvenient to write code and reduce the load.

The structure is quite simple: Suitable for many users when

there is a need to program websites or other types of applications.

3.5 Disadvantage

For the MVC model with high separation between components,it is suitable for application in large projects If the MVC application isin small projects, it is easy to encounter cumbersome and resource-intensive situations when developing the project At the same time,data transfer time is also something to consider when doing smallprojects.

CHAPTER 4 – DATABASE4.1 Design Table

Email Varchar 300 Email of emplopyee

4.1.2 Login (Login account information )

Field Name Data type Width Description

Username Varchar 50 Username Login (admin,employee,guest)

4.1.3 Oderform (Information order)

Field Name Data type Width Description

4.1.4 OderformDetail ( Order details )

Field Name Data type Width Description

Link Varchar 120 Link of Order Detail

4.1.5 Product (Product details)

Field Name Data type Width Description

GiaSp Decimal 10,2 Price of ProductMoTa Varchar 1000 Description of Product

4.1.6 ListProduct (List all existing and existing products)

Field Name Data type Width Description

4.1.7 Customer (Personal information about customers)

Field Name Data type Width Description

Mota Varchar 500 Description of Customer

4.2 Logical model

CHAPTER 5 – WEBSITE INTERFACES5.1 Login

5.2 Register

5.3 User

5.3.1 Home

5.3.1.1 Home

5.3.1.2 About us

5.3.1.3 Contact

5.3.1.4 Product

5.3.2 Add to favorites

5.3.3 Add to cart

5.3.4 Checkout

5.4 Admin

5.4.1 Home

5.4.2 Forms

5.4.2.1 Add product

5.4.2.2 Add product portfolio

5.4.2.3 Update product portfolio

5.4.2.4 Update product

5.4.3 Data table

5.4.3.1 Data customer

5.4.3.2 Data product

5.4.4 Data Order

5.4.4.1 Order

5.4.4.2 Order Detail

CHAPTER 6 – CONCLUSION

After developing this app, the team learnt a lot about appdevelopment At the same time, it revealed to the group the gapsthat the members needed to fill and learn for future work.