Wednesday, August 8, 2018

phpMyPassion

PHP Program To Find Odd Even Number

Find Odd Even Number || PHPMYPASSION

"Find odd even number " is the basic PHP program for a PHP learner. As you all aware, Odd numbers are not divisible by 2 and Even numbers are divisible by 2. 

Example :
    Odd number: 3, 5, 7, 9,11
    Even number: 2, 4, 6, 8, 10 

So here I am gonna explain it with a simple PHP program.

Odd Even Number Program :-


<?php

$number=22;

if($number%2==0)
{
 echo "22 is an even number"; 
}
else
{
 echo "22 is not odd number";
} 

?>

Output :-

22 is an even number


You can also do this by defining a PHP function to check a number is odd or even as below -



PHP function to check odd even number :-


<?php
function checkOddEven($num)
{
   if($num%2==0)
   {
     $result = "Even number"; 
   }
   else
   {
     $result = "Odd number";
   }
   retrun $result;
}

echo checkOddEven(43);
?>

Output :-

Odd number
Read More

Tuesday, August 7, 2018

phpMyPassion

Swap Two Number Program In PHP

Swap Two Numbers Program || PhpMyPassion

Swap two number generally is the process of interchange two variables with each other. Just suppose you have X whose value 10 there is another number Y with value of 20. Now if we swap these two number with each other then the X value will change to 20 and Y  value will change to 10.

So here I am gonna explain with a simple PHP program.

Swap Two Number Program :-


<?php

$x=10;
$y=20;

echo "Value of x: $x</br>";
echo "Value of y: $y</br>";

$temp=$x;
$x=$y;
$y=$temp;

echo "Value of x: $x</br>";
echo "Value of y: $y</br>";

?>

Output :-

Value of x: 10
Value of y: 20
Value of x: 20
Value of y: 10


You can also do this by without using third variable as below -

Swap Two Number Without Using Third Variable Program :-


<?php

$x=10;
$y=20;

echo "Value of x: $x</br>";
echo "Value of y: $y</br>";

$x=$x+$y;
$y=$x-$y;
$x=$x-$y;

echo "Value of x: $x</br>";
echo "Value of y: $y</br>";

?>

Output :-

Value of x: 10
Value of y: 20
Value of x: 20
Value of y: 10

Read More

Monday, August 6, 2018

phpMyPassion

Armstrong Number Program in PHP

PhpMyPassion
"Armstrong Number Program" is the initial program from where most of the beginner developers will start to learn and write code in any language. An Armstrong number is a number that is the sum of its own digits each raised to the power of the number of digits is equal to the number itself.
Here is an example of check a armstrong number in PHP.

Armstrong Number Program :-

Below is the simple PHP program to check a number armstrong.

<?php

$number=153;
$sum=0;
$temp=$number;
while($temp!=0)
{
$reminder=$temp%10;
$sum=$sum+$reminder*$reminder*$reminder;
$temp=$temp/10;
}
if($number==$sum)
{
echo "It is an Armstrong number";
}
else
{
echo "It is not an armstrong number";
}

?>

Output :-

It is an Armstrong number
Read More

Saturday, August 4, 2018

phpMyPassion

Process to Install Docker on Ubuntu 16.04

Process To Install Docker || PhpMyPassion

Docker :-

Docker is a container management service. The keywords of Docker are develop, ship and run anywhere. The whole idea of Docker is for developers to easily develop applications, ship them into containers which can then be deployed at anyplace.

Docker has two flavors :

  • Community Edition (CE)
  • Enterprise Edition (EE)

So if you don't know which one should be install, just pick up The Community Edition (CE) flavor and install as below 

Docker Installation :-

Follow the step by step process -

Step#1 :- Set up the docker repository

$ sudo apt-get update
$ sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

Step#2 :- Install Docker CE
$ sudo apt-get update
$ sudo apt-get install docker-ce

Step#3 :- Verify the installation
$ sudo docker run hello-denny

So above process will help you to install Docker on Linux environment. If you found any difficultly, do follow the Ubuntu installation instruction list all you need in detail.  

Know More About Docker:

      What is docker and uses ? 

Read More

Thursday, August 2, 2018

phpMyPassion

What is Docker and Why We Use ?

Docker Introduction || PhpMyPassion

What is docker ?
Docker is a container management service. The keywords of Docker are develop, ship and run anywhere. The whole idea of Docker is for developers to easily develop applications, ship them into containers which can then be deployed at anyplace.
Docker has two flavors : The Community Edition (CE) and the Enterprise Edition (EE)
Initial Release : March 2013
Mostly use on agile based project.
Why docker ?
  • Docker has the ability to reduce the size of development by providing a smaller footprint of the operating system via containers.
  • With containers, it becomes easier for teams across different units, such as development, QA and Operations to work seamlessly across applications.
  • You can deploy Docker containers anywhere, on any physical and virtual machines and even on the cloud.
  • Since Docker containers are pretty lightweight, they are very easily scalable.
For more details : why docker
Docker Terms :
Docker Engine : "Docker engine" is the part of Docker which creates and runs Docker containers.
Docker Hub : SaaS service for sharing and managing application stacks.
( Docker Hub is a registry service on the cloud that allows you to download Docker images that are built by other communities. You can also upload your own Docker built images to Docker hub )
Docker Compose : Docker Compose is a tool for defining and running multi-container Docker applications. It uses Yaml files to configure the application's services and performs the creation and start-up process of all the containers with a single command.
Using Compose, it is basically a three-step process.
  1. Define your app's environment with a Dockerfile so it can be reproduced at anyplace.
  2. Define the services that make up your app in docker-compose.yml so they can be run together in an isolated environment.
  3. In the end, run docker-compose up and Compose will start and run your entire app.
For more information read: Docker compose
Docker Image: There everything is based on Images.
Docker file: The Dockerfile is essentially the build instructions to build the image.
For more details : Docker file
Docker-compose.yml : Config. Application’s services.

More About Docker:

Read More

Sunday, July 22, 2018

phpMyPassion

How To Set Custom Variables With DataLayer in GoogleTag manager (GTM) ?

Google Tag Manager DataLayer || PhpMyPassion

The most common problem for GTM is to setting up custom variables with dataLayer and make that dynamic for your JavaScrip tag.

So here I am gonna explain it with an article. follow whole process for setting up custom variables for your custom JavaScript tag.

I have already explained about GTM or its overview in my one of article. You can read that overview of google tag manager here

Setting Up Custom Variable With DataLayer :


To setting up custom variables with dataLayer, developers has to pass the variables from their code.

for an example :

just suppose your JS-SDK required data like eventName & jsonPayload and other parameters as below. 

<script>
var _pmp = _pmp || [];
var cb = Math.random()*10000000000000000;
!function(m,d,e,v,n,t,s)
{if(m.pmp)return;n=m.pmp=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!m._pmp)m._pmp=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=d.createElement(e);t.async=!0;
t.src=v;s=d.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'js/trackmyscript.js?cb='+cb);
_pmp.push(['init','PMP-XXX']);
_pmp.push(['dataTrack', 0, 'event-NAME', {jsonPayload}]); //parameters to e pass
</script>

You can set the datalayer to pass these variables from your code as below-

if your conversion event is of SignUp, then you have to setup dataLayer from your server side script as below-

Conversion Event : dataTrack_cnv

<script>dataLayer.push("event":"dataTrack_cnv", "eventName":"Buying", "jsonPayload":"{"md_prid":"p1234", "md_prname":"myProduct", "cur":"usd"}")</script>

You can also set this dataLayer on Ajax Response & on button click.
make sure you have initialise dataLayer object before the GTM-Tag as below - 
<head>
<!-- Google Tag Manager -->
<script>
var dataLayer = [];
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->
</head>

Now its time to create dataLayer variable by that we can pass it to our JS-SDK-TAG. 

Process to use dataLayer variables in your custom JS-SDK gtm tag :-

To use these variables you have to create variables in GTM as below -

Setting up DataLayer variable in gtm || PhpMyPassion

  • First give a name to your variable like - eventName, jsonPayload etc.
  • Now choose variable type to "Data Layer Variable" because we are already set dataLayer variables from code.
It will looks like below screen after choosing Data Layer variable -


Here eventName below DataLyer variable is the already above set DataLayer variabel name.
  • Now click to save and use your variable into your created JS-SDK tag in gtm -

<script>
var _pmp = _pmp || [];
var cb = Math.random()*10000000000000000;
!function(m,d,e,v,n,t,s)
{if(m.pmp)return;n=m.pmp=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!m._pmp)m._pmp=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=d.createElement(e);t.async=!0;
t.src=v;s=d.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'js/trackmyscript.js?cb='+cb);
_pmp.push(['init','PMP-XXX']);
_pmp.push(['dataTrack', 0, {{eventName}}, {jsonPayload}]); //parameters to e pass
</script>








  • Now set trigger to all pages



      • Publish your container tag and start to track your event.
      So using the whole process developers can set dataLayer variable in their website code and pass to GTM JS-SDK-TAG accordingly. Google Tag Manager makes it more easy to track event with a little bit changes in your website.

      If anybody found the issue in setting up dataLayer variables from their website or in passing to GTM, can comment here. I will always here for helping you. 


      More About Google Tag Manager (GTM):

      Read More

      Friday, July 20, 2018

      phpMyPassion

      Top CSS Interview Questions And Answers for Freshers.

      Top css interview questions and answers for freshers & experienced || PhpMyPassion

      Here I am sharing most asked CSS interview questions and their answers for  beginners. This list of CSS interview answers surly helpful for CSS beginners or web designers who just want to began their profession as a web designer. I recommend read out these interview questions before the interview. 

      Question #1 - What is CSS?
      CSS stands for Cascading Style Sheet. It is a popular styling language that is used with HTML to design web pages.

      Question #2 - What is the latest version of CSS?
      As of now CSS latest version is CSS3 . Latest Features of CSS3

      Question #3 - What are the different types of CSS?
      There are three types of CSS.
      • Inline CSS : Inline Style Sheet is used to style only a small piece of code.
      • Internal CSS : Embedded/Internal style sheets are put between the <head>...</head> tags.
      • External CSS : This is used to apply the style to all the pages within your website by changing just one style sheet.
      Question #4 - What is CSS selector?
      It is a string that identifies the elements to which a particular declaration will apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. For More Follow

      Question #5 - What is the difference between class selectors and id selectors?
      There are two difference between class selectors and id selectors as below.
      • A class selector is a name refenced by a full stop (“.”) and an ID selector is a name refenced by a hash character (“#”).
      • An ID can be used to identify one element, whereas a class can be used to identify more than one.
      Question #6 - What is Responsive Web Design?
      Responsive web design is a technique that render all website pages differently on different sizes of devices. 
      The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

      Question #7 - What is the CSS Box model and what are its elements?
      The CSS box model is used to define the design and layout of elements of CSS.
      The elements are as below:
      • Margin
      • Border
      • Padding
      • Content
      Question #8 - Explain the difference between visibility: hidden and display: none?

      visibility: hidden
      simply hides the element but it will occupy space and affect the layout of the document.

      display: none
      also hides the element but will not occupy space. It will not affect the layout of the document.

      Question #9 - What is the z-index and how is it used?
      The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
      The z-index default value is zero, and can take on either a positive or negative number.

      An element with a higher z-index is always stacked above than a lower index.
      Z-Index can take the following values:
      • Auto: Sets the stack order equal to its parents.
      • Number: Orders the stack order.
      • Initial: Sets this property to its default value (0).
      • Inherit: Inherits this property from its parent element.
      Question #10 - What are some of the common lists that can be used when designing a page?
      Basically, HTML used some of the common lists these are following:-
      – Ordered list
      – Unordered list
      – Definition list
      – Menu list
      – Directory list
      Each of this list types makes use of a different tag set to compose.

      Question #11 - Advantage of collapsing white space?
      - This enables the designers to mastermind the HTML code in an efficient and intelligible organization.
      - The browser collapses the multiple white spaces into a single white space in HTML.

      Question #12 - What is the float property of CSS?
      Float property is used to align the image to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it

      Question #13 - What is the difference between CSS2 and CSS3?

      CSS3 is the advance level of CSS2.0. In CSS3 we have new properties - border radius, box shadow, text shadow, multiple background images, gradient , animations, transition, transform and much more.

      Question #14 - What is the syntax to link external style sheet?

      Syntax :-

      <HTML>
      <HEAD>
         <LINK REL=STYLESHEET HREF="Test.css" TYPE="text/css">
      </HEAD>
      </HTM

      Question #15 - How embedded/internal style can be linked with HTML documents?

      You can linked as below:-
      <HEAD>
      <STYLE TYPE=”text/css”>
      style {text-indent: 15pt;}
      style1{text-color: #060000;}
      </STYLE>
      </HEAD>

      Question #16 -What are advantages of using CSS?
      There are several advantages of CSS. as below -
      • CSS saves time.
      • Pages load faster.
      • Easy Maintenance.
      • Superior style to HTML
      • Multiple device compatibility.
      • Platform independence.
      Question #17 - What are the components of CSS style?

      There are three components of CSS style.
      • Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
      • Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
      • Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
      Question #18 - What Property is used to make a font italic or oblique
      You can use font-style property to make a font italic or oblique.
      example:- #anchor{font-style:italic;}

      Question #19 - What property is used to increase or decrease the size of a font?
      You can use font-size property to increase or decrease the size of a font.
      example :- #anchor{font-size:14px;}

      Question #20 - what property is used to set the color of a text?
      When you use image maps, it can easily become confusing and difficult to determine which hotspots corresponds with which links. Using alternative text lets you put a descriptive text on each hotspot link.

      Question #21 - what property used to align the text of a document?
      HTML techniques sends ask for utilizing get a post strategy. GET post ask for information from the server and POST is utilized to submit information to the server.

      Question #22 - What bullet types are available?
      With ordered lists, you can select to use a number of different list types including alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc, square, or circle.

      Question #23 - What property is used to underline, overline and strike through text?
      The text-decoration property is used to underline, overline, and strikethrough text.

      Question #24 - What property is used to capitalize text or convert text to uppercase or lowercase letters?
      The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

      Question #25 - What property is used to set the text shadow around a text?
      The text-shadow property is used to set the text shadow around a text.

      More About Interviewing:

      Read More

      Tuesday, July 10, 2018

      phpMyPassion

      How To Work With Google Tag Manager (GTM) ?

      I found most of the developers having a common problem of adding a tag code, snippets, pixels or script tag to their websites by that they can track events, re marketing, conversions, analytics and more. Google Tag Manager (GTM) introduce to resolve developers or publishers this type of issue. Google Tag Manager (GTM) makes you possible to add or update tags without having help of your developer.
      Google Tag Manager (gtm) introduction || PhpMyPassion

      Google Tag Manager (GTM) provides a full control to their users over how your tags are defined and when should fire. GTM quite easy to learn and much simple to manage if you understand the basics and flow of using that. If you're an SEO and you are managing tracking codes of multiple clients then its good time to start with GTM without having any delay.

      More in-depth GTM features

      Google Tag Manager has a lot more advanced features and details, like layers and setting up administrators/users. You can find information on all Google Tag Manager features on Google Tag Manager’s help section.

      Google Tag Manager (GTM) is large Topic, so here I am sharing the full article on basic of Google Tag Manager (GTM)

      Start Learning with Google Tag Manager -

      Follow below steps to start with GTM -

      Step 1 : Login with GTM

      To start using GTM, visit the Google Tag Manager login page. When you click login you will find below page

      Step 2 : Setup Accounts for GTM


      The first thing to do is give your account a name. You’ll want to name your account with the name of your company so that you can find and manage each of the sites you have in GTM. It’s generally recommended that you have one account per company and one container per site.

      Once you have your account set up, you will create your first container. Give your container a name and indicate where you want to use the container: website, iOS, Android or AMP.

      Setup Accounts for GTM || PhpMyPassion

      Click on create once you’ve chosen your container location, and agree to the Terms of Service, you are ready to install google tag manager.

      Step 3 : Install Google Tag Manager Container 

      Next you will be given two pieces of script to put on your site as below:
      Install google tag manager (gtm) container || PhpMyPassion

      The Google Tag Manager snippet code has two blocks - one block has script tag on has noscript  tag. 
      The Google Tag Manager snippet code must be placed on every page of your website. Google cautions you not to put code in a hidden iframe and not to use another tag management system while using GTM (It can cause issues).
      Once you’ve added your both GTM snippet code to your site, Google Tag Manager is ready to go.
      Install google tag manager (gtm) container || PhpMyaPssion

      As your containers grow over time, it can get difficult to track all your tags, triggers and variables. GTM allows you to create folders to help you organize. With folders, you can organize your tags in groupings so it’ll be easier to update and manage as needed.

      Step 4 : Setting up triggers

      Tags typically execute, or “fire,” when a web page loads or when some other user interaction occurs. In Google Tag Manager, you define triggers with tags to tell GTM when a tag should fire. A great example of a trigger is the “Page View” trigger, which can be used if you want to have your tag fire when a specific page loads.
      You will want to tell GTM what to do when a certain action is taken by a user. Setting up triggers is easy to do — you just choose the trigger type:

      Triggers in GTM || PhpMyPassion

      Step 5 : Setting up variables

      Variables help define triggers and what data they send. For instance, you could set up a variable when someone goes to a specific page or clicks on a checkout button or download page.
      setting up variable gtm || PhpMyPassion

      Step 6 : Previewing Workspace

      You can test your changes by setting up your GTM workspace on previewing mode. 



      Step 7 : Remember to publish

      Once you have tested your changes to GTM, remember to publish your workspace. your changes will not work until you publish your workspace. So always do remember after added or edited tags, triggers and variables in a workspace, you have to publish:
      Publish GTM container || PhpMyPassion

      With a little bit more learning and practicing, you’ll find that managing the tracking code you use will be much easier and more efficient thanks to Google Tag Manager.

      little bit content source : outshine.com
      Read More

      Monday, June 25, 2018

      phpMyPassion

      How to Create a Scroll To Top With Some Delay Using JavaScript ?

      Here I am sharing the code for scrolling a page from bottom to top with some delay. You can also use that to reach or show first error element box in your specified form.

      Javascript scroll to top with some delay  || PhpMyPassion

       Show First Scrolled Error Element Box on Submit :-

      you can use below jQuery code to scroll on the first error element box on submit -

      $('html, body').animate({
                      scrollTop: $(validator.errorList[0].element).offset().top-300            }, 2000);

      Above code will work for the form group on submit. for an example below -

      $("#submit").on('click', function () {
      
          var validator = $("#form").validate({
              rules: {
                 name: {
                      required: true,
                      maxlength: 50            },
              },
              messages: {
                  nam: {
                      required: "This field is required.",
                      maxlength: "name must be less than 50 character.",
                  }
              },
              highlight: function (element) {
                  $(element).closest('.form-group').removeClass('success').addClass('has-error control-label');
                  /*scroll to first error element box */
                  $('html, body').animate({
                      scrollTop: $(validator.errorList[0].element).offset().top-300            }, 2000);
              },
              success: function (element) {
                  element.addClass('valid').closest('.form-group').removeClass('has-error control-label').addClass('success');
              }
      
          });
      }

      Above code will scroll you back to your first error input box with animation.

      Animated scroll back to top for a specified element ID :-

      If you want to scroll back to  a specified element Id on some event then you can use below code -

      $('html, body').animate({
          scrollTop: $("#elementId").offset().top-300}, 2000);


      .scrollTop() jQuery Function :-

      You can also use .scrollTop() function to scroll bottom to top on a page.

      Note:- .scrollTop() function does not accept any arguments.

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>My wep page scrollTop demo with jquery</title>
        <style>
        div {
          margin: 10px;
          padding: 5px;
          border: 2px solid #666;
        }
        </style>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      </head>
      <body>
       
      <div>Dashboard</div><div></div>
       
      <script>
      var div = $( "div:first" );
      $( "div:last" ).text( "scrollTop:" + div.scrollTop() );
      </script>
       
      </body>
      </html>

      Read More