Conceptual understanding of form submitting to a server-side script.
If I need a form to, upon submit, take in the user inputs, analyze them against a .json file for matches, and then "get"/fetch the correct objects from the .json.. and have those objects populate an HTML template..
Would my server-side language (ex; PHP) be what would analyze the user input and also import the .json objects in order to search through it? And then also be where the templated HTML would be created?
93 Replies
You always want to do any and all validation on the server-side. All client-side code is open and free for the users to see and can be changed by the user.
Because of this you want your validation on the back-end so the user can't make any code changes.
so POST not GET
I'm totally brand new to how this works, I'm just trying to get a 10,000ft understanding of what comes from where
Yeah, POST to the backend and as part of the endpoint you'll validate against the data you want validated the send the response to the front-end
so PHP, for example would access the .json data, run whatever logic it needs to to check for matching objects, and be able to post to the HTML?
Yep. That's a basic description of all back-end servers. Front-end sends data, back end processes it, gets something based on the data sent, then sends back the correct data.
gotcha okay, so would PHP be a good language to do what I described?
I've also been hearing a lot about Node.js
Any back-end language can do it
I don't know anything about PHP, I've never used it. I do know Node.js (b/c it's almost all the JS you learn for front-end) and Go. I'm learning C# in my bootcamp.
All of 'em can do it
oh okay, well hell I'll use node.JS then.. I already did this once in JS
If you already know JavaScript well I would suggest starting with Node, yeah
POST?
well idk.. I'm 'getting' info from the .json ultimately
from what I'm reading you're essentially asking for a search function yeah?
not posting to it
right
If you're sending data to the back end that's a POST request
GET requests have no body
gotcha, so it has to be done with GET
What? No. POST.
there was something about security I was thinking maybe the same could be done with post more securely but i guess not
they're not sending a json they're sending a search string
You're submitting a form, that's a POST
is this a form or a search bar
well its a form, but its for a search yea
so a search bar
so searching .json yea, and getting info from it
Doesn't matter what it's for, it matters what it does. It sends data to the server. That's POST
why tho, just use query strings
submit, take in the user inputs, analyze themTo me that's more than just a query string, yes?
GET signifies Idempotence you're not making changes in a search
Submit form. Analyze data
Maybe I'm not understanding what's being asked 🤷
its a searchbar.. so there's 3 inputs, parameters for the search, that correspond to object properties of objects that are housed in the .json.. When I submit.. I need the script to take in what the user has put in the inputs, and look for matches in those .json objects, and then populate an html template with matching object information
so I"m not adding any information to the .json
What's being searched for?
You could do it all on the front-end if there's no real validation needed and no database updated being done
they're job listing objects that hold properties like location, title, etc
what are these inputs tho, are they checkmarks, are they text
give me an example of a search
both
If the info can be give to the user you can do it as a front-end JSON file instead of doing a server call each time
title: senior software engineer, location: Baton Rouge, LA, fulltime: true
that can all be done in URL yeah
or client side if your json isn't huge
i know it can be done with just javascript, but I want to use forms in order to that user can user backwards and forwards in the browser and see the last thing he was on
Forms don't normally interact with the browser history
liek the last set of search results for example, instead of it just being cleared every time, which having the URL form thing helps with
you a bit lost here
this is just a simple search
you're focusing hard on the word form
the suggestion I got from another
all you need is a url like
https://www.amazon.com/s?k=charger&rh=n%3A172282%2Cp_89%3AApple&dc&ds=v1%3AbfXbAxwaj7t44lB1qATk90LGX2EWlJ2I1aLUxI1Cbok&crid=35MK2ML3ZWY05&qid=1683842801&rnid=2528832011&sprefix=charger%2Caps%2C144&ref=sr_nr_p_89_12
Amazon.com: Charger - Apple: Electronics
Online shopping from a great selection at Electronics Store.
amazon urls are ugly but you can see the sears is s?k=charger looking for a charger
and rh=n....Apple....
brand apple
all that can go on your URL and thus you can go back and forth
I'd say url is
listings instead, or at the very least job-listings but it should be plural
the rest is fine
it can be `?search=software-engineer&location=LA"So in terms of the form structure, I don't need to do a GET or POST
on submit you just gotta change the URL idk what you are using but generally you can use the history API for this
well I know if I click an input type="submit" it will update the URL automatically
yeah which is why you e.preventDefault
then grab the values of the inputs and make a fetch request
it just depends on what you are using
like what tech
right but I'm trying not to do the e.preventDefault() thing because I do want the URL to change because I want to be able to naviagte back and forth and have the last thing be available still
that's why I said use the history API
oh ok
history API, okay
History API - Web APIs | MDN
The History API provides access to the browser's session history (not to be confused with WebExtensions history) through the history global object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.
but this is just basic JS idk what you are using here
oh wait yea with popstate and that
the other person just made it sounds like I was over complicating it by nnot just using the form submit default behavior
cuz I'd asked him about using the history API, and that picture was his response
are you using react or something?
no just javascript
you asked the question in a way that made it seem like you wanted to submit information
your words were a bit much 
lol sorry
i'm bad at describing this stuff
hmm then yeah probably history api is the way to go
but do you have a backend?
no
just javascript.. I'd built out this big elaborate script for searching the .json and returning matching job posts
he just made it sounds like forms was what that was built for and that I was over-doing it with 'vanilla tech'
oh you don't have a backend? interesting
idk honestly
hmm no backend and no framework
right just a .json, html scss and js
I see that's why you mentioned popstate
lol
well
that's a bit...more complicated than I expected lol
but yeah that can work
then you most definitely didn't need to submit anything
i mean with what I have, what 'm trying to do, I just want to do whatever the 'right' wway would be
sure
the uh...
expected user experience
right, like if they click into a search result, click back.. they shoudl still see the other serarch result
then yeah you got what you need, some popstate some history api and preventDefault
and not just be kicked totally out
modifying the results page is gonna be a bit of a pain
specially if you have a lot of results
there's just 15
ah not a problem then
I still don't enjoy modifying search results with vanilla JS but it's much easier when you don't have to worry about performance
so you 100% sure I should treat this like a form get and have a script in node.js or something?
shouldn't*
idk what that would entail, but 'pain in the butt' just sounds like I'm doing something In shouldn't be
I mean...
the part that you shouldn't be doing is doing it all with vanilla js and no backend 
in a bad way tho, like it's a good way to learn go for it
it's just harder to do
in a bad way tho, like it's a good way to learn go for it
it's just harder to dookay so yea, then I def wanna do a backend then
see I'm just totally ignorant to all of this
do you know anything about backend?
i'm just using JS cuz its literally all I know
no lol
so no
it'll take you way longer to learn everything you need for a backend than just doing it this way
besides your results being so small it's a lot of overhead, I'd push more for a backend if you had like 1000 results
the way you're doing it works fine, it's a bit more manual labor but it is fine for the scale of your project
the other guy was saying NOde.JS is written mostly just like JS, which I already know pretty well
sure, but then you gotta learn how to build an API how to make routes, etc.
ah
for this project what you are doing is fine, in fact, do it
I encourage it
once you do it
learn backend and do it again
but with a backend
and learn a framework and do it again (it doesn't have to be the same project just same functionality)
only then will you truly understand why stuff is done the way it is done
just build your skills slowly, one on top of the other, don't overwhelm yourself
right okay
you'll be aight 👍
you will absolutely mess up here but that's the best way to learn
yea just gotta keep on
and whenever you stuck just make a new post, ask give code examples, research
so I should built it in javascript again first you're saying?
1st just JS in the front-end, then you can add a backend (for this you can mostly use the same front-end code), then you can add a backend and a front-end framework like react, svelte, vue, etc.
don't speed run it, if you have other things to learn first take a break between these projects
hell you might not even want to touch the backend in your life, so you can instead find an API that is public and use that instead
okay that makes sense. So since I've already built it once using HTML CSS and JS, I should now attempt backend frontend framework
sure, but only if you're actually ready for it, get a good grasp on the fundamentals first make sure you know your stuff
then you can learn other tools
and yeah NodeJS is a good start for a backend because it's almost just pure JS
Okay awesome
I hear that okay, maybe I'll just do both then, separately i mean