Two servers and one PC Step 3
📦 PHP
✨ The Prompt Phrase
This guide is Step Three in a series on running two PHP servers on the same PC: XAMPP and Laragon. XAMPP will be modified while Laragon remains on default settings. In the MySQL configuration file selected in the previous step, change port 3306 to port 3307. Note that there are two instances to update, though the image shows only one.
💻 Code Preview
📦 All-in-One Code
<img src="DB_IMAGE" alt="Prompt Image" style="max-width:100%;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Servers and One PC Step 4 - Interactive Tutorial</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Fira+Code:wght@400;600&display=swap');
:root {
--primary: #667eea;
--secondary: #764ba2;
--accent: #f093fb;
--success: #4ade80;
--warning: #fbbf24;
--danger: #f87171;
--info: #3b82f6;
--mysql: #00758f;
--dark: #1a1a2e;
--darker: #0f0f1e;
--light: #eaeaea;
--glass: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
color: var(--light);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Progress Bar */
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--mysql), var(--info));
width: 0%;
transition: width 0.3s ease;
box-shadow: 0 0 10px var(--mysql);
}
/* Hero Section */
.hero {
text-align: center;
padding: 100px 20px 80px;
position: relative;
z-index: 1;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--mysql) 0%, transparent 70%);
opacity: 0.15;
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-badge {
display: inline-block;
padding: 8px 20px;
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 20px;
animation: fadeInDown 1s ease;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
background: linear-gradient(135deg, var(--mysql), var(--info));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
animation: fadeInDown 1s ease 0.2s backwards;
line-height: 1.2;
}
.hero-subtitle {
font-size: clamp(1rem, 2vw, 1.3rem);
opacity: 0.8;
margin-bottom: 40px;
animation: fadeInUp 1s ease 0.4s backwards;
}
.port-visual {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 40px 0;
flex-wrap: wrap;
animation: fadeIn 1s ease 0.6s backwards;
}
.port-box {
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 20px;
padding: 30px;
min-width: 200px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
text-align: center;
position: relative;
}
.port-box.old {
border-color: var(--danger);
opacity: 0.6;
}
.port-box.old::after {
content: '❌';
position: absolute;
top: -15px;
right: -15px;
font-size: 2rem;
}
.port-box.new {
border-color: var(--success);
animation: pulse 2s infinite;
}
.port-box.new::after {
content: '✅';
position: absolute;
top: -15px;
right: -15px;
font-size: 2rem;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
50% { box-shadow: 0 8px 32px rgba(0, 117, 143, 0.5); }
}
.arrow {
font-size: 3rem;
color: var(--mysql);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(10px); }
}
.port-number {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--mysql), var(--info));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mysql-logo {
font-size: 4rem;
margin-bottom: 15px;
}
/* Section Styles */
.section {
background: var(--glass);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: fadeInUp 0.8s ease;
position: relative;
z-index: 1;
}
.section h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 25px;
background: linear-gradient(135deg, var(--mysql), var(--info));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.section p {
font-size: clamp(1rem, 2vw, 1.1rem);
margin-bottom: 15px;
opacity: 0.9;
line-height: 1.8;
}
/* Code Editor Simulation */
.code-editor {
background: #1e1e1e;
border-radius: 15px;
padding: 20px;
margin: 25px 0;
border: 2px solid var(--mysql);
position: relative;
font-family: 'Fira Code', monospace;
}
.editor-header {
display: flex;
gap: 8px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.editor-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.editor-title {
margin-left: 15px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}
.code-line {
margin: 8px 0;
display: flex;
align-items: center;
}
.line-number {
color: rgba(255, 255, 255, 0.3);
margin-right: 20px;
min-width: 30px;
text-align: right;
user-select: none;
}
.code-content {
flex: 1;
}
.keyword { color: #569cd6; }
.property { color: #9cdcfe; }
.number { color: #b5cea8; }
.string { color: #ce9178; }
.comment { color: #6a9955; }
.highlight-old {
background: rgba(248, 113, 113, 0.2);
padding: 2px 6px;
border-radius: 4px;
text-decoration: line-through;
}
.highlight-new {
background: rgba(74, 222, 128, 0.2);
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
}
.copy-btn {
position: absolute;
top: 15px;
right: 15px;
padding: 8px 16px;
background: var(--mysql);
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: var(--info);
transform: scale(1.05);
}
.copy-btn.copied {
background: var(--success);
}
/* Screenshot Display */
.screenshot-container {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 20px;
margin: 25px 0;
border: 2px solid var(--warning);
}
.screenshot-img {
width: 100%;
max-width: 700px;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
margin: 20px auto;
display: block;
cursor: pointer;
transition: transform 0.3s ease;
}
.screenshot-img:hover {
transform: scale(1.02);
}
.screenshot-caption {
text-align: center;
color: var(--warning);
font-weight: 600;
margin-top: 15px;
font-size: 1.1rem;
}
/* Warning Box */
.warning-box {
background: rgba(251, 191, 36, 0.1);
border: 2px solid var(--warning);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
}
.warning-box h4 {
color: var(--warning);
font-size: 1.3rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
/* Accordion */
.accordion {
margin: 20px 0;
}
.accordion-item {
background: rgba(0, 117, 143, 0.1);
border: 2px solid var(--mysql);
border-radius: 15px;
margin: 15px 0;
overflow: hidden;
transition: all 0.3s ease;
}
.accordion-header {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 1.1rem;
transition: background 0.3s ease;
}
.accordion-header:hover {
background: rgba(0, 117, 143, 0.2);
}
.accordion-icon {
transition: transform 0.3s ease;
font-size: 1.5rem;
}
.accordion-item.active .accordion-icon {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 20px;
}
.accordion-item.active .accordion-content {
max-height: 2500px;
padding: 20px;
}
/* Step Cards */
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.step-card {
background: rgba(0, 117, 143, 0.1);
border: 2px solid var(--mysql);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
position: relative;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 117, 143, 0.4);
border-color: var(--info);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--mysql), var(--info));
border-radius: 50%;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 15px;
}
/* Search Visual */
.search-visual {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
border-left: 4px solid var(--info);
}
.search-box {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin: 15px 0;
}
.search-icon {
font-size: 1.5rem;
color: var(--info);
}
.search-input {
flex: 1;
background: transparent;
border: none;
color: var(--light);
font-family: 'Fira Code', monospace;
font-size: 1.1rem;
outline: none;
}
/* Quiz */
.quiz-container {
background: rgba(0, 117, 143, 0.1);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
border: 2px solid var(--mysql);
}
.quiz-question {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
}
.quiz-question h4 {
color: var(--info);
margin-bottom: 20px;
font-size: 1.2rem;
}
.quiz-option {
padding: 18px 24px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--glass-border);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
margin: 10px 0;
}
.quiz-option:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--mysql);
transform: translateX(5px);
}
.quiz-option.correct {
background: rgba(74, 222, 128, 0.2);
border-color: var(--success);
animation: correctAnswer 0.5s ease;
}
.quiz-option.incorrect {
background: rgba(248, 113, 113, 0.2);
border-color: var(--danger);
animation: shake 0.5s ease;
}
@keyframes correctAnswer {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.quiz-feedback {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
font-weight: 600;
display: none;
}
.quiz-feedback.show {
display: block;
animation: fadeIn 0.5s ease;
}
.quiz-score {
text-align: center;
font-size: 1.5rem;
margin-top: 30px;
padding: 20px;
background: linear-gradient(135deg, var(--mysql), var(--info));
border-radius: 15px;
font-weight: 700;
}
/* Cards */
.tip-card {
background: rgba(74, 222, 128, 0.1);
border-left: 4px solid var(--success);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
}
.mistake-card {
background: rgba(248, 113, 113, 0.1);
border-left: 4px solid var(--danger);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
}
.info-card {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid var(--info);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
}
/* Summary */
.summary-card {
background: linear-gradient(135deg, var(--mysql), var(--info));
border-radius: 25px;
padding: 50px;
margin: 40px 0;
box-shadow: 0 15px 50px rgba(0, 117, 143, 0.4);
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-top: 30px;
}
.summary-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
text-align: center;
}
.summary-item h4 {
color: white;
margin: 15px 0;
font-size: 1.1rem;
}
.summary-item p {
color: white;
opacity: 0.9;
font-size: 0.95rem;
}
/* Footer */
.footer {
text-align: center;
padding: 60px 20px 40px;
margin-top: 80px;
border-top: 2px solid var(--glass-border);
}
.badge {
display: inline-block;
padding: 8px 18px;
background: linear-gradient(135deg, var(--mysql), var(--info));
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin: 5px;
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--info);
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background: var(--darker);
color: var(--light);
text-align: center;
border-radius: 10px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity 0.3s;
border: 2px solid var(--mysql);
font-size: 0.9rem;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
pointer-events: none;
z-index: 9999;
animation: confettiFall 3s ease-out forwards;
}
@keyframes confettiFall {
to {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
/* Scroll Button */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--mysql), var(--info));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
z-index: 999;
font-size: 1.5rem;
}
.scroll-top.show {
opacity: 1;
}
.scroll-top:hover {
transform: scale(1.1);
}
/* Responsive */
@media (max-width: 768px) {
.hero {
padding: 80px 20px 60px;
}
.section {
padding: 25px;
}
.summary-card {
padding: 30px 20px;
}
.port-visual {
flex-direction: column;
}
.arrow {
transform: rotate(90deg);
}
}
</style>
</head>
<body>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- Scroll to Top -->
<div class="scroll-top" id="scrollTop" onclick="scrollToTop()">↑</div>
<div class="container">
<!-- Hero Section -->
<section class="hero">
<div class="hero-badge">🗄️ Dual Server Setup - Step 4: MySQL Configuration</div>
<h1>Configuring MySQL Ports</h1>
<p class="hero-subtitle">Change MySQL port from 3306 to 3307 to avoid database conflicts!</p>
<div class="port-visual">
<div class="port-box old">
<div class="mysql-logo">🐬</div>
<h3>Old MySQL Port</h3>
<div class="port-number">3306</div>
<p>Default MySQL Port</p>
</div>
<div class="arrow">→</div>
<div class="port-box new">
<div class="mysql-logo">🐬</div>
<h3>New MySQL Port</h3>
<div class="port-number">3307</div>
<p>Modified XAMPP Port</p>
</div>
</div>
</section>
<!-- What Is It Section -->
<section class="section">
<h2>🤔 What Are We Doing?</h2>
<p>
After configuring Apache ports in previous steps, we now need to configure <span class="tooltip"><strong>MySQL</strong><span class="tooltiptext">A popular database management system used to store website data</span></span> to prevent conflicts between XAMPP and Laragon's database servers.
</p>
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🎯 The Task</h4>
<p>We need to change MySQL's port from <strong>3306</strong> (default) to <strong>3307</strong> in XAMPP's configuration file.</p>
<p style="margin-top: 10px;"><strong>Important:</strong> There are TWO instances of "port=3306" that need to be changed, though the reference image shows only one example!</p>
</div>
<p style="margin-top: 20px;">
Think of MySQL ports like different phone numbers for your databases. Right now, both XAMPP and Laragon are trying to use the same number (3306). By giving XAMPP a different number (3307), both can answer calls independently! 📞
</p>
<div class="warning-box">
<h4>⚠️ Critical Note</h4>
<p>You must change BOTH occurrences of <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">port=3306</code> in the configuration file. Missing one will cause connection issues!</p>
</div>
</section>
<!-- Why Use It Section -->
<section class="section">
<h2>🌟 Why Change MySQL Ports?</h2>
<div class="steps-container">
<div class="step-card">
<div class="step-number">🔒</div>
<h4>Avoid Port Conflicts</h4>
<p>Prevents "MySQL is already running" errors when starting XAMPP!</p>
</div>
<div class="step-card">
<div class="step-number">🗄️</div>
<h4>Run Both Databases</h4>
<p>XAMPP and Laragon MySQL can run simultaneously without interference!</p>
</div>
<div class="step-card">
<div class="step-number">🎯</div>
<h4>Clear Organization</h4>
<p>Laragon databases on :3306, XAMPP databases on :3307 - easy to remember!</p>
</div>
<div class="step-card">
<div class="step-number">🛠️</div>
<h4>Professional Setup</h4>
<p>Mimics production environments where multiple database instances run!</p>
</div>
</div>
</section>
<!-- Visual Guide Section -->
<section class="section">
<h2>📸 Visual Reference Guide</h2>
<p>Here's the guide showing the MySQL port change:</p>
<div class="screenshot-container">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/DlFsO27VAuqSwzLJ.png?Expires=1771020177&Signature=l62~VsxnwWLJQOcAu7bdjAH2EOvtyhf6V~Bty9Tn6EgJx~tmcxYt7DXIcUwvMdoUz8GDVCcjq9HNJEzHj1JdDxjXrHuLI3JOFOzArRpCU9kJ2vEUL~dQzWYkDzYDzIz~~ERt2l3qNmr1E9AwnvuSGU-Va2K3jmgZ67ZspMbyV3~-VgO9RBzypmYoiMa3eFBlHatTvLHlVmfI5-bbCjvoauuCaQYhWjSUSUELu0RhAW8~tmCHSgAumXAzmDSwtQfL~70MTM7wCo7BGNyl6ZPk9mIZKGHbXh5vnmwSQbl5JnladDNgugmYvwIiOa1ma9GmS6FDs7IrEDnoiAXqaOn2Dw__&Key-Pair-Id=K3USGZIKWMDCSX" alt="MySQL Port Configuration" class="screenshot-img" onclick="this.style.transform = this.style.transform === 'scale(1.5)' ? 'scale(1)' : 'scale(1.5)'">
<p class="screenshot-caption">🖼️ MySQL port change guide (Click to zoom)</p>
</div>
<div class="info-card" style="margin-top: 25px;">
<h4 style="color: var(--info); margin-bottom: 15px;">🔍 What the Image Shows:</h4>
<ul style="line-height: 2;">
<li>🔍 <strong>Search Method:</strong> Use Ctrl+F to find "port=3306"</li>
<li>✏️ <strong>Change:</strong> port=3306 → port=3307</li>
<li>💾 <strong>Save:</strong> Press Ctrl+S to save changes</li>
<li>❌ <strong>Close:</strong> Close the file after saving</li>
</ul>
</div>
<div class="warning-box" style="margin-top: 25px;">
<h4>⚠️ Remember: TWO Instances!</h4>
<p>The image shows one example, but you need to find and change BOTH occurrences of "port=3306" in the file. Use Ctrl+F and click "Find Next" to locate both instances!</p>
</div>
</section>
<!-- How It Works Section -->
<section class="section">
<h2>⚙️ Step-by-Step Instructions</h2>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 1: Find the First "port=3306"</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--info); margin-bottom: 15px;">🔍 Searching for the Configuration</h4>
<div class="search-visual">
<p><strong>Step 1:</strong> Press <kbd style="background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 5px;">Ctrl + F</kbd> to open the search dialog</p>
<div class="search-box">
<span class="search-icon">🔍</span>
<input type="text" class="search-input" value="port=3306" readonly>
</div>
<p><strong>Step 2:</strong> Type "port=3306" in the search box</p>
<p><strong>Step 3:</strong> Press Enter to find the FIRST occurrence</p>
</div>
<h4 style="color: var(--info); margin: 25px 0 15px;">✏️ Making the First Change</h4>
<div class="code-editor">
<div class="editor-header">
<div class="editor-dot dot-red"></div>
<div class="editor-dot dot-yellow"></div>
<div class="editor-dot dot-green"></div>
<span class="editor-title">my.ini</span>
</div>
<button class="copy-btn" onclick="copyCode(this, 'port=3307')">📋 Copy</button>
<div class="code-line">
<span class="line-number">15</span>
<span class="code-content"><span class="comment"># The MySQL server configuration</span></span>
</div>
<div class="code-line">
<span class="line-number">16</span>
<span class="code-content"><span class="keyword">[mysqld]</span></span>
</div>
<div class="code-line">
<span class="line-number">17</span>
<span class="code-content"><span class="property">port</span>=<span class="highlight-old number">3306</span></span>
</div>
<div class="code-line">
<span class="line-number">18</span>
<span class="code-content"><span class="property">port</span>=<span class="highlight-new number">3307</span> <span class="comment">← Change to this!</span></span>
</div>
<div class="code-line">
<span class="line-number">19</span>
<span class="code-content"><span class="property">socket</span>=<span class="string">"C:/xampp/mysql/mysql.sock"</span></span>
</div>
</div>
<div class="tip-card">
<p>💡 <strong>Pro Tip:</strong> This first instance is usually under the <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">[mysqld]</code> section, which configures the MySQL server itself.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 2: Find the Second "port=3306"</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--info); margin-bottom: 15px;">🔍 Finding the Second Instance</h4>
<div class="search-visual">
<p><strong>Important:</strong> After changing the first one, keep the search dialog open!</p>
<p><strong>Step 1:</strong> Click "Find Next" or press <kbd style="background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 5px;">F3</kbd></p>
<p><strong>Step 2:</strong> The search will jump to the SECOND occurrence of "port=3306"</p>
<p><strong>Step 3:</strong> Change this one too!</p>
</div>
<h4 style="color: var(--info); margin: 25px 0 15px;">✏️ Making the Second Change</h4>
<div class="code-editor">
<div class="editor-header">
<div class="editor-dot dot-red"></div>
<div class="editor-dot dot-yellow"></div>
<div class="editor-dot dot-green"></div>
<span class="editor-title">my.ini</span>
</div>
<button class="copy-btn" onclick="copyCode(this, 'port=3307')">📋 Copy</button>
<div class="code-line">
<span class="line-number">42</span>
<span class="code-content"><span class="comment"># The MySQL client configuration</span></span>
</div>
<div class="code-line">
<span class="line-number">43</span>
<span class="code-content"><span class="keyword">[client]</span></span>
</div>
<div class="code-line">
<span class="line-number">44</span>
<span class="code-content"><span class="property">port</span>=<span class="highlight-old number">3306</span></span>
</div>
<div class="code-line">
<span class="line-number">45</span>
<span class="code-content"><span class="property">port</span>=<span class="highlight-new number">3307</span> <span class="comment">← Change this one too!</span></span>
</div>
<div class="code-line">
<span class="line-number">46</span>
<span class="code-content"><span class="property">socket</span>=<span class="string">"C:/xampp/mysql/mysql.sock"</span></span>
</div>
</div>
<div class="warning-box">
<h4>⚠️ Why Two Changes?</h4>
<p><strong>[mysqld]:</strong> Configures the MySQL SERVER (the database engine)</p>
<p><strong>[client]:</strong> Configures MySQL CLIENTS (tools like phpMyAdmin, command line)</p>
<p style="margin-top: 10px;">Both must match! If they don't, your applications won't be able to connect to the database.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 3: Save and Restart MySQL</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--info); margin-bottom: 15px;">💾 Saving Your Changes</h4>
<ol style="line-height: 2;">
<li>Press <kbd style="background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 5px;">Ctrl + S</kbd> to save the file</li>
<li>Or click <strong>File → Save</strong> in your text editor</li>
<li>Close the text editor</li>
<li>Verify both changes were saved (reopen the file if unsure)</li>
</ol>
<h4 style="color: var(--info); margin: 25px 0 15px;">🔄 Restarting MySQL</h4>
<ol style="line-height: 2;">
<li>Go back to XAMPP Control Panel</li>
<li>If MySQL is running, click <strong>Stop</strong></li>
<li>Wait 3-5 seconds for it to fully stop</li>
<li>Click <strong>Start</strong> to restart MySQL</li>
<li>Check that it starts without errors! ✅</li>
</ol>
<div class="info-card" style="margin-top: 20px;">
<p>📊 <strong>Success Indicator:</strong> In the XAMPP Control Panel, MySQL should now show port <strong>3307</strong> instead of 3306 in the Port(s) column!</p>
</div>
<h4 style="color: var(--info); margin: 25px 0 15px;">🧪 Testing the Connection</h4>
<p>After restarting, test your database connection:</p>
<ol style="line-height: 2; margin-top: 15px;">
<li>Open your browser</li>
<li>Navigate to: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">http://localhost:8080/phpmyadmin</code></li>
<li>You should see the phpMyAdmin interface</li>
<li>If you see a connection error, double-check both port changes!</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Code Breakdown Section -->
<section class="section">
<h2>📝 Understanding the Configuration</h2>
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 15px;">🗄️ [mysqld] Section</h4>
<p><strong>What it does:</strong> Configures the MySQL server daemon (the main database engine).</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin: 15px 0; font-family: 'Fira Code', monospace;">
[mysqld]<br>
port=3307
</div>
<p><strong>Meaning:</strong> "MySQL server, listen for connections on port 3307."</p>
<p style="margin-top: 10px;"><strong>Result:</strong> The database engine runs on port 3307.</p>
</div>
<div class="info-card" style="margin-top: 25px;">
<h4 style="color: var(--info); margin-bottom: 15px;">💻 [client] Section</h4>
<p><strong>What it does:</strong> Configures MySQL client tools (phpMyAdmin, mysql command line, etc.).</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin: 15px 0; font-family: 'Fira Code', monospace;">
[client]<br>
port=3307
</div>
<p><strong>Meaning:</strong> "MySQL clients, connect to the server on port 3307."</p>
<p style="margin-top: 10px;"><strong>Result:</strong> Tools like phpMyAdmin know which port to use.</p>
</div>
<div class="tip-card" style="margin-top: 25px;">
<h4 style="color: var(--success); margin-bottom: 10px;">🎯 Why Both Must Match</h4>
<p><strong>Server (mysqld):</strong> "I'm listening on port 3307"</p>
<p><strong>Client:</strong> "I'll connect to port 3307"</p>
<p style="margin-top: 10px;">If they don't match, the client will try to connect to the wrong port and fail! It's like calling the wrong phone number. 📞</p>
</div>
</section>
<!-- Common Mistakes Section -->
<section class="section">
<h2>⚠️ Common Mistakes</h2>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Changing Only ONE Instance</h4>
<p><strong>Problem:</strong> Changing port in [mysqld] but forgetting [client] (or vice versa)</p>
<p><strong>Result:</strong> MySQL starts but phpMyAdmin and other tools can't connect!</p>
<p><strong>Fix:</strong> Always change BOTH instances. Use Ctrl+F and "Find Next" to locate both!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Typo in Port Number</h4>
<p><strong>Problem:</strong> Typing "3370" or "3077" instead of "3307"</p>
<p><strong>Result:</strong> MySQL won't start or connections fail</p>
<p><strong>Fix:</strong> Double-check: it's <strong>3307</strong> (three-three-zero-seven)</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Editing the Wrong File</h4>
<p><strong>Problem:</strong> Editing a different .ini file or the wrong section</p>
<p><strong>Result:</strong> Changes have no effect</p>
<p><strong>Fix:</strong> Make sure you're editing <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">my.ini</code> in the MySQL config folder (accessed from XAMPP Control Panel → MySQL Config button)</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Not Updating phpMyAdmin Configuration</h4>
<p><strong>Problem:</strong> Changing MySQL port but not updating phpMyAdmin's config</p>
<p><strong>Result:</strong> phpMyAdmin shows "Cannot connect to MySQL server"</p>
<p><strong>Fix:</strong> Edit <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">config.inc.php</code> in phpMyAdmin folder and change the port there too!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Forgetting to Restart MySQL</h4>
<p><strong>Problem:</strong> Making changes but not restarting the MySQL service</p>
<p><strong>Result:</strong> Changes don't take effect, old port still in use</p>
<p><strong>Fix:</strong> Always Stop and Start MySQL after editing config files!</p>
</div>
</section>
<!-- Pro Tips Section -->
<section class="section">
<h2>🚀 Pro Tips</h2>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Verify Both Changes</h4>
<p>After making changes, verify both were saved:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Save and close the file</li>
<li>Reopen my.ini</li>
<li>Press Ctrl+F and search for "3306"</li>
<li>If you find any, you missed one!</li>
<li>Search for "3307" - you should find exactly TWO instances</li>
</ol>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Update phpMyAdmin Configuration</h4>
<p>Don't forget to update phpMyAdmin to use the new port:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Open: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">C:\xampp\phpMyAdmin\config.inc.php</code></li>
<li>Find: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">$cfg['Servers'][$i]['port'] = '3306';</code></li>
<li>Change to: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">$cfg['Servers'][$i]['port'] = '3307';</code></li>
<li>Save the file</li>
</ol>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Update Your Database Connection Strings</h4>
<p>If you have existing PHP projects, update their database connections:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 10px; font-family: 'Fira Code', monospace; font-size: 0.9rem;">
// Old connection<br>
$conn = mysqli_connect("localhost", "root", "", "mydb");<br>
<br>
// New connection with port<br>
$conn = mysqli_connect("localhost:3307", "root", "", "mydb");
</div>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Test with Command Line</h4>
<p>Verify MySQL is running on the correct port:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Open Command Prompt</li>
<li>Navigate to: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">cd C:\xampp\mysql\bin</code></li>
<li>Run: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">mysql -u root -P 3307</code></li>
<li>If you see the MySQL prompt, it's working! 🎉</li>
</ol>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Document Your Port Assignments</h4>
<p>Keep a reference document with all your port configurations:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 10px;">
<strong>🟠 XAMPP Ports:</strong><br>
• Apache HTTP: 8080<br>
• Apache HTTPS: 4443<br>
• MySQL: 3307 ← New!<br>
<br>
<strong>🔵 Laragon Ports:</strong><br>
• Apache HTTP: 80<br>
• Apache HTTPS: 443<br>
• MySQL: 3306 (default)
</div>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Backup Before Editing</h4>
<p>Always backup configuration files before editing:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Copy <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">my.ini</code></li>
<li>Paste it in the same folder</li>
<li>Rename to <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">my.ini.backup</code></li>
<li>Now edit the original safely!</li>
</ol>
</div>
</section>
<!-- Quiz Section -->
<section class="section">
<h2>🎯 Knowledge Check</h2>
<p>Test your understanding of MySQL port configuration!</p>
<div class="quiz-container">
<div class="quiz-question">
<h4>Question 1: How many instances of "port=3306" need to be changed?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">A) One instance</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 0)">B) Two instances</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">C) Three instances</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">D) It depends on your setup</div>
<div class="quiz-feedback" id="feedback0"></div>
</div>
<div class="quiz-question">
<h4>Question 2: What should "port=3306" be changed to?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">A) port=3370</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">B) port=3307</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">C) port=8080</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">D) port=3308</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4>Question 3: Which TWO sections need the port change?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">A) [mysql] and [server]</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">B) [mysqld] and [client]</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">C) [database] and [connection]</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">D) [server] and [client]</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-score" id="quizScore" style="display: none;">
🎉 You scored <span id="scoreValue">0</span>/3! <span id="scoreMessage"></span>
</div>
</div>
</section>
<!-- Summary Card -->
<section class="summary-card">
<h2 style="color: white; text-align: center; margin-bottom: 40px;">📚 Quick Reference - Step 4</h2>
<div class="summary-grid">
<div class="summary-item">
<div style="font-size: 3rem;">1️⃣</div>
<h4>Find First</h4>
<p>[mysqld] port=3306 → 3307</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">2️⃣</div>
<h4>Find Second</h4>
<p>[client] port=3306 → 3307</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">3️⃣</div>
<h4>Save File</h4>
<p>Press Ctrl+S to save changes</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">4️⃣</div>
<h4>Restart MySQL</h4>
<p>Stop and Start in XAMPP panel</p>
</div>
</div>
<div style="margin-top: 40px; padding: 25px; background: rgba(0,0,0,0.3); border-radius: 15px;">
<h3 style="color: white; margin-bottom: 20px; text-align: center;">🔑 Key Takeaways</h3>
<ul style="color: white; line-height: 2; font-size: 1.05rem;">
<li>✅ Change BOTH instances of port=3306 to port=3307</li>
<li>✅ First instance is in [mysqld] section (server)</li>
<li>✅ Second instance is in [client] section (tools)</li>
<li>✅ Use Ctrl+F and "Find Next" to locate both</li>
<li>✅ Save the file and restart MySQL service</li>
<li>✅ Update phpMyAdmin config if needed</li>
</ul>
</div>
<div style="margin-top: 30px; text-align: center;">
<p style="color: white; font-size: 1.2rem; margin-bottom: 15px;">🎯 Configuration Complete!</p>
<p style="color: white; opacity: 0.8;">You've successfully configured both Apache and MySQL ports. XAMPP and Laragon can now run together peacefully! 🎉</p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<h3 style="background: linear-gradient(135deg, var(--mysql), var(--info)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">🎉 Step 4 Complete!</h3>
<p style="margin: 20px 0;">You've successfully configured MySQL to work alongside Laragon!</p>
<div>
<div class="badge">🖥️ XAMPP</div>
<div class="badge">🔵 Laragon</div>
<div class="badge">🗄️ MySQL</div>
<div class="badge">🔌 Port 3307</div>
<div class="badge">✅ Dual Setup Complete</div>
</div>
<p style="margin-top: 30px; opacity: 0.7;">
📖 Generated by <strong>AI Prompt Dictionary</strong>
</p>
<p style="font-size: 0.9rem; opacity: 0.6; margin-top: 10px;">
© 2026 Interactive Tutorial System
</p>
</footer>
</div>
<script>
// Progress Bar
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('progressBar').style.width = scrolled + '%';
});
// Scroll to Top
window.addEventListener('scroll', () => {
const scrollTop = document.getElementById('scrollTop');
if (window.scrollY > 300) {
scrollTop.classList.add('show');
} else {
scrollTop.classList.remove('show');
}
});
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Copy Code
function copyCode(button, text) {
navigator.clipboard.writeText(text).then(() => {
button.textContent = '✓ Copied!';
button.classList.add('copied');
setTimeout(() => {
button.textContent = '📋 Copy';
button.classList.remove('copied');
}, 2000);
});
}
// Accordion
function toggleAccordion(header) {
const item = header.parentElement;
const wasActive = item.classList.contains('active');
document.querySelectorAll('.accordion-item').forEach(el => {
el.classList.remove('active');
});
if (!wasActive) {
item.classList.add('active');
}
}
// Quiz
let quizScore = 0;
let questionsAnswered = 0;
function checkAnswer(element, isCorrect, questionIndex) {
const options = element
Live Preview