Khóa luận tốt nghiệp Truyền thông và mạng máy tính: Xây dựng hệ thống thư viện giao diện cho ứng dụng web

Thêm vào đó, để hỗ trợ người dùng sử dụng thư viện một cách dễ dàng hơn, hệ thống còn cócác chức năng khác như: thể hiện trực quan các giao diện đã lưu trên desktop vàmobile, hỗ trợ tạo

ĐẠI HỌC QUOC GIA TP HO CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA MẠNG MAY TÍNH VÀ TRUYEN THONG

DANG KHIET NGHI

KHOA LUAN TOT NGHIEPXAY DUNG HE THONG THU VIEN GIAO DIEN CHO UNG DUNG WEB

Build A Website Application Interface Library System

KY SU NGANH TRUYEN THONG VA MANG MAY TINH

TP HO CHi MINH, 2021

ĐẠI HỌC QUOC GIA TP HO CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA MẠNG MAY TÍNH VÀ TRUYEN THONG

DANG KHIET NGHI - 17520114

KHÓA LUẬN TÓT NGHIỆPXÂY DỰNG HỆ THÓNG THƯ VIỆN GIAO DIỆN CHO ỨNG DỤNG WEB

Build A Website Application Interface Library System

KY SƯ NGANH TRUYEN THONG VA MẠNG MAY TÍNH

GIANG VIEN HUONG DAN

ThS TRAN TUAN DUNG

TP HO CHi MINH, 2021

THÔNG TIN HỘI ĐÒNG CHÁM KHÓA LUẬN TÓT NGHIỆP

Hội đồng cham khóa luận tốt nghiệp, thành lập theo Quyết định số

ngày của Hiệu trưởng Trường Đại học Công nghệ Thông tin.

LỜI CẢM ƠN

Dé hoàn thành khóa luận tốt nghiệp này, chúng em xin gửi lời cảm ơn đến Ban

giám hiệu Trường Đại học Công nghệ Thông tin — Dai học Quốc Gia Thành Phố HồChí Minh vì đã tạo điều kiện học tập, nghiên cứu tốt nhất Cảm ơn quý thầy cô

giảng day tại trường nói chung và Khoa Mạng máy tính & Truyền thông nói riêng

vì đã truyền đạt những kiến thức chuyên môn bổ ích, những kinh nghiệm quý báu

mà chúng em đã học hỏi được trong suốt quá trình học tập, rèn luyện tại trường Em

xin đặc biệt gửi lời cảm ơn đến ThS Trần Tuần Dũng đã quan tâm, định hướng vàhướng dẫn tận tình trong suốt quá trình thực hiện khóa luận

Bên cạnh đó, em cũng xin gửi lời cảm ơn đến bạn bè, những người đản anh,

đàn chị đã giúp đỡ em suốt thời gian qua

Cuối cùng, do kiến thức chuyên môn còn hạn chế nên khóa luận chắc chắnkhông tránh khỏi những thiếu sót Rất mong nhận được nhận xét, ý kiến đóng góp,

từ quý thay cô trong hội đồng dé khóa luận được hoàn thiện hơn

1.4 Đối tượng và phạm vi để tài eeeererrrrrrrrrrrrrrer

LAL Đối tượng eeeereereererirrrerrrtrrrrrirrrrrrrrrrrerree

1.4.2 Phạm vi để tài cceereriereererrerrerrrrrrrrrrrrrerrerrree

1.5 Phân lớp 5020 T ạc, ìễnnẽìiiieeriminiiiiie

1.6 Phương pháp thực hiện -ceceeeccerrrrrrrrerrrrrrrrrrrrrrrirrrrrrerrree

Chương 2 CƠ SỞ LÝ THUYẾT -.eetteeiertrteririrrtererrsrrrrrre

2.2.4 Hạn chế

2.2.5 Công cụ phát triên JaVasCTIp( -ceeeeceeecrcerrereeerrrrrrrrrirrerree

2.3 Giới thiệu HTML -e +eeeeeeeererrrrrrrriirrrrrtrrrrriiiririrrrrrie

2.3.1 Khái niệm eeeeereririiiiiiiiiiiiiiiiiier

10 10

2.3.2 — Vai trò iiiiiiisruer LO) 2.4 Giới thiệu CSS

2.4.1 Khái niệm eo LÍ2.4.2 Bế cục và CAU UIUC TỶ" ˆ

2.6 Thư viện Jquery -cceeeeereerrererrtrtrrrrrooe LA 2.6.1 Giới thiệu «ăn LA

2.9.3 Thư mục View (Giao diện): eeeeeeseeereerrereouuo.2

Chương 3 KHAO SÁT HIEN TRẠNG

3.1 - Hiện trạng iehheheiiiiiiiiiirriiiirirrrrrrrrrririseersee 20.

3.2 Nhận xét

3.3 Yêu cầu chức năng -ee-eereeeereereereererrerrerrrrerrreereereeroooe 20

Chương 4 PHAN TÍCH HỆ THỐNG 5.setrerrererrerrerreroeee 27

4.1 Kiến trúc hệ thống

4.2 Mô hình phân rã chức năng -. -cccecceeeeeeeeeeeeeeeeeeeeereeereeereee 277 4.3 Use case wn 28 4.3.1 Use Case tông quan esses 2Ô 4.3.2 Use case chức năng Màn hình quản lý thư mục và dự án 30 4.3.3 Use case chức năng Man hình tạo giao diện mới SZ4.3.4 Use case chức năng Chức năng tìm kiếm 34.4 Sequence diagram sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss OD) 4.4.1 Chức năng thêm thư MC OD 4.4.2 Chức năng xóa thư MU Cu SO 4.4.3 Chức năng thêm dự án -. -i-e-cceeeeeeee Ổ 7 4.4.4 Chức năng upload tệp trong dự án -.-.-.- - SO

4.4.5 Chức năng tìm kiếm theo keywWord eeeeseeeeev 39

Chương 5 HIỆN THỰC UNG DỤNG esseeeeeeeeeeeeeeeeeeeeee E

5.1 Giao diện quản lý thư mục và dự án -tssrerererrrrrrrrrrrrrrrrrrrrrer 41

5.1.1 Giao diện danh sách eeeeeeeerreesuee AL 5.1.2 Giao diện Form nhập thư mục mới -‹«e‹«see.eee 4D 5.1.3 Giao diện Form nhập dự án mới

5.1.4 Giao diện Form Upload File -.-. -eeeeeeeeeeeeeeeeeeeeeee.e 4A 5.2 Giao diện tạo giao diện mới

5.2.1 Giao diện chính eeeeerrrrirrrrirrroo AOD 5.2.2 Giao diện Form Thêm

5.3 Giao diện kết quả tìm kiếm e.eeeereeeererrrrreeo 47

Chương 6 KẾT QUA VÀ HƯỚNG PHÁT TRIỂN -.:.s2rsrz

6.1 Kết quả đạt ẨƯỢC - 5© ©© 92221212222777.7 Hii

6.2 Hướng phát triỂn -ccserrerrrtrrtrrtirrtrrrrirrrrrrrrirrrrrrrrree

48

48

48

DANH MỤC HÌNHHình 2.1 Sơ đồ đơn giản giải thích cách PHP hoạt động -: ð

Hình 2.2 Bồ cục CSS 12

Hình 0.1 Cấu trúc thư mục hệ thong 22Hình 0.2 Cấu trúc DB .<etseeertrrrrrrrrrrrirrrrrreeoe 28

Hình 0.3 Cấu trúc thư mục API e-.sssteereeteereereersreereereereeeee 2F

Hình 4.1 Sơ đồ kiến trúc hệ thống .2testrtetrerrerrrrerrerrerroroovee 27

Hình 4.2 Mô hình phân rã chức năng -++++++++tttttttttrtrtrtrrrrrrrrrrrrrrroooe 2B

Hình 4.3 Use case tổng quan ecereererreeretrerrrrrrrrrrrrreereerereesee 28

Hình 4.4 Use case Quản lý thư mục và dự án -eeeertrtrtrtrtrrrrrrrrrrrrrrree 30 Hình 4.5 Use case tạo giao điện mớii -cccceeetttrrrrrtrrrrrrrirrrrrrrrrirrrrrororee OD Hình 4.6 Use case chức năng tìm kiếm -.-eesesereeeeeeeeeeeeeseeeeeeee 32

-35

„36

Hình 4.7 Diagram chức năng thêm thư mục.

Hình 4.8 Diagram xóa thư mục

Hình 4.9 Diagram chức năng thêm dự án -cccceeercrrrrreeeeeeeerrrrrrrrrreeee OZ

Hình 4.10 Diagram chức năng upload tệp trong dự án - 3Ö

Hình 4.11 Diagram tìm kiếm dự án - s-seseereeeeeeeeeeeeeeeeeeeeeee 40

Hình 5.1 Giao diện thư mục và dự án cấp root s-.eeeeeeeeeeeeeeeee 41Hình 5.2 Giao diện các tệp trong dự án ww 42 Hình 5.3 Giao diện Form nhập thư mục mới -+eeeeeertrtrtrrrrrrrrereer 4D

Hình 5.4 Giao diện Form thêm dự án mới -sesc-eecccecveeseseeereerreeeesieeiee 4S

Hình 5.5 Giao diện Form Upload File -+eeeeeeertrtrtrtrrrtrrrrrrrrrrrrrreee 44 Hình 5.6 Giao diện trang tạo mới -eeetrtrtrtrtrtrtrtrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrreee 4D

Hình 5.7 Form Thêm giao diện - set 46

Hình 5.8 Giao diện kết quả tìm kiếm seseeereereereeesreereereeeeoeee 47

DANH MỤC BẢNG

Bảng 1 Mô tả sơ dé use case tổng quan -ssseereererrerrerrerrerrrrerrereBảng 2 Mô ta use case chức năng chính -:+++++++++*+*+###EEEEEEEEEEEEtrtrrrirrrie Bảng 3 Mô tả chức năng Tạo giao diện mới -© tt tttetetrtrtrrrrrrrrre Bảng 4 Mô tả chức năng tìm kiếm -.sseeetetererrrrererrrrrrrrrrrrrrr

30

32

34 35

2 DB Database

TÓM TAT KHÓA LUẬN

Lượng công việc của các nhà phát triển Front-end ngày một nhiều và hơn hết, họ

thường phải lặp lại những đoạn code HTML, CSS, JS của mình trên nhiều dự ánkhác nhau Trong trường hợp cần sử dụng lại những đoạn code này, các lập trình

viên thường không viết lại hoàn toàn mà sao chép nó từ các dự án mà họ đã làm.Tuy nhiên, việc tìm kiếm các giao diện phù hợp trong hàng loạt các giao diện mà họ

đã lập trình trước đó là không dễ dàng Vấn đề được đặt ra ở đây là cần có một hệ

thống có chức năng lưu trữ và quản lý các giao diện mà các nhà phát triển đã xâydựng Dé giải quyết van đề trên, tôi đã nghiên cứu và xây dựng một hệ thống thư

viện giao diện đáp ứng được mục đích lưu trữ và quản lý các giao diện Thêm vào

đó, để hỗ trợ người dùng sử dụng thư viện một cách dễ dàng hơn, hệ thống còn cócác chức năng khác như: thể hiện trực quan các giao diện đã lưu trên desktop vàmobile, hỗ trợ tạo giao diện mới từ các giao diện đã có.

Chuong 1 TONG QUAN

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

Hệ thống với cơ chế hoạt động offline — không cần sử dụng đến mạng, lưu trữ và

quản lý một cách linh động với từng người dùng Hệ thống hỗ trợ cho những nhà

phát triển Front-end, giúp họ quản lý tốt giao điện đã có, dé dàng tìm và tạo ra

những dự án mới từ những giao diện đã lưu trước đó.

Không còn mắt thời gian trong việc tìm kiếm, cũng như phải tốn thời gian cho việc

lặp lại những dòng mã code trong dự án cũ.

1.2 Tầm quan trọng và ý nghĩa vấn đề cần nghiên cứu

Trong ngày nay, với dự án yêu cầu được thiết kế độc nhất cho một khách hàng, mộtnhóm gồm ít nhất 5 các nhà phát triển và 1 người thiết kế website cần ít nhất 1

tháng để hoàn thành dự án Với mỗi dự án hoàn thành, các nhà phát triển Front-end

có thể lưu trữ lại thành các giao diện nhỏ hơn để có thể sử dụng vào các dự án sau

có cấu trúc website tương tự Nhờ việc quản lý và lưu trữ của hệ thống, các nhà phát

triển Front-end nhanh chóng hoàn thành công việc của mình Doanh thu của doanhnghiệp cũng đc tăng cao nhờ hiệu suất làm việc của nhóm tăng Lượng website lưu

trữ được cũng có thể giúp ích trong việc mở rộng thị trưởng cho các dự án côngnghiệp — có sẵn.

143 Mục tiêu đề tài

Xây dựng hệ thống thư viện chạy trên nền web bao gồm các chức năng:

o Lưu trữ các thư mục với các phương thức: Thêm, xóa.

o Lưu trữ các giao diện với các phương thức: Thêm, sửa.

o Quản lý các tệp, thư mục: tìm kiếm keyword, ngày tạo

o_ Hỗ trợ tạo giao diện mới từ các giao diện đã có.

o_ Thể hiện trực quan các giao diện mà người dùng đã lưu trên desktop và

mobile.

Hỗ trợ xuất các tệp giao diện dưới dạng mã nguồn để người dùng có thể sử dụng

Chương2 CƠ SỞ LÝ THUYET

2.1 Ngôn ngữ lập trình PHP

2.1.1 Giới thiệu

PHP [1] là cách viết tắt hồi quy của cụm từ tiếng Anh Hypertext Preprocessor, làngôn ngữ lập trình kích bản mã nguồn mở (hay ngôn ngữ lập trình đa mục đích)được được phát triển từ năm 1994 Nó được dùng dé phát triển các ứng dụng chomáy chủ Ngôn ngữ này chạy ở phía server, nhằm sinh mã html trên client Cũng

chính bởi thế, PHP đã tạo ra các ứng dụng web Mã lệnh của nó được nhúng vào

html nhờ sử dụng cặp thẻ PHP <?php?>.

Ngôn ngữ lập trình PHP hiện đã trải qua rất nhiều phiên bản khác nhau Do đượctối ưu hóa cho website nên cách viết mã tương đối rõ ràng Tốc độ của mã PHP,

dễ hiểu dễ học Bởi vậy mà PHP trở thành một trong những ngôn ngữ lập trình

website phổ biến, được sử dụng nhiều nhất hiện nay bởi các công ty, dịch vụthết kế website Thậm chí là nhiều website lớn như

Facebook.com, Mona.website, cũng đã sử dung PHP dé thiết kế web

Chạy trên môi trường web máy chủ nên PHP lưu trữ dữ liệu thống qua hệ quản

trị cơ sở dữ liệu Do đó, PHP thường đi kèm với MySQL [2], Apache và hệ điều

hành Linux Trong đó, MySQL đóng vai trò là nơi lưu trữ và truy vấn dữ liệu,tương tự các cơ sở dữ liệu như: SQL server [3], Postgres [4], Oracle [Š],

Apache là phan mềm web máy chủ, có nhiệm vụ tiếp nhận request từ trình duyệtcủa người dùng và chuyền giao cho PHP xử lý, sau đó gửi trả lại cho trình duyệt.Linux: Đây là hệ điều hành mã nguồn mở phổ biến dành cho các web máy chủ.Linux có nhiều phiên bản khác nhau Trong đó, Ubuntu và RedHat Enterprise

Linux thường là các phiên bản được sử dụng nhiều nhất

2.1.2 Cách thức hoạt động:

Khi có người dùng gọi trang PHP, web máy chủ sẽ triệu gọi PHP Engine thông

dịch trang PHP và trả lại kết quả cho người dùng

Hình 2.1 Sơ đồ đơn giản giải thích cách PHP hoạt động

Thông thường, khi chạy code, chúng được làm theo một quy trình thông dịch vàtrả kết quả mà chúng ta không nhìn thấy Dưới đây là mô tả ngôn ngữ PHP khithực thi một đoạn code thường được trải qua 4 giai đoạn sau:

Giai đoạn 1: Lexing

Lexing (hay còn gọi là tokenizing), là quá trình chuyền một đoạn mã nguồn PHP

thành một chuỗi các token có gắn giá trị PHP sử dụng re2c [6] để tạo các lexer

của nó từ file khai báo.

Giai đoạn 2: Parsing

Bộ phận tích chú Phsp (parser) được tao qua file grammar BNF với Bison Ngôn

ngữ lập trình PHP sử dụng cấu trúc LALR Ở giai đoạn này, sẽ nhận các luồngtoken từ lexer như các biến đầu vào Chúng thực hiện 2 công việc sau:

Xác định tính hợp lệ của token bằng việc khớp chúng với từng quy tắc ngữ pháp

định nghĩa trong tập tin ngữ pháp BNF Bước này đòi hỏi cấu trúc ngôn ngữ phảihợp lệ, theo dạng trong luồng stream

Bộ parser tạo cây cú pháp trừu tượng AST, mã nguồn hiền thị dưới dạng cây và

dùng trong giai đoạn tiếp theo

Giai đoạn 3: Compiling

Giai đoạn Compiling hay còn gọi là biên dịch, sử dụng AST phát ra các mã tácdụng bằng cách duyệt cây phương pháp đệ quy

Ở giai đoạn này thực hiện một vài tối ưu hóa, giải quyết lời gọi hàm Người dùng

có thể kiểm tra đầu ra các đoạn mã được tối ưu bằng nhiều cách, thông quaVLD, PHPDBG hay OPcache Trong đó, VLD thường được sử dụng bởi nó tạo

ra các mã output dé đọc hơn cả.

Giai đoạn 4: Interpreter

Đây là giai đoạn thông dịch mã tác vụ Tại đây, mã tác vụ chạy trên Zen Engine

VM, với giai đoạn đầu hầu như rất ngắn, đầu ra tương tự như kết quả khi sử

dung PHP echo, var_dump,

2.1.3 Ưu điểm:

PHP đơn giản, dé sử dung

o Hầu hết các đơn vi thiết kế website Mona Media, các freelancer cũng

đang lựa chon PHP là ngôn ngữ lập trình chủ đạo dé thiết kế web cho

khách hàng Bởi web bằng PHP dễ sử dụng, hiển thị đơn giản, dễ nhìn, dễ

đọc, dễ dùng Không những thế, tính bảo mật của website thiết kế từ PHPkhá cao.

o_ Không những thế, thiết kế web bằng PHP giúp các trang web có sự thân

thiện cao Web có thể tương thích với mọi trình duyệt từ chrome, cốc cốc,

firefox, Day là tiêu chí quan trọng giúp website chuẩn SEO, tiếp cận

đối tượng khách hàng tốt hơn

Giúp tối ưu tốc độ load và xử lý dữ liệu cho web

o Thiết kế web bằng PHP giúp cho website có tốc độ load nhanh Đây là

điều vô cùng quan trọng tạo nên sự thân thiện và tính hiệu quả củawebsite Đặc biệt là đối với website bán hàng, mỗi ngày chịu tải hàngngàn, hàng triệu khách ghé thăm mỗi ngày PHP sẽ cho phép khách hàngtruy cập web, load nhanh hơn Không những thế, PHP còn giúp kết nối cơ

sở dữ liệu một cách nhanh chóng, hiệu quả.

Thiết kế web bằng PHP giúp tùy chỉnh dễ dàng hơn

o_ Với các website được thiết kế bằng PHP thường có thé dễ dàng tùy chỉnh,

chỉnh sửa web theo ý muốn Đồng thời, ngôn ngữ lập trình này cũng cungcấp thư viện dữ liệu đa dạng Những dữ liệu giúp xây dựng các ứng dụng

quan trọng trên website và gửi mail cho khách hàng Thu thập cookie của

khách hang dé phân tích, phát triển web dễ dàng

Cộng đồng thiết kế web bằng PHP đông đảo

2 Nó được phát triển bởi Netscape, và đang được dùng trên 92% webstie;

3 JS có thể được gắn vào một element của trang web hoặc sự kiện của trang

web như cú click chuột;

4 Hoạt động trên đa trình duyệt và đa thiết bị;

5 Nhanh và nhẹ hơn các ngôn ngữ lập trình khác;

6 Có thé ít an toàn hon vì độ phổ biến của nó;

7 Bạn có thé thêm JavaScript trực tiếp vào HTML hoặc bạn có thể lưu nó trên

files riêng biệt và gọi lên khi cần

2.2.2 Client-side Javascript

Client-Side JavaScript [8] là Form phổ biến nhất của ngôn ngữ nay Script nên được bao gồm trong một tài liệu HTML cho việc mã hóa dé được thông dich bởi trình

duyệt.

Nghia là một trang web không cần là một HTML tinh, nhưng có thể bao gồm các

chương trình mà tương tác với người dùng, điêu khién trình duyệt, và tạo nội dung

HTML động.

Ky thuật Client-Side JavaScript cung cấp nhiều lợi thế hơn các CGI Server-Side

Script Ví dụ, bạn có thê sử dụng JavaScript đê kiêm tra nêu người sử dụng đã nhập một địa chỉ Email hợp lệ trong một trường Form.

JavaScript code được thực thi khi người sử dụng đệ trình Form, và chỉ nếu tất cả

đâu vào là hợp lệ, chúng sẽ được đệ trình tới Web Server.

2.2.3 Lợi thế

Các lợi thế của việc sử dụng JavaScript là:

Sự tương tác Server ít hơn: Bạn có thể xác nhận đầu vào (input) người sử dụng

trước khi gửi trang tới Server Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa

là Server của bạn tải ít hơn.

Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một trang web tảilại để thấy xem nếu họ đã quên nhập cái gì đó

Khả năng tương tác tăng lên: Bạn có thể tạo các giao diện mà phản ứng lại khi

người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím.

Giao diện phong phú hơn: Bạn có thể sử dụng JavaScript để bao gồm những mục

như các thành phần Drag và Drop (DnD) và các con trượt (Slider) để cung cấp mộtRich Interface (Giao diện giàu tính năng) tới site khách truy cập của bạn.

o JavaScript không có bat kỳ khả năng đa luồng hoặc đa xử lý.

2.2.5 Công cụ phát triển Javascript

Một trong những điểm mạnh lớn nhất của JavaScript là nó không yêu cầu các công

cụ phát triển tốn kém Bạn có thé bắt đầu với một bộ biên soạn (Editor) văn bản đơn

giản như Notepad Khi nó là một ngôn ngữ thông dịch bên trong context của một

trình duyệt web, bạn không cần phải mua một Complier (bộ phiên dich)

Dé làm cuộc sống của bạn đơn giản hơn, nhiều nhà cung cấp đã cho ra đời các công

cụ chỉnh sửa JavaScript đẹp, được liệt kê dưới đây:

Microsoft FrontPage Microsoft đã phát triển một HTML Editor phổ biến được gọi

là FrontPage FrontPage cũng cung cấp cho nhà lập trình các công cụ JavaScript đề

giúp đỡ tạo các Website có tính tương tác.

Macromedia Dreamweaver MX Macromedia Dreamweaver MX là một HTML và

JavaScript Editor rất phô biến trong cộng đồng lập trình web chuyên nghiệp Nó

cung cấp các thành phan JavaScript đã xây dựng trước mà thuận tiện, tích hợp tốt

với cơ sở đữ liệu, và theo các chuẩn mới như XHTML và XML

Macromedia HomeSite 5 HomeSite 5 là một HTML và JavaScript Editor từ

Macromedia mà có thể được sử dụng để quản lý các Website cá nhân một cách hiệuquả.

2.3 Giới thiệu HTML

2.3.1 Khái niệm

HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dau

Siêu van ban") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang

web trên World Wide Web Nó có thể được trợ giúp bởi các công nghệ như CSS vàcác ngôn ngữ kịch bản giống như JavaScript

Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữcục bộ và render tài liệu đó thành các trang web đa phương tiện HTML mô tả cầutrúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm

cho sự xuất hiện của tài liệu

Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thé

được nhúng vào trang được hiền thị HTML cung cấp một phương tiện dé tạo tàiliệu có cấu trúc bằng cách biéu thị ngữ nghĩa cầu trúc cho văn bản như headings,

paragraphs, lists, links, quotes và các mục khác Các phần tử HTML được phân

định bằng các tags, được viết bằng dấu ngoặc nhọn Các tags

như <img /> va <input /> giới thiệu trực tiếp nội dung vào trang Các tags khác

như <p> bao quanh và cung cấp thông tin về văn bản tài liệu và có thé bao gồm cácthẻ khác làm phần tử phụ Các trình duyệt không hiển thị các thẻ HTML, nhưng sử

dụng chúng để diễn giải nội dung của trang

2.3.2 Vai tròĐối với các website, ngôn ngữ HTML đóng vai trò như thế nào? HTML, theo đúng

nghĩa của nó, là một loại ngôn ngữ đánh dấu siêu văn bản, thế nên các chức năngcủa nó cũng xoay quanh yếu tô này Cụ thé, HTML giúp cau thành các cầu trúc cơ

bản trên một website (chia khung sườn, bố cục các thành phần trang web) và gópphần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh

Ưu điểm nỗi trội nhât và cũng là thế mạnh của HTML là khả năng xây dựng cấu

trúc và khiến trang web đi vào quy củ một hệ thống hoàn chỉnh Nếu bạn mong

10

muốn sở hữu một website có cấu trúc tốt có mục đích sử dụng nhiều loại yếu tố

trong văn bản, hãy hỏi HTML Nhiều ý kiến cho rằng tùy theo mục đích sử dụng mà

lập trình viên hay người dùng có thé lựa chọn ngôn ngữ lập trình riêng cho website

của bạn, tuy nhiên thực chất HTML chứa những yếu tổ cần thiết mà dù website của

bạn có thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào dé xử lý dữ liệu thì

nó vẫn phải cần đến ngôn ngữ HTML để hiền thị nội dung cho người truy cập

Nói đúng hơn, dù website của bạn được xây dựng như thế nào, trên nên tảng nào thì

nó cũng cần đến sự hỗ trợ của HTML, dù ít dù nhiều Đối với các lập trình viên haynhà phát triển web, họ đều phải học HTML như một loại ngôn ngữ cơ bản trước khi

bắt tay vào thiết kế trang web nào

2.4 Giới thiệu CSS

2.4.1 Khái niệm

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 gon hơ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 đóng vai trò định dạng các phan tử trên website như

việc tạo ra các đoạn văn bản, các tiêu dé, bang, thi 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ắc trang, đổi màu chữ,

font chữ, thay đồi cấu trúc

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì

HTML không được thiết kế đề gắn tag để giúp định dạng trang web

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có

thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp

dụng các thuộc tính cần thay đổi lên vùng chọn đó

Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền

tảng của site) và CSS định hình phong cách (tất cả những gi tạo nên giao diện

website), chúng là không thé tách rời

11

+ Border: Là đường liền nằm ngay bên ngoài phần đệm.

+ Margin: Là khoảng cách xung quanh bên ngoài của phan tử

Nghia là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ

nằm bên trong cặp dấu ngoặc nhọn {} Mỗi thuộc tính sẽ luôn có một giá trị riêng,

giá trị có thé là dang số, hoặc các tên giá trị trong danh sách có sẵn của CSS Phầngiá trị và thuộc tính phải được cách nhau bằng dấu hai cham, và mỗi một dòng khai

báo thuộc tính sẽ luôn có dấu chấm phây ở cuối Một vùng chọn có thể sử dụng

không giới hạn thuộc tính.

Định nghĩa của các phần này như sau:

12

o Thuộc tính id va class của các phan tử.

o Các phan tử dựa vào mối liên quan với các phan tử khác trong

cây phân cấp tài liệu

Khai báo (Declaration): Khối khai báo chứa một hoặc nhiều khai báo,phân tách với nhau bằng các dấu chấm phẩy Mỗi khai báo gồm tên và giátrị đặc tính CSS, phân tách bằng dấu phẩy Khai báo CSS luôn kết thúc

bằng dấu chấm phẩy, khối khai báo nằm trong các dấu ngoặc móc Trong

ví dụ dưới đây, các phần tử <p> sẽ được căn giữa, chữ màu đỏ

Thuộc tính (Properties): Những cách mà bạn có thể tạo kiểu cho một phần

tử HTML (Với trường hợp này thì color được xem là một trong

những thuộc tính của phần tử p) Chính vì vậy, với CSS thì bạn chỉ cầnlựa chọn thuộc tính mà chính bạn muốn tác động nhất trong bộ quy tắc

của mình.

Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai cham(:), chúng ta

sẽ sở hữu giá trị thuộc tính mà việc lựa chọn trong số đó sẽ xuất hiệnnhiều lần đề có thé cho một thuộc tính cụ thé nao đó

Git

Git là một trong những hệ thống phiên ban phân tán, vốn được phát triển nhằm quản

ly mã nguồn cua Linux.

Trên Git, ta có thé lưu trạng thái của file đưới dạng lich sử cập nhật Vì thế, có théđưa file đã chỉnh sửa một lần về trạng thái cũ hay có thể biết được file đã được

chỉnh sửa chỗ nao.

13

Lợi ích:

o An toàn hơn (vì mỗi bản copy của thành viên đều là bản copy từ repository

gốc)

o Các thành viên vẫn có thé làm việc ngoại tuyến, họ vẫn có thể commit và cập

nhật trên máy của họ.

o_ Khi server hoạt động trở lại, họ có thể cập nhật tất cả lên server

o Repository của Git được phân làm hai loại: Remote repository va Local

repository.

* Nhánh Branch: mỗi nhánh trong Git gần giống như một workspace

Việc nhảy vào một nhánh để làm việc trong đó tương tự việc chuyểnqua ngữ cảnh làm việc mới, và sau đó có thể nhanh chóng quay lại

ngữ cảnh cũ.

* Nhánh master là nhánh mặc định khi tạo một repository Nhánh

master thông thường là nhánh chính của ứng dụng Ví dụ bạn thử

nghiệm một tính năng mới và muốn không ảnh hưởng đến code chính

của bạn hoặc của nhóm, nạn có thê tạo một nhánh mới và sau khixong sẽ hợp nhất lại với nhánh master Việc hợp nhất này gọi là

hơn — làm nhiều hơn) nó đã giúp lập trình viên tiết kiệm được rất nhiều thời gian và

công sức trong việc thiết kế website

2.6.2 Ưu điểm

Dễ sử dụng: Đây là lợi thế chính khi sử dụng jquery, nó dễ dàng hơn so với nhiều

thư viện javascript chuẩn khác bởi cú pháp đơn giản và bạn chỉ phải viết ít dong

lệnh dé tạo ra các chức năng tương tự Chi với 10 dong lệnh JQuery bạn có thé thay

thế cả 20 chục dong lệnh DOM javaScript, tiết kiệm thời gian của người lập trình

Là một thư viện lớn của javascript: Thực thi được nhiều chức năng hơn so với các

thư viện jascript khác

Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn): JQuery đang còntương đối mới, có một cộng đồng dành thời gian của họ dé phát triển các plugin của

JQuery Như vậy có hang trăm plugin được viết trước đó có sẵn dé tải về ngay lậptức dé đây nhanh quá trình viết code của bạn Một lợi thế khác đằng sau này là hiệu

quả va an toàn của các script.

Có nhiều tài liệu và hướng dẫn chỉ tiết: Các trang web JQuery có một toàn bộ tài

liệu và hướng dẫn đề ngay cả một người mới bắt đầu lập trình cũng có thể làm đượcquả bóng lăn với thư viện jquery này.

Hỗ trợ ajax: JQuery cho phép bạn phát triển các template Ajax một cách dé dàng

Ajax cho phép một giao diện kiểu dáng đẹp trên website, các chức năng có thé được

thực hiện trên các trang mà không đòi hỏi toàn bộ trang được reload lại.

2.6.3 Hạn chế

Lam client trở nên chậm chap: Client không những phải chi mình hiển thị nữa màcòn phải xử lý nhiều chức năng được tạo thành từ jquery Nếu lạm dụng quá nhiều

jquery sẽ làm cho client trở nên chậm chạp, đặc biệt những client yếu Chính vì vậy

mà lập trình viên phải dùng thêm cache

15

Chức năng có thé không có: JQuery đã có rất nhiều chức năng, tùy thuộc vào yêu

cầu trên trang web của bạn Nhưng nhiều chức năng vẫn chưa được phát triển, do

đó bạn vẫn phải sử dụng javascript thuần để xây dựng chức năng này

2.6.4 Một số hàm đã sử dụng

jQuery cung cấp các phương thức xử lý sự kiện, hiệu ứng, tương tác chỉ với nhữngdòng lệnh đơn giản Các module chính mà của jQuery sử bao gồm:

o Ajax- xử lý Ajaxo_ Atributes — xử lý thuộc tính của đối tượng HTML

o Effect — xử lý hiệu ứng

o Event- xử lý sự kiện

o Form- xử lý form

o DOM- xử lý Data Object Model

o Selector — xử lý luồng lách các đối tượng HTML

o Hiệu ứng và hoạt hình

o Phân tích cú pháp JSON 2.7 Thư viện Bootstrap

2.7.1 Giới thiệu

Bootstrap [9] là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễdàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các

thiết bị cầm tay như mobile, ipad, tablet,

Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables,navigation, modals, image carousels và nhiều thứ khác Trong bootstrap có thêm

nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dé dàng,

thuận tiện và nhanh chóng hơn.

16

2.7.2 3 Files chính của Bootstrap

2.7.2.1 Bootstrap.css

Nó là một Framework CSS có chức năng quản lý và sắp xếp bố cục của các trangWeb HTML có nhiệm vụ quản lý cấu trúc và nội dung thi CSS sẽ xử lý bố cục củaWebsite Vì vậy mà hai cấu trúc này phải ton tại cùng nhau để thực hiện được hành

động cụ thê.

Giờ bạn sẽ không phải tốn thời gian dé chỉnh sửa thủ công chỉ dé thay đổi một thiết

kế nhỏ Thay vào đó, bạn có thé dùng CSS dé tao giao diện thống nhất trên nhiều

Website mà không bị giới han.

Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng như bảng, bốcục hình Bạn cần mắt một it thời gian dé CSS ghi nhớ hết tat cả các khai báo và bộ

chọn.

2.7.2.2 Bootstrap.js

Đây là phần cét lõi vì chứa các File JavaScript, nó chịu trách nhiệm cho việc tươngtác của Website Để tiết kiệm thời gian viết cú pháp JavaScript mà nhiều nhà pháttriển sẽ sử dụng jQuery Đây là thư viện JavaScript mã nguồn mở, đa nền tảng giúpbạn thêm nhiều chức năng vào trang Web

Theo kinh nghiệm của tôi, jQuery sẽ thực hiện một số chức năng như:

Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị trí khác một

cách linh hoạt.

Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript

jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS

"Thêm một sé tính năng động cho nội dung các trang Web của bạn

Tuy Bootstrap với các thuộc tính Element HTML và CSS có thể hoạt động tốt,

nhưng vẫn cần jQuery để tạo thiết kế Responsive Nếu thiếu đi phần này, bạn chỉ có

thé dùng các phan tĩnh của CSS mà thôi

17

2.7.2.3 Glyphicons

Trong giao diện trang Web, phần không thé thiếu chính là Icons Chúng thường

được liên kết với các dữ liệu nhất định và các hành động trong giao diện người

dùng.

Bootstrap dùng Glyphicons dé đáp ứng nhu cầu trên và nó đã mở khóa bộ

Halflings Glyphicons để bạn sử dụng miễn phí Tại bản miễn phí, tuy chỉ có giao

diện chuẩn nhưng phù hợp với các chức năng thiết yếu

Nếu như bạn muốn có các Icon phong cách hơn thì có thé mua bộ bộ Icon Premiumkhác nhau Chắc chắn các Icon tại Glyphicons sẽ giúp cho trang Web của bạn trông

đẹp và nổi bật hơn

2.7.3 Ưu điểm

o Rất dễ dé sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và

Javascript chỉ cần có kiến thức cơ bản về 3 cái đó là có thé sử dụngbootstrap tốt

o Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị

Iphones, tablets, và desktops Tính năng này khiến cho người dùng tiết

kiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện vớicác thiết bị điện tử, thiết bị cầm tay

o Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt

(Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với

IE browser, Bootstrap chỉ hỗ trợ từ IE9 trở lên Điều này vô cùng dễ hiểu

vì IE8 không support HTMLS và CSS3.

2.8 Công cụ hỗ trợ

2.8.1 PHP Storm

2.8.1.1 Giới thiệu

PhpStorm là một môi trường phát triển tích hợp (IDE), da nền tang cho PHP, được

xây dựng bởi công ty JetBrains, hãng phần mềm hàng dau thế giới về các công cụ

18

cho lập trình và phát triển PhpStorm cung cấp trình soạn thảo cho PHP, HTML và

JavaScript với khả năng phân tích mã nhanh, ngăn ngừa lỗi và tái cấu trúc tự động

cho mã PHP và JavaScript Tính đến năm 2020, có khoảng 600.000 người dùng sửdụng bản quyền phần mềm PhpStorm trên toàn thế giới Điều đó cho thấy mức độ

phổ biến “đáng nể” của phần mềm này trong lĩnh vực lập trình và phát triển

JetBrains PhpStorm được sử dụng chủ yếu bởi các nhà phát triển web, những ngườicần những công cụ thích hợp để chỉnh sửa PHP, HTML, CSS, JavaScript và các tập

tin XML.

PhpStorm giúp người dùng tao và chỉnh sửa mã nguồn bat kể ngôn ngữ lập trình mà

họ đang sử dụng Như bất kỳ trình soạn thảo IDE khác, nó đi kèm với các tính năng

cơ bản như đánh dấu trang, hoàn thành mã, phóng to thu nhỏ, các điểm ngắt, vv.Tuy nhiên, nó có chứa các tính năng khác nhau như các macro, phân tích mã và

nhanh chóng chuyển hướng dé làm cho công việc của bạn dé dàng hơn nhiều

PhpStorm được phát triển bằng ngôn ngữ Java do đó thừa hưởng rất nhiều lợi ích từngôn ngữ này, phần mềm chạy rất nhanh trên Linux, thích hợp code PHP, tối ưu

việc sử dụng tai nguyén,v.v

2.8.1.2 Đặc điểm, tính năng

Trình chỉnh sửa mã PHP thông minh

IDE cung cấp tính năng hoàn thành mã thông minh, tô sáng cú pháp, cấu hình định

dạng mã mở rộng, kiểm tra lỗi nhanh chóng, gấp mã, hỗ trợ hỗn hợp ngôn ngữ vàhơn thế nữa Tái cấu trúc tự động xử lý mã của bạn một cách cần thận, giúp thiết lập

dự án toàn cầu một cách dé dàng và an toàn

Trình chỉnh sửa thực sự “lấy” mã của bạn và hiểu sâu sắc cấu trúc của nó, hỗ trợ tất

cả các tính năng của ngôn ngữ PHP cho các dự án hiện đại và kế thừa Nó cung cấpkhả năng hoàn thành mã tốt nhất, tái cầu trúc, ngăn chặn lỗi nhanh chóng và hơn thé

nữa.

Phân tích chất lượng mã

19