PHP JavaScript: 01/18/18

PHP And JavaScript

PHP

PHP is a server-side scripting language and a powerful tool for making dynamic and intuitive Web pages.

PHP: Hypertext Preprocessor

Code written in PHP executes considerably speedier than those Code written in different languages, for example, JSP and ASP.

It is powerful enough to run the largest social network (Facebook)! and biggest blogging system on the web WordPress.

PHP is platform independent i.e runs on various platforms (Windows, Linux, Unix etc.)

PHP is compatible with almost all servers(IIS, Apache etc..).

PHP can create, open, read, write, delete, and close files on the server

PHP can add, delete, modify data in your database
PHP can secure the data by encrypting

PHP can output images, PDF files, and even Flash movies. You can also output any text, such as XHTML and XML and JSON.

PHP file can contain content, HTML, CSS, JavaScript.

<!DOCTYPE html>
<html>
<body>

<?php

echo "Learn PHP";

document.write("PHP and JavaScript");

</script>

</body>

</html>

Wide range of extensions and other ad-onsLarge Community/Libraries/Frameworks
3rd Largest StackOverflow Community
5th Largest Meetup Community
5th Most Popular language at GitHub

Best documentation on the web Tons of blogs and

"PHP is easy to learn"

JavaScript

JavaScript is an object-based scripting language that is lightweight and cross-platform.

JavaScript is translated. The JavaScript Translator (embedded in the browser) is responsible to translate the JavaScript code.

JavaScript can be used for client-side validation
JavaScript can be used for dynamic drop-down menus
JavaScript can be used for displaying data and time
JavaScript can be used for show and hide data
JavaScript can be used for displaying popup windows and dialog boxes

<!DOCTYPE html>
<html>
<body>

<h2>Welcome to JavaScript</h2>

document.write("Hello JavaScript by JavaScript");

</script>

</body>

</html>

How To Select Data From a MySQL Database Using PHP?

Step 1: Connect to MySQL Database

<?php

$DatabaseServer = "localhost";

$DatabaseUsername = "root";

$DatabasePassword = "root";

$DatabaseName = "demo";

$Connection = mysqli_connect($DatabaseServer , $DatabaseUsername , $DatabasePassword , $DatabaseName);

if($Connection === false){

die("ERROR: Could not connect. " . mysqli_connect_error());

}

Step 2: Fetch Data From MySQL Database

<?php

$SQL = "SELECT * FROM user";
$Result = mysqli_query($Connection, $SQL);

while($Row = mysqli_fetch_assoc($Result)

{

echo $FirstName = $Row['FirstName '];
echo $Email = $Row['Email'];

}

?>

Mysql: Run these queries

CREATE TABLE `user` (

`UserID` int(12) NOT NULL,

`FirstName` varchar(48) NOT NULL,

`LastName` varchar(48) NOT NULL,

`Email` varchar(128) NOT NULL,

`City` varchar(48) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `user` (`UserID`, `FirstName`, `LastName`, `Email`, `City`) VALUES

(1, 'Ram', 'Sri', 'zzz@zzz.com', 'Delhi'),

(2, 'Krishna', 'Vasudev', 'yyy@yyy.com', 'Delhi');

Please find the below link to know how to set up a local server(XAMPP) and creating a database.
http://www.phpjavascript.com/2018/01/how-to-set-up-local-server-using-xampp.html

How to Show and Hide Content Based on Dropdown Selection in JQuery

We mainly use Jquery #id selector, Jquery .class selector and Jquery change () method to show and hide div element based on dropdown selection.

The #id selector selects the element with the specific id. The id refers to the id attribute of an HTML element.

Note: The id attribute must be unique within a document.

The .class selector selects all elements with the specific class. The class refers to the class attribute of an HTML element. The class attribute is used to set a particular style for several HTML elements.

The change () method triggers the change event, or attaches a function to run when a change event occurs. The change event occurs when the value of an element has been changed when an option is selected in select menus.

The following example will demonstrate you how to show and hide div elements based on drop down selection.

view.html

<html>

<head>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script>
        $(function () {
            $('.SelectRole').hide();
            $('#Role').change(function () {
                $('.SelectRole').hide();
                $('#' + $(this).val()).show();
            });
        });
    </script>
</head>
<select id="Role" name="Role" class="form-control">
    <option value="">Select</option>
    <option value="Teacher">Teacher</option>
    <option value="Parent"> Parent</option>
    <option value="Student">Student</option>
</select>
<div id="Teacher" class="SelectRole">
    <div>You have selected teacher</div>
</div>
<div id="Parent" class="SelectRole">You have selected parent
</div>
<div id="Student" class="SelectRole">
    <div>You have selected student</div>
</div>
</html>

Output:

How To Set Up Local Server Using XAMPP?

XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP (P) and Perl (P). It is a simple, light-weighted Apache server that makes it extremely easy for developers to create a local HTTP server with just a few clicks.

Step 1: Download XAMPP

Download one of the version of XAMPP from the link given below

https://www.apachefriends.org/download.html

Step 2: Install XAMPP

The installation of XAMPP is very straightforward just like any other application.

Double-click on the downloaded .exe file.

Just follow the instructions that pop up.

Once the installation process is finished click on a windows button and search for XAMP control panel from your programs list.

Click on start button of Apache and MySQL.

To test your XAMPP installation open a web browser and search for http://localhost/dashboard/

Creating Database

To create a new database open a web browser and search for http://localhost/phpmyadmin/, you will find PHPMyAdmin dashboard select databases and create a new database.

Creating Table

Select the database that you created where you will find an option to create table, give the table name and select number of columns that you need for your table and click ok.in the next step give column names with appropriate datatype and size and also you can insert data into a table by selecting the Insert tab.

(or)

You can simply run these queries to create a new table and to insert data.

To Create:

CREATE TABLE Users( UserID int, LastName varchar(255), FirstName varchar(255), Email varchar(255), City varchar(255) );

To Insert:

INSERT INTO Users(UserID , LastName , FirstName , Email , City)

VALUES ('1', 'Andrew', 'Flint', 'zzz@zzz.com', 'Norway');

How To Populate JSON Data In Select Dropdown Using jQuery?

ViewUserData.php

<?php

$DatabaseServer = "localhost";

$DatabaseUsername = "root";

$DatabasePassword = "root";

$DatabaseName = "demo";

$Connection = mysqli_connect($DatabaseServer , $DatabaseUsername , $DatabasePassword , $DatabaseName);

if($Connection=== false){

die("ERROR: Could not connect. " . mysqli_connect_error());

}

$SQL = mysqli_query($Connection, "SELECT * FROM User");

$Result = array();

while($Row = mysqli_fetch_assoc($SQL)) {

$Result[] = array(

'FirstName' => $Row['FirstName']

);

}

echo json_encode($Result);

?>

Output:

JSON Array:

[{"UserID":"1","FirstName":"Ram","LastName":"Sri"}]

ViewUserData.html

<Html>

<head>

<script language="JavaScript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

$(document).ready (function () {

$.getJSON ("ViewUserData.php",

function (json) {

for (var i = 0; i < json.length; i++) {

$("#UserID").append("<option>" + json[i].FirstName+ "</option>");

}

});

</script>

</head>

<body>

<select id='UserID'>

//Your Json Array comes here
</select>

</body>

</html>

Output:

MySQL: Run these two queries

CREATE TABLE `user` (

`UserID` int(12) NOT NULL,

`FirstName` varchar(48) NOT NULL,

`LastName` varchar(48) NOT NULL,

`Email` varchar(128) NOT NULL,

`City` varchar(48) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `user` (`UserID`, `FirstName`, `LastName`, `Email`, `City`) VALUES

(1, 'Ram', 'Sri', 'zzz@zzz.com', 'Delhi'),

(2, 'Krishna', 'Vasudev', 'yyy@yyy.com', 'Delhi');

PHP And JavaScript

How To Select Data From a MySQL Database Using PHP?

Step 1: Connect to MySQL Database

How to Show and Hide Content Based on Dropdown Selection in JQuery

How To Set Up Local Server Using XAMPP?

XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP (P) and Perl (P). It is a simple, light-weighted Apache server that makes it extremely easy for developers to create a local HTTP server with just a few clicks.

Step 1: Download XAMPP

Download one of the version of XAMPP from the link given below

https://www.apachefriends.org/download.html

To create a new database open a web browser and search for http://localhost/phpmyadmin/, you will find PHPMyAdmin dashboard select databases and create a new database.

You can simply run these queries to create a new table and to insert data.

To Create:

CREATE TABLE Users( UserID int, LastName varchar(255), FirstName varchar(255), Email varchar(255), City varchar(255) );

To Insert:

VALUES ('1', 'Andrew', 'Flint', 'zzz@zzz.com', 'Norway');

How To Populate JSON Data In Select Dropdown Using jQuery?

ViewUserData.php

<?php

$DatabaseServer = "localhost";

$DatabaseUsername = "root";

$DatabasePassword = "root";

$DatabaseName = "demo";

$Connection = mysqli_connect($DatabaseServer , $DatabaseUsername , $DatabasePassword , $DatabaseName);

if($Connection=== false){

die("ERROR: Could not connect. " . mysqli_connect_error());

}

$SQL = mysqli_query($Connection, "SELECT * FROM User");

$Result = array();

while($Row = mysqli_fetch_assoc($SQL)) {

$Result[] = array(

'FirstName' => $Row['FirstName']

);

}

echo json_encode($Result);

?>

Output:

JSON Array:

ViewUserData.html

<Html>

<head>

<script language="JavaScript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

$(document).ready (function () {

$.getJSON ("ViewUserData.php",

function (json) {

for (var i = 0; i < json.length; i++) {

$("#UserID").append("<option>" + json[i].FirstName+ "</option>");

}

});

});

</script>

</head>

<body>

<select id='UserID'>

//Your Json Array comes here</select>

</body>

</html>

Output:

MySQL: Run these two queries

Labels

Popular Posts

//Your Json Array comes here
</select>