0

Been learning Node.js so far, building some MVC application but still cannot handle form properly, and I need some help to figure out how things work.

Okay, the best way to figure how this thing works is on my previous question, Steam Web API programming.

I installed express and steamwebapi. My index.html is looking like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Steam</title>
</head>
<body>
<form action="/ask_user_id" method="POST">
    <input type="text" name="id"><br>
    <input type="submit" value="Pošalji">
</form>
</body>
</html>

My app.js:

    //Express
var express = require('express');
var server = express();

//Steam
var SteamWebAPI = require('steamwebapi').SteamWebAPI;
SteamWebAPI.setAPIKey('xxx key is here ');

//Rendering form in index.html file
server.get('/ask_user_id', function(req, res) {
    app.render('form', function(err, html) {
        if(err)
            return res.send(err);
        else
            return res.send(html)
    });
});

//Route for handling form submission
server.post('/user_infos', function(req, res) {
    //Form submitted in req.body, retriving userID

    var _userID = req.body.userId;

    //SteamWebAPI - getRecentlyPlayedGames
    SteamWebAPI.getRecentlyPlayedGames(_userID, 5, function(response) {
        return res.json(response.response.games);
    });
});

//Localhost
server.listen(3000, function() {
    console.log('Server: 3000');
});

I'm using IntelliJ IDEA. I type in terminal Node App.js, server:3000. If I go to my index.html file, it redirected me to http://localhost:63342/Steam/index.html, and if I type something in form, it redirect me to: http://localhost:63342/ask_user_id and I got "404 Not Found".

What I'm doing wrong? If I type node app.js and then go to localhost:3000/ask_user_id I got reference error. Someone once asked me why I need app there; I don't know, if I put server it results in an error again.

halfer
  • 19,824
  • 17
  • 99
  • 186
Benjamin
  • 65
  • 2
  • 9
  • No offense, but you should work through one of the many online Node.js tutorials if you don't know what you're doing. Then, work Steam into it once its working. – thedarklord47 Mar 10 '16 at 20:52
  • Of course, I got myself a book, Web development with Node.js and Express, but how can I learn if I don't practice? I learned alot these few weeks, but this is essential thing, nothing too hard obviously...or im wrong 'bout it – Benjamin Mar 10 '16 at 20:53
  • thats good you got a book. what I am saying is you can find many tutorials (i'm sure there is a section in your book) that go through how to set up a form. At this point though, there is no point in adding complexity by integrating Steam API. – thedarklord47 Mar 10 '16 at 20:57
  • I can handle form but cannot do it with steam api... – Benjamin Mar 10 '16 at 20:58
  • in your html, change to `action="/user_infos"` – thedarklord47 Mar 10 '16 at 21:01
  • Going to: http://localhost:3000/user_infos, I get error: Cannot GET /user_infos Going to: http://localhost:63342/Steam/index.html, I get again: 404 Not Found – Benjamin Mar 10 '16 at 21:03
  • you should not be able to GET /user_infos. They way forms work online (hence me recommending a tutorial) is that often you POST data to a url, but you cannot visit it directly – thedarklord47 Mar 10 '16 at 21:05
  • Ik, I got: server.get('/ask_user_id'...) and server.post('/user_infos'...) – Benjamin Mar 10 '16 at 21:06
  • right, so that means when you try and visit `localhost:300/user_infos` (this performs a GET), there is nothing for you to get – thedarklord47 Mar 10 '16 at 21:06
  • So, I'm supposed to POST that or GET? – Benjamin Mar 10 '16 at 21:07
  • visiting a URL and seeing an HTML page is a GET. submitting a form is a POST. so you GET `/ask_user_id` and you POST your data to `/user_infos` – thedarklord47 Mar 10 '16 at 21:08
  • That's how my code looks...? – Benjamin Mar 10 '16 at 21:09
  • right. so what I am saying is you are getting the proper behaviour. `localhost:63342/Steam/index.html` is not defined anywhere that I see so you get a 404. `localhost:3000/user_infos' is defined as a POST for form submission, so you cannot GET it by visiting directly, and `localhost:3000/ask_user_id` displays your form because it is defined as a GET. – thedarklord47 Mar 10 '16 at 21:13
  • I'm super thankful for your help but I'm kinda confused now, I'm still newbie, I'm sorry for being dumb. >.> Basically, going to: http://localhost:3000/user_infos, I get Cannot GET /user_infos error, that is form submission post but..what's wrong here :( :( God bless you...but im dumb XD – Benjamin Mar 10 '16 at 21:16
  • the error is good. you should not be able to go to `localhost:3000/user_infos`. you should only be able to POST data to it by submitting your form – thedarklord47 Mar 10 '16 at 21:19
  • Oh, I'm kinda getting it. But, how do I submit my form, a.k.a POST data? – Benjamin Mar 10 '16 at 21:20
  • click the submit button! the form and browser will do it for you – thedarklord47 Mar 10 '16 at 21:21
  • Possible duplicate of [ReferenceError: app is not definied in Node.js - SteamWebAPI](http://stackoverflow.com/questions/35736053/referenceerror-app-is-not-definied-in-node-js-steamwebapi) – halfer Mar 10 '16 at 21:34
  • I don't understand you. Can you help me or...? I'm looking way to fix this issue. – Benjamin Mar 10 '16 at 21:35

2 Answers2

1

in your html, change to action="/user_infos"

the request will go like this

GET /ask_user_id   <- this is you going to localhost:3000/ask_user_id in browser
POST /user_infos   <- this is you submitting the data to the URL specified in the action attribute of your form.
thedarklord47
  • 3,183
  • 3
  • 26
  • 55
  • Now I'm getting error: ReferenceError: app is not defined... :( – Benjamin Mar 10 '16 at 21:05
  • update your question with the current code you are running – thedarklord47 Mar 10 '16 at 21:05
  • on line 11 of `app.js` you call `app.render()`. it should be `server.render()` since that is what you called you express app on line 3: `var server = express();` – thedarklord47 Mar 10 '16 at 21:10
  • Umm, I was doing that but I got strange error: Error: No default engine was specified and no extension was provided.? What this means? – Benjamin Mar 10 '16 at 21:11
  • so express is usually used with a templating engine, not just straight html. google EJS. It lets you stick data in your html, but it will also just let you enter regular html – thedarklord47 Mar 10 '16 at 21:23
  • when you call `server.render()`, it tries to use the templating engine to render your html. except since you have not told it to use one, it breaks. setting up EJS is simple and should get you up and running – thedarklord47 Mar 10 '16 at 21:24
  • if you are still having trouble, update your question with your current code and I am happy to keep helping – thedarklord47 Mar 10 '16 at 21:27
  • I'm so glad you're so kind! I've installed it in my terminal, error is still same. Do I need to require something, make any changes? Sorry for bothering pal :'( – Benjamin Mar 10 '16 at 21:27
  • no problem. did you add `server.set('view engine', 'ejs');` to app.js? – thedarklord47 Mar 10 '16 at 21:36
  • uh oh, something worked out!!!!, finally not error XD what is this: {"view":{"defaultEngine":"ejs","ext":".ejs","name":"form","root":"C:\\Users\\Benjamin Kljuno\\Documents\\Projekti\\Node.js\\Projekti\\views"}} – Benjamin Mar 10 '16 at 21:39
  • where are you seeing this? also, you will have to change index.html to index.ejs – thedarklord47 Mar 10 '16 at 21:41
  • Going to: http://localhost:3000/ask_user_id, I get that. How can I edit? I mean, then I get, index.ejs.html, cannot change only to .ejs... – Benjamin Mar 10 '16 at 21:44
  • you can normally highlight the entire filename with the mouse and edit – thedarklord47 Mar 10 '16 at 21:45
  • I haven't installed plugin in IntelliJ IDEA, that's why I could not edit it. I've edited, but still got same 'error'. – Benjamin Mar 10 '16 at 21:49
  • is your index.ejs inside a folder called "views"? – thedarklord47 Mar 10 '16 at 22:15
  • also, I would ditch the IDE until you know what you are doing. It is better if you understand what is going on without it. you don't need a plugin – thedarklord47 Mar 10 '16 at 22:19
  • Sorry, I was AFK. It was not, I'm gonna put it now! index.ejs is in folder views, but why? app.js is outside all folders still same error – Benjamin Mar 10 '16 at 22:29
  • eh, I tried. please go through a simple tutorial on express. If you can't get your html page to display, then that is a whole other issue. The changes you made earlier should resolve your original problem, but I'm not going to walk you through setting up express. Good luck – thedarklord47 Mar 10 '16 at 22:36
  • Thanks, gonna look up somewhere else! Once again, you helped me alot, all the best pal – Benjamin Mar 10 '16 at 22:37
0

the post actio in client is "ask_user_id"

change the server to listen

server.post('/ask_user_id',

no server.get

user3227295
  • 2,168
  • 1
  • 11
  • 17
  • If I enter my Steam ID in form in this case: '76561198190043289', I once again get error: 404 Not Found, url is still: http://localhost:63342/ask_user_id, but if I go to: localhost:3000/ask_user_id, I'm getting: Cannot GET /ask_user_id – Benjamin Mar 10 '16 at 20:51