Nhưng tầm nhìn xa có thể phát triển thành một dị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ạc với nhau để tiết kiệm được chi phí vì Internet hầu như xu
Trang 1TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH
KHOA ĐIỆN ĐIỆN TỬ
BỘ MÔN ĐIỆN TỬ 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
Trang 2TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH
KHOA ĐIỆN ĐIỆN TỬ
BỘ MÔN ĐIỆN TỬ VIỄN THÔNG
ĐỒ ÁN MÔN HỌC
Viết mộ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
Trang 4TÓ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át triể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 đâu cũ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ất mạ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ông thườ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ới nhau 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ản trê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ột dị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ạc vớ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
Trang 5MỤC LỤC
Dang mục hình 6
Danh mục bảng ERROR! BOOKMARK NOT DEFINED Các từ viết tắt 10
CHƯƠNG 1 GIỚI THIỆU 1
1.1 GIỚITHIỆU 1
1.2 PHẠMVỊÁPDỤNG 1
CHƯƠNG 2 LÝ THUYẾT VÀ THỰC HÀNH ERROR! BOOKMARK NOT
DEFINED
2.1 LÝ THUYẾT E RROR ! B OOKMARK NOT DEFINED
2.1.1 Giới thiệu chung Error! Bookmark not defined
2.1.2 Ngôn ngữ lập trình Error! Bookmark not defined
2.2 THỰC HÀNH E RROR ! B OOKMARK NOT DEFINED
2.2.1 Cài phần mềm Error! Bookmark not defined
2.2.2 Tạo CSDL Error! Bookmark not defined
2.2.3 Viết code php Error! Bookmark not defined
2.3 TÀILIỆUTHAMKHẢO Error! Bookmark not defined
2.4 PHỤLỤC Error! Bookmark not defined
Trang 6DANG MỤC HÌNH
Hình 1
Hình 2
Trang 7Hình 3
Hình 4
Trang 8Hình 5
Hình 6
Trang 9Hình 7
Trang 10CÁC TỪ VIẾT TẮT
- HTML: HyperText Markup Language
- PHP: Personal Hompe Page
- CSDL: cơ sở dữ liệu
Trang 111
CHƯƠNG 1
GIỚI THIỆU
1.1 GIỚI THIỆU
Project môn học Mạng máy tính, viễn thông với đề tài là Viết một chương trình chat trên giao diện Web Ở đề tài này sẽ sử dụng ngôn ngữ html để viết thành một website có chức năng mà một chương trình chat Ngôn ngữ PHP trong đề tài được viết trên phần mềm Notepad++ Để chạy được PHP thì cần có localhost và mySQL vì thế sẽ sử dụng phần mềm Xampp để cấu hình cho localhost để chạy chương trình php đã viết
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ụng trong 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ới nhau, sau đó có thể phát triển làm thành một webchat trong bộ phận của một công
ty, doanh nghiệp và có thể phát triển hơn nữa để trở thành một trang web chat phổ biến dành cho tất cả mọi người
Trang 122
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 là một tập hợp trang web, thường chỉ nằm trong một tên miền hoặctên miền phụ trên World Wide Web của Internet Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP Trang mạng có thể được xây dựng từ các tệp tin HTML (trang mạng tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (trang mạng động) Trang mạng có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP,.NET, Java, Ruby on Rails ) ở đề tài này sẽ dùng ngôn ngữ php để viết thành một chương trình chạy trên nền web
2.1.2 Ngôn ngữ lập trình
2.1.2.1 Html
duyệt hiểu và hiển thị Nó đưa ra cấu trúc đối với một tập tin văn bả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 được viết bên trong dấu ngoặc góc <>, tuy nhiên một thẻ đóng có thêm một dấu gạch chéo phía trước </>
2.1.2.2 Php
PHP là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục
Trang 133
đích tổng quát Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML
Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành mộtngôn ngữ lập trình web phổ biến nhất thế giới
2.1.3 Localhost
Localhost thực chất chính là một webserver gồm Apache, MySQL, PHP và PhpMyadmin (AMPP) được cài đặt chính trên máy tính của bạn, sử dụng ổ cứng máy tính của bạn làm không gian lưu trữ và cài đặt website mà không cần phải mua host
Localhost được sử dụng để cài đặt và thử nghiệm các website trên máy tính giúp việc thao tác và xử lý dữ liệu nhanh hơn, không mất quá nhiều công và không
lo mất kết nối như online hosting Vì được đặt trên 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ác bạnbạn tạo một folder tại www hoặc htdocs thì đường dẫn sẽ là http://localhost/tenfolder
Ví dụ khi tạo folder mmt trong htdocs thì đường dẫn sẽ là http://localhost/mmt
2.1.4 Database
CSDL là tập hợp các dữ liệu có cấu trúc và liên quan với nhau được lưu trữ trên máy tính, được nhiều người sử dụng và được tổ chức theo một mô hình MySQL là hệ quản trị dữ liệu miễn phí, được tích hợp sử dụng chung với apache, PHP Chính yếu tố phát triển trong cộng đồng mã nguồn mở nên mysql đã qua rất nhiều sự hỗ trợ của những lập trình viên yêu thích mã nguồn
Trang 144
mở MySQL cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL
phpMyAdmin là phần mềm mã nguồn mở được viết bằng ngôn ngữ PHP nhằm giúp người dùng (thường là các nhà quản trị cơ sở dữ liệu hay database administrator) có thể quản lý cơ sở dữ liệu MySQL thông qua giao diện web thay
vì sử dụng giao diện cửa sổ dòng lệnh (command line interface)
2.2 THỰC HÀNH
2.2.1 Cài phần mềm
Notepad++: truy cập https://notepad-plus-plus.org/ tìm và tải phiên bản mới nhất của notepad++ về và cài đặt phần mềm
Xampp: truy cập https://www.apachefriends.org/index.html tìm và tải phần mềm phù hợp với hệ điều hành của máy sau đó cài đặt phần mềm
2.2.2 Tạo CSDL
Bước 1: Chạy phần mềm XAMPP Control Panel sẽ có giao diện như Hình 1
Bước 2: Chọn Start của Apache và MySQL như Hình 2
Sau khi thực hiện xong Bước 1 và Bước 2 sẽ được kết quả như Hình 3, 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)
Bước 3: Chọn vào Admin của MySQL trình duyệt sẽ chạy như hình Hình 4
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 5 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
Bước 5: Thiết đặt các thông số như Hình 6 và Save
Như vậy đã tạo xong một CSDL để website có thể hoạt động
2.2.3 Viết code php
Như đã trình bày ở phần Localhost thì website sẽ hiển thị trong thư mục htdocs
vì vậy sẽ tạo một thư mục trong thư mục htdocs (ở đây sẽ tạo thư mục haile) và
trong thư mục vừa tạo đó sẽ dùng Notepad++ tạo 4 file chat.css, index.php,
Trang 155
logs.php, insert.php như Hình 7 (phần nội dung của 4 file trên sẽ được trình bày
tiếp theo đây)
Viết nội dung cho các file:
- index.php ( đây là phần chính của chương trình )
- chat.css ( dùng để tùy chọn giao diện cho chương trình )
Trang 166
- logs.php và insert.php ( phục vụ cho index.php )
insert.php
logs.php
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 )
Trang 177
Giao diện chương trình sau khi hoàn thành:
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
Trang 188
2.3 TÀI LIỆU THAM KHẢO
http://thachpham.com/thu-thuat/cai-dat-localhost-xampp.html
https://www.youtube.com/
2.4 PHỤ LỤC
Phụ lục 1: Code file index.php
<?php ?> <html> <head> <title>Project</title>
<link rel = "stylesheet" type="text/css" href ="chat.css"/> <body>
<img src="http://i.imgur.com/ikswVu6.jpg" width="300px" height="200px" />
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script> function submitChat(){
if(form1.uname.value == '' || form1.msg.value == '' ){
alert('Sao khong nhap gi ma gui vay'); return; } form1.uname.readOnly = true; form1.uname.style.border = 'none'; var uname = form1.uname.value;
var msg = form1.msg.value; var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 &&
xmlhttp.status == 200){
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;
Trang 199
font-family:Georgia, "Times New Roman", Times,serif;}.button{
text-align:center; background-color:#00F; border-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>";}?>