I am using Laravel DOMPDF everything is working fine except i want to show page no on every page also which is not showing as of now.
My Controller:
public function generatePDF()
{
try
{
$id = hexdec($_GET['id']);
$data = DB::table('table_name')
->where('id','=',$id)
->get();
$pdf = PDF::loadView('pages.myPDF', compact('data'));
return $pdf->download($caseName.'.pdf');
}
catch(\Exception $ex)
{
return $ex->getMessage();
}
}
My View File:
<html>
<head>
</head>
<style type="text/css" media="all">
#page {
header: page-header;
footer: page-footer;
}
#page{
header:page-header;
margin-top:105t;
}
.w3-Times-New-Roman {
font-family: "Lobster", serif;
}
</style>
<body>
<script>
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("helvetica", "bold");
$pdf->page_text(72, 18, "Header: {PAGE_NUM} of {PAGE_COUNT}", $font, 6, array(0,0,0));
}
</script>
<div style="font-family: Times New Roman; font-size: 12px;word-spacing: 3px; text-align: justify; color:#000;"> <?php
$array1 = array("<blockquote>\r\n<p>","</p>\r\n</blockquote>");
$array2 = array("<blockquote>","</blockquote>");
$array3 = array("<i><u>","</u></i>");
$value = str_replace($array1, $array3, $data[0]->columnName);
$value = str_replace($array2, $array3, $value);
?>
{!!$value!!}
</div><br>
</body>
</html>
But this is not generating no on every page in PDF. Please help me how can i achieve that.
Follow below steps to achieve it:
Publish vendor file via command
php artisan vendor:publish
Enable DOMPDF_ENABLE_PHP from /config/dompdf.php
Pass $pdf object from controller
Use php artisan vendor:publish to create a config file located at config/dompdf.php which will allow you to define local configurations to change some settings (default paper etc). You can also use your ConfigProvider to set certain keys.
Try this
$pdf = App::make('dompdf.wrapper');
$pdf->loadView('welcome', ['data'=>$data]);
$pdf->output();
$dom_pdf = $pdf->getDomPDF();
$canvas = $dom_pdf ->get_canvas();
$canvas->page_text(520, 10, "Page {PAGE_NUM} of {PAGE_COUNT}", null, 10, array(0, 0, 0));
return $pdf->download('safsa.pdf');;
and in view
<footer>
<div class="pagenum-container" style="float: right">Page
<span class="pagenum"></span>
</div>
</footer>
and style
footer .pagenum:before {
content: counter(page);
}
footer { position: fixed; bottom: -60px; left: 0px; right: 0px; height: 50px; }
This code contains the user interface of the banking chatbot. I have used Mozilla's Web Speech API to implement the speech to text feature. After implementing it, I have faced a major bug. As soon as the user starts the speech recognition by clicking on the "Speak" button; the textarea automatically increases in size and covers or hides the Submit button which is preventing the user from submitting his/her query. I haven't been able to locate the error.
//initialize speech recognition API
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition(); //initialize my instance of speech recognition
recognition.interimResults = true; //return results while still working on current recognition
//this is where your speech-to-text results will appear
let p = document.createElement("p")
const words = document.querySelector(".words-container")
words.appendChild(p)
//I want to select and change the color of the body, but this could be any HTML element on your page
let body = document.querySelector("body")
let cap_css_colors = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"];
const CSS_COLORS = cap_css_colors.map(color => {
//I need to change all color names to lower case, because comparison between words will be case sensitive
return color.toLowerCase()
})
//once speech recognition determines it has a "result", grab the texts of that result, join all of them, and add to paragraph
recognition.addEventListener("result", e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join("")
p.innerText = transcript
//once speech recognition determines it has a final result, create a new paragraph and append it to the words-container
//this way every time you add a new p to hold your speech-to-text every time you're finished with the previous results
if (e.results[0].isFinal) {
p = document.createElement("p")
words.appendChild(p)
}
//for each result, map through all color names and check if current result (transcript) contains that color
//i.e. see if a person said any color name you know
CSS_COLORS.forEach(color => {
//if find a match, change your background color to that color
if (transcript.includes(color)) {
body.style.backgroundColor = color;
}
})
})
//add your functionality to the start and stop buttons
function startRecording() {
recognition.start();
recognition.addEventListener("end", recognition.start)
document.getElementById("stop").addEventListener("click", stopRecording)
}
function stopRecording() {
console.log("okay I'll stop")
recognition.removeEventListener("end", recognition.start)
recognition.stop();
}
ul {
list-style: none;
padding: 0;
}
p {
color: #444;
}
button:focus {
outline: 0;
}
.container {
max-width: 700px;
margin: 0 auto;
padding: 100px 50px;
text-align: center;
}
.container h1 {
margin-bottom: 20px;
}
.page-description {
font-size: 1.1rem;
margin: 0 auto;
}
.tz-link {
font-size: 1em;
color: #1da7da;
text-decoration: none;
}
.no-browser-support {
display: none;
font-size: 1.2rem;
color: #e64427;
margin-top: 35px;
}
.app {
margin: 40px auto;
}
#note-textarea {
margin: 20px 0;
}
#recording-instructions {
margin: 15px auto 60px;
}
#notes {
padding-top: 20px;
}
.note .header {
font-size: 0.9em;
color: #888;
margin-bottom: 10px;
}
.note .delete-note,
.note .listen-note {
text-decoration: none;
margin-left: 15px;
}
.note .content {
margin-bottom: 40px;
}
#media (max-width: 768px) {
.container {
padding: 50px 25px;
}
button {
margin-bottom: 10px;
}
}
/* -- Demo ads -- */
#media (max-width: 1200px) {
#bsaHolder{ display:none;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MJ BOT </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<section class="msger">
<header class="msger-header">
<div class="msger-header-title">
<i class=""></i> MJ Chatbot <i class=""></i>
</div>
</header>
<main class="msger-chat">
<div class="msg left-msg">
<div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"></div>
<div class="msg-bubble">
<div class="msg-info">
<div class="msg-info-name"></div>
</div>
<div class="msg-text">
<p> {{ questionAsked }} </p>
</div>
</div>
</div>
</main>
<article>
<main class="msger-chat">
<div class="msg right-msg">
<div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)"></div>
<div class="msg-bubble">
<div class="msg-info">
<div class="msg-info-name"></div>
</div>
<div class="msg-text">
<p> {{ response }}</p>
</div>
</div>
</div>
</article>
</main>
<form id="output" class="msger-inputarea" action="signup" method="post">
<input id="output" class="msger-input" type="text" name="question"></input>
<input id='play' class="msger-send-btn" type="submit" value="Submit Message !" > </input>
<input type="button" value="Speak" onclick="runSpeechRecognition()"></input>
<button id='stop'></button>
</form>
<button id=play style="font-size:24px">Listen <i class="fas fa-file-audio"></i></button>
Send Query to Agent !
</section>
<script >onload = function() {
if ('speechSynthesis' in window) with(speechSynthesis) {
var playEle = document.querySelector('#play');
var pauseEle = document.querySelector('#pause');
var stopEle = document.querySelector('#stop');
var flag = false;
playEle.addEventListener('click', onClickPlay);
pauseEle.addEventListener('click', onClickPause);
stopEle.addEventListener('click', onClickStop);
function onClickPlay() {
if(!flag){
flag = true;
utterance = new SpeechSynthesisUtterance(document.querySelector('article').textContent);
utterance.voice = getVoices()[0];
utterance.onend = function(){
flag = false; playEle.className = pauseEle.className = ''; stopEle.className = 'stopped';
};
playEle.className = 'played';
stopEle.className = '';
speak(utterance);
}
if (paused) { /* unpause/resume narration */
playEle.className = 'played';
pauseEle.className = '';
resume();
}
}
function onClickPause() {
if(speaking && !paused){ /* pause narration */
pauseEle.className = 'paused';
playEle.className = '';
pause();
}
}
function onClickStop() {
if(speaking){ /* stop narration */
/* for safari */
stopEle.className = 'stopped';
playEle.className = pauseEle.className = '';
flag = false;
cancel();
}
}
}
else { /* speech synthesis not supported */
msg = document.createElement('h5');
msg.textContent = "Detected no support for Speech Synthesis";
msg.style.textAlign = 'center';
msg.style.backgroundColor = 'red';
msg.style.color = 'white';
msg.style.marginTop = msg.style.marginBottom = 0;
document.body.insertBefore(msg, document.querySelector('div'));
}
}
</script>
<script>
/* JS comes here */
function runSpeechRecognition() {
// get output div reference
var output = document.getElementById("output");
// get action element reference
var action = document.getElementById("help");
// new speech recognition object
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
// This runs when the speech recognition service starts
recognition.onstart = function() {
action.innerHTML = "<small>listening, please speak...</small>";
};
recognition.onspeechend = function() {
action.innerHTML = "<small>stopped listening, hope you are done...</small>";
recognition.stop();
}
// This runs when the speech recognition service returns result
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
var confidence = event.results[0][0].confidence;
output.innerHTML = "<b></b> " + transcript + "<br/> <b></b> " ;
output.classList.remove("hide");
};
// start recognition
recognition.start();
}
</script>
<!-- partial -->
<script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
</body>
</html>
recognition.onend = (event) => {
//insert your code to display button here
}
I have an XYChart with data object like
chart.data = [{
"Area": "Korangi",
"AreaNumber": 120,
"SubArea": [{
"SubAreaName": "Korangi-1",
"SubAreaNumber": 60
}, {
"SubAreaName": "Korangi-2",
"SubAreaNumber": 60
}
]
}];
and a series tooltipHTML adapter as
series.tooltipHTML = `<center><strong> {Area}:</strong>
<strong> {AreaNumber}%</strong></center>
<hr />`;
series.adapter.add("tooltipHTML",
function (html, target) {
if (
target.tooltipDataItem.dataContext &&
target.tooltipDataItem.dataContext.SubArea &&
target.tooltipDataItem.dataContext.SubArea.length
) {
var nameTalClientsNumberCells = "";
Cells = "";
target.tooltipDataItem.dataContext.SubArea.forEach(part => {
if (part.SubAreaName != null) {
nameTalClientsNumberCells +=
`<tr><td><strong>${part.SubAreaName}</strong>:  ${part
.SubAreaNumber}%</td></tr>`;
}
//TalClientsNumberCells += `<td>${part.SubAreaNumber}</td>`;
});
html += `<table>
${nameTalClientsNumberCells}
</table>`;
}
return html;
});
For I have tried bootstrap classes but non of them works in tooltipHTML.
what I want is like this
but I tried so far is like this
Please help or refer if there is another way of adding really rich HTML in tooltip
A link to the codepen
What you're doing is fine. I just didn't see you used any bootstrap4 css class. You can achieve what you want with either bootstrap4 built-in classes, or your own custom styles.
//I don't need to set tooltipHTML since I have the adapter hook up to return
// custom HTML anyway
/*
series.tooltipHTML = `<center><strong> {Area}:</strong>
<strong> {AreaNumber}%</strong></center>
<hr />`;
*/
series.adapter.add("tooltipHTML", function (html, target) {
let data = target.tooltipDataItem.dataContext;
if (data) {
let html = `
<div class="custom-tooltip-container">
<div class="col-left">
<h5>${data.Area}</h5>
<ul class="list-unstyled">
${data.SubArea.map(part =>
`
<li class="part">
<span class="name">${part.SubAreaName}</span>
<span class="area">${part.SubAreaNumber}%</span>
</li>
`
).join('')}
</ul>
</div>
<div class='col-right'>
<span class="badge badge-pill badge-success">${data.AreaNumber}%</span>
</div>
</div>
`;
return html;
}
return '';
});
And here is the custom styles:
#chart {
height: 31rem;
}
.custom-tooltip-container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
min-width: 13rem;
}
.custom-tooltip-container .col-left {
width: 70%;
}
.custom-tooltip-container .col-right {
width: 30%;
text-align: center;
}
.custom-tooltip-container .col-right .badge {
font-size: 1.1rem;
}
.custom-tooltip-container .part {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
Again, you can do whatever you want. Here as demo I just quickly put things together.
demo: https://jsfiddle.net/davidliang2008/6g4u2qw8/61/
I'm using CodeIgniter and I've got a function to insert an email address and a code into a database.
I now want the user to post that code and if it is correct, delete it, and if it is not correct, to give the user another try.
I've edited the original coding.
Email Controller - I've deleted reference to sessions and commented out the sending of the email because I'm only testing in localhost. The Email function works good. After posting the Email function I open the database and copy the code which must be correct.
Code Controller - I've deleted reference to sessions. And I now have an email text box in code view, which BTW automatically inserts the email address. I then paste the code into the code text box.
However, despite the code being correct the view('codeincorrect') is selected instead of view('username').
Can somebody tell me what is wrong?
Email Controller
class Email extends CI_Controller
{
public function index()
{
$this->load->model('Email_model', 'email_model');
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->form_validation->set_rules('email', 'email', 'required|min_length[10]|max_length[40]|valid_email|is_unique[tbl_members.email_address]', array(
'required' => 'You have not entered an %s address.', 'min_length' => 'Your %s address must be a minimum of 10 characters.',
'max_length' => 'Your %s address must be a maximum of 40 characters.', 'valid_email' => 'You must enter a valid %s address.',
'is_unique' => 'That %s address already exists in our Database.'));
if ($this->form_validation->run() == FALSE) // The email address does not exist.
{
$this->load->view('email');
}
else
{
$email = $this->input->post('email');
$random_string = chr(rand(65,90)) . rand(1,9) . chr(rand(65,90)) . rand(1,9) . chr(rand(65,90)) . chr(rand(65,90));
$code = $random_string;
$this->email_model->insert_email($email, $code);
/*
$this->load->library('email');
$this->email->from('<?php echo WEBSITE_NAME; ?>', '<?php echo WEBSITE_NAME; ?>');
$this->email->to('$email');
$this->email->subject('Code.');
$this->email->message('Select & Copy this code, then return to the website. - ','$code');
$this->email->send();
*/
$this->load->view('code');
}
}
}
Email Model
class Email_model extends CI_Model
{
function __construct()
{
parent::__construct();
$this->load->database();
}
public function insert_email($email, $code)
{
$data = array('email_address' => $email,'pass_word' => $code);
$this->db->insert('tbl_members', $data);
return $this->db->insert_id();
}
}
Code Controller
class Code extends CI_Controller
{
public function index()
{
$this->load->model('Code_model', 'code_model');
$email = $this->input->post('email');
$code = $this->input->post('code');
$result = $this->code_model->find_code($email, $code);
if ($result)
{
$this->load->view('username');
}
else
{
$this->load->view('codeincorrect');
}
}
}
Code Model
class Code_model extends CI_Model
{
function __construct()
{
parent::__construct();
$this->load->database();
}
public function find_code($email, $code)
{
$this->db->select('user_id');
$this->db->where('email_address', $email);
$this->db->where('pass_word', $code);
$code = $this->db->get('tbl_members');
if ($code->result())
{
return $this->db->delete('pass_word', $code);
}
}
}
This is the coding in the code view, which maybe causing the problem;
<style type="text/css"> .email-address { position: fixed; width: 100%; text-align: center; top: 30%; } </style>
<div class="email-address">
<input type="text" name="email" value="<?php echo set_value('email'); ?>" style="width: 18%; height: 5mm"; />
<style type="text/css"> .code { position: fixed; width: 100%; text-align: center; top: 55%; } </style>
<div class="code">
<input type="email" class="form-control" name="code" style="width: 15mm; height: 5mm"; />
</div>
<?php echo form_open('code'); ?>
<style type="text/css"> .submit { position: fixed; width: 100%; text-align: center; top: 65%; } </style>
<div class="submit">
<input type="submit" class="btn btn-primary" value="Submit" />
</form></div>
Please try it.
In Controller
public function index()
{
$this->load->model('Code_model', 'code_model');
$code = $this->input->post('code');
// Need to email here.
$email= $this->input->post('email');
$result = $this->code_model->find_code($code,$email);
if ($result)
{
$this->load->view('username');
}
else
{
$this->load->view('codeincorrect');
}
}
In Model
public function find_code($code,$email)
{
$this->db->select('user_id');
$this->db->where('email_address', $email);
$this->db->where('pass_word', $code);
$code = $this->db->get('tbl_members');
if ($code->result()) {
$this->db->delete('pass_word', $code);
}
}
So, your Controller calls the Model correctly but you are not checking the Model function and you are not sending the email field.
So this should be correct:
Controller:
public function index()
{
$this->load->model('Code_model', 'code_model');
$code = $this->input->post('code');
$email= $this->input->post('email');
if ($this->code_model->find_code($code, $email)) {
$this->load->view('username');
} else {
$this->load->view('codeincorrect');
}
}
Model:
public function find_code($code, $email)
{
$this->db->select('user_id');
$this->db->where('email_address', $email);
$this->db->where('pass_word', $code);
$code = $this->db->get('tbl_members')->result();
if ($code->num_rows() >= 1) {
$this->db->delete('pass_word', $code);
}
}
Note:
If what you are trying to do is a password login, that's not how you should do it. Please see this for example: http://www.iluv2code.com/login-with-codeigniter-php.html
I'm newbie for grocery crud. I'm having a database table lets say customer_details, it includes customer_name & customer_id etc columns. I'm having another table called purches_details, customer_id is the foriegn key for this table.
I want to create a tab panel (menu) in my view according to the customer_name column in customer_detail table. tabs names should be customer names
& when some one click the relevent customer_name tab the the relevent purches details should show as the grocery crud grid.
Please help me friends, I want it so deeply.
Thanks.
I got this answer ...
the controller from grocery CRUD 1.2.3 with CodeIgniter 2.1.2 (! try to use CI 2.1.2 or CI 2.1.0 versions + latest grocery CRUD):
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Examples extends CI_Controller { public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper('url');
$this->load->library('grocery_crud');
}
public function _example_output($output = null)
{
$this->load->view('example', $output);
} public function index()
{
$this->_example_output( (object) array('output' => '', 'js_files' => array(), 'css_files' => array()));
}
public function customers()
{
$crud = new grocery_crud();
$crud->set_table('customer_details');
$crud->set_subject('Customer Details');
$output = $crud->render();
$output->menu = $this->db->select('customer_id, customer_name')->get('customer_details')->result();
$this->_example_output($output);
} public function purches_details($customer)
{
$company = $this->uri->segment(3);
$crud = new grocery_crud();
$crud->set_table('purches_details');
$crud->set_subject('Purches Details');
$crud->where('customer_id', $customer);
$output = $crud->render();
$output->menu = $this->db->select('customer_id, customer_name')->get('customer_details')->result();
$this->_example_output($output);
}
}
and the view with our customer names links:
[CODE]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<?php
foreach($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>
<style type='text/css'>
body
{
font-family: Arial;
font-size: 14px;
}
a {
color: blue;
text-decoration: none;
font-size: 14px;
}
a:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<?php echo anchor('examples/customers', 'All Customers');?> :
<?php foreach ($menu as $link) {?>
<?php echo anchor("examples/purches_details/$link->customer_id", "$link->customer_name");?> ·
<?php }?>
</div>
<div style='height:20px;'></div>
<div>
<?php echo $output; ?>
</div>
</body>
</html>