Milan Smudja

Thursday, May 1, 2025

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:

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.
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.
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.

Milan Smudja

Thursday, May 1, 2025

Bootstrap 4 Tables

Bootstrap 4 Typography

Bootstrap 4 Grid System

Bootstrap 4 Jumbotron, Colors

Bootstrap 4 Local CSS, JS

Bootstrap 4 Header, Footer

Bootstrap 4 Setup, First Page

JavaScript If Else, Functions

JavaScript User Agent

JavaScript Reverse, Push, Sort

C Tutorial

C Examples:

Java Tutorial

C# Tutorials

Django Shop CMS Tutorial

Python & SQLite Tutorials

Tkinter Introduction - Top Widget, Method, Button