Two servers and one PC Step 4
📦 PHP
✨ The Prompt Phrase
This guide is step Four 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 previous step we have selected the MySQL configuration file Now change these two pieces of information Look at the image Thank you.
💻 Code Preview
📦 All-in-One Code
<img src="DB_IMAGE" alt="Prompt Image" style="max-width:100%;">
I'll create a comprehensive, interactive HTML tutorial for Step 5 of the dual server setup, focusing on the MySQL configuration changes shown in the image.
```html
<!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 5 - 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;
}
.config-visual {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
animation: fadeIn 1s ease 0.6s backwards;
}
.config-box {
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
position: relative;
}
.config-box:hover {
transform: translateY(-10px);
box-shadow: 0 15px 50px rgba(0, 117, 143, 0.5);
border-color: var(--mysql);
}
.config-icon {
font-size: 3rem;
margin-bottom: 15px;
display: block;
}
.config-box h3 {
color: var(--info);
margin-bottom: 15px;
font-size: 1.3rem;
}
.config-change {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 10px;
margin: 10px 0;
font-family: 'Fira Code', monospace;
}
.old-value {
color: var(--danger);
text-decoration: line-through;
opacity: 0.7;
}
.new-value {
color: var(--success);
font-weight: 600;
}
/* 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: #c586c0; }
.property { color: #9cdcfe; }
.number { color: #b5cea8; }
.string { color: #ce9178; }
.comment { color: #6a9955; }
.section-header { color: #4ec9b0; }
.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;
}
/* Comparison Table */
.comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.comparison-card {
background: rgba(0, 117, 143, 0.1);
border: 2px solid var(--mysql);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
}
.comparison-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 117, 143, 0.4);
}
.comparison-card h4 {
color: var(--info);
margin-bottom: 15px;
font-size: 1.2rem;
}
/* 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;
}
/* 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;
}
.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;
}
/* 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;
}
}
</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 5: Final MySQL Configuration</div>
<h1>Completing MySQL Port Setup</h1>
<p class="hero-subtitle">Update client and server port settings to finalize your dual-server configuration!</p>
<div class="config-visual">
<div class="config-box">
<span class="config-icon">📝</span>
<h3>Change #1: Client Port</h3>
<div class="config-change">
<div class="old-value">port=3306</div>
<div style="text-align: center; margin: 5px 0;">↓</div>
<div class="new-value">port=3307</div>
</div>
<p style="margin-top: 15px;">Under <code style="background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px;"># client section</code></p>
</div>
<div class="config-box">
<span class="config-icon">⚙️</span>
<h3>Change #2: Server Port</h3>
<div class="config-change">
<div class="old-value">port=3307</div>
<div style="text-align: center; margin: 5px 0;">↓</div>
<div class="new-value">port=3307</div>
</div>
<p style="margin-top: 15px;">Under <code style="background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px;"># The MySQL server</code></p>
</div>
</div>
</section>
<!-- What Is It Section -->
<section class="section">
<h2>🤔 What Are We Doing Now?</h2>
<p>
This is the final step in configuring MySQL for your dual-server setup! We're making sure that <span class="tooltip"><strong>both the client and server sections</strong><span class="tooltiptext">Client = tools that connect to MySQL; Server = the MySQL database engine itself</span></span> are using the correct port (3307) in the configuration file.
</p>
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🎯 What the Image Shows</h4>
<p>The screenshot displays TWO critical sections in the <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">my.ini</code> file:</p>
<ol style="line-height: 2; margin-top: 15px;">
<li><strong>Client Section:</strong> Where MySQL client tools (like phpMyAdmin) look for the database</li>
<li><strong>Server Section ([mysqld]):</strong> Where the MySQL server itself listens for connections</li>
</ol>
</div>
<p style="margin-top: 20px;">
Think of it like a phone system: the server is the phone number where you receive calls (3307), and the client is the number you dial to make calls (also 3307). They must match! ☎️
</p>
<div class="warning-box">
<h4>⚠️ Important Context</h4>
<p>This step assumes you've already opened the MySQL configuration file (my.ini) from the XAMPP Control Panel in previous steps. If you haven't, go back to Step 3 to learn how to access this file!</p>
</div>
</section>
<!-- Why Use It Section -->
<section class="section">
<h2>🌟 Why These Two Changes Matter</h2>
<div class="comparison-grid">
<div class="comparison-card">
<h4>🔧 Client Configuration</h4>
<p><strong>Purpose:</strong> Tells MySQL client tools where to connect</p>
<p style="margin-top: 10px;"><strong>Affects:</strong></p>
<ul style="line-height: 2; margin-top: 10px;">
<li>phpMyAdmin</li>
<li>MySQL Workbench</li>
<li>Command-line mysql client</li>
<li>Your PHP applications</li>
</ul>
</div>
<div class="comparison-card">
<h4>⚙️ Server Configuration</h4>
<p><strong>Purpose:</strong> Tells MySQL server which port to listen on</p>
<p style="margin-top: 10px;"><strong>Affects:</strong></p>
<ul style="line-height: 2; margin-top: 10px;">
<li>MySQL daemon process</li>
<li>Incoming connections</li>
<li>Port binding</li>
<li>Network accessibility</li>
</ul>
</div>
</div>
<div class="tip-card" style="margin-top: 30px;">
<h4 style="color: var(--success); margin-bottom: 10px;">💡 Why Both Must Be 3307</h4>
<p>If the client says "connect to 3306" but the server is listening on 3307, they'll never find each other! It's like texting someone at the wrong number - the message never arrives. 📱</p>
</div>
</section>
<!-- Visual Guide Section -->
<section class="section">
<h2>📸 Visual Reference</h2>
<p>Here's the exact configuration shown in your setup guide:</p>
<div class="screenshot-container">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/IVjj00XYUk4SVmFW.png?Expires=1771021336&Signature=Pz6tVyzXONu9abBH3dP7LfdvAS7~rHgnXGYfcOOBtuE9W04LYTyOdfeZLQXyrpXYs6oC~QpFv1tGVqydifWm16p5OB9p37kYRZVRz9mineH-0KxkNzEa6mjd~5lgqN86XG3jR9Px~jR28cBSGOzqdbSqi3WkjtQ-rJ8yNycgLojiV~512eoZKSuFSvDjhCWbbHjRfJ6F6ejgL7TLyxmyGJRn9W~~VqfAlUolkU6LCzqO11hapVciO3n2MoEdjb~GF8UqU7aVQ1bvSMkcK7yDBzAYjRXsryEAfuRAfWfFkUkOy8~xUYuxb0eXJUZ9-z2mWOjl-tVZSVbjUFrOpc0Hvw__&Key-Pair-Id=K3USGZIKWMDCSX" alt="MySQL Configuration Changes" class="screenshot-img" onclick="this.style.transform = this.style.transform === 'scale(1.5)' ? 'scale(1)' : 'scale(1.5)'">
<p class="screenshot-caption">🖼️ Complete MySQL port configuration (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>Top Section:</strong> File path showing MySQL → Config → my.ini</li>
<li>📝 <strong>Client Section:</strong> port=3307 and socket configuration</li>
<li>⚙️ <strong>Server Section ([mysqld]):</strong> port=3307 configuration</li>
<li>✅ <strong>Both ports:</strong> Correctly set to 3307</li>
</ul>
</div>
</section>
<!-- How It Works Section -->
<section class="section">
<h2>⚙️ Detailed Configuration Breakdown</h2>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Understanding the Client Section</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--info); margin-bottom: 15px;">📝 Client Configuration Explained</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 - Client Section</span>
</div>
<button class="copy-btn" onclick="copyCode(this, '[client]\nport=3307\nsocket="C:/xampp/mysql/mysql.sock"')">📋 Copy</button>
<div class="code-line">
<span class="line-number">1</span>
<span class="code-content"><span class="comment"># client section</span></span>
</div>
<div class="code-line">
<span class="line-number">2</span>
<span class="code-content"><span class="property">port</span>=<span class="highlight-new number">3307</span></span>
</div>
<div class="code-line">
<span class="line-number">3</span>
<span class="code-content"><span class="property">socket</span>=<span class="string">"C:/xampp/mysql/mysql.sock"</span></span>
</div>
</div>
<div class="info-card" style="margin-top: 20px;">
<h4 style="color: var(--info); margin-bottom: 10px;">What This Does:</h4>
<ul style="line-height: 2;">
<li><strong>port=3307:</strong> Tells client tools to connect to port 3307</li>
<li><strong>socket:</strong> Defines the Unix socket file for local connections</li>
</ul>
</div>
<div class="tip-card" style="margin-top: 15px;">
<p>💡 <strong>Who Uses This:</strong> phpMyAdmin, MySQL Workbench, command-line tools, and your PHP scripts all read this section to know where to connect!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Understanding the Server Section</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--info); margin-bottom: 15px;">⚙️ Server Configuration Explained</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 - Server Section</span>
</div>
<button class="copy-btn" onclick="copyCode(this, '[mysqld]\nport=3307')">📋 Copy</button>
<div class="code-line">
<span class="line-number">1</span>
<span class="code-content"><span class="comment"># The MySQL server</span></span>
</div>
<div class="code-line">
<span class="line-number">2</span>
<span class="code-content"><span class="section-header">[mysqld]</span></span>
</div>
<div class="code-line">
<span class="line-number">3</span>
<span class="code-content"><span class="property">port</span>=<span class="highlight-new number">3307</span></span>
</div>
</div>
<div class="info-card" style="margin-top: 20px;">
<h4 style="color: var(--info); margin-bottom: 10px;">What This Does:</h4>
<ul style="line-height: 2;">
<li><strong>[mysqld]:</strong> Section header for MySQL daemon (server) configuration</li>
<li><strong>port=3307:</strong> The port where MySQL server listens for connections</li>
</ul>
</div>
<div class="tip-card" style="margin-top: 15px;">
<p>💡 <strong>Critical:</strong> This is the actual port the MySQL server binds to. If this doesn't match the client port, connections will fail!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Complete Configuration Example</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--info); margin-bottom: 15px;">📄 Full my.ini Configuration</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 - Complete Configuration</span>
</div>
<button class="copy-btn" onclick="copyCode(this, 'See full configuration below')">📋 Copy</button>
<div class="code-line">
<span class="line-number">1</span>
<span class="code-content"><span class="comment"># CLIENT SECTION</span></span>
</div>
<div class="code-line">
<span class="line-number">2</span>
<span class="code-content"><span class="comment"># This section is read by MySQL client tools</span></span>
</div>
<div class="code-line">
<span class="line-number">3</span>
<span class="code-content"><span class="section-header">[client]</span></span>
</div>
<div class="code-line">
<span class="line-number">4</span>
<span class="code-content"><span class="property">port</span>=<span class="number">3307</span></span>
</div>
<div class="code-line">
<span class="line-number">5</span>
<span class="code-content"><span class="property">socket</span>=<span class="string">"C:/xampp/mysql/mysql.sock"</span></span>
</div>
<div class="code-line">
<span class="line-number">6</span>
<span class="code-content"></span>
</div>
<div class="code-line">
<span class="line-number">7</span>
<span class="code-content"><span class="comment"># SERVER SECTION</span></span>
</div>
<div class="code-line">
<span class="line-number">8</span>
<span class="code-content"><span class="comment"># This section is read by the MySQL server daemon</span></span>
</div>
<div class="code-line">
<span class="line-number">9</span>
<span class="code-content"><span class="section-header">[mysqld]</span></span>
</div>
<div class="code-line">
<span class="line-number">10</span>
<span class="code-content"><span class="property">port</span>=<span class="number">3307</span></span>
</div>
<div class="code-line">
<span class="line-number">11</span>
<span class="code-content"><span class="property">socket</span>=<span class="string">"C:/xampp/mysql/mysql.sock"</span></span>
</div>
<div class="code-line">
<span class="line-number">12</span>
<span class="code-content"><span class="property">basedir</span>=<span class="string">"C:/xampp/mysql"</span></span>
</div>
<div class="code-line">
<span class="line-number">13</span>
<span class="code-content"><span class="property">datadir</span>=<span class="string">"C:/xampp/mysql/data"</span></span>
</div>
</div>
<div class="warning-box" style="margin-top: 20px;">
<h4>⚠️ Critical: Both Must Match!</h4>
<p>Notice that BOTH <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">[client]</code> and <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">[mysqld]</code> sections have <strong>port=3307</strong>. This ensures perfect communication!</p>
</div>
</div>
</div>
</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 Section</h4>
<p><strong>Problem:</strong> Updating port in [client] but forgetting [mysqld] (or vice versa)</p>
<p><strong>Result:</strong> "Can't connect to MySQL server" errors</p>
<p><strong>Fix:</strong> Always verify BOTH sections have port=3307!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Mixing Up Port Numbers</h4>
<p><strong>Problem:</strong> Setting one to 3306 and one to 3307</p>
<p><strong>Result:</strong> Client tries to connect to wrong port</p>
<p><strong>Fix:</strong> Both must be 3307 - double-check before saving!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Editing Wrong Configuration File</h4>
<p><strong>Problem:</strong> Editing a backup file or wrong my.ini</p>
<p><strong>Result:</strong> Changes don't take 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;">C:\xampp\mysql\bin\my.ini</code></p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Forgetting to Restart MySQL</h4>
<p><strong>Problem:</strong> Saving changes but not restarting the service</p>
<p><strong>Result:</strong> Old configuration still active</p>
<p><strong>Fix:</strong> Always Stop and Start MySQL in XAMPP Control Panel after editing!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Not Updating phpMyAdmin</h4>
<p><strong>Problem:</strong> MySQL port changed but phpMyAdmin config wasn't updated</p>
<p><strong>Result:</strong> phpMyAdmin shows connection errors</p>
<p><strong>Fix:</strong> Update <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">config.inc.php</code> in phpMyAdmin folder!</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 Your Changes</h4>
<p>After editing, verify both sections are correct:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Press Ctrl+F in your text editor</li>
<li>Search for "port=" (without quotes)</li>
<li>You should find TWO instances, both showing 3307</li>
<li>If you find 3306 anywhere, you missed a change!</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's config file:</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'] = '';</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 and test!</li>
</ol>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Test Your Connection</h4>
<p>After restarting MySQL, test the connection:</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;">
# Open Command Prompt and navigate to:<br>
cd C:\xampp\mysql\bin<br>
<br>
# Test connection:<br>
mysql -u root -P 3307<br>
<br>
# You should see:<br>
Welcome to the MySQL monitor...
</div>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Update PHP Connection Strings</h4>
<p>Update your PHP database connections to use the new port:</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 (won't work anymore)<br>
$conn = new mysqli("localhost", "root", "", "mydb");<br>
<br>
// NEW (correct way)<br>
$conn = new mysqli("localhost", "root", "", "mydb", 3307);
</div>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Create a Configuration Backup</h4>
<p>Before making changes, always backup your config:</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 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>Add date: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">my.ini.backup-2026-01-31</code></li>
</ol>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Document Your Setup</h4>
<p>Keep a reference document with all your configurations:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 10px;">
<strong>🟠 XAMPP Configuration:</strong><br>
• Apache HTTP: 8080<br>
• Apache HTTPS: 4443<br>
• MySQL: 3307 ✅<br>
• phpMyAdmin: http://localhost:8080/phpmyadmin<br>
<br>
<strong>🔵 Laragon Configuration:</strong><br>
• Apache HTTP: 80<br>
• Apache HTTPS: 443<br>
• MySQL: 3306<br>
• Access: http://localhost
</div>
</div>
</section>
<!-- Quiz Section -->
<section class="section">
<h2>🎯 Knowledge Check</h2>
<p>Test your understanding of MySQL configuration!</p>
<div class="quiz-container">
<div class="quiz-question">
<h4>Question 1: Which TWO sections need port configuration?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">A) [mysql] and [server]</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 0)">B) [client] and [mysqld]</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">C) [config] and [database]</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">D) [port] and [connection]</div>
<div class="quiz-feedback" id="feedback0"></div>
</div>
<div class="quiz-question">
<h4>Question 2: What port should BOTH sections use?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">A) 3306</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">B) 3307</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">C) One uses 3306, one uses 3307</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">D) 8080</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4>Question 3: What happens if client and server ports don't match?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">A) MySQL runs slower</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">B) Connection fails - client can't reach server</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">C) Only phpMyAdmin stops working</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">D) Nothing - they don't need to match</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 5</h2>
<div class="summary-grid">
<div class="summary-item">
<div style="font-size: 3rem;">📝</div>
<h4>Client Section</h4>
<p>[client] port=3307</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">⚙️</div>
<h4>Server Section</h4>
<p>[mysqld] port=3307</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">💾</div>
<h4>Save & Restart</h4>
<p>Ctrl+S then restart MySQL</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">✅</div>
<h4>Test Connection</h4>
<p>Access phpMyAdmin to verify</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>✅ Both [client] and [mysqld] sections need port=3307</li>
<li>✅ Client section tells tools where to connect</li>
<li>✅ Server section tells MySQL where to listen</li>
<li>✅ Both must match for successful connections</li>
<li>✅ Don't forget to update phpMyAdmin config too!</li>
<li>✅ Always restart MySQL after configuration changes</li>
</ul>
</div>
<div style="margin-top: 30px; text-align: center;">
<p style="color: white; font-size: 1.3rem; margin-bottom: 15px;">🎉 Congratulations!</p>
<p style="color: white; opacity: 0.9; font-size: 1.1rem;">You've completed the MySQL configuration! Your dual-server setup is now fully functional. XAMPP and Laragon can run together perfectly! 🚀</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 5 Complete - Setup Finished!</h3>
<p style="margin: 20px 0;">You've successfully configured both Apache and MySQL for dual-server operation!</p>
<div>
<div class="badge">🖥️ XAMPP</div>
<div class="badge">🔵 Laragon</div>
<div class="badge">🗄️ MySQL 3307</div>
<div class="badge">🌐 Apache 8080</div>
<div class="badge">✅ Complete Setup</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.parentElement.querySelectorAll('.quiz-option');
options.forEach(opt => opt.style.pointerEvents = 'none');
const feedback = document.getElementById('feedback' + questionIndex);
if (isCorrect) {
element.classList.add('correct');
feedback.style.background = 'rgba(74, 222, 128, 0.2)';
feedback.style.color = 'var(--success)';
feedback.textContent = '🎉 Perfect! You got it right!';
quizScore++;
createConfetti();
} else {
element.classList.add('incorrect');
feedback.style.background = 'rgba(248, 113, 113, 0.2)';
feedback.style.color = 'var(--danger)';
feedback.textContent = '❌ Not quite. Review the sections above!';
}
feedback.classList.add('show');
questionsAnswered++;
if (questionsAnswered === 3) {
setTimeout(showFinalScore, 1000);
}
}
function showFinalScore() {
const scoreDiv = document.getElementById('quizScore');
const scoreValue = document.getElementById('scoreValue');
const scoreMessage = document.getElementById('scoreMessage');
scoreValue.textContent = quizScore;
if (quizScore === 3) {
scoreMessage.textContent = 'Perfect! You\'re a dual-server configuration expert! 🏆';
createConfetti();
} else if (quizScore === 2) {
scoreMessage.textContent = 'Great job! You\'re almost there! 🌟';
} else {
scoreMessage.textContent = 'Keep learning! Review and try again! 💪';
}
scoreDiv.style.display = 'block';
}
// Confetti Effect
function createConfetti() {
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * window.innerWidth + 'px';
confetti.style.background = ['#00758f', '#3b82f6', '#4ade80', '#fbbf24'][Math.floor(Math.random() * 4)];
confetti.style.animationDelay = Math.random() * 0.5 + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}
}
// Add entrance animations on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = 'fadeInUp 0.8s ease forwards';
}
});
}, observerOptions);
document.querySelectorAll('.section').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>
```
🎉 **Your comprehensive Step 5 tutorial is complete!** This interactive HTML file includes:
✅ **All 11 Required Sections** - Complete final configuration guide
✅ **
Live Preview