Tag Archive อัพเดท

Byphunsanit

slick: carousel / slideshow จาก ajax

ตัวอย่างการแก้ไข carousel หรือ slideshow โดย update slide จาก ajax

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>kenwheeler.slick: ajax update</title>
    <link href="../vendor/components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../vendor/kenwheeler/slick/slick/slick.css" rel="stylesheet" type="text/css" />
    <link href="../vendor/kenwheeler/slick/slick/slick-theme.css" rel="stylesheet" type="text/css" />
    <link href="theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="slideshowA"></div><br>
    <select id="order_by">
    <option value="asc">น้อยไปมาก</option>
    <option value="desc">มากไปน้อย</option>
    <option value="random">สุ่ม</option>
    </select>
    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script src="../vendor/kenwheeler/slick/slick/slick.min.js"></script>
    <script>
        $(function() {

            var order_by = $('#order_by');
            var slideshowA = $('#slideshowA');

            function getSliderSettings() {
                return {
                    "autoplay": false,
                    "autoplaySpeed": 3000,
                    "centerMode": true,
                    "infinite": false,
                    "slidesToScroll": 4,
                    "slidesToShow": 4,
                    "speed": 300,
                    "variableWidth": true,
                    "zIndex": 2
                }
            }

            function getSlideShow() {

                $.ajax({
                    "data": {
                        "order_by": order_by.val(),
                    },
                    "success": function(data, textStatus, jqXHR) {

                        /* add items */
                        $.each(data.datas, function(index, value) {
                            slideshowA.append('<div><b>' + index + '</b><img alt="' + index + '" src="' + value + '"><p>แสดง ' + index + ' จาก http://www.avatarsdb.com</p></div>');
                        });

                        slideshowA.slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
                        $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
                        slideshowA.slick(getSliderSettings()); /* Initialize the slick again */

                        alert('ทดลองดูครับ');

                    },
                    "url": "ajax.php",
                });

            }

            order_by.change(function() {
                getSlideShow();
            });

            getSlideShow();
            slideshowA.slick(getSliderSettings());
        });
    </script>
</body>

</html>

ไฟล์ที่ส่งข้อมูลกลับมาให้

<?php
$datas = [];

if (isset($_GET['order_by'])) {
    $order_by = $_GET['order_by'];
} else {
    $order_by = 'asc';
}

$datas['Acrobat'] = 'http://www.avatarsdb.com/avatars/acrobat.gif';
$datas['Cat Rain'] = 'http://www.avatarsdb.com/avatars/cat_rain.gif';
$datas['Dota Windranger'] = 'http://www.avatarsdb.com/avatars/dota_windranger.jpg';
$datas['Fighting Funny'] = 'http://www.avatarsdb.com/avatars/fighting_funny.gif';
$datas['Fire 01'] = 'http://www.avatarsdb.com/avatars/fire_01.gif';
$datas['German Shepherd Puppy'] = 'http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg';
$datas['Girl With Cigarette'] = 'http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg';
$datas['Hidden Cat'] = 'http://www.avatarsdb.com/avatars/hidden_cat.jpg';
$datas['Im Fabulous'] = 'http://www.avatarsdb.com/avatars/im_fabulous.jpg';
$datas['One Direction'] = 'http://www.avatarsdb.com/avatars/One_Direction.jpg';
$datas['Panda Kiss'] = 'http://www.avatarsdb.com/avatars/panda_kiss.gif';
$datas['PC User'] = 'http://www.avatarsdb.com/avatars/pc_user.gif';
$datas['Riri Queen'] = 'http://www.avatarsdb.com/avatars/riri_queen.gif';
$datas['Tennessee'] = 'http://www.avatarsdb.com/avatars/tennessee.jpg';
$datas['Tuxedo M'] = 'http://www.avatarsdb.com/avatars/Tuxedo_m.jpg';
$datas['Tuxedo Mask'] = 'http://www.avatarsdb.com/avatars/tuxedo_mask.jpg';
$datas['Ugly Face'] = 'http://www.avatarsdb.com/avatars/ugly_face.gif';
$datas['Waifu'] = 'http://www.avatarsdb.com/avatars/waifu.jpg';
$datas['Wolf In The Snow'] = 'http://www.avatarsdb.com/avatars/wolf_in_the_snow.jpg';
$datas['Xerxes Break Kevin'] = 'http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg';

switch ($order_by) {
    case 'desc':{krsort($datas);}
        break;

    case 'random':{
            $keys = array_keys($datas);
            shuffle($keys);
            $random = [];
            foreach ($keys as $key) {
                $random[$key] = $datas[$key];
            }
            $datas = $random;
        }break;

    case 'asc':
    default:
        {ksort($datas);}
        break;
}

header('Content-type: application/json; charset=utf-8');
echo json_encode([
    'datas' => $datas,
    'order_by' => $order_by,
]);

code บางส่วนจะอยู่ในบทความ slick: สร้าง carousel / slideshow

Credit: Reinitialize Slick js after successful ajax call

Byphunsanit

update table อัตโนมัติ

สามารถให้ mysql หรือ MariaDB update หรือแก้ไขข้อมูลได้โดยอัตโนมัติทุกครั้งที่ insert, update และ delete ได้โดยใช้ trigger ช่วย จะยกตัวอย่างโดยสมมุติตาราง users โดยถ้า มีการเพิ่มข้อมูลมาใหม่ให้สุ่ม salt และ hash รหัสผ่านให้โดยอัตโนมัติ และเพื่อความปลอดภัยให้เปลี่ยน salt และ hash ใหม่ทุกครั้งที่ password เปลี่ยนไป ถ้าไม่เข้าใจว่า salt คืออะไร ขอเชิญอ่านจากเรื่อง login แบบปลอดภัย

สร้างตาราง users ก่อนโดยใช้

CREATE TABLE `users` (
  `user_id` int(11) NOT NULL,
  `username` varchar(30) NOT NULL,
  `password` char(32) NOT NULL,
  `salt` char(5) NOT NULL,
  `password_hash` char(32) NOT NULL,
  `email` varchar(254) NOT NULL,
  `date_create` datetime DEFAULT NULL,
  `date_update` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `users`
  ADD PRIMARY KEY (`user_id`);

ALTER TABLE `users`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

สร้าง trigger โดยใช้โครงสร้าง

DELIMITER $$
CREATE TRIGGER `ชื่อ trigger ` AFERT หรือ BEFORE INSERT หรือ UPDATE หรือ DELETE ON `ตาราง ` FOR EACH ROW BEGIN
...
SET NEW.`ชื่อฟิลย์ ` = ค่าใหม่;
...
END
$$
DELIMITER ;
...
.OLD
ค่าใน record เดิมก่อน update
.NEW
ค่าใหม่ที่จะเข้ามา update เปลี่ยนค่าเดิม

trigger ของตาราง users ในแบบที่เราต้องการจะเขียนเป็น

--
-- Triggers `users`
--
DELIMITER $$
CREATE TRIGGER `users_passwordhash_insert` BEFORE INSERT ON `users` FOR EACH ROW BEGIN
 SET @string := 'abcdefghijklmnopqrstuvwxyz0123456789';
    SET @i := 1;
    SET @random := '';

    WHILE (@i <= 5) DO
        SET @random := CONCAT(@random, SUBSTRING(@string, FLOOR(RAND() * 36 + 1), 1));
        SET @i := @i + 1;
    END WHILE;

SET NEW.`date_create` = NOW();
SET NEW.`salt` = @random;
SET NEW.`password_hash` = MD5(CONCAT(NEW.`password`, @random));
END
$$
DELIMITER ;
--
DELIMITER $$
CREATE TRIGGER `users_passwordhash_update` BEFORE UPDATE ON `users` FOR EACH ROW BEGIN
 SET @string := 'abcdefghijklmnopqrstuvwxyz0123456789';
    SET @i := 1;
    SET @random := '';

    WHILE (@i <= 5) DO
        SET @random := CONCAT(@random, SUBSTRING(@string, FLOOR(RAND() * 36 + 1), 1));
        SET @i := @i + 1;
    END WHILE;

SET NEW.`date_update` = NOW();
SET NEW.`salt` = @random;
SET NEW.`password_hash` = MD5(CONCAT(NEW.`password`, @random));
END
$$
DELIMITER ;

ทดลองเพิ่ม และเปลี่ยนข้อมูลดูครับตัว salt และ password_hash จะต้องเปลี่ยนทุกครั้ง ในการใช้งานจริง ให้ลบฟิลย์ password ออกและแก้ trigger ใหม่ เพราะไม่ควรเก็บ password เป็นข้อความธรรมดา (plain text)