Day 2: Solving simple problem with codes

<div id="message"></div>
<form id="linkForm" onsubmit="submitForm(event)">
    <label for="githubLink">GitHub Link</label>
    <input type="url" id="githubLink" name="github" placeholder="Enter your GitHub profile link" required />

    <label for="linkedinLink">LinkedIn Link</label>
    <input type="url" id="linkedinLink" name="linkedin" placeholder="Enter your LinkedIn profile link" required />

    <label for="devtoLink">Dev.to Link</label>
    <input type="url" id="devtoLink" name="devto" placeholder="Enter your Dev.to profile link" required />

    <label for="portfolioLink">Portfolio Link (Optional)</label>
    <input type="url" id="portfolioLink" name="portfolio" placeholder="Enter your personal portfolio link" />

    <button type="submit" id="submitButton">Submit</button>
</form>

<div id="message"></div>

<form id="linkForm" onsubmit="submitForm(event)">
    <!-- Form Inputs Here -->
</form>

<label for="githubLink">GitHub Link</label>
<input type="url" id="githubLink" name="github" placeholder="Enter your GitHub profile link" required />

<button type="submit" id="submitButton">Submit</button>

 function submitForm(event) {
     // Prevent the form from submitting the default way
     event.preventDefault(); 

     // Assign the form data to constants
     const formData = new FormData(document.getElementById('linkForm'));
     const submitButton = document.getElementById('submitButton');

     // I like dynamic UX so... this changes the button text
     submitButton.innerText = 'Submitting... Please wait';
     submitButton.classList.add('submitting');
     submitButton.disabled = true;

     // Use fetch to send the form data to the server or backend
     fetch('./addlinks', {
             method: 'POST',
             body: formData
         })
         .then(response => response.json()) // Parse the response as JSON
         .then(data => {
             if (data.message) {
                 document.getElementById('message').innerText = data.message;
                 document.getElementById('message').style.display = 'block';
             }

             loadLinks(); // Refresh the links table
             document.getElementById('linkForm').reset(); // Reset the form fields

             submitButton.innerText = 'Submitted';
             submitButton.classList.remove('submitting');
             submitButton.classList.add('submitted');

             setTimeout(() => {
                 submitButton.innerText = 'Submit';
                 submitButton.classList.remove('submitted');
                 submitButton.disabled = false;
             }, 2000); // Reset the button state after 2 seconds
         })
         .catch(error => {
             console.error('Error:', error);
             document.getElementById('message').innerText = 'Error submitting the form. Please try again.';
             document.getElementById('message').style.display = 'block';

             submitButton.innerText = 'Submit';
             submitButton.classList.remove('submitting');
             submitButton.disabled = false;
         });

 }

 // This script fetches the links from the server or backend and populate the table
 function loadLinks() {
    fetch('./links')
         .then(response => response.json())
         .then(data => {
             const tableBody = document.getElementById('linksTableBody');
             tableBody.innerHTML = ''; // Clear any existing rows

             data.forEach(link => {
                 const row = document.createElement('tr');
                 row.innerHTML = `
                        <td><a href="${link.github}" target="_blank">${link.github}</a></td>
                        <td><a href="${link.linkedin}" target="_blank">${link.linkedin}</a></td>
                        <td><a href="${link.devto}" target="_blank">${link.devto}</a></td>
                        <td><a href="${link.portfolio ? link.portfolio : '#'}" target="_blank">${link.portfolio ? link.portfolio : 'N/A'}</a></td>
                    `;
                 tableBody.appendChild(row);
             });
         })
         .catch(error => console.error('Error:', error));
 }

//Lastly, this script loads the table data when the page loads
document.addEventListener('DOMContentLoaded', function() {
     loadLinks(); // Load the links when the page loads
 });

<?php
// Database connection parameters
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "links";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Set the content type to JSON
header('Content-Type: application/json');

// Fetch all links
$sql = "SELECT github, linkedin, devto, portfolio FROM links";
$result = $conn->query($sql);

$links = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $links[] = $row;
    }
}

// Return JSON encoded array of links
echo json_encode($links);

$conn->close();
?>

npm install express mysql

const express = require('express');
const mysql = require('mysql');

const app = express();

// Database connection parameters
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'links'
});

// Connect to the database
db.connect((err) => {
    if (err) {
        console.error('Database connection failed: ' + err.stack);
        return;
    }
    console.log('Connected to the database.');
});

// Set up /getlinks route
app.get('/getlinks', (req, res) => {
    const sql = 'SELECT github, linkedin, devto, portfolio FROM links';

    db.query(sql, (err, result) => {
        if (err) {
            return res.status(500).json({ error: err.message });
        }
        res.json(result);
    });
});

// Start the server
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on <http://localhost>:${PORT}`);
});

node app.js

pip install flask mysql-connector-python

from flask import Flask, jsonify
import mysql.connector
from mysql.connector import Error

app = Flask(__name__)

# Database connection parameters
db_config = {
    'host': 'localhost',
    'user': 'root',
    'password': '',
    'database': 'links'
}

def get_db_connection():
    try:
        connection = mysql.connector.connect(**db_config)
        if connection.is_connected():
            print('Connected to the database.')
            return connection
    except Error as e:
        print(f"Error while connecting to MySQL: {e}")
        return None

@app.route('/getlinks', methods=['GET'])
def get_links():
    connection = get_db_connection()
    if connection is None:
        return jsonify({'error': 'Failed to connect to database'}), 500

    cursor = connection.cursor(dictionary=True)
    cursor.execute("SELECT github, linkedin, devto, portfolio FROM links")

    links = cursor.fetchall()
    cursor.close()
    connection.close()

    return jsonify(links)

if __name__ == '__main__':
    app.run(port=3000)

python app.py

import sys
import os

# Add the current directory to the sys.path
sys.path.insert(0, os.path.dirname(__file__))

# Import the Flask app (assuming app.py contains your Flask app)
from app import app as application