Általánosságban
- A vizsga 240 perces, ennyi ideig intnezíven figyelni rendkívül fárasztó. Igyekezz pihenten megérkezni!
- Inkább jelenj meg 10 perccel korábban, mint egy perccel később.
- Figyelj a vizsgaszervezőre. Minden vizsgahelyen fontos a szabályok betartása.
- Ha megkaptad a feladatot, figyelmesen olvasd végig! Ha valami nem érthető célszerű azonnal jelezned!
- Nagyon fontos, hogy minden általad készített fájlt beadj. Javaslom jelölj ki magadnak egy mappát - ha a vizsgaszervező nem jelölte ki - és hozz létre az adott helyen mappát
mkdir vizsga cd vizsga mkdir forras - Ellenőrízd le, hogy a feladatleírásban szereplő források valóban a rendelkezésedre állnak!
- Indítsd el a megoldáshoz szükséges programokat és ellenőrízd a verziószámukat!
- XAMPP
- Apache
- MySql
- Visual Studio Community
- Visual Studio Code
- node.js
1. konzolos asztali alkalmazásfejlesztés C# nyelven 15 pont
A kapott forrás felhasználásával elemi algoritmus alkalmazásával egyszerű statisztikai mutatókat kell meghatározni és megjeleníteni egy mintának megfelelően.
dotnet new sln -n SajatMegoldas
dotnet new console --use-program-main -n SajatProjekt
dotnet sln SajatMegoldas.sln add "SajatProjekt\SajatProjekt.csproj"
2. grafikus asztali alkalmazásfejlesztés C# nyelven 10 pont
Grafikus felületen kell a kapott adatforrásban valamilyen változást végrehajtani. Létrehozhatsz új solution-t vagy a meglévőhöz hozzáadhatsz egyet.
Hozzáadhasz WinForm-os projectet:
dotnet new winforms -n MyGuiApp.WinForms
dotnet sln add "MyGuiApp.WinForms\MyGuiApp.WinForms.csproj"
vagy WPF-es projectet is:
dotnet new wpf -n MyGuiApp.WPF
dotnet sln add "MyGuiApp.WPF\MyGuiApp.WPF.csproj"
3. reszponzív viselkedésű weboldal készítés és formázás 10 pont
A feladat leírástól függően kérhetik külön statikus weblapok készítését, vagy a létrehozandó frontend alkalmazás formázására kaphatod meg ezt a 10 pontot.
4. backend programozás 15 pont
Adatbázis lekérdezést is végző, néhány végpontot tartalmazó REST API kiszolgáló létrehozása
mkdir backend
cd backend
npm i express mysql2 cors
npm pkg set type=module
echo import express from 'express'; > index.js
echo import cors from 'cors'; >> index.js
echo import mysql from 'mysql2'; >> index.js
echo. >> index.js
echo const app = express(); >> index.js
echo app.use(cors()); >> index.js
echo app.use(express.json()); >> index.js
echo. >> index.js
echo const db = mysql.createConnection(^{ >> index.js
echo host: 'localhost', >> index.js
echo user: 'root', >> index.js
echo password: '', >> index.js
echo database: '', >> index.js
echo port: 3306 >> index.js
echo }); >> index.js
echo. >> index.js
echo // vegpontok >> index.js
echo. >> index.js
echo app.get('/api/vegpontok', (req, res) =^> { >> index.js
echo db.query('SELECT * FROM vegpontok', (err, results) =^> { >> index.js
echo if (err) { >> index.js
echo console.error(err); >> index.js
echo res.status(500).send('Error retrieving vegpontok'); >> index.js
echo } else { >> index.js
echo res.json(results); >> index.js
echo } >> index.js
echo }); >> index.js
echo }); >> index.js
echo; >> index.js
echo app.get('/api/vegpontok/:id', (req, res) =^> { >> index.js
echo const id = req.params.id; >> index.js
echo db.query('SELECT * FROM vegpontok WHERE id = ?', [id], (err, results) =^> { >> index.js
echo if (err) { >> index.js
echo console.error(err); >> index.js
echo res.status(500).send('Error retrieving vegpont'); >> index.js
echo } else if (results.length === 0) { >> index.js
echo res.status(404).send('Vegpont not found'); >> index.js
echo } else { >> index.js
echo res.json(results[0]); >> index.js
echo } >> index.js
echo }); >> index.js
echo }); >> index.js
echo; >> index.js
echo app.post('/api/vegpontok', (req, res) =^> { >> index.js
echo const vegpont = req.body; >> index.js
echo db.query('INSERT INTO vegpontok SET ?', vegpont, (err, results) =^> { >> index.js
echo if (err) { >> index.js
echo console.error(err); >> index.js
echo res.status(500).send('Error creating vegpont'); >> index.js
echo } else { >> index.js
echo res.status(201).json({ id: results.insertId, ...vegpont }); >> index.js
echo } >> index.js
echo }); >> index.js
echo }); >> index.js
echo; >> index.js
echo app.put('/api/vegpontok/:id', (req, res) =^> { >> index.js
echo const id = req.params.id; >> index.js
echo const vegpont = req.body; >> index.js
echo db.query('UPDATE vegpontok SET ? WHERE id = ?', [vegpont, id], (err, results) =^> { >> index.js
echo if (err) { >> index.js
echo console.error(err); >> index.js
echo res.status(500).send('Error updating vegpont'); >> index.js
echo } else if (results.affectedRows === 0) { >> index.js
echo res.status(404).send('Vegpont not found'); >> index.js
echo } else { >> index.js
echo res.json({ id, ...vegpont }); >> index.js
echo } >> index.js
echo }); >> index.js
echo }); >> index.js
echo; >> index.js
echo app.delete('/api/vegpontok/:id', (req, res) =^> { >> index.js
echo const id = req.params.id; >> index.js
echo db.query('DELETE FROM vegpontok WHERE id = ?', [id], (err, results) =^> { >> index.js
echo if (err) { >> index.js
echo console.error(err); >> index.js
echo res.status(500).send('Error deleting vegpont'); >> index.js
echo } else if (results.affectedRows === 0) { >> index.js
echo res.status(404).send('Vegpont not found'); >> index.js
echo } else { >> index.js
echo res.status(204).send(); >> index.js
echo } >> index.js
echo }); >> index.js
echo }); >> index.js
echo; >> index.js
echo db.connect((err) =^> { >> index.js
echo if (err) { >> index.js
echo console.error('Nem sikerült kapcsolódni az adatbázishoz:', err.message); >> index.js
echo process.exit(1); // Kilép a program, ha hiba van >> index.js
echo } >> index.js
echo; >> index.js
echo console.log('Sikeres adatbázis kapcsolat.'); >> index.js
echo; >> index.js
echo app.listen(3000, () =^> { >> index.js
echo console.log('Server is running on http://localhost:3000'); >> index.js
echo }); >> index.js
echo }); >> index.js
echo Kesz! A backend projekt elkeszult.
echo Inditas: node index.js
5. frontend programozás 15 pont
HTML / CSS /JavaScript / REST API kliens
npm create vite@latest frontend -- --template react
y
cd frontend
npm install
npm pkg set type=module
npm install axios react-router-dom
npm install react-bootstrap bootstrap bootstrap-icons
src/App.jsx
import { BrowserRouter } from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min'
import 'bootstrap-icons/font/bootstrap-icons.css'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import CRUD from './pages/CRUD'
export default function App() {
return (
<BrowserRouter>
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<Link className="navbar-brand" to="/">Weboldalam</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link" to="/">Főoldal</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/crud">CRUD</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">Rólunk</Link>
</li>
</ul>
</div>
</div>
</nav>
<div className="container mt-4">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/crud" element={<CRUD />} />
<Route path="*" element={<h1 className="text-danger">404 - Az oldal nem található!</h1>} />
</Routes>
</div>
</div>
</BrowserRouter>
)
}
src/pages/Home.jsx
const Home = () => {
return (
<div>
<h1>Főoldal</h1>
<p>Ez itt a főoldal tartalma.</p>
</div>
)
}
export default Home
src/pages/About.jsx
const About = () => {
return (
<div>
<h1>Rólunk</h1>
<p>Ez egy példa weboldal, amely bemutatja a React Router használatát.</p>
<p>Használja a navigációs menüt a különböző oldalak közötti navigáláshoz.</p>
</div>
)
}
export default About
src/pages/CRUD.jsx
import React, { useEffect, useState } from 'react'
import axios from 'axios'
const API_URL = 'http://localhost:3000' // Vagy a sajat API-d
export default function CRUD() {
const [emberek, setEmberek] = useState([])
const [ujEmber, setUjEmber] = useState({ nev: '', kor: '' })
const [szerkesztesId, setSzerkesztesId] = useState(null)
const [szerkesztett, setSzerkesztett] = useState({ nev: '', kor: '' })
useEffect(() => {
lekertEmberek()
}, [])
const lekertEmberek = async () => {
try {
const res = await axios.get(API_URL)
setEmberek(res.data)
} catch (err) {
console.error('Lekérési hiba:', err)
}
}
const hozzaadas = async () => {
try {
await axios.post(API_URL, ujEmber)
setUjEmber({ nev: '', kor: '' })
lekertEmberek()
} catch (err) {
console.error('Hozzáadási hiba:', err)
}
}
const mentes = async (id) => {
try {
await axios.put(`${API_URL}/${id}`, szerkesztett)
setSzerkesztesId(null)
setSzerkesztett({ nev: '', kor: '' })
lekertEmberek()
} catch (err) {
console.error('Frissítési hiba:', err)
}
}
const torles = async (id) => {
try {
await axios.delete(`${API_URL}/${id}`)
lekertEmberek()
} catch (err) {
console.error('Törlési hiba:', err)
}
}
return (
<div>
<h1>Emberek kezelése</h1>
{/* Új ember hozzáadása */}
<div>
<h3>Új ember</h3>
<input
placeholder="Név"
value={ujEmber.nev}
onChange={(e) => setUjEmber({ ...ujEmber, nev: e.target.value })}
/>
<input
placeholder="Kor"
type="number"
value={ujEmber.kor}
onChange={(e) => setUjEmber({ ...ujEmber, kor: e.target.value })}
/>
<button
style={{ backgroundColor: 'green', color: 'white' }}
onClick={hozzaadas}
>
Hozzáadás
</button>
</div>
<hr />
{/* Emberek listázása */}
{emberek.map((ember) => (
<div key={ember.id} style={{ border: '1px solid gray', margin: '10px', padding: '10px' }}>
{szerkesztesId === ember.id ? (
<div>
<input
value={szerkesztett.nev}
onChange={(e) => setSzerkesztett({ ...szerkesztett, nev: e.target.value })}
/>
<input
type="number"
value={szerkesztett.kor}
onChange={(e) => setSzerkesztett({ ...szerkesztett, kor: e.target.value })}
/>
<button
style={{ backgroundColor: 'orange', color: 'white' }}
onClick={() => mentes(ember.id)}
>
Mentés
</button>
<button
style={{ backgroundColor: 'gray', color: 'white' }}
onClick={() => setSzerkesztesId(null)}
>
Mégse
</button>
</div>
) : (
<div>
<h3>{ember.nev}</h3>
<p>Kor: {ember.kor}</p>
<button
style={{ backgroundColor: 'blue', color: 'white' }}
onClick={() => {
setSzerkesztesId(ember.id)
setSzerkesztett({ nev: ember.nev, kor: ember.kor })
}}
>
Szerkesztés
</button>
<button
style={{ backgroundColor: 'red', color: 'white', marginLeft: '10px' }}
onClick={() => torles(ember.id)}
>
Törlés
</button>
</div>
)}
</div>
))}
</div>
)
}