XÂY DỰNG WEBSITE BÁN THỰC PHẨM ORGANIC TẠI LÀO - Full 10 điểm

1 L Ờ I C ẢM ƠN Đồ án phân tích và thi ế t k ế “ Xây dựng website bán thực phẩm Organic tại Lào ” là cơ hội để tôi có th ể áp d ụ ng, t ổ ng k ế t nh ữ ng ki ế n th ức mà mình đã họ c, đồ ng th ờ i rút ra nh ữ ng kinh nghi ệ m th ự c t ế quý giá trong su ố t quá trình th ự c hi ện đồ án Để h oàn thành đồ án này Tôi xin chân thành c ảm ơn các thầ y cô thu ộ c khoa công ngh ệ thông tin trƣờng đạ i h ọ c Qu ảng Nam đã tậ n tình gi ả ng d ạ y, truy ền đạ t hƣớ ng d ẫ n các ki ế n th ứ c th ự c t ế cũng nhƣ đã tạ o m ọi điề u ki ệ n thu ậ n l ợ i nh ất để tôi hoàn thành Tôi xin gử i lời cảm ơn sâu sắc đến cô Nguyễn Thị Minh Châu đã hƣớng dẫn, truyền tải những kiến thức hữu ích và giúp đỡ tôi về nhiều mặt trong lúc làm đồ án Cô đã đóng góp ý kiến, sửa chữa những thiếu sót, khuyết điểm mà tôi đã mắc phải và đề ra hƣớng giải quyết tốt nhất từ khi nhận đồ án đến khi hoàn thành Từ đó, đề tài này đƣợc hoàn thành tốt đẹp Kế tiếp tôi xin gửi lời cảm ơn đến tất cả các bạn cùng lớp đã giúp đỡ tôi hoàn thành đề tài của môn học này Mặc dù đã cố gắng hoàn thành đề tài với tất cả sự nỗ lực nhƣng chắc chắn không tránh khỏi những thiếu sót nhất định, kính mong sự tận tình chỉ bảo của các thầy cô Xin kính chúc quý thầy cô nhiều sức khoẻ, hạnh phúc và vững bƣớc trên con đƣờng sự nghiệp trồng ngƣời vinh quang mà xã hội đã giao phó Quảng Nam,Tháng 3 năm2023 Sinh vien thực hiện Kesone THEPMAHAVONG 2 M Ụ C L Ụ C M Ụ C L Ụ C 2 DANH M Ụ C HÌNH VÀ B Ả NG BI Ể U 4 PH Ầ N 1 M Ở ĐẦ U 5 1 Lý do ch ọ n đ ề tài 5 2 M ụ c tiêu c ủ a đ ề tài 5 3 Đ ố i tƣ ợ ng và ph ạ m vi nghiên c ứ u 5 4 Phƣơng pháp nghiên c ứ u 6 5 L ị ch s ử nghiên c ứ u 6 6 Đóng góp c ủ a đ ề tài 6 7 C ấ u trúc đ ề tài 6 PH Ầ N 2 N Ộ I DUNG NGHIÊN C Ứ U 7 CHƢƠNG 1: CƠ SỞ LÝ THUY Ế T 7 1 1 Các khái ni ệm cơ bả n 7 1 1 1 Gi ớ i thi ệ u ngôn ng ữ HTML 7 1 1 2 C ấu trúc cơ bả n c ủ a m ộ t file HTML 8 1 2 Ngôn ng ữ CSS 10 1 2 1 Gi ớ i thi ệ u 10 1 2 2 Cú pháp c ủ a CSS 12 1 2 3 Gi ớ i thi ệ u BOOTSTRAP 12 1 2 4 Gi ớ i thi ệ u JAVASCRIPT 13 1 2 5 Gi ớ i thi ệ u PHP 13 1 3 Công c ụ s ử d ụ ng 14 1 3 1 Visual Studio Code 14 1 4 T ổ ng quan MySQL 14 1 4 1 Gi ớ i thi ệ u v ề MySQL 14 CHƢƠNG 2: PHÂN TÍCH VÀ THIẾ T K Ế WEBSITE 19 2 1 Mô t ả t ổ ng quan 19 2 1 1 Kh ả o sát 19 2 1 2 Các ch ức năng củ a h ệ th ố ng 19 2 1 3 Các yêu c ầ u phi ch ức năng 21 3 2 1 4 Nhóm ngƣờ i s ử d ụ ng 21 2 2 Tìm Xác đ ị nh (Use Case) c ủ a các tác nhân 21 2 3 Bi ểu đồ User Case cho h ệ th ố ng 22 2 3 1 Qu ả n lí lo ạ i s ả n ph ẩ m 23 2 3 2 Qu ả n lí s ả n ph ẩ m 24 2 3 3 Qu ả n lí nhà cung c ấ p 26 2 3 4 Qu ả n lí khách hàng 27 2 3 5 Qu ả n lí tài kho ả n 28 2 3 6 Qu ả n lí nhân viên 29 2 3 7 Qu ả n lí nh ậ p hàng 30 2 3 8 Qu ả n lí bán hàng 31 2 3 9 Qu ả n lí tin t ứ c 32 2 3 10 Th ố ng kê 33 2 4 Bi ểu đồ tu ầ n t ự 34 2 5 Thi ế t k ế cơ sở d ữ li ệ u c ủ a h ệ th ố ng 36 CHƢƠNG 3: GIAO DIỆ N C Ủ A H Ệ TH Ố NG 40 3 1 Cài đặt cơ sở d ữ li ệ u 40 3 2 Giao di ệ n c ủ a h ệ th ố ng 42 3 2 1 Giao di ệ n trang ch ủ 42 3 2 2 Giao di ệ n trang gi ỏ hàng 43 3 2 3 Giao di ện trang đăng kí 43 3 2 4 Giao di ện trang đăng nhậ p 44 3 2 5 Giao di ệ n trang admin 44 3 2 6 Giao di ệ n trang admin qu ả n lí s ả n ph ẩ m 45 3 2 7 Giao di ệ n trang admin thêm s ả n ph ẩ m 45 PH Ầ N 3: K Ế T LU Ậ N 46 1 K ế t lu ậ n 46 1 1 K ế t qu ả đạt đƣợ c c ủa đề tài 46 1 2 H ạ n ch ế c ủa đề tài 46 2 Ki ế n ngh ị 46 PH Ầ N 4 TÀI LI Ệ U THAM KH Ả O 47 4 DANH M Ụ C HÌNH VÀ B Ả NG BI Ể U Hình 1-1: Mô hình c ủ a HTML 7 Hình 1-2: Mô hình ho ạt độ ng JavaScript, CSS, HTML 8 Hình 1-3: Mô hình cú pháp c ủ a CSS 12 Hình 2-1: Bi ểu đồ Use Case t ổ ng quát c ủ a h ệ th ố ng 22 Hình 2-2: Bi ểu đồ Use Case q ả n lí lo ạ i hàng 23 Hình 2-3: Bi ểu đồ Use Case qu ả n lí s ả n ph ẩ m 24 Hình 2-4: Bi ểu đồ Use Case qu ả n lí nhà cung c ấ p 26 Hình 2-5:Bi ểu đồ Use Case qu ả n lí khách hàng 27 Hình 2-6: Bi ểu đồ Use Case qu ả n lí User 28 Hình 2-7:Bi ểu đồ Use Case qu ả n lí nhân viên 29 Hình 2-8:Bi ểu đồ Use Case qu ả n lí nh ậ p hàng 30 Hình 2-9: Bi ểu đồ Use Case qu ả n lí bán hàng 31 Hình 2-10: Bi ểu đồ Use Case qu ả n lí tin t ứ c 32 Hình 2-11: Bi ểu đồ Use Case th ố ng kê 33 Hình 2-12: Bi ểu đồ tu ầ n t ự đăng ký 34 Hình 2-13: Bi ểu đồ tu ầ n t ự đăng nhậ p 34 Hình 2-14:Bi ểu đồ tu ầ n t ự s ả n ph ẩ m 35 Hình 2-15: Bi ểu đồ tu ầ n t ự tìm ki ế m 35 Hình 2-16 : Mô hình lƣu trữ c ấ u trúc website trên Database 36 Hình 3-1 :B ả ng User 40 Hình 3-2 : B ả ng khách hàng 40 Hình 3-3 : B ả ng L ạ oi s ả n ph ẩ m 40 Hình 3-4 : B ả ng hóa đon 40 Hình 3-5 : B ả ng s ả n ph ẩ m 41 Hình 3-6: B ả ng chí ti ế t hóa đon 41 Hình 3-7 : B ả ng bài vi ế t 41 Hình 3-8 Giao di ệ n trang ch ủ 42 Hình 3-9 Giao di ệ n trang gi ỏ hàng 43 Hình 3-10 Giao di ện trang đăng ký 43 Hình 3-11 Giao di ện trang đăng nhậ p 44 Hình 3-12 Giao di ệ n trang admin 44 Hình 3-13 Giao di ệ n trang qu ả n lý s ả n ph ẩ m 45 Hình 3-14 Giao di ệ n trang thêm s ả n ph ẩ m 45 5 PH Ầ N 1 M Ở ĐẦ U 1 Lý do ch ọn đề tài S ự phát tri ể n c ủ a công ngh ệ thông tin và vi ệ c ứ ng d ụ ng c ủ a công ngh ệ thông tin trong các lĩnh vự c c ủ a đờ i s ố ng, kinh t ế , xã h ộ i trong nhi ều năm qua đặ c bi ệt là trong thƣơng mại đã thôi thúc các doanh nghiệ p các s ự đầu tƣ lớ n vào trong lĩnh vực thƣơng mại điệ n t ử S ự ti ệ n ích luôn đặ t lên hàng đầ u nên giao di ệ n và n ộ i dung c ủ a trang Web ph ả i th ậ t n ổ i b ật để có th ể thu hút đƣợ c khách hàng Bên c ạnh đó tính bả o m ật cũng là mộ t v ấn đề đố i v ớ i khách hàng tr ự c tuy ế n V ớ i s ự phát tri ể n m ạ nh m ẽ công ngh ệ thông tin nhƣ ngày này thì vấn đề trên có th ể đƣợ c gi ả i quy ế t d ễ dàng Ch ỉ v ớ i m ộ t chi ếc máy tính đƣợ c k ế t n ố i internet khách hàng có th ể l ự a ch ọ n và mua s ắ m m ọ i lúc, m ọi nơi chỉ v ớ i m ộ t vài thao tác đơn giả n h ọ s ẽ có đƣợ c m ộ t s ả n ph ẩm ƣng nhấ t Bên c ạnh đó còn giúp c ử a hàng qu ản lý đƣợ c vi ệ c mua bán hi ệ u qu ả c ủa hơn so vớ i vi ệ c qu ả n lý trên gi ấ y t ờ d ễ gây sai sót hay m ấ t mác thông tin, các d ữ li ệ u và s ả n ph ẩ m, khách hàng đƣợc lƣu trữ m ộ t cách an toàn Chính vì nh ững lý do trên, tôi đã ch ọn đề tài: : Xây dựng website bán thực phẩm Organic tại Lào để làm khóa lu ậ n t ố t nghi ệ p 2 M ụ c tiêu c ủa đề tài V ớ i nh ững lý do nêu trên, đề tài: Xây dụng website bán thực phẩm Organic tại Lào ra đờ i nh ằ m ph ụ c v ụ các m ục tiêu đã đề ra giúp cho vi ệ c ho ạ t độ ng c ủ a website di ễ n ra ti ệ n l ợ i và nhanh chóng nh ấ t Các ch ức năng đƣợ c hoàn thi ệ n, b ổ sung cho website bao g ồ m: - Giao di ệ n d ễ s ử d ụ ng, có tính th ẩ m m ỹ cao và có th ể co giãn phù h ợ p v ớ i m ọ i thi ế t b ị và trên m ọ i màn hình - Cho phép khách hàng đăng ký thành viên và đả m b ả o bí m ậ t thông tin - Thông tin s ả n ph ẩm phong phú, đa dạ ng - Luôn c ậ p nh ậ t, gi ớ i thi ệ u các s ả n ph ẩ m m ớ i nh ấ t 3 Đối tƣợ ng và ph ạ m vi nghiên c ứ u Về lý thuyết - Tìm hiểu quy trình mua - Bản thực tế ở các cửa hàng thực phẩm sạch, Lƣu ý những khó khăn , hạn chế của việc mua 6 - Bán thủ công; Thống kế các mặt hàng có trong cửa hàng, tập trung nghiên cứu các công nghệ mới nhằm giải quyết vấn đề một cách tốt nhất có thể - Tìm hiểu các công cụ hỗ trợ để xây dụng Website Về ứng dụng: Xây dựng các chức nă ng cơ bản cần thiết cho một web bán thực phẩm sạch kết hợp phát triển thêm các chức năng mà website bán thực phẩm sạch hiện này còn đang thiếu hoặc đã có nhƣng chƣa hoàn thiện 4 Phƣơng pháp nghiên cứ u - Nắm vững kiến thức về phân tích và thiết kế hệ th ống thông tin - Có kiến thức vững về CSDL: Tổ chức dữ liệu, phân tích, thiết kế CSDL - Nắm vững và có khả năng sử dụng thành thạo PHP, HTML, CSS - Nắm vững, sử dụng kết hợp một cách hợp lý các kỹ thuật lập trình - Nghiên cứu các công cụ xây dựng hệ thống Về ứng dụng: Khi hoàn thành khắc phục những hạn chế mà các website bán thực phẩm sạch hiện nay còn mắc phải, quản lý sản phẩm, đơn hàng một cách linh hoạt, tƣơng tác đƣợc với ngƣời bán và khách hàng 5 L ị ch s ử nghiên c ứ u N ội dung đã đƣợ c d ạ y và h ọ c ở h ọ c ph ầ n phân tích thi ế t k ế Website Có nhi ều ngƣời cũng nhƣ các nhóm nghiên cứu đã chọ n ki ế n th ứ c này làm n ộ i dung cho đề tài nghiên c ứ u c ủ a h ọ 6 Đóng góp của đề tài - Giúp ngƣời tiêu dùng có đƣợ c giá c ả và hình ả nh c ủ a s ả n ph ẩ m m ộ t cách chính xác - Xây dụng hoàn chỉnh một trang website bán thực phẩm Organic tại Lào 7 C ấu trúc đề tài PH Ầ N 1 M Ở ĐẦ U PH Ầ N 2 N Ộ I DUNG NGHIÊN C Ứ U Chƣơng 1: Cơ sở lý thuy ế t Chƣơng 2: Phân tích và thiế t k ế h ệ th ố ng thông tin Chƣơng 3: Th i ế t k ế và xây d ự ng website PH Ầ N 3 K Ế T LU Ậ N VÀ KI Ế N NGH Ị PH Ầ N 4 TÀI LI Ệ U THAM KH Ả O 7 PH Ầ N 2 N Ộ I DUNG NGHIÊN C Ứ U CHƢƠNG 1: CƠ SỞ LÝ THUY Ế T 1 1 Các khái ni ệm cơ bả n 1 1 1 Gi ớ i thi ệ u ngôn ng ữ HTML Ngôn ng ữ HTML (HyperText Markup Language – ngôn ng ữ siê u văn b ả n) là m ộ t trong các lo ạ i ngôn ng ữ đƣợ c s ử d ụ ng trong l ậ p trình web Khi truy c ậ p m ộ t trang web c ụ th ể là click vào các đƣờ ng link, b ạ n s ẽ đƣợ c d ẫ n t ớ i nhi ều trang các nhau và các trang này đƣợ c g ọ i là m ộ t tài li ệ u HTML (t ậ p tin HTML) M ộ t trang HT ML nhƣ vậy đƣợ c c ấ u thành b ở i nhi ề u ph ầ n t ử HTML nh ỏ và đƣợc quy đị nh b ằ ng các th ẻ tag B ạ n có th ể phân bi ệ t m ộ t trang web đƣợ c vi ế t b ằ ng ngôn ng ữ HTML hay PHP thông qua đƣờ ng link c ủ a nó Ở cu ối các trang HTML thƣờng hay có đuôi là HTML hoặ c HTM nh 1-1: Mô hình c ủ a HTML M ột trang HTML đƣợ c c ấ u thành b ở i nhi ề u ph ầ n t ử HTML nh ỏ và đƣợc quy đị nh b ằ ng các th ẻ tag HTML là ngôn ng ữ l ập trình web đƣợc đánh giá là đơn giả n M ọ i trang web, m ọ i trình duy ệt web đề u có th ể hi ể n th ị t ố t ngôn ng ữ HTML Hi ệ n nay, 8 phiên b ả n m ớ i nh ấ t c ủ a HTML là HTML 5 v ớ i nhi ều tính năng tố t và ch ấ t lƣợng hơn so vớ i các phiên b ản HTML cũ V ậy, đố i v ớ i các website, ngôn ng ữ HTML đóng vai trò nhƣ thế nào? HTML, theo đúng nghĩa củ a nó, là m ộ t lo ạ i ngôn ng ữ đánh dấu siêu văn bả n, th ế nên các ch ức năng của nó cũng xoay quanh yế u t ố này C ụ th ể , HTML giúp c ấ u thành các c ấu trúc cơ bả n trên m ột website (chia khung sƣờ n, b ố c ụ c các thành ph ầ n trang web) và góp ph ầ n h ỗ tr ợ khai báo các t ập tin kĩ thu ậ t s ố nhƣ video, nhạ c, hình ả nh nh 1-2: Mô hình ho ạt độ ng JavaScript, CSS, HTML Ƣu điể m n ổ i tr ộ i nh ất và cũng là thế m ạ nh c ủ a HTML là kh ả năng xây d ự ng c ấ u trúc và khi ến trang web đi vào quy cũ mộ t h ệ th ố ng hoàn ch ỉ nh N ế u b ạ n mong mu ố n s ở h ữ u m ộ t website có c ấ u trúc t ố t có m ục đích sử d ụ ng nhi ề u lo ạ i y ế u t ố trong văn bả n, hãy h ỏ i HTML Nhi ề u ý ki ế n cho r ằ ng tùy theo m ục đích sử d ụ ng mà l ập trình viên hay ngƣờ i dùng có th ể l ự a ch ọ n ngôn ng ữ l ậ p trình riêng cho website c ủ a b ạ n, tuy nhiên th ự c ch ấ t HTML ch ứ a nh ữ ng y ế u t ố c ầ n thi ế t mà dù website c ủ a b ạ n có thu ộ c th ể lo ạ i nào, giao ti ế p v ớ i ngôn ng ữ l ập trình nào để x ử lý d ữ li ệ u thì nó v ẫ n ph ả i c ần đế n ngôn ng ữ HTML để hi ể n th ị n ội dung cho ngƣờ i truy c ậ p Nói đúng hơn, dù website củ a b ạn đƣợ c xây d ựng nhƣ thế nào, trên n ề n t ảng nào thì nó cũng cần đế n s ự h ỗ tr ợ c ủ a HTML, dù ít dù nhi ều Đố i v ớ i các l ậ p trình viên hay nhà phát tri ể n web, h ọ đề u ph ả i h ọc HTML nhƣ mộ t lo ạ i ngôn ng ữ cơ bản trƣớ c khi b ắ t tay vào thi ế t k ế trang web nào 1 1 2 C ấu trúc cơ bả n c ủ a m ộ t file HTML C ấu trúc cơ bả n c ủ a HTML C ấu trúc cơ bả n c ủ a trang HTML/XHTML có d ạng nhƣ sau, thƣờ ng g ồ m 3 ph ầ n: : Ph ầ n khai báo chu ẩ n c ủ a html hay xhtml 9 : Ph ần khai báo ban đầ u, khai báo v ề meta, title, CSS, javascript : Ph ầ n ch ứ a n ộ i dung c ủa trang web, nơi hiể n th ị n ộ i dung C ấu trúc cơ bả n Tiêu đề trang web Ph ầ n thân vi ế t ở đây C ấu trúc cơ bả n c ủ a trang web M ỗi trang web đề u có cách th ể hi ệ n c ấ u trúc khác nhau, có trang 1 c ộ t, có trang 2 và cũng có trang chứ a nhi ề u c ột, bên dƣới đây chúng ta tham khả o m ột trang đơn giả n s ử d ụ ng 2 c ột để layout  Ph ần đầ u: header, có th ể ch ứ a logo, câu slogan, các liên k ế t, các banner liên k ết, các button, đoạ n flash, ho ặ c các form ng ắn nhƣ form tìm ki ế m  Ph ầ n liên k ế t toàn c ụ c: global navigati on, dùng để ch ứ a các liên k ế t đế n nh ữ ng trang quan tr ọ ng trong toàn b ộ trang, trong ph ầ n này có th ể ch ứ a thêm các liên k ế t con (Sub Navigation)  Ph ầ n thân c ủ a trang: page body, ph ầ n này ch ứ a ph ầ n n ộ i dung chính (Content) và ph ầ n n ộ i dung ph ụ (Sidebar)  Ph ầ n n ộ i dung chính: content, ph ầ n này ch ứ a n ộ i dung chính c ầ n th ể hi ện cho ngƣờ i dùng xem  Ph ầ n n ộ i dung ph ụ : sidebar, ph ầ n này có th ể ch ứ a liên k ế t ph ụ c ủ a t ừ ng trang (Local Navigation), ho ặ c các banner ch ứ a liên k ế t liên quan, ho ặ c có th ể dùng để ch ứ a các liên k ế t qu ả ng cáo 10  Ph ầ n cu ố i trang web: footer, ph ần này thƣờng chƣa phân liên hệ nhƣ: tên công ty, đị a ch ỉ , s ố điệ n tho ạ i, mail liên h ệ, và đặ c bi ệ t là copyright, ho ặ c có th ể ch ứ a các liên k ế t toàn trang, các banner liên k ế t 1 2 Ngôn ng ữ CSS 1 2 1 Gi ớ i thi ệ u  Định nghĩa CSS là vi ế t t ắ t c ủa Cascading Style Sheets Đây là mộ t ngôn ng ữ style sheet đƣợ c s ử d ụng để mô t ả giao di ện và đị nh d ạ ng c ủ a m ộ t tài li ệ u vi ế t b ằ ng ngôn ng ữ đánh dấ u (Markup) Nó cung c ấ p m ột tính năng bổ sung cho HTML Nó thƣờng đƣợ c s ử d ụ ng v ới HTML để thay đổ i phong cách c ủ a trang web và giao di ện ngƣời dùng Nó cũng có thể đƣợ c s ử d ụ ng v ớ i b ấ t k ỳ lo ạ i tài li ệ u XML nào bao g ồ m c ả XML đơn giả n, SVG và XUL CSS đƣợ c s ử d ụ ng cùng v ớ i HTML và JavaScript trong h ầ u h ế t các trang web để t ạ o giao di ện ngƣờ i dùng cho các ứ ng d ụ ng web và giao di ệ n ngƣờ i dùng cho nhi ề u ứ ng d ụng di độ ng  CSS làm đƣợ c nh ữ ng gì? Có th ể thêm giao di ệ n m ớ i vào các tài li ệu HTML cũ Hoàn toàn có th ể thay đổ i giao di ệ n trang web ch ỉ v ớ i m ột vài thay đổ i trong mã CSS  T ạ i sao s ử d ụ ng CSS Đây là ba lợ i ích chính c ủ a CSS: 1) Gi ả i quy ế t m ộ t v ấn đề l ớ n Trƣớ c khi có CSS, các th ẻ nhƣ phông chữ , màu s ắ c, ki ể u n ề n, các s ắ p x ế p ph ầ n t ử, đƣờ ng vi ền và kích thƣớ c ph ải đƣợ c l ặ p l ạ i trên m ọ i trang web Đây là mộ t quá trình r ấ t dài t ố n th ờ i gian và công s ứ c Ví d ụ : N ế u b ạn đang phát tri ể n m ộ t trang web l ớn nơi phông chữ và thông tin màu đƣợ c thêm vào m ỗ i trang, nó s ẽ tr ở thành m ộ t quá trình dài và t ốn kém CSS đã đƣợ c t ạ o ra để gi ả i quy ế t v ấn đề này Đó là mộ t khuy ế n cáo c ủ a W3C 2) Ti ế t ki ệ m r ấ t nhi ề u th ờ i gian Định nghĩa kiểu CSS đƣợc lƣu trong các tệ p CSS bên ngoài vì v ậ y có th ể thay đổ i toàn b ộ trang web b ằng cách thay đổ i ch ỉ m ộ t t ệ p 3) Cung c ấ p thêm các thu ộ c tính CSS cung c ấ p các thu ộ c tính chi ti ết hơn HTML để định nghĩa giao di ệ n c ủ a trang web 11 Các điể m chính c ủa CSS đƣợc đƣa ra dƣới đây: CSS là vi ế t t ắ t c ủ a Cascading Style Sheet CSS đƣợ c s ử d ụng để thi ế t k ế các th ẻ HTML CSS là m ộ t ngôn ng ữ đƣợ c s ử d ụ ng r ộ ng rãi trên web HTML, CSS và JavaScript đƣợ c s ử d ụng để thi ế t k ế web Nó giúp các nhà thi ế t k ế web áp d ụ ng phong cách trên các th ẻ HTML  Ví d ụ v ề CSS h1 { color:white; background-color:#00eeee; padding:5px; } p{ color:blue; } Write Your First CSS Example

This is Paragraph

12 1 2 2 Cú pháp c ủ a CSS B ộ quy t ắ c CSS ch ứ a selector và kh ố i khai báo nh 1-3: Mô hình cú pháp c ủ a CSS Selector: B ộ ch ọ n cho bi ế t ph ầ n t ử HTML b ạ n mu ố n t ạ o ki ể u cách Nó có th ể là b ấ t k ỳ th ẻ nào nhƣ , , Declaration Block: Kh ố i khai báo có th ể ch ứ a m ộ t ho ặ c nhi ề u khai báo đƣợ c phân cách b ở i d ấ u ch ấ m ph ẩy (;) Đố i v ớ i ví d ụ trên, có hai khai báo: 1 color: yellow; 2 font-size: 11 px; M ỗ i khai báo ch ứ a m ộ t tên thu ộ c tính và giá tr ị, đƣợ c phân cách b ở i d ấ u hai ch ấ m Property: M ộ t property là m ộ t ki ể u c ủ a thu ộ c tính c ủ a ph ầ n t ử HTML Nó có th ể là color, border, Value: Các giá tr ị đƣợ c gán cho thu ộ c tính CSS Trong ví d ụ trên, giá tr ị “yellow” đƣợ c gán cho thu ộ c tính color Selector{Propertyl: valuel; Property2: value2; ;} 1 2 3 Gi ớ i thi ệ u BOOTSTRAP - Bootstrap là một bộ sƣu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web - Bootstrap chứa HTML và CSS dựa trên các mẫu thiết kế cho các văn bản, các hình thức, các nút, chuyển hƣớng và các thành phần khác - Bootstrap cũng có phần mở rộng JavaScript tùy chọn - Bootstrap là mã nguồn mở và có s n trên GitHub - Phiên bản mới nhất của Boostr ap tính đến thời điểm tôi viết tài liệu này: Bootstrap 3 2 0 13 1 2 4 Gi ớ i thi ệ u JAVASCRIPT - JavaScript là ngôn ngữ kịch bản dùng để tạo các kịch bản phía client (client - side) và phía server (server - side) - JavaScript làm cho việc tạo các trang Web động và tƣơng tác trên Internet dễ dàng hơn - JavaScript là một ngôn ngữ kịch bản đƣợc hãng Sun Microsystems và Netscape phát triển - JavaScript đƣợc phát triển từ Livescript Của Netscape 1 2 5 Gi ớ i thi ệ u PHP PHP (viết tắt hồi quy “PHP: Hypertext Preprocessor”) 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 đí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 w eb, 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ột ngôn ngữ lập trình web phổ biến nhất thế giới Nhƣ đã giới thiệu, PHP là ngôn ngữ má y chủ, mã lệnh PHP sẽ tập trung trên máy chủ để phục vụ các trang Web theo yêu cầu của ngƣời dùng thông qua trình duyệt Khi ngƣời dùng truy cập website viết bằng PHP, máy chủ đọc mã lệnh PHP và xử lý chúng theo các hƣớng dẫn đã đƣợc mã hóa Khác với Webs ite HTML tĩnh ở chỗ: khi có một yêu cầu, máy chủ chỉ đơn thuần gửi dữ liệu HTML đến trình duyệt Web và không xảy ra một sự biến dịch nào từ phía máy chủ Đối với ngƣời dùng cuối và trên trình duyệt web, các trang home html và home php trong tƣơng tự nhƣ nhau, nhƣng thực chất nội dung của trang đƣợc tạo theo các cách khác nhau - Ƣu điểm khi dùng PHP + Dùng mã nguồn mở (có thể chạy trên Apache hoặc IIS) + Phổ biến hơn ASP (có thể thấy dựa vào số website dùng PHP) + Dễ học khi đã biết HTML, C + Dựa v ào XAMPP (dễ cấu hình) + Nhiều hệ thống CMS miễn phí dùng + Đi cặp với MYSQL + Hoạt động trên Linux, có thể trên IIS – Windows - Nhƣợc điểm : + Mã nguồn không đẹp + Chỉ chạy trên ứng dụng web 14 1 3 Công c ụ s ử d ụ ng 1 3 1 Visual Studio Code Visual Studio Code là m ộ t trong nh ữ ng trình so ạ n th ả o mã ngu ồ n r ấ t ph ổ bi ế n đƣ ợ c các l ậ p trình viên s ử d ụ ng V ớ i các ƣu đi ể m n ổ i b ậ t là s ự nhanh chóng, nh ẹ , h ỗ tr ợ đa n ề n t ả ng cùng nhi ề u tính năng và là mã ngu ồ n m ở chính Visual Studio Code ngày càng đƣ ợ c ƣa chu ộ ng s ử d ụ ng, là l ự a ch ọ n hàng đ ầ u c ủ a các l ậ p trình viên Bài vi ế t sau đây s ẽ cung c ấ p các thông tin đ ể giúp b ạ n hi ể u rõ hơn Visual Studio Code là gì cũng nhƣ các tính năng n ổ i b ậ t c ủ a Visual Studio Code Visual Studio Code chính là ứ ng d ụ ng cho phé p biên t ậ p, so ạ n th ả o các đo ạ n code đ ể h ỗ tr ợ trong quá trình th ự c hi ệ n xây d ự ng, thi ế t k ế website m ộ t cách nhanh chóng Visual Studio Code hay còn đƣ ợ c vi ế t t ắ t là VS Code Trình so ạ n th ả o này v ậ n hành mƣ ợ t mà trên các n ề n t ả ng nhƣ Windows, macOS, Linux Hơn th ế n ữ a, VS Code còn cho kh ả năng tƣơng thích v ớ i nh ữ ng thi ế t b ị máy tính có c ấ u hình t ầ m trung v ẫ n có th ể s ử d ụ ng d ễ dàng 1 4 T ổ ng quan MySQL 1 4 1 Gi ớ i thi ệ u v ề MySQL MySQL là hệ quản t rị cơ sở dữ liệu mã nguồn mở miễn phí nằm trong nhóm LAMP (Apache-MySQL-PHP) Microsoft (Windows, IIS, SQL Server, ASP/ASP NET), vì MySQL đƣợc tích hợp sử dụng chung với apache, PHP nên nó phổ biến nhất thế giới Vì MySQL ổn định và dễ sử dụng rất mạnh và 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 chính vì thế nên MySQL đƣợc sử dụng và hỗ trợ của 15 những lập trình viên yêu thích mã ng uồn mở Nhƣng Mysql không bao quát toàn bộ những câu truy vấn cao cấp nhƣ SQL Server Vì vậy Mysql chỉ đáp ứng việc truy xuất đơn giản trong quá trình vận hành của website, thích hợp cho các ứng dụng có truy cập CSDL trên internet và có thể giải quyết hầu hết các bài toán trong PHP, Perl MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng ngôn ngữ truy vấn có cấu t rúc (SQL) Đặc điể m MySQL là một phần mềm quản trị CSDL dạng server - based (gần tƣơng đƣơng với SQL Server của Microsoft) MySQL quản lý dữ liệu thông qua các CSDL, mỗi CSDL có thể có nhiều bảng quan hệ chứa dữ liệu MySQL có cơ chế phân quyền ngƣời sử dụng riêng, mỗi ngƣời dùng có thể đƣợc quản lý một hoặc nhiều CSDL khác nhau, mỗi ngƣời dùng có một tên truy cập (User Name) và mật khẩu tƣơng ứng để truy xuất đến CSDL MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet MySQL server hoạt động trong các hệ thống nhúng hoặc client/server T ổ ng quan v ề Xampp Xampp là một công cụ tích hợp đầy đủ các thành bao gồm Apache, Mysql, PHP, Perl Giúp chúng ta tạo ra môi trƣờng web server trên máy tính của mình, để có thể chạy đƣợc kịch bản PHP 1 Apache: Là một chƣơng trình máy chủ, dùng để giao tiếp với các giao thức HTTP Apache chạy tốt trên mọi hệ điều hành 2 Mysql: Là hệ quản trị cơ sở dữ liệu, đƣợc dùng để lƣu trữ thông tin của một website Mỗi website có thể sử dụng một hoặc nhiều cơ sở dữ liệu 3 PHP: Là ngôn ngữ kịch bản trên phía Server, dùng để xử lý các thao tác của ngƣời dùng Và làm việc trực tiếp với cơ sở dữ liệu (Database) 4 Perl: Là một tầng cao hơn, một ngôn ngữ lập trình năng động hơn Sử dụng rộng rãi trong lập trình mạng và quản trị hệ thống Ít phổ biến cho mục đích phát triển web, Perl thích hợp với rất nhiều ứng dụng Để có thể chạy đƣợc xampp trên máy, các bạn download về theo link này Xampp có hỗ trợ hầu hết các hệ điều hành nhƣ window, linux, mac Sau khi đã download đƣợc Xampp về máy, chúng ta tiến hành cài đặt nhƣ sau 16 Màn hình mới vào cài đặt Nhấn Next để tiếp tục việc cài đặt - Nhấn Next để tiếp tục cài đặt 17 - Ở đây, nên chọn ổ đĩa mà không phải ổ C Để tránh việc cài win hoặc ghost máy bị mất dữ liệu Nhấn Next để tiếp tục - Nhấn Next để tiếp tục Quá trình cài đặt diễn ra nhƣ hình bên dƣới 18 - Tiếp theo ta đƣợc màn hình nhƣ bên dƣới - Nhấn Finish để hoàn thành việc cài đặt 19 CHƢƠNG 2: PHÂN TÍCH VÀ THI Ế T K Ế WEBSITE 2 1 Mô t ả t ổ ng quan 2 1 1 Kh ả o sát C ử a hàng kinh doanh v ề phân ph ố i thi ế t b ị máy tính, bên c ạ nh vi ệ c bán các s ả n ph ẩ m ra th ị trƣờ ng, c ửa hàng cũng cầ n ph ải lƣu tâm đế n các v ấn đề khác nhƣ kiể m tra s ố lƣợ ng hàng t ồ n, phân lo ạ i s ả n ph ẩm, lƣu các hóa đơn Đố i v ớ i m ỗ i danh m ụ c s ả n ph ẩ m thì bao g ồ m nhi ề u s ả n ph ẩ m khác nhau và m ỗ i m ộ t s ả n ph ẩ m ch ỉ thu ộ c danh m ụ c s ả n ph ẩ m duy nh ất Đơn đặ t hàng có th ể có nhi ề u s ả n ph ẩ m và s ả n ph ẩ m có th ể có trong nhi ều đơn đặ t hàng Khách hàng đế n mua t ạ i c ử a hàng có th ể ch ọ n l ự a nhi ề u m ặ t hàng, nhân viên tƣ vấ n khi khách hàng có nhu c ầ u tìm ki ế m theo yêu c ầu nào đó(nhƣ màu s ắ c, kích thƣớ c ) hay m ộ t s ả n ph ẩ m c ụ th ể nào đó D ựa vào đó, mỗ i l ần khách hàng thanh toán hóa đơn mua hàng, căn cứ vào các lo ạ i m ặ t hàng hi ện đang kinh doanh tạ i c ử a hàng, ch ủ c ử a hàng ti ế n hành ki ể m tra s ố lƣợ ng hàng t ồn, thanh toán hóa đơn và cần lƣu lạ i nh ữ ng đơn mua hàng bao gồ m: S ố hóa đơn, ngày nhậ p, tên khách hàng, t ổ ng ti ề n hóa đơn Nhữ ng thông tin chi ti ết hóa đơn nhƣ: Số hóa đơn, số s ả n ph ẩ m, s ố lƣợ ng và ti ề n ph ả i tr ả để lƣu trữ l ạ i khi c ầ n Sau đó, cử a hàng ph ả i liên t ụ c c ậ p nh ậ t l ạ i thông tin cho s ả n ph ẩm để ki ể m soát s ố lƣợ ng s ả n ph ẩ m còn l ạ i ho ặ c s ả n ph ẩ m m ớ i nh ậ p thêm Ch ủ c ử a hàng s ẽ d ự a vào s ố s ả n ph ẩ m, tên s ả n ph ẩm để tìm ki ế m thông tin s ả n ph ẩ m lúc c ậ p nh ậ t s ả n ph ẩ m, n ế u là s ả n ph ẩ m m ớ i thì s ẽ t ạ o m ớ i lo ạ i s ả n ph ẩ m này Các danh m ụ c s ả n ph ẩ m g ồ m có: S ố danh m ụ c s ả n ph ẩ m, tên danh m ụ c s ả n ph ẩ m, mô t ả Ngoài ra, cung c ấ p email, s ố điệ n tho ại để khách hàng có th ể liên h ệ khi c ầ n thi ế t C ửa hàng cũng lƣu lạ i nh ững thông tin đó, để ki ể m kê kho, ti ế n hành đổ i -tr ả v ớ i nhà cung c ấ p hay thông báo v ớ i nhà cung c ấ p v ề v ấn đề s ả n ph ẩ m, tính doanh thu c ủ a c ử a hàng, 2 1 2 Các ch ức năng củ a h ệ th ố ng Dƣới đây tôi liệt kê các tính năng củ a một website bán thực phẩm organic cung cấp Tuy nhiên vẫn có rất nhiều tính năng bạn cần đã có nhƣng chƣa đƣợc liệt kê Tôi rất vui lòng đƣợc tƣ vấn, hỗ trợ, cung cấp thêm đầy đủ các thông tin để đƣa Thiết kế web phát triển thƣơng hiệu ứng dụng website kinh doanh thực phẩm organic cần đáp ứng các chức năng sau: 20 Đăng nhậ p : Qu ả n lý và khách hàng có th ể đăng nhậ p vào h ệ th ố ng b ằ ng email và m ậ t kh ẩ u Đăng xuấ t : Khách hàng có th ể đăng xuấ t tài kho ả n c ủ a mình ra kh ỏ i h ệ th ố ng Đăng ký : Qu ản lý và khách hàng đăng ký tài khoản để s ử d ụ ng các ch ức năng củ a h ệ th ố ng Qu ả n lý khách hàng : - Qu ả n lý thông tin khách hàng - Tìm ki ế m theo tên, email, điệ n tho ạ i, - Thêm m ớ i khách hàng Chuy ể n khách hàng gi ữ a các nhóm - C ậ p nh ậ t thông tin khách hàng d ễ dàng Thanh toán & V ậ n chuy ể n: Qu ả n lý s ả n ph ẩ m: - T ạ o m ớ i s ả n ph ẩ m Chính - s ử a thông tin s ả n ph ẩ m - Xóa s ả n ph ẩ m Qu ản lý đơn hàng: Khách hàng có th ể tính toán m ộ t cách t ự động và lƣu lạ i l ị ch s ử , thông tin giao d ị ch c ủ a khách hàng Qu ả n lý gi ỏ hàng: - Đặ t hàng - Thêm vào gi ỏ hàng b ằ ng m ộ t click Click tên s ả n ph ẩm để xem chi ti ế t c ủ a s ả n ph ẩ m C ậ p nh ậ t thông tin gi ỏ hàng Xóa s ả n ph ẩ m kh ỏ i gi ỏ hàng G ửi đơn hàng để đặ t hàng - T ổ ng quan hàng Tìm ki ế m s ả n ph ẩ m: Khách hàng có th ể tìm ki ế m hàng theo tên và danh m ụ c 21 2 1 3 Các yêu c ầ u phi ch ức năng  Yêu cầu hiệu năng - Yêu cầu về độ thực thi: Tốc độ xử lý và tính toán nhanh (Các thuật toán sắp xếp, tìm kiếm đƣợc thiết kế tối ƣu) - Yêu cầu về giao diện: Giao diện phải thân thiện với ngƣời dùng; dễ dàng thao tác  Yêu cầu độ tin cậy - Đáp ứng đƣợc nhu cầu của khách hàng Đảm bảo đáp ứng đƣợc các yêu cầu của ngƣời sử dụng Ổn định, thời gian làm việc không gặp lỗi quá lớn Cho kết quả chính xác - Đảm bảo website có ít khiếm khuyết về lập trình Kiể m soát đƣợc các ngoại lệ Lỗi logic tối thiểu 2 1 4 Nhóm ngƣờ i s ử d ụ ng Các ch ức năng và phân quyền cho 2 nhóm đối tƣợ ng: Admin và khách hàng Admin: Là t ừ vi ế t t ắ t c ủa “ Administrator d ịch ra là ngƣờ i qu ả n tr ị , ngƣờ i qu ả n tr ị hay là qu ả n tr ị hay là qu ả n tr ị viên Đây là quyề n cao nh ất đố i v ớ i qu ả n lý viên V ới các website thì admin là ngƣời điề u hành Admin ch ủ y ế u là online là chính v ớ i nhi ề u ki ểu khác nhau nhƣ Admin webs it, di ễ n đàn, fanpage, blog, Admin facebook, Admin máy tính Ho ặ c trong kinh doanh có Sale Admin t ứ c là tr ợ lý kinh doanh, Khách hàng Khách hàng (customer là gì) là nh ữ ng cá nhân hay t ổ ch ứ c mà doanh nghi ệp đang nổ l ực Marketing hƣớ ng t ớ i H ọ là ngƣờ i ra quy ết đị nh mua s ắm Khách hàng là đối tƣợ ng th ửa hƣở ng nh ững đặ c tính ch ất lƣợ ng c ủ a s ả n ph ẩ m 2 2 Tìm Xác đ ị nh (Use Case) c ủ a các tác nhân  Tác nhân ngƣời quản trị - T ất cả các thông tin sản phẩm, thông tin khách hàng, thông tin nhập hàng và thống kê cá c hóa đơn - Thêm, s ử a, xóa thông tin tài kho ả n nhân viên - Xem, s ử a thông tin cá nhân 22  Tác nhân khách hàng - Đăng nhập, đăng xuấ t - Tìm ki ế m, xem s ả n ph ẩ m - Xem, s ử a thông tin cá nhân - Thêm s ả n ph ẩ m, vào gi ỏ hàng - Xem, s ử a, xóa thông tin gi ỏ hàng - Đặ t hàng  Tác nhân nhân viên - Nh ậ p s ả n ph ẩ m - Ki ểm tra đơn hàng - Xóa đơn hàng - Xem, s ử a thông tin cá nhân 2 3 Bi ểu đồ User Case cho h ệ th ố ng - Use Case t ổ ng quát nh 2-1 : Bi ểu đồ Use Case t ổ ng quát c ủ a h ệ th ố ng 23 2 3 1 Qu ả n lí lo ạ i s ả n ph ẩ m nh 2-2 : Bi ểu đồ Use Case q ả n lí lo ạ i hàng  Mục đích : Nhân viên có thể thêm, sửa , xóa thông tin các sản phẩm  Tác nhân : Nhân viên kho  Dòng sự kiện Sau khi đăng nhập vào hệ thố ng Thêm lo ạ i s ả n ph ẩ m + Nhân viên chọn chức năng thêm loại hàng + Hệ thống tự động sinh mã loại mới + Nhân viên điền thông tin về loại hàng + Nhân viên nhấn xác nhận, hệ thống sẽ lƣu thông tin vào csdl S ử a lo ạ i s ả n ph ẩ m + Nhân viên nhấn vào tìm kiếm, tìm kiếm loại hàng muốn sửa thông tin theo tên loại + Chọn chức năng sửa thông tin + Hệ thống hiển thị thông tin của loại sản phẩm lên các ô textbox + Nhân viên thực hiện sửa các thông tin cần thiết + Nếu nhấn xác nhận thì hệ thống sẽ thay đổi thông tin cũ bằng các thông tin mới khách hàng vừa sửa + Nếu hủy thì hệ thống sẽ hủy thao tác Những thông tin sẽ vẫn đƣợc giữ nguyên 24 Xóa lo ạ i s ả n ph ẩ m + Nhân viên gõ ô tìm kiếm, nhập loại sản phẩm muốn xóa + Sau khi tìm thấy sản phẩm muốn xóa chọn chức năng xóa để xóa sản phẩm Tìm ki ế m + Nhân viên ch ọ n ch ứ c năng tìm ki ế m + Nhân viên nh ậ p t ừ khóa vào ô tìm ki ế m + Hệ thống sẽ hiển thị những sản phẩm gần với từ khóa tìm kiếm nhất 2 3 2 Qu ả n lí s ả n ph ẩ m nh 2-3 : Bi ể u đồ Use Case qu ả n lí s ả n ph ẩ m  Mục đích : Nhân viên có thể thêm, sửa , xóa thông tin các sản phẩm  Tác nhân : Nhân viên kho  Dòng sự kiện Sau khi đăng nhập vào hệ thống 25 Thêm s ả n ph ẩ m + Nhân viên chọn chức năng thêm sản phẩm + Hệ thống tự động sinh mã sản phẩm m ới theo quy định + Nhân viên đi ề n thông tin v ề s ả n ph ẩ m m ớ i + Nhân viên nhấn xác nhận, hệ thống sẽ lƣu thông tin vào csdl S ử a s ả n ph ẩ m + Nhân viên nhấn vào tìm kiếm, tìm kiếm sản phẩm muốn sửa thông tin + Ch ọ n ch ứ c năng s ử a thông tin + Hệ thống hiển t hị thông tin của loại sản phẩm lên các ô textbox + Nhân viên thực hiện sửa các thông tin cần thiết + Nếu nhấn xác nhận thì hệ thống sẽ thay đổi thông tin cũ bằng các thông tin mới khách hàng vừa sửa + Nếu hủy thì hệ thống sẽ hủy thao tác Những thông tin sẽ vẫn đƣợc giữ nguyên Xóa s ả n ph ẩ m + Nhân viên gõ ô tìm kiếm, nhập sản phẩm muốn xóa + Sau khi tìm thấy sản phẩm muốn xóa chọn chức năng xóa để xóa sản phẩm Tìm ki ế m + Nhân viên chọn chức năng tìm kiếm + Nhân viên nhập từ khóa vào ô tìm kiếm + Hệ thốn g sẽ hiển thị những sản phẩm gần với từ khóa tìm kiếm nhất 26 2 3 3 Qu ả n lí nhà cung c ấ p nh 2-4 : Bi ểu đồ Use Case qu ả n lí nhà cung c ấ p  Mục đích : Nhân viên có thể thêm thông tin của nhà cung cấp  Tác nhân : Nhân viên kho  Dòng sự kiện Sau khi đăng nhập vào hệ thống Thêm nhà cung c ấ p + Nhân viên chọn chức năng thêm nhà cung cấp + Hệ thống tự độn g sinh mã nhà cung cấp theo yêu cầu + Nhân viên đi ề n thông tin v ề nhà cung c ấ p + Nhân viên nhấn xác nhận, hệ thống sẽ lƣu th ông tin vào csdl S ử a thông tin nhà cung c ấ p + Nhân viên nhấn vào tìm kiếm, tìm kiếm nhà cung cấp muốn sửa thông tin + Chọn chức năng sửa thông tin + Hệ thống hiển thị thông tin của nhà cung cấp lên các ô t extbox + Nhân viên thực hiện sửa các thông t in cần thiết + Nếu nhấn xác nhận thì hệ thống sẽ thay đổi thông tin cũ bằng các thông tin mới khách hàng vừa sửa + Nếu hủy thì hệ thống sẽ hủy thao tác Những thông tin sẽ vẫn đƣợc giữ nguyên Tìm ki ế m + Nhân viên chọn chức năng tìm kiếm + Nhân viên nhậ p từ khóa vào ô tìm kiếm + Hệ thống sẽ hiển thị thông tin của những NCC gần với từ khóa tìm kiếm nhất 27 2 3 4 Qu ả n lí khách hàng nh 2-5 :Bi ểu đồ Use Case qu ả n lí khách hàng  Mục đích : Nhân viên có thể quản lí thông tin của khách hàng  Tác nhân : Nhân viên  Dòng sự kiện Sau khi đăng nhập vào hệ thống Thêm khách hàng + Nhân viên ch ọ n ch ứ c năng thêm khách hàng + H ệ th ố ng t ự đ ộ ng sinh mã khách hàng theo yêu c ầ u + Nhân viên đi ề n thông tin khách hàng + Nhân viên nh ấ n xác nh ậ n, h ệ th ố ng s ẽ lƣu thông tin vào csdl S ử a khách hàng + Nhân viên nh ấ n vào tìm ki ế m, tìm ki ế m khách hàng mu ố n s ử a thông tin + Ch ọ n ch ứ c năng s ử a thông tin + Nhân viên th ự c hi ệ n s ử a các thông tin c ầ n thi ế t + N ế u nh ấ n xác nh ậ n thì h ệ th ố ng s ẽ thay đ ổ i thông tin cũ b ằ ng các thông tin m ớ i khách hàng v ừ a s ử a + N ế u h ủ y thì h ệ th ố ng s ẽ h ủ y thao tác Nh ữ ng thông tin s ẽ v ẫ n đƣ ợ c gi ữ nguyên Tìm ki ế m + Nhân viên ch ọ n ch ứ c năng tìm ki ế m + Nhân viên nh ậ p t ừ khóa vào ô tìm ki ế m + H ệ th ố ng s ẽ hi ể n th ị thông tin c ủ a nh ữ ng khách hàng g ầ n v ớ i t ừ khóa tìm ki ế m nh ấ t 28 2 3 5 Qu ả n lí tài kho ả n nh 2-6 : Bi ểu đồ Use Case qu ả n lí User  Mục đích : Nhân viên quản lí những tài khoản đƣợc đăng kí trên website  Tác nhân : Nhân viên ,khách hàng  Dòng sự kiện Sau khi đăng nhập vào hệ thống Thêm tài kho ả n + Khách hàng ch ọ n ch ứ c năng đăng kí + Khách hàng đi ề n thông tin c ủ a mình vào form có s n + Khách hàng nh ấ n xác nh ậ n + H ệ th ố ng t ự đ ộ ng sinh mã khách hàng theo yêu c ầ u và h ệ th ố ng s ẽ lƣu thô ng tin vào csdl Hi ể n th ị danh sách tài kho ả n + Nhân viên nh ấ n vào qu ả n lí danh sách tài kho ả n + H ệ th ố ng hi ể n th ị danh sách các tài kho ả n có trên h ệ th ố ng Ph ầ n Password b ị ẩ n đi 29 2 3 6 Qu ả n lí nhân viên nh 2-7 :Bi ểu đồ Use Case qu ả n lí nhân viên  Mục đích : Hệ thống cung cấp chức năng này để giúp chủ cửa hàng có thể dễ dàng quản lí thông tin của các nhân viên  Tác nhân : Ngƣời quản lí( Chủ cửa hàng)  Dòng sự kiện Sau khi đăng nhập vào hệ thống Thêm thông tin nhân viên + Ngƣời quản lí chọn chức năng thêm nhân viên + Ngƣời quản lí điền thông tin của nhân viên + Nhân viên nhấn xác nhận, hệ thống tự động sinh mã khách hàng theo yêu cầu và hệ thống sẽ lƣu thông tin vào csdl S ử a thông tin nhân viên + Ngƣời quản lí n hấn vào tìm kiếm, tìm kiếm nhân viên muốn sửa thông tin + Ch ọ n ch ứ c năng s ử a thông tin + Hệ thống hiển thị thông tin của nhân viên lên các ô textbox + Ngƣời quản lí thực hiện sửa các thông tin cần thiết + Nếu nhấn xác nhận thì hệ thống sẽ thay đổi thông tin cũ bằng các thông tin mới nhân viên vừa sửa + Nếu hủy thì hệ thống sẽ hủy thao tác Những thông tin sẽ vẫn đƣợc giữ nguyên 30 2 3 7 Qu ả n lí nh ậ p hàng nh 2-8 :Bi ểu đồ Use Case qu ả n lí nh ậ p hàng  Mục đích : Nhân viên có thể thêm thông tin nhập hàng  Tác nhân : Nhân viên kho  Dòng sự kiện Sau khi đăng nhập vào hệ thống Thêm hóa đơn + Nhân viên ch ọ n ch ứ c năng thêm hóa đơn nh ậ p + Hệ thống tự động sinh mã hóa đơn theo yêu cầu + Nhân viên đi ề n thông tin v ề hóa đơn + N hân viên nhấn xác nhận, hệ thống sẽ lƣu thông tin vào csdl S ử a hóa đơn + Nhân viên nhấn vào tìm kiếm, tìm kiếm hóa đơn muốn sửa thông tin + Ch ọ n ch ứ c năng s ử a thông tin + Hệ thống hiển thị thông tin của hóa đơn lên các ô textbox + Nhân viên th ự c hi ệ n s ử a các thông tin c ầ n thi ế t + Nếu nhấn xác nhận thì hệ thống sẽ thay đổi thông tin cũ bằng các thông tin mới khách hàng vừa sửa + Nếu hủy thì hệ thống sẽ hủy thao tác Những thông tin sẽ vẫn đƣợc giữ nguyên 31 2 3 8 Qu ả n lí bán hàng nh 2-9 : Bi ểu đồ Use Case qu ả n lí bán hàng  Mục đích : Nhân viên có thể thêm thông tin bán hàng  Tác nhân : Nhân viên bán hàng  Dòng sự kiện Sau khi đăng nhập vào hệ thống Thêm hóa đơn + Nhân viên ch ọ n ch ứ c năng thêm hóa đơn bán + H ệ th ố n g t ự đ ộ ng sinh mã hóa đơn theo yêu c ầ u + Nhân viên đi ề n thông tin v ề hóa đơn + Nhân viên nh ấ n xác nh ậ n, h ệ th ố ng s ẽ lƣu thông tin vào csdl S ử a hóa đơn + Nhân viên nh ấ n vào tìm ki ế m, tìm ki ế m hóa đơn mu ố n s ử a thông tin + Ch ọ n ch ứ c năng s ử a thông tin + H ệ th ố ng hi ể n th ị thông tin c ủ a hóa đơn lên các ô textbox + Nhân viên th ự c hi ệ n s ử a các thông tin c ầ n thi ế t + N ế u nh ấ n xác nh ậ n thì h ệ th ố ng s ẽ thay đ ổ i thông tin cũ b ằ ng các thông tin m ớ i khách hàng v ừ a s ử a + N ế u h ủ y thì h ệ th ố ng s ẽ h ủ y thao tác Nh ữ ng thông tin s ẽ v ẫ n đƣ ợ c gi ữ nguyên 32 2 3 9 Qu ả n lí tin t ứ c nh 2-10 : Bi ểu đồ Use Case qu ả n lí tin t ứ c  Mục đích : Nhân viên có thể quản lí những tin tức trên website  Tác nhân : Nhân viên  Dòng sự kiện Sau khi đăng n hập vào hệ thống Thêm tin t ứ c + Nhân viên ch ọ n ch ứ c năng thêm tin t ứ c + Hệ thống tự động sinh mã hóa đơn theo yêu cầu + Nhân viên đi ề n thông tin v ề tin t ứ c + Nhân viên nhấn xác nhận, hệ thống sẽ lƣu thông tin vào csdl S ử a tin t ứ c + Nhân viên nhấn vào tìm kiếm, tìm kiếm tin tức muốn sửa thông tin + Ch ọ n ch ứ c năng s ử a thông tin + Hệ thống hiển thị thông tin của hóa đơn lên các ô textbox + Nhân viên th ự c hi ệ n s ử a các thông tin c ầ n thi ế t + Nếu nhấn xác nhận thì hệ thống sẽ thay đổi thông tin cũ bằng cá c thông tin mới khách hàng vừa sửa + Nếu hủy thì hệ thống sẽ hủy thao tác Những thông tin sẽ vẫn đƣợc giữ nguyên Đăng tin + Nhân viên ch ọ n ch ứ c năng đăng tin t ứ c + H ệ th ố ng hi ể n th ị danh sách các tin t ứ c + Nhân viên ch ọ n các tin mu ố n đăng + Nhấn xác nh ận để các tin sẽ xuất hiện trên website 33 2 3 10 Th ố ng kê nh 2-11 : Bi ểu đồ Use Case th ố ng kê  Mục đích : Nhân viên sử dụng chức năng này để thực hiện thống kê vào cuối tháng  Tác nhân : Nhân viên  Dòng sự kiện Sau kh i đăng nhập vào hệ thống Th ố ng kê + Nhân viên chọn chức năng thống kê + Hệ thống đƣa ra kết quả thống kê 34 2 4 Bi ểu đồ tu ầ n t ự 2 4 1 Biểu đồ tuần tự đăng ký nh 2-12: Bi ểu đồ tu ầ n t ự đăng ký 2 4 2 Biểu đồ tuần tự đăng nhập nh 2-13 : Bi ểu đồ tu ầ n t ự đăng nhậ p : Khach hang : Khach hang form dang ki form dang ki he thong he thong 1 yeu cau dang ki 2 hien thi form dang ki 3 nhap username + pass 4 he thong kiem tra thong 4 1 không hop le -> b3 hop le 5 dang ki thanh cong 6 bat dau su dung he thong : Nguoi quan tri - khach hang : Nguoi quan tri - khach hang form dang nhap form dang nhap he thong he thong 1 yeu câu dang nhap 2 Hien thi cua so dang nhap 3 nhap ten username + mat khau 4 he thong kiem tra 4 1 sai -> b3 - dung - 5 dang nhap thanh cong 6 vao he thong 35 2 4 3 Biểu đồ tuần tự sản phẩm nh 2-14 :Bi ểu đồ tu ầ n t ự s ả n ph ẩ m 2 4 4 Biểu đồ tuần tự t m kiếm nh 2-15 : Bi ểu đồ tu ầ n t ự tìm ki ế m : nguoi quan tri : nguoi quan tri giao dien giao dien he thong he thong co so du lieu co so du lieu 1 yeu cau them san pham 2 goi form them 3 hien thi them 4 nhap thong tin muon them san pham 5 goi xu ly them 6 kiem tra 7 luu vao csdl 8 thong bao 9 1 thanh cong 9 2 hien thi thong bao 10 1 loi nhap thong tin 10 2 thong bao nhap lai : Khach hang : Khach hang khung tim kiem khung tim kiem he thong he thong co so du lieu co so du lieu 1 yeu cau tìm kiêm 2 nhâp tên san pham can tim 3 goi xu ly 4 lây thông tin tu co so du lieu 5 kiêm tra 6 kêt qua 7 thông bao ket qua 8 hiên thi ket qua tim kiêm 36 2 5 Thi ế t k ế cơ sở d ữ li ệ u c ủ a h ệ th ố ng nh 2-16 : Mô h nh lưu trữ c ấ u trúc website trên Database  Trong đó các bảng dữ liệu đƣợc mô tả nhƣ sau:  B ả ng User Tên trƣờng Kiểu dữ liệu Kích thƣớc Ghi chú id int 11 Unique, Auto_increment name varchar 40 Tên tài khoản password varchar 100 Mật khẩu full_name varchar 30 Họ và tên create_at int 11 Ngày tạo 37  B ả ng khách hàng Tên trƣờng Kiểu dữ liệu Kích th ƣớc Ghi chú id int 10 Unique, Auto_increment nam varchar 30 Tên tài kho ả n Password varchar 100 M ậ t kh ẩ u email varchar 50 Email Fullname varchar 100 H ọ và tên Phone int 11 S ố đi ệ n tho ạ i Create_at Int 11 Ngày tạo  Bảng loại sản phẩm : Tên trƣờng Kiểu d ữ liệu Kích thƣớc Ghi chú id int 10 Unique,Auto_increment Nam Varchar 100 Tên loại sản phầm Type Int 11 Thu ộ c danh m ụ c Position Tinyin 4 V ị trí hi ể n th ị 38  Bảng sản phẩm: Tên trƣờng Kiểu dữ liệu Kích thƣớc Ghi chú id int 11 Unique,Auto_increment name Varchar 255 Tên sản phẩm Priec int 11 Ả nh s ả n ph ẩ m weigth Varchar 50 Giá expre Varchar 50 Danh m ụ c Maden Varchar 50 Kh ố i lƣ ợ ng Content text Discount Int Xu ấ t x ứ View Varchar 2455 N ộ i dung SP create_at int 11 Ngày tạo  B ả ng nhân viên Tên trƣờng Kiểu dữ liệu Kích thƣớc Ghi chú id int 11 Unique,Auto_increment name varchar 40 Tên tài khoản password varchar 100 Mật khẩu full_name varchar 30 Họ và tên create_at int 11 Ngày tạo 39  B ảng hóa đơn Tên trƣờng Kiểu dữ liệu Kích thƣớc Ghi chú id int 10 Unique,Auto_increment Nam varchar 225 Tên khách hàng Email varchar 50 Email khách hàng Phone Int 11 S ố đi ệ n tho ạ i Amount Int 11 T ổ ng giá payment varchar 255 Thanh toán Message varchar 225 Ghi chú  Bảng bài viết Tên trƣờng Kiể u dữ liệu Kích thƣớc Ghi chú id int 10 Unique,Auto_increment Avater varchar 100 Ả nh bài vi ế t Nam varchar 255 Tên bài vi ế t Cat_id Text Danh m ụ c Summary Text Tóm t ắ t Content varchar 255 N ộ i d ụ ng View Int Int Đã xem Create_at int 20 Ngày t ạ o 40 CHƢƠNG 3: GIAO DI Ệ N C Ủ A H Ệ TH Ố NG 3 1 Cài đặt cơ sở d ữ li ệ u nh 3-1 : B ả ng User nh 3-2 : B ả ng khách hàng nh 3-3 : B ả n g L ạ oi s ả n ph ẩ m nh 3-4 : B ả ng hóa đon 41 nh 3-5 : B ả ng s ả n ph ẩ m nh 3-6 : B ả ng chí ti ế t hóa đon nh 3-7 : B ả ng bài vi ế t 42 3 2 Giao di ệ n c ủ a h ệ th ố ng 3 2 1 Giao di ệ n trang ch ủ nh 3-8 Giao di ệ n trang ch ủ 43 3 2 2 Giao di ệ n trang gi ỏ hàng nh 3-9 Giao di ệ n trang gi ỏ hàng 3 2 3 Giao di ện trang đăng kí nh 3-10 Giao di ện trang đăng ký 44 3 2 4 Giao di ện trang đăng nhậ p nh 3-11 Giao di ệ n trang đăng nhậ p 3 2 5 Giao di ệ n trang admin nh 3-12 Giao di ệ n trang admin 45 3 2 6 Giao di ệ n trang admin qu ả n lí s ả n ph ẩ m nh 3-13 Giao di ệ n trang qu ả n lý s ả n ph ẩ m 3 2 7 Giao di ệ n trang admin thêm s ả n ph ẩ m nh 3-14 Giao di ệ n trang thêm s ả n ph ẩ m 46 PH Ầ N 3: K Ế T LU Ậ N 1 K ế t lu ậ n 1 1 K ế t qu ả đạt đƣợ c c ủa đề tài Sau th ờ i gian nghiên c ứ u, m ặc dù đã có nhiề u c ố g ắ ng, tìm hi ể u các ki ế n th ức đã họ c, k ế t h ợ p tra c ứ u tài li ệ u chuyên ngành nhƣng do còn hạ n ch ế v ề th ờ i gian, kh ả năng v ề kinh nghi ệ m nên không tránh kh ỏ i nh ữ ng thi ế u s ốt nên đề tài đã hoàn thành ở m ức đồ sau: - Nghiên c ứ u v ề các công c ụ và ngôn ng ữ l ậ p trình m ớ i nh ấ t hi ệ n nay nhƣ:HTML & CSS, PHP & MySQL - Xây d ự ng m ột website thƣơng bán hàng Online ứ ng d ụ ng các ngôn ng ữ m ới đƣợ c tìm hi ể u trong bài khóa lu ậ n 1 2 H ạ n ch ế c ủa đề tài Hệ thống còn một số hạn chế nhƣ: - Một số chức năng còn chƣa hoàn hảo - CSDL chƣa thực sự tối ƣu - Chƣa tƣơng thích với một số trình duyệt website - Giao di ện chƣa đẹ p l ắ m và c ầ n thêm nhi ề u ch ức năng cho website hơn nữa nhƣ chức năng: giao dị ch online 2 Ki ế n ngh ị Qua quá trình nghiên c ứ u và th ờ i gian th ự c hi ện đề tài, kinh nghi ệ m c ủ a b ả n thân khi ti ế p xúc th ự c t ế không nhi ề u và ki ế n th ứ c còn h ạ n h ẹ p nên trong quá trình phân tích và xây d ự ng website s ẽ không tránh kh ỏ i nh ữ ng sai sót Nên r ấ t mong nh ận đƣợ c s ự góp ý c ủ a quý th ầy cô để em có th ể h ọ c h ỏ i thêm và l ấy đó làm kinh nghiệ m cho b ả n thân 47 PH Ầ N 4 TÀI LI Ệ U THAM KH Ả O 1 ThS Nguy ễ n Th ị Minh Châu, Giáo trình “Phân tích và thi ế t k ế h ệ th ố ng thông tin”, Trƣ ờ ng Đ ạ i h ọ c Qu ả ng Nam 2 ThS Hu ỳ nh T ấ n Kh ả i , Giáo trính “ thi ế t k ế và l ậ p trình Web (PHP)”, Trƣ ờ ng Đ ạ i h ọ c Qu ả ng Nam 3 ThS Nguy ễn Văn Khƣơng, “Bài giảng thƣơng mại điệ n t ử “ năm 2015 4 https://www w3schools com/ 5 www google com

LỜI CẢM ƠN Đồ án phân tích thiết kế “Xây dựng website bán thực phẩm Organic Lào” hội để tơi áp dụng, tổng kết kiến thức mà học, đồng thời rút kinh nghiệm thực tế quý giá suốt q trình thực đồ án Để hồn thành đồ án Tôi xin chân thành cảm ơn thầy cô thuộc khoa công nghệ thông tin trƣờng đại học Quảng Nam tận tình giảng dạy, truyền đạt hƣớng dẫn kiến thức thực tế nhƣ tạo điều kiện thuận lợi để hồn thành Tơi xin gửi lời cảm ơn sâu sắc đến cô Nguyễn Thị Minh Châu hƣớng dẫn, truyền tải kiến thức hữu ích giúp đỡ nhiều mặt lúc làm đồ án Cô đóng góp ý kiến, sửa chữa thiếu sót, khuyết điểm mà mắc phải đề hƣớng giải tốt từ nhận đồ án đến hồn thành Từ đó, đề tài đƣợc hồn thành tốt đẹp Kế tiếp tơi xin gửi lời cảm ơn đến tất bạn lớp giúp đỡ tơi hồn thành đề tài mơn học Mặc dù cố gắng hoàn thành đề tài với tất nỗ lực nhƣng chắn khơng tránh khỏi thiếu sót định, kính mong tận tình bảo thầy Xin kính chúc q thầy nhiều sức khoẻ, hạnh phúc vững bƣớc đƣờng nghiệp trồng ngƣời vinh quang mà xã hội giao phó Quảng Nam,Tháng năm2023 Sinh vien thực Kesone THEPMAHAVONG MỤC LỤC MỤC LỤC DANH MỤC HÌNH VÀ BẢNG BIỂU PHẦN MỞ ĐẦU Lý chọn đề tài Mục tiêu đề tài Đối tƣợng phạm vi nghiên cứu Phƣơng pháp nghiên cứu Lịch sử nghiên cứu 6 Đóng góp đề tài Cấu trúc đề tài PHẦN NỘI DUNG NGHIÊN CỨU CHƢƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Các khái niệm 1.1.1 Giới thiệu ngôn ngữ HTML 1.1.2 Cấu trúc file HTML 1.2 Ngôn ngữ CSS 10 1.2.1 Giới thiệu 10 1.2.2 Cú pháp CSS 12 1.2.3 Giới thiệu BOOTSTRAP 12 1.2.4 Giới thiệu JAVASCRIPT 13 1.2.5 Giới thiệu PHP 13 1.3 Công cụ sử dụng 14 1.3.1 Visual Studio Code 14 1.4 Tổng quan MySQL 14 1.4.1 Giới thiệu MySQL 14 CHƢƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ WEBSITE 19 2.1 Mô tả tổng quan 19 2.1.1 Khảo sát 19 2.1.2 Các chức hệ thống 19 2.1.3 Các yêu cầu phi chức 21 2.1.4 Nhóm ngƣời sử dụng 21 2.2 Tìm Xác định (Use Case) tác nhân 21 2.3 Biểu đồ User Case cho hệ thống 22 2.3.1 Quản lí loại sản phẩm 23 2.3.2 Quản lí sản phẩm 24 2.3.3 Quản lí nhà cung cấp 26 2.3.4 Quản lí khách hàng 27 2.3.5 Quản lí tài khoản 28 2.3.6 Quản lí nhân viên 29 2.3.7 Quản lí nhập hàng 30 2.3.8 Quản lí bán hàng 31 2.3.9 Quản lí tin tức 32 2.3.10 Thống kê 33 2.4 Biểu đồ 34 2.5 Thiết kế sở liệu hệ thống 36 CHƢƠNG 3: GIAO DIỆN CỦA HỆ THỐNG 40 3.1 Cài đặt sở liệu 40 3.2 Giao diện hệ thống 42 3.2.1 Giao diện trang chủ 42 3.2.2 Giao diện trang giỏ hàng 43 3.2.3 Giao diện trang đăng kí 43 3.2.4 Giao diện trang đăng nhập 44 3.2.5 Giao diện trang admin 44 3.2.6 Giao diện trang admin quản lí sản phẩm 45 3.2.7 Giao diện trang admin thêm sản phẩm 45 PHẦN 3: KẾT LUẬN 46 Kết luận 46 1.1 Kết đạt đƣợc đề tài 46 1.2 Hạn chế đề tài 46 Kiến nghị 46 PHẦN TÀI LIỆU THAM KHẢO 47 DANH MỤC HÌNH VÀ BẢNG BIỂU Hình 1-1: Mơ hình HTML .7 Hình 1-2: Mơ hình hoạt động JavaScript, CSS, HTML .8 Hình 1-3: Mơ hình cú pháp CSS 12 Hình 2-1: Biểu đồ Use Case tổng quát hệ thống 22 Hình 2-2: Biểu đồ Use Case qản lí loại hàng .23 Hình 2-3: Biểu đồ Use Case quản lí sản phẩm 24 Hình 2-4: Biểu đồ Use Case quản lí nhà cung cấp 26 Hình 2-5:Biểu đồ Use Case quản lí khách hàng 27 Hình 2-6: Biểu đồ Use Case quản lí User 28 Hình 2-7:Biểu đồ Use Case quản lí nhân viên 29 Hình 2-8:Biểu đồ Use Case quản lí nhập hàng 30 Hình 2-9: Biểu đồ Use Case quản lí bán hàng .31 Hình 2-10: Biểu đồ Use Case quản lí tin tức .32 Hình 2-11: Biểu đồ Use Case thống kê 33 Hình 2-12: Biểu đồ đăng ký 34 Hình 2-13: Biểu đồ đăng nhập .34 Hình 2-14:Biểu đồ sản phẩm 35 Hình 2-15: Biểu đồ tìm kiếm 35 Hình 2-16: Mơ hình lƣu trữ cấu trúc website Database 36 Hình 3-1:Bảng User .40 Hình 3-2: Bảng khách hàng 40 Hình 3-3: Bảng Lạoi sản phẩm 40 Hình 3-4: Bảng hóa đon .40 Hình 3-5: Bảng sản phẩm 41 Hình 3-6: Bảng chí tiết hóa đon 41 Hình 3-7: Bảng viết 41 Hình 3-8 Giao diện trang chủ .42 Hình 3-9 Giao diện trang giỏ hàng .43 Hình 3-10 Giao diện trang đăng ký 43 Hình 3-11 Giao diện trang đăng nhập .44 Hình 3-12 Giao diện trang admin .44 Hình 3-13 Giao diện trang quản lý sản phẩm .45 Hình 3-14 Giao diện trang thêm sản phẩm 45 PHẦN MỞ ĐẦU Lý chọn đề tài Sự phát triển công nghệ thông tin việc ứng dụng công nghệ thông tin lĩnh vực đời sống, kinh tế, xã hội nhiều năm qua đặc biệt thƣơng mại thúc doanh nghiệp đầu tƣ lớn vào lĩnh vực thƣơng mại điện tử Sự tiện ích ln đặt lên hàng đầu nên giao diện nội dung trang Web phải thật bật để thu hút đƣợc khách hàng Bên cạnh tính bảo mật vấn đề khách hàng trực tuyến Với phát triển mạnh mẽ công nghệ thông tin nhƣ ngày vấn đề đƣợc giải dễ dàng Chỉ với máy tính đƣợc kết nối internet khách hàng lựa chọn mua sắm lúc, nơi với vài thao tác đơn giản họ có đƣợc sản phẩm ƣng Bên cạnh cịn giúp cửa hàng quản lý đƣợc việc mua bán hiệu so với việc quản lý giấy tờ dễ gây sai sót hay mác thơng tin, liệu sản phẩm, khách hàng đƣợc lƣu trữ cách an tồn Chính lý trên, tơi chọn đề tài: : Xây dựng website bán thực phẩm Organic Lào để làm khóa luận tốt nghiệp Mục tiêu đề tài Với lý nêu trên, đề tài: Xây dụng website bán thực phẩm Organic Lào đời nhằm phục vụ mục tiêu đề giúp cho việc hoạt động website diễn tiện lợi nhanh chóng Các chức đƣợc hoàn thiện, bổ sung cho website bao gồm: - Giao diện dễ sử dụng, có tính thẩm mỹ cao co giãn phù hợp với thiết bị hình - Cho phép khách hàng đăng ký thành viên đảm bảo bí mật thơng tin - Thông tin sản phẩm phong phú, đa dạng - Luôn cập nhật, giới thiệu sản phẩm Đối tƣợng phạm vi nghiên cứu Về lý thuyết - Tìm hiểu quy trình mua - Bản thực tế cửa hàng thực phẩm sạch, Lƣu ý khó khăn, hạn chế việc mua - Bán thủ công; Thống kế mặt hàng có cửa hàng, tập trung nghiên cứu công nghệ nhằm giải vấn đề cách tốt - Tìm hiểu cơng cụ hỗ trợ để xây dụng Website Về ứng dụng: Xây dựng chức cần thiết cho web bán thực phẩm kết hợp phát triển thêm chức mà website bán thực phẩm thiếu có nhƣng chƣa hồn thiện Phƣơng pháp nghiên cứu - Nắm vững kiến thức phân tích thiết kế hệ thống thơng tin - Có kiến thức vững CSDL: Tổ chức liệu, phân tích, thiết kế CSDL - Nắm vững có khả sử dụng thành thạo PHP, HTML, CSS - Nắm vững, sử dụng kết hợp cách hợp lý kỹ thuật lập trình - Nghiên cứu công cụ xây dựng hệ thống Về ứng dụng: Khi hoàn thành khắc phục hạn chế mà website bán thực phẩm mắc phải, quản lý sản phẩm, đơn hàng cách linh hoạt, tƣơng tác đƣợc với ngƣời bán khách hàng Lịch sử nghiên cứu Nội dung đƣợc dạy học học phần phân tích thiết kế Website Có nhiều ngƣời nhƣ nhóm nghiên cứu chọn kiến thức làm nội dung cho đề tài nghiên cứu họ Đóng góp đề tài -Giúp ngƣời tiêu dùng có đƣợc giá hình ảnh sản phẩm cách xác - Xây dụng hồn chỉnh trang website bán thực phẩm Organic Lào Cấu trúc đề tài PHẦN MỞ ĐẦU PHẦN NỘI DUNG NGHIÊN CỨU Chƣơng 1: Cơ sở lý thuyết Chƣơng 2: Phân tích thiết kế hệ thống thông tin Chƣơng 3: Thiết kế xây dựng website PHẦN KẾT LUẬN VÀ KIẾN NGHỊ PHẦN TÀI LIỆU THAM KHẢO PHẦN NỘI DUNG NGHIÊN CỨU CHƢƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Các khái niệm 1.1.1 Giới thiệu ngôn ngữ HTML Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) loại ngôn ngữ đƣợc sử dụng lập trình web Khi truy cập trang web cụ thể click vào đƣờng link, bạn đƣợc dẫn tới nhiều trang trang đƣợc gọi tài liệu HTML (tập tin HTML) Một trang HTML nhƣ đƣợc cấu thành nhiều phần tử HTML nhỏ đƣợc quy định thẻ tag Bạn phân biệt trang web đƣợc viết ngôn ngữ HTML hay PHP thơng qua đƣờng link Ở cuối trang HTML thƣờng hay có HTML HTM nh 1-1: Mơ hình HTML Một trang HTML đƣợc cấu thành nhiều phần tử HTML nhỏ đƣợc quy định thẻ tag HTML ngơn ngữ lập trình web đƣợc đánh giá đơn giản Mọi trang web, trình duyệt web hiển thị tốt ngơn ngữ HTML Hiện nay, phiên HTML HTML với nhiều tính tốt chất lƣợng so với phiên HTML cũ Vậy, website, ngôn ngữ HTML đóng vai trị nhƣ nào? HTML, theo nghĩa nó, loại ngơn ngữ đánh dấu siêu văn bản, nên chức xoay quanh yếu tố Cụ thể, HTML giúp cấu thành cấu trúc website (chia khung sƣờn, bố cục thành phần trang web) góp phần hỗ trợ khai báo tập tin kĩ thuật số nhƣ video, nhạc, hình ảnh nh 1-2: Mơ hình hoạt động JavaScript, CSS, HTML Ƣu điểm trội mạnh HTML khả xây dựng cấu trúc khiến trang web vào quy cũ hệ thống hoàn chỉnh Nếu bạn mong muốn sở hữu website có cấu trúc tốt có mục đích sử dụng nhiều loại yếu tố văn bản, hỏi HTML Nhiều ý kiến cho tùy theo mục đích sử dụng mà lập trình viên hay ngƣời dùng lựa chọn ngơn ngữ lập trình riêng cho website bạn, nhiên thực chất HTML chứa yếu tố cần thiết mà dù website bạn có thuộc thể loại nào, giao tiếp với ngơn ngữ lập trình để xử lý liệu phải cần đến ngôn ngữ HTML để hiển thị nội dung cho ngƣời truy cập Nói hơn, dù website bạn đƣợc xây dựng nhƣ nào, tảng cần đến hỗ trợ HTML, dù dù nhiều Đối với lập trình viên hay nhà phát triển web, họ phải học HTML nhƣ loại ngôn ngữ trƣớc bắt tay vào thiết kế trang web 1.1.2 Cấu trúc file HTML Cấu trúc HTML Cấu trúc trang HTML/XHTML có dạng nhƣ sau, thƣờng gồm phần: : Phần khai báo chuẩn html hay xhtml : Phần khai báo ban đầu, khai báo meta, title, CSS, javascript : Phần chứa nội dung trang web, nơi hiển thị nội dung Cấu trúc Tiêu đề trang web .Phần thân viết Cấu trúc trang web Mỗi trang web có cách thể cấu trúc khác nhau, có trang cột, có trang có trang chứa nhiều cột, bên dƣới tham khảo trang đơn giản sử dụng cột để layout  Phần đầu: header, chứa logo, câu slogan, liên kết, banner liên kết, button, đoạn flash, form ngắn nhƣ form tìm kiếm  Phần liên kết tồn cục: global navigation, dùng để chứa liên kết đến trang quan trọng toàn trang, phần chứa thêm liên kết (Sub Navigation)  Phần thân trang: page body, phần chứa phần nội dung (Content) phần nội dung phụ (Sidebar)  Phần nội dung chính: content, phần chứa nội dung cần thể cho ngƣời dùng xem  Phần nội dung phụ: sidebar, phần chứa liên kết phụ trang (Local Navigation), banner chứa liên kết liên quan, dùng để chứa liên kết quảng cáo Phần cuối trang web: footer, phần thƣờng chƣa phân liên hệ nhƣ: tên công ty, địa chỉ, số điện thoại, mail liên hệ, đặc biệt copyright, chứa liên kết toàn trang, banner liên kết 1.2 Ngôn ngữ CSS 1.2.1 Giới thiệu  Định nghĩa CSS viết tắt Cascading Style Sheets Đây ngôn ngữ style sheet đƣợc sử dụng để mô tả giao diện định dạng tài liệu viết ngôn ngữ đánh dấu (Markup) Nó cung cấp tính bổ sung cho HTML Nó thƣờng đƣợc sử dụng với HTML để thay đổi phong cách trang web giao diện ngƣời dùng Nó đƣợc sử dụng với loại tài liệu XML bao gồm XML đơn giản, SVG XUL CSS đƣợc sử dụng với HTML JavaScript hầu hết trang web để tạo giao diện ngƣời dùng cho ứng dụng web giao diện ngƣời dùng cho nhiều ứng dụng di động  CSS làm đƣợc gì? Có thể thêm giao diện vào tài liệu HTML cũ Hồn tồn thay đổi giao diện trang web với vài thay đổi mã CSS  Tại sử dụng CSS Đây ba lợi ích CSS: 1) Giải vấn đề lớn Trƣớc có CSS, thẻ nhƣ phơng chữ, màu sắc, kiểu nền, xếp phần tử, đƣờng viền kích thƣớc phải đƣợc lặp lại trang web Đây trình dài tốn thời gian cơng sức Ví dụ: Nếu bạn phát triển trang web lớn nơi phông chữ thơng tin màu đƣợc thêm vào trang, trở thành trình dài tốn CSS đƣợc tạo để giải vấn đề Đó khuyến cáo W3C 2) Tiết kiệm nhiều thời gian Định nghĩa kiểu CSS đƣợc lƣu tệp CSS bên ngồi thay đổi tồn trang web cách thay đổi tệp 3) Cung cấp thêm thuộc tính CSS cung cấp thuộc tính chi tiết HTML để định nghĩa giao diện trang web 10