🎯 පාඩමේ අරමුණු
මේ පාඩම ඉවර වෙද්දී ඔයාට:
- Memorable analogy එකක් හරහා websites work කරන විදිය තේරුම් ගන්න පුළුවන් වෙයි
- Each part පිටුපස real technical components identify කරන්න පුළුවන් වෙයි
- Website එකකට visit කරනකොට complete journey එක follow කරන්න පුළුවන් වෙයි
- ඔයාගේ coding journey එකට mental model එකක් build කරන්න පුළුවන් වෙයි
📖 Analogies Matter වෙන්නේ ඇයි
Challenge එක: "Servers," "HTTP requests," "APIs" වැනි technical concepts invisible. ඒවා see කරන්න, touch කරන්න, work කරන විදිය watch කරන්න බැහැ.
Solution එක: Restaurant එකකට යන එක වගේ ඔයා already හොඳින් දන්න දෙයකට connect කරන්න.
Core Insight එක
Websites restaurants විදියට තේරුම් ගත්තම, ඒවා work කරන විදිය කිසිදා අමතක වෙන්නේ නැහැ.
🍽️ කතාව: Websites Restaurants වගේ
ඔබේ ඇස් වහගන්න මොහොතකට. ඔයාගේ favourite restaurant එකට walk කරනවා imagine කරන්න:
- Food cook වෙන smell එක දැනෙනවා
- Decor එක දකිනවා
- Host කෙනෙක් greet කරනවා
- Menu එකක් ලැබෙනවා
- Order එකක් place කරනවා
- Food එනවා
- Eat කරලා enjoy කරනවා
ඔයා website එකකට visit කරනකොට exactly මේකම වෙනවා. Every single time.
🎭 Characters
| Restaurant | Internet | Technical Name | කරන දේ |
|---|---|---|---|
| ඔයා, Customer | ඔයා, browsing | Browser | Requests කරනවා, results display කරනවා |
| Restaurant Address | Website address | URL | සොයා ගත හැකි ස්ථානය |
| Menu එක | Available actions | API | Request කරන්න පුළුවන් දේ list කරනවා |
| Waiter | Request carrier | HTTP Protocol | Orders carry කරනවා |
| Kitchen | Content creator | Server | Ask කළ දේ prepare කරනවා |
| Storage Room | Information storage | Database | Ingredients/data store කරනවා |
| Plate එක | Content structure | HTML | Everything hold කරන container |
| Garnish | Visual design | CSS | Everything beautiful කරනවා |
| Eating Experience | Interactions | JavaScript | Touch/click කරනකොට වෙන දේ |
👤 ඔයා (Browser එක)
Restaurant එකේදී:
ඔයා customer කෙනෙක්, hunger (need) එකක් එක්ක, menus read කරන, waiters ට talk කරන, food eat කරන ability එක්ක.
Web World එකේදී:
ඔයාගේ browser (Chrome, Safari, Firefox) digital restaurant එකේ "ඔයා".
Browser එක කරන දේ:
- Requests send කරනවා ("මට මේ page එක බලන්න ඕන")
- Responses receive කරනවා (page content)
- Result screen එකේ display කරනවා
- ඔයාගේ preferences remember කරනවා
Browser Examples
- Chrome = Modern, popular customer කෙනෙක්
- Safari = Apple-loving customer කෙනෙක්
- Firefox = Privacy-conscious customer කෙනෙක්
- Edge = Microsoft employee කෙනෙක්
📍 Address එක (URL)
Restaurant එකේදී:
Every restaurant එකකට physical address එකක් තියෙනවා. "123 Main Street" ඔයාට යන්න ඕන තැන කියනවා.
Web World එකේදී:
URL (Uniform Resource Locator) restaurant එකේ address එක.
https://www.google.com/search?q=restaurants │ │ │ │ │ │ │ │ │ └── Query: specific request │ │ │ └── Path: which section/page │ │ └── Domain: restaurant name │ └── Subdomain: department (www = main dining) └── Protocol: communicate කරන විදිය (https = secure)Different URLs = Restaurant එකේ Different Parts:
| URL Path | Restaurant Equivalent |
|---|---|
/ | Front entrance, main dining room |
/menu | Menu එක |
/menu/appetizers | Appetizer section |
/about | "About Us" sign |
/contact | Business card එක |
📋 Menu එක (API)
Restaurant එකේදී:
Menu එක available මොනවද කියනවා. Menu එකේ නැති එකක් order කරන්න බැහැ!
Web World එකේදී:
API (Application Programming Interface) menu එක වගේ. Define කරන්නේ:
- Ask කරන්න පුළුවන් මොනවද
- Ask කරන විදිය
- Back ලැබෙන මොනවද
Restaurant Menu:- Pasta Carbonara.............$18- Caesar Salad................$12- Tiramisu....................$9 Website API:- GET /users → Users list return කරනවා- POST /comment → New comment create කරනවා - DELETE /post → Post එකක් remove කරනවා🧑🍳 Waiter (HTTP)
Restaurant එකේදී:
Waiter ඔයාගේ order ගන්නවා, kitchen එකට bring කරනවා, food ආපහු ගෙනෙනවා, problems handle කරනවා.
Web World එකේදී:
HTTP (HyperText Transfer Protocol) ඔයාගේ waiter:
- ඔයාගේ request ගන්නවා
- Server එකට deliver කරනවා
- Response ආපහු bring කරනවා
- Errors communicate කරනවා
HTTP Status Codes (Waiter Messages):
| Code | Message | Restaurant Equivalent |
|---|---|---|
| 200 | OK | "මෙන්න ඔයාගේ food!" |
| 201 | Created | "ඔයාගේ reservation ready!" |
| 301 | Moved | "ඒ dish දැන් specials එකේ" |
| 400 | Bad Request | "මට ඔයාගේ order තේරෙන්නේ නැහැ" |
| 401 | Unauthorized | "Members only, card පෙන්වන්න" |
| 403 | Forbidden | "ඒක staff වලට විතරයි!" |
| 404 | Not Found | "අපි ළඟ ඒ dish එක නැහැ" |
| 500 | Server Error | "Kitchen එකේ fire එකක්!" |
| 503 | Unavailable | "Renovation වලට close කරලා" |
Real World Test
ඊළඟ පාරු "404 Not Found" error එකක් දැක්කම, හිතන්න: "ආ, ඒ dish menu එකේ නැහැ!"
🏭 Kitchen (Server)
Restaurant එකේදී:
Kitchen orders receive කරනවා, ingredients හැම එකම තියෙනවා, recipes follow කරනවා, beautiful dishes prepare කරනවා.
Web World එකේදී:
Server එක kitchen එක:
- Browsers වලින් requests receive කරනවා
- Data හැමඑකටම access තියෙනවා
- Code run කරනවා (recipes)
- HTML/CSS/JS responses prepare කරනවා
- Millions of users handle කරනවා
🗄️ Storage Room (Database)
Restaurant එකේදී:
Storage room ingredients හැමඑකම hold කරනවා, type එකෙන් organized, inventory track කරනවා.
Web World එකේදී:
Database website එකේ data හැමඑකම store කරනවා, tables වල organized, server එකට quickly accessible.
Restaurant Storage: Database:├── Refrigerator ├── users_table│ ├── Vegetables │ ├── id│ ├── Meats │ ├── name│ └── Dairy │ └── email├── Pantry ├── posts_table│ ├── Pasta │ ├── id│ └── Spices │ └── content└── Freezer └── comments_table🍽️ Plate, Presentation & Experience (HTML, CSS, JS)
Key Insight
HTML plate එක, CSS presentation එක, JavaScript dining experience එක.
🔄 Complete Flow: Google.com Visit කිරීම
Step 1: ඔයා restaurant එකට enter වෙනවා → Browser open වෙනවා Step 2: යන්න ඕන තැන announce කරනවා → Browser URL read කරනවා: https://www.google.com Step 3: Browser address එක find කරනවා → DNS lookup: "google.com කොහෙද?" → Answer: "142.250.80.46" Step 4: Waiter ඔයාගේ order ගන්නවා → HTTP GET request send වෙනවා Step 5: Request Google kitchen එකට travel කරනවා → Request Google server එකට reach වෙනවා Step 6: Kitchen ඔයාගේ dish prepare කරනවා → Server search homepage generate කරනවා Step 7: Response ආපහු travel කරනවා → HTML, CSS, JavaScript browser එකට send වෙනවා Step 8: Browser meal එක display කරනවා → ඔයා Google search page එක දකිනවා Total time: Seconds 0.5ක් විතර ⚡💡 More Real-World Connections
| Scenario | Restaurant Analogy |
|---|---|
| Slow website | Busy kitchen, backed up orders |
| Mobile site | Food truck — smaller menu, faster service |
| Website crash | Kitchen overwhelmed, equipment failure |
| Login system | VIP section — membership ඕන |
| Shopping cart | Tab open කිරීම, checkout එකේදී pay කිරීම |
🧠 Memory Technique: "BRAINS"
- Browser (ඔයා)
- Request (HTTP/Waiter)
- API (Menu)
- Information Store (Database)
- Network (Server/Kitchen)
- Styles (CSS) + Structure (HTML)
🏋️ Practice Activity
✅ Restaurant Analysis Exercise
0/4💭 Reflection
Reflection Journal
✅ පාඩමේ සාරාංශය
Key Takeaways
- Every website visit restaurant එකක order කිරීමක් වගේ
- HTTP waiter එක — orders carry කරනවා back and forth
- Servers kitchens — ඔයාගේ content prepare කරනවා
- HTML plate එක, CSS presentation එක, JavaScript interaction එක
- Error codes just kitchen messages in disguise
📝 Mini Quiz
📝 ඔයාගේ Understanding Check කරන්න
1/3In the restaurant analogy, what does the 'kitchen' represent?