مشروع ادارة منتجات كامل بالجافاسكريبت | Full product management system crud with javascript

كورس جافاسكريبت : nouvil.net/cou...
للتواصل معي و لاي اسفسارات : / abdelrahman_noufal
في هذا الدرس سنقوم بعمل مشروع من اهم مشاريع الدورة وهو مشروع ادارة سلع نتعلم فيه كل عمليات ال CRUD الاساسية
ما هو ال CRUD
كلمة crud تمثل
C تمثل CREATE
R تمثل READ
U تمثل UPDATE
D تمثل DELETE
نحن في هذا الدرس نضيف عيه عليها S لتكون cruds و ال S هنا تمثل SEARCH
هذه هي الخمس عمليات الاساسية للتعامل مع البيانات في برنامج
فاذا ذكرت البيانات ذكر معها تلك الخمس عمليات
انشاء بيانات
قراءة تلك البيانات و عرضها
تعديل البيانات و تحديثها
حذف البيانات
البحث عن البيانات
يمكنك تنفيز عمليات CRUDS تلك على اي برنامج يحتوي على بيانات و بأي لغة برمجة.
مميزات البرنامج
اضافة منتج
اضافة اي عدد من المنتجات بضغطة
قراءة و عرض المنتج
حذف المنتج
حذف كل المنتجات بضغطة
البحث عن المنتجات بالاسم و التصنيف
حفظ المنتجات بشكل دائم في local storage
قادر على حساب ضريبة المنتج و مصاريف الاعلانات و ايجاد السعر النهائي
لن يتم اضافة البيانات الا اذا كانت صحيحة

[@eslamfadl5860]

ينفع حضرتك تنزل الكود ؟

[@AbdelrahmanGamal]

ده تجميع للمشروع اللي عملناه مع بعض انا جمعته في فيديو واحد تسهيلاً عليكم
و ده مش اخر مشروع هينزل احنا بنمشي خطوة خطوة مع بعض و عموما اي حد عنده اي استفسار يقدر يكلمني هنا
instagram.com/abdelrahman_noufal

[@cryptowin7429]

استاذ مامكن تكملة كورس sc50

[@zahraam.al-zaidy2947]

ممكن مشاريع جاهزه html css js لو سمحت

[@khaled26.4.87]

و سمحت ممكن اعمل نفس البرنامج بس يكون في اكتر من صفحة تانية

[@ابراهيمحسن-ح8ش]

من اكتر المبرمجين القريبين لقلبي لانك بتحاول بكل الطرق انك تبسط المعلومة

[@abdulazizalrashed7558]

HTML: 11:22
HTML inputs: 14:59
HTML Outputs: 24:56
HTML Table: 27:47
Javascript 32:19
Create: 44:53
local Storage: 52:51
local storage: 53:22
Clear Inputs: 57:45
Read: 1:00:26
Delete: 1:09:09
Delete All: 1:15:01
Count: 1:20:47
Update: 1:25:13
Search: 1:41:50

[@xX-AboOoDY-ZF-X]

والله انك كفو و رجال

[@adhamsaid7437]

جميل جدا ماشاء الله ❤
عايزين بقى admin dashboard للمتاجر الالكترونية العميل يقدر يضيف المنتجات ع الموقع والسعر والكمية وكده.. حاجة زي اللي موقع سلة بيعملها كده

[@user-rd4yx1ub5k]

اتفق معك منتظرين الشرح دا 👏🏾

[@marshalking3834]

كلمة شكرا قليلة بحقك ما اتمنالك غير التوفيق والنجاح فيديوهاتك تساعدني وحد هسة تساعدني وجاي اطور يوم عن يوم بالوب دزاين ما انسة فضلك اخوك من العراق

[@MoReXARTZ]

ما اعرف كيف اشكرك على هذا الجهد اللي تقدمه لان كلمة شكراً قليلة بحقك
الله يجزاك الف خير
انت كنز حرفياً دخل لحياتي ❤

[@hemaelnoby2531]

ممكن بعد اذنك لو عملت البرنامج تبعتهولي مضغوط علشان مش عارف انفذه

[@abdooooomahsoo7420]

@@hemaelnoby2531 انا نفذته

[@abdooooomahsoo7420]

@@hemaelnoby2531 ابعتلي رقمك وانا ابعتهولك

[@BobziSb5249]

@@hemaelnoby2531 هو نزل شرح Javascript ؟

[@eslam-abo_ali]

لو سمحت ممكن حد يبعتهولى

[@AhmedAyman-ui1ks]

عاوزين كورس node js كامل يا بشمهندس لو سمحت واستمر والله عاش ع الافكار 🤍🤍

[@kunhashem]

فى وقت الفيديو 1:06:00 دقيقة تقوم بأنزال سطر لمتغير table بأستخدام باك تيك ماهى الباك تيك لانو زر انتر بيعطنى غلط فى فيجول استديو

[@rebeccamonroy444]

Thank you!!, I learned a lot with your video, I followed step by step until I got the result. In fact, I registered to your free course. I don't understand but by following and using logic it is possible to learn 😀

[@assillola6434]

من أفضل صانعي المحتوى التعليمي على اليوتيوب 👏🏻 بارك الله فيك و جزاك خيرا على مجهوداتك

[@quran3189]

يريت حد يرد 😢 انا وصلت عن اللوكال ستورج وعملت كل حاجة بس بيقلي ايررور عندلما اعمل بوش للأوبجكت في الأريي بيقلي
Can't Read a property of null

[@yassinezgi6249]

يا جماعة حد يقول لينا ازاي نربط المشروع بال php

[@salmaatef3678]

استاذ ورئيس قسم والله فهمت جدا بجد ..فين بقا مشاريع ال api اللي قولت عليها

[@ghaziprogrammers1098]

المطلوب المشروع القادم بتمنى يكون تطبيق مصرفي يقوم بعمليات باستخدام أندرويد استديو اذا سمحت

[@rajisrajis482]

السلام عليكم شكرا على المشوع وجزاك الله خيرا استاذنا، يمكن الحاجة اللى نقدر نحسنها انو لما نضغط على زر ديليت اوول لازم ناخد تءكيد علي شكل بااتون او برومت

[@kaladrashid]

انا عملت برنامج بجافا سكريبت
وهو عبارة عن اربع صفحات html
الاولى فيها اسعار العملات
والثانيه فيها واجهه بيع العملات
والثالثه فيها واجهه شراء العملات
والرابعه فيها واجهه تحويل العملات
وربطتهم بصفحه جافا سكريبت..
المشكله ان الصفحات الثلاثه مش راضيين يجيبوا الاسعار من صفحه الاسعار..
مع ان لو صفحه الاسعار فى نفس صفحه الواجهه بتشتغل عادى.
ايه الحل لو سمحت

[@abdelhamid-karam]

والله انا مجالي الموبايل ومع ذالك مش عارف ليه متابع كل جديد عندك ❣️❣️
بجد احترافيه في كل شيئ من المعلومات للصوت للتصوير للمونتاج .. ربنا يوفقك يابشمهندس ودائما في نجاح

[@AbdelrahmanGamal]

حبيبي ربنا يخليك على راسي والله كلامك ❤️

[@exclusivenews3]

السلام عليكم ورحمة الله وبركاته، افظل شرح محترف رايته على يوتوب، جعله الله في ميزان حسناتك 👍👍👍 CRUD WITH AUTO SEARCH

[@الظلالأسود-ب6ض]

لو سمحت كيف ممكن أتواصل معاك أنا تبع معك المشروع cruds خطوة بخطوة واجهتني مشكلة خطأ حابب أتواصل معك إذا ممكن

[@MohammadfawazDarwish]

مشكور وجزاك الله عنا كل خير الله يعطيك ليرضيك

[@mostafayousry8314]

ممكن الاكواد الخاصه بالمشروع لان في مشكله عندي مش عارف حلها
@Abdelrahman Gama

[@mohammedbm6892]

مشروع مهم تحية وشكر

[@JAMALGOVING]

وين المشاريع مثلك شخص يبسط المعلومات لا يوجد ابدا لا تتاخر علينا من فضلك وشكرا

[@eea8888]

ماشاء الله عليك بتخلي الواحد يفكر منطقيا 😍❤ مستنين مشاريع كثيرة

[@jokdz7477]

ممكن تربط هذا البرنامج بقاعدة بيانات معمولة بالphpmyadmin ؟؟؟

[@HEMA-kf3xg]

شكرا جدا يبشمهندس بجد الفيديو مفيد جدا🥰♥️
بس هو طريقه التخزين دي مش كده بتاخد تايم كبير جدا بالنسبه لل input الل داخل يعني اني كل معدل cell اروح احذف الtable كله م storage واعدل عليه وارجع احطه تاني كله؟
في طريقه افضل بحيث ميبقاش في لود ع البراوزر لو هدخله داتا كبيره؟

[@Nicola_Tesla452]

الله يعطيك العافيه
ممكن تعمل كورس icdl وإذا لم يكن لديك وقت لعمل هذا الكورس فممكن ترشدنا لكورس على يوتيوب يشرحه
وشكرا 🙏🖥️

[@devcyber303]

حرب دا th-cam.com/play/PLmXNh0Z95dfzGMM0DJ64t-zayOgeCGgi9.html

[@mouhmedali7260]

ممكن مساعدة ؟؟؟
اللوكال ستوراج localstorage ما عم يشتغل ، لما اضغط إنشاء أcréate تظهر لي علامة في ال console :
بتقول localstorage is un défini
كيف أحل المسألة ؟

[@takiuniv5952]

كانت عندي معلومات مبعثرة لما شاهدت تحليلك لكملة crud نظمت معلوماتي بارك الله فيك
من شكل البرنامج عرفت انك معلم محترف . طريقة كلامك بسيطة ورائعة.
الله يوفقك يا أستاذ. الى الامام. الله يوفقك...
(مع العلم انا شاهدت 4 دقايق وكتبت عذا التعليق. لا اعرف ماذا ساكتب بعد انهاء الفيديو هههه)

[@alshathawio92]

ربنا يسهل عليك دنيا انا كنت بشوف اعتقد حاجه في حياة هي جافاسكربت بعد الفيديو دا انا بديت اشوف ان جافاسكربت حاجه سهله جدا ومجرد اكواد بتكرر 😘😘❤

[@AbdelrahmanGamal]

اي حاجة بتبقى سهلة لو اتعلمناها و اشتغلنا على نفسنا فيها

[@alshathawio92]

@@AbdelrahmanGamal شكرا من القلب 💖

[@mohamed2163]

@@AbdelrahmanGamal السلام عليكم باشمهندس معلش عندى مشكله فى جمله if price!=بتطلع خطأ

[@sarwathamdy]

ربنا يبارك فيك يارب​@@AbdelrahmanGamal

[@mohamdwehbi6948]

استاذ هل تم الغاء دروس oop من الكورس؟؟

[@محمدجمال-العلمنور]

في ال creat إذا كان نفس المنتج وكل المتعلقات موحدة فليه التكرار في العرض ما يكون عنصر واحد معرف بعدد 100 ولا في حاجة تانية ؟

[@M-RJornex]

جزاك الله كل خير شرح جميل ❤ الو ممكن تعمل شرح على كيفية أن شاء الوحة تحكم في المنتوجات الني بعمل موقع ومقدرش تحكم في المنتوجات الي بتضهر على index ❤

[@ibrahimgebaaly4018]

عبد الرحمن اذا كان عندى file و بداخله بينات و محتاج انى اضع file مره وحده و يخرج ليا البينات مره وحده فى حاجة زاى كدا انا شفتها لكن مش عارف اجيبها ممكن تشرحها ليا

[@ayooooooosh4_29]

ياجماعة طبقت حرف بحرف بس لما وصلت ع فكرة creat ولما نضغط تنحذف البيانات من الجداول ماضبطت معي مع انو كاتبة نفس الشي تماما وعدتها اكثر من مرة اتكلم عن الدقيقة 47 يلي يعرف المشكلة يساعدني

[@شگرگة]

شكرا موضوع مهم وعمل جميل ... لكن ارجو منك ان تنزل فيديو كيفية ربط هذه المشروع بمشروعي الخاص مشروعي موقع تجاري لاجهزة الحاسوب ... ارجو تكملة الشرح باسرع وقت لان محتاجة وشكرا جزيلا🤍

[@ahmedazab4472]

أنا عندي سؤال مهم ومحيرني
ايه اللي يخلي أي صاحب عمل يستخدم نظام زي دي مكلف وميستخدمش شيت إكسيل مثلاً اللي بيحققله نفس الغرض

[@kaladrashid]

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

[@egypt7424]

هل تخزين البيانات بيتم في قاعدة البيانات ام في ملف text ببتم ربطه بالبرنامج هذه نقطه تشتت بالنسبه لي ارجو التوضيح ولحضرتك جزيل الشكر

[@rashedrabee]

انا عملت كل الخطوات في html , css بس الجاف يوجد بها خطا مش عارف ايه هو ممكن اعرف احل هذه المشكلة

[@majedbinhashim3663]

بس يباشا مهندس عندي مشكلة في ال tr بتاعت ال tbody لما مسحناه من ال html وحطيناه ف الجافا وعدلنا عليه ف حاولت احل المشكلة مو عارف اكثر من ساعتين ومش بتنحل

[@m.k.alsanabani]

في الدقيقة 40 انت مسوي الحصول على القيمة ، بس عند ال total انت كنت عامل قيمة عاديه من بداية المشروع ، كيف اختفت
قلت يمكن انت حذفته ، ورحت انا حذفتها بس ما بتطلع القيمه لمن ادخل بيانات

[@realiable]

بصراحة شكرا لك اتعلمت أشياء كثيرة

[@benfouinaadnan918]

الطريقة تخزين البيانات هل تسمى JSON؟

[@tahaal_adham]

يا استاذ عبد الرحمان طبقت هذا النظام وعند نقطه read لم لتضهر في النظام

[@asmaaelnaggar7643]

الافضل يكون في delete All لما نيجي نبحث عدد المنتجات اللي طلعت بالبحث ده

[@kareemals5367]

هل راح تكمل في شرح cs50كاملة ؟

[@taher5115]

انت خليتني من انسان بكره البرمجه الى شخص بعشقها رائع رائع جدًا ممكن نتواصل مع بعض

[@abdofathy4316]

رائع وفاهم عقلية المتعلم ربنا يبارك فيك

[@salahaddin795]

مشكور يا هندسة على الجهود المبذولة

[@Amerrab7]

انت فينك من زمان يااسطوره🥲❤️❤️اخوك من السعوديه

[@mahmoudafifi538]

انا كتبت الكود ده بدل لى حضرتك كاتبه فى الكود لى فى السطر رقم (197) => if(dataPro[i].title.toLowerCase().includes(value) || dataPro[i].title.toUpperCase().includes(value))

[@abdelrhman472]

طيب لو عايز اربط ده بقواعد بيانات اعمل مشروع كامل بالربط مع قواعد بيانات sql

[@x5lmx4]

سلام عليكم كنت الريد صفحة ligon

[@TravelWorld-x7t]

i need source code

[@abdoyousef9298]

انا في معهد نظم ومطلوب مني اعمل موقع بيع منتجات المراقبه زي الكاميرات مثلا ومثلها ، اقدر من خلال الفيديو ده افهم واعمل حاجه ذي كده في خلال خمس ايام ؟

[@zouhirelmezraoui1336]

💖👆💖💖👆💖💖👆💖🎓🎓🎓👍👍👍🌍🌍🌍🐙🐙🐙🏄🏄🏄🌴🌴🌴🔭🔭🔭📱📱📱🎆🎆🎆🌈🌈🌈🐧🐧🐧💻💻💻👉👆👈💯💯💯🎅🎅🎅⛅⛅⛅

[@ahmeddjebabla766]

بارك الله فيك يمكن عمل مشروع php mysql

[@anjalbishaschools]

السلام عليكم بداية شاكرينلكم يا بشمهندس ومقدرين لدي خط أفي كود create حاولت كثيرا وبحثت لكن ما توصلت له let dataPro;
if(localStorage.product != null){
dataPro = json.parse(localStorage.product);
}else{
let dataPro = [];
}
submit.onclick = function(){
let newpro = {
title:title.value,
price:price.value,
taxes:taxes.value,
ads:ads.value,
discount:discount.value,
total:total.innerHTML,
count:count.value,
category:category.value,
}
dataPro.push(newpro)
localStorage.setItem('product', json.stringify (dataPro) )
console.log(newpro)
}

[@ebrahemelmesiry5938]

حضرتك منزل كود الجافا اسكربت ؟
عشان محتاجو ضروري

[@mohmadail6611]

عااااااااااااااااااااااااااااااااش جدا

[@djillodjillo9715]

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

[@khaled26.4.87]

و عرفت عرفني

[@mikadino1699]

ممكن ترفق الملفات علشان نعرف اين الغلط اللي عملناه

[@abdulhamidhilwany]

ماشاء الله. محترف وبارع جدا مشكور

[@kanatalmoslim]

استمتعت حقا بهذه المحاضرة وطبقت ما فيها خطوة بخطوة وقد كانت النتائج أكثر من رائعة أتمنى المزيد من مثل هذه المحاضرات حول مشاريع تطبيقية بلغة جافاسكريبت ، وأتمنى من صاحب القناة أن يقوم بعمل مشروع موقع تواصل اجتماعي مصغر بالجافسكريبت

[@arabMCCS]

احلام وردية حتة اذا اشتغل هذا ما يكدر يشتغل الموضوع عميق

[@كيملينا-د7ض]

سبحان الله كنت عايز نفس الحكاية

[@ahmedrashed5567]

ما شاء الله
جزاك الله خيرا وزادك من فضله
ممتازه الطريقة دى فى التعلم - التعلم من خلال مثال يكاد يكون واقعى..
يا ريت تضيف جزء لحفظ البيانات على الكلاود.
شكرا

[@mouhmedali7260]

قبل 0 ثانية
ممكن مساعدة ؟؟؟
اللوكال ستوراج localstorage ما عم يشتغل ، لما اضغط إنشاء أcréate تظهر لي علامة في ال console :
بتقول localstorage is un défini
كيف أحل المسألة ؟

[@متابعابوفله-ن1ح]

هل ينفع اربطه بصفحة الhtml؟

[@osgamer1899]

ماتعمل فيديو تعليم لبرنامج ادارة بلايستيشن 🙂

[@قمراحمد-ز9ز]

ممكن ترفع ال كوودد كامل مدا يشتغلل عدييي البرنامج مع العلم طبقت كل الخطوات

[@albumjsk_archive5199]

شكرا أستاذ على الشرح والعمل الرائع.
حاجة وحده أوقفت تقدمي , هي
في الدقيقة 37 و48 ثانية العمل لا يظهر على الكونسيل console
رغم أن الأسماء والأي دي كانوا صح !
let title = document.getElementById('title');
let price = document.getElementById('price');
let taxes = document.getElementById('taxes');
let ads = document.getElementById('ads');
let discount = document.getElementById('discount');
let total = document.getElementById('total');
let count = document.getElementById('count');
let category = document.getElementById('category');
let submit = document.getElementById('submit');
console.log(title,price,taxes,ads,discount,total,count,category,submit)

[@J_aafar]

منتظر نظام المستشفى بحماااااس 🔥🔥🔥🔥

[@adhemsaber3795]

محتاجين مشروع متقدم باستخدام ، CSS , HTML and JavaScript

[@rabiekhalifa1103]

جزاك الله خيرا ي استاذ على المشروع الجميل

[@waai999]

ياريت تكثر لنا بروجكتات لاني مش بفهم الا عليك

[@Productshow777]

هل استطيع بهذا المشروع ربطه مع موقع واجلب المعلومات منه؟

[@phsfjdhgfdj]

مشكور ورب يوفقك لكن سؤال ماذا عن امن المعلومات وكيف اضمن انها لا تسرق او تتهكر وثانيا اتصور الشرح بيه نقص لم تبين لنا طريقة الربط بين grud.html وstayle.css لتظهر النتيجة مثل ما مطلوب تحياتي لحضرتك

[@egypt7424]

كيف يتم الانتقال من شاشة الي اخرى داخل البرنامج؟؟

[@binaqlanaqlany5544]

السلام عليكم ،
يالاحباب ويش نوع المكتبة javascript التى تطبقوا عليها بالفيجوال استيديوا ،لانه المكتبة التي أطبق فيها ما تتعرف على ()document.getElementbyId.
??

[@benamorkamel5363]

uncaught typeerror: submit is nullمشكلة

[@adilboudida3412]

code source??

[@محمداليمني-ظ3ب]

يااستاذ مابرضا يعرض المحتواء من فضلك رد لي كلام

[@sofyansofyan5189]

ليه لما بضغط على كرييت بتطلعلي ذي / script.js:42 Uncaught ReferenceError: localstorage is not defined
at submit.onclick (script.js:42:2)
submit.onclick @ script.js:42/
وما في شي بيتخزن عندي في اللوكال ستوريج ؟؟؟؟؟؟
ممكن حدا يساعدني على حل المشكل.مع العلم ان ما في غلط بالنص .لا في ال html ولا في الجافاسكريبت . ؟؟؟؟

[@swisi78]

بارك الله فيك باش مهندس جزاك الله خير ربنا ينصرك

[@yo.uq1]

اول

[@سليمعلي-ر4ش]

الدقة ليس واضحه لماذا مايكون الفيدو واضح

[@احدثتردداتالقنوات-ن7خ]

حضرتك شغلك عالي تمام بس فيه نقطة مهمة:اي برتامج ادارة مبيعات لازم يكون فيه زرار شراء وسعرين سعر البيع وسعر الشراء وكمان يكون فيه باسورد للموقع بحيث مش اي حد يخش يحذف كل المنتجات...تحياتي

[@amoo-k]

يا ريت يا بشمهندس كورس فى ال MYSQL مع ال PHP
و فى البحث ب uppercase و lowercase اشتغلت كدة بردو
if (DataProduct[i].title.toLowerCase().includes(value.toLowerCase()))

[@user-ouss]

it is a perfect work thank you so much عمل احترافي حقا اتمنى تظيفلنا عمل اخر مثله جزاك الله خيرا

[@djnoubba1235]

يا أخي أول مرة أشوف شخص بيشرح درس زيك صراحة أنت روعة
لكن هناك ملاحظة بسيطة يا ريت لو كان البرنامج فيه شيء آخر و هو كمية أو عدد المنتجات الموجودة في المخزن يعني بمعنى آخر و هو عندما تقوم بإدخال المنتجات في المشروع يعطيك عددها
مثال هناك في المستودع 100 هاتف آيفون لما تبيع واحد يكتبلك بأنه أصبح عدد الأيفون 99

[@Momoxoxo-mm3bb]

أخ عبد الرحمن السلام عليكم اتمنى تشرح عن احداث touchEvents في الجافاسكربت وتطبق كم مشروع عليها اتمنى شفت تعليقي

[@حافظعبدالجليل-ل5ب]

السلام عليكم اخي عبد الرحمن،،،لو سمحت،،،اذا انا اريد إنشاء منتج في حاله اذا تغير محتوي input تلقائي،،ايش الشرط إللي يحقق هذا الامر.

[@mohammedjojo1700]

الله يعطيك العافية و انا بحبك وبحب شرحك و تعلمت HTML CSS JavaScript بفضل فيدواتك ربي يبارك فيك اخوك من الجزائر

[@boudov]

لماذا هماك عناصر تضع لها Id و عناصر تضع لها class ماهو الفرق بين id و class ؟

[@abdelrhmanmohamed678]

مجهود رائع يا عبدالرحمن ..بس الافضل لتخزين البيانات هى قواعد البيانات ..فهل ممكن انشاء اتصال بالجافا سكريبت مع قاعدة بيانات SQLite مثلا من الفرونت اند

[@user-hr3eb7wt2c]

مابعرف له الـ funaction تبع الحذف مش شغالة
رغم كتبتها صح وعملت إعادة اكثر من مرة

[@شعالمغرب]

جزاك الله خيرا على جهودك

[@يونسعلوان-ث2ف]

مشكور استاذ لكن عند التحويل من update إلى create ما يستخدم الدالة الخاصة في الانشاء ولكن يستمر باستخدام الدالة الخاصة بالتعديل فكيف الحل