Báo cáo chuyên Đề học phần ngôn ngữ kịch bản Đề t i xây dựng website xem phim “beta cinema

- Mô tả hệ thống hiện tại Hoạt động website xem phim Beta Cinema có thể mô tả như sau: ● Trên giao diện trang chủ, phim được chia theo một số loại để ngườidùng dễ dàng chọn lựa theo các

-TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN NGÔN NGỮ KỊCH BẢN

Hà Nội, tháng 12 năm 2024

-MỤC LỤC

CHƯƠNG 1: NỘI DUNG 4

1 Tổng quan 4

1.1 Giới thiệu đề tài 4

1.1.2 Tổng quan về hệ thống mới 5

1.1.3 Các mục tiêu chính của hệ thống 5

1.2 Xác định yêu cầu khách hàng 6

1.2.2 Danh sách các yêu cầu trên trang quản trị 6

1.2.1 Danh sách các yêu cầu trên trang hiển thị 9

1.3 Phương pháp nghiên cứ và hướng giải quyết vấn đề 10

1.3.1 Công nghệ sử dụng 10

1.3.1.1 Ngôn ngữ lập trình 10

1.3.2 Phân tích thiết kế bài toán 10

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 12

2.1.Phân tích các chức năng 12

2.1.1.Phân tích yêu cầu 12

2.1.1.1.Xác định các tác nhân 12

2.1.1.2 Tổng quan về UML 13

2.1.1.3 Các ký hiệu: 16

USECASE 18

2.2.1 Biểu đồ usecase tổng quát 18

2.2.2 Biểu đồ use-case tìm kiếm 19

2.2.3.Biểu đồ use-case đăng nhập 19

2.2.4.Biểu đồ use-case quản lý phim 20

2.2.5.Biểu đồ use-case quản lý thành viên 21

2.3 Biểu đồ lớp 21

2.3.1 Xác định các lớp 21

2.3.2 Thể hiện biểu đồ lớp 22

2.4 Biều đồ tuần tự 23

-2.4.1 Biểu đồ tuần tự cho quá trình “ Đăng Nhập” 23

2.4.2 Biểu đồ tuần tự cho quá trình “ Tìm Kiếm” 23

2.4.3 Biểu đồ tuần tự cho quá trình “ Thêm Phim” 24

2.4.4 Biểu đồ tuần tự cho quá trình “ Sửa phim” 24

2.4.5 Biểu đồ tuần tự cho quá trình “ Xóa phim” 25

2.4.6 Biểu đồ tuần tự cho chức năng “Thêm User” 25

2.4.7 Biểu đồ tuần tự cho chức năng “Sửa User” 26

2.4.8 Biểu đồ tuần tự cho chức năng “Xóa User” 26

CHƯƠNG 3 THIẾT KẾ CƠ SỞ DỮ LIỆU 27

3.1 Các bảng dữ liệu 27

3.2 Biểu đồ cơ sở dữ liệu 28

CHƯƠNG 4: GIAO DIỆN WEBSITE 31

4.1 Giao điện Trang chủ 31

4.2 Giao diện trang Chi tiết Phim 32

4.3 Giao điện trang Đăng Nhập Người Dùng 33

4.4 Giao diện trang Rạp chiếu 33

4.5 Giao diện trang Bảng tin 34

4.6 Giao diện trang Đăng nhập 34

KẾT LUẬN 35

TÀI LIỆU THAM KHẢO 36

4

-CHƯƠNG 1: NỘI DUNG

1 Tổng quan

1.1 Giới thiệu đề tài

Hiện nay, nước ta đang trong quá trình công nghiệp hóa hiện đại hóa,cuộc sống con người ngày càng nâng cao.Chính vì vậy, nhu cầu về giải trícũng ngày càng cao với đại bộ phận người dân Với sự phát triển củaInternet, những Website xem phim ra đời nhằm đáp ứng nhu cầu ngày cànglớn về giải trí

Nhận thấy nhu cầu xem phim online ngày càng phổ biến, em xây dựngwebsits xem phim online để thỏa mãn nhu cầu xem phim, giải trí sau nhưnggiờ làm việc mệt mỏi

- Mô tả hệ thống hiện tại

Hoạt động website xem phim Beta Cinema có thể mô tả như sau:

● Trên giao diện trang chủ, phim được chia theo một số loại để ngườidùng dễ dàng chọn lựa theo các tiêu chí như phim mới cập nhật, phimnổi bật và phim nhiều lượt xem

● Người dùng có thể tìm kiếm trực tiếp bộ phim mong muốn ngay tạitrang chủ thông qua ô Search ở phía trên của Website

● Bộ phim bao gồm những thông tin: Tên phim, tác giả, năm sản xuất,ngày phát hành, điểm IMDb(IMDb chính viết tắt của cụm từlà

Internet Movie Database (Cơ ở dữ liệu điện ảnh trên Internet), đâyđược xem thư viện điện ảnh, nơi cung cấp những thông tin về bộlà

phim, diễn viên, đạo diễn và những chủ đề điện ảnh, truyền hình vàvideo game IMDb nổi bật hơn cả nơi để phê bình, xếp hạng phim.).là

● Khi khách hàng chọn một bộ phim trong website sẽ được chuyểnhướng vào view xem phim có các thông tin như trình chiếu phim, nộidung, lượt xem và các tính năng mở rộng khi người dùng đăng nhập.(Trong trạng thái đã đăng nhập)

-● Khi khách hàng chọn một bộ phim trong website sẽ được chuyểnhướng vào view xem phim có các thông tin như trình chiếu phim, nộidung, lượt xem ( Khi không trong trạng thái đăng nhập)

● Người dùng có thể bình luận qua Facebook tools để comment trực tiếptrên Website hoặc tương tác với Fanpage thông qua Live Chat củaFacebook để người quản trị nhanh chóng tiếp nhận được thông tin củangười dùng

1.1.2 Tổng quan về hệ thống mới

 Giao diện website thiết kế hợp lý, dễ nhìn và thân thiện với ngườidùng

 Có các tính năng mở rộng cho người dùng sử dụng một các dễ dàng

 Trang quản trị có những chức năng: quản lí phim, quản lí thànhviên,…

1.1.3 Các mục tiêu chính của hệ thống

- Yêu cầu về mặt giao diện:

- Giao diện trang web thân thiện, dễ sử dụng, phân chia trên các thểloại khác nhau

- Hiển thị định dạng cho các Browser phổ biến hiện nay như FireFox,Chrome, Brave…

- Tông màu chính trên Website là màu đen mang lại trải nghệm tốtcho người dùng, dễ dàng tuỳ biến được màu nền, màu chữ củaWebsite

- Thay đổi phim, banner,thể loại, một cách dễ dàng với tư cách củamột quản trị viên Web

- Giao diện có tuỳ biến cho các nên tảng như Window, IOS, Android

 Yêu cầu về mặt chức năng:

6

-+ Quản lí phim : Chức năng thêm, sửa, xoá các thông tin của bộ phim.+ Quản lý thể loại: Chức năng thêm, sửa, xoá các thông tin thể loại của

bộ phim

+ Chức năng tìm kiếm phim

- Chức năng tìm kiếm người dùng thông qua ô Search ở phía trêncùng của Website

- Chức năng tìm kiếm dữ liệu trong trang quản trị bằng JS

- Người quản trị có thể khoá tạm thời tài khoản của người dùng một

dễ dàng thông qua nút “Kích hoạt” ở ngoài danh sách

- Hiển thị danh sách tất cả các thể loại và phân trang để dễ quản lý.

- Người quản trị có thể tắt bật trạng thái hiển thị của thể loại một dễdàng thông qua nút “Kích hoạt” ở ngoài danh sách

- Cập nhật thông tin của thể loại , dễ dàng thao tác

4 Quản Lý Quảng Cáo

• Hiển thị

- Hiển thị danh sách tất cả các quảng cáo và phân trang để dễ quảnlý

- Người quản trị có thể tắt bật trạng thái hiển thị của quảng cáo một

dễ dàng thông qua nút “Kích hoạt” ở ngoài danh sách

- Hiển thị danh sách tất cả các Slide và phân trang để dễ quản lý

- Người quản trị có thể tắt bật trạng thái hiển thị của Slide một dễdàng thông qua nút “Kích hoạt” ở ngoài danh sách

- Hiển thị danh sách tất cả liên hệ và phân trang để dễ quản lý.

- Người quản trị có thể tắt bật trạng thái hiển thị của liên hệ một dễdàng thông qua nút “Kích hoạt” ở ngoài danh sách

- Hiển thị danh sách tất cả các tin tức và phân trang để dễ quản lý

- Người quản trị có thể tắt bật trạng thái hiển thị của tin tức một dễdàng thông qua nút “Kích hoạt” ở ngoài danh sách

Hệ thống Website Xem Phim Online OneMovies

1 Phải xác định rõ dữ liệu đầu vào, đầu ra, và quy trình xử lý

2 Với mỗi yêu cầu phức tạp, quy trình xử lý cần được minh hoạ bằnglưu đồ giải thuật.

3 Hệ thống phải được lập trình trên nền tảng Visual Studio vàSQLserver

4 Ngôn ngữ lập trình NodeJS, ReactJS

1.2.1 Danh sách các yêu cầu trên trang hiển thị

1 Đăng ký

• Cho phép người dùng đăng ký tài khoản mới để trở thành thành viên

• Thông tin đăng ký bao gồm: Họ và Tên, UserName, PassWord, ĐịaChỉ, Số điện thoại, Email(Email là bắt buộc nhập)

• Người dùng sẽ phải xác nhận mã captcha khi đăng kí để tránhspammer hay Ddos Website

• Khi người dùng nhập đầy đủ thông tin hợp lệ, nhập chính xác mãcaptcha và ấn đăng ký Hệ thống sẽ trả ra những thông báo cho ngườidùng như : Tên người dùng đã tồn tại, mật khẩu phải 6 ký tự trở lên,Email đã được sử dụng, mã captcha không chính xác, Yêu cầu ngườidùng nhập lại thông tin

• Phim được chia theo từng tiêu chí như :

• phim mới: Dựa theo ngày được thêm

• phim nổi bật: ( Được xếp theo điểm Rate IMDb, giảm dần vàtheongày được thêm

• phim phổ biến: Được xếp theo lượt xem, giảm dần và theo ngày thêm

5 Chức năng tìm kiếm phim

• Người dùng có thể tìm kiếm các bộ phim bằng tên bộ phim, thể loạiphim

• Kết quả tìm kiếm sẽ được hiển thị sang trang tìm kiếm cho người dùng

dễ thao tác Trả ra một thông báo khi không tìm thấy phim của ngườidùng

1.3 Phương pháp nghiên cứ và hướng giải quyết vấn đề

1.3.1 Công nghệ sử dụng

1.3.1.1 Ngôn ngữ lập trình

Có rất nhiều công nghệ có thể được sử dụng để xây dựng hệ thống phầnmềm.Trong khóa luận này để cài đặt chương trình chúng em đã sử dụng ngônngữ lập trình C# và mô hình MVC

Công nghệ sử dụng

Visual Studio Code (VS Code): VS Code là một môi trường phát triển

tích hợp nhs (IDE), miễn phí và mã nguồn mở do Microsoft phát triển Đây làmột công cụ rất phổ biến cho lập trình viên nhờ tính linh hoạt, hiệu năng cao, vàkhả năng tùy chỉnh mạnh mẽ

MySQL Workbench

MySQL Workbench là một công cụ quản lý cơ sở dữ liệu đồ họa (GUI)

dành riêng cho MySQL, được phát triển bởi Oracle Nó hỗ trợ quản trị viên cơ

sở dữ liệu và nhà phát triển thiết kế, triển khai, quản lý, và tối ưu hóa cơ sở dữliệu một cách trực quan

1.3.2 Phân tích thiết kế bài toán

Có nhiều cách để giải quyết vấn đề.Nhưng ở đây, chúng em chọn phân thiết kế hệ thống bằng ngôn ngữ UML – Unified Modeling Language để giảiquyết vấn đề đặt ra Gồm các bước sau:

tích Mô hình hóa nghiệp vụ:

Dựa trên quá trình khảo sát thực trạng, chúng em sử dụng công cụ VisualParadigm thiết kế UML để mô hình hóa chức năng

Thực hiện cài đặt các kết quả đã thiết kế trên Visual Studio Code 2022 và

hệ quản trị cơ sở dữ liệu MySQL 8.0

- Thử nghiệm

Chạy chương trình nhiều lần trên hệ điều hành Windows 11

Test lỗi và hoàn thiện các chức năng của hệ thống

CHƯƠNG 2 PHÂN TÍCH V THIẾT KẾ HỆ THỐNG

truy xuất những chức năng của hệ thống cónhiệm vụ bảo trì hệ thống: đăng nhập đổi mậtkhẩu; thay đổi thông tin cá nhân, quản lý nhómngười dùng; quản lý người dùng, sao, lưu phụchồi dữ liệu; quản lý phim, bài viết đánh giá vềchi tiết phim, liên kết nguồn phim; quản lýquảng cáo; thống kê truy cập , thống kê lượtxem phim trong tháng.Họ có thể phân quyền

6 Người dùng Xem trailer, phim.

 UML được duy trì và phát triển bởi OMG (Object Management Group),

do Jacobson, Booch, Rumbaugh sáng lập Ngoài ra còn có hàng trăm cáctập đoàn lớn khác bảo trợ phát triển

 Các biểu đồ UML cho ta cái nhìn rõ hơn về hệ thống (cái nhìn tĩnh vàđộng)

 Hiện nay UML được sử dụng rất phổ biến trong các dự án phần mềm

 UML thể hiện phương pháp phân tích hướng đối tượng nên không lệthuộc ngôn ngữ lập trình

 Có rất nhiều công cụ phần mềm hỗ trợ phân tích thiết kế dùng UML

 Nhiều công cụ có thể sinh ra mã từ UML và ngược lại

 UML không phải là ngôn ngữ lập trình

 UML là một ngôn ngữ dùng để:

- Trực quan hóa (Visualizing):

+ Dùng tập các ký hiệu đồ họa phong phú để biểu diễn hệ thốngđang được nghiên cứu

+ Hệ thống ký hiệu đều có ngữ nghĩa chặt chẽ, có thể hiểu bởi nhiềucông cụ khác nhau

+ Giúp cho các nhà thiết kế, nhà lập trình khác biệt về ngôn ngữ đều

có thể hiểu được

- Đặc tả (Specifying):

+ UML giúp xây dựng các mô hình chính xác, đầy đủ và không nhậpnhằng

+ Tất cả các công đoạn từ phân tích, thiết kế cho đến triển khai đều

có các biểu đồ UML biểu diễn

+ Use case (dùng cho phân tích); Class, Sequence, Activity (chothiết kế); Component, Deployment (cho triển khai)

- Xây dựng (Constructing):

+ Các mô hình của UML có thể kết nối với nhiều ngôn ngữ lập trình.Tức là có thể ánh xạ các mô hình UML về một ngôn ngữ lập trình như C++, Java

+ Việc chuyển các mô hình trong UML thành Code trong ngôn ngữlập trình Forward engineering

+ Việc chuyển ngược trở lại code trong một ngôn ngữ lập trình thànhUML Reverse Engineering.

+ Cần công cụ để chuyển đổi “xuôi” & “ngược”

- Viết tài liệu (Documenting):

+ Giúp xây dựng tài liệu đặc tả - requirements

+ Tài liệu kiến trúc (architecture)

+ Tài liệu thiết kế

+ Source code

+ Tài liệu để kiểm thử - Test

+ Tài liệu mẫu - Prototype

+ Tài liệu triển khai – Deployment

 Một số biểu đồ UML cơ bản

- Use case (Use Case Diagram) cung cấp một bức tranh toàn cảnh về những

gì đang xảy ra trong hệ thống hiện tại hoặc những gì sẽ xảy ra trong hệthống mới

- Use case mô tả một chuỗi các hành động mà hệ thống sẽ thực hiện để đạtđược kết quả có ý nghĩa đối với một tác nhân.

- Các use case được tạo ra ở giai đoạn đầu của một dự án Các use casecũng có thể được dung ở giai đoạn sau của qui trình phát triển dự án, ví dụ

để đặc tả các tình huống kiểm tra Use case đưa ra cơ sở để xác định giaotiếp người-máy đối với hệ thống Để người dùng cuối có thể hiểu được và

có thể giao tiếp với hệ thống ở mức tổng thể

- Actor là người hoặc hệ thống tương tác với các use case Thường actor làngười dùng hệ thống Trong biểu đồ use case, mỗi actor được vẽ bằng mộtbiểu tượng hình người với tên vai trò (role name) đặt bên dưới

- Khi actor là người thì tên actor là tên vai trò mà actor đảm nhiệm chứkhông phải là tên công việc

- Biểu đồ lớp Class Diagram

- Biểu đồ lớp (Class Diagram) cho ta một khung nhìn tĩnh của các lớp trong

mô hình hoặc một phần của mô hình Nó chỉ cho ta thấy các thuộc tính vàcác thao tác của lớp, cũng như các loại quan hệ giữa các lớp

- Có rất nhiều kiểu lớp dùng trong biểu đồ lớp, ở đây chúng ta chỉ xét đến

và sử dụng 3 loại lớp chính là : lớp biên (phần giao diện), lớp điều khiển

- Biểu đồ tuần tựSequence Diagram

Biểu đồ tuần tự (Sequence Diagram) mô tả sự tương tác của các đối tượngtheo trình tự về thời gian.Có sự liên kết chặt chẽ với biểu đồ lớp và mô tả thứ tự

của tương tác bằng cách đánh số thứ tự các thông điệp Mỗi biểu đồ tuần tự mô

tả một tình huống xử lý

2.1.1.3 Các ký hiệu:

Biểu diễn các Actor (tác nhân)biểu diễn người hay hệ thống kháctương tác với hệ thống hiện tại

Biểu diễn các Use Case (tìnhhuống sử dụng) biểu diễn chuỗi hànhđộng mà hệ thống thực hiện

Biểu diễn mối quan hệ giữa Actor(người dùng) và UseCase (chức năngcủa hệ thống)

Quan hệ <<Include>> thể hiện UseCase này chứa Use Case khác

Use case A được gọi là Include Bnếu trong xử lý của A có gọi đến B ítnhất 1 lần

Quan hệ <<Extend>> thể hiện UserCase này mở rộng Use Case khác.Use case B được gọi là Exntend Anếu use case B được gọi bởi A nếu thỏamãn điều kiện nào đó.

Quan hệ tổng quát hóa (thừa kế):

Use case A được gọi làGeneralization Use Case B nếu UseCase B là một trường hợp riêng của UseCase A

Quan hệ Composition:

Thể hiện rằng một lớp A bao hàmlớp B Nhưng lớp B không thể tồn tạiđộc lập (tức không thuộc lớp nào) Tức

là, nếu có B thì phải suy ra được A

Biểu đồ use-case tổng quát

2.2.2 Biểu đồ use-case tìm kiếm

Biểu đồ use-case tìm kiếm

Mô tả:

Khi người dùng muốn sử dụng chức năng tìm kiếm thì phải nhập thông tincần tìm kiếm vào ô tìm kiếm, hệ thống sẽ kiểm tra thông tin mà người dùngnhập vào.Nếu thông tin khách hàng nhập vào tồn tại thì hệ thống sẽ hiển thị rakết quả còn nếu không tồn tại thị hệ thống sẽ không hiển thị ra kết quả và trả ramột thông báo “Không tìm thấy bộ phim với từ khoá…”

2.2.3.Biểu đồ use-case đăng nhập

Biểu đồ use-case đăng nhập

Mô tả:

• Khi người quản trị truy cập vào trang quản trị thì phải nhập tài khoản và mật khẩu để có thể tiếp tục truy cập Nếu admin

nhập đúng tài khoản thì hệ thống sẽ trả ra thông báo đăng nhập thành công.

• Người dùng đăng nhập phải nhập chính xác những thông tin đăng nhập Nếu không chính xác, hệ thống sẽ thông báo lỗi cho người dùng và yêu cầu nhập lại thông tin

2.2.4.Biểu đồ use-case quản lý phim

Biểu đồ use-case quản lí phim

Mô tả:

• Khi người quản trị đã đăng nhập vào hệ thống và muốn thay đổi thông tin các bộ phim trên Website thì cần truy cập vào Quant lí phim, ở đây cócác chức năng thêm, sửa, xóa phim

• Các quản lý như thể loại, quảng cáo, liên hệ đều dựa theo biểu đồ case của quản lý phim