Category: "Ajax/JSON"
ibexa - stimulus - webpack
Feb 13th
It's 4:20a - please excuse this post ...
I wanted to use the ibexa REST API to dump the content types
So - I needed to add some JavaScript. Stimulus was there, so I figured I'd use it. It's cool.
I haven't worked with this stuff ... ever
I had to upgrade webpack or encore or something
Which identified path issues in the ibexa CSS and SCSS
I was hoping it would be quicker to fix the issues than ... not fix them, so I tried and am posting the results here so that eventually I can fork the repo and make a proper pull request
If you're looking for a rough example of working with Stimulus, Symfony and the Ibexa REST API - https://github.com/bgamrat/improved-journey/commit/c2ee360c8167395e4a1d5af7992ea1e0bf921124
If you found this helpful - yay :)
vendor/ezsystems/ezplatform-admin-ui-assets/Resources/public/vendors/alloyeditor/dist/alloy-editor/assets/alloy-editor-atlas.css
3,7c3,7
< src:url('./fonts/alloyeditor-atlas.eot');
< src:url('./fonts/alloyeditor-atlas.eot?#iefix') format('embedded-opentype'),
< url('./fonts/alloyeditor-atlas.woff') format('woff'),
< url('./fonts/alloyeditor-atlas.ttf') format('truetype'),
< url('./fonts/alloyeditor-atlas.svg#alloyeditor-atlas') format('svg');
---
> src:url('fonts/alloyeditor-atlas.eot');
> src:url('fonts/alloyeditor-atlas.eot?#iefix') format('embedded-opentype'),
> url('fonts/alloyeditor-atlas.woff') format('woff'),
> url('fonts/alloyeditor-atlas.ttf') format('truetype'),
> url('fonts/alloyeditor-atlas.svg#alloyeditor-atlas') format('svg');
vendor/ezsystems/ezplatform-richtext/src/bundle/Resources/public/scss/_alloyeditor-ez.scss
3,7c3,7
< src: url('../fonts/alloyeditor-ez.eot');
< src: url('../fonts/alloyeditor-ez.eot?#iefix') format('embedded-opentype'),
< url('../fonts/alloyeditor-ez.woff') format('woff'),
< url('../fonts/alloyeditor-ez.ttf') format('truetype'),
< url('../fonts/alloyeditor-ez.svg#alloyeditor-ez') format('svg');
---
> src: url('/bundles/ezplatformrichtext/fonts/alloyeditor-ez.eot');
> src: url('/bundles/ezplatformrichtext/fonts/alloyeditor-ez.eot?#iefix') format('embedded-opentype'),
> url('/bundles/ezplatformrichtext/fonts/alloyeditor-ez.woff') format('woff'),
> url('/bundles/ezplatformrichtext/fonts/alloyeditor-ez.ttf') format('truetype'),
> url('/bundles/ezplatformrichtext/fonts/alloyeditor-ez.svg#alloyeditor-ez') format('svg');
vendor/ezsystems/ezplatform-admin-ui/src/bundle/Resources/public/scss/_preview.scss
115c115
< background: url('../img/preview-tablet.png') top center no-repeat;
---
> background: url('/bundles/ezplatformadminui/img/preview-tablet.png') top center no-repeat;
127c127
< background: url('../img/preview-mobile.png') top center no-repeat;
---
> background: url('/bundles/ezplatformadminui/img/preview-mobile.png') top center no-repeat;
vendor/ezsystems/ezplatform-admin-ui/src/bundle/Resources/public/scss/_login.scss
18c18
< background-image: url('../img/login-background.jpg');
---
> background-image: url('/bundles/ezplatformadminui/img/login-background.jpg');
vendor/ezsystems/ezplatform-admin-ui/src/bundle/Resources/public/scss/_error-page.scss
64c64
< background-image: url('../img/errors/background.png');
---
> background-image: url('/bundles/ezplatformadminui/img/errors/background.png');
Also - I had to reset my password for this blog for the umpteenth time ...
Quick Apache Benchmark test with log in
May 25th
I have been looking at performance for a web application. I am using ab to compare the response times while adjusting the database indexing.
# 'log in'
curl -L https://www.example.com/login.php -k -b cookie -c cookie-jar -d username=admin -d password=**** -s > /dev/null
# Run the test -n times (in this case 10)
ab -C `grep PHP_session cookie-jar | cut -f6,7 | tr '\t' '='` -n 10 'https://www.example.com/main.php'
What's happening?
The curl command is logging in to the application and saving the cookies in a file named cookie-jar.
The grep command is extracting the session id cookie - name and value - from the cookie-jar and using it to authorize access to a main page for ab.
This post courtesy of Game Creek Video
DataTables - Passing Data to the Server in Client-Side processing mode
Oct 26th
DataTables is AWESOME. I use it for list-based selection, table-based editing, data display and filtering and anything else I can think of because it is so robust that virtually anything is possible. Really.
If the dataset being used is fairly small (you may interpret small any way you like), DataTables client-side processing is amazing. It sorts and filters, updates all the navigation, lets you adjust the number of records displayed - as well as many more optional features - with very little effort.
Client-side processing - where filtering, paging and sorting calculations are all performed in the web-browser.
Ref: https://datatables.net/manual/data/#Client-side-processing
but
For client-side processing no additional data is submitted to the server
Ref: https://datatables.net/reference/option/ajax.data
The goal was to have a single client-side datatable which would display different content based on the user's actions. For example, 'list all the items with a status of "new" and a (time) segment of 1'.
HTML for the DataTable
<table id="datatable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Vendor</th>
<th>Item</th>
<th>Date</th>
</tr>
</thead>
</table>
JavaScript
var datatable;
$(function($){
datatable = $('#datatable').DataTable(
{
"ajax": {
"url": "data-10-1.php"
},
"columns":
[
{"data": "link"},
{"data": "vendor"},
{"data": "item"},
{"data": "date"}
]
});
// Handle the click events
$(".summary").on("click", function(evt){
var target = evt.target, status, segment;
if (target.hasAttribute("data-status")) {
status=$(target).attr("data-status");
segment=$(target).attr("data-segment");
datatable.ajax.url("data-"+status+"-"+segment+".php");
datatable.ajax.reload();
datatable.draw('full-reset');
}
});
});
Notice that the URLs are variable. The status and segment values are passed in the URL itself, there is no POST or GET data.
Sample HTML which invokes the event handler. This HTML is inside the div with class="summary".
<span class="details" data-status="10" data-segment="4" data-status-text="new">84</span>
In order to extract the status and segment out of the URL, you can use Apache RewriteRules, like so:
<directory /var/www/html>
RewriteEngine On
RewriteRule ^(data)-(\d+)-(\d+)(\.php)$ $1$4?status=$2&segment=$3 [L]
</directory>
status and segment can then be accessed as $_GET variables. Be sure to validate them.
How does it work? As the user clicks on the spans, the event handler reads the data attributes and constructs a URL that is sent to the server. When Apache receives the request, it rewrites it to deliver the data embedded in the URL as GET parameters.
This post courtesy of Game Creek Video