COLEGIUL IULIA HASDEU DIN CAHUL CATEDRA INFORMATICĂ SISTEM INFORMAȚIONAL DE TIP WEB: AGENDĂ PENTRU MANAGEMENTUL TIMPULUI LUCRARE DE DIPLOMĂ la… [305238]

Licență

COLEGIUL IULIA HASDEU DIN CAHUL CATEDRA INFORMATICĂ SISTEM INFORMAȚIONAL DE TIP WEB: AGENDĂ PENTRU MANAGEMENTUL TIMPULUI LUCRARE DE DIPLOMĂ la… [305238]

Byadmin ianuarie 1, 2024

COLEGIUL IULIA HASDEU DIN CAHUL

CATEDRA INFORMATICĂ

SISTEM INFORMAȚIONAL DE TIP WEB: AGENDĂ PENTRU MANAGEMENTUL TIMPULUI

LUCRARE DE DIPLOMĂ

la specialitatea 1815 „Informatică”

Director Autor:

Tataru Gheorhe eleva gr. I1541,

_________________ (semnătura) învățământ cu frecvența la zi

Bercaru Adela

____________________

(semnătura)

Conducător științific:

gr. [anonimizat]

____________________

(semnătura)

CAHUL, 2019

INTRODUCERE

Luând în considerație evoluția tehnologiei în domeniul informatic și dorința de a simplifica modul de a face notițe si planificări a apărut și necesiatea de a elabora aplicații pentru managementul timpului.

Această lucrare este creată cu scopul de a [anonimizat]-[anonimizat].

Site-[anonimizat]-[anonimizat].

Conform studiilor realizate asupra metodei de organizare a timpului s-a constatat că majoriatea oamenilor optează pentru un instrument IT, o [anonimizat], mereu la îndemână pentru organizarea și managementul timpului și a activităților, [anonimizat], fără a purta un carnețel și un pix cu tine.

[anonimizat].

Aplicația “Agenda” asigură organizarea corectă a timpului. [anonimizat].

[anonimizat], deoarece este un cadru de aplicații web cu o sintaxă expresivă și elegantă care implementează arhitectura software MVC (Model View Controller).

[anonimizat], arhitectura și dependențele unui proiect și mergem direct în esența proiectului.

Astfel, [anonimizat] a [anonimizat]. Deoarece, construind această aplicație PHP care conține o mulțime de fișiere este mai ușor de lucrat și de găsit fișiere dacă aplicația este structurată.

[anonimizat].

Un model este o reprezentare a unei instanțe sau a unui obiect din viața reală în baza codului nostru. Vizualizarea reprezintă interfața prin care utilizatorul interacționează cu aplicația noastră. Când un utilizator ia o acțiune, [anonimizat].

În această lucrare voi relata despre tehnologiile utilizate pentru implementarea aplicației “Agenda” [anonimizat], despre arhitectura și structura aplicației.

CAPITOLUL I:

TEHNOLOGII ȘI LIMBAJE UTILIZATE

Tehnologiile utilizate pentru elaborarea acestui proiect sunt:

HTML5

CSS & [anonimizat] & jQuery

World Wide Web & HTML5

[anonimizat], și anume pentru crearea structurii sau scheletul paginilor aplicației am utilizat HTML5.

HTML (Hyper Text Markup Language) – limbaj de marcare a hyper-textului.

HTML este standardul pentru modul în care conținutul pe Internet este prezentat într-un browser web, HTML5 fiind ultima versiune a limbajului.

HTML este unul din elementele fundamentale ale WWW (World Wide Web).

World Wide Web fiind o rețea de conținut online care este formatat în HTML și accesat prin HTTP. Termenul se referă la toate paginile HTML interconectate care pot fi accesate prin Internet.

World Wide Web este ceea ce majoritatea oamenilor cred ca pe Internet. Toate paginile Web, imaginile, videoclipurile și alte tipuri de conținut online pot fi accesate prin intermediul unui browser Web. Internetul, dimpotrivă, este conexiunea de rețea care ne permite să trimitem e-mailuri și să accesăm World Wide Web. Web-ul timpuriu a fost o colecție de site-uri bazate pe text, găzduite de organizații care au fost destul de dotate din punct de vedere tehnic pentru a crea un server Web și pentru a învăța HTML. A continuat să evolueze de la designul original și include acum conținuturi interactive (sociale) și conținut generat de utilizatori, care necesită abilități tehnice foarte puțin sau deloc .

Utilizarea HTML în acest proiect

Toate elementele HTML în acest proiect sunt integrate în fișiere de tip php. Astfel în același fișier avem atât cod HTML cât și cod php.

Structura unui document HTML este următoarea:

Elemente HTML în aplicația “Agenda” creată în Laravel:

Declarația <!DOCTYPE> este primul lucru în documentul HTML, înainte de tagul <html>.
Declarația <!DOCTYPE> nu este un tag HTML, ci o instrucțiune către browserul web despre ce versiune HTML este utilizată pentru crearea paginii.

Vorbind despre tag-uri HTML, pentru crearea paginilor proiectului am utilizat o mulțime, pe lângă cele primordiale, cum ar fi:

<ul>/<ol> – tag pentru crearea listelor (neordonate/ordonate);

<li> – tag pentru crearea elementelor unei liste, acest tag se utilizează doar în interiorul tag-ului <ul>/<ol>;

<div> – tag pentru crearea unei diviziuni sau secțiuni, de obicei utilizat pe post de container;

<p> – tag pentru crearea paragrafelor;

<h1>, <h2>, … , <h6> – tag-uri pentru crearea antetelor de diferite niveluri, începând cu antet de nivel 1 (cel mai mare în dependență de mărimea fontului, și finisând cu antet de nivel 6 (cel mai mic în dependență de mărimea fontului);

<form> – tag de creare a formularelor, iar în interiorul său putem avea diverse alte elemente cum ar fi: input-uri, label-uri, div-uri, butoane, textarea, ancore, etc;

Figura 1.1 – Bloc de cod ce reprezintă utilizarea formularelor

Cu ajutorul acestor elemente HTML am creat scheletul paginilor.

CSS & SASS

În timp ce HTML este utilizat pentru structurarea unui document web, pentru stilizarea paginilor utilizăm CSS.

CSS – Cascade Style Sheets, descrie modul în care elementele HTML vor fi afișate pe pagină, adică dimensiunile, culorile, poziția, șriftul, etc.

Mai exact CSS este răspunzător de cum și cât de bine arată pagina.

Pentru stilizarea elementelor HTML utilizăm selectorii. Selectorii pot fi denumirile tag-urilor (ex: body, p, div), numele claselor elementelor (ex: .class-name) sau id-urile elementelor (ex: #element-id).

Stilurile CSS pot fi integrate direct in documentul HTML sau pot fi externe, într-un fișier cu extensia “.css”.

Legătura dintre un fișier extern css si documentul HTML se face cu ajutorul tag-ului link:

Acest tag se introduce în antetul documentului.

Figura 1.2 – Bloc de cod ce reprezită legătura dintre fișiere externe și document

Structura unui bloc de cod css:

selector {

proprietate: valoare ;

}

Figura 1.3 – Bloc de cod css, stilizarea după numele tag-urilor

Pentru stilizarea aplicației “Agenda” am utilizat și SASS-ul, deoarece SASS (Syntactically Awesome Stylesheets) este un pre-procesor CSS care ne permite să utilizăm variabile, operații matematice, mixuri, bucle, funcții, importuri și alte funcții interesante care fac scrierea CSS mult mai puternică. SASS extinde caracteristicile standard CSS introducând avantajele unui limbaj de programare de bază. Deci, SASS va compila codul și va genera ieșirea CSS pe care un browser o poate înțelege.

Figura 1.4 – Compilatorul SASS

Unul dintre marile avantaje ale utilizării unui pre-procesor CSS, precum SASS, este capacitatea de a utiliza variabile. O variabilă ne permite să stocăm o valoare sau un set de valori și să reutilizăm aceste variabile în toate fișierele SASS ori de câte ori dorim și oriunde dorim. Ușor, puternic și util.

Pentru a compila fișierele .scss în frameworkul Laravel utilizăm comanda:

npm run watch

Figura 1.5 – Rularea în terminal a comenzii npm run watch

În acest proiect avem un fișier destinat variabilelor pentru stilizare.

Figura 1.6 – Fișierul scss cu variabile

Un alt avantaj fantastic al pre-procesoarelor CSS este sintaxa imbunatatita. SASS ne permite să utilizăm o sintaxă imbricată, care este codul conținut într-o altă bucată de cod care efectuează o funcție mai largă. În SASS, cuiburile permit o modalitate mai curată de direcționare a elementelor.

Cu alte cuvinte codul scss are o structureă asemănătoare cu documentele HTML, adică o structură ierarhică.

Figura 1.7 – Bloc de cod scss – reprezentarea structurii ierarhice a fișierului scss

SASS are regula @import. @import ne permite să modularizăm codul făcând mai ușor de întreținut prin importul de fișiere mai mici SASS. Diferența dintre această regulă și regula CSS @import este că toate fișierele SCSS importate vor fi îmbinate împreună într-un singur fișier CSS, astfel că, în cele din urmă, va fi solicitat doar un singur apel HTTP, deoarece vom difuza un fișier CSS unic către serverul web.

Figura 1.8 – Bloc de cod scss – utilizarea @import-urilor de fișiere scss

PHP

Pentru programarea propriu zisă a aplicației am utilizat PHP, un limbaj de scriptare server-side, care este utilizat pentru dezvoltarea site-urilor/aplicațiilor web statice sau dinamice.

Acronimul pentru PHP este “Hypertext Preprocessor “.

PHP este cel mai utilizat limbaj printre alte limbaje de programare web.

Unul dintre cele mai ușoare limbaje de scriptare este PHP, care permite developerilor să înțeleagă rapid conceptul de web development.

Fișierele PHP pot conține text, HTML, CSS, JavaScript și cod PHP.

PHP a fost conceput pentru a lucra cu HTML, și ca atare, poate fi încorporat în codul HTML.

Figura 1.9 – Bloc de cod html cu elemente de php incorporate

Putem crea fișiere PHP fără etichete html și acestea sunt numite fișiere Pur PHP.

Figura 1.10 – Fișier Pur PHP

Ce poate face PHP:

PHP poate genera conținut dinamic al paginii

PHP poate crea, deschide, citi, scrie, șterge și închide fișierele de pe server

PHP poate colecta date de formular

PHP poate trimite și primi cookie-uri

PHP poate adăuga, șterge, modifica datele în baza de date

PHP poate fi folosit pentru a controla accesul utilizatorilor

PHP poate cripta datele

Un avantaj al limbajuli PHP este conceptul de POO (Programarea Orientata pe Obiect), ce ne permite reducerea liniilor de cod și reutilizarea claselor.

JavaScript

Un alt limbaj utilizat în dezvoltarea acestui proiect este JavaScript.

Cum utilizăm HTML pentru structura paginii, CSS pentru stilizare, JavaScript utilizăm pentru dinamicitatea paginii.

JavaScript este un limbaj de programare client-side sau altfel denumit, limbaj de scriptare, capabil de calcule complexe și interacțiuni, funcții și chiar metaprogramare.

Pe când PHP se ocupă de partea de backend (trimite cereri către server), JavaScript se ocupă de frontend, interacționând direct cu browserul.

La fel ca și CSS, putem include codul JavaScript direct în documentele HTML, între tag-urile <script> </script>, sau putem crea un fișier extern cu extensia “ .js”.

Frameworkul Laravel în care am ales să elabore aplicația îmi permite să utilizez JavaScript.
Pentru aceasta este necesar doar să instalăm câteva pachete, niște dependențe pe care le solicită JavaScript pe care le găsim în fișierul package.json. Aceste dependențe le instalăm utilzând managerul de pachte Node (NPM):

npm install

npm run dev

Figura 1.11 – Fișierul package.json

Bootstrap & jQuery

Bootstrap este un cadru (framework) front-end gratuit pentru pentru dezvoltarea web mai rapidă și mai ușoară.

Bootstrap include șabloane de design HTML și CSS pentru tipografie, formulare, butoane, tabele, navigație, modalități, caruseluri de imagine și multe alte, precum și pluginurile JavaScript opționale.

Bootstrap ne oferă, de asemenea, posibilitatea de a crea cu ușurință desene sau modele receptive.

Bootstrap este bine cunoscut în cercurile de dezvoltare pentru opțiuni de design impresionante. Laravel face incredibil de ușor utilizarea șabloanelor Bootstrap în vizualizările proiectului.

jQuery este o bibliotecă JavaScript, pe care am ales să o utilizez deoarece este rapidă, mică și bogată în funcții.

Ea face traversarea și manipularea documentelor HTML, manipularea evenimentelor și animația mult mai simple.

Dacă utilizând JavaScript simplu, pentru selectarea unui element dupa numele clase trebuie să scriem:

document.GetElementByClassName(“class-name”);

Utilizând jQuery aceasta devine mult mai simplu:

$(‘.class-name’);

Pentru stilizarea paginilor cu Bootstrap este nevoie doar de adăugarea unor clase predefinite în cadrul Bootsrap, și includerea fișierului bootstrap extern sau includerea prin adăugarea sursei cadrului Bootstrap:

Pentru adăugarea stilurilor CSS:

bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-

ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1

" crossorigin="anonymous">

Pentru adăugarea bibliotecii jQuery:

CAPITOLUL II: ARHITECTURA PROIECTULUI – LARAVEL FRAMEWORK

Laravel este Frameworkul în care am ales să dezvolt aplicația, deoarece face procesul de dezvoltare unul plăcut.

Laravel este accesibil, puternic și oferă instrumente puternice pentru aplicații mari.
O superbă inversare a containerului de control, un sistem de migrare expresivă și un suport integrat de testare integrat ne oferă instrumentele necesare pentru a construi această aplicație.

Laravel face ca implementarea tehnicilor de autentificare să fie foarte simplă. Aproape totul este configurat extraordinar. Laravel oferă, de asemenea, o modalitate simplă de organizare a logicii de autorizare și de control al accesului la resurse.

Unul dintre motivele de bază care fac din Laravel cel mai bun cadru PHP este că are biblioteci orientate pe obiecte și multe altele preinstalate, care nu sunt găsite în alte cadre PHP populare. Una dintre bibliotecile preinstalate este biblioteca de autentificare. Deși este ușor de implementat, are multe caracteristici avansate, cum ar fi verificarea utilizatorilor activi, a hashing-ului Bcrypt, a restituirii parolei, a protecției CSRF (Cross-site Request forgery) și a criptării.

În timp ce dezvoltăm o aplicație, toată lumea trebuie să folosească unele din celelalte metode și să facă aplicația sigură. Laravel are grijă de securitate în cadrul său. Utilizează parole salted și hashed, ceea ce înseamnă că parola nu ar salva niciodată textul simplu din baza de date. Utilizează algoritmul hashing pentru generarea unei reprezentări criptate a unei parole. Laravel utilizează instrucțiuni SQL pregătite, care fac atacurile injectabile inimaginabile. Odată cu aceasta, Laravel oferă o modalitate simplă de a scăpa de intrarea utilizatorilor pentru a evita injectarea de utilizator a <script> tag.

2.1 Structura proiectului

Aplicația “Agenda” este un proiect Laravel versiunea 5.7 bazat pe PHP, ce implementează arhitectura MVC (Model View Controller) care ne permite să avem un proiect bine structurat.

Figura 2.1 – Diagrama arhitecturii MVC (Model View Controller)

În proiectul curent se remarcă următoarea structură de directorii și fișiere :

app – Directorul de aplicații conține codul de bază al aplicației. Aproape toate clasele din aplicație sunt în acest directoriu.

bootstrap – Directorul de bootstrap conține toate scripturile de bootstrapping folosite pentru aplicație.

config – Directorul config, conține toate fișierele de configurare ale aplicației.

database – Directorul de baze de date conține migrațiile bazei de date, fabricile de modele (factories) și semințele (seeds).

public – Directorul public conține fișierul index.php, care este punctul de intrare pentru toate solicitările care intră în aplicație și configurează autoloading. Acest director include, de asemenea, activele (assets), cum ar fi imagini, JavaScript și CSS.

resources – Directorul de resurse conține opiniile, precum și activele (assets) brute, necompilate, cum ar fi SASS sau JavaScript. Acest director conține, de asemenea, toate fișierele de limbaj (localizare).

routes – Directorul de rute conține toate definițiile de rute pentru aplicație. În mod implicit, mai multe fișiere de rute sunt incluse împreună cu Laravel: web.php, api.php, console.php și channels.php.

Fișierul web.php conține rute pe care le plasează RouteServiceProvider în grupul de middleware web, care asigură starea sesiunii, protecția CSRF și criptarea modulelor cookie.

Fișierul api.php conține rute pe care le plasează RouteServiceProvider în grupul middleware api, care oferă o limitare a ratei. Aceste rute sunt destinate să fie apatrizate, astfel încât cererile care intră în aplicație prin aceste rute să fie autentificate prin token și nu vor avea acces la starea sesiunii.

Fișierul console.php ne permite să definim toate comenzile consolei bazate pe Closure (închidere). Fiecare închidere este legată de o instanță de comandă care permite o abordare simplă a interacțiunii cu metodele IO ale fiecărei comenzi. Chiar dacă acest fișier nu definește rute HTTP, acesta definește punctele de intrare bazate pe console (rute) în aplicație.

Fișierul channels.php este locul în care putem înregistra toate canalele de difuzare a evenimentului acceptate de aplicație.

storage – Directorul de stocare conține șabloanele Blade compilate, sesiunile bazate pe fișiere, cache-urile de fișiere și alte fișiere generate de cadru. Acest director este separat în directoare de aplicații (app), cadre (framework) și jurnale (logs). Directorul de aplicații poate fi utilizat pentru a stoca orice fișiere generate de aplicație. Directorul cadru este folosit pentru a stoca fișierele generate în cadru și cache-urile. Directorul de jurnale (logs) conține fișierele jurnal (log files) ale aplicației.

tests – Directorul de testare conține toate cazurile de testare.

vendor – Directorul vendor deține toate dependențele composer.

Directoriul app

Majoritatea aplicației este găzduită în directorul app. În mod implicit, acest director cu spațiul de nume “App” și este auto-încărcat de Composer folosind PSR-4 autoloading standard.
Directorul de aplicații conține o varietate de directoare suplimentare, cum ar fi Console, Http și Providers. Directorul Console conține toate comenzile dvs. Artisan, în timp ce directorul Http conține controlerele (Controllers), intermediarele (Middleware) și cererile (Requests).

Directoriul app conține următoarele subdirectorii:

Console – Directorul Console conține toate comenzile personalizate Artisan pentru aplicație. Aceste comenzi pot fi generate folosind comanda make: command. Acest director găzduiește, de asemenea, kernelul consolei, unde se înregistrează comenzile personalizate Artisan și se definesc sarcinile programate.

Exceptions – Directorul Exceptions conține fișierele de tratare a excepțiilor din proiectul Laravel care gestionează toate excepțiile aruncate de proiectul Laravel.

Http – Directorul Http conține controlerele, modulele middleware și cererile de formular. Aproape toată logica pentru a gestiona cererile care intră în aplicație sunt plasate în acest directoriu.

Providers – Directorul Providers este utilizat pentru a conține diferiți furnizori de servicii.

Figura 2.2 – Structura arborescentă a directoriului app

Figura 2.3 – Structura directoriului database

2.1.1 Laravel Controllers

Controlorii reprezintă o caracteristică importantă oferită de Laravel, unde, în locul definirii logicii solicitării de manipulare sub formă de închideri în fișierele de rute, este posibil să se organizeze acest proces cu ajutorul clasei de controlor. Ce fac controlorii? Controlorii sunt meniți să grupeze logica asociată cu solicitarea în cadrul unei singure clase. În proiectul Laravel, acestea sunt stocate în directorul app / Http / Controllers.

Pentru crearea unui Controller utilizăm terminalul, și anume comenzile:

php artisan make:controller <controller-name> –plain

Acest Controller poate fi apelat în fișierul web.php din directoriul roots astfel:

Route::get('base URI','controller@method');

Pentru aplicația ”Agenda” utilizăm următorii Controlleri :

Controllerii de autentificare

Controllerul de bază – Controller.php

Controllerul Home

Controllerul Events – creat pentru definirea și implementarea funcțiilor de afișare, creare și editare a evenimentelor/taskurilor.

Funcția index() – afișează pe pagina home evenimentele/taskurile utilizatorului.
Funcția store() – crează un eveniment/task nou, îl salvează și ne redirecționează pe pagina home, Dashboard, unde sunt afișate evenimentele utilizatorului.

Funcția update() – identifică evnimentul care a fost editat, și reînnoiește evenimentul cu datele noi introduse.

2.1.2 Laravel Routes

Rutarea este unul dintre conceptele esențiale din Laravel. Rutarea în Laravel ne permite să direcționăm toate cererile de solicitare către controlerul său adecvat. Rutele de bază și principale din Laravel recunosc și acceptă un URI (Uniform Resource Identifier) împreună cu o închidere, dat fiind că ar trebui să fie un mod simplu și expresiv de rutare.

Toate rutele Laravel sunt definite în fișierele de rute, care sunt localizate în directorul routes. Aceste fișiere sunt încărcate automat de framework. Fișierul routes / web.php definește rutele care sunt pentru interfața web. Aceste rute sunt atribuite grupului de middleware web, care oferă caracteristici precum starea sesiunii și protecția CSRF.

Router-ul ne permite să înregistrăm rute care răspund la orice verb HTTP:

Route::get($uri, $callback);

Route::post($uri, $callback);

Route::put($uri, $callback);

Route::patch($uri, $callback);

Route::delete($uri, $callback);

Route::options($uri, $callback);

Routele utilizate în aplicația „Agenda” :

Route::get('/', function () {

return view('welcome');

});

Auth::routes();

Route::get('/home', 'EventsController@index')->name('home');

Route::post('/event','EventsController@store')->name('create.event');

Route::get('/new-event', function () {

return view('/new-event');

});

Route::get('/edit/{id}', function ($id) {

$task = auth()->user()->evenments()->find($id);

return view('/edit',['task' => $task ]);

})->name('edit.event');

Route::delete('/home/{id}', function ($id) {

$task = auth()->user()->evenments()->find($id);

$task->delete();

return redirect('/home');

})->name('events.delete');

Route::resource('events', 'EventsController');

Ruta home – Apelează funcția index() din Controllerul Home.

Ruta create.event – Apelează funcția store() din Controllerul Events

Ruta new-event – Returnează vederea (view) new-event, care conține formularul de creare a unui eveniment nou.

Ruta edit-event – Conține funcția de editare a unui eveniment, primește ca parametru id-ul evenimentului prin cererea de tip “get” către server, astfel returnând vederea /edit cu un formular completat cu datele evenimentului extras după id.

Ruta events.delete – Conține funcția de ștergere a unui eveniment. Primește ca parametru id-ul evenimentului care urmează de a fi șters, astfel evenimentul fiind găsit este utilizată metoda delete() pentru ștergerea lui, după care suntem redirecționați către pagina home.

2.1.3 Laravel Models

Instrumentul ORM elocvent inclus cu Laravel oferă o implementare frumoasă și simplă ActiveRecord pentru lucrul cu baza de date. Fiecare tabelă de baze de date are un "Model" corespunzător care este utilizat pentru a interacționa cu tabelul respectiv. Modelele ne permit să căutăm date în tabelele nostre, precum și să introducem noi înregistrări în tabel.

Modelele se găsesc/crează de obicei în directorul app, dar putem să le plasăm oriunde, care pot fi încărcate automat în conformitate cu fișierul composer.json. Toate modelele Eloquent extind clasa Illuminate \ Database \ Eloquent \ Model.

Comanda Artisan pentru crearea unui Model este:

php artisan make:model nume_model

Modelele create pentru aplicația “Agenda” :

Modelul Users:

<?php

namespace App;

use Illuminate\Notifications\Notifiable;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Database\Eloquent\Model;

class User extends Authenticatable

{

use Notifiable;

/**

* The attributes that are mass assignable.

*

* @var array

*/

protected $fillable = [

'name', 'email', 'password',

];

/**

* The attributes that should be hidden for arrays.

*

* @var array

*/

protected $hidden = [

'password', 'remember_token',

];

public function evenments()

{

return $this->hasMany(events::class);

}

Modelul events:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class events extends Model

{

protected $filltable = [

'event_title',

'event_time',

'event_date',

'event_description',

'event_location'

];

public function user()

{

return $this->belongsTo(User::class);

}

2.1.4 Laravel Views

Vizualizările conțin codul HTML difuzat de aplicație și separă logica controlerului / aplicației de logica de prezentare. Vizualizările sunt stocate în directorul resources / views.

Laravel utilizează template-ul Blade.

Blade este motorul simplu, dar puternic de template, prevăzut cu Laravel. Spre deosebire de alte motoare populare care templatează PHP, Blade nu vă limitează la folosirea codului PHP simplu în opiniile dvs. De fapt, toate vizualizările Blade sunt compilate în cod PHP simplu și stocate în memoria cache până când sunt modificate, ceea ce înseamnă că Blade adaugă în mod esențial zero deasupra capului aplicației. Fișierele de vizualizare blade utilizează extensia de fișiere .blade.php și sunt de obicei stocate în directorul resurse / vizualizări.

Două dintre beneficiile primordiale ale folosirii Blade sunt moștenirea șabloanelor și secțiunilor.
Mai exact, în directoriul resources/layouts putem crea diferite secțiuni pe care le putem utiliza apoi în oricare dintre vizualizările noastre.

Pentru a extinde o secțiune sau un șablon utilizăm sintaxa :

@extends(‘layouts/nume_layout’).
Aceste șabloane le putem utiliza oriunde în interiorul viziunilor noastre.

Vizualizările create pentru această aplicație sunt:

Vizualizările gata create de template-ul blade– resources/auth, vizualizările pentru paginile de logare, înregistrare, și verificare.

Șablonul app.blade.php – oferit de template-ul Blade, care generează structura paginii și este exstins aproape în toate viziunile.

Viziunea welcome.blade.php – este pagina de destinație a site-ului.
Toate aceste viziuni au fost adaptate conform structurii și designul-ui aplicație.

Viziunile create personal pentru restul paginlor din cadrul aplicației:
home.blade.php – pagina de destinație după logare;

new-event.php – pagina de creare a unui eveniment;

edit.php – pagina de editare a unui eveniment;

Toate aceste pagini extind layout-ul app.blade.php, care conține headerul site-ului, și layout-ul footer, care conține footerul site-ului.

Headerul este meniul aplicației ce conține toate linkurile catre paginile site-ului.
Footerul este nota de subsol, cu informații despre autorul aplicației.

Layout-ul app:

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<!– CSRF Token –>

<title>{{ config('app.name', 'Laravel') }}</title>

<!– Scripts –>

<!– Fonts –>

<!– Styles –>

</head>

</button>

<!– Left Side Of Navbar –>

</ul>

<!– Right Side Of Navbar –>

<!– Authentication Links –>

@guest

<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>

</li>

@if (Route::has('register'))

<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>

</li>

@endif

@else

<a class="nav-link" href="{{route('home')}}">Dashboard</a>

</li>

<a class="nav-link" href="{{ url('/new-event') }}">+ Add New Event</a>

</li>

{{ Auth::user()->name }} <span class="caret"></span>

</a>

<a class="dropdown-item" href="{{ route('logout') }}"

onclick="event.preventDefault();

document.getElementById('logout-form').submit();">

</a>

@csrf

</form>

</div>

</li>

@endguest

</ul>

</div>

</nav>

@yield('content')

</main>

</div>

</body>

</html>

Layout-ul footer:

<p>Crafted by Adela Bercaru,

<a href="mailto:adela.bercaru@milav.eu">adela.bercaru@milav.eu</a>

during the internship with <a href="https://milav.eu/" target="_blank">

<img class="logo-milav" src="https://demo.milav.eu/wp-content/uploads/2017/05/MilavLogoSmall.png"

alt="Milav"></a></p>

</div>

</footer>

2.2 Structura Bazei de Date

2.2.1 MySQL

Laravel face ca interacțiunea cu bazele de date să fie extrem de simplă într-o varietate de backend-uri baze de date utilizând fie SQL-ul brut, constructorul de interogări fluent și ORM-ul Elocvent. În prezent, Laravel susține patru baze de date:

MySQL

PostgreSQL

SQLite

SQL Server

Configurația bazei de date pentru aplicație este localizată la config / database.php. În acest fișier definim toate conexiunile bazei de date și putem specifica care conexiune ar trebui utilizată în mod implicit.

În mod obișnuit, conexiunile bazei de date sunt configurate utilizând mai multe valori de configurare, cum ar fi gazdă, bază de date, nume de utilizator, parolă etc. Fiecare dintre aceste valori de configurație are propria variabilă de mediu corespunzătoare.
Modificările de configurare a bazei de date se fac în fișierul .env, unde se specifică baza de date la care ne conectăm (mysql), hostul bazei de date, numărul portului utilizat, numele bazei de date utilizate, numele de utilizator care de obicei se utilizează – root și parola bazei de date.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=agenda

DB_USERNAME=root

DB_PASSWORD=

2.2.2 Server Local – XAMPP

Pentru testarea locală a aplicației și crearea și manipularea bazelor de date avem nevoie de un server local. Serverul local utilizat pentru rularea aplicației și manipularea bazelor de date este XAMPP.

XAMPP este un pachet de programe free software, open source și cross-platform web server, care constă în Apache HTTP Server, MySQL database și interpretoare pentru scripturile scrise în limbajele de programare PHP și Perl.

PHP MyAdmin este un instrument software scris în php pentru administrarea bazelor de date MySQL.

Pentru a seta baza de date trebuie mai întăi să o creăm în phpMyAdmin.

După crearea bazei de date configurăm fișierul .env, unde parametrul DB_DATABASE trebuie să fie denumirea bazei de date.

După configurare începem să creăm tabelele, adăugăm câmpuri și le migrăm in baza de date.

2.2.3 Crearea tabelelor – Laravel Migrations

Pentru crearea tabelelor în Laravel utilizăm linia de comandă, și anume interfața Artisan.
Crearea schemei tabelelor se face cu ajutorul migrațiilor, și anume prin comanda:

php artisan make:migration create_tableName_table

Această migrație va crea tabelul necesar, după care adăugăm câmpurile necesare tabelului nostru cu parametrii necesari:

tipul de date, numele câmpului și dacă acest câmp reprezintă o cheie primară sau străină.
Crearea schemei tabeluilui se face cu ajutorul funcției up():

public function up()

{

Schema::create('events', function (Blueprint $table) {

$table->increments('id');

$table->unsignedInteger('user_id');

$table->foreign('user_id')->references('id')->on('users');

$table->string('event_title');

$table->time('event_time');

$table->date('event_date');

$table->text('event_description');

$table->string('event_location');

$table->timestamps();

});

}

Astfel am creat tabelul “events” al bazei de date “agenda” utilizate în această aplicație.

Pentru migrarea tabelelor către baza de date utilizăm comanda Artisan:

php artisan migrate

2.2.4 Structura și legăturile între tabele

Baza de date pentru aplicația agenda conține 4 tabele:

Tabelul events – conține toate evenimentele create de utilizatori;

Tabelul migrations – conține toate migrațiile făcute;

Tabelul password_resets – conține parolele resetate;

Tabelul users – conține toți utilizatorii site-ului.

Tabelul users este asociat cu tabelul events printr-o legătură de tipul “one-to-many” sau una la mai multe, utilizând câmpul id din tabelul users care este cheie primara și cheie străină în tabelul events, câmpul user_id(ce primește valoarea din câmpul id din tabelul users).

Legătura dintre tabele/designul bazei de date:

CAPITOLUL III:
STRUCTURA APLICAȚIEI

3.1 Obiectivele principale ale aplicației „Agenda”

Obiectivul principal al elaborării acestei lucrări este de a pune la dispoziția utilizatorilor o aplicație de tip web bine structurată, cu un design plăcut ce permite crearea unui cont de utilizator securizat, unde utilizatorul își va crea evenimente/taskuri personale, având doar el acces la ele.

Elaborarea acestui site este cu scopul de a furniza utilizatorilor un mod plăcut, ușor, modern și mereu la îndemână pentru planificare evenimentelor și organizarea timpului, sau doar pentru a face unele notițe.

3.2 Realizarea aplicației

Pentru realizarea acestei aplicații am utilizat toate tehnologiile descrise în capitolele anterioare.

Dezvoltarea site-ului a început prin instalarea serverului local XAMPP, o versiune compatibilă cu framework-ul Laravel 5.7 pe care am decis să-l utilzez.
După care a urmat instalarea proiectului Laravel 5.7, care necesită instalarea prealabilă a unor instrumente pentru managementul dependențelor sau a pachetelor.

Pentru instalarea acestor instrumente și rularea anumitor comenzi utilizez linia de comandă Git Bash.

Aceste instrumente sunt:

Composer – un manager de dependențe;

NPM care rulare necesită instalarea Node.js – este un manager de pachete Node.js care conține module cu librării JavaScript ce pot fi incluse în proiect.

Comanda pentru instalarea proiectului laravel 5.7 este următoarea:

composer create-project –prefer-dist laravel/laravel

project_name "5.7.*"

Pentru rularea aplicației utilizăm comanda Artisan:

php artisan serve

care va începe un server de dezvoltare la adresa: http://localhost:8000

După instalarea tuturor dependențelor și pachetelor necesare am început dezvoltarea propriu zisă a aplicației în mediul de dezvoltare (IDE) /editor de text Visual Studio Code, deoarece este un editor cu o interfață prietenoasă ce permite navigarea ușoară prin tot proiecul și conține Emmet – un set de plug-inuri care permit codarea la o viteză mai mare, în special editarea codului HTML și CSS.

Visual Studio Code ne mai permite și manevrarea repositoriilor Github, și anume vizualizarea branch-ulului curent, posibilitatea de a face commit și push către server. Visual Studio Code are integrat o linie de comandă, ce ne permite direct din editor rularea comenzilor git.
Github este un serviciu de găzduire web pentru proiecte de dezvoltare a software-ului care utilizează sistemul de control al versiunilor Git. GitHub oferă planuri tarifare pentru depozite private, și conturi gratuite pentru proiecte open source.

Comenzi git utilizate :

git clone

git fetch

git pull

git add

git commit

git push

git checkout

Proiectul Laravel instalat mi-a permis structurarea ușoară, rapidă și logică a aplicației. Astfel utilizând template-ul Blade am realizat rapid structura paginilor, după care utilizând pachetele și librăriile JavaScript, Bootstrap am proiectat designul și dinmicitatea site-ului.
Pentru partea de backend am utilizat dependențele php, baza de date MySQL, serverul Apache oferite de XAMPP.

3.3 Prezentarea aplicației “Agenda”

Fiecare pagină a site-ului conține :

header (bara de navigare), comun pentru toate paginile

main (secțiunea ce cuprinde conținutul paginii), diferit pe fiecare pagină

footer (subsolul paginii), comun pentru toate paginile

Headerul Paginii – este o listă cu toate linkurile paginilor ce se conțin în Agenda online.

Figura 3.1 – Bara de navigare

Footerul paginii – conține autorul aplicației, adresa de e-mail pe care utilizatorii pot contacta autorul, și un logo cu un link către compania în cadrul căreia a fost dezvoltată aplicația pe timpul stagiului de practică.

Linkul către pagina Milav – https://milav.eu/

Figura 3.2 – Footerul paginii

Pagina de înregistrare – conține un formular pentru introducerea datelor utilizatorului:

nume utilizator

adresă de e-mail

parola

confirmarea paroleiși un buton “Register”, care trimite o cerere de tip POST către server pentru adăugarea unui nou utilizator în baza de date.

Figura 3.12 – Pagina Register

Pagina de logare – conține un formular pentru introducerea adresei de e-mail a utilizatorului și a parolei, un checkbox pentru memorarea utilizatorului, un buton "Login" care ne redirecționează către pagina “Dashboard” și un link "Forgot Your Password?".

Pagina de destinație – Welcome page.

Figura 3.3 – Pagina de destinație

Dashboard – pagina home, aici sunt afișate toate evenimentele/taskurile utilizatorului.

Figura 3.4 – Dashboard, evenimentele utilizatorului.

Figura 3.5 – Dashboard, utilizatorul nu are evenimente adăugate.

Atunci când utilizatorul abia și-a creat cont, sau dacă încă nu a adăugat nici un eveniment sau le-a șters pe toate, pe Dashboard este afișat un mesaj precum că utilizatorul nu are evenimente adăugate, și un button “+Add New Event” pentru ca sugera utilizatorului să adauge evenimente/taskuri.
Acest buton, sau link-ul din bara de navigare “+Add New Event” ne direcționează către pagina new-event, destinată creării unui nou eveniment.

Figura 3.6 – Pagina new-event

Această pagină conține un formular cu 5 câmpuri pentru introducerea titlului, ora, data, descrierea și locația evenmentului, și un button “Create New Event” care trimite o cerere de tipul post către server pentru înregistrarea evenimentului către baza de date, și ne redirecționează către Dashboard unde este deja afișat evenimentul, și un mesaj “Event Created Successfully!” – Eveniment Creat Cu Succes!

Figura 3.7 – Redirect către Dashboard imediat ce a fost creat un eveniment.

Putem observa că fiecare eveniment este afișat într-un card format din 2 secțiuni:
Titlul Evenimentului și corpul evenimentului.

Lângă titlul evenimentului găsim 3 butoane, iconițe de: Marcare complet, Editare și ștergere.
Marcare complet – setează evenimentul/taskul ca fiind complet/finisat.

Figura 3.8 – Eveniment marcat Complet

Editare – ne redirecționează către pagina edit cu un formular completat cu datele evenimentului.

Figura 3.9 – Pagina de editare, formular completat automat cu datele evenimentului.

Pagina edit, spre deosebire de cea de creare a evenimentelor, are un buton "Update", care trimite o cerere de tip « PATCH » pentru actualizarea câmpului care a fost editat, și ne redirecționează către pagina Dashboard unde evnimentul va fi afișat cu mofificările corespunzătoare.
Ștergere – deschide o fereastră modală cu titlul : “Delete Event +titlul evenimentului”, un mesaj “Are you sure you want to delete this event?”

care întreabă utilizatorul dacă este sigur că dorește să șteargă evenimentul, și 2 butoane: „Cancel” – ce anulează ștergerea evenimentului, „Delete” – ce șterge definitiv evenimentul.

Figura 3.10 – Fereastra modală de ștergere a evenimentelor

După ștergerea evenimentului pe Dashboard primim un mesaj precum că evenimentul a fost șters cu succes, "Event Deleted Successfully !".

Figura 3.11 – Dashboard, eveniment șters cu succes.

CONCLUZII

Dezvoltarea acestei aplicații a fost ca o provocare pentru mine, deoarece când am început elaborarea aplicației aveam doar cunoștințe de bază în php, iar framework-ul laravel nu îl cunoșteam practic deloc.

Deși la început a fost puțin mai greu, nu regret deloc că am ales anume în frameworkul Laravel să elaborez aplicația, deoarece tot parcursul implementării și dezvoltării a fost ca o cerecetare pentru mine, o nouă aventură care mi-a oferit noi cunoștințe, și anume într-un domeniu foarte popular și actual.

Utilizarea unui cadru ce permite implementarea diferitor biblioteci, limbaje de scriptare, stiluri externe, oferă o structură logică a proiectului, legăturile între route, Controllere și Viziuni care sunt foarte ușor de elaborat, devine un start în cariera mea.

BIBLIOGRAFIE

HTML5 – Disponibil: < https://www.w3schools.com/html/html5_intro.asp>

Word Wide Web – Disponibil:

https://www.techopedia.com/definition/5217/world-wide-web-www>

CSS – Disponibil: < https://www.w3schools.com/whatis/whatis_css.asp>

SASS – Disponibil: < https://www.mugo.ca/Blog/7-benefits-of-using-SASS-over-conventional-CSS>

Ce poate face PHP – Disponibil :

< https://www.w3schools.com/php/php_intro.asp>

JavaScript – Disponibil:

<https://developer.mozilla.org/enUS/docs/Learn/JavaScript/First_steps/What_is_JavaScript>

Bootstrap – Disponibil:

<https://www.w3schools.com/bootstrap/bootstrap_get_started.asp>

Linkuri necesare pentru integrarea Bootstrap și jQuery – Disponibil: <https://getbootstrap.com/docs/4.3/getting-started/introduction/>

Lravel implementează arhitectura MVC

Disponibil: <https://blog.pusher.com/laravel-mvc-use/>

Structura proiectului Laravel – Disponibil:

<https://laravel.com/docs/5.8/structure>

Laravel Controllers – Disponibil:

< https://www.w3schools.in/laravel-tutorial/controllers/>

Larave Routes – Disponibil: < https://laravel.com/docs/5.8/routing>

Laravel Eloquent Models – Disponibil: < https://laravel.com/docs/5.8/eloquent>

Laravel Views – Disponibil: < https://laravel.com/docs/5.8/views>

Blade Template – Disponibil: < https://laravel.com/docs/5.8/blade>

Laravel Baze de Date – Disponibil: <https://laravel.com/docs/5.8/database>

Laravel Migrations – Disponibil: <https://laravel.com/docs/5.8/migrations>

Instalarea proiectului Laravel – Disponibil: <https://laravel.com/docs/4.2/quick>

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: COLEGIUL IULIA HASDEU DIN CAHUL CATEDRA INFORMATICĂ SISTEM INFORMAȚIONAL DE TIP WEB: AGENDĂ PENTRU MANAGEMENTUL TIMPULUI LUCRARE DE DIPLOMĂ la… [305238] (ID: 305238)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

COLEGIUL IULIA HASDEU DIN CAHUL CATEDRA INFORMATICĂ SISTEM INFORMAȚIONAL DE TIP WEB: AGENDĂ PENTRU MANAGEMENTUL TIMPULUI LUCRARE DE DIPLOMĂ la… [305238]

Copyright Notice

Partea I . CALCULUL ȘI CONSTRUCȚIA [611675]

2020 UNIVERSITATEA”O VIDIUS” DIN CONSTANȚA FACU LTATEA DE ȘTIINȚE E CONOMICE CONTABILITATE ȘI INFORMATICĂ DE GESTIUNE ÎNVĂȚĂMÂN T LA DISTANȚĂ LUCRARE… [605007]

Știința materialelor este o ramură a științelor tehnice care studiază raportul dintre structura și proprietățile materialelor de uz ingineresc. [309427]

Capitolul I – Creang ă în atenția criticii Capitolul II – Opera literară fericite 2.1 Universul satului 2.2 Universul copilăriei fericite Capitolul… [617135]

ARGUMENT …………………………………………………………………………………………………………….. ….3… [605606]

SPECIALIZAREA: ARTELE SPECTACOLULUI – ACTORIE [623313]

Copyright Notice

Similar Posts