4.1.3.1 Cài đặt chương trình chạy PHP – MYSQL
Đây là phần mềm giúp bạn tạo ra một server ảo localhost trên máy tính của bạn để có thể test code
Ưu điểm: support toàn đồ xịn từ apache, php, mysql và nhất là hỗ trợ ZEND, và htaccess...
Hướng dẫn cài đặt: Download phiên bản Vertrigo_223 tại địa chỉ: http://vertrigo.sourceforge.net
Chuẩn bị: Cũng như tất cả các chương trình tạo localhost khác, nó đòi hỏi phải được cài trong một chiếc computer "sạch sẽ", nghĩa là không có các chương trình liên quan đến webserver được cài đặt trước đó như AppServ, MySQL, Php...
Nếu có, bạn phải xóa "tận gốc" chúng (trước khi xóa, phải vào Start -> Settings -> Control Panel -> Administrative Tools -> Services để tắt các dịch vụ như Apache, MySQL), xóa luôn cả file php.ini trong thư mục C:\windows rồi khởi động lại máy. Cài đặt:
Bạn chạy file cài đặt, lựa chọn ngôn ngữ --> Next -> I Agree -> Next -> chọn thư mục cài đặt (D: \VertrigoServ) --> Next -> Install.
Biểu tượng VertrigoServ xuất hiện trên màn hình dưới dạng:
Hình 4.2 Cài đặt khởi động phẩn mềm
Hình 4.3 Bên dưới System Tray
Nếu hình chữ thập trong icon màu xanh, tức là server đang chạy. Màu đỏ - đang tắt. Màu vàng – đang khởi động.
Webroot trong trường hợp này sẽ là D: \VertrigoServ\www\
Hình 2.5 Thư mục Webroot D: \VertrigoServ\www\ Để kiểm tra xem Webserver có hoạt động hay không bạn gõ vào trình duyệt http://localhost hoặc http://127.0.0.1
4.1.3.2 Giới thiệu class Kết nối và tuy vấn SQL (mssql.class.php)
<?php // Public function class lg_mssql { var $conn; var $db_name; var $count_query = 0; // init
public function __construct( $host , $db_user , $db_pass , $db_name) {
$this->$db_name = $db_name;
$this->conn = mssql_connect($host , $db_user, $db_pass); mssql_select_db($db_name , $this->conn);
}
public function __destruct() {
@mssql_close( $this->conn ); }
// select - insert - update - delete public function query ( $sql ) {
return @mssql_query($sql , $this->conn); }
public function select ( $table , $where = "" , $clause = "" ) {
$this->count_query++;
$sql = "SELECT * FROM ".$table; if (trim($where) != "")
$sql .= " WHERE ".$where; if (trim($clause) != "")
$sql .= " ".$clause;
return @mssql_query($sql , $this->conn); }
public function insert ( $table , $feild , $values ) {
$this->count_query++; (adsbygoogle = window.adsbygoogle || []).push({});
$sql = "INSERT INTO ".$table; if ( trim($feild) != "" )
$sql .= " (".$feild.")";
$sql .= " VALUES (".$values.") SELECT @@IDENTITY as incId;"; @mssql_query($sql, $this->conn );
return mssql_insert_id($this->conn); }
public function update ( $table , $feild , $value , $where ) {
$this->count_query++;
$sql = "UPDATE $table SET $feild = '".$this->inj_str($value)."'"; if ( trim($where) != "" )
$sql .= " WHERE ".$where; return @mssql_query($sql, $this->conn ); }
public function delete ( $table , $where = "" ) {
$this->count_query++;
$sql = "DELETE * FROM ".$table; if (trim($where) != "")
$sql .= " WHERE ".$where; @mssql_query($sql , $this->conn); $this->optimize($table);
}
public function execute ( $procedure ) {
$stmt = @mssql_init($procedure, $this->conn); return mssql_execute($stmt);
}
// optimize
public function optimize ( $table_name ) {
return false; }
// fetch
public function fetch ( $rs ) {
return @mssql_fetch_array( $rs ); }
// seek
{
return @mssql_data_seek($rs, $id); }
// Trả về - số records - của - 1 Result Set public function num_rows ( $rs ) {
return mssql_num_rows( $rs ); }
// Hàm này - dùng để - chuyển - các ký tự - đặc biệt - sang - thể Escape - chống - Hack - SQL Injection
public function inj_str ( $txt ) {
return mysql_escape_string($txt); } (adsbygoogle = window.adsbygoogle || []).push({});
public function escape ( $txt ) {
return mysql_escape_string($txt); }
public function error() { return mysql_error($this->conn); } } ?> 4.1.4 Tổng quan về jQuery jQuery là gì?
jQuery là một Javascript Framework, hỗ trợ các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất. jQuery được khởi xướng bởi John Resig (hiện là trưởng dự án của Mozzila) vào năm 2006, jQuery có mã nguồn mở và hoàn toàn miễn phí. jQuery có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình tham gia hoàn thiện, phát triển và viết Plugin.jQuery luôn là lựa chọn trước tiên của mình trong công việc khi phát triển các dự án website.
Tại sao dùng jQuery ?
jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức so với cách viết javascript thông thường.
Bên cạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web.
Học jQuery rất đơn giản, nếu như bạn nắm vững CSS, bạn có thể tiếp cận và sử dụng jQuery nhanh chóng.
Ưu điểm của jQuery
Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOM, AJAX…) Tương thích nhiều trình duyệt web phổ biến.
Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết. Ít xung khắc với các thư viện Javascript khác.
Plugin phong phú.
Để sử dụng jQuery bạn phải có thư viện do jQuery cung cấp bằng cách truy cập vào http://jquery.com để Download phiên bản mới nhất (Hiện tại khi PT viết bài này là phiên bản jQuery 1.7.2).
Hoặc có thể sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau: http://code.jquery.com/jquery-1.7.2.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
4.1.5 Tổng quan về CSSCSS là gì? CSS là gì?
CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc, font chữ, . . ..
Thế mạnh của CSS
- Tách riêng phần định dạng ra khỏi nội dung trang web.
- CSS giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất. Nó giúp bạn tiết kiệm công sức rất nhiều trong việc thiết kế giao diện.
- Do được tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng hơn, giúp bạn thuận tiện hơn trong việc chỉnh sửa giao diện. Kích thước của file .html cũng được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng nhiều lần (cache), do đó giúp trang web được load nhanh hơn.
4.1.6 Tìm hiểu về SEO, các công cụ tìm kiếm, phương thức hỗ trợ ( keyword, meta, description, xhtml, link ... meta, description, xhtml, link ...
4.1.6.1 Khái niệm về SEO
SEO là chữ viết tắt của Search Engine Optimization (tối ưu hóa công cụ tìm kiếm). SEO là một tập hợp các phương pháp nhằm nâng cao thứ hạng của một website trong các trang kết quả của các công cụ tìm kiếm và có thể được coi là một tiểu lĩnh vực của tiếp thị qua công cụ tìm kiếm.
4.1.6.2 Một số công cụ dùng cho nghiên cứu:KEYWORD KEYWORD
Từ khóa đặt trong <title> tag
Đây là một trong những nơi quan trọng nhất mà marketer cần để từ khóa bởi vì những gì được viết trong <title> tag sẽ được thể hiện trong trang kết quả tìm kiếm như là tên trang web của bạn. Thẻ tựa đề phải ngắn (tối đa là 6 đến 7 từ) và từ khóa phải nằm gần phần đầu của tựa đề.
Từ khóa trong URL
Mật độ từ khóa trong bài viết Từ khóa trong anchor text
Từ khóa trong heading (tag <H1>, <H2> …) Từ khóa trong phần đầu của bài viết/ văn bản Từ khóa trong <alt> tag (adsbygoogle = window.adsbygoogle || []).push({});
Từ khóa trong thẻ meta (meta tag) Khoảng cách từ khóa
Thẻ META
Meta tag : là các thẻ Meta được sử dụng ở phần Header của Html nhằm tăng khả năng tìm kiếm các từ khoá của các công cụ tìm kiếm. Vị Trí Xuất Hiện : <head> Meta tag xuất hiện tại đây </head>
Các thẻ Meta Tags được khuyến khích sử dụng: Meta Content Language
Meta Content Type Meta Description
Thẻ này dùng để mô tả nội dung của một trang web. Nội dung của thẻ này nên được viết ngắn gọn và xúc tích khoảng từ 20 đến 25 từ hoặc ít hơn. Đây là thẻ được hầu hết các SE sử dụng để hiển thị nội dung kết quả tìm kiếm.Thẻ này được khuyến khích sử dụng và nên viết một cách xúc tích nhất nhằm thu hút người dùng bấm vào website của bạn từ kết quả tìm kiếm. Thông thường nếu không dùng thẻ này thì các SE như google cũng sẽ tự động tạo khi index nội dung website. Tuy nhiên bạn nên dùng bởi vì đôi khi các mô tả được index tự động sẽ không được như ý của bạn.
Ví dụ: <Head>
<meta name="keywords" content="Thông tin doanh nghiệp, liên minh doanh nghiệp, tiêu dùng thông minh" />
<meta name="description" content="Là thẻ tiêu dùng thông minh được triển khai trên kênh tiêu dùng ưu đãi www.giaquatot.com ; www.giaquatot.net ; www.giaquatot.vn
thuộc bản quyền của GIÁ QUÁ TỐT. " />
<meta name="copyright" content="Copyright (c) 2011 by www.scrabsoftware.com - Thiet ke website da nang,Quang ba web,Quang ba thuong hieu, Quang cao tren Google" />
<meta name="robots" content="index, follow" /> </Head>
DESCRIPTION
Google rất chú ý đến nội dung trong thẻ DESCRIPTION của trang web, nó được lấy để làm nội dung mô tả của kết quả tìm kiếm cũng như phân tích, đánh chỉ mục để phục vụ cho quá trình tìm kiếm dữ liệu.
Đứng trên khía cạnh người tìm kiếm, khi họ thực hiện tìm kiếm một cụm từ nào đó và kết quả sẽ hiển thị trên trang tìm kiếm. Tại thời điểm này, họ sẽ thực hiện xem xét mình sẽ bấm vào liên kết nào trên kết quả tìm kiếm bằng cách đọc tiêu đề và nội dung mô tả của kết quả tìm kiếm để đánh giá sơ lược về nội dung họ cần. Sau khi thực hiện đánh giá, họ mới bấm vào liên kết để đến nội dung chi tiết của trang web họ cần tìm kiếm thông tin.
Hãy sử dụng 20-40 từ để mô tả cô đọng về nội dung của trang web và cố gắng sử dụng các từ khóa mục tiêu vào nội dung này.
SITE MAP
Sitemap là một danh sách các trang của một trang web được thiết kế dành cho trình thu thập dữ liệu hoặc người sử dụng . Nó có thể là một tài liệu dưới hình thức bất kỳ được sử dụng như một công cụ lập kế hoạch thiết kế web, hoặc là một page liệt kê các trang trên một trang web, thường tổ chức theo thứ tự thời gian. Điều này giúp du khách và công cụ tìm kiếm dễ dàng tìm thấy các trang trên trang web.“Bản đồ trang”, là thể các tổng quan về hệ thống website của bạn. Sitemap thường được lưu trữ dưới định dạng XML, hoặc HTML trên website.
Sitemap là cách dễ dàng khi webmaster muốn thông báo cho công cụ tìm kiếm về các trang trên trang web của họ.
Giaquatot.com sử dụng http://www.xml-sitemaps.com/ để tạo site map miễn phí
LINK
Trong SEO, liên kết hay còn gọi là link là một trong yếu tố quan trọng nhất để nâng hạng trên Google. Vậy chúng ta biết gì về liên kết ?
Thường khi bạn đặt đúng title thì rank của bạn sẽ cao, nhưng trong trường hợp liên kết đặt trên với một title liên quan (không cần đúng) vẫn có thể có nhiều giá trị hơn liên kết phía dưới với đúng title. Như trong hình trên thì trang B mặc dù có title là thiết kế web nhưng vẫn không bằng được trang A có title liên quan đến thiet ke web.
External link có nhiều ảnh hưởng hơn Internal link.
Nếu một trang được link từ các trang web bên ngoài sẽ tốt hơn được link từ các trang bên trong.
Liên kết từ site mới sẽ tốt hơn link từ site đã có link trước đó.
Đây là một sự thú vị, nhưng bạn có thể sử dụng điều này để tăng PR cho website. Liên kết từ site có độ trust cao sẽ rất có ích trong ranking.
Link bánh xe: Khi bạn sở hữu một hệ thống link wheel, có nghĩa bạn đang nắm trong tay dịch vụ SEO rất hiệu quả có thể được sử dụng một cách dễ dàng để cải thiện thứ hạng website của bạn trên các search engine.
Link Wheel là gì?
Về cơ bản link wheel là việc tận dụng sức mạnh của các loại web 2.0 để xây dựng các backlink theo vòng tròn khép kín, dựa vào các web 2.0 vệ tinh để tăng thêm cường thêm sức mạnh cho mục tiêu cuối cùng. (adsbygoogle = window.adsbygoogle || []).push({});
Hình 4.5 Backlink theo vòng tròn khép kín
4.1.7 Một số công cụ hỗ trợ thiết kế giao diện Wesite
- CorelDRAW X4, Adobe InDesign CS6, Vertrigo, Photoshop, phpDesigner 7, FlashFXP…
4.2 Giao diện website
4.2.1 Phân hệ khách hàng Trang chủ
Trang mặc định ban đầu khi khách hàng truy cập vào Website giaquatot.com (Trang chủ) với chức năng hiển thị địa điểm nổi bật và địa điểm mới. Khi muốn xem thông một địa điểm nào đó, khách hàng có thể xem địa điểm trên Trang chủ, hoặc duyệt qua danh mục địa điểm ở góc trái của Website, hoặc có thể tìm kiếm theo tên địa điểm,Tỉnh/thànhphố, quận/huyện, danh mục của địa điểm.
Hình 4.6 Giao diện trang chủ website giaquatot.com
Giới thiệu về website giaquatot.com, thẻ GQTCard, điều khoản sử dụng, hợp tác kinh doanh, tầm nhìn, sứ mệnh… Giúp đối tác doanh nghiệp và khách hàng yên tâm về dịch của công ty.
Hình 4.7 Giao diện trang giới thiệu
Các trang về danh mục địa điểm:
Liệt kê các địa điểm chấp nhận thẻ theo danh mục phía bên trái website: Du lịch, mua sắm, giáo dục, giải trí…
Hình 4.8 Giao diện trang địa điểm giảm giá
Trang chi tiết sản phẩm: Mô tả thông tin chi tiết về địa điểm
Khi muốn xem thông tin chi tiết của sản phẩm, người tiêu dùng có thể click chuột vào ảnh của địa điểm hoặc tên của địa điểm đó. Trang này có chức năng mô tả Chi tiết về địa điểm được giảm giá khi sử dụng thẻ GQTCard gôm: Hình ảnh, % giảm giá, điều kiện sử dụng, thông tin liên hệ…
Hình 4.9 Giao diện trang chi tiết địa điểm giảm giá
Trang đăng ký:
Để đăng ký tài khoản, khách hàng phải điền đầy đủ các thông tin sau: Họ tên, địa chỉ, Tỉnh, Thành phố, mật khẩu, Email, điện thoại, Fax (không bắt buộc), đồng gửi thông báo (không bắt buộc).
Hình 4.10 Giao diện trang đăng ký
Trang đăng nhập: Khách hàng nhập (Email) và mật khẩu.
Hình 4.11 Giao diện trang đăng nhập
Nếu đăng nhập thành công website sẽ chuyển người dung đến trang quản lý thông tin cá nhân
Hình 4.12 Giao diện trang quản lý thông tin cá nhân
Trang mua thẻ: Kiểm tra người dùng qua session nếu đã đăng nhập thông tin cá nhân sẽ tự động load vào form người dùng sẽ cần nhập thêm loại thẻ muốn mua, hình thức thanh toán. Nếu dùng phương thức thanh toán qua ví điện tử bảo kim, nếu chưa biết cách thức thanh toán người dùng click vào hướng dẫn website sẽ chuyển hướng đến trang web của bảo kim hướng dẫn sử dụng phương thức thanh toán này: https://www.baokim.vn/payment_guide/giaquatotcom.html .
Sau khi bấm submit hệ thống kiểm tra thông tin người dùng nhập vào nếu hợp lệ thì sẽ lưu thông tin đơn hàng vào CSDL và gửi email thông báo cho người dùng và quản lý của giaquatot.com để tiếp tục công tác chyển thẻ và theo dõi đơn hàng.
Hình 4.13 Giao diện trang mua thẻ & thanh toán
Trang đăng nhập quản trị:
Tại trang này yêu cầu quản trị nhập tên đăng nhập và mật khẩu.
Hình 4.14 Giao diện trang đăng nhập quản trị
Quản lý địa điểm giảm giá
Chức năng: (adsbygoogle = window.adsbygoogle || []).push({});
Thêm mục cho danh mục “Địa điểm” kích chuột vào nút trong cột “Thêm”.
Sửa tên mục: kích chuột vào nút có tên “Sửa” hiển thị trang sửa tên mục Gõ tên mục cần sửa, thông tin “Nhóm”-“Hiển thị”-“Nổi bật” để nguyên theo mặc định kích chuột vào nút .
Xóa tên mục: kích chuột vào nút có tên “Xóa” hiện trang thông báo chọn “OK” nếu đồng ý chọn “Cancel” nếu không đồng ý.
Hình 4.15 Giao diện trang quản lý địa điểm giảm giá Xem, Sửa, Xóa, Đăng bài viết trong danh mục “Địa điểm”:
Hình 4.16 Danh sách các địa điểm đã đăng
Đăng bài viết: Sau khi kích chuột vào nút xem để hiển thị danh sách các bài viết đã đăng, kích chuột vào nút để đăng địa điểm mới.. Sau khi hoàn tất nội dung bài viết ta chọn vào nút để đăng tải bài viết cho website.
Quản lý loại tin thẻ
Mục đích: Cập nhập các loại thẻ mà G.B.S cung cấp ra thị trường. Chức năng:
Thêm, Xem, Xóa, Sửa loại thẻ.
Hình 4.18 Danh sách loại thẻ G.B.S cung cấp
Quản lý thông tin thẻ
Mục đích: Cập nhập thông tin khách hàng mua thẻ , cập nhật trạng thái của thẻ đang hoạt động hay chưa.
Chức năng:
Thêm, Xem, Xóa, Sửa xóa thông tin thẻ.