À votre avis...PHP ou Javascript ?

Bonjour à tous,

En flânant sur Internet, je suis tombé sur un template d'une application de gestion qui m'a semblé bien plus fonctionnelle que celle que j'étais en train de faire. J'ai décidé de m'en inspirer pour refaire mon code !

Pour afficher des données statiques, ce n'est pas trop un problème par contre, dès qu'il faut interagir avec celles-ci, ça devient tout de suite plus complexe...

Exemple : 
 

$.ajax({
    type: 'POST',
    url: 'contrats-data.php',
    data: {
        id_client: arg
    },
    dataType: "json",
    success: function(response2) {
        /*console.log('success ajax',response2);*/

        // On efface le contenu de l'ancienne table 'liste-contrats' :
        var elem = document.querySelector('#liste-contrats');
        elem.innerHTML = '';

        // On remplit la nouvelle table 'liste-contrats':
        var nb_lignes = response2[0].nbr_contrats;
        if (nb_lignes > 0) {
            for (ligne = 0; ligne < nb_lignes; ligne++) {
                // Affichage du numéro de contrat : 
                var col1 = document.createElement('td');
                col1.setAttribute('id', 'contrat' + ligne + '-col1');
                col1.appendChild(document.createTextNode(response2[ligne].id_contrat));

                // Affichage du numéro de facture : 
                var col2 = document.createElement('td');
                col2.setAttribute('id', 'contrat' + ligne + '-col2');
                if (response2[ligne].facture == null || response2[ligne].facture == '') {
                    col2.appendChild(document.createTextNode(''));
                } else {
                    col2.appendChild(document.createTextNode(response2[ligne].facture));
                }

                // Affichage de la date du contrat :
                var col3 = document.createElement('td');
                col3.setAttribute('id', 'contrat' + ligne + '-col3');
                col3.appendChild(document.createTextNode(response2[ligne].date_contrat));

                // Affichage du type de contrat : 
                var col4 = document.createElement('td');
                col4.setAttribute('id', 'contrat' + ligne + '-col4');
                col4.appendChild(document.createTextNode(response2[ligne].batiment));

                // Affichage du début du contrat : 
                var col5 = document.createElement('td');
                col5.setAttribute('id', 'contrat' + ligne + '-col5');
                col5.appendChild(document.createTextNode(response2[ligne].date_debut));

                // Affichage de fin de contrat : 
                var col6 = document.createElement('td');
                col6.setAttribute('id', 'contrat' + ligne + '-col6');
                col6.appendChild(document.createTextNode(response2[ligne].date_fin));

                // Affichage du total de contrat : 
                var col7 = document.createElement('td');
                col7.setAttribute('id', 'contrat' + ligne + '-col7');
                col7.appendChild(document.createTextNode(response2[ligne].total_contrat));

                // Affichage des actions : 
                var col8 = document.createElement('td');
                col8.setAttribute('class', 'align-droite');


                // Bouton loupe
                var button1 = document.createElement('button');
                button1.setAttribute('type', 'button');
                button1.setAttribute('class', 'card-btn');
                var incon1 = document.createElement('i');
                incon1.setAttribute('class', 'fa fa-search');
                button1.appendChild(incon1);
                col8.appendChild(button1);

                // Bouton crayon
                var button2 = document.createElement('button');
                button2.setAttribute('type', 'button');
                button2.setAttribute('class', 'card-btn');
                var incon2 = document.createElement('i');
                incon2.setAttribute('class', 'fa fa-pencil');
                button2.appendChild(incon2);
                col8.appendChild(button2);


                var tr = document.createElement('tr');
                tr.appendChild(col1);
                tr.appendChild(col2);
                tr.appendChild(col3);
                tr.appendChild(col4);
                tr.appendChild(col5);
                tr.appendChild(col6);
                tr.appendChild(col7);
                tr.appendChild(col8);

                document.getElementById("liste-contrats").appendChild(tr);
            }
        } else {
            // Affichage d'une colonne vide' : 
            var col1 = document.createElement('td');
            col1.setAttribute('id', 'contrat' + ligne + '-col1');
            col1.setAttribute('colspan', '8');
            col1.appendChild(document.createTextNode('Aucun contrat pour ce client'));

            var tr = document.createElement('tr');
            tr.appendChild(col1);
            document.getElementById("liste-contrats").appendChild(tr);
        }
    },
    error: function(response2) {
        alert("Erreur requête Ajax");
        console.log('erreur ajax', response2);
    }
});

Et encore, le script ci-dessus ne permet "que" de visualiser les contrats, je n'ai pas encore attaqué leur création ou modification ! (certainement avec des fenêtres modales)

Ma question : Est-il possible d'obtenir la même souplesse d'utilisation avec PHP qu'avec JavaScript ? Peut-on par exemple avec PHP générer qu'une partie de page sans devoir tout recharger ? Si oui, comment faire ?

Dans l'image ci-dessous, j'affiche les contacts, contrats, factures, règlements et notes du client sélectionné sans recharger la page... Le choix d'un client dans la zone verte affecte directement le contenu de la zone jaune qui elle même est modifiée par le menu du bandeau situé dans la zone bleue... Je peux même me permettre le luxe de faire des fade-in ou fade-out !

Merci d'avance pour vos conseils !
 

Linux / Chrome 106.0.0.0