When a QR code scanning form is opened, basic fields such as student name, degree,

year, college name, place, gender, email ID, phone number, event name, and today's
date are automatically collected. A certificate will then automatically be
generated, with the following fields: Name, Class, Year, College Name, and Event
Name. Next, a pop-up window stating "Your certificate was sent to your registered
email ID" appears, and the certificate is automatically sent to the registered
email address. Finally, all the data should be stored in a Google Sheet or MySQL
database. I need detailed coding for above the prompt (HTML, CSS, JAVASCRIPT, PHP
AND MYSQL)
When a QR code scanning form is opened, basic fields such as the student name,
degree, year, college name, location, gender, email address, phone number, event
name, and today's date are automatically collected. A certificate is then generated
automatically, containing the following fields: Name, Class, Year, College Name,
and Event Name. After this, a pop-up window appears stating, "Your certificate has
been sent to your registered email address," and the certificate is automatically
sent to the registered email. Finally, all the data is stored in either a Google
Sheet or a MySQL database. I need detailed coding for the above process, including
HTML, CSS, JavaScript, PHP, and MySQL.

When a QR code scanning form is opened, basic fields such as the student's name,
degree, year, college name, location, gender, email address, phone number, event
name(Solo Dance, Group Dance, Cookery, Fashion show) and today's date will be
appered in this form and are all data will be automatically collected. A
certificate is then generated automatically, containing the following fields: name,
degree, year, college name, and Event Name. After this, a pop-up window appears
stating, "Your certificate has been sent to your registered email address very
soon," and the certificate is automatically sent to the registered email. Finally,
all the data is stored in either a Google Sheet or a MySQL database. I need
detailed coding for the above process, including HTML, CSS, Boot Strap, JavaScript,
PHP, and MySQL.

Basic information will be automatically collected when a QR code scanning form is

opened, including the student's name, degree, year, college name, location, gender,
email address, phone number, event name (solo dance, group dance, cookery, fashion
show), and today's date. After that, a certificate with the following fields—name,
degree, year, college name, and event name—is automatically generated. The
certificate is then automatically sent to the registered email after a pop-up
window that says, "Your certificate will be sent to your registered email address
very soon," appears. Lastly, a MySQL database or a Google Sheet are used to store
all of the data. For the aforementioned procedure, I need comprehensive HTML, CSS,
Bootstrap, JavaScript, PHP, and MySQL coding.

Basic information will be automatically collected when a QR code scanning form is

opened. This information includes the student's name, degree, year, college name,
location, gender, email address, phone number, and the event name (which can be
solo dance, group dance, cookery, or fashion show), along with today's date.
Following this, a certificate will be automatically generated containing the
following fields: name, degree, year, college name, and event name. A pop-up window
will appear with the message, "Your certificate will be sent to your registered
email address very soon," after which the certificate will be sent to the
registered email. Finally, the data will be stored in either a MySQL database or a
Google Sheet. For this entire process, I will need comprehensive coding in HTML,
CSS, Bootstrap, JavaScript, PHP, and MySQL.

Basic information will be automatically collected when a QR code scanning form is

opened. This information includes the student's name, degree, year, college name,
location, gender, email address, phone number, and the event name (solo dance,
group dance, cookery, or fashion show), along with today's date. Following this, a
certificate will be automatically generated containing the following fields: name,
degree, year, college name, and event name. A pop-up window will appear with the
message, "Your certificate will be sent to your registered email address very
soon," after which the certificate will be sent to the registered email. Finally,
the data will be stored in either a MySQL database or a Google Sheet. For this
entire process, I will need to write comprehensive code in HTML, CSS, Bootstrap,
JavaScript, PHP, and MySQL.

create E-certificate from MySQL data scanning Qr-code to will be generate using
HTML, PHP, AJAX, JAVASCRIPT
Creating an e-certificate with a QR code using MySQL, HTML, PHP, AJAX, and
JavaScript involves several steps. Below is a step-by-step guide to help you
achieve this:

1. Set Up the MySQL Database

Create a table to store certificate details.

sql
CREATE TABLE certificates (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
course_name VARCHAR(255) NOT NULL,
issue_date DATE NOT NULL,
unique_code VARCHAR(255) NOT NULL
);
Insert some sample data:

sql
INSERT INTO certificates (name, course_name, issue_date, unique_code)
VALUES ('John Doe', 'Web Development', '2023-10-01', 'CERT12345');
2. Create the HTML Form
Create an HTML form to fetch certificate details.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Certificate Generator</title>
</head>
<body>
<h1>E-Certificate Generator</h1>
<form id="certificateForm">
<label for="unique_code">Enter Unique Code:</label>
<input type="text" id="unique_code" name="unique_code" required>
<button type="submit">Generate Certificate</button>
</form>

<div id="certificateDisplay" style="display:none;">

<h2>E-Certificate</h2>
<p><strong>Name:</strong> <span id="certName"></span></p>
<p><strong>Course:</strong> <span id="certCourse"></span></p>
<p><strong>Issue Date:</strong> <span id="certDate"></span></p>
 <div id="qrcode"></div>
</div>

<script
src="[Link]
<script src="[Link]
<script src="[Link]"></script>
</body>
</html>
3. Create the PHP Script
Create a PHP script (fetch_certificate.php) to fetch certificate details from the
database.

php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "your_database_name";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$unique_code = $_GET['unique_code'];

$sql = "SELECT * FROM certificates WHERE unique_code = '$unique_code'";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
echo json_encode($row);
} else {
echo json_encode(array("error" => "No certificate found"));
}

$conn->close();
?>
4. Create the JavaScript File
Create a JavaScript file ([Link]) to handle form submission, fetch data using
AJAX, and generate the QR code.

javascript
$(document).ready(function () {
$('#certificateForm').submit(function (e) {
[Link]();
const uniqueCode = $('#unique_code').val();

$.ajax({
url: 'fetch_certificate.php',
type: 'GET',
data: { unique_code: uniqueCode },
dataType: 'json',
success: function (response) {
if ([Link]) {
 alert([Link]);
} else {
$('#certName').text([Link]);
$('#certCourse').text(response.course_name);
$('#certDate').text(response.issue_date);

// Generate QR Code
const qrcodeContainer = [Link]('qrcode');
[Link] = ''; // Clear previous QR code
new QRCode(qrcodeContainer, {
text: [Link](response),
width: 128,
height: 128
});

$('#certificateDisplay').show();
}
},
error: function (xhr, status, error) {
[Link]("AJAX Error: " + status + error);
}
});
});
});
5. Explanation of the Code
MySQL Database: Stores certificate details.

HTML Form: Allows users to input a unique code to fetch certificate details.

PHP Script: Fetches certificate details from the database based on the unique code.

AJAX: Sends a request to the PHP script and retrieves the certificate details
without refreshing the page.

QR Code Generation: Uses the qrcodejs library to generate a QR code containing the
certificate details.

6. Libraries Used
jQuery: Simplifies AJAX calls and DOM manipulation.

qrcodejs: Generates QR codes dynamically.

7. Testing
Start your local server (e.g., XAMPP, WAMP).

Place the files in the appropriate directory.

Open the HTML file in a browser.

Enter a valid unique code and submit the form.

The certificate details and QR code should be displayed.

8. Optional Enhancements
Add styling to the certificate using CSS.

Save the certificate as a PDF using libraries like jsPDF.

Secure the PHP script to prevent SQL injection.

Let me know if you need further assistance!

yes
Great! Let me enhance the solution with more features, security improvements, and
better styling. Here's a complete implementation:

Enhanced E-Certificate System

1. Improved Database Structure
sql
CREATE DATABASE IF NOT EXISTS e_certificate_db;
USE e_certificate_db;

CREATE TABLE certificates (

id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
course_name VARCHAR(255) NOT NULL,
issue_date DATE NOT NULL,
expiry_date DATE,
unique_code VARCHAR(50) UNIQUE NOT NULL,
verification_url VARCHAR(500),
status ENUM('active', 'revoked', 'expired') DEFAULT 'active',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insert sample data

INSERT INTO certificates (name, email, course_name, issue_date, expiry_date,
unique_code)
VALUES
('John Doe', 'john@[Link]', 'Web Development', '2024-01-15', '2025-01-15',
'CERT2024-001'),
('Jane Smith', 'jane@[Link]', 'Data Science', '2024-02-20', '2025-02-20',
'CERT2024-002');
2. Complete HTML File ([Link])
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Certificate System</title>
<link rel="stylesheet" href="[Link]">
<link href="[Link]
family=Poppins:wght@300;400;600&family=Playfair+Display:wght@700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="[Link]
awesome/6.4.0/css/[Link]">
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-award"></i> E-Certificate Generator &
Verifier</h1>
<p>Scan QR code or enter certificate code to verify authenticity</p>
</header>

<div class="main-content">
<!-- Left Panel: Certificate Display -->
 <div class="certificate-section">
<div class="certificate-container" id="certificateContainer">
<div class="certificate-border">
<div class="certificate-header">
<div class="logo">
<i class="fas fa-university"></i>
<span>EDU CERTIFY</span>
</div>
<div class="watermark">CERTIFIED</div>
</div>

<div class="certificate-body">
<h2>CERTIFICATE OF COMPLETION</h2>
<p class="presented-to">This certifies that</p>
<h3 id="certName">[Name Here]</h3>
<p class="completion-text">has successfully completed
the course</p>
<h4 id="certCourse">[Course Name]</h4>

<div class="details-grid">
<div class="detail-item">
<span class="label">Issue Date:</span>
<span id="certIssueDate"
class="value">--</span>
</div>
<div class="detail-item">
<span class="label">Expiry Date:</span>
<span id="certExpiryDate"
class="value">--</span>
</div>
<div class="detail-item">
<span class="label">Certificate ID:</span>
<span id="certCode" class="value">--</span>
</div>
<div class="detail-item">
<span class="label">Status:</span>
<span id="certStatus" class="value status-
active">--</span>
</div>
</div>

<div class="signatures">
<div class="signature">
<div class="signature-line"></div>
<p>Director of Education</p>
</div>
<div class="signature">
<div class="signature-line"></div>
<p>Course Instructor</p>
</div>
</div>
</div>

<div class="certificate-footer">
<div id="qrcode"></div>
<div class="verification-info">
<p><i class="fas fa-qrcode"></i> Scan QR code to
verify</p>
<p
id="verificationUrl">[Link]
</div>
</div>
</div>
</div>

<div class="certificate-actions">
<button id="downloadBtn" class="btn btn-download" disabled>
<i class="fas fa-download"></i> Download Certificate
</button>
<button id="printBtn" class="btn btn-print" disabled>
<i class="fas fa-print"></i> Print Certificate
</button>
</div>
</div>

<!-- Right Panel: Search Form -->

<div class="search-section">
<div class="search-box">
<h3><i class="fas fa-search"></i> Verify Certificate</h3>

<div class="input-group">
<label for="unique_code"><i class="fas fa-certificate"></i>
Certificate Code:</label>
<input type="text" id="unique_code" name="unique_code"
placeholder="Enter certificate code (e.g., CERT2024-
001)"
autocomplete="off">
<div class="suggestions" id="suggestions"></div>
</div>

<div class="input-group">
<label for="scanMode"><i class="fas fa-camera"></i> QR Code
Scanner:</label>
<div class="scanner-container">
<button id="startScanner" class="btn btn-scan">
<i class="fas fa-camera"></i> Start Scanner
</button>
<div id="qr-reader" style="display: none;"></div>
</div>
</div>

<button id="verifyBtn" class="btn btn-verify">

<i class="fas fa-check-circle"></i> Verify Certificate
</button>

<div class="stats">
<div class="stat-item">
<span class="stat-number"
id="totalCertificates">0</span>
<span class="stat-label">Total Certificates</span>
</div>
<div class="stat-item">
<span class="stat-number"
id="activeCertificates">0</span>
<span class="stat-label">Active</span>
</div>
<div class="stat-item">
<span class="stat-number" id="verifiedToday">0</span>
 <span class="stat-label">Verified Today</span>
</div>
</div>
</div>

<div class="result-box" id="resultBox" style="display: none;">

<h3><i class="fas fa-clipboard-check"></i> Verification
Result</h3>
<div id="verificationResult"></div>
</div>

<div class="instructions">
<h4><i class="fas fa-info-circle"></i> How to Use:</h4>
<ol>
<li>Enter the certificate code or scan the QR code</li>
<li>Click "Verify Certificate"</li>
<li>View and download the authenticated certificate</li>
<li>Scan the QR code anytime to verify authenticity</li>
</ol>
</div>
</div>
</div>

<footer>
<p>© 2024 E-Certificate System | Secure Digital Certification
Platform</p>
</footer>
</div>

<!-- Scripts -->

<script src="[Link]
<script
src="[Link]
<script src="[Link]
<script src="[Link]"></script>
</body>
</html>
3. CSS File ([Link])
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 1400px;
margin: 0 auto;
}

/* Header */
header {
 text-align: center;
margin-bottom: 30px;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

header h1 {
font-family: 'Playfair Display', serif;
color: #2c3e50;
margin-bottom: 10px;
}

header p {
color: #7f8c8d;
}

/* Main Content Layout */

.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-bottom: 30px;
}

/* Certificate Section */
.certificate-section {
display: flex;
flex-direction: column;
gap: 20px;
}

.certificate-container {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.certificate-border {
border: 20px solid transparent;
border-image: linear-gradient(45deg, #3498db, #9b59b6);
border-image-slice: 1;
padding: 40px;
position: relative;
}

/* Certificate Header */
.certificate-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}

.logo {
display: flex;
align-items: center;
 gap: 10px;
font-size: 24px;
font-weight: bold;
color: #2c3e50;
}

.logo i {
color: #3498db;
font-size: 32px;
}

.watermark {
font-size: 60px;
opacity: 0.05;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-weight: bold;
pointer-events: none;
}

/* Certificate Body */
.certificate-body {
text-align: center;
}

.certificate-body h2 {
color: #2c3e50;
font-family: 'Playfair Display', serif;
margin-bottom: 30px;
border-bottom: 2px solid #3498db;
padding-bottom: 15px;
}

.presented-to {
font-size: 18px;
color: #7f8c8d;
margin-bottom: 10px;
}

.certificate-body h3 {
font-size: 36px;
color: #2c3e50;
margin: 20px 0;
padding: 15px;
background: linear-gradient(to right, #3498db, #9b59b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-bottom: 3px double #eee;
}

.completion-text {
font-size: 16px;
color: #7f8c8d;
margin-bottom: 10px;
}
.certificate-body h4 {
font-size: 24px;
color: #3498db;
margin-bottom: 30px;
}

/* Details Grid */
.details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
text-align: left;
}

.detail-item {
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #3498db;
}

.label {
display: block;
color: #7f8c8d;
font-size: 14px;
margin-bottom: 5px;
}

.value {
display: block;
color: #2c3e50;
font-weight: 600;
font-size: 16px;
}

.status-active {
color: #27ae60;
}

.status-expired {
color: #e74c3c;
}

.status-revoked {
color: #95a5a6;
}

/* Signatures */
.signatures {
display: flex;
justify-content: space-around;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #eee;
}

.signature {
text-align: center;
}

.signature-line {
width: 200px;
height: 1px;
background: #2c3e50;
margin: 20px auto;
position: relative;
}

.signature-line::after {
content: '';
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 16px;
border-top: 1px solid #2c3e50;
border-bottom: 1px solid #2c3e50;
}

/* Certificate Footer */
.certificate-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px dashed #ddd;
}

.verification-info {
text-align: right;
font-size: 14px;
color: #7f8c8d;
}

#qrcode {
width: 150px;
height: 150px;
padding: 10px;
background: white;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Certificate Actions */
.certificate-actions {
display: flex;
gap: 15px;
justify-content: center;
}

/* Search Section */
.search-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.search-box, .result-box, .instructions {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.search-box h3, .result-box h3 {

color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}

/* Input Groups */
.input-group {
margin-bottom: 20px;
}

.input-group label {
display: block;
margin-bottom: 8px;
color: #2c3e50;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}

.input-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}

.input-group input:focus {
outline: none;
border-color: #3498db;
}

.suggestions {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-top: 5px;
max-height: 200px;
overflow-y: auto;
display: none;
}

.suggestion-item {
padding: 10px 15px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:hover {
background: #f8f9fa;
}

/* Scanner */
.scanner-container {
text-align: center;
}

#qr-reader {
margin-top: 15px;
border: 2px solid #3498db;
border-radius: 8px;
overflow: hidden;
}

/* Buttons */
.btn {
padding: 12px 25px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.btn-verify {
background: linear-gradient(45deg, #3498db, #2980b9);
color: white;
width: 100%;
}

.btn-verify:hover {
background: linear-gradient(45deg, #2980b9, #1f6395);
transform: translateY(-2px);
}

.btn-download {
background: linear-gradient(45deg, #27ae60, #219653);
color: white;
}

.btn-print {
background: linear-gradient(45deg, #e74c3c, #c0392b);
color: white;
}

.btn-scan {
background: linear-gradient(45deg, #9b59b6, #8e44ad);
color: white;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}

.btn:not(:disabled):hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Stats */
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #eee;
}

.stat-item {
text-align: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}

.stat-number {
display: block;
font-size: 24px;
font-weight: 700;
color: #3498db;
}

.stat-label {
display: block;
font-size: 12px;
color: #7f8c8d;
text-transform: uppercase;
margin-top: 5px;
}

/* Result Box */
#verificationResult {
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #3498db;
}

/* Instructions */
.instructions ol {
padding-left: 20px;
margin-top: 15px;
}

.instructions li {
margin-bottom: 10px;
 color: #555;
}

/* Footer */
footer {
text-align: center;
padding: 20px;
color: #7f8c8d;
font-size: 14px;
background: white;
border-radius: 15px;
margin-top: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
.main-content {
grid-template-columns: 1fr;
}

.details-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {

.certificate-border {
padding: 20px;
}

.certificate-body h3 {
font-size: 28px;
}

.certificate-footer {
flex-direction: column;
gap: 20px;
}

.stats {
grid-template-columns: 1fr;
}
}
4. Enhanced JavaScript ([Link])
javascript
$(document).ready(function() {
let qrCodeInstance = null;
let scannerActive = false;
const baseUrl = [Link];

// Initialize stats
loadStatistics();

// Auto-suggestions for certificate codes

$('#unique_code').on('input', function() {
const query = $(this).val();
if([Link] >= 2) {
fetchSuggestions(query);
} else {
 $('#suggestions').hide();
}
});

// Verify certificate
$('#verifyBtn').on('click', function() {
verifyCertificate();
});

// Enter key for verification

$('#unique_code').on('keypress', function(e) {
if([Link] === 13) {
verifyCertificate();
return false;
}
});

// QR Code Scanner
$('#startScanner').on('click', function() {
if(!scannerActive) {
startQRScanner();
} else {
stopQRScanner();
}
});

// Download certificate
$('#downloadBtn').on('click', function() {
downloadCertificate();
});

// Print certificate
$('#printBtn').on('click', function() {
printCertificate();
});

// Close suggestions when clicking outside

$(document).on('click', function(e) {
if(!$([Link]).closest('#unique_code').length) {
$('#suggestions').hide();
}
});

function fetchSuggestions(query) {
$.ajax({
url: '[Link]?action=suggest&query=' + encodeURIComponent(query),
type: 'GET',
dataType: 'json',
success: function(response) {
if([Link] && [Link] > 0) {
const suggestions = $('#suggestions');
[Link]();

[Link](item => {
[Link](
`<div class="suggestion-item" data-code="$
{item.unique_code}">
${item.unique_code} - ${[Link]}
</div>`
 );
});

[Link]();

// Handle suggestion click

$('.suggestion-item').on('click', function() {
$('#unique_code').val($(this).data('code'));
[Link]();
verifyCertificate();
});
} else {
$('#suggestions').hide();
}
}
});
}

function verifyCertificate() {
const uniqueCode = $('#unique_code').val().trim();

if(!uniqueCode) {
showResult('Please enter a certificate code', 'error');
return;
}

$('#verifyBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-

spin"></i> Verifying...');

$.ajax({
url: '[Link]?action=verify',
type: 'POST',
data: { unique_code: uniqueCode },
dataType: 'json',
success: function(response) {
if([Link]) {
displayCertificate([Link]);
showResult('Certificate verified successfully!', 'success');

// Enable download and print buttons

$('#downloadBtn, #printBtn').prop('disabled', false);

// Update verification URL

$('#verificationUrl').text(baseUrl + '/[Link]?code=' +
uniqueCode);

// Log verification
logVerification(uniqueCode);
} else {
showResult([Link] || 'Certificate not found',
'error');
hideCertificate();
}
},
error: function(xhr, status, error) {
showResult('Error connecting to server', 'error');
[Link]('AJAX Error:', error);
},
complete: function() {
 $('#verifyBtn').prop('disabled', false).html('<i class="fas fa-
check-circle"></i> Verify Certificate');
}
});
}

function displayCertificate(data) {
// Update certificate details
$('#certName').text([Link]);
$('#certCourse').text(data.course_name);
$('#certIssueDate').text(formatDate(data.issue_date));
$('#certExpiryDate').text(data.expiry_date ? formatDate(data.expiry_date) :
'N/A');
$('#certCode').text(data.unique_code);

// Update status with appropriate class

const statusElement = $('#certStatus');
[Link]([Link]);
[Link]('status-active status-expired status-revoked');
[Link]('status-' + [Link]);

// Generate QR Code
const qrData = [Link]({
id: [Link],
name: [Link],
course: data.course_name,
code: data.unique_code,
issue_date: data.issue_date,
status: [Link],
verify_url: baseUrl + '/[Link]?code=' + data.unique_code
});

const qrcodeDiv = [Link]('qrcode');

[Link] = '';

qrCodeInstance = new QRCode(qrcodeDiv, {

text: qrData,
width: 150,
height: 150,
colorDark: "#2c3e50",
colorLight: "#ffffff",
correctLevel: [Link].H
});

// Show certificate
$('#certificateContainer').fadeIn();
}

function hideCertificate() {
$('#certificateContainer').hide();
$('#qrcode').empty();
$('#downloadBtn, #printBtn').prop('disabled', true);
}

function showResult(message, type) {

const resultBox = $('#resultBox');
const resultDiv = $('#verificationResult');

[Link](`
 <div class="result-${type}">
<i class="fas fa-${type === 'success' ? 'check-circle' :
'exclamation-circle'}"></i>
${message}
</div>
`);

[Link]();

// Auto-hide success messages after 5 seconds

if(type === 'success') {
setTimeout(() => {
[Link]();
}, 5000);
}
}

function startQRScanner() {
$('#qr-reader').show();
$('#startScanner').html('<i class="fas fa-stop"></i> Stop Scanner');

const html5QrCode = new Html5Qrcode("qr-reader");

[Link](
{ facingMode: "environment" },
{
fps: 10,
qrbox: { width: 250, height: 250 }
},
(decodedText) => {
// QR Code scanned successfully
$('#unique_code').val(decodedText);
stopQRScanner();
verifyCertificate();
},
(errorMessage) => {
// Ignore scanning errors
}
).catch(err => {
[Link]("Scanner error:", err);
showResult('Failed to start scanner. Please check camera permissions.',
'error');
stopQRScanner();
});

scannerActive = true;
}

function stopQRScanner() {
$('#qr-reader').hide();
$('#startScanner').html('<i class="fas fa-camera"></i> Start Scanner');

if(window.Html5QrcodeScanner) {
[Link]().then(cameras => {
if([Link] > 0) {
const html5QrCode = new Html5Qrcode("qr-reader");
[Link]();
}
});
 }

scannerActive = false;
}

function downloadCertificate() {
const certificateElement = $('#certificateContainer')[0];

// Use html2canvas to capture the certificate

if(typeof html2canvas !== 'undefined') {
html2canvas(certificateElement).then(canvas => {
const link = [Link]('a');
[Link] = 'certificate_' + $('#certCode').text() + '.png';
[Link] = [Link]('image/png');
[Link]();
});
} else {
alert('Download feature requires html2canvas library');
}
}

function printCertificate() {
const printContent = $('#certificateContainer').html();
const originalContent = $('body').html();

$('body').html(printContent);
[Link]();
$('body').html(originalContent);
[Link](); // Reload to restore functionality
}

function loadStatistics() {
$.ajax({
url: '[Link]?action=statistics',
type: 'GET',
dataType: 'json',
success: function(response) {
if([Link]) {
$('#totalCertificates').text([Link]);
$('#activeCertificates').text([Link]);
$('#verifiedToday').text([Link].verified_today);
}
}
});
}

function logVerification(code) {
$.ajax({
url: '[Link]?action=log_verification',
type: 'POST',
data: { code: code },
dataType: 'json'
});
}

function formatDate(dateString) {
const date = new Date(dateString);
return [Link]('en-US', {
year: 'numeric',
 month: 'long',
day: 'numeric'
});
}

// Load sample certificate on page load

$('#unique_code').val('CERT2024-001');
setTimeout(() => verifyCertificate(), 1000);
});
5. Enhanced API Endpoint ([Link])
php
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');

// Database configuration
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'e_certificate_db');

// Create connection
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

// Check connection
if ($conn->connect_error) {
die(json_encode(['success' => false, 'message' => 'Database connection
failed']));
}

$conn->set_charset("utf8");

// Get action parameter

$action = $_GET['action'] ?? '';

switch ($action) {
case 'verify':
verifyCertificate();
break;

case 'suggest':
getSuggestions();
break;

case 'statistics':
getStatistics();
break;

case 'log_verification':
logVerification();
break;

default:
echo json_encode(['success' => false, 'message' => 'Invalid action']);
break;
}
function verifyCertificate() {
global $conn;

$unique_code = $conn->real_escape_string($_POST['unique_code'] ?? '');

if (empty($unique_code)) {
echo json_encode(['success' => false, 'message' => 'Certificate code is
required']);
return;
}

$sql = "SELECT * FROM certificates WHERE unique_code = ?";

$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $unique_code);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
$certificate = $result->fetch_assoc();

// Check if certificate is expired

if (!empty($certificate['expiry_date']) &&
strtotime($certificate['expiry_date']) < time()) {
$certificate['status'] = 'expired';
}

echo json_encode([
'success' => true,
'message' => 'Certificate found',
'data' => $certificate
]);
} else {
echo json_encode(['success' => false, 'message' => 'Certificate not
found']);
}

$stmt->close();
}

function getSuggestions() {
global $conn;

$query = $conn->real_escape_string($_GET['query'] ?? '');

$sql = "SELECT unique_code, name FROM certificates

WHERE unique_code LIKE ? OR name LIKE ?
LIMIT 10";

$stmt = $conn->prepare($sql);
$searchTerm = "%$query%";
$stmt->bind_param("ss", $searchTerm, $searchTerm);
$stmt->execute();
$result = $stmt->get_result();

$suggestions = [];
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row;
}
 echo json_encode(['success' => true, 'data' => $suggestions]);
$stmt->close();
}

function getStatistics() {
global $conn;

$stats = [];

// Total certificates
$result = $conn->query("SELECT COUNT(*) as total FROM certificates");
$stats['total'] = $result->fetch_assoc()['total'];

// Active certificates
$result = $conn->query("SELECT COUNT(*) as active FROM certificates WHERE
status = 'active'");
$stats['active'] = $result->fetch_assoc()['active'];

// Verifications today
$today = date('Y-m-d');
$result = $conn->query("SELECT COUNT(*) as verified_today FROM
verification_logs WHERE DATE(verified_at) = '$today'");
$stats['verified_today'] = $result->fetch_assoc()['verified_today'];

echo json_encode(['success' => true, 'data' => $stats]);

}

function logVerification() {
global $conn;

$code = $conn->real_escape_string($_POST['code'] ?? '');

$ip_address = $_SERVER['REMOTE_ADDR'];
$user_agent = $_SERVER['HTTP_USER_AGENT'];

// Create verification logs table if not exists

$conn->query("CREATE TABLE IF NOT EXISTS verification_logs (
id INT AUTO_INCREMENT PRIMARY KEY,
certificate_code VARCHAR(50),
ip_address VARCHAR(45),
user_agent TEXT,
verified_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)");

$sql = "INSERT INTO verification_logs (certificate_code, ip_address,

user_agent)
VALUES (?, ?, ?)";

$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $code, $ip_address, $user_agent);
$stmt->execute();
$stmt->close();

echo json_encode(['success' => true]);

}

$conn->close();
?>
6. Verification Page ([Link])
php
<?php
// Database configuration
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "e_certificate_db";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Get certificate code from URL

$code = $_GET['code'] ?? '';

if (empty($code)) {
die("Certificate code is required");
}

// Fetch certificate
$sql = "SELECT * FROM certificates WHERE unique_code = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $code);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 0) {
die("Certificate not found");
}

$certificate = $result->fetch_assoc();
$stmt->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Certificate Verification</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: #f5f5f5;
}
.certificate {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
border: 5px solid #3498db;
}
.verification-result {
padding: 15px;
 margin: 20px 0;
border-radius: 5px;
font-weight: bold;
}
.valid {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.invalid {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<div class="certificate">
<h1 style="text-align: center; color: #2c3e50;">Certificate
Verification</h1>

<div class="verification-result <?php echo $certificate['status'] ===

'active' ? 'valid' : 'invalid'; ?>">
Certificate: <?php echo $certificate['status'] === 'active' ? 'VALID' :
'INVALID'; ?>
</div>

<table style="width: 100%; border-collapse: collapse;">

<tr>
<td style="padding: 10px; border-bottom: 1px solid
#eee;"><strong>Certificate ID:</strong></td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><?php
echo htmlspecialchars($certificate['unique_code']); ?></td>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid
#eee;"><strong>Name:</strong></td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><?php
echo htmlspecialchars($certificate['name']); ?></td>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid
#eee;"><strong>Course:</strong></td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><?php
echo htmlspecialchars($certificate['course_name']); ?></td>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid
#eee;"><strong>Issue Date:</strong></td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><?php
echo $certificate['issue_date']; ?></td>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid
#eee;"><strong>Status:</strong></td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><?php
echo strtoupper($certificate['status']); ?></td>
</tr>
<tr>
 <td style="padding: 10px; border-bottom: 1px solid
#eee;"><strong>Verified On:</strong></td>
<td style="padding: 10px; border-bottom: 1px solid #eee;"><?php
echo date('Y-m-d H:i:s'); ?></td>
</tr>
</table>

<p style="text-align: center; margin-top: 30px; color: #666;">

This is an official verification of the certificate.
<br>
For more information, contact the issuing authority.
</p>
</div>
</body>
</html>
<?php $conn->close(); ?>
7. Installation Instructions
Setup Database:

sql
CREATE DATABASE e_certificate_db;
USE e_certificate_db;

-- Run the SQL from step 1

Install Required Libraries:

bash
# Place these in your project directory:
# - [Link]
# - [Link]
# - [Link]
# - [Link]
# - [Link]
Update Configuration:

Update database credentials in [Link] and [Link]

Change baseUrl in [Link] to your domain

Optional Libraries (for enhanced features):

html
<!-- Add to head section for download feature -->
<script src="[Link]
8. Features Included:
✅ Full Certificate Display with professional design
✅ QR Code Generation & Scanning
✅ Real-time AJAX Verification
✅ Auto-suggestions for certificate codes
✅ Statistics Dashboard
✅ Download & Print Options
✅ Mobile Responsive Design
✅ Security Features (SQL injection prevention)
✅ Verification Logging
✅ Expiry Date Checking
✅ Status Tracking (active/expired/revoked)
✅ Separate Verification Page
✅ Database Structure with indexes
9. Security Enhancements:
Prepared Statements to prevent SQL injection

Input Validation on both client and server side

CORS Headers for API security

Error Handling without exposing sensitive information

HTTPS Recommended for production

This complete system provides a professional e-certificate solution with QR code

functionality. You can further extend it with features like email notifications,
admin panel, or PDF generation.