Now, you know most of the terms we need to work in object oriented programming. Then, let's create a custom php framework using oops in MVC pattern. basically, MVC is the shorname for MODAL VIEW and CONTROLLER where MODAL holds all the database queries that connects the application to the database and carries out all those operations related to database, CONTROLLER holds all the processing methods and functions required for the model queries to execute and VIEW holds all the view files. We are naming this application as pdo-project.
The first thing we'll need to work in php is the database. We need to define some static database and server informations to connect the project to the database but while working on live server the hostname, database name along with database username and password may vary. In such cases we need to go to the configuration file and change all details. Here in this section, we are creating a configs.php file that checks for the hostname and retrieves the hostname itself depending upon the environment. The file will be located in the root directory.
<?php
if($_SERVER['HTTP_HOST'] == 'localhost'){
define('ENV','development');
$servername = $_SERVER['SERVER_NAME'];
$docroot = $_SERVER['DOCUMENT_ROOT'];
}else{
define('ENV','production');
}
switch(ENV){
case 'development':
error_reporting(-1);
define('HTTP','https://'.$servername.'/pdo-project/');
define('ROOT',$docroot.'/pdo-project/');
break;
case 'production':
error_reporting(0);
define('HTTP','https://www.yourdomainname.com');
define('ROOT','https://www.yourdomainname.com');
break;
default: break;
}
After using this file, we can define paths using HTTP or ROOT constants wherever needed. Now, we are good to move ahead. Let's create a directory named admin where we'll keep all the backend files. We'll create a controller page that'll be the first page to run on the server whenever a request url is sent for admin directory. We'll name it main.php. In this file, we'll check for the url page request. If the requested page exists, we'll send the users to that page else we'll send them to 404 page.
<?php
require_once('../configs.php');
$page = isset($_GET['page']) ? $_GET['page'] : 'dashboard';
$page .= '.php';
$fileName = ROOT. 'admin/' .$page;
if(file_exists($fileName) && (is_file($fileName))){
require_once($fileName);
}else{
$location = 'main.php?page=dashboard';
require_once HTTP.'Errors/404.php';
}
Since we are redirecting the user to 404 page in case the requested file is not found, we need to create it.
<div class="col-sm-12 jumbotron text-center" style="min-height: 620px;"> <h1>Page Not Found</h1> <p><a href="<?=$location?>" class="btn btn-sm btn-success"><i class="fa fa-reply"></i> Go Back</a></p> </div>
As we're sending the users to 404 page and it's got a Go Back button. We should be able to redirect the users back to the page from where they are redirected. That's why, we are creating a variable named $location to define the Go Back button's link in 404 page. Once you try to send values to 404.php file, you should require that file in main.php instead of using header() function or you need to hold the page location in session. Now the basic setup has been done, we can move in and get a dashboard template from online open source and use it for our backend application rather than creating our own.
Since we want main.php to be the first page to run on server, we need to redirect the users from our index page that's the one the browser autoloads as the first page. Let's add a line of command there to redirect the user.
<?php
header('Location: main.php?page=dashboard');
Now, the index.php page is all set to redirect the user to main.php and the first template to be loaded by default would be the dashboard.php. Let's setup our dashboard page then.
It's a very good practice to have a separate header and footer file and include it in the body section while working on view files rather than repeating the same block of links in all of your view pages. Let's create a directory named Layouts where we'll keep those header and footer files. Open the index page of dashboard template that you want to integrate in your project and add all the necessary css files from there in your header.php and copy all those linked files in your project's css and js folder respectively. I'm using AdminLTE Dashboard here. So, we'll add all those css and js files it needs to function properly.
<!DOCTYPE html> <html> <head> <title><?=$title?></title> <link rel="stylesheet" type="text/css" href="<?=HTTP.'Assets/css/bootstrap.min.css'?>"> <link rel="stylesheet" type="text/css" href="<?=HTTP.'Assets/css/font-awesome.min.css'?>"> <link rel="stylesheet" type="text/css" href="<?=HTTP.'Assets/css/ionicons.min.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/AdminLTE.min.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/all-skins.min.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/blue.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/morris.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/jquery-jvectormap.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/datepicker3.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/daterangepicker.css'?>"> <link rel="stylesheet" href="<?=HTTP.'Assets/css/bootstrap3.min.css'?>"> </head> <body class="hold-transition skin-blue sidebar-mini">
Let's create a footer.php file and do the same to all those js links and files.
<script type="text/javascript" src="<?=HTTP.'Assets/js/jquery.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/jquery-ui.min.js'?>"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script type="text/javascript" src="<?=HTTP.'Assets/js/bootstrap.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/raphael.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/morris.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/jquery.sparkline.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/jquery-jvectormap.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/jquery-jvectormap-world-mill-en.js'?>"></script>
<script src="<?=HTTP.'Assets/js/jquery.knob.js'?>"></script>
<script src="<?=HTTP.'Assets/js/moment.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/daterangepicker.js'?>"></script>
<script src="<?=HTTP.'Assets/js/bootstrap-datepicker.js'?>"></script>
<script src="<?=HTTP.'Assets/js/bootstrap3.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/jquery.slimscroll.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/fastclick.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/app.min.js'?>"></script>
<script src="<?=HTTP.'Assets/js/dashboard.js'?>"></script>
<script src="<?=HTTP.'Assets/js/demo.js'?>"></script>
</body>
</html>
Now, copy the rest of the contents to another file named dashboard.php. There's some sections in dashboard.php file like header and navigation that we'll need in each application files. So, we'll move those codes to a new file named navigation.php inside layouts directory and include it in main.php. Furthermore, we'll need to replace links in those lists with the ones we are going to create and that'll save huge time and effort. Let's add a link to the page to add user and display the users added.
<div class="wrapper"> <header class="main-header"> <a href="#" class="logo"> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <nav class="navbar navbar-static-top"> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="<?=HTTP.'/Assets/Uploads/user2-160x160.jpg'?>" class="user-image" alt="User Image"> <span class="hidden-xs">Alexander Pierce</span> </a> <ul class="dropdown-menu"> <li class="user-header"> <img src="<?=HTTP.'/Assets/Uploads/user2-160x160.jpg'?>" class="img-circle" alt="User Image"> <p> Alexander Pierce - Web Developer <small>Member since Nov. 2012</small> </p> </li> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">Profile</a> </div> <div class="pull-right"> <a href="#" class="btn btn-default btn-flat">Sign out</a> </div> </li> </ul> </li> </ul> </div> </nav> </header> <aside class="main-sidebar"> <section class="sidebar"> <div class="user-panel"> <div class="pull-left image"> <img src="<?=HTTP.'Assets/Uploads/user2-160x160.jpg'?>" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Alexander Pierce</p> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <form action="#" method="get" class="sidebar-form"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="Search..."> <span class="input-group-btn"> <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i> </button> </span> </div> </form> <ul class="sidebar-menu"> <li class="treeview"> <a href="#"> <i class="fa fa-edit"></i> <span>User</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="<?=HTTP.'admin/main.php?page=addUser'?>"><i class="fa fa-circle-o"></i> Add Users</a></li> <li><a href="<?=HTTP.'admin/main.php?page=displayUser'?>"><i class="fa fa-circle-o"></i> View Users</a></li> </ul> </li> </ul> </section> </aside> <div class="content-wrapper"> <section class="content-header"> <h1> <?=$title?> <small>Control panel</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li class="active"><?=$title?></li> </ol> </section>
You can see the default username and user image in the page as of now that'll be changed after a while. The dashboard setup is complete. Now, we can create models, controllers and view pages we need to and carry on with the development of our application.
Leave a comment