Web Development

ADEL AHMED ALHAJJ

 Web Development 2

 Web development refers in general to the tasks associated with developing websites for

hosting via internet.

 The web development process includes web design, web content development, client

side/server side scripting and network security configuration, among other tasks.

.‫يشير تطوير الويب بشكل عام إلى المهام المرتبطة بتطوير مواقع الويب لالستضافة عبر اإلنترنت‬ 

‫ الخادم‬/ ‫تتضمن عملية تطوير الويب تصميم الويب وتطوير محتوى الويب والبرمجة النصية من جانب العميل‬ 

.‫ من بين مهام أخرى‬، ‫وتكوين أمان الشبكة‬

 Web Development 3

 What Is Front-End Development?

 Front-end development involves the “client-facing” side of web development.

 That is to say that it generally refers to the portion of the site, app, or digital product

that users will see and interact with.

.‫يتضمن تطوير الواجهة األمامية الجانب "المواجه للعميل" في تطوير الويب‬ 

‫وهذا يعني أنه يشير بشكل عام إلى جزء الموقع أو التطبيق أو المنتج الرقمي الذي سيرى المستخدمون‬ 

.‫ويتفاعلون معه‬
 Web Development 4

 What Is Front-End Development?

 Front-End Developers will usually need to possess a solid understanding of programming

languages, including HTML, CSS, and JavaScript, as well as frameworks like Bootstrap

ً
‫ و‬CSS ‫ و‬HTML ‫ بما في ذلك‬، ‫عادة إلى امتالك فهم قوي للغات البرمجة‬ ‫سيحتاج مطورو الواجهة األمامية‬ 

Bootstrap ‫ باإلضافة إلى أطر عمل مثل‬، JavaScript

 Web Development 5

 What Is Back-End Development?

 If Front-End Developers are responsible for how a digital product looks, Back-End

Developers are focused on how it works.

 This means they’re responsible for overseeing what’s under the hood, including database

interactions, user authentication, server, network and hosting configuration.

‫ فإن مطوري الواجهة الخلفية يركزون‬، ‫إذا كان مطورو الواجهة األمامية مسؤولين عن مظهر المنتج الرقمي‬ 

.‫على كيفية عمله‬

، ‫ بما في ذلك تفاعالت قاعدة البيانات‬، ‫هذا يعني أنهم مسؤولون عن اإلشراف على ما هو تحت الغطاء‬ 

‫ وتهيئة الشبكة واالستضافة‬، ‫ والخادم‬، ‫ومصادقة المستخدم‬

 Web Development 6

 What Is Back-End Development?

 Back-End Developers have to know how to build servers with modern frameworks (while

developing custom APIs and serving static websites and files), and how to manage

databases and data on a web server.

 Typically, they use server-side languages, including PHP, and Python, as well as tools

including MySQL, Oracle,.

‫ معرفة كيفية إنشاء خوادم بأطر عمل حديثة (أثناء تطوير واجهات برمجة‬Back-End ‫يجب على مطوري‬ 

.‫ وكيفية إدارة قواعد البيانات والبيانات على خادم الويب‬، )‫تطبيقات مخصصة وخدمة مواقع ويب وملفات ثابتة‬

ً
‫ باإلضافة إلى أدوات بما في ذلك‬، Python ‫ و‬php ‫ بما في ذلك‬، ‫عادة ما يستخدمون لغات من جانب الخادم‬ 

Oracle ‫ و‬MySQL
 Programming languages for Web 7

 1-Client –Side Programming Code running in the browser is known as client-side code

(programming) and is primarily concerned with improving the appearance and behavior of

a rendered web page.

 This includes selecting and styling UI components, creating layouts, navigation, form

validation

‫تعرف التعليمات البرمجية التي يتم تشغيلها في المستعرض باسم التعليمات البرمجية من جانب العميل‬ 

.‫وتهتم بشكل أساسي بتحسين مظهر وسلوك صفحة الويب المقدمة‬

‫ والتحقق من صحة‬، ‫ والتنقل‬، ‫ وإنشاء التخطيطات‬، ‫يتضمن ذلك تحديد مكونات واجهة المستخدم وتصميمها‬ 

‫النموذج‬
 Programming languages for Web 8

 2-Server –Side Programming mostly involves choosing which content is returned to the

browser in response to requests.

 The server-side code handles tasks like validating submitted data and requests, using

databases to store and retrieve data and sending the correct data to the client as

required.

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

.‫للطلبات‬

‫ واستخدام قواعد‬، ‫يعالج الكود من جانب الخادم مهام مثل التحقق من صحة البيانات والطلبات المقدمة‬ 

‫البيانات لتخزين البيانات واستردادها وإرسال البيانات الصحيحة إلى العميل كما هو مطلوب‬
 Web Communication 9

Web pages are stored on a Web Server to make them available on the
Internet for the users

Web Server is a computer with high processing speed and connected to the
Internet.

Web Server is used to host and display the Web pages on a Web browser.

Web browser displays the Web pages using the HTTP Protocol.

HTTP Protocol is a protocol that specifies how a Web page will be retrieved
from the Web server.
 Web Development 10

 The term “Web Development” has come to encompass a number of disciplines,

including:

 Graphic design

 Information design

 HTML, style sheet

 Scripting and programming

 Multimedia
 Introduction to PHP 11

 PHP is the most commonly used programming language for the web today. PHP is very

common because it has a relatively simple architecture

 PHP is a server side scripting language. that is used to develop Static websites or

Dynamic websites or Web applications.

‫ شائع ج ًدا ألنها تحتوي على بنية بسيطة نسبيًا‬PHP .‫ما للويب اليوم‬
ً ‫ هي لغة البرمجة األكثر استخدا‬PHP 

‫ تُستخدم لتطوير مواقع الويب الثابتة أو مواقع الويب الديناميكية أو‬.‫لغة برمجة نصية من جانب الخادم‬ 

.‫تطبيقات الويب‬
Introduction to PHP 12
 Introduction to PHP 13

 Some important points need to be noticed about PHP are as followed:

 PHP stands for Hypertext Preprocessor

 PHP is faster than other scripting languages

 PHP is used to manage the dynamic content of the website.

 PHP can be embedded into HTML.

 PHP is an object-oriented language.

 PHP is an open-source scripting language.

 PHP is simple and easy to learn language.

 Setting Up Your Workspace 14

 In order to develop and run PHP Web pages, vital components need to be installed on

your computer system.

 Web Server - PHP will work with virtually all Web Server software, including

Microsoft's Internet Information Server (IIS) but then most often used is freely

available Apache Server or XAMPP is a package of software

 Database - PHP will work with virtually all database software, including Oracle but most

commonly used is freely available MySQL database.

 ‫‪Setting Up Your Workspace >>> AMP‬‬ ‫‪15‬‬

‫من اجل تطبيق اوامر ‪، PHP‬البد من تثبيت حزمة برامج ‪( (Apatch , MySQL , PHP) AMP‬بيئة عمل‬ ‫‪‬‬

‫تطبيقات ‪)PHP‬‬

‫‪ AMP‬متاح لجميع أنظمة التشغيل‪ .‬وعمل حزمة ‪ AMP‬تحويل جهاز الحاسوب الى ‪Local Server‬‬ ‫‪‬‬

‫حزمة ‪ AMP‬كثيره جدا ومتعددة وتتوافق مع جميع انظمه التشغيل سوف نستخدم في تطبيقاتنا برنامج‬ ‫‪‬‬

‫‪XAMPP‬‬
 Setting Up Your Workspace >>> XAMPP 16

 XAMPP is an open-source, cross-platform web server that consists of a web server,

MySQL database engine, and PHP programming packages. It is compiled and maintained

by Apache.

‫ هو خادم ويب مفتوح المصدر ومتعدد األنظمة األساسية يتكون من خادم ويب ومحرك قاعدة بيانات‬XAMPP 

Apache ‫ يتم تجميعها وصيانتها بواسطة‬.PHP ‫ وحزم برمجة‬MySQL

 Setting Up Your Workspace >>> XAMPP 17

 XAMPP provides an easy-to-use control panel to manage Apache, MySQL, and other

programs without using commands.

 Note >>> To use PHP, we need to install Apache and MySQL.

‫ والبرامج األخرى دون استخدام‬MySQL ‫ و‬Apache ‫ لوحة تحكم سهلة االستخدام إلدارة‬XAMPP ‫يوفر‬ 

.‫األوامر‬

.MySQL ‫ و‬Apache ‫ نحتاج إلى تثبيت‬، PHP ‫مالحظة <<<الستخدام‬ 

‫ ندخل على الرابط التالي‬XAMPP ‫من اجل تنزيل برنامج‬ 

https://www.apachefriends.org/download.html
 Install AMP (XAMPP) 18

 Step 1: Click on the above link provided to download the XAMPP server according to

your window requirement.

‫ واختار االصدار االنسب لك‬XAMPP ‫ انقر فوق االرتباط أعاله المقدم لتنزيل خادم‬:1 ‫الخطوة‬ 

(32bit or 64bit)
 Install AMP (XAMPP) 19

 Step 2: After downloading XAMPP, double click on the downloaded file. A window will

pop-up, where you have to click on the Next button.

ً ‫ انقر نق ًرا مزدو‬، XAMPP ‫ بعد تنزيل‬:2 ‫الخطوة‬

‫ اضغط‬، ‫جا على الملف الذي تم تنزيله ستظهر نافذة منبثقة‬ 

. Next ‫فوق االمر‬

 Install AMP (XAMPP) 20

 Step 3: Here, select the components, which you want to install and click Next.

.Next ‫ حدد المكونات التي نريد تثبيتها ونضغط على االمر‬، ‫ هنا‬:3 ‫الخطوة‬ 
 Install AMP (XAMPP) 21

 Step 4: Choose a folder where you want to install the XAMPP in your system and

click Next.

.Next ‫ فيه في النظام ونضغط على االمر‬XAMPP ‫ يتم تحديد المجلد الذي نريد تثبيت‬:4 ‫الخطوة‬ 
 Install AMP (XAMPP) 22

 Step 5: XAMPP is ready to install, so

click on the Next button and install the

XAMPP.

 Step 6: A finish window will display after

successful installation. Click on the Finish

button

‫ لذا نضغط على‬، ‫ جاهز للتثبيت‬XAMPP :5 ‫الخطوة‬ 

.XAMPP ‫وسوف يتم بدء تثبيت‬.Next ‫االمر‬

‫ سوف‬.‫ عند انهاء عملية التثبيت بناجح‬:6 ‫الخطوة‬ 

.Finish ‫تظهر نافذة نضغط على االمر‬

‫)‪Run XAMPP (Local Server‬‬ ‫‪23‬‬

‫الخطوة ‪ :1‬نذهب الى مجلد ‪ XAMPP‬ونضغط مرتين متتاليه‪.‬‬ ‫‪‬‬

‫الخطوة ‪ :2‬تظهر لنا نافذة نحدد منها اللعة (‪.)English‬‬ ‫‪‬‬

‫الخطوة ‪ XAMPP :3‬جاهز لالستخدام‪.‬‬ ‫‪‬‬

‫نضغط على ‪ Start‬الخاص بخادم ‪ Apache‬و ‪.MySQL‬‬

 ‫‪How to run PHP code by XAMPP‬‬ ‫‪24‬‬

‫‪ PHP‬هي لغة برمجية شائعة‪ .‬يمكن كتابة برامج ‪ PHP‬على أي محرر ‪ ،‬مثل ‪ Notepad -‬و ‪ ++ Notepad‬و‬ ‫‪‬‬

‫‪ Dreamweaver‬و ‪ Visual Code‬وغيرها من البرامج‪.‬‬

‫بعد كتابة البرنامج بالغة ‪ PHP‬تحفظ هذه البرامج بامتداد ‪ ، .php‬على سبيل المثال ‪،‬‬ ‫‪‬‬

‫‪Firstprog.php‬‬

‫عندما تم تثبيت خادم ‪ XAMPP‬تم اختيار محرك األقراص ‪ D.‬لذلك سيكون مسار المجلد هو‬ ‫‪‬‬

‫"‪“D: \ xampp \ htdocs‬‬

‫البرنامج السابق ‪ FirstProg.php‬البد ان يتم حفظه داخل المجلد ‪ htdocs‬حتى يكون البرنامج‬ ‫‪‬‬

‫داخل ‪ Local Server‬ونتمكن من تنفيذه‬

 ‫‪How to run PHP code by XAMPP‬‬ ‫‪25‬‬

‫برامج ال ‪ PHP‬تعمل على مستعرض ويب مثل ‪ Chrome -‬و ‪ Internet Explorer‬و ‪ Firefox‬وسوف نشرح‬ ‫‪‬‬

‫بعض الخطوات الموضحة لتشغيل برامج ‪.PHP‬‬

‫بعد ما تم حفظ البرنامج ‪ FirstProg.php‬داخل المجلد ‪ htdocs‬واصبح داخل ‪Local server‬‬ ‫‪‬‬

‫نقوم االن بتشغيل برنامج ‪ XAMPP‬ونضغط على االمر ‪ Start‬لتشغيل ‪ Apache‬و ‪.MySQL‬‬ ‫‪‬‬

‫اآلن ‪ ،‬افتح متصفح الويب واكتب ‪ http: //localhost/FirstProg.php‬في نافذة المتصفح ‪ ،‬سوف يتم‬ ‫‪‬‬

‫عرض مخرجات البرنامج على متصفح الويب‬

‫او يمكن ايضا الذهب الى اي متصفح ونكتب على العنوان ‪ localhost‬سوف تظهر لنا جميع اسماء ملفات‬ ‫‪‬‬

‫ال‪ php‬التي تم حفظها داخل مجلد ‪htdocs‬‬

‫‪‬‬
 Basic PHP Syntax 26

 Generally, a PHP file contains HTML tags and some PHP scripting code.

 A PHP script can be placed anywhere in the document.

 A PHP script starts with <?php and ends with ?>.

 The default file extension for PHP files is ".php".

<?php

// PHP code goes here

?>
 Basic PHP Syntax 27

 Function "echo" to output the text “This is PHP output" on a web page
Basic PHP Syntax 28
 Working with Variables 29

 In PHP, a variable is declared using a $ sign followed by the variable name

.‫ متبوعة باسم المتغير‬$ ‫ يتم التصريح عن المتغير باستخدام عالمة‬، PHP ‫في‬ 

 Variable names are case-sensitive ($age and $AGE are two different variables)

)‫ متغيرين مختلفين‬$ AGE ‫ و‬$ age ( ‫أسماء المتغيرات حساسة لحالة األحرف على سبيل المثال‬ 

 Syntax of declaring a variable in PHP is given below:

$ variable name = value;

 Working with Variables 30

 one thing to notice about PHP is that it provides automatic data type conversion.

ً
.‫تحويال تلقائيًا لنوع البيانات‬ ‫ يوفر‬PHP ‫يجب مالحظته ان‬ 

 So, if you assign an integer value to a variable, the type of that variable will

automatically be an integer.

.‫حا تلقائيًا‬ ً ‫ فسيكون نوع هذا المتغير عد‬، ‫ إذا قمت بتعيين قيمة عدد صحيح لمتغير‬، ‫لذلك‬
ً ‫دا صحي‬ 

 Then, if you assign a string to the same variable, the type will change to a string.

.‫ فسيتغير النوع إلى سلسلة نصية‬، ‫ إذا قمت بتعيين سلسلة نصية لنفس المتغير‬، ‫بعد ذلك‬ 
Working with Variables 31

<?php $user = “ADEL”; ?>

<html>

<body> Hello <?php echo $user; ?>

</body>

</html>
Working with Variables 32
Working with Variables 33
Working with Variables 34
 Variable Type Casting 35

 Performing arithmetic computations using variables in a language such as C# requires the

variables to be of the same data type.

‫ أن تكون المتغيرات من نفس نوع‬C# ‫يتطلب إجراء العمليات الحسابية باستخدام متغيرات في لغة مثل‬ 

.‫البيانات‬

 Type casting in PHP is done by the interpreter.

.‫ بواسطة المترجم‬PHP ‫يتم إجراء تحويل نوع المتغيرات في‬ 

 In other languages such as C#, you have to cast the variables. The code below shows

type casting in C#.

.C #‫ يوضح الكود أدناه نوع التحويل في‬.‫ يجب عليك صب المتغيرات‬، C# ‫في لغات أخرى مثل‬ 
Variable Type Casting 36

Type Casting in C#
Variable Type Casting 37

Type Casting in PHP