Advertising on the Telegram channel «Dasturlash hayoti️️ ️»

#JavaScript #API #RealProject #webdev #dasturlash_hayoti

👨‍💻 JavaScript + API: Real loyiha

Xabarlarni ro‘yxat qilib chiqarish + avtomatik yangilanish

Bu bosqichda:
- har bir xabar alohida chiqadi
- sahifa refreshsiz yangilanadi
- real chatlarga yana yaqinlashamiz

1️⃣ HTML — xabar yozish va chat oynasi

<!-- Xabar yozish -->
<input type="text" id="message" placeholder="Xabar yozing">
<button onclick="sendMessage()">Yuborish</button>

<!-- Chat ro'yxati -->
<ul id="chat"></ul>

ul — xabarlar ro‘yxat bo‘lib chiqishi uchun

2️⃣ JavaScript — xabar yuborish va ro‘yxatga qo‘shish

<script>
function sendMessage() {

  // Inputni chaqiramiz
  let input = document.getElementById("message");

  // Inputdagi qiymat
  let msg = input.value;

  // Bo‘sh xabar yuborilmasligi uchun
  if (msg === "") return;

  // Serverga xabar yuborish
  fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: JSON.stringify({ text: msg }),
    headers: {
      "Content-type": "application/json"
    }
  })
  .then(res => res.json())
  .then(data => {

    // Xabarni chat ro‘yxatiga qo‘shamiz
    addMessage(data.text);

    // Inputni tozalaymiz
    input.value = "";
  });
}
</script>

3️⃣ JavaScript — xabarni ro‘yxatga qo‘shish

<script>
function addMessage(text) {

  // Chat ro‘yxatini chaqiramiz
  let chat = document.getElementById("chat");

  // Yangi xabar uchun <li> yaratamiz
  let li = document.createElement("li");

  // Xabar matnini joylaymiz
  li.innerText = text;

  // Xabarni chatga qo‘shamiz
  chat.appendChild(li);
}
</script>

Endi:
- har bir xabar pastga qo‘shilib boradi
- eski xabarlar yo‘qolmaydi

Telegram, kommentlar, chatlar — barchasi shu mantiqda ishlaydi.

☑️ Natija
⏺️JavaScript → foydalanuvchi bilan ishlaydi
⏺️API → server bilan gaplashadi
⏺️Sayt → jonli bo‘ladi

➡️ Keyingi post:
Enter bosilganda yuborish + real-time’ga yana yaqinlashtiramiz 🔥

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

#JavaScript #API #RealProject #webdev #dasturlash_hayoti

➡️ Keyingi postda nima bo‘ladi?

Keyingi darsda:
⏺️ xabarlarni bitta emas, ro‘yxat qilib chiqaramiz
⏺️ yangi xabar kelganda sahifa avtomatik yangilanadi

Ya’ni:
❌ refresh yo‘q
☑️ real-time ishlash

Post JavaScript + API asosida, to‘liq real loyiha ko‘rinishida bo‘ladi.

👉 O‘tkazib yubormang!

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

👨‍💻 JavaScript + API: Real loyiha misoli

🔹 Chat qanday ishlaydi? (bosqichma-bosqich)

Bu yerda maqsad — xabar yuborish va serverdan kelgan javobni sahifada ko‘rsatish.
(Haqiqiy chatlar ham aynan shu mantiqda ishlaydi)

1️⃣ Foydalanuvchi xabar yozadi

<!-- Foydalanuvchi xabar yozadigan input -->
<input type="text" id="message" placeholder="Xabar yozing">

<!-- Tugma bosilganda sendMessage() funksiyasi ishlaydi -->
<button onclick="sendMessage()">Yuborish</button>

<!-- Xabar chiqadigan joy -->
<p id="chat"></p>

👉 Input — xabar yozish uchun
👉 Tugma — yuborish uchun

2️⃣ JavaScript xabarni olib, API ga yuboradi

<script>
function sendMessage() {

  // Input ichidagi yozilgan xabarni olamiz
  let input = document.getElementById("message");

  // Inputdagi matnni alohida o‘zgaruvchiga saqlaymiz
  let msg = input.value;

  // Serverga xabar yuboramiz
  fetch("https://jsonplaceholder.typicode.com/posts", {

    // POST — ma’lumot yuborish usuli
    method: "POST",

    // Yuborilayotgan xabarni JSON formatga o‘giramiz
    body: JSON.stringify({
      text: msg
    }),

    // Serverga JSON yuborayotganimizni aytamiz
    headers: {
      "Content-type": "application/json"
    }
  })

  // Serverdan kelgan javobni JSON holatga o‘tkazamiz
  .then(res => res.json())

  // Javob kelgach, ekranga chiqaramiz
  .then(data => {
    showMessage(data.text);

    // XABAR YUBORILGANDAN KEYIN INPUTNI TOZALAYMIZ
    input.value = "";
  });
}
</script>

🖥 JavaScript:
⏺️xabarni oldi
⏺️serverga yubordi
⏺️javobni kutdi

3️⃣ Serverdan kelgan ma’lumot ekranga chiqadi

<script>
function showMessage(text) {
  // <p id="chat"> ichiga matn joylaymiz
  document.getElementById("chat").innerText =
    "Xabar yuborildi: " + text;
}
</script>

👉 Sahifa yangilanmadi
👉 Xabar darhol ko‘rindi

JavaScript + API = jonli, tez va real web ilova

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

#JavaScript #API #RealProject #webdev #dasturlash_hayoti

⚠️⚠️⚠️

Diqqat, JavaScript o‘rganuvchilar!

Keyingi post:
❌ faqat nazariya emas
☑️ JavaScript + API orqali real loyiha bo‘ladi

Ya’ni:
⏺️serverdan ma’lumot olish
⏺️sahifani yangilamasdan ishlash
⏺️hammasi real kod bilan 💻

Shunaqa amaliy post kerakmi?
👍 Ha, JS + API bilan
🔥 Yo'q, shart emas

Qiziqish bo‘lsa — bosqichma-bosqich tushuntirib chiqaramiz

#JavaScript #API #webdev #2post #boshlovchilar

👨‍💻 JavaScript qayerda ishlatiladi?

2️⃣ API bilan ishlash (server bilan muloqot)

JavaScript serverdan ma’lumot olib kelish va uni sahifada ko‘rsatish uchun ishlatiladi. Sahifani yangilamasdan ham ma’lumot keladi.

🌐 Serverdan ma’lumot olish (fetch)

<button onclick="getData()">Ma’lumotni yuklash</button>
<p id="result"></p>

<script>
function getData() {
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(res => res.json())
    .then(data => {
      document.getElementById("result").innerText = data.title;
    });
}
</script>

☑️ Tugma bosildi → serverdan ma’lumot keldi → sahifada chiqdi

Real-time yangilanish nimaga o‘xshaydi?
📩 Chatda xabar kelishi
📰 Yangiliklar avtomatik yangilanishi
❤️ Like bosilganda soni darhol o‘zgarishi

👉 Bularning barchasi JavaScript + API orqali ishlaydi.

Ma’lumotni sahifada dinamik ko‘rsatish
Serverdan kelgan ma’lumot:
❌ qo‘lda yozilmaydi
❌ sahifa qayta yuklanmaydi

JavaScript:
☑️ o‘zi olib keladi
☑️ o‘zi joylashtiradi

JavaScript + API bo‘lmasa:
❌ sayt sekin
❌ har safar refresh kerak

JavaScript + API bilan esa:
☑️ tez
☑️ jonli
☑️ zamonaviy sayt

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

#JavaScript #frontend #webdev #boshlovchilar

👨‍💻 JavaScript qayerda ishlatiladi?

1️⃣ Interaktiv elementlar (real kod bilan)

JavaScript saytni jonlantiradi. Foydalanuvchi biror ish qilsa — JavaScript javob qaytaradi.

🔘 Tugma bosilganda nima bo‘ladi?

<button onclick="salom()">Bos</button>

<script>
function salom() {
  alert("Salom! Tugma bosildi 😊");
}
</script>

📝 Forma tekshirish (validation)

<input type="text" id="email" placeholder="Email">
<button onclick="tekshir()">Yuborish</button>

<script>
function tekshir() {
  let email = document.getElementById("email").value;

  if (email === "") {
    alert("Emailni kiriting!");
  }
}
</script>

👉 Email bo‘sh bo‘lsa → ogohlantirish chiqadi

🪟 Modal / yashirin blok ochish

<button onclick="och()">Batafsil</button>
<p id="text" style="display:none;">Qo‘shimcha ma’lumot</p>

<script>
function och() {
  document.getElementById("text").style.display = "block";
}
</script>

👉 Tugma bosildi → yashirin matn ochildi

JavaScript bo‘lmasa:
❌ tugma ishlamaydi
❌ forma tekshirilmaydi
❌ sayt jonsiz bo‘ladi

JavaScript bilan esa:
✅ sayt javob qaytaradi
✅ foydalanuvchi bilan muloqot bo‘ladi

➡️ Keyingi post: JavaScript + API (serverdan ma’lumot olish)

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

Diqqat, dasturchilar!

Keyingi postlarda sizga 👨‍💻 JavaScript real loyihalarda qayerda ishlatiladi degan mini-postlar seriyasini tayyorladik.

👇 Shu postlarni kutyapsizmi?
👍 Ha, men kutyapman!
😁 Yo‘q, lekin qiziqaman

♻️ Izohlarda belgilang va biz siz uchun hamma postlarni ketma-ket chiqaramiz!

#JavaScript #webdev #poll #dasturlash_hayoti

#Laravel #backend #webdev #dasturlash_hayoti

Laravel nima uchun qulay?

Laravel — backend’ni tez va tartibli qilish uchun yaratilgan framework.
Quyida nega ko‘pchilik Laravel’ni tanlashini oddiy tilda tushuntiramiz 👇

1️⃣ MVC arxitektura
⏺️Model — ma’lumotlar bilan ishlaydi
⏺️View — foydalanuvchi ko‘radigan qism
⏺️Controller — logika

📌 Kod aralashib ketmaydi, tushunish oson bo‘ladi.

2️⃣ Tayyor Auth (login/register)
⏺️Login
⏺️Ro‘yxatdan o‘tish
⏺️Parolni tiklash

📌 Noldan yozishga hojat yo‘q — vaqt tejaladi.

3️⃣ Xavfsizlik
⏺️SQL Injection’dan himoya
⏺️CSRF himoyasi
⏺️XSS’ga qarshi choralar

📌 Xavfsizlik Laravel’da avtomatik ko‘p joyda bor.

4️⃣ Toza va o‘qilishi oson kod
⏺️Aniq struktura
⏺️Naming qoidalari
⏺️Clean code’ga mos

📌 Bir necha oy o‘tsa ham kodni tushunish mumkin.

5️⃣ Tez ishlab chiqish
⏺️Migration
⏺️Seeder
⏺️Artisan komandalar

📌 Kam vaqt — katta natija.

Laravel:
☑️ Boshlovchilar uchun qulay
☑️ Professional loyihalar uchun kuchli
☑️ Katta jamoalar uchun mos

📌 Backend uchun eng zo‘r tanlovlardan biri.

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

#Laravel #itmemes #dasturlash_hayoti

😂 Boshlovchi va Laravel haqiqatlari

😄 Boshlaganda:
“Laravel oson ekan”

😐 1 hafta o‘tgach:
“Controller qaysi papkada edi?”

😵 2 hafta o‘tgach:
“Bu route qayerdan ishlayapti o‘zi?”

📌 Xavotir olmang — hamma Laravel o‘rganuvchi shu bosqichdan o‘tadi 😄

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

❗❗❗❗

25 KUNLIK JavaScript marafoni: React, Vue yoki Angular’ga tayyor bo‘ling!

Kuzatib boring 👉 @jonibek_turapov