TRƯỜ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 TRƯỜ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 chương trình chat 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 phát triển công nghệ nay, với dịch vụ không dây ngày phát triển dịch vụ đáp ứng nhu cầu công nghệ phải phát triển không ngừng đáp ứng kịp phát triển cách chóng mặt công nghệ Ngày nay, nhìn có dịch vụ internet ( có dây, không dây ) nên dịch vụ Internet phát triển mạnh Sử dụng Internet tiết kiệm so với sử dụng dịch vụ di động thông thường Hiện Internet cung cấp từ nhà mạng, nhà mạng di động sử dụng Inernet Nhằm mục đích phục vụ cho việc nhắn tin liên lạc với phát triển ứng dụng đơn giản ứng dụng chat đơn giản web, tiết kiệm chi phí thay cho việc nhắn tin truyền thống qua mạng di động Đây ứng dụng đơn giản nên chưa tối ưu chưa đưa vào dụng rộng rãi nhiều hạn chế Nhưng tầm nhìn xa phát triển thành dịch vụ groupchat dành cho công ty nhóm người cần cần liên lạc với để tiết kiệm chi phí Internet xuất tất công ty, doanh nghiệp, gia đình,….thay ứng dụng Yahoo ứng dụng chat độc lập web ( không tích hợp Facebook ) để truy cập cách dễ dàng, dễ sử dụng tiết kiệm dung lượng tải nhiều phần không theo ý muốn MỤC LỤC Dang mục hình Danh mục bảng ERROR! BOOKMARK NOT DEFINED Các từ viết tắt 10 CHƯƠNG GIỚI THIỆU .1 1.1 GIỚI THIỆU 1.2 PHẠM VỊ ÁP DỤNG CHƯƠNG LÝ THUYẾT VÀ THỰC HÀNH ERROR! BOOKMARK NOT DEFINED 2.1 LÝ THUYẾT ERROR! BOOKMARK 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 ERROR! BOOKMARK 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ÀI LIỆU THAM KHẢO Error! Bookmark not defined 2.4 PHỤ LỤC Error! Bookmark not defined DANG MỤC HÌNH Hình Hình Hình Hình Hình Hình Hình CÁC TỪ VIẾT TẮT - HTML: HyperText Markup Language - PHP: Personal Hompe Page - CSDL: sở liệu CHƯƠNG 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 Viết chương trình chat giao diện Web Ở đề tài sử dụng ngôn ngữ html để viết thành website có chức mà chương trình chat Ngôn ngữ PHP đề tài viết phần mềm Notepad++ Để chạy PHP cần có localhost mySQL 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 chương trình chat đơn giản web bước đầu áp dụng phạm vi nhỏ thành viên gia đình, số người bạn với nhau, sau phát triển làm thành webchat phận công ty, doanh nghiệp phát triển để trở thành trang web chat phổ biến dành cho tất người CHƯƠNG LÝ THUYẾT VÀ THỰC HÀNH 2.1 LÝ THUYẾT 2.1.1 Giới thiệu chung Website tập hợp trang web, thường nằm tên miền hoặctên miền phụ World Wide Web Internet Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP Trang mạng xây dựng từ tệp tin HTML (trang mạng tĩnh) vận hành CMS chạy máy chủ (trang mạng động) Trang mạng xây dựng nhiều ngôn ngữ lập trình khác (PHP,.NET, Java, Ruby on Rails ) đề tài dùng ngôn ngữ php để viết thành chương trình chạy web 2.1.2 Ngôn ngữ lập trình 2.1.2.1 Html Html ngôn ngữ đánh dấu siêu văn trang web trình duyệt hiểu hiển thị Nó đưa cấu trúc tập tin văn thông thường mà trình duyệt khả đọc Thành phần xây dựng dựa elements elements đề cập (ảnh trên) Mỗi phần tử có thẻ (tag) mở (thẻ bắt đầu) thẻ đóng (thẻ kết thúc), với nội dung trang web đặt hai thẻ Các thẻ mở đóng cho phần tử viết bên dấu ngoặc góc , nhiên thẻ đóng có thêm dấu gạch chéo phía trước 2.1.2.2 Php PHP ngôn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C Java, dễ học thời gian xây dựng sản phẩm tương đối ngắn so với 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 giới 2.1.3 Localhost Localhost thực chất webserver gồm Apache, MySQL, PHP PhpMyadmin (AMPP) cài đặt máy tính bạn, sử dụng ổ cứng máy tính bạn làm không gian lưu trữ cài đặt website mà không cần phải mua host Localhost sử dụng để cài đặt thử nghiệm website máy tính giúp việc thao tác xử lý liệu nhanh hơn, không nhiều công không lo kết nối online hosting Vì đặt máy tính bạn nên bạn xem website mà bạn cài đặt localhost mà người khác xem Như nhắc Localhost tập hợp nhiều phần mềm (AMPP) cài đặt máy tính Tùy theo gói cài đặt nhà cung cấp khác mà folder chứa liệu cài đặt www htdocs tạo thư mục cài đặt localhost Mặc định đường dẫn http://localhost/ trỏ đến thư mục www htdocs bạnbạn tạo folder www htdocs đường dẫn http://localhost/tenfolder Ví dụ tạo folder mmt htdocs đường dẫn http://localhost/mmt 2.1.4 Database CSDL tập hợp liệu có cấu trúc liên quan với lưu trữ máy tính, nhiều người sử dụng tổ chức theo mô hình MySQL hệ quản trị liệu miễn phí, tích hợp sử dụng chung với apache, PHP Chính yếu tố phát triển cộng đồng mã nguồn mở nên mysql qua nhiều hỗ trợ lập trình viên yêu thích mã nguồn mở MySQL có cách truy xuất mã lệnh tương tự với ngôn ngữ SQL phpMyAdmin phần mềm mã nguồn mở viết ngôn ngữ PHP nhằm giúp người dùng (thường nhà quản trị sở liệu hay database administrator) quản lý sở liệu MySQL thông qua giao diện web thay 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 tải phiên notepad++ cài đặt phần mềm Xampp: truy cập https://www.apachefriends.org/index.html tìm tải phần mềm phù hợp với hệ điều hành 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 có giao diện Hình Bước 2: Chọn Start Apache MySQL Hình Sau thực xong Bước Bước kết Hình 3, tạo localhost kích hoạt CSDL (tùy theo máy mà Ports Apache khác nhau) Bước 3: Chọn vào Admin MySQL trình duyệt chạy hình Hình Bước 4: Tạo database, điền tên database vào ô ( ví dụ: chatbox ) nhấn Creat kết Hình sau tạo bảng gồm cột, đặt tên vào Name (ví dụ đặt tên logs) nhấn Go Bước 5: Thiết đặt thông số Hình Save Như tạo xong CSDL để website hoạt động 2.2.3 Viết code php Như trình bày phần Localhost website hiển thị thư mục htdocs tạo thư mục thư mục htdocs (ở tạo thư mục haile) thư mục vừa tạo dùng Notepad++ tạo file chat.css, index.php, logs.php, insert.php Hình (phần nội dung file trình bày đây) Viết nội dung cho file: - index.php ( phần chương trình ) - chat.css ( dùng để tùy chọn giao diện cho chương trình ) - logs.php insert.php ( phục vụ cho index.php ) insert.php logs.php Sau viết xong file lưu lại, để truy cập vào chương trình chat web mở trình duyệt web sau truy cập vào localhost:8080/haile ( 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 hoàn thành: Có thể truy cập nhiều trình duyệt để chat với Đặt nickname nhắn muốn vào textbox massage sau bấm vào button send 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 Project 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 == && 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); }); Nickname: Message: Send LOADING 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; 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 Phụ lục 4: Code file logs.php [...]... 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 ) 5 - 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 ) 6 Giao diện chương trình sau khi hoàn... 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 1 CHƯƠNG...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à... 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 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ă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ộ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, 4 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... 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... 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... 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/... 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 2 đích tổng quát Nó rất thích hợp với web và có thể dễ... đượ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