On Select, Fill The Div with Some Results (with the help of PHP and JavaScript)

Website and web application developers need to select an input to have some results in a div dynamically. So every option of selector would display results in the target div. These results would be scripted in another file.
Now how is it possible?

First need to create a selector having some options and a div which would be filled with the results.


Now JavaScript Code and would declare a file from where the result would be transferred to the target div.


Condition ‘Group By’ in MySql for Unique Results

When there are so many records with same value (same value of a column in each row) and there is need to have only one record of all rows for that particular column, indeed, accumulated values of rest of columns in the rows. In other words, if we need summation or gathered values of different rows in one result so we would utilize the condition ‘group by’ in MySql query.

select * from table_name group by column name

Suppose we have database of different invoices of sale of inventory items. One row show one item and when there are more than one row in an invoice, so invoice number would be same for all items so in all rows of database, column of invoice number would be same. In this scenario, we would extract results for an invoice taking invoice number  group by. The sale amount of each one item would be totaled at glance as invoice amount.

In MySql, table of sales_invoices;

 

invoice_no invoice_date item_name amount
000123 2018-09-03 Item abc 100
000123 2018-09-03 Item xyx 400
000123 2018-09-03 Item zzz 200

 

 

Now we use PHP to extract value of the above invoice.

$invoice = $db_connection->prepare("select *, sum(amount) from sales_invoices group by invoice_no");
$invoice->execute();
while($inv_result = $invoice->fetch(PDO::FETCH_ASSOC)){
echo $inv_result['invoice_no'].' - - - '.$inv_result['sum(amount0'];
}

The result would be: 000123 – – – 700

HTML Tag textarea as Text Editor with JavaScript

We use html tag textarea for input of long text e.g. in contact form, we use textarea tag for message (which may have long text), similarly in admission form, we use textarea tag for long description.

Tag textarea syntax are;

<textarea>Some text which is already defined</textarea>

We may need text editor with extra functions to write text with images and some others animations etc. For, we use some JavaScript code to make same html textarea as Text Editor.

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>

Tag iframe: On a WebPage, Display of Other One Page in HTML Language

Sometimes we need to display other website on our websites as an sample or to display its contents in the exact similar form. Though there are some approaches to refer other websites as using <a> of HTML or using ajax of JavaScript. Very impressive approach is to use <iframe>.

<iframe src="target_url"></iframe>

Here css can be used to format it properly e.g width and height.

<iframe class="sample1" src="https://primeburg.com"> </iframe>

in CSS file;

.sample1{

width: 100%;

height: 500px

}

or these css properties can be described in style attribute.

<iframe src="https://primeburg.com" style="width: 100%; height: 500px"></iframe>

Initially iframe tag has already border, so it can be removed in style attribute or in css file.

 

 

HTML Basics

HTML is a markup language for designing and developing the website.

Its basic syntax are

<!DOCTYPE html>


<html>

<head>

</head>

<body>

<header>

</header>

<footer>

</footer>

</body>

</html>

Selector and Searchable Selector in HTML

There are two ways to select item from a list in HTML, we describe them here in detail;

Selector (which only select)

<select>

<option value="1">Item 1</option>

<option value="2">Item 2</option>

<option value="3">Item 3</option> 

<option value="4">Item 4</option> 

<option value="5">Item 5</option> 
</select>

Searchable Selector (which do both select and search while typing)

(Not supported by some browsers e.g. Internet Explorer and Safari while perfectly supported by Chrome)

<input list="list-1"> 
<datalist id="list-1"> 
<option>Item 1</option> 
<option>Item 2</option> 
<option>Item 3</option> 
<option>Item 4</option> 
<option>Item 4</option> 
<option>Item 5</option> 
</datalist>

If there is need to hide list so datalist can be hidden while creating css as

datalist{
display: none
}

Now we present the solution at advanced level but with the help of using other programming language JavaScript (J query).

forward to select2

Database Connection to Connect with MySql through PHP Programming language

Whenever we insert, update, delete or retrieve data from MySql dataabse, we need database connection. Different programming languages have different syntax to interact with database.

Database Connection with MySql through PHP Programming Language 

There are different drivers of PHP which are used to interact with MySql database.

PDO Driver

 

Basic Queries in MySql with PHP

There are so many queries to interact with MySql database, some are used very commonly. One thing should be noted, there is need of database connection to connect with MySql Database. In PHP database connection has be already defined in other one post click here;

TO INSERT DATA INTO DATABASE

insert into table_name (column_1, column_2, column_3) values ('value_1', 'value_2', 'value_3')

with PHP (PDO driver)

$query = “insert into table_name (column_1, column_2, column_3) values (‘value_1’, ‘value_2’, ‘value_3’)”;

$query_execute = $database_connection_variable->prepare($query);

$query_execute->execute();

TO SELECT FROM DATABASE

select column_1, column_2, column_3 from table_name

with PHP (PDO driver)

$query = "select column_1, column_2, column_3 from table_name";

$query_execute = $database_connection_variable->prepare($query);

$query_execute->execute();

TO UPDATE DATA IN DATABASE

update table_name set column_1 = value_1, column_2 = value_2, column_3 = value_3

with PHP (PDO Driver)

$query = "update table_name set column_1 = value_1, column_2 = value_2, column_3 = value_3";

$query_execute = $database_connection_variable->prepare($query);

$query_execute->execute();