CHƯƠNG 1 : CƠ SỞ LÝ THUYẾT
1.2. Các thành phần công nghệ để xây dựng một website
Đến thời điểm hiện tại có rất nhiều cơng nghệ xây dựng một Website tuy nhiên tất cả các công nghệ đều phải đảm bảo được các yêu cầu xoay quanh 3 mục tiêu chính sau, đảm bảo chúng hoạt động hiệu quả.
Thứ nhất là Giao diện người dùng cuối (End Users): Phải đảm bảo được tương tác
giữa người dùng và hệ thống là ổn định, cả giao diện và trải nghiệm và tối ưu nhất có thể. Ví dụ như màu sắc, phơng chữ, vị trí các nút, độ to của ảnh,....
Thứ hai là Xử lý nghiệp vụ: Website phải đảm bảo thực hiện đúng và đủ các chức
năng theo đúng thiết kế ban đầu, luồng thông tin, các thông báo, biểu mẫu, đường dây nóng,.
Thứ ba là: Truy vấn và cập nhật được CƠ SỞ DỮ LIỆU theo quy trình nghiệp vụ.
Ví dụ khi người dùng điền một biểu mẫu trực tuyến dữ liệu phải đổ về được quản trị,
hay khi thay đổi cập nhật một thơng tin gì mới trong quản trị thơng tin đó phải được hiển
thị đúng trên Website.
“Nói đến giao diện người dùng có ba cơng nghệ phổ biến trên có mặt ở hầu hết các Website hiện nay- ba chân kiềng mà bất kì lập trình viên giao diện Website nào cũng biết: HTML, CSS và JavaScript.”
1.2.1. Front-end
Dưới đây là những thông tin cơ bản nhất về ba công nghệ giao diện Web cơ bản.
HTML
HTML là viết tắt của HyperText Markup Language tiếng Việt là Ngôn ngữ đánh
dấu siêu văn bản. HTML được sử dụng như ngôn ngữ mô tả chuẩn cho các trang web.
“HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ, cũng là người phát minh ra World Wide Web và là chủ tịch của World Wide Web Consortium (W3C - doanh nghiệp thiết lập nên các tiêu chuẩn trên môi trường Internet)”.
“HTML giống như Microsoft Word cho trình duyệt của bạn biết là cần phải thể hiện các thông tin trên Website như thế nào, ví dụ như bố cục trang web, định dạng ký tự, hình ảnh, bảng biểu, ..”
Tóm tắt lược sử của HTML
- HTML 2.0 (năm 1995): bổ sung thêm một số thành phần trên form, table.
- HTML 3.2 (năm 1997): bỏ cơng thức tốn học cũng như thêm các thẻ blink, marquee.
- HTML 4.0 vào năm 1997.
- HTML 5: ra mắt vào 2014 có khả năng hỗ trợ audio và video.
Ưu điểm:
- Có nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng rộng rãi.
- Sử dụng được hầu hết trên các trình duyệt.
- Dễ học.
- Mã nguồn mở .
- Miễn phí.
- Dễ dàng tích hợp với các ngơn ngữ backend như php và nodejs.
Khuyết điểm:
- “Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng Java-Script hoặc ngôn ngữ backend bên thứ 3 như PHP.”
- Chậm hỗ trợ tính năng mới trên một số trình duyệt.
CSS
“CSS- viết tắt của Cascading Style Sheets là một ngơn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML. Tệp CSS có đi .css. CSS3 là phiên bản thứ 3
và
cũng là mới nhất của CSS. CSS được đề xuất lần đầu tiên vào ngày 10/10/1994 bởi Hảkon Wium Lie. Ke từ đó, các phiên bản của CSS dần được hình thành qua nhiều giai đoạn.”
Phiên bản CSS 2: tháng 5 năm 1998
Bản nháp CSS 3 sớm nhất: tháng 6 năm 1999
“CSS mô tả các phần tử HTML hiển thị như thế nào trên các loại thiết bị khác nhau. CSS giúp tiết kiệm rất nhiều code khi có thể quy định bố cục của nhiều trang web
Cú pháp câu lệnh chung của CSS như sau:
Hình 1.4. Cú pháp chung câu lệnh CSS
- Selector trỏ đến thành phần HTML sẽ được style
- Khối Declaration có thể gồm 1 hoặc nhiều declaration
- Mỗi Declaration bao gồm 1 thuộc tính CSS (Property) và 1 giá trị của thuộc tính
(value}
“CSS giúp định nghĩa các định dạng của nội dung mà sau đó chúng ta áp dụng định dạng đó vào bất kỳ nội dung nào chúng ta muốn. Điều đó khiến việc định dạng nội dung Website trở nên linh hoạt, đa dạng”.
Hình 1. 5. HTML và CSS trong giao diện Website
Ưu điểm:
“CSS kết hợp với HTML tạo ra website có nhiều sức mạnh hơn và giao diện đẹp hơn. CSS, giúp sắp xếp các các thành phần khác nhau một cách khoa học hơn, logic hơn
và dễ theo dõi hơn”.
- Có thể “đặt” các đối tượng ở bất cứ vị trí nào trên webpage.
“Trước khi có CSS cấu trúc website dạng bảng gây khó khăn khi tạo bố cục trang.
Một là cấu trúc bảng biểu khá cứng nhắc, chiều ngang và chiều dọc bị ảnh hưởng kích thước lên nhau nên khó thay đổi và cập nhật. Hai là các đối tượng chèn vào bảng đều độc lập và không thể “đè” lên nhau được. CSS giúp có thể sắp xếp các đối tượng chữ,bảng biểu, họa tiết, ảnh,... ở vị trí nào tùy ý, dễ dàng sắp xếp các mảng và dễ dàng hơn trong việc bảo trì.”
- Tính tương thích:
“CSS tương thích với hầu hết các trình duyệt hiện nay: Google Chrome, Mozilla Fierfox, Safari,. Trên các trình duyệt khác nhau, những gì người dung nhìn thấy là tương đối giống nhau.”
- Tính chính xác:
CSS có các thuộc tính màu sắc hỗ trợ chọn màu theo nhiều cách: tên màu, hệ màu RGB hay mã màu hệ thập lục phân (hexadecimal code), giúp thể hiện màu sắc trên Website chính xác nhất so với thiết kế.
- Hỗ trợ các công cụ tìm kiếm:
“CSS giúp loại bỏ code thừa lặp lại nhiều lần như thẻ <font>, <p> hay các thuộc tính thứ yếu tự sinh bởi cơng cụ lập trình, hỗ trợ tốt hơn cho các cơng cụ tìm kiếm.”
- Tính nhanh chóng:
“CSS Giúp Website có sự đồng bộ và dễ dàng mở rộng giao diện. Cho dù là website
của bạn có 50 trang hay 500 trang thì chỉ cần định dạng trong một tệp CSS duy nhất. Khi nâng cấo giao diện website, chỉ phải sửa một lần duy nhất tệp CSS, toàn bộ giao diện Website sẽ tự động thay đổi theo.”
Nhược điểm
“Ngày càng nhiều thiết bị với nhiều độ phân giải, kích thước màn hình màu sắc khác nhau. Một số thì nằm ngang, một số lại nằm dọc, số khác thì hình vng. Một số màn hình di động cịn có thể xoay màn hình. Bên cạnh đó, rất nhiều người dùng khơng mở rộng hồn tồn màn hình trình duyệt của họ như có thể bị can thiệp bởi thanh
bookmarks, tạo ra vơ số kích thước màn hình khác nhau. Điều này gây một phần khó khăn cho các lập trình viên.”
JAVA SCRIPT(JS)
“JavaScript là ngơn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm
qua. Nó cũng là một trong số 3 ngôn ngữ, là lớp thứ ba của chiếc bánh tiêu chuẩn của các công nghệ web. JavaScript là ngơn ngữ lập trình mang đến sự sinh động của website.”
“JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của Netscape Communications, vào tháng 9 năm 1995.”
“JavaScript là một ngôn ngữ kịch bản được hãng Sun Microsystems và Netscape phát triển từ Livescript của Netscape. Các ứng dụng client cho phép được chạy trên hầu hết các trình duyệt Mozilla Firefox, Google Chrom, Internet Explorer, Opera,...”
“Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vào tháng 5 năm 1995. Tên của nó được đổi thành Mona, đổi tên thành LiveScript vào tháng 9 năm 1995,
và được đổi tên thành JavaScript nổi tiếng như bây giờ vào tháng 12 năm 1995.”
“Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện trở thành, một đặc tính kỹ thuật tiêu chuẩn.”
“Vào tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên cho ngôn ngữ được phát hành là ECMA-262.”
ECMAScript 2017: tháng 6 năm 2017.
“Chỉ trong 20 năm, nó từ một ngơn ngữ lập trình riêng trở thành cơng cụ quan trọng nhất trên bộ cơng cụ của các chun viên lập trình web.”
“Là một ngơn ngữ lập trình phổ biến sử dụng trên 92% nền tảng website hiện nay,
JavaScript đã thể hiện vai trò quan trọng với lĩnh vực này vào năm 2016”
Theo báo cáo từ Stack Overflow Lập trình viên, năm 2019 trong 87.354 Lập trình viên, có khoảng 67.8% sử dụng JavaScript
JavaScript HTMƯCSS SQL Fyttion Java Bash/Shell/PowerShell c# PHP C++ Typescript C 67.8% 63.5% I I 54.4% 41.7% 41.1% 36.6% 31.0% 26.4% 23.5% 21.2% 20.6%
Hình 1. 6. Tỷ lệ các ngơn ngữ các lập trình viên sử dụng năm 2019
Ưu điểm
- “Bạn khơng cần một compiler vì trình duyệt web có thể biên dịch nó bằng HTML”.
- Dễ học.
- Dễ phát hiện lỗi và sửa.
- “Phản hồi ngay lập tức tới khách truy cập”.
- Khả năng tương tác Website tăng lên.
- “JavaSript hoạt động trên nhiều trình duyệt, nền tảng”.
- “Bạn 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ó nhanh nhẹ hơn các ngơn ngữ lập trình khác”.
- Nhiều bộ chuyển đổi.
- “Có thể dùng React Native để lập trình mobile app trên JavaScript”.
Nhược điểm của JavaScript
- “Dễ bị khai thác lỗ hổng bảo mật”
- “Có thể được dùng để thực thi mã độc trên máy tính của người dùng”
- Sự hỗ trợ đầy đủ trên các trình duyệt khác nhau là khơng giống nhau.
- Không đồng nhất trên các thiết bị.
- Chúng ta không thể đối xử JavaScript như là một ngôn ngữ chương trình chính thức .
- JavaScript khơng có bất kỳ khả năng đa luồng hoặc đa xử lý.
Ngồi HTML, CSS và JavaScript cịn có rất nhiều ngơn ngữ lập trình khác được sử dụng để xây dựng giao diện Website.
1.2.2. Back-end
Sau Giao diện của một Website chính là Backend- là cách mà Website hoạt động là mã nguồn phía máy chủ, tất cả mã nguồn phía máy khách- Frontend như HTML, CSS
hay JavaScript sẽ khơng hoạt động được nếu thiếu backend. Lập trình viên backend cũng
địi hỏi cao hơn và mức thu nhập trung bình hầu hết là cao hơn tại các quốc gia.
Để 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, kết nối với cơ sở dữ liệu được quản trị bằng các hệ quản trị cơ sở dữ liệu 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.
Hầu hết các hệ thống backend được kết nối với một số loại cơ sở dữ liệu lưu trữ dữ liệu cho ứng dụng. Bất cứ yếu tố nào khơng thể nhìn thấy dễ dàng bằng mắt đều thuộc về cơng việc của lập trình viên back-end.
Back-end chịu trách nhiệm các hoạt động mà trang Web thực hiện ở máy chủ như:
- Xác thực người dùng, đảm bảo những gì họ nhìn thấy là hợp lệ.
- Kiểm sốt trình tự được thực hiện trên Website được xử lý để tránh sai sót
- Tối ưu hóa đảm bỏa chức năng của Website khơng chỉ họa động đúng mà cịn phải
hoạt động hiệu quả ví dụ như việc gửi email tự động.
PHP
“PHP được phát triển từ một sản phẩm có tên là PHP/FI. PHP/FI do Rasmus Lerdorf tạo ra năm 1995, ban đầu được xem như là một tập con đơn giản của các mã kịch bản Perl để theo dõi tình hình truy cập đến bản sơ yếu lý lịch của ông trên mạng”.
“PHP/FI, viết tắt từ Personal Home Page/Forms Interpreter” “Vào năm 1997, PHP/FI 2.0, lần viết lại thứ hai của phiên bản C”
“PHP/FI 2.0 được chính thức cơng bố vào tháng 11 năm 1997, sau một thời gian khá dài chỉ được công bố dưới dạng các bản beta. Nhưng khơng lâu sau đó, nó đã được thay thế bởi các bản alpha đầu tiên của PHP 3.0.5.1. Giới thiệu và cài đặt”.
“PHP 3.0 là phiên bản đầu tiên cho chúng ta thấy một hình ảnh gần gũi với các phiên bản PHP mà chúng ta được biết ngày nay, như là phiên bản thế hệ kế tiếp của PHP/FI 2.0 và chấm dứt phát triển PHP/FI 2.0.5.1. Nó đã được đặt tên ngắn gọn là 'PHP',
một kiểu viết tắt hồi quy của "PHP: Hypertext Preprocessor"”.
“Vào cuối năm 1998, PHP đã phát triển được con số cài đặt lên tới hàng chục ngàn
người sử dụng và hàng chục ngàn Web site báo cáo là đã cài nó. Vào thời kì đỉnh cao, PHP 3.0 đã được cài đặt cho xấp xỉ 10% số máy chủ Web có trên mạng Internet”.
“PHP 3.0 đã chính thức được cơng bố vào tháng 6 năm 1998, sau thời gian 9 tháng
được cộng đồng kiểm nghiệm.5.1”.
“Với PHP 4.0, số nhà phát triển dùng PHP đã lên đến hàng trăm nghìn và hàng triệu site đã công bố cài đặt PHP, chiếm khoảng 20% số tên miền trên mạng Internet”.
“Ngày 29 tháng 6 năm 2003, PHP 5 Beta 1 đã chính thức được cơng bố để cộng đồng kiểm nghiệm. Đó cũng là phiên bản đầu tiên của Zend Engine 2.0”.
“Phiên bản Beta 2: tháng 10 năm 2003” 14 tháng 7 năm 2005: PHP 5.1 Beta 3 Hiện nay đang phát triển. PHP 6
Hình 1. 8. Cơ chế hoạt động của PHP
Ưu điểm
- Đơn giản và linh động
- Support bởi cộng đồng lớn:
- Hỗ trợ xử lý text tốt
- Mã nguồn mở
- Miễn phí
- Ket nối các hệ cơ sở dữ liệu
- Có thể dùng trên nhiều hệ điều hành
- Tốc độ tải hơn nhiều ngơn ngữ lập trình khác.
- Ổn định
- Code ngắn và cấu trúcđơn giản
- Nhiều thư viện
Nhược điểm của PHP
- PHP còn hạn chế về cấu trúc ngữ pháp.
- PHP chỉ có thể hoạt động và sử dụng được trên các ứng dụng trong web.
- Khơng chia sẻ tài ngun giữa các tiến trình: đóng khung các tiến trình dẫn đến
rất
nhiều hạn chế.
- Khó để mở rộng hệ thống.
- Bảo mật không cao
1.2.3. Cơ sở dữ liệuDữ liệu (data) Dữ liệu (data)
- Là thông tin của đối tượng được lưu trữ trên máy tính.
- Có thể truy nhập để trích xuất ra các thơng tin.
Dữ liệu được mơ tả dưới nhiều dạng khác nhau (kí tự, kí số, hình ảnh, âm thanh,...). Dữ liệu về đối tượng có thể khác nhau, tùy thuộc vào ngữ cảnh.
Cơ sở dữ liệu
- CSDL (database) = Tập hợp dữ liệu được tổ chức lại có cấu trúc liên quan đến nhau, được lưu trữ ở trong máy tính.
- Được thiết kế và xây dựng cho phép người dùng lưu trữ, truy xuất hoặc cập nhật dữ liệu.
Hình 1. 9. Cơ sở dữ liệu
Cơ sở dữ liệu được tổ chức có cấu trúc:
• Dữ liệu được lưu trữ thành các bản ghi (record) và các trường (field) • Dữ liệu có mối quan hệ với nhau
MYSQL
Giới thiệu hệ quản trị cơ sở dữ liệu MySQL
- Là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở.
- Năm 2013, MySQL “được đánh giá là hệ quản trị cơ sở dữ liệu được sử dụng nhiều thứ 2 trên thế giới”.
- MySQL “là hệ thống cơ sở dữ liệu tiêu chuẩn cho Website đảm bảo đáp ứng được cho
dữ liệu và số lượng người dùng lớn (như Facebook, Twitter, và Wikipedia)”.
- MySQL có thể chạy trên server
- MySQL sử dụng cú pháp SQL chuẩn
- Miễn phí
CHƯƠNG 2
FRAMEWORK WORDPRESS VÀ MỘT SỐ PLUGIN HỖ TRỢ QUẢN LÝ NỘI DUNG HIỆN NAY
2.1. NỀN TẢNG WORDPRESS
2.1.1. Wordpress là gì
“Nhắc đến CMS tốt nhất hiện nay, khơng thể khơng kể đến WordPress. Đây là hệ thống dễ dàng sử dụng và xây dựng nhất, vì thế nó khơng chỉ phổ biến ở Việt Nam mà cịn thơng dụng tại nhiều nước trên thế giới”.