INTCSS: Web SQL Database

📖 Introduction 🛠️ Core Methods 📂 Opening Database 🔍 Executing queries 📝 INSERT Operation 📖 READ Operation 🎯 Final Example ⚠️ Limitations

📖 1. Introduction à Web SQL Database

Web SQL Database est une API permettant de stocker des données dans une base de données relationnelle SQL côté client (navigateur).

⚠️ Note importante : Web SQL Database est déprécié (plus maintenu). La spécification n'est plus en développement. Pour les nouvelles applications, utilisez IndexedDB. Ce chapitre est fourni à titre informatif.

❌ Web SQL

Déprécié depuis 2010
Support limité aux navigateurs basés sur WebKit (Chrome, Safari, Edge)
Non supporté par Firefox

✅ IndexedDB (alternative)

Standards modernes
Supporté par tous les navigateurs
Plus performant et flexible

💡 Cas d'usage historiques : Stockage de données relationnelles côté client, applications offline, caches de données.

🛠️ 2. Méthodes principales

`openDatabase()`

Crée ou ouvre une base de données

`transaction()`

Gère les transactions (groupes d'opérations)

`executeSql()`

Exécute une requête SQL

// Structure de base
const db = openDatabase(nom, version, description, taille, callback);
db.transaction(function(tx) {
    tx.executeSql(requeteSQL, parametres, successCallback, errorCallback);
});

📂 3. Opening Database

La méthode openDatabase() permet de créer ou d'ouvrir une base de données existante.

// Syntaxe
const db = openDatabase(
    'maBase',           // Nom de la base
    '1.0',              // Version
    'Description de la base', // Description
    5 * 1024 * 1024,    // Taille (5 Mo)
    function(db) {      // Callback de création
        console.log('Base créée');
    }
);

📌 Paramètres

name : Nom de la base de données (unique)
version : Numéro de version (chaîne)
displayName : Description lisible
estimatedSize : Taille estimée en octets (généralement 5Mo)
creationCallback : Fonction appelée lors de la création

📝 Démo : Ouvrir/Créer une base

✨ Testez Web SQL (navigateur compatible seulement)

🔍 4. Executing Queries

La méthode executeSql() permet d'exécuter des requêtes SQL à l'intérieur d'une transaction.

db.transaction(function(tx) {
    // Créer une table
    tx.executeSql(
        'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)',
        [],
        function() { console.log('Table créée'); },
        function(error) { console.log('Erreur:', error); }
    );
});

📌 Syntaxe executeSql

tx.executeSql(sqlStatement, arguments, successCallback, errorCallback);

sqlStatement : La requête SQL (avec des ? pour les paramètres)
arguments : Tableau des paramètres
successCallback : Fonction appelée en cas de succès
errorCallback : Fonction appelée en cas d'erreur

📝 5. INSERT Operation

Insertion de données dans une table via la commande SQL INSERT.

db.transaction(function(tx) {
    // Insertion simple
    tx.executeSql(
        'INSERT INTO users (name, email) VALUES (?, ?)',
        ['Jean Dupont', 'jean@email.com'],
        function(tx, result) {
            console.log('ID inséré:', result.insertId);
            console.log('Lignes affectées:', result.rowsAffected);
        },
        function(error) {
            console.log('Erreur INSERT:', error);
        }
    );
});

📝 Démo : Insérer des données

✨ Insérer un utilisateur

📖 6. READ Operation

Lecture des données via la commande SQL SELECT.

db.transaction(function(tx) {
    tx.executeSql(
        'SELECT * FROM users',
        [],
        function(tx, results) {
            const len = results.rows.length;
            for(let i = 0; i < len; i++) {
                const row = results.rows.item(i);
                console.log(row.name, row.email);
            }
        },
        function(error) {
            console.log('Erreur SELECT:', error);
        }
    );
});

📌 Objet results

rows.length : Nombre de lignes retournées
rows.item(i) : Récupère la ligne à l'index i
rowsAffected : Nombre de lignes affectées (pour INSERT/UPDATE/DELETE)
insertId : ID auto-généré (pour INSERT)

📝 Démo : Lire les données

✨ Liste des utilisateurs

🎯 7. Exemple complet : Gestionnaire de contacts

<!DOCTYPE html>
<html>
<head>
    <title>Gestionnaire de contacts</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        input, button { padding: 8px; margin: 5px; }
        .contact { border-bottom: 1px solid #ddd; padding: 10px; }
    </style>
</head>
<body>
    <h1>📒 Gestionnaire de contacts</h1>
    
    <div>
        <input type="text" id="nom" placeholder="Nom">
        <input type="text" id="telephone" placeholder="Téléphone">
        <button id="ajouter">➕ Ajouter</button>
    </div>
    
    <div id="listeContacts"></div>

    <script>
        // Ouvrir la base de données
        const db = openDatabase('contacts', '1.0', 'Liste de contacts', 2 * 1024 * 1024);
        
        // Créer la table
        db.transaction(function(tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, nom TEXT, telephone TEXT)');
        });
        
        // Ajouter un contact
        document.getElementById('ajouter').onclick = function() {
            const nom = document.getElementById('nom').value;
            const telephone = document.getElementById('telephone').value;
            
            db.transaction(function(tx) {
                tx.executeSql('INSERT INTO contacts (nom, telephone) VALUES (?, ?)', [nom, telephone],
                    function() { afficherContacts(); },
                    function(error) { console.log('Erreur:', error); }
                );
            });
            
            document.getElementById('nom').value = '';
            document.getElementById('telephone').value = '';
        };
        
        // Afficher les contacts
        function afficherContacts() {
            db.transaction(function(tx) {
                tx.executeSql('SELECT * FROM contacts', [], function(tx, results) {
                    const html = [];
                    for(let i = 0; i < results.rows.length; i++) {
                        const c = results.rows.item(i);
                        html.push(`<div class="contact">
                            <strong>${c.nom}</strong> - ${c.telephone}
                            <button onclick="supprimer(${c.id})">❌ Supprimer</button>
                        </div>`);
                    }
                    document.getElementById('listeContacts').innerHTML = html.join('') || 'Aucun contact';
                });
            });
        }
        
        // Supprimer un contact
        window.supprimer = function(id) {
            db.transaction(function(tx) {
                tx.executeSql('DELETE FROM contacts WHERE id = ?', [id], afficherContacts);
            });
        };
        
        afficherContacts();
    </script>
</body>
</html>

📝 Démo : Gestionnaire de contacts complet

✨ Application de gestion de contacts (Web SQL)

⚠️ 8. Limitations et compatibilité

⚠️ Statut actuel : Web SQL Database est déprécié depuis 2010. La spécification n'est plus maintenue par le W3C.

📌 Support navigateurs

✅ Chrome : Supporté
✅ Safari : Supporté (iOS, macOS)
✅ Edge : Supporté (basé sur Chromium)
❌ Firefox : Non supporté
❌ Opera : Supporté (basé sur Chromium)

📌 Alternatives modernes

IndexedDB : API moderne pour bases de données NoSQL côté client
localStorage : Pour stockage simple clé/valeur
PouchDB / Dexie.js : Bibliothèques de haut niveau

// Détection du support Web SQL
if (window.openDatabase) {
    console.log('Web SQL est supporté');
    // Utiliser Web SQL
} else {
    console.log('Web SQL NON supporté, utilisez IndexedDB');
    // Fallback vers IndexedDB ou localStorage
}

📝 Tableau récapitulatif

Méthode	Description	Exemple
`openDatabase()`	Crée/ouvre une base	`openDatabase('db', '1.0', 'desc', 510241024)`
`transaction()`	Démarre une transaction	`db.transaction(function(tx) {...})`
`executeSql()`	Exécute une requête SQL	`tx.executeSql('SELECT * FROM table', [], success, error)`
`CREATE TABLE`	Crée une table	`CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT)`
`INSERT INTO`	Insère des données	`INSERT INTO users (name) VALUES (?)`
`SELECT * FROM`	Lit des données	`SELECT * FROM users`
`DELETE FROM`	Supprime des données	`DELETE FROM users WHERE id = ?`

📌 Quiz de vérification

Question 1 : Quelle méthode permet d'ouvrir une base de données Web SQL ?

✅ Réponse

openDatabase(nom, version, description, taille, callback)

Question 2 : Quelle est la principale limite de Web SQL Database ?

✅ Réponse

Web SQL est déprécié et n'est pas supporté par Firefox. Il est remplacé par IndexedDB.

Question 3 : Comment insérer des données avec executeSql ?

✅ Réponse

tx.executeSql('INSERT INTO table (col1, col2) VALUES (?, ?)', [valeur1, valeur2], successCallback, errorCallback);

Question 4 : Quelle alternative moderne recommandez-vous à la place de Web SQL ?

✅ Réponse

IndexedDB – une API NoSQL moderne supportée par tous les navigateurs.