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

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: Thiế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

PHẦN 2 NỘI DUNG NGHIÊN CỨU

CƠ SỞ LÝ THUYẾT

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 HTML 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, 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

: 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

Tiêu đề trang web

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 navigation, 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

 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

Ngôn ngữ CSS

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

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

h1 { color:white; background-color:#00eeee; padding:5px;

Write Your First CSS Example

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:

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; ;}

- 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 Boostrap tính đến thời điểm tôi viết tài liệu này: Bootstrap 3.2.0

- 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

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 web, 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 Website 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

+ Hoạt động trên Linux, có thể trên IIS – Windows

+ Chỉ chạy trên ứng dụng web.

Công cụ sử dụng

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.

Tổng quan MySQL

MySQL là hệ quản trị 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 những lập trình viên yêu thích mã nguồ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 trú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

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

- Ở đâ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

- 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.

PHÂN TÍCH VÀ THIẾT KẾ WEBSITE

Mô tả tổng quan

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: Đă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ý 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

- Tạo mới sản phẩm Chính

- sửa thông tin sản phẩm

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

- 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ì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

2.1.3 Các yêu cầu phi chức 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ệ

Các chức năng và phân quyền cho 2 nhóm đối tƣợng: Admin và khách hàng

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 websit, 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 (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

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

- 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

- Xem, sửa thông tin cá nhân.

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

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

Sau khi đăng nhập vào hệ thống

+ 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

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

Sau khi đăng nhập vào hệ thống

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 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

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ố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.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

Sau khi đăng nhập vào hệ thống

+ Nhân viên chọn chức năng thêm nhà cung cấp

+ Hệ thống tự động 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 ô 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

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

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

Sau khi đăng nhập vào hệ thố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

+ 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

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

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

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)

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í nhấ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

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

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

+ 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

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

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ố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

+ 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

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

Sau khi đăng nhậ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

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

Sau khi đă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ê

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 form dang ki form dang ki he thong he thong

2 hien thi form dang ki

4 he thong kiem tra thong

4.1 không hop le -> b3 hop le

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

2 Hien thi cua so dang nhap

3 nhap ten username + mat khau

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 giao dien giao dien he thong he thong co so du lieu co so du lieu

1 yeu cau them san pham

4 nhap thong tin muon them san pham

10.1 loi nhap thong tin 10.2 thong bao nhap lai

: Khach hang khung tim kiem khung tim kiem he thong he thong co so du lieu co so du lieu

2 nhâp tên san pham can tim

4 lây thông tin tu co so du lieu5 kiêm tra

8 hiên thi ket qua tim kiêm

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:

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

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

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ị

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

View Varchar 2455 Nội dung SP create_at int 11 Ngày tạo

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

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

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

View Int Int Đã xem

Create_at int 20 Ngày tạo

GIAO DIỆN CỦA HỆ THỐNG

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ảng Lạoi sản phẩm nh 3-4 : Bảng hóa đon 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