May 06, 2021 - Da A. Invest

CODEIGNITER 4 TUTORIAL

Tutorial Codeigniter 4 CRUD con Firebase e Bootstrap



Tutorial completo su Codeigniter 4 CRUD utilizzando Firebase
 . Passo dopo passo crea funzionalità di creazione, lettura, aggiornamento ed eliminazione con Codeigniter 4 e Firebase.

Questo tutorial è accompagnato da programmi di esempio e casi di studio.

Descritto passo passo partendo dalla creazione di un progetto in Firebase, come usarlo e come integrarlo in Codeigniter 4.

Leggi anche: Tutorial Codeigniter 4 per principianti

Ecco il risultato finale che otterremo dopo aver studiato questo tutorial:

il risultato finale firebase codeigniter 4 crud

Iniziamo…

Cos'è Firebase?

Secondo Wikipedia, Firebase è un servizio di Google che rende più facile per gli sviluppatori di app sviluppare le applicazioni che creano.

Logo Firebase

Firebase è incluso nella categoria Baas ( Backend as a Service ). Quindi, quando si utilizza Firebase, gli sviluppatori possono concentrarsi solo sulla progettazione dell'applicazione senza doversi preoccupare del back - end .

Inizialmente, nel 2011 Firebase è stata co-fondata da Andrew Lee e James Tamplin con il nome dell'azienda Envolve .

Uno dei prodotti che entrambi hanno sviluppato per la prima volta è stato un database in tempo reale .

In qualità di azienda gigante, Google considera questo servizio molto buono e potenziale, quindi nel 2014 ha finalmente acquisito Firebase .

Infine, Google ha introdotto Firebase nel 2016 per la precisione a maggio all'evento annuale di Google I / O.

Fino ad ora, il servizio Firebase è stato continuamente sviluppato da Google. In effetti, è abbastanza ampiamente utilizzato per vari tipi di esigenze per realizzare applicazioni Android, iOS e persino siti Web.

Poiché supporta le esigenze del sito Web, proveremo a integrare Firebase con Codeigniter 4.

Pronto?

Come integrare Codeigniter 4 e Firebase

Ci sono alcune condizioni che devono essere soddisfatte prima di procedere con questo passaggio.

Passaggio 1: verifica la connessione a Internet

Sì, poiché utilizzi i servizi di Google, devi essere automaticamente connesso a Internet. In caso contrario, Firebase non sarà in grado di collegarsi al sito web.

Passaggio 2: avere un account Firebase

È abbastanza facile registrare il tuo account Gmail su Firebase. Visita il link https://console.firebase.google.com , accedi con il tuo account Gmail. Simsalabim. Il tuo account Firebase può essere gestito.

Passaggio 3: creazione di un nuovo progetto in Firebase

Crea un nuovo progetto facendo clic sul menu "Buat Project".

Guarda la foto sotto:

Quindi dai al progetto il nome che desideri.

... Qui lo chiamo con crud codeigniter4


Ora, scegliamo l'integrazione web come mostrato di seguito:

scegli il menu del sito web per il progetto Crud Codeigniter 4 in Firebase

Ora assegna all'applicazione un altro nome che creeremo. Oh sì, non abbiamo bisogno di controllare Firebase Hosting perché non ne abbiamo bisogno. Basta fare clic su Registra applicazione.

Infine, arriveremo al confidenziale Firebase SDK.

ottieni sdk per il progetto codeigniter 4 crud in firebase

Quindi fare clic sul pulsante Continua nella console.

Passaggio 4: creazione di un nuovo database in Firebase

Abbiamo creato con successo un nuovo progetto, ora è il momento di creare un database passo passo.

Innanzitutto, nella pagina dahsboard, seleziona il menu Database in tempo reale.

In secondo luogo, seleziona Crea database.

creare un nuovo database per il progetto codeigniter 4 crud in firebase

Terzo, controlla la modalità di blocco (possiamo cambiarla in seguito) e fai clic sul menu di abilitazione . 


Violaaaa! Il database è stato creato con successo.

Aspetta un attimo, cambiamo le impostazioni in modo da poter gestire il database.

Urgente!

Perché questa è solo una prova. Quindi non preoccuparti troppo della sicurezza. Se la tua applicazione è in produzione, regola la sicurezza.

Passo # 5 - Scarica Framework Codeigniter 4 fino a Firebase

Ora è il momento di scaricare Codeigniter 4 e installarlo sul nostro server web locale. Ecco come installare Codeigniter 4 in modo chiaro:

  1. Visita il sito web ufficiale su Codeigniter.com
  2. Sposta i risultati del download nella cartella xampp/htdocs(utenti XAMPP), laragon/www(utenti Laragon) e gli altri devono solo regolare.
  3. Estrai il file.
  4. Al termine, rinomina la cartella con un nome crud_ci4_firebase.

... per un tutorial più completo su come installare Codeigniter 4 (con spiegazioni e aggiunte tramite composer), puoi leggere il seguente tutorial:

Leggi anche: Tutorial sull'installazione di Codeigniter 4 con Composer e manuale

Passaggio # 6: modifica il controller di casa

Al primo download, Codiegniter 4 fornisce già un controller Home.phpche possiamo modificare immediatamente.

Si prega di aprire il file Home.phpnella directory app/Controllers.

Modifica la sezione che mostra la visualizzazione della pagina:

<?php namespace App\Controllers;

 

class Home extends BaseController

{

    public function index()

    {

        return view('v_index');

    }


}

Precedentemente riempito con welcome_message, lo sostituiamo con v_index.

Passaggio 7: configurare l'ambiente per Firebase in Codeigniter 4

Cambia il nome del file env in .env (c'è un punto ).

Quindi modificare la produzione di AMBIENTE in sviluppo in modo che, se si verifica un errore, possiamo leggere il messaggio di errore.

CI_ENVIRONMENT = development

Quindi questo è molto importante, aggiungi alcune righe di seguito al file .env

apiKey = "api key mu",

authDomain = "auth domain mu",

databaseURL = "database url mu",

projectId = "project id mu",

storageBucket = "storage bucket mu",

messagingSenderId = "id message sendermu",

appId = "app id mu"

Perché ho taro .env?

Perché inserendolo qui la chiamata sarà molto più semplice che dover creare di nuovo un helper o una libreria che richiede sicuramente tempo e questo tutorial si allungherà.

Continua sì ...

Passaggio 8: creazione di una pagina di visualizzazione

Crea un nuovo file denominato v_index.phpe salvalo in una directory app/Views.

Copia il codice completo  

La spiegazione per favore?

Va bene. Prima di tutto, dobbiamo capire che il processo di modifica, aggiornamento ed eliminazione viene eseguito utilizzando il modal bootstrap.

Quindi, all'inizio dobbiamo solo creare una tabella con l'attributo id mirato da jQuery e Firebase.

<tbody id="tbody"></tbody>

... con un codice come questo creiamo un id chiamato tbody.

Successivamente chiameremo questo id in jQuery per generare dati da Firebase in base ai codici di riga da 128 a 146.

// Get Data

firebase.database().ref('students/').on('value', function (snapshot) {

    var value = snapshot.val();

    var htmls = [];

    $.each(value, function (index, value) {

        if (value) {

            htmls.push('<tr>\

            <td>' + value.nis + '</td>\

            <td>' + value.name + '</td>\

            <td>' + value.age + '</td>\

            <td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateStudent" data-id="' + index + '">Update</button>\

            <button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeStudent" data-id="' + index + '">Delete</button></td>\

        </tr>');

        }

        lastIndex = index;

    });

    $('#tbody').html(htmls);

    $("#submitStudent").removeClass('disabled');

});