Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
61 views

Unit1 1 and 2 - Web Development Using PHP

Uploaded by

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

Unit1 1 and 2 - Web Development Using PHP

Uploaded by

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

UNIT-1

Web Development using PHP


Introduction of the Internet

The Internet is a global network of interconnected computers that communicate with each other
using a standardized protocol called the Internet Protocol (IP). It enables the sharing of information,
resources, and services across vast distances. The Internet has revolutionized communication,
commerce, entertainment, and education, making it an essential part of modern life.

Key components of the Internet include:

1. World Wide Web (WWW): A system of interlinked hypertext documents accessed via the
Internet. Users can view web pages using a web browser.
2. Email: A method of exchanging digital messages over the Internet.
3. File Transfer Protocol (FTP): A protocol used to transfer files between computers.
4. Internet Service Providers (ISPs): Companies that provide access to the Internet.

Overview of HTML

HTML (HyperText Markup Language) is the standard language used to create and structure
content on the web. It consists of a series of elements or tags that describe the structure and content
of a web page. These elements can define headings, paragraphs, links, images, lists, and more.

Key HTML elements:

 `<html>`: The root element of an HTML document.


 `<head>`: Contains metainformation about the document, such as its title and linked
resources (e.g., CSS and JavaScript).
 `<body>`: Contains the content of the document, which is displayed to the user.
 `<h1>` to `<h6>`: Heading tags, with `<h1>` being the highest level and `<h6>` the
lowest.
 `<p>`: Paragraph tag.
 `<a>`: Anchor tag, used to create hyperlinks.
 `<img>`: Image tag.
 `<ul>` and `<ol>`: Unordered and ordered list tags, respectively.
 `<li>`: List item tag.

Designing Web Forms Using HTML Controls

Web forms are an essential part of web pages, allowing users to interact with the site by submitting
data. HTML provides various form controls to collect user input.

Basic Structure of an HTML Form

```html
<form action="submit_form.php" method="post">
<! Form Controls Go Here >
</form>
```

`<form>`: The container for all form elements. The `action` attribute specifies where to send the
form data, and the `method` attribute specifies the HTTP method (e.g., `get` or `post`).

Common HTML Form Controls

1. Text Input (`<input type="text">`):


```html
<label for="name">Name:</label>
<input type="text" id="name" name="name">
```

2. Password Input (`<input type="password">`):


```html
<label for="password">Password:</label>
<input type="password" id="password" name="password">
```

3. Radio Buttons (`<input type="radio">`):


```html
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
```

4. Checkboxes (`<input type="checkbox">`):


```html
<label for="interests">Interests:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
```

5. Dropdown List (`<select>`):


```html
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
```

6. Text Area (`<textarea>`):


```html
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
```

7. Submit Button (`<input type="submit">`):


```html
<input type="submit" value="Submit">
```

8. Reset Button (`<input type="reset">`):


```html
<input type="reset" value="Reset">
```

Example of a Complete Form

```html
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<label for="interests">Interests:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br><br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select><br><br>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

<input type="submit" value="Submit">


<input type="reset" value="Reset">
</form>
```

This form includes text inputs for name and email, a password input, radio buttons for gender
selection, checkboxes for interests, a dropdown list for country selection, a textarea for messages,
and submit/reset buttons.

CSS
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of
a document written in HTML or XML. It controls the layout, colors, fonts, and overall appearance
of web pages, making them visually appealing and improving user experience. By separating the
content (HTML) from the presentation (CSS), developers can maintain and style web pages more
efficiently.

Key Concepts in CSS

1. Selectors and Properties


2. CSS Syntax
3. Types of CSS
4. CSS Box Model
5. CSS Layout Techniques

1. Selectors and Properties

Selectors: Used to select the HTML elements you want to style.


Properties: Define the styles that will be applied to the selected elements.

Example:
```css
selector {
property: value;
}
```

Common Selectors

Element Selector: Targets all elements of a specific type.


```css
p{
color: blue;
}
```

Class Selector: Targets elements with a specific class attribute. Classes are prefixed with a
dot (`.`).
```css
.exampleclass {
fontsize: 18px;
}
```

ID Selector: Targets a single element with a specific ID attribute. IDs are prefixed with a
hash (``).
```css
exampleid {
backgroundcolor: yellow;
}
```

Attribute Selector: Targets elements with a specific attribute.


```css
input[type="text"] {
border: 1px solid ccc;
}
```

2. CSS Syntax

The basic syntax for a CSS rule consists of a selector and a declaration block. The
declaration block contains one or more declarations separated by semicolons, where each
declaration includes a property and a value.

```css
selector {
property: value;
property: value;
}
```

Example:
```css
h1 {
color: red;
fontsize: 24px;
}
```

3. Types of CSS

Inline CSS: Applied directly within an HTML element using the `style` attribute.
```html
<p style="color: blue;">This is a blue paragraph.</p>
```

Internal CSS: Defined within a `<style>` tag in the `<head>` section of an HTML document.
```html
<style>
p{
color: green;
}
</style>
```

External CSS: Written in a separate CSS file and linked to the HTML document using the
`<link>` tag.
```html
<link rel="stylesheet" href="styles.css">
```

styles.css:
```css
p{
color: red;
}
```

4. CSS Box Model

The CSS box model describes how the size and spacing of elements are determined. It
consists of the following components:

Content: The actual content of the element.


Padding: The space between the content and the border.
Border: The border surrounding the padding and content.
Margin: The space outside the border, separating the element from other elements.

Example:
```css
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
```

5. CSS Layout Techniques

Flexbox: A layout model that provides an efficient way to layout, align, and distribute space
among items in a container. It simplifies creating responsive layouts.
```css
.container {
display: flex;
justifycontent: spacebetween;
}
```

Grid Layout: A powerful layout system that allows for the creation of complex, responsive
gridbased designs.

```css
.gridcontainer {
display: grid;
gridtemplatecolumns: repeat(3, 1fr);
}
```

Positioning: Allows elements to be positioned in various ways (static, relative, absolute,


fixed, sticky).
```css
.absolutepositioned {
position: absolute;
top: 50px;
left: 100px;
}
```

Responsive Design: Techniques like media queries are used to create web pages that look
good on different devices and screen sizes.
```css
@media (maxwidth: 600px) {
.responsiveelement {
fontsize: 14px;
}
}
```

JavaScript
JavaScript is a versatile, highlevel programming language primarily used for creating
interactive and dynamic content on the web. It is one of the core technologies of web development,
alongside HTML and CSS. JavaScript allows developers to add behavior to web pages, enabling
features like form validation, dynamic content updates, animations, and more.

Key Concepts in JavaScript

1. Syntax and Basic Constructs


2. Data Types and Variables
3. Operators
4. Control Structures
5. Functions
6. Objects and Arrays
7. DOM Manipulation
8. Events
9. Asynchronous Programming

1. Syntax and Basic Constructs

JavaScript syntax is the set of rules that define a correctly structured JavaScript program. It
includes how statements are written, how functions are declared, and how variables are assigned.

Example:
```javascript
console.log("Hello, World!"); // Output: Hello, World!
```

2. Data Types and Variables

JavaScript supports several data types, including:

Primitive Types: `number`, `string`, `boolean`, `null`, `undefined`, `symbol`, and `bigint`.
Complex Types: `object` (including arrays and functions).

Variables

Variables store data values and can be declared using `var`, `let`, or `const`.

`let`: Used to declare a blockscoped variable.


`const`: Used to declare a blockscoped, readonly constant.
`var`: Used to declare a functionscoped variable (less commonly used in modern
JavaScript).

Example:
```javascript
let age = 25;
const name = "John";
var isStudent = true;
```

3. Operators

Operators are used to perform operations on variables and values.

Arithmetic Operators: `+`, ``, `*`, `/`, `%`


Comparison Operators: `==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`
Logical Operators: `&&`, `||`, `!`
Assignment Operators: `=`, `+=`, `=`, `*=`, `/=`

Example:
```javascript
let sum = 10 + 5; // 15
let isEqual = (5 === 5); // true
```

4. Control Structures

Control structures determine the flow of execution in a program.

Conditional Statements: `if`, `else if`, `else`, `switch`


Loops: `for`, `while`, `do...while`

Example:
```javascript
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}

for (let i = 0; i < 5; i++) {


console.log(i);
}
```

5. Functions

Functions are reusable blocks of code that perform a specific task. They can take parameters
and return a value.

Function Declaration:
```javascript
function greet(name) {
return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Output: Hello, Alice!


```
Arrow Function:

6. Objects and Arrays


Objects: Collections of keyvalue pairs. Used to store data with associated properties and
methods.

Arrays: Ordered collections of elements. Elements can be of any type, including objects.

Faculty:
Dr. Brahma Datta Shukla,
Institute of Computer Science,
Vikram University , Ujjain
UNIT-2

Introduction to PHP
PHP (Hypertext Preprocessor) is a popular open source server side scripting language designed for
web development. It is widely used for creating dynamic web pages and web applications. PHP can
be embedded directly into HTML code, making it easy to add functionality to web pages without the
need for separate files.
Key Features of PHP:
1. ServerSide Scripting: PHP code is executed on the server, and the result is sent to the
client's browser.
2. CrossPlatform Compatibility: PHP runs on various platforms, including Windows, Linux,
and macOS.
3. Database Integration: PHP can easily connect to databases, such as MySQL, PostgreSQL,
and SQLite, to manage and retrieve data.
4. Ease of Use: PHP has a straightforward syntax that is easy to learn and use, especially for
those familiar with other programming languages like C or JavaScript.
5. Extensibility: PHP has a rich set of libraries and extensions for various functionalities,
such as file handling, data encryption, and image manipulation.
Basic PHP Syntax Example:

```php
<?php

echo "Hello, World!";


?>
```

In this example, the `<?php` and `?>` tags indicate the start and end of PHP code. The `echo`
statement outputs the text "Hello, World!" to the browser.

WAMP and XAMPP


WAMP and XAMPP are software stacks that provide a complete environment for developing and
testing PHP applications on local machines. They package together essential components needed for
web development, including a web server, a database server, and PHP.

WAMP (Windows, Apache, MySQL, PHP)


1. Apache: A widely used web server that serves PHP files.
2. MySQL: A relational database management system used to store and manage data.
3. PHP: The serverside scripting language.

Advantages of WAMP:
 UserFriendly: WAMP provides a simple interface for managing the server and database,
making it suitable for beginners.
 Local Development: Developers can test and debug their PHP applications locally without
the need for an Internet connection.
 Configuration: WAMP offers easy access to configuration files and server settings.
Getting Started with WAMP:
1. Download and Install WAMP: You can download WAMP from its official website and
install it on your Windows machine.
2. Start the Server: Once installed, you can start the Apache and MySQL services through
the WAMP control panel.
3. Access Local Server: You can access your local server by navigating to `http://localhost`
in a web browser.

XAMPP (CrossPlatform, Apache, MySQL, PHP, Perl)


 XAMPP stands for CrossPlatform, Apache, MySQL, PHP, Perl. It is a more versatile
software stack compared to WAMP, as it is available for multiple operating systems,
including Windows, Linux, and macOS. XAMPP includes:

1. Apache: The web server that handles HTTP requests.


2. MySQL (or MariaDB): The database server for managing data.
3. PHP: The serverside scripting language.
4. Perl: A programming language often used for network programming and system
administration.

Advantages of XAMPP:

 CrossPlatform: XAMPP can be installed on different operating systems, making it a flexible


choice for developers.
 Comprehensive: In addition to PHP, XAMPP includes Perl and support for other tools, such
as phpMyAdmin for database management.
 Ease of Use: XAMPP provides a userfriendly control panel for managing the server and its
components.
Getting Started with XAMPP:
1. Download and Install XAMPP: You can download XAMPP from its official website and
install it on your computer.
2. Start the Server: Use the XAMPP control panel to start the Apache and MySQL services.
3. Access Local Server: You can access the local server by going to `http://localhost` in your
browser.

PHP installation

Method 1: Installing PHP Using XAMPP


 XAMPP is a free and opensource crossplatform web server solution stack package that
includes Apache, MySQL, PHP, and Perl.
1. Download XAMPP:

 Go to the [XAMPP official website](https://www.apachefriends.org/index.html).


 Download the XAMPP installer for Windows.
2. Install XAMPP:
 Run the downloaded installer. You might encounter a security warning; click "Yes" to
proceed.
 In the setup window, select the components you want to install. Make sure to select
"Apache" and "PHP".
 Choose the installation directory (e.g., `C:\xampp`).
 Click "Next" and proceed with the installation.
3. Start XAMPP:
 Open the XAMPP Control Panel from the installation directory (e.g.,
`C:\xampp\xamppcontrol.exe`).
 Start the "Apache" and "MySQL" modules by clicking the "Start" button next to each.
4. Verify PHP Installation:

 Open a web browser and navigate to `http://localhost`. You should see the XAMPP
dashboard.
 To check PHP, create a file named `info.php` in the `htdocs` directory (usually located at
`C:\xampp\htdocs`).
 Add the following PHP code to `info.php`:

```php
<?php
phpinfo();
?>
```

Navigate to `http://localhost/info.php` in your browser. This page will display detailed


information about the PHP configuration.

PHP Basics
1. Running PHP
To run PHP code, you typically need a server environment like Apache or Nginx, with PHP
installed. However, you can also run PHP scripts directly from the command line for scripting and
testing purposes.

Web Server (XAMPP, WAMP, etc.):


1. Place your PHP files in the server's document root directory (e.g., `C:\xampp\htdocs\`
for XAMPP).
2. Access the PHP file through a web browser by navigating to
`http://localhost/yourfile.php`.
Command Line:
1. Open a command prompt.
2. Navigate to the directory containing your PHP file.
3. Run the script using `php yourfile.php`.
2. Syntax
PHP code is enclosed within `<?php ... ?>` tags. All PHP statements end with a semicolon (`;`).
 Example:

```php
<?php
echo "Hello, World!";
?>
```

3. Comments
Comments are used to annotate code and are not executed by PHP.
Singleline comment: `//` or ``
Multiline comment: `/* ... */`
Example:

```php
<?php
// This is a singleline comment
This is also a singleline comment

/*
This is a
multiline comment
*/
?>
```

4. Variables
Variables in PHP start with a dollar sign (`$`) followed by the variable name. Variable names must
begin with a letter or underscore and can contain letters, numbers, and underscores.
Example:

```php
<?php
$name = "Alice";
$age = 30;
?>
```

5. Variable Scope
 The scope of a variable defines where it can be accessed. PHP has three main types of
variable scopes:
 Local Scope: Variables declared within a function are local and cannot be accessed outside
the function.
 Global Scope: Variables declared outside of functions are global and can be accessed
anywhere in the script.
 Superglobals: Special builtin arrays, such as `$_GET`, `$_POST`, `$_SESSION`, etc., are
always accessible.

Example:
```php
<?php
$x = 10; // Global scope

function test() {
$y = 20; // Local scope
echo $y; // Outputs: 20
}

test();
echo $x; // Outputs: 10
// echo $y; // Error: Undefined variable $y
?>
```

6. Constants
Constants are defined using the `define()` function and cannot be changed after they are set. They do
not start with a dollar sign.
Example:

```php
<?php
define("SITE_NAME", "My Website");
echo SITE_NAME; // Outputs: My Website
?>
```

7. Data Types
PHP supports several data types:

 String: A sequence of characters, e.g., `"Hello, World!"`


 Integer: Whole numbers, e.g., `42`
 Float (Double): Decimal numbers, e.g., `3.14`
 Boolean: True or false, e.g., `true`, `false`
 Array: An ordered collection of values, e.g., `[1, 2, 3]`
 Object: Instances of classes, containing properties and methods
 NULL: A special type representing a variable with no value
 Resource: A special type representing a reference to an external resource (like a database
connection)
Example:

```php
<?php
$string = "Hello, World!";
$integer = 42;
$float = 3.14;
$boolean = true;
$array = array(1, 2, 3);
?>
```

8. Echo vs Print
Both `echo` and `print` are used to output data to the screen. However, there are some differences:
Echo: Can output one or more strings. Faster and more commonly used. Does not return a value.
Print: Can only output one string. Returns 1, so it can be used in expressions.
Example:

```php
<?php
echo "Hello, World!";
echo "Hello", " ", "World!"; // Outputs: Hello World!

print "Hello, World!";


$result = print "Hello, World!"; // $result will be 1
?>
```

9. Operators
PHP supports various operators for performing operations on variables and values.
Arithmetic Operators:
`+` Addition
`` Subtraction
`*` Multiplication
`/` Division
`%` Modulus

Example:

```php
<?php
$x = 10;
$y = 5;
echo $x + $y; // Outputs: 15
?>
```

Assignment Operators:
`=` Assign
`+=` Add and assign
`=` Subtract and assign
`*=` Multiply and assign
`/=` Divide and assign

Example:
```php
<?php
$x = 10;
$x += 5; // $x is now 15
?>
```

Comparison Operators:
`==` Equal to
`===` Identical (equal and same type)
`!=` Not equal
`!==` Not identical
`>` Greater than
`<` Less than
`>=` Greater than or equal to
`<=` Less than or equal to
Example:

```php
<?php
$x = 10;
$y = 5;
var_dump($x == $y); // Outputs: bool(false)
var_dump($x > $y); // Outputs: bool(true)
?>
```

Logical Operators:
`&&` Logical AND
`||` Logical OR
`!` Logical NOT
Example:

```php
<?php
$x = true;
$y = false;
var_dump($x && $y); // Outputs: bool(false)
var_dump($x || $y); // Outputs: bool(true)
?>
```

String Operators:
`.` Concatenation
`.= `Concatenate and assign
Example:

```php
<?php
$firstName = "John";
$lastName = "Doe";
$fullName = $firstName . " " . $lastName; // $fullName is "John Doe"
?>
```

Increment/Decrement Operators:
`++$x` Preincrement
`$x++` Postincrement
`$x` Predecrement
`$x` Postdecrement
Example:

```php
<?php
$x = 10;
echo ++$x; // Outputs: 11
echo $x++; // Outputs: 11
?>
```

Faculty:
Dr. Brahma Datta Shukla,
Institute of Computer Science,
Vikram University , Ujjain

You might also like