├── 1.JPG
├── 2.JPG
├── Capture.JPG
├── package.json
├── public
    ├── JS
    │   ├── AJAX2.js
    │   ├── connection.js
    │   ├── validate.js
    │   ├── API2.js
    │   ├── AJAX.js
    │   └── API.js
    ├── CSS
    │   └── style.css
    └── HTML
    │   └── index.html
├── README.md
├── app.js
└── LICENSE


/1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsadiAhmad/Simple-Signup-Nodejs/HEAD/1.JPG


--------------------------------------------------------------------------------
/2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsadiAhmad/Simple-Signup-Nodejs/HEAD/2.JPG


--------------------------------------------------------------------------------
/Capture.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsadiAhmad/Simple-Signup-Nodejs/HEAD/Capture.JPG


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "dependencies": {
3 |     "body-parser": "^1.20.2",
4 |     "express": "^4.18.2",
5 |     "mysql": "^2.18.1",
6 |     "path": "^0.12.7"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/public/JS/AJAX2.js:
--------------------------------------------------------------------------------
 1 | function getUserInfo() {
 2 |     var userId = $('#userIdInput').val();
 3 | 
 4 |     $.ajax({
 5 |       url: '/getUserInfo/' + userId,
 6 |       type: 'GET',
 7 |       success: function(response) {
 8 |         $('#userInfo').text(response); // Update the content of the <p> tag
 9 |       },
10 |       error: function(xhr, status, error) {
11 |         console.log('Error:', error);
12 |       }
13 |     });
14 | } 


--------------------------------------------------------------------------------
/public/JS/connection.js:
--------------------------------------------------------------------------------
 1 | const mysql = require('mysql');
 2 | 
 3 | const connectionMySQL = mysql.createConnection({
 4 |     host: 'localhost',
 5 |     user: 'root',
 6 |     password : '',
 7 |     database: 'links'
 8 | });
 9 | 
10 | connectionMySQL.connect((error) => {
11 |     if (error) {
12 |         console.error('Could not connect to database:', error);
13 |     } else {
14 |         console.log('Connected to the database');
15 |     }
16 | });
17 | 
18 | module.exports = connectionMySQL;
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### Simple-Signup-Nodejs
 2 | 
 3 | ## install xampp and run Apache and MySQL
 4 | 
 5 | <img src="1.JPG" width=400>
 6 | 
 7 | ## Create table in data base
 8 | 
 9 | ```
10 | CREATE TABLE `user` (
11 |   `id` int(11) NOT NULL,
12 |   `username` varchar(255) DEFAULT NULL,
13 |   `lastname` varchar(255) DEFAULT NULL,
14 |   `gender` varchar(255) DEFAULT NULL
15 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
16 | ```
17 | 
18 | ## run this command:
19 | 
20 | 1. for npm libraries
21 |    - ```npm install body-parser```
22 |    - ```npm install express```
23 |    - ```npm install mysql```
24 |    - ```npm install path```
25 | 2. for running server
26 |    - ```node app.js```
27 | 
28 | 
29 | <img src="2.JPG">
30 | 
31 | ## Webpage
32 | 
33 | <img src="Capture.JPG">
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/public/JS/validate.js:
--------------------------------------------------------------------------------
 1 | function validateForm(isAJAX) {
 2 |     var username = document.getElementById("username").value;
 3 |     var gender = document.getElementById("gender").value;
 4 |     var newsletter = document.getElementById("newsletter").checked;
 5 | 
 6 |     var regex = /^[a-zA-Z]+$/; // Regular expression to match only text
 7 | 
 8 |     if (!username.match(regex)) {
 9 |         if (!isAJAX) {
10 |             alert("Please enter a valid username with no numbers.");
11 |         }
12 |         return false;
13 |     }
14 | 
15 |     if (username === "" || gender === "" || !newsletter) {
16 |         if (!isAJAX) {
17 |             alert("Please fill in all the required fields and check the checkbox.");
18 |         }
19 |         return false;
20 |     }
21 |     
22 |     return true; // Return true if the form is valid
23 | }
24 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const bodyParser = require('body-parser');
 3 | const path = require('path');
 4 | const app = express();
 5 | 
 6 | const getForm = require(path.join(__dirname, 'public','JS', 'API.js'));
 7 | const getInfo2 = require(path.join(__dirname, 'public','JS', 'API2.js'));
 8 | 
 9 | const hostname = '127.0.0.1';
10 | const port = 5050;
11 | 
12 | app.use(bodyParser.urlencoded({ extended: false }));
13 | app.use(bodyParser.json());
14 | app.use(express.static(path.join(__dirname, 'public')));
15 | 
16 | app.get('/', (req, res) => {
17 |     res.sendFile(path.join(__dirname, 'public', 'HTML', 'index.html'));
18 | });
19 | 
20 | app.use('/save', getForm);
21 | app.use('/getUserInfo', getInfo2);
22 | 
23 | 
24 | app.listen(port, hostname, () => {
25 |   console.log(`Server running at http://${hostname}:${port}/`);
26 | });
27 | 


--------------------------------------------------------------------------------
/public/JS/API2.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const path = require('path');
 3 | const router = express.Router();
 4 | const connection = require(path.join(__dirname, 'connection.js'));
 5 | const getInformation = (req, res) => {
 6 |     var userId = req.params.userId;
 7 |     var query = 'SELECT * FROM user WHERE id = ?';
 8 |     console.log(userId)
 9 |     connection.query(query, [userId], function(err, results) {
10 |       if (err) {
11 |         console.error('Error querying MySQL database: ' + err.stack);
12 |         return res.status(500).send('Error querying database');
13 |       }
14 |       
15 |       if (results.length === 0) {
16 |         return res.status(404).send('User not found');
17 |       }
18 |       
19 |       var userInfo = 'ID: ' + results[0].id + ', Username: ' + results[0].username +
20 |                      ', Lastname: ' + results[0].lastname + ', Gender: ' + results[0].gender;
21 |                      
22 |       res.send(userInfo);
23 |     });
24 | };
25 | 
26 | router.get('/:userId', getInformation);
27 | 
28 | module.exports = router;
29 |   


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Ahmad Asadi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/public/CSS/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     max-width: 500px;
 3 |     margin: 0 auto;
 4 |     padding: 20px;
 5 | }
 6 | 
 7 | h2 {
 8 |     text-align: center;
 9 | }
10 | 
11 | .form-group {
12 |     margin-bottom: 15px;
13 |     display: flex;
14 |     flex-direction: row;
15 | }
16 | 
17 | label {
18 |     display: block;
19 |     margin-bottom: 5px;
20 | }
21 | 
22 | input[type="text"],
23 | select {
24 |     width: 100%;
25 |     padding: 10px;
26 |     border: 1px solid #ccc;
27 |     border-radius: 4px;
28 | }
29 | 
30 | input[type="submit"] {
31 |     width: auto;
32 |     padding: 10px 20px;
33 |     background-color: #4CAF50;
34 |     color: #fff;
35 |     border: none;
36 |     border-radius: 4px;
37 |     cursor: pointer;
38 | }
39 | 
40 | input[type="submit"]:hover {
41 |     background-color: #45a049;
42 | }
43 | 
44 | button{
45 |     width: auto;
46 |     padding: 10px 20px;
47 |     background-color: rgb(230, 164, 42);
48 |     color: #fff;
49 |     border: none;
50 |     border-radius: 4px;
51 |     cursor: pointer;
52 | }
53 | 
54 | button:hover{
55 |     background-color: orange;
56 | }
57 | 
58 | input[type="text"] {
59 |     padding: 10px;
60 |     border: 1px solid #ccc;
61 |     border-radius: 4px;
62 |     width: 200px;
63 | }
64 |   
65 | p {
66 |     margin-top: 20px;
67 |     font-size: 14px;
68 | }
69 | 


--------------------------------------------------------------------------------
/public/HTML/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>User Registration Form</title>
 5 |     <link rel="stylesheet" type="text/css" href="./../CSS/style.css">
 6 |     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 7 |     <script src="./../JS/validate.js"></script>
 8 |     <script src="./../JS/AJAX.js"></script>
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <h2>User Registration Form</h2>
13 |         <form id="myForm" action="#" method="post" onsubmit="return validateForm(false)">
14 |             <div class="form-group">
15 |                 <label for="username">Username:</label>
16 |                 <input type="text" id="username" name="username" placeholder="Enter your username" required>
17 |             </div>
18 |             <div class="form-group">
19 |                 <label for="lastname">lastname:</label>
20 |                 <input type="text" id="lastname" name="lastname" placeholder="Enter your lastname">
21 |             </div>
22 |             <div class="form-group">
23 |                 <label for="gender">Gender:</label>
24 |                 <select id="gender" name="gender" required>
25 |                     <option value="">Select your gender</option>
26 |                     <option value="male">Male</option>
27 |                     <option value="female">Female</option>
28 |                     <option value="other">Other</option>
29 |                 </select>
30 |             </div>
31 |             <div class="form-group">
32 |                 <label for="newsletter">Subscribe to newsletter:</label>
33 |                 <input type="checkbox" id="newsletter" name="newsletter">
34 |             </div>
35 |             <div class="form-group">
36 |                 <input type="submit" value="Submit">
37 |             </div>
38 |         </form>
39 |         <h2>User Info</h2>
40 |         <input type="text" id="userIdInput" placeholder="Enter User ID">
41 |         <button class="button" onclick="getUserInfo()">Get User Info</button>
42 |         <p id="userInfo"></p>
43 |     </div>
44 |     <script src="./../JS/AJAX2.js"></script>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/public/JS/AJAX.js:
--------------------------------------------------------------------------------
 1 | // $(document).ready(function() {
 2 | //     $('#myForm').submit(function(e) {
 3 | //         e.preventDefault(); // Prevent default form submission
 4 | //         if (!validateForm(true)) {
 5 | //             return; // Stop execution if form validation fails
 6 | //         }
 7 | //         var formData = $(this).serialize(); // Serialize form data into a query string or JSON object
 8 |       
 9 | //         // Send an Ajax POST request to the server-side script
10 | //         $.ajax({
11 | //             url: '/save', // Replace with your server-side endpoint
12 | //             type: 'POST',
13 | //             data: formData,
14 | //             success: function(response) {
15 | //                 // Handle the success response
16 | //                 console.log(response);
17 | //             },
18 | //             error: function(error) {
19 | //                 // Handle the error response
20 | //                 console.log(error);
21 | //             }
22 | //         });
23 | //     });
24 | // });
25 | 
26 | $(document).ready(function() {
27 |     $('#myForm').submit(function(e) {
28 |         e.preventDefault(); // Prevent default form submission
29 |         if (!validateForm(true)) {
30 |             return; // Stop execution if form validation fails
31 |         }
32 |         var formData = $(this).serialize(); // Serialize form data into a query string or JSON object
33 |       
34 |         // Send an Ajax POST request to the server-side script
35 |         $.ajax({
36 |             url: '/save', // Replace with your server-side endpoint
37 |             type: 'POST',
38 |             data: formData,
39 |             success: function(response) {
40 |                 // Handle the success response
41 |                 console.log(response);
42 |                 if (response === 'Username already exists') {
43 |                     // Display an alert if the username already exists
44 |                     alert('Username already exists. Please choose a different username.');
45 |                 } else {
46 |                     // Display a success message if the data was saved successfully
47 |                     alert('Data saved successfully. Inserted ID: ' + response);
48 |                 }
49 |             },
50 |             error: function(error) {
51 |                 // Handle the error response
52 |                 console.log(error);
53 |                 alert('Error saving data. Please try again later.');
54 |             }
55 |         });
56 |     });
57 | });
58 | 


--------------------------------------------------------------------------------
/public/JS/API.js:
--------------------------------------------------------------------------------
  1 | const express = require('express');
  2 | const path = require('path');
  3 | const router = express.Router();
  4 | const connection = require(path.join(__dirname, 'connection.js'));
  5 | 
  6 | // const getForm = (req, res) => {
  7 | //     const { username, lastname, gender } = req.body; // Assuming the form fields have the names "username" and "gender"
  8 |   
  9 | //     // Insert the form data into the database
 10 | //     const sql = 'INSERT INTO user (username, lastname, gender) VALUES (?, ?, ?)'; // Replace "your_table_name" with your actual table name
 11 | //     const values = [username, lastname ,gender];
 12 |     
 13 | //     connection.query(sql, values, (error, result) => {
 14 | //         if (error) {
 15 | //           console.error('Error saving data:', error);
 16 | //           res.send('Error saving data');
 17 | //         } else {
 18 | //           const insertedId = result.insertId; // Access the auto-incremented ID value
 19 | //           console.log('Data saved successfully. Inserted ID:', insertedId);
 20 | //           res.send('Data saved successfully. Inserted ID: ' + insertedId);
 21 | //         }
 22 | //     });
 23 | // };
 24 | 
 25 | // const getForm = (req, res) => {
 26 | //     const { username, lastname, gender } = req.body; // Assuming the form fields have the names "username", "lastname", and "gender"
 27 | 
 28 | //   // Check if the username already exists in the database
 29 | //     const checkUsernameSql = 'SELECT * FROM user WHERE username = ?';
 30 | //     connection.query(checkUsernameSql, [username], (error, results) => {
 31 | //         if (error) {
 32 | //             console.error('Error checking username:', error);
 33 | //             res.send('Error checking username');
 34 | //         } else {
 35 | //             if (results.length > 0) {
 36 | //               // Username already exists
 37 | //                 console.log('Username already exists:', username);
 38 | //                 res.send('Username already exists');
 39 | //             } else {
 40 | //               // Insert the form data into the database
 41 | //                 const insertSql = 'INSERT INTO user (username, lastname, gender) VALUES (?, ?, ?)';
 42 | //                 const values = [username, lastname ,gender];
 43 |             
 44 | //                 connection.query(insertSql, values, (error, result) => {
 45 | //                     if (error) {
 46 | //                         console.error('Error saving data:', error);
 47 | //                         res.send('Error saving data');
 48 | //                     } else {
 49 | //                         const insertedId = result.insertId; // Access the auto-incremented ID value
 50 | //                         console.log('Data saved successfully. Inserted ID:', insertedId);
 51 | //                         res.send('Data saved successfully. Inserted ID: ' + insertedId);
 52 | //                     }
 53 | //                 });
 54 | //             }
 55 | //         }
 56 | //     });
 57 | // };
 58 | 
 59 | const getForm = (req, res) => {
 60 |     const { username, gender } = req.body; // Assuming the form fields have the names "username" and "gender"
 61 |   
 62 |     // Check if the username already exists in the database
 63 |     const checkUsernameSql = 'SELECT * FROM user WHERE username = ?';
 64 |     connection.query(checkUsernameSql, [username], (error, results) => {
 65 |         if (error) {
 66 |             console.error('Error checking username:', error);
 67 |             res.send('Error checking username');
 68 |         } else {
 69 |             if (results.length > 0) {
 70 |                 // Username already exists
 71 |                 console.log('Username already exists:', username);
 72 |                 res.send('Username already exists');
 73 |             } else {
 74 |                 // Insert the form data into the database
 75 |                 let insertSql;
 76 |                 let values;
 77 |                 
 78 |                 if (req.body.lastname) {
 79 |                     // If lastname is provided in the form data
 80 |                     insertSql = 'INSERT INTO user (username, lastname, gender) VALUES (?, ?, ?)';
 81 |                     values = [username, req.body.lastname, gender];
 82 |                 } else {
 83 |                     // If lastname is not provided in the form data
 84 |                     insertSql = 'INSERT INTO user (username, gender) VALUES (?, ?)';
 85 |                     values = [username, gender];
 86 |                 }
 87 |                 
 88 |                 connection.query(insertSql, values, (error, result) => {
 89 |                     if (error) {
 90 |                         console.error('Error saving data:', error);
 91 |                         res.send('Error saving data');
 92 |                     } else {
 93 |                         const insertedId = result.insertId; // Access the auto-incremented ID value
 94 |                         console.log('Data saved successfully. Inserted ID:', insertedId);
 95 |                         res.send('Data saved successfully. Inserted ID: ' + insertedId);
 96 |                     }
 97 |                 });
 98 |             }
 99 |         }
100 |     });
101 | };
102 | 
103 | 
104 | router.post('/', getForm);
105 | 
106 | module.exports = router;


--------------------------------------------------------------------------------