Programming - My Awesome Moments

How To Install PHP MySQL & Apache on MacOS Ventura on MacBook Pro M1

In my previous post, I was unable to install PHP & MySQL. This time after 2 years, I tried again but still fail, so I decided to use XAMPP to install PHP & MySQL and Apache on MacOS Ventura and it works!

But I had to disable default installed apache2 and change MySQL default port at XAMPP before MySQL and Apache2 can run on XAMPP.

How To Install PHP, MySQL & Apache using XAMPP

1. Download and install XAMPP

Mount the xampp dmg and run it. If you face unknown publish then do Control + Click on the XAMPP installer then run it again.

2. Follow the step by step instruction in installing XAMPP

Just follow the instructions.

3. Run the servers

If you unable to run the MySQL & Apache web server than follow below solution.

xampp macos ventura - mysql and apache webserver unable to start — xampp macos ventura – mysql and apache webserver unable to start

If you can run MySQL change it default ports. I use 3316 instead of default 3306.

xampp macos ventura - change the default port to 3316 — xampp macos ventura – change the default port to 3316

I tried to stop mysql service but MacOS informed no MySQL service was running. Only by changing MySQL default port it works.

xampp macos ventura - mysql not running — xampp macos ventura – mysql not running

If you can’t run the apache2 server, stop default apache2 server by typing at the terminal.

sudo apachectl stop

1	sudo apachectl stop

Then run again Apache Web Server at XAMPP.

xamp macos ventura - apache webserver now running — xamp macos ventura – apache webserver now running

4. Test PHP & MySQL by accessing PhpMyAdmin

If you can access phpMyAdmin and create table or user from phpMyAdmin then your XAMPP installation works!

xampp macos ventura - access localhost and click phpmyadmin — xampp macos ventura – access localhost and click phpmyadmin

xamp macos ventura - successful installed php and mysql now can access phpmyadmin — xamp macos ventura – successful installed php and mysql now can access phpmyadmin

Ubuntu 22 Unable to Install Python3 pip3 due to dpkg: error processing archive

I tried to install pip3 on my Ubuntu version 22 but it produced error dpkg: error processing archive.

How To Solve dpkg : error processing when installing python3 pip3

1. Install python3 pip3 command

sudo apt install python3-pip

1	sudo apt install python3-pip

Error it produces of unmet dependencies

ubuntu 22 unmet dependencies when installing pip3

2. Command to fix the broken dependencies

sudo apt --fix-broken install

1	sudo apt --fix-broken install

Error of dpkg: error processing archive <filename>

ubuntu 22 error when try to solve unmet dependencies when install pip3

3. Force overwrite that caused the error processing

sudo dpkg -i --force-overwrite <filename>

1	sudo dpkg -i --force-overwrite <filename>

In my case its is my nodejs

sudo dpkg -i --force-overwrite /var/cache/apt/archives/nodejs_18.16.0-deb-1nodesource1_amd64.deb

1	sudo dpkg -i --force-overwrite /var/cache/apt/archives/nodejs_18.16.0-deb-1nodesource1_amd64.deb

The output after did the command

4. Install again the pip

sudo apt install python3-pip

1	sudo apt install python3-pip

Now it is successfully installed.

ubuntu 22 successfully installed pip3 after force dpkg part 1

ubuntu 22 successfully installed pip3 after force dpkg part 2

5. Get your pip3 version

pip3 --version

1	pip3 --version

How To Install Nodejs v18 on Ubuntu 22

I installed Ubuntu 22 on my new PC. When I installed nodejs, the default version installed was v12. So I want to upgrade it to version 18.

I tried few methods but only using nvm it was successful.

Different Methods To Install NodeJS on Ubuntu 22

Installing Nodejs with APT from default repositories- fail
Installing Nodejs with APT using a NodeSource PPA – fail
Installing Nodejs using Node Version Manager – success

Refer this tutorial from DigitalOcean

My Steps Installing Nodejs using Node Version Manager (nvm)

1) Firstly list the node version you want to install

nvm ls-remote

1	nvm ls-remote

ubuntu 22 - choose node version — ubuntu 22 – choose node version

2) Secondly, choose the version you want to install. I chose LTS v18 @ lts/hydrogen

nvm install lts/hydrogen

1	nvm install lts/hydrogen

ubuntu 22 - install node v 18 — ubuntu 22 – install node v 18

3) Check if you have installed the right version.

node -v

node -v

If You Got Checksum Error

At first, I had the checksum error, when I checked on the internet it was due to curl installed using SNAP (which I did). I have to re-install my curl using APT and remove the snap path from the path environment.

Curl still point to snap/bin.

curl

curl

echo $PATH

1	echo $PATH

ubuntu 22 - installing node problem due to curl installed by snap — ubuntu 22 – installing node problem due to curl installed by snap

Remove the snap/bin from the environment. Edit it using nano

sudo nano /etc/environment

1	sudo nano /etc/environment

ubuntu 22 - edit the path at environment — ubuntu 22 – edit the path at environment

Ubuntu 22.04 Apache – 403 Forbidden You don’t have permission to access this resource

I tried to access my internal website using http://localhost but I got error of:

403 Forbidden You don't have permission to access this resource

1	403 Forbidden You don't have permission to access this resource

I am able to access the website via 127.0.0.1

I have checked my files access and all is good.

Solution

ubuntu 22 apache2 localhost able to access now

1. Edit your default.conf add localhost as ServerAlias (sudo nano /etc/apache2/sites-enabled/default.conf)

<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port t>
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        #ServerName www.example.com

        ServerAdmin webmaster@localhost
        DocumentRoot /home/wanrazali/data/www       
        ServerAlias localhost
        ServerAlias 127.0.0.1

#rest of your configs

# The ServerName directive sets the request scheme, hostname and port t>

# the server uses to identify itself. This is used when creating

# redirection URLs. In the context of virtual hosts, the ServerName

# specifies what hostname must appear in the request's Host: header to

# match this virtual host. For the default virtual host (this file) this

# value is not decisive as it is used as a last resort host regardless.

# However, you must set it for any further virtual host explicitly.

#ServerName www.example.com

ServerAdmin webmaster@localhost

DocumentRoot /home/wanrazali/data/www

ServerAlias localhost

ServerAlias 127.0.0.1

#rest of your configs

2. Edit your hosts as below (sudo nano /etc/hosts/)

127.0.0.1       localhost


# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

127.0.0.1 localhost

# The following lines are desirable for IPv6 capable hosts

::1 ip6-localhost ip6-loopback

fe00::0 ip6-localnet

ff00::0 ip6-mcastprefix

ff02::1 ip6-allnodes

ff02::2 ip6-allrouters

3. Restart Your Apache2 server

sudo service apache2 stop
sudo service apache2 start

1 2	sudo service apache2 stop sudo service apache2 start

MySQL Upload / Import Database via Command Line using Ubuntu 22

I imported / uploaded SQL database with file size of 210MB and 347MB via Ubuntu v22 terminal command line.

My MySQL version is: 8.0.32

The Command Line

sudo mysql databasename < file.sql

1	sudo mysql databasename < file.sql

How Long it took to Import The Data?

Below is the time it took to upload the data.

210MB: 20s
347MB: 1m30s

Nodejs Regex Concatenate String

I want to concatenate two strings to make a regular expression so I can have different prefix but same pattern at the back of the string.

If notice, must use double back slashes if the regular expression uses back slash. Example instead of \d must use \\d.

Code

const prefix: string = '604';
const pattern: string = ' - \\d{3} \\d{4}';

const regexStr = prefix + pattern;
console.log('regex string: ', regexStr);

const text = 'Telephone: 604 - 123 4567';


const regex = new RegExp(regexStr, 'gi');
console.log('output: ', regex.exec(text));

const prefix: string = '604';

const pattern: string = ' - \\d{3} \\d{4}';

const regexStr = prefix + pattern;

console.log('regex string: ', regexStr);

const text = 'Telephone: 604 - 123 4567';

const regex = new RegExp(regexStr, 'gi');

console.log('output: ', regex.exec(text));

Output

Demo

You can test the Regex Concatenate Strings here.

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>

CSS Text Align Center Horizontally with Top Margin

I want to center the text horizontally with top margin I tried few options example text-align: center; but it doesn’t work.

So below is the solution:

The CSS to Align Center the Text

<style>
.align-center-with-top-margin{
/*u can change the top margin*/
top: 18%; 

/* to make text align center */
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: 100%;
}
</style>

<style>

.align-center-with-top-margin{

/*u can change the top margin*/

top: 18%;

/* to make text align center */

left: 50%;

transform: translate(-50%, -50%);

margin: 0;

width: 100%;

}

</style>

The HTML Code

<div class="align-center-with-top-margin">
      Undangan  
</div>

Undangan

</div>

The Output of Text Align Center with Top Margin

css text align center horizontally with top margin - 8 characters — css text align center horizontally with top margin – 8 characters

css text align center horizontally with top margin - 14 characters — css text align center horizontally with top margin – 14 characters

css text align center horizontally with top margin - 15 characters — css text align center horizontally with top margin – 15 characters

WordPress How To Switch Theme Dynamically by URL

I want to switch my WordPress theme dynamically where if my visitor visits a specific URL they will see different theme while my main theme is still the same for other URLs.

All Other Pages will Show Main Theme Like Below

wordpress switch theme dynamically - original theme — wordpress switch theme dynamically – original theme

Only for Page wordpress-how-to-switch-theme-dynamically-by-url/ will show below Theme

wordpress switch theme dynamically - different theme based on url — wordpress switch theme dynamically – different theme based on url

WordPress Hook to Change the Theme

You can do it by using pre_option_{$option} hook. In this case:

pre_option_stylesheet
pre_option_template

1 2	pre_option_stylesheet pre_option_template

This hook will filter the value of an existing option before it is retrieved.

You can refer the pre_option hook here.

The Code to Change WordPress Theme Dynamically

add_filter( 'pre_option_stylesheet', 'hdf_change_theme_stylesheet' );
add_filter( 'pre_option_template', 'hdf_change_theme_template' );

function hdf_change_theme_stylesheet(){

    $current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 
    //you can change the condition based on your needs either by full URL by parameters and so on.
    //you can also retrieve the URL theme correspondant from database.
    if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):
        return 'twentytwenty';
    else:
	    return "twentysixteen";
    endif;
}

function hdf_change_theme_template(){
    $current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 

    if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):
        return 'twentytwenty';

    else:
	    return "twentysixteen";
    endif;
}

add_filter( 'pre_option_stylesheet', 'hdf_change_theme_stylesheet' );

add_filter( 'pre_option_template', 'hdf_change_theme_template' );

function hdf_change_theme_stylesheet(){

$current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

//you can change the condition based on your needs either by full URL by parameters and so on.

//you can also retrieve the URL theme correspondant from database.

if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):

return 'twentytwenty';

else:

return "twentysixteen";

endif;

}

function hdf_change_theme_template(){

$current_url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

if($current_url == 'https://www.awesomegrasp.com/wordpress-how-to-switch-theme-dynamically-by-url/'):

return 'twentytwenty';

else:

return "twentysixteen";

endif;

}

Don’t Put The Code at Your Theme files

It doesn’t work if you put the code at functions.php or in any files under your theme folder.

You must put at a plugin.

Side Effect by Switching WordPress Theme Dynamically

By switching the theme dynamically, I noticed that:-

The my top main menu doesn’t appear. I don’t how to solve this yet.
Google AdSense also seems not loaded

wordpress switch theme dynamically – top menu not appear