masmithrpg

Posted on Oct 15, 2018

Beginner Node Help- take 2

#node #pug #express #html

I am very new at HTML, NODE, PUG, etc. I'm trying to build a golf

score application. I have created the first part that allows me to
CRUD the courses. This part is working.
I have 2 tables, courses and scores.

After displaying a list of courses, i select a course and load 6
blank HTML table records to allow entry of golfers and scores each of
the 18 holes.
Now is where i'm confused and need some guidance.

         in my .pug file, how do i display an output field that displays a 
         running total of my score?

         On my submit button, i'm not getting to my POST, but i cannot figure 
         out why

         I want to be able to hit save on this screen and either Insert or 
         Update, depending on whether i have already saved.  Should that be 
         handled within a single POST?  It seems like i should, but i don't 
         know enough about Node to know

         I am processing my courses and scores within a single index.js file.  
         Should i be separating the courses/holes into separate .js files?

         Thats enough for now
         Thanks for any guidance you can provide

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

res.render('scores/keepscore', { title: 'ScoreCard' ,form_action: /scores/update})
})
app.post('/scores/update', function(req, res) {
console.log('i got to the update')
let stmt = new db.dbstmt(dbconn)
console.log(req)
var sql =
INSERT INTO ${schema}.SCORECARD (COURSE,GOLFER, GDATE, HOLE1,HOLE2,HOLE3,HOLE4, HOLE5, HOLE6, HOLE7, HOLE8, HOLE9, HOLE10, HOLE11, HOLE12, HOLE13, HOLE14, HOLE15, HOLE16, HOLE17, HOLE18) VALUES ('${req.body.COURSE}','${req.body.GOLFER}',CURRENT_DATE, ${req.body.HOLER1}, ${req.body.HOLE2}, ${req.body.HOLE3},${req.body.HOLE4}, ${req.body.HOLE5}, ${req.body.HOLE6}, ${req.body.HOLE7}, ${req.body.HOLE8}, ${req.body.HOLE9},${req.body.HOLE10}, ${req.body.HOLE11}, ${req.body.HOLE12},${req.body.HOLE13}, ${req.body.HOLE14}, ${req.body.HOLE15}, ${req.body.HOLE16}, ${req.body.HOLE17}, ${req.body.HOLE18} ) with NC
stmt.exec(sql, function(result, err){
console.log(err)
res.redirect('/scores/keepscore')
stmt.close()
})
})

Top comments (7)

Dian Fay • Oct 16 '18

Alright so: make sure your form's action attribute points back to the path of your "save" route (/scores/update), since otherwise it posts to the current URL. That should get you as far as executing the route code. Handling insert vs update independently is beneficial if there are complexities to the process but at this scale is essentially a matter of taste, as is splitting routes out into independent files. You can display a running score after a post or reload by passing the score in the second argument to res.render and interpolating it into your template, or dynamically by creating an auxiliary route and using something like jQuery to invoke it asynchronously on a timer, pushing updates into a placeholder DOM element. The former is easier but it's worth knowing how to do the latter as well. Search up tutorials to find out more, using technology names and what you want to do as keywords works pretty well.

Also, my guy, check out the edit functionality and the editor docs, parsing this is rough.

masmithrpg • Oct 17 '18

Thanks for the reply. I apologize for the the posting of the code. I had enough of a difficult time, just getting my first post to publish.

I have made some incremental progress. I fixed the issue with the submit button not going to the route. That actually turned out to be formatting in my pug file such that the form was not closing properly.

I have 2 primary issues at the moment. I'll try to post code at the bottom

when i render scores/keepscore, i pass the course name and i have that displaying in my table as a header. However, this is not passing back to my /scores/update route.

This leads me to my second issue, when i pass the table to /scores/update and take a look at my sql statement, i can see that all the table elements are appearing at once. So i know that i need to look through the table, but i'm not sure how to accomplish this.

Thanks for any help you can provide.

form(method="post", action=form_action)
  table
    thead
      tr
        th: b Course #{result}
      tr
        th: b Name
        th: b 1
        th: b 2
        th: b 3
        th: b 4
        th: b 5
        th: b 6
        th: b 7
        th: b 8
        th: b 9
        th: b 10
        th: b 11
        th: b 12
        th: b 13
        th: b 14
        th: b 15
        th: b 16
        th: b 17
        th: b 18    
        th: b Total
    tbody       
    - for(x=1;x<7;x++)
      tr 
       td: b <input type="text" name = "GOLFER" size="25"/> 
       td: b <input type="number" name = "PAR1" min="1" Max="10"/>
       td: b <input type="number" name = "PAR2" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR3" min="1" Max="10"/>
       td: b <input type="number" name = "PAR4" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR5" min="1" Max="10"/>
       td: b <input type="number" name = "PAR6" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR7" min="1" Max="10"/>
       td: b <input type="number" name = "PAR8" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR9" min="1" Max="10"/>
       td: b <input type="number" name = "PAR10" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR11" min="1" Max="10"/>
       td: b <input type="number" name = "PAR12" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR13" min="1" Max="10"/>
       td: b <input type="number" name = "PAR14" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR15" min="1" Max="10"/>
       td: b <input type="number" name = "PAR16" min="1" Max="10"/> 
       td: b <input type="number" name = "PAR17" min="1" Max="10"/>
       td: b <input type="number" name = "PAR18" min="1" Max="10"/> 
       td: b <output type="number" name = "HOLETOT"/>

    p <input type="submit" name="save"

app.post('/scores/update', function(req, res) {
let stmt = new db.dbstmt(dbconn)

  var sql = 
      `INSERT INTO ${schema}.SCORECARD (COURSE,GOLFER, GDATE, HOLE1,HOLE2,HOLE3,HOLE4, HOLE5, HOLE6, HOLE7, HOLE8, HOLE9, HOLE10, HOLE11, HOLE12, HOLE13, HOLE14, HOLE15, HOLE16, HOLE17, HOLE18)
       VALUES ('${req.body.RESULT}','${req.body.GOLFER}',CURRENT_DATE, ${req.body.PAR1}, ${req.body.PAR2}, ${req.body.PAR3},${req.body.PAR4}, ${req.body.PAR5}, ${req.body.PAR6},
       ${req.body.PAR7}, ${req.body.PAR8}, ${req.body.PAR9},${req.body.PAR10}, ${req.body.PAR11}, ${req.body.PAR12},${req.body.PAR13}, ${req.body.PAR14}, ${req.body.PAR15},
       ${req.body.PAR16}, ${req.body.PAR17}, ${req.body.PAR18} ) with NC`
  console.log(sql)
  stmt.exec(sql, function(result, err){
  console.log(err)
    res.redirect('/courses')
     stmt.close()
  })
})

Dian Fay • Oct 17 '18

When a form posts back, it only sends the values of named inputs (and selects and textareas etc). Everything else, including your table, is just static content. So if you want the course to be available in the update route, you need an input to hold that information. You can use the "hidden" input type to ensure the user doesn't have to see it.

I'm not really following what you're trying to say with the second issue. Remember your HTML table doesn't exist as far as the update route is concerned: it only cares about what's in those inputs, and those get parted out to fields in req.body automatically. Your SQL statement looks correct at a glance, although with NC is new to me -- wait, is this DB2 syntax?!

masmithrpg • Oct 18 '18

Yes, this is DB2 systax. NC is No Commit. It is used when the database is not journaled.

I have been chasing down processing the req.body all day without luck.

to explain what i meant with my second issue, take a look at the following. I have entered 1 golfer and his score

INSERT INTO TSTMIS.SCORECARD (COURSE,GOLFER, GDATE, HOLE1,HOLE2,HOLE3,HOLE4, HOLE5, HOLE6, HOLE7, HOLE8, HOLE9, HOLE10, HOLE11, HOLE12, HOLE13, HOLE14, HOLE15, HOLE16, HOLE17, HOLE18)
       VALUES ('Highland,Highland,Highland,Highland,Highland,Highland','mike smith,,,,,',CURRENT_DATE, 4,,,,,, 4,,,,,, 4,,,,,,4,,,,,, 4,,,,,, 4,,,,,,
       4,,,,,, 4,,,,,, 4,,,,,,4,,,,,, 4,,,,,, 4,,,,,,4,,,,,, 4,,,,,, 4,,,,,,
       4,,,,,, 4,,,,,, 4,,,,, ) with NC

I do see a clearer picture when i output req.body to the console, however, i cannot figure out how to process it . Apparently i cannot iterate through it, which means i need to do something with it so that i can iterate.
just a snipped of the req.body

{ id: 'Highland Park' }
Highland Park
{ save: 'Submit',
  GOLFER: [ 'mike smith', '', '', '', '', '' ],
  PAR1: [ '', '', '', '', '', '' ],
  PAR2: [ '', '', '', '', '', '' ],
  PAR3: [ '', '', '', '', '', '' ],

Dian Fay • Oct 18 '18

req.body is a hash, not an array. You can't iterate it, but you shouldn't need to. If you want the scores for the fifth hole, for example, that's req.body.PAR5 based on how you've named your input elements. That is an array since you have multiple inputs named PAR5, so Mike's score should be req.body.PAR5[0].

masmithrpg • Oct 18 '18

I was close.

The example i came across,showed req.body[0].PAR5

thanks for the help.

masmithrpg • Dec 20 '18

Unfortunately, i don't find much time to work on this, but today i got back to it and found a problem. I don't know if it is an issue i have to deal with because of HTML or because of body.parser.
I have a golf course named 'Highland Park'
i pass the course in as result in my .pug file and it displays properly.
I then have a hidden field in my body for the course name

td: b <input type="hidden" name = "COURSE" value= #{result}
when i process my hash, course shows as 'Highland'
it doesn't appear to be a size issue, but something to do with the space.

If i change the course name to 'HighlandPark', my hash shows 'HighlandPark'

Hope that makes sense.

Any idea how to handle this?

DEV Community

Beginner Node Help- take 2

Top comments (7)

Read next

Introducing Pretty-js-log: Add Beautiful, Colorful Logging to Your Node.js Apps 🎨

CSS: Easy dark mode

HTML meta 標籤中 viewport 的設定

Building Type-Safe Event-Driven Applications in TypeScript using Pub/Sub, Cron Jobs, and PostgreSQL