(TIỂU LUẬN) PHÁT TRIỂN PHẦN mềm ỨNG DỤNG đề tài xây DỰNG ỨNG DỤNG WEB tạo và QUẢN lý LANDINGPAGE

Do đó việckinh doanh online càng trở nên khắc nghiệt đòi hỏi người kinh doanh phải có một hệ thống đủtốt để vừa kiếm được lợi nhuận vừa có thể phát triển thương hiệu Nhận thức được nhu c

Sinh viên thực hiện:

Giảng viên hướng dẫn:

DƯƠNG QUANG HUY AT150323

VŨ NHƯ QUANG AT150344 NGUYỄN VIỆT HOÀNG AT150319 Nhóm 27

ThS BÙI THỊ NHƯ

Hà Nội, 12-2021

LỜI NÓI ĐẦU

Ngày nay, với sự xuất của mạng xã hội đã kéo theo sự hình thành của phương phápkinh doanh online Khi lượng người dùng mạng xã hội tăng thì hình thức kinh doanh này càngphát triển và số lượng người tham gia kinh doanh online cũng ngày càng đông Do đó việckinh doanh online càng trở nên khắc nghiệt đòi hỏi người kinh doanh phải có một hệ thống đủtốt để vừa kiếm được lợi nhuận vừa có thể phát triển thương hiệu

Nhận thức được nhu cầu xây dựng mô hình kinh doanh và phát triển thương hiệu này,nhóm em đã phát triển sản phẩm ladibook giúp cho những người muốn tạo, sử dụng landingpage trong giai đoạn thu hút và lọc khách hàng của hệ thống kinh doanh giúp chủ doanhnghiệp có thể chọn đúng tập khách hàng mục tiêu để chăm sóc từ đó gia tăng hiệu quả kinhdoanh cũng như thương hiệu

Trong đề tài này, chúng em đã tạo được một ứng dụng web cho người dùng có thểchọn và tự do tuỳ chỉnh các mẫu landing page có sẵn và đem đi thu hút khách hàng Mỗi lầnkhách hàng truy cập đường link landingpage hoặc quan tâm đến sản phẩm thì hệ thống sẽ ghinhận thông tin khách hàng rồi thống kê lại các yêu cầu cho chủ doanh nghiệp Khi đã có mộtlượng khách quan tâm thì chủ doanh nghiệp( hoặc nhân viên được phân quyền) có thể pháthành các chiến dịch chăm sóc, khuyến mãi,… thông qua gmail

Nội dung trong báo cáo này được chia làm 03 phần như sau:

Chương 1: Tổng quan về đề tài Chương này sẽ giới thiệu công nghệ được ứng dụng

và phát triển đề tài của chúng em Cách mà bọn em kết nối các công nghệ lại với nhau thànhsản phầm

Chương 2: Phân tích hệ thống, các use case, các luồng chính trong đề tài, các trang

giao diện và cấu trúc lưu trữ

Chương 3: Trình bày về quá trình thực nghiệm và đánh giá các kết quả thu được trong

thực nghiệm Từ đó tìm ra hướng phát triển trong tương lai

LỜI CAM ĐOAN

Tôi là Dương Quang Huy, mã số sinh viên AT150323, sinh viên lớp AT15C, khóaAT15 Người hướng dẫn là ThS Bùi Thị Như Tôi xin thay mặt, cam đoan toàn bộ nội dungđược trình bày trong đồ án Xây dựng ứng dụng tổng hợp và tóm tắt tin tức là kết quả quá trìnhtìm hiểu và nghiên cứu của chúng tôi Các dữ liệu được nêu trong đồ án là hoàn toàn trungthực, phản ánh đúng kết quả đo đạc thực tế Mọi thông tin trích dẫn đều tuân thủ các quy định

về sở hữu trí tuệ; các tài liệu tham khảo được liệt kê rõ ràng Tôi xin chịu hoàn toàn tráchnhiệm với những nội dung được viết trong báo cáo này

Hà Nội, ngày 31 tháng 12 năm 2021

Người cam đoan

Dương Quang Huy

MỤC LỤC

DANH MỤC HÌNH VẼ i

DANH MỤC BẢNG BIỂU ii

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1

1.1 Tổng quan về ngôn ngữ và các công cụ hỗ trợ 1

1.1.1 Tổng quan về backend trong dự án: java và spring data jpa 1

1.1.2 Tổng quan về frontend trong dự án: html, css, bootstrap, javascript 1

1.1.3 Các công cụ hỗ trợ 2

1.1.4 Lưu trữ dữ liệu 2

1.2 Quy trình chuyển từ landingpage mẫu sang landingpage có thể tuỳ biến 2

1.3 Quy trình xuất bản landingpage 3

CHƯƠNG 2 THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG 3

2.1 Phân tích hệ thống 3

2.1.1 Biểu đồ phân rã chức năng 3

2.1.2 Biểu đồ Use Case tổng quát 4

2.1.3 Xác định actor và chức năng 5

2.1.4 Biểu đồ Use case chi tiết 5

2.1.5 Đặc tả các ca sử dụng 8

2.2 Cấu trúc ứng dụng thử nghiệm 15

2.2.1 Trang đăng nhập 15

2.2.2 Trang dashboard 15

2.2.3 Trang các landingpage mẫu 16

2.2.4 Trang các yêu cầu 16

2.2.5 Trang chi tiết yêu cầu 17

2.2.6 Trang chỉnh sửa vai trò 17

2.2.7 Trang chỉnh sửa landingpage 18

2.3 Thiết kế hệ thống lưu và tuỳ chỉnh landingpage 18

2.3.1 Chuẩn hoá landingpage 18

2.3.2 Tách style, javascript 19

2.3.3 Sử dụng kỹ thuật chuyển từ thành vector số thực 19

2.3.4 Lưu metadata vào database, nội dung landingpage vào disk 19

2.4 Hệ thống lưu trữ 19

2.4.1 Bảng customer 20

2.4.2 Bảng landingpage 20

2.4.3 Bảng order_customer 21

2.4.4 Bảng orders 21

2.4.5 Bảng permission 22

2.4.6 Bảng role 22

2.4.7 Bảng role_permission 22

2.4.8 Bảng template 23

2.4.9 Bảng user 23

Chương 3: KẾT QUẢ THỰC NGHIỆM 23

3.1 Kết quả chạy hệ thống giao diện người dùng 24

3.2 Kết quả chạy hệ thống tạo và quản lý landingpage 24

3.2.1 Hệ thống tạo landingpage 24

3.2.2 Hệ thống quản lý landingpage 24

KẾT LUẬN 25

Kết luận chung 25

Hướng phát triển 25

PHÂN CÔNG CÔNG VIỆC 26

DANH MỤC HÌNH VẼ

Hình 1 Biểu đồ phân rã chức năng 3

Hình 2 Biểu đồ Use Case tổng quát 4

Hình 3 Biểu đồ UC Customer 5

Hình 4 Biểu đồ UC Xuất bản landingpage 6

Hình 5 Biểu đồ UC quản lý tin tức 6

Hình 6 Biểu đồ UC quản lý yêu cầu 7

Hình 7 Biểu đồ UC quản lý nhân viên 7

Hình 8 Trang đăng nhập 15

Hình 9 Trang dashboard 15

Hình 10 Trang landingpage mẫu 16

Hình 11 Trang các yêu cầu 16

Hình 12 Trang chi tiết yêu cầu 17

Hình 13 Trang chỉnh sửa vai trò 17

Hình 14 Trang chỉnh sửa vai trò 18

Hình 15 Luồng lưu và tuỳ chỉnh landindingpage 18

Hình 16 Cấu trúc dữ liệu 19

Hình 17 Cấu trúc bảng customer 20

Hình 18 Cấu trúc bảng landingpage 20

Hình 19 Cấu trúc bảng order_customer 21

Hình 20 Cấu trúc bảng orders 21

Hình 21 Cấu trúc bảng permission 22

Hình 22 Cấu trúc của bảng role 22

Hình 23 Cấu trúc của bảng role_permission 22

Hình 24 Cấu trúc của bảng template 23

Hình 25 Cấu trúc của bảng user 23

i

DANH MỤC BẢNG BIỂU

Bảng 1 Chức năng các actor 5

Bảng 2 Use Case đăng ký 8

Bảng 3 Use Case đăng nhập 8

Bảng 4 Use Case quên mật khẩu 9

Bảng 5 Use Case đăng xuất 9

Bảng 6 Use Case thay đổi thông tin cá nhân 10

Bảng 7 Use Case tạo landingpage 10

Bảng 8 Use Case quản lý landingpage 11

Bảng 9 Use Case xoá landingpage 11

Bảng 10 Use Case xem các yêu cầu từ landingpage 11

Bảng 11 Use Case quản lý yêu cầu 12

Bảng 12 Use Case xem chi tiết một yêu cầu 12

Bảng 13 Use Case xoá landingpage 12

Bảng 14 Use Case chỉ định nhân viên xử lý yêu cầu 13

Bảng 15 Use Case quản lý nhân viên 13

Bảng 16 Use Case sửa thông tin nhân viên 13

Bảng 17 Use Case chỉnh sửa vai trò nhân viên 14

Bảng 18 Use Case tạo vai trò 14

ii

TÓM TẮT ĐỒ ÁN

Nhu cầu tạo landingpage hiện nay tương đối lớn và cũng có nhiều công ty tạo ra cácgiải pháp cho nhu cầu này Tuy nhiên hầu hết các giải pháp chỉ là dùng lập trình viên gia cônglandingpage và thu phí hoặc cho người dùng chọn mẫu có sẵn và gia công cho phù hợp nhucầu người dùng Điều này tương đối tốn nguồn lực của công ty gia công landingpage khiến

mô hình kinh doanh không mở rộng nhanh được mà người dùng cũng chưa chắc đã truyền đạthết ý tưởng của mình cho người gia công Vấn đề đặt ra là làm thế nào để có thể tăng tính tuỳbiến landingpage cho người dùng vừa có thể tập chung lại nguồn lực vào các công việc nângcấp hệ thống và mở rộng mô hình kinh doanh

Để giải quyết vấn đề này, nhóm chúng em nảy ra ý tưởng là tạo ra một trang web cóthể tuỳ ý chỉnh sửa các mẫu landingpage có sẵn từ hình ảnh, layout, tiêu đề, nội dung,…Saukhi sửa xong thì người dùng có thể xuất bản luôn landingpage của mình Về phía người dùngđiều này giúp cho người dùng không cần biết công nghệ cũng có thể chỉnh sửa landingpagetheo ý muốn, còn về phía công ty gia công landingpage thì có thể thu nhân lực về các côngviệc khác để nâng cấp hệ thống và trải nghiệm dịch vụ Trong quá trình xây dựng hệ thống,chúng em cũng có xây dựng các tính năng quản lý cơ bản của nghiệp vụ quản lý yêu cầu

Đồ án phát triển theo ba bước được nêu ra trong quyển đồ án này lần lượt là các bước:Đánh giá - Phân tích hệ thống, Thiết kế và tinh chỉnh các thành phần của hệ thống và cuốidùng là việc Xây dựng và đánh giá hệ thống Các công nghệ, phương pháp xử lý ở môi trường

xử lý của hệ thống cũng được nêu rõ trong quyển đồ án ở các phần sau

Đồ án này phần nào củng cố các kiến thức đã được học về việc thiết kế và xây dựngmột ứng dụng Bên cạnh đó, phát triển thêm các kĩ năng tự tìm hiểu, học hỏi thêm các kiếnthức mới từ những công việc thực tế khi có thể tạo ra một hệ thống hoàn chỉnh, có thể áp dụngvào thực tế và có tính ứng dụng cao khi có thể sử dụng ứng dụng cập nhật tin tức hàng ngàynhanh chóng và hiệu quả hơn

iii

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

Chương 1 miêu tả tổng quan nhất về các ngôn ngữ, công cụ hỗ trợ, nêu ra các quy trìnhxây dựng lên hệ thống Cùng với đó là vấn đề chính của đồ án này, đó là quy trình chuyển từmột landingpage mẫu sang landingpage có thể tuỳ biến theo ý người dùng, lưu landingpagekết quả và quản lý các yêu cầu đến landinpage

1.1 Tổng quan về ngôn ngữ và các công cụ hỗ trợ

1.1.1 Tổng quan về backend trong dự án: java và spring data jpa

Java là ngôn ngữ lập trình bậc cao, được phát triển bởi Sun Microsystems, do James

Gosling khởi xướng và phát hành vào năm 1995 như là một thành phần cốt lõi của nền tảngJava của Sun Microsystems (Java 1.0 [J2SE]) Java chạy trên rất nhiều nền tảng khác nhau,như Windows, Mac và các phiên bản khác nhau của UNIX

Phiên bản mới nhất của Java Standard Edition là Java SE 8 Với sự tiến bộ của Java và sựphổ biến rộng rãi của nó, nhiều cấu hình đã được xây dựng để phù hợp với những loại nền tảngkhác nhau Ví dụ: J2EE cho các ứng dụng doanh nghiệp, J2ME cho các ứng dụng di động

Spring Data jpa là một module của Spring Framework Mục đích của Spring Data JPA là

giảm thiểu việc thực hiện quá nhiều bước để có thể implement được JPA Spring Data JPA là mộtphần của Spirng Data và nó hỗ trợ Hibernate 5, OpenJPA 2.4 và EclipseLink 2.6.1

Trong tương lai có thể chúng em sẽ tiếp tục backend của dự án tiến tới mô hìnhmicroservice để có thể sử dụng ngôn ngữ phù hợp với từng nghiệp vụ Ví dụ như dùngrabbitmq hoặc kafa để quản lý queue gửi mail, dùng redis để đếm số lượng truy cậplandingpage để giảm tải cho database, dùng docker để đóng gói sản phẩm,…

1.1.2 Tổng quan về frontend trong dự án: html, css, bootstrap, javascript

html là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh

dấu siêu văn bản) html được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặcứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và html không phải là ngônngữ lập trình

css là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để

tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (html) Nói ngắn gọnhơn là ngôn ngữ tạo phong cách cho trang web Bạn có thể hiểu đơn giản rằng, nếu html đóngvai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,

…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử html đó như đổi bố cục, màu sắctrang, đổi màu chữ, font chữ, thay đổi cấu trúc…

JavaScript là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên

mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máychủ (với Nodejs) Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape

1

với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript.Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java .js là phần mởrộng thường được dùng cho tập tin mã nguồn JavaScript Phiên bản mới nhất của JavaScript

là ECMAScript 12[3] ECMAScript là phiên bản chuẩn hóa của JavaScript Trình duyệtMozilla phiên bản 1.8 beta 1 có hỗ trợ không đầy đủ cho E4X - phần mở rộng cho JavaScript

hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357

1.1.3 Các công cụ hỗ trợ

Trình hỗ trợ soạn thảo mã nguồn: Cho phép mọi người lập trình và chạy các mã

nguồn Visual Studio Code là một trong số đó Với những extention có thể tích hợp dễ dàng,giúp cho việc lập trình và thực thi mã nguồn tiện lợi, hiệu quả Đó là công cụ mạnh mẽ màchúng em sẽ sử dụng xuyên suốt khi phát triển frontend của đề tài Còn về backend chúng em

sử dụng eclipse để lập trình java

Version Control System: là hệ thống kiểm soát các phiên bản phân tán mã nguồn mở.

Các VCS sẽ lưu trữ tất cả các file trong toàn bộ dự án và ghi lại toàn bộ lịch sử thay đổi củafile Mỗi sự thay đổi được lưu lại sẽ được và thành một version Chúng em sử dụng Git để làmcông cụ quản lý vesion và làm việc nhóm

1.1.4 Lưu trữ dữ liệu

Hệ thống sử dụng lưu trữ dạng dữ liệu quan hệ Sử dụng phần mềm MySQL để quản

lý và truy vấn các thông tin trong hệ thống Phần mềm này thông dụng và dễ dàng sử dụng,triển khai cũng như là bảo trì và vận hành Với khối lượng thông tin không quá lớn, dữ liệuđơn giản, độ phức tạp dữ liệu cũng thấp, nên nhóm quyết định sử dụng MySQL để quản lý cơ

sở dữ liệu của hệ thống

1.2 Quy trình chuyển từ landingpage mẫu sang landingpage có thể tuỳ biến

− Tiền xử lý landingpage: Landingpage mẫu có rất nhiều nhưng đa phần là có

cấu trúc chưa đủ gọn, hiện tượng thừa thiếu style, script, các thẻ html chưa hợp bố cùng thườngthấy thường xuyên cho nên cần phải có bước tiền xử lý để chuẩn hoá các landingpage này nhằmmục đích tránh các style lạ khi chỉnh sửa landingpage không như ý muốn cũng như sẵn sàng hơnkhi khách hàng có nhu cầu khó và cần đến nhân viên trợ giúp

− Tách style và javascrip của landingpage: Ở bước này, sẽ tách các thẻ style

và script riêng để tránh việc style, script bị xung đột với trình chỉnh sửa landingpage

− Truyền tải landingpage đã chuẩn hoá cùng trình chỉnh sửa: Khi người

dùng có yêu cầu chỉnh sửa landingpage thì backend sẽ trả ra một file html kèm với thư việngrapejs đã được cài đặt theo mẫu sẵn, sau khi html và thư viện được tải xong thì sẽ tiếp tục yêucầu lấy style và script của landingpage mẫu Sau quá trình này thì người dùng đã có thể nhìn vàchỉnh sửa được landingpage mẫu và còn có thể chỉnh sửa trực tiếp được luôn

2

1.3 Quy trình xuất bản landingpage

− Lưu nội dung landingpage sau khi tuỳ chỉnh: Sau khi người dùng chọn được

landingpage mẫu và tuỳ chỉnh xong và ấn xuất bản thì frontend sẽ gửi nội dung người dùng tuỳ chỉnhrồi ghép với style, script gốc và lưu vào disk( Sau này có thể cài đặt thêm giao thức nfs để chia sẻ kếtquả giữa các server để mở rộng hệ thống) và lưu các metadata vào mysql

− Truyền tải landingpage sau khi tuỳ chỉnh: Khi xuất bản xong thì người dùng

đã có một đường dẫn để chia sẻ landingpage, khi có yêu cầu vào đường dẫn này thì backend tựđộng truy xuất vào mysql và disk và landingpage cho người dùng

− Nhận yêu cầu từ landingpage: Khi người ấn nút gửi yêu cầu trên giao diện

thì backend tự động lưu lại yêu cầu và thông báo cho chủ doanh nghiệp

CHƯƠNG 2 THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG

Chương 2 sẽ khái quát quá trình của nhóm đã làm trên thực tế, bao gồm các công việcphân tích, thiết kế và xây dựng hệ thống Đây là chương mang trọng tâm lớn với quy trìnhphát triển ứng dụng đã được học từ các môn trước Cùng với đó, ở trong chương này, cáchhoạt động và xử lý văn bản của hệ thống thu thập và tóm tắt thông tin cũng được nêu rõ, kèmvới các hình ảnh hoạt động thực tế của hệ thống

2.1 Phân tích hệ thống

2.1.1 Biểu đồ phân rã chức năng

Hệ thống tạo & quản lý landingpage

Tạo landingpage

Quản lý landingpage

Tạo từ

Xuất bản

Xoá & Sửa nội

Xem trước Cho phép mọi

Xoá & Sửa nội

Xử lý, thông báo landingpage dung trước dung sau xuất

landingpage landingpage người truy cập yêu cầu, thống kê mẫu xuất bản bản

Hình 1 Biểu đồ phân rã chức năng

3

Ở biểu đồ trên, hệ thống được chia ra làm 2 phân vùng, gồm tạo landingpage và quản

lú landingpage Với 2 phân vùng như trên, nó tương ứng với chức năng được nêu ra ở mỗi phần.Với phần vùng tạo landingpage, người dùng ở đây là những chủ doanh nghiệp có thể tạo, xemtrước, xuất bản landingpage Các landingpage được lưu vào disk và metadata vào database Ởphân vùng quản lý landingpage, các landingpage ở đây là các landingpage đã được xuất bản chomọi người có thể truy cập, hệ thống có thể thống kê số lần truy cập, số lần yêu cầu, tỷ lệ yêu cầu/truy cập, phân quyền cho nhân viên xử lý yêu cầu, phân quyền nhân viên với các tính năng hệthống, gửi mail, xem thông tin khách hàng,…

2.1.2 Biểu đồ Use Case tổng quát

Hình 2 Biểu đồ Use Case tổng quát

Với hệ thống ứng dụng được xây dựng, người dùng được chia làm 3 dạng với các UseCase tổng quát khác nhau gồm có: Chủ doanh nghiệp, nhân viên và khách hàng Với chủ doanhnghiệp thì sẽ có quyền admin và có thể thực thi tất cả các quyền hạn Với nhân viên thì mặc định

sẽ có role employee các quyền hạn sẽ có thể được chỉnh sửa bảo chủ doanh nghiệp Với kháchhàng thì có thể xem và tạo yêu cầu đến doanh nghiệp thông qua landingpage đã xuất bản

4

2.1.3 Xác định actor và chức năng

nhân

hệ thống.

của ứng dụng

quyền của admin

2.1.4.2 Biểu đồ UC xuất bản landingpage

Hình 4 Biểu đồ UC Xuất bản landingpage

Với người dùng là Admin( hoặc employee được phân quyền) có thể chọn landingpage mẫu, xuất bản, chỉnh sửa, xem trước xuất bản của mình

2.1.4.3 Biểu đồ UC quản lý landingpage

Hình 5 Biểu đồ UC quản lý tin tức

Với người dùng là Admin( hoặc employee được phân quyền) có thể chỉnh sửa

landingpage sau xuất bản, xoá landingpage, xem các yêu cầu tương ứng với landingpage…

6

2.1.4.4 Biểu đồ UC quản lý yêu cầu

Hình 6 Biểu đồ UC quản lý yêu cầu

Với người dùng là Admin( hoặc employee được phân quyền) có thể tương tác với khác hàng qua hình thức gửi mail, xem chi tiết yêu cầu, cập nhật trạng thái yêu cầu…

2.1.4.5 Biểu đồ UC quản lý Employee

Hình 7 Biểu đồ UC quản lý nhân viên

Với người dùng là Admin có thể tạo, chỉnh sửa, phân quyền lại cho nhân viên

7