Mục tiêu
Sử dụng công nghệ PHP và MYSQL, chúng tôi phát triển một webapp trung tâm dạy học online, giúp học viên dễ dàng đặt khóa học và tiết kiệm thời gian Ứng dụng còn cung cấp tính năng thống kê doanh thu cho trung tâm dạy học.
Lĩnh vực
Chuyên ngành: công nghệ phần mềm
Chuyên môn: lập trình web Sử dụng ngôn ngữ HTML, CSS, PHP, MYSQL, Javascript, để xây dựng trang web.
Lĩnh vực liên quan: thương mại điện tử
Yếu tố công nghệ
Website sẽ chạy được trên các trình duyệt web
Kết cấu của báo cáo
Đồ án gồm có 4 chương như sau:
CƠ SỞ LÝ THUYẾT
Phần mềm hỗ trợ
JetBrains PhpStorm là một IDE chuyên biệt cho các nhà phát triển web, cung cấp công cụ mạnh mẽ để chỉnh sửa PHP, HTML, CSS, JavaScript và XML.
JetBrains PhpStorm là một IDE chuyên biệt cho các nhà phát triển web, cung cấp công cụ mạnh mẽ để chỉnh sửa PHP, HTML, CSS, JavaScript và XML.
PhpStorm là một công cụ mạnh mẽ giúp người dùng tạo và chỉnh sửa mã nguồn cho nhiều ngôn ngữ lập trình khác nhau Nó cung cấp các tính năng cơ bản như đánh dấu trang, hoàn thành mã, và phóng to thu nhỏ, cùng với các điểm ngắt Đặc biệt, PhpStorm còn tích hợp nhiều tính năng nâng cao như macro, phân tích mã và khả năng chuyển hướng nhanh chóng, giúp tối ưu hóa quy trình làm việc của bạn.
1.1.2 PHPSTORM có thể làm những gì?
PhpStorm, được phát triển bằng ngôn ngữ Java, mang lại nhiều lợi ích như hiệu suất cao trên hệ điều hành Linux, khả năng tối ưu hóa việc sử dụng tài nguyên và sự phù hợp tuyệt vời cho việc lập trình PHP.
Cấu hình RAM tại: JetBrainsPhpStorm 2.1binPhpStorm.exe.vmoptions
- Nổi bật với khả năng search:
Bạn hãy thử làm việc trên 1 project lớn:
– search text với các IDE khác ( netbean, eclipse, zen vv ), lưu thời gian lại. – search text với PhpStorm, lưu thời gian lại.
Khi so sánh, PhpStorm cho thấy tốc độ tìm kiếm vượt trội hơn hẳn so với các IDE khác, nhanh gấp nhiều lần, thậm chí có thể lên đến chục lần Đặc biệt, với tùy chọn tìm kiếm chỉ theo từ và phân biệt chữ hoa chữ thường, tốc độ này có thể nhanh hơn cả trăm lần.
Lý do: Mỗi khi add một project, IDE này sẽ dành một khoảng thời gian vài phút để index toàn bộ dự án ( chắc là dùng lucence ).
Công cụ quản lý Changes của PhpStorm, tương tự như IntellijIdea, mang lại hiệu quả cao trong việc hỗ trợ các công cụ version control Để sử dụng hiệu quả, hãy nhớ kích hoạt chức năng này từ menu Version control PhpStorm cho phép người dùng xem từng dòng code và file đã thay đổi, cùng với các thành phần như changelist, patch và show diff được thiết kế tỉ mỉ, tạo sự thuận tiện tối ưu cho lập trình viên và người quản lý.
- Tích hợp với các công cụ rất mạnh khác của JetBrains:
- Ngoài ra còn một số tính năng rất hay khác như:
To format code according to Drupal coding conventions, customize the code style in the settings and save the configuration This process simplifies sharing the configuration with team members and allows for easy switching between different configurations.
– Tích hợp x-debug, zend-debug (thao tác debug khá đơn giản với phiên bản > 2.1)
– Chức năng merge code rất thông minh. vv….
Tổng quan về ngôn ngữ lập trình PHP
PHP là ngôn ngữ lập trình mã nguồn mở phía server, giúp xây dựng các trang web động một cách dễ dàng Mã PHP được thực thi trên server để tạo mã HTML, xuất ra trình duyệt theo yêu cầu người dùng Ngôn ngữ này tương tác hiệu quả với nhiều cơ sở dữ liệu như MySQL và Oracle PHP được tối ưu hóa cho ứng dụng web, có tốc độ nhanh, cú pháp tương tự C và Java, dễ học, và thời gian phát triển sản phẩm ngắn, do đó đã trở thành một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới.
1.2.2.Lịch sử phát triển của PHP
PHP được phát triển từ sản phẩm PHP/FI, do Rasmus Lerdorf tạo ra vào năm 1995 Ngôn ngữ này được viết bằng C và đã trải qua một lần sửa đổi vào năm 1997, đánh dấu giai đoạn khởi đầu đầy thách thức của PHP.
PHP 3.0, được phát triển bởi Andi Gutmans và Zeev Suraski vào năm 1997, là phiên bản kế tiếp của PHP/FI 2.0, được tạo ra để khắc phục những hạn chế trong phát triển ứng dụng thương mại điện tử Phiên bản này đã chấm dứt sự phát triển của PHP/FI 2.0 và cung cấp cho người dùng một cơ sở hạ tầng mạnh mẽ hỗ trợ nhiều cơ sở dữ liệu, giao thức và API khác nhau, đồng thời cho phép mở rộng theo mô-đun.
=> Chính điều này làm cho PHP3 thành công so với PHP2 Lúc này họ chính thức đặt tên ngắn gọn là 'PHP' (Hypertext Preprocessor).
PHP 4, được công bố vào năm 2000, đã cải thiện đáng kể tốc độ xử lý và mang đến nhiều tính năng mới như hỗ trợ nhiều máy chủ Web, phiên làm việc HTTP, bộ đệm thông tin đầu ra, và các phương pháp bảo mật tốt hơn cho thông tin người dùng Sự phát triển của PHP 4 đã thu hút hàng trăm nghìn nhà phát triển và hàng triệu trang web cài đặt PHP, chiếm khoảng 20% tổng số tên miền trên Internet Nhóm phát triển PHP đã mở rộng lên đến hàng nghìn người, cùng với nhiều dự án liên quan như PEAR, PECL và tài liệu kỹ thuật cho PHP.
PHP5 chính thức ra mắt vào ngày 13 tháng 7 năm 2004, sau một quá trình thử nghiệm kéo dài với các phiên bản Beta 4, RC 1, RC 2 và RC 3 Mặc dù được xem là phiên bản sản xuất đầu tiên, PHP 5.0 vẫn tồn tại một số lỗi, trong đó có lỗi xác thực HTTP đáng chú ý.
PHP 6 được kỳ vọng sẽ khắc phục những thiếu sót của phiên bản hiện tại, bao gồm hỗ trợ namespace, Unicode và sử dụng PDO làm API chuẩn cho việc truy cập cơ sở dữ liệu, trong khi các API cũ sẽ được chuyển thành thư viện PECL Tuy nhiên, phiên bản 6 chỉ được sử dụng cho nghiên cứu và thử nghiệm, và sau đó PHP đã quyết định bỏ qua phiên bản 6 để phát triển lên phiên bản 7.
PHP 7 sử dụng bộ nhân Zend Engine mới PHPNG, mang lại tốc độ nhanh gấp 2 lần so với phiên bản trước Phiên bản này cũng bổ sung nhiều cú pháp và tính năng mới, giúp PHP trở nên mạnh mẽ hơn Những tính năng quan trọng bao gồm
+ Khai báo kiểu dữ liệu cho biến.
+ Xác định kiểu dữ liệu sẽ trả về cho 1 hàm.
+ Thêm các toán tử mới (??, , )
1.2.3.Một số tính chất của file PHP
Các file PHP trả về kết quả cho trình duyệt là một trang thuần HTML.
Các file PHP có thể chứa văn bản (Text), các thẻ HTML HTML tags) và đoạn mã kịch bản (Script).
Các file PHP có phần mở rộng là: php, php3, phpml.
+ Từ phiên bản 4.0 trở về sau mới hỗ trợ session
Tổng quan HTML
HyperText Markup Language (HTML) là một ngôn ngữ đơn giản dùng để tạo ra các tài liệu siêu văn bản Nó bao gồm các tài liệu văn bản thông thường nhưng có chứa các thẻ đặc biệt, giúp trình duyệt hiểu cách hiển thị nội dung HTML không phải là một ngôn ngữ lập trình, vì vậy bạn không cần phải lo lắng về các thuật toán phức tạp; nó chỉ đơn giản là một công cụ để đánh dấu văn bản.
1.3.2.Cách sử dụng mẫu biểu trong HTML
Một mẫu biểu trong HTML bao gồm nhiều thành phần như ô văn bản, ô kéo thả, ô danh sách, nút bấm và ô check Mẫu biểu được bắt đầu bằng thẻ và kết thúc bằng thẻ , cho phép sử dụng các cặp thẻ HTML khác ở giữa.
Thẻ form có hai thuộc tính chính là POST và GET, dùng để xác định cách gửi dữ liệu Kiểu GET hiển thị dữ liệu trên thanh địa chỉ dưới dạng cặp tên=giá_trị, nhưng bị giới hạn 255 ký tự, gây khó khăn khi gửi nhiều dữ liệu Để khắc phục, kiểu POST ra đời, cho phép gửi dữ liệu không bị giới hạn chiều dài và thường được sử dụng để truyền tải thông tin nhạy cảm như mật khẩu mà không hiển thị trên thanh địa chỉ.
Tổng quan Javascript
Vào thời điểm Netscape bắt đầu tích hợp công nghệ Java vào trình duyệt của mình, LiveScript đã được đổi tên thành JavaScript để thu hút sự chú ý, khi mà ngôn ngữ lập trình Java đang trở thành một hiện tượng JavaScript được thêm vào trình duyệt Netscape từ phiên bản 2.0b3 vào tháng 12 năm 1995 Mặc dù Java và JavaScript có tên gọi tương tự, nhưng thực tế chúng không có mối liên hệ nào, ngoại trừ việc cả hai đều được phát triển dựa trên cú pháp của ngôn ngữ C JavaScript bao gồm hai mảng: client-server, thực hiện lệnh trên máy của người dùng cuối và web-server.
Sau khi JavaScript thành công, Microsoft đã phát triển JScript, một ngôn ngữ tương thích và có ứng dụng tương tự JScript được tích hợp vào trình duyệt Internet Explorer bắt đầu từ phiên bản 3.0, phát hành vào tháng 8 năm 1996.
DOM (Document Object Model) là một khái niệm quan trọng liên quan đến JavaScript, nhưng nó không phải là một phần của chuẩn ECMAScript Thực tế, DOM là một chuẩn độc lập, có mối liên hệ chặt chẽ với XML.
Hàm là một khối các câu lệnh có thể nhận một hoặc nhiều đối số, và thường có tên, mặc dù trong JavaScript, hàm không nhất thiết phải có tên Hàm có khả năng trả lại một giá trị Cú pháp để gọi hàm được thể hiện như sau: đối_số_2 tên_hàm(1); trong đó đối_số_1 có giá trị 1 và đối_số_2 có giá trị undefined.
Trong JavaScript, khi gọi hàm, không cần phải cung cấp số lượng đối số giống như khi định nghĩa hàm Nếu số đối số ít hơn, các đối số không được truyền sẽ có giá trị là undefined Các kiểu dữ liệu cơ bản được truyền vào hàm theo giá trị, trong khi các đối tượng được truyền theo tham chiếu.
function tên_hàm(đối_số_1, đối_số_2)
{ các câu lệnh cần thực hiện mỗi khi hàm được gọi; return giá_trị_cần_trả_về;
} tên_hàm(1, 2); // Gọi hàm tên_hàm với hai đối số 1 và 2 ứng với đối_số_1 và
Hàm trong JavaScript là đối tượng hạng nhất, thuộc nguyên mẫu Function Chúng có thể được tạo ra và sử dụng trong phép toán gán như bất kỳ đối tượng nào khác, đồng thời cũng có thể được truyền làm đối số cho các hàm khác Điều này cho thấy JavaScript hỗ trợ hàm cấp độ cao.
Tổng quan CSS
CSS: Cascading Style Sheet: Đây là những mẫu để quy định cách thức thể hiện các thẻ HTML.
CSS có 3 cách sử dụng:
+ Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)
+ Định nghĩa trong 1 trang web (Internal Style Sheet)
+ Định nghĩa thành 1 file CSS riêng (External Style Sheet)
CSS được giới thiệu trong HTML 4.0 nhằm giải quyết nhiều vấn đề thiết kế web, giúp tiết kiệm thời gian và công sức Bạn có thể định nghĩa nhiều kiểu dáng trong một thẻ HTML, từ đó giải quyết các vấn đề chung Các thẻ HTML chuẩn chủ yếu được thiết kế để xác định nội dung văn bản, như tiêu đề và đoạn văn.
Bảng HTML được định dạng bằng các thẻ như ,
, và , nhưng không có thẻ nào để định dạng văn bản Các trình duyệt như Nescape và Internet Explorer đã giới thiệu thêm các thẻ HTML mới và thuộc tính định dạng riêng, làm cho việc tạo ra website trở nên khó khăn khi nội dung bị tách rời khỏi cách bố trí Để khắc phục vấn đề này, World Wide Web Consortium (W3C) đã phát triển CSS trong HTML 4.0, được hỗ trợ bởi cả Nescape và Internet Explorer, giúp tiết kiệm thời gian và công sức trong thiết kế web.
Trong HTML 4.0 trở lên, style quy định cách thể hiện các thẻ HTML như thẻ và thuộc tính COLOR trong HTML 3.2 Style thường được lưu trữ trong các file bên ngoài trang web, cho phép bạn dễ dàng thay đổi định dạng và bố trí của các trang chỉ bằng cách chỉnh sửa file đó.
CSS là công cụ quan trọng giúp bạn thay đổi toàn bộ màu sắc và cách định dạng của các tiêu đề cũng như nội dung, từ đó bạn sẽ nhận ra tác dụng thực sự của nó.
CSS cho phép điều khiển định dạng và bố trí của nhiều trang web chỉ với một lần thay đổi Là nhà thiết kế web, bạn có thể tạo một file CSS cho các thẻ HTML và áp dụng cho nhiều trang web Khi cần thay đổi tổng thể, chỉ cần chỉnh sửa file CSS, và tất cả các trang liên quan sẽ tự động cập nhật Bạn cũng có thể định nghĩa nhiều kiểu cho một thẻ HTML.
CSS cho phép định nghĩa thẻ thông qua nhiều phương thức khác nhau, bao gồm việc áp dụng style trực tiếp trong thẻ HTML, trong trang web hoặc qua file CSS bên ngoài Khi nhiều cách định dạng được áp dụng cho một thẻ HTML, các style sẽ được "xếp tầng" (cascade) theo thứ tự ưu tiên, với thứ tự ưu tiên từ cao đến thấp như sau: (1) style inline, (2) style trong thẻ ``, (3) style trong file CSS bên ngoài, và (4) style mặc định của trình duyệt.
1 Inline Style (Style được qui định trong 1 thẻ HTML cụ thể).
2 Internal Style (Style được qui định trong phần của 1 trang HTML ).
3 External Style (style được qui định trong file CSS ngoài).
4 Browser Default (thiết lập mặc định của trình duyệt).
Các thiết lập trong một thẻ HTML có mức ưu tiên cao nhất, và những gì được định nghĩa ở đây sẽ được ưu tiên hơn tất cả các định nghĩa khác.
Khi trình duyệt web đọc trang web của bạn nó sẽ định dạng trang web theo cách CSS đã qui định cho nó.
Chúng ta có tất cả 3 loại CSS dó đó chúng ta cũng sẽ có 3 cách để chèn CSS vào trang web của mình.
Với External Style (Sử dụng file CSS được định nghĩa thành 1 file riêng)
Sử dụng External Style là một cách lý tưởng khi ta cần phải định dạng nhiều trang web theo một mẫu thống nhất.
Với External Style, việc thay đổi giao diện của một trang web trở nên đơn giản chỉ với một file duy nhất Mỗi trang web cần sử dụng thẻ để liên kết với file CSS bên ngoài, và thẻ này phải được đặt trong thẻ , với thuộc tính href chỉ đến file CSS tương ứng.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Tổng quản ứng dụng
2.1.1 Đối tượng sử dụng ứng dụng
Người dùng là đối tượng sử dụng website để thực hiện các yêu cầu như xem thông tin giá tiền các sản phẩm,đặt hàng.
Quản lý hệ thống là đối tượng sử dụng web để quản lý những thông tin của sản phẩm của website.
2.1.2 Các chức năng chính của hệ thống
Hệ thống cần có chức năng để hỗ trợ và giải quyết các nhu cầu của người dùng như sau :
Hiển thị thông tin sản phẩm
Xem thông tin giá của sản phẩm, mô tả về sản phẩm,đánh giá của khách hàng dành cho sản phẩm.
Đối với quản lý hệ thống
Hệ thống cần có các chức năng hỗ trợ và giải quyết nhu cầu của người quản lý như sau:
Quản lý danh sách sản phẩm
Quản lý danh sách người dùng
Quản lý danh sách nhận xét
Quản lý danh sách đặt hàng
Quản lý danh sách thư
Quản lý danh sách kho
Quản lý danh sách danh mục
2.1.3 Xác định các Use case
- Tác nhân của người sử dụng có các use case sau:
Truy cập xem sản phẩm
Truy cập vào danh sách sản phẩm
- Tác nhân của người quản lý hệ thống có các use case sau:
Quản lý danh sách sản phẩm
Quản lý danh sách người dùng
Quản lý danh sách nhận xét
Quản lý danh sách đặt hàng
Quản lý danh sách thư
Quản lý danh sách kho
Quản lý danh sách danh mục
Biểu đồ Usecasse tổng quát
Hình 2.1 Biểu đồ Usecase tổng quát
Biểu đồ hoạt động
2.3.1 Biểu đồ hoạt động chức năng đăng nhập
Hình 2.2 biểu đồ hoạt dộng chúc năng đăng nhập
2.3.2 Biểu đồ hoạt động chức năng thêm sản phẩm
Hình 2.3 Biểu đồ hoạt động chức năng thêm sản phẩm
2.3.3 Biểu đồ hoạt động sửa sản phẩm
Hình 2.4 Biểu đồ hoạt động chức năng sửa sản phẩm
2.3.4 Biểu đồ hoạt động xóa sản phẩm
Hình 2.5 Biểu đồ hoạt dộng chức năng xóa sản phẩm
2.3.5 Biểu đồ hoạt động chức năng thêm người dùng
Hình 2.6 Biểu đồ hoạt dộng thêm người dùng
2.3.6 Biểu đồ hoạt động chức năng sửa người dùng
Hình 2.7 Biểu đồ hoạt động chức năng xóa người dùng
2.3.7 Biểu dồ hoạt động xóa người dùng
Hình 2.8 Biểu đồ hoạt động chức năng xóa người dùng
2.3.8 Biểu đồ hoạt động chức năng xóa nhận xét
Hình 2.9 Biểu đồ hoạt động chức năng xóa nhận xét
2.3.9 biểu đồ hoạt động chức năng xóa đặt hàng
Hình 2.10 Biểu đồ hoạt động chức nắng xóa đặt hàng
2.3.10 Biểu đồ hoạt động chức năng sửa đặt hàng
Hình 2.11 Biểu đồ hoạt động chức năng sửa đặt hàng
2.3.11 Biểu đồ hoạt động chức năng thêm sản phẩm vào kho
Hình 2.12 Biểu đồ hoạt động chức năng thêm sản phẩm vào kho
2.3.12 Biểu đồ hoạt động chức năng sửa sản phẩm trong kho
Hình 2.13 Biểu đồ hoạt động chức năng sửa sản phẩm trong kho
2.3.13 Biểu đồ hoạt động chức năng xóa sản phẩm trong kho
Hình 2.3.14 Biểu đồ hoạt động chức năng xóa sản phẩm trong kho
2.3.14 Biểu đồ hoạt động chức năng thêm danh mục
Hình 2.15 Biểu đồ hoạt động thêm danh mục
2.3.15 Biểu đồ hoạt động chức năng sửa danh mục
Hình 2.16 Biểu đồ hoạt động chức năng sửa danh mục
2.3.16 Biểu đồ hoạt động chức năng xóa danh mục
Hình 2.17 Biểu đồ hoạt động chức năng xóa danh mục
2.3.17 Biểu đồ hoạt động xem thư
Hình 2.18 Biểu đồ hoạt động chức năng xem thư
GIAO DIỆN WEB
Giao diện đăng nhập
Hình 3.1 Giao diện đăng nhập
Giao diện web
Giao diện chi tiết sản phẩm
Hình 3.3 Giao diện chi tiết sản phẩm
Giao diện giỏ hàng
Hình 3.4Giao diện giỏ hàng
Giao diện tìm kiếm
Hình 3.5 Giao diện tìm kiếm
Giao diện order
Giao diện thanh toán
Hình 3.7 Giao diện thanh toán
Giao diện form quản lý sản phẩm
Hình 3.8 Giao diện form quản lý sản phẩm
Giao diện form quản lý người dùng
Hình 3.9 Giao diên form quản lý người dùng
Giao diện form quản lý nhận xét
Hình 3.10 Giao diện form quản lý nhận xét
Giao diện form quản lý order
Hình 3.11 Giao diện form quản lý oder
Giao diện form quản lý thư
Hình 3.12 Giao diện form quản lý thư
