Level 73
I think the simplest would be to create virtual columns in your table and have accessors on your model to convert them.
Nov 12, 2024
12
Level 6
Laravel Yajra with barcode
I would like to add a barcode with the data of the table row, but I am in difficulty because I have never done with laravel yajra datatable html serverside. Any ideas, can anyone give me some advice on how to integrate a barcode in the table
public function dataTable(QueryBuilder $query): EloquentDataTable
{
return (new EloquentDataTable($query))
->setRowId('id')
->addColumn();
}
public function getColumns(): array
{
return [
Column::make('BarCode')->addClass(''),
];
}
<div class="d-flex justify-content-center">
{!! DNS1D::getBarcodeHTML($product['product_code'], "C128",1.4,22) !!}
</div>
<hr>
<div class="d-flex justify-content-center">
{!! DNS2D::getBarcodeHTML($product['product_code'], 'QRCODE') !!}
</div>
Level 6
@Tray2 Hi, I'm trying to do it but I haven't succeeded yet
->addColumn('barcode', function(Product $product) {
return '<div class="d-flex justify-content-center">
{!! DNS1D::getBarcodeHTML($product["product_code"], "C128",1.4,22) !!}
</div>';
});
in the table I see this
<div class="d-flex justify-content-center">
{!! DNS1D::getBarcodeHTML($product["product_code"], "C128",1.4,22) !!}
</div>
I have never done this thing this way, in the blade code I see it without problems but with the yajra tables I get lost and I don't know how to do it
if I put it like this
->addColumn('barcode', function(Product $product) {
return DNS1D::getBarcodeHTML($product["product_code"], "C128",1.4,22) ;
});
Barcode <div style="font-size:0;position:relative;width:187.6px;height:22px;"> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:0px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:4.2px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:8.4px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:15.4px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:19.6px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:25.2px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:30.8px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:36.4px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:40.6px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:46.2px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:49px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:54.6px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:61.6px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:65.8px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:71.4px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:77px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:82.6px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:88.2px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:92.4px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:99.4px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:102.2px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:107.8px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:114.8px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:120.4px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:123.2px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:126px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:131.6px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:138.6px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:144.2px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:148.4px;top:0px;"> </div> <div style="background-color:black;width:5.6px;height:22px;position:absolute;left:154px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:161px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:163.8px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:169.4px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:176.4px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:182px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:184.8px;top:0px;"> </div> <div style="background-color:black;width:0px;height:22px;position:absolute;left:187.6px;top:0px;"> </div> <div style="background-color:black;width:0px;height:22px;position:absolute;left:187.6px;top:0px;"> </div> </div>
Level 73
@marcoplus That is not what I mean.
$table->string('full_name')->virtualAs("CONCAT(first_name, ' ', last_name)");
https://laraveldaily.com/post/virtual-db-columns-laravel-migrations-mysql
Then you can use that column and display it as DM or QR.
1 like
Level 5
->addColumn('barcode', function(Product $product) {
return '<div class="d-flex justify-content-center">
{!! DNS1D::getBarcodeHTML($product["product_code"], "C128",1.4,22) !!}
</div>';
});
this return a plain text string to your html, the tags ({!! !!}) only work on php template files.
since you are executing php anyway, and the output wanted is a plain html text, just do it like normal:
->addColumn('barcode', function(Product $product) {
$barCodeHtml = DNS1D::getBarcodeHTML($product["product_code"], "C128",1.4,22);
return '<div class="d-flex justify-content-center">' . $barCodeHtml . '</div>';
});
or use NowDoc/HereDoc for better readability
->addColumn('barcode', function(Product $product) {
$barCodeHtml = DNS1D::getBarcodeHTML($product["product_code"], "C128",1.4,22);
return <<<EOD
<div class="d-flex justify-content-center">
$barCodeHtml
</div>
EOD;
});
1 like
Level 6
@Tray2 this method allows me to group the columns into one and then use it in the barcode to see the information I want if I understand correctly and therefore very useful, now I try to do it
Level 6
@Lumethys thanks for your intervention I'm trying to do it but when I reload the table I continue to see the code like this, if I add use DNS1D; I see this
Barcode <div class="d-flex justify-content-center"> <div style="font-size:0;position:relative;width:156.8px;height:22px;"> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:0px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:4.2px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:8.4px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:15.4px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:19.6px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:28px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:30.8px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:36.4px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:40.6px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:46.2px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:51.8px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:57.4px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:61.6px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:65.8px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:70px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:77px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:79.8px;top:0px;"> </div> <div style="background-color:black;width:5.6px;height:22px;position:absolute;left:85.4px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:92.4px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:98px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:105px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:107.8px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:113.4px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:117.6px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:123.2px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:130.2px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:134.4px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:138.6px;top:0px;"> </div> <div style="background-color:black;width:4.2px;height:22px;position:absolute;left:145.6px;top:0px;"> </div> <div style="background-color:black;width:1.4px;height:22px;position:absolute;left:151.2px;top:0px;"> </div> <div style="background-color:black;width:2.8px;height:22px;position:absolute;left:154px;top:0px;"> </div> <div style="background-color:black;width:0px;height:22px;position:absolute;left:156.8px;top:0px;"> </div> <div style="background-color:black;width:0px;height:22px;position:absolute;left:156.8px;top:0px;"> </div> </div> </div>
if instead I add use Milon\Barcode\DNS1D;
Non static method 'getBarcodeHTML' should not be called statically.intelephense(P1036)
Level 6
@Lumethys i forgot to add ->rawColumns(['barcode']); and now it works perfectly, thanks for your support
Level 6
if i want to add a url to have the data read on a page instead of reading it in the barcode scanner app, can i insert a url? when you scan the code you are directed to a specific page by id
Level 5
$barCodeHtml = DNS1D::getBarcodeHTML($product["product_code"], "C128",1.4,22);
$url = getUrlSomehow();
return <<<EOD
<div class="d-flex justify-content-center">
$barCodeHtml
<div>$url</div>
</div>
EOD;
Level 6
@Lumethys thanks again for the answer, but this way it adds a text with url, I wanted that when you scan the barcode it automatically directs you to a specific page, the barcode returns information that I wanted to make visible only for registered users, therefore direct to the details page that will be displayed only after login, with the QR code I can do it but I didn't understand why with the barcode I can't
Level 5
@marcoplus if you want the barcode to encode the URL, you could easily do that with the information i provided. So i wont write it down again
direct to the details page that will be displayed only after login, with the QR code I can do it but I didn't understand why with the barcode I can't
because the QR code was designed to do that and the barcode isnt. Why can write words with a pen and not a ruler?
If you want to encode an url that let's the user open with a QR scan, then you use an QR code.
1 like
Level 6
@Lumethys so i could insert the id code with the url below to open the page and i solve in this way the problem with the barcode and addressing to the page, thanks you were very kind, i have never worked with barcodes and i did not know it.
Please or to participate in this conversation.