JSP applikasiyalarında HTML-in rolu

JSP ilə HTML

JSP (JavaServer Pages) ilə veb tətbiqlər hazırlamağa başlayanda, diqqətimiz adətən Java koduna, servlet life circleyə və server tərəfi məntiqinə yönəlir. Ancaq unutmayaq ki, istifadəçinin qarşısına çıxan və serverlə qarşılıqlı əlaqəni təmin edən əsas qat HTML-dir. Bəli, hətta "sadəcə" HTML belə, backend proseslərinizin necə işlədiyini dərindən təsir edə bilir. Odur ki, gəlin JSP prizmasından HTML-in vacib elementlərinə nəzər salaq, xüsusilə də backend üçün kritik olan hissələrə fokuslanaraq.

HTML Sənədinin Əsas Strukturu: Təməl Qaydalar

Hər bir veb səhifənin əsasını HTML strukturu təşkil edir. Bu, brauzerə səhifənin necə qurulduğunu izah edən bir iskeletdir:

basic-structure.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Səhifə Başlığı</title>
  </head>
  <body>
    <h1>Əsas Başlıq</h1>
    <p>Bu bir paraqrafdır.</p>
  </body>
</html>

<!DOCTYPE html>: Sənədin tipini müəyyən edir. Modern veb üçün bu, standartdır.
<html>: Bütün HTML məzmununu əhatə edən kök element.
<head>: Səhifə haqqında metadata (başlıq, xarakter kodlaması, stil cədvəlləri, skriptlər) saxlayır. Bu hissə istifadəçiyə birbaşa görünmür.
<body>: Səhifənin görünən məzmununu (mətn, şəkil, cədvəl, forma və s.) ehtiva edir.

Əsas Məzmun Teqləri:

Məzmunu strukturlaşdırmaq üçün istifadə olunan bəzi fundamental teqlər:

<h1> - <h6>: Başlıqlar. <h1> ən yüksək səviyyəli başlığı, <h6> isə ən aşağı səviyyəli başlığı təmsil edir. İyerarxiyanı qorumaq SEO və oxunaqlılıq üçün önəmlidir.
<p>: Paraqraf. Mətn bloklarını ayırmaq üçün istifadə olunur.
<a>: Link (Anchor). Səhifələr və ya resurslar arasında keçid yaratmaq üçündür.
<img>: Şəkil. src atributu şəklin ünvanını, alt atributu isə şəkil yüklənmədikdə və ya ekran oxuyucuları üçün alternativ mətni təyin edir.
<div>: Bölmə (Division). Məzmunu qruplaşdırmaq və CSS ilə stil vermək üçün ümumi konteynerdir.
<span>: Mətnin kiçik bir hissəsini qruplaşdırmaq və ya ona stil vermək üçün istifadə olunur (adətən sətir daxilində).

Linklər (`<a>`): Naviqasiyanın Əsası

Linklər vebin ruhudur. <a> teqi href atributu ilə hədəf ünvanı göstərir:

links.html

<a href="/profile">Profilimə Bax</a>
<a href="<https://google.com>" target="_blank">Google Axtarış</a>

JSP kontekstində linklər tez-tez servletlərə və ya digər JSP səhifələrinə yönləndirmək üçün istifadə olunur. URL-lərin dinamik şəkildə (<%= request.getContextPath() %>/profile kimi) generasiyası adi praktikadır.

Cədvəllər (`<table>`): Strukturlaşdırılmış Məlumat

Məlumatları səliqəli şəkildə təqdim etmək üçün cədvəllər əvəzsizdir. Əsas teqlər:

<table>: Cədvəli əhatə edir.
<tr>: Cədvəl sətri (Table Row).
<th>: Başlıq xanası (Table Header). Adətən qalın və mərkəzlənmiş olur.
<td>: Məlumat xanası (Table Data).
<thead>, <tbody>, <tfoot>: Cədvəlin başlığını, gövdəsini və altlığını qruplaşdırmaq üçün istifadə olunur (struktur və bəzən stil üçün faydalıdır).

table.html

<table>
  <thead>
    <tr>
      <th>Ad</th>
      <th>Soyad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>İlqar</td>
      <td>Əliyev</td>
    </tr>
  </tbody>
</table>

➡️ JSP-də tez-tez verilənlər bazasından alınan məlumatları <table> içərisində dövr (for loop və ya JSTL <c:forEach>) vasitəsilə dinamik şəkildə göstərmək üçün istifadə olunur.

Iframe (`<iframe>`): Daxili Pəncərələr

<iframe> mövcud HTML səhifəsinin içinə başqa bir HTML sənədini yerləşdirməyə imkan verir.

iframe.html

<iframe src="/external-content.html" width="600" height="400"></iframe>

src: Daxil ediləcək səhifənin URL-i.
width, height: Çərçivənin ölçüləri.

⚠️ Diqqət: <iframe> istifadə edərkən təhlükəsizlik risklərinə (məsələn, Clickjacking) qarşı diqqətli olmaq lazımdır. Müasir brauzerlərdə sandbox atributu kimi təhlükəsizlik mexanizmləri mövcuddur.

Formlar (`<form>`): Backend ilə Communication

Bura JSP developer üçün ən kritik HTML hissəsidir. Formalar istifadəçidən məlumat toplamaq və onu serverə (yəni sizin JSP/Servlet tətbiqinizə) göndərmək üçün əsas mexanizmdir.

form.html

<form action="/processUserData" method="post">
</form>

<form>: Form elementlərini əhatə edən konteyner.
action: Form məlumatlarının göndəriləcəyi URL.
method: Məlumatların serverə necə göndəriləcəyini təyin edən HTTP metodu.

GET və POST fərqləri:

GET: Məlumatları URL-in sonuna əlavə edərək göndərir.
POST: Məlumatları HTTP sorğusunun gövdəsində göndərir.

Form Elementləri: Məlumat Girişi Nöqtələri

<input> teqi: Ən çox yönlü form elementidir. type atributu onun davranışını dəyişir:

text, password, email, number, date
checkbox, radio, file, hidden
submit, reset, button

➡️ Ən Vacib Atribut: name

servlet/FormParamExample.java

// Servlet içərisində:
String username = request.getParameter("istifadeci_adi");
String password = request.getParameter("parol");
String[] interests = request.getParameterValues("maraqlar");

Əgər name atributu təyin edilməzsə, həmin elementin dəyəri serverə göndərilməyəcək!

`<textarea>`: Çoxsətirli mətn girişi

textarea.html

<textarea name="comment" rows="4" cols="50"></textarea>

`<select>` və `<option>`: Açılan siyahı (Dropdown)

select.html

<select name="country">
  <option value="">Ölkə seçin</option>
  <option value="AZ">Azərbaycan</option>
  <option value="TR">Türkiyə</option>
  <option value="US">ABŞ</option>
</select>

`<button>`: İstifadəçi Təsiri

<button type="submit">Göndər</button>
<button type="reset">Sıfırla</button>
<button type="button">Kliklə</button>

`enctype` Atributu

Form məlumatlarının necə kodlaşdırılacağını təyin edir.

application/x-www-form-urlencoded (default)
multipart/form-data – fayl yükləmələri üçün vacibdir
text/plain – əsasən debug məqsədilə

⚠️ Frontend vs Backend Validation: HTML5 form yoxlamaları köməkçi olsa da, təhlükəsizliyi təmin etmək üçün backend yoxlaması mütləqdir.

Nəticə

Gördüyünüz kimi, HTML sadəcə "görünüş" deyil. Xüsusilə form elementləri, name atributları, method və action seçimləri sizin backend kodunuzun (JSP/Servlet) necə məlumat qəbul edəcəyini və emal edəcəyini birbaşa müəyyən edir. Fayl yükləmələri üçün enctype kimi detallar isə backend məntiqinin düzgün qurulması üçün kritikdir.

JSP ilə effektiv işləmək üçün HTML-in bu fundamental, xüsusilə də backend ilə birbaşa əlaqəli olan aspektlərini möhkəm bilmək şərtdir. Bu biliklər sizə daha təmiz, təhlükəsiz və funksional veb tətbiqlər yaratmağa imkan verəcək.