Xây dựng website bán nồi cơm Điện

MỞ ĐẦUTrong nhiều năm trở lại đây, trên thế giới nói chung và ở Việt Namnói riêng, công nghệ thông tin đã và đang đóng vai trò vô cùng quan trọngtrong việc có những bước tiến vượt bậc, n

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:

XÂY DỰNG WEBSITE BÁN NỒI CƠM ĐIỆN

Sinh viên thực hiện : NGUYỄN XUÂN MẠNH

: ĐỖ TUẤN MINH Giảng viên hướng dẫn : HO NG THANH TÙNG

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

Mục Lục

LIỆT KÊ CHỮ VIẾT TẮT

MỞ ĐẦU

CHƯƠNG I :KHÁI NIỆM V TỔNG QUẢN VỀ ĐỀ T I

KHÁI NIỆM:

1.1.1 INTERNET:

1.1.2 World Wide Web:

1.1.3 HTML:

1.1.4 CSS:

1.1.5 JavaScript:

1.1.6 Tên đề tài:

1.1.7 Lý do chọn đề tài:

1.1.8 Mục tiêu của đề tài:

1.1.9 Chức năng website:

Chương II : THIẾT KẾ BỐ CỤC WEBSITE

CHƯƠNG III :KẾT QUẢ WEBSITE

KẾT LUẬN

T I LIỆU THAM KHẢO

LIỆT KÊ CHỮ VIẾT TẮT

IP Internet Protocol

TCP Transmission Control Protocol

CERN Conseil Européen pour la Recherche Nucléaire

HTML HyperText Markup Language

CSS Cascading Style Sheets

URL Uniform Resource Locator

XHTML Extensible HyperText Markup Language

XML Extensible Markup Language

SVG Scalable Vector Graphics

XUL XML User Interface Language

W3C World Wide Web Consortium

ID identification

IE Internet Explorer

DOM Document Object Model

ECMAScript European Computer Manufacturers Association

MỞ ĐẦU

Trong nhiều năm trở lại đây, trên thế giới nói chung và ở Việt Namnói riêng, công nghệ thông tin đã và đang đóng vai trò vô cùng quan trọngtrong việc có những bước tiến vượt bậc, những thành tựu to lớn trong việcphát triển kinh tế, nâng cao đời sống vật chất và tinh thần của con người.Những kết quả, thành tựu đạt được đã thúc đẩy sự đột phá của công nghệthông tin ứng dụng vào cuộc sống nhằm phát triển nhanh và mạnh hơn nữa,

xử lý được nhiều công việc thủ công trước đây, giúp giảm đáng kể côngsức, thời gian và tài nguyên, hoàn thành công việc nhanh chóng và chínhxác

Ở nước ta hiện nay, việc xây dựng các trang web để phục vụ cho cácnhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân, ngày nay,không lấy gì làm xa lạ Thông qua những website này, thông tin các mặthàng sản phẩm, dịch vụ của công ty sẽ đến với những với khách hàng của

họ một cách nhanh chóng, tránh những phiền phức mà phương thức giaotiếp truyền thống thường gặp phải

Và chính vì thế, xuất phát từ nhu cầu thực tế trên, chúng em xin thựchiện báo cáo với đề tài “Thiết kế hệ thống website bán nồi cơm điện”

Do trình độ chuyên môn chưa có, kinh nghiệm và kiến thức củabản thân còn hạn chế, chúng em rất mong nếu có sự thiếu xót mong thầy

cô góp ý và bỏ qua cho chúng em

Chúng em xin chân thành cảm ơn!

Nguồn gốc của Internet bắt nguồn từ sự phát triển của chuyển mạch gói vànghiên cứu do Bộ Quốc Phòng Hoa Kỳ ủy quyền thực hiện vào những năm 1960 đểcho phép chia sẻ thời gian của máy tính Mạng tiền thân chính, ARPANET, ban đầuđóng vai trò là xương sống để kết nối các mạng lưới học thuật và quân sự khu vựctrong những năm 1970 Việc tài trợ cho Mạng lưới quỹ khoa học quốc gia như mộtxương sống mới trong những năm 1980, cũng như tài trợ tư nhân cho các phần mởrộng thương mại khác, dẫn đến sự tham gia trên toàn thế giới trong việc phát triển cáccông nghệ mạng mới và sáp nhập nhiều mạng Sự liên kết của các mạng thương mại

và doanh nghiệp vào đầu những năm 1990 đã đánh dấu sự khởi đầu của quá trìnhchuyển đổi sang Internet hiện đại, và tạo ra sự tăng trưởng theo cấp số nhân khi cácthế hệ máy tính, cá nhân và di động được kết nối với mạng Mặc dù Internet được sửdụng rộng rãi bởi các học viện trong những năm 1980, việc thương mại hóa Internet

đã kết hợp các dịch vụ và công nghệ của nó vào hầu hết mọi khía cạnh của cuộc sốnghiện đại

*Phân loại:

Các máy tính trên mạng được chia làm 2 nhóm Client và Server

- Client: Máy khách trên mạng, chứa các chương trình Client

- Server: Máy phục vụ-Máy chủ Chứa các chương trình Server, tàinguyên (tập tin, tài liệu ) dùng chung cho nhiều máy khách Serverluôn ở trạng thái chờ yêu cầu và đáp ứng yêu cầu của Client

- Internet Server: Là những server cung cấp các dịch vụ Internet nhưWeb Server, Mail Server, FPT Server…

Các dịch vụ thường dùng trên Internet

- Dịch vụ World Wide Web (gọi tắt là Web)

- Dịch vụ Electronic Mail (viết tắt là Email)

- Dịch vụ FPT

Để truyền thông với những máy tính khác, mọi máy tính trên Internetphải hỗ trợ giao thức chung TCP/IP (Transmission Control Protocol/InternetProtocol- là giao thức điều khiển truyền dữ liệu và giao thức Internet), là mộtgiao thức đồng bộ, cho truyền thông điệp từ nhiều nguồn và tới nhiều đích khácnhau Ví dụ có thể vừ lấy thư từ trong hộp thư, đồng thời vừa truy cập trangWeb TCP đảm bảo tính an toàn dữ liệu, IP là giao thức chi phối phương thứcvận chuyển dữ liệu trên Internet

1.1.2 World Wide Web:

World Wide Web, gọi tắt là WWW, mạng lưới toàn cầu là

một không gian thông tin toàn cầu mà mọi người có thể truy cập (đọc và viết)thông tin qua các thiết bị kết nối với mạng Internet; một hệ thống thông tin trênInternet cho phép các tài liệu được kết nối với các tài liệu khác bằng các liênkết siêu văn bản, cho phép người dùng tìm kiếm thông tin bằng cách di chuyển

từ tài liệu này sang tài liệu khác Thuật ngữ này thường được hiểu nhầm là từđồng nghĩa với chính thuật ngữ Internet Nhưng Web thực ra chỉ là một trongcác dịch vụ chạy trên Internet, ngoài Web ra còn các dịch vụ khác như thư điện

tử hoặc FTP

Nhà khoa học người Anh Tim Berners-Lee được cho là đã phát minh

ra world wide web khi làm việc cho CERN vào tháng 3 năm 1989 bằng cáchgửi Quản lý thông tin : “Đề Xuất và viết trình duyệt web đầu tiên vào năm

1990 Trình duyệt được phát hành bên ngoài CERN năm 1991 , lần đầu tiêncho các tổ chức nghiên cứu khác bắt đầu vào tháng 1 năm 1991 và côngchúng trên Internet vào tháng 8 năm 1991 World Wide Web là trung tâmcho sự phát triển của Thời Đại Thông Tin và là công cụ chính mà hang tỷngười sử dụng để tương tác trên Internet

*Cách tạo trang web:

Có nhiều cách để tạo trang Web:

- Có thể tạo trang Web trên bất kì chương trình xử lí văn bản nào

- Tạo Web bằng cách viết mã nguồn bởi một trình soạn thảo văn bảnnhư: Notepad, WordPad…là những chương trình soạn thảo văn bản

Để xây dựng một ứng dụng Web hoàn chỉnh và có tính thương mại, bạncần kết hợp cả Client Script (kịch bản trình khách) và Server Script (kịch bảntrên trình chủ) với một loại cơ sở dữ liệu nào đó, chẳng hạn như: MS Access,SQL Server, MySQL, Oracle,

Khi bạn muốn triển khai ứng dụng Web trên mạng, ngoài các điều kiện

về cấu hình phần cứng, bạn cần có trình chủ Web thường gọi là Web Server

*Phân loại web:

- Website tĩnh:

Tài liệu được phân phát rất đơn giản từ hệ thống file của Server

Định dạng các trang web tĩnh là các siêu liên kết, các trang định dạngText, các hình ảnh đơn giản.

Ưu điểm : CSDL nhỏ nên việc phân phát dữ liệu có hiệu quả rõ ràng,Server có thể đáp ứng nhu cầu Client một cách nhanh chóng Ta nên sử dụngWeb tĩnh khi không thay đổi thông tin trên đó

Nhược điểm : Không đáp ứng được yêu cầu phức tạp của người sử dụng,không linh hoat

Hoạt động của trang Web tĩnh được thể hiện như sau:

Server gửi lại

-Website động:

Về cơ bản nội dung của trang Web động như một trang Web tĩnh, ngoài

ra nó còn có thể thao tác với CSDL để đáp ứng nhu cầu phức tập của một trangWeb Sau khi nhận được yêu cầu từ Web Client, chẳng hạn như một truy vấn

từ một CSDL đặt trên Server, ứng dụng Internet Server sẽ truy vấn CSDL này,tạo một trang HTML chứa kết quả truy vấn rồi gửi trả cho người dùng.Hoạt động của Web động:

1.1.3.HTML:

HTML là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánhdấu được thiết kế ra để tạo nên các trang web trên World Wide Web Nó cóthể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bảngiống như JavaScript Các trình duyệt web nhận tài liệu HTML từ một webserver hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang web

đa phương tiện HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa

và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu Cácphần tử HTML là các khối xây dựng của các trang HTML Với cấu trúcHTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể đượcnhúng vào trang được hiển thị

HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng cáchbiểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists,links, quotes và các mục khác Các trình duyệt không hiển thị các thẻHTML, nhưng sử dụng chúng để diễn giải nội dung của trang

*Cấu trúc chung của một trang HTML:

1 Thẻ <head> </head>: Tạo đầu mục trang

2 Thẻ <title> </title>: Tạo tiêu đề trang trên thanh tiêu đề, đây là thẻbắt buộc Thẻ title cho phép bạn trình bày chuỗi trên thanh tựa đề của trangWeb mỗi khi trang Web đó được duyệt trên trình duyệt Web

3.Thẻ <body> </body>: Tất cả các thông tin khai báo trong thẻ <body>đều có thể xuất hiện trên trang Web Những thông tin này có thể nhìnthấy trên trang Web.

4.Các thẻ định dạng khác Thẻ <p>…</p>:Tạo một đoạn mới Thẻ

<font> </font>: Thay đổi phông chữ, kích cỡ và màu kí tự…

5 Thẻ định dạng bảng <table>…</table>: Đây là thẻ định dạng bảngtrên trang Web Sau khi khai báo thẻ này, bạn phải khai báo các thẻ hàng <tr>

và thẻ cột <td> cùng với các thuộc tính của nó

6.Thẻ hình ảnh <img>: Cho phép bạn chèn hình ảnh vào trang Web.Thẻ này thuộc loại thẻ không có thẻ đóng

7 Thẻ liên kết <a> </a>: Là loại thẻ dùng để liên kết giữa các trangWeb hoặc liên kết đến địa chỉ Internet, Mail hay Intranet(URL) và địa chỉ trongtập tin trong mạng cục bộ (UNC)

8.Các thẻ Input: Thẻ Input cho phép người dùng nhập dữ liệu hay chỉthị thực thi một hành động nào đó, thẻ Input bao gồm các loại thẻ như: text,password, submit, button, reset, checkbox, radio, image

9.Thẻ Textarea: < Textarea> < \Textarea>: Thẻ Textarea cho phépngười dùng nhập liệu với rất nhiều dòng Với thẻ này bạn không thể giới hạnchiều dài lớn nhất trên trang Web

10 Thẻ Select: Thẻ Select cho phép người dùng chọn phần tử trong tậpphương thức đã được định nghĩa trước Nếu thẻ Select cho phép người dùngchọn một phần tử trong danh sách phần tử thì thẻ Select sẽ giống nhưcombobox Nếu thẻ Select cho phép người dùng chọn nhiều phần tử cùng mộtlần trong danh sách phần tử, thẻ Select đó là dạng listbox

11.Thẻ Form: Khi bạn muốn submit dữ liệu người dùng nhập từ trangWeb phía Client lên phía Server, bạn có hai cách để làm điều nàu ứng với haiphương thức POST và GET trong thẻ form Trong một trang Web có thể cónhiều thẻ Form khác nhau, nhưng các thẻ Form này không được lồng nhau, mỗithẻ form sẽ được khai báo hành động (action) chỉ đến một trang khác

1.1.4.CSS:

Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh làCascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệuviết bằng ngôn ngữ HTML và XHTML Ngoài ra ngôn ngữ định kiểu theo tầngcũng có thể dùng cho XML, SVG, XUL Các đặc điểm kỹ thuật của CSS được duytrì bởi World Wide Web Consortium (W3C) Thay vì đặt các thẻ quy định kiểudáng cho văn bản HTML (hoặc XHTML) ngay trong nội dung của nó, bạn nên sửdụng CSS CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm

1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.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ùng chọ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ụng các thuộc tính cần thay đổi lên vùng chọn đó Mối tương quan giữa HTML vàCSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) và CSS định hìnhphong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời

1.1.5.JavaScript:

Là một ngôn ngữ lập trình của HTML và WEB Nó là nhẹ và được sửdụng phổ biến nhất như là một phần của các trang web, mà sự thi hành củachúng cho phép Client-Side script tương tác với người sử dụng và tạo các trangweb động Nó là một ngôn ngữ chương trình thông dịch với các khả nănghướng đối tượng JavaScript được biết đến đầu tiên với tên Mocha, và sau đó

là LiveScript, nhưng công ty Netscape đã đổi tên của nó thành JavaScript, bởi

vì sự phổ biến như là một hiện tượng của Java lúc bấy giờ JavaScript xuấthiện lần đầu trong Netscape 2.0 năm 1995 với tên LiveScript Core đa năngcủa ngôn ngữ này đã được nhúng vào Netscape, IE, và các trình duyệt khác.Cùng thời điểm Netscape bắt đầu sử dụng Java trên trình duyệt Netscape,LiveScript đã được đổi tên thành JavaScript để được chú ý hơn bởi ngôn ngữlập trình Java lúc đó đang được coi là một hiện tượng JavaScript được bổ sungvào trình

duyệt Netscape bắt đầu từ phiên bản 2.0b3 của trình duyệt này vào tháng 12năm 1995 Trên thực tế, JavaScript không được phát triển dựa từ Java Do đóJavaScript chỉ dựa trên các cách đặt tên của Java Java Script gồm 2 mảng làclient-server thực hiện lệnh trên máy của end-user và web-

server.Sau thành công của JavaScript, Microsoft bắt đầu phát triển

JScript, một ngôn ngữ có cùng ứng dụng và tương thích với

JavaScript JScript được bổ sung vào trình duyệt Internet Explorer bắt đầu từInternet Explorer phiên bản 3.0 được phát hành tháng 8 năm 1996

DOM (Document Object Model), một khái niệm thường được nhắc đếnvới JavaScript trên thực tế không phải là một phần của chuẩn

ECMAScript, DOM là một chuẩn riêng biệt có liên quan chặt chẽ vớiXML

Từ đó, chúng em mong muốn xây dựng một website bán nồi cơm điện

để hỗ trợ tất cả những khách hàng được cập nhật thông tin mới nhất về cácloại nồi cơm điện để mang đến một cái nhìn tổng quát hơn cho người mua

1.1.8 Mục tiêu của đề tài:

Xây dựng các chức năng cơ bản của một website bán hàng

Website có thể hỗ trợ, trao đổi với khách hàng khi nhận được yêu cầu Có

hệ thống quản lý thông tin sản phẩm Website đơn giản không cầu kì nhưng bắtmắt đối với người tiêu dùng

1.1.9 Chức năng website:

-Trang chủ: Trang giới thiệu sơ lược về các sản phẩm nổi bật, mới của cửahàng

-Sản phẩm: Trang bao gồm tất cả các sản phẩm của cửa hàng

-Giới thiệu: Trang giúp khách hàng hiểu kĩ hơn về thông tin của cửahàng

-Đăng nhập: đăng nhập website

-Đăng ký: đăng ký tài khoản trên website

Chương II : THIẾT KẾ BỐ CỤC WEBSITE

*Hình 1.1:Bố cục trang chủ:

*Hình 1.2 :Sản phẩm:

*Hình 1.3 : Giới thiệu:

Hình 1.5 Đăng kí

CHƯƠNG III :KẾT QUẢ WEBSITE

*Trang Chủ :

*Đăng nhập:

*Đăng ký:

*Giới thiệu:

*Sản Phẩm:

*

KẾT LUẬN:

Sau khi nghiên cứu và hoàn thành báo cáo chuyên đề về “thiết kếwebsite bán nồi cơm điện” chúng em thấy hiểu biết hơn về thiết kế websitenhờ việc tích lũy kiến thức, kỹ năng sử dụng HTML, JavaScript, CSS và cũngrút ra được nhiều kinh nghiệm riêng cho bản thân Do kiến thức còn có nhữngthiếu sót nên đôi khi ở một số chỗ vẫn còn vấn đề nên mong các thầy cô bỏqua cho một vài lỗi ấy

Chúng em xin chân thành cảm ơn!