fs Khoa Cong nghé théng tin BAI THUC HANH 1

4a -| Bo mén Ky thuat phan mém Tong quan vé Lap trinh Web

<a” LAP TRINH WEB

A. MUC TIEU
— Trinh bay duoc cau tric cua m6 hinh MVC
— [Link] MVC tao duoc ApplicationWeb theo m6 hinh nay.
— Thiét ké View — Control hién thi duoc cac thé html (...).
— LayoutTemplate, RenderBodyQ(), ActionLink
B. NOI DUNG THUC HANH
1. Co sé ly thuyét
1.1. Kién thire cin nho
Chuong 1. Téng quan vé lap trinh Web voi [Link] MVC
1.1. Téng quan vé lap trinh Web
Lap trinh Web la qua trinh xdy dung cac tng dung hoac trang web cé thé truy cap
thong qua Internet hoac mang noi b6. Ung dung Web hoat dong dia trén mo hinh Client
— Server, trong dé Client (thwong 1a trinh duyét hodc img dung di dong) giri yéu cau
(request) toi Server (may chu luwu trit va xtr ly img dung). Server tiép nhan, xt ly yéu
cau (bao g6m ca truy xuat dit liéu tir co so di liéu néu can) va gtri lai phan héi (response)
cho Client. M6 hinh nay gitp tach biét gitta phan hién thi (giao dién nguwoi ding) va
phan xtr ly dit liéu, tir d6 tang tinh linh hoat va kha nang mo réng cua hé thong.
1.1.1. M6 hinh Client — Server
e Client: Thiét bi hodc phan mém (trinh duyét, tmg dung) gui yéu cau (request)
dén may cht.
e Server: May chu tiép nhan yéu cau, xtr ly va gtri lai phan hdi (response).

Request
ee a
_ =
=
HTML
Browser Web Server

1.1.2. Giao thirc HTTP/HTTPS va vong doi Request — Response

e HTTP: Giao thi truyén tai siéu van ban, hoat déng theo m6 hinh yéu cau —
phan hi.
e HTTPS: Phién ban bao mat cua HTTP, ding SSL/TLS dé ma héa dir liéu.
e Vong doi Request — Response trong MVC:
1. Client gtri yéu cau HTTP (URL, method, dir liéu).
2. Server nhan, xtr ly (chay code backend, truy xuat CSDL).
3. Server tra vé phan hoi HTTP (HTML, JSON, XML...).
4 Client hién thi ndi dung cho ngwoi ding.
éa Khoa Céng nghé thong tin BAI THUC HANH 1
WONG otis
p

MD | Bo mén K¥ thuat phan mém Tong quan vé Lap trinh Web

mun” LAP TRINH WEB

Request —
Client Controller

Response

1.2. Gidi thigu vé [Link] MVC

1.2.1. Gidi thiéu vé mé hinh MVC
Mo hinh MVC la mot mo hinh phat trién ung dung co kién tric t6t, co kha nang
kiém thu tot va dé dang van hanh, bao tri.
oO Model : chira dir ligu, luan chuyén dir ligu, Model la cac lop chire nang thé hién
cho viéc xr ly dir liéu va cac van dé lién quan dén nghiép vu va cac quy tac rang budc
dir liéu. Dong thoi, nd con co nhiém vu luu trir thong tin, trang thai cua cac déi tuong
vao CSDL.
o View: hién thi dir liu, twong tac nguoi ding, View la thanh phan chiu trach nhiém
hién thi cdc giao dién dudi dang ht ml theo co ché phat sinh déng ctia tng dung. Cac
thong tin can hién thi sé duoc lay tir Models théng qua cac Controllers.
o Controller: Controller nhan yéu cau, xu ly yéu cau, néu ye can truy xuat dir liéu thi
controller sé gtri yéu cau dén tang model dé truy xuat dir liéu tra vé cho View.
Cau tric project voi mé hinh MVC (App Data, App Start, Controllers, Models,
Views,...)
Controllers Chita cac file xu ly dong vai tro diéu khién

Models Chitra cac class

Views Chita giao dién (Code html, css)

App_Data Luu tri cac tap tin dir ligu, tap tin XML hoac
Database

App_Start Chia cac tap tin lién quan dén viéc cau hinh cho
cac tinh nang : routers, filters,...

Content Chita tap tin CSS, hinh anh lién quan dén giao
dién

Scripts Chua cac thu vién JavaScript

/ “eo Khoa Cong nghé théng tin BAI THUC HANH 1
_) BO mén KY thuat phan mém Tong quan vé Lap trinh Web
Y LAP TRINH WEB

[Link] Chira tat ca cdc thu vién sd trong img dung

[Link] Cau hinh cho website

[Link]

1.2.2. Quy trinh xu ly Request trong MVC

Khi nguoi dung nhap mot URL hoac nhan vao m6t lién két, qua trinh xu ly trong
[Link] MVC dién ra nhu sau:
1. Nguoi ding gtri request dén tng dung théng qua trinh duyét hoac img dung
khac.
2. Routing xac dinh Controller va Action dua vao URL.
3. Controller tiép nhan request, go1 Model dé lay hoac cap nhat dir liéu.
4. Controller chon mot View phu hop va truyén dir liéu can thiét.
5. View két hop dir liéu tr Model va tao ra noi dung HTML.
6. HTML duoc guri vé Client dé hién thi.
1.2.3. Routing trong [Link] MVC
Routing 1a co ché anh xa URL tir yéu cau HTTP dén Controller va Action.
—
Convention Routing: Su dung mau chung {controller}/{action}/{id?} duoc
dinh nghia mot lan trong cau hinh.
Vi du: URL /Product/Details/5 — goi ProductController, action Details, id=5.
— Attribute Routing: Dinh nghia try tiép trong Controller/Action bang attribute
[Route("...")]. Giup tao URL tuy bién, than thién voi SEO va dé bao tri.
1.2. Gidi thiéu bai tap mau

Yéu cau:
1. Tao 01 controller Home ( [Link])
2. Thiét ké View Index nhu sau
Home Page x

Cc a @ localhost:1737

This is Home Page

Hello Every body in class O8DHTH !

3. Thiét ké View About nhu sau

- <== 4
About x

€ Cc @ localhost:1737

This is About Page

4. Diéu huong trang bang [Link] sao cho view hién thi dau tién la view
Index trong controller Home
 \, Khoa Cong nghé théng tin BAI THUC HANH 1
. BO mén Ky thuat phan mém Tong quan vé Lap trinh Web
“ LAP TRINH WEB

5. Sau do thuc hién diéu hung trang sang view About trong Controller Home.
6. Tao chuyén hung giita 2 trang Index va About (str dung hyperlink).
7. Tao mot phuong thirc HienThi trong HomeController thue hign tra vé chudi lay tir
tham so id nhw sau:
lecalhest:1737/Home/Indev? x ] is

os Cc a 2) localhost Home, 7

ID=-@

8. Tao mot phuong thirc Index3() trong HomeController thuc hién tra vé View
[Link]; thyc hién truyén tham 2 s6 id va name lay tir URL, sau do xuat gia
tri 2 tham s6 nay trén view [Link] nhu sau (Ding ViewData va Dung
ViewB at)
Index3 - My [Link] Application 6% Mail - Nguyén Hai Yén - Outlo’ X New Tab |

0 0 localhost:62809/Home/Index3 /Rid=@Binaime=Nguyen talons

Application name

Index3
ID=9
Name = Nguyen
Hai Yen;

© 2020 - My [Link] Application

Hwong dan:
B1: Tao Project mdi File > New > Project..

Create a new
project BORIS TORRE AES: UK? i Clear all

c# ’ All platforms ’ All project types y

Recent project templates

mi WPF App (.NEI Framework)
<=> Windows Presentation Foundation client application
‘ [Link] Core Web App
(Model-View-Controller) C# XAML Windows Desktop
@

Ga : Console Application G# = ce
Console App (.NET Framework)
A project for creating a command-line application

Bl [Link] Core Web App = C# C# — Windows Console

[i Windows Forms App C# i [Link] Web Application (.NET Framework)

Project templates for creating [Link] applications. You can create [Link] Web
se Forms, MVC, or Web API applications and add many other features in [Link].
BH Console App C++
C# Windows Cloud Web

+ [Link] Web Application C#

ch

(.NET Framework) gay Class Library (.NET Framework)

°

A project for creating a C# class library (dll)

j Empty Project C++
yt

C# Windows Library

ry Azure WebJob (.NET Framework)

@®

Next
 Khoa Céng nghé thong tin BAI THUC HANH 1
BO mén Ky thuat phan mém Tong quan vé Lap trinh Web
LAP TRINH WEB

B2: Céu hinh lwu triv du an

Configure your new project

[Link] Web Application (.NET Framework) # = Windows Cloud Webb
Project name

LTWeb_Bai01

Location

CADuLieu\, 2025-2026_HK1\LapTrinhWeb\, -|

Solution name @

[¥] Place solution and project in the same directory

Framework

.NET Framework 4.7.2 =

Back Create

B3: Chon MVC

Create a new [Link] Web Application

Authentication
me
el! Em pty
No Authentication
An empty project template for creating [Link] applications. This template does not have any content in it. Change

| Web Forms
A project template for creating [Link] Web Forms applications. [Link] Web Forms lets you build dynamic websites
using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let Add folders & core references
you rapidly build sophisticated, powerful Ul-driven sites with data access.
[a] Web Forms
4 mvc
Level mvc [7] Web API
A project template for creating [Link] MVC applications. [Link] MVC allows you to build applications using the
Model-View- Controller architecture. [Link] MVC includes many features that enable fast, test-driven development
for creating applications that use the latest standards.

tf Advanced
ri Web API
[¥] Configure for HTTPS
A project template for creating RESTful HTTP services that can reach a broad range of clients including browsers and
mobile devices. CJ Docker support

(Requires Docker Desktop)

Fea Single Page Application [| Also create a project for unit tests
A project template for creating rich client side JavaScript driven HTMLS applications using [Link] Web API. Single
Page Applications provide a rich user experience which includes client-side interactions using HTMLS5, C553, and
JavaScript.

B3: Tao [Link]

B4: Tao View [Link]; Tao View [Link]

B5: Diéu hudng trang bang [Link]

 Khoa Cong nghé thong tin ; BAI THUC HANH 1
Bo mon Ky thudt phan mém Tong quan vé Lap trinh Web
LAP TRINH WEB

ese Bail_HelloWord
t
i public class RouteConfig
t
A public static void RegisterRoutes(RouteCollection routes)
{
routes. IgnoreRoute("{resource}.axd/{*pathInfo}");

routes .MapRoute(
name: "Default",
url: “{controller}/{action}/{id}",
| defaults: new { controller = "Home", action = "About", id = [Link] }
3
t
, t

Ket qua:
RK ? e

Home Page x

C a @ localhost:1737

This is Home Page

Hello Every body in class O8DHTH !

2. Bai tap tai lop

Yéu cau:
(1) Tao giao dién [Link] nhu sau:
© DB localhost:64493/Product/Index# © (70% “OW

Ha Nei: TP.H6 Chi Minh:

Dién thoai: 024,73007.008 - 093.4647.172
[Link]
Dién thoai: 028.73007.008 - 094.7723.444
Dia chi: S6 63/445 Lac Long Quan, Tay H8, Ha Dia chi: 189 XVN Tinh, P.17, Q. Binh Thanh
N6i Email: hem @[Link]
Email: hn@[Link]

HOA THEO CHU DE

HOA SINH NHAT

HOA KHAI TRUONG

LAN HO BIEP

HOA CUCI

HOA CHIA BUON

QUATANG

TRAI CAY

250,000d tré xudng

250,000d - 400.0004

400,000d - 600,0004

600,000d - 900,000d

Trén 1,000,0000

(2) Tao trang chu ké thira tir_ LayoutPage nhu sau:

 Khoa Cong nghé thong tin ; BAI THUC HANH 1
Bo mon Ky thudt phan mém Tong quan vé Lap trinh Web
LAP TRINH WEB

| O =D localhost:64493/Product/SanPham Him “UW

Ha Néi: TP.H6 Chi Minh:

[Link]
Di ién thoai: 024.73007.008 - 093.4647.172 Dién thoai: 028.73007.008 - 094.7723.444
Di ia chi: S6 63/445 Lac Long Quan, Tay H6, Ha Dia chi: 189 XVN Tinh, P.17, Q. Binh Thanh
ORE Noi Email: hom@[Link]
Email: hn@[Link]

HOA THEO CHU DE

HOA SINH NHAT

HOA KHAI TRUONG

LAN HO IEP

HOA CUGI
Sinh nhat 1 Sinh nhat 2 Sinh nhat 3 Sinh nhat 4
Gia: 300,000 Gia: 600,000 Gia: 500,000d Gia: 700,000 HOA LAN

HOA CHIA BUON

QUA TANG

TRAI CAY

250,000 tré xuéng

250,000¢ - 400,000¢
Cudi 1 Cuéi 2 cuéi 3 Ccusi 4
400,000d - 600,000d
Gia: 300,000 Gia: 600,000 Gia: 500,000 Gia: 700,000

600,0004 - 900,000¢

Trén 1,000,0004

SPE ers
ONE MEL Mana rease4)

(3) Tao trang dang ky

© D localhost:64493/Product/Dangky Him «Or
Ha Noi: [Link] Chi Minh:
Dign thoai: 024,73007.008 - 093.4647.172
[Link]
Dién thoai: 028.73007.008 - 094,7723.444
Dia chi: S¢ 63/445 Lac Long Quan, Tay Ho, Ha Dia chi: 189 XVN Tinh, P.17, Q. Binh Thanh
SEE NOi Email: hcom@[Link]
Email: hn@[Link]
@

DANG KY TAI KHOAN fale) Wien eal

Tén khach hang HOA SINH NHAT

Enter your name
HOA KHAI TRUONG
Bia chi Email
LAN HO IEP
Enter your email Address
HOA CUGI
Password

HOA LAN

Gidi tinh HOA CHIA BUON

© Nam O ne © khae
QUA TANG
Nghé nghiép

El
TRAI CAY
Giao vién

fo Bisson)

250.000d tré xuding

250,000d - 400,000

400,000d - 600,000

600,0004 - 900,0004

Trén 1,000,000

(4) Tao trang dang nhap nhu sau:

 Khoa Cong nghé thong tin BAI THUC HANH 1
Bo mon Ky thudt phan mém Tong quan vé Lap trinh Web
LAP TRINH WEB

Q dD localhost:64493 70%
Ha Néi: TP.Hé Chi Minh:

[Link]
Dién thoai: 024.73007.008 - 093.4647.172 Dién thoai: 028.73007.008 - 094.7723.444
Bia chi: $6 63/445 Lac Long Quan, Tay Hé, Ha Dia chi: 189 XVN Tinh, P.17, Q. Binh Thanh
a Ndi Email: hcm @[Link]
Email: hn@[Link]

HOA THEO CHU BE

DANG NHAP
UserName HOA SINH NHAT
Enter your username |
HOA KHAI TRUGNG
Must to enter your username

Password LAN HO BIEP

[ eeereorenreensnner | eae
Password include special character!

HOA LAN
[_JRemember Password
HOA CHIA BUON

QUA TANG

TRAI CAY

CHON THEO GIA

250,000d trd xudng

250,000d - 400,000d

400,000d - 600,000d

600,000d - 900,0004

Trén 1,000,000d

Yéu cau: o
Su dung giao dién chung (layout) khi thiét ké phan khung trang

MAI HIEN SON PHAT

Cheayhrr shor nude phir phi toan qubo
maihiensonphat
¢ Bat che, bet nép. tink ingen ma buen
¢ Mai nip, bat kNS ken, hed xby dung
¢ Tu vdn hd by ty cong

Trangchi Sanpham Dangnhap Dang ky Lién hé Search Search

May xép

May che

May vom

May hién di déng

-_

San pham 1 San pham 2 San pham 3 San pham 4

S6 ngudi truy cap: 87
Some quick example Some quick example Some quick example Some quick example
S6 nguai online: 10
text to build on the text to build on the text to build on the text to build on the
S6 lugng thanh vién: 46
card title and make card title and make card title and make card title and make
up the bulk of the up the bulk of the up the bulk of the up the bulk of the
card's content. card's content. card's content.
card's content.

Hinh | — Trang chu

““@» Khoa Céng nghé théng tin BAI THUC HANH 1
os ‘s-) B6 mon K¥ thuat phan mém Tong quan vé Lap trinh Web
<emunS” LAP TRINH WEB

MAI HIEN SON PHAT Gr

som Chayin sdn rudt & phin phos todn qude
maihiensonphat + Betcha bot nly bk ihe mdi bile
+ Mae nép, Dat hS lon, kudt way Ong
¢ Tu vin bd by ty cing

Trang chi San phim P8ngnhap BDangky Liénhé Search

May xép

May vom

May hién di déng

Hé tro tructuyén —_

Submit

S6 ngudi truy cap: 87

S6 ngudi online: 10
S6 lugng thanh vién: 46

Hinh 2 — Trang dang nhap

MAI HIEN SON PHAT

im “Chaugter sire cued S phir pha totr quate
f ° Bat che Det nt bee ite me hen
° Mae nt Dat ANS bom Mt aby Ong
¢ Tu wie hd bo ty cing

Trangchd Sinphim Dangnhip Dangky Lin hé Search | Search

@ Dang ky thanh vién!

Ho

Email

Mat khau

Nhap lai mat khau

Ngay sinh

Ngay v

O Nam © N&

Dang ky

Hinh 3 — Trang dang ky

 Khoa Cong nghé thong tin ; BAI THUC HANH 1
Bo mon Ky thudt phan mém Tong quan vé Lap trinh Web
LAP TRINH WEB

MAI HIEN SON PHAT

‘Chapt sn rudbt & phin phe totn qudec
maihiensonphat ¢ Bat che bet nép. bea ingen
me etn
© Ma nép bet kd ton hed aby Ong
¢ Tu wan hd oy thy cdg

Trangchd Sanpham Dangnhaép Dangky Lién hé Search Search

May xép

May che

May vom

May hién di déng

S6 ngudi truy cap: 87

S6 nguGi online: 10
S6 lugng thanh vién: 46

Hinh 4 — Trang lién hé

Yéu cau:

— Vao link sau tai 01 giao dién mau: [Link]

— Tao Folder Shared trong Views dé luu cac giao dién mau (Master page);
Add moi mot giao dién mau
@® localhost-41229/#

E-Commerce Responsive Design Web Security

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipswN OM, d ung. trang S ervice
adipisicing elit. Minima maxime quam adipisicing elit. Minima maxime quam adipisicing elit. Minima maxime quam
architecto quo inventore harum ex magni, architecto quo inventore harum ex magni, architecto quo inventore harum ex magni,
m

dicta impedit dicta impedit dicta impedit

Copyright © Your Website 2019 Privacy Policy Terms of Use

Footer

10