CHƢƠNG 1 CƠ SỞ LÝ THUYẾT
1.4.3.4. Gói tồn cục và gói cục bộ trong khi NPM cài đặt
Mặc định khi dùng câu lệnh install trong npm sẽ là cài 1 gói ở dạng local, tức là nó chỉ có tác dụng trên thƣ mục mình cài
Ví dụ tại thƣ mục nodejs/dirA/ có gói là testcase
o cd nodejs/dirA/
o npm install testcase
Trong thƣ mục nodejs/dirB/ ta tạo 1 file.js có gọi gói testcase var HTTPServer = require('testcase');
Thì sẽ báo lỗi khơng tìm thấy gói testcase, vì gói testcase ta install nó trong thƣ mục dirA, nên npm sẽ hiểu testcase là gói cục bộ trong thƣ mục dirA.
SVTH: Trần Thị Hồng Ánh – Lớp 09CNTT2 23
Để có thể dùng gói testcase trong dirB ta có thể dùng 2 cách sau:
o Cục bộ:Ta vào lại thƣ mục dirB và cài lại gói testcase bằng npm, lúc đó gói testcase sẽ là gói cục bộ trong thƣ mục dirB.
cd anotherapp/
npm install http-server
o Tồn cục:Ta sẽ cài gói testcase là 1 gói tồn cục. Tức là bất cứ thƣ mục nào (kể cả khơng phả dirA và dirB cũng có thể gọi gói testcase đƣợc.
#npm install http-server -g
Mặc định thì npm cài thêm module theo cách cục bộ tức là nó sẽ cài vào mục node_modules tại thƣ mục hiện thời. Để thay đổi việc cài module sao cho khi cài npm sẽ mặc định sẽ cài vào toàn cục.Đây là cách mà các chƣơng trình có thể dùng các module tồn cục mà khơng cần cài thêm.
#npm set global=true
Để kiểm tra xem biến global đã đƣợc cài chƣa.ta dùng tham số get #npm get global
Express Framework
1.4.4.
Express là một web module cho NodeJs. Các web app thƣờng dùng chung một số cấu trúc nhất định nên ta có thể lập trình và viết app nhanh hơn khi sử dụng module Express.
Với Express ta có thể tạo:
o Website quảng cáo đơn giản
o Thƣ viện JSON
o Web app phức tạp Ƣu điểm của Express:
o Trong module Express đã có sẵn các chức năng nhƣ: routing, templating nên ta không cần phải tốn thời gian viết code cho những phần này.
Để cài đặt Express ta có thể dùng lệnh sau:
o #npm install -g express Cấu trúc của 1 Express:
SVTH: Trần Thị Hồng Ánh – Lớp 09CNTT2 24 o app.js: là tập tin chƣơng trình ta sử dụng để khởi động, nó chứa các lệnh
khởi tạo chƣơng trình.
o node_modules: là một thƣ mục chứa các module thƣ viện mà chƣơng trình của chúng ta sử dụng (Những module này đƣợc liệt kê trong tập tin package.json).
o package.json: là một tập tin chứa các thông tin về các module mà chƣơng trình của ta sử dụng. Tập tin này có thể chứa các thơng tin nhƣ: tên chƣơng trình, tác giả, url,...
o public: là thƣ mục chứa các tập tin mà client có thể lấy trực tiếp. Ta có thể thêm các tập tin CSS, JavaScript và các hình ảnh vào mục này. Thƣ mục không chứa các tập tin server script, đây là cách làm tăng tính bảo mật.
o routes: là một thƣ mục chứa các đƣờng dẫn.
o views: là thƣ mục chứa các tập tin layout cho chƣơng trình.
Jade templates
1.4.5.
Express cho phép ta sử dụng template engine.
Template engin đƣợc sử dụng để tạo ra các tập tin HTML và thƣờng sử dụng những tập tin bên trong thƣ mục „view‟. Các chức năng thƣờng thấy bao gồm khả năng ch n biến và sử dụng vòng lặp.
Jade là một template engine dựa trên tab đầu dòng, ta có thể so sánh Jade với HTML:
.wrapper
h1 Hello world!
p This is my website
img (src=‟img/hello.jpg‟ alt=‟hello world‟)
Đoạn Jade ở trên sẽ tạo ra đoạn HTML nhƣ sau:
<div class=‟wrapper‟>
<h1>Hello world!</h1> <p>This is my website</p>
SVTH: Trần Thị Hồng Ánh – Lớp 09CNTT2 25 <img src=‟img/hello.jpg‟ alt=‟hello world‟ /> </div>
Từ đoạn code trên ta có thể thấy rõ đƣợc một số điểm nổi bật sau:
o Jade ngắn gọn hơn nhiều so với HTML.
o Jade sử dụng tab đầu dòng để nêu bật cấu trúc văn bản HTML.
o Ta không cần phải viết các thẻ nhƣ trong HTML. Các dấu < và > đƣợc thêm một cách tự động khi template biến đổi.
o Ta khơng cần các thẻ đóng trong Jade.
Từ những ƣu điểm trên ta có thể thấy viết một tập tin Jade tiện lợi hơn nhiều so với viết một tập tin HTML. Lợi ích chính khi sử dụng template là khả năng tạo ra tập tin HTML bằng cách tổng hợp dữ liệu động. Cụ thể nhƣ:
o Hiển thị một danh sách các bài blog đƣợc lƣu trữ trong một cơ sở dữ liệu.
o Tạo ra một template chính để biểu diễn các bài blog khác nhau.
o Thay đổi nội dung thẻ <title> cho mỗi trang.
o Tạo ra header và footer để sử dụng lại cho nhiều trang.
Jade tạo ra cấu trúc trang nhờ vào dấu tab đầu dòng. Một thẻ đƣợc tạo ra bằng cách ghi tên thẻ đó ngay sau dấu tab đầu dịng:
html
sẽ trở thành: <html><html>
Ta có thể sử dụng cách viết này cho các thẻ HTML nhƣ: section, article, body, p,...
Để thêm id vào một thẻ ta đánh dấu „#‟ vào sau nó và thêm vào tên id:
section#wrapper sẽ trở thành:
SVTH: Trần Thị Hồng Ánh – Lớp 09CNTT2 26 <section id=‟wrapper‟></section>
Tƣơng tự với việc thêm class vào thẻ bằng cách thêm dấu chấm vào sau tên thẻ rồi thêm class, nhƣ sau:
p.highlight sẽ trở thành:
<p class='highlight'></p>
Ta có thể thêm cả id và class vào bằng cách nối chúng lại nhƣ sau:
section#wrapper.main sẽ trở thành
<section id='wrapper' class='main'></section>
Jade cũng cho phép thêm nhiều hơn một class trên thẻ:
p.text.content.details sẽ trở thành:
<p class='text content details'></p>
Để tạo ra cấu trúc HTML, ta sử dụng tab đầu dòng nhƣ sau:
p
span Sẽ trở thành
<p><span></span></p>
Để thêm văn bản vào một thẻ, ta chỉ cần thêm nó ngay sau thẻ
h1 This is a title Sẽ trở thành:
<h1>This is a title</h1>
SVTH: Trần Thị Hồng Ánh – Lớp 09CNTT2 27 p | Text có thể | tràn sang các dịng khác | bằng cách thêm dấu gạch dọc Sẽ trở thành: <p>Text có thể tràn sang các dòng khác bằng cách thêm dấu gạch dọc.</p> Node-mysql 1.4.6.
Node-mysql là một module của NodeJs, cho phép chúng ta kết nối tới cơ sở dữ liệu giữa MySQL bằng NodeJs.
Ta có thể cài đặt node-mysql theo cú pháp nhƣ sau: #npm install node-mysql
Để sử dụng nó chúng ta sẽ khai báo nhƣ sau:
var mysql = require('mysql');
var connection = mysql.createConnection({ host: 'localhost', user: 'root',
password: 'mypassword', });
connection.connect();
connection.query('SELECT * FROM table', function(err, rows, fields) {
if (err) throw err; console.log(rows); });
connection.end();
1.5. RESPONSIVE WEB DESIGN Khái niệm
1.5.1.
Responsive web design có thể hiểu là khái niệm về 1 website "phản hồi" - 1 website có khả năng "tự biến đổi" dựa trên môi trƣờng hoạt động của chúng. Cùng 1
SVTH: Trần Thị Hồng Ánh – Lớp 09CNTT2 28
website, nhƣng giao diện và phƣơng thức tƣơng tác của website đó có thể biến đổi khi bạn truy cập website đó từ các thiết bị khác nhau nhƣ smartphone, tablet, laptop,...
Có thể định nghĩa Responsive Web Design là một khái niệm để chỉ một giải
pháp thiết kế web tiên tiến giúp website của bạn tự động co chỉnh sao cho phù hợp với độ phân giải của thiết bị hiển thị bao gồm: smartphone, tablet, laptop,...
Sử dụng Responsive web design vừa tốt cho ngƣời sử dụng vừa tốt cho nhà thiết kế web.Ngƣời sử dụng sẽ có đƣợc một giao diện mƣợt mà và tiện lợi hơn.Tất nhiên, tiện lợi cho ngƣời sử dụng là điều mà nhà thiết kế web mong muốn.Bên cạnh đó, sử dụng Responsive web design cịn tiết kiệm nhiều cơng sức cho nhà thiết kế web về lâu dài.Các chuyên gia đồng ý rằng Responsive web design sẽ hoàn toàn thống trị lĩnh vực thiết kế web vào năm 2015. Sự gia tăng số lƣợng ngƣời sử dụng smartphone, tablet và e-reader sẽ làm cho số trang web sử dụng Responsive web design ngày một tăng.
Mục tiêu chính của Responsive web design đơn giản là làm cho trang web hiển thị và hoạt động một cách hợp lý cho dù ngƣời dùng sử dụng thiết bị nào để xem nó. Trƣớc kia, khi ngƣời dùng chỉ sử dụng desktop và laptop là chủ yếu, điều này chƣa thật sự đƣợc chú trọng. Tuy nhiên giờ đây, khá nhiều ngƣời sử dụng tablet, smartphone và các thiết bị tƣơng tự để truy cập internet.Một trang web hiển thị đƣợc trên nhiều thiết bị có độ phân giải khác nhau là xu hƣớng phát triển chính của các nhà thiết kế web hiện nay.
Responsive web design cũng giúp đáng kể cho nỗ lực SEO (Search Engine Optimization). Nếu trang web đƣợc thiết kế với kỹ thuật Responsive web design, ta sẽ không cần quan tâm đến việc chuyển hƣớng ngƣời sử dụng đến các url khác dành cho thiết bị có độ phân giải phù hợp, bên cạnh đó cũng làm cho website đƣợc SEO tốt hơn.
Các kỹ thuật Responsive Web Design
1.5.2.
1.5.2.1. Fluid Grid
Fluid Grid có nghĩa là làm cho các thành phần của trang web co giãn tùy theo độ rộng hẹp của màn hình. Các thành phần của trang web thƣờng đƣợc sắp xếp thành từng khung có vị trí và kích thƣớc khớp với nhau đƣợc gọi là grid. Vì vậy fluid grid có nghĩa là thiết kế các thành phần trang web trong các khung động có thể co giãn tùy theo độ lớn của màn hình.
Hàng loạt thiết bị công nghệ khủng ồ ạt ra đời cộng với nhu cầu truy cập web trên di động của ngƣời dùng ngày càng gia tăng, đồng nghĩa chúng ta phải thiết kế web
SVTH: Trần Thị Hồng Ánh – Lớp 09CNTT2 29
cho các độ phân giải màn hình khác nhau để phù hợp với những thiết bị smart phone, tablet, desktop, laptop.