لوحة المتصدرين

لدي المُكون التالي: <?php class AppAddTask extends Component { public $title; public $description; public function render() { return view('livewire.app-add-task'); } public function addTask() { // ... } } و هذا ملف view الخاص بالمُكون: <div> <h3 class="text-center">Add New Task</h3> <div class="form-group"> <label for="title">Title</label> <input type="text" wire:model="title" class="form-control"> </div> <div class="form-group"> <label for="description">Description</label> <textarea wire:model="description" class="form-control"></textarea> </div> <div class="form-group"> <button wire:click.prevent="addTask" class="btn btn-primary btn-block">Add</button> </div> </div> أريد التحقق من المدخلات في الوقت الفعلي الذي يكتب فيه المستخدم في حقول الإدخال و عرض رسائل الخطأ، كيف يُمكنني عمل ذلك؟

لدي نموذجين PaymentMethod و PaymentMethodCategory حيث العلاقة بينهما هي واحد لمتعدد أي كل PaymentMethod تنتمي إلى PaymentMethodCategory و المفتاح الثانوي الذي يربط بينهما هو payment_method_category_id و العلاقة في النموذج PaymentMethod بالشكل التالي: public function category() { return $this->belongsTo(PaymentMethodCategory::class, 'payment_method_category_id', 'id'); } لكن عند إرجاع و تحديد بعض بيانات العلاقة كما هو موضح أدناه يُعطي null: return PaymentMethod::select('name', 'slug') ->with(['category' => function($query){ $query->select('id', 'name')->where('status', 1); }])->get(); لكن عند حذف: $query->select('id', 'name') يتم إرجاع كافة البيانات، لا أدري ما المشكلة و كيف أقوم بحلها.

حتى تستطيع إستخدام التحميل الحثيث بإستخدام التابع with يجب عليك تحديد المفتاح الثانوي ضمن الحقول التي تختارها في التابع select تأكد تماما أن إسم المفتاح الثانوي هو payment_method_category_id ثم قم بتغيير: return PaymentMethod::select('name', 'slug') ->with(['category' => function($query){ $query->select('id', 'name')->where('status', 1); }])->get(); إلى الشكل التالي بإضافة تحديد حقل المفتاح الثانوي: <?php return PaymentMethod::select('name', 'slug', 'payment_method_category_id') ->with(['category' => function($query){ $query->select('id', 'name')->where('status', 1); }])->get(); و بهذا الشكل سيتم إرجاع بيانات العلاقة بنفس الحقول التي حددتها.

أولا يجب إضافة قواعد التحقق في المُكون بالشكل التالي مثلاً: protected $rules = [ 'title' => 'required|min:10', 'description' => 'required' ]; بعد ذلك تستدعي دالة التحقق في الدالة addTask: <?php public function addTask() { $this->validate(); // ... } ثم تضيف التابع updated للمُكون ليُصبح بالشكل التالي: <?php class AppAddTask extends Component { public $title; public $description; protected $rules = [ 'title' => 'required|min:10', 'description' => 'required' ]; public function render() { return view('livewire.app-add-task'); } public function updated($property) { $this->validateOnly($property); } public function addTask() { $this->validate(); // ... } } ثم في صفحة عرض المُكون تعرض رسائل الخطأ: <div> <h3 class="text-center">Add New Task</h3> <div class="form-group"> <label for="title">Title</label> <input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror"> @error('title') <span class="error" role="alert"> <strong class="text-danger">{{ $message }}</strong> </span> @enderror </div> <div class="form-group"> <label for="description">Description</label> <textarea wire:model="description" class="form-control @error('description') is-invalid @enderror"></textarea> @error('description') <span class="error" role="alert"> <strong class="text-danger">{{ $message }}</strong> </span> @enderror </div> <div class="form-group"> <button wire:click.prevent="addTask" class="btn btn-primary btn-block">Add</button> </div> </div> و بهذا الشكل سيتم التحقق في الوقت الفعلي و يتم عرض أي رسالة خطأ إن وجدت.

أولاً يجب تحميل الإضافة الخاصة بـ PHP ليستطيع التعامل مع Mongodb بتعديل ملف php.ini وإضافة السطر التالي: extension=mongo.so ويكن أيضاً تحميله بشكل يدوي كالتالي: Installing '/usr/lib/php/extensions/no-debug-non-zts-20060613/mongo.so' ولمزيد من المعلومات حول ذلك يمكنك الاطلاع على الإضافة الخاصة ب mongodb في التوثيق الرسمي ل PHP. بعد ذلك، يجب التوجه إلى مجلّد المشروع الرئيسي وتنفيذ الأمر التالي: composer require jenssegers/mongodb وبعدها يجب إضافة المزوّد الخاص بها قبل تعريف Facades أو Eloquent وإلا لن تعمل بالشكل المطلوب: $app->register(Jenssegers\Mongodb\MongodbServiceProvider::class); $app->withFacades(); $app->withEloquent(); وأخيراً، يجب تحميل الإعدادات تلقائياً وقبل تعريف المسارات نظراً لأن lumen لا يقوم بالتحميل التلقائي لها: $app->configure('database'); وعندها يمكن استخدام الاتصال وتعريف المودل كالتالي: <?php namespace App; use Jenssegers\Mongodb\Model as Eloquent; class Example extends Eloquent { protected $connection = 'mongodb'; protected $collection = 'example'; protected $primaryKey = '_id'; } كما يوجد حل بديل لما سبق عن طريق تحميل المكتبة التالية: composer require nordsoftware/lumen-doctrine-mongodb-odm

بشكل إفتراضي يعمل تيليسكوب فقط على بيئة التطوير مع حظر الوصول له عند النشر على خادم الويب وتغيير APP_ENV لتصبح جاهزة للنشر. ولكن يمكن تعديل ذلك بالتوجه إلى المسار التالي: app/Providers/TelescopeServiceProvider.php وتعديل محتوى gate المسؤول عن منع الوصول إلى تيليسكوب وإضافة بعض الحسابات الاستثنائية كالتالي: * @return void */ protected function gate() { Gate::define('viewTelescope', function ($user) { return in_array($user->email, [ // المستخدمين المسموح لهم الوصول إليه 'user@yourapp.com', ]); }); } يجب أيضاً إجراء الأمر التالي عند التغيير على قيم .env لتجنب حدوث أي مشاكل: php artisan config:cache

يمكن الحصول على token بعد الضغط على الرابط المطلوب عن طريق: request::query() بفرض رابط إعادة تعيين كلمة المرور يحوي token كالتالي: http://localhost/forgot?c2108023762b4f86029d5758207cb4156fd58052ad9d6b13b729ce84092937de فيكون المسار: Route::get('forgot', function (Illuminate\Http\Request $request) { $query = $request->query(); $token = (array_keys($query))[0]; echo $token; // c2108023762b4f86029d5758207cb4156fd58052ad9d6b13b729ce84092937de ويفضّل أيضاً إحاطة الكود الخاص بالمتحكم ب try catch نظراً لإحتمالية حدوث أخطاء أثناء العملية. فيصبح الكود الخاص بالمتحكّم على الشكل التالي: public function recover(Request $request) { $user = Admin::where('email', $request->email)->first(); if (!$user) { $error_message = "Your email address was not found."; return redirect()->back()->with(['errors' => $error_message]); } try { Password::sendResetLink($request->only('email'), function (Message $message) { $message->subject('Your Password Reset Link'); }); } catch (\Exception $e) { $error_message = $e->getMessage(); return redirect()->back()->with(['errors' => $error_message]); } return redirect()->back()->with(['success' => 'A reset email has been sent! Please check your email.']); }

أحيانا أرى استخدامات للرابط في axios مثلا بدل http://localhost:3000/api/posts يستعملون posts مباشرتا import React, { useState, useEffect } from 'react'; import axios from 'axios'; export default function Logo() { const [data, setData] = useState(); useEffect(() => { axio.get('/posts').then((res) => { setData(res.data); }); }, []); return ( <div> {data && data.map((d) => ( <div> <img src={data.image} alt="image" /> <h1>{data.tilte}</h1> <p>{data.body}</p> </div> ))} </div> ); } كيف يمكن تحقيق ذلك?

يوجد طريقتين لتحقيق ذلك الأولى هي في الحالة العامة حيث يمكنك تعيين proxy في ملف package.json بهذه الطريقة "proxy":"http://localhost:4000/api/" بعدها يمكنك الاتصال بال api عبر تعيين فقط الجزء الذي يأتي بعد /api import React, { useState, useEffect } from 'react'; export default function Logo() { const [data, setData] = useState(); useEffect(() => { fetch('/posts').then((res) => { setData(res.data); }); }, []); return ( <div> {data && data.map((d) => ( <div> <img src={data.image} alt="image" /> <h1>{data.tilte}</h1> <p>{data.body}</p> </div> ))} </div> ); } وهناك الطريقة الثانية وهي خاصة بالاعدادات فمثلا في axios يمكنك أن تعين الاعدادت ومن ضمن الاعدادات المتوفرة هناك الرابط القاعدي axiosConfig.js import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:4000/api/' }); export default instance; يمكنك استيراد axios من الملف الذي في الاعلى وسيكون متوفر لديه رابط قاعدي ويمكنك استخدام فقط الجزء الذي يأتي بعد /api في اتصالاتك بالسيرفر import React, { useState, useEffect } from 'react'; import axios from './axiosConfig'; export default function Logo() { const [data, setData] = useState(); useEffect(() => { axio.get('/posts').then((res) => { setData(res.data); }); }, []); return ( <div> {data && data.map((d) => ( <div> <img src={data.image} alt="image" /> <h1>{data.tilte}</h1> <p>{data.body}</p> </div> ))} </div> ); }

السلام عليكم هل هناك كود يقوم بجلب عنوان الموضوع من قاعدة البيانات ويحول العنوان الى كلمات دلالية كل كلمة مفصولة عن الاخرى بفاصلة ويتم وضع هذا الكود فى هيدر الصفحة

يجب نقل الكود الخاص بجلب البيانات من قاعدة البيانات إلى أعلى الملف (قبل العنصر doctype)، وبذلك تستطيع إستعمال هذه البيانات في كل أجزاء الصفحة. بعد ذلك عليك وضع الكود التالي في نهاية العنصر head (بعد title مباشرة): <?php $keywords = explode(' ', $title); $keywords = implode(' ,', $keywords); ?> <meta type="keywords" content="<?= $keywords ?>" /> بهذه الطريقة سيتم تقسيم العنوان إلى مصفوفة ثم دمج عناصر هذه المصفوفة في شكل كلمات مفتاحية (تفصل بينهم بفاصلة , ) ثم وضع هذه الكلمات في عنصر meta من نوع keywords.

كيف يمكن تطبيق ذلك على هذا الكود <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=" " content="text/html; charset=utf-8" /> <title> </title> </head> <body> <?php include('connect_file.php'); $stmt = $db->prepare('SELECT title,content FROM news WHERE id = ?'); $stmt->bind_param('i', $_SESSION['id']); $stmt->execute(); $stmt->bind_result($title,$content); $stmt->fetch(); $stmt->close(); ?> <h1><?=$title ?><h1><br /> <h4><?=$content ?><h4> </body> </html>

يمكنك عمل ذلك في عدة خطوات، وإن ذكرت لنا اللغة سنساعدك بكتابة الكود: جلب العنوان من قاعدة البيانات وتخزينه في متغير مثلًا post_title استخدم دالة لفصل الكلمات وتحويلها إلى مصفوف، وتوجد دوال مختلفة في كل لغة لتنفيذ هذا الأمر، في PHP توجد دالة explode بعد ذلك يجب دمج عناصر هذه المصفوفة في شكل نص واحد يفصل بين كل عنصر من عناصرها فاصلة (, )، يمكنك إستعمال دالة implode في PHP قم بحفظ ناتج الخطوة الأخيرة في متغير وليكن باسم keywords ضع محتوى هذا المتغير الأخير -keywords- في عنصر meta من نوع keywords في أعلى الصفحة (في العنصر head) في النهاية سيتحول النص من هذه الصيغة "This is a testing title" إلى هذه الصيغة "This, is, a, testing, title, ". كما يمكنك تطبيق filter على عناصر المصفوفة لحذف العناصر التي تحتوي على حرفين أو أقل مثل أداة التعريف a/an في اللغة الإنجليزية.

اخي أرجو تحديد بيئة العمل و ذكر تفاصيل أكثر لمساعدتك

هناك فرق بسيط حول كيفية عرض الصور عند استخدام create-react-app فهذه الطريقة ممكنة في html <img src="../images/logo.png" alt="logo" /> لكن في react يجب أن تجلب الصورة الى المكون أولا ثم يمكنك استعمالها بهذه الطريقة import React from 'react'; import logo from '../images/logo.png' export default function Logo() { return ( <div> <img src={logo} alt="logo" /> </div> ); }

مرحبًا ما هي الطريقة الأمثل لنقل الصور من جهاز آيفون الى الحاسوب الشخصي؟

أنا مبرمج أيضا و أعمل كحر, والعمل 8 ساعات من الإنتاجية في نظري يتطلب 10,11 أو حتى 12 ساعة من العمل فعملنا نحن المبرمجين يحتاج للعديد من المهام الموازية لكتابة الكود ,كالبحث عن مصادر للشفرات والاطلاع على حلول بعض المشاكل التي تصادفك أثناء البرمجة وأعتقد أن عدد الساعات في اليوم رهبن أيضا بمستوى احترافيتك في العمل ,ف 8 ساعات للمحترف ليست هي للمبتدئ. في المقال ستجد خطوات لازمة وضرورية للإنطلاق في علام العمل الحر : الأدوات والخطوات اللّازمة لانطلاقة صحيحة في عالم العمل الحر تحياتي