Clonegram è un social network dove gli utenti possono condividere i propri ricordi con i loro amici. Nasce da un progetto per il corso di Linguaggi e Tecnologie per il Web.
Il setup locale del progetto è molto semplice ed è basato su docker. Dopo aver scaricato ed installato Docker ed aver estratto il pacchetto contente il progetto, è possibile runnarlo. Basta aprire una shell, posizionarsi nella cartella Ltw-Clonegram ed eseguire il seguente comando:
docker-compose up -d
Una volta scaricate le Docker images necessarie, sarà possibile utilizzare l'applicazione al seguente indirizzo
É possibile modificare le settings del compose tramite il file ./docker-compose.yml.
P.S.: Le immagini dei profili e dei post già esistenti non verranno renderizzate poiché non sono salvate nella repo, tuttavia le immagini che verranno caricate da voi funzioneranno correttamente.
In seguito all'introduzione di WSL2 come back-end per Docker Desktop è sorto un problema relativo al valore della variabile lower_case_table_names di MySQL, è quindi necessario per il corretto funzionamento dell'applicazione eseguire i seguenti step:
- Aprire una shell con permessi di amministratore e posizionarsi nella cartella
Ltw-Clonegram/db - Eseguire il comando
fsutil file setCaseSensitiveInfo ./ enable
Alla registrazione e alla creazione della sessione dopo il login vengono create alcue cartelle e files, per evitare errori relativi ai permessi è necessario modificare i permessi della cartella ./app e delle sottocartelle tramite i seguenti step:
- Aprire una shell e posizionarsi nella cartella
Ltw-Clonegram/ - Eseguire il comando
sudo chmod -R 777 app
Grazie a @StefanoM99 per il contributo
Il Frontend è diviso in 3 cartelle:
app/application/views: contiene i file.htmle.phpapp/js: diviso in:app/js/components: contiene i file.vuerelativi ai component utilizzati nel sitoapp/js/all.js: per le icone fontawesomeapp/js/utils.js: contiene funzioni di utilità da poter riutilizzare in varie parti
app/css: contiene i file di stile.cssper la grafica del sito:app/css/all.css: contiene le classi per le icone fontawesomeapp/css/style.css: contiene tutte le classi css riutilizzabili su più pagine
In questa sezione si può trovare una breve descrizione per i file principali riguardanti il front-end del progetto.
Tutti i component si trovano al seguente path: app/js/components.
comment.vue: renderizza un singolo commento relativo ad un post con le relative azioni contestuali (i.e. elimina commento).follow_suggestions.vue: renderizza una di lista di max 8 utenti che l'utente loggato potrebbe voler iniziare a seguire.link_button.vue: renderizza il pulsante Follow/Unfollow integrando tutte le funzionalità per la comunicazione con il serverloadbar.vue: renderizza la barra di caricamento in base alla percentuale di caricamento passata come propmodal_utenti.vue: renderizza una modal standard su cui mostrare una lista di utentinavbar.vue: renderizza la barra di navigazione importando i component:- search_modal
- loadbar
post_list.vue: renderizza una lista di post che gli viene passata come prop, gestendo il caricamento progressivo di questi a gruppi di 10post.vue: renderizza il post e gestisce le azioni possibili su un possibile post: (i.e. eliminare/lasciare un like, commento, tag, ...)profile_info.vue: renderizza le informazioni riguardanti il profilo di un utente specificoprofile_post.vue: mostra la preview di un post sottoforma di quadratosearch_modal.vue: renderizza un input, all'inserimento di testo in questo campo viene renderizzato un piccolo riquadro con risultati caricati dinamicamente, al click su di un risultato esegue l'azione passata come prop.upload.vue: gestisce la pagina di upload con le sue funzionalità, gestisce inoltre il crop dell'immagine caricata, passando al back-end le informazioni relative al crop da eseguire.
I file .js si trovano nella cartella: app/js.
app/js/all.js: per le icone fontawesome.app/js/utils.js: contiene funzioni di utilità da poter riutilizzare in varie parti del sito, tra cui un wrapper che gestisce le chiamate ajax.
I file si trovano nella cartella app/application/views
templates/footer.php: contiene il footer del sitotemplates/header.php: contiene la parte iniziale di ogni pagina, compreso il tagheade l'apertura del tagbodyexplore.php: mostra la pagina explore{base_url}/explorehome.php: mostra l'home page di Clonegram all' indirizzo{base_url}/index.html: utilizzato da codeigniter per gestire l'errore403forbiddenlogin_user.php: mostra la pagina di login e contiene il form per effettuare l'accesso{base_url}/loginpost.php: mostra la pagina di un singolo post, all'indirizzo{base_url}/post/[post_id]register_user.php: mostra la pagina di registrazione contente il form per creare un nuovo utente, all'indirizzo{base_url}/registerupload.php: mostra la pagina di upload, all'indirizzo{base_url}/uploaduser_page.php: mostra la pagina del profilo utente, all'indirizzo{base_url}/user/[nome_utente]user_settings.php: mostra la pagina delle user settings, all'indirizzo{base_url}/user/settings
Il Backend si trova nella cartella ./app/application ed è basato sulla libreria CodeIgniter 3.
Le modifiche sono state fatte principalmente su 4 cartelle:
./app/application/config: contiene tutti i file di configurazione di CodeIgniter./app/application/controllers: contiene i controller utilizzati da CodeIgniter per gestire le richieste HTTP./app/application/models: contiene le classi con cui interfacciarsi al database nei vari controllers e libraries./app/application/libraries: contiene le classi di Utils utilizzabili nei vari controllers
In questa sezione si può trovare una breve descrizione per i file principali riguardanti il back-end del progetto.
./app/application/config/routes.php: contiene gli indirizzi a cui è possibile effettuare richiestePOSTeGET../app/application/config/database.php: contiene le settings del db, in particolare sono state modificate le seguenti righe per abilitare l'uso di Emoji nel sito
// da
'char_set' => 'utf8',
'dbcollat' => 'utf8_unicode_ci'
// a
'char_set' => 'utf8mb4',
'dbcollat' => 'utf8mb4_unicode_ci' ./app/application/controllers/Api.php: contiene i metodi che restituiscono risposte in formato JSON./app/application/controllers/Auth.php: contiene i metodi di autenticazione e registrazione di un utente./app/application/controllers/Home.php: contiene un metodo per la visualizzazione della home, andando a interrogare il db per ottenere i post da visualizzare, gli utenti suggeriti e le info sull'utente loggato./app/application/controllers/PostContr.php: contiene metodi per visualizzare la pagina di un singolo post (dato un id) e la sezione explore../app/application/controllers/Upload.php: contiene un metodo per la gestione dell'upload del post e un metodo per la visualizzazione della pagina di upload./app/application/controllers/UserContr.php: contiene metodi per visualizzare la pagina utente, dando informazioni riguardo l'utente loggato per permettere al front-end di gestire diversamente i casi della pagina dell'utente loggato e pagina di altri utenti. Contiene inoltre metodi per visualizzare la pagina di user settings e per aggiornare le informazioni dell'utente.
./app/application/models/Comment.php: contiene query relative ai Commenti./app/application/models/Follow.php: contiene query relative alle richieste/stato di Follow./app/application/models/Likes.php: contiene query relative ai Like./app/application/models/Media.php: contiene query relative ai Media./app/application/models/Notifications.php: contiene query relative alle Notifiche./app/application/models/Post.php: contiene query relative ai commenti./app/application/models/PostMedia.php: contiene query relative alla tabella PostMedia./app/application/models/Tag.php: contiene query relative ai Tag./app/application/models/User.php: contiene query relative ai User
./app/application/libraries/JwtAut.php: contiene le funzioni necessarie all'autenticazione e creazione di un json-web-token nella fase di login e navigazione tra pagine./app/application/libraries/LoginValidator.php: contiene le funzioni necessarie a validare l'utente durante una richiesta HTTP./app/application/libraries/UploadManager.php: contiene le funzioni necessarie a caricare e/o croppare immagini e video