MySQL & PHP References: November 2020

Thursday, November 26, 2020

FETCH an IMAGE with ASYNC and AWAIT in Javascript

I want to fetch an IMAGE from the application and display. Here is a simple code

  <img src="" id="rainbow" width="480" />
  
  <script>
  	console.log('about to fetch an image');
    
    catchRainbow()
      .then(response => {
    		console.log('DONE!!! iMAGE IS RENDERED ON THE PAGE');	
      })
      .catch(error =>{
    	console.log('error while fetching an error');
       console.error(error);
    });
    
    // here goes  catchRainbow() function with async and await
    
    async function catchRainbow(){
    	const response = await fetch('rainbow.jpg');
      const img123 = await response.blob(); // image datatype is BLOB
      document.getElementById('rainbow').src = URL.createObjectURL(img123);
    
    }
  </script>

Courtesy --- Full Youtube Video

More Excercises to play with TEXT & DATA are here

Friday, November 20, 2020

Bootstrap 4 login in form center of the screen

CONTAINER -- class="container-fluid h-100"
ROW --- class="row justify-content-center align-items-center h-100"
COL --- class="col col-sm-6 col-md-6 col-lg-4 col-xl-3"

<div class="container-fluid h-100">
    <div class="row justify-content-center align-items-center h-100">
        <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <form action="">
                <div class="form-group">
                    <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Password" type="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-info btn-lg btn-block">Sign In</button>
                </div>
            </form>
        </div>
    </div>
</div>

Wednesday, November 18, 2020

Google Places Autocomplete 2-line styling CSS [SOLVED]

For almost a decade Google Places Autocomplete formatting has been a thorn in the bottom of every developer, so is mine. Here is how I solved it

formatting Google Map Places Autocomplete in two lines bcoz the entire address is not visible properly to elderly people and visually impaired. Here is the best practice

On pac-item-query &&& pac-item apply css DISPLAY:BLOCK and FONT-SIZE:20PX

 .pac-item {
	font-size: 18px; /* resize */
	color: red; font-weight: bold; /* font attribute */
	font-family: Arial, Helvetica, sans-serif;
	display:block; /* display address in 2-LINE */
}

.pac-item-query {  
font-size: 18px; /* resize */
	color: #000; font-weight: bold; /* font attribute */
	font-family: Arial, Helvetica, sans-serif;
	display:block; /* display address in 2-LINE */

}
.pac-icon, .pac-icon-marker { display: none; }

Tuesday, November 17, 2020

How to prevent mobile keyboard from rising footer over the Input / Content [solved]

Very simple keep POSITION: RELATIVE

footer { 
     padding: 20px; 
     text-align: center; 
     left: 0; 
     bottom: 0; 
     position: relative; 
     width: 100%; 
  }

Sunday, November 15, 2020

This project uses AndroidX dependencies, but the 'android.useAndroidX' property is not enabled CORDOVA [SOLVED]

If you are getting these kind of errors like

Task :app:mergeDebugResources FAILED
What went wrong: Execution failed for task ':app:mergeDebugResources'.

This project uses AndroidX dependencies, but the 'android.useAndroidX' property is not enabled.
Set this property to true in the gradle.properties file and retry.
The following AndroidX dependencies are detected:

Try this

Update to cordova-android@9 which implicitly supports AndroidX:

cordova platform rm android && cordova platform add android@8

Add cordova-plugin-androidx to your Cordova project, which persistently sets the native AndroidX flags for cordova-android@8:

cordova plugin add cordova-plugin-androidx

cordova plugin add cordova-plugin-androidx-adapter

Task :app:processDebugGoogleServices FAILED [SOLVED]

REMOVE LINE form platforms/android/app/build.gradle --- apply plugin: 'com.google.gms.google-services'

Phone Number with Country Flag masking using GeoLocation or IP Address

Phone Number with Country Flag and Input Masking will help you to create better UX for Mobile based webpage


   <!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/examples/css/prism.css">
    <link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/build/css/intlTelInput.css?1603274336113">
    <link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/build/css/demo.css?1603274336113">
</head>
<body>

   <h2>Result</h2>
    <div id="result">
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="phone" type="tel">

    </div>
  
  <script src="https://intl-tel-input.com/node_modules/intl-tel-input/examples/js/prism.js"></script>
    <script src="https://intl-tel-input.com/node_modules/intl-tel-input/build/js/intlTelInput.js?1603274336113"></script>
    <script src="https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/js/defaultCountryIp.js?1603274336113"></script>
</body>
</html>

Saturday, November 7, 2020

Extract Scrape all EMail Address from a url using PHP

This is a simple PHP script will help you to scrape all email address on any given URL


if(isset($_POST["xsubmit"])){
	$url= $_POST["xurl"];
	$text=file_get_contents($url);
	$res = preg_match_all("/[a-z0-9]+[_a-z0-9.-]*[a-z0-9]+@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})/i",	$text, $matches);
	if ($res) {
		foreach(array_unique($matches[0]) as $email) {
			echo $email . "<br />";
		}
	} else {
		echo "No emails found.";
	}
}

<style type="text/css">
	#xurl { padding: 5px; width: 400px; margin-bottom: 12px; }
	#xsubmit { padding:8px 30px; }
	form { padding: 50px; }
</style>

<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
	<label>Paste your URL</label><br>
	<input type="text" name="xurl" id="xurl" required="required"><br>
	<input type="submit" name="xsubmit" value="  Fetch Email IDs ">
</form>

MySQL & PHP References

Search This Blog