abc

Share This blog with your friends, so that we can improve more & more . our aim is to easy & simple way of learning.

12/23/2020

What is SEO & how to get good rank in SEO


SEO means search engine optimization, which makes website to search in search engine line google, yahoo, bing


Main Point noted that while making blog or website for SEO

1) add meta tag - in head tad add keyword, description(limit 150 character ), robot, rating, google-site-verification, view-port, author, distribution.

2) go through google analytics- login with google account and check site analytics , how is working.

3) crawling & indexing 

4) do not redirect to wrong page that different from search engine ranked

abc.com is proper in search engine but after click it go somewhere different location xyz.com 

5) filename use hypen(-) not underscore(_) --- eg: how-to-make-dish.html

6) file size less than 101k - image should less than 10k

7) do not use frame - frame are slows ranking

8) anchor tag always use title attribute, put alt attribute for img tag

9) Always include: robots.txt, sitemap.xml, and urllist.txt.

robots.txt - 

User-agent: *

Disallow:

sitemap: sitemap link

sitemap.xml create from any online tool which contain all pages link in xml format

urllist also contain all links

10) ensure heading tag added, files are minify, loading time 2-3 second, good social media views.

11) check all html entity works well for example - & use as & also checks bugs and error.

12) ensure with good DA and PA 

da , pa are backlinks added in website to easy navigation within para reading or in comment section.

DA - domain authority 

PA - page authority


please comment if any.


12/16/2020

How to add captcha - to verify user (image or text capatcha) using html, php, javascript

 step 1) go to google recaptcha website create key from here , which is require for third & fourth step.


step 2)add script between head tag- <script src="https://www.google.com/recaptcha/api.js"></script>


step 3)<div class="g-recaptcha brochure__form__captcha" data-sitekey="YOUR SITE KEY"></div>


step 4) just use below php code.

 <?php

function reCaptcha($recaptcha){

  $secret = "YOUR SECRET KEY";

  $ip = $_SERVER['REMOTE_ADDR'];


  $postvars = array("secret"=>$secret, "response"=>$recaptcha, "remoteip"=>$ip);

  $url = "https://www.google.com/recaptcha/api/siteverify";

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_URL, $url);

  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  curl_setopt($ch, CURLOPT_TIMEOUT, 10);

  curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);

  $data = curl_exec($ch);

  curl_close($ch);


  return json_decode($data, true);

}


$recaptcha = $_POST['g-recaptcha-response'];

$res = reCaptcha($recaptcha);

if($res['success']){

   // go to page

}



 ?>

 

step 5) test it.

Technology Question and answer

 1) Font style tabs in HTML are also known as

- navigation Or menu or scrollspy.


2) Syntax of writing a different font style in HTML

font: normal 12px aerial;

font-family : aerial, sans serif;

font-size: 15px;



get font family from google font https://fonts.google.com/


apply above style for body tag to whole page affect.


3) Which HTML tag is used to give strikethrough effect to text?

for html 4 use <strike>


for html 5 use below example <del> tag 


<!DOCTYPE html>

<html>

<body>


<h1>The del element</h1>


<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>


</body>

</html>



4) What is best site to get HTML templates?

template means design which are ready to use.


themeforest, templatemonster, colorlib


should check whether is responsive or not, it is good thing for SEO


5) How to send email of HTML output?

use PHP mail function

mail($from, $to, $sub, $message);


6) Explain the various attributes necessary to insert drop down list in a HTML page

already post on this same blog 

https://learn-infyleaf.blogspot.com/2020/12/how-to-create-navigation-menu-using.html


7) How to add a app icon in my app with HTML?

visit link - 

https://learn-infyleaf.blogspot.com/2020/12/how-to-create-icons-like-social-media.html


8) How to apply HTML code on our blogs website?

go to theme option - customize - drop down - edit html , change and ensure click on update button


9) Write a HTML program to design a simple website using image and hyperlink

<body>

<img src="abc.jpg" onclick="location.href='mylocation.html'" />


OR 


<p><a href="mylocation.htm"><img src="abc.jpg" /></a></p>


</body>


10) Various design requirements in HTML and approaches to design Web pages

- editor like notepad++, dreamviewver, visual studio. all browser, laptop and mobile to test responsive and works all browser.


11) How to HTML page working on the browser in internal working both English and Hindi?


three method

1) use google translator , which translate original website to various language not only English or Hindi.

2) using site https://mothereff.in/html-entities add your Hindi content and use converted entities in html.

3) use web font like google font



12) The code for inserting an image in an HTML page is imagsrc alt The alt attribute .

<img src="abc.png" alt="sample image" />


13) I design one HTML page but my laptop don't support the center alignment ?


use align="center"

or add margin : 0px auto ;  - style center div position.


14) How to create quiz in HTML with timer?

- use javascript setinterval to start clock, and in clock function set -1 to reverse original time.

- add option using checkbox, link with mysql, just match correct value of checkbox to database value

- count correct answer & wrong answer in php loop & that's set quiz is ready.


15) Open source tools that can be used in project of computer science and engineering can be related to Web development

github have lot of tools or contact us we will to make project.


Is it possible to have two levels of subscript in HTML 5 document in the same line?

 It is possible just write subscript or superscript level means subscript within subscript.


<!DOCTYPE html>

<html>

<body>

<h1>The sub and sup elements</h1>

<p>This text contains <sub>subscript<sub>a</sub></sub> text.</p>

</body>

</html>


another example a<sub>b<sub>c</sub></sub> - useful to math calculation


(a2)2  suppose this is mathematics format - <div>(a<sup>2<sup>)<sup>2</sup></div>


The enhanced features of HTML5

 1) editing content using 'content editable' 

 <h2 contenteditable=true>You can edit me</h2>

 

2) figure and figure caption added in latest html5

<figure>

    <img src="http://static1.tothenew.com/blog/wp-content/uploads/2017/03/productimg.png">

    <figcaption>

    <p>Image of birds</p>

    </figcaption>

</figure>


3) verify textbox using pattern or regular expression

<input type="text"  name="rollno"  pattern="[0-9]{5}" >


4) SVG elements - create scalable vector graphics.


5) Webfont - font-family style available , lots of google are free to use, which makes more better look of website.


6) animation and transition effect -using CSS different animation can do , like flipping a book.


7) audio and video new tag introduce

<audio autoplay="autoplay" controls="controls">

    <source src="file.ogg" />

    <source src="file.mp3" /> 

    <a>Download this file.</a>

</audio>


8) localstorage can be done.

How to create payment billing system project in Javascript?

 Payment billing system maintain product bill & this can be handle using private link , link which is only share within office area or user of this system. 


Logic of system -

1) when open link there are at least two user one is admin and other is normal operator.

2) ask for login - after login success there will be two pages one for admin login and one for normal user login. system checks if correct password enter or not, if it's correct go to page dashboard.

3) dashboard have multiple functionality available like add, update, delete data, print data, create report, sorting, searching, checking.

4) if admin is login then there will be all access like register , block or allow user, update, delete & all. in case user login only option to add , check , print report & give bill customer


language required,

For frontend design - html , css, bootstrap

For backend Design - javascript, php ,mysql , sqlite


Note - ensure link NOT search for SEO, encrypt data, page load in 2-3 second.


Steps

i) Define and Plan

This step includes clarifying the purpose and end goals for the application. define the problem you want to solve with a web application and then gather relevant information about it.


ii) Design and build 

design frontend tool and build all functions. and check with first step if all design function added . if any point fail or pending note down for feature scope & add this for next version.


iii) testing

testing is phase of all functions and module works well, check bugs or error if any, remove unwanted code or anything. check keyboard interface , user- friendly , calculate time.


iv) host on real 

take hosting and add this billing system , as this is online solution, which works on all devices, not restrict for OS .


please comment for more detail about this project and web application.


12/15/2020

What is scrollspy , menu according to scroll.

In this shows moving scroll of page from sticky menu , with simple use of bootstrap. less code use, header is stick and navigation detect if user move scroll , easily current block div of which menu item.


Example

<html lang="en">

<head>

  <title>Bootstrap scroll detect and menu change </title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <style>

  body {

      position: relative; 

  }

  </style>

</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">


<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#Fruit">Fruit</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#Vegitable">Vegitable</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#Electronic">Electronic item</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

Section 4

</a>

<div class="dropdown-menu">

<a class="dropdown-item" href="#section41">laptop</a>

<a class="dropdown-item" href="#section42">cooling items</a>

</div>

</li>

</ul>

</nav>


<div id="Fruit" class="container-fluid bg-success" style="padding-top:70px; padding-bottom:70px">

  <h1>Fruit</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="Vegitable" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">

  <h1>Vegitable</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="Electronic" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">

  <h1>Electronic item</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="laptop" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">

  <h1>laptop</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="mobile" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">

  <h1>cooling items</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>


</body>

</html>


1) call bootstrap.min.js and css 

2) 'nav-item' & 'nav-item dropdown' using this class name add menubar

3) create div with same id as href link for menu item.


How to send attachment email using PHP

1) use basic mail function available in PHP 

2) get file type using application/octet-stream

3) form must  enctype="multipart/form-data"

4) sure to use MD5 encryption & chunk_split(base64_encode)

5) to upload file use move_uploaded_file



<?php

$from = $_REQUEST["from"];

$emaila = $_REQUEST["emaila"];

$filea = $_REQUEST["filea"];


if ($filea)

{

function mail_attachment ($from , $to, $subject, $message, $attachment)

{

$fileattachis = $attachment; // Path to the file

$fileattachis_type = "application/octet-stream"; // File Type 

$start = strrpos($attachment, '/') == -1 ? strrpos($attachment, '//') : strrpos($attachment, '/')+1;

$fileattachis_name = substr($attachment, $start, strlen($attachment));

$email_from = $from; //email from

$subject = "New Attachment Message";

$email_subject =  $subject;

$email_txt = $message;

$email_to = $to;

$headers = "From: ".$email_from;

$file = fopen($fileattachis,'rb'); 

$data = fread($file,filesize($fileattachis)); 

fclose($file); 

$msg_txt="\n\n You have recieved a new attachment email from $from";

$semi_rand = md5(time()); 

$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x"; 

$headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . "

boundary=\"{$mime_boundary}\"";

$email_txt .= $msg_txt;

$email_message .= "This is a multi-part message in MIME format.\n\n" . 

"--{$mime_boundary}\n" . "Content-Type:text/html; 

charset = \"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . 

$email_txt . "\n\n";

$data = chunk_split(base64_encode($data));

$email_message .= "--{$mime_boundary}\n" . "Content-Type: {$fileattachis_type};\n" .

" name = \"{$fileattachis_name}\"\n" . //"Content-Disposition: attachment;\n" . 

//" filename = \"{$fileattachis_name}\"\n" . "Content-Transfer-Encoding: 

base64\n\n" . $data . "\n\n" . "--{$mime_boundary}--\n";

$ok = mail($email_to, $email_subject, $email_message, $headers);

if($ok)

{

echo "File Sent Successfully.";

unlink($attachment); // delete a file after attachment sent.

}

else

{

die("Sorry email not sent. Please try again!");

}

}

move_uploaded_file($_FILES["filea"]["tmp_name"], 'temp/'.basename($_FILES['filea']['name']));


mail_attachment("$from", "youremailaddress@gmail.com", "subject", "message", ("temp/".$_FILES["filea"]["name"]));

}

?>


<html>

<head>


<script type = "text/javascript">

function checkfile() {

with(document.filepost) {

if(filea.value ! = "") {

document.getElementById('textis').innerText = "Attaching File ... Please Wait";

}

}

}

</script>


</head>

<body>


 

<form name= "filepost" method="post" action="file.php" enctype="multipart/form-data" id = "file">

<table width = "300" border = "0" cellspacing = "0" cellpadding = "0">

<tr valign = "bottom">

<td height = "20">Name:</td>

</tr>

<tr>

<td>

<input name = "from" type = "text" id = "from" size = "30">

</td>

</tr>

<tr valign = "bottom">

<td height = "20">Email Address:</td>

</tr>

<tr>

<td class = "frmtxt2">

<input name = "emaila" type = "text" id = "emaila" size = "30">

</td>

</tr>

<tr>

<td height = "20" valign = "bottom">Attachment:</td>

</tr>

<tr valign = "bottom">

<td valign = "bottom">

<input name = "filea" type = "file" id = "filea" size = "16">

</td>

</tr>

<tr>

<td height = "40" valign = "middle">

<input name = "Reset2" type = "reset" id = "Reset2" value = "Reset">

<input name = "Submit2" type = "submit" value = "Submit" onClick = "return checkfile()">

</td>

</tr>

</table>


</form>


<div id="textis"></div>


</body>

</html>


Encryption and Decryption in PHP

Encryption means convert to such form which is not easy to understand .

base64_encode which encrypt current string or data , also helpful to store secure data.

base64_decode which decrypt encrypted data. 


<?php


$var1 = 'test'; 


echo base64_encode($var1); 


//dGVzdA==


echo '<p>'.base64_decode('dGVzdA');

?>


md5 encryption - which cannot decode - one way encryption


<?php

$sampl = 'sample text here';


echo md5($sampl);


?>


What is and How to create PHP array

 array - store multiple value into single variable -

three types of array -  index, associative, Multidimensional array.


1) index array - store value into variable in curley and quoted form.


for example - 


$name = {'drip','pipe','sprinkler'};

echo $name[0] . '  '.$name[2];


2) Associative array - associate some value 


let us see example, 

$price = array("mobile"=>"8500","fan"=>"4500","light"=>"300"); 

echo $price['light'];


3) Multidimensional array - multiple checkup done


for example we have two for loop which check in $emp array and get respective value


echo $emp[0][0] ouput is 1,"sonoo",400000

<?php    

$emp = array  

  (  

  array(1,"sonu",4000),  

  array(2,"monu",5000),  

  array(3,"pinu",7000)  

  );  

  

for ($row = 0; $row < 3; $row++) {  

  for ($col = 0; $col < 3; $col++) {  

    echo $emp[$row][$col]."  ";  

  }  

  echo "<br/>";  

}  

?>   


Bootstrap Filter table - search into table

1)  Call bootstrap.min.js and CSS

2) make table & one input

3) jQuery keyup function which is useful when start typing it check in table, for each character check using keyup function.

4) filter function default in jQuery


<html lang="en">

<head>

  <title>Bootstrap filter table.</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container mt-3">

<input class="form-control" id="valuetosearch" type="text" placeholder="Search..">


<table class="table table-bordered">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody id="searchintotable">

<tr>

<td>kumar</td>

<td>sample</td>

<td>abc@example.com</td>

</tr>

<tr>

<td>check</td>

<td>hi</td>

<td>check@mail.com</td>

</tr>

<tr>

<td>learn</td>

<td>joy</td>

<td>lear@greatstuff.com</td>

</tr>

<tr>

<td>blog</td>

<td>where</td>

<td>blog@test.com</td>

</tr>

</tbody>

</table>

</div>


<script>

$(document).ready(function(){

  $("#valuetosearch").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#searchintotable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>


</body>

</html>

PHP Function call by value and call by reference

 <?php  

function increment($i)  

{  

    $i++;  

}  

$i = 10;  

increment($i);  

echo $i;  

?>


above function output is 10 



Call by Reference - 


<?php  

function adder(&$str2)  

{  

    $str2 .= 'Call By Reference';  

}  

$str = 'This is ';  

adder($str);  

echo $str;  

?>


above returns output is 'this is call by reference'

use & (ampersand) symbol with formal arguments. The & represents reference of the variable.


What is PHP PDO, how it's work

 PDO refers to PHP Data Object, which is a PHP extension that defines a quick access database. 

Each database driver can expose database-specific features as a regular extension function that implements the PDO interface.

pdo connect to various database like sqlite, mysql, oracle


example of connect to database using PDO


<?php  

    $dbHost="localhost";  

    $dbName="myDB";  

    $dbUser="root"; 

    $dbPassword=""; 

    try{  

        $dbConn= new PDO("mysql:host=$dbHost;dbname=$dbName",$dbUser,$dbPassword);  

        Echo "Successfully connected with myDB database";  

    } catch(Exception $e){  

    Echo "Connection failed" . $e->getMessage();  

    }  

?> 


//above code short as $dbconn = new PDO("localhost","root","","myDB"); no need first five lines.


PDO is good as compare to mysqli , because, it connect with any database, mysqli only connect phpmyadmin mysql.


this PDO  connection short and quick connect. 


** PLEASE LIKE - SHARE - COMMENT **

What are magic constant in PHP ?

 1) __LINE__ it returns current line number 


example

<?php

 echo 'current line'.__LINE__;

?> 


2) __FILE__ - get full path of current file 


example -  echo __FILE__ . "<br><br>";  


3) __DIR__  - get full directory path


    echo __DIR__ . "<br><br>";  

OR  

echo dirname(__FILE__) . "<br><br>";    


4) __FUNCTION__ - get function name where magic constant used.


<?php   

    echo "<h3>Example for __FUNCTION__</h3>";    

   

    function test(){    

         echo 'The function name is '. __FUNCTION__ . "<br><br>";   

    }    

    test();    

    

    echo  __FUNCTION__ . "<br><br>";  

?>  


5) __CLASS__ - get class name


below example output is 'base'

<?php   

    class base  

    {    

function test_first(){    

             echo __CLASS__;   

        }    

    }    

    class child extends base    

    {    

        public function __construct() {    

            ;    

        }    

    }    

    $t = new child;    

    $t->test_first();    

?>  


6) __TRAIT__  get trait name


for eg -

trait created_trait {    

        function jtp(){    

            echo __TRAIT__;  

        }    

    }   


7) __METHOD__ get method name



public function meth_fun(){    

            //print method::meth_fun    

                echo __METHOD__;   

        }    


8) __NAMESPACE__  current namespace


 class name {    

        public function __construct() {    

            echo 'This line will print on calling namespace.';     

        }     

    }    

    $class_name = __NAMESPACE__ . '\name';    

    $a = new class_name;   

9) ClassName::class  - full name of class


output of below example is Technical_Portal/javatpoint

namespace Technical_Portal;  

    echo "<h3>Example for CLASSNAME::CLASS </h3>";  

class javatpoint {    

}  

    echo javatpoint::class;

in short magic contstant in php returns the current elements like filename, filepath, classname, methodname, directory path.


12/14/2020

How to create JavaScript animation - moving image

 in this below example move image from original position to right.

we use setTimeout and clearTimeout to start and stop image animate.


html input button click method handle.


<script type = "text/javascript">

 

var getimage = null;

var animate ;

function init() {

   getimage = document.getElementById('myImage');

   getimage.style.position= 'relative'; 

   getimage.style.left = '0px'; 

}

function move() {

   getimage.style.left = parseInt(getimage.style.left) + 10 + 'px';

   animate = setTimeout(move,60);    // call move in 60msec

}

function stop() {

   clearTimeout(animate);

   getimage.style.left = '0px'; 

}

window.onload = init;

 

</script>

<div>

 <img id = "myImage" src = "hello.png" />

 <p>Click the buttons below to handle animation</p>

 <input type = "button" value = "Start" onclick = "move()" />

 <input type = "button" value = "Stop" onclick = "stop()" />

</div>      


please comment your query.

How to access camera in android WebView

 if you are making hybrid apps , which works on all os(android, ios, windows)


step -1) in HTML add capture attribute .

<input type="file" accept="image/*" capture="camera">


step -2) go to uses permissions in mainfest.xml in android project

add below line to set uses permission 

<uses-permissions android:name="android.permission.camera" />



step -3) ask user to accept permission

webview.getSettings().setJavaScriptEnabled(true);

webview.getSettings().setDomStorageEnabled(true);

webview.getSettings().setPluginState(WebSettings.PluginState.ON);


webview.setWebChromeClient(new WebChromeClient(){

         

        @Override

        public void onPermissionRequest(final PermissionRequest request) {

            L.d("onPermissionRequest");

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

                 request.grant(request.getResources());

            }

        }

    });


just use this three steps and remaining is same . 


this useful when upload product, setting profile picture, attaching document.


what is Node.js, how to Install and work.

 Node.js is an open source server environment and run JavaScript on the server.


1. install Node.js  - install from official site  https://nodejs.org.


2. how to create and run file


step 1) make file with extension .js

step 2) save the file to other drive

step 3) open node.js command prompt 

step 4) change directory in command eg: E: for e directory , D: for d directory

step 5) then subdirectory/folder = cd E:\nodejsfolder

step 6) type node filename.js


3. writing hello world using node.js


add below code to abc.js 


var http = require("http");

http.createServer(function (request, response) {

   response.writeHead(200, {'Content-Type': 'text/plain'});

   response.end('Hello World\n');

}).listen(8081);

console.log('Server running at http://127.0.0.1:8081/');


open node.js command prompt(not normal command prompt) and type node abc.js

command prompt shows message "Server running at http://127.0.0.1:8081/"

go to this server from browser and check link http://127.0.0.1:8081/ , you will see "hello world"


if you close command prompt , server also close. to continuous on server add 'forget' module


4. install require packages using command.

npm install name.

for example - npm install ws --> to add websocket




remember to run use 'node filename.js' from command


4. create server 

var http = require("http");

var server = http.createServer(function(){

   console.log("Hello");

});

server.listen(3000);


 now go to browser and open localhost:3000 & then check command prompt it show hello means server started.


please comment if any query.

How to create google chart

 google chart is in bar chat, line chart, circle(pie) chart like various view


helpful link is https://www.gstatic.com/charts/loader.js


simple steps,

1) first call https://www.gstatic.com/charts/loader.js

2) in chart load core chart package, there are various package available 

3) pass some data to data variable

4) called object google.visualization.PieChart and method 'draw'




<html lang="en-US">

<body>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<script>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);


function drawChart()

{

  var data = google.visualization.arrayToDataTable([

   ['Work', 10], ['Eat', 1], ['TV', 3], ['Gym', 1], ['Sleep', 9] ]);


  var options = {'title':'My Day is planned shown in chart', 'width':550, 'height':400};

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);

}

</script>


</body>

</html>


above google chart is lightweight, easy to load, works on all browser, devices, easy to understand by user and also showing chart indication.

How to create Overlay box or modal to complete page.

 <html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.overlay {

  display: none;

  position: fixed;

  z-index: 1;

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgb(0,0,0);

  background-color: rgba(0,0,0,0.4);

}

.overlay-content {

  background-color: #fefefe;

  margin: auto;

  padding: 20px;

  border: 1px solid #888;

  width: 80%;

}

.closebtn {

  color: #aaaaaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}


.closebtn:hover,

.closebtn:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}

</style>

</head>

<body>


<h2>overlay Example</h2>


<!-- Trigger/Open The overlay -->

<button id="myBtn" onclick="openoverlay()">Open overlay</button>


<!-- The overlay -->

<div id="myoverlay" class="overlay">


  <!-- overlay content -->

  <div class="overlay-content">

    <span class="closebtn" onclick="closebtn()">&times;</span>

    <p>Some text in the overlay..</p>

  </div>


</div>


<script>

var overlay = document.getElementById("myoverlay");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("closebtn")[0];

function openoverlay()

{

  overlay.style.display = "block";

}

function closebtn()

{

  overlay.style.display = "none";

}

window.onclick = function(event)  //outside overlay box click also hide box.

{

  if (event.target == overlay) {

    overlay.style.display = "none";

  }

}

</script>


</body>

</html>


in above example we have set two class one cover complete webpage, other is overlay box, one close button two hide open box.

simple display:none or block properties set from script and style. position must fixed to cover all page & background set rgba color.


How to create Image Zooming effect.

 this effect is useful when creating ecommerce website, showing detail view of image.



<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {box-sizing: border-box;}


.img-zoom-container {

  position: relative;

}


.img-zoom-lens {

  position: absolute;

  border: 1px solid #d4d4d4;

  width: 40px;

  height: 40px;

}


.img-zoom-result {

  border: 1px solid #d4d4d4;

  width: 300px;

  height: 300px;

}

</style>

<script>

function imageZoom(imgID, resultID)

{

  var img, lens, result, bx, by;

  img = $('#imgID');

  result = $('resultID');

  lens = $("div");

  $(lens).attr("class", "img-zoom-lens");

  img.parentElement.insertBefore(lens, img);

  bx = result.offsetWidth;

  by = result.offsetHeight;

  result.style.backgroundImage = "url('" + img.src + "')";

  result.style.backgroundSize = (img.width * bx) + "px " + (img.height * by) + "px";

  lens.addEventListener("mousemove", moveLens);

  img.addEventListener("mousemove", moveLens);

  lens.addEventListener("touchmove", moveLens);

  img.addEventListener("touchmove", moveLens);

  function moveLens(e) {

    var pos, x, y;

    e.preventDefault();

    pos = getCursorPos(e);

    x = pos.x - (lens.offsetWidth / 2);

    y = pos.y - (lens.offsetHeight / 2);

    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}

    if (x < 0) {x = 0;}

    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}

    if (y < 0) {y = 0;}

    lens.style.left = x + "px";

    lens.style.top = y + "px";

    result.style.backgroundPosition = "-" + (x * bx) + "px -" + (y * by) + "px";

  }

  function getCursorPos(e) {

    var a, x = 0, y = 0;

    e = e || window.event;

    a = img.getBoundingClientRect();

    x = e.pageX - a.left;

    y = e.pageY - a.top;

    x = x - window.pageXOffset;

    y = y - window.pageYOffset;

    return {x : x, y : y};

  }

}

imageZoom("trialimage", "trialresult");

</script>

</head>

<body>


<h1>Image Zooming effect</h1>


<p>Mouse over the image:</p>


<div class="img-zoom-container">

  <img id="trialimage" src="img_girl.jpg" width="300" height="240">

  <div id="trialresult" class="img-zoom-result"></div>

</div>



</body>

</html>


in above zoom effect details, 

1)define two container one is original image, second zoom preview.

2) get offsetWidth and offsetHeight using javascript.

3) set cursor and lens position

4) lens set to absolute position on image so that get exact zoom part from image.

5) main image from first container setting to other container background image.


Simple Tricks of PHP OOPS (object oriented Programming)

 1) A class is a template for objects, and an object is an instance of class. 


for example - car is class, bmw, mercedes is object


2) Define function in class called method,

 define variable in class called properties.



three principle in OOPS

 

A) Encapsulation - Binding (or wrapping) code and data together into a single unit are known as encapsulation. 


For example, a capsule, it is wrapped with different medicines.


via the use of "get" and "set" methods etc.(hide implementation detail)

for example -


<?php

class Animal

{

    private $family;

    private $food;


}

?>



B) Inheritance - via the use of extends keyword   (inherit from parent to child)



C) Polymorphism - If one task is performed in different ways, it is known as polymorphism 

 for example -

i) draw shape like circle, triangle (draw task in different ways)

ii) speak something like a cat speaks meow, dog barks woof  (speak task in different ways)


for polymorphism use implements keyword .



Abstraction -  Hiding internal details and showing functionality is known as abstraction. For example phone call, we don't know the internal processing




class car

{

   public $color = 'red' //property


   // method create   

   public function useofthis()

   {

return $this->color;   //using this keyword get property within same class

   }

}


$bmw= new car(); //object create


echo $bmw->color  // get property not add $ for property when calling

echo $bmw->useofthis() //get method





3) A constructor allows you to initialize an object's properties upon creation of the object.


function __construct($name) { //double underscore before construct word

    $this->name = $name;

  }


4) If you create a __destruct() function, PHP will automatically call this function at the end of the script.


5) 

public - the property or method can be accessed from everywhere. This is default

protected - the property or method can be accessed within the class and by classes derived from that class

private - the property or method can ONLY be accessed within the class


6) Inheritance in OOP = When a class derives from another class.

-- child class has its all properties and method from parent class(main class) include its own property and method


7) We can access a constant from outside the class by using the class name followed by the scope resolution operator (::)


class Goodbye {

  const LEAVING_MESSAGE = "Thank you for visiting W3Schools.com!";

}


echo Goodbye::LEAVING_MESSAGE;


8) Abstract classes and methods are when the parent class has a named method, but need its child class(es) to fill out the tasks.



9) Interfaces allow you to specify what methods a class should implement.

define by interface keyword


10) Traits are used to declare methods that can be used in multiple classes. Traits can have methods and abstract methods that can be used in multiple classes, and the methods can have any access modifier (public, private, or protected).


11)Namespace -allow for better organization by grouping classes that work together to perform a task,

allow the same name to be used for more than one class


namespace ab;


How to create Responsive Image(All Devices good view) with Transparent text

 <html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}


 


.container {

  position: relative;

  max-width: 800px;

  margin: 0 auto;

}


.container img {vertical-align: middle;}


.container .content {

  position: absolute;

  bottom: 0;

  background: rgb(0, 0, 0); 

  background: rgba(0, 0, 0, 0.5); 

  color: #ffffff;

  width: 100%;

  padding: 20px;

}

</style>

</head>

<body>


<h5>Responsive Image with Transparent Text</h5>


<div class="container">

  <img src="trial.jpg" alt="background" style="width:100%;">

  <div class="content">

    <h1>Heading</h1>

    <p>Sample Text here Sample Text hereSample Text hereSample Text hereSample Text hereSample Text here.</p>

  </div>

</div>


</body>

</html>


in above example if you observe class 'content' which text overlay and transparent view using background: rgba(0, 0, 0, 0.5); 


RGBA - set opacity of rgb(red, green, blue) color , in above 0.5 means transparent to background up to half.

Share your valuable comment.

How to create Responsive header for Mobile webpages

 Responsive means which is works on all devices, it is mobile friendly. and it's also good SEO & user interface.


<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box;}


body { 

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

}


.header {

  overflow: hidden;

  background-color: #f1f1f1;

  padding: 20px 10px;

}


.header a {

  float: left;

  color: black;

  text-align: center;

  padding: 12px;

  text-decoration: none;

  font-size: 18px; 

  line-height: 25px;

  border-radius: 4px;

}

 


.header a:hover {

  background-color: #ddd;

  color: black;

}


.header a.active {

  background-color: dodgerblue;

  color: white;

}


.header-right {

  float: right;

}


@media screen and (max-width: 500px) {

  .header a {

    float: none;

    display: block;

    text-align: left;

  }

  

  .header-right {

    float: none;

  }

}

</style>

</head>

<body>


<div class="header">

  <a href="#default" class="logo"><img src="logo.png"/></a>

  <div class="header-right">

    <a class="active" href="#home">Home</a>

    <a href="#contact">Contact</a>

    <a href="#about">About</a>

  </div>

</div>


<div style="padding-left:20px">

  <h5>Responsive Header</h5>

  <p>Some sample content..</p>

</div>


</body>

</html>


check above code on mobile which shows different view of header , which is easy to user access.


How to create vertical tabs using CSS and JAVASCRIPT

 <html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box}

body {font-family: "Lato", sans-serif;}


/* Style the mytab */

.mytab {

  float: left;

  border: 1px solid #ccc;

  background-color: #f1f1f1;

  width: 30%;

  height: 300px;

}


/* Style the buttons inside the mytab */

.mytab button {

  display: block;

  background-color: inherit;

  color: black;

  padding: 22px 16px;

  width: 100%;

  border: none;

  outline: none;

  text-align: left;

  cursor: pointer;

  transition: 0.3s;

  font-size: 17px;

}


/* Change background color of buttons on hover */

.mytab button:hover {

  background-color: #ddd;

}


/* Create an active/current "mytab button" class */

.mytab button.active {

  background-color: #ccc;

}


/* Style the mytab content */

.mytabcontent {

  float: left;

  padding: 0px 12px;

  border: 1px solid #ccc;

  width: 70%;

  border-left: none;

  height: 300px;

}

</style>

</head>

<body>


<h2>Vertical mytabs</h2>

<p>Click on the buttons inside the mytabbed menu:</p>


<div class="mytab">

  <button class="mytablinks" onclick="openCity(event, 'India')" id="defaultOpen">India</button>

  <button class="mytablinks" onclick="openCity(event, 'America')">America</button>

  <button class="mytablinks" onclick="openCity(event, 'Africa')">Africa</button>

</div>


<div id="India" class="mytabcontent">

  <h3>India</h3>

  <p>India is the capital city of England.</p>

</div>


<div id="America" class="mytabcontent">

  <h3>America</h3>

  <p>America is the capital of France.</p> 

</div>


<div id="Africa" class="mytabcontent">

  <h3>Africa</h3>

  <p>Africa is the capital of Japan.</p>

</div>


<script>

function openCity(evt, cityName) {

  var i, mytabcontent, mytablinks;

  mytabcontent = document.getElementsByClassName("mytabcontent");

  for (i = 0; i < mytabcontent.length; i++) {

    mytabcontent[i].style.display = "none";

  }

  mytablinks = document.getElementsByClassName("mytablinks");

  for (i = 0; i < mytablinks.length; i++) {

    mytablinks[i].className = mytablinks[i].className.replace(" active", "");

  }

  document.getElementById(cityName).style.display = "block";

  evt.currentTarget.className += " active";

}


// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

</script>

   

</body>

</html> 


What is PHP super global


predefined variables in PHP called "super global", which means that they are always accessible, regardless of scope - and you can access them from any function, class or file without having to do anything special.



Below are Super global,

1) $GLOBALS

2) $_SERVER

3) $_REQUEST

4) $_POST

5) $_GET

6) $_FILES

7) $_ENV

8) $_COOKIE

9) $_SESSION


1) $GLOBALS - means accessible variables outside of function , for example - $GLOBALS['z'] this variable also accessible outside function 'addition'


<?php 

$x = 75;

$y = 25; 


function addition() {

  $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];

}


addition();

echo $z;

?>


2) $_SERVER - 


$_SERVER['PHP_SELF'] - current PHP file name

$_SERVER['GATEWAY_INTERFACE'] - version of the Common Gateway Interface (CGI) currently using

$_SERVER['SERVER_ADDR'] - Host server IP address

$_SERVER['SERVER_NAME'] - name of the host server (such as infyleaf.tech)

$_SERVER['REQUEST_METHOD'] request method used to access the page (such as POST)

$_SERVER['QUERY_STRING'] query string if the page is accessed via a query string

$_SERVER['HTTP_ACCEPT'] Accept header from the current request

$_SERVER['HTTP_ACCEPT_CHARSET'] Accept Charset header from the current request

$_SERVER['HTTP_HOST'] Host header from the current request

$_SERVER['HTTP_REFERER'] complete URL of the current page (not reliable because not all user-agents support it)

$_SERVER['HTTPS'] Is the script queried through a secure HTTP protocol

$_SERVER['REMOTE_ADDR'] IP address from where the user is viewing the current page

$_SERVER['REMOTE_HOST'] Host name from where the user is viewing the current page

$_SERVER['REMOTE_PORT'] port being used on the user's machine to communicate with the web server

$_SERVER['SCRIPT_FILENAME'] absolute pathname of the currently executing script

$_SERVER['PATH_TRANSLATED'] file system based path to the current script

$_SERVER['SCRIPT_NAME'] path of the current script

$_SERVER['SCRIPT_URI'] URI of the current page


3) $_REQUEST - get requested name  $name = $_REQUEST['fname']; when form is post


4) $_POST - when post form get value of input for eg -

 $_POST['firstname'], $_POST['mobile']

 

<form action="" method="post">

<input type="text" name="mobile"/>

<input type="submit" value="save"/>

</form>


5) $_GET - get value from url , but should remember not pass secure value like password to this variable.


6)$_FILES - to get value from files when post input type file

basename($_FILES["fileToUpload"]["name"]);


for example 


if ($_FILES["fileToUpload"]["size"] > 2000000) {

  echo "Sorry, your file is too large.";

  $uploadOk = 0;

}


7)$_ENV - get environment variables

<?php

$arr=getenv();

foreach ($arr as $key=>$val)

echo "$key=>$val

";

?>



8) $_COOKIE - get cookie value 


in below example checking if cookie name set or not

<?php

$cookie_name = "user";

$cookie_value = "Mayur";

setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day

?>

<html>

<body>


<?php

if(!isset($_COOKIE[$cookie_name])) {

  echo "Cookie named '" . $cookie_name . "' is not set!";

} else {

  echo "Cookie '" . $cookie_name . "' is set!<br>";

  echo "Value is: " . $_COOKIE[$cookie_name];

}

?>


9) $_SESSION - store value in session , temporary storage over multiple page. 


first line should be session_start();


$_SESSION["favcolor"] = "green";


in case any query please comment


12/13/2020

How to add marker to google map for webpage, mobile page

 This tutorial shows you how to add a simple Google map with a marker to a web page. 

You should knowledge of HTML and CSS, and a little knowledge of JavaScript.

Sample Example for google map

  • Create Html

<!DOCTYPE html>

<html>

  <head>

    <title>Add Map</title>

    <script

      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"

      defer

    ></script>

    

  </head>

  <body>

    <h3>Sample Google Maps Demo</h3>

    <!--The div element for the map -->

    <div id="map"></div>

  </body>

</html>

  • Create CSS

#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

  • Create Javascript

// Initialize and add the map

function initMap() {

  // The location 

  const uluru = { lat: -25.344, lng: 131.036 };

  const map = new google.maps.Map(document.getElementById("map"), {

    zoom: 4,

    center: uluru,

  });

   const marker = new google.maps.Marker({

    position: uluru,

    map: map,

  });

}

  • Follow these steps to get an API key:

  1. Go to the Google Cloud Console.

  2. Create or select a project.

  3. Click Continue to enable the API and any related services.

  4. On the Credentials page, get an API key (and set the API key restrictions).  

  5. To prevent quota theft and secure your API key, see Using API Keys.

  6. (Optional) Enable billing. 

  7. Copy the entire code of this tutorial from this page, to your text editor.

  8. Replace the value of the key parameter in the URL with your own API key (that's the API key that you've just obtained). 

       <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

    </script>

Simple Steps - 1) create api 2) add above html, javascript 3) check it on webpage.

still if any issue please comment.


how to get geolocation with latitude and longitude

 ask browser to allow location


function getLocation() {

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(showPosition);

  } else { 

    x.innerHTML = "Geolocation is not supported by this browser.";

  }

}


using position.coords.latitude & position.coords.longitude we can get exact position in map


useful when adding google map to website or app, also track geolocation

no any other script or file required.


<!DOCTYPE html>

<html>

<body>


<p>Click the button to get your coordinates.</p>


<button onclick="getLocation()">Try It</button>


<p><strong>Note:</strong> The geolocation property is not supported in IE8 and earlier versions.</p>


<p id="demo"></p>


<script>

var x = document.getElementById("demo");


function getLocation() {

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(showPosition);

  } else { 

    x.innerHTML = "Geolocation is not supported by this browser.";

  }

}


function showPosition(position) {

  x.innerHTML = "Latitude: " + position.coords.latitude + 

  "<br>Longitude: " + position.coords.longitude;

}

</script>


</body>

</html>

Useful links 

1) to get latitude and longitude - https://www.latlong.net/

2) google map API - https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap



how create JSON variable and store to localhost

 i) create JSON - JavaScript object notation(JSON) can be defined in curly brace, & then stringify to variable.


myObj = { name: "John", age: 31, city: "New York" };

myJSON = JSON.stringify(myObj);


ii) store value to local Storage or database


localStorage.setItem("testJSON", myJSON); OR save this json to database


iii) get saved data 


text = localStorage.getItem("testJSON");

obj = JSON.parse(text);

document.getElementById("hello").innerHTML = obj.name;



final code likes below,

<!DOCTYPE html>

<html>

<body>


<h2>Store and retrieve data from local storage.</h2>


<p id="hello"></p>


<script>

var myObj, myJSON, text, obj;


// Storing data:

myObj = { name: "John", age: 31, city: "New York" };

myJSON = JSON.stringify(myObj);

localStorage.setItem("testJSON", myJSON);


// Retrieving data:

text = localStorage.getItem("testJSON");

obj = JSON.parse(text);

document.getElementById("hello").innerHTML = obj.name;

</script>


</body>

</html>


how to create Icons like social media, emoji, alert and other for website, app

 icon can be created,

i) using font family

ii) using js file

iii) using html entity

iv) using css



- using awesome js - in this js all types icon available like emoji, alert, animation, social icon, media & so on.


<head>

<title>Font Awesome Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<!--just go to above site and create own js file which is free-->

</head>

<body>


<p>Some Font Awesome icons:</p>

<i class="fas fa-band-aid"></i>

<i class="fas fa-cat"></i>

<i class="fas fa-dragon"></i>

<i class="far fa-clock"></i>


- using font family 


<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>


<i class="fa fa-cloud"></i>

<i class="fa fa-heart"></i>

<i class="fa fa-car"></i>

<i class="fa fa-file"></i>

<i class="fa fa-bars"></i>


</body>

</html>


https://fonts.googleapis.com/icon?family=Material+Icons  this is google icon


- using bootstrap - just use class name glyphicon, glyphicon-trash


<p>Trash icon on a button:

        <button type="button" class="btn btn-default btn-sm">

          <span class="glyphicon glyphicon-trash"></span> Trash 

        </button>

      </p>


all above fonts works on all devices, browser, responsive, easy to load , lightweight.


How to create Navigation menu using bootstrap

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with navbar navbar-default. 


  1. Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  2. Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  3. Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  4. Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. 

navigation item add using nav-item

    <li class="nav-item">

      <a class="nav-link" href="#">Home</a>

    </li>


for dropdown use


 <li class="nav-item dropdown">

      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

        product

      </a>

      <div class="dropdown-menu">

        <a class="dropdown-item" href="#">sample 1</a>

        <a class="dropdown-item" href="#">sample 2</a>

        <a class="dropdown-item" href="#">sample 3</a>

      </div>

    </li>

above all final code,


<!DOCTYPE html>

<html lang="en">

<head>

  <title>Navingation menu with dropdown</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <!-- Brand -->

  <a class="navbar-brand" href="#">Logo</a>


  <!-- Links -->

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">Home</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">about us</a>

    </li>


    <!-- Dropdown -->

    <li class="nav-item dropdown">

      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

        product

      </a>

      <div class="dropdown-menu">

        <a class="dropdown-item" href="#">sample 1</a>

        <a class="dropdown-item" href="#">sample 2</a>

        <a class="dropdown-item" href="#">sample 3</a>

      </div>

    </li>

  </ul>

</nav>

<br>

<div class="container">

  <h3>Navbar With Dropdown</h3>

  <p>This example adds a dropdown menu in the navbar.</p>

</div>


</body>

</html>

how to create alert, toast, tooltip

 in this tutorial give details of how to create alert OR toast OR tooltip on time basis, i.e. auto hide.



$(document).ready(function(){

  $('#myBtn').click(function(){

    $('.toast').toast({delay: 3000});

    $('.toast').toast('show');

  });

});


& call bootstrap supported files


finally, the code like below,

<!DOCTYPE html>

<html lang="en">

<head>

  <title>alert style </title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container mt-3">

  <h1>create toast or alert</h1>

   

  <p>In this example, it will take 3 seconds to hide the toast(alert box), once it is shown. </p>

  <button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>


  <div class="toast mt-3">

    <div class="toast-header">

      Toast Header

    </div>

    <div class="toast-body">

      Some text inside the toast body

    </div>

  </div>

</div>


<script>

$(document).ready(function(){

  $('#myBtn').click(function(){

    $('.toast').toast({delay: 3000});

    $('.toast').toast('show');

  });

});

</script>


</body>

</html>


in above use jquery set delay in alert box and autohide.


useful to show messages or warning, success, error messages .

for example data is saved message for this also good to use toast.

how to create carousel or slider

 carousel terms defined as multiple images with text or without text show after one by one within same block.

in below example shows slider which is fully responsive and auto timer just use css


 .carousel-inner img {

    width: 100%;

    height: 100%;

  }


add images and text 


<div class="carousel-item active">

  <img src="la.jpg" alt="India" width="1100" height="500">

  <div class="carousel-caption">

<h3>India</h3>

<p>sample text here</p>

  </div>   

</div>



finally , makes complete code as below


<!DOCTYPE html>

<html lang="en">

<head>

  <title>carousel or slider Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <style>

  /* Make the image fully responsive */

  .carousel-inner img {

    width: 100%;

    height: 100%;

  }

  </style>

</head>

<body>


<div id="demo" class="carousel slide" data-ride="carousel">

  <ul class="carousel-indicators">

    <li data-target="#demo" data-slide-to="0" class="active"></li>

    <li data-target="#demo" data-slide-to="1"></li>

    <li data-target="#demo" data-slide-to="2"></li>

  </ul>

  <div class="carousel-inner">

    <div class="carousel-item active">

      <img src="india.jpg" alt="India" width="1100" height="500">

      <div class="carousel-caption">

        <h3>India</h3>

        <p>Sample text here</p>

      </div>   

    </div>

    <div class="carousel-item">

      <img src="asia.jpg" alt="asia" width="1100" height="500">

      <div class="carousel-caption">

        <h3>asia</h3>

        <p>Thank you, asia!</p>

      </div>   

    </div>

    <div class="carousel-item">

      <img src="africa.jpg" alt="africa" width="1100" height="500">

      <div class="carousel-caption">

        <h3>africa</h3>

        <p>Sample Text here</p>

      </div>   

    </div>

  </div>

  <a class="carousel-control-prev" href="#demo" data-slide="prev">

    <span class="carousel-control-prev-icon"></span>

  </a>

  <a class="carousel-control-next" href="#demo" data-slide="next">

    <span class="carousel-control-next-icon"></span>

  </a>

</div>


</body>

</html>


above code is very simple to use, fast load, responsive.

we can also create slider using other programming lanuage also like jquery slider, css slider


how to create pagination in html, bootstrap


1) create multiple page on single webpage

2) manage product or content or record from database using pagination method

3) large mysql data content want to fetch but it should easy to view in that case use pagination method.

4) Pagination is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner. This method is usually employed to display resulting items on a website.  



<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Pagination</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container">

  <h2>Pagination</h2>

  <p>this use to manage large content in pagination style like book content maintain over multiple pages because not possible on same page, control page size</p>                  

  <ul class="pagination">

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>

  </ul>

  <ul class="pagination justify-content-center">

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>

  </ul>

   

</div>


</body>

</html>


just call page-item class , in bootstrap all style are predefined with some class name , just find that class name and use it. for example page-link is default class in bootstrap


Thank you for viewing blog, please comment if any query.


An Introduction to the Laravel Framework: What It Is and Why You Should Use It

  If you're a PHP developer looking for a modern, efficient, and powerful framework to build web applications, look no further than Lara...