Báo cáo chuyên Đề học phần cơ sở lập trình web Đề ti website mẹ v bé

ế ậ ơ ả ờ ắ ặ Web Mẹ Và Bé được tạo ra nhằm cung cấp cho những nguời yêu thích muasắm và những người mới bắt đầu với bộ môn này một môi trường tương tác cũngnhư tìm hiểu, cập nhật những

TR ƯỜ NG Đ I H C ĐI N L C Ạ Ọ Ệ Ự

KHOA CÔNG NGH THÔNG TIN Ệ

BÁO CÁO CHUYÊN Đ H C PH N Ề Ọ Ầ

C S L P TRÌNH WEB Ơ Ở Ậ

Đ TI: Ề

WEBSITE M V BÉ Ẹ

Sinh viên th c hi n ự ệ : Lê Xuân Hi u ế

Gi ng viên h ả ướ ng d n ẫ : C n Đ c Đi p ấ ứ ệ

Chuyên ngành

Khóa

L p ớ

:Công ngh ph n m m ệ ầ ề :2020-2025

: D16CNPM5

Hà N i, tháng ộ ,năm 2023

M C L C Ụ Ụ

L I C M NỜ Ả Ơ 4

L I M Đ UỜ Ở Ầ 6

CHƯƠNG 1: T NG QUAN V Đ TÀIỔ Ề Ề 8

1.1 Gi i thi u đ tàiớ ệ ề 8

1.2 M c đích c a website c n thi t kụ ủ ầ ế ế 8

1.3 M c tiêu qu ng bá c a websiteụ ả ủ 9

1.4 M t s trang chính c a websiteộ ố ủ 10

CHƯƠNG 2: KH O SÁT VÀ PHÂN TÍCH H TH NGẢ Ệ Ố 11

2.1 Kh o sát hi n tr ngả ệ ạ 11

2.2 Mô t bài toánả 12

2.3 Yêu c u v ch c năngầ ề ứ 13

2 4 Yêu c u phi ch c năngầ ứ 14

2.5 Mô t các ch c năngả ứ 14

2.6 Layout các trang web 15

2.6.1 Layout đăng nh pậ 15

2.6.2 Layout đăng ký 16

2.6.3 Layout trang chủ 17

2.6.4 Layout trang chi ti t s n ph mế ả ẩ 18

CHƯƠNG 3: THI T K TRANG WEBẾ Ế 19

3.1 Đăng nh pậ 19

3.2 Đăng ký 20

3.3 Trang chủ 21

3.4 Trang chi ti t s n ph mế ả ẩ 22

K T LU NẾ Ậ 23

Em xin chân thành c m n! ả ơ 23

TÀI LI U THAM KH OỆ Ả 24

L I C M N Ờ Ả Ơ

Trên th c t , không có s thành công nào mà không g n li n v i nh ng sự ế ự ắ ề ớ ữ ự

h tr , s giúp đ dù ít hay nhi u, dù là tr c ti p hay gián ti p c a ngỗ ợ ự ỡ ề ự ế ế ủ ườikhác Trong su t thố ười gian t khi b t đ u h c t p gi ng đừ ắ ầ ọ ậ ở ả ường Đ i h c đãạ ọ

đ n nay, em đã nh n đế ậ ượ ấc r t nhi u s quan tâm, giúp đ c a th y cô, giaề ự ỡ ủ ầđình và b n bè.ạ

V i lòng bi t n sâu s c nh t, em xin g i đ n th y cô Khoa Công Nghớ ế ơ ắ ấ ử ế ầ ở ệThông Tin- trường Đ i H c Đi n L c đã cùng v i tri th c và tâm huy t c aạ ọ ệ ự ớ ứ ế ủmình đ truy n đ t v n ki n th c quý báu cho chúng em trong su t th i gianể ề ạ ố ế ứ ố ờ

h c t p t i trọ ậ ạ ường Và đ c bi t, trong kỳ này, em đặ ệ ược ti p c n v i môn h cế ậ ớ ọ

r t h u ích đ i v i sinh viên ngành Công Ngh Thông Tin Đó là môn: ấ ữ ố ớ ệ “C s ơ ở

được truy n s say mê và thích thú đ i v i b môn “ề ự ố ớ ộ C s l p trình Web” ơ ở ậ

N u không có nh ng l i hế ữ ờ ướng d n, d y b o c a cô thì em nghĩ báo cáo nàyẫ ạ ả ủ

r t khó có th hoàn thành đấ ể ược

Xin g i l i c m n chân thành đ n gia đình, b n bè là ngu n đ ng viên toử ờ ả ơ ế ạ ồ ộ

l n, giúp em vớ ượt qua nh ng khó khăn trong quá trình h c t p và th c hi nữ ọ ậ ự ệbáo cáo

M c dù đã r t c g ng hoàn thi n báo cáo v i t t c s n l c, tuy nhiên,ặ ấ ố ắ ệ ớ ấ ả ự ỗ ự

do bước đ u đi vào th c t , tìm hi u và xây d ng báo cáo trong th i gian cóầ ự ế ể ự ờ

h n, và ki n th c còn h n ch , nhi u b ng , nên báo cáo ạ ế ứ ạ ế ề ỡ ỡ “Website M Và Bé ẹ ”

ch c ch n sẽ không th tránh kh i nh ng thi u sót Em r t mong nh n đắ ắ ể ỏ ữ ế ấ ậ ược

s quan tâm, thông c m và nh ng đóng góp quý báu c a các th y cô và cácự ả ữ ủ ầ

b n đ báo cáo này đạ ể ược hoàn thi n h n.ệ ơ

M t l n n a, em xin chân thành c m n và luôn mong nh n độ ầ ữ ả ơ ậ ượ ực s đónggóp c a m i ngủ ọ ười

Trân tr ng.ọ

Cùng v i s phát tri n vớ ự ể ượ ậ ủt b c c a CNTT, con người đã xây d ng, phátựtri n và b o trì các trang web để ả ượ ưc l u tr trên internet dữ ưới hình th c l pứ ậtrình web M t trang web đ n gi n có th độ ơ ả ể ược vi t b ng ngôn ng HTML,ế ằ ữCSS và ch ch a vài trăm dòng l nh Tuy nhiên đ i v i trang web l n nhỉ ứ ệ ố ớ ớ ưFacebook có th lên đ n 60 tri u dòng l nh đ phát tri n hoàn ch nh trangể ế ệ ệ ể ể ỉweb.

Trước nhu c u c a th trầ ủ ị ường mua bán trao đ i hàng hóa, c p nh tổ ậ ậthông tin, tin t c thì thay vì ph i qu ng bá s n ph m, hàng hóa m t cáchứ ả ả ả ẩ ộtruy n th ng thì ta có th thay th vào đó là m t trang web mua -bán v iề ố ể ế ộ ớnhi u ti n ích Cu c s ng con ngề ệ ộ ố ười càng phát tri n thì nhu c u s ng c a conể ầ ố ủ

người cũng được nâng cao và nh ng nhu c u đ n gi n nh ng cũng r t thi tữ ầ ơ ả ư ấ ế

th c Đó là nhu c u ăn, và m c đây là v n đ cũng đang là 1 bài toán c a cácự ầ ở ặ ấ ề ủnhà kinh doanh, làm sao đ đáp ng nhu c u c a con ngể ứ ầ ủ ườ ể ải đ c i thi n đ iệ ờ

s ng ngày càng cao ố

Chính vì v y, đ đáp ng nh ng nhu c u đó trên s s k th a nh ngậ ể ứ ữ ầ ơ ở ế ừ ữtrang web bán hàng khác nhóm em xây d ng m t website qua m ng đ đápự ộ ạ ể

ng nhu c u mua s m c a m i ng i, giúp h ti t ki m đ c th i gian, chi

lo i s n ph m, các nhãn hi u và các đ n đ t hàngạ ả ẩ ệ ơ ặ , và lý do đ c bi t nh t giúpặ ệ ấ

em ch n đ tài “ Xây d ng website M Và Bé” đó là em thích em bé.ọ ề ự ẹ

CH ƯƠ NG 1: T NG QUAN V Đ TI Ổ Ề Ề

1.1 Gi i thi u đ tài ớ ệ ề

Hi n nay vi c bán hàng qua m ng không còn xa l gì đ i v i m i ngệ ệ ạ ạ ố ớ ọ ười,không th ph nh n l i ích mà vi c bán hàng online mang l i M c dù C và C+ể ủ ậ ợ ệ ạ ặ+ có kh năng làm vi c này nh ng trình biên d ch l i ph thu c vào t ng lo iả ệ ư ị ạ ụ ộ ừ ạCPU Trình biên d ch thị ường ph i t n nhi u th i gian đ xây d ng nên r tả ố ề ờ ể ự ấ

đ t, vì v y đ m i lo i CPU có m t trình biên d ch riêng là r t t n kém ắ ậ ể ỗ ạ ộ ị ấ ố

Người mua ch c n truy c p trang web bán hàng là có th l a ch n nh ngỉ ầ ậ ể ự ọ ữ

m t hàng c n thi t mà không c n ph i đ n t n c a hàng đ mua nh th sẽặ ầ ế ầ ả ế ậ ử ể ư ế

ti t ki m r t nhi u th i gian, không nh ng th vi c thanh toán cũng đế ệ ấ ề ờ ữ ế ệ ược

tr c tuy n và nhanh chóng h n th n a khách hàng đ t hàng sẽ đự ế ơ ế ữ ặ ược giaohàng đ n t n n i trong kho ng th i gian ng n sau khi đ t hàng ế ậ ơ ả ờ ắ ặ

Web Mẹ Và Bé được tạo ra nhằm cung cấp cho những nguời yêu thích muasắm và những người mới bắt đầu với bộ môn này một môi trường tương tác cũngnhư tìm hiểu, cập nhật những tin tức mới nhất về các mặt hàng:

⮚ Giao diện: Đơn giản, đẹp mắt, dễ thao tác trên màn hình, phù hợp chomọi đối tượng khách hàng

⮚ Sản phẩm: Đa dạng mẫu mã sản phẩm, hình ảnh sản phẩm chân thực,

dễ phân loại để người dùng dễ tìm kiếm và lựa chọn

1.2 M c đích c a website c n thi t k ụ ủ ầ ế ế

Khi xây d ng m t website đ u tiên ph i hình dung chúng ta c n ph iự ộ ầ ả ầ ảthi t k cái gì? Cho website c a mình Không có ch đ nh và m c tiêu rõ ràngế ế ủ ủ ị ụthì c website đó tr nên sai l m, lan man và cu i cùng đi t i m t hả ở ầ ố ớ ộ ướng khó

có th tr l i Thi t k c n th n và đ nh hể ở ạ ế ế ẩ ậ ị ướng rõ là chìa khóa hướng t iớ

thành công c a vi c xây d ng m t website V n d ng t ng h p nh ng ki nủ ệ ự ộ ậ ụ ổ ợ ữ ế

th c đã h c đ ti n hành thi t k website bán hàng online nh m gi i quy tứ ọ ể ế ế ế ằ ả ế

nh ng khó khăn hi n t i c a c a hàng Tìm hi u th c tr ng thữ ệ ạ ủ ử ể ự ạ ương m i đi nạ ệ

t t i Vi t Nam đ tri n khai h th ng thử ạ ệ ể ể ệ ố ương m i đi n t t i c a c a hàngạ ệ ử ạ ủ ửcho phù h p Khai phá l i ích c a Internet đ hợ ợ ủ ể ướng đ n m t môi trế ộ ườngkinh doanh toàn c u ầ

D a trên các ki n th c n n t ng đự ế ứ ề ả ược th y cô trao đ i trên l p và m tầ ổ ớ ộ

s tài li u tham kh o em đã t ng h p ki n th c đ xây d ng m t trang web.ố ệ ả ổ ợ ế ứ ể ự ộBáo cáo sẽ l p trình trên n n web “ậ ề WEBSITE M V BÉ Ẹ ” tích h p đợ ược giao

v n đ đấ ề ường xa vi c đi l i khó khăn l i hay t c nghẽn giao thông, ệ ạ ạ ắ

1.4 M t s trang chính c a website ộ ố ủ

-Trang ch : Đây là trang gi i thi u v các s n ph m n i Ngoài ra bi tủ ớ ệ ề ả ẩ ổ ếthêm thông tin c a xã h i ủ ộ

-Trang đăng nh p và đăng ký: Đ khách hàng có th d dàng đ t hàngậ ể ể ễ ặ

và đượ ưởc h ng nh ng u đãi t c a hàng.ữ ư ừ ử

-Trang chi ti t s n ph m: Đây là trang khách hàng xem chi ti t v m tế ả ẩ ế ề ộ

s n ph m ả ẩ

CH ƯƠ NG 2: KH O SÁT V PHÂN TÍCH H TH NG Ả Ệ Ố

2.1 Kh o sát hi n tr ng ả ệ ạ

Hi n nay trào l u mua bán qua m ng ngày càng tr nên ph bi nệ ư ạ ở ố ếInternet phát tri n kéo theo nhi u d ch v phát tri n theo đi li n v i nó Vàể ề ị ụ ể ề ớ

vi c ti p c n v i inernet hi n nay không còn m y xa l v i con ngệ ế ậ ớ ệ ấ ạ ớ ườ ượi đ c

tr thành phở ương ti n truy n thông đệ ề ược nhi u ngề ườ ử ụi s d ng nh t trên thấ ế

gi i Không ch Internet làm phớ ỉ ương ti n truy n thông tin trao đ i, gi i trí,ệ ể ổ ảxem tin t c, tìm ki m thông tin m i ngứ ế ọ ười còn dùng internet đ kinh doanhểcác m t hàng bình thặ ường đ n đ c bi t c a mình ế ặ ệ ủ

Vi t Nam cũng có r t nhi u trang web mua-bán qua m ng v i đa

d ng các m t hàng th i trang,mĩ ph m, đ ăn, cũng đạ ặ ờ ẩ ồ ược bán khá nhi uềtrên nhi u website Khách hàng ch c n m y thao tác click chu t vào s nề ỉ ầ ấ ộ ả

ph m mà mình yêu thích và liên h v i ch c a hàng là có th ch đ n hàngẩ ệ ớ ủ ử ể ờ ơchuy n t i nhà c a mình ể ớ ủ

Vi c kinh doanh qua m ng giúp nhi u công ty có nhi u c h i và tháchệ ạ ề ề ơ ộ

th c h n trong vi c m r ng th trứ ơ ệ ở ộ ị ường không ch th i gian mà c khôngỉ ờ ảgian, trong nước cũng nh ngoài nư ước Bên c nh nh ng thu n l i thì vi cạ ữ ậ ợ ệkinh doanh qua m ng cũng có nh ng v n đ n y sinh Nó đòi h i ph i cóạ ữ ấ ề ả ỏ ả

hi u bi t v công ngh thông tin đ thi t l p và t o m t trang web đ th cể ể ề ệ ể ế ậ ạ ộ ể ự

hi n ho t đ ng bán hàng và qu ng bá s n ph m c a mình M t th c t choệ ạ ộ ả ả ẩ ủ ộ ự ế

th y Vi t Nam cho dù Inernet và vi c mua bán hàng tr c tuy n phát tri nấ ở ệ ệ ự ế ểkhá nhanh chóng nh ng r t nhi u ngư ấ ề ườ ẫi v n đang lo s v phợ ề ương th c kinhứdoanh m i m này Khách hàng có tâm lý lo ng i khi mua các m t hàng nóiớ ẻ ạ ặchung và các m u trang trang nói riêng vì h không ch c ch n r ng nó có t tẫ ọ ắ ắ ằ ố

nh các m u s n ph m qu ng cáo c a các nhà kinh doanh hay không vì hư ẫ ả ẩ ả ủ ọ

không ti p xúc các m t hàng tr c ti p, ti n đế ặ ự ế ề ược chuy n đi hàng hóa sẽ đ nể ế

ch m h c không chuy n đ n Còn phía bên c a hàng cũng ph i ch u t n th tậ ặ ể ế ử ả ị ổ ấ

1 chi phí không nh trong vi c mua hàng hay s n xu t ra m t s n ph m nàoỏ ệ ả ấ ộ ả ẩ

đó mà không th bi t để ế ược ph n ng c a khách hàng hay giao hàng màả ứ ủkhông có người nh n, hay đ a ch không chính xác ậ ị ỉ

Hình th c kinh doanh nào cũng có nh ng u đi m và nhứ ữ ư ể ược đi m c aể ủ

nó, tuy nhiên s thành công c a m t hình th c kinh doanh nó còn ph thu cự ủ ộ ứ ụ ộ

và ý tưởng và cách kinh doanh c a ngủ ười qu n lý Đ i v i ngành kinh doanhả ố ớ

th i trang qua m ng giúp cho ngành th i trang nói chung và qu n áo nói riêngờ ạ ờ ầngày càng đa d ng h n và phù h p v i xu hạ ơ ợ ớ ướng t t y u c a th i đ i hi nấ ế ủ ờ ạ ệnay- th i đ i công ngh thông tin ờ ạ ệ

2.2 Mô t bài toán ả

Khi khách hàng đã quy t đ nh tham gia vào ho t đ ng mua hàng c aế ị ạ ọ ủ

c a hàng “ o” thì m i khách hàng đử ả ỗ ược cung c p m t gi hàng tấ ộ ỏ ương ng.ứKhách hàng t do l a ch n lo i hàng hóa nào mà mình thích vào gi hàng c aự ự ọ ạ ỏ ủmình

Khách hàng có th c p nh t l i các m t hàng trong gi hàng mà mìnhể ậ ậ ạ ặ ỏkhông mu n mua n a Khách hàng ch a đăng ký đăng nh p, ngố ữ ư ậ ượ ạ ếc l i n ukhách hàng nào đã đăng ký r i thì h ch c n đăng nh p b ng username/ồ ọ ỉ ầ ậ ằemail và password c a mình ủ

Đ thu hút khách hàng thể ường xuyên tham gia vào trang web, nhà

qu n tr c n ph i có các bi n pháp đ xúc ti n đăng t i các chả ị ầ ả ệ ể ế ả ương trìnhkhuy n mãi, gi m giá trong nh ng d p c n thi t đ lôi kéo khách hàng vế ả ữ ị ầ ế ể ềphía mình, và có các u đãi đ i v i các khách hàng thư ố ớ ường xuyên vào muahàng v i s lớ ố ượng l n ớ

2.3 Yêu c u v ch c năng ầ ề ứ

-User: Là nh ng ngữ ười có nhu c u mua s m các s n ph m H sẽ tìm ki mầ ắ ả ẩ ọ ếcác s n ph m c n thi t t h th ng và đ t mua các s n ph m này Vì thả ẩ ầ ế ừ ệ ố ặ ả ẩ ếtrang web ph i th a mãn các ch c năng sau: ả ỏ ứ

+Hi n th danh sách các s n ph m c a c a hàng đ khách hàng có thể ị ả ẩ ủ ử ể ểxem và l a ch n ự ọ

đ khách hàng có th tìm ki m nhanh và hi u qu các s n ph m màể ể ế ệ ả ả ẩ

h c n tìm ọ ầ

-Admin: Là người làm ch ng d ng có quy n ki m soát m i ho t đ ng c aủ ứ ụ ề ể ọ ạ ộ ủ

h th ng Ngệ ố ười này đượ ấc c p m t username và password đ đăng nh p vàoộ ể ậ

h th ng th c hi n ch c năng c a mình N u nh quá trình đăng nh p thànhệ ố ự ệ ứ ủ ế ư ậcông thì nhà qu n lý có nh ng ch c năng sau: ả ữ ứ

+Ch c năng qu n lý c p nh t( thêm, s a, xóa) các s n ph m trênứ ả ậ ậ ử ả ẩtrang web, vi c này đòi h i chính xác ệ ỏ

Ngoài các ch c năng trên thì trang web ph i trình bày sao cho d hi u,ứ ả ễ ểgiao di n mang tính d dùng, đ p m t và làm cho khách hàng th y đệ ễ ẹ ắ ấ ược

nh ng thông tin c n tìm, cung c p nh ng thông tin qu ng cáo th t h p d nữ ầ ấ ữ ả ậ ấ ẫ

nh ng chung th c, nh m thu hút s quan tâm v c a hàng c a mình và có cư ự ằ ự ề ử ủ ơ

h i có nhi u khách tham quan mua s m s n ph m c a c a hàng ộ ề ắ ả ẩ ủ ử

Đi u quan tr ng trong trang web mua bán trên m ng là ph i đ m b oề ọ ạ ả ả ả

an toàn tuy t đ i nh ng thông tin liên quan đ n khách hàng trong quá trìnhệ ố ữ ế

đ t mua hay thanh toán Đ ng th i trang web còn ph i có tính d nâng c p,ặ ồ ờ ả ễ ấ

b o trì, s a ch a khi c n b sung hay c p nh t tính năng m i ả ử ữ ầ ổ ậ ậ ớ

2 4 Yêu c u phi ch c năng ầ ứ

-H tr khách hàng an toàn khi mua s n ph m nh các thông tin cáỗ ợ ả ẩ ưnhân liên quan đ n khách hàng đế ược đ m b o an toàn Giao di n thân thi n,ả ả ệ ệ

d dùng, h p d n, d tìm ki m thông tin các s n ph m.ễ ấ ẫ ễ ế ả ẩ

-Website có dung lượng không quá l n, t c đ x lý nhanh ớ ố ộ ử

-Vi c tính toán đ m b o chính xác và không ch p nh n sai sót ệ ả ả ấ ậ-Đ m b o an toàn d li u khi ch y ả ả ữ ệ ạ

đi m n i b t c a s n ph m, thông tin chi ti t c a s n ph m, giá, th i gianể ổ ậ ủ ả ẩ ế ủ ả ẩ ờ

b o hành, hãng s n xu t, thông tin v chả ả ấ ề ương trình khuy n m i, Các s nế ạ ả

ph m này sẽ đả ược phân lo i theo t ng hãng s n xu t, theo tên ch ng lo i Sạ ừ ả ấ ủ ạ ựphân lo i này sẽ đạ ược người dùng l a ch n khi tham quan các gian hàng Trênự ọtrang ch c a website, thành ph n chính sẽ hi n th m t s s n ph m m iủ ủ ầ ể ị ộ ố ả ẩ ớ

+Đăng ký: N u khách hàng nào ch a có tài kho n thì có th đăng kýế ư ả ể

b ng cách đi n thông tin đ y đ và ch xác nh n c a h th ng, n u thông tinằ ề ầ ủ ờ ạ ủ ệ ố ếchính xác h th ng sẽ thông báo thành công cho khách hàng, n u l i thì kháchệ ố ế ỗhàng ph i ki m tra l i thông tin mà mình đã nh p.ả ể ạ ậ

2.6 Layout các trang web

2.6.1 Layout đăng nh p ậ

Hình 2.1 : Layout đăng nh p ậ

2.6.2 Layout đăng ký

Hình 2.2 : Layout đăng kí

2.6.3 Layout trang chủ

Hình 2.3 : Layout trang chủ

2.6.4 Layout trang chi ti t s n ph m ế ả ẩ

Hình 2.4 : Layout chi ti t s n ph m ế ả ẩ

CH ƯƠ NG 3: THI T K TRANG WEB Ế Ế

3.1 Đăng nh p ậ

Hình 3.1 Giao di n đăng nh p ệ ậ

3.2 Đăng ký

Hình 3.2 Giao di n đăng kí ệ

3.3 Trang chủ

Hình 3.3 Giao di n trang ch ệ ủ

3.4 Trang chi ti t s n ph m ế ả ẩ

Hình 3.4 Giao di n chi ti t s n ph m ệ ế ả ẩ

K T LU N Ế Ậ

Nhìn chung, giao di n website đáp ng đệ ứ ược nhu c u ngầ ười dùng và đ tạ

được nh ng tiêu chí sau: ữ

• Hoàn thi n đệ ược ý tưởng và n i dung c a trang web ộ ủ M Và Béẹ

• Thi t k giao di n đ n gi n, đáp ng nhu c u v i ngế ế ệ ơ ả ứ ầ ớ ười dùng

• Thao tác trên trang web d dàng, b c c đễ ố ụ ược chia khoa h c.ọ

• D ho t đ ng trên các n n t ng công ngh ễ ạ ộ ề ả ệ

• T i u hóa đố ư ược dung lượng trang web

• Cung c p s n ph m ki n th c đ n cho m i đ i tấ ả ẩ ế ứ ế ọ ố ượng khách hàng.Tuy v y, do nh ng h n ch v trình đ , th i gian nên em không kh i cóậ ữ ạ ế ề ộ ờ ỏ

nh ng thi u sót trong quá trình tìm hi u, nghiên c u cũng nh th c nghi m.ữ ế ể ứ ư ự ệ

Em r t mong nh n đấ ậ ược đánh giá và ch nh s a t các th y cô.ỉ ử ừ ầ

Em xin chân thành c m n! ả ơ