I am trying to read a csv file in a ftp server using php .
Below is my code:-
maps.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = [];
var temp = [];
<?php
$data = array();
$file = fopen("ftp://b7_15716007:xxxxxx#ftp.byethost7.com/htdocs/data.csv","r");
while(!feof($file))
{
$data = fgetcsv($file);
?>
temp.push("<?php echo $data[0]; ?>");
temp.push("<?php echo $data[1]; ?>");
temp.push("<?php echo $data[2]; ?>");
temp.push("<?php echo $data[3]; ?>");
citymap.push(temp);
console.log(citymap);
temp = [];
<?php
}
fclose($file);
?>
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
var fillcolor=[];
fillcolor[0]='#FF0000';fillcolor[1]='#FFFF00'; fillcolor[2]='#FF00FF'; fillcolor[3]='#00FF00';
var loop=0;
for (i = 0; i < citymap.length; i++) {
var populationOptions = {
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: fillcolor[loop],
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(citymap[i][1], citymap[i][2]),
radius: Math.sqrt(citymap[i][3]) * 100000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
// cityCircle = new google.maps.Circle(populationOptions1);
loop=loop+1;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
This code has to read the values in csv and represent them in a google map api .
But the code is not working .
Can anyone please help me fix this .
The link for the csv is
Even after passing the url with authentication I dont get the map being displayed .
You cannot just open password protected ftp resource like that.. You must use password for entering there.
Please, try to use some authentication functions like:
// set up basic connection
$conn_id = ftp_connect($ftp_server);
// login with username and password
$login_result = ftp_login($conn_id, $ftp_user_name, $ftp_user_pass);
// try to download $server_file and save to $local_file
if (ftp_get($conn_id, $local_file, $server_file, FTP_BINARY)) {
echo "Successfully written to $local_file\n";
} else {
echo "There was a problem\n";
}
Refer to: http://php.net/manual/en/function.ftp-get.php for more information.
Related
I hope I am asking this the correct way and thanks in advance for any advice! I have been trying to utilize this tutorial for a part on my own site:
https://developers.google.com/maps/documentation/javascript/mysql-to-maps
After trying many versions of my own code unsuccessfully, I decided to go ahead and step by step walk through the tutorial - even creating a new MYSQL DB exactly like in the tutorial...
In the tutorial example, they use an actual .xml file to read the data from:
// Change this depending on the name of your PHP or XML file
downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
However, just like the commented line says above the code "PHP File" - meaning you could use a PHP file there instead of an .xml file which would then dynamically generate the XML code based on the DB query.
They show 3 different ways to get the XML code from the DB and I have tried all 3 ways with the same exact results.
When I run the index.html page I get just the map showing up with no markers at all
If I run just the php file that generates the XML code, nothing shows up in the browser (just a blank white page) -- HOWEVER -- when I view the page source, it shows me the XML perfectly!
If I take that generated XML from my PHP file and copy/paste it into an .xml file and then call that .xml file in the downloadurl function, it all works perfectly!
So, therein lies my question.
What piece am I missing that would allow me to use the PHP file to dynamically generate the XML versus needing a separate XML file in my directory too.
The code I am using is the same exact code they have in the tutorial page.
Thanks in advance!!
EDIT - here are the 2 php pages. The convert-xml.php is for generating the info from MYSQL db. It's, getting the info from the db because when I view source it shows the xml tree like it should be. It;'s just not writing it to the browser or working in the downloadurl function to display the markers on the map.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using MySQL and PHP with Google Maps</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('convert-xml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_IS_HERE&callback=initMap">
</script>
</body>
</html>
convert-xml.php
<?php require 'conn-info.php';?>
<?php
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$dom->preserveWhiteSpace = false
$dom->formatOutput = true;
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// connect to db
$membermap_conn = mysql_connect($membermap_server, $membermap_user, $membermap_password, $membermap_database);
if ($membermap_conn->connect_errno) {
echo "Failed to connect to MySQL: (" . $membermap_conn->connect_errno . ") " . $membermap_conn->connect_error; }
// select the db
$db_selected = mysql_select_db($membermap_database, $membermap_conn);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Pull the zip / user information out of the database.
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = #mysql_fetch_assoc($result)){
// Add to XML document node
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("id",$row['id']);
$newnode->setAttribute("name",$row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("type", $row['type']); }
echo $dom->saveXML();
?>
I am using Codeigniter and want to show progress of XML import.
but issue i am facing is
When view load, it stuck on loading (blank page) and when i can see view its shows 100% done.
my code as bellow
$i=0;
$count=sizeof($record->List);
foreach($record->List as $Item)
{
$i++;
echo "processing ".$i." of ".$count;
---processing code which takes times to process---
---processing code which takes times to process---
}
this code is in view but when i click on link to load this view, i have to wait for all process to complete and then i can see view when all process is done.
what i want is:
Show view (empty).
Then keep on printing each line as loop go.
Thanks
Here you got a example for progress bar using AJAX:
index.php
<?php
// Start the session.
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
#progress {
width: 500px;
border: 1px solid #aaa;
height: 20px;
}
#progress .bar {
background-color: #ccc;
height: 20px;
}
</style>
</head>
<body>
<div id="progress"></div>
<div id="message"></div>
<script>
var timer;
// The function to refresh the progress bar.
function refreshProgress() {
// We use Ajax again to check the progress by calling the checker script.
// Also pass the session id to read the file because the file which storing the progress is placed in a file per session.
// If the call was success, display the progress bar.
$.ajax({
url: "checker.php?file=<?php echo session_id() ?>",
success:function(data){
$("#progress").html('<div class="bar" style="width:' + data.percent + '%"></div>');
$("#message").html(data.message);
// If the process is completed, we should stop the checking process.
if (data.percent == 100) {
window.clearInterval(timer);
timer = window.setInterval(completed, 1000);
}
}
});
}
function completed() {
$("#message").html("Completed");
window.clearInterval(timer);
}
// When the document is ready
$(document).ready(function(){
// Trigger the process in web server.
$.ajax({url: "process.php"});
// Refresh the progress bar every 1 second.
timer = window.setInterval(refreshProgress, 1000);
});
</script>
</body>
</html>
checker.php
<?php
// The file has JSON type.
header('Content-Type: application/json');
// Prepare the file name from the query string.
// Don't use session_start here. Otherwise this file will be only executed after the process.php execution is done.
$file = str_replace(".", "", $_GET['file']);
$file = "tmp/" . $file . ".txt";
// Make sure the file is exist.
if (file_exists($file)) {
// Get the content and echo it.
$text = file_get_contents($file);
echo $text;
// Convert to JSON to read the status.
$obj = json_decode($text);
// If the process is finished, delete the file.
if ($obj->percent == 100) {
unlink($file);
}
} else {
echo json_encode(array("percent" => null, "message" => null));
}
process.php
<?php
// Start the session.
session_start();
// The example total processes.
$total = 20;
// The array for storing the progress.
$arr_content = array();
// Loop through process
for ($i = 1; $i <= $total; $i++) {
// Calculate the percentation
$percent = intval($i / $total * 100);
// Put the progress percentage and message to array.
$arr_content['percent'] = $percent;
$arr_content['message'] = $i . " row(s) processed.";
// Write the progress into file and serialize the PHP array into JSON format.
// The file name is the session id.
file_put_contents("tmp/" . session_id() . ".txt", json_encode($arr_content));
// Sleep one second so we can see the delay
sleep(1);
}
Just that you write it on the CI and create a tmp folder, and you point a path to it in script. Good luck!
I'm using html5 canvas to capture a signature and store it in MySQL. I've got everything in the script working except for the part that saves the signature and sends it to MySQL.
My knowledge of AJAX is none so I'm working off what I read in books, see on tutorials and get help on from here.
So in Firefox console when I click on save signature I can see the script displays the post.php file it's supposed to go to and displays a 200 ok notification but nothing happens, it doesn't post in MySQL (which doesn't surprise me as I'm sure my code is incorrect) and I don't see any errors.
What I want to accomplish is to upload the signature image to a folder on the server and save the path to the image in MySQL. Being unfamiliar with JavaScript, Jquery and Ajax I'm confused with how to get this to function.
Here is the jquery:
$(document).ready(function () {
/** Set Canvas Size **/
var canvasWidth = 400;
var canvasHeight = 75;
/** IE SUPPORT **/
var canvasDiv = document.getElementById('signaturePad');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if (typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
/** Redraw the Canvas **/
function redraw() {
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#000000";
context.lineJoin = "miter";
context.lineWidth = 2;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
/** Save Canvas **/
$("#saveSig").click(function saveSig() {
//encode URI
var sigData = encodeURIComponent(canvas.toDataURL("image/png"));
$("#imgData").html('Thank you! Your signature was saved');
var ajax = XMLHttpRequest();
ajax.open("POST", 'post.php');
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(sigData);
// $('#debug').html(sigData);
});
/** Clear Canvas **/
$('#clearSig').click(
function clearSig() {
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.clearRect(0, 0, canvas.width, canvas.height);
});
/**Draw when moving over Canvas **/
$('#signaturePad').mousemove(function (e) {
if (paint) {
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
/**Stop Drawing on Mouseup **/
$('#signaturePad').mouseup(function (e) {
paint = false;
});
/** Starting a Click **/
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
$('#signaturePad').mousedown(function (e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
});
and here is the PHP: Also I didn't write the php code below it's part of the entire signature pad so I'm sure it's not correct.
<?php
session_start();
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$session_id = $_SERVER['REMOTE_ADDR'];
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);
//echo "unencodedData".$unencodedData;
$imageName = "sign_" . rand(5,1000) . rand(1, 10) . rand(10000, 150000) . rand(1500, 100000000) . ".png";
//Set the absolute path to your folder (i.e. /usr/home/your-domain/your-folder/
$filepath = "xampp/htdocs/alpha/site7/images/" . $imageName;
$fp = fopen("$filepath", 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
//Connect to a mySQL database and store the user's information so you can link to it later
$link = mysql_connect('localhost','root', 'password') OR DIE(mysql_error);
mysql_select_db("customer", $link);
mysql_query("INSERT INTO 'signature' ('session', 'image_location') VALUES ('$session_id', '$imageName')") OR DIE(mysql_error());
mysql_close($link);
}
?>
And the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Signature Pad</title>
<!-- The Signature Pad -->
<script type ="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="signature-pad.js"></script>
</head>
<body>
<center>
<fieldset style="width: 435px">
<br/>
<br/>
<div id="signaturePad" style="border: 1px solid #ccc; height: 55px; width: 400px;"></div>
<br/>
<button id="clearSig" type="button">Clear Signature</button>
<button id="saveSig" type="button">Save Signature</button>
<div id="imgData"></div>
<div
<br/>
<br/>
</fieldset>
</center>
<div id="debug"></div>
</body>
</html>
After some head beating over this I've finally been able to discover some errors.
After signing the signature pad and pressing the save signature button I get these errors in Firebug
Warning: fopen(xampp/htdocs/alpha/site6/images/sign_42281643871777767.png): failed to open stream: No such file or directory in C:\xampp\htdocs\alpha\site6\post.php on line 20
Warning: fwrite() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\alpha\site6\post.php on line 21
Warning: fclose() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\alpha\site6\post.php on line 22
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''signatures' ('session', 'image_location') VALUES ('127.0.0.1', 'sign_42281643871' at line 1
Since I don't have any knowledge of Jquery or Ajax and how they are creating the image and attempting to post it to a folder I'm pretty much stuck at this point!
seems I'm answering my own problems, I've figured out what the fopen errors were, I wasn't using an absolute path so adding a / before the start of the path cleared up everything except for the last error of this:
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''signature' ('session', 'image_location') VALUES ('127.0.0.1', 'sign_11814198867' at line 1
Ok, Hopefully this makes a little sense. I have a changing amount of images within a folder which I use php to discover. The images that are found are then passed on to my javascript as variables for location and total number of files found in the given folder.
An array consisting of the various image locations is made and then used to create the new images that are appended to a already existing div.
The question would be how can I separate the appendChild part of the function so that it could be called after the full array had been built rather than appending every iteration. The hope in doing that would be to show a loading gif while the collection was being assembled and once that was to done append the array to the document as a whole instead of as each file is loaded.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
enter code here`<HTML>
<HEAD>
<TITLE>Use PHP in HTML files</TITLE>
<?php
$dir = "images/";
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;
$filecount = count($files);
}
uasort ( $files , function ($a, $b) {
return strnatcmp($a,$b); // or other function/code
}
);
print_r($files);
?>
<script language="javascript" type="text/javascript">
function map(id){
var photos = [];
var test = <?php echo json_encode($files); ?>;
var elements = <?php echo $filecount ?>;
for (i=0;i<=elements;i++){
photos[i] = new Array("images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];
image = document.getElementById("container").appendChild(image);
}
alert(elements);
}
</SCRIPT>
<style type="text/css">
.container {
position: absolute;
height: 664px;
width: 1024px;
left: 0;
top: 125px
}
#loadingBar {
position: absolute;
top: 30%;
left: 30%;
z-index: 100;
}
</style>
</HEAD>
<BODY>
<button id="lower_level" onclick="map(this)">Click This Confused Button</button>
<div id="container"></div>
</BODY>
</HTML>
Sorry for the hard to follow variable names. Feel free to chop up the code as much as you'd like. Just explain why things were changed! Also the php code is creating two elements that I don't understand "." and "..".
Elements "." and ".." means current and parent directories.
At the beginning of your function you can hide div:
document.getElementById("container").setAttribute("style","display:none");
and add yor loading gif.
After you function you hide your gif adn show div.
...
function map(id){
document.getElementById("container").setAttribute("style","display:none");
var photos = [];
var test = ;
var elements = ;
for (i=0;i<elements;i++){
if(test[i] '.' || test[i]'..')
continue;
photos[i] = new Array("../myProject/web/uploads/images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];
image = document.getElementById("container").appendChild(image);
}
alert(elements);
document.getElementById("container").setAttribute("style","display:block");
}
...
I am able to load a .php file into a div simply by using <?php include("file.php") ?>
The file can have php, javascript, html and plain text in it and it still works great.
I am NOT able to load the file into a Div I created dynamically with javascript if the file has script tags in it.
NOTE: I am updating the code as I make progress
index.php
The first Div works great and loads the test.php file with no issues.
<div id="phpDiv"
style="
position:absolute;
top: 50px;
left: 50px;
height: 200;
width: 300;
background-color: #CCCCCC;">
This is the phpDiv <br>
<?php include("test.php"); ?>
</div>
The Second Div created dynamically will not load the file if it has script tags in it
<script>
var javascriptDiv = document.createElement('div');
javascriptDiv.setAttribute('id', 'javascriptDiv');
javascriptDiv.style.position = 'absolute';
javascriptDiv.style.top = 350;
javascriptDiv.style.left = 50;
javascriptDiv.style.height = 200;
javascriptDiv.style.width = 300;
javascriptDiv.style.background = '#CCCCCC'; //so we can see that the DIV was created
<?php
//must have http:// in it to load php stuff
//will not load files with <script> tags
$file = file_get_contents('http://127.0.0.1/Debug/test.php');
//Trim the string and remove new lines.
$file = trim($file);
$file = str_replace("\n", "", $file);
$file = str_replace("\r", "", $file);
echo "javascriptDiv.innerHTML = \"This is the javascriptDiv <br>\"; ";
echo "javascriptDiv.innerHTML += '". $file ."';";
?>
document.body.appendChild(javascriptDiv); //Display the Window
</script>
test.php <-the file i'm trying to load
<?php echo "php works <br>"; ?>
<script> alert('javascript works'); </script>
<a> html works </a><br><br>
and extra spaces and plain text work fine as well
I would say it doesn't work because you use single quotes into your single quotes statement setting your innerHTML.
<?php echo "php works <br>"; ?>
<script> alert("javascript works"); </script>
<a> html works </a><br><br>
Edit:
You can try to strip newlines automatically like so:
// Create a stream
$opts = array(
'http'=>array(
'method'=>"GET",
'header'=>"Accept-language: en\r\n"
)
);
$context = stream_context_create($opts);
// Open the file using the HTTP headers set above
$file = file_get_contents('test.php', false, $context);
$file = str_replace( "\r\n", "", $file );
put $file into your innerHTML
Try to see this code . I was successful with it . Create your index.php code and put the Jquery file in that directory.Download it from here http://jquery.com/download/.
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<script>
var browser=navigator.userAgent;
//if (browser.lastIndexOf("Chrome")>=5)
{
alert("ok");
$("#success").load("index.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
}
</script>
</body>
</html>