Sunday, May 18, 2025

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple for loop that will spawn 5 instances of blank Tk window

We will import all options from tkinter module because we are using only one module.

If using multiple modules, if we have some big scripts, we can use only specific methods from those modules. With that approach we are evading possible name clashes:


from tkinter import *

for x in range(5):
    Tk()

After using 3 lines from above, if you see all 5 windows on screen, all is ok with import.


Then we can proceed with import of messagebox, alias mb:

import tkinter.messagebox as mb

We need to initialize a blank window with this line:

top_win = Tk()

Then, geometry of a window is set o be 500 x 500:

top_win.geometry("500x500")

Function do_something() is needed to show msg box. Inside msg box, we will have mb activated targeting showinfo() method to show "lorem ipsum stuff" as Title in a window:

def do_something():
    mb.showinfo("Title", "lorem ipsum stuff")

 It's not enough just to have our custom function, we need to activate it on button. A name for button will be but_1. 

That button is located in top_win, and text inside it will be "Yeah". To connect button with function we are using command = do_something, without parenthesis:

but_1 = Button(top_win, text = "Yeah", command = do_something)

Of course, button but_1 must be positioned using coordinates x and y, using method place():

but_1.place(x = 2, y = 2)

Mainloop is needed at the bottom of script:

top_win.mainloop()

This is full script:

from tkinter import *
import tkinter.messagebox as mb

top_win = Tk()
top_win.geometry("500x500")

def do_something():
    mb.showinfo("Title", "lorem ipsum stuff")

but_1 = Button(top_win, text = "Yeah", command = do_something)
but_1.place(x = 2, y = 2)

top_win.mainloop()

MySQL BACKUP, RESTORE Database

You are strongly advised to check corresponding Youtube video.

How to backup MySQL database

  1. Open the Command Prompt or PowerShell on your Windows 10 machine.

  2. Navigate to the directory where the MySQL installation is located. 

  3. Once you are in the MySQL installation directory, execute the following command to backup the database to a SQL file: 

    mysqldump -u [username] -p [database_name] > [backup_file_name.sql]
    

    Replace [username] with your MySQL username, [database_name] with the name of the database you want to backup, and [backup_file_name.sql] with the desired name of the backup file.

    You will be prompted to enter your MySQL password after executing the command.

  4. The backup file will be created in the MySQL installation directory. You can copy the backup file to a different location to store it. 

Backup, Step by Step

We will backup "corp" database.


mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| corp               |
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

mysql>

In CMD, go to location where MySQL is installed. 

Microsoft Windows [Version 10.0.18363.959]
(c) 2019 Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>cd "C:\Program Files\MySQL Server 8.0\bin\"

C:\Program Files\MySQL Server 8.0\bin>mysqldump -u root -p corp > CORPARCH.sql
Enter password: *****

C:\Program Files\MySQL Server 8.0\bin>
cd "C:\Program Files\MySQL Server 8.0\bin\": This command changes the current directory to C:\Program Files\MySQL Server 8.0\bin\ where the mysqldump utility is located.

mysqldump -u root -p corp > CORPARCH.sql: This command runs the mysqldump utility with the username root and the database name corp. It then redirects the output to a file named CORPARCH.sql. This creates a backup of the corp database as a SQL script file.

Enter password: *****: This prompts the user to enter the password for the root user. The password is not visible when typing for security reasons.

C:\Program Files\MySQL Server 8.0\bin>
: This is the command prompt after the mysqldump command has completed. 

C:\Program Files\MySQL Server 8.0\bin>dir CORP*
 Volume in drive C is New Volume

 Directory of C:\Program Files\MySQL Server 8.0\bin

07/24/2020  05:22 PM             5,920 CORPARCH.sql
               1 File(s)          5,920 bytes
               0 Dir(s)  78,735,020,032 bytes free

C:\Program Files\MySQL Server 8.0\bin>
Directory of C:\Program Files\MySQL Server 8.0\bin : This line indicates that the directory of the command prompt is "C:\Program Files\MySQL Server 8.0\bin".

07/24/2020 05:22 PM 5,920 CORPARCH.sql : This line shows the details of the file "CORPARCH.sql" which was created on July 24, 2020 at 5:22 PM and has a size of 5,920 bytes. 

How to Drop and restore MySQL Database 

mysql> DROP DATABASE Corp;
Query OK, 4 rows affected (1.04 sec)

mysql>

The code is dropping the "Corp" database in MySQL. 

mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.00 sec)

mysql>

Database "Corp" is no more. 

Restoring Database "Corp"

mysql> CREATE DATABASE Corp;
Query OK, 1 row affected (0.13 sec)

mysql>

Previous code creates a new database called "Corp" in MySQL. 


mysql> USE Corp;
Database changed
mysql> SHOW TABLES FROM Corp;
Empty set (0.00 sec)

mysql>

The code above switches to the database named "Corp" using the command USE Corp.

Then, it tries to display the tables in the currently selected database using the command SHOW TABLES FROM Corp.

Since the database is newly created and no tables have been created yet, the output is an empty set. 

C:\Program Files\MySQL Server 8.0\bin>mysql -u root -p corp < CORPARCH.sql
Enter password: *****

C:\Program Files\MySQL Server 8.0\bin>

This code runs the mysql client from the command line and connects to a MySQL server as the root user, prompting for the user's password.

It then takes a backup file called "CORPARCH.sql" located in the same directory and uses it to restore the "corp" database.

The "<" character is a shell command for input redirection, which means the contents of the backup file will be used as input for the mysql command.

Database Restored 

mysql> SHOW TABLES FROM Corp;
+------------------------+
| Tables_in_corp         |
+------------------------+
| documents              |
| internalcontrol        |
| prices_higher_than_100 |
| stores                 |
+------------------------+
4 rows in set (0.04 sec)

mysql>

Restoring worked. The command SHOW TABLES FROM Corp is used to display all the tables in the "Corp" database. 


mysql> SELECT * FROM Stores;
+------+--------+------------+-----------------+-----------+-------+-----------------+
| s_id | city   | store_name | product         | available | price | ShipCorp        |
+------+--------+------------+-----------------+-----------+-------+-----------------+
|    1 | London | London_1   | Gold PSU        |       153 |   100 | Speedy Gonzales |
|    2 | London | London_2   | Gold PSU        |        75 |   100 | Speedy Gonzales |
|    3 | Berlin | Berlin_1   | Green PSU       |        50 |   120 | Speedy Gonzales |
|    4 | Berlin | Berlin_2   | XYZ Motherboard |         5 |    75 | Speedy Gonzales |
|    5 | Moscow | Moscow_1   | Extension Cable |        50 |    25 | Speedy Gonzales |
|    6 | Moscow | Moscow_2   | LPT Cables      |       500 |    10 | Speedy Gonzales |
|    7 | Miami  | Miami_1    | COM Cables      |      1450 |     5 | Speedy Gonzales |
|    8 | Paris  | Paris_1    | NIC             |       350 |    15 | Speedy Gonzales |
|    9 | XXX    | XXX_1      | Some            |      4562 |   500 | Speedy Gonzales |
|   10 | xxx    | yyy        | ppp             |      5421 |   500 | Speedy Gonzales |
|   11 | bla    | bla        | bla             |      1234 |   350 | Daffy Duck      |
+------+--------+------------+-----------------+-----------+-------+-----------------+
11 rows in set (0.00 sec)

mysql>

All data preserved.

You are strongly advised to check corresponding Youtube video:

List All Files From All Subdirectories - Python


import os

target = 'c:\\Python38-64'

for x in os.walk(target):
    print(x)

The os.walk() function generates the file names in a directory tree by walking the tree either top-down or bottom-up, using a generator. It returns a 3-tuple (dirpath, dirnames, filenames) for each directory in the tree, where dirpath is a string of the path to the directory, dirnames is a list of the names of the subdirectories in dirpath, and filenames is a list of the names of the non-directory files in dirpath.

os.walk(target) is used to generate and print the 3-tuples for each directory in the tree starting at target. The output will show the directory tree structure, with each directory and its subdirectories listed under the preceding directory, and the non-directory files listed under their respective directory. 

import os

target = 'c:\\Python38-64'

for root, dirname, files in os.walk(target):
    for x in files:
        print(x)

This code uses the os module to traverse a directory tree rooted at c:\\Python38-64. The os.walk() function returns a generator object that yields three-tuples for each directory in the tree. Each three-tuple consists of a directory path (root), a list of subdirectory names (dirname), and a list of file names (files) in the directory root.

The for loop iterates over each three-tuple yielded by the os.walk() generator. For each three-tuple, the loop iterates over each file name in the files list and prints it to the console. This effectively prints the name of every file in the c:\\Python38-64 directory tree. 


import os

target = 'c:\\Python38-64'

for root, dirname, files in os.walk(target):
    for x in files:
        print(root + '\\' + x)

This code uses the os.walk() function to iterate through all the directories and files in the specified target directory and its subdirectories.

The os.walk() function returns a generator that produces a 3-tuple on each iteration: the root directory of the current iteration, a list of subdirectory names in the current iteration, and a list of file names in the current iteration.

In this code, we are unpacking the 3-tuple into root, dirname, and files. root is the current root directory being iterated over, dirname is a list of subdirectory names in the current root directory, and files is a list of file names in the current root directory.

The for loop then iterates over each file name in files and prints out the full file path by concatenating root and the file name with the backslash (\\) character used as a directory separator on Windows. The resulting output is a list of all the files in the target directory and its subdirectories with their full paths. 

import os

target = 'c:\\Python38-64'

for root, dirname, files in os.walk(target):
    for x in files:
        if x.endswith('.py'):
            print(root + '\\' + x)

This code uses the os module to traverse the file system starting at the given target directory (c:\Python38-64) and walk through all directories and subdirectories within it. For each file found within this directory and its subdirectories, the code checks whether the filename ends with the extension .py. If the file has this extension, it prints out the full path to the file (using root and x). This code can be useful if you need to find all Python source code files within a particular directory hierarchy.

Saturday, May 17, 2025

CSS Absolute vs Relative

In CSS, position: relative and position: absolute are two properties that define how an element should be positioned on a web page.

When an element is positioned relative, it is positioned relative to its normal position in the document flow. This means that other elements will still take up space around it, even if it is moved. The top, bottom, left, and right properties can be used to move the element in any direction from its normal position.

On the other hand, when an element is positioned absolute, it is taken out of the normal document flow and positioned relative to its closest positioned ancestor (or the <body> element if there is no positioned ancestor). This means that it will not take up any space in the document flow and other elements will be positioned as if it wasn't there. The top, bottom, left, and right properties can also be used to position the element relative to its positioned ancestor.

In summary, position: relative moves the element relative to its normal position in the document flow, while position: absolute takes the element out of the document flow and positions it relative to its closest positioned ancestor. 


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
 <div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
  
</div>
</body>
</html>

Our simple html code. 


.first{
	width: 400px;
	border: 1px solid red;
	
	position: absolute;
	top: 10px;
	left: 25px;
}

.second {
	max-width: 400px;
	margin: auto;
	border: 1px solid red;
	background: yellow;
	
	position: relative;
	bottom: 0px;
	left: 0px;		
}

This CSS code defines two classes .first and .second with different positioning properties:

  • .first is positioned absolutely with top: 10px and left: 25px. This means that its position is relative to the first positioned ancestor element, or to the initial containing block if there is no such ancestor. The element is taken out of the normal flow of the document and the surrounding content will be adjusted to fill in the gap left by the element.
  • .second is positioned relatively with bottom: 0px and left: 0px. This means that its position is relative to its normal position in the document flow. The element is still part of the normal flow of the document, but its position can be adjusted relative to where it would normally appear.

By applying these classes to elements in an HTML document, you can control their position on the page in different ways. In the HTML code we provide, the .first class is applied to a div element, while the .second class is applied to a nested div element. This will cause the two elements to be positioned differently relative to each other.

Here's an example HTML code with internal CSS that demonstrates the difference between absolute and relative positioning: 

<!DOCTYPE html>
<html>
<head>
	<title>Positioning Example</title>
	<style>
		.first {
			position: relative;
			border: 1px solid red;
			height: 200px;
			width: 200px;
			margin: 50px;
			background-color: #f0f0f0;
		}
		
		.second {
			position: absolute;
			top: 50px;
			left: 50px;
			border: 1px solid blue;
			height: 100px;
			width: 100px;
			background-color: #c0c0c0;
		}
	</style>
</head>
<body>

	<div class="first">
		<p>This is the parent element with relative position.</p>
		
		<div class="second">
			<p>This is the child element with absolute position.</p>
		</div>
	</div>

</body>
</html>

In this example, the .first element is positioned relatively, meaning that its child element .second will be positioned absolutely in relation to its boundaries. The .second element is then positioned at top: 50px; and left: 50px; from the top-left corner of its parent .first element.

Friday, May 2, 2025

Remote Administration Tool - Python - File Upload - [ Part 8 ]

Remote Administration Tool - Python - File Download - [ Part 7 ]

Remote Administration Tool - Python - Remove Directory - [ Part 6 ]

Remote Administration Tool - Python - TXT Reports and Directory Creation - [ Part 5 ]

Remote Administration Tool - Python - Change Directory - [ Part 4 ]

Remote Administration Tool - Python - Restrictions - [ Part 3 ]

Remote Administration Tool - Python - Subprocess Module - [ Part 2 ]

Remote Administration Tool - Python - Server and Client - [ Part 1 ]

Python Remote Administration

  1. Remote Administration Tool - Python - Server and Client - [ Part 1 ]
  2. Remote Administration Tool - Python - Subprocess Module - [ Part 2 ]
  3. Remote Administration Tool - Python - Restrictions - [ Part 3 ]
  4. Remote Administration Tool - Python - Change Directory - [ Part 4 ]
  5. Remote Administration Tool - Python - TXT Reports and Directory Creation - [ Part 5 ]
  6. Remote Administration Tool - Python - Remove Directory - [ Part 6 ]
  7. Remote Administration Tool - Python - File Download - [ Part 7 ]
  8. Remote Administration Tool - Python - File Upload - [ Part 8 ]

Thursday, May 1, 2025

Bootstrap 4 Carousel


<?php include 'header.php' ?>

<div class="container-fluid">

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bs-4.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-4.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-4.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Forms


<?php include 'header.php' ?>

<div class="container-fluid">

<form action="blablabla.php" method="post">
	<div class="form-group">
		<label for="email">Email:</label>
		<input type="email" class="form-control" id="email">
	</div>
	
	<div class="form-group">
		<label for="password">Password</label>
		<input type="password" class="from-control" id="password">
	</div>
	
	<button type="button" class="btn btn-primary">Submit</button>
</form>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<form class= "form-inline" action="blablabla.php" method="post">
	<div class="form-group">
		<label for="email">Email:</label>
		<input type="email" class="form-control" id="email">
	</div>
	
	<div class="form-group">
		<label for="password">Password</label>
		<input type="password" class="from-control" id="password">
	</div>
	
	<button type="button" class="btn btn-primary">Submit</button>
</form>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Modals


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#something">Click On Me</button>

<div class="modal" id="something">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h3 class="modal-title">Title for Modal</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			
			<div class="modal-body">
				<h2>Some Usefull Content</h2>
			</div>
			
			<div class="modal-body">
				<h4>Some Usefull Content</h4>
				<p>Lorem ipsum bla bla bla</p>
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Navbars


<?php include 'header.php' ?>

<div class="container-fluid">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<ul class="navbar-nav">
		<li class="nav-item"><a class="nav-link" href="#">Generic 1</a></li>
		<li class="nav-item"><a class="nav-link" href="#">Generic 2</a></li>
		<li class="nav-item"><a class="nav-link" href="#">Generic 3</a></li>
	</ul>
</nav>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>      
    </ul>    
  </div>
</nav>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Cards


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="card">
	<div class="card-body">
		<h3 class="card-title">Title for This Card</h3>
		<p class="card-text">Something Usable Here</p>
		<a href="#" class="btn btn-primary">Link Somewhere</a>
	</div>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<div class="card">
	<div class="card-header">Header for This Card</div>
	<div class="card-body">
		<h3 class="card-title">Title for This Card</h3>
		<p class="card-text">Something Usable Here</p>
		<a href="#" class="btn btn-primary">Link Somewhere</a>
	</div>
	<div class="card-footer">Footer for This Card</div>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<div class="card">
	<div class="card-header bg-info">Header for This Card</div>
	<img src="bs-4.jpg" class="card-img-top">
	<div class="card-body">
		<h3 class="card-title">Title for This Card</h3>
		<p class="card-text">Something Usable Here</p>
		<a href="#" class="btn btn-primary stretched-link">Link Somewhere</a>
	</div>
	<div class="card-footer bg-warning">Footer for This Card</div>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Pagination, Breadcrumbs


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="pagination">
	<li class="page-item"><a href="#" class="page-link">Previous</a></li>
	<li class="page-item"><a href="#" class="page-link">2</a></li>
	<li class="page-item"><a href="#" class="page-link">3</a></li>
	<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="pagination justify-content-center">
	<li class="page-item"><a href="#" class="page-link">Previous</a></li>
	<li class="page-item"><a href="#" class="page-link">2</a></li>
	<li class="page-item disabled"><a href="#" class="page-link">3</a></li>
	<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="breadcrumb">
	<li class="breadcrumb-item"><a href="#">2020</a></li>
	<li class="breadcrumb-item"><a href="#">August</a></li>
	<li class="breadcrumb-item"><a href="#">15</a></li>
	<li class="breadcrumb-item"><a href="#">How To Do Something</a></li>
</ul>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 List Groups


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<li class="list-group-item">First</li>
	<li class="list-group-item">Second</li>
	<li class="list-group-item">Third</li>
</ul>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<a href="#" class="list-group-item list-group-item-action">Post A</a>
	<a href="#" class="list-group-item list-group-item-action">Post B</a>
	<a href="#" class="list-group-item list-group-item-action">Post C</a>
</ul>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<a href="#" class="list-group-item list-group-item-action">Post A
		<span class="badge badge-pill badge-primary">15</span></a>
	<a href="#" class="list-group-item list-group-item-action">Post B
		<span class="badge badge-pill badge-primary">25</span></a></a>
	<a href="#" class="list-group-item list-group-item-action">Post C
		<span class="badge badge-pill badge-primary">35</span></a></a>
</ul>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<a href="#" class="list-group-item list-group-item-action align-items-center">Post A
		<span class="badge badge-pill badge-primary">15</span></a>
	<a href="#" class="list-group-item list-group-item-action align-items-center">Post B
		<span class="badge badge-pill badge-danger">25</span></a></a>
	<a href="#" class="list-group-item list-group-item-action align-items-center">Post C
		<span class="badge badge-pill badge-success">35</span></a></a>
</ul>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Alerts


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="alert alert-success">
	<strong>Success !!!</strong> - You just sold 100 BTC
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<div class="alert alert-success">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>Success !!!</strong> - You just sold 100 BTC
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<div class="alert alert-success alert-dismissible fade show">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>Success !!!</strong> - You just sold 100 BTC
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Badges


<?php include 'header.php' ?>

<div class="container-fluid">

<h1>Heading H1 - <span class="badge badge-success">Test</span></h1>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<h1 class="display-1">Heading H1 - <span class="badge badge-success">Test</span></h1>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<h1>Heading H1 - <span class="badge badge-success badge-pill">Test</span></h1>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary">
<span class="badge badge-light">125</span>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary btn-lg">
Posts...<span class="badge badge-light">125</span>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Progress Bars


<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress">
	<div class="progress-bar" style="width: 10%"></div>
</div>
<br>
<div class="progress">
	<div class="progress-bar" style="width: 20%"></div>
</div>
<br>
<div class="progress">
	<div class="progress-bar" style="width: 40%"></div>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-success" style="width: 20%"></div>
</div>
<br>
<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-primary" style="width: 40%"></div>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-success progress-bar-striped" style="width: 20%"></div>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 20%"></div>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 10%"></div>
	<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 20%"></div>
	<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%"></div>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Button Groups


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>

<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-success">Success</button>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>

<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-success">Success</button>
</div>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<div class="btn-group">
<button type="button" class="btn btn-primary">Menu</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
 data-toggle="dropdown"></button>

<div class="dropdown-menu btn btn-primary">
	<a href="#" class="dropdown-item">Sub-Menu</a>
	<a href="#" class="dropdown-item">Sub-Menu</a>
	<a href="#" class="dropdown-item">Sub-Menu</a>
</div>

</div>
</div>

<?php include 'footer.php' ?>

Bootstrap 4 Buttons


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-success">Success</button>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<a href="#" class="btn btn-success" role="button">Google</a>
<input type="button" class="btn btn-info" value="Input Button">

</div>

<?php include 'footer.php' ?>

Button will spawn whole width


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary btn-block">Primary</button>
<button type="button" class="btn btn-secondary btn-block">Secondary</button>
<button type="button" class="btn btn-info btn-block">Info</button>
<button type="button" class="btn btn-warning btn-block">Warning</button>
<button type="button" class="btn btn-danger btn-block">Danger</button>
<button type="button" class="btn btn-dark btn-block">Dark</button>
<button type="button" class="btn btn-success btn-block">Success</button>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<button class="btn btn-primary btn-lg">
	<span class="spinner-grow spinner-grow"></span>
	Thing is loading...
</button>

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<button class="btn btn-primary btn-lg">
	<span class="spinner-border spinner-border-lg"></span>
	Thing is loading...
</button>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Images


<?php include 'header.php' ?>

<div class="container-fluid">

<img src="bs-4.jpg" class="float-right">

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<img src="bs-4.jpg" class="mx-auto d-block">

</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">

<img src="bs-4.jpg" class="rounded-circle img-fluid mx-auto d-block">

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Tables


<?php include 'header.php' ?>

<div class="container-fluid">

<table class="table table-bordered table-striped table-hover table-dark">
	<thead class="bg-success">
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Address</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Snow</td>
			<td>Random Street 456</td>
		</tr>
		<tr>
			<td>Samantha</td>
			<td>Ice</td>
			<td>Random Street 753</td>
		</tr>
	</tbody>	
</table>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Typography


<?php include 'header.php' ?>

<div class="container-fluid">
	<h1>Heading - H1</h1>
	<h2>Heading - H2</h2>
	<h3>Heading - H3</h3>
	<h4>Heading - H4</h4>
	<h5>Heading - H5</h5>
	<h6>Heading - H6</h6>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">
	<h1 class="display-1">Heading - H1</h1>
	<h1 class="display-2">Heading - H1</h1>
	<h1 class="display-3">Heading - H1</h1>
	<h1 class="display-4">Heading - H1</h1>	
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">
	<h1 class="display-1">Heading H1 - <small>Something More</small></h1>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>
<div class="container-fluid">

<blockquote class="blockquote">
	<p>Lorem Ipsum dolor sit amet, blah blah blah</p>
	<footer class="blockquote-footer">Wiki</footer>	
</blockquote>

</div>
<?php include 'footer.php' ?>

<?php include 'header.php' ?>
<div class="container-fluid">

<blockquote class="blockquote">
	<p>Lorem <mark>Ipsum dolor sit</mark> amet, blah blah blah</p>
	<p>Lorem Ipsum dolor sit amet, <code>blah blah blah</code></p>
	<footer class="blockquote-footer">Wiki</footer>	
</blockquote>

</div>
<?php include 'footer.php' ?>

<?php include 'header.php' ?>
<div class="container-fluid">

<blockquote class="blockquote">
	<p><kbd>Ctrl + F10</kbd></p>
	<p><kbd>Ctrl + Alt + F4</kbd></p>
</blockquote>

</div>
<?php include 'footer.php' ?>

Bootstrap 4 Grid System


<?php include 'header.php' ?>

<div class="container">
	<div class="row">
		<div class="col bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container">
	<div class="row">
		<div class="col-2 bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col-10 bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="container-fluid">
	<div class="row">
		<div class="col-2 bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col-10 bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="jumbotron bg-danger text-light" 
style="border-radius:0; margin-bottom:0">
	<h1>JUMBOTRON</h1>
	<p>For testing purposes</p>
</div>


<div class="container-fluid">
	<div class="row">
		<div class="col-2 bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col-10 bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>

Bootstrap 4 Jumbotron, Colors


<?php include 'header.php' ?>

<div class="jumbotron">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="jumbotron bg-success">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-danger">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-warning">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-info">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-dark">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-light">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-white">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-primary">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="jumbotron text-white bg-success">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>

<?php include 'header.php' ?>

<div class="jumbotron text-white bg-success text-center">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>

Bootstrap 4 Local CSS, JS

index.php


<?php include 'header.php' ?>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h1>MODAL TEST</h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<?php include 'footer.php' ?>

index.php with static bootstrap css


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

footer.php with static js files


  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="js/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap 4 Header, Footer

header.php


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

footer.php


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

index.php


<?php include 'header.php' ?>

<h1>Hello, World!</h1>

<?php include 'footer.php' ?>

Bootstrap 4 Setup, First Page


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

JavaScript If Else, Functions

In programming if and else are conditional statements used to execute different blocks of code based on whether a certain condition is true or false.

if is used to specify a block of code to be executed if a certain condition is true. If the condition is false, the block of code inside the if statement is skipped and the program moves on to the next statement.

For example, if (x > 10) means that the code inside the curly braces {} will be executed only if the value of x is greater than 10.

else is used to specify a block of code to be executed if the if condition is false. If the condition is true, the block of code inside the else statement is skipped and the program moves on to the next statement. 


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

	if (50 == 150) {
		document.write("They are same");
	} else {
		alert("They are different");
	}
		
</script>
	
</body>
</html>

The JavaScript code uses an if-else statement to compare if 50 is equal to 150. Since this condition is false, the code inside the else block is executed, which displays an alert message saying "They are different". The result will be an alert box with the message "They are different" when the HTML file is loaded in a web browser. 


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

	function same() {
		document.write("Number equal to 1000");
	}
	
	function different() {
		document.write("They are different");
	}
	
	var glob_var = 1000;
	
	if (glob_var == 1000) {
		same();
	} else {
		different();
	}
		
</script>
	
</body>
</html>

This JavaScript code defines two functions named same and different. It then declares a global variable glob_var and initializes it to 1000.

The code then checks if the value of glob_var is equal to 1000 using an if statement. If the condition is true, the same function is called and it will print "Number equal to 1000". If the condition is false, the different function is called and it will print "They are different".

In this case, since glob_var is equal to 1000, the same function will be called and it will print "Number equal to 1000".

Using functions to simplify source code is a good programming practice. It makes the code more modular and easier to read, understand, and maintain.

Functions allow you to break down your code into smaller, more manageable pieces, which can be reused in different parts of your program.

This helps to avoid repeating code and reduces the chances of errors or bugs in your code. In addition, functions can make it easier to test your code and make changes to it, since you can test and modify individual functions without affecting the rest of your program.

JavaScript User Agent

The user agent string provided by the browser through the navigator.userAgent property is a useful piece of information that can be used by websites and web applications to provide a better user experience, troubleshoot issues, or track usage statistics.

Here are some common use cases for the user agent string:

  1. Browser and feature detection: Websites can use the user agent string to detect which browser and version the user is using, as well as which features are supported by the browser. This information can be used to customize the website's appearance and functionality based on the user's browser.

  2. Debugging and troubleshooting: Developers can use the user agent string to debug issues reported by users, such as browser compatibility or performance problems. By analyzing the user agent string, developers can identify which browser and version the user is using, and whether the issue is specific to that browser or more general.

  3. Analytics and tracking: Websites can use the user agent string to collect usage statistics, such as the number of users using a particular browser or operating system. This information can be used to optimize the website's performance and improve user experience.

However, it's important to note that the user agent string can be manipulated or spoofed by users, making it less reliable for certain use cases. Additionally, some browsers may provide different user agent strings for different modes or configurations, which can further complicate its use. 


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	document.write(navigator.appCodeName + "<br>");
	document.write(navigator.product + "<br>");
	document.write(navigator.appVersion + "<br>");
	document.write(navigator.userAgent + "<br>");
	document.write(navigator.platform + "<br>");
	document.write(navigator.language + "<br>");
	document.write(navigator.onLine + "<br>");
	
</script>

</body>
</html>

Within the script block, the code uses the "document.write" method to output the following information about the user's web browser:

  • navigator.appCodeName: The code name of the browser.
  • navigator.product: The name of the browser.
  • navigator.appVersion: The version number of the browser.
  • navigator.userAgent: A string containing the user agent header sent by the browser to the server.
  • navigator.platform: The platform on which the browser is running.
  • navigator.language: The language of the browser.
  • navigator.onLine: A Boolean value indicating whether the browser is currently connected to the internet.

By using these properties, the code can display useful information about the user's browser, such as the browser type and version, the platform it's running on, and whether the user is currently connected to the internet. 


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	document.write("<h1>I know what you did last summer: <br><br>"
	+ navigator.userAgent+ "</h1>");
	
</script>

</body>
</html>

The code uses the "document.write" method to output an HTML header tag (h1) containing a message and the user agent string. The message says "I know what you did last summer:", followed by two line breaks (br tags).

The "navigator.userAgent" property is a string that contains information about the user agent header sent by the browser to the server. This information can include details about the browser type, version number, and operating system.

By concatenating the user agent string with the message, the code creates a personalized message for the user that includes the details of their browser.

JavaScript Reverse, Push, Sort

Brief explanation of each of these JavaScript array methods:

  • reverse(): This method is used to reverse the order of the elements in an array. It modifies the original array and returns the reversed array.

  • push(): This method is used to add one or more elements to the end of an array. It modifies the original array and returns the new length of the array.

  • sort(): This method is used to sort the elements of an array in ascending order by default, or based on a provided comparison function. It modifies the original array and returns the sorted array. 


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var old_pl = new Array("Cobol", "Fortran", "Algol");
	
	//Reverse
	document.write(old_pl.reverse() + "<br>");
	
	//Push New Elements
	old_pl.push("Basic", "Asembler", "Simula");
	
	document.write("After Push: " + old_pl + "<br>");
	
	//Sort Elements
	old_pl.sort();
	
	document.write("After Sorting: "+ old_pl);
	
</script>
	
</body>
</html>

This script creates an array called old_pl with three elements: "Cobol", "Fortran", and "Algol". Then, three array methods are called on the old_pl array.

The first method is reverse(), which reverses the order of the elements in the old_pl array. The resulting reversed array is output to the webpage using the document.write() method.

The second method is push(), which adds three new elements to the end of the old_pl array: "Basic", "Assembler", and "Simula". The modified array is output to the webpage using the document.write() method.

Finally, the sort() method is called on the old_pl array to sort the elements in alphabetical order. The sorted array is output to the webpage using the document.write() method.

The resulting output of this script would be: 

Algol,Fortran,Cobol
After Push: Algol,Fortran,Cobol,Basic,Assembler,Simula
After Sorting: Algol,Assembler,Basic,Cobol,Fortran,Simula

The first line shows the reversed old_pl array, with the elements in reverse order. The second line shows the old_pl array after the push() method has added the new elements. The third line shows the old_pl array after the sort() method has sorted the elements in alphabetical order.

C Tutorial

  1. C Tutorial - Setup and First Compilation
  2. C Tutorial - Line by Line - Detailed Explanations
  3. C Tutoria - Variables, Data Types, Format Specifiers
  4. C Tutoria - Constants and Comments
  5. C Tutorial - Simple Calculator
  6. C Tutorial - User Input
  7. C Tutorial - If..Else
  8. C Tutorial - If..Else with User Input
  9. C Tutorial - Switch Statement with User Input
  10. C Tutorial - For Loop with User Input
  11. C Tutorial - While and Do..While Loop
  12. C Tutorial - Break and Continue
  13. C Tutorial - Arrays
  14. C Tutorial - Strings
  15. C Tutorial - Pointers
  16. C Tutorial - Pointer to Pointer
  17. C Tutorial - Functions
  18. C Tutorial - Function Parameters
  19. C Tutorial - Return from Function
  20. C Tutorial - Structures
  21. C Tutorial - Typedef
  22. C Tutorial - Unions
  23. C Tutorial - getchar() and putchar() Functions
  24. C Tutorial - gets() and puts() Functions
  25. C Tutorial - How to Write to a File in C
  26. C Tutorial - How to Read from a File in C
  27. C Tutorial - Read Integer Values from a Text File in C
  28. C Tutorial - Write a Structure to a Text File with C

C Examples:

 

  1. C Program - Copy the Content of One File to Another File with User Input
  2. C Program - Print the Sum of All Elements in an Array
  3. C Program - Check Whether a Number is Positive or Negative using If Statement
  4. C Program - Nested If in C Programming Example
  5. C Program - Find ASCII Value of a Character Entered by User
  6. C Program - Print ASCII Value of a Characters inside C Array or String using a For Loop
  7. C Program - Find the Size of int, float, double and char
  8. C Program - Find the Average of Two Numbers with User Input
  9. C Program - Find the Average of Integers using a Function with Return Value
  10. C Program - Find Greatest of Three Numbers using If Statement
  11. C Program - Generate Multiplication Table with User Input
  12. C Program - Multiplication Table of a Numbers in a Given Range
  13. C Program - Display Characters from A to Z Using For Loop
  14. C Program - Check if Number is Even or Odd
  15. C Program - Check if Numbers are Even in Range from 1 to n
  16. C Program - Check whether an Alphabet is Vowel or Consonant
  17. C Program - Convert Lowercase String to Uppercase String
  18. C Program - Convert Uppercase String to Lowercase String
  19. C Program - Display All Alphabets And SKIP Special Characters
  20. C Program - Calculate Power of a Number using While Loop
  21. C Program - Calculate Power of a Number using pow() function
  22. C Program - Power of a Number for Elements inside C Array
  23. C Program – Find Length of a String without strlen() Function
  24. C Program - Get the String Length with While Loop
  25. C Program - Find Frequency of a Character in a String
  26. C Program - Find Quotient and Remainder - Modulo Operator
  27. C Program - How to Print 2D Array in C with For Loops
  28. C Program - How do you Add Elements to a 2D Array in C
  29. C Program - Find Largest Element of an Array
  30. C Program - Calculate Area and Circumference of a Circle
  31. C Program - Multiple Circles inside C Array - Circumference and Area Calculator
  32. C Program - Calculate Area of an Equilateral Triangle
  33. C Program - Swap Two Numbers using a Temporary Variable
  34. C Program - Swap Two Numbers WITHOUT using the Third Variable
  35. C Program - Swap Two Numbers using Multiplication and Division
  36. C Program - Store Information of Students Using Structure
  37. C Program - Print The Square Star Pattern
  38. C Program - Check Leap Year with C Programming Language
  39. How to Add gcc MinGW bin directory to System Path - Windows 10
  40. C Program - How to Implement Bubble Sort in C Programming Language
  41. C Program - Bubble Sort Algorithm using Function in C
  42. C Program - Bubble Sort In C using Nested While Loops
  43. C Program - Tile Calculator - The Total Number of Tiles Necessary to Cover a Surface
  44. C Program - Rectangle Calculator - Diagonal, Area, Parimeter
  45. C Program - Display its Own Source Code as Output
  46. C Program - strlen() Function Example - Find the Length of a String
  47. C Program - strcat() Function - How to Concatenate Strings in C
  48. C Program - strcpy() Function - Copy Content of One String into Another String
  49. C Program - strncpy() Function - Copy Specific Number of Characters from a String to Another String
  50. C Program - strcmp() Function - Compares Two Strings Character by Character

Java Tutorial

  1. Java Tutorial - Eclipse Installation and First Run
  2. Java Tutorial - Detailed Explanations
  3. Java Tutorial - Variables and Concatenation
  4. Java Tutorial - Data Types
  5. Java Tutorial - Data Type Conversions
  6. Java Tutorial - Arithmetic Operations - Simple Calc
  7. Java Tutorial - Simple Math Methods
  8. Java Tutorial - User Input - Scanner Class
  9. Java Tutorial - Simple Calculator with User Input
  10. Java Tutorial - If..Else If..Else
  11. Java Tutorial - If Statement with User Input
  12. Java Tutorial - Switch Statement
  13. Java Tutorial - For Loop
  14. Java Tutorial - Arrays and ForEach Loop
  15. Java Tutorial - While and Do..While Loop
  16. Java Tutorial - Break and Continue inside For Loop
  17. Java Tutorial - Break and Continue inside While Loop
  18. Java Tutorial - Array Operations
  19. Java Tutorial - Methods
  20. Java Tutorial - Method Parameters
  21. Java Tutorial - Returning a Value from Method
  22. Java Tutorial - Method Overloading
  23. Java OO Tutorial - Classes and Objects
  24. Java OO Tutorial - Static vs Non Static Methods
  25. Java OO Tutorial - Constructors
  26. Java OO Tutorial - Inheritance
  27. Java OO Tutorial - this Keyword in Java
  28. Java OO Tutorial - super Keyword in Java
  29. Java OO Tutorial - Inner Class - Nesting
  30. Java OO Tutorial - Abstract Classes and Methods
  31. Java OO Tutorial - Getters and Setters - Encapsulation
  32. Java OO Tutorial - Interfaces
  33. Java OO Tutorial - Polymorphism
  34. Java OO Tutorial - ArrayList
  35. Java OO Tutorial - ArrayList - For Loop - ForEach
  36. Java OO Tutorial - Enums
  37. Java OO Tutorial - LinkedList
  38. Java OO Tutorial - HashMap
  39. Java OO Tutorial - HashSet
  40. Java OO Tutorial - Try..Catch..Finally
  41. Java OO Tutorial - Create File in Java
  42. Java OO Tutorial - Write and Append to File in Java
  43. Java OO Tutorial - Reading a Text File in Java

C# Tutorials

  1. C# - Introduction & Installation
  2. C# - Line by Line Explanations
  3. C# - Variables, Constants, Concatenation
  4. C# - Data Types & Type Detection
  5. C# - User Input & Basic Operations
  6. C# - String Operations
  7. C# - Math Operations - Max, Min, Abs, Sqrt, Round
  8. C# - if..else if..else
  9. C# - Switch Statement
  10. C# - For Loop
  11. C# - While & Do..While Loop
  12. C# - Arrays and Foreach Loop
  13. C# - Array Operations
  14. C# - Break & Continue
  15. C# - Methods
  16. C# - Method Parameters and Default Params
  17. C# - Return Value from Method
  18. C# - Change Order of Parameters
  19. C# - Method Overloading
  20. C# - Exceptions - Try..Catch..Finally
  21. C# OO - Namespaces - Internal
  22. C# OO - Namespaces - External Files
  23. C# OO - DLL Files - How to Create .dll
  24. C# OO - Objects and Classes
  25. C# OO - Objects and External Classes
  26. C# OO - Objects from External Namespaces
  27. C# OO - Objects from DLL Files
  28. C# OO - Object Modification
  29. C# OO - Constructors
  30. C# OO - Constructor Parameters
  31. C# OO - Private - Access Modifiers
  32. C# OO - Getters and Setters
  33. C# OO - Automatic Properties - { get; set; }
  34. C# OO - Inheritance
  35. C# OO - Polymorphism - Virtual and Override
  36. C# OO - Abstract Classes & Methods
  37. C# OO - Interface
  38. C# OO - Multiple Interfaces
  39. C# OO - Enum and Switch Statement
  40. C# OO - Read From and Write to a Text File

Django Shop CMS Tutorial

 

  1. Django Shop CMS - Introduction
  2. Django Shop CMS - Create Project, Migrate, Admin, Runserver
  3. Django Shop CMS - Understanding Project Structure
  4. Django Shop CMS - Models - Categories
  5. Django Shop CMS - Models - Products
  6. Django Shop CMS - Models - Buyers
  7. Django Shop CMS - Models - Product Instances
  8. Django Shop CMS - Generic Views - Categories
  9. Django Shop CMS - Generic Views - Products
  10. Django Shop CMS - Generic Views - Product Instances
  11. Django Shop CMS - Generic Views - Buyers
  12. Django Shop CMS - Generic Forms - Categories
  13. Django Shop CMS - Generic Forms - Products
  14. Django Shop CMS - Generic Forms - Product Instances
  15. Django Shop CMS - Generic Forms - Buyers

Python & SQLite Tutorials

  1. SQLite & Python - Create Database
  2. SQLite & Python - Create Table
  3. SQLite & Python - Insert Into Table
  4. SQLite & Python - Insert Values to a Table from User Input
  5. SQLite & Python - Insert Muiltiple Values from List
  6. SQLite & Python - Read Rows from SQLite Table
  7. SQLite & Python - Update Statement
  8. SQLite & Python - Create Views
  9. SQLite & Python - Add New Column and Default Values
  10. SQLite & Python - Delete (DROP) Tables, Views, Rows

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...