QR Code Integration Guide - Certificate Plugin

🎯 What is QR Code Integration?

QR Code integration allows you to add a scannable verification code to your certificates. When scanned with a smartphone, it instantly verifies the certificate's authenticity and displays the student's details.

✨ Key Benefits:

Instant certificate verification
Tamper-proof security
Mobile-friendly validation
Professional appearance
No manual checking required

🔄 Complete Flow: Design to Verification

🎨

1. Design

Open editor and add QR code element to your certificate design

💾

2. Save

Save layout with QR code position and size

👁️

3. Preview

View QR code placeholder in preview page

🎓

4. Issue

Student completes course and receives certificate

📄

5. Generate

System generates PDF with real QR code

📱

6. Scan

Anyone can scan QR to verify certificate

📋 Step-by-Step Guide

Step 1: Add QR Code in Editor

Open certificate_editor.php
Click the "📱 Add QR Code" button in toolbar
QR code element appears on canvas
Drag it to desired position (recommended: bottom right)
Resize using handles (recommended: 100x100px)

// QR Code automatically added to layout JSON
{
  "type": "qrcode",
  "x": 720,
  "y": 475,
  "width": 100,
  "height": 100
}
            

⬇️

Step 2: Save Layout

Click "💾 Save Layout" button
Layout saved to moodledata/mod_certificate/layouts/layout_default.json
QR code position and size stored

⬇️

Step 3: Preview Certificate

Open certificate_preview.php
QR code shows as blue dashed placeholder
Displays "📱 QR Code Verification"
Position matches editor design

🎓 Certificate of Achievement

This is to certify that
Hassan Eikial
has successfully completed
Web Development Course
26 October 2025

📱

QR Code

⬇️

Step 4: Create Certificate in Course

Go to course → Add activity → Certificate
Set name: "Course Completion Certificate"
Select type: "Custom Editor"
Configure requirements (grade, date, etc.)
Save and display

💡 Important: Make sure to select "Custom Editor" as the certificate type. This is the only type that uses your visual editor design!

⬇️

Step 5: Student Receives Certificate

Student completes course requirements
Student clicks certificate activity
System generates unique code (e.g., "ABC123XYZ")
QR code image created automatically
PDF generated with embedded QR code
Student downloads certificate

// System automatically:
Creates certificate issue record
Generates unique verification code
Creates QR code image: certificate_ABC123XYZ.png
Embeds QR in PDF at specified position
Outputs final certificate
            

⬇️

Step 6: Verification

Anyone scans QR code with smartphone
Opens: verify.php?code=ABC123XYZ
Shows certificate details instantly
Confirms authenticity

⚙️ Technical Implementation

Preview Page (certificate_preview.php)

QR code rendered as placeholder for visual reference:

else if (element.type === "qrcode") {
    // Create QR placeholder div
    const qrDiv = document.createElement("div");
    qrDiv.style.width = (element.width || 100) + "px";
    qrDiv.style.height = (element.height || 100) + "px";
    qrDiv.style.border = "2px dashed #667eea";
    qrDiv.style.background = "#f0f7ff";
    qrDiv.innerHTML = "📱 QR Code Verification";
    el.appendChild(qrDiv);
}
            

PDF Generator (type/custom_editor/certificate.php)

Real QR code generated and embedded in PDF:

if ($element['type'] === 'qrcode') {
    // Get certificate issue
    $certissue = $DB->get_record('certificate_issues', [
        'certificateid' => $certificate->id,
        'userid' => $USER->id
    ]);
    
    if ($certissue && !empty($certissue->code)) {
        // Load QR library
        require_once($CFG->dirroot . '/local/qr/lib.php');
        
        // Create verification URL
        $verifyurl = new moodle_url('/mod/certificate/verify.php', [
            'code' => $certissue->code
        ]);
        
        // Generate QR code image
        $qrfile = $qrdir . 'certificate_' . $certissue->code . '.png';
        local_qr_generate_qrcode($verifyurl->out(false), $qrfile, 'M', 6, 1);
        
        // Add QR code to PDF
        $pdf->Image($qrfile, $x, $y, $width, $height);
    }
}
            

📐 Position Recommendations

Position	X	Y	Size	Best For
Bottom Right ⭐	720px	475px	100x100px	Most professional, doesn't distract
Bottom Left	20px	475px	100x100px	Alternative placement
Top Right (Small)	740px	20px	80x80px	Subtle, unobtrusive
Bottom Center	370px	475px	100x100px	Centered design

✅ Good Placement

Corners (especially bottom right)
Clear background area
Away from important text
Good contrast with background
Easily scannable

❌ Bad Placement

Center of certificate (distracting)
Over busy background
Too close to text
Too close to edge
Over important content

📏 Size Recommendations

Size	Pixels	Millimeters	Use Case	Scanability
Small	60x60px	15.9mm	Corners, subtle	⚠️ Difficult
Standard	80x80px	21.2mm	Top corners	✅ Good
Recommended ⭐	100x100px	26.5mm	Bottom corners	✅ Excellent
Large	150x150px	39.7mm	High visibility	✅ Perfect
Too Large	200x200px	52.9mm	-	⚠️ Distracting

💡 Pro Tip: Use 100x100px for the perfect balance between visibility and aesthetics. This size is easily scannable while maintaining a professional appearance.

🔐 Security Features

🔑

Unique Codes

Each certificate gets a unique verification code

🗄️

Database Linked

Code linked to student, course, and date

⏱️

Timestamped

Issue date and time recorded

🚫

Tamper-Proof

Cannot be duplicated or modified

✨ Security Benefits:

Instant Verification: Real-time database check
Cannot Be Forged: Unique codes cannot be guessed
Full Audit Trail: All certificate issues logged
Mobile Friendly: Verify anywhere with smartphone
No Manual Work: Automatic validation

🔧 Troubleshooting

Problem: QR Code Not Showing in Preview

Symptoms:

QR code added in editor but not visible in preview
Layout saved but QR missing

Solutions:

✅ Check layout saved correctly (click Save Layout)
✅ Refresh preview page (Ctrl+F5)
✅ Clear browser cache
✅ Check browser console for JavaScript errors
✅ Verify layout JSON contains QR element

Problem: QR Code Not in PDF

Symptoms:

PDF generated but QR code missing
Preview shows QR but PDF doesn't

Solutions:

✅ Ensure certificate was issued (not just previewed)
✅ Check /local/qr/ directory exists
✅ Verify file permissions on /local/qr/image/
✅ Check QR library loaded correctly
✅ Look for errors in PHP error log

Problem: QR Code Won't Scan

Symptoms:

Phone camera can't read QR code
QR code appears blurry

Solutions:

✅ Increase QR size (100px → 150px)
✅ Ensure good contrast (white background best)
✅ Don't place over busy background
✅ Check PDF quality settings
✅ Use better lighting when scanning
✅ Hold phone steady, 15-30cm away

✅ Testing Checklist

Editor Testing

Open certificate_editor.php
Click "📱 Add QR Code" button
QR element appears on canvas
Drag QR to bottom right corner
Resize to 100x100px
Click "💾 Save Layout"
Success message appears

Preview Testing

Open certificate_preview.php
QR placeholder visible (blue dashed box)
Position matches editor
Size matches editor
Shows "📱 QR Code Verification"

PDF Testing

Create certificate activity in course
Select "Custom Editor" type
Complete course as student
Click certificate activity
PDF downloads automatically
Open PDF in viewer
QR code visible in PDF
QR code in correct position

Verification Testing

Open PDF on computer
Use phone to scan QR code
Phone opens verification page
Page shows certificate details
Student name correct
Course name correct
Date correct
Status shows "Valid"

🎉 Summary

✅ What's Working Now:

Editor: Add QR code button, drag & drop, resize
Preview: QR placeholder visible, matches design
PDF: Real QR code embedded, scannable
Verification: Instant validation, mobile-friendly
Security: Unique codes, tamper-proof, timestamped

🚀 Ready to Use!
The QR code integration is fully implemented and ready for production use. Follow the steps above to add QR codes to your certificates and provide instant verification for your students!

🔗 Quick Links

🎨 Certificate Editor 👁️ Preview Page 🔤 Font Manager 🧪 Test Page

📱 QR Code Integration Guide

🎯 What is QR Code Integration?

🔄 Complete Flow: Design to Verification

📋 Step-by-Step Guide

Step 1: Add QR Code in Editor

Step 2: Save Layout

Step 3: Preview Certificate

Step 4: Create Certificate in Course

Step 5: Student Receives Certificate

Step 6: Verification

⚙️ Technical Implementation

Preview Page (certificate_preview.php)

PDF Generator (type/custom_editor/certificate.php)

📐 Position Recommendations

✅ Good Placement

❌ Bad Placement

📏 Size Recommendations

🔐 Security Features

🔧 Troubleshooting

Problem: QR Code Not Showing in Preview

Problem: QR Code Not in PDF

Problem: QR Code Won't Scan

✅ Testing Checklist

Editor Testing

Preview Testing

PDF Testing

Verification Testing

🎉 Summary

✅ What's Working Now:

🔗 Quick Links

🎉 Everything is Ready!