THIẾT KẾ VÀ XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG

Định nghĩa một đoạn văn Định nghĩa văn bản định dạng sẵn Định nghĩa dấu nháy kép xung quoanh phần văn bản Định nghĩa một kịch bản phía máy khách Định nghĩa một phần trong một tài liệu Định nghĩa một danh sách drop-down Định nghĩa các nguồn đa phương tiện cho các phần tử đa phương tiên như và Định nghĩa một phần trong một tài liệu Định nghĩa văn bản in đậm, ý nghĩa nhấn mạnh độ quan trọng Định nghĩa định kiểu cho một tài liệu 10 Định nghĩa văn bản giống như chỉ số dưới Định nghĩa một bảng Nhóm các thên nội dung trong một bảng Định nghĩa một ô trong một bảng Định nghĩa một ô nhập dữ liệu văn bản có nhiều dòng Nhóm các nội dung tiêu đề trong một bảng Định nghĩa một tiêu đề cho tài liệu Định nghĩa một hàng trong một bảng

Định nghĩa một danh sách không có thứ tự Định nghĩa một video hoặc movie Định nghĩa một dấu ngắt dòng 1.2.2 Tìm hiểu CSS 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 (ví dụ như HTML). Chúng ta có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng…thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc…rất nhiều. 1.2.2.1. Tác dụng của CSS - Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung. - Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau. 11 1.3.2.2. Sử dụng CSS: Có 3 cách để sử dụng CSS. - "Inline CSS": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style. - "Internal CSS": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ rồi đặt vào trong phần header của Web (giữa và ) - "External CSS": Đặt các thuộc tính CSS vào một tệp tin riêng biệt (.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau: Ví dụ về nội dung tệp style.css: Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể nằm ngoài thẻ ): 1.2.2.5. Cú pháp Cú pháp cơ bản: Ví dụ minh họa về mã CSS: 12 1.2.2.4. CSS Selector CSS Selector dùng để xác định đoạn mã CSS tương ứng được bao trong phần từ “{“ đến “}” sẽ được áp dụng cho những thành phần nào trong trang Web. Như ví dụ ở đoạn mã trên, ta có thể thấy dạng CSS Selector đơn giản nhất là CSS Selector theo tag body. 1.2.3. Ngôn ngữ kịch bản Java script JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs). Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript. Cũng giống như C, JavaScript không có bộ xử lý xuấtnhập (inputoutput) riêng. Trong khi C sử dụng thư viện xuấtnhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuấtnhập. Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh... Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA. 13 Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều hành MacOS X phiên bản 10.4 cũng có sử dụng JavaScript. Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một ngôn ngữ đa nền khi có thể chạy trên cả môi trường máy chủ cũng như môi trường nhúng. Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần giống nhau. JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế. Sau đây chỉ là một số lợi ích của JavaScript: - Chúng ta không cần một compiler vì web browser có thể biên dịch nó bằng HTML; - Nó dễ học hơn các ngôn ngữ lập trình khác; - Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn; - Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới; - JS hoạt động trên nhiều trình duyệt, nền tảng; - Chúng ta có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database; - Nó giúp website tương tác tốt hơn với khách truy cập; - Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác. Mọi ngôn ngữ lập trình đều có các khuyết điểm. Một phần là vì ngôn ngữ đó khi phát triển đến một mức độ như JavaScript, nó cũng sẽ thu hút lượng lớn hacker, scammer, và những người có ác tâm luôn tìm kiếm những lỗ hổng và các lỗi bảo mật để lợi dụng nó. Một số khuyết điểm có thể kể đến là: - Dễ bị khai thác; - Có thể được dùng để thực thi mã độc trên máy tính của người dùng; - Nhiều khi không được hỗ trợ trên mọi trình duyệt; - JS code snippets lớn; - Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất. 14 1.2.3.1. Vị trí JavaScript trong HTML JavaScript trong thẻ hoặc : Chúng ta có thể đặt bất kỳ số lượng script nào trong một tài liệu HTML. Các tập lệnh có thể được đặt trong phần , hoặc trong phần của một trang HTML, hoặc trong cả hai. JavaScript trong thẻ : Trong ví dụ này, một hàm JavaScript được đặt trong phần của một trang HTML. Hàm được gọi (called) khi một nút được nhấp: JavaScript bên ngoài: Các tập lệnh cũng có thể được đặt trong các tệp tin bên ngoài: External file: myScript.js Các script bên ngoài khi cùng một mã được sử dụng trong nhiều trang web khác nhau. Các tệp JavaScript có đuôi tệp .js. Để sử dụng một script bên ngoài, hãy đặt tên tệp script vào thuộc tính src (source) của thẻ : 15 Chúng ta có thể đặt tham chiếu script bên ngoài trong thẻ hoặc theo ý muốn. Script sẽ hoạt động như thể nó nằm chính xác nơi có thẻ được đặt. 1.2.3.2. Các câu lệnh trong JavaScript Câu lệnh này nói với trình duyệt viết “Hello Dolly”. Bên trong một phần tử HTML với id = “content”: 1.2.3.3. Các chương trình JavaScript Hầu hết các chương trình JavaScript chứa nhiều câu lệnh JavaScript. Các câu lệnh được thực hiện, từng lệnh một, theo thứ tự như chúng được viết. Trong ví dụ x, y, và z được cho các giá trị, và cuối cùng z được hiển thị: Các chương trình JavaScript (và các câu lệnh JavaScript) thường được gọi là mã JavaScript. 1.2.3.4. Dấu chấm phẩy Các câu lệnh trong JavaScipt được phân tách nhau bằng dấu chấm phẩy. Thêm dấu chấm phẩy vào cuối mỗi câu lệnh thực thi: 16 1.2.2.2.5. Chiều dài dòng và dòng ngắt của JavaScript Để có khả năng đọc tốt nhất, các lập trình viên thường muốn tránh các dòng mã dài hơn 80 ký tự. Nếu một lệnh JavaScript không phù hợp trên một dòng, vị trí tốt nhất để phá vỡ nó là sau một toán tử. 1.2.3.6. Khối mã JavaScript Các câu lệnh JavaScript có thể được nhóm lại với nhau trong các khối mã, bên trong ngoặc nhọn {…}. Mục đích của các khối mã là để định nghĩa các câu lệnh phải được thực hiện với nhau. Một vị trí chúng ta sẽ tìm thấy các câu lệnh được nhóm lại với nhau theo khối, nằm trong các hàm JavaScript: 1.2.3.7. Từ khoá JavaScript Các câu lệnh JavaScript thường bắt đầu với một từ khoá để xác định hành động JavaScript được thực hiện. Dưới đây là danh sách một số từ khóa thường dùng: Bảng 1.2. Các từ khóa trong Javascript Từ khóa Mô tả break Chấm dứt một chuyển đổi hoặc một vòng lặp continue Nhảy ra khỏi vòng lặp và bắt đầu ở đầu debugger Ngừng thực hiện JavaScript, và các cuộc gọi (nếu có) chức năng gỡ lỗi do… while Thực hiện một khối các câu lệnh, và lặp lại khối, trong khi điều kiện là đúng for Đánh dấu một khối lệnh để được thực hiện, miễn là một điều kiện là đúng function Khai báo một hàm hoặc chức năng 17 if … else Đánh dấu một khối lệnh để được thực hiện, tùy thuộc vào điều kiện return Thoát một hàm hoặc một chức năng switch Đánh dấu một khối lệnh để được thực hiện, tùy thuộc vào các trường hợp khác nhau try…Catch Thực hiện xử lý lỗi đối với một khối các câu lệnh var Khai báo một biến 1.3.4. JQuery JQuery thư viện JavaScript đa trình duyệt được thiết kế để đơn giản hóa lập trình phía máy người dùng của HTML, phát hành vào tháng 1 năm 2006 tại BarCamp NYC bởi John Resig. Được sử dụng bởi hơn 52 trong 10.000 truy cập nhiều nhất các trang web, jQuery là thư viện JavaScript phổ biến nhất được sử dụng ngày nay. JQuery miễn phí, mã nguồn mở phần mềm, kép cấp phép theo MIT Giấy phép GNU General Public License, phiên bản 2 jQuery của được để làm cho nó dễ dàng hơn để di chuyển một tài liệu, chọn DOM các yếu tố, tạo ra hoạt hình s, xử lý Sự kiện, và phát triển Ajax ứng dụng. jQuery cũng cung cấp khả năng cho các nhà phát triển để tạo ra plug-in s trên đầu trang của thư viện JavaScript. Điều này cho phép các nhà phát triển để tạo ra trừu tượng hóa ở mức độ thấp tương tác và hình ảnh động, hiệu ứng tiên tiến và vật dụng cao cấp, chủ đề có thể. Cách tiếp cận mô- đun để thư viện jQuery cho phép tạo ra các công cụ mạnh mẽ và năng động web và các ứng dụng web. 1.3. Ngôn ngữ lập trình Back-end: 1.3.1. Một số ngôn ngữ lập trình Back-end Python Python là một ngôn ngữ lập trình bậc cao, hoàn toàn hướng đối tượng và strongly-type. Các tính từ thường được sử dụng để mô tả về Python điển hình bao gồm: vui, dễ sử dụng, và là một công cụ để học lập trình rất tốt — nhưng cuối cùng lại có rất ít ứng dụng web trong thế giới thực viết bằng Python. Tuy nhiên, nó chắc chắn là một ngôn ngữ rất tốt cho người mới học lập trình, đặc biệt nếu chúng ta là người đang hướng đến các dự án trên Linux hoặc cộng đồng mã nguồn mở. Chỉ 18 đừng mong chờ dùng nó để tạo ra các ứng dụng web thực sự, và xuất hiện như là một đối thủ cạnh tranh của cộng đồng Ruby. PHP Đây là một ngôn ngữ lập kịch bản dùng ở phía server(back-end) và sử dụng chủ yêu trong lập trình web. PHP là một ông vua không thể bàn cãi về ngôn ngữ kịch bản máy chủ (server-side) được sử dụng trên Internet ngày nay — nó chạy trên 75 của tất cả các máy chủ Web — và là sức mạnh phía sau của các nền tảng như WordPress, Wikipedia, và thậm chí là một phần của Facebook. Ngôn ngữ lập trình PHP Là một ngôn ngữ chạy trên máy chủ, mã của nó được xử lý trước khi được trả về trình duyệt của người dùng, vì thế tất cả chúng ta nhìn thấy chỉ là mã HTML và không có chút mã PHP nguyên thủy nào. PHP thường được sử dụng kết hợp với MySQL để truy xuất thông tin từ cơ sở dữ liệu và hiển thị thông tin tới người dùng. PHP là một ngôn ngữ đa năng và được xem như là chuẩn của hầu hết các máy chủ web — nếu chúng ta đã từng nghe về các thuật ngữ như MAMPWAMPLAMP, thì chữ P trong đó là viết tắt của PHP. Bên cạnh tính phổ biến, nó cũng dễ để sử dụng và cung cấp nhiều tính năng nâng cao cho các lập trình viên có kinh nghiệm. Javascript Javascript đang ngày càng phổ biến và có thứ hạng cao trong các ngôn ngữ lập trình phổ biến, đây là một ngôn ngữ kịch bản mạnh mẽ và linh hoạt. Phần lớn cú pháp giống như ngôn ngữ lập trình C. Hơn nữa, nó có khả năng tương thích trên 19 mọi trình duyệt web và có hơn 90 các website hiện nay đang sử dụng ngôn ngữ kịch bản này. Với sự ra đời của Node.js, nó đang là một công nghệ lập trình phía server và cho phép tương tác thời gian thực. Javascript là một bậc thầy về tương tác trên các trang web. Nó là một ngôn ngữ kịch bản chạy cục bộ trên trình ...
Trang 1

UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM

KHOA CÔNG NGHỆ THÔNG TIN - -

PHẠM THIÊN LÝ

THIẾT KẾ VÀ XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG

KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC

Quảng Nam, tháng 4 năm 2019

Trang 2

UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM

KHOA CÔNG NGHỆ THÔNG TIN - -

KHÓA LUẬN TỐT NGHIỆP

Tên đề tài:

THIẾT KẾ VÀ XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG

Sinh viên thực hiện

Trang 3

LỜI CÁM ƠN

Để có được điều kiện thực hiện khóa luận tốt nghiệp cũng như hoàn thành chương trình học 4 năm tại trường Đại học Quảng Nam, em đã nhận được những sự chỉ dạy tận tình với những kinh nghiệm quý báu từ quý thầy cô trong trường Đại học Quảng Nam nói chung và trong khoa Công nghệ thông tin nói riêng

Em xin được gửi lời cảm ơn chân thành nhất đến:

Ban giám hiệu cùng quý thầy cô trường Đai học Quảng Nam đã tạo cho em một môi trường học tập tích cực và vui vẻ

Quý thầy cô trong khoa công nghệ thông tin đã truyền dạy cho em những kiến thức chuyên môn quý báu sẽ là hành trang trong cuộc sống và công việc sau này

Thầy T.S Vũ Đức Quảng – Giảng viên khoa Công nghệ thông tin đã tận tình hướng dẫn, chỉ bảo, giúp đỡ em trong suốt quá trình thực hiện khóa luận

Gia đình và bạn bè đã luôn động viên và là chỗ dựa tinh thần vững chắc trong suốt thời gian qua, đã tạo cho em niềm tin, động lực để vượt qua những khó khăn trong quá trình thực hiện khóa luận.

Trang 4

Mục Lục

Phần 1 MỞ ĐẦU 1

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

1.2 Mục tiêu của đề tài 2

1.3 Đối tượng và phạm vi nghiên cứu 2

1.4 Phương pháp nghiên cứu: 2

1.5 Đóng góp của đề tài 2

1.6 Cấu trúc đề tài: Gồm 3 chương 2

Phần 2 NỘI DUNG NGHIÊN CỨU 4

Chương 1: CƠ SỞ LÝ THUYẾT 4

1.4 Tìm hiểu cơ sở dữ liệu Postgresql 25

1.4.1 Giới Thiệu postgress: 25

Trang 5

2.1.1.2 Giới thiệu về hệ thống mới 29

2.2.5.13 Biểu đồ tuần tự UC_Capnhatsp 46

2.2.5.14 Biểu đồ tuần tự UC_Capnhatsp 46

Trang 6

2.3.9 phieunhap(Phiếu Nhập) 53

2.4 Kết luận chương 2 53

Chương 3: DEMO CHƯƠNG TRÌNH 54

3.1 Giới thiệu Website quản lý nhà hàng Trầu Cau 54

3.2 Hướng dẫn cài đặt 55

3.2.1 Cài đặt trên máy Client 55

3.2.2 Cài đặt trên máy Server 57

3.2.2.1 Cài đặt NodeJS 57

3.2.2.2 Cài đặt Postgresql 59

3.3 Demo Website quản lý nhà hàng Trầu cau 64

3.3.1 Đối với quản lý 64

Trang 7

Hình 2.16 Biểu đồ trạng thái nhà cung cấp 47

Hình 2.17 Biểu đồ trạng thái hóa đơn 47

Hình 2.18 Biểu đồ trạng thái phiếu nhập 47

Hình 2.19 Biểu đồ trạng thái nhân viên 47

Trang 9

Danh Mục Bảng

Bảng 1.1.Các thẻ trong HTML 7

Bảng 1.2 Các từ khóa trong Javascript 16

Bảng 1.3 Kích thước dữ liệu trong postgresql 27

Trang 10

DANH MỤC CÁC KÝ HIỆU, CÁC TỪ VIẾT TẮT

Từ viết tắt/ Ký hiệu

Management

tài liệu HTML

Document Object Model

bản

HyperText Markup Language

Protocol/Internet Protocol

cao trải nghiệm người dùng

Single page Application

Interface

Trang 11

Phần 1 MỞ ĐẦU

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

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định sự thành công trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty, các cá nhân, doanh nghiệp Nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ Đặt biệt trong thời đại công nghệ hóa như hiện nay, khi mà internet đã đến từng nhà thì việc ứng dụng nó để phục vụ cho nhu cầu của chúng ta là thật sự cần thiết Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy gì quá phức tạp Với một vài thao tác đơn giản, một người bất kì có thể trở thành chủ của một website giới thiệu về bất cứ gì mình quan tâm, giới thiệu và quảng bá hình ảnh của công ty, giới thiệu về bản thân và gia đình, hay giúp quản lý một công việc nào đó

Đối với các chính phủ và các doanh nghiệp thì việc xây dựng các website riêng càng ngày càng trở nên cấp thiết Thông qua những website này, thông tin về họ cũng như các công văn, thông báo, quyết định của chính phủ hay các món, dịch vụ mới của công ty sẽ đến với những người quan tâm, đến với khách hàng của họ một cách nhanh chóng kịp thời hoặc quản lý hoạt động doanh nghiệp một cách nhiệp nhàng, tránh những phiền hà mà phương thức giao tiếp truyền thống thường gặp phải Để cạnh tranh với đối thủ của mình, các doanh nghiệp phải tận dụng mọi khía cạnh Một yếu tố nhỏ cũng đóng vai trò vô cùng lớn, mà việc sở hữu một website riêng là một yếu tố quan trọng trong đó Vì thế mà nhu cầu có một website cho doanh nghiệp là rất lớn

Với nhu cầu như vậy thì chúng ta lại cần phải có một trang web chuyên nghiệp để cung cấp dịch vụ, quản lý cho những khách hàng có nhu cầu Với lý do đó em chọn đề tài: “Thiết kế và xây dựng Website quản lý nhà hàng”

Trang 12

1.2 Mục tiêu của đề tài

Hiểu được cách lập trình, thiết kế một website quản lý

Tìm hiểu được các ngôn ngữ lập trình NODE JS, HTML, CSS và javascript Biết cách sử dụng thành thạo các ngôn ngữ lập trình để tạo một website

Từ đó tạo được một website quản lý cho nhà hàng đáp ứng được các nhu cầu quản lý của nhà hàng

1.3 Đối tượng và phạm vi nghiên cứu

- Các ngôn ngữ lập trình web: Ngôn ngữ HTML, Ngôn ngữ CSS, Ngôn ngữ Javascript, Cơ sỡ dữ liệu postgresql, Node Js và các framework liên quan

- Các hoạt động quản lý của nhà hàng Trầu Cau

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

- Phương pháp quan sát - Phương pháp phỏng vấn - Phương pháp thực nghiệm

1.5 Đóng góp của đề tài

Giúp mọi người hiểu rõ ngôn ngữ lập trình web hơn, cách lập trình web Qua đó có thể biết cách sử dụng chúng xây dựng một trang web riêng cho bản thân hoặc cho công việc của mình

Website là công cụ giúp nhà hàng Trầu Cau quản lý được các hoạt động của mình một cách dễ dàng, thuận tiện hơn Giúp giảm chi phí hoạt động, tăng thu nhập cho nhà hàng

1.6 Cấu trúc đề tài: Gồm 3 chương

Chương 1: CƠ SỞ LÝ THUYẾT - Nghiên cứu sự hình thành và phát triển của các ngôn ngữ lập trình: Nodejs, HTML, Javascript, sql, css Qua đó thấy được vai trò của các ngôn ngữ lập trình đó trong ngành lập trình web

Chương 2: XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG - Nghiên cứu hoạt động của nhà hàng Trầu Cau, kết hợp với yêu cầu của nhà hàng xây dựng web quản lý trực tuyến cho nhà hàng

Trang 13

Chương 3: GIỚI THIỆU, DEMO CHƯƠNG TRÌNH - Giới thiệu website quản lý nhà hàng, cách sử dụng và chạy demo website

Trang 14

Phần 2 NỘI DUNG NGHIÊN CỨU Chương 1: CƠ SỞ LÝ THUYẾT

1.1 Tìm hiểu lập trình Website

Xây dựng một website cần nhiều công đoạn khác nhau phối hợp với nhau mới có thể tạo nên một trang Website hoàn chỉnh Chẳng hạn như sắp xếp bố cục, chỉnh sửa hình ảnh, xử lý sự kiện… Nhưng nói chung thì lập trình web gồm 2 phần chính là Front-end và Back-end

1.1.1 Lập trình Front-end:

Front-end là gì, là bộ phận phần giao diện hiển thị ra thiết bị Clients Hay nói một cách khách Front-end chính là bộ mặt của một website Front-end thiết kế tạo ra phần giao diện cho người dùng tương tác với trang web, là ấn tượng đầu tiên của người dùng về trang web đó

Trước khi internet băng thông rộng (khoảng trước 2007) cùng với các thiết bị được phát triển mạnh mẽ như hiện nay Front-end thực sự đóng vai trò rất hạn chế trong việc hiển thị giao diện cho người dùng, lúc đó nhu cầu thực tế là làm sao cho một ứng dụng hiển thị là đủ Bên cạnh đó phải làm sao cho Performance (hiệu suất) đạt hiệu quả cao để người dùng không cảm thấy delay (giật) hay load (tải) chậm là đạt Điều này cũng dễ hiểu vì khi đó tốc độ internet là cực thấp khi mà đa số người dùng chỉ tiếp cận được với Internet dial-up, với tốc độ “rùa bò" của nó thì việc tải về văn bản thôi đã vất vả rồi chứ không nói đến hình ảnh hay animation

Sau một thời gian công nghệ dần hiện đại hơn với nhưng ADSL, DSL, VPN đó cũng là lúc nhu cầu về một Website thẩm mỹ được đặt ra với những hình ảnh tuyệt đẹp cùng với những hiệu ứng bắt mắt bắt đầu được chú trọng Lúc này vai trò của Front-end cũng bắt đầu được chú trọng Nhưng điều bất cập ở đây là sự không thông hiểu nhau giữa Designer và Front-end thường xuyên xảy ra từ thảo luận tới gay gắt mà nếu chúng ta từng ở một trong hai vị trí này sẽ thấu hiểu Vấn đề là ở chỗ một Designer thiết kế ra giao diện và anh ta muốn chỗ nút (button) đó khi hover sẽ đổi màu, hay khi open web lên sẽ có hàng chục hiệu ứng hiện ra mà không thể nào diễn đạt bằng hình ảnh được Điều anh ta cần làm là diễn giải ý

Trang 15

chỉ dừng lại ở đó khi mà HTML5 và CSS3 ra đời kéo theo sự bùng nổ công nghệ Resposive (tương thích trên mobile/tablet) làm cho việc thiết kế Layout nhiều hơn và Front-end đôi khi gặp bế tắc với những giao diện khó khi thực hiện Responsive

Cho đến khoảng những năm gần đây, khi công nghệ phát triển Internet trở nên nhanh hơn, những bộ vi xử lý mạnh mẽ hơn cũng với những công cụ hỗ trợ ngày càng nhiều thì Front-end dần khắc phục được những yếu điểm của mình dần trở thành một phần quan trọng không thể thiếu của một Website

Tất cả mọi thứ chúng ta đang nhìn thấy trên trang web ngày nay đều có thể được thực hiện bởi một lập trình viên Front-end Một designer tạo ra logo và đồ họa, một photographer cung cấp hình ảnh, một copywriter viết nội dung Nhưng một lập trình viên Front-end kết hợp tất cả những mảnh ghép đó lại và chuyển nó thành ngôn ngữ web, và tạo ra trải nghiệm mà chúng ta có khi duyệt qua mỗi trang Để lấy một ví dụ cụ thể, khi chúng ta cuộn con chuột lên xuống ở trang chủ của website Udacity Chúng ta có thể để ý thấy rằng chữ "U" biến mất rồi xuất hiện trở lại không? Đó là tác phẩm của một lập trình viên Front-end

Nói chung, một lập trình viên Front-end chịu trách nhiệm cho thiết kế nội thất của một ngôi nhà đã được xây dựng bởi một lập trình viên Back-end Các hương vị và phong cách trang trí được quyết định bởi chủ nhà

Xét về ngôn ngữ lập trình Front-end thì có 3 loại chính: HTML, CSS, và ngôn ngữ lập trình JavaScript Để lập trình Front-end tốt thì nhất thiết phải biết 3 ngôn ngữ này, kèm theo đó là một số framework thông dụng Bootstrap, Foundation, AngularJS và các thư viện như jQuery và LESS

1.1.2 Lập trình Back-end:

Front-end thật sự rất quan trọng nhưng điều gì giúp phần Front-end của một trang web có thể hoạt động được, dữ liệu để hiển thị trên trang web nằm ở đâu, xử lí như thế nào Đó là phần việc của back end Phần back end của một trang web bao gồm một máy chủ, một ứng dụng, và một cơ sở dữ liệu Một lập trình viên Back-end xây dựng và duy trì công nghệ mà sức mạnh của những thành phần đó, cho phép phần giao diện người dùng của trang web có thể tồn tại được

Back-end xử lý các công việc từ phía server bao gồm lấy dữ liệu từ người dùng tương tác với trang web đưa vào cơ sở dữ liệu và ngược lại Cụ thể là cần truy

Trang 16

xuất phần thông tin database, xử lý thông tin đó và sẽ ghi xuống database, gửi trả về cho client những thông tin sau khi xử lý xong

Back-end là một công việc thầm lặng mà không thể thiếu của một website Những công việc Back-end xử lý điều được thực hiện ngầm, nghĩa là khi một người sử dụng họ chỉ thấy được hình ảnh, thông tin, kết quả trả về mà không thể thấy quá trình tạo ra kết quả đó

Back-end thật sự rất quan trọng đối với website, một trang web không thể tồn tại nếu thiếu nó Ngay từ khi hình thành thì Back-end được chú trọng nhất trong trang web, hơn cả front-end Nếu Front-end là lớp võ bên ngoài thì Back-end chính là phần ruột bên trong

Để khiến cho máy chủ, ứng dụng, và cơ sở dữ liệu có thể giao tiếp được với nhau, các lập trình viên Back-end sử dụng các ngôn ngữ server-side như PHP, Ruby, Python, Java và Net để xây dựng một ứng dụng, và các công cụ như MySQL, Oracle, và SQL Server để tìm kiếm, lưu trữ, hoặc thay đổi dữ liệu và phục vụ trở lại tới người dùng trong phần front-end Các công việc tuyển dụng lập trình viên Back-end cũng thường yêu cầu kinh nghiệm về các framework PHP như Zend, Symfony, và CakePHP; có kinh nghiệm với các phần mềm quản lý phiên bản như SVN, CVS, hoặc Git; và kinh nghiệm với Linux trong việc phát triển và triển khai hệ thống

1.2 Ngôn ngữ lập trình Fontend:

1.2.1 Tìm hiểu về HTML5

HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản Nó 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 một đoạn text và được hiển thị trên một chương trình đặc biệc ta gọi là Browser Hiện nay có khá nhiều Browser như Chrome, Firefox, Cốc Cốc, Microsoft Edge, Tất cả Browser đều có điểm chung là hiển thị và giúp người dùng thao tác với website và nó đều có khả năng biên dịch những đoạn mã HTML, CSS và Javascript

Trang 17

Với HTML, chúng ta có thể:

- Điều khiển hình thức và nội dung của trang

- Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu html

- Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch

- Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX, Flash và các Java Applet vào tài liệu html

Xét về cấu trúc một html gồm 3 phần cơ bản:

- Phần HTML: Mọi tài liệu html phải bắt đầu bằng thẻ mở html <html> và kết thúc bằng thẻ đóng html </html> Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu html

- Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head> Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title> Tiêu đề là phần khá quan trọng Khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm

- Phần thân: phần này nằm sau phần tiêu đề Phầ̀n thân bao gồm văn bản, hình ảnh và các liên kết mà chúng ta muốn hiển thị trên trang web của mình Phần thân bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>

Ngoài ra nó còn nhiều cặp thẻ chức năng khác như: Bảng 1.1.Các thẻ trong HTML

<!–…–> Định nghĩa một bình luận, được dùng để comment phần code html

<!DOCTYPE> Xác định loại tài liệu

<a> Định nghĩa một siêu liên kết

<address> Định nghĩa thông tin liên lạc cho các tác giả / chủ sở hữu của một tài liệu

Trang 18

<area> Định nghĩa vùng bên trong của một ánh xạ hình ảnh <article> Định nghĩa một bài báo

<aside> Xác định nội dung nằm bên cạnh nội dung của trang <audio> Thẻ định nghĩa nội dung âm thanh

<caption> Định nghĩa một chú thích trong bảng <code> Định nghĩa một đoạn mã máy tính

<dialog> Định nghĩa một hộp thoại hoặc một cửa sổ <div> Định nghĩa một phần trong một tài liệu

<fieldset> Nhóm liên nhóm các phần tử liên quan trong form <footer> Định nghĩa phần footer cho một tài liệu hoặc một đoạn

<form> Định nghĩa một form HTML cho người dùng nhập vào <h1> to <h6> Định nghĩa tiêu đề HTML

<head> Xác định các thông tin về tài liệu

<header> Định nghĩa một tiêu đề cho một tài liệu hoặc phần <html> Định nghĩa gốc của một tài liệu HTML

<iframe> Định nghĩa một khung nội tuyến <img> Thẻ định nghĩa một hình ảnh

Trang 19

<input> Định nghĩa một control nhập dữ liệu

<keygen> Định nghĩa khoá mã hoá đi kèm với một trường trong form <label> Định nghĩa một nhãn cho một phần tử <input>

<legend> Định nghĩa một chú thích cho một phần tử <fieldset> <li> Định nghĩa một danh sách

<link> Xác định mối quan hệ giữa một tài liệu và một nguồn lực bên ngoài (thường được sử dụng để liên kết đến style sheets) <menu> Định nghĩa một danh sách/menu các lệnh

<meta> Định nghĩa siêu dữ liệu về một tài liệu HTML <nav> Định nghĩa liên kết điều hướng

<ol> Định nghĩa một danh sách đặt hàng

<option> Định nghĩa một lựa chọn trong danh sách drop-down <p> Định nghĩa một đoạn văn

<pre> Định nghĩa văn bản định dạng sẵn

<q> Định nghĩa dấu nháy kép xung quoanh phần văn bản <script> Định nghĩa một kịch bản phía máy khách

<section> Định nghĩa một phần trong một tài liệu <select> Định nghĩa một danh sách drop-down

<source> Định nghĩa các nguồn đa phương tiện cho các phần tử đa phương tiên như<video> và <audio>

<span> Định nghĩa một phần trong một tài liệu

<strong> Định nghĩa văn bản in đậm, ý nghĩa nhấn mạnh độ quan trọng

<style> Định nghĩa định kiểu cho một tài liệu

Trang 20

<sub> Định nghĩa văn bản giống như chỉ số dưới <table> Định nghĩa một bảng

<body> Nhóm các thên nội dung trong một bảng <td> Định nghĩa một ô trong một bảng

<textarea> Định nghĩa một ô nhập dữ liệu văn bản có nhiều dòng <thead> Nhóm các nội dung tiêu đề trong một bảng

<title> Định nghĩa một tiêu đề cho tài liệu <tr> Định nghĩa một hàng trong một bảng <ul> Định nghĩa một danh sách không có thứ tự <video> Định nghĩa một video hoặc movie

</br> Định nghĩa một dấu ngắt dòng 1.2.2 Tìm hiểu CSS

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 (ví dụ như HTML) Chúng ta có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng…thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc…rất nhiều

1.2.2.1 Tác dụng của CSS

- Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung

- Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau

Trang 21

1.3.2.2 Sử dụng CSS: Có 3 cách để sử dụng CSS

- "Inline CSS": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style

- "Internal CSS": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web (giữa <head> và </head>)

- "External CSS": Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau:

Ví dụ về nội dung tệp style.css:

Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể nằm ngoài thẻ <head>):

1.2.2.5 Cú pháp Cú pháp cơ bản:

Ví dụ minh họa về mã CSS:

Trang 22

1.2.2.4 CSS Selector

CSS Selector dùng để xác định đoạn mã CSS tương ứng được bao trong phần từ “{“ đến “}” sẽ được áp dụng cho những thành phần nào trong trang Web Như ví dụ ở đoạn mã trên, ta có thể thấy dạng CSS Selector đơn giản nhất là CSS Selector theo tag body

1.2.3 Ngôn ngữ kịch bản Java script

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs) Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript

Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output) riêng Trong khi C sử dụng thư viện xuất/nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập

Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA

Trang 23

Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader Điều khiển Dashboard trên hệ điều hành MacOS X phiên bản 10.4 cũng có sử dụng JavaScript

Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một ngôn ngữ đa nền khi có thể chạy trên cả môi trường máy chủ cũng như môi trường nhúng

Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần giống nhau

JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế Sau đây chỉ là một số lợi ích của JavaScript: - Chúng ta không cần một compiler vì web browser có thể biên dịch nó bằng HTML;

- Nó dễ học hơn các ngôn ngữ lập trình khác; - Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;

- Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới;

- JS hoạt động trên nhiều trình duyệt, nền tảng;

- Chúng ta có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;

- Nó giúp website tương tác tốt hơn với khách truy cập; - Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

Mọi ngôn ngữ lập trình đều có các khuyết điểm Một phần là vì ngôn ngữ đó khi phát triển đến một mức độ như JavaScript, nó cũng sẽ thu hút lượng lớn hacker, scammer, và những người có ác tâm luôn tìm kiếm những lỗ hổng và các lỗi bảo mật để lợi dụng nó Một số khuyết điểm có thể kể đến là:

- Dễ bị khai thác;

- Có thể được dùng để thực thi mã độc trên máy tính của người dùng; - Nhiều khi không được hỗ trợ trên mọi trình duyệt;

- JS code snippets lớn;

- Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất

Trang 24

1.2.3.1 Vị trí JavaScript trong HTML

JavaScript trong thẻ <head> hoặc <body>: Chúng ta có thể đặt bất kỳ số lượng script nào trong một tài liệu HTML Các tập lệnh có thể được đặt trong phần <body>, hoặc trong phần <head> của một trang HTML, hoặc trong cả hai

JavaScript trong thẻ <head>: Trong ví dụ này, một hàm JavaScript được đặt trong phần <head> của một trang HTML Hàm được gọi (called) khi một nút được nhấp:

JavaScript bên ngoài: Các tập lệnh cũng có thể được đặt trong các tệp tin bên ngoài:

External file: myScript.js

Các script bên ngoài khi cùng một mã được sử dụng trong nhiều trang web khác nhau

Các tệp JavaScript có đuôi tệp js

Để sử dụng một script bên ngoài, hãy đặt tên tệp script vào thuộc tính src (source) của thẻ <script>:

Trang 25

Chúng ta có thể đặt tham chiếu script bên ngoài trong thẻ <head> hoặc <body> theo ý muốn Script sẽ hoạt động như thể nó nằm chính xác nơi có thẻ <script> được đặt

1.2.3.2 Các câu lệnh trong JavaScript

Câu lệnh này nói với trình duyệt viết “Hello Dolly” Bên trong một phần tử HTML với id = “content”:

1.2.3.3 Các chương trình JavaScript

Hầu hết các chương trình JavaScript chứa nhiều câu lệnh JavaScript Các câu lệnh được thực hiện, từng lệnh một, theo thứ tự như chúng được viết

Trong ví dụ x, y, và z được cho các giá trị, và cuối cùng z được hiển thị:

Các chương trình JavaScript (và các câu lệnh JavaScript) thường được gọi là mã JavaScript

1.2.3.4 Dấu chấm phẩy

Các câu lệnh trong JavaScipt được phân tách nhau bằng dấu chấm phẩy Thêm dấu chấm phẩy vào cuối mỗi câu lệnh thực thi:

Trang 26

1.2.2.2.5 Chiều dài dòng và dòng ngắt của JavaScript

Để có khả năng đọc tốt nhất, các lập trình viên thường muốn tránh các dòng mã dài hơn 80 ký tự

Nếu một lệnh JavaScript không phù hợp trên một dòng, vị trí tốt nhất để phá vỡ nó là sau một toán tử

1.2.3.6 Khối mã JavaScript

Các câu lệnh JavaScript có thể được nhóm lại với nhau trong các khối mã, bên trong ngoặc nhọn {…} Mục đích của các khối mã là để định nghĩa các câu lệnh phải được thực hiện với nhau

Một vị trí chúng ta sẽ tìm thấy các câu lệnh được nhóm lại với nhau theo khối, nằm trong các hàm JavaScript:

1.2.3.7 Từ khoá JavaScript

Các câu lệnh JavaScript thường bắt đầu với một từ khoá để xác định hành động JavaScript được thực hiện Dưới đây là danh sách một số từ khóa thường dùng:

Bảng 1.2 Các từ khóa trong Javascript

break Chấm dứt một chuyển đổi hoặc một vòng lặp continue Nhảy ra khỏi vòng lặp và bắt đầu ở đầu

debugger Ngừng thực hiện JavaScript, và các cuộc gọi (nếu có) chức năng gỡ

Trang 27

if … else Đánh dấu một khối lệnh để được thực hiện, tùy thuộc vào điều kiện return Thoát một hàm hoặc một chức năng

switch Đánh dấu một khối lệnh để được thực hiện, tùy thuộc vào các trường hợp khác nhau

try…Catch Thực hiện xử lý lỗi đối với một khối các câu lệnh

1.3.4 JQuery

JQuery thư viện JavaScript đa trình duyệt được thiết kế để đơn giản hóa lập trình phía máy người dùng của HTML, phát hành vào tháng 1 năm 2006 tại BarCamp NYC bởi John Resig Được sử dụng bởi hơn 52% trong 10.000 truy cập nhiều nhất các trang web, jQuery là thư viện JavaScript phổ biến nhất được sử dụng ngày nay

JQuery miễn phí, mã nguồn mở phần mềm, kép cấp phép theo MIT Giấy phép GNU General Public License, phiên bản 2 jQuery của được để làm cho nó dễ dàng hơn để di chuyển một tài liệu, chọn DOM các yếu tố, tạo ra hoạt hình s, xử lý Sự kiện, và phát triển Ajax ứng dụng jQuery cũng cung cấp khả năng cho các nhà phát triển để tạo ra plug-in s trên đầu trang của thư viện JavaScript Điều này cho phép các nhà phát triển để tạo ra trừu tượng hóa ở mức độ thấp tương tác và hình ảnh động, hiệu ứng tiên tiến và vật dụng cao cấp, chủ đề có thể Cách tiếp cận mô-đun để thư viện jQuery cho phép tạo ra các công cụ mạnh mẽ và năng động web và các ứng dụng web

1.3 Ngôn ngữ lập trình Back-end:

1.3.1 Một số ngôn ngữ lập trình Back-end Python

Python là một ngôn ngữ lập trình bậc cao, hoàn toàn hướng đối tượng và strongly-type Các tính từ thường được sử dụng để mô tả về Python điển hình bao gồm: vui, dễ sử dụng, và là một công cụ để học lập trình rất tốt — nhưng cuối cùng lại có rất ít ứng dụng web trong thế giới thực viết bằng Python Tuy nhiên, nó chắc chắn là một ngôn ngữ rất tốt cho người mới học lập trình, đặc biệt nếu chúng ta là người đang hướng đến các dự án trên Linux hoặc cộng đồng mã nguồn mở Chỉ

Trang 28

đừng mong chờ dùng nó để tạo ra các ứng dụng web thực sự, và xuất hiện như là một đối thủ cạnh tranh của cộng đồng Ruby

PHP

Đây là một ngôn ngữ lập kịch bản dùng ở phía server(back-end) và sử dụng chủ yêu trong lập trình web PHP là một ông vua không thể bàn cãi về ngôn ngữ kịch bản máy chủ (server-side) được sử dụng trên Internet ngày nay — nó chạy trên 75% của tất cả các máy chủ Web — và là sức mạnh phía sau của các nền tảng như WordPress, Wikipedia, và thậm chí là một phần của Facebook

Ngôn ngữ lập trình PHP Là một ngôn ngữ chạy trên máy chủ, mã của nó được xử lý trước khi được trả về trình duyệt của người dùng, vì thế tất cả chúng ta nhìn thấy chỉ là mã HTML và không có chút mã PHP nguyên thủy nào PHP thường được sử dụng kết hợp với MySQL để truy xuất thông tin từ cơ sở dữ liệu và hiển thị thông tin tới người dùng

PHP là một ngôn ngữ đa năng và được xem như là chuẩn của hầu hết các máy chủ web — nếu chúng ta đã từng nghe về các thuật ngữ như MAMP/WAMP/LAMP, thì chữ P trong đó là viết tắt của PHP Bên cạnh tính phổ biến, nó cũng dễ để sử dụng và cung cấp nhiều tính năng nâng cao cho các lập trình viên có kinh nghiệm

Javascript

Javascript đang ngày càng phổ biến và có thứ hạng cao trong các ngôn ngữ lập trình phổ biến, đây là một ngôn ngữ kịch bản mạnh mẽ và linh hoạt Phần lớn cú

Trang 29

mọi trình duyệt web và có hơn 90% các website hiện nay đang sử dụng ngôn ngữ kịch bản này Với sự ra đời của Node.js, nó đang là một công nghệ lập trình phía server và cho phép tương tác thời gian thực

Javascript là một bậc thầy về tương tác trên các trang web Nó là một ngôn ngữ kịch bản chạy cục bộ trên trình duyệt của người dùng, cho phép các trang web phản hồi lại các tương tác người dùng như là khi click chuột lên một đối tượng và các sự kiện về thời gian Để có thể học hết mọi thứ trong JavaScript là một điều hầu như không tưởng — có thể nói rằng nếu có một tương tác nào đó trên một trang web, và nó không phải là Flash — thì nhiều khả năng đó là nhờ Javascript

Ruby

Ruby là một ngôn ngữ linh động, hướng đối tượng và là một ngôn ngữ kịch bản đa chức năng Được sử dụng phổ biến bởi nó là một web framework – Rais Ruby, và framework phát triển ứng dụng web của nó là Ruby On Rails, là nguồn sức mạnh cho một số trang web lớn như là Groupon, Shopify (một nền tảng thương mại điện tử), và được dùng để xây dựng front-end cho mạng xã hội Twitter Nó là một ngôn ngữ hoàn toàn hướng đối tượng và được thông dịch bởi server trước khi gửi mã HTML tới trình duyệt của người dùng — cũng giống như PHP (nhưng cũng có nhiều điểm hoàn toàn khác biệt) Tuy nhiên, nó có một số đặc điểm nổi trội đó là phát triển ứng dụng nhanh chóng, viết ít code bị lặp lại, và tốc độ thực thi khá nhanh

Không may là hầu hết các máy chủ web đều không hỗ trợ Ruby ở dạng mặc định, vì thế trừ khi chúng ta có khả năng cấu hình cho riêng mình một con server như chúng ta mong muốn, nếu không thì chúng ta cần sử dụng một nhà cung cấp dịch vụ hosting kiểu như Heroku

Perl

Perl trước đây được xem là một lực lượng chính trong lập trình web, nhưng gần đây hầu như đã chuyển sang các ứng dụng xử lý văn bản (text) Nó thì có tốc độ xử lý văn bản nhanh đến mức kinh ngạc, nhưng không được sử dụng nhiều trong

Trang 30

thế giới Internet hiện đại Tuy nhiên hầu như tất cả các hacker đều có một số thủ thuật được viết bởi Perl, vì thế nó cũng đáng giá để chúng ta để tâm nghiên cứu vào một lúc nào đó

Go

Go là một ngôn ngữ lập trình mới do Google thiết kế và phát triển Nó được kỳ vọng sẽ giúp ngành công nghiệp phần mềm khai thác nền tảng đa lõi của bộ vi xử lý và hoạt động đa nhiệm tốt hơn

Việc khai thác sức mạnh của các bộ xử lý đa lõi và phần cứng thế hệ mới đối với các ngôn ngữ hiện có được xem như là việc không thể được Bởi những giới hạn vốn có của các ngôn ngữ lập trình trên máy tính như C, C#, Java, Bấy lâu nay, các vấn đề xử lý đa lõi vẫn là chuyện của hệ điều hành

Google đưa ra ngôn ngữ Go như là một cách tiếp cận khác về vấn đề xử lý đa lõi Thay vì chỉ có hệ điều hành được phép cấp tài nguyên và xử lý, thì các phần mềm cũng có thể tương tác trực tiếp với nền tảng đa lõi giúp cho việc xử lý nhanh hơn.

1.4.2 Lập trình web bằng Node JS 1.4.2.1 Tìm hiểu Node Js

Node.js là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng mạng Node.js sử dụng Google V8 JavaScript engine để thực thi mã, và một tỷ lệ lớn các mô-đun cơ bản được viết bằng JavaScript Các ứng dụng node.js thì được viết bằng JavaScript

Node.js chứa một thư viện built-in cho phép các ứng dụng hoạt động như một Webserver mà không cần phần mềm như Nginx, Apache HTTP hoặc IIS

Node.js cung cấp kiến trúc hướng sự kiện (event-driven) và non-blocking I/O API, tối ưu hóa thông lượng của ứng dụng và có khả năng mở rộng cao

Mọi hàm trong Node.js là không đồng bộ (asynchronous) Do đó, các tác vụ đều được xử lý và thực thi ở chế độ nền (background processing)

Ưu điểm NodeJS

- Đặc điểm nổi bật của Node.js là nó nhận và xử lý nhiều kết nối chỉ với một single-thread Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy vấn giống PHP Ngoài ra, tận dụng ưu điểm

Trang 31

non-blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ như PHP

- JSON APIs Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON

- Ứng dụng trên 1 trang (Single page Application) Nếu chúng ta định viết 1 ứng dụng thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh Các ứng dụng chúng ta định viết không muốn nó tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt động nhanh để thể hiện sự chuyên nghiệp thì NodeJS sẽ là sự lựa chọn tốt

- Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động Tức là NodeJS có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất

- Streamming Data (Luồng dữ liệu) Các web thông thường gửi HTTP request và nhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác

- Ứng dụng Web thời gian thực Với sự ra đời của các ứng dụng di động & HTML5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter…

Nhược điểm NodeJS

- Ứng dụng lớn tốn tài nguyên, nếu chúng ta cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS (Lý do: NodeJS được viết bằng C++ & Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút) Trường hợp này chúng ta hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng hiệu suất tối đa!

- NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python NET …thì việc cuối cùng là phát triển các App Web Nhưng với NodeJS chúng ta có thể có 1 ứng dụng như mong đợi, điều đó là chắc chắn!

Trang 32

Cơ chế của Node js Application

Node js Application xử lý Model như sau: - Client gửi request đến Web Server

- Node js Web Service duy trì trong nội bộ một luồng giới hạn để cung cấp dịch vụ cho Client Request

- Node js Web Service nhận tất cả các request và đặt chúng vào một trong Queue Nó được gọi là một Event Queue

- Node js Web Service nội bộ có một thành phần được gọi là "Event Loop" - Event Loop chỉ sử dụng một luồng đơn để xử lý Model

- Event Loop kiểm tra tất cả các Request đặt trong Event Queue Nếu không có request nào thì chờ request đến vô thời hạn

- Nếu có request thì sẽ lấy một request từ Event Queue - Khởi động quá trình xử lý tiến trình từ client request

- Nếu Client Request không chứa nhiều Blocking I/O thì xử lý tất cả mọi thứ và chuẩn bị cho quá trình gửi lại phản hồi cho phía client

- Nếu Client Request chứa nhiều Blocking I/O như việc tương tác với cơ sở dữ liệu, tập tin hệ thống, dịch vụ mở rộng, thì nó sẽ thực hiện theo các phương pháp tiếp cận khác nhau

- Kiểm tra các luồng sẵn có từ nội bộ bên trong của request gửi lên - Chọn một luồng và chỉ định cho client request tương ứng với luồng đó

- Luồng đó phải có trách nhiệm với reuqest đó, xử lý nó, thực thi các hoạt động Blocking I/O, chuẩn bị các phản hồi và gửi lại cho Event Loop

- Event Loop gửi lại phản hồi tương ứng cho client Module Node.js

Module được xem như là thư viện JavaScript chứa tập các hàm chúng ta muốn thêm vào ứng dụng của chúng ta Node.js có 1 tập module tích hợp mà chúng ta có thể sử dụng mà không cần cài đặt gì thêm

Nhúng module: Để nhúng module, chúng ta có thể dùng hàm require() với tên của module

Trang 33

Trong ví dụ trên, chúng ta đã nhúng module HTTP để tạo các yêu cầu (request) đến server Ngoài ra, có nhiều module khác tích hợp trong Node.js

Các sự kiện trong Node.js

Node.js hỗ trợ các sự kiện trong các ứng dụng rất hoàn hảo Các hành động trong máy tính được gọi là 1 sự kiện (event), chẳng hạn như mở tập tin là 1 sự kiện Các đối tượng trong Node.js có thể phát sinh sự kiện, như đối tượng readStream phát sinh các sự kiện khi mở và đóng một tập tin

1.3.2.2 Framework Express

Express là một module hay nói theo cách thường được nhắc đến thì nó là một framework trong node.js Express framework cung cấp cho chúng ta đầy đủ tiện ích để có thể xây dựng một ứng dụng web hay một API

Và đây là các ưu điểm các chúng ta sẽ nhìn thấy được khi sử dụng express framework:

 Express hỗ trợ chúng ta phát triển ứng dụng theo mô hình MVC  Cho phép định nghĩa các middleware

 Định nghĩa rõ ràng các request methods trong route  Hỗ trợ mạnh về REST API…

Cài đặt Express

Do Express framework không được tích hợp sẵn vào trong node.js nên khi muốn sử dụng nó chúng ta phải tải nó về máy với sử dụng được Và để cải đặt nó chúng ta sử dụng cú pháp của npm

Sau khi cài đặt xong thì trong thư mục dự án của chúng ta sẽ có thêm một thư mục node_modules - đây là thư mục chứa các package download từ npm

Trang 34

Cấu trúc của express Root:

- App.js chứa các thông tin về cấu hình, khai báo, các định nghĩa để ứng dụng của chúng ta chạy ok

- Package.json chứa các package cho ứng dụng chạy Nếu chúng ta nào làm với PHP hoặc RoR rồi thì file này có chức năng tương tự như composer.json hoặc Gemfile

- Folder routes: chứa các route có trong ứng dụng - Folder view: chứa view/template cho ứng dụng

- Folder public chứa các file css, js, images, cho ứng dụng Router trong Express

Router là một Object nó là một instance riêng của middleware và routes Chính vì nó là một instance của middleware và route nên nó có các chức năng của cả hai Chúng ta có thể gọi nó là một mini-application

Các Application dùng ExpressJS làm core đều có phần Router được tích hợp sẵn trong đó

Router hoạt động như một middleware nên chúng ta có thể dùng nó như một arguments Hoặc dùng nó như một arguments cho route khác

Ví dụ:

Chúng ta cũng có thể sử dụng Router để chia route

Router.METHOD(): Router.METHOD() cung cấp cho chúng ta chức năng Routing trong ExpressJS Cụ thể METHOD() ở đây là các HTTP method mà chúng ta thường xuyên sử dụng Chẳng hạn GET, POST, PUT

Ví dụ:

Trang 35

1.4 Tìm hiểu cơ sở dữ liệu Postgresql

1.4.1 Giới Thiệu postgress:

PostgreSQL là một hệ quản trị cơ sở dữ liệu quan hệ và đối tượng dựa trên POSTGRES, bản 4.2, được khoa điện toán của đại học California tại Berkeley phát triển POSTGRES mở đường cho nhiều khái niệm quan trọng mà các hệ quản trị dữ liệu thương mại rất lâu sau mới có

PostgreSQL không chỉ là cơ sở dữ liệu quan hệ, nó là quan hệ hướng đối tượng Điều này cung cấp cho nó một vài lợi thế so với các cơ sở dữ liệu SQL mã nguồn mở khác như MySQL, MariaDB và Firebird

Một đặc điểm cơ bản của cơ sở dữ liệu quan hệ hướng đối tượng là hỗ trợ các đối tượng người dùng tự định nghĩa và các hành vi của chúng bao gồm các kiểu dữ liệu, các hàm, các thao tác, các tên miền và các chỉ mục Điều này làm cho PostgreSQL cực kỳ mạnh và linh hoạt Trong những cái khác, các cấu trúc dữ liệu phức tạp có thể được tạo ra, lưu trữ, và truy xuất Trong một vài ví dụ ở bên dưới chúng ta sẽ nhìn thấy các cấu trúc hỗn hợp lồng nhau cái mà các hệ quản trị cơ sở dữ liệu chuẩn (RDBMS) không hỗ trợ

Trang 36

- Hoạt động được trên nhiều hệ điều hành như: Windows, Linux, UNIX (AIX, BSD, HP-UX, SGI IRIX, Mac OS X, Solaris, Tru64)

- Lưu trữ (dạng nhị phân) các đối tượng có dữ liệu lớn như hình ảnh, âm thanh, hoặc video - Hỗ trợ các ngôn ngữ như C/C++, Java, Net, Perl, Python, Ruby, Tcl, ODBC

- Có sự thống nhất giữa những người phát triển (tái dụng những kỹ năng và các thư viện đã có)

- Có hầu hết các truy vấn SQL với các kiểu dữ liệu như INTEGER, NUMERIC, BOOLEAN, CHAR, VARCHAR, DATE, INTERVAL, và TIMESTAMP

- Tạo chỉ mục giúp quá trình truy vấn đạt hiệu quả cao hơn - Hỗ trợ các chức năng tìm kiếm tổng quát hóa có thể “gắn” các chỉ mục vào giúp quá trình tìm kiếm được thực hiện trên phạm vi rộng hơn như: compound, unique, partial, and functional indexes

- Có thể tạo mới kiểu dữ liệu, các hàm, các thủ tục (procedure)…

- Hỗ trợ đa người dùng: dữ liệu không gian có xu hướng là các dữ liệu tham chiếu, tức là được chia sẻ bởi nhiều người dùng Lưu trữ dữ liệu trong hệ quản trị cơ sở dữ liệu sẽ cung cấp những lợi ích như: truy cập từ xa thông qua các chuẩn giao tiếp như: JDBC, ODBC, PERL/DBI , làm tăng tính bảo mật cho dữ liệu như: một số người dùng có toàn quyền tuy nhiên một số người dùng chỉ có thể đọc hay không được nhìn thấy

1.4.3 Nhược điểm:

- Cộng đồng người dùng tương đối ít - Chậm hơn so với MySQL

- Không có tham số mặc định trong PL/PGSQLHệ cơ sỡ dữ liệu PostgreSQL

1.4.4 Các kiểu dữ liệu và cấu trúc:

Có một danh sách các kiểu dữ liệu PostgreSQL hỗ trợ Bên cạnh kiểu số, floating-point, chuỗi, boolean, và các kiểu dữ liệu mà chúng ta mong muốn (và nhiều tùy chọn khác), PostgreSQL tự hào với uuid, tiền tệ, liệt kê (enumerated), hình học (geometric), nhị phân (binary), địa chỉ mạng, chuỗi bit, tìm kiếm văn bản, xml, json, mảng, hỗn hợp, và các loại khoảng (range types), cũng như một vài kiểu

Trang 37

MariaDB và Firebird mỗi cái có một vài loại ở mức độ khác nhau, nhưng PostgreSQL hỗ trợ tất cả

Bảng 1.3 Kích thước dữ liệu trong postgresql

Kích thước tối đa của cơ sở dữ liệu Không giới hạn

Kích thước tối đa của trường (field) 1 GB

Số lượng index tối đa trên mỗi bảng Không giới hạn

Hãy so sánh, MySQL và MariaDB được biết đến với giới hạn kích thước dòng là 65,535 byte Firebird cũng chỉ có kích thước tối đa cho một dòng là 64KB Thông thường kích thước dữ liệu được giới hạn bởi giới hạn kích thước file của hệ điều hành Bởi vì PostgreSQL có thể lưu trữ bảng dữ liệu trong nhiều file nhỏ hơn, nên nó có thể khắc phục được hạn chế này - mặc dù, điều quan trọng cần lưu ý là quá nhiều file có thể tác động tiêu cực đến hiệu năng MySQL và MariaDB cũng làm được, tuy nhiên chúng hỗ trợ nhiều cột trên một bảng (lên tới 4,096 phụ thuộc vào kiểu dữ liệu) và kích thước mỗi bảng lớn hơn PostgreSQL, nhưng rất hiếm các điều kiện mà chúng ta cần thực hiện vượt quá các giới hạn của PostgreSQL

Tóm lại, PostgreSQL có rất nhiều khả năng Được xây dựng bằng cách sử dụng mô hình quan hệ hướng đối tượng, nó hỗ trợ các cấu trúc phức tạp và rất nhiều các kiểu dữ liệu được xây dựng sẵn và do người dùng tự định nghĩa Nó cung cấp khả năng mở rộng dữ liệu và đáng tin cậy cho tính toàn vẹn dữ liệu Chúng ta có thể không cần tất cả các tính năng tiên tiến chúng ta đã đề cập cho việc lưu trữ dữ liệu, nhưng khi nhu cầu dữ liệu phát triển nhanh, chắc chắn lợi ích rõ ràng đó là tất cả đã ở trong tầm tay của chúng ta

Trang 38

1.5 Kết luận chương 1

Một trang web để hoạt động tốt thì được tạo từ hai phần chính: backend và fontend Mỗi phần điều đóng vai trò quan trong trong cấu trúc hình thành của một trang web Nếu fontend xây dựng giao diện người dùng thì backend đảm nhận mọi công việc xử lý phía máy chủ

Với mỗi phần ta lại có rất nhiều ngôn ngữ để lập trình khác nhau Nắm vững những kiến thức về chúng là yêu cầu để xây dựng một trang web So với một số ngôn ngữ lập trình khác, Javascript được đánh giá cao bởi khả năng đáp úng nhu cầu tốt, dễ sử dung Nó đang chứng minh là một ngôn ngữ đáng để theo đuổi

Nắm vững kiến thức là giai đoạn đầu cần để tạo nên một trang web Để tạo nên một trang web thật sự, có thể sử dụng đáp ứng nhu cầu của mình thì còn phải qua nhiều bước chẳng hạn: Tìm hiểu yêu cầu, xác định những tác nhân, xây dựng cơ sỡ dữ liệu, Đó là giai đoạn phân tích, thiết kế, một giai đoạn đón vai trò cực kì quan trọng trong việc tạo ra món mang tính ứng dụng được vào thực tế

Trang 39

Chương 2: XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG

2.1 Bài toán thực tế

2.1.1 Khảo sát thực tế

Nhà hàng Trầu Cau có quy mô phục vụ khá cao, số lượng nhân viên tương đối nhiều, khối lượng công việc cần quản lý nhiều Vì vậy việc quản lý được các nhân viên hay quản lý được thực trạng kinh doanh của nhà hàng gây không ít khó khăn cho quản lý và chủ nhà hàng

Hiện nay, nhà hàng đã sử dụng phần mềm để trợ giúp trong công việc quản lý được dễ dàng hơn Tuy nhiên, phần mềm công ty hiện vẫn tồn tại nhiều khuyết điểm chưa thật sự giúp đỡ nhiều cho công tác quản lý Phần mềm này chủ yếu dùng dể lưu trữ dữ liệu thu chi và quản lý nhân viên, trong khi các chức năng khác chưa được chú ý đến

Nhân viên thu ngân sẽ quản lý doanh thu và chi tiêu theo chu kì, sau đó tổng hợp báo cáo cho cấp trên Nhân viên kho giám sát các nguyên liệu trong kho, kiểm tra tình trạng và số lượng của chúng Nhân viên bán hàng hướng dãn và thực hiện đặt chõ cho khách khi có yêu cầu

2.1.1.1 Giới thiệu về hệ thống cũ

Ưu điểm: Đơn giản, dễ sử dụng, giao diện thân thiện với người dùng Chức năng nhập hoá đơn bàn hàng linh hoạt giúp ích nhiều cho công tác bán hàng Hỗ trợ tốt người dùng trong việc kiểm tra và thống kê hàng hoá, tài sản Chạy tốt trên nền hệ điều hành Windows XP Không yêu cầu cao về phần cứng máy tính

Nhược điểm: Giao diện chương trình không mang tính mỹ thuật cao Chương trình chưa quan tâm nhiều lắm đến vấn đề bảo mật cho ứng dụng Chưa đáp ứng được các yêu cầu bán hàng, giao tiếp với khách hàng,…

2.1.1.2 Giới thiệu về hệ thống mới

Mục đích thiết kế phần mềm quản lý nhà hàng Phát triển từ ý tưởng về nghiệp vụ quản lý nhà hàng, niềm đam mê ứng dụng công nghệ cao vào cuộc sống, em xây dựng phần mềm quản lý nhà hàng nhằm giúp người quản lý đơn giản hơn trong công tác quản lý nhà hàng, minh bạch các hoạt động của nhà hàng từ đó kiểm soát được mọi hoạt động kinh doanh và thúc đẩy doanh thu của nhà hàng

Trang 40

Xây dựng được hệ thống quản lí nhà hàng ăn uống với đầy đủ các chức năng quản lí như: nhập, xuất hàng hoá trong kho, quản lí bàn ăn (thêm, ghép, rời bàn ăn), từng nhân viên bàn, quản lí công nợ khách hàng, quản lí thẻ ưu đãi cho khách hàng, các khoản chiết khấu, hoa hồng Phần mềm phải có chức năng tạo các báo cáo về hàng hoá nhập/xuất/tồn kho, các báo cáo về công nợ, báo cáo về thu chi tiền mặt, thống kê doanh thu theo từng nhân viên, từng khu vực bàn ăn (nếu cửa hàng có nhiều khu vực bàn ăn khác nhau), các báo cáo kết quả kinh doanh

2.1.1.3 Phạm vi dự án

Nhiều máy có kết nối mạng, hệ thống bán online 2.1.2 Tìm hiểu môi trường hệ thống

Quản lý

Nhân viên thu ngân

Nhân viên kho

Khách hàng

- Quản lý doanh thu - Quản lý nhân viên

- Quản lý kho

- Quản lý nhập - Lập phiếu nhập - Thống kê hàng tồn

- Quản lý doanh thu - Quản lý chi tiêu - Thống kê thu chi

- Đặt chỗ, đặt món - Hủy đặt trước - Thanh toán