Scribd
Upload
24 views5 pages

Web Presentation

Uploaded by

muhammadmudassarullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views5 pages

Web Presentation

Uploaded by

muhammadmudassarullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

PHP + Database connectivity

MySQL Examples in Both MySQLi and PDO Syntax:


Three ways of working with PHP and MySQL:
•MySQLi (object-oriented)
•MySQLi (procedural)
•PDO
Should I Use MySQLi or PDO?
If you need a short answer, it would be "Whatever you like".
Both MySQLi and PDO have their advantages:
PDO will work on 12 different database systems, whereas MySQLi will only work with MySQL
databases.
Open a Connection to MySQL:
Before we can access data in the MySQL database, we need to be able to connect to the server:
Example (MySQLi Object-Oriented):
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error); }
echo "Connected successfully";
?>

HTML 5

HTML5 is the fifth major version of the HTML markup language used for structuring and
presenting content on the web. Some of the new features and improvements in HTML5 include:

1. New semantic elements: HTML5 introduces new elements that provide better structure to web
pages, such as <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, etc.
2. Multimedia: HTML5 allows for the playback of audio and video files without the need for
additional plugins like Flash.

3. Canvas and SVG: HTML5 provides improved support for canvas and SVG elements,
allowing for dynamic graphics and animations.

4. Offline storage: HTML5 provides a way to store data locally on the user's device, allowing for
offline access to web applications.

5. Geolocation: HTML5 provides access to the user's location, allowing for location-based web
applications.

6. Web workers: HTML5 allows for the execution of JavaScript scripts in the background,
improving the performance of web applications.

7. New form features: HTML5 introduces new form features, such as placeholder text,
autofocus, and validation.

8. Improved error handling: HTML5 provides improved error handling, allowing for more
robust web applications.

Some of the benefits of HTML5 include:

- Improved structure and organization of web pages


- Better support for multimedia and graphics
- Improved performance and offline capabilities
- Enhanced user experience
- Better support for mobile devices

Overall, HTML5 provides a more powerful and flexible way to build web applications, and has
become the standard for building modern web applications
Media Queries

Media queries are a feature of CSS that allow you to define different styles for different device
screen sizes, orientations, and even device types. They are used to create responsive designs that
adapt to various screen sizes and devices, such as:Desktop computers. Smartphones etc.
Media queries consist of:
1. Media type (e.g., screen, print, speech)
2. Media features (e.g., width, height, orientation, device-width)
3. Styles (CSS rules)
Example:
/* Style for screens with a maximum width of 768px */
@media screen and (max-width: 768px) {
/* CSS rules here */ }
/* Style for screens with a minimum width of 1024px and orientation landscape */
@media screen and (min-width: 1024px) and (orientation: landscape) {
/* CSS rules here */
}
Media queries are used to:
- Adjust layout and design
- Hide or show elements
- Change font sizes and colors
- Optimize images and media
- Enhance user experience
By using media queries, you can create a responsive design that adapts to different devices and
screen sizes, providing an optimal user experience.
Some common media query breakpoints include:
- Mobile: max-width: 480px
- Tablet: max-width: 768px
- Desktop: min-width: 1024px
- Large desktop: min-width: 1200px
Bootstrap Grid System

Bootstrap is like a toolkit for building websites. It's a collection of pre-designed components,
like buttons, navigation bars, and grids, that you can easily use to create a website's layout and
style.
1. Bootstrap is a free and open-source framework for building responsive websites and web
applications.
2. It provides pre-built components, styles, and utilities to simplify web development.
3. Bootstrap automatically adjusts to different screen sizes for a seamless user experience.
4. It offers a wide range of CSS classes for controlling layout, typography, and styling.
5. Bootstrap has a large and active community, providing extensive documentation and support.
Some examples of websites built with Bootstrap:
● Twitter

● Spotify

● WordPress.com

Grid Classes:
The Bootstrap grid system has four classes:
● xs (for phones-screens less than 768 px wide)
● sm (for tablets - screens equal to or greater than 768 px wide)
● md (for small laptops - screens equal to or greater than 992 px wide)
● lg (for laptops and desktops - screens equal to or greater than 1200 px wide)

Basic Structure of a Bootstrap Grid


The source following is a basic structure of a Bootstrap grid:
<divclass="container">
<divclass="row">
<divclass="col--"></div>
<divclass="col--"></div>
</div>
<divclass="row">
<divclass="col--"></div>
<divclass="col--"></div>
<divclass="col--"></div>
</div>
<divclass="row">
...
</div>
</div>

You might also like