How to Connect HTML, JavaScript, PHP, and Python Projects with Localhost XAMPP MySQL

ibnsina January 12, 2026

 

Connecting a web project to a database is a core skill for any developer. In this blog, I’ll explain how to connect HTML, JavaScript, PHP, and Python projects with MySQL using localhost XAMPP, in a simple and practical way.

This guide is beginner-friendly and works perfectly for student projects, assignments, and local development.


What Is XAMPP?

XAMPP is a free local server package that includes:

  • Apache – Web server

  • MySQL (MariaDB) – Database

  • PHP – Server-side scripting

  • phpMyAdmin – Web-based database manager

Using XAMPP, we can run websites and databases locally (localhost) without buying hosting.

Step 1: Install and Start XAMPP

  1. Download XAMPP from the official website

  2. Install it

  3. Open XAMPP Control Panel

  4. Start:

    • ✅ Apache

    • ✅ MySQL

If both turn green, your local server is running.

Step 2: Create a MySQL Database (phpMyAdmin)

  1. Open your browser

  2. Go to:

    http://localhost/phpmyadmin

  3. Click New

  4. Create a database, for example:

    project_db

Example Table

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

Project Folder Structure (Important)

All PHP files must be inside:

C:\xampp\htdocs\

Example project:

htdocs/
 └── myproject/
     ├── index.html
     ├── save.php
     └── db.php

Step 3: Connect PHP with MySQL (XAMPP)

db.php (Database Connection)

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db   = "project_db";

$conn = mysqli_connect($host, $user, $pass, $db);

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>

save.php (Insert Data)

<?php
include "db.php";

$name  = $_POST['name'];
$email = $_POST['email'];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
mysqli_query($conn, $sql);

echo "Data saved successfully";
?>

index.html (Frontend Form)

<!DOCTYPE html>
<html>
<body>
  <form action="save.php" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Run in browser:

http://localhost/myproject/index.html

Step 4: Using JavaScript (AJAX / Fetch API)

JavaScript cannot directly connect to MySQL.
It must send data to PHP or Python.

JavaScript (Fetch API)

<script>
fetch("save.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "name=Alex&email=alex@gmail.com"
})
.then(res => res.text())
.then(data => console.log(data));
</script>

✔ JavaScript → PHP → MySQL
❌ JavaScript → MySQL (not allowed)

Step 5: Connecting Python with MySQL (Localhost)

Python usually works separately from XAMPP, but connects to the same MySQL server.

Install MySQL Connector

pip install mysql-connector-python

Python Connection Example

import mysql.connector

conn = mysql.connector.connect(
    host="localhost",
    user="root",
    password="",
    database="project_db"
)

cursor = conn.cursor()
cursor.execute(
    "INSERT INTO users (name, email) VALUES (%s, %s)",
    ("John", "john@gmail.com")
)

conn.commit()
print("Data inserted")

Python Web App + MySQL (Flask Example)

If you want Python like PHP (web-based):

pip install flask mysql-connector-python

from flask import Flask, request
import mysql.connector

app = Flask(__name__)

@app.route("/save", methods=["POST"])
def save():
    conn = mysql.connector.connect(
        host="localhost",
        user="root",
        password="",
        database="project_db"
    )
    cursor = conn.cursor()
    cursor.execute(
        "INSERT INTO users (name,email) VALUES (%s,%s)",
        (request.form['name'], request.form['email'])
    )
    conn.commit()
    return "Saved successfully"

app.run(debug=True)

Run:

http://127.0.0.1:5000/save

Common Mistakes (Very Important)

❌ Opening HTML file directly
✔ Always use:

http://localhost/project/

❌ JavaScript connecting to MySQL
✔ Use PHP / Python as backend

❌ Wrong database name
✔ Match phpMyAdmin database exactly

❌ Apache or MySQL not started
✔ Start both from XAMPP Control Panel

Technology Flow Diagram (Simple)

HTML / JavaScript
        ↓
   PHP / Python
        ↓
      MySQL

When to Use What?

TechnologyUse Case
HTMLFrontend UI
JavaScriptInteractivity & AJAX
PHPSimple backend with XAMPP
PythonML, AI, APIs, Flask/Django
MySQLDatabase

Final Words

XAMPP is the best starting point for learning full-stack development. Once you understand this flow, you can easily move to live hosting, cloud servers, or Docker.

This setup is perfect for:

  • Student projects

  • University assignments

  • Practice full-stack development

  • ML + Web integration

ibnsina

Posted by ibnsina

Post a Comment

0 Comments