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… [303127]

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 [anonimizat] a prins foarte rapid si sa extins si pe ocean devenind rețeaua de socializare cunoscuta astăzi ca Facebook. În acest moment Facebook este cea mai răspândita rețea de socializare din lume. Utilizatorii pot accesa aceasta rețea din orice loc unde există conexiune la Internet pe baza unui nume de utilizator si a [anonimizat] o serie întreagă de întrebări si date personale. [anonimizat] 1.5 mld. membri în toată lumea . fig. 1.1

[anonimizat] o rețea socială cu circuit închis pentru studenții unor anumite universități. La început verificarea apartenenței la universitate se făcea prin adresa de email a student: [anonimizat], dar începând din 2006 rețeaua se deschide tuturor. Imediat rețeaua facebook a [anonimizat].

Twitter este o platformă de socializare care permite utilizatorilor să trimită și să citească mesaje scurte numite "tweets" .

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

fig 1.2

Instagram este o retea de socializare online ce permite dstribuirea de fotografii sau video utilizatorilor posibilitatea să le distribuie pe o [anonimizat], Twitter, Tumblr și Flickr.

Instagram a [anonimizat] a fost lansat în octombrie anul 2010. Serviciul a [anonimizat] 2012 atingând cifra de 100 de milioane de utilizatori înregistrați. Instagram este distribuit prin toate magazinele digitale online ca si aplicatie de sine statatoare. 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% [anonimizat], iar 70% [anonimizat] o retea de socializare adresata student: [anonimizat], 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.

[anonimizat]. Întreaga identitate a [anonimizat]. Fie că este vorba de o litera, orice alt obiect, logo-ul este prezent pe toate materialele ce alcătuiesc identitatea vizuală, Importanța acestuia este foarte mare deoarece un logo bine realizat poate să atragă clienți, pe când unul lipsit de originalitate sau chiar de prost gust, ne poate plasa într-o zona gri sau chiar dezagreabilă.

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

Am ales pentru 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 HTML5, PHP 5,CSS3 si Javascript – jQuery.

HTML5 propusă inițial pentru broswer-ul Opera este un limbaj pentru structurarea și prezentarea conținutului pentru www, cel mai folosit protocol in Internet.

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

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

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

Selectoare

Box Model

Fundaluri si borduri

Efecte text

Transformari 2D/3D

Animatii

Coloane

Interfata utilizator

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 oop bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități de ordine vizual si nu numai în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web sau în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape. Initial 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 de programatorii Twitter, ajuns acum la versiunea 3, permite realizarea de site-uri web responsive, care se adapteaza la orice rezolutie de dispozitiv:

Este in momentul de fata cel mai utilizat framework pentru dezvoltarea interfetelor web devenind foarte rapid standardul in crearea template-urilor pentru marile sisteme deja existente,

Cand putem folosi Bootstrap?

Framework-urile de tip Bootstrap se folosesc de catre 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..

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 controller-ului 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.

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.

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 Controller-ului, modelului sau a view-ului 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 controller-ului și view-ului manipulează toate datele ce se relaționeză cu el. Și numai View-ul poate demonstra această informație. În acest fel am demonstrat ierarhia programului nostru: Model-View-Controller.

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, ce va fi implementat după punerea lui într-un model de date. Chiar dacă programatori pot porni cu scheme conceptuale specifice unui anumit SGBD asa numitele scheme logice, este totuși recomandabil să se realizeze mai întâi schema conceptuală independentă de SGBD, Alegerea unui SGBD și deciziile de proiectare se pot schimba fără ca schema logica să se schimbe.

Pentru proiectarea schemei logice se identifică elementele esențiale cum ar fi tipurile de entități și atributele lor precum și asocierile dintre acestea. Se pot defini, dacă este necesar, subtipuri, prin generalizări ale tipurilor definite. Acest proiect conceptual este realizat pe baza cerințelor definite în etapa de proiectare și se reprezintă, în general printr-o diagramă extinsa,

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

În proiectarea prin proiectarea centralizata 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 lofica a bazei de date. Din această schema logica proiectată se deduc schemele externe,

În proiectarea prin integrarea viewurilor externe se proiectează câte o schemă corespunzătoare fiecărui grup de utilizatori sau 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 logice care să satisfacă aceste cerințe se poate creea într-o varietate de strategii, dintre care cele mai relevante sunt proiectarea ascendentă și proiectarea descendentă.

În proiectare ascendentă a bazelor de date se pornește de la o schemă logica initiala si universală care conține toate atributele, care sunt apoi grupate pentru a forma tipuri de entități și asocierile sale.

În proiectarea descendentă a bazelor de date se pornește de la o schemă logica dezvoltată în modelul asociere-entitate în care sunt cuprinse aspectele de bază,.

Așadar, în această fază de proiectare se obține schema logica a bazei de date, care este independentă de orice model de date ș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.