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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.68 MB, 39 trang )

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

<b>Vietnam General Confederation of Labor TON DUC THANG UNIVERSITY </b>

<b>FACULTY OF INFORMATION TECHNOLOGY</b>

<b>CARD STORE</b>

<i><b>Instructor: Mr. NGUYEN NGOC PHIENStudent: Do Minh Quan – 521H290</b></i>

<b>Ho Huu An – 521H0489Nguyen Hoang Phuc – 521H0509</b>

<i><b>Class : 21H50301Year : 25</b></i>

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

Vietnam General Confederation of Labor

<b> TON DUC THANG UNIVERSITY </b>

<b>FACULTY OF INFORMATION TECHNOLOGY</b>

<b>CARD STORE</b>

<i><b>Instructor: Mr. NGUYEN NGOC PHIENStudent: Do Minh Quan – 521H0390</b></i>

<b>Ho Huu An – 521H0489Nguyen Hoang Phuc – 521H0509</b>

<i><b>Class : 21H50301Year : 25</b></i>

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

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.

<i> Ho Chi Minh city, 13th March, 2023Author</i>

<i>(Sign and write full name)</i>

<i>Nguyen Hoang Phuc</i>

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

<b>THIS PROJECT WAS COMPLETED AT TON DUC THANG UNIVERSIY</b>

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).

<i>Ho Chi Minh city, 13th March, 2023Author</i>

<i>(Sign and write full name)</i>

<i>Nguyen Hoang Phuc</i>

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

<b>CONFIRMATION AND ASSESSMENT SECTION</b>

<b>Instructor confirmation section</b>

<i>Ho Chi Minh March, 2023(Sign and write full name)</i>

<b>Evaluation section for grading instructor</b>

<i>Ho Chi Minh March, 2023(Sign and write full name)</i>

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

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,<small>th</small>2023. 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.

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

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

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

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

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

<b>CHAPTER 1 – INFORMATION ABOUT THE PROJECT</b>

<b>1.1 Brief introduction</b>

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

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

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.

<b>1.2 The rationale for selecting the topic</b>

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.

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

+ Boostrap+ Javascript+ Google Map APIBackend:

+ PHP (Laravel)+ MySQLSoftware:

+ Visual Studio Code+ Xampp

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

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

<b>1.8 Source code</b>

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

Link source code: class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>CHAPTER 2 – WEBSITE AND ACCOUNT LINK</b>

<b>2.1 Website Information</b>

Link website: Login accounts for test</b>

<i><b>2.2.1 User Account</b></i>

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.

<i><b>2.2.2 Admin account</b></i>

Username: : 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.

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

<b>CHAPTER 3 – INTRODUCTION MVC PATTERN</b>

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.

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.

<b>3.2 Components in the MVC pattern</b>

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

<i><b>3.2.1 Model</b></i>

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.

<b>In short, Model is independent of the user interface.</b>

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.

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

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.

<b>In conclusion, View is the part you see on the Web page.</b>

<i><b>3.2.3 Controller</b></i>

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.

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.

<b>3.4 Advantage</b>

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

<b>Easy testing: Independent components make it easy for</b>

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

<b>Control function: When combined with common programming</b>

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

<b>View and size: MVC helps to optimize the bandwidth when</b>

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

<b>Soc function (Separation of Concern): Allows classifying</b>

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

<b>Coherence: Programmers can combine the MVC model on</b>

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

<b>The structure is quite simple: Suitable for many users when</b>

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

<b>3.5 Disadvantage</b>

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.

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