Viết web chat đơn giản

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 GVHD: TS Đỗ Đình Thuấn 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 chúng tơ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 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 GIỚI THIỆU 1.1 GIỚI THIỆU 1.2 PHẠM VI ÁP DỤNG .1 CHƯƠNG LÝ THUYẾT VÀ THỰC HÀNH 2.1 LÝ THUYẾT 2.1.1 Lý thuyết chung .2 2.1.1.1 Html 2.1.1.2 Php 2.1.2 Localhost 2.1.3 Database 2.1.4 Apache 2.1.5 Socket 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] [Hình 2] [Hình 3] [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 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 hay gọi trang web, loại hình bao gồm trang văn tác giả tự viết chia sẻ lại viết người khác mặc nội dung Về mặc hình thức trình bày thể thẻ HTML định dạng CSS Nội dung ngồi văn bao gồm hình ảnh, khung, nút,… nơm na bạn truy cập hàng ngày mạng internet Khi bạn ghé thăm tới tên miền tên miền hiển thị nội dung cho bạn xem gọi trang web Có loại website mà bạn cần biết đến website hoạt động theo kiểu tĩnh website hoạt động theo kiểu động Website tĩnh nội dung khơng động, Sáu lại nói đến từ khơng động đây? Là trang thiết kế theo kiểu cố định, khơng có sở liệu bên trong, bạn thêm nội dung để tự động hiển thị bên ngồi Đối với trang web động bạn phải có kết nối tới sở liệu, nội dung cài đặt bạn lưu vào sở liệu cập nhật thường xuyên Để website hoạt động cần phải có yếu tố bản: - Cần phải có tên miền (domain) - Nơi lưu trữ website (host) - Nội dung website sở liệu thơng tin Tên miền(domain): địa website, tên miền địa internet Một website bắt buộc phải có tên miền Có loại tên miền tên miền quốc tế tên miền Việt Nam Lưu trữ website(host): thông tin website phải lưu trữ máy tính ( server ) ln hoạt động kết nối 24/24 với mạng Internet Một server lưu trữ nhiều website, sever bị cố (tắt thời điểm đó) khơng truy cập website lưu trữ server Ngơn ngữ lập trình 2.1.1.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à khơng phải trình duyệt khơng có 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 Cấu trúc chương trình html: Tiêu đề duyệt web Nội dung website 2.1.1.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 qt 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 Cấu trúc bản: PHP có thẻ bắt đầu kết thúc giống với ngôn ngữ HTML Chỉ khác, PHP có nhiều cách để thể Cách : Cú pháp chính: Cách 2: Cú pháp ngắn gọn Cách 3: Cú pháp giống với ASP Cách 4: Cú pháp bắt đầu script 2.1.2 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.3 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 Việc sử dụng hệ thống CSDL khắc phục khuyết điểm  cách lưu trữ dươi dạng hệ thống tập tin, là: Giảm trùng lặp thông tin mức thấp nhất, đảm bảo tính qn tồn  vẹn liệu Đảm bảo liệu truy xuất theo nhiều cách khác nhau, từ nhiều  người khác nhiều ứng dụng khác Tăng khả chia thông tin Ví dụ ta đặt hệ thống liệu Việt Nam bên Mỹ có password login vào ta hồn tồn vào hệ thống để đọc tin Tuy nhiên việc sử dụng hệ quản trị CSDL lại có phiền hà khơng     nhỏ sau đây: Phải đảm bảo tính chủ quyền liệu, sử dụng có tính chất chia cao Bảo mật quyền khai thác thông tin Bảo đảm vấn đề tranh chấp liệu xảy Khi gặp trục trặc cố phải bảo đảm vấn đề an tồn liệu, không bị liệu Trong sống ngày hẳn bạn có sử dụng qua hệ thống CSDL bạn lại Chẳng hạng ngày bạn vào đọc tin tức từ trang báo, trang họ có dùng hệ thống lưu trữ liệu bạn vào xem hệ thống trả liệu hình trình duyệt cho bạn xem Rõ ràng bạn truy cập lúc nhiều trang nhiều người đọc trang lúc được, đảm bảo tính tồn vẹn liệu khơng bị sai lệch Hệ quản trị sở liệu MySQL hệ quản trị CSDL sử dụng rộng rãi giới, đặc biệt ứng dụng website thường kết hợp với ngơn ngữ lập trình PHP để xây dựng ứng dụng website Các hệ thống web ưa chuộng MySQL tốc độ xử lý cao, tính dễ sử dụng tương thích với hệ điều hành thơng dụng Linix, Window,… MySQL có sử dụng ngơn ngữ truy vấn T-SQL để thao tác liệu Hình 2.1.4 Apache Apache chương trình máy chủ HTTP chương trình dành cho máy chủ đối thoại qua giao thức HTTP Apache chạy hệ điều hành tương tự Unix, Microsoft Windows, Novell Netware hệ điều hành khác Apache đóng vai trò quan trọng q trình phát triển mạng web giới (tiếng Anh: World Wide Web) Khi phát hành lần đầu, Apache chương trình máy chủ mã nguồn mở có khả cạnh tranh với chương trình máy chủ tương tự Netscape Communications Corporation mà ngày biết đến qua tên thương mại Sun Java System Web Server Từ trở đi, Apache không ngừng tiến triển trở thành phần mềm có sức cạnh tranh mạnh so với chương trình máy chủ khác mặt hiệu suất tính phong phú Từ tháng năm 1996, Apache trở thành chương trình máy chủ HTTP thơng dụng Hơn nữa, Apache thường dùng để so sánh với phần mềm khác có chức tương tự Tính đến tháng năm 2007 Apache chiếm đến 60% thị trường chương trình phân phối trang web Apache phát triển trì cộng đồng mã nguồn mở bảo trợ Apache Software Foundation Apache phát hành với giấy phép Apache License phần mềm tự miễn phí 2.1.5 Socket Socket giao diện lập trình ứng dụng (API-Application Programming Interface) Nó giới thiệu lần ấn UNIX - BSD 4.2 dạng 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 hỗ trợ hầu hết hệ điều hành MS Windows, Linux sử dụng nhiều ngơn ngữ lập trình khác nhau: C, C++, Java, Visual Basic, Visual C++, Socket cho phép thiết lập kênh giao tiếp mà hai đầu kênh đánh dấu hai cổng (port) Thơng qua cổng q trình nhận gởi liệu với trình khác Hình Có hai kiểu socket: - Socket kiểu AF_UNIX cho phép giao tiếp q trình - máy tính Socket kiểu AF_INET cho phép giao tiếp trình máy tính khác mạng Số hiệu cổng ( port number ) socket Để thực giao tiếp, hai trình phải cơng bố số hiệu cổng socket mà sử dụng Mỗi cổng giao tiếp thể địa xác định hệ thống Khi trình gán số hiệu cổng, nhận liệu gởi đến cổng từ trình khác Q trình lại u cầu tạo socket Ngoài số hiệu cổng, hai bên giao tiếp phải biết địa IP Địa IP giúp phân biệt máy tính với máy tính mạng TCP/IP Trong số hiệu cổng dùng để phân biệt trình khác máy tính Hình Trong hình trên, địa trình B1 xác định thông tin: (Host B, Port B1): Số hiệu cổng gán cho Socket phải phạm vi máy tính đó, có giá trị khoảng từ đến 65535 (16 bits) Trong đó, cổng từ đến 1023 gọi cổng hệ thống dành riêng cho trình hệ thống Các cổng mặc định số dịch vụ mạng thông dụng: Các cổng mặc định số dịch vụ mạng thông dụng Số hiệu cổng Quá trình hệ thống Dịch vụ Echo 21 Dịch vụ FTP 23 Dịch vụ Telnet 25 Dịch vụ E-mail (SMTP) 80 Dịch vụ Web (HTTP) 110 Dịch vụ E-mail (POP) Lập trình web sử dụng port 80 Các chế độ giao tiếp Xét kiến trúc hệ thống mạng TCP/IP Hình Tầng vận chuyển giúp chuyển tiếp thông điệp chương trình ứng dụng với Nó hoạt động theo hai chế độ: - Giao tiếp có nối kết, sử dụng giao thức TCP - Hoặc giao tiếp không nối kết, sử dụng giao thức UDP Socket giao diện 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 TCP hay UDP cho chương trình ứng dụng Bảng sau so sánh khác biệt hai chế độ giao tiếp có nối kết không nối kết: So sánh khác biệt hai chế độ giao tiếp có nối kết khơng nối kết Chế độ có nối kết (TCP)  Tồn kênh giao tiếp ảo Chế độ không nối kết (UDP)  Không tồn kênh giao tiếp ảo 10    hai bên giao tiếp Dữ liệu gởi theo chế độ 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 gói tin Dữ liệu xác, Tốc độ  truyền chậm hai bên giao tiếp Dữ liệu gởi theo chế độ không bảo đảm: Không kiểm tra lỗi, khơng phát khơng truyền lại gói tin bị lỗi hay mất, không bảo đảm thứ tự đến gói tin Dữ liệu khơng xác, tốc độ truyền nhanh Thích hợp cho ứng dụng cần tốc độ, khơng cần xác cao: truyền âm thanh, hình ảnh 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 11 Hình Bước 2: Chọn Start Apache MySQL hình 12 Hình Sau thực xong Bước Bước kết Hình 7, tạo localhost kích hoạt CSDL (tùy theo máy mà Ports Apache khác nhau) Hình Bước 3: Chọn vào Admin MySQL trình duyệt chạy hình: 13 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 Hình Bước 5: Thiết đặt thơng số Hình 10 Save 14 Hình 10 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 11 (phần nội dung file trình bày đây) Hình 11 Viết nội dung cho file: - index.php ( phần chương trình ) 15 Hình 12 - chat.css ( dùng để tùy chọn giao diện cho chương trình ) Hình 13 - insert.php logs.php ( phục vụ cho index.php ) insert.php 16 Hình 14 log.php Hình 15 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 hồn thành: 17 Hình 16 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 18 2.3 TÀI LIỆU THAM KHẢO http://thachpham.com/thu-thuat/cai-dat-localhost-xampp.html https://www.youtube.com/ https://voer.edu.vn/c/gioi-thieu-ve-socket/761b0302/cf983f6f 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: 19 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; borderstyle: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 20 ... với chúng tơ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... 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... 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++ Để