OrkunAvci/Presenter.md

## Presenter.md

      
    Raw
  

              Presenter.md
            
          
    Introduction

Why is this here?

This is here to spark creativity and give inspiration to new developers.
What is this document?

This is the documentation of how I implemented the project. You should have your own code, design, implementation etc.
Who is it for?

This is for new developers.
How to use it?

There are three main ways you can go about this:

Read the requirements and go wild.
Read this documentation and implement it by yourself.
Read this documentation and the code, and then improve on it.

You can freely jump between these approaches. Documentation is written with as little code snippets as possible for this reason. And you can use whatever tech stack you want.


Presenter

Requirements

Administrative Screen


Users should be able to login.


Through a menu they should be able to:


Enter an image description (Max 100 char)


Enter start date of when to display image


Enter end date of when to display image


Enter order number of image


Enter which screen to show it on


Where images…

Can be an image or a video
Can be local or remote


Define screens in the system


Where screens…

Has a screen no
Has description
Has location (Descriptive not GPS)
Refresh rate


Display Screen


Displayed screen is a TV so system should be responsive
Separate refresh timers for screens
Screens should be able to display both images and videos
Presentation should start over at the end

This is intended to be a Web App.

Tech Stack


ASP .NET Core 5.0
C#
Razor Pages
MySQL
Vanilla JavaScript


Environment


Visual Studio 2019 (IDE)
MySQL Workbench (DB Management)
Typora (Documentation)
Google Chrome (Target Browser)


NuGet Packages

I would advise building this list up as you go. For example, you won’t need MySQL stuff if your DB is Oracle.

Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation (5.0.9)
Microsoft.AspNetCore.Session (2.2.0)
Microsoft.EntityFrameworkCore (5.0.9)
Microsoft.EntityFrameworkCore. Relational (5.0.9)
Microsoft.EntityFrameworkCore.Tools (5.0.9)
Microsoft.Extensions.Options.ConfigurationExtensions (5.0.0)
Microsoft.VisualStudio.Web.Codegeneration. Design (5.0.2)
MySql.Data (8.0.26)
Pomelo.EntityFrameworkCore.MySql (5.0.1)


Database Design

User

public class User
	{
		public int ID { get; set; }
		public string username { get; set; }
    	//	Non-hashed passwords are being used here.
		public string password { get; set; }
	}
Screen

public class Screen
	{
		public int ID { get; set; }
    	//	A short description.
		public string description { get; set; }
    	//	Where this screen is located.
		public string location { get; set; }
    	//	Refresh rate in seconds.
		public uint refresh { get; set; }
	}
Images

public class Images
	{
		public int ID { get; set; }
    	//	A short description.
		public string description { get; set; }
    	//	When to start displaying this image.
		public DateTime start { get; set; }
    	//	When to stop displaying this image.
		public DateTime finish { get; set; }
    	//	Link to source.
		public string link { get; set; }
    	//	Which screen to display it on.
		public int screen_no { get; set; }
    	//	Is it a video or an image?
		public bool is_video { get; set; }
	}
Note: Images.screen_no is a foreign key to Screen.ID

Backend Design

Models

In Model folder we have definitions for:

Images
Screen
User

And their respective database connection classes:

ImagesContext
ScreenContext
UserContext

All context classes have the same structure to them. First they map to tables. Second they define keys. And lastly they link columns with class properties.
Example shown through UserContext:
protected override void OnModelCreating(ModelBuilder modelBuilder)
		{
			// Map entities to tables.
			modelBuilder.Entity<User>().ToTable("user");

			//	Configure primary keys.
			modelBuilder.Entity<User>().HasKey(u => u.ID).HasName("id");

			//	Configure columns.
			modelBuilder.Entity<User>().Property(u => u.ID).HasColumnType("int").UseMySqlIdentityColumn().IsRequired();
			modelBuilder.Entity<User>().Property(u => u.username).HasColumnType("nvarchar(64)").IsRequired();
			modelBuilder.Entity<User>().Property(u => u.password).HasColumnType("nvarchar(64)").IsRequired();
		}
Note: **CLL **and **CLLNode **are no longer used. They stand for Circular Linked List and Circular Linked List Node respectively. This behavior has been moved to JavaScript. Refer to Display.js.

Pages

Dashboard Folder

Folder exposes Create, Read, Update, and Delete(CRUD) functionality for Images entities. Authorized folder. Mostly auto generated.
Screens Folder

If session is authorized, folder exposes CRUD functionality for Screen entities. If unauthorized, it simply lists screens with a watch link to their respective Display pages. This is the default page.
Index

Redirects to Screens. Not used.
Login

When a new request is received,

Signs out of current user (if there is one),
Searches for user in database, throws BadRequest() if not found,
Creates Principal needed for authentication:

Create a Claim with User.ID, User.username, and “auth”,
Create an Identity from Claim,
Create a Principal from Identity,


Signs in with default AuthenticationScheme, Principal, and non-persistent AuthenticationProperties,
Redirects to Dashboard.

Logout

Signs out of current user and redirects to default page.
Register

Can only be accessed if session is authorized. Auto generated.
Note: Since there is no distinction between users, exposing deletion or listing functionality to a user would expose it to all users. In the case of a security breach, this would be disastrous. Therefor it is not implemented.
Display

Since the refresh is calculated separately for each host we outsourced this task to host machines. To minimize the footprint of the program on the server and on the network, all session data is sent with the initial request and no further interaction between host and the server. There are no credentials in a watching session so this safe.
Display Controller Behavior (.cs)

Collects:


Screen
ID of the Screen is passed through URL parameters. Pulls Screen object from database. Only refresh property is used in here.


Session
List of Images to display. Images has to fulfill these conditions:

Images.screen_no == Screen.ID
Start Date < Now
Now < Finish Date


UpdateTime
Keeps track of when to update the session. Earlier of:

Start date of next Images to add to the session
Finish date of next Images to remove from the session


Display View Behavior (.cshtml)

Disables layout. Pulls Controller properties and injects them into a script tag so they can be used in JavaScript. Has an img tag for images and an iframe for videos.

Frontend Design

Display.js

Gets img and iframe tags into a constant variables and pulls refresh rate from Screen to a local variable.
window.onload()

Makes sure session is an array. Makes the first refresh_content() call. And sets up a timer to refresh the page when session update time arrives. Which in return automatically calls the controller and gets the new session.
refresh_content(index)

Makes sure index to session elements is in bound. Pulls a copy the current element into a local variable and calls appropriate handle function with Images.link. Finally sets up a timer to call itself after {refresh rate} seconds.
handle_img(link) and handle_vid(link)

Alternates the classes of tags between “Hidden” and “Displayed”. Sets up the src property of tag to the link but does not clean up the src of other. Classes are defined in default site.css.

Final Thoughts

I didn’t have any ASP .NET or ASP .NET Core experience before starting this project. I had some C# knowledge but it was in game development  far from web development. So this was an absolute beginner project for me. I learned a lot from it. And hopefully, you will too.