A
Anonymous

Employee Id Card - Copy this React, Tailwind Component to your project

<?php-//-Include-database-configuration-include('../include/dbconfig.php');-//-Check-if-the-database-connection-is-established-if-(!$conn)-{-die("Database-connection-not-established.");-}-//-Include-the-TCPDF-library-require_once('../tcpdf/tcpdf.php');-//-Get-emp_id-from-the-URL-if-(!isset($_GET['emp_id'])-||-empty($_GET['emp_id']))-{-die("Employee-ID-is-missing.");-}-$emp_id-=-htmlspecialchars($_GET['emp_id']);-//-Fetch-employee-details-$sql-=-"SELECT-e.first_name,-e.last_name,-e.father_first_name,-e.designation_name,-e.village,-e.state,-e.city,-e.pin_code,-e.phone,-e.email,-e.profile_photo,-e.emp_id,-e.date_of_birth-FROM-employees-e-WHERE-e.emp_id-=-?";-$stmt-=-$conn->prepare($sql);-if-(!$stmt)-{-die("Database-error:-"-.-$conn->error);-}-$stmt->bind_param("s",-$emp_id);-$stmt->execute();-$result-=-$stmt->get_result();-if-($result->num_rows->-0)-{-$row-=-$result->fetch_assoc();-//-Create-new-TCPDF-object-$pdf-=-new-TCPDF('P',-'mm',-array(90,-140),-true,-'UTF-8',-false);-//-Set-document-properties-$pdf->SetCreator('TajTrendz-Pvt-Ltd');-$pdf->SetAuthor('TajTrendz-Pvt-Ltd');-$pdf->SetTitle('Employee-ID-Card');-//-Remove-default-header/footer-$pdf->setPrintHeader(false);-$pdf->setPrintFooter(false);-//-Set-margins-$pdf->SetMargins(5,-5,-5);-//-Add-a-page-$pdf->AddPage();-//-Handle-profile-photo-$profile_photo-=-$row['profile_photo'];-if-(!empty($profile_photo)-&&-file_exists('../employees/employees_pic/'-.-$profile_photo))-{-$photo_path-=-'../employees/employees_pic/'-.-$profile_photo;-}-else-{-$photo_path-=-'../assets/default-profile.png';-}-//-Create-the-ID-card-HTML-$html-=-<<<EOD-<style>-.card-{-width:-100%;-background:-linear-gradient(135deg,-#6a11cb-0%,-#2575fc-100%);-border-radius:-15px;-overflow:-hidden;-font-family:-'Arial',-sans-serif;-}-.header-{-background:-linear-gradient(135deg,-#6a11cb-0%,-#2575fc-100%);-color:-white;-padding:-20px-10px;-position:-relative;-height:-55mm;-text-align:-center;-}-.header::after-{-content:-'';-position:-absolute;-bottom:--2px;-left:-0;-width:-100%;-height:-40px;-background:-white;-border-radius:-50%-50%-0-0;-}-.company-name-{-font-size:-18pt;-font-weight:-bold;-text-transform:-uppercase;-margin-bottom:-5px;-text-shadow:-1px-1px-2px-rgb(255,-3,-3);-}-.company-tagline-{-font-size:-10pt;-margin-bottom:-15px;-color:-rgba(255,255,255,0.9);-}-.profile-section-{-text-align:-center;-margin-top:--25mm;-position:-relative;-z-index:-2;-}-.profile-photo-{-width:-35mm;-height:-35mm;-border:-4px-solid-white;-border-radius:-50%;-box-shadow:-0-4px-8px-rgba(0,0,0,0.2);-margin:-0-auto;-}-.employee-name-{-text-align:-center;-font-size:-14pt;-font-weight:-bold;-color:-#333;-margin:-15px-0-5px;-text-transform:-uppercase;-}-.designation-{-text-align:-center;-font-size:-10pt;-color:-#666;-margin-bottom:-15px;-text-transform:-uppercase;-}-.details-table-{-width:-100%;-margin-top:-10px;-}-.detail-row-{-margin:-5px-0;-}-.detail-label-{-color:-#666;-font-size:-9pt;-width:-25%;-padding:-3px-0;-}-.detail-value-{-color:-#333;-font-size:-9pt;-font-weight:-bold;-padding:-3px-0;-}-.barcode-section-{-text-align:-center;-margin:-15px-0;-}-.address-{-text-align:-center;-font-size:-8pt;-color:-#666;-margin:-10px-0;-padding:-0-10px;-}-.footer-{-background:-linear-gradient(135deg,-#2575fc-0%,-#6a11cb-100%);-color:-white;-padding:-10px;-text-align:-center;-font-size:-8pt;-margin-top:-10px;-}-</style>-<div-class="card">-<div-class="header">-<div-class="company-name">TAJTRENDZ</div>-<div-class="company-tagline">QUALITY-FASHION-WEAR</div>-</div>-<div-class="profile-section">-<img-src="{$profile_photo}"-class="profile-photo">-</div>-<div-class="employee-name">{$row['first_name']}-{$row['last_name']}</div>-<div-class="designation">{$row['designation_name']}</div>-<table-class="details-table">-<tr-class="detail-row">-<td-class="detail-label">ID-NO</td>-<td-class="detail-value">:-{$row['emp_id']}</td>-</tr>-<tr-class="detail-row">-<td-class="detail-label">EMAIL</td>-<td-class="detail-value">:-{$row['email']}</td>-</tr>-<tr-class="detail-row">-<td-class="detail-label">PHONE</td>-<td-class="detail-value">:-{$row['phone']}</td>-</tr>-</table>-<div-class="barcode-section">-<barcode-code="{$row['emp_id']}"-type="C39"-height="0.4"-/>-</div>-<div-class="address">-Head-Office:-123-Fashion-Street,-Industrial-Area<br>-{$row['city']},-{$row['state']}---{$row['pin_code']}-</div>-<div-class="footer">-This-card-is-property-of-TajTrendz-Pvt-Ltd-</div>-</div>-EOD;-//-Write-HTML-content-to-PDF-$pdf->writeHTML($html,-true,-false,-true,-false,-'');-//-Ensure-the-uploads-directory-exists-$upload_dir-=-'../employees/id_cards/';-if-(!is_dir($upload_dir))-{-if-(!mkdir($upload_dir,-0777,-true))-{-die("Failed-to-create-directory:-"-.-$upload_dir);-}-}-//-Generate-file-path-$file_path-=-realpath($upload_dir)-.-'/ID_'-.-$emp_id-.-'.pdf';-//-Output-PDF-$pdf->Output($file_path,-'F');-//-Show-download-button-echo-'-<!DOCTYPE-html>-<html>-<head>-<style>-body-{-font-family:-Arial,-sans-serif;-background:-#f5f5f5;-display:-flex;-justify-content:-center;-align-items:-center;-min-height:-100vh;-margin:-0;-}-.download-container-{-background:-white;-padding:-30px;-border-radius:-10px;-box-shadow:-0-4px-6px-rgba(0,0,0,0.1);-text-align:-center;-}-.download-button-{-display:-inline-block;-padding:-15px-30px;-background:-linear-gradient(135deg,-#6a11cb-0%,-#2575fc-100%);-color:-white;-text-decoration:-none;-border-radius:-25px;-transition:-transform-0.3s,-box-shadow-0.3s;-font-weight:-bold;-text-transform:-uppercase;-letter-spacing:-1px;-}-.download-button:hover-{-transform:-translateY(-2px);-box-shadow:-0-6px-12px-rgba(0,102,255,0.2);-}-</style>-</head>-<body>-<div-class="download-container">-<h2-style="color:-#6a11cb;-margin-bottom:-20px;">ID-Card-Generated-Successfully</h2>-<a-href="'-.-$file_path-.-'"-class="download-button">Download-ID-Card</a>-</div>-</body>-</html>';-}-else-{-echo-"Employee-not-found.";-}-//-Close-database-connection-$conn->close();-?>-/-(company-logo,-company-name,-address)-if-it-is-missing-then-add-it.-This-is-not-looking-good.-Please-write-such-code-which-looks-attractive.

Prompt
Component Preview

About

EmployeeIdCard - Create stunning ID cards with employee details, profile photo, and barcode, professionally built with React and Tailwind. Copy now for free!

Share

Last updated 1 month ago