Hướng dẫn làm website bán hàng php (giáo trình tự học a đến z)

Giáo trình tự học làm website bán hàng php, hướng dẫn phân tích tạo database, các thao tác lập trình cơ bản đến nâng cao, có hình ảnh minh họa và source code bài học kèm theo để bạn tự thực hành khi học. Giáo trình hướng dẫn sử dụng Dream weaver để lập trình website bán hàng php, cách dùng tool tạo query sql php,... Download tài liệu và source web mẫu để học và làm được ngay web bán hàng php nhé bạn.

ThoiDiemGiaoHang, TenNguoiNhan, DiaDiemGiaohang, TinhTrang, GhiChu

e DonHangChiTiet: idChiTiet, idDH, idSP, SoLuong, Gia

f Users: Thông tin user idUser, HoTen, Username, Password, DiaChi, DienThoai, Email, GioiTinh, idGroup, NgaySinh

2 Website:

a File index.php: hiện sp mới, cho chọn 1 sp đưa vào giỏ hàng

b File loaisp.php: hiện sp theo loại, cho chọn 1 sp đưa vào giỏ hàng

c Chitietsp.php: hiện chi tiết sp, cho chọn số lượng sp mua

d Chonsp.php : lưu 1 sp vào Session và quay lại trang trước đó

e Muahang.php:

- Hiện thông tin khách hàng đã đăng nhập

- Hiện mẫu thông tin đơn hàng để khách nhập vào: thời điểm giao, địa chỉ giao, tên người nhận

- Khách nhắp nút Thanh Toán, chương trình ghi nhận đơn hàng

3 Tổ chức giỏ hàng:

a Dữ liệu là Mã SP và Số lượng SP do khách chọn

được lưu tạm vào Session Khi khách quyết định mua,

họ sẽ khai báo thông tin về cá nhân vào đơn hàng

(giao lúc nào, ở đâu, cho ai) Chương trình lúc đó mới

lưu dữ liệu từ Session vào database

b Giỏ hàng gồm 3 array đặt trong Session:

- daySoluong: dãy lưu số lượng các sản phẩm khách

chọn

- dayDongia: dãy lưu giá của các sản phẩm khách

chọn

- dayTenSP: Lưu tên các sản phẩm khách chọn

3 dãy trên lưu phần tử bằng key, key của mỗi phần tử là idSP

Ví dụ : khách chọn các sản phẩm có idSP là 4, 7,10 với số lượng lần lượt là 5, 2,3

Giỏ hàng sẽ hiện ra như sau:

a Chép folder banhangtructuyen vào www Site đã có sẵn các file

- chonsp.php: lưu sản phẩm khách chọn vào Session

- hiengiohang.php: hiện giỏ hàng là các sp do khách chọn

- index.html trang tĩnh làm mẫu

- ham.php: một số hàm xử lý

b Tạo site PHP trỏ vào folder banhangtructuyen

c Tạo database tên banhangtructuyen, import dữ liệu từ file banhang.sql

d Tạo connection tên banhangtructuyen trỏ vào database

banhangtructuyen

e Thêm lệnh mysql_query("set names 'utf8'"); vào file connection

f Mở file index.html để xem

II. Cấu hình các thông số login

1 Hiện hộp thoại cấu hình:

Trên thanh Insert bar, nhắp tab Developer Toolbox rồi nhắp nút Control panel (nút tận cùng bên phải) Và cấu hình theo đề nghị trong hình

4 Tab Session

7 Tab History

III. Thực hiện trang chủ (index.php)

1 Mở file index.html lưu thành file index.php

2 Hiện menu 2 cấp bên trái:

a Xoá table navigation

b Nhắp nút Nested Repeat

Region

banhangtructuyen

- Master table: chọn chungloai

- Primary key: chọn idCL

- Display value: chọn TenCL

- Detail Table: chọn LoaiSP

- Foreign key: chọn idCL

- Display value: chọn TenLoai

 Xuất hiện table 2 dòng 1 cột do Nested Repeat tạo ra Đặt tên table này là

navigation

c Chọn table navigation, chỉnh border=0, width=100%, CellSpace=0

d Xóa 4 khoảng trắng phía trước field TenLoai

e Trong table navigation, chọn field TenLoai, rồi link đến file loaiSP.php và truyền tham số idLoai

f Trong table navigation, chọn td chứa tên chủng loại (hàng 1) gán class CSS

là tenchungloai

g Nhắp nhãn NestedRepeat rồi qua code, bạn sẽ thấy vùng NestedRepeat được chọn Hãy gõ phím mũi tên qua phải rồi enter xuống hàng (để ra phía

sau vùng NestedRepeat)

h Gõ thêm dòng code sau (cho đẹp)

<tr><td height="8"> <img src=images/hotro_border.gif></td></tr>

Kết quả như sau:

- Field: idSP, TenSP, urlHinh, MoTa, Gia

- Sort: NgayCapNhat Desc

- Nhắp sau field TenSP, Enter xuống hàng

- Vào Insert  Image  Data Source  chọn recordset sanpham  chọn urlHinh  OK

- Chọn hình sp mới chèn: chỉnh W=120, H=120, Border=0

f Chèn field Gia:

- Nhắp sau hình sản phẩm Enter xuống hàng

- Kéo field Gia từ recordset sanpham vào thay thế

g Chèn hình để link đến trang chi tiết sản phẩm

- Nhắp phía sau field Gia, Enter xuống hàng

- Vào menu Insert  Images  chọn hình images/ chitiet.gif  OK

- Chọn hình chitiet.gif : Link đến file chitietSP.php và truyền tham số idSP

- Chọn hình chitiet.gif : chỉnh Border=0 (cho đẹp)

h Chèn hình để user chọn sản phẩm đưa vào giỏ hàng

- Nhắp phía sau hình chitiet.gif, gõ phím Enter xuống hàng

- Vào menu Insert  Images  chọn hình images/dathang.gif  OK

- Chọn hình dathang.gif rồi qua code, bạn sẽ thấy đoạn code:

<img src="images/dathang.gif" width="96" height="17">

- Bổ sung để được như sau:

<img onClick="chonSP('chonsp.php?idSP=aa')"

src="images/dathang.gif" width="96" height="17">

- Chọn chữ aa rồi kéo field idSP từ recordset sanpham vào thay thế

i Vào tag head, chèn file javascript ax.js (Menu Insert –HTML-Script Object –Script …)

j Lặp ngang với looper wizard:

- Qua Design, chọn div motsp rồi nhắp

- Chọn table do Looper Wizard mới tạo ra, chỉnh border=0, W=100%

- Nhắp td chứa thông tin sản phẩm  Mục Horz: chọn Center (canh giữa theo chiều ngang)

4 Hiện giỏ hàng:

a Qua Design, chọn div#giohang ở cột phải rồi qua code

b Nhìn để xác định xem nội dung bên trong giỏ hàng là từ dòng nào đến dòng nào

c Xoá nội dung bên trong của div giohang (chỉ còn là <div id="giohang"> </div>)

d Gõ bên trong div dòng chữ màu đỏ (đậm) để có kết quả sau:

ORDER BY SoLanMua desc limit 0,3

b Xóa dữ liệu thừa trong box sản phẩm bán chạy

 Nhắp bên trong box sản phẩn bán chạy (ở cột phải) rồi qua code, bạn

sẽ thấy 3 div có class là glidecontent Mỗi dic này chứa thông tin về 1 sản phẩm

 Xóa 2 div chứa sản phẩm 2 và 3 Chỉ chừa lại dic chứa sản phẩm 1, kết quả như sau:

 Chọn chữ TênSP (xem hình trên) rồi kéo field TenSP từ recordset sanphambanchay vào thay thế

 Chọn chữ Gia (xem hình trên) rồi kéo field Gia từ recordset sanphambanchay vào thay thế

 Chọn chữ aa (xem hình trên) rồi kéo field idSP từ recordset sanphambanchay vào thay thế (làm 2 lần với 2 chữ aa

 Chọn chữ HinhSP (xem hình trên) rồi kéo field urlHinh từ recordset sanphambanchay vào thay thế

d Lặp

 Chọn <div class=glidecontent> và lặp recordset sanphambanchay, All Record (xem hình)

6 Thực hiện chức năng login

a Vào Server Behavior  +  Developer Toolbox  User Login  Advanced  Login Transaction

d Xong nhắp OK

Bây giờ trong Server Behavior có 1 mục User Login Transaction , nhắp đúp vào đây nếu bạn muốn chỉnh các thông số đã khai báo

e Test : Login thử, dù có gõ username và pass đúng thì vẫn thấy trang

web y như cũ Form login vẫn hiện (đáng lẽ phải ẩn) và không thấy lời chào hiện ra Thực hiện tiếp mục bên dưới để xử lý

7 Hiện thông tin user login

a Nhắp textfield username  nhắp chọn #formLogin trên thanh tag 

gõ phím mũi tên qua trái  gõ aa

b Tạo vùng Show If Login

 Chọn chữ aa mới rồi vào Server Behavior  +  Developer ToolBox

 Conditional Regions  Show If User is Logged In Sẽ hiện hộp thoại sau:

 Chọn User and password

 Check mục Has Else

c Chọn chữ aa rồi qua code, thay thế aa bởi code sau:

<? include "hienuserlogin.php"; ?>

d Đưa form vào phần else của Show If

 Qua Design, nhắp text field username rồi chọn #formlogin trên thanh tag  Gõ Ctrl-X

 Chọn chữ Else text: Replace this. Mới xuất hiện rồi gõ Ctrl- V

e F12 login để test thử

f Các bạn tự thực hiện (ở nhà, hoặc lúc rãnh)

 Hiện box 10 sản phẩm xem nhiều nhất (đặt dưới quảng cáo)

IV. Thực hiện trang thoát cho user

a Tạo trang PHP trắng, lưu với tên thoat.php

b Vào Server Behavior  +  Developer Toolbox  User Login  Advanced  Logout Transaction Chọn như hình

 After logging out: trang web sẽ chuyển đến sau khi login (index.php)First check variable: điều kiện để chức năng thoát thực hiện (SESSION, lt_login_id)

Các công việc thực hiện tiếp theo:

- Thực hiện trang hiện sản phẩm theo loại (file loaisp.php)

- Thực hiện trang hiện chi tiết 1 sản phẩm do user chọn (file chitietsp.php)

- Thực hiện trang để user đặt hàng User khai báo thông tin thời điểm giao hàng, địa chỉ, người nhận… (file muahang.php)

- Thực hiện trang lưu chi tiết đơn hàng vào database (file muahangxong.php)

V. Thực hiện trang hiện sản phẩm trong 1 loại:

1 Save as trang index.php thành loaisp.php

2 Nhắp đúp recordset sanpham trong Bindings

3 Chèn thanh phân trang:

 Chọn table content (ở cột giữa) rồi phím mũi tên qua phải

 Vào menu Insert  Data Objects  Recordset Paging  Recordset Navigation Bar

 Recordset : chọn sanpham Display: chọn Text  OK

 Chọn table mới xuất hiện (chứa các link First, Next) rồi set class phantrang_sp

 Chỉnh lại tiếng việt trong các link như hình(cho đẹp)

4 Chèn thanh trang thái record:

 Nhắp phía sau table Recordset Navigation Bar rồi Enter để xuống hàng

 Vào menu Insert  Data Objects  Display Record Count  Recordset Navigation Status  Chọn recordset sanpham  OK  chỉnh tiếng việt trong các nhãn (cho đẹp)

5 Xem thử từ trang index.php, nhắp tên 1 loại sản phẩm  sẽ thấy list sản phẩm trong loại

6 Hiện tên loại sản phẩm

 Tạo 1 recordset để lấy tên loại sản phẩm: Vào Bindings  +  Recordset

 Chọn chữ Sản phẩm mới trong cột giữa

 Kéo field TenLoai từ recordset tenloai vào thay thế cho chữ Sản phẩm mới

VI. Thực hiện trang hiện chi tiết 1 sản phẩm

1 Save as trang index.php thành chitietsp.php

2 Vào Server Behavior xoá Horizontal Looper

4 Chèn thêm 1 cột bên phải hình sản phẩm:

 Nhắp nút phải trong ô chứa hình sản phẩm (hình dưới) chọn Table  Insert Rows or Columns

 Nhắp bên trong ô mới chèn, xuống thanh Properties chỉnh W=50%

 Nhắp trong ô mới chèn, rồi vào menu Insert  Form  Form

 Nhìn xuống thanh Properties chỉnh các thuộc tính của Form:

Name: chonSanPham Action: gõ chonsp.php Method: Get

6 Chèn text field soluong vào Form:

 Nhắp bên trong form chonSanPham rồi vào menu Insert  Form  Text Field

ID: gõ soluong Label: gõ Số lượng mua

Style: Wrap with label tag  OK

 Nhắp sau chữ mua, Enter xuống hàng

 Nhắp field soluong, nhìn trong thanh Properties xem thử id của đối

tượng này có phải thật sự là soluong không, nếu không thì sửa lại cho

đúng

 Nhắp lại text field soluong, mục Init val: gõ vào số 1

7 Điều chỉnh nút đặt hàng:

 Nhắp sau text field soluong Enter xuống hàng

 Kéo nút Đặt hàng từ cột trái qua vị trí con trỏ cho đẹp (hình trên)

 Nhắp nút Đặt hàng rồi qua Code, điều chỉnh để được như sau:

idSP='+chonSanPham.idSP.value+'&soluong='+chonSanPham.solu ong.value)" src="images/dathang.gif" width="96" height="17" />

8 Chèn link quay lại trang trước

 Nhắp phía sau hình Đặt hàng, Enter xuống hàng

 Gõ chữ Trở lại

 Chọn chữ Trở lại, xuống mục Link trên thanh Properties, gõ vào javascript:history.go(-1)

9 Chèn hidden field tên idSP vào Form:

 Nhắp phía sau chữ Trở lại

 Vào menu Insert  Form  Hidden Field

 Nhìn xuống thanh Properties:

Mục Hidden Field: gõ tên đối tượng là Mục Value: nhắp nút chọn và chọn field idSP trong recordset sanpham

10 Đưa thêm field Mota vào

 Nhắp nút phải tại ô chứa hình sản phẩm  Table  Insert Rows or Columns

 Chọn Rows  Below the selection  OK

 Bạn thấy xuất hiện thêm 1 dòng bên dưới, chọn 2 ô ở dòng này rồi Merge lại

 Kéo field MoTa từ Binding vào vị dòng mới chèn (xem hình)

 Chỉnh Horz=Left

11 Lưu trang chitietsp.php và test thử như sau:

 F12 xem trang index.php

 Nhắp hình chi tiết  trang chitietsp.php hiện ra chi tiết của sản phẩm vừa nhắp

 Thử gõ 1 giá trị trong ô soluong rồi nhắp nút ĐẶT HÀNG sẽ thấy số lượng sản phẩm trong giỏ hàng

 Xem sản phẩm nào cũng thấy có chữ Sản phẩm mới  cần xử lý chỗ này

12 Hiện tên loại sản phẩm

a Tạo recordset để lấy tên của loại sản phẩm

Name: tenloai

SQL: SELECT TenLoai

FROM loaisp WHERE idLoai = colname

Nhắp nút + để định nghĩa biến colname

Type: NumericDefault value: -1Runtime value: $row_sanpham['idLoai']

OKOK

b Chỉnh recordset sanpham

 Nhắp đúp recordset sanpham trong Bingdings

 Bổ sung thêm field idLoai trong câu lệnh SQL như hình rồi OK

c Đưa tên loại sản phẩm vào trang web

 Chọn chữ Sản Phẩm Mới rồi kéo field TenLoai từ recordset tenloai vào thay thế

VII. Thực hiện trang để khách mua hàng

Trang này thực hiện 1 số nhiệm vụ sau:

 Hiện bảng thông tin khách hàng (họ tên, địa chỉ, email điện thoại)

 Hiện form (insert record) để khách nhập thông tin đơn hàng

 Chèn đơn hàng vào database

1 Điều chỉnh file hiengiohang.php

 Mở file hiengiohang.php rồi qua chế độ Design

 Chọn hình muahang rồi link đến file muahang.php

 Lưu file hiengiohang.php

2 Save as trang index.php thành muahang.php

5 Chỉnh và xóa dữ liệu thừa:

 Sửa chữ SẢN PHẨM MỚI thành THÔNG TIN KHÁCH HÀNG

 Vào Server Behavior xoá Horizontal Looper

 Vào Bingdings xóa recordset sanpham

 Vào cột giữa của trang web, xoá table bên trongtd#mainContent

6 Hiện thông tin khách hàng đang Login:

 Cứ để con trỏ tại vị trí vừa xóa table, chèn table 2 cột 5 hàng, Width=90%, CellPadd=4, CellSpace=0, Border=0  OK

 Chọn table, chỉnh Align=Center

 Nhập các nhãn vào cột trái như hình

 Kéo các field từ recordset userdanglogin vào cột phải như hình

 Chọn các ô trong table mới chèn, Set class là border_khachhang

7 Lưu trang muahang.php và test như sau:

 Đóng browser rồi F12 trang index.php

 Chọn vài sản phẩm vào giỏ hàng rồi nhắp nút muahang

 Bạn sẽ thấy form login hiện ra (là đúng), login xong trang muahang.php mới hiện ra với thông tin của user đang login

8 Hiện form thông tin đơn hàng

a Chọn table chứa thông tin user (table mới chèn), gõ phím mũi tên qua phải rồi Enter xuống hàng

b Nhắp nút Insert Record trong Insert bar/ tab Developer Toolbox:

Insert into table: donhang

Primary key: idDH

After inserting, goto: muahangxong.php

Nhắp Next qua bước kế

Chọn idUser , chỉnh Display as là Hidden field

Chọn field ThoiDiemDatHang, chỉnh Display as là Hidden field

Chọn field TenNguoiNhan, rồi nhắp nút chọn trong mục Default value

Get value from: chọn Recordset FieldRecordset: chọn userdanglogin

Field: chọn HoTenOK

Chọn field DiaDiemGiaoHang, rồi nhắp nút chọn trong mục Default value Get value from: chọn Recordset Field

Recordset: chọn userdangloginField: chọn DiaChi

Validation format là DateDạng ngày dd/mm/yyyy

Check vào Require

Error message: Hãy cho biết thời điểm giao hàng

Chọn field TenNguoiNhan:

Check vào Require

Error message: Bạn hãy cho biết tên người nhận hàngChọn field DiaDiemGiaoHang:

Check vào Require

Error message: Bạn cho biết nơi giao hàngNhắp nút Finish

 Chọn table chứa đơn hàng mới xuất hiện, chỉnh Width=90%, Align=Center

 Chọn các ô trong table chứa đơn hàng , chỉnh Horz= Left (cho đẹp)

 Nhắp nút Insert Record, sửa value thành Đặt hàng

 Vào Server Behavior  +  Developer ToolBox  Form Controls  Date Picker  chọn field ThoiDiemGiaohang  OK

e Điền giá trị cho field ThoiDiemDatHang

Nhắp Hidden field ThoiDiemDatHang, mục Value gõ vào:

<? echo date('d/m/Y'); ?>

f Điền giá trị cho field idUser

 Nhắp Hidden field idUser, mục Value nhắp nút chọn:

 Chọn biến kt_login_id trong mục Session của cửa sổ hiện ra rồi OK

 F12 trang index.php rồi login (nếu chưa login)

 Chọn vài SP, rồi nhắp nút Mua hàng  chỉ định tên người nhận, thời điểm giao hàng, địa điểm giao  OK

 Xem thử trong phpMyadmin xem có đơn hàng không (có)

9 Include file ham.php và gọi hàm ThemDonHang.php

 Chuyển qua code, tìm đến đoạn code có dòng sau