JavaScript Query

Community Beginner ,
Mar 19, 2022 Mar 19, 2022

Copy link to clipboard

Copied

Hi everyone,

 

I just have a quick question regarding a JavaScript that I am trying to write for a gallery page for my website as I seem to be hitting a bit of a brick wall with it. Basically what I am trying to achieve is to have all of the images pre-organised by photo type into different folders on the server and when a particular button in the navigation bar gets pressed, it will look for every image in that folder, create an index of them and then create a table on the page to display the image results.

 

I've tried looking into the find and fetch functions going off some YouTube tutorials however I don't think that I used them correctly as the videos were slightly out of context for what I am trying to do and it's doing my head in. I also tried just coding the table with placeholder images into the source code and have the JavaScript replace the data but the total number of results can change. Also, I would like to include a class to the table itself so I can add in some CSS to format it a little and not be particularly worried about error messages if one of the photos gets moved or deleted from the folder or a new photo added not being listed.

 

I know it sounds pretty simple but yeah, it's kinda throwing me around a bit so if you have any advice, I'd be grateful. Cheers, Chris Gillham

TOPICS
Code

Views

1.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 20, 2022 Mar 20, 2022

Copy link to clipboard

Copied

Well, without seeing anything, it's a bit complicated to intervene...

 

Well, let's unpack it, you talk about using Javascript to parse a file, you also mention FETCH API, so what environment are you working under?

let's talk about it https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

 

you also mention the use of a TABLE on the client side, are you talking about the HTML tag https://developer.mozilla.org/fr/docs/Web/HTML/Element/table  is it about that ?

 

and finally you would like to use CSS to manage display errors ? could you specify ?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 20, 2022 Mar 20, 2022

Copy link to clipboard

Copied

quote

Hi everyone,

 

I just have a quick question regarding a JavaScript that I am trying to write for a gallery page for my website as I seem to be hitting a bit of a brick wall with it. Basically what I am trying to achieve is to have all of the images pre-organised by photo type into different folders on the server and when a particular button in the navigation bar gets pressed, it will look for every image in that folder, create an index of them and then create a table on the page to display the image results.


By @Christopher J Gillham

 

Javascript alone cannot read the names of images in a folder, you will need to use a server-side language like php.

 

Depending on how many images you have you could store your image names in either a javascript array or json formatted file then use javascript to filter the array by category, then loop through the results and display the filtered images in your your table.

 

Ideally you would store all your image names and their respective category in a database then use either the Fetch API to bring back that data in json format so you can work with it in javascript OR you can use php to get and filter the data BUT php requires a page refresh each time you click on one of your category buttons, maybe not desired.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

Javascript alone cannot read the names of images in a folder, you will need to use a server-side language like php.

By @osgood_

 

well, the way that @Christopher J Gillham first ask his question let me think that he develop an app under node... so yess... Javascript alone can parse a folder

https://www.codegrepper.com/code-examples/javascript/javascript+how+to+list+all+files+from+a+folder

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote
quote

Javascript alone cannot read the names of images in a folder, you will need to use a server-side language like php.

By @osgood_

 

well, the way that @Christopher J Gillham first ask his question let me think that he develop an app under node... so yess... Javascript alone can parse a folder

https://www.codegrepper.com/code-examples/javascript/javascript+how+to+list+all+files+from+a+folder


By @B i r n o u

 

 

I seriously doubt the OP even knows what node is to be honest if they are asking this question. Nothing in the post gives me the impression that its related to node. The OP even mentions the use of tables, that doesn't indicate to me that they are a slick operator who possibly might be using node. I can't remember a post in this forum which relates to anything related to node, there's always a first l guess.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

If the OP mentions JavaScript to read a directory, he certainly is not talking about PHP.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

If the OP mentions JavaScript to read a directory, he certainly is not talking about PHP.


By @BenPleysier

 

Then read the post before assuming something has been asked relating to a specific workflow. The OP doesn't have a clue what they are doing let alone mentioning javascript reading a directory. I offered some advice   based on what l thought they might be able to cope with not something they probably won't be able to cope with. I personally don't see anything in the OPs post which relates to them using node which another poster thinks they have seen, maybe they had been on a long night out prior to reading the post.

 

This is a typical post around this forum, someone with little experience, who has not responded so how important can it be and probably won't respond given the complexity of what they need to if they have little knowledge.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

I seriously doubt the OP even knows what node is to be honest if they are asking this question. Nothing in the post gives me the impression that its related to node. The OP even mentions the use of tables,

By @osgood_

 

at first reading, I had thought like you, so in doubt I asked the question to propose de TABLE (HTML),

 

but

 

the fact of having recourse to FETCH API remains an approach rather often associated with PROMISE, HTML5 API, TABLES in the sense of look up table and not the HTML tag... so in fact to a pure Node spirit...


Now, the fact that the OP is not into it (remains a supposition and is not founded) but even so there is a beginning to everything... and without wanting to launch an interminable and sterile debate (we all know our positions on the subject)... I think it is a good choice

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote
quote

I seriously doubt the OP even knows what node is to be honest if they are asking this question. Nothing in the post gives me the impression that its related to node. The OP even mentions the use of tables,

By @osgood_

 

at first reading, I had thought like you, so in doubt I asked the question to propose de TABLE (HTML),

 

but

 

the fact of having recourse to FETCH API remains an approach rather often associated with PROMISE, HTML5 API, TABLES in the sense of look up table and not the HTML tag... so in fact to a pure Node 

 


By @B i r n o u

 

With all due respect the Fetch API is not exclusive to node.

 

If the OP wants to use node use node. My reply was based on what l read into the post, a developer that probably has enough knowledge to be dangerous. It would concern me if they were actually using node and asking for help with a relatively simple process such as filtering a few images.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

With all due respect the Fetch API is not exclusive to node.

By @osgood_

 

Please, where, or when did I said that it  was exclusive ?..

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote
quote

With all due respect the Fetch API is not exclusive to node.

By @osgood_

 

Please, where, or when did I said that it  was exclusive ?..


By @B i r n o u

 

The mere mention of Fetch by the OP seemed to indicate to you that somehow node was involved, other than that I dont know how you arrived at node. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 20, 2022 Mar 20, 2022

Copy link to clipboard

Copied

I'm in agreement with @osgood_  and @B i r n o u.  You're attempting to build a fairly complex web app which is an advanced coder's project.  Adobe Stock would be one such example.

https://stock.adobe.com/

 

You didn't mention if other users are allowed to upload images to your site (aka a photo sharing site) or if this will be just your own collection.

 

In any case, you'll need to build a database so people can search photos by title, keywords, dates, and other criteria you specify.  Although client-side JS can be helpful in providing a better user experience, the real work will be done by server-side programming.   Which flavor depends on your hosting plan and which programming languages & databases your server supports.  

 

Next, you'll create a CRUD backend system for creating, reading, updating and deleting database content and a mini-search engine for retrieving content and populating it to site pages.  

 

This Gallery System uses PHP, MySQL, a JavaScript viewer and CSS styled HTML structure for layout.  I wouldn't use tables for layouts because they are not responsive on all devices.  Images can be displayed in <div> tags without resorting to tables.  

https://codeshack.io/gallery-system-php-mysql-js/

 

Hope that helps.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

@B i r n o u has mentioned NodeJS as the server model. @osgood_  mentioned PHP as the server model.

 

Personally I would choose NodeJS, but this is ever so difficult to realise using Dreamweaver. To start with, the required directory structure would be difficult to realise using Dreamweaver's site management. Then there is the lack of NodeJS support when coding the application. If you want to persue using NodeJS so that you can use JavaScript on both sides of an application, have a look at Wappler. Wappler makes it oh so easy, even for non-coders. Hosting NodeJS applications? Have a look at these free options, where Heroku is an outstander.

 

Then there is PHP. In contrast to NodeJS which has its own server per application, you will need an Apache and or Nginx server to host PHP. Dreamweaver makes this fairly easy with code hinting although there are better IDE's that could be better. I have already mentioned Wappler.

 

The way that you have described what you want to do, you do not need a database, just a well ordened directory strcture.

 

As a side note, this reply will get the usual negative feedback. Please be reminded that I use Wappler and NodeJS for all of my latest projects. Wappler produces industry standard code, meaning HTML, CSS, JS and, if PHP is the server model, PHP. If you no longer use Wappler, the code can be maintained using any code editor albeit with loss of visual aids.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

 

As a side note, this reply will get the usual negative feedback. Please be reminded that I use Wappler and NodeJS for all of my latest projects. Wappler produces industry standard code, meaning HTML, CSS, JS and, if PHP is the server model, PHP. If you no longer use Wappler, the code can be maintained using any code editor albeit with loss of visual aids.


By @BenPleysie


Wappler does not produce industry standard code. There's nothing anywhere that anyone can find relating to AP Connect within the industry apart from the Wappler website and a handful of youtube channels. The program is aimed at a small demographic of users who are mainly wannabe app creators or retired web developers. If Wappler was what you say it is industry standard that's not reflective in the amount of people using it. It hasnt gained much traction in what is it 4 years now since release. Yes it has a small base of loyal users and l suspect a rapid turn over of users coming and going.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

So, are you saying that when you code a website using your CSS, JS and PHP, it is not industry standard? After all, it has just one user!

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

So, are you saying that when you code a website using your CSS, JS and PHP, it is not industry standard? After all, it has just one user!


By @BenPleysier

 

Nope, what Im saying is when I code a website I use recognised workflows such as css, js, php even node if you care, vue, react. I dont use niche workflows which are undocumented and unrecognised like AP Connect. 

 

If you could point me to a job website in need of AP Connect developers then please do so. I could point you at a large number of jobs which require Vue, React developers because they have been adopted as industry standard not Ap Connect perhaps on account it isnt well documented and neither would the team at Wappler want it to be as it negates their business model.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

If App Connect is your only criticism to using Wappler, then do not use it. You are better off using VueJS or similar with VS Code.And if you host the application on Heroku, the whole project will cost you nothing for ever.

 

In the meantime, I along with many others will continue using Wappler complete with App Connect.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

If App Connect is your only criticism to using Wappler, then do not use it. You are better off using VueJS or similar with VS Code.And if you host the application on Heroku, the whole project will cost you nothing for ever.

 

In the meantime, I along with many others will continue using Wappler complete with App Connect.


By @BenPleysier

 

Sorry I didnt see your reply initially.

 

App Connect isnt my only criticism of using Wappler but its a large part of it. And no I dont use it thanks and have no intention to do so at the moment. Perhaps if I reach 80 and am still dragging my feet about an exit strategy I may well resort to such measures, who knows where my mind will be at that point.

 

And just for the record I'm not intentionally trying to paint Wappler as all bad. Its a very, very good option for certain users, lacking in coding experience, even they say that's the target market for their product.  The majority of those users I personally dont think would be those who could be classified as professional web-developers. What they use I don't care because I dont see most of them as being long term career web-developers. They have a goal, to built an app or two, most will undoubtedly fail, a personal website and they will never have a necessity to do it again.  

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

 AP Connect within the industry apart from the Wappler website

By @osgood_

 

just curious, does App Connect exclusive to wrappler ?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

According to @Teodor and George, App Connect is open source, anyone can use it similar to VueJS etc.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

this is what I thought. in fact, we are talking about a concept that was introduced, I believe, at the time of websphere, to allow each application and device to exchange informations.


please, would it be possible to see the aspect of this structure?... I personally use a group of configuration files, which store and structure applications, and I could certainly learn by deconstructing the one from wrappler (If Georges doesn't mind of course... 🙂 )

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 22, 2022 Mar 22, 2022

Copy link to clipboard

Copied

@B i r n o u , Have a look at my site, in paricular

https://pleysier.com.au/dmxAppConnect/dmxAppConnect.js

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote
quote

 AP Connect within the industry apart from the Wappler website

By @osgood_

 

just curious, does App Connect exclusive to wrappler ?


By @B i r n o u

 

No its not exclusive to Wappler but it doesnt have any dedictated website resources like Vue or React, Angular etc that actually goes through how you would apply it. Infact the word is the Wappler documentation isnt that clear or up-to-date for those using Wappler let alone if you want to try it as an open source option.

 

I have explored using it as 'open source' and yes it does the job quite nicely, not comaparable to Vue or React though, in my opinion. If the open source angle were to be given more prominence and better documentation to accompany, it would defeat a lot of the Wappler objectives because you don't really need Wappler to deploy any of their plugin, if you know what you are doing.

 

Wappler is a good option for certain users, who I have zero in common with as coder, but to say its industry standard I would take issue with because hardly anyone in the industry uses it or the niche workflow, that's a fact.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

I would love to know what your definition is of industry standard.

 

As far as I know, the industry standard definition of industry standard is very plain and understandable for all concerned.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

quote

I would love to know what your definition is of industry standard.

 


By @BenPleysier

 

Refer to my many other responses when you've repeated the same question.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines