Tin tức công nghệ

 

Chào mọi người, trong các vấn đề cơ bản của học thiết kế web là tạo và xử lý giỏ hàng, tuy nói là cơ bản nhưng được đánh giá là rất khó, hôm nay mình chia sẻ với các bạn cách thiết lập một giỏ hàng đơn giản trong ASP.Net

 

Một website bán hàng ngoài các vấn đề về sản phẩm, khuyến mãi, khách hàng… thì giỏ hàng và đơn hàng là một trong các tính năng không thể thiếu, nó mang cho phép người dùng chọn mua sản phẩm, nhóm sản phẩm, đặt hàng online, cho phép bạn đánh giá doanh thu, thông kê đơn hàng … với một giỏ hàng chuyên nghiệp đầy đủ các tính năng thì còn nói lên sự chuyên nghiệp trong dịch vụ của bạn.

 

DTUER có thể tham khảo thêm tại https://expressmagazine.net/development/1403/cach-tao-va-xu-ly-gio-hang-trong-aspnet nha!

 

1. Mô tả CSDL

Không nói dông dài nữa, ai cũng biết tầm quan trọng của nó rồi thì bây giờ mình tiến hành vào phâm tích vấn đề mình cần làm. Muốn thiết lập và xử lý giỏ hàng bạn cần xét các trường liên quan như: sản phẩm, khách hàng hai thành phầm trực tiếp đó trả lời cho hai câu hỏi, ai mua? và mua gì?

 

Ngoài ra nó còn phát sinh ra đơn hàng, chi tiết đơn hàng vì khi chọn sản phẩm lưu vào thì phải có bảng lưu đó là đơn hàng, tuy nhiên trong một đơn hàng có một hay nhiều sản phẩm do đó phải phát sinh ra chi tiết đơn hàng. Nếu phân tích sâu thì bạn có thêm phương thức thanh toán… Mời bạn tham khảo phần phân tích cơ sở dữ liệu sẽ nắm rõ hơn.

 

Mô tả CSDL thiết lập giỏ hàng ASP.Net

 

Mô tả CSDL thiết lập giỏ hàng ASP.Net

 

2. Thiết lập giỏ hàng ASP.Net

Đầu tiên mình sẽ vào phân tích các file phát sinh trong lúc mình tạo giỏ hàng ASP.Net: trang thứ nhất là trang dùng trình bày các sản phẩm, thường là trang chủ, trang thể loại sản phẩm, chi tiết sản phẩm … tiếp theo trang giỏ hàng, trang thanh toán … ngoài ra còn các tràng thông báo khi cần thiết…

 

Trong trang hiển thị sản phẩm bạn cần xem lại bài: Sử dụng – đổ dữ liệu vào DataList trong ASP.Net trong này cần chú ý đến nút mua hàng, bạn khai báo như hình sau:

 

Tùy chỉnh nút mua hàng ASP.Net

 

Tùy chỉnh nút mua hàng ASP.Net

 

Bạn vào trang hiển thị sản phẩm ở đây mình ví dụ là TrangChu.aspx cho dễ nha! Mở trang TrangChu.cs lên bạn khai báo:

 

1

2

3

 

Xin nhắc lại là đến đây bạn đã có giao diện rồi nha, khai báo trên giống như một đối tượng, ở đây bạn hiểu là một biến có kiểu là table cũng được nó sẽ là nơi lưu trữ tạm thời các dữ liệu của giỏ hàng bạn trươc khi phiên giao dịch kết thúc.

 

Tiếp đến bạn vào trong Page_Load khai báo như sau:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

Nếu giỏ hàng của chúng ta là null thì gáng biến Session["GioHang"] nếu chưa rõ biến session thì bạn xem lại bài đối tượng cookies và session trong ASP.Net. Nếu đã có rồi thì mình sẽ xóa sạch các dữ liệu và tiến hành phiên làm việc, mình add các trường như: idSP (int), TenSP (string), Gia (double), SoLuong (int), TongTien (double) vào trong bảng table đã khai báo sau đó tiến hành load lại dữ liệu (hàm load_data xem lại bài trước).

 

 

Tiếp theo bạn xử lý nút mua hàng, lúc nảy mình đã mình đã đặt tên cho Command nút mua hàng do đó vào kích hoạt phần ItemCommand của DataList sản phẩm mới sử dụng được, ItemCommand cho phép bạn xử lý theo CommandName rất dễ chịu và tiện cho chúng ta quản lý các item. Bạn Click vào DataList sản phẩm và nhìn vào thanh thuộc tính làm theo hình.

 

ItemCommand trong Datalist

 

ItemCommand trong Datalist

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

Đoạn code sau cho thấy được, nếu là CommandName đang xét là “ibtMuaHang” thì xử lý, muốn mua hàng bạn phải bắt người dùng đăng nhập để có thông tin cho đơn hàng chúng ta. Nếu Session["UserName"] mà có giá trị null thì mình Redirect đến trang đăng nhập.

 

 

Khi mình bấm vào nút mua hàng thì bạn có cách hiểu về hoạt động các biến như sau: intidSP là lấy giá trị key của DataList ép về kiểu int, strTenSP lấy từ control lbtTenSanPham ép về kiểu string, flGia giá lấy từ control lbGia ép về kiểu float, số lượng intSoLuong khai báo bằng 1 sau đó mình add chúng vào tbGioHang. Khi thành công thì thông báo.

 

Lúc này xem như đã xong phần trang hiển thị sản phẩm, bạn đi tiếp trang giỏ hàng GioHang.apspx, trang này mình cần xử lý rất nhiều, bạn nhìn giao diện mẫu hiển thị lên như sau và thiết kế một layout cho nó, ở đây sử dụng gridview.

 

Thông tin giỏ hàng đã chọn

 

Thông tin giỏ hàng đã chọn

 

Ở trang giỏ hàng bạn vẫn phải khái báo biến tỉnh giỏ hàng như ở trang show sản phẩm để lấy thông tin từ table trang kia truyền qua.

 

1

static DataTable tbGioHang = new DataTable();

Tiếp theo mình sẽ load dữ liệu lên GridView hiển thị thông tin các sản phẩm chọn mua.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

 

Tiếp theo sau đây là hàng loạt chuổi các hàm liên quan với nhau nói chung cũng có chút phức tạp các bạn phải ghú ý hi.. Quên vấn đề nữa, các control trong trang giỏ hàng này là: GridView, lable tổng tiền, button mua tiếp, button xóa giỏ hàng, button cập nhật khi có thay đổi, và đặt hàng. Bạn nhận thấy trong hàm load dữ liệu có hàm thêm vào giỏ hàng, hàm này sẽ có tác dụng cho việc mua tiếp hàng mà không mất sản phẩm trong table. Sau đây là hàm thêm vào giỏ hàng.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

 

Bạn nhận thấy trong đó có phát sinh hàm lấy dòng, là SPdacotronggiohang, thật sự cũng chẳng biết đặt tên như thế nào :) nhưng hàm này sẽ trả về kiểu int là dòng hiện tại của table.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Cách tạo và xử lý giỏ hàng trong ASP.Net

 

Eo ơi giỏ hàng ASP.Net

 

Tiếp đến mình sẽ xử lý các nút trong giỏ hàng của mình như sau, nút nào dễ làm trước :D bắt đầu từ nút mua tiếp, khi đã xem giỏ hàng nhưng chưa đồng ý người ta có thể mua tiếp thì mình cho khách đến Trang chủ.

 

1

2

3

4

5

6

 

Tiếp theo là đặt hàng, nút này tương tự như mua tiếp mình sẽ dẫn khách đến trang đặt hàng.

 

 

1

2

3

4

5

6

Sau đó là nut xóa giỏ hàng, hii nút này còn dễ ác nữa.

 

1

2

3

4

5

6

7

Tiếp tục là một nút khó nhất trong cái đám nằm ngang đó là cập nhật giỏ hàng, khi mình thay đổi số lượng … trên gridview giỏ hàng thì muốn cập nhật thông số đó.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Còn một vấn đề quan trong nữa mà suýt nữa mình quên là nút xóa tại dòng nằm trong GridView giỏ hàng của mình, bấm vào dòng nào thì xóa dòng đó. :D Lúc này bạn chọn vào GridView và vào thanh thuộc tính chọn như hình, ở DataList thì có ItemCommand ở GridView thì có RowCommand.

 

RowCommand trong GridView giỏ hàng ASP.Net

 

RowCommand trong GridView giỏ hàng ASP.Net

 

Nút đó được code như sau:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

3. Tạo đơn đặt hàng trong ASP.Net

Những gì gian khổ nhất cũng đã trãi qua, bây giờ có lẽ sẽ nhẹ hơn nhiều rồi, tạo tính năng đặt hàng.

 

Đặt hàng trong ASP.Net

 

Đặt hàng trong ASP.Net

 

Như trên bạn có thể thấy được có một gridview hiển thị cho người dùng biết được các sản phẩm mà họ đã chọn mua, và những thông tin cần thiết khi bạn giao dịch với khác hàng ….

 

Tương tự ở đây hiện thông tin giỏ hàng thị bạn phải khai báo biến.

 

1

DataTable tbGioHang = new DataTable();

Trong phần PageLoad bạn khai báo các thành phần sau đây:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

Ở đây có một chổ khác đó là có lấy IdKH mã khách hàng để bạn add vào trong đơn hàng, để lúc admin bạn quản lý sẽ biết người khách hàng nào đã đặt. Còn phương thức thanh toán thì load từ CSDL lên mà thôi bạn làm như sau:

 

1

2

3

4

5

6

7

8

9

10

11

Bạn chú ý dùng Điều khiển kiểm tra dữ liệu validation control trong ASP.Net để kiển tra thông tin nhập từ người dùng sau đó bạn tiến hành code nút đặt hàng.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

Kết luận: Ở đây insert vào hai bảng đơn hàng và chi tiết đơn hàng luôn. Hix, pà con thông cảm bài viết dài quá đâm ra đau đầu muốn chết, phần trước còn giải thích được nhiều càng về sau đuối quá, thôi cứ làm được cái đã rồi từ từ mình tính nha mọi người! Quên nữa, thật ra đây cũng chỉ là phần demo tính năng giỏ hàng thôi bạn có thể phát triển thêm nhiều hơn nếu muốn mang ra sử dụng:D ví dụ như: cho khác hàng có thể sửa lại đơn hàng trong thời gian nhất định nào đó, hủy đơn hàng và phát triển về phương thức thanh toán online…. Chúc thành công.