Skip to main content
C
Christopher J Gillham
Participant
March 20, 2022
Question

JavaScript Query

  • March 20, 2022
  • 5 replies
  • 3715 views

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

This topic has been closed for replies.

5 replies

C
Christopher J GillhamAuthor
Participant
March 22, 2022

Hi everyone,

I didn't realise the direction that this conversation would take however there are a few things that I can clarify for the benefit of it. The first being that I am a film and photo producer in Australia so I think that basically means that all of the responses have come in the middle of the night and following up on them is not worth literally losing sleep over when they appear to be an argument about someone else's experience as I have come to know that to lead to not having a job and not getting one after just as a piece of friendly advice.

 

Now that's been said, and sorry if I hurt any feelings, I have included a couple of snippets of code that I managed to dig up that allows me to dynamically create a table in JavaScript and format it with CSS and HTML code. The problem that I have now is first separating the numbers into different cells, which is possibly unneccesary, and replacing the numbers with images that I believe that I may be able to achieve by placing them inside div elements generated in the same fashion as the table with the exception that if the JavaScript were able to look for a file extension inside the folders and create a div element for each one it finds in that location and then populate it on the page, I may be able to use the CSS to format those as well and the only thing that matter inside the folders is making sure all of the photos have the right file extension.

 

I did come across a snippet of code for Node.js on the web but unfortunately it didn't want to work with the JavaScript I'm using so I don't really want to try and learn Node.js right now just for that, maybe at a later date. So now that I feel bad for asking for help again after slapping a few wrists in the first paragraph, I'll get it over with and ask anyone who wants to answer constructively which JavaScript method/s would you reccommend that I look into to attempt this? Thanks again.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    March 22, 2022
    quote

    The first being that I am a film and photo producer in Australia


    By @Christopher J Gillham

     

    Close to Grindelwald; great place for a holiday.

     

    Wikipedia says:

    Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

     

    In other words, you do not learn NodeJS, you learn JavaScript. That is why NodeJS is such a good choice if you want to stay with JavaScript for the back end.

     

    If you want to see a YouTube video on the subject - the only one that I could find.

    https://www.youtube.com/watch?v=H9o3ej8DB-k

     

    Another possible method is to use PHP as the server model. That means learning PHP. But there will be many more examples of what you want to do.

     

    Once again, if you want to stay with JavaScript, then NodeJS is your only answer. And I can't emphasise enough, that Wappler will be your greatest friend. 

     

    Carn the Pies

     

     

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      B i r n o u
      B i r n o u
      Legend
      March 22, 2022

      it goes without saying that one may not be fond of this approach... whatever... I find the breakdown of the code really well structured and so logical... each element playing its own role in an autonomous and almost independent way... at least interchangeable way.
      moreover the solution carried by Pa Wa, incrementing BS is well seen to demonstrate this scalability as simply implemented... thanks @BenPleysier 

        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        March 21, 2022

        @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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          O
          osgood_
          Legend
          March 21, 2022
          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.

           

          BenPleysier
          Community Expert
          BenPleysierCommunity Expert
          Community Expert
          March 21, 2022

          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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          March 20, 2022

          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— Product User & Community Expert
          O
          osgood_
          Legend
          March 20, 2022
          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.

            B i r n o u
            B i r n o u
            Legend
            March 21, 2022
            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

              O
              osgood_
              Legend
              March 21, 2022
              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.

              B i r n o u
              B i r n o u
              Legend
              March 20, 2022

              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 ?

                Terms & ConditionsAccessibility statement
                Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices