Web Development Code
@codedevelopment
6.26K 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
About
Blog
Apps
Platform
Join
Web Development Code
6.26K subscribers
Web Development Code
<!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>

<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
589 viewsNour eldin, 
Web Development Code
تاج select:
يكتب هكذا <select></select>
وداخله نضع خيارات عبر تاج <option>
ويكتب هكذا <optipn></option>
تستطيع ادخال اكثر من option
مثال:
<select>
<option>Html</option>
<option>css</option>
<option>javascript</option>
</select>

#html
@codedevelopment
543 viewsNour eldin, 
Web Development Code
This media is not supported in your browser
VIEW IN TELEGRAM
استخدام تاج
select
537 viewsNour eldin, 
Web Development Code
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
591 viewsNour eldin, 
Web Development Code
This media is not supported in your browser
VIEW IN TELEGRAM
اضافه disabled
591 viewsNour eldin, 
Web Development Code
This media is not supported in your browser
VIEW IN TELEGRAM
ويمكن استخدمها ف شئ اخر
634 viewsNour eldin, 
Web Development Code
Flex-box
#css
@codedevelopment
634 viewsNour eldin, 
Web Development Code
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
Gitlab
GitLab Pages | GitLab Docs
Static site hosting, documentation publishing, project websites, and custom domains.
❤1
992 viewsNour eldin, 
Web Development Code
@codedevelopment
599 viewsNour eldin, 
Web Development Code
@codedevelopment
621 viewsNour eldin, 
Web Development Code
Web Development Code pinned Deleted message
Web Development Code
معنى 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
832 views🖤, edited  
Web Development Code
انضم لجروب المناقشة
t.me/codedevchat
2.54K viewsNour eldin, 
Web Development Code
(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
👍1
1.89K viewsNour eldin, edited  
Web Development Code
Make your own personal portfolio online in 1 hr! HTML/CSS

Enroll Link -> https://www.udemy.com/course/make-your-own-personal-portfolio-online-in-1-hr-htmlcss/?couponCode=46CCE4CA10F4A799FF2F

Invite Friends -> http://t.me/codedevelopment
Udemy
Online Courses - Learn Anything, On Your Schedule | Udemy
Udemy is an online learning and teaching marketplace with over 250,000 courses and 80 million students. Learn programming, marketing, data science and more.
973 viewsNour eldin, 
Web Development Code
UI-UX Adobe XD Masterclass: App designing guide to earning

Enroll link-> https://www.udemy.com/course/ui-ux-adobe-xd-masterclass-app-designing-guide-to-earning/?couponCode=F4497F41670E698A8BA2

Invite Friends -> http://t.me/codedevelopment
918 viewsNour eldin, edited  
Web Development Code
HTML5 The Advanced Course

Enroll Link ->
https://www.udemy.com/course/the-complete-html-5-course-from-scratch/?couponCode=TRY10FREE12107

Invite Friends -> http://t.me/codedevelopment
928 viewsNour eldin, edited  
Web Development Code
(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
912 viewsNour eldin,