Scribd
Upload
7 views

Lecture-1-Introduction To Web Application Development

Php

Uploaded by

aliabdoali712033
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Lecture-1-Introduction To Web Application Development

Php

Uploaded by

aliabdoali712033
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Architecture of Web

Application

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 1


Architecture of Web Application
• Web Consists of many component.
‫• يتكون الويب من العديد من المكونات‬
• Work together to bring a webpage to our desktop
over the Internet.
.‫• يعملوا معا ً إلحضار صفحة ويب إلى سطح المكتب عبر اإلنترنت‬
• Components: ‫المحتويات‬
oWeb server
oClient
oDatabase Server

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 2


Architecture of Web Application

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 3


Web Application?
• A web application is a website that contains pages
with partly or entirely undetermined content. The
final content of a page is determined only when the
visitor requests a page from the web server. Because
the final content of the page varies from request to
request based on the visitor’s actions, this kind of
page is called a dynamic page.
‫• تطبيق الويب هو موقع ويب يحتوي على صفحات ذات محتوى غير‬
‫ يتم تحديد المحتوى النهائي للصفحة فقط عندما‬.‫محدد جزئيًا أو كليًا‬
‫نظرا ألن المحتوى النهائي‬ً .‫يطلب الزائر صفحة من خادم الويب‬
‫ يًطلق‬، ‫للصفحة يختلف من طلب آلخر بنا ًًء على إجراءات الزائر‬
.‫على هذا النوع من الصفحات اسم الصفحة الديناميكية‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 4


Architecture of Web Application
• What is Webpage?
A web page is a single hypertext document available
on World Wide Web (WWW). It is composed of
HTML elements and displayed on the user's browser
‫صفحة الويب هي مستند نص تشعبي واحد متاح على شبكة الويب‬
‫ ويتم عرضه في‬HTML ‫( يتكون من عناصر‬WWW) ‫العالمية‬
. ‫متصفح المستخدم‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 5


What is Webpage? Cont..

Web Page

Static Web Page Dynamic Web Page

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 6


Architecture of Web Application
• Static Webpage
oA plain text file, contains all the content to be
displayed in the web browser.
oIs directly sent from the web server to the web
browser.
oOnly changes, when the web developer changes
it.

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 7


Process static web pages
• A static website comprises a set of related HTML pages
and files hosted on a computer running a web server.
ً‫ والملفات‬HTML ً‫• يتكونًموقعًالويبًالثابتًمنًمجموعةًمنًصفحات‬
.‫ذاتًالصلةًالمستضافة علىًجهازًكمبيوترًيقومًبتشغيلًخادمًويب‬

• A web server is software that serves web pages in


response to requests from web browsers. A page request
is generated when a visitor clicks a link on a web page,
selects a bookmark in a browser, or enters a URL in a
browser’s address text box.

ً‫• خادمًالويبًهوًبرنامجًيخدمًصفحاتًالويبًاستجابةًلطلباتًمن‬
ً‫ًيتمًإنشاءًطلبًصفحةًعندماًينقرًالزائرًعلىًرابطًفي‬.‫متصفحاتًالويب‬
‫ًأوًيدخلًعنوان‬،ً‫ًأوًيحددًإشارةًمرجعيةًفيًمتصفح‬،ً‫صفحةًويب‬
.‫فيًمربعًنصًعنوانًالمتصفح‬URL

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 8


• The final content of a static web page is determined
by the page designer and doesn’t change when the
page is requested. Here’s an example:
ً‫• يتمًتحديدًالمحتوىًالنهائيًلصفحةًالويبًالثابتةًبواسطةًمصمم‬
:‫ًهذاًمثال‬.‫الصفحةًوالًيتغيرًعندًطلبًالصفحة‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 9


Process static web pages Cont..
<html>
1 <head>
2 <title>Trio Motors Information
3Page</title>
4 </head>
5 <body>
6 <h1>About Trio Motors</h1>
7 <p>Trio Motors is a leading
8automobile manufacturer.</p>
9 </body>
</html>

Every line of the page’s HTML code is written by the


designer before the page is placed on the server.
Because the HTML doesn’t change once it’s on the
server, this kind of page‫النظامي‬is‫إبراهيم‬
‫ ص‬10:01 05/09/2021
called
.‫إعداد د‬
a static page. 10
Process static web pages Cont..
Every line of the page’s HTML code is written by the
designer before the page is placed on the server.
Because the HTML doesn’t change once it’s on the
server, this kind of page is called a static page.

‫ للصفحة قبل وضع الصفحة‬HTML ‫كتب المصمم كل سطر من كود‬


، ‫ اليتغير بمجرد وجوده على الخادم‬HTML ‫نظرا ألن‬ ً .‫على الخادم‬
.‫فإن هذا النوع من الصفحات يسمى الصفحة الثابتة‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 11


Process static web pages Cont..
• When the web server receives a request for a static
page, the server reads the request, finds the page,
and sends it to the requesting browser, as the
following example shows:
، ‫ يقرأ الخادم الطلب‬، ‫• عندما يتلقى خادم الويب طلبًا ً لصفحة ثابتة‬
‫ كما يوضح‬، ‫ ويرسلها إلى المستعرض الطالب‬، ‫ويجد الصفحة‬
:‫المثال التالي‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 12


Process static web pages Cont..

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 13


Process static web pages Cont..
• A. Web browser requests static page. B. Web server
finds page. C. Web server sends page to requesting
browser.
ً‫ًخادمًالويبًيجد‬.‫ًب‬.‫ًيطلبًمستعرضًالويبًصفحةًثابتة‬.‫• أ‬
.‫ًخادمًالويبًيرسلًالصفحةًإلىًطلبًالمتصفح‬.ً‫ ت‬.‫الصفحة‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 14


Architecture of Web Application
• Dynamic webpage:
o a page, created by a program or script running
on server.
o page can be changed each time, it is viewed.
o changes can come from processing from data or
database server.
o enable web developer to create interactive web
applications.
o ex: social networking sites, Blogs, E-commerce
website.

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 15


Process dynamic pages
• When a web server receives a request for a static
web page, the server sends the page directly to the
requesting browser. When the web server receives a
request for a dynamic page, however, it reacts
differently: It passes the page to a special piece of
software responsible for finishing the page. This
special software is called an application server.
‫ يرسل الخادم‬، ‫• عندما يتلقى خادم الويب طلبًا ً لصفحة ويب ثابتة‬
‫ عندما يتلقى خادم‬.‫الصفحة مباشر ًة ً إلى المستعرض الذي يطلبها‬
‫ فهو يمرر‬:‫ فإنه يتفاعل بشكل مختلف‬، ‫الويب طلبًا لصفحة ديناميكية‬
.‫الصفحة إلى جزء خاص من البرنامج مسؤول عن إنهاء الصفحة‬
.‫هذا البرنامج الخاص يسمى خادم التطبيقات‬
‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 16
Process dynamic pages Cont..
• The application server reads the code on the page,
finishes the page according to the instructions in the
code, and then removes the code from the page. The
result is a static page that the application server
passes back to the web server, which then sends the
page to the requesting browser. All the browser gets
when the page arrives is pure HTML. Here’s a view
of the process:
‫ وينهي‬، ‫• يقرأ خادم التطبيق الكود الرمز الموجود على الصفحة‬
‫ ثم يزيل الكود من‬، ‫الصفحة وفقًا لإلرشادات الواردة في الكود‬
‫ والنتيجة هي صفحة ثابتة يقوم خادم التطبيق بتمريرها مرة‬.‫الصفحة‬
‫ والذي يرسل بعد ذلك الصفحة إلى المتصفح‬، ‫أخرى إلى خادم الويب‬
‫ كل ما يحصل عليه المتصفح عند وصول الصفحة هو‬.‫الذي يطلبها‬
:‫ فيما يلي عرض للعملية‬.‫خالص‬HTML
‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 17
‫‪Process dynamic pages‬‬

‫‪ 10:01 05/09/2021‬ص‬ ‫إعداد د‪.‬إبراهيم النظامي‬ ‫‪18‬‬


Process dynamic pages

• A. Web browser requests dynamic page. B. Web


server finds page and passes it to application server.
C. Application server scans page for instructions
and finishes page. D. Application server passes
finished page back to web server E. Web server
sends finished page to requesting browser
‫ يعثر خادم الويب‬.‫ ب‬.‫ يطلب مستعرض الويب صفحة ديناميكية‬.‫• ا‬
‫ يقوم خادم التطبيق‬.‫ ج‬.‫على الصفحة ويمررها إلى خادم التطبيق‬
‫ يقوم‬.‫بمسح الصفحة للحصول على اإلرشادات وينتهي من الصفحة‬
‫خادم التطبيق بتمرير الصفحة النهائية مرة أخرى إلى خادم الويب‬
‫يرسل خادم الويب الصفحة النهائية إلى المستعرض الذي يطلبه‬E.

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 19


Access a database

• An application server lets you work with server-side


resources such as databases. For example, a
dynamic page may instruct the application server to
extract data from a database and insert it into the
page’s HTML.

‫• يتيح لك خادم التطبيق العمل مع موارد من جانب الخادم مثل قواعد‬


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

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 20


Access a database Cont..
• Using a database to store content allows you to
separate your website’s design from the content you
want to display to site users. Instead of writing
individual HTML files for every page, you only
need to write a page—or template—for the different
kinds of information you want to present.
‫• يتيح لك استخدام قاعدة بيانات لتخزين المحتوى فصل تصميم موقع‬
‫الويب الخاص بك عن المحتوى الذي تريد عرضه لمستخدمي‬
‫ ما عليك‬، ‫ فردية لكل صفحة‬HTML ‫الً من كتابة ملفات‬ ً ‫ بد‬.‫الموقع‬
‫ ألنواع المعلومات المختلفة التي تريد‬- ‫ أو قالب‬- ‫سوى كتابة صفحة‬
.‫تقديمها‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 21


‫‪• You can then upload content into a database and‬‬
‫‪then have the website retrieve that content in‬‬
‫‪response to a user request.‬‬
‫• يمكنكًبعدًذلكًتحميلًالمحتوىًإلىًقاعدةًبياناتًثمًمطالبةًموقعً‬
‫الويبًباستردادًهذاًالمحتوىًاستجابةًلطلبًالمستخدم‪.‬‬

‫‪ 10:01 05/09/2021‬ص‬ ‫إعداد د‪.‬إبراهيم النظامي‬ ‫‪22‬‬


Access a database Cont..
• You can also update information in a single source,
and then populate that change throughout the
website without having to manually edit each page.
‫ ثم تعبئة هذا‬، ‫• يمكنك أيضًا ً تحديث المعلومات في مصدر واحد‬
‫التغيير في جميع أنحاء موقع الويب دون الحاجة إلى تحرير كل‬
.‫صفحة يدويًا‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 23


Example shows the process of querying a
database and returning data to the browser:

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 24


Access a database
• A. Web browser requests dynamic page. B. Web
server finds page and passes it to application server.
C. Application server scans page for instructions.
‫ يعثر خادم الويب‬.‫ ب‬.‫ يطلب مستعرض الويب صفحة ديناميكية‬.‫• أ‬
‫ يقوم خادم التطبيق‬.‫ ج‬.‫على الصفحة ويمررها إلى خادم التطبيق‬
.‫بمسح الصفحة للحصول على اإلرشادات‬
• D. Application server sends query to database
driver. E. Driver executes the query against the
database. F. Recordset is returned to driver. G.
Driver passes recordset to application server
E. .‫• يرسل خادم التطبيق استعال ًما إلى برنامج تشغيل قاعدة البيانات‬
‫يتم إرجاع مجموعة‬F. .‫سائق ينفذ االستعالم على قاعدة البيانات‬
‫السائق يمرر مجموعة السجالت إلى خادم‬G. .‫السجالت إلى السائق‬
‫التطبيق‬
‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 25
Access a database Cont..
• H. Application server inserts data in page, and then
passes the page to the web server I. Web server
sends finished page to requesting browser.
‫ ثم يمرر الصفحة إلى‬، ‫• درج خادم التطبيق البيانات في الصفحة‬
‫يرسل خادم الويب الصفحة النهائية إلى المستعرض‬I. ‫خادم الويب‬
.‫الذي يطلبه‬

‫ ص‬10:01 05/09/2021 ‫إبراهيم النظامي‬.‫إعداد د‬ 26

You might also like