<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>---Mônh ọ c LẬPTRÌNHWEB</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

Mỗi dư án ln 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

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

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

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

<i>ChâuThành,KiênGiang,ngày18tháng11năm2022</i>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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 hồn tồ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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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.

<b>1.2. Mụcđíchchọnđềtài</b>

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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

<b>1.3. Cơng dụsửdụng</b>

Cácnhữngcơngcụ trongqtrì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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>2.1. Kháo sảt thực tế2.1.1. Chứcnăng</b>

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

<b>2.1.2. ucầubàitóa</b>

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>2.1.3. Khảosátwebsite</b>

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.

Q 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à thanhtố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ả.

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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

<b>2.1.4. Yêucầuđặtrachohệthống quảnlý</b>

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

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 q 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 tồn tuyệt đối những thơng tin liên quan đến khách hàng trongqtrình đặtmua haythanhtốn

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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

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 hồ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,…

<b>2.2.1.1. CấutrúcHTMLcủa website</b>

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

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

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

<b>2.2.1.2. Ưu điểmcủaHTML</b>

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 ngunhỗ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ở,hồntồ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,…)

<b>2.2.1.3. Nhược điểmcủaHTML</b>

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

<b>2.2.2. CSS</b>

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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…

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

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ểmsố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ừ đó, q 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.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>2.2.3. JavaScript</b>

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ểítantồ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.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>2.2.4. PHP</b>

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.

<b>2.2.4.1. HOẠTĐỘNGCỦAPHP</b>

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.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>2.2.4.2. Cấutrúc cơbản củangơn ngữPHP</b>

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”?>;

<b>2.3. ThưviệnFramework2.3.1. Bootstrap</b>

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 hồn tồ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.

<b>Tínhnăng của thưviệnBootstrap</b>

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

</div>