Initially, I planned my schedule on what I'd be working on for each day but I had to skip today’s schedule. The #100daysofMiva coding challenge has quite a number of participants and we'd love to connect with each other on GitHub, LinkedIn, Devto and on any other blogging platform but there was a problem 🌚 we needed a platform to share our links for easy navigation. Of course, there's a lot of ways to get the job done but it's not bad to walk the “Coding Path” right? 🫠 Let's go 🥲🤞🏻
First things first, I narrowed down to the most important segments:
- A form,
- A database and
- A table.
For this project, I will be going through the modest way of parsing data and information.🌚
There's already a blog on how web communication works on this #100daysofMiva coding challenge.
From client to server than database also from server back to client. Please read through this blog if you are new to Web communication with API.
For this Project, I will be working on the
- Front-end: which is client with basic html, CSS, JS and a custom tailus UI CSS🌚. I may be a professional backend and API Dev but my front-end still aches😭.
- Backend: which is the server that'll communicate with the database in the three major backend languages… PHP, python and Nodejs 🌚. Trust me… backend is easier than front-end🙂↕️
- Database: where I’ll store the information from the form. For this project, I’ll be working with MySQL because why not?
Let’s Get started.
PART 1
Frontend
My fronted is based on just basic html and js. You can style it yourself. first, the code for the form in html
CODE
<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>
Documentation for the Link Submission Form
Overview
This form allows users to submit their profile links for GitHub, LinkedIn, Dev.to, and an optional personal portfolio. It is handled asynchronously using JavaScript to prevent a full page reload on form submission.
Elements
1. Message Display (div#message)
CODE
<div id="message"></div>
Purpose: This element is used to display feedback messages to the user after submitting the form, such as success or error messages.
Initial State: It is hidden by default usingdisplay: none;. The message becomes visible with appropriate text when the form is submitted successfully or when an error occurs.
Usage: JavaScript dynamically updates the text and visibility of this element based on the form submission status.
2. Form (form#linkForm)
CODE
<form id="linkForm" onsubmit="submitForm(event)">
<!-- Form Inputs Here -->
</form>
ID:linkForm
onsubmit: ThesubmitForm(event)function is called when the form is submitted. This function handles the form submission usingfetchto prevent a traditional form submission and reload.
Purpose: It gathers the user's input for their various profile links and sends it to the server via an asynchronous POST request.
3. GitHub Link (input#githubLink)
CODE
<label for="githubLink">GitHub Link</label>
<input type="url" id="githubLink" name="github" placeholder="Enter your GitHub profile link" required />
Type:url
ID:githubLink
Name:github
Required: Yes
Placeholder: "Enter your GitHub profile link"
Validation: This field expects a valid URL, enforced by theurlinput type andrequiredattribute. thesame goes for Linkedin, Devto and an optional portfolio
4. Submit Button (button#submitButton)
CODE
<button type="submit" id="submitButton">Submit</button>
Type:submit
ID:submitButton
Text: "Submit"
Function: This button triggers the form submission. It is disabled and its text changes to "Submitting..." while the form is being processed. Upon successful submission, the button shows "Submitted" and reverts back to "Submit" after a short delay.
JavaScript Behavior
The form is handled by the JavaScript function submitForm(event) that does the following:
- Prevents the default form submission.
- Uses
fetchto send the form data to the server asynchronously. - Shows the submission status in the
#messageelement. - Updates the form button (
#submitButton) to indicate progress. - On success, the submitted data is processed, and the form is reset.
Below is the said Javascript
CODE
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
});
That’s all for the client-side or front-end 🌚
Backend
- PHP
First, you set your connection to your database (I’m using MySQL) then a query to SELECT all data from Links and parse them into a JSON array. It’s easy.
CODE
<?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();
?>
- Nodejs
To get the links from the database using Node.js script using Express and MySQL, you'll need to set up a MySQL connection in Node.js, query the database, and return the results as JSON.
Prerequisites
- Make sure you have Node.js installed.
- Install the required Node.js packages using the following command:
CODE
npm install express mysql
Node.js Code (app.js)
CODE
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}`);
});
Explanation:
MySQL Connection:
- We use the
mysqlpackage to connect to the MySQL database with the same credentials you used in your PHP code.
- We use the
Route/getlinks:
- The
/getlinksroute handles the request and sends a query to the database to select thegithub,linkedin,devto, andportfoliofields from thelinkstable. - If the query is successful, the results are sent back as a JSON response.
- If an error occurs, it returns a 500 status with the error message.
- The
Starting the Server:
- The server listens on port 3000, and you can access the route by visiting
http://localhost:3000/getlinks.
- The server listens on port 3000, and you can access the route by visiting
Running the Code:
- Save the code above to
app.js. - Run the script using:
CODE
node app.js
Visit
http://localhost:3000/getlinksin your browser, and you should see the JSON output of the links from your MySQL database.Python
You can achieve the same functionality using Python with the Flask web framework and mysql-connector-python library for MySQL database connectivity. Here's how to write your PHP script in Python:
Prerequisites
- Make sure you have Python installed.
- Install the required packages using the following command:
CODE
pip install flask mysql-connector-python
Python Code (app.py)
CODE
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)
MySQL Connection:
- The
mysql.connector.connectfunction is used to connect to the MySQL database using the provided credentials.
- The
Route/getlinks:
- The
/getlinksroute executes the SQL query to fetch thegithub,linkedin,devto, andportfoliofields from thelinkstable. - The results are fetched as a list of dictionaries and returned as a JSON response using Flask's
jsonifyfunction.
- The
Starting the Server:
- The Flask app is configured to run on port 3000. When you run the script, you can access the route by visiting
http://localhost:3000/getlinks.
- The Flask app is configured to run on port 3000. When you run the script, you can access the route by visiting
Running the Code:
- Save the code above to
app.py. - Run the script using:
CODE
python app.py
- Open your browser and visit
http://localhost:3000/getlinksto see the JSON output of the links from your MySQL database.
This Python version does the same job as the original PHP script but leverages Python's Flask and MySQL connector libraries.
Bonus tip:
when deploying on a server,
passenger_wsgi.py
CODE
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
This marks the first phase of getting the links. I will keep you updated on part 2 for posting or saving the form data on the database. Let’s Go!
Vollständiger Original-Artikel
Den kompletten Beitrag mit allen Details direkt auf dev.to lesen.
SOCIAL SHARE CARD GENERATOR