blog Archives | phpGrid - PHP Datagrid

Why Naming Variables Can Distinguish a Good Programmer from a Bad One

Wed, 27 Nov 2024 06:35:39 +0000

While analyzing some old code from a previous project, I stumbled upon variable names that left me scratching my head. Here’s a snippet of what I found:

1
2
3
4
5
6

var type = 0;
...
var wfStart = "Server Workflow Start";
var num = 100000;
...
var yesOrNo = "Yes";

At first glance, these names seemed cryptic at best. After 25 minutes of piecing together the context (aided by poorly written comments), I finally understood what they meant.

What’s wrong here? To me, it seems the original developer rushed through the implementation, disregarding the importance of meaningful variable names. Instead, they left behind a confusing mess for anyone working on the code later.

Imagine the difference if the variables were given descriptive, self-explanatory names. Here’s an improved version:

1
2
3
4

var typeCode = 0;
const SERVER_WORKFLOW_START = "Server Workflow Start";
var maxLimit = 100000;
var isConfirmed = true;

These changes transform the code into something far more understandable. It reflects a clear understanding of the task at hand, good communication of intent.

The Importance of Clarity and Communication

Great variable names make it possible to read code almost like a narrative, reducing the need for excessive comments and helping others - and your future self - understand what’s going on. Poorly named variables, however, add unnecessary confusion.

Consider this example:

1 2	int acctWithdrawn; // number of customers with withdrawn accounts string ln; // last name of the current customer

These names require a reader to remember the comments or consult documentation to understand what’s going on. With clearer names, this confusion disappears:

1 2	int customerWidthdrawnAccount; string customerLastName;

These improved names reveal the variables’ purposes directly. Code, like any text, should be intuitive and readable.

If You Can’t Name It, You Don’t Understand It

If you struggle to name something, it’s likely because you don’t fully understand it yet. Naming variables often requires crystal-clear thinking about what the code is trying to accomplish, so unclear names often signal unclear ideas. If you find yourself reaching for vague terms, try asking, “What exactly is this variable representing?” This exercise helps you clarify your logic, which is beneficial not only for naming but for the overall structure of your code.

To help with this, try using a “descriptive placeholder” name, even if it’s excessively long. For instance, instead of trying to name a counter vaguely, use something like numberOfActiveUsersWhereXisTrue. This will both clarify the variable’s purpose for now and signal for future refactoring to find a concise, precise name as the code becomes more defined.

Here are two JavaScript code examples that demonstrate how to improve variable names for better readability and maintainability:

Example 1: Poor Variable Names

In this example, we have ambiguous and non-descriptive names, making it hard to follow the code’s intent.

1
2
3
4
5
6
7
8
9
10

// Poor variable names
function calc(p, r) {
let res = 0;
for (let i = 0; i < r.length; i++) {
res += r[i];
}
return res * (p/100);
}

let price = calc(100, [5, 10, 15]);

Explanation:
• calc does not indicate what this function actually calculates.
• p and r are not descriptive and don’t explain what values they represent.
• res is unclear and doesn’t indicate that it’s the result of the sum of the array.

Improved Example: Good Variable Names

Let’s rename the variables for clarity so that anyone reading the code can understand its purpose at a glance.

1
2
3
4
5
6
7
8
9
10

// Improved variable names
function calculateTotalPrice(basePrice, discounts) {
let totalDiscount = 0;
for (let discount of discounts) {
totalDiscount += discount;
}
return basePrice * (totalDiscount/100);
}

let totalPrice = calculateTotalPrice(100, [5, 10, 15]);

Explanation:

• calculateTotalPrice clearly describes the purpose of the function.
• basePrice and discounts specify what values are being passed in.
• totalDiscount makes it clear that it’s the total sum of discounts from the array.

Example 2: Using Contextual Variable Names

Let’s look at a second example where the purpose of variables is unclear due to non-descriptive names.

1
2
3
4
5
6
7
8
9
10

// Poor variable names
function prsnData(d, a) {
for (let v of a) {
console.log( <span class="code-inline">${d}: ${v}span>);
}
}

let name = "Name";
let attributes = ["smart", "kind", "hardworking"];
prsnData(name, attributes);

Explanation:

• prsnData is unclear—does it mean person data or print data?
• d and a don’t describe the values they hold, making the function difficult to follow.

Improved Version:

1
2
3
4
5
6
7
8
9
10
11

// Improved variable names
function displayPersonAttributes(personName, attributes) {
for (let attribute of attributes) {
console.log( <span class="code-inline">${personName}: ${attribute}span>);
}
}

// Usage
let personName = "Name";
let attributes = ["smart", "kind", "hardworking"];
displayPersonAttributes(personName, attributes);

Explanation:

• displayPersonAttributes is clear and communicates the function’s purpose.
• personName and attributes indicate what each parameter represents, making the code easier to understand at a glance.

Using meaningful names greatly enhances readability and shows a careful, thoughtful approach to programming.

Characteristics of Good Variable Names

While good names vary by context, here are some principles to help make your naming conventions solid:

1. Be Descriptive but Concise: Names should convey purpose. For instance, instead of x, userAge is much clearer. At the same time, avoid overly long names that may become cumbersome. Strive for a balance where a variable name is as short as possible while still conveying its purpose. If you have trouble find a good variable name, use aforementioned “descriptive placeholder”, and come back to it later.

2. Use Context: Variable names should fit the function or class they’re in. For instance, a variable in a function handling order data might use orderTotal or customerID rather than something generic like data or num.

3. Follow Naming Conventions: Many languages have specific naming conventions (like camelCase in JavaScript and snake_case in Python). These conventions keep code style consistent and make it easier to read across different projects.

4. Avoid Cryptic Abbreviations: Shortening words can lead to confusion, especially if the abbreviation isn’t universally recognized. A name like num may be clear enough, but cnt could confuse readers who don’t know whether it stands for “count,” “content,” or something else.

5. Meaningful Prefixes and Suffixes: For certain data types or structures, adding a prefix can improve clarity. For example, use listOfUsers to indicate an array or list, or isEnabled to show that a variable is a boolean. These prefixes serve as quick cues about the variable’s function and type.

Refactoring and Renaming When Necessary

As code evolves, so should variable names. It’s common to start with one name and later realize it no longer reflects the variable’s purpose accurately. If your variable’s name no longer aligns with its function, take the time to rename it. Many modern IDEs such as VSCode support [refactor->rename](https://code.visualstudio.com/docs/editor/refactoring) features, which make renaming painless across large codebases.

Naming as a Skill to Build Over Time

Variable naming is a skill that improves with practice and attention. Here are a few strategies to strengthen your naming skills:

• Practice Mindfulness: When choosing a name, take a moment to consider how it reflects the variable’s role in the code.

• Review and Refine: As you revisit old code, critique your own variable names and improve them.

• Ask for Feedback: Code reviews are invaluable for learning from other perspectives. Peers can offer insights into alternative names that may be clearer.

Naming variables may sound trivial, but it’s one of the most telling signs of a programmer’s skill and thoughtfulness. A programmer who takes time to name variables thoughtfully is often the one who approaches problems methodically, communicates clearly, and cares about long-term maintainability.

The post Why Naming Variables Can Distinguish a Good Programmer from a Bad One appeared first on phpGrid - PHP Datagrid.

Transform HTML Table into Card View Using Nothing But CSS

Fri, 25 Oct 2024 00:26:37 +0000

I’d like share a recent experiment that explores how to transform a plain, old-fashioned HTML table into a dynamic card view, going beyond the traditional rows and columns.

Start With a Simple HTML Table

Let’s begin with a simple HTML table such as the following.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr>
<td>Centro </td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds </td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
</tbody>
</table>

It looks like this when rendered in browser.

Just another html table with rows and columns. Nothing fancy.

So how can we transform the traditional rows and columns layout into something more dynamic?

Discover the Power of CSS Grid

Tables don’t have to be boring. With a few simple CSS tricks, you can easily transform a traditional HTML table into a sleek list or card view.

The best part? No JavaScript, just pure CSS!

CSS grid has been an W3C Candidate Recommendation Draft since 2007, however, it has been adopted by the recent versions of all current major browsers.

CSS grid is designed for both rows and columns, making it ideal for complex layouts such as table. It allows you to manage both horizontal and vertical alignments simultaneously, which gives you much more control than Flexbox, which is primarily one-dimensional (row or column).

CSS Grid Properties to Use

Use CSS grid layout for and .
Use CSS display property and set all to be block elements

1
2
3
4
5
6

table tbody, table thead {
display: grid;
}
table td {
display: block;
}

With the CSS above, our plain HTML table already magically transforms into a responsive list view, displaying each record neatly in a single column.

It’s looking good but a bit chaotic! Let’s sprinkle on some CSS borders to give each row in our list a little breathing room.

1
2
3

table, th, tr {
border: 1px solid black;
}

There you go. Not too shabby for a list view created without a single line of JavaScript!

Now we got a nice list made from an old-fashioned html table, how do we turn that nice list into a card view?

Spoiler alert: just sprinkle on a few more lines of CSS!

Transform List into Card View

Our final card trick to transform table into cards is to use CSS grid property grid-template-columns:

1
2
3
4

table tbody {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

grid-template-columns is a CSS property used in the CSS Grid layout to define the structure of the grid’s columns. It specifies the number of columns, their widths, and how the space within the grid is divided.

With the repeat() function, the first parameter lets us decide how many columns we want—let’s say 4. The second parameter tells those columns how big to be—1fr, or one fraction of the available space. It’s like telling your columns to all get an equal slice of the space pie.

Our final card view

Take a moment to explore the code and see the results for yourself over on CodePen. It’s the perfect place to experiment and play around with CSS grid transformations.

Keep in mind that CSS Grid is also responsive, providing developers with enhanced control over how layouts adjust and reflow across various screen sizes and devices.

Optional: Adding data-label to card view

While the card view is visually appealing, it lacks the clarity of column information, leaving users to guess the data represented in each card.

By incorporating a touch of JavaScript, we can seamlessly add data labels for each column, enhancing the association between the labels and their corresponding cells.

1
2
3
4
5
6
7
8
9
10
11
12

// Store each column header to array
var labels = [];
$('table').find('thead th').each(function() {
labels.push($(this).text());
});

// Add data-label attribute to each cell
$('table).find('tbody tr').each(function() {
$(this).find('td').each(function(column) {
$(this).attr('data-label', labels[column]);
});
});

The same code above using ES6 vanilla javascript without jQuery

1
2
3
4
5
6
7
8
9
10
11
12

// Store each column header to array
const labels = [];
document.querySelectorAll('table thead th').forEach(th => {
labels.push(th.textContent);
});

// Add data-label attribute to each cell
document.querySelectorAll('table tbody tr').forEach(tr => {
tr.querySelectorAll('td').forEach((td, column) => {
td.setAttribute('data-label', labels[column]);
});
});

Here’s card view new look with data label:

Demo

It’s nothing like the html table that we started with. With CSS Grid, the layout options are endless because it allows for full control over both rows and columns in a two-dimensional space.

Final thought…

This tutorial only scratches the surface of the iceberg. You can easily create more responsive layouts, overlap elements, span items across multiple rows or columns, and adjust grid areas dynamically, making it highly versatile for various layout needs.

Happy gridding!

Richard

The post Transform HTML Table into Card View Using Nothing But CSS appeared first on phpGrid - PHP Datagrid.

All You Need Is CRUD?

Wed, 02 Oct 2024 00:50:31 +0000

Believe it or not, everything is essentially CRUD on the internet. It is the hidden skeleton that supports all of our digital interactions.

What is CRUD?

First of all, let’s get the jargon out of the way. CRUD stands for Create, Read, Update, and Delete — the four basic operations performed on data in a database or application.

It’s not just about data entry forms or database management; CRUD operations are embedded in nearly every feature and action we perform in applications, including those that might seem more complex at first glance.

Let’s start with an example.

SAP is a massive CRUD

During my years in grad school, I had the pleasure (or displeasure) to use SAP ERP system The first time I launched SAP (back when it was still a Windows app), I was struck by its overwhelming number of datagrids. And not just a few — TONS of them, all intricately linked.

Imagine navigating through this cluttered interface — it’s a German product, after all!

Despite its chaotic appearance, SAP’s core is packed with datagrids. These datagrids with columns and rows are fundamentally tied to CRUD operations (Create, Read, Update, Delete). They ensure that managing vast amounts of data is both efficient and intuitive, thanks to CRUD’s reliable framework.

SAP has improved is UI over the years, but datagrid still play an essential role at its core.

When there is datagrid, there must be CRUD (Create, Read, Update, Delete).

HTTP verbs are CRUD

Now, let’s talk about something you might use every day without realizing its connection to CRUD — HTTP verbs.

HTTP verbs (or methods) GET, POST, PUT, DELETE, and PATCH are essentially aligned with CRUD operations because they map directly to the fundamental actions required to manage resources in a web application.

Here’s how each HTTP verb corresponds to CRUD:

1. GET → Read

GET is used to retrieve data from a server, which corresponds to the Readoperation in CRUD. For example, when you visit a webpage or query an API to fetch information, the server processes a GET request to retrieve and return the requested data.

2. POST → Create

POST is used to send data to the server to create a new resource. This aligns with the Create operation in CRUD. For instance, submitting a form to create a new user account or adding a new item to a database typically involves a POST request.

3. PUT → Update

PUT is used to update an existing resource on the server. This corresponds to the Update operation in CRUD. PUT requests typically involve sending the complete updated resource to the server, which then replaces the existing resource with the new version

4. DELETE → Delete

DELETE is used to remove a resource from the server, which directly aligns with the Delete operation in CRUD. When a DELETE request is sent, the specified resource is removed from the server, reflecting the removal of a record in a database.

By designing HTTP verbs around CRUD concepts, web APIs can manage resources in a way that is both intuitive for developers and effective for data manipulation, maintaining consistency across different systems.

Not Convinced? Let’s Dig Deeper

You might be thinking, “Okay, there are lots of CRUDs, but does that really mean everything is CRUD?” You might argue that complex applications like Facebook or YouTube don’t fit into this model. Or do they?

Why Facebook is also just a CRUD

In 2016, Anatoly Lubarsky reverse-engineered Facebook’s database schema, revealing that at its core with user data is stored in relational databases, and CRUD operations manage and retrieve this data.

Whether it’s creating posts, reading news feeds, updating profiles, or deleting content, CRUD operations ensure data is consistently handled in the background, even as the complex processes remain invisible to the user.

Users interact with the platform by creating posts, reading news feeds, updating profiles, and deleting content, all of which are underpinned by CRUD operations that ensure the data is consistently stored, retrieved, and modified in the database, while the complex backend processes remain invisible to the user.

Let’s break it down:

1. FB User Login

Read: When you log in to FB, the system reads (R) your input credentials (username and password) from the database to verify your identity.
Update: The system might update (U) the last login timestamp or session information in the database once you’re authenticated.
Create: If you log in for the first time or create a session, the system might create © a new session record.
Delete: Old session data or failed login attempts might be deleted (D) as part of maintaining security.

2. Reading FB posts

Read: Search operations are primarily about reading (R) data. When you search for something, the system queries the database and reads the relevant records that match your search criteria.
Create/Update/Delete: Though less obvious, search engines also involve creating, updating, and deleting indexes in the background to ensure fast and accurate results. For instance, when new content is added or updated on a platform, search indexes are updated (U) or new entries are created ©. When content is removed, those indexes are deleted (D).

3. Updating Profile

Updating profiles is a CRUD operation because it involves modifying existing data in the database. When a user changes their profile information, the system updates the corresponding record in the database

Still not convinced?

Let’s take a look at YouTube.

YouTube: A CRUD Classic

YouTube is actually a great example of a CRUD application. Here’s how YouTube fits into this model:

Create
Uploading Videos: Users can create content by uploading videos. This involves adding a new video record to the YouTube database, including metadata like the title, description, tags, and thumbnail.
Read
Watching Videos: The core functionality of YouTube is allowing users to read (consume) content. This involves retrieving video data from the database and streaming it to the user.
Searching and Browsing: Users can search for videos, browse recommendations, and view playlists, all of which involve reading data from YouTube’s servers.
Update
Editing Videos: Users can update the metadata of their videos, such as changing the title, description, or privacy settings.
Managing Playlists: Users can update their playlists by adding or removing videos, changing the order, or editing the playlist title and description.
Delete
Deleting Videos: Users can delete their videos, which removes the video and its associated data from YouTube’s database.
Removing Content from Playlists: Users can also delete videos from playlists or remove entire playlists.

The Myth of Non-CRUD Operations

What I heard the most is that people would say, “My application has non-CRUD operations,” usually referring to complex functionalities that go beyond basic data management, such as real-time data processing, advanced analytics, complex business logic, or workflow automation, which involve more than just creating, reading, updating, or deleting records in a database.

Or are they?

CRUD in disguise

Datagrid is a CRUD, but not all CRUDs are datagrids. CRUD could have many forms and faces.

Even in situations involving complex functionalities like real-time data processing, advanced analytics, or workflow automation, CRUD operations are still essentially everywhere. These advanced features still rely on the underlying ability to create, read, update, or delete data as they interact with databases or data stores.

1. Real-Time Data Processing:

In a real-time data system such as stock trading platform that processes real-time data, CRUD operations are still involved. For instance, the system createsnew trade records when transactions occur, reads real-time market data to display to users, updates users’ portfolios with the latest values, and deletesoutdated or canceled orders. While the processing might be complex, the data handling at its core is still CRUD-based.

2. Advanced Analytics:

In a business intelligence tool that performs advanced analytics, CRUD operations are essential. The tool creates datasets based on user queries, readslarge volumes of data from various sources, updates dashboards with the latest analysis results, and deletes outdated reports. The sophisticated algorithms and visualizations rely on CRUD to manage and display the underlying data effectively.

3. Workflow Automation:

When you automate a workflow, what’s really happening? The system createsnew tasks, reads existing data (because it’s nosy like that), updates the status as things move along, and deletes anything that’s done or obsolete, kind of like cleaning out your closet but with data instead of last season’s shoes. So no matter how complex or high-tech the automation gets, at its core, it’s just CRUD — on autopilot, and maybe with a little more flair.

4. Machine Learning Applications:

In a machine learning platform, CRUD operations are involved in managing training datasets and model results. Even though machine learning is a mystical dance of algorithms and data, it’s still fueled by the trusty old CRUD operations — because even fancy AI models need their data served fresh, updated, and occasionally deleted.

Even though the applications may perform sophisticated tasks, add, read, update, delete operations are still the backbone of any data management system. CRUD remains essential to ensure that the application’s complex functionalities can operate effectively.

The list goes on and on.

Once You Spot CRUD, You’ll Start Seeing It Everywhere!

Once you understand how CRUD works, you’ll start recognizing its patterns in all kinds of software.

These four magic letters are so fundamental to data management, it quietly powers a wide variety of interactions — even ones that don’t seem obvious at first glance. The more familiar you are with this concept, the easier it becomes to see how deeply integrated it is in almost every digital system.

It’s like discovering the hidden building blocks behind the digital world.

All you need is CRUD!

Richard

The post All You Need Is CRUD? appeared first on phpGrid - PHP Datagrid.

PHP Composer to Autoload a Third Party Library

Wed, 18 Jan 2023 22:27:18 +0000

What is exactly a Composer in PHP?

PHP Composer is a dependency management tool for PHP. It allows developers to declare the libraries their project depends on and it will manage (install/update) them for you.

Composer uses a file called “composer.json” to manage dependencies. In this file, you list the dependencies your project has, along with version constraints. Once you have defined your dependencies, you can use the Composer command line tool to install them.

Adding a package dependence

To add a package dependence manually in Composer, use “require” command.

For example, if you want to add the package “monolog/monolog” as a dependency to your project, you would run the following command in your project’s root directory:

1	composer require monolog/monolog

This will add the package to the require section of your composer.json file and install the package and its dependencies into the “vendor” directory.

You can also specify the version number of the package that you want to install by doing the following:

1	composer require monolog/monolog:1.0.*

The above command will install version 1.0 or any version that starts with 1.0 like 1.0.1, 1.0.2

Once you have added a package as a dependency, you can update or remove it using Composer as well. You can run “composer update” command to update all the dependencies or update only a specific package this way:

1	composer update monolog/monolog

And to remove a package, use remove command.

1	composer remove monolog/monolog"

Once you have all the required dependencies, simply run the following install command

1	composer install

Composer will download the dependencies and their dependencies recursively and install them in a directory called “vendor”. The dependencies can then be autoloaded using the Composer’s autoloader.

What is Composer autoloading?

Now move on to an important Composer feature: autoload. Autoloading is a way to automatically include the necessary files when a class is used in an application, without having to manually include or require each file. This can greatly simplify the organization and maintenance of your codebase.

So instead of having to manually include a large number of files at the top of each script, you can simply use the classes you need and let the autoloader handle the rest. You can organize your code into different namespaces and directories, without having to worry about manually including the correct files.

In other words, Composer autoload replaces the old way of using include and require on top of every PHP script.

More about autoloading: https://getcomposer.org/doc/01-basic-usage.md#autoloading

Autoload a 3rd party library manually

You can also manually add a 3rd party library, such as phpGrid, to the autoload section in Composer. There are a few ways to load a 3rd party class in the Composer autoloader.

1. Using the “classmap” autoloading method

This method allows you to specify a list of specific files that should be included in the autoloader. You can add the classmap entries to the “autoload” section of your composer.json file like this:

1
2
3
4
5
6
7

"autoload": {
"classmap": [
"path/to/example/class1.php",
"path/to/example/class2.php",
"path/to/example/class3.php"
]
}

2. Use “files” autoloading method

This method allows you to specify a list of files that should be included in the autoloader. You can add the files entries to the “autoload” section of your composer.json file like this:

1
2
3
4
5

"autoload": {
"files": [
"path/to/phpGrid/conf.php"
]
}

Using files autoload is recommended method to add phpGrid in Composer.

You can combine different autoload methods in the same composer.json file, with a combination of psr-4, classmap and files.

Don’t forget to run composer dump-autoload

It is important to note that when you use the classmap and files autoloading method, you need to run the composer dump-autoload command after adding or modifying the files/classmap, for the autoloader to be updated.

1	composer dump-autoload

That’s is for all about PHP Composer and its autoloading. Hope you finding it useful in your PHP coding journey, and happy gridding!

The post PHP Composer to Autoload a Third Party Library appeared first on phpGrid - PHP Datagrid.

When to use encodeURI() and encodeURIComponent()?

Fri, 25 Mar 2022 19:14:58 +0000

People talk about URL and URI as if they are the same things. However, the difference is subtle but important one.

So what is a URI and how is it different from a URL?

In short,

• URI identifies, URL identifies and locate
• URL is a subset of URI

Clear as mud? Let’s put semantic out of the way.

The URI is anything that uniquely identifies a resource, such as a name, or an ISBN number. A URL identifies a resource and describes how to access it (the protocol). Although all URLs are URIs, not all URIs are also URLs.

What is the purpose of encoding?

This is because only characters from the standard 128-character ASCII set are allowed in URLs. Many special characters, such as spaces and slashes, are not permitted.

For example, characters such as ~!@#$&*()=:/,;?+’ are special characters need to be encoded in URL.

encodeURIComponent() and encodeURI()

encodeURIComponent() and encodeURI() are native javascript utility functions encodes a URI that replaces URL reserved characters with their UTF-8 encoding.

encodeURI() should be used to encode an entire URI, and encodeURIComponent() should be used to encode a URI Component, which is a string that is expected to be part of a URL, which is similar to PHP rawurlencode function.

Let’s see a few examples:

encodeURI a URL (OK)

1 2	encodeURI("https://www.example.com/my file has special & 8=-/characters.html") // Output: https://www.example.com/my%20file%20has%20special%20&%208=-/characters.html

encodeURIComponent a query parameter (OK)

1
2
3

let param = encodeURIComponent('special */- parameter')
let url = "https://example.com/?foo=" + param + "&bar=xyz";
//Output: https://example.com/?foo=special%20*%2F-%20parameter&bar=xyz

encodeURIComponent entire URL (WRONG!)

1 2	encodeURIComponent('https://www.example.com/my file has special & 8=-/characters.html') // Ouput: 'https%3A%2F%2Fwww.example.com%2Fmy%20file%20has%20special%20%26%208%3D-%2Fcharacters.html'

Summary

Encoding URLs have become increasing important due to the popularity of the front-end frameworks, such as React and Vue. These features are essential in today’s single-page web apps for dynamic routes. Use encodeURI if you have a whole URL. However, if you only have a portion of a URL, encodeURIComponent is the way to go.

Technical readings:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

The post When to use encodeURI() and encodeURIComponent()? appeared first on phpGrid - PHP Datagrid.

Typed Properties in PHP 7.4

Tue, 15 Mar 2022 18:02:44 +0000

Introduction

Many languages, especially scripting languages, have a loosely typed variables that are weakly typed. In the weak typed languages, variables can hold any type of values. For example, when you assign a number to a variable, it will be treated as a number; or string when assigned a text, etc.

Typed class properties were introduced in PHP 7.4 around 2019. It has only two requirementss:

1. Typed Properties can only be in classes,
2. It must has one of the following visibility modifiers: public, protected, or private; or var.

With the exception of void and callable, all types are allowed:

* string
* int
* bool
* float
* array
* iterable
* object
* ? (nullable)
* self & parent
* Classes & interfaces

This is what they look like in action:

1
2
3
4
5
6
7
8
9
10

class Orders
{
public int $id;

public ?string $description

protected static string $status

private array $list;
}

Why typed properties?

Strong typed properties allows tools like code-analysis to help programmers in preventing runtime problems during coding, safe refactoring and application scaling.

It ensures the same data type being used through out the code, and catches at ‘mixed’ types early at ‘compile’ time, albeit PHP being a dynamic language. For example, when multiplying a string by an integer or assigning an integer to a string variable type, the type checking can help you uncover issues without running the code by doing a quick and simple static analysis.

Initialize typed properties

It’s possible to provide a default value to typed properties.

1
2
3
4
5
6
7
8
9
10

class Orders
{
private int $id;

public ?string $description = 'my description';

protected static string $status = 'Status';

private array $list = [1, 2, 3];
}

It’s worth noting that it’s OK to have an uninitialized property outside of the constructor such as $id in code sample above as long as nothing it is not accessed before it is initialized (assigned with a value).

If typed values not initialized, the second obvious place to initialize would be the constructor:

1
2
3
4
5
6
7
8
9

class Order
{
public int $id;

public function __construct(int $id)
{
$this->id = $id;
}
}

Strict types

Because PHP is the dynamic language, even with the typed properties, it will always try to coerce or convert types whenever possible. If you supply a string instead of an integer, PHP will attempt to convert it automatically.

The following code (with typed variables) is valid and will convert ‘1’ to 1.

1
2
3
4
5
6
7
8

class Order
{
public int $id;
}

$order = new Order;

$order->id = '9'; // converted to integer 9

To enforce our typed variables, declare strict types before class:

1	declare(strict_types=1);

It will throw a TypeError:

1 2	Fatal error: Uncaught TypeError: Typed property Order::$id must be int, string used

Final thought

Typed variables are a huge step forward for PHP’s future. Despite this, PHP is not a strong type programming language, and it probably never will be.

Happy coding!

You can find more details on PHP.net official typed properties.

The post Typed Properties in PHP 7.4 appeared first on phpGrid - PHP Datagrid.

PHP Heredoc and Nowdoc Explained

Fri, 25 Feb 2022 19:49:20 +0000

In our phpGrid examples, we’ve seen some code with ‘weird’ syntax such as in event handler example:

1
2
3
4
5
6
7
8
9
10
11
12
13

...

// post data another page after submit
$afterSubmit = << function (event, status, postData)
{
phpGrid_orders.trigger("reloadGrid");
}
AFTERSUBMIT;

$dg->add_event("jqGridInlineAfterSaveRow", $afterSubmit);

...

So what are these and how do they work?

In PHP, there are numerous ways to specify a string value. The two most frequent methods are using single or double quotations.

Double Quotes

With double quoted string, escape characters like \n, is regarded as a new line break and variables are replaced with their values. As in this example:

1
2
3
4
5
6

$hello = 'Hello';
echo "$hello\nWorld!";

// output
// Hello
// World!

Single Quotes

When strings that are single quoted, they are treated as literal, meaning that escaped characters do not expand; for example, ‘\n’ will not create a new line. Variables are not replaced by the values assigned to them.

1
2
3
4
5

$hello = 'Hello';
echo '$hello\nWorld!';

// output
// $hello\nWorld

When we wish to define a multiline string, things become messier. For example, on occasions, we need to include multi-line javascript in PHP such as

1
2
3
4

function foo(status, rowid)
{
$("#reportsTo").attr("size", 10);
}

Introducing Heredoc and Nowdoc

Luckily, PHP offers a better way to write multiple-line string variables directly with Heredoc and Nowdoc syntax.

The basic rules for Heredoc and Nowdoc are

* Starting with a “triple less-sign” before a unique identifier for the beginning and end of the string,
* The delimiter must always be at the beginning of a line, without any spaces, letters, or other characters.
* The closing identifier must be on a new line, followed by a semi-colon, and with no white space before it.

For example:

1
2
3
4
5
6
7
8
9
10
11
12
13

$size = 10;
echo << function foo(status, rowid)
{
$("#reportsTo").attr("size", $size);
}
EOT;

// Out put
// function foo(status, rowid)
// {
// $("#reportsTo").attr("size", 10);
// }

We could use any string to represent identifier to mark the start and end of the string. The triple less sign must always come before the opening identifier.

Heredoc differs from Nowdoc in that it makes use of double-quoted strings. For escape sequences, etc., parsing is performed inside a heredoc, but a nowdoc employs single-quoted texts and hence parsing is not performed.

1
2
3
4
5
6
7
8
9
10
11
12
13

$size = 10;
echo <<<'EOT'
function foo(status, rowid)
{
$("#reportsTo").attr("size", $size);
}
EOT;

// Output:
// function foo(status, rowid)
// {
// $("#reportsTo").attr("size", $size);
// }

Conclusion

Heredoc and nowdoc are handy alternatives to the more frequently used quoted string syntax in PHP for creating strings, especially string that spans multiple lines.

So the next time when you dealing with a long string, try heredoc or nowdoc!

The post PHP Heredoc and Nowdoc Explained appeared first on phpGrid - PHP Datagrid.

What Is the Difference Between SSL/TLS vs. SSH, HTTP vs. HTTPS, and FTP vs. SFTP?

Wed, 06 Oct 2021 17:40:01 +0000

The purpose of this article is to provide some principles to help you figure out various distinct secure communication protocols, which are poorly labeled in such a way and often impossible to tell one from the other.

SSL

SSL stands for “Secure Socket Layer,” a cryptographic protocol created by Netscape in 1995 with the release of SSL 2.0. SSL uses 256-bit encryption to provide authentication, trust, and data protection between your web server and your visitors’ web browsers, preventing vulnerability attacks.

To enable SSL for secure communication on your website, it requires an SSL certificate issued by a reputable Certificate Authority (CA) such as Symantec (VeriSign), GeoTrust, RapidSSL, Comodo, and others. An SSL certificate is a short text file that is uploaded to the server of a website and links a cryptographic key to that site.

TLS

TLS is the successor of SSL, and it was first introduced in 1999 as an improved version of SSL 3.0. TLS stands for “Transport Layer Security,” and it is a more secure variant of the Secure Socket Layer protocol. Before transmitting data, TLS allows the server and browser to authenticate each other and negotiate an encryption algorithm and cryptographic keys.

It’s worth noting that these security certificates are still commonly (and wrongly) referred to as SSL in today’s world, simply because it’s a more widely used term, but, when someone buys an SSL certificate, they’re purchasing the most recent TLS certificates.

SSH

Secure Socket Shell (SSH) is a UNIX-based command interface and cryptographic network protocol that ensures data confidentiality and integrity over an unprotected network in a client-server scenario.

SSH allows administrators to securely access a remote computer and run commands.

SSH vs. SSL

SSH is used to create a secure tunnel to another computer from which you can issue commands, transfer data, and so on.

SSL, on the other hand, is used to securely send data between two parties; unlike SSH, it does not allow you to issue instructions.

HTTP vs. HTTPS

HTTPS Stands for Hypertext Transfer Protocol Secure, HTTPS is a protocol that enables encrypted communication over HTTP (Hypertext Transfer Protocol) within a secure connection (TLS). Setting up an SSL certificate on your web server, which provides a secure connection between the web server and the web browser, is required to enable HTTPS on your site.

With HTTPS, it protects data on your server against eavesdroppers and man-in-the-middle attack. HTTP (not secure) has been phased out and replaced by HTTPS. All websites should now support HTTPS as the de facto standard for secured communication.

FTP vs. SFTP

FTP stands for File Transfer Protocol, which has been in use since 1980, as a standard communication protocol used for the transfer of computer files from a server to a client on a computer network. FTP sends data in cleartext, including username and password, allowing attackers to steal, spoof and even modify the data transmitted. You should not use FTP.

SFTP, or SSH File Transfer Protocol, is a completely different file transfer protocol that has little to do with FTP. SFTP is often used in conjunction with an SSH connection. It has existed since the late 1990s. SFTP provide secure file transfer from/to a remote computer to deliver secure communications.

Security Is a High Priority at phpGrid

At phpGrid, we value security in high priority in all our product. We also encourage our users to adapt using of above mentioned secure web protocols in their web applications.

The post What Is the Difference Between SSL/TLS vs. SSH, HTTP vs. HTTPS, and FTP vs. SFTP? appeared first on phpGrid - PHP Datagrid.

6 Common HTML5 Newbie Mistakes

Thu, 16 Sep 2021 22:05:16 +0000

Here are six common HTML5 mistakes to save you from the most common, easily avoidable yet recurrent mistakes when people are coding HTML5.

#1. Missing Doctype

As discussed previously, Doctype should always be the FIRST LINE in any HTML documents, so web browsers know how to process them accordingly. It informs a website visitor’s browser that the document is an HTML document to be parsed and rendered the same way by different browsers, such as Chrome and Firefox.

HTML page without Doctype throws these rendering browsers into Compatibility Mode, also known as quirks mode – the web browsers turn off modern browser features and attempt to render the document based on “best guess.”

Bad Practice:

1
2
3
4
5
6
7
8

<html>
<head>
<title>Web Page Title</title>
</head>
<body>
Web Page Content....
</body>
</html>

Every HTML page must have a doctype.

Good Practice:

1
2
3
4
5
6
7
8
9

<html>
<head>
<title>Web Page Title</title>
</head>
<body>
Web Page Content....
</body>
</html>

#2. Missing Character Encoding

If your web page has anything other than the most basic English text, people may not see the correct content you create unless changing the declarations inside your pages to say that the page is encoded in UTF-8

For example, you may intend the text to look like this

but instead, it ends up displaying like this

(source: w3.org/International/questions/qa-what-is-encoding)

The fix is simple by adding meta charset to utf-8 in HTML head section.

1	<meta charset="utf-8">

In addition, you must ensure that your data is encoded/saved in UTF-8 as previously discussed in MySQL Character Sets & Collation, a highly recommended read if you are developing web-based CRUD with foreign language content.

#3. Missing Closing Tags

Every HTML starts with an open tag and pairs with a close one. However, it is easy to forget because modern browsers are smart enough to figure out missing closing tags and continue to render the rest of the HTML page, which is not always 100% reliable, especially with nested tags.

Bad Practice:

1	<div><div>my nested content</div> ...missing close tag

Good Practice:

1	<div><div>my nested content</div></div>

#4. Using Line Breaks
When You Should Use

Historically, it’s common to use
for line breaks between elements to create a gap. It is now considered bad practice because line break tag
should not be used to make gaps between sections, instead of splitting the text into separate paragraphs.

Bad Practice:

1
2
3

Paragraph one
<br>
Paragraph two

Good Practice:

1 2	<p>Paragraph one</p> <p>Paragraph two</p>

#5. Using instead of and

Coinciding B and I in Microsoft Word, people are customed to use tag names for bold and for italic as a quick presentational fix. However, the problem is that they are purely presentational, not semantic as intended as the content of a element may not always be bold, and that of an i element may not always be italic.

Instead you should use and .

Bad Practice

1
2
<b>Bold title</b>
<i>Important text</i>

Good Practice

1
2
<strong>Bold title</strong>
<em>Important text</em>

#6. Missing ALT Text

Last but not least, all images must have the alt attribute: . If the image cannot be displayed e.g. broken image, the browser will display text of the alt attribute for the image.

While it seems harmless to ignore Alt, this is required since as of HTML 4. Each image should have an alt text to help people with a visual impairment who will otherwise not know what the image is about.

Besides good for accessibility and remove communication barriers for visually impaired people, adding Alt is also good for SEO, which is another super interesting post for another day.

Bad Practice

1
<img src="puppy.jpg" />

Good Pratice

1
<img src="puppy.jpg" alt="A golden retriever puppy" />

Bonus: Self-closing tag

Often you will encounter HTML elements start tag with a slash immediately before the closing right angle bracket, .e.g
. This type of tag is called self-closing tag, which indicates the element is to be closed immediately, and has no content, usually a void element, such as
,
, and . However, the self-closing tags are NOT required by HTML5 standards. So, it’s perfectly OK to not to have them.

The post 6 Common HTML5 Newbie Mistakes appeared first on phpGrid - PHP Datagrid.

blog Archives | phpGrid - PHP Datagrid

Why Naming Variables Can Distinguish a Good Programmer from a Bad One

The Importance of Clarity and Communication

If You Can’t Name It, You Don’t Understand It

Example 1: Poor Variable Names

Improved Example: Good Variable Names

Example 2: Using Contextual Variable Names

Characteristics of Good Variable Names

Refactoring and Renaming When Necessary

Naming as a Skill to Build Over Time

Transform HTML Table into Card View Using Nothing But CSS

Start With a Simple HTML Table

Discover the Power of CSS Grid

CSS Grid Properties to Use

Transform List into Card View

Our final card view

Optional: Adding data-label to card view

Final thought…

All You Need Is CRUD?

What is CRUD?

SAP is a massive CRUD

HTTP verbs are CRUD

Not Convinced? Let’s Dig Deeper

Why Facebook is also just a CRUD

1. FB User Login

2. Reading FB posts

3. Updating Profile

YouTube: A CRUD Classic

The Myth of Non-CRUD Operations

CRUD in disguise

1. Real-Time Data Processing:

2. Advanced Analytics:

3. Workflow Automation:

4. Machine Learning Applications:

Once You Spot CRUD, You’ll Start Seeing It Everywhere!

PHP Composer to Autoload a Third Party Library

What is exactly a Composer in PHP?

Adding a package dependence

What is Composer autoloading?

Autoload a 3rd party library manually

2. Use “files” autoloading method

Don’t forget to run composer dump-autoload

When to use encodeURI() and encodeURIComponent()?

So what is a URI and how is it different from a URL?

What is the purpose of encoding?

encodeURIComponent() and encodeURI()

Summary

Typed Properties in PHP 7.4

Introduction

Why typed properties?

Initialize typed properties

Strict types

Final thought

PHP Heredoc and Nowdoc Explained

Double Quotes

Single Quotes

Introducing Heredoc and Nowdoc

Conclusion

What Is the Difference Between SSL/TLS vs. SSH, HTTP vs. HTTPS, and FTP vs. SFTP?

SSL

TLS

SSH

SSH vs. SSL

HTTP vs. HTTPS

FTP vs. SFTP

Security Is a High Priority at phpGrid

6 Common HTML5 Newbie Mistakes

#1. Missing Doctype

#2. Missing Character Encoding

#3. Missing Closing Tags

#4. Using Line Breaks When You Should Use

#5. Using instead of and

#6. Missing ALT Text

Bonus: Self-closing tag

#4. Using Line Breaks
When You Should Use