CHƯƠNG I: TỔNG QUAN Chương này trình bày sơ lược về các lý do, yêu cầu của đề tài và các biện pháp, phương hướng giải quyết các yêu cầu đã đặt ra. Và cuối cùng là phần giới thiệu nội dung từng chương trong quyển luận văn này. CHƯƠNG II: CƠ SỞ LÝ THUYẾT Chương này trình bày về các mô hình ứng dụng web, các kỹ thuật xây dựng web: HTML5, CSS3, MDL, PHP. CHƯƠNG III: NỘI DUNG VÀ KẾT QUẢ ĐẠT ĐƯỢC Chương này đi vào phần phát triển ứng dụng: đặc tả yêu cầu, thiết kế, kiểm thử, kế hoạch phát triển, kế hoạch đảm bảo chất lượng.
CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Nhận xét và kết quả đạt được hướng phát triển của đề tài. Bộ môn CNTT, Khoa CNTT & TT Trang 15 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ Formatted: Centered, Space After: 0 pt, Line spacing: Multiple 1.2 li CHƯƠNG II: CƠ SỞ LÝ THUYẾT Chương này sẽ trình bày sơ lược về mô hình ứng dụng web, ngôn ngữ đánh dấu siêu văn bản, kỹ thuật định dạng hiển thị trang web, tiếp theo là giới thiệu công nghệ Material Design Lite (MDL). Và cuối cùng là phần giới thiệu ngôn ngữ PHP. MÔ HÌNH ỨNG DỤNG WEB Hình II.1: Mô hình ứng dụng web ➢ Mô hình ứng dụng web là mô hình ứng dụng xây dựng dưới dạng Client/Server.
➢ Sơ lượct về vai trò và ý nghĩa các thành phần trên: ➢ Database: là một database server với hệ quản trị cơ sở dữ liệu (CSDL) MySQL làm nhiệm vụ lưu trữ thông tin và phục vụ các yêu cầu truy vấn cơ sở dữ liệu từ các thành phần khác nhau. Bộ môn CNTT, Khoa CNTT & TT Trang 16 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ ➢ Server: là web server có nhiệm vụ lắng nghe các yêu cầu từ trình duyệt (Cclient) và trả về số trang web tương ứng được yêu cầu. ➢ Client là một máy khách chạy một trình duyệt web (BBrowser) làm nhiệm vụ mang trung gian gửi các yêu cầu của người dùng đến web server sau đó nhận kết quả về và hiển thị kết quả cho người dùng. ➢ Internet là đường truyền thông tin giữa Client và Server, nếu đường truyền bị ngắt thì web không hoạt động.
Quy trình hoạt động của mô hình trên có thể tóm tắt như sau: ➢ Client thông qua web browser thực hiện yêu cầu nội dung của trang web gửi đến web server thông qua đường truyền Internet. Web server lắng nghe các yêu cầu từ phía Client, tìm kiếm trang web được yêu cầu, thực hiện các server script (PHP) truy vấn dữ liệu từ CSDL (database server) và trả về kết quả cho trình duyệt web dưới dạng các trang siêu văn bản (HTML) hay các dữ liệu với định dạng XML. NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN(HTML5) HTML - Hyper Text Markup Language: Ngôn ngữ đánh dấu siêu văn. Nó dùng để định dạng bố cục của trang web.
Là ngôn ngữ cơ sở để các trình duyệt phân tích, hiển thị nội dung của website. HTML dùng để viết các website tĩnh đưa lên mạng World Wide Web (WWW). HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản. Nóđược dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của đoạn text và được hiển thị một chương trình đặc biệt làcác thành phần của một trang web trên một trình Browser duyệt nào đó (Firefox, Chrome, Opera, …).
HTML5 là khởi đầu của kỷ nguyên mới. Mmang lại nhiều tiện ích thực sự và làm các nhà phát triển webpage thấy hứng thú với HTML5cho việc thiết kế và hiển thị các trang web. HTML5 với phiên bản đầu tiên được được W3C công bố vào năm 2008 nhưng mãi tới năm 2011 mới chính thức được ra mắt với một ánh hào nhoáng của công nghệ hiện đại. Tuy nhiên, trong thời điểm đó có rất nhiều trình duyệt chưa kịp thay đổi để hỗ trợ nó.
Đến ngày nay, hầu hết các trình duyệt phổ biến như Chrome, Firefox, Opera, …đều hỗ trợ HTML5. Điều đó đã tạo ra một cuộc cách mạng lớn cho công nghệ web. Cấu trúc HTML5 HTML5 có nhiều sự thay đổi lớn nhưng về mặt cấu trúc file HTML5 vẫn giữ nguyên cấu trúc cơ bản của HTML mà nó đã có trước. Dưới đây là cấu trúc của HTML5: Bộ môn CNTT, Khoa CNTT & TT Trang 17 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ Hình II.2: Mẫu cấu trúc HTML5 II.
Định dạng trang (page structure) Các phần tử cấu trúc mới trong HTML5: ➢ <acticle>: thẻ này định nghĩa một bài viết (tin tức, nội dung quảng cáo) hoặc bình luận của người dùng. Nó độc lập với content của website. ➢ <aside>: thẻ này đánh dấu nội dung bên cạnh của trang hiện tại. Ví dụ như một sidebar.
➢ <header> và <footer>: hai thẻ này giúp bạn người dùng không cần định nghĩa id cho tiêu đề và cuối trang. ➢ <nav>: thẻ này định nghĩa phần menu điều hướng cho website. ➢ <section>: thẻ này quan trọng, nó giúp người dùng xác định các thành phần khác nhau trong trang web. Bạn Lập trình viên có thể gộp chung các div cùng nội dung vào trong thẻ này để dễ dàng quản lý.
Bộ môn CNTT, Khoa CNTT & TT Trang 18 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ Hình II.3: Định dạng trang trong HTML5 Chú ý: Một điều quan trọng người dùng cần lưu ý là các thẻ mới của HTML5 không chỉ được sử dụng 1 lần, header và footer sẽ không chỉ đánh dấu sự bắt đầu và kết thúc của một trang mà có thể là một phần nội dung nào đó. Điều này có ý nghĩa, hai thẻ này có khả năng được sử dụng nhiều lần trong toàn bộ trang. Form Form có các thuộc tính được trình bày như sau: Thuộc tính required: Thuộc tính required là thuộc tính kiểu logic, nó hoạt động khi form được submit. Nếu phần tử trong trang web có sử dụng thuộc tính required mà để rỗng, sau khi submit thì trình duyệt sẽ báo một lỗi tổng quát hoặc các lỗi tương ứng do người dùng đặt ra.
Tùy vào mỗi trình duyệt mà sẽ có thông báo khác nhau. Cú pháp: Bộ môn CNTT, Khoa CNTT & TT Trang 19 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ Hình II.4: Lỗi nhập dữ liệu Thuộc tính placehoder Thuộc tính placehoder là thuộc tính cho phép hướng dẫn nhập dữ liệu trong khung nhập liệu. Nội dung sẽ ẩn đi nếu có sự kiện onfocus vào khung nhập liệu. Nếu sự kiện onBlur xảy ra mà nội dung trong khung bị rỗng thì hướng dẫn sẽ hiện trở lại.
Cú pháp: Hình II.5: Hiển thị hướng dẫn nhập Thuộc tính pattern Thuộc tính paratten là thuộc tính cung cấp một biểu thức chính quy và bắt buộc người dùng tuân theo quy tắc đó. Cú pháp: Hình II.6: Kiểm tra chuỗi nhập vào Thuộc tính multiple Bộ môn CNTT, Khoa CNTT & TT Trang 20 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ Thuộc tính mutiple cho phép nhập nhiều thuộc tính trên form. Cú pháp: Hình II.7: Chức năng chọn tệp Thuộc tính autocomplete Thuộc tính autocomplete cho phép lưu lại các giá trị đã nhập vào khung nhập liệu. Mỗi lần nhập giá trị vào khung, textbox sẽ hiện ra gợi ý các lần nhập trước đó.
Cú pháp: Thuộc tính autofocus Thuộc tính autofocus là thuộc tính luận lý với hai giá trị “true” hoặc “false”. Với giá trị “true” phần tử được gán thuộc tính này sẽ được tập trung vào nó. Với mỗi form chỉ có một phần tử được sử dụng thuộc tính autofocus. Input Các kiểu input được HTML5 hỗ trợ.
Kiểu Search Kiểu dữ liệu search (type=“search”) cung cấp một trường nhập liệu trên một dòng. Cú pháp: Kiểu email Kiểu dữ liệu email (type=“email”) chỉ chấp nhận khi đúng định dạng của một địa chỉ email. Cú pháp: Kiểu url Kiểu dữ liệu url (type=“url”) chỉ chấp nhận khi đúng định dạng của một địa chỉ một trang web. Cú pháp: Bộ môn CNTT, Khoa CNTT & TT Trang 21 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ Kiểu tel Kiểu dữ liệu tel (type=“tel”) với định dạng kiểu số điện thoại nhưng không giống như email va url.
Vì mỗi quốc gia có mỗi kiểu định dạng khác nhau. Cú pháp: Kiểu number Kiểu dữ liệu number (type=“number”) chỉ chấp nhận khi đúng định dạng nhập vào số. Có thể kết hợp thêm thuộc tính min, max, step. Cú pháp: Kiểu range Kiểu dữ liệu range (type=“range”) chỉ hiển thị nội dung thanh trượt và có các thuộc tính min, max, step.
Cú pháp: Kiểu color Kiểu dữ liệu color (type=“color”) cung cấp cho người dùng một bảng màu RGB và các giá trị thập lục phân của nó. Cú pháp: Kiểu date Có nhiều kiểu ngày giờ được HTML5 hỗ trợ: date, datetime, datetime- local, week, month. Tất cả kiểu ngày giờ này điều định dạng đúng chuẩn ISO 8601 standard. Âm thanh(audio) và video Bộ môn CNTT, Khoa CNTT & TT Trang 22 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ Khi HTML5 ra đời, kèm theo đó là sự xuất hiện của media element gồm 2 thẻ chính là <video> và <audio> đã đem lại sự trải nghiệm hoàn toàn mới cho lập trình viên và ứng người sử dụng web.
➢ Thẻ <video> để đánh dấu những nội dung video. Dùng để trình chiếu các file video với các định dạng được hỗ trợ: Mp4, Ogg, WebM, … ➢ Thẻ <audio> để đánh dấu những nội dung âm thanh. Dùng để chạy các định dạng âm thanh đượcnhư HTML5 hỗ trợ như mp3, ogg, wmw, … ➢ Thẻ <source>: để xác định tập tin đa phương tiện cùng với kiểu đa phương tiện và nhiều thuộc tính khác. Một phần tử video cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng được nhận ra đầu tiên.
Đường dẫn file video, audio cho thẻ <audio> và thẻ <video> Hình II.8: Hình ví dụ video Xem video trên bạn sẽ thấy, chúng ta chỉ xem video hoặc âm thanh, chứ không thể kiểm soát được như stop, pause, play, volume, … Chính vì thế, W3C đã phát triển một nhóm các thuộc tính mới dành riêng cho nhóm thẻ đa phương tiện này, giúp bạn có thể kiểm soát mọi thứ. ➢ Controls: Hiển thị bộ button điều khiển như play, pause, time bar, volume, fullscreen. ➢ Autoplay: Đặt chế độ tự động bắt đầu tải và phát video/audio. ➢ Muted: Tắt âm thanh khi phát video/audio.
➢ Poster: thiết lập hình ảnh xem trước cho video. Hình ảnh này sẽ xuất hiện khi video vừa được tải xong. vVà sẽ mất khi Click play để xem Bộ môn CNTT, Khoa CNTT & TT Trang 23 Luận văn tốt nghiệp GVHD: Chuyên ngành Công Nghệ Thông Tin _______________________________________________________________________________ video. Thuộc tính này nhận giá trị là đường dẫn đến hình ảnh.