Lecture Slide on Web Programming - CSC431

1. CSC431 COURSE INTRO
Course Code: CSC431
Course Title: Web Programming
Course Unit: 3
Course Status: Elective for Major, Comp Elective
for Edu.
3 PRACTICAL
TESTS (30)
1 EXAM

2. Course Outline Cont’d
 PART 1: WEB DEVELOPMENT
 PART 2: WEB ENGINEERING
 PART 3: WEB SECURITY
 PART 4: WEB SERVICES

3. Course Outline Cont’d
 PART 1: WEB DEVELOPMENT

 CHAP 1: GENERAL INTRODUCTION
 CHAP 2: HTML
 CHAP 3: FORM DESIGN
 CHAP 4: TABLE DESIGN
 CHAP 5: CSS
 CHAP 6: JAVASCRIPT
 CHAP 7: PHP

4. Web can be regarded as a distributed system
that serves as gateway for disseminating
information and making them available
throughout the existence of application
lifetime.
RELATED
CONCEPTS:
Website: A platform or a particular platform
which enables information dissemination.

5. • ….faster
• ….more convenient
• ….better coverage
• ….global
• ….sustainable
• ….cost effective
• ….higher level of interaction
…….cite more….and archive for exam/test
purposes…..press to move to the next slide!

6. i. Network
ii. Client
iii. Server
iv. Documents
v. Protocol
…….sketch a diagram/model showing these components
in a typical web app.
……..u may wish to mail: ajayiappdeveloper@gmail.com

7. i. Network
This is a link that connects different
computers together to form an
internet.
It is the interconnections/interlinks of
different computers in a typical
topology.
…….next is CLIENT……

8. ii. CLIENT
This has different contextual
meanings.
As it relates to this course however, it
refers to the browser. A browser
enables the user to
access/communicate with the web.
…….next is SERVER……

9. iii. SERVER
As the name implies, this
responds/serves the client with the
needed resources.
Technically, we define it as a program
that runs continually with the intent of
responding to the client’s request(s).
…….next is DOCUMENT……

10. iv. DOCUMENTS
These are pages on the web
that provides information to
the users.
…….next is PROTOCOLS……

11. v. PROTOCOLS
These are rules that govern
communication between the
clients and the server.
…….that’s OK for now, let’s examine another phase of the
chapter……WEB FORMS

12. • STATIC WEB
• DYNAMIC WEB
…….elaborating……….

13. • It’s the type of web platform in which
the interaction mode is singular. That
is, the client either do the viewing or
surfing the page(s) in the web,
without NO real respond OR
interaction from the 2nd party. This
entails purely coding in HTML only.
…….DYNAMIC……….

14. • This is the direct opposite of
static web type. It is the type of
web in which interactions take
place between the system and
the client. This is achieved by
coding in JavaScript.
...OK, let’s peep into another area of the chapter now...

15. Web programming can be defined
as a type of programming that
involves conceptualizing,
architecting, designing, organising,
implementing and maintaining web
site/platform for effective and
attractive delivering.
…….what are the processes involved in developing such?

16. • Requirement analysis and
development plan
• Site Architecture
• Text-only site framework
• Visual Communication
• Site Production
…….details now………

17. • Requirement analysis and
development plan. This deals
with preliminary survey to be
carried out before embarking
on the project.
…….processes continue………

18. • What does the client needs?
• What would my design entails?
• Where am I now?
• What would be the end results
of my product?
• How would I justify the need of
this app?
…….Requirement Questions???

19. • Site architecture: This tells the
type of website you want: static
or dynamic. It also determines
the platform for deployment.
…….processes continue………

20. • Text only site framework: In
this, you develop the skeletal
site of the whole project.; a
kind of rough sketch (on
paper & then to system).
…….what are its elements/components………

21. • Some of the elements/components
needed here include (d majors):
• Content: e.g. the contents of each page.
• Site Map: This talks about the
relationship/link that exists among the
different elements/items on the page.
• Navigation: This describes flow of
movement within the pages.
…….processes continue………

22. • Visual communication and
artistic design. This involves
inserting/placing artistic
designs, image, pictures into
your site.
…….that’s not all, its element/components now………

23. • Note that they must be
communicative and not static (in most
cases). The elements/components of
this process include :
• Look & Feel (e.g. GUI),
• Story Board (updated & linked info),
• Navigation Bar/Button (for movement),
• Logo (talking or descriptive icons), etc.
…….processes continue………

24. • Site production: - This entails all
finishing touches that must be
applied to your web app. Some
of these include……..
…….check them out in the next slide………

25. • Page template
• Prototype template
…….template talks about the background color/design…

26. • Client side program
• Server side program
…client-side: interaction btw d browser/user & d
system/program/app; server-side: interaction btw
d browser/user and the server.

27. • Finished pages
• Validation
…these are confirmation pages; they precede page
submission…

28. • Testing
• Deploying & Maintenance
…after integrating d different pages of d app, d
system/app is now tested as a whole, deployed after
satisfaction of meeting the client’s requirements and
then follow up is made in form of maintenance.

29. • These include:
1) HTML (Hyper-Text Markup Language)
2) XHTML (Extensible ……………………..)
3) CSS (Cascading Style Sheet)
4) JAVASCRIPT
5) DOM (Document Object Model)
6) DHTML (Dynamic ………………………..)
7) SERVER-SIDE SCRIPTING LANGUAGE
8) HTTP (HyperTextTransfer Protocol)
9) IDE (Integrated Development Environment)
10) CGI (Common Gateway Interface)
…….Develop a 5-pages write-up to details the above
technologies (Times New Roman, 10pt, Single-Line).
Mail to: ajayiappdeveloper@gmail.com within a week.

30. • In a typical web app
development, four (4) stages of
development are germane for
building a standard web app:
…….what are they…???

31. • HTML (Hyper-Text Markup Lang)
This involves coding in HTML to
produce web page(s); usually static and
non-interactive information page(s).
…….and the next is…???

32. • CSS (Cascading Style Sheet)
This involves formatting/styling the
web pages to make it more attractive
and appealing to visit.
NB
….still non-interactive but stylistic.
…….and the next is…???

33. • Client-Side Programming
Some level of interactions occur here; as
the client/browser/user is able to
communicate with the app.
NB
….coding in JAVASCRIPT comes here.
…….and the last stage is…???

34. • Server-Side Programming
Greater level of interactions occur here;
as the client/browser/user is able to
communicate with the server. Info/Data
are not only retrieved and read, they
can be submitted/stored.
NB
….coding in PHP comes here.
END OF CHAPTER ONE…but…

35. • Visit…
w3schools.com …….download &
save each page & use/read offline
on daily basis OR directly access the
offline version.
Check out more (texts & tutorials)….as u create ds
course’s Whatsapp Chatting Platform