- 締切済み
mysqlへの転送NG?
register.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Member Registration</title> </head> <body> <form id="registrationForm" action="/register" method="POST" enctype="multipart/form-data"> <label for="nickname">Nickname:</label><br> <input type="text" id="nickname" name="nickname" maxlength="20"><br> <label for="gender">Gender:</label><br> <select id="gender" name="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select><br> <label for="mail">Email:</label><br> <input type="email" id="mail" name="mail" maxlength="250"><br> <label for="prefecture">Prefecture:</label><br> <input type="text" id="prefecture" name="prefecture" maxlength="20"><br> <label for="city">City:</label><br> <input type="text" id="city" name="city" maxlength="255"><br> <label for="photo">Photo:</label><br> <input type="file" id="photo" name="photo"><br> <label for="selfintroduction">SelfIntroduction:</label><br> <textarea id="selfintroduction" name="selfintroduction"></textarea><br> <input type="submit" value="Register"> </form> <script> const form = document.getElementById('registrationForm'); form.addEventListener('submit', function(event) { let cancelSubmit = false; const inputs = form.querySelectorAll('input, select, textarea'); inputs.forEach(function(input) { if (input.value.trim() === '') { alert('Please fill in all fields'); cancelSubmit = true; event.preventDefault(); return false; } }); if (!cancelSubmit) { return true; } }); </script> </body> </html> script.js // httpモジュールとmysqlモジュールをインポート const http = require('http'); const mysql = require('mysql'); // HTTPサーバーを作成し、リクエストを処理するためのコールバック関数を定義 const server = http.createServer((req, res) => { // POSTメソッドかつURLが '/register' の場合に処理を実行 if (req.method === 'POST' && req.url === '/register') { let body = ''; // リクエストデータを受け取る req.on('data', chunk => { body += chunk.toString(); }); // リクエストデータの受け取りが完了したら処理を実行 req.on('end', () => { // 受け取ったデータを処理する const formData = new URLSearchParams(body); const nickname = formData.get('nickname'); const gender = formData.get('gender'); const mail = formData.get('mail'); const prefecture = formData.get('prefecture'); const city = formData.get('city'); const photo = formData.get('photo'); const selfIntroduction = formData.get('selfintroduction'); // MySQLデータベースに接続するための設定 const connection = mysql.createConnection({ host: 'localhost', user: 'root', // MySQLのユーザー名 password: 'rhythm0!KT#$9V', // MySQLのパスワード database: 'membership_db' // MySQLのデータベース名 }); // MySQLデータベースに接続 connection.connect((err) => { if (err) { // MySQLへの接続エラーをコンソールに出力して処理を終了 console.error('Error connecting to MySQL: ' + err.stack); return; } // MySQLに正常に接続された場合、ログに接続したスレッドIDを出力 console.log('Connected to MySQL as id ' + connection.threadId); // フォームデータをMySQLに挿入するクエリを作成 const sql = `INSERT INTO members (nickname, gender, mail, prefecture, city, photo, selfintroduction, date) VALUES (?, ?, ?, ?, ?, ?, ?, NOW())`; const values = [nickname, gender, mail, prefecture, city, photo, selfIntroduction]; // クエリを実行して結果を処理 connection.query(sql, values, (err, result) => { if (err) { // クエリ実行中にエラーが発生した場合、エラーメッセージをコンソールに出力 console.error('Error inserting data into MySQL: ' + err.stack); /
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AIエージェント あい（@OKWAVE-AI）
- ベストアンサー率89% (2715/3019)
あなたの相談内容を確認しました。MySQLを使用して会員登録機能を開発しようとしているようですね。具体的な実装についてアドバイスします。 まず、問い合わせフォームのデータをサーバーにPOSTし、そのデータをMySQLデータベースに保存する手順は基本的に問題ありません。ただし、一部の改善点や注意点があります。 ### セキュリティ 1. **パスワード管理** - パスワードを直接コードに記載するのは避けましょう。環境変数（dotenvなど）を使用して管理するのが一般的です。 ```javascript require('dotenv').config(); const connection = mysql.createConnection({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME }); ``` 2. **SQLインジェクション対策** - `mysql.escape()`やプレースホルダーを使用してSQLインジェクション対策を行うことが非常に重要です。すでにプレースホルダーを使用しているので良いですが、念のため確認しておきます。 ### フォームバリデーションとエラーハンドリング - フロントエンドだけでなく、サーバーサイドでも入力バリデーションを行うことが推奨されます。これにより、不正なデータがデータベースに保存されるのを防ぎます。 ### ファイルアップロード - ファイルを含むフォームのデータを処理する際、`express`と`multer`を使用すると便利です。以下は簡単な例です。 ```javascript const express = require('express'); const bodyParser = require('body-parser'); const multer = require('multer'); const mysql = require('mysql'); const app = express(); const upload = multer({ dest: 'uploads/' }); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: process.env.DB_PASSWORD, database: 'membership_db' }); app.use(bodyParser.urlencoded({ extended: true })); app.post('/register', upload.single('photo'), (req, res) => { const { nickname, gender, mail, prefecture, city, selfintroduction } = req.body; const photo = req.file.filename; // アップロードされたファイルの名前 const sql = `INSERT INTO members (nickname, gender, mail, prefecture, city, photo, selfintroduction, date) VALUES (?, ?, ?, ?, ?, ?, ?, NOW())`; const values = [nickname, gender, mail, prefecture, city, photo, selfintroduction]; connection.query(sql, values, (err, result) => { if (err) { console.error('Error inserting data into MySQL: ' + err.stack); res.status(500).send('Server Error'); return; } res.send('Registration Successful'); }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` ### まとめ あなたが提供しているコードについて基本的には正しい方向に進んでいると感じますが、セキュリティやバリデーション、ファイルアップロード処理などの細かい点での改善が必要です。これらをしっかりと実装して、安全で機能的なアプリケーションを作成してください。もしその他の質問や具体的な実装についての疑問がありましたら、お気軽にお知らせください。 ------------------------------------------------ こちらの回答はAIエージェント「あい」による参考回答です。 有識者からの回答も是非お待ちしています。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
