Simplified Computer Science Department: 2016

Saturday 14 May 2016

How Big is Java ?

Frankly Saying Nothing is Big it is just a opportunity given to programmers enabling many features.

The Main IDE software that you need to install is Netbeans

The Java Compromises of Various things .These things are as follow :-

1) JDBC

--for database management etc. For this there is whole complete subject in computer Science also.

--Anyway to implement its inbuilt function you use library

import.java.sql.*

--In this case beside netbeans you also need to download sql software which is a software that runs in cmd of window.

--Also you can say it is use to connect front end with backend

2)RMI-Remote Method Invocation
--This is use for eg you have two servers in e-commerce.if you want if in one server there is deduction of Rs 10/- then the same thing should be reflected back on another server.This synchronization is achieve by RMI

--This has a server like glassfish, appache tomcat

--you can design a calculator using a RMI

--here you use library
import.java.rmi.*

3)Servelets

--In this you do XML coding .
--This is use for
--Cookies
--Session tracking
--URL rewriting

4)EJB-Enterpreneur Java Beans

5)JSP-Java Server Pages

6)MVC/validator framework

7)Android

8)Struts

Some More Things that are there in java

--In class also there is a concept of class and inheritance
here you can saee class is HelloForm and HttpServlet is the inbuilt class from which function needs to be inheritate.Note while inheritance in java you have to use keyword extends

Anyway want to learn Java [Click Here]

Wednesday 6 April 2016

Art of Understanding an Algorithm

For Understanding the Algorithm. You first need to fascinate by its practical working.

After that Break that whole practical action into smallest step possible and Analyse each step that cause that whole magic

Try to come out from comfort zone and try till you not reach for success

Some Basic Algorithms from which you can start brushing up you skills

1) Bubble Sort

......other sorting techniques

stack

queue

circular queue

Make practical programs for all

Watch the Below Video in Silent Mode.It will give you the guidance How practically you should understand the algorithum

Sunday 3 April 2016

Inheritance

Pointer :C/C++ brush up

int a;
&a address of a
int *p capable of storing address of a non pointer
int **p capable of storing address of a pointer .this is also known as double pointer

Let us consider and code to understand above concept better

int *p;
int **c;
int a[ ]={1,2,3,4};
*p=a; //*p gives value of a[0] i.e 1
**c=&p; //c gives value(pointer stores address in its value) of p pointer 2293552
//**c gives address of p pointer
//*c --check yourself ! I don't Know
printf("%u",p); //p gives address of a[0] 2293548
*(a+i) is same as a[i]
(a+i) is same as a or &a

Notations for 2-D array

// in 1-d array you write int*p=a; but if a is 2-d array then this statement will give error
int b[2][3]={ {1,2,3} , {3,4,2} }; //here b[0] occupy 8 bytes as 2 x {[0],[1],[2],[4]}=2 x 4=8
int(*p)[3]=b; <--correct statement
printf("%d",*b); / printf("%d",b[0]); / printf("%d",&b[0][0]); / printf("%d",b);printf("%d",&b[0]); <--means an address of first element.first row b[0][0]
.
printf("%d",*(*b+1)); <--means value at b[0][1] which is 2
.
Concluded: b[i][j]=*(b[i]+j) / *(*(b+i)+j)
.
.
printf("%d",b+1);/printf("%d",*(b+1));/printf("%d",b[1]);/printf("%d",&b[1][0]);<--means
//address of first element second row b[1][0]
printf("%d",*(b+1)+2);. //means address of b[1][2]

Notations for 3-D array

int c[3][2][2]={ {{2,5},{7,9}} , {{3,4},{6,1}} , {{0,8},{11,13}} };
c[i][j][k]
printf("%d",*c) / printf("%d",c[0]) / printf("%d",c[0][0]) <--addr of c[0][0][0]
printf("%d",*(c[1]+1))/ / printf("%d",c[1][1])/ / printf("%d",&c[1][1][0])<--addr of c[1][1][0]
printf("%d",*(c[0][1]+1)) <--value of c[0][1][1];
i.e c[i][j][k]= / printf("%d",*(c[i][j]+k));/printf("%d",*(*(c[i]+j)+k));/printf("%d",*(*(*(c+i)+j)+k));

Do you Know ?

loop pointer move by size of data type
scanf has &a to take value
printf has just a to print value
in array no need to write & while passing address

type specifier for printing a address--%u

Ways of Passing Array from Function: C/C++ Brush up

In programming we make a call by two methods
1)call by value- Pass a value
2)call by reference - Pass a address and fun taking this address should have pointer.And also to display result again pointer.

Array is passed to a function using Call be reference.

There is Two ways

1) Using &

void main( )
{
int a[5]={1,2,3,4,5}
for(int i=0 ; i<=4 ;i++)
{
printarray(&a[0]); //or printarray(&a);[NOT SURE]
}
}
.
.
.
.
void printarray(int *p)
{
printf("%d",*p);
}

2) Without Using &

void main( )
{
int a[5]={1,2,3,4,5}
printarray(a);
}
.
.
.
.
void printarray(int *p)
{
for(int i=0 ; i<=4 ;i++)
{
printf("%d",*p);
}
}
}

Passing Character Array through a Function

STRING IS THE ARRAY OF CHARACTER WITH ONE NULL '\O' CHARACTER IN THE END

There is 4 ways of initilizing a character

char c[4];
c[0]='j'; c[1]='o'; c[2]='h'; c[3]='n'; c[4]='\0';

c[ ]={'j','o','h','n','\0'}

3)Using String Literal

c[ ]="john";

4) Using Pointer

char*c="Hellow";

int main( )
{
char *c="Hellow";
print( c)
.
return(0);
.
}
.
.
.
.
..
.
void print(char *c)
{
int i=0;
while( *(c+i)!= '\0') )
{
printf("%c",c[i]);
i++;
}
printf("\n");
}
.
.//or
.
.
.
.
.
void print(char *c)
{
while( *(c)!= '\0') )
{
printf("%c",c[i]);
c++;
}
printf("\n");

Passing a 2-Dimentional Array through a Function

while passing two dimensional array to function last dimension is compulsory

int func (int a[ ][3])
{
.
.
.
.
.}

Passing a 3-Dimentional Array

int func (int a[ ][2][2]) / (int (*a)[2][2])
{
.
.
.
.
.}

STL:Stack and queue C/C++ brush up

STL:Standard Temparary Library

In RAM and we have a stack memory !

Now in Programming we store our data in stack or queue . and we implements these
using data structure
1)Array
or
2)Link List
or
3)Trees.

all these data structures are interconnected .you can create array to queue ,queue to array

Stack

Operations on stack

Push
Pop
Is Full
Is Empty

--Exbhibit LIFO (Last in first out)
--Here in stack we have have one pointer only

Push

S-our stack array
N-size of our stack array
Top-stack pointer
x-element to be pushed

push(S,N,Top,x)
{
if(Top+1==N)
{
printf("Stack Overflow");
exit;
}
else
{
Top++;
S[Top]=x;
}

Pop

--here we are only delecting the top most element of stack array S. as here we what to return the elemet which would be de;leted so for that we will use int return type of following function

int pop(S,N,Top)
{
int y;
if (Top==-1)
{
printf("Stack Underflow");
exit;
}
else
{
y=S[Top];
Top--;
return y;
}

Queue

Operations on queue

Enqueue-Data Insert <--->Push in stack
Dequeue- Data Delete
Is Full
Is Empty

--Here in an array of queue we have two pointer

front--Tells deletion
rear--Tells insertion

Enqueue

in below code

Q-Our Array

N-Size of our array

F-Front pointer of our queue

R-Rear pointer of our queue

x-element we want to put

void enqueue(Q,N,F,R,x)
{
if(R+1==N) //means if R+1 ==size of an array
{
printf("Queue is overflow");
exit;
}
else if
{
if(F==R==-1)
{
F=R=0;
}
else
{
R=R+1;
}
Q[R]=x;
}

Dequeue

Here no x .because our aim is to just delete one element which is always from front and we also want what is the value of deleted array that's why we are returning from our function.

------------------------------------

^ ^

Front Rear(insertion)

(Deletion)

int dequeue(Q,N,F,R)
{
int y;
if(F==R==-1)
{
prinf("underflow");
exit;
}
else
{
y=Q[F]; //delete
if (F==R) //means in case if all element is before F is already deleted i.e null and we
//know after R there is nothing So , Both R & F vacant in makes no sense so
//to get rid of that Awkward situation we are placing both in front.And
{
F=R=-1;
}
else
F=F+1;
return y;
}
}

Typecasting C/C++ Brush up

WHEN SOME BIG SPACE DATA TRY TO INSERT IN SMALL SPACE DATATYPE THERE OCCUR'S AN ERROR SO TO REMOVE THAT ERROR WE DO TYPE CASTING.

suppose you have two datatypes let say
int a=2; [2 byte] (int a=300 will be stored in meom as 00101100 00000001
float b=3.2; [4 byte]

Now in case you write an instruction

a=b; i.e [2 byte]<--[4 byte] then it will give error

so, for that you need to type cast above 4 byte float data type into int

i.e a=(int)b; Now it will not give any error

Let's Here only discus the Meomory allocation in array How data will store in
int a[5]={300,301,302,20,40}

300=00000001 00101100 but in meomory first LSB is stored then MSB
similarly 301= 00000001 00101101
i.e as 00101100 00000001 and then for 301..302..20..40

further

let i have
int a[5]={300,301,302,20,40};
int *b;
int *b=a ; / int *b=&a; ----OK NO ERROR
char*c;
(char*)c=a; <--NO ERROR IT WILL GIVE U ONLY 1 BYTE FROM INT.
*c=a; ---ERROR [1byte]<--[2byte]
*c=(char*)a;---OK,NO ERROR

float *d;
*d=a; [4 byte]<--[2byte] Ok, NO ERROR.

in arithmatic typecasting is done automatically

#incude <stdio.h>
#include <conio.h>
int main()
{
int a=20;
char k;
printf("type casted k=(char)a ");
k=(char)a;
printf("the value of k=%c\n",k);
printf("type casted a=k ");
k='a';
a=k;
printf("the value of a=%c\n",(char)a);
getch();
return 0;
}

Storage Class C / C++ Brush up

C language

Storage Class
storage classes tell you about for things

initial value
meomory location
scope of variable
lifetime of variable

1)auto -meomory create at run time

-declare inside main( )

-in variable default is auto

//even if u don't write auto then also program works same
#include<stdio.h>
#include<conio.h>
int main()
{
double goa;
auto int i; //here i don't have any value therefore it will print some garbage value
printf("i=%d",i);
goa=addi();
printf("goa i=%d",goa);
getch();
return 0;
}
int addi() /
{
auto int i ;
printf("add i=%d",i); //now here i value will change as this is auto and scope of that i ended
return i;
}
/*u know how scope overs ? i tell u this code works in stack area of ram and when scope overs
then in stack meomory previous i value get poped i.e it get deleted.
and Now as soon as i get initialised in addi() at that time lifetime of previous i variable get
over */

summary

initial value-garbage value
meomory location-stack (in every case meomory created in stack at compile time)
scope of variable-Local
lifetime of variable-Till control remain with that function

2)register -meomory create at compile time

-store in register and not in ram

-for very fast access suppose you have make counter

#include <stdio.h>
#include <conio.h>
//register storage class ..very fast storage class use in cpu
int main()
{
reg int i;
if(i--)
{
printf("%d",i);
main();
}
getch();
return 0;
}

summary

-same summary as auto the only difference here accessing is through cpu rather than ram due to which it is a quick access

initial value-garbage value

memory location-stack

scope of variable-Local

lifetime of variable-Till control remain with that function

3)static-meomory create at runtime

#include <stdio.h>
#include <conio.h>
//no i outside
int main()
{
static int i=3;
if(i--)
{
printf("%d",i);
main();
}
getch();
return 0;
}

in above program your output will be 210 but now in above program if u don't write keyword static i.e if u write code

#include <stdio.h>
#include <conio.h>
int main()
{
int i=3;
if(i--)
{
printf("%d",i);
main();
}
getch();
return 0;
}

then you will get 22222222........infinite times as in that case there will be just int which is auto storage class as we know . so, in this case meomory will be created at runtime .

IN COMPILER PROGRAM FIRST COMPILED THEN COMES ON RUNTIME

SO U CAN SAY STATIC NOT SUPPORT RECURSION

summary

initial value-0 and not garbage value
memory location-stack
scope of variable-Local
lifetime of variable-Till control remain with that function

4)extern-meomory create at runtime

With this storage class you can access same common variable in any function all across program

#include <stdio.h>
#include <conio.h>
int i=3; //i declare outside here
int main()
{
extern int i; //this statement means don't create seprate meom for i here as i is already
//created globally
//let if u write here i=5 then it will change i value all across program.
if(i--)
{
printf("%d",i);
main();
}
getch();
return 0;
}

HERE IN CASE IF U DON'T INITIALIZE YOUR VARIABLE GLOBALLY THEN U WILL GET AN ERROR.

summary

initial value-garbage value

memory location-stack

scope of variable-Local

lifetime of variable-Till control remain with that function

Saturday 26 March 2016

How to Create a Website with or without from scratch?

Creating a website from ready-made software's

There are 5 steps in creating a website
1) By a Domain --from Godaddy ,Bigrock etc etc. ( I suggest Godaddy)

2) Chose your Hosting--Godaddy,Wordpress,Hostinger etc etc. (I suggest free hosting from hostinger)

3) If not buying a hosting from wordpress then install wordpress in cloud of your hosting and there only set a username and password for your wordpress account .
watch a video given below

4)Link your hosting server (gernally called as name server) to your domain account
watch a video given below

5) Wait for 2-3 hours your website will be activated .Just check your activation at
www.xyz.com/wp-admin.Now enter your wordpress username and pass that you have set while installing wordpress in your hosting

Creating a website from Scratch

Here i can help you by giving my scratch material rest is your dedication and creativity

Software you are required to install

1)notepad ++

2)wamp server-if ur pc is 64 bit

xampp server-if ut pc is 32 bit . Little difficult to get

3)Bootstrap libraries--which should be present in the same folder where you are creating your html and css file.i will tell about these two files in future text.

The Things you Should Know

Html

it is the basic language that you have learnt in your 10th class .

Given are the basic codes that you can type and check. Now you will also ask why should i learn html as now there is a time of html 5 . Now my friend as far as i reseached i get html 5 is nothing but the html only with only one major difference which is that in html you need to install many plugins to interact video and audio's with your html page .but html5 only makes linking these video's and audio's with the simple <video> and <audio> tags with many other cool functionalities also.

<html>
<head>
<title>form</title>
<body>
<form>
<h1 align="center">welcome to simplified theory survey</h1>
<img src ="
C:\Users\Himanshu\Desktop\simplified theory.PNG" alt="sorry for inconvinence" height="250" width="200">
<p>what is your name?</p>
<input type="text" name="name"><br>
<p>what is your gender?</p>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
<br>
<p>which language do u know?</p> <--!check boxes are for multiple select-->
<h3><u><i>which language do u know?</u></i></h3>
<input type="checkbox" name="language" value="java">java<br>
<input type="checkbox" name="language" value="c">c<br>
<br>
<input type="submit" name="Submit" value="submit"><br>
<a href="link.html">click here to open link</a>
</body>
</head>
</html>

Must change image link before using this code

Now what is the css file

CSS is a file that is the kind of facial Makeup for your html file.i.e u can have a beutiful borders and Some More Cool Graphical Sort of things with your css file.

The given below file is excercise1.html file

<html>
<head>
<title>Excercise 1</title>
<link
rel="stylesheet"
href="excercise3.css"
type="text/css"
media="all"
/>
<body>
<h1>welcome to Excercise 1 page</h1>
<h2>welcome to Excercise 1 page</h2>
<h3>welcome to Excercise 1 page</h3>
<ul>
<li>thankyou</li>
<ol type="a">
<li> this is a no.1</li>
<li> this is a no.2</li>
</ol>
<li>welcome</li>
</ul>
<table border="1">
<tr>
<td><a href="link.html">click here</a>
</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<a href="link.html">click here</a>
</body>
</head>
</html>

In above code .This code i.e

<link
rel="stylesheet"
href="excercise3.css"
type="text/css"
media="all"
/>

is linking your that html file with the css file "excercise3.css" . which is as follow

body
{
background-color:pink;
border-style:solid;
border-width:5px;
padding-top:50px;
padding-right:20px;
padding-left:30px;
background-image:url("file:///C:/Users/Himanshu/Desktop/simplified%20theory.PNG");
}
li
{
font-family:"Times New Romon";
font-size:25px;
margin-left:100px;
color:red
}

Now see in this css file you are giving property of all material under body tag some features like

You are saying that background color should be pink,border style should be solid and etc etc.In that exercise1.html code .u also has link.html file .the code of this file is provided below

<html>
<head>
<title>link.html</title>
<body>
<h1>Welcome to link.html</h1>
<br>
<img src="
C:\Users\Himanshu\Desktop\simplified theory.PNG" alt="sorry for inconvinence" height="250" width="200">
</body>
</head>
</html>

In above code alt will be dispayed if image will not displayed. And that height and width is specified for the image that we want to get displayed.

Now Let us discuss about bootstrap

As far as i have make out bootstrap is the name of library which facilates a kind of more new features to your html file beside css file.like table hover .table stripped etc.
One more new thing you will find in a below bootstrap code is concept of class and div .learn about in detail from the video provided below

Now let us finally let see the simple example of bootstrap library

<html>
<head>
<title>bootstrapuse </title>
<link
rel="stylesheet"
href="bootstrap.css"
type="text/css"
media="all"
/>
<link
rel="stylesheet"
href="bootstrap.min.css"
type="text/css"
media="all"
/>
<link
rel="stylesheet"
href="bootstrap-theme.css"
type="text/css"
media="all"
/>
<link
rel="stylesheet"
href="bootstrap-theme.min"
type="text/css"
media="all"
/>
</head>
<body>
<div class="container">
<div class="col-lg-6">
<h2>col1</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-6">
<h2>col2</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-12">
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col1</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col2</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col3</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col4</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col5</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col6</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col7</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col8</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col7</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col8</h2>
<p>hgdweyjfdguerfb</p>
</div>
</div>
</body>
</html>

Now here the output of the above code will something like as follow

The above code was just to make out the understanding of class,div and the New kind of font and graphics featured by bootstrap library that you can find by analyzing about output.

Now if want to master you should now only work on 2 major projects which are shown an taught through video given in the last of every project.

1.collapse Navigation Bar

It will look like

Code:

<html>
<head>
<title>Google</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>

To Know it's made watch Video given below:-

And

2nd Project is the Sliding Bar

It will look like

Code

<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img
{
width: 40%;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Cat" width="200" height="200">
</div>
<div class="item">
<img src="2.jpg" alt="Cat" width="200" height="200">
</div>
<div class="item">
<img src="3.jpg" alt="Cat" width="200" height="200">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>

Video

Now Let us learn what is PHP

Till Now whatever u have studied was the part of Website Designing .i.e that stuff will make you capable to draw how your website should look..

But what about a adding a feature like adding calculator feature and other kind of feature for your website for that you need a programming langauage. PHP and java script are that programming languages only.

Watch below 2.15 minutes of video to make out better what i have just expalined

Now let us discuss the basic code of php's

suppose you have created a form html file as earlier but now you also want to see what you have entered in your field. for that you need a two files one of html and other that of php

the given file is formecho.html

<html>
<body>
<form action="formecho.php" method="POST">
email:<input type="text" name="email">
phn num:<input type="text" name="phn">
<input type="submit" name="button" value="submit">
</form>
</body>
</html>

and there is also one php file along with it which is named as phpecho.php for simplicity

and its code is as follow :-

<?php
if(isset($_POST["button"]))
{
$email=$_POST["email"];
$phn=$_POST["phn"];
echo $email;
echo '<br>';
echo $phn;
INSERT INTO `students`(`id`, `name`) VALUES ('$phn','$email')
}
?>

Now here <? lab lab ! ?> is the syntax of php file and

$ is used to intiallize variable like here email ,phn

and

echo is a keyword that is use to display the variable

and INSERT command is the sql command which will be used in order to put this data in your database. and obviously this database needs an server and for that only we have dowloaded an ofline server XAMPP in case you have 32-bit processor and WAMP in case you have 64-bit processor.How to use this server and run above code i will tells soon . One more thing i want to tell that while you will run your code in 32-bit PC .there you may have chances that you might not run some of the programs in your ofline server XAMP but surely if your approch is correct than u will run them your practical server i.e your hosting.

Now let us discuss How to use this server and run above code

To use above server followuing commands will be used like

1)localhost/formecho.php to run your php code

2)localhost/phpmyadmin to create your data base

How to create phpmyadmin database for that 2-3 min video given below

the above video is for XAMP similar steps is for WAMP also.

I have written one code for fetching data from wamp server .you can have a look at it.in the below code the beauty is that i have used both php as well as html code in same file named as "fetchingdatafrombackend.php".the code is here-->

<?php
error_reporting(E_ERROR);
include "connect_to_mysql.php";
$sql= mysql_query("SELECT * from students");
while($row=mysql_fetch_array($sql))
{
$name=$row["name"];
$stream=$row["stream"];
$view .='
<tr>
<td>'.$name.'</td>
<td>'.$stream.'</td>
</tr>
';
}
?>
<html>
<head>
<title>Data from backend</title>
</head>
<body>
<h1>DATA from backend</h1>
<table border="1">
<tr>
<td>Name</td>
<td>Stream</td>
<td>id</td>
</tr>
<?php echo $view;?>
</table>
</body>
</html>

Now what is javascript

i also not know much about it but know when u open your google chrome-->right click-->inspect and go to console that is a command window of java script. Must type 2+3 there and see the magic you will find 5 as your output....

Learn Javascript and Must share your own short blog like mine in comment section

Beside above i have also done lot more research on creating more sexy websites.

For that you can

1) Google WebDeveloper tool

2) Gdrive and Google also have its free hosting if you are into coding then you can check Google Cloud

Watch Video

To test your above webpages you can use

1) Github

2) you can also get free domain with .tk extension at dot.tk website

There are also following smart ways to Host your Website

Google Cloud Storage: How to Host a Static Website
Google Drive: How to host a web page on Google Drive
AWS (S3): Static Web Hosting With Amazon S3