Báo cáo lập trình WEB viết ghi chú

MỤC LỤC
CHƯƠNG I: TỔNG QUAN VỀ WEBSITE VIẾT GHI CHÚ.........................1
I. Lý do chọn đề tài...........................................................................................1
II. Mô tả trang web viết ghi chú......................................................................1
CHƯƠNG II: CƠ SỞ LÝ THUYẾT..................................................................3
I. Các ngôn ngữ sử dụng cho trang web.........................................................3
1. HTML.........................................................................................................3
2. CSS..............................................................................................................3
3. Javascript....................................................................................................3
4. PHP.............................................................................................................3
5. jQuery.........................................................................................................4
6. AJAX...........................................................................................................4
II. Công cụ thực hiện........................................................................................5
1. Bootstrap....................................................................................................5
2. MySQL........................................................................................................5
3. phpMyAdmin.............................................................................................6
I.Giao diện.........................................................................................................7
1. Giao diện trang chủ (Trang đăng nhập – đăng ký)................................7
2. Giao diện trang đã đăng nhập..................................................................7
3. Giao diện trang tạo ghi chú.......................................................................8
4. Giao diện trang danh sách các ghi chú....................................................9
5. Giao diện trang đổi mật khẩu.................................................................10
II. Hướng dẫn sử dụng...................................................................................10
1. Đăng ký tài khoản....................................................................................10
2. Đăng nhập.................................................................................................11
3. Tạo ghi chú mới........................................................................................11
4. Chỉnh sửa/ Xóa ghi chú...........................................................................12


6. Đổi mật khẩu............................................................................................14
CHƯƠNG IV: TỔNG KẾT...............................................................................15

I. Ưu điểm – Nhược điểm của website...........................................................15
II. Hướng phát triển.......................................................................................15
TÀI LIỆU THAM KHẢO.................................................................................15


DANH MỤC HÌNH ẢNH
Hình 1: Giao diện trang chủ (Trang đăng nhập - đăng ký).............................................7
Hình 2: Giao diện trang đã đăng nhập............................................................................7
Hình 3: Giao diện tạo ghi chú mới..................................................................................8
Hình 4: Giao diện trang danh sách ghi chú.....................................................................9
Hình 5: Giao diện trang đổi mật khẩu...........................................................................10
Hình 6: Hướng dẫn đăng ký tài khoản..........................................................................11
Hình 7: Hướng dẫn đăng nhập......................................................................................11
Hình 8: Hướng dẫn tạo ghi chú.....................................................................................12
Hình 9: Hướng dẫn chỉnh sửa/xóa ghi chú...................................................................13
Hình 10: Hướng dẫn chia sẽ ghi chú.............................................................................14
Hình 11: Hướng dẫn sử dụng đổi mật khẩu..................................................................14


CHƯƠNG I: TỔNG QUAN VỀ WEBSITE VIẾT GHI CHÚ
I. Lý do chọn đề tài
Với sự phát triển của ngành công nghệ thông tin hiện nay, Internet ngày càng
giữ vai trò quan trọng trong các lĩnh vực khoa học kỹ thuật và đời sống. Internet nói
một cách đơn giản là một tập hợp máy tính nối kết với nhau, là một mạng máy tính
toàn cầu mà bất kì ai cũng có thể kết nối bằng máy PC của họ. Với mạng Internet,
tin học thật sự tạo nên một cuộc cách mạng trao đổi thông tin trong mọi lĩnh vực
văn hóa, xã hội, chính trị, kinh tế...
Trong thời đại ngày nay, thời đại mà “người người làm Web, nhà nhà làm
Web” thì việc có một website ghi chú lại các công việc cần làm là đều không thể
thiếu trong mỗi chúng ta. Với sự phát triển của công nghệ hiện nay thì smartphone

và máy tính đã và đang dần thay thế giấy bút. Ghi chú online là một ứng dụng ra đời
nhằm thay thế cuốn sổ tay của bạn, nhằm giúp bạn hệ thống lại các việc cần làm,
đồng thời ghi chép những nội dung cần thiết sắp xếp công việc hợp lý hơn,....
Thông qua Website chúng ta có thể xem và tải về các ghi chú một cách
nhanh chóng và tiện lợi. Với công nghệ World Wide Web, hay còn gọi là Web sẽ
giúp bạn đưa những thông tin mong muốn của mình lên mạng chia sẽ cho bạn bè
cùng xem một cách dễ dàng. Sự ra đời của các ngôn ngữ lập trình cho phép chúng ta
xây dựng các trang Web đáp ứng được những yêu cầu của người sử dụng. PHP
(Personal Home Page) là kịch bản trên phía trình chủ (Server Script) cho phép
chúng ta xây dựng trang Web với cơ sở dữ liệu. Với nhiều ưu điểm nổi bật mà PHP
và MySQL được rất nhiều người sử dụng.
Với lý do đó, được sự hướng dẫn và giúp đỡ của thầy, em đã chọn đề tài
“Xây dựng trang web viết ghi chú” làm đề tài cho môn học.
II. Mô tả trang web viết ghi chú
Trang web bao gồm các chức năng như sau:
 Đăng ký tài khoản
 Đăng nhập tài khoản
 Đăng xuất tài khoản
 Tạo ghi chú
1


 Xem danh dách ghi chú
 Chia sẻ ghi chú
 Sửa ghi chú
 Xóa ghi chú
 Đổi mật khẩu

2

CHƯƠNG II: CƠ SỞ LÝ THUYẾT
I. Các ngôn ngữ sử dụng cho trang web
1. HTML
Trang Web là sự kết hợp giữa văn bản và các thẻ HTML. HTML là chữ viết tắt
của HyperText Markup Language được hội đồng World Wide Web Consortium
(W3C) quy định. Một tập tin HTML chẳng qua là một tập tin bình thường, có
đuôi .html hoặc .htm. HTML giúp định dạng văn bản trong trang Web nhờ các
thẻ. Hơn nữa, các thẻ html có thể liên kết từ hoặc một cụm từ với các tài liệu
khác trên Internet.
Một tài liệu HTML gồm 3 phần cơ bản:
-

Phần HTML: Mọi tài liệu HTML phải bắt đầu bằng thẻ <html> và kết
thúc bằng thẻ đóng </html>.

-

Head: Phần đầu bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head> .
Phần này chứa tiêu đề hiển thị trên thanh điều hướng của trang Web.

-

Body: Phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình
ảnh và các liên kết mà bạn muốn hiển thị trên trang Web của mình. Phần
thân bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>.

2. CSS
-

CSS là viết tắt của Cascading Style Sheets. CSS mô tả cách các phần tử
HTML được hiển thị trên màn hình, giấy hoặc trong phương tiện khác.

-

CSS tiết kiệm rất nhiều công việc . Nó có thể kiểm soát bố cục của nhiều
trang web cùng một lúc.

-

CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm
thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn
hình khác nhau.

3. Javascript
Javascript là một ngôn ngữ lập trình kịch bản thực thi ở phía client được bổ sung
vào HTML nhầm làm cho một trang web có khả năng được lập trình để tương tác và
xử lý thông tin.
4. PHP
3


PHP (viết tắt của cụm từ Personal Home Page) là ngôn ngữ lập trình kịch bản
(scripting language) mã nguồn mở được dùng phổ biến để ra tạo các ứng dụng web
chạy trên máy chủ. Mã lệnh PHP có thể được nhúng vào trong trang HTML nhờ sử
dụng cặp thẻ PHP <?php ?>.
Tại sao nên dùng PHP?
Để thiết kế Web động có rất nhiều ngôn ngữ lập trình khác nhau để lựa chọn,
mặc dù cấu hình và tính năng khác nhau nhưng chúng vẫn đưa ra những kết
quả giống nhau. Chúng ta có thể lựa chọn cho mình một ngôn ngữ: ASP,

PHP, Java, Perl... và một số loại khác nữa. Vậy tại sao chúng ta lại nên chọn
PHP. Rất đơn giản, có những lý do sau mà khi lập trình Web chúng ta không
nên bỏ qua sự lựa chọn tuyệt vời này.
-

PHP được sử dụng làm Web động vì nó nhanh, dễ dàng, tốt hơn so với các
giải pháp khác.

-

PHP có khả năng thực hiện và tích hợp chặt chẽ với hầu hết các cơ sở dữ liệu
có sẵn, tính linh động, bền vững và khả năng phát triển không giới hạn.

-

Đặc biệt PHP là mã nguồn mở do đó tất cả các đặc tính trên đều miễn phí, và
chính vì mã nguồn mở sẵn có nên cộng đồng các nhà phát triển Web luôn có
ý thức cải tiến nó, nâng cao để khắc phục các lỗi trong các chương trình này

-

PHP vừa dễ với người mới sử dụng vừa có thể đáp ứng mọi yêu cầu của các
lập trình viên chuyên nghiệp, mọi ý tưởng của các bạn PHP có thể đáp ứng
một cách xuất sắc.

5. jQuery
JQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng
bằng JavaScript dễ dàng, nhanh và giàu tính năng hơn jQuery được tích hợp nhiều
module khác nhau. Từ module hiệu ứng cho đến module truy vấn selector. jQuery
được sử dụng đến 99% trên tổng số website trên thế giới.

6. AJAX
AJAX là từ viết tắt của "Asynchronous Javascript and XML". Nó không phải
một công nghệ độc lập hay mới mẻ gì. Trên thực tế, nó là một tập hợp các công

4


nghệ đã có sẵn (ví dụ: HTML, CSS, Javascript, XML, v.v...) được sử dụng cùng
nhau để xây dựng nên các ứng dụng web hiện đại.
Với AJAX, một máy khách (tức là trình duyệt) có thể liên lạc với một máy
chủ web và gửi yêu cầu để nhận được dữ liệu. Sau đó, nó sẽ xử lí phản hồi của máy
chủ và tạo ra sự thay đổi trên trang web mà không cần phải tải lại hoàn toàn trang
web đó.
II. Công cụ thực hiện
1. Bootstrap
Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ
dàng hơn.
Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tạo ra
những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation,
modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin
Javascript trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh
chóng hơn.
2. MySQL
MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database
Management System, viết tắt là RDBMS) hoạt động theo mô hình clientserver. RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ
liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng.
Cơ sở dữ liệu (database) là một tập hợp của dữ liệu được tổ chức sao cho dễ dàng
truy cập cũng như cập nhật. Một cơ sở dữ liệu được tổ chức thành các bảng, các
bảng lưu trữ thông tin theo cấu trúc của nó.
Ví dụ bạn tạo ra trang web viết ghi chú, trong đó hẳn nó chứa nhiều loại thông tin

như tiêu đề, nội dung, ngày tạo... Nếu vậy bạn có thể xây dựng một CSDL gồm các
bảng như bang1 lưu trữ thông tin về tiêu đề ghi chú, bang2 lưu trữ các nội dung ghi
chú, bang3 lưu trữ nội dung ngày tạo…

5


3. phpMyAdmin
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 database
administrator) có thể quản lý CSDL 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). Sử dụng phpMyadmin
người dùng có thể thực hiện nhiều thao tác khác nhau như khi sử dụng cửa sổ dòng
lệnh. Các tác vụ này bao gồm việc tạo , cập nhật và xóa CSDL, các bảng, các
trường, dữ liệu trên bảng, phân quyền và quản lý người dùng,…
Sử dụng phpMyadmin giúp tăng hiệu quản lý cơ sở dữ liệu. Khi làm việc
với phpMyadmin bạn sẽ thấy được hiệu quả tăng lên đáng kể so với sử dụng cửa
sổ dòng lệnh. phpMyadmin được thiết kế để giúp thực hiện các công việc phổ
biến như xem danh sách các cơ sở dữ liệu trên server, xem cấu trúc của một bảng,
chèn dữ liệu vào bảng, thay đổi cấu trúc bảng một cách nhanh chóng. Bạn có thể
thấy được điều này khi quan sát 1 giao diện cụ thể.
phpMyadmin là mã nguồn mở do đó nó miễn phí bạn không cần phải trả
tiền để dùng nó, hơn nữa nó có nhiều đóng góp từ cộng đồng lập trình viên trên
thế giới nên yên tâm về độ bảo mật của nó.

6


CHƯƠNG III: XÂY DỰNG WEBSITE VIẾT GHI CHÚ
I.Giao diện

1. Giao diện trang chủ (Trang đăng nhập – đăng ký)

Hình 1: Giao diện trang chủ (Trang đăng nhập - đăng ký)

2. Giao diện trang đã đăng nhập

Hình 2: Giao diện trang đã đăng nhập

7


3. Giao diện trang tạo ghi chú

Hình 3: Giao diện tạo ghi chú mới

8


4. Giao diện trang danh sách các ghi chú

Hình 4: Giao diện trang danh sách ghi chú

9


5. Giao diện trang đổi mật khẩu

Hình 5: Giao diện trang đổi mật khẩu
II. Hướng dẫn sử dụng
1. Đăng ký tài khoản

Đầu tiên nếu bạn chưa có tài khoản thì cần đăng ký tài khoản
Nhập tên và mật khẩu, nhập lại mật khẩu tránh nhập sai -> Tạo tài khoản
*Lưu ý: tên đăng nhập phải nằm trong khoảng từ 6-24 ký tự, mật khẩu phải từ 6 ký
trở lên, không chứa ký tự đặc biệt.

10


Hình 6: Hướng dẫn đăng ký tài khoản
2. Đăng nhập
Sau khi đăng ký tài khoản, bạn đăng nhập vào để sử dụng

Hình 7: Hướng dẫn đăng nhập

3. Tạo ghi chú mới
Tại trang chủ, bấm vào Tạo ghi chú mới bên trên gốc phải màn hình.
Nhập nội dung ghi chú -> Tạo ghi chú.
11


Hình 8: Hướng dẫn tạo ghi chú

4. Chỉnh sửa/ Xóa ghi chú
Tại trang giao diện, danh sách các note, bấm chọn ghi chú mà bạn muốn chỉnh sửa.
Nhập nội dung cần chỉnh sửa sau đó bấm lưu lại.
Hoặc chọn xóa khi bạn cần xóa ghi chú.

12

Hình 9: Hướng dẫn chỉnh sửa/xóa ghi chú
5. Chia sẻ
Tại trang tạo/sửa ghi chú, chọn chia sẻ, bấm chia sẽ sẽ đưa hiển thị đường link,
chọn copy link gửi đến người bạn cần chia sẻ.

13


Hình 10: Hướng dẫn chia sẽ ghi chú
6. Đổi mật khẩu
Tại trang giao diện góc trên phải màn hình, chọn đổi mật khẩu.
Tiếp đến, nhập mật khẩu cũ, nhập mật khẩu mới -> chọn Thay đổi.

Hình 11: Hướng dẫn sử dụng đổi mật khẩu

14


CHƯƠNG IV: TỔNG KẾT
I. Ưu điểm – Nhược điểm của website
Ưu điểm:


Sử dụng miễn phí.



Tiện lợi, dễ sử dụng.



Lưu giữ thông tin nhanh chóng, an toàn.



Dễ dàng tìm kiếm, xem lại ghi chú.

Nhược điểm:


Chưa lưu được hình ảnh, âm thanh.

II. Hướng phát triển
Khi xóa ghi chú sẽ chuyển vào thùng rác. Khi cần có thể vào xem lại.
Có thể liên kết sử dụng với điện thoại, máy tính bảng.

TÀI LIỆU THAM KHẢO
/> /> />
15