lOMoARcPSD|20333215

CMP376 - Thực hành Lập trình Web

Lập trình web (Trường Đại học Bách khoa - Đại học Quốc gia Thành phố Hồ Chí Minh)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by AstuteBrink5 ([email protected])
 lOMoARcPSD|20333215

T
Biên

www.hutech.edu.vn

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

*1.2021.CMP376*
Các ý - :
[email protected]

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

I
M L
...................................................................................................................I
........................................................................................................... II
................................................. 1
T WEB APPLICATION MVC 5 .. 1
.......................................................................................................... 1
..................................................................................... 1
TÓ .................................................................................................................. 7
...................................................................................................... 7
........................................ 8
.............................................................................................. 8
.............................................................................. 17
................................................................................................................ 19
.................................................................................................... 19
-SCHOOL ........................................... 20
...................................................................................... 20
................................................................................................ 21
....................................................................................................... 21
........................................... 21
.................................................................... 21
3.4.2 Phân tích use case ......................................................................................... 22
- .......................................................................... 23
...................................................... 23
.................................................... 23
3.5.2 Use- ........................................................................ 28
................................................................. 44
............................................. 46
3. ................................ 47
(Form Sign up) .................... 49
.......................... 51
3.5.8 Use- .............................................................. 53
3.5.9 Use- .......................................................................... 60
3.5.10 Xem danh sách k ..................................................... 65
3.5.11 Use- .................................................... 69
3.5.12 Use-case thông báo (notification) .................................................................. 80
................................................................ 85
................................................................................................................ 88
.................................................................................................... 89
............................................................................................ 90

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

II

cao.

- Bài 1:

- Bài 2:

- Bài 3: -School

sinh viên

sinh viên
sinh viên
thúc toàn b sinh viên .

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

III

- (100%):

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 1: 1

BÀI 1:
WEB ASP.NET MVC

Bài này giúp :

1.1 NV MVC 5 VÀ CÁC YÊU C U C N

THI VI T WEB APPLICATION MVC 5
1.1.1 Yêu c u

nh

- Windows Vista Sp2

- Windows 7

- Windows 8

- Windows 10

1.1.2 t MVC5

website http://www.microsoft.com/en-
us/download/41532

Chú ý: Visual
Studio 2013 & Visual Studio 2015

- ng ASP.NET MVC 5

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

2 BÀI 1:

New Project

Visual C# Web
Template

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 1: 3
Web Application MVC5 MVC

MVC Application

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

4 BÀI 1:

c Mô t
/Controllers c ch a các l p x lý g i là Controller
/Models c ch a các l ng Model
/Views t các m u giao di n View
/Scripts c ch a các b n javascript c tích h p
vào s n c a MVC ho n t ch
vi n Javascript mà mình t phát tri n
/fonts Ch a các m u font c n Bootstrap
/Contents t CSS, hình nh ho c các file javascript
/App_Data Ch a database local
/App_Start Các l p c u hình c a ng d Routing, Bundling
(h tr nén CSS, javascript gi c)

project View/ View in Browser

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 1: 5
Views/Home/Index.cshtm,
RouteConfig

http://Localhost:Port:/{Controller}/{Action}/{Id}

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

6 BÀI 1:

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 1: 7
TÓM

-end,
-

C
Câu 1: Mô hình MVC là gì? Các thành MVC ?

Câu 2: trong mô hình MVC nào?

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

8 BÀI 2:

BÀI 2: V

Bài này giúp :

2.1 T O MODEL BOOK

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 2: 9

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

10 BÀI 2:

BooksController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 2: 11
ListBooks

File Views/Books/ListBooks.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

12 BÀI 2:

File App_Start/RouteConfig.cs

website

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 2: 13
(Book Detail)

Views/Books/ListBook.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

14 BÀI 2:

Xem Link

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 2: 15
Trang Views/Books/Detail.cshtml

Sách (Edit Book)

File Views/Books/ListBooks.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

16 BÀI 2:

File BooksController.cs

Views/Books/Edit.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 2: 17
2.2 RÀNG BU C D LI U NH P
File Models/Book.cs

File Views/Books/Edit.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

18 BÀI 2:

File Controllers/BooksController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 2: 19

TÓM

Câu 1: & MVC?

Câu 2: mô hình MVC vào trình?

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

20 BÀI 3: - SCHOOL

BÀI 3: HÀNH THEO

WEBSITE BIG - SCHOOL

Bài này giúp :

- Mô hình Entity Framework code First work-flow

- Restful APIs

3.1 CÔNG NGH S D NG

- ASP.NET MVC 5

- Entity Framework 6

- ASP.NET Identity

- Bootstrap

- Bootbox js

- Jquery

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 21
3.2 MÔ T YÊU C U

3.3 PH N M M

- IDE: Visual studio community 2015

- MSSQL Server >= 2008

- t các Extension cho VS 2015 (Tool Extension & Update)

ReSharper (free 30 trial license)

Productivity Power Tools 2013 (free)

Web Essentials 2015 (free)

3.4 PHÂN TÍCH YÊU C U C A NG D NG BIGSCHOOL

3.4.1 nh các usecase trong d án

- án giúp

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

22 BÀI 3: - SCHOOL

- . Khi theo dõi

.

3.4.2 Phân tích use case

3.4.2.1 Ch ng th c i dùng (s d ng ASP.NET Identity

c tích h p trong ASP.NET MVC5)

3.4.2.2 Khóa h c

- Thê

3.4.2.3 c

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 23
-

3.4.2.4 Theo dõi

- theo dõi

- Trang tin theo dõi (Big School Feed)

3.4.3 Th t use-case s th c hi n

1 2 3 4 5
Xem danh sách

Danh sách các Xem các khóa

ra
Danh sách
viên
Big school Feed

3.5 XÂY D NG NG D NG B NG ASP NET MVC

3.5.1 T d li u theo mô hình EF Code First

- Tool/ Nuget package manager/ package manager console

enable-migrations

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

24 BÀI 3: TH - SCHOOL

trên domain model

.

- Models/IdentityModel.cs

- ,

- Web.config

<connectionStrings>

<add name="DefaultConnection" connectionString="Data Source=DESKTOP-

AT2MHH8;Initial Catalog=BigSchool;user id = sa; pwd = anh@; Integrated Security=True" providerName="
System.Data.SqlClient" />

</connectionStrings>

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 25
Add-

update-database: T theo file

- Add
Course.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

26 BÀI 3: - SCHOOL

- Course.cs

- Tách Class Category Models

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 27
- Models/IdentityModel.cs

Tách Class ApplicationDbContext domain class Course

và Category.

- File Models/IdentityModes.cs
Models/ApplicationUser.cs
)

- Models có

add-migration 'CreateTableCourse'

update-database

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

28 BÀI 3: - SCHOOL

3.5.2 Use-case: Thêm m i khóa h c

3.5.2.1 T o m u d li u các ch c a khóa h c

add-migration PopulateCategoryTable

update-database

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 29
- Category

3.5.2.2 T o Form thêm khóa h c v i Bootstrap

- Controller
Empty Controller

- CoursesController Controller

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

30 BÀI 3: - SCHOOL

- Add
View

- T ra
Create.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 31
- Views/Courses/Create.cshtml F5

- Thành menu Create Course

- :

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

32 BÀI 3: TH - SCHOOL

-
http://getbootstrap.com/

- DateTime
(n

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 33
- folder tên là ViewModels

- ViewModels/ :

- Views/Course/Create.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

34 BÀI 3: - SCHOOL

- c: Views/Course/Create.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 35
-

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

36 BÀI 3: - SCHOOL

Form (views/Course/Create.cshtml)

i ASP.NET Identity.
.

- File Controllers/CourseController.cs

- , vào trang thêm

(http://localhost:50528/Courses/Create

- (Register as a new user)

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 37

- File Views/Course/Create.cshtml

- File Controllers/CoursesController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

38 BÀI 3: - SCHOOL

- http://localhost:50528/Courses/Create )

Server-side Validation

- File ViewModels/CourseViewMode.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 39

- File Views/Course/Create.cshtml

- File Controllers/CoursesController.cs

tác)

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

40 BÀI 3: TH - SCHOOL

Custom validatation

-
(dd/MM/yyyy)

- ViewModels/FutureDate.cs ViewModels

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 41
- File ViewModels/CustomViewModel.cs

- Ngày, tháng khóa

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

42 BÀI 3: - SCHOOL

-
ValidTime.cs ViewModels
CourseViewModel.cs (ViewModels/CourseViewModel.cs)

- Time

Client-

- File View s/Course/Create.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 43
-

CROSS SITE REQUEST FORGERY - CSRF

i lên server,

- File Views/Course/Create.cshtml, File Controllers/CoursesController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

44 BÀI 3: - SCHOOL

3.5.3 nh c a Bootstrap
- Chorme
Inspect

- file Contents/Site.css

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 45
- File Contents/Site.css

- File Views/Shared/__LoginPartial.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

46 BÀI 3: - SCHOOL

3.5.4 Thêm m i thu c tính trong Asp.Net Identity Users

- File Models/ApplicationUser.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 47
-

add-migration AddNameColumnToApplicationUser

update-database

- Name (ex:

3.5.5 Hi n th danh sách các khóa ho c s p di n ra t i

trang ch

- File Controllers/HomeController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

48 BÀI 3: TH - SCHOOL

- File Views/Home/Index.cshtml

- http://localhost:50528/ )

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 49
3.5.6 B sung thu c tính Name vào mà
i dùng nh p tên (Form Sign up)
- File Models/AccountViewModels.cs, Class RegisterViewModel

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

50 BÀI 3: - SCHOOL

- File Views/Account/Register.cshtml

- File Controllers/AccountController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 51
-
(http://localhost:50528/Account/Register)

3.5.7 Ch nh s a giao di n trang ch : danh sách khóa h c

s p di n ra
- File Views/Home/index.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

52 BÀI 3: - SCHOOL

- File Content/Site.css

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 53
3.5.8 Use- khóa h c
User và Course Attendance

User Course

Attendance

- Models/ApplicationDbContext.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

54 BÀI 3: - SCHOOL

Add - Migration AddAttendance

Update database

- File Controllers/AttendancesController.cs
API 2 Controller

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 55
- - AttendancesController

- Global.asax,

- File Controllers/AttendancesController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

56 BÀI 3: TH - SCHOOL

- https://www.getpostman.com/)

- -

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 57
-

- SEND khi t
vào CSDL

- Postman trên SEND

CSDL

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

58 BÀI 3: - SCHOOL

- File Controllers/AttendancesController.cs

- Build Postman

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 59

- File Views/Home/Index.cshtml

- DTOs
DTOs/AttendanceDto.cs (DTO: Data transfer object,

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

60 BÀI 3: - SCHOOL

- File Controllers/AttendancesController.cs

3.5.9 Use-case theo dõi Gi ng viên

- Models/Following.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 61
- File Models/ApplicationUser.cs

- File Models/ApplicationDbContext.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

62 BÀI 3: - SCHOOL

Add-migration AddFollowingsTable

Update-database

- File DTOs/FollowingDto.cs

- File Controllers/FollowingsController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 63
- File Views/Home/Index.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

64 BÀI 3: TH - SCHOOL

- ViewModels/CoursesViewModel.cs

- File Controllers/HomeController.cs

- File Views/Home/Index.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 65
-

3.5.10 Xem danh sách khóa h c

- File Controllers/CoursesController.cs

- trang
Views/Home/Index.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

66 BÀI 3: - SCHOOL

- File Views/Shared/_LoginPartial.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 67
Follow, Going

- File Controllers/CoursesController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

68 BÀI 3: - SCHOOL

- File Views/Courses/Mine.cshtml

My Upcomming Course.

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 69
3.5.11 Use-case Qu n lý Khóa h c (Xóa, c p nh t)
- File Views/Courses/Mine.cshtml

- File Content/Site.css, thêm CSS

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

70 BÀI 3: - SCHOOL

- File Controllers/CoursesController.cs

- File Views/Courses/Mine.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 71
-

- File ViewModels/CourseViewModel.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

72 BÀI 3: TH - SCHOOL

- File Controllers/CoursesController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 73
- File Views/Courses/Create.cshtml

- Views/Courses/CoursesForm.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

74 BÀI 3: - SCHOOL

- File Models/Course.cs

Add-migration AddIsCanceledColumnToCourse

Update-database

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 75

http://bootboxjs.com/
js

- File App_Start/BundleConfig.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

76 BÀI 3: - SCHOOL

- File Views/Courses/Mine.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 77
-

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

78 BÀI 3: - SCHOOL

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 79
Di chuy
phím ctrl + shift + r)

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

80 BÀI 3: TH - SCHOOL

3.5.12 Use-case thông báo (notification)

- Models/NotificationType.cs

- Models/Notification.cs

- Models/UserNotification.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 81

Add-

Update Database

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

82 BÀI 3: - SCHOOL

- Models/ApplicationDbContext.cs

Add- -force

Update Database

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 83

- Controllers/Api/CoursesController.cs

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

84 BÀI 3: - SCHOOL

- File Views/Home/Index.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 85
- File Controllers/AttendancesController.cs

3.5.13 Tách file javascript trong ng d ng

- File Views/Home/Index.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

86 BÀI 3: - SCHOOL

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 87
- File App_start/BundleConfig.cs

- File Views/Shared/__Layout.cshtml

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

88 BÀI 3: TH - SCHOOL

TÓM

, buttons, tables, navigation,

atabase first và code first,

-first, Entity

PI cho

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

BÀI 3: - SCHOOL 89

Câu 1: Bootstrap là gì? sao nên Bootstrap?

Câu 2: AJAX là gì và nó nào?

Câu 3: khác REST & RESTful?

Câu 4: Mô vai trò và k trúc ASP.NET Identity?

Downloaded by AstuteBrink5 ([email protected])

 lOMoARcPSD|20333215

90

TÀI
1. Pro ASP.NET MVC 5 (2013 ), ISBN-10: 1430265299, Apress; 5th ed. edition

2. ASP.NET MVC 5 - Building a Website with Visual Studio 2015 and C Sharp (2016),
ISBN-10: 1535167866, CreateSpace Independent Publishing Platform

3. ASP.NET MVC with Entity Framework and CSS (2016), ASIN: B01LYSLEMA,
Apress; 1st ed. edition

Downloaded by AstuteBrink5 ([email protected])