How to list all files in folder? - javascript

So I have this page I'm working on and I have a directory named 'products' in the same directory where index.html is. I'm trying to create a script that will count all the jpg files in the 'products' folder and then create an img element with each of those. any ideas of how i can do this?

This can only be done in a server environment or using something that simulates a server environment on your local computer, like MAMP/WAMP or Node. Javascript cannot access local folder contents in that manner. It can get and insert local content like images, videos, or Javascript/CSS files, but that's about the limit of what it can do.
This is for security reasons. Imagine opening someone else's Javascript file on your computer and it runs a script to erase all the files in your C drive.

If you want do this on server side then use a PHP and create your own code like this one:
// allimg.php
<?php
$dir = "path/products/";
$imgs = glob($dir."*.jpg");
foreach($imgs as $image)
{
echo '<img src="'.$image.'">'; // or <span>$image</span>
}
?>
And HTML index.html File to view it correctly.
<html>
<head>
<title>Get All Images</title>
</head>
<body>
<?php include 'allimg.php'; ?>
</body>
</html>
All modern browsers'll refuse you attempting show a local folders, files because of protection rules.

Related

index.php vs index.html [duplicate]

This question already has answers here:
when to use index.php instead of index.html
(10 answers)
Closed 3 years ago.
I am not understanding when my main website page should be index.php and not index.html and what's the difference between the two.
And in case if it's index.php, how to manage with the javascipt code.
Thank you.
my main website page should be index.php and not index.html
In a simple web server configuration, if you request a URL which maps onto a directory, then the server will look inside that for an index document.
It will do this by comparing the files in the directory to a list of possible index document names which often include index.html and index.php.
It checks them in the order of its list and stops when it finds a match.
Adjacent to this, such servers are typically configured to serve .html files as static files and to execute .php files as PHP and serve the result.
And in case if it's index.php how to manage with the javascipt code.
Generating HTML from PHP instead of a static file has absolutely no bearing on how client-side JavaScript is managed.
If you're talking about server-side JS, then you probably don't want to be using PHP at all.
index.extension is the main trigger file which can be .html, .php or other extensions.
in case of server end programming or you are using PHP language then trigger file should be index.php while for only html content you can go with index.html
Regarding, adding javascript in index.php file, it could be like
<?php
echo "I am here in PHP code";
?>
<script>
alert("I am here in javascript");
console.log("here in console");
</script>
<?php
echo "I am here ending code";
?>

Why won't my .html file connect to .js file?

I want to connect my .html to .js. I'm trying to run this simple program but it's not working. Below is the screenshot of my file path and files I'm working with.
Here's map.html:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<script type="javascript" src="map.js"></script>
</html>
Here's map.js:
document.write("testing");
The problem is below. How can I render the .js file along with the .html file?
Here's views.py:
def map(request):
return render(request, 'personal/map.html')
A common CMS convention is to save JavaScript files in a static folder.
You save anything that you don't want your template engine messing with there: images, javascript, css, etc.
It looks like you may need to save map.js at this path:
mysite/personal/static/personal/js/map.js
After that, you'll need to update you script link in your HTML to something like:
<script src="static/js/map.js">
The src path here isn't relative to where you store the file on your computer, but to the URI that your web server associates with it.
Depending on how you've set things up, you'll need some portion of the new path.
Django has a few ways of linking to static resources, but I'm not familiar enough with the platform to tell you which option you should use.

Is it not feasible to make PHP run on .js pages?

I'm curious about passing PHP output to Javascript. Two things specifically:
I'm assuming this can be done safely using script tags on a .php page. Is there any reason not to?
Can you make PHP run on .js pages? What configuration changes would be required? And again, would there be a reason not to?
I'm assuming this can be done safely using script tags on a .php page. Is there any reason not to?
Yes. No reason not to.
Can you make PHP run on .js pages? What configuration changes would be required? And again, would there be a reason not to?
Yes, you would have to configure your webserver to use the PHP module for the .js suffix. On nginx you might add a location line for files ending in .js:-
location ~ \.js$
{
}
On Apache you'd do something like:-
AddType application/x-httpd-php .php .js
One reason you might not want to do this, is that any static JS files would go through the PHP module and that would cause additional overhead. Another option would be to reference the PHP file in the HTML script tags eg:-
<script src="myfile.php"></script>
and then make sure your PHP returns its output with the correct content-type eg:-
header('Content-Type: application/javascript');
You're right on both counts.
You can output dynamic content (PHP) in a <script> tag on a .php page
You can output dynamic content (PHP) in an all-javascript file, though the extension would still be .php
Example 1
<script type="text/javascript">
var myobject = {
data: '<?php echo $myPHPvariable; ?>';
};
// or better yet:
var myBetterObject = <?php echo json_encode($myPhpObject); ?>;
function foo () { ... }
</script>
Example 2
Not recommended
<?php
// This is an all-javascript file but the extension ends with .php
header('Content-Type: application/javascript');
?>
var myobject = {
data: '<?php echo $myPHPvariable; ?>';
};
function foo () { ... }
Then you include that file in your HTML document with:
<script type="text/javascript" src="/custom_javascript.php"></script>
It should definitely end with .php, and thankfully the web browser knows it is JavaScript by the type="text/javascript" part and because your PHP script outputs the right Content-Type header.
The first solution is simpler : declare some JS variables in the output HTML, they can be constant or generated by the PHP code:
<script>
var my_variable = '<?php echo($my_variable); ?>';
</script>
Then you can use this variable in your Javascript code.
The .js files should be static to allow the browser to cache them, so they won't be loaded every time the user loads a page. By generating .js files on the fly with PHP, you may have problems with browsers using cached .js instead of the expected generated file. For example, if your variable contains dynamic content as the last news from your website, a datetime, etc.
So, yes you can do it, but you'll have to prevent the browser to cache the file, increasing the bandwidth usage or expect unexpected behaviours with browsers loading cached .js files. There's no benefit in using this way.

How do I link JS external files outside of my PHP project root directory?

On my site I have my resources folder outside of the root, for example:
/var/www/html/ is the root directory
/var/www/resources/
I currently have a config file that sets the location of the library so I can include it with php like so:
defined("LIBRARY_PATH")
or
define("LIBRARY_PATH", realpath(dirname(__FILE__) . '/library'));
which works perfectly when I use:
<?php include_once(LIBRARY_PATH . "/file.php"); ?>
but it doesn't work when trying to add Javascript files:
e.g.
<script src="../resources/library/js/test.js"></script>
links to 'www.website.com/resources/library/js/common.js'
or
<script src="<?php echo LIBRARY_PATH; ?>/js/test.js"></script>
links to 'www.website.com/var/www/resources/library/js/test.js'
neither of which work.
Any suggestions on how I can do this without having the js files in or above the root?
Your JavaScript files have to be accessible to the browser because they are executed by the browser and not by the server.
This requires that they have a URL.
Putting the files under the webroot is the standard way to give a static file a URL.
Alternatively, you could write a program (e.g. in PHP) that will read the file and then output it's content to the browser. This is more complicated and makes dealing with cache control headers more fiddly and is not recommended.
Assuming you understand what you're doing and security implications of that!..
You create the linkjs.php script that takes the relative path to the script (from some root dir, perhaps /var/www/resource/js) as a parameter, like:
<script src="/linkjs.php?p=test.js">
In your PHP script you resolve the full file path, check that it's indeed a file under the root dir (to protect against ../ in the parameter), that it's readable by you PHP user, read the content and output it into the response. Don't forget to set content type to text/javascript of course.
Ideally, you should also provide proper caching headers based on the source file modification time, but that is a topic in itself. See the guidelines in other SO questions about proper caching headers for dynamic content.
The upside is that you can do on-the-fly script minification/combining/wrapping/substitutions if you like/need.

PHP code-igniter

I'm having troubles calling my external js files from my views php pages. The js files are saved in the "resources" folder in the root folder i.e "root/resources/scripts/myfile.js" just like the "root/application" and the "root/system" folder.
so in one of my php files in the views folder i am using this code:
<script type="text/javascript"
src="<?php echo base_url();?>resources/scripts/welcome.js">
and this php file is located in "root/application/views/welcome.php"
and still my page cannot link with the java script so i am stuck big time.
regards
k..
Try this:
<script src="<?= base_url('resources/scripts/myfile.js')?>"></script>
Looking at your question and the comments below your question, it seems you are using "resource" in one example and "resources" in another example.
Once fixed, view the source of the page (I use FireFox, as it makes the links clickable), search for "welcome.js". Once found, click on the link for that file. If you see javascript, it means the file is found, alternatively you will see a 404 error.
First of all check if the resource folder is available,
The java script file is available and the file naming is in the same small or capital case, and server has public permission of the file and folder.
by the way your code has missing end tag
</script>

Categories