Web development (Phát triển web): Phần 2

Tiếp tục nội dung phần 1, phần 2 của Tài liệu Web development (Phát triển web) trình bày các chương như: Những thủ thuật trong thiết kế và lập trình, phát triển web, kỹ năng viết bài, dịch vụ Hostting, dịch vụ tên miền, Chiến lượt phát triển một trang web, luật bản quyền. Mời các bạn cùng tham khảo để nắm bắt những nội dung chi tiết.
Nội dung trích xuất từ tài liệu:
Web development (Phát triển web): Phần 2Phát triển Web 2012 Chương 5 : Những thủ thuật trong thiết kế và lập trình Tạo nút bằng PhotoshopHôm qua dạo chơi thấy một trang web nó tạo ra hàng nút dạng inset khá đẹp và hiện đại. Nên tôimày mò cách tạo ra được kết quả gần giống với hình gốc. Hôm nay chia sẻ với các bạn, nếu thíchcác bạn có thể làm theo, và nếu khéo kết hợp cũng tạo ra được nút di chuyển rất hiện đại.Bởi vì bài này không quá phức tạp và cũng ngắn gọn cho nên tôi làm tut hình cho nó lẹ và đỡmất thời gian hơn. Các bạn cũng có thể download phiên bản PSD về để xài. Nếu các bạn giốngtôi, luôn thích xem kết quả trước khi làm theo thì đây là hình cuối cùng chúng ta sẽ được.Bước 1: Để bắt đầu bạn mở một tài liệu mới trong Photoshop với kích thước khoảng 500×500Px. Chọn màu nền trước là màu đen và trên hộp công cụ chọn Rounded Rectangular Tool (U)với thông số Radius = 8 px và tạo một hình như hình dưới. 125 www.izwebz.com Demon WarlockPhát triển Web 2012Trong Layer Pallet chọn Layer Effect > Drop Shadow và thiết lập thông số như hình sau:Bước 2: Trên Layer Pallete Ctrl-Click vào layer shape vừa tạo ở bước 1 để load vùng lựa chọn.Sau đó vào Select > Modify > Contract và điền vào hộp thoại là 1pxBước 3: Trên Layer Pallet tạo một layer mới. Chọn công cụ Gradient (G) trong hộp công cụ vàđặt màu nền trước là màu #44464C và màu nền sau là màu #0F1114 kéo một đường theo hìnhmũi tên. 126 www.izwebz.com Demon WarlockPhát triển Web 2012Trong Layer Pallete chọn Layer Effect > Inner Shadow và thiết lập thông số như hình sau:Trên layer Pallet tạo thêm một layer nữa. Trên Layer Pallete Ctrl-Click vào layer shape vừa tạo ởbước 1 để load vùng lựa chọn. Sau đó vào Select > Modify > Contract và điền vào hộp thoại là2px. Di chuyển vùng chọn xuống dưới 2px bằng phím mũi tên trỏ xuống.Đổi màu nền trước thành màu #2D343D và giữ nguyên màu nền sau và kéo một đường như hìnhtrên. Bây giờ bạn có thể thêm chữ và là xong. Kết quả ở trên cùng của bài viết và bạn có thểdownload file PSD này về tham khảo. 127 www.izwebz.com Demon WarlockPhát triển Web 2012 Giỏ hàng và SessionCó rất nhiều bạn hỏi tôi về cách để thực hiện một giỏ hàng. Và cái thắc mắc của các bạn nằm ởchỗ làm sao để thêm nhiều món hàng. Chạy lui chạy tới trên toàn trang lựa chọn sản phẩm thậtưng ý cho mình. Sau đó rồi mới thanh toán, và các thông tin sản phẩm khi thanh toán đều đầy đủ.Điều quan trọng ở đây, cái mà các bạn chưa hiểu là làm cách nào, tuy rằng bạn đã sử dụngsession khá nhiều cho công việc của mình, nhưng về giỏ hàng bạn lại suy nghĩ quá cao siêu.Thực tế hãy tưởng tượng, bạn đã gọi là giỏ hàng tức là một chỗ để quăng sản phẩm vào. Tươngtự với chúng ta, khi khách hàng click mua món hàng thì chúng ta lấy nó quăng vào cái giỏSession của chúng ta ^^.Luôn luôn lưu ý rằng, ở tất cả những nơi mà muốn xử lý Seission thì :Đại loại như một mô hình mà tôi đã thiết kế cho Project của mình thế này.1. Hình ảnh sản phẩm 128 www.izwebz.com Demon WarlockPhát triển Web 20122. Chọn sản phẩm3. Đến và Xem giỏ hàngTrong đoạn code HTML bạn sẽ để đại loại như thế này cho nút chọn muavới title là một attribute chứa ID của sản phẩm cần ADD+ Đoạn code jquery để lấy giá trị của title gửi đến trang xử lý và tạo Session như sau : 129 www.izwebz.com Demon WarlockPhát triển Web 2012$(.buy).click(function(){ var str =$(this).attr(title); $.ajax({ url :create_order.php, data :id=+str, dataType :html, type : POST, success : function(html){ //Nội dung hiển thị khi hoàn thành } });});Với trang PHP create_order.phpNhư vậy cứ mỗi lần bấm Chọn mua thì sản phẩm đó sẽ được gửi đến trang create_order.php vàđược thêm vào mảng Session như trên hình. Sau khi đến trang GIỏ hàng, việc của bạn là chỉ việccho phép hiển thị các thông tin đã được lưu trong mảng 2 chiều đó và xử lý đặt hàng vàoDatabase chẳng hạn.Như vậy việc chính xác bạn thấy rằng chúng ta hoàn toàn có thể sử dụng Session để làm cho giỏhàng. 130 www.izwebz.com ...