PHPを使用せずにpdfを生成してmongoDBに保存するフォームを作成する方法

Question

私はAunt's DriverのEdクラスに登録するエンドユーザーからの人口統計情報を収集するだけです。私はそれを反映するために、以下のスターターコードを変更します。彼らが入力した情報がpdf形式に置かれて、学生が印刷したり、署名したり、電子署名したり、クラスに持ち込んだりすることは、役に立つでしょう。この情報がどこかに保存されていれば、学生がクラスに来るようになり、忘れてしまった場合にはそれを印刷することができれば役に立ちます。この場合、私はデータベースが必要であることがわかります。しかし、フォームに接続してpdfを作成するにはどうすればよいですか？可能であれば平均スタックを使用したいと思います。 PHPはオプションではありません。

これは私が使用するスターターコードです：

セットアップのNode.jsサーバーExpressのフレームワークを使用して、マングースとMongoDBのを設定して、セットアップをしたと仮定すると、

.register-form { 
 
\t line-height: 1.4; 
 
} 
 
.form-group { 
 
\t background: #F6DDCE; 
 
\t margin-bottom: 1em; 
 
\t padding: 10px; 
 
} 
 
.form-group ul { 
 
\t list-style: none; 
 
\t margin: 0 0 2em; 
 
\t padding: 0; 
 
} 
 
.form-group li { 
 
\t margin-bottom: 0.5em; 
 
} 
 
.form-group h3 { 
 
\t margin-bottom: 1em; 
 
} 
 
.form-fields input[type="text"], 
 
.form-fields input[type="tel"], 
 
.form-fields input[type="url"], 
 
.form-fields input[type="email"], 
 
.form-fields input[type="number"], 
 
.form-fields select { 
 
    box-sizing: border-box; 
 
    padding: 0.6em 0.8em; 
 
    color: #999; 
 
    background: #f7f7f7; 
 
    border: 1px solid #e1e1e1; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    font-size: 0.9em; 
 
    text-decoration: none; 
 
    line-height: normal; 
 
    max-height: 3em; 
 
} 
 
.form-fields input[type="text"]:focus, 
 
.form-fields input[type="tel"]:focus, 
 
.form-fields input[type="url"]:focus, 
 
.form-fields input[type="email"]:focus, 
 
.form-fields input[type="number"]:focus, 
 
.form-food textarea:focus, 
 
.form-fields select:focus { 
 
    color: #333; 
 
    border: 1px solid #C17CCF; 
 
    outline: none; 
 
    background: #f2f2f2; 
 
} 
 
.form-food textarea { 
 
    display: block; 
 
    box-sizing: border-box; 
 
    font: 0.9em Lato, Helvetica, sans-serif; 
 
    width: 90%; 
 
    height: 6em; 
 
    overflow: auto; 
 
    padding: 0.6em 0.8em; 
 
    color: #999; 
 
    background: #f7f7f7; 
 
    border: 1px solid #e1e1e1; 
 
    line-height: normal; 
 
} 
 
.register-btn { 
 
\t border-radius: 0px 2px 2px 0px; 
 
\t box-sizing: content-box; 
 
\t background: #8B798C; 
 
\t font-weight: 300; 
 
\t text-transform: uppercase; 
 
\t color: white; 
 
\t padding: 0.35em 0.75em; 
 
\t border: none; 
 
\t font-size: 1.1em; 
 
\t text-decoration: none; 
 
\t cursor: pointer; \t 
 
} 
 
.register-btn:hover, .register-btn:focus { 
 
\t background: #C17CCF; 
 
} 
 
/*flex it*/ 
 
.register-form { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
.form-group { 
 
\t flex: 1 0 300px; 
 
} 
 
.form-submit { 
 
\t flex: 0 0 100%; 
 
} 
 
.form-fields li { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
.form-fields input[type="text"], 
 
.form-fields input[type="tel"], 
 
.form-fields input[type="url"], 
 
.form-fields input[type="email"], 
 
.form-fields input[type="number"], 
 
.form-fields select { 
 
\t flex: 1 0 230px; 
 
} 
 
.form-fields label { 
 
\t flex: 1 0 90px; 
 
\t max-width: 200px; 
 
} 
 
.form-skills, .form-workshop { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
\t justify-content: space-between; 
 
} 
 
.form-skills li { 
 
\t width: 145px; 
 
} 
 
.form-workshop li { 
 
\t

<form class="register-form"> 
 
<section class="form-group"> 
 
<h3>Personal Info</h3> 
 
<ul class="form-fields"> 
 
<li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li> 
 
<li><label for="street-address">Street address:</label> <input type="text" name="street-address" id="street-address" placeholder="your street address" class="text-input"></li> 
 
<li><label for="city">City:</label> <input type="text" name="city" id="city" placeholder="city" class="text-input"></li> 
 
<li><label for="state">State:</label> <select class="select-menu" id="state" name="state"> 
 
\t <option value="AL">Alabama</option> 
 
\t <option value="AK">Alaska</option> 
 
\t <option value="AZ">Arizona</option> 
 
\t <option value="AR">Arkansas</option> 
 
\t <option value="CA">California</option> 
 
\t <option value="CO">Colorado</option> 
 
\t <option value="CT">Connecticut</option> 
 
\t <option value="DE">Delaware</option> 
 
\t <option value="DC">District Of Columbia</option> 
 
\t <option value="FL">Florida</option> 
 
\t <option value="GA">Georgia</option> 
 
\t <option value="HI">Hawaii</option> 
 
\t <option value="ID">Idaho</option> 
 
\t <option value="IL">Illinois</option> 
 
\t <option value="IN">Indiana</option> 
 
\t <option value="IA">Iowa</option> 
 
\t <option value="KS">Kansas</option> 
 
\t <option value="KY">Kentucky</option> 
 
\t <option value="LA">Louisiana</option> 
 
\t <option value="ME">Maine</option> 
 
\t <option value="MD">Maryland</option> 
 
\t <option value="MA">Massachusetts</option> 
 
\t <option value="MI">Michigan</option> 
 
\t <option value="MN">Minnesota</option> 
 
\t <option value="MS">Mississippi</option> 
 
\t <option value="MO">Missouri</option> 
 
\t <option value="MT">Montana</option> 
 
\t <option value="NE">Nebraska</option> 
 
\t <option value="NV">Nevada</option> 
 
\t <option value="NH">New Hampshire</option> 
 
\t <option value="NJ">New Jersey</option> 
 
\t <option value="NM">New Mexico</option> 
 
\t <option value="NY">New York</option> 
 
\t <option value="NC">North Carolina</option> 
 
\t <option value="ND">North Dakota</option> 
 
\t <option value="OH">Ohio</option> 
 
\t <option value="OK">Oklahoma</option> 
 
\t <option value="OR">Oregon</option> 
 
\t <option value="PA">Pennsylvania</option> 
 
\t <option value="RI">Rhode Island</option> 
 
\t <option value="SC">South Carolina</option> 
 
\t <option value="SD">South Dakota</option> 
 
\t <option value="TN">Tennessee</option> 
 
\t <option value="TX">Texas</option> 
 
\t <option value="UT">Utah</option> 
 
\t <option value="VT">Vermont</option> 
 
\t <option value="VA">Virginia</option> 
 
\t <option value="WA">Washington</option> 
 
\t <option value="WV">West Virginia</option> 
 
\t <option value="WI">Wisconsin</option> 
 
\t <option value="WY">Wyoming</option> 
 
</select> \t </li> 
 
<li><label for="street-address">Zip code:</label> <input type="text" name="zip-code" id="zip-code" placeholder="zip code" class="text-input"></li> 
 
<li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li> 
 
</ul> 
 
<h4>Registration Info</h4> 
 
<p>This info will be on your badge and help us match you with information and events throughout the conference. 
 
<ul class="form-fields"> 
 
<li><label for="description">Primary role:</label> <select class="select-menu" id="description" name="description"> 
 
\t <option value="designer">Designer</option> 
 
\t <option value="developer">Developer</option> 
 
\t <option value="other">Other</option> 
 
\t </select></li> 
 
<li><label for="job-title">Job title:</label> <input type="text" name="job-title" id="job-title" placeholder="job title" class="text-input"></li> 
 
<li><label for="company">Company:</label> <input type="text" name="company" id="company" placeholder="company" class="text-input"></li> 
 
<li><label for="phone">Phone:</label> <input type="tel" name="phone" id="phone" placeholder="your phone number" class="text-input"></li> 
 
</ul> 
 
</section> 
 
<section class="form-group"> 
 
<h3>Sessions</h3> 
 
<h4>Skills</h4> 
 
<p>Listing skills will help us match up our break out sessions and lunch!</p> 
 
<ul class="form-skills"> 
 
<li><input type="checkbox" id="css" value="css"> <label for="css">CSS</label></li> 
 
<li><input type="checkbox" id="html" value="html"> <label for="html">HTML</label></li> 
 
<li><input type="checkbox" id="js" value="js"> <label for="js">JavaScript</label></li> 
 
<li><input type="checkbox" id="content" value="content"> <label for="content">Content Strategy</label></li> 
 
<li><input type="checkbox" id="ux" value="ux"> <label for="ux">UX</label></li> 
 
<li><input type="checkbox" id="rails" value="rails"> <label for="rails">Rails</label></li> 
 
<li><input type="checkbox" id="node" value="node"> <label for="node">Node</label></li> 
 
<li><input type="checkbox" id="sass" value="sass"> <label for="sass">SASS</label></li> 
 
<li><input type="checkbox" id="mobile" value="mobile"> <label for="mobile">Mobile</label></li> 
 
</ul> 
 
<h4>Workshops</h4> 
 
<p>Workshops are half-day, hands-on classes. Each are an additional $50.</p> 
 
<ul class="form-workshop"> 
 
<li><input type="checkbox" id="forms-ws" value="forms"> <label for="forms-ws">Creating Responsive Forms with Flexbox</label></li> 
 
<li><input type="checkbox" id="jekyll-ws" value="jekyll"> <label for="jekyll-ws">Blogging with Jekyll</label></li> 
 
<li><input type="checkbox" id="usability-ws" value="usability"> <label for="usability-ws">Usability Testing with Cats</label></li> 
 
<li><input type="checkbox" id="node-ws" value="node"> <label for="node-ws">Building Stuff with Node</label></li> 
 
</ul> 
 
<h4>Lunch</h4> 
 
<p>Lunch is provided each day. We have vegetarian options as well as gluten-free choices available. Please let us know about any food allergies or dietary restrictions.</p> 
 
<ul class="form-food"> 
 
<li><input type="radio" id="meat" value="meat" name="food"> <label for="meat">Chicken, Beef, or Fish</label></li> 
 
<li><input type="radio" id="vegetarian" value="vegetarian" name="food"> <label for="vegetarian">Vegetarian</label></li> 
 
<li><input type="radio" id="gluten" value="gluten" name="food"> <label for="gluten">Gluten Free</label></li> 
 
<li><label for="food-options">Please list any dietary restrictions:</label><textarea id="food-options" name="food-options" class="text-area">food allergies or other restrictions</textarea> </li> 
 
</ul> 
 
</section> 
 
<section class="form-submit"> 
 
<h4>All finished?</h4> 
 
<p>We're looking forward to seeing you!</p> 
 
<button type="submit" class="register-btn">Register</button> 
 
</section> 
 
</form>

Answer 1

あなたのモデルでは、フローは次のようになります。

1. フォームを入力してExpressサーバーに送信します。
2. フォームは、ルートハンドラ（コントローラ）機能にサブミットします。
3. コントローラ内では、PDFを生成してデータをデータベースに保存します。

ように、コードは次のようなものになるだろう：

const PDFDocument = require('pdfkit') 

exports.createPdf = async (req, res) => { 
    // Save form data to the database 
    const myModel = new myModel(req.body) 
    await myModel.save() 

    const document = new PDFDocument() 
    // PDF generation logic... 
}