Website rekrutmen Asisten Laboratorium TI UNPAM dengan fitur modern, aman, dan SEO-optimized
- 🌐 Live Demo
- ✨ Features
- 📁 Project Structure
- 🛠️ Quick Start
- 🚀 Deployment
- 🤖 GitHub Actions
- 📊 SEO Optimization
- 🔒 Security
- 📱 Browser Support
- 🎯 Performance
- 📝 Contributing
- 📄 License
- 🙏 Acknowledgments
- 📊 Project Stats
- Problem Solutions
URL: https://unpamtiaslab.github.io/opreq/
- ✅ XSS Protection (HTML sanitization)
- ✅ URL Validation (whitelist protocols)
- ✅ Rate Limiting (spam prevention)
- ✅ CSP Headers (Content Security Policy)
- ✅ Safe External Links (noopener/noreferrer)
- ✅ Input Sanitization & Output Encoding
- ✅ Modern gradient design
- ✅ Smooth animations (10+ animations)
- ✅ Loading states & error handling
- ✅ Success/error toast notifications
- ✅ Mobile responsive (100%)
- ✅ Interactive hover effects
- ✅ Dynamic content from
config.json - ✅ QR Code generator (auto-load)
- ✅ Download QR (3 fallback methods)
- ✅ Copy link to clipboard
- ✅ Real-time countdown timer
- ✅ FAQ accordion
- ✅ Social share buttons (WA, Telegram, Twitter, FB)
- ✅ Print watermark protection
- ✅ Right-click image protection
- ✅ 25+ meta tags (SEO, OG, Twitter)
- ✅ JSON-LD structured data (Event schema)
- ✅ sitemap.xml & robots.txt
- ✅ Canonical URLs
- ✅ Geographic meta tags
- ✅ Social media preview cards
- ✅ Auto-update sitemap (daily)
- ✅ Auto-deploy to GitHub Pages
- ✅ SEO health monitoring (weekly)
- ✅ Countdown status check (hourly)
- ✅ Manual workflow triggers
opreq/
├── index.html # Main HTML with meta tags
├── config.json # Dynamic content configuration
├── sitemap.xml # SEO sitemap (auto-updated)
├── robots.txt # Search engine rules
├── script/
│ └── script.js # Security + features
├── style/
│ └── style.css # Modern styling
├── images/
│ ├── favicon.ico
│ ├── aslab_logo.webp
│ └── filkom.webp
├── .github/
│ └── workflows/
│ ├── deploy.yml # Auto deploy workflow
│ ├── seo-check.yml # SEO monitoring
│ └── countdown.yml # Deadline checker
├── README.md # This file
├── SEO_GUIDE.md # SEO documentation
├── GITHUB_ACTIONS.md # Automation guide
└── SECURITY_AUDIT.md # Security report
# Clone repository
git clone https://github.com/unpamtiaslab/opreq.git
cd opreq
# Open with live server (recommended)
# VS Code: Install "Live Server" extension
# Then: Right-click index.html → "Open with Live Server"
# Or open directly in browser
start index.html # Windows
open index.html # macOS
xdg-open index.html # LinuxEdit config.json to update content:
{
"countdown_deadline": {
"date": "19 Desember 2025",
"time": "23:59:59"
},
"persyaratan": [...],
"benefit": [...],
"timeline": [...],
"contacts": [...],
"footer_text": [...],
"text_to_qr": "https://forms.google.com/..."
}- Fork/Clone repository
- Push to your GitHub repo
- Enable GitHub Pages:
- Settings → Pages
- Source: GitHub Actions
- Done! Workflows akan auto-deploy
# Commit changes
git add .
git commit -m "Update content"
git push origin main
# GitHub Actions akan auto-deploy dalam 2-3 menit- Trigger: Push, Daily (00:00 UTC), Manual
- Function: Update sitemap → Deploy to Pages
- Trigger: Weekly (Monday), Manual
- Function: Check SEO health → Generate report
- Trigger: Hourly, Manual
- Function: Check deadline → Update status
Actions → Select Workflow → Run workflow
Documentation: See GITHUB_ACTIONS.md
- ✅ Title: 58 chars (optimal)
- ✅ Description: 159 chars (optimal)
- ✅ Keywords: 15+ targeted keywords
- ✅ Meta Tags: 25+ tags
- ✅ Structured Data: JSON-LD Event schema
- ✅ Social Cards: OG + Twitter
Google Search Console:
1. https://search.google.com/search-console
2. Add property: https://unpamtiaslab.github.io/opreq/
3. Submit sitemap.xml
Bing Webmaster:
1. https://www.bing.com/webmasters
2. Import from Google (easier)
Documentation: See SEO_GUIDE.md
- ✅ XSS Protection
- ✅ URL Validation
- ✅ Rate Limiting
- ✅ CSP Headers
- ✅ Input Sanitization
- ✅ Output Encoding
- ✅ Secure Links
- ✅ Error Handling
Documentation: See SECURITY_AUDIT.md
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS, Android)
- Load Time: < 1.5s
- File Size: < 100KB (excl. images)
- PageSpeed Score: 95+ (target)
- Mobile Friendly: ✅ 100%
Contributions welcome! Please follow these steps:
- Fork the repository
- Create feature branch (
git checkout -b feature/AmazingFeature) - Commit changes (
git commit -m 'Add AmazingFeature') - Push to branch (
git push origin feature/AmazingFeature) - Open Pull Request
This project is for internal use by ASLAB TI UNPAM.
- Design inspiration: Modern web design trends
- Icons: Emoji (native)
- QR Generator: api.qrserver.com
- Hosting: GitHub Pages
- Automation: GitHub Actions
how to fix:
- Check the browser console (F12)
- Go to Applications
- Tap Storage
- Clear site data
Solutions:
- Make sure JavaScript is enabled in your browser settings.
- Clear browser cache and reload the page.
- Try accessing the site in a different browser to rule out browser-specific issues.
- Check the browser console (F12) for any JavaScript errors that might prevent the notification from displaying.
- Ensure that any ad-blockers or browser extensions are not blocking site scripts.
how to fix:
- Look at the top right of the address bar
- Click the lock icon or
iicon - Go to Cookies
- Remove the cookies for this site
- don't forget to reload the page and Notifications
AllowedorAllow
Solutions:
- Clear cookies for the site by clicking the lock icon in the address bar, navigating to Cookies, and removing them.
- Ensure that your browser is set to accept cookies from the site.
Made with ❤️ by ASLAB TI UNPAM
Last Updated: December 12, 2025