When a form submits data, what happens?

Glitch Help
1

Hi there hyperdev forum.

  • when I submit a form and the page view changes, what happens in between those two events?

I feel like if I can understand this end-to-end, I can move past this massive mental block I have in building web apps. I’ve spent an ungodly amount of time reading documentation from express and node and mongoDB to try to understand this, but something is totally, totally blocking my comprehension. I have come to suspect after 3 months of full time beating my head against a brick wall that I’ll really only be able to move forward when I stop failing this test:

Explain the following:

When a user enters “X” into that field and hits that button that says “Hit this button to find a match for X in our database, and to display it below without reloading the page”:
First, “X” goes to ____ which does ___ with the “X”,
and then ____ happens,
and then _____ ,
and then ______,
…
and then ___we search our database,
and then a match is found for “X” in database,
and then _____,
and then _____,
and then __________
and finally the view changes in the client.

Any idea of where I can go read something start to finish that covers this? In 8 months of trying to learn computer programming from scratch, the resource I’ve found most fit my style was the Bash manual, because it’s comprehensive, doesn’t have distracting links all over (I can read it in my terminal!), and doesn’t have a ton of reference to other frameworks. It’s foundational. I wish I had a textbook covering just the above question, but not like a newfangled one with all the pictures in it, or, god forbid, links to other shit strewn throughout (;

I think a hyperdev example that is similar in simplicity to the current main hyperdev example, but queries a database in the backend, like maybe a weather api or something, or even just queries another hyperdev example, to find a match for the data input, and then returns that match to the client, would be super helpful. I’ve remixed about 20 projects looking for something simple enough that does this, but I end up getting WAY in the weeds, i feel, as the projects invariable include other tools and methods I don’t understand that aren’t explained, so I end up spending a day reading about mongoose so that I can maybe understand mongoDB so that I can maybe use it; really I want to understand the protocol, the communication channel, the flow of the data, with less specifics around HOW to do it.

Just posting that since I think learners are one of your target markets for this product.

I suck at asking for help, which is probably 90% of why I am turning out to be epically shitty at computer programming 8 months into my efforts, and I really fear posting this without listing all the things I’ve tried. Suffice it to say, I’ve maxed out my own efforts, so I’m asking at the place where I spend the most time trying to learn, and because I really respect fogcreek.

thanks!

John

2

I feel your pain @johncgilmore!

Our https://hyperdev.com/#!/project/mongodb-sync project is for a similar scenario to what you describe, so I’ll explain what’s happening in it.

After you enter a blog title and text into the form, when you click ‘Create Post’ the form is submitted to our server. In index.html you can see that the form was setup with the following parameters: action="/posts" method="post"

So this means that the form will send an HTTP POST request (see here for more info on this stuff) to the ‘/posts’ endpoint.

So now if you look in server.js you’ll see we’ve created a route to handle this type of request (See line 39 starting with app.post("/posts")). In which we:

  • Get the existing posts from the MongoDB and put it into an array called posts: posts = datastore.get("posts");
  • We get the contents of the submitted form and append it to the posts array: posts.push(request.body); (the form data is in request.body because we’re using the body-parser library to help make dealing with requests easier)
  • We store the updated posts array back in our database posts entry: datastore.set("posts", posts);
  • And then we redirect the view back to the homepage: response.redirect("/");

Now if you look at line 25 we have a route for the homepage, app.get("/"...)
In that route we get the contents of our database posts, and then by looping through it in reverse order we render it to the page using a Nunjucks template - this just takes the data and arranges in a particular format on the page:
var posts = datastore.get("posts"); response.render('index.html', { title: "Welcome!", posts: posts.reverse() });

And that’s it. So every time something gets posted that loop happens, and the result is a new entry being added to the database and shown in the list on the page.

Our free, interactive Node Beginner course does a pretty good job at explaining a similar example project, but it explains each section step-by-step and provides live code examples to follow: https://hyperdev.com/#!/project/node-beginner

I hope this helps.

2 Likes
3

That is so helpful! Thanks a ton for the response. I’m headed in the right direction now (https://birdybook.hyperdev.space) with an express route catching an empty submission of data one way and a valid entry another way. Right now it (the handler maybe? The part of the route that says what to do?) sends an object containing some .pug locals along with a rendering of the index (I’m like 5 hrs into knowing what pug/Jade even is but it makes quite a bit of sense to me) that changes the front.

Makes more sense to me now how to think about pushing the data to the database and then grabbing something from the database and rendering a front end that will reflect the data.