Web Development Code
6.34K subscribers
389 photos
55 videos
132 files
201 links
قناة خاصه بتطوير الويب
ونشر مشاريع الويب
وكل مايخص الويب
الادمن : @Noureldin13
#Html
#Css
#Bootstrap
#JavaScript
#ReactJs
#Php
#NodeJs
#Mysql
#MongoDB
Buy ads: https://telega.io/c/codedevelopment

جروب المناقشة :
@codedevchat
Download Telegram
تاج select:
يكتب هكذا <select></select>
وداخله نضع خيارات عبر تاج <option>
ويكتب هكذا <optipn></option>
تستطيع ادخال اكثر من option
مثال:
<select>
<option>Html</option>
<option>css</option>
<option>javascript</option>
</select>

#html
@codedevelopment
Web Development Code
استخدام تاج select
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>

</style>
</head>

<body>

<form name="register">
<fieldset>
<legend>Information</legend>
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</fieldset>
<br>
<label>Your Message</label> <br>
<textarea cols="30" rows="6" readonly>your name : nour </textarea>
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<fieldset>
<legend>Your Choose</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Chrome">Google Chrome <br>
<input type="radio" name="browser" value="FireFox">Mozila FireFox <br>
<input type="radio" name="browser" value="Opera">Opera <br>
<br>
</fieldset>
<select name="time">
<option value="">Now</option>
<option value="">Tomorrow</option>
<option value="">After A Week</option>

</select>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
ويمكن استخدمها ف شئ اخر
Free Web Development Resources

Learning Platforms:
freecodecamp.org
codecademy.com
javascript30.com
frontendmentor.io
testautomationu.applitools.com
coursera.org
khanacademy.org
sololearn.com

Free Hosting:
netlify.com
firebase.google.com
aws.amazon.com
heroku.com
pages.github.com
vercel.com
surge.sh
render.com
docs.gitlab.com/ee/user/project/pages

Coding Challenge Platforms:
codewars.com
topcoder.com
codingame.com
hackerrank.com
projecteuler.net
coderbyte.com
codechef.com
exercism.io
leetcode.com
spoj.com

Freelancing platforms:
📌 toptal.com
📌 upwork.com
📌 freelancer.com
📌 peopleperhour.com
📌 simplyhired.com
📌 envato.com
📌 guru.com
📌 fiverr.com
📌 hireable.com
📌 6nomads.com

List of websites to find remote jobs:
📌 flexjobs.com
📌 remote.co/remote-jobs
📌 justremote.co
📌 weworkremotely.com
📌 remoteok.io
📌 jobspresso.co
📌 europeremotely.com
📌 wfh.io

Photos:
📷 unsplash.com
📷 pixabay.com
📷 pexels.com

Illustrations:
undraw.co/illustrations
drawkit.io
icons8.com/ouch
iradesign.io
interfacer.xyz
blush.design

Icons:
fontawesome.com
flaticon.com
icons8.com
material.io/resources/icons
iconmonstr.com

Fonts:
✍️ fonts.google.com
✍️ fontspace.com
✍️ 1001fonts.com
✍️ fontsquirrel.com

Youtube Channels:
🔗 Traversy Media
🔗 FreeCodeCamp
🔗 The Net Ninja
🔗 Google Chrome Developers
🔗 The New Boston
🔗 Derek Banas
🔗 Academind

Podcasts:
🔗 Syntax
🔗 Fullstack radio
🔗 The Changelog
🔗 The Laracasts Snippet
🔗 Front End Happy Hour
🔗 JavaScript Jabber Archives
🔗 Commit Your Code!
🔗 Shop Talk
🔗 Ladybug Podcast
🔗 CodePen Radio
🔗 JAMStack Radio
🔗 Modern Web

Code Editors:
🚀 Visual Studio Code [VS Code]
🚀 Sublime Text
🚀 Atom
🚀 Brackets
🚀 Vim

Color Palettes:
🎨 coolors.co
🎨 colorhunt.co
🎨 paletton.com
🎨 color-hex.com
🎨 mycolor.space

UI Inspiration:
uimovement.com
uigarage.net
collectui.com
httpster.net

Docs:
🔥 developer.mozilla.org
🔥 w3schools.com
🔥 w3docs.com
🔥 devdocs.io
🔥 free-for.dev

##Animation Libraries:
⧩ CSShake
⧩ Animate.css
⧩ AnimeJS
⧩ GreenSock (GSAP)
⧩ Magic Animations
⧩ Hover css
⧩ AniJS
⧩ Wicked CSS
⧩ Tuesday
⧩ Mo.js
⧩ Bounce.js

Charts / Data Visualization:
📊 Chart.js
📊 D3.js
📊 three.js

Chrome Extensions:
🔖 Web Developer
🔖 CSSViewer
🔖 Wappalyzer
🔖 JSONView
🔖 Lorem Ipsum Generator

Website Optimization Tools:
Google PageSpeed Insights
GTmetrix
WebPageTest
Yslow
معنى Socket هو المقبس
وهي واجهة تحكم اشبه بالباب للسماح بارسال الرسائل بين العمليات (Processes)
ويلزمنا فيها عنوان الاي بي + البورت + البروتوكول


طبعا الشرح هنا على بروتوكول TCP


بسم الله نبدأ الشرح

الخادم او السيرفر:​



نفتح ملف php جديد وليكن اسمه server.php
ونضع فيه الكود التالي:

[PHPCODE]<?php
//نقوم بتعرف المتغيرين الاساسيين وهما عنوان الايبي والبورت
$host = "127.0.0.1";
$port = 25003;

// هذه الدالة لتحديد اقصى وقت لازم لتنفيذ البرنامج
//اذا كانت القيمة صفر كما هي هنا فليس هناك وقت اجباري
set_time_limit(0);

// اولا ننشئ ال socket باستخدام الداله socket_create ( int $domain , int $type , int $protocol )
//الباراميتر :
//int $domain : وهو لتحديد عائلة البروتوكول يأخذ القيم AF_INET و AF_INET6 و AF_UNIX
//int $type : وهو نوع الاتصال المستخدم ويأخذ القيم SOCK_STREAM و SOCK_DGRAM و //SOCK_SEQPACKET و SOCK_RAW و SOCK_RDM
//int $protocol : وهو نوع البروتوكول يأخذ القيم icmp و udp و tcp
//هنا استخدمنا القيمة 0 وهي تعني نفس البروتوكول في الملف

//die : وهي تقريبا بمعنى خروج
$socket = socket_create(AF_INET, SOCK_STREAM, 0) or die("Could not create socket\n");


//اضافة البورت الى ال socket
// نستخدم الدالة socket_bind ( resource $socket , string $address [, int $port = 0 ] )
//الباراميتر :
//$socket : وهي من نوع socket
//$address : وهو عنوان الايبي
//$port : وهو البورت

$result = socket_bind($socket, $host, $port) or die("Could not bind to socket\n");


// البدء بالانصات للاتصال
//نستخدم الدالة socket_listen ( resource $socket [, int $backlog = 0 ] )
$result = socket_listen($socket, 3) or die("Could not set up socket listener\n");


// السيرفر دائما يقوم باستقبال الطلبات من العملاء
// لذلك نعمل دوران باستخدام ال While حتى يبقى السيرفر شغال وجاهز لاستقبال الطلبات
طبعا هنا الشرط دائما يتحقق لذلك يبقى السيرفر شغال


while (true){
//استقبال ال sockets من العملاء
//الداله socket_accept($socket)
$spawn = socket_accept($socket) or die("Could not accept incoming connection\n");

//طبعا البرنامج هذا يقوم بقراءة نص من العميل ثم يقوم بطباعتة معكوس + الايبي الخاص بالعميل
// لقراءة معلومات العميل وتخزينها في متغير
//الداله socket_read ( resource $socket , int $length)
الباراميتر :
$length : طول النص
$input = socket_read($spawn, 1024) or die("Could not read input\n");

//نقوم بحذف الفراغات من اول النص واخره (spaces)
$input = trim($input);
echo "Client Message : ".$input;

// عكس النص وتخزينه في متغير
$output = "\n".strrev($input) .$_SERVER['SERVER_ADDR']. "\n";

//ثم نقوم بكتابه التعديلات على socket ثم اعادتها الى العميل
//الداله socket_write ( resource $socket , string $buffer [, int $length = 0 ] )
الباراميتر :
//$buffer : وهو النص او مجموعه الكلمات
socket_write($spawn, $output, strlen ($output)) or die("Could not write output\n");
}
// نقفل جميع ال socket
socket_close($spawn);
socket_close($socket);

?>[/PHPCODE]​


العميل :​


نفتح ملف php جديد وليكن اسمه client.php
ونضع فيه الكود التالي:

[PHPCODE]<html>
//نقوم بعمل فورم لادخال النص وذلك لتجربة الاتصال بين الخادم والعميل
<body>
<form>
<input type="text" name="msg">
<input type="submit" name="btn">

</form>

<?php
ننشئ المتغيران الرئيسيان عنوان الايبي و البورت
البورت لازم يكون ثابت في الخادم والعميل

$host = "127.0.0.1";
$port = 25003;

طبعا هذا الشرط يتحقق بعد الضغط على الزر في الفورم

if (isset($_REQUEST['btn'])){
$message = $_REQUEST['msg'];
echo "Message To server : ".$message;

// اولا ننشئ ال socket
$socket = socket_create(AF_INET, SOCK_STREAM, 0) or die("Could not create socket\n");
// نقوم بالاتصال بالسيرفر
$result = socket_connect($socket, $host, $port) or die("Could not connect to server\n");
// نبعث القيمة النصيه للسيرفر من خلال ال socket
socket_write($socket, $message, strlen($message)) or die("Could not send data to server\n");
// نستقبل ال socket من السيرفر ونقوم بقراءة معلوماتها
$result = socket_read ($socket, 1024) or die("Could not read server response\n");
echo "\nReply From Server : ".$result;
// واخيرا نغلق ال socket
socket_close($socket);
}
?>
</body>
</html>[/PHPCODE]​

@codedevelopment
انضم لجروب المناقشة
t.me/codedevchat
(100% Fʀᴇᴇ) Front End Web Development Master Course for 2021

Learn Front-End Web Development: Quickly Master HTML5, CSS3, JavaScript, Bootstrap, SVG, Text Editors, and much more!
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
𝐄𝐧𝐫𝐨𝐥𝐥 𝐋𝐢𝐧𝐤➛ https://www.google.com/search?q=https://www.udemyking.com/2020/11/front-end-web-development-for-beginners.html
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
Expiry- 28 Hr & Certificate-Yes

𝑰𝒏𝒗𝒊𝒕𝒆 𝑭𝒓𝒊𝒆𝒏𝒅𝒔➛ t.me/codedevelopment
(100% Fʀᴇᴇ) HTML5 - Publish Your Website in One Hour

A Quick Journey to Master HTML5!
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
𝐄𝐧𝐫𝐨𝐥𝐥 𝐋𝐢𝐧𝐤➛ https://www.udemy.com/course/learn-html5-/?&couponCode=LIMITED-TIME
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
Expiry- 28 Hr & Certificate-Yes

𝑰𝒏𝒗𝒊𝒕𝒆 𝑭𝒓𝒊𝒆𝒏𝒅𝒔➛ t.me/codedevelopment
Web Development Code pinned «انضم لجروب المناقشة t.me/codedevchat»
- مقدمة في لغة CSS
----------------------
قبل البدء بتعلم لغة CSS عليك أن تكون بمعرفة تامة بلغتي HTML وXHTML لما لهما من أهمية في موضوعنا هذا.
-------------------------------

- ما هي لغة CSS؟
-------------------
• لغة CSS هي إختصار للعبارة Cascading Style Sheets وتعني صفحة الأنماط المتعاقبة.
• ‏تستخدم لكيفية ظهور وسوم لغة HTML.
• أضيفت هذه اللغة للنسخة الرابعة من لغة HTML وهي HTML 4.0.
• تستخدم لغة CSS لحل مشاكل لغة HTML ولتوفير الكثير من العمل و الوقت.
• جميع الانماط المتعاقبة تجمع في ملف خارجي تحت اسم css.
-------------------------------

- لماذا نستخدم لغة CSS؟
---------------------
• لقد حلت لغة CSS الكثير من المشاكل للغة HTML ولتوفير الوقت والجهد المبذول لعمل صفحة ما او موقع كامل.
• حيث أنك لا تحتاج إلى إعطاء كل وسم HTML سمة معينة بل حصرها بوسم معين عن طريق لغة CSS وذلك لسهولة العمل على تصميم الصفحات.
-------------------------------

- لتحميل بعض الكتب المفيدة في لغة css مباشرة من ميديا فاير
--------------------
كتاب شرح لغة CSS...
https://www.mediafire.com/file/95s8yfocdd0h6ab/book+css+_+Programmers1.pdf/file

كتاب تعلم لغة css3...
https://www.mediafire.com/file/5ton3tbi8z2nyp6/Learn+css3+_+Programmers1.pdf/file

كتاب برمجة مواقع الإنترنت باستخدام لغة CSS
https://www.mediafire.com/file/7mvl81zzzd9dn0x/Website+programming+using+CSS+_+Programmers1.pdf/file

كتاب برمجة الإستايلات بـ CSS...

https://www.mediafire.com/file/8jyrtiwsfzzhcn6/Programming+styles+using+css+_+Programmers1.pdf/file

@codedevelopment