Hệ thống quản lý cán bộ, giảng viên khoa toán lý tin trường đại học tây bắc

Trên toàn bộ, “cuộc chiến” trình duyệt đã dẫn đến nhiều sáng tạo tích cực và giúp thiết kế web phát triển với một tốc độ nhanh chóng Sự phát triển của thiết kế website: Năm 1996, Micros

TRƯỜNG ĐẠI HỌC TÂY BẮC

KHOA TOÁN – LÝ – TIN - -

DƯƠNG VĂN TOẢN

XÂY DỰNG HỆ THỐNG QUẢN LÝ THÔNG TIN CÁN BỘ GIẢNG VIÊN KHOA TOÁN – LÝ – TIN TRƯỜNG ĐẠI HỌC

TÂY BẮC

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

Sơn La, năm 2018

TRƯỜNG ĐẠI HỌC TÂY BẮC

KHOA TOÁN – LÝ – TIN - -

DƯƠNG VĂN TOẢN

XÂY DỰNG HỆ THỐNG QUẢN LÝ THÔNG TIN CÁN BỘ GIẢNG VIÊN KHOA TOÁN – LÝ – TIN TRƯỜNG ĐẠI HỌC

LỜI CẢM ƠN

Sau một thời gian học tập, nghiên cứu và triển khai đề tài: “Xây dựng hệ thống quản lý cán bộ, giảng viên khoa Toán - Lý - Tin Trường Đại học Tây Bắc”, đến nay em đã hoàn thành bài khóa luận của mình

Em xin bày tỏ tấm lòng biết ơn sâu sắc nhất tới thầy giáo - Thạc sỹ Nguyễn Duy Hiếu đã trực tiếp hướng dẫn em trong suốt quá trình em thực hiện khóa luận

Đồng thời em cũng chân thành cảm ơn tới lãnh đạo Nhà trường, Ban chủ nhiệm Khoa cùng các thầy cô giáo đã giúp đỡ, tạo điều kiện để em có cơ hội nghiên cứu, học tập và hoàn thành bài khóa luận này

Do hạn chế về trình độ chuyên môn và thời gian thực hiện khóa luận không tránh khỏi những thiếu sót, rất mong nhận được sự góp ý của thầy cô để

em có thể hoàn thành tốt nhất đề tài này

Em xin chân thành cảm ơn!

Sơn La, tháng 05 năm 2018

Sinh viên

Dương Văn Toản

MỤC LỤC

PHẦN MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục đích, nhiệm vụ nghiên cứu 1

3 Đối tượng nghiên cứu 1

4 Phạm vi nghiên cứu 1

5 Phương pháp nghiên cứu 1

6 Cấu trúc của đề tài 1

CHƯƠNG 1: TỔNG QUAN VỀ THIẾT KẾ WEB 3

1.1 Lịch sử hình thành của thiết kế web 3

1.2 Xu hướng phát triển của thiết kế web 6

1.2.1 Mobile-first 6

1.2.2 Thiết kế website - Responsive Web Design 6

1.2.3 Sử dụng các framework của CSS và JavaScript 7

1.3 Căn bản về HTML/HTML5 7

1.3.1 HTML là gì? 7

1.3.2 Tập tin HTML là gì? 7

1.3.3 Thẻ trong HTML 7

1.3.4 Cấu trúc của một tài liệu HTML 8

1.3.5 Các phiên bản HTML 8

1.4 Căn bản về CSS/CSS3 9

1.4.1 CSS là gì? 9

1.4.2 Lịch sử CSS 9

1.4.3 Lợi thế của CSS 9

1.5 Căn bản về JavaScript 10

1.5.1 JavaScript là gì? 10

1.5.2 Các lợi thế của JavaScript 11

1.5.3 Hạn chế của JavaScript 11

CHƯƠNG 2: GIỚI THIỆU VÀ TỔNG QUAN VỀ LARAVEL 12

2.1 Giới thiệu về Laravel 12

2.2 Luồng hoạt động của Laravel 12

2.3 Lịch sử phát triển của Laravel 13

2.4 Sơ lược các tính năng cơ bản của Laravel 15

2.5 Các thành phần cơ bản của Laravel 16

2.6 Cách cài đặt Laravel 26

2.6.1 Yêu cầu cấu hình khi cài đặt Laravel 26

2.6.2 Cài đặt Composer 27

2.6.3 Cài đặt Laravel 5.x 27

2.6.4 Chạy Laravel 28

CHƯƠNG 3: XÂY DỰNG HỆ THỐNG QUẢN LÝ CÁN BỘ GIẢNG VIÊN KHOA TOÁN – LÝ – TIN 29

3.1 Phân tích bài toán và đặc tả yêu cầu 29

3.1.1 Mô tả bài toán 29

3.1.2 Biểu đồ use case 30

3.1.3 Biểu đồ hoạt động 35

3.1.4 Biểu đồ lớp 36

3.1.5 Biểu đồ trình tự 37

3.2 Thiết kế 41

3.2.1 Thiết kế cơ sở dữ liệu 41

3.2.2 Thiết kế giao diện 42

KẾT LUẬN VÀ KIẾN NGHỊ 49

1 Kết luận 49

2 Kiến nghị 49

TÀI LIỆU THAM KHẢO 50

MỤC LỤC HÌNH ẢNH

Hình 1 Thiết kế phù hợp với kích thước màn hình của thiết bị 6

Hình 2 Cấu trúc cơ bản 1 tài liệu 8

Hình 3 Biểu đồ luồng hoạt động của laravel 12

Hình 4 Biểu đồ phát triển của một số framework từ 2004 đến nay 13

Hình 5 Hoạt động của middleware 16

Hình 6 Cách hoạt động của request và response 17

Hình 7 Ví dụ cách hoạt động migrate 19

Hình 8 Cách thêm dữ liệu mẫu bằng seeds 20

Hình 9 Cách tạo một model bằng lệnh 21

Hình 10 Sự khác nhau giữa quản lý việc đăng nhập bằng code thường và dùng laravel 22

Hình 11 Giao diện chạy thử comporser 27

Hình 12 Giao diện khi cài đặt thành công laravel 28

Hình 13 Biểu đồ use case tổng quát 30

Hình 14 Phân rã use case quản lý người dùng 31

Hình 15 Phân rã use case quản lý nguyên cứu khoa học 31

Hình 16 Phân rã use case quản lý thưởng 32

Hình 17 Phân rã use case quản lý thưởng 32

Hình 18 Phân rã use case quản lý các bài báo 33

Hình 19 Phân rã use case quản lý lớp chủ nhiệm 33

Hình 20 Phân rã use case quản lý quá trình đào tạo 34

Hình 21 Phân rã use case quản lý chứng chỉ ngoại ngữ 34

Hình 22 Biểu đồ hoạt động đăng nhập 35

Hình 23 Biểu đồ hoạt động thêm người dùng 35

Hình 24 Biểu đồ hoạt động sửa người dùng 36

Hình 25 Bản vẽ biểu đồ lớp chi tiết của hệ thống 37

Hình 26 Biểu đồ trình tự cho chức năng đăng nhập 38

Hình 27 Biểu đồ trình tự cho chức năng thêm người dùng 39

Hình 28 Biểu đồ trình tự cho chức năng sửa người dùng 40

Hình 29 Biểu đồ trình tự cho chức năng xóa người dùng 41

Hình 30 Cơ sở dữ liệu của bài toán 41

Hình 31 Giao diện chính của quản trị viên 42

Hình 32 Giao diện đăng nhập 42

Hình 33 Giao diện khi người dùng đăng nhập thành công 43

Hình 34 Giao diện khi người dùng sửa thông tin 43

Hình 35 Giao diện khi người dùng chọn vào quá trình đào tạo 44

Hình 36 Giao diện khi người dùng thêm quá trình đào tạo 44

Hình 37 Giao diện sửa quá trình đào tạo 45

Hình 38 Giao diện khi chọn quản lý đề tài nguyên cứu 45

Hình 39 Giao diện khi người dùng chọn thêm đề tài nguyên cứu 46

Hình 40 Giao diện khi người dùng chọn sửa đề tài nguyên cứu 46

Hình 41 Giao diện khi người dùng chọn quản lý cấp nguyên cứu 47

Hình 42 Giao diện khi người dùng thêm cấp nguyên cứu 47

Hình 43 Giao diện khi người dùng chọn sửa cấp nguyên cứu 48

Hình 44 Giao diện khi người dùng xóa cấp nguyên cứu 48

PHẦN MỞ ĐẦU

1 Lý do chọn đề tài

Công nghệ thông tin ngày càng phát triển đã tạo ra những ứng dụng tiện ích, dễ sử dụng, dễ quản lý ở trong đời sống, trong trường học, trong các công

ty, các doanh nghiệp

Hiện nay, việc quản lý cán bộ, giảng viên của khoa Toán - Lý - Tin còn thực hiện trên Excel nên việc quản lý còn gặp nhiều vấn đề bất cập

Với những yêu cầu và tính chất của công việc, việc tạo ra một hệ thống quản lý rất cần thiết, nhằm giảm áp lực của công việc cũng như giúp giảm thiểu thời gian làm việc xuống một mức độ ít nhất

Có thể thấy tiềm năng ứng dụng CNTT vào việc xây dựng một hệ thống quản lý là rất lớn Việc quản lý thông tin cán bộ, giảng viên hay tạo ra những báo cáo một cách nhanh và chính xác nhất có thể Với những lý do trên, tôi đã

đề xuất xây dựng “Hệ thống quản lý cán bộ, giảng viên khoa Toán - Lý - Tin Trường Đại học Tây Bắc”

2 Mục đích, nhiệm vụ nghiên cứu

- Tìm hiểu về Laravel và phát triển ứng dụng nền web bằng Laravel

3 Đối tượng nghiên cứu

- Laravel - một framework của PHP

- Bài toán quản lý thông tin cán bộ giảng viên khoa Toán - Lý - Tin

4 Phạm vi nghiên cứu

- Nghiên cứu Laravel framework

- Cài đặt chương trình ứng dụng thử nghiệm

5 Phương pháp nghiên cứu

- Nghiên cứu lý thuyết

- Chương 1: Tổng quan về thiết kế web

- Chương 2: Tổng quan về laravel

- Chương 3: Xây dựng hệ thống quản lý cán bộ, giảng viên khoa Toán - Lý

- Tin Trường Đại học Tây Bắc Phần 3: Kết luận và hướng nghiên cứu phát triển đề tài

CHƯƠNG 1: TỔNG QUAN VỀ THIẾT KẾ WEB 1.1 Lịch sử hình thành của thiết kế web

Mặc dù Internet có lịch sử phát triển chưa thực sự lâu dài nhưng hiện nay

nó có vai trò quan trọng trong lĩnh vực CNTT Những tiện ích mà Internet mang lại giúp con người ngày càng thuận tiện hơn trong công việc, học tập, kết nối và giải trí

Có thể nói rằng: Internet có vai trò to lớn như ngày nay một phần lớn là nhờ sự phát triển của công nghệ website Nhờ các hệ thống website, con người

có thể tìm kiếm, truyền tải, quảng bá, trao đổi thông tin một cách dễ dàng và thuận tiện Và hiện nay, công nghệ web phát triển mạnh mẽ không chỉ dừng lại ở việc phát triển các trang web thông thường, mà còn là phát triển các ứng dụng trên thiết bị di động nền web (web-based applications)

Sự bắt đầu của thiết kế web:

Năm 1989, khi làm việc tại CERN, Tim Berners-Lee đã đề xuất để tạo ra một dự án siêu văn bản toàn cầu mà sau này được gọi là World Wide Web Trong thời gian 1991-1993 World Wide Web đã ra đời Trang văn bản chỉ có thể được xem bằng cách sử dụng một trình duyệt line-chế độ đơn giản Năm 1993, Marc Andreessen và Eric Bina, tạo ra các trình duyệt Mosaic Vào thời điểm đó

có nhiều trình duyệt, tuy nhiên phần lớn trong số họ là dựa trên Unix và không

có sự tích hợp với các yếu tố thiết kế đồ họa như hình ảnh; âm thanh Các trình duyệt Mosaic đã phá vỡ mốc này W3C đã được thành lập trong tháng 10 năm

1994 để dẫn World Wide Web phát triển các giao thức phổ biến mà thúc đẩy sự phát triển của nó và đảm bảo khả năng tương tác của nó Điều này khuyến khích bất kỳ một công ty độc quyền về trình duyệt và ngôn ngữ lập trình có thể sẽ bị thay đổi tác động của World Wide Web một cách toàn thể W3C tiếp tục thiết lập các tiêu chuẩn mà hôm nay có thể thấy như HTML, CSS, JavaScript

Năm 1994, Andersen thành lập Communications Corp mà sau này được biết đến như Netscape Communications, trình duyệt Netscape 0.9 Netscape tạo

ra các thẻ HTML riêng của mình mà không quan tâm đến quá trình chuẩn mực

truyền thống Ví dụ, Netscape 1.1 bao gồm các thẻ cho việc thay đổi màu nền và định dạng văn bản với bảng trên các trang web

Trong suốt 1996-1999 các cuộc chiến trình duyệt bắt đầu, như Microsoft và Netscape đã đấu tranh cho sự thống trị bằng cách ra mắt nhiều cải tiến trong các phiên bản của mình Trong thời gian đó có rất nhiều công nghệ mới trong lĩnh vực này, đặc biệt là Cascading Style Sheets, JavaScript, và Dynamic HTML Trên toàn bộ, “cuộc chiến” trình duyệt đã dẫn đến nhiều sáng tạo tích cực và giúp thiết kế web phát triển với một tốc độ nhanh chóng

Sự phát triển của thiết kế website:

Năm 1996, Microsoft phát hành bản trình duyệt đầu tiên của mình, trong đó

đã hoàn thành với các tính năng và các thẻ riêng của mình Nó cũng là trình duyệt đầu tiên hỗ trợ phong cách trang, mà lúc đó được xem như là một kỹ thuật tối ưu Các đoạn mã HTML cho bảng ban đầu được dành cho việc hiển thị dữ liệu dạng bảng Tuy nhiên các nhà thiết kế nhanh chóng nhận ra tiềm năng của việc sử dụng bảng HTML cho các công việc phức tạp, bố trí nhiều cột đó mà không thể thực hiện Tại thời điểm này, thiết kế và thẩm mỹ tốt dường như được

ưu tiên hơn cấu trúc đánh dấu tốt, và ít chú ý đến ngữ nghĩa và cách tiếp cận Các trang web HTML được giới hạn trong các tùy chọn thiết kế của họ, thậm chí nhiều hơn như vậy với các phiên bản trước của HTML Để tạo ra các thiết kế phức tạp, nhiều nhà thiết kế web có sử dụng các cấu trúc bảng phức tạp CSS được giới thiệu vào tháng 12 năm 1996 bởi W3C để hỗ trợ trình bày và bố trí Điều này cho phép mã HTML đơn giản và ngữ nghĩa hơn, cải thiện khả năng tiếp cận web

Năm 1996, flash (ban đầu được biết đến như là FutureSplash) đã được phát triển Vào thời điểm đó, các công cụ phát triển nội dung Flash là tương đối đơn giản so với hiện nay, sử dụng bố trí cơ bản và các công cụ vẽ, ActionScript, và một thời gian sau nó cho phép các nhà thiết kế web vượt qua các nhược điểm của HTML, GIF và JavaScript Tuy nhiên, vì Flash yêu cầu một plug-in, nhiều nhà phát triển web tránh sử dụng nó vì sợ hạn chế thị phần của mình do thiếu khả năng tương thích Thay vào đó, các nhà thiết kế web dùng hình ảnh động gif

(nếu họ không từ bỏ sử dụng đồ họa chuyển động hoàn toàn) và JavaScript cho các widget Nhưng những lợi ích của Flash đã làm cho nó phổ biến trên thị trường để cuối cùng làm việc theo cách của mình cho đại đa số các trình duyệt,

và đủ mạnh để được sử dụng để phát triển toàn bộ trang

Kết thúc cuộc chiến trình duyệt đầu tiên:

Trong năm 1998 Netscape công bố mã Netscape Communicator dưới một giấy phép mã nguồn mở, cho phép hàng ngàn lập trình tham gia vào việc cải thiện các phần mềm Tuy nhiên, họ đã quyết định bắt đầu từ đầu, trong đó hướng dẫn sự phát triển của trình duyệt mã nguồn mở và ổn định nhanh chóng

mở rộng sang một nền tảng ứng dụng hoàn chỉnh Các dự án Web tiêu chuẩn đã được hình thành và phát huy tuân thủ trình duyệt với HTML và CSS tiêu chuẩn bằng cách tạo ra Acid1, Acid2 và Acid3 kiểm tra

Năm 2000 là một năm quan trọng đối với Microsoft Internet Explorer đã được phát hành cho Mac, điều này là quan trọng vì nó là trình duyệt đầu tiên hỗ trợ đầy đủ HTML 4.01 và CSS 1, nâng cao thanh về việc tuân thủ các tiêu chuẩn Nó cũng là trình duyệt đầu tiên hỗ trợ đầy đủ các định dạng PNG định dạng hình ảnh Trong thời gian này Netscape đã được bán cho AOL và điều này được xem như là mất mát chính thức của Netscape so với Microsoft trong cuộc chiến trình duyệt

Giai đoạn 1988 – nay:

Kể từ đầu thế kỷ 21 các trang web đã trở nên ngày càng phổ biến trong cuộc sống Khi điều này xảy ra kéo theo các công nghệ của web cũng phát triển Cũng đã có những thay đổi đáng kể trong cách mọi người sử dụng và truy cập website, và điều này đã thay đổi như thế nào trong các trang web được thiết kế

Trình duyệt hiện đại: Kể từ khi kết thúc cuộc chiến trình duyệt đã có nhiều

trình duyệt mới đưa vào thị trường Nhiều trong số này là mã nguồn mở có nghĩa là họ có xu hướng phát triển nhanh hơn và hỗ trợ nhiều hơn các tiêu chuẩn mới Những tùy chọn mới được nhiều người xem tốt hơn so với Microsoft Internet Explorer Các trình duyệt phổ biến có thể kể tới như: Google Chrome, Mozilla Firefox, Apple Safari, Opera…

Tiêu chuẩn mới: W3C đã phát hành tiêu chuẩn mới cho HTML (HTML5)

và CSS (CSS3), cũng như phiên bản JavaScript API (từng là một tiêu chuẩn) Trong những năm trở lại đây, HTML5, CSS3, JavaScript đặc biệt là jQuery đã được sử dụng rộng rãi, giải quyết nhiều bài toán về ứng dụng nền web: trò chơi, phần mềm quản lý, web services

1.2 Xu hướng phát triển của thiết kế web

1.2.1 Mobile-first

Là một quy trình thực hiện thiết kế đi từ giao diện cho mobile đầu tiên sau

đó mới tới những thiết bị khác như ipad, laptop, desktop… Các trang web thiết

kế thân thiện với thiết bị di động cũng dần trở thành một xu hướng tất yếu, một tiêu chuẩn web không thể thiếu ngày nay

1.2.2 Thiết kế website - Responsive Web Design

Thiết kế responsive là website tự động biết được kích thước màn hình của thiết bị khách truy cập là như thế nào để hiển thị cho phù hợp trên màn hình đó

Vì vậy, thiết kế web responsive cũng trở nên rất phổ biến trong những năm gần đây nhờ vào sự gia tăng của việc sử dụng Internet trên thiết bị di động Thiết kế responsive được sử dụng phổ biến và an toàn vì nó đại diện cho một cách tương đối đơn giản và giá rẻ cho các doanh nghiệp để xây dựng một trang web điện thoại di động thân thiện với đầy đủ chức năng Nhưng thiết kế web đáp ứng không đi kèm với một số vấn đề nếu không được thực hiện đúng cách, yếu tố hướng tới người dùng luôn được chú trọng nhiều nhất

Hình 1 Thiết kế phù hợp với kích thước màn hình của thiết bị

1.2.3 Sử dụng các framework của CSS và JavaScript

Các framework như Bootstrap, jQuery đã tồn tại trong nhiều năm và tiếp tục chứng minh sự hữu ích trên các dự án cả cá nhân và chuyên nghiệp Việc sử dụng các framework này giúp cho lập trình viên dễ dàng hơn trong việc tạo ra các website và cả những ứng dụng nền web

Hiện nay, các framework của JavaScript như AngularJS, NodeJS đang tiến một bước dài trong sự phát triển của website cũng như ứng dụng nền web Việc tạo ra các ứng dụng nền web theo đó cũng phát triển nhanh chóng và trở thành một trong những hướng mũi nhọn của công nghệ phần mềm hiện đại

- Một ngôn ngữ đánh dấu bao gồm một tập các thẻ đánh dấu nội dung

- Tài liệu HTML được đánh dấu bằng các thẻ HTML

- Mỗi thẻ HTML dùng để mô tả một nội dung nào đó trên trang web

- HTML do Tim Berner-Lee giới thiệu năm 1990 và hiện đang được World Wide Web Consortium (W3C) tiếp tục duy trì

1.3.2 Tập tin HTML là gì?

- Tập tin HTML là một tập tin text có chứa các thẻ HTML (tập tin có phần

mở rộng là html hoặc htm)

- Tập tin HTML còn được gọi là một trang web

- Nếu cú pháp có bị sai thì trình duyệt vẫn không báo lỗi, nó chỉ hiển thị không như ý muốn

1.3.3 Thẻ trong HTML

- Thẻ HTML là những từ khoá được định nghĩa trước nằm trong cặp dấu < >

<tên_thẻ>nội dung</tên_thẻ>

1.3.4 Cấu trúc của một tài liệu HTML

Hình ảnh dưới đây mô tả cấu trúc cơ bản của một tài liệu HTML (một trang web)

Hình 2 Cấu trúc cơ bản 1 tài liệu

1.4 Căn bản về CSS/CSS3

1.4.1 CSS là gì?

CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử HTML (Ví dụ: chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường viền, ) dựa trên các cặp thuộc tính: giá trị thuộc tính

Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp

1.4.2 Lịch sử CSS

CSS được phát triển bởi Håkon Wium Lie vào 10/10/1994 và được duy trì bởi một nhóm CSS Working Group của W3C Nhóm này duy trì và công bố các tài liệu mới nhất về CSS

- Lịch sử các phiên bản của CSS:

CSS1 (Cascading Style Sheets 1) được công bố bởi W3C vào 12/1996 Phiên bản này miêu tả ngôn ngữ CSS cũng như mô hình định dạng đơn giản đầu tiên cho tất cả các thẻ HTML

CSS2 được công bố vào 5/1998, được phát triển dựa trên CSS1 Phiên bản này bổ sung sự hỗ trợ tới một số thiết bị (như máy in, …), các thiết bị về âm thanh, các bảng

CSS3 được công bố vào 6/1999 Tại phiên bản này, CSS được phân chia thành các module nhỏ và từng module chịu trách nhiệm cho một tính năng cụ thể nào đó

1.4.3 Lợi thế của CSS

CSS tiết kiệm thời gian và công sức: Nếu đã học qua về HTML, sẽ thấy một điều rằng: HTML không chứa bất cứ một thẻ nào để định dạng một trang web HTML được tạo để miêu tả nội dung của một trang web, còn CSS được dùng để định dạng chúng

Bắt đầu từ HTML 3.2, các thẻ như <font> và các thuộc tính như color được thêm vào Việc thiết kế các trang web lớn, với thông tin về font và color trải dài qua nhiều trang đơn, thì việc xác định font và thêm thuộc tính color vào các

trang này tốn rất nhiều thời gian và công sức

Để xử lý vấn đề này, World Wide Web Consortium (W3C) đã tạo ra CSS

Và từ đó với CSS lập trình viên tiết kiệm khá nhiều thời gian và công sức Thay

vì phải thêm font và color cho từng trang web một, giờ đây họ chỉ cần tạo một tệp css ở ngoài và sau đó thêm vào từng trang web Khi đó có thể thay đổi giao

diện của cả một website lớn chỉ trong một thời gian rất ngắn bằng cách tạo các

thay đổi trong tệp css

Sử dụng CSS giúp trang web tải nhanh hơn: Sử dụng CSS, không cần phải viết từng thuộc tính cho từng thẻ HTML mỗi khi cần đến Chỉ cần viết một định

dạng (style) CSS trong tệp css và áp dụng cho tất cả các thẻ đó Ít code hơn tức

là sẽ giúp trang web tải nhanh hơn

Sử dụng CSS giúp dễ dàng bảo trì và nâng cấp trang web hơn

CSS có nhiều thuộc tính hơn HTML Do đó, sử dụng CSS giúp tạo các trang web đẹp hơn nhiều khi so sánh với việc sử dụng các thẻ và thuộc tính HTML thuần

Sử dụng CSS là phù hợp với chuẩn quốc tế Hiện tại rất nhiều thuộc tính của HTML đã trở thành cũ và nhiều trình duyệt không còn hỗ trợ chúng nữa Do

đó để tương thích với các trình duyệt trong tương lai, nên sử dụng CSS

1.5 Căn bản về JavaScript

1.5.1 JavaScript là gì?

JavaScript (JS) là một ngôn ngữ lập trình phía người dùng: mã được thực

thi bởi trình duyệt của người dùng, sau khi trang web gửi về từ server

JavaScript được sử dụng để tạo ra các trang web có tính tương tác:

- Chèn nội dung động vào trang web

- Đáp ứng lại các thao tác của người dùng

- Lấy thông tin từ máy tính người sử dụng

- Thực hiện tính toán trên máy tính người sử dụng

- Tạo các ứng dụng, chức năng tương tác cho trang web

JavaScript là ngôn ngữ lập trình phổ biến bậc nhất thế giới, và là một trong

ba ngôn ngữ (HTML, CSS, JavaScript) mà tất cả lập trình viên web nhất định phải học

JavaScript được nhúng vào trang web để kết hợp với HTML/CSS

1.5.2 Các lợi thế của JavaScript

Sự tương tác server ít hơn: Có thể kiểm tra đầu vào (input) của 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 hoạt động í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ải lạ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: 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: có thể sử dụng JavaScript để bao gồm những mục như các thành phần Drag và Drop (DnD), các con trượt (Slider), cung cấp một Rich Interface (giao diện giàu tính năng) tới website khách truy cập

JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý

Một lần nữa, JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ mà cho phép xây dựng khả năng tương tác trong các trang HTML tĩnh

Kết luận

Qua chương 1, chúng tôi đã giới thiệu tổng quan về thiết kế web Chương 2 chúng tôi sẽ giới thiệu tổng quan về Laravel

CHƯƠNG 2: GIỚI THIỆU VÀ TỔNG QUAN VỀ LARAVEL

2.1 Giới thiệu về Laravel

Laravel là một PHP framework mã nguồn mở và miễn phí dùng để xây dựng web application, được phát triển bởi Taylor Otwell và được thiết kế dựa trên mô hình MVC (Model, View, Controller) toàn bộ source code được đặt trên github Những tính năng nổi bật của Laravel bao gồm cú pháp dễ hiểu – rõ ràng , một hệ thống đóng gói modular và quản lý gói phụ thuộc, nhiều cách khác nhau

để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

Theo kết qủa khảo sát của các Developer vào tháng 12 năm 2013, thì Laravel Framework đứng top 1 một trong những framework phổ biến nhất, tiếp sau là Phalcon, Symfony2, CodeIgniter và các framework khác Tháng 8 năm

2014, Laravel Framework được xem như là một dự án PHP phổ biến nhất trên Github

2.2 Luồng hoạt động của Laravel

Ta có sơ đồ sau:

Hình 3 Biểu đồ luồng hoạt động của laravel

Tóm tắt lại sơ đồ trên:

Khi người dùng gửi một yêu cầu lên hệ thống, hệ thống sẽ gửi về cho Controller xử lý các yêu cầu của người dùng Trong quá trình làm việc đó, Controller sẽ phải thông qua lớp Model nếu muốn làm việc với Cơ sở dữ liệu (DataBase) Sau khi xử lý xong, Model sẽ đưa dữ liệu về cho Controller, Controller tiếp tục đưa sang View và View hiển thị lại cho người dùng kết quả cuối cùng

2.3 Lịch sử phát triển của Laravel

Laravel được Taylor Otwell tạo ra như một giải pháp thay thế cho CodeIgniter, cung cấp nhiều tính năng quan trọng hơn như xác thực và phân quyền Điều này vẫn chưa chắc chắn nhưng có thể Taylor vốn là một NET developer khi bắt đầu có nhu cầu làm việc với PHP khoảng vào những năm

2010 - 2011, đã chọn CodeIgniter khi đó đang là một ngôi sao mới nổi, thậm chí lấn át cả Symfony gạo cội Và Taylor nhanh chóng nhận ra những điểm khiếm khuyết ở CodeIgniter, với tài năng và kiến thức xuất sắc về design-pattern của mình, Taylor quyết định tự mình tạo ra một framework sao cho thật đơn giản, dễ hiểu, hỗ trợ lập trình viên hiện thực ý tưởng một cách nhanh nhất bằng nhiều tính năng hỗ trợ như Eloquent ORM mạnh mẽ, xác thực đơn giản, phân trang hiệu quả, và hơn thế nữa

Hình 4 Biểu đồ phát triển của một số framework từ 2004 đến nay

Bản Laravel beta đầu tiên được phát hành vào ngày 9/6/2011, tiếp đó là Laravel 1 được phát hành trong cùng tháng Laravel 1 bao gồm các tính năng

như xác thực, bản địa hóa, model, view, session, định tuyến và các cơ cấu khác, nhưng vẫn còn thiếu controller, điều này làm nó chưa thật sự là một MVC framework đúng nghĩa

Laravel 2 được phát hành vào tháng 9 năm 2011, mang đến nhiều cài tiến

từ tác giả và cộng đồng Tính năng đáng kể bao gồm hỗ trợ controller, điều này

đã biến Laravel 2 thành một MVC framework hoàn chỉnh, hỗ trợ Inversion of Control (IoC), hệ thống template Blade Bên cạnh đó, có một nhược điểm là hỗ trợ cho các gói của nhà phát triển bên thứ 3 bị gỡ bỏ

Laravel 3 được phát hành vào tháng 2 năm 2012, với một tấn tính năng mới bao gồm giao diện dòng lệnh (CLI) tên “Artisan”, hỗ trợ nhiều hơn cho hệ thống quản trị cơ sở dữ liệu, chức năng ánh xạ cơ sở dữ liệu Migration, hỗ trợ “bắt sự kiện” trong ứng dụng, và hệ thống quản lý gói gọi là “Bundles” Lượng người dùng và sự phổ biến tăng trưởng mạnh kể từ phiên bản Laravel 3

Laravel 4, tên mã “Illuminate”, được phát hành vào tháng 5 năm 2013 Là

sự lột xác của Laravel framework, di chuyển và tái cấu trúc các gói hỗ trợ vào một tập được phân phối thông qua Composer, một chương trình quản lý gói thư viện phụ thuộc độc lập của PHP Bố trí mới như vậy giúp khả năng mở rộng của Laravel 4 tốt hơn nhiều so với các phiên bản trước Ra mắt lịch phát hành chính thức mỗi sáu tháng một phiên bản nâng cấp nhỏ các tính năng khác trong Laravel 4 bao gồm tạo và thêm dữ liệu mẫu (database seeding), hỗ trợ hàng đợi, các kiểu gửi mail, và hỗ trợ “xóa mềm” (soft-delete: record bị lọc khỏi các truy vấn từ Eloquent mà không thực sự xóa hẳn khỏi DB)

Laravel 5 được phát hành trong tháng 2 năm 2015, như một kết quả thay đổi đáng kể cho việc kết thúc vòng đời nâng cấp Laravel lên 4.3 Bên cạnh một loạt tính năng mới và các cải tiến như hiện tại, Laravel 5 cũng giới thiệu cấu trúc cây thư mục nội bộ cho phát triển ứng dụng mới Những tính năng mới của Laravel 5 bao gồm hộ trợ lập lịch định kỳ thực hiện nhiệm vụ thông qua một gói tên là “Scheduler”, một lớp trừu tượng gọi là “Flysystem” cho phép điều khiển việc lưu trữ từ xa đơn giản như lưu trữ trên máy local – dễ thấy nhất là mặc định

hỗ trợ dịch vụ Amazone S3, cải tiến quản lý assets thông qua “Elixir”, cũng như đơn giản hóa quản lý xác thực với các dịch vụ bên ngoài bằng gói “Socialite” Laravel 5.1 phát hành vào tháng 6 năm 2015, là bản phát hành đầu tiên nhận được hỗ trợ dài hạng (LTS) với một kết hoạch fix bug lên tới 2 năm vào hỗ trợ vá lỗi bảo mật lên tới 3 năm Các bản phát hành LTS của Laravel được lên

kế hoạch theo mỗi 2 năm

2.4 Sơ lƣợc các tính năng cơ bản của Laravel

Bundles: Ở laravel phiên bản 3.x, cung cấp một hệ thống đóng gói các

module, với rất nhiều tính năng đi kèm

Composer: Ở laravel phiên bản 4.x, được sử dụng như một công cụ quản

lý với tính năng như thêm các gói cài đặt, các chức năng PHP phụ trợ cho Laravel có trong kho Packagist

Eloquent ORM (object relation mapping): ánh xạ các đối tượng và quan

hệ cơ sở dữ liệu, cung cấp các phương thức nội bộ để thực thi đồng thời cũng bổ sung các tính năng hạn chế về mối quan hệ giữa các đối tượng cơ sở dữ liệu Eloquent ORM trình bày các bảng trong cơ sở dữ liệu dưới dạng các lớp, cung cấp thêm lựa chọn truy cập cơ sở dữ liệu trực tiếp mới mẻ hơn, chuyên nghiệp hơn

Application logic: Là một phần của phát triển ứng dụng, được sử dụng bởi

bộ điều khiển controllers

Routes: Định nghĩa mối quan hệ giữa các đường dẫn (url), các liên kết

(link) Khi một liên kết được tạo ra bằng cách sử dụng tên của routes, thì một định danh liên kết thống nhất sẽ được tạo ra bởi laravel

Restful Controller: cung cấp các tùy chọn để tách các logic phía sau các

request HTTP POST, GET

Class auto loading: cung cấp việc tải tự động các class trong PHP, mà

không cần include các class vào Tùy thuộc vào yêu cầu các class cần thiết sẽ được nạp vào, hạn chế các class không cần thiết

View: chưa các mã html, hiển thị dữ liệu được chỉ định bởi controller

Migrations: cung cấp một hệ thống kiểm soát các phiên bản lược đồ cơ sở

dữ liệu (database cheme), làm cho web ứng dụng có khả năng tương tác phù hợp những thay đổi logic, các đoạn mã code của ứng dụng và những thay đổi cần thiết trong việc bố trí cơ sở dữ liệu, triển khai nới lỏng và cập nhật các ứng dụng

Unit Testing: đóng một vai trò quan trọng trong Laravel, Unit testting chứa

rất nhiều các hệ thống unit testing, giúp phát hiện và ngăn chặn lỗi trong khuôn khổ nhất định Unit Testing có thể được chạy thông qua tiện ích command-line

Automatic pagination: Tính năng tự động phân trang được tích hợp

vào Laravel giúp đơn giản hóa các nhiệm vụ thực hiện phân trang so với các phương pháp thông thường

2.5 Các thành phần cơ bản của Laravel

MiddleWare

Xem hình sau:

Hình 5 Hoạt động của middleware

Giả sử ta có một vị khách tên là Route đến và muốn đi vào Controller, thì

vị khách Route này sẽ phải checkin ở lễ tân MiddleWare Nếu hợp lệ thì cho Route đi tiếp, còn không thì không cho phép

Vậy có thể hiểu MiddleWare nó sẽ bảo vệ các Controller của chúng ta Service Providers

Service Providers nằm trong config/app.php, khi bạn vào app.php này, rồi

kéo xuống sẽ thấy Providers là một mảng

Nó là nơi để bạn đăng ký tất cả mọi thứ, sau đó Service Providers sẽ cho Laravel biết tất cả về package của bạn, và Laravel sẽ biết các dependencies (phụ thuộc, tin tưởng) nào cần bind và cần giải quyết (resolve)

Nói chung Service Providers nghĩa là đăng ký tất cả mọi thứ như nghe sự

kiện, trung gian và các tuyến đường….nó là trung tâm để bạn cấu hình khi mà tạo một ứng dụng, một package riêng cho mình

Request và Response

Request và Response là gì, hãy nhìn vào hình sau:

Hình 6 Cách hoạt động của request và response

Khi mà gửi dữ liệu thông qua các đường dẫn trên route, thì cách đó chỉ có

tác dụng với phương thức GET, còn nếu khi cần sử dụng POST, các bạn sẽ

không đưa được dữ liệu lên đường dẫn đó được Chính vì vậy mà Laravel tạo ra một cái gọi là Request, Requet này sẽ quản lý các dữ liệu được gửi lên Route và truyền dữ liệu đó sang bên Controller Dữ liệu Request có thể là một mảng, một đối tượng hoặc là một JSON

Sau đó Controller sẽ xử lý Request và tạo ra một lớp Response rồi trả Response đó về máy tính cho chúng ta Response đảm nhiệm việc chuyển đổi giữa các kiểu dữ liệu Request và gửi về cho người dùng

View trong Laravel (2 khái niệm Blade Template và Elixir)

Blade Template là gì? Blade Template là một Template Engine có tác

dụng làm sạch đi các đoạn code PHP nằm trong View để tách biệt Hoàn Toàn giữ người làm Front-End (cắt CSS) và người code PHP Blade Template là một engine khá mạnh mẽ nên được Laravel chọn và tích hợp vào sẵn Nên tất cả các

file trong View đều sẽ có phần mở rộng là blade.php

Elixir là gì? Thì trong laravel 5 có tích hợp GULP( tự động hóa trong js)

và Core của mình khiến cho việc thao tác với js, css dễ dàng hơn nhiều

Elixir xuất hiện là để cung cấp một cách làm mới sáng sủa hơn cùng

với fluent API(là một cách để cấu hình các lớp domain) Nhằm thực hiện các

công việc cơ bản của GULP một cách đơn giản cho ứng dụng laravel

Có thể nói Elixir là một khu vực hỗ trợ rất nhiều các trình dịch css, js và các công cụ test thông dụng Thay vì phải xây dựng css và js của riêng bạn để cho hệ thống, thì bạn có thể sử dụng Elixir và chạy một cách dễ dàng

Database trong laravel: Database-Relationship-Eloquent

ORM-Validation-Collections

Schema: lớp này cung cấp cho chúng ta các hàm để Tạo bảng, chỉnh sửa

bảng, thêm bảng, xóa bảng… trong laravel

Migrate và Seed: quản lý cơ sở dữ liệu trong laravel, backup hay reset lại

cơ sở dữ liệu hay là tạo một bộ cơ sở dữ liệu mẫu để chúng ta làm việc với database một cách dễ dàng hơn

Query Builder: là các câu lệnh truy vấn đến cơ sở dữ liệu trong laravel Eloquent –Model: là phần Model trong mô hình MVC ở trên đầu

Relationship: liên kết dữ liệu giữa các bảng trong laravel (một nhiều)

(nhiều nhiều)

Cụ thể hơn:

Về Migrate mình có một ví dụ dễ hiểu sau:

Hình 7 Ví dụ cách hoạt động migrate

Giả sử bạn là người lập trình viên trong hình trên, ngày thứ 2 trong tuần bạn tạo ra một bảng A, thứ 3 tạo bảng B, thứ 4 Sửa bảng A và thứ 5 xóa Bảng B Đến thứ 5 sau khi xóa bảng B thì hệ thông của bạn báo lỗi, bạn sẽ làm thế nào, khi này, Laravel sẽ cung cấp cho bạn Migration, lớp Migration này sẽ lưu lại các công việc mà bạn đã làm, từ đây, bạn sẽ có thể quay lại ngày thứ 3 để tiếp tục làm việc với bảng B và tìm hiểu tại sao khi xóa lại bị lỗi

Migrate nó sẽ lưu lại thứ tự công việc mà bạn làm ở trong bảng Migrations

trong database, rất thuận lợi cho chúng ta làm việc nhóm khi mà hôm nay người này tạo bảng, ngày mai người khác tạo bảng khác hay là sửa xóa bảng của bạn Các file Migrate sẽ được lưu ở Database=>Migrate

Seed là gì? Là bộ dữ liệu mẫu, giúp chúng ta thêm dữ liệu mẫu vào bảng

đó

Seed được lưu ở Database=>Seeds

Dữ liệu mẫu mà ta thêm vào có thể thêm được nhiều bằng cách truyền vào với dạng mảng như sau:

Hình 8 Cách thêm dữ liệu mẫu bằng seeds

Query Builder: là các lệnh truy vấn trong laravel, nó có tác dụng thay thế

cho các câu lệnh truy vấn thông thường bằng các phương thức trong lớp DB Nếu chúng ta muốn lấy toàn bộ dữ liệu trong một bảng có tên là users, thì

trong PHP thuần ta sẽ làm như sau: Select * from products

Còn Trong laravel thì khác, cũng có yêu cầu như trên, nhưng câu lệnh sẽ là: DB::table(„users)->get();

Hoặc nếu chúng ta dùng model mà thông qua cotroller để lấy dữ liệu thì ta chỉ cần dùng lệnh: User::all();

Eloquent ORM –Model

Model trong laravel có thể lưu ở bất kỳ đâu để nạp tự động tùy theo file composer.js nhưng thông thường mặc định tất cả model sẽ được lưu trong thư

mục app/

Eloquent ORM cung cấp cho chúng ta cách thức chuyển đổi cơ sở dữ liệu

quan hệ sang mô hình hướng đối tượng

Eloquent ORM làm việc trên cơ sở Active Record Mỗi Bảng cơ sở dữ

liệu của chúng ta sẽ được “ánh xạ” thành một file Model tương ứng, và chính Model này chúng ta sẽ sử dụng nó để tương tác với bảng

Ví dụ ta tạo model User bằng lệnh như hình dưới:

Hình 9 Cách tạo một model bằng lệnh

Sau khi chạy dòng lệnh trên ta thu được một file tên là User.php trong thư mục app, bên trong file User.php ta có thể viết các câu lệnh truy vấn, các hàm

hoặc các ràng buộc relationship cho bảng User trong database

Relationship: là các kiểu quan hệ ràng buộc trong laravel: cụ thể ta có một

danh sách như sau

- Một-Một: liên kết từ bảng cha tới bảng con: câu lệnh: ->hasOne();

- Một-Một: liên kết từ bảng con tới bảng cha: câu lệnh: ->belongsTo();

- Một-Nhiều: câu lệnh: ->hasMany();

- Nhiều-Nhiều: câu lệnh: ->belongsToMany();

- Liên kết qua trung gian: ->hasManyThrough();

Validation trong laravel

Nếu ai từng học qua php đã sử dùng validation để đảm bảo người dùng có thể nhập thông tin đúng và chính xác, ví dụ trong form đăng nhập, email không được để trống, hoặc Email nhập không đúng định dạng

Trong Laravel cung cấp sẵn cho chúng ta một hệ thống Validation, ta có thể sử dụng một cách dễ dàng mà không cần phải code dài dòng nhiều

Collections trong Laravel