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
