Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Monday, April 23, 2018

Create tables dynamically from user input using PHP

In this tutorial we are going to learn about how to generate table columns and rows dynamically from user input. 

Very simple code generate dynamic table.


Here is the code.

PHP code get requested number of columns and rows through loops and then simply display the table.

You always can make it more attractive by adding CSS styles.   



<?php
 
$createtable = '';
if ($_POST){

        $createtable .= '<table border="1">';
for ($i = 0; $i < $_POST['line']; $i++) {

$createtable .= '<tr>';
for ($j = 0; $j < $_POST['colunn']; $j++) {

$createtable .= '<td width="50">&nbsp;</td>';
}

$createtable .= '</tr>';
}

$createtable .= '</table>';
}

?>

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

<table border="0" width="200">

<tr>
<td width="80"><label>Column:</label></td>
<td width="120"><input type="text" name="colunn"></td>
</tr>

<tr>
<td><label>Line:</label></td>
<td><input type="text" name="line"></td>
</tr>

<tr>
<td colspan="2" align="right">
<input type="submit" value="Create Table">
</td>
</tr>

</table>

</form>

<?php

echo $createtable;

 ?>



For any queries or any new code requests comment below in the comment section.

Sunday, April 22, 2018

How to get URL parameters using JavaScript?

In this tutorial we are going to show you how to parse a URL and get values from the URL that you are passed.  

We will be using the JavaScript's built in function split() which splits the string from a separator which is passed as a parameter to this function. The result is stored as an array and we will be using it multiple times since we want to split data into key value pairs, as the server generally processes it. 

Just have a look at the following simple code.



<html>
<head>
<title>PHPJavascript.com</title>
</head>
<script>

var URL = "http://www.phpjavascript.com?firstValue=name&secondValue=email";

var query = URL.split('?')[1].split('&');

query.forEach(function(key) {
  var pair = key.split('=');
  alert(pair[0] + '=' + pair[1]);
});

</script>
</html>


URL will be split into parts based on the type of separators you are given in the function.
In this example we gave ('?', '&')

In forEach loop we are checking for the key and value pairs.
Those should be 

key1 = firstValue
value1 = name
key2 = secondValue
value2 = email

We are alerting the result that generated here.

For any queries please comment in the bellow comment section.
For more interesting and useful code snippets please follow our blog.

Thursday, April 19, 2018

Simple JavaScript code to design calculator

For creating a basic calculator in JavaScript, we use table structure, input type button, and JavaScript functions.


  • Input type button use is to take input from the user.
  • The table structure use is to create calculator structure.
  • Functions to evaluate the data.



Three simple functions to process all data

Script

1. element()
Which is used to read values from each button

function element(val){
document.getElementById('result').value+=val;
}


2. solve()
This function performs all arithmetic operations like(+,-,/,*)

function solve(){
var value1= document.getElementById('result').value;
let res = eval(value1);
document.getElementById('result').value=res;
}


3. clearElement()
Which is used to clear input value in the calculator 

function element(val){
document.getElementById('result').value+=val;
}

HTML


<body>
<div id='wrap'>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result" readonly></td>
<td><input type="button" value="C"  onClick="clearElement()"></td>
</tr>
<tr>
<td><input type="button" value="1" onClick="element('1')"></td>
<td><input type="button" value="2" onClick="element('2')"></td>
<td><input type="button" value="3" onClick="element('3')"></td>
<td><input type="button" value="+" onClick="element('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="element('4')"></td>
<td><input type="button" value="5" onClick="element('5')"></td>
<td><input type="button" value="6" onClick="element('6')"></td>
<td><input type="button" value="-" onClick="element('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="element('7')"></td>
<td><input type="button" value="8" onClick="element('8')"></td>
<td><input type="button" value="9" onClick="element('9')"></td>
<td><input type="button" value="/" onClick="element('/')"></td>
</tr>
<tr>
<td><input type="button" value="*" onClick="element('*')"></td>
<td><input type="button" value="0" onClick="element('0')"></td>
<td><input type="button" value="." onClick="element('.')"></td>
<td><input type="button" value="=" onClick="solve()"></td>
</tr>
</table>
</div>
</body>

CSS


<style type="text/css">
body,html{
matgin:0px;
}
input[type="button"]{
border:none;
width:100%;
outline: none;
}
#wrap
{
margin:10%;
}
</style>



Tuesday, April 17, 2018

Generating path between start and end points through way points using google map API

In this article we explaining about how to dynamically generate a path between multiple points(start, end and way points) by using google map direction API.

Here is the simplest way of doing it, we explain it step by step.

CSS

<style>
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 70%;
        height: 100%;
      }
      #right-panel {
        margin: 20px;
        border-width: 2px;
        width: 20%;
        height: 400px;
        float: left;
        text-align: left;
        padding-top: 0;
      }
      #directions-panel {
        margin-top: 10px;
        background-color: #23b0ff;
        padding: 10px;
        overflow: scroll;
        height: 174px;
      }
    </style>

Script

<script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);

        document.getElementById('submit').addEventListener('click', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var waypts = [];
        var checkboxArray = document.getElementById('waypoints');
        for (var i = 0; i < checkboxArray.length; i++) {
          if (checkboxArray.options[i].selected) {
            waypts.push({
              location: checkboxArray[i].value,
              stopover: true
            });
          }
        }

        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions-panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
                  '</b><br>';
              summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
              summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
              summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
            }
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
API
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

Here is the procedure to create new API key
Body
<div id="map"></div>
<a href ='http://www.phpjavascript.com/2018/02/how-to-add-google-map-to-website-using.html'>MAP</a>
    <div id="right-panel">

    <div>

    <b>Start:</b>

    <select id="start">

      <option value="Hyderabad">Hyderabad</option>

      <option value="Banglore">Banglore</option>

      <option value="Delhi">Delhi</option>

      <option value="Pune">Pune</option>

    </select>

    <br>

    <b>Waypoints:</b> <br>

    <i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>

    <select multiple id="waypoints">

      <option value="Delhi">Delhi</option>

      <option value="Banglore">Banglore</option>

      <option value="Chenai">Chenai</option>

      <option value="Hyderabad">Hyderabad</option>

      <option value="Tripura">Tripura</option>

      <option value="Varanasi">Varanasi</option>

    </select>

    <br>

    <b>End:</b>

    <select id="end">

      <option value="Chenai">Chenai</option>

      <option value="Kolkata">Kolkata</option>

      <option value="Mumbai">Mumbai</option>

      <option value="Rajasthan">Rajasthan</option>

    </select>

    <br>

      <input type="submit" id="submit">

    </div>

    <div id="directions-panel"></div>

    </div>

Result


Saturday, April 14, 2018

How to draw a path between two marker points?

In this tutorial, we’ll be learning about how to draws a route between two points. We’ll be using Google Maps Directions API in our application.

Create a new Google Map API Key from the API console using the steps demonstrated in this tutorial.

CSS

You can define map height and width under #map section 
Add this code in your head section of the html file

    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

Script


<script>

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10, 
          center: {lat: 17.3483, lng: 78.3915}, //Default location to show on the map
          mapTypeId: 'terrain'
        });

       //Two coordinates to draw a path
        var flightPlanCoordinates = [
          {lat: 17.4483, lng:  78.3915},
          {lat: 17.291, lng: 78.821}
        ];

        //Draw a simple Polyline
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>


Use your API key here, that you created in the google console.
If you are not created follow this link to create, it's a simple process.

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

Body


<body>
      <div id='map'>
</body>

 Result




More Posts

FOLLOW