L ỊCH TRÌNH THỰC HIỆN ĐỒ ÁN TỐT NGHIỆ P
2.13.3 Lý thuyết về kỹ thuật mở mạng
Một người dùng Internet sẽđược gán cho 1 địa chỉ IP. Khi nhà cung cấp như Viettel, FPT kéo đường dây ADSL (Asymmetric Digital Subscriber Line) đến nhà thì khi gắn đầu dây vào modem/router của chúng ta sẽcó 1 địa chỉ IP do nhà mạng cung cấp. Vậy thì nếu chúng ta có 2 máy tính trở lên thì sao? Nguyên tắc là mỗi 1 người dùng chỉ có 1 địa chỉ
IP, nay với 2 máy tính thì sẽ phải cần 2 địa chỉ IP. Thực tế này không chỉ xảy đến với gia
đình mà còn với cảcông ty và các nơi có nhu cầu sử sụng thiết bị kết nối cao. Trong một công ty có nhiều máy tính và người dùng, đôi khi chỉ có 1 hoặc 2 đường dây ADSL (tức chỉ có 1 hoặc 2 IP cùng lúc). Giải quyết bài toán này, công nghệ mạng máy tính đã sản
CHƯƠNG II: CƠ SỞ LÝ THUYẾT. 44 sinh ra khái niệm NAT (Network Address Translation). Đây là một giải pháp tích hợp trong router, cho phép router này kết nối với Internet bên ngoài chỉ với 1 địa chỉ IP nhưng đồng thời lại có thể cho phép nhiều người dùng sử dụng chung Internet thông qua nó bằng việc gán cục bộcác địa chỉ IP phụ cho từng máy kết nối.
Các IP phụthường có dạng 192.168.x.x. Đây không phải là địa chỉ IP trên Internet, nó chỉ có ý nghĩa cục bộ trong mạng con quản lý bởi router. Với Internet, chỉcó 1 địa chỉ
IP cấp cho router nhà bạn thôi, còn trong nhà có bao nhiêu người, bao nhiêu máy thì cũng như nhau.
Đó gọi là NAT, giúp gán địa chỉ IP phụ cho từng thiết bị trong nhà muốn kết nối Internet.
2.13.3.2 Port Forward
Với router, quản lý các dịch vụ trong mạng con của nó thông qua các port. Port thực ra là một con số. Các port khác nhau có sốkhác nhau, đánh số cho dễ quản lý. Ví dụ nhà chúng ta có server trang web thì dịch vụ server chạy trên port 80, 8080, 8000. Hiện nay
chúng ta dùng đầu ghi hình thì đầu ghi hình cơ bản cũng là một dạng hỗ trợ
webserver, nó chạy trên port 80 (và tất nhiên có thể đặt số khác nếu thích). Bây giờ
nếu muốn xem camera, chúng ta phải truy cập vào đầu ghi trên cổng web của nó.
Ta có một địa chỉ IP do nhà mạng cung cấp cho đường truyền Internet của chúng ta, mở trình duyệt web lên và gõ địa chỉ IP này. Kết quả là sẽ được đưa đến trang thông báo của router của nhà mình, ví dụ: Access denied! Nếu chỉđơn thuần truy cập vào địa chỉ IP thì router nó sẽ không hiểu chúng ta muốn gì. Router phần lớn được mặc định không tiếp nhận các yêu cầu truy cập lạ từ Internet.
Router cần thêm thông tin dịch vụ chúng ta muốn dùng. Lúc này cần cung cấp thêm cho router số port dịch vụ. Ví dụ địa chỉ IP Internet là: 120.134.1.67, thì ta gõ 120.134.1.67:80. Số 80 theo sau là số dịch vụ web mà chúng ta cần. Khi đó router hiểu bạn muốn truy cập dịch vụ web. Nó sẽ tìm trong danh sách máy con của nó đểđáp ứng lại yêu cầu. Để giúp router tìm đúng, cần cho nó giá trị Port Forward. Hiểu đơn giản, với Port Forward là chỉ dẫn router biết khi người dùng truy cập vào nó, họđưa cho nó số port, nó
CHƯƠNG II: CƠ SỞ LÝ THUYẾT. 45 biết tìm thiết bị (với địa chỉ IP phụ mà nó quản lý) đáp ứng lại yêu cầu. Đến đây thì chúng
ta đã hiểu phải cấu hình Port Forward ra sao đểcoi được đầu ghi qua Internet. Ví dụ đầu ghi có IP phụ dạng 192.168.1.4, cấu hình router hiểu port 80 mà nó nhận sẽ được tham chiếu đến IP phụ192.168.1.4 đểđáp ứng lại.
2.13.4 Ngôn ngữ HTML
HTML (HyperText Markup Language, hay là "Ngôn ngữĐánh dấu Siêu văn bản"). HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử dụng các thẻ html để biểu diễn các trang web.
Cấu trúc tổng quát của một trang HTML.
<html> <head>
<title><!--tieu de trang web --></title> <body>
<!--nội dung trang web--> </body>
</head> </html>
Các thẻhtml cơ bản
Thẻđịnh dạng trang: <body> .
Thẻđịnh dạng văn bản: <font>, <p>, <b>, <i>, <u>… Thẻ tạo siêu liên kết (hyperlink): <a>.
Thẻđịnh dạng danh sách: <ul>, <ol>, <li>. Thẻ chèn hình ảnh: <img>.
Thẻ tạo bảng : <table>. Thẻ nhóm phần tử: <div>....
Các thành phần cơ bản (tag, element, property)
Thẻ (tag): là một tập hợp ký hiệu được định nghĩa trong HTML có ý nghĩa đặc biệt.
CHƯƠNG II: CƠ SỞ LÝ THUYẾT. 46 Thẻ bắt đầu bởi "<" và kết thúc bởi ">".
Thẻ mở: <tên thẻ>. Thẻđóng: </tên thẻ>.
Phần tử (element): có thể bao gồm thẻ mở, thẻ đóng và nội dung bên trong cặp thẻ mở, đóng. Có hai loại phần tử trong HTML. Phần tử chứa nội dung: bao gồm thẻ mở và thẻđóng. VD: <p> Nội dung </p>. Phần tử rỗng: bao gồm một thẻ. VD: <br> có thể viết là </br> hoặc < br />.
Thuộc tính: mỗi thẻ có thể một hay nhiều thuộc tính đi kèm.
Thuộc tính được nhập ngay trước ngoặc đóng ‘>’ của thẻ mở.
Có thể có nhiều thuộc tính trong một thẻ, các thuộc tính phân cách nhau bởi khoảng trắng.
Các giá trị thuộc tính có thểđặt trong “ ”, ‘ ’ hoặc không có.
Nếu giá trị là chuỗi ký tự có khoảng trắng bên trong, bắt buộc phải dùng “
” hay ‘ ’ để bao chuỗi lại . Ví dụ:
<table border=“1” cellpadding=“5”>
<input type="submit" value="on" style="height:30px; width:63px; color: black; background-color: #00FFFF">
<font face="Times New Roman" size="+3" color="#006600"> <img alt="truong dai hoc su pham ky thuat">
2.13.5 Ngôn ngữ Javascript
Với HTML bạn đã biết cách tạo ra trang Web - tuy nhiên chỉ mới ở mức biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đáp ứng các sự kiện từ phía
người dùng. Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript để thực hiện chức năng này. Sau đó ngôn ngữ này được đổi tên thành JavaScript để tận dụng tính đại
CHƯƠNG II: CƠ SỞ LÝ THUYẾT. 47 chúng của ngôn ngữ lập trình Java. Mặc dù có những điểm tương đồng giữa Java và
JavaScript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt.
JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML. Nó không
được biên dịch mà được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.
Đặt tính của JavaScript: Đơn giản.
Động.
Hướng đối tượng.
JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối
tượng, ví dụđối tượng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không là ngôn ngữhướng đối tượng như C++ hay Java do không hỗ trợ các lớp hay tính thừa kế. JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả năng này cho
phép JavaScript trở thành một ngôn ngữscript động.
Giống với HTML và Java, JavaScript được thiết kếđộc lập với hệđiều hành. Nó có thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngoài ra JavaScript giống Java ở khía cạnh an ninh: JavaScript không thểđọc và viết vào file của
người dùng.
Các trình duyệt web như Nescape Navigator 2.0 trở đi có thể hiển thị những câu lệnh JavaScript được nhúng vào trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửi đầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới client. Client sẽđọc trang đó từđầu đến cuối, hiển thị các kết quả của HTML và xử lý các câu lệnh JavaScript khi nào chúng xuất hiện.
Các câu lệnh JavaScript được nhúng trong một trang HTML có thể trả lời cho các sự
kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng trang. Ví dụ
bạn có thể kiểm tra các giá trị thông tin mà người sử dụng đưa vào mà không cần đến bất cứ một quá trình truyền trên mạng nào.Trang HTML với JavaScript được nhúng sẽ kiểm
CHƯƠNG II: CƠ SỞ LÝ THUYẾT. 48 tra các giá trị được đưa vào và sẽ thông báo với người sử dụng khi giá trị đưa vào là
không hợp lệ.
2.13.6 Ngôn ngữ CSS
CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta
thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web.
CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css".
CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thểđịnh nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác.
Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thểđặt đoạn CSS của bạn phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở rộng ".css", ngoài ra bạn còn có thểđặt chúng trong từng thẻ HTML riêng biệt
Tuy nhiên tùy từng cách đặt khác nhau mà độưu tiên của nó cũng khác nhau. Mức
độ ưu tiên của CSS sẽ theo thứ tự sau.
Style đặt trong từng thẻ HTML riêng biệt Style đặt trong phần <head>
Style đặt trong file mở rộng .css Style mặc định của trình duyệt
Mức độưu tiên sẽ giảm dần từ trên xuống dưới.
CSS có tính kế thừa: giả sử rằng bạn có một thẻ<div id="vidu"> đã được khai báo ở đầu file css với các thuộc tính như sau:
#vidu {
width: 200px; height: 300px;
CHƯƠNG II: CƠ SỞ LÝ THUYẾT. 49 }
Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div id="vidu"> với các thuộc tính.
#vidu {
width: 400px;
background-color: #CC0000; }
Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính: #vidu {
width: 400px; /* Đè lên khai báo cũ */
CHƯƠNG III: THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG. 56
Chương 3. THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG