Aplicatia Studface are la baza conceptul de retea de socializare. Dat fiind faptul ca ca la ora actuala pe spatiul virtual se gasesc foarte multe… [302714]

SPECIFICATII DE PROIECTARE

Aplicatia Studface are la baza conceptul de retea de socializare. Dat fiind faptul ca ca la ora actuala pe spatiul virtual se gasesc foarte multe retele de socializare din care amintesc: [anonimizat] 2004 pentru a oferi posibilitatea de a [anonimizat]. În acest moment Facebook este una dintre cele mai răspândite rețele sociale din lume. [anonimizat] o serie întreagă de întrebări personale. [anonimizat] 1.44 mild. membri în toată lumea . Apreciat a fi al doilea site social mondial după google.com, [anonimizat] 2.0.

fig 1.1

[anonimizat], facebook era la origine o rețea socială cu circuit inchis pentru studenții acestei universități; ulterior ea s-a deschis și altor universități americane. La început verificarea apartenenței la universitate se făcea prin adresa de poștă electronică (e-mail) a student: [anonimizat], dar începând din septembrie 2006 rețeaua este deschisă tuturor. Imediat rețeaua facebook a [anonimizat]. [anonimizat] o platformă de social media care permite utilizatorilor să trimită și să citească mesaje scurte (de maximum 140 de caractere) numite "tweets" . [anonimizat], freamăt. Desemnează atât un sit web fondat în 2006 care permite scrierea și transmiterea de mesaje de maxim 140 caractere (litere) [anonimizat] „rețea socială”. Este uneori descris ca fiind "SMS-ul Internetului".

[anonimizat]-l [anonimizat] 2008 au fost circa 4-5 [anonimizat] 2009 circa 20-25 de milioane de utilizatori.

fig 1.2

[anonimizat] (mesajele de pe situl twitter) prin SMS sau prin aplicații client precum "Tweetie", "Twiterrific", "Twitterfon", "TweeetDeck" sau "feedalizr". [anonimizat].Moldova și Iran.

[anonimizat], video-[anonimizat], [anonimizat] o [anonimizat], Twitter, Tumblr și Flickr.

Instagram a [anonimizat] a fost lansat în octombrie 2010. Serviciul a [anonimizat] 2012 atingând cifra de 100 de milioane de utilizatori înregistrați. [anonimizat]. Serviciul a fost achiziționat de Facebook în aprilie 2012.

fig 1.3

Analizand principalele retele de socializare conceptul de la care a [anonimizat], de aici am inceput sa dezvolt Studface adaptand proiectul cererilor actuale.

Peste 85% dintre studenți și absolvenți susțin că ar fi dispuși să se angajeze într-un alt domeniu decât cel al specializării lor, iar 70% dintre studenții și absolvenții respondenți sunt nemulțumiți de oferta actuală de muncă, pentru nivelul lor arată un studiu realizat recent

Avand in cedere toate cele de mai sus StudFace va fi o retea de socializare adresata studentiilor si profesorilor. Va fi un prortal de joburi pentru studenti, un portat de tip documents sharing ( pentru materiale didactice). Autentificarea se fa face in 3 pasi, fiecare pas adunand informatiile necesare fiecarui tip de utilizator.

INTERFATA CU UTILIZATORUL

Identitatea vizuala

Logo-ul este cel mai important instrument al identității vizuale. Întreaga identitate a brandului este concentrată în această reprezentare grafică ce are rolul de transmite informații cu profunzime într-o manieră eficient concentrată. Fie că este vorba de o plantă, un animal sau un obiect, logo-ul este prezent în toate materialele ce alcătuiesc identitatea vizuală, fiind primul factor pe baza căruia se face diferențierea. Este evidentă importanța acestuia deoarece un logo bine realizat poate să atragă clienți, pe când unul lipsit de originalitate, superficial sau chiar de prost gust, poate plasa subiectul reprezentat într-o zona gri sau chiar dezagreabilă.

În consecință, brandul reprezintă imaginea de ansamblu a unei organizații, produs, serviciu, persoană sau eveniment, percepută din punct de vedere emoțional, intelectual și senzorial, la care contribuie identitatea vizuală, a cărei prim element este logo-ul.

Am ales pentry StudFace un logo reprezentat de un bubble-chat cu o toca si o pereche de ochelari. Alaturi este scris denumirea STUDFACE cu majuscule iar dedesubt sloganul StudFace. Culorile folosite sunt

O nuanta de albastru inchis cu codul hex #172f4a

O nuanta de albastru deschis/turcoaz cu codul hex #4bbce7

La primul pas sunt necesare introducerea de informatii generale priviind contul: nume, prenume, adresa de email pentru corespondenta si parola aferenta contului StudFace.

Fig 1.4 Inregistrare pas 1

La pasul 2 se va selecta statutul pe Studface, acesta poate fi de trei feuluri dupa cum urmeaza: student, elev si profesor.

In ultimul pas de inregistrare se vor cere informatii priviind institutia de invatamand din care provine, localitatea, specializarea si tipul de invatamant.

Fig 1.5 Inregistrare pas 2

Fig. 1.6 Inregistrare pas 3

Pentru interfata de autentificare utilizator am ales o interfata simpla cu un fundal tip full screen. Pentru autentificare utilizatorul va introduce adresa de email si parola asociata contului.

Fig. 1.7 Pagina autentificare

Aceasta pagina este si pagina de index vizibila la vizitarea siteului. Pe pagina se mai gaseste si butonul vreau cont care face redirectionare catre pagina de inregistrare.

Dupa autentificare utilizatorul va fi redirectionat catre pagina de profil de tip wall

Fig.1.8 Pagina profil

TEHNOLOGII FOLOSITE

Limbajele de programare folosite in costructia aplicatiei web sunt limbajul de programare HTML/HTML5, PHP, CSS/CSS3 si Javascript.

HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru World Wide Web, o tehnologie nucleu pentru Internet propusă inițial pentru software-ul Opera.[

Este a cincea revizuire a standardului HTML (creat în 1990 și standardizat ca HTML4 din 1997) și din octombrie 2011 este în curs de dezvoltare. Obiectivele sale principale au fost acelea de a îmbunătăți limbajul cu un suport pentru cele mai recente apariții multimedia în același timp menținându-l ușor de citit de oameni și bine înțeles de computere și device-uri (browsere web, parsere, etc.). HTML5 își propune să însumeze nu numai HTML4, dar și XHTML1 și DOM2HTML (îndeosebi JavaScript).

Urmărind predecesorii săi imediați HTML 4.01 și XHTML 1.1, HTML5 este un răspuns la observația că HTML și XHTML utilizate în comun pe World Wide Web sunt un amestec de caracteristici introduse de specificații diferite, împreuna cu acestea mai sunt și caracteristicile diferite aduse de software, de browsere, și multe erori de sintaxă în documnentele web existente. Astfle, HTML5 devine o încercare de a defini un singur limbaj de marcare care poate fi scris în oricare dintre sintaxele HTML sau/și XHTML. Acesta include modele detaliate de prelucrare pentru a încuraja mai multe implementări interoperabile; extinde, îmbunătățește și raționalizează disponibilitățile pentru documentele web și introduce marcarea și aplicații API (application programming interfaces) pentru aplicații web complexe. Din aceste motive, HTML5 este un posibil candidat pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5 au fost create din considerarea că va trebui să devină capabil să ruleze pe dispozitive cum ar fi smart-phonurile sau tabletele.

În special, HTML5 aduce multe noi caracteristici sintactice. Acestea cuprind elemente ca <video>, <audio>, <header> și <canvas> elemente HTML, precum și integrarea conținutului SVG care a înlocuiește utilizarea tag-ului generic <object>. Aceste noutăți sunt proiectate pentru a facilita includerea și manipularea în web a conținuturilor multimedia și grafice fără a fi nevoie să se recurgă la proprietățile de plugin și API. Alte noi elemente ca <section>, <article>, <header>, și <nav> sunt proiectate să îmbunătățească conținutul semantic al documentelor. Noi atribute au fost introduse în același scop, în același timp unele elemente și atribute au fost îndepărtate. Unele elemente ca <a>, <cite> și <menu> au fost schimbate, redefinite și standardizate. API-urile și DOM-urile (document object model) sunt certitudini și sunt părți fundamentale în specificațiile HTML5. HTML5, de asemenea, definește in câteva detalii prelucrările necesare pentru documentele invalide, astfel încât sintaxa erorilor va fi tratată uniform de toate browserele cunoscute.

Pentru stilizarea site-ului am folosit limbajul de programare CSS/CSS3

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in webdesign.

Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități webdesign.

Mai jos sunt prezente in listă cele mai importante modulele adăugate in CSS3:

Selectors

Box Model

Backgrounds and Borders

Image Values and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru acesul la obiecte încastrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Până la începutul lui 2005, ultima versiune existentă a fost JavaScript 1.5, care corespunde cu Ediția a 3-a a ECMA-262, ECMAScript, cu alte cuvinte, o ediție standardizată de JavaScript. Versiunile de Mozilla începând cu 1.8 Beta 1 au avut suport pentru E4X, care este o extensie a limbajului care are de a face cu XML, definit în standardul ECMA-357. Versiunea curentă de Mozilla, 1.8.1 (pe care sunt construite Firefox și Thunderbird versiunile 2.0) suportă JavaScript versiunea 1.7.

In ajutorul limbajelor de programare de mai sus am introdus librari sau platforme moderne necesare stilizari la standardele actuale si a creeari functionalitatilor

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și îmbunătăți procese precum traversarea arborelui DOM în HTML managementul inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive JavaScript". Biblioteca a fost lansată in 2006 de către John Resig .

$(document).ready(function(){

$('body').html(Salut lume!');

});

Cod exemplu de jQuery

Framwevork-ul dezvoltat initial de Twitter, ajuns acum la versiunea 3, permite realizarea de site-uri web responsive, care se adapteaza la orice rezolutie de dispozitiv: desktop, tablete si telefoane mobile.

Este in momentul de fata cel mai utilizat framework pentru dezvoltarea interfetelor web devenind foarte rapid standardul in crearea template-urilor pentru principalele sisteme CMS cum sunt WordPress si Joomla.

Cand putem folosi Bootstrap?

Framework-urile de tip Bootstrap se folosesc de catre acei web-designeri si dezvoltatori care cunosc bine sau foarte bine macar limbajul HTML si CSS si au nevoie de o baza solida pentru inceperea construirii proiectului.

Putem spune deci ca Boostrap este un instrument utilizat pentru a gestiona cat mai bine faza initiala a unui proiect deoarece putem conta pe o serie de componente care pot fi reutilizate si personalizate oferindu-ne o baza solida de pornire a proiectelor noastre pentru a nu fi nevoiti sa incepem de la zero.

Acesta functie este sugerata si de numele framework-ului, termenul “bootstrap” insumand procesele necesare pentru pornirea computerelor la fel cum framework-ul Bootstrap ne pune la dispozitie instrumentele pentru pornirea proiectului nostru web.

Pentru structura din spate a website-ului am folosit structura MVC

Model-view-controller (MVC) (din engleză, aproximativ: model-față-controlor) este un model arhitectural utilizat în ingineria software. Succesul modelului se datorează izolării logicii de business față de considerentele interfeței cu utilizatorul, rezultând o aplicație unde aspectul vizual sau/și nivelele inferioare ale regulilor de business sunt mai ușor de modificat, fără a afecta alte nivele.

Arhitectură

Model

Această parte a controlatorului manipulează operațiunile logice și de utilizare de informație (trimisă dinainte de către rangul său superior) pentru a rezulta de o formă ușor de înțeles.

Viziune (View)

Acestui membru al familiei îi corespunde reprezentarea grafică, sau mai bine zis, exprimarea ultimei forme a datelor: interfața grafică ce interacționează cu utilizatorul final. Rolul său este de a evidenția informația obținută până ce ea ajunge la controlator.

Controlator (Controller)

Cu acest element putem controla accesul la aplicația noastră. Pot fi fișiere, scripts sau programe, in general orice tip de informație permisă de interfață. În acest fel putem diversifica conținutul nostru de o formă dinamică și statică, în același timp.

Structură

Cu ajutorul Controlatorului, modelului sau a viziunii putem manipula următoarele elemente: date. Depinde de noi cum manipulăm și interpretăm aceste "date". Acum cunoaștem că unicele date ale unei adrese web statice sunt: obținerea unui fișier în discul dur (hard disk) sau din Internet, etc. și, interpretat (recunoscut/decodificat) sau nu, serverul răspunde.

Modelul, precum controlatorul și viziunea manipulează toate datele ce se relaționeză cu el. Și numai Viziunea poate demonstra această informație. În acest fel am demonstrat ierarhia programului nostru: Controlator-Model-Viziune.

Fig 2.0 Schema conceptuala MVC

Ca framework PHP am ales unul din cele mai folosite framework-uri php denumit Codeigniter.

Cuvântul englez framework definește, în termeni generali, un ansamblu standardizat de concepte, practici și criterii pentru a se aplica asupra unui tip particular de problematică, ce servește ca referință pentru a propune și rezolva probleme cu conotații similare.

În dezvoltarea de software un framework este o structură conceptuală și reprezintă o arhitectură de software care modelează relațiile generale ale entităților domeniului (site-ului).

Aportează o structură și o metodologie de muncă pe care aplicațiile domeniului web o extind sau utilizează.

Proiectare conceptuală a bazelor de date

NOTIUNI GENERALE

Faza de proiectare conceptuală a bazelor de date implică activitatea de proiectare a schemei conceptuale Aceasta fază se poate menține independentă de SGBD și produce un model de date, care va fi implementat după transpunerea lui într-un model de date specific. Chiar dacă proiectanții pot porni direct cu scheme conceptuale specifice unui anumit SGBD (care se mai numesc și scheme logice), este totuși recomandabil să se realizeze mai întâi schema conceptuală independentă de SGBD, deoarece o astfel de schema conceptuală este o descriere stabilă și inavuabilă a bazei de date, iar alegerea unui SGBD și deciziile ulterioare de proiectare se pot schimba fără ca aceasta să se schimbe.

Pentru proiectarea schemei conceptuale se identifică elementele esențiale ale acesteia: tipurile de entități și atributele lor precum și asocierile dintre aceste tipuri. Se pot defini, dacă este necesar, subtipuri, prin specializări ale tipurilor de bază, sau supertipuri, prin generalizări ale tipurilor deja definite. Acest proiect conceptual de nivel înalt este realizat pe baza cerințelor definite în prima etapă de proiectare și se reprezintă, în general printr-o diagramă Entitate-Asociere (extinsă).

Există mai multe aspecte privind modul de abordare a proiectării conceptuale. Un prim aspect se referă la modul de proiectare a schemei conceptuale a bazei de date: proiectare prin integrarea cerințelor și proiectare prin integrarea schemelor externe.

În proiectarea prin integrarea cerințelor (care se mai numește și proiectare centralizată) se realizează mai întâi integrarea (combinarea) tuturor cerințelor de proiectare într-un singur set de cerințe, pe baza căruia se proiectează schema conceptuală a bazei de date. Din această schema conceptuală (unică) proiectată se deduc schemele externe (vederile) corespunzătoare diferitelor grupuri de utilizatori și aplicații.

În proiectarea prin integrarea vederilor (schemelor) externe se proiectează câte o schemă corespunzătoare fiecărui grup de utilizatori și aplicații, pe baza cerințelor acestora, după care se combină aceste scheme într-o singură schemă conceptuală globală, pentru întreaga bază de date.

Fiind dat un set de cerințe, pentru un singur utilizator sau pentru mai mulți utilizatori ai bazei de date, proiectarea schemei conceptuale care să satisfacă aceste cerințe se poate aborda într-o varietate de strategii, dintre care cele mai relevante sunt proiectarea ascendentă (bottom-up) și proiectarea descendentă (top-down).

În proiectare ascendentă a bazelor de date se pornește de la o schemă conceptuală universală care conține toate atributele, care sunt apoi grupate pentru a forma tipuri de entități și asocierile dintre acestea. Proiectul poate fi rafinat prin grupări ulterioare și creare de supertipuri și subtipuri ale tipurilor existente.

În proiectarea descendentă a bazelor de date se pornește de la o schemă conceptuală dezvoltată în modelul Entitate-Asociere (extins) în care sunt cuprinse aspectele de bază (tipuri de entități și asocieri ale acestora). Dezvoltarea și rafinarea acestui model se face prin adăugarea de noi atribute și constrângeri, crearea unor subtipuri (prin specializare) și asocierea acestora cu tipurile de bază.

Așadar, în această fază de proiectare se obține schema conceptuală a bazei de date, care este independentă de orice model de date specific (ierarhic, rețea, relațional, etc.), și de orice sistem de gestiune care poate fi folosit pentru realizarea bazei de date.

NOTIUNI PARTICULARE

Baza noastra de date este de tipul MySQL. Bazele de date sunt folosite pentru stocarea informatiilor in vederea furnizarii ulterioare in functie de solicitarea primita. Baza noastra de date este structurata pe 4 tabele:

Users – tabela unt sunt stocate informatiile despre utilizatorii.

Messages – tabela unt sunt stocate mesajele utilizatorilor.

Galleries – tabela unt sunt stocate galeriile utilizatorilor.

Comments – tabela unt sunt stocate comentariile.

Implementarea bazei de date este realizată prin intermediul limbajului de descriere a datelor (LDD) pentru crearea tabelelor, iar apoi prin limbajul de manipulare a datelor (LMD) pentru popularea, regăsirea și actualizarea datelor.

Crearea bazei de date a fost realizată utilizând aplicația MySQL Workbench care se conectează la serverul MySQL și accesează baza de date. Crearea tabelelor poate fi făcută atât în mod vizual folosind formularul de inregistrare al aplicației, cât și prin scrierea de cod SQL. Spre exemplu, crearea tabelei Users se realizează executând următoarea comandă SQL:

CREATE TABLE `users` (

`id` int(11) NOT NULL,

`email` varchar(45) DEFAULT NULL,

`first_name` varchar(45) DEFAULT NULL,

`last_name` varchar(45) DEFAULT NULL,

`password` varchar(45) DEFAULT NULL,

`user_level` int(11) DEFAULT NULL,

`description` varchar(255) DEFAULT NULL,

`created_at` datetime DEFAULT NULL,

`updated_at` datetime DEFAULT NULL,

`profesie` varchar(255) DEFAULT NULL,

`institutie` varchar(255) DEFAULT NULL,

`localitate` varchar(255) DEFAULT NULL,

`specializare` varchar(255) DEFAULT NULL,

`tip_invatamant` varchar(255) DEFAULT NULL,

`avatar` varchar(255) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

În ceea ce privește funcționalitatea bazei de date, acesta este realizată prin limbajul de manipulare a datelor, apelat prin intermediul modelelor. După cum a fost prezentat anterior, modelul reprezintă o clasă a aplicației care se ocupă cu conectarea la baza de date și asigură interfața dintre aplicație și baza de date.

Pentru implementarea modelelor am folosit o altă facilitate oferită de către Codeigniter și anume, clasa Active Records, care permite scrierea comenzilor SQL, într-o manieră orientată pe obiecte specifică PHP 5. Oferim ca exemplu operațiile executate pentru inserarea și actualizarea și regăsirea datelor din tabela “users”:

Metoda din controller pentru inregistrarea unui utilizator:

public function register_user() {
$this->form_validation->set_rules("email", "Email", "trim|required|valid_email");
$this->form_validation->set_rules("first_name", "Prenume", "trim|required|alpha");
$this->form_validation->set_rules("last_name", "Nume", "trim|required|alpha");
$this->form_validation->set_rules("password", "Parola", "trim|required|min_length[8]");
$this->form_validation->set_rules("c_password", "Confirmare parola", "trim|required|min_length[8]|matches[password]");
if ($this->form_validation->run() === false) {
$this->session->set_flashdata("errors", validation_errors());
} else {
$user = $this->user->find_user_by_email($this->input->post());
if (count($user) > 0) {
$this->session->set_flashdata("errors", "<p>Adresa de e-mail este deja folosita!</p>");
} else {
$this->session->set_flashdata("success", '<div class="alert alert-success text-center">Contul a fost creat cu success! Va puteti autentifica.</div>');
$this->user->add_user($this->input->post());
if ($this->db->insert_id() == 1) {
$this->user->make_admin($this->db->insert_id(), 9);
}
}
}
redirect("/main/register");
}

Metoda din model pentru inregistrarea unui utilizator:

public function add_user($post_data) {
$query = "INSERT INTO users (email, first_name, last_name, password, user_level, avatar, profesie, institutie, specializare, tip_invatamant, localitate, created_at, updated_at)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW(), NOW())";
$values = array($post_data['email'],
$post_data['first_name'],
$post_data['last_name'],
$post_data['password'],
1,
'avatar.png',
'Student',
$post_data['institutie'],
$post_data['specializare'],
$post_data['tip_invatamant'],
$post_data['localitate']);
$this->db->query($query, $values);
}

Interfața este implementată utilizând viziunile și unitățile de control. Din prezentarea arhitecturii Model – View – Controller, știm că viziunile se ocupă cu prezentarea informațiilor către utilizator, deci cu partea vizuală a interfeței, în timp ce unitatea de control se ocupă cu funcționalitatea acesteia, întrucât preia cererile generate de acțiunile utilizatorului și le procesează, oferind un răspuns ce indică o nouă direcție de navigare în cadrul aplicației sau filtrează o parte din informațiile ce trebuie redate. Vom oferi ca exemplu clasa “Dashboard”.

class Dashboard extends CI_Controller {

public function __construct() {

parent::__construct();

$this->output->enable_profiler(false);

$this->load->model('User');

}

public function dashboard_index() {

$users = $this->user->find_all();

$data = array("users" => $users);

$this->load->view('dashboard/dashboard_index', $data);

}

public function search() {

$search = $this->input->post('search');

$query = $this->User->find_user_by_name($search);

echo json_encode($query);

}

public function new_user() {

$this->load->view('dashboard/new_user');

}

public function edit_user_admin($id) {

$user = $this->user->find_user_by_id($id);

$data = array("user" => $user);

$this->load->view('dashboard/edit_user_admin', $data);

}

public function edit_user() {

$user = $this->user->find_user_by_id($this->session->userdata("user_id"));

$data = array("user" => $user);

$this->load->view('dashboard/edit_user', $data);

}

public function show($id) {

$user = $this->user->find_user_by_id($id);

$messages = $this->message->get_messages($id);

$comments = array();

$users = $this->user->find_all();

foreach ($messages as $message) {

$comments[] = $this->comment->get_comment($message['id']);

}

$data = array("user" => $user, "messages" => $messages, "comments" => $comments, "users" => $users);

$this->load->view('dashboard/show_user', $data);

}

}

Din funcțiile prezentate mai sus, se observă clar rolul unității de control, și anume acela de a dirija fluxul aplicației, între paginile ce trebuiesc afișate și elementele de logică ce asigură funcționalitatea aplicației. Tot la partea de funcționalitate a aplicației se adaugă accesul la aplicație pe baza unui nume de utilizator și a unei parole, care identifică fiecare utilizator ce lucrează cu aplicația. Pentru implementarea acestui modul, au fost create o viziune “Login” și o unitate de control cu același nume. Acest modul, citește datele de autentificare și verifică dacă sunt găsite în baza de date. În caz afirmativ, este permis accesul utilizatorului, în caz contrar, accesul este interzis. Controlarea activității de autentificare se desfășoară după cum urmează, fiind gestionată de clasa Login:

public function login_user() {
$user = $this->user->find_user_by_email_and_password($this->input->post());
if (count($user) > 0) {
$this->session->set_userdata("logged_in", 1);
$this->session->set_userdata("user_id", $user['id']);
$this->session->set_userdata("user_level", $user['user_level']);

if ($user['user_level'] == 9) {
redirect("/dashboard/admin");
} else { // $user['user_level'] == 1
redirect("/dashboard");
}
} else {
$this->session->set_flashdata("errors", "<p>Adresa de email sau parola folosita nu sunt corecte.</p>");
redirect("/signin");
}
}

public function logout_user() {
$this->session->set_userdata("logged_in", 0);
$this->session->unset_userdata("user_id");
$this->session->unset_userdata("user_level");
redirect("/signin");
}

Dupa procesul de inregistrare/autentificare descise mai sus utilizatorul va fi redirectionat conform schemei descrise mai sus in controller-ul Dashboard.

Mai jos vom prezenta arhitectura functiei din spatele functional;itatii de galerie

Metoda Galerie:

class galerie extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('Upload_model');
$config['upload_path'] = realpath(APPPATH . '../upload');
$config['allowed_types'] = 'jpg|jpeg|png';
$config['max_size'] = '204800';
$this->load->library('upload', $config);
}
public function index()
{
$this->load->view('upload_form', array('error' => ' '));
}

public function do_upload()
{
if (!$this->upload->do_upload()) {
$error = array('error' => $this->upload->display_errors());

foreach ($error as $item => $value) {
echo '<ol class="alert alert-danger"><li>' . $value . '</ol></li>';
}
exit;
} else {
$upload_data = array('upload_data' => $this->upload->data());
foreach ($upload_data as $key => $value) {
$image = $value['file_name'];
$name = preg_replace('/\\.[^.\\s]{3,4}$/', '', $value['file_name']);
$data = array(
'path' => $image,
'name' => $name
);
$this->db->insert('gallery', $data);
}
echo '<h4 style="color:green">Image uploaded Succesfully</h4>';
exit;
}
}

function fillGallery()
{
$uploadpath = base_url() . 'upload/';
$rs = $this->db->get('gallery');
foreach ($rs->result() as $row) {
$src = $uploadpath . $row->path;
$alt = $row->name;
$lid = $row->id . 'g';
echo "<li class='thumbnail' id='$lid'>
<span id='$row->id' class='btn btn-info btn-block btn-delete'><i class='glyphicon glyphicon-remove'></i>&nbsp;&nbsp;&nbsp;Delete</span>
<img src='$src' alt='$alt' style='height: 150px; width: 150px'>
<span class='btn btn-warning btn-block'>$alt</span></li>";

}
}
function deleteimg()
{
$this->db->where('id', $this->input->post('id'));
$this->db->delete('gallery');
echo '<h4 style="color:green">This image deleted successfully</h4>';
exit;
}
}

Metoda din controller-ul „Messages”

class Messages extends CI_Controller {
public function post($poster_id, $user_id)
{
$this->message->add_message($this->input->post(), $poster_id, $user_id);
redirect("users/show/$user_id");
}

}

Metoda din model-ul „Message”

class Message extends CI_Model {
public function add_message($post_data, $poster_id, $user_id)
{
$query = "INSERT INTO messages (message, created_at, updated_at, user_id, poster_id)
VALUES (?, NOW(), NOW(), ?, ?)";
$values = array($post_data['input_message'], $user_id, $poster_id);
$this->db->query($query, $values);
}

public function get_messages($id)
{
$query = "SELECT messages.id, message, messages.created_at, user_id, poster_id, first_name, last_name, avatar
FROM messages
LEFT JOIN users
ON messages.poster_id = users.id
WHERE user_id = ?
ORDER BY messages.created_at DESC";
$value = $id;
return $this->db->query($query, $value)->result_array();
}

public function remove_messages($user_id)
{
$query = "DELETE FROM messages
WHERE user_id = ?
OR poster_id = ?";
$value = array($user_id, $user_id);
$this->db->query($query, $value);
}
}

Functia comentarii

Metoda din controller „Comments”

class Comments extends CI_Controller {
public function post($message_id, $commenter_id, $user_id)
{
$this->comment->add_comment($this->input->post(), $message_id, $commenter_id);
redirect("users/show/$user_id");
}
}

Metoda din modelul „Comment”

class Comment extends CI_Model {
public function add_comment($post_data, $message_id, $commenter_id)
{
$query = "INSERT INTO comments (comment, created_at, updated_at, message_id, user_id)
VALUES (?, NOW(), NOW(), ?, ?)";
$values = array($post_data['input_comment'], $message_id, $commenter_id);
$this->db->query($query, $values);
}

public function get_comment($message_id)
{
$query = "SELECT comments.id, comment, comments.created_at, message_id, user_id, first_name, last_name, avatar
FROM comments
LEFT JOIN users
ON comments.user_id = users.id
WHERE message_id = ?";
$value = $message_id;
return $this->db->query($query, $value)->result_array();
}

public function remove_comments($user_id)
{
$query = "DELETE FROM comments
WHERE user_id = ?";
$value = $user_id;
$this->db->query($query, $value);
}
}

Pentru interfata grafica am folosit tehniologiile HTML5 cu librarie CSS Bootstrap 3 si librarii javascript .

Extras din codul sursa pentru pagina de autentificare:

<?php $this->load->view('partials/head2.php'); ?>

<div class="image-container login-bg">
<div class="container">
<div class="row animated fadeIn">
<div class="col-sm-8 col-sm-offset-2">
<!– Wizard container –>
<div class="wizard-container ">
<div class="card wizard-card ct-wizard-sky" id="wizard">
<?= $this->session->flashdata("errors"); ?>
<form class="form-login text-center" action="<?php echo base_url(); ?>users/login_user"
method="post">
<h1 class="app-title">
<img src="<?php echo base_url() ?>assets/img/logo.png" class="logoreg">
</h1>
<div class="form-group">
<input type="text" class="form-control" placeholder="Adresa e-mail" name="email"
required="" autofocus="">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" placeholder="Parola"
required="">
</div>
<button class="btn btn-lg btn-sky btn-fill btn-block" name="signin" type="submit">
<i class="fa fa-share"></i>
Autentificare
</button>
<a href="<?php echo base_url(); ?>register" class="text-center new-account">Vreau cont </a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var _gaq = [
['_setAccount', 'UA-49755460-1'],
['_trackPageview']
];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
</script>
</body>
</html>

Figura de mai jos ilustreaza pagina de profil a unui utilizator.

In partea de sus se regaseste formularul de cautare live, logo-ul si meniul.

In blocul din partea dreapta se regasesc una sau mai multe reclame.