Sahifalar

Platon Platformasida o'ziga xos dizaynda sahifa qo'shish bo'limi

---

Sahifalar

---

Platon platformasining Sahifalar modulidan rejalashtirilayotgan web-sahifa sahifalarini tuzish yoki shakllantirish uchun foydalaniladi. Ushbu shakllantirilayotgan sahifani foydalanuvchi talablariga ko'ra moslashtirilishi imkoniyati mavjud.

Sahifa yaratish

---

Sahifa yaratish uchun Platon platformasi navigatsiya panelining Sahifalar bo'limiga o'tiladi. Ushbu ochilgan sahifada Platon platformasida ilgari ochilgan sahifalar ro'yxati aks etadi.

Ushbu sahifa pastida joylashgan Qo'shish tugmasi bosiladi va quyidagi oyna forma ochiladi:

Ushbu oyna quyidagi maydonlardan iborat:

• name: sahifaning nomi (shuningdek, sahifani ochish uchun URL sifatida ham ishlatiladi);

pageName

• data_source: sahifadagi aks ettiriladigan ma'lumotlar axborotlar bazasidan qaysi instrument (sql, platon_api) yordamida olib kelinishi belgilanadi. data_source selectidagi sql elementi tanlanganda quyidagi oyna ko'rinadi:

data_source selectidagi platon_api elementi tanlanganda quyidagi oyna ko'rinadi:

• state: sahifaning holatini (aktiv, yashirin va arxivlangan) belgilash uchun ishlatiladi;
• note: note ning vazifasi siz yozib qo'ygan izohni yoki eslatmani yozib qoyish uchun mo'ljallangan.
• title 1,2,3,4: sahifaning nomi (1-kiril alifbosi asosidagi o'zbek tili, 2-rus tili, 3-lotin alifbosi asosidagi o'zbek tili, 4-ingliz tili);
• is_public: ushbu svitch belgilanganida, yaratilayotgan sahifani avtorizasiyadan o'tmagan internet foydalanuvchilari ko'rish imkoniyatiga ega bo'ladi;
• vue_editor: ushbu svich yoqilganida html, css hamda js kodlarni birlashtiradigan quyidagi vue_code maydoni ochiladi:

• sql: uchbu maydonda Sql so'rovlari yozish uchun mo'ljallangan;
  Misol:

[
    {
        "alias": "name",
        "sql_result_type": "list",
        "sql": "select * from table_name"
    }
]

• content - ushbu maydonda HTML komponentlari yoziladi; Misol:

<div>
  <p v-for="item in data">
    {{item.name1}}
  </p>
</div>

• js - ushbu maydon Javascript (Vue 2 optional API) kodlarini yozish uchun mo'ljallangan;
  Misol:

{
  data(){
    return { data: [] }
  },

  mounted() {
    this.$api.get('test/test_endpint').then(res => {
      this.data = res.data.data;
    });
  }
}

• Tarjimalar - $l
  Platon sahifalarni ichida ham tarjimalar qismida kiritilgan ma'lumotlarni ishlatishishmiz mumkin. Agar HTML teglari ichida ishlatilsa:

<p class='title'>
  {{ $l('test_lang' , 'Men Platon dasturchisiman')}}
</p>

Agar JS qismida ishlatilsa

this.$l('test_lang', 'Men Platon dasturchisiman')

• $router , params Platon sahifalarda linkadgi , malumotlarni olish

data(){
    return { params: this.$route.query }
},
mounted() {
   console.log(this.params.search)
   // ushbu holatda paramsdagi search valuesini olib beradi
}

• $sendEvent Ushbu metod Platon compnentalarga malumot yuborish uchun ishlatiladi. Va onEvent orqali tutib olamiz Masalan:

this.$sendEvent('change', 3)

• $onEvent Ushbu metod orqali Platon sahifadan sendEvent orqali yuborilgan ma'lumotni tutib olamiz.

this.$onEvent('change' , this.event)
    methods:{
        event(e){
        console.log(e)
    }
}

• css -ushbu maydon CSS kodlarini yozish uchun mo'ljallangan; Misol:

class_name {
    height: 100%;
    line-height: 1;
    background: #fafafa;
    font-size: 14px;
    color: red;
    font-weight: 500;
    font-family: Montserrat;
}

Vue component yasash

---

Platondaham vuejs singari componentalarga ajratib ishlash imkoniyati yaratilgan Buning uchun esa quydagi sahifa yaratish bo'limidagi quydagi tugmani bosish yetarli

Va bu yerda komponentalar ro'yxatini ko'ramiz:

agar qo'shish tugmasini bosilsa quydagi oyna ochiladi:

Ushbu oynada

• Name - Komponenta nomi
• Сontent - Sahifalar singari VUE templeate
• JS - Vue js 2 optional API
• CSS - CSS stayllari yoziladi

Vue editor yoqilmagan holatda sahifa yaratishga namuna:

---

• SQL Bu yerda SQL doimiy talab qilingan yani required bo'lganligi va bizga hozirda zarur bo'lmaganligi uchun [] bo'sh array berlgisini qo'yib ketdik.
• Content Ushbu sahifasida HTML (VUE templeate yoziladi)

<templeate>
  <div id="app">
  <b-container class="custom-container">
    <b-form @submit.prevent="addTask">
      <b-form-group label="Task" label-for="task-input">
        <b-form-input
          id="task-input"
          v-model="newTask"
          placeholder="Enter your task"
          class="custom-input"
        ></b-form-input>
      </b-form-group>
      <b-button type="submit" class="custom-btn">Add Task</b-button>
    </b-form>
  </b-container>
</div>
</templeate>

• JS Ushbu sahifada VUE js optional api javascript kodlari yoziladi

{
  data() {
   return {
      newTask: '',
      tasks: []
   }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    }
  }
}

• CSS Ushbu sahifada esa css kodlar yoziladi

.custom-container {
     margin-top: 50px;
     max-width: 400px;
     background-color: #f7f7f7;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
   }
.custom-btn {
     width: 100%;
     background-color: #5cb85c;
     border: none;
   }
.custom-input {
     border-radius: 5px;
     padding: 10px;
   }
.todo-list {
     margin-top: 20px;
     list-style-type: none;
     padding-left: 0;
   }
.todo-item {
     padding: 10px;
     background-color: #ffffff;
     border-radius: 5px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     margin-bottom: 10px;
   }

Va natijani ko'radigan bo'lsak bizda ushbu sahifa paydo bo'ladi:

INFO

Qo'shimcha
Biz sahifalarda boshqa library kutubhonalardan ham foydalanishimiz mumkin.