August, 2022 - My Awesome Moments

Deli Kafe & Bakery Kota Damansara Selangor

First time we ate at Kafe Deli Bakery in Kota Damansara. It was full house, we had to wait for 10 minutes to get seats. We tried to eat at the Kafe Deli Bakery because it was full that triggered our curiosity to try its foods.

We order mee goreng mamak, mee hoon goreng, wantan mee, chicken chop and its fillet of fish.

The foods were delicious. My mee goreng mamak got pieces of chickens, sawi. If I eat at Mamak restaurant they just provides you plain noodle for your mee goreng mamak.

The price is also reasonable.

deli kafe n bakery kota damansara mee hoon goreng

The Menu

Contact Number

You can order and pick up later as well:

Telephone: 03 6143 1053
WhatsApp: 011 1051 3056

Business Hours:

Monday to Friday: 8AM – 7PM (Last order 6:45PM)
Saturday & Public Holiday: 8AM – 6PM (Last order 5:45PM)
Sunday: 8AM – 2PM (Last order 1:45PM)

Location

Deli Kafe & Bakery Map Location

Uncle Bob Fried Chicken Food Truck Bukit Jelutong Shah Alam Selangor

I like to eat Uncle Bob Fried Chicken. Fortunately there is one Uncle Bob food truck at Bukit Jelutong, Shah Alam.

You can order via WhatsApp and then just pay and pick up your fried chicken without needs to wait.

Contact number:

Mirul: 012 343 4023

Location

It is located parking space near MyDin Bukit Jelutong.

Latitude & Longitude: 3.1153793251132913, 101.52619814419876
Google Map – Uncle Bob Bukit Jelutong

Housing Loan Amortization Analysis

Based on the loan amortization for below housing loan.

Loan amount: RM100,000
Loan tenure: 30 years
Loan interest rate: 4.5%

I found out that:

First 10 years – we pay 50% of total interest
Second 10 years – we pay 36% of total interest
Third 10 years – we pay 14% of total interest

OR in other words

First 10 years – we only pay principal of RM19,991 or 20% of RM100k
Second 10 years – we only pay principal of RM31,200 or 31% of RM100k
Third 10 years – we only pay principal of 48,890 or 49% of RM100k.

In short, we make the bank rich first then only then we pay our debt.

	Beginning Balance	Interest	Principal	Ending Balance
1	$100,000.00	$3,967.95	$1,761.09	$98,238.96
2	$98,238.96	$3,896.19	$1,832.85	$96,406.18
3	$96,406.18	$3,821.53	$1,907.51	$94,498.73
4	$94,498.73	$3,743.82	$1,985.22	$92,513.56
5	$92,513.56	$3,662.94	$2,066.10	$90,447.51
6	$90,447.51	$3,578.77	$2,150.27	$88,297.29
7	$88,297.29	$3,491.15	$2,237.89	$86,059.47
8	$86,059.47	$3,399.97	$2,329.07	$83,730.48
9	$83,730.48	$3,305.09	$2,423.95	$81,306.59
10	$81,306.59	$3,206.35	$2,522.69	$78,783.96
11	$78,783.96	$3,103.56	$2,625.48	$76,158.55
12	$76,158.55	$2,996.62	$2,732.42	$73,426.17
13	$73,426.17	$2,885.29	$2,843.75	$70,582.48
14	$70,582.48	$2,769.43	$2,959.61	$67,622.93
15	$67,622.93	$2,648.85	$3,080.19	$64,542.80
16	$64,542.80	$2,523.36	$3,205.68	$61,337.18
17	$61,337.18	$2,392.76	$3,336.28	$58,000.96
18	$58,000.96	$2,256.84	$3,472.20	$54,528.82
19	$54,528.82	$2,115.38	$3,613.66	$50,915.22
20	$50,915.22	$1,968.16	$3,760.88	$47,154.39
21	$47,154.39	$1,814.93	$3,914.11	$43,240.34
22	$43,240.34	$1,655.46	$4,073.58	$39,166.83
23	$39,166.83	$1,489.52	$4,239.52	$34,927.36
24	$34,927.36	$1,316.79	$4,412.25	$30,515.16
25	$30,515.16	$1,137.01	$4,592.03	$25,923.21
26	$25,923.21	$949.95	$4,779.09	$21,144.17
27	$21,144.17	$755.23	$4,973.81	$16,170.42
28	$16,170.42	$552.61	$5,176.43	$10,994.04
29	$10,994.04	$341.70	$5,387.34	$5,606.76
30	$5,606.76	$122.23	$5,606.81	$0.00

Irfan Chicken Rice – Nasi Ayam Hainan – Plaza Jelutong Bukit Jelutong

Irfan Chicken Rice – nasi ayam hainan yang terletak di gerai Plaza Jelutong, Bukit Jelutong.

Harga berpatutan di mana satu nasi ayam berharga RM7.
Dari segi rasa nasi ayam ini saya bagi 3.5/5 bintang.
Dari segi layanan memang agak lambat dan kurang mesra.

Selain nasi ayam, gerai ini ada juga jual kuih-muih dan nasi lemak.

irfan chicken rice plaza jelutong bukit jelutong

No telefon: 017 2844 936

Lokasi Irfan Chicken Rice

hCaptcha Demo using PHP

hCaptcha is alternative to popular Google reCaptcha. It is used to avoid any form from being spammed by bots.

Why I use hCaptcha?

According to hCaptcha website owner can earn income by using their captcha technology. For the moment, I haven’t earned anything yet from hCaptcha.

Demo hCaptcha Using PHP

Demo hCaptcha

For this demo, you just submit the form by clicking “Submit form”. If you do the the hCaptcha correctly you will get hCaptcha success if not hCaptcha fail.

How to Use hCaptcha Using PHP?

There are 3 Important steps:

Add the hCaptcha widget to your webpage
Verify the user response on server side
Check the hCaptcha is ticked or no

Add the hCaptcha widget to your webpage

Add the script at HTML head

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

1	<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

Add the hCaptcha widget to your form

<div class="h-captcha" data-sitekey="your_site_key"></div>

1	<div class="h-captcha" data-sitekey="your_site_key"></div>

Verify the user response on server side

According to hCaptcha documentation, to use POST method to query their endpoint.

    $hcaptcha = 'https://hcaptcha.com/siteverify';//hcaptcha endpoint to verify the hcaptcha

    $response = $_POST['h-captcha-response'];

    $curlSession = curl_init();
    curl_setopt($curlSession, CURLOPT_URL, $hcaptcha);
    curl_setopt($curlSession, CURLOPT_POST, 1);
    curl_setopt($curlSession, CURLOPT_POSTFIELDS, "response=".$response."&secret=YOUR_SECRET");
    curl_setopt($curlSession, CURLOPT_BINARYTRANSFER, true);
    curl_setopt($curlSession, CURLOPT_RETURNTRANSFER, true);


    $jsonData = json_decode(curl_exec($curlSession));

    curl_close($curlSession);

$hcaptcha = 'https://hcaptcha.com/siteverify';//hcaptcha endpoint to verify the hcaptcha

$response = $_POST['h-captcha-response'];

$curlSession = curl_init();

curl_setopt($curlSession, CURLOPT_URL, $hcaptcha);

curl_setopt($curlSession, CURLOPT_POST, 1);

curl_setopt($curlSession, CURLOPT_POSTFIELDS, "response=".$response."&secret=YOUR_SECRET");

curl_setopt($curlSession, CURLOPT_BINARYTRANSFER, true);

curl_setopt($curlSession, CURLOPT_RETURNTRANSFER, true);

$jsonData = json_decode(curl_exec($curlSession));

curl_close($curlSession);

Example of Success Response

If you print_r($json_data) will get the response below:

success e.g stdClass Object ( [success] =&gt; 1 [challenge_ts] =&gt; 2022-08-06T11:38:30.000000Z [hostname] =&gt; awesomegrasp.com )

1	success e.g stdClass Object ( [success] => 1 [challenge_ts] => 2022-08-06T11:38:30.000000Z [hostname] => awesomegrasp.com )

You can do your programming logic based on the success status.

Check the hCaptcha is ticked or no

There 2 methods to do this

Check the post value of ‘h-captcha-response’
Use data-callback

Method #1: Check the post value of ‘h-captcha-response’

The problem with the form as it is, if a user doesn’t do the hCaptcha test, the user still can submit the form. So we need to add javascript checking on the client side to check whether the user has done the captcha test or no.

If you have done the captcha test, hCaptcha will send a string of response in the $_POST[‘h-captcha-response’]. If not this string will be empty.

jQuery('#submit').click(function(e){
    var hcaptchaVal = jQuery('[name=h-captcha-response]').val();
    if(hcaptchaVal == ""){
        e.preventDefault(); //avoid the form from being submitted
        alert("Please complete the captcha test!");
    }
});

jQuery('#submit').click(function(e){

var hcaptchaVal = jQuery('[name=h-captcha-response]').val();

if(hcaptchaVal == ""){

e.preventDefault(); //avoid the form from being submitted

alert("Please complete the captcha test!");

}

});

The Full Code for Method #1

<?php
if(isset($_POST)):
    $hcaptcha = 'https://hcaptcha.com/siteverify';//hcaptcha endpoint to verify the hcaptcha

    $response = $_POST['h-captcha-response'];

    $curlSession = curl_init();
    curl_setopt($curlSession, CURLOPT_URL, $hcaptcha);
    curl_setopt($curlSession, CURLOPT_POST, 1);
    curl_setopt($curlSession, CURLOPT_POSTFIELDS, "response=".$response."&secret=YOUR_SECRET");
    curl_setopt($curlSession, CURLOPT_BINARYTRANSFER, true);
    curl_setopt($curlSession, CURLOPT_RETURNTRANSFER, true);

    //* success e.g stdClass Object ( [success] => 1 [challenge_ts] => 2022-08-06T11:38:30.000000Z [hostname] => pengantin.com.my )
    //* fail e.g stdClass Object ( [success] => [error-codes] => Array ( [0] => missing-input-secret [1] => invalid-input-response ) )
    $jsonData = json_decode(curl_exec($curlSession));

    curl_close($curlSession);

endif;

?>
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<title>hCaptcha Demo with PHP</title>
</head>

<body>
<h1>hCaptcha Demo with PHP</h1>

<?php 

  if(isset($_POST) && sizeof($_POST) > 0):
        if($jsonData->success == 1):
    ?>
<div class="alert alert-success" role="alert">
  hCaptcha Success!
</div>
<?php else: ?>
<div class="alert alert-danger" role="alert">
  hCaptcha Fail!
</div>
<?php endif; ?>
<?php endif;?>
<form action="https://www.awesomegrasp.com/wp-content/demo/hcaptcha/" method="post">
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-12">
<div class="h-captcha" data-sitekey="YOUR_KEY"></div>
</div>

<div class="col-12">
    <button class="btn btn-primary" type="submit" id="submit">Submit form</button>
  </div>
</form>

<script>
jQuery('#submit').click(function(e){
    var hcaptchaVal = jQuery('[name=h-captcha-response]').val();
    if(hcaptchaVal == ""){
        e.preventDefault(); //avoid the form from being submitted
        alert("Please complete the captcha test!");
    }
});
</script>
</body>
</html>

<?php

if(isset($_POST)):

$hcaptcha = 'https://hcaptcha.com/siteverify';//hcaptcha endpoint to verify the hcaptcha

$response = $_POST['h-captcha-response'];

$curlSession = curl_init();

curl_setopt($curlSession, CURLOPT_URL, $hcaptcha);

curl_setopt($curlSession, CURLOPT_POST, 1);

curl_setopt($curlSession, CURLOPT_POSTFIELDS, "response=".$response."&secret=YOUR_SECRET");

curl_setopt($curlSession, CURLOPT_BINARYTRANSFER, true);

curl_setopt($curlSession, CURLOPT_RETURNTRANSFER, true);

//* success e.g stdClass Object ( [success] => 1 [challenge_ts] => 2022-08-06T11:38:30.000000Z [hostname] => pengantin.com.my )

//* fail e.g stdClass Object ( [success] => [error-codes] => Array ( [0] => missing-input-secret [1] => invalid-input-response ) )

$jsonData = json_decode(curl_exec($curlSession));

curl_close($curlSession);

endif;

<!doctype html>

<head>

<title>hCaptcha Demo with PHP</title>

</head>

<body>

<h1>hCaptcha Demo with PHP</h1>

<?php

if(isset($_POST) && sizeof($_POST) > 0):

if($jsonData->success == 1):

hCaptcha Success!

</div>

<?php else: ?>

hCaptcha Fail!

</div>

<?php endif; ?>

<?php endif;?>

<label for="exampleFormControlInput1" class="form-label">Email address</label>

</div>

<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>

</div>

</div>

<button class="btn btn-primary" type="submit" id="submit">Submit form</button>

</div>

</form>

jQuery('#submit').click(function(e){

var hcaptchaVal = jQuery('[name=h-captcha-response]').val();

if(hcaptchaVal == ""){

e.preventDefault(); //avoid the form from being submitted

alert("Please complete the captcha test!");

}

});

</script>

</body>

</html>

Method #2 – Use data-callback

Demo #2 Use Data Callback

hCaptcha has a call back option for when the checkbox is checked.

  <div class="h-captcha" data-callback="recaptchaCallback" data-sitekey="YOUR_KEY"></div>

1	<div class="h-captcha" data-callback="recaptchaCallback" data-sitekey="YOUR_KEY"></div>

Disable the submit button

<button class="btn btn-primary" type="submit" id="submit" disabled>Submit form</button>

1	<button class="btn btn-primary" type="submit" id="submit" disabled>Submit form</button>

Then create a callback function:

function recaptchaCallback() {
    jQuery('#submit').removeAttr('disabled');
};

function recaptchaCallback() {

jQuery('#submit').removeAttr('disabled');

};

The Full Code for Method #2

<?php
if(isset($_POST)):
    $hcaptcha = 'https://hcaptcha.com/siteverify';//hcaptcha endpoint to verify the hcaptcha

    $response = $_POST['h-captcha-response'];

    $curlSession = curl_init();
    curl_setopt($curlSession, CURLOPT_URL, $hcaptcha);
    curl_setopt($curlSession, CURLOPT_POST, 1);
    curl_setopt($curlSession, CURLOPT_POSTFIELDS, "response=".$response."&secret=0x0927A785e4acAcc8aE08b67ee1496B1FB238f4a9");
    curl_setopt($curlSession, CURLOPT_BINARYTRANSFER, true);
    curl_setopt($curlSession, CURLOPT_RETURNTRANSFER, true);

    //* success e.g stdClass Object ( [success] => 1 [challenge_ts] => 2022-08-06T11:38:30.000000Z [hostname] => pengantin.com.my )
    //* fail e.g stdClass Object ( [success] => [error-codes] => Array ( [0] => missing-input-secret [1] => invalid-input-response ) )
    $jsonData = json_decode(curl_exec($curlSession));

    curl_close($curlSession);

endif;

?>
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<title>hCaptcha Demo with PHP</title>
</head>

<body>
<h1>hCaptcha Demo with PHP</h1>

<?php 

  if(isset($_POST) && sizeof($_POST) > 0):
        if($jsonData->success == 1):
    ?>
<div class="alert alert-success" role="alert">
  hCaptcha Success!
</div>
<?php else: ?>
<div class="alert alert-danger" role="alert">
  hCaptcha Fail!
</div>
<?php endif; ?>
<?php endif;?>
<form action="https://www.awesomegrasp.com/wp-content/demo/hcaptcha/index2.php" method="post">
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-12">
<div class="h-captcha" data-callback="recaptchaCallback" data-sitekey="785cebcf-8402-408b-93b7-ca9a0b295b6b"></div>
</div>

<div class="col-12">
    <button class="btn btn-primary" type="submit" id="submit" disabled>Submit form</button>
  </div>
</form>

<script>
function recaptchaCallback() {
    jQuery('#submit').removeAttr('disabled');
};
</script>
</body>
</html>

<?php

if(isset($_POST)):

$hcaptcha = 'https://hcaptcha.com/siteverify';//hcaptcha endpoint to verify the hcaptcha

$response = $_POST['h-captcha-response'];

$curlSession = curl_init();

curl_setopt($curlSession, CURLOPT_URL, $hcaptcha);

curl_setopt($curlSession, CURLOPT_POST, 1);

curl_setopt($curlSession, CURLOPT_POSTFIELDS, "response=".$response."&secret=0x0927A785e4acAcc8aE08b67ee1496B1FB238f4a9");

curl_setopt($curlSession, CURLOPT_BINARYTRANSFER, true);

curl_setopt($curlSession, CURLOPT_RETURNTRANSFER, true);

//* success e.g stdClass Object ( [success] => 1 [challenge_ts] => 2022-08-06T11:38:30.000000Z [hostname] => pengantin.com.my )

//* fail e.g stdClass Object ( [success] => [error-codes] => Array ( [0] => missing-input-secret [1] => invalid-input-response ) )

$jsonData = json_decode(curl_exec($curlSession));

curl_close($curlSession);

endif;

<!doctype html>

<head>

<title>hCaptcha Demo with PHP</title>

</head>

<body>

<h1>hCaptcha Demo with PHP</h1>

<?php

if(isset($_POST) && sizeof($_POST) > 0):

if($jsonData->success == 1):

hCaptcha Success!

</div>

<?php else: ?>

hCaptcha Fail!

</div>

<?php endif; ?>

<?php endif;?>

<label for="exampleFormControlInput1" class="form-label">Email address</label>

</div>

<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>

</div>

</div>

<button class="btn btn-primary" type="submit" id="submit" disabled>Submit form</button>

</div>

</form>

function recaptchaCallback() {

jQuery('#submit').removeAttr('disabled');

};

</script>

</body>

</html>

Boostrap 5 Validation Not Working

My Boostrap 5 Validation is not working. Even though I did what is said in the Boostrap 5 validation documentation.

Bootstrap 5 Validation Demo

Actually you need to include the javascript code below the form.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> 
</head>
<body>
  

<main role="main">
    <div class="container mt-5 py-5 rounded bg-light">
        <form class="needs-validation" novalidate>
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group mb-3">
                        <span class="input-group-text title" for="validationDefault01">Product #</span>
                        <input type="text" class="form-control" id="inputNum" required>
                        <div class="invalid-feedback">Please enter a product number</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="input-group mb-3">
                        <span class="input-group-text title" for="inputName">Product name</span>
                        <input type="text" class="form-control" id="inputName" required>
                        <div class="invalid-feedback">Please enter a product name</div>
                    </div>
                </div>
            </div>
            <div class="btn-group float-end" role="group">
                <button id="myButton" type="submit" class="btn btn-sm btn-outline-secondary">Submit</button>
            </div>
        </form>
    </div>
</main>

<!-- Validation script must be below the form -->
<script>

(function () {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
            }

            form.classList.add('was-validated')
        }, false)
        })
})()


</script>

</body>
</html>

<html>

<head>

</head>

<body>

<span class="input-group-text title" for="validationDefault01">Product #</span>

<div class="invalid-feedback">Please enter a product number</div>

</div>

<span class="input-group-text title" for="inputName">Product name</span>

<div class="invalid-feedback">Please enter a product name</div>

</div>

<button id="myButton" type="submit" class="btn btn-sm btn-outline-secondary">Submit</button>

</div>

</form>

</div>

</main>

(function () {

'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to

var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission

Array.prototype.slice.call(forms)

.forEach(function (form) {

form.addEventListener('submit', function (event) {

if (!form.checkValidity()) {

event.preventDefault()

event.stopPropagation()

}

form.classList.add('was-validated')

}, false)

})

})()

</script>

</body>

</html>