social club Input / Output Interface Design :

Made By : @darsh-7 @reiyuchan

INTRODUCTION In this project we considered a social club app for our University MTi. We want to give our community (MTI students) a way to communicate each other by a spatial app ,so we made a small version of an app call MTI social club.

Technologies/Techniques We used deferent tools to complect this app in a web version, starting with the Database by using Microsoft SQL Server to save and modify the data of our users, for the front end we used React program base typescript and of course with HTML and CSS ,for delivering the data from our Database to the front end we used ASP API.

Features The user can: • post his post easily. • give the post alike. • know the user level ,Name and maybe his image. Functional Requirements: Admin • Manage posts. • Manage users. Normal User • Add, edit, delete posts. • Change image. 

API Perform transactions: • Add, update, delete ,check user exists ,login user check(users). • Add, update, delete , get all posts ,search by user id(posts). • The API handles converting the data string ,numerical and image data to json so it can be handled and used in the front end. Login Example: In this example show how the API handle the login action the front sends the user id and his password then the API chick if the data are valid from the Database if it is not valid the API send empty object of user if else the API send this user data in object called user. the code :

Report Search for posts by user ID: in this example the API receive the user id from the front end and search for all posts from this user and send it back to the front The used quarry for the search : “SELECT * FROM post where userID = {id}”   Sitemap A sitemap is a list of all the pages on a website, which helps search engines and website visitors understand the structure and content of the site. It can improve the visibility of the website in search engine results and make it easier for visitors to navigate the site.

System Analysis Context Diagram:

Level-1 DFD:

use case A use case depicts a set of activities performed to produce some output result. Each use case describes how an external user triggers an event to which the system must respond. First Actor: User • Can Login. • Can add, edit and see posts. • Can like other posts. • Can edit his image. Second Actor: Admin • Can do anything like a user. • Can remove images and posts.

Activity Diagram The activity diagram gives a wide look at the system, the activity diagram is a tool that can be offered to non-technical people to understand the system well. Main activity diagram of the User: Main activity diagram of the admin changing Data

Sequence Diagrams The sequence diagram shows interactions in the system between objects put together respecting the sequence. It shows the message exchanged between the objects and what kind of interactions are done. In the MTI social club application, we look at the exchange between the actors and the system as well as the database and the API.

Login as User:

note: the DB Analysis is based on the new DB not the one currently used in the program

EER Digram: Mapping : Department (dep_id , dep_name) Users (userID , email ,password , name ,birth_date ,phone ,address , Profile_photo, gender ) Student (userID , enrolleddate , Level , dep_id ) Academician ( userID , dep_id ) post ( Post_id , userID , post_date , text , img ) Like (userID, Post_id)

Skema: