Tài liệu Tìm hiểu công cụ adobe dreamweaver cs3 và ứng dụng ngôn ngữ php xây dựng website bán hàng trực tuyến động kết nối cơ sở dữ liệu mysql

TRƯỜNG ĐẠI HỌC MỞ TPHCM KHOA CÔNG NGHỆ THÔNG TIN  ĐỒ ÁN MÔN HỌC CHUYÊN NGÀNH : CƠ SỞ DỮ LIỆU Đề tài : Tìm hiểu công cụ Adobe Dreamweaver CS3 Lập trình website bán hàng có kết nối cơ sở dữ liệu MySQL  Sử dụng ngôn ngữ PHP, HTML, Javascript  Sử dụng thư viện CSS, Flash Giảng viên hướng dẫn : Thầy Hồ Quang Khải Sinh viên : Hoàng Phi Vũ MSSV : 0851010336 Lớp : TH08A1 TP.HỒ CHÍ MINH – 2/2012 ĐỒ ÁN CHUYÊN NGÀNH CSDL GIỚI THIỆU HOÀNG PHI VŨ – 0851010336 – TH08A1    Lời mở đầu Trong thời đại ngày nay dịch vụ kinh doanh online trên các website bán hàng trực tuyến đã không ngừng phát triển và vươn xa, đáp ứng các nhu cầu mua sắm, tìm kiếm thông tin sản phẩm của khách hàng. Qua internet việc giao dịch trao đổi hàng hóa đã trở nên nhanh chóng và tiện lợi, không mất quá nhiều thời gian và công sức. Ứng dụng website bán hàng trực tuyến trở nên hiệu quả và đang là tiêu chí hàng đầu của nhiều doanh nghiệp trong và ngoài nước. Loại hình dịch vụ này không những là cách thức marketing dễ tiếp cận nhất đối với khách hàng mà còn đem lại hiệu quả kinh doanh cao. Kinh doanh bán hàng trên website đang là hình thức phổ biến được nhiều doanh nghiệp lựa chọn nhất là các lĩnh vực kinh doanh thời trang, công nghệ thông tin, viễn thông… Chính vì lẽ đó mà em thực hiện đồ án “Tìm hiểu công nghệ Adobe Dreamweaver CS3 và ứng dụng ngôn ngữ php xây dựng website bán hàng trực tuyến động kết nối cơ sở dữ liệu MySQL” với mong muốn góp phần vào việc công nghệ hóa các dịch vụ bán hàng thủ công như trước đây. Đồ án xây dựng hoàn chỉnh nền tảng của một website động có kết nối cơ sở dữ liệu chi tiết, hợp lý nhất theo qui mô trung bình. Đồng thời đồ án này cũng là điều kiện cần và đủ để phát triển website có qui mô lớn thích hợp cho nhu cầu ngày một cao hơn của doanh nghiệp. Lời cảm ơn Trong quá trình thực hiện đồ án “ Tìm hiểu công cụ Adobe Dreamweaver CS3 và ứng dụng ngôn ngữ PHP để lập trình website bán hàng trực tuyến động kết nối cơ sở dữ liệu MySQL” em xin gửi lời cảm ơn chân thành nhất đến với thầy Hồ Quang Khải, người luôn nhiệt tình, tận tâm hướng dẫn em để hoàn thành tốt đồ án này. Em hy vọng trong tương lai gần có thể phát triển nhiều ứng dụng từ đề tài này để góp phần xây dựng và phát triển nền công nghệ thông tin nước nhà.   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 1 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   I. CHƯƠNG I : ADOBE DREAMWEAVER CS3 1) Tìm hiểu sơ lược công cụ Adobe Dreamweaver CS3 a. Giao diện chính trong Adobe Dreamweaver CS3 b. Từng bước tạo Site Quản lý dữ liệu website được chi tiết, bao quát, gọn gàng, cụ thể hơn  Bước 1 : Menu site -> New site   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 2 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3      Bước 2 : Thiết lập các thông số (Cho một website tĩnh) ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 3 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3     ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 4 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   c. Tìm hiểu các công cụ chính  Các chế độ quan sát  Code : Chế độ code của page – phù hợp với lập trình, kiểm tra code  Design : Chế độ giao diện website – phù hợp với việc thiết kế  Split trình : Chế độ kết hợp của code và giao diện – phù hợp với thiết kế, lập  Tạo trang HTML  B1 : Menu File  New  B2 : Chọn các trang tương ứng theo nhu cầu  Xem trước trang : F12 – giống như người dùng quan sát website   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 5 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3    Edit Browser List : Thay đổi, thiết lập trình duyệt web mặc định để demo  Thuộc tính trang  Cách 1 : Modify -> Page Properties  Cách 2 :   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 6 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   Tab Apperrance : Page font : Font mặc định cho trang Size : Cỡ chữ mặc định cho trang Text color : Màu chữ mặc định cho trang Background color : Màu nền cho trang Background image : Ảnh nền trang web Repeat : Các lặp lại ảnh nền No Repeat-x : Lặp lại ảnh nền theo chiều ngang trang web Repeat-x : Lặp lại ảnh nền theo chiều ngang trang web Repeat-y : Lặp lại ảnh nền theo chiều dọc trang web Repeat : Lặp lại ảnh nền theo chiều ngang và chiều dọc trang web Left margin : lề trái trang web Right margin : lề phải trang web Top margin : lề trên trang web Bottom margin : lề dưới trang web Tab Title/ Encoding : Title : Tiêu đề của trang web Encoding : Chọn Unicode (UTF-8) Tab Link Link color : Màu link Rollover links : Màu khi di chuyển mouse vào link Underline style : gạch dưới Tab Headings Mặc định màu sắc, font cho các head   Tab trancing Image : độ trong suốt của hình ảnh ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 7 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3    Insert bar  Là thanh toolbar để chèn các đối tượng vào website(table, hình, form, div,..)  Ẩn hiện Insert bar : Nhấp menu Window  chọn Insert  Thanh Properties  Là thanh nằm bên dưới vùng soạn thảo. Thanh Properties là nơi hiện các thuộc tính của đối tượng mà bạn đang chọn trên website. Bàn dùng thanh này để hiệu chỉnh thuộc tính của đối tượng.  Ẩn hiện thanh Properties : Nhấp menu Window  chọn Properties  Co giãn : Nhấp nút hình tam giác ở góc dưới phải của thanh Properties  Toolbar Document  Là thanh toolbar chứa các thao tác với tài liệu hiện hành. Toolbar này chứa các nút Design, Code, Split mà bạn đã dùng  Ẩn hiện toolbar Document : Nhấp menu View  Toolbars  Document  Một số nút trên toolbar document Code : Chế độ Code Split : Chế độ Split Design : Chế độ Design Title : Tiêu đề trang Upload / Download trang web Preview : Xem thứ trang   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 8 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3    Thanh Tag  Là thanh nằm ngang, ngay phía trên thanh Properties. Đây là nơi hiện ra các tag chứa đối tượng mà bạn đang chọn. Nghĩa là nếu bạn muốn biết 1 đối tượng nào đó nằm trong các tag nào, hãy chọn nó rồi nhìn vào thanh này  Panel Group :  Là vùng nằm dọc bên phải vùng soạn thảo. Đây là nơi chứa rất nhiều thông tin mà bạn có thể dùng để tạo và định dạng trang, các panel thường dùng trong đây là CSS, File  Ẩn hiện : Nhắp nút mũi tên ở cạnh trái của Panel   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 9 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   2) Một vài điều về ngôn ngữ HTML a. Website tĩnh Yêu cầu User (Browser) Đáp ứng (htm,gif…) Web Server b. Website động Yêu cầu User (Browser) Web Server PHP, ASP... Hệ CSDL Đáp ứng (htm,gif…) Tools quản trị c. Giới thiệu  HTML (Hyper Text Markup Language) là ngôn ngữ để quy định cách hiển thị thông tin trong trang web. HTML gồm nhiều lệnh, mỗi lệnh gọi là 1 tag. Mỗi tag quy định 1 cách thức hiển thị dữ liệu trong trang web. Ví dụ như : chữ đậm, chữ nghiêng, màu chữ…. Người xem trang web không thấy các tag mà chỉ thấy các dữ liệu được định dạng bởi các tag. Nói đơn giản : HTML là 1 ngôn ngữ dùng để tạo ra các trang web  Các tag cùng với dữ liệu trong đó được lưu trong 1 file text, gọi là trang web. File này thường có tên mở rộng là .html hoặc .htm   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 10 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3    Một số tag thường dùng : , Chữ đậm , Chữ nghiêng Chữ gạch dưới Tạo 1 hyperlink Chèn hình

---

Chèn 1 đường gạch ngang Chỉ định font chữ

Tạo paragraph mới
Xuống hàng, không tạo p mới d. Cấu trúc của 1 trang web Phần thông tin quản lý Chứa tiêu đề trang web  ….. Chứa thông tin điều khiển keyword, refresh  Chứa các style css định dạng trang web  Phần dữ liệu trong trang … … …   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 11 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   3) Thanh công cụ Insert bar : Common 1 2 3 4 5 6 7 8 9 10 …… Biểu tượng 1 : Tô đen 1 dòng text , và nhấp vào biểu tượng này  hyperlink Text : Nội dung link hiển thị Link : Kết nối đến 1 trang html khác Target : _blank : click hiển thị new window _self : thay trang đang hiển thị _top : trên cùng …. Tittle : tiêu đề link Access key, Tab index hỗ trợ tìm kiếm Biểu tượng 2 : Email Link Text : Tên hiển thị cho email link Biểu tượng 3 : Mỏ neo. Đặt tên mỏ neo là : linktrangchu. Khi có dấu hiệu quay về tại mỏ neo này sẽ dễ dàng. Thuận tiện việc : quay về đầu trang, hay link tới cuối trang, đầu trang, nơi có link trang chủ v….v…   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 12 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   Biểu tượng 4 : Tạo Table Rows : số hàng Columns : số cột Table width : độ rộng table – pixel,% Border thickness : Độ dày viền khung Cell padding : khoảng trống trong td Cell spacing : độ rộng viền khung Header : Tùy theo người dùng muốn đặt mặc định vị trí header Align caption : Default : giữa trên dưới Top : trên, Bottom : dưới Left : trái, Right : phải Biểu tượng 5 : insert DIV tag (sẽ nói rõ ở phần CSS) Biểu tượng 6 : Images Biểu tượng 7 : Flash Biểu tượng 8 : Date       ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 13 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   4) MEDIA a. Hình ảnh :  Chèn hình : B1 : Nhấp vị trí cần chèn hình B2 : Menu Insert  Image B3 : chọn file hình B4 : Alternate Text :Text thay thế cho hình Long description : Gõ url của file mô tả hình. Có thể sử dụng java  Thuộc tính : Vspace/Hspace : Khoảng cách từ hình tới chữ theo dọc/ngang W : Bề rộng của hình H : Bề cao của hình Src: địa chỉ,tên file hình Link : địa chỉ trang web sẽ hiện khi user click vào hình Target : chỉ định nơi mà trang web liên kết sẽ mở ra. Low src : tên file hình phụ - kích thước nhỏ hơn(đen trắng hay xám) Alt : dòng chữ hiện ra khi người xem đưa mouse vào hình hoặc khi browser không hiện được hình Border : độ dày cảu đường viền quanh hình. Nếu để bằng 0 thì hình sẽ không có viền Align : cách canh của hình so với văn bản xung quanh (left, right) Crop : dùng để cắt bớt hình (cho nhỏ lại) Brightness and Contrast : chỉnh độ sáng, độ tương phản của màu trong hình   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 14 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3    Chèn Image Placeholder : Sử dụng khi bạn muốn đặt chỗ trước để chèn hình sau(do hiện tại chưa có hình) như sau : B1 : Nhắp vị trí muốn chèn B2 : Menu Insert  Image Object  Images Placeholder hoặc Insert Bar  tab Common  Images  Images Placeholder Đặt tên, height, width, color, Alternate text Muốn đưa hình vào vị trí thì nhắp đúp vào Image placeholderchọn hình  Chèn Rollrover Images Khi đưa chuột vào hình, hình sẽ đổi thành 1 hình khác. Image name : tên Original image : chọn hình thứ nhất, hình này hiện ra trước tiên Rollover image : chọn hình 2, hình này sẽ hiện ra hinh user đưa chuột vào hình 1 Preload rollover image : load 2 hình khi trang web vừa nạp xong Alternate Text : chữ hiện thay thế cho hình khi hình chưa hiện URL : địa chỉ web liên kết khi user click vào hình   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 15 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3   b. FLASH  Chèn Flash vào website : Menu Insert  Media  Flash Chọn file Flash trong mục URL  Chèn Flash video : Menu Insert  Media  Flash Video Chọn file flash hoặc gõ URL của file flash trong mục URL. Chỉ định size Ok   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 16 CHƯƠNG I TÌM HIỂU CÔNG CỤ ADOBE DREAMWEAVER CS3    Flash button Menu Insert  Media  Flash button Style : Kiểu nút Button Text : chữ trong nút Bg color : màu nền Save as : tên file flash được tạo ra Link : địa chỉ liên kết  Flash Text Giống Flash button nhưng chỉ chứa text Insert  Media  Flash Text Hiệu chỉnh tương đương Glash Button  Chèn nhạc, chèn phim Insert  Media  Plugin  chọn file nhạc/phim Chỉnh kích thước : kéo cho lớn ra     ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 17 LẬP TRÌNH WEBSITE BÁN HÀNG TĨNH – KHÔNG KẾT CHƯƠNG II NỐI CSDL   II. CHƯƠNG II : LẬP TRÌNH WEBSITE BÁN HÀNG TĨNH – KHÔNG KẾT NỐI CSDL 1) Sơ đồ thiết kế website V2 Company V2.com.vn All in one Trang chủ Giới thiệu Laptop Dell Inspiron Dell Studio   Sản phẩm Khuyến mãi Desktop Dell Vostro Tuyển dụng Hỗ trợ Liên hệ Mặt hàng khác Diamond ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 18 LẬP TRÌNH WEBSITE BÁN HÀNG TĨNH – KHÔNG KẾT CHƯƠNG II NỐI CSDL   2) Giao diện website bán hàng tĩnh a. Trang chủ : index.html   ĐỒ ÁN MÔN HỌC : HOÀNG PHI VŨ - 0851010336 Trang 19