PHP JavaScript: April 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"> </td>';

}

$createtable .= '</tr>';

}

$createtable .= '</table>';

}

<tr>

<td width="80"><label>Column:</label></td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

<?php

echo $createtable;

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

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>

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.

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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

CSS

body,html{

matgin:0px;

}

input[type="button"]{

border:none;

width:100%;

outline: none;

}

#wrap

{

margin:10%;

}

</style>

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

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

http://www.phpjavascript.com/2018/02/how-to-add-google-map-to-website-using.html

Body

<div>

<b>Start:</b>

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

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

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

</select>

<br>

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

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

<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>

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

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

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

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

</select>

<br>

</div>

</div>

Result

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.

http://www.phpjavascript.com/search?q=maps

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

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.

http://www.phpjavascript.com/search?q=maps

<script async defer

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

</script>

Body

PHP JavaScript

Create tables dynamically from user input using PHP

How to get URL parameters using JavaScript?

Simple JavaScript code to design calculator

Script

HTML

CSS

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

CSS

Script

Result

How to draw a path between two marker points?

CSS

Script

Body

Result

Labels

Popular Posts