Thiết Kế Và Xây Dựng Website Bán Hàng Mỹ Phẩm - Tài Liệu Text

Có thể bạn quan tâm

Tải bản đầy đủ (.pdf) (80 trang)

Trang chủ

Luận Văn - Báo Cáo

Kinh tế - Quản lý

Thiết kế và xây dựng website bán hàng mỹ phẩm

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.64 MB, 80 trang )

VIỆN ĐẠI HỌC MỞ HÀ NỘIKHOA CÔNG NGHỆ ĐIỆN TỬ - VIỄN THÔNG---------ĐỒ ÁNTỐT NGHIỆP ĐẠI HỌCĐỀ TÀI: “THIẾT KẾ VÀ XÂY DỰNG WEBSITEBÁN HÀNG MỸ PHẨM”Giáo viên hướng dẫn:THS. QUÁCH THỊ HẠNHSinh viên thực hiện:NGUYỄN THỊ LOANLớp:K16AKhóa:2013 - 2017Hệ:ĐẠI HỌC CHÍNH QUYHà Nội, Tháng 5 năm 2017BÁO CÁO ĐỒ ÁN TỐT NGHIỆPVIỆN ĐẠI HỌC MỞ HÀ NỘICỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAMKHOA CN ĐIỆN TỬ - THÔNG TINĐộc lập - Tự do – Hạnh phúcĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌCHọ và tên sinh viên: Nguyễn Thị LoanLớp: K16AKhoá: 2013 - 2017Ngành đào tạo: Công nghệ Kỹ thuật điện tử, Truyền thôngHệ đào tạo: ĐHCQ1. Tên đề tài đồ án tốt nghiệp:“THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM”2. Nội dung chính-Cơ sở lý thuyết-Phân tích các chức năng của website-Thiết kế website-Tổng kết3. Cơ sở dữ liệu ban đầu4. Ngày giao: 20 /02/20175. Ngày nộp: 13/05/2017TRƯỞNG KHOAGIÁO VIÊN HƯỚNG DẪN(Ký, ghi rõ họ tên)(Ký, ghi rõ họ tên)GVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆPMỞ ĐẦUInternet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trởthành một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thôngtin trên toàn cầu. Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng chongười sử dụng: chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìmthì gần như lập tức... cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủthông tin, hình ảnh …Cùng với đó khi công nghệ ngày càng phát triển con người có trong tay công cụhữu hiệu làm tăng năng suất lao động và hiệu quả công việc chính vì vậy thương mạiđiện tử một trong những công cụ đó. Bill Gate đã từng nói: “Năm 2015, bạn có 2 lựachọn: một là kinh doanh cùng internet, 2 là bạn không kinh doanh nữa”. Thương mạiđiện tử đã trở thành một phương tiện giao dịch quen thuộc của các công ty thương mạilớn trên thế giới. Nó đang có tốc độ phát triển rất mạnh. Và hầu hết các công ty bánhàng hiện nay đều là các công ty thương mại điện tử và mua sắm qua mạng đã trởthành thói quen hàng ngày của nhiều người.Giờ đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sựphát triển của doanh nghiệp. Đối với một cửa hàng hay một công ty, việc quảng bá vàgiới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽlà cần thiết. Vậy phải quảng bá thế nào đó là xây dựng được một Website cho cửahàng của mình quảng bá tất cả các sản phẩm của mình bán.Để hiểu kỹ hơn về một website thương mại điện tử nên em chọn đề tài: “THIẾTKẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM”. Sử dụng ngôn ngữ PHP,HTML, MYSQL,CSS, JAVASCRIPT và công cụ hỗ trợ lập trình Dreamweaver vàphần mền Xampp.Nội dung bao đồ án gồm có 4 chương:Chương 1: Cơ sở lý thuyếtChương 2: Phân tích các chức năng của websiteChương 3: Thiết kế websiteChương 4: Tổng kếtGVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆPLỜI CẢM ƠNLời đầu tiên em xin chân thành kính gửi đến cô Ths.Quách Thị Hạnh lời cảm ơnchân thành và sâu sắc nhất. Em cảm ơn cô vì đã nhiệt tình, tận tinh chỉ bảo, hướng dẫnem trong suốt quá trình làm báo cáo thực tập.Em xin chân thành gửi lời cảm ơn đến toàn thể các thầy cô giáo trong Khoa Điệntử - Thông tin Trường Viện Đại Học Mở Hà Nội đã cung cấp cho em đầy đủ các kiếnthức về chuyên môn cũng như các kinh nghiệm trong cuộc sống hằng ngày trong suốtthời gian qua.Tuy nhiên, vì thời gian có hạn cũng như kiến thức và kinh nghiệm thực tiễn của emcòn nhiều hạn chế nên em không thể tránh khỏi những thiếu xót và cũng như chưa pháthuy hết những ý tưởng, khả năng hỗ trợ của ngôn ngữ và kỹ thuật lập trình vào đề tài.Trong quá trình xây dựng website, không thể tranh khỏi những sai xót. Vì thế, em rấtmong nhận được sự góp ý của các thầy cô và các bạn để đề tài của em được hoànchỉnh hơn.Một lần nữa em xin chân thành cảm ơn!SINH VIÊN THỰC HIỆNNguyễn Thị LoanGVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆPMỤC LỤCDANH MỤC BẢNGDANH MỤC HÌNHDANH SÁCH CÁC THUẬT NGỮ VIẾT TẮTCHƯƠNG 1: CƠ SỞ LÝ THUYẾT .................................................................. 1I. GIỚI THIỆU CHUNG................................................................................ 11. Khái niệm Website .................................................................................... 12. Tên miền (Domain) ................................................................................... 13. Hosting ...................................................................................................... 34. Mã nguồn (source code) ........................................................................... 55. Phân loại Website ..................................................................................... 5II. TÌM HIỂU VỀ CÁC NGÔN NGỮ LẬP TRÌNH WEB ............................ 71. Tìm hiểu về HTML ................................................................................... 72. Tìm hiểu về CSS ...................................................................................... 163. Tìm hiểu về Javascrip ............................................................................. 174. Tìm hiểu về ngôn ngữ lập trình PHP .................................................... 31III. HỆ CƠ SỞ DỮ LIỆU MYSQL .............................................................. 411. Các khái niệm cơ bản ............................................................................. 412. Các kiểu dữ liệu ...................................................................................... 413. Các lệnh thao tác với CSDL ................................................................... 434. Các câu lệnh truy vấn dữ liệu ................................................................ 455. Kết hợp PHP và MYSQL trong ứng dụng website ................................ 45IV. QUY TRÌNH THIẾT KẾ MỘT WEBSITE .......................................... 461. Quy trình thiết kế website ....................................................................... 462. Cách thức xuất bản website.................................................................... 473. Lựa chọn và mua tên miền ..................................................................... 474. Lựa chọn và thiết lập web server............................................................ 485. Upload website ........................................................................................ 486. Cập nhật và chỉnh sửa website ............................................................... 487. Quảng bá ................................................................................................. 48GVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆP8. Bảo trì ...................................................................................................... 49CHƯƠNG 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA WEB ....................... 50I. GIỚI THIỆU CHUNG VỀ WEBSITE ................................................................ 501. Mục tiêu ................................................................................................... 502. Yêu cầu .................................................................................................... 50II.CHỨC NĂNG WEBSITE .............................................................................. 511. Những chức năng cơ bản của website ................................................... 512. Sơ đồ phân cấp các chức năng............................................................... 52CHƯƠNG 3: THIẾT KẾ WEBSITE .............................................................. 58I. CÔNG CỤ HỖ TRỢ THIẾT KẾ WEBSITE ........................................................ 58II.THIẾT KẾ CƠ SƠ DỮ LIỆU ......................................................................... 591. Tạo cơ sở dữ liệu ..................................................................................... 592. Thiết kế giao diện .................................................................................... 61CHƯƠNG 4: TỔNG KẾT ................................................................................ 70TÀI LIỆU THAM KHẢO ................................................................................ 71GVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆPDANH MỤC BẢNGBảng 1: các thẻ nhóm inline ........................................................................................13Bảng 2: thuộc tính của thẻ <frameset> ......................................................................14Bảng 3: thuộc tính của thẻ <frame> ..........................................................................15Bảng 4: thuộc tính của thẻ <table> ............................................................................15Bảng 5: thuộc tính của thẻ <tr> .................................................................................16Bảng 6: thuộc tính của thẻ <td> .................................................................................16Bảng 7: các ký tự đặc biệt và ý nghĩa của trong javascript .....................................20Bảng 8: các thuộc tính của mảng ...............................................................................26Bảng 9: các thuộc tính của đối tượng math ..............................................................28Bảng 10: các phương thức của đối tượng math ........................................................28Bảng 11: các phương thức của đối tượng string .......................................................30Bảng 12: các nhóm phương thức của đối tượng date..............................................30Bảng 13: các kiểu dữ liệu số của mysql .....................................................................42Bảng 14: các kiểu dữ liệu string của mysql ...............................................................43Bảng 15: các kiểu dữ liệu ngày tháng của mysql ......................................................43Bảng 16: các thuộc tính của thẻ cột trong mysql ......................................................44GVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆPDANH MỤC HÌNHHình 1: cây phân cấp đối tượng .................................................................................27Hình 2: quá trình thông dịch trang php ....................................................................31Hình 3: sơ đồ luồng dữ liệu ngữ cảnh ........................................................................52Hình 4: sơ đồ phân cấp chức năng cho khách hàng .................................................53Hình 5: sơ đồ phân cấp chức năng của cho quản trị viên ........................................55Hình 6: kết nối các bảng trong cơ sở dữ liệu ............................................................59Hình 7: bảng danh mục sản phẩm .............................................................................59Hình 8: bảng sản phẩm ...............................................................................................60Hình 9: bảng thông tin và nội dung liên hệ của khách hàng gửi tới cửa hàng ......60Hình 10: bảng tin tức...................................................................................................60Hình 11: bảng đơn hàng..............................................................................................61Hình 12: bảng thông tin đăng kí của thành viên ......................................................61Hình 13: trang chủ.......................................................................................................62Hình 14: khi trang chủ cuộn lên .................................................................................62Hình 15: trang sản phẩm ............................................................................................63Hình 16: trang chi tiết sản phẩm................................................................................64Hình 17: trang giỏ hàng ..............................................................................................64Hình 18: trang đặt hàng ..............................................................................................65GVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆPDANH SÁCH CÁC THUẬT NGỮ VIẾT TẮTWWW ………………… World Wide WebHTTP ……………….... HyperText Transfer ProtocolHTTPS………………… Hypertext Transfer Protocol SecureHTML …………… ...HyperText Markup LanguageDHTML ………………... Dynamic HyperText Markup LanguageASP …………………..... Active Server Pages PerlCMS …………………. Content Management SystemCGI …………………… Common Gateway InterfaceXHTML ……………… Extensible Hypertext Markup LanguageURL ………………….. Unform Resource LocatorDNS …………………… Domain Name SystemPHP …………………… Hypertext PreprocessorCSDL ………………….. Cơ Sở Dữ LiệuCSS ……………………. Cascading Style SheetsSQL ………………... …. Structured Query LanguageGVHD: ThS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOANBÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾTCHƯƠNG 1: CƠ SỞ LÝ THUYẾTI.GIỚI THIỆU CHUNG1. Khái niệm WebsiteWebsite là một tập hợp các trang web bao gồm văn bản, hình ảnh, video, …. màthông thường nó chỉ nằm trong một tên miền hoặc tên miền phụ được quản lý trênWorld Wide Web(WWW) của internet. Một trang web bao gồm nhều tệp tin HTMLhoặc XHTML có thể truy nhập bằng giao thức HTTP, HTTPS.Website có thể được xây dựng từ các tệp tin HTML( trang mạng tĩnh) hoặc vậnhành bằng các CMS chạy trên máy chủ(trang mạng động). Website có thể được xâydựng bằng nhiều ngôn ngữ khác nhau (PHP,.NET, Java, Ruby and Rails,…).Hiện nay, để một Website có thể vận hành trên môi trường WWW,cần bắt buộcphải có 3 phần chính:-Tên miền (Domain)-Hosting-Mã nguồn (Source code)2. Tên miền (Domain)Tên miền chính là địa chỉ website, là một chuỗi các ký tự trong bảng Alphabetđược sắp xếp giống như tên riêng và có hoặc không có ý nghĩa.2.1. Cấu tạo của tên miềnTên miền bao gồm nhiều thành phần cấu tạo nên cách nhau bởi dấu (.).Ví dụ: abc.com.vn-Thành phần thứ nhất “abc” là tên miền của máy chủ-Thành phần thứ 2 “com” thường gọi là tên miền thứ 2(second domain namelevel) đối với các quốc gia noi chung tên miền mức 2 này do tổ chức quản lýcủa quốc gia đó định nghĩa, có thể định nghĩa khác đi nhiều hay ít.-Thành phần cuối cùng “vn” là tên miền ở múc cao nhất (top level domain ) baogồm các mã quốc gia của nước tham gia internet được quy định bằng 2 chữ cáitheo tiêu chuẩn ISO-3166 như Viêt Nam là VN, Mỹ là US,… và các linh vựcdùng chung.Dùng chung-COM: thương mại(COMmercial)GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN1BÁO CÁO ĐỒ ÁN TỐT NGHIỆP-NET: Mạng lưới (NETwork)-ORG : Các tổ chức(ORGnizations)-INFO: Thông tin(INFOmation)-EDU: Giáo dục(EDUcation)-MOBI: Điện thoại di độngCHƯƠNG 1: CƠ SỞ LÝ THUYẾTDùng ở Mỹ-MIL: Quân Sự (MILitary)-GOV: Nhà nước (GOVernment)2.2. Tính chất cơ bản của một tên miền-Tên miền là duy nhất và được cấp phát cho một chủ thể nào đăng ký trước.-Tên miền bắt buộc phải có phần tên và phần đuôi.-Tên miền không được vượt quá 63 (ký tự bao gồm cả phần đuôi ).-Tên miền chỉ bao gồm các ký tự trong bảng chữ cái (a-z) các số(0-9) và dấu(-).Khoảng trắng và các ký tự đặc biệt khác đêu không hợp lệ.-Không bắt đầu hoặc kết thúc tên miền bằng dấu (-).-Tên miền không cần bắt đầu bằng http:// hoặc www hay http://www.2.3.Một số khái niệm khác liên quan đến tên miền2.3.1. URLURL ( Unform Resource Locator ) được dùng để tham chiếu tới tài nguyên trênInternet. URL tạo nên khả năng siêu liên kết cho Website. Mỗi tài nguyên khác nhaulưu trữ trên internet được tham chiếu tới bằng địa chỉ, đó chính là URL.➢ Một URL gồm nhiều phần được liên kết với nhau:▪ URL scheme là tên giao thức ( ví dụ:http,ftp,…).▪ Tên miền ( abc.com.vn)▪ Chỉ định thêm cổng ví dụ: 80,8080,443,..(có thể không cần)▪ Đường dẫn tuyệt đối▪ Các truy vấn (có thể không cần)▪ Chỉ định mục con(có thể không cần)2.3.2. DNSDNS(Domain Name System) là một hệ thống cho phép thiết lập tương ứng giữađịa chỉ IP và tên miền trên Internet. Tức là khi gõ tên miền trên trình duyệt, một tênGVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN2BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾTmiền sẽ được của nó chuyển đến một địa chỉ IP và sẽ báo cho máy tính biết và tìm đếnwebsite.3. HostingHosting ( hay Web hosting) là không gian trên máy chủ dùng để chứa file, dữ liệu,nội dung của một website. Để hoat động, website cần được lưu trữ trên một máychủ(Server) kết nối mạng Internet và hoạt động 24/24h mỗi ngày.Có 3 loại hình web hosting thường được dùng :-Windows hosting: dựa và nền tảng hệ điều hành window của Microsoft-Linux hosting : dựa vào nền tảng hệ điều hành linux.-Email hosting3.1. Các loại hosting▪ Shared hosting (chia sẻ)Là một dịch vụ lưu trữ rất nhiều trang web trên một máy chủ kết nối Internet. Mỗitrang web được lưu trữ ở một phân vùng riêng của mình.▪ Free web hostingLà dịch vụ lưu trữ miễn phí. Thường được quảng cáo hỗ trợ. Free web hostingservice thường sẽ cung cấp một tên miền phụ hoặc một thư mục phụ. Ngược lại, dịchvụ này sẽ cung cấp một tên miền cấp thứ 2 cùng với các máy chủ. Nhiều máy chủmiễn phí sẽ không cho phép sử dụng nhiều tên miền riêng.▪ Reseller hostingLà một hình thức lưu trữ của máy chủ web mà chủ sở hữu tài khoản có khải năngsử dụng tài khoản của mình để phân bố lại ổ cứng lưu trữ và băng thông để lưu trữ cáctrang web này.▪ Email hostingLà dịch vụ thư điện tử đặc biệt khác với dịch vụ email miễn phí hỗ trợ email haywebmail miễn phí. Email hosting cho phép tùy chỉnh cấu hình và số lượng lớn tàikhoản.▪ Video hostingLà dich vụ lưu trữ cho phép các cá nhân tải lên các video vào một trang web. Sau đósẽ lưu trữ video trên máy chủ cho phép người khác có thể xem video.▪ Image hostingGVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN3BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾTLà dich vụ lưu trữ cho phép các cá nhân tải lên các hình ảnh vào một trang web. Sauđó sẽ lưu trữ hình ảnh đó trên máy chủ cho phép người khác có thể xem hình ảnh.▪ File hostingLà dịch vụ lưu trữ tập tin trực tuyến, để lưu trữ các nội dung tĩnh. Cho phép truy cậpqua giao thức FPT được tối ưu hóa phụ vụ cho nhiều người sử dụng.▪ Windows hostingLà dịch vụ lưu trữ rất nhiều các trang web trên một máy chủ chạy hệ điều hànhWindow server kết nối internet. Mỗi trang web có phân vùng riêng của mình thườngsử dụng các phần mềm chia hosting như hosting controller, plesk.▪ Linux hostingLà dịch vụ lưu trữ rất nhiều các trang web trên một máy chủ chạy hệ điều hànhLinux kết nối Internet. Mỗi trang web có phân vùng riêng của mình thường sử dụngcác phần mền chia hosting như Cpanel, Direct Admin.▪ VPS hosting (Virtual Private Server – máy chủ riêng ảo)Là một phương pháp phân vùng một máy chủ vậy lý thành máy tính nhiều máychủ ảo, trên mỗi máy ảo được cài một hệ điều hành như một máy chủ thật.▪ Dedicated server (máy chủ riêng)Là máy chủ vật lý dành riêng cho việc lưu trữ website.▪ Adult hosting3.2.Các tính năng của hosting-Tốc độ: một máy chủ chạy dich vụ web cần phải có cấu hình đủ lớn để đảm bảosử lý thông suốt, phục vụ cho số lượng lớn người truy cập. phải có đườngtruyền kết nối tốc độ cao để đảm bảo không bị nghẽn mạch dữ liệu.-Dung lượng: Dung lượng của hosting là khoảng không gian bạn được phép lưutrữ dữ liệu trên ổ cứng của máy chủ. Để lưu trữ được đầy đủ các thông tin, dữliệu, hình ảnh,.. của website Hosting cần phải có dung lượng đủ lớn (một vàiGB).-Băng thông: Băng thông của hosting là lượng dữ liệu trao đổi giữa web vớingười dùng trong 1 tháng. Nó phải đủ lớn để phục vụ các hoạt động giao dịch,trao đổi thông tin giữa web với người sử dụng.-Phải hỗ trợ truy xuất máy chủ bằng giao túc FTP để truy cập thông tin.GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN4BÁO CÁO ĐỒ ÁN TỐT NGHIỆP-CHƯƠNG 1: CƠ SỞ LÝ THUYẾTHỗ trợ các ngôn ngữ lập trình, cơ sở dữ liệu hoặc các công cụ có sẵn để phụccác hoạt động trên web.-Có giao diện quản lý để dễ dàng quản lý, cac tài khoản FTP, Email,…-Phải thường xuyên được chăm sóc, bảo dưỡng nhằm tránh các rủi ro và khắcphục kịp thời.4. Mã nguồn (source code)Website cần được lập trình để hiện thị hoặc xử lý thông tin cho người dùng. Việclập trình sẽ sử dụng các câu lệnh, truy xuất CSDL, xử lý và hiển thị cho người dùngtrên trình duyệt. Tập hợp những câu lệnh này được gọi là mã nguồn (source code).Có rất nhiều ngôn ngữ lập trình được sử dụng để lập trình website. Phổ biến nhấtmà chúng ta thường gặp là: HTML/CSS, PHP, ASP, ASP.NET. Trong đó HTML/CSSlà 2 ngôn ngữ cơ bản tạo nên giao diện của một website, nó có thể tạo ra các trang webtĩnh. Các ngôn ngữ còn lại thường dùng để lập trình kết nối CSDL và xử lý các yêucầu cao hơn; Cần phải kết hợp với HTML/CSS, và thường đi kèm cả với Javascript đểtạo ra giao diện người dùng (frontend).Từ các ngôn ngữ lập trình cơ bản trên, hình thành các Framework với nhiều thư viênđược xây dựng sẵn. Các Frameword giúp người lập trình tiết kiệm nhiều thời giantrong việc xây dựng website. Các PHP Framework phổ biến gồm: CodeIgniter,CakePHP, Yii Framework, Zend Framework,…5. Phân loại WebsiteCó 2 loại website : - Website tĩnh-Website động5.1. Website tĩnhWebsite tĩnh là những web chỉ bao gồm các trang web tĩnh và không có cơ sở dữliệu đi kèm. Tức là người dùng không có khả năng tương tác, không thể chỉnh sửahoặc thay đổi dữ liệu được.-Web tĩnh thường được xây dựng từ CSS, HTML, Javascript(DHTML Dynamic HTML),..-Dùng để thiết kế các trang web có nội dung ít cần thay đổi và cập nhật.-Nó chỉ bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi kèm.GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN5BÁO CÁO ĐỒ ÁN TỐT NGHIỆP-CHƯƠNG 1: CƠ SỞ LÝ THUYẾTWeb tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làmquen với môi trường internet.Ưu điểm:-Thiết kế đồ họa đẹp:-Tốc độ truy cập nhanh:-Thân thiện hơn với máy tìm kiếm-Chi phí đầu tư thấp:Nhược điểm:-Khó khăn trong việc thay đổi và cập nhật thông tin-Khó nâng cấp bảo trì-Mỗi khi thay đổi phải vào file HTML,CSS hoặc Javascrip để chỉnh sửa.5.2. Website độngWebsite động là web có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát triểnweb. thống qhuản lý nội dung nên người dùng có thể chỉnh sửa hoặc thay đổi nộidung được.Thông tin hiển thị ở web động được gọi là một cơ sở dữ liệu khi người dùng truyvấn tới một trang web.Web động được phát triển bằng các ngôn ngữ lập trình PHP, ASP, ASP.NET, Java,CGI, Perl, và sử dụng các cơ sở dữ liệu như Access, My SQL, MS SQL, Oracle, DB2.Ưu điểm:-Dễ dàng quản lý nội dung-Dễ dàng nâng cấp và bảo trì-Tương tác với người sử dụng cao-Có thể xây dựng được web lớn-Hiện nay vẫn SEO tốt bởi ta có thể sử dụng chúc năng Rewrite URL để chuyênURL thân thiện.Nhược điểm:-Chi phí xây dựng cao.-Khi web lớn cần nhiều người để quản lý.GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN6BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾTII. TÌM HIỂU VỀ CÁC NGÔN NGỮ LẬP TRÌNH WEBWebsite thương mại là một trang web động với mã nguồn được viết bằng cácngôn ngữ PHP,ASP.NET, HTML,….và trang web đó có kết nối hệ cơ sở dữ liệu, cóthể cập nhật dữ liệu, truy xuất dữ liệu thường xuyên.Để thiết kế một website hoàn chỉnh nó được hình thành bởi :-HTML: Xây dựng cấu trúc và định dạng siêu văn bản.-CSS: Định dạng các siêu văn bản được tạo ra từ HTML ở dạng thô thành mộtbố cục website, có màu sắc có ảnh, ….-Javascript: Tạo ra các sự kiện tương tác với hành vi của người dùng-PHP: Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trìnhduyệt. Là ngôn ngữ lập trình được dùng phổ biến ngoài ra còn một số ngôn ngữnhư ASP, ASP.NET, Java, CGI, Perl, ….MySQL: Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc.-1. Tìm hiểu về HTMLHTML( Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản đượcthiết kế ra để tạo nên các trang web. Dùng để định dạng bố cục, các thuộc tính liênquan đến cách hiển thị của một trang. Là một tập hợp các thẻ đánh dấu.Các lênh HTML được gọi là các thẻ. Các thẻ này được dùng để điều khiển nội dungvà hình thúc trình bày của tài liệu HTML. Để bắt đầu một câu lênh ta dùng thẻ mở“” và kết thúc câu lệnh dùng thẻ đóng “</>”.Thẻ HTML gồm:<element attribute =value>Với :-element : để nhận dạng thẻ.-Attribute : để mô tả thẻ.-Value : giá trị được thiết lập cho thuộc tính1.1.Các thuộc tính của thẻ HTMLThuộc tính của tác động lên nội dung của văn bản. Được sử dụng để xác định đặctrưng của một phần tử HTML.-Một phần tử HTML có thể không có hoặc có nhiều thuộc tính.GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN7BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾT-Thuộc tính luôn luôn được chỉ định trong thẻ mở.-Thuộc tính của một phần tử HTML gồm 2 thành phần:• Tên: là tên của thuộc tính• Giá trị: là những gì mà bạn muốn gán cho thuộc tính và được đặt trongcác trích dẫn.Tên và giá trị của thuộc tính không phân biệt chữ hoa hay chữ thường.-Quy tắc viết thuộc tính:<tên thẻ tên thuộc tính=“giá trị”> Nội dung </tên thẻ>Các thuộc tính cơ bản có thể sử dụng trong bất kì phần tử nào của HTML:Thuộc tính idQuy định một định dạng duy nhất cho một thẻ HTML. Phải tuân theo luật:• Phải chứa ít nhất 1 kí tự• Không có khoảng trắng• Không phân biệt chữ hoa và chữ thường.Cú pháp:<tên thẻ id= “tên id”> </tên thẻ>Thuộc tính titleThuộc tính title chỉ định thông tin thêm về thẻ, thường được hiển thị khi di chuyển quaphần tử đó, nó thường hiển thị dưới dạng tooktip text.Cú pháp:<tên thẻ title= “thông tin thêm”>Thuộc tính styleĐể trang trí nội dung hiển thị ngay trên thẻ. các tên các class.Cú pháp :<tên thẻ style= “ định nghĩa các kiểu trang trí”>Thuộc tính classThuộc tính class cho phép sử dụng một hay nhiều class trên một thẻ. Sử dụng dấu cáchđể phân cách giữa các tên các class. Phải tuân theo luật:• Bắt đầu với kí tự chữ không phân biệt hoa hay thường.• Bao gồm ký tự(a-z,A-Z), số(0-9), gạch ngang (-) và gạchdưới(_).Cú pháp:<tên thẻ class= “tên>GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN8BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾT1.2. Cấu trúc cơ bản của HTMLCấu trúc của HTML có dạng như sau, gồm 3 phần:-<!Doctype>: phần khai báo chuẩn của html.-<head></head>: phần đầu của html, khai báo về meta, title, css, javascript,..-<body></body>: phần thân chứa nội dung của trang web.1.3. Các thẻ định dạng cấu trúc tài liệuThẻ htmlMột tài liệu HTML luôn được bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ</html>. Toàn bộ nội dung của tài liệu sẽ được đặt giữa cặp thẻ này.Có cú pháp như sau:<html>Toàn bộ nội dung của tài liệu</html>Trình duyệt sẽ xem các tài liệu không sử dụng cặp thẻ này như một tệp văn bản binhthường.Thẻ headThẻ head được dùng để xác định cho phần mở đầu của tài liệu.Có cú pháp như sau:<head>Phần mở đầu của tài liệu</head>Thẻ titleCặp thẻ này chỉ được sử dụng trong phần mở đầu của tài liệu. là tên của trang webđược hiển thị phai trên cùng của menubar.Có cú pháp như sau:<head><title> Tiêu đề của tài liệu</title></head>Thẻ bodyThẻ body hay chính là phần thân của tài liệu. trong phần thân có thể chứa cácthông tin định dạng nhất định để đặt ảnh cho tài liệu màu nền, màu văn bản siêuGVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN9BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾTliên kết, đặt lề cho trang tài liệu … những thông tin này được đặt trong phần thamsố của thẻ.Có cú pháp như sau: <body>Phần thân của văn bản</body>Như vậy, cấu trúc cơ bản của html là:<!Doctype><html><head><title> Tiêu đề của tài liệu</title></head><body>Phần nội dung của tài liệu</body></html>1.4. Nhóm các thẻ blockCác thẻ block là các thẻ dùng để sắp xếp bố cục cho trang web.Thẻ PThẻ

dùng để định dạng một đoạn văn bản. Thẻ này giúp trình duyệt xác địnhđoạn văn bản trong trang HTML.

Nội dụng đoạn văn bản

Các thẻ định dạng tiêu đề-Thường được sử dụng để thể hiện cho tiêu đề của bài viết, bản tin hay các muccần nhấn mạnh.-Bao gồm các thẻ từ đến

-Font chữ của nội dung trong các thẻ giảm từ đến

. Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN10BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾT

Tiêu đề 5

Tiêu đề 6

Thẻ div (division – phân chia)Thẻ div để phân chia khu vực hay vùng, giúp cho trình duyệt hiểu rõ những vùng đượcbố cục trên trang web.<div> </div>Thẻ xác định danh sáchSử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sử dụngcho danh sách không có phần nội dung mô tả. gồm có 3 thẻ:-<dl></dl>: (definition list) có nghĩa là xác định danh sách.-<dt></dt>: (defines an item) có nghĩa là xác định một mục.-<dd></dd>: (defines describe an item) có nghĩa là xác định một mô tả của mộtmục.3 thẻ nay phải luôn tồn tại cùng nhau không thể thiếu 1 trong 3 thẻ.Có cấu trúc như sau:<dl><dt></dt><dd></dd></dl>Thẻ danh sách có thứ tự và không có thứ tự• Danh sách có thứ tựDùng 2 cặp thẻ:▪ <ol></ol>: (ordered list) là danh sách có thứ tự.▪ <li></li>: (list item) là các mục của danh sách.Cấu trúc :<ol><li></li></ol>• Danh sách không có thứ tựDùng 2 cặp thẻ:▪ <ul></ul>: (unordered list) là danh sách không có thứ tự.GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN11BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾT▪ <li></li>: (list item) là các mục của danh sách .Cấu trúc:<ul><li></li></ul>1.5. Nhóm các thẻ inline• Nhóm các thẻ inline chỉ chứa nội dung cho text hoặc các thẻ inline khác, đểhiển thị nội dung của văn bản.• Nhóm thẻ inline nên được bao ngoài bởi nhóm các thẻ block.• Những thẻ trong nhóm này có thể được lồng vào nhau.• Không được sử dụng các thẻ khác bên trong các thẻ inline.ThẻMô tả<a></a>Thẻ dùng để tạo một liên kết từ tràn web này sang trangweb khác, từ vị trí này sang vị trí khác hay dùng để mởmột Project nào đó như word, Excel,… có một thuộc tínhbắt buộc : href được dùng để chỉ địa chỉ hay URL của tàiliệu hoặc file liên kết.Cú pháp:<a href = “link liên kết”> Hypertext</a><img/>Dùng để nhúng một ảnh thông qua thuộc tính src, thẻ có 2thuộc tính bắt buộc :- src: chứa đường dẫn tham chiếu tới image-alt được sử dụng như một văn bản thay thế khi imagekhông hiển thị<b></b>In đậm<big></big>Tăng kích cỡ phông chữ<code></code>Dùng để định dạng chữ hiện giống như mã của máy tính<font></font>Quy định giao diện, kích cỡ, màu sắc cho chữ<s></s>Dùng để gạch bỏ một đoạn văn bản<small></small>Hiển thị một đoạn text nhỏGVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN12BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾT<strong></strong>Nhấn mạnh<textarea></textarea>Dừng để nhập nhiều dòng văn bản<var></var>Định nghĩa một biến<abbr></abbr>Dùng để mô tả mộ cum từ viết tắt<basefont></basefont>Định dạng kích cỡ màu sắc font cho toan bộ text trong vănbảnXuống dòng trong một đoạn văn<dfn></dfn>Dùng để mơ tả một thuật ngữ<em></em>Nhấn mạnh theo kiểu chữ nghiêng<sub></sub>Hiển thị text lệch bên dưới<sup></sup>Hiển thị text lệch bên trên<span></span>Dùng để nhóm một hay nhiều thẻ thuộc nhóm inline khácnhau, nó không có ý nghĩa về mặt hiển thị, chỉ hỗ trợ địnhdạng các inline thông qua CSS và javascript.<cite></cite>Dùng để trích dẫn một câu nào đó<del></del>Xác định vă bản bị gạch ngang<input></input>Dùng cho người nhập thông tin hay chon thông tin, có cácthuộc tính như text, checkbox, password,…<i></i>Kiểu chữ in nghiêng<tt></tt>Xác định văn bản kiểu máy<label></label>Định nghĩa cho thẻ <input><q></q>Định nghĩa một đoạn trích dẫn ngắn<samp></samp>Định nghĩa văn bản ngôn ngữ lập trình mẫu<select></select>Tạo một danh sách lựa chọn<bdo></bdo>dùng để ghi đè lên dòng chữ hiện tại, có thuộc tính dir<acronym></acronym> Để chỉ một tên lược danhBảng 1: Các thẻ nhóm Inline1.6.Thẻ <form >Thẻ form dùng để tạo một form trong HTML. Để thu thập thông tin từ người sửdụng như email, tên ,tuổi,….GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN13BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾTCú pháp: <form action= “Script URL” method= “GET|POST”>Các phần tử font, như input,textarea,…</form>Các thuộc tính-Action: ứng dụng quản trị backend sẵn sàng sử lý từ dữ liệu người dùng.-Method: phương thức truyền tải dữ liệu.thường sử dụng GET và POST.-Accept: Thuộc tính này xác định danh sách các kiểu MIME được máy chủ nhậnra, trong đó có chứa kịch bản (script) để xử lý biểu mẫu.Cú pháp: ACCEPT = “Internet media type”1.7.FrameTrong HTML được sử dụng để phân chia cửa sổ trình duyệt thành các khu vựckhác nhau, mỗi khu vực tải một tài liệu HTML riêng. Một tập hợp các Frame trongcửa sổ trình duyệt được biết đến như là một Frameset.Thẻ <frameset> xác định cách chia cửa sổ thành các Framet thay thế cho thẻ chobody. Thuộc tính rows trong thẻ này xác định chiều ngang của Frame, thuộc tính colsxác định chiều dọc của Frame. Mỗi Frame được chỉ dẫn bởi một thẻ <frameset> và nóxác định tài liệu nào sẽ được mở trong Frame.Thuộc tính của thẻ <frameset>Thuộc tínhMô tảColsXác định số cột được chứa trong frameset và kích cỡ mỗi cộtRowsXác định số hàng được chứa trong frameset và kích cỡ mỗihàngBorder(đườngXác định độ rộng border của mỗi frameviền)FrameborderXác định border có được hiển thị giữa các frame hay khôngFramespacingXác định khoảng cách giữa các frame trong framesetBảng 2: thuộc tính của thẻ <frameset>Thuộc tính của thẻ <frame>Thuộc tínhSrcMô tảFile dược tải lênGVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN14BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾTNameTên của frameMarginwidthxác định độ rộng của khoảng cách giữa bên trái và phải của BorderFrame với nội dung trong Frame. Giá trị là pixel.Marginheight xác định chiều cao của khoảng cách giữa trên và dưới của BorderFrame và nội dung của nó. Giá trị là pixel.Noresizengăn cản người sử dụng đặt lại kích cỡ.Sorcllingđiều khiển sự xuất hiện của thanh cuốn xuất hiện trên Frame. Nó nhậngiá trị "yes", "no", hoặc "auto".Longdesccho phép cung cấp một đường link tới trang web khác chứa một sựmiêu tả dài trong nội dung của Frame.Bảng 3: Thuộc tính của thẻ <frame>1.8.Thẻ <table>Thẻ <table> dùng để tạo bảng. Thẻ <tr> được sử dụng để tạo các hàng và thẻ<td> được sử dụng để tạo các ô.1.8.1. Thuộc tính của thẻ<table>Thuộc tínhMô tảBgcolorĐịnh màu nề trên bảngBorderĐịnh màu cho đường viềnBordercolordark Định màu sẫm cho phần bóng của đường viềnBordercolorlight Định màu sẫm cho phần sáng hơn của đường viềnCellpaddingĐịnh rõ khoảng cách giữa nội dung và đường viền.FrameHienr thị đường viền ngoàiHeightXác định chiều cao của bảngRulesHiển thị đường viền trong bảngWidthXác định chiều rộng của bảngBảng 4: Thuộc tính của thẻ <table>GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN15BÁO CÁO ĐỒ ÁN TỐT NGHIỆPCHƯƠNG 1: CƠ SỞ LÝ THUYẾT1.8.2. Thuộc tính của thẻ<tr>Thuộc tínhMô tảAlign,VlignCăn chỉnh nội dung theo chiều ngang và dọcBgcolorXác định màu nềnBảng 5: Thuộc tính của thẻ <tr>Thuộc tính của thẻ <td>Thuộc tínhMô tảAlign, vlignCăn chỉnh nội dung theo chiều ngang và dọcBordorMở rộng ô qua nhiều cộtColspanĐịnh màu sẫm cho phần bóng của đường viềnNowrapGiữ cho nội dung ô nằm trên một dòng.RowspanKéo dài ô xuống nhiều hàngWidth, heighĐịnh rõ kích thước ôBảng 6: Thuộc tính của thẻ <td>1.9.Chèn âm thanhCú pháp:1.10. Chèn videoSử dụng thẻ <embed >Cú pháp: <embed scr= “file.avi(asf,.ram…)” thuộc tính >2. Tìm hiểu về CSSCSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng tìm và định dạng lạicác phần tử được tạo bởi các ngôn ngữ đánh dấu (ví dụ như HTML). CSS là ngôn ngữgiúp trình duyệt hiểu được các định dạng và bố cục cho trang web, trình bày cho cácthẻ HTML như màu chữ, font chữ, chiều cao chiều rộng cho thẻ HTML,…GVHD: THS. QUÁCH THỊ HẠNHSVTH: NGUYỄN THỊ LOAN16

Tài liệu liên quan

Thiết kế và xây dựng website kinh doanh máy tính
- 34
- 978
- 2
Tìm hiểu asp net và xây dựng website bán hàng
- 35
- 632
- 0
Thiết kế và xây dựng website cho ngân hàng thương mại cổ phần ngoại thương việt nam
- 54
- 341
- 0
Tìm hiểu về ASP net và xây dựng website bán hàng
- 37
- 716
- 0
Thiết kế và xây dựng website mimes restaurant
- 110
- 288
- 0
Thiết kế và cài đặt website bán hàng trực tuyến
- 19
- 435
- 1
thuyết trình đồ án thiết kế và xây dựng website thương mại điện tử
- 68
- 1
- 1
TÌM HIỂU CÔNG NGHỆ o3d ỨNG DỤNG THIẾT kế và xây DỰNG WEBSITE 3d
- 14
- 344
- 1
Báo cáo thực tập nghiên cứu và xây dựng website bán hàng bằng opencart
- 50
- 777
- 1
thiết kế và xây dựng website âm nhạc
- 59
- 691
- 0