document tailieukhoahoc kho tài liệu bách khoa

PHẦN MỀM VÀ CƠNG CỤ THỰC HÀNH Máy tính kết nối Internet Cài trình soạn thảo để viết mã chương trình ví dụ chương trình sau:  Notepad++  Sublime Text  Dreamwave  CoffeeCup Free  phpDesigner Chú ý:Trong học dùng chương trình sublime text  Tải chương trình Sublime Text link sau: https://www.sublimetext.com/  Cài đặt chương trình máy tính bắt đầu lập trình tạo trang web Thực hành học: Bước 1:Khởi động chương trình Sublime Text: Hình 1: Màn hình trình soạn thảo mã Sublime Text Bước 2:Lưu tệp tin untitle với tên có phần mở rộng html để phần mềm sublime text có gợi ý câu lệnh Bước 3: Thực hành nhập mã lệnh HTML phần nội dung học hướng dẫn (Với phần mềm soạn thảo khác bạn làm tương tự) Phần mềm WebServer WAMP SERVER: Cách thức cài đặt phần giảng Địa tải về: www.wampserver.com/en/ Bước 1: Truy cập www.wampserver.com/en/Vào mục Download để chọn tải phiên mà windows bạn dùng Ví dụ dùng windows 7.0 64 bit bạn tải WAMP SERVER(64 bits & PHP 5.6.15 & PHP 7) Bước 2: Cài đặt WampServer máy tính  Chọn tệp tin tải để cài đặt làm theo bước chương trình: Chú ý để cài phiên WampServer phải đảm bảo số u cầu: o Khơng có phiên cũ WampServer cài đặt máy o Cài đặt phân phối Redistributable Microsoft Visual C++ o Tắt dịch vụ IIS Windows Bước 3: Khởi động chương trình WampServer để chạy thử  Sau khởi động thành cơng, cơng cụ có biểu tượng chữ W mầu xanh  Mở trình duyệt web gõ vào địa chỉ: localhost Sẽ mở hình thơng báo WampServer sau: Trình duyệt web: Internet Explorer, FrireFox, Chrome ,Cốc Cốc, Phần 1: HTML Bài giảng 1: Giới thiệu HTML HTML ? HTML ngơn ngữ đánh dấu dùng để mô tả trang web  HTML viết tắt của: Hyper text Markup Language – Ngôn ngữ dánh dấu siêu văn  Một ngôn ngữ đánh dấu tập hợp thẻ đánh dấu – Markup Tag  Tài liệu HTML(trang web) mô tả thẻ HTML  Mỗi thẻ HTML mô tả nội dung khác Để tìm hiểu HTML bắt đầu sau: Bước 1: Khởi động chương trình Sublime Text (hoặc chương trình soạn thảo văn bất kỳ) Bước 2: Lưu tập tin với phần mở rộng “.html” giả sử lưu vào thư mục: “D:/Edumall/Laptrinhweb/bai1.html” Bước 3: Thực gõ vào dòng mã HTML sau: Bài học tìm hiểu HTML

VÍ DỤ VỀ TRANG WEB ĐƠN GIẢN

Thẻ tiêu mục h1 Thẻ tiêu mục h2 Thẻ tiêu mục h3 Thẻ tiêu mục h4 Thẻ tiêu mục h5 Thẻ tiêu mục h6

Đoạn văn bản

Hình 2: Màn hình nội dung tệp tin HTML với thẻ HTML trình soạn thảo hiển thị khác mầu để dễ phân biệt Bước 4: Vào thư mục lưu tệp tin ví dụ: D:\Edumall\Laptrinhweb\  Trỏ chuột vào tệp tin HTML tạo trước chọn mở với trình duyệt web  Kết sau: Hình Kết hiển thị trình duyệt web Tóm tắt: Một tài liệu HTML (Hay gọi trang web) có cấu trúc đơn giản sau: Tiêu đề trang web Nội dung trang web Bài giảng 2: Chi tiết thẻ HTML (phần 1)  Chỉ báo: Thơng báo cho trình duyệt biết loại tài liệu html Các thẻ HTML gồm cặp thẻ mở thẻ đóng   Thẻ : Là thẻ mở thông báo bắt đầu tài liệu web thẻ đóng báo hiệu kết thúc tài liệu web Cặp thẻ : Dùng để mô tả cấu trúc đầu trang web Một trang web thường chia làm phần đầu (header) sau phần thân (body) Lồng cặp thẻ thường có thẻ để quy định tiêu đề trang web Ví dụ: Bài học số - Tìm hiểu thẻ HTML Chú ý: Nếu bạn viết trang web mà thấy tiếng Việt không font chữ chưa có thẻ quy định phần mã hóa (encode) trang Để báo trình duyệt biết kiểu mã hóa trang web dùng thẻ bên cặp thẻ sau:  Thẻ

: Trong trang web cần ngắt văn thành đoạn dùng thẻ p sau:

Đoạn văn 1

Đoạn văn 2

Kết trình duyệt có dạng sau: Đoạn văn Đoạn văn Bài giảng 3: Chi tiết thẻ HTML (phần 2)  Thuộc tính tiêu đề thẻ

: Trong thẻ mở

dùng thuộc tính title =”Nội dung tiêu đề” để đặt tiêu đề cho đoạn Tiêu đề đoạn người dùng di chuột lên đoạn tương ứng Ví dụ:

Đoạn văn đặt tiêu đề

 Cách định kiểu cho đoạn văn bản: Để định kiểu cho đoạn văn ta dùng thuộc tính style=”mã kiểu css”; Ví dụ: Để bơi mầu cho đoạn văn thành mầu xanh có mã mầu dạng hexa #0000FFthực sau:

Đoạn văn đặt tiêu đề

 Tạo khối văn dùng thẻ Khối văn số 1Khối văn số 2 Kết trình duyệt Bài giảng 4: Định dạng Text HTML Để định dạng văn trang web ví dụ làm đậm, làm nghiêng, làm bật, gạch ngang, số dưới, số  Thẻ : Dùng để làm đậm văn  Thẻ : Dùng để làm nghiêng đoạn văn  Thẻ : Làm bật  Thẻ : Gạch ngang  Thẻ : Chỉ số  Thẻ : Chỉ số Ví dụ: 1 Văn cần định dạng béo 2 Văn định dạng nghiêng 3 Đoạn văn làm nổi bật sau 4 Đoạn văn bị gạch ngang 5 Văn có số : X1, X2, ,Xn 6 Văn có số : X1 + X2+ +Xn Kết quả: Bài giảng 5: Danh sách HTML Có kiểu danh sách HTML  Kiểu danh sách không theo trật tự sử dụng thẻ:

Các hạng mục bên sử dụng thẻ

Ví dụ:

• Bài học số 1
• Bài học số 2
• Bài học số 3
• Bài học số 4
• Bài học số 5

 Kiểu danh sách có trật tự sử dụng thẻ:

1. Bài học số 1
2. Bài học số 2
3. Bài học số 3
4. Bài học số 4
5. Bài học số 5

Với danh sách kiểu trật tự

, thay đổi kiểu chấm đầu dòng(bullet) cách sau: Sử dụng thuộc tính style=”list-style-type:kiểu_bullet”trong thẻ
Trong đó: Tròn: list-style-type:circle Vng: list-style-type:square Khơng có bullet:list-style-type:none Với danh sách kiểu có trật tự
: Chúng tay thay đổi kiểu số trật tự sau: Sử dụng thuộc tínhtype=”kiểu số” Trong đó: Chỉ số kiểu chữ số (1,2, ,N): type=”1” Chỉ số kiểu chữ in hoa (A,B, ,Z): type=”A” Chỉ số dạng chữ in thường (a,b, ,z): type=”a” Chỉ số dạng chữ in La Mã (I,II, ,N): type=”I” Chỉ số dạng chữ thường La Mã (i, ii, ,n): type=”i” Kết ví dụ sau: Phần 2: CSS Bài giảng 6: Giới thiệu CSS Css Cascading Style Sheets hệ thống mã lệnh dùng để trang trí trang web Có 03 cách chèn mã lệnh CSS vào trang web Chèn trực tiếp mã lệnh vào thẻ HTML qua thuộc tính style=”mã CSS” Viết nội trang web qua thẻ Viết mã CSS trang chuyên biệt có phần mở rộng “.CSS” sau trỏ đường dẫn tham chiếu trang web Cách 1: Chèn trực tiếp CSS vào thẻ HTML, ví dụ sau: Nội dung chèn kiểu Kết bơi dòng chữ sau thành mầu đỏ: Nội dung chèn kiểu Cách 2: Viết nội trang web qua khối thẻ phần đầu tài liệu HTML h2{ background-color: #000000} /* mầu đen * / Với đoạn mã trên, trình duyệt gặp thẻ tự động gán thuộc tính màu mầu đen Cách 3: Viết mã lệnh tệp tin tham chiếu trang Đây cách phổ biến dùng chung mã CSS cho nhiều trang Để thực hành: Các bạn viết nội dung mã lệnh CSS tệp tin đặt tên là: style.css style.css: p{ bachground-color: yellow; font -size: 50px; color:#000000; } Trên trang muốn sử dụng mã lệnh CSS viết tệp tin style.css ta làm sau: Thêm thẻ vào phần đầu tệp sau:

Đoạn văn ảnh hưởng mã CSS

Kết sau: ĐOẠN VĂN BẢN Trong CSS đặt tên lớp tập hợp loạt câu lệnh áp dụng cho đối tượng có khai báo sử dụng lớp Một lớp bắt đầu dấu chấm(.) theo sau tên lớp viết liền .class1 { background-color: yellow; } Bài giảng 7: Liên kết HTML - LINK Trong trang web sau này, muốn áp dụng loạt câu lệnh cho đối tượng, việc viết thêm thuộc tính: class="tên_lớp" Bài giảng 8: Ảnh HTML Bài giảng 9: Bảng HTML Bài giảng 10: IFrame Phần 3: JAVASCRIPT - FORM Bài giảng 11: Tìm hiểu JavaScript Xem giảng tệp tin mẫu kèm theo Bài giảng 12: Biểu mẫu HTML Xem giảng tệp tin mẫu kèm theo Phần 4: JQUERY Bài giảng 13: Giới thiệu JQuery Xem giảng tệp tin mẫu kèm theo Bài giảng 14: Các công cụ thực hành JQuery Xem giảng tệp tin mẫu kèm theo Phần 5: PHP - MYSQL - WAMP SERVER Bài giảng 15: WAMP SERVER Bài giảng 16: Giới thiệu PHP Xem giảng tệp tin mẫu kèm theo Bài giảng 17: Biển số PHP Xem giảng tệp tin mẫu kèm theo Bài giảng 18: Dữ liệu PHP Xem giảng tệp tin mẫu kèm theo Bài giảng 19: Các toán tử Xem giảng tệp tin mẫu kèm theo Bài giảng 20: Các cấu trúc rẽ nhánh lặp Xem giảng tệp tin mẫu kèm theo Bài giảng 21: PHP FORM Xem giảng tệp tin mẫu kèm theo Bài giảng 22: MySQL Bài giảng 23: Kết hợp PHP MySQL Phần 6: Thực hành Bài giảng 24: Giới thiệu ứng dụng  Ứng dụng quản lý cửa hàng gồm chức  Nhập sản phẩm  Xem danh sách sản phẩm kho hàng  Xem hóa đơn bán hàng theo ngày Bài giảng 25: Cấu trúc tệp tin  vheader.php o Tệp tin chứa menu ứng dụng    vfooter.php o Tệp tin chứa cấu trúc chân trang ứng dụng tệp tin vshop.js thư mục js o Tệp tin chứa mã lệnh js, jquery, ajax dbconn.php o Chứa mã lệnh kết nối, cập nhật, thêm, xóa liệu Bài giảng 26: Cấu trúc liệu ứng dụng Tạo sử liệu sau: Cấu trúc bảng:    vcompany (Thơng tin cơng ty) o comp_ID (Khóa chính) (INT) o comp_Name(Tên công ty) (VARCHAR ) o comp_logoURL(đường dẫn ảnh logo công ty) (VARCHAR) o comp_address(Địa công ty) (VARCHAR) vcuahang (Lưu thông tin cửa hàng) o shop_id (INT) o shop_name (VARCHAR) o shop_address (VARCHAR) o shop_phone (VARCHAR) vcustom (Lưu thông tin khách hàng) o custom_id (INT) o custom_name(VARCHAR) o custom_phone(VARCHAR)      o custom_status(VARCHAR) o custom_level(INT) vgroup (Thơng tin nhóm quản trị - phân quyền) o group_id (INT) o group_name (VARCHAR) o group_level (INT) o group_description (VARCHAR) vhinvoice(Thơng tin hóa đơn bán hàng) o invoice_id (INT) o custom_id (INT) o u_id (INT) o p_id (INT) o p_quantity o p_price (REAL) o p_total_money o shop_id (INT) o sell_date (DATETIME) vpcatalog(Thơng tin danh mục hàng hóa) o p_catid o p_catname o p_catdescription vproducts(Thông tin mặt hàng) o p_id (INT) o p_name (VARCHAR) o p_price o p_code (VARCHAR) o p_catid (INT) o p_total (INT) o p_image (VARCHAR) o p_created_date (DATETIME) vusers(Thông tin người dùng) o uid (INT) o uname (VARCHAR) o upass (VARCHAR) o group_id (VARCHAR) o ufirstname (VARCHAR) o ulastname (VARCHAR) o ubirthday (DATETIME) o uimage (VARCHAR) Các chương trình Procedure Các chương trình thuận tiện cho việc bảo trì, nâng cấp, website lớn Chương trình con: Xóa sản phẩm có pid trùng với tmp_pid SP_DELETE_PRODUCT BEGIN delete from vproducts where p_id = `tmp_pid`; END Chương trình trả thơng tin cơng ty SP_GET_COMPANY BEGIN if (comp_id < 0) then select * from vcompany ; else select * from vcompany where vcompany.comp_id = comp_id; end if ; END Chương trình trả danh sách khách hàng SP_GET_CUSTOM_LIST Begin if((`tmpCustomID` < 0) or (`tmpCustomID` = '')) then select * from vcustom; else select * from vcustom where `tmpCustomID` = `custom_id`; end if; End Chương trình trả mã khóa danh mục hàng hóa BEGIN select p_catid from vpcatalog where CONCAT(tmp_PCatName) = CONCAT(p_catname); END Chương trình trả tồn danh sách sản phẩm SP_GET_PRODUCT_TOTAL BEGIN if ((`tmp_pcatid` 0) then select * from vproducts where ((`tmp_pcatid` = `p_catid` ) and (`tmp_pid` = `p_id`)); else select * from vproducts where ((`tmp_pcatid` = `p_catid`) or (`tmp_pid` = `p_id`)) order by p_catid; end if; END Chương trình cập nhật sản phẩm SP_UPDATE_PRODUCTS begin if exists (select p_id from vproducts where vproducts.p_id = tmp_PId) then UPDATE `vproducts` SET `p_name`=tmp_PName, `p_price`=tmp_PPrice, `p_code`=tmp_PCode, `p_total`=tmp_PTotal, `p_image`=tmp_PImage, `p_catid` = tmp_PCatId WHERE vproducts.p_id=tmp_PId; else INSERT INTO `vproducts`(`p_name`,`p_price`, `p_code`, `p_total`, `p_image`,`p_catid`,`p_created_date`) VALUES (tmp_PName,tmp_PPrice,tmp_PCode,tmp_PTotal,tmp_PImage,tmp_PCatId,NOW()); end if; end Chương trình xem sản phẩm phân trang hiển thị SP_VIEW_PRODUCTS BEGIN if ((tmp_pid > 0) and (tmp_pcat_id 0) and (tmp_pcat_id > 0)) then select * from vproducts where (p_catid = tmp_pcat_id) and (p_id=tmp_pid) order by p_catid Limit tmp_start, tmp_num_per_page; end if; if ((tmp_pid