Web Design and Data Security

CSC 434

Dr. Victor ODUMUYIWA

vodumuyiwa@unilag.edu.ng
Textbooks

1. Steve Prettyman (2016), Learn PHP 7 Object Oriented Modular Programming using HTML5, CSS3, JavaScript,
XML, JSON, and MySQL

2. Robin Nixon (2009), Learning PHP, MySQL and JavaScript, O’Reilly Media.

3. Douglas Crockford (2008), JavaScript: The Good Parts, O’Reilly Media.

4. Armando Fox & David Patterson (2013), Engineering Software as a Service, Strawberry Canyon LLC.
Course Outline

1. Introduction to Web application development

2. HTML5

3. CSS

4. JavaScript

5. PHP/MySQL
WWW (Web)

A set of protocols for resource sharing

A network of information resources

An internet based hypermedia initiative for global information exchange

4
N-tier architecture
SERVER SIDE
SCRIPT
INTERPRETER e.g.
WEB SERVER PhP Processor
FILE SERVER
MAIL SERVER

WEB CLIENT Query

• Firefox Database
HTML query e.g. results
• Netscape
• Explorer
+PHP file
MySql
+ASP file
• Mozilla

DATABASE
SERVER
EMAIL • MySQL
CLIENT • Oracle
• Microsoft • Sybase
5
outlook
• Zimbra
3-tier architecture
SERVER SIDE
SCRIPT
INTERPRETER e.g.
PhP Processor
WEB
SERVER
WEB CLIENT
• Firefox
• Netscape Database Query
• Explorer HTML query e.g. results
• Mozilla +PHP file
MySql
+ASP file

DATABASE
SERVER
• MySQL
• Oracle
• Sybase
6
What web design entails

• Graphics design
• Page layout (CSS creation)
• Document structuring(HTML)
• Scripting/Programming (Adding Dynamism)
• User experience design
• Search engine optimization (SEO)

• Server-side scripting
• Command line scripting
• Client-side scripting

7
What happens when you program?

Communication

• Using the same vocabulary

• Need for interpretation

8
Basics of programming

Input Processing Output

• Hard coded • Displayed on the

• Manually screen
supplied • Stored on the
• Dynamically database
supplied • Stored on any
storage device
• Printed

9
Basics of Programming

• Data structures Data structures are used in almost every

program or software system. Data structures
• Primitive types provide a means to manage huge amounts
• Boolean of data efficiently, such as large databases
• Int and internet indexing services. Usually,
• Char efficient data structures are a key to
• Float designing efficient algorithms. Some formal
• Double design methods and programming
• Arrays languages emphasize data structures, rather
than algorithms, as the key organizing factor
• Lists in software design. (Source: Wikipedia)
• Graphs
• Data manipulation, processing
• Functions
• Methods

10
Types of web pages

Static

Dynamic

11
Static web page

12
Static web page
Use notepad to edit this file

Save it as static-page.php in the web root directory

13
Processing of web pages
From
• Client
• Web server (3)

Html + PhP

(1) (2)

(4)
Html

To
• Client

14
HTML Equivalent of our static page

This is what the server sent to the browser (client):

<hr><b> Hello Prof. David. </b> <br>Today is the 15th of

August, 2011<hr>

15
Dynamic web page

16