MVC Web Framework Concept (MVCWFC)

Let's start this discussion from the history of web development, as many people already know that the internet world is more interesting and more colorful with the existence of various kinds of websites, starting from:

  1. Static Web: HTML based and pages
  2. Dynamic Web: separating program code and data
  3. Content Management System (CMS): instant web in the form of web templates
  4. Web Framework

You can find out more about the differences between static and dynamic websites  HERE .

1. Content Management System (CMS)

Using a CMS is perfect for instant web creation needs, so you don't need to start from scratch.

It is very helpful for beginner web developers, even a programming layman can operate it, because by using CMS, brainware does not come into direct contact with program code.

CMS can also be used to build an application, but it is not recommended, because not all CMS can be used to build applications, there are many factors that need to be considered.

Some types and examples of CMS:

  • Portal systems: Joomla, Drupal, WordPress, AuraCMS, PHPNuke, etc.
  • Elearning: Moodle, Atutor, DrupalEd, etc.
  • Ecommerce : PrestaShop, ZendCart, VirtueMart Joomla, OsCommerce, etc.
  • Discussion forums: PHPBB, VFM, etc.

2. Web Framework

This package is more flexible for web-based application development, meaning that with Web Framework we can create our own CMS and adjust it based on our needs. This is what distinguishes CMS from Web Framework, where CMS is instant and can be used directly by lay people in programming, while Web Framework is not instant and only programmers can use it.

In general, it is more secure than CMS, because the system structure is divided into three and is often referred to in the abbreviation MVC:

  • Model
  • View
  • Controller

In simple terms, you can analogize Web Framework as a package, in which package there are many folders, and only 3 folders can be accessed by web developers in general, namely Model, View, and Controller, the rest are the main system folders and only contributors to the web framework are allowed to access them.

Model

It is documentation related to databases, such as DDL, DML.

View

It is documentation related to page appearance, such as CSS, HTML, PHP.

Controller

It is documentation related to data requests, access directions, and connections.

In order for a web developer to be able to use a web framework, the requirement is to master the concepts of OOP and MVC.

Examples of web frameworks:

CodeIgniter (CI), CakePHP, Zend Framework, Yii, etc.

If you want to know more about web framework development, please visit hotframeworks.com

3. What is meant by framework?

Framework is a work pattern in completing a task, arranged in such a way (in general) that it can be developed to complete a different task in the same corridor.

In simple terms, you can understand that the framework consists of many powerful classes and methods or functions, and can be used to complete web creation in a short time.

4. Basic Knowledge Before Using Web Framework

[1] Programming Algorithm

It is the most basic knowledge, not only prepared to master web frameworks, but also needs to be prepared before you learn various programming languages.

[2] The basic programming languages ​​of the framework, such as; CSS, HTML, PHP, SQL, and JavaScript.

[3] Object Oriented Programming (OOP) Concepts

The use of Class and Encapsulation is a form of implementation of the OOP concept in PHP, if you do not understand these two things, please refer to the link.

Benefits of Using Framework

  • Makes it easier to understand how an application works,
  • Time spent on creating or developing applications becomes more efficient,
  • Integrity between modules is better maintained.
  • Reusable, so a code can be used repeatedly.

5. Considerations in Choosing a Framework

a. Documentation of the framework itself

So far, the most complete documentation is still held by the CodeIgniter framework.

b. Suitability of the framework with the application

Although CodeIgniter documentation is very complete, it does not mean that the framework can be used for any scale. The analogy is like when we want to eradicate some mosquitoes, we only need to use mosquito repellent or bare hands or a mosquito racket. It does not mean that we need to kill them with missiles, although actually using missiles is also possible.

c. Support with additional features

It is also necessary to pay attention to the feature specifications, whether in the future it will be possible to collaborate with additional features outside the framework.

CodeIgniter Advantages

  • Widely used because it is small in size and easy to access,
  • Framework with minimal configuration,
  • Complete and clear documentation,
  • It is open source and supported by a large community,
  • Easily extensible (plugins, helpers and hooks),
  • Complete library package (database, email, forms, tables, etc.).

Note! - Hook is a trigger for sending emails automatically after registration.

I'm sure you've had this experience (hook), like when you create a Facebook, Twitter, Kaskus, etc. account. You must have registered first, then received a confirmation email.

6. Security

A powerful framework does not mean that it is far from all forms of fraud or cybercrime. Because the framework is open source and many contributors are involved in it, and it is certain that they have more knowledge of the framework, then we do not know when these contributors are still solid in their vision and mission. Therefore, we are advised to diligently update the framework system that we are using.

7. MVC Web Framework Architecture


MVC Web Framework Architecture

In principle, the cycle above starts from the user accessing the browser, which means he makes a request to Controller >> Model >> Controller >> View >> Controller.


MVC Web Framework Concept. Animation by: wegodev.com

MVC is a design pattern in programming, MVC is commonly used by frameworks such as Codeigniter, Symfony, Laravel and others.

MVC itself stands for Model View Controller, where each component has its own role as follows:

  • Models are used to perform query processes to the database.
  • View is used to carry out the display arrangement (design) process.
  • The Controller can be said to be the controller of a system because the Controller receives requests from the user, manages data from the Model, provides data to the View so that the display matches the existing data from the model and finally the Controller will respond to the request made by the user.

What are the advantages of MVC?

If you work as a complete team where there is a Data Architect, Front End Developer & Backend Developer then you can share tasks & files at the same time with the following division:

  • Data Architect can handle files that are in the Model.
  • Front End Developer can handle files that are in the view.
  • Back End Developer can hold the files contained in the controller.

What are the Disadvantages of MVC?

In my personal opinion, if we follow the MVC flow, we will create more files.

8. Practical work

1. Download CodeIgniter on the official website  www.codeigniter.com

2. Extract to wampserver 's www directory 

3. Open wampserver

4. Run the CodeIgniter that was extracted earlier.


By default it will display the welcome page

5. Our first approach was to change the text "Welcome to CodeIgniter" to another sentence (whatever you like), but in the correct way, not the element inspection way!

So what we need to do is access the CodeIgniter >> application >> controller folder, then open the Welcome.php file, there we will know the default CodeIgniter index settings.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

 /**
  * Index Page for this controller.
  *
  * Maps to the following URL
  *   http://example.com/index.php/welcome
  * - or -
  *   http://example.com/index.php/welcome/index
  * - or -
  * Since this controller is set as the default controller in
  * config/routes.php, it's displayed at http://example.com/
  *
  * So any other public methods not prefixed with an underscore will
  * map to /index.php/welcome/<method_name>
  * @see https://codeigniter.com/user_guide/general/urls.html
  */
 public function index()
 {
  $this->load->view('welcome_message');
/*CI secara default mengontrol index ke halaman welcome_message yang ada di folder view,
Maka kita bisa modifikasi di sana (welcome_message)*/
 }
}
?>

6. Modify the heading < h1 > of the "welcome_message.php" file in the view folder.

<body>

<div id="container">
 <!-- <h1>Welcome to CodeIgniter</h1> -- SEBELUM -->
 <h1>Monggo Sinau CodeIgniter</h1> <!-- SESUDAH -->

 <div id="body">
  <p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

  <p>If you would like to edit this page you'll find it located at:</p>
  <code>application/views/welcome_message.php</code>

  <p>The corresponding controller for this page is found at:</p>
  <code>application/controllers/Welcome.php</code>

  <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
 </div>

 <p class="footer">Page rendered in <strong>0.1092</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>

Then the display will change like this;


Rename the Welcome to CodeIgniter heading

7. Next we are asked to create a new file with a new class in the controller, and a new file in the view. The way to duplicate the existing file and then modify it!

I created a WowCi.php file with the class name WowCi, then my default index was directed to the wow.php file in the view folder

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class WowCi extends CI_Controller {

 /*
  * Index Page for this controller.
  *
  * Maps to the following URL
  *   http://example.com/index.php/welcome
  * - or -
  *   http://example.com/index.php/welcome/index
  * - or -
  * Since this controller is set as the default controller in
  * config/routes.php, it's displayed at http://example.com/
  *
  * So any other public methods not prefixed with an underscore will
  * map to /index.php/welcome/<method_name>
  * @see https://codeigniter.com/user_guide/general/urls.html
  */
 public function index()
 {
  $this->load->view('wow');
 }
}
?>

Next, I created a wow.php file in the view folder, and I gave the <h1> heading a different name so I could see the difference between trials 1, 2, and 3.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Welcome to CodeIgniter</title>

 <style type="text/css">

 ::selection { background-color: #E13300; color: white; }
 ::-moz-selection { background-color: #E13300; color: white; }

 body {
  background-color: #fff;
  margin: 40px;
  font: 13px/20px normal Helvetica, Arial, sans-serif;
  color: #4F5155;
 }

 a {
  color: #003399;
  background-color: transparent;
  font-weight: normal;
 }

 h1 {
  color: #444;
  background-color: transparent;
  border-bottom: 1px solid #D0D0D0;
  font-size: 19px;
  font-weight: normal;
  margin: 0 0 14px 0;
  padding: 14px 15px 10px 15px;
 }

 code {
  font-family: Consolas, Monaco, Courier New, Courier, monospace;
  font-size: 12px;
  background-color: #f9f9f9;
  border: 1px solid #D0D0D0;
  color: #002166;
  display: block;
  margin: 14px 0 14px 0;
  padding: 12px 10px 12px 10px;
 }

 #body {
  margin: 0 15px 0 15px;
 }

 p.footer {
  text-align: right;
  font-size: 11px;
  border-top: 1px solid #D0D0D0;
  line-height: 32px;
  padding: 0 10px 0 10px;
  margin: 20px 0 0 0;
 }

 #container {
  margin: 10px;
  border: 1px solid #D0D0D0;
  box-shadow: 0 0 8px #D0D0D0;
 }
 </style>
</head>
<body>

<div id="container">
 <h1>Wow 404</h1> <!-- Percobaan ke 3 (Terakhir) -->

 <div id="body">
  <p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

  <p>If you would like to edit this page you'll find it located at:</p>
  <code>application/views/welcome_message.php</code>

  <p>The corresponding controller for this page is found at:</p>
  <code>application/controllers/Welcome.php</code>

  <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
 </div>

 <p class="footer">Page rendered in <strong>0.1092</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>
</html>

8. Running the WowCi file in the controller, the method is as explained in the Welcome.php file contained in the comment syntax.

Here is the segment uri to access ithttp://localhost/CodeIgniter-3.1.0/index.php/WowCi


WowCi file controlled wow file view, DONE!


Post a Comment

Previous Next

نموذج الاتصال