1. beadandó feladat dokumentáció

Átírás

1 . beadandó feladat dokumentáció Készítette: Speeder Feladat: Készítsünk egy blogkezelő honlapot, amelyen a felhasználók saját blogokat vezethetnek. A weblap rendelkezzen az alábbi funkciókkal: A főoldalon listázódnak a blogok (név, létrehozó, utolsó bejegyzés dátuma, utolsó 3 bejegyezés címe), a szerint, mikor frissítették utoljára, valamint lehetőség van keresésre blog létrehozója, illetve a bejegyzés cím(részlet)ére, továbbá szűkíthetjük találatokat dátum intervallum alapján. Egy oldalon maximum 5 blog szerepelhet, utána lapozni kell. A blogot kiválasztva egymás alatt megjelennek az írások (első kb. 500 karaktere úgy, hogy egész mondatok szerepeljenek) a létrehozás dátuma szerint, egy oldalon maximum 5 bejegyzés jelenik meg, utána lapozni kell. A címre kattintva megjelenik a teljes blogbejegyzés, a képpel együtt (ha van), valamint, hogy kiknek tetszett a bejegyzés. A felhasználóknak először regisztrálniuk kell a felhasználónév, jelszó, cím, profilkép, valamint blog címe megadásával, ezután bejelentkezhetnek. Bejelentkezve megkapják a saját blogjukat, ahol lehetőségük van új bejegyzés létrehozására, korábbi írás módosítására/törlésére, valamint kijelentkezésre. Legyen lehetőség a bejelentkezés eltárolására, hogy legközelebb ne kelljen újra bejelentkezni. Íráskor meg kell adniuk a címet, a szöveget, valamint mellékelhetnek egy képet, amely automatikusan kicsinyítésre kerül, ha túl nagy az oldal szerkezetének. A felhasználók lájkolhatják mások bejegyzéseit. Egy felhasználó egy bejegyzést maximum egyszer. Az adatbázis az alábbi adatokat tárolja (ezek még nem feltétlenül a fizikai adattáblák): felhasználók (felhasználónév, jelszó, , profilkép, blog címe); Webes alkalmazások fejlesztése 20/202 tavaszi félév 0 bejegyzések (felhasználónév, bejegyzés címe, bejegyzés szövege, kép). lájkolások (felhasználónév, bejegyzés). Elemzés: A felületen a felhasználó egy a fejlécben lévő menüben választhat az oldal fő funkciói közül. Itt érhető el a regisztrációs és bejelentkezési felület illetve a navigációs gombok amik a főoldalhoz és a keresés oldalhoz vezetnek. Bejelentkezést követően itt látható a bejelentkezett felhasználó neve, valamint lehetőség van kijelentkezésre is. A felhasználónevet és a jelszót automatikusan megjegyeztetjük, így a kijelentkezésig nem kell a felhasználónak újra bejelentkeznie. Külön űrlapokat biztosítunk a regisztrációra, bejelentkezésre, kijelentkezésre, keresésre, blog és blogbejegyzés listázásra, bejegyzés olvasásra és szerkesztésre. Minden űrlapon validátorok segítségével ellenőrizzük a mezők helyes kitöltését. A felhasználó tevékenységeit (regisztráció, bejelentkezés) a háttérben naplózzuk.

2 uc UseCaseDiagram Search s Registration Browse s Read Own Log Out Read «Precedes» Create Read Log In Delete Edit. ábra. Felhasználási esetek diagram Adatbázis tervezés: Az adatbázisban öt táblát tárolunk. A képeket bináris formában tároljuk. A felhasználó () tábla tárolja a felhasználó információit: név, cím, jelszó, avatar-kép, admin-jogosultság. A felhasználó jelszavát és avatar-képét binárisan tároljuk. A blog () tábla tárolja a blogokkal kapcsolatos infórmációkat (azonosító, név) és kapcsolódik a felhasználó táblához. A bejegyzés () tábla tárolja az egyes blog bejegyzések információit (cím, dátum, szöveg, kép), és kapcsolódik a blog táblához. A kedvelés () tábla tárolja a felhasználók és bejegyzések like összefüggéseit, így kapcsolódik a felhasználó és bejegyzés táblákhoz. Az eseménynapló (Log) táblában a felhasználóhoz kötve tároljuk a bejegyzés idejét, a tevékenység típusát, valamint az esetleges üzenetet. Szerkezeti tervezés: A weblapot a modell/nézet architektúrának megfelelően építjük fel, ahol a modell réteg megfelelő típusok segítségével szolgáltatja az információkat a felületnek. A modell egy entitásmodellen keresztül tartja a kapcsolatot az adatbázissal. Logikai réteg (Model névtér): Az adatbázissal való kommunikációt a DataManager statikus osztály gyűjti egybe, amely lefedi a teljes entitásmodellt. A lekérdezéseket és transzformációkat LINQ kifejezésekkel valósítjuk meg. Az alfanumerikus tartalmat 2

3 Log LogTime : DateT LogType : String LogMessage : St Navigation Name : String Password : Binary String Avatar : Binary IsAdmin : Boolean Session Navigation Name : String Navigation Log Id : Int Navigation Title : String Date : DateTime Text : String Image : Binary Navigation 2. ábra. Adatbázis diagram 3

4 cd ClassDiagram-Model Asp::App_Code::Model::DataNotFoundException Asp::A l::data Asp::A l::data Asp::A ::Data Asp::A SearchData Asp::App_Code::Model::DataSaveFailedException Asp::App_Code::Model::DuplicationException Asp::App_Code::Mode ameduplicationexception + Administrator : Boolean + String + HasAvatar : Boolean + Name : String + Password : String + SessionId : Integer + Data() + LastDate : DateTime + Name : String + TitleList : List<String> + Name : String + Data() + Id : Integer + Date : DateTime + HasImage : Boolean + rs : List<Int32> + Text : String + Title : String + Data() + DateFilter : Boolean + EndDate : DateTime + Title : String + Mys : Boolean + StartDate : DateTime + Name : String + SearchData() Asp::App_Code::Model::PasswordException Asp::App_Code::Model::DataLoadFailedException Asp::App_Data::Log Log Asp::App_Data:: Asp::App_Data:: Asp::App_Data:: Asp::App_Data:: Asp::App_Data::AspEntities + Set : ObjectSet<> + Set : ObjectSet<> + Set : ObjectSet<> + Log : ObjectSet<Log> + Set : ObjectSet<> - _Set : ObjectSet<> - _Set : ObjectSet<> - _Set : ObjectSet<> - _Log : ObjectSet<Log> - _Set : ObjectSet<> + AddToSet(blog : ) + AddToSet(entry : ) + AddToSet(like : ) + AddToLog(userLog : Log) + AddToSet(user : ) + AspEntities() + AspEntities(connectionString : String) + AspEntities(connection : EntityConnec - OnContextCreated() Asp::App_Code::Model::DataManager - m_model : AspEntities - m_strpasswordsalt : String + Create(data : Data, image : Byte[]) + Delete(nId : Integer, nid : Integ + HashPassword(strPassword : String, nleng + (nid : Integer, nid : Integer, + Loads(nIndex : Integer, ncount : Integer, + LoadSummary(nID : Integer) : Data + LoadSummary(blog : ) : Data + LoadEntries(nId : Integer, nindex : Intege + LoadData(entry : ) : Data + LoadData(nId : Integer, nid : In + LoadImage(nId : Integer, nid : + Load(idCookieSession : Integer) : Data + Load(strName : String, strpassword : Strin + LoadAvatar(id : Integer) : Byte[] + LoadName(id : Integer) : String + Save(data : Data, image : Byte[]) + Save(user : Data, avatar : Byte[], str - static DataManager() 3. ábra. Osztály diagram - Logikai réteg segédosztályok segítségével adjuk tovább (Data, Data, Data). A kivételeket speciális formában adjuk tovább. A felhasználó kezelésnél ügyelünk a jelszó titkosítására, ezért önmagával és egy előre definiált szöveggel ( Asp- Salt ) megsózzuk, majd SHA algoritmussal kódoljuk a jelszót (a felhasználó mentésekor és betöltésekor is). Felületi réteg: A felületen 9 oldalt valósítunk meg: nyítóoldal (Default), letöltés (Download), regisztráció (Register), bejelentkezés (Login), kijelentkezés (Logout), blog olvasás (Read), bejegyzés olvasás (Read), bejegyzés szerkesztés (Write), keresés (Search). Az oldalakat egy mesteroldalba (ELearning.Master) ágyazzuk, amely tartalmazza a címsávot, a menüt a ki-/bejelentkező/regis dobozt. A megjelenítési stílusokat a Styles\Site.css fájlban helyezzük el. A bejelentkezést követően a felhasználó adatait munkamenet változóban ( ) tároljuk. A nyitóoldal jeleníti meg az összes blog listáját. A blog olvasás oldalon jelenítjük meg egy adott bloghoz tartozó összes bejegyzés listáját. A listázó vezérlőkhöz (Listing, Listing) kódban, adatkötéssel társítjuk az adatforrásokat. A legtöbb oldalon GET paraméterek segítségével továbbítjuk a munkamenet adatait. Ez alól kivételek az űrlapok gombkezelői. 4

5 cd ClassDiagram-View Asp::Global Asp::_Default Asp::Search Asp::C Listing # List : ListView + Global() - Application_End(sender : O - Application_Error(sender : O - Application_Start(sender : O - Session_End(sender : Objec - Session_Start(sender : Obje + _Default() + Search() - TurnPage(nIndex : Integer, # SearchButton_Click(sender # SearchValidate(source : Ob + Listing() + FormatDate(dataItem : Obj + SetData(lists : List<Blo + WriteEntries(dataItem : Ob Asp::Download Asp::Read Asp::C ntrylisting # List : ListView + Download() # SendImage(image : Byte[]) Asp::A t::register Asp::SiteMaster + Read() # Add_Click(sender : Ob + SiteMaster() Asp::Write + Listing() + FormatTime(dataItem : Obj + SetData(lists : List<Ent + WriteText(entryData : Obje + Register() # ButtonRegister_Click(sende + Write() # SubmitButton_Click(sender Asp::Account::Login Asp::A nt::logout Asp::Read + Login() # LoginButton_Click(sender : + Logout() + Read() # DeleteLink_Click(sender : O # EditLink_Click(sender : Obj # Link_Click(sender : Obj 4. ábra. Osztály diagram - Felületi réteg 5