### Temel HTML, CSS ve JavaScript Bilgisi
#### HTML (Hypertext Markup Language)
HTML, web sayfalarını yapılandırmak için kullanılan bir işaretleme dilidir. HTML, sayfa yapısını tanımlar ve içeriği düzenler.
**Temel HTML Örneği**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>This is a paragraph about us.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
```
- **`<header>`**: Sayfanın başlık kısmını tanımlar.
- **`<nav>`**: Navigasyon menüsünü oluşturur.
- **`<main>`**: Ana içeriği belirtir.
- **`<footer>`**: Sayfanın alt kısmını içerir.
#### CSS (Cascading Style Sheets)
CSS, HTML elemanlarının görünümünü ve düzenini tanımlar. CSS ile stil ve düzen ayarlamaları yapılır.
**Temel CSS Örneği**
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 1em;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
main {
padding: 20px;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
```
- **`font-family`**: Yazı tipi ayarları.
- **`background-color`**: Arka plan rengini belirler.
- **`text-align`**: Metin hizalamasını ayarlar.
- **`padding`**: İç boşluk ekler.
- **`margin`**: Dış boşluk ekler.
#### JavaScript
JavaScript, web sayfalarına dinamik içerik eklemek için kullanılan bir programlama dilidir. JavaScript ile kullanıcı etkileşimleri ve veri işleme yapılabilir.
**Temel JavaScript Örneği**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
<script>
function showAlert() {
alert('Hello, World!');
}
</script>
</head>
<body>
<button onclick="showAlert()">Click Me</button>
</body>
</html>
```
- **`<script>`**: JavaScript kodlarını içerir.
- **`onclick`**: Butona tıklandığında çalışacak JavaScript fonksiyonunu belirtir.
- **`alert()`**: Tarayıcıda bir uyarı penceresi gösterir.
---
### Thymeleaf veya JSP ile Java ile Entegre Frontend Geliştirme
#### Thymeleaf
Thymeleaf, Java tabanlı web uygulamaları için modern bir şablon motorudur. HTML dosyalarına dinamik içerik eklemek için kullanılır.
**Thymeleaf Örneği**
**`src/main/resources/templates/userForm.html`**
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>User Form</title>
</head>
<body>
<form th:action="@{/user}" th:object="${user}" method="post">
<label>Name:</label>
<input type="text" th:field="*{name}" />
<label>Email:</label>
<input type="text" th:field="*{email}" />
<button type="submit">Submit</button>
</form>
</body>
</html>
```
- **`th:action`**: Formun gönderileceği URL.
- **`th:object`**: Formun bağlı olduğu model nesnesi.
- **`th:field`**: Model alanları ile form alanlarını bağlar.
#### JSP (JavaServer Pages)
JSP, Java web uygulamaları için sunucu tarafı dinamik web sayfaları oluşturur. HTML içine Java kodu yerleştirmenizi sağlar.
**JSP Örneği**
**`src/main/webapp/WEB-INF/views/userForm.jsp`**
```jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>User Form</title>
</head>
<body>
<form action="user" method="post">
<label>Name:</label>
<input type="text" name="name" />
<label>Email:</label>
<input type="text" name="email" />
<button type="submit">Submit</button>
</form>
</body>
</html>
```
- **`<%@ taglib>`**: JSTL (JSP Standard Tag Library) kullanımı.
- **`<form action="user">`**: Formun gönderileceği URL.
---
### AJAX ve RESTful Servis ile İletişim
AJAX (Asynchronous JavaScript and XML), web sayfalarına dinamik içerik eklemek ve arka planda veri göndermek için kullanılır. RESTful servisler, HTTP üzerinden veri alışverişini sağlar.
#### AJAX Kullanımı
AJAX, JavaScript ile asenkron veri iletişimi sağlar. Bu, web sayfalarının tamamen yeniden yüklenmesine gerek kalmadan güncellenmesini sağlar.
**AJAX Örneği**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
document.getElementById("data").innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="loadData()">Load Data</button>
<div id="data"></div>
</body>
</html>
```
- **`XMLHttpRequest`**: Asenkron HTTP istekleri yapmak için kullanılır.
- **`onload`**: Yanıt alındığında çalışacak fonksiyon.
#### RESTful Servis ile AJAX İletişimi
RESTful servisler, HTTP istekleri ile veri almanıza veya göndermenize olanak sağlar. AJAX ile RESTful servisler arasında veri alışverişi yapabilirsiniz.
**RESTful Servis Örneği (Spring Boot Controller)**
**`UserController.java`**
```java
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api")
public class UserController {
@GetMapping("/user")
public User getUser() {
User user = new User();
user.setName("John Doe");
user.setEmail("john.doe@example.com");
return user;
}
}
```
**AJAX ile RESTful Servis Tüketimi**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX with REST</title>
<script>
function fetchUser() {
fetch("/api/user")
.then(response => response.json())
.then(data => {
document.getElementById("user").innerHTML =
`Name: ${data.name}<br>Email: ${data.email}`;
});
}
</script>
</head>
<body>
<button onclick="fetchUser()">Fetch User</button>
<div id="user"></div>
</body>
</html>
```
- **`fetch`**: Modern bir JavaScript API'si ile HTTP istekleri yapar.
- **`.then()`**: Yanıt verilerini işlemek için kullanılır.
---
### Özet
Temel HTML, CSS ve JavaScript bilgisi, web sayfalarının yapılandırılması ve stil verilmesi için gereklidir. Thymeleaf ve JSP, Java ile entegre
frontend geliştirmeye olanak sağlar. AJAX, web sayfalarına dinamik içerik eklemek için kullanılırken, RESTful servisler HTTP üzerinden veri alışverişini yönetir. Bu teknolojiler, etkili ve dinamik web uygulamaları oluşturmak için önemli araçlardır.