Chương 1 : Giới thiệu tổng quan về dự án Chương 2 : Cơ sở lý thuyết Chương 3 : Phân tích và thiết kế hệ thống Chương 4 : Xây dựng và triển khai hệ thông Chương 5 : Kết luận 18 CHƯƠNG 2: CƠ SỞ LÝ THUYET Trong chương này, em sẽ trình bày về các lý thuyết liên quan đến các ngôn ngữ sử dụng, các công nghệ được sử dụng và nhắc đến trong khóa luận. Tim hiểu về HTML/CSS/JavaScript Font End ( còn được biết đến như client-side) là tat cả những gi liên quan đến điều mà người dùng khi nhìn thấy mỗi khi truy cập vào một trang web, bao gồm phạm trù thiết kế và các ngôn ngữ như HTML, CSS hay JavaScript. Người dùng tương tác trực tiếp với nhiều khía cạnh thuộc Font End như : nhận biết vị trí đặt logo, màu sắc chủ đạo, tìm kiếm và đọc thông tin sử dụng các button và tính năng trên web. Mục đích cuối cùng của Front End là nham mang lại một giao diện bắt mắt, giúp người dùng dễ dàng thao tác và sử dụng.
Có nhiều ngôn ngữ và framework hỗ trợ xây dựng lên một giao diện đẹp mắt và dễ dàng cho người dùng sử dụng như : HTML, CSS và ngôn ngữ lập trình JavaScript, jQuery, Bootstrap, AngularJS, ReactJS. Tuy nhiên, trong dé tài lần này, em sử dung 3 ngôn ngữ : HTML,CSS và ngôn ngữ lập trình JavaScript. Đồng thời sử dụng các thư viện, framework như Bootstrap,JQuery. Đối với website: - HTML xây dựng nội dung, cau trúc co bản cho trang web.
- CSS được sử dụng để kiểm soát trình bày, định dạng và bố cục. - JavaScript được sử dụng đê kiêm soát hành vi của các yêu tô khác nhau. Tổng quan về HTML HTML là viết tắt của cụm tử tiếng anh “HyperText Markup Language”, tạm dịch: Ngôn ngữ đánh dấu siêu văn bản. Chức năng chính của HTML là xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.
HTML thường được dùng dé phân chia các đoạn văn, heading, links, blockquotes,. Cấu trúc cơ bản của một trang HTML có dạng như sau, thường sẽ có 3 phần : <!Doctype>: Phần khai báo chuẩn của html hay xhtml. <head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, J avaScript. 19 <body></body>: Phần chứa nội dung của trang web, nơi hién thị nội dung.
Ví dụ về 1 trang HTML: <link href="{{ asset( 'web/css/bootstrap.css") }}" rel=”stylesheet”> <link href="{{ asset(‘web/css/responsive-slider.css') }}" rel="stylesheet"> <link rel="stylesheet" href="{{ asset('web/css/animate.css") }}"> <link rel="stylesheet" href="{{ asset('web/css/font-awesome.css") }}"> <link href="{{ asset(‘web/css/style.css') }}" rel="stylesheet"> <link icon" href = "{{ asset('web/img/logo.png') }}" type = “image/x-icon"> src="https://oss.com/html5shiv/3.js" “https://oss.js" </head> <body> <header> <div ="container”> <d1v <nav “navbar navbar-default” role="navigation"> <div ="container-fluid"> <div ="navbar-header"> <div ="navbar-brand”> <a href=""> <h1>HONG TAM CLINIC </hi> </a> </div> </div> Hình 2. Ví dụ về HTML Và đặc biệt HTML không phải là ngôn ngữ lập trình. Do đó, HTML cũng không thể tạo ra các chức năng “động” được. Hiểu đơn giản, HTML giống như Microsoft Word, dùng đề bố cục và định dang trang web.
Nếu HTML cung cấp cấu trúc cơ bản của các trang web thì CSS và JavaScript sẽ cai tiên và sửa đôi website sinh động hon. Tổng quan về CSS CSS là viết tắt của cụm từ tiếng anh “Cascading Style Sheets”, tam dịch: ngôn ngữ tao phong cách cho trang web. 20 CSS sẽ giúp lập trình viên xác định styles và định nghĩa nhiều loại nội dung của website. CSS được tạo ra dé kết hợp với ngôn ngữ markup HTML để tạo phong cách cho trang web.
Ví dụ 1 đoạn code về CSS : Có 3 loại style CSS chính: Style CSS Internal : là style được tải lên mỗi khi trang web được refresh. Style CSS Inline: bạn có thé chỉnh sửa một yếu tố nào đó mà không cần truy cập trực tiếp vào file CSS. External style: bạn có thể tạo phong cách ở file khác áp dụng CSS vào trang bạn muốn. External style sẽ cải thiện thời gian tải trang rất nhiều.
Do đó, sử dụng CSS, bạn có thể: Tạo phong cách và định kiểu cho những yếu tô được viết đưới dang ngôn ngữ đánh dấu, như HTML. Tiết kiệm công sức của lập trình viên nhờ điều khiển định dạng của nhiều trang web 21 - Phan biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điêu khiên bô cục, màu sắc và font chữ. Vi dụ vê website trước và sau khi có CSS : < > CG A Khéng bảo mật | clinic-hongtam.com:3000 HONG TAM CLINIC Trang Chu Dich Vu Thong Tin tim mach Lién He Tra Cứu Hình 2. Website chỉ có HTML HONG TAM CLINIC Eu DỊCH VỤ THÔNG TIN TIM MẠCH LIÊN HỆ TRA CỨU puna 2.
Tống quan về JavaScript JavaScript là một ngôn ngữ lập trình giúp chuyển website từ trạng thái tĩnh sang động, tạo tương tác đê cải thiện hiệu suât máy chủ và nâng cao trải nghiệm người dùng. 22 JavaScript là ngôn ngữ được sử dụng rộng rãi khi kết hợp với HTML/CSS để thiết kế web động. Su dung JavaScript, bạn sẽ: - Dé dang bat đầu với các bước nhỏ, với thư viện ảnh, bố cục có tính thay đổi. nhờ sự linh hoạt của JavaScript.
- (C6 thé tạo ra các trò chơi, hoạt họa 2D hoặc 3D, ứng dụng cơ sở dtr liệu toàn điện,. - _ Tăng cường các hành vi và kiểm soát mặc định của trình duyệt. Vi dụ về 1 đoạn code chức năng JavaScipt dé hiển thị lược đồ : Chart ($ Hình 2. Hình ảnh mô ta một chức năng trong JavaCript 23 Ví dụ về lược đồ trước khi có J avaScipt : Phiếu Dang KY Theo Thóng Hình 2.
Hình ảnh về lược đồ trước khi có JavaScipt Phiếu Đăng Kú Theo Théng Hình 2. Hình ảnh thể hiện lược đồ sau khi có JavaScript 2. Tổng quan về framework Bootstrap Bootstrap là 1 framework HTML, CSS, va 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. 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. Ưu điểm khi sử dụng Boostrap : - Rất dé dé sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript chỉ can có kiến thức cơ bản về 3 cái đó là có thé sử dụng bootstrap tốt. - 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 rat nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bi cam tay.
- 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 chi hỗ trợ từ IE9 trở lên. Điều nay vô cùng dé hiểu vì IE8 không support HTMLS và CSS3. Có 2 cách dé sử dụng Boostrap : - Download Bootstrap packet từ getbootstrap.com - Thém Bootstrap từ CDN <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.
Mô ta CDN Boostrap 2. Téng quan vé framework JQuery JQuery là thư viện được viết từ JavaScript, giúp xây dựng các chức năng bằng JavaScipt dễ dàng, nhanh và giàu tính năng hơn. 25 JQuery được tích hợp nhiều module khác nhau. Từ module hiệu ứng cho đến module truy vấn selector.
JQuery được sử dụng đến 99% trên tổng số website trên thế giới. Các module phô biến của JQuery bao gồm: Ajax : xử ly Ajax. Atributes : Xử ly các thuộc tính của đối tượng HTML. Effect : xử lý hiệu ứng.
Event : xử lý sự kiện. Form : xử lý sự kiện liên quan tới form. DOM: xử ly Data Object Model. Selector : xử lý luồng lách giữa các đối tượng HTML.
Các tính năng quan trọng của JQuery : Gon nhẹ: jQuery là một thư viện khá gọn nhẹ — có kích cỡ khoảng 19KB (gzipped). Tương thích đa nền tang: Nó tự động sửa lỗi và chạy được trên mọi trình duyệt phổ biến như Chrome, Firefox, Safari, MS Edge, IE, Android và 1OS. Dễ dàng tạo Ajax: Nhờ thư viện jQuery, code được viết bởi Ajax có thể dễ dàng tương tác với server và cập nhật nội dung tự động mà không cần phải tải lại trang. Xử lý nhanh nhạy thao tác DOM: jQuery giúp lựa chọn các phần tử DOM để traverse (duyệt) một cách dễ dàng, và chỉnh sửa nội dung của chúng bằng cách sử dụng Selector mã nguồn mở, mà còn được gọi là Sizzle.
Don giản hóa việc tạo hiệu ứng: Giống với code snippet có hiệu ứng animation, nó phủ các dòng code và bạn chỉ việc thêm biến/nội dung vào thôi. Hỗ trợ tốt phương thức sự kiện HTML: Xử lý sự kiện — jQuery xử lý các sự kiện đa dạng mà không làm cho HTML code trở nên lộn xộn với các Event Handler. Có 2 cách dé sử dung JQuery : 26 - Tai thư viện từ trang http://jQuery.com/download và cai đặt. - Su dụng CDN <script type="text/javascript" src="https://ajax.com/ajax/libs/jQuery/2.
Mô ta CDN JQuery 2. Tim hiéu vé PHP/Laravel va MySQL Khi chúng ta truy cập vào một trang web hoặc ứng dụng và bat đầu thao tác,tương tac trên đó, thì tức là chúng ta đang đi sâu vào sản phẩm đó, và dé có thể giúp chúng ta tương tác được như thế nhờ vào máy chủ, cơ sở dữ liệu. và tất cả thành phần đó được gọi là Back End. Back End xử lý mọi nghiệp vu phức tạp, ẩn phía sau một trang web, ứng dụng, hệ thống.
giúp cho hệ thống hoạt động trơn tru. Backend thường bao gồm ba phần: máy chủ, ứng dung và cơ sở dt liệu. Bất cứ sản phẩm nào đều có hai nơi mã code hoạt động dé mọi thứ diễn ra trơn tru: phía máy khách và phía máy chủ. Có nhiều ngôn ngữ phía server và cơ sở đữ liệu như : - Ngôn ngữ dé lap trinh backend: C#, Java, Python, PHP.
- Framework di cùng: ASP.Net MVC, Spring, Django, Laravel. - Kién thức về Database SQL: MS SQL Server, MySQL. hoặc một sỐ Database NoSQL mới đây như: Neo4J, MongoDB. Tuy nhiên, đề tài lần này em sử dụng ngôn ngữ PHP, framework Laravel và hệ quản trị cơ sở dữ liệu MySQL.
Tổng quan về PHP PHP là viết tắt của Hypertext Preprocessor. PHP là một ngôn ngữ kịch bản mã nguồn mở, thông dịch và hướng đối tượng, được thực hiện ở phía máy chủ. Nó được sử dụng dé phát triển các ứng dụng web. PHP là một ngôn ngữ thông dịch, nghĩa là không cần biên dịch.
PHP là một ngôn ngữ kịch bản phía máy chủ. PHP là một ngôn ngữ hướng đối tượng. PHP là một ngôn ngữ kịch bản mã nguồn mở. PHP là ngôn ngữ đơn giản và dễ học.
27 5 đặc trưng quan trọng làm PHP trờ thành ngôn ngữ khá tiện lợi : - Don giản hóa. - Bao mật cao.