Sistem de Aplicatii Pentru Bug Management

Cuprins

1.Introducere

1.1 Descriere generala

1.2 Situatia actuala

1.2.1 Procese existente

1.2.2 Tipuri de utilizatori

2.Prezentarea aplicatiei

2.1 Functionalitati

2.1.1 Inregistrare si autentificare utilizatori

2.1.2 Adaugarea de proiecte noi

2.1.3 Continut static – informatii utile si descrieri

2.1.4 Administrare taskuri / buguri

2.1.5 Administrare lista de proiecte

2.1.6 Administrare utilizatori si roluri

2.2 Tehnologiile folosite

2.2.1 C#

2.2.2 ASP .NET WebMatrix / Razor

2.2.3 Baze de date

2.2.3.1 Descrierea entitatilor si a relatiilor

2.3.3.2 Descrierea atributelor

2.3.3.3 Diagrama enitate-relatie

2.2.4 HTML

2.2.5 CSS

2.2.6 Javascript

2.2.7 Jquery

2.3 Capturi din aplicatie

3.Bibliografie

1.Introducere

1.1 Descriere generala

In momentul de fata, in firmele mici de IT din Romania, modul de dezvoltare a proiectelor software se bazeaza pe structuri de organizare ad-hoc, foarte putin productive, ce creeaza probleme ulterioare de securitate si genereaza pierderi din valoarea ideilor initiale.

Sistemul dezvoltat isi propune sa rezolve aceasta problema prin crearea unei aplicatii accesibile prin intermediul internetului, care sa ofere acces rapid la informatiile si problemele existente din cadrul unui proiect.

Avantajele sunt reprezentate de: acces rapid si centralizat, comunicare in timp real intre membri, solutionare rapida si eficienta a problemelor aparute din cadrul proiectului.

1.2 Situatia actuala

1.2.1. Procese existente

Procesele externe sistemului care intra in legatura cu sistemul dezvoltat sunt urmatoarele:

Invitarea in cadrul unui proiect

Pentru a putea contribui in cadrul unui proiect sau vizualiza informatiile existente un utlizator trebuie sa fie invitat de catre administratorul proiectului, atribuindu-i-se un rol si un mod care poate interactiona cu ceilalti (administrator, dezvoltator, sau utilizator). Devine astfel un proces extern de stabilire a modului in care utilizator poate colabora cu echipa curenta.

1.2.2 Tipuri de utilizatori

Vizitator = orice persoana cu acces internet care acceseaza site-ul public. Acestia vor avea dreptul de a naviga paginile default ale aplicatiei. Se vor putea intregistra, sau loga daca au deja un cont existent.

Administrator de proiect = persoana cu acces internet care a trecut prin procedura de inregistrare, obtinand astfel un cont de utilizator, iar mai apoi a creat un proiect nou in cadrul aplicatiei. Are acces la adaugarea sau editarea tuturor informatiilor existente, la adaugarea de membrii noi in cadrul proiectului si la modificarea rolurilor acestora.

Developer = persoana care a fost invitata in cadrul unui proiect de catre un administrator de proiect. Rolul de developer este asignat explicit de un administrator al proiectului. Are acces la adaugarea si editarea informatiilor existente, si poate adauga membri noi de tip utilizator.

Utilizator = persoana care a fost invitata in cadrul unui proiect de catre un administrator de proiect sau de catre un developer. Are acces la editarea si vizualizarea informatiilor existente de tip întrebare.

Nota : Rolul unui utilizator al aplicatiei este stabilit doar la nivelul unui proiect, astfel un sigur utilizator putand avea roluri diferite in proiecte diferite.

2. Prezentare generala

2.1 Functionalitati

2.1.1 Inregistrare si Autentificare Utilizatori

Prin aceasta functie vizitatorii site-ului se vor putea inregistra si autentifica in sistem. In urma inregistrarii un vizitator va obtine un userID unic si o parola, si abilitatea de a-si crea proiecte proprii in cadrul aplicatiei, devenind astfel administrator de proiect pentru acestea.

2.1.2 Adaugarea de proiecte noi

Utilizatorii aplicatiei vor avea posibilitatea sa-si defineasca proiecte, pentru care devin automat administratori, sau pot astepta invitatia in cadrul unui proiect (daca nu a fost realizata).

2.1.3 Continut static – informatii utile si descrieri

Pe langa continutul dinamic (buguri, intrebari, imbunatatiri, ce trebuie solutionate), aplicatia contine si continut static: informatii utile si descrieri. Utilizatorii vor putea accesa paginile site-ului folosind un meniu arborescent. Accesul la descrierea unui proiect se face doar de pe pagina proiectului in sine (desigur, este necesar ca utilizatorul sa aiba un rol definit in cadrul acelui proiect).

Continutul static este administrabil de catre administratorii de proiect din modulul de administrare. Administratorii vor putea adauga, modifica si sterge informatii si pagini din cadrul unui proiect. Deasemnea detaliile proiectului vor putea fi adaugate, modificate si sterse folosind modulul de administrare.

2.1.4 Administrare taskuri / buguri

Utilizatorii inregistrati ce au rolurile de administrator sau de developer in cadrul unui proiect pot deschide task-uri noi sau edita (buguri, intrebari sau imbunatatiri), iar cei cu rolul de utilizator pot deschide si edita doar task-uri de tip intrebare.

Un membru poate altera starea unui task setand diferite prioritati (ridicata, normala, scazuta), poate schimba statusul acestuia pentru a reflecta modul real in care se afla – nerezolvat, in lucru, sau solutionat. Aceste schimbari vor fi vizibile in timp real de catre ceilalti membri.

Administratorii de proiect pot atribui unui alt membru din cadrul proiectului un task.

2.1.5 Administrare lista de proiecte

Lista de proiecte disponibile pentru un utilizator este gestionata automat de sistem, in functie de proictele create de acesta, respectiv de proiectele la care este invitat. Adaugarea ca nou membru intr-un proiect extern creeaza imediat un link catre pagina proiectului respectiv, utilizatorul obtinand acces la resursele si problemele publicate in cadrul sau.

2.1.6 Administrare utilizatori si roluri

Toate tipurile de utilizatori din cadrul unui proiect pot invita utilizatori noi, cu urmatoarele limitari:

– utilizatorii si developerii pot adauga doar utilizatori si nu pot schimba roluri

– administratorii pot adauga orice tip de utilizator, pot schimba roluri si pot sterge membri.

2.2 Tehnologiile folosite

2.2.1 C#

Limbajul C# contine mai multe facilitati inovatoare, dintre care cele mai importante

se refera la suportul incorporat pentru componente software. C# dispune de facilitati care

implementeaza direct elementele care alcatuiesc componentele software, cum ar fi

proprietatile, metodele si evenimentele. Poate cea mai importanta facilitate de care

dispune C# este posibilitatea de a lucra intr-un mediu cu limbaj mixt.

Relatia dintre C# si arhitectura .NET

C# are o legatura deosebita cu mediul sau de rulare, arhitectura .NET. Pe de o

parte, C# a fost dezvoltat pentru crearea codului pentru arhitectura .NET, iar pe de alta

parte bibliotecile utilizate de C# sunt cele ale arhitecturii .NET.

Ce este arhitectura .NET ?

Arhitectura .NET defineste un mediu de programare care permite dezvoltarea si

executia aplicatiilor indiferent de platforma. Aceasta permite programarea in limbaj mixt si

ofera facilitati de securitate si portabilitate a programelor. Este disponibila deocamdata

pentru platformele Windows.

Legat de C#, arhitectura .NET defineste doua entitati importante si anume biblioteca

de clase .NET si motorul comun de programare sau Common Language Runtime (CLR).

C# nu are o biblioteca de clase proprie ci utilizeaza direct biblioteca de clase .NET.

De exemplu, cand se ruleaza un program care efectueaza operatii de intrare-iesire, cum ar

fi afisarea unui text pe ecran, se utilizeaza biblioteca de clase .NET.

Motorul comun de programare (CLR) se ocupa de executia programelor C#. El

asigura de asemenea programarea in limbaj mixt, securitatea si portabilitatea programelor.

Atunci cand este compilat un program C#, sau un program in limbaj mixt, rezultatul

compilarii nu este un cod executabil. In locul acestuia, se produce un fisier care contine un

tip de pseudocod numit limbaj intermediar sau pe scurt IL (Intermediate Language). Acest

fisier IL poate fi copiat in orice calculator care dispune de .NET CLR. Prin intermediul unui

compilator denumit JIT (Just In Time), motorul comun de pogramare transforma codul

intermediar in cod executabil. Procesul de conversie decurge astfel: atunci cand un

program .NET este executat, CLR activeaza compilatorul JIT. Compilatorul JIT converteste

IL in cod executabil pe masura ce fiecare parte a programului este neceasra. In concluzie,

orice program compilat pana in format IL poate rula in orice mediu pentru care CLR este

implementat. In acest fel arhitectura .NET asigura portabilitatea.

Principiile programarii orientate obiect

Metodologiile de programare s-au modificat continuu de la aparitia calculatoarelor

pentru a tine pasul cu marirea complexitatii programelor. Pentru primele calculatoare

programarea se facea introducand instructiunile masina scrise in binar. Pe masura ce

programele au crescut s-a inventat limbajul de asamblare, in care se puteau gestiona

programe mai mari prin utilizarea unor reprezentari simbolice ale instructiunilor masina.

Cum programele continuau sa creasca, s-au introdus limbaje de nivel inalt, precum

FORTRAN si COBOL, iar apoi s-a inventat programarea structurata.

POO a preluat cele mai bune idei de la programarea structurata, combinandu-le cu

concepte noi. A rezultat o modlitate diferita de a organiza un program. In fapt, un program

poate fi organizat in doua moduri: in jurul codului (mod de lucru descris de sintagma “codul

actioneaza asupra datelor”, valabil in cazul programarii structurate) sau in jurul datelor

(abordare descrisa de sintagma “datele controleaza accesul la cod”, valabila in cazul

programarii orientate obiect).

Toate limbajele POO au patru caracteristici comune: incapsularea, polimorfismul,

mostenirea si reutilizarea.

Incapsularea

Incapsularea este un mecanism care combina codul si datele pe care le

manipuleaza, mentinand integritatea acestora fata de interferenta cu lumea exterioara.

Incapsularea mai este numita si realizarea de cutii negre, intrucat se ascunde

functionalitatea proceselor. Cand codul si datele sunt incapsulate se creaza un obiect. In

cadrul unui obiect, codul si datele pot fi publice sau private. Codul si datele private sunt

accesibile doar in cadrul aceluiasi obiect, in timp ce codul si datele publice pot fi utilizate si

din parti ale programului care exista in afara acelui obiect.

Unitatea fundamentala de incapsulare este clasa. Clasa specifica datele si codul

care opereaza asupra datelor. O clasa defineste forma unui obiect. Sau altfel spus, o clasa

reprezinta o matrita, iar un obiect reprezinta o instanta a clasei.

Polimorfismul

Polimorfismul este calitatea care permite unei interfete sa aiba acces la un grup

generic de actiuni. Termenul este derivat dintr-un cuvant grecesc avand semnificatia “cu

mai multe forme”. Spre exemplu, sa presupunem ca avem o nevoie de o routina care sa

returneze aria unei forme geometrice, care poate fi un triunghi, cerc sau trapez. Intrucat

ariile celor trei forme se calculeaza diferit, routina trebuie sa fie adaptata la datele pe care le

primeste incat sa distinga despre ce fel de forma este vorba si sa returneze rezultatul

corect.

Conceptul de polimorfism este exprimat prin sintagma “o singura interfata mai mlte

metode”.

Mostenirea

Mostenirea este procesul prin care un obiect poate dobandi caracteristicile altui

obiect. Analogia cu conceptul de animal este elocventa. Spre exemplu, sa consideram o

reptila. Aceasta are toate caracteristicile unui animal, insa in plus are si o alta caracteristica,

si anume: sangele rece. Sa consideram un sarpe. Acesta este o reptila lunga si subtire care

nu are picioare. Sarpele are toate caracteristicile unei reptile, insa poseda si propriile sale

caracteristici. Asadar, un sarpe mosteneste caracteristicile unei reptile. O reptila

mosteneste caracteristicile unui animal. Asadar, mecanismul mostenirii este cel care face

posibil ca un obiect sa fie o instanta a unui caz mai general.

Reutilizarea

Atunci cand este creata o clasa, aceasta poate fi utilizata pentru a crea o multime de

obiecte. Prin utilizarea mostenirii si incapsularii clasa amintita poate fi reutilizata. Nu mai

este nevoie sa testam codul respectiv ci doar a il utlizam corect

Tipuri valorice in C#

Tipurile de date si operatorii stau la baza oricarui limbaj de programare. C# ofera o

gama larga de tipuri de date si operatori. Vom incepe prin examinarea tipurilor de date

fundamentale in C#. Inainte de aceasta, amintim ca limbajul este puternic tipizat. Aceasta

inseamna ca pentru toate operatiile, compilatorul realizeaza verificari asupra compatibilitatii

tipurilor.

Limbajul C# include doua categorii generale de tipuri predefinite: tipuri valorice si

tipuri referinta. Tipurile referinta din C# sunt definite de clase. Studiul acestora il vom face

atunci cand vom discuta despre clase. La baza limbajului C# stau 13 tipuri valorice numite

si tipuri simple. Aceasta datorita faptului ca exista o relatie directa intre tipurile de date C#

si tipurile de date .NET.

Din ratiuni de portablitate, in C#, fiecare dintre tipurile valorice are domeniu fix de

valori. Daca de exemplu in limbajul C, o varabila de tip int este reprezentata pe 2 octeti sau

4 octeti, in functie de platforma utilizata, in C# unei variabile de tip int, calculatorul ii aloca 4

octeti, indiferent de mediul de executie.

Intregi

In C# sunt definite noua tipuri intregi: char, byte, sbyte, short, ushort, int, uint, long si

ulong.

Tipul char. Caracterele nu sunt reprezentate pe 8 biti ca in alte limbaje (spre exemplu

C sau C++ ). In C# se utilizeaza modelul Unicode. Acesta defineste un set de caractere care

poate repezenta caracterele din toate limbile de pe Pamant. Setul de caractere ASCII pe 8

biti, cuprins intre 0 si 127 este o submultime a modelului Unicode. Putem atribui o valoare de

tip caracter daca includem caracterul intre apostrofuri simple. Exemplu: char ch=‘M’ ;

Desi char este de tip intreg, nu poate fi amestecat la intamplare cu valori intregi deoarece nu

se efectueaza conversii automate intre char si celelalte tipuri intregi. Codul de mai jos este

incorect: char ch=77; Motivul pentru care instructiunea nu functioneaza este ca 77 este o

valoare intreaga si nu este convertita automat la tipul char. Pentru a converti o valoare

intreaga intr-un char vom realiza o conversie explicita (un cast). Pentru corectarea codului

din exemplul anterior trebuie sa rescriem codul in forma: char ch=(char) 77;

Celelalte tipuri intregi sunt utilizate pentru calcule numerice. Sunt definite atat versiuni

cu semn cat si fara semn. La fel ca in limbajul C, diferenta intre intregii cu semn si cei fara

semn este data de interpretarea bitului cel mai semnificativ. Daca este specificat un intreg cu

semn, atunci numarul este pozitiv daca bitul de semn este 0 si respectiv negativ daca bitul de

semn are valoarea 1.

Literali

In C# literalii desemneaza valorile fixate, reprezentate intr-un mod accesibil

utilizatorului. De exemplu, nr. 35 este un literal. Literalii se mai numesc si constante. Literalii

in C# pot fi de orice tip valoric. Constantele de tip caracter sunt incluse intre apostrofuri

(exemple: ‘a’, ‘$’, etc.) In ceea ce priveste literalii intregi, tipul fiecarui literal este cel mai mic

tip intreg care permite memorarea sa, incepand de la int. Un literal intreg poate fi de tip: int,

uint, long sau ulong. Pentru specificarea unui literal uint se adauga un u sau U. De exemplu

123 este de tip int in timp ce 123u este de tip uint. In mod analog pentru literali de tip long

se adauga l sau L in timp ce pentru literali de tip ulong se adauga ul sau UL.

Literalii in virgula mobila sunt in mod implicit de tip double. Daca dorim sa specificam

un literal de tip float adaugam f sau F (de exemplu, 123.4f este de tip float).

Pentru specificarea unui literal de tip decimal se adauga sufixul m sau M (ex: 1.43m).

Pentru specificarea unui literal hexazecimal se utilizeaza prefixul 0x (ex: 1) c=0xFF;

//255 in zecimal, 2) in=0x1a; //26 in zecimal).

Secvente escape pentru caractere

Majoritatea caracterelor pot fi afisate incluzand constantele de tip caracter intre

apostrofuri. Exista insa cateva caractere care ridica probleme deosebite precum ghilimelele,

apostroful etc., care au semnificatii speciale. Din acest motiv, C# pune la dispozitie

secvente escape, care sunt utilizate in locul caracterelor pe care le reprezinta. Secventele

escape sunt: \a (alarma), \b (sterge un caracter in urma, backspace), \n (linie noua), \r

(revenire la cap de rand), \t (tab orizontal), \v (tab verical), \0 (nul), \’ (apostrof), \”

(ghilimele), \\ (backslash).
In C# intalnim si un alt tip de literali: tipul string. Un string, reprezinta un sir de caractere inclus intre ghilimele (ex: “acesta este un string”). Pe langa caracterele obisnuite, un literal de tip string poate contine mai multe secvente escape. De asemenea, in C# se pot utiliza literalii “copie la indigo”. Un astfel de program incepe cu @, urmat de un sir de ghilimele. Se pot include astfel caractere tab, linie noua, etc fara a utiliza secvente escape. Exista o singura exceptie. Pentru

a obtine ghilimelele (“), trebuie utilizate doua caractere unul dupa altul (“”).

Variabile

O variabila reprezinta o locatie de memorie cu nume, careia ii poate fi atribita o valoare. Valoarea unei variabile poate fi modificata pe parcursul programului. Variabilele sunt declarate printr-o instructiune de forma: tip nume_var; unde tip reprezinta tipul variabilei, iar nume_var

numele variabilei. Variabilele trebuie declalarate inainte de a fi folosite, de asemenea tipul

variabilei nu poate fi modificat pe parcursul duratei sale de viata. Tipul variabilei determina

operatiile permise asupra variabilei. Dupa declararea variabilei, aceasta trebuie initializata. Initializarea unei variabile poate fi facuta printr-o instructiune de atribuire: nume_var=val;

unde val reprezinta valoarea atribuita variabilei nume_var (Exemple: int i=10; bool f=true; foat

fn=12.4f; long o=126L). De asemenea initialzarea poate fi facuta dinamic, utilizand orice

expresie valida la momentul in care variabila este initializata.

2.2.2 ASP .NET WebMatrix / Razor

Sistemul de web-helpere WebMatrix a fost implementat in cadrul ASP.NET pentru a usura munca de dezvoltare a unui site sau a unei aplicatii web.

Astfel dezvoltatorii ce detin cunostinte minime de programare pot implementa cu usurinta site-uri ce au grad mic sau mediu de complexitate.

Sintaxa Razor, bazata pe limbajul de programare C#, este limbajul folosit cel mai frecvent in cadrul paginilor web asp.net.

Afisarea in cadrul paginii se face folosind caracterul @, iar ASP.NET-HTML va encoda rezultatul. Acesta va inlocui caracterele speciale (cum ar fi <, > sau &) cu coduri care permit acestora sa fie afisate ca si caractere in loc sa fie interpretate ca taguri html sau entitati.

Aceasta criptare este necesara pentru a preveni riscuri de securitate.

Voi prezenta in continuare o pagina de layout din cadrul aplicatiei web, ce genereaza structura paginilor proiectelor, rutarea catre paginile ce afiseaza bugurile, extensiile si intrebarile.

In prima parte, apelam, folosind sintaxa razor de cod inline @{}, un webhelper numit websecurity ce contine o metoda care verifica daca utilizatorul este inregistrat.

Apoi in obiectul Page definita global salvam titlul paginii, in campul title.

Functia Href combinata cu operatorul “~/” permite rutarea “magica” catre orice parte din site, statica sau generata dinamic.

Rutarea in webmatrix se bazeaza pe o structura de tip RESTful.

@{

WebSecurity.RequireAuthenticatedUser();

Page.Title = Page.Project["title"];

}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>@Page.Title – A bug tracker</title>

<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

<link href="~/Content/Project.css" rel="stylesheet" type="text/css" />

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>

<script src="~/Scripts/modernizr-2.5.3.js"></script>

<meta name="viewport" content="width=device-width" />

</head>

<body>

<header>

<div class="content-wrapper">

<div class="float-left">

<p class="site-title">@Page.Title</p>

<nav>

<ul id="projectmenu">

<li><a href="@Href("~/Projects/Bugs", Page.Project["ProjectId"], "all")">Buguri</a>

<ol class="dropdown">

<li><a href="@Href("~/Projects/Bugs", Page.Project["ProjectId"], "all/")">Toate</a></li>

<li><a href="@Href("~/Projects/Bugs", Page.Project["ProjectId"], "unsolved/")">Deschise</a></li>

<li><a href="@Href("~/Projects/Bugs", Page.Project["ProjectId"], "solved/")">Rezolvate</a></li>

<li><a href="@Href("~/Projects/NewBug", Page.Project["ProjectId"])">Adaugă</a></li>

</ol>

</li>

<li><a href="@Href("~/Projects/Members", Page.Project["ProjectId"])">Membri</a></li>

<li><a href="">Redefinește</a></li>

</ul>

</nav>

</div>

<div class="float-right">

<section id="login">

Hello, <a class="email" href="~/Account/Manage" title="Manage">@WebSecurity.CurrentUserName</a>!

<form id="logoutForm" action="~/Account/Logout" method="post">

@AntiForgery.GetHtml()

<a href="javascript:document.getElementById('logoutForm').submit()">Log out</a>

</form>

</section>

<nav>

<ul id="menu">

<li>Proiecte

<ol>

@{

var uid = WebSecurity.CurrentUserId;

var db = Database.Open("StarterSite");

var fields = db.Query("select p.projectid, p.title FROM projects p join projects_membership pm on p.projectid = pm.projectid where userid = @0 order by p.projectid desc", uid);

foreach(var field in fields) {

<li><a href="@Href("~/Projects/Project", field.projectid)">@field.title</a></li>

}

}

<li><a href="@Href("~/Projects/NewProject")" style="border-top: 1px solid #bbb">Proiect nou</a></li>

</ol>

</li>

</ul>

</nav>

</div>

</div>

</header>

<div id="body">

@RenderSection("featured", required: false)

<section class="content-wrapper main-content clear-fix">

@RenderBody()

</section>

</div>

<footer>

<div class="content-wrapper">

<div class="float-left">

<p>&copy; @DateTime.Now.Year – A bug tracker</p>

</div>

</div>

</footer>

@RenderSection("Scripts", required: false)

</body>

</html>

RenderBody()

Metoda este referita ca pagina de Layout. Poate exista numai o metoda RenderBody per

Layout pagina. Este asemanatoare cu controlul ContentPlaceHolder. Metoda indica

unde va fi plasat template-ul vizualizarii in continutul elementului <body>.

RenderPage()

Paginile layout pot avea continut ce poate fi adus de pe alte pagini. RenderPage face

exact acest lucru. Metoda are unul sau doi parametri.

Primul parametru indica locatia fizica a fisierului, iar al doilea, ce este optional, contine

un array de obiecte ce pot fi plasate pe pagina.

Exemplu

@RenderPage("~/Views/Shared/_AnotherPage.cshtml")

RenderSection()

Metoda are un parametru ce indica numele sectiunii si unul de tip bool ce semnifica daca

sectiunea este optionala sau nu.

Acum prezentarea paginii propriu-zise bugs.cshtml, din cadrul proiectului, ce se foloseste de layoutul prezentat anterior.

Conectarea rapida la baza de date se realizeaza printr-un webhelper Database.

Folosind structura RESTful putem parsa din URL anumite date, cum ar fi id-ul proiectului current, acestea fiind stocate in vectorul UrlData.

Putem extrage date despre utilizatorul current fara a folosi baza de date, acestea gasindu-se in webhelperul WebSecurity. De exemplu, in codul ce urmeaza, putem lua id-ul utilizatorului folosindu-ne de campul CurrentUserId.

Am dorit ca membrii proiectului sa poata naviga facil printre taskurile existente, iar pentru a realiza acest lucru am adaugat o lista de sortare in functie de data adaugarii, prioritate, sau tip.

@section Scripts {

<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>

}

@{

Layout = "~/Projects/_ProjectLayout.cshtml";

var db = Database.Open("StarterSite");

var pid = int.Parse(UrlData[0]);

var userid = WebSecurity.CurrentUserId;

var queryType = UrlData[1];

var order = "definedOn desc";

switch(Request.Form["order"]) {

case "date" : order = "definedOn desc"; break;

case "priority" : order = "priority asc"; break;

case "type": order = "type asc"; break;

}

var project = db.QuerySingle("SELECT * from projects where projectid = @0", pid);

Page.Project = project;

String query = "";

switch(queryType) {

case "all": query = "Select * from bugs where projectid = @0"; break;

case "unsolved": query = "Select * from bugs where status != 2 and projectid = @0"; break;

case "solved": query = "Select * from bugs where status = 2 and projectid = @0"; break;

}

var bugs = db.Query(query + " order by "+order, pid);

}

<div class="orderbugs">

<form method="post" id="bugsorder">

Ordonează după:

<select onchange="$('#bugsorder').submit()" name="order">

<option value="date" @if(Request.Form["order"] == "date"){<text>selected</text>}>Data adăugării (desc)</option>

<option value="priority" @if(Request.Form["order"] == "priority"){<text>selected</text>}>Prioritate (desc)</option>

<option value="type" @if(Request.Form["order"] == "type"){<text>selected</text>}>Tip (desc)</option>

</select>

</form>

</div>

<br />

@foreach (var bug in bugs) {

<div class="wug @if (bug.priority == "high") {<text>highpriority</text>}">

<span class="type @bug.type" title="@bug.type"></span>

<span class="bugid" @if(bug.priority == "high"){<text>style="color: red"</text>}>ID : @bug.bugid</span>

<span class="title">@bug.title</span>

<span class="priority">Prioritate: @switch ((string)bug.priority) {

case "high" : <text>ridicată</text>; break;

case "normal" : <text>normală</text>; break;

case "low" : <text>scăzută</text>; break;

}</span>

<span class="status"> Status :

@switch ((int)bug.status) {

case 0 : <text>nerezolvat</text>; break;

case 1 : <text>în lucru (@bug.lastUpdate.ToString("dd MMM yyyy, HH:mm"))</text>; break;

case 2 : <text>rezolvat (@bug.completedOn.ToString("dd MMM yyyy, HH:mm"))</text>; break;

}

</span>

@if (bug.attachment != null) {

/*

<span class="snapshot">

<a target="_blank" href="@Href("~/attachments", @bug.attachment)"> &gt; Snapshot</a>

</span>

*/

}

<span class="actions">

<a href="@Href("~/Projects/EditBug", pid, bug.bugid)">Vizualizează</a>

</span>

<span class="definedon">@bug.definedon.ToString("dd MMM yyyy, HH:mm")</span>

</div>

}

2.2.3 Baze de date

2.2.3.1 Descrierea entitatilor si a relatiior

Entitatea este un concept important pentru modelul real analizat. O entitate poate fi slabă sau tare, in funcție de dependența sa de altă entitate. În modelele relaționale entitățile devin tabele.

Cheia primară este cea cea identifică in mod unic o entitate și face diferența între valori diferite ale entității. Are ca proprietăți importante: unicitatea și simplitatea, neconținând informații de ordin descriptiv.

Raportat la modelul real prezentat, referitor la datele unei platforme online de utilizatori, avem următoarele entități: UserProfile, Webpages_membership, Bugs, Projects, Projects_membership, Webpages_roles.

Mai pe larg, entitățile independente care compun baza de date, au următoarele calități:

UserProfile : stocheaza informatii pentru utilizatori ce pot deveni vizibile in cadrul aplicatiei

(e-mail-ul utilizatorului si id-ul acestuia)

Webpages_membership : retine informatii “sensibile” despre contul unui utilizator al aplicatiei, cum ar fi parola de login.

Bugs : reprezinta tabela in care sunt salvate informatiile despre tipurile de taskuri (buguri, intrebari, imbunatatiri) din cadrul unui proiect. Cheie primara: BugsId

Projects : reprezinta tabela ce stocheaza informatii despre proiecte. Cheie primara: ProjectId

Projects_membership : reprezinta tabela ce mapeaza legaturile dintre membri si proiecte. Chei externe: ProjectId (catre tabela Projects) si UserId (catre tabela UserProfile). De asemenea, retine rolurile utilizatorilor printr-o cheie externa la tabela Webpages_roles.

Webpages_roles : reprezinta tabela ce stocheaza rolurile posibile din cadrul unui proiect pentru membrii sai. (1: administrator, 2: developer, 3: utilizator)

Entitățiile fiind numite, este timpul prezentării relațiile dintre acestea mai amplu:

Relația este o comunicare între două sau mai multe entități. Valoarea unei relații este reprezentată de comunicarea între valorile entităților pe care le leagă. Asocierea redă raportul care există între entități. Trebuie specificat faptul că existența unei relații este dependent de existența entităților pe care le leagă. Este permisă existența mai multor relații între două entități.

În modelul de date prezentat, relațiile dintre entități sunt doar binare, astfel constrângerile de cardinalitate, definite de numărul de înregistrări posibile pentru fiecare entitate participant, pot fi de tipul one-to-one(1:1),one-to-many(1:n),many-to-many(m:n).

În continuare urmează o prezentare a modelului complet, cu o descriere foarte detaliată:

UserProfile – Webpages_membership = relație care face legătura între entitățile UserProfile și Webpages_membership. Cardinalitatea minima si maxima: 1-1 ( pentru un utilizator exista o singura inregistrare a informatiilor sensitive despre contul sau) .

UserProfile – Projects = relație care leagă entitățile utilizator și proiect. Cardinalitatea minimă este de 1-1 (un utilizator să adauge, sau sa fie membru la un proiect), iar cardinalitatea maximă este de 1:n (un utilizator poate să adauge sau sa participe la n proiecte).

Projects – Bugs = relație care face legătura între tabelele Proiecte si Buguri. Cardinalitatea minimă este de 1:1 ( un proiect poate sa contina un singur task <denumit generic bug> ) , iar cea maximă de 1:n ( un proiect poate sa contina mai multe taskuri).

UserProfile – Webpages_Roles = relație care leagă tabelele Utilizatori si Roluri. Cardinalitatea minimă si maxima este de 1:1 (un user poate sa aiba un singur rol in cadrul unui proiect).

2.3.3.2 Descrierea atributelor

Atributul este o proprietate de descriere a unei entități sau a unei relații. Spre exemplu, e-mail-ul unui utilizator este un atribut al entității UTILIZATORI (UserProfile), iar id-ul unui proiect al unui utilizator este un atribut al relației ce leagă entitățile UTILIZATORI și PROIECTE (Projects).

Trebuie văzută foarte clar diferența între atribut care devine coloană în modelele relaționale și valoarea lui, care este valoare în coloane. Pentru fiecare atribut trebuie menționate următoarele: numele, tipul fizic (integer, float, text, varchar, boolean), valori posibile, valori implicite, reguli de validare, reguli de constrângere, tipuri compuse.

Urmează o prezentare a atributelor entităților, însoțită de o descriere a fiecăruia, a caracteristicilor și constrăngerilor cărora trebuie să se supună.

Atribute pentru UserProfile

Atributele tabelei Webpages_Membership:

Atributele lui Projects

Atributele lui Bugs

Atributele lui projects_Membership

Atributele lui webpages_roles

Diagrama entitate-relație

Diagrama entitate-relație este o metoda de schematizare a structurii unei baze de date, într-o maniera grafică. Acest tip de diagrame oferă un mijloc simplu de comunicare a caracteristicilor designului unei baze de date.

Pentru proiectarea diagramei entitate-relație sunt cunoscute anumite reguli:

1.Entitățile sunt reprezentate prin dreptunghiuri

2.Relațiile dintre entități sunt reprezentate prin arce-neorientate

3. Cardinalitatea minimă este scrisă între paranteze, iar cea maximă se scrie fără.

4. Cheia primară are in fata simbolul #

Algoritmul pentru proiectarea diagramei E/R cuprinde următoarele etape:

1. Identificarea entităților din cadrul sistemului analizat

2. Identificarea relațiilor dintre entități si aflarea cardinalității

3. Identificarea atributelor aferente entităților si asocierilor dintre entități

4. Stabilirea atributelor de identificare a entităților, adică stabilirea cheilor

Diagrama E/R este prezentată în continuare:

2.3.3.4 Diagrama conceptuală

Se vor reprezenta entitățile și legăturile dintre acestea sub forma unor tabele speciale. Din punct de vedere formal, simbolul “x” arată plasamentul cheii externe, iar daca simbolul respective este subliniat, se indica faptul ca aceasta cheie externă este conținută și de cheia primară.

Transformarea entităților:

1. Entitățile independente devin tabele independente.

2. Entitățile dependente devin tabele dependente

3.Subentitățile devin subtabele.

Transformarea relațiilor:

Relațiile 1:1 și 1:n devin chei externe

Relația m:n va fi un tabel asociative, cu 2 chei externe pentru cele două tabele asociate. Cheia primară este compunerea acestor doua chei, la care se adaugă eventual alte coloane.

Relațiile de tip 3 devin tot tabele asociative

Transformarea atributelor:

Atributele singular devin coloane

Atributele multiple devin tabele dependente cu cheia primară formată din cheia externă + una/mai multe coloane adiționale

Entitățile devin tabele, iar atributele devin coloanele acestor tabele

2.2.4 HTML

Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup Language ), care descrie formatul primar in care documentele sunt distribuite si văzute pe Web. Multe din trasaturile lui, cum ar fi independența față de platformă, structurarea formatării si legăturile hipertext, fac din el un foarte bun format pentru documentele Internet si Web.

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemănător cu documetele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează pagini HTML.

HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe liste de mail le blochează intenționat.

O pagina HTML are elemente esențiale care intră in alcătuirea ei. În primul rând este vorba despre tag-ul <html></html> care incadreaza limbajul în sine. Apoi, cele 2 părți componente nelipsite sunt <head></head> si <body></body>

În interiorul tag-ului head intră <title></title> , unde se va scrie titlul care sa apară in partea de sus a browserului, și eventual pot fi deschise legături către pagini ce conțin javascript/css, sau chiar scris cod de javascript și css în cadrul tagurilor respective celor 2 limbaje.

Primele elemente care intră in alcătuirea unei pagini HTML în afara celor de baza, prezentate mai sus, sunt cele de heading: <h1></h1> , … , <h6></h6>, cele care împart pagina in diviziuni: <div></div>, <span></span>, dar și cele care contribuie la stil și la așezarea in pagină: <br /> (rănd nou) , <b></b>(bold), <u></u>(subliniat) sau <i></i>(scris italic).

Pe lângă tagurile de HTML referitoare la paragrafe: <p></p>, liste <ul></ul> (listă neordonată) și <ol></ol> (listă ordonată), cel de tabel <table></table>, care conține taguri pentru titluri: <th></th>, linii : <tr></tr>, sau coloane: </td>, cel mai important tag HTML folosit in cadrul aplicației și care intră in legatură directa cu scriptul PHP, este FORM.

Tagul <form></form conține 2 secțiuni, cea in care utilizatorul trimite informația: input, care poate fi de tipul: text, parolă, buton, checkbox, buton radio, imagine etc, si ce-a de-a doua partea de submit. Prin apăsarea butonului de submit, se trimite informația introdusă de utilizator către vectorul $_POST[] pentru ca aceasta să poată fi folosită mai departe in program.

2.2.5 CSS

Denumirea de CSS provine din limba engleză de la cascading style sheets, care se poate traduce ca foi de stil in cascada, stiluri ce pot fi definite atât în headerul unei pagini web, cât și într-un fișier separat individual. Cea de-a doua varianta fiind cea preferabilă.

CSS este utilizat pentru a defini culori, fonturi, layout, precum și alte aspecte legate de prezentarea documentelor. El este conceput în primul rând pentru a permite separarea documentului ca și conținut (HTML) de documentul de prezentare (scris in CSS).

Această separare poate îmbunătăți accesibilitatea conținutului, să ofere o mai mare flexibilitate și poate diminua caietul de sarcini al celui care se ocupa de mentenanța unui site web prin asigurarea unui control mai simplu. De asemenea CSS-ul poate reduce complexitatea și repetarea tag-urilor folosite pentru formatare din structura conținutului. CSS poate, de asemenea, permite ca aceeași pagină sa fie prezentată în diferite stiluri de redare pentru diferite medii.

Mulți programatori WEB considera CSS a fi un mod de formatare mult mai puternic si mai ușor de utilizat, și considera ca tag-ul <font> este învechit. În 2006, capacitățile CSS-ului au fost îmbunătățite considerabil în ceea ce privește design-ul layoutului unei pagini web. Cu toate acestea, multe website-uri încă utilizează CSS numai pentru formatarea textului, în timp ce pentru layout preferă tabelele. Datorita faptului ca Internetul este din ce în ce mai folosit, datorită utilizării tot mai frecvente a telefoanelor mobile, este necesară crearea unor pagini web care folosesc o mare varietate de dispozitive, iar CSS ajută foarte mult în aceasta privință, un design web fără tabele îmbunătățește considerabil accesibilitatea.

Sintaxa limbajului CSS este foarte simplă, fiind formată din trei elemente:selector, proprietate și valoare.

Spre exemplu: selector { proprietate:valoare; }

CSS suportă un număr mare de tipuri de reguli care se aplică elementelor, cele mai uzuale fiind:

Color: foreground color, culoarea textului din elemental specificat

Background – fundalul unui element, care are mai multe trăsături ce pot fi stilizate (background-color, background-image, background-position, background-repeat)

Position (relative, fixed, absolute) : cu ajutorul acestei caracteristici se obține o așezare în pagină foarte precisă, folosindu-ne trăsăturile: left, right, top, bottom ale lui position putem obține poziții de o acuratețea ridicată

Display (none, inline, block) : este un atribut care face referire la ce așteptări are designer-ul de la afișarea diverselor elemente.

Float ( left, right, center ) : această caracteristică se folosește de asemenea pentru poziționarea diferitelor structuri HTML în pagină, doar ca float are un mod de funcționare prestabilit și aduce o așezare a obiectelor unele fața de altele, și nu neaparăt fața de pagina HTML în sine.

Margin, padding, border joacă roluri esențiale în definirea unui tabel, dar și a întregii pagini HTML.

Width și height , reprezintă lățimea și lungimea , caracteristici esențiale in postarea pe pagină a pozelor, listelor ce intră in componența meniurilor, tabelelor propriu-zise, sau care definesc layoutul unei pagini. Aceste doua trăsături pot fi folosiți fie dăndu-li-se valori într-un anumit număr de pixeli, fie folosindu-se procente.

Text-transform, text-decoration, text-align, text-shadow sunt trăsături special create pentru a acoperi toată gama de stiluri pe care un text o poate avea.

Prin intermediul celor 2 caracteristici ale tagurilor HTML, id și class se face referire la o anumită zona a paginii web, care urmează a fi stilizată intr-un fișier separat. Când in cadrul paginii CSS se face referire la o bucată html a cărei legătura s-a realizat prin id, înaintea numelui id-ului se scrie semnul #, iar când legătura se realizeaza prin clasă, atunci înaintea selectorului se pune un punct.

Exemplu de cod CSS folosit in aplicatie:

.bug {

display: inline-block;

position:relative;

background: #fefefe;

padding: 5px;

margin: 5px;

font-family: Calibri;

box-shadow: 0 0 5px #ccc;

border: 1px solid transparent;

transition: all 0.2s;

cursor: pointer;

}

.bug:hover {

border-color: #57a2d9;

}

.bug .type {

position: absolute;

top: 0;

right: 0;

width: 20px;

height: 20px;

margin: 5px;

}

.wug .bugid {

display: block;

font-size: 18px;

}

2.2.6 Javascript

Javascript este un limbaj de  programare care face posibil ca paginile web sa fie mai interactive. Este mai  des recunoscut ca facand parte din categoria "Scripting Languages".  A fost lansat sub numele de  "LiveScript", schimbarea numelui in JavaScript fiind o chestie legata de  strategia de marketing.
        Scripturile  Javascript sunt introduse in pagina HTML si sunt interpretate si executate de browser. Javascript poate fi considerat o unealta foarte buna daca doriti sa controlati continutul paginilor in functie de data, ora, sistemul de operare sau browserul utilizatorilor, sa faceti site-uri interactive, care sa comunice cu vizitatorii, site-uri dinamice, sa validati datele primite din formulare, dar nu numai atat, acestea fiind doar cateva din posibilitatile pe care le ofera acest limbaj.

2.2.7 Jquery

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.

Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery. Arhitectura sa permite programatorilor să dezvolte subaplicații bazate în biblioteca principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. În acest fel biblioteca principală poate ocupa foarte puțin spațiu, iar extensiile necesare în anumite pagini web pot fi încarcate la cerere, doar când este nevoie de ele. Există un set de extensii principal numit jQuery UI( jQuery User Interface). jQuery UI ofera un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, minimizând riscul de incomptibilitate.

Capturi din aplicatie

Prima pagina

Login

Register

Adaugarea unui nou proiect:

Pagina de taskuri (buguri) din cadrul unui proiect:

Adaugarea unui nou bug in cadrul unui proiect:

Managementul utilizatorilor din cadrul unui proiect:

(Doar administratorul proiectului poate schimba rolurile membrilor)

Pagina proiectului:

3. Bibliografie

C# 5.0 in a nutshell, Joshep Albahari, Ben Albahari

Pro Asp.Net MVC 3 Framework, Adam Freeman

Baze de date relaționale , prof dr Popescu Ileana

Wikipedia

Articole.web-start.ro (articol despre CSS)

www.w3schools.com

Sistem de aplicații .NET pentru bug management