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

MỤC LỤCCHƯƠNG I: TỔNG QUAN VỀ WEBSITE VIẾT GHI CHÚ1I. Lý do chọn đề tài1II. Mô tả trang web viết ghi chú1CHƯƠNG II: CƠ SỞ LÝ THUYẾT3I. Các ngôn ngữ sử dụng cho trang web31. HTML32. CSS33. Javascript34. PHP35. jQuery46. AJAX4II. Công cụ thực hiện51. Bootstrap52. MySQL53. phpMyAdmin6I.Giao diện71. Giao diện trang chủ (Trang đăng nhập – đăng ký)72. Giao diện trang đã đăng nhập73. Giao diện trang tạo ghi chú84. Giao diện trang danh sách các ghi chú95. Giao diện trang đổi mật khẩu10II. Hướng dẫn sử dụng101. Đăng ký tài khoản102. Đăng nhập113. Tạo ghi chú mới114. Chỉnh sửa Xóa ghi chú126. Đổi mật khẩu14CHƯƠNG IV: TỔNG KẾT15I. Ưu điểm – Nhược điểm của website15II. Hướng phát triển15TÀI LIỆU THAM KHẢO15 DANH MỤC HÌNH ẢNHHình 1: Giao diện trang chủ (Trang đăng nhập đăng ký)7Hình 2: Giao diện trang đã đăng nhập7Hình 3: Giao diện tạo ghi chú mới8Hình 4: Giao diện trang danh sách ghi chú9Hình 5: Giao diện trang đổi mật khẩu10Hình 6: Hướng dẫn đăng ký tài khoản11Hình 7: Hướng dẫn đăng nhập11Hình 8: Hướng dẫn tạo ghi chú12Hình 9: Hướng dẫn chỉnh sửaxóa ghi chú13Hình 10: Hướng dẫn chia sẽ ghi chú14Hình 11: Hướng dẫn sử dụng đổi mật khẩu14I.Giao diện1. 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ập3. Giao diện trang tạo ghi chú Hình 3: Giao diện tạo ghi chú mới4. Giao diện trang danh sách các ghi chú Hình 4: Giao diện trang danh sách ghi chú5. Giao diện trang đổi mật khẩu Hình 5: Giao diện trang đổi mật khẩuII. Hướng dẫn sử dụng1. Đă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ảnNhậ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ảnLưu ý: tên đăng nhập phải nằm trong khoảng từ 624 ký tự, mật khẩu phải từ 6 ký trở lên, không chứa ký tự đặc biệt. Hình 6: Hướng dẫn đăng ký tài khoản2. Đăng nhậpSau 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ập3. Tạo ghi chú mớiTạ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ú. 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ú. Hình 9: Hướng dẫn chỉnh sửaxóa ghi chú5. Chia sẻTại trang tạosử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ẻ. Hình 10: Hướng dẫn chia sẽ ghi chú6. Đổi mật khẩuTạ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

MỤC LỤC CHƯƠNG I: TỔNG QUAN VỀ WEBSITE VIẾT GHI CHÚ .1 I Lý chọn đề tài II Mô tả trang web viết ghi CHƯƠNG II: CƠ SỞ LÝ THUYẾT I Các ngôn ngữ sử dụng cho trang web .3 HTML .3 CSS 3 Javascript PHP jQuery .4 AJAX II Công cụ thực Bootstrap MySQL phpMyAdmin I.Giao diện .7 Giao diện trang chủ (Trang đăng nhập – đăng ký) Giao diện trang đăng nhập Giao diện trang tạo ghi .8 Giao diện trang danh sách ghi Giao diện trang đổi mật .10 II Hướng dẫn sử dụng 10 Đăng ký tài khoản 10 Đăng nhập .11 Tạo ghi 11 Chỉnh sửa/ Xóa ghi 12 Đổi mật 14 CHƯƠNG IV: TỔNG KẾT .15 I Ưu điểm – Nhược điểm 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ý) Hình 2: Giao diện trang đăng nhập Hình 3: Giao diện tạo ghi Hình 4: Giao diện trang danh sách ghi Hình 5: Giao diện trang đổi mật 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 12 Hình 9: Hướng dẫn chỉnh sửa/xóa ghi 13 Hình 10: Hướng dẫn chia ghi 14 Hình 11: Hướng dẫn sử dụng đổi mật 14 CHƯƠNG I: TỔNG QUAN VỀ WEBSITE VIẾT GHI CHÚ I Lý chọn đề tài Với phát triển ngành công nghệ thông tin nay, Internet ngày giữ vai trò quan trọng lĩnh vực khoa học kỹ thuật đời sống Internet nói cách đơn giản tập hợp máy tính nối kết với nhau, mạng máy tính tồn cầu mà kết nối máy PC họ Với mạng Internet, tin học thật tạo nên cách mạng trao đổi thông tin lĩnh vực văn hóa, xã hội, 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” việc có website ghi lại cơng việc cần làm thiếu Với phát triển công nghệ smartphone máy tính dần thay giấy bút Ghi online ứng dụng đời nhằm thay sổ tay bạn, nhằm giúp bạn hệ thống lại việc cần làm, đồng thời ghi chép nội dung cần thiết xếp công việc hợp lý hơn, Thông qua Website xem tải ghi cách nhanh chóng tiện lợi Với cơng nghệ World Wide Web, hay gọi Web giúp bạn đưa thơng tin mong muốn lên mạng chia cho bạn bè xem cách dễ dàng Sự đời ngôn ngữ lập trình cho phép xây dựng trang Web đáp ứng yêu cầu người sử dụng PHP (Personal Home Page) kịch phía trình chủ (Server Script) cho phép xây dựng trang Web với sở liệu Với nhiều ưu điểm bật mà PHP MySQL nhiều người sử dụng Với lý đó, hướng dẫn giúp đỡ 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 Trang web bao gồm chức sau:  Đăng ký tài khoản  Đăng nhập tài khoản  Đăng xuất tài khoản  Tạo ghi  Xem danh dách ghi  Chia sẻ ghi  Sửa ghi  Xóa ghi  Đổi mật CHƯƠNG II: CƠ SỞ LÝ THUYẾT I Các ngôn ngữ sử dụng cho trang web HTML Trang Web kết hợp văn thẻ HTML HTML chữ viết tắt HyperText Markup Language hội đồng World Wide Web Consortium (W3C) quy định Một tập tin HTML chẳng qua tập tin bình thường, có html htm HTML giúp định dạng văn trang Web nhờ thẻ Hơn nữa, thẻ html liên kết từ cụm từ với tài liệu khác Internet Một tài liệu HTML gồm phần bản: - Phần HTML: Mọi tài liệu HTML phải bắt đầu thẻ kết thúc thẻ đóng - Head: Phần đầu bắt đầu thẻ kết thúc thẻ Phần chứa tiêu đề hiển thị điều hướng trang Web - Body: Phần nằm sau phần tiêu đề Phần thân bao gồm văn bản, hình ảnh liên kết mà bạn muốn hiển thị trang Web Phần thân bắt đầu thẻ kết thúc thẻ CSS - CSS viết tắt Cascading Style Sheets CSS mô tả cách phần tử HTML hiển thị hình, giấy phương tiện khác - CSS tiết kiệm nhiều cơng việc Nó kiểm soát bố cục nhiều trang web lúc - CSS sử dụng để xác định kiểu cho trang web bạn, bao gồm thiết kế, bố cục biến thể hiển thị cho thiết bị kích thước hình khác Javascript Javascript ngơn ngữ lập trình kịch thực thi phía client bổ sung vào HTML nhầm làm cho trang web có khả lập trình để tương tác xử lý thơng tin PHP PHP (viết tắt cụm từ Personal Home Page) ngơn ngữ lập trình kịch (scripting language) mã nguồn mở dùng phổ biến để tạo ứng dụng web chạy máy chủ Mã lệnh PHP nhúng vào trang HTML nhờ sử dụng cặp thẻ PHP Tại nên dùng PHP? Để thiết kế Web động có nhiều ngơn ngữ lập trình khác để lựa chọn, cấu hình tính khác chúng đưa kết giống Chúng ta lựa chọn cho ngơn ngữ: ASP, PHP, Java, Perl số loại khác Vậy lại nên chọn PHP Rất đơn giản, có lý sau mà lập trình Web khơng nên bỏ qua lựa chọn tuyệt vời - PHP sử dụng làm Web động nhanh, dễ dàng, tốt so với giải pháp khác - PHP có khả thực tích hợp chặt chẽ với hầu hết sở liệu có sẵn, tính linh động, bền vững khả phát triển không giới hạn - Đặc biệt PHP mã nguồn mở tất đặc tính miễn phí, mã nguồn mở sẵn có nên cộng đồng nhà phát triển Web ln có ý thức cải tiến nó, nâng cao để khắc phục lỗi chương trình - PHP vừa dễ với người sử dụng vừa đáp ứng yêu cầu lập trình viên chuyên nghiệp, ý tưởng bạn PHP đáp ứng cách xuất sắc jQuery JQuery thư viện viết từ JavaScript, jQuery giúp xây dựng chức JavaScript dễ dàng, nhanh giàu tính jQuery tích hợp nhiều module khác Từ module hiệu ứng module truy vấn selector jQuery sử dụng đến 99% tổng số website giới AJAX AJAX từ viết tắt "Asynchronous Javascript and XML" Nó khơng phải cơng nghệ độc lập hay mẻ Trên thực tế, tập hợp cơng nghệ có sẵn (ví dụ: HTML, CSS, Javascript, XML, v.v ) sử dụng để xây dựng nên ứng dụng web đại Với AJAX, máy khách (tức trình duyệt) liên lạc với máy chủ web gửi yêu cầu để nhận liệu Sau đó, xử lí phản hồi máy chủ tạo thay đổi trang web mà khơng cần phải tải lại hồn tồn trang web II Cơng cụ thực Bootstrap Bootstrap framework cho phép thiết kế website reponsive nhanh dễ dàng Bootstrap bao gồm HTML templates, CSS templates Javascript tạo có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Trong bootstrap có thêm plugin Javascript Giúp cho việc thiết kế reponsive bạn dễ dàng nhanh chóng MySQL MySQL hệ thống quản trị sở liệu mã nguồn mở (Relational Database Management System, viết tắt RDBMS) hoạt động theo mơ hình clientserver RDBMS phần mềm hay dịch vụ dùng để tạo quản lý sở liệu (Database) theo hình thức quản lý mối liên hệ chúng Cơ sở liệu (database) tập hợp liệu tổ chức cho dễ dàng truy cập cập nhật Một sở liệu tổ chức thành bảng, bảng lưu trữ thơng tin theo cấu trúc Ví dụ bạn tạo trang web viết ghi chú, hẳn chứa nhiều loại thơng tin tiêu đề, nội dung, ngày tạo Nếu bạn xây dựng CSDL gồm bảng bang1 lưu trữ thông tin tiêu đề ghi chú, bang2 lưu trữ nội dung ghi chú, bang3 lưu trữ nội dung ngày tạo… phpMyAdmin 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 database administrator) quản lý CSDL MySQL thơng qua giao diện web thay sử dụng giao diện sổ dòng lệnh (command line interface) Sử dụng phpMyadmin người dùng thực nhiều thao tác khác sử dụng cửa sổ dòng lệnh Các tác vụ bao gồm việc tạo , cập nhật xóa CSDL, bảng, trường, liệu bảng, phân quyền quản lý người dùng,… Sử dụng phpMyadmin giúp tăng hiệu quản lý sở liệu Khi làm việc với phpMyadmin bạn thấy hiệu tăng lên đáng kể so với sử dụng cửa sổ dòng lệnh phpMyadmin thiết kế để giúp thực công việc phổ biến xem danh sách sở liệu server, xem cấu trúc bảng, chèn liệu vào bảng, thay đổi cấu trúc bảng cách nhanh chóng Bạn thấy điều quan sát giao diện cụ thể phpMyadmin mã nguồn mở miễn phí bạn khơng cần phải trả tiền để dùng nó, có nhiều đóng góp từ cộng đồng lập trình viên giới nên yên tâm độ bảo mật CHƯƠNG III: XÂY DỰNG WEBSITE VIẾT GHI CHÚ I.Giao diện 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ý) Giao diện trang đăng nhập Hình 2: Giao diện trang đăng nhập Giao diện trang tạo ghi Hình 3: Giao diện tạo ghi Giao diện trang danh sách ghi Hình 4: Giao diện trang danh sách ghi Giao diện trang đổi mật Hình 5: Giao diện trang đổi mật II Hướng dẫn sử dụng Đăng ký tài khoản Đầu tiên bạn chưa có tài khoản cần đăng ký tài khoản Nhập tên mật khẩu, nhập lại mật tránh nhập sai -> Tạo tài khoản *Lưu ý: tên đăng nhập phải nằm khoảng từ 6-24 ký tự, mật phải từ 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 Đăng nhập Sau đă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 Tạo ghi Tại trang chủ, bấm vào Tạo ghi bên gốc phải hình Nhập nội dung ghi -> Tạo ghi 11 Hình 8: Hướng dẫn tạo ghi Chỉnh sửa/ Xóa ghi Tại trang giao diện, danh sách note, bấm chọn ghi 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 bạn cần xóa ghi 12 Hình 9: Hướng dẫn chỉnh sửa/xóa ghi Chia sẻ Tại trang tạo/sửa ghi chú, chọn chia sẻ, bấm chia 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 ghi Đổi mật Tại trang giao diện góc phải hình, chọn đổi mật Tiếp đến, nhập mật cũ, nhập mật -> chọn Thay đổi Hình 11: Hướng dẫn sử dụng đổi mật 14 CHƯƠNG IV: TỔNG KẾT I Ưu điểm – Nhược điểm 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 tồn  Dễ dàng tìm kiếm, xem lại ghi Nhược điểm:  Chưa lưu hình ảnh, âm II Hướng phát triển Khi xóa ghi chuyển vào thùng rác Khi cần 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 https://www.memonotepad.com/ https://www.w3schools.com/ https://viettuts.vn/ 15 ... trang web viết ghi chú? ?? làm đề tài cho môn học II Mô tả trang web viết ghi Trang web bao gồm chức sau:  Đăng ký tài khoản  Đăng nhập tài khoản  Đăng xuất tài khoản  Tạo ghi  Xem danh dách ghi. .. tạo trang web viết ghi chú, hẳn chứa nhiều loại thông tin tiêu đề, nội dung, ngày tạo Nếu bạn xây dựng CSDL gồm bảng bang1 lưu trữ thông tin tiêu đề ghi chú, bang2 lưu trữ nội dung ghi chú, bang3... trang web có khả lập trình để tương tác xử lý thông tin PHP PHP (viết tắt cụm từ Personal Home Page) ngôn ngữ lập trình kịch (scripting language) mã nguồn mở dùng phổ biến để tạo ứng dụng web chạy