Chương 1. Giới thiệu đề tài:. Tam quan trọng và ý nghĩa vấn đề cần nghiên cứu. Mục tiêu để tài.
Đối tượng và phạm vi để tài. Phạm vi để tài. Phương pháp thực hiện .------ceceeeccerrrrrrrrerrrrrrrrrrrrrrrirrrrrrerrree Chương 2. Ngôn ngữ lập trình PHP.
- GihiệtẰm ett ren vveveveveveveveveveveveveverevevevevevevevereresereverevenerevenens 2. Cách thức hoạt động: 2. Ngôn ngữ lập trình Javascript. Client-side ]avasCTip(.
Công cụ phát triên JaVasCTIp(. Giới thiệu HTML. Giới thiệu CSS 2. Bế cục và CAU UIUC TỶ".
Thư viện Jquery. Một số hàm đã sử dụng. Thư viện Bootstrap. 3 Files chính của Bootstrap.
Công cụ hỗ tresses LB 2. Kiến trúc hệ thống giao diện. Thu mục API. Thư mục View (Giao diện):.
KHAO SÁT HIEN TRẠNG. Yêu cầu chức năng.-ee-eereeeereereereererrerrerrrrerrreereereeroooe 20 Chương 4. PHAN TÍCH HỆ THỐNG. Kiến trúc hệ thống 4.
Mô hình phân rã chức năng. Use Case tông quan esses 2Ô 4. Use case chức năng Màn hình quản lý thư mục và dự án. Use case chức năng Man hình tạo giao diện mới.
Use case chức năng Chức năng tìm kiếm. Chức năng thêm thư MC. Chức năng xóa thư MU Cu. Chức năng thêm dự án.
Chức năng upload tệp trong dự án. Chức năng tìm kiếm theo keywWord.--eeeeseeeeev 39 Chương 5. HIỆN THỰC UNG DỤNG. Giao diện quản lý thư mục và dự án.
Giao diện danh sách. Giao diện Form nhập thư mục mới. Giao diện Form nhập dự án mới 5. Giao diện Form Upload File.
Giao diện tạo giao diện mới 5. Giao diện chính. Giao diện Form Thêm. Giao diện kết quả tìm kiếm.eeeereeeererrrrreeo 47 Chương 6.
KẾT QUA VÀ HƯỚNG PHÁT TRIỂN. Kết quả đạt ẨƯỢC. Hướng phát triỂn.-ccserrerrrtrrtrrtirrtrrrrirrrrrrrrirrrrrrrrree 48 DANH MỤC HÌNH Hình 2.1 Sơ đồ đơn giản giải thích cách PHP hoạt động.2 Bồ cục CSS.1 Cấu trúc thư mục hệ thong.2 Cấu trúc DB.3 Cấu trúc thư mục API.4 Cấu trúc thư mục View wun2 Hình 4.1 Sơ đồ kiến trúc hệ thống.2 Mô hình phân rã chức năng .3 Use case tổng quan.4 Use case Quản lý thư mục và dự án.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.7 Diagram chức năng thêm thư mục.8 Diagram xóa thư mục „36 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 .11 Diagram tìm kiếm dự án.1 Giao diện thư mục và dự án cấp root.2 Giao diện các tệp trong dự án.3 Giao diện Form nhập thư mục mới .4 Giao diện Form thêm dự án mới .--------sesc-eecccecveeseseeereerreeeesieeiee 4S Hình 5.5 Giao diện Form Upload File.6 Giao diện trang tạo mới.7 Form Thêm giao diện.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.-ssseereererrerrerrerrerrrrerrere 30 Bảng 2 Mô ta use case chức năng chính.-----:+++++++++*+*+###EEEEEEEEEEEEtrtrrrirrrie 32 Bảng 3 Mô tả chức năng Tạo giao diện mới. ----------© tt tttetetrtrtrrrrrrrrre 34 Bảng 4 Mô tả chức năng tìm kiếm.sseeetetererrrrererrrrrrrrrrrrrrr 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ự án khá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ây dự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ó. 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ũ.
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ột nhó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 doanh nghiệ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ông nghiệp — có sẵn. 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úng trong các dự án của họ. Đối tượng và phạm vi đề tài 1.
Đối tượng Các giao diện web, mỗi giao diện được lưu trữ dưới dạng một thư mục bao gồm 3 tệp: HTML, CSS va Javascript. Pham vi dé tai Lưu trữ, quan lý các thư mục va tệp HTML, CSS, Javascript của các giao diện web. Phân lớp Hệ thống thư viện hỗ trợ các định dạng tệp:. Phương pháp thực hiện Lập trình HTML, CSS và Javascript dé lập trình Front-end.
Sử dụng thư viện Bootstrap, jQuery và một số thư viện khác dé hỗ trợ xây dựng giao diện. Sử dụng ngôn ngữ PHP để lập trình Back-end. Ngôn ngữ lập trình PHP 2. 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 cho má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 được tố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. 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ệt củ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.
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. Request Parse ————*> Request Response + SOFT 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 khi thự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ồng token 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ải hợ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ác dụ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 qua VLD, 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,.
Ư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ừ PHP khá cao.