Good old form. I can't understand routes

provotector commented 7 years ago

Hello. Thanks for this great course. In good old form exercise, it says

"Write a route ('/form') that processes HTML form input
(<form><input name="str"/></form>) and prints the value of str backwards."

But in the solution, I can not view in the code where is the declaration of this "form" route. Where is the declaration of <form><input name="str"/></form>?? I can't see it in the solution.js and I can't locate any "public" or "views" directory in solution where is the .jade or .html file with the form.

Solution.js is this code, but I can't see the form declarations. If i execute the app "as is" I have the error: "can not get /form" because form is not declarated in the "solution" code.

var express = require('express')
var bodyParser = require('body-parser')
var app = express()

app.use(bodyParser.urlencoded({extended: false}))

app.post('/form', function(req, res) {
  res.send(req.body.str.split('').reverse().join(''))
})

app.listen(process.argv[2])

charazn commented 7 years ago

Ditto here. My code, as per solution, runs and verifies. However, after watching the solution video on Youtube, @azat-co was able to run the server with $ node 4-form.js and used Postman to enter the value and press Send and see the returned reversed value.

I did the same, starting the server with $ node my-file.js, running $ killall node before the former, but it returns Cannot GET /post.

I downloaded Postman for Mac and as a Chrome app, select POST, enter localhost:3000/post, select Body tab, select radio button x-www-form-urlencoded, enter 'some value' in the value field, and click the blue Send button on the top right. It did not work for both.

I tried these because I believe I have the same question as @provotector above, wanting to know where the string from req.body comes from. It is not defined anywhere in the code or passed in as an argument from argv.

Could @azat-co or someone explain, 1. where the request originates, and 2. why and how to start the server, so that the expected results shows on the browser. Thank you.

DylanMcGee commented 7 years ago

@provotector @charazn

I had the same issue as the two writers above. Whenever I go through tutorials on NodeSchooll, I always make two files. The first is made to pass the tutorials test to make sure I grasp the correct concept. The second is a real program which executes so I know I can use the new concept in the field.

I am going to answer question 2 before question 1 from @charazn since the solution of setting up your own get/post routing is a lot easier to understand than how the expressworks module does it.

2) This tutorial is aimed to teach you to handle get and post requests through the express framework. What we need to do is write a form.html file which has a form. Then, we have to create a get request where users can access this form. Finally, we need to create a post request to take the users submission & return the reversed string.

Here is the javascript file

var express = require('express'); var path = require('path'); var bodyParser = require('body-parser');

var app = express();

app.get('/form', function(req, res){

res.sendFile(path.join( __dirname + '/public/form.html'));

});

app.listen(8000);

app.use(bodyParser.urlencoded({extended: false}));

app.post('/form/submit', function(req, res){ res.send(req.body.str.split('').reverse().join('')); });

Now we just need to write a html file which is served. I have this in the public folder and it is named form.html

<!DOCTYPE HTML>

===================================================================== 1) The server is set up in the file node_modules\expressworks\exercises\good_old_form/excercise.js file. I am going to be honest, this is a bit over my head but you can see the form set up in the connect function.

function connect (port, stream) { var url = 'http://localhost:' + port + '/form' var text = exercise.__('exercises.good_old_form.source').split('').reverse().join('');

superagent
  .post(url)
  .type('form')
  .send({str: text})
  .pipe(stream)

}

connect(this.submissionPort, this.submissionStdout)

if (mode == 'verify') connect(this.solutionPort, this.solutionStdout) }

I hope this helps!

azat-co / expressworks

Good old form. I can't understand routes #126