Viết web chat đơn giản

TÓM TẮTVới sự phát triển của công nghệ hiện nay, với dịch vụ không dây ngày càng pháttriển thì các dịch vụ đáp ứng nhu cầu của công nghệ phải phát triển không ngừng mớiđáp ứng kịp sự phá

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐIỆN ĐIỆN TỬ

BỘ MÔN KỸ THUẬT MÁY TÍNH - VIỄN THÔNG

ĐỒ ÁN MÔN HỌC

MẠNG MÁY TÍNH, VIỄN THÔNG

Ngành Công Nghệ Kỹ Thuật Điện Tử Truyền Thông

Sinh viên: Lê Huỳnh Long Hải

MSSV: 13141079

TP HỒ CHÍ MINH – 5/2016

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐIỆN ĐIỆN TỬ

BỘ MÔN KỸ THUẬT MÁY TÍNH - VIỄN THÔNG

ĐỒ ÁN MÔN HỌC

VIẾT CHƯƠNG TRÌNH CHAT TRÊN GIAO DIỆN

WEB

Ngành Công Nghệ Kỹ Thuật Điện Tử Truyền Thông

Sinh viên: Lê Huỳnh Long Hải

MSSV: 13141079

TP HỒ CHÍ MINH – 5/2016

TÓM TẮT

Với sự phát triển của công nghệ hiện nay, với dịch vụ không dây ngày càng pháttriển thì các dịch vụ đáp ứng nhu cầu của công nghệ phải phát triển không ngừng mớiđáp ứng kịp sự phát triển một cách chóng mặt của công nghệ Ngày nay, nhìn đâu đâucũng có dịch vụ internet ( có dây, không dây ) nên các dịch vụ về Internet phát triển rấtmạnh Sử dụng Internet có thể tiết kiệm hơn so với sử dụng dịch vụ di động thôngthường Hiện tại thì Internet có thể cung cấp từ nhà mạng, các nhà mạng di động cũng

có thể sử dụng được Inernet Nhằm mục đích phục vụ cho việc nhắn tin liên lạc vớinhau thì chúng tôi phát triển một ứng dụng đơn giản đó là một ứng dụng chat đơn giảntrên nền web, có thể tiết kiệm chi phí thay cho việc nhắn tin truyền thống qua mạng diđộng Đây là một ứng dụng đơn giản nên chưa tối ưu và cũng chưa được đưa vào sựdụng rộng rãi và còn nhiều hạn chế Nhưng tầm nhìn xa có thể phát triển thành mộtdịch vụ groupchat dành cho một công ty hoặc một nhóm người nào đó cần cần liên lạcvới nhau để tiết kiệm được chi phí vì Internet hầu như xuất hiện ở tất cả những công

ty, doanh nghiệp, gia đình,….thay thế các ứng dụng Yahoo và sẽ là một ứng dụng chatđộc lập trên nền web ( không tích hợp như Facebook ) để truy cập một cách dễ dàng,

dễ sử dụng và tiết kiệm dung lượng vì không phải tải nhiều phần không theo ý muốn

MỤC LỤC

Danh mục hình

Các từ viết tắt

CHƯƠNG 1 GIỚI THIỆU 1

1.1 GIỚI THIỆU 1

1.2 PHẠM VI ÁP DỤNG 1

CHƯƠNG 2 LÝ THUYẾT VÀ THỰC HÀNH 2

2.1 LÝ THUYẾT 2

2.1.1 Lý thuyết chung 2

2.1.1.1 Html 3

2.1.1.2 Php 3

2.1.2 Localhost 4

2.1.3 Database 5

2.1.4 Apache 6

2.1.5 Socket 7

2.2 THỰC HÀNH 12

2.2.1 Cài phần mềm 12

2.2.2 Tạo CSDL 12

2.2.3 Viết code php 15

2.3 TÀI LIỆU THAM KHẢO 19

2.4 PHỤ LỤC 19

DANG MỤC HÌNH

[Hình 1] 6

[Hình 2] 8

[Hình 3] 9

[Hình 4] 10

[Hình 5] 12

[Hình 6] 13

[Hình 7] 13

[Hình 8] 14

[Hình 9] 14

[Hình 10] 15

[Hình 11] 15

[Hình 12] 16

[Hình 13] 16

[Hình 14] 17

[Hình 15] 17

[Hình 16] 18

1.2 PHẠM VI ÁP DỤNG

Đề tài viết một chương trình chat đơn giản trên web bước đầu có thể áp dụngtrong một phạm vi nhỏ giữa các thành viên trong gia đình, một số người bạn vớinhau, sau đó có thể phát triển làm thành một webchat trong bộ phận của mộtcông ty, doanh nghiệp và có thể phát triển hơn nữa để trở thành một trang webchat phổ biến dành cho tất cả mọi người

CHƯƠNG 2

LÝ THUYẾT VÀ THỰC HÀNH

2.1 LÝ THUYẾT

2.1.1 Giới thiệu chung

Website hay còn gọi là trang web, đó là một loại hình bao gồm cáctrang văn bản được tác giả tự viết hoặc chia sẻ lại bài viết của người khác

về mặc nội dung Về mặc hình thức trình bày thì nó được thể hiện bởi cácthẻ HTML và định dạng bằng CSS Nội dung ngoài văn bản thì nó cònbao gồm các hình ảnh, các khung, các nút,… nôm na là những gì bạn đangtruy cập hàng ngày trên mạng internet

Khi bạn ghé thăm tới một tên miền nào đó và tên miền này hiển thị nộidung ra cho bạn xem thì đó được gọi là trang web Có 2 loại website màbạn cần biết đến đó là website hoạt động theo kiểu tĩnh và website hoạtđộng theo kiểu động

Website tĩnh thì nội dung của nó không động, tại sao Sáu lại nói đến từkhông động ở đây? Là vì các trang được thiết kế theo kiểu cố định, không

có cơ sở dữ liệu bên trong, bạn không thể thêm nội dung mới để tự độnghiển thị ra bên ngoài

Đối với trang web động thì bạn phải có kết nối tới cơ sở dữ liệu, nộidung và cài đặt của bạn sẽ được lưu vào cơ sở dữ liệu và được cập nhậtthường xuyên

Để một website hoạt động cần phải có 3 yếu tố cơ bản:

- Cần phải có tên miền (domain)

- Nơi lưu trữ website (host)

- Nội dung website hoặc cơ sở dữ liệu thông tin

Tên miền(domain): chính là địa chỉ của website, tên miền này là địa chỉ duynhất trên internet Một website bắt buộc phải có tên miền Có 2 loại tên miền làtên miền quốc tế và tên miền Việt Nam

Lưu trữ website(host): thông tin của website phải được lưu trữ trên một máytính ( server ) luôn hoạt động và kết nối 24/24 với mạng Internet Một server cóthể lưu trữ nhiều website, nếu sever này bị sự cố (tắt trong một thời điểm nào đó)thì không ai có thể truy cập được những website lưu trữ trên server đó Ngôn ngữlập trình

2.1.1.1 Html

Html là một ngôn ngữ đánh dấu siêu văn bản của một trang web đểcho trình duyệt hiểu và hiển thị Nó đưa ra cấu trúc đối với một tập tin vănbản thông thường mà nếu không phải là trình duyệt thì không có khả năngđọc được

Thành phần được xây dựng dựa trên các elements như các elements được đề cập ở trên (ảnh trên) Mỗi phần tử có một thẻ (tag)

mở (thẻ bắt đầu) và một thẻ đóng (thẻ kết thúc), với nội dung trang webđược đặt giữa hai thẻ này Các thẻ mở và đóng cho mỗi phần tử này đượcviết bên trong dấu ngoặc góc <>, tuy nhiên một thẻ đóng có thêm một dấugạch chéo phía trước </>

chính máy tính của bạn nên chỉ bạn mới có thể xem được website mà bạn

đã cài đặt trên localhost mà người khác không thể xem được

Như đã nhắc ở trên Localhost là một tập hợp nhiều các phần mềm(AMPP) được cài đặt trên máy tính Tùy theo các gói cài đặt của các nhàcung cấp khác nhau mà các folder chứa dữ liệu cài đặt có thể

là www hoặc htdocs được tạo trong thư mục cài đặt localhost Mặc địnhđường dẫn http://localhost/ sẽ trỏ đến thư mục www hoặc htdocs khi cácbạnbạn tạo một folder tại www hoặc htdocs thì đường dẫn sẽ

 Bảo mật quyền khai thác thông tin

 Bảo đảm vấn đề tranh chấp dữ liệu khi xảy ra

 Khi gặp các trục trặc sự cố thì phải bảo đảm vấn đề an toàn dữ liệu, không

bị mất dữ liệu

Trong cuộc sống hằng ngày chắc hẳn bạn có sử dụng qua các hệ thống CSDL nhưng bạn lại không biết Chẳng hạng hằng ngày bạn vào đọc bài tin tức từ các trang báo, ở mỗi trang họ có dùng một hệ thống lưu trữ dữ liệu và khi bạn vào xem hệ thống sẽ trả dữ liệu về màn hình trình duyệt cho bạn xem Rõ ràng bạn có thể truy cập một lúc nhiều trang và nhiều người có thể đọc một trang cùng một lúc được, nhưng vẫn đảm bảo tính toàn vẹn dữ liệu không bị sai lệch.

Hệ quản trị cơ sở dữ liệu MySQL là một hệ quản trị CSDL được sửdụng rất rộng rãi trên thế giới, đặc biệt là các ứng dụng website và nóthường đi kết hợp với ngôn ngữ lập trình PHP để xây dựng các ứng dụngwebsite Các hệ thống web ưa chuộng MySQL là tại vì tốc độ xử lý của nócao, tính dễ sử dụng và tương thích với các hệ điều hành thông dụng hiệnnay như Linix, Window,… MySQL có sử dụng ngôn ngữ truy vấn T-SQL

để thao tác dữ liệu

Hình 1

Khi được phát hành lần đầu, Apache là chương trình máy chủ mã nguồn mởduy nhất có khả năng cạnh tranh với chương trình máy chủ tương tựcủa Netscape Communications Corporation mà ngày nay được biết đến qua tênthương mại Sun Java System Web Server Từ đó trở đi, Apache đã không ngừngtiến triển và trở thành một phần mềm có sức cạnh tranh mạnh so với các chươngtrình máy chủ khác về mặt hiệu suất và tính năng phong phú Từ tháng 4 năm

1996, Apache trở thành một chương trình máy chủ HTTP thông dụng nhất Hơnnữa, Apache thường được dùng để so sánh với các phần mềm khác có chức năngtương tự Tính đến tháng 1 năm 2007 thì Apache chiếm đến 60% thị trường cácchương trình phân phối trang web

Apache được phát triển và duy trì bởi một cộng đồng mã nguồn mở dưới sựbảo trợ của Apache Software Foundation Apache được phát hành với giấyphép Apache License và là một phần mềm tự do và miễn phí

2.1.5 Socket

Socket là một giao diện lập trình ứng dụng (API-ApplicationProgramming Interface) Nó được giới thiệu lần đầu tiên trong ấn bảnUNIX - BSD 4.2 dưới dạng các hàm hệ thống theo cú pháp ngôn ngữ C(socket(), bind(), connect(), send(), receive(), read(), write(), close() , ).Ngày nay, Socket được hỗ trợ trong hầu hết các hệ điều hành như MSWindows, Linux và được sử dụng trong nhiều ngôn ngữ lập trình khácnhau: như C, C++, Java, Visual Basic, Visual C++,

Socket cho phép thiết lập các kênh giao tiếp mà hai đầu kênh đượcđánh dấu bởi hai cổng (port) Thông qua các cổng này một quá trình cóthể nhận và gởi dữ liệu với các quá trình khác

Hình 2

Có hai kiểu socket:

- Socket kiểu AF_UNIX chỉ cho phép giao tiếp giữa các quá trình trongcùng một máy tính

- Socket kiểu AF_INET cho phép giao tiếp giữa các quá trình trên nhữngmáy tính khác nhau trên mạng

Số hiệu cổng ( port number ) của socket

Để có thể thực hiện các cuộc giao tiếp, một trong hai quá trình phảicông bố số hiệu cổng của socket mà mình sử dụng Mỗi cổng giao tiếp thểhiện một địa chỉ xác định trong hệ thống Khi quá trình được gán một sốhiệu cổng, nó có thể nhận dữ liệu gởi đến cổng này từ các quá trình khác.Quá trình còn lại cũng được yêu cầu tạo ra một socket

Ngoài số hiệu cổng, hai bên giao tiếp còn phải biết địa chỉ IP củanhau Địa chỉ IP giúp phân biệt máy tính này với máy tính kia trên mạngTCP/IP Trong khi số hiệu cổng dùng để phân biệt các quá trình khác nhautrên cùng một máy tính

Xét kiến trúc của hệ thống mạng TCP/IP

Hình 4

Tầng vận chuyển giúp chuyển tiếp các thông điệp giữa các chương trìnhứng dụng với nhau Nó có thể hoạt động theo hai chế độ:

- Giao tiếp có nối kết, nếu sử dụng giao thức TCP

- Hoặc giao tiếp không nối kết, nếu sử dụng giao thức UDP

Socket là giao diện giữa chương trình ứng dụng với tầng vận chuyển Nó cho phép ta chọn giao thức sử dụng ở tầng vận chuyển là TCP hay UDPcho chương trình ứng dụng của mình

Bảng sau so sánh sự khác biệt giữa hai chế độ giao tiếp có nối kết vàkhông nối kết:

So sánh sự khác biệt giữa hai chế độ giao tiếp có nối kết và không nối kết

giữa hai bên giao tiếp

độ bảo đảm: có kiểm tra lỗi truyền

lại gói tin lỗi hay mất, bảo đảm thứ

tự đến của các gói tin

truyền chậm

hai bên giao tiếp

bảo đảm: Không kiểm tra lỗi, không phát hiện không truyền lại gói tin bị lỗi hay mất, không bảo đảm thứ tự đến của các gói tin

Hình 5

Bước 2: Chọn Start của Apache và MySQL như hình

Hình 6

Sau khi thực hiện xong Bước 1 và Bước 2 sẽ được kết quả như Hình 7,

như vậy là đã tạo được localhost và kích hoạt được CSDL (tùy theo máy

mà Ports của Apache sẽ khác nhau)

Hình 7

Bước 3: Chọn vào Admin của MySQL trình duyệt sẽ chạy như hình:

Hình 8

Bước 4: Tạo database, điền tên database vào ô ( ví dụ: chatbox ) và

nhấn Creat kết quả sẽ được như Hình 9 sau đó tạo một bảng gồm 3 cột,

đặt tên vào Name (ví dụ đặt tên là logs) và nhấn Go

Hình 9

Bước 5: Thiết đặt các thông số như Hình 10 và Save

haile) và trong thư mục vừa tạo đó sẽ dùng Notepad++ tạo 4 file chat.css,

index.php, logs.php, insert.php như Hình 11 (phần nội dung của 4 file trên sẽ

được trình bày tiếp theo đây)

Hình 11

Viết nội dung cho các file:

- index.php ( đây là phần chính của chương trình )

Hình 14

log.php

Hình 15

Sau khi viết xong 4 file và lưu lại, để truy cập vào chương trình chat trên

web mở trình duyệt web sau đó truy cập vào localhost:8080/haile ( vì máy

sử dụng port 8080 nên truy cập phải thêm :8080 )

Giao diện chương trình sau khi hoàn thành:

Hình 16

Có thể truy cập trên nhiều trình duyệt để chat với nhau Đặt nickname và nhắn những gì mình muốn vào textbox massage sau đó bấm vào button

send.

2.3 TÀI LIỆU THAM KHẢO

<link rel = "stylesheet" type="text/css" href ="chat.css"/> <body>

<img src="http://i.imgur.com/ikswVu6.jpg" width="300px"

document.getElementById('chatlogs').innerHTML=xmlhttp.responseText;} }

xmlhttp.open('GET','insert.php?uname= '+ uname + '&msg= '+ msg, true);

xmlhttp.send(); }$(document).ready(function(e)

{ $.ajaxSetup({cache:false});

setInterval(function(){$('#chatlogs').load('logs.php');}, 2000);

});</script></head><body><form name = "form1">

Nickname: <input type="text" name="uname" style="width:200px;" /><br/>

Message: <br /> <textarea name="msg" styles = "width: 200px; height: 70px"></textarea><br /><a href= "#" onclick= "submitChat()" class=

"button">Send</a><br /><br /><div id= "chatlogs">

LOADING </div></body>

Phụ lục 2: Code file chat.css

@charset "utf-8"; uName{ color:#00F; font-weight:bold; font-size:15px; font-family:Verdana, Geneva, sanas-serif; }.msg{color:#00f; font-size:15px; font-family:Georgia, "Times New Roman", Times,serif;}.button{

text-align:center; background-color:#00F; width:2px;

border-style:solid;

border-color:#000; color:#FFF; padding-left:10px; padding-right:10px; text-decoration:none;}

Phụ lục 3: Code file insert.php

<?php $uname = $_REQUEST['uname'];$msg = $_REQUEST['msg'];

$con = mysql_connect('localhost', 'root', '');mysql_select_db('chatbox', $con); mysql_query("INSERT INTO logs(`username`, `msg`) VALUES('$uname', '$msg')");$result1 = mysql_query("SELECT * FROM logs ORDER by id

DESC");while($extract = mysql_fetch_array($result1)){

echo "<span class='uname'>" $extract['username'] "</span:<span

class='msg'>" $extract['msg'] "</span><br>";}?>

Phụ lục 4: Code file logs.php

<?php $con = mysql_connect('localhost', 'root', '');

mysql_select_db('chatbox', $con);

$result1 = mysql_query("SELECT * FROM logs ORDER by id DESC");

while($extract = mysql_fetch_array($result1)){

echo "<span class='uname'>" $extract['username'] "</span:<span

class='msg'>" $extract['msg'] "</span><br>";}?>