Two servers and one PC Step 2
📦 PHP
✨ The Prompt Phrase
This guide is step two to explain how to run 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 accessed the Apache configuration file (httpd.conf). Now we need to make two changes: first, change the listener from port 80 to port 8080, and second, change the server name from localhost:80 to localhost:8080. Please refer to the image.
💻 Code Preview
📦 All-in-One Code
<img src="DB_IMAGE" alt="Prompt Image" style="max-width:100%;">
```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 2 - 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;
--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(--primary), var(--accent));
width: 0%;
transition: width 0.3s ease;
box-shadow: 0 0 10px var(--accent);
}
/* 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(--primary) 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(--primary), var(--accent));
-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;
}
.port-box.old {
border-color: var(--danger);
opacity: 0.6;
position: relative;
}
.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(74, 222, 128, 0.5); }
}
.arrow {
font-size: 3rem;
color: var(--accent);
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(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 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(--primary), var(--accent));
-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(--primary);
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; }
.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(--primary);
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(--accent);
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;
}
/* Accordion */
.accordion {
margin: 20px 0;
}
.accordion-item {
background: rgba(102, 126, 234, 0.1);
border: 2px solid var(--primary);
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(102, 126, 234, 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: 2000px;
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(102, 126, 234, 0.1);
border: 2px solid var(--primary);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
position: relative;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
border-color: var(--accent);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--accent));
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(102, 126, 234, 0.1);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
border: 2px solid var(--primary);
}
.quiz-question {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
}
.quiz-question h4 {
color: var(--accent);
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(--primary);
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(--primary), var(--accent));
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(--primary), var(--secondary));
border-radius: 25px;
padding: 50px;
margin: 40px 0;
box-shadow: 0 15px 50px rgba(102, 126, 234, 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(--primary), var(--accent));
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin: 5px;
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--accent);
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(--primary);
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(--primary), var(--accent));
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 2</div>
<h1>Editing Apache Port Configuration</h1>
<p class="hero-subtitle">Change ports 80 to 8080 and make XAMPP and Laragon work together perfectly!</p>
<div class="port-visual">
<div class="port-box old">
<h3>Old Port</h3>
<div class="port-number">80</div>
<p>Default Apache Port</p>
</div>
<div class="arrow">→</div>
<div class="port-box new">
<h3>New Port</h3>
<div class="port-number">8080</div>
<p>Modified XAMPP Port</p>
</div>
</div>
</section>
<!-- What Is It Section -->
<section class="section">
<h2>🤔 What Are We Doing?</h2>
<p>
In Step 1, we opened the <span class="tooltip"><strong>httpd.conf</strong><span class="tooltiptext">Apache's main configuration file that controls server behavior</span></span> file. Now it's time to make the actual changes! We need to modify two specific settings to prevent port conflicts between XAMPP and Laragon.
</p>
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🎯 The Two Changes</h4>
<ol style="line-height: 2; margin-top: 15px;">
<li><strong>Change 1:</strong> Modify <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">Listen 80</code> to <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">Listen 8080</code></li>
<li><strong>Change 2:</strong> Modify <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">ServerName localhost:80</code> to <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">ServerName localhost:8080</code></li>
</ol>
</div>
<p style="margin-top: 20px;">
Think of ports like different doors to your house. Right now, both XAMPP and Laragon are trying to use door #80. By changing XAMPP to use door #8080, both servers can operate without bumping into each other! 🚪
</p>
</section>
<!-- Why Use It Section -->
<section class="section">
<h2>🌟 Why Change These Ports?</h2>
<div class="steps-container">
<div class="step-card">
<div class="step-number">🔒</div>
<h4>Avoid Conflicts</h4>
<p>Prevents the "port already in use" error that stops servers from starting!</p>
</div>
<div class="step-card">
<div class="step-number">⚡</div>
<h4>Run Both Servers</h4>
<p>XAMPP and Laragon can run simultaneously without fighting!</p>
</div>
<div class="step-card">
<div class="step-number">🎯</div>
<h4>Clear Separation</h4>
<p>Easy to remember: Laragon = :80, XAMPP = :8080</p>
</div>
<div class="step-card">
<div class="step-number">🛠️</div>
<h4>Professional Setup</h4>
<p>Mimics real-world scenarios where multiple services run on different ports!</p>
</div>
</div>
</section>
<!-- Visual Guide Section -->
<section class="section">
<h2>📸 Visual Reference Guide</h2>
<p>Here's the complete guide showing exactly what to change:</p>
<div class="screenshot-container">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/8neUOgcd5IULNNR8.png?Expires=1771019428&Signature=KppI6Ygfn~PvmIP6jPq04kPf03EC64DLBWabO5m6XRlCC-f5SdkgfbScCEV93NDqewmzUrDjdMLsbzSgOn8L4Oxq6KUi9y9LvbaIi7OdtIVczF1JK0DZXdK7qIAabSIB5~nbswHbvgD5sjEh569OttXD-Jmd4U3CJTyRiQ~GTDzzfFNu-ZccYMwA0WQXcSmUYjfrBEIZqE6vDnmdb8xYSd1fnuLnWjX03lp6Pmf8w8wdewrhZMPM91TgooN9sATYPWC74mm2i8UY6B-Rbqv85Dy03JRhJTzslYn7FSkI3loIz4JQUMZADdBj~~DABr9in7TLgpkiPK50IG6GmmB6Kg__&Key-Pair-Id=K3USGZIKWMDCSX" alt="Port 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 step-by-step guide for both changes (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>Section 1 (داخل الملف):</strong> First change - Listen 80 → Listen 8080</li>
<li>📍 <strong>Section 2 (بعدها):</strong> Second change - ServerName localhost:80 → localhost:8080</li>
<li>🔍 <strong>Search Method:</strong> Use Ctrl+F to find the exact lines</li>
<li>✏️ <strong>Edit Instructions:</strong> Clear before/after examples</li>
</ul>
</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>Change 1: Modify the Listen Directive</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--accent); margin-bottom: 15px;">🔍 Finding the Line</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="Listen 80" readonly>
</div>
<p><strong>Step 2:</strong> Type "Listen 80" in the search box</p>
<p><strong>Step 3:</strong> Press Enter to find the first occurrence</p>
</div>
<h4 style="color: var(--accent); margin: 25px 0 15px;">✏️ Making the 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">httpd.conf</span>
</div>
<button class="copy-btn" onclick="copyCode(this, 'Listen 8080')">📋 Copy</button>
<div class="code-line">
<span class="line-number">45</span>
<span class="code-content"><span class="comment"># Listen: Allows you to bind Apache to specific IP addresses</span></span>
</div>
<div class="code-line">
<span class="line-number">46</span>
<span class="code-content"><span class="comment"># and/or ports, instead of the default.</span></span>
</div>
<div class="code-line">
<span class="line-number">47</span>
<span class="code-content"><span class="comment">#</span></span>
</div>
<div class="code-line">
<span class="line-number">48</span>
<span class="code-content"><span class="keyword">Listen</span> <span class="highlight-old number">80</span></span>
</div>
<div class="code-line">
<span class="line-number">49</span>
<span class="code-content"><span class="keyword">Listen</span> <span class="highlight-new number">8080</span> <span class="comment">← Change to this!</span></span>
</div>
</div>
<div class="tip-card">
<p>💡 <strong>Pro Tip:</strong> You might find multiple "Listen" directives. Make sure you're changing the one that says "Listen 80" (not "Listen 443" for HTTPS).</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Change 2: Modify the ServerName Directive</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--accent); margin-bottom: 15px;">🔍 Finding the Line</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> again</p>
<div class="search-box">
<span class="search-icon">🔍</span>
<input type="text" class="search-input" value="ServerName localhost:80" readonly>
</div>
<p><strong>Step 2:</strong> Type "ServerName localhost:80" in the search box</p>
<p><strong>Step 3:</strong> Press Enter to find it</p>
</div>
<h4 style="color: var(--accent); margin: 25px 0 15px;">✏️ Making the 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">httpd.conf</span>
</div>
<button class="copy-btn" onclick="copyCode(this, 'ServerName localhost:8080')">📋 Copy</button>
<div class="code-line">
<span class="line-number">227</span>
<span class="code-content"><span class="comment"># ServerName gives the name and port that the server uses</span></span>
</div>
<div class="code-line">
<span class="line-number">228</span>
<span class="code-content"><span class="comment"># to identify itself.</span></span>
</div>
<div class="code-line">
<span class="line-number">229</span>
<span class="code-content"><span class="comment">#</span></span>
</div>
<div class="code-line">
<span class="line-number">230</span>
<span class="code-content"><span class="keyword">ServerName</span> <span class="highlight-old string">localhost:80</span></span>
</div>
<div class="code-line">
<span class="line-number">231</span>
<span class="code-content"><span class="keyword">ServerName</span> <span class="highlight-new string">localhost:8080</span> <span class="comment">← Change to this!</span></span>
</div>
</div>
<div class="tip-card">
<p>💡 <strong>Pro Tip:</strong> The ServerName directive might be commented out (with # at the start). If so, remove the # first, then change the port!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 3: Save and Restart Apache</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<h4 style="color: var(--accent); 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>
</ol>
<h4 style="color: var(--accent); margin: 25px 0 15px;">🔄 Restarting Apache</h4>
<ol style="line-height: 2;">
<li>Go back to XAMPP Control Panel</li>
<li>If Apache is running, click <strong>Stop</strong></li>
<li>Wait 2-3 seconds</li>
<li>Click <strong>Start</strong> to restart Apache</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, Apache should now show port <strong>8080</strong> instead of 80 in the Port(s) column!</p>
</div>
</div>
</div>
</div>
</section>
<!-- Code Breakdown Section -->
<section class="section">
<h2>📝 Understanding the Directives</h2>
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 15px;">🔌 Listen Directive</h4>
<p><strong>What it does:</strong> Tells Apache which port to "listen" on for incoming HTTP requests.</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin: 15px 0; font-family: 'Fira Code', monospace;">
Listen 8080
</div>
<p><strong>Meaning:</strong> "Apache, please watch port 8080 for incoming web traffic."</p>
<p style="margin-top: 10px;"><strong>Result:</strong> Your XAMPP websites will be accessible at <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">http://localhost:8080</code></p>
</div>
<div class="info-card" style="margin-top: 25px;">
<h4 style="color: var(--info); margin-bottom: 15px;">🏷️ ServerName Directive</h4>
<p><strong>What it does:</strong> Defines the hostname and port that the server uses to identify itself.</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin: 15px 0; font-family: 'Fira Code', monospace;">
ServerName localhost:8080
</div>
<p><strong>Meaning:</strong> "When someone asks who you are, say you're localhost on port 8080."</p>
<p style="margin-top: 10px;"><strong>Why it matters:</strong> Helps Apache generate correct URLs and prevents warning messages on startup.</p>
</div>
<div class="tip-card" style="margin-top: 25px;">
<h4 style="color: var(--success); margin-bottom: 10px;">🎯 Why Both Changes Are Necessary</h4>
<p><strong>Listen:</strong> Controls what port Apache actually listens on (the technical part)</p>
<p><strong>ServerName:</strong> Controls how Apache identifies itself (the identity part)</p>
<p style="margin-top: 10px;">Both must match! If Listen is 8080 but ServerName says :80, you'll get warnings and potential issues.</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 Directive</h4>
<p><strong>Problem:</strong> Changing Listen but forgetting ServerName (or vice versa)</p>
<p><strong>Result:</strong> Apache might start but show warnings, or behave unpredictably</p>
<p><strong>Fix:</strong> Always change BOTH Listen and ServerName to match!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Typos in Port Numbers</h4>
<p><strong>Problem:</strong> Typing "8008" or "808" instead of "8080"</p>
<p><strong>Result:</strong> Apache won't start, or you won't be able to access your sites</p>
<p><strong>Fix:</strong> Double-check: it's <strong>8080</strong> (four digits, two zeros in the middle)</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Editing the Wrong "Listen" Line</h4>
<p><strong>Problem:</strong> Changing "Listen 443" (HTTPS) instead of "Listen 80"</p>
<p><strong>Result:</strong> HTTPS breaks, HTTP still conflicts with Laragon</p>
<p><strong>Fix:</strong> Make sure you're changing the line that says exactly "Listen 80"</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Forgetting to Remove # Comment Symbol</h4>
<p><strong>Problem:</strong> ServerName line starts with # (commented out)</p>
<p><strong>Result:</strong> Your change has no effect because the line is ignored</p>
<p><strong>Fix:</strong> Remove the # at the beginning: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">#ServerName</code> → <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">ServerName</code></p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Not Restarting Apache</h4>
<p><strong>Problem:</strong> Making changes but not restarting the server</p>
<p><strong>Result:</strong> Changes don't take effect, old port is still in use</p>
<p><strong>Fix:</strong> Always Stop and Start Apache 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;">💎 Use Line Numbers</h4>
<p>Enable line numbers in your text editor to find directives faster:</p>
<ul style="margin-top: 10px; line-height: 2;">
<li><strong>Notepad++:</strong> View → Show Symbol → Show Line Number</li>
<li><strong>VS Code:</strong> Already enabled by default</li>
<li><strong>Notepad:</strong> No line numbers (use Ctrl+F instead)</li>
</ul>
<p style="margin-top: 10px;">Typical locations: Listen around line 45-60, ServerName around line 220-240</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Test Before Full Restart</h4>
<p>Test your configuration before restarting Apache:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Open Command Prompt as Administrator</li>
<li>Navigate to: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">cd C:\xampp\apache\bin</code></li>
<li>Run: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">httpd.exe -t</code></li>
<li>Look for "Syntax OK" message</li>
</ol>
<p style="margin-top: 10px;">This catches errors before you restart! 🛡️</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Bookmark Your Access URLs</h4>
<p>After making changes, bookmark these URLs in your browser:</p>
<ul style="margin-top: 10px; line-height: 2;">
<li>🔵 <strong>Laragon:</strong> <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">http://localhost</code> (port 80)</li>
<li>🟠 <strong>XAMPP:</strong> <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">http://localhost:8080</code></li>
<li>🟠 <strong>XAMPP phpMyAdmin:</strong> <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">http://localhost:8080/phpmyadmin</code></li>
</ul>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Add Comments to Track Changes</h4>
<p>Document your modifications in the config file:</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;">
# Modified for dual server setup - [Your Name] [Date]<br>
# Changed from port 80 to 8080 to avoid conflict with Laragon<br>
Listen 8080
</div>
<p style="margin-top: 10px;">Future you will thank present you! 📝</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Keep a Configuration Cheat Sheet</h4>
<p>Create a text file with your port assignments:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 10px;">
<strong>🟠 XAMPP Configuration:</strong><br>
• HTTP: 8080<br>
• HTTPS: 4443<br>
• MySQL: 3307<br>
<br>
<strong>🔵 Laragon Configuration:</strong><br>
• HTTP: 80<br>
• HTTPS: 443<br>
• MySQL: 3306
</div>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Check Windows Firewall</h4>
<p>If Apache starts but you can't access localhost:8080:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Open Windows Firewall settings</li>
<li>Click "Allow an app through firewall"</li>
<li>Find "Apache HTTP Server" and ensure it's checked</li>
<li>Or temporarily disable firewall to test</li>
</ol>
</div>
</section>
<!-- Quiz Section -->
<section class="section">
<h2>🎯 Knowledge Check</h2>
<p>Test your understanding of port configuration!</p>
<div class="quiz-container">
<div class="quiz-question">
<h4>Question 1: What are the TWO directives you need to change?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">A) Listen and DocumentRoot</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 0)">B) Listen and ServerName</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">C) Port and ServerName</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">D) Listen and ServerRoot</div>
<div class="quiz-feedback" id="feedback0"></div>
</div>
<div class="quiz-question">
<h4>Question 2: What should "Listen 80" be changed to?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">A) Listen 8008</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">B) Listen 8080</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">C) Listen 808</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">D) Listen 80:8080</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4>Question 3: After making changes, what MUST you do?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">A) Restart your computer</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">B) Reinstall XAMPP</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">C) Save the file and restart Apache</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">D) Nothing, changes apply automatically</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 2</h2>
<div class="summary-grid">
<div class="summary-item">
<div style="font-size: 3rem;">1️⃣</div>
<h4>Find & Change</h4>
<p>Listen 80 → Listen 8080</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">2️⃣</div>
<h4>Find & Change</h4>
<p>ServerName localhost:80 → :8080</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 Apache</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 Listen and ServerName directives</li>
<li>✅ Both must use the same port number (8080)</li>
<li>✅ Use Ctrl+F to find the exact lines quickly</li>
<li>✅ Save the file before closing the editor</li>
<li>✅ Always restart Apache after config changes</li>
<li>✅ Access XAMPP at http://localhost:8080</li>
</ul>
</div>
<div style="margin-top: 30px; text-align: center;">
<p style="color: white; font-size: 1.2rem; margin-bottom: 15px;">🎯 What's Next?</p>
<p style="color: white; opacity: 0.8;">You've successfully configured XAMPP to use port 8080! Now both servers can run together. Next steps might include configuring MySQL ports or setting up virtual hosts!</p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<h3 style="background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">🎉 Step 2 Complete!</h3>
<p style="margin: 20px 0;">You've successfully configured XAMPP to work alongside Laragon!</p>
<div>
<div class="badge">🖥️ XAMPP</div>
<div class="badge">🔵 Laragon</div>
<div class="badge">⚙️ Port Configuration</div>
<div class="badge">🔌 Apache</div>
<div class="badge">✅ Dual 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 = '🎉 Excellent! 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 master! 🏆';
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 = ['#667eea', '#f093fb', '#4ade
Live Preview