cemtopkaya · June 15, 2025 06:43
diff --git a/controller.js b/controller.js
 // controller.js KONTROLLER Katmanı (Beyin)
 class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.view.onLoadUsersClick(this.handleLoadUsers.bind(this));
  }

  async handleLoadUsers() {
    try {
      const users = await this.model.getUsers();
      this.view.renderUsers(users);
    } catch (err) {
      this.view.renderError('Kullanıcılar yüklenemedi.');
    }
  }
 }
diff --git a/dosya-yapisi.sh b/dosya-yapisi.sh
 /model.js
 /view.js
 /controller.js
 /index.html
diff --git a/index.html b/index.html
 <!-- index.html HTML View Katmanı -->
 <!DOCTYPE html>
 <html lang="tr">
 <head>
  <meta charset="UTF-8">
  <title>MVC Örneği</title>
 </head>
 <body>
  <h1>Kullanıcı Listesi</h1>
  <button id="load-users">Kullanıcıları Yükle</button>
  <ul id="user-list"></ul>

  <script src="model.js"></script>
  <script src="view.js"></script>
  <script src="controller.js"></script>
  <script>
    const app = new UserController(new UserModel(), new UserView());
  </script>
 </body>
 </html>
diff --git a/model.js b/model.js
 // model.js MODEL Katmanı
 class UserModel {
  async getUsers() {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    return res.json();
  }
 }
diff --git a/mvp ile mvc arasındaki fark.md b/mvp ile mvc arasındaki fark.md
diff --git a/view.js b/view.js
 // view.js HTML View Katmanı ile Etkileşimi
 class UserView {
  constructor() {
    this.loadButton = document.getElementById('load-users');
    this.userList = document.getElementById('user-list');
  }

  onLoadUsersClick(callback) {
    this.loadButton.addEventListener('click', callback);
  }

  renderUsers(users) {
    this.userList.innerHTML = '';
    users.forEach(user => {
      const li = document.createElement('li');
      li.textContent = user.name;
      this.userList.appendChild(li);
    });
  }

  renderError(message) {
    this.userList.innerHTML = `<li style="color:red;">${message}</li>`;
  }
 }
	// controller.js KONTROLLER Katmanı (Beyin)
	class UserController {
	constructor(model, view) {
	this.model = model;
	this.view = view;

	this.view.onLoadUsersClick(this.handleLoadUsers.bind(this));
	}

	async handleLoadUsers() {
	try {
	const users = await this.model.getUsers();
	this.view.renderUsers(users);
	} catch (err) {
	this.view.renderError('Kullanıcılar yüklenemedi.');
	}
	}
	}
	<!-- index.html HTML View Katmanı -->
	<!DOCTYPE html>
	<html lang="tr">
	<head>
	<meta charset="UTF-8">
	<title>MVC Örneği</title>
	</head>
	<body>
	<h1>Kullanıcı Listesi</h1>
	<button id="load-users">Kullanıcıları Yükle</button>
	<ul id="user-list"></ul>

	<script src="model.js"></script>
	<script src="view.js"></script>
	<script src="controller.js"></script>
	<script>
	const app = new UserController(new UserModel(), new UserView());
	</script>
	</body>
	</html>
	// model.js MODEL Katmanı
	class UserModel {
	async getUsers() {
	const res = await fetch('https://jsonplaceholder.typicode.com/users');
	return res.json();
	}
	}
Özellik	MVP	MVC
Olay Dinleme	View içinde Presenter’a verilir	View içinde Controller’a verilir
View-Controller ilişkisi	Pasif View → Presenter yönlendirir	View → Controller direkt tetikler
Kim DOM’a müdahale eder?	View	View
İş akış yönü	View → Presenter → Model → View	View → Controller → Model → View
	// view.js HTML View Katmanı ile Etkileşimi
	class UserView {
	constructor() {
	this.loadButton = document.getElementById('load-users');
	this.userList = document.getElementById('user-list');
	}

	onLoadUsersClick(callback) {
	this.loadButton.addEventListener('click', callback);
	}

	renderUsers(users) {
	this.userList.innerHTML = '';
	users.forEach(user => {
	const li = document.createElement('li');
	li.textContent = user.name;
	this.userList.appendChild(li);
	});
	}

	renderError(message) {
	this.userList.innerHTML = `<li style="color:red;">${message}</li>`;
	}
	}