UML schemes

Types of Schemes

Database diagram (диаграмма базы данных)

A database schema is used to define the structure of data and the relationships between data elements. It describes the database tables (entities), the fields (attributes) they contain, and the relationships between tables. The schema serves as the foundation for the correct storage of data and the execution of queries within the system.

Use case diagram (диаграмма прецедентов)

Use case diagrams are used to identify the most important elements and processes that make up a system. The primary elements are called “actors” (эктор), and the processes are called “use cases” (прецедент). A use case diagram shows which actors interact with each use case.

Class diagram (диаграмма класса)

A class diagram is used to refine the use case diagram and define a detailed system design. A class diagram organizes the actors defined in the use case diagram into a set of interrelated classes. The relationship or association between classes can be either of the “is” or “has” type. Each class in the class diagram is capable of providing certain functionality. These are called class methods. In addition, each class has a set of attributes that uniquely identify the class.

Object diagram (диаграмма объекта)

An object diagram is a specific type of class diagram. An object represents the state of a class at a specific point in time during the system’s operation. An object diagram represents the states of the system’s various classes and the relationships or associations between them at a specific point in time.

State Diagram (диаграмма состояния)

As the name suggests, a state diagram illustrates the various states that objects in a system go through during their lifecycle. Objects in the system change their state in response to events occurring within the system. In addition, the state diagram also shows the transition of an object’s state from its initial state to its final state in response to events affecting the system.

Activity diagram (диаграмма активности)

The flow of processes within the system is described using a state transition diagram. Similar to a state diagram, a state transition diagram consists of actions, transitions, initial and final states, and blocking conditions.

Sequence diagram (диаграмма последовательности)

A sequence diagram illustrates how objects in a system interact with one another. A key feature of a sequence diagram is its temporal order. In other words, it depicts the precise interaction between objects step by step. The various objects in a sequence diagram communicate with one another by exchanging “messages.”

Collaboration diagram (диаграмма взаимодействия)

A collaboration diagram groups interactions between different objects. Interactions are numbered, which allows you to track the order in which they occur. A collaboration diagram allows you to identify all possible interactions that connect each object to the others.

Component diagram (диаграмма развертывания)

A component diagram depicts the high-level components that make up a system. This diagram shows which components constitute the system and how they are related to one another. Deployment diagram: A deployment diagram depicts the runtime elements of an application.

Use Case Diagram

An actor is a logically connected set of roles that are fulfilled in interaction through precedents or essence.

A use case is a description of a specific aspect of a system’s behavior from the user’s perspective.

Tags:

  • In graphic form, the ector is depicted as a “human figure.”Precedents are indicated within ellipses. Precedents and successors are connected by lines or arrows.The direction of the arrows indicates from whom the service(s) is/are being requested.
  • Pretsedendid on märgitud ellipsi sees. Pretsedendid ja ektorid on ühendatud joonte või nooltega.
  • Noolte suund näitab, kellelt teenust/teenuseid taotletakse.

We use Drawio:

Airport database:

Activity Diagram

This diagram is intended for general process modeling, but it can also be used to represent algorithms that solve smaller problems.

This image has an empty alt attribute; its file name is image-2-1024x704.png

Toiming – ümarate nurkadega kast. See on üks ülesanne või käsk. Üks nool tuleb sisse ja üks läheb välja.

Voog – nool, mis näitab liikumise suunda järgmise sammuni.

Otsustuspunkt – romb ehk valikukoht. Siin küsitakse küsimus ja valitakse sobiv tee (nagu if-lause).

Lõpp – must täpp, kus algoritm saab läbi.

Database Diagram

This image has an empty alt attribute; its file name is %D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82-25.png

Mudelid:

„entiteedid-seosed” – OLEMID – SEOSED

„entiteedid-atribuutid-seosed” – OLEMID – ATRIBUUDID – SEOSED

hierarhiline mudel – hierarhiline mudel

relatsiooniline mudel – relatsiooniline mudel / andmemudel

Olemid (Entities/Tables): Tavaliselt kujutatud ristkülikutena. Need tähistavad reaalset eluobjekti või kontseptsiooni, mille kohta andmeid kogutakse (nt LennujaamLennukLennufirmaPood).

Seosed (Relationships): Jooned, mis ühendavad tabeleid ja näitavad, kuidas andmed on omavahel seotud (nt üks lennufirma võib omada mitu lennukit ja üks lennujaam võib olla seotud mitme ettevõtte, poe ja tööplaaniga).

Atribuudid (Attributes/Fields): Need on olemi omadused ehk tabeli veerud (nt lennujaama nimi, linn, aadress või lennuki mudel).

Võtmed (Keys):

Primaarvõti (Primary Key – PK): Unikaalne tunnus, mis tuvastab iga kirje tabelis (nt jaamID tabelis lennujaam).

Välisvõti (Foreign Key – FK): Viide teise tabeli primaarvõtmele, mis loobki seose kahe tabeli vahel (nt firmaID tabelis lennuk, mis viitab tabelile lennufirma).

Class Diagram

Klassidiagramm on kogu süsteemi loogiline “arhitektuurne projekt”. See ei näita ainult seda, milliseid andmeid me säilitame, vaid ka seda, kuidas lennujaama infosüsteemi osad käituvad ja üksteisega suhtlevad.

Klassid (Classes): Kujutatakse ristkülikutena, mis on jagatud kolmeks sektsiooniks:

Nimi: Klassi nimetus (nt “Lennujaam”, “Lennuk”, “Lennufirma”, “Pood”).
Atribuudid (Attributes): Klassi omadused ehk andmed (nt jaama_nimi: String, linn: String, muudel: String).
Meetodid/Operatsioonid (Methods): Tegevused, mida see klass suudab teha (nt lisaLennuk(), muudaLennujaam(), kuvaLogi()).

Atribuudid (Attributes): Erinevalt andmebaasist määratakse klassidiagrammis ka andmete nähtavus:

  • (Public): Kõigile nähtav.
    – (Private): Nähtav ainult klassi siseselt.

(Protected): Nähtav klassile ja selle järeltulijatele.

Seosed (Relationships): Jooned, mis näitavad objektide vahelisi loogilisi ühendusi:

Assotsiatsioon (Association): Tavaline seos kahe klassi vahel (nt “Lennufirma” haldab “Lennukit”).
Pärilus (Inheritance/Generalization): Näitab “on-tüüpi” seost, kus alamklass pärib ülemklassi omadused.
Agregatsioon ja Kompositsioon: Näitavad “osa-tervik” suhet (nt “Lennujaam” koosneb seotud ettevõtetest, poodidest ja tööplaanidest).
Kordsus (Multiplicity): Näitab, mitu objekti seoses osaleb (nt 1 (üks), 0..* (null kuni mitu), 1..* (vähemalt üks)).

Vaade telefonile (valmistati figma’s):

Minesweeper

React project

What is React?

React is a JavaScript library for creating user interfaces, especially for developing single-page applications (SPAs) React project.
It allows you to split the user interface into small, reusable components.
React uses a virtual DOM to make applications fast and efficient.
State and props can be used to dynamically display and update data.
It is used in many large web applications today.

What is a component?

A component is an independent and reusable part of the UI that returns JSX in React.

What is state used for?

State is used to store and dynamically update component data, which causes the UI to automatically re-render.

Why is React useful for building web applications?

React makes code modular, fast, and easy to maintain, and allows you to create interactive user interfaces.

Important terms

  • JSX – JavaScript extension that allows you to write HTML-like syntax inside React.
  • Component – reusable UI part that returns JSX.
  • Props – data passed from a parent component to a child component.
  • State – internal variable data of a component.

React project creation

The most common way to start a React project is to use the create-react-app tool or the more modern Vite. (I used Visual Studio)

# Powershell
npx create-react-app movie-library
cd movie-library
# Powershell
npm start

Localhost:3000 is being used

about installing React: you can install it via docker but the easiest is just to download it via windows it’s down there:

The link: https://nodejs.org/en/download
you can just install via msi

Components which we are using:

after setting up our components there would be other stuff like other files and md file, you can just keep them :3

App.js – This is the main (root) component. It holds all the application logic, manages the state of the movie list, and calls other components.

MovieList.js – Selle komponendi ülesanne on võtta vastu filmide nimekiri (props-ina) ja kuvada need. See toimib n-ö konteinerina filmikaartidele.

MovieCard.js – This is the smallest component, responsible for displaying information about a specific movie (image, title, year). It is used repeatedly for each movie.

Using State to display movies

const movies = [
  { id: 1, title: "Inception", image: "https://m.media-amazon.com/images/I/912AErFSBHL._AC_SL1500_.jpg" },
  { id: 2, title: "Interstellar", image: "https://upload.wikimedia.org/wikipedia/en/b/bc/Interstellar_film_poster.jpg" },
  { id: 3, title: "The Matrix", image: "https://m.media-amazon.com/images/I/51EG732BV3L.jpg" },
  { id: 4, title: "Avatar", image: "https://m.media-amazon.com/images/I/41kTVLeW1CL._AC_.jpg" },
  { id: 5, title: "Titanic", image: "https://m.media-amazon.com/images/I/811lT7khIrL._SL1500_.jpg" }
];

If you want images displayed you will have to copy and paste from image url

State usage:

const [movieList, setMovieList] = useState(movies);

When the state changes, the UI is automatically re-rendered.

Adding a search function

To add a search function, we need two things:

  1. A place where the user can type (input field).
  2. A function that filters movies according to the text entered.

This is usually done by creating a new state variable searchTerm and using an API query or the filter() method.

Logic:

  • The user types a word (e.g., “Batman”) into the search box.
  • The onChange event updates the state of searchTerm.
  • Pressing the search button triggers a function that searches for movies (either from the API or from an existing array) whose title contains the word “Batman”.

Input:

<input
  type="text"
  placeholder="Search movie..."
  onChange={(e) => setSearch(e.target.value)}
/>

Filtering:

const filteredMovies = movieList.filter(movie =>
  movie.title.toLowerCase().includes(search.toLowerCase())
);

Results:

Storyboard

What is a storyboard?

Storyboard is a visual, sketched, or written representation of a website’s homepage layout and user flow, used to plan content, structure, and navigation before coding. It maps out key sections, header, hero area, content blocks, and footer—to ensure a logical user experience and streamline development.

What are they used for?

They are used to prevent visual mistakes, define the information architecture, and ensure user-centric design

Example of my index.html:

SEO configuration

What is SEO?

SEO, or Search Engine Optimization, helps search engines understand your content and users find your website. Proper SEO configuration affects whether and how users reach your website. SEO configuration

Google indexing

Google indexing is the process by which Google finds your page, processes its content, and adds it to its index.
Effective SEO helps ensure that your pages are indexed faster and correctly.

Plugin: Yoast SEO

The Yoast SEO plugin supports SEO configuration, allowing you to optimize titles, meta descriptions, keywords, and internal linking.

We use: Google Search Console

result for the SEO

XML Sitemap

This is a text file used to describe all URLs on a website. It may contain metadata information such as the last update time, importance, and language versions.

When we try to write our name, we find ourselves

SEO and optimization

Change the page and use at least 10 pages

Keys

PRIMARY KEY

PRIMARY KEY – is a column or group of columns in a table that uniquely identifies each row in the table. A primary key cannot be duplicated, which means that the same value cannot appear more than once in the table. A table cannot have more than one primary key.

The Aircraft table uses aircraftID as the primary key to uniquely identify each aircraft.
Each record must have a different ID – duplicates are not allowed.

CREATE TABLE Lennuk (
    lennukID INT AUTO_INCREMENT,   -- Unique ID for each aircraft
    mudel VARCHAR(50),             -- Name of the aircraft model
    istekohtade_arv INT,           -- Number of seats on the plane
    PRIMARY KEY (lennukID)         -- primary key
);

Rules for defining the primary key:

  • No two rows may have the same primary key value.
  • Each row must have a primary key value.
  • The primary key field cannot be empty.
  • The value of the primary key column must never be changed or updated if any foreign key references that primary key.

ALTERNATE KEY

ALTERNATE KEYS – is a column or group of columns in a table that uniquely identifies each row in the table. A table can have multiple primary key options, but only one can be designated as the primary key. All keys that are not primary keys are called alternate keys.

In AircraftAlternate, aircraftID is the primary key, while registration_number is an alternate key – a second unique identifier that was not selected as the primary key.

CREATE TABLE LennukAlternate (
    lennukID INT AUTO_INCREMENT,       -- Master key
    registreerimis_number VARCHAR(20) UNIQUE,  -- Alternative key
    PRIMARY KEY (lennukID)
);

CANDIDATE KEY

CANDIDATE KEY – In SQL, it is a set of attributes that uniquely identifies tuples in a table. A candidate key is a superkey that has no duplicate attributes. The primary key should be selected from among the candidate keys. Each table must have at least one candidate key. A table can have multiple candidate keys, but only one primary key.

Candidate key features:

  • It must contain unique values.
  • In SQL, a candidate key can have multiple attributes.
  • It must not contain null values.
  • It should contain the minimum number of fields to ensure uniqueness.
  • It must uniquely identify each record in the table.

In AircraftCandidate, both aircraftID and registration_number are candidate keys.
Either could be used as the primary key – we chose aircraftID.

CREATE TABLE LennukCandidate (
    lennukID INT AUTO_INCREMENT,       -- Possible master key
    registreerimis_number VARCHAR(20), -- Another possible key
    PRIMARY KEY (lennukID),            -- Selected as primary key
    UNIQUE (registreerimis_number)     -- Candidate key (second option)
);

(see sait oli selle hea näide)

FOREIGN KEY

FOREIGN KEY – is a column that creates a link between two tables. The purpose of a foreign key is to maintain data integrity and enable navigation between two different entities. It acts as a cross-reference between two tables, as it refers to the primary key of the other table.

In the FlightSchedule table, the flightID is a foreign key that references the Aircraft table.
This creates a relationship whereby each flight must belong to an existing aircraft.

CREATE TABLE LennuGraafik (
    lendID INT AUTO_INCREMENT,     -- Flight table ID
    lennukID INT,                  -- Connection to the Aircraft table
    kuupaev DATE,                  -- Flight date
    PRIMARY KEY (lendID),          -- Master key
    FOREIGN KEY (lennukID) REFERENCES Lennuk(lennukID) -- Foreign key
);

In this DBMS example, we have two tables: teachers and departments in a school. However, it is not possible to see which search works in which department.

In this table, we can add the foreign key Deptcode to the teacher’s name and create a link between the two tables.

This concept is also known as reference integrity.

COMPOUND KEY

COMPOUND KEY – There are two or more attributes that allow you to reliably identify a specific record. It is possible that each column is not unique in the database on its own. However, when combined with another column or columns, the combination of composite keys becomes unique. The purpose of a composite key in a database is to uniquely identify each record in a table.

In FlightCrew, flightID and pilotID together form a composite key.
This uniquely identifies which pilot is assigned to which flight.

CREATE TABLE LennuMeeskond (
    lendID INT,                    -- Flight ID
    pilootID INT,                  -- Pilot ID
    PRIMARY KEY (lendID, pilootID) -- Compound key
);

COMPOSITE KEY

COMPOSITE KEY – is a combination of two or more columns that uniquely identifies rows in a table. The combination of columns ensures uniqueness, although individual uniqueness is not guaranteed. Therefore, they are combined to uniquely identify records in a table.

The difference between a composite key and a composite key is that any part of a composite key can be a foreign key, but a composite key may or may not be part of a foreign key.

CREATE TABLE LennuAjad (
    lennukID INT,                  -- Airplane ID
    kuupaev DATE,                  -- Flight date
    PRIMARY KEY (lennukID, kuupaev) -- Composite key
);

LennuAjadis uses a composite key consisting of two columns: aircraft ID and date.
Together, these make each entry unique – an aircraft can fly on multiple days, but not twice on the same day.

SUPER KEY

SUPER KEY – A set of one or more attributes (columns) that uniquely identifies a record is known as a superkey. It may contain additional attributes that are not important in terms of uniqueness, but which nevertheless uniquely identify the row. For example, STUD_NO, (STUD_NO, STUD_NAME), etc.

  • A superkey is a group of one or more keys that identifies the uniqueness of rows in a table. It supports NULL values in rows.
  • A superkey may contain additional attributes that are not necessary to ensure uniqueness.
  • For example, if the column “STUD_NO” can uniquely identify a student, adding “SNAME” to it still forms a valid superkey, even though it is not necessary.

AircraftSuperkeys allow both the aircraftID and registration_number to uniquely identify each entry.
Any combination of columns that guarantees uniqueness is called a superkey.

CREATE TABLE LennukSuperkey (
    lennukID INT,
    registreerimis_number VARCHAR(20),
    mudel VARCHAR(50),
    PRIMARY KEY (lennukID)         -- This is one possible super key
);

UNIQUE KEY

UNIQUE KEY – ensures that all values in a column or group of columns are unique throughout the entire table. In addition, if a unique key is applied to multiple columns at once, every combination of values in those columns must be unique throughout the entire table.

Another feature of unique keys is that, unlike primary keys, they can contain NULL values, which can be unique. However, duplicate non-null values are not allowed.

Let’s look at a table called Student, using the desc command to display the column with a unique key:

desc Student;
+-----------------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+-----------------+-------------+------+-----+---------+-------+
| id | int(11) | YES | UNI | NULL | |
| name | varchar(60) | YES | | NULL | |
| national_id | bigint(20) | NO | | NULL | |
| birth_date | date | YES | | NULL | |
| enrollment_date | date | YES | | NULL | |
| graduation_date | date | YES | | NULL | |
+-----------------+-------------+------+-----+---------+-------+

Here, the column id is marked with the UNI key, which indicates that it is a unique key. In addition, we see the YES mark under the Null column, which means that the id column may contain NULL values.

Another example:

In the Pilot table, the personal code is marked as unique, which means that two pilots cannot have the same personal code.
This ensures data consistency without it being the primary key.

CREATE TABLE Piloot (
    pilootID INT AUTO_INCREMENT,   -- Piloodi ID
    isikukood VARCHAR(11) UNIQUE,  -- Iga piloodi isikukood on unikaalne
    nimi VARCHAR(100),             -- Pilot's name
    PRIMARY KEY (pilootID)         -- Master key
);

SIMPLE KEY

SIMPLE KEY – is a single attribute or column that uniquely identifies each row or record in a table. For example, a student ID can be a simple key in a student table, as no two students can have the same ID. A simple key is also called a primary key and usually has some restrictions, such as not allowing null values or duplicate values. A simple key can also be referenced by other tables as a foreign key to create a relationship between them.

Table The airport uses a simple key – one column (stationID) – as its primary key.
Each airport is identified by a unique ID.

CREATE TABLE Lennujaam (
    jaamID INT AUTO_INCREMENT,     -- Airport ID
    jaama_nimi VARCHAR(100),       -- Airport name
    linn VARCHAR(100),             -- town
    PRIMARY KEY (jaamID)           -- Simple key (one column)
);

Links

Choise of the plugin

Christmasify is an easy-to-use Christmas-themed plugin that adds snow, Santa Claus, decorations, music, and a beautiful Christmas-themed font to your WordPress website. All effects are switchable, so you can choose the ones you like! :DDD

As I said, it’s easy to use, so I’ll show you how!

After downloading this plugin, it will appear in the left menu, which looks like this:

Configure:

Simply click on the desired options:

Here you can choose from various options for snowflakes, from the activation date to the expiration date, when you want the plugin to stop working:

snowflakes:

Music:

Styles:

And more diffrent things

(And yes, you can donate to them <3)

Example:

and a joyful Christmas season!

time