Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav id="navbar" class=" flex-column navbar-expand-md navbar navbar-dark bg-dark">
  <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      </form>
  <header><h1>Documentation</h1></header>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="w-100 collapse navbar-collapse" id="navbarNavAltMarkup">
     <ul class="w-100 navbar-nav flex-column d-flex align-content-start">
        <li class="nav-item dropdown php">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            PHP
          </a>
          <ul class="dropdown-menu bg-dark w-100" aria-labelledby="navbarDropdownMenuLink">
            <li class="nav-item"><a class="nav-link" href="#php_intro">PHP Intro</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_install">PHP install</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_syntax">PHP Syntax</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_comments">PHP Comments</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_variables">PHP Variables</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_echo_print">PHP Echo Print</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_data_types">PHP Data Types</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_strings">PHP Strings</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_numbers">PHP Numbers</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_math">PHP Math</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_constants">PHP Constants</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_operators">PHP Operators</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_if_else_elseif">PHP If Else Elseif</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_switch">PHP Switch</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_loops">PHP Loops</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_functions">PHP Functions</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_arrays">PHP Arrays</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_superglobals">PHP Superglobals</a></li>
       <li class="nav-item"><a class="nav-link" href="#php_regex">PHP RegEx</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown appgyver">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            AppGyver
          </a>
          <ul class="dropdown-menu bg-dark w-100" aria-labelledby="navbarDropdownMenuLink">
            <li class="nav-item"><a class="nav-link" href="#appgyver">Tutorials and Articles</a></li>
            <li class="nav-item"><a class="nav-link" href="#creating_an_app">Creating an App</a></li>
          </ul>
        </li>
     </ul><!--navbar-->
     </div>
</nav>
<main id="main-doc">
  <section  id="php_intro" class="main-section">
    <header><h2>PHP Intro</h2></header>
    <article>
    <p>PHP code is executed on the server.</p>
      <h3>Learn PHP</h3>
    <p>PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.

PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.</p>
<div class="links"><a class="button" href="https://www.w3schools.com/php/php_intro.asp">Start learning PHP</a></div>
<hr>
<h3>Easy Learning with "PHP Tryit"</h3>
    <p>With our online "PHP Tryit" editor, you can edit the PHP code, and click on a button to view the result</p>
    <p><b>Example</b></p>
    <code> &lt;?php
echo "My first PHP script!";
?&gt;</code>
<div class="links">
  <a class="button" href="#">Try it</a></div>
    <p>Click on the "Try it" link to see how it works</p>
    <hr>
    <h3>PHP Examples</h3>
    <p>Learn by examples! This tutorial supplements all explanations with clarifying examples</p>
    <a class="button" href="https://www.w3schools.com/php/php_examples.asp" target="_blank">See All examples</a>
    <hr>
    <h3>PHP Quiz Test</h3>
    <p>Learn by taking a quiz! This quiz will give you a signal of how much you know, or do not know, about PHP.</p>
    <a class="button" href="https://www.w3schools.com/php/php_quiz.asp" target="_blank">Start Quiz</a>
      <hr>
    <h3>PHP References</h3>
    <p> PHP reference contains different categories of all PHP functions, keywords and constants, along with examples.</p>
    <ul class="php_references">
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_array.asp">Array</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_calendar.asp">Calendar</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_date.asp">Date</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_mysqli.asp">MySQLi</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_mail.asp">Mail</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_xml.asp">XML Parser</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_zip.asp">Zip</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_output_control.asp">Output</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_string.asp">String</a></li>
      <li class="ref_link"><a href="https://www.w3schools.com/php/php_ref_filter.asp">Filter</a></li>
    </ul>
      <hr>
    <h3>What You Should Already Know</h3>
    <p>Before you continue you should have a basic understanding of the following:</p>
    <ul class="php_references">
      <li class="ref_link">
        <a href="https://www.w3schools.com/html/default.asp" target="_blank">HTML</a>
      </li>
      <li class="ref_link">
        <a href="https://www.w3schools.com/css/default.asp" target="_blank">CSS</a>
      </li>
      <li class="ref_link">
        <a href="https://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a>
      </li>
    </ul>
    <p>If you want to study these first, find the tutorials on <a href="https://freecodecamp.org">freeCodeCamp.org</a></p>
    <hr>
    <h3>What is PHP?</h3>
    <ul>
      <li>PHP is an acronym for "PHP: Hypertext Preprocessor"</li>
      <li>PHP is a widely-used, open source scripting language</li>
      <li>PHP scripts are executed on the server</li>
      <li>PHP is free to download and use</li>
    </ul>
    <div class="gray_canvas">
      <p>
        <strong>PHP is an amazing and popular language!</strong>
      </p>
      <p>It is powerful enough to be at the core of the biggest blogging system on the web (WordPress)!</p>
      <p>It is deep enough to run large social networks!</p>
      <p>It is also easy enough to be a beginner's first server side language!</p>
      </div>
      <hr>
      <h3>What is a PHP File?</h3>
      <ol>
        <li>
          PHP files can contain text, HTML, CSS, JavaScript, and PHP code
        </li>
        <li>
          PHP code is executed on the server, and the result is returned to the browser as plain HTML
        </li>
        <li>
          PHP files have extension "<span style="color: red;">.php</span>"
        </li>
      </ol>
    <hr>
   <h3>What Can PHP Do?</h3>
    <ol>
  <li>PHP can generate dynamic page content</li>
  <li>PHP can create, open, read, write, delete, and close files on the server</li>
  <li>PHP can collect form data</li>
  <li>PHP can send and receive cookies</li>
  <li>PHP can add, delete, modify data in your database</li>
  <li>PHP can be used to control user-access</li>
  <li>PHP can encrypt data</li>
</ol>
      <p>With PHP you are not limited to output HTML. You can output images, PDF files, and even Flash movies. You can also output any text, such as XHTML and XML.</p>
      <hr>
      <h3>Why PHP?</h3>
      <ul>
  <li>PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)</li>
  <li>PHP is compatible with almost all servers used today (Apache, IIS, etc.)</li>
  <li>PHP supports a wide range of databases</li>
  <li>PHP is free. Download it from the official PHP resource:<a class="text-primary" target="_blank" href="http://www.php.net/">php.net</a></li>
  <li>PHP is easy to learn and runs efficiently on the server side</li>
</ul>
      
    </article>
    <p>More about PHP on <a class="text-primary" href="https://www.w3schools.com/php/">w3schools</a>
    <hr>
  </section>
  <section  id="php_install" class="main-section">
      <header><h2>PHP Install</h2></header>
    <article>
      <h3>What Do I Need?</h3>
      <p>To start using PHP, you can:</p>
      <ul>
  <li>Find a web host with PHP and MySQL support</li>
  <li>Install a web server on your own PC, and then install PHP and MySQL</li>
 </ul>
      <hr>
      <h3>Use a Web Host With PHP Support</h3>
      <p>If your server has activated support for PHP you do not need to do anything.

Just create some <span style="color: red;">.php</span> files, place them in your web directory, and the server will automatically parse them for you.

You do not need to compile anything or install any extra tools.

Because PHP is free, most web hosts offer PHP support.</p>
      <hr>
      <h3>Set Up PHP on Your Own PC</h3>
      <p>However, if your server does not support PHP, you must:</p>
      <ol>
  <li>install a web server</li>
  <li>install PHP</li>
  <li>install a database, such as MySQL</li>
</ol>
      <p>The official PHP website (PHP.net) has installation instructions for PHP: <a href="http://php.net/manual/en/install.php" target="_blank" style="color: blue;">Read</a></p>
      <hr>
      <h3>PHP Online Compiler / Editor</h3>
      <p>With w3schools' online PHP compiler, you can edit PHP code, and view the result in your browser</p>
      <div class="editor-container code_box">
<div class="editor-child">
<div style="border-left:none;padding:20px 16px">
<span style="color:black"><span style="color:red">&lt;?php</span><br>
$txt = <span style="color:brown">"PHP"</span>;<br>
<span style="color:mediumblue">echo</span> <span style="color:brown">"I love <span style="</span>color:white!important;<span class='phpstringcolor' style=color:brown>">$txt!</span>"</span>;<br>
<span style="color:red">?&gt;</span></span>
 </div>
</div>


<div id="editorEdit">
<code>I love PHP!</code><br>
</div>
</div>
 <a class="button" href="https://www.w3schools.com/php/phptryit.asp?filename=tryphp_compiler" target="_blank">Try it Yourself</a>
      <p>Click on the "Try it Yourself" button to see how it works.</p>
    </article>
    <p>More about PHP on <a class="text-primary" href="https://www.w3schools.com/php/">w3schools</a>
    <hr>
  </section>
  <section  id="php_syntax" class="main-section">
    <header><h2>PHP Syntax</h2></header>
    <article>
      <p>A PHP script is executed on the server, and the plain HTML result is sent back to the browser.</p>
      <h3>Basic PHP Syntax</h3>
      <p>A PHP script can be placed anywhere in the document.</p>

      <p>A PHP script starts with <code>&lt;?php</code> and ends with 
        <code>?&gt;</code>:</p>
      <div class="code_box">
        <div>&lt;?php<br>// PHP code goes here<br>?&gt;
        </div>
      </div>
      <p>The default file extension for PHP files is "<code>.php</code>".</p>
      <p>A PHP file normally contains HTML tags, and some PHP scripting code.</p>
      <p>Below, we have an example of a simple PHP file, with a PHP script that uses a built-in PHP function
        "<code>echo</code>" to output the text "Hello World!" on a web page:</p>
      <div class="code_box">
       <span style="color:brown"><span style="color:mediumblue">&lt;</span>!DOCTYPE<span style="color:red"> html</span><span style="color:mediumblue">&gt;</span></span><br>
       <span style="color:brown"><span style="color:mediumblue">&lt;</span>html<span style="color:mediumblue">&gt;</span></span><br>
       <span style="color:brown"><span style="color:mediumblue">&lt;</span>body<span style="color:mediumblue">&gt;</span></span><br><br>
       <span style="color:brown"><span style="color:mediumblue">&lt;</span>h1<span style="color:mediumblue">&gt;</span></span>My first PHP page<span style="color:brown"><span style="color:mediumblue">&lt;</span>/h1<span style="color:mediumblue">&gt;</span>            </span><br><br>
       <span style="color:black"><span style="color:red">&lt;?php</span><br><span style="color:red">
       </span> 
       <span style="color:mediumblue">echo</span> <span style="color:brown">"Hello World!"</span>;<br><span style="color:red">?&gt;</span></span><br><br>
       <span style="color:brown"><span style="color:mediumblue">&lt;</span>/body<span style="color:mediumblue">&gt;</span></span><br>
       <span style="color:brown"><span style="color:mediumblue">&lt;</span>/html<span style="color:mediumblue">&gt;</span></span>
 </div>
 <p><strong>Note:</strong> PHP statements end with a semicolon (<code>;</code>).</p>
      <hr>
      <h3>PHP Case Sensitivity</h3>
      <p>In PHP, keywords (e.g. <code>if</code>, 
<code>else</code>, <code>while</code>, 
<code>echo</code>, etc.), classes, functions, 
and user-defined functions are not case-sensitive.</p>
      <p>In the example below, all three echo statements below are equal and legal:</p>
      <div class="code_box">
 <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>!DOCTYPE<span class="attributecolor" style="color:red"> html</span><span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>
 <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>html<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>
    <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>body<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><br>
    <span class="phpcolor" style="color:black"><span class="phptagcolor" style="color:red">&lt;?php</span><br><span class="phpnumbercolor" style="color:red">
</span> <span class="phpkeywordcolor" style="color:mediumblue">ECHO</span> <span class="phpstringcolor" style="color:brown">"Hello World!&lt;br&gt;"</span>;<br><span class="phpkeywordcolor" style="color:mediumblue">echo</span> <span class="phpstringcolor" style="color:brown">"Hello World!&lt;br&gt;"</span>;<br><span class="phpnumbercolor" style="color:red">
</span> <span class="phpkeywordcolor" style="color:mediumblue">EcHo</span> <span class="phpstringcolor" style="color:brown">"Hello World!&lt;br&gt;"</span>;<br><span class="phptagcolor" style="color:red">?&gt;</span></span><br><br>
    <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/body<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>
    <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/html<span class="tagcolor" style="color:mediumblue">&gt;</span></span>
 </div>
    <p class="gray_canvas"><strong>Note:</strong> However; all variable names are case-sensitive!</p>
    <p>Look at the example below; only the first statement will display the value of the 
<code>$color</code> variable! This is because 
<code>$color</code>, <code class="w3-codespan">$COLOR</code>, and 
<code>$coLOR</code> are treated as three 
different variables:</p>
      <div class="code_box">
 <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>!DOCTYPE<span class="attributecolor" style="color:red"> html</span><span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>
 <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>html<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>
    <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>body<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br><br>
    <span class="phpcolor" style="color:black"><span class="phptagcolor" style="color:red">&lt;?php</span><br>$color = <span class="phpstringcolor" style="color:brown">"red"</span>;<br><span class="phpnumbercolor" style="color:red">
</span> <span class="phpkeywordcolor" style="color:mediumblue">echo</span> <span class="phpstringcolor" style="color:brown">"My car is "</span> . $color . <span class="phpstringcolor" style="color:brown">"&lt;br&gt;"</span>;<br><span class="phpkeywordcolor" style="color:mediumblue">echo</span> <span class="phpstringcolor" style="color:brown">"My house is "</span> . $COLOR . <span class="phpstringcolor" style="color:brown">"&lt;br&gt;"</span>;<br><span class="phpkeywordcolor" style="color:mediumblue">echo</span> <span class="phpstringcolor" style="color:brown">"My boat is "</span> . $coLOR . <span class="phpstringcolor" style="color:brown">"&lt;br&gt;"</span>;<br><span class="phptagcolor" style="color:red">?&gt;</span></span><br><br>
    <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/body<span class="tagcolor" style="color:mediumblue">&gt;</span></span><br>
    <span class="tagnamecolor" style="color:brown"><span class="tagcolor" style="color:mediumblue">&lt;</span>/html<span class="tagcolor" style="color:mediumblue">&gt;</span></span>
 </div>
    </article>
    <p>More about PHP on <a class="text-primary" href="https://www.w3schools.com/php/">w3schools</a>
      <hr>
  </section>
  <section  id="php_comments" class="main-section">
    <header><h2>PHP Comments</h2></header>
    <article>
      <h3>Comments in PHP</h3>
      <p>A comment in PHP code is a line that is not executed as a part of the program. Its only purpose is to be read by someone who is looking at the code.</p>
      <p>Comments can be used to:</p>
      <ul>
       <li>Let others understand your code</li>
       <li>Remind yourself of what you did - Most programmers have experienced coming back to their own work a year or two later and having to re-figure out what they did. Comments can remind you of what you were thinking when you wrote the code</li>
      </ul>
      <p>PHP supports several ways of commenting:</p>
      <div class="code_box">
        <span  style="color:brown"><span  style="color:mediumblue">&lt;</span>!DOCTYPE<span  style="color:red"> html</span>
        <span  style="color:mediumblue">&gt;</span></span><br>
        <span  style="color:brown"><span  style="color:mediumblue">&lt;</span>html<span  style="color:mediumblue">&gt;</span></span>       <br>
      <span  style="color:brown"><span  style="color:mediumblue">&lt;</span>body<span  style="color:mediumblue">&gt;</span></span>          <br><br>
      <span  style="color:black"><span class="phptagcolor" style="color:red">&lt;?php</span><br><span  style="color:red">
      </span><span style="color:green">// This is a single-line comment<br></span><br><span  style="color:red">
      </span><span  style="color:green"># This is also a single-line comment<br></span><span  style="color:red">?&gt;</span></span>       <br><br>
      <span  style="color:black"><span  style="color:red">&lt;?php</span><br><span  style="color:red">
      </span>
      <span  style="color:green">/*<br>This is a multiple-lines comment block<br>that spans over multiple<br>lines<br>
*/    </span><br><span style="color:red">?&gt;</span></span>
      <span style="color:black"><span style="color:red">&lt;?php</span><br><span style="color:red">
</span>  <span style="color:green">// You can also use comments to leave out parts of a code line<br></span>$x = <span  style="color:red">5</span> <span  style="color:green">/* + 15 */</span> + <span  style="color:red">5</span>;<br><span  style="color:mediumblue">echo</span> $x;<br><span  style="color:red">?&gt;</span></span>
      <span  style="color:brown"><span  style="color:mediumblue">&lt;</span>/body<span  style="color:mediumblue">&gt;</span></span><br>
      <span  style="color:brown"><span  style="color:mediumblue">&lt;</span>/html<span  style="color:mediumblue">&gt;</span></span>
      </div>
      <p>More about PHP on <a class="text-primary" href="https://www.w3schools.com/php/">w3schools</a>
      <hr>
    </article>
  </section>
  <section  id="php_variables" class="main-section">
   <header><h2>PHP Variables</h2></header>
    <article>
    <p>Variables are "containers" for storing information.</p>
    <hr>
    <h3>Creating (Declaring) PHP Variables</h3>
    <p>In PHP, a variable starts with the <code>$</code> sign, followed by the name of the variable:</p>
    <p><b>Example</b></p>
    <div class="code_box">
<span  style="color:black"><span  style="color:red">&lt;?php</span><br>
$txt = <span  style="color:brown">"Hello world!"</span>;<br>
$x = <span  style="color:red">5</span>;<br>$y = <span  style="color:red">10.5</span>;<br>
<span  style="color:red">?&gt;</span></span>
 </div>
 <p>After the execution of the statements above, the variable 
<code class="w3-codespan">$txt</code> will hold the value 
<code class="w3-codespan">Hello world!</code>, the variable 
<code class="w3-codespan">$x</code> will hold the value 
<code class="w3-codespan">5</code>, 
and the variable <code class="w3-codespan">$y</code> will hold the value 
<code class="w3-codespan">10.5</code>.</p>
    <p><b>Note:</b> When you assign a text value to a variable, put quotes around the value.</p>
    <p><strong>Note:</strong> Unlike other programming languages, PHP has no command 
for declaring a variable. It is created the moment you first assign a value to 
it.</p>
    <p class="gray_canvas">Think of variables as containers for storing data.</p>
    <hr>
    <h3>PHP Variables</h3>
    <p>A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume).</p>
    <p>Rules for PHP variables:</p>
    <ul>
      <li>A variable starts with the <code class="w3-codespan">$</code> sign, followed by the name of the variable</li>
      <li>A variable name must start with a letter or the underscore character</li>
      <li>A variable name cannot start with a number</li>
      <li>A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )</li>
      <li>Variable names are case-sensitive (<code class="w3-codespan">$age</code> and 
      <code class="w3-codespan">$AGE</code> are two different variables)</li>
    </ul>

    <p class="gray_canvas">Remember that PHP variable names are case-sensitive!</p>
    <hr>
    <h3>Output Variables</h3>
    <p>The PHP <code>echo</code> statement is often used to output data to the screen.</p>
    <p>The following example will show how to output text and a variable:</p>
    <p><b>Example</b></p>
    <div class="code_box">
<span  style="color:black"><span  style="color:red">&lt;?php</span><br>
$txt = <span  style="color:brown">"freeCodeCamp.org"</span>;<br><span  style="color:red">
</span> <span  style="color:mediumblue">echo</span> <span  style="color:brown">"I love $txt!"</span>;<br><span  style="color:red">?&gt;</span></span>
 </div>
    <p>The following example will produce the same output as the example above:</p>
    <div class="code_box">
<span  style="color:black"><span  style="color:red">&lt;?php</span><br>
$txt = <span  style="color:brown">"W3Schools.com"</span>;<br><span  style="color:red">
</span> <span  style="color:mediumblue">echo</span> <span  style="color:brown">"I love "</span> . $txt . <span  style="color:brown">"!"</span>;<br><span  style="color:red">?&gt;</span></span>
 </div>
      <p>The following example will output the sum of two variables:</p>
      <div class="code_box">
<span  style="color:black"><span  style="color:red">&lt;?php</span><br><span  style="color:red">
</span> $x = <span style="color:red">5</span>;<br>$y = <span style="color:red">4</span>;<br><span  style="color:mediumblue">echo</span> $x + $y;<br><span style="color:red">?&gt;</span></span>
 </div>
      <p><strong>Note:</strong> You will learn more about the "<code>echo</code>" statement and how 
to output data to the screen in the next chapter.</p>
      <hr>
      <h3>PHP is a Loosely Typed Language</h3>
      <p>In the example above, notice that we did not have to tell PHP which data type the variable is.</p>
      <p>PHP automatically associates a data type to the variable, depending on its value. 
Since the data types are not set in a strict sense, you can do things like 
adding a string to an integer without causing an error.</p>
      <p>In PHP 7, type declarations were added. This gives an option to specify 
the data type expected when declaring a function, and by enabling the strict requirement, it will throw a "Fatal 
Error" on a type mismatch.</p>
      <p>You will learn more about <code>strict</code> and 
<code>non-strict</code> requirements, and  
data type declarations in the <a class="text-primary" target="_blank" href="https://www.w3schools.com/php/php_functions.asp">PHP Functions</a> chapter.</p>
      <p>More about PHP on <a class="text-primary" href="https://www.w3schools.com/php/">w3schools</a>
      <hr>
    </article>  
  </section>
  <section  id="php_echo_print" class="main-section">
    <header><h2>PHP Echo Print</2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_data_types" class="main-section">
    <header><h2>PHP Data Types</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_strings" class="main-section">
    <header><h2>PHP Strings</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_numbers" class="main-section">
    <header><h2>PHP Numbers</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_math" class="main-section">
    <header><h2>PHP Math</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_constants" class="main-section">
    <header><h2>PHP Constants</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_operators" class="main-section">
    <header><h2>PHP Operators</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_if_else_elseif" class="main-section">
    <header><h2>PHP If Else Elseif</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_switch" class="main-section">
    <header><h2>PHP Switch</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_loops" class="main-section">
    <header><h2>PHP Loops</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_functions" class="main-section">
    <header><h2>PHP Functions</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_arrays" class="main-section">
    <header><h2>PHP Arrays</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_superglobals" class="main-section">
    <header><h2>PHP Superglobals</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="php_regex" class="main-section">
    <header><h2>PHP RegEx</h2></header>
    <h3>Under Construction</h3>
  </section>
  <section  id="appgyver" class="main-section">
    <header><h2>AppGyver</h2></header>
    <h3>Tutorials and Articles</h3>
    <p>This is an introductory series for anyone who does not have a background in programming, or anyone who wants to brush up on their knowledge</p>
    <article>
    <h3>Introduction</h3>
    <p>Welcome! This an overview of the series, in which we'll go through and explain programming concepts such as variables, data, functions and much more.</p>
<p>The parts 1-5 are a quick introduction to some of the key concepts and terminology, so you can just view them at your own pace. In parts 6 - 10 we'll build a full app from scratch!</p>
      <div class="align-center"><iframe src="https://player.vimeo.com/video/503402967?h=7cf7a737b4&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
      <hr>
      <h3>The Fundamentals</h3>
      <p><strong>Part 1 - What are Variables?</strong></p>
      <p>Variables are a fundamental programming concept. In the video we explain what they are and create some of our own in Composer Pro</p>
      <div class="align-center">
        <iframe src="https://player.vimeo.com/video/503403792?h=09139f7371&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/503403792">App Programming 101 - Part 1 - What are Variables?</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
      </div>
      <hr>
      <h3>What are Bindings?</h3>
      <p>Bindings are an important part of how modern apps work. In this video we learn how they work in Composer Pro.</p>
      <div class="align-center">
      <iframe src="https://player.vimeo.com/video/503403487?h=fbb556305f&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/503403487">App Programming 101 - Part 2 - What are Bindings?</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
        </div>
      <hr>
      <h3>What is Data?</h3>
      <p>Data is a commonly used word, but in programming it has a specific meaning. In this video we take a look at the concept of data as well as widely used JSON data format which Composer Pro also uses</p>
      <div class="align-center">
        <iframe src="https://player.vimeo.com/video/503404192?h=6985bd3366&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/503404192">App Programming 101 - Part 3 - What is Data?</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
      </div>
      <hr>
      <h3>What are Functions pt. 1</h3>
      <p>Functions are a fundamental programming concept. In this video we'll see how to work with these building blocks of programming in Composer Pro.</p>
      <div class="align-center"><iframe src="https://player.vimeo.com/video/503404705?h=5842a54366&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/503404705">App Programming 101 - Part 4 - What are Functions pt. 1</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p></div>
      <h3>What are Functions pt. 2</h3>
      <p>In this video we dive into the second type of functions in Composer Pro: formula functions</p>
      <div class="align-center">
        <iframe src="https://player.vimeo.com/video/503405139?h=3ca9a4c938&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/503405139">App Programming 101 - Part 5 - What are Functions pt. 2</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
      </div>
      <hr>
      </article>
    <article id="creating_an_app">
      <h2>Creating an AppGyver App</h2>
      <p>Now it’s time to put what we’ve learned to use by creating an application. The application we’re going to create is going to scan barcodes from food packaging and displays information about the product using the <a href="https://world.openfoodfacts.org/data">OpenFoodFacts API</a>.</p>
      <hr>
      <h3>Sketching it out</h3>
      <p>In this video we'll set out our plans for the app and also create the UI for the app.</p>
      <div class="align-center">
        <iframe src="https://player.vimeo.com/video/511056845?h=c40ebae1e8&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/511056845">App Programming 101 - Part 6 - Creating an app</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
      </div>
      <hr>
      <h3>Scanning the Code</h3>
      <p>In this video we create a logic flow that opens up the device camera for scanning barcodes.</p>
      <div class="align-center">
        <iframe src="https://player.vimeo.com/video/511057470?h=46c81b06af&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/511057470">App Programming 101 - Part 7 - Scanning the code</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
      </div>
      <hr>
      <h3>Connecting to the API</h3>
      <p>In this video we create a data resource to integrate with the API.</p>
<div class="align-center">
  <iframe src="https://player.vimeo.com/video/511058106?h=7aba13b9b9&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/511058106">App Programming 101 - Part 8 - Connecting to the API</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
      <p>Example API url: <a href="https://world.openfoodfacts.org/api/v0/product/6416453061361.json">https://world.openfoodfacts.org/api/v0/product/6416453061361.json</a><br>
OpenFoodFacts API page: <a href="https://world.openfoodfacts.org/data">https://world.openfoodfacts.org/data</a></p>
      <hr>
      <h3>Fetching the Data</h3>
      <p>In this video we use more logic flows to send requests to the API and get data back.</p>
      <div class="align-center">
        <iframe src="https://player.vimeo.com/video/511059114?h=e9c49f8837&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/511059114">App Programming 101 - Part 9 - Fetching the Data</a> from <a href="https://vimeo.com/appgyver">AppGyver</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
      </div>
      <hr>
    </article>
  </section>
 <hr>
  
  <copyright class="copyright"> 
    <p>This PHP documentation is taken from <a class=" text-primary" href="https://www.w3schools.com/php/default.asp" target="_blank">w3 schools</a></p>
    <p><a href="https://docs.appgyver.com/docs/app-programming-101">AppGyver</a> full documentation</p>
  </copyright>
</main>

              
            
!

CSS

              
                /*Normalize*/
* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  font-family: Sans-Serif, Monospace;
  line-height: 1.5;
  background-color: white;
  margin: 0;
}

a:link {
  color: blue;
}

/* visited link */
a:visited {
  color: rgb(110,125,121);
}

/* mouse over link */
a:hover {
  color: rgb(223,217,193);
}

/* selected link */
a:active {
  color: blue;
}
a.button {
  display: inline-block;
  background-color: gray;
  padding: 0.5rem 0.7rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 1.2rem;
}
a.button:visited {
  color: rgb(223,217,193);
}
h1 {
  font-size: 2.5rem;
  padding-top: 1rem;
}
h2 {
  font-size: 1.8rem;
}
h3 {
  font-size: 1.5rem;
}
p {
  font-size: 1.2rem;
}
hr {
  margin-bottom: 2.5rem;
}
code {
  background-color: white;
}
.code_box {
    line-height: 1.5;
    box-sizing: inherit;
    font-family: Consolas,Menlo,"courier new",monospace;
    width: auto;
    background-color: #fff;
    color: #000;
    padding: 8px 12px;
    word-wrap: break-word;
    border: 1px solid #ccc!important;
    margin-top: 1rem!important;
    margin-bottom: 2rem!important;
    font-size: 1.2rem;
}
ul {
  list-style: none;
  font-size: 1.2rem;
  list-style-position: inside;
}
ul a {
  text-decoration: none;
}
ol {
  font-size: 1.2rem;
  list-style-position: inside;
}
.main-section ul {
  list-style-type: circle;
}
ul.php_references {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
  list-style-type: none;
}
ul.php_references a {
  color: white;
}
.ref_link {
  width: 25%;
  margin: 0.5rem;
  padding: 0.5rem 0.7rem;
  background-color: gray;
  text-align: center;
}
#navbar {
  padding:1rem 0;
}
#navbar h1 {
  font-size:1.8rem;
  color: white;
  text-align: center;
}
#navbar li {
  padding: 0.5rem 1.5rem;
  font-size: 1.2rem;
  border-bottom: 1px solid rgb(52,52,52);
  width: 100%;
  text-align: left;
}
  #navbar li a {
    color: rgb(242,242,242);
  }
  #navbar li a:hover {
    color: rgb(200,200,200);
  }
#main-doc {
  padding: 1rem;
}
.main-section {
  padding-top: 2rem;
}
.gray_canvas {
  background-color: rgb(223,217,193);
  padding: 1rem;
  margin-top: 1rem;
}
.copyright {
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  #navbar {
  position: fixed;
  padding-top:1rem;
  top: 0px;
  left: 0px;
  min-width: 350px;
  width: 350px;
  height: 100%;
  overflow-y: auto;
  }

#main-doc {
  position: absolute;
  margin-left: 350px;
  padding: 1rem;
  background-color: rgb(242,242,242);
  }

}
/*compiler styles start*/
.editor-container {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #000!important;
    box-sizing: inherit;
    padding: 0.01em 16px;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 8px;
}
.editor-container > div.editor-child {
      -webkit-text-size-adjust: 100%;
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #000!important;
    box-sizing: inherit;
    width: 49.6%;
    float: left;
    margin-right: 5px;
}
#editorEdit {
      -webkit-text-size-adjust: 100%;
    font-size: 15px;
    line-height: 1.5;
    box-sizing: inherit;
    text-align: left!important;
    border: 1px solid #ccc!important;
    width: 49.6%;
    float: left;
    color: white;
    font-family: Arial !important;
    background: black;
    margin: 16px 0;
    margin-left: 5px;
    padding: 20px 16px;
}
.align-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 2rem 1rem;
}
              
            
!

JS

              
                //www.piunoff.eu - WordPress dev//
              
            
!
999px

Console