PHP OOP CRUD Tutorial – Step By Step Guide! Part 4
Dodato 2 months ago u OOP PHP od Milan Janković

PHP OOP CRUD Tutorial – Step By Step Guide! Part 4

3.6 Output

In this section, we were able to set up our database using PhpMyAdmin. It should look like the image below.

We don't have a PHP program output yet. Let's continue on the next section to achieve more output.


To reduce some code mess, we will create the layout files with the codes and assets it needs.

4.1 Create header layout file

This layout_header.php file will be included at the beginning of the PHP files that will need it. This way, we won't have to write the same header codes every time.

We use the Bootstrap framework to make our project look good. If you're not yet familiar with you, please learn our Bootstrap tutorial here first.

Bootstrap CSS asset will be included inside the head tags.

  • Create php-oop-crud-level-1 folder and open it.
  • Create layout_header.php file.
  • Place the following code.

<!DOCTYPE html>

<html lang="en">



    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title><?php echo $page_title; ?></title>


    <!-- Latest compiled and minified Bootstrap CSS -->

    <link rel="stylesheet" href="" />


    <!-- our custom CSS -->

    <link rel="stylesheet" href="libs/css/custom.css" />





    <!-- container -->

    <div class="container">



        // show page header

        echo "<div class='page-header'>




4.2 Create footer layout file

This layout_footer.php will be included at the end of each PHP files that needs it. This way, we won't have to write the same footer codes every time.

The assets used in this file are:

Let's go on and create the footer layout file.

  • Open php-oop-crud-level-1 folder.
  • Create layout_footer.php file.
  • Place the following code.


    <!-- /container -->


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src=""></script>


<!-- Latest compiled and minified Bootstrap JavaScript -->

<script src=""></script>


<!-- bootbox library -->

<script src=""></script>




4.3 Create custom CSS file

This file is used to change any style we want on our web page. It is also used to override the default style given by Bootstrap.

  • Open php-oop-crud-level-1 folder.
  • Create libs folder.
  • Create css folder.
  • Create custom.css file.
  • Place the following code.


    margin:0 .5em 0 0;




    margin: 0 0 1em 0;

    overflow: hidden;



/* some changes in bootstrap modal */

.modal-body {

    padding: 20px 20px 0px 20px !important;

    text-align: center !important;




    text-align: center !important;


4.4 Output

The layout files we created in this section is meant to be used inside another PHP file. If we try to run the layout files alone, we won't get any meaningful output.

If you run layout_header.php, it will look like this on the browser.

The custom.css file will look like this.

The layout_footer.php is blank. Let's continue on the next section to see a more meaningful output.


Ostavite komentar

Treba vam web sajt ?