CSS - Item and Font Size

 

PHP_18 (Style)

PHP_17 (style & class)

<div class=container1>

 

    .container1{

        display: flex;

        flex-direction: column;

        width: 100%;

        padding: 15px;

        border: 1px solid 0 skyblue;

        border-radius: 20px;

        background-color: aqua;

------------------------ #For class using dot in word

- background-color

- width

- height

- display

- padding

- border                : For border

- border-radius        : Radius border

- color                : For text color

- flex-direction

- align-items

- justify-content

- box-sizing

- margin

- margin-left

- margin-right

- text-align

- text-justify

PHP_16 (Tables)

Link https://www.w3schools.com/html/html_table_headers.asp

<table>       To start make table

<tr>            Table Row

<th>            Table Header

<td>            Table 

-----

<th colspan="2">    To make header merge in 2 Coloumn - colspan(column span).

<td rowspan="2">    To make rowspan (Row Span)    

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

<table>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$80</td>

  </tr>

</table>

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

To make border and merge 2 coloumn,

- class="table table-bordered"            to make border

- class="table text-centered"                to make center text

- colspan="2"                                    to merge two coloumn

<table class="table table-bordered text-center">

<tr>

    <th>No</th>

    <th>Username</th>

    <th>Passsword</th>

    <th colspan="2">Menu</th>

</tr>

<tr>

    <td>1</td>

    <td>mz</td>

    <td>mzshb</td>

    <td>edit</td>

    <td>delete</td>

</tr>

</table>

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

<table style="width:50%" class="table table-bordered text-center">

<tr>

    <th>No</th>

    <th>Username</th>

    <th>Passsword</th>

    <th colspan="2">Menu</th>

</tr>

<tr>

    <td>1</td>

    <td>mz</td>

    <td>mzshb</td>

    <td>ediit</td>

    <td>delete</td>

</tr>

</table>

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

PHP_15 (Region)

Fast trick using 

- Block line 

- Shift + Alt + A 

Language	Start region	End region
Bat	::#region or REM #region	::#endregion or REM #endregion
C#	#region	#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F#	//#region or (#_region)	//#endregion or (#_endregion)
Java	//#region or //<editor-fold>	// #endregion or //</editor-fold>
Markdown	<!-- #region -->	<!-- #endregion -->
Perl5	#region or =pod	#endregion or =cut
PHP	#region	#endregion
PowerShell	#region	#endregion
Python	#region or # region	#endregion or # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Basic	#Region	#End Region

PHP_14 (Install Boostrap)

Intall bootsrap

 - Open terminal on VS code or Server, then apt update

- apt install npm

- npm install bootstrap@5.3.2    (Link)

- restart service

We can't running SCSS in HTML, so we need to compile SCSS to CSS using SASS

- then continue to install sass compiler from VS Code extension marketplace

What is NPM ??

NPM is the world's largest Software Registry that contains over 800,000 code package (Open Source)

<link href="/node_modules/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

 

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

Different between of CSS and SCSS

Difference Between CSS and SCSS

Parameters	CSS	SCSS
Meaning and Definition	It is a scripting language- used for developing various web pages.	It is a more evolved and advanced version of the CSS language. It is a preprocessor type of language, and we need to compile or interrupt it into the CSS language.
Lines of Codes	CSS makes extensive use of lines of codes.	SCSS makes use of comparatively fewer lines in its codes.
Functions	CSS consists of various common features, and thus, it can perform some basic functions.	SCSS consists of more advanced features, and thus, it can perform more advanced functions.
Rules for Nesting	A regular CSS language does not assign various nested rules.	The SCSS language promotes rules that are properly nested.
Design	CSS is a styling language that lets users create, design, and style various web pages.	SCSS is a special file type in a SASS program that one needs to write in the Ruby language.
Languages Used	We generally use CSS in the JavaScript and HTML languages.	We generally use the SCSS in the Ruby language.

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

PHP_12 (HTML_Component)

<form action="form.php" method="post">

<input type="Text" placeholder="Enter Username">

<input type="Password" placeholder="Enter Password"><br>

<input type="Submit">

</form>

PHP_11 (String & Array)

String

strlen( )            for calculate length of string

strtoupper ( )    for make Uppercase the string

strtolower ( )    for make Lowercase the string

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

Array

https://www.php.net/en/ref.array

$list = [1,3,4,5]

Part of the array

$list2 = [2,4];

$string = [2,$list2];

$combine = in_array($list2,$string);

if ($combine) {

    echo "equal" . "<br>";

}

//--Result

equal

PHP_10 (MATH)

https://www.php.net/manual/en/index.php 

<?php

echo pow(2,7);

?>

//------------Result----------

128

echo rand(1, 100);

//rand number value from 1-100

PHP_09 (Define)

 <?php

$num1 = 10;

define("NAME", 1000);

echo NAME;

?>

//----Result ---

1000

PHP_08 (Function)

 <?php

function say_something(){

    echo "Hello Student";

}

say_something();

?>

//-----------Result-----------

Hello Student

PHP_07 (Include and Form)

 This code is used to insert another PHP file to insert/include using PHP language

<?php include "mz_01.php" ?>

HTML insert file

<form action="form.php">

PHP_06 (For)

For

for($counter = 0; $counter < 10; $counter++){

    echo $counter . "<br>";}

--------Result----------

1

2

3

4

5

6

7

8

9

Foreach

$numbers = array(1, "a", 3+2, 5);{

foreach($numbers as $number)

    echo $number . "<br>";}

--------Result----------

1

a

5

5

PHP_05 (IF Statement and Operator)

 

= =	Equal
! =	Not Equal
= = =	Identical
! = =	Not Identical
>	More than
<	Less than
>=	More than, and Equal
<=	Less than, and Equal
<>

 

Logical Operators

&&	And
| |	or
!	Not

 

PHP_04 (Resolution)

 https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

PHP_03 (echo, print, print_r)

 I will post this later

PHP_02 (TIPS & TRICKS)

 EMMET ABBREVIATION

Every language always have tips and trick to make job be faster, and it for common/usual/default regulation of typing.

i + tab (make struktur of HTML)

div.demo>ul>li*5>a{home} + tab

Fast Duplicate Line in Before Line 

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

Ctrl + D                 Duplicate selected wor

Ctrl+Shift+L           

PHP_01 (Basic)

For starting this PHP language, I use the ubuntu 22.04 server operation and place the file PHP in folder /etc/www/html , if want to edit main website and you need to edit to /etc/www/html/index.html file 

in Below is example mz_01.php is php file but with HTML language, with started with DOCTYPE, Html, Head and Body.

- Document type    : <!DOCTYPE html>
- <html>
- Head                   : <head>…..</head>
            head is started with <head> and closed with </head>
- Body                   : <body>…..</body>
- </html>

But if you want to start the PHP language, you just need to write with opened by <?php, insert item/function/variable, and closed with ?>

<?php  item  ?>

Then we continue with definition and position of Head and Body

h1, h2, h3 ...., hn is used to determine size of font, where h1 is the bigger to hn is the lowest size. 

<h1>Hello world</h1>

<h2>Hello world</h2>

 

PHP in Visual Studio Code (VSCode)

- Problem in rename file at VSCcode, 

- 

Connect VSCode to SSH server

- Input hostname@localhost address

- Input Password

- Folder config in Windows directory

Enter VS Code without insert Password (Using Key Authentication)

When entering remote sever in VS Code, we need enter hostname@localhost address, after that process and continue to insert the password. This process is really annoying !!!!!!!

For solve this process, we need to edit config file