users<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `users`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(50<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `email`<\/span> varchar<\/span>(50<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `phone`<\/span> varchar<\/span>(15<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `created`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `modified`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `status`<\/span> enum('Active'<\/span>,'Inactive'<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span> DEFAULT<\/span> 'Active'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nDatabase Configuration (dbConfig.php)<\/h2>\n
The dbConfig.php<\/code> file is used to connect and select the database. Specify the database host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL database credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}<\/span><\/pre>\nPrint Dynamic Content (index.php)<\/h2>\n
HTML & PHP:<\/b>
\nInitially, all the users are fetched from the database and listed in the dropdown. A specific user needs to be selected to print the details information of the user from the database.<\/p>\n\n- Dropdown – Helps to list and select the user.<\/li>\n
- Print button – Initialize the print.<\/li>\n
- Hidden div – Holds the dynamically generated content that retrieved from the database. <\/li>\n<\/ul>\n
<?php
<\/span>\/\/ Include the database configuration file
<\/span>require_once <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Fetch the users from the database
<\/span>$result <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT id, name FROM users\"<\/span>);
<\/span>?><\/span>\r\n\r\n<!-- Dropdown to select the user --><\/span>\r\n<select<\/span> id<\/span>=\"userSelect\"<\/span>><\/span>\r\n <option<\/span> value<\/span>=\"\"<\/span>><\/span>Select User<\/option<\/span>><\/span>\r\n <?php <\/span>while(<\/span>$row <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>()){ <\/span>?><\/span>\r\n <option<\/span> value<\/span>=\"<?php <\/span>echo <\/span>$row<\/span>[<\/span>'id'<\/span>]; <\/span>?><\/span>\"<\/span>><\/span><?php <\/span>echo <\/span>$row<\/span>[<\/span>'name'<\/span>]; <\/span>?><\/span><\/option<\/span>><\/span>\r\n <?php <\/span>} <\/span>?><\/span>\r\n<\/select<\/span>><\/span>\r\n\r\n<!-- Print button --><\/span>\r\n<button<\/span> id<\/span>=\"getUser\"<\/span>><\/span>Print Details<\/button<\/span>><\/span>\r\n\r\n<!-- Hidden div to load the dynamic content --><\/span>\r\n<div<\/span> id<\/span>=\"userInfo\"<\/span> style<\/span>=\"display: none;\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/pre>\nJavaScript:<\/b>
\nInclude the jQuery library.<\/p>\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"<\/span>><\/span><\/script<\/span>><\/span><\/pre>\nThe following code loads the dynamic content from the server-side and prints specific div content with window print() method.<\/p>\n
\n- Get the selected user ID.<\/li>\n
- Load data from the server-side script (
getData.php<\/code>) and puts dynamic content in the specific element using jQuery load() method<\/b>.<\/li>\n- Open the Print Dialog to let the user print the dynamic content of the specific hidden div using window print() method<\/b>.<\/li>\n<\/ul>\n
<script<\/span>><\/span>\r\n$(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\r\n $('#getUser'<\/span>).on('click'<\/span>,function<\/span>(<\/span>)<\/span>{\r\n var<\/span> userID = $('#userSelect'<\/span>).val();\r\n $('#userInfo'<\/span>).load('getData.php?id='<\/span>+userID,function<\/span>(<\/span>)<\/span>{\r\n var<\/span> printContent = document<\/span>.getElementById('userInfo'<\/span>);\r\n var<\/span> WinPrint = window<\/span>.open(''<\/span>, ''<\/span>, 'width=900,height=650'<\/span>);\r\n WinPrint.document.write(printContent.innerHTML);\r\n WinPrint.document.close();\r\n WinPrint.focus();\r\n WinPrint.print();\r\n WinPrint.close();\r\n });\r\n });\r\n});\r\n<\/script<\/span>><\/span><\/pre>\nLoad Dynamic Data (getData.php)<\/h2>\n
The getData.php<\/code> file is loaded by the AJAX load() method<\/b> to retrieve the user data from the database using PHP and MySQL.<\/p>\n\n- The specific user’s ID is retrieved from the query string of the URL.<\/li>\n
- The data is fetched from the users table based on the specific ID.<\/li>\n
- The user details are rendered and dynamic content is returned to the
load()<\/code> method.<\/li>\n<\/ul>\n<?php
$userData <\/span>= array();
if(!empty(<\/span>$_GET<\/span>[<\/span>'id'<\/span>])){
<\/span>\/\/ Include the database configuration file
<\/span>require_once <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Get the user's ID from the URL
<\/span>$userID <\/span>= <\/span>$_GET<\/span>[<\/span>'id'<\/span>];
<\/span>\/\/ Fetch the user data based on the ID