Internet Programming

By K K Bohra

BCA 514
2020

Lachoo Memorial College of Science & Technology (Autonomous), Jodhpur

K. K. Bohra, Lachoo Memorial College
Course Overview

K. K. Bohra, Lachoo Memorial College

K. K. Bohra, Lachoo Memorial College
K. K. Bohra, Lachoo Memorial College
K. K. Bohra, Lachoo Memorial College
JavaScript Framework
PHP Framework
K. K. Bohra, Lachoo Memorial College
Java Script Frameworks

K. K. Bohra, Lachoo Memorial College

MEAN, MERN and MEVN Stack

K. K. Bohra, Lachoo Memorial College

Java Script

K. K. Bohra, Lachoo Memorial College

K. K. Bohra, Lachoo Memorial College
 Java Script, 1995, Brendan Eich

• JavaScript was initially created to “make web pages

alive”.
• Initially called LiveScript
• A general-purpose scripting language.
• It is basically an implementation which tells us how to
use a scripting language.
• enhancing the interaction of a user
• can make your webpage more lively and interactive.
• JavaScript can execute not only in the browser, but also
on the server, or actually on any device that has a special
program called the JavaScript engine.
K. K. Bohra, Lachoo Memorial College
 Java Script
• What makes JavaScript unique?
– There are at least three great things about JavaScript:
• Full integration with HTML/CSS.
• Simple things are done simply.
• Support by all major browsers and enabled by default.
• Languages “over” JavaScript
– The syntax of JavaScript does not suit everyone’s needs.
– transpiled (converted) to JavaScript before they run in the
browser.
– Transpilers; source-to-source compilers

K. K. Bohra, Lachoo Memorial College

 Java Script
• Modern tools make the transpilation very fast and
transparent, actually allowing developers to code in another
language and auto-converting it.
• Examples of such languages:
– CoffeeScript; Ruby devs like it.
– TypeScript; Microsoft
– Flow; Facebook
– Dart; Google
– Brython; Python

K. K. Bohra, Lachoo Memorial College

 Detail of Unit 1
JavaScript Implementation, JavaScript in HTML, Language Basics – Variables,
operators, statements, functions, Data type conversions, reference types,
Document object Model - browser object model - window object, location
object, navigator object, screen object, history object, Events and Event
handling, Button elements, Navigator object, validations with regular
expressions. Introduction to Dynamic documents, Positioning elements,
moving elements, elements visibility, changing colors and fonts, dynamic
content, Locating mouse cursor, reacting to a mouse click, dragging and
dropping of elements.

K. K. Bohra, Lachoo Memorial College

JavaScript Implementation
In Body Section

K. K. Bohra, Lachoo Memorial College

JavaScript Implementation
In Head Section

K. K. Bohra, Lachoo Memorial College

JavaScript Implementation
In Both the Sections

K. K. Bohra, Lachoo Memorial College

JavaScript Implementation
Access Element

K. K. Bohra, Lachoo Memorial College

JavaScript Implementation
Access Element

K. K. Bohra, Lachoo Memorial College

JavaScript Implementation (Vue Js)

K. K. Bohra, Lachoo Memorial College

JavaScript Implementation (AngularJs)

K. K. Bohra, Lachoo Memorial College

 JavaScript Statements
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

• A computer program is a list(sequence) of "instructions" to be "executed" by a

computer.
• In a programming language, these programming instructions are called
statements.
• A JavaScript program is a list(sequence) of programming statements.
• JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
• Most JavaScript programs contain many JavaScript statements.
• The statements are executed, one by one, in the same order as they are
written.
• Semicolons separate JavaScript statements.

K. K. Bohra, Lachoo Memorial College

 JavaScript Data Types
In JavaScript there are 5 different data types that can contain values:
– string
– number
– boolean
– object
– function
There are 6 types of objects:
– Object
– Date
– Array
– String
– Number
– Boolean
And 2 data types that cannot contain values:
– null
– undefined
K. K. Bohra, Lachoo Memorial College
 JavaScript Type Conversion
• JavaScript variables can be converted to a new variable and
another data type:
– By the use of a JavaScript function
– Automatically by JavaScript itself
• Converting Numbers to Strings
The global method String() can convert numbers to strings.
String(x) // returns a string from a number variable x
String(123) // returns a string from a number literal 123
String(100 + 23) // returns a string from a number from an expression
The Number method toString() does the same.
x.toString()
(123).toString()
(100 + 23).toString()

K. K. Bohra, Lachoo Memorial College

 JavaScript Type Conversion
• Converting Numbers
JavaScript treats primitive values as objectszvar x = 123;
The toString() method returns a number as a string.
x.toString(); // returns 123 from variable x
(123).toString(); // returns 123 from literal 123
(100 + 23).toString(); // returns 123 from expr 100 + 23
toExponential() returns a string, with a number rounded and written
using exponential notation.
var x = 9.656;
x.toExponential(2); // returns 9.66e+0
x.toExponential(4); // returns 9.6560e+0
x.toExponential(6); // returns 9.656000e+0
The toFixed() Method
The toPrecision() Method
The valueOf() Method and more
K. K. Bohra, Lachoo Memorial College
• Converting Strings to Numbers
Number("3.14") // returns 3.14
Number(" ") // returns 0
Number("") // returns 0
Number("99 88") // returns NaN
• Converting Booleans to Numbers
Number(false) // returns 0
Number(true) // returns 1

K. K. Bohra, Lachoo Memorial College

• Automatic Type Conversion
– When JavaScript tries to operate on a "wrong" data
type, it will try to convert the value to a "right" type.
5 + null
// returns 5 because null is converted to 0
"5" + null
// returns "5null" because null is converted to "null"
"5" + 2
// returns "52“ because 2 is converted to "2"
"5" - 2
// returns 3 because "5" is converted to 5
"5" * "2"
// returns 10 because "5" and "2" are converted to 5 and 2

K. K. Bohra, Lachoo Memorial College

 Document Object Model (DOM)

Document object Model - browser object

model - window object, location object,
navigator object, screen object, history object,
Events and Event handling, Button elements,
Navigator object, validations with regular
expressions.

K. K. Bohra, Lachoo Memorial College

 Document Object Model (DOM)
• With the HTML DOM, JavaScript can access and change all the
elements of an HTML document.
• The HTML DOM (Document Object Model)
– When a web page is loaded, the browser creates a Document Object
Model of the page.
• The HTML DOM model is constructed as a tree of Objects:
• With the object model, JavaScript gets all the power it needs to
create dynamic HTML:
– JavaScript can change all the HTML elements in the page
– JavaScript can change all the HTML attributes in the page
– JavaScript can change all the CSS styles in the page
– JavaScript can remove existing HTML elements and attributes
– JavaScript can add new HTML elements and attributes
– JavaScript can react to all existing HTML events in the page
– JavaScript can create new HTML events in the page
K. K. Bohra, Lachoo Memorial College
 Document Object Model (DOM)
• How to change the content of HTML elements
• How to change the style (CSS) of HTML elements
• How to react to HTML DOM events
• How to add and delete HTML elements

• What is the DOM?

– The DOM is a W3C (World Wide Web Consortium) standard.
– The DOM defines a standard for accessing documents:
– "The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update
the content, structure, and style of a document."
– The W3C DOM standard is separated into 3 different parts:
– Core DOM - standard model for all document types
– XML DOM - standard model for XML documents
– HTML DOM - standard model for HTML documents K. K. Bohra, Lachoo Memorial College
 Document Object Model (DOM)
• What is the HTML DOM?
– The HTML DOM is a standard object model and programming interface for
HTML. It defines:
– The HTML elements as objects
– The properties of all HTML elements
– The methods to access all HTML elements
– The events for all HTML elements

• In other words: The HTML DOM is a standard for how to get,

change, add, or delete HTML elements.

K. K. Bohra, Lachoo Memorial College

K. K. Bohra, Lachoo Memorial College
• JavaScript - HTML DOM Methods
– HTML DOM methods are actions you can perform (on HTML
Elements).
– HTML DOM properties are values (of HTML Elements) that you can set
or change.
• The DOM Programming Interface
– The HTML DOM can be accessed with JavaScript (and with other
programming languages).
– In the DOM, all HTML elements are defined as objects.
– The programming interface is the properties and methods of each
object.
– A property is a value that you can get or set (like changing the content
of an HTML element). Read only/read and write
– A method is an action you can do (like add or deleting an HTML
element).
document.getElementById("demo").innerHTML = "Hello World!“;
K. K. Bohra, Lachoo Memorial College
• Finding HTML Elements
– document.getElementById(id)
– document.getElementByName(name)
– document.getElementsByTagName(name)
– document.getElementsByClassName(name)
• Changing HTML Elements
– element.innerHTML = new html content
– element.attribute = new value
– element.style.property = new style
• Adding and Deleting Elements
– document.createElement(element) Create an HTML element
– document.removeChild(element) Remove an HTML element
– document.appendChild(element) Add an HTML element
– document.replaceChild(new, old) Replace an HTML element
– document.write(text) Write into the HTML output stream
• Adding Events Handlers
– document.getElementById(id).onclick = function(){code}

K. K. Bohra, Lachoo Memorial College

createElement() Method
var btn = document.createElement("BUTTON");
btn.innerHTML = "CLICK ME";
document.body.appendChild(btn);

removeChild() Method
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);

setAttribute() Method
document.getElementsByTagName("H1")[0].setAttribute("class",
“boyclass");

DOM style Property

document.getElementById("myH1").style.color = "red";

K. K. Bohra, Lachoo Memorial College

 Window Object
<script>
function openWin() {
window.open("https://www.lmc.org");

myWindow = window.open("https://www.lmc.com","_blank","toolbar=yes, location=yes,

directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no,
copyhistory=yes, width=400, height=400");

myWind = window.open("https://www.lmc.com","_blank","toolbar=yes, location=yes,

directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no,
copyhistory=yes, width=400, height=400");

function closeWin() {
myWind.close();
}
/*
if (myWindow.closed) {
msg = "is closed";
} else {
msg = "is open";
}
*/
</script>
</head>
<body>

<form>
<input type="button" value="Open Window" onclick="openWin()">
</form>

K. K. Bohra, Lachoo Memorial College

 Window Object
<script>
function openWin() {
w = window.open("https://www.lmc.org");
}

w.resizeBy(50, 50);
w.focus();

myWindow.moveTo(300, 0);
myWindow.focus();

window.scrollTo(0, 100);
</script>
</head>
<body>

<form>
<input type="button" value="Open Window" onclick="openWin()">
</form>

K. K. Bohra, Lachoo Memorial College

 Location Object
<script>
document.getElementById("demo").innerHTML =
"Page hostname is: " + window.location.hostname;

document.getElementById("demo").innerHTML =
"The full URL of this page is:<br>" +
window.location.href;

document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;

window.location.replace('https://www.lmc.org')“

window.top.location = “home.htm";
</script>

K. K. Bohra, Lachoo Memorial College

 Screen Object
<script>
document.getElementById("demo").innerHTML =
"Screen width is " + screen.width + screen.height;
</script>

History Object
<script>
function goBackForwd() {
window.history.back();
window.history.forward();
window.history.go(-2);// specific URL from History
}
</script>

K. K. Bohra, Lachoo Memorial College

 Screen Object
<script>
document.getElementById("demo").innerHTML =
"Screen width is " + screen.width + screen.height;
</script>

History Object
<script>
function goBackForwd() {
window.history.back();
window.history.forward();
window.history.go(-2);// specific URL from History
}
</script>

K. K. Bohra, Lachoo Memorial College

 Navigator Object
<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled is " + navigator.cookieEnabled;

document.getElementById("demo").innerHTML =
“Browser Name is " + navigator.appCodeName;

document.getElementById("demo").innerHTML =
"javaEnabled is " + navigator.javaEnabled();

</script>

K. K. Bohra, Lachoo Memorial College

 Popups
<script>
function myFunction() {
alert("I am an \n alert box!");
}

if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}

var person = prompt(“Enter your name:", “default text");

</script>

K. K. Bohra, Lachoo Memorial College

 Timings
<button onclick="setTimeout(myFunction, 3000);">Try
it</button>

<script>
function myFunction() {
alert('Hello');
}
</script>

K. K. Bohra, Lachoo Memorial College

 Links to visit
• https://javascript.info/intro
• https://medium.com
https://www.w3schools.com
• https://www.tutorialspoint.com/index.htm
• https://www.javatpoint.com/javascript-tutorial
and off-course
• https://en.wikipedia.org

K. K. Bohra, Lachoo Memorial College

K. K. Bohra, Lachoo Memorial College
• Unit 2
Introduction to Server side Programming, Introduction to PHP , PHP and
HTML, essentials of PHP, Why Use PHP, Installation of Web Server, WAMP
Configurations, Writing simple PHP program, embedding with HTML,
comments in PHP, Variables, Naming Conventions, Strings, String
Concatenation, String functions, float functions.

• Unit 3
Arrays, Array – Key pair value, Array functions, is SET, UNSET, gettype(),
settype(), control statements (if, switch), Loops, User Defined Functions
(with argument, return values), global variable, default value, GET - POST
method, URL encoding, HTML Encoding, Cookies, Sessions, Include
statement. File: read and write from the file. Ethical use of features of PHP.

K. K. Bohra, Lachoo Memorial College

• Unit 4
PHP with MySQL, Creating Connection, Selecting Database, Perform
Database (query), Use returned data, close connections, file handling in
PHP – reading and writing from and to FILE. Using MySQL from PHP
(Building a Guestbook). Self Learning: Introduction to MySQL, CRUD -
Select statements, Creating Database/Tables, Inserting values, updating
and Deleting.

• Unit 5
Introduction to OOPS, creating classes, creating objects, setting access to
properties and methods. Constructors, destructors, overloading and
overriding of methods. Accessing PHP and HTTP Data. Reading POST and
GET variables. Service Learning: - Teaching the Website design to school /
College students - Creating a website for a School/ NGO/
College/Department.

K. K. Bohra, Lachoo Memorial College

 Introduction
• PHP is recursive acronym.
• Full Form ‘Hypertext Preprocessor’
• Also called as ‘Personal Home Page’
• PHP is a language used to make HTML (web development) more dynamic.
• PHP is an open-source, interpreted, server side and object-oriented
scripting language.
• It modifies the HTML of a page before it leaves the server-
• (the client browser sees only HTML code)
• PHP can be integrated directly with HTML, can be embedded into HTML
• A page can be written entirely in HTML,
• PHP files take the extension ".php".
• It is important to note that you must have a web server installed on your
machine to test your PHP.
• You can create and use sessions and cookies, in PHP.
• Data encryption and validation
Features of PHP
Web Development Need
JS Framework and PHP Framework
 H/W and S/W Requirements
• Hardware Requirements
– Minimum 350MB Hard Disk space for installation

– 4GB space required for a typical live system with 1000-2000 events

– Recommended minimum CPU - Pentium 4, 3.2GHz

– Recommended 1GB RAM for a Central Server with 3 Nodes

– Network card

• Software Requirements
– Server

– web space with a hosting company

 Software Server solution
• WAMP Server

• LAMP Server

• MAMP Server

• XAMPP Server

• SAMP Server

• FAMP Server
WAMP Microsoft window o/s, Apache, MySQL, PHP
LAMP Linux o/s, Apache, MySQL, PHP
MAMP Mac o/s, Apache, MySQL, PHP
SAMP for Solaris
FAMP for FreeBSD
XAMPP
X-OS (cross operating system), Apache, MySQL, PHP
and Perl

Download and Install WAMP Server

Click me to download WAMP server
Download and Install LAMP Server
Click me to download LAMP server
Download and Install MAMP Server
Click me to download MAMP server
Download and Install XAMPP Server
Click me to download XAMPP server
Use a Web Host with PHP Support

If your server has activated support for PHP you DO NOT

NEED to do anything.

Just create some .php files, place them in your web directory,
and the server will automatically parse them for you.

You DO NOT NEED to compile anything or install any extra

tools.

Because PHP is free, most web hosts offer PHP support.

Set Up PHP on Your Own PC

However, if your server does not support PHP, you must:

•install a web server

•install PHP
•install a database, such as MySQL
 Basic PHP syntax and PHP Delimiters
• The Standard Generalized Markup Language (SGML) is a language for
defining markup languages. HTML is one such "application" of SGML.

Escaping to PHP
• The PHP parsing engine needs a way to differentiate PHP code from other
elements in the page. The mechanism for doing so is known as 'escaping
to PHP‘.

There are four ways to do this −

 four ways…
1. Canonical PHP tags (accepted as genuine)
The most universally effective PHP tag style is −

<?php
phpinfo(); //it must be protected
?>

If you use this style, you can be positive that your tags will always be correctly
interpreted.
 four ways…
2. Short-open (SGML-style) tags or Short or short-open tags
<?...?>

Short tags are, as one might expect, the shortest option you must do one of
two things to enable PHP to recognize the tags −
Choose the --enable-short-tags configuration option when you're building
PHP.
Set the short_open_tag setting in your php.ini file to on. This option must be
disabled to parse XML with PHP because the same syntax is used for XML
tags.
 four ways…
2. Short-open (SGML-style) tags or Short or short-open tags
<?...?>

Short tags are, as one might expect, the shortest option you must do one of
two things to enable PHP to recognize the tags −
Choose the --enable-short-tags configuration option when you're building
PHP.
Set the short_open_tag setting in your php.ini file to on. This option must be
disabled to parse XML with PHP because the same syntax is used for XML
tags.
 four ways…
3. ASP-style tags
ASP-style tags mimic (imitate) the tags used by Active Server Pages to
delineate code blocks. ASP-style tags look like this −

<%...%>

To use ASP-style tags, you will need to set the configuration option in your
php.ini file.
HTML script tags
HTML script tags look like this –

<script language="PHP">...</script>
 Note
1. <?php … ?>
It is most probably used delimiters and also preferable, since, PHP code enclosed with in <?php .. ?>
could be recognized with other PHP servers independent of the tag related configuration directives.

2. <script language=”php”></script>
This will also work anywhere, like <?php … ?>.

3. <? … ?>
This is called as PHP short tags which will work based on the value set with short_open_tag directive of
PHP configuration file.

4. <?=..;?>
This is also short form of denoting PHP code, but used as an alternative representation of PHP print
statement.

5. <% … %> or <%=;%>

This is the delimiters for writing Active Server Pages(ASP) code. But it will be used for PHP code if and
only if asp_the asp_tags directive is enabled.
 Note
• Another point to mention before we go into the world of
variables is that certain statements in PHP must be followed
by a semi colon. Things such as function definition opening
and closing statements, loop opening and closing statements
and class opening statements do not require semi colons.
Things such as variable definitions, echo statements and
function calls do.
 Commenting PHP Code
Single-line comments
<?
# This is a comment, and
# This is the second line of the comment

// This is a comment too. Each style comments only

print "An example with single line comments";
?>

Multi-lines comments
<?
/* This is a comment with multiline
Author : Mohammad Mohtashim
Purpose: Multiline Comments Demo
Subject: PHP
*/

print "An example with multi line comments";

?>
 PHP is whitespace insensitive
Whitespace is the stuff you type that is typically invisible on the screen, including spaces, tabs, and
carriage returns (end-of-line characters).

PHP whitespace insensitive means that it almost never matters how many whitespace characters you
have in a row. One whitespace character is the same as many such characters.

For example, each of the following PHP statements that assigns the sum of 2 + 2 to the variable $four is
equivalent −
<?
$four = 2 + 2; // single spaces
$four <t>=<t>2<t>+ 2 ; // spaces and tabs
$four =
2+

2; // multiple lines

All results in 4
?>
 PHP is case sensitive
• Yeah it is true that PHP is a case sensitive language.

<html>
<body>

<?php
$capital = 67;
print("Variable capital is $capital<br>");
print("Variable CaPiTaL is $CaPiTaL<br>");
?>

</body>
</html>

Variable capital is 67
Variable CaPiTaL is
Statements are expressions terminated by semicolons

A statement in PHP is any expression that is followed by a semicolon (;).

Any sequence of valid PHP statements that is enclosed by the PHP tags is a
valid PHP program. Here is a typical statement in PHP, which in this case
assigns a string of characters to a variable called $greeting −
<?
$greeting = "Welcome to PHP!";
?>

Expressions are combinations of tokens

The smallest building blocks of PHP are the indivisible tokens, such as
numbers (3.14159), strings (.two.), variables ($two), constants (TRUE), and
the special words that make up the syntax of PHP itself like if, else, while,
for and so forth
Braces make blocks
Although statements cannot be combined like expressions, you can always put a sequence of statements
anywhere a statement can go by enclosing them in a set of curly braces.
if (3 == 2 + 1)
print("Good – Bye !.<br>");

if (3 == 2 + 1)
{
print("Good - I haven't totally");
print("lost my mind.<br>");
}

Running PHP Script from Command Prompt

<?php
echo "Hello PHP!!!!!";
?>
Now run this script as command prompt as follows −
$ php test.php

It will produce the following result −

Hello PHP!!!!!
Objective type

K. K. Bohra, Lachoo Memorial College

 Objective type
1. Full form of JS and PHP ?

2. Initially JS was called ?

3. Name any markup language.

4. Full form of MEAN, MERN, MEVN.

5. What are Transpilers?

K. K. Bohra, Lachoo Memorial College

Multiple choice

K. K. Bohra, Lachoo Memorial College

Multiple choice

K. K. Bohra, Lachoo Memorial College

Short answer (2 to 3 lines)

K. K. Bohra, Lachoo Memorial College

Short answer (2 to 3 lines)

K. K. Bohra, Lachoo Memorial College

Short answer (2 to 3 lines)

K. K. Bohra, Lachoo Memorial College

Short answer (2 to 3 lines)

K. K. Bohra, Lachoo Memorial College

Short answer (2 to 3 lines)

K. K. Bohra, Lachoo Memorial College