How to organize the development of widgets for a self-written site?

Question

PHP

Hello guys.
I may be asking the question a little wrong, but I'll try anyway.
I want to try to display widgets on the site for authorized users.
And for example, I would like to create a currency converter widget.
With the base, it is more or less clear what to display this widget for the one who turned it on.
But how to display the widget in the client window is not very clear. After all, the code is stored in a file. And the code should only be displayed to those who have enabled it. And there can be several such widgets! An example to make it clear what I mean. It's like Yandex metrics, where you can add widgets, move, and so on. I gave it as an example, because I know everything and everyone has seen how it works.
Sorry for the clumsiness, tell me, please.

Answer 1

Essence:
Store in the database information about which widgets are enabled for the user, then on the page on which these widgets need to be displayed, we make a request to the database (using an Ajax request), we get information, in the cycle we look at what kind of widget it is and initialize it.
Suppose there is a page mysite.ru/widgets. There are also three widgets, the code of which is in the widget.simple.js, widget.chart.js and widget.table.js files. We will also assume that you are using jQuery by default.
On this page, we make a request to the server (for example, using $.get), the server gets information from the database about which widgets the user has enabled and gives it to us in this form:

[{
  type: 'simple',
  data: 100
}, {
  type: 'table',
  data: []
}, {
  type: 'chart',
  data: []
}]

which means that the user has all three widgets enabled. Now that we have received the data, we need to loop through it. The query itself and the processing of the results will look something like this:

$.get(url).done(function(widgets) {
    widgets.forEach(function(widget) {
        switch (widget.type) {
            case 'simple':
                new SimpleWidget(widget.data);
                break;
            case 'chart':
                new ChartWidget(widget.data);
                break;
            case 'table':
                new TableWidget(widget.data);
                break;
        }
    });
});

where url is the page that will give us json. The SimpleWidget, ChartWidget, and TableWidget classes are widgets themselves. Of course, everything is simplified here, because in addition to the data for the widget, it also needs to pass information about where exactly the widget needs to be displayed (for example, in the form of a selector, '.simple-widget-container') and other necessary information. The logic of widgets (or rather the pattern that they implement) is not fundamental here, this is beyond the scope of the question.

Answer 2

So if this is for your own project, then conceptually nothing changes ...
You connect the necessary js, css for the widget to work and connect the php file (or whatever language you have) where you need to display the widget.
Just call it a widget.
Misunderstood?

Answer 3

A widget is html markup + a set of dependencies (css, js, and maybe pictures)
On the server, when generating html, we check whether the user is logged in, whether he has a mark to show the widget and, accordingly, insert it or not, with all dependencies.