BootStrap

Bootstrap - CSS Framework

Why Use Bootstrap?

Advantages of Bootstrap:

  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

Complete the Bootstrap Tutorial Click Here

Do the examples in note pad ++ save file as .html and then you can open in your browser.

Use this as your HTML template

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>


<body>




</body>
</div>
</html>

[slideshare id=76832574&doc=bootstrap3-170611014220]


AJAX

AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

In short; AJAX is about loading data in the background and display it on the web page, without reloading the whole page.

Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.



Lesson   ( AJAX )

Learning Objectives

  • Understand the purpose of AJAX 
  • Describe the difference between Synchronous and Asynchronous processing with examples. 

AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.

AJAX: Synchronous or Asynchronous

AJAX can access the server both synchronously and asynchronously:

  • Synchronously, in which the script stops and waits for the server to send back a reply before continuing.
  • Asynchronously, in which the script allows the page to continue to be processed and handles the reply if and when it arrives.

Activity Using the AJAX LOAD method

The jQuery load() method is a simple, but powerful AJAX method.

The load() method loads data from a server and puts the returned data into the selected element.

Follow example to display the contents of text file demo_test.txt

Open up localhost by running XAMPP

Create in your work folder 2 files.

"demo_test.txt" that contains 

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

HTML file

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
       $("button").click(function(){
           $("#div1").load("demo_test.txt");
      });
  });
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>



PHP IP Address

<?php

// Get the client ip address
$ipaddress = $_SERVER['REMOTE_ADDR'];
echo $ipaddress;
?>