لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 10/25/22 in أجوبة
-
كيفيه حذف مكتبه من المشروع2 نقاط
-
عندى select بها options لا توجد بها مشكلات فى التصميم المتجاوب لجميع الشاشات ما عدا مقياس @media (min-width: 1200px) { /*big screen */ { هنا تظهر المشكلة ولا يتناسب عرض الـ option مع عرض الـ select حيث يظهر الاول أكبر كيف استطيع التحكم فى عرض الـ option لتناسب مع الـ select الحاوي له ؟1 نقطة
-
السلام عليكم اريد تضمين سلايد Carousel في الصفحة البوتستراب 5 لان رافض يظهر لا أدري اين المشكلة هل في تضمين الاكواد هدا هو الكود <!doctype html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <title>index.html</title> <link href="layout/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="layout/css/bootstrap.rtl.css" rel="stylesheet" type="text/css"> <link href="layout/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="layout/css/style.css" rel="stylesheet" type="text/css"> <!----> </head> <body> <!-- Main Container --> <div class="container my-5"> <!--begin nav--> <nav class="navbar navbar-expand-md fixed-top bg-light "> <div class="container-fluid "> <a class="navbar-brand" href="#"> <img src="https://sakanjamaie.sa/img/new-logo2.svg" alt="Logo" > </a> <!--begin ul liste--> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-1"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">الرئيسية</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> الاسئلة المتكررة</a> </li> <li class="nav-item"> <a class="nav-link " href="#">الدخول<i class="fa fa-sign-in mx-1" aria-hidden="true"></i></a> </li> </ul> <!--زر دخول المنصة--> <button class="btn btn-success mx-auto" type="button" style="font-family: 'Noto Kufi Arabic', sans-serif; font-weight: 700; line-height: 30px"> <i class="fa fa-sign-in me-2" aria-hidden="true"></i>الدخول الى منصة العقار</button> <!--زر دخول المنصة--> </div> <!--End ul liste--> </div> </nav> <!--End nav--> </div> <!--SECTION 1 Begin--> <section class="section-about aos-init aos-animate" data-aos="fade-up" data-aos-duration="1500" style="margin-top: 120px"> <div class="container"> <div class="card mb-3"> <div class="row g-0"> <div class="col-md-6"> <div class="card-body"> <h5 class="card-title">ماهي منصة السكن الجماعي ؟</h5> <p class="card-text"> منصة تمكّن المنشآت من توضيح معلومات السكن الفردي أو الجماعي للعاملين لديها، وتعمل على التأكد من توفير بيئة سكنية مناسبة لهم بما يتلاءم مع ظروف عملهم وفق معايير واضحة ومحددة تلتزم بها المنشآت، وتُقيّم بناءً عليها، حيث يمكن من خلال المنصة توضيح أنواع الوحدات السكنية الجماعية أو الفردية سواءً كانت مستأجرة أو مملوكة. </p> <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> --> </div> </div> <div class="col-md-6"> <img class="d-block w-100" src="https://sakanjamaie.sa/img/new1.png" alt="Third slide" height="340px"> </div> </div> </div> </div> </section> <!--SECTION 1 End--> <!--SECTION 2 begin--> <!--Carousel Wrapper--> <section> <div class="container px-1 py-5 "> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </section> <!--/.Carousel Wrapper--> <!--SECTION 2 End--> <!-- Main Container --> <script src="layout/js/bootstrap.min.js" ></script> <script src="layout/js/jquery-3.6.1.min.js"></script> </body> </html>1 نقطة
-
نعم يؤثر تضمين إثنين من ملفات بوتستراب الخاصة في التنسيقات في الصفحة ويسبب في مشاكل في التصميم ، يمكنك الإستغناء ملف bootstrap.rtl.css وكتابة الخاصية lang , dir لتعديل اتجاه الصفحة ، بهذا الشكل . <html lang="ar" dir="rtl">1 نقطة
-
اخي لاحظت لما أحدف ملف البوتستراب الخاص بالعربي RTL من المحرر <link href="css/bootstrap.rtl.css" rel="stylesheet" type="text/css"> يظهر بشكل عادي هل يؤثر عدم تضمين ملف bootstrap.rtl.css على الصفحات لان الموقع عربي ام يمكن الاستغناء عنه تحياتي1 نقطة
-
كيف أعمل قسم المحادثة باستعمال اطار العمل جانغو1 نقطة
-
كانت غرفة الدردشة هي الخطوة الأساسية نحو إنشاء مشاريع حية وفي الوقت الفعلي. ستكون صفحة الدردشة التي سننشئها عبارة عن نموذج HTML بسيط مع نص h1 بسيط مع اسم المستخدم الحالي ورابط لتسجيل الخروج إلى المستخدم الذي قام بتسجيل الدخول للتو. قد تحتاج إلى التعليق على السطر حتى نقوم إنشاء نظام مصادقة لهذا الغرض. هذا يضمن أنه عند قيام مستخدمين بالدردشة ، يمكن لأحدهما تسجيل الخروج ولن يؤثر ذلك على المستخدم الآخر. سيظل الآخر مسجلاً الدخول ويمكنه إرسال الرسائل واستلامها. المتطلبات الأساسية: Django Django Migrations Django Channel نضيف channels الى installed apps INSTALLED_APPS = [ 'chat.apps.ChatConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # اضافة القنوات 'channels' , ] اضبط تطبيق ASGI على ملف ASGI الافتراضي في المشروع. الآن قم بتشغيل الخادم ، ستلاحظ أن خادم ASGI سيحدث على خادم Django وسيدعم ASGI الآن. ASGI_APPLICATION = 'ChatApp.asgi.application' أنشئ تطبيقًا جديدًا يحتوي على جميع وظائف الدردشة. لإنشاء تطبيق python manage.py startapp chat دالة العرض from django.shortcuts import render, redirect def chatPage(request, *args, **kwargs): if not request.user.is_authenticated: return redirect("login-user") context = {} return render(request, "chat/chatPage.html", context) <!DOCTYPE html> <html> <body> <center><h1>Hello , Welcome to my chat site ! {{request.user}}</h1></center> <br> {% if request.user.is_authenticated %} <center> Logout the chat Page <a href = "{% url 'logout-user' %}">Logout</a></center> {% endif %} <div class="chat__item__container" id="id_chat_item_container" style="font-size: 20px" > <br /> <input type="text" id="id_message_send_input" /> <button type="submit" id="id_message_send_button">Send Message</button> <br /> <br /> </div> <script> const chatSocket = new WebSocket("ws://" + window.location.host + "/"); chatSocket.onopen = function (e) { console.log("The connection was setup successfully !"); }; chatSocket.onclose = function (e) { console.log("Something unexpected happened !"); }; document.querySelector("#id_message_send_input").focus(); document.querySelector("#id_message_send_input").onkeyup = function (e) { if (e.keyCode == 13) { document.querySelector("#id_message_send_button").click(); } }; document.querySelector("#id_message_send_button").onclick = function (e) { var messageInput = document.querySelector( "#id_message_send_input" ).value; chatSocket.send(JSON.stringify({ message: messageInput, username : "{{request.user.username}}"})); }; chatSocket.onmessage = function (e) { const data = JSON.parse(e.data); var div = document.createElement("div"); div.innerHTML = data.username + " : " + data.message; document.querySelector("#id_message_send_input").value = ""; document.querySelector("#id_chat_item_container").appendChild(div); }; </script> </body> </html> تنفيذ WebSockets ، غير المتزامن ، وقنوات Django حتى الآن قمنا بإعداد مشروع Django القياسي. بعد تنفيذ تطبيق Django. حان الوقت الآن لإنشاء تطبيق ASGI. python manage.py makemigrations python manage.py migrate افتح Routing.py وأنشئ مسارًا لـ ChatConsumer (والذي سننشئه في الخطوة التالية). الآن لدينا نوعان من المسارات في المشروع. الأول هو urls.py المخصص لتوجيه Django الأصلي لعناوين URL ، والآخر مخصص لـ WebSockets لدعم ASGI لـ Django. from django.urls import path , include from chat.consumers import ChatConsumer # هنا ، يتم التوجيه إلى عنوان URL ChatConsumer الذي # سيتولى وظيفة الدردشة. websocket_urlpatterns = [ path("" , ChatConsumer.as_asgi()) , ] import json from channels.generic.websocket import AsyncWebsocketConsumer class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): self.roomGroupName = "group_chat_gfg" await self.channel_layer.group_add( self.roomGroupName , self.channel_name ) await self.accept() async def disconnect(self , close_code): await self.channel_layer.group_discard( self.roomGroupName , self.channel_layer ) async def receive(self, text_data): text_data_json = json.loads(text_data) message = text_data_json["message"] username = text_data_json["username"] await self.channel_layer.group_send( self.roomGroupName,{ "type" : "sendMessage" , "message" : message , "username" : username , }) async def sendMessage(self , event) : message = event["message"] username = event["username"] await self.send(text_data = json.dumps({"message":message ,"username":username})) اكتب الكود أدناه في asgi.py لجعله يعمل مع sockets وإنشاء المسارات. import os from django.core.asgi import get_asgi_application os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ChatApp.settings') from channels.auth import AuthMiddlewareStack from channels.routing import ProtocolTypeRouter , URLRouter from chat import routing application = ProtocolTypeRouter( { "http" : get_asgi_application() , "websocket" : AuthMiddlewareStack( URLRouter( routing.websocket_urlpatterns ) ) } ) يحدد هذا الكود طبقة القناة التي سنعمل فيها ونشارك البيانات. بالنسبة إلى مستوى النشر والإنتاج ، لا تستخدم InMemoryChannelLayer ، لأن هناك فرصًا كبيرة لتسرب البيانات. هذا ليس جيدًا للإنتاج. للإنتاج ، استخدم قناة Redis. ChatApp / settings.py CHANNEL_LAYERS = { "default": { "BACKEND": "channels.layers.InMemoryChannelLayer" } }1 نقطة
-
السلام عليكم، في حالة الاستعانة بالمكتبات الخارجية فإن التنسيقات الخاصة بي يتم تغيرها فمثلا يصبح الموقع يظهر بألوان مختلفة عن الالوان التي عينتها انا فيه ،فكيف اتخطى هذا النوع من المشاكل؟ واجعل التنسيقات الخاصة بالمكتبة التي استوردتها تؤثر فقط على تنسيقات القسم الخاص الذي استوردتها من اجله؟1 نقطة
-
وعليكم السلام تأكد من أنك قمت بتنزيل ملفات بوتستراب الإصدار الخامس ، لقد قمت بإستعمال cdnالخاص في الإصدار الخامس وظهر Carousel أي أنك قمت بتضمين أكواد Carousel لكن لديك مشكلة في الوصول إلى ملفات البوتستراب ، cdn css <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> cdn script <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> وتأكد من أن المسارات صحيحة لديك بأن ملف bootstrap.css داخل مجلد CSS وهذا المجلد داخل مجلد layout ، وأيضاً يفضل أن تضمن ملف واحد وليس الإثنبن وكذلك مسارات الجافا سكربت <link href="layout/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="layout/css/bootstrap.rtl.css" rel="stylesheet" type="text/css"> وأخبرنا بالنتيجة هل قمت بحل المشكلة أو لا1 نقطة
-
انا لا اقصد الوصول للدوره فقط بل جميع الخدمات من الاسئله الي الشهاده و فتره ايجاد عمل1 نقطة
-
يمكنك بسهولة إنشاء radio button في إطار العمل react native من خلال إستعمال widgets المتوفرة في الإطار المذكور بمعية التنسيق المناسب وبمساعدة JavaScript . لاحظ المثال التالي حيث نقوم بإنشاء الزر المطلوب من الصفر وإستعماله. import React, { useState } from "react"; import { StyleSheet, Text, View, TouchableOpacity } from "react-native"; const RadioButton = ({ onPress, selected, children }) => { // props في كل مرة نريد إستعمال المكون نقوم بإستيراده وتعويض قيم return ( <View style={styles.radioButtonContainer}> {/* ننشئ الحافظة الرئيسية */} <TouchableOpacity onPress={onPress} style={styles.radioButton}> {/* نفعل قابلية الضغط على أيقونة العنصر*/} {selected ? <View style={styles.radioButtonIcon} /> : null} </TouchableOpacity> <TouchableOpacity onPress={onPress}> {/* نفعل قابلية الضغط على العنصر*/} <Text style={styles.radioButtonText}>{children}</Text> {/* children أي محتوى نضعه داخل الزر */} {/* أي محتوى نضعه داخل الزر يكون قابل للضغط */} </TouchableOpacity> </View> ); }; const App = () => { // لنفرض أن لديك مجموعة من الأزراز يمثل كل منها أختياراً وتريد من المستخدم أن يختار واحد منها const [isLiked, setIsLiked] = useState([ { id: 1, value: true, name: "صنعاء", selected: false }, { id: 2, value: false, name: "تعز", selected: false }, { id: 3, value: false, name: "اليمن", selected: false } ]); const onRadioBtnClick = (item) => { // عندما يختار المستخدم أحد الأزرار يتم تحديث حالته فيصبح شكله مميزاً بحالة الإختيار بينما يتم إزالة الشكل المميز من باقي الأزرار let updatedState = isLiked.map((isLikedItem) => isLikedItem.id === item.id ? { ...isLikedItem, selected: true } : { ...isLikedItem, selected: false } ); setIsLiked(updatedState); }; return ( <View style={styles.app}> {isLiked.map((item) => ( //لها render لاحظ أننا نقوم بالمرور على جميع البيانات المعرفة للأزرار لغرض عمل <RadioButton onPress={() => onRadioBtnClick(item)} {/* ربط الضغط على الزر بدالة مسبقة التعريف لغرض تحديث حالة الزر */} selected={item.selected} key={item.id} > {item.name} {/* لاحظ أن المحتوى هنا هو أسم العنصر ولكن يمكن وضع أي شئ مثلاُ أيقونة أو نص */} </RadioButton> ))} </View> ); }; //HTML في Radio Button ليصبح شبيهاً الى حد ما بالزر التقليدي Radio Button هنا نصمم شكل ال const styles = StyleSheet.create({ app: { marginHorizontal: "auto", maxWidth: 500 }, header: { padding: 20 }, title: { fontWeight: "bold", fontSize: "1.5rem", marginVertical: "1em", textAlign: "center" }, radioButtonContainer: { flexDirection: "row", alignItems: "center", marginBottom: 5 }, radioButton: { height: 20, width: 20, backgroundColor: "#F8F8F8", borderRadius: 10, borderWidth: 1, borderColor: "#E6E6E6", alignItems: "center", justifyContent: "center" }, radioButtonIcon: { height: 14, width: 14, borderRadius: 7, backgroundColor: "#98CFB6" }, radioButtonText: { fontSize: 16, marginLeft: 16 }, text: { lineHeight: 30, fontSize: 20, marginVertical: 5 } }); export default App;1 نقطة
-
يوجد مكتبة جاهزة يمكنها تسهيل عمل ما سبق، يمكننا تنزيل هذه المكتبة عن طريق كتابة ما يلي: npm install radio-buttons-react-native --save الآن يمكننا استعمال هذه المكتبة كما يلي: import RadioButtonRN from 'radio-buttons-react-native'; const data = [ { label: 'data 1' }, { label: 'data 2' } ]; <RadioButtonRN data={data} selectedBtn={(e) => console.log(e)} /> هنا في البداية نقوم بتضمين المكتبة. من ثم نقوم بتعريف البيانات التي تعرف الأزرار التي نريدها، هذه البيانات يجب أن تكون لائحة من الأغراض كل غرض يحوي على الخاصية label و التي تمثل النص الذي يتبع لكل زر. بعد ذلك يمكننا استعمال الوسم RadioButtonRN و الذي نمرر له البيانات بالإضافة يمكننا استعمال الخاصية selectedBtn لتعريف تابع يقوم بتنفيذ أمر ما عند النقر على هذا الزر. يمكنك الإطلاع على أية تفاصيل أخرى عن المكتبة من هنا.1 نقطة
-
المشكلة هذه عقدتني ليومين لكن حلها بسيط جدا 1- قم بتوليد ال key ضمن ال terminal $ keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000 2- ستجد ضمن مجلد المشروع ملف اسمه debug.keystore 3- قم بنسخه و الصقه ضمن المسار اسم جهازك/.android1 نقطة
