Use Cases: Search, Pagination, Filtering, and Public APIs
Search, Pagination, Filtering, and Public APIs
Introduction
आज के web applications में Search, Pagination, Filtering और Public APIs का use बहुत common है। चाहे आप एक e-commerce website बना रहे हों, या social media app — इन चारों concepts का सही implementation user experience और performance दोनों को बेहतर बनाता है। इस blog में हम इन concepts को simple हिंदी में समझेंगे, ताकि exam या practical coding में कोई confusion न रहे।
Search in Web Applications
Search का मतलब है user को desired data जल्दी और सटीक तरीके से दिखाना। जब user किसी keyword या term को type करता है, तो system उस data को database में find करता है और relevant result return करता है।
How Search Works
- User एक query type करता है (जैसे “Laptop under 50000”).
- Server उस query को database में match करता है।
- Matched results को user को show किया जाता है।
Types of Search
- Full-text search: जहां पूरी text को index किया जाता है और words के match से result निकलता है।
- Keyword-based search: जहां specific keywords पर search होती है।
- Filtered search: जहां user search के साथ कुछ filters भी apply करता है (जैसे price, category)।
Search Implementation Example (Using SQL)
SELECT * FROM products
WHERE name LIKE '%laptop%' OR description LIKE '%laptop%';
ऊपर दिए गए SQL query में, LIKE operator का use किया गया है ताकि किसी भी जगह “laptop” शब्द आने पर result show हो जाए।
Search Optimization Tips
- Database में proper indexing use करें।
- Search query को parameterized बनाएं ताकि SQL Injection से बचा जा सके।
- Large datasets के लिए Elasticsearch या Solr जैसे search engines का use करें।
Pagination in Web Development
Pagination का मतलब है बड़े data को छोटे हिस्सों (pages) में बांटना। इससे performance बढ़ती है और user को data पढ़ने में आसानी होती है।
Why Pagination is Important
- Page load fast होता है।
- User को data navigate करने में आसानी होती है।
- Server load कम होता है।
Pagination Example (SQL Query)
SELECT * FROM students
LIMIT 10 OFFSET 0;
ऊपर query पहले 10 records को fetch करेगी। अगले page के लिए OFFSET को बढ़ाकर 10 कर दिया जाता है, जैसे:
SELECT * FROM students
LIMIT 10 OFFSET 10;
Pagination Logic (Backend Example in Node.js)
app.get('/api/students', (req, res) => {
const page = parseInt(req.query.page) || 1;
const limit = 10;
const offset = (page - 1) * limit;
db.query(`SELECT * FROM students LIMIT ${limit} OFFSET ${offset}`, (err, result) => {
res.json(result);
});
});
इस तरह backend dynamically data return करता है according to page number.
Pagination UX Tips
- “Previous” और “Next” buttons add करें।
- Current page highlight करें।
- Loading indicators use करें।
Filtering in Web Applications
Filtering का मतलब है user को specific criteria के basis पर data refine करने की सुविधा देना। जैसे — color, brand, price range आदि।
Example of Filtering
- Amazon पर आप filter कर सकते हैं “Brand: HP”, “Price: Below 50000”।
- Movie site पर filter कर सकते हैं “Genre: Action”, “Rating: Above 8.0”।
SQL Query for Filtering
SELECT * FROM products
WHERE category = 'Electronics' AND price BETWEEN 10000 AND 50000;
Backend Filtering Example (Node.js)
app.get('/api/products', (req, res) => {
const { category, minPrice, maxPrice } = req.query;
let query = `SELECT * FROM products WHERE 1=1`;
if (category) query += ` AND category='${category}'`;
if (minPrice && maxPrice) query += ` AND price BETWEEN ${minPrice} AND ${maxPrice}`;
db.query(query, (err, result) => {
res.json(result);
});
});
Frontend Filter UI Tips
- Checkboxes या dropdown menus use करें।
- Filter results को real-time update करें।
- Active filters को user को दिखाएं।
Public APIs
Public API वे APIs होती हैं जिन्हें कोई भी developer access कर सकता है। ये APIs data share करने या integrate करने के लिए use होती हैं — जैसे weather data, news feeds, currency rates आदि।
Examples of Public APIs
| API Name | Purpose | Base URL |
|---|---|---|
| OpenWeather API | Weather information | https://api.openweathermap.org |
| NewsAPI | Latest news articles | https://newsapi.org |
| GitHub API | Repository and user data | https://api.github.com |
How to Use a Public API
Public API को access करने के लिए हम HTTP methods जैसे GET, POST आदि का use करते हैं।
Example (Fetch Data Using Fetch API)
fetch('https://api.github.com/users/octocat')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
API Authentication
कई APIs को access करने के लिए API key की जरूरत होती है। यह key authentication के लिए होती है ताकि misuse न हो।
Example (Using API Key)
fetch('https://newsapi.org/v2/top-headlines?country=in&apiKey=YOUR_API_KEY')
.then(res => res.json())
.then(data => console.log(data));
Best Practices for Using Public APIs
- Always handle errors properly।
- API key को कभी public code में expose न करें।
- Rate limits का ध्यान रखें (जैसे 100 requests/hour)।
- Cache responses where possible ताकि performance बेहतर हो।
Integration of Search, Pagination, Filtering & API
अक्सर एक real-world project में ये चारों features एक साथ use होते हैं। जैसे कि किसी e-commerce site में product list API से आती है, जिसे filter और paginate किया जाता है, और user search भी कर सकता है।
Example Integration Flow
- Frontend से user search, filter या page change करता है।
- Request backend को जाती है जिसमें parameters होते हैं (search, filter, page)।
- Backend SQL query generate करके data return करता है।
- Frontend उस data को render करता है।
Example API Endpoint
GET /api/products?search=laptop&category=Electronics&page=2&limit=10
इस endpoint में search, filter और pagination तीनों parameters हैं, जिससे efficient data fetching होती है।
Benefits of Combined Approach
- Performance बढ़ती है।
- User experience smooth होता है।
- Backend load कम होता है।
Real-Life Usage
कुछ popular platforms जिनमें ये features common हैं:
- Amazon: Products search + filtering + pagination।
- YouTube: Video search + API data fetching।
- Netflix: Genre-based filtering + search।
- Twitter: Public APIs के ज़रिए tweets fetch करना।
Final Notes
Search, Pagination, Filtering और Public APIs हर modern web app की backbone हैं। Exam या interview में इन topics पर practical-based questions आते हैं। इसलिए सिर्फ concept नहीं, implementation logic भी clear होना चाहिए। जब आप इनका combination सही तरीके से use करते हैं, तो आपका web application fast, dynamic और user-friendly बनता है।
