ĐẠI HỌC ĐÀ NẴNG TRƢỜNG ĐẠI HỌC SƢ PHẠM KHOA TIN HỌC Đề tài: THIẾT KẾ WEBSITE TƢ VẤN DINH DƢỠNG CHO PHỤ NỮ CÓ THAI Giáo viên hƣớng dẫn : ThS Nguyễn Thanh Tuấn Sinh viên thực : Huỳnh Thị Thu Hiền Lớp : 11CNTT1 Ngành : Cử nhân CNTT Đà Nẵng, tháng 5/2015 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai LỜI CẢM ƠN Đầu tiên em xin bày tỏ lòng biết ơn sâu sắc đến tất quý thầy cô khoa tin học trường đại học Sư phạm - ĐH Đà Nẵng, truyền đạt kinh nghiệm quý báu cho chúng em năm học vừa qua Đặc biệt em xin chân thành cảm ơn thầy Nguyễn Thanh Tuấn nhiệt tình hướng dẫn em hồn thành đề tài khóa luận tốt nghiệp Đồng thời gửi lời cảm ơn đến tất bạn sinh viên khóa ủng hộ, giúp đỡ, chia sẻ kiến thức kinh nghiệm thời gian làm khóa luận Tuy nhiên, q trình hồn thành đề tài kinh nghiệm vốn kiến thức cịn hạn chế nên khơng tránh khỏi thiếu sót Em mong nhận góp ý, nhận xét anh chị, quý thầy bạn để đề tài hồn thiện Em xin chân thành cảm ơn ! Sinh viên Huỳnh Thị Thu Hiền SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai LỜI CAM ĐOAN Tôi xin cam đoan: Những nội dung báo cáo thực hướng dẫn trực tiếp thầy Nguyễn Thanh Tuấn Mọi tham khảo dùng báo cáo trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian, địa điểm công bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tơi xin chịu hồn tồn trách nhiệm Sinh viên Huỳnh Thị Thu Hiền SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN DANH MỤC HÌNH DANH MỤC BẢNG DANH MỤC TỪ VIẾT TẮT MỞ ĐẦU Bối cảnh đề tài Mục đích nghiên cứu Đối tƣợng phạm vi nghiên cứu 10 Phƣơng pháp nghiên cứu 10 Ý nghĩa đề tài 10 Cấu trúc báo cáo khóa luận 11 CHƢƠNG 1: CƠ SỞ LÝ THUYẾT 12 1.1 Nghiên cứu HTML 12 1.1.1 HTML 12 1.1.1.1 Khái niệm 12 1.1.1.2 Cấu trúc tài liệu HTML 12 1.1.1.3 Cấu thành phần HTML 12 1.1.1.4 Những nguyên tắc 13 1.1.1.5 Các thẻ 13 1.1.2 HTML5 16 1.1.2.1 Sự đời phát triển 16 1.1.2.2 Các lý để lựa chọn HTML5 16 1.1.2.3 Ƣu điểm HTML5 17 1.1.2.4 Cú pháp trang HTML5 18 1.1.2.5 Các thẻ HTML5 18 1.1.2.6 Các tính HTML5 20 1.1.2.7 Các trình duyệt hỗ trợ HTML5 20 1.2 Giới thiệu ngơn ngữ lập trình PHP 21 1.2.1 Các phiên PHP 21 SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai 1.2.2 Đặc điểm ngôn ngữ PHP 24 1.2.2.1 Ƣu điểm 24 1.2.2.2 Nhƣợc điểm 25 1.3 JavaScript 26 1.3.1 Khái niệm 26 1.3.2 Cú pháp 26 1.3.2.1 Khoảng trắng 26 1.3.2.2 Chú thích 26 1.3.2.3 Biến 27 1.3.2.4 Đối tƣợng 27 1.3.2.5 Cấu trúc liệu 27 1.3.3 Cách nhúng javaScript vào HTML 28 1.4 CSS 28 1.4.1 Khái niệm CSS 28 1.4.2 Cú pháp CSS 28 1.4.3 Cách khai báo 29 1.4.4 CSS Selector 30 1.4.5 CSS3 32 1.4.6 Hƣớng đối tƣợng CSS (OOCSS) 32 1.5 Tìm hiểu jQuery 33 1.5.1 Sơ lƣợc jQuery 33 1.5.2 Những jQuery làm 33 1.6 Tìm hiểu Twitter Bootstrap 34 1.6.1 Sơ lƣợc Twitter Bootstrap 34 1.6.2 Cách sử dụng 34 1.6.3 Bộ công cụ Twitter Bootstrap 34 CHƢƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 36 2.1 Phân tích tốn 36 2.2 Phân tích thiết kế hệ thống 36 2.2.1 Sơ đồ Use Case 36 SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai 2.2.2 Mơ hình chức 38 2.2.3 Sơ đồ phân rã chức 38 2.2.4 Sơ đồ ngữ cảnh 39 2.3 Thiết kế sở liệu 40 2.3.1 Mô tả lƣợc đồ 40 2.3.2 Mô tả liệu 40 CHƢƠNG 3: XÂY DỰNG WEBSITE VÀ CÁC KẾT QUẢ CỤ THỂ 42 3.1 Giao diện chức ngƣời dùng 42 3.1.1 Giao diện website 42 3.1.2 Giao diện trang giới thiệu 43 3.1.3 Giao diện trang liên hệ 43 3.1.4 Giao diện trang đăng kí 44 3.1.5 Giao diện trang lấy lại mật 45 3.1.6 Giao diện trang tƣ vấn 46 3.2 Giao diện chức Admin 47 3.2.1 Giao diện trang admin 47 3.2.2 Giao diện trang quản lí thành viên 48 3.2.3 Giao diện trang quản lí liên hệ 49 KẾT LUẬN 50 Kết đạt đƣợc 50 Hƣớng phát triển 50 TÀI LIỆU THAM KHẢO 51 SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai DANH MỤC HÌNH Hình Cách thức hoạt động ngôn ngữ PHP 24 Hình PHP hỗ trợ nhiều Database khác giúp việc phát triển Web tiện lợi 25 Hình 4: Mơ hình Use Case 37 Hình 5: Mơ hình chức hệ thống .38 Hình 6: Sơ đồ phân rã chức 39 Hình 7: Sơ đồ ngữ cảnh 40 Hình 8: Giao diện trang chủ 42 Hình 9: Giao diện trang giới thiệu 43 Hình 10: Giao diện trang liên hệ 44 Hình 11: Giao diện trang Đăng kí 45 Hình 12: Giao diện trang lấy lại mật 45 Hình 13: Giao diện trang tƣ vấn bạn chua đăng nhập .46 Hình 14: Giao diện trang tƣ vấn đăng nhập 47 Hình 15: Giao diện trang admin 48 Hình 16: Giao diện trang quản lí thành viên 48 Hình 17: Giao diện trang chỉnh sữa quyên cho thành viên 48 Hình 18: Giao diện trang quản lí liên hệ .49 Hình 19: Giao diện trang xem chi tiết nội dung liên hệ 49 SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai DANH MỤC BẢNG Bảng 1: Mơ tả thẻ HTML5 .18 Bảng Mô tả Actor 37 Bảng 3: Mô tả lƣợc đồ 40 Bảng 4: bảng tbl_gd .40 Bảng 5: bảng tbl_lienhe 41 Bảng 6: bảng tbl_user 41 SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai DANH MỤC TỪ VIẾT TẮT Từ viết tắt HTML CSS Tên đầy đủ HyperText Markup Language Cascading Style Sheet PHP Hypertext Preprocesso SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Diễn giải nghĩa Ngôn ngữ Đánh dấu Siêu văn Là ngôn ngữ đƣợc dùng để mô tả cách trình bày tài liệu viết ngơn ngữ HTML XHTML,… số ngôn ngữ khác Ngôn ngữ lập trình kịch hay loại mã lệnh chủ yếu đƣợc 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 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai MỞ ĐẦU Bối cảnh đề tài  Tên đề tài Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai  Lý chọn đề tài Ngày công nghệ thơng tin giữ vai trị quan trọng phát triển lồi ngƣời nói chung phát triển kinh tế, trị, xã hội đất nƣớc nói riêng, Việt Nam khơng ngoại lệ Việc nắm bắt đƣợc công nghệ thông tin giúp bắt kịp với thời đại, nắm bắt đƣợc xu phát triển giới, đƣa dự báo, dự đốn, góp phần vào phát triển chung giới Trong sống, dinh dƣỡng cân đối ăn uống điều độ yếu tố có ảnh hƣởng quan trọng đến sức khỏe mẹ bé, phát triển bé suốt thai kỳ Để có sức khỏe an toàn chế độ dinh dƣỡng tốt cho ngƣời phụ nữ có thai địi hỏi ngƣời phụ nữ phải có kiến thức dinh dƣỡng Tuy nhiên khơng phải có kiến thức chu đáo vững vàng để chuẩn bị cho hành trang sức khỏe q trình có thai Xuất phát từ suy nghĩ đó, em chọn đề tài “xây dựng website tƣ vấn dinh dƣỡng phụ nữ có thai” để nghiên cứu, nhằm cung cấp thông tin cần thiết dinh dƣỡng cho ngƣời phụ nữ mang thai Mục đích nghiên cứu Có mục đích em định chọn đề tài là: ● Nghiên cứu tìm hiểu cơng nghệ: ○ HTML5 ○ CSS ○ JavaScript ○ PHP ○ Bootstrap ● Tìm hiểu thơng tin dinh dƣỡng ○ Thông tin tổng quan dinh dƣỡng ○ Thông tin số BMI, số hình thể ○ Thơng tin dinh dƣỡng qua giai đoạn thai kì ● Phƣơng pháp xây dựng website tƣ vấn dinh dƣỡng đáp ứng đƣợc nhiều thiết bị smartphone, tablet, desktop SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai Hình 6: Sơ đồ phân rã chức Mơ tả chi tiết chức năng:  Đăng kí: Để sử dụng đầy đủ chức website ngƣời dùng phải đăng kí tài khoản  Đăng nhập: Ngƣời dùng sử dụng tài khoản mật đăng kí để đăng nhập vào hệ thống  Quản lí user quản lí liên hệ: chức giành cho admin  Liên hệ: Ngƣời dùng đặt câu hỏi hay vấn đề liên quan đến dinh dƣỡng cho chuyên gia thông qua mục liên hệ  Tƣ vấn dinh dƣỡng: chức tƣ vấn dành cho phụ nữ mang thai, ngƣời dùng phải đăng nhập vào hệ thống để sử dụng  Thống kê: hệ thống thống kê số lƣợng thành viên, số lƣợng ban quản trị, số lƣợng liên hệ đƣợc ngƣời dùng gửi đến Chỉ có admin có quyền xem thống kê 2.2.4 Sơ đồ ngữ cảnh SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 39 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai Hình 7: Sơ đồ ngữ cảnh 2.3 Thiết kế sở liệu 2.3.1 Mô tả lƣợc đồ Stt Tên bảng Tbl_gd Tbl_lienhe Tbl_user Bảng 3: Mô tả lƣợc đồ Các trƣờng Gd_id, gd_name, ketqua Id, ten, email, tieude, noidung, tinh trang, time Id, ho, ten, email, passwd, ngay, thang, nam, gioitinh, quyen Mô tả Chứa thông tin kết tƣ vấn Chứa thông tin liên hệ Chứa thông tin thành viên 2.3.2 Mơ tả liệu Bảng 4: bảng tbl_gd Khóa gd_id SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 40 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai Bảng 5: bảng tbl_lienhe Khóa id Bảng 6: bảng tbl_user Khóa id SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 41 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai CHƢƠNG 3: XÂY DỰNG WEBSITE VÀ CÁC KẾT QUẢ CỤ THỂ 3.1 Giao diện chức ngƣời dùng 3.1.1 Giao diện website Giao diện website: cho phép ngƣời dùng xem tin tức theo chủ đề, đăng nhập vào hệ thống, xem đƣợc thống kê số ngƣời truy cập vào trang web Hình 8: Giao diện trang chủ SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 42 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai 3.1.2 Giao diện trang giới thiệu Giao diện trang giới thiệu: giới thiệu sơ chức website Hình 9: Giao diện trang giới thiệu 3.1.3 Giao diện trang liên hệ Giao diện trang liên hệ: cho phép ngƣời dùng gửi thắc mắc đến chuyên gia giải đáp cách nhập thông tin vào trang SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 43 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai Hình 10: Giao diện trang liên hệ 3.1.4 Giao diện trang đăng kí Giao diện trang đăng kí: cho phép ngƣời dùng tạo tài khoản để sử dụng đƣợc chức trang web SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 44 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai Hình 11: Giao diện trang Đăng kí 3.1.5 Giao diện trang lấy lại mật Giao diện trang lấy lại mật khẩu: cho phép ngƣời dùng lấy lại mật bị Hình 12: Giao diện trang lấy lại mật SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 45 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai 3.1.6 Giao diện trang tƣ vấn Giao diện trang tƣ vấn: cho phép ngƣời dùng sử dụng chức tƣ vấn Để sử dụng chức ngƣời dùng phải đăng nhập vào hệ thống Hình 13: Giao diện trang tƣ vấn bạn chua đăng nhập SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 46 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai Hình 14: Giao diện trang tƣ vấn đăng nhập 3.2 Giao diện chức Admin 3.2.1 Giao diện trang admin Giao diện admin: cho phép admin quản lí hệ thống SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 47 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai Hình 15: Giao diện trang admin 3.2.2 Giao diện trang quản lí thành viên Tại trang quản lí thành viên: admin thêm sữa xóa thành viên, phân quyền cho thành viên Hình 16: Giao diện trang quản lí thành viên Hình 17: Giao diện trang chỉnh sữa quyên cho thành viên SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 48 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai 3.2.3 Giao diện trang quản lí liên hệ Tại trang quản lí liên hệ: admin xóa liên hệ, thay đổi trạng thái, xem chi tiết nội dung liên hệ Hình 18: Giao diện trang quản lí liên hệ Hình 19: Giao diện trang xem chi tiết nội dung liên hệ SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 49 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai KẾT LUẬN Kết đạt đƣợc Trong trình làm đồ án, em thực đƣợc số công việc sau đây: - Xây dựng đƣợc giao diện hệ thống trang web tƣ vấn dinh dƣỡng cho phụ nữ có thai - Đã đƣa đƣợc tiếng việt hầu hết trang wed, form nhập liệu, nút chƣơng trình tạo điều kiện thuận lợi cho ngƣời sử dụng - Đề tài hoàn thành đƣợc số chức Tuy đề tài mang quy mô nhỏ demo nhƣng trình thực em học đƣợc cách thực hóa kiến thức từ sách vào cơng việc Từ tự rút kinh nghiệm hữu ích cho thân Tuy nhiên thời gian kiến thức chun mơn hạn chế nên thời gian làm báo cáo hoàn thành đƣợc số chức website Hƣớng phát triển Trong khoảng thời gian hạn chế, kinh nghiệm cịn nên em xây dựng đƣợc giao diện cho trang web số chức nhỏ Hƣớng phát triển tƣơng lai em mở rộng phạm vi nghiên cứu thành nhiều đối tƣợng khác (không cho phụ nữ mang thai mà cho ngƣời bệnh, trẻ sơ sinh,…), Đề tài phát triển thêm chức khác nhƣ: o Tạo trang diễn đàn cho ngƣời sử dụng trao đổi thơng tin dinh dƣỡng, o Mở rộng phạm vi tƣ vấn cho chức tƣ vấn o Triển khai ứng dụng vào thực tế o Hoàn thiện hệ thống Server SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 50 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai TÀI LIỆU THAM KHẢO Sách: [1] Dejan V Cancarevi Front-end Guide, ISBN 978-1-257-37903-3, 2011 [2] Bruce Lawson and Remy Sharp Introduce HTML5, CA 94710, 1249 Eighth Street 2011 [3] Douglas Crockford Oreilly.JavaScript.The.Good.Parts.May.2008.pdf, Website: http://www.w3schools.com/ http://learn.jquery.com/ http://hocwebchuan.com/ http://getbootstrap.com/ http://vi.wikipedia.org/ http://nutrition.org.vn/ SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 51 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai NHẬN XÉT CỦA GIẢNG VIÊN HƢỚNG DẪN ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Đà Nẵng, ngày tháng năm 2015 GIẢNG VIÊN HƢỚNG DẪN ( Ký, ghi rõ họ tên) SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 52 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Đà Nẵng, ngày tháng năm 2015 GIÁO VIÊN PHẢN BIỆN ( Ký, ghi rõ họ tên) SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 53 ... cho máy chủ, mã nguồn mở, dùng cho mục đích tổng Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai MỞ ĐẦU Bối cảnh đề tài  Tên đề tài Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ. .. tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai 1.1.2.3 Ƣu điểm HTML5 HTML5 thiết kế lại web cho phép website có nhiều tiện ích Các thẻ HTML5 thay plug-in việc đơn giản nhƣ làm cho. .. dƣỡng cho phụ nữ có thai Bảng 5: bảng tbl_lienhe Khóa id Bảng 6: bảng tbl_user Khóa id SVTH: Huỳnh Thị Thu Hiền- Lớp 11CNTT1 41 Đề tài: Thiết kế website tƣ vấn dinh dƣỡng cho phụ nữ có thai CHƢƠNG