2. 1. What is web development?
2. Technology Learnt
1. HTML
2. CSS
3. SQL
4. BOOTSTRAP
5. PHP
3. SCOPE
3. • Everything that involved in creation and maintenance of a website
• Excludes the designing aspects
• Comprise of a simple website to complex web application
• For instance:
• Facebook
• Twitter etc.
• There are three types of web developers
1. Front end developers
2. Back end developers
3. Full stack developers
• Common languages used : Php, HTML, CSS, Bootstrap, Javascript and SQL
4. • HTML (Hypertext Markup Language)
• Created by Tim Berners-Lee in late 1991
• Used to structure the page
• It takes the help of tags
• To add properties attributes are used
• Examples of some commonly used tags
1. Form tag : used to collect data from the users
2. Div tag : used to logically divides the page
5. • CSS (Cascade Style Sheet)
• Create by Hakom Wium Lie in 1996
• Used to style the webpage
• Three ways to add style sheet
1. Inline style sheet
2. Internal style sheet
3. External style sheet
• CSS is created with Box Model in mind
6. Continue.
• SQL (Structured Query Language)
• Designed by Donal D. Chamberlin and Raymon F. Boyce
• Used to store, fetch and manipulate data
• Used in Oracle, MySQL, Sybase
• Common commands used:
Commands Usage
1. SELECT Extract data from database
2. UPDATE Updates data
3. DELETE Delete data
4. INSERT INTO Insert data
5. CREATE DATABASE Create new database
7. CREATE TABLE Creates new table
8. ALTER TABLE Modifies the table
9. DROP TABLE Delete the table
7. Continue.
• Bootstrap
• Free and open source project started by Mark Otto, Jacob Thornton
• Front end framework
• Comprises HTML and CSS
• Used for responsive designs
• It need wrapping elements, which are of two types:
1. .container
2. .container-fluid
• It based on grid system
• Provides four classes:
1. Xs : for small phones (< 768px)
2. Sm : for tablets (>= 768px)
3. Md: for small laptops (>=992px)
4. Lg : for desktops and laptops (>= 1200px)
8. Continue.
• Bootstrap provides a class to add icons
• .glyphicon glyphicon-name
• Example glyphicon glyphicon-user
• To make a navigation
• Class used is .navbar and .navbar-default
• For black and white style .navbar-inverse
9. Continue
• For form styling, three layout classes are used
1. Vertical form
• Default class
2. Inline form
• Places all element in one line
• Class used: .form-inline
3. Horizontal
• Places the label next to input field
• For small screen it changes to vertical form
• Bootstrap also provides the panel feature
• Bordered box with some padding around its content
• Class used is : .panel-default
• Comprises of three section
1. Header : class used is .panel-heading
2. Body: class used is .panel-body
3. Footer: class used is .panel-footer
10. Continue
• PHP (Hypertext Preprocessor)
• Created by Rasmus Lerdorf in 1994
• Originally called Personal Home Page
• Used in combination with HTML
• File extension used is : .php
• Uses :
1. Generate dynamic page
2. Collect form data
3. Encrypt data
4. Add, delete, modify, data in database
• Can run on almost any platform
• It’s a loosely typed language
• Variable starts with a $ sign
11. Continue
• Php supports following data types
Data types definition
1. Float It’s a decimal point number
2. String Sequence of characters
3. Integers Non decimal points
4. Boolean Boolean
5. Array Stores multiple values in one variable
6. Object Stores data and their access method
7. Null Special data type
8. Resource Stores references to functions
12. Continue
• Looping statements in php
1. While
2. Do.. While
3. For loop
4. Foreach
• Superglobals important to get data from from
1. $_POST : send data in encrypted form
2. $_GET : send data without ecryption
• There are two ways to connect to database
1. MySQLi
• It’s a procedural approach to connect to database
• Only support MySQL
13. Continue
1. PDO (PHP Data Objects)
• Works with 12 different database systems
• Based on objects
• To include file into php page, there are two keywords
1. Require : raise error on failure
2. Include : continue with script even after some failure
14. • Online games
• Web security
• Front end development
• Search Engine Optimization
• Robotics
