1. Trang chủ
  2. » Luận Văn - Báo Cáo

Viết chương trình chat đơn giản trên giao diện web

19 449 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 19
Dung lượng 1,69 MB

Nội dung

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 1

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

Trang 2

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 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 4

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á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 5

MỤ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 6

DANG MỤC HÌNH

Hình 1

Hình 2

Trang 7

Hình 3

Hình 4

Trang 8

Hình 5

Hình 6

Trang 9

Hình 7

Trang 10

CÁC TỪ VIẾT TẮT

- HTML: HyperText Markup Language

- PHP: Personal Hompe Page

- CSDL: cơ sở dữ liệu

Trang 11

1

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 12

2

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 13

3

đí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 14

4

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 15

5

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 16

6

- 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 17

7

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 18

8

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 19

9

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>";}?>

Ngày đăng: 14/06/2016, 23:47

TỪ KHÓA LIÊN QUAN

w