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
13eck
13eck2y ago
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.
thethingisback
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
13eck
13eck2y ago
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
thethingisback
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?
13eck
13eck2y ago
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.
thethingisback
gotcha okay, so would PHP be a good language to do what I described? I've also been hearing a lot about Node.js
13eck
13eck2y ago
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
thethingisback
oh okay, well hell I'll use node.JS then.. I already did this once in JS
13eck
13eck2y ago
If you already know JavaScript well I would suggest starting with Node, yeah
ErickO
ErickO2y ago
POST?
thethingisback
well idk.. I'm 'getting' info from the .json ultimately
ErickO
ErickO2y ago
from what I'm reading you're essentially asking for a search function yeah?
thethingisback
not posting to it right
13eck
13eck2y ago
If you're sending data to the back end that's a POST request GET requests have no body
thethingisback
gotcha, so it has to be done with GET
13eck
13eck2y ago
What? No. POST.
thethingisback
there was something about security I was thinking maybe the same could be done with post more securely but i guess not
ErickO
ErickO2y ago
they're not sending a json they're sending a search string
13eck
13eck2y ago
You're submitting a form, that's a POST
ErickO
ErickO2y ago
is this a form or a search bar
thethingisback
well its a form, but its for a search yea
ErickO
ErickO2y ago
so a search bar
thethingisback
so searching .json yea, and getting info from it
13eck
13eck2y ago
Doesn't matter what it's for, it matters what it does. It sends data to the server. That's POST
ErickO
ErickO2y ago
why tho, just use query strings
13eck
13eck2y ago
submit, take in the user inputs, analyze them
To me that's more than just a query string, yes?
ErickO
ErickO2y ago
GET signifies Idempotence you're not making changes in a search
13eck
13eck2y ago
Submit form. Analyze data Maybe I'm not understanding what's being asked 🤷
thethingisback
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
13eck
13eck2y ago
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
thethingisback
they're job listing objects that hold properties like location, title, etc
ErickO
ErickO2y ago
what are these inputs tho, are they checkmarks, are they text give me an example of a search
thethingisback
both
13eck
13eck2y ago
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
thethingisback
title: senior software engineer, location: Baton Rouge, LA, fulltime: true
ErickO
ErickO2y ago
that can all be done in URL yeah or client side if your json isn't huge
thethingisback
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
13eck
13eck2y ago
Forms don't normally interact with the browser history
thethingisback
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
ErickO
ErickO2y ago
you a bit lost here this is just a simple search you're focusing hard on the word form
thethingisback
the suggestion I got from another
ErickO
ErickO2y ago
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"
thethingisback
So in terms of the form structure, I don't need to do a GET or POST
ErickO
ErickO2y ago
on submit you just gotta change the URL idk what you are using but generally you can use the history API for this
thethingisback
well I know if I click an input type="submit" it will update the URL automatically
ErickO
ErickO2y ago
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
thethingisback
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
ErickO
ErickO2y ago
that's why I said use the history API
thethingisback
oh ok history API, okay
ErickO
ErickO2y ago
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.
ErickO
ErickO2y ago
but this is just basic JS idk what you are using here
thethingisback
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
ErickO
ErickO2y ago
are you using react or something?
thethingisback
no just javascript
ErickO
ErickO2y ago
you asked the question in a way that made it seem like you wanted to submit information your words were a bit much PepeLaugh
thethingisback
lol sorry i'm bad at describing this stuff
ErickO
ErickO2y ago
hmm then yeah probably history api is the way to go but do you have a backend?
thethingisback
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'
ErickO
ErickO2y ago
oh you don't have a backend? interesting
thethingisback
idk honestly
ErickO
ErickO2y ago
hmm no backend and no framework
thethingisback
right just a .json, html scss and js
ErickO
ErickO2y ago
I see that's why you mentioned popstate
thethingisback
lol
ErickO
ErickO2y ago
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 PepeLaugh
thethingisback
i mean with what I have, what 'm trying to do, I just want to do whatever the 'right' wway would be
ErickO
ErickO2y ago
sure the uh... expected user experience
thethingisback
right, like if they click into a search result, click back.. they shoudl still see the other serarch result
ErickO
ErickO2y ago
then yeah you got what you need, some popstate some history api and preventDefault
thethingisback
and not just be kicked totally out
ErickO
ErickO2y ago
modifying the results page is gonna be a bit of a pain specially if you have a lot of results
thethingisback
there's just 15
ErickO
ErickO2y ago
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 PepeLaugh
thethingisback
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
ErickO
ErickO2y ago
I mean... the part that you shouldn't be doing is doing it all with vanilla js and no backend OMEGALUL in a bad way tho, like it's a good way to learn go for it it's just harder to do
thethingisback
okay so yea, then I def wanna do a backend then see I'm just totally ignorant to all of this
ErickO
ErickO2y ago
do you know anything about backend?
thethingisback
i'm just using JS cuz its literally all I know no lol
ErickO
ErickO2y ago
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
thethingisback
the other guy was saying NOde.JS is written mostly just like JS, which I already know pretty well
ErickO
ErickO2y ago
sure, but then you gotta learn how to build an API how to make routes, etc.
thethingisback
ah
ErickO
ErickO2y ago
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
thethingisback
right okay
ErickO
ErickO2y ago
you'll be aight 👍 you will absolutely mess up here but that's the best way to learn
thethingisback
yea just gotta keep on
ErickO
ErickO2y ago
and whenever you stuck just make a new post, ask give code examples, research
thethingisback
so I should built it in javascript again first you're saying?
ErickO
ErickO2y ago
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
thethingisback
okay that makes sense. So since I've already built it once using HTML CSS and JS, I should now attempt backend frontend framework
ErickO
ErickO2y ago
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
thethingisback
Okay awesome I hear that okay, maybe I'll just do both then, separately i mean
Want results from more Discord servers?
Add your server