copy – PlusMagi's Blog By Pitt Phunsanit

DataTable: ดัดแปลง / คัดลอก ข้อมูล

แนวคิดคือ คัดลอกข้อมูลที่เลือกเอาไว้จาก DataTables ตัวหนึ่งไปยังอีกตัวหนึง

[code language=”html” title=”jQuery.DataTables/data.json.transferDataToAnotherTable.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="author" content="Pitt Phunsanit">
<title>DataTables: Transfer Data To Another Table</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/datatables/datatables/media/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../assets/fronteed/icheck/skins/minimal/red.css" rel="stylesheet" type="text/css">
</head>

<body>
<table class="table table-bordered table-hover table-striped" id="filtersTableA" width="100%"></table>
<button class="btn btn-success" id="copyBtn" type="button">Copy Data To Table</button>
<table class="table table-bordered table-hover table-striped" id="tableA" width="100%"></table>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="../assets/fronteed/icheck/icheck.min.js"></script>

</html>[/code]

ส่วนที่เขียนเป็นฟังก์ชั่นกลางไว้ให้ไฟล์อื่นเรียกใช้[code language=”javascript” title=”jQuery.DataTables/DataTables.js”]function iCheckBulk(dataTableArea, dataTableObject) {
dataTableArea.on(‘ifChanged’, ‘.checkAll’, function(event) {

var datas = dataTableObject.data();
var inputs = $(‘input:checkbox, input:radio’, dataTableArea);

if (event.target.checked) {
var enable = ‘1’;
var state = ‘check’;
} else {
var enable = ‘0’;
var state = ‘uncheck’;
}

$.each(datas, function(index, value) {
value.enable = enable;

dataTableObject.row(index).data(value);
});

iCheckInit($(‘input:checkbox, input:radio’, dataTableArea));
});

}

/* change filtersTable data value on input name enables is change */
function iCheckChange(filtersTableArea, filtersTableObject, dataTableObject) {
$(‘tbody’, filtersTableArea).on(‘ifChanged’, ‘input[name="enables[]"]’, function(event) {

event.stopPropagation();

var row = $(this).closest(‘tr’);

var data = filtersTableObject.row(row).data();

if ($(this).is(‘:checked’)) {
$(this).attr(‘checked’, 1);
data.enable = true;
} else {
$(this).attr(‘checked’, 0);
data.enable = false;
}
filtersTableObject.row(row).data(data);

iCheckInit(row);
});
}

function iCheckCopy(dataTableObject, filtersTableObject, pkField) {
$(‘#copyBtn’).click(function() {

/* loop current data (pkField) in current dataTableObject */
var datas = dataTableObject.data();
var hasKeys = new Array();
$.each(datas, function(index, value) {
hasKeys.push(value[pkField]);
});

var datasChoose = filtersTableObject.data();

$.each(datasChoose, function(index, value) {
/* add row to filtersTableObject if input name enables[] is checked */
if (value.enable == true && hasKeys.indexOf(value[pkField]) == -1) {
dataTableObject
.row.add(value)
.draw()
.node();
}
});

});

}

function iCheckInit(selector) {
selector.iCheck({
checkboxClass: ‘icheckbox_minimal-red’,
radioClass: ‘iradio_minimal-red’,
});
}[/code]

ไฟล์ที่ทำหน้าที่ควบคุมการคัดลอกข้อมูล[code language=”javascript” title=”jQuery.DataTables/data.json.transferDataToAnotherTable.js”]$(function() {

dataTableA = $(‘#dataTableA’);
filtersTableA = $(‘#filtersTableA’);
tableA = $(‘#tableA’);

filtersTable = filtersTableA
.DataTable({
"ajax": {
"data": function(parameters) {},
"method": "POST",
"url": "data.json.php",
},
"columns": [{
"orderable": false,
"render": function(data, type, row, meta) {
return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1;
},
"title": ‘No.’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == ‘1’) {
var checked = ‘ checked’;
} else {
var checked = ”;
}

return ‘<input’ + checked + ‘ name="enables[]" type="checkbox" value="’ + row.DISTRICT_CODE + ‘">’;
},
"title": ‘<input class="checkAll" type="checkbox">’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == ‘1’) {
return ‘<span class="glyphicon glyphicon-ok"></span>’;
} else {
return ‘<span class="glyphicon glyphicon-remove"></span>’;
}
},
"title": "Enable",
"width": "10px",
}, {
"data": "DISTRICT_CODE",
"title": "District Code",
"width": "90px",
}, {
"data": "DISTRICT_NAME",
"title": "District Name",
}, {
"data": "PROVINCE_NAME",
"title": "Province Name",
}
],
"processing": true,
"serverSide": true,
"stateSave": true
})
.on(‘draw’, function(event, settings, json, xhr) {
/* add style to checkbox, radio */
iCheckInit($(‘input:checkbox, input:radio’, settings.nTable));
});

iCheckBulk(filtersTableA, filtersTable);

dataTable = tableA
.DataTable({
"columns": [{
"orderable": false,
"render": function(data, type, row, meta) {
return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1;
},
"title": ‘No.’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == 1) {
var checked = ‘ checked’;
} else {
var checked = ”;
}

return ‘<input’ + checked + ‘ name="enables[]" type="checkbox" value="’ + row.DISTRICT_CODE + ‘">’;
},
"title": ‘<input class="checkAll" type="checkbox">’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable) {
return ‘<span class="glyphicon glyphicon-ok"></span>’;
} else {
return ‘<span class="glyphicon glyphicon-remove"></span>’;
}
},
"title": "Enable",
"width": "10px",
}, {
"data": "DISTRICT_CODE",
"title": "District Code",
"width": "90px",
}, {
"data": "DISTRICT_NAME",
"title": "District Name",
}, {
"data": "PROVINCE_NAME",
"title": "Province Name",
}
]
})
.on(‘draw’, function(event, settings, json, xhr) {
/* add style to checkbox, radio */
iCheckInit($(‘input:checkbox, input:radio’, settings.nTable));
});

iCheckBulk(tableA, dataTable);

iCheckChange(filtersTableA, filtersTable, dataTable);

iCheckCopy(dataTable, filtersTable, ‘DISTRICT_CODE’);

});[/code]

อธิบาย

มี 2 ตารางคือ id=”filtersTableA” เป็นต้นฉบับ และ id=”tableA” เป็นตารางที่จะรับค่าที่จะคัดลอก
เพราะว่าอาจจะแบ่งข้อมูลไว้หลายหน้าและ DataTable จะ render ที่ละหน้าเท่านั้น ถ้า user เลือกรายการโดยใช้ input enables[] แล้วเปลี่ยนไปหน้าอื่น input นั้นจะหายไป ทำให้ต้องใช้วิธี update กลับไปที่ Data ของตัว DataTable filtersTableA โดยเปลี่ยนค่าใน object data เช่น data.enable = true; หรือ data.enable = false;
เมือคลิก ปุ่ม id=”copyBtn” ให้คัดลอกข้อมูล เพื่อป้องกันการเก็บข้อมูลซ้ำจึงต้อง ดึงรายการที่เก็บข้อมูลเอาไว้แล้ว มาเทียบว่าที่จะเข้ามาใหม่มีรึยังโดยใช้ primary key คือ DISTRICT_CODE

อ่านเพิ่มเติม

คัดลอกหมดทั้งโฟลเดอร์

โปรเจ็คที่ทำอยู่ตอนนี้ ทางลูกค้าต้องการให้สามารถ สร้างระบบย่อยได้เอง จะทำงานคล้ายๆกัน แต่ละส่วนสามารถปรับแต่งได้อิสระจากตัวอื่นๆ เช่น ใช้ logo ของบริษัทพันธมิตร โดยจะมีส่วนย่อยๆ นี้ตามจำนวนพันธมิตรที่เค้าหามาได้ และใน backed จะต้องสามารถสร้างขึ้นมาได้เอง โดยที่ไม่ต้องการให้โปรแกรมเมอร์ มาเซ็ตระบบเริ่มต้นให้

หนึ่งในกระบวนการที่คิดไว้ก็คือ แยก code ของแต่ละ partner ออกไปในอีกโพลเดอร์และใช้ php clone ออกไปทั้ง sub directory ไปไว้อีกที่ ให้แต่ละบริษัทใช้

[code lang=”php” title=”cloning.php”]
<?php

function cloning($folderSource, $folderClone) {
if ([email protected]($folderClone, 0755)) {
return error_get_last();
}
foreach ($iterator = new \RecursiveIteratorIterator(new \RecursiveDirectoryIterator($folderSource, \RecursiveDirectoryIterator::SKIP_DOTS), \RecursiveIteratorIterator::SELF_FIRST) as $item) {
if ($item->isDir()) {
mkdir($folderClone . DIRECTORY_SEPARATOR . $iterator->getSubPathName());
} else {
copy($item, $folderClone . DIRECTORY_SEPARATOR . $iterator->getSubPathName());
}
}
return true;
}

$message = cloning(‘partner’, ‘partner_dolly’);
if ($message === true) {
echo ‘Success’;
} else {
echo print_r($message, true);
}
[/code]

copy ข้อมูลใน MySQL

บางครั้งต้องการข้อมูลจำนวนมาก เพื่อ test บางอย่าง เช่น ระบบแบ่งหน้า โชคดีที่มายเอสคิวแอลสามารถ copy มาจาก record อื่นๆได้ เช่น
[code language=”sql”]
INSERT INTO tableName (col1, col2, col3, …)
SELECT col1, col2, col3, … FROM tableName
WHERE primarykey = 1
[/code]
สมมุติจะคัดลอกตาราง `cds` ในดาต้าเบส cdcol ที่เป็นตัวอย่างติด xampp มา ถ้าไม่มีสร้างใหม่ได้จาก query
[code language=”sql”]
CREATE TABLE IF NOT EXISTS `cds` (
`titel` varchar(200) COLLATE latin1_general_ci DEFAULT NULL,
`interpret` varchar(200) COLLATE latin1_general_ci DEFAULT NULL,
`jahr` int(11) DEFAULT NULL,
`id` bigint(20) unsigned NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=7 ;

INSERT INTO `cds` (`titel`, `interpret`, `jahr`, `id`) VALUES
(‘Beauty’, ‘Ryuichi Sakamoto’, 1990, 1),
(‘Goodbye Country (Hello Nightclub)’, ‘Groove Armada’, 2001, 4),
(‘Glee’, ‘Bran Van 3000’, 1997, 5);

ALTER TABLE `cds`
ADD PRIMARY KEY (`id`);
[/code]
เราจะ copy เพิ่มโดยคิวรี่
[code language=”sql”]
INSERT INTO `cds`(`titel`, `interpret`, `jahr`)
SELECT `titel`, `interpret`, `jahr`
FROM `cds`
WHERE `id` = 5
[/code]
สังเกตุ จะไม่เลือก ฟิลด์ id เพราะ field มันเป็น primary key หลังจากรันคิวรี่จะเห็นว่าข้อมูลเพิ่มขึ้นมาใหม่เหมือนข้อมูลใน id = 5 ทุกอย่างยกเว้น id

sharepod = copy เพลงจาก iphone

ไอโพนใช้ง่ายใช้ซักพักจะติดใจ แต่หลายๆอย่างทั้งห้าม ทั้งจำกัด จนรู้สึกว่าเหมือนไปเช่าเครื่องมันมาใช้ หรือบางคนคิดว่าติดคุก ก็เลยมีหลายคนยอม jailbreak (แหกคุก) มันซะจะได้รู้สึกว่าโทรศัพย์เครื่องนี้เป็นของฉัน (i’s phone) จริงๆซะที เสี่ยงประกันขาดก็ยอม
เรื่องง่ายๆ อย่างเสียบสายแล้วเอาเพลงลงเครื่อง อยากจะคัดลอกเอาลงเครื่องอื่น ก็แค่เสียบสายเข้าไป แล้วเลือกเพลงไป กลับทำไม่ได้ itunes กลับไม่ยอมทำซะงั้น (คิดถึงโทรศัทพ์เครื่องแรกที่ซื้อเอง imobile i150 ทำง่ายมากๆ เสียบสายก็ทำได้แล้ว ไม่ต้องลงโปรแกรมด้วยซ้ำ)
ความจริงไม่ต้องเจลเบรคก็ copy เพลงกลับมาได้โดยใช้โปรแกรมแชร์พอต

โหลดมาได้เลยจากเว็บ http://www.getsharepod.com/
ไม่ต้องลงติดตั้งเปิดโปรแกรม SharePod.exe ในไฟล์ซิปใช้ได้เลย แต่ต้องลง itune ไว้ก่อนแล้วและไม่ได้เปิดไอจูนทิ้งไว้ก่อน ที่สำคัญคือต้องเสียบไอโพนไว้ ^_^
เปิดโปรแกรมแซร์พอร์ต
เลือกเพลง
กด copy to pc

เป็นอันเสร็จได้เพลงออกมาฟังกันแล้ว

ป้องกัน Copy Paste

ถ้าต้องการไม่ให้ user คัดลอกข้อมูลมาวางในช่องยืนยันอีเมล์ เราสามารถใช้คุณลักษณะ (attribute) onpaste ของเท็ก อินพุตช่วยป้องกันได้ ตามตัวอย่าง
[sourcecode language=”html”]<input type="text" name="confrimEmail" autocomplete="off" onDrag="return false;" onDrop="return false;" onPaste="return false;" />[/sourcecode]แต่เนื่องจากโอเปร่าไม่สนับสนุนความสามารถนี้ (ตัวเดียว ?) ทำให้ต้องใช้จาว่าสคริปต์เต็มรูปแบบในการตรวจสอบ[sourcecode language=”html”]<input type="text" name="confrimEmail" autocomplete="off" onDrag="return false;" onDrop="return false;" onPaste="return false;" onMouseDown="noRightClick(event);" onKeyDown="return noPaste(event);" />
<script>
function noPaste(event)
{
var pressedKey = String.fromCharCode(event.keyCode).toLowerCase();
if (event.ctrlKey && pressedKey == ‘v’)
{
alert(‘Sorry, this functionality is disabled.’);
return false;
}
}

function noRightClick(event)
{
if (event.button==2)
{
alert("Right Click Not Allowed!");
}
}
</script>[/sourcecode]มี 2 ฟังก์ชั่นคือ

noRightClick ป้องกันการคลิกขวาทุกชนิด
noPaste ป้องกันการวางโดนใช้ชอร์ตคัต Shortcut,ชอร์ตคัต คนที่เคยเขียนเกมส์มาจะห็นว่าความจริง เราใช้แค่ event.ctrlKey ก็ตรวจจับการใช้ ปุ่ม control ได้แล้ว ภาษาหรือเครื่องแมค บางครั้งต้องใช้ปุ่มนี้ในการพิมพ์อักษรบางตัว ทำให้ต้องใช้ event.keyCode มาจับว่าเป็นการวางข้อความ Ctrl + V รึเปล่า

ว่างๆ ลองดัดแปลงเป็นตรวจจับการจับภาพหน้าจอหรือพิมพ์หน้าเว็บดูนะครับ
ดูเพิ่มเติม

AltGr key

PlusMagi's Blog By Pitt Phunsanit

Tag Archive copy

DataTable: ดัดแปลง / คัดลอก ข้อมูล

คัดลอกหมดทั้งโฟลเดอร์

copy ข้อมูลใน MySQL

sharepod = copy เพลงจาก iphone

ป้องกัน Copy Paste