Phát triển ứng dụng quản lý sinh viên ngoại trú trên thiết bị di động

TRƢỜNG ĐẠI HỌC TÂY BẮC

BÁO CÁO TỔNG KẾT
ĐỀ TÀI NGHIÊN CỨU KHOA HỌC CẤP CƠ SỞ

PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ SINH VIÊN NGOẠI TRÚ
TRÊN THIẾT BỊ DI ĐỘNG

Mã ngành: KT3
Thuộc nhóm ngành khoa học: Khoa học Tự nhiên

Sơn La, năm 2017


TRƢỜNG ĐẠI HỌC TÂY BẮC
=====o0o=====

BÁO CÁO TỔNG KẾT
ĐỀ TÀI NGHIÊN CỨU KHOA HỌC CỦA SINH VIÊN

PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ SINH VIÊN NGOẠI TRÚ
TRÊN THIẾT BỊ DI ĐỘNG

Mã ngành: KT3
Thuộc nhóm ngành khoa học: Khoa học Tự nhiên
Sinh viên thực hiện: Lƣu Hồng Quân

Giới Tính: Nam

Dân tộc: Kinh

Dƣơng Văn Toản Giới Tính: Nam

Dân tộc: Kinh

Giới Tính: Nam

Dân tộc: Kinh

Lê Minh Sáng

Lớp: K55 ĐH CNTT

Khoa: Toán - Lý - Tin

Năm thứ: 03/Số năm đào tạo:04
Ngành học: Công nghệ Thông Tin
Sinh viên chịu trách nhiệm chính: Lƣu Hồng Quân
Ngƣời hƣớng dẫn: ThS. Nguyễn Duy Hiếu

Sơn La, năm 2017


LỜI CẢM ƠN
Sau một thời gian học tập, nghiên cứu và triển khai đề tài: “Phát triển ứng
dụng quản lý sinh viên ngoại trú trên thiết bị di động”, đến nay chúng tôi đã
hoàn thành đề tài nghiên cứu của mình.
Chúng tôi xin bày tỏ tấm lòng biết ơn sâu sắc nhất tới thầy giáo – Thạc sỹ
Nguyễn Duy Hiếu đã trực tiếp hướng dẫn chúng tôi trong suốt quá trình chúng
tôi thực hiện đề tài nghiên cứu khoa học này.
Đồng thời chúng tôi cũng chân thành cảm ơn tới lãnh đạo Nhà trường, Ban

chủ nhiệm Khoa cùng các thầy cô giáo đã giúp đỡ, tạo điều kiện để chúng tôi có
cơ hội nghiên cứu, học tập và hoàn thành đề tài nghiên cứu khoa học này.
Do hạn chế về trình độ chuyên môn và thời gian thực hiện đề tài không
tránh khỏi những thiếu sót, rất mong nhận được sự góp ý của thầy cô để chúng
tôi có thể hoàn thành tốt nhất đề tài nghiên cứu này.
Chúng tôi xin chân thành cảm ơn!
Sơn La, tháng 5 năm 2017
Sinh viên
Lƣu Hồng Quân
Dƣơng Văn Toản
Lê Minh Sáng


MỤC LỤC
PHẦN MỞ ĐẦU..............................................................................................................1
1. Lý do chọn đề tài ..........................................................................................................1
2. Mục đích nghiên cứu ....................................................................................................1
3. Đối tượng nghiên cứu ...................................................................................................1
4. Phạm vi nghiên cứu ......................................................................................................1
5. Phương pháp nghiên cứu ..............................................................................................1
6. Bố cục đề tài..................................................................................................................2
CHƢƠNG 1: TỔNG QUAN VỀ THIẾT KẾ WEB ....................................................3
1.1. Lịch sử hình thành của thiết kế web ..........................................................................3
1.2. Xu hướng phát triển của thiết kế web .......................................................................5
1.2.1. Mobile-first ....................................................................................................5
1.2.2. Thiết kế website - Responsive Web Design ..................................................6
1.2.3. Sử dụng các framework của CSS và JavaScript ...........................................6
1.3. Căn bản về HTML/HTML5 ......................................................................................6
1.3.1. HTML là gì?...................................................................................................6
1.3.2. Tập tin HTML là gì? ......................................................................................7

1.3.3. Thẻ trong HTML............................................................................................7
1.3.4. Cấu trúc của HTML .......................................................................................7
1.3.5. Các phiên bản HTML ....................................................................................8
1.4. Căn bản về CSS/CSS3 ...............................................................................................8
1.4.1. CSS là gì? .......................................................................................................8
1.4.2. Lịch sử CSS ...................................................................................................8
1.4.3. Lợi thế của CSS .............................................................................................9
1.5. Căn bản về JavaScript ................................................................................................9
1.5.1. JavaScript là gì? .............................................................................................9
1.5.2. Các lợi thế của JavaScript ............................................................................10
1.5.3. Hạn chế của JavaScript ................................................................................10
CHƢƠNG 2. GIỚI THIỆU VỀ LẬP TRÌNH ỨNG DỤNG TRÊN THIẾT BỊ DI
ĐỘNG .............................................................................................................................11
2.1. Sự phát triển của thiết bị di động.............................................................................11
2.2. Giới thiệu về lập trình ứng dụng trên thiết bị di động ............................................12


2.2.1. Android ........................................................................................................12
2.2.2. iOS................................................................................................................13
2.2.3. Windows Phone ...........................................................................................14
2.3. Xu hướng phát triển của ứng dụng thiết bị di động ................................................14
2.3.1. Dùng các ứng dụng Native ..........................................................................15
2.3.2. Dùng Framework .........................................................................................18
CHƢƠNG 3: TỔNG QUAN VỀ JQUERY MOBILE ..............................................21
3.1 Giới thiệu về JQuery .................................................................................................21
3.1.1. JQuery là gì? ................................................................................................21
3.1.2. JQuery dùng để làm gì? ...............................................................................21
3.2. JQuery Mobile .........................................................................................................22
3.2.1. JQuery Mobile là gì?....................................................................................22
3.2.2. Lịch sử của JQuery Mobile..........................................................................22

3.2.3. Tại sao sử dụng JQuery Mobile? .................................................................23
3.2.4. Các tính năng cơ bản của JQuery Mobile ...................................................23
3.2.5. Những vấn đề khi xây dựng App Mobile ....................................................23
3.2.6. Cách dùng JQuery Mobile ...........................................................................24
3.2.7. Cấu trúc của một trang JQuery Mobile .......................................................24
3.2.8. Đối tượng JQuery Mobile ............................................................................27
3.2.9. Tóm tắt các thành phần giao diện người dùng ............................................31
CHƢƠNG 4. PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ SINH VIÊN NGOẠI TRÚ
TRÊN THIẾT BỊ DI ĐỘNG ........................................................................................33
4.1. Lựa chọn mục tiêu ...................................................................................................33
4.2. Phân tích yêu cầu .....................................................................................................33
4.3. Thiết kế mức khái niệm ...........................................................................................34
4.3.1. Xác định tác nhân ........................................................................................34
4.3.2. Mô hình Use – Case người dùng .................................................................34
4.3.3. Mô hình hóa tương tác đối tượng ................................................................35
4.3.4. Biểu đồ lớp thực thể liên kết........................................................................44
4.4. Thiết kế giao diện người dùng .................................................................................44
4.4.1. Màn hình đăng nhập khi bắt đầu ứng dụng .................................................44
4.4.2. Các màn hình sau khi chọn người dùng ......................................................46


KẾT LUẬN VÀ KIẾN NGHỊ ......................................................................................55
1. Kết luận .......................................................................................................................55
2. Kiến nghị .....................................................................................................................55
TÀI LIỆU THAM KHẢO ............................................................................................56


DANH SÁCH HÌNH ẢNH
Hình 1.1. Thiết kế phù hợp với kích thước màn hình của thiết bị ...................................6
Hình 1.2. Cấu trúc cơ bản của HTML ..............................................................................7

Hình 2.1. Biểu đồ phân tích thị phần ứng dụng của 3 hệ điều hành ..............................12
Hình 2.2. Cửa hàng ứng dụng CH Play của Android.....................................................13
Hình 2.3. Cửa hàng ứng dụng App Store của Apple .....................................................14
Hình 2.4. Cửa hàng ứng dụng của Windows Phone ......................................................14
Hình 2.5. Giao diện ứng dụng Visual Studio .................................................................15
Hình 2.6. Giao diện ứng dụng Android Studio ..............................................................16
Hình 2.7. Giao diện ứng dụng Xcode .............................................................................17
Hình 2.8. Giao diện ứng dụng PhoneGap ......................................................................19
Hình 3.1. Các nền tảng di động đang được JQuery Moblie hỗ trợ ................................22
Hình 3.2. Chèn đường dẫn từ CDN của jQuyery Mobile vào trang html .....................24
Hình 3.3. Tạo một trang JQuery Mobile ........................................................................25
Hình 3.4. Demo cấu trúc trang của JQuery Mobile .......................................................25
Hình 3.5. Kết cấu chung của một ứng dụng web JQuery Mobile..................................26
Hình 3.6. Các phần tử giao diện người dùng JQuery Mobile ........................................31
Hình 4.1. Mô hình Use – Case người dùng ....................................................................34
Hình 4.2. Trình tự đăng nhập của QTV..........................................................................35
Hình 4.3. Trình tự cấp quyền cho GV của QTV ............................................................36
Hình 4.4. Trình tự cấp quyền cho SV của QTV.............................................................36
Hình 4.5. Trình tự thêm GV của QTV ...........................................................................37
Hình 4.6. Trình tự sửa GV của QTV ..............................................................................37
Hình 4.7. Trình tự xóa GV của QTV..............................................................................38
Hình 4.8. Trình tự thêm SV của QTV ............................................................................38
Hình 4.9. Trình tự sửa thông tin SV của QTV ...............................................................39
Hình 4.10. Trình tự xóa SV của QTV ............................................................................39
Hình 4.11. Trình tự đăng nhập của GV ..........................................................................40
Hình 4.12. Chức năng Xem - Sửa thông tin của GV .....................................................40
Hình 4.13. Chức năng Xem - Sửa thông tin của QTV ...................................................41
Hình 4.14. Trình tự thêm SV của GV ............................................................................41
Hình 4.15. Trình tự sửa thông tin SV của GV ...............................................................42

Hình 4.16. Trình tự xóa SV của GV ...............................................................................42
Hình 4.17. Trình tự đăng nhập của SV...........................................................................43
Hình 4.18. Trình tự Xem – Sửa thông tin của SV..........................................................43
Hình 4.19. Biểu đồ thực thể liên kết ...............................................................................44
Hình 4.20. Màn hình đăng nhập của ứng dụng ..............................................................45
Hình 4.21. Màn hình quản lý của quản trị viên ..............................................................46
Hình 4.22. Màn hình quản lý giáo viên của quản trị viên ..............................................47
Hình 4.23. Màn hình quản lý cố vấn học tập của quản trị viên .....................................48
Hình 4.24. Màn hình quản lý lớp của quản trị viên .......................................................49
Hình 4.25. Màn hình chính sau khi đăng nhập của giáo viên ........................................50
Hình 4.26. Màn hình hiển thị thông tin của giáo viên ...................................................51
Hình 4.27. Màn hình quản lý lớp và sinh viên của giáo viên ........................................52
Hình 4.28. Màn hình chính sau khi đăng nhập của sinh viên ........................................53
Hình 4.29. Màn hình hiển thị thông tin của sinh viên....................................................54


DANH SÁCH THUẬT NGỮ VIẾT TẮT
Tên viết tắt

Ý nghĩa

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

W3C

World Wide Web Consortium

GPS

Global Positioning System

XAML

Extensible Application Markup Language

IDE

Integrated Development Environment

SDK

Software Development Kit

AJAX

Asynchronous JavaScript

DOM

Document Object Model

CDN

Content Delivery Network

CNTT

Công nghệ thông tin

QTV

Quản trị viên

GV

Giáo viên

SV

Sinh viên


PHẦN MỞ ĐẦU
1. Lý do chọn đề tài
Sự bùng nổ công nghệ thông tin (CNTT) nói riêng và khoa học công nghệ nói
chung đang tác động mạnh mẽ vào sự phát triển mọi mặt của đời sống xã hội.
Công nghệ thông tin phát triển đã tạo ra những ứng dụng tiện ích, dễ sử dụng
trong đời sống và trong trường học như quản lý bán hàng, quản lý nhân viên, quản lý
thư viện, quản lý học sinh - sinh viên, quản lý thiết bị học tập và giảng dạy,…
Hiện nay, tại nhiều nơi việc quản lý thông tin sinh viên của thầy cô cố vấn học
tập là sử dụng những phương pháp bằng sổ sách, giấy tờ, Word, Excel,… Việc quản lý
như vậy chưa thực sự thuận tiện trong nhiều trường hợp như khó cập nhật thông tin khi
sinh viên thay đổi nơi ở, số điện thoại, thông tin cá nhân,…

Có thể thấy tiềm năng ứng dụng của CNTT vào việc quản lý sinh viên là rất lớn.
Việc quản lý thông tin của sinh viên, đặc biệt là sinh viên ngoại trú sẽ dễ dàng, thuận
tiện, chính xác và được cập nhật thường xuyên hơn nếu có sự giúp sức của CNTT. Với
những lý do trên, chúng tôi chọn nghiên cứu đề tài: “Phát triển ứng dụng quản lý sinh
viên ngoại trú trên thiết bị di động”.
2. Mục đích nghiên cứu
- Nghiên cứu về xây dựng ứng dụng di động nền web.
- Nghiên cứu phát triển ứng dụng hỗ trợ thầy cô trong việc quản lý sinh viên
ngoại trú.
3. Đối tƣợng nghiên cứu
- Ứng dụng di động nền web.
4. Phạm vi nghiên cứu
- Thiết kế ứng dụng di động nền web quản lý sinh viên ngoại trú.
5. Phƣơng pháp nghiên cứu
- Tổng hợp tài liệu
- Nghiên cứu tài liệu
- Thực hành trên máy tính

1


6. Bố cục đề tài
Đề tài gồm 4 chương:
Chương 1: Tổng quan về thiết kế web
Chương 2: Giới thiệu về lập trình ứng dụng trên thiết bị di động
Chương 3: Tổng quan về JQuery Mobile
Chương 4: Phát triển ứng dụng quản lý sinh viên ngoại trú trên thiết bị di
động

2

CHƢƠNG 1: TỔNG QUAN VỀ THIẾT KẾ WEB
1.1. Lịch sử hình thành của thiết kế web
Mặc dù Internet có lịch sử phát triển chưa thực sự lâu dài nhưng hiện nay nó có
vai trò quan trọng trong lĩnh vực CNTT. Những tiện ích mà Internet mang lại giúp con
người ngày càng thuận tiện hơn trong công việc, học tập, kết nối và giải trí.
Có thể nói rằng: Internet có vai trò to lớn như ngày nay một phần lớn là nhờ sự
phát triển của công nghệ website. Nhờ các hệ thống website, con người có thể tìm
kiếm, truyền tải, quảng bá, trao đổi thông tin một cách dễ dàng và thuận tiện. Và hiện
nay, công nghệ web phát triển mạnh mẽ không chỉ dừng lại ở việc phát triển các trang
web thông thường, mà còn là phát triển các ứng dụng trên thiết bị di động nền web
(web-based applications).
Sự bắt đầu của thiết kế web:
Năm 1989, khi làm việc tại CERN, Tim Berners-Lee đã đề xuất để tạo ra một dự
án siêu văn bản toàn cầu mà sau này được gọi là World Wide Web. Trong thời gian
1991-1993 World Wide Web đã ra đời. Trang văn bản chỉ có thể được xem bằng cách
sử dụng một trình duyệt line-chế độ đơn giản. Năm 1993, Marc Andreessen và Eric
Bina, tạo ra các trình duyệt Mosaic. Vào thời điểm đó có nhiều trình duyệt, tuy nhiên
phần lớn trong số họ là dựa trên Unix và không có sự tích hợp với các yếu tố thiết kế
đồ họa như hình ảnh; âm thanh. Các trình duyệt Mosaic đã phá vỡ mốc này. W3C đã
được thành lập trong tháng 10 năm 1994 để dẫn World Wide Web phát triển các giao
thức phổ biến mà thúc đẩy sự phát triển của nó và đảm bảo khả năng tương tác của nó.
Điều này khuyến khích bất kỳ một công ty độc quyền về trình duyệt và ngôn ngữ lập
trình có thể sẽ bị thay đổi tác động của World Wide Web một cách toàn thể. W3C tiếp
tục thiết lập các tiêu chuẩn mà hôm nay có thể thấy như HTML, CSS, JavaScript.
Năm 1994, Andreessen thành lập Communications Corp mà sau này được biết
đến như Netscape Communications, trình duyệt Netscape 0.9. Netscape tạo ra các thẻ
HTML riêng của mình mà không quan tâm đến quá trình chuẩn mực truyền thống. Ví
dụ, Netscape 1.1 bao gồm các thẻ cho việc thay đổi màu nền và định dạng văn bản với

bảng trên các trang web.
Trong suốt 1996-1999 các cuộc chiến trình duyệt bắt đầu, như Microsoft và
Netscape đã đấu tranh cho sự thống trị bằng cách ra mắt nhiều cải tiến trong các phiên
3


bản của mình. Trong thời gian đó có rất nhiều công nghệ mới trong lĩnh vực này, đặc
biệt là Cascading Style Sheets, JavaScript, và Dynamic HTML. Trên toàn bộ, “cuộc
chiến” trình duyệt đã dẫn đến nhiều sáng tạo tích cực và giúp thiết kế web phát triển
với một tốc độ nhanh chóng
Sự phát triển của thiết kế website:
Năm 1996, Microsoft phát hành bản trình duyệt đầu tiên của mình, trong đó đã
hoàn thành với các tính năng và các thẻ riêng của mình. Nó cũng là trình duyệt đầu
tiên hỗ trợ phong cách trang, mà lúc đó được xem như là một kỹ thuật tối ưu. Các đoạn
mã HTML cho bảng ban đầu được dành cho việc hiển thị dữ liệu dạng bảng. Tuy
nhiên các nhà thiết kế nhanh chóng nhận ra tiềm năng của việc sử dụng bảng HTML
cho các công việc phức tạp, bố trí nhiều cột đó mà không thể thực hiện. Tại thời điểm
này, thiết kế và thẩm mỹ tốt dường như được ưu tiên hơn cấu trúc đánh dấu tốt, và ít
chú ý đến ngữ nghĩa và cách tiếp cận. Các trang web HTML được giới hạn trong các
tùy chọn thiết kế của họ, thậm chí nhiều hơn như vậy với các phiên bản trước của
HTML. Để tạo ra các thiết kế phức tạp, nhiều nhà thiết kế web có sử dụng các cấu trúc
bảng phức tạp. CSS được giới thiệu vào tháng 12 năm 1996 bởi W3C để hỗ trợ trình
bày và bố trí. Điều này cho phép mã HTML đơn giản và ngữ nghĩa hơn, cải thiện khả
năng tiếp cận web.
Năm 1996, flash (ban đầu được biết đến như là FutureSplash) đã được phát triển.
Vào thời điểm đó, các công cụ phát triển nội dung Flash là tương đối đơn giản so với
hiện nay, sử dụng bố trí cơ bản và các công cụ vẽ, ActionScript, và một thời gian sau
nó cho phép các nhà thiết kế web vượt qua các nhược điểm của HTML, GIF và
JavaScript. Tuy nhiên, vì Flash yêu cầu một plug-in, nhiều nhà phát triển web tránh sử
dụng nó vì sợ hạn chế thị phần của mình do thiếu khả năng tương thích. Thay vào đó,

các nhà thiết kế web dùng hình ảnh động gif (nếu họ không từ bỏ sử dụng đồ họa
chuyển động hoàn toàn) và JavaScript cho các widget. Nhưng những lợi ích của Flash
đã làm cho nó phổ biến trên thị trường để cuối cùng làm việc theo cách của mình cho
đại đa số các trình duyệt, và đủ mạnh để được sử dụng để phát triển toàn bộ trang.
Kết thúc cuộc chiến trình duyệt đầu tiên:
Trong năm 1998 Netscape công bố mã Netscape Communicator dưới một giấy
phép mã nguồn mở, cho phép hàng ngàn lập trình tham gia vào việc cải thiện các phần
mềm. Tuy nhiên, họ đã quyết định bắt đầu từ đầu, trong đó hướng dẫn sự phát triển
4


của trình duyệt mã nguồn mở và ổn định nhanh chóng mở rộng sang một nền tảng ứng
dụng hoàn chỉnh. Các dự án Web tiêu chuẩn đã được hình thành và phát huy tuân thủ
trình duyệt với HTML và CSS tiêu chuẩn bằng cách tạo ra Acid1, Acid2 và Acid3
kiểm tra.
Năm 2000 là một năm quan trọng đối với Microsoft. Internet Explorer đã được
phát hành cho Mac; điều này là quan trọng vì nó là trình duyệt đầu tiên hỗ trợ đầy đủ
HTML 4.01 và CSS 1, nâng cao thanh về việc tuân thủ các tiêu chuẩn. Nó cũng là
trình duyệt đầu tiên hỗ trợ đầy đủ các định dạng PNG định dạng hình ảnh. Trong thời
gian này Netscape đã được bán cho AOL và điều này được xem như là mất mát chính
thức của Netscape so với Microsoft trong cuộc chiến trình duyệt.
Giai đoạn 1988 – nay:
Kể từ đầu thế kỷ 21 các trang web đã trở nên ngày càng phổ biến trong cuộc
sống. Khi điều này xảy ra kéo theo các công nghệ của web cũng phát triển. Cũng đã có
những thay đổi đáng kể trong cách mọi người sử dụng và truy cập website, và điều này
đã thay đổi như thế nào trong các trang web được thiết kế.
Trình duyệt hiện đại: Kể từ khi kết thúc cuộc chiến trình duyệt đã có nhiều trình
duyệt mới đưa vào thị trường. Nhiều trong số này là mã nguồn mở có nghĩa là họ có
xu hướng phát triển nhanh hơn và hỗ trợ nhiều hơn các tiêu chuẩn mới. Những tùy
chọn mới được nhiều người xem tốt hơn so với Microsoft Internet Explorer. Các trình

duyệt phổ biến có thể kể tới như: Google Chrome, Mozilla Firefox, Apple Safari,
Opera…
Tiêu chuẩn mới: W3C đã phát hành tiêu chuẩn mới cho HTML (HTML5) và
CSS (CSS3), cũng như phiên bản JavaScript API (từng là một tiêu chuẩn). Trong
những năm trở lại đây, HTML5, CSS3, JavaScript đặc biệt là JQuery đã được sử dụng
rộng rãi, giải quyết nhiều bài toán về ứng dụng nền web: trò chơi, phần mềm quản lý,
web services...
1.2. Xu hƣớng phát triển của thiết kế web
1.2.1. Mobile-first
Là một quy trình thực hiện thiết kế đi từ giao diện cho mobile đầu tiên sau đó
mới tới những thiết bị khác như ipad, laptop, desktop… Các trang web thiết kế thân
thiện với thiết bị di động cũng dần trở thành một xu hướng tất yếu, một tiêu chuẩn web
không thể thiếu ngày nay.
5


1.2.2. Thiết kế website - Responsive Web Design
Thiết kế responsive là website tự động biết được kích thước màn hình của thiết
bị khách truy cập là như thế nào để hiển thị cho phù hợp trên màn hình đó. Vì vậy,
thiết kế web responsive cũng trở nên rất phổ biến trong những năm gần đây nhờ vào sự
gia tăng của việc sử dụng Internet trên thiết bị di động. Thiết kế responsive được sử
dụng phổ biến và an toàn vì nó đại diện cho một cách tương đối đơn giản và giá rẻ cho
các doanh nghiệp để xây dựng một trang web điện thoại di động thân thiện với đầy đủ
chức năng. Nhưng thiết kế web đáp ứng không đi kèm với một số vấn đề nếu không
được thực hiện đúng cách, yếu tố hướng tới người dùng luôn được chú trọng nhiều
nhất.

Hình 1.1. Thiết kế phù hợp với kích thước màn hình của thiết bị
1.2.3. Sử dụng các framework của CSS và JavaScript
Các Framework như Bootstrap, Jquery... đã tồn tại trong nhiều năm và tiếp tục

chứng minh sự hữu ích trên các dự án cả cá nhân và chuyên nghiệp. Việc sử dụng các
framework này giúp cho lập trình viên dễ dàng hơn trong việc tạo ra các website và cả
những ứng dụng nền web.
Hiện nay, các framework của JavaScript như AngularJS, NodeJS... đang tiến một
bước dài trong sự phát triển của website cũng như ứng dụng nền web. Việc tạo ra các
ứng dụng nền web theo đó cũng phát triển nhanh chóng và trở thành một trong những
hướng mũi nhọn của công nghệ phần mềm hiện đại.
1.3. Căn bản về HTML/HTML5
1.3.1. HTML là gì?
- HTML là một ngôn ngữ đánh dấu dùng để miêu tả tài liệu web (các trang web).
6


- HTML viết tắt của Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn
bản).
- Một ngôn ngữ đánh dấu bao gồm một tập các thẻ đánh dấu nội dung.
- Tài liệu HTML được đánh dấu bằng các thẻ HTML.
- Mỗi thẻ HTML dùng để mô tả một nội dung nào đó trên trang web.
- HTML do Tim Berner-Lee giới thiệu năm 1990 và hiện đang được World Wide
Web Consortium (W3C) tiếp tục duy trì.
1.3.2. Tập tin HTML là gì?
- Tập tin HTML là một tập tin text có chứa các thẻ HTML (tập tin có phần mở
rộng là .html hoặc .htm)
- Tập tin HTML còn được gọi là một trang web.
- Nếu cú pháp có bị sai thì trình duyệt vẫn không báo lỗi, nó chỉ hiển thị không
như ý muốn.
1.3.3. Thẻ trong HTML
- Thẻ HTML là những từ khoá được định nghĩa trước nằm trong cặp dấu <...>
<tên_thẻ>nội dung</tên_thẻ>

1.3.4. Cấu trúc của HTML
Hình ảnh dưới đây mô tả cấu trúc cơ bản của HTML (một trang web).

Hình 1.2. Cấu trúc cơ bản của HTML

7


1.3.5. Các phiên bản HTML
Phiên bản

Năm

HTML

1991

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000

HTML5

2014
Bảng 1.1. Các phiên bản của HTML

1.4. Căn bản về CSS/CSS3
1.4.1. CSS là gì?
CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần
tử HTML (Ví dụ: chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền,
đường viền,....) dựa trên các cặp thuộc tính: giá trị thuộc tính.
Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML thật đặc biệt và
chuyên nghiệp.
1.4.2. Lịch sử CSS
CSS được phát triển bởi Håkon Wium Lie vào 10/10/1994 và được duy trì bởi
một nhóm CSS Working Group của W3C. Nhóm này duy trì và công bố các tài liệu
mới nhất về CSS.
- Lịch sử các phiên bản của CSS:
CSS1 (Cascading Style Sheets 1) được công bố bởi W3C vào 12/1996. Phiên bản
này miêu tả ngôn ngữ CSS cũng như mô hình định dạng đơn giản đầu tiên cho tất cả
các thẻ HTML.
CSS2 được công bố vào 5/1998, được phát triển dựa trên CSS1. Phiên bản này
bổ sung sự hỗ trợ tới một số thiết bị (như máy in, …), các thiết bị về âm thanh, các
bảng.
CSS3 được công bố vào 6/1999. Tại phiên bản này, CSS được phân chia thành
các Module nhỏ và từng Module chịu trách nhiệm cho một tính năng cụ thể nào đó.
8

1.4.3. Lợi thế của CSS
CSS tiết kiệm thời gian và công sức: Nếu đã học qua về HTML, sẽ thấy một
điều rằng: HTML không chứa bất cứ một thẻ nào để định dạng một trang web. HTML
được tạo để miêu tả nội dung của một trang web, còn CSS được dùng để định dạng
chúng.
Bắt đầu từ HTML 3.2, các thẻ như <font> và các thuộc tính như color được
thêm vào. Việc thiết kế các trang web lớn, với thông tin về font và color trải dài qua
nhiều trang đơn, thì việc xác định font và thêm thuộc tính color vào các trang này tốn
rất nhiều thời gian và công sức.
Để xử lý vấn đề này, World Wide Web Consortium (W3C) đã tạo ra CSS. Và từ
đó, với CSS, lập trình viên tiết kiệm khá nhiều thời gian và công sức. Thay vì phải
thêm font và color cho từng trang web một, giờ đây, họ chỉ cần tạo một tệp .css ở
ngoài, và sau đó thêm vào từng trang web. Và khi đó, có thể thay đổi giao diện của cả
một website lớn chỉ trong một thời gian rất ngắn bằng cách tạo các thay đổi trong tệp
.css.
Sử dụng CSS giúp trang web tải nhanh hơn: Sử dụng CSS, không cần phải viết
từng thuộc tính cho từng thẻ HTML mỗi khi cần đến. Chỉ cần viết một định dạng
(style) CSS trong tệp .css và áp dụng cho tất cả các thẻ đó. Ít code hơn tức là sẽ giúp
trang web tải nhanh hơn.
Sử dụng CSS giúp dễ dàng bảo trì và nâng cấp trang web hơn.
CSS có nhiều thuộc tính hơn HTML. Do đó, sử dụng CSS giúp tạo các trang web
đẹp hơn nhiều khi so sánh với việc sử dụng các thẻ và thuộc tính HTML thuần.
Sử dụng CSS là phù hợp với chuẩn quốc tế. Hiện tại, rất nhiều thuộc tính của
HTML đã trở thành cũ và nhiều trình duyệt không còn hỗ trợ chúng nữa. Do đó, để
tương thích với các trình duyệt trong tương lai, nên sử dụng CSS.
1.5. Căn bản về JavaScript
1.5.1. JavaScript là gì?
JavaScript (JS) là một ngôn ngữ lập trình phía client: mã được thực thi bởi trình
duyệt của người dùng, sau khi trang web gửi về từ server.

JavaScript được sử dụng để tạo ra các trang web có tính tương tác:
- Chèn nội dung động vào trang web
- Đáp ứng lại các thao tác của người dùng
9


- Lấy thông tin từ máy tính người sử dụng
- Thực hiện tính toán trên máy tính người sử dụng
- Tạo các ứng dụng, chức năng tương tác cho trang web
JavaScript là ngôn ngữ lập trình phổ biến bậc nhất thế giới, và là một trong ba
ngôn ngữ (HTML, CSS, JavaScript) mà tất cả lập trình viên web nhất định phải học.
JavaScript được nhúng vào trang web để kết hợp với HTML/CSS.
1.5.2. Các lợi thế của JavaScript
Sự tương tác server ít hơn: Có thể kiểm tra đầu vào (input) của người sử dụng
trước khi gửi trang tới server. Điều này làm tiết kiệm lưu lượng tải ở server, nghĩa là
server hoạt động ít hơn.
Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một trang web
tải lại để thấy xem nếu họ đã quên nhập cái gì đó.
Khả năng tương tác tăng lên: Có thể tạo các giao diện mà phản ứng lại khi người
sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím.
Giao diện phong phú hơn: có thể sử dụng JavaScript để bao gồm những mục như
các thành phần Drag và Drop (DnD), các con trượt (Slider), cung cấp một Rich
Interface (giao diện giàu tính năng) tới website khách truy cập.
1.5.3. Hạn chế của JavaScript
Chúng ta không thể xem JavaScript như là một ngôn ngữ chương trình chính
thức (full-fledged). Nó thiếu các tính năng quan trọng sau:
Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảo mật.
JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi vì không
có những hỗ trợ có sẵn.
JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý.

Một lần nữa, JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ mà cho
phép xây dựng khả năng tương tác trong các trang HTML tĩnh.
Kết luận
Qua chương 1, chúng tôi đã giới thiệu tổng quan về thiết kế web. Chương 2
chúng tôi sẽ giới thiệu về lập trình trên ứng dụng trên thiết bị di động.

10


CHƢƠNG 2. GIỚI THIỆU VỀ LẬP TRÌNH ỨNG DỤNG
TRÊN THIẾT BỊ DI ĐỘNG
2.1. Sự phát triển của thiết bị di động
Ngày nay, dân số đang bùng nổ cùng sự phát triển mạnh mẽ của công nghệ thông
tin, nhu cầu sử sử dụng các thiết bị nhỏ gọn, nhưng vẫn đáp ứng được các chức năng
như một máy tính cá nhân ngày càng cao. Để tăng số lượng người dùng thì các hãng
thiết bị di động đó phải lên ý tưởng và phát triển các ứng dụng thu hút được nhiều tầng
lớp người sử dụng, khuyến khích các nhà lập trình viên phát triển thêm nhiều ứng
dụng để làm phong phú kho ứng dụng của họ.
Một phần mềm ứng dụng trên thiết bị di động, còn được gọi tắt là ứng dụng di
động, hoặc chỉ ứng dụng là phần mềm ứng dụng được thiết kế để chạy trên điện thoại
thông minh, máy tính bảng và các thiết bị di động khác.
Các ứng dụng thường có sẵn thông qua các nhà phân phối ứng dụng, bắt đầu xuất
hiện vào năm 2008 và thường được điều hành bởi các chủ sở hữu của hệ điều hành di
động, như App Store, Google Play, Windows Phone Store,...Một số ứng dụng miễn
phí, trong khi một số ứng dụng phải được mua.
Ứng dụng di động ban đầu được cung cấp với mục đích thông tin tổng quát và
các dịch vụ thông dụng trên mạng toàn cầu, bao gồm email, lịch, danh bạ, thị trường
chứng khoán và thông tin thời tiết. Tuy nhiên, nhu cầu chung của những người sử
dụng thiết bị di động và khả năng phát triển của các nhà lập trình đã mở rộng thành các
loại khác, chẳng hạn như trò chơi di động, GPS và các dịch vụ dựa trên địa điểm, định

vị và ngân hàng, để theo dõi, mua vé và các ứng dụng y tế di động gần đây. Sự bùng
nổ về số lượng và sự đa dạng của các ứng dụng đã tạo ra tiềm năng và thị trường lớn.
Theo thống kê của hãng nghiên cứu thị trường ứng dụng Flurry, trong năm 2015,
số phiên sử dụng các ứng dụng di động trên toàn cầu tăng 58% so với năm 2014. Đứng
đầu bảng tăng trưởng về số phiên sử dụng là các ứng dụng cá nhân hóa
(Personalization) với tốc độ lên tới 332%.
Theo dự báo của Flurry, số phiên sử dụng ứng dụng di động sẽ tiếp tục tăng cao
hơn nữa khi số lượng ứng dụng ngày càng gia tăng và chúng ngày càng thân thiện hơn
với khách hàng di động.
11


Phát triển ứng dụng cho thiết bị di động đã trở thành một trong những ngành
công nghiệp được chú ý nhất trong thời gian qua và ngày càng nhiều doanh nghiệp
cũng như các lập trình viên độc lập tham gia.
Cơn sốt khiến tất cả các doanh nghiệp sản xuất ứng dụng phải giải quyết bài toán
lập trình nên các ứng dụng vừa đẹp, vừa tiện dụng, vừa hay, phù hợp với thị hiếu và
nhu cầu của người dùng. Và xu hướng này chắc chắn sẽ còn phát triển trong 5-7 năm
tới.
2.2. Giới thiệu về lập trình ứng dụng trên thiết bị di động
Trên thị trường ứng dụng di động hiện nay, 3 hệ điều hành chiếm thị phần cao
nhất là: Android, iOS và Windows Phone, tiếp sau là 1 số hệ điều hành khác như
BlackBerry… Sau đây là giới thiệu về 3 hệ điều hành đứng đầu là Android,
iOS và Windows Phone:

Hình 2.1. Biểu đồ phân tích thị phần ứng dụng của 3 hệ điều hành
2.2.1. Android
Theo biểu đồ thống kê của IDC, ta dễ nhận ra Android luôn chiếm hơn 70% thị
phần của mảng di động. Ứng dụng Android được viết bằng ngôn ngữ Java, do đó các
lập trình viên Java có thể dễ dàng chuyển hướng qua mảng này.

Android có quá nhiều thiết bị với đủ kích cỡ màn hình, cùng với vô số phiên bản
(từ 2.0 cho tới 4.4 và hiện này là phiên bản Android 7.0 N). Điều này gây khá nhiều
khó khăn cho lập trình viên khi viết app: Cần phải test đủ thứ, đảm bảo ứng dụng
tương thích với nhiều thiết bị, không bị lỗi giao diện,...
12


Nếu muốn đưa ứng dụng lên Google Store, sẽ phải mua 1 tài khoản Android
Developer. Phí tài khoản này là 25$/năm.

Hình 2.2. Cửa hàng ứng dụng CH Play của Android
2.2.2. iOS
Theo biểu đồ, iOS chỉ chiếm 20% thị phần, bằng 1/4 so với Android. Tuy nhiên,
nghe đồn là doanh thu của Apple Store lại cao hơn Google Play Store. Nguyên nhân là
do người dùng iOS chơi sang hơn, chịu khó bỏ tiền mua ứng dụng hơn so với người
dùng Android.
Để tiếp cận iOS, cần máy ảo hoặc máy Mac để cài hệ điều hành MacOS. Ứng
dụng iOS được viết bằng ngôn ngữ Objective-C (Giống C nhưng có thêm OOP) hoặc
Swift. Việc code và debug trên iOS phức tạp hơn Android. phải cài đặt Xcode, mua tài
khoản Apple Developer mới có thể test ứng dụng và đưa ứng dụng lên Apple Store.
Bộ phận kiểm duyệt của Apple Store cũng khắt khe hơn Google Play Store, nhiều khi
phải chờ khá lâu để ứng dụng của mình được duyệt.
Nếu muốn đưa ứng dụng lên Apple Store sẽ phải trả 100$/năm cho tài khoản
Apple Developer, và mất thêm 1 khoản kha khá để mua thiết bị (iPhone, iPad) về test.

13


Hình 2.3. Cửa hàng ứng dụng App Store của Apple
2.2.3. Windows Phone

Windows Phone đã chậm chân khi gia nhập thị trường di động, nơi Android và
iOS đã làm mưa làm gió khá lâu. Mặc dù Microsoft đã có một số chính sách hỗ trợ
developer, hệ thống ứng dụng trên Window App Store vẫn còn khá nghèo nàn
Windows Phone được viết bằng ngôn ngữ C# kết hợp với XAML. Windows Phone dễ
code hơn, debug nhanh và tiện hơn Android. Với Android, nếu không có thiết bị, ta
phải debug trên máy ảo, chạy rất chậm… máy ảo của Window Phone lại rất tốt và
nhanh.
Tài khoản Window Phone Developer có giá rất rẻ, chỉ có 19$ và dùng mãi mãi.

Hình 2.4. Cửa hàng ứng dụng của Windows Phone
2.3. Xu hƣớng phát triển của ứng dụng thiết bị di động
Hiện nay lập trình di động có 2 xu hướng phát triển chính là:
14


2.3.1. Dùng các ứng dụng Native
Cách phổ biến nhất để xây dựng các ứng dụng di động là sử dụng các công cụ
native (gốc) đi cùng với nền tảng đó. Native App nghĩa là lập trình viên sẽ sử dụng
IDE, SDK mà nhà sản xuất cung cấp để lập trình ra một ứng dụng, xây dựng ứng dụng
đó thành file cài và gửi lên App Store để kiểm duyệt. Với những ứng dụng game, xử lý
ảnh, cần tính toán nhiều thì Native App là lựa chọn tốt nhất.
- Một số ứng dụng Native:
Visual Studio

Hình 2.5. Giao diện ứng dụng Visual Studio
Visual Studio là (IDE – Integrated Development Environment) một bộ công cụ
phát triển phần mềm do Microsoft phát triển. Visual Studio cũng là một phần mềm
được sử dụng bởi các lập trình viên để xây dựng nên các sản phẩm phần mềm. Visual
Studio có những điểm mạnh sau đây:
 Hỗ trợ lập trình trên nhiều ngôn ngữ như C/C++, C#, F#, Visual Basic,

HTML, CSS, JavaScript. Phiên bản Visual Studio 2015 có hỗ trợ ngôn
ngữ Python.
 Visual Studio là một công cụ hỗ trợ việc Debug một cách mạnh mẽ, dễ
dàng nhất (Break Point, xem giá trị của biến trong quá trình chạy, hỗ trợ
debug từng câu lệnh).
15


 Giao diện Visual Studio rất dễ sử dụng đối với người mới bắt đầu.
 Visual Studio hỗ trợ phát triển ứng dụng desktop MFC, Windows Form,
Universal App, ứng dụng mobileWindows Phone 8/8.1, Windows 10,
Android (Xamarin), iOS và phát triển website Web Form, ASP.NET
MVC và phát triển Microsoft Office.
 Visual Studio hỗ trợ kéo thả để xây dựng ứng dụng một cách chuyên
nghiệp, giúp các bạn mới bắt đầu có thể tiếp cận nhanh hơn.
 Visual Studio cho phép chúng ta tích hợp những extension từ bên ngoài
như Resharper (hỗ trợ quản lý và viết mã nhanh cho các ngôn ngữ thuộc
.Net), hay việc cài đặt thư viện nhanh chóng thông qua Nuget.
 Visual Studio được sử dụng đông đảo bởi lập trình viên trên toàn thế giới.
Android Studio

Hình 2.6. Giao diện ứng dụng Android Studio
Android Studio là môi trường phát triển tích hợp để xây dựng ứng dụng dựa trên
nền tảng Android do Google phát triển và được công bố vào ngày 16 tháng 5 năm
2013. Android Studio bắt đầu phát triển với phiên bản 0.1 vào tháng 5 năm 2013, cho
đến hiện tại Google đã phát triển cập nhật phiên bản 1.5.1 vào khoảng tháng 12 năm
2015. Android studio dựa vào IntelliJ IDEA, là một IDE tốt nhất cho Java hiện nay.
Do đó Android Studio sẽ là môi trường phát triển ứng dụng tốt nhất cho Android.
16