Thiết kế web với iif
Các nội dung chính:
- Tạo trang tương tác với nội dung
- Upload file ảnh
- Gởi dữ liệu đến file xml.
- Gởi nội dung đến mail
Tạo liên kết chỉnh sửa khi có quyền admin
Đường dẫn Edit Nội dung khi có quyền ADMIN, nếu muốn HTML hiển thị khi có login vào Quản trị
** Thư viện javascrip kế thừa
<script src="/themes/lib_cm/common.js"></script>
Truy cập đường dẫn xem file: http://tenmien.com/themes/lib_cm/common.js
--------------------------
1. Thư viện javascrip kế thừa
2. Kết hợp hàm khác để hiện thị khi có xác nhận đăng nhập
3. Tham số sử dụng
4. Các hàm dùng
4.1. Ví dụ sửa bài viết
4.2. Thêm mới 1 bài biết trong bài viết cha
4.2.1 OpWAdd
4.2.2 OpWAdd_Cf
4.3. Ví dụ xóa bài viết
4.4. Danh sách bài viết con
4.5. Sửa ảnh
4.6. Sửa module
4.7. Sửa file html
4.8. Sửa cấu hình từ web config
4.9. Mở url chỉ định
--------------------------
---------------------------- ĐÃ XÓA VÌ PHÂN TRANG RIÊNG.. ỔN XÓA SAU.
2. Kết hợp hàm khác để hiện thị khi có xác nhận đăng nhập
* Hàm nếu
<iif-E>
<Val><iif-D>User:IsAdmin</iif-D> > 0</Val>
html...
</iif-E>
* Hàm include
<iif-H>
<GetVH><iif-D>User:IsAdmin</iif-D></GetVH>
<HtmlH><ifVH:1/>
html...
</HtmlH>
</iif-H>
* Hàm nếu
<iif-D>User:Login
<In>__html__</In>
</iif-D>
<iif-D>User:Login
<In>__html__</>__html_sai__</In>
</iif-D>
3. Tham số sử dụng
view:, tieude,tomtat,chitiet,chitiet_0
,thamso_01,thamso_02,thamso_03,thamso_04,thamso_05
,thamso_06,thamso_07,thamso_08,thamso_09,thamso_10
,thamsokieuso_01,thamsokieuso_02,thamsokieuso_03
,thamsokieungay_01,thamsokieungay_02
,dateupdate,stt,lenh,hidden
,tieudeseo,tuthoaseo,motatukhoaseo,tukhoaseohotro,nameurl (seo)
,lenh,html_body, html_temp
+ Cách hiển thị cột chỉ định:
cú pháp: view:cot1,cot2,cot_N
Ví dụ: view:tieude,tomtat
+ Cách thay đổi tiêu đề: view:,tieude-Tiêu đề,tomtat-Nội dung tóm tắt,chitiet-Mô tả chi tiết
Cấu hình thêm view=Nhom-[hide] -> ẩn tiêu đề nhưng để lại input nhập liệu
view=Nhom-[hide_] -> ẩn tiêu để vả ẩn luôn input, TH này dùng để set giá trị rỗng.
hidden: mục để hiện thị ra ô tít: yes/no , trong HTML where chú phải thêm Hidden=0 mới có tác dụng.
+ Cách thay từ kiểu nhập:
- Chuyển kiểu Input Text -> Auto Complete
-> View:tieude-Tên-atc:giá_trị_1;giá_trị_2;giá_trị_3
- Chuyển kiểu Input Text -> List chọn
-> View:tieude-Tên-list:giá_trị_1;giá_trị_2;giá_trị_3
-> muốn readOnly thì gõ dấu $ trước gt;gt1;gt2..
- Chuyển kiểu Input Text -> DropdownList
-> View:tieude-Tên-drdl:giá_trị_1;giá_trị_2;giá_trị_3
-> View:tieude-Tên-drdl:gt$dp;gt1$dp1;gt2$dp2 -> chế độ value và display với combobox
* Nếu lấy dữ liệu từ file xml đưa vào View:tieude-Tên-drdl:@phongban@vt1 vt2
Nghĩa là:lấy file phongban.xml cột 1(làm value) và cột 2 (làm display)
view=ThamSo_01-Giá trị-drdl:@phongban ->để trống lấy cột 1 (sau cột _SYS_KEY)
view=ThamSo_01-Giá trị-drdl:@phongban@1 2 ->lấy cột 1(làm value) và cột 2(làm display)
view=ThamSo_01-Giá trị-list:@phongban@1 -> list chỉ cân 1 cột
File xml nằm lại App_Data/xml_data/phongban.xml
Liên kết Test: /AdminSYS/NoiDung_Web_Edit.aspx?id=0&view=ThamSo_01-Giá trị
4. Các hàm dùng
4.1 Ví dụ sửa bài viết
OpWEdit(id,view) - sửa cửa sổ lớn, dài: 1024 , rộng:750
OpWEdit_Min(id,view) - sửa cửa sổ nhỏ, dài: 700, rộng:400
OpWEdit_Cf(id,view,width,height,config) - sửa cấu hình theo rộng, dài cửa sổ
OpWEdit_Set(id,view,set,width,height,config)
Ý nghĩa tham số:
- id: là mã số bài viết, thường là con số
- set:để khởi tạo giá trị ra, cú pháp set=TenTruong:Giá_Trị
Nếu là cột nhóm thì set khác: set=Nhom:A,B,C,D (sẽ hiện thị combobox có các tên nhóm)
- view: xem hướng dẫn
- config:
Ví dụ: Để thiết lập khi mở lên lưu luôn cấu hình config=auto_save
- width, height: chiều cao và chiều rộng cửa sổ hiện lên.
<iif-D>User:Login
<In> <a href="javascript:OpWEdit(MaID,'tieude,tomtat')"><i class="fa fa-edit fa-lg"></i></a></In>
</iif-D>
* Link gốc tham khảo truy cập: /AdminSYS/NoiDung_Web_Edit.aspx?id=MÃ_ID&view=tieude,thamso_01
-> Nhưng khi gọi qua hàm common.js chỉ cần truyền tham số
-------------------
4.2 Thêm mới 1 bài biết trong bài viết cha
4.3.1 OpWAdd(ID_Parent,view)
Ví dụ:
<iif-D>User:Login
<In><a href="javascript:OpWAdd(2,'tieude')"><i class="fa fa-plus-square fa-lg"></i></a></In>
</iif-D>
4. 3.2 OpWAdd_Cf(ID_parent,'view',width,height, 'img:w_max,h_max;w_out,h_out;path_save;sys;TênTrườngLưu;TênĐầuẢnh_')
sys: web / modu
w_max,h_max: có thể để trống sẽ w_max=w_out+100 ,h_max =h_out+100
THÊM XONG, TỰ CHUYỂN ĐẾN UploadImage
<iif-D>User:Login
<In><a href="javascript:OpWAdd_Cf(18,'tieude,tomtat',700,400,'img:350,350;270,270;/themes/macdinh/images;web;LinkAnhMin;tenanh_')"><i class="fa fa-plus-square fa-lg"></i></a></In>
</iif-D>
Xử lý trong TH khi tạo trang mới, dữ liệu trang mới khởi tạo mặc định HTML_Head, HTML_Temp, HTML_Body, Lenh
Sử dụng lệnh: OpWAdd_Cf(0,'tieude',700,400,'web_data_load:1')
với 1 là mã của ID trong web_data_load.xml , file này lưu tại App_Data/xml_data/web_data_load.xml
Truy cập và lưu file theo đường dẫn: http://tenmien.com/Adminxml/xml_getdata.aspx?file=web_data_load
-------------------
4.3. Ví dụ xóa bài viết
OpWDel(id)
Mở xóa nội dung ID=10
TÊN_HÀM_JS= OpWDel(10)
<iif-D>User:Login
<a href="javascript:OpWDel(MaID)"><i class="far fa-trash-alt"></i></i></a>
</iif-D>
4.4. Danh sách bài viết con
OpWList_Cf(idParent,listfield,width,height,config,sort)
Tham số:
idParent: mã bài viết cấp cha
listfield: danh sách trường hiển thị lưới danh sách, cách nhau dấu ,
- stt: sẽ sinh ra từ 1 đến tổng số bảng ghi
- vitrirec: vị trị bảng ghi lưu trong dữ liệu
- tieude: tiêu đề trang
- linkanhmin: đường dẫn ảnh.
Trong listfield cấu hình thêm:
vitrirec-Mô_tả_cột|input*
linkanhmin-Mô_tả_cột|img*
* stt khác với vitrirec
- stt: hệ thống đến +1 từ trên xuống dươi
- vitrirec: lấy dữ liệu được lưu trong DATA
Một số chú ý:
LinkAnhMin-Ảnh|img* -> có thêm |img* sẽ hiển thị ảnh ra ngoài , có thể có hay không, Ten hiển thị ra ngoài lưới
ViTriRec-TT|input* -> có thêm |input* sẽ hiển thị nút + và - để tăng giảm giá trị
view: dùng để truyền đến trang sửa bài viết
config: áp dụng để thêm xong 1 bài viết sẽ tự động chuyển đến thêm hình
img:800,800;600,600;/themes/macdinh/images;web;LinkAnhMin
Ví dụ: img:out_w,out_h;w,h;path;web;LinkAnhMin;
Ví dụ 1: chỉnh sửa danh sách bài viết
<iif-D>User:Login<In>
<a href="javascript:OpWList_Cf(1,'ViTriRec-TT|input*,tieude','tieude,tomtat,stt',0,0,'','ViTriRec ASC')">
Cập nhật tin tức
<i class="fa fa-edit fa-lg"></i>
</a>
</In></iif-D>
Ví dụ 2: chỉnh sửa danh sách ảnh
<iif-D>User:Login<In>
<a href="javascript:OpWList_Cf(1,'ViTriRec-TT|input*,LinkAnhMin-Ảnh|img*,tieude','tieude,tomtat,stt',0,0,'img:800,800;600,600;/themes/macdinh/images;web;LinkAnhMin;','ViTriRec ASC')">
Cập nhật Slide ảnh
<i class="fa fa-edit fa-lg"></i>
</a>
</In></iif-D>
4.5. Sửa ảnh
4.5.1 UploadImg_Only(i_out,i_in,path,filename_save,refresh,op_w,op_h)
Ví dụ 1: Úp ảnh tên chỉ định:
<iif-D>User:Login<In>
<a href="javascript:UploadImg_Only('','270,70','/UserFiles','tenanh.jpg',1,1000,700)">Sửa ảnh</a>
</In></iif-D>
Ví dụ 2:
Ứng dụng úp ảnh logo: khi click vào ảnh logo sẽ hiển thị hộp thoại sửa ảnh.
<a class="logo" href="<iif-D>User:Login<In>javascript:UploadImg_Only('','270,70','/themes/macdinh/images/icons/','logo-01.png',1,1000,700)</>/</In></iif-D>"><img src="/themes/macdinh/images/icons/logo-01.png" alt="IMG-LOGO"></a>
4.5.2 Úp ảnh đồng thời lưu đường dẫn vào dữ liệu.
UploadImage(i_out,i_in,path,objReturn,save_obj,save_field,save_id,filename_save,refresh,op_w,op_h)
UploadImage_Cf(i_out,i_in,path,objReturn,save_obj,save_field,save_id,filename_save,refresh,op_w,op_h,config)
Y nghĩa tham số:
UploadImage(i_out,i_in,path,objReturn,save_obj,save_field,save_id,refresh,op_w,op_h)
+ i_out:width,height -> khung hình bên ngoài, có thể để trống ''
+ i_in:width,height -> hình cần cắt sau khi lưu, nếu để trống mặc định là '200,300'
* Giá trị là pixel
* Nếu i_out trống thì giá trị i_out sẽ lấy i_in +100px
Ví dụ: i_in là '500,500' thì i_out '600,600'
+ path: đường dẫn lưu hình, mặc định nếu để trống /UserFiles/image
+ objReturn: trả giá trị đường dẫn hình khi lưu thành công, nếu không có bỏ trống
+ save_obj: lưu vào đối tượng, web -> NoiDung_Web , modu: -> HTML_Module
+ save_field: trường lưu
+ save_id: mã ID bảng ghi lưu
+ filename_save: để trống sẽ tạo file theo cú pháp: yyyy_MM_dd_HH_mm_ss.jpg
Nếu nhập 1 file chỉ định ví dụ anhgioithieu.jpg hay anhgioithieu (nếu ko có đuôi ở rộng tự thêm .jpg)
+ refresh: 1 -> nạp lại khi lưu xong
+ op_w: width cửa sổ mở lên, để 0 -> mặc định là: 1024
+ op_h: hieght cửa sổ mở lên, để 0 -> mặc định là: 750
+ config: chưa phát triển
Ví dụ lệnh:
<iif-D>User:Login<In>
<a href="javascript:UploadImage('500,500','300,300','/UserFiles/image','','web','TenTruongLuu',MaID,'tenanhluu',1,1024,700)">
<i class="fa fa-camera fa-lg"></i></a>
</In></iif-D>
<iif-D>User:Login<In>
<a href="javascript:UploadImage('500,500','300,300','/UserFiles/image','','web','LinkAnhMin',2,'tenanh',1,1024,700)">
<i class="fa fa-camera fa-lg"></i></a>
</In></iif-D>
Tham khảo liên kết để xem mã nguồn: iif.vn/themes/lib_cm/common.js
4.6. Uploadfile
Uploadfile
/ManagerFile/uploadfile.aspx?path=/UserFiles&filename=a
* path: đường dẫn lưu file
* title: tiêu đề hiển thị
* filename_upload: có thể để trống sẽ lấy file upload lên
để tên file không có đuôi file sẽ lấy từ file chọn
Ví dụ để A thì khi up 1 file máy tính có tên anh.jpg thì file upload lên là A.jpg
A.jpg thì up lên đúng tên đã quy định
* config:
close: đóng khi upload xong
norefresh không nạp lại web khi upload xong
* objReturn: tên của input trả về đường dẫn lưu file
* save_id: ID của NoiDung_Web khi lưu
* save_field: Tên trường lưa vào
Ví dụ: chỉ upload
<a href="javascript:Uploadfile('/UserFiles/ngon_ngu_iif','','dangnhap.zip','','')">File</a>
Ví dụ: upload xong, lưu đường dẫn vào NoiDung_Web có ID=1 và cột ThamSo_01
<a href="javascript:Uploadfile_Cf('/UserFiles','XIN CHAO','tenanh','','close',1,'ThamSo_01')">File</a> <hr />
4.6. Sửa module
OpModuEdit(id,ts)
OpModuEdit_Cf(id,ts,width,height,title,title_pr,config)
title: tiêu để hiển thị trên cùng
title_pr: tiêu để cho từng ô, cách nhau dấu ; , vì dụ : Địa chỉ facebook;Địa chỉ zalo
config: nếu muốn hiển thị tit YES/NO ẩn - show thì OpModuEdit_Cf(id,ts,width,height,title,title_pr,"chk_hide")
4.7. Sửa file HTML
OpFileEdit(file,title)
Ví dụ:
OpFileEdit("/App_Data/html/caption_frm.htm");
OpFileEdit("/App_Data/html/caption_frm.htm","Sửa file Header");
OpHtmlEdit(file,title)
Ví dụ:
OpHtmlEdit("/App_Data/html/caption_frm.htm","Tieu de")
OpHtmlEdit_Cf(file,title,edithtml,width,height,config)
<iif-D>User:Login
<In><a href="javascript:OpHtmlEdit_Cf('/html/TopHeader.htm','TopHeader',1,500,300)"> <i class="fa fa-edit text-danger"></i></a></In>
</iif-D>
4.8. Sửa file HTML có tham số động
Trong nội dung file html có các tham số ta có thể thay đổi lại giá trị bằng lệnh
<input_txt>Tiêu_đề/->/Nội_dung_động</input_txt> , có thể chứa nhiều tham số
OpHtmlEdit_Para(file,title)
Ví dụ:
OpHtmlEdit_Para("/html/test.htm");
OpHtmlEdit_Para_Cf(file,title,width,height)
Ví dụ:
OpHtmlEdit_Para_Cf("/html/test.htm","Tieu de",500,300)
Ví dụ:
<iif-D>User:Login
<In><a href="javascript:OpHtmlEdit_Para_Cf('/html/TopHeader.htm','TopHeader',500,300)"> <i class="fa fa-edit text-danger"></i></a></In>
</iif-D>
4.9. Sửa cấu hình từ web config
Liên kết: /AdminSYS/Config_Edit.aspx?id=giá_trị
<iif-D>User:Login
<In> <a href="javascript:OpConfig(5,'tieude',300,300)"><i class="fa fa-edit fa-lg"></i></a></In>
</iif-D>
4.10. Mở ulr chỉ định
<a href="javascript:OpUrl('.....',700,500)"><i class="fa fa-edit fa-lg"></i>Tiêu đề</a>
Ví dụ:
<iif-D>User:Login
<In>
<a href="javascript:OpUrl('/Adminxml/xml_getdata.aspx?file=chuyen.xml',700,500)"><i class="fa fa-edit fa-lg"></i>Chuyến</a>
<a href="javascript:OpUrl('/Adminxml/xml_getdata.aspx?file=xe.xml',700,500)"><i class="fa fa-edit fa-lg"></i>Xe</a>
</In>
</iif-D>
