Sheet in need for a certain group of programmers
Backend Documentation
1. SQLite3 Example (Async / Callback based)
index.js (sqlite3)
import express from 'express';
import cors from 'cors';
import sqlite3 from 'sqlite3';
const app = express();
const port = 8000;
app.use(cors());
app.use(express.json());
const db = new sqlite3.Database(`sakila.db`);
app.get('/', (req, res) => {
res.json({message: 'Welcome to the Film Portal Backend'});
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
app.get(`/films`, (req, res) => {
try {
let {limit, offset} = req.query;
if (!limit || !offset) {
limit = 50;
offset = 0;
}
if (typeof limit !== "number" || typeof offset !== "number") {
return res.status(400).json({error: "The parameters have invalid datatypes"})
}
const sql = `select * from film`
db.all(sql, [], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
return res.status(200).json(rows)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/films/:id`, (req, res) => {
try {
const { id } = req.params;
if (!id) {
return res.status(400).json({message: `invalid parameter`})
}
const sql = `select * from film where film_id = ?`
db.all(sql, [parseInt(id)], function(error, rows) {
if (error) {
return res.status(404).json({error: error.message})
}
if (rows.length > 0) {
return res.status(200).json(rows)
} else {
return res.status(404).json({error: "No such film."})
}
})
}
catch (error) {
return res.status(404).json({error: error.message})
}
})
app.post(`/films`, (req, res) => {
try {
const {
film_id, title, description, release_year, language_id,
original_language_id, rental_duration, rental_rate, length,
replacement_cost, rating, special_features
} = req.body
if (!film_id || !title || !description || !release_year || !language_id ||
!rental_duration || !rental_rate || !length || !replacement_cost ||
!rating || !special_features)
{
return res.status(400).json({error: `A required parameter is missing.`})
}
let date = new Date().toISOString()
console.log(date)
const sql = `insert into film (film_id, title, description, release_year, language_id, rental_duration, rental_rate, length,
replacement_cost, rating, special_features, last_update) values(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);`;
db.run(sql, [film_id, title, description, release_year, language_id, rental_duration, rental_rate, length, replacement_cost, rating, special_features, date], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
return res.status(201).json({id: this.lastID})
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/category-films/:category_id`, (req, res) => {
try {
const {category_id} = req.params;
const category_id_num = Number(category_id)
const sql_getCategory = `select film.* from film join film_category on film.film_id = film_category.film_id where film_category.category_id = ?`
db.all(sql_getCategory, [category_id_num], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
if (rows.length === 0) {
return res.status(200).json(rows);
}
const sql = `select * from film where special_features like ?`;
db.all(sql, [`%${rows[0].name}%`], function(error2, rows2) {
if (error2) {
return res.status(400).json({error: error2.message})
}
return res.status(200).json(rows2)
});
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/actors`, (req, res) => {
try {
let {limit, offset} = req.query;
if (!limit || !offset) {
limit = 50;
offset = 0;
}
const sql = `select * from actor`
db.all(sql, [], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
return res.status(200).json(rows)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/categories`, (req, res) => {
try {
const sql = `select * from category`
db.all(sql, [], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
return res.status(200).json(rows)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/customers`, (req, res) => {
try {
const sql = `select * from customer`
db.all(sql, [], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
return res.status(200).json(rows)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/languages`, (req, res) => {
try {
const sql = `select * from language`
db.all(sql, [], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
return res.status(200).json(rows)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/film-actors/:id`, (req, res) => {
try {
const { id } = req.params;
const num_id = Number(id)
const sql_getFilm = `select actor.first_name FROM actor JOIN film_actor ON actor.actor_id = film_actor.actor_id WHERE film_actor.film_id = ?`
db.all(sql_getFilm, [num_id], function(error, rows) {
if (error) {
return res.status(400).json({error: error.message})
}
return res.status(200).json(rows)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.post(`/actors`, (req, res) => {
try {
const {actor_id, first_name, last_name} = req.body;
if (!actor_id || !first_name || !last_name) {
return res.status(400).json({message: "Missing parameters"})
}
const sql = `insert into actor (actor_id, first_name, last_name, last_update) values(?, ?, ?, ?)`
let date = new Date().toISOString()
db.run(sql, [actor_id, first_name, last_name, date], function(error ,rows) {
if (error) {
return res.status(400).json({message: error.message})
}
return res.status(201).json(this.lastID)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
app.get(`/customer-rentals/:customer_id`, (req, res) => {
try {
const { customer_id } = req.params;
if (!customer_id) {
return res.status(400).json({message: "A required parameter is missing."})
}
const sql = `select rental_id, rental_date, return_date from rental where customer_id = ?`
db.all(sql, [customer_id], function(error, rows) {
if (error) {
return res.status(400).json(error.message)
}
return res.status(200).json(rows)
})
}
catch (error) {
return res.status(400).json({error: error.message})
}
})
2. Better-SQLite3 Example
index.js (better-sqlite3)
const cors = require('cors');
const express = require('express');
const Database = require('better-sqlite3');
const app = express();
app.use(express.json());
// TODO 1: CORS engedélyezése (cors csomag)
app.use(cors())
// TODO 3: mozihalo.db adatbázis használata
const db = new Database('mozihalo.db');
// TODO 5: GET / – üdvözlő JSON üzenet
app.get("/", (req, res) => {
res.json({message: "Üdvözlés"});
})
// TODO 6: GET /filmek
app.get("/filmek", (req, res) => {
try {
const sql = "select * from filmek";
const result = db.prepare(sql).all();
return res.status(200).json(result);
}
catch (error) {
return res.status(500).json(error.message);
}
});
// TODO 7: GET /vetites/:vazon (JOIN: fcim, mnev, varos)
app.get("/vetites/:vazon", (req, res) => {
try {
const vazon = req.params.vazon;
const sql = "SELECT filmek.fcim, mozik.mnev, mozik.varos FROM vetitesek inner join mozik on mozik.mazon = vetitesek.mazon inner join filmek on filmek.fazon = vetitesek.fazon where vetitesek.vazon = ?";
const result = db.prepare(sql).get(Number(vazon));
return res.status(200).json(result);
}
catch (error) {
return res.status(500).json(error.message);
}
});
// TODO 8: POST /filmek
app.post("/filmek", (req, res) => {
try {
const {fazon, fcim, rendezo, gyartasi_ev, mufaj, jegypont} = req.body;
const sql = "insert into filmek (fazon, fcim, rendezo, gyartasi_ev, mufaj, jegypont) values (?, ?, ?, ?, ?, ?)";
const result = db.prepare(sql).run(fazon, fcim, rendezo, gyartasi_ev, mufaj, jegypont);
return res.status(201).json({message: "Film sikeresen hozzáadva", id: result.lastInsertRowid});
}
catch (error) {
return res.status(500).json(error.message);
}
})
// TODO 9: DELETE /film/:fazon
app.delete("/film/:fazon", (req, res) => {
try {
const fazon = Number(req.params.fazon);
const sql = "delete from filmek where fazon = ?";
const result = db.prepare(sql).run(fazon);
return res.status(200).json({message: "Film sikeresen törölve"});
}
catch (error) {
return res.status(500).json(error.message);
}
})
// TODO 10: POST /mozik
app.post("/mozik", (req, res) => {
const {mazon, mnev, varos, termek_szama} = req.body;
try {
const sql = "insert into mozik (mazon, mnev, varos, termek_szama) values (?, ?, ?, ?)";
const result = db.prepare(sql).run(mazon, mnev, varos, termek_szama);
return res.status(201).json({message: "Mozi sikeresen hozzáadva", id: result.lastInsertRowid});
}
catch (error) {
return res.status(500).json(error.message);
}
})
// TODO 11: PATCH /vetites/:vazon
app.patch("/vetites/:vazon", (req, res) => {
try {
const vazon = Number(req.params.vazon);
const {fazon, mazon, kezdete} = req.body;
const sql = "update vetitesek set fazon = ?, mazon = ?, kezdete = ? where vazon = ?";
const result = db.prepare(sql).run(fazon, mazon, kezdete, vazon);
return res.status(200).json({message: "Vetítés sikeresen frissítve"});
}
catch (error)
{
return res.status(500).json(error.message);
}
})
// TODO 2: 8000-es port
const PORT = 8000;
app.listen(PORT, () => {
console.log(`Szerver fut: http://localhost:${PORT}`);
});
Frontend Documentation (Angular)
1. Prerequisites & Project-level Commands
Terminal commands
npm init -y
npm i @angular/cli
npx ng new "projekt neve"
npx ng generate component "komponens neve"
npx ng generate service "szervíz neve"
2. HTTP Client Setup (app.config.ts)
app.config.tsCopy
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient()
]
};
3. Student Service Implementation (tanulo.service.ts)
tanulo-service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export interface Tanulo {
oktazon: number;
nev: string;
hozott: number;
kpmagy: number;
kpmat: number;
}
@Injectable({
providedIn: 'root',
})
export class TanuloService {
private apiUrl = 'http://localhost:8000/tanulok';
constructor(private http: HttpClient) {}
getOsszesTanulo(): Observable {
return this.http.get(this.apiUrl);
}
deleteTanulo(oktazon: number): Observable {
return this.http.delete(`http://localhost:8000/tanulo/id/${oktazon}`);
}
addTanulo(tanulo: Tanulo): Observable {
return this.http.post("http://localhost:8000/tanulo", tanulo);
}
}
4. Main List Component (tanulok)
tanulok.ts
import { Component, OnInit } from '@angular/core';
import { TanuloService, Tanulo } from '../../services/tanulo-service';
import { CommonModule } from '@angular/common';
import { TanuloCard } from "../tanulo-card/tanulo-card";
@Component({
selector: 'app-tanulok',
standalone: true,
imports: [CommonModule, TanuloCard],
templateUrl: './tanulok.html',
styleUrl: './tanulok.css',
})
export class Tanulok implements OnInit {
TanulokLista: Tanulo[] = [];
constructor(private tanuloService: TanuloService) {}
ngOnInit() {
this.tanuloService.getOsszesTanulo().subscribe((data) => {
this.TanulokLista = data;
});
}
}
tanulok.htmlCopy
tanulok
@for (tanulo of TanulokLista; track tanulo.oktazon) {
5. Child Card Component (tanulo-card)
tanulo-card.ts
import { Component, Input, OnInit } from '@angular/core';
import { TanuloService, Tanulo } from '../../services/tanulo-service';
@Component({
selector: 'app-tanulo-card',
standalone: true,
imports: [],
templateUrl: './tanulo-card.html',
})
export class TanuloCard implements OnInit {
@Input() tanuloInfo: Tanulo = {} as Tanulo;
constructor(private tanuloService: TanuloService) {}
ngOnInit() { this.test(); }
test() { console.log(this.tanuloInfo.nev); }
torles() {
this.tanuloService.deleteTanulo(this.tanuloInfo.oktazon).subscribe({
next: () => { console.log("Sikeresen törölve"); },
error: (err) => { console.error(err); }
});
}
}
tanulo-card.htmlCopy
{{ tanuloInfo.nev }}
Oktatási azonosító: {{ tanuloInfo.oktazon }}
Hozott pontok: {{ tanuloInfo.hozott }}
KpMagy: {{ tanuloInfo.kpmagy }}
KpMat: {{ tanuloInfo.kpmat }}
6. Data Entry Form (Template-driven Form)
tanulo-form.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TanuloService } from '../../services/tanulo-service';
@Component({
selector: 'app-tanulo-form',
standalone: true,
imports: [FormsModule],
templateUrl: './tanulo-form.html',
})
export class TanuloForm {
constructor(private TanuloService: TanuloService) {}
onSubmit(form: any) {
console.log(form.value);
this.TanuloService.addTanulo(form.value).subscribe({
next: (response) => { console.log("Sikeres hozzáadás:", response); },
error: (err) => { console.error("Hiba a hozzáadás során:", err); }
});
}
}
tanulo-form.html
Új tanuló felvétele
7. Routing (Routing / Template Navigation)
A) app.routes.ts
app.routes.ts
import { Routes } from '@angular/router';
import { Main } from './components/main/main';
import { Tanulok } from './components/tanulok/tanulok';
import { TanuloForm } from './components/tanulo-form/tanulo-form';
export const routes: Routes = [
{ path: '', component: Main },
{ path: "tanulok", component: Tanulok },
{ path: 'tanuloForm', component: TanuloForm },
{ path: '**', redirectTo: '' }
];
B) Menu Component and Template
menu.ts
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';
@Component({
standalone: true,
selector: 'app-menu',
imports: [RouterOutlet, RouterLink],
templateUrl: './menu.html',
})
export class Menu {}
menu.html
Responsive Styling (Tailwind CSS)
Tailwind Play CDN (Include in the Head section)
HTML Head Snippet
1. Basic Breakpoints (Screen Sizes)
In Tailwind, responsiveness is handled with prefixes. Base classes apply on mobile, then we use breakpoints for larger sizes
2. Common Responsive Patterns & Best Practices
class="flex flex-col md:flex-row justify-between"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
class="w-full md:w-1/2 mx-auto"
Console Documentation (C#)
1. Creation of an abstract class
Hajo.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace HajosFeladat
{
public abstract class Hajo
{
public string Nev { get; set; }
public int Hossz { get; set; }
public int Suly { get; set; }
public int MaxSebesseg{ get; set; }
public int GyartasEve{ get; set; }
protected Hajo(string nev, int hossz, int suly, int maxSebesseg, int gyartasEve)
{
Nev = nev;
Hossz = hossz;
Suly = suly;
MaxSebesseg = maxSebesseg;
GyartasEve = gyartasEve;
}
public abstract void Haladas();
public abstract void Leiras();
public double megteszTavolsag(int tavolsag)
{
return tavolsag / MaxSebesseg;
}
public override string ToString()
{
return $"{Nev}, {Hossz}, {Suly}, {MaxSebesseg}";
}
}
}
2. Creation of a child class
Vitorlas.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace HajosFeladat
{
public class Vitorlas : Hajo
{
public int VitorlakSzama{ get; set; }
public Vitorlas(string nev, int hossz, int suly, int maxSebesseg, int gyartasEve, int vitorlakSzama) : base(nev, hossz, suly, maxSebesseg, gyartasEve)
{
VitorlakSzama = vitorlakSzama;
}
public override void Haladas()
{
Console.WriteLine( "A vitorlás a szél segítségével siklik a vízen");
}
public override void Leiras()
{
Console.WriteLine("Könnyű vitorlás hajó, tengeri kalandokhoz");
}
public override string ToString()
{
return $"{Nev}, {Hossz}, {Suly}, {MaxSebesseg}, {VitorlakSzama}";
}
}
}
3. Usage of the classes and testing
Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace HajosFeladat
{
internal class Program
{
static void Main(string[] args)
{
List hajok = new List();
Vitorlas vitrlas1 = new Vitorlas("a", 2, 3, 4, 5, 6);
Vitorlas vitorlas2 = new Vitorlas("b", 7, 8, 9, 10, 11);
Teher teher1 = new Teher("c", 12, 13, 14, 15, 16);
Teher teher2 = new Teher("d", 17, 18, 19, 20, 21);
hajok.Add(vitrlas1);
hajok.Add(vitorlas2);
hajok.Add(teher1);
hajok.Add(teher2);
// Teszt
foreach (var item in hajok)
{
Console.WriteLine(item.ToString());
}
}
}
}
WPF Documentation
1. Import the .csv file into the project
Import the .csv file into the project and make sure its Copy to Output Directory property is set to Copy always
2. The basic structure of the MainWindow.xaml
MainWindow.xaml
3. Setup of the script behind the Main Window
MainWindow.xaml.cs
using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Varazsitalok
{
/// x.ItalNeve).Distinct();
comboboxNevek.ItemsSource = nevek;
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private void comboboxNevek_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
string keresettNev = comboboxNevek.SelectedItem.ToString();
var talalat = VarazsitalLista.FindAll(x => x.ItalNeve == keresettNev);
datagrid.ItemsSource = talalat;
}
private void buttonOsszes_Click(object sender, RoutedEventArgs e)
{
datagrid.ItemsSource = VarazsitalLista;
}
private void gombMentes_Click(object sender, RoutedEventArgs e)
{
SaveFileDialog dialog = new SaveFileDialog();
dialog.ShowDialog();
if (dialog.FileName != "")
{
FileStream fs = new FileStream(dialog.FileName, FileMode.Create, FileAccess.Write);
StreamWriter sw = new StreamWriter(fs);
sw.WriteLine("ItalNeve;Hatóanyag;HatásIdőtartama;ErősségiSzint;Ritkaság");
foreach (Varazsital item in datagrid.ItemsSource as List)
{
sw.WriteLine($"{item.ItalNeve};{item.Hatoanyag};{item.HatasIdotartalma};{item.ErossegiSzint};{item.Ritkasag}");
}
sw.Close();
fs.Close();
}
}
}
}
4. A class for the project
Varazsital.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Varazsitalok
{
public class Varazsital
{
public string ItalNeve { get; set; }
public string Hatoanyag { get; set; }
public int HatasIdotartalma { get; set; }
public string ErossegiSzint { get; set; }
public string Ritkasag { get; set; }
public Varazsital(string italNeve, string hatoanyag, int hatasIdotartalma, string erossegiSzint, string ritkasag)
{
ItalNeve = italNeve;
Hatoanyag = hatoanyag;
HatasIdotartalma = hatasIdotartalma;
ErossegiSzint = erossegiSzint;
Ritkasag = ritkasag;
}
}
}