môn học lập trình web đề tài website bán bông hoa online

Bên cạnh đó, trong quá trình làm bài dokiến thức của em còn hạn chếvà còn nhiều điều mới mẻ chưa nắm được hếttrong thờigian.Do vậy, không tránh khỏi những thiếu sót là điều không thể trá

BỘGIÁODỤCVÀĐÀOTẠOTRƯỜNG ĐẠI HỌC KIÊN

-Mônh ọ c LẬPTRÌNHWEB

Mỗi dư án luôn tạo cho ta lại những kĩ niệm những khó khăn, nhưngdùthếtavẫncóđượcsựđồnghànhđólàsựgiúpđỡcủathầycô,cũngnhưbạnbècùngn ha u vượtquanhững khókhancùngnhautrongt hờ i gianhọctập.Với

lòng trân trọng biết ơn sự giúp đỡ, em xin gửi đến thầyVõ Hoàng Nhânđang trong Trường Đại

học Kiên Giang, thầy đã vận dụng kiến thức và tâmhuyết của mình đề

truyền đạt vốn kiến thức quý báo cho em trong suốtthờigianhọctậptạitrườngvàđặcbiệt,tronghọc kỳnày.

Ngoài ra sự hỗ trợ của khoa "CÔNG NGHỆ THÔNG TIN vàTRUYỀNTHỐNG”đãmangđếnchoemmộtmônhọcmanglạisựhiểubiếtcũngnhưlà môn nền tảng để học tập về sau Bên cạnh đó, trong quá trình làm bài dokiến thức của em còn hạn chếvà còn nhiều điều mới mẻ chưa nắm được hếttrong thờigian.

Do vậy, không tránh khỏi những thiếu sót là điều không thể tránhkhỏiđược, vì thế em rất mong nhận được những ý kiến đóng góp quý báu củaquýthầy cô và sự giúp đỡ của các bạn chung lớp để kiến thức của em để từ đóbàitập sẽ được tốt hơn Lời cuối, em xin gữi đến thầy cô và các bạn lời cảmơnchân thànhvà sâusắc.

ChâuThành,KiênGiang,ngày18tháng11năm2022

2.5.1 Những tínhnăng nổibật của VisualStudio Code 15

2.5.2 Ưuđiểm của VisualStudioCode 16

CHƯƠNG III:THIẾTKẾ MÔHÌNHWEBSITE 17

Bảng3.3.1.Bảngngười dùng(user) 18Bảng3.3.2.Bảngsảnphẩm(tbproduct) 19Bảng3.3.1.Bảng đặthàng (cart) 19

Hiện nay, với sự phát triển của đại công nghiệp 4.0 trên thế giới vàsựtăng lên của thương mại điện tử ngày càng nhiều và mạnh mẽ Websitecùngcác thanh toán điện tử, các trang web hiện nay hoàn toàn có thể giữ vaitrò làmột kênh phân phối hàng hóa chủ lực cho các doanh nghiệp Khác vớinhữngphương thức truyền thống, kinh doanh online không bị hạn chế nhiềuvề mặtkhông gian và thời gian Như vậy, doanh nghiệp có thể tiếp cận đượcnhiềunguồn khách hàng ở những địa điểm khác nhau, thực hiện các đơn đạttrước,thanh toánonline sau

Hơn nữa, vì hạn chế được khá nhiều khâu trung gian nên thủy sảnđượcbán vớigiátốt hơn,giá cảđếntaykhách hàngcũngvừatúihơn.

Do đó, với sự ra đời các website bán hàng qua mạng, mọi người có thểmuamọi thứ hàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua.Trênthế giớicórất nhiều trang website bán hàngtrựctuyếnn h ư n g v ẫ nc h ư a đ ư ợ c phổ biến rộng rãi Và khái niệm thương mại điện tử còn khá xalạ Trước thực tếđó em đã chọn đề tài “Xây dựng bán bông hoa online” cho đềtài kết thúc học kỳcủa em.

1.2 Mụcđíchchọnđềtài

Vớimọngmuốncóthểgiúpconngườihiệnđạicóthểtìmkiếmđượcnhữngsảnphẩmmàlànhu cầucủamình muốnmột cáchnhanhchóngvàdễdàng.

Giảmbớtthờigianconngườiđimuasảnphẩmmìnhmuốnbởichỉđặttrênonline.Ngườit i ê u d ù n g t h í c h m u a c á c m ặ t h à n g t r ự c t u y ế n l à vậnc h u y ể nm i ễ n phítùy chọnđượccungcấpbởicáccửahàngthương mạiđiện tử.

Nói cách khác, họ sẽ thích dễ dàng giao hàng cho họ miễn phí thay vì điracửa hàngđể xem và kiểm tra sản phẩm, mua nóvà lấy nón g a y s a u k h im u a ngay cảkhiđiềuđócónghĩalà phảichờ.

1.3 Công dụsửdụng

Cácnhữngcôngcụ trongquátrìnhxâydựngwebsitebán bônghoaonlinenày bao gồm: Visual Studio Code, PHP , MySQL, HTML, CSS, JavaScript,jQuery,Bootstrapvànhữngnguồnhỗtrợmàlàmwebsitecóhoạt độngcàng tốt

2.1 Kháo sảt thực tế2.1.1 Chứcnăng

Nhữngchứcnăngtrongwebsiteđược sẽđược thiếtkếnhưsau đây: Chứcnăngkiếmtìm

 Chứcnăngđăngkývà đăngnhậpngườidụng Chứcnăngthêm,sửa,xóathôngtinbảnthân Chứcnăngtìmkiếm sảnphẩm

2.1.2 Yêucầubàitóa

Cácmụcđich cụthếđãđạtđượcwebsitebán bônghoaonlinecó: Phép nhậphàng (bônghoa)vôvà lưutrêncơ sởdữliệu Thihiện danh sáchcáchànghóatheotừngloại

 Cung cấp khả năng tìm kiếm, khách hàng có thể truy cập từ xa để tìm xemmặthàngđặt mua

 Chophépquản lýđơn đặthàng

 Cậpnhậthànghóa,loại hànghóa,kháchhàngnhà cung cập Thihiện danhsáchđặt hàngchokháchhàng

2.1.3 Khảosátwebsite

Bánh à n g q u a m ộ t t r a n g w e b n h ư n g k h á c h h à n g c ũ n g c ó t h ể vẫnđ ặ t h à ng trực tiếp với nhân viên tại cửa hàng bán bông hoa của mình hoặc khách hàng cóthểđiệnvàđặthàngngaytừxa.

Quá trình đặt hàng của khách hàng: Khách hàng xem và lựa chọn mặthàngcần mua Trong quá trình lựa chọn, bộ phận bán hàng sè trực tiếp trao đổithôngtin cùng khách hàng, chịu trách nhiệm hướng dẫn Sau khi lựa chọn xong,bộphận bán hang sẽ tiến hành lập đơn hàng của khách Sau khi tiếp nhận yêucầutrên,bộ phậnnàysẽlàm hóađơnvà thanhtoántiền.

Quản lýmặthàng:Mồimặt hàng được quản lý những thôngtin:Tênđ ặ t hàng,đơngiá,sổ lượng,hìnhảnh,môtả.

Quá trình nhập hàng: Sau khi nhận yêu cầu đặt hàng từ cửa hàng, nhàcungcấp sẽ giao cho cửa hàng có kèm theo hóa đơn hay bảng kê chi tiết các loạimặthàng Bộ phận nhập hàng sẽ kiêm tra lô hàng của từng nhà cung cấp vàtrongtrường hợp hàng hóa giao không đúng yêu cầu đặt hàng, hay hàng kémchấtlượng thì bộ phận nhập hang sẽ trả lại nhà cung cấp và yêu cầu giao lạinhừngmặt hàng bị trả đó Tiêp theo bộ phận nhập hàng kiêm tra chứng từ giaohàng đêgán giá trị thành tiền cho từng loại sản phâm Những loại hàng hóa nàysẽ đượccấp một mã số và được cập nhật ngay vào giá bán Sau khi nhập xongchứng từgiaohàng,nhânviênnhậphàngsẽinmộtphiếunhậpđểlưutrữlại.

Khách hàng là người có nhu cầu mua sắm hàng hóa Khác với việc đặthàngtrụctiếp tại cửa hàng, khách hàngphải hoàn toàntự thao táct h ô n g q u at ừ n g bước cụ thể để có thể mua được hàng Trên Website, các đơn hàng đượcsắp

xếptheot ừ n g l o ạ i m ặ t h à n g g i ú p c h o k h á c h h à n g d ễ d à n g t ì m k i ế m T r on g h o ạ t động này, khách hàng chỉ chọn một mặt hàng nào đó từ danh mục hoặc thươnghiệu các mặt hàng thìnhững thông tin về mặt hàng đó sẽ hiển thị lên màn hìnhnhư:tênmặthàng,hìnhảnh,đơn giá,môtả

Người quản trị hoặc nhà quản lý là người làm chủ hệ thống, có quyềnkiềmsoát mọi hoạt động của hệ thống Nhà quản lý được cấp một usernamevàpassword để đăng nhập vào hệ thống thực hiện những chức năng của mình.Nếunhư quá trình đăng nhập thành công thì nhà quản lý có thê thực hiện nhữngcôngviệc: quản lý cập nhật thông tin các mặt hàng, tiếp nhận đơn đặt hàng, kiểm trađơn đặt hàng và xử lý đơnđặt hàng Khi có nhu cầu nhập hàng hóa từ nhà cungcấp thì tiến hành liên lạcvới nhà cung cấp đê đặt hàng và cập nhật các mặt hàngnày vàocơsởdữliệu

2.1.4 Yêucầuđặtrachohệthống quảnlý

Adminlàm chủ ứng dụng có quyên kiêm soát mỗi hoạt động của hệ

thống.Người quản trị phải có một username và password để đăng nhập vào hệthôngquản lý thực hiện các chức năng của mình Sau khi quá trình đăng nhậpthànhcôngthìsẽcóchức năngnhưsauđây:

 Chứcnăng quản lý

Cậpnhật,hêm,sửa,xóa cácsảnphẩmtrêntrangweb Kiếm tra vàtiếpnhận

Đơn đặt hàng của khách hàng Hiển thị đơn đặt hàng hay xóa bỏ đơnđặthàng.

 Đảmbảoantoàn

Điều quan trọng trong trang web mua bán trên mạng là người quản 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 trongquátrình đặtmua haythanhtoán

HTMLtạm dịch là script đánh dấu siêu văn bản Người ta thường sử

dụngHTML trong việc phân chia các đoạn văn, heading, links, blockquotes, …giúpcấuthànhcáccấutrúccơbản củamộtWebsite, làmchotrang Web trởthànhmột hệ thống hoàn chỉnh Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bốcục, chia khung sườn cácthành phần trang Web Đồng thời, nó còn hỗ trợ khaibáo cácFilekỹthuậtsốnhưnhạc,Video,hìnhảnh,…

2.2.1.1 CấutrúcHTMLcủa website

MộtWebsitethườngchứanhiềutrangconvàmỗitrangconnàylạicómộttập tin HTML riêng Lưu ý, HTML không phải là ngôn ngữ lập trình Điều

nàycónghĩalànókhôngthểthựchiệncácchứcnăng“động”.Hiểumộtcáchđơn

giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tác

dụngbố cục và định dạng trang web.HTMLkhi kết hợpvớiCSSvàJavaScriptsẽtrởthànhmộtnềntảngvữngchắcchothếgiới mạng.

2.2.1.2 Ưu điểmcủaHTML

HTMLđượcs ử d ụ n g đ ể t ạ o b ố c ụ c , c ấ u t r ú c t r a n g w e b N ó c ó m ộ t s ố ư u điểmsau:

 Có nhiềutài nguyênhỗtrợvới cộng đồngngười dùngvô cùng lớn Có thểhoạtđộngmượtmàtrênhầuhết mọitrìnhduyệthiệnnay HọcHTML kháđơngiản

 Cácmarkup sửdụngtrong HTML thườngngắngọn,có độđồngnhất cao Sửdụng mãnguồn mở,hoàntoàn miễn phí

 HTMLlà chuẩnwebđược vậnhànhbởiW3C

 Dễd à n g đ ể t í c h h ợ p v ớ i c á c l o ạ i n g ô n n g ữ b a c k e n d ( v í d ụ n h ư : PH P , Node.js,…)

2.2.1.3 Nhược điểmcủaHTML

 Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tínhnăngđộng, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữbackendcủabênthứ3(vídụnhư:PHP)

 Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếutốtrùng lặpnhưheader,footer.

 Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (vídụ,một số trình duyệt cũ không render được tag mới Do đó, dù trongHTMLdocument có sửdụngcáctag nàythìtrìnhduyệt cũng không đọcđược). Mộtv à i t r ì n h d u y ệ t c ò n c h ậ m c ậ p n h ậ t đ ể h ỗ t r ợ t í n h n ă n g

m ớ i c ủ a HTML

2.2.2 CSS

CSSlàchữviếttắtcủaCascadingStyleSheets,nólàmộtngônngữđượcsửdụngđểtìmvàđịnhdạnglạicácphầntửđượctạorabởicácngônngữđánh

dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trangweb.Chúng ta có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng cácphầntử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng…thìCSS sẽgiúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bốcục, màusắctrang,đổi màuchữ,fontchữ,thayđổicấutrúc…

CSSđượcpháttriểnbởiW3C(WorldWideWebConsortium)vàon ă m 1996,vì

HTML khôngđượcthiết kếđểgắn tag đểgiúpđịnhdạngtrangweb.

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn,vùngchọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác.Sau đólànósẽápdụngcácthuộctính cầnthayđổilên vùngchọnđó.

 CSS giúp chúng ta thực hiện định kiểu mọi thứ mình muốn lên mộtfilekhác Nhờ vậy, mình có thể tạo ra được những phong cách phù hợprồimới tích hợp các file CSS lên trên cùng file của HTML Điều này sẽgiúpchoH T M L đ ư ợ c m a k u p r õ r à n g n h ấ t v à n g ư ờ i d ù n g c ót h ể q u ả n l ý websitedễdànghơn.

 Sử dụng CSS sẽ giúp bạn không cần thực hiện lặp lại các mô tả chotừngthành phần Từ đó, bạn có thể tiết kiệm được tối đa thời gian làmviệc vớinó,làmcodengắn lạigiúpkiểmsoát dễdànghơncáclỗi khôngđáng có. CSS giúp người dùng nhiều styles trên một trang web HTML nên

khảnăngđiềuchỉnhtrangcủa bạntrởnênvôhạn.

 Nhờ CSS mà mã nguồn của trang Web sẽ được tổ chức gọn gàng hơn,trậttự hơn, nội dung trang web sẽ được tách bạch hơn trong việc định dạnghiển thị Từ đó, quá trìnhcập nhập nội dung sẽ dễ dàng hơn và có thể hạnchếtốithiểulàm rốichomãHTML.

 CSS tạo ra nhiều kiểu dáng nên có thể được áp dụng với nhiều trangweb,từđógiảm tránhviệclặplại các địnhdạngcủa cáctrangwebgiốngnhau.

2.2.3 JavaScript

Ngôn ngữ lập trình Javascript là một ngôn ngữ lập trình của Website,đượctích hợp và nhúng trong HTML làm cho website thêm phần sinh động, lôicuốnngười xem bới các chức năng đặc biệt Đây được xem là ngôn ngữ lậptrình dễhọc nhất Các hành vi trên web được javascript kiểm soát tốt hơn so vớiHTML.Cho đến nay, nó là ngôn ngữ ngăn xếp đầy đủ duy nhất với nhiều tínhnăng tuyệtvời, từ máy khách web đến máy chủ, máy tính để bàn đến thiết bị di động Nódựatrên ý tưởng tạomột ngônngữ thông dịch duynhất cho tấtc ả c á c t r ì n h duyệt để bạn có thểcải thiện khả năng tương tác với trang web của mình Nhờtính linh hoạt của nó,JavaScript mang lại nhiều lợi ích cho người dùng hiệntạiNhữngđịnhnghĩatrênchắchẵnphầnnàogiúpbạntrảlờiđượccâuhỏiJavascriptlàgìrồiđấy.

DướiđâylànhữnglýdomìnhnêndùngJavaScript(JS)tronglậptrìnhweb: JavaScript làngônngữdễhọc

 NóđượcpháttriểnbởiNetscape,vàđangđượcdùngtrên 92%webstie;

 JScóthểđượcgắnvàomộtelementcủatrangwebhoặcsựkiệncủatrangweb nhưcú clickchuột

 Hoạtđộng trênđa trìnhduyệt và đathiết bị Nhanh và nhẹhơncácngônngữlậptrìnhkhác Cóthểítantoànhơnvìđộphổbiếncủanó

 ChúngtacóthểthêmJavaScripttrựctiếpvàoHTMLhoặccóthểlưunótrên filesriêngbiệtvàgọilênkhicần.

2.2.4 PHP

Ngôn ngữ PHP là từ viết tắt của Personal Home Page (hiện nay làHypertextPreprocessor) Thuật ngữ này chỉ chuỗi ngôn ngữ kịch bản hay mãlệnh, phù hợpđểpháttriểnchocácứngdụngnằm trênmáychủ.

Khi viết phần mềm bằng ngôn ngữ PHP, chuỗi lệnh sẽ được xử lý trênserverđể từ đó sinh ra mã HTML trên client Và dựa vào đó, các ứng dụng trênwebsitecủabạnsẽhoạtđộngmộtcáchdễdàng.

Người ta thường sử dụng PHP trong việc xây dựng và phát triểncácứ n g dụng website chạy trên máy chủ Mã lệnh PHP có thể nhúng được vàotrangHTMLbằngcáchsửdụngcặpthẻPHP.

Nhờđó,website bạnpháttriểndễ dàngkếtnối đượcvớicácwebsite kháctrên hệthốngmạnginternet.

PHP cũng là ngôn ngữ lập trình mã nguồn mở và miễn phí PHP tươngthíchvới nhiềunềntảngkhác nhaunhưWindows,MacOSvàLinux,v.v.

2.2.4.1 HOẠTĐỘNGCỦAPHP

Vì PHP là ngôn ngữ của máy chủ nên mã lệnh của PHP sẽ tập trung trênmáychủ để phục vụ các trang web theo yêu cầu của người dùng thông qua trìnhduyệt Sơ đồ hoạt động củaPHP: Khi người dùng truy cập website viết bằngPHP, máy chủ đọc mã lệnhPHP và xử lí chúng theo các hướng dẫn được mãhóa Mã lệnh PHP yêu cầumáy chủ gửi một dữ liệu thích hợp (mã lệnh HTML)đến trình duyệt web Trìnhduyệt xem nó như là một trang HTML tiêu chuẩn.Như ta đã nói, PHP cũngchính là một trang HTML nhưng có nhúng mã PHP vàcó phần mở rộng làHTML Phần mở của PHP được đặt trong thẻ mở Khi trìnhduyệt truy cập vàomột trang PHP, Server sẽ đọc nội dung file PHP lên và lọc racác đoạn mã PHPvà thực thi các đoạn mã đó, lấy kết quả nhận được củađoạnmãPHPthaythếvàochỗbanđầucủachúngtrongfilePHP,cuốicùngServertrảvềkếtquảcuốicùnglà mộttrangnộidungHTMLvềchotrìnhduyệt.

2.2.4.2 Cấutrúc cơbản củangôn ngữPHP

CũngcóthểbắtđầuvàkếtthúcgiốngvớingônngữHTMLchỉkhác,đốivớiPHPchúngta cónhiềucách đểthểhiện.

Cúpháp chính<?php(câulệnhcủaPHP)?>;Vídụ:<?echo“Websitebánbônghoaonline”?>;

2.3 ThưviệnFramework2.3.1 Bootstrap

Bootstrap là một thư viện (framework) bao gồm 3 thành phần cơ bản, đólà:HTML, CSS và JavaScript Framework này được sử dụng để phát triểntrangweb chuẩn theo Responsive Sử dụng Bootstrap giúp việc thiết kế web tiếtkiệmnhiều thờigianvàđơngiảnhơn.

Bootstrap là một bộ sưu tập hoàn toàn miễn phí Bộ sưu tập này bao gồmcácmã nguồn mở và các công cụ giúp chúng ta có thể tạo thành một website vớiđầyđủ các thànhphần.

Tínhnăng của thưviệnBootstrap

 Chophépngườidùngtruycậpvàothưviện:ThưviệncủaBootstraprấtđa dạng với nhiều thành phần để người dùng dễ dàng thiết kế, tạo thànhgiao diện website Người dùngcó thể dễ dàng sử dụng font, typography,form,table,grid…đểthiếtkếmộtwebsitenhưmongmuốn.

 Cho phép tùy chỉnh Framework: Với Bootstrap mình có thể dễ dàngtùychỉnh Framework Sau đó tải Framework về về tùy chỉnh tại khungcủawebsiteđangđượcxâydựng.

 Táis ử d ụ n g : Chúngt a c ũ n g t h ể l ư u t r ữ v à s ử d ụ n g c á c t h à n h p h ầ n đã đượcthiếtkếchonhữngwebsite tiếptheo.

 Tích hợp Jquery:Bootstrap được tích hợp jQuery, giúp chúng ta tiếtkiệmrất nhiềuthời gianthiết kế,code vàlậptrình trangweb.