ด้วยเหตุนี้เราจึงจะมาทดสอบการตั้งค่าต่างๆ เพื่อดูว่ามันจะมีผลเป็นอย่างไรในหน้า customer portal.

การทดสอบ

โค้ดที่ใช้ในการทดสอบ checkout.

$checkoutParams = [
    'line_items' => [[
        'price_data' => [
            'currency' => 'thb',
            'product_data' => [
                'name' => 'Maid',
            ],
            'recurring' => [
                'interval' => 'day',
                'interval_count' => 1,
            ],
            'unit_amount' => 30000,
        ],
        'quantity' => 1,
    ]],
    'mode' => 'subscription',
    'customer_email' => 'user@test.localhost',
    'success_url' => 'success.html',
    'cancel_url' => 'canceled.html',
];
$checkout_session = \Stripe\Checkout\Session::create($checkoutParams);

การตั้งค่า Manage failed payments ให้ไปยังหน้า Settings แล้วคลิกเลือกที่เมนู Billing > Subscriptions and emails.

ในขั้นตอนการทดสอบ ให้เริ่มชำระเงินด้วยบัตรที่ใช้ได้ดังในหน้าเอกสาร. จากนั้นก่อนที่จะ Simulation ไปยังวันถัดไป ให้กดเข้า customer portal แล้วแก้ไขโดยเพิ่มบัตรที่ใช้ไม่ได้ ( Decline after attaching ) แล้วลบบัตรที่ใช้ได้ออก จากนั้นจึงค่อย Simulation ไปยังวันถัดไป.

Subscription: cancel; Invoice: past-due

จากตัวอย่างจะพบว่าแม้สถานะ subscription จะยกเลิกไปแล้วแต่หน้า customer portal ก็จะยังคงมีปุ่มเรียกเก็บเงิน และจากที่เคยทดสอบมา เมื่อกดชำระจนครบก็จะไม่เปลี่ยนสถานะ subscription ให้กลับมาเป็น active ได้อยู่ดี.

Subscription: cancel; Invoice: uncollectible

สิ่งที่แตกต่างออกไปคือ สถานะใบเรียกเก็บเงินจะเป็น uncollectible แค่นั้น.

จากการทดสอบนี้ พบว่า หน้า customer portal จะยังคงมีปุ่มเรียกเก็บเงินเช่นเดียวกัน เนื่องจากตั้งค่าสถานะ payment fail สำหรับ subscription เป็น cancel. และการชำระเงินจนครบก็ไม่ช่วยเปลี่ยนสถานะเช่นเคย.

Subscription: unpaid; Invoice: past-due

ในหน้า Dashboard นั้น จากการ Run simulation ข้ามเวลาไปเรื่อยๆจะพบว่าแม้เลยขีดกำหนดไปเรื่อยๆเท่าไหร่ มันก็จะยังคงสร้าง draft ของใบเรียกเก็บเงินออกมาอยู่เรื่อยไป และสถานะของ subscription จะเป็น Unpaid ไม่ใช่ Canceled.

จากตัวอย่างการตั้งค่าแบบนี้ จะพบว่าในหน้า Customer portal รายการ subscription จะยังคงไม่ถูกยกเลิก มีเพียงรายการเรียกเก็บเงินที่แจ้งว่าล้มเหลว (Failed) และเมื่อทดลอง Run simulation ข้ามเวลาไปเรื่อยๆก็จะพบว่ามันยังคงอยู่เหมือนเดิมไม่มีการยกเลิก แต่จะมีปุ่มให้กดยกเลิกด้วยตัวเอง.

Subscription: unpaid; Invoice: uncollectible

ในหน้า Dashboard จะพบว่าแม้เลยกำหนดชำระเงินไปนานเท่าใด ก็จะยังคงสร้าง draft ใบเรียกเก็บเงินออกมาเรื่อยๆ.

จากตัวอย่างจะพบว่าสิ่งที่แตกต่างจากการทดลองก่อนหน้าคือสถานะใบเรียกเก็บเงินจะเป็น Past due แทนที่จะเป็น Failed แต่สถานะ subscription จะยังคงไม่ยกเลิกและมีปุ่มให้ยกเลิกด้วยตัวเองเช่นเดิม.

การแก้ไข

สำหรับการแก้ไขให้ยกเลิกใบเรียกเก็บเงินนั้น ณ ปัจจุบัน จะยังคงไม่สามารถทำได้ผ่านการตั้งค่าบน Stripe แต่จะต้องใช้การโค้ดผ่าน webhooks ดังกรณีศึกษาจาก 2 เว็บไซต์ต่อไปนี้.

1. https://stackoverflow.com/questions/77981419/how-to-void-a-invoice-automatically-in-stripe-after-automated-retries-have-faile
2. https://www.reddit.com/r/stripe/comments/1f9xtnq/the_option_mark_the_invoice_as_uncollectible/

The post Stripe subscription และสถานะใบเรียกเก็บเงิน appeared first on rundiz.

การใช้งาน

กำหนดแท็ก HTML

<nav class="rd-pagination" aria-label="Page navigation example"></nav>
<script src="assets/js/rd-pagination.js"></script>

จากนั้นแทรก JavaScript โค้ดต่อไปนี้ในหน้าที่จะใช้งาน

const rdPagination = new RdPagination('.rd-pagination', {
    base_url: '?start=%PAGENUMBER%',
    page_number_value: 0,
    total_records: 195,
});
rdPagination.createLinks();

ส่วนประกอบต่างๆ

• before unavailable คือเลขหน้าที่จะแสดงก่อนแสดงหน้าที่ขาดช่วงไป (unavailable). คุณสามารถกำหนดค่าจำนวนของมันได้ที่ property unavailable_before เช่น {unavailable_before: 1}
• unavailable คือตำแหน่งที่เลขหน้าขาดช่วงไประหว่างเลขหน้าที่แสดงก่อน และเลขหน้าที่อยู่รอบๆหน้าปัจจุบัน. คุณสามารถกำหนดค่าตัวอักษรที่จะแสดงตรงนี้ได้ที่ property unavailable_text เช่น {unavailable_text: '..'};
• adjacent pages คือเลขหน้าที่อยู่รอบๆหน้าปัจจุบัน. คุณสามารถกำหนดค่าจำนวนของมันได้ที่ property number_adjacent_pages เช่น {number_adjacent_pages: 3}
• after unavailable ก็เหมือน before unavailable แต่เป็นเลขหน้าที่แสดงหลังจากหน้าที่ขาดช่วงไป (unavailable). คุณสามารถกำหนดค่าจำนวนของมันได้ที่ property unavailable_after เช่น {unavailable_after: 2}
• สามารถอ่านเพิ่มเติมได้จาก options ใน constructor ของ JS class.

Options

The post Pagination JS appeared first on rundiz.

ส่วนประกอบของ input range

input range นั้นประกอบด้วยส่วนต่างๆ คือ ตัวปุ่มเลื่อนหรือ thumb, ตัวรางหรือ track, ตัวระดับที่เลือกหรือ range progress.

CSS สำหรับส่วนประกอบต่างๆ

ผู้อ่านสามารถคลิกที่ชื่อโค้ดเพื่อตามไปอ่านเอกสารอ้างอิงได้บนเว็บ MDN.

track

ส่วนรางหรือ track นั้นจะใช้ CSS pseudo-element ::-moz-range-track สำหรับ Gecko, และ ::-webkit-slider-runnable-track สำหรับ Webkit. สำหรับคำสั่งที่เป็นมาตรฐานกลางนั้น ยังไม่มีในขณะนี้.

thumb

ส่วนปุ่มเลื่อนหรือ thumb นั้นจะใช้ ::-moz-range-thumb สำหรับ Gecko, และ ::-webkit-slider-thumb สำหรับ Webkit. สำหรับคำสั่งที่เป็นมาตรฐานกลางนั้นยังไม่มี.

range progress

ส่วนที่แสดงระดับที่เลือกหรือ range progress นั้นจะใช้ ::-moz-range-progress สำหรับ Gocko, ส่วนของ Webkit นั้นยังไม่มีตัวเลือกนี้ให้ใช้ในขณะนี้. สำหรับคำสั่งที่เป็นมาตรฐานกลางนั้นยังไม่มี.

ออกแบบ input range

การออกแบบ input range นั้นเบื้องต้นจะแยกออกเป็น 2 ส่วน คือ HTML และ CSS.

HTML

<p><label for="cdex1">Basic</label>
    <input id="cdex1" class="rd-input-range custom-input-range-fixed-width" type="range">
</p>
<p><label for="cdex2">With datalist</label>
    <input id="cdex2" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl1">
    <datalist id="dtl1">
        <option value="0"></option>
        <option value="50"></option>
        <option value="100"></option>
    </datalist>
</p>
<p><label for="cdex3">Disabled</label>
    <input id="cdex3" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl1" disabled>
</p>
<p><label for="cdex4">With datalist less than input max (500)</label>
    <input id="cdex4" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl2" min="0" max="500">
    <datalist id="dtl2">
        <option value="0"></option>
        <option value="50"></option>
        <option value="100"></option>
    </datalist>
</p>
<p><label for="cdex5">With datalist more than input max (100)</label>
    <input id="cdex5" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl3" min="0" max="100">
    <datalist id="dtl3">
        <option value="0"></option>
        <option value="50"></option>
        <option value="500"></option>
    </datalist>
</p>

CSS

input[type="range"].rd-input-range {
    -webkit-appearance: none;
    appearance: none;
    height: 37px;
    margin: 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);/* remove white-blue background color on tap or on touch in chrome for android. */
    width: 100%;
}
input[type="range"].rd-input-range:disabled {
    /* this covered beginning part but not for thumb and track at the end. the last part of track will be covered by track selector */
    cursor: not-allowed;
    opacity: 0.5;
}

/* Input range's thumb */
input[type="range"].rd-input-range::-moz-range-thumb {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 30px;
    width: 15px;
}
input[type="range"].rd-input-range:active:not(:disabled)::-moz-range-thumb {
    outline: 3px solid rgba(255, 100, 0, 0.3);
}
input[type="range"].rd-input-range:disabled::-moz-range-thumb {
    cursor: not-allowed;
}
input[type="range"].rd-input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 30px;
    margin-top: -14px;
    width: 15px;
}
input[type="range"].rd-input-range:active:not(:disabled)::-webkit-slider-thumb {
    outline: 3px solid rgba(255, 100, 0, 0.3);
}
input[type="range"].rd-input-range:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}
/* End input range's thumb */

/* Input range track (can't use comma separate for ::-moz-xxx and ::-webkit-xxx) */
input[type="range"].rd-input-range::-moz-range-track {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 3px;
}
input[type="range"].rd-input-range:disabled::-moz-range-track {
    cursor: not-allowed;
}
input[type="range"].rd-input-range::-webkit-slider-runnable-track {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 3px;
}
input[type="range"].rd-input-range:disabled::-webkit-slider-runnable-track {
    cursor: not-allowed;
}
input[type="range"].rd-input-range:focus::-webkit-slider-runnable-track {
    background: #eee;
}
/* End input range track */

/* Input range progress */
input[type="range"].rd-input-range::-moz-range-progress {
    background-color: #52A0E5;
    border: 1px solid #aaa;
    border-radius: 0px;
    cursor: pointer;
    height: 3px;
}
/* currently not available for Webkit engine such as Chrome, Edge, etc. */
/* End input range progress */

ผลลัพธ์

ผลลัพธ์ที่เห็นคือเราจะสามารถเปลี่ยนรูปแบบ input range ได้แล้ว แต่ว่าจะยังไม่สามารถแสดงขีดติ๊กสำหรับ datalist ได้. เมื่อเทียบเคียงกับรูปแบบดั้งเดิมของบนเบราว์เซอร์ Firefox จะเป็นดังรูปด้านล่างนี้.

รูปแบบเดิมๆบนเบราว์เซอร์นั้น จะพบว่ามีขีดติ๊กสำหรับ datalist ปรากฏอยู่.

ออกแบบ datalist

การออกแบบ datalist หรือขีดติ๊กนั้น จะต้องมีการใช้ JavaScript เพิ่มเติม เนื่องจากไม่มีคำสั่งใดๆสำหรับ CSS ที่รองรับได้โดยสมบูรณ์เลย. แม้จะสามารถใช้ display flex ได้แต่ก็จะไม่ได้ผลเมื่อ datalist มี option ที่ไม่ได้เป็นระยะที่เท่ากัน หรือไม่สมมาตรกัน ดังตัวอย่าง (คือไม่ใช่ 0, 50, 100 ประมาณนี้ แต่จะเป็น 0, 10, 20 แค่นี้ก็ได้).

HTML

<p><label for="cdirdex1">With datalist</label>
    <div class="rd-input-range-with-datalist">
        <input id="cdirdex1" class="rd-input-range" type="range" list="cdirddtl1">
        <datalist id="cdirddtl1">
            <option value="0"></option>
            <option value="50"></option>
            <option value="100"></option>
        </datalist>
    </div>
</p>
<p><label for="cdirdex4">With datalist less than input max (500)</label>
    <div class="rd-input-range-with-datalist">
        <input id="cdirdex4" class="rd-input-range" type="range" list="cdirddtl2" min="0" max="500">
        <datalist id="cdirddtl2">
            <option value="0"></option>
            <option value="50"></option>
            <option value="100"></option>
        </datalist>
    </div>
</p>
<p><label for="cdirdex5">With datalist more than input max (100) and label</label>
    <div class="rd-input-range-with-datalist">
        <input id="cdirdex5" class="rd-input-range" type="range" list="cdirddtl3" min="0" max="100">
        <datalist id="cdirddtl3">
            <option value="0" label="0"></option>
            <option value="25" label="25"></option>
            <option value="50" label="50"></option>
            <option value="500" label="500"></option>
        </datalist>
    </div>
</p>

CSS

/* Custom design of input range tick marks (datalist) */
.rd-input-range-with-datalist {
    display: block;
}

.rd-input-range-with-datalist .rd-input-range-custom-ticks-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: calc(100% - (15px));/* 15 px is input range thumb size. refer from typo-and-form/_form-input-range.css file. */
}

.rd-input-range-with-datalist .rd-input-range-custom-ticks-container > .rd-input-range-custom-tick {
    color: #777;
    font-size: small;
    font-weight: lighter;
    padding: 0;
    position: absolute;
}
.rd-input-range-with-datalist .rd-input-range-custom-ticks-container > .rd-input-range-custom-tick::before {
    border-left: 1px solid #aaa;
    content: "";
    display: block;
    min-height: 10px;
}
/* End custom design of input range tick marks. */

JavaScript

let isListenedInputRangeEvent = false;

/**
 * Custom input range with `datalist`
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#validation Document reference for default `max` value.
 */
function customInputRangeWithDatalist() {
    const customIRWDClass = "rd-input-range-with-datalist";
    const customTicksContainerClass = "rd-input-range-custom-ticks-container";
    const customTickClass = "rd-input-range-custom-tick";

    // setup tick marks.
    document
        .querySelectorAll("." + customIRWDClass)
        ?.forEach((eachCustomRange) => {
            const eachDatalist = eachCustomRange.querySelector("datalist");
            // get input `max` attribute value. default is 100.
            let inputRangeMax = 100;
            const inputRange = eachCustomRange.querySelector(
                'input[type="range"]'
            );
            if (inputRange.hasAttribute("max")) {
                inputRangeMax = inputRange.getAttribute("max");
            }

            if (
                eachCustomRange.querySelector("." + customTicksContainerClass)
            ) {
                // if there is already generated ticks.
                // remove because we will re-generate.
                eachCustomRange
                    .querySelector("." + customTicksContainerClass)
                    .remove();
            }

            // generate custom ticks.
            // this is for fix that `<option>` tag can't position with CSS.
            let customTicksHTML =
                '<div class="' + customTicksContainerClass + '">';
            for (let i = 0; i < eachDatalist.options.length; i++) {
                const optionValue = parseFloat(eachDatalist?.options[i]?.value);
                customTicksHTML += '<div class="' + customTickClass + '"';
                customTicksHTML +=
                    ' data-value="' +
                    (eachDatalist?.options[i]?.value ? optionValue : "") +
                    '"';
                customTicksHTML +=
                    ' data-label="' +
                    (eachDatalist?.options[i]?.label
                        ? eachDatalist.options[i].label
                        : "") +
                    '"';
                customTicksHTML += ' style="';
                if (optionValue <= inputRangeMax) {
                    // if this option is not more than input range's max value.
                    customTicksHTML +=
                        "left: " +
                        (100 * parseFloat(optionValue)) /
                            parseFloat(inputRangeMax) +
                        "%;";
                } else {
                    // if this option is more than input range's max value.
                    // hide it.
                    customTicksHTML += "display: none;";
                }
                customTicksHTML += '"'; // close style attribute.
                customTicksHTML += ">"; // close opened tag.
                if (eachDatalist?.options[i]?.label) {
                    customTicksHTML += eachDatalist.options[i].label;
                }
                customTicksHTML += "</div>"; // close each custom tick.
            } // endfor; loop datalist's options.
            customTicksHTML += "</div>";
            eachDatalist.insertAdjacentHTML("afterend", customTicksHTML);

            // get max height of each tick and set the heighest number to the container.
            // this is for fixing position absolute cause the container has height zero.
            let maxHeightTick = 0;
            eachCustomRange
                .querySelectorAll("." + customTickClass)
                ?.forEach((eachTick) => {
                    const eachTickRect = eachTick.getBoundingClientRect();
                    if (eachTickRect.height > maxHeightTick) {
                        maxHeightTick = eachTickRect.height;
                    }
                });
            eachCustomRange.querySelector(
                "." + customTicksContainerClass
            ).style.height = maxHeightTick + "px";
            // do not automatically append the `output` HTML element to let dev design their style.
        });
    // end setup tick marks.

    if (false === isListenedInputRangeEvent) {
        // if not listened the input range event yet.
        // listen on slide the input range and show its value to `output` HTML element.
        document.addEventListener("input", (event) => {
            isListenedInputRangeEvent = true;
            let thisInput = event.target;
            if (!thisInput.closest("." + customIRWDClass)) {
                return;
            }
            const customIRWDContainer = thisInput.closest(
                "." + customIRWDClass
            );
            const outputHTML = customIRWDContainer.querySelector("output");
            if (outputHTML) {
                // if there is `output` HTML in the custom input range.
                outputHTML.value = thisInput.value;
            }
        });
    }
} // customInputRangeWithDatalist


// to use: call the function.
customInputRangeWithDatalist();

ผลลัพธ์

จากผลลัพธ์จะปรากฏขีดติ๊กสำหรับ datalist แล้ว

โค้ดทั้งหมด

เมื่อนำโค้ดทั้งหมดมารวมกันแล้วแยกเป็น HTML, CSS โดยเว้น JavaScript เอาไว้เนื่องจากโค้ดที่เผยแพร่ไว้แล้วด้านบนมีครบถ้วนหมดแล้ว ก็จะได้ดังต่อไปนี้.

HTML

<h2>Custom design of input range</h2>
<p><label for="cdex1">Basic</label>
    <input id="cdex1" class="rd-input-range custom-input-range-fixed-width" type="range">
</p>
<p><label for="cdex2">With datalist</label>
    <input id="cdex2" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl1">
</p>
<p><label for="cdex3">Disabled</label>
    <input id="cdex3" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl1" disabled>
</p>
<p><label for="cdex4">With datalist less than input max (500)</label>
    <input id="cdex4" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl2" min="0" max="500">
</p>
<p><label for="cdex5">With datalist more than input max (100)</label>
    <input id="cdex5" class="rd-input-range custom-input-range-fixed-width" type="range" list="dtl3" min="0" max="100">
</p>

<hr>

<h2>Custom design of input range and datalist tick marks</h2>
<p>This part required JS and custom HTML to work.</p>
<p><label for="cdirdex1">With datalist</label>
    <div class="rd-input-range-with-datalist">
        <input id="cdirdex1" class="rd-input-range" type="range" list="cdirddtl1">
        <datalist id="cdirddtl1">
            <option value="0"></option>
            <option value="50"></option>
            <option value="100"></option>
        </datalist>
    </div>
</p>
<p><label for="cdirdex4">With datalist less than input max (500)</label>
    <div class="rd-input-range-with-datalist">
        <input id="cdirdex4" class="rd-input-range" type="range" list="cdirddtl2" min="0" max="500">
        <datalist id="cdirddtl2">
            <option value="0"></option>
            <option value="50"></option>
            <option value="100"></option>
        </datalist>
    </div>
</p>
<p><label for="cdirdex5">With datalist more than input max (100) and label</label>
    <div class="rd-input-range-with-datalist">
        <input id="cdirdex5" class="rd-input-range" type="range" list="cdirddtl3" min="0" max="100">
        <datalist id="cdirddtl3">
            <option value="0" label="0"></option>
            <option value="25" label="25"></option>
            <option value="50" label="50"></option>
            <option value="500" label="500"></option>
        </datalist>
    </div>
</p>

CSS

/* Custom design input range. ============================== */
input[type="range"].rd-input-range {
    -webkit-appearance: none;
    appearance: none;
    height: 37px;
    margin: 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);/* remove white-blue background color on tap or on touch in chrome for android. */
    width: 100%;
}
input[type="range"].rd-input-range:disabled {
    /* this covered beginning part but not for thumb and track at the end. the last part of track will be covered by track selector */
    cursor: not-allowed;
    opacity: 0.5;
}

/* Input range's thumb */
input[type="range"].rd-input-range::-moz-range-thumb {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 30px;
    width: 15px;
}
input[type="range"].rd-input-range:active:not(:disabled)::-moz-range-thumb {
    outline: 3px solid rgba(255, 100, 0, 0.3);
}
input[type="range"].rd-input-range:disabled::-moz-range-thumb {
    cursor: not-allowed;
}
input[type="range"].rd-input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 30px;
    margin-top: -14px;
    width: 15px;
}
input[type="range"].rd-input-range:active:not(:disabled)::-webkit-slider-thumb {
    outline: 3px solid rgba(255, 100, 0, 0.3);
}
input[type="range"].rd-input-range:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}
/* End input range's thumb */

/* Input range track (can't use comma separate for ::-moz-xxx and ::-webkit-xxx) */
input[type="range"].rd-input-range::-moz-range-track {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 3px;
}
input[type="range"].rd-input-range:disabled::-moz-range-track {
    cursor: not-allowed;
}
input[type="range"].rd-input-range::-webkit-slider-runnable-track {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    height: 3px;
}
input[type="range"].rd-input-range:disabled::-webkit-slider-runnable-track {
    cursor: not-allowed;
}
input[type="range"].rd-input-range:focus::-webkit-slider-runnable-track {
    background: #eee;
}
/* End input range track */

/* Input range progress */
input[type="range"].rd-input-range::-moz-range-progress {
    background-color: #52A0E5;
    border: 1px solid #aaa;
    border-radius: 0px;
    cursor: pointer;
    height: 3px;
}
/* currently not available for Webkit engine such as Chrome, Edge, etc. */
/* End input range progress */

/* End custom design of input range. ===================== */


/* Custom design of input range tick marks (datalist) */
.rd-input-range-with-datalist {
    display: block;
}

.rd-input-range-with-datalist .rd-input-range-custom-ticks-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: calc(100% - (15px));/* 15 px is input range thumb size. refer from typo-and-form/_form-input-range.css file. */
}

.rd-input-range-with-datalist .rd-input-range-custom-ticks-container > .rd-input-range-custom-tick {
    color: #777;
    font-size: small;
    font-weight: lighter;
    padding: 0;
    position: absolute;
}
.rd-input-range-with-datalist .rd-input-range-custom-ticks-container > .rd-input-range-custom-tick::before {
    border-left: 1px solid #aaa;
    content: "";
    display: block;
    min-height: 10px;
}
/* End custom design of input range tick marks. */

ตัวอย่างการทำงานจริง

คุณผู้อ่านสามารถทดลองดูตัวอย่างจริงได้บน codepen ที่ได้ทำไว้แล้วและนำมาเผยแพร่ไว้ด้านล่างนี้.

The post ออกแบบ Input range appeared first on rundiz.

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('hello');
synth.speak(utterance);

เมื่อโหลดหน้าเว็บที่มีโค้ดด้านบนนี้ เบราว์เซอร์ก็จะส่งเสียง hello ออกมา. แต่ถ้าเราเปลี่ยนจากคำว่า hello เป็นภาษาไทย เช่น สวัสดี เป็นต้น ก็จะอาจจะไม่มีเสียงใดๆเนื่องจากระบบและค่าเริ่มต้นของภาษานั้นไม่รองรับ ให้เราทำการเพิ่ม utterance.lang = 'th-TH'; ก็จะสามารถอ่านภาษาไทยได้แล้ว.

สำหรับการตั้งค่าอื่นๆ เรายังกำหนดได้อีก ผ่าน properties ต่างๆ เช่น เสียงที่จะใช้ (voice), ความสูงต่ำของเสียง (pitch), ความเร็วในการพูด (rate), ความดัง (volume) ทั้งนี้ขอให้คุณผู้อ่านคลิกดูเอกสารอ้างอิงจากลิ้งค์ในชื่อ class ที่ระบุด้านบนของบทความ. คุณผู้อ่านสามารถเข้าไปทดลองตัวอย่างที่ผมได้เขียนไว้แล้วได้ที่ https://jsfiddle.net/y7eLp8g4/ หรือ https://codepen.io/ve3/pen/MYWzEwg.

ตัวอย่าง

ปัญหา

การไม่สามารถอ่านตัวเลขที่มีจำนวนเยอะๆได้ เช่นเลข 123455669 จะไม่สามารถอ่านออกมาเป็นจำนวนร้อยล้านได้เลย ทั้งภาษาไทยและอังกฤษ จากการทดสอบบน Windows Firefox, Windows Edge. แต่มันจะสามารถอ่านได้ถ้าหากเพิ่มเครื่องหมาย , ให้ทุกๆ 3 หลัก เช่นเลข 123,455,669 เป็นต้น. ดังนั้นในส่วนนี้หากต้องการให้อ่านออกมาเป็นแบบใด จำเป็นจะต้องเขียนโค้ดเพิ่มเติมในการตรวจสอบและแก้ไขก่อนส่งให้ตัวโปรแกรมทำการอ่านในลำดับต่อมา.

การอ่านออกเสียงไม่ตรงภาษาของค่าเริ่มต้น. จากการทดสอบบน Android Google Chrome พบว่า เมื่อเขียนโค้ดที่พื้นฐานที่สุด แล้วเรียกใช้ property lang เข้าไป สลับกับไม่ใช้ พบว่าบางครั้งตัวโปรแกรมจะค้างเอาค่า property lang ของเก่ามาใช้ ทำให้การออกเสียงไม่ตรงค่าเริ่มต้นหรือเป็นไปตามที่ต้องการ. ทางแก้ไขคือให้กำหนดค่า property lang ทุกครั้ง.

The post สั่งให้เว็บพูดออกเสียงได้ด้วย Web Speech API appeared first on rundiz.

/**
 * Fix Thai vowels and characters. (สระลอย, เสียงวรรณยุกต์ลอย)
 *
 * @link https://gist.github.com/dtinth/716814 Original source code
 * @param string $text
 * @return string
 */
function fixThaiVowels(string $text): string
{
    // เสียงวรรณยุกต์ และทัณฑฆาต (การันต์)
    $back = [
        "\xE0\xB9\x88" => "\xEF\x9C\x8A", //่(ไม้เอก)
        "\xE0\xB9\x89" => "\xEF\x9C\x8B", //(ไม้โท)
        "\xE0\xB9\x8A" => "\xEF\x9C\x8C", //(ไม้ตรี)
        "\xE0\xB9\x8B" => "\xEF\x9C\x8D", //(ไม้จัตวา)
        "\xE0\xB9\x8C" => "\xEF\x9C\x8E" //(ตัวการันต์)
    ];
    $bottomVowels = [
        "\xE0\xB8\xB8" => "\xEF\x9C\x98", // สระอุ
        "\xE0\xB8\xB9" => "\xEF\x9C\x99", // สระอู
        "\xE0\xB8\xBA" => "\xEF\x9C\x9A", // พินธุ
    ];
    $replaces = [];
    // ตัวอักษรที่มีความสูงที่จะต้องไม่ให้ชนกับเสียงวรรณยุกต์
    $highChars = [
        "ิ", // สระอิ
        "ี", // สระอี
        "ึ", // สระอึ
        "ื", // สระอือ
        "ั", // ไม้หันอากาศ
        "ำ", // สระอำ
        "ํ", // สระอำ ที่ไม่มีสระอา
        "ป",
        "ฝ",
        "ฟ",
        "ฬ",
    ];
    // ตัวอักษรที่ลากลงด้านล่าง
    $lowChars = [
        "ฎ",
        "ฏ",
        "ฤ",
        "ฦ",
    ];
    // ตัวอักษรที่มีฐานด้านล่างและจะไปชนกับสระที่อยู่ด้านล่าง ซึ่งจะต้องถูกแทนที่โดยการตัดฐานล่างออกไป
    $lowReplaceChars = [
        'ญ' => "\xEF\x9C\x8F",
        'ฐ' => "\xEF\x9C\x80",
    ];

    // loop กำหนดค่าคืนกลับ (replace) เสียงวรรณยุกต์ที่จะต้องลอยสูง
    foreach ($highChars as $p) {
        if ($p !== 'ำ' && $p !== 'ํ') {
            for ($i = 0x8A; $i <= 0x8E; ++$i) {
                $from = $p . "\xEF\x9C" . chr($i);
                $to = $p . "\xE0\xB9" . chr($i - 2);
                $replaces[$from] = $to;
            }// endfor;
            unset($i);
        } else {
            for ($i = 0x8A; $i <= 0x8E; ++$i) {
                $from = "\xEF\x9C" . chr($i) . $p;
                $to = "\xE0\xB9" . chr($i - 2) . $p;
                $replaces[$from] = $to;
            }// endfor;
            unset($i);
        }// endif;
    }// endforeach;
    unset($highChars, $p);

    // loop กำหนดค่าสระด้านล่าง ที่จะต้องเปลี่ยน (replace) เมื่อเจอตัวอักษรที่ลากลงด้านล่าง
    foreach ($lowChars as $p) {
        foreach ($bottomVowels as $orig => $replace) {
            $from = $p . $orig;
            $to = $p . $replace;
            $replaces[$from] = $to;
        }// endforeach;
        unset($orig, $replace);
    }// endforeach;
    unset($lowChars, $p);

    // loop กำหนดตัวอักษรที่มีฐานด้านล่าง ที่จะต้องเปลี่ยน (replace) เมื่อมีสระด้านล่างตามมาด้วย
    foreach ($lowReplaceChars as $origChar => $replaceChar) {
        foreach ($bottomVowels as $orig => $replace) {
            $from = $origChar . $orig;
            $to = $replaceChar . $orig;
            $replaces[$from] = $to;
        }// endforeach;
        unset($orig, $replace);
    }// endforeach;
    unset($lowReplaceChars, $origChar, $replaceChar);

    $text = strtr($text, $back);
	$text = strtr($text, $replaces);
    unset($back, $replaces);
    return $text;
}// fixThaiVowels

ที่มาของโค้ดด้านบนนี้ แรกเริ่มเดิมทีมาจาก URL https://gist.github.com/dtinth/716814 แต่ได้มีการปรับแต่งเรื่อยมาจนกระทั่งผู้เขียนได้เพิ่มการแก้ปัญหา สระด้านล่างไปชนกับตัวอักษรที่ลากยาวลงมาด้านล่างด้วย เช่น ญ, ฎ เป็นต้น.

ทดสอบ

ในการทดสอบ ผู้เขียนจะใช้โค้ดของ mpdf ซึ่งคุณผู้อ่านจะนำไปใช้กับอะไรอย่างอื่นก็ได้ทั้งหมด. ตัวอย่างโค้ดทดสอบ.

require 'vendor/autoload.php';

function mpdfGetDefaultFonts(): array
{
    $defaultConfig = (new \Mpdf\Config\ConfigVariables())->getDefaults();
    $fontDirs = $defaultConfig['fontDir'];
    $defaultFontConfig = (new \Mpdf\Config\FontVariables())->getDefaults();
    $fontData = $defaultFontConfig['fontdata'];
    // remove not exists font.
    unset($fontData['eeyekunicode']);
    unset($defaultConfig, $defaultFontConfig);

    return [
        'fontDirs' => $fontDirs,
        'fontData' => $fontData,
    ];
}

list('fontDirs' => $fontDirs, 'fontData' => $fontData) = mpdfGetDefaultFonts();
$fontDirs = array_merge($fontDirs, [__DIR__ . DIRECTORY_SEPARATOR . 'custom-fonts']);// แก้ไขของคุณ
$fontData = $fontData + [
    'sarabunnew' => [
        'R' => 'THSarabunNew.ttf',
    ],
];// แก้ไขของคุณ
$config = [
    'default_font' => 'sans-serif',
    'default_font_size' => 22,
    'fontdata' => $fontData,
    'fontDir' => $fontDirs,
];
unset($fontDirs);

$mpdf = new \Mpdf\Mpdf($config);
$fontsToTest = ['garuda', 'zawgyi-one', 'sarabunnew'];

$html = '<!DOCTYPE html><html>' . PHP_EOL;
$html .= '<head><meta charset="utf-8"></head>' . PHP_EOL;
$html .= '<body>' . PHP_EOL;
$html .= '<h1>Fix Thai vowels</h1>' . PHP_EOL;
foreach ($fontsToTest as $font) {
    $html .= '<h3>Font: ' . $font . '</h3>' . PHP_EOL;
    $html .= '<p style="font-family:' . $font . ';">' . fixThaiVowels('อ่า อิ่ อี่ อึ่ อื่ อ้า อิ้ อี้ อึ้ อื้ อ๊า อิ๊ อี๊ อึ๊ อื๊ อ๋า อิ๋ อี๋ อึ๋ อื๋');
    $html .= '</p>' . PHP_EOL;
}
$html .= '</body>' . PHP_EOL;
$html .= '</html>' . PHP_EOL;

$mpdf->WriteHTML($html);
$mpdf->Output();

ผลลัพธ์ควรจะได้คล้ายภาพต่อไปนี้

The post แก้สระลอยภาษาไทยใน PHP PDF appeared first on rundiz.

ทางผู้เขียนจะขออธิบายและแสดงผลให้ดูตามลำดับของปัญหาดังนี้

Fatal error: Uncaught PDOException: SQLSTATE[HY000] [1040] Too many connections

ปัญหานี้เกิดจากมีการเรียกใช้งานหรือเปิดการเชื่อมต่อไปยังเซิร์ฟเวอร์ฐานข้อมูล โดยรวมทั้งเซิร์ฟเวอร์แล้วจำนวนมากเกินกว่าจำนวนสูงสุดของ max_connections ที่ทาง web hosting กำหนดไว้ให้. ทดสอบได้บนเครื่องของเราเอง เริ่มจากการตรวจสอบโดยใช้คำสั่งนี้บน phpMyAdmin หรือโปรแกรมใดๆที่รันคำสั่งบน MySQL, MariaDB ได้.

SHOW VARIABLES WHERE `variable_name` = 'max_connections'

เมื่อทดลองแล้ว จะได้ผลลัพธ์คือตัวเลขของจำนวนการเชื่อมต่อสูงสุดที่ทาง host นั้นๆอนุญาตให้โดยรวมทั้ง server. จากการทดลองบน localhost ของตัวเองคือ 151. หมายความว่า MariaDB ที่ติดตั้งบนเครื่องของผู้เขียนจะอนุญาตให้เชื่อมต่อโดยรวมได้สูงสุด 151 และถ้าหากตัวเลขนี้เป็นผลจากการรันบน web hosting จริงๆ ก็หมายความว่า web hosting นั้นๆอนุญาตให้โดยรวมต่อทั้ง server เป็นจำนวนเท่านั้นไม่ว่าผู้ใช้จะมีกี่รายก็ตาม.

ต่อมาให้เราใช้โค้ด PHP ต่อไปนี้ทดลองรันแล้วดูผลลัพธ์ โดยก่อนทดลอง จำเป็นต้องเปิดแสดง error ให้หมดเสียก่อน.

<?php
$dsn = 'mysql:dbname=test;host=localhost;charset=utf8mb4';
$user = 'user';
$password = 'pass';
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_STRINGIFY_FETCHES => true,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
];

$dbh = new PDO($dsn, $user, $password, $options);
for ($i = 2; $i <= 151; ++$i) {
    ${'dbh' . $i} = new PDO($dsn, $user, $password, $options);
}// endfor;


$sql = 'SHOW STATUS WHERE `variable_name` LIKE \'Threads%\'';
$Sth = $dbh->prepare($sql);
$Sth->execute();
$result = $Sth->fetchAll();
unset($sql, $Sth);
var_dump($result);
unset($result);

สิ่งที่ผู้อ่านต้องทำจากโค้ดด้านบนคือ แก้ไขค่าต่างๆ เช่น dbname, host, user, password ให้ตรงกับที่ใช้งาน จากนั้นแก้ไขตัวเลข 151 ให้เท่ากันกับตัวเลขที่ได้รับจากค่าจำนวนการเชื่อมต่อสูงสุด ของ MySQL, MariaDB ด้านบน. ทำการทดลองรันครั้งแรกควรจะได้ผลปกติไม่มี error ใดๆ และให้แก้ไขจากตัวเลข 151 ไปเป็นตัวเลขที่มากกว่าจำนวนการเชื่อมต่อสูงสุดของคุณ เช่น 152 สำหรับเครื่องของผม แล้วทดลองรันอีกครั้ง โดยคราวนี้จะเกิด error ขึ้นคือ Fatal error: Uncaught PDOException: SQLSTATE[HY000] [1040] Too many connections.

Fatal error: Uncaught PDOException: SQLSTATE[HY000] [1203] User user already has more than 'max_user_connections' active connections

ปัญหานี้เกิดจากมีการเรียกใช้งานหรือเปิดการเชื่อมต่อไปยังเซิร์ฟเวอร์ฐานข้อมูล จำนวนต่อ account บน host เกินจำนวนสูงสุดที่ทาง web hosting ได้กำหนดไว้ให้. ทดสอบได้บนเครื่องของเราเอง โดยการแก้ไข my.cnf หรือ my.ini ให้มีค่า max_user_connections ต่ำๆ เช่น 10 เป็นต้น. จากนั้นใช้โค้ดเดียวกันกับด้านบนทดลองรันแล้วจะได้ผลออกมาคือ Fatal error: Uncaught PDOException: SQLSTATE[HY000] [1203] User user already has more than 'max_user_connections' active connections.

กลับมาที่กรณีที่มีปัญหากับ web hosting นั้นๆ จากการทดลองด้วยตัวเองเหล่านี้ ทำให้พบว่าฝ่าย support นั้นไม่มีความรู้ความเข้าใจ จึงได้ยกคำตอบที่ไม่เกี่ยวกันมาตอบปัญหา เช่นไปยกเอาค่า Threads_created มาบอกว่าเป็นจำนวนการเชื่อมต่อสูงสุดของ server ซึ่งไม่ตรงตามที่อธิบายโดยทั้ง MySQL และ MariaDB เอง อีกทั้งยังยกเรื่อง performance ปริมาณการโหลด ซึ่งไม่เกี่ยวกันมาอีก เพราะปัญหาจำนวนการเชื่อมต่อที่มากเกินอนุญาตนั้น อาจมีผลกับการที่ server ทำงานหนักมากและจำนวนอนุญาตไว้มาก หรือจำนวนการเชื่อมต่อ อนุญาตไว้เพียงเล็กน้อยและ server ยังไม่ทันได้ทำงานหนักเลยก็เป็นไปได้ทั้งสองแบบ.

สรุป

ดังนั้นสิ่งที่ผู้อ่านควรตระหนักเมื่อเลือกใช้ shared hosting (อาจจะกรณีเช่า host ใหม่หรือย้ายไป host ใหม่) ในเรื่องที่เกี่ยวกับประเด็นนี้ก็คือ จำนวน Threads_connected. ตรวจสอบโดยใช้คำสั่ง MySQL ต่อไปนี้.

SHOW STATUS WHERE `variable_name` = 'Threads_connected'

จำนวนของค่านี้ ให้เราทดลองเรียกใช้เมื่อยังไม่ได้เปิดเว็บให้ online เต็มที่. กล่าวคือติดตั้งโดเมนทดลองแล้วเรียกใช้เพียงคนเดียว จำนวน Threads_connected จะสะท้อนทั้งโฮสท์ว่ามีคนใช้งานร่วมกับเราอยู่เท่าไหร่.

ต่อมาคือจำนวน max_connections. ให้ตรวจสอบค่านี้โดยใช้คำสั่ง SQL ด้านบนในหัวข้อ Too many connections. จำนวนค่านี้จะหมายถึงจำนวนสูงสุดต่อทั้ง server ที่ทางผู้ให้บริการกำหนดไว้ ซึ่งถ้าจำนวน Threads_connected ปริ่มๆจะเต็มอยู่แล้ว ก็พิจารณาขอย้าย server โดยให้เหตุผลตามนี้ไปว่ามันใกล้จะเต็มหรืออาจขอยกเลิกบริการและขอคืนเงินตามเงื่อนไข.

สุดท้ายคือจำนวน max_user_connections. ให้ตรวจสอบค่านี้โดยใช้คำสั่ง SQL ต่อไปนี้.

SHOW VARIABLES WHERE `variable_name` = 'max_user_connections'

คำสั่งนี้จะเป็นจำนวนการเชื่อมต่อฐานข้อมูลสูงสุดต่อ 1 ผู้ใช้คือ account ของคุณบน shared hosting. การตรวจสอบจะทำได้ยากสักหน่อยเพราะจำนวน Threads_connected จะเป็นจำนวนรวมต่อทั้ง server ซึ่งคุณอาจใช้โค้ดด้านบนตรวจสอบก็ได้ โดยกำหนดจำนวน loop ของ for ให้พอดีหรือเกิน max_user_connections เพื่อจะได้ทราบว่าสูงสุดที่เกินนั้นตรงความจริงหรือไม่.

The post MySQL (MariaDB) กับขีดจำกัดการเชื่อมต่อสูงสุด appeared first on rundiz.

การขยาย SD card นี้ อธิบายขยายความก็คือการ copy, clone, upgrade SD card หรือ micro SD card นั่นเอง. และขั้นตอนต่อไปนี้เป็นการทำผ่าน GUI หรือหน้า desktop ซึ่งเข้าใจง่ายและใช้งานง่าย.

ก่อนเริ่มต้น สมมุติว่า Raspberry Pi OS ที่คุณใช้งานนั้นเป็น micro SD ที่เสียบในสล็อตของตัว Raspberry Pi (จากนี้จะขอเรียกสั้นๆว่า R Pi). และ micro SD ตัวใหม่เสียบผ่าน card reader ทางช่อง USB.
เมื่อเสียบ micro SD card ตัวใหม่เข้าไปใน card reader แล้ว. จากหน้า desktop ของคุณใน R Pi (Debian). ให้คลิกเมนูเริ่มต้น หรือที่มีรูป Raspberry สีแดงๆ แล้วไปที่ > Accessories > SD Card Copier.

sudo apt update
sudo apt install piclone

สำหรับภาพตัวอย่างจะเป็นการทำการอัปเกรด, หรือขยายขนาด micro SD card ที่ใช้รัน R Pi OS อยู่ โดยขยายจาก 64 GB ไปเป็น 256 GB.

จากภาพ, ตัวเลือกตรงบรรทัด Copy From Device: ให้เลือกจากการ์ดที่กำลังใช้งาน R Pi OS อยู่ ซึ่งอาจเป็นชื่ออื่นก็ได้ แต่ถ้าเสียบผ่านสล็อตบนตัวอุปกรณ์ R Pi จะไม่ใช่ USB. ขั้นนี้ต้องเลือกและระมัดระวังตรวจให้แน่ใจด้วยตัวเอง.
จากนั้นตัวเลือกตรงบรรทัด Copy To Device: ให้เลือกการ์ดตัวใหม่ที่จะอัปเกรดหรือขยายพื้นที่เพิ่มมากขึ้น. ถ้าหากเสียบผ่าน card reader ทางช่อง USB ให้เลือกตัวเลือกที่เป็น USB โดยตรวจดูชื่อเทียบเคียงกับคำสั่ง df -h ที่ทำงานตามภาพตัวอย่างในหน้าต่างด้านขวา.

กดปุ่ม Start แล้วยืนยันเพื่อเริ่มทำงานคัดลอก micro SD card จากตัวเก่าไปยังตัวใหม่.

จากภาพด้านบน เป็นขั้นตอนที่กำลังคัดลอกไฟล์ไปยัง micro SD card ตัวใหม่โดยโปรแกรมจะทำการสร้างพาร์ติชั่น (partition) ให้ด้วย. ในขั้นตอนนี้เมื่อคัดลอกสำเร็จแล้ว ให้สั่ง shutdown เพื่อปิดเครื่องอย่างสมบูรณ์ จากนั้นถอด micro SD card ทั้งสองออก แล้วเสียบการ์ดตัวใหม่ที่จะทำการอัปเกรดหรือขยายพื้นที่เข้าไปยังสล็อตบนเครื่อง R Pi. ทำการดึงปลั๊กและเสียบปลั๊กไฟเข้าไปใหม่เพื่อเปิดเครื่อง (ขั้นตอนสำหรับเครื่องปกติที่ไม่มีอุปกรณ์พิเศษ).

จากภาพด้านบน เมื่อเปิดเครื่องแล้วให้รอสักครู่ ซึ่งอาจจะนานกว่าปกติ เพราะตัวระบบจะทำการตรวจสอบ micro SD card ตัวใหม่แล้วขยายพื้นที่บน partition ที่อาจจะเหลือให้เต็ม เพื่อการใช้งานเต็มประสิทธิภาพ.  เมื่อเข้าสู่หน้า desktop ได้แล้ว ให้เปิด terminal แล้วพิมพ์คำสั่ง df -h ตัวโปรแกรมควรจะแสดงพื้นที่ทั้งหมดบน micro SD card ตัวใหม่อย่างถูกต้อง เป็นอันเสร็จสิ้นขั้นตอนทั้งหมด.

The post วิธีขยาย (micro) SD card บน Raspberry Pi โดยใช้ GUI appeared first on rundiz.

เนื่องจากผู้ให้บริการขายสินค้าแบบ subscription นั้นมีจำนวนมาก แต่ส่วนใหญ่จะคิดค่าบริการรายเดือน และถ้าหากคุณขายไม่ได้ก็เท่ากับคุณจะต้องเสียเงินไปฟรีๆทุกเดือน. ดังนั้นโพสต์นี้จึงเน้นเฉพาะแพลตฟอร์มที่ไม่คิดค่าบริการรายเดือน แต่จะเก็บเป็น % ต่อยอดขายแทน ซึ่งข้อดีคือถ้าขายได้น้อยหรือขายยาก ก็จะไม่ต้องเสียค่าใช้จ่าย เหมาะสำหรับผู้เริ่มต้นที่ยังมีฐานลูกค้าไม่มากนัก.

จากตารางจะพบว่า Lemon squeezy และ Paddle รองรับช่องทางการชำระเงินจากลูกค้าที่หลากหลายมากกว่า แต่ Lemon squeezy จะจ่ายเงินเมื่อมียอดขั้นต่ำน้อยกว่า คือต้องมียอดเงินในระบบของเขาตั้งแต่ 50 ดอลล่าร์ขึ้นไป. ในขณะที่ Payhip ช่องทางการชำระเงินมีน้อยมากแต่ก็เป็นที่ใช้งานอย่างกว้างขวาง (PayPal) แถมยังรองรับการชำระด้วยบัตรผ่าน PayPal. ทั้งนี้ในส่วนการจ่ายเงินผู้ขายของ Payhip เขาจะโอนเงินตรงเข้า PayPal หรือ Stripe ทันทีเมื่อผู้ซื้อชำระเงิน.

แพลตฟอร์มทั้งหลายเหล่านี้ต่างมีข้อดีตรงกันคือ ผู้ขายไม่จำเป็นต้องมีเว็บไซต์ และถ้ามีก็สามารถนำไปใช้ได้เช่นกันเพราะมี API รองรับ.

The post แพลตฟอร์มที่รองรับการขายแบบ subscription ไม่มีรายเดือน (2024) appeared first on rundiz.

แบบไม่ใช้หน้า (Pages) ของ WordPress

กรณีแรก จะใช้แบบ URL กำหนดเอง (rewrite rules) ล้วนๆ โดยไม่พึ่งพาระบบหน้า (Pages) ของ WordPress. ซึ่งข้อดีคือเราสามารถทำให้ URL ใช้สลัก(slug)เดียวกันได้ ดังตัวอย่างนี้.
https://domain/custompage (สำหรับภาษาเริ่มต้น ที่ไม่ได้แสดงภาษาใน URL),
https://domain/custompage/my,
https://domain/en/custompage,
https://domain/en/custompage/my

ซอร์สโค้ด

<?php
class Routes
{


    /**
     * @var string Main query name for the page after /custompage/ URL.
     */
    public const MAIN_QUERY_NAME = 'custompage';


    /**
     * Constructor.
     */
    public function __construct()
    {
        add_action('init', [$this, 'addRewriteRules']);
        add_action('template_redirect', [$this, 'runPages']);
    }// __construct


    /**
     * Add rewrite rules.
     */
    public function addRewriteRules()
    {
        add_rewrite_rule('^([a-zA-Z]{0,2}/?)custompage/?$', 'index.php?lang=$matches[1]&' . static::MAIN_QUERY_NAME . '=index', 'top');
        add_rewrite_rule('^([a-zA-Z]{0,2}/?)custompage/my?$', 'index.php?lang=$matches[1]&' . static::MAIN_QUERY_NAME . '=mycustompage', 'top');

        add_rewrite_tag('%' . static::MAIN_QUERY_NAME . '%', '([^&]+)');
    }// addRewriteRules


    /**
     * Run the pages based on query(s).
     */
    public function runPages()
    {
        $mainQueryVal = get_query_var(static::MAIN_QUERY_NAME, null);

        if (!is_null($mainQueryVal)) {
            switch ($mainQueryVal) {
                default:
                    var_dump($mainQueryVal);
                    echo 'hello world';
            }// endswitch;

            exit();// required! to prevent WordPress continue executing. and don't use `wp_die()`.
        }// endif;

        unset($mainQueryVal);
    }// runPages


}

ข้อเสียสำหรับตัวอย่างด้านบน คือ เมื่อตรวจสอบด้วยคำสั่งบนเท็มเพลท เช่น is_home() ภายในเมธ็อด runPages() จะได้ค่าเป็น true เสมอ. วิธีแก้ไขคือ เพิ่ม parameter 'pagename=' เข้าไปใน add_rewrite_rule() เช่น:

add_rewrite_rule('^([a-zA-Z]{0,2}/?)custompage/?$', 'index.php?lang=$matches[1]&' . static::MAIN_QUERY_NAME . '=index&pagename=mycustompage', 'top')

แต่ก็จะแลกมากับสถานะ HTTP เป็น 404 ในกรณีที่คุณใส่ชื่อหน้าที่ไม่มีอยู่บนระบบหน้า (Pages) ของ WordPress ซึ่งก็จะต้องมาแก้ไขโดยการกำหนด HTTP status และหัวข้อของหน้านั้นใหม่ และกำหนด $wp_query->is_404 = false; ภายใน hook template_redirect. นอกจากนี้ก็จะต้องแก้ไขแท็ก title ให้เหมาะผ่าน filter document_title_parts.

คุณอาจดูอ้างอิงเพื่อใส่ query vars อื่นๆได้อีก.

แบบใช้หน้า (Pages) ของ WordPress

แบบที่สองนี้ผู้อ่านจะต้องไปสร้างหน้าขึ้นมา เช่น หน้าภาษาไทยชื่อสลัก "หน้าที่กำหนดเอง" และแปลเป็นอังกฤษผ่าน Polylang ชื่อสลัก "custompage". จากนั้นนำ ID ของทั้ง 2 หน้านี้มาใส่ใน array() เช่น array(165, 166) หรือใช้ฟังก์ชั่นของ Polylang เช่น pll_get_post_translations(165); เพื่อดึงค่า post ID ทั้งหมดจากทุกภาษาที่เป็นหน้าแปลของ ID ของหน้าหลักที่เลือกไว้.

วิธีนี้ผู้อ่านจำเป็นจะต้องดึงเอา post ID จากหน้าของภาษาหลัก และ ID ของทุกๆภาษาที่สร้างหน้าแปลขึ้นมาแล้ว นำมาเพิ่มลงใน rewrite rule ในคราวเดียวกัน. มิฉะนั้น WordPress จะไม่สามารถอ่านค่า rewrite rule ของ ID ของหน้านั้นในภาษาอื่นๆได้ เนื่องจากมันทำงานไปแล้วและติดอยู่ใน cache ซึ่งจะต้องทำการ flush ใหม่โดยไม่จำเป็นและสิ้นเปลืองทรัพยากร server. การเพิ่ม rewrite rule ทุก ID (จากหน้าที่แปลทุกภาษา)ในคราวเดียวจะช่วยแก้ปัญหานี้.

การใช้รูปแบบหน้าของ WordPress นี้นั้น ผู้อ่านจะไม่สามารถใช้สลักเดียวกันได้ ยกเว้นแต่ได้ซื้อปลั๊กอิน Polylang Pro เอาไว้. ดังนั้น URL จะได้เป็นลักษณะคล้ายๆดังต่อไปนี้.
https://domain/หน้าที่กำหนดเอง
https://domain/หน้าที่กำหนดเอง/my
https://domain/en/custompage
https://domain/en/custompage/my

ซอร์สโค้ด

class Routes
{


    /**
     * @var string Main query name for the page after /custompage/ URL.
     */
    public const MAIN_QUERY_NAME = 'custompage';


    /**
     * Constructor.
     */
    public function __construct()
    {
        add_action('init', [$this, 'addRewriteRules']);
        add_action('template_redirect', [$this, 'runPages']);
    }// __construct


    /**
     * Add rewrite rules.
     */
    public function addRewriteRules()
    {
        // IDs of a post and translated posts. 165 is main post (page).
        $postIds = pll_get_post_translations(165);
        $postIds = array_values($postIds);

        foreach ($postIds as $postId) {
            $Post = get_post($postId);
            if (!is_object($Post)) {
                continue;
            }

            add_rewrite_rule('^([a-zA-Z]{0,2}/?)' . rawurldecode($Post->post_name) . '/?$', 'index.php?lang=$matches[1]&pagename=' . $Post->post_name . '&' . static::MAIN_QUERY_NAME . '=index_usepage', 'top');
            add_rewrite_rule('^([a-zA-Z]{0,2}/?)' . rawurldecode($Post->post_name) . '/my/?$', 'index.php?lang=$matches[1]&pagename=' . $Post->post_name . '&' . static::MAIN_QUERY_NAME . '=mycustompage', 'top');
            unset($Post);
        }// endforeach;
        unset($postId, $postIds);

        add_rewrite_tag('%' . static::MAIN_QUERY_NAME . '%', '([^&]+)');
    }// addRewriteRules


    /**
     * Run the pages based on query(s).
     */
    public function runPages()
    {
        $mainQueryVal = get_query_var(static::MAIN_QUERY_NAME, null);

        if (!is_null($mainQueryVal)) {
            switch ($mainQueryVal) {
                default:
                    var_dump($mainQueryVal);
                    echo 'hello world';
            }// endswitch;

            exit();// required! to prevent WordPress continue executing. and don't use `wp_die()`.
        }// endif;

        unset($mainQueryVal);
    }// runPages


}

ข้อสำคัญ

เมื่อทำการเพิ่มหรือแก้ไขโค้ดใน add_rewrite_rule() แล้ว ให้ทำการกดบันทึกที่หน้าตั้งค่าลิ้งค์ถาวร (Permalink) ด้วยทุกครั้ง เพื่อให้ระบบทำการ flush ของเก่าออกไปแล้วนำของใหม่มาใช้งาน.

The post การสร้าง URL แบบกำหนดเอง (rewrite rules) appeared first on rundiz.

โดยปกติ certificate จะมีกระบวนการต่างๆกว่าจะนำเข้าสู่ระบบหรือเว็บเบราว์เซอร์และได้รับความเชื่อถือ (trust) อย่างเช่น SSL ของ Let's encrypt ซึ่งถ้าหากเราสร้างขึ้นมาเอง จะไม่สามารถผ่านกระบวนการเหล่านั้นได้. แต่กระนั้นการจะใช้ SSL ที่มีในท้องตลาดไม่ว่าจะฟรีหรือเสียเงิน บางกรณีเราไม่สามารถจะสร้างอย่างถูกต้องได้เพราะติดขัดในขั้นตอนต่างๆ เช่น Let's encrypt ต้องการจะเข้าถึง HTTP port 80 ได้ เพื่อออกใบ cert แต่เครื่องคอมพิวเตอร์ที่เราใช้ ไม่มี public IP หรือมีแต่ไม่สามารถเลือก port ได้ เป็นต้น. กรณีอย่างนี้ก็จะต้องหาทางออกโดยใช้ self-signed certificate.

ใช้ OpenSSL

ดาวน์โหลดและติดตั้ง OpenSSL ได้จาก https://www.openssl.org/source/ หรือสำหรับบน Windows เลือกดาวน์โหลดได้ที่ https://wiki.openssl.org/index.php/Binaries. หากคุณใช้เว็บเซิร์ฟเวอร์ Apache บน Windows มันจะมาด้วยกันกับไฟล์ httpd.exe.

เพิ่ม path ไปยัง openssl.exe ไว้ใน Windows environment.

เมื่อติดตั้ง OpenSSL เสร็จแล้ว ให้เพิ่ม path ไปยัง openssl.exe ไว้ใน Windows environment PATH เพื่อจะเรียกคำสั่ง openssl ได้โดยง่าย.

1. กดเมนู Start
2. พิมพ์ systempropertiesadvanced.exe
3. คลิก Environment Variables
4. ที่กรอบ System Variables ดับเบิลคลิกที่ PATH
5. เพิ่ม path ไปยัง openssl.exe
6. กด OK ทั้งหมด

สร้าง Root cert.

ขั้นตอนนี้ ผู้อ่านอาจจะสร้างไฟล์ต่างๆไว้ในโฟลเดอร์ของ Apache/conf ก็ได้ เพื่อความสะดวกในการกำหนด config ไปด้วย. ให้เข้าไปที่โฟลเดอร์ดังกล่าวแล้วพิมพ์คำสั่งต่อไปนี้.

openssl req -x509 -sha256 -days 3650 -nodes -newkey rsa:2048 -subj="/CN=localhost.localhost/C=TH/L=Bangkok" -keyout rootCA.key -out rootCA.crt

จากคำสั่งดังกล่าว โปรแกรมจะสร้างไฟล์ rootCA.key และ rootCA.crt มาให้ 2 ไฟล์ ซึ่งทั้ง 2 ไฟล์นี้จะมีประโยชน์อย่างมากเมื่อนำเข้าไปในเว็บเบราเซอร์ให้เชื่อถือ.

สร้าง Certificate

ขั้นตอนนี้จะอยู่ในโฟลเดอร์เดียวกันกับขั้นตอนสร้าง Root certificate. ให้สร้างไฟล์ config ชื่อ server.cnf แล้วระบุข้อมูลต่อไปนี้ โดยแก้ไขส่วนต่างๆให้ตรงตามความจริงของผู้อ่านเอง.

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req # The extensions to add to the self signed cert
distinguished_name = dn

[dn]
countryName = TH
stateOrProvinceName = Bangkok
localityName = City
emailAddress = webmaster@localhost.localhost
commonName = localhost.localhost

[v3_req]
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
DNS.2 = localhost.localhost
DNS.3 = mydomain.local

ผู้อ่านอาจเปลี่ยนแปลง, ลบ, หรือเพิ่มเติมโดเมนต่างๆที่อยู่ภายใน alt_names ได้ให้สอดคล้องตามที่ต้องการ. จากนั้นใช้คำสั่งต่อไปนี้.

openssl req -x509 -nodes -newkey rsa:2048 -CA rootCA.crt -CAkey rootCA.key -keyout server.key -days 3650 -out server.crt -config server.cnf

จากคำสั่งด้านบน โปรแกรมจะสร้างไฟล์ server.key, server.crt ทั้งหมดจำนวน 2 ไฟล์.

นำไปใช้กับ Apache

สำหรับขั้นตอนเพิ่ม SSL certificate เพื่อนำไปใช้กับเว็บเซิร์ฟเวอร์อย่างเช่น Apache นั้น สามารถอ่านต่อได้ที่ เปิดใช้งาน SSL บน Apache.

ทำให้เบราว์เซอร์และ Android เชื่อถือ

ขั้นตอนต่อไปนี้เป็นการทำให้เว็บเบราว์เซอร์ อาทิเช่น Firefox, Google Chrome และระบบปฏิบัติการอื่น เช่น Android เชื่อถือ self-signed certificate ดังกล่าว.

Google Chrome

ขั้นตอนต่อไปนี้สำหรับ desktop เท่านั้น

1. เปิดเมนู Settings > Privacy and security > Security > Manage certificates
2. คลิก Installed by you
3. คลิก Import ที่แถว Trusted Certificates
4. เลือกไฟล์ rootCA.crt ที่ได้สร้างไว้ แล้วกด Open
5. Restart Google Chrome

Firefox

ขั้นตอนต่อไปนี้สำหรับ desktop เท่านั้น

1. เปิดเมนู Settings > Privacy & Security
2. คลิกที่ปุ่ม View Certificates
3. คลิกที่แท็บ Autorities
4. คลิก Import...
5. เลือกไฟล์ rootCA.crt ที่ได้สร้างไว้
6. ติ๊ก trust ทุกอย่างแล้วกด OK
7. Restart Firefox

Android

1. ให้ทำการคัดลอกไฟล์ rootCA.crt และ rootCA.key ที่ได้สร้างไว้แล้ว ไปบนอุปกรณ์ Android ด้วยวิธีใดวิธีหนึ่ง
2. เปิดแอป Settings > Security > Advanced > Encryption & credentials
3. แตะที่ Install a certificate > CA certificate
4. แตะที่ Install anyway
5. เลือกไฟล์ที่นำเข้ามาในขั้นตอนที่ 1 แล้ว

The post สร้าง self-signed certificate และทำให้เบราว์เซอร์เชื่อถือ appeared first on rundiz.