Monday, June 15, 2020

Complete web-development for beginners


Personal Home Page-PHP
When we talk about php we should know where we use the php and what is the purpose of it.
The php we use mainly for the connecting of the front-end with the back-end.
 What is front-end?:
Front-end is nothing but the view of the website. For example the front-end is developed using the technologies like HTML,CSS,JQUERY,JAVASCRIPT,etc,.
what is back-end?
Back-end is the programming language that we use to store the data base that we need to access or display in the front-end. BUT this is not possible display the back-end data in the front-end without a mediator. For this we use the programming language that we need.
 
Here our back-end programming language is the php.
This is also known as server-side scripting language.


Now let's learn both the front-end and the back-end in a single tutorial for the complete beginners.

HTML

The Basic Of Web

Hyper Text Markup Language

Text file containing small mark up tags.

Must have an extension .htm or .html.
note-:but wen we use php then we don't need to use the .html
Basic Structure
<html>
<head>
    <title> title of the page that displays in the browser tab</title>
</head>
<body>
body contents can be written here
         <b>…….</b>   to display the text in bold. 
  <i>……..</i>    to display the text in italic font.
  <tt>……</tt> teletype element displays the content in type writer font.
  <strike>…</strike>  draws a line through the middle of the text.
  <big>……</big> larger font size to display the text.
  <small>…..</small>  displays the text in a smaller font size.
  <sub>…….</sub> subscript elements.
  <sup>…….</sup> superscript elements.
  <div>……..</div> div stands for division
        <img src=“filename.jpg” alt=“cannot display”/> for images
        <a href=“filename.php”>click to go</a> too add any link
        <button>submit</button> any button that you want to use.

 <table>to add table use this tag

    <th> </th>table header

    <tr>

        <td>table data</td>

    </tr> table row           

   </table>

too learn more tags do visit the w3school for beginners   https://www.w3schools.com/tags/tag_doctype.asp

</body>
</html>
CSS
CASCADING STYLE SHEETS
This is to add more beautiness to the page like doing make-ups for your face
while going on to a function.

THERE ARE 3 TYPES OF CSS

Inline style sheet(Inside an HTML element) [Giving style to any particular tag].

<p style=“color:blue;margin-left:20px”>This is a paragraph</p>

Internal style sheet(Inside the head section of an HTML ) [Defining the styles in the head section of an HTML page]

<head>

<style type=“text/css”>

    h1 {

        color:red;

    }

            p

                {

margin-left:20px;

}

</style>

<./head>

External style sheet(In an external css file.)[to create style on separate page and just linking the file in head of the current page]

<head><link rel=“stylesheet” type=“text/css” href=“one.css”/>

one.css //external file

h1{color:red;}

p{margin-left:20px}


To leran more about the css do visit the w3school for beginners

https://www.w3schools.com/css/default.asp

JAVASCRIPT

NOTHING RELATED TO “JAVA”

Javascript is a sequence of statements to be executed by the browser.

Javascript is case sensitive.

Javascript statements

       document.write(“hello”);//semicolon

                                            is optional.


                Example to use javascript to write text on a web page
u<html>
u<body>
u<script type=“text/javascript”>
udocument.write(“hello world”);
u</script>
u</body>
u</html>
       to  leran more about the javascript do visit w3school

 PHP

¡PHP is a server-side scripting language, mainly used for web development but also used as a general-purpose programming language. Object-Oriented Programming (PHP OOP),  is a type of programming language principle added to php5, that helps in building complex, reusable web applications.
Characteristics of PHP
uFamiliarity.
u
u Simplicity.
u
u Efficiency.
u
u Security.

u PHP is an acronym for "PHP: Hypertext Preprocessor
u
u PHP is a widely-used, open source scripting language
u
u PHP scripts are executed on the server
u
u PHP is no case sensitive.
u
u PHP files have extension ".php"


Differentiate PHP code
uDefault tags.
<?php print “welcome to the world of PHP;”?>
 Most commonly used

uShort tags.
<? print “Welcome to the world of PHP!”;?>
Less Used.
u
uScript tags.
<script language="php">

      $print = print ("hello");

       </script>

Variable declaration in PHP
u   A variable starts with the $ sign, followed by the name of the variable
u   A variable name must start with a letter or the underscore     character
u   A variable name cannot start with a number
u   A variable name can only contain alpha-numeric characters and   underscores (A-z, 0-9, and _ )
u   Variable names are case-sensitive ($age and $AGE are two different   variables)

Datatypes
u String
u Integer
u Float (floating point numbers - also called double)
u Boolean
u Array
u Object
u NULL 

<?php
$x = 5985;
var dump($x);
?>

Echo and print

u  In PHP there are two basic ways to get output: echo and print.
u  echo and print are more or less the same.
u  echo has no return value while print has a return value of 1 so it can   be used in expressions.
u  echo can take multiple parameters (although such usage is rare)   while print can take one argument.

u  echo is marginally faster than print.


u  The echo statement can be used with or without parentheses: echo or echo()
u example

  <?php
  echo "<h2>PHP is Fun!</h2>";
  echo "Hello world!<br>";
  echo "I'm about to learn PHP!<br>";
  echo "This ", "string ", "was ", "made ", "with multiple   parameters.";
  ?>

u  The print statement can be used with or without parentheses: print or print()
uExample

  <?php
  print "<h2>PHP is Fun!</h2>";
  print "Hello world!<br>";
  print "I'm about to learn PHP!";
  ?>



Functions

uA function is a section of code with a specific purpose that assigned a   unique name.
u  A function is a block of statements that can be used repeatedly in a   program.
u  A function will not execute immediately when a page loads.
u

u  A function will be executed by a call to the function.

function functionName()
{
code to be executed;

<?php

function writeMsg()

{

  echo "Hello world!";

}


writeMsg(); // call the function

?>


So in php there are various things to learn. I don't stop it here. Actually this post i have added to let know the beginners what is there in web-development.

Friday, June 12, 2020

Exit Pop up

Exit Pop up on leaving the page


here i'll give the source code for the exit pop up in a page.When a visitor leaves a page we have to show them the pop up message this is really a simple technique to learn on.
the html code will look like this:
    <div id="popup" class="popup__wrapper">
      <div class="popup__container">
        <a class="close" onclick="pop_up_close()">×</a>

        <img class="pop_image" src="image.php">

        <div class="pop_cont_right">
          <h1 class="popup__title">leaving</h1><hr>
          <p class="popup_descripton">Did you know that today you can receive up to a 30% discount                         on  Oxford writing pads? ideal to write all your notes on the notebook test</p>
          <a class="btn btn-default popup_btn">Iwant discount</a>
          <p class="pop_text_close" ><u>some text under the btn</u></p>
        </div>
    
      </div>
    </div>
next we can add some css to this to make it look good:
#popup {
  display: none;
}

.popup__wrapper {
  background: rgba(0, 0, 0, .75);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
  text-align: center;
}

.popup__container {
position: relative;
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;

  margin: 150px auto;
  max-width: 55%;
  padding: 20px;
  /*width: 500px;*/
  height: 400px;
  border-radius: 3px;
  overflow: hidden;
}

.popup__title {
  font-size: 26px;
  margin-bottom: 15px;
}
#popup .close {
  position: absolute;
  /*top: 20px;
  right: 30px;*/
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
#popup .pop_image{
    width: 40%;
    height: -webkit-fill-available;
    float: left;
    cursor: pointer;
}
.pop_cont_right{
width: 60%;
    height: -webkit-fill-available;
    float: left;
    padding-left: 2%;
}
.popup_btn{
  margin-top: 10%;
background-color: #ff7200;
  font-weight: bold;
  color: #fff;
  padding: 15px 30px;

}
.popup_btn:hover{
background-color: #ff7200 !important;
  color: #fff !important;
}
.pop_text_close{
font-size: 11px;
margin-top: 11px;
cursor: pointer;
}
@media (max-width: 780px){
 .popup__container {
  height: 365px;
  max-width: 65%;
  }
  .popup__title{
  font-size: 20px;

  }
  .popup_descripton{
  font-size: 12px;
  }
 }
 @media (max-width: 440px){
 .popup__container {
  height: 270px;
  max-width: 70%;
  }
  .popup__title{
  font-size: 18px;
    margin-bottom: 0px;

  }
  .popup_descripton{
  font-size: 10px;
  }
  #popup .close{
  font-size: 23px;
  }
  #popup hr{
  margin-top: 0;
  margin-bottom: 0;
  }
 }
now the design is over and we want to trigger the pop up when the user takes his cursor near the tabs on top

<script>
$(document).ready(function(){
  document.addEventListener("mouseout", onMouseOut);
 
});

var start = new Date();
//we use this for checking the time to execute the popup like after 3 or 4 seconds of the page load initialize the popup

  function onMouseOut(event) {
 
 
    var end = new Date();
    var secondsOpen = Math.floor((end - start) / 1000);
       //alert(secondsOpen); 
   
    if (
      event.clientY < 50 &&
      event.relatedTarget == null &&
      secondsOpen > 3 &&
      event.target.nodeName.toLowerCase() !== 'select') {
       
      // Remove this event listener
      document.removeEventListener("mouseout", onMouseOut);

      // Show the popup
      document.getElementById("popup").style.display = "block";
      
       
      
    }
}
</script>

the output will look something like the following

Complete web-development for beginners

Personal Home Page-PHP When we talk about php we should know where we use the php and what is the purpose of it. The php we use mainly for t...